/* ═══════════════════════════════════════════════════════════════════
   PrintFlow Design-Tokens — „1c Warm" (Christopher, 06.07.2026)
   EINZIGE Quelle für Farben, Schriften und Formen im UI.
   Regel: außerhalb dieser Datei keine Hexwerte in Templates/Styles.
   Bewusste Ausnahmen (eigene Abnahme-/Druckwelten, NICHT vom Theme
   gesteuert):
     - static/copilot/* + Copilot-v7-Templates (Verbatim-Gate: live muss
       pixelgleich zur abgenommenen Preview bleiben — Umstellung erst
       nach neuer Sichtabnahme)
     - templates/*/pdf/* + E-Mails (druckweiß, eigene Styles)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schriften (selbst gehostet, DSGVO — kein Google-CDN) ── */
@font-face {
  font-family: 'Instrument Sans';
  src: url("/static/fonts/InstrumentSans-Variable.fa41c43a3d8e.woff2") format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/JetBrainsMono-Variable.b058178d7f30.woff2") format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --font-ui:   'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Flächen */
  --bg:            #FAF8F4;   /* App-Hintergrund */
  --bg-sidebar:    #F5F2EB;   /* Sidebar, Panels 2. Ebene */
  --surface:       #FFFFFF;   /* Karten, Tabellen, Inputs */
  --surface-2:     #FAF8F4;   /* Tabellenköpfe, Wells, Zebra */

  /* Linien */
  --border:        #E9E4DA;
  --border-strong: #D9D2C4;   /* Inputs, sekundäre Buttons */
  --hairline:      #F0EBE1;   /* Zeilentrenner */

  /* Text */
  --ink:           #26221C;   /* Primärtext */
  --text-2:        #5C554A;   /* Sekundär, Nav */
  --text-3:        #8A8172;   /* Meta, Beschreibungen */
  --text-muted:    #A8A092;   /* Placeholder, Labels */

  /* Primäraktion (ersetzt Indigo) */
  --action:        #26221C;
  --action-text:   #F5F2EB;
  --action-hover:  #3A342B;

  /* Akzente */
  --accent:        #0F766E;   /* Teal: Links, aktiv, Empfehlung */
  --accent-bg:     #DDF0EC;
  --accent-row:    #F3FBF9;   /* markierte Zeile */
  --spark:         #EBC15C;   /* Gold: NUR Copilot-Funke (Icon) */

  /* Status */
  --ok:      #188055;  --ok-bg:      #EAF6E8;
  --warn:    #B96A1B;  --warn-bg:    #FBEEDD;
  --danger:  #C0392B;  --danger-bg:  #FBEBE9;
  --info:    #6D5BD0;  --info-bg:    #EFEAFB;   /* „In Produktion" */

  /* Integrations-Badges */
  --prinect: #3B5BA5;  --prinect-bg: #EDF2FA;
  --bde:     #8A6116;  --bde-bg:     #FBF3E4;
  --datev:   #2E7D32;  --datev-bg:   #EAF6E8;

  /* Chat */
  --chat-user-bg: #26221C;  --chat-user-text: #F5F2EB;

  /* Effekte */
  --focus-ring:  #0F766E;
  --shadow-card: 0 4px 16px rgba(38,34,28,.06);
  --shadow-pop:  0 10px 30px rgba(38,34,28,.14);   /* Dropdowns, Popover */
  --shadow-raise: 0 4px 0 rgba(38,34,28,.07);      /* „aufliegende" Elemente */

  /* Form */
  --radius-sm:   8px;    /* Nav-Items, kleine Buttons, Chips-Ecken */
  --radius-md:   10px;   /* Buttons, Inputs, kleine Karten */
  --radius-lg:   14px;   /* Karten, Composer, Modals */
  --radius-full: 999px;  /* Pills, Badges */
  --speed:       140ms;  /* eine Übergangsdauer für alles */
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #171410;
  --bg-sidebar:    #1D1914;
  --surface:       #211D17;
  --surface-2:     #262119;

  --border:        #322C23;
  --border-strong: #423A2D;
  --hairline:      #2B2620;

  --ink:           #F2EDE3;
  --text-2:        #C9C1B1;
  --text-3:        #9A9183;
  --text-muted:    #756D5F;

  --action:        #F2EDE3;   /* invertiert */
  --action-text:   #211D17;
  --action-hover:  #E3DCCB;

  --accent:        #45BDAD;
  --accent-bg:     #14332F;
  --accent-row:    #1B2B28;
  --spark:         #EBC15C;

  --ok:      #57C48F;  --ok-bg:      #16301F;
  --warn:    #E2A55C;  --warn-bg:    #33270F;
  --danger:  #E57368;  --danger-bg:  #351713;
  --info:    #AC9FEB;  --info-bg:    #262039;

  --prinect: #92ABE2;  --prinect-bg: #1C2438;
  --bde:     #D9B36A;  --bde-bg:     #2E2512;
  --datev:   #82C98A;  --datev-bg:   #16301C;

  --chat-user-bg: #F2EDE3;  --chat-user-text: #211D17;

  --focus-ring:  #45BDAD;
  --shadow-card: 0 4px 16px rgba(0,0,0,.4);
  --shadow-pop:  0 10px 30px rgba(0,0,0,.55);
  --shadow-raise: 0 4px 0 rgba(0,0,0,.35);
}

