/* Controlboard – das einzige Stylesheet (docs/design/controlboard-design.md, nach der Vorlage von Matthias).
   Alles Aussehen hängt an den Tokens in :root. Wer das Layout austauscht, ändert hier; die Seiten liefern nur
   Struktur und Klassen. Mobile first: eine Spalte mit Kopfleiste und Tableiste, ab 960px Seitenleiste in Navy.
   Kein Dunkelmodus (Entscheidung 18.10.2026). Keine Schatten außer Overlay und Auswahlring. */

@font-face { font-family: "Fraunces"; src: url(schriften/fraunces-latin-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Rec Sans"; src: url(schriften/recursive-sans.woff2) format("woff2"); font-weight: 300 1000; font-display: swap; }
@font-face { font-family: "Rec Mono"; src: url(schriften/recursive-mono.woff2) format("woff2"); font-weight: 300 1000; font-display: swap; }

:root {
  /* Farben */
  --papier: #FAF8F4;
  --papier-2: #F1EEE7;
  --flaeche: #FFFDF9;
  --weiss: #FFFFFF;
  --tinte: #15181F;
  --tinte-2: #3F4452;
  --grau: #5B6170;
  --linie: #E2DDD3;
  --linie-leise: #EDE8DF;
  --hover: #F6F3EC;
  --neu: #F3F7FD;
  --navy: #0B2242;
  --blau: #1769D2;
  --blau-hell: #1973E7;
  --blau-ring: #C9DBF6;
  --koralle: #F2665F;
  --koralle-text: #B34B46;
  --bernstein: #E8A33D;
  --bernstein-text: #7A4E06;
  --gruen-text: #276B4D;

  /* Seitenleiste in Navy */
  --leiste-text: #FAF8F4;
  --leiste-leise: #8E9AB3;
  --leiste-nav: #C5CCDA;
  --leiste-aktiv: rgba(250, 248, 244, .1);
  --leiste-hover: rgba(250, 248, 244, .06);
  --leiste-linie: rgba(250, 248, 244, .1);

  /* Töne der Chips: Hintergrund, Text, Rand */
  --ton-neutral: #F1EEE7;   --ton-neutral-text: #3F4452;   --ton-neutral-rand: #E2DDD3;
  --ton-blau: #E8F0FC;      --ton-blau-text: #1458B8;      --ton-blau-rand: #C9DBF6;
  --ton-bernstein: #FBEFD9; --ton-bernstein-text: #7A4E06; --ton-bernstein-rand: #F0D9A8;
  --ton-koralle: #FCE8E6;   --ton-koralle-text: #9E3F3A;   --ton-koralle-rand: #F4C7C3;
  --ton-gruen: #E4F1E9;     --ton-gruen-text: #276B4D;     --ton-gruen-rand: #C3E0CF;
  --ton-leise: transparent; --ton-leise-text: #5B6170;     --ton-leise-rand: #D3CDC1;

  /* Hervorhebungen */
  --tisch: #FFF7F6;          /* Spalte „Dein Tisch“ */
  --entwurf: #FFFBF3;        /* Entwurf-Blase */

  /* Schriften */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Rec Sans", system-ui, sans-serif;
  --mono: "Rec Mono", ui-monospace, monospace;

  /* Formen */
  --radius-feld: 10px;
  --radius-karte: 12px;
  --radius-panel: 16px;
  --radius-pille: 999px;
  --rand: 1px solid var(--linie);
  --rand-leise: 1px solid var(--linie-leise);
  --ring: 0 0 0 2px var(--blau-ring);
  --overlay-schatten: -24px 0 48px rgba(21, 24, 31, .12);

  /* Abstände 4 · 8 · 12 · 16 · 20 · 28 · 40 */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 20px; --a6: 28px; --a7: 40px;

  /* Maße */
  --leiste-breite: 236px;
  --inhalt-breite: 1240px;
  --kopfleiste-hoehe: 56px;
  --tableiste-hoehe: 60px;
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 15px/1.55 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 var(--a3); color: var(--tinte); }
h1 { font-size: 26px; }
h2 { font-size: 20px; margin-top: var(--a6); }
h3 { font-size: 17px; }
p { margin: 0 0 var(--a3); }
a { color: var(--blau); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: 3px; }
code, .mono { font-family: var(--mono); font-variation-settings: 'MONO' 1; }
@media (min-width: 960px) { h1 { font-size: 34px; } }

.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: var(--a4); top: -100px; z-index: 100; background: var(--tinte); color: var(--papier); padding: 12px 18px; border-radius: var(--radius-pille); text-decoration: none; }
.sprung:focus { top: var(--a4); }

/* Kicker: Mono, groß, gesperrt */
.kicker { font: 500 11px/1.3 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); margin: 0 0 var(--a2); }
.kicker a { color: inherit; }
.unterzeile { color: var(--tinte-2); font-size: 15px; max-width: 62ch; }
.leer { color: var(--grau); }
.leise { color: var(--grau); font-size: 13px; }
.nebenbei { margin-top: var(--a5); font-size: 14px; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.hinweis-text { color: var(--grau); font-size: 13px; margin-top: var(--a3); }
.zahl { font: 500 26px/1 var(--mono); font-variation-settings: 'MONO' 1; }
.protokoll { font: 400 13px/1.5 var(--mono); font-variation-settings: 'MONO' 1; }

/* Kopf einer Listenseite */
.seitenkopf { margin-bottom: var(--a5); }
.seitenkopf h1 { font-size: 30px; margin-bottom: var(--a2); }
@media (min-width: 960px) { .seitenkopf h1 { font-size: 40px; } }

/* ---------- Knöpfe ---------- */

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--a2); min-height: 44px; cursor: pointer; text-decoration: none;
  font: 600 14px/1.1 var(--sans); padding: 11px 18px; border-radius: var(--radius-pille); border: 1px solid var(--blau); background: var(--blau); color: var(--weiss); }
