/* ── tokens.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   honeepot · tokens.css · die eine Quelle
   ───────────────────────────────────────────────────────────────────────
   Schicht 1  Rohwerte      — die einzigen Literale im System
   Schicht 2  Semantik      — nur var(), pro Modus
   Schicht 3  Dichte        — C2B (weit) / B2B (dicht)
   Schicht 4  Palette       — A (Hausfarben) / B (neutrales Chassis)

   REGEL   Bausteine benutzen ausschliesslich Schicht 2, 3, 4.
           Kein Baustein enthaelt ein Literal. Kein Wert steht zweimal.
   METHODE Eine Rolle ist eine Tonleiter, keine Farbe. Je Rolle zwei
           Sprossen: L 0,50 fuer hellen Grund, L 0,70 fuer dunklen.
           Gemessen ueber alle 360 Farbtoene bei voller Buntheit traegt
           L 0,50 mindestens 5,29 auf Creme, L 0,72 mindestens 5,11
           auf Navy. Das ist die Weisslabel-Garantie: jeder fremde
           Markenton auf diesen Sprossen erfuellt 4,5.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ SCHICHT 1 · ROHWERTE ══════════════════════════════════════════ */
:root {
  /* Grundleiter hell */
  --c-white: #FFFFFF;         /* L 1,000 C 0,000 h 90 · reine Karte im hellen Modus */
  --c-paper-98: #FBF8F3;      /* L 0,980 C 0,007 h 81 · Grund hell · gegeben · Tinte 13,81 auf ihm */
  --c-paper-95: #F2ECE1;      /* L 0,945 C 0,016 h 83 · Grund 2. Stufe · gegeben · Buntheit 0,016 — bricht die Leiter, siehe readme */
  --c-paper-95n: #F2EEE9;     /* L 0,951 C 0,008 h 74 · Grund 2. Stufe, Variante B · gleiche Buntheitslinie wie der Grund */
  --c-paper-90: #E1DDD7;      /* L 0,899 C 0,009 h 78 · Linie hell · 1,28 auf Creme — dekorativ, kein Steuerrand */
  --c-paper-84: #CFCAC2;      /* L 0,841 C 0,012 h 80 · Linie stark hell · 1,54 auf Creme */
  --c-stone-65: #948F87;      /* L 0,652 C 0,013 h 80 · Steuerrand hell · 3,03 auf Creme · 3,21 auf Weiss — erfuellt 3,0 */
  /* Grundleiter dunkel · Variante A (Navy) */
  --c-navy-28: #0C2850;       /* L 0,281 C 0,081 h 258 · Navy · gegeben · Dunkelflaeche hell / Karte dunkel · Weiss darauf 14,63 */
  --c-navy-22: #0A1A30;       /* L 0,217 C 0,049 h 257 · Grund 2. Stufe dunkel · gegeben */
  --c-navy-17: #061020;       /* L 0,173 C 0,037 h 258 · Grund dunkel · gegeben · Weiss darauf 19,04 */
  --c-navy-16: #04101F;       /* L 0,170 C 0,037 h 253 · Dunkelflaeche im dunklen Modus · gegeben */
  --c-navy-36: #2E3E55;       /* L 0,360 C 0,045 h 257 · Linie dunkel · 1,35 auf Navy — dekorativ */
  --c-navy-44: #41536E;       /* L 0,439 C 0,050 h 258 · Linie stark dunkel · 1,87 auf Navy */
  --c-navy-56: #647794;       /* L 0,565 C 0,050 h 259 · Steuerrand dunkel · 3,21 auf Navy — erfuellt 3,0 */
  --c-navy-52: #687485;       /* L 0,555 C 0,030 h 257 · Text deaktiviert dunkel · 3,08 auf Navy — erfuellt 3,0 mit Reserve */
  /* Grundleiter dunkel · Variante B (Schiefer) */
  --c-slate-28: #212A36;      /* L 0,282 C 0,026 h 256 · Variante B: Karte dunkel · Buntheit 0,026 statt 0,081 · Weiss darauf 14,49 */
  --c-slate-21: #131A24;      /* L 0,216 C 0,022 h 257 · Variante B: Grund 2. Stufe dunkel */
  --c-slate-17: #0A1018;      /* L 0,171 C 0,019 h 256 · Variante B: Grund dunkel · Weiss darauf 19,09 */
  --c-slate-14: #050911;      /* L 0,139 C 0,020 h 260 · Variante B: Dunkelflaeche im dunklen Modus */
  --c-slate-36: #353E4B;      /* L 0,361 C 0,026 h 258 · Variante B: Linie dunkel */
  --c-slate-44: #495362;      /* L 0,439 C 0,028 h 258 · Variante B: Linie stark dunkel */
  --c-slate-56: #6D7786;      /* L 0,566 C 0,026 h 258 · Variante B: Steuerrand dunkel · 3,20 auf Schiefer — erfuellt 3,0 */
  /* Tinten */
  --c-ink-46: #41597A;        /* L 0,459 C 0,062 h 256 · Text weich hell · gegeben · 6,75 auf Creme */
  --c-ink-50: #476490;        /* L 0,500 C 0,079 h 259 · Text gedaempft hell · gegeben · 5,67 auf Creme */
  --c-sky-80: #A9C0DC;        /* L 0,800 C 0,047 h 253 · Text weich dunkel · gegeben · 7,85 auf Navy */
  --c-sky-70: #8FA0B8;        /* L 0,701 C 0,040 h 257 · Text gedaempft dunkel · 5,50 auf Navy */
  --c-slate-80: #B6BECB;      /* L 0,799 C 0,020 h 260 · Variante B: Text weich dunkel · 7,74 auf Schiefer */
  --c-slate-69: #959CA7;      /* L 0,691 C 0,018 h 259 · Variante B: Text gedaempft dunkel · 5,24 auf Schiefer */
  --c-slate-62: #878F9B;      /* L 0,647 C 0,020 h 258 · Text deaktiviert hell · 3,08 auf Creme — erfuellt 3,0 mit Reserve */
  --c-night-08: #0A1420;      /* L 0,188 C 0,029 h 254 · Tinte auf allen hellen Rollentoenen · gegeben */
  /* Rolle MARKE · Blau · gebunden ans Logo */
  --c-blue-50: #005DD0;       /* L 0,506 C 0,193 h 259 · Marke, helle Sprosse L 0,506 · gegeben · 5,70 auf Creme */
  --c-blue-70: #379DFF;       /* L 0,685 C 0,171 h 251 · Marke, dunkle Sprosse L 0,685 · gegeben · 5,18 auf Navy */
  --c-blue-94: #E0ECFF;       /* L 0,940 C 0,029 h 260 · Flaeche hell · Tinte 12,27 darauf */
  --c-blue-86: #BCD3F6;       /* L 0,861 C 0,055 h 259 · Rand der hellen Flaeche · 1,44 auf Creme */
  /* ── Himmelsband (04.09.2026) ──────────────────────────────────────────────────────
     Das Band ueber jeder honee-Flaeche. Es schlaegt bewusst NICHT mit dem Theme um:
     es traegt die Marke, und die bleibt hell — deshalb ist die Tinte darauf immer Navy
     (siehe --on-sky). Werte aus core/theme.py DEFAULTS uebernommen, nicht neu erfunden. */
  --c-sky-94: #DCEFFB;        /* L 0,942 C 0,026 h 235 · Himmelsband oben · Navy darauf 12,39 */
  --c-sky-82: #9CCBEC;        /* L 0,820 C 0,068 h 239 · Himmelsband unten · Navy darauf 8,48 */
  --c-sky-71: #6EA8D8;        /* L 0,710 C 0,093 h 245 · Welle hinten, hell · Navy darauf 5,75 */
  --c-sky-47: #2E5A94;        /* L 0,466 C 0,107 h 256 · Welle hinten, dunkel · Weiss darauf 6,99 */
  --c-blue-32: #21334F;       /* L 0,320 C 0,056 h 259 · Flaeche dunkel · Weiss 12,72 darauf */
  /* Rolle AKTION · Amber */
  --c-amber-50: #A24300;      /* L 0,503 C 0,141 h 46 · Aktion, helle Sprosse L 0,503 · gegeben · 5,94 auf Creme */
  /* Unser goldenes Orange. Torsten am 03.09.2026: „bitte gib uns unser goldenes
     Orange zurueck. Das braun-orange gefaellt mir nicht." GEMESSEN: weisse Schrift
     darauf traegt NICHT (2,01) -- dunkle Tinte dagegen 9,22. Deshalb steht es hier
     mit seiner eigenen Tinte als Paar und nicht als Ersatz fuer --c-amber-50, das
     fuer weisse Schrift gerechnet ist. */
  --c-gold-76: #F2A900;       /* L 0,760 C 0,157 h 79 · unser Gold · dunkle Tinte 9,22 darauf */
  --c-amber-70: #E68028;      /* L 0,699 C 0,157 h 56 · Aktion, dunkle Sprosse L 0,699 · gegeben · 5,21 auf Navy */
  --c-amber-94: #FFE5D9;      /* L 0,940 C 0,033 h 46 · Flaeche hell · Tinte 12,17 darauf */
  --c-amber-86: #F1C7B3;      /* L 0,861 C 0,055 h 47 · Rand der hellen Flaeche · 1,46 auf Creme */
  --c-amber-32: #4A291A;      /* L 0,320 C 0,055 h 45 · Flaeche dunkel · Weiss 12,94 darauf */
  /* Rolle STIMME · Magenta · #EE33EE gebunden */
  --c-magenta-50: #AC00AE;    /* L 0,524 C 0,241 h 328 · Stimme, helle Sprosse L 0,524 · gegeben · 5,89 auf Creme */
  --c-magenta-70: #F33FF3;    /* L 0,700 C 0,280 h 328 · Stimme, dunkle Sprosse L 0,700 · gegeben · 4,75 auf Navy — duennste Paarung im System */
  --c-magenta-68: #EE33EE;    /* L 0,682 C 0,285 h 328 · Der Punkt · GEBUNDEN, laeuft auf fremden Seiten · 3,12 auf Creme = KEINE Textfarbe · dunkle Tinte darauf 5,59 */
  --c-magenta-94: #F9E3F8;    /* L 0,940 C 0,036 h 327 · Flaeche hell · Tinte 12,11 darauf */
  --c-magenta-86: #E6C5E3;    /* L 0,860 C 0,054 h 329 · Rand der hellen Flaeche · 1,47 auf Creme */
  --c-magenta-32: #422841;    /* L 0,319 C 0,056 h 328 · Flaeche dunkel · Weiss 13,03 darauf */
  /* Zustand GUT */
  --c-green-50: #197733;      /* L 0,501 C 0,133 h 148 · Zustand, helle Sprosse · 5,32 auf Creme · weisse Tinte 5,63 */
  --c-green-72: #2FC359;      /* L 0,719 C 0,191 h 148 · Zustand, dunkle Sprosse · 6,32 auf Navy · dunkle Tinte 8,00 */
  --c-green-94: #DCF2DE;      /* L 0,940 C 0,035 h 148 · Flaeche hell · Tinte 12,40 darauf */
  --c-green-86: #BADCBD;      /* L 0,861 C 0,056 h 148 · Rand der hellen Flaeche · 1,41 auf Creme */
  --c-green-32: #1E3A22;      /* L 0,319 C 0,054 h 147 · Flaeche dunkel · Weiss 12,47 darauf */
  /* Zustand WARNEND */
  --c-gold-50: #835A14;       /* L 0,500 C 0,097 h 75 · Zustand, helle Sprosse · 5,77 auf Creme · weisse Tinte 6,11 */
  --c-gold-72: #D79629;       /* L 0,720 C 0,139 h 75 · Zustand, dunkle Sprosse · 5,77 auf Navy · dunkle Tinte 7,31 */
  --c-gold-94: #FAE8D1;       /* L 0,939 C 0,036 h 74 · Flaeche hell · Tinte 12,21 darauf */
  --c-gold-86: #E7CDAA;       /* L 0,861 C 0,055 h 75 · Rand der hellen Flaeche · 1,45 auf Creme */
  --c-gold-32: #432E0E;       /* L 0,319 C 0,055 h 75 · Flaeche dunkel · Weiss 12,84 darauf */
  /* Zustand KRITISCH */
  --c-red-50: #B61C1E;        /* L 0,500 C 0,188 h 27 · Zustand, helle Sprosse · 6,25 auf Creme · weisse Tinte 6,62 */
  --c-red-72: #F9776C;        /* L 0,719 C 0,161 h 27 · Zustand, dunkle Sprosse · 5,49 auf Navy · dunkle Tinte 6,95 */
  --c-red-94: #FFE4E0;        /* L 0,940 C 0,030 h 28 · Flaeche hell · Tinte 12,14 darauf */
  --c-red-86: #F3C4BE;        /* L 0,860 C 0,055 h 27 · Rand der hellen Flaeche · 1,47 auf Creme */
  --c-red-32: #4B2723;        /* L 0,319 C 0,055 h 27 · Flaeche dunkel · Weiss 13,01 darauf */

  /* Schattenfarbe als Kanaele, damit Alpha komponierbar bleibt */
  --c-shadow: 12 40 80;         /* Navy als r g b */
  --c-shadow-d: 0 0 0;          /* im dunklen Modus schattet Schwarz */

  /* Raum · 4-px-Takt */
  --s-0: 0;      --s-05: 2px;  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;   --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* Radien */
  --r-1: 4px;    --r-2: 8px;   --r-3: 12px;  --r-4: 18px;  --r-pill: 999px;
  --r-mark: 23.4%;              /* Quadrat-Rundung der Bildmarke, 15/64 */

  /* Erhebung */
  --e-1: 0 1px 2px rgb(var(--c-shadow) / .07);
  --e-2: 0 1px 2px rgb(var(--c-shadow) / .06), 0 6px 14px -4px rgb(var(--c-shadow) / .10);
  --e-3: 0 2px 4px rgb(var(--c-shadow) / .06), 0 18px 30px -10px rgb(var(--c-shadow) / .14);
  --e-1-d: 0 1px 2px rgb(var(--c-shadow-d) / .30);
  --e-2-d: 0 1px 2px rgb(var(--c-shadow-d) / .28), 0 6px 14px -4px rgb(var(--c-shadow-d) / .40);
  --e-3-d: 0 2px 4px rgb(var(--c-shadow-d) / .28), 0 18px 30px -10px rgb(var(--c-shadow-d) / .52);

  /* Bewegung · sparsam */
  --dur-1: 110ms;  --dur-2: 170ms;  --dur-3: 260ms;
  --ease: cubic-bezier(.2, .8, .3, 1);
  --ease-in-out: cubic-bezier(.5, 0, .3, 1);

  /* Fokus */
  --focus-w: 3px;  --focus-off: 2px;

  /* Mischanteile · abgeleitete Zustaende und Flaechen, ohne neue Literale */
  --mix-hov: 14%;   /* Ueberfahren: Rolle Richtung Tinte */
  --mix-act: 26%;   /* Druecken */
  --mix-tint: 88%;  /* Flaeche aus einer Rolle */
  --mix-edge: 62%;  /* Rand einer Flaeche */

  /* Masse · damit kein Baustein ein Literal braucht */
  --bw-1: 1px;   --bw-2: 2px;   --bw-3: 3px;
  --lift: 1px;                  /* Anhebung beim Ueberfahren */
  --press: 0px;                 /* Versatz beim Druecken */
  --op-off: .5;                 /* deaktiviert */
  --op-soft: .72;
  --dot-1: 6px;  --dot-2: 10px;  --dot-3: 14px;   /* der Punkt */
  /* Das Himmelsband (04.09.2026). Die Hoehe traegt Zeichen (30px) plus Luft; die
     Welle darunter ist 20px hoch — der Zuschnitt des SVG, nicht geschaetzt. */
  --sky-h: 54px;  --welle-h: 20px;  --tri-sz: 22px;  --zeichen-sz: 30px;
  --icon-sm: 16px; --icon: 20px; --icon-lg: 24px;
  --track: 6px;                 /* Fortschrittsanzeige */
  --z-1: 1; --z-2: 10; --z-3: 100;
  --spin: 900ms;                /* Ladeanzeige, wesentliche Bewegung */

  /* Raster */
  --cols: 12;
  --w-1: 640px;  --w-2: 960px;  --w-3: 1280px;  --measure: 66ch;
  --bp-1: 480px; --bp-2: 768px; --bp-3: 1024px; --bp-4: 1280px;  /* nur Referenz */

  /* Dichtevorraete — C2B */
  --d1-ctl-h: 48px;  --d1-ctl-h-sm: 40px; --d1-ctl-h-lg: 56px;
  --d1-ctl-px: 20px; --d1-ctl-gap: 10px;  --d1-row-h: 56px;
  --d1-ctl-py: 10px;
  --d1-card-p: 28px; --d1-stack: 20px;    --d1-sec: 64px;
  --d1-fs: 17px;     --d1-lh: 1.55;       --d1-r: var(--r-3);
  --d1-box: 22px;    --d1-sw-w: 46px;     --d1-sw-h: 26px;  --d1-knob: 20px;
  --d1-bubble: 40ch; --d1-tbl-px: 16px;
  /* Dichtevorraete — B2B */
  --d2-ctl-h: 34px;  --d2-ctl-h-sm: 28px; --d2-ctl-h-lg: 40px;
  --d2-ctl-px: 12px; --d2-ctl-gap: 6px;   --d2-row-h: 34px;
  --d2-ctl-py: 6px;
  --d2-card-p: 14px; --d2-stack: 10px;    --d2-sec: 32px;
  --d2-fs: 14px;     --d2-lh: 1.45;       --d2-r: var(--r-2);
  --d2-box: 16px;    --d2-sw-w: 34px;     --d2-sw-h: 19px;  --d2-knob: 15px;
  --d2-bubble: 56ch; --d2-tbl-px: 10px;
}

