/* basis.css · TMAI Mailassist · gemeinsame Bausteine für Einrichtung, Cockpit und Verwaltung (GL-01, 22.10.2026)
 *
 * Diese Datei besitzt KEINE Werte mehr. Farben, Schrift, Radien, Bewegung und Raum stehen in `marke.css` (Design B
 * „Morgenlicht“). Hier stehen (1) Übergangs-Aliase von den alten Rollennamen (--canvas, --ink, --action …) auf --marke-*,
 * zum Abbau in GL-04 (Kunde), GL-06 (Verwaltung) und GL-08 (Einrichtung), (2) fluide Größen und Maße, (3) die Bausteine,
 * die es in styles.css, kunde.css und verwaltung.css nicht gibt. Bestehende Klassen (button, tafel, meldung, feld, bahn)
 * werden hier nicht zweitgefasst; die einzige Ausnahme ist der Fokusring (eine Regel über alles).
 *
 * Regeln für jeden Baustein: keine farbige Seitenkante als Zustandsträger; höchstens EINE sichtbare Schaltfläche je
 * Listenzeile, alles Weitere im Mehr-Menü; jede Farbaussage trägt ein Wort; ruhende Flächen stehen auf --hoehe-0.
 * Bewegung steht nur in den Abfragen `prefers-reduced-motion` (hinzugefügt, nie weggeschaltet), Dauern aus den Tokens.
 * Kein Hex, keine Farbe außer über Tokens, keine Serif, kein Dunkelmodus (Probe `_qa/gl/token-drift.mjs`).
 */
@import url("/marke.css");
@import url("/kaestchen.css");

/* NB1 (Scrollregel, Timon 30.09.): der Browser darf die Seite nicht von sich aus nachführen. Mit der Webschrift hielt sich
   WebKit nach „Ich antworte selbst“ an einem anderen Block fest und rollte um 103 px (172 → 275). Ohne Verankerung bleibt
   `scrollY` stehen; wo der Inhalt darüber wächst oder schrumpft, setzen scroll-halten.js und dialog-muster.js die Stelle selbst. */
html { overflow-anchor: none; }

:root {
  /* === Farbe: alte Rollennamen auf Design B (Übergangs-Aliase) ====================================== */
  --canvas: var(--marke-grund);                    /* Seitengrund Morgen */
  --surface: var(--marke-flaeche);                 /* Karte, Tafel, Eingabe: Leinen (Haarlinie + Schatten Pflicht) */
  --surface-strong: var(--marke-flaeche-stark);    /* gedrückt, Chips, Hover: Sand */
  --ink: var(--marke-tinte);
  --muted: var(--marke-etikett);
  --border: var(--marke-linie);                    /* Haarlinie, nur Dekor */
  --control: var(--marke-steuerung);               /* Rand eines Bedienelements (Taube, 6,3:1) */
  --action: var(--marke-aktion);
  --action-hover: var(--glasur-tief);
  --success: var(--marke-erfolg);
  --success-soft: var(--marke-erfolg-flaeche);
  --warning: var(--marke-warnung);
  --warning-soft: var(--marke-warnung-flaeche);
  --danger: var(--marke-fehler);
  --danger-soft: var(--marke-fehler-flaeche);
  --focus: var(--kohle);                           /* Fokusring Kohle, 2 px (D14) */
  --focus-gedaempft: var(--kohle);
  --knopf-auf-akzent: var(--knopf-schrift);
  --akzent-getoent: var(--glasur-hauch);           /* aktive Navigationszeile; Glasur darauf >= 5:1 */
  --label-versal-farbe: var(--muted);
  --trennlinie-fein: color-mix(in srgb, var(--border) 70%, transparent);  /* Trenner INNERHALB einer Liste; voll --border = Rand einer Fläche */
  --fokusring: var(--focus);                       /* der Wert, den die EINE Fokusregel liest */

  /* === Schrift: eine Familie ======================================================================== */
  --sans: var(--schrift);
  --mono: var(--schrift-mono);

  /* Bediengrößen: der Lock kennt nur Lauftext (17-18 px) und Beschriftung (14 px). Dichte Listen, Tabellen und Formulare
     brauchen Stufen dazwischen; sie bleiben fluid, aber nie unter 14 px. */
  --text-caption: var(--marke-t-etikett);
  --text-control: clamp(.875rem, .855rem + .09vw, .9375rem);
  --text-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --text-prose: var(--marke-t-text);
  --text-title: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --text-lead: var(--marke-t-lead);
  --text-section: clamp(1.25rem, 1.1786rem + .3571vw, 1.5rem);
  --text-code: clamp(1.15rem, 1.0929rem + .2857vw, 1.35rem);
  --text-mono-caption: calc(var(--text-caption) * .96);
  --tenant-titel: var(--text-section);
  --text-kennzahl: var(--text-section);

  /* === Fluide Abstände (320 px bis 1440 px) ========================================================= */
  --space-1: clamp(.25rem, .2321rem + .0893vw, .3125rem);
  --space-2: clamp(.5rem, .4643rem + .1786vw, .625rem);
  --space-3: clamp(.75rem, .6964rem + .2679vw, .9375rem);
  --space-4: clamp(1rem, .9286rem + .3571vw, 1.25rem);
  --space-5: clamp(1.25rem, 1.1607rem + .4464vw, 1.5625rem);
  --space-6: clamp(1.5rem, 1.3929rem + .5357vw, 1.875rem);
  --space-8: clamp(2rem, 1.8571rem + .7143vw, 2.5rem);
  --space-10: clamp(2.5rem, 2.3214rem + .8929vw, 3.125rem);
  --space-12: clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem);

  /* === Radien: nur die Familie aus marke.css (--r-1 8, --r-2 16, --r-3 24, --r-pille), NZ-01; die Aliasse sind abgelöst === */

  /* === Maße ========================================================================================= */
  --bahn: 46rem;                                   /* linearer Einrichtungsweg */
  --satz: 62ch;                                    /* Lesebreite für Fließtext und Formularseiten */
  --tenant-flaeche: clamp(96rem, 92vw, 150rem);    /* Deckel der Arbeitsfläche der Verwaltung, fließend */
  --tenant-leiste: 15.5rem;
  --shell-max: 137.5rem;                           /* 2 200 px: Deckel der Arbeitsfläche; ab hier wächst nur Weißraum */
  --liste-breite: clamp(23rem, 26vw, 26rem);       /* darunter braucht ein Betreff vier Zeilen */
  --lese-breite: 68ch;
  --rail-breite: clamp(18rem, 20vw, 22.5rem);
  --tab-leiste-hoehe: 3.5rem;                      /* untere Tab-Leiste am Handy, zuzüglich env(safe-area-inset-bottom) */
  --tenant-schublade: clamp(20rem, 24vw, 30rem);
  --tenant-grund: var(--canvas);
  --treffer: var(--klickziel);                     /* 44 px, WCAG 2.5.8 */
  --treffer-dicht: 36px;                           /* dichte Tabellenzeilen und Farbfelder; `leise` hat seit Nachlauf C (A-2) 44 px */
  --boden-hoehe: 56px;
  --umschalt-schmal: 34rem;                        /* ein Umschaltpunkt „Seitenleiste wird Kopfzeile“ */
  --kopf-hoehe: 3.5rem;
  --kopf-polster: var(--space-3) clamp(var(--space-4), 5vw, var(--space-8));

  /* === Höhenordnung: drei Stufen; ruhende Flächen tragen keinen Schatten ============================ */
  --hoehe-0: none;
  --hoehe-1: var(--schatten-1);
  --hoehe-2: var(--schatten-2);

  /* === Stapel ======================================================================================= */
  --z-nav: 10;
  --z-boden: 15;
  --z-meldung: 20;
  --z-sprunglink: 30;
  --z-schicht: 40;                                 /* Kennwort-Popup ohne Top-Layer (dialog-muster.js oeffneSchicht) */

  /* === Bewegung ===================================================================================== */
  --dauer-schnell: var(--dauer-hover);             /* 120 ms: hochfrequente Bedienung */
  --dauer-ruhig: var(--dauer-wechsel);             /* 180 ms: Blatt öffnet, Schublade fährt ein */
  --kurve: var(--kurve-ein);

  /* === Listenmaß (F-052): ein Maß für alle Listen, wächst mit der Breite ============================ */
  --zeile-py: var(--space-2);
  --zeile-px: var(--space-3);
  --karte-py: calc(var(--zeile-py) + var(--space-1));
  --marke-gr: 2rem;                                /* Kantenlänge des Markenfelds */
}
@media (min-width: 48.0625rem) { :root { --zeile-py: .625rem; --zeile-px: var(--space-4); --marke-gr: 2.25rem; } }
@media (min-width: 90rem) { :root { --zeile-py: var(--space-3); --marke-gr: 2.5rem; } }

