:root { --bg: #0e1116; --bg-elevated: #161b22; --bg-elevated-2: #1c2229; --border: #2a313c; --border-soft: #232a33; --text: #e6e9ef; --text-dim: #8b95a5; --accent: #4ade80; --accent-dim: #2f8f5a; --accent-2: #60a5fa; --danger: #f87171; --radius: 10px; --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1); /* Fallback: direkt der rohe env()-Wert, bis app.js (updateSafeAreaVars) ihn per JS-Messung mit erzwungenem Reflow überschreibt. Auf einem iPad-PWA-Kaltstart kann env() selbst (nicht nur 100dvh) laut einem dokumentierten WebKit-Bug falsche/eingefrorene Werte liefern, die sich ohne aktives Nachmessen nie korrigieren - das war die eigentliche Ursache des "wie nach oben verschoben"-Bugs, unabhängig davon, welche CSS-Formel drumherum stand. Siehe updateSafeAreaVars in app.js. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); } * { box-sizing: border-box; } html, body { height: 100%; width: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; font-size: 14px; } /* Verhindert, dass sich das GESAMTE Anwendungsfenster verschieben/scrollen lässt (v.a. iOS-Safari-Bounce-Effekt beim Ziehen außerhalb der Karte). NUR auf der eigentlichen Kartenanwendung (Klasse "app-shell" auf UND , siehe index.html) - Impressum/Datenschutz sind normale, potenziell lange Textseiten und binden dasselbe style.css ein; mit dieser Regel auf einem bare "html, body"-Selektor waren sie plötzlich nicht mehr scrollbar UND durch das fehlende automatische Zentrieren linksbündig statt zentriert. WICHTIG: / sind hier bewusst NICHT mehr selbst "position: fixed" (frühere Version war das, mit "inset: 0" oder einer vh/dvh-Einheit als Höhe - beides wurde ausprobiert, beides hatte in der installierten Homescreen-App (Standalone) mal eine sichtbare Lücke, mal sichtbar abgeschnittene Inhalte am unteren Rand zur Folge, ganz unabhängig von der genauen Formel). Stattdessen bleiben / im normalen Fluss (nur mit fester Höhe und "overflow: hidden" als Bounce-Sperre) - NUR NOCH #app selbst ist "position: fixed", direkt mit "top:0; left:0; height:100vh; width:100vw" (siehe unten). Das folgt einem von Lukas gefundenen, auf Apples eigenem WebKit-Blog zu "Designing Websites for iPhone X" basierenden Muster: nur EIN fixiertes Element statt zwei ineinander verschachtelte. Der frühere Grund, das bewusst NICHT so zu machen (zwei potenziell voneinander abweichende Fixed-Anker während einer laufenden Drehung), gilt inzwischen nicht mehr: eine echte Drehung führt jetzt zu einem kompletten Neuladen der Seite (siehe checkForRealOrientationChange in app.js) statt einer Live-Neuberechnung - es gibt also keine laufende Übergangsphase mehr, in der zwei Anker auseinanderlaufen könnten. */ /* KORREKTUR: Das Entfernen von "overflow: hidden" (vorherige Version) änderte per Livemessung NICHTS an body/html RECT (weiterhin 788px statt 820px) - logisch, "overflow" beeinflusst nie die eigene Boxgröße eines Elements, nur ob darüber hinausgehender INHALT sichtbar bleibt. Der eigentliche Verdächtige war die falsche Höhen-EINHEIT: "height: 100%" verhält sich in der PWA laut allen bisherigen Messungen genau wie dvh/innerHeight/visualViewport (kurz, 788px) - NUR die reine "vh"-Einheit maß hier durchgehend korrekt (820px, per isoliertem Test-Element UND jetzt auch direkt an #app bestätigt). / nutzen deshalb jetzt ebenfalls "100vh" statt "100%" - dieselbe Einheit wie das fixierte #app, wodurch Vorfahre und Kind dieselbe (korrekte) Höhe haben und sich die Frage nach einem Zurückschneiden gar nicht mehr stellt. Für die Bounce-Sperre reicht "overscroll-behavior: none" allein aus (das moderne, für genau dieses Problem gedachte CSS-Feature) - hat ohnehin keinen eigenen sichtbaren/scrollbaren Inhalt mehr, alles läuft über das fixierte #app. */ html.app-shell, body.app-shell { height: 100vh; overscroll-behavior: none; } #app { position: fixed; top: 0; left: 0; height: var(--app-height, 100vh); width: 100vw; display: flex; flex-direction: column; /* "var(--app-height, 100vh)" statt direkt "100vh": app.js (measureAppHeight/updateAppHeight) misst die Höhe kontextabhängig neu und überschreibt den Fallback - im normalen Safari-Tab per window.visualViewport.height (reagiert korrekt auf die ein-/ ausblendende Adressleiste und die Bildschirmtastatur), in der installierten PWA per isoliertem Test-Element (dort lieferten visualViewport/innerHeight beide denselben zu kurzen Wert wie dvh - nur diese eine Technik maß nachweislich korrekt). "100vh" bleibt nur als Fallback, bis JS das erste Mal gelaufen ist. padding-top bleibt nötig, damit der Inhalt (Topbar) nicht sichtbar unter/hinter der Statusleiste läuft (die Statusleiste überlagert #app, verdrängt dessen Inhalt aber nicht von selbst). UNTEN bewusst KEIN Padding (mehr): der Home-Indicator-Bereich ist nur eine Wisch-GESTEN-Zone, kein optisch blockierender Bereich wie die Statusleiste - andere auf demselben iPad installierte PWAs laufen dort nachweislich randlos bis zum echten Bildschirmrand durch (per direktem Vergleich bestätigt), ein eigens reservierter Rand sah dagegen wie ein Darstellungsfehler aus (heller Kartenausschnitt, der abrupt von einem dunklen Streifen abgeschnitten wird). Die Karte hat unten ohnehin keine fest angehefteten Bedienelemente, die mit der Geste kollidieren könnten. Im schmalen Mobile-Layout (siehe Media Query weiter unten) bleibt die dortige GENAUERE Behandlung (Toolbar-Höhe inkl. Sicherheits- abstand) unverändert bestehen - die betrifft eine eigene, tatsächlich interaktive Symbolleiste, nicht die reine Kartenansicht. "var(--safe-top)" statt direkt "env(...)": die Custom-Property wird in :root zunächst auf den rohen env()-Wert gesetzt, aber von app.js (updateSafeAreaVars) per JS-Messung mit erzwungenem Reflow überschrieben, sobald ein zuverlässigerer Wert vorliegt - env() selbst kann auf einem PWA-Kaltstart laut einem dokumentierten WebKit-Bug falsch/eingefroren sein (siehe app.js). */ padding-top: var(--safe-top, 0px); } /* ---------------- Topbar ---------------- */ #topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 56px; background: linear-gradient(180deg, var(--bg-elevated), var(--bg)); border-bottom: 1px solid var(--border); z-index: 20; } /* Ist jetzt ein