/* ========================================================================== app-scope.css — v2 App-Scope Reset + Tab-Layout-SSOT Quelle: extrahiert aus app.css (Bloecke "Reset innerhalb app-scope" und die globale `.tab-content:has(> .app-scope)`-Regel aus dem Block "Seiten-Shell Grundstruktur fuer v2"). Inhalt 1:1 uebernommen. Architektur-Begruendung (uebernommen aus app.css-Header): Alle Regeln sind unter `.app-scope` gescoped. Hintergrund: Die Handoff- `app.css` enthaelt globale Reset-Regeln (`* { box-sizing: border-box }`, `html, body { overflow: hidden }`, `button { cursor: pointer }`), die auf Altseiten gezogen werden wuerden, wenn die Datei global in `index.html` geladen waere. Die Scope-Klasse ist CSS-Isolation, keine Feature-Flag- Architektur. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ Reset innerhalb app-scope ══════════════════════════════════════════════════════════════════════════ */ .app-scope, .app-scope *, .app-scope *::before, .app-scope *::after { box-sizing: border-box; } .app-scope { /* Container wird vom Markup auf 100% Höhe des Content-Bereichs gesetzt. Kein overflow: hidden hier — das entscheidet die Seite selbst. Layout (display:flex / height:100%) konsolidiert hier — frueher in zwei Bloecken. */ color: var(--lod-gray-900); font-family: var(--lod-font-body); font-size: var(--font-size-md); line-height: var(--lh-comfortable); display: flex; flex-direction: column; height: 100%; width: 100%; } /* ── Overlay-Root (SSOT fuer body-gemountete Overlays) ───────────────────── Modals/Wizards/Paletten bauen einen Wrapper mit `.app-scope`, damit die Modal-CSS (`.app-scope .modal-backdrop`) greift — der Wrapper ist reiner STYLE-Scope und darf nie im Layout mitspielen. Ohne diesen Modifier passiert Folgendes: `` ist `display:flex; flex-direction:column; height:100vh`, `.app-shell` darin `flex:1` (→ flex-basis 0). Der angehaengte Wrapper wird ein weiteres Flex-Item und bringt aus der Regel oben `height:100%` mit — er beansprucht damit die komplette Body-Hoehe, `.app-shell` schrumpft auf 0 und weil `#main-content` `overflow:hidden` hat, verschwindet der gesamte App-Inhalt. Der 24%-Scrim liegt dann ueber der nackten body-Farbe und sieht aus wie eine Voll-Verdunkelung — der Hintergrund scheint NICHT mehr durch, obwohl der Scrim korrekt transparent ist. `display:contents` erzeugt keine Box (kein Layout, kein Containing Block), laesst aber Vererbung und alle Descendant-/Child-Selektoren intakt. Die Backdrops darin sind `position:fixed` bzw. `.scoped`-`absolute` und bezogen sich ohnehin nie auf den (statischen) Wrapper. Ausgenommen sind Overlay-Roots, die ihre EIGENE Box mitbringen und schon per `position:fixed` aus dem Fluss sind (`.collab-cursor-layer`, `.pauf-lkp`, `.pauf-tmpl-picker`, `.pauf-qc-panel`) — die brauchen ihre Box. Durchgesetzt vom Gate `check:overlay-scope`. */ .app-scope--overlay { display: contents; } .app-scope button, .app-scope input, .app-scope select, .app-scope textarea { font-family: inherit; font-size: inherit; color: inherit; } .app-scope button { cursor: pointer; border: none; background: none; padding: 0; } .app-scope a { color: inherit; text-decoration: none; } /* ══════════════════════════════════════════════════════════════════════════ Tab-Layout-SSOT (globale Regel, nicht .app-scope-gescoped) Wirkt auf jeden #tab-content-* Container, der einen .app-scope-Root als direktes Child hat. Hebt das Default-Padding (var(--space-6) aus layout.css:930) auf, damit die v2-App-Shell die Layout-Hoheit hat. Globaler Override mit !important — laeuft Cascade-unabhaengig. ══════════════════════════════════════════════════════════════════════════ */ /* Das Tab-Content-Panel eines v2-Tabs darf kein eigenes Padding haben — Padding wird innerhalb der Shell vom Seiten-Markup selbst entschieden. Wirkt nur auf Tab-Panels, die einen .app-scope-Root direkt als Child haben. */ .tab-content:has(> .app-scope) { padding: 0 !important; overflow: hidden !important; /* Drawer-Scroll-Container macht eigene Scroll-Regelung */ }