/* ══ SCHICHT 2 · SEMANTIK · heller Modus ═══════════════════════════ */
:root {
  color-scheme: light;
  --bg: var(--c-paper-98);
  --bg-2: var(--c-paper-95);
  --surface: var(--c-white);
  --surface-2: var(--c-paper-98);
  --band: var(--c-navy-28);
  --band-2: var(--c-navy-22);

  --ink: var(--c-navy-28);
  --ink-soft: var(--c-ink-46);
  --ink-muted: var(--c-ink-50);
  --ink-off: var(--c-slate-62);
  --ink-inverse: var(--c-white);
  --on-band: var(--c-white);
  --on-band-soft: var(--c-sky-80);
  --on-band-muted: var(--c-sky-70);

  --brand: var(--c-blue-50);
  --brand-mark: var(--c-blue-50);
  --brand-tint: var(--c-blue-94);
  --brand-edge: var(--c-blue-86);
  --on-brand: var(--c-white);

  /* ── Aktion: Gold als FLAECHE, Ocker als TINTE (04.09.2026) ────────────────────────
     Bis heute war --action ein dunkles Bernstein (#A24300) und trug weisse Schrift.
     Torsten: „Ich mag das goldene Orange als CTA-Farbe. Dieses komische Rotbraun finde
     ich gar nicht gut." Gerechnet, warum ein Tausch nicht geht: Gold ist zu hell fuer
     weisse Schrift (2,01) UND zu hell, um selbst Schrift auf hellem Grund zu sein
     (1,90). Beides scheitert an derselben Eigenschaft.
     Die Loesung ist dieselbe wie bei der Stimme: die Rolle hat eine Flaeche und eine
     Tinte, und das sind zwei Werte.
       --action      Flaeche  · Gold, traegt Navy mit 7,28 (vorher 6,29 mit weiss)
       --action-ink  Schrift  · Ocker, dieselbe Familie eine Stufe tiefer, 5,77 auf Creme
     Der dunkle Modus machte es schon richtig (helle Flaeche, dunkle Tinte) — jetzt sind
     beide gleich gebaut. */
  --action: var(--c-gold-76);
  --action-ink: var(--c-gold-50);
  --action-tint: var(--c-gold-94);
  --action-edge: var(--c-gold-86);
  --on-action: var(--c-navy-28);

  --voice: var(--c-magenta-50);
  --voice-mark: var(--c-magenta-68);
  --voice-tint: var(--c-magenta-94);
  --voice-edge: var(--c-magenta-86);
  --on-voice: var(--c-white);
  --on-voice-mark: var(--c-night-08);

  /* Das Himmelsband. Beide Flaechen bleiben in JEDEM Modus hell — es traegt die Marke.
     Deshalb ist --on-sky fest Navy und wird nicht mit umgeschaltet. Nur die Welle
     dahinter folgt dem Modus, weil sie die Kartenflaeche zeigt. */
  --sky-saum: rgba(255, 255, 255, .55);
  --sky-top: var(--c-sky-94);
  --sky-bot: var(--c-sky-82);
  --on-sky: var(--c-navy-28);
  --wave-back: var(--c-sky-71);

  --good: var(--c-green-50);  --good-tint: var(--c-green-94);  --good-edge: var(--c-green-86);
  --warn: var(--c-gold-50);   --warn-tint: var(--c-gold-94);   --warn-edge: var(--c-gold-86);
  --crit: var(--c-red-50);    --crit-tint: var(--c-red-94);    --crit-edge: var(--c-red-86);
  --on-state: var(--c-white);

  --line: var(--c-paper-90);
  --line-strong: var(--c-paper-84);
  --line-ctl: var(--c-stone-65);

  --focus: var(--c-blue-50);
  --focus-halo: var(--c-white);

  --e1: var(--e-1);  --e2: var(--e-2);  --e3: var(--e-3);
}