/* --- Fokus: EINE Regel ------------------------------------------------------------------------------
   Kohle 2 px, Abstand 2 px, außen (innen verschwindet der Ring in Tabellen hinter der Nachbarzelle). Kein border-radius hier:
   der Umriss folgt dem Radius des Elements. Eine Fläche mit anderem Grund setzt nur den WERT --fokusring um. */
:focus-visible {
  outline: var(--fokus-ring);
  outline-color: var(--fokusring);
  outline-offset: var(--fokus-abstand);
}
:where([data-grund="getoent"]) { --fokusring: var(--focus-gedaempft); }
:where([data-grund="gefuellt"]) { --fokusring: var(--knopf-auf-akzent); }

/* --- Nur für Vorlesesoftware ------------------------------------------------------------------------
   FALLE: absolut positioniert. Steht es in einem Rollbereich ohne positionierten Vorfahren, bezieht es sich auf die Seite
   und zieht die Seitenbreite auf. Jeder Rollbereich mit so einem Text trägt `position: relative`. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- Mindesttrefferfläche (Utility): vergrößert nur die KLICKBARE Fläche über ein transparentes ::after --- */
.treffer-min { position: relative; }
.treffer-min::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: max(100%, var(--treffer)); height: max(100%, var(--treffer));
}
.treffer-min.dicht::after { width: max(100%, var(--treffer-dicht)); height: max(100%, var(--treffer-dicht)); }

/* --- K-04 Seitentitel: Kontextzeile, ruhiger Titel, Führungssatz ------------------------------------- */
.seitentitel { margin: 0 0 var(--space-6); }
.seitentitel .kontext {
  margin: 0 0 var(--space-2);
  font-size: var(--text-control); font-weight: var(--gewicht-mittel); line-height: 1.4; color: var(--muted);
}
.seitentitel h1 {
  margin: 0;
  font-size: var(--t-24); font-weight: var(--gewicht-text); line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2); text-wrap: balance; color: var(--ink);
}
@media (min-width: 48rem) { .seitentitel h1 { font-size: var(--t-32); } }
.seitentitel .fuehrung {
  margin: var(--space-3) 0 0; max-width: var(--satz);
  font-size: var(--text-prose); line-height: var(--lh-lauftext); text-wrap: pretty; color: var(--muted);
}

