:root {
  --farbe-hintergrund: rgb(244, 245, 199); 
  --farbe-schrift:rgb(64,110,64);
  --farbe-akzent: rgb(3, 65, 28);
  --nav-schrift: aliceblue;
  --hover: rgb(87, 213, 100);
  --button:rgba(64, 110, 64, 0.536);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
   --farbe-hintergrund: rgb(244, 245, 199); 
  --farbe-schrift:rgb(64,110,64);
  --farbe-akzent: rgb(3, 65, 28);
  --nav-schrift: aliceblue;
  --hover: rgb(87, 213, 100);
  --button:rgba(64, 110, 64, 0.536);
}
  }


html[data-theme="dark"] {
  html[data-theme="dark"] {
  --farbe-hintergrund: rgb(16, 18, 22);      /* sehr dunkles Blau-Grau */
  --farbe-schrift: rgb(235, 238, 230);       /* warmes Off-White */
  --farbe-akzent: rgb(40, 90, 70);           /* gedämpftes Waldgrün */
  --nav-schrift: rgb(240, 245, 240);         /* leicht grünliches Weiß */
  --hover: rgb(90, 180, 140);                /* sanftes Mint-Grün */
  --button: rgba(40, 90, 70, 0.4);           /* transparenter Akzent */
}
  
}

html[data-theme="light"] {
  --farbe-hintergrund: rgb(244, 245, 199); 
  --farbe-schrift:rgb(64,110,64);
  --farbe-akzent: rgb(3, 65, 28);
  --nav-schrift: aliceblue;
  --hover: rgb(87, 213, 100);
  --button:rgba(64, 110, 64, 0.536);
}

@font-face {
  font-family: "ABCStefan";
  src: url("./ABCStefan-Simple-Trial.woff2") format("woff2");
  font-weight: 400;
  font-size: 32px;
  font-style: normal;
}

h2 {
  font-size: 52px;
}

h4 {
  font-size: 22px;
  font-weight: 100;
}

p {
font-family: "ABCGaisyr";
  src: url("./ABCGaisyrSemiMonoCyrillic-Book-Trial.otf") format("otf");
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
}

body { 
    background-color: var(--farbe-hintergrund);
    font-family: "ABCStefan", "Helvetica", sans-serif;
}

.inner-wrapper {
max-width: 700px;
margin: 0 auto;
padding: 40px;
text-align: center;
color: var(--farbe-schrift);
background-color: var(--farbe-hintergrund)
}

.inner-wrapper img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

section {
background-color: var(--farbe-hintergrund)
}



.seiten-navigation a {
  text-decoration: none;
  color: var(--nav-schrift);
  font-weight: 500;
}

.seiten-navigation {
  position: sticky;
  top: 0;
  z-index: 20;
  background:var(--farbe-akzent);
  border-bottom: 5px solid var(--hover);
  padding: 0.75rem 1.5rem;

  display: flex;
  align-items: center;
}

.seiten-navigation ul {
  list-style: none;
  display: flex;
  gap: 3rem;
  margin: 15px;
  padding: 0;
}

.darkmode {
  margin-left: auto;
  padding: 1.25rem 3rem;
}

.seiten-navigation a:hover {
  color: var(--hover);
  
}
section[id] {
  scroll-margin-top: 6rem;
}

html {
  scroll-behavior: smooth;
}


.swiper img {
  width: 50%;
  height: auto;
}

.swiper {
  width: 100%;
  height: 300px;
  color: var(--farbe-schrift);
  /*--swiper-theme-color: rgb(64,110,64);*/
  margin-bottom: 7em;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--farbe-schrift);
  z-index: 10;
}


.lausch-animation {
  width: 100%;
  height: 300px;
  background-color: var(--farbe-schrift);
  border-radius:  10px;
  animation: lauschen 10s infinite;
}

#lauschen.vollbild .lausch-animation {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   border-radius: 1px;
   z-index: 1;
}

#lauschen.vollbild audio {
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
}

@keyframes lauschen {
  10% {
    background-color: #d1dfa4;
  }
  20% {
    background-color: #e1b4a1;
  }
  30% {
    background-color: #a15d66;
  }
  40% {
    background-color: #808249;
  }
  50% {
    background-color: #94aab2;
  }
  60% {
    background-color: #464600;
  }
  70% {
    background-color: #012258;
  }
  80% {
    background-color: #f2daa0;
  }
  90% {
    background-color: #e8c368;
  }
  100% {
    background-color: #fceac6;
  }
}


.top-footer{
  width: 100px;
  height: 50px;
margin: 0 auto;
align-items: center;
padding: 40px;
}

button {
  background-color: var(--button);
  color: var(--nav-schrift);
  padding: 1rem 1.5rem;
  border: 1px solid var(--farbe-schrift);
  cursor: pointer;
  width: 65px;
  height: 30px;
  border-radius: 100px;
  margin-top: 1em;
  margin-bottom: 1em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:hover {
  color: var(--hover);
  background-color: var(--farbe-akzent);
}