/* Katalog S3, S4, S5: neutrale Farben mit Petrol als Akzent (Marke, Sitzung 0025a), Statusfarben grün, blau, orange, grau, Dunkelmodus nach
   Systemeinstellung oder Wahl (data-theme), Dichte normal und kompakt (data-dichte), Kontraste nach WCAG AA.
   Design-Tokens nach dem UX-Review 2026-10-05 (docs/ux/review-2026-10-05.md, Thema 3; SPEC docs/SPEC/ux/0014.md):
   jede Farbe, Größe, Rundung und jeder Abstand kommt aus einer Variablen auf :root. Hell und dunkel tragen dieselben
   Namen; tests/web/design.test.ts prüft Kontraste und dass der Dunkelblock für System und Wahl gleich ist. */
:root {
  color-scheme: light dark;
  /* Marke (Sitzung 0025a, docs/ux/marke-vorschlag-2026-10-06.md): Petrol #1E5F80, Hellpetrol #E6F2F6, Tinte #1F2937,
     Grau #64748B, Papier #F6F8FA; Orange, Grün und Rot als Text in dunkleren Stufen derselben Farbe (AA), als Punkt in
     Punktstufen (3 : 1); Orange nie in der Nähe von Honiggold (Farbton höchstens 32°); Lila nicht vergeben */
  /* Flächen */
  --bg: #F6F8FA; --surface: #FFFFFF; --surface-2: #FFFFFF;
  --fill: rgba(100, 116, 139, .12); --separator: rgba(100, 116, 139, .24);
  /* Rand von Bedienelementen (Feld, Rahmenknopf, Suchfeld): mindestens 3 : 1 gegen Fläche und Seite (WCAG 1.4.11, Design-Gate Welle 1) */
  --feld-rand: #7F8C9E;
  /* gewähltes Segment im Segmentschalter (HTML/Text) */
  --segment-aktiv: #FFFFFF;
  /* Text und Akzent; Hellpetrol (accent-bg) für gewählte Zeile und aktiven Reiter, marke ist die Farbe des Zeichens */
  --text: #1F2937; --text-2: #57677C;
  --accent: #1E5F80; --accent-fill: #1E5F80; --on-accent: #FFFFFF; --focus: rgba(30, 95, 128, .35);
  --accent-bg: #E6F2F6; --marke: #1E5F80;
  /* aktiver Bereich der Kopfzeile (Sitzung 0042): Petrol auf Hellpetrol; nur diese drei Werte ändern, um auf Orange umzustellen
     (Tinte auf hellem Orange, Farbton höchstens 32°, Varianten in docs/SPEC/p4/0042.md §3); gelten über die Verweise auch dunkel */
  --nav-aktiv-bg: var(--accent-bg); --nav-aktiv-text: var(--accent); --nav-aktiv-linie: var(--accent);
  /* Status nach S3: neu Petrol, offen grün, wartet orange, erledigt grau; Gefahr rot */
  --neu: #1E5F80; --neu-bg: #E6F2F6;
  --offen: #047857; --offen-bg: #E6F6EF;
  --wartet: #B45309; --wartet-bg: #FEF3E2;
  --erledigt: #5B6B80;
  --danger: #B91C1C; --danger-bg: #FDECEC; --danger-fill: #B91C1C;
  /* Punkte und Symbole (Stern „Wichtig“): mindestens 3 : 1 gegen Fläche und Seite */
  --punkt-wartet: #C26A06; --punkt-offen: #059669; --punkt-danger: #DC2626;
  /* Rundungen, Schatten, Raster */
  --radius-s: 6px; --radius-m: 10px; --radius-l: 14px;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .08);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, .12);
  /* Abdunkeln hinter einem Blatt am Handy (Sitzung 0019, Design-Gate Welle 2, N4) */
  --backdrop: rgba(0, 0, 0, .25);
  /* Postfach-Filter (SPEC p5/postfach-filter.md §2): leichter Schleier neben dem Blatt „Postfächer“ (nicht modal) */
  --schleier-leicht: rgba(0, 0, 0, .08);
  --schleier-modal: rgba(0, 0, 0, .45);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* Schrift: Systemschrift, keine externen Schriften */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
  --fs-fuss: 12px; --fs-neben: 13px; --fs-text: 15px; --fs-titel: 22px; --fs-h2: 17px; --lh: 1.45;
  /* Bedienelemente: Felder und Knöpfe gleich hoch */
  --h-ctrl: 32px;
  /* Handy (Sitzung 0028): Mindesthöhe der Bedienelemente, Wort unter dem Symbol und Höhe der Werkzeugleiste unten */
  --h-touch: 44px; --fs-leiste: 11px; --h-leiste: 56px;
  /* Dichte (S4) */
  --pad: var(--space-3); --row: var(--space-2);
  --dauer: 150ms;
  /* Spam und Papierkorb (Sitzung 0030, Vorschlag p4 Design-Tokens): Namen für vorhandene Farben, keine neue Farbe */
  --spam: var(--text-2); --spam-bg: var(--fill);
  /* Großansicht der Bilder: dunkel in beiden Modi wie Apple Fotos (Design-Gate Phase 3 Welle 1, F3) */
  --bild-bg: #1C1C1E; --bild-rand: #3A3A3C; --bild-text: #F5F5F7; --bild-text-2: #AEAEB2; --bild-link: #64D2FF; --bild-knopf-rand: #636366; --bild-backdrop: rgba(0, 0, 0, .8);
}
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --bg: #111827; --surface: #1F2937; --surface-2: #172030;
  --fill: rgba(148, 163, 184, .16); --separator: rgba(148, 163, 184, .24);
  --feld-rand: #6B7A90; --segment-aktiv: #475569;
  --text: #F6F8FA; --text-2: #A3B0C2;
  --accent: #8AC6E8; --accent-fill: #2B7BA3; --on-accent: #FFFFFF; --focus: rgba(138, 198, 232, .45);
  --accent-bg: #1D4257; --marke: #E6F2F6;
  --neu: #8AC6E8; --neu-bg: #173A4E;
  --offen: #6EE7B7; --offen-bg: #0F3328;
  --wartet: #FDBA74; --wartet-bg: #3D2914;
  --erledigt: #A3B0C2;
  --danger: #FCA5A5; --danger-bg: #43191C; --danger-fill: #B91C1C;
  --punkt-wartet: #F59E0B; --punkt-offen: #10B981; --punkt-danger: #F87171;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .08);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, .5);
  --backdrop: rgba(0, 0, 0, .5);
  --schleier-leicht: rgba(0, 0, 0, .3);
  --schleier-modal: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --bg: #111827; --surface: #1F2937; --surface-2: #172030;
    --fill: rgba(148, 163, 184, .16); --separator: rgba(148, 163, 184, .24);
    --feld-rand: #6B7A90; --segment-aktiv: #475569;
    --text: #F6F8FA; --text-2: #A3B0C2;
    --accent: #8AC6E8; --accent-fill: #2B7BA3; --on-accent: #FFFFFF; --focus: rgba(138, 198, 232, .45);
    --accent-bg: #1D4257; --marke: #E6F2F6;
    --neu: #8AC6E8; --neu-bg: #173A4E;
    --offen: #6EE7B7; --offen-bg: #0F3328;
    --wartet: #FDBA74; --wartet-bg: #3D2914;
    --erledigt: #A3B0C2;
    --danger: #FCA5A5; --danger-bg: #43191C; --danger-fill: #B91C1C;
    --punkt-wartet: #F59E0B; --punkt-offen: #10B981; --punkt-danger: #F87171;
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .08);
    --shadow-segment: 0 1px 2px rgba(0, 0, 0, .5);
  --backdrop: rgba(0, 0, 0, .5);
    --schleier-leicht: rgba(0, 0, 0, .3);
    --schleier-modal: rgba(0, 0, 0, .6);
  }
}
:root[data-theme="hell"] { color-scheme: light; }
:root[data-dichte="kompakt"] { --pad: var(--space-2); --row: var(--space-1); --fs-text: 14px; --h-ctrl: 28px; }
@media (prefers-reduced-motion: reduce) { :root { --dauer: 0ms; } }
/* Baustein Handy: Trefferfläche — Finger statt Maus: Knöpfe, Felder und Menüeinträge 44 px (WCAG 2.5.8, Apple HIG) */
@media (pointer: coarse) { :root, :root[data-dichte="kompakt"] { --h-ctrl: 44px; } }

* { box-sizing: border-box; }
body { margin: 0; font: var(--fs-text)/var(--lh) var(--font); background: var(--bg); color: var(--text); }
main { max-width: 72rem; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-6); }
main.wide { max-width: 110rem; }
/* Kopfzeile (Sitzung 0018, UX-Review Thema 3): eine Zeile mit Marke, Posteingang, Verwaltung, Suche und Kontomenü */
nav.top { position: relative; z-index: 30; display: flex; align-items: center; gap: var(--space-4); min-height: 48px; padding: var(--space-1) var(--space-4); background: var(--surface-2); border-bottom: 1px solid var(--separator); }
nav.top a { color: var(--text); text-decoration: none; white-space: nowrap; }
/* aktiver Bereich (Sitzung 0042): Feld mit Linie unten wie ein Reiter, Farben über --nav-aktiv-* (auf Orange umstellbar, SPEC p4/0042 §3) */
nav.top a[aria-current="page"]:not(.brand) { margin: calc(-1 * var(--space-1)) 0; padding: var(--space-1) 10px; border-radius: var(--radius-s) var(--radius-s) 0 0; background: var(--nav-aktiv-bg); box-shadow: inset 0 -3px 0 var(--nav-aktiv-linie); color: var(--nav-aktiv-text); font-weight: 600; }
/* Marke (Sitzung 0025a): Zeichen 24 px in --marke, Wort 17 px/600 in Textfarbe; 8 + 16 px Abstand bis „Posteingang“ */
nav.top a.brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-2); color: var(--text); }
nav.top a.brand .marke-zeichen { flex: none; width: 24px; height: 24px; color: var(--marke); vertical-align: middle; }
nav.top a.brand .marke-wort { font-size: 17px; font-weight: 600; letter-spacing: -.01em; vertical-align: middle; }
/* Anmeldeseite (Sitzung 0025a): ohne Kopfzeile, Zeichen 56 px, Wortmarke 22 px/600 und Leitsatz über der Anmeldekarte */
.anmelde-kopf { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: var(--space-6) 0 var(--space-5); text-align: center; }
.anmelde-kopf .marke-zeichen { width: 56px; height: 56px; color: var(--marke); }
.anmelde-kopf p { margin: 0; }
.anmelde-wort { font-size: var(--fs-titel); font-weight: 600; letter-spacing: -.01em; }
.leitsatz { color: var(--text-2); font-size: var(--fs-neben); }
.anmelde-kopf + .login { margin-top: 0; }
nav.top .spacer { flex: 1; }
nav.top form.nr { position: relative; display: inline-flex; align-items: center; flex: 0 1 22rem; min-width: 10rem; }
nav.top form.nr > .sym { position: absolute; left: var(--space-2); color: var(--text-2); pointer-events: none; }
nav.top form.nr input { width: 100%; height: var(--h-ctrl); padding: 0 var(--space-2) 0 calc(var(--space-2) + 22px); border: 1px solid var(--feld-rand); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font: inherit; }

/* SVG-Symbole (Sitzung 0018): ein Sprite je Seite, jedes Symbol in der Textfarbe; keine Emoji */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sym { flex: none; width: 16px; height: 16px; vertical-align: -3px; }

/* Menüs (Sitzung 0018): details/summary öffnet ohne Skript und mit der Tastatur; Blatt mit Schatten wie ein Popover */
details.menue { position: relative; }
details.menue > summary { display: inline-flex; align-items: center; gap: var(--space-1); list-style: none; cursor: pointer; }
details.menue > summary::-webkit-details-marker { display: none; }
details.menue > summary .sym-runter { width: 14px; height: 14px; transition: transform var(--dauer) ease-out; }
details.menue[open] > summary .sym-runter { transform: rotate(180deg); }
.menue-blatt { position: absolute; z-index: 40; top: calc(100% + var(--space-1)); left: 0; min-width: 15rem; max-width: calc(100vw - 2 * var(--space-4)); max-height: 70vh; overflow-y: auto; padding: var(--space-1); background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); font-size: var(--fs-text); font-weight: 400; color: var(--text); }
details.konto .menue-blatt { left: auto; right: 0; min-width: 17rem; }
/* Postfach-Filter (SPEC p5/postfach-filter.md §2): das Blatt „Postfächer“ reicht bis zum Fensterboden und rollt erst, wenn die
   Einträge nicht passen (Menüblatt über der Seite, Ergänzung 9); Lage und Aussehen im Block „Postfach-Filter“ am Ende */
details.menue.pf > .menue-blatt.pf-blatt { max-height: none; overflow-y: auto; }
.menue-blatt hr { border: 0; border-top: 1px solid var(--separator); margin: var(--space-1) 0; }
.menue-kopf { margin: var(--space-1) var(--space-2) var(--space-2); font-size: var(--fs-neben); line-height: 1.35; }
.menue-titel { margin: var(--space-2) var(--space-2) var(--space-1); color: var(--text-2); font-size: var(--fs-fuss); font-weight: 600; }
.menue-form { margin: 0; }
.menue-form .schalter { display: flex; margin: 0 var(--space-2) var(--space-2); }
.menue-form .schalter button { flex: 1; }
a.menue-eintrag, button.menue-eintrag { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); width: 100%; min-height: var(--h-ctrl); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text); font: inherit; font-weight: 400; text-align: left; text-decoration: none; white-space: nowrap; }
a.menue-eintrag:hover, button.menue-eintrag:hover { background: var(--fill); }
/* Fokusring nach innen: das Menüblatt scrollt und schnitte einen Ring außen ab (Design-Gate Welle 1, B2) */
a.menue-eintrag:focus-visible, button.menue-eintrag:focus-visible { outline-offset: -2px; }
.menue-eintrag .sym { color: var(--text-2); }
.menue-wert { margin-left: auto; padding-left: var(--space-3); color: var(--text-2); font-size: var(--fs-neben); }
details.filter .menue-eintrag, details.suchfilter .menue-eintrag { padding-left: 28px; }   /* Platz für das Häkchen (UXP4W1-07) */
.menue-eintrag.aktiv { color: var(--accent); font-weight: 600; }
.menue-eintrag.aktiv::before { content: ""; position: absolute; left: 12px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Kontomenü: Initialen im Kreis, daneben der Name (am Handy nur die Initialen) */
.konto-knopf { min-height: var(--h-ctrl); padding: 2px var(--space-2) 2px 2px; border-radius: 999px; color: var(--text); }
.konto-knopf:hover, details.konto[open] > .konto-knopf { background: var(--fill); }
.initialen { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-fuss); font-weight: 600; }
.konto-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-neben); }
h1 { font-size: var(--fs-titel); font-weight: 600; line-height: 1.25; margin: var(--space-2) 0 var(--space-4); }
h2 { font-size: var(--fs-h2); font-weight: 600; margin: var(--space-5) 0 var(--space-2); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }   /* deckend in Akzentfarbe, mindestens 3 : 1 (Design-Gate Welle 1, B2) */
.panel { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-m); padding: var(--space-4); margin-bottom: var(--space-4); }
.flash { padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); margin-bottom: var(--space-4); }
.flash.ok { background: var(--offen-bg); color: var(--offen); }
.flash.fehler { background: var(--danger-bg); color: var(--danger); }
p.hilfe { color: var(--text-2); font-size: var(--fs-neben); margin: var(--space-1) 0 var(--space-3); max-width: 40rem; }
/* Hilfe auf Abruf (Sitzung 0015, UX-Review Thema 1): Symbol (i) 16 px mit Trefferfläche 44 px, Popover höchstens 320 px,
   am Handy als Blatt von unten mit "Fertig"; im Infomodus steht die Erklärung als p.hilfe am Feld. Folgen und Zustände
   bleiben sichtbar (p.folge, p.zustand). */
button.info { position: relative; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0 var(--space-1) 0 var(--space-2); border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--text-2); font: italic 600 11px/1 var(--font); }
button.info::after { content: ""; position: absolute; inset: -14px; }
button.info:hover, button.info:focus-visible { color: var(--accent); }
.hilfe[popover] { width: max-content; max-width: min(320px, calc(100vw - 2 * var(--space-4))); padding: var(--space-3) var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); font-size: var(--fs-neben); line-height: var(--lh); text-align: left; }
.hilfe[popover]:popover-open { animation: hilfe-auf var(--dauer) ease-out; }
.hilfe[popover] strong { display: block; margin-bottom: var(--space-1); }
.hilfe[popover] button.fertig { display: none; }
@keyframes hilfe-auf { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 600px) {
  .hilfe[popover] { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; padding: var(--space-4) var(--space-4) var(--space-5); font-size: var(--fs-text); }
  .hilfe[popover] button.fertig { display: flex; width: 100%; margin-top: var(--space-4); }
}
.actions > p.hilfe { flex-basis: 100%; margin: 0; }
form.stack .feld:has(+ button.info) { width: calc(100% - 28px); }
p.folge { font-size: var(--fs-neben); margin: var(--space-1) 0 var(--space-3); max-width: 40rem; padding-left: var(--space-2); border-left: 2px solid var(--wartet); }
p.zustand { color: var(--text-2); font-size: var(--fs-neben); margin: var(--space-1) 0 var(--space-3); max-width: 48rem; }
/* Infomodus-Streifen ruhig in --fill und Textfarbe statt Akzent; „Taste i“ nur mit Maus und Tastatur (Design-Gate Welle 2, N8, S11) */
.infostreifen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); background: var(--fill); color: var(--text); border-bottom: 1px solid var(--separator); font-size: var(--fs-neben); }
.infostreifen button.still { min-height: 0; padding: 0 var(--space-2); }
/* „Aus“ und „Alle Erklärungen“ im selben Stil: stille Knöpfe in Akzentfarbe, 600, ohne Unterstreichung (Design-Gate Welle 4, H12) */
.infostreifen a, .infostreifen button.still { color: var(--accent); font-weight: 600; text-decoration: none; }
@media (hover: none) { .nur-hover { display: none; } }
/* Tastenkürzel ohne Tastatur nutzlos: Eintrag im Kontomenü am Handy aus (Design-Gate Welle 4, H10; Markup unverändert) */
@media (hover: none) { a.menue-eintrag[href="#tastenhilfe"] { display: none; } }
@media (max-width: 600px) {
  .infostreifen { flex-wrap: nowrap; white-space: nowrap; }
  .infostreifen > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.info-muster { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; color: var(--text-2); font: italic 600 11px/1 var(--font); }
.hilfe-inhalt ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: 0; list-style: none; }
dl.hilfeliste dt { font-weight: 600; margin-top: var(--space-3); scroll-margin-top: var(--space-6); }
dl.hilfeliste dd { margin: var(--space-1) 0 0; max-width: 48rem; }
/* Bestätigung mit Aktion (Sitzung 0018): Text links, Aktion rechts als Knopf ohne Unterstreichung wie die Gmail-Leiste
   (Design-Gate Welle 2, N9) */
div.flash { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.flash .flash-aktion { margin-left: auto; }
.flash .flash-aktion button { min-height: 24px; padding: 0 var(--space-2); color: inherit; font-weight: 600; text-decoration: none; }
.fliesstext { white-space: pre-wrap; font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; max-width: 48rem; }
.schritte { color: var(--text-2); }
code { font-family: var(--mono); font-size: .9em; }
kbd { display: inline-block; min-width: 1.4em; padding: 0 var(--space-1); border: 1px solid var(--separator); border-bottom-width: 2px; border-radius: var(--radius-s); font: var(--fs-fuss)/1.5 var(--mono); text-align: center; color: var(--text); background: var(--surface); }
.muted { color: var(--text-2); }

/* Formularfeld (UX-Review, Komponente "Formularfeld"): eine Regel für input, select, textarea und Datum überall.
   .feld ist die Klasse im Markup; :where() fängt Felder ohne Klasse mit, ohne die Spezifität zu erhöhen. */
.feld, :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea) {
  height: var(--h-ctrl); padding: 0 var(--space-2); border: 1px solid var(--feld-rand); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text); font: inherit; max-width: 100%; vertical-align: middle;
}
textarea.feld, :where(textarea) { height: auto; min-height: calc(var(--h-ctrl) * 2); padding: var(--space-2); line-height: var(--lh); resize: vertical; field-sizing: content; }   /* wächst mit dem Text, ohne eigenen Bildlauf (Design-Gate P3 W1, F4; Rückfall in app.js) */
select.feld, :where(select) { padding-right: var(--space-1); }
.feld:focus-visible, :where(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
.feld::placeholder, :where(input, textarea)::placeholder { color: var(--text-2); opacity: 1; }
form.stack label { display: block; margin: var(--space-3) 0 var(--space-1); color: var(--text-2); font-size: var(--fs-neben); }
form.stack label.check, label.check { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--text); font-size: inherit; }   /* Kästchen oben bei mehrzeiligem Text (Design-Gate P3 W1, V8) */
label.check > input[type="checkbox"] { flex: none; margin-top: 2px; }
form.stack .feld { width: 100%; max-width: 28rem; }
form.stack textarea.feld { max-width: 40rem; }
/* Zahlenfelder für zwei bis vier Ziffern, Einheit ohne Umbruch, „zuletzt geändert“ als Fußnote darunter (Design-Gate Welle 1, B7) */
.feld[type="number"], form.stack .feld[type="number"] { width: 7rem; }
.einheit { white-space: nowrap; vertical-align: middle; }   /* auf der Mittellinie des Felds (Design-Gate Welle 1, B7-Rest) */
.fussnote { display: block; font-size: var(--fs-fuss); margin-top: var(--space-1); }
form.notizform textarea.feld { max-width: 100%; }
form.inline { display: inline; }
form.filter { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-fill); }

/* Knöpfe (UX-Review, Komponenten-Regeln): gefüllt (Standard, höchstens einer je Bereich), still (Werkzeugleisten und
   Tabellen), Rahmen (Zweitaktion in Formularen, "Abbrechen"), Gefahr (rot; gefüllt nur auf Bestätigungsseiten). */
button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--h-ctrl); padding: 0 var(--space-3); white-space: nowrap; border-radius: var(--radius-s); border: 1px solid var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; vertical-align: middle; transition: background-color var(--dauer) ease-out; }
button.still, a.button.still { background: transparent; border-color: transparent; color: var(--accent); padding: 0 var(--space-2); }
button.still:hover, a.button.still:hover { background: var(--fill); }
button.rahmen, a.button.rahmen { background: var(--surface); border-color: var(--feld-rand); color: var(--accent); }
button.rahmen:hover, a.button.rahmen:hover { background: var(--fill); }
/* Korrekturen Welle 2 (UXP4W2-01): ein summary mit Knopfklasse (Auslöser eines Menüs) hat Knopfmaße wie button, mindestens so
   breit wie hoch (Touch 44 px); vorher galten die Knopfregeln nur für button und a.button und „…“ maß 16 × 16 px */
summary.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--h-ctrl); min-width: var(--h-ctrl); padding: 0 var(--space-3); white-space: nowrap; border-radius: var(--radius-s); border: 1px solid var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); font-weight: 500; cursor: pointer; list-style: none; vertical-align: middle; transition: background-color var(--dauer) ease-out; }
summary.button::-webkit-details-marker { display: none; }
summary.button.still { background: transparent; border-color: transparent; color: var(--accent); padding: 0 var(--space-2); }
summary.button.still:hover { background: var(--fill); }
summary.button.rahmen { background: var(--surface); border-color: var(--feld-rand); color: var(--accent); }
summary.button.rahmen:hover { background: var(--fill); }
button.gefahr, a.button.gefahr { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--on-accent); }
button.still.gefahr, a.button.still.gefahr { background: transparent; border-color: transparent; color: var(--danger); }
button.still.gefahr:hover, a.button.still.gefahr:hover { background: var(--danger-bg); }
button[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; align-items: center; }

/* Tabellen, Kacheln, Etiketten */
/* Keine Fenster im Fenster (Ergänzung 9, Sitzung 0020): waagerechter Querlauf ja, nie ein eigener senkrechter Bildlauf
   (overflow-x: auto allein machte overflow-y zu auto) */
.scroll { overflow-x: auto; overflow-y: hidden; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-neben); }
th, td { text-align: left; padding: var(--row) var(--space-2); border-bottom: 1px solid var(--separator); vertical-align: top; }
th { color: var(--text-2); font-weight: 600; }
details.technik summary { cursor: pointer; color: var(--text-2); }
details.technik code { display: block; margin-top: var(--space-1); white-space: pre-wrap; word-break: break-all; }
.badge { display: inline-block; padding: 0 var(--space-2); border-radius: 999px; font-size: var(--fs-fuss); line-height: 20px; background: var(--fill); color: var(--text); white-space: nowrap; }
.badge.ok { background: var(--offen-bg); color: var(--offen); }
.badge.fehler { background: var(--danger-bg); color: var(--danger); }
/* Status (S3): farbiger Punkt plus Wort */
.badge.status-neu, .badge.status-offen, .badge.status-wartet, .badge.status-erledigt { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
.badge.status-neu::before, .badge.status-offen::before, .badge.status-wartet::before, .badge.status-erledigt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.status-neu { background: var(--neu-bg); color: var(--neu); }
.badge.status-offen { background: var(--offen-bg); color: var(--offen); }
.badge.status-wartet { background: var(--wartet-bg); color: var(--wartet); }
.badge.status-erledigt { background: transparent; color: var(--erledigt); font-weight: 400; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.stat { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); }
.stat .n { font-size: var(--fs-titel); font-weight: 700; }
.login { max-width: 24rem; margin: var(--space-6) auto; }
ul.ordnerwahl { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
ul.ordnerwahl li { padding: var(--row) 0; border-bottom: 1px solid var(--separator); }

/* Posteingang: Filterleiste in einer Zeile (Sitzung 0018): Status als Segment, zwei Chips, Menü „Filter“, gewählte Filter */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); align-items: center; }
/* Gruppen der Filterleiste nur durch Abstand getrennt, kein Trennstrich: ein Strich hing beim Umbruch am Zeilenende (Design-Gate Welle 1, B10) */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-3); border-radius: 999px; background: var(--fill); color: var(--text); text-decoration: none; font-size: var(--fs-neben); white-space: nowrap; }
.chip:hover { background: var(--separator); }
.chip.aktiv { background: var(--accent-fill); color: var(--on-accent); }
.chip.gefiltert { color: var(--accent); font-weight: 600; }
.chip .sym { width: 14px; height: 14px; }