/* ── Basis ── */
html { transition: background-color var(--speed) ease; }
body {
  font-family: var(--font-ui);
  background-color: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Zahlen mit Bedeutung: überall, wo heute tabular-nums gesetzt wird,
   greift automatisch die Mono-Schrift (Preise fluchten). */
.tabular-nums, .pf-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Fokus für alle Interaktiven — niemals entfernen. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Print: Web-Ansicht druckt weiß (PDF-Welt bleibt ohnehin eigen).
   Fläche UND Schrift kommen als PAAR aus den Tokens. Vorher stand hier nur
   `background-color: #FFFFFF`, während `color` auf `--ink` blieb (:137) —
   im Dunkelmodus also Creme auf Weiß, 1,17:1. `--surface` ist die weiße
   Rolle des Hauses (:36, #FFFFFF): im hellen Thema druckt die Web-Ansicht
   damit unverändert weiß, im dunklen hält das Paar 14,37:1.
   BEWUSSTE GRENZE: Browser drucken Hintergrundfarben in der Voreinstellung
   nicht. Im dunklen Thema landet die Creme-Schrift daher weiterhin auf dem
   Weiß des Papiers. Das kippt erst, wenn der dunkle Block im Druck gar nicht
   greift (`@media screen` um :89) — das ändert die Blockstruktur, an der
   T-B und der E13-Wertgleichheitstest hängen, und ist nicht E0b. */
@media print {
  body {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
  }
}

/* ── Typo-Utilities ── */
.pf-page-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
  /* Belegnummern stehen als Seitentitel (RE-2026-0007). Tabellenziffern
     halten sie in gleicher Breite — bei Namen ohne Wirkung, weil nur
     Ziffern betroffen sind. Die Schriftfamilie bleibt bewusst die
     Grundschrift; .tabular-nums als KLASSE wuerde auf Mono umschalten
     und Kundennamen mitreissen. */
  font-variant-numeric: tabular-nums;
}
.pf-card-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.pf-meta { font-size: 12.5px; color: var(--text-3); }
.pf-section-title, .pf-nav-label, .pf-table th {
  font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-muted);
}
.pf-tech-label {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pf-amount {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pf-amount-unit {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  color: var(--text-3);
}

/* ── Sidebar / Navigation ── */
.pf-sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}
.pf-nav-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13px; font-weight: 500;
  transition: background var(--speed) ease-out, color var(--speed) ease-out;
  text-decoration: none; margin: 0;
  border: 1px solid transparent;
}
.pf-nav-item:hover {
  background-color: color-mix(in srgb, var(--bg-sidebar), var(--ink) 5%);
  color: var(--ink);
}
.pf-nav-item.active {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--ink);
  font-weight: 600;
}
.pf-nav-item.active svg { color: var(--ink); }
/* Haupteinstiegspunkt (Neue Kalkulation): gefüllt wie btn-primary */
.pf-nav-item.pf-nav-item-primary {
  background-color: var(--action);
  border-color: var(--action);
  color: var(--action-text);
  font-weight: 600;
}
.pf-nav-item.pf-nav-item-primary svg { color: var(--action-text); }
.pf-nav-item.pf-nav-item-primary:hover,
.pf-nav-item.pf-nav-item-primary.active {
  background-color: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-text);
}
.pf-nav-label { padding: 0.375rem 0.75rem 0.125rem; }

