@charset "UTF-8";
/* CSS Document */

* { box-sizing:border-box;  touch-action: manipulation;   }





@font-face { font-family: "Outfit"; src: url('img/Outfit-VariableFont_wght.ttf') format('truetype');
	src: url('img/Outfit-VariableFont_wght.woff2') format('woff2'); font-style: normal;
	font-display: swap
}

@font-face { font-family: "Anton-Regular"; src: url('img/Anton-Regular.ttf') format('truetype');
	src: url('img/Anton-Regular.woff2') format('woff2'); font-weight: bold; font-style: normal;
	font-display: swap
}


html { font-size: 4.4dvh;}
   body { background-color: #A7C2CD;  background-position: center; background-size: cover;  width: 100%; margin: 0; font-family: Outfit; font-size: .53rem; line-height: 1.7; color: #2A5B78; letter-spacing: .01rem;  word-spacing: .02rem;     }
body:before { content: ''; position: fixed; height: 100vh; width: 100%; top: 0; left: 0; background-image: url(img/auge.webp); background-size: 10rem auto; background-repeat: no-repeat; background-position: top 1rem left 1rem;}

h1, h2, h3, h4, h5, h6 { font-family: Anton-Regular; line-height: 1.7;  }
p { margin: 0;}
ul { padding: 0; margin: 0;}
ol { margin: 0;}

#fade_in {transition: opacity 1s;}
#fade_in:not(.not_ready) { opacity: 1 !important;}

#menu_button { width: 1.3rem; height: 1.3rem; position: fixed; top: 2rem; right: 2rem; border-radius: .1rem;  background-image: url(img/nav_button.svg); background-color: white; background-size: 105%; background-repeat: no-repeat; background-position: center; z-index: 100; cursor: pointer; border: none;  }
.loaded #menu_button { display: block;}
#menu { top: 1.5rem; right: 1.5rem; position: fixed; width: fit-content; background-color: rgba(111, 152, 184, 0.7); border-radius: .1rem; padding: .55rem .5rem .45rem .5rem; z-index: 99; display: none;}
.menu_on #menu  { display: block;}
#menu > * { line-height: 1.3rem; background-color: white; border-radius: .1rem; color: #165C9A; padding: 0 1.7rem 0 .5rem; cursor: pointer; text-decoration: none; display: block; font-weight: 700; text-transform: uppercase; margin-top: .45rem; position: relative; width: fit-content; font-size: .68em; letter-spacing: .025rem; border: solid .025rem black}
#menu > *:after { position: absolute; top: .2rem; right: .3rem; height: calc(100% - .4rem); aspect-ratio: 100/92; background-color: #dedede; content: ""; border-radius: .1rem; background-repeat: no-repeat; background-size: 65% auto; background-position: center; background-image: url(img/punkt_grau.svg); background-size: contain; background-repeat: no-repeat; background-position: center; }
#menu > *.ac { color: white;  background-color: #008FD2; }
#menu > *.ac:after { background-color: white; background-image: url(img/punkt_blau.svg); background-size: 99.5% auto; }


@keyframes f_section_in {
	from { opacity: 0; transform: translateY(.35rem); }
	to { opacity: 1; transform: translateY(0); }
}

#f_section p { opacity: 0; font-size: 1.5rem; line-height: 1.1; }
#fade_in:not(.not_ready) #f_section p { animation: f_section_in .7s cubic-bezier(.22,.61,.36,1) forwards; }
#fade_in:not(.not_ready) #f_section p:nth-child(1) { animation-delay: .3s; }
#fade_in:not(.not_ready) #f_section p:nth-child(2) { animation-delay: .65s; }
#fade_in:not(.not_ready) #f_section p:nth-child(3) { animation-delay: 1s; }
#fade_in:not(.not_ready) #f_section p:nth-child(4) { animation-delay: 1.35s; }


#content section { width: 100%; min-height: 100dvh; display: flex; align-items: center;}
#content section:nth-child(2n) { background-color: #A7CDC4;}
#content section > div { width: 100vh; margin: auto; height: fit-content; text-align: center;}

@media (prefers-reduced-motion: reduce) {
	#fade_in:not(.not_ready) #f_section p { animation: none; opacity: 1; }
}


.nav_second { position: fixed; bottom: .9rem; right: 1.1rem;  color: white; display: flex; text-transform: uppercase; font-size: 0.35rem;
}
.nav_second a,  .nav_second a:visited { color: white; text-decoration: none;}
.nav_second div {  cursor: pointer;}
.nav_second p {margin: 0 .2rem; }



@media screen and (max-aspect-ratio: 100/160)  { 

  html { font-size: 9.43vw; }
  body {  font-size: .51rem; overflow: unset;  color: #2A5B78; font-weight: 500; height: auto; position: unset;}
  


}