/* =====================================================
   iOS Safe Area Fixes
   ===================================================== */
/* Für iOS mit Notch/Home-Indicator (black-translucent) */

@supports (padding: env(safe-area-inset-top)) {
    /*
     * WARUM nur html.ios-pwa-device: @supports(env) ist auf Android-Chrome ebenfalls true.
     * top:-5px + höhere Header-Höhe verschob den Header nach oben → 1px–5px Streifen
     * des Body-Hintergrunds (--app-hintergrund-farbe, oft hellblau) zwischen
     * System-Statusleiste und App-Header („hellblaue Linie“).
     */
    html.ios-pwa-device #app-header {
        top: -5px !important;
        position: fixed !important;
        padding-top: env(safe-area-inset-top) !important;
        height: calc(var(--header-hoehe, 60px) + env(safe-area-inset-top) + 5px) !important;
    }

    html.ios-pwa-device #app-header > * {
        transform: translateY(var(--header-text-abstand-oben, 0px)) !important;
    }

    /*
     * Content-Abstand: iOS und Android getrennt.
     * WARUM: Auf Android darf #app-header top:-5px NICHT greifen (hellblaue Naht),
     * aber ohne eigene Regel gewinnt app.css mit fixem 60px → bei --header-hoehe 150px
     * und negativem --content-start-offset rutschte der Inhalt unter den Header.
     */
    html.ios-pwa-device #app-content {
        margin-top: calc(var(--header-hoehe, 60px) + env(safe-area-inset-top, 0px)) !important;
    }

    /*
     * Nicht-iOS, nicht-Android (z. B. Desktop-Browser): Designer-Offset inkl. negativ.
     */
    html:not(.ios-pwa-device):not(.android-pwa-device) #app-content {
        margin-top: calc(
            var(--header-hoehe, 60px) + env(safe-area-inset-top, 0px) + var(--content-start-offset, 0px) - 1px
        ) !important;
    }

    /*
     * Android: negativer --content-start-offset zieht Karten unter die Header-Welle (z-index).
     * WARUM max(0px, …): nur nach unten schieben, nie unter den sichtbaren Header ragen.
     */
    html.android-pwa-device #app-content {
        margin-top: calc(
            var(--header-hoehe, 60px) + env(safe-area-inset-top, 0px) + max(0px, var(--content-start-offset, 0px)) - 1px
        ) !important;
    }

    html.ios-pwa-device #app-footer {
        bottom: 0 !important;
        position: fixed !important;
    }

    /* Beleg/PDF-Ansicht: Header nach unten verschieben (X-Button erreichbar machen) */
    .pdf-header {
        padding-top: calc(env(safe-area-inset-top) + 10px) !important;
        height: calc(55px + env(safe-area-inset-top)) !important;
        min-height: calc(55px + env(safe-area-inset-top)) !important;
    }
}

/* =====================================================
   HEADER HINTERGRUNDBILD – NUR echtes iOS
   WARUM: @supports (-webkit-touch-callout: none) ist auf Android nicht zuverlässig
   iOS-exklusiv → Klasse ios-pwa-device setzt index.html per User-Agent (vor CSS-Laden).
   ===================================================== */
html.ios-pwa-device #app-header {
    background-position-y: var(--header-ios-abstand, 0px) !important;
}

/* =====================================================
   Android-Chrome: heller Strich / Naht unter dem Header
   WARUM: body mit background-attachment:fixed (design.css) + fixierter #app-header
   erzeugen im Android-Compositor oft eine 1px-Trennlinie (Body-Muster scheint durch).
   Footer war ähnlich; dort hilft u.a. klare Background-Verankerung (top).
   iOS bleibt unverändert (eigene Klasse ios-pwa-device).
   ===================================================== */
html:not(.ios-pwa-device) body {
    background-attachment: scroll !important;
}

html:not(.ios-pwa-device) #app-header {
    box-shadow: none !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    background-position: center top !important;
}

/* =====================================================
   iOS HOME-INDICATOR HINTERGRUND (blau statt weiß)
   ===================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    /* Blauer Hintergrund UNTER dem Footer für Home-Indicator-Bereich */
    body::after {
        content: '' !important;
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: env(safe-area-inset-bottom) !important;
        background-color: var(--footer-bg-farbe, #12253c) !important;
        z-index: 98 !important;
        pointer-events: none !important;
    }
}