/* allgemeine Einstellungen */
* {box-sizing: border-box;}
html {height: 100%;scroll-behavior: smooth;}   
body {min-height: 100%;margin: 0;padding:0;font-family: 'Quicksand', sans-serif;color:#303030;-webkit-hyphens:auto; -moz-hyphens:auto;hyphens:auto;
      font-size: 20px;line-height: 1.5em;display:flex;flex-direction: column;}
@media screen and (max-width: 1050px) {body {font-size: 19px}}
@media screen and (max-width: 600px) {body {font-size: 18px}}
@font-face {font-family: 'Quicksand' sans-serif;font-weight:300;src: local(), url(fonts/Quicksand-Light.woff2) format("woff2");font-display:swap}
@font-face {font-family: 'Quicksand' sans-serif;font-weight:400;src: local(), url(fonts/Quicksand-Regular.woff2) format("woff2");font-display:swap}
@font-face {font-family: 'Quicksand' sans-serif;font-weight:500;src: local(), url(fonts/Quicksand-Medium.woff2) format("woff2");font-display:swap}
@font-face {font-family: 'Quicksand' sans-serif;font-weight:600;src: local(), url(fonts/Quicksand-SemiBold.woff2) format("woff2");font-display:swap}
@font-face {font-family: 'Quicksand' sans-serif;font-weight:700;src: local(), url(fonts/Quicksand-Bold.woff2) format("woff2");font-display:swap}
@font-face {font-family: 'Quicksand' sans-serif;font-style: normal;src: local(), url(fonts/Quicksand-VariableFont_wght.woff2) format("woff2");font-display:swap}