/* ── Aufklappbare Menuegruppen ──
   Die Kopfzeile trägt dieselbe Typografie wie .pf-nav-label, ist aber ein
   Schaltknopf. Bewusst OHNE x-cloak auf den Einträgen: fällt Alpine aus
   (CDN nicht erreichbar, JS blockiert), bleibt das Menü aufgeklappt und
   damit bedienbar — ein kurzes Aufblitzen ist der Preis dafür, dass die
   Navigation nie verschwindet. */
.pf-nav-group-head {
  display: flex; align-items: center; gap: 0.375rem;
  width: 100%;
  padding: 0.375rem 0.75rem 0.125rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-muted);
  transition: color var(--speed) ease-out;
}
.pf-nav-group-head:hover { color: var(--ink); }
.pf-nav-chevron {
  width: 10px; height: 10px; flex-shrink: 0;
  transition: transform var(--speed) ease-out;
}
.pf-nav-chevron.is-open { transform: rotate(90deg); }
/* Unterkategorie in der Sidebar (z. B. Kanalname unter „Verkaufskanäle") */
.pf-nav-sublabel {
  padding: 4px 10px 2px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
}
.pf-nav-item.pf-nav-sub { padding-left: 22px; }
.pf-logo-tile {
  width: 27px; height: 27px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--bg-sidebar);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 10px; flex-shrink: 0;
}
/* `.pf-count-badge` stand hier mit `color: #fff` auf `--accent` und wurde
   nirgends benutzt (E0b-Gegenprobe 08.08.2026 über den ganzen Baum:
   `pf-count-badge`, `count-badge`, `count_badge`, `pf-count` — der einzige
   Treffer war diese Regel selbst; dynamisch zusammengesetzte Klassennamen
   `pf-{{ … }}` gibt es nicht). Tote Regel, deshalb gelöscht statt auf
   Tokens gezogen. Wer einen Zähler-Badge braucht, nimmt `.pf-badge-*`
   (:463 ff.), das seine Farbe schon aus Tokens holt. */

/* ── Karten ── */
.pf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.pf-card-raised {
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-raise);
}
.pf-cell-recommended {
  border: 1.5px solid var(--accent);
  background: var(--accent-row);
}

/* ── Tabellen ── */
.pf-table th {
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 0.75rem;
  background: var(--surface-2);
}
.pf-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.pf-table tr:hover td {
  background-color: color-mix(in srgb, var(--surface), var(--ink) 4%);
}
.pf-row-selected td {
  background-color: var(--accent-row);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Zeilenhöhe (Ansichts-Standard §1.3) ──
   40 px, belegter Desktop-Korridor 32–48 px (IBM Carbon). 40 statt 32,
   weil Positionstexte in Auftrags- und Angebotslisten zweizeilig werden. */
.pf-table td { height: 40px; }
.pf-table td, .pf-table th { vertical-align: middle; }

/* Beträge: rechtsbündig mit Tabellenziffern. Normativ, nicht Geschmack —
   GOV.UK Design System und Shopify Polaris schreiben beides wörtlich vor. */
.pf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Klickbare Zeile (Ansichts-Standard §1.4) ──
   Ersetzt `onclick="location.href=…"` auf dem <tr>. Das war nicht nur
   unsauber, sondern kaputt: keine Tastaturbedienung, kein Mittelklick,
   kein „in neuem Tab öffnen", und Textmarkieren löste Navigation aus.

   Hier trägt ein ECHTER <a> in der ersten Zelle die Navigation; seine
   Klickfläche wird per ::after über die ganze Zeile gezogen. Tastatur,
   Mittelklick, Kontextmenü und Textauswahl bleiben damit erhalten, und
   die Zeile bleibt semantisch eine Tabellenzeile. */
.pf-table tbody tr { position: relative; }
.pf-row-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* Zellen mit eigenen Bedienelementen müssen ÜBER der Klickfläche liegen,
   sonst schluckt die Zeile den Knopf. */
.pf-table td .pf-row-action { position: relative; z-index: 1; }
/* Tastaturfokus sieht aus wie Hover — sonst ist beim Tabben nicht
   erkennbar, wo man steht. */
.pf-table tbody tr:focus-within td {
  background-color: color-mix(in srgb, var(--surface), var(--ink) 4%);
}
.pf-row-link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -2px;
}

