/* ============================================================ Komponente: sheet (Bottom Sheet) ------------------------------------------------------------ Quelle: Figma „Design System" → Dialogs & Modals → sheet, node 11616:1669, ausgelesen am 28.08.2026. SETZT dialog.css VORAUS. Der Innenaufbau `.overlay__*` ist in Figma für dialog und sheet derselbe Frame-Baum und liegt deshalb nur einmal, in dialog.css. Eine Achse: aktionen = untereinander | einzeln | keine. **Kein `nebeneinander`** — bei 393 px werden zwei Buttons nebeneinander zu breit, §13.4 gilt hier ohne Ausnahme (§22.3). ES GIBT KEINE SHEET-GRÖSSEN (§19.4). Kein S/M/L. Die Höhe folgt dem Inhalt. Die einzige Unterscheidung ist ein Verhalten: scrollt der Inhalt, klebt die Kopfleiste → .sheet--scroll. Sheets sind IMMER neutral (§21.3), wie Dialoge. Nachgezogen am 31.08.2026: Aussenmaße (§22.3), 1-px-Rand (§22.1), Verlaufsband und Scroll-Polster (§22.6). DIE MASSE SIND NICHT SYMMETRISCH — nicht nach Augenmaß nachbauen. Aussen 12/4/36/4. Die Titelzeile trägt zusätzlich 16 LINKS, alle anderen Blöcke 16 auf beiden Seiten. Daraus: Text bei 20, ✕-Glyph bei 21,5. Wer stattdessen 20 seitliches Padding setzt, bekommt ein ✕, das 14 px zu weit innen sitzt — die Klickfläche ist 45 breit, das Glyph nur 10 (§22.3). Unten sind es 36 statt 24: Platz für die Home-Indicator-Zone. ZWEI EBENEN VON ABSTÄNDEN, beide gültig: aussen 24 zwischen Kopf, Inhalt und Aktionen — innen 8/16/8 in der Staffelung aus §22.2b. Das ist kein Widerspruch, die 24 liegen eine Ebene höher. AUSNAHME GRABBER: zwischen Grabber und Kopf sind es 12, nicht 24 (11.09.2026, node 12063:6342). Der Grabber ist kein eigener Block mit Inhalt — er gehört optisch zum Kopf, und 24 lassen ihn davonschwimmen. DAS ✕ SITZT IM SHEET, oben rechts in der Titelzeile — nicht darüber auf dem Scrim. Der Grabber ist rein visuell, die Geste liegt auf dem ganzen Sheet (§22.3). VERWENDUNG
============================================================ */ .sheet { display: flex; flex-direction: column; gap: var(--space-lg); /* 24 */ /* Figma: 12/4/36/4 — bewusst asymmetrisch. Die 16 nach innen sitzen an .overlay__titelzeile (nur links) und an .overlay__inhalt / .overlay__aktionen (beidseitig); daraus Text bei 20. NICHT 20 hier setzen (§22.3). Oben sitzt der Grabber, unten trägt der größere Abstand die Aktionen von der Screen-Unterkante weg. */ /* Seitenrand als Variable — die Kopf-Trennlinie hebt ihn auf, um randlos zu laufen (§26.5). */ --overlay-rand: var(--space-2xs); /* 4 */ padding-top: var(--space-sm); /* 12 */ padding-inline: var(--overlay-rand); /* 4 */ padding-bottom: var(--space-xl); /* 36 */ /* RUNTERWISCHEN GEHÖRT DEM SHEET, NICHT DEM BROWSER. Ohne diese Zeile scrollt der Browser bei einem Zug nach unten die Seite darunter und liefert die Bewegung nicht aus — die Geste aus §19.4 käme nie an. Ausgenommen ist der scrollende Bereich weiter unten: dort gilt pan-y, dort scrollt der Finger. Ergänzt am 11.09.2026. Im Web-Sheet (zentriertes Overlay) gibt es die Geste nicht; dort wird die Regel unten wieder aufgehoben. */ touch-action: none; /* Volle Screenbreite, sitzt an der Unterkante. */ width: 100%; background-color: var(--surface-card); /* 1 px label-outline wie Dialog und dialog meldung (§22.1), als inset box-shadow und nicht als border — der Hinweis dazu steht in dialog.css. Der Schatten folgt dem Radius, also auch den beiden gerundeten oberen Ecken. Unten läuft die Linie mit, ist aber nie zu sehen: das Sheet sitzt an der Screen-Unterkante. */ box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline); /* Nur oben gerundet — unten schließt es mit dem Screen ab. */ border-radius: var(--radius-md) var(--radius-md) 0 0; } /* ------------------------------------------------------------ Grabber ------------------------------------------------------------ Bleibt, ersetzt das ✕ aber nicht — die Wischgeste ist bei 50+ nicht vorauszusetzen (§19.4). Drei Wege raus: ✕, Runterwischen, Scrim antippen. ------------------------------------------------------------ */ .sheet__grabber { display: flex; align-items: flex-start; justify-content: center; width: 100%; /* 12 statt 24 bis zum Kopf. In Figma liegen Grabber und Kopf dafür in einem eigenen Block („top", 12063:6342) mit gap 12, der im Wurzel-Gap von 24 steht. Hier zieht stattdessen der Grabber die Differenz zurück: dasselbe Ergebnis ohne einen Wrapper, den jedes bestehende Markup nachtragen müsste (§8a — verbindlich ist das Ergebnis, nicht der Aufbau). Verschwindet der Grabber (.sheet--web), geht die Rücknahme mit ihm. */ margin-bottom: calc(var(--space-sm) - var(--space-lg)); /* 12 − 24 */ } .sheet__grabber::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background-color: var(--text-description); } /* ------------------------------------------------------------ Scrollender Inhalt ------------------------------------------------------------ Sobald der Inhalt scrollt, scrollt der Titel weg und mit ihm der Ausgang. Deshalb klebt die Kopfleiste und nur der Inhalt darunter bewegt sich (§19.4). Nicht aus Figma — dort gibt es keine Scroll-Variante. Gebaut nach der Regel in §19.4. ------------------------------------------------------------ */ /* svh UND NICHT vh (15.09.2026, Lisi auf einem Samsung A36: „das bottom sheet ist für mobile … zu hoch, wenn man scrollt nach oben dann geht es über und füllt mehr als den ganzen screen"). `100vh` ist auf dem Telefon die GROSSE Fassung: die Höhe, die der Bildschirm hätte, wenn die Adressleiste eingefahren wäre. Solange sie ausgefahren ist — und das ist sie beim Öffnen immer — sind 90vh mehr als 90 % des SICHTBAREN Bereichs; das Sheet reicht dann über die Oberkante hinaus, und der Grabber liegt hinter der Adressleiste. `100svh` ist die kleine Fassung: die Höhe MIT ausgefahrener Leiste. Damit bleiben die 10 % oben in jedem Zustand wirklich frei. Nicht `dvh` — die wächst und schrumpft beim Scrollen, und ein Sheet, das seine Höhe ändert, während man darin blättert, springt. Die vh-Zeile bleibt als Rückfall für Browser ohne svh stehen. Dieselbe Entscheidung wie für die Vollbild-Screens im Prototyp (14.09.2026). */ .sheet--scroll { max-height: 90vh; max-height: 90svh; overflow: hidden; } /* Die Trennlinie bleibt hier, obwohl §22.6 „Verlauf oder Trennlinie, nie beides" sagt: das gilt für EINE Kante. Oben und unten sind zwei, und sie tragen Verschiedenes — oben eine deckende Leiste, die als fixierter Balken gelesen wird und eine Kante braucht; unten ein Button, der über dem Inhalt schwebt und deshalb ausfaden muss. Zwei Verläufe wären zu viel, zwei Linien zu hart. Die Linie selbst liegt als ::after in dialog.css, damit Dialog und Sheet dieselbe haben — 16 eingezogen wie der Inhalt. */ .sheet--scroll .overlay__kopf { position: sticky; top: 0; z-index: 1; background-color: var(--surface-card); } /* Der scrollende Bereich. Die Aktionen liegen als Geschwister darunter und bleiben damit unten fixiert — eine Hauptaktion bleibt sichtbar, sekundäre Aktionen stehen am Ende des scrollenden Inhalts (§19.4). DAS SCROLL-POLSTER unten kommt aus dialog.css (§22.6): 40 px, damit die letzte Zeile über das Verlaufsband hinausscrollen kann. Ohne das Polster bleibt sie unerreichbar — genau der Fall, der im Filter-Sheet auffiel, wo „Titelsprache" halb unter dem Button stand. */ .sheet__inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; /* Hier scrollt der Finger, hier zieht er nicht. Siehe unten. */ touch-action: pan-y; /* KEIN ABSTAND UNTER DER KLEBENDEN KOPFLEISTE (14.09.2026). Die Trennlinie sagt „hier geht es weiter" — dahinter dürfen nicht erst 24 Pixel nichts stehen. Grabber und Kopfleiste behalten ihren Abstand, nur dieser eine fällt weg. Als Rücknahme des Wurzel-Gaps, wie schon am Grabber (12 statt 24): ein einzelnes Gap lässt sich nicht abschalten. IN JEDER SCROLL-POSITION, nicht erst mit der Linie — sonst rutscht der Inhalt beim ersten Scrollen um 24 nach oben, und genau dieses Springen soll die feste Zeile verhindern. */ margin-top: calc(-1 * var(--space-lg)); /* −24 */ } /* ------------------------------------------------------------ Web (§19.5) ------------------------------------------------------------ Im Web gibt es keine Bottom Sheets — jedes wird ein zentriertes Overlay, der Grabber entfällt. Zeichen und Seiten bleiben identisch. ------------------------------------------------------------ */ .sheet--web { max-width: 393px; margin-inline: auto; border-radius: var(--radius-md); /* Rand auf allen vier Seiten — den bringt der inset box-shadow ohnehin mit, hier ist nichts nachzulegen. Kein Home-Indicator unter einem zentrierten Overlay. */ padding-bottom: var(--space-lg); /* 24 */ } .sheet--web .sheet__grabber { display: none; } /* Kein Wischen, also auch keine Sperre. */ .sheet--web { touch-action: auto; } /* Im Web dieselbe Umstellung — dort ist es die Werkzeugleiste des Browsers statt der Adressleiste, der Fall ist derselbe. */ .sheet--web.sheet--scroll { max-height: 80vh; max-height: 80svh; }