:root { --bg: #f2f2f7; --card-bg: #ffffff; --text: #1c1c1e; --text-sekundaer: #8a8a8e; --trennlinie: #e5e5ea; --akzent: #007aff; --stufe-offen: #8a8a8e; --stufe-laufend: #007aff; --stufe-unterwegs: #5856d6; --stufe-kritisch: #ff9500; --stufe-storniert: #ff3b30; --gefahr: #ff3b30; --erfolg: #34c759; --radius: 12px; } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --card-bg: #1c1c1e; --text: #f2f2f7; --text-sekundaer: #98989d; --trennlinie: #38383a; } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* App-Shell-Layout statt position:fixed/sticky fuers Kopf-/Fussbereich: auf iOS blieb die Tabbar als Homescreen-App (standalone, kein Safari- Chrome) trotz mehrerer fixed-Workarounds nicht zuverlaessig unten angepinnt (Simon, 15.09.2026: "die Fussleiste ist nicht 'unten' angepinnt"). Stattdessen: body ist eine 100dvh hohe Flex-Spalte, Header/Tabbar sind darin normale (nicht positionierte) Blöcke am Anfang/Ende, NUR
scrollt intern - dadurch bleiben Header und Tabbar immer exakt am Bildschirmrand, unabhaengig von Standalone- oder Safari-Modus, unabhaengig von der Inhaltslaenge. */ html { height: 100%; background: var(--bg); } body { display: flex; flex-direction: column; /* --vh wird inline im per JS aus window.innerHeight gesetzt - 100dvh/100vh allein berechneten sich im iOS-Standalone-Modus falsch zu niedrig, sodass unten echter Leerraum blieb (Simon, 15.09.2026, Screenshot). var(..., 1vh) als Fallback, falls JS mal nicht laeuft. */ height: calc(var(--vh, 1vh) * 100); margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; } .kopf { flex: none; /* Safari 26/iOS 27 sucht am oberen Rand ein position:fixed/sticky-Element, um dessen Hintergrundfarbe fuer die Statusleiste zu nehmen - sonst legt es einen "Liquid Glass"-Blur darueber (Simon, 15.09.2026, nur iOS 27, nur installierte App). Layoutneutral: body scrollt nicht, nur main. */ position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; /* env(safe-area-inset-left/right) statt festem 16px - im Querformat wandert die Notch/Dynamic Island an die Seite und die Ecken sind dort staerker abgerundet; ohne den Sicherheitsabstand sassen die Icons fast in der Rundung (Simon, 15.09.2026: "im Quer-Modus sind die Icons zu weit an der Seite"). */ padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid var(--trennlinie); } .kopf h1 { font-size: 17px; margin: 0; font-weight: 600; } /* Ein gemeinsamer Regelblock fuer ALLE Header-Icons (Burger, Lupe, Reload, Einstellungen, Abmelden) statt fast identischer Einzelregeln, die auseinanderdriften konnten - z.B. hatten