.knopf:hover { background: #135BB8; border-color: #135BB8; text-decoration: none; }
.knopf-primaer { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.knopf-dunkel { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.knopf-dunkel:hover { background: #2A2F3A; border-color: #2A2F3A; }
.knopf-sekundaer, .knopf-zart { background: transparent; border-color: var(--tinte); color: var(--tinte); }
.knopf-sekundaer:hover, .knopf-zart:hover { background: var(--hover); border-color: var(--tinte); }
.knopf-gefaehrlich { background: transparent; border-color: var(--ton-koralle-rand); color: var(--koralle-text); }
.knopf-gefaehrlich:hover { background: var(--ton-koralle); border-color: var(--ton-koralle-rand); }
.knopf-klein, .knopf-zart { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.knopf-breit { width: 100%; }
/* Platzhalter für spätere Aktionen: sichtbar, aber ohne Funktion */
.knopf-bald, .knopf-bald:hover { opacity: .5; cursor: not-allowed; }
.knopf-primaer.knopf-bald:hover { background: var(--blau); border-color: var(--blau); }
.knopf-sekundaer.knopf-bald:hover, .knopf-gefaehrlich.knopf-bald:hover { background: transparent; }
.bald { font: 500 10px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--radius-pille); border: 1px solid currentColor; }
.knopfleiste { display: flex; flex-wrap: wrap; gap: var(--a2); }
@media (min-width: 960px) { .knopf { min-height: 40px; } }

/* ---------- Chips und Pillen ---------- */

.chip { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1.4 var(--sans); padding: 2px 9px; border-radius: var(--radius-pille); border: 1px solid; white-space: nowrap; vertical-align: middle; }
.chip-zeichen { font-size: 11px; line-height: 1; }
.chip-neutral { background: var(--ton-neutral); color: var(--ton-neutral-text); border-color: var(--ton-neutral-rand); }
.chip-blau { background: var(--ton-blau); color: var(--ton-blau-text); border-color: var(--ton-blau-rand); }
.chip-bernstein { background: var(--ton-bernstein); color: var(--ton-bernstein-text); border-color: var(--ton-bernstein-rand); }
.chip-koralle { background: var(--ton-koralle); color: var(--ton-koralle-text); border-color: var(--ton-koralle-rand); }
.chip-gruen { background: var(--ton-gruen); color: var(--ton-gruen-text); border-color: var(--ton-gruen-rand); }
.chip-leise { background: var(--ton-leise); color: var(--ton-leise-text); border-color: var(--ton-leise-rand); }
.chip-navy { background: var(--navy); color: var(--papier); border-color: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Pillen-Tabliste (Umschalter, Filter) */
.pillen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--a4); }
.pille { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: var(--radius-pille); border: var(--rand); background: var(--flaeche);
  color: var(--tinte-2); font: 500 13.5px/1.2 var(--sans); text-decoration: none; }
.pille:hover { background: var(--hover); text-decoration: none; }
.pille[aria-current] { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.pille-anzahl { font: 500 11.5px/1 var(--mono); font-variation-settings: 'MONO' 1; color: var(--grau); }
.pille[aria-current] .pille-anzahl { color: var(--leiste-nav); }

/* Zähler (braucht dich) und Anzahl in Überschriften */
.zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pille);
  font: 600 11.5px/1 var(--mono); font-variation-settings: 'MONO' 1; }
.zaehler-koralle { background: var(--koralle-text); color: var(--weiss); }   /* Weiß auf Koralle hätte nur 3:1 */
.zaehler-leise { background: var(--papier-2); color: var(--tinte-2); }
.anzahl { font: 500 12px/1 var(--mono); font-variation-settings: 'MONO' 1; color: var(--grau); }

/* Live-Punkt: nur wo Neues ist */
.live-punkt { flex: none; position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blau-hell); vertical-align: middle; }
.live-punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blau-hell); animation: live 1.8s ease-out infinite; }
@keyframes live { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-punkt::after { animation: none; } }

/* Stufen als Punkt (🔴 dringend, 🟡 wichtig) */
.punkt { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; }
.punkt-dringend { background: var(--koralle); }
.punkt-wichtig { background: var(--bernstein); }
.stufe-dringend { color: var(--koralle-text); }
.stufe-wichtig { color: var(--bernstein-text); }

/* Avatar mit Initialen */
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--papier-2); color: var(--tinte-2); border: var(--rand); font: 600 12.5px/1 var(--sans); letter-spacing: .02em; }
.avatar-intern { background: var(--navy); color: var(--papier); border-color: var(--navy); }
.avatar-klein { width: 24px; height: 24px; font-size: 10px; }

/* ---------- Karten, Panels, leere Zustände ---------- */

.karte { background: var(--flaeche); border: var(--rand); border-radius: var(--radius-panel); padding: var(--a4) var(--a5); }
.karte > :last-child { margin-bottom: 0; }
.karte-titel { font: 500 17px/1.25 var(--serif); margin: 0 0 var(--a3); }
.raster { display: grid; gap: var(--a4); }
@media (min-width: 720px) { .raster-2 { grid-template-columns: 1fr 1fr; } .raster-3 { grid-template-columns: repeat(3, 1fr); } }
.stapel { display: grid; gap: var(--a3); }

.leer-zustand { border: 1.5px dashed var(--linie); border-radius: var(--radius-panel); padding: var(--a6) var(--a5); text-align: center; color: var(--grau); }
.leer-titel { font: 500 17px/1.3 var(--serif); color: var(--tinte-2); margin: 0 0 var(--a1); }
.leer-satz { margin: 0; font-size: 14px; }

/* Meldungen */
.meldung { padding: 10px 14px; border-radius: var(--radius-feld); font-size: 14px; border: 1px solid; }
.meldung-fehler { background: var(--ton-koralle); border-color: var(--ton-koralle-rand); color: var(--ton-koralle-text); }
.meldung-hinweis { background: var(--ton-blau); border-color: var(--ton-blau-rand); color: var(--ton-blau-text); }

/* Aufklappbarer Abschnitt (z. B. Kosten je Modell) */
.aufklapp { margin-top: var(--a5); border-top: var(--rand-leise); padding-top: var(--a3); }
.aufklapp > summary { cursor: pointer; display: flex; align-items: center; gap: var(--a2); list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before { content: "▸"; color: var(--grau); font-size: 12px; }
.aufklapp[open] > summary::before { content: "▾"; }
.aufklapp > summary h2 { margin: 0; font-size: 18px; }
.aufklapp[open] > summary { margin-bottom: var(--a3); }

/* ---------- Rahmen: Handy (Kopfleiste oben, Tableiste unten) ---------- */

.rahmen { min-height: 100vh; }
.marke { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
.marke-name { font: 500 22px/1 var(--serif); letter-spacing: -0.01em; }
.marke-zusatz { font: 500 10.5px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .14em; text-transform: uppercase; color: var(--leiste-leise); }

.kopfleiste { position: sticky; top: 0; z-index: 20; height: var(--kopfleiste-hoehe); display: flex; align-items: center; gap: var(--a3); padding: 0 var(--a4);
  background: var(--navy); color: var(--leiste-text); }
.kopfleiste a { color: inherit; text-decoration: none; }
.kopfleiste-marke .marke-name { font-size: 21px; }
.kopfleiste-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font: 500 11px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--leiste-nav); }
.konto { position: relative; margin-left: auto; }
.kopfleiste-live + .konto { margin-left: 0; }
.konto > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.konto > summary::-webkit-details-marker { display: none; }
.konto .avatar { border-color: var(--leiste-linie); background: rgba(250, 248, 244, .12); }
.konto-menue { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--flaeche); color: var(--tinte); border: var(--rand); border-radius: var(--radius-panel); padding: var(--a4); }
.konto-menue .wer-name { margin: 0; font-weight: 600; }
.konto-menue .wer-mandant { margin: 2px 0 var(--a3); color: var(--grau); }
.konto-menue .knopf-abmelden { width: 100%; color: var(--tinte); border-color: var(--tinte); }