/* ── Knöpfe (Ansichts-Standard §1.1 / §2.1) ──
   Ersetzt das verstreute `btn btn-sm text-white` + inline
   style="background-color:var(--action)". Genau EINE Primäraktion je
   Seite; alles Weitere sekundär oder im Menü. */
.pf-btn-primary, .pf-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--speed) ease-out, border-color var(--speed) ease-out;
}
.pf-btn-primary {
  background: var(--action); color: var(--action-text);
  border-color: var(--action);
}
.pf-btn-primary:hover {
  background: var(--action-hover); border-color: var(--action-hover);
}
.pf-btn-secondary {
  background: var(--surface); color: var(--ink); border-color: var(--border);
}
.pf-btn-secondary:hover {
  background: var(--surface-2);
}
.pf-btn-primary:focus-visible, .pf-btn-secondary:focus-visible {
  outline: 2px solid var(--action); outline-offset: 2px;
}
/* Gesperrt: gedämpft, aber LESBAR. 0.45 war arithmetisch unlesbar — bei
   45 % Deckkraft erreicht im hellen Thema selbst Schwarz auf Weiß nur
   3,41:1, gefordert sind 4,5:1. Ab 0,64 hält das Paar, 0,7 gibt Luft.
   Herleitung, Statuspunkt und die Vorgeschichte: E3-Block am Dateiende. */
.pf-btn-primary:disabled, .pf-btn-secondary:disabled,
.pf-btn-primary[disabled], .pf-btn-secondary[disabled] {
  opacity: 0.7; cursor: not-allowed;
}
.pf-btn-primary:disabled:hover, .pf-btn-secondary:disabled:hover {
  background: var(--action); border-color: var(--action);
}
.pf-btn-secondary:disabled:hover {
  background: var(--surface); border-color: var(--border);
}

/* ── Reiter (Ansichts-Standard §2.1) ──
   Unterstreichung statt gefüllter Pillen. Vorher hatte die Kundenkartei
   als einzige Seite violette DaisyUI-`tabs-boxed`, das Auftragsdetail
   dagegen Unterstreichung — zwei Optiken für dieselbe Sache. */
.pf-tab {
  padding: 0.5rem 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  background: none; cursor: pointer;
  transition: color var(--speed) ease-out, border-color var(--speed) ease-out;
}
.pf-tab:hover { color: var(--ink); }
.pf-tab-active {
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--action);
}
.pf-tab-count {
  display: inline-block; margin-left: 0.375rem;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-3);
  font-size: 11px; font-weight: 600;
}

/* ── Filterleiste (Ansichts-Standard §1.2) ── */
.pf-filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
  padding: 0.75rem;
}
.pf-filterbar > .pf-filterbar-search { flex: 1 1 16rem; min-width: 12rem; }
.pf-filterbar-label {
  display: block; margin-bottom: 0.25rem;
  font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-muted);
}
/* Aktive Filter als entfernbare Pillen — ohne sie sieht eine gefilterte
   leere Liste aus wie eine leere Datenbank. */
.pf-filter-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); text-decoration: none;
}
.pf-filter-pill:hover { color: var(--ink); }