/* --- K-05 Abschnittskopf mit Verweis ----------------------------------------------------------------- */
.abschnittskopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-8) 0 var(--space-3);
}
.abschnittskopf h2 {
  margin: 0;
  font-size: var(--tenant-titel); font-weight: var(--gewicht-mittel); letter-spacing: var(--ls-h2);
  text-wrap: balance; color: var(--ink);
}
.abschnittskopf .weiter {
  min-height: var(--treffer);
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding-inline: var(--space-2);
  border: 0; background: none; color: var(--action);
  font: inherit; font-size: var(--text-control); font-weight: var(--gewicht-knopf); cursor: pointer;
}
.abschnittskopf .weiter::after { content: "\203A"; font-size: 1.15em; line-height: 1; }

/* --- K-06 Zeile: Markenfeld, Titel, Unterzeile, EIN Mehr-Knopf ---------------------------------------
   Haarlinie zwischen den Zeilen, bis zur Textspalte eingerückt, die letzte Zeile ohne. Keine Karte je Eintrag. */
.zeilen { margin: 0; padding: 0; list-style: none; }
.zeile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--treffer);
  padding: var(--zeile-py) 0;
}
.zeile + .zeile::before {
  content: "";
  position: absolute; inset-inline-start: calc(var(--marke-gr) + var(--space-3)); inset-inline-end: 0; top: 0;
  border-top: var(--haarlinie);
}
.zeile-text { min-width: 0; }
.zeile-titel {
  margin: 0;
  font-size: var(--text-body); font-weight: var(--gewicht-knopf); color: var(--ink);
  overflow-wrap: anywhere;
}
.zeile-unter {
  margin: 2px 0 0;
  font-size: var(--text-caption); color: var(--muted);
  overflow-wrap: anywhere;
}

/* Zustände der Zeilenliste: LEER und FEHLER ersetzen den Inhalt von `.zeilen` durch `.leerzustand` bzw. `.meldung`
   (Bestand, keine dritte Fassung). LÄDT: ruhige Flächen statt Text, ohne Schimmer und Puls. */
.zeilen[data-zustand="laedt"] .zeile-titel,
.zeilen[data-zustand="laedt"] .zeile-unter,
.zeilen[data-zustand="laedt"] .marke {
  color: transparent; background: var(--surface-strong);
  border-radius: var(--r-1); user-select: none;
}
.zeilen[data-zustand="laedt"] .zeile-titel { max-width: 60%; }
.zeilen[data-zustand="laedt"] .zeile-unter { max-width: 35%; }
.zeilen[data-zustand="laedt"] .zeile { pointer-events: none; }

/* Markenfeld: einfarbig, ein Buchstabe oder ein Zustandszeichen; bewusst kein Bild. */
.marke {
  width: var(--marke-gr); height: var(--marke-gr);
  display: grid; place-items: center;
  border-radius: var(--r-1);
  background: var(--surface-strong); color: var(--muted);
  font-size: var(--text-control); font-weight: var(--gewicht-knopf); letter-spacing: -0.02em;
}
.marke[data-ton="aktion"] { background: var(--action); color: var(--knopf-auf-akzent); }
.marke[data-ton="erfolg"] { background: var(--success-soft); color: var(--success); }
.marke[data-ton="warnung"] { background: var(--warning-soft); color: var(--warning); }

/* --- K-07 Mehr-Menü: EIN Knopf je Zeile, natives Popover (Top-Layer, wird nicht beschnitten) -------- */
.mehr {
  width: var(--treffer); height: var(--treffer);
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-1);
  background: none; color: var(--muted);
  font-size: var(--text-body); line-height: 1; cursor: pointer;
}
.mehr:hover { background: var(--surface-strong); color: var(--ink); }
.mehr-menue {
  min-width: 13rem; margin: 0; padding: var(--space-2);
  border: 0; border-radius: var(--r-3);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); color: var(--ink);
  box-shadow: var(--glas-kante), var(--hoehe-2);   /* NZ-01: Menü = Überlagerung = Glas */
  /* Ohne Anker fiele das Menü in Chromium auf (0,0); die Lage am Knopf setzt der Block „Dialog-Muster“ unten
     für jedes Menü, das dialog-muster.js verankert hat ([data-verankert]). */
  position: fixed; inset: auto;
}
.mehr-menue:popover-open { display: grid; gap: 2px; }
.mehr-menue button {
  min-height: var(--treffer);
  display: block; width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--r-2);   /* im Menü 24 mit 8 px Rand: Eintrag 16 */
  background: none; color: var(--ink); text-align: left;
  font: inherit; font-size: var(--text-control); cursor: pointer;
}
.mehr-menue button:hover { background: var(--surface-strong); }
.mehr-menue button[data-wirkung="destruktiv"] { color: var(--danger); }

/* --- Zustandswort: jede Farbaussage trägt ein Wort. kleiner Chip mit Rand, Radius --r-1 (NZ-01) ---- */
.zustand {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--control); border-radius: var(--r-1);
  background: var(--surface-strong); color: var(--muted);
  font-size: var(--text-caption); font-weight: var(--gewicht-knopf); white-space: nowrap;
}
.zustand[data-ton="erfolg"] { background: var(--success-soft); color: var(--success); border-color: currentColor; }
.zustand[data-ton="warnung"] { background: var(--warning-soft); color: var(--warning); border-color: currentColor; }
.zustand[data-ton="gefahr"] { background: var(--danger-soft); color: var(--danger); border-color: currentColor; }

