/*** Einige Defaults ***/
html                 { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.hidden       { display: none; }
.clear        { clear: both; }
.help         { cursor: help; }
.comment      { color: #999; font-style: italic; }
.highlight    { color: #fff; background-color: #009; }
.first        { margin-top: 0; }
label, legend { cursor: pointer; }
hr            { border: none; border-top: 1px solid #666; margin: 30px 10px; }

body, header, div, ul, li {
  margin: 0;
  padding: 0;
}

h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }

main li {
  margin-left: 1em;
}

nav li { margin-left: 0; }

nav li li {
  margin-left: 1em;
}

body {
  background-color: #e8f3fd;
  background-image: url(../img/layout/body_background_coats_of_arms.jpg);
  color: #265f9e;
  font-family: Trebuchet MS, Verdana, Roboto, sans-serif;
  font-size: 16pt;
}

a { color: #3e3e3e; text-decoration: none; }

a:focus, a:active, a:hover, a.active {
  text-decoration: underline;
}

label, .pointer, input[type=submit], input[type=reset], button {
  cursor: pointer;
}

header a { color: #fff; }
main a   { color: #da121a; }

a[href^="mailto:"]:before {
  content: "\2709";
  margin-right: 5px;
}

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 5px;
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

div.notice, div.error, div.success {
  padding: 0 1em;
  margin: 1em 0;
  border: 1px solid #e2f6eb;
  border-radius: 5px;
}

div.error   { border-color: #c33; }
div.success { border-color: #3c3; }

div.error h2, div.error ul li { color: #c33; }

span.notice {
  margin-left: 0.4em;
  font-size: 0.8em;
  color: #999;
}

span.filename {
  border: 1px solid #ccc;
  background-color: #ffefbe;
}

section {
  margin: 1em 0;
}

section > a {
  display: block;
  margin-left: 1em;
  border-left: 3px solid #fff; /* invisible border for alignment with following text */
}

section article {
  padding: 0 1em;
  margin-top: 0.5em;
  background-color: #f1f5fa;
  border: 3px solid #dae5f2;
  border-radius: 10px;
}

section article > :first-child { margin-block-start: 0.5em; }

section article img.teaser {
  float: right;
  position: relative;
  top: -1em;
  right: -2em;
  border: 6px solid #bdd7f3;
  border-radius: 10px;
}

/* Formulare und Eingabefelder */
input, textarea, select, button {
  border-radius: 5px;
  font-size: inherit;
}

input[type=text], textarea {
  width: 100%;
}

form .short { width: 200px; }
form .long  { width: 400px; max-width: 100%; }
textarea.long { height: 300px; }
form.spacing div { margin-bottom: 1em; }
form section h3 { margin-bottom: 10px; }

input[type=text], input[type=password], input[type=submit], input[type=reset], select, textarea, button {
  border: 2px solid #ccc;
  background-color: #efefef;
  outline: none; /* Prevent Chrome/Webkit browsers from applying their custom styling */
}

input[type=checkbox], input[type=radio] {
  margin-right: 10px;
}

input[type=submit] {
  color: #fff;
  background-color: #265f9e;
  border-color: transparent;
}

input[type=reset] {
  background-color: #666666;
  border-color: transparent;
}

input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active,
input[type=password]:hover,
input[type=password]:focus,
input[type=password]:active,
select:hover,
select:focus,
select:active,
textarea:hover,
textarea:focus,
textarea:active {
  border-color: #265f9e;
}

input[type=submit]:hover,
input[type=submit]:focus,
input[type=submit]:active,
input[type=reset]:hover,
input[type=reset]:focus,
input[type=reset]:active {
  background-color: #da121a;
}

input[type=checkbox]:hover,
input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:hover,
input[type=radio]:focus,
input[type=radio]:active {
  outline: 2px solid #265f9e;
}

input[disabled] {
  background-color: #6e6e6e;
  color: #fff;
  cursor: not-allowed;
}

.required {
  color: red;
  font-weight: bold;
}

select.required, textarea.required {
  border-color: red !important;
}

input.required  {
  border-color: red !important;
  color: #000;
  outline: 2px solid #f00;
}

/*** Layout-Elemente ***/
body > div.body {
  max-width: 1450px;
  margin: auto;
  background-color: #fff;
}

/* Header und Balken-Menü */
header {
  width: 100%;
  background-color: #da121a;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  padding: 0.5em 0;
}

header > * {
  margin-left: 1.5em;
}

header nav.horizontal {
  display: flex;
  flex-direction: row;
}

a#home {
  display: inline-block;
  width: 36px;
  height: 34px;
  background: url(../img/layout/icon_home.png) no-repeat;
}

header #menu a.menu {
  display: inline-block;
  width: 2em;
  padding-top: 0.3em;
  cursor: pointer;
}

header #menu a.menu span {
  display: block;
  height: 4px;
  background-color: #fff;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: 0.5s ease-out 0s;
}

header #menu a.menu span:last-child {
  margin-bottom: 0;
}

header #menu nav {
  display: none;
  position: absolute;
  left: 1em;
  top: 1.5em;
  padding: 1em;
  background-color: #da121a;
  border: 6px solid #fff;
  border-radius: 20px;
  box-shadow: 3px 3px 6px #ccc;
}

body.js header #menu nav { top: 3em; }

header #menu nav li {
  padding-top: 0.3em;
}

/* Menu-Interaction */
body.nojs header #menu:focus  nav,
body.nojs header #menu:hover  nav,
body.nojs header #menu:active nav {
  display: block;
}

header #menu a.menu.active span:nth-child(1) { transform: rotate(45deg)  translate(0,  0.3em); }
header #menu a.menu.active span:nth-child(2) { display: none; }
header #menu a.menu.active span:nth-child(3) { transform: rotate(-45deg) translate(0, -0.3em); }

div#logo {
  width: 100%;
  padding-top: 14.62%;
  background-image: url(../img/layout/header_giebel_claim3.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Nav */
nav a {
  color: #fff;
  text-decoration: none;
  transition: 0.5s ease-out 0s;
}

nav ul {
  list-style-type: none;
}

nav.horizontal li {
  float: left;
  padding: 0.5em 1em;
  font-size: 1.2em;
}

/* Search */
input.searchterm {
  border-radius: 5px;
  width: 7em;
  padding: 0;
}

button.search {
  width: 2em;
  height: 2em;
  border: 0;
  background: url(../img/layout/icon_search.png) no-repeat;
  background-size: contain;
  margin-left: 0.5em;
}

li.searchform { display: flex; }

li.searchform input.searchterm {
  width: 6em;
}

/* Main content */
main {
  max-width: 1176px;
  margin: 1em auto;
  padding: 0 1em;
  display: flex;
}

main nav {
  padding: 1em;
  background-color: #da121a;
  border: 6px solid #fff;
  border-radius: 20px;
  box-shadow: 3px 3px 6px #ccc;
  flex-width: 0.3;
  margin-right: 2em;
}

div.main > *:first-child {
  margin-top: 0;
}

div.thumb img {
  border: 6px solid #bdd7f3;
  border-radius: 10px;
}

div.thumb p.caption { margin-top: 0; }

/* Files */
div.file_list, div.upload_area {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0.5em 0;
  padding: 0.5em;
  background-color: #efefef;
}

div.file_list > div {
  display: flex;
}

div.file_list a {
  display: flex;
  min-height: 50px;
  align-items: center;
  margin-bottom: 0.5em;
}

div.file_list a.folder, div.file_list a.file {
  width: 100%;
  padding-left: 75px;
}

div.file_list a.edit {
  width: 75px;
  margin-left: 5px;
  min-height: 50px;
  background: url(../img/layout/icon_edit_file.png) no-repeat 0 10px;
}

div.file_list a.delete {
  width: 75px;
  margin-left: 5px;
  min-height: 50px;
  background: url(../img/layout/icon_delete_file.png) no-repeat 0 10px;
}

div.file_list a:focus,
div.file_list a:active,
div.file_list a:hover {
  background-position: 0 -360px;
}

div.file_list a.folder {
  background: url(../img/layout/icon_folder.png) no-repeat 0 5px;
}

div.file_list a.file {
  background: url(../img/layout/icon_file.png) no-repeat 0 5px;
}

div.file_list a.file.has_thumb {
  background-image: none;
  padding-left: 12px;
}

div.file_list a img {
  width: 50px;
  max-height: 75px;
  margin-right: 13px;
}

div.file_list a.folder.up1level {
  background: url(../img/layout/icon_up.png) no-repeat 0 5px;
}

div.upload_area {
  padding: 1em;
  border: 2px dashed #ccc;
  text-align: center;
}

div.upload_area:hover, div.upload_area.highlight {
  border-color: #33f;
  color: #da121a;
}

div.upload_area button {
  margin-top: 0.5em;
  padding: 0.5em;
  border: 1px dashed #33f;
}

div.upload_area div.progress {
  margin: 0.5em 0;
  text-align: left;
  font-size: 0.8em;
}

div.upload_area div.progress progress {
  width: 100px;
}

div.upload_area div.progress div.result {
  padding: 0 1em;
  margin: 1em 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

div.upload_area div.progress div.result.success {
  border-color: #3c3;
}

div.upload_area div.progress div.result.error {
  border-color: #c33;
}

div.upload_area div.progress div.success span {
  color: #33f;
}

div.upload_area div.progress div.error span {
  text-decoration: line-through;
}


/* Footer */
footer {
  color: #fff;
  background-color: #da121a;
}

footer nav a { color: #fff; }

footer nav.horizontal li { font-size: 1em; float: right; }

/* Clearfixes */
header::after, main::after, footer::after, main section::after, .clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/*** Breakpoints ***/
.phone_only                  { display: none; }
.tablet_only                 { display: none; }

/* Large/Desktop */
@media (max-width: 1199px) {
  .nodesktop                 { display: none; }
}

/* Medium */
@media (max-width: 991px) {
  nav.horizontal li          { font-size: 1em; }
  footer nav.horizontal li   { float: none; text-align: right; padding: 0.2em 1em; }
}

/* Small/Tablet */
@media (max-width: 767px) {
  .notablet                  { display: none; }
  .tablet_only               { display: block; }
  body                       { font-size: 14pt; }
}

/* X-Small/Phone */
@media (max-width: 600px) {
  .nophone                   { display: none; }
  .phone_only                { display: block; }
}