/* ── Badges ── */
.pf-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
/* Fünf Tonwerte, mehr nicht (Ansichts-Standard §1.5). Belegter Korridor
   liegt bei 4–6: Polaris 5, Stripe 6, Carbon 7. */
.pf-badge-neutral { color: var(--text-2); background: var(--surface-2); }
.pf-badge-ok     { color: var(--ok);     background: var(--ok-bg); }
.pf-badge-warn   { color: var(--warn);   background: var(--warn-bg); }
.pf-badge-danger { color: var(--danger); background: var(--danger-bg); }
.pf-badge-info   { color: var(--info);   background: var(--info-bg); }
.pf-badge-accent { color: var(--accent); background: var(--accent-bg); }
.pf-badge-source {
  border-radius: 4px; padding: 2px 7px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pf-badge-prinect { color: var(--prinect); background: var(--prinect-bg); }
.pf-badge-bde     { color: var(--bde);     background: var(--bde-bg); }
.pf-badge-datev   { color: var(--datev);   background: var(--datev-bg); }

/* ── Fortschritt ── */
.pf-progress { background: var(--hairline); height: 5px; border-radius: var(--radius-full); }
.pf-progress > div { background: var(--ink); height: 100%; border-radius: var(--radius-full); }

/* ═══ Komponenten-Overrides (DaisyUI-Haut → 1c Warm) ═══
   Höhere Spezifität über html-Präfix, damit sie das CDN-CSS schlagen. */

html .btn {
  height: 36px; min-height: 36px;
  padding: 0 15px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  text-transform: none;
  transition: background var(--speed) ease-out, border-color var(--speed) ease-out;
  animation: none;
}
html .btn-sm { height: 30px; min-height: 30px; padding: 0 11px; }
html .btn-lg { height: 42px; min-height: 42px; padding: 0 18px; }
html .btn:disabled, html .btn[disabled] { opacity: .45; }

html .btn-primary {
  background-color: var(--action);
  border-color: var(--action);
  color: var(--action-text);
}
html .btn-primary:hover {
  background-color: var(--action-hover);
  border-color: var(--action-hover);
}
html .btn-outline, html .btn-secondary {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
html .btn-outline:hover, html .btn-secondary:hover {
  background: color-mix(in srgb, var(--ink), transparent 94%);
  border-color: var(--ink);
  color: var(--ink);
}
html .btn-ghost { color: var(--text-2); }
html .btn-ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--ink), transparent 94%); }
/* Gefüllter Knopf → Schrift aus `--action-text`, wie `.pf-btn-primary`
   (:379-382). Vorher stand hier festes `#fff`: im dunklen Thema wird
   `--danger` zu #E57368 (hell), Weiß darauf hält nur 3,01:1. `--action-text`
   kippt mit (hell #F5F2EB auf #C0392B = 4,86:1, dunkel #211D17 auf #E57368
   = 5,57:1). */
html .btn-error, html .btn-danger {
  background: var(--danger); border-color: var(--danger); color: var(--action-text);
}
html .btn-square { width: 36px; padding: 0; }

html .input, html .select, html .textarea,
html input[type="text"], html input[type="number"], html input[type="email"],
html input[type="password"], html input[type="date"], html input[type="search"],
html select, html textarea {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
  border-radius: var(--radius-md);
}
html .input::placeholder, html .textarea::placeholder,
html input::placeholder, html textarea::placeholder {
  color: var(--text-muted);
}
html .input:focus, html .select:focus, html .textarea:focus,
html input:focus, html select:focus, html textarea:focus {
  border-color: var(--ink);
}

html .modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
}
html .dropdown-content, html .menu {
  background: var(--surface);
}
html .breadcrumbs { color: var(--text-3); }
html .divider { border-color: var(--border); }

/* Der Copilot-Startschirm (Funkenkachel, Composer, Ablegeflaeche) stand
   bis 30.07.2026 hier. Er hat seit dem Umbau zur Chat-Seite eine eigene
   Datei: static/css/copilot.css. Die Chip-Regel darunter bleibt — sie
   traegt die Filterleisten (Freigaben, v3-Kalkulator), nicht den
   Copiloten. */