/* Liste: jede Zeile ist genau ein Link; darin keine weiteren Links (UX-Review, Fehler "Link in Link") */
.liste { display: flex; flex-direction: column; border: 1px solid var(--separator); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.konv { position: relative; display: grid; grid-template-columns: 52px 40px 11rem minmax(0, 1fr) auto 8rem 4.5rem; gap: var(--space-1) var(--space-3); padding: var(--pad) var(--space-4); border-bottom: 1px solid var(--separator); color: var(--text); text-decoration: none; align-items: baseline; }
.konv:last-child { border-bottom: none; }
.konv:hover { background: var(--fill); }
.konv.aktiv { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.konv:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.konv.ungelesen .k-subject, .konv.ungelesen .k-from { font-weight: 600; }
.k-wer, .k-group { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-neben); }
/* Symbole auf festen Plätzen (Punkt 8, Stern 16, Klammer 16; Design-Gate Welle 2, N3): nichts springt von Zeile zu Zeile */
.k-status { display: inline-grid; grid-template-columns: 8px 16px 16px; gap: var(--space-1); align-items: center; align-self: center; }
.k-status .badge { vertical-align: 1px; }
.platz { display: inline-flex; align-items: center; justify-content: center; min-width: 0; }
.k-etikett { white-space: nowrap; font-size: var(--fs-neben); }
.k-wer { display: inline-flex; align-items: center; gap: 2px; align-self: center; }
/* Bearbeiter als Initialen-Kreis wie im Kontomenü; der Name steht im title und für Bildschirmleser (.sr) */
.initialen.klein { width: 24px; height: 24px; font-size: 10px; background: var(--fill); color: var(--text); }
.initialen.klein.abwesend { background: transparent; border: 1px dashed var(--text-2); color: var(--text-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Status nur, wenn er etwas sagt: Punkt neu oder ungelesen, Stern, Büroklammer, Uhr (UX-Review „Liste neu“) */
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neu); vertical-align: 1px; }
.wichtig { color: var(--punkt-wartet); }
.k-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-preview { grid-column: 3 / 6; color: var(--text-2); font-size: var(--fs-neben); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-meta { display: inline-flex; gap: var(--space-2); justify-content: flex-end; font-size: var(--fs-neben); white-space: nowrap; }
.k-date { color: var(--text-2); font-size: var(--fs-neben); }
.tags { color: var(--accent); font-size: var(--fs-neben); }
.clip { color: var(--text-2); }
.pager { display: flex; justify-content: space-between; margin: var(--space-4) 0; }
/* Endlos-Scrollen (docs/SPEC/p5/endlos-scroll.md): Wächter, Zustände und Ende am Listenende; ohne Skript steht der Link "Ältere laden" */
.mehr, .mehr-ende, .mehr-grenze { margin: 0; padding: var(--space-4) var(--space-3); text-align: center; color: var(--text-2); font-size: var(--fs-neben); }
.mehr p { margin: 0; }
.mehr-link { display: inline-flex; align-items: center; min-height: 44px; }
html[data-js] .mehr-link { display: none; }
.mehr-nochmal { margin-left: var(--space-2); }
.leer { padding: var(--space-6); text-align: center; }
/* Suchtreffer: eigene Spalten (Absender, Betreff, Status, Nummer und Datum), Vorschau darunter; der Status steht rechts vor
   der Nummer und nimmt ohne Etikett keinen Platz (Design-Gate Welle 4, H11: vorher eine leere Spalte von 7rem links) */
.konv.treffer { grid-template-columns: 12rem minmax(0, 1fr) auto auto; }
.konv.treffer .k-from { grid-column: 1; grid-row: 1; }
.konv.treffer .k-subject { grid-column: 2; grid-row: 1; }
.konv.treffer .k-status { display: inline-flex; grid-template-columns: none; grid-column: 3; grid-row: 1; }
.konv.treffer .k-preview { grid-column: 1 / 4; grid-row: 2; }
.konv.treffer .k-meta { grid-column: 4; grid-row: 1; }

/* Vorgang: drei Spalten */
.dreispaltig { display: grid; grid-template-columns: 20rem minmax(0, 1fr) 20rem; gap: var(--space-4); align-items: start; }
.dreispaltig[data-liste="keine"] { grid-template-columns: minmax(0, 1fr) 20rem; }
.seitenliste-hinweis { margin: 0 0 var(--space-2); font-size: var(--fs-neben); }
/* Karte im Stil von Apple Mail neben dem Vorgang (und am Handy, siehe unten): Absender und Datum, Betreff mit Symbolen,
   Vorschau mit Bearbeiter und Gruppe; der Punkt für neu oder ungelesen steht links im Rand */
.spalte-liste .konv { grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "from status etikett wer date" "subject subject subject group group" "preview preview preview preview preview"; gap: 0 var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) 22px; line-height: 1.3; align-items: center; }
.spalte-liste .konv > .k-from { grid-area: from; }
.spalte-liste .konv > .k-date { grid-area: date; text-align: right; }
.spalte-liste .konv > .k-subject { grid-area: subject; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spalte-liste .konv > .k-subject .tag { height: 16px; }
.spalte-liste .konv > .k-status { grid-area: status; display: inline-flex; gap: 2px; }
.spalte-liste .konv > .k-status .platz:empty { display: none; }
.spalte-liste .konv > .k-etikett { grid-area: etikett; }
.spalte-liste .konv > .k-preview { grid-area: preview; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.25; }
.spalte-liste .konv > .k-wer { grid-area: wer; }
.spalte-liste .konv > .k-wer .liest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.spalte-liste .konv > .k-group { grid-area: group; font-size: var(--fs-fuss); }
.spalte-liste .konv .k-status .punkt { position: absolute; left: 8px; top: calc(var(--space-2) + 6px); }
.spalte-konv h1 { margin: var(--space-2) 0 var(--space-1); }
/* Vorgang neu geordnet, Mail zuerst (Sitzung 0016, UX-Review „Vorgangsseite neu geordnet“): Werkzeugleiste über der Mail
   (sticky, Symbol 18 px, Wort ab 1200 px), Metadaten in einer Zeile, Nachrichten als aufklappbare Karten (die neueste
   offen), rechte Spalte mit Reitern; am Handy die Werkzeugleiste als Leiste unten (siehe @media 900 px) */
.werkzeugleiste { position: sticky; top: 0; z-index: 20; display: flex; gap: var(--space-1); align-items: center; flex-wrap: nowrap; min-height: 44px; padding: var(--space-1) var(--space-2); margin: 0 0 var(--space-1); background: var(--surface-2); border-bottom: 1px solid var(--separator); border-radius: var(--radius-s) var(--radius-s) 0 0; font-size: var(--fs-neben); }
.werkzeugleiste > a:first-child { margin-right: var(--space-2); white-space: nowrap; text-decoration: none; }
.werkzeugleiste form.inline { display: inline-flex; }
.werkzeugleiste .sym { width: 18px; height: 18px; }
.werkzeugleiste summary .sym-runter { width: 12px; height: 12px; }
.wz-knopf { min-height: var(--h-ctrl); padding: 0 var(--space-2); border-radius: var(--radius-s); color: var(--accent); font-weight: 500; }
details.wz > summary.wz-knopf:hover, details.wz[open] > summary.wz-knopf { background: var(--fill); }
button.wz-knopf.ist-wichtig { color: var(--punkt-wartet); }
/* Wörter in der Werkzeugleiste nach der Breite der Mittelspalte, nicht des Fensters (Design-Gate Welle 3, K2): die Leiste
   bricht nie um; bei wenig Platz behalten Erledigen und Wiedervorlage ihr Wort. Am Handy (Leiste unten) nur Symbole. */
.wz-wort { display: none; }
@media (min-width: 901px) { .spalte-konv { container-type: inline-size; } }
@container (min-width: 480px) { [data-werkzeug="erledigen"] .wz-wort, [data-menue="wiedervorlage"] .wz-wort { display: inline; } }
@container (min-width: 700px) { .wz-wort { display: inline; } }
details.wz.rechts { margin-left: auto; }
details.wz.rechts .menue-blatt { left: auto; right: 0; }
details[data-menue="wiedervorlage"] .menue-blatt, details[data-menue="mehr"] .menue-blatt { min-width: 19rem; }
.mit-haken .menue-eintrag { padding-left: 28px; }
.menue-felder { display: grid; gap: var(--space-1); padding: var(--space-1) var(--space-2) var(--space-2); }
.menue-felder label { color: var(--text-2); font-size: var(--fs-fuss); }
.menue-felder .feld { width: 100%; }
.menue-felder button { justify-self: start; }
.menue-suche { width: calc(100% - 2 * var(--space-2)); margin: 0 var(--space-2) var(--space-1); }
/* (i) direkt hinter der Beschriftung, zu der es gehört: Überschrift eines Menüabschnitts, Feld, Seitenüberschrift
   (Design-Gate Welle 2, N1; titelMitHilfe() und feldKopf() in html.ts); im Infomodus steht der Absatz darunter */
div.menue-titel, .feld-kopf, .kopf-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); }
/* hinter einem Knopf: 8 px Lücke plus 8 px Rand des (i) sind mehr als dessen Trefferfläche (14 px über den Rand), sie liegt
   nicht über dem Knopf (Reviewer Welle 4, E6; Rest von C5) */
.feld-kopf { column-gap: var(--space-2); }
/* Baustein (i) neben der Beschriftung: das (i) steht nie allein in einer Zeile. Ohne Absatz des Infomodus bricht die Reihe
   nicht um (Design-Gate Welle 4, H7). Das (i) steht mittig zur Zeile, nicht auf der Grundlinie: die liegt im Kreis tief, der
   Kreis hing 5 bis 9 px unter der Zeile (Abschluss-Design-Gate, F2, F6) */
:is(div.menue-titel, .feld-kopf, .kopf-info):not(:has(> p.hilfe)) { flex-wrap: nowrap; }
:is(div.menue-titel, .feld-kopf, .kopf-info) > button.info { flex: none; align-self: center; }
form.suche > button.info { align-self: center; }
:is(div.menue-titel, .feld-kopf, .kopf-info) > p.hilfe { flex-basis: 100%; margin: 0 0 var(--space-1); font-weight: 400; }
/* Abstand als Innenrand der Reihe statt als Rand des label: so ist die Mitte der Reihe die Mitte der Beschriftung (F2) */
form.stack .feld-kopf { padding: var(--space-3) 0 var(--space-1); }
form.stack .feld-kopf label { margin: 0; }
/* Baustein (i) am letzten Wort: Überschriften und Kästchen-Beschriftungen können umbrechen; als Kasten im Flex wären sie so
   breit wie die Zeile und das (i) stünde bis zu 276 px vom letzten Wort entfernt am rechten Rand (Abschluss-Design-Gate, F3).
   Deshalb fließen sie als Text, und das (i) folgt direkt dem letzten Wort. Es nimmt beim Umbruch keinen Platz (Rand rechts
   -24 px, dafür 24 px Innenrand der Reihe): so rutscht es nie allein in eine neue Zeile. Kästchen mit hängendem Einzug. */
