.mein-spezial-div {
    position: relative;
    width: 100%;  /* Breite des Divs */
    height: 100%; /* Höhe des Divs */
    background-color: #f0f0f0; /* Hintergrundfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    overflow: hidden; /* Sicherstellen, dass das Bild im Rahmen bleibt */
    z-index: 20000;
  }

  .mein-spezial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.0; /* Transparenz einstellen */
    object-fit: cover; /* Bild wird skaliert, um den gesamten Bereich zu füllen */
    z-index: 20000;
  }

  .mein-spezial-div .content {
    position: relative;
  
    padding: 20px;
    color: #000; /* Textfarbe */
    text-align: center;
    z-index: 20000;
  }

  body {
  height: 2000px; /* Nur um Scrollen zu ermöglichen */
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  }

  /* Container für das Video */
  .video-container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }

  /* Das Video selbst */
  .video-container video {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -1;
  }

  /* Optional: Inhalt über dem Video */
  .content {
      position: relative;
      z-index: 1;
      color: white;
      text-align: center;
      font-size: 2rem;
      font-family: Arial, sans-serif;
      padding: 20px;
  }

  .video-container2 {
        position: fixed;
        bottom: 15px;
        right: 1px;
        width: 400px;
        height: 380px;
        pointer-events: none; /* Verhindert, dass das Video Klicks blockiert */
        z-index: 10000;
    }
    .video-container2 video {
        width: 100%;
        height: 100%;
    }

    /* Video auf mobilen Geräten ausblenden */
    @media (max-width: 600px) {
    .video-container2 {
        display: none;
    }
}

  .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Schneidet das Video passend zu */
    display: block;
  }

  .video-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    z-index: 100;
  }

  #mobile-textarea textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 1);
    color: black; /* Damit der Text sichtbar bleibt */
    border: 1px solid #ccc;
    resize: none;
  }
    /* Standardmäßig das neue mobile Div verstecken */
    #mobile-textarea {
      display: none;
    }

    /* Auf mobilen Geräten das Steuerungs-Div verstecken und die Textarea zeigen */
    @media (max-width: 768px) {
      #go-to-content {
        display: none;
      }
      #mobile-textarea {
        display: block;
        width: 100%;
        height: 200px;
        padding: 10px;
        font-size: 16px;
      }
    }

    @media (max-width: 768px) {
      li.aktuelles { 
          display: none;
      }
  }

  .g-bg-img-hero {
      position: relative;
      background-size: cover;
      background-position: center;
  }

  .g-bg-img-hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Schwarzes Overlay mit 50% Transparenz */
      
  }

  .g-bg-img-hero2 {
      position: relative;
      background-size: cover;
      background-position: center;
  }

  .g-bg-img-hero2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4); /* Schwarzes Overlay mit 50% Transparenz */
      
  }

  .image-container {
      position: relative;
      display: inline-block; /* Damit sich die Größe dem Bild anpasst */
  }

  .background-image {
      width: 100%; /* Bild passt sich dem Container an */
      display: block;
  }

  .overlay-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; /* Gleiche Größe wie das Hintergrundbild */
      height: 100%;
      object-fit: cover; /* Stellt sicher, dass das Overlay die gesamte Fläche abdeckt */
      opacity: 0.9; /* Transparenz anpassen */
  }

  .popup {
      display: none;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background:rgba(255, 255, 252, 0.98);
      padding: 20px;
      border: 0.3px solid #ccc;
      border-radius: 30px 0px 30px 0px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
      width: 100%; /* Breite des Popups */
      max-width: 1100px; /* Maximale Breite */
      height: auto; /* Höhe automatisch anpassen */
  }
  .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
  }
  table {
      width: 100%;
      border-collapse: collapse;
  }
  table, th, td {
      border: 0.3px solid black;
  }
  th, td {
      padding: 10px;
      text-align: left;
  }

  select {
      width: 100%;
      padding: 10px;
      border: 2px solidrgb(194, 31, 9); /* Grüner Rahmen */
      border-radius: 5px;
      background-color: white;
      font-size: 16px;
      color: black;
      cursor: pointer;
  }

  /* Wenn das Select-Feld fokussiert wird */
  select:focus {
      border-color:rgb(141, 16, 16); /* Dunkleres Grün */
      outline: none;
  }

  /* Styling für die Optionen */
  option {
      padding: 5px;
      font-size: 16px;
  }

  /* Wählbare Optionen (grün) */
  option:not(:disabled) {
      color: green;
  }

  /* Deaktivierte Optionen (rot) */
  option:disabled {
      color: red;
      font-weight: bold;
  }


  .rounded {
      border-radius: 20px; 
      overflow: hidden;
    
  }

  .meindiv {
      color: #bb0000;
    
  }

  .meindiv:hover {
    color: white;
  }


  .mask-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Damit der Inhalt anklickbar bleibt */
    z-index: 10000;
  }