/*-----------------------------------------------------------------------------
    ALLGEMEINE EINSTELLUNEGN  
------------------------------------------------------------------------------*/
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Dies ist der Schlüsselschritt gegen horizontales Scrollen */
    overflow-x: hidden; 
}

.content-gallery-section {
    margin-top: 70px;  /* ++++++++++++  Abstand über der ersten Section = Abstand zwischen u-Linie und Text ++++++++++++++ */ 
}
      

/* ++++++++++++++++++++++++++++++++++++++++++ funktioniert nicht ++++++++++++++++++++++++++++++++ */

@media (max-width: 480px) {
.content-gallery-section {
    margin-top: 0px !important;  /* ++++++++++++  Abstand über der ersten Section = Abstand zwischen u-Linie und Text ++++++++++++++ */ 
       }
}


/* ===============================================================
   TEXTBEREICH & GALERIE
   =============================================================== */    

/* Basis für Desktop / große Screens */
.content-gallery-section {
    display: flex;
    gap: 40px;          /* Abstand zwischen Text und Galerie */
    max-width: 1140px;  /* Gesamtbreite des Wrappers */
    margin: 0 auto;
}

.text-content-block {
    width: 70%;         /* 800px von 1140px = ca. 70% */
}

.gallery-sidebar {
    width: 30%;         /* 300px von 1140px = ca. 30% */
}

/* u-linie flexibel */
.u-linie {
    height: 1px;
    background-color: #ccc;
    border: none;
    width: 100%;
    max-width: 1140px;
    margin-top: 13px;
    margin-bottom: 70px;
}

/* iPad / Tablet */
@media (max-width: 1024px) {
    .text-content-block {
        width: 70%;       /* proportional beibehalten */
    }

    .gallery-sidebar {
        width: 30%;       /* proportional beibehalten */
    }
}

/* Smartphones */
@media (max-width: 768px) {
    .content-gallery-section {
        flex-direction: column;  /* Text über Galerie */
        gap: 20px;
    }

    .text-content-block,
    .gallery-sidebar {
        width: 100%;             /* volle Breite */
    }
}


.text-content-block {
    flex: 1;
    font-size: 1.9rem; /* ====== Schriftgröße ====== */
    color:  var(--schriftfarbe);
    /* Blocksatz & Silbentrennung */
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.text-content-block p {
  padding-left: 5px;
}

.gallery-sidebar {
    flex-basis: 280px;   /* unverändert */
    flex-shrink: 0;
    padding: 10px;
    margin-left: auto;
}

/* Styling für die kleinen Bilder in der Galerie */
.gallery-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 5px; /* ====== Abstand der Bildunterschrift vom Bild ====== */
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

/* Definiert den Abstand UNTER jeder Bildunterschrift zum nächsten Inhalt */
.gallery-caption {
  text-align: center; /* falls noch nicht vorhanden, um den Text zu zentrieren */
  margin-bottom: 0px; /* keine Funktion */
}

.gallery-image-wrapper img:hover {
    transform: scale(1.02);
}

.gallery-caption {
  text-align: center;
}

/*------------------------------------------------------------------
   MEDIA QUERIES - IPHONE LANSCAPE
-------------------------------------------------------------------*/

@media (min-width: 481px) and (max-width: 767px) {
    .content-gallery-section {
        display: flex !important;
        flex-direction: row !important; /* nebeneinander */
        gap: 20px !important;
    }

    .text-content-block {
        flex: 0 0 60% !important;
    }

    .gallery-sidebar {
        flex: 0 0 40% !important;
    }

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

/*------------------------------------------------------------------
   MEDIA QUERIES - IPHONE PORTRAIT
-------------------------------------------------------------------*/

@media (max-width: 480px) {
    
    /* Die Hauptsektion wird von "flex" (nebeneinander) auf "block" oder "flex-direction: column" (untereinander) umgestellt */
    .content-gallery-section {
        display: block; /* Spalten werden automatisch untereinander gestapelt */
        gap: 0; /* Abstand wird zurückgesetzt */
    }

    /* Die Galerie-Sidebar erhält oben einen Abstand, damit sie nicht direkt am Text klebt */
    .gallery-sidebar {
        margin-top: 40px; 
    }

    /* Optional: Bilder und Container auf volle Breite setzen, falls sie durch Flexbox vorher eine feste Breite hatten */
    .text-content-block,
    .gallery-sidebar,
    .gallery-image-wrapper img {
        width: 100%;
        box-sizing: border-box; /* Stellt sicher, dass padding/border nicht zur Breite dazugerechnet wird */
    }
}


/*------------------------------------------------------------------
   Beseitigt den von Safari erzeugten Phantomabstand unter dem Banner
-------------------------------------------------------------------*/
/* Wrapper stellt sicher, dass Safari sofort die Höhe kennt */
.hero-banner-wrapper {
  width: 100%;
  height: var(--hero-banner-height); /* zentrale Höhe, z.B. 300px */
  overflow: hidden;
  position: relative; /* sichert die Positionierung des Bildes */
}

/* Banner selbst */
.hero-banner {
  width: 100%;
  height: 100%;
  display: block;
  position: relative; 
}

/* Bild */
.hero-banner img {
  width: 100%;
  height: auto;           /* Bildhöhe automatisch, verhält sich wie andere Seiten */
  max-height: var(--hero-banner-height); /* überschreitet nicht die zentrale Höhe */
  display: block;
  object-fit: cover;      /* Bild füllt Container, ohne Phantom-Abstand */
}