.kopf-info, .feld-kopf:has(> label.check) { display: block; padding-right: 24px; }
.kopf-info > :is(h1, h2, h3), form.stack .feld-kopf > label.check, .feld-kopf > label.check { display: inline; }
.kopf-info > button.info, .feld-kopf > label.check + button.info { display: inline-flex; vertical-align: middle; margin-right: -24px; }
.kopf-info > button.info { top: -2px; }   /* Mitte der Großbuchstaben statt der Kleinbuchstaben bei Überschriften */
.kopf-info:has(> h1) { font-size: var(--fs-titel); line-height: 1.25; }
.kopf-info:has(> h2) { font-size: var(--fs-h2); }
.feld-kopf:has(> label.check) { padding-left: calc(16px + var(--space-2)); text-indent: calc(-16px - var(--space-2)); }
.feld-kopf > label.check > input[type="checkbox"] { width: 16px; height: 16px; margin: 0 var(--space-2) 0 0; vertical-align: -2px; }
:is(.kopf-info, .feld-kopf) > :is(p.hilfe, .hilfe[popover]) { text-indent: 0; line-height: var(--lh); }
.kopf-info { margin: var(--space-4) 0 var(--space-2); }
.kopf-info > :is(h1, h2, h3) { margin: 0; }
.kopf-info:has(> h1) { margin: var(--space-2) 0 var(--space-4); }
.kopf-info:has(> h2) { margin: var(--space-5) 0 var(--space-2); }
.kopf-info:has(> h3) { margin: var(--space-4) 0 var(--space-2); }
.menue-titel.blatt-titel { color: var(--text); font-size: var(--fs-neben); }
.menue-blatt p.hilfe, .menue-blatt p.folge, .menue-blatt p.muted { margin: var(--space-1) var(--space-2); }
.menue-blatt details.vorschlag > summary { list-style: none; cursor: pointer; }
.menue-blatt details.vorschlag > summary::-webkit-details-marker { display: none; }
.tag-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tag, var(--text-2)); }
/* Metadaten in einer Zeile: Status, Nummer mit Details, Gruppe, Bearbeiter (Menü), Tags, Wiedervorlage */
.meta-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--fs-neben); }
.meta-zeile .nummer { display: inline-flex; align-items: center; color: var(--text); font-variant-numeric: tabular-nums; }
.bearbeiter-zeile, .tag-zeile { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.tag-zeile:empty { display: none; }
.meta-knopf { min-height: 24px; padding: 0 var(--space-1); border-radius: var(--radius-s); color: var(--text); }
.meta-knopf:hover, details[open] > .meta-knopf { background: var(--fill); }
.meta-knopf .sym { width: 14px; height: 14px; color: var(--text-2); }
.wv-chip { max-width: min(24rem, 100%); min-width: 0; padding-right: var(--space-1); color: var(--wartet); }
.wv-chip.faellig { color: var(--danger); }
/* nie breiter als die Zeile: der Zusage-Text wird gekürzt, ganz steht er im title (UXP3W3-04) */
.wv-chip .wv-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wv-chip > :not(.wv-text) { flex: none; }
.wv-chip form.entfernen { display: inline-flex; }
.wv-chip form.entfernen button { min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--text-2); }
.wv-chip form.entfernen button:hover { color: var(--danger); }
.vorgangsdetails dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); margin: 0; }
.vorgangsdetails dt { color: var(--text-2); }
.vorgangsdetails dd { margin: 0; overflow-wrap: anywhere; }
/* Nachrichten: eine Karte je Nachricht, ältere eingeklappt auf eine Zeile (Absender, Anfang, Datum) */
.nachricht { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-m); padding: var(--pad) var(--space-4); margin-bottom: var(--space-2); }
.nachricht.aus { border-left: 3px solid var(--accent); }
.nachricht-kopf { display: flex; align-items: baseline; gap: var(--space-2); list-style: none; cursor: pointer; font-size: var(--fs-neben); }
.nachricht-kopf::-webkit-details-marker { display: none; }
.nachricht-kopf .von { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.nachricht-kopf .anfang { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details[open] > .nachricht-kopf .anfang { display: none; }   /* nicht nur unsichtbar: sonst bleibt die lange Zeile im Raster und die Seite läuft am Handy über (Design-Gate Welle 3, K1) */
details[open] > .nachricht-kopf .zeit { margin-left: auto; }
.nachricht-kopf .zeit { flex: none; white-space: nowrap; }
/* langer Absender kürzt sich, der Chip „automatisch“ bleibt ganz in der Karte (Design-Gate P5, UXP5X-04) */
.nachricht-kopf .von { flex: 0 1 auto; min-width: 0; }
.nachricht-kopf > .badge { flex: none; }
.nachricht-kopf .klapp { align-self: center; width: 12px; height: 12px; color: var(--text-2); transform: rotate(-90deg); transition: transform var(--dauer) ease-out; }
details[open] > .nachricht-kopf .klapp { transform: none; }
/* Adresszeile in einer Zeile mit Auslassung, volle Adressen im title (Design-Gate Welle 3, K5) */
.nachricht-adressen { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0; font-size: var(--fs-fuss); }
.nachricht-adressen .adressen { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nachricht-adressen .neues-fenster { flex: none; white-space: nowrap; }
.nachricht .auswahl { color: var(--text-2); }
.nachricht .betreff { font-weight: 600; margin: var(--space-1) 0; }
.hinweis { background: var(--wartet-bg); color: var(--wartet); padding: var(--space-1) var(--space-3); border-radius: var(--radius-s); font-size: var(--fs-neben); }
/* Zuordnungshinweis in einer Zeile: Text links mit Auslassung, Link rechts (Design-Gate Welle 3, K6) */
.vorschlag-leiste { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-2); }
.vorschlag-leiste .vorschlag-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlag-text .kurz { display: none; }   /* kurzer Satz nur am Handy (Design-Gate Welle 4, H4) */
.vorschlag-leiste .button { flex: none; min-height: 24px; margin-left: auto; }
/* Hinweis zu externen Bildern als schmale Leiste über der Mail mit Knopf (UX-Review) */
/* Bilderleiste einzeilig wie bei Gmail: „Externe Bilder blockiert“ links, „Bilder laden“ rechts; 13 px --text-2 auf der
   Fläche der Karte (über 4,5 : 1; Design-Gate Welle 3, K3 und K8) */
.bilderleiste { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0; padding: 2px var(--space-2); border: 1px solid var(--separator); border-radius: var(--radius-s); background: var(--surface); color: var(--text-2); font-size: var(--fs-neben); white-space: nowrap; }
.bilderleiste > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bilderleiste .button { min-height: 24px; margin-left: auto; }
pre.mailtext { white-space: pre-wrap; word-wrap: break-word; font: inherit; margin: var(--space-1) 0; }
/* Segmentschalter: Grund --fill, gewähltes Segment abgehoben wie bei macOS (hell weiß, dunkel grau; Design-Gate Welle 1, B5) */
.schalter { display: inline-flex; padding: 2px; border-radius: var(--radius-s); background: var(--fill); }
/* der Status in der Filterleiste (Sitzung 0018) ist ein Segmentschalter aus Links; gleiche Gestalt wie die Knöpfe */
.schalter button, .schalter a { display: inline-flex; align-items: center; min-height: calc(var(--h-ctrl) - 6px); border: 0; border-radius: calc(var(--radius-s) - 2px); background: transparent; color: var(--text); padding: 0 var(--space-3); font-weight: 400; text-decoration: none; white-space: nowrap; }
.schalter a:hover { background: var(--fill); }
.schalter button.aktiv, .schalter a.aktiv { background: var(--segment-aktiv); color: var(--text); font-weight: 600; box-shadow: var(--shadow-segment); }
.ansicht-html { margin: var(--space-1) 0; }
/* feste Rückfallhöhe ohne Skript; mit Skript setzt app.js die Höhe des Inhalts (Höhen-Skript, Sitzung 0020): die Mail steht
   in voller Länge ohne eigene Bildlaufleiste */
.ansicht-html iframe { width: 100%; height: max(24rem, calc(100vh - 220px)); border: 1px solid var(--separator); border-radius: var(--radius-s); background: #fff; }
/* Einzelansicht einer HTML-Mail („In neuem Fenster“): Rückweg oben wie „‹ Zur Liste“ als stiller Knopf mit 44 px, darunter
   der Betreff als Überschrift (Abschluss-Design-Gate, F5) */
.rueckweg-zeile { margin: 0; }
a.button.still.rueckweg { min-height: 44px; margin-left: calc(-1 * var(--space-2)); }
h1.rahmen-titel { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
ul.anhaenge { list-style: none; padding: var(--space-1) 0 0; margin: var(--space-1) 0 0; border-top: 1px dashed var(--separator); display: flex; gap: var(--space-1) var(--space-4); flex-wrap: wrap; font-size: var(--fs-neben); }
ul.anhaenge li.gesperrt { color: var(--text-2); }
/* Rechte Spalte: Reiter Notizen | Verlauf (Katalog E4) über zwei Optionsfelder und CSS, ohne Skript */
.reiter { display: flex; padding: 2px; margin-bottom: var(--space-3); border-radius: var(--radius-s); background: var(--fill); }
.reiter-wahl { position: absolute; width: 1px; height: 1px; opacity: 0; }
.reiter label { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: calc(var(--h-ctrl) - 4px); border-radius: calc(var(--radius-s) - 2px); color: var(--text); cursor: pointer; font-size: var(--fs-neben); }
.reiter-wahl:checked + label { background: var(--segment-aktiv); font-weight: 600; box-shadow: var(--shadow-segment); }
.reiter-wahl:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.reiter .zahl { color: var(--text-2); font-weight: 400; }
.reiter-inhalt[data-reiter="verlauf"] { display: none; }
.spalte-verlauf:has(.reiter-wahl[value="verlauf"]:checked) .reiter-inhalt[data-reiter="verlauf"] { display: block; }
.spalte-verlauf:has(.reiter-wahl[value="verlauf"]:checked) .reiter-inhalt[data-reiter="notizen"] { display: none; }
ul.verlauf { list-style: none; padding: 0; margin: 0; font-size: var(--fs-neben); }
ul.verlauf li { padding: var(--row) 0; border-bottom: 1px solid var(--separator); }
/* Warnzeile ruhig: Punkt am Rand statt brauner Fläche (UX-Review, dunkler Modus) */
ul.verlauf li.warn { color: var(--text); box-shadow: inset 3px 0 0 var(--wartet); padding-left: var(--space-2); }
ul.verlauf .zeit { color: var(--text-2); }

/* Handy: eine Spalte nach der anderen */
@media (max-width: 900px) {
  /* minmax(0, 1fr): die Spalte darf schmaler als ihr Inhalt werden, die Seite läuft nicht über (Design-Gate Welle 3, K1) */
  .dreispaltig, .dreispaltig[data-liste="keine"] { grid-template-columns: minmax(0, 1fr); }
  .spalte-liste { display: none; }
  /* Liste als Karte wie neben dem Vorgang; die Zeile steht seit 0026 in einem Rahmen (.zeile) mit Kästchen und Knöpfen */
  /* Baustein Handy: Karte — Listenzeile wie Apple Mail (Absender und Datum, Betreff einzeilig, Vorschau zwei Zeilen) */
  .zeile > .konv { grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "from status etikett wer date" "subject subject subject group group" "preview preview preview preview preview"; gap: 0 var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) calc(22px + var(--kasten)); line-height: 1.3; align-items: center; }
  .zeile > .konv > .k-from { grid-area: from; }
  .zeile > .konv > .k-date { grid-area: date; text-align: right; }
  .zeile > .konv > .k-subject { grid-area: subject; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zeile > .konv > .k-subject .tag { height: 16px; }
  .zeile > .konv > .k-status { grid-area: status; display: inline-flex; gap: 2px; }
  .zeile > .konv > .k-status .platz:empty { display: none; }
  .zeile > .konv > .k-etikett { grid-area: etikett; }
  .zeile > .konv > .k-preview { grid-area: preview; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.25; }
  .zeile > .konv > .k-wer { grid-area: wer; }
  .zeile > .konv > .k-wer .liest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .zeile > .konv > .k-group { grid-area: group; font-size: var(--fs-fuss); }
  .zeile > .konv .k-status .punkt { position: absolute; left: calc(8px + var(--kasten)); top: calc(var(--space-2) + 6px); }
  /* Suchtreffer als gleiche Karte: Absender, Status, Nummer und Datum; Betreff; Ausschnitt */
  .liste > .konv.treffer { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "from status meta" "subject subject subject" "preview preview preview"; gap: 0 var(--space-2); padding: var(--space-2) var(--space-3); line-height: 1.3; }
  .konv.treffer > .k-from { grid-area: from; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .konv.treffer > .k-status { grid-area: status; display: inline-flex; }
  .konv.treffer > .k-meta { grid-area: meta; }
  .konv.treffer > .k-subject { grid-area: subject; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .konv.treffer > .k-preview { grid-area: preview; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  /* Kopfzeile: erste Zeile Marke, Bereiche und Konto (nur Initialen), darunter die Suche über die ganze Breite */
  nav.top { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  nav.top form.nr { order: 9; flex: 1 1 100%; }
  .konto-name { display: none; }
  /* Menüs als Blatt am unteren Rand, damit nichts über den Bildschirm hinausragt */
  .menue-blatt, details.konto .menue-blatt { position: fixed; top: auto; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); min-width: 0; max-width: none; }
  .ansicht-html iframe { height: max(20rem, calc(100vh - 200px)); }
  /* Mail randlos über die volle Kartenbreite wie Apple Mail und Gmail: ohne Innenrahmen, der Innenabstand der Karte entfällt
     (das Mail-Dokument selbst hat am Handy 8 px); vorher doppelt eingerückt, 296 von 390 px (Design-Gate P5, UXP5X-02) */
  .nachricht .ansicht-html { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
  .nachricht .ansicht-html iframe { border: 0; border-radius: 0; }
  /* Vorgang am Handy (Grundlage für 0019): Werkzeugleiste als Leiste unten, nur Symbole; Menüs als Blatt darüber */
  .werkzeugleiste { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 35; flex-wrap: nowrap; justify-content: space-around; min-height: 56px; margin: 0; border-top: 1px solid var(--separator); border-bottom: 0; border-radius: 0; }
  .werkzeugleiste > a:first-child { margin: 0; font-size: 0; }
  .werkzeugleiste > a:first-child::before { content: "\2039"; padding: 0 var(--space-2); font-size: 24px; }
  details.wz.rechts { margin-left: 0; }
  .werkzeugleiste .menue-blatt { bottom: 64px; }
  main:has(.werkzeugleiste) { padding-bottom: 80px; }
}

/* Suche (Sitzung 0007) */
form.suche { display: flex; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); }
form.suche input.feld { flex: 1; min-width: 0; font-size: var(--fs-h2); }   /* min-width 0: bei 320 px kein Überlauf (UXP4W1-03) */
/* ohne Polster: es wirkte wie ein Leerzeichen („Honig preise“); der Schatten gibt die Fläche (UXP4W1-08) */
mark { background: var(--wartet-bg); color: inherit; padding: 0; border-radius: calc(var(--radius-s) / 2); box-shadow: 0 0 0 2px var(--wartet-bg); }
.konv.treffer .k-preview { white-space: normal; }
/* Anhang-Funde unter einem Suchtreffer (Sitzung 0039): still in der Nebenschrift, je Fund höchstens zwei Zeilen; die Zeile
   darüber verliert ihre Trennlinie, damit Treffer und Fund als eine Einheit lesen; Darüberfahren färbt beide */
.liste > .konv.treffer:has(+ .fundorte) { border-bottom: none; padding-bottom: var(--space-1); }
.fundorte { padding: 0 var(--space-4) var(--pad); border-bottom: 1px solid var(--separator); color: var(--text-2); font-size: var(--fs-neben); }
.fundorte:last-child { border-bottom: none; }
.konv.treffer:hover + .fundorte, .konv.treffer:has(+ .fundorte:hover) { background: var(--fill); }
.fundort { margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; overflow-wrap: anywhere; }
.fundort + .fundort { margin-top: 2px; }
.fundort > .sym { width: 14px; height: 14px; margin-right: var(--space-1); vertical-align: -2px; }
.fundort > a { color: var(--accent); text-decoration: none; }
.fundort > a:hover { text-decoration: underline; }
/* Suchort: am Rechner der Chip „Nur in Anhängen“, das Blatt „Filter“ nur am Handy (dort fällt der Chip weg, .nur-breit) */
.chips > details.suchfilter { display: none; }
@media screen and (max-width: 900px) { .fundorte { padding: 0 var(--space-3) var(--space-2); } }
@media screen and (max-width: 600px) {
  .chips > details.suchfilter { display: block; flex: none; }
  details.suchfilter > summary { min-height: var(--h-touch); }
  details.suchfilter > summary .sym-runter { display: none; }
  details.suchfilter > summary.gefiltert { background: var(--accent-fill); color: var(--on-accent); }
}
/* Zuletzt gesucht und gespeicherte Suchen (Sitzung 0040, SPEC p4/0040.md §3, §4, §6): still wie Menüeinträge, ohne eigene
   Bildlaufleiste (höchstens zehn Zeilen, keine Höhenbegrenzung); unter dem Suchfeld der Kopfzeile als Blatt über der Seite */
/* Baustein Handy: Zuletzt gesucht — Liste unter dem Suchfeld, Zeilen und × 44 px, ohne Höhenbegrenzung */
.zuletzt, .gespeichert-abschnitt { margin: var(--space-1) 0 var(--space-4); }
.zuletzt[hidden] { display: none; }
.zuletzt-kopf { display: flex; align-items: center; gap: var(--space-1); min-height: var(--h-ctrl); }
.zuletzt-titel { margin: 0 0 0 var(--space-2); color: var(--text-2); font-size: var(--fs-fuss); font-weight: 600; }
.zuletzt-kopf > form, .zuletzt-kopf > a.button { margin: 0 0 0 auto; }
.zuletzt-liste { list-style: none; margin: 0; padding: 0; }
.zuletzt-zeile { display: flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-s); }
.zuletzt-zeile:hover { background: var(--fill); }
.zuletzt-zeile[hidden] { display: none; }
.zuletzt-eintrag { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; min-height: var(--h-ctrl); padding: 0 var(--space-2); color: var(--text); text-decoration: none; }
.zuletzt-eintrag > .sym { flex: none; color: var(--text-2); }
.zuletzt-wort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zuletzt-eintrag > .muted { flex: none; white-space: nowrap; font-size: var(--fs-neben); }
.zuletzt-weg { flex: none; margin: 0; }
.zuletzt-weg > button { min-width: var(--h-ctrl); padding: 0; color: var(--text-2); }
.zuletzt-schwebend { position: absolute; z-index: 40; top: calc(100% + var(--space-1)); left: 0; right: 0; min-width: 18rem; margin: 0; padding: var(--space-1); background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); font-size: var(--fs-text); }
.gs-aktiv { margin: 0 0 var(--space-2); }
.gs-aktiv > .sym, .zuletzt-eintrag > .sym-stern { width: 16px; height: 16px; }
.gs-aktiv > .sym { margin-right: var(--space-1); vertical-align: -3px; }
.gs-name-label { display: block; margin: var(--space-1) var(--space-2) 2px; color: var(--text-2); font-size: var(--fs-fuss); }
.menue-hinweis { margin: var(--space-1) var(--space-2); font-size: var(--fs-neben); white-space: normal; }
details.gespeichert-menue .menue-eintrag { padding-left: 28px; }   /* Platz für das Häkchen der gezeigten Suche */
.gs-liste { list-style: none; margin: 0; padding: 0; }
.gs-zeile { display: flex; align-items: center; gap: var(--space-3); min-height: var(--h-ctrl); padding: var(--space-2) 0; border-bottom: 1px solid var(--separator); }
.gs-text { flex: 1 1 auto; min-width: 0; }
.gs-name { color: var(--accent); font-weight: 600; text-decoration: none; }
.gs-suche { display: block; font-size: var(--fs-neben); overflow-wrap: anywhere; }
.gs-mehr .menue-blatt { left: auto; right: 0; }
@media screen and (max-width: 900px) {
  .zuletzt-kopf, .zuletzt-eintrag { min-height: var(--h-touch); }
  .zuletzt-weg > button { min-width: var(--h-touch); min-height: var(--h-touch); }
  details.gs-mehr > summary { min-height: var(--h-touch); }
}

/* Teamfunktionen (Sitzung 0009): Bearbeiter, Notizen */
.nachricht.notiz { background: var(--fill); border-left: 3px dashed var(--text-2); }
.k-meta .wer { font-weight: 500; }
ul.notizen { list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--fs-neben); }
ul.notizen li { padding: var(--row) 0; border-bottom: 1px solid var(--separator); white-space: pre-wrap; word-wrap: break-word; }

/* Tags (Sitzung 0010, UX-Review Entscheidung 4): neutraler Chip mit Farbpunkt; Text in normaler Textfarbe besteht AA
   in beiden Modi, die feste Farbe (D7) trägt nur der Punkt. Farben als Klassen, weil die CSP keine Inline-Stile erlaubt. */
.tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 var(--space-2); border-radius: 999px; font-size: var(--fs-fuss); line-height: 1; color: var(--text); background: var(--fill); white-space: nowrap; vertical-align: middle; font-weight: 400; }
.tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tag, #6b7280); }
.tag-2563eb { --tag: #2563eb; } .tag-dc2626 { --tag: #dc2626; } .tag-7c3aed { --tag: #7c3aed; } .tag-0d9488 { --tag: #0d9488; }
.tag-d97706 { --tag: #d97706; } .tag-b45309 { --tag: #b45309; } .tag-4b5563 { --tag: #4b5563; } .tag-9ca3af { --tag: #9ca3af; }
.tag-6b7280 { --tag: #6b7280; } .tag-ea580c { --tag: #ea580c; } .tag-16a34a { --tag: #16a34a; } .tag-db2777 { --tag: #db2777; }
.tag-aus { --tag: transparent; color: var(--text-2); background: transparent; border: 1px dashed var(--separator); }
.tag-aus::before { border: 1px dashed var(--text-2); }
.tag a { color: inherit; text-decoration: none; }
.tag a:hover { text-decoration: underline; }
.tag form.entfernen { display: inline-flex; }
/* Kreuz „Tag entfernen“: Trefferfläche 24 × 24 px (Handy 32 × 32, WCAG 2.5.8), der Chip bleibt 20 px hoch (Design-Gate Welle 1, B3) */
.tag form.entfernen button { min-width: 24px; min-height: 24px; margin: -2px calc(-1 * var(--space-2)) -2px calc(-1 * var(--space-1)); padding: 0; border-radius: 999px; background: none; border: 0; color: var(--text-2); cursor: pointer; font: inherit; }
.tag form.entfernen button:hover { color: var(--danger); }
@media (max-width: 900px) { .tag form.entfernen button { min-width: 32px; min-height: 32px; margin-block: -6px; } }
.tag form.entfernen button .sym { width: 12px; height: 12px; }

/* Wiedervorlage und Fälligkeit (Sitzung 0011) */
.badge.faellig { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.wv { color: var(--wartet); white-space: nowrap; font-size: var(--fs-neben); }

/* Live, Präsenz, Tastenkürzel, Push (Sitzung 0012) */
.liest { color: var(--text-2); font-size: var(--fs-neben); white-space: nowrap; }
.liest .sym, .sym.liest { width: 14px; height: 14px; margin-right: 2px; }
.tastenhilfe { position: fixed; inset: auto var(--space-4) var(--space-4) auto; max-width: 22rem; background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-l); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-pop); z-index: 50; }
.tastenhilfe h2 { margin-top: 0; font-size: var(--fs-text); }
.tastenhilfe dl { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-1) var(--space-2); margin: 0; }
.tastenhilfe dt { font-family: var(--mono); background: var(--fill); border-radius: var(--radius-s); text-align: center; }
.tastenhilfe dd { margin: 0; }
.anleitung { margin-top: var(--space-4); }
.anleitung summary { cursor: pointer; }

/* ===== Sitzung 0019: Handy und Verwaltung (SPEC docs/SPEC/ux/0019.md §2, §3) ===== */
.lupe, .nur-handy, .menue-fertig { display: none; }
/* Navigation der Verwaltung oben (Design-Gate Welle 2, N10); bis 1180 px statt der Zeile die Auswahl (unten; 901 bis 1180 px
   seit den Korrekturen Phase 4 Welle 2) */
.verwaltung-nav { display: flex; gap: var(--space-1); overflow-x: auto; margin: 0 0 var(--space-3); padding-bottom: var(--space-1); border-bottom: 1px solid var(--separator); scrollbar-width: thin; overflow-y: hidden; }
.verwaltung-nav a { flex: none; color: var(--text); font-weight: 400; }
.verwaltung-nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.verwaltung-nav > details.verwaltung-wahl { display: none; }
/* über 900 px bricht die Reiterzeile um, statt einen Reiter abzuschneiden (UXP4W1-10, 11 Reiter bei 1024 px) */
@media screen and (min-width: 901px) {
  .verwaltung-nav { flex-wrap: wrap; overflow: visible; }
}
@media screen and (max-width: 900px) {
  /* Baustein Handy: Verwaltungsnavigation als Auswahl — „Verwaltung › Seite“ öffnet ein Blatt mit allen Seiten, nie seitlich
     wischen (UXP3W3-16) */
  .verwaltung-nav { overflow: visible; }
  .verwaltung-nav > a { display: none; }
  .verwaltung-nav > details.verwaltung-wahl { display: block; }
  .verwaltung-wahl > summary, .verwaltung-wahl > summary.button.still { min-height: var(--h-touch); padding: 0; color: var(--text); font-weight: 600; white-space: normal; justify-content: flex-start; }
  .verwaltung-wahl > summary .muted { font-weight: 400; }
}
/* Korrekturen Welle 2 (UXP4W2-14, OFFEN A36): auch am Rechner bis 1180 px das Blatt „Verwaltung › Seite“ statt der Zeile
   (zwölf Seiten brachen bei 1024 px in zwei Zeilen um); das Blatt hängt hier als Popover unter der Auswahl */
@media screen and (min-width: 901px) and (max-width: 1180px) {
  .verwaltung-nav > a { display: none; }
  .verwaltung-nav > details.verwaltung-wahl { display: block; }
  .verwaltung-wahl > summary, .verwaltung-wahl > summary.button.still { padding: 0; color: var(--text); font-weight: 600; white-space: normal; justify-content: flex-start; }
  .verwaltung-wahl > summary .muted { font-weight: 400; }
}
/* Karte mit Kopf: Überschrift links, Hauptaktion rechts („Postfach hinzufügen“ in der Postfach-Karte) */
.grid + .panel.karte { margin-top: var(--space-4); }   /* Abstand zu den Kennzahlen (Design-Gate Welle 4, H9) */
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.karte-kopf .kopf-info { margin: 0; }
.panel.karte .scroll { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
/* Benutzer-Aktionen im Menü „…“ */
details.benutzer-aktionen .menue-blatt { left: auto; right: 0; min-width: 17rem; }
details.benutzer-aktionen .menue-blatt form.inline, details.benutzer-aktionen .menue-blatt > a.button { display: flex; margin: 0 0 var(--space-1); }
details.benutzer-aktionen .menue-blatt button, details.benutzer-aktionen .menue-blatt > a.button { justify-content: flex-start; width: 100%; }
details.benutzer-aktionen .menue-felder { grid-template-columns: minmax(0, 1fr); }
/* das Blatt „…“ darf über die Tabelle hinausragen: overflow-x: auto schnitte es am unteren Rand ab (Reviewer Welle 4, E2);
   die Benutzertabelle braucht keinen Querlauf, am Handy ist sie eine Karte */
.scroll:has(details.benutzer-aktionen) { overflow: visible; }
select.feld.stunde, form.stack select.feld.stunde, select.feld.schmal, form.stack select.feld.schmal { width: 7rem; }
/* Richtlinie mit echten Überschriften */
.richtlinie h2 { margin: var(--space-4) 0 var(--space-1); }
.richtlinie h2:first-child { margin-top: 0; }
.richtlinie p { white-space: pre-wrap; max-width: 48rem; margin: 0 0 var(--space-3); line-height: 1.5; }   /* pre-wrap: Einrückungen in Listen bleiben (Reviewer Welle 4, E10) */
/* Dokumenttitel als Untertitel unter der Seitenüberschrift, nicht gleichrangig zu den Abschnitten (Tester Welle 4, NPW4-2) */
.richtlinie p.untertitel { margin: 0 0 var(--space-4); color: var(--text-2); font-size: var(--fs-h2); white-space: normal; }
/* Bestätigung blendet sich am Handy nach 8 Sekunden aus (ohne Skript) */
@keyframes flash-weg { to { opacity: 0; visibility: hidden; } }

@media (max-width: 900px) {
  /* Baustein Handy: Blatt — Menüs von unten über die volle Breite, Grund abgedunkelt, „Fertig“ 44 px, Safe Area */
  /* Tippen auf den Grund schließt; gilt auch für „Mehr“ (Design-Gate Welle 2, N4; Welle 3, Hinweis 4; Reviewer Welle 3, D5) */
  details.menue .menue-blatt, details.konto .menue-blatt, details.wz.rechts .menue-blatt, details[data-menue] .menue-blatt, details.benutzer-aktionen .menue-blatt { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-width: 0; max-width: none; max-height: 75vh; border-radius: var(--radius-l) var(--radius-l) 0 0; padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); }
  details.menue[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 39; background: var(--backdrop); cursor: default; }
  .menue-fertig { display: flex; width: 100%; min-height: 44px; margin-top: var(--space-2); }
  /* offenes Kontomenü über der Leiste unten: nav.top ist ein eigener Stapelkontext (z 30), die Leiste liegt bei 35 (Reviewer Welle 4, E1) */
  nav.top:has(details.konto[open]) { z-index: 50; }
  /* Baustein Handy: Leiste unten — Werkzeugleiste mit 44 × 44 px Trefferflächen, nur Symbole (22 px), über dem Home-Balken */
  .werkzeugleiste { padding-bottom: env(safe-area-inset-bottom); min-height: calc(56px + env(safe-area-inset-bottom)); }
  /* nur die Knöpfe der Leiste selbst, nicht die Einträge und (i) in ihren Blättern (Design-Gate Welle 4, H1) */
  .werkzeugleiste > a, .werkzeugleiste > form > button, .werkzeugleiste > details > summary { min-width: 44px; min-height: 44px; justify-content: center; }
  .werkzeugleiste .sym { width: 22px; height: 22px; }
  .werkzeugleiste summary .sym-runter { display: none; }
  .werkzeugleiste details.menue .menue-blatt, .werkzeugleiste details.wz.rechts .menue-blatt, .werkzeugleiste details[data-menue] .menue-blatt { bottom: calc(56px + env(safe-area-inset-bottom)); }
  main:has(.werkzeugleiste) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* Metadatenzeile am Handy in einer Zeile: die Gruppe steht in „Details“ (Design-Gate Welle 3, Hinweis 6); Sprung zu den Notizen */
  .meta-zeile .gruppe { display: none; }
  .nur-handy { display: inline; }
  /* Sprung zu den Notizen als stiller Eintrag am Ende der Metadatenzeile: Sprechblase und Zahl, ohne Unterstreichung
     (Design-Gate Welle 4, H6) */
  .meta-zeile .notizen-sprung { display: inline-flex; align-items: center; justify-content: center; gap: 2px; margin-left: auto; color: var(--text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
  /* Baustein Handy: Metadatenzeile einzeilig — 8 statt 12 px Abstand, damit die Sprechblase neben Status, Nummer und
     Bearbeiter passt (Abschluss-Design-Gate, F1) */
  .meta-zeile { column-gap: var(--space-2); }
  /* Filterleiste: seit Sitzung 0028 ohne waagerechten Bildlauf (Segment und Knopf „Filter“ passen in eine Zeile, siehe unten) */
}

@media (max-width: 600px) {
  /* Baustein Handy: Kopfzeile — eine Zeile unter 56 px: Bereiche, Lupe (öffnet die Suche), Konto */
  /* Marke und Suchfeld entfallen am Handy (Design-Gate Welle 2, Hinweis 1) */
  nav.top { flex-wrap: nowrap; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); }
  nav.top a.brand, nav.top form.nr { display: none; }
  /* ohne Anmeldung gibt es keine Bereiche: dann die Marke zeigen statt einer leeren Leiste (Design-Gate Welle 4, H8) */
  body:not([data-benutzer]) nav.top a.brand { display: inline; }
  /* Zuordnungshinweis kurz und ganz lesbar, bei Bedarf zweizeilig (Design-Gate Welle 4, H4) */
  .vorschlag-text .lang { display: none; }
  .vorschlag-text .kurz { display: inline; }
  .vorschlag-leiste .vorschlag-text { white-space: normal; }
  /* Bearbeiter in der Metadatenzeile ohne Pfeil, der Name höchstens 7rem mit Auslassung (voll im title; F1) */
  .meta-zeile .meta-knopf .sym-runter { display: none; }
  .meta-zeile .meta-knopf > :is(strong, .muted) { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Trefferzahl der Suche in eigener Zeile statt abgeschnitten am Ende der Leiste (Design-Gate Welle 4, H11) */
  .chips:has(> .trefferzahl) { flex-wrap: wrap; overflow: visible; }
  .chips > .trefferzahl { flex: 0 0 100%; }
  /* Menü „…“ je Benutzer rechts neben dem Namen, 44 × 44, ruhig in --text-2 (Design-Gate Welle 4, H9) */
  table.karten tr:has(details.benutzer-aktionen) { position: relative; }
  table.karten tr:has(details.benutzer-aktionen) td:first-child { padding-right: 48px; }
  table.karten td:has(> details.benutzer-aktionen) { position: absolute; top: var(--space-1); right: 0; padding: 0; }
  details.benutzer-aktionen > summary { min-width: 44px; min-height: 44px; justify-content: center; color: var(--text-2); }
  nav.top .lupe { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--text); }
  nav.top .lupe .sym { width: 20px; height: 20px; }
  .konto-knopf { min-height: 44px; }
  main { padding-top: var(--space-3); }
  h1, .kopf-info:has(> h1) { margin-top: 0; }
  /* Erklärblatt: abgedunkelt, „Fertig“ 44 px, über dem Home-Balken */
  .hilfe[popover]::backdrop { background: var(--backdrop); }
  .hilfe[popover] { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .hilfe[popover] button.fertig { min-height: 44px; }
  /* Baustein Handy: Bestätigung — Leiste unten mit „Rückgängig“ 44 px; verschwindet nach 8 s oder bei der nächsten Aktion
     (app.js); Fehlermeldungen bleiben oben stehen (Design-Gate Welle 2, N9 und Hinweis 5) */
  main > div.flash.ok { position: fixed; left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); z-index: 45; margin: 0; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); background: var(--surface); color: var(--text); border: 1px solid var(--separator); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); animation: flash-weg var(--dauer) 8s forwards; }
  main:has(.werkzeugleiste) > div.flash.ok { bottom: calc(64px + env(safe-area-inset-bottom)); }
  main > div.flash.ok .flash-aktion button { min-height: 44px; color: var(--accent); }
  main > div.flash.ok.weg { display: none; }
  /* nach dem Senden aus dem Editor steht unten schon die Bestätigung mit Restzeit (Korrekturen Welle 1, A1): die Meldung
     „Mail im Ausgang …“ bleibt dann oben im Fluss, damit sich beide nicht überdecken (Zusammenführung Welle 2) */
  main:has(.ausgang-bestaetigung) > div.flash.ok { position: static; margin-bottom: var(--space-3); box-shadow: none; animation: none; }
  /* Kennzahlen 2 × 2 */
  .grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  /* Baustein Handy: Tabelle als Karten — jede Zeile eine Karte, mit data-label die Spaltenüberschrift vor dem Wert */
  table.karten, table.karten tbody, table.karten tr, table.karten td { display: block; }
  table.karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.karten tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--separator); }
  table.karten td { padding: 2px 0; border: 0; }
  table.karten td:first-child { font-weight: 600; }
  table.karten td:empty { display: none; }
  table.karten.beschriftet td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--text-2); }
  /* 0037 zweiter Lauf (UXP4-0037-04): Links in Karten-Tabellen 44 px hoch */
  table.karten td > a { display: inline-flex; align-items: center; min-height: 44px; }
  .scroll { overflow: visible; }
}
/* Felder mit 16 px Schrift: iOS zoomt beim Fokus sonst in die Seite */
@media (pointer: coarse) { .feld, :where(input:not([type="checkbox"], [type="radio"]), select, textarea) { font-size: 16px; } }
/* Baustein Handy: Trefferfläche weiterer Elemente — Kopf-Links, Chips, Segmente, Kästchenzeilen, „Notizen“ und „Weiter »“ 44 px, die Kopfzeile bleibt 48 px (Design-Gate Welle 4, H5) */
@media (pointer: coarse) {
  /* 0037 zweiter Lauf (UXP4-0037-04): × an ergänzten Domains */
  #domains .phishing-domains li.ergaenzt button.chip-weg { min-width: 44px; min-height: 44px; }
  nav.top > a:not(.lupe):not(.brand) { display: inline-flex; align-items: center; min-height: 44px; }
  .chip { height: auto; min-height: 44px; }
  .schalter > a, .schalter > button { min-height: 44px; }
  label.check { min-height: 44px; }
  label.check > input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
  .pager a { display: inline-flex; align-items: center; min-height: 44px; }
  .mehr-nochmal { min-height: 44px; }
  .meta-zeile .notizen-sprung { min-width: 44px; min-height: 44px; }
  /* Baustein Handy: Trefferfläche ohne Zeilenwachstum — 44 px, aber negative Ränder: die Fläche ragt unsichtbar über die
     Zeile hinaus, die Zeile bleibt so hoch wie vorher (Abschluss-Design-Gate, F1 und F4) */
  .meta-zeile .notizen-sprung { margin-block: -10px; margin-right: -10px; }
  .meta-zeile .meta-knopf { min-height: 44px; margin-block: -10px; }
  .vorschlag-leiste .button { min-height: 44px; margin-block: -10px; }
  a.neues-fenster { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }
  details.technik > summary { padding-block: 13px; margin-block: -13px; position: relative; z-index: 1; }
  /* Kästchen-Beschriftung fließt als Text (F3): die Trefferfläche je Zeile über den Innenrand, Kästchen 20 px */
  .feld-kopf:has(> label.check) { padding-left: calc(20px + var(--space-2)); text-indent: calc(-20px - var(--space-2)); }
  .feld-kopf > label.check { padding-block: 11px; }
  .feld-kopf > label.check > input[type="checkbox"] { width: 20px; height: 20px; }
  .feld-kopf:has(> label.check), form.stack .feld-kopf:has(> label.check) { padding-block: 11px; }
  /* Anhang-Vorschau (Sitzung 0020): „Ansehen“ und die Knöpfe der Bildansicht mit 44 px, die Zeile wächst nicht */
  .bild-leiste .button, .bild-leiste button { min-height: 44px; }
  a.vorschau-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }
}

/* ===== Nachlauf Welle 3 (Sitzung 0019, Ziel C; SPEC docs/SPEC/ux/0019.md §4) ===== */
/* Mittlere Bildschirme (Design-Gate Welle 3, K4): unter 1.280 px entfällt die Liste links (erreichbar über „‹ Zur Liste“ und j/k).
   Mail und rechte Spalte stehen ab 901 px nebeneinander (Markus 2026-10-07/08, Sitzung 0047: um 1024 px nebeneinander, keine Lücke
   zwischen 901 und 1023 px); die frühere Regel „901 bis 1099 px untereinander“ entfällt. */
@media (min-width: 901px) and (max-width: 1279px) {
  .dreispaltig, .dreispaltig[data-liste="keine"] { grid-template-columns: minmax(0, 1fr) 20rem; }
  .dreispaltig > .spalte-liste { display: none; }
}
/* Ohne :has() (ältere Browser) blieben Verlauf und Abstand der Leiste aus: dann Notizen und Verlauf untereinander, Reiter
   ausgeblendet, unten Platz für die Leiste am Handy (Reviewer Welle 3, D2) */
@supports not selector(:has(*)) {
  .reiter { display: none; }
  .reiter-inhalt[data-reiter="verlauf"] { display: block; margin-top: var(--space-4); }
  /* max-width statt Range-Syntax: die kennt Safari erst ab 16.4, :has() schon ab 15.4 (Reviewer Welle 4, E5) */
  @media screen and (max-width: 900px) { main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
}

/* ===== Sitzung 0020: Anhang-Vorschau (SPEC docs/SPEC/p3/0020.md §5) ===== */
/* Bilder unter der Mail als kleine Vorschau; ein Klick öffnet sie groß als Ansicht über der Seite. Die Ansicht hat keinen
   eigenen Bildlauf: das Bild passt sich dem Fenster an (object-fit), Name und Knöpfe stehen darunter. */
.anhang-bilder { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
button.bild-knopf { min-height: 0; padding: 0; border: 1px solid var(--separator); border-radius: var(--radius-s); background: var(--surface); overflow: hidden; cursor: zoom-in; }
button.bild-knopf img { display: block; max-width: 12rem; max-height: 8rem; width: auto; height: auto; }
.bildansicht[popover] { box-sizing: border-box; width: calc(100vw - 2 * var(--space-4)); height: calc(100dvh - 2 * var(--space-4)); max-width: none; max-height: none; padding: var(--space-3); border: 1px solid var(--bild-rand); border-radius: var(--radius-l); background: var(--bild-bg); color: var(--bild-text); box-shadow: var(--shadow-pop); overflow: hidden; }   /* dunkel in beiden Modi wie Apple Fotos (Design-Gate P3 W1, F3) */
.bildansicht:popover-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.bildansicht::backdrop { background: var(--bild-backdrop); }
.bildansicht > img { flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }   /* nur verkleinern, nie unscharf vergrößern (F3) */
.bildansicht .bild-leiste .bild-name { color: var(--bild-text-2); }
@media screen and (max-width: 900px) { .bildansicht[popover] { width: 100vw; height: 100dvh; border: 0; border-radius: 0; padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom)); } }   /* am Handy randlos (F3) */
.bild-leiste { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; font-size: var(--fs-neben); }
.bild-leiste .bild-name { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
a.vorschau-link { margin-left: var(--space-1); }

/* ===== Korrekturen nach Prüfung Phase 3, Welle 1 (Design-Gate docs/ux/p3-welle1-2026-10-05.md; SPEC p3/0020.md, p3/0021.md) ===== */
/* Abstand über der ersten Überschrift im Panel (V9): das Panel hat schon seinen Innenabstand */
.panel > h2:first-child, .panel > form > h2:first-of-type, .panel > .kopf-info:first-child, .panel > form > div.kopf-info:first-of-type { margin-top: var(--space-2); }
/* Vorgangsnummern brechen nie am Bindestrich um (F9) */
.meta-zeile .nummer, .sendungen .nummer { white-space: nowrap; }
/* Hinweis auf externe Bilder still rechts in der Adresszeile statt eigener Leiste über der Mail (F6) */
.nachricht-adressen .bilderleiste { flex: none; margin: 0 0 0 auto; padding: 0; border: 0; background: none; }
.nachricht-adressen .bilderleiste .button { margin-left: var(--space-1); }
/* Bestätigung unten nach dem Absenden mit Restzeit (A1): fest am unteren Rand wie Gmail, über der Leiste am Handy */
.ausgang-bestaetigung { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: var(--space-3); max-width: calc(100vw - 2 * var(--space-3)); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); background: var(--surface); color: var(--text); border: 1px solid var(--separator); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.ausgang-bestaetigung .inline button { min-height: 44px; color: var(--accent); font-weight: 600; }
.ausgang-bestaetigung.weg { display: none; }
main:has(.werkzeugleiste) .ausgang-bestaetigung { bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 901px) { main:has(.werkzeugleiste) .ausgang-bestaetigung { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); } }
/* Verwaltung › Versand: Zustandskarte (V3), Sendungen in zwei Zeilen (V5), Riskantes zuletzt im eigenen Kasten (V1) */
.badge.achtung { background: var(--wartet-bg); color: var(--wartet); }
.zustandskarte p { margin: 0 0 var(--space-1); font-size: var(--fs-text); }
.zustandskarte p:last-child { margin-bottom: 0; }
.zustandskarte .badge { margin-right: var(--space-1); font-weight: 600; }
ul.sendungen, ul.aufgegeben { list-style: none; margin: 0; padding: 0; }
ul.sendungen > li { padding: var(--space-2) 0; border-top: 1px solid var(--separator); }
ul.sendungen > li:first-child { border-top: 0; }
ul.sendungen .betreff { font-weight: 600; overflow-wrap: anywhere; }
ul.sendungen .sendung-zeile { display: block; margin-top: 2px; font-size: var(--fs-neben); overflow-wrap: anywhere; }
ul.aufgegeben > li { margin: var(--space-1) 0; }
.nummer-luecke { display: inline-flex; align-items: center; gap: var(--space-1); }
.panel.vorsicht { border-color: var(--wartet); }
.panel.vorsicht > form > h2:first-of-type { color: var(--wartet); }
/* Bestätigung erst beim Umlegen des Schalters (V2): mit :has() verborgen, bis das Häkchen vom gespeicherten Stand abweicht;
   ohne :has() bleibt sie sichtbar (Speichern verlangt sie ohnehin) */