/* --- Systemzustand: EINE ruhige Wortzeile mit Punkt, nie ein Vollbreiten-Kasten ----------------------
   Vier Töne: neutral, ok, warning, gefahr; jeder mit Punkt UND Wort. Ein echter Vorfall gehört in `.meldung`. */
.systemzustand {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; padding: var(--space-1) 0;
  color: var(--muted);
  font-size: var(--text-caption); font-weight: var(--gewicht-knopf);
}
.systemzustand::before {
  content: ""; width: .5rem; height: .5rem; flex: none; border-radius: 50%;
  background: var(--muted);
}
.systemzustand[data-ton="ok"] { color: var(--success); }
.systemzustand[data-ton="ok"]::before { background: var(--success); }
.systemzustand[data-ton="warning"] { color: var(--warning); }
.systemzustand[data-ton="warning"]::before { background: var(--warning); }
.systemzustand[data-ton="gefahr"] { color: var(--danger); }
.systemzustand[data-ton="gefahr"]::before { background: var(--danger); }
.systemzustand[hidden] { display: none; }

/* --- Reiter: EINE Navigationsgrammatik für die Seitenleiste ------------------------------------------
   `role="tab"` + `aria-selected` (Verwaltung) ist die Norm; `.reiter-knopf` bleibt als zweite Klasse am selben Element
   (19 Proben binden an `[data-bereich]` auf `.reiter-knopf`). Aktive Zeile: getönte Fläche, Wort und Icon in Glasur. 44 px. */
.reiter {
  width: 100%; min-height: var(--treffer);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-3);
  border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--ink);
  font: inherit; font-size: var(--text-control); font-weight: var(--gewicht-mittel);
  text-align: left; text-decoration: none; cursor: pointer;
}
.reiter .ikon { flex: none; color: var(--muted); }
.reiter:hover { background: var(--surface-strong); }
.reiter[aria-selected="true"] {
  background: var(--akzent-getoent); color: var(--action); font-weight: var(--gewicht-knopf);
}
.reiter[aria-selected="true"] .ikon { color: var(--action); }
/* Reiterwörter brechen nur an Wortgrenzen (F-003: „Einladun-gen“ ist ein Fehler); passt es nicht, ändert sich die
   Schriftgröße der Leiste, nie das Wort. */
.reiter .wort { flex: 1 1 auto; min-width: 0; overflow-wrap: normal; hyphens: none; -webkit-hyphens: none; }

/* --- Ikon: EIN Strich, currentColor, kein externes Asset ---------------------------------------------- */
.ikon {
  width: 1.125rem; height: 1.125rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6px;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Das Versal-Etikett nennt den TYP eines Eintrags und Gruppentitel der Seitenleiste, nie einen Abschnitt (kein Eyebrow). */
.etikett,
.leiste-gruppe,
.leiste-gruppe-titel {
  font-size: var(--text-caption); font-weight: var(--gewicht-knopf);
  letter-spacing: .06em; text-transform: uppercase; color: var(--label-versal-farbe);
}

/* --- K-11 Bodenleiste und Fortschritt -----------------------------------------------------------------
   Genau EINE schwebende Fläche im Produkt, deckend (kein Glas, kein Weichzeichner), Haarlinie + Schatten Höhe 1.
   Sie steht auf Leinen, dort gilt der Ring über --fokusring. Die Leiste bleibt gleich hoch, wenn der Fortschritt wächst. */
.bodenleiste {
  --fokusring: var(--focus-gedaempft);
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: var(--z-boden);
  min-height: calc(var(--boden-hoehe) + env(safe-area-inset-bottom, 0px));
  padding: var(--space-2) var(--space-5) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface);
  border-top: var(--haarlinie);
  box-shadow: var(--hoehe-1);
}
/* Raum-Regel: der Inhalt behält unten seinen Abstand in Höhe der Leiste. */
.hat-bodenleiste {
  padding-bottom: calc(var(--boden-hoehe) + var(--space-8) + env(safe-area-inset-bottom, 0px));
}
.fortschritt { flex: 1 1 14rem; min-width: 0; }
.fortschritt-strich {
  height: 4px; width: 100%;
  border-radius: var(--r-pille);
  background: var(--border);
  overflow: hidden;
}
/* Der Füllstand wächst über `transform`, nicht über `width` (kein Umbruch je Einzelbild). */
.fortschritt-strich > i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--action);
}
.fortschritt-wort {
  margin: var(--space-2) 0 0;
  font-size: var(--text-control); font-weight: var(--gewicht-knopf); color: var(--ink);
}
.fortschritt-wort span { font-weight: var(--gewicht-text); color: var(--muted); }

/* --- K-02 Gruppentitel in der Seitenleiste: nur Abstand (die Schrift steht bei .etikett) ----------------- */
.leiste-gruppe { margin: var(--space-5) 0 var(--space-1); padding-inline: var(--space-3); }
.leiste-gruppe:first-child { margin-top: 0; }