.wer-name { font-size: 14px; font-weight: 600; }
.wer-mandant { font-size: 12px; color: var(--leiste-leise); }
.abmelden { margin: 0; }
.knopf-abmelden { min-height: 36px; padding: 7px 14px; border-radius: var(--radius-pille); cursor: pointer; background: transparent; color: var(--leiste-text);
  border: 1px solid var(--leiste-linie); font: 500 13px/1 var(--sans); }
.knopf-abmelden:hover { background: var(--leiste-hover); }

.seitenleiste { display: none; }

.tableiste { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--flaeche); border-top: var(--rand); padding-bottom: env(safe-area-inset-bottom); }
.tableiste a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tableiste-hoehe);
  color: var(--grau); text-decoration: none; font: 500 11px/1 var(--sans); }
.tableiste a[aria-current="page"] { color: var(--blau); }
.tableiste a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; border-radius: 0 0 2px 2px; background: var(--blau); }
.tableiste .nav-zeichen { font-size: 18px; line-height: 1; height: 20px; }
.tableiste .zaehler { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10.5px; }
.tableiste .live-punkt { position: absolute; top: 9px; left: calc(50% + 10px); }

.inhalt { padding: var(--a5) var(--a4) calc(var(--tableiste-hoehe) + var(--a7) + env(safe-area-inset-bottom)); max-width: var(--inhalt-breite); min-width: 0; }

/* Handy: Fokus und Sprungziele nicht unter Kopf- und Tableiste; Klickflächen mindestens 44px */
@media (max-width: 959px) {
  html { scroll-padding-top: calc(var(--kopfleiste-hoehe) + var(--a4)); scroll-padding-bottom: calc(var(--tableiste-hoehe) + var(--a4) + env(safe-area-inset-bottom)); }
  .pille, .knopf-abmelden, .aufklapp-klein > summary, .bon > summary, .bon-aufrufe > summary, .aufklapp > summary { min-height: 44px; }
  /* Links in Text und Metazeilen: größere Trefferfläche, ohne die Zeile zu verschieben */
  .bon-link, .kennwerte a, .nachricht-fuss a, .eintrag-unter a, .knapp a, .detail-ganz, .blase-fuss a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ---------- Rahmen: ab Laptop (Seitenleiste in Navy) ---------- */

@media (min-width: 960px) {
  .rahmen { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); }
  .kopfleiste, .tableiste { display: none; }
  .seitenleiste { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--a6); padding: var(--a6) var(--a4) var(--a5);
    background: var(--navy); color: var(--leiste-text); }
  .seitenleiste-marke { color: inherit; text-decoration: none; padding: 0 var(--a3); }
  .seitenleiste-marke .marke { gap: 6px; }
  .seitenleiste-marke .marke-name { font-size: 24px; }
  .navigation { display: grid; gap: 2px; }
  .navigation a, .bald-bereich li { display: flex; align-items: center; gap: var(--a3); padding: 10px 12px; border-radius: var(--radius-feld); font: 500 14.5px/1.2 var(--sans); }
  .navigation a { color: var(--leiste-nav); text-decoration: none; }
  .navigation a:hover { background: var(--leiste-hover); color: var(--leiste-text); }
  .navigation a[aria-current="page"] { background: var(--leiste-aktiv); color: var(--weiss); }
  .navigation a:focus-visible { outline-color: var(--blau-ring); outline-offset: 0; }
  .nav-zeichen { width: 18px; text-align: center; flex: none; }
  .navigation .zaehler { margin-left: auto; }
  .navigation .live-punkt { margin-left: auto; }
  .bald-bereich ul { list-style: none; margin: 0; padding: 0; }
  .bald-bereich li { color: var(--leiste-leise); opacity: .7; }
  .bald-titel { font: 500 10.5px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .14em; text-transform: uppercase; color: var(--leiste-leise); margin: 0 0 var(--a2); padding: 0 12px; }
  .wer { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a3); align-items: center; border-top: 1px solid var(--leiste-linie); padding: var(--a4) 4px 0; }
  .wer-text p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wer .avatar { background: rgba(250, 248, 244, .12); border-color: var(--leiste-linie); }
  .wer .abmelden { grid-column: 1 / -1; }
  .inhalt { padding: var(--a7) var(--a7) 64px; }
}

/* ---------- Anmelden (schlichter Rahmen) ---------- */

.schlicht { min-height: 100vh; }
.schlicht-inhalt { max-width: 432px; margin: 0 auto; padding: 12vh var(--a4) var(--a7); }
.schlicht .marke { margin-bottom: var(--a7); }
.schlicht .marke-name { font-size: 26px; color: var(--tinte); }
.schlicht .marke-zusatz { color: var(--grau); }
.schlicht h1 { font-size: 32px; margin-bottom: var(--a2); }
.schlicht .meldung { margin-top: var(--a4); }

.formular { display: grid; gap: var(--a2); margin-top: var(--a5); }
.formular .knopf { margin-top: var(--a3); }
.feld-name { font: 500 11px/1.2 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.eingabe { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-karte); border: var(--rand); background: var(--flaeche); color: var(--tinte); font: 400 16px var(--sans); }
.eingabe:focus { outline: none; border-color: var(--blau); box-shadow: var(--ring); }
.eingabe-nummer { font: 400 16px/1.2 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .02em; }

/* Code: ein Feld über sechs gezeichneten Kästchen (Seitenverhältnis 4:5). Die Kästchen füllen die Breite; jede Ziffer
   rückt per Sperrung genau in ihr Kästchen (1ch = Breite einer Ziffer in der Mono-Schrift, cqw = Breite des Felds).
   Das Feld ist breiter als die Kästchen, damit nach der sechsten Ziffer nichts rollt; overflow: clip, weil sich der
   Rahmen sonst selbst zur Einfügemarke rollt (hidden lässt Rollen per Skript und Fokus zu). */
.code-feld { --luecke: 10px; position: relative; container-type: inline-size; overflow: clip; margin: var(--a2) 0; }
.code-kaestchen, .code-eingabe { --kasten: calc((100cqw - 5 * var(--luecke)) / 6); }
.code-kaestchen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--luecke); pointer-events: none; }
.code-kaestchen span { aspect-ratio: 4 / 5; border: var(--rand); border-radius: var(--radius-karte); background: var(--flaeche); }
.code-eingabe { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% + var(--kasten) + var(--luecke)); border: 0; background: transparent; color: var(--tinte);
  font: 500 24px/1 var(--mono); font-variation-settings: 'MONO' 1; padding: 0 0 0 calc((var(--kasten) - 1ch) / 2); letter-spacing: calc(var(--kasten) + var(--luecke) - 1ch);
  caret-color: var(--blau-hell); }
.code-eingabe:focus { outline: none; }
.code-feld:focus-within .code-kaestchen span { border-color: var(--blau); box-shadow: var(--ring); }
.code-feld-fehler .code-kaestchen span { border-color: var(--ton-koralle-rand); background: var(--ton-koralle); }
.code-feld-fehler:focus-within .code-kaestchen span { border-color: var(--koralle); box-shadow: 0 0 0 2px var(--ton-koralle-rand); }
@media (max-width: 360px) { .code-feld { --luecke: 6px; } }

