/* ============================================================
Komponente: dialog
------------------------------------------------------------
Quelle: Figma „Design System" → Dialogs & Modals → dialog,
node 11604:1622, ausgelesen am 28.08.2026.
Enthält AUSSERDEM den Innenaufbau `.overlay__*`, den sich
dialog und sheet teilen — in Figma sind es dieselben Frames
(kopf → kopfblock → titelzeile / unterblock → aktionen).
`sheet.css` setzt diese Datei voraus. Doppelt gepflegt würden
die beiden auseinanderlaufen.
Nachgezogen am 31.08.2026 gegen die neue Figma-Beschreibung:
Aussenmaße (§22.2a), verschachtelte Staffelung (§22.2b),
1-px-Rand (§22.1) und das Verlaufsband über der fixierten
Fußzeile (§22.6).
Zwei Achsen:
kopf = titel | icon | schliessen
aktionen = nebeneinander | untereinander | einzeln | keine
DIE MASSE SIND NICHT SYMMETRISCH — nicht nach Augenmaß
nachbauen. Aussen 24/8/24/8. Die Titelzeile trägt zusätzlich
16 LINKS, alle anderen Blöcke 16 auf BEIDEN Seiten. Daraus:
Text bei 24, ✕-Glyph bei 25,5. Grund: die Klickfläche des ✕
ist 45 breit, das Glyph nur 10 — ohne den Versatz stünde das
Zeichen 14 px zu weit innen (§22.2a).
Bei kopf=schliessen kommt .dialog--kopf-schliessen dazu: oben
16 statt 24, weil die Titelzeile wegen der 45-px-Klickfläche
höher ist als der Titel und oben 8,5 px Luft entstehen.
16 + 8,5 = 24,5, optisch gleich zum unteren Rand.
Dialoge sind IMMER neutral (§21.3) — surface-card, nie getönt.
Es gibt keine Variante mit farbiger Fläche. Die Rolle trägt
das Kreis-Icon, ein Status-Chip oder die dialog meldung.
VERWENDUNG
DIE VERSCHACHTELUNG IST DIE STAFFELUNG, kein Padding je
Textfeld: texte (8) → titelzeile + inhalt · inhalt (16) →
Text + unterblock · unterblock (8) → Meldung, Zeilen,
Optionen, Fusstext. Daraus Titel→Text 8, Text→Meldung 16,
Meldung→Fusstext 8.
WARUM VERSCHACHTELT: wird ein Element ausgeblendet, kollabiert
sein Abstand mit. Bei Padding bliebe die Lücke stehen — und
weil sechs Elemente einzeln schaltbar sind, wäre das der
Normalfall, nicht die Ausnahme. Der frühere .overlay__kopfblock
ist deshalb durch .overlay__inhalt ersetzt: er hatte titelzeile
und Text zusammengefasst, dadurch stand bei fehlendem Text der
Abstand Titel→Meldung auf 16 statt auf 8 (§22.2b).
DESTRUKTIVE AKTION: den rechten Button gegen .btn--warning
tauschen. Es gibt dafür keine eigene Dialog-Variante (§22.2).
============================================================ */
.dialog {
display: flex;
flex-direction: column;
gap: var(--space-lg); /* 24 */
/* Figma: 24/8/24/8, NICHT 24 rundum (§22.2a). Die 16 nach
innen sitzen an .overlay__titelzeile (nur links) und an
.overlay__inhalt / .overlay__aktionen (beidseitig). */
/* Der Seitenrand als eigene Variable: die Kopf-Trennlinie muss
ihn wieder aufheben, um randlos zu laufen (§22.6, §26.5). */
--overlay-rand: var(--space-xs); /* 8 */
padding: var(--space-lg) var(--overlay-rand); /* 24 / 8 */
/* Figma: 353 = 393 - 2 x screen-margin. Als max-width, damit
der Dialog auf Tablet und Desktop nicht mitwächst. */
width: calc(100% - 2 * var(--layout-screen-margin));
max-width: 353px;
background-color: var(--surface-card);
/* 1 px label-outline an allen drei Bauteilen (§22.1). Nicht
optional: surface-card liegt nur 1,23:1 über surface-primary
(Light 1,13:1) — die Kante der Überlagerung entsteht am Rand
und am Scrim, nicht an der Fläche.
Als inset box-shadow, nicht als border — siehe den Hinweis
unter .scrim. */
box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
border-radius: var(--radius-md); /* 20 */
}
/* kopf=schliessen — oben 16 statt 24 (§22.2a) */
.dialog--kopf-schliessen {
padding-top: var(--space-md); /* 16 */
}
/* ------------------------------------------------------------
DER 1-PX-RAND IST EIN INSET BOX-SHADOW, KEIN BORDER (§23.6)
------------------------------------------------------------
In Figma liegt der Strich INSIDE und verbraucht keinen Platz —
Padding wird von der Rahmenkante gemessen. Ein CSS-border tut
das nicht: mit box-sizing: border-box schiebt er allen Inhalt
um 1 px nach innen. Nachgemessen am 31.08.2026 im Browser:
der Titel stand bei 25 statt 24, das ✕-Glyph bei 26,5 statt
25,5 — jedes Maß aus §22.2a um genau 1 px verschoben.
Ein inset box-shadow malt dieselbe Linie, folgt dem Radius und
nimmt keinen Platz. Dieselbe Lösung wie beim 2-px-Rand des
aktiven Chips, und aus demselben Grund.
------------------------------------------------------------ */
/* ------------------------------------------------------------
Scrim — abgedunkelter Grund unter Dialog und Sheet
------------------------------------------------------------ */
.scrim {
position: fixed;
inset: 0;
background-color: var(--transparent-scrim-black-50);
}
/* ------------------------------------------------------------
Geteilter Innenaufbau (dialog + sheet)
------------------------------------------------------------ */
.overlay__kopf {
display: flex;
flex-direction: column;
gap: var(--space-md); /* 16 */
width: 100%;
}
/* texte (8) → titelzeile + inhalt · inhalt (16) → Text +
unterblock · unterblock (8) → Meldung, Zeilen, Optionen,
Fusstext. Die Zahlen sind die Staffelung aus §22.2b. */
.overlay__texte,
.overlay__unterblock {
display: flex;
flex-direction: column;
gap: var(--space-xs); /* 8 */
width: 100%;
}
.overlay__inhalt {
display: flex;
flex-direction: column;
gap: var(--space-md); /* 16 */
width: 100%;
padding-inline: var(--space-md); /* 16 (§22.2a) */
}
/* Die Titelzeile läuft bis an den rechten Rand — dort sitzt die
45-px-Klickfläche des ✕ und bringt das Glyph selbst auf 25,5.
Links braucht sie die 16 (§22.2a). */
.overlay__titelzeile {
display: flex;
align-items: center;
gap: var(--space-lg); /* 24 */
width: 100%;
padding-left: var(--space-md); /* 16 */
}
/* Titel ist H2 in Dialog UND Sheet (§22.1). Bis 28.08.2026 stand
im Sheet H3 — in Figma auf H2 vereinheitlicht. */
.overlay__titel {
flex: 1 0 0;
min-width: 0;
font-family: var(--font-family-display);
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
}
.overlay__text,
.overlay__fusstext {
font-size: var(--font-size-small-text);
line-height: var(--line-height-small-text);
font-weight: var(--font-weight-regular);
color: var(--text-description);
}
/* ------------------------------------------------------------
kopf=icon — Kreis-Icon, Titel und Text zentriert
------------------------------------------------------------
Der 70-px-Kreis trägt die Rolle (§21.3): warning-red-fill für
Fehler, green-label-fill für Erfolg, blue-label-fill für
Hinweise. Die FLÄCHE des Dialogs bleibt neutral.
Kein ✕ in dieser Variante — der Ausgang sind die Aktionen.
------------------------------------------------------------ */
/* Ohne Titelzeile trägt der Kopf die 16 selbst, sonst stünde das
zentrierte Icon 16 px schmaler als der Text darunter. */
.overlay__kopf--icon {
align-items: center;
padding-inline: var(--space-md); /* 16 */
}
.overlay__kopf--icon .overlay__inhalt {
padding-inline: 0;
}
.overlay__kopf--icon .overlay__titel,
.overlay__kopf--icon .overlay__text {
text-align: center;
}
.overlay__kopf-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: var(--radius-full);
}
/* ------------------------------------------------------------
Zeilen — Label/Wert-Paare im unterblock
------------------------------------------------------------ */
.overlay__zeilen {
display: flex;
flex-direction: column;
gap: var(--space-sm); /* 12 */
width: 100%;
}
.overlay__zeile {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.overlay__zeile-label {
font-size: var(--font-size-small-text);
line-height: var(--line-height-small-text);
font-weight: var(--font-weight-regular);
color: var(--text-description);
}
.overlay__zeile-wert {
font-size: var(--font-size-small-text);
line-height: var(--line-height-small-text);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-small-text-bold);
color: var(--text-primary);
text-align: right;
}
/* ------------------------------------------------------------
Aktionen
------------------------------------------------------------
§13.1 gilt unverändert: rechts bzw. oben die vorwärts
gerichtete Aktion, links bzw. unten abbrechen.
BUTTON-GRÖSSE — aus Figma ausgelesen:
untereinander / einzeln medium (Padding 16/24)
nebeneinander small (45 px, Padding 12/16)
§13.6 nannte für Dialog und Sheet pauschal medium. Zwei
medium-Buttons nebeneinander passen in 353 px nicht — deshalb
small. §13.6 ist entsprechend korrigiert (§22.2).
BUTTON-KLASSE: Der Abbrechen-Slot ist .btn--secondary oder
.btn--tertiary, NIE .btn--ghost. Ghost-Tertiär gehört nicht in
Dialog-Aktions-Gruppen (§13.2a, §13.7). Das gilt für die
FUSSZEILE — in der Kopfzeile (.overlay__titelzeile, neben Titel
und ✕) ist .btn--ghost erlaubt, siehe §10.1a und §24.6
(Zurücksetzen im Filter-Kopf). Diese Datei setzt die Klasse
nicht — die Slots sind reines Layout, die Klasse kommt aus
button.css.
------------------------------------------------------------ */
.overlay__aktionen {
position: relative;
display: flex;
width: 100%;
padding-inline: var(--space-md); /* 16 (§22.2a) */
}
/* ------------------------------------------------------------
Verlaufsband über der fixierten Fußzeile (§22.6)
------------------------------------------------------------
Eine deckende Fußzeile schneidet den Inhalt ab: im Filter-Sheet
stand „Titelsprache" halb unter dem Button. Das liest sich wie
ein Rendering-Fehler, nicht wie eine Ebene.
ZWEI DINGE, UND BEIDE SIND NÖTIG:
1. dieses Band, 40 px, direkt über der Fußzeile
2. Scroll-Polster unten im Scrollbereich (.sheet__inhalt /
.dialog__inhalt) — ohne das bleibt die letzte Zeile
UNERREICHBAR. Der Verlauf lässt sie nur erreichbar
AUSSEHEN.
NUR WO ES EINEN SCROLLBEREICH GIBT. Deshalb hängt das Band an
.dialog--scroll bzw. .sheet--scroll und nicht an .overlay__
aktionen selbst — im Web-Dialog stehen die Sektionen ohne
Scrollen, dort fadet der Verlauf nichts.
40 UND NICHT DIE GANZE FUSSZEILE: der Fill-Style ist erst ab
90 % deckend. Bei 170 px Fußzeilenhöhe läge der Verlauf über
154 px, die Buttons stünden auf halbdurchsichtigem Grund und
der Inhalt schiene durch. Bei 40 px sind es 36 px Verlauf und
4 px deckend.
DER VERLAUF FOLGT DER FLÄCHE DARUNTER — dieselbe Regel wie beim
Chip (§5): auf surface-card der Figma-Stil „card blur", auf
surface-primary „surface primary blur" (--auf-screen).
VERLAUF ODER TRENNLINIE, NIE BEIDES. Der Verlauf ist die Kante.
------------------------------------------------------------ */
.dialog--scroll .overlay__aktionen::before,
.sheet--scroll .overlay__aktionen::before,
.overlay__aktionen--auf-screen::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 40px;
pointer-events: none;
background: linear-gradient(
180deg,
var(--surface-blur-gradient-0) 0%,
var(--overlay-verlauf-ende, var(--surface-card)) 90.4%
);
}
/* Fußzeile auf dem Screen-Grund statt auf einer Karte — etwa
„Filter zurücksetzen" im Leerzustand (§24.7).
Die Umschaltung läuft über eine Variable, NICHT über einen
zweiten background-Selektor: der Basis-Selektor ist zweistufig
(.sheet--scroll .overlay__aktionen), ein einstufiger Modifier
würde ihn nie überschreiben und bräuchte !important. Eine
Variable am Element gewinnt ohne Spezifitätskampf. */
.overlay__aktionen--auf-screen {
--overlay-verlauf-ende: var(--surface-primary);
}
/* Das Scroll-Polster. Höhe des Bandes, damit die letzte Zeile
über den Verlauf hinausscrollen kann. */
.dialog--scroll .dialog__inhalt,
.sheet--scroll .sheet__inhalt {
padding-bottom: 40px;
}
.overlay__aktionen--untereinander,
.overlay__aktionen--einzeln {
flex-direction: column;
gap: var(--space-sm); /* 12 */
}
/* Ein einzelner Button ist Full-Width, nie rechtsbündig (§13.5).
Dafür sorgt .btn--full am Button selbst. */
/* UMBRUCH IST VERPFLICHTEND, NICHT OPTIONAL (§22.2).
Reichen zwei Labels nebeneinander nicht, bricht die ANORDNUNG
um — nie das Label. Kein text-overflow, kein ellipsis, kein
kleinerer Schriftgrad: ein gekürztes Aktions-Label ist eine
unklare Aktion, und das ist schlimmer als ein zweizeiliger
Aktionsbereich.
flex-wrap entspricht dem, was in der App der OverflowBar mit
overflowDirection down macht. Zu testen bei Breite <= 360 und
Systemschrift >= 130 %.
DIE BUTTONS BLEIBEN small MIT 8 — sie werden im Umbruch NICHT
zu medium mit 12. Das wäre ein Komponentenwechsel mitten im
Layout: der Entwickler müsste zwei Komponenten vorhalten und
umschalten. Der OverflowBar stapelt dieselben Kinder, und
genau das ist richtig.
Ein umgebrochenes nebeneinander sieht deshalb anders aus als
ein gestaltetes untereinander, und das ist in Ordnung — es sind
zwei verschiedene Dinge. untereinander ist eine Entscheidung,
der Umbruch ist ein Notausgang bei 130 % Systemschrift.
nebeneinander ist die AUSNAHME und nur zulässig, wenn BEIDE
Labels höchstens 12 Zeichen haben. Standard ist untereinander. */
.overlay__aktionen--nebeneinander {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-xs); /* 8 */
}
.overlay__aktionen--nebeneinander > * {
flex: 1 1 auto;
min-width: max(40%, 8rem); /* darunter bricht es um */
}
/* ------------------------------------------------------------
Scrollender Dialog
------------------------------------------------------------
In Figma gibt es die Variante nicht — der Web-Dialog zeigt alle
Sektionen ohne Scrollen. Gebaut für den Fall, dass der Inhalt
die Höhe überschreitet, und nach derselben Regel wie im Sheet
(§19.4, §22.6): Kopf klebt, Inhalt scrollt, Aktionen bleiben
unten und tragen das Verlaufsband.
------------------------------------------------------------ */
.dialog--scroll {
max-height: 80vh;
overflow: hidden;
}
.dialog--scroll .overlay__kopf {
position: sticky;
top: 0;
z-index: 1;
background-color: var(--surface-card);
}
/* ------------------------------------------------------------
Trennlinie unter dem klebenden Kopf (§22.6)
------------------------------------------------------------
Nur wenn gescrollt wird. Steht der Inhalt still, gibt es
nichts zu trennen.
RANDLOS, NICHT EINGEZOGEN (entschieden 02.09.2026, vorher 16
eingezogen). Die Linie trennt den festen oberen Bereich von dem,
was darunter scrollt — das ist eine Kante der Bauform, keine
Kante des Inhalts. Deshalb läuft sie bis an die Außenkante und
hebt mit einem negativen margin den Seitenrand des Overlays
wieder auf (--overlay-rand: 8 im Dialog, 4 im Sheet). Gleiche
Linie wie am klebenden Screen-Kopf (§26.5).
Als ::after und nicht als border-bottom: sie ist ein Flex-Kind
von .overlay__kopf und sitzt damit NACH dem gap von 24, nicht
direkt an der Titelzeile. Ein border-bottom klebte am Text.
AN DER SCROLL-POSITION, NICHT AN DER SCROLLBARKEIT: die Linie
hängt an data-scrolled="true", nicht an --scroll allein. Steht
der Inhalt oben, gibt es nichts zu trennen — genau wie beim
klebenden Screen-Kopf (§22.6). --scroll sagt nur, DASS gescrollt
werden kann; data-scrolled sagt, DASS gescrollt WURDE.
Das Attribut setzt die Anwendung auf demselben Element wie den
--scroll-Modifier, aus einem scroll-Listener am .dialog__inhalt
bzw. .sheet__inhalt: scrollTop > 2 → "true", sonst "false".
Kein Richtungswechsel, keine Hysterese.
------------------------------------------------------------ */
.dialog--scroll[data-scrolled="true"] .overlay__kopf::after,
.sheet--scroll[data-scrolled="true"] .overlay__kopf::after {
content: "";
flex: 0 0 auto;
height: var(--outline-default);
margin-inline: calc(-1 * var(--overlay-rand)); /* randlos (§26.5) */
background-color: var(--label-outline);
}
.dialog__inhalt {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
width: 100%;
}
/* ------------------------------------------------------------
Schließen-Knopf in der Titelzeile
------------------------------------------------------------
✕ steht rechts — Dialog und Sheet sind Flächen über dem
Inhalt (§19.2). Das aria-label benennt, was geschlossen wird,
nie nur „Schließen" (§19.6).
45 x 45 aus Figma. §19.7 nennt 48 als Zielwert und 44-45 als
akzeptabel; die Hit-Area wächst über .touch-target.
------------------------------------------------------------ */
.dialog__schliessen,
.sheet__schliessen {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: none;
backdrop-filter: blur(3px);
color: var(--button-icon-button-text);
cursor: pointer;
}
.dialog__schliessen > svg,
.sheet__schliessen > svg {
width: 10px;
height: 10px;
}