/* ══ SCHICHT 2 · SEMANTIK · dunkler Modus ══════════════════════════
   Der Block steht zweimal — einmal fuer die Systemvorgabe, einmal fuer
   den ausdruecklichen Schalter. Nur Verweise, keine Werte: die Literale
   stehen ausschliesslich in Schicht 1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: var(--c-navy-17);
  --bg-2: var(--c-navy-22);
  --surface: var(--c-navy-28);
  --surface-2: var(--c-navy-22);
  --band: var(--c-navy-16);
  --band-2: var(--c-navy-17);

  --ink: var(--c-white);
  --ink-soft: var(--c-sky-80);
  --ink-muted: var(--c-sky-70);
  --ink-off: var(--c-navy-52);
  --ink-inverse: var(--c-night-08);
  --on-band: var(--c-white);
  --on-band-soft: var(--c-sky-80);
  --on-band-muted: var(--c-sky-70);

  --brand: var(--c-blue-70);
  --brand-mark: var(--c-blue-70);
  --brand-tint: var(--c-blue-32);
  --brand-edge: var(--c-navy-44);
  --on-brand: var(--c-night-08);

  /* Gold in BEIDEN Modi dieselbe Flaeche — sie traegt die Aktion, nicht das Schema.
     Auf dem dunklen Grund ist sie sogar besser als das bisherige Orange: 9,22 statt
     6,60. Die Tinte dreht sich um: hier ist Gold die SCHRIFT (7,28 auf der Karte). */
  --action: var(--c-gold-76);
  --action-ink: var(--c-gold-76);
  --action-tint: var(--c-gold-32);
  --action-edge: var(--c-navy-44);
  --on-action: var(--c-night-08);

  --voice: var(--c-magenta-70);
  /* Nur die Welle folgt dem Modus — das Band darueber bleibt hell. */
  --wave-back: var(--c-sky-47);
  --voice-tint: var(--c-magenta-32);
  --voice-edge: var(--c-navy-44);
  --on-voice: var(--c-night-08);

  --good: var(--c-green-72);  --good-tint: var(--c-green-32);  --good-edge: var(--c-navy-44);
  --warn: var(--c-gold-72);   --warn-tint: var(--c-gold-32);   --warn-edge: var(--c-navy-44);
  --crit: var(--c-red-72);    --crit-tint: var(--c-red-32);    --crit-edge: var(--c-navy-44);
  --on-state: var(--c-night-08);

  --line: var(--c-navy-36);
  --line-strong: var(--c-navy-44);
  --line-ctl: var(--c-navy-56);

  --focus: var(--c-blue-70);
  --focus-halo: var(--c-night-08);

  --e1: var(--e-1-d);  --e2: var(--e-2-d);  --e3: var(--e-3-d);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--c-navy-17);
  --bg-2: var(--c-navy-22);
  --surface: var(--c-navy-28);
  --surface-2: var(--c-navy-22);
  --band: var(--c-navy-16);
  --band-2: var(--c-navy-17);

  --ink: var(--c-white);
  --ink-soft: var(--c-sky-80);
  --ink-muted: var(--c-sky-70);
  --ink-off: var(--c-navy-52);
  --ink-inverse: var(--c-night-08);
  --on-band: var(--c-white);
  --on-band-soft: var(--c-sky-80);
  --on-band-muted: var(--c-sky-70);

  --brand: var(--c-blue-70);
  --brand-mark: var(--c-blue-70);
  --brand-tint: var(--c-blue-32);
  --brand-edge: var(--c-navy-44);
  --on-brand: var(--c-night-08);

  /* Gold in BEIDEN Modi dieselbe Flaeche — sie traegt die Aktion, nicht das Schema.
     Auf dem dunklen Grund ist sie sogar besser als das bisherige Orange: 9,22 statt
     6,60. Die Tinte dreht sich um: hier ist Gold die SCHRIFT (7,28 auf der Karte). */
  --action: var(--c-gold-76);
  --action-ink: var(--c-gold-76);
  --action-tint: var(--c-gold-32);
  --action-edge: var(--c-navy-44);
  --on-action: var(--c-night-08);

  --voice: var(--c-magenta-70);
  /* Nur die Welle folgt dem Modus — das Band darueber bleibt hell. */
  --wave-back: var(--c-sky-47);
  --voice-tint: var(--c-magenta-32);
  --voice-edge: var(--c-navy-44);
  --on-voice: var(--c-night-08);

  --good: var(--c-green-72);  --good-tint: var(--c-green-32);  --good-edge: var(--c-navy-44);
  --warn: var(--c-gold-72);   --warn-tint: var(--c-gold-32);   --warn-edge: var(--c-navy-44);
  --crit: var(--c-red-72);    --crit-tint: var(--c-red-32);    --crit-edge: var(--c-navy-44);
  --on-state: var(--c-night-08);

  --line: var(--c-navy-36);
  --line-strong: var(--c-navy-44);
  --line-ctl: var(--c-navy-56);

  --focus: var(--c-blue-70);
  --focus-halo: var(--c-night-08);

  --e1: var(--e-1-d);  --e2: var(--e-2-d);  --e3: var(--e-3-d);
}

/* ══ SCHICHT 3 · DICHTE ════════════════════════════════════════════
   Eine Bibliothek, zwei Stufen. C2B ist die Vorgabe.
   Die Auswahl ist NICHT auf :root qualifiziert: data-density gilt auf
   jedem Element und damit auf jedem Teilbaum. Das braucht die
   Oberflaeche wirklich — eine dichte Tabelle in einer weiten Ansicht,
   ein weiter Anmeldedialog in einer dichten Beraterоberflaeche — und
   es ist die Bedingung dafuer, dass man beide Stufen nebeneinander
   zeigen kann. Aeussere Angabe gewinnt, innere ueberschreibt sie. */
:root, [data-density="c2b"] {
  --ctl-h: var(--d1-ctl-h);   --ctl-h-sm: var(--d1-ctl-h-sm); --ctl-h-lg: var(--d1-ctl-h-lg);
  --ctl-px: var(--d1-ctl-px); --ctl-gap: var(--d1-ctl-gap);   --row-h: var(--d1-row-h);
  --ctl-py: var(--d1-ctl-py);
  --card-p: var(--d1-card-p); --stack: var(--d1-stack);       --sec: var(--d1-sec);
  --fs: var(--d1-fs);         --lh: var(--d1-lh);             --r-ctl: var(--d1-r);
  --box: var(--d1-box);       --sw-w: var(--d1-sw-w);         --sw-h: var(--d1-sw-h);
  --knob: var(--d1-knob);     --bubble: var(--d1-bubble);     --tbl-px: var(--d1-tbl-px);
  /* Die zwei Kurzformen, die von --fs/--lh abhaengen, stehen HIER und
     nicht in typo.css: eine font-Kurzform loest ihre var() auf dem
     Element auf, das sie deklariert. Auf :root gesetzt waere 17 px
     eingebacken und ein --fs: 14px auf einem Nachfahren wirkungslos. */
  --t-body: var(--w-body) var(--fs)/var(--lh) var(--ff);
  --t-num:  var(--w-semi) var(--fs)/var(--lh-3) var(--ff);
}
[data-density="b2b"] {
  --ctl-h: var(--d2-ctl-h);   --ctl-h-sm: var(--d2-ctl-h-sm); --ctl-h-lg: var(--d2-ctl-h-lg);
  --ctl-px: var(--d2-ctl-px); --ctl-gap: var(--d2-ctl-gap);   --row-h: var(--d2-row-h);
  --ctl-py: var(--d2-ctl-py);
  --card-p: var(--d2-card-p); --stack: var(--d2-stack);       --sec: var(--d2-sec);
  --fs: var(--d2-fs);         --lh: var(--d2-lh);             --r-ctl: var(--d2-r);
  --box: var(--d2-box);       --sw-w: var(--d2-sw-w);         --sw-h: var(--d2-sw-h);
  --knob: var(--d2-knob);     --bubble: var(--d2-bubble);     --tbl-px: var(--d2-tbl-px);
  --t-body: var(--w-body) var(--fs)/var(--lh) var(--ff);
  --t-num:  var(--w-semi) var(--fs)/var(--lh-3) var(--ff);
}
/* Auf dem Telefon gibt es keine dichte Stufe: 34 px sind kein Tippziel.
   Unter 768 px faellt B2B auf C2B zurueck — Verweise, keine neuen Werte. */