/* ---------- Bausteine der Seiten ---------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { padding: var(--a3) 0; border-bottom: var(--rand-leise); }
.liste > li:last-child { border-bottom: 0; }

/* Einträge (Detailseiten) */
.eintrag-kopf { font-weight: 500; margin: 0 0 2px; overflow-wrap: anywhere; }
.eintrag-unter { color: var(--grau); font-size: 13px; margin: 0; overflow-wrap: anywhere; }

/* ---------- Lage: Kopf, Pass, Posteingang, Detail ---------- */

.lage-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--a3) var(--a5); margin-bottom: var(--a5); }
.lage-kopf h1 { margin-bottom: var(--a1); }
.lage-kopf .unterzeile { margin: 0; }
.lage-kopf .pillen { display: none; margin: 0; }
.unterzeile .stufe-dringend { font-weight: 600; }

/* Pass: nur ab Laptop */
.pass { display: none; }
.spalte { min-width: 0; display: flex; flex-direction: column; gap: var(--a2); background: var(--papier-2); border: var(--rand); border-radius: var(--radius-panel); padding: var(--a3) 10px; }
.spalte-tisch { background: var(--tisch); border-color: var(--ton-koralle-rand); }
.spalte-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--a2); padding: 2px 4px var(--a1); }
.spalte-titel { font: 600 14.5px/1.3 var(--sans); letter-spacing: 0; margin: 0; }
.spalte-anzahl { font: 500 12px/1 var(--mono); font-variation-settings: 'MONO' 1; color: var(--grau); }
.spalte-unter { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--grau); }
.spalte-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a2); min-width: 0; }
.spalte-karten > li { min-width: 0; }
.spalte-leer { margin: 0; padding: var(--a3) 4px; font-size: 12.5px; color: var(--grau); }
.spalte-mehr { padding: 2px 4px; font-size: 12.5px; text-decoration: none; }
.spalte-mehr:hover { text-decoration: underline; }

.pass-karte { display: flex; flex-direction: column; gap: 6px; background: var(--weiss); border: var(--rand); border-radius: var(--radius-karte); padding: 11px 12px; color: var(--tinte); text-decoration: none; }
a.pass-karte:hover { border-color: #CFC8BB; text-decoration: none; }
.pass-karte-dringend { border-color: var(--ton-koralle-rand); }
.pass-karte-wichtig { border-color: var(--ton-bernstein-rand); }
.pass-karte-gewaehlt, a.pass-karte-gewaehlt:hover { border-color: var(--blau); box-shadow: var(--ring); }
.pass-karte .chips { gap: 4px; }
.pass-karte-titel { font: 500 13.5px/1.35 var(--sans); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pass-karte-firma { margin-top: -2px; font-size: 12px; color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-karte-fuss { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--grau); white-space: nowrap; min-width: 0; }
.pass-karte-zeit { margin-left: auto; }
.sim { color: var(--grau); }

/* Posteingang */
.posteingang-liste { display: grid; gap: var(--a5); align-content: start; min-width: 0; }
.eingang-block-titel { font: 500 11px/1.3 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
  margin: 0 0 var(--a2); display: flex; align-items: center; gap: var(--a2); }
.eingang-liste { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: var(--rand); border-radius: var(--radius-panel); overflow: hidden; }
.eingang-liste > li + li { border-top: var(--rand-leise); }
.eingang { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 var(--a3); align-items: start; padding: var(--a3) var(--a4); min-height: 48px; color: var(--tinte); text-decoration: none; }
a.eingang:hover { background: var(--hover); text-decoration: none; }
.eingang-gewaehlt, a.eingang-gewaehlt:hover { background: var(--neu); box-shadow: inset 3px 0 0 var(--blau); }
.eingang .punkt { margin-top: 7px; }
.eingang-text { min-width: 0; display: grid; gap: 2px; }
.eingang-titel { font: 500 14.5px/1.35 var(--sans); overflow-wrap: anywhere; }
.eingang-unter { font-size: 12.5px; color: var(--grau); }
.eingang-zeit { font: 400 11.5px/1.9 var(--mono); font-variation-settings: 'MONO' 1; color: var(--grau); white-space: nowrap; }

.ohne-dich { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: var(--rand); border-radius: var(--radius-panel); }
.ohne-dich > li + li { border-top: var(--rand-leise); }
.ohne-dich-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); padding: 10px var(--a4); min-height: 44px; color: var(--tinte-2); font-size: 14px; text-decoration: none; }
a.ohne-dich-zeile:hover { background: var(--hover); text-decoration: none; }
.ohne-dich-null { color: var(--grau); }
.ohne-dich-hinweise > summary { cursor: pointer; list-style: none; }
.ohne-dich-hinweise > summary::-webkit-details-marker { display: none; }
.ohne-dich-hinweise > summary > span:first-child::after { content: " ▸"; color: var(--grau); font-size: 13px; }
.ohne-dich-hinweise[open] > summary > span:first-child::after { content: " ▾"; }
.hinweis-liste { list-style: none; margin: 0; padding: 0 var(--a4) var(--a3); display: grid; gap: var(--a2); font-size: 13.5px; }

/* Handy: im Posteingang entweder Liste oder Detail */
.lage-auswahl .lage-kopf, .lage-auswahl .posteingang-liste { display: none; }
.lage-posteingang:not(.lage-auswahl) .detail-panel { display: none; }
.detail-overlay { display: none; }

/* Detail (Overlay im Pass, Panel im Posteingang) */
.detail { background: var(--flaeche); border: var(--rand); border-radius: var(--radius-panel); padding: var(--a5); min-width: 0; }
.detail > :last-child { margin-bottom: 0; }
.detail-zurueck { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 var(--a2); font-size: 14px; text-decoration: none; }
.detail-schliessen { position: absolute; top: var(--a3); right: var(--a3); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; color: var(--tinte-2); text-decoration: none; font-size: 16px; }
.detail-schliessen:hover { background: var(--hover); text-decoration: none; }
.detail-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: var(--a3); }
.detail-overlay .detail-kopf { padding-right: 44px; }
/* Am Handy ist das Detail eine eigene Seite: ohne Rahmen */
.detail-panel { border: 0; background: none; padding: 0; }
.detail-nummer { font-size: 12px; color: var(--grau); }
.detail-ganz { font-size: 13px; margin-left: auto; }
.detail-titel { font-size: 24px; margin: 0 0 var(--a1); overflow-wrap: anywhere; }
.detail-meta { font-size: 13.5px; color: var(--grau); margin-bottom: var(--a4); }
.detail-leer { padding: 0; border: 0; background: none; }
.detail-wartet { list-style: none; margin: 0 0 var(--a3); padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--tinte-2); }
.detail-wartet li { display: flex; gap: var(--a2); align-items: flex-start; }
.detail-wartet .punkt { margin-top: 6px; }
.detail-aktionen { margin-top: var(--a5); padding-top: var(--a4); border-top: var(--rand-leise); }
@media (min-width: 960px) { .detail-titel { font-size: 28px; } }
@media (min-width: 1600px) { :root { --inhalt-breite: 1520px; } }