/* --- K-12 Anleitung: eingeklappt, an ihrem Feld, VOR der Eingabe -------------------------------------- */
.anleitung {
  margin: var(--space-3) 0;
  border: var(--haarlinie); border-radius: var(--r-2);
  background: var(--surface);
}
.anleitung > summary {
  min-height: var(--treffer);
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-control); font-weight: var(--gewicht-knopf); color: var(--action);
  cursor: pointer; list-style: none;
}
.anleitung > summary::-webkit-details-marker { display: none; }
.anleitung > summary::before {
  content: "\203A"; display: inline-block;
  font-size: 1.2em; line-height: 1; color: var(--muted);
}
.anleitung[open] > summary::before { transform: rotate(90deg); }
.anleitung-koerper {
  padding: 0 var(--space-4) var(--space-4);
  border-top: var(--haarlinie);
  font-size: var(--text-control); color: var(--ink);
}
.anleitung-koerper ol { margin: var(--space-3) 0; padding-inline-start: 1.35rem; }
/* Der Anbieterlink ist der Weg nach drüben, keine Beiläufigkeit: Trefferfläche >= 44 px. */
.anleitung-koerper a { display: inline-flex; align-items: center; min-height: var(--treffer); font-weight: var(--gewicht-knopf); }
.anleitung-koerper li { margin: 0 0 var(--space-2); line-height: 1.5; }
.anleitung-koerper .woran {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--r-1);
  background: var(--success-soft); color: var(--success);
  font-weight: var(--gewicht-knopf);
}

/* --- K-13 Wahlzeile: Auswahl als Zeile, nie als Kachelraster ------------------------------------------ */
.wahlzeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3);
  width: 100%; min-height: var(--treffer);
  padding: var(--space-3);
  border: 1px solid var(--control); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink); text-align: left;
  font: inherit; cursor: pointer;
}
.wahlzeile + .wahlzeile { margin-top: var(--space-2); }
.wahlzeile:hover { background: var(--surface-strong); }
.wahlzeile[aria-pressed="true"] { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.wahlzeile-satz { margin: 2px 0 0; font-size: var(--text-caption); color: var(--muted); }

/* --- K-14 Chatbahn: Frage, Antwort, Herkunft, Handlungen je Antwort ----------------------------------- */
.chatbahn { display: grid; gap: var(--space-3); }
.chat-frage, .chat-antwort {
  max-width: min(100%, 44rem);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-2);
  font-size: var(--text-control); line-height: var(--lh-lauftext);
}
.chat-frage {
  justify-self: end;
  background: var(--action); color: var(--knopf-auf-akzent);
  border-end-end-radius: var(--r-1);
}
.chat-antwort {
  justify-self: start;
  background: var(--surface); color: var(--ink);
  border: var(--haarlinie);
  border-end-start-radius: var(--r-1);
}
.chat-herkunft {
  margin: var(--space-2) 0 0; padding-top: var(--space-2);
  border-top: var(--haarlinie);
  font-size: var(--text-caption); color: var(--muted);
}

/* --- Bewegung: nur HINZUGEFÜGT. Außerhalb dieses Blocks steht kein `transition`. HÖCHSTENS EINE Übergangsart je Element:
   Farbe (.uebergang-farbe) ODER Lage (.uebergang-lage); nie Farbe, Skalierung und Position zugleich. */
@media (prefers-reduced-motion: no-preference) {
  .abschnittskopf .weiter,
  .mehr,
  .wahlzeile,
  .uebergang-farbe {
    transition: background-color var(--dauer-schnell) var(--kurve),
                color var(--dauer-schnell) var(--kurve),
                border-color var(--dauer-schnell) var(--kurve);
  }
  .anleitung > summary::before,
  .uebergang-lage {
    transition: transform var(--dauer-schnell) var(--kurve);
  }
  .fortschritt-strich > i {
    transition: transform var(--dauer-ruhig) var(--kurve);
  }
}

/* =================================================================================================
   DREHLEISTE (F-047, Timon 09.10.2026): „Immer wenn ein Menü Unterpunkte hat, soll die Reiterbar in die Unterprojekte
   drehen.“ Gemeinsam für Cockpit (kunde.html) und Verwaltung. Das Schalten (`data-gedreht`, `inert`, `aria-hidden`,
   Drehsperre `data-dreht`) macht `dreheLeistenSeite` in dialog-muster.js; was nur an einer Seite hängt, steht dort.
   * Grundfall (und reduce): keine Drehung, die abgewandte Seite ist weg; unter reduce eine kurze Überblendung.
   * no-preference: echte Drehung am Tisch um die senkrechte Achse; am Handy (<= 34rem) klappt die Seite von unten hoch.
   ================================================================================================= */
.leiste-buehne { --dreh-dauer: var(--dauer-reveal); --dreh: rotateY(180deg); perspective: 60rem; }
.leiste-dreher { display: grid; position: relative; }
.leiste-seite { grid-area: 1 / 1; min-width: 0; }
.leiste-dreher[data-gedreht="false"] > .leiste-hinten,
.leiste-dreher[data-gedreht="true"] > .leiste-vorn { visibility: hidden; opacity: 0; pointer-events: none; }

/* Rückseite: Kopf „← Einstellungen“, Haarlinie, dann die Unterreiter (ohne Ikon, ihr Wort fluchtet mit dem Kopf). */
.leiste-hinten { display: grid; align-content: start; gap: var(--space-2); }
.leiste-zurueck { font-weight: var(--gewicht-knopf); }
.leiste-zurueck .ikon { color: var(--action); }
.unterleiste-rahmen { position: relative; min-width: 0; padding-top: var(--space-2); border-top: var(--haarlinie); }
.unterleiste .reiter { padding-inline-start: calc(var(--space-3) + 1.125rem + var(--space-3)); }

/* Als Leiste unten (<= 34rem): die abgewandte Seite ist WEG (display: none), die ankommende KLAPPT von der Unterkante hoch
   (nur no-preference und nur solange `data-dreht` gesetzt ist). Rückseite: links der Zurückpfeil über die volle Höhe (sein Name
   steht in aria-label), rechts die Unterreiter in drei Spalten; „Absenderpostfach“ als längstes Wort bleibt ganz (F-003). */