@supports selector(:has(*)) {
  .umschalter .wechsel-bestaetigung { display: none; }
  .umschalter:has(input[data-vorher="an"]:not(:checked)) .wechsel-bestaetigung, .umschalter:has(input[data-vorher="aus"]:checked) .wechsel-bestaetigung { display: block; }
}
/* Eine Sendung: Kopf als Liste, Text und Kopfzeilen umbrechend, ohne eigenen Bildlauf */
dl.sendung-kopf { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
dl.sendung-kopf dt { color: var(--text-2); }
dl.sendung-kopf dd { margin: 0; overflow-wrap: anywhere; }
pre.kopfzeilen { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-fuss); }
@media screen and (max-width: 900px) { dl.sendung-kopf { grid-template-columns: minmax(0, 1fr); } dl.sendung-kopf dd { margin-bottom: var(--space-2); } }
/* am Handy steht in der Adresszeile nur Symbol und „Bilder laden“, damit die Adresse lesbar bleibt (F6) */
@media screen and (max-width: 900px) { .nachricht-adressen .bilderleiste > span { display: none; } }
/* Knöpfe der dunklen Großansicht hell in beiden Modi (F3) */
.bildansicht .bild-leiste .rahmen { color: var(--bild-text); border-color: var(--bild-knopf-rand); background: transparent; }
.bildansicht .bild-leiste .button.still { color: var(--bild-link); }
/* ===== Sitzung 0026: Liste mit Kurzaktionen, Wischen und Mehrfachauswahl (SPEC docs/SPEC/p3/0026.md) ===== */
/* Jede Zeile ist ein Rahmen: Kästchen links, der Link (weiter genau ein Link), daneben die Knöpfe. --kasten ist der Platz
   für das Kästchen: am Rechner immer, am Handy (Finger, mit Skript) nur in der Mehrfachauswahl. */
.liste > .zeile { --kasten: 36px; position: relative; border-bottom: 1px solid var(--separator); }
.liste > .zeile:last-child { border-bottom: none; }
.zeile > .konv { z-index: 1; border-bottom: 0; background: var(--surface); transition: transform var(--dauer) ease-out; }
.zeile:hover > .konv { background: linear-gradient(var(--fill), var(--fill)), var(--surface); }
.zeile.zieht > .konv { transition: none; }
@media (min-width: 901px) { .zeile > .konv { padding-left: calc(var(--space-4) + var(--kasten)); } }
.zeile > .auswahl { position: absolute; z-index: 2; top: 0; left: 0; display: flex; justify-content: center; width: var(--kasten); padding-top: calc(var(--pad) + 2px); cursor: pointer; }
.auswahl-kasten { width: 16px; height: 16px; margin: 0; }
/* Kurzaktionen am Rechner: beim Darüberfahren und bei Tastaturfokus (Tab, j/k), rechts an der Stelle von Gruppe und Datum, auf
   der Höhe der ersten Zeile wie bei Gmail (Design-Gate UXP3W2-16). Sitzung 0042: nicht mehr bei :focus-within (ein
   Rechtsklick ließ den Fokus in der Zeile, die Leiste blieb beim Scrollen stehen); Tastaturfokus und Ausblenden im Block 0042 */
.zeile > .kurz { display: none; position: absolute; z-index: 2; top: max(0px, calc(var(--pad) - 8px)); right: var(--space-2); gap: 2px; padding: 2px; border-radius: var(--radius-s); background: linear-gradient(var(--fill), var(--fill)), var(--surface); }
@media (hover: hover) { .zeile:hover > .kurz { display: flex; } }
button.kurz-knopf { min-width: 32px; min-height: 32px; padding: 0; color: var(--text-2); }
button.kurz-knopf:hover { background: var(--fill); color: var(--accent); }
.kurz-knopf .sym { width: 18px; height: 18px; }
/* Baustein Handy: Wischen — unter der Zeile liegen die Knöpfe; nach rechts Erledigt (außen) und Gelesen, nach links Wiedervorlage; ganz durchziehen füllt den äußeren Knopf */
.zeile > .wisch { display: none; position: absolute; inset: 0; z-index: 0; }
.zeile[data-wisch="start"] > .wisch-start { display: flex; justify-content: flex-start; }
.zeile[data-wisch="ende"] > .wisch-ende { display: flex; justify-content: flex-end; }
.zeile[data-wisch] > .konv { background: var(--surface); }
.zeile .wisch-knopf { flex: 1 0 auto; flex-direction: column; gap: 2px; min-width: 80px; height: 100%; min-height: 0; padding: 0 var(--space-1); border: 0; border-radius: 0; font-size: var(--fs-fuss); font-weight: 600; white-space: nowrap; }
.wisch-knopf .sym { width: 22px; height: 22px; }
.zeile .wisch-erledigt { background: var(--offen-bg); color: var(--offen); }
.zeile .wisch-lesen { background: var(--neu-bg); color: var(--neu); }
.zeile .wisch-wiedervorlage { background: var(--wartet-bg); color: var(--wartet); }
.zeile.durch .wisch-knopf[data-durchziehen] { flex: 1; }
@media screen and (pointer: coarse) {
  /* pan-y: senkrecht rollt der Browser, waagerecht kommt die Geste an app.js; kein Kontextmenü beim langen Drücken */
  .zeile > .konv { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; min-height: 44px; }
  .liste > .zeile { --kasten: 44px; }
  .auswahl-kasten { width: 20px; height: 20px; }
  /* mit Skript erscheinen die Kästchen erst nach langem Drücken (oder sobald eines angekreuzt ist); ohne Skript immer */
  html[data-js] .liste > .zeile { --kasten: 0px; }
  html[data-js] .liste > .zeile > .auswahl { display: none; }
  html[data-js] .liste[data-auswahl-modus] > .zeile, html[data-js] .liste:has(.auswahl-kasten:checked) > .zeile { --kasten: 44px; }
  html[data-js] .liste[data-auswahl-modus] > .zeile > .auswahl, html[data-js] .liste:has(.auswahl-kasten:checked) > .zeile > .auswahl { display: flex; }
}
/* Leiste für die Auswahl: erscheint, sobald ein Kästchen angekreuzt ist (ohne Skript über :has); am Rechner schwebend unten
   in der Mitte, Menüs öffnen nach oben */
.auswahl-leiste { display: none; position: fixed; z-index: 36; left: 50%; bottom: var(--space-4); transform: translateX(-50%); align-items: center; gap: var(--space-1); max-width: calc(100vw - 2 * var(--space-4)); padding: var(--space-1) var(--space-2); background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); font-size: var(--fs-neben); }
main:has(.auswahl-kasten:checked) .auswahl-leiste { display: flex; }
main:has(.auswahl-kasten:checked) { padding-bottom: 96px; }
@supports not selector(:has(*)) { .auswahl-leiste { display: flex; } }
.auswahl-zahl { margin: 0 var(--space-2) 0 var(--space-1); font-weight: 600; white-space: nowrap; }
.auswahl-leiste .sym { width: 18px; height: 18px; }
@media (min-width: 901px) { .auswahl-leiste .menue-blatt { top: auto; bottom: calc(100% + var(--space-1)); } }
/* Blatt „Wiedervorlage“ für eine Zeile (popover): am Rechner mittig, am Handy von unten */
.blatt-popover[popover] { width: min(22rem, calc(100vw - 2 * var(--space-4))); padding: var(--space-2); border: 1px solid var(--separator); border-radius: var(--radius-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
.blatt-popover::backdrop { background: var(--backdrop); }
.blatt-popover .fertig { width: 100%; margin-top: var(--space-2); }
.wv-blatt-betreff { font-weight: 400; overflow-wrap: anywhere; }
@media screen and (max-width: 900px) {
  /* Baustein Handy: Leiste der Auswahl — unten über die volle Breite, nur Symbole mit 44 px, über dem Home-Balken */
  .auswahl-leiste { left: 0; right: 0; bottom: 0; transform: none; max-width: none; justify-content: space-between; gap: 0; padding: 0 var(--space-1) env(safe-area-inset-bottom); border-width: 1px 0 0; border-radius: 0; box-shadow: none; background: var(--surface-2); }
  .auswahl-leiste > button > span, .auswahl-leiste summary > span, .auswahl-leiste summary .sym-runter { display: none; }
  .auswahl-leiste > button:not(.info), .auswahl-leiste > details > summary { min-width: 44px; min-height: 44px; justify-content: center; }
  .auswahl-leiste .sym { width: 22px; height: 22px; }
}
/* ===== Korrekturen Welle 2, Liste (SPEC docs/SPEC/p3/0026.md, Abschnitt „Korrekturen Welle 2“) ===== */
/* Wischknöpfe teilen sich die freigelegte Breite (--wisch-weg aus app.js); beim Durchziehen bleibt nur der äußere (UXP3W2-15) */
.zeile > .wisch-start { right: auto; width: var(--wisch-weg, auto); }
.zeile > .wisch-ende { left: auto; width: var(--wisch-weg, auto); }
.zeile.durch .wisch-knopf:not([data-durchziehen]) { display: none; }
/* nach dem Antippen kein Fokusrahmen um die Zeile; mit der Tastatur bleibt er (UXP3W2-19) */
.zeile > .konv:focus:not(:focus-visible) { outline: none; }
/* Standardknopf für Enter im Datumsfeld: für den Browser da, für Menschen unsichtbar (P3W2-R1) */
.standard-knopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* „Fertig“ steht nur am Handy in der Kopfleiste der Auswahl */
.auswahl-leiste .fertig-wort { display: none; }
/* Zahlen der Filterleiste grau als eigenes Element, im Menü rechtsbündig, Ziffern gleich breit (UXP3W2-13) */
.chips .zahl, .menue-eintrag .zahl { margin-left: 2px; color: var(--text-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.menue-eintrag .zahl { margin-left: auto; padding-left: var(--space-3); }
.chip.aktiv .zahl { color: inherit; }
/* Bestätigung mit „Rückgängig“ aus der Liste: stiller Knopf × zum Ausblenden (app.js, UXP3W2-02) */
.flash .flash-zu { min-width: 32px; min-height: 24px; padding: 0 var(--space-1); color: inherit; font-size: 18px; line-height: 1; }
@media screen and (max-width: 900px) {
  /* Baustein Handy: Auswahlmodus wie iOS Mail — Kopfleiste oben „Fertig · n ausgewählt · (i)“, unten nur die Aktionen als
     Symbole mit 44 px; so passt die Leiste in 390 px (UXP3W2-03) */
  .auswahl-leiste { justify-content: space-around; }
  .auswahl-leiste > .feld-kopf { position: fixed; z-index: 37; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: calc(44px + env(safe-area-inset-top)); margin: 0; padding: env(safe-area-inset-top) 5.5rem 0; background: var(--surface-2); border-bottom: 1px solid var(--separator); font-size: var(--fs-text); }
  .auswahl-leiste > [data-auswahl-aufheben] { position: fixed; z-index: 38; top: env(safe-area-inset-top); left: var(--space-1); padding: 0 var(--space-2); }
  .auswahl-leiste > [data-auswahl-aufheben] > .sym { display: none; }
  .auswahl-leiste > [data-auswahl-aufheben] > .fertig-wort { display: inline; color: var(--accent); font-weight: 600; }
}
@media screen and (max-width: 600px) {
  /* die Bestätigung aus der Liste bleibt bis zur nächsten Aktion stehen (kein Ausblenden nach 8 s); die Liste bekommt unten
     Platz, und während einer Auswahl steht dort die Leiste der Auswahl (UXP3W2-02) */
  main > div.flash.ok:has(form[action^="/liste/rueckgaengig/"]) { animation: none; }
  main:has(> div.flash.ok:not(.weg) form[action^="/liste/rueckgaengig/"]) { padding-bottom: 96px; }
  main:has(.auswahl-kasten:checked) > div.flash.ok { display: none; }
}
@media screen and (max-width: 600px) {
  .blatt-popover[popover] { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .blatt-popover .fertig { min-height: 44px; }
}
/* ===== Sitzung 0022: Antwort-Editor (SPEC docs/SPEC/p3/0022.md §6; Korrekturen Welle 2) ===== */
/* Der Editor steht am Rechner in der Mittelspalte unter der Mail, am Handy auf eigener Seite. Die Schreibfläche wächst mit
   dem Text und hat keinen eigenen Bildlauf (keine Fenster im Fenster); Zitat und weitergeleitete Mail sind eingeklappt.
   Korrekturen Welle 2: diese Regeln stehen auf oberster Ebene (UXP3W2-01: eine fehlende Klammer davor machte sie zu
   Handy-Regeln; tests/web/editor.test.ts prüft die Klammertiefe); hidden gilt immer (05). */
[hidden] { display: none !important; }
.editor { margin: var(--space-5) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--separator); }
form.editor-form { display: flex; flex-direction: column; gap: var(--space-2); }
form.editor-form .feld, form.editor-form textarea.feld { max-width: 100%; }
/* Kopf wie Apple Mail (UXP3W2-09): Beschriftung links in der Zeile, Feld ohne eigenen Rahmen, Haarlinie dazwischen */
.kopfzeilen { display: flex; flex-direction: column; border-top: 1px solid var(--separator); }
.kopfzeile { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); min-height: 40px; border-bottom: 1px solid var(--separator); }
.kopfzeile > label, .kopfzeile > .kopf-label { color: var(--text-2); font-size: var(--fs-neben); }
.kopfzeile > .kopf-wert { grid-column: 2 / -1; overflow-wrap: anywhere; }
.kopfzeile > .feld, .kopfzeile > .empfaenger.feld { grid-column: 2; width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-left: 0; }
.kopfzeile > .feld:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kopfzeilen p.hilfe { margin: var(--space-1) 0; }
.editor-leiste { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 0; }
.editor-leiste > button { min-width: 36px; min-height: 36px; padding: 0; justify-content: center; color: var(--text-2); }
.editor-leiste > button:hover { color: var(--accent); background: var(--fill); }
.editor-leiste .sym { width: 18px; height: 18px; }
.link-eingabe { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.link-eingabe .feld { flex: 1 1 14rem; min-width: 0; }
.link-fehler { flex-basis: 100%; }
.link-fehler.fehler { color: var(--danger); }
.editor-flaeche.feld { display: block; height: auto; min-height: 12rem; padding: var(--space-2) var(--space-3); line-height: var(--lh); white-space: normal; overflow-wrap: anywhere; cursor: text; }
.editor-flaeche p { margin: 0 0 var(--space-2); }
.editor-flaeche :is(ul, ol) { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.editor-flaeche a { color: var(--accent); }
.senke-zeile { margin: 0 0 var(--space-2); color: var(--wartet); font-size: var(--fs-neben); }
.editor-warnung { margin: 0 0 var(--space-2); }
/* Aufklapper mit eigenem Pfeil (UXP3W2-11): das Dreieck des Browsers entfällt, der Pfeil dreht sich beim Öffnen */
:is(.editor-zitat, .editor-kopie) > summary { display: flex; align-items: center; gap: var(--space-1); list-style: none; cursor: pointer; }
:is(.editor-zitat, .editor-kopie) > summary::-webkit-details-marker { display: none; }
:is(.editor-zitat, .editor-kopie) > summary .aufklapp { transition: transform var(--dauer) ease-out; }
:is(.editor-zitat, .editor-kopie)[open] > summary .aufklapp { transform: rotate(180deg); }
.editor-zitat { margin: var(--space-1) 0 0; }
.editor-zitat > summary { color: var(--text-2); }
.editor-zitat pre.mailtext { padding-left: var(--space-3); border-left: 2px solid var(--separator); color: var(--text-2); }
.editor-kopie > summary { color: var(--accent); min-height: 32px; font-size: var(--fs-neben); }
.editor-anhang-bereich { margin-top: var(--space-1); }
fieldset.editor-anhaenge, fieldset.postfach-wahl { border: 0; padding: 0; margin: 0 0 var(--space-2); }
fieldset.editor-anhaenge legend { color: var(--text-2); font-size: var(--fs-neben); padding: 0; }
:is(fieldset.editor-anhaenge, fieldset.postfach-wahl) label.check { display: flex; align-items: center; gap: var(--space-2); }
/* „Datei anhängen“ als Knopf mit Büroklammer (UXP3W2-12) */
.editor-upload label.datei-knopf { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; color: var(--text); }
.editor-upload label.datei-knopf .sym { width: 16px; height: 16px; }
.editor-stand.fehler { color: var(--danger); }
.editor-aktionen { align-items: center; }
.verborgen { display: none; }
.entwuerfe { margin-top: var(--space-4); }
.entwurf-fremd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.entwurf-vorschau p { margin: 0 0 var(--space-2); }
.feld-titel { font-weight: 600; }
/* Textfeld ohne JavaScript wächst mit dem Text (keine eigene Bildlaufleiste); die Fläche mit JavaScript wächst von selbst */
textarea.editor-text { field-sizing: content; min-height: 12rem; resize: none; overflow: hidden; }
/* Eingeklappter Editor unter der letzten Nachricht: eine Zeile „Antworten …“, daneben Allen antworten und Weiterleiten */
.antworten-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; }
.antworten-zeile form:first-child { flex: 1 1 16rem; }
.antworten-zeile button.antworten-feld { width: 100%; justify-content: flex-start; color: var(--text-2); font-weight: 400; }
/* Betreff mit kleinem Häkchen „Nr.“ (Vorgangsnummer) rechts in der Zeile; ausgegraut, wenn ein Empfänger auf der Ausnahmeliste steht */
.nummer-schalter { display: inline-flex; align-items: center; flex: none; font-size: var(--fs-neben); }
.nummer-schalter label.check { display: inline-flex; align-items: center; gap: var(--space-1); }
.nummer-schalter.ausgegraut { color: var(--text-2); }
/* Empfänger als Chips (editor.js); ungültige mit Gefahrfarbe; × als stilles Symbol */
.empfaenger.feld { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); height: auto; min-height: var(--h-ctrl); padding: 2px 0; cursor: text; }
.empfaenger-eingabe { flex: 1 1 8rem; min-width: 6rem; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; height: calc(var(--h-ctrl) - 6px); }
.chip-adresse { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 var(--space-2); border-radius: var(--radius-s); background: var(--fill); color: var(--text); font-size: var(--fs-neben); }
.chip-adresse.ungueltig { background: var(--danger-bg); color: var(--danger); }
button.chip-weg { min-width: 20px; min-height: 20px; padding: 0 var(--space-1); border: 0; background: transparent; color: inherit; font-weight: 400; }
/* Editor auf eigener Seite (Handy, neue Mail): Kopf mit „Abbrechen“, Titel und „Senden“ oben fest; die Bildschirmtastatur
   verdeckt das Senden so nie. Der Titel steht nur hier (UXP3W2-21). */
.editor-seite { margin-top: 0; padding-top: 0; border-top: 0; }
.editor-kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; margin: 0 0 var(--space-3); padding: var(--space-1) 0; background: var(--bg); border-bottom: 1px solid var(--separator); }
h1.editor-kopf-titel { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; margin: 0; font-size: var(--fs-text); font-weight: 600; overflow-wrap: anywhere; }
/* Offener eigener Entwurf am Handy im Vorgang: eine Zeile mit Verweis auf die eigene Seite (R4, UXP3W2-07) */
a.entwurf-zeile { display: none; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; margin: var(--space-4) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--separator); border-radius: var(--radius-m); color: var(--text); text-decoration: none; }
.entwurf-zeile-text { min-width: 0; overflow-wrap: anywhere; }
.entwurf-zeile-weiter { flex: none; color: var(--accent); }
/* Bestätigung unten: Zusätze (Senke, Dir zugewiesen) stehen im Markup hinter „Rückgängig“ und hier vor ihm (UXP3W2-06) */
.ausgang-bestaetigung > span:first-child { order: 0; }
.ausgang-bestaetigung > .bestaetigung-zusatz { order: 1; color: var(--text-2); }
.ausgang-bestaetigung > form { order: 2; }
/* „Neue Mail“ in der Kopfzeile: Stift und Wort als Formular-Knopf (POST öffnet den Editor direkt, UXP3W2-10); am Handy nur der Stift (44 px) */
nav.top form.neue-mail-form { display: inline-flex; }
nav.top button.neue-mail { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; }
nav.top .neue-mail .sym { width: 18px; height: 18px; }
@media screen and (max-width: 600px) {
  nav.top .neue-mail-wort { display: none; }
  nav.top button.neue-mail { justify-content: center; min-width: 44px; min-height: 44px; }
  .editor { margin-top: var(--space-3); }
  /* im Vorgang nur die Zeile, der Editor öffnet auf eigener Seite (R4) */
  .editor:not(.editor-seite) { display: none; }
  a.entwurf-zeile { display: flex; }
  /* Bestätigung am Handy über die volle Breite, je Seite 12 px (UXP3W2-06) */
  .ausgang-bestaetigung { left: var(--space-3); right: var(--space-3); transform: none; max-width: none; flex-wrap: wrap; }
}
/* Baustein Handy: Editor — Knöpfe der Leiste und Aktionen mit 44 px, Kopie und Zitat aufklappbar mit 44 px */
@media screen and (pointer: coarse) {
  .editor-leiste button:not(.info), .editor-aktionen button:not(.info), .editor-upload label.button, .entwurf-fremd :is(a.button, button) { min-height: 44px; min-width: 44px; }
  .editor-kopie > summary, .editor-zitat > summary { min-height: 44px; }
  button.chip-weg { min-width: 32px; min-height: 32px; }
}
/* ===== Korrekturen Welle 2, zweiter Lauf (Design-Gate docs/ux/p3-welle2-nachpruefung-2026-10-06.md; Reviewer P3W2-N) ===== */
/* Baustein Bestätigung (06, N4; ein Muster für Versand und Liste): Zeile 1 der Satz, rechts daneben „Rückgängig“ (44 px am
   Finger); Zeile 2 still und klein die Zusätze (Testbetrieb, Dir zugewiesen), nie mit „·“ am Zeilenanfang */
.ausgang-bestaetigung { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); row-gap: 0; }
.ausgang-bestaetigung > span:first-child { grid-column: 1; grid-row: 1; }
.ausgang-bestaetigung > form { grid-column: 2; grid-row: 1 / span 2; }
.ausgang-bestaetigung > .bestaetigung-zusatz { grid-column: 1; grid-row: 2; font-size: var(--fs-fuss); }
/* Jede kurze Erfolgsmeldung am Rechner an derselben Stelle wie nach dem Senden: unten mittig, neutral statt grün (UXP3W2-N4;
   dritter Lauf UXP3W2-M1 und M2, Entscheidung nach Empfehlung des Design-Gates: auch „Rückgängig gemacht“, „Zurückgezogen“,
   die Bestätigung einer neuen Mail und „Zugewiesen“). Fehler (.flash.fehler) bleiben oben, weil sie etwas verlangen. */
@media (min-width: 601px) {
  main > div.flash.ok { position: fixed; left: 0; right: 0; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: 45; width: fit-content; max-width: min(720px, calc(100vw - 2 * var(--space-3))); margin: 0 auto; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); background: var(--surface); color: var(--text); border: 1px solid var(--separator); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
  main > div.flash.ok .flash-aktion button { color: var(--accent); }
  main > div.flash.ok.weg { display: none; }
  main:has(> div.flash.ok:not(.weg)) { padding-bottom: 96px; }
  /* während einer Auswahl steht dort die Leiste der Auswahl */
  main:has(.auswahl-kasten:checked) > div.flash.ok { display: none; }
  /* nach dem Senden aus dem Editor steht unten schon die Bestätigung mit Restzeit: die Meldung bleibt dann oben im Fluss */
  main:has(.ausgang-bestaetigung) > div.flash.ok { position: static; width: auto; max-width: none; margin: 0 0 var(--space-3); box-shadow: none; animation: none; }
}
/* ohne Knopf („Rückgängig“) blendet sich die Meldung am Rechner nach 4 Sekunden aus (am Handy nach 8, siehe oben); mit Knopf
   bleibt sie bis zur nächsten Aktion (app.js) */
@media (min-width: 901px) {
  main:not(:has(.ausgang-bestaetigung)) > div.flash.ok:not(:has(> form.flash-aktion)) { animation: flash-weg var(--dauer) 4s forwards; }
}
/* zurückgezogene Sendung: eine graue Zeile, keine Warnfarbe (UXP3W2-N5) */
.ausgang-still { margin: var(--space-1) 0; font-size: var(--fs-neben); }
/* „Datei anhängen“ als echter Knopf, still in --accent wie „Verwerfen“ (12; vorher setzte die Regel oben nur Farbe und Abstand,
   die Knopfregeln gelten nur für button und a.button) */
.editor-upload label.datei-knopf { justify-content: center; min-height: var(--h-ctrl); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-s); color: var(--accent); font-weight: 500; white-space: nowrap; }
.editor-upload label.datei-knopf:hover { background: var(--fill); }
.editor-upload label.datei-knopf:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Titel der eigenen Entwurfsseite: die Vorgangsnummer bricht nie in sich um (UXP3W2-N1) */
h1.editor-kopf-titel { flex-wrap: wrap; row-gap: 0; overflow-wrap: normal; }
h1.editor-kopf-titel .nr { white-space: nowrap; }
/* Empfänger mit Chips: die Beschriftung steht auf der Höhe der ersten Zeile, nicht senkrecht mittig (UXP3W2-N2) */
.kopfzeile:has(> .empfaenger) > label { align-self: start; padding-top: max(calc((40px - 1.45em) / 2), calc((var(--h-ctrl) + 4px - 1.45em) / 2)); line-height: 1.45; }
/* eigene Entwurfsseite (neue Mail): seit Sitzung 0042 (Wunsch Markus, einheitliche Breite) so breit und so ausgerichtet wie
   die Mailspalte im Vorgang statt höchstens 760 px (UXP3W2-M8); Regeln im Block „Sitzung 0042“ */
/* eigene Entwurfsseite: „Senden“ steht oben im Kopf, unten nicht noch einmal (UXP3W2-N10) */
.editor-seite .editor-aktionen > button[data-editor-senden] { display: none; }
/* Werkzeugleiste am Rechner ohne Überlauf in die rechte Spalte (UXP3W2-N6): unter 900 px Mittelspalte nur Symbole für
   Zuweisen, Tag, Wichtig und Mehr (Name im title und aria-label) */
@container (min-width: 700px) and (max-width: 899px) { [data-menue="zuweisen"] .wz-wort, [data-menue="tag"] .wz-wort, [data-werkzeug="wichtig"] .wz-wort, [data-menue="mehr"] .wz-wort { display: none; } }
@media screen and (max-width: 600px) {
  .editor-upload label.datei-knopf { min-height: 44px; }
  /* das (i) am Titel gibt es am Handy im Infomodus (UXP3W2-N1) */
  h1.editor-kopf-titel > button.info { display: none; }
}
@media screen and (max-width: 900px) {
  /* Baustein Handy: Leiste der Auswahl mit Wort unter dem Symbol wie die iOS-Tableiste (UXP3W2-N7): Breite nach dem Wort
     (UXP3W2-M4: „Wiedervorlage“ ganz, „Tag“ schmal; jedes Ziel bleibt mindestens 44 px breit), Erledigen als Symbol in
     --accent statt als gefüllter Block; Gelesen und Ungelesen sind mit Skript ein Knopf (app.js) */
  .auswahl-leiste > button:not([data-auswahl-aufheben]):not(.info), .auswahl-leiste > details { flex: 1 1 auto; min-width: 44px; }
  .auswahl-leiste > button:not([data-auswahl-aufheben]):not(.info), .auswahl-leiste > details > summary { flex-direction: column; gap: 2px; padding: var(--space-1) 4px; }
  /* nur das summary füllt sein details; ein Knopf mit width: 100 % hätte als Grundbreite die ganze Leiste */
  .auswahl-leiste > details > summary { width: 100%; }
  .auswahl-leiste > button:not([data-auswahl-aufheben]) > span, .auswahl-leiste > details > summary > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.2; font-weight: 500; }
  .auswahl-leiste > button[value="erledigen"] { background: transparent; border-color: transparent; color: var(--accent); }
  html[data-js] .auswahl-leiste[data-lesen="gelesen"] > button[value="ungelesen"], html[data-js] .auswahl-leiste[data-lesen="ungelesen"] > button[value="gelesen"] { display: none; }
  /* eine Haarlinie unter der Kopfleiste der Auswahl, nicht zwei (UXP3W2-N8): sie deckt die Kopfzeile der Seite ganz ab */
  .auswahl-leiste > .feld-kopf { min-height: calc(48px + env(safe-area-inset-top)); }
  body:has(.auswahl-kasten:checked) nav.top { border-bottom-color: transparent; }
}
/* Browser ohne :has() (iOS vor 15.4, Firefox vor 121): die Leiste ist dort immer sichtbar; ihre Kopfleiste darf dann nicht
   fest über der Navigation liegen (Reviewer P3W2-N5) */