/* Blasen: eingehend weiß, ausgehend Papier, Entwurf gestrichelt */
.blase { border: var(--rand); border-radius: var(--radius-panel); padding: var(--a3) var(--a4); margin: 0 0 var(--a3); background: var(--weiss); }
.blase-ausgang { background: var(--papier-2); margin-left: var(--a6); }
.blase-entwurf { background: var(--entwurf); border: 1.5px dashed var(--bernstein); margin-left: var(--a6); }
.blase .chips { margin: 0 0 var(--a2); }
.blase-text { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.blase-fuss { margin: 0; font-size: 12px; color: var(--grau); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Kurzer Bon */
.bon-kurz { border: var(--rand); border-radius: var(--radius-karte); padding: var(--a3) var(--a4); background: var(--papier); }
.bon-label { font: 500 10.5px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); margin: 0 0 var(--a2); }
.bon-warum { font-size: 14px; color: var(--tinte-2); margin: 0 0 var(--a2); }
.bon-kurz .chips { margin: 0; }
.bon-dauer { font-size: 12px; color: var(--grau); }
.bon-link { font-size: 13px; margin-left: auto; }

@media (min-width: 960px) {
  .lage-kopf .pillen { display: flex; }
  .posteingang-handy { display: none; }
  .pass { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 10px; align-items: start; }
  .detail-overlay { display: block; position: fixed; z-index: 30; top: var(--a4); right: var(--a4); bottom: var(--a4); width: min(480px, calc(100vw - 2 * var(--a4)));
    overflow-y: auto; box-shadow: var(--overlay-schatten); padding: var(--a6) var(--a6) var(--a5); }
  .posteingang-voll { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: var(--a5); align-items: start; }
  .lage-auswahl .lage-kopf { display: flex; }
  .lage-auswahl .posteingang-liste { display: grid; }
  .lage-posteingang:not(.lage-auswahl) .detail-panel { display: block; }
  .detail-panel { position: sticky; top: var(--a5); padding: var(--a6); background: var(--flaeche); border: var(--rand); }
  .detail-zurueck { display: none; }
}

/* Kennzahlen als Kacheln (nur die Seite Kosten) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--a3); margin: 0 0 var(--a6); }
.kachel { background: var(--flaeche); border: var(--rand); border-radius: var(--radius-panel); padding: var(--a4) var(--a5); }
.kachel-titel { font: 500 11px/1.3 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); margin: 0 0 var(--a2); }
.kachel-wert { font: 500 28px/1.1 var(--serif); margin: 0 0 var(--a1); }
.kachel-unter { font-size: 12.5px; color: var(--grau); margin: 0; }
.kacheln-leise .kachel { background: transparent; padding: var(--a3) var(--a4); }
.kacheln-leise .kachel-wert { font: 500 18px/1.2 var(--mono); font-variation-settings: 'MONO' 1; }

/* Filter: Suche und Auswahl als Pillenfelder, Werte der Pillen als Pillen-Tabliste in der Liste */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin: 0 0 var(--a3); }
.feld { display: block; min-width: 0; }
.feld-suche { flex: 1 1 220px; max-width: 380px; }
.feld-pille { width: 100%; min-width: 0; min-height: 40px; padding: 8px 16px; border-radius: var(--radius-pille); border: var(--rand); background: var(--flaeche); color: var(--tinte); font: 400 14px/1.2 var(--sans); }
select.feld-pille { padding-right: 12px; cursor: pointer; }
.feld-pille:focus { outline: none; border-color: var(--blau); box-shadow: var(--ring); }
.feld-pille::placeholder { color: var(--grau); }
.filterpillen { display: flex; flex-wrap: wrap; gap: 0 var(--a5); }
#liste > .pillen, .filterpillen { margin-bottom: var(--a4); }
.filterpillen .pillen { margin: 0 0 var(--a2); }
@media (max-width: 719px) {
  /* Am Handy rollen die Pillen in ihrer Zeile statt umzubrechen */
  .filterpillen { display: grid; gap: 0; }
  #liste .pillen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #liste .pille { flex: none; }
  /* Rollt die Zeile, deutet ein Verlauf am rechten Rand an, dass dort mehr kommt */
  #liste .pillen { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }
  .feld-suche { max-width: none; flex-basis: 100%; }
  /* Auswahlfelder nebeneinander, gleich breit */
  .filter > .feld:not(.feld-suche) { flex: 1 1 0; }
}

