/* Schriftart*/
@font-face {
  font-family: "ABCMaxiSharpMono-Regular-Trial";
  src: url("./ABCMaxiSharpMono-Regular-Trial.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* Hintergrundfarbe */
body {
  font-family: "ABCMaxiSharpMono-Regular-Trial", monospace;
  background-color: #283618;
  color: #fefae0;
  background-image: url(Untitled_Artwork.png);
  background-repeat: no-repeat;
  background-position: center;
}
/* Überschrift*/
h1 {
    letter-spacing: 35%;
    color: #fefae0;
}

.text  { 
  background-color: rgba(146, 153, 164, 0.6);
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px; 
}


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

   /* sticky navigation*/
        .seiten-navigation {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #9299A4;
        border-bottom: 1px solid var(--rahmen-farbe);
        padding: 0.75rem 1rem;
      }

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

      section[sticknav] {
  scroll-margin-top: 6rem;
}
/*weiches scrollen*/
    html {
  scroll-behavior: smooth;
}




/* Animation und Audio*/

    .lausch-animation {
      width: 100%;
      height: 300px;
      background-color: thistle;
    }

    @keyframes lauschen {
      7% {
        background-color: #84ff99;
      }
      18% {
        background-color: #f9ff86;
      }
      25% {
        background-color: #a6e1ff;
      }
        30% {
        background-color: #ffeda6;
      }  45% {
        background-color: #acffa6;
      }  55% {
        background-color: #a6c5ff;
      }  60% {
        background-color: #a6e1ff;
      }  75% {
        background-color: #a6ffad;
      }  90% {
        background-color: #a6e1ff;
      }  100% {
        background-color: #a6ffb9;
      }
    }
    /* Länge der Animationsfarben*/
    .lausch-animation {
      
      animation: lauschen 15s infinite;

    }

    /* Im Vollbild button text änderung */
    #lauschen.vollbild .lausch-btn::after {
      content: "Schließen";
    }


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

    #lauschen.vollbild audio {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 21;
    }

    #lauschen figure {
      display: flex;
      justify-content: center;
    }

    #lauschen {
      margin-top: 200px;
    }


/* BUTTON  aussehen*/
                .lausch-btn {
                  position: fixed;
                  bottom: 30px;
                  left: 50%;
                  transform: translateX(-50%);
                  z-index: 21;
                  background-color: purple;
                  color: rgb(221, 206, 221);
                  border: none;
                  padding: 10px 20px;
                  cursor: pointer;
                  border-radius: 8px; 
                }

     .lausch-btn:hover::after {
  content: "Machs groß!"; 
  font-size: 16px;
}

.lausch-btn:hover {
  box-shadow: 0px 0px 15px purple, 0px 0px 30px rebeccapurple;
}


 /* Normaler Text verstecken */
                .lausch-btn {
                  font-size: 0; /* Text unsichtbar */
                  transition: all 0.3s ease;
                }
 /* Peseudoklasse damit Text sich ändert */
                .lausch-btn::after {
                  content: "Lausche!";
                  font-size: 16px;
                }



                                  /* Swiper */

                                  .grabstein-titel {
                                    text-align: center;
                                    color: #50555A;
                                    margin: 100px 0 0 0;
                                  }


                                    .swiper {
                                      width: 100%;
                                      height: 600px;
                                      --swiper-theme-color: #50555A;
                                      background-color: #9299A4;
                                      border-radius: 50% 50% 0 0;
                                      background-image: url("concrete-wall-2.png");
                                      background-size: cover;  
                                      box-shadow: 0px 20px 50px rgba(116, 58, 210, 0.8);
                                  
                                    }

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

                         /* Position Bilder im slider */
                                    .swiper .swiper-slide figure {
                                      display: flex;
                                      flex-direction: column;
                                      justify-content: flex-end;
                                      align-items: center;
                                      
                                    }
                                    .swiper-slide figure {
                                    margin-top: 150px; 
                                                          }
                          .swiper figcaption {
                            color: #50555A;
                            margin-top: 30px;

                          }
                      
   
                          

.blumen {
  display: flex;
  justify-content: center;
  margin-top: -60px;
  z-index: 10;
  position: relative;
}
                     


#dynamo {
  display: flex;
  justify-content: center;
  font-size: small;
  color: #fefae0;
}

/* Position meme und text*/  /* hier noch backgraound*/ 
.meme {
  display: flex;
  justify-content: flex-end;
}
.besucher {
  font-size: small;
  background-color: rgba(146, 153, 164, 0.6);
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  float: right; /* rechts ausrichten */
}