@supports not selector(:has(*)) {
  @media screen and (max-width: 900px) {
    .auswahl-leiste > .feld-kopf, .auswahl-leiste > [data-auswahl-aufheben] { position: static; min-height: 0; padding: 0; border: 0; background: none; }
  }
}
/* ===== Sitzung 0027: Adressvorschläge unter An, Kopie und Blindkopie (SPEC docs/SPEC/p3/0027.md §6) ===== */
/* Die Liste liegt über dem Inhalt darunter, volle Feldbreite (Spalte des Felds bis zum Rand), ohne eigenen Bildlauf und
   ohne Höhengrenze: editor.js zeigt höchstens 8 Zeilen am Rechner und 5 am Handy. Unter dem festen Kopf der Entwurfsseite. */
.kopfzeile.mit-vorschlaegen { position: relative; scroll-margin-top: 56px; }
.adress-vorschlaege { position: absolute; z-index: 15; top: 100%; left: 0; right: 0; grid-column: 2 / -1; margin-top: 2px; padding: var(--space-1) 0; background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.vorschlag { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 2px var(--space-3); cursor: pointer; }
.vorschlag[aria-selected="true"] { background: var(--fill); }
.vorschlag-text { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; }
.vorschlag-name, .vorschlag-adresse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.vorschlag-name { font-size: var(--fs-text); color: var(--text); }
.vorschlag-adresse { font-size: var(--fs-neben); color: var(--text-2); }
.vorschlag-name .treffer { font-weight: 600; }
.vorschlag-adresse .treffer { color: var(--text); }
.vorschlag-team { flex: none; color: var(--text-2); }
.vorschlag-leer { padding: var(--space-2) var(--space-3); color: var(--text-2); font-size: var(--fs-neben); cursor: default; }
@media screen and (max-width: 600px) {
  /* Baustein Handy: Vorschlagsliste — Zeilen 56 px (Name und Adresse, Fingerziel), höchstens fünf, keine Markierung */
  .vorschlag { min-height: 56px; }
}
/* ===== Sitzung 0024: Textbausteine, Platzhalter und Zusagen (SPEC docs/SPEC/p3/0024.md §6) ===== */
/* Knopf „Textbaustein“ steht in der Formatleiste wie die übrigen Symbole; sein Menü ist ein vorhandenes Menüblatt (am Handy
   von unten mit „Fertig“); die Vorschläge beim Tippen nach „:“ stehen als eigene Zeile unter der Leiste */
.editor-platz[data-platz="textbausteine"] { display: contents; }
.bausteine-menue > summary { min-width: 36px; min-height: 36px; justify-content: center; border-radius: var(--radius-s); color: var(--text-2); }
.bausteine-menue > summary:hover { color: var(--accent); background: var(--fill); }
.bausteine-menue > summary .sym { width: 18px; height: 18px; }
.bausteine-menue .menue-blatt { min-width: 20rem; }
button.baustein-eintrag { flex-wrap: wrap; white-space: normal; height: auto; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.baustein-eintrag .baustein-titel { flex: 1 1 auto; min-width: 0; }
.baustein-eintrag .baustein-vorschau { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--fs-fuss); }
.baustein-tipp { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1) 0; color: var(--text-2); font-size: var(--fs-neben); }
.baustein-vorschlag { font-size: var(--fs-neben); }
/* leerer Platzhalter: Gefahrfarbe, gestrichelt unterstrichen (der Sanitizer entfernt das Element beim Speichern) */
.editor-flaeche mark.platzhalter-leer { padding: 0 1px; border-radius: 3px; background: var(--danger-bg); color: var(--danger); text-decoration: underline dashed; text-underline-offset: 3px; }
/* Zusage-Zeile und Platzhalter-Frage über „Senden“: Zustand in einer stillen Zeile, kein Fenster */
.zusage-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0; font-size: var(--fs-neben); }
.zusage-satz { flex-basis: 100%; color: var(--text-2); overflow-wrap: anywhere; }
.zusage-zeile label.check { align-items: center; }
.zusage-zeile .zusage-datum { width: auto; }
.platzhalter-frage, .nachfass { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nachfass { justify-content: space-between; }
/* Seite Textbausteine: Ordner als Abschnitte, je Baustein eine Zeile mit Vorschau */
.baustein-liste { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.baustein-zeile { padding: var(--space-2) 0; border-bottom: 1px solid var(--separator); }
.baustein-zeile .baustein-vorschau { display: block; font-size: var(--fs-neben); overflow-wrap: anywhere; }
.ordner-pflege { font-size: var(--fs-neben); font-weight: 400; }
.baustein-leiste .platzhalter-wahl { width: auto; margin-left: var(--space-2); }
.baustein-archiv > summary { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; list-style: none; }
.baustein-archiv > summary::-webkit-details-marker { display: none; }
.baustein-archiv[open] > summary .aufklapp { transform: rotate(180deg); }
@media screen and (pointer: coarse) {
  .bausteine-menue > summary, .baustein-vorschlag, .platzhalter-frage button:not(.info):not(.platzhalter-sprung), .nachfass button:not(.info), .zusage-zeile .zusage-datum { min-height: 44px; min-width: 44px; }
  /* Design-Gate Welle 4 (M6): die Namen im Fließtext der Frage behalten die Zeilenhöhe des Textes; die 44-px-Trefferfläche liegt unsichtbar
     darüber (::after). Das (i) behält seine 44-px-Fläche ebenfalls als ::after (button.info). */
  button.platzhalter-sprung { position: relative; min-height: 0; min-width: 0; }
  button.platzhalter-sprung::after { content: ""; position: absolute; inset: -14px -6px; }
  .platzhalter-frage button.info { position: relative; }
  .platzhalter-frage button.info::after { inset: -14px; }
}
/* ===== Sitzung 0060: KI-Antwortvorschlag im Editor (SPEC docs/SPEC/p7/0060.md §6; Gestaltung docs/ux/p7-vorschlag-2026-10-09.md 3 und 5). Nur vorhandene Tokens, keine neue Farbe. ===== */
/* Knopf „KI“ am rechten Ende der Formatleiste; abgeblendet, wenn die KI gerade nicht geht (die Karte nennt den Grund) */
.editor-leiste > .ki-menue, .editor-leiste > .ki-knopf { margin-inline-start: auto; }
.editor-leiste > .bezug-platz ~ .ki-menue, .editor-leiste > .bezug-platz ~ .ki-knopf { margin-inline-start: var(--space-2); }
.ki-knopf { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-s); color: var(--accent); font-size: var(--fs-neben); font-weight: 700; cursor: pointer; }
.ki-menue > .ki-knopf:hover, .ki-menue[open] > .ki-knopf, button.ki-knopf:hover { background: var(--accent-bg); }
.ki-knopf .sym { width: 18px; height: 18px; }
.ki-knopf.ki-aus { color: var(--text-2); opacity: 0.6; cursor: default; background: transparent; }
.ki-menue .menue-blatt { left: auto; right: 0; min-width: 16rem; }
/* Pillen im leeren Feld */
.ki-pillen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.ki-pille { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--h-ctrl); padding: 0 var(--space-3); border: 0; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: var(--fs-neben); font-weight: 700; }
.ki-pille.grau { background: var(--fill); color: var(--text-2); }
.ki-pille .sym { width: 16px; height: 16px; }
/* Ergebnisblock unter dem Textfeld: Fläche accent-bg, Balken links; die Mail darüber wird nie verschoben */
.ki-block { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--accent-bg); border-left: 3px solid var(--accent); }
.ki-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-neben); }
.ki-titel { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); color: var(--accent); }
.ki-titel .sym { width: 16px; height: 16px; }
.ki-bitte { color: var(--text-2); font-weight: 400; margin-inline: var(--space-1); }
.ki-zaehler { font-size: var(--fs-fuss); color: var(--text-2); }
.ki-text { margin: var(--space-2) 0; font-size: var(--fs-text); line-height: var(--lh); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
mark.ki-rot { padding: 0 2px; border-radius: 3px; background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.ki-rotnotiz { margin: 0 0 var(--space-2); font-size: var(--fs-neben); color: var(--danger); }
.ki-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ki-laden { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; color: var(--text-2); font-size: var(--fs-neben); }
.ki-balken { display: inline-block; width: 48px; height: 8px; border-radius: 4px; background: var(--fill); animation: ki-puls 1.6s ease-in-out infinite; }
.ki-balken:nth-of-type(2) { animation-delay: 0.2s; }
.ki-balken:nth-of-type(3) { animation-delay: 0.4s; }
@keyframes ki-puls { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ki-balken { animation: none; } }
/* graue Karte: Fehler, Budget, Buchhaltung, Schalter aus (kein Rot, es ist kein Fehler der Person) */
.ki-karte { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--fill); border-left: 3px solid var(--text-2); }
.ki-karte p { margin: 0 0 var(--space-2); }
/* Marke über dem Feld, solange der KI-Text noch nicht von dir bearbeitet ist; Balken am Feld */
.ki-marke { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-1); font-size: var(--fs-neben); color: var(--accent); }
.ki-marke .sym { width: 16px; height: 16px; }
.ki-marke:not([hidden]) ~ .editor-flaeche { border-left: 3px solid var(--accent); }
/* Band „rote Stelle“ über Senden */
.ki-rotband { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--wartet-bg); color: var(--wartet); font-size: var(--fs-neben); }
@media (max-width: 600px) and (min-width: 1px) {
  .ki-wort, .editor-leiste [data-befehl="removeFormat"] { display: none; }
  .ki-knopf { min-height: var(--h-touch); min-width: var(--h-touch); justify-content: center; }
  .ki-pille { min-height: var(--h-touch); }
  .ki-aktionen button, .ki-aktionen a.button, .ki-laden button, .ki-rotband button { min-height: var(--h-touch); }
  /* die Knopfleiste bleibt beim Lesen am unteren Rand des Blocks sichtbar, ohne eigenen Bildlauf */
  .ki-block .ki-aktionen { position: sticky; bottom: 0; padding-block: var(--space-2); background: var(--accent-bg); }
}
/* ===== Ende Sitzung 0060 ===== */
/* ===== Sitzung 0061: Hilfen der KI (Zusammenfassen, Übersetzen, Ton, Auftragsdaten; SPEC docs/SPEC/p7/0061.md §8; UX docs/ux/p7-vorschlag-2026-10-09.md Abschnitt 3 und 5) ===== */
/* Menü „KI“: zweite Ebene im selben Blatt, die Zeile „Übersetzen in ›“ und „‹ Zurück“ */
.kh-weiter .kh-pfeil { margin-inline-start: auto; color: var(--text-2); }
.kh-zurueck { color: var(--accent); }
.ki-menue .menue-eintrag[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.kh-umfang { margin: 0 var(--space-2) var(--space-1); color: var(--text-2); font-size: var(--fs-fuss); }
/* Vorschau der Auftragsdaten vor dem Aufruf (K-3) */
.kh-hinweis { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-neben); color: var(--text-2); }
.kh-zeilen { margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--fs-text); }
.kh-zeilen li { padding-block: var(--space-1); border-top: 1px solid var(--separator); overflow-wrap: anywhere; }
.kh-fuss { margin: 0 0 var(--space-2); font-size: var(--fs-fuss); color: var(--text-2); }
/* „War es brauchbar?“: klein und still */
.kh-daumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; font-size: var(--fs-neben); color: var(--text-2); }
.kh-daumen button { min-height: var(--h-ctrl); }
/* Zusammenfassung: Karte in der rechten Seitenleiste (Rechner) und zwischen Metazeile und Mail (Handy); genau eine ist sichtbar */
.kh-zus { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--accent-bg); border-left: 3px solid var(--accent); }
.kh-zus .ki-kopf { margin-bottom: var(--space-1); }
.kh-zus-text { margin: var(--space-2) 0; font-size: var(--fs-text); line-height: var(--lh); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.kh-zus-karte { margin: var(--space-2) 0; color: var(--text); }
.kh-zus-karte p { margin: 0 0 var(--space-2); }
.kh-laden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; color: var(--text-2); font-size: var(--fs-neben); }
.kh-balken { display: inline-block; width: 48px; height: 8px; border-radius: 4px; background: var(--fill); animation: ki-puls 1.6s ease-in-out infinite; }
.kh-balken:nth-of-type(2) { animation-delay: 0.2s; }
.kh-balken:nth-of-type(3) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) { .kh-balken { animation: none; } }
.kh-zus-knopf { color: var(--accent); }
.kh-zus-knopf .sym { color: var(--accent); }
.kh-zus-seite { display: none; }
@media (min-width: 901px) { .kh-zus-seite { display: block; } .kh-zus-handy { display: none; } }
.kh-zus-handy.kh-geklappt .kh-zus-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* eingegangene Mail in fremder Sprache: Etikett, Knopf „Übersetzen“, Block unter dem Kopf */
.kh-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.kh-etikett { padding: 0 var(--space-2); border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: var(--fs-fuss); line-height: 20px; }
.kh-mail-knopf { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--h-ctrl); color: var(--accent); }
.kh-mail-knopf .sym { width: 16px; height: 16px; }
.kh-mail-block { flex-basis: 100%; margin: var(--space-1) 0; }
@media (max-width: 600px) and (min-width: 1px) {
  .ki-menue .menue-eintrag { min-height: var(--h-touch); }
  .kh-daumen button, .kh-mail-knopf, .kh-zus .ki-aktionen button, .kh-zus-karte button, .kh-laden button, .kh-auftrag .ki-aktionen button, .kh-mail-block .ki-kopf button { min-height: var(--h-touch); }
  .kh-auftrag .ki-aktionen { position: sticky; bottom: 0; padding-block: var(--space-2); background: var(--accent-bg); }
}
/* ===== Ende Sitzung 0061 ===== */
/* ===== Sitzung 0049: Platzhalter aus der Wawi, Bezug-Chip (SPEC docs/SPEC/p5/0049.md §5; Gestaltung docs/ux/p5-welle4-vorschlag-2026-10-08.md 1) ===== */
/* eingesetzter Wert aus der Wawi: nur eine Punktlinie (die Herkunft steht im Hover); der Sanitizer entfernt das Element beim Speichern */
.editor-flaeche mark.platzhalter-wert { padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; border-bottom: 1px dotted var(--text-2); }
/* Bezug-Chip rechts in der Leistenzeile; am Handy eine eigene Zeile */
.bezug-platz { display: flex; align-items: center; margin-inline-start: auto; }
.bezug-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--h-ctrl); padding: 0 var(--space-2); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--fs-neben); list-style: none; white-space: nowrap; cursor: pointer; }
.bezug-chip::-webkit-details-marker { display: none; }
.bezug-chip:hover, .bezug-menue[open] > .bezug-chip { background: var(--accent-bg); color: var(--text); }
.bezug-chip .sym { flex: none; width: 16px; height: 16px; }
.bezug-chip .bezug-nr { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.bezug-chip.bezug-leer { cursor: default; }
.bezug-chip.bezug-leer:hover { background: transparent; color: var(--text-2); }
.bezug-menue .menue-blatt { left: auto; right: 0; min-width: 20rem; }
.bezug-kunde, .bezug-titel { margin: var(--space-1) var(--space-2); }
.bezug-eintrag { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-1); white-space: normal; }
.bezug-haken { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.bezug-eintrag[aria-pressed="true"] .bezug-haken::after { content: ''; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.bezug-eintrag-nr { font-weight: 600; font-variant-numeric: tabular-nums; }
.bezug-meta { flex-basis: 100%; padding-inline-start: 26px; color: var(--text-2); font-size: var(--fs-fuss); }
/* Band „Bezug gewechselt“: ruhig, einzeilig, kein Hinweis auf Gefahr */
.bezug-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--fill); color: var(--text-2); font-size: var(--fs-neben); }
.bezug-band[hidden] { display: none; }
.bezug-band-text { flex: 1 1 14rem; }
/* Platzhalter in der Vorschau der Bausteine als graue Pille, Namen in der Frage vor dem Senden als Sprung zur roten Stelle */
.platzhalter-pille { display: inline-block; padding: 0 6px; border-radius: var(--radius-s); background: var(--fill); color: var(--text-2); font-size: var(--fs-fuss); line-height: 1.5; }
button.platzhalter-sprung { display: inline; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
@media screen and (max-width: 600px) {
  .bezug-platz { flex-basis: 100%; margin-inline-start: 0; }
  .bezug-chip { min-height: 44px; }
  .bezug-menue .menue-blatt { min-width: 0; }
}
/* ===== Ende Sitzung 0049 ===== */
/* ===== Sitzung 0023: Signaturen und Senden-Abschluss (SPEC docs/SPEC/p3/0023.md §6) ===== */
/* Signatur im Editor unter dem Text, vor dem Zitat, nicht bearbeitbar; die Pflichtangaben
   still und klein darunter. Vorschau auf Meine Signatur und Verwaltung › Signaturen; Haken „Offen lassen“ neben „Senden“ */
.editor-signatur { margin: var(--space-1) 0 0; padding: var(--space-2) 0 0; border-top: 1px dashed var(--separator); }
.editor-signatur-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--text-2); font-size: var(--fs-neben); }
.editor-signatur-kopf .feld-titel { font-weight: 400; }
.signatur-inhalt { color: var(--text); overflow-wrap: anywhere; }
.signatur-inhalt p { margin: 0 0 var(--space-2); }
.signatur-inhalt a { color: var(--accent); }
.signatur-inhalt img { display: block; max-width: 100%; height: auto; }
.signatur-pflicht { color: var(--text-2); font-size: var(--fs-fuss); line-height: 1.4; }
.signatur-pflicht p { margin: 0 0 var(--space-1); }
.signatur-fehlt { margin: var(--space-1) 0 0; font-size: var(--fs-neben); }
.offen-lassen { display: inline-flex; align-items: center; font-size: var(--fs-neben); }
.offen-lassen label.check { display: inline-flex; align-items: center; gap: var(--space-1); }
.signatur-vorschau { padding: var(--space-3); border: 1px solid var(--separator); border-radius: var(--radius-m); background: var(--bg); }
.platzhalter-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
textarea.signatur-text { field-sizing: content; min-height: 8rem; resize: none; overflow: hidden; }
img.signatur-logo { max-height: 80px; width: auto; vertical-align: middle; }
fieldset.anrede-wahl { border: 0; padding: 0; margin: 0; }
fieldset.anrede-wahl label.check { display: flex; align-items: center; gap: var(--space-2); }
@media screen and (max-width: 600px) {
  .offen-lassen label.check { min-height: 44px; }
  .platzhalter-leiste > button { min-height: 44px; }
}
/* ===== Korrekturen Welle 3, Editor, Signatur, Textbausteine (Design-Gate docs/ux/p3-welle3-2026-10-06.md) ===== */
/* UXP3W3-03: „Offen lassen“ neben „Senden“ in einer Zeile, der Haken überlappt nie den Text; am Handy eine eigene Zeile über
   „Verwerfen“ */
.editor-aktionen .offen-lassen { flex: none; white-space: nowrap; }
.editor-aktionen .offen-lassen .feld-kopf { flex-wrap: nowrap; }
.offen-lassen label.check { white-space: nowrap; }
.offen-lassen label.check > input { flex: none; margin: 0; }
/* kein hängender Einzug im einzeiligen Haken (sonst zieht text-indent die Beschriftung über das Kästchen, UXP3W3-03);
   spezifischer als .feld-kopf:has(> label.check), auch in der Handy-Regel */
.offen-lassen .feld-kopf:has(> label.check), .offen-lassen .feld-kopf > label.check { padding-left: 0; text-indent: 0; }
@media screen and (max-width: 600px) {
  .editor-aktionen .offen-lassen { flex-basis: 100%; }
}
/* UXP3W3-15: Formatleiste bei 320 px in einer Zeile: bis 360 px Knöpfe 38 px breit (Höhe bleibt 44 px am Finger) */
@media screen and (max-width: 360px) {
  .editor-leiste { gap: 1px; }
  .editor-leiste > button:not(.info), .editor-leiste .bausteine-menue > summary { min-width: 38px; }
}
/* UXP3W3-13: die Auswahl „Platzhalter einfügen …“ bleibt in der Leiste, nie breiter als das Feld */
.baustein-leiste { flex-wrap: wrap; }
.baustein-leiste .platzhalter-wahl { flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* UXP3W3-12: leere Ordner in einer stillen Zeile */
.baustein-leer { margin: 0 0 var(--space-4); font-size: var(--fs-neben); }
/* UXP3W3-11: „Logo wählen …“ als Rahmen-Knopf wie „Archivieren“ (ein label, weil es das Dateifeld öffnet) */
.logo-form label.button.rahmen { display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-ctrl); padding: 0 var(--space-3); border: 1px solid var(--feld-rand); border-radius: var(--radius-s); background: var(--surface); color: var(--accent); font-weight: 500; white-space: nowrap; cursor: pointer; }
.logo-form label.button.rahmen:hover { background: var(--fill); }
.logo-form label.button.rahmen:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* UXP3W3-17: der Entwurf wurde woanders gesendet oder verworfen: Hinweis über „Senden“, die Fläche ist gesperrt */
.editor-weg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.editor-flaeche[contenteditable="false"] { color: var(--text-2); background: var(--fill); }
@media screen and (pointer: coarse) {
  .logo-form label.button.rahmen, .editor-weg :is(a.button, button) { min-height: 44px; }
}
/* ===== Sitzung 0028: Handy-Leiste neu (SPEC docs/SPEC/p3/0028.md; Vorschlag docs/ux/p3-welle3-vorschlag-2026-10-06.md) ===== */
/* 0028a — Filterleiste: Segment „Zu tun | Erledigt | Alle“, am Rechner drei Chips, Knopf „Filter“; darunter die Zeile der
   gesetzten Filter, die umbricht statt zu wischen */
.gefiltert-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--fs-neben); }
.gefiltert-wort { color: var(--text-2); }
/* gesetzte Filter still statt gefüllt: Fläche --fill, Text --text, × in --text-2, 32 px hoch; gefüllt bleibt nur der Knopf
   „Filter“ am Handy (UXP3W3-08, Tokens im Bericht docs/ux/p3-welle3-2026-10-06.md) */
.gefiltert-zeile > a.chip.aktiv { position: relative; height: 32px; min-height: 0; background: var(--fill); color: var(--text); }
.gefiltert-zeile > a.chip.aktiv:hover { background: var(--separator); }
.gefiltert-zeile > a.chip.aktiv .sym-entfernen { color: var(--text-2); }
.gefiltert-zeile a.alle-entfernen, .blatt-kopf a.blatt-zuruecksetzen { display: inline-flex; align-items: center; color: var(--accent); text-decoration: none; white-space: nowrap; }
.gefiltert-zeile a.alle-entfernen:hover, .blatt-kopf a.blatt-zuruecksetzen:hover { text-decoration: underline; }
/* Blattkopf (blattKopf in html.ts): fest oben im Menüblatt, links still „Zurücksetzen“, Mitte der Titel, rechts „Fertig“ (am
   Handy); „Fertig“ ist so ohne Rollen sichtbar */