/* Tabellen: am Handy Karten, ab 720px Tabelle */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabelle tr { display: block; background: var(--flaeche); border: var(--rand); border-radius: var(--radius-karte); padding: var(--a3) var(--a4); margin-bottom: var(--a2); }
.tabelle td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--a3); padding: 3px 0; overflow-wrap: anywhere; font-size: 14px; }
.tabelle td > .chip { justify-self: start; }  /* im Grid sonst auf die ganze Spalte gezogen */
.tabelle td::before { content: attr(data-titel); font: 500 10.5px/2 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.tabelle td.spalte-haupt { display: block; font: 500 15.5px/1.35 var(--sans); padding-bottom: 6px; }
.tabelle td.spalte-haupt::before { content: none; }
td.spalte-nummer { font-family: var(--mono); font-variation-settings: 'MONO' 1; }
td.spalte-leise { color: var(--grau); }
.wege { list-style: none; margin: 0; padding: 0; }
.tabelle tr.zeile-neu { background: var(--neu); }
.tabelle .live-punkt { margin-right: 4px; }
/* Ganze Zeile klickbar: der Link der Hauptspalte deckt die Zeile ab, andere Links liegen darüber */
.tabelle-klickbar tbody tr { position: relative; }
.tabelle-klickbar td.spalte-haupt a::after { content: ""; position: absolute; inset: 0; }
.tabelle-klickbar td:not(.spalte-haupt) a { position: relative; z-index: 1; }
.tabelle-klickbar td.spalte-haupt a { color: var(--tinte); text-decoration: none; }
.tabelle-klickbar tbody tr:hover td.spalte-haupt a { color: var(--blau); }
/* Kompakt am Handy: Nummer und Zeit oben, Titel, darunter der Rest in einer Zeile, ohne Spaltennamen */
@media (max-width: 719px) {
  .tabelle-kompakt tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .tabelle-kompakt td { display: block; padding: 0; font-size: 13px; color: var(--tinte-2); }
  .tabelle-kompakt td::before { content: none; }
  .tabelle-kompakt td.spalte-nummer { order: -2; font-size: 12px; color: var(--grau); }
  .tabelle-kompakt td.spalte-leise { order: -1; margin-left: auto; font-size: 12px; }
  .tabelle-kompakt td.spalte-haupt { flex-basis: 100%; padding: 0; }
  .tabelle-kompakt td.spalte-haupt:first-child { order: -3; }
  .tabelle-kompakt .wege { display: flex; flex-wrap: wrap; gap: 0 8px; }
}
@media (min-width: 720px) {
  .tabelle-rahmen { background: var(--flaeche); border: var(--rand); border-radius: var(--radius-panel); overflow-x: auto; }
  .tabelle thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .tabelle tr { display: table-row; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .tabelle td, .tabelle th { display: table-cell; padding: 13px 18px; border-bottom: var(--rand-leise); text-align: left; vertical-align: middle; }
  .tabelle tbody tr:last-child td { border-bottom: 0; }
  .tabelle td::before { content: none; }
  .tabelle th { background: var(--hover); font: 500 11px/1.2 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); white-space: nowrap; border-bottom: var(--rand); }
  .tabelle td.spalte-haupt { display: table-cell; font: 500 14.5px/1.4 var(--sans); padding-bottom: 13px; }
  .tabelle .spalte-nummer { text-align: right; white-space: nowrap; }
  .tabelle-kompakt .spalte-nummer { width: 92px; text-align: left; }
  .tabelle-kompakt td.spalte-nummer { font-size: 12.5px; color: var(--grau); }
  .tabelle td.spalte-leise { white-space: nowrap; font-size: 13px; }
  .tabelle tbody tr:hover { background: var(--hover); }
  .tabelle tbody tr.zeile-neu:hover { background: #EAF1FB; }
}

/* Blättern */
.blaettern { display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; margin-top: var(--a4); }
.blaettern-stand { font: 400 12.5px/1 var(--mono); font-variation-settings: 'MONO' 1; color: var(--grau); }

/* htmx lädt nach: Liste leicht abblenden */
#liste.htmx-request { opacity: .55; transition: opacity .15s; }

/* ---------- Detailseiten: Kopf, Kennwerte, Karten ---------- */

.zurueck { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 var(--a1); font-size: 14px; color: var(--grau); text-decoration: none; }
.zurueck:hover { color: var(--tinte); text-decoration: none; }
.seitenkopf > .chips, .vorgang-kopf > .chips { margin: 0 0 var(--a2); }
.seitenkopf .chips .kicker { margin: 0; }
.detail-nummer { font-size: 12.5px; color: var(--grau); }
.abstand-oben { margin-top: var(--a5); }
.teil-titel { display: flex; align-items: center; gap: var(--a2); font-size: 20px; margin: 0 0 var(--a4); }
.karte-titel { display: flex; align-items: center; gap: var(--a2); margin-top: 0; }

/* Kennwerte als Raster */
.kennwerte { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--a3) var(--a5); margin: 0 0 var(--a4); padding: var(--a4) 0; border-top: var(--rand-leise); border-bottom: var(--rand-leise); }
.kennwerte > div { min-width: 0; }
.kennwerte > .kennwert-breit { grid-column: 1 / -1; }
.kennwert-breit dd { max-width: 90ch; line-height: 1.5; }
.kennwerte dt { font: 500 10.5px/1.4 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); margin-bottom: 3px; }
.kennwerte dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
@media (min-width: 720px) { .kennwerte { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

/* Person mit kleinem Avatar */
.person { display: inline-flex; align-items: center; gap: var(--a2); min-width: 0; vertical-align: middle; }
.person-name { min-width: 0; overflow-wrap: anywhere; }

/* Knappe Listen in Karten (Läufe, Aufträge, Vorgänge, Mitglieder) */
.knapp { list-style: none; margin: 0; padding: 0; }
.knapp > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--a2); padding: 9px 0; border-bottom: var(--rand-leise); font-size: 14px; }
.knapp > li:first-child { padding-top: 0; }
.knapp > li:last-child { border-bottom: 0; padding-bottom: 0; }
.knapp > li.knapp-block { display: block; }
.knapp + .knapp { margin-top: var(--a3); padding-top: var(--a3); border-top: var(--rand-leise); }
.knapp-haupt { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.knapp-zeit { font: 400 11.5px/1 var(--mono); font-variation-settings: 'MONO' 1; color: var(--grau); white-space: nowrap; }

/* Kleiner aufklappbarer Teil (frühere Fassungen, Einzelheiten) */
.aufklapp-klein { margin-top: var(--a2); }
.aufklapp-klein > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-size: 13px; color: var(--blau); list-style: none; }
.aufklapp-klein > summary::-webkit-details-marker { display: none; }
.aufklapp-klein > summary::before { content: "▸"; font-size: 11px; }
.aufklapp-klein[open] > summary::before { content: "▾"; }
.version-alt { border-top: var(--rand-leise); padding-top: 10px; margin-top: 10px; }
.version-alt .blase-text { color: var(--tinte-2); }

/* Gespeicherte Daten (Stand, Angaben, Markenprofil) */
.daten { margin: 0; display: grid; gap: var(--a2); }
.daten > div { display: grid; gap: 2px; }
.daten dt { font: 500 10.5px/1.4 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .08em; color: var(--grau); }
.daten dd { margin: 0; }
.daten .daten { padding-left: var(--a3); border-left: 2px solid var(--linie); }
.daten-liste { margin: 0; padding-left: 18px; }

/* ---------- Vorgang ---------- */

.vorgang-kopf { margin-bottom: var(--a6); }
.vorgang-titel { font-size: 26px; margin-bottom: var(--a4); overflow-wrap: anywhere; }
.vorgang-raster { display: grid; gap: var(--a5); }
.vorgang-seite { display: grid; gap: var(--a3); align-content: start; min-width: 0; }
.verlauf-teil { min-width: 0; }
.vorgang-aktionen { display: none; }   /* Platzhalter („bald“) nur ab Laptop; am Handy zuerst der Verlauf */
@media (min-width: 960px) { .vorgang-aktionen { display: flex; } }
@media (min-width: 960px) { .vorgang-titel { font-size: 34px; } }
@media (min-width: 1200px) { .vorgang-raster { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--a6); } }

/* Verlauf: Tagestrenner, Blasen ein (links) und aus (rechts), Entwurf gestrichelt */
.verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a3); }
.tagestrenner { display: flex; align-items: center; gap: var(--a3); margin: var(--a2) 0 0; font: 500 11px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.tagestrenner::before, .tagestrenner::after { content: ""; flex: 1; border-top: var(--rand-leise); }
.nachricht { max-width: min(600px, 92%); min-width: 0; scroll-margin-top: calc(var(--kopfleiste-hoehe) + var(--a4)); }
.nachricht-ausgang { align-self: flex-end; }
.nachricht .blase { margin: 0; }
.nachricht:target .blase { border-color: var(--blau); box-shadow: var(--ring); }
.nachricht .blase > :last-child { margin-bottom: 0; }
.nachricht-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--a2); margin-top: 6px; padding: 0 4px; font-size: 12px; color: var(--grau); }
.nachricht-ausgang .nachricht-fuss { justify-content: flex-end; }
.nachricht-fuss a { color: inherit; }
.abschrift { border-left: 3px solid var(--blau-ring); padding: 2px 0 2px var(--a3); margin: 2px 0 6px; }
.abschrift-kopf { display: flex; align-items: center; gap: var(--a2); margin: 0 0 6px; font: 500 11px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.abspieler { display: block; width: 100%; max-width: 420px; height: 40px; margin: 0 0 8px; }

/* Bon: Pille unter der Blase, klappt inline auf (htmx lädt nach) */
.bon[open] { flex-basis: 100%; }
.bon > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 11px; border-radius: var(--radius-pille); border: var(--rand); background: var(--flaeche);
  font: 600 10.5px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); list-style: none; }
