/* ==================================================
   HEADER CSS
   ==================================================

   Zweck:
   Diese Datei steuert ausschließlich den Header.

   Hier stehen:
   - feste Headerbreite
   - Headerhöhe
   - Hintergrundbild
   - Overlay / Deckkraft
   - Textposition im Header
   - Textschatten für bessere Lesbarkeit

   Wichtig:
   - Jede Seite kann weiterhin ein eigenes Headerbild und eigene Texte setzen.
   - Das Bild kommt NICHT aus dieser CSS-Datei, sondern pro Seite aus $pageHeaderImage.
   - Die Texte kommen pro Seite aus $pageHeadline und $pageIntro.
   - Diese CSS-Datei steuert nur Darstellung, Position, Größe und Lesbarkeit.

   Wichtige Werte:
   - width: 1200px = feste Seitenbreite
   - height: 300px = Headerhöhe
   - background-image kommt pro Seite aus $pageHeaderImage
================================================== */

/* ==================================================
   HEADER: Grundfläche
   --------------------------------------------------
   Header mit seitenbezogenem Hintergrundbild.

   Auswirkungen:
   - width: 1200px setzt die feste Headerbreite.
   - margin: 0 auto zentriert den Header.
   - height: 300px bestimmt die sichtbare Headerhöhe.
   - background-image kommt aus der jeweiligen Seite.
   - background-size: cover füllt den Bereich vollständig.
   - background-position bestimmt den Bildausschnitt.

   Pro Seite ändern:
   - Nicht hier, sondern in der jeweiligen index.php:
     $pageHeaderImage = '...';
================================================== */

.site-header {
    position: relative;
    width: 1200px;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    background-image: var(--page-header-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ==================================================
   HEADER: Overlay über dem Bild
   --------------------------------------------------
   Farbfläche über dem Headerbild.

   Auswirkungen:
   - rgba(0, 169, 212, 0.55) entspricht #00A9D4 mit 55% Deckkraft.
   - niedriger Wert = Bild stärker sichtbar.
   - höherer Wert = Bild stärker eingefärbt.

   Beispiele:
   - 0.15 = sehr transparent
   - 0.25 = gut sichtbar
   - 0.55 = stärker eingefärbt
================================================== */

.header-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 169, 212, 0.55);
    z-index: 1;
}

/* ==================================================
   HEADER: Textposition
   --------------------------------------------------
   Positioniert den Headertext linksbündig.

   Auswirkungen:
   - align-items: center = vertikale Zentrierung im 300px Header.
   - justify-content: flex-start = Textblock beginnt links.
   - padding-left: 100px = 100px Abstand vom linken Rand.
   - text-align: left = Text ist linksbündig.

   Wenn der Text höher/tiefer sitzen soll:
   - align-items: flex-start setzen und padding-top anpassen.
   - Für aktuelle Vorgabe bleibt der Text vertikal mittig und linksbündig.
================================================== */

.header-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 20px 20px 100px;
    text-align: left;
}

/* ==================================================
   HEADER: Textblock
   --------------------------------------------------
   Begrenzung des gesamten Textblocks im Header.

   Auswirkungen:
   - max-width steuert die maximale Textbreite.
   - kleinerer Wert = früherer Umbruch.
   - größerer Wert = späterer Umbruch.
================================================== */

.header-content {
    max-width: 1050px;
}

/* ==================================================
   HEADER: Globaler Textschatten
   --------------------------------------------------
   Schwarzer Schatten hinter allen Headertexten.

   Auswirkungen:
   - verbessert die Lesbarkeit auf dem Hintergrundbild.
   - erster Wert: horizontale Verschiebung.
   - zweiter Wert: vertikale Verschiebung.
   - dritter Wert: Weichzeichnung.
   - letzter rgba-Wert: Deckkraft des Schattens.

   Beispiel:
   - 0.35 = dezenter Schatten
   - 0.85 = stärkerer Schatten
================================================== */

.header-brand,
.header-content h1,
.header-content h2 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* ==================================================
   HEADER: Marke / kleine Zeile über der H1
   --------------------------------------------------
   Gestaltung der kleinen Zeile, z. B. "IBSax.de".

   Auswirkungen:
   - font-size steuert die Schriftgröße.
   - line-height steuert den Zeilenabstand.
   - margin-bottom steuert den Abstand zur H1.

   Pro Seite ändern:
   - Der Text selbst kommt aus includes/header.php bzw. den Seitenvariablen.
================================================== */

.header-brand {
    margin-bottom: 6px;
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: 600;
    color: #ffffff;
}

/* ==================================================
   HEADER: H1 Hauptüberschrift
   --------------------------------------------------
   Haupttext im Header.

   Auswirkungen:
   - max-width steuert Breite und Zeilenumbruch der H1.
   - font-size clamp() passt die Schrift responsiv an.
   - line-height steuert den Zeilenabstand.
   - margin-bottom steuert den Abstand zur H2.

   Pro Seite ändern:
   - Der Text kommt aus $pageHeadline.
================================================== */

.header-content h1 {
    max-width: 960px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 2.1;
    font-weight: 700;
    color: #ffffff;
}

/* ==================================================
   HEADER: H2 Unterüberschrift
   --------------------------------------------------
   Unterzeile unter der H1.

   Auswirkungen:
   - font-size steuert die Größe der Unterzeile.
   - line-height steuert den Zeilenabstand.
   - font-weight steuert die Stärke der Schrift.

   Pro Seite ändern:
   - Der Text kommt aus $pageIntro.
================================================== */

.header-content h2 {
    margin-bottom: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.75;
    color: #ffffff;
    font-weight: 600;
}

/* ==================================================
   HEADER: Responsive Anpassung
   --------------------------------------------------
   Anpassung für kleinere Bildschirme.

   Auswirkungen:
   - Header bleibt 300px hoch.
   - Der linke Abstand wird auf kleineren Screens reduziert.
   - Text bleibt linksbündig.
================================================== */

@media (max-width: 760px) {
    .site-header {
        height: 300px;
    }

    .header-inner {
        padding: 20px 20px 20px 40px;
    }

    .header-content {
        max-width: 100%;
    }

    .header-content h1 {
        max-width: 100%;
        font-size: clamp(1.8rem, 8vw, 2.8rem);
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding: 20px;
    }

    .header-brand {
        font-size: 1.25rem;
    }
}