@media (max-width: 767px) {
  [data-density="b2b"] {
    --ctl-h: var(--d1-ctl-h);   --ctl-h-sm: var(--d1-ctl-h-sm); --ctl-h-lg: var(--d1-ctl-h-lg);
    --ctl-px: var(--d1-ctl-px); --ctl-gap: var(--d1-ctl-gap);   --row-h: var(--d1-row-h);
    --ctl-py: var(--d1-ctl-py);
    --card-p: var(--d1-card-p); --stack: var(--d1-stack);       --sec: var(--d1-sec);
    --fs: var(--d1-fs);         --lh: var(--d1-lh);             --r-ctl: var(--d1-r);
    --box: var(--d1-box);       --sw-w: var(--d1-sw-w);         --sw-h: var(--d1-sw-h);
    --knob: var(--d1-knob);     --bubble: var(--d1-bubble);     --tbl-px: var(--d1-tbl-px);
    --t-body: var(--w-body) var(--fs)/var(--lh) var(--ff);
    --t-num:  var(--w-semi) var(--fs)/var(--lh-3) var(--ff);
  }
}

/* ══ SCHICHT 4 · PALETTE B · das neutrale Chassis ══════════════════
   Frei waren Creme, Navy und der Akzent. B aendert genau die drei:
   · Grund 2. Stufe auf die Buntheitslinie des Grundes gebracht
     (#F2ECE1 C 0,016 -> #F2EEE9 C 0,008)
   · Navy -> Schiefer, Buntheit 0,081 -> 0,026: der Grund haelt sich
     aus der Markenfarbe heraus
   · AKTION erbt die MARKE — eine bunte Familie weniger, und der
     Weisslabel-Fall bleibt widerspruchsfrei. Amber wird zum
     Hervorhebungston fuer Preise (nur Flaechen, 3,0). */
:root[data-palette="b"] {
  --bg-2: var(--c-paper-95n);
  --action: var(--brand);
  --action-tint: var(--brand-tint);
  --action-edge: var(--brand-edge);
  --on-action: var(--on-brand);
  --highlight: var(--c-amber-50);
  --highlight-tint: var(--c-amber-94);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="b"]:not([data-theme="light"]) {
    --bg: var(--c-slate-17);   --bg-2: var(--c-slate-21);
    --surface: var(--c-slate-28); --surface-2: var(--c-slate-21);
    --band: var(--c-slate-14); --band-2: var(--c-slate-17);
    --ink-soft: var(--c-slate-80); --ink-muted: var(--c-slate-69);
    --on-band-soft: var(--c-slate-80); --on-band-muted: var(--c-slate-69);
    --line: var(--c-slate-36); --line-strong: var(--c-slate-44); --line-ctl: var(--c-slate-56);
    --brand-edge: var(--c-slate-44); --action-edge: var(--c-slate-44);
    --voice-edge: var(--c-slate-44); --good-edge: var(--c-slate-44);
    --warn-edge: var(--c-slate-44); --crit-edge: var(--c-slate-44);
    --highlight: var(--c-amber-70); --highlight-tint: var(--c-amber-32);
  }
}
:root[data-palette="b"][data-theme="dark"] {
  --bg: var(--c-slate-17);   --bg-2: var(--c-slate-21);
  --surface: var(--c-slate-28); --surface-2: var(--c-slate-21);
  --band: var(--c-slate-14); --band-2: var(--c-slate-17);
  --ink-soft: var(--c-slate-80); --ink-muted: var(--c-slate-69);
  --on-band-soft: var(--c-slate-80); --on-band-muted: var(--c-slate-69);
  --line: var(--c-slate-36); --line-strong: var(--c-slate-44); --line-ctl: var(--c-slate-56);
  --brand-edge: var(--c-slate-44); --action-edge: var(--c-slate-44);
  --voice-edge: var(--c-slate-44); --good-edge: var(--c-slate-44);
  --warn-edge: var(--c-slate-44); --crit-edge: var(--c-slate-44);
  --highlight: var(--c-amber-70); --highlight-tint: var(--c-amber-32);
}

/* ══ BEWEGUNG ABSCHALTBAR ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
}

/* ══ WEISSLABEL · eine fremde Markenfarbe einsetzen ════════════════
   Der Kunde liefert einen Hex. Die Rechnung laeuft einmal, beim
   Anlegen des Mandanten: Farbe in OKLCH umrechnen, Farbton und
   Buntheit behalten, Helligkeit auf 0,50 setzen (helle Sprosse) und
   auf 0,72 (dunkle Sprosse). Beide Werte hinterlegen:

     <html data-tenant style="--tenant-l:#BC0113; --tenant-d:#FF7266">

   Der Kontrast ist damit garantiert, ohne dass jemand nachmisst —
   siehe Sprossengarantie im Nachweisblatt: schlechtester Fall ueber
   alle 360 Farbtoene 5,27 auf Creme und 5,08 auf Navy.
   Braucht der Kunde seine Rohfarbe zusaetzlich (Logo, Flaeche,
   Grossschrift ab 3,0), kommt sie als --tenant-mark dazu.

   Was NICHT mitwandert: STIMME. honee ist honee, auch auf einer
   knallroten Website. Die Stimme gehoert uns, nicht dem Mandanten. */
:root[data-tenant] {
  --brand: var(--tenant-l);
  --brand-mark: var(--tenant-mark, var(--tenant-l));
  --brand-tint: color-mix(in oklab, var(--tenant-l), var(--surface) var(--mix-tint));
  --brand-edge: color-mix(in oklab, var(--tenant-l), var(--surface) var(--mix-edge));
  --focus: var(--tenant-l);
}
@media (prefers-color-scheme: dark) {
  :root[data-tenant]:not([data-theme="light"]) {
    --brand: var(--tenant-d);
    --brand-mark: var(--tenant-mark, var(--tenant-d));
    --brand-tint: color-mix(in oklab, var(--tenant-d), var(--surface) var(--mix-tint));
    --brand-edge: color-mix(in oklab, var(--tenant-d), var(--surface) var(--mix-edge));
    --focus: var(--tenant-d);
  }
}
:root[data-tenant][data-theme="dark"] {
  --brand: var(--tenant-d);
  --brand-mark: var(--tenant-mark, var(--tenant-d));
  --brand-tint: color-mix(in oklab, var(--tenant-d), var(--surface) var(--mix-tint));
  --brand-edge: color-mix(in oklab, var(--tenant-d), var(--surface) var(--mix-edge));
  --focus: var(--tenant-d);
}


