/* ============================================================ Komponente: inhalte-overlay (Kategorie-Panel, Tablet) ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Modal Mega Menu Tablet Inhalte, node 13863:59939, ausgelesen am 04.09.2026. Öffnet sich über dem aktuellen Screen und zeigt alle Kategorien des Standorts. Immer dasselbe Overlay, egal von welcher Seite es kommt. ------------------------------------------------------------ DAS ZEICHEN: KEINS. UND DAS IST KEIN VERSEHEN. §19 fragt zwei Dinge. Erstens: ist die Navigation verdeckt? Hier NICHT — der Streifen bleibt sichtbar und links davon liegt kein Scrim. Zweitens: Fläche über dem Inhalt oder Voll-Screen? Eine Fläche. Nach §19.1 wäre das also ein ← , nach §19.2 rechts — und damit fällt es aus dem Raster: ein ← in einer Überlagerung ist nach §19.3 ausdrücklich verboten. Der Ausweg steht in §19.3 selbst: „Rückschritt ist ein benannter Button im Inhalt, nie ein Pfeil in der Kopfzeile." Hier ist der benannte Weg zurück der Tab „Inhalte" im Streifen, der die ganze Zeit sichtbar und aktiv ist. Dazu die drei Wege raus, die §19.4 für Sheets fordert: Scrim antippen, Escape, und eine Kategorie wählen. IN §19 ZU ERGÄNZEN: die Bauform „Fläche über dem Inhalt, die die Navigation NICHT verdeckt" ist dort nicht vorgesehen. Auf dem Tablet gibt es sie, weil der Streifen an der Seite liegt. ------------------------------------------------------------ DER SCRIM LIEGT NUR ÜBER DEM INHALT In Figma beginnt er bei x=112, also rechts vom Streifen. Das ist die Aussage: die Navigation bleibt bedienbar, alles andere nicht. dialog.css setzt .scrim auf inset:0 — hier wird der linke Rand deshalb überschrieben. Setzt tokens.css, base.css, dialog.css (für .scrim) und components/kategorie-karte.css voraus. ------------------------------------------------------------ NACHGEZOGEN AM 04.09.2026 Das Panel ist in Figma inzwischen 416 breit (war 400), trägt 24 Seitenrand (war 16) und im Kopf einen Close-Button. Der Kopf ist neu 55 hoch mit dem Button rechtsbündig darin. Neu ausgelesen an 12845:14710. DER SEITENRAND SITZT AM PANEL, NICHT AN DER LISTE. Grund: base.css setzt `ul[role="list"] { padding: 0 }`, und dieser Selektor ist mit Element plus Attribut spezifischer als eine Klasse — er gewinnt unabhängig von der Reihenfolge der -Zeilen. Ein Padding an der Liste wurde deshalb stillschweigend verworfen, und das Panel stand ohne Rand da. Am Panel gibt es diesen Konflikt nicht. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 416 Breite des Panels (24 + 368 + 24). 112 Beginn des Scrims (Breite des Streifens). 55 Höhe der Kopfzeile: Titel 30 + 4 + Untertitel 21. ============================================================ */ .inhalte-overlay { position: fixed; top: 0; bottom: 0; z-index: 21; /* Direkt rechts am Streifen. --rail-rechts kommt vom Screen, weil die Bühne bei breiten Fenstern zentriert ist. */ left: var(--rail-rechts, 112px); width: 416px; /* gemessen, siehe Kopf */ max-width: calc(100% - var(--nav-rail-breite, 112px)); display: flex; flex-direction: column; overflow-y: auto; /* Seitenrand am Panel, nicht an der Liste — siehe Kopf. */ padding-inline: var(--space-lg); /* 24 */ background-color: var(--surface-primary); } /* Der Scrim beginnt rechts vom Streifen, nicht am Fensterrand. */ .scrim--inhalte { left: var(--rail-rechts, 112px); z-index: 20; } /* Kopf: Titel und Erklärung links, ✕ rechts. 24 oben. Der Titel ist H3 — er benennt einen Inhalt, keine Bedienoberfläche (§26.3 unterscheidet das ausdrücklich). DAS ✕ STEHT RECHTS. Ein Panel ist eine Fläche über dem Inhalt, und dort sitzt das Zeichen rechts (§19.2). Links wäre es nur bei einem Voll-Screen richtig. */ .inhalte-overlay__kopf { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-lg); /* 24 */ } .inhalte-overlay__texte { display: flex; flex-direction: column; gap: var(--space-2xs); /* 4 */ flex: 1 0 0; min-width: 0; } .inhalte-overlay__titel { font-family: var(--font-family-display); font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-bold); color: var(--text-primary); } .inhalte-overlay__erklaerung { font-family: var(--font-family-inter); font-size: var(--font-size-small-text); line-height: var(--line-height-small-text); color: var(--text-description); } /* Die Liste. 12 Abstand zwischen den Karten, 24 über der ersten (Figma: Kopf endet bei 79, Liste beginnt bei 103) und 24 unter der letzten — damit sie beim Scrollen nicht an der Kante klebt. Der Seitenrand steht NICHT hier, sondern am Panel (siehe Kopf): base.css würde ihn an einer ul[role="list"] überschreiben. */ /* ul davor, nicht nur die Klasse: base.css setzt `ul[role="list"] { padding: 0 }`, und Element plus Attribut ist spezifischer als eine Klasse allein — ohne das `ul` fällt das Padding hier still weg. Genau daran lag der fehlende Rand am 04.09.2026, zweimal an zwei Stellen. */ ul.inhalte-overlay__liste { display: flex; flex-direction: column; gap: var(--space-sm); /* 12 */ list-style: none; margin: 0; padding-block: var(--space-lg); /* 24 oben und unten */ padding-inline: 0; } /* ------------------------------------------------------------ Bewegung ------------------------------------------------------------ Das Panel fährt von links herein — aus der Richtung, aus der es aufgerufen wurde, nämlich vom Streifen. Prozent, nicht Pixel: dann gilt es für jede Panelbreite. Dauer und Kurve sind die des Sheets aus motion.css: es ist dieselbe Bauform, nur an einer anderen Kante. Eigene Werte wären eine zweite Quelle (SKILL.md §23). ------------------------------------------------------------ */ .inhalte-overlay { transition: transform calc(var(--motion-sheet) * var(--motion-scale)) var(--motion-ease-drawer); } .inhalte-overlay.is-zu { transform: translateX(-100%); } /* Reduced Motion: die Fläche erscheint, statt zu fahren — die Ortsveränderung fällt weg, die Deckkraft trägt weiter (§23.7). */ @media (prefers-reduced-motion: reduce) { .inhalte-overlay { transition: opacity calc(var(--motion-dialog) * var(--motion-scale)) var(--motion-ease-out); } .inhalte-overlay.is-zu { transform: none; opacity: 0; } } /* ============================================================ OFFEN ------------------------------------------------------------ · §19 kennt diese Bauform nicht (siehe Kopf). Zu ergänzen. · Das Panel hat seit dem 04.09.2026 ein ✕ (12845:14710). Damit sind es vier Wege raus: ✕, Scrim, Escape und ein zweiter Klick auf den Nav-Tab. Der Absatz zum Zeichen im Kopf dieser Datei bleibt gültig — er erklärt, warum es rechts steht und nicht links. ============================================================ */