.pf-chip {
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  padding: 3px 12px;
  font-size: 12.5px; color: var(--text-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--speed) ease-out, color var(--speed) ease-out;
}
.pf-chip:hover { border-color: var(--ink); color: var(--ink); }

/* ── Gesperrter Knopf mit Grund im Label (E3) ──────────────────────────
   Der Baustein dazu: `templates/components/gesperrter_knopf.html`.

   WARUM DIESER BLOCK AM DATEIENDE STEHT UND NICHT BEI DEN KNÖPFEN:
   auf `tokens.css:379-408` zeigen rund zwanzig Belege in Tests und
   Prüfvorlagen (`pfad:zeile`). Ein hier eingeschobener Block hätte sie
   alle um seine Zeilenzahl verschoben. Deshalb ändert E3 im Knopfblock
   genau EINE wirksame Zeile (`:401`, die Deckkraft) und hängt alles Neue
   an — die Zeilennummern davor bleiben, was sie belegen.

   WAS AN DER DECKKRAFT FALSCH WAR (T-B, `apps/core/tests/
   test_kontrast_tokens.py`, GESPERRT_PAARE):
   `opacity` ist kein Farbtoken, färbt aber BEIDE Seiten des Paares um —
   Schrift und Fläche werden zu 45 % mit dem Seitenhintergrund verrechnet.
   Gemessen ergab das 2,64:1 (Primärknopf, hell) und 2,78:1
   (Sekundärknopf, hell), gefordert sind 4,5:1. Es war keine Farbwahl,
   sondern Arithmetik: bei 45 % Deckkraft liegt die OBERGRENZE im hellen
   Thema bei 3,41:1 — auch für Schwarz auf Weiß. Keine Farbentscheidung
   hätte das je gerettet, deshalb ändert E3 die Deckkraft und keinen
   einzigen Farbwert (die stehen bei Marco). Gemessen nach der Änderung:
   5,50:1 hell / 7,65:1 dunkel (Primär), 5,96:1 / 7,65:1 (Sekundär).
   „Deaktiviertes ist sichtbar deaktiviert (gedämpfter Text)"
   (`01_designvorgaben.md:68`) heißt gedämpft, nicht unlesbar — und ein
   Grund, den man nicht lesen kann, ist derselbe Zustand wie ein Grund im
   Tooltip, den E3 gerade abschafft.

   Die Vorgeschichte der Regel selbst, aus dem alten Kommentar übernommen:
   die Versandmasken schalten „Senden" ab, solange kein SMTP konfiguriert
   ist. Ohne die Regel sähe der gesperrte Knopf genauso klickbar aus wie
   ein freier — die abgelöste DaisyUI-Klasse `btn` brachte ihre eigene
   :disabled-Optik mit, `pf-btn-*` hatte keine.

   NICHT MIT GEÄNDERT, mit Grund: `html .btn:disabled` (`:496`) steht
   weiter auf .45. Das ist die abgelöste DaisyUI-Klasse, sie steht in
   keinem aufgezählten Kontrastpaar, und sie mit zu ändern wäre eine
   Optikänderung an Seiten, die E3 nicht anfasst. Sie gehört zu dem Zug,
   der `btn` ablöst — hier benannt, nicht übersehen.

   STATUSPUNKT (Regel 4, `01_designvorgaben.md:67`): „nie nur Farbe,
   immer auch Wort". Der Punkt trägt deshalb KEINE eigene Farbe, sondern
   `currentColor` — er kann nicht in einen Kontrastfall geraten, den die
   Schrift daneben nicht schon hat. Er steht nur im gesperrten Zustand:
   ein Punkt am freien Knopf meldete einen Zustand, den es nicht gibt. */
.pf-btn-punkt {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: currentColor;
}
/* Offener Ring statt gefülltem Punkt: „steht offen", nicht „erledigt". */
.pf-btn-punkt--gesperrt {
  background: none;
  border: 1.5px solid currentColor;
}