/* ── typo.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   honeepot · typo.css · die Skala
   ───────────────────────────────────────────────────────────────────────
   SCHRIFT   Archivo (Omnibus-Type, SIL OFL 1.1)
             Zwei Achsen in einer Datei: wght 100–900, wdth 62–125.

   WARUM     · Die Gewichte 600 / 650 / 700 / 750 / 800 / 850 / 900 aus
               dem bestehenden Rhythmus sind stufenlos vorhanden — eine
               Variable Font ist Pflicht, keine sieben Schnitte.
             · Die Breitenachse ist der Grund, weshalb Archivo hier
               gewinnt: deutsche Wörter sind rund 30 % länger als
               englische. Statt umzubrechen oder zu kürzen fährt das
               Wort auf wdth 88 — sichtbar dieselbe Schrift, 8 % kürzer.
               Keine andere frei lizenzierbare Familie mit SF-Charakter
               bietet das.
             · Grotesk, neutral, hohe x-Höhe: dieselbe Tonlage wie
               -apple-system, aber auf jedem Gerät identisch.
             · Latin + Latin-Extended: DE (ä ö ü ß), ES (ñ á é í ó ú ¿ ¡),
               EN vollständig.

   OFFEN     Devanagari deckt Archivo NICHT ab. Für Indien tritt
             Noto Sans Devanagari daneben — gleiche Klasse, gleiche
             Quelle, per unicode-range zugeschaltet (unten, auskommentiert).
             Bitte vor dem Rollout in Indien einschalten.

   EINBINDUNG  Seit 07.09.2026 liefern WIR die Schrift aus. Es ist
               nichts mehr in den <head> zu setzen und keine fremde
               Herkunft in der CSP zu erlauben -- die @font-face-Regeln
               unten stehen in diesem Stylesheet, das ohnehin geladen
               wird. Dateien und Begruendung: design/fonts/readme.md.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ ARCHIVO, AUS EIGENER HAND ═══════════════════════════════════════════
   Vorher stand hier ein `@import` auf fonts.googleapis.com. Drei Gruende
   dagegen, der erste ist der schwerste:

   1. JEDER Besucher meldete sich bei Google an -- IP, User-Agent und
      Referrer gingen an einen Dritten, bevor die Seite stand, ohne
      Einwilligung. Das LG Muenchen hat dafuer am 20.01.2022 (3 O 17493/20)
      Schadenersatz zugesprochen. Unsere Flaechen tragen Kontaktformular
      und Chat; „keine unnoetigen Dritten" und „Schrift beim Dritten" geht
      nicht zusammen.
   2. Zwei zusaetzliche Verbindungen mit eigenem DNS und TLS -- und der
      `@import` stand IM CSS, wurde also erst entdeckt, nachdem der
      Browser dieses Stylesheet geladen hatte.
   3. Fremde Verfuegbarkeit fuer 67 KB.

   Es sind VARIABLE Fonts: eine Datei traegt alle Gewichte 100..900.
   Unsere Skala (400 550 650 750 850 900) braucht also keine sechs
   Dateien. Die `unicode-range` sind die von Google -- damit laedt ein
   deutscher Besucher nur `latin` (34,9 KB) und `latin-ext` erst, wenn
   ein Zeichen daraus wirklich vorkommt.

   `font-display: swap` bleibt: lieber sofort in der Ersatzschrift lesen
   als 200 ms auf leere Flaechen sehen.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Familien */
  --ff: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-dev: "Noto Sans Devanagari", var(--ff);
  --ff-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;

  /* Breitenachse · der Umgang mit langen Wörtern */
  --wd: 100;        /* Vorgabe */
  --wd-tight: 88;   /* enge Spalten, lange Komposita */
  --wd-wide: 108;   /* Eyebrow, gesperrte Versalien */

  /* Gewichte · aus der bestehenden Oberfläche gemessen */
  --w-body: 400;    /* Fließtext. Siehe readme: die Oberfläche fuhr 600 —
                       auf 17 px und über acht Stunden ist 400 ruhiger.
                       Eine Zeile hier ändert es systemweit zurück. */
  --w-med: 550;
  --w-semi: 650;
  --w-bold: 750;
  --w-heavy: 850;   /* Überschriften */
  --w-black: 900;   /* Display */

  /* Größen */
  --fs-xs: 12.5px;  /* Eyebrow · gemessen */
  --fs-sm: 14px;
  --fs-lg: 18px;
  /* --fs kommt aus der Dichtestufe: 17 px (C2B) / 14 px (B2B) */

  /* Zeilen */
  --lh-1: 1;        /* Überschrift · gemessen: die Überschrift ist ein Block */
  --lh-2: 1.12;
  --lh-3: 1.25;
  /* --lh kommt aus der Dichtestufe: 1,55 (C2B) / 1,45 (B2B) */

  /* Laufweiten */
  --ls-display: -.034em;
  --ls-h1: -.024em;
  --ls-h2: -.02em;
  --ls-h3: -.014em;
  --ls-body: 0;
  --ls-label: .04em;
  --ls-eyebrow: .16em;   /* gemessen */

  /* Die Stufen · font-Kurzform, Laufweite separat (die Kurzform kennt sie nicht) */
  --t-display: var(--w-black) clamp(34px, 6vw, 56px)/.95 var(--ff);
  --t-h1:      var(--w-heavy) clamp(26px, 3.4vw, 38px)/var(--lh-1) var(--ff);
  --t-h2:      var(--w-heavy) clamp(21px, 2.4vw, 27px)/var(--lh-2) var(--ff);
  --t-h3:      var(--w-bold) clamp(18px, 1.6vw, 20px)/var(--lh-3) var(--ff);
  --t-body-lg: var(--w-body) var(--fs-lg)/var(--lh) var(--ff);
  --t-small:   var(--w-body) var(--fs-sm)/var(--lh-3) var(--ff);
  --t-label:   var(--w-bold) var(--fs-sm)/var(--lh-3) var(--ff);
  --t-eyebrow: var(--w-heavy) var(--fs-xs)/var(--lh-3) var(--ff);
  --t-num-lg:  var(--w-heavy) clamp(24px, 2.6vw, 32px)/var(--lh-2) var(--ff);
  /* --t-body und --t-num stehen NICHT hier, sondern in tokens.css
     Schicht 3 (Dichte). Grund: eine font-Kurzform loest ihre var() auf
     dem Element auf, das sie deklariert. Auf :root gesetzt waere der
     C2B-Grad eingebacken, und data-density auf einem Teilbaum wuerde
     die Maesse aendern, aber nicht die Schrift. */
}

/* ── Die drei Merkmale, als Klassen ───────────────────────────────────
   1 Sehr fett, sehr eng.  2 Das Eyebrow als Taktgeber.
   3 Genau ein Wort im Akzent — dafür .hp-akzent, und nur einmal je Satz. */

.hp-eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-variation-settings: "wdth" var(--wd-wide);
  text-transform: uppercase;
  /* Schrift, keine Flaeche: --action-ink haelt 5,77 auf Creme,
     das Gold der Flaeche nur 1,90 (04.09.2026). */
  color: var(--action-ink);
  margin: 0 0 var(--s-3);   /* 12 px unter dem Eyebrow · gemessen */
}
.hp-display { font: var(--t-display); letter-spacing: var(--ls-display); color: var(--ink); margin: 0; text-wrap: balance; }
.hp-h1 { font: var(--t-h1); letter-spacing: var(--ls-h1); color: var(--ink); margin: 0; text-wrap: balance; }
.hp-h2 { font: var(--t-h2); letter-spacing: var(--ls-h2); color: var(--ink); margin: 0; text-wrap: balance; }
.hp-h3 { font: var(--t-h3); letter-spacing: var(--ls-h3); color: var(--ink); margin: 0; }
.hp-body { font: var(--t-body); color: var(--ink-soft); margin: 0; max-width: var(--measure); text-wrap: pretty; }
.hp-small { font: var(--t-small); color: var(--ink-muted); margin: 0; }
.hp-label { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); }
.hp-akzent { color: var(--action-ink); font-weight: inherit; }
.hp-num { font: var(--t-num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.hp-num-lg { font: var(--t-num-lg); letter-spacing: var(--ls-h2); font-variant-numeric: tabular-nums lining-nums; }
.hp-mono { font-family: var(--ff-mono); font-size: var(--fs-sm); }

/* Lange Komposita: enger fahren statt umbrechen. */
.hp-tight { font-variation-settings: "wdth" var(--wd-tight); }
/* Devanagari-Läufe */
[lang="hi"], .hp-dev { font-family: var(--ff-dev); }


/* ── bausteine.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   honeepot · bausteine.css · die Bibliothek
   ───────────────────────────────────────────────────────────────────────
   REGEL   Kein Literal. Jede Farbe, jeder Abstand, jede Größe, jeder
           Radius und jeder Schatten kommt aus tokens.css. Strukturzahlen
           (flex, Spaltenzahl, Anteile) sind keine Werte in diesem Sinn.
   PRÄFIX  hp- · das System läuft als Widget auf fremden Websites, in
           deren CSS wir nichts kaputt machen dürfen.
   ZUSTÄNDE  Ruhe · :hover · :focus-visible · :active · [disabled]
             · [data-state="loading"] · [data-state="error"]
   LANGE WÖRTER  Bedienelemente haben min-height, nie height: ein
           umbrechendes deutsches Label lässt den Knopf wachsen statt
           überzulaufen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Grundgerüst ────────────────────────────────────────────────────── */
.hp {
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body);
  font-variation-settings: "wdth" var(--wd);
  -webkit-text-size-adjust: 100%;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp a { color: var(--action-ink); text-decoration-thickness: var(--bw-1); text-underline-offset: var(--bw-2); }
.hp a:hover,
.hp a.is-hover { color: color-mix(in oklab, var(--action-ink), var(--ink) var(--mix-hov)); }
.hp ::selection { background: var(--brand-tint); }
.hp ::placeholder { color: var(--ink-muted); opacity: 1; }

/* Ein Fokusring, überall derselbe, überall sichtbar. */
.hp :focus-visible,
.hp .is-focus {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-off);
  border-radius: var(--r-1);
}

/* ── Raum ───────────────────────────────────────────────────────────── */
.hp-stack { display: flex; flex-direction: column; gap: var(--stack); }
.hp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ctl-gap); }
.hp-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s-4); }
.hp-sec { display: flex; flex-direction: column; gap: var(--sec); }

/* ── Der Punkt · das verbindende Motiv ──────────────────────────────── */
.hp-punkt {
  display: inline-block; flex: none;
  width: var(--dot-2); height: var(--dot-2);
  border-radius: var(--r-pill);
  background: var(--brand-mark);
  vertical-align: baseline;
}
.hp-punkt--sm { width: var(--dot-1); height: var(--dot-1); }
.hp-punkt--lg { width: var(--dot-3); height: var(--dot-3); }
.hp-punkt--voice { background: var(--voice-mark); }
.hp-punkt--action { background: var(--action); }
.hp-punkt--good { background: var(--good); }
.hp-punkt--warn { background: var(--warn); }
.hp-punkt--crit { background: var(--crit); }
/* als Aufzählungsmarke */
.hp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.hp-list li { display: grid; grid-template-columns: var(--dot-2) 1fr; gap: var(--ctl-gap); align-items: baseline; color: var(--ink-soft); }
.hp-list li::before {
  content: ""; width: var(--dot-1); height: var(--dot-1); margin-top: calc(var(--dot-1) / 2);
  border-radius: var(--r-pill); background: var(--brand-mark); justify-self: center;
}
/* als Trennzeichen in Wortmarken und Zeilen */
.hp-trenn { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-muted); }
.hp-trenn::before { content: ""; width: var(--dot-1); height: var(--dot-1); border-radius: var(--r-pill); background: currentColor; }
/* als Ladeanzeige */
.hp-punkte { display: inline-flex; gap: var(--s-1); align-items: center; }
.hp-punkte i { width: var(--dot-1); height: var(--dot-1); border-radius: var(--r-pill); background: var(--voice-mark); animation: hp-puls var(--spin) var(--ease-in-out) infinite; }
.hp-punkte i:nth-child(2) { animation-delay: calc(var(--spin) / 6); }
.hp-punkte i:nth-child(3) { animation-delay: calc(var(--spin) / 3); }
@keyframes hp-puls { 0%, 100% { opacity: var(--op-off); transform: none; } 50% { opacity: 1; transform: translateY(calc(-1 * var(--lift) * 2)); } }

/* ── Knopf ──────────────────────────────────────────────────────────── */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ctl-gap);
  min-height: var(--ctl-h); padding: var(--s-1) var(--ctl-px);
  border: var(--bw-2) solid transparent; border-radius: var(--r-ctl);
  font: var(--w-bold) var(--fs)/var(--lh-3) var(--ff);
  letter-spacing: var(--ls-body);
  text-align: center; text-decoration: none; white-space: normal; text-wrap: balance;
  cursor: pointer; position: relative;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.hp-btn--sm { min-height: var(--ctl-h-sm); padding-inline: var(--s-3); font-size: var(--fs-sm); }
