*, *::before, *::after {
      box-sizing: border-box;
    }



    .image-wrapper { 
      position: relative;
      width: fit-content;
      margin: 0 auto;
    }

    .image-wrapper img {
      width: 100%;
      height: auto;
      display: block;
    }


.responsive-container {
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 5 / 3;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.responsive-container-portrait{
    max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 3 / 5;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.responsive-container img,
.responsive-container-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.responsive-image {
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

    .clickable-area,
    .clickable-area-p{
      position: absolute;
      /*border: 2px solid rgba(255, 0, 0, 0.5);  /* Sichtbar für Tests */
      cursor: pointer;
      display:block;
    }

    #area1 { left: 23.8%; top: 15%; width: 10.5%; height: 18%; }
    #area2 { left: 18.5%; top: 64%; width: 6%; height: 18%; }
    #area3 { left: 32%; top: 49%; width: 10%; height: 32%; }
    #area4 { left: 45%; top: 48%; width: 6.5%; height: 26%; }
    #area5 { left: 53%; top: 42%; width: 5%; height: 45%; }
    #area6 { left: 61%; top: 40%; width: 6%; height: 33%; }
    #area7 { left: 68%; top: 28%; width: 10%; height: 23%; }
    #area8 { left: 74.5%; top: 55%; width: 7%; height: 26%; }
    /* nur Test #area8 { left: 88.5%; top: 5%;  width: 10%; } /* 98.5% → nur test */
    #area9 { left: 88.5%; top: 51%; width: 10%; height: 5.5%; }

    #p_area1 { left: 10%; top: 51%; width: 20%; height: 10%; }
    #p_area2 { left: 64%; top: 74%; width: 20%; height: 9%; }
    #p_area3 { left: 48%; top: 58%; width: 35%; height: 10%; }
    #p_area4 { left: 47%; top: 48.5%; width: 28%; height: 7%; }
    #p_area5 { left: 40%; top: 41.5%; width: 49%; height: 6%; }
    #p_area6 { left: 39%; top: 33%; width: 36%; height: 6%; }
    #p_area7 { left: 24%; top: 23%; width: 29%; height: 10%; }
    #p_area8 { left: 54%; top: 17%; width: 29%; height: 10%; }
    #p_area9 { left: 48%; top: 2%; width: 10%; height: 10%; }

    /* Landscape sichtbar, Portrait versteckt */
    .landscape {
      display: block;
    }
    .portrait {
      display: none;
    }

    @media (orientation: portrait) {
      .landscape {
        display: none;
      }
      .portrait {
        display: block;
      }
    }

    @media (orientation: portrait) {
      .portrait-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
      }

      .portrait {
        position: relative;
        display: inline-block;
        max-height: 100vh;
        max-width: 100vw;
      }

      .portrait img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 100vh;
        max-width: 100vw;
      }

      .clickable-area {
        position: absolute;
        display: block;
        /* deine Positionswerte */
      }
    }

    /* OVERLAY */

    .noscroll {
      overflow: hidden;
    }

 

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  overflow-y: auto;       /* << HIER: Overlay darf scrollen */
  display: flex;
      opacity: 0;
  justify-content: center;
      visibility: hidden;
      pointer-events: none;
  align-items: flex-start; /* Inhalt am oberen Rand starten */
  padding: 2em 1em;       /* etwas Abstand zum oberen Rand */
        transition: opacity 0.5s ease, visibility 0.5s ease;

}
    
    .overlay[aria-hidden="false"] {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .overlay-div {

      max-width: 35%;
      margin: 5vh auto;
      padding: 15px 20px 15px 20px;
      background: #5272a2;
      box-shadow:
        0 0   0px   1px #5272a2,
        0 0  40px  30px #5272a2,
        0 0  80px  40px #5272a2,
        0 0 120px 120px #5272a2;
      border-radius: 16px;
      pointer-events: auto; /* ← damit Inhalte klickbar bleiben */
      justify-content: center;
      z-index: 5;
    }

    

    @media (max-width: 1400px) {
      .overlay-div{
          max-width: 45%;
        }
    }

    @media (orientation: portrait) {
      .overlay-div{
          max-width: 95%;
        }
    }

    #overlayContent {
      display: flex;
      justify-content: center;
/*      pointer-events: none; /* ← wichtig: blockiert pointer-events */
        width: 100%; /* <- garantiert volle Breite im Overlay  */
    }

    .overlay img {
      display: block;
      margin: 0 auto;
      max-height: 60vh;
      max-width: 100%;
      justify-content:center;
    }

    .overlay-video {
      position: relative;
      padding-bottom: 56.228%;
      overflow: hidden;
      width: 100%;
    }

    .overlay-video iframe,
    .overlay-video object,
    .overlay-video embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .overlay-image {
      width: 100%;
      margin-top: 0px;
    }










    /* Mehr-Button */
.clamp-wrapper {
  position: relative;
  max-height: 45em;
  overflow: hidden;
  margin-bottom: 0; /* damit kein extra Platz */
  transition: max-height 0.3s ease;
}

.clamp-wrapper.expanded {
  max-height: none;
  overflow: visible;
}

.clamp-content {
  line-height: 1.5;
  font-size: 20px;
  color: rgb(162, 194, 246);
  overflow-wrap: anywhere;
    word-break: break-word;
}

/* Fade-Out Effekt unten */
.fade-out {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: linear-gradient(to bottom, rgba(145, 178, 230, 0), #5272a2);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}


.clamp-wrapper.expanded .fade-out {
  opacity: 0;
}

/* Button */
.mehr-button {
  display: inline-block;
  margin-top: 0.5em;  /* Abstand zum Fade-Out */
  background: #91b2e6;
  color: #5272a2;
  border: none;
  padding: 6px 12px;
  font-weight: bold;
  cursor: pointer;
  z-index: 12;
  position: relative; /* kein absolute */
}






    .text-content {
      /* optional: line-height beeinflusst die "1,5 Zeilen"-Höhe */
      line-height: 1.5;
      overflow-wrap: break-word;
      color:rgb(162, 194, 246);
      font-size: 20px;
      /* margin-bottom: 3em; /* Platz für Button & Fade-Out */
    }

.text-content{
overflow-wrap: anywhere; /* noch robuster als break-word */
word-break: break-word;
}



    /* Fonts in style2.css*/