.blatt-kopf { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); min-height: var(--h-ctrl); margin-bottom: var(--space-1); padding: 0 var(--space-2); background: var(--surface); border-bottom: 1px solid var(--separator); }
.blatt-kopf > .blatt-links { justify-self: start; min-width: 0; font-size: var(--fs-neben); }
.blatt-kopf > .blatt-titel { margin: 0; text-align: center; }
.blatt-kopf > .blatt-fertig { justify-self: end; display: none; }
/* „Fertig“ als Link (Blatt „Postfächer“) sieht aus wie der Knopf der übrigen Blätter: mittig, ohne Unterstrich (UXP5X-06) */
.blatt-kopf > a.blatt-fertig { align-items: center; text-decoration: none; font-weight: 600; }
.menue-blatt:has(> .blatt-kopf) { padding-top: 0; }
/* der feste Kopf deckt auch den Streifen über sich, dort schien beim Rollen Inhalt durch (UXP4W1-18) */
.blatt-kopf { box-shadow: 0 -8px 0 var(--surface); }
/* „Verwaltung“ steht am Handy als erster Eintrag im Kontomenü (die Kopfzeile passt so in 320 px) */
details.konto .menue-eintrag.nur-schmal { display: none; }
@media screen and (max-width: 900px) {
  /* Baustein Handy: Blattkopf — Titel 17 px halbfett, „Fertig“ fett in --accent mit 44 px, Blatt höchstens 85 % der Bildhöhe */
  .blatt-kopf { min-height: var(--h-touch); }
  .blatt-kopf > .blatt-titel { color: var(--text); font-size: var(--fs-h2); font-weight: 600; }
  .blatt-kopf > .blatt-fertig { display: inline-flex; min-height: var(--h-touch); padding: 0 var(--space-1); color: var(--accent); font-weight: 600; }
  .blatt-kopf a.blatt-zuruecksetzen { min-height: var(--h-touch); }
  details.menue .menue-blatt:has(> .blatt-kopf) { max-height: 85vh; }
}
@media screen and (max-width: 600px) {
  /* Baustein Handy: Kopfzeile in 320 px — Verwaltung im Kontomenü, nur der Bereichs-Link darf kürzen, Stift, Lupe und Konto je 44 px */
  nav.top > a[href="/admin"]:not(.lupe):not(.brand) { display: none; }
  details.konto .menue-eintrag.nur-schmal { display: flex; }
  nav.top > * { flex: none; }
  nav.top > a[href="/posteingang"]:not(.lupe):not(.brand) { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .konto-knopf { min-width: var(--h-touch); justify-content: center; }
  /* im Vorgang links nur der Rückweg, Stift, Lupe und Konto rechts zusammen (UXP3W3-14) */
  nav.top:has(> a.zurueck-handy) > .spacer { display: none; }
  nav.top > a.zurueck-handy:not(.brand) { margin-right: auto; }
  /* Baustein Handy: Filterleiste — Segment in drei gleich breiten Teilen und Knopf „Filter“ in einer Zeile, nie seitlich wischen */
  /* „Mir zugewiesen“, „Neu“ und „Fällig heute“ stehen am Handy im Blatt; das Wort im Segment trägt keine Zahl */
  .chips:has(> details.filter) { flex-wrap: nowrap; }
  .chips > .nur-breit { display: none; }
  .chips > .schalter { flex: 1 1 auto; min-width: 0; }
  .chips > .schalter > a { flex: 1 1 0; min-width: 0; min-height: var(--h-touch); justify-content: center; padding: 0 var(--space-1); overflow: hidden; }
  .chips > details.filter { flex: none; }
  details.filter > summary { min-height: var(--h-touch); }
  details.filter > summary .sym-runter { display: none; }
  /* gesetzte Filter: Knopf gefüllt, damit man aus der Ferne sieht, dass gefiltert ist (Apple Mail) */
  details.filter > summary.gefiltert { background: var(--accent-fill); color: var(--on-accent); }
  .gefiltert-zeile a.alle-entfernen { min-height: var(--h-touch); }
  /* Chip sichtbar 32 px, Trefferfläche 44 px über ::after; 12 px Zeilenabstand, damit sich die Flächen nicht überdecken */
  .gefiltert-zeile { row-gap: var(--space-3); }
  .gefiltert-zeile > a.chip.aktiv::after { content: ""; position: absolute; inset: -6px 0; }
}
@media screen and (max-width: 360px) {
  nav.top { gap: var(--space-2); }
  .chips > .schalter > a { font-size: var(--fs-neben); }
  /* „Filter“ nur als Symbol (mit Zahl), damit „Erledigt“ neben dem Knopf „Postfächer“ in sein Segment passt (UXP5X-08); das
     Wort bleibt für Bildschirmleser im Knopf (Schriftgröße 0), die Zahl kommt aus data-zahl */
  .chips:has(> details.filter) { column-gap: var(--space-1); }
  .chips > details.filter > summary { gap: 0; padding: 0 var(--space-3); font-size: 0; }
  .chips > details.filter > summary[data-zahl]::after { content: attr(data-zahl); margin-left: var(--space-1); font-size: var(--fs-neben); }
}
/* 0028b — Vorgang am Handy: fünf beschriftete Knöpfe unten, alles Weitere im Blatt „Mehr“, Rückweg oben links */
.wz-handy, .mehr-handy { display: none; }
nav.top > a.zurueck-handy:not(.brand) { display: none; }
/* „Tags …“ öffnet mit Skript das Menü „Tag“ der Leiste; ohne Skript steht „Tag“ als sechster Knopf in der Leiste */
html:not([data-js]) .mehr-handy .nur-mit-js { display: none; }
/* am Rechner bleibt das Menü „Mehr“ wie bisher: ohne Kopf */
@media (min-width: 901px) {
  details[data-menue="mehr"] .blatt-kopf { display: none; }
  details[data-menue="mehr"] .menue-blatt { padding-top: var(--space-1); }
}
@media screen and (max-width: 900px) {
  /* Baustein Handy: Rückweg oben — „‹ Posteingang“ links in der Kopfzeile statt „Posteingang“, Ziel die Liste mit ihren Filtern */
  nav.top > a.zurueck-handy:not(.brand) { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; min-height: var(--h-touch); overflow: hidden; white-space: nowrap; color: var(--accent); font-weight: 600; }
  nav.top > a.zurueck-handy .sym-zurueck { flex: none; width: 17px; height: 17px; }
  nav.top:has(> a.zurueck-handy) > a[href="/posteingang"]:not(.lupe):not(.brand) { display: none; }
  /* Baustein Handy: Werkzeugleiste mit Wort — fünf gleich breite Knöpfe (bei 320 px je 64 px), Symbol 22 px, Wort 11 px darunter */
  .werkzeugleiste { gap: 0; padding-left: 0; padding-right: 0; justify-content: stretch; min-height: calc(var(--h-leiste) + env(safe-area-inset-bottom)); }
  .werkzeugleiste > a:first-child { display: none; }
  .werkzeugleiste > form.inline, .werkzeugleiste > details { display: flex; min-width: 0; flex: 1 1 0; }
  /* „Wichtig“ steht im Blatt „Mehr“: hinter der Zellen-Regel und spezifischer als sie, sonst wären es sechs Knöpfe (UXP3W3-01) */
  .werkzeugleiste > form.inline[data-werkzeug="wichtig"] { display: none; }
  .werkzeugleiste > form.inline > button, .werkzeugleiste > details > summary { flex: 1 1 auto; min-width: 0; min-height: var(--h-touch); flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-1) 2px; border: 0; border-radius: 0; background: transparent; color: var(--accent); }
  .werkzeugleiste .wz-wort, .werkzeugleiste .wz-handy { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-leiste); font-weight: 500; line-height: 1.2; color: var(--text-2); }
  .werkzeugleiste .wz-handy + .wz-wort { display: none; }
  .werkzeugleiste details[open] > summary :is(.wz-wort, .wz-handy) { color: var(--accent); }
  /* Erledigen bleibt die Hauptaktion: das Symbol steht gefüllt in --accent-fill */
  .werkzeugleiste [data-werkzeug="erledigen"] > button > .sym { box-sizing: content-box; padding: 3px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); }
  /* „Tag“ und „Wichtig“ stehen im Blatt „Mehr“. Das Menü „Tag“ bleibt da (mit Skript öffnet es „Tags …“): sein Knopf ist
     verborgen, offen ist er der abgedunkelte Grund, ein Tippen darauf schließt das Blatt; ohne Skript bleibt er sechster Knopf */
  html[data-js] .werkzeugleiste > details[data-menue="tag"] { flex: 0 0 0; }
  html[data-js] .werkzeugleiste > details[data-menue="tag"]:not([open]) > summary { display: none; }
  html[data-js] .werkzeugleiste > details[data-menue="tag"][open] > summary { position: fixed; inset: 0; z-index: 39; min-width: 0; min-height: 0; padding: 0; }
  html[data-js] .werkzeugleiste > details[data-menue="tag"][open] > summary > * { display: none; }
  /* Baustein Handy: Blatt „Mehr“ — vor den bisherigen Abschnitten Allen antworten, Weiterleiten, Tags, Wichtig, Notiz, Verlauf */
  .mehr-handy { display: block; }
}

/* ===== Sitzung 0025 (SPEC docs/SPEC/p3/0025.md §4): gesperrter Editor ===== */
/* Wurde der Entwurf woanders gesendet oder verworfen, sperrt editor.js die Formatleiste (inert, Knöpfe disabled) und zeigt
   sie gedämpft, statt sie bedienbar aussehen zu lassen (UXP3W3-N2) */
.editor-leiste.gesperrt { opacity: .45; cursor: not-allowed; }
.editor-leiste.gesperrt :is(button, summary) { pointer-events: none; }
/* Antworten am Handy (§6.3, UXP3W2-L4): die Eingabe der An-Zeile steht neben dem Chip, solange 5rem daneben frei sind;
   „screen and“, damit der letzte Block „@media (max-width: 600px)“ der Handy-Bausteine aus 0019 der letzte bleibt */
@media screen and (max-width: 600px) {
  .empfaenger-eingabe { flex: 1 1 5rem; min-width: 5rem; }
}

/* ===== Abschluss Phase 3 (SPEC docs/SPEC/p3/0025.md, „Abschluss-Korrekturen“; Design-Gate docs/ux/p3-abschluss-2026-10-06.md) ===== */
/* UXP3A-01: die Zeile zeigt immer die Gegenseite; war die letzte Mail unsere Antwort, steht still „Du:“ vor der Vorschau */
.k-du { color: var(--text-2); font-weight: 600; }
/* UXP3A-02: „liest gerade“ in der Liste als Initialen im Kreis (Name im title), überdeckt keine Spalte mehr. Rest aus der
   Nachprüfung (Korrekturlauf Gesamt-Audit): kein Auge mehr, ein grüner Ring heißt „gerade da“ (wie Präsenz in Front und Teams);
   neben dem Bearbeiter-Kreis überlappend (−6 px) wie Apple-Kontaktstapel, damit alles in die 40-px-Spalte passt */
.liest .initialen.klein { width: 20px; height: 20px; margin-left: 0; font-size: 9px; border: 2px solid var(--punkt-offen); box-shadow: 0 0 0 1px var(--surface); }
.k-wer > .initialen ~ .liest, .liest > .initialen + .initialen { margin-left: -6px; }
/* UXP3A-03: am Rechner steht „Senden“ auch auf der eigenen Seite (neue Mail) unten in der Aktionszeile, am selben Ort wie
   beim Antworten im Vorgang; der Kopf behält seinen Knopf */
@media screen and (min-width: 901px) { .editor-seite .editor-aktionen > button[data-editor-senden] { display: inline-flex; } }
/* UXP3A-04: beim Schreiben am Handy nur der Schreibkopf „Abbrechen · Titel · Senden“ wie Apple Mail, ohne App-Kopf */
@media screen and (max-width: 600px) { body:has(.editor-seite) > nav.top { display: none; } }
/* UXP3A-07: Verwaltung › Versand, weitere Sendungen hinter „Alle zeigen“ (aufklappbar, ohne eigene Bildlaufleiste) */
.sendungen-mehr > summary { padding: var(--space-2) 0; color: var(--accent); cursor: pointer; }
/* UXP3A-08: „Eigener Gruß“ erst, wenn „Eigener Gruß …“ gewählt ist; ohne :has() bleibt das Feld sichtbar */
@supports selector(:has(*)) {
  .gruss-eigen { display: none; }
  form:has(#sig-gruss option[value="eigen"]:checked) .gruss-eigen { display: block; }
}
/* UXP3A-09: Mein Konto bei 320 px: der Knopf für Meldungen bricht um statt die Seite zu verbreitern */
#push-abo { max-width: 100%; white-space: normal; text-align: start; }
/* Sitzung 0029 Absender-Echtheit (docs/ux/p4-vorschlag-2026-10-06.md Teil 5, Komponente .echt-warn): rote Zeile unter der
   Adresszeile nur bei „nicht bestätigt“, volle Breite, bricht um; „Warum?“ öffnet die Erklärung */
.echt-warn { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--danger-bg); color: var(--danger); font-size: var(--fs-neben); line-height: var(--lh); overflow-wrap: anywhere; }
.echt-warn .sym-warnung { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.echt-warn strong { font-weight: 600; }
.echt-warn button.warum { display: inline; min-height: 0; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* ===== Sitzung 0030 (SPEC docs/SPEC/p4/0030.md §3; Vorschlag docs/ux/p4-vorschlag-2026-10-06.md Teil 1): Spam und Papierkorb ===== */
/* Badge „Löschung am TT.MM.JJJJ“: grau, in den letzten 7 Tagen rot (Kontrast 4,97 bzw. 5,66 : 1 hell) */
.loesch { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--space-2); border-radius: 999px; background: var(--spam-bg); color: var(--text-2); font-size: var(--fs-fuss); white-space: nowrap; }
.loesch .sym { width: 13px; height: 13px; }
.loesch.bald { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
/* .loesch.ausgesetzt (Schloss) erbt bewusst den grauen Grundstil, nie rot (UXP4W1-12) */
.k-preview .loesch-handy { display: none; }
/* Kurzaktionen: Spam und Löschen 8 px nach „Wichtig“ */
button.kurz-knopf.kurz-abstand { margin-left: var(--space-2); }
/* Wischknöpfe links innen: Löschen rot, Spam grau; nie durchgezogen (kein data-durchziehen) */
.zeile .wisch-spam { background: var(--spam-bg); color: var(--spam); }
.zeile .wisch-loeschen { background: var(--danger-bg); color: var(--danger); }
/* Band über der ersten Mail: Symbol, Wort, Frist und höchstens ein Rahmen-Knopf */
.ablage-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--spam-bg); font-size: var(--fs-neben); }
.ablage-leiste > .sym { flex: none; width: 18px; height: 18px; color: var(--spam); }
.ablage-leiste > .ablage-text { flex: 1 1 12rem; min-width: 0; }
.ablage-leiste .bald { color: var(--danger); font-weight: 600; }
.ablage-leiste > form { margin-left: auto; }
.ablage-leiste button.rahmen { font-weight: 600; }
/* Sitzung 0037: Band „Möglicher Betrug“ (Systemregel Betrugsschutz), Fläche und Symbol rot wie die Echtheitswarnung */
.ablage-leiste.betrug { background: var(--danger-bg); }
.ablage-leiste.betrug > .sym, .ablage-leiste.betrug strong { color: var(--danger); }
/* Sitzung 0037: Liste echter Domains je Marke (Seite Schutz vor Betrugsmails) */
.phishing-domains { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.phishing-domains li { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Zweiter Korrekturlauf 0037: Domains als Chips (UXP4-0037-02), ergänzte mit Rahmen und ×; Marken-Überschrift unter der h2
   (UXP4-0037-09); Fehler direkt am Feld (UXP4-0037-01); Grund im Band (03); Verlauf mit rotem Balken (11); 44 px am Handy (04) */
.phishing-domains li { padding: 2px var(--space-2); border-radius: 999px; background: var(--fill); }
.phishing-domains li.ergaenzt { background: transparent; border: 1px solid var(--separator); padding-right: 2px; }
.phishing-domains li.ergaenzt button.chip-weg { min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); line-height: 1; }
.phishing-domains li.ergaenzt button.chip-weg:hover { background: var(--fill); color: var(--danger); }
#domains h3 { font-size: var(--fs-neben); font-weight: 600; color: var(--text-2); margin: var(--space-3) 0 var(--space-1); }
.feld-fehler { margin: var(--space-1) 0 0; color: var(--danger); font-size: var(--fs-neben); }
/* Hinweis am Feld ohne Fehler (Passwort noch einmal eingeben): grau, denn Rot heißt „Fehler“ (Design-Gate P5, UXP5X-12) */
.feld-hinweis { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--fs-neben); }
/* Fehlerbehebung Formulare (Fehler Markus 2026-10-07): abgewiesenes Feld mit rotem Rahmen, auch im Fokus */
.feld[aria-invalid="true"], :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.feld[aria-invalid="true"]:focus-visible, :where(input, select, textarea)[aria-invalid="true"]:focus-visible { outline-color: var(--danger); border-color: var(--danger); }
.ablage-leiste > .ablage-grund { flex-basis: 100%; order: 3; color: var(--text-2); }
/* auch am Handy (dort sonst nowrap, UXP4W1-11): Text und Knopf in Zeile 1, der Grund darunter */
.ablage-leiste:has(> .ablage-grund) { flex-wrap: wrap; }
ul.verlauf li.warn.betrug { box-shadow: inset 3px 0 0 var(--danger); }
/* Kopf der Ansichten Spam und Papierkorb: „‹ Posteingang“, Überschrift mit (i), eine Zeile */
.ablage-zurueck { margin: 0 0 var(--space-1); }
.ablage-zurueck > a { display: inline-flex; align-items: center; gap: 2px; min-height: var(--h-ctrl); color: var(--accent); font-weight: 600; text-decoration: none; }
.ablage-zurueck .sym { width: 17px; height: 17px; }
.ablage-zeile { margin: 0 0 var(--space-3); font-size: var(--fs-neben); color: var(--text-2); }
/* Vorgangsnummer bricht nie um (Aufbewahrung am Vorgang bei 320 px, UXP4W1-14) */
.nummer-fest { white-space: nowrap; }
/* Löschen im Blatt „Mehr“ am Handy in Rot (wie Apple): rote Schrift auf normalem Grund, nie rote Fläche (UXP4W1-01; sonst
   griffe button.gefahr mit --danger-fill und die Schrift wäre rot auf rot) */
.menue-eintrag.gefahr, button.menue-eintrag.gefahr { background: transparent; border-color: transparent; color: var(--danger); }
:is(a, button).menue-eintrag.gefahr:hover, :is(a, button).menue-eintrag.gefahr:active { background: var(--danger-bg); }
.menue-eintrag.gefahr .sym { color: var(--danger); }
/* Leiste der Auswahl: Trennstrich vor Spam und Löschen am Rechner; „Mehr“ nur am Handy mit Skript */
.auswahl-leiste > .leiste-trenner { align-self: stretch; width: 1px; margin: var(--space-1) var(--space-1); background: var(--separator); }
.auswahl-leiste > details[data-menue="auswahl-mehr"] { display: none; }
html:not([data-js]) .auswahl-leiste .nur-mit-js { display: none; }
/* Nebenbefund (Vorschlag p4): im Kopf des Filterblatts am Rechner „Zurücksetzen“ und „Filter“ mit Abstand */
@media screen and (min-width: 601px) {
  .blatt-kopf { grid-template-columns: max-content minmax(0, 1fr) max-content; }
}
@media screen and (max-width: 900px) {
  /* Baustein Handy: Spam und Löschen am Vorgang stehen im Blatt „Mehr“, nicht in der Leiste unten (fünf Knöpfe bleiben) */
  .werkzeugleiste > form.inline[data-werkzeug="spam"], .werkzeugleiste > form.inline[data-werkzeug="loeschen"] { display: none; }
  /* Baustein Handy: Leiste der Auswahl Erledigen · Zuweisen · Spam · Löschen · Mehr (OFFEN A28, F5); Gelesen, Ungelesen, Tag und
     Wiedervorlage über „Mehr“. Tag und Wiedervorlage bleiben als Menüs da: Knopf verborgen, offen ist er der abgedunkelte Grund */
  .auswahl-leiste > .leiste-trenner { display: none; }
  html[data-js] .auswahl-leiste > details[data-menue="auswahl-mehr"] { display: block; }
  html[data-js] .auswahl-leiste > button:is([value="gelesen"], [value="ungelesen"]) { display: none; }
  html[data-js] .auswahl-leiste > details:is([data-menue="auswahl-tag"], [data-menue="auswahl-wiedervorlage"]) { flex: 0 0 0; min-width: 0; }
  html[data-js] .auswahl-leiste > details:is([data-menue="auswahl-tag"], [data-menue="auswahl-wiedervorlage"]):not([open]) > summary { display: none; }
  html[data-js] .auswahl-leiste > details:is([data-menue="auswahl-tag"], [data-menue="auswahl-wiedervorlage"])[open] > summary { position: fixed; inset: 0; z-index: 39; min-width: 0; min-height: 0; padding: 0; }
  html[data-js] .auswahl-leiste > details:is([data-menue="auswahl-tag"], [data-menue="auswahl-wiedervorlage"])[open] > summary > * { display: none; }
}
@media screen and (max-width: 600px) {
  /* Baustein Handy: Badge „Löschung am“ in Zeile 3 vor der Vorschau (bei 320 px bleibt der Absender breit genug) */
  .k-etikett > .loesch { display: none; }
  .k-preview .loesch-handy { display: inline; }
  /* Band bei schmaler Breite: der Text darf schrumpfen, der Knopf bleibt rechts in derselben Zeile (UXP4W1-11) */
  .ablage-leiste { flex-wrap: nowrap; }
  .ablage-leiste > .ablage-text { flex: 1 1 0; }
}
/* Regeln (Sitzung 0032, SPEC docs/SPEC/p4/0032.md §7): Karten mit Nummer, Satz und Zustand; Editor als Satz aus Auswahlfeldern,
   Zeilen brechen am Handy um (kein seitliches Rollen); keine neuen Farben */
.regel .karte-kopf h2 { margin: 0; font-size: var(--fs-h2); }
.regel-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin-right: var(--space-1); border-radius: 999px; background: var(--fill); color: var(--text-2); font-weight: 600; font-size: var(--fs-fuss); }
.regel-satz { margin: var(--space-1) 0; overflow-wrap: anywhere; }
/* Korrekturen Welle 2 (UXP4W2-12, OFFEN A36): Satz in zwei Zeilen mit festen Köpfen „Wenn“ / „Dann“ wie Apple Mail */
dl.regel-satz { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--space-3); }
dl.regel-satz dt { color: var(--text-2); font-weight: 600; }
dl.regel-satz dd { margin: 0; }
.regel-knoepfe { margin-bottom: 0; }
.regel-knoepfe select { width: auto; }
/* „Bearbeiten“ und „…“ der Regelkarte (UXP4W2-01): zusammen rechts in der Knopfzeile, bei 320 px gemeinsam in einer Zeile */
.regel-weitere { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.regel-weitere > details.regel-mehr > summary { justify-content: center; padding: 0; color: var(--text-2); }
.regel-weitere > details.regel-mehr .menue-blatt { left: auto; right: 0; }
.regel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.regel-zeile > select, .regel-zeile > input { flex: 1 1 12rem; min-width: 0; width: auto; }
.regel-zeile > select[name^="b_vergleich"], #regel-modus { flex: 0 1 9rem; }
/* Editorbreite (UXP4W2-10): Formular höchstens 45rem; Bedingung 14rem, Vergleich 9rem, der Wert den Rest */
.regel-editor { max-width: 45rem; }
.regel-zeile > select[data-regel-feld] { flex: 0 1 17rem; }   /* Design-Gate Welle 4 (M4): „Absender ist kein Wawi-Kunde“ wird nicht mehr abgeschnitten */
/* Listen-Bedingung (SPEC p5/regeln-liste-freigabe.md §3): Fehlersätze unter der Zeile, volle Breite. „Mehrere Werte“ gehört
   zum Wertfeld (Design-Gate P5, UXP5X-10): zu steht es still (13 px grau) gleich rechts neben dem Wert und kostet keine eigene
   Zeile, beim Darüberfahren oder mit dem Fokus in der Zeile in --accent; offen steht es unter dem Wert (am Rechner unter der
   Wertspalte eingerückt) mit Abstand zur nächsten Bedingung */
.regel-zeile > .feld-fehler { flex: 1 0 100%; }
.regel-zeile > .regel-werte { flex: none; }
.regel-bedingung + .regel-bedingung { margin-top: var(--space-2); }
.regel-zeile > .regel-werte[open] { flex: 1 0 100%; margin-bottom: var(--space-3); }
.regel-werte > summary { color: var(--text-2); cursor: pointer; font-size: var(--fs-neben); line-height: var(--h-ctrl); white-space: nowrap; }
.regel-bedingung:is(:hover, :focus-within) > .regel-werte > summary { color: var(--accent); }
@media screen and (min-width: 901px) {
  /* Wertspalte: Bedingung 17rem und Vergleich 9rem plus zwei Abstände (UXP4W2-10) */
  .regel-zeile > .regel-werte[open] { flex-basis: calc(100% - 26rem - 2 * var(--space-2)); margin-left: calc(26rem + 2 * var(--space-2)); }
}
.regel-werte > textarea { width: 100%; min-height: calc(var(--h-ctrl) * 2); }
.regel-vorschlag { border-top: 1px solid var(--separator); padding-top: var(--space-2); }
.regel-vorschlag p { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.regel-entfernt { margin: var(--space-4) 0; }
.regel-entfernt > summary { cursor: pointer; color: var(--text-2); }
.regel-entfernt-liste { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.regel-entfernt-liste > li { padding: var(--space-2) 0; border-bottom: 1px solid var(--separator); scroll-margin-top: var(--space-6); }
/* Ablaufbild und Trockenlauf (Sitzung 0035, SPEC docs/SPEC/p4/0035.md §5; Design-Vorschlag p4 Teil 3): Segment „Liste |
   Ablaufbild“ aus .schalter, das Bild als senkrechte Linie von oben nach unten (Punkt je Halt, Linie als ::before des Halts),
   ausgeschaltete Regeln gestrichelt und grau, der Weg einer Mail in --accent, alles andere grau; Text bricht um, kein
   seitliches Rollen bei 390 px. Keine neuen Farben. */
.regel-kopf-knoepfe { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.regel-ansicht { margin-bottom: var(--space-3); }
.regel-blatt { max-width: 45rem; }
.regel-womit { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* UXP4W3b-04: 100 % minus Einzug (wie .regel-einzug); mit width: 100 % ragte das Feld am Handy 8 px über den Rand */
.regel-womit select[name="beispiel"] { width: calc(100% - 16px - var(--space-2)); min-width: 0; }
.ablauf { list-style: none; margin: var(--space-3) 0; padding: 0; max-width: 45rem; }
.ablauf-halt { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-4); }
.ablauf-halt::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; border-left: 2px solid var(--text-2); }
.ablauf-halt:last-child { padding-bottom: 0; }
.ablauf-halt:last-child::before { display: none; }
.ablauf-punkt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; border: 2px solid var(--text-2); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--fs-fuss); }
.ablauf-anfang .ablauf-punkt, .ablauf-ende .ablauf-punkt { width: 16px; height: 16px; margin: 6px; background: var(--text-2); }
.ablauf-text { min-width: 0; overflow-wrap: anywhere; padding-top: 3px; }
.ablauf-text p { margin: 0 0 2px; }
.ablauf-wenn { color: var(--text-2); }
.ablauf-regel.aus::before { border-left-style: dashed; }
.ablauf-regel.aus .ablauf-punkt { border-style: dashed; color: var(--text-2); }
.ablauf-regel.aus .ablauf-text, .ablauf-regel.aus .ablauf-name a { color: var(--text-2); }
/* Weg einer Mail: erreichte Halte und die Linie zwischen ihnen in --accent, der Rest grau; das Ergebnis steht in Worten */
.ablauf.mit-weg .ablauf-halt::before { border-left-color: var(--separator); }
.ablauf.mit-weg .ablauf-punkt { border-color: var(--separator); color: var(--text-2); }
.ablauf.mit-weg .ablauf-anfang .ablauf-punkt, .ablauf.mit-weg .ablauf-ende .ablauf-punkt { background: var(--separator); }
.ablauf.mit-weg .ablauf-halt.weg-weiter::before { border-left-color: var(--accent); border-left-style: solid; }
.ablauf.mit-weg .ablauf-halt.weg .ablauf-punkt { border-color: var(--accent); color: var(--accent); }
.ablauf.mit-weg .ablauf-halt.weg.ablauf-anfang .ablauf-punkt, .ablauf.mit-weg .ablauf-halt.weg.ablauf-ende .ablauf-punkt { background: var(--accent); }
.ablauf.mit-weg .ablauf-halt.weg-trifft .ablauf-punkt { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.ablauf.mit-weg .weg-nicht .ablauf-text, .ablauf.mit-weg .weg-nein .ablauf-wenn, .ablauf.mit-weg .weg-nein .ablauf-dann { color: var(--text-2); }
.ablauf-ergebnis { font-weight: 600; color: var(--text); }
.ablauf.mit-weg .weg-nicht .ablauf-ergebnis, .ablauf.mit-weg .weg-nein .ablauf-ergebnis { font-weight: 400; color: var(--text-2); }
/* Verwaltung › Aufbewahrung (UXP4W2-15): Zustand als kurze Liste, Formular der Prüfungssperre hinter einem Rahmen-Knopf */
.zustands-liste { margin: var(--space-2) 0; padding: 0; list-style: none; }
.zustands-liste > li { padding: var(--space-1) 0; }
details.aufklapp-form > form { margin-top: var(--space-3); }
/* Löschvorschau (Korrekturen Welle 2, UXP4W2-02, -04, -05): eine Tabelle, je Tag ein tbody mit Kopfzeile; am Handy jede Zeile
   in drei Zeilen wie eine Listenzeile, das Kästchen in einem label mit 44 px Trefferfläche */
table.loeschvorschau tr.lv-tag > th { padding-top: var(--space-4); font-size: var(--fs-text); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--separator); }
table.loeschvorschau td.lv-wahl { width: 1%; padding-block: 0; }
.lv-kasten { display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-ctrl); min-height: var(--h-ctrl); cursor: pointer; }
.lv-kasten > input { margin: 0; }
.lv-gruppe-handy { display: none; }
@media screen and (pointer: coarse) {
  .lv-kasten { min-width: 44px; min-height: 44px; }
  .lv-kasten > input { width: 20px; height: 20px; }
}
@media screen and (max-width: 600px) {
  table.loeschvorschau, table.loeschvorschau tbody, table.loeschvorschau tr, table.loeschvorschau td, table.loeschvorschau th { display: block; }
  table.loeschvorschau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.loeschvorschau tr:not(.lv-tag) { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "wahl absender knopf" "wahl betreff knopf" "wahl herkunft herkunft"; column-gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--separator); }
  table.loeschvorschau td { padding: 0; border: 0; }
  table.loeschvorschau td.lv-wahl { grid-area: wahl; width: auto; }
  table.loeschvorschau td.lv-absender { grid-area: absender; font-weight: 600; overflow-wrap: anywhere; }
  table.loeschvorschau td.lv-betreff { grid-area: betreff; overflow-wrap: anywhere; }
  table.loeschvorschau td.lv-herkunft { grid-area: herkunft; color: var(--text-2); font-size: var(--fs-neben); }
  table.loeschvorschau td.lv-gruppe { display: none; }
  table.loeschvorschau td.lv-knopf { grid-area: knopf; align-self: start; }
  .lv-kasten { width: 44px; height: 44px; }
  .lv-gruppe-handy { display: inline; }
}