@media (max-width: 34rem) {
  .leiste-buehne { --dreh: none; --dreh-dauer: var(--dauer-wechsel); perspective: none; }
  .leiste-dreher[data-gedreht="false"] > .leiste-hinten,
  .leiste-dreher[data-gedreht="true"] > .leiste-vorn { display: none; }
  .leiste-seite { transform-origin: 50% 100%; }
  .leiste-hinten { display: grid; grid-template-columns: var(--treffer) minmax(0, 1fr); align-items: stretch; gap: 2px; }
  .seitenleiste .leiste-zurueck { width: auto; min-height: 100%; justify-content: center; padding: 0; }
  .leiste-zurueck .ikon { width: 1.375rem; height: 1.375rem; }
  .leiste-zurueck .wort { display: none; }
  .unterleiste-rahmen { padding: 0 0 0 2px; border-top: 0; border-left: var(--haarlinie); }
  /* NZ-05 (N1-09): die Unterreiter stehen in EINER waagrecht rollenden Zeile (vorher drei Spalten in zwei bis drei Zeilen, 12-13 px). */
  .unterleiste.leiste-liste { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; min-width: 0; }
  .unterleiste.leiste-liste::-webkit-scrollbar { display: none; }
  .unterleiste .reiter {
    flex: 0 0 auto; justify-content: center; min-height: var(--treffer); padding: 2px var(--space-3); white-space: nowrap;
    font-size: var(--t-14); font-weight: var(--gewicht-text); line-height: 1.2; text-align: center;
  }
  .unterleiste .reiter[aria-selected="true"] { font-weight: var(--gewicht-knopf); }
  .unterleiste .reiter .wort { flex: none; max-width: 100%; -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; }
}
@keyframes leiste-umklappen {
  from { transform: perspective(30rem) rotateX(70deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes leiste-einblenden {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 34rem) and (prefers-reduced-motion: no-preference) {
  .leiste-dreher[data-dreht="true"] > .leiste-seite { animation: leiste-umklappen var(--dreh-dauer) var(--kurve); }
}
@media (max-width: 34rem) and (prefers-reduced-motion: reduce) {
  /* Eine Überblendung ist keine Bewegung: das „zweite Netz“ in styles.css (`.01ms` unter reduce) gilt dafür ausdrücklich nicht. */
  .leiste-dreher > .leiste-seite { animation: leiste-einblenden var(--dauer-ruhig) var(--kurve); animation-duration: var(--dauer-ruhig) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .leiste-seite { transition: opacity var(--dauer-ruhig) var(--kurve), visibility 0s linear var(--dauer-ruhig); }
  .leiste-dreher > .leiste-seite { transition-duration: var(--dauer-ruhig), 0s !important; }
  .leiste-dreher[data-gedreht="true"] > .leiste-hinten,
  .leiste-dreher[data-gedreht="false"] > .leiste-vorn { transition-delay: 0s; }
}
@media (prefers-reduced-motion: no-preference) {
  .leiste-dreher { transform-style: preserve-3d; transition: transform var(--dreh-dauer) var(--kurve); }
  .leiste-seite { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .leiste-hinten { transform: var(--dreh); }
  .leiste-dreher[data-gedreht="true"] { transform: var(--dreh); }
  /* Während der Drehung sind BEIDE Seiten da; die gehende verschwindet erst danach aus dem Baum der Sichtbarkeit. */
  .leiste-dreher[data-gedreht] > .leiste-seite { opacity: 1; transition: visibility 0s linear var(--dreh-dauer); }
  .leiste-dreher[data-gedreht="true"] > .leiste-hinten,
  .leiste-dreher[data-gedreht="false"] > .leiste-vorn { transition-delay: 0s; }
  .leiste-dreher[data-sofort="true"], .leiste-dreher[data-sofort="true"] > .leiste-seite { transition: none; }
  /* Keine Treffer während der Drehung (Doppelklick; dialog-muster.js DREH_SPERRE_MS). */
  .leiste-dreher[data-dreht="true"] { pointer-events: none; }
}

/* =================================================================================================
   DICHTE LISTE (F-052, Timon 09.10.2026 zu web.de): Mailauswahl am kleinen Bildschirm nahm zu viel Platz.
   Das Maß steht oben in :root (--zeile-py, --zeile-px, --karte-py, --marke-gr); jede Liste liest es, statt eigene Polster zu
   führen. Knapp am Telefon (Trefferfläche bleibt 44 px über min-height), luftiger ab Tablet, am weitesten ab 90 rem.
   ================================================================================================= */

/* =================================================================================================
   K0 DIALOG-MUSTER (Timon E2 + E4 + E8) — Gestalt zu `dialog-muster.js`
   (a) `.mehr-menue[data-verankert]`: das „…“-Menü sitzt am Knopf (Anchor Positioning; sonst setzt das Modul top/left),
       am Telefon ein Blatt von unten.
   (b) `dialog.popup`, `dialog.blatt`: modales Popup mit kleinem X, weichem Ein- und Ausblenden.
   (c) `.popup-schicht`: Popup OHNE Top-Layer für das Kennwortfeld (Passwortmanager, P-D13-43).
   (d) Meldung ohne Sprung (E8).
   Bewegung nur in den Abfragen unten: volle Bewegung unter no-preference, unter reduce allein die Opazität.
   ================================================================================================= */

/* --- (a) Menü am Knopf ---------------------------------------------------------------------------------- */
.mehr-menue[data-verankert] {
  max-height: calc(100dvh - 2 * var(--space-3)); overflow: auto;
  transform-origin: top right;
}
@supports (position-area: block-end) {
  .mehr-menue[data-verankert] {
    position-area: block-end span-inline-start;   /* rechtsbündig unter dem Knopf; bei Randkollision oben bzw. andere Seite */
    margin-block-start: var(--space-1);
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
}
@media (max-width: 34rem) {
  .mehr-menue[data-verankert] {
    position-area: none;
    inset: auto 0 0 0; width: auto; min-width: 0; max-width: none; margin: 0;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-3) var(--r-3) 0 0;
    transform-origin: bottom center;
  }
  .mehr-menue[data-verankert]::backdrop { background: var(--schleier); -webkit-backdrop-filter: var(--schleier-filter); backdrop-filter: var(--schleier-filter); }
}

/* --- (b) Modales Popup ---------------------------------------------------------------------------------- */
/* PFLICHT (Studie U2): in der Top-Layer wurde `.blatt { position: relative }` zu `absolute`, das Blatt hing am Dokumentanfang
   und die Seite sprang beim Öffnen nach oben (gemessen 308 → 0). */
dialog.popup:modal, dialog.blatt:modal { position: fixed; }
dialog.popup {
  width: min(40rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(90dvh, 52rem); overflow: auto;
}
dialog.popup[data-breite="weit"] { width: min(60rem, calc(100vw - 2 * var(--space-4))); }
/* Im Ausblenden nimmt das Popup keinen Klick mehr an, sonst löste ein zweiter Klick auf „Ja“ die Handlung noch einmal aus. */
dialog.popup[data-schliesst], dialog.blatt[data-schliesst] { opacity: 0; pointer-events: none; }
dialog.popup[data-schliesst]::backdrop, dialog.blatt[data-schliesst]::backdrop { opacity: 0; }
.popup-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
}
/* Das kleine X: 16-px-Zeichen, 44-px-Trefferfläche, gedämpft. */
.popup-x {
  flex: 0 0 auto;
  min-width: var(--treffer); min-height: var(--treffer);
  display: inline-grid; place-items: center;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0;
  border: 0; border-radius: var(--r-pille);
  background: transparent; color: var(--muted);
  font: inherit; font-size: var(--t-16); line-height: 1; cursor: pointer;
}
.popup-x:hover { background: var(--surface-strong); color: var(--ink); }
/* Das Schließen-Zeichen ist ein SVG (kein Textzeichen „✕“), dieselbe Größe wie in der Verwaltung (`verwaltung.css`). */
.popup-x-zeichen { width: 14px; height: 14px; fill: currentColor; pointer-events: none; }
.popup-warnung {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warning); border-radius: var(--r-1);
  background: var(--warning-soft); color: var(--ink);
}
.popup-warnung p { margin: 0 0 var(--space-2); font-weight: var(--gewicht-knopf); }
.popup-warnung .knopfreihe { margin: 0; }
@media (max-width: 34rem) {
  dialog.popup, dialog.blatt {
    width: 100%; max-width: 100%; max-height: 92dvh;
    margin: auto 0 0;
    border-end-start-radius: 0; border-end-end-radius: 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
}

/* --- (c) Popup ohne Top-Layer (Kennwortfeld) ------------------------------------------------------------- */
.popup-schicht {
  position: fixed; inset: 0; z-index: var(--z-schicht);
  display: grid; place-items: center;
  padding: var(--space-4); overflow: auto;
  background: var(--schleier); -webkit-backdrop-filter: var(--schleier-filter); backdrop-filter: var(--schleier-filter);
}
.popup-schicht[hidden] { display: none; }
.popup-schicht[data-schliesst] { opacity: 0; }
.popup-flaeche {
  position: relative;
  width: min(30rem, 100%); max-height: calc(100dvh - 2 * var(--space-4)); overflow: auto;
  padding: var(--space-5);
  border: 0; border-radius: var(--r-3);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); color: var(--ink);
  box-shadow: var(--glas-kante), var(--hoehe-2);
}
.popup-flaeche > .popup-x { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; }
@media (max-width: 34rem) {
  .popup-schicht { place-items: end stretch; padding: 0; }
  .popup-flaeche {
    width: 100%; max-height: 92dvh;
    border-end-start-radius: 0; border-end-end-radius: 0;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
}

/* --- (d) Meldung ohne Sprung (E8) -----------------------------------------------------------------------
   Steht der Platz der Meldung nicht oben im Bild, oder hält eine Kennwortbestätigung die Stelle fest, rollt die Seite nicht
   zur Meldung: sie schwebt unten im Bild (`dialog-muster.js platzObenImBild`) und geht nach einigen Sekunden von selbst. */
.meldung[data-schwebt] {
  position: fixed; z-index: var(--z-meldung);
  inset: auto var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) auto;
  max-width: min(28rem, calc(100vw - 2 * var(--space-4))); margin: 0;
  box-shadow: var(--hoehe-2);
  max-height: calc(100dvh - 2 * var(--space-4)); overflow: auto;   /* auch eine lange Meldung bleibt ganz im Bild */
}
/* Ist ein Popup offen, hängt `anDieOberflaeche` die Meldung (und den Toast) IN das Popup bzw. die Kennwort-Schicht, sonst läge
   sie hinter der Top-Layer. Am Telefon steht sie dann oben im Bild, damit sie die Knöpfe des Blatts nicht verdeckt. */
:is(dialog, .popup-schicht) > :is(#meldung, .meldung)[data-schwebt] { z-index: 2; }
:is(dialog, .popup-schicht) > .toast { z-index: 2; }
@media (max-width: 34rem) {
  :is(dialog, .popup-schicht) > :is(#meldung, .meldung)[data-schwebt],
  :is(dialog, .popup-schicht) > :is(#toast, .toast) {
    inset: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-3) auto var(--space-3);
    max-width: none; width: auto;
  }
}

/* --- Bewegung der Popups: Einblenden über @starting-style, Ausblenden über data-schliesst (das Modul wartet 180 ms, erst
   dann close()/hidden). `overlay` kennt nur Chromium; WebKit blendet trotzdem weich aus, weil das Popup bis zum Ende offen
   bleibt. Nur das Menü (hidePopover) geht in WebKit ohne Ausblenden, 120 ms, bewusst hingenommen. */
@media (prefers-reduced-motion: no-preference) {
  .mehr-menue[data-verankert] {
    transition: opacity var(--dauer-schnell) var(--kurve), transform var(--dauer-schnell) var(--kurve),
                overlay var(--dauer-schnell) allow-discrete, display var(--dauer-schnell) allow-discrete;
  }
  .mehr-menue[data-verankert]:not(:popover-open) { opacity: 0; transform: translateY(-4px) scale(.98); }
  @starting-style {
    .mehr-menue[data-verankert]:popover-open { opacity: 0; transform: translateY(-4px) scale(.98); }
  }
  dialog.popup, dialog.blatt {
    transition: opacity var(--dauer-ruhig) var(--kurve), transform var(--dauer-ruhig) var(--kurve),
                overlay var(--dauer-ruhig) allow-discrete, display var(--dauer-ruhig) allow-discrete;
  }
  dialog.popup::backdrop, dialog.blatt::backdrop {
    transition: opacity var(--dauer-ruhig) var(--kurve),
                overlay var(--dauer-ruhig) allow-discrete, display var(--dauer-ruhig) allow-discrete;
  }
  dialog.popup[data-schliesst], dialog.blatt[data-schliesst] { transform: translateY(8px) scale(.98); }
  @starting-style {
    dialog.popup[open], dialog.blatt[open] { opacity: 0; transform: translateY(8px) scale(.98); }
    dialog.popup[open]::backdrop, dialog.blatt[open]::backdrop { opacity: 0; }
  }
  .popup-schicht { transition: opacity var(--dauer-ruhig) var(--kurve), display var(--dauer-ruhig) allow-discrete; }
  .popup-schicht > .popup-flaeche { transition: transform var(--dauer-ruhig) var(--kurve); }
  .popup-schicht[data-schliesst] > .popup-flaeche { transform: translateY(8px) scale(.98); }
  @starting-style {
    .popup-schicht:not([hidden]) { opacity: 0; }
    .popup-schicht:not([hidden]) > .popup-flaeche { transform: translateY(8px) scale(.98); }
  }
  @media (max-width: 34rem) {
    .mehr-menue[data-verankert]:not(:popover-open) { transform: translateY(100%); }
    @starting-style { .mehr-menue[data-verankert]:popover-open { transform: translateY(100%); } }
    dialog.popup[data-schliesst], dialog.blatt[data-schliesst],
    .popup-schicht[data-schliesst] > .popup-flaeche { transform: translateY(100%); }
    @starting-style {
      dialog.popup[open], dialog.blatt[open],
      .popup-schicht:not([hidden]) > .popup-flaeche { transform: translateY(100%); }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Kein Weg, keine Skalierung, nur Ein- und Ausblenden. */
  .mehr-menue[data-verankert] {
    transition: opacity var(--dauer-schnell) linear,
                overlay var(--dauer-schnell) allow-discrete, display var(--dauer-schnell) allow-discrete;
  }
  .mehr-menue[data-verankert]:not(:popover-open) { opacity: 0; }
  @starting-style { .mehr-menue[data-verankert]:popover-open { opacity: 0; } }
  dialog.popup, dialog.blatt, dialog.popup::backdrop, dialog.blatt::backdrop, .popup-schicht {
    transition: opacity var(--dauer-ruhig) linear,
                overlay var(--dauer-ruhig) allow-discrete, display var(--dauer-ruhig) allow-discrete;
  }
  @starting-style {
    dialog.popup[open], dialog.blatt[open], dialog.popup[open]::backdrop, dialog.blatt[open]::backdrop,
    .popup-schicht:not([hidden]) { opacity: 0; }
  }
}

/* --- NZ-01 (N2-04, N2-05, SONSTIGES-21): Eingaben im Markenstil -----------------------------------------------------------------
   Zahlenfelder ohne das native Doppelpfeil-Steuerelement, Auswahlfelder mit eigenem Pfeil (zwei Verläufe in der Schriftfarbe, Muster
   aus verwaltung.css und richtung/C), Farbfeld als runde Fläche mit Bedienrand (--taube gegen Leinen ≥ 3:1). */
input[type="number"] { appearance: none; -webkit-appearance: none; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
select:not([multiple]) {
  appearance: none; -webkit-appearance: none; padding-inline-end: calc(var(--space-3) + 1.5rem);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 50%, calc(100% - .8125rem) 50%; background-size: .3125rem .3125rem; background-repeat: no-repeat;
}
input[type="color"] {
  appearance: none; -webkit-appearance: none; inline-size: var(--klickziel); block-size: var(--klickziel); padding: var(--space-1);
  border: 1px solid var(--taube); border-radius: var(--r-pille); background: var(--leinen); cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--r-pille); }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--r-pille); }