.hp-btn--lg { min-height: var(--ctl-h-lg); padding-inline: var(--s-6); font-size: var(--fs-lg); }
.hp-btn--breit { width: 100%; }

/* Haupt */
.hp-btn--haupt { background: var(--action); color: var(--on-action); box-shadow: var(--e1); }
.hp-btn--haupt:hover,
.hp-btn--haupt.is-hover { background: color-mix(in oklab, var(--action), var(--ink) var(--mix-hov)); box-shadow: var(--e2); transform: translateY(calc(-1 * var(--lift))); }
.hp-btn--haupt:active,
.hp-btn--haupt.is-active { background: color-mix(in oklab, var(--action), var(--ink) var(--mix-act)); box-shadow: none; transform: none; }
/* Neben */
.hp-btn--neben { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.hp-btn--neben:hover,
.hp-btn--neben.is-hover { background: var(--brand-tint); transform: translateY(calc(-1 * var(--lift))); }
.hp-btn--neben:active,
.hp-btn--neben.is-active { background: var(--brand-tint); border-color: color-mix(in oklab, var(--brand), var(--ink) var(--mix-act)); transform: none; }
/* Ein Knopf ist KEIN Textlink (04.09.2026, honeepot).
   `.hp a { color: var(--action-ink) }` weiter oben hat Spezifitaet 0,1,1 und schlaegt damit
   `.hp-btn--haupt` (0,1,0). Jeder Knopf, der als <a> gebaut ist -- und das sind die
   meisten, denn sie fuehren irgendwohin -- bekam so die Aktionsfarbe als SCHRIFT und
   stand Gold auf Gold: GEMESSEN Kontrast 1,0, buchstaeblich unsichtbar. Ein <button>
   mit denselben Klassen war korrekt. Derselbe Baustein, zwei Ergebnisse, je nach Tag.
   Diese drei Zeilen geben dem Bauteil seine Farbe zurueck. */
.hp a.hp-btn--haupt, .hp-hdr a.hp-btn--haupt { color: var(--on-action); }
.hp a.hp-btn--neben, .hp a.hp-btn--still { color: var(--brand); }
.hp a.hp-btn--krit { color: var(--on-state); }

/* Still */
.hp-btn--still { background: transparent; color: var(--brand); }
.hp-btn--still:hover,
.hp-btn--still.is-hover { background: var(--brand-tint); }
.hp-btn--still:active,
.hp-btn--still.is-active { background: var(--brand-tint); color: color-mix(in oklab, var(--brand), var(--ink) var(--mix-act)); }
/* Kritisch */
.hp-btn--krit { background: var(--crit); color: var(--on-state); box-shadow: var(--e1); }
.hp-btn--krit:hover,
.hp-btn--krit.is-hover { background: color-mix(in oklab, var(--crit), var(--ink) var(--mix-hov)); box-shadow: var(--e2); }

/* Deaktiviert · WCAG nimmt deaktivierte Elemente aus, wir zielen dennoch auf 3,0 */
.hp-btn[disabled], .hp-btn[aria-disabled="true"] {
  background: var(--bg-2); color: var(--ink-off); border-color: var(--line);
  box-shadow: none; transform: none; cursor: not-allowed;
}
/* Lädt */
.hp-btn[data-state="loading"] { pointer-events: none; color: transparent; }
.hp-btn[data-state="loading"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: var(--icon); height: var(--icon); border-radius: var(--r-pill);
  border: var(--bw-2) solid currentColor; border-top-color: transparent;
  color: var(--on-action); animation: hp-dreh var(--spin) linear infinite;
}
.hp-btn--neben[data-state="loading"]::after, .hp-btn--still[data-state="loading"]::after { color: var(--brand); }
@keyframes hp-dreh { to { transform: rotate(1turn); } }

/* ── Eingabefeld · Auswahlfeld ──────────────────────────────────────── */
.hp-field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.hp-field > label { font: var(--t-label); letter-spacing: var(--ls-label); color: var(--ink); }
.hp-field > label .hp-pflicht { color: var(--crit); }
.hp-input, .hp-select, .hp-area {
  width: 100%; min-height: var(--ctl-h);
  padding: var(--ctl-py) var(--ctl-px);
  background: var(--surface); color: var(--ink);
  border: var(--bw-1) solid var(--line-ctl); border-radius: var(--r-ctl);
  font: var(--t-body); font-family: var(--ff);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hp-area { min-height: calc(var(--ctl-h) * 2.5); resize: vertical; }
.hp-input:hover, .hp-select:hover, .hp-area:hover,
.hp-input.is-hover, .hp-select.is-hover, .hp-area.is-hover { border-color: var(--ink-muted); }
.hp-input:focus-visible, .hp-select:focus-visible, .hp-area:focus-visible,
.hp-input.is-focus, .hp-select.is-focus, .hp-area.is-focus { border-color: var(--focus); border-radius: var(--r-ctl); }
.hp-select {
  appearance: none; padding-right: calc(var(--ctl-px) * 2 + var(--icon-sm)); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: var(--dot-1) var(--dot-1), var(--dot-1) var(--dot-1);
  background-position: right var(--ctl-px) center, calc(100% - var(--ctl-px) - var(--dot-1)) center;
  background-repeat: no-repeat;
}
.hp-input[disabled], .hp-select[disabled], .hp-area[disabled] { background: var(--bg-2); color: var(--ink-off); border-color: var(--line); cursor: not-allowed; }
.hp-input[readonly] { background: var(--bg-2); }
.hp-field[data-state="error"] .hp-input,
.hp-field[data-state="error"] .hp-select,
.hp-field[data-state="error"] .hp-area { border-color: var(--crit); border-width: var(--bw-2); background: var(--crit-tint); }
.hp-field[data-state="loading"] .hp-input { background-image: linear-gradient(90deg, transparent, var(--bg-2), transparent); background-size: 200% 100%; animation: hp-schieb calc(var(--spin) * 1.6) linear infinite; }
@keyframes hp-schieb { to { background-position: -200% 0; } }
.hp-hint { font: var(--t-small); color: var(--ink-muted); }
.hp-err { font: var(--t-small); font-weight: var(--w-semi); color: var(--crit); display: flex; align-items: center; gap: var(--s-2); }
.hp-err::before { content: ""; width: var(--dot-1); height: var(--dot-1); border-radius: var(--r-pill); background: currentColor; flex: none; }

/* ── Kontrollkästchen ───────────────────────────────────────────────── */
.hp-check { display: grid; grid-template-columns: var(--box) 1fr; gap: var(--ctl-gap); align-items: start; cursor: pointer; min-height: var(--ctl-h-sm); align-content: center; }
.hp-check > input {
  appearance: none; margin: 0; flex: none;
  width: var(--box); height: var(--box);
  border: var(--bw-2) solid var(--line-ctl); border-radius: var(--r-1);
  background: var(--surface); cursor: pointer; position: relative;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.hp-check > input:hover,
.hp-check > input.is-hover { border-color: var(--brand); }
.hp-check > input:checked, .hp-check > input:indeterminate { background: var(--brand); border-color: var(--brand); }
.hp-check > input:checked::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: calc(var(--box) / 4); height: calc(var(--box) / 2.2);
  border: solid var(--on-brand); border-width: 0 var(--bw-2) var(--bw-2) 0;
  transform: translateY(calc(-1 * var(--bw-1))) rotate(45deg);
}
.hp-check > input:indeterminate::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: calc(var(--box) / 2); height: var(--bw-2); background: var(--on-brand);
}
.hp-check > input[disabled] { background: var(--bg-2); border-color: var(--line); cursor: not-allowed; }
.hp-check > input[disabled] ~ span { color: var(--ink-off); }
.hp-check > span { color: var(--ink); font: var(--t-body); }

/* ── Schalter ───────────────────────────────────────────────────────── */
.hp-switch { display: inline-grid; grid-template-columns: var(--sw-w) 1fr; gap: var(--ctl-gap); align-items: center; cursor: pointer; min-height: var(--ctl-h-sm); }
.hp-switch > input {
  appearance: none; margin: 0; position: relative; cursor: pointer;
  width: var(--sw-w); height: var(--sw-h); border-radius: var(--r-pill);
  background: var(--line-ctl); border: none;
  transition: background var(--dur-2) var(--ease);
}
.hp-switch > input::after {
  content: ""; position: absolute; top: 50%; left: calc((var(--sw-h) - var(--knob)) / 2);
  width: var(--knob); height: var(--knob); border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--e-1);
  transform: translateY(-50%); transition: transform var(--dur-2) var(--ease);
}
.hp-switch > input:checked { background: var(--brand); }
.hp-switch > input:checked::after { transform: translate(calc(var(--sw-w) - var(--knob) - (var(--sw-h) - var(--knob))), -50%); }
.hp-switch > input[disabled] { background: var(--line); cursor: not-allowed; }
.hp-switch > input[disabled]::after { background: var(--bg-2); }
.hp-switch > input[disabled] ~ span { color: var(--ink-off); }