/* ===== Sitzung 0041: Anhänge ansehen statt herunterladen (SPEC docs/SPEC/p4/0041.md §2, §3) ===== */
/* Anhänge untereinander statt in einer Reihe, eine Zeile je Anhang: Symbol nach Art, der Name öffnet die Ansicht, die Größe
   grau, rechts daneben das Download-Symbol. Gleich am Vorgang, im Editor (hochgeladen und „Aus dem Vorgang“) und in der Suche. */
ul.anhaenge.anhang-liste { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
fieldset.editor-anhaenge ul.anhang-liste { border-top: 0; padding-top: 0; }
li.anhang-zeile { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 28px; }
li.anhang-zeile .anhang-name { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
li.anhang-zeile .anhang-datei { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
li.anhang-zeile .anhang-groesse { flex: none; color: var(--text-2); }
li.anhang-zeile.gesperrt { color: var(--text-2); }
a.anhang-laden { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-s); color: var(--text-2); }
a.anhang-laden:hover, a.anhang-laden:focus-visible { color: var(--text); background: var(--surface-2); }
.fundort a.anhang-laden { width: 24px; height: 24px; margin-left: var(--space-1); vertical-align: middle; }
label.anhang-wahl { display: inline-flex; flex: none; align-items: center; justify-content: center; cursor: pointer; }
/* am Handy und bei Fingerbedienung 44 px Trefferfläche für Name, Download und Kästchen */
@media screen and (max-width: 900px), screen and (pointer: coarse) {
  li.anhang-zeile, li.anhang-zeile .anhang-name { min-height: 44px; }
  a.anhang-laden, .fundort a.anhang-laden, label.anhang-wahl { width: 44px; height: 44px; }
  label.anhang-wahl > input { width: 20px; height: 20px; }
}

/* Design-Gate Nachprüfung 0041 (UX0041-01, -02, -04, -05; Löschvorschau-Nummer) */
fieldset.editor-anhaenge { min-inline-size: 0; }   /* langer Dateiname macht die Seite am Handy nicht breiter */
ul.anhaenge.anhang-liste { width: max-content; max-width: 100%; }
li.anhang-zeile a.anhang-laden { margin-left: auto; }   /* Download-Symbole stehen untereinander */
label.anhang-wahl { min-width: 28px; min-height: 28px; }
li.anhang-zeile a.anhang-name { text-decoration: none; }
li.anhang-zeile a.anhang-name:hover .anhang-datei, li.anhang-zeile a.anhang-name:focus-visible .anhang-datei { text-decoration: underline; }
table.loeschvorschau .nr { white-space: nowrap; }

/* Antworten und Webhooks (Sitzung 0036, SPEC docs/SPEC/p4/0036.md §5): Wortlaut als Absatz, Geschäftszeiten als kleine Tabelle
   je Wochentag (am Handy brechen die zwei Auswahlfelder unter den Tag), Formulare hinter „Wortlaut ändern“ und „Neues Ziel“ */
.aussen-text { white-space: normal; margin: var(--space-2) 0; color: var(--text-2); }
details.aussen-fassung { margin-top: var(--space-2); }
details.aussen-fassung > form { margin-top: var(--space-2); }
/* Korrekturen Welle 3 (UXP4W3-07): Geschäftszeiten kompakt je Zeile „Montag [ab 08:00] – [bis 17:00]“, Felder höchstens 9rem,
   der Tag mittig zur Zeile; bei „geschlossen“ entfallen Strich und „bis“ (hidden aus app.js) */
.aussen-zeiten { display: flex; flex-direction: column; gap: var(--space-1); }
.aussen-tag { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.aussen-tagname { flex: 0 0 7.5rem; font-weight: 500; }
.aussen-tag select.feld { width: auto; max-width: 9rem; }
/* UXP4W3-09: Hinweis ohne Fehlerrot (Bernstein), mit Link */
p.hinweis { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); font-size: inherit; }
p.hinweis a { color: inherit; text-decoration: underline; }
/* UXP4W3-04/06: Trockenlauf-Blatt: Zeitraum nur so breit wie sein Inhalt, Beispielmail unter ihrem Knopf eingerückt */
.regel-blatt select.feld-schmal { width: auto; }
.regel-womit .regel-einzug { margin-left: calc(16px + var(--space-2)); width: calc(100% - 16px - var(--space-2)); }
/* UXP4W3-10: Weiter-Links unter der Regelliste als Listenzeilen mit 44 px (wie die iOS-Einstellungen) */
ul.weiter-liste { list-style: none; margin: var(--space-3) 0; padding: 0; max-width: 45rem; border-top: 1px solid var(--separator); }
ul.weiter-liste > li { border-bottom: 1px solid var(--separator); }
ul.weiter-liste > li > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; text-decoration: none; }
ul.weiter-liste > li > a > span { color: var(--text-2); }
/* UXP4W3-01/03, OFFEN A38: Ablaufbild: Ergebnis fett, Treffer „trifft zu →“, nicht treffende eingeklappt, Ja-Zweig ab vier Regeln */
.ablauf-schluss { font-weight: 600; color: var(--text); }
.ablauf.mit-weg .ablauf-trifft { color: var(--text); font-weight: 600; }
details.ablauf-still > summary { color: var(--text-2); cursor: pointer; font-size: var(--fs-neben); }
.ablauf.mit-weg .weg-nein .ablauf-name a, .ablauf.mit-weg .weg-nicht .ablauf-name a { color: var(--text-2); }
.ablauf-ja { border-left: 2px solid var(--separator); padding-left: var(--space-2); margin-left: var(--space-1); }
.ablauf-ja-marke { font-weight: 600; }
@media (max-width: 480px) {
  .aussen-tagname { flex-basis: 100%; }
  .regel-womit label.check { min-height: 44px; align-items: center; }
  .regel-womit label.check > input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; }
}

/* ===== Sitzung 0042: Liste und Kopfzeile (SPEC docs/SPEC/p4/0042.md) ===== */
/* Kurzaktionen bei Tastaturbedienung (Tab, j/k): nur bei :focus-visible, nie nach Maus oder Rad (app.js setzt data-eingabe);
   eigene Regel, damit Browser ohne :has() die Hover-Regel nicht mit verwerfen */
@media (hover: hover) { :root:not([data-eingabe="zeiger"]) .zeile:has(:focus-visible) > .kurz { display: flex; } }
/* Am Rechner stehen die Kurzaktionen an der Stelle von Gruppe und Datum (wie Gmail), nicht darüber: Gruppe 9.5rem, damit
   Gruppe + Datum (16 + 72 + 12 + 152 = 252 px) die Leiste (4 + höchstens 248 px) genau aufnehmen; das Etikett bleibt frei.
   Gruppe und Datum werden beim Darüberfahren nur unsichtbar (visibility), die Zeile springt nicht. */
@media (min-width: 901px) {
  .liste > .zeile > .konv { grid-template-columns: 52px 40px 11rem minmax(0, 1fr) auto 9.5rem 4.5rem; }
  .liste > .zeile > .kurz { right: var(--space-1); }
}
@media (min-width: 901px) and (hover: hover) {
  .zeile:hover > .konv > :is(.k-group, .k-date) { visibility: hidden; }
}
@media (min-width: 901px) and (hover: hover) {
  :root:not([data-eingabe="zeiger"]) .zeile:has(:focus-visible) > .konv > :is(.k-group, .k-date) { visibility: hidden; }
}
/* schmales Fenster mit Maus (Karte): die Leiste steht rechts in der ersten Zeile; was dort rechts vom Absender steht, wird
   ausgeblendet statt überdeckt (der Punkt links bleibt); die Gruppe in der zweiten Zeile bleibt lesbar */
@media (max-width: 900px) and (hover: hover) {
  .zeile:hover > .konv > :is(.k-etikett, .k-wer, .k-date), .zeile:hover > .konv > .k-status > .platz:not(.platz-punkt) { visibility: hidden; }
}
@media (max-width: 900px) and (hover: hover) {
  :root:not([data-eingabe="zeiger"]) .zeile:has(:focus-visible) > .konv > :is(.k-etikett, .k-wer, .k-date), :root:not([data-eingabe="zeiger"]) .zeile:has(:focus-visible) > .konv > .k-status > .platz:not(.platz-punkt) { visibility: hidden; }
}
/* Neue Mail (Wunsch Markus, einheitliche Breite): die eigene Entwurfsseite (main.wide wie der Vorgang) lässt dieselben Spalten frei
   wie .dreispaltig: ab 1280 px links Liste und rechts Notizen (je 20rem + Abstand), 901 bis 1279 px nur rechts (seit 0047 stehen Mail und rechte Spalte ab 901 px nebeneinander), am Handy
   volle Breite; der Editor steht damit genau dort, wo er beim Antworten im Vorgang steht */
@media (min-width: 1280px) { .editor.editor-seite { margin-left: calc(20rem + var(--space-4)); margin-right: calc(20rem + var(--space-4)); } }
@media (min-width: 901px) and (max-width: 1279px) { .editor.editor-seite { margin-left: 0; margin-right: calc(20rem + var(--space-4)); } }

/* ===== Korrekturen Welle 3b (SPEC p4/0040.md §9, p4/0042.md §6, p4/0035.md §14, p4/0036.md §9) ===== */
/* P4W3b-R01/R02, UXP4W3b-03: „Zuletzt gesucht“ schwebt auf der Trefferseite über der Seite (schiebt nichts), Bezug ist der
   Kopf aus Suchfeld und Liste; in der Kopfzeile liegt die Liste neben dem Formular in nav.top (R13), app.js setzt Lage und Breite */
.suche-kopf { position: relative; }
nav.top > .zuletzt-schwebend { right: auto; }
/* P4W3b-R11: im schmalen Fenster mit Maus (unter 481 px) keine Kurzaktionen: die Leiste (248 px) verdeckte sonst den Absender;
   was die Leiste in der Karte ausblendet, bleibt dann sichtbar (Tasten und das Öffnen des Vorgangs bleiben) */
@media (max-width: 480px) and (hover: hover) {
  .liste > .zeile:hover > .kurz { display: none; }
  .liste > .zeile:hover > .konv > :is(.k-etikett, .k-wer, .k-date), .liste > .zeile:hover > .konv > .k-status > .platz:not(.platz-punkt) { visibility: visible; }
}
@media (max-width: 480px) and (hover: hover) {
  :root:not([data-eingabe="zeiger"]) .liste > .zeile:has(:focus-visible) > .kurz { display: none; }
  :root:not([data-eingabe="zeiger"]) .liste > .zeile:has(:focus-visible) > .konv > :is(.k-etikett, .k-wer, .k-date), :root:not([data-eingabe="zeiger"]) .liste > .zeile:has(:focus-visible) > .konv > .k-status > .platz:not(.platz-punkt) { visibility: visible; }
}
/* UXP4W3b-06: im Trockenlauf-Blatt beide Überschriften gleich (fett, Textfarbe); Zeitraum nur so breit wie sein Inhalt */
form.regel-blatt .feld-kopf > .feld-titel { color: var(--text); font-size: inherit; font-weight: 600; }
.regel-zeile > select.feld-schmal { flex: 0 1 12rem; }
/* UXP4W3b-08: am Handy 44 px hohe Ziele im Trockenlauf (Vorgang, „Weg ansehen“) und im Ablaufbild (Regel, „Bedingungen zeigen“) */
@media screen and (max-width: 600px) {
  a.lauf-link, .ablauf-name > a, details.ablauf-still > summary { display: inline-flex; align-items: center; min-height: var(--h-touch); }
}
/* UXP4W3b-12: die Karte „Weg von …“ mit Abstand unter der Tabelle */
section#ablauf.panel.karte { margin-top: var(--space-4); }
/* UXP4W3b-10: „Bearbeiten“ auf der Grundlinie des Namens; „Diese Suche sichern“ als Aktion (Petrol, fett), nicht wie ein Eintrag */
.gs-zeile { align-items: baseline; }
.gs-sichern > button.gs-sichern-knopf { color: var(--accent); font-weight: 600; }
.gs-fehler { margin: var(--space-1) var(--space-2); }
/* UXP4W3b-11: Kopf der Gruppenkarte oben und unten mit gleicher Luft (die Überschrift trägt keinen eigenen Rand) */
.panel.karte > .karte-kopf > h3 { margin: 0; }
/* UXP4W3b-07: Legende der Listenzeile als kurze Liste, je Zeile Zeichen und Wort */
.hilfe-punkte { display: block; margin: var(--space-1) 0; }
.hilfe-punkt { display: flex; align-items: center; gap: var(--space-2); }
.hilfe-zeichen { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 2rem; color: var(--text-2); }
.hilfe-zeichen > .sym { width: 16px; height: 16px; }

/* ===== Korrekturen Phase 5 Welle 1 (Design-Gate docs/ux/p5-welle1-2026-10-07.md) ===== */
/* UXP5W1-01: 13 Reiter der Verwaltung in einer Zeile von 1181 bis 1440 px (vorher brach „Ereignisse“ in Zeile 2) */
@media screen and (min-width: 1181px) {
  .verwaltung-nav { gap: 0; }
  .verwaltung-nav > a { padding-inline: 6px; }
}
/* UXP5W1-02: Hinweis „Links abgeschaltet“ rot wie das Band „Möglicher Betrug“, Knopf in derselben Zeile rechts */
.link-aus-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); background: var(--danger-bg); color: var(--danger); }
.link-aus-hinweis > form { margin-left: auto; }
/* UXP5W1-05: Muster anlegen ohne Rahmen um die Abschnitte; nur der Abschnitt zum gewählten Aufbau ist sichtbar */
.beleg-formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.beleg-formular legend { padding: 0; font-weight: 600; font-size: var(--fs-neben); color: var(--text-2); }
.beleg-formular:has(#beleg-form option[value="gruppen"]:checked) .bei-praefix,
.beleg-formular:has(#beleg-form option[value="praefix"]:checked) .bei-gruppen { display: none; }
.beleg-formular .stack p > label[for="beleg-zmax"] { display: inline; margin: 0 var(--space-1); }
/* Nachprüfung Welle 1 (N-2): Kontextwörter auf jeder Breite als Raster ohne Trennlinien; am Handy zwei Spalten statt 17 Zeilen */
.beleg-formular ul.ordnerwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); column-gap: var(--space-2); }
.beleg-formular ul.ordnerwahl li { padding: 2px 0; border-bottom: 0; }
@media screen and (min-width: 901px) {
  .beleg-formular ul.ordnerwahl { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}
/* UXP5W1-06: Zustand der Wawi als Karte, Satz in Grundschrift, Alarmzeile darunter klein */
.wawi-zustand-satz { margin: 0 0 var(--space-1); }
/* UXP5W1-11: Knopf „Ausschalten“ in der Tabelle der Vorlagen auf einer Linie mit dem Text daneben */
td > form.inline:has(+ a) { display: inline-flex; vertical-align: middle; margin-right: var(--space-2); }
/* Sitzung 0046: lange Link-Vorlagen und Tracking-Links brechen um statt die Seite zu verbreitern (eine Bildlaufleiste, Ergänzung 9) */
code.umbruch { overflow-wrap: anywhere; word-break: break-all; }

/* ===== Postfach-Filter (docs/SPEC/p5/postfach-filter.md §2, §3; Entwurf docs/ux/postfach-filter-2026-10-07.md) ===== */
/* Knopf: Fächer-Symbol als erstes Element der Filterleiste, 32 px (Handy 44 px über --h-ctrl); gefüllt, wenn gewählt */
details.menue.pf > summary.pf-knopf { justify-content: center; width: var(--h-ctrl); height: var(--h-ctrl); min-height: 0; padding: 0; }
details.menue.pf > summary.pf-knopf .sym { width: 18px; height: 18px; }
/* Blatt am Rechner: fest links, 300 px, von der Unterkante der Kopfzeile (app.js setzt --pf-oben) bis zum Fensterboden */
details.menue.pf > .menue-blatt.pf-blatt { position: fixed; z-index: 45; top: var(--pf-oben, 49px); right: auto; bottom: 0; left: 0; width: 300px; min-width: 0; max-width: 100vw; padding: 0 var(--space-2) var(--space-4); border-width: 0 1px 0 0; border-radius: 0; animation: pf-rein var(--dauer) ease-out; }
@keyframes pf-rein { from { transform: translateX(-100%); } }
/* leichter Schleier über der Liste, nicht über der Kopfzeile: ein Klick darauf schließt (auch ohne Skript, er gehört zum Knopf) */
details.menue.pf[open] > summary::before { content: ""; position: fixed; top: var(--pf-oben, 49px); right: 0; bottom: 0; left: 0; z-index: 44; background: var(--schleier-leicht); cursor: default; }
.pf-blatt .blatt-kopf > .pf-zu { justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: var(--h-ctrl); height: var(--h-ctrl); border-radius: var(--radius-s); color: var(--text-2); }
.pf-blatt .blatt-kopf > .pf-zu:hover { background: var(--fill); }
.pf-blatt .menue-titel.pf-gruppe { margin-top: var(--space-3); }
/* Hierarchie wie die Apple-Seitenleiste (Design-Gate P5, UXP5X-07): Abschnitte 13 px halbfett grau, Gruppen darunter 12 px
   normal ohne Versalien; der erste Abschnitt heißt wie das Blatt und steht nur für Bildschirmleser da */
.pf-blatt .menue-titel[data-abschnitt] { margin-top: var(--space-4); font-size: var(--fs-neben); font-weight: 600; color: var(--text-2); }
.pf-blatt .menue-titel.pf-gruppe { font-size: var(--fs-fuss); font-weight: 400; text-transform: none; letter-spacing: 0; }
.pf-blatt .menue-eintrag { min-height: 36px; padding-left: 28px; white-space: normal; }
.pf-blatt .menue-eintrag.aktiv { background: var(--accent-bg); }
.pf-blatt .pf-text { display: flex; flex-direction: column; min-width: 0; padding: 2px 0; line-height: 1.3; }
.pf-blatt .pf-name, .pf-blatt .pf-adresse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-adresse { color: var(--text-2); font-size: var(--fs-neben); font-weight: 400; }
/* Überschrift der Liste: Postfachname, daneben die Adresse in 13 px grau (wie Apple Mail) */
.kopf-info h1 > .pf-adresse { margin-left: var(--space-2); letter-spacing: 0; }
@media screen and (max-width: 900px) {
  /* Handy: Vollbild-Blatt mit Kopf „Postfächer“ und „Fertig“ (wie Apple Mail am iPhone); × entfällt, Einträge 44 px */
  details.menue.pf > .menue-blatt.pf-blatt { z-index: 50; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; padding: 0 var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; }
  details.menue.pf[open] > summary::before { top: 0; }
  .pf-blatt .blatt-kopf > .pf-zu { display: none; }
  .pf-blatt .menue-eintrag { min-height: var(--h-touch); }
  details.menue.pf > summary.pf-knopf { width: var(--h-touch); height: var(--h-touch); }
  .chips > details.pf { flex: none; }
  .kopf-info h1 > .pf-adresse { display: block; margin-left: 0; }
  /* (i) direkt hinter dem Namen, die Adresse darunter (Design-Gate P5, UXP5X-09): Überschrift und (i) in einer Reihe, oben bündig */
  .kopf-info:has(> h1 > .pf-adresse):has(> button.info) { display: flex; flex-wrap: nowrap; align-items: flex-start; padding-right: 0; }
  .kopf-info:has(> h1 > .pf-adresse):has(> button.info) > h1 { min-width: 0; }
  .kopf-info:has(> h1 > .pf-adresse):has(> button.info) > button.info { align-self: flex-start; margin: 4px 0 0; top: 0; }
}
/* nur ein gesetzter Filter: sein × genügt, „Alle entfernen“ entfällt (UXP5X-09) */
.gefiltert-zeile:not(:has(> a.chip ~ a.chip)) > a.alle-entfernen { display: none; }

/* Anhang im Fenster ansehen (Wunsch Markus 2026-10-07): groß über dem Vorgang, Kopf mit Name und Knöpfen, Inhalt füllt den Rest */
dialog.anhang-modal { width: min(1100px, 94vw); height: 92vh; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); display: flex; flex-direction: column; }
dialog.anhang-modal:not([open]) { display: none; }
dialog.anhang-modal::backdrop { background: var(--schleier-modal); }
.anhang-modal-kopf { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.anhang-modal-titel { flex: 1; min-width: 0; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.anhang-modal-zu { min-width: 44px; min-height: 44px; font-size: 1.4rem; line-height: 1; }
.anhang-modal-inhalt { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--surface); }
img.anhang-modal-inhalt { object-fit: contain; }
@media screen and (max-width: 900px) {
  dialog.anhang-modal { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; border: 0; }
  .anhang-modal-kopf .button { display: none; }
}

/* ===== Sitzung 0048: Wawi-Beleg anhängen im Editor (SPEC docs/SPEC/p5/0048.md §7); nur Tokens, keine eigenen Farben ===== */
.editor-upload .wb-menue { display: inline-block; }
.wb-knopf { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--h-ctrl); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-s); background: none; color: var(--accent); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; list-style: none; }
.wb-knopf::-webkit-details-marker { display: none; }
.wb-knopf:hover { background: var(--fill); }
.wb-knopf .sym { width: 16px; height: 16px; }
.wb-knopf.wb-aus { color: var(--text-2); opacity: .45; cursor: default; }
.wb-knopf.wb-aus:hover { background: none; }
.wb-blatt { width: 22rem; max-width: calc(100vw - 2 * var(--space-4)); padding: 0; }
.wb-blatt > p, .wb-blatt > .wb-gruppe { margin-left: var(--space-3); margin-right: var(--space-3); }
.wb-kunde { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--fs-neben); }
.wb-leer { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.wb-gruppe { margin-top: var(--space-3); }
.wb-titel { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--fs-fuss); font-weight: 600; color: var(--text-2); }
.wb-plakette { padding: 0 var(--space-2); border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: var(--fs-fuss); font-weight: 500; line-height: 18px; }
.wb-zeile { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); min-height: 32px; margin: 0 calc(-1 * var(--space-3)); padding: 1px var(--space-3); font-size: var(--fs-neben); cursor: pointer; }
.wb-zeile:hover { background: var(--fill); }
.wb-zeile input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-fill); }
.wb-nr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.wb-datum { color: var(--text-2); font-variant-numeric: tabular-nums; }
.wb-status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-fuss); }
.wb-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wb-status.wb-bezahlt { color: var(--offen); }
.wb-status.wb-bezahlt::before { background: var(--punkt-offen); }
.wb-status.wb-offen { color: var(--wartet); font-weight: 600; }
.wb-status.wb-offen::before { background: var(--punkt-wartet); }
.wb-aeltere > summary { margin: 0 calc(-1 * var(--space-3)); padding: var(--space-1) var(--space-3); color: var(--accent); font-size: var(--fs-neben); cursor: pointer; }
.wb-stand { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--fs-neben); }
.wb-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--separator); font-size: var(--fs-neben); }
.wb-los { min-height: var(--h-ctrl); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-s); background: var(--accent-fill); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; }
.wb-los:disabled { opacity: .45; cursor: default; }
li.anhang-zeile .wb-marke { flex: none; color: var(--text-2); }
li.anhang-zeile.wb-wartet { color: var(--text-2); }
li.anhang-zeile.wb-fehlt .wb-grund { color: var(--danger); }
li.anhang-zeile.wb-fehlt button { margin-left: 0; }
.wb-hinweis { margin: var(--space-2) 0; }
@media screen and (max-width: 600px) {
  .wb-zeile { min-height: 44px; }
  .wb-los, .wb-knopf { min-height: 44px; }
  .wb-blatt { width: auto; }
}

/* ===== Sitzung 0047: Reiter JTL in der rechten Spalte (SPEC docs/SPEC/p5/0047.md; UX docs/ux/p5-welle3-vorschlag-2026-10-08.md) ===== */
/* Eine Fläche für Rechner und Handy: am Rechner Teil der Spalte (trotz popover), am Handy ein Blatt von unten; nur Tokens */
@media (min-width: 901px) {
  .reiter-inhalt[data-reiter="jtl"] { display: none; }
  .spalte-verlauf:has(.reiter-wahl[value="jtl"]:checked) .reiter-inhalt[data-reiter="jtl"] { display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; overflow: visible; background: transparent; color: inherit; }
  .spalte-verlauf:has(.reiter-wahl[value="jtl"]:checked) .reiter-inhalt[data-reiter="notizen"] { display: none; }
  .jtl-blatt-kopf { display: none; }
  .jtl-chip { display: none; }
}
@supports not selector(:has(*)) {
  @media (min-width: 901px) { .reiter-inhalt[data-reiter="jtl"] { display: block; position: static; inset: auto; width: auto; height: auto; margin: 0 0 var(--space-4); padding: 0; border: 0; overflow: visible; background: transparent; color: inherit; } }
}

