/*** Einige Defaults ***/
:root { color-scheme: normal light dark; } /* Bitte die Farben im Dark Mode nicht verändern */

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; }
.center       { text-align: center; }
label, legend { cursor: pointer; }
hr            { border: none; border-top: 1px solid #fff; margin: 30px 10px; }

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

p { margin-block-start: 0; margin-top: 0; }

body {
  background-color: #f4f8f7;
  background-image: url(../img/background_biancajueriens_2021.png);
  color: #000;
  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] { cursor: pointer; }

div.content a { color: #f2e048; }

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 {
  padding: 0 10px 10px 10px;
  margin-bottom: 20px;
  border: 1px solid #e2f6eb;
}

div.error {
  padding: 10px;
  border: 1px solid #c33;
}

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

div.success {
  padding: 10px;
  border: 1px solid #3c3;
}


/* Formulare und Eingabefelder */
input,textarea,select { font-size: 16pt; }

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

section {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 15px;
  border: 1px solid #5a8671;
  border-radius: 10px;
}

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

input[type=text], input[type=password] {
  text-align: left;
}

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

input[type=submit] {
  color: #fff;
  background-color: #5a8671;
}

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

input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active,
input[type=tel]:hover,
input[type=tel]:focus,
input[type=tel]:active,
input[type=email]:hover,
input[type=email]:focus,
input[type=email]: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: #f2e048;
}

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

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

input[type=radio]:hover,
input[type=radio]:focus,
input[type=radio]:active {
  outline: none;
}

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 ***/

/* Top-Bar: semi-transparenter Balken über ganze Seitenbreite */
div#top_bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 395px; /* Wird per Javascript angepasst beim Laden und bei Resize */
  background-color: #fff;
  opacity: 0.6;
}

div.outer_wrapper {
  z-index: 1;
  max-width: 1244px;
  margin: auto;
}

div.inner_wrapper {
  margin: 0 80px;
  background-color: #7ea995;
  background-color: #7faa96;
/* Optionaler Farbverlauf durch verschiedene Grüntöne: */
/*  background-image: linear-gradient(60deg, #aac0b8, #7eaa96, #7a9c8c, #a0c0b3, #bdcec6); */
}


/* Header und Balken-Menü */
header {
  width: 100%;
  background-color: #5a8671;
}

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

header menu {
  float: left;
  margin-top: 15px;
  margin-bottom: 5px;
  margin-left: 10px;
}

header menu a.menu {
  display: inline-block;
  width: 30px;
  cursor: pointer;
}

header menu a.menu span {
  display: block;
  height: 3px;
  background-color: #000;
  margin-bottom: 4px;
  border-radius: 5px;
}

header menu nav {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  padding-left: 10px;
  padding-bottom: 15px;
  background-color: #5a8671;
  border-bottom: 1px solid #f2e048;
  margin: 0 40px;
}

header menu nav li {
  padding-bottom: 5px;
}

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

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

nav a:link, nav a:visited { text-decoration: none; }

nav a:focus, nav a:hover, nav a:active, nav a.active { color: #fff; text-decoration: none; }

nav ul {
  list-style-type: none;
  text-transform: uppercase;
}

nav.horizontal li {
  float: left;
  margin: 15px 25px;
  font-size: 20pt;
}

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

footer nav a { color: #fff; }

footer nav.horizontal li { margin: 12px 30px; font-size: 18pt; }

footer li.copy { float: right; }

/* Seiten-Inhalt/Content */
div.content {
  color: #fff;
  min-height: 300px;
  padding: 30px;
}

div.content p {
  margin-bottom: 20px;
}

div.content ul {
  margin-left: 20px;
  margin-bottom: 20px;
}

div.float {
  width: 49%;
  margin-bottom: 20px;
  /* Die "Lücke" unterhalb der img entfernen: */
  line-height: 0;
  font-size: 0;
}

div.float.small   { width: 25%; }
div.float div.img { border: 3px solid #fff; border-radius: 5px; }
div.float img     { width: 100%; }
div.float.left    { float: left;  margin-right: 20px; }
div.float.right   { float: right; margin-left:  20px; }

div.float div.img:not(:last-child) { margin-bottom: 20px; }

table.preise                      { width: 100%; }
table.preise th                   { text-align: left; text-decoration: underline; }
table.preise td:last-child        { text-align: right; }
table.preise td:first-child       { width: 75%; text-align: left; }
table.preise tr td:not([colspan]) { border-bottom: 1px solid #bbb; }

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


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

/* Large/Desktop */
@media (max-width: 1199px) {
  .nodesktop                 { display: none; }
  nav.horizontal li          { margin: 12px 14px; font-size: 18pt; }
  div.content                { padding: 25px; }
  footer nav.horizontal li   { margin: 10px 25px; font-size: 16pt; }
}

/* Medium */
@media (max-width: 991px) {
  nav.horizontal li          { margin: 10px 8px; font-size: 14pt; }
  div.content                { padding: 15px; }
}

/* Small/Tablet */
@media (max-width: 767px) {
  .notablet                  { display: none; }
  .tablet_only               { display: block; }
  body                       { font-size: 14pt; }
  div.inner_wrapper          { margin: 0 40px; }
  nav.horizontal li          { margin: 8px 10px; font-size: 14pt; }
  div.content                { padding: 10px; }
}

/* X-Small/Phone */
@media (max-width: 600px) {
  .nophone                   { display: none; }
  .phone_only                { display: block; }
  div.inner_wrapper          { margin: 0; }
  div.float, div.float.small { width: 40%; }
  header menu nav            { width: 100%; margin: 0px; }
}