/* Header mit Navigation */
header {top: 0;position: -webkit-sticky;position: sticky;box-shadow: 0px 6px 6px -6px #333;z-index:1000;}
header .header {width: 100%;height:auto;padding: 10px;background-color: #303030;color:#ffffff;}
.header img {float:right;max-width:100px;width:100%;height:auto}
.header-flexbox {display:flex;margin:0 auto;align-items:center;justify-content:space-around;flex-direction:row;width:100%;height:auto;}
.header-item-left {width:85%;}
.header-item-right {width:15%;text-align:end;padding-right:10px;}
@media screen and (max-width: 967px) {.header-item-left {width:50%;} .header-item-right {width:50%;}}
/* Navigation desktop */
.haemboerger {font-size:2.5em;color:#efefef;cursor:pointer;}  
.navigation {overflow:hidden;}
.navigation a {text-decoration:none;padding:0.25em 1em;color: #efefef;display: inline-block;}
.navigation a:hover {color: #788B4B;background-color:#FDFAF0;border-radius: 3px;}
/* Navigation mobil Overlay */  
.overlay {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgba(0,0,0, 0.9);overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 10%;left: 5%;width: 90%;text-align: left;}
.overlay a {padding: 1em;text-decoration: none;font-size: 1.25em;color: whitesmoke;display: block;transition: 0.3s;border-bottom: 1px dashed whitesmoke;}
.overlay a:hover, .overlay a:focus {color: gold;}
.overlay .closebtn {position: absolute;top: 5%;right:5%;font-size: 3em;background-color: rgba(0,0,0, 0.1);color:whitesmoke;border:0;cursor: pointer;}
/* Media queries Navigation */
@media screen and (max-width:1000px) {.navigation a {padding:0.25em 0.75em;}}
@media screen and (min-width: 968px) {.haemboerger {display:none}}
@media screen and (max-width: 967px) {.navi {display:none}}

/* Hauptteil */
main {width: 100%;max-width: 1400px;margin: 0 auto;padding:0 1.5em 1.5em 1.5em;}
a.mainlink {color: #3C71B1;text-decoration: none;border-bottom: 1px dotted #0D6B9B;}
a.mainlink:hover {color:#788B4B;text-decoration: none;border-bottom:none;}
h1 {color: #3C71B1;font-weight:500;font-size:1.65em;line-height:1.5em;}
h2 {color: #3C71B1}
h3 {color:#788B4B}
p {text-align: justify;}

/* INDEX Hausflex-Container */
.haus-flex-container {width: 100%;height: auto;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;margin-top: 2.5em;}
.haus-flex-item {width: 22.5%;height: auto;border: 1px solid gainsboro;box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;margin-bottom: 2rem;display: flex;flex-direction: column;}
.haus-flex-item p {font-size:1rem;line-height:1.35em;padding: 0.5em;text-align: justify;flex: 1 0 auto}
@media screen and (min-width: 1200px) {.medium {display:none}}
@media screen and (max-width: 1199px) {.small {display:none} .haus-flex-item {width: 48.5%}}
@media screen and (max-width: 649px) {.small {display:none} .haus-flex-item {width: 98%} .haus-flex-container {text-align: center}}
/* INDEX Icons */
.iconfield {background-color: #FDFAF0;margin: 35px 0;}
.icon-flex-container {max-width: 1400px;height: auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;margin: 0 auto;}
.icon-flex-item {width: 33%;height: auto;padding:30px;margin-bottom: 25px;display: flex;flex-direction: column;text-align: center;}
.icon-flex-item p {padding: 10px;text-align: justify;flex: 1 0 auto}
@media screen and (max-width: 750px) {.icon-flex-item {width: 100%}}
/* INDEX Umgebung */
.umgebung_ueberschrift {padding-left: 20px;}
@media screen and (max-width: 750px) {.umgebung_ueberschrift {text-align:center; padding-left:0;}}
.umgebung {max-width: 1400px;width:100%;margin: 0 auto 50px auto;padding: 0 20px;}
.umgebung-flex-container {width: 100%;height: auto;display: flex;flex-direction: row;justify-content: space-around;flex-wrap: wrap;margin-top: 75px}
.umgebung-flex-item {width: 33%;height: auto;margin-bottom: 25px;display: flex;flex-direction: column;text-align: center;}
.umgebung-flex-item h3 {color:#788B4B;}
.umgebung-flex-item p {padding: 10px;text-align: justify;flex: 1 0 auto}
.mehr-button {padding: 10px;text-align:left;}
@media screen and (max-width: 750px) {.umgebung-flex-item {width: 100%}}
.umgebungsbild {max-width:100%;height:auto;margin: 0 auto;transition:0.5s;}        
.umgebungsbild:hover {transform:scale(1.1);}

/* HAUS FEWO-Container */
.fewo-flex-container {width: 100%;height: auto;display: flex;flex-direction: row;justify-content: space-between;}
.fewo-flex-item-1 {width: 65%;height: auto;}
.fewo-flex-item-2 {width: 30%;height: auto;}
.fewo-flex-item-2 p {text-align: end;}
.smallpic {max-width:100%;height:auto;padding:5px;border-radius:3px;border:1px solid #efefef;box-shadow: 5px 10px 10px #efefef;}
.mediumpic {display: none;max-width:100%;height:auto;padding:5px;border-radius:3px;border:1px solid #efefef;box-shadow: 5px 10px 10px #efefef;}
.pic {display: none;max-width:100%;height:auto;padding:5px;border-radius:3px;border:1px solid #efefef;box-shadow: 5px 10px 10px #efefef;}
@media screen and (max-width: 1000px) {
    .fewo-flex-container {flex-direction: column;}
    .fewo-flex-item-1 {width: 100%;}
    .fewo-flex-item-2 {width: 100%;}
    .fewo-flex-item-2 img {margin: 50px auto;}
    .smallpic {display:none;}
    .mediumpic {display:none;}
    .pic {display:block;}
    .space {display: none;}
    }
@media screen and (max-width: 640px) {
    .smallpic {display:none;}
    .mediumpic {display:block;}
    .pic {display:none;}
    }

/* BILDER Container */
.bilder-flex-container {width: 100%;height: auto;display: flex;flex-wrap:wrap;justify-content: space-between;}
.bilder-flex-item {width: 25%;padding: 10px;text-align: center;}
.bilder-flex-item img {max-width: 100%;height: auto;border-radius: 5px;}
@media screen and (max-width: 850px) {.bilder-flex-item {width: 48.5%}}
@media screen and (max-width: 450px) {.bilder-flex-item {width: 100%}}

/* INFO */
/* INFO-Container */
.info-flex-container {width: 100%;height: auto;display: flex;flex-direction: row;justify-content: space-between;}
.info-flex-item-1 {width: 65%;height: auto;}
.info-flex-item-2 {width: 30%;height: auto;}
.info-flex-item-2 p {text-align: end;}
.mediumpic {display: none;}
.pic {display: none;}
@media screen and (max-width: 1000px) {
    .info-flex-container {flex-direction: column;}
    .info-flex-item-1 {width: 100%;}
    .info-flex-item-2 {width: 100%;}
    .info-flex-item-2 img {margin: 50px auto;}
    .smallpic {display:none;}
    .mediumpic {display:none;}
    .pic {display:block;}
    .space {display: none;}
    }
@media screen and (max-width: 640px) {
    .smallpic {display:none;}
    .mediumpic {display:block;}
    .pic {display:none;}
    }
label.info {display: block;padding: 10px;cursor: pointer;background: #FDFAF0;border-radius: 3px;color: #515C31;border: 1px solid #788B4B;transition: ease .5s;margin-top: 1.5em;}  
  label.info:hover {background: #788B4B;color: #FDFAF0;} 
  .info-content {padding: 5px;}
  .toggle-input + .info-content {display: none;}
  .toggle-input:checked + .info-content {display: block;}
  .toggle-input {display: none;}
  mark {background-color:#FDFAF0;}

/* FOOTER */
footer {width: 100%;height: auto;background-color: #333;left: 0;bottom: 0;}
.footer1 {background-color: #efefef;text-align:center;padding: 0.5em;}
a.nachoben {color:#444D2C;text-decoration:none;font-size:1em;border-bottom:1px dotted #3C71B1;}
a.nachoben:hover {color:#3C71B1;border-bottom:1px dotted #444D2C;}
.footer2 {background-color: #333;padding: 0.5em;max-width: 1400px;margin: 0 auto;}
.footer-flex-container {width: 100%;height: auto;display: flex;flex-direction: row;justify-content: center;flex-wrap: wrap;}
.footer-flex-item {width: 30%;height: auto;display: flex;justify-content: center;}
.footer-flex-item p {color: #efefef;font-size: 1em;text-align:left;}
a.footer2link {color: #A6B57E;text-decoration: none;}
a.footer2link:hover {color:#FDFAF0;}
@media screen and (max-width: 525px) {.footer-flex-item {width: 100%; justify-content: flex-start; padding-left: 1em;}}
.footer3 {width:100%;background-color:#222;padding:0.5em;text-align:center;}
a.footer3link {font-size:0.85em;font-weight:300;color:#A6B57E;text-decoration:none;}
a.footer3link:hover {color:#FDFAF0;} 

/*Begrüßung*/
.slider {display: flex;align-items: center;justify-content: center;}
.breadcromb {padding:1em 0 0 1.5em;font-size:0.75em;}
.breadcromb a {color:#345200;font-weight:400;text-decoration:none;}
.breadcromb a:hover, a:active, a:focus {color:#D73D01;border-bottom:1px dotted #345200;}
.benvenuti {
        position:fixed;
        top:3rem;
        z-index:5000;
        animation: einausblenden;
        animation-duration:10s;
        animation-iteration-count: infinite;
        }
.benvenuti p {font-size:7vw;color:white;line-height: 1.5em;text-align: center;font-weight:400;background-color:#333;
        opacity: 0.5;padding:1.5rem;}

    @keyframes einausblenden {
        0% {
        transform: scale(0.); bottom:0px; opacity: 0;}
        5% {
        transform: scale(0.1); bottom:0px; opacity: 0;}
        20% {
        transform: scale(1); bottom:50%; opacity: 1;}
        40% {
        transform: scale(1); bottom:50%; opacity: 1;}
        60% {
        transform: scale(0.1); bottom:0px; opacity: 0;}
        100% {
        transform: scale(0.); bottom:0px; opacity: 0;}
        }
        
    @media screen and (max-width:600px) {
        .benvenuti {top:4rem;}
        }