body {width : 100%;max-width : 1920px;color : #383838;margin : 0 auto;padding : 0;font-size : 100%;font-style: normal;font-weight: normal;
font-family: 'font/Nunito-Regular', Helvetica, Arial, sans-serif; background-image: url(images/bg-trans.webp);}
@font-face {font-family : 'font/Nunito-Regular';font-display:swap;src: local('Nunito-Regular'), local('Nunito-Regular'),url(font/Nunito-Regular.woff2) format('woff2'), url(font/Nunito-Regular.woff2.woff) format('woff');}

@font-face {font-family : 'font/Nunito-SemiBold';font-display:swap;src: local('Nunito-SemiBold'), local('Nunito-SemiBold'), url(font/Nunito-SemiBold.woff2) format('woff2'), url(font/Nunito-SemiBold.woff2.woff) format('woff');}

@font-face {font-family : 'font/Nunito-Bold';font-display:swap;src: local('Nunito-Bold'), local('Nunito-Bold'), url(font/Nunito-Bold.woff2) format('woff2'), url(font/Nunito-Bold.woff2.woff) format('woff');}

@font-face {font-family : 'font/Nunito-ExtraBold';font-display:swap;src: local('Nunito-ExtraBold'), local('Nunito-ExtraBold'), url(font/Nunito-ExtraBold.woff2) format('woff2'), url(font/Nunito-ExtraBold.woff2.woff) format('woff');}



html {scroll-behavior : smooth;}
header {display : block;text-align : center;}
* {box-sizing : border-box;}


a {text-decoration : none;border : none;transition : all 0.2s;cursor : pointer;color : #0a7645;}
a:hover {color : #ffa204;}
ul{margin: 0; padding: 0;list-style: none;}
img {text-decoration : none;border : none;}



.dew {display : block; margin : 0 auto; width : 100%; max-width : 1920px; height: 100vh; padding : 2em 0; background: url(images/dew.webp) top center no-repeat fixed;background-size : cover, cover; background-color: black;}
.dewtext {display: bock; width: 100%; margin: 3em auto 1em auto; text-align : center;}
.dewtext .dewstart {font-family : 'font/Nunito-ExtraBold'; font-size : 2em; color : white; line-height : 1.4em; text-shadow : 3px 3px 3px rgb(0, 0, 0, 1); margin: 0 auto; text-align : center;}
.dewzwei {display: table; max-width: 90%;margin : 1.8em auto; text-align:center; padding : 1em 2em; border: 5px double white; border-radius: 8px; background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-family : 'font/Nunito-SemiBold'; color : white; font-size: calc(15px + 0.4vw); line-height: 1.4em; text-shadow : 0 1px 2px rgb(0, 0, 0, 0.7);}

.losgehts {display: block; width: 100%; max-width: 100px; margin: 2em auto;}
.losgehts-box-icon {position: relative;display: block; width: 75px; height: 75px; line-height: 15px; padding-top: 25px; text-align: center; font-size: 1.4em; font-weight: 900; color: black; background-color: #ffa204; border: 5px solid #0a7645; border-radius: 50%; outline: 5px solid white; margin: 0 auto; transition: 0.3s linear;}
.losgehts-box-icon font {font-weight: 100;}
.losgehts-box-icon:hover {transform : scale(1.2);}
.losgehts-box-icon .welle,
.losgehts-box-icon .welle:before,
.losgehts-box-icon .welle:after {position: absolute; top: 50%; left: 50%; width: 75px; height: 75px; transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(255, 255, 255, 1); -webkit-animation: welle2 3s infinite; animation: welle2 3s infinite; border-radius: 50%;}
.losgehts-box-icon .welle:before {-webkit-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute;}
.losgehts-box-icon .welle:after {-webkit-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute;}

@keyframes welle {
  70% {box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);}
  100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
@keyframes welle {
  70% {box-shadow: 0 0 0 20px rgb(255, 255, 255, .2)}
  100% {box-shadow: 0 0 0 0 rgb(255, 255, 255, 0)}
}
@keyframes welle2 {
  70% {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);}
  100% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
}

@keyframes welle2 {
  70% {box-shadow: 0 0 0 40px rgba(0, 0, 0, 0);}
  100% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
}

.einblenden {animation: einblenden 1s ease 0s 1 normal forwards;}
@keyframes einblenden {
0% {opacity: 0;transform: rotateX(-100deg);}
100% {opacity: 1;transform: rotateX(0deg);}
}
.

@media (max-width: 1297px) {
.text {left : 20%;width : 60%;}
}
@media (max-width: 1079px) {
.text {left : 10%;width : 80%;}
}
@media (max-width: 979px) {
.text {left : 5%;width : 90%;}
}
@media (max-width: 711px) {
.text {margin-top : 3.5em;left : 5%;width : 90%;padding: 0;}
}