/* ============================================================================
Komponenten — erster grober Stand.
Keine Komponente kennt ihre Zone, ihren Modus oder einen Hex-Wert (FE-11/13).
Inventar und die deutschen Namen: docs/frontend-plan.md § 6.
========================================================================== */
/* --- Eyebrow · Modultitel mit Indikator ----------------------------------- *
* Einen Modultitel gibt es nie ohne Indikator (Bereichsmarke 4 × 26). Im
* Styleguide steckt der Indikator in allen sechs Varianten, deshalb zeichnet
* ihn die Klasse selbst — vergessen kann ihn so niemand.
*
* Auf einer gepolsterten Fläche sitzt der Indikator auf deren Kante, der Text
* auf der Inhaltskante. Den Abstand dazwischen nennt die Fläche selbst über
* --content-inset (Panel, Karte …), und zwar derselbe Wert, mit dem sie sich
* polstert. Wo keine Fläche ihn nennt, ist var() ungültig, der Rand fällt auf
* 0 zurück und der Indikator steht einfach vor dem Text. */
.eyebrow {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-small);
font-weight: 700;
color: var(--zone-text-quiet);
}
.eyebrow::before {
content: "";
flex: none;
inline-size: var(--border-indicator);
block-size: var(--size-indicator);
border-radius: 0 var(--radius-indicator) var(--radius-indicator) 0;
background: currentcolor;
margin-inline: calc(-1 * var(--content-inset))
calc(var(--content-inset) - var(--border-indicator) - var(--space-2));
}
/* Das Icon im Modultitel ist im Styleguide ein Solid-Icon, dessen Aussparungen die
Fläche dahinter durchscheinen lassen. */
.eyebrow > .icon {
--size-icon: var(--size-icon-eyebrow);
}
/* --- Abschnittstitel · freiliegende Flächen -------------------------------- *
* Überschrift eines Abschnitts, der KEINE eigene Fläche hat — direkt auf dem
* Seitengrund. Dort ist der Modultitel (.eyebrow) fehl am Platz: Sein
* Indikator zieht sich aus dem --content-inset einer Karte oder eines Panels,
* den es hier nicht gibt (Issue #66). */
.section-title {
font-size: var(--font-size-card-title);
font-weight: 700;
color: var(--zone-text-strong);
}
/* --- Button · „Knopf" ----------------------------------------------------- *
* Drei Töne. „Auf Grün" und „auf Tinte" sind KEINE Varianten — das macht die
* Zone. Aus acht Varianten werden so drei Regeln (FE-21).
*
* Reihenfolge der Regeln: aufsteigende Spezifität, sonst kann eine spätere
* Regel eine frühere nicht mehr sicher überschreiben (K-24). */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--button-gap);
min-block-size: var(--size-button);
min-inline-size: var(--size-target-min);
padding-block: var(--button-padding-block);
padding-inline: var(--button-padding-inline);
border: var(--border-hairline) solid transparent;
border-radius: var(--radius-button);
box-shadow: 0 var(--shadow-offset-control) 0 0 var(--shadow-control);
font: inherit;
font-size: var(--font-size-small);
font-weight: 700;
line-height: 1.2;
cursor: pointer;
background: none;
color: inherit;
/* Ein Knopf ist nie unterstrichen, auch nicht als und nicht beim
Überfahren (FE-81). */
text-decoration: none;
transition:
transform var(--motion-fast) var(--motion-ease),
box-shadow var(--motion-fast) var(--motion-ease);
}
.button--primary {
background: var(--zone-action-bg);
color: var(--zone-action-text);
}
.button--secondary {
background: var(--zone-carrier-bg);
color: var(--zone-carrier-text);
border-color: var(--zone-border); /* FE-36: helle Fläche braucht die Kante */
}
.button--outline {
background: transparent;
color: var(--zone-text-strong);
border-color: var(--zone-border-interactive);
}
/* Ohne Rahmen, ohne Fläche, ohne Versatz — für Aktionen, die in einer Tabelle
oder Liste stehen und das Raster nicht zerschneiden sollen. */
.button--ghost {
background: transparent;
color: var(--zone-text-strong);
border-color: transparent;
box-shadow: none;
}
/* Beim Überfahren zieht der Knopf leicht hoch und der harte Versatz wird zum
weichen Schatten — er hebt sich von der Fläche ab, statt auf ihr zu liegen. */
.button:hover {
transform: translateY(calc(-1 * var(--lift-hover)));
box-shadow: 0 var(--shadow-offset-control-hover) var(--shadow-blur-control-hover) 0
var(--shadow-control);
}
/* Gesperrt — wartet auf eine Antwort oder darf gerade nichts: bleibt an Ort
und Stelle, ohne Versatz, im leisen Ton. aria-disabled statt disabled, wo
ein Tooltip den Grund nennt — ein disabled-Knopf ist nicht fokussierbar,
der Hinweis wäre per Tastatur unerreichbar (FE-25a). Dann type="button"
ohne Formular, damit er nichts auslöst. */
.button:disabled,
.button[aria-disabled="true"],
.button:disabled:hover,
.button[aria-disabled="true"]:hover {
transform: none;
color: var(--zone-text-quiet);
border-color: var(--zone-border);
background: transparent;
box-shadow: none;
cursor: not-allowed;
}
/* Der rahmenlose Knopf hebt sich zwar, bekommt aber keinen Schatten — und
keine Unterstreichung, die ihn zum Link machen würde (FE-81). */
.button--ghost:hover {
box-shadow: none;
}
/* Wer Bewegung abbestellt hat, bekommt den Schattenwechsel ohne den Sprung. */
@media (prefers-reduced-motion: reduce) {
.button:hover {
transform: none;
}
}
/* Mit Icon wird die Polsterung auf der Icon-Seite schmaler — kein Modifier,
die Komponente sieht selbst nach, ob ein Icon darin steht. */
.button:has(> .icon:first-child) {
padding-inline-start: var(--button-padding-inline-icon);
}
/* Ein Icon am Ende — der Pfeil eines „Weiter"-Knopfs. :has() kann es nicht
von einem am Anfang unterscheiden, weil Textknoten nicht als Kinder zählen:
Das einzige Icon ist immer zugleich erstes und letztes Kind. Deshalb hier
ausnahmsweise ein Modifier; er nimmt die Regel darüber wieder zurück. */
.button--trailing:has(> .icon:last-child) {
padding-inline: var(--button-padding-inline) var(--button-padding-inline-icon);
}
/* Nur das Icon: die sichtbare Beschriftung liegt versteckt, der Knopf bleibt
quadratisch und die Zielgrösse gilt weiter (NFA-18). */
.button:not(:has(> :not(.icon, .visually-hidden))) {
padding-inline: var(--button-padding-inline-icon);
}
/* --- Chip · Info ---------------------------------------------------------- *
* Fakten in der Spielrunde: Zeit, Ort, Zusagen. Kein Bedienelement — NFA-18 gilt hier
* nicht. Die Kante ist Pflicht, sonst 1,39:1 auf Grün (FE-36). */
.chip {
display: inline-flex;
align-items: center;
gap: var(--chip-gap);
min-block-size: var(--size-chip);
padding-block: var(--chip-padding-block);
padding-inline: var(--chip-padding-inline);
border: var(--border-hairline) solid
color-mix(in srgb, var(--zone-carrier-border) var(--border-alpha-soft), transparent);
border-radius: var(--radius-full);
font-size: var(--font-size-chip);
color: var(--zone-carrier-text);
background: var(--zone-carrier-bg);
}
.chip:has(> .icon:first-child) {
padding-inline-start: var(--chip-padding-inline-icon);
}
.chip--outline {
background: transparent;
color: var(--zone-text-strong);
}
/* Ein Chip als Filter: Der gewaehlte traegt `aria-current` und hebt sich ab —
durch Fettung UND kraeftigen Rand, nicht durch Farbe allein (FE-33). Ein
Chip, der irgendwohin fuehrt, ist nie unterstrichen; er sieht aus wie ein
Bedienelement, also verhaelt er sich auch so (FE-81). */
a.chip {
text-decoration: none;
}
.chip[aria-current] {
border-color: var(--zone-text-strong);
color: var(--zone-text-strong);
font-weight: 700;
}
.chip strong {
font-weight: 700;
}
/* --- Pill · Statuspille --------------------------------------------------- *
* Sechs Töne, je ein Paar Text/Fläche. Der Ton wird gesetzt, nicht die Farbe. */
/* Die Pille nimmt auch ein Icon auf — so entstehen die Vertrauens-Abzeichen
aus M3.2 („Zuverlässig", „Guter Gastgeber", „Erklärbär") ohne eigenes
Bauteil. Wichtig: Bei Personen nie Zahlen, nie Sterne (M3.3). */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-full);
font-size: var(--font-size-eyebrow);
font-weight: 700;
color: var(--pill-tx);
background: var(--pill-bg);
}
.pill--success {
--pill-tx: var(--pill-success-tx);
--pill-bg: var(--pill-success-bg);
}
.pill--warning {
--pill-tx: var(--pill-warning-tx);
--pill-bg: var(--pill-warning-bg);
}
.pill--danger {
--pill-tx: var(--pill-danger-tx);
--pill-bg: var(--pill-danger-bg);
}
.pill--neutral {
--pill-tx: var(--pill-neutral-tx);
--pill-bg: var(--pill-neutral-bg);
}
.pill--olive {
--pill-tx: var(--pill-olive-tx);
--pill-bg: var(--pill-olive-bg);
}
.pill--coral {
--pill-tx: var(--pill-coral-tx);
--pill-bg: var(--pill-coral-bg);
}
/* --- Panel · „Bereich" ---------------------------------------------------- *
* Trägt data-zone und bekommt Fläche + Textfarbe daher automatisch.
* Jedes Panel trägt denselben Haarlinien-Rand aus durchscheinendem Schwarz
* (--border-panel) — auf jedem Grund dieselbe leise Kante, und Polsterung
* und Maße bleiben in allen Zonen identisch. */
.panel {
--content-inset: var(--space-5);
padding: var(--content-inset);
/* Durchscheinendes Schwarz statt einer Farbe je Zone: dieselbe leise Kante
auf Weiß, Sand, Grün und Tinte. */
border: var(--border-hairline) solid var(--border-panel);
border-radius: var(--radius-panel);
/* Harter Versatz ohne Weichzeichner — die Farbe kommt aus der Zone. */
box-shadow: 0 var(--shadow-offset) 0 0 var(--zone-shadow);
}
.panel__title {
font-size: var(--font-size-title);
font-weight: 700;
}
.panel__subtitle {
color: var(--zone-text-subtle);
font-size: var(--font-size-small);
}
.panel__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.panel__actions {
margin-inline-start: auto;
display: flex;
gap: var(--space-2);
}
/* --- Card · „Karte" ------------------------------------------------------- *
* Die Fläche kommt aus der Zone (--zone-card-bg) und ist überall die hellste:
* weiß auf dem Panel, weiß auf dem sandfarbenen Grund, weiß auf den festen Zonen.
* Eine Karte trägt deshalb selbst nie data-zone — sonst läse sie ihren eigenen
* Ton statt den ihres Grundes und höbe sich nicht mehr ab. */
/* Eine Karte ist ein kleines Panel: dieselbe durchscheinende Kante, derselbe
harte Versatz aus der Zone — nur enger und mit kleinerem
Radius. */
.card {
--content-inset: var(--space-4);
padding: var(--content-inset);
border: var(--border-hairline) solid var(--border-panel);
border-radius: var(--radius-card);
background: var(--zone-card-bg);
color: var(--zone-carrier-text);
/* Derselbe Versatz wie unter einem Panel. Er war einmal halb so tief; das
traegt nicht mehr, seit Karten auch frei auf dem Grund stehen und nicht
nur IN einem Panel (Issue #18) — dort verlor die flachere Kante die
Karte gegen den Untergrund. */
box-shadow: 0 var(--shadow-offset) 0 0 var(--zone-shadow);
}
/* Eine Karte, die irgendwohin fuehrt, verhaelt sich wie ein Knopf: Beim
Ueberfahren zieht sie leicht hoch, und der harte Versatz wird zum weichen
Schatten — sie hebt sich von der Flaeche ab, statt auf ihr zu liegen.
Dieselben Werte wie beim Knopf, damit es eine Bewegung im Haus gibt und
nicht zwei.
`:focus-within` steht daneben, weil der Weg aus der Karte heraus ein Link
IN der Karte ist: Wer mit der Tastatur dorthin kommt, soll dieselbe
Rueckmeldung bekommen wie mit der Maus. */
.card--link {
transition:
transform var(--motion-fast) var(--motion-ease),
box-shadow var(--motion-fast) var(--motion-ease);
}
.card--link:hover,
.card--link:focus-within {
transform: translateY(calc(-1 * var(--lift-hover)));
box-shadow: 0 var(--shadow-offset-control-hover) var(--shadow-blur-control-hover) 0
var(--shadow-control);
}
/* Wer Bewegung abbestellt hat, bekommt den Schattenwechsel ohne den Sprung. */
@media (prefers-reduced-motion: reduce) {
.card--link:hover,
.card--link:focus-within {
transform: none;
}
}
/* --- Progress · „Fortschrittsbahn" ---------------------------------------- *
* Breite in PROZENT setzen, nie in Pixeln (Styleguide-Vorgabe). */
.progress {
--progress-fill: var(--zone-action-bg);
display: flex;
block-size: var(--size-progress);
border-radius: var(--radius-full);
background: var(--zone-track);
overflow: hidden;
}
.progress__value {
block-size: 100%;
border-radius: var(--radius-full);
background: var(--progress-fill);
}
/* Für Fortschritt, der ein Ziel ist — Punktestand, erfüllte Kriterien. */
.progress--success {
--progress-fill: var(--zone-text-success);
}
/* --- Sidebar · „Seitenmenü" ----------------------------------------------- */
.sidebar {
inline-size: var(--size-sidebar);
min-block-size: 100vh;
padding-block: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* --- Brand · „Marke" ------------------------------------------------------ */
.brand {
display: flex;
align-items: center;
gap: var(--space-3);
padding-inline-start: var(--space-edge-left);
font-size: var(--font-size-brand);
font-weight: 700;
}
.brand__mark {
inline-size: var(--size-brand-mark);
block-size: var(--size-brand-mark);
border-radius: var(--radius-sm);
background: var(--bg-accent);
flex: none;
}
/* --- Nav ------------------------------------------------------------------ *
* Aktiv = Indikator UND gefülltes Icon UND Fettung — nie Farbe allein (FE-33) */
.nav {
display: flex;
flex-direction: column;
}
.nav__item {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
min-block-size: var(--size-nav-item);
padding-inline-start: var(--space-edge-left);
color: var(--zone-text-strong);
text-decoration: none;
}
.nav__item:hover,
.nav__item[aria-current] {
font-weight: 700;
}
.nav__item[aria-current]::before {
content: "";
position: absolute;
inset-inline-start: 0;
inline-size: var(--border-indicator);
block-size: var(--size-indicator);
border-radius: 0 var(--radius-indicator) var(--radius-indicator) 0;
background: var(--zone-text-strong);
}
/* Unterpunkte sind flacher als die Hauptebene — 34 px wie im Styleguide. Damit
liegen sie unter der selbst gesetzten Zielgröße von 44 px (NFA-18), aber
deutlich über den 24 px, die WCAG 2.5.8 auf AA verlangt. Bewusste Abweichung,
ein Token zurückzunehmen. */
.nav__subitem {
display: flex;
align-items: center;
min-block-size: var(--size-nav-subitem);
/* Der Text steht auf der Linie des Elterntextes, nicht auf der seines Icons
(Issue #66): Kante + Icon + derselbe Zwischenraum, den der Haupteintrag
zwischen Icon und Text haelt. */
padding-inline-start: calc(
var(--space-edge-left) + var(--size-icon-nav) + var(--space-3)
);
font-size: var(--font-size-nav-sub);
color: var(--zone-text-quiet);
text-decoration: none;
}
.nav__subitem:hover,
.nav__subitem[aria-current] {
font-weight: 700;
color: var(--zone-text-strong);
}
.nav__divider {
block-size: var(--border-hairline);
margin: var(--space-3) var(--space-edge-left);
background: var(--zone-border);
border: 0;
}
/* Rang sichtbar, Punktzahl nicht (FA-3.25 / FE-43) */
.nav__user {
margin-block-start: auto;
display: flex;
align-items: center;
gap: var(--space-3);
padding-inline-start: var(--space-edge-left);
}
.nav__user-avatar {
inline-size: var(--size-avatar);
block-size: var(--size-avatar);
border-radius: var(--radius-full);
background: var(--bg-sunken);
flex: none;
}
.nav__user-name {
font-weight: 700;
font-size: var(--font-size-small);
}
.nav__user-rank {
font-size: var(--font-size-nav-sub);
color: var(--zone-text-quiet);
}
/* --- Cover · 1:1 ---------------------------------------------------------- *
* Spielcover, Gruppenbild, Ortsfoto. Immer quadratisch, damit die Liste nicht
* springt, wenn ein Bild fehlt oder nachlaedt (FE-58). */
.cover {
display: block;
overflow: hidden;
inline-size: var(--size-cover);
block-size: var(--size-cover);
border-radius: var(--radius-control);
background: var(--bg-sunken);
flex: none;
/* Als innerer Schatten, nicht als border: So liegt die Kante über dem Bild
und vergrößert das Element nicht. */
box-shadow: inset 0 0 0 var(--border-hairline) var(--border-on-media);
}
.cover img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: inherit;
}
.cover--sm {
--size-cover: var(--size-cover-sm);
}
/* --- Date badge · die Datumskachel in Listenzeilen ------------------------ */
.date-badge {
inline-size: var(--size-cover);
block-size: var(--size-cover);
border-radius: var(--radius-control);
background: var(--bg-sunken);
color: var(--zone-text-strong);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: none;
line-height: 1.1;
}
.date-badge__day {
font-size: var(--font-size-brand);
font-weight: 700;
}
.date-badge__month {
font-size: var(--font-size-eyebrow);
font-weight: 700;
text-transform: uppercase;
color: var(--zone-text-quiet);
}
/* Die Uhrzeit gehört immer dazu — wer den Tag liest, will die Stunde gleich
mit. Sie steht unter dem Monat in derselben leisen Farbe. */
.date-badge__time {
font-size: var(--font-size-eyebrow);
color: var(--zone-text-quiet);
}
/* --- Row · Listenzeile („Zeile · Abstimmung") ----------------------------- *
* Datumskachel oder Cover links, Text in der Mitte, Status und Pfeil rechts.
* Als oder verwendbar — die Zeile schreibt kein Element vor. */
.row {
display: flex;
align-items: center;
gap: var(--space-4);
min-block-size: var(--size-target-min);
padding-block: var(--space-3);
color: var(--zone-text-strong);
text-decoration: none;
}
.row + .row {
border-block-start: var(--border-hairline) solid var(--zone-border);
}
.row__body {
min-inline-size: 0; /* damit lange Titel umbrechen statt zu überlaufen */
flex: 1;
}
.row__title {
font-weight: 700;
}
/* Die Meta-Zeile nimmt Pillen mit auf: Status, Datum, Entfernung in einer
Zeile. Deshalb flex statt Fließtext. */
.row__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-small);
color: var(--zone-text-quiet);
}
.row__meta strong {
color: var(--zone-text-strong);
}
.row__end {
display: flex;
align-items: center;
gap: var(--space-3);
flex: none;
}
/* --- Media card · Karte mit Bild, Text und Status ------------------------- *
* Im Styleguide „Karte · Spielrunde in der Nähe". Der Name bleibt hier domänenfrei
* (K-4): die generische Schicht kennt keine Spielrunden. */
.media-card {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-card);
background: var(--bg-region);
color: var(--zone-text-strong);
text-decoration: none;
}
.media-card__body {
min-inline-size: 0;
flex: 1;
}
.media-card__title {
font-weight: 700;
}
.media-card__meta {
font-size: var(--font-size-small);
color: var(--zone-text-quiet);
}
/* --- Header · Kopfzeile --------------------------------------------------- */
.header {
display: flex;
/* Eng bricht die Zeile um: Am Handy stehen die Aktionen sonst rechts aus dem
Bild und sind nicht mehr zu erreichen (Issue #14). */
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-4);
}
.header__title {
font-size: var(--font-size-title);
font-weight: 700;
flex: none;
}
.header__search {
max-inline-size: var(--size-search-max);
flex: 1;
}
.header__actions {
display: flex;
/* Ganz an den rechten Rand, nicht neben den Titel (Issue #66): Ein Knopf
dicht am h1 liest sich wie ein Teil der Ueberschrift. */
margin-inline-start: auto;
/* Ohne `flex: none` gibt die Gruppe nach, sobald die Zeile nicht reicht, und
bricht dann in sich um — sonst stuende der letzte Knopf am Handy rechts
aus dem Bild (Issue #14). */
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
/* Ein Flex-Kind gibt von sich aus nicht unter seinen Inhalt nach: Ohne
diese Zeile schiebt eine lange Aktion (etwa der Name einer gemerkten
Suche) die ganze Reihe ueber den Rand der Spalte. */
min-inline-size: 0;
}
/* Icon-Knopf mit Meldepunkt. Der Punkt allein sagt nichts — die Zahl gehört
als Textalternative dazu (FE-24, WCAG 1.4.1). */
.icon-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--size-target-min);
block-size: var(--size-target-min);
border: 0;
border-radius: var(--radius-full);
background: none;
color: var(--zone-text-strong);
text-decoration: none; /* FE-81 — auch als */
cursor: pointer;
}
.icon-button__dot {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-end: var(--space-2);
inline-size: var(--size-dot);
block-size: var(--size-dot);
border-radius: var(--radius-full);
background: var(--text-error);
}
/* --- Spinner -------------------------------------------------------------- *
* Vorläufig / außerhalb Kern-Inventar. Ein Ring aus der Zonenfarbe, dessen offener Teil den
* Rand durchscheinen lässt.
*
* Er wird NICHT abgeschaltet, wenn jemand Bewegung abbestellt hat — eine
* stehende Ladeanzeige sieht aus wie ein Fehler. Stattdessen dreht er sich
* deutlich langsamer, und die Ansage übernimmt ohnehin role="status".
*
*
* Lädt …
*
*/
.spinner {
display: inline-block;
inline-size: var(--size-spinner);
block-size: var(--size-spinner);
border: var(--border-spinner) solid var(--zone-border);
border-block-start-color: var(--zone-text-strong);
border-radius: var(--radius-full);
animation: spinner-turn var(--motion-spinner) linear infinite;
}
.spinner--lg {
--size-spinner: 32px;
--border-spinner: 3px;
}
@keyframes spinner-turn {
to {
transform: rotate(1turn);
}
}
@media (prefers-reduced-motion: reduce) {
.spinner {
animation-duration: calc(var(--motion-spinner) * 6);
}
}
/* --- Wartender Knopf -------------------------------------------------------- *
* Eine laufende Anfrage: in Ruhe die Sanduhr, beim Überfahren oder per
* Tastatur das X — der Klick zieht die Anfrage zurück. Kein disabled: Der
* Knopf tut etwas, und der Hinweis bleibt erreichbar (FE-25a). */
.button--waiting > .icon--cancel,
.button--waiting:hover > .icon--hourglass,
.button--waiting:focus-visible > .icon--hourglass {
display: none;
}
.button--waiting:hover > .icon--cancel,
.button--waiting:focus-visible > .icon--cancel {
display: inline-block;
}
.button--waiting:hover,
.button--waiting:focus-visible {
color: var(--zone-text-danger);
}
/* --- Sanduhr ---------------------------------------------------------------- *
* Ein Icon, das sich alle 1,4 s halb dreht — wie eine Sanduhr, die jemand
* umdreht. Für Knöpfe, die auf eine Antwort warten. Anders als der Spinner
* steht sie still, wenn Bewegung abbestellt ist: Der Zustand steht ohnehin
* im Text daneben, die Sanduhr selbst sagt schon „warten". */
.icon--hourglass {
animation: hourglass-turn calc(var(--motion-spinner) * 4) ease-in-out infinite;
}
@keyframes hourglass-turn {
0%,
40% {
rotate: 0deg;
}
50%,
90% {
rotate: 180deg;
}
100% {
rotate: 360deg;
}
}
@media (prefers-reduced-motion: reduce) {
.icon--hourglass {
animation: none;
}
}
/* --- Avatar --------------------------------------------------------------- *
* Kreis mit Kürzel oder Bild. Vorläufig / außerhalb Kern-Inventar — die Maße stammen aus der
* Nutzerzeile der Seitenleiste.
*/
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--size-avatar);
block-size: var(--size-avatar);
border-radius: var(--radius-full);
/* Nicht der weisse Traeger: Ein Avatar mit Initialen stuende sonst weiss
auf weiss. Die Bahn ist in jeder Zone vom Grund unterscheidbar. */
background: var(--zone-track);
color: var(--zone-text-strong);
font-size: var(--font-size-nav-sub);
font-weight: 700;
flex: none;
object-fit: cover;
}
.avatar--sm {
--size-avatar: var(--size-avatar-sm);
font-size: var(--font-size-avatar-sm);
}
/* Übereinandergereihte Avatare. Der Ring in der Zonenfläche trennt sie
voneinander, ohne eine zusätzliche Farbe zu brauchen. */
.avatar-stack {
display: flex;
align-items: center;
}
.avatar-stack > .avatar {
margin-inline-start: calc(-1 * var(--avatar-overlap));
box-shadow: 0 0 0 var(--border-spinner) var(--zone-surface);
}
.avatar-stack > .avatar:first-child {
margin-inline-start: 0;
}
/* --- Tooltip -------------------------------------------------------------- *
* Vorläufig / außerhalb Kern-Inventar. Eine schwebende Fläche mit weichem
* Schatten und kleinem Zeiger.
*
* Kurzer Hinweis beim Überfahren — Tinte:
*
*
* …
* …
*
*
* Viele Infos (Spiel, Person) — hell, nur auf Klick, als :
*
*
* …
*
* …
*
*
*
* Warum so:
* - :focus-within statt nur :hover — sonst kommt niemand per Tastatur heran.
* - aria-describedby — sonst existiert der Inhalt für Screenreader nicht.
* - Kein Abstand zwischen Wirt und Tooltip, den die Maus überqueren muesste:
* Der Zwischenraum gehoert zum Wirt (WCAG 1.4.13 „hoverable").
* - Klick-Variante: natives , ohne JavaScript, schliesst mit einem
* zweiten Klick. Dieselbe name-Gruppe hält nur eines offen. Bewegung und
* Einblendung sind dieselben wie beim kurzen Hinweis, in beide Richtungen.
*
* Was hier NICHT geht und Christoph ergänzen muss: Schliessen per Esc
* (WCAG 1.4.13 „dismissible") braucht JavaScript — für die Klick-Variante
* erledigt das apps/web (TipDismiss: Esc, Klick daneben, Fokus weiter). Und
* der Tooltip darf nicht in einem Element mit overflow: hidden|auto stehen —
* in .table-wrap etwa würde er abgeschnitten.
*/
.tooltip-host {
position: relative;
display: inline-flex;
}
.tooltip {
position: absolute;
inset-block-end: 100%;
inset-inline-start: 50%;
z-index: var(--layer-tooltip);
padding-block-end: var(--space-2); /* Brücke für die Maus, kein Loch */
inline-size: max-content;
max-inline-size: var(--size-tooltip-max);
visibility: hidden;
opacity: 0;
/* Dieselbe Bewegung wie beim Knopf: Er hebt sich beim Überfahren um
--lift-hover, der Tooltip kommt aus derselben Tiefe herauf. Der erste
Wert hält dabei die waagerechte Zentrierung. */
translate: -50% var(--lift-hover);
transition:
opacity var(--motion-fast) var(--motion-ease),
translate var(--motion-fast) var(--motion-ease),
visibility var(--motion-fast) var(--motion-ease);
}
.tooltip--lg {
max-inline-size: var(--size-tooltip-max-lg);
}
/* Die Fläche holt sich Farbe und Textton aus ihrer Zone. Kurze Hinweise
tragen data-zone="ink", Flächen mit vielen Infos data-zone="surface" —
hell mit Schatten, nicht die Primärfarbe. */
.tooltip__body {
position: relative;
display: block; /* ist im Markup ein — ohne das läuft die Fläche aus */
padding: var(--space-3);
border: var(--border-hairline) solid var(--zone-border);
border-radius: var(--radius-control);
background: var(--zone-surface);
font-size: var(--font-size-chip);
font-weight: 400;
text-align: start;
box-shadow: 0 var(--shadow-offset-float) var(--shadow-blur-float) 0
var(--shadow-control);
}
/* Der helle Hinweis schwebt über einer Karte — und die ist die hellste Fläche.
Er nimmt deshalb die Trägerfläche, die in jeder Zone weiß ist, statt der
Zonenfläche: Was oben liegt, darf nicht dunkler sein als sein Untergrund.
Dialog und Dropdown machen es genauso; der dunkle Hinweis auf Tinte behält
seine Zonenfläche.
Und er trägt auch sonst das Dropdown-Design (Issue #36): Eine schwebende
Fläche hebt sich durch ihren Schatten ab, nicht zusätzlich durch einen
Strich — mit beidem stand der helle Hinweis als einziges Menü der
Anwendung in einem Kasten. Der dunkle Hinweis behält seinen Rahmen: Auf
Tinte trägt er ihn in der eigenen Farbe, dort ist er keine Kante. */
.tooltip__body[data-zone="surface"],
.tooltip__body[data-zone="surface"]::after {
background: var(--zone-carrier-bg);
}
.tooltip__body[data-zone="surface"] {
border: 0;
}
/* Der Zeiger ist ein gedrehtes Quadrat am unteren Rand der Fläche. */
.tooltip__body::after {
content: "";
position: absolute;
inset-block-end: var(--space-1);
inset-inline-start: 50%;
inline-size: var(--space-3);
block-size: var(--space-3);
background: var(--zone-surface);
rotate: 45deg;
translate: -50% 0;
}
.tooltip__title {
display: block;
font-weight: 700;
margin-block-end: var(--space-2);
}
.tooltip-host:hover > .tooltip,
.tooltip-host:focus-within > .tooltip,
.tooltip-host--click[open] > .tooltip {
visibility: visible;
opacity: 1;
translate: -50% 0;
}
/* Klick-Variante: nicht beim Überfahren, nur wenn das details offen ist. */
.tooltip-host--click:not([open]):hover > .tooltip,
.tooltip-host--click:not([open]):focus-within > .tooltip {
visibility: hidden;
opacity: 0;
translate: -50% var(--lift-hover);
}
/* Am Rand: Die Fläche hängt an der Start- oder Endkante des Wirts und
wächst nach innen, statt mittig aus dem Fenster zu ragen. Der Zeiger
rückt mit und bleibt unter der Mitte eines Knopfs in Zielgrösse.
Grundstellung ist immer mittig; die Seite wählt apps/web per Skript
(TipPlacement), sobald die Mitte über den Fensterrand hinausragte. */
.tooltip--start,
.tooltip--end {
translate: 0 var(--lift-hover);
}
.tooltip--start {
inset-inline: 0 auto;
}
.tooltip--end {
inset-inline: auto 0;
}
.tooltip-host:hover > :is(.tooltip--start, .tooltip--end),
.tooltip-host:focus-within > :is(.tooltip--start, .tooltip--end),
.tooltip-host--click[open] > :is(.tooltip--start, .tooltip--end) {
translate: 0 0;
}
.tooltip--start .tooltip__body::after {
inset-inline: calc(var(--size-target-min) / 2) auto;
translate: -50% 0;
}
.tooltip--end .tooltip__body::after {
inset-inline: auto calc(var(--size-target-min) / 2);
translate: 50% 0;
}
.tooltip-host--click[open] {
z-index: var(--layer-open);
}
/* Ein geschlossenes rendert seinen Inhalt nicht — die Transition
hätte keinen Ausgangspunkt, die Fläche spränge auf und verschwände
schlagartig. So bleibt sie gerendert und ist wie beim kurzen Hinweis nur
über visibility verborgen, auch für Tab und Screenreader. Browser ohne
::details-content verwerfen die Regel und zeigen sie ohne Bewegung. */
.tooltip-host--click::details-content {
content-visibility: visible;
}
/* Fragezeichen statt Hand: Der Klick öffnet Infos, keine Aktion. */
.tooltip-host--click > summary {
list-style: none;
cursor: help;
}
.tooltip-host--click > summary::marker,
.tooltip-host--click > summary::-webkit-details-marker {
display: none;
}
.tooltip__facts,
.tooltip__links {
display: grid;
gap: var(--space-1);
}
.tooltip__text {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
/* Ohne Bewegung erscheint er an Ort und Stelle — sonst bliebe ein Sprung
statt einer Bewegung übrig. */
@media (prefers-reduced-motion: reduce) {
.tooltip {
translate: -50% 0;
transition: none;
}
.tooltip--start,
.tooltip--end {
translate: 0 0;
}
}
/* --- Answer · Ja / Wenn nötig / Nein --------------------------------------- *
* Das Kernbedienelement der Terminfindung (FA-5.2). Native Radios, nur anders
* gezeichnet — damit bleiben Tastatur, Screenreader und Pfeiltasten erhalten.
*
*
*
* Der gewählte Zustand zeigt sich in Fläche UND Icon UND Fettung — nie in der
* Farbe allein (FE-33).
*/
.answer {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: 0;
border: 0;
}
/* Kein flex: 1 — die Optionen sind so breit wie ihr Text. Gleich breite
Spalten zwaengen „Wenn noetig" in zwei Zeilen. */
.answer__option {
display: flex;
align-items: center;
white-space: nowrap;
justify-content: center;
gap: var(--space-2);
min-block-size: var(--size-button);
padding-inline: var(--space-3);
border: var(--border-hairline) solid var(--zone-border-interactive);
border-radius: var(--radius-button);
color: var(--zone-text-strong);
font-size: var(--font-size-small);
font-weight: 700;
cursor: pointer;
}
/* Gewaehlt wird nicht ueber Farbe allein erkennbar (FE-33): Die Option wechselt
von Kontur auf Flaeche — eine Form-, keine Farbunterscheidung. Der Ton kommt
zusaetzlich dazu und macht die Zusage auf einen Blick lesbar. */
.answer__option:has(:checked) {
background: var(--answer-fill, var(--zone-action-bg));
color: var(--answer-text, var(--zone-action-text));
border-color: transparent;
}
.answer__option--positive {
--answer-fill: var(--zone-success-bg);
--answer-text: var(--zone-success-text);
}
.answer__option--caution {
--answer-fill: var(--zone-warning-bg);
--answer-text: var(--zone-warning-text);
}
.answer__option--negative {
--answer-fill: var(--zone-danger-bg);
--answer-text: var(--zone-danger-text);
}
.answer__option:has(:focus-visible) {
outline: var(--border-focus) solid var(--zone-focus);
outline-offset: var(--space-0-5);
}
/* --- Banner · Hinweis, Erfolg, Warnung, Gefahr ----------------------------- *
* Für Aussagen, die zum Inhalt gehören und bleiben — anders als ein Toast,
* der vorbeizieht. Etwa FA-4.2d („Adresse verschwindet 24 h nach dem Termin")
* oder FA-9.15 (Warnhinweis beim Erstkontakt).
*
* Die Kante links trägt die Aussage mit: Der Ton ist auch ohne Farbe am Icon
* und am Text erkennbar (WCAG 1.4.1).
*/
/* Das Icon sitzt auf der Mitte der ERSTEN Zeile, nicht an der Oberkante des
Kastens: (Zeilenhoehe minus Icon) / 2. Die lh-Einheit rechnet das selbst,
auch wenn sich Schriftgroesse oder Zeilenhoehe aendern. */
.banner > .icon {
block-size: 1lh;
}
.banner {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
/* Platz fuer den Balken — der Text steht genauso weit innen wie vorher. */
padding-inline-start: calc(var(--space-4) + var(--border-indicator));
border-radius: var(--radius-control);
background: var(--banner-bg);
color: var(--banner-tx);
font-size: var(--font-size-small);
}
/* Die Kante links ist ein gerader Balken ueber die ganze Hoehe, kein Rand:
Ein Rand folgt dem Radius und rundet sich an den Ecken weg (Issue #69).
Dieselbe Marke wie am Modultitel — aussen gerade, innen rund —, nur hoch. */
.banner::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: var(--border-indicator);
border-radius: 0 var(--radius-indicator) var(--radius-indicator) 0;
background: currentcolor;
}
.banner--info {
--banner-tx: var(--pill-neutral-tx);
--banner-bg: var(--pill-neutral-bg);
}
.banner--success {
--banner-tx: var(--pill-success-tx);
--banner-bg: var(--pill-success-bg);
}
.banner--warning {
--banner-tx: var(--pill-warning-tx);
--banner-bg: var(--pill-warning-bg);
}
.banner--danger {
--banner-tx: var(--pill-danger-tx);
--banner-bg: var(--pill-danger-bg);
}
.banner__title {
display: block;
font-weight: 700;
}
/* --- Empty · Leerzustand -------------------------------------------------- *
* § 10.2 verlangt ihn für jeden Screen. Er ist kein Fehler, sondern eine
* Einladung: Er sagt, was hier stehen wird, und bietet den nächsten Schritt an.
*/
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-4);
text-align: center;
color: var(--zone-text-quiet);
}
.empty > .icon {
--size-icon: var(--size-cover);
color: var(--icon-tone, var(--zone-border-interactive));
}
.empty__title {
font-size: var(--font-size-body);
font-weight: 700;
color: var(--zone-text-strong);
}
.empty__text {
max-inline-size: 44ch;
}
/* --- Steps · Assistent ---------------------------------------------------- *
* „Spielrunde erstellen" läuft über vier Schritte (Wireframe E). Als mit
* aria-current="step" — die Reihenfolge ist Inhalt, nicht Dekoration.
*/
.steps {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
padding: 0;
margin: 0;
list-style: none;
}
.steps__item {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--zone-text-quiet);
font-size: var(--font-size-small);
}
.steps__marker {
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--size-step-marker);
block-size: var(--size-step-marker);
border: var(--border-hairline) solid var(--zone-border-interactive);
border-radius: var(--radius-full);
font-weight: 700;
flex: none;
}
/* Erledigt und aktuell unterscheiden sich in Fläche, Icon und Fettung. */
.steps__item[data-state="done"] {
color: var(--zone-text-strong);
}
/* Erledigt ist ein positives Signal — grün, nicht tintenfarben. Die Fläche und
das Häkchen tragen den Zustand weiterhin allein, die Farbe kommt dazu. */
.steps__item[data-state="done"] .steps__marker {
background: var(--zone-success-bg);
color: var(--zone-success-text);
border-color: transparent;
}
.steps__item[aria-current="step"] {
color: var(--zone-text-strong);
font-weight: 700;
}
.steps__item[aria-current="step"] .steps__marker {
border-color: var(--zone-text-strong);
border-width: var(--border-spinner);
}
/* --- Stat · Kennzahl ------------------------------------------------------ *
* „Brettabend in Zahlen" (FA-6.9, Wireframe G). Nur Summen — nie Namen, nie
* Orte, keine Region unter fünf Spielrunden (FA-6.12).
*/
.stat__value {
display: block;
font-size: var(--font-size-stat);
font-weight: 700;
line-height: 1.1;
color: var(--zone-text-strong);
}
.stat__label {
display: block;
margin-block-start: var(--space-2);
font-size: var(--font-size-small);
color: var(--zone-text-quiet);
}
/* --- Tabbar · mobile Navigation ------------------------------------------- *
* Pflichtenheft § 10.5: 75 × 60 px je Eintrag. Beschriftung immer sichtbar,
* nie nur ein Icon (FE-34). Aktiv = gefülltes Icon UND Fettung UND Fläche.
*/
.tabbar {
display: flex;
justify-content: space-around;
padding-block: var(--space-1);
background: var(--zone-surface);
border-block-start: var(--border-hairline) solid var(--zone-border);
}
/* `flex: 0 1` statt fester Breite: Fuenf Eintraege zu 75 px sind 375 px, und
es gibt Geraete mit 360 px. Dann ruecken sie zusammen, statt hinauszulaufen
— die Zielgroesse aus NFA-18 bleibt dabei erhalten. */
.tabbar__item {
display: flex;
flex: 0 1 var(--size-tabbar-item);
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-inline-size: 0;
inline-size: var(--size-tabbar-item);
block-size: var(--size-tabbar);
border-radius: var(--radius-control);
color: var(--zone-text-quiet);
font-size: var(--font-size-eyebrow);
text-decoration: none;
cursor: pointer;
list-style: none; /* auch als ohne Dreieck */
}
.tabbar__item::-webkit-details-marker {
display: none;
}
.tabbar__label {
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tabbar__item > .icon {
--size-icon: var(--size-icon-nav);
}
.tabbar__item[aria-current] {
background: var(--bg-sunken);
color: var(--zone-text-strong);
font-weight: 700;
}
/* --- List · Aufzählungen --------------------------------------------------- *
* Punkte und Zahlen bleiben native Listenmarken (::marker) — damit sagt ein
* Screenreader „Liste mit drei Einträgen" an. Nachgebaute Punkte tun das nicht.
*/
.list {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-inline-start: var(--space-5);
margin: 0;
}
.list li::marker {
color: var(--zone-text-quiet);
}
.list--bullet {
list-style: disc;
}
.list--number {
list-style: decimal;
}
/* Mit Icon statt Marke: Die Marke entfällt, das Icon steht im Markup — nur so
kann es je Eintrag ein anderes sein. */
.list--icon {
padding-inline-start: 0;
list-style: none;
}
.list--icon > li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
/* Der Icon-Kasten ist genau eine Zeile hoch; das SVG zentriert sich darin von
selbst (preserveAspectRatio). Das sitzt auch dann richtig, wenn die Zeile
umbricht — anders als ein geschaetzter Abstand von oben. */
.list--icon > li > .icon {
block-size: 1lh;
color: var(--icon-tone, var(--zone-text-strong));
}
/* --- Data list · Angabe und Wert ------------------------------------------ *
* Für Details der Spielrunde: Ort, Zeit, Kapazität, Sprache, Mindestalter (FA-4.1).
* Als — die Zuordnung von Angabe zu Wert ist Inhalt, kein Layout.
*/
.data-list {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
margin: 0;
}
/* Die Angabe kann ein Icon tragen — es steht im Markup, weil es je Zeile ein
anderes ist. Gleiche Behandlung wie in der Icon-Liste. */
.data-list dt {
display: flex;
align-items: flex-start;
gap: var(--space-2);
color: var(--zone-text-quiet);
}
.data-list dt > .icon {
block-size: 1lh;
color: var(--icon-tone, var(--zone-text-strong));
}
.data-list dd {
margin: 0;
font-weight: 700;
color: var(--zone-text-strong);
}
/* --- Accordion ------------------------------------------------------------ *
* Als /. Damit sind Tastatur, Screenreader und der Zustand
* „auf/zu" ohne eine Zeile JavaScript richtig.
*
* Mit gleichem name-Attribut schliessen sich die Einträge gegenseitig aus —
* ein Akkordeon im Wortsinn, seit 2024 ohne JavaScript möglich.
*/
.accordion {
border-block-end: var(--border-hairline) solid var(--zone-border);
}
.accordion > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-block-size: var(--size-target-min);
padding-block: var(--space-2);
font-weight: 700;
color: var(--zone-text-strong);
cursor: pointer;
list-style: none;
}
.accordion > summary::-webkit-details-marker {
display: none;
}
.accordion > summary > .icon {
color: var(--zone-text-quiet);
transition: rotate var(--motion-fast) var(--motion-ease);
flex: none;
}
.accordion[open] > summary > .icon {
rotate: 180deg;
}
.accordion__body {
padding-block-end: var(--space-3);
color: var(--zone-text-quiet);
}
@media (prefers-reduced-motion: reduce) {
.accordion > summary > .icon {
transition: none;
}
}
/* --- Tabs ----------------------------------------------------------------- *
* Karte/Liste (Wireframe C), Chart-Schnitte (FA-1.18).
*
* Darunter liegen Radios, keine role="tab"-Konstruktion: Eine echte Tabliste
* verlangt Pfeiltastensteuerung und damit JavaScript. Eine Radiogruppe ist
* ohne JavaScript vollständig bedienbar und für Screenreader korrekt — sie
* heisst dann eben „Auswahl" statt „Registerkarte". Das ist der ehrlichere
* Kompromiss als eine Tabliste, die nur so aussieht.
*/
.tabs {
display: flex;
gap: var(--space-1);
padding: var(--space-1);
border: 0;
border-radius: var(--radius-button);
background: var(--bg-sunken);
}
.tabs__tab {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: var(--size-button);
padding-inline: var(--space-4);
border-radius: var(--radius-control);
color: var(--zone-text-quiet);
font-size: var(--font-size-small);
cursor: pointer;
}
.tabs__tab:has(:checked) {
background: var(--zone-carrier-bg);
color: var(--zone-carrier-text);
font-weight: 700;
box-shadow: 0 var(--border-hairline) 0 0 var(--zone-border);
}
.tabs__tab:has(:focus-visible) {
outline: var(--border-focus) solid var(--zone-focus);
outline-offset: var(--space-0-5);
}
/* --- Filterleiste --------------------------------------------------------- *
* Die Felder sind zugeklappt, bis jemand sie aufmacht (Issue #26), und sie
* klappen auf und zu, statt zu springen. Zu steht hier, WAS eingestellt ist —
* der Name der gemerkten Suche oder eine kurze Aufzaehlung — und ist nichts
* eingestellt, steht dort nichts. Der Knopf, das Speichersymbol und die
* gemerkten Suchen stehen zusammen in der Kopfzeile (.button-group). */
/* `display: contents` statt eines eigenen Kastens: Die Leiste ist eine
Klammer um drei Teile, keine Flaeche. Als Kasten stuende sie auch dann im
Abschnitt, wenn sie nichts zeigt — null Pixel hoch, aber mit dem Abstand
des Stapels davor und dahinter. Ihre Teile ordnen sich jetzt direkt im
Abschnitt ein und tragen dessen Abstand. */
.filter-bar {
display: contents;
}
.filter-bar__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
/* Was gerade gilt: je Wert ein Badge, nicht eine Aufzaehlung mit Punkten.
Steht nur, wenn die Felder zu sind. */
.filter-bar__state {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
}
/* Traegt die Zeile nichts, nimmt sie auch keinen Platz: Ein leerer Kasten
zoege sonst den Abstand der Leiste mit und schoebe die Liste nach unten. */
.filter-bar__head:empty {
display: none;
}
/* Der Name der geladenen Suche am Knopf: Gekuerzt wird in Zeichen (siehe
SEARCH_ALERT_LABEL_MAX), hier bleibt nur zu verhindern, dass er umbricht —
ein Knopf mit zwei Zeilen waere kein Knopf mehr. */
.search-alerts__label {
white-space: nowrap;
/* Gekuerzt wird in Zeichen (SEARCH_ALERT_LABEL_MAX). Wird der Platz noch
enger — am Handy neben „Filter" —, gibt das Etikett weiter nach, statt
den Knopf ueber den Rand zu schieben. */
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Eine Zeile im Menue der gemerkten Suchen: der Weg zurueck und das Kreuz,
das sie vergisst. Der Eintrag nimmt den Platz, das Kreuz nur sich selbst. */
.search-alerts__row {
display: flex;
align-items: center;
gap: var(--space-1);
}
.search-alerts__row > .dropdown__item {
flex: 1;
min-inline-size: 0;
}
/* Die Felder klappen auf und zu, statt zu springen. Sie bleiben dafuer IMMER
im Baum: Waeren sie zugeklappt weg, gaebe es nichts zu bewegen. Die Strecke
faehrt `grid-template-rows` von 0fr auf 1fr — die einzige Art, eine
unbekannte Hoehe ohne Skript und ohne feste Zahl zu bewegen.
Am Ende des Zuklappens faellt das Feld auf `display: none` (eine Stufe,
`allow-discrete`, deshalb `step-end` hin und `step-start` zurueck). Sonst
bliebe eine Flaeche von null Hoehe im Fluss stehen — und der Abstand der
Liste zaehlte sie mit: ein Streifen Luft ohne Inhalt. */
.filter-bar__panel {
display: none;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows var(--motion-panel) var(--motion-ease),
opacity var(--motion-panel) var(--motion-ease),
display var(--motion-panel) step-end allow-discrete;
}
.filter-bar__panel[data-open="true"] {
display: grid;
grid-template-rows: 1fr;
opacity: 1;
transition:
grid-template-rows var(--motion-panel) var(--motion-ease),
opacity var(--motion-panel) var(--motion-ease),
display var(--motion-panel) step-start allow-discrete;
}
/* Beim Aufklappen faengt die Strecke bei null an — ohne diesen Anfangswert
waere das Feld beim ersten Bild schon offen (es kam aus `display: none`). */
@starting-style {
.filter-bar__panel[data-open="true"] {
grid-template-rows: 0fr;
opacity: 0;
}
}
/* Das Kind muss schrumpfen duerfen — sonst haelt seine Mindesthoehe die Zeile
auf und es klappt nichts zu.
Zugeklappt schneidet es ab, offen laesst es ueberlaufen: Sonst liegen die
Menues der Felder (Umkreis, Zeitraum, Spiel) hinter dem Rand. Der Wechsel
ist eine Stufe, kein Verlauf — und er faellt in jede Richtung anders:
beim Aufklappen ans Ende (`step-end`, vorher wuerde der Inhalt ueber den
wachsenden Rand haengen), beim Zuklappen an den Anfang (`step-start`).
Die Zeitfunktion kommt dabei immer aus der ZIEL-Regel. */
.filter-bar__fields {
min-block-size: 0;
overflow: hidden;
transition: overflow var(--motion-panel) step-start allow-discrete;
}
.filter-bar__panel[data-open="true"] > .filter-bar__fields {
overflow: visible;
transition: overflow var(--motion-panel) step-end allow-discrete;
}
/* Das Namensfeld im Fenster „Diese Suche merken": Beschriftung ueber dem
Feld, das Feld ueber die ganze Breite — ein Name ist keine Zahl. */
.search-alerts__form {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.search-alerts__form > .input {
inline-size: 100%;
}
/* Ein leiser Satz statt einer Liste: im Fenster, wenn das Hoechstmass
erreicht ist; im Menue, wenn noch nichts gemerkt wurde. */
.search-alerts__hint {
margin: 0;
color: var(--zone-text-quiet);
}
/* Im Menue traegt er dessen Rand — sonst klebt er an der Kante. */
.dropdown__menu > .search-alerts__hint {
padding-inline: var(--space-3);
padding-block: var(--space-2);
max-inline-size: var(--size-dropdown-min);
font-size: var(--font-size-small);
}
@media (prefers-reduced-motion: reduce) {
.filter-bar__panel,
.filter-bar__panel[data-open="true"],
.filter-bar__fields,
.filter-bar__panel[data-open="true"] > .filter-bar__fields {
transition: none;
}
}
/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: 0;
margin: 0;
list-style: none;
font-size: var(--font-size-small);
color: var(--zone-text-quiet);
}
/* Die Trennzeichen und ein etwaiges Icon stehen im Markup; der Abstand kommt
aus dem gap oben — eine eigene Regel auf .icon liefe sonst der Spezifität
des Akkordeons hinterher (K-24). */
.breadcrumb a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: inherit;
}
.breadcrumb [aria-current] {
color: var(--zone-text-strong);
font-weight: 700;
}
/* --- Pagination ----------------------------------------------------------- *
* NFA-13: Seiten sind verlinkbar und serverseitig gerendert — sonst ist der
* Inhalt ab Seite 2 nicht indexierbar.
*/
/* Statt Seitenzahlen: ein Knopf, der den nächsten Stapel holt (Issue #67).
Steht wie die Seitenzahlen mittig unter der Liste — wer am Ende ankommt,
findet ihn dort, wo vorher geblaettert wurde. */
.listing-more {
display: flex;
justify-content: center;
margin: 0;
}
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center; /* mittig unter der Liste, die sie blättert */
gap: var(--space-1);
padding: 0;
margin: 0;
list-style: none;
}
/* Nur die direkten Kinder eines Eintrags — ein Tooltip im Eintrag (der
Pfeil trägt seine Beschriftung so) darf kein Kästchen werden. Der Wirt
des Tooltips ist das li selbst, kein zusätzlicher Wrapper. */
.pagination > li > a,
.pagination > li > span:not(.tooltip) {
display: flex;
align-items: center;
justify-content: center;
min-inline-size: var(--size-page-item);
min-block-size: var(--size-page-item);
padding-inline: var(--space-2);
border-radius: var(--radius-control);
color: var(--zone-text-strong);
text-decoration: none;
}
/* Die aktuelle Seite ist bereits gefuellt — ein Hover-Grund darauf wuerde den
hellen Text auf hellen Grund setzen. */
.pagination a:not([aria-current]):hover {
background: var(--bg-sunken);
}
.pagination [aria-current] {
background: var(--zone-action-bg);
color: var(--zone-action-text);
font-weight: 700;
}
/* --- Dialog --------------------------------------------------------------- *
* Das native