html, body {margin: 0; font-family: Inter, sans-serif;}
body {background-color: #fff; color: #000; max-width: 1920px; margin: 0 auto;}
html {box-sizing: border-box; scroll-behavior: smooth; background-color: #f8f8f8;}
* {box-sizing: inherit;}
@media print {
body, html {background-color: #fff;}
}

:root {
  --main-green: #6EAA2B;
}


header, main, footer {width: 100%;}
section {max-width: 1300px; margin: 0 auto; margin-bottom: 100px;}
section#header, section#footer, section#footer-bottom {margin-bottom: 0;}
@media (max-width: 900px) {
section {padding: 0 5%;}
}
@media (min-width: 900px) and (max-width: 1200px) {
section {padding: 0 60px;}
}
@media (min-width: 1200px) {
section {padding: 0 80px;}
}



h1, h2, h3 {font-family: Oswald, sans-serif; hyphens: auto; letter-spacing: 0.5px;}
h1 {font-size: 40px; line-height: 54px; font-weight: 400; margin:0px 0 7px 0;}
h2 {font-size: 28px; line-height: 40px; font-weight: 400; color: var(--main-green); margin: 0 0 40px 0; padding: 4px 0 7px 0; border-top: 2px dotted var(--main-green); border-bottom: 2px dotted var(--main-green);}
h2.h2m {margin: 60px 0}
h3 {font-size: 25px; line-height: 40px; font-weight: 400; color: var(--main-green); margin: 60px 0 30px 0;}
p {font-size: 20px; line-height: 36px; font-weight: 300; margin: 0 0 30px 0;}
p.m0 {margin: 0;}
p.m5 {margin-bottom: 5px;}
main a {color: var(--main-green); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--main-green);}
main a:hover {color:#558025; border-bottom: 1px solid #558025;}
button {font-family: Inter, sans-serif;}
.nb {display: inline-table;}
dt, dd {font-size: 22px; font-weight: 400; line-height: 37px;}
img {vertical-align: middle;}
ul {margin: 0; padding: 0;}
li {list-style-type: none;}
strong {font-weight: 400;}
hr {border: 0; display: flow-root; padding-top: 100px; width: 100%; border-bottom: 2px dotted var(--main-green);}
.nobr {white-space: nowrap;}





/* HEADER */


header {width: 100%; z-index: 999; display: flow-root;}

@media (min-width: 850px) {
header {position:relative; width: 100%; background-color: rgba(0,0,0,0.0); transition: all 0.5s ease; padding-top: 30px; padding-bottom: 0px;}
.black {background-color: rgba(0,0,0,0.7); backdrop-filter: blur(20px); padding-top: 22px; padding-bottom: 22px;}
}


#logo {position: relative; float: left; margin:0; max-width: 60%;}
#logo a {display: inline-block;}
#logo img {width: 100%; max-width: 160px;}




.mobil-menu {display: none;}

@media (max-width: 849px) {
header {padding-top: 30px; padding-bottom: 25px;}
nav {position: relative; max-height3: 0; display: none; width: 100%; height: 100%; overflow: hidden; z-index: 999;}
nav ul {margin: 40px 0 0 0; padding: 0;}
nav ul li a {text-decoration: none; padding: 16px 0; font-size: 18px; color: #000; display: block; border-bottom: 1px dotted #425063;}
nav ul li#navhome a {border-top: 1px dotted #425063;}
nav ul li a:hover {background-color: #F4F9E7;}
nav ul li.active a {color: var(--main-green); font-weight: 400;}

.mobil {cursor: pointer; float: right; padding: 20px 10px; margin: 4px 0px 0 0; border-radius: 8px; margin-right: -10px;}
.mobil-lines {background: var(--main-green); display: block; height: 3px; position: relative; width: 25px; border-radius: 3px;}
.mobil-lines::before,
.mobil-lines::after {background: var(--main-green); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; border-radius: 3px;}
.mobil-lines::before {top: 8px;}
.mobil-lines::after {top: -8px;}
.mobil-menu:checked ~ nav {max-height: 100%;}
.mobil-menu:checked ~ .mobil .mobil-lines {background: transparent;}
.mobil-menu:checked ~ .mobil .mobil-lines::before {transform: rotate(-45deg); top: 0;}
.mobil-menu:checked ~ .mobil .mobil-lines::after {transform: rotate(45deg); top: 0;}
}

@media (max-width: 410px) {
.mobil {margin-top: 0px;}
}

@media (min-width: 850px) {
nav {float: right; padding: 2px 0 0px 0; display: initial!important;}
nav ul {margin: 5px -18px 0 0; padding: 0; font-size: 0;}
nav ul li {margin: 0px 10px; display: inline;}
nav ul li a {font-family: Oswald, sans-serif; letter-spacing: 0.5px; padding: 40px 16px 55px 16px; text-decoration: none; font-size: 22px; font-weight: 400; line-height: 24px; color: var(--main-green); display: inline-block; transition: background-color 0.2s ease; border-top-left-radius:5px; border-top-right-radius:5px;}
nav ul li a:hover {background-color: #F4F9E7;}
nav ul li.active a:hover {background-color: #F4F9E7;}
nav ul li.active a:after {content: ""; display: block; position: relative; width:100%; border-bottom: 3px solid var(--main-green); margin: 5px auto 0 auto; animation: borderfader 1.0s ease;}
nav ul li.active a, nav ul li.active2 a {padding-bottom: 47px;}
.mobil-lines {display: none;}
.hamb {display: none;}

#navhome {display: none;}

}

@keyframes borderfader {
  0% {opacity: 0; width: 10px;}
  100% {opacity: 1;}
}




#big-image {margin: 0 auto; width: 100%; max-width: 1920px; text-align: center;}
#big-image img {max-width: 100%;}


#green {margin: 0 auto 120px auto; max-width3: 1920px; padding-top: 50px; background-color: #F4F9E7; border-bottom4: 2px solid #B1C79A;}
#green24 {margin: 0 auto 120px auto; max-width3: 1920px; padding-top: 50px; background-color: #EFF3E7; border-bottom4: 2px solid #B1C79A;}


@media (max-width: 849px) {
#heading {margin-bottom: 100px;}
}
@media (min-width: 850px) {
#heading {margin-bottom: 120px;}
}
#heading, #head {text-align: center;}
#heading p, #head p {color: var(--main-green); font-size: 24px; font-weight: 700;}
#head {padding-bottom: 90px;}
#head #termin, #heading #termin {padding: 10px 20px; border: 1px solid var(--main-green); display: table; margin: 60px auto 0 auto;}
#head #termin p, #heading #termin p {margin: 0; color: #000; font-size: 20px; font-weight: 400;}





/* MAIN */


main {padding-bottom: 40px;}
#home #kontakt, #home #angebot {display: flow-root; margin-bottom: 0; padding-bottom: 100px;}

@media (max-width: 849px) {
#home #kontakt .left, #home #angebot .left {max-width: 600px; margin-bottom: 100px;}
#home #kontakt .right, #home #angebot .right {text-align: center;}
}
@media (min-width: 850px) {
#home #kontakt .left, #home #angebot .left {float: left; width: 60%; max-width: 500px;}
#home #kontakt .right, #home #angebot .right {float: right; width: 35%; text-align: right;}
}
#home #kontakt p.tel, #home #kontakt p.mail {margin-left: 60px;}
#home #kontakt p:before {font-family:'Font Awesome 5 Free'; color: var(--main-green); font-size: 20px; margin-left: -60px; margin-top: 1px; position: absolute; background-color: #D9F1BD; border-radius: 50%; padding: 10px; line-height: 20px;}
#home #kontakt p.tel:before {content: "\f095";}
#home #kontakt p.mail:before {content: "\f0e0";}
#home #kontakt p.button {margin-top: 40px;}
#home #kontakt p.button a {color: var(--main-green); font-weight: 700; padding: 10px 25px; background-color: #D9F1BD; border-radius: 8px; border-bottom: 0px;}
#home #kontakt p.button a:hover {color:#fff; background-color: var(--main-green);}
#home #kontakt img {width: 100%; max-width: 300px; height: auto; border-radius: 50%; box-shadow: 10px -6px 0px 1px var(--main-green);}

#home #angebot .right p {background-color: #fff; padding: 20px; text-align: left; border: 2px solid #B1C79A; display: table-cell;}

#home #galerie {padding4: 0 10%;}
#home #galerie #bilder {margin: 0 -1.5% 0 -1.5%; display: flow-root;}
@media (max-width: 849px) {
#home #galerie .bild {float: left; width: 46%; margin: 0 2% 30px 2%;}
}
@media (min-width: 850px) {
#home #galerie .bild {float: left; width: 17%; margin: 0 1.5% 30px 1.5%;}
}
#home #galerie a {cursor: pointer;}
#home #galerie img {width: 100%; transition: box-shadow 0.2s ease;}
#home #galerie img:hover {box-shadow: 0px 0px 20px 5px rgba(110, 170, 43, 0.5);}

.fancybox__backdrop {background: rgba(0, 0, 0, 0.8);}



main ul {margin: 0; padding: 0;}
main ul li {margin: 0 0 18px 25px; font-size: 20px; line-height: 36px; font-weight: 300; list-style-type: disc;}


@media (max-width: 849px) {
#ueber main li {margin-left: 0; list-style-type: none;}
#ueber main li span.year, #ueber main li span.years {display: table; font-weight: 400;}
#ueber main li span.letter {text-transform: capitalize;}
}
@media (min-width: 850px) {
#ueber main ul li span.year {width: 60px; display: inline-block;}
#ueber main ul li span.years {width: inherit; margin-right: 3px;}
#ueber main ul li span.mobile {display: none;}
}


@media (max-width: 849px) {
#impressum header, #datenschutz header {box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);}
}
@media (min-width: 850px) {
#impressum header, #datenschutz header {border-bottom: 1px solid #bbb;}
}
#impressum h1, #datenschutz h1 {margin-top: 80px;}
#impressum .strong {font-weight: 400; margin-bottom: 8px;}


#datenschutz h2 {margin: 60px 0 30px 0; padding: 0; font-weight: 400; color: #000; border-top: 0px; border-bottom: 0px;}
#datenschutz h3 {margin: 50px 0 30px 0; padding: 0; font-weight: 300; color: #000;}
#datenschutz h4 {margin: 40px 0 30px 0; font-size: 22px; line-height: 36px; font-weight: 500;}
#datenschutz a {font-weight: 400;}
#datenschutz main ul {margin: 0 0 40px 0;}
#datenschutz main ul li {margin: 0 0 10px 25px;}
@media (max-width: 999px) {
a.break {word-break: break-all;}
}





/* FOOTER */


footer {background-color: #ECF3D7; background3: linear-gradient(150deg, #eee, #fff); background-repeat: no-repeat;}
footer #footer {padding-top: 90px; padding-bottom: 70px; display: flow-root;}

footer #footer-logo {width: 100%; margin-bottom: 30px;}
footer #footer-logo a {display: inline-block;}
footer #footer-logo img {width: 100%; max-width: 160px; height: auto; filter3: brightness(0) invert(1);}

footer #footer-info p {color: #57703D; font-size: 18px; font-weight: 300; line-height: 28px; margin-bottom: 20px;}
footer #footer-info .tel, footer #footer-info .mail {font-weight: 500;}

footer ul {margin: 0; padding: 0;}
footer ul li {font-size: 18px; margin-bottom: 5px;}

footer .footer-bottom {padding: 30px 0 10px 0; display: flow-root; background-color: #729E33;}
footer #footer-bottom p {margin-bottom:20px; font-size: 16px; line-height: 32px; color: #fff;}
footer #footer-bottom li {float: left; margin-right: 40px;font-size: 16px;}
footer #footer-bottom li:last-child {margin-right: 0;}
footer #footer-bottom a {font-weight: 300; color: #fff; line-height: 38px; padding: 2px 0 3px 0; text-decoration: none;}
footer #footer-bottom a:hover {border-bottom: 1px solid #F2F2F2;}

@media (max-width: 849px) {
footer .footer-bottom {padding-bottom:30px;}
}
@media (min-width: 850px) {
footer #footer-info {float: left; width: 60%;}
footer #footer-logo {float: right; width: 40%; text-align: right;}
footer #footer-bottom p {float: left;}
footer #footer-bottom ul {float: right;}
}