/**
 * fef-header.css
 * Header Styles für FEF_Header.php
 * Basis: FEF_Header_mit_Lauftext_V4.html (ohne Ticker)
 * Responsive Design für Mobile/Desktop
 */

 /* Schriftgrößenkaskade mit goldenem Schnitt F=0,618
    Text, Seitenüberschrift, Icon-Höhe, Logo-Höhe
    2px, 4px, 6px, 9px, 14px, 23px, 37px, 60px, 97px, 157px, 254px
*/


:root {
    /* Dynamische Größen basierend auf Höhe #header-container, Abstufung mit goldenem Schnitt F=0,618 */
    --header-height: clamp(37px, min(14vw, 14vh), 60px);      /* min 37px, bevorzugt Minimum aus 14%Breite bzw. 14%Höhe, max 60px */
    --topbar-height: calc(var(--header-height) * 0.62);
    --icon-height: calc(var(--topbar-height) * 0.62);
    --center-font-size: var(--icon-height);

    --icon-width: auto;

    --center-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;           /* Schriftart Seitentitel */
    --center-font-weight: bold;

    --fef-green: #65DA58;                                       /* FEF-Grün */
    --fef-blue: #0071C1;                                        /* FEF-Blau */
}


/* Box-Sizing für alle Elemente, global */
/* Breite bzw Höhe = Inhalt + Padding + Border, ohne Margin */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }


/* Header-Container: Grid mit 3 Spalten (Logo | Titel | Icons) */
.topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;        /* spaltenbreiten 1fr = flexibel */
    height: var(--topbar-height);                /* Höhe aus Variable */
    width: 100%;
    gap: 10px;                                   /* Abstand zwischen Zeilen & Spalten */
    background: #fff;
    margin-top: 0px;                            /* Abstand zum oberen Rand, damit Header nicht direkt anliegt */
    margin-bottom: 0px;                         /* Abstand zum nächsten Element */
    padding: 0;                                  /* Kein interner Padding */
    position: sticky;                            /* WICHTIG: Bleibt oben wenn scrollt */
    top: 0px;                                   /* WICHTIG: Mit margin-top koordinieren (10px) */
    z-index: 100;                                /* WICHTIG: Über der Eventliste */
}


/* Icons links (Logo) */
.icon-left {
    grid-column: 1;
    display: flex;                /* Flexbox-Layout-Modell für einfache Ausrichtung */
    justify-content: start;       /* linksbündig */
    align-items: center;          /* Vertikale Zentrierung  */
    gap: 10px;                    /* Abstand zwischen den Icons */
}

.icon-left img {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: var(--topbar-height);   /* FEF-Logo grösser als Icons auf der linken Seite */
}


/* Icons rechts (Filter + Home) */
.icon-right {
    grid-column: 3;
    display: flex;
    justify-content: end;         /* rechtsbündig */
    align-items: center;          /* Vertikale Zentrierung  */
    gap: 10px;                    /* Abstand zwischen den Icons */
}

.icon-right img {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: var(--icon-height);
}


/* Mittlerer Bereich: Seitentitel */
.center {
    grid-column: 2;                                   /* Zuweisung Mittlere Spalte */
    display: flex;                                    /* setzt Flexbox für einfachere Ausrichtung */
    font-family: var(--center-font-family);           /* Schriftart */
    font-size: var(--center-font-size);               /* Schriftgröße */
    font-weight: var(--center-font-weight);           /* Fettschrift */
    color: #000;                                    /* Textfarbe schwarz */

    justify-content: center;                          /* Horizontale Zentrierung: flex-start; center; flex-end;  */
    align-items: center;                              /* Vertikale Zentrierung  */
    height: 100%;                                     /* Höhe für vertikale Zentrierung */
}


/* === HEADER CONTAINER === */
/* Äußerer Container des kompletten Headers */
#header-container {
    width: 100%;
    height: var(--header-height);
    background: #fff;
    position: sticky;
    top: 0px;
    z-index: 9998;
    align-content: center;
}

/* Android-spezifisch: Anpassung für URL-Bar */
.os-android #header-container {
    /* Spezieller Abstand oben, nur bei Android um URL auszuweichen */
    /* Kann bei Bedarf aktiviert werden */
    /* padding-top: calc(env(safe-area-inset-top, 0) + 50px); */
}