.bon > summary::-webkit-details-marker { display: none; }
.bon > summary:hover { background: var(--hover); }
.bon[open] > summary { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.bon[open] > summary .bon-warum-zusatz { color: var(--leiste-nav); }
.bon-warum-zusatz { font: 400 12px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--grau); }
.bon-inhalt { margin-top: var(--a2); background: var(--weiss); border: var(--rand); border-radius: var(--radius-panel); overflow: hidden; font-size: 14px; color: var(--tinte); text-align: left; }
.bon-inhalt > .leer { margin: 0; padding: var(--a3) var(--a4); }
.bon-inhalt.htmx-request { opacity: .55; }
.bon-seite { max-width: 760px; }
/* Liniertes Papier: jede Zeile im Kopf ist genau 24px hoch, die Linie liegt unter der Schrift (Abstand oben 12px) */
.bon-kopf { padding: 12px var(--a5) var(--a3); border-bottom: 1px dashed var(--linie); line-height: 24px;
  background: linear-gradient(to bottom, transparent 23px, var(--linie-leise) 23px 24px) 0 12px / 100% 24px repeat-y var(--papier); }
.bon-kopf > *, .bon-kopf .bon-label { margin: 0; line-height: 24px; }
.bon-label { display: flex; align-items: center; gap: var(--a2); font: 600 10.5px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); margin: 0 0 var(--a2); }
.bon-label .bon-link { margin-left: auto; font: 400 12.5px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.bon-kurzfassung { font: 500 18px/24px var(--serif); overflow-wrap: anywhere; }
.bon-ablauf { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; color: var(--grau); }
.bon-ablauf .chip { line-height: 1.2; }
.bon-herkunft { margin: 0; padding: var(--a3) var(--a5) 0; font-size: 13.5px; color: var(--tinte-2); }
.bon-teil { padding: var(--a4) var(--a5); border-bottom: var(--rand-leise); }
.bon-titel { font: 500 11px/1.3 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); margin: 0 0 var(--a2); }
.bon-teil > .leer { margin: 0; font-size: 13.5px; }
.bon-lauf + .bon-lauf { margin-top: var(--a4); }
.bon-lauf-kopf { margin: 0 0 var(--a2); font-size: 13.5px; }
.bon-aufrufe { padding: var(--a3) var(--a5); }
.bon-aufrufe > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 500 11px/1 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); list-style: none; }
.bon-aufrufe > summary::-webkit-details-marker { display: none; }
.bon-aufrufe > summary::before { content: "▸"; }
.bon-aufrufe[open] > summary::before { content: "▾"; }
.bon-summe { margin: var(--a2) 0 10px; }
.bon-betrag { font: 500 18px/1 var(--mono); font-variation-settings: 'MONO' 1; }
.aufrufe { list-style: none; margin: 0; padding: 0; }
.aufruf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--a3); padding: 8px 0; border-top: var(--rand-leise); font-size: 13px; }
.aufruf-modell { grid-column: 1; font-size: 11.5px; color: var(--grau); overflow-wrap: anywhere; }
.aufruf-dauer { grid-column: 2; grid-row: 2; font-size: 11.5px; color: var(--grau); text-align: right; }
.aufruf-kosten { grid-column: 2; grid-row: 1; text-align: right; }
@media (min-width: 720px) {
  .aufruf { grid-template-columns: minmax(0, 1fr) auto 70px 90px; align-items: baseline; }
  .aufruf-modell, .aufruf-dauer, .aufruf-kosten { grid-row: 1; }
  .aufruf-modell { grid-column: 2; } .aufruf-dauer { grid-column: 3; } .aufruf-kosten { grid-column: 4; }
}

/* Entscheidung */
.entscheidung + .entscheidung { margin-top: var(--a3); padding-top: var(--a3); border-top: var(--rand-leise); }
.gespraech-auftrag + .gespraech-auftrag { padding-top: var(--a3); border-top: var(--rand-leise); }
.gespraech-auftrag .briefing-kurz { margin-top: var(--a2); }
.entscheidung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 4px; }
.entscheidung-titel { font: 600 15px/1.3 var(--sans); }
.entscheidung .eintrag-unter + .begruendung { margin-top: 6px; }
.begruendung { margin: 6px 0; padding-left: var(--a3); border-left: 3px solid var(--linie); color: var(--tinte-2); font-size: 14px; }
.rueckfrage { margin: 0 0 var(--a4); border-color: var(--ton-bernstein-rand); }

/* Schritte als Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste-schritt { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 var(--a3); padding: 0 0 var(--a3); }
.zeitleiste-schritt::before { content: ""; position: absolute; left: 10.5px; top: 24px; bottom: 2px; border-left: 1px solid var(--linie); }
.zeitleiste-schritt:last-child { padding-bottom: 0; }
.zeitleiste-schritt:last-child::before { content: none; }
.zeitleiste-punkt { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid; font-size: 10.5px; line-height: 1; }
.zeitleiste-gruen .zeitleiste-punkt { background: var(--ton-gruen); color: var(--ton-gruen-text); border-color: var(--ton-gruen-rand); }
.zeitleiste-bernstein .zeitleiste-punkt { background: var(--ton-bernstein); color: var(--ton-bernstein-text); border-color: var(--ton-bernstein-rand); }
.zeitleiste-koralle .zeitleiste-punkt { background: var(--ton-koralle); color: var(--ton-koralle-text); border-color: var(--ton-koralle-rand); }
.zeitleiste-leise .zeitleiste-punkt { background: var(--flaeche); color: var(--ton-leise-text); border-color: var(--ton-leise-rand); }
.zeitleiste-text { min-width: 0; padding-top: 1px; }
.zeitleiste-name { display: block; font: 500 13.5px/1.35 var(--sans); overflow-wrap: anywhere; }
.zeitleiste-leise .zeitleiste-name { color: var(--grau); font-weight: 400; }
.zeitleiste-unter { display: block; font-size: 12px; color: var(--grau); overflow-wrap: anywhere; }
.zeitleiste-routine { margin-top: var(--a3); }
.zeitleiste-routine > .zeitleiste { margin-top: var(--a2); }
.zeitleiste-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.zeitleiste-dauer { font: 400 11.5px/1 var(--mono); font-variation-settings: 'MONO' 1; color: var(--grau); }

/* Briefing: Zeilen Feld/Wert, neue Zeilen grünlich mit „+“ */
.briefing + .briefing { margin-top: var(--a4); padding-top: var(--a4); border-top: var(--rand-leise); }
.briefing-titel { font-weight: 600; font-size: 14px; }
.briefing-zeilen { display: grid; gap: 2px; margin: var(--a3) 0 var(--a2); }
.briefing-zeilen > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--a3); padding: 5px 8px; border-radius: 8px; font-size: 13.5px; }
.briefing-zeilen dt { color: var(--grau); font-size: 12.5px; overflow-wrap: anywhere; }
.briefing-zeilen dd { margin: 0; overflow-wrap: anywhere; }
.briefing-zeilen .briefing-text { grid-column: 1 / -1; }
.briefing-neu { background: var(--ton-gruen); }
.briefing-plus { color: var(--gruen-text); font-weight: 700; margin-right: 4px; }