/* ── Karte ──────────────────────────────────────────────────────────── */
.hp-card {
  background: var(--surface); color: var(--ink);
  border: var(--bw-1) solid var(--line); border-radius: var(--r-3);
  padding: var(--card-p); box-shadow: var(--e1);
  display: flex; flex-direction: column; gap: var(--stack); min-width: 0;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.hp-card--klick { cursor: pointer; }
.hp-card--klick:hover,
.hp-card--klick.is-hover { box-shadow: var(--e2); transform: translateY(calc(-1 * var(--lift) * 2)); border-color: var(--line-strong); }
.hp-card--hebe { border-color: var(--brand); border-width: var(--bw-2); box-shadow: var(--e2); }
.hp-card--hebe > .hp-eyebrow { color: var(--brand); }
.hp-card--still { background: var(--bg-2); box-shadow: none; }
.hp-card__fuss { border-top: var(--bw-1) solid var(--line); padding-top: var(--stack); margin-top: auto; }

/* ── Gleiche Hoehen ueber eine Kartenreihe (08.09.2026) ─────────────────
   Torsten: „alle erklaerenden Texte in den Kacheln horizontal auf einer Hoehe."
   Die Titel sind unterschiedlich lang (eine bis drei Zeilen), damit rutschte der
   Text darunter -- in einer Reihe von vier Karten viermal anders.

   Subgrid statt fester Hoehen: die Karte uebernimmt die Zeilen ihres Rasters,
   also liegen Piktogramm, Titel und Text je auf einer Linie -- egal wie lang
   der laengste Titel ist. Keine Zahl, die jemand nachpflegen muesste.
   `--karten-zeilen` sagt, wie viele Zeilen eine Karte hat (Pikto/Titel/Text = 3).
   Wo Subgrid fehlt, bleibt es beim bisherigen Verhalten -- nichts bricht. */
/* Der Standardwert steht HIER, nicht nur als Fallback in `var(…, 3)`: ein Name, den
   niemand setzt, ist in CSS kein Fehler -- die Eigenschaft wird still ungueltig. Genau
   das meldet tests/design/test_jede_farbe_ist_definiert.py, und zu Recht: der Fallback
   ist eine Notbremse, keine Definition. Wer eine andere Kartenform baut, ueberschreibt
   `--karten-zeilen` an seinem Raster. */
.hp-grid--gleich { align-items: stretch; --karten-zeilen: 3; }
@supports (grid-template-rows: subgrid) {
  .hp-grid--gleich { grid-template-rows: repeat(var(--karten-zeilen, 3), auto); }
  .hp-grid--gleich > .hp-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--karten-zeilen, 3);
    align-content: start;
  }
  /* Der Text sitzt in der letzten Zeile und faengt oben an -- sonst zoege ihn
     `stretch` auseinander. */
  .hp-grid--gleich > .hp-card > :last-child { align-self: start; }
}

/* ── Tabelle ────────────────────────────────────────────────────────── */
.hp-tbl-huelle { overflow: auto; border: var(--bw-1) solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.hp-tbl { width: 100%; border-collapse: collapse; font: var(--t-body); }
.hp-tbl caption { text-align: left; padding: var(--tbl-px) var(--tbl-px) 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); }
.hp-tbl th, .hp-tbl td { height: var(--row-h); padding: 0 var(--tbl-px); vertical-align: middle; text-align: left; border-bottom: var(--bw-1) solid var(--line); }
.hp-tbl thead th {
  position: sticky; top: 0; z-index: var(--z-1);
  background: var(--surface); color: var(--ink-muted);
  font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  border-bottom: var(--bw-2) solid var(--line-strong); white-space: nowrap;
}
.hp-tbl tbody tr { transition: background var(--dur-1) var(--ease); }
.hp-tbl tbody tr:nth-child(even) { background: var(--bg-2); }
.hp-tbl tbody tr:hover,
.hp-tbl tbody tr.is-hover { background: var(--brand-tint); }
.hp-tbl tbody tr[aria-selected="true"] { background: var(--brand-tint); box-shadow: inset var(--bw-3) 0 0 var(--brand); }
.hp-tbl .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; font-weight: var(--w-semi); white-space: nowrap; }
.hp-tbl tfoot td { font-weight: var(--w-bold); border-top: var(--bw-2) solid var(--line-strong); border-bottom: none; background: var(--surface); }

/* ── Chip · Pille ───────────────────────────────────────────────────── */
.hp-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--ctl-h-sm); padding: 0 var(--s-3);
  background: var(--bg-2); color: var(--ink);
  border: var(--bw-1) solid var(--line); border-radius: var(--r-pill);
  font: var(--t-small); font-weight: var(--w-semi); white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
button.hp-chip, a.hp-chip { cursor: pointer; }
button.hp-chip:hover, a.hp-chip:hover,
button.hp-chip.is-hover, a.hp-chip.is-hover { border-color: var(--line-ctl); background: var(--surface-2); }
.hp-chip[aria-pressed="true"], .hp-chip--aktiv { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.hp-chip--marke { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--brand); }
.hp-chip--stimme { background: var(--voice-tint); border-color: var(--voice-edge); color: var(--voice); }
.hp-chip--gut { background: var(--good-tint); border-color: var(--good-edge); color: var(--good); }
.hp-chip--warn { background: var(--warn-tint); border-color: var(--warn-edge); color: var(--warn); }
.hp-chip--krit { background: var(--crit-tint); border-color: var(--crit-edge); color: var(--crit); }
.hp-chip[disabled] { background: var(--bg-2); color: var(--ink-off); border-color: var(--line); cursor: not-allowed; }
.hp-chip__weg { appearance: none; border: none; background: none; color: inherit; cursor: pointer; padding: 0; width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--r-pill); display: grid; place-items: center; opacity: var(--op-soft); }
.hp-chip__weg:hover,
.hp-chip__weg.is-hover { opacity: 1; background: var(--surface); }

/* ── Hinweisstreifen ────────────────────────────────────────────────── */
.hp-note {
  display: grid; grid-template-columns: var(--dot-3) 1fr; gap: var(--ctl-gap);
  padding: var(--s-4) var(--s-4);
  border: var(--bw-1) solid var(--brand-edge); border-left-width: var(--bw-3);
  border-radius: var(--r-2); background: var(--brand-tint); color: var(--ink);
  font: var(--t-body);
}
.hp-note::before { content: ""; width: var(--dot-2); height: var(--dot-2); border-radius: var(--r-pill); background: var(--brand); margin-top: calc(var(--dot-1) / 2); justify-self: center; }
.hp-note strong { display: block; font-weight: var(--w-bold); color: var(--ink); }
.hp-note--gut { background: var(--good-tint); border-color: var(--good-edge); }
.hp-note--gut::before { background: var(--good); }
.hp-note--warn { background: var(--warn-tint); border-color: var(--warn-edge); }
.hp-note--warn::before { background: var(--warn); }
.hp-note--krit { background: var(--crit-tint); border-color: var(--crit-edge); }
.hp-note--krit::before { background: var(--crit); }
.hp-note--stimme { background: var(--voice-tint); border-color: var(--voice-edge); }
.hp-note--stimme::before { background: var(--voice-mark); }

/* ── Fortschrittsanzeige ────────────────────────────────────────────── */
.hp-bar { height: var(--track); border-radius: var(--r-pill); background: var(--bg-2); overflow: hidden; border: var(--bw-1) solid var(--line); }
.hp-bar__fill { height: 100%; border-radius: var(--r-pill); background: var(--brand); transition: width var(--dur-3) var(--ease); }
.hp-bar--gut .hp-bar__fill { background: var(--good); }
.hp-bar--krit .hp-bar__fill { background: var(--crit); }
.hp-bar[data-state="loading"] .hp-bar__fill { width: 40%; animation: hp-wander calc(var(--spin) * 1.8) var(--ease-in-out) infinite; }
@keyframes hp-wander { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.hp-bar-zeile { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); align-items: center; }
.hp-bar-zeile > .hp-bar { grid-column: 1 / -1; }

/* ── Chat-Blase ─────────────────────────────────────────────────────── */
.hp-chat { display: flex; flex-direction: column; gap: var(--stack); }
.hp-bubble {
  max-width: var(--bubble); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3); font: var(--t-body); color: var(--ink);
  border: var(--bw-1) solid transparent;
}
.hp-bubble--nutzer { align-self: flex-end; background: var(--brand-tint); border-color: var(--brand-edge); border-bottom-right-radius: var(--r-1); }
.hp-bubble--bot { align-self: flex-start; background: var(--surface); border-color: var(--line); box-shadow: var(--e1); border-bottom-left-radius: var(--r-1); }
.hp-bubble--stimme { background: var(--voice-tint); border-color: var(--voice-edge); }
.hp-bubble__kopf { display: flex; align-items: center; gap: var(--s-2); font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-2); }
.hp-bubble--stimme .hp-bubble__kopf { color: var(--voice); }
.hp-bubble__quelle { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--bw-1) solid var(--line); }

/* ── Kopfzeile ──────────────────────────────────────────────────────── */
.hp-hdr {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--ctl-h-lg); padding: var(--s-2) var(--s-5);
  background: var(--band); color: var(--on-band);
  border-bottom: var(--bw-1) solid var(--line);
}
.hp-hdr a, .hp-hdr .hp-btn--still { color: var(--on-band); }
.hp-hdr__marke { display: flex; align-items: center; gap: var(--s-3); font-weight: var(--w-heavy); letter-spacing: var(--ls-h3); text-decoration: none; }
.hp-hdr__nav { display: flex; gap: var(--s-1); margin-left: auto; align-items: center; flex-wrap: wrap; }
.hp-hdr__nav a { padding: var(--s-2) var(--s-3); border-radius: var(--r-2); text-decoration: none; font-weight: var(--w-semi); font-size: var(--fs-sm); }
.hp-hdr__nav a:hover,
.hp-hdr__nav a.is-hover { background: var(--band-2); }
.hp-hdr__nav a[aria-current="page"] { box-shadow: inset 0 calc(-1 * var(--bw-2)) 0 var(--brand); }

/* ── Fußzeile ───────────────────────────────────────────────────────── */
.hp-ftr {
  background: var(--band); color: var(--on-band-soft);
  padding: var(--s-6) var(--s-5); font: var(--t-small);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-1), 1fr)); gap: var(--s-5);
}
.hp-ftr h4 { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-band); margin: 0 0 var(--s-3); }
.hp-ftr a { color: var(--on-band-soft); display: block; padding: var(--s-1) 0; }
.hp-ftr a:hover,
.hp-ftr a.is-hover { color: var(--on-band); }