.jtl-inhalt { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.jtl-inhalt h3.jtl-abschnitt, .jtl-abschnitt { margin: var(--space-2) 0 calc(-1 * var(--space-1)); color: var(--text-2); font-size: var(--fs-fuss); font-weight: 600; }
.jtl-wahl .kopf-info .jtl-abschnitt { margin: 0; }
.jtl-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.jtl-h { margin: 0; font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.jtl-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-1); margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-neben); overflow-wrap: anywhere; }
.jtl-nr { color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
a.jtl-nr { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); text-decoration: none; }
a.jtl-nr:hover { text-decoration: underline; }
a.jtl-nr .sym { width: 12px; height: 12px; }
.jtl-kunden { margin: var(--space-1) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-neben); }
.jtl-kopie { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--text-2); }
.jtl-kopie:hover, .jtl-kopie:focus-visible { background: var(--accent-bg); color: var(--accent); }
.jtl-kopie .sym { width: 14px; height: 14px; }
.jtl-kopie.kopiert { width: auto; padding: 0 var(--space-1); color: var(--offen); background: transparent; font-size: var(--fs-fuss); font-weight: 600; }
.jtl-band { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--fill); color: var(--text); font-size: var(--fs-neben); }
.jtl-band p { margin: 0; }
.jtl-band > .sym { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--text-2); }
.jtl-band.warnung { background: var(--wartet-bg); }
.jtl-band.warnung > .sym { color: var(--wartet); }
.jtl-band form { margin-top: var(--space-1); }
.jtl-leise, .jtl-leer { margin: 0; color: var(--text-2); font-size: var(--fs-neben); }
.jtl-wahl-liste { margin: var(--space-1) 0 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--separator); border-radius: var(--radius-m); background: var(--surface); }
.jtl-wahl-liste li + li, .jtl-treffer-liste li + li { border-top: 1px solid var(--separator); }
.jtl-wahl-zeile { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-height: var(--h-touch); padding: var(--space-2) var(--space-3); border: 0; border-radius: 0; background: transparent; color: var(--text); font-weight: 400; text-align: left; white-space: normal; }
.jtl-wahl-zeile:hover { background: var(--fill); }
.jtl-wahl-zeile.gewaehlt { background: var(--accent-bg); }
.jtl-wahl-zeile.gewaehlt .jtl-wahl-name { font-weight: 600; }
.jtl-wahl-sub { color: var(--text-2); font-size: var(--fs-fuss); }
.jtl-treffer-liste { margin: var(--space-2) 0 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--separator); border-radius: var(--radius-m); background: var(--surface); }
.jtl-suche-zeile { display: flex; gap: var(--space-2); }
.jtl-suche-zeile .feld { flex: 1 1 auto; min-width: 0; }
.jtl-karte { border: 1px solid var(--separator); border-radius: var(--radius-m); background: var(--surface); }
.jtl-karte + .jtl-karte { margin-top: calc(-1 * var(--space-1)); }
.jtl-karte > summary { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 28px var(--space-2) var(--space-3); list-style: none; cursor: pointer; }
.jtl-karte > summary::-webkit-details-marker { display: none; }
.jtl-karte > summary::after { content: ""; position: absolute; top: 15px; right: var(--space-3); width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform var(--dauer) ease-out; }
.jtl-karte[open] > summary::after { transform: rotate(45deg); }
.jtl-karte-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.jtl-karte-nr { font-weight: 600; }
.jtl-betrag { margin-left: auto; font-variant-numeric: tabular-nums; }
.jtl-plakette { padding: 0 var(--space-2); border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: var(--fs-fuss); font-weight: 600; line-height: 18px; }
.jtl-karte-kunde { color: var(--text-2); font-size: var(--fs-fuss); }
.jtl-karte-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); color: var(--text-2); font-size: var(--fs-neben); }
.jtl-versand.nicht { color: var(--text); font-weight: 600; }
.jtl-zahlung { display: inline-flex; align-items: center; gap: 5px; }
.jtl-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--erledigt); }
.jtl-zahlung.bezahlt { color: var(--offen); }
.jtl-zahlung.bezahlt .jtl-punkt { background: var(--punkt-offen); }
.jtl-zahlung.offen { color: var(--wartet); font-weight: 600; }
.jtl-zahlung.offen .jtl-punkt { background: var(--punkt-wartet); }
.jtl-zahlung.storniert { color: var(--erledigt); }
.jtl-karte > .jtl-leise { padding: 0 var(--space-3); }
.jtl-belege { margin: 0; padding: 0 var(--space-3) var(--space-1); list-style: none; }
.jtl-belege.lose { padding: 0; }
.jtl-beleg, .jtl-retoure { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); min-height: 32px; padding: 4px 0; border-top: 1px solid var(--separator); font-size: var(--fs-neben); }
.jtl-beleg-titel { display: inline-flex; align-items: flex-start; flex: 1 1 8rem; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.jtl-beleg .sym, .jtl-retoure .sym, .jtl-paket .sym { flex: none; width: 16px; height: 16px; color: var(--text-2); }
.jtl-retoure { gap: var(--space-1); color: var(--text); }
.jtl-beleg-aktion:empty { display: none; }
.jtl-beleg > .jtl-leise { flex-basis: 100%; padding-left: calc(16px + var(--space-1)); }
.jtl-pakete { flex-basis: 100%; margin: 0; padding: 0 0 0 calc(16px + var(--space-1)); list-style: none; }
.jtl-paket { display: flex; align-items: center; gap: var(--space-1); min-height: 28px; }
.jtl-paket-text { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.jtl-mehr summary { color: var(--text-2); cursor: pointer; }
.jtl-weitere > summary, .jtl-notiz > summary, .jtl-andere > summary { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; list-style: none; color: var(--accent); font-size: var(--fs-neben); cursor: pointer; }
.jtl-weitere > summary::-webkit-details-marker, .jtl-notiz > summary::-webkit-details-marker, .jtl-andere > summary::-webkit-details-marker { display: none; }
.jtl-notiz > summary .sym { width: 16px; height: 16px; }
.jtl-weitere-liste { margin: 0; padding: 0; list-style: none; }
.jtl-weitere-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); padding: 6px 0; border-top: 1px solid var(--separator); font-size: var(--fs-neben); }
.jtl-fuss { display: flex; flex-direction: column; gap: var(--space-2); }
.jtl-fuss form.inline { align-self: flex-start; }
.jtl-notiz .feld { width: 100%; }

/* Büroklammer an der Belegzeile (nur mit freigeschaltetem PDF; das Skript dazu liefert Sitzung 0048): still, beim Darüberfahren Akzent, angehängt grün, offline grau */
.jtl-klammer { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text-2); }
.jtl-klammer:hover, .jtl-klammer:focus-visible { background: var(--accent-bg); color: var(--accent); }
.jtl-klammer[aria-pressed="true"] { color: var(--offen); }
.jtl-klammer[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: transparent; color: var(--text-2); }
.jtl-klammer .sym { width: 16px; height: 16px; }
/* Handy und Finger zuletzt, damit sie die Grundregeln oben überstimmen (gleiche Spezifität, spätere Regel gewinnt) */
@media (max-width: 900px) and (min-width: 1px) {
  /* Reiter JTL steht am Handy im Chip der Metazeile; die Spalte unter der Mail zeigt Notizen und Verlauf */
  .reiter label[for^="reiter-jtl-"], .reiter input.reiter-wahl[value="jtl"] { display: none; }
  .spalte-verlauf:has(.reiter-wahl[value="jtl"]:checked) label[for^="reiter-notizen-"] { background: var(--segment-aktiv); font-weight: 600; box-shadow: var(--shadow-segment); }
  .meta-zeile .jtl-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 0; margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-neben); font-weight: 400; }
  .meta-zeile .jtl-chip strong { color: var(--accent); font-weight: 600; }
  .meta-zeile .jtl-chip.leer strong { color: var(--text-2); }
  .meta-zeile .jtl-chip .sym { width: 14px; height: 14px; }
  .meta-zeile .jtl-chip .jtl-chip-nr { font-variant-numeric: tabular-nums; }
  .meta-zeile .jtl-chip + .notizen-sprung { margin-left: var(--space-2); }
  /* Blatt: Seite dahinter gesperrt, genau ein Bildlauf zur Zeit (Menüblatt, Ausnahme der Regel: den Bildlauf bringt das popover selbst mit), Kopf mit „Fertig“ */
  .jtl-blatt:popover-open { position: fixed; inset: auto 0 0 0; z-index: 60; width: 100%; max-block-size: 88vh; margin: 0; padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); overscroll-behavior: contain; border: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--bg); color: var(--text); box-shadow: var(--shadow-pop); }
  .jtl-blatt::backdrop { background: var(--backdrop); }
  body:has(.jtl-blatt:popover-open) { overflow: hidden; }
  .jtl-blatt-kopf { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: var(--h-touch); margin-bottom: var(--space-2); background: var(--bg); font-size: var(--fs-h2); }
  .jtl-blatt-kopf .fertig { min-height: var(--h-touch); }
  .jtl-belege .jtl-beleg, .jtl-retoure { min-height: var(--h-touch); }
  /* alle Knöpfe und Links im Blatt mindestens 44 px (Design-Gate Welle 3, M3); Links im Text ohne Zeilenwachstum (negativer Rand) */
  .jtl-blatt :is(.jtl-weitere, .jtl-notiz, .jtl-andere, .jtl-mehr) > summary { min-height: var(--h-touch); }
  .jtl-blatt :is(button.still, .jtl-suche-zeile button, .jtl-wahl-zeile) { min-height: var(--h-touch); }
  .jtl-blatt .jtl-klammer { width: var(--h-touch); height: var(--h-touch); }
  .jtl-blatt .jtl-paket { min-height: var(--h-touch); }
  .jtl-blatt :is(a.jtl-nr, .jtl-band a, .jtl-leer a) { padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
}
@media (pointer: coarse) and (min-width: 1px) {
  /* Trefferfläche 44 px ohne Zeilenwachstum (negativer Rand wie bei der Sprechblase) */
  .meta-zeile .jtl-chip { min-height: 44px; margin-block: -10px; padding-inline: 6px; margin-right: -4px; }
  .jtl-kopie { width: 44px; height: 44px; margin: -10px -8px; }
}
/* Werkzeugleiste der Mail bei 901 bis 1023 px (Design-Gate Welle 3, M2): die Mittelspalte ist dort schmal, Erledigen und Wiedervorlage
   zeigen nur ihr Symbol (Name steht im aria-label und im Hinweistext), damit die Leiste nicht über die Spalte ragt */
@media (min-width: 901px) and (max-width: 1023px) {
  [data-werkzeug="erledigen"] .wz-wort, [data-menue="wiedervorlage"] .wz-wort { display: none; }
}
/* ===== Ende Sitzung 0047 ===== */

/* ===== Sitzung 0050: Regeln mit JTL-Daten (nur Tokens; Plakette „Wawi“, Band bei fehlender Anbindung, Schutz-Schild, „Bleibt im Posteingang“) ===== */
.plakette-wawi { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: var(--fs-fuss); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: baseline; }
.wawi-band { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--wartet-bg); color: var(--text); font-size: var(--fs-neben); overflow-wrap: anywhere; }
.wawi-band .sym { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--wartet); }
.schutz-schild { display: inline-flex; vertical-align: middle; color: var(--text-2); cursor: help; }
.schutz-schild .sym { width: 14px; height: 14px; }
.regel-schutz { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--fs-fuss); }
.regel-schutz[hidden] { display: none; }
.regel-bleibt-zaehler { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--accent-bg); color: var(--text); }
.regel-bleibt-zaehler .sym { flex: none; width: 16px; height: 16px; color: var(--accent); }
.bleibt-zeile { display: inline-flex; align-items: flex-start; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); background: var(--accent-bg); color: var(--text); overflow-wrap: anywhere; }
.bleibt-zeile .sym { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--accent); }
/* ===== Ende Sitzung 0050 ===== */

/* ===== Korrekturen Welle 4 (Design-Gate M5) ===== */
/* Design-Gate Welle 4 (M5): das Schild ist fokussierbar (Tab, Tippen); die Erklärung steht beim Darüberfahren und mit dem Fokus sichtbar da,
   am Handy als Blatt unten wie die Hilfe */
.schutz-schild { position: relative; }
.schutz-schild::after { content: ""; position: absolute; inset: -14px; }
.schutz-schild:hover, .schutz-schild:focus-visible { color: var(--accent); }
.schutz-text { display: none; position: absolute; z-index: 20; inset-block-start: calc(100% + var(--space-1)); inset-inline-start: 0; width: max-content; max-width: min(280px, calc(100vw - 2 * var(--space-4))); padding: var(--space-3) var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); font-size: var(--fs-neben); font-weight: 400; line-height: var(--lh); text-align: left; white-space: normal; }
.schutz-schild:hover > .schutz-text, .schutz-schild:focus > .schutz-text, .schutz-schild:focus-within > .schutz-text { display: block; }
@media screen and (max-width: 600px) {
  .schutz-text { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; border-radius: var(--radius-l) var(--radius-l) 0 0; padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); font-size: var(--fs-text); }
}
/* ===== Ende Korrekturen Welle 4 ===== */

/* ===== Sitzung 0051: Notiz an die Wawi (SPEC docs/SPEC/p5/0051.md §7; Gestaltung docs/ux/p5-welle4-vorschlag-2026-10-08.md 3); nur Tokens ===== */
.notiz-blatt { display: flex; flex-direction: column; gap: var(--space-3); max-width: 440px; margin-inline: auto; }
.notiz-blatt form { display: flex; flex-direction: column; gap: var(--space-3); }
.notiz-zeile { display: flex; flex-direction: column; gap: var(--space-1); }
.notiz-etikett { margin: 0; font-size: var(--fs-neben); font-weight: 600; color: var(--text-2); }
.notiz-wert { color: var(--text); overflow-wrap: anywhere; }
.notiz-vorschau { padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--fill); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.notiz-band { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--wartet-bg); color: var(--text); }
.notiz-knoepfe { justify-content: flex-end; }
.notiz-nochmal { display: flex; flex-direction: column; gap: var(--space-2); }
.notiz-haken { display: flex; align-items: flex-start; gap: var(--space-2); }
.notiz-zuletzt { margin: var(--space-1) 0 0; }
.notiz-blatt button[aria-disabled="true"], .jtl-notiz button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.notiz-blatt :is(button, a.button) { min-height: var(--h-touch); }
/* ===== Ende Sitzung 0051 ===== */

/* ===== Sitzung 0052: Prüfkarte „Doppelter Kunde“ (SPEC docs/SPEC/p5/0052.md; Gestaltung docs/ux/p5-0052-vorschlag-2026-10-08.md); nur Tokens ===== */
.dk-karte { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--separator); border-radius: var(--radius-m); background: var(--surface); }
.dk-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-2); }
.dk-h { margin: 0; font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; }
.dk-fazit { flex-basis: 100%; margin: 0; color: var(--text-2); font-size: var(--fs-neben); }
.dk-fazit strong { color: var(--text); font-weight: 600; }
.dk-band { margin-bottom: var(--space-2); }
.dk-namenzeile { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--fs-text); }
.dk-nz { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-1); }
.dk-nz-name { font-weight: 600; }
.dk-pfeil, .dk-gleichname { color: var(--text-2); }
.dk-ungeprueft { flex-basis: 100%; margin: 0; color: var(--text-2); font-size: var(--fs-fuss); }
.dk-tabelle-huelle { min-width: 0; }
.dk-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-neben); }
.dk-tabelle th, .dk-tabelle td { padding: 6px var(--space-3); border-top: 1px solid var(--separator); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.dk-tabelle thead th, .dk-tabelle thead td { border-top: 0; }
.dk-ecke, .dk-tabelle th.dk-feld { width: 6.5rem; }
.dk-tabelle th.dk-feld { color: var(--text-2); font-size: var(--fs-fuss); font-weight: 600; }
.dk-spalte { font-weight: 400; }
.dk-rolle { display: block; color: var(--text-2); font-size: var(--fs-fuss); font-weight: 600; }
.dk-nr { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-1); font-size: var(--fs-h2); font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-spalte .jtl-plakette { display: inline-block; margin: 2px var(--space-1) 0 0; }
.dk-plakette-leer { display: inline-block; margin-top: 2px; padding: 0 var(--space-2); border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: var(--fs-fuss); font-weight: 600; line-height: 18px; }
.dk-fehlt { background: var(--fill); color: var(--text-2); }
.dk-anders { background: var(--wartet-bg); color: var(--text); }
.dk-gleich { color: var(--text); }
.dk-gleich-wort { margin-left: var(--space-2); color: var(--text-2); font-size: var(--fs-fuss); }
.dk-leer { color: var(--text-2); }
.dk-wer { display: none; }
.dk-weitere { margin-top: var(--space-2); }
.dk-weitere > summary { padding: var(--space-1) 0; color: var(--text-2); cursor: pointer; list-style: none; }
.dk-weitere > summary::-webkit-details-marker { display: none; }
.dk-weitere-liste { margin: 0; padding: 0; list-style: none; }
.dk-weitere-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); padding: 6px 0; border-top: 1px solid var(--separator); font-size: var(--fs-neben); }
.dk-w-name { font-weight: 600; }
.dk-w-sub { flex-basis: 100%; color: var(--text-2); font-size: var(--fs-fuss); }
.dk-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.dk-aktionen form.inline { margin: 0; }
.dk-aktionen .dk-menue { margin-left: auto; }
.dk-aktionen button[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
details.dk-menue .menue-blatt { left: auto; right: 0; min-width: 21rem; }
@media (min-width: 901px) {
  /* Gate M2: die Karte steht am Seitenende, das Blatt öffnet nach oben, damit die Erledigen-Knöpfe im Bild bleiben */
  details.dk-menue .menue-blatt { top: auto; bottom: 100%; }
}
.dk-weitere-handy { display: none; }
.dk-anleitung { margin: var(--space-1) var(--space-2); padding-left: var(--space-4); color: var(--text-2); font-size: var(--fs-neben); line-height: 1.4; }
.dk-fertig { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; }
.dk-geprueft { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--fs-neben); }
.dk-geprueft .sym { flex: none; margin-top: 1px; color: var(--offen); }
.dk-wer-datum { color: var(--text-2); }
@media (max-width: 900px) and (min-width: 1px) {
  /* Handy: nach Feldern gruppiert, jede Zelle nennt ihre Nummer; Knöpfe untereinander in voller Breite (44 px) */
  .dk-tabelle, .dk-tabelle tbody, .dk-tabelle tr, .dk-tabelle th, .dk-tabelle td { display: block; width: auto; }
  .dk-tabelle thead tr { display: flex; gap: var(--space-2); }
  .dk-tabelle thead th { flex: 1 1 0; min-width: 0; padding-inline: 0; }
  .dk-tabelle .dk-ecke { display: none; }
  .dk-tabelle tbody tr { padding: var(--space-1) 0; border-top: 1px solid var(--separator); }
  .dk-tabelle tbody th, .dk-tabelle tbody td { padding: 2px 0; border-top: 0; }
  .dk-tabelle td.dk-zelle { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: 4px var(--space-2); margin-top: 2px; border-radius: var(--radius-s); }
  .dk-wer { display: inline; min-width: 5rem; color: var(--text-2); font-size: var(--fs-fuss); font-variant-numeric: tabular-nums; }
  .dk-aktionen { flex-direction: column; align-items: stretch; }
  .dk-aktionen > button, .dk-aktionen > form, .dk-aktionen > details, .dk-aktionen .dk-namen { width: 100%; }
  .dk-aktionen :is(button, summary.button) { min-height: var(--h-touch); width: 100%; }
  .dk-aktionen .dk-menue { margin-left: 0; }
  .dk-karte .menue-eintrag { min-height: var(--h-touch); }
  /* Gate M3: am Handy nur Alter und Neuer Kunde; der Kandidat steht unter „weitere Kunden“, Zeilen ohne Werte entfallen */
  .dk-tabelle .dk-kand, .dk-tabelle tr.dk-leerzeile, .dk-weitere-desk { display: none; }
  .dk-weitere-handy { display: block; }
  .dk-weitere > summary { display: flex; align-items: center; min-height: var(--h-touch); }
  /* Gate M7: Titel des Blatts links wie beim JTL-Blatt */
  .dk-karte .blatt-kopf { grid-template-columns: minmax(0, 1fr) auto; }
  .dk-karte .blatt-kopf > .blatt-links { display: none; }
  .dk-karte .blatt-kopf > .blatt-titel { grid-column: 1; text-align: left; }
  .dk-nr .jtl-kopie { width: var(--h-touch); height: var(--h-touch); margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-2)); }
}
/* ===== Ende Sitzung 0052 ===== */

/* ===== Sitzung 0057: Kosten der KI (Verwaltung › KI), nur Tokens aus dem Farbsystem ===== */
.ki-betrag { margin: 0 0 var(--space-2); font-size: var(--fs-text); }
.ki-balken { position: relative; height: 10px; margin: 0 0 var(--space-2); border-radius: 999px; background: var(--fill); overflow: hidden; }
.ki-fuell { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ki-balken.warn .ki-fuell { background: var(--punkt-wartet); }
.ki-balken.stopp .ki-fuell { background: var(--punkt-danger); }
.ki-marke { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text-2); }
.ki-w-0 { width: 0%; }
.ki-w-5 { width: 5%; }
.ki-w-10 { width: 10%; }
.ki-w-15 { width: 15%; }
.ki-w-20 { width: 20%; }
.ki-w-25 { width: 25%; }
.ki-w-30 { width: 30%; }
.ki-w-35 { width: 35%; }
.ki-w-40 { width: 40%; }
.ki-w-45 { width: 45%; }
.ki-w-50 { width: 50%; }
.ki-w-55 { width: 55%; }
.ki-w-60 { width: 60%; }
.ki-w-65 { width: 65%; }
.ki-w-70 { width: 70%; }
.ki-w-75 { width: 75%; }
.ki-w-80 { width: 80%; }
.ki-w-85 { width: 85%; }
.ki-w-90 { width: 90%; }
.ki-w-95 { width: 95%; }
.ki-w-100 { width: 100%; }
.ki-m-0 { left: 0%; }
.ki-m-5 { left: 5%; }
.ki-m-10 { left: 10%; }
.ki-m-15 { left: 15%; }
.ki-m-20 { left: 20%; }
.ki-m-25 { left: 25%; }
.ki-m-30 { left: 30%; }
.ki-m-35 { left: 35%; }
.ki-m-40 { left: 40%; }
.ki-m-45 { left: 45%; }
.ki-m-50 { left: 50%; }
.ki-m-55 { left: 55%; }
.ki-m-60 { left: 60%; }
.ki-m-65 { left: 65%; }
.ki-m-70 { left: 70%; }
.ki-m-75 { left: 75%; }
.ki-m-80 { left: 80%; }
.ki-m-85 { left: 85%; }
.ki-m-90 { left: 90%; }
.ki-m-95 { left: 95%; }
.ki-m-100 { left: 100%; }
.ki-band { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); }
.ki-band.warn { background: var(--wartet-bg); color: var(--wartet); }
.ki-band.stopp { background: var(--danger-bg); color: var(--danger); }
.ki-freigabe { margin-bottom: var(--space-3); }
/* ===== Ende Sitzung 0057 ===== */
/* ===== Sitzung 0058: KI-Freischaltung (Schulungsseite, Mein Konto › KI, Postfach-Freigaben) ===== */
.ki-schulung { max-width: 720px; }
.ki-karten { list-style: none; margin: var(--space-4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ki-karte { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); }
.ki-karte h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.ki-karte p { margin: 0 0 var(--space-2); max-width: 40rem; }
.ki-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: var(--fs-neben); font-weight: 600; }
.ki-mehr > summary { display: inline-flex; align-items: center; min-height: var(--h-ctrl); color: var(--accent); cursor: pointer; font-size: var(--fs-neben); font-weight: 600; }
.ki-mehr[open] > summary { margin-bottom: var(--space-1); }
.ki-mehr > p { color: var(--text-2); font-size: var(--fs-neben); }
.ki-fuss { font-size: var(--fs-fuss); margin-top: var(--space-3); }
.ki-postfaecher { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ki-postfach { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--separator); }
.ki-postfach:last-child { border-bottom: 0; padding-bottom: 0; }
.ki-postfach-name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) and (min-width: 1px) {
  .ki-mehr > summary { min-height: var(--h-touch); }
  .ki-schulung .actions > button, .ki-schulung a.button, .ki-postfach form button, .ki-konto-seite .button, .ki-konto-seite summary.button { min-height: var(--h-touch); }
  .ki-schulung .actions > button, .ki-postfach form { width: 100%; }
  .ki-postfach form button { width: 100%; }
}
/* ===== Ende Sitzung 0058 ===== */
/* ===== Sitzung 0059: Mein Schreibstil (Mein Konto › KI) ===== */
.ki-stil-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.ki-beispiele { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ki-beispiel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--separator); }
.ki-beispiel:last-child { border-bottom: 0; }
.ki-beispiel-text { min-width: 0; overflow-wrap: anywhere; }
.ki-stil-lesen { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 40rem; }
@media (max-width: 900px) and (min-width: 1px) {
  .ki-stil-aktionen .button, .ki-stil-aktionen button, .ki-beispiel button, .ki-konto-seite .actions .button { min-height: var(--h-touch); }
  .ki-beispiel form, .ki-beispiel button { width: 100%; }
}
/* ===== Ende Sitzung 0059 ===== */
/* ===== Design-Korrekturen Phase 7 Welle 1 bis 3 (Gate M1 bis M10) ===== */
/* M1: Anbieterkarten zwei Spalten ab 901 px, darunter untereinander */
.ki-anbieter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ki-anbieter > .panel { min-width: 0; margin-bottom: 0; }
.ki-anbieter + .panel.karte, .ki-verwaltung > .panel.karte + .ki-anbieter { margin-top: var(--space-4); }
.ki-verwaltung .ki-anbieter .feld { max-width: 100%; }
/* M2: IAM-Richtlinie zugeklappt, volle Höhe ohne Bildlauf im Feld */
pre.ki-iam { margin: var(--space-2) 0; padding: var(--space-3); max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fill); border: 1px solid var(--separator); border-radius: var(--radius-s); font-size: var(--fs-neben); }
/* M3: Checkliste vor der Einrichtung, Funktionstabelle */
.ki-schritte { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); max-width: 40rem; }
.ki-verwaltung table.karten td .feld { max-width: 100%; }
.ki-alles { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--separator); }
/* M4: Schreibstil-Feld wächst mit dem Text, ohne eigenen Bildlauf */
textarea.ki-stiltext { field-sizing: content; min-height: calc(var(--h-ctrl) * 3); overflow-y: hidden; resize: none; }
/* M8: Kopfpanel Mein Konto › KI in einer Zeile, Satz in Textgröße */
.ki-kopfpanel { padding-block: var(--space-3); }
.ki-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ki-kopf > details.aussen-fassung { margin-top: 0; }
p.ki-kopf-satz { margin: var(--space-2) 0 0; font-size: var(--fs-text); color: var(--text-2); max-width: 40rem; }
/* M10: Hinweissätze auf den KI-Seiten neutral, der Strich bleibt Warnungen vorbehalten; Aufklapper bündig */
.ki-verwaltung p.folge, .ki-konto-seite p.folge { border-left: 0; padding-left: 0; color: var(--text-2); }
.ki-verwaltung details.aussen-fassung > summary.button.still, .ki-konto-seite details.aussen-fassung > summary.button.still { padding-left: 0; }
@media (max-width: 900px) and (min-width: 1px) {
  .ki-anbieter { grid-template-columns: minmax(0, 1fr); }
  /* M7: Ziele mindestens 44 px */
  a.ki-zurueck { display: inline-flex; align-items: center; min-height: var(--h-touch); }
  .ki-mehr > summary { min-width: var(--h-touch); padding-inline: var(--space-2); }
  .ki-verwaltung .ki-alles button, .ki-verwaltung .ki-alles summary.button, .ki-verwaltung .ki-anbieter button, .ki-verwaltung .ki-anbieter summary.button, .ki-verwaltung details.aussen-fassung > summary.button { min-height: var(--h-touch); }
}
/* ===== Ende Design-Korrekturen Welle 1 bis 3 ===== */

/* ===== Sitzung 0062: Chip „Zusage erkannt“ (KI-Hilfe) im Platz der Zusage-Zeile ===== */
.ki-zusage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--separator); border-radius: var(--radius-m); }
.ki-zusage[hidden] { display: none; }
.ki-zusage-text { display: inline-flex; align-items: center; gap: var(--space-2); flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.ki-zusage-text .sym { width: 16px; height: 16px; flex: none; color: var(--accent); }
.ki-zusage-knoepfe { display: inline-flex; gap: var(--space-2); }
.ki-zusage-auftrag { flex-basis: 100%; font-size: var(--fs-neben); color: var(--text-2); }
@media (max-width: 600px) and (min-width: 1px) {
  .ki-zusage-knoepfe button { min-height: var(--h-touch); min-width: var(--h-touch); }
  .ki-zusage-knoepfe { flex: 1 1 100%; }
  .ki-zusage-knoepfe button { flex: 1 1 0; }
}
/* ===== Ende Sitzung 0062 ===== */

/* Zwei-Faktor-Anmeldung (Sitzung 0064): der QR-Code bleibt in beiden Modi schwarz auf weiß (sonst liest ihn keine App), der Schlüssel zum
   Abtippen und die Notfall-Codes stehen in fester Schrift; beim Drucken bleibt nur die Seite mit den Codes. */
.qr { display: block; width: 240px; max-width: 100%; height: auto; border: 1px solid var(--separator); border-radius: var(--radius-s); margin: var(--space-2) 0; }
.zf-schluessel { font-family: var(--mono); font-size: var(--fs-text); letter-spacing: .04em; overflow-wrap: anywhere; }
.notfall-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2) var(--space-5); font-family: var(--mono); font-size: var(--fs-h2); margin: 0 0 var(--space-4); padding-left: var(--space-5); }
@media print { nav.top, .infostreifen, .flash, .nicht-drucken { display: none; } }