/* Unterschied zwischen Versionen */
.vergleich { font: 400 12.5px/1.55 var(--mono); font-variation-settings: 'MONO' 1; background: var(--flaeche); border: var(--rand); border-radius: var(--radius-feld); padding: var(--a2) 0; margin: 6px 0 var(--a2); overflow-x: auto; }
.vergleich-zeile { display: block; padding: 0 var(--a3); white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; }
.vergleich-zeichen { display: inline-block; width: 1.4em; color: var(--grau); }
ins.vergleich-zeile { background: var(--ton-gruen); color: var(--gruen-text); }
del.vergleich-zeile { background: var(--ton-koralle); color: var(--ton-koralle-text); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Kontakt */
.kontakt-kopf { display: flex; align-items: center; gap: var(--a4); }
.kontakt-kopf h1 { margin-bottom: 0; overflow-wrap: anywhere; }
.kontakt-kopf .avatar { width: 56px; height: 56px; font-size: 18px; }
.kontakt-kopf > div { min-width: 0; }

/* Kontingent */
.kontingent { margin: 6px 0 0; }
.kontingent .zahl { font-size: 20px; }

/* ---------- Eingreifen: Entwurf freigeben, ändern, verwerfen (seiten/entwurf.ts) ---------- */
.entwurf-formular { display: grid; gap: var(--a3); max-width: 720px; }
.feld-label { font-weight: 500; font-size: 14px; }
.eingabe-text { min-height: 180px; line-height: 1.5; resize: vertical; }
.entwurf-vorschau .blase-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.rueckmeldung { margin: 0 0 var(--a4); }

/* ---------- Briefing: Kurzfassung rechts, ganzes Briefing als Fenster bzw. Seite (seiten/briefing.ts) ---------- */
.briefing-kurz + .briefing-kurz { margin-top: var(--a4); padding-top: var(--a4); border-top: var(--rand-leise); }
.briefing-oeffnen { margin-top: var(--a2); }
.fenster-hintergrund { position: fixed; inset: 0; z-index: 40; background: rgba(20, 24, 33, .38); }
.fenster { position: fixed; z-index: 41; top: var(--a4); bottom: var(--a4); left: 50%; transform: translateX(-50%);
  width: min(860px, calc(100vw - 2 * var(--a4))); overflow: auto; background: var(--flaeche); border: var(--rand);
  border-radius: var(--radius-panel); padding: var(--a5) var(--a6) var(--a6); box-shadow: 0 18px 48px rgba(20, 24, 33, .22); }
@media (max-width: 720px) { .fenster { padding: var(--a4); } }
.fenster-titel { font-size: 26px; margin: 0 0 var(--a4); padding-right: 44px; overflow-wrap: anywhere; }
.briefing-seite, .briefing-voll { max-width: 80ch; }
.briefing-voll + .briefing-voll { margin-top: var(--a6); padding-top: var(--a5); border-top: var(--rand-leise); }
.briefing-satz { font-size: 15px; line-height: 1.55; }
.briefing-satz .briefing-h { font-size: 20px; margin: var(--a4) 0 var(--a3); }
.briefing-satz .briefing-h2 { font-size: 13px; font-family: var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau); margin: var(--a5) 0 var(--a2); }
.briefing-satz p { margin: 0 0 var(--a3); }
.briefing-angaben { display: grid; gap: 2px; margin: 0 0 var(--a3); }
.briefing-angaben > div { display: grid; grid-template-columns: minmax(8em, 12em) minmax(0, 1fr); gap: var(--a4); padding: 7px 10px; border-radius: 8px; }
.briefing-angaben > div:nth-child(odd):not(.briefing-neu) { background: var(--papier-2); }
.briefing-angaben dt { color: var(--grau); font-size: 13.5px; }
.briefing-angaben dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .briefing-angaben > div { grid-template-columns: 1fr; gap: 2px; } }
.briefing-liste { margin: 0 0 var(--a3); padding-left: 1.2em; display: grid; gap: 4px; }
.briefing-liste li.briefing-neu { list-style-position: inside; margin-left: -1.2em; padding: 2px 6px; border-radius: 6px; }
/* Skript-Tabelle (Absatz, Bild, Stimme) im Fenster */
.tabelle-rahmen { overflow-x: auto; margin: 0 0 var(--a4); }
.briefing-tabelle { border-collapse: collapse; width: 100%; font-size: 14px; }
.briefing-tabelle th, .briefing-tabelle td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: var(--rand-leise); }
.briefing-tabelle th { font: 500 11px/1.3 var(--mono); font-variation-settings: 'MONO' 1; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.briefing-tabelle td:first-child { width: 4em; color: var(--grau); }

/* ---------- Auftrag: Angaben korrigieren, Skript bearbeiten (seiten/auftragbearbeiten.ts) ---------- */
.auftrag-aktionen { margin: 0 0 var(--a4); }
.formular-feld { display: grid; gap: 4px; }
.feld-hilfe { margin: 0; }
.eingabe-kurz { min-height: 0; line-height: 1.45; resize: vertical; }
.feld-haken { display: flex; gap: var(--a2); align-items: center; font-size: 14px; }
.skript-formular { max-width: 100ch; }
.eingabe-skript { min-height: 60vh; font: 400 13.5px/1.5 var(--mono); font-variation-settings: 'MONO' 1; }

/* Stammdaten (seiten/stammdaten.ts) */
.farbfelder { display: flex; gap: var(--a2); margin: var(--a2) 0; }
.farbfeld { width: 28px; height: 28px; border-radius: 6px; border: var(--rand-leise); display: inline-block; }
.eingabe-klein { width: auto; min-width: 7rem; padding-block: 4px; }
.zuweisung-zeile, .regel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.zuweisung-zeile + .zuweisung-zeile { border-top: var(--rand-leise); padding-top: var(--a2); margin-top: var(--a2); }
.zuweisung-zeile table { border-collapse: collapse; }
.zuweisung-zeile th { text-align: left; font-weight: 500; min-width: 12rem; padding-right: var(--a3); }
.zuweisung-zeile td { padding-right: var(--a2); }

/* Notizbuch (seiten/notizen.ts) */
.notizen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a3); }
.notiz { background: var(--flaeche); border: var(--rand); border-radius: var(--radius-karte); padding: var(--a3) var(--a4); display: grid; gap: var(--a2); }
.notiz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a2); margin: 0; }
.notiz-thema { font: 500 11px/1.8 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--neu, #eef2f8); border-radius: 999px; padding: 0 10px; text-decoration: none; }
.notiz-titel { font: 500 16px/1.35 var(--sans); }
.notiz-text summary { cursor: pointer; list-style: none; }
.notiz-text summary::-webkit-details-marker { display: none; }
.notiz-text[open] summary { display: none; }