/* ── Preistafel ─────────────────────────────────────────────────────── */
.hp-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--w-1) / 2), 1fr)); gap: var(--s-4); align-items: stretch; }
.hp-price__preis { display: flex; align-items: baseline; gap: var(--s-2); }
.hp-price__zahl { font: var(--t-num-lg); letter-spacing: var(--ls-h2); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.hp-price__takt { font: var(--t-small); color: var(--ink-muted); }
.hp-price__band { align-self: flex-start; }

/* ── Registerkarten ─────────────────────────────────────────────────── */
.hp-tabs { display: flex; gap: var(--s-1); border-bottom: var(--bw-2) solid var(--line); overflow-x: auto; }
.hp-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: var(--s-3) var(--ctl-px); min-height: var(--ctl-h);
  font: var(--w-bold) var(--fs)/var(--lh-3) var(--ff); color: var(--ink-muted);
  border-bottom: var(--bw-3) solid transparent; margin-bottom: calc(-1 * var(--bw-2));
  white-space: nowrap; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hp-tab:hover,
.hp-tab.is-hover { color: var(--ink); background: var(--bg-2); }
.hp-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.hp-tab[disabled] { color: var(--ink-off); cursor: not-allowed; }

/* ── Seitennavigation ───────────────────────────────────────────────── */
.hp-pager { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.hp-pager__seite {
  appearance: none; cursor: pointer;
  min-width: var(--ctl-h); min-height: var(--ctl-h); padding: 0 var(--s-2);
  background: var(--surface); color: var(--ink);
  border: var(--bw-1) solid var(--line); border-radius: var(--r-ctl);
  font: var(--t-num); font-variant-numeric: tabular-nums;
  display: inline-grid; place-items: center;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.hp-pager__seite:hover,
.hp-pager__seite.is-hover { background: var(--brand-tint); border-color: var(--brand-edge); }
.hp-pager__seite[aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.hp-pager__seite[disabled] { color: var(--ink-off); background: var(--bg-2); cursor: not-allowed; }
.hp-pager__luecke { color: var(--ink-muted); padding: 0 var(--s-2); }

/* ── Nur für Screenreader ───────────────────────────────────────────── */
.hp-nur-sr { position: absolute; width: var(--bw-1); height: var(--bw-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Der geteilte Schriftzug als lebender Text ───────────────────────
   Zwei Kopien desselben Wortes, waagerecht beschnitten: die obere aus
   honeebot, die untere aus honeepot. Deckungsgleich, weil derselbe
   Text im selben Kasten steht. Der Schnitt sitzt auf der Mitte der
   x-Hoehe — dort sind b und p identisch, also traegt oben die
   Oberlaenge und unten die Unterlaenge. Vorteil gegenueber dem SVG:
   skaliert mit der Schrift, braucht keine Konturen, funktioniert in
   jeder Sprache. */
.hp-wortmarke {
  /* Gemessen an Archivo 850: Oberkante 0,90em, Unterlaenge 0,25em,
     x-Hoehe 0,460em, Oberlaenge b 0,676em, Unterlaenge p 0,206em.
     Bei line-height 1,2 liegt die Grundlinie 0,925em unter der Oberkante,
     die Mitte der x-Hoehe also 0,695em darunter. Genau dort schneiden wir. */
  --wm-cut: .695em;   /* Schnitthoehe von oben · Mitte der x-Hoehe */
  --wm-gap: 0px;      /* sichtbarer Schnitt, wenn gewuenscht */
  position: relative; display: inline-block; isolation: isolate;
  font-family: var(--ff); font-weight: var(--w-heavy);
  font-size: var(--t-wm-size, var(--fs-lg)); line-height: 1.2;
  letter-spacing: var(--ls-h1);
  /* 04.09.2026: hier stand `color: var(--ink)`. Auf der Kopfleiste ist
     --ink derselbe Wert wie --band (#0C2850) — die Marke war dort
     unsichtbar, Kontrast 1,00, waehrend die Links daneben mit --on-band
     auf 14,63 kamen. Geerbt statt gesetzt: hell wie dunkel richtig. */
  color: inherit;
  white-space: nowrap; user-select: none;
}
.hp-wortmarke > span { display: block; }
.hp-wortmarke > span:first-child {
  clip-path: inset(0 0 calc(100% - var(--wm-cut) + var(--wm-gap) / 2) 0);
  color: var(--wm-oben, currentColor);
}
.hp-wortmarke > span:last-child {
  position: absolute; inset: 0;
  clip-path: inset(calc(var(--wm-cut) + var(--wm-gap) / 2) 0 0 0);
  color: var(--wm-unten, currentColor);
}
.hp-wortmarke--zweifarbig { --wm-oben: var(--brand); --wm-unten: var(--ink); }
.hp-wortmarke--gross { --t-wm-size: clamp(28px, 5vw, 44px); }

/* ═══ Das Himmelsband und was daran haengt (04.09.2026) ══════════════════════════════
   Diese sechs Bauteile standen bisher nur im Widget (core/widget_css.py, hb-*). Sie sind
   das, was honee erkennbar macht — Torsten am 04.09. beim Durchsehen der Vorschauen:
   „das Dreieck vermisse ich in jeder Form; das sollten wir unbedingt drin haben."
   Uebernommen mit den GEMESSENEN Werten, nicht nachgebaut. */

/* Das Band selbst. Es schlaegt bewusst NICHT mit dem Theme um: es traegt die Marke.
   Der Saum oben ist die helle Innenlinie, die dem Band Kante gibt. */
.hp-sky {
  position: relative; flex: none;
  min-height: var(--sky-h);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bot));
  box-shadow: inset 0 var(--bw-1) 0 var(--sky-saum);
  color: var(--on-sky);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.hp-sky__name { font: var(--t-h3); color: var(--on-sky); line-height: 1; }

/* Die Wellenkante. Zwei Bahnen: die hintere gedaempft, die vordere in der Flaeche, die
   unter dem Band hervorschaut. Sie MUSS --surface sein, nicht --bg — sonst steht im
   hellen Modus ein blauer Streifen zwischen Band und Karte, eine Kante, die es nicht gibt. */
.hp-welle {
  position: absolute; bottom: calc(-1 * var(--bw-1)); left: 0;
  width: 100%; height: var(--welle-h); display: block;
}

/* Das Dreieck. Es macht die Karte zu — das Bauteil, das der Kunde am haeufigsten trifft.
   Die Aktionsfarbe haelt auf dem Band 3,64 (gemessen gegen die dunklere der beiden
   Bandfarben), die Schwelle fuer Bedienelemente ist 3,0. */
.hp-tri {
  margin-left: auto; flex: none;
  width: var(--ctl-h); height: var(--ctl-h);
  border: none; background: transparent; padding: 0; cursor: pointer;
  /* --action-ink, nicht --action: das Dreieck sitzt auf dem hellblauen Himmelsband, und
     dort haelt das Gold nur 1,70 gegen die untere Bandfarbe. Ocker kommt auf 3,54, die
     Schwelle fuer Bedienelemente ist 3,0. Gemessen am 04.09.2026. */
  color: var(--action-ink);
  display: flex; align-items: center; justify-content: center;
}
.hp-tri svg { width: var(--tri-sz); height: var(--tri-sz); display: block; }
.hp-tri[aria-expanded="false"] svg { transform: rotate(180deg); }

/* Das runde Zeichen. Flaeche und Tinte kommen aus der Stimme, nicht aus der Marke:
   es steht fuer honee, nicht fuer den Mandanten. */
.hp-zeichen {
  width: var(--zeichen-sz); height: var(--zeichen-sz);
  /* --r-pill, nicht --r-mark: letzteres ist die Squircle-Rundung fuer App-Icons
     (23,4 %). Das Zeichen ist ein KREIS. Am 04.09.2026 einmal verwechselt — im
     Bild sofort zu sehen, im Code nicht. */
  border-radius: var(--r-pill);
  flex: none; overflow: hidden;
  background: var(--surface); color: var(--on-voice-mark);
  display: flex; align-items: center; justify-content: center;
}
.hp-zeichen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-zeichen--logo img { width: 78%; height: 78%; object-fit: contain; }
.hp-zeichen__punkt {
  width: var(--dot-3); height: var(--dot-3); border-radius: var(--r-pill);
  background: var(--voice);
}
.hp-zeichen--voll { background: var(--voice); color: var(--on-voice); }
.hp-zeichen--voll .hp-zeichen__punkt { background: var(--on-voice); }

/* Die Rede: eingerueckter Text mit senkrechtem Strich links. Der Strich ist kein
   Schmuck — er sagt, dass hier jemand SPRICHT, und traegt deshalb die Stimmfarbe. */
.hp-rede {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-3); align-items: start;
  border-left: var(--bw-2) solid var(--voice);
  padding: var(--s-05) 0 var(--s-05) var(--s-3);
}
.hp-rede__l {
  display: block; font: var(--t-eyebrow); color: var(--voice);
  margin-bottom: var(--s-1);
}
.hp-rede__t { margin: 0; font: var(--t-body); color: var(--ink-soft); }
.hp-rede--schmal { grid-template-columns: 1fr; }

/* Die Tipp-Zeile: pinke Oberkante, Versalien-Label, Frage daneben.
   Bis zum 07.08.2026 stand dieselbe Bauweise DREIMAL im Widget mit denselben Werten.
   Hier steht sie einmal; `--zeile` ist die anpassende Variante mit eigenem Chevron. */
.hp-tipp {
  margin-top: var(--s-3);
  border-top: var(--bw-2) solid var(--voice);
  border-radius: var(--r-2) var(--r-2) 0 0;
  padding: var(--s-2) var(--s-05) var(--s-05);
  background: transparent;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--s-3); row-gap: var(--s-1);
}
.hp-tipp__hd {
  display: inline-flex; align-items: center; gap: var(--s-1); flex: none;
  font: var(--t-eyebrow); color: var(--voice);
}
.hp-tipp__q {
  font: var(--t-label); color: var(--ink);
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.hp-tipp__q:hover { color: var(--voice); }
.hp-tipp__ch { margin-left: auto; color: var(--ink-muted); flex: none; }
.hp-tipp--zeile { width: 100%; flex-wrap: nowrap; }