@font-face {
font-family: "Social";
src: url("./ABCSocial-Book-Trial.woff2") format("woff2");
font-weight: 400;
font-style: italic;
}
body {
font-family: "Social", Helvetica, sans-serif;
}



h1 {
font-family: "Reenie Beanie", cursive;
font-size: 90px;
color: #2b1a06e4;}
h2 {font-family: "Inter", sans-serif;}
h3 {font-family: "Inter", sans-serif;}
.swiper {
width: 100%;
height: 300px;
}

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

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

body {
background-color: rgba(124, 191, 236, 0.404);
}

#einleitung {
padding-top: 3rem;
padding: 1rem;
}

.center {
display: flex;
justify-content: center;
}



section:nth-child(1) {
background-color: gb(124, 198, 248)r;
color: rgb(0, 78, 85);
}
section:nth-child(2) {
background-color: rgba(31, 19, 1, 0.894);
color: rgb(187, 233, 252);
--swiper-theme-color: rgb(176, 241, 246);
padding-bottom: 32px;
}
section:nth-child(3) {
background-color: gb(124, 198, 248);
color: rgb(176, 241, 248);
--swiper-theme-color: rgb(179, 219, 238);
padding-bottom: 32px;
}
section:nth-child(4) {
background-color: gb(124, 198, 248);
color: rgb(176, 241, 248);
--swiper-theme-color: rgb(163, 114, 24);
padding-bottom: 560px;
}


button:active {
transform: scale(0.95);
}

.swiper-slide figure {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
box-sizing: border-box;
padding-bottom: 32px;
}
.lausch-animation {
width: 100%;
height: 300px;
background-color: rgb(64, 110, 64);
animation: lauschen 10s 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 {
0% { background-color: #530826e4; }
10% { background-color: #53083fe4; }
20% { background-color: #3e0313e4; }
30% { background-color: #962f61e4; }
40% { background-color: #f67700e4; }
50% { background-color: #ffff00e4; }
60% { background-color: #2d0221e4; }
70% { background-color: #642453e4; }
80% { background-color: #633958e4; }
90% { background-color: #7f4970e4; }
100% {background-color: #ff5500e4; }
}



.button-vollbild {
width: 35px;
height: 35px;
background-color: rgb(64, 110, 64);
}