body {
    background-color: #d7ccb8;
    font-family:  "helvetica";
    color: white;
    background-image: url(pictures/Element\ 2.svg);
    background-size: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
  
  
 
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 9.5vw;
    background-color: #daa5b1;
    font-size: 1.5vw;
    position: fixed;

   
  }
  
  li a {
    display: block;
    color: #000000;
    padding: 1vw 0vw;
    text-decoration: none;
    text-align: center;
  
  
  }
  
  /* Change the link color on hover */
  li a:hover {
    background-color: #d7ccb8;
    color: white;

  }
  

  h1 {

  
   margin-bottom: 4vw;
   margin-left: 15vw;
  font-size: 3vw;
  color:  #8ca6a5;
  




  }
  .h2 {
   font-weight: 900;
   font-size: 2vw;
   }

  .text {
  width: 55vw;
   margin: 1vw;
   justify-content: center;
   margin-left: 15vw;
   font-size: 2vw;

  }
  .image{

    width: 20vw;
    margin-left: 4vw;
    margin-top: 3.2vw;
  }


  .container {

    display: flex;
    flex-direction: row;
    
   
  }
  a {
    color:  #ffffff;
    text-decoration: underline;
    
  
  
  }

 .h2indent {
  font-weight: 900;
  font-size: 2vw;
  margin-left: 3em;
  }
  .h2indent2 {
    font-weight: 900;
    font-size: 2vw;
    margin-left: 6em;
    }

    .h2indent3 {
      font-weight: 900;
      font-size: 2vw;
      margin-left: 9em;
      }
      .kleiner {
        width: 55vw;
         margin: 1vw;
         justify-content: left;
         margin-left: 0vw;
         font-size: 1.5vw;
        
        }
        .lightbox {
          display: none;
          position: fixed;
          z-index: 9999;
          top: 0; left: 0;
          width: 100%; height: 100%;
          background: #d7ccb8;
          justify-content: center;
          align-items: center;
      }

      /* Bild in der Lightbox */
      .lightbox img {
          max-width: 90%;
          max-height: 90%;
      }

      /* Cursoränderung bei Klickmöglichkeit */
      .lightbox-trigger {
          cursor: pointer;
      }
      #contrast-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 10px 15px;
        background-color: #daa5b1;
        color: black;
        border: none;
        cursor: pointer;
        font-size: 1.5vw;
        z-index: 100;
    }

    #contrast-btn:hover {
        background-color: #d7ccb8;
    }

    .dark-background {
      background-image: none !important;
      background-color: #251f1f !important;
  }
  /* Dein bisheriger Code bleibt wie er ist */

/* Ab hier: Anpassungen für Handy/Tablet */
@media (max-width: 768px) {
  
  body {
    background-size: cover; /* Passt sich schöner an */
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;                 /* statt Block => horizontale Anordnung */
    flex-direction: row;           /* nebeneinander */
    justify-content: center;       /* zentrieren */
    background-color: #daa5b1;
    font-size: 5vw;
    position: fixed;
    top: 0;                        /* oben fixiert */
    left: 0;
    width: 100%;                   /* volle Breite */
}

li a {
    display: block;
    color: #000000;
    padding: 1vw 2vw;              /* mehr Platz seitlich */
    text-decoration: none;
    text-align: center;
}

/* Hover-Effekt bleibt gleich */
li a:hover {
    background-color: #d7ccb8;
    color: white;
}


  h1 {
    margin-top: 8vw;
    margin-left: 3vw;      /* Weniger Rand links */
    font-size: 6vw;        /* Größerer Titel */
  }

  .h2 {
    font-size: 4.5vw;      /* Untertitel größer */
  }

  .text {
    width: fit-content;      /* Mehr Platz für Text */
    margin-left: 0vw;
    font-size: 4.5vw;        /* Größere Lesbarkeit */
  }
  .kleiner {
    width: 55vw;
     margin: 1vw;
     justify-content: left;
     margin-left: 0vw;
     font-size: 3vw;
    
    }
  .h2indent {
    font-weight: 900;
    font-size: 4.5vw;
    margin-left: 3em;
    }
    .h2indent2 {
      font-weight: 900;
      font-size: 4.5vw;
      margin-left: 6em;
      }
  
      .h2indent3 {
        font-weight: 900;
        font-size: 4.5vw;
        margin-left: 9em;
        }

  .image {
    width: 50vw;           /* Bild größer */
    margin-left: 5vw;
    margin-top: 5vw;
  }
  #contrast-btn {
    position: absolute;
    top: 35px;
    right: 0px;
    padding: 5px 10px;
    background-color: #daa5b1;
    color: black;
    border: none;
    cursor: pointer;
    font-size: 3vw;
    z-index: 1000;
}

#contrast-btn:hover {
    background-color: #d7ccb8;
}

  .container {
    flex-direction: column; /* Inhalte untereinander statt nebeneinander */
    align-items: center;
  }
}