@font-face {
  font-family: "ABC Ginto";
  src: url("./ABCGintoNormal-Regular-Trial.otf") format("otf");
  font-weight: 400;
  font-style: normal;
}

body {
    font-family: "ABC Ginto", sans-serif;
    --swiper-theme-color: oklab(49.447% -0.06582 0.02669);
}

img {

    width: 300px;
    height: auto;
}

section {
    background-color: oklab(96.88900000000001% 0.01415 0.00155);
}

.inner-wrapper p {
  background-color: oklab(96.88900000000001% 0.01415 0.00155);
  color: oklab(49.447% -0.06582 0.02669);
  --swiper-theme-color: oklab(49.447% -0.06582 0.02669);
}

h1 {
    font-weight: 500;
    font-size: 28px;
    background-color: oklab(96.88900000000001% 0.01415 0.00155);
    color: oklab(49.447% -0.06582 0.02669);
    text-align: center;
}

h2 {
  font-weight: 500;
    font-size: 20px;
    background-color: oklab(96.88900000000001% 0.01415 0.00155);
    color: oklab(49.447% -0.06582 0.02669);
    text-align: center;
}

h3 {
  font-weight: 500;
    font-size: 12px;
    background-color: oklab(96.88900000000001% 0.01415 0.00155);
    color: oklab(49.447% -0.06582 0.02669);
    text-align: center;
}


.inner-wrapper{
  max-width: 600px; 
  margin: 0 auto;
  padding: 40px; 
  text-align: center;
}

.lausch-animation {
  width: 100%;
  height: 300px;
  background-color: gray;
  animation: lauschen 7s infinite;
}

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

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

@keyframes lauschen {
  30% {
    background-color: #e8d2ca;
  } 
  10% {
    background-color: #e6d8ce;
  }
  50% {
    background-color: #C2C395;
  }
  100% {
    background-color: #cbdfc5;
  }
  70% {
    background-color: #b3ba95;
  }
  50% {
    background-color: #ffd8dc;
  }
  30% {
    background-color: #FFFAF2;
  } 
}

.swiper {
  width: 100%;
  height: 300px;
  --theme-color: oklab(49.447% -0.06582 0.02669);
  --swiper-color: oklab(49.447% -0.06582 0.02669);
  --swiper-theme-color: oklab(49.447% -0.06582 0.02669);
  border: solid 1px;
  border-color: oklab(49.447% -0.06582 0.02669);
  border-radius: 10%;
}

.swiper img {
  width: 200px;
  height: 200px;
  border-radius: 10%;
}