/* ---------------------------------- SAFE AREA (notch / status bar) ---------------------------------- Werkt alleen als de pagina in de een viewport-meta heeft met viewport-fit=cover: Zonder viewport-fit=cover geeft env(safe-area-inset-*) op iOS altijd 0 terug. ---------------------------------- */ :root { /* Kleur van de strook onder de status bar (app / notch) */ --safe-area-top-bg: #212529; } body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* Donkere strook achter de status bar, zodat de systeemtekst leesbaar blijft. Vaste positie: blijft staan bij scrollen. */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--safe-area-top-bg); z-index: 1040; /* boven Bootstrap .fixed-top (1030) */ pointer-events: none; } /* Een eventuele vastgezette navbar niet onder de strook laten schuiven */ .navbar.fixed-top, .navbar.sticky-top { padding-top: calc(0.5rem + env(safe-area-inset-top)); }