/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, stil/design.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Website-Tokens und Grundstile. Ohne enerbolt-CSS (index.css, glass.css,
   theme.css, styles/tokens.css). tokens.css importiert @design/kern.css
   (Schriften) und basis.css. *//* Designsystem der Agentur-Website und des Kundenportals – Token-Schicht --bm-*.
   Vorbild sunzinet.com, Referenzen nach red.de.
   Welle D1 (27.09.2026): Werte an die Messung angeglichen
   (docs/positionierung/design/sunzinet-designsystem.md).
   Welle Z0-A (27.09.2026): Token-Vertrag vervollständigt – alles, was das
   Erscheinungsbild prägt, steht hier.
   Welle Z0-B (27.09.2026): EINE QUELLE. Die Grundwerte (Signalfarbe, Text-,
   Flächen- und Dunkeltöne, Linien, Fehlerrot, Schriftfamilien, Gewichte,
   Grundrundungen, Grundtempo/-kurve) kommen aus /design/kern.css (--kern-*),
   die auch das Cockpit liest. Hier stehen sie nur noch als Verweis; eigene
   Werte hat diese Datei nur für Website-Eigenes (Größenleiter, Zeilenhöhen,
   Laufweiten, Raster, Kopfhöhe, Ebenen, Sonderdauern) und für Ableitungen
   (Glas, Schleier, Schatten).
   UMSTELLEN: Farben, Schriften, Grundrundungen, Grundtempo NUR in
   /design/kern.css (Zeilen mit »QUELLE«) – wirkt auf Website, Kundenportal
   und Cockpit. Anleitung: docs/design-umstellen.md und design/README.md.
   Doku: docs/positionierung/design/designsystem-neu.md
   Zuordnung alter Werte → Token: docs/positionierung/design/z0-zuordnung.md

   BREAKPOINTS (verbindlich; CSS-Variablen wirken nicht in @media, deshalb
   als feste Liste – dieselbe Liste steht in docs/design-umstellen.md):
     min-width: 640px · 768px · 1024px · 1200px · 1440px
     max-width: 639px · 767px · 1023px · 1199px · 1439px
   Nur px, keine rem/Kommawerte (47.99rem, 767.98px …). 1024 = Desktop-Kopf
   (auch site/navigation/ui/Kopf.tsx). Abweichende Bausteinumbrüche nur mit
   Kommentar „design-check: erlaubt – <Grund>“. *//* ═══════════════════════════════════════════════════════════════════════════
   kern.css – die EINE Quelle für Farben, Schriften, Grundrundungen und Tempo
   von brandmediale one. Gilt für die Agentur-Website (portal-app) und das
   Cockpit (web-app) sowie das Kundenportal (portal-app, Scope .bm-portal).
   Angelegt in Welle C1, Website und Kundenportal angeschlossen in Welle Z0-B
   (beide 27.09.2026). Die App-Schichten übersetzen nur noch:
     Cockpit:  web-app/src/index.css   (--c-*, --cg-*, --viz-* → --kern-*)
     Website:  website/src/site/design/tokens.css (--bm-* → --kern-*)
     Kundenportal: portal-app/src/portal-design/tokens.css
               (Kopie seit Welle B0; Portal-Brücke portal.css → --bm-*)

   UMSTELLEN: nur die mit »QUELLE« markierten Zeilen ändern – alles andere
   (Abstufungen, Kanalformen, Glow) rechnet sich daraus ab. Anleitung: README.md.

   Kanalformen (--kern-…-rgb) für die Tailwind-Anbindungen `rgb(var(--x) / a)`:
   per relativer Farbsyntax aus der Hex-Angabe abgeleitet, KEINE Zahlen pflegen.
   Nur so verwenden: rgb(var(--kern-…-rgb)) oder rgb(var(--kern-…-rgb) / 0.5).
   Browser: Chrome/Edge ≥ 119, Safari ≥ 18, Firefox ≥ 128 (wie die Website).
   ═══════════════════════════════════════════════════════════════════════════ *//* Gemeinsame Schriften von brandmediale one – EINE Quelle für Website (website/), Kundenportal (portal-app)
   und Cockpit (web-app). Angelegt in Welle C1 (27.09.2026) aus
   portal-app/src/site/design/schriften.css (Welle D1).

   Selbst gehostet, kein Abruf von fremden Servern (DSGVO). Die Dateien liegen
   daneben in ./schriften/ und werden per RELATIVEM Pfad eingebunden: Vite
   übernimmt sie beim Import dieser Datei in den Build der jeweiligen App
   (Cockpit: web-app/vite.config.ts erlaubt den Ordner /design über
   server.fs.allow und den Alias @design).

   Quelle: @fontsource-variable/jost 5.3.0 und @fontsource-variable/dm-sans 5.3.0
   (per npm pack entnommen). Lizenz: SIL Open Font License 1.1, Texte in
   ./schriften/Jost-OFL.txt und ./schriften/DM-Sans-OFL.txt.
   Jost = Hausschrift (freier Ersatz für Neuzeit Grotesk), DM Sans = Ziffern/
   Nummern. Beide variabel (Achse wght).

   Schrift tauschen: woff2 + Lizenztext nach ./schriften/, die Blöcke unten
   anpassen, dann in kern.css --kern-font bzw. --kern-font-ziffer umstellen. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../schriften/jost-latin.woff2') format('woff2-variations'),
       url('../schriften/jost-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: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../schriften/jost-latin-ext.woff2') format('woff2-variations'),
       url('../schriften/jost-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;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('../schriften/jost-latin-italic.woff2') format('woff2-variations'),
       url('../schriften/jost-latin-italic.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: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('../schriften/dm-sans-latin.woff2') format('woff2-variations'),
       url('../schriften/dm-sans-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: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('../schriften/dm-sans-latin-ext.woff2') format('woff2-variations'),
       url('../schriften/dm-sans-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;
}

/* Titelschrift (27.09.2026): Instrument Serif, @fontsource/instrument-serif 5.3.0
   (per npm pack entnommen), SIL Open Font License 1.1, Text in
   ./schriften/Instrument-Serif-OFL.txt. Nur Schnitt 400 (normal, kursiv). */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../schriften/instrument-serif-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: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../schriften/instrument-serif-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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('../schriften/instrument-serif-latin-italic.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;
}
/* @kern-tokens:anfang – ERZEUGT aus design/tokens/tokens.json durch design/tokens/bauen.mjs.
   Nicht hier ändern: Wert in tokens.json ändern, dann `node design/tokens/bauen.mjs`.
   »QUELLE« markiert die Grundwerte, alles andere rechnet sich daraus ab. */
:root {
  /* ── Signal ─────────────────────────────────────────────────────────────── */
  --kern-signal: #fe575a; /* QUELLE Signalfarbe Koralle (Vorgabe Alexander 27.09.2026) – HELLE Signalfarbe: Schrift darauf dunkel (--kern-zweit, 6,21:1; Weiß hätte nur 3,12:1). Als Fläche/Form auf Hell: 3,12:1 Weiß, 2,84 Grund, 3,05 Sand, 2,83 Rosé, 2,53 Kachel-Sand → Bedeutungstragendes auf Hell über -kontur */
  --kern-signal-pol: #ff7d6b; /* QUELLE zweiter Pol des Signalverlaufs: helleres Koralle (dunkle Schrift darauf 7,76:1) */
  --kern-zweit: #070b24; /* QUELLE Zweitfarbe, sehr dunkles Mitternachtsblau (Anmerkung 208f71d6: „den dunkellila Ton in einen Midnightblue-Ton drehen, fast schwarz"; davor Pflaume #250719): Sekundärknöpfe, Schrift auf Signal */
  --kern-nacht: #02030d; /* QUELLE Mitternachtsblau: Gegenpol zur Koralle, Grund der dunklen Flächen */
  --kern-signal-verlauf: linear-gradient(100deg, var(--kern-signal), var(--kern-signal-pol)); /* Verlauf Koralle → helles Koralle für Primärknöpfe, Leisten, große Flächen; Text darauf --kern-signal-text (6,21 bis 7,76:1) */
  --kern-signal-hell: color-mix(in srgb, var(--kern-signal) 84%, white); /* ≈ #fe7274 · Hover auf Signal: helle Signalfarbe, deshalb aufhellen (Schrift darauf 7,28:1) */
  --kern-signal-licht: color-mix(in srgb, var(--kern-signal) 78%, white); /* ≈ #fe7c7e · Akzenttext/Icons/Linien AUF DUNKEL (8,23:1 Nacht, 7,82 Karte dunkel, 7,77 Zweitfarbe); auf Hell nur 2,27:1 → dort nie als Text oder Bedeutungsträger */
  --kern-signal-zart: #fcf1f2; /* QUELLE ruhige Signalfläche auf Hell mit dunkler Schrift (Vorgabe Alexander 27.09.2026) */
  --kern-signal-dunkel: color-mix(in srgb, var(--kern-signal) 50%, black); /* ≈ #7f2c2d · Schrift/Icons auf Hell: 9,16:1 Weiß, 8,32 Grund, 8,94 Sand, 8,29 Rosé, 7,43 Kachel-Sand */
  --kern-signal-tief: color-mix(in srgb, var(--kern-signal) 58%, black); /* ≈ #933234 · Akzenttext/Icons auf Hell: 7,61:1 Weiß, 6,91 Grund, 7,42 Sand, 6,88 Rosé, 6,17 Kachel-Sand */
  --kern-signal-glow: color-mix(in srgb, var(--kern-signal) 40%, transparent); /* Schein unter dem Primärknopf im Hover (dekorativ) */
  --kern-signal-schleier: color-mix(in srgb, var(--kern-text-invers) 26%, transparent); /* SCHALTER Hover-Schleier ÜBER Signal/Verlauf (Pseudo-Element, Deckkraft animieren): helle Signalfarbe → aufhellen mit --kern-text-invers (Schrift auf dem aufgehellten Signal 8,12:1, auf dem aufgehellten Pol 9,80:1); satte/dunkle Signalfarbe → var(--kern-dunkel) eintragen. P1-I: vorher Gegenfarbe der Schrift, die die Koralle vergraute */
  --kern-signal-verlauf-hover: linear-gradient(var(--kern-signal-schleier), var(--kern-signal-schleier)), var(--kern-signal-verlauf); /* statischer Hover-Verlauf (zwei Ebenen) für Stellen ohne Pseudo-Element */
  --kern-signal-kontur: color-mix(in srgb, var(--kern-signal) 70%, black); /* ≈ #b23d3f · SCHALTER Signal, das auf Hell ≥ 3:1 erreicht: 5,79:1 Weiß, 5,26 Grund, 5,65 Sand, 5,24 Rosé, 4,70 Kachel-Sand. Kontur der Signal-Knöpfe, bedeutungstragende Markierungslinien auf Hell, auch als Akzenttext zulässig */
  --kern-signal-kreis: var(--kern-signal); /* SCHALTER ruhender Kreis der Kreis-Punkt-Pille auf Hell (Tinte liegt darüber): helle Signalfarbe → var(--kern-signal) (Tinte darauf 6,10:1; Kreis zum Grund 2,84:1, Schmuck – den Knopf trägt die Schrift); mittlere/dunkle → var(--kern-signal-licht) */
  --kern-signal-text: var(--kern-zweit); /* Text auf Signal und auf dem Verlauf: dunkel (Zweitfarbe, 6,21:1), weil die Signalfarbe hell ist */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --kern-text: #0f1011; /* QUELLE Tinte: Überschriften, Primärtext */
  --kern-text-leise: #6b737b; /* QUELLE Fließtext grau, kühl (Cockpit): 4,81:1 Weiß, 4,37 Grund, 4,70 Sand, 4,36 Rosé, 3,91 Kachel-Sand → Website nimmt --kern-text-warm-leise */
  --kern-text-faint: #6e767e; /* QUELLE leiser Text der alten Schicht, kühl: 4,61:1 Weiß, 4,19 Grund, 4,50 Sand, 4,17 Rosé, 3,74 Kachel-Sand → Website nimmt --kern-text-warm-leise */
  --kern-text-zart: #99a1ab; /* QUELLE nur dekorativ, kühl: 2,61:1 Weiß, 2,37 Grund, 2,55 Sand, 2,36 Rosé, 2,12 Kachel-Sand → Website nimmt --kern-text-warm-zart */
  --kern-text-tag: #585e65; /* QUELLE Chip-Text auf Kachel (Cockpit), Sekundärtext: 6,55:1 Weiß, 5,95 Grund, 6,40 Sand, 5,93 Rosé, 5,32 Kachel-Sand → Website nimmt --kern-text-warm-tag */
  --kern-text-invers: #ffffff; /* QUELLE Text auf Dunkel */
  --kern-text-invers-leise: color-mix(in srgb, var(--kern-text-invers) 64%, transparent); /* 8,29:1 Nacht, 8,16 Karte dunkel, 8,11 Zweitfarbe */
  --kern-text-invers-ruhig: #d4dde7; /* QUELLE Fließtext auf Dunkel, kühl (Cockpit): 14,98:1 Nacht, 14,23 Karte dunkel, 14,13 Zweitfarbe – Website nimmt --kern-text-invers-warm */

  /* ── Warme Töne der Website (P1-I, 27.09.2026) – alle ABGELEITET aus Tinte
        und Sand; das Cockpit liest sie im hellen Modus seit ADM-D (30.09.2026) ebenso.
        Kontraste gemessen (scripts/.p1i-kontrast.mjs, Tabelle docs/qa/p1-i.md). */
  --kern-text-warm-tag: color-mix(in srgb, var(--kern-text) 64%, var(--kern-linie-sand)); /* ≈ #59544d · Chip-/Sekundärtext: 7,49:1 Weiß, 6,80 Grund, 7,31 Sand, 6,78 Rosé, 6,08 Kachel-Sand */
  --kern-text-warm-leise: color-mix(in srgb, var(--kern-text) 56%, var(--kern-linie-sand)); /* ≈ #6a635a · Fließtext: 5,92:1 Weiß, 5,37 Grund, 5,78 Sand, 5,36 Rosé, 4,80 Kachel-Sand */
  --kern-text-warm-zart: color-mix(in srgb, var(--kern-text) 40%, var(--kern-linie-sand)); /* ≈ #8b8175 · nur dekorativ, große Schrift (≥ 24 px) und Grafik, kein Lesetext: 3,81:1 Weiß, 3,46 Grund, 3,72 Sand, 3,45 Rosé, 3,09 Kachel-Sand */
  --kern-text-invers-warm: var(--kern-bg-warm); /* #faf3ea · Fließtext auf Dunkel: 18,67:1 Nacht, 17,74 Karte dunkel, 17,62 Zweitfarbe */
  --kern-text-invers-warm-leise: color-mix(in srgb, var(--kern-bg-warm) 68%, transparent); /* leiser Text auf Dunkel: 8,54:1 Nacht, 8,36 Karte dunkel, 8,32 Zweitfarbe */
  --kern-linie-feld: var(--kern-text-warm-zart); /* Feldrand, Grenze von Bedienelementen auf Hell: 3,81:1 Weiß, 3,46 Grund, 3,72 Sand, 3,45 Rosé, 3,09 Kachel-Sand */
  --kern-linie-invers-warm: color-mix(in srgb, var(--kern-bg-warm) 18%, transparent); /* Trennlinie auf Dunkel, dekorativ: 1,53:1 Nacht, 1,60 Karte dunkel, 1,60 Zweitfarbe */
  --kern-linie-invers-stark: color-mix(in srgb, var(--kern-bg-warm) 40%, transparent); /* Grenze von Bedienelementen auf Dunkel: 3,46:1 Nacht, 3,53 Karte dunkel, 3,52 Zweitfarbe */
  /* Fokusrahmen (P3-I, 27.09.2026) – ABGELEITET, keine QUELLE. Je Fläche ein
     Wert, mindestens 3:1 zur angrenzenden Fläche (WCAG 1.4.11, 2.4.7). */
  --kern-fokus: var(--kern-text); /* Fokusrahmen auf Hell: 19,05:1 Weiß, 17,30 Grund, 18,59 Sand, 17,24 Rosé, 15,46 Kachel-Sand */
  --kern-fokus-invers: var(--kern-text-invers); /* Fokusrahmen auf Dunkel: 20,56:1 Nacht, 20,17 Dunkel, 19,54 Karte dunkel, 19,40 Zweitfarbe (Tinte hätte dort 1,02 bis 1,08:1) */
  --kern-fokus-signal: var(--kern-signal-text); /* Fokusrahmen auf Signal und Verlauf: dunkel, 6,21:1 Signal, 7,76 Pol, 7,27 Hover-Ton (Weiß hätte 2,50 bis 3,12:1) */
  --kern-schatten-tief: color-mix(in srgb, var(--kern-zweit) 60%, var(--kern-text)); /* ≈ #0a0d1c · Schattenton der Website aus Zweitfarbe und Tinte (statt des helleren Blaugrau --kern-schatten-farbe) */

  /* ── Verlauf »Farbspiel« (P2-I, 27.09.2026) – VORSCHLAG nach
        docs/plan-corporate-design.md 4.1 und 6a. Nichts davon ist eine QUELLE
        von Alexander; Pfirsich und die Stopps werden an den Bildproben
        nachgestellt. Die Tiefe ist Mitternachtsblau (--kern-zweit), NICHT
        Pflaume (Anmerkung 208f71d6). Kontraste gerechnet entlang des Verlaufs
        (201 Punkte, Mischung in sRGB wie der Browser). Die Prozentangaben
        meinen die Lage auf der Verlaufslinie. ── */
  --kern-pfirsich: #ffb27a; /* VORSCHLAG Pfirsich, heller Pol der warmen Reihe. Schrift darauf dunkel: Zweitfarbe 11,00:1, Tinte 10,79; Weiß nur 1,76 → nie helle Schrift. Als Fläche zum Grund 1,60:1, zu Rosé 1,60, zur Koralle 1,77 (Schmuck); auf Nacht 11,65:1, auf Zweitfarbe 11,00 */
  --kern-verlauf-morgen: linear-gradient(100deg, var(--kern-bg-rose) 0%, var(--kern-pfirsich) 55%, var(--kern-signal) 100%); /* VORSCHLAG hell: Rosé → Pfirsich → Koralle. Schrift DUNKEL über die ganze Länge: Zweitfarbe 17,56:1 (0 %) · 11,00 (55 %) · 6,21 (100 %, kleinster Wert); Tinte 17,24 · 10,79 · 6,10. Weiß höchstens 3,12:1 → nicht zulässig. Knöpfe darauf: nur »Dunkel« und »Weiß« (wie auf Signalflächen) */
  --kern-verlauf-morgen-text: var(--kern-zweit); /* Schrift auf dem Morgen-Verlauf: mindestens 6,21:1 */
  --kern-verlauf-abend: linear-gradient(160deg, var(--kern-pfirsich) 0%, var(--kern-signal) 38%, var(--kern-zweit) 100%); /* VORSCHLAG Pfirsich → Koralle → Mitternachtsblau als Tiefe. KEINE Schriftfarbe trägt über die ganze Länge: helle Schrift (Weiß) ≥ 4,5:1 erst ab 50,5 % (große Schrift ≥ 3:1 ab 35 %), am Ende 19,40:1; dunkle Schrift (Zweitfarbe) ≥ 4,5:1 nur bis 48,5 % (11,00 bei 0 %, 6,21 bei 38 %). Zwischen 48,5 und 50,5 % steht kein Text. Regel: Text in die Tiefe (unteres bzw. hinteres Drittel) und hell, oder in den warmen Anfang und dunkel */
  --kern-verlauf-abend-text: var(--kern-text-invers); /* Schrift in der Tiefe des Abend-Verlaufs (ab 50,5 %): 4,5 bis 19,40:1; warmes Hell (--kern-text-invers-warm) erst ab 53,5 % */
  --kern-verlauf-abend-text-warm: var(--kern-zweit); /* Schrift im warmen Anfang des Abend-Verlaufs (bis 48,5 %): 11,00 bis 4,5:1 */
  --kern-schleier-bild: linear-gradient(to top, color-mix(in srgb, var(--kern-nacht) 86%, transparent) 0%, color-mix(in srgb, var(--kern-nacht) 82%, transparent) 40%, transparent 100%); /* VORSCHLAG Schleier für HELLE Schrift über Bildern, Text in den unteren 40 %. Schlechtester Fall (weißes Bild darunter): bei 82 % Deckung Weiß 13,04:1, warmes Hell 11,84, Signal-licht 5,22; bei 86 % 14,98 · 13,61 · 6,00. Unter 78 % Deckung fällt Signal-licht unter 4,5:1 */
  --kern-schleier-bild-hell: linear-gradient(to top, color-mix(in srgb, var(--kern-bg-warm) 90%, transparent) 0%, color-mix(in srgb, var(--kern-bg-warm) 86%, transparent) 40%, transparent 100%); /* VORSCHLAG Schleier für DUNKLE Schrift über Bildern, Text in den unteren 40 %. Schlechtester Fall (schwarzes Bild darunter): bei 86 % Deckung Zweitfarbe 12,80:1, Tinte 12,57; bei 90 % 14,08 · 13,82 */

  /* ── Flächen ────────────────────────────────────────────────────────────── */
  --kern-bg: #ffffff; /* QUELLE Grund, Karten */
  --kern-bg-warm: #faf3ea; /* QUELLE Grund der hellen Seiten der Website (Anmerkung ac238f4b; davor #f5e6d6, #fcfaf6); zu Weiß 1,10:1 */
  --kern-bg-alt: #f3f7fe; /* QUELLE ruhige Fläche (Karten der Website, Cockpit-Grund) */
  --kern-bg-kuehl: #f6fafd; /* QUELLE Wechselsektionen, Formularfelder (Cockpit) */
  --kern-bg-rose: var(--kern-signal-zart); /* Wechselsektionen, Feldgrund der Website: #fcf1f2; zum Grund 1,00:1 */
  --kern-bg-sand: #fefcf8; /* Karten der Website: eine Stufe heller als der Grund (1,07:1) – an den Grund #faf3ea angepasst (P1-I) */
  --kern-kachel-sand: #f1e6d7; /* Kacheln, Chips der Website: eine Stufe dunkler als der Grund (1,12:1; zur Karte 1,20:1) – angepasst (P1-I) */
  --kern-linie-sand: #ddcdb8; /* starke Linie der Website, Schmuck: 1,56:1 Weiß, 1,41 Grund, 1,52 Sand, 1,41 Rosé, 1,26 Kachel-Sand – angepasst (P1-I) */
  --kern-linie-sand-zart: #e9dccb; /* Standardlinie der Website, Schmuck: 1,35:1 Weiß, 1,23 Grund, 1,32 Sand, 1,22 Rosé, 1,09 Kachel-Sand – angepasst (P1-I) */
  --kern-kachel: #e7ecf3; /* QUELLE Kacheln, Chips, zarte Linie */

  /* ── Dunkeltöne ─────────────────────────────────────────────────────────── */
  --kern-dunkel: #040614; /* QUELLE Grundton Dunkel (Mitternachtsblau, eine Stufe heller): Footer, Cockpit-Leiste; zu Nacht 1,02:1 */
  --kern-flaeche-dunkel: var(--kern-nacht); /* dunkle Sektionen/Hero, Cockpit-Grund dunkel: Mitternachtsblau */
  --kern-karte-dunkel: #080b1c; /* QUELLE Karte auf Dunkel (Website); zu Nacht 1,05:1 – Abgrenzung über Linie */
  --kern-dunkel-erhaben: color-mix(in srgb, var(--kern-dunkel) 92%, white); /* ≈ #181a27 (8 % Weiß, P1-L; nachgemessen P2-I): Hover/Rechtsleiste auf Dunkel; zu Nacht 1,19:1, zu Dunkel 1,17:1, Weiß darauf 17,28:1 */
  --kern-dunkel-karte: color-mix(in srgb, var(--kern-dunkel) 87%, white); /* ≈ #252633 (13 % Weiß, P1-L; nachgemessen P2-I): Cockpit-Karte im Dunkelmodus; zu Nacht 1,38:1, zu Dunkel 1,35:1, zu -erhaben 1,16:1, Weiß darauf 14,93:1. Darauf: Signal 4,78, Signal-licht 5,98, Fehler-hell 6,43, Erfolg-hell 8,63, Warnung-hell 8,13, Info-hell 7,17 */
  --kern-schatten-farbe: #2f2f39; /* QUELLE Schattenton, kühl (Cockpit) – Website nimmt --kern-schatten-tief */

  /* ── Linien ─────────────────────────────────────────────────────────────── */
  --kern-linie: #d4dde7; /* QUELLE starke Linie (Felder, Akkordeon) */
  --kern-linie-zart: #e7ecf3; /* QUELLE Standardlinie */
  --kern-linie-invers: color-mix(in srgb, var(--kern-text-invers) 16%, transparent); /* dekorativ: 1,47:1 Nacht, 1,54 Karte dunkel, 1,54 Zweitfarbe – Website nimmt --kern-linie-invers-warm */

  /* ── Zustände (Text ≥ 4,5:1 auf Weiß; »-tief« für Grund, Sand, Rosé,
        Kachel-Sand und #f3f7fe; »-hell« für Dunkel). Fehlerrot liegt im Ton
        neben der Koralle (Fehler zu Signal 1,48:1, Fehler-hell zu Signal-licht
        1,08:1): ein Fehler wird NIE nur über die Farbe gezeigt – immer Text
        und Zeichen dazu. ── */
  --kern-fehler: #d53a50; /* QUELLE Fehler: 4,62:1 Weiß, 4,19 Grund, 4,50 Sand, 4,18 Rosé, 3,74 Kachel-Sand → außer auf Weiß -tief bzw. -klar */
  --kern-fehler-tief: color-mix(in srgb, var(--kern-fehler) 88%, black); /* ≈ #bb3346 · Fehlertext klein, auf Grauflächen, Weiß darauf (Cockpit): 5,69:1 Weiß, 5,17 Grund, 5,56 Sand, 5,15 Rosé, 4,62 Kachel-Sand */
  --kern-fehler-klar: color-mix(in srgb, var(--kern-fehler) 75%, black); /* ≈ #a02c3c · Fehler der Website (P1-I), deutlich dunkler als die Koralle (zu Signal 2,31:1): 7,22:1 Weiß, 6,56 Grund, 7,05 Sand, 6,54 Rosé, 5,86 Kachel-Sand */
  --kern-fehler-hell: #ff8595; /* QUELLE Fehler auf Dunkel: 8,85:1 Nacht, 8,41 Karte dunkel, 8,35 Zweitfarbe, 6,43 Cockpit-Karte dunkel; vom Akzent --kern-signal-licht farblich nicht zu unterscheiden (1,08:1, ΔE00 5,3) → nur mit Zeichen und Text */
  --kern-fehler-hell-klar: color-mix(in srgb, var(--kern-fehler-hell) 50%, white); /* ≈ #ffc2ca · VORSCHLAG (P2-I, abgeleitet, keine QUELLE; Entscheidung Alexander steht aus): Fehler auf Dunkel, der sich von der Koralle abhebt – zu Signal-licht 1,64:1 (ΔE00 17,4), zu Signal 2,06:1 (ΔE00 24,6); 13,53:1 Nacht, 12,86 Karte dunkel, 12,77 Zweitfarbe, 9,83 Cockpit-Karte dunkel. Bisher liest ihn nur das Anmerkungstool; Zeichen und Text bleiben Pflicht */
  --kern-erfolg: #23794a; /* QUELLE 5,38:1 Weiß, 4,88 Grund, 5,25 Sand, 4,87 Rosé, 4,36 Kachel-Sand → auf Kachel-Sand -tief */
  --kern-erfolg-tief: color-mix(in srgb, var(--kern-erfolg) 90%, black); /* ≈ #206d43 · 6,32:1 Weiß, 5,74 Grund, 6,17 Sand, 5,72 Rosé, 5,13 Kachel-Sand (P1-I) */
  --kern-erfolg-hell: #74d99a; /* QUELLE 11,88:1 Nacht, 11,29 Karte dunkel, 11,21 Zweitfarbe */
  --kern-warnung: #9a5b00; /* QUELLE 5,43:1 Weiß, 4,93 Grund, 5,29 Sand, 4,91 Rosé, 4,40 Kachel-Sand → auf Kachel-Sand -tief */
  --kern-warnung-tief: color-mix(in srgb, var(--kern-warnung) 90%, black); /* ≈ #8b5200 · 6,37:1 Weiß, 5,79 Grund, 6,22 Sand, 5,77 Rosé, 5,17 Kachel-Sand (P1-I) */
  --kern-warnung-hell: #f5b34a; /* QUELLE 11,19:1 Nacht, 10,63 Karte dunkel, 10,56 Zweitfarbe */
  --kern-info: #2c63c9; /* QUELLE 5,62:1 Weiß, 5,11 Grund, 5,49 Sand, 5,09 Rosé, 4,56 Kachel-Sand */
  --kern-info-tief: color-mix(in srgb, var(--kern-info) 90%, black); /* ≈ #2859b5 · 6,59:1 Weiß, 5,98 Grund, 6,43 Sand, 5,96 Rosé, 5,35 Kachel-Sand (P1-I) */
  --kern-info-hell: #8cb4ff; /* QUELLE 9,88:1 Nacht, 9,38 Karte dunkel, 9,32 Zweitfarbe */
  --kern-fehler-zart: color-mix(in srgb, var(--kern-fehler) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-fehler-klar (6,27:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */
  --kern-erfolg-zart: color-mix(in srgb, var(--kern-erfolg) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-erfolg-tief (5,52:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */
  --kern-warnung-zart: color-mix(in srgb, var(--kern-warnung) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-warnung-tief (5,56:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */
  --kern-info-zart: color-mix(in srgb, var(--kern-info) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-info-tief (5,73:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */

  /* ── Diagramme (kategorial, feste Reihenfolge; zuletzt mit dem
        dataviz-Validator geprüft vor der Farbwelt Koralle: hell gegen #fff,
        dunkel gegen die damalige Karte. Cockpit-Dunkelkarte heute ≈ #252633
        (--kern-dunkel-karte); die sechs »-dunkel«-Töne haben darauf 4,87 ·
        4,38 · 3,99 · 4,24 · 4,20 · 4,21:1 (gerechnet P2-I, Soll 3:1). Der
        Validator-Lauf gegen die neue Karte steht aus. ── */
  --kern-diagramm-1: #4e661c; /* Oliv (Stand vor dem Farbwechsel) */
  --kern-diagramm-1-dunkel: #78a01a;
  --kern-diagramm-2: #2c63c9; /* Blau */
  --kern-diagramm-2-dunkel: #5b8ae0;
  --kern-diagramm-3: #c26a00; /* Bernstein */
  --kern-diagramm-3-dunkel: #bb740e;
  --kern-diagramm-4: #8a4fbf; /* Violett */
  --kern-diagramm-4-dunkel: #9d74dc;
  --kern-diagramm-5: #0f8fa3; /* Petrol */
  --kern-diagramm-5-dunkel: #0a95ab;
  --kern-diagramm-6: #c4467a; /* Beere */
  --kern-diagramm-6-dunkel: #db5c8b;

  /* ── Kanalformen (abgeleitet, nicht pflegen) ────────────────────────────── */
  --kern-signal-rgb: from var(--kern-signal) r g b;
  --kern-signal-licht-rgb: from var(--kern-signal-licht) r g b;
  --kern-signal-zart-rgb: from var(--kern-signal-zart) r g b;
  --kern-signal-tief-rgb: from var(--kern-signal-tief) r g b;
  --kern-signal-hell-rgb: from var(--kern-signal-hell) r g b;
  --kern-signal-text-rgb: from var(--kern-signal-text) r g b;
  --kern-text-rgb: from var(--kern-text) r g b;
  --kern-text-leise-rgb: from var(--kern-text-leise) r g b;
  --kern-text-faint-rgb: from var(--kern-text-faint) r g b;
  --kern-text-zart-rgb: from var(--kern-text-zart) r g b;
  --kern-text-tag-rgb: from var(--kern-text-tag) r g b;
  --kern-text-invers-rgb: from var(--kern-text-invers) r g b;
  --kern-text-invers-ruhig-rgb: from var(--kern-text-invers-ruhig) r g b;
  --kern-bg-rgb: from var(--kern-bg) r g b;
  --kern-bg-warm-rgb: from var(--kern-bg-warm) r g b;
  --kern-bg-alt-rgb: from var(--kern-bg-alt) r g b;
  --kern-bg-kuehl-rgb: from var(--kern-bg-kuehl) r g b;
  --kern-bg-rose-rgb: from var(--kern-bg-rose) r g b;
  --kern-bg-sand-rgb: from var(--kern-bg-sand) r g b;
  --kern-zweit-rgb: from var(--kern-zweit) r g b;
  --kern-kachel-rgb: from var(--kern-kachel) r g b;
  --kern-kachel-sand-rgb: from var(--kern-kachel-sand) r g b;
  --kern-text-warm-leise-rgb: from var(--kern-text-warm-leise) r g b;
  --kern-text-warm-zart-rgb: from var(--kern-text-warm-zart) r g b;
  --kern-linie-rgb: from var(--kern-linie) r g b;
  --kern-dunkel-rgb: from var(--kern-dunkel) r g b;
  --kern-flaeche-dunkel-rgb: from var(--kern-flaeche-dunkel) r g b;
  --kern-dunkel-erhaben-rgb: from var(--kern-dunkel-erhaben) r g b;
  --kern-dunkel-karte-rgb: from var(--kern-dunkel-karte) r g b;
  --kern-fehler-rgb: from var(--kern-fehler) r g b;
  --kern-fehler-tief-rgb: from var(--kern-fehler-tief) r g b;
  --kern-fehler-hell-rgb: from var(--kern-fehler-hell) r g b;
  --kern-erfolg-rgb: from var(--kern-erfolg) r g b;
  --kern-erfolg-hell-rgb: from var(--kern-erfolg-hell) r g b;
  --kern-warnung-rgb: from var(--kern-warnung) r g b;
  --kern-warnung-hell-rgb: from var(--kern-warnung-hell) r g b;
  --kern-info-rgb: from var(--kern-info) r g b;
  --kern-info-hell-rgb: from var(--kern-info-hell) r g b;

  /* ── Schrift ────────────────────────────────────────────────────────────── */
  --kern-font: 'Schibsted Grotesk', 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* QUELLE Hausschrift (Dateien: schriften.css) */
  --kern-font-ziffer: 'DM Sans', var(--kern-font); /* QUELLE Ziffern/Nummern */
  --kern-font-titel: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif; /* QUELLE Titelschrift der Website (Überschriften); für Groteske hier var(--kern-font) eintragen. Das Cockpit nutzt sie seit ADM-D für Seitentitel und große Überschriften (font-display) */
  --kern-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* QUELLE Code (Systemschrift, nichts geladen) */
  --kern-g-normal: 400;
  --kern-g-mittel: 500;
  --kern-g-fett: 700;
  --kern-g-titel: 400; /* Titelgewicht Website und Cockpit (font-display) */

  /* ── Grundrundungen ─────────────────────────────────────────────────────── */
  --kern-radius: 0; /* QUELLE eckig (Referenzen/Bilder, red-Prinzip) */
  --kern-radius-klein: 4px; /* QUELLE Felder (wie tokens.css und Original) */
  --kern-radius-mittel: 4px; /* QUELLE Karten (wie tokens.css und Original) */
  --kern-radius-gross: 4px; /* QUELLE große Flächen (Vorgabe 06.10.2026: Flächen einheitlich 4 px) */
  --kern-radius-pille: 100px; /* QUELLE Knöpfe, Chips */

  /* ── Bewegung ───────────────────────────────────────────────────────────── */
  --kern-ease: cubic-bezier(0.4, 0, 0.2, 1); /* QUELLE Standardkurve */
  --kern-ease-linear: linear;
  --kern-dauer-kurz: 0.25s; /* QUELLE schnell */
  --kern-dauer: 0.5s; /* QUELLE normal */
  --kern-dauer-langsam: 0.7s; /* QUELLE langsam */

  /* ── Schriftgrößen (DS-W0, 01.10.2026) – Leiter des Cockpits (--ck-t-* in
        web-app/src/index.css) plus die dort real genutzten Zwischenstufen
        10/10,5/11,5/12,5/13,5 px als eigene Stufen (Entscheidung Architekt:
        Umzug ohne optische Änderung, Verdichtung später). Noch von keiner App
        gelesen. Name = Pixelwert, Punkt als Bindestrich (t-12-5 = 12,5 px). ── */
  --kern-t-10: 10px; /* Zwischenstufe (Cockpit text-[10px]) */
  --kern-t-10-5: 10.5px; /* Zwischenstufe (Cockpit text-[10.5px]) */
  --kern-t-11: 11px; /* = --ck-t-mini */
  --kern-t-11-5: 11.5px; /* Zwischenstufe (Cockpit text-[11.5px]) */
  --kern-t-12: 12px; /* = --ck-t-klein */
  --kern-t-12-5: 12.5px; /* Zwischenstufe (Cockpit text-[12.5px]) */
  --kern-t-13: 13px; /* = --ck-t-text */
  --kern-t-13-5: 13.5px; /* Zwischenstufe (Cockpit text-[13.5px]) */
  --kern-t-15: 15px; /* = --ck-t-lead */
  --kern-t-17: 17px; /* = --ck-t-h3 */
  --kern-t-26: 26px; /* = --ck-t-h2 (Titelschrift) */
  --kern-t-38: 38px; /* = --ck-t-h1 (Titelschrift) */
  --kern-t-mini: var(--kern-t-11); /* Kennzeichen, Spaltenköpfe */
  --kern-t-klein: var(--kern-t-12); /* Metatext, Hinweise */
  --kern-t-text: var(--kern-t-13); /* Fließtext, Tabellen, Felder */
  --kern-t-lead: var(--kern-t-15); /* Unterzeile, Lead */
  --kern-t-h3: var(--kern-t-17); /* Kartentitel */
  --kern-t-h2: var(--kern-t-26); /* Abschnittstitel (Serif) */
  --kern-t-h1: var(--kern-t-38); /* Seitentitel (Serif) */

  /* ── Zeilenhöhen (DS-W0; Werte wie --bm-zh-* der Website) ───────────────── */
  --kern-zh-eng: 1.08; /* Display, große Zahlen */
  --kern-zh-snug: 1.12; /* H1/H2 mehrzeilig */
  --kern-zh-titel: 1.2; /* H3/H4, Kartentitel */
  --kern-zh-kompakt: 1.3; /* Knöpfe, Chips, Labels, kurze Zeilen */
  --kern-zh-mittel: 1.5; /* Listen, Felder, Kleintext */
  --kern-zh-lang: 1.55; /* Lead, Aufzählungen */
  --kern-zh-text: 1.62; /* Fließtext */

  /* ── Abstände (DS-W0; 4er-Raster, Stufe n = n × 4 px) ───────────────────── */
  --kern-abstand-0-5: 2px;
  --kern-abstand-1: 4px;
  --kern-abstand-1-5: 6px;
  --kern-abstand-2: 8px;
  --kern-abstand-3: 12px;
  --kern-abstand-4: 16px;
  --kern-abstand-5: 20px;
  --kern-abstand-6: 24px;
  --kern-abstand-8: 32px;
  --kern-abstand-10: 40px;
  --kern-abstand-12: 48px;
  --kern-abstand-16: 64px;
  --kern-abstand-20: 80px;
  --kern-abstand-24: 96px;
  --kern-abstand-30: 120px;

  /* ── Schatten (DS-W0; Werte wie Cockpit --shadow-* und Website --bm-schatten-*) ─── */
  --kern-schatten-karte: 0 16px 32px color-mix(in srgb, var(--kern-schatten-tief) 15%, transparent); /* Website --bm-schatten-karte */
  --kern-schatten-schwebend: 0 16px 64px color-mix(in srgb, var(--kern-schatten-tief) 15%, transparent); /* Website --bm-schatten-schwebend */
  --kern-schatten-kopf: 0 0 8px color-mix(in srgb, var(--kern-schatten-tief) 24%, transparent); /* Website --bm-schatten-kopf */
  --kern-schatten-ck-karte: 0 1px 2px color-mix(in srgb, var(--kern-schatten-tief) 4%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--kern-schatten-tief) 8%, transparent); /* Cockpit --shadow-card */
  --kern-schatten-ck-karte-hover: 0 2px 4px color-mix(in srgb, var(--kern-schatten-tief) 6%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--kern-schatten-tief) 15%, transparent); /* Cockpit --shadow-card-hover */
  --kern-schatten-ck-glas: 0 8px 24px -10px color-mix(in srgb, var(--kern-schatten-tief) 18%, transparent); /* Cockpit --shadow-glass */
  --kern-schatten-ck-karte-dunkel: 0 1px 0 color-mix(in srgb, var(--kern-text-invers) 8%, transparent) inset, 0 1px 2px rgb(0 0 0 / 0.30), 0 12px 28px -14px rgb(0 0 0 / 0.60); /* Cockpit --shadow-card im Dunkelmodus (DS-W1; DM-1 02.10.2026: Inset-Licht an der Oberkante 5 → 8 %, weicher tiefer Schatten nach unten) */
  --kern-schatten-ck-karte-hover-dunkel: 0 1px 0 color-mix(in srgb, var(--kern-text-invers) 10%, transparent) inset, 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 36px -14px rgb(0 0 0 / 0.65); /* Cockpit --shadow-card-hover im Dunkelmodus (DS-W1; DM-1: Inset-Licht 6 → 10 %, tieferer Schatten) */
  --kern-schatten-ck-glas-dunkel: 0 1px 0 color-mix(in srgb, var(--kern-text-invers) 5%, transparent) inset, 0 8px 24px -10px rgb(0 0 0 / 0.55); /* Cockpit --shadow-glass im Dunkelmodus (DS-W1) */
  --kern-schatten-ck-glasflaeche: 0 20px 40px -14px color-mix(in srgb, var(--kern-schatten-tief) 16%, transparent), 0 3px 10px color-mix(in srgb, var(--kern-schatten-tief) 6%, transparent); /* Cockpit --cg-shadow hell: Wurfschatten der Glasflächen (DS-W1) */
  --kern-schatten-ck-glasflaeche-dunkel: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 52px -14px rgba(0, 0, 0, 0.60), 0 3px 12px rgba(0, 0, 0, 0.38); /* Cockpit --cg-shadow dunkel (DS-W1; DM-1: Inset-Licht 8 % an der Oberkante der schwebenden Fläche) */
  --kern-schatten-ck-leiste: 0 24px 60px -20px rgba(0, 0, 0, 0.72), 0 6px 18px -10px rgba(0, 0, 0, 0.55); /* Cockpit: Flyout der Leiste und Leisten-Glas (.nav-flyout, .glass-nachtblau), immer dunkel (DS-W1) */
  --kern-schatten-ck-leiste-kante: inset 0 1px 0 rgba(255, 255, 255, 0.16); /* Cockpit: Licht-Oberkante des Flyouts (DS-W1) */
  --kern-schatten-ck-leiste-dunkel: 0 24px 64px -18px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.03); /* Cockpit: Flyout im Dunkelmodus, Kante und Halo trennen das Panel vom Grund (DS-W1) */

  /* ── Cockpit-Effekte (DS-W1, 01.10.2026) – Glas, Flyout und Leisten-Verläufe
        von web-app/src/index.css (--cg-*, --grad-nav-*, .nav-flyout), 1:1 aus
        der Stil-Datei übernommen. Weiß-/Schwarz-Auflagen, keine Buntfarbe; »-dunkel«
        = Dunkelmodus, »leiste-« = immer-dunkle Leiste. ── */
  --kern-ck-glas-blur: 20px; /* Refraktion der Glasflächen (backdrop-filter blur) */
  --kern-ck-glas-saettigung: 1.6; /* Refraktion der Glasflächen (backdrop-filter saturate) */
  --kern-ck-glas-tint: rgba(255, 255, 255, 0.62); /* Glas hell: weißer Tint */
  --kern-ck-glas-tint-stark: rgba(255, 255, 255, 0.80); /* Glas hell: dichter Tint (.glass--stark) */
  --kern-ck-glas-kante-hell: rgba(255, 255, 255, 0.92); /* Glas hell: Lichtkante, heller Stopp */
  --kern-ck-glas-kante-leise: rgba(255, 255, 255, 0.24); /* Glas hell: Lichtkante, leiser Stopp */
  --kern-ck-glas-ersatz: rgba(255, 255, 255, 0.94); /* Glas hell: fast opaker Rückfall ohne backdrop-filter, bei reduzierter Transparenz und mehr Kontrast */
  --kern-ck-glas-glanz: 0.30; /* Glas hell: Deckkraft des Glanzes oben links */
  --kern-ck-glas-kante-hell-dunkel: rgba(255, 255, 255, 0.34); /* Glas dunkel: Lichtkante, heller Stopp */
  --kern-ck-glas-kante-leise-dunkel: rgba(255, 255, 255, 0.07); /* Glas dunkel: Lichtkante, leiser Stopp */
  --kern-ck-glas-haarlinie-dunkel: rgba(255, 255, 255, 0.10); /* Glas dunkel: Haarlinie unten */
  --kern-ck-glas-glanz-dunkel: 0.18; /* Glas dunkel: Deckkraft des Glanzes */
  --kern-ck-leiste-kante-hell: rgba(255, 255, 255, 0.30); /* Leisten-Glas (.glass-nachtblau): Lichtkante, heller Stopp */
  --kern-ck-leiste-kante-leise: rgba(255, 255, 255, 0.06); /* Leisten-Glas: Lichtkante, leiser Stopp */
  --kern-ck-leiste-haarlinie: rgba(0, 0, 0, 0.35); /* Leisten-Glas: Haarlinie unten */
  --kern-ck-leiste-glanz: 0.12; /* Leisten-Glas: Deckkraft des Glanzes */
  --kern-ck-flyout-blur: 22px; /* Flyout der Leiste: Refraktion (blur) */
  --kern-ck-flyout-saettigung: 1.5; /* Flyout der Leiste: Refraktion (saturate) */
  --kern-ck-grund-schein-dunkel: radial-gradient(75% 60% at 30% -8%, rgba(64, 86, 160, 0.30) 0%, transparent 72%), radial-gradient(50% 42% at 92% 0%, color-mix(in srgb, var(--kern-signal) 8%, transparent) 0%, transparent 70%); /* DM-1: Lichtschein hinter dem Cockpit im Dunkelmodus (Hintergrund von .cockpit-aura): oben links gedämpftes Mitternachtsblau, oben rechts ein Hauch Koralle (7 %). Hellster Punkt hebt den Grund #02030d auf rund #101732; Weiß darauf weiter über 17:1, Grau --c-ink-400 über 6:1 */
  --kern-ck-viz-flaeche-dunkel: linear-gradient(to bottom, color-mix(in srgb, var(--kern-signal-licht) 24%, transparent) 0%, transparent 100%); /* DM-1: Flächenverlauf unter Linien von Diagrammen im Dunkelmodus (Verlaufs-Anklang der Koralle, 24 % → 0). Als --viz-flaeche in .viz; Linien selbst bleiben in den Diagrammfarben */
  --kern-ck-karte-linie-dunkel: rgba(255, 255, 255, 0.07); /* DM-1: 1-px-Rahmen der Karten im Dunkelmodus (Weiß, geringe Deckung; vorher 10 %). Dekorativ, die Abgrenzung trägt der Flächenton der Karte */
  --kern-ck-flyout-linie-dunkel: rgba(255, 255, 255, 0.13); /* Flyout im Dunkelmodus: Kante */
  --kern-ck-nav-verlauf-1: linear-gradient(180deg, rgba(255,255,255,0.040) 0%, rgba(255,255,255,0.016) 34%, rgba(255,255,255,0) 62%, rgba(0,0,0,0.10) 100%); /* Leiste Ebene 1 (NAV1): Licht am Kopf, Tiefe am Fuß, unter 4 % Kanalhub – nicht als Verlauf erkennbar */
  --kern-ck-nav-verlauf-2: linear-gradient(180deg, rgba(255,255,255,0.058) 0%, rgba(255,255,255,0.040) 38%, rgba(255,255,255,0.026) 100%); /* Leiste Ebene 2 (Bereichsspalte): dieselbe Richtung, schwächer */
  --kern-ck-nav-verlauf-hover: linear-gradient(180deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0) 100%); /* Hover-Schimmer über der Hover-Farbe der Leiste */

  /* ── Altschicht Website/Kundenportal (W1-22, 01.10.2026) – Literalwerte, die
        website/ und portal-app/tailwind.config.ts noch unter alten Klassennamen
        ausgeben (border-line, text-faint, font-sans/-display, max-w-wrap/-col).
        Herkunft enerbolt-Nachtblau, NICHT die gültige Gestaltung: nicht neu
        verwenden; entfallen mit DS-W3/DS-W4 (docs/audit-designtokens.md). ── */
  --kern-alt-text-faint: rgba(255, 255, 255, 0.64); /* Portal: Tailwind-Farbe faint (text-faint) der Nachtblau-Schicht */
  --kern-alt-linie: rgba(255, 255, 255, 0.10); /* Portal: Tailwind-Farbe line (border-line) */
  --kern-alt-linie-stark: rgba(255, 255, 255, 0.18); /* Website und Portal: Tailwind-Farbe line-strong (border-line-strong) */
  --kern-alt-font-website: D-DIN, "Inter Variable", system-ui, sans-serif; /* Website: Tailwind font-sans (wirkt nur in der Grundregel html von Tailwind) */
  --kern-alt-font-portal: D-DIN, system-ui, sans-serif; /* Portal: Tailwind font-sans */
  --kern-alt-font-portal-titel: D-DIN, "Hanken Grotesk Variable", system-ui, sans-serif; /* Portal: Tailwind font-display */
  --kern-alt-breite-wrap: 1080px; /* Portal: Tailwind max-w-wrap (.wrap) */
  --kern-alt-breite-spalte: 720px; /* Portal: Tailwind max-w-col */

  /* ── Studio (Anthrazit/Schwarz) ─────────────────────────────────────────── */
  --kern-studio-grund: #0b0b0c; /* Studio: Seitengrund, fast Schwarz, ohne Blaustich (03.10.2026). Gilt nur auf html[data-flaeche=studio] im Dunkelmodus; Überschreibung in web-app/src/lib/studioAkzent.css */
  --kern-studio-flaeche: #161617; /* Studio: Karte/Fläche (Anthrazit), zum Grund 1,08:1 – Abgrenzung über die Linie */
  --kern-studio-flaeche-2: #212123; /* Studio: erhabene Fläche (Hover, Chip, Panel, Eingabe) */
  --kern-studio-linie: #2f2f32; /* Studio: Linie/Rahmen, neutral */
  --kern-studio-text: #f1f1ef; /* Studio: Haupttext, 17,6:1 auf Grund */
  --kern-studio-text-2: #a3a3a6; /* Studio: Zweittext, 7,6:1 auf Grund, 6,9:1 auf Fläche */
  --kern-studio-akzent: #ff7c7e; /* Studio: einziger Farbakzent (Koralle licht = --kern-signal-licht), sparsam für Fokus und aktive Auswahl; 8,2:1 auf Grund */
}
/* @kern-tokens:ende */
/* --kern-* auf :root + Schriften (Jost, DM Sans) */
/* Basisschicht der Agentur-Website (Welle D1, 27.09.2026).
   Kleidet die semantischen Klassen der alten Schicht (src/index.css:
   t-*, btn-*, card, chip, wrap, section, input …) innerhalb von .bm-neu im
   neuen Look ein – die Seitenmodule bleiben unverändert.
   Werte: sunzinet-Messung (docs/positionierung/design/sunzinet-designsystem.md).

   SPEZIFITÄT: Die alten Regeln stehen als `.light .x` / `.clean .x` (0,2,0).
   Alle Umkleidungen hier nutzen deshalb `.bm-neu.bm-neu .x` (0,3,0) – die
   doppelte Klasse trifft dasselbe Element, hebt aber die Spezifität, sodass
   die Ladereihenfolge egal ist und kein !important nötig wird.
   Tailwind-Farben (text-ink, text-muted …) hängen an --c-*-Tripletts aus
   src/styles/tokens.css; die werden unten innerhalb von .bm-neu umgesetzt.
   Neue Hilfsklassen tragen das Präfix bm- (Liste: designsystem-neu.md).
   Welle Z0-B (27.09.2026): nur noch Token-Verweise – keine festen Farben,
   Schriftgrößen, Zeilenhöhen, Rundungen oder Dauern (Ausnahmen mit Kommentar:
   Kleinstrundungen 4/8 px, line-height 1, Tailwind-Ring-Reset, Select-Pfeil). */

/* ════════════════════════════════════════════════════════════════════════
   1. Alte Variablen innerhalb des Scopes auf die neuen Werte legen
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu {
  /* Tailwind-Brücke: Palette-Tripletts (text-ink/bg-graphite → graphite,
     text-muted → muted-light, text-faint → faint-light, bg-sand-clean).
     Werte ausschließlich aus den Tokens (Kanalformen, tokens.css). */
  --c-graphite: var(--bm-text-rgb);
  --c-text-muted-light: var(--bm-text-leise-rgb);
  --c-text-faint-light: var(--bm-text-faint-rgb);   /* 4,6:1 auf Weiß (AA) */
  --c-placeholder-light: var(--bm-text-faint-rgb);  /* Platzhalter ≥ 4,5:1 (P1-I) */
  --c-sand-clean: var(--bm-bg-rgb);                 /* Seitengrund clean → Grund */
  --c-sand-light: var(--bm-bg-rgb);
  --c-sand-chip-clean: var(--bm-kachel-rgb);
  --c-sand-chip-light: var(--bm-kachel-rgb);

  /* Radien (Tailwind rounded-*): Karten, große Flächen, Felder aus den Tokens.
     Kleinstrundungen 4/8 px der alten Bausteine bleiben bewusst lokal – bei
     einer Umstellung auf ganz eckig hier mitziehen. */
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: var(--bm-radius-klein);
  --radius-2xl: var(--bm-radius-karte);
  --radius-3xl: var(--bm-radius-gross);
  --radius-card: var(--bm-radius-karte);
  --radius-card-lg: var(--bm-radius-karte);
  --radius-chip: var(--bm-radius-pille);
  --radius-pill: var(--bm-radius-pille);
  --radius-ctrl: var(--bm-radius-feld);

  /* Alte Markenverläufe → ruhige Flächen des neuen Systems */
  --grad-brand: linear-gradient(var(--bm-flaeche-dunkel), var(--bm-flaeche-dunkel));
  --grad-brand-soft: linear-gradient(var(--bm-bg-kuehl), var(--bm-bg-kuehl));
  --grad-brand-text: linear-gradient(var(--bm-text), var(--bm-text));
  --grad-cta: var(--bm-signal-verlauf);
  --grad-cta-hover: var(--bm-signal-verlauf-hover);
  /* Marken-Tripletts des alten Verlaufs → Signal (einfarbig; die
     ScrollProgress-Leiste bekommt den Verlauf in kopf.css). Kein Site-Modul
     nutzt sie als Textfarbe. */
  --c-flame: var(--bm-signal-rgb);
  --c-coral: var(--bm-signal-rgb);
  --c-violet: var(--bm-signal-rgb);
  --shadow-card-sm: none;
  --shadow-showcase: none;
  --shadow-showcase-soft: none;
}
/* Flip-Tokens der Welt-Scopes: auch dann richtig, wenn .light/.clean
   innerhalb von .bm-neu liegt (Shell-Hülle) */
.bm-neu,
.bm-neu .light,
.bm-neu .clean {
  --page-bg: var(--bm-bg);
  --text-body: var(--bm-text-leise);
  --text-strong: var(--bm-text);
  --text-muted: var(--bm-text-leise);
  --text-faint: var(--bm-text-faint);
  --surface-card: var(--bm-bg-alt);
  --surface-chip: var(--bm-kachel);
  --surface-input: var(--bm-bg-kuehl);
  --hairline: var(--bm-linie-zart);
  --hairline-strong: var(--bm-linie);
  --chip-text: var(--bm-text-tag);
  --instrument-accent: var(--bm-text);
  --instrument-soft: color-mix(in srgb, var(--bm-text) 5%, transparent);
  --betonung: var(--bm-text);
  --scroll-thumb: var(--bm-linie);
  --scroll-track: var(--bm-bg);
}
/* Scrollbar des Dokuments in den Tönen des Designsystems, sobald eine
   Website- (.bm-neu) oder Portalseite (.bm-portal) steht. Das einzige :has()
   am Wurzelelement (Z0-B): die Tokens selbst liegen ohne :has() auf :root. */
html:has(.bm-neu.bm-neu.bm-neu, .bm-portal.bm-portal.bm-portal) {
  --scroll-thumb: var(--bm-linie);
  --scroll-track: var(--bm-bg);
}

.bm-neu { -webkit-font-smoothing: antialiased; }
.bm-neu.bm-neu ::-moz-selection { background: var(--bm-signal); color: var(--bm-signal-text); }
.bm-neu.bm-neu ::selection { background: var(--bm-signal); color: var(--bm-signal-text); }

/* Tailwind-Schriftklassen (D-DIN) → Jost */
.bm-neu :is(.font-display, .font-sans) { font-family: var(--bm-font); }
/* Überschriften nach Vorbild Regular 400 (Module setzen font-medium) */
.bm-neu.bm-neu .font-display.font-medium { font-weight: var(--bm-g-titel); }

/* Tailwind-Hilfsklassen, deren Werte nicht an Tripletts hängen */
.bm-neu.bm-neu .border-line { border-color: var(--bm-linie-zart); }
.bm-neu.bm-neu .border-line-strong { border-color: var(--bm-linie); }
.bm-neu.bm-neu .hover\:border-ink:hover { border-color: var(--bm-text); }
.bm-neu.bm-neu .divide-line > :not([hidden]) ~ :not([hidden]) { border-color: var(--bm-linie-zart); }
.bm-neu.bm-neu .bg-line { background-color: var(--bm-linie-zart); }
.bm-neu.bm-neu .text-accent { color: var(--bm-text); }
.bm-neu.bm-neu .border-accent { border-color: var(--bm-text); }
.bm-neu.bm-neu .bg-surface { background-color: var(--bm-bg-alt); }
.bm-neu.bm-neu .bg-surface-2 { background-color: var(--bm-kachel); }

/* ════════════════════════════════════════════════════════════════════════
   2. Typografie
   ════════════════════════════════════════════════════════════════════════ */
/* Titelschrift (27.09.2026, Zusatzauftrag PL-1): Überschriften der Website
   in --bm-font-titel (Quelle design/kern.css, Instrument Serif). Die Schrift
   hat nur den Schnitt 400 – keine künstliche Fettung (font-synthesis: none).
   Serifen brauchen andere Maße als die Groteske: Laufweite etwa 0 bis
   −0,01em, große Titel mit Zeilenhöhe --bm-zh-snug (1,1). Fließtext,
   Navigation, Knöpfe, Chips und Ziffern bleiben in der Hausschrift. Dieselbe
   Liste gilt für Bausteine, die ihre Titel selbst setzen: Klasse
   .bm-titelschrift oder font-family: var(--bm-font-titel) in der
   Bausteindatei. Das Kundenportal (.bm-portal) bleibt ohne Serifen. */
.bm-neu.bm-neu :is(.t-hero, .t-h2, .t-h3, .t-h4),
.bm-neu :is(.bm-titel-1, .bm-titel-2, .bm-titel-3, .bm-titel-4, .bm-titelschrift) {
  font-family: var(--bm-font-titel);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
}
.bm-neu.bm-neu :is(.t-hero, .t-h2, .t-h3, .t-h4) {
  color: var(--bm-text);
  letter-spacing: var(--bm-sp-leicht);
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
.bm-neu.bm-neu .t-hero { font-size: var(--bm-t-h1); line-height: var(--bm-zh-snug); }
.bm-neu.bm-neu .t-h2 { font-size: var(--bm-t-h2); line-height: var(--bm-zh-snug); }
/* TY-1: Überschriften ausgewogen umbrechen, Fließtext ohne Schusterjungen,
   Textspalten auf angenehme Zeilenlänge (--bm-zeile-text ≈ 68 Zeichen). */
@supports (text-wrap: balance) {
  .bm-neu.bm-neu :is(.t-hero, .t-h2, .t-h3, .t-h4, .bm-titel-1, .bm-titel-2, .bm-titel-3, .bm-titel-4, h1, h2, h3) { text-wrap: balance; }
}
@supports (text-wrap: pretty) {
  .bm-neu.bm-neu :is(.t-sub, .t-lead, .bm-lead, .bm-fliesstext, p) { text-wrap: pretty; }
}
/* P2-I: Gewicht gesenkt (:where), damit Module die Breite ihrer Subline
   selbst bestimmen können. Vorher :is(p.t-sub, …) = (0,3,1) und damit über
   jeder Modulregel `.bm-neu.bm-neu .klasse` (0,3,0). Jetzt (0,2,1) für
   p.t-sub/p.t-lead und (0,2,0) für .bm-lead/.bm-fliesstext: Tailwind-Klassen
   (max-w-*, 0,1,0) verlieren weiter, Modulregeln ab (0,3,0) gewinnen. */
.bm-neu.bm-neu p:where(.t-sub, .t-lead),
.bm-neu.bm-neu :where(.bm-lead, .bm-fliesstext) { max-width: var(--bm-zeile-text); }
.bm-neu.bm-neu .text-center :is(p.t-sub, p.t-lead, .bm-lead, .bm-fliesstext) { margin-inline: auto; }
.bm-neu.bm-neu .t-h3 { font-size: var(--bm-t-h3); line-height: var(--bm-zh-titel); }
.bm-neu.bm-neu .t-h4 { font-size: var(--bm-t-h4); line-height: var(--bm-zh-titel); }

.bm-neu.bm-neu .t-lead { color: var(--bm-text); line-height: var(--bm-zh-lang); }
.bm-neu.bm-neu .t-lead:not([class*='text-[']) { font-size: var(--bm-t-lead); }
.bm-neu.bm-neu .t-sub { color: var(--bm-text-leise); line-height: var(--bm-zh-text); }
.bm-neu.bm-neu .t-sub:not([class*='text-[']) { font-size: var(--bm-t-body); }
.bm-neu.bm-neu :is(.t-sub, .t-lead) a {
  color: var(--bm-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.bm-neu.bm-neu :is(.t-sub, .t-lead) a:hover { text-decoration: none; }

.bm-neu.bm-neu :is(.t-num, .t-giant) {
  font-family: var(--bm-font);
  font-weight: var(--bm-g-normal);
  color: var(--bm-text);
  letter-spacing: 0;
  line-height: 1;   /* einzeilige Zahlen: bleibt lokal */
  font-variant-numeric: tabular-nums;
}
.bm-neu.bm-neu .t-giant { font-size: var(--bm-t-zwischen); }
/* t-eyebrow bleibt ohne Versalien (Projektregel: keine Kicker) */
.bm-neu.bm-neu .t-eyebrow {
  font-family: var(--bm-font);
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--bm-text-leise);
}
/* Nummerierung 01 … n (alte q-grad-text-Ziffern) → DM Sans, Tinte */
.bm-neu.bm-neu .q-grad-text {
  background: none;
  color: var(--bm-text);
  -webkit-text-fill-color: currentColor;
}
.bm-neu.bm-neu .q-grad-text.font-black {
  font-family: var(--bm-font-ziffer);
  font-weight: var(--bm-g-mittel);
  font-size: var(--bm-t-ziffer);
  letter-spacing: var(--bm-sp-ziffer);
}

/* ════════════════════════════════════════════════════════════════════════
   3. Raster
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu.bm-neu .wrap {
  max-width: calc(var(--bm-inhalt-max) + 2 * var(--bm-rand));
  margin-inline: auto;
  padding-inline: var(--bm-rand);
}
.bm-neu.bm-neu .wrap.max-w-col { max-width: calc(45rem + 2 * var(--bm-rand)); }
.bm-neu.bm-neu .section { padding-block: var(--bm-sektion); }

/* ════════════════════════════════════════════════════════════════════════
   4. Knöpfe
   Alte Klassen: btn-primary → Signal-Pille, btn-outline → Kreis-Punkt-Pille,
   btn-ghost → Kachel-Pille. Neue Klassen: bm-knopf--signal/--punkt/--weiss/
   --ghost/--dunkel (immer MIT Modifikator; das nackte .bm-knopf belegt
   portfolio/detail.css bereits für seinen eigenen dunklen Knopf).
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost),
.bm-neu :is(.bm-knopf--signal, .bm-knopf--punkt, .bm-knopf--weiss, .bm-knopf--ghost, .bm-knopf--dunkel) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--bm-knopf-hoehe);
  height: auto;
  padding: 0.0625rem 1.75rem 0;
  border-radius: var(--bm-radius-pille);
  font-family: var(--bm-font);
  font-size: var(--bm-t-knopf);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-titel);
  letter-spacing: var(--bm-sp-knopf);
  text-decoration: none;
  cursor: pointer;
  transition:
    scale var(--bm-dauer-kurz) var(--bm-ease),
    transform var(--bm-dauer) var(--bm-ease),
    box-shadow var(--bm-dauer) var(--bm-ease),
    background-color var(--bm-dauer) var(--bm-ease),
    border-color var(--bm-dauer) var(--bm-ease),
    color var(--bm-dauer) var(--bm-ease);
}
/* Weiches Druckgefühl (bewegung.css, --bm-bewegung-druck) */
.bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost):active,
.bm-neu :is(.bm-knopf--signal, .bm-knopf--punkt, .bm-knopf--weiss, .bm-knopf--ghost, .bm-knopf--dunkel):active {
  scale: var(--bm-bewegung-druck);
}
.bm-neu.bm-neu .btn-sm { min-height: 44px; padding-inline: 1.375rem; font-size: var(--bm-t-klein); }
.bm-neu.bm-neu .btn-lg { min-height: var(--bm-knopf-hoehe); padding-inline: 1.75rem; font-size: var(--bm-t-knopf); }
.bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost):focus-visible,
.bm-neu [class*='bm-knopf--']:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);   /* Farbe je Fläche: tokens.css »Fokusrahmen je Fläche« (P3-I) */
  outline-offset: var(--bm-fokus-versatz, 3px);
  --tw-ring-shadow: 0 0 #0000;          /* Tailwind-Ring-Reset (technisch) */
  --tw-ring-offset-shadow: 0 0 #0000;
}

/* Signal-Pille (Primärknopf): Signalverlauf, Text --bm-signal-text.
   Hover hebt 1 px an + Glow; ein Schleier (::after, Deckkraft) verschiebt den
   Verlauf in Richtung Hover-Ton, ohne Farbsprung. */
.bm-neu.bm-neu .btn-primary,
.bm-neu .bm-knopf--signal {
  background: var(--bm-signal-verlauf) border-box;
  color: var(--bm-signal-text);
  border: 1px solid var(--bm-signal-kontur);   /* Kontur: Fläche hebt sich auch bei heller Signalfarbe vom hellen Grund ab */
}
.bm-neu.bm-neu .btn-primary::after,
.bm-neu .bm-knopf--signal::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: var(--bm-signal-schleier);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bm-dauer) var(--bm-ease);
}
.bm-neu.bm-neu .btn-primary:hover,
.bm-neu .bm-knopf--signal:hover {
  color: var(--bm-signal-text);
  transform: translateY(-1px);
  box-shadow: var(--bm-schatten-glow);
}
.bm-neu.bm-neu .btn-primary:hover::after,
.bm-neu .bm-knopf--signal:hover::after { opacity: 1; }

/* Kreis-Punkt-Pille (Signatur): Kreis hinter dem Textanfang wächst beim
   Hover auf volle Breite und füllt sich in Signal; der Text wechselt dann
   auf --bm-signal-text. Farbunabhängig (helle, mittlere oder dunkle
   Signalfarbe): Auf Hell liegt Tinte über dem ruhenden Kreis – er ruht
   deshalb in --bm-signal-kreis (Schalter in kern.css: bei heller Signalfarbe
   das Signal selbst, Tinte darauf 6,10:1; sonst die aufgehellte Stufe). Auf
   Dunkel (Abschnitt 8) steht der Text NEBEN dem Kreis wie im CTA-Band
   (d2e.css), weil keine Kreisfarbe zugleich auf Dunkel sichtbar und unter
   heller Schrift lesbar wäre. */
.bm-neu.bm-neu .btn-outline,
.bm-neu .bm-knopf--punkt {
  background: transparent;
  color: var(--bm-text);
  border: 0;
  padding-inline: 1.75rem;
}
.bm-neu.bm-neu .btn-outline::before,
.bm-neu .bm-knopf--punkt::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  width: var(--bm-knopf-punkt);
  height: var(--bm-knopf-punkt);
  transform: translateY(-50%);
  border-radius: var(--bm-radius-pille);
  background: var(--bm-signal-kreis);
  transition: width var(--bm-dauer) var(--bm-ease), background-color var(--bm-dauer) var(--bm-ease);
}
.bm-neu.bm-neu .btn-outline:is(:hover, :focus-visible)::before,
.bm-neu .bm-knopf--punkt:is(:hover, :focus-visible)::before { width: 100%; background: var(--bm-signal); }
.bm-neu.bm-neu .btn-outline:hover,
.bm-neu .bm-knopf--punkt:is(:hover, :focus-visible) { color: var(--bm-signal-text); border-color: transparent; }

/* Weiß (auf Dunkel): Hover zarte Signalfläche, Text bleibt dunkel */
.bm-neu .bm-knopf--weiss,
.bm-neu.bm-neu .q-grad .btn.bg-white {
  background: var(--bm-text-invers);
  color: var(--bm-text);
  border: 1px solid var(--bm-text-invers);
}
.bm-neu .bm-knopf--weiss:hover,
.bm-neu.bm-neu .q-grad .btn.bg-white:hover { background: var(--bm-signal-zart); border-color: var(--bm-signal-zart); }

/* Ghost: auf Hell Kachel-Pille, auf Dunkel Glas mit heller Kante */
.bm-neu.bm-neu .btn-ghost,
.bm-neu .bm-knopf--ghost {
  background: var(--bm-kachel);
  color: var(--bm-text);
  border: 1px solid var(--bm-kachel);
}
.bm-neu.bm-neu .btn-ghost:hover,
.bm-neu .bm-knopf--ghost:hover { background: var(--bm-linie); border-color: var(--bm-linie); }
.bm-neu.bm-neu :is(.q-grad, .bm-flaeche-dunkel) :is(.btn.border, .btn-ghost, .bm-knopf--ghost) {
  background: var(--bm-glas);
  border: 1px solid var(--bm-glas-kante);
  color: var(--bm-text-invers);
}
.bm-neu.bm-neu :is(.q-grad, .bm-flaeche-dunkel) :is(.btn.border, .btn-ghost, .bm-knopf--ghost):hover {
  background: var(--bm-text-invers);
  border-color: var(--bm-text-invers);
  color: var(--bm-text);
}

/* Dunkel: Zweitfarbe (sehr dunkles Mitternachtsblau), Hover Signal (Text --bm-signal-text) */
.bm-neu .bm-knopf--dunkel {
  background: var(--bm-zweit);
  color: var(--bm-text-invers);
  border: 1px solid var(--bm-zweit);
}
.bm-neu .bm-knopf--dunkel:hover {
  background: var(--bm-signal);
  border-color: var(--bm-signal-kontur);
  color: var(--bm-signal-text);
}
/* Auf Dunkel hebt sich die Zweitfarbe nicht vom Grund ab (1,06:1 zu Nacht):
   heller Rand ≥ 3:1 (P1-I) */
.bm-neu.bm-neu :is(.q-grad, .bm-flaeche-dunkel) .bm-knopf--dunkel:not(:hover) { border-color: var(--bm-linie-invers-stark); }

/* Gesperrt (P1-I): ruhige Kachel, leiser Text, keine Hover-Wirkung. Gilt für
   :disabled und aria-disabled; steht nach den Knopfarten und gewinnt durch
   die höhere Spezifität. Auf Dunkel: Glas mit leisem hellem Text. */
.bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost, [class*='bm-knopf--']):is(:disabled, [aria-disabled='true']) {
  background: var(--bm-kachel);
  border: 1px solid var(--bm-linie);
  color: var(--bm-text-leise);
  cursor: not-allowed;
  transform: none;
  scale: none;
  box-shadow: none;
}
.bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost, [class*='bm-knopf--']):is(:disabled, [aria-disabled='true'])::before,
.bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost, [class*='bm-knopf--']):is(:disabled, [aria-disabled='true'])::after { content: none; }
.bm-neu.bm-neu.bm-neu :is(.q-grad, .bm-flaeche-dunkel) :is(.btn, .btn-primary, .btn-outline, .btn-ghost, [class*='bm-knopf--']):is(:disabled, [aria-disabled='true']) {
  background: var(--bm-glas);
  border-color: var(--bm-linie-invers);
  color: var(--bm-text-invers-leise);
  padding-inline: 1.75rem;
}
.bm-neu.bm-neu.bm-neu :is(.q-grad, .bm-flaeche-dunkel) :is(.btn, .btn-primary, .btn-outline, .btn-ghost, [class*='bm-knopf--']):is(:disabled, [aria-disabled='true'])::before,
.bm-neu.bm-neu.bm-neu :is(.q-grad, .bm-flaeche-dunkel) :is(.btn, .btn-primary, .btn-outline, .btn-ghost, [class*='bm-knopf--']):is(:disabled, [aria-disabled='true'])::after { content: none; }

/* ════════════════════════════════════════════════════════════════════════
   5. Text- und Pfeil-Links
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-link-pfeil {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-block: 0.5rem;
  font-family: var(--bm-font);
  font-size: var(--bm-t-knopf);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: inherit;
  text-decoration: none;
}
.bm-neu .bm-link-pfeil::after {
  content: '→';
  content: '→' / '';   /* Pfeil wandert bei Hover/Fokus: bewegung.css, Abschnitt 4 */
}
.bm-neu .bm-link-pfeil::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--bm-dauer) var(--bm-ease);
}
.bm-neu .bm-link-pfeil:is(:hover, :focus-visible)::before { width: 100%; }
.bm-neu .bm-link {
  color: var(--bm-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu .bm-link:hover { text-decoration: none; }
/* Auf Dunkel erbt der Textlink die helle Schrift (P1-I: vorher Tinte auf Nacht, 1,08:1) */
.bm-neu :is(.bm-flaeche-dunkel, .q-grad, .bm-umkehr) .bm-link { color: var(--bm-text-invers); }
/* Pfeil in Karten-Teasern der alten Schicht (SeitenKarte „Mehr erfahren →") */
.bm-neu.bm-neu .card .arr { transition: transform var(--bm-dauer) var(--bm-ease); }

/* ════════════════════════════════════════════════════════════════════════
   6. Flächen: Karte, Chip, Showcase, Linien
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu.bm-neu .card,
.bm-neu .bm-kasten {
  background: var(--bm-bg-alt);
  color: var(--bm-text);
  border: 0;
  border-radius: var(--bm-radius-karte);
  box-shadow: none;
}
.bm-neu.bm-neu .card.border-dashed { border: 1px dashed var(--bm-linie); background: var(--bm-bg-kuehl); }
.bm-neu.bm-neu .card-hover,
.bm-neu .bm-kasten--link {
  transition: background-color var(--bm-dauer) var(--bm-ease), color var(--bm-dauer) var(--bm-ease);
}
.bm-neu.bm-neu .card-hover:hover,
.bm-neu .bm-kasten--link:hover { transform: none; background: var(--bm-kachel); }
/* Formular sitzt nach Vorbild in einer weißen, schwebenden Karte */
.bm-neu.bm-neu form.card { background: var(--bm-bg); box-shadow: var(--bm-schatten-schwebend); }

.bm-neu.bm-neu .chip,
.bm-neu .bm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 30px;
  padding: 0.25rem 0.875rem 0.1875rem;
  border: 0;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-kachel);
  color: var(--bm-text-tag);
  font-family: var(--bm-font);
  font-size: var(--bm-t-meta);
  font-weight: var(--bm-g-normal);
  letter-spacing: var(--bm-sp-knopf);
  line-height: var(--bm-zh-kompakt);
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu.bm-neu a.chip:hover,
.bm-neu a.bm-chip:hover { background: var(--bm-linie); }

.bm-neu.bm-neu .showcase {
  background: var(--bm-kachel);
  color: var(--bm-text-leise);
  border-radius: 0;
  box-shadow: none;
}
.bm-neu.bm-neu hr,
.bm-neu .bm-trennlinie { border: 0; border-top: 1px solid var(--bm-linie); }

/* Anker-Leiste des Moduls „anker" (Übergang bis zur Modul-Welle D2):
   leiser Text, aktiver/Hover-Punkt als dunkle Pille */
.bm-neu.bm-neu nav[aria-label='Auf dieser Seite'] a {
  border-radius: var(--bm-radius-pille);
  padding: 0.5rem 1rem 0.375rem;
  font-size: var(--bm-t-nav);
  font-weight: var(--bm-g-normal);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text-leise);
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease-linear), color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu.bm-neu nav[aria-label='Auf dieser Seite'] a:hover {
  background: var(--bm-flaeche-dunkel);
  color: var(--bm-text-invers);
}

/* ════════════════════════════════════════════════════════════════════════
   7. Formularfelder (neues Vorbild-Template: gefüllt, Radius 12)
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu.bm-neu .input,
.bm-neu.bm-neu form :where(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea),
.bm-neu .bm-feld {
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 0.8125rem 1.125rem 0.6875rem;
  background-color: var(--bm-bg-kuehl);
  border: 1px solid var(--bm-linie-feld);   /* Feldgrenze ≥ 3:1 (P1-I; vorher --bm-linie-zart 1,2:1) */
  border-radius: var(--bm-radius-feld);
  font-family: var(--bm-font);
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease-linear), background-color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu.bm-neu :is(.input, form input, form select, form textarea, .bm-feld):hover { border-color: var(--bm-text-tag); }
.bm-neu.bm-neu :is(.input, form input, form select, form textarea, .bm-feld):focus {
  outline: none;
  border-color: var(--bm-text);
  background-color: var(--bm-bg);
}
.bm-neu.bm-neu :is(.input, form input, form select, form textarea, .bm-feld):focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz, 2px);
  --tw-ring-shadow: 0 0 #0000;          /* Tailwind-Ring-Reset (technisch) */
}
.bm-neu.bm-neu :is(.input, form input, form textarea, .bm-feld)::-moz-placeholder { color: var(--bm-text-faint); opacity: 1; }
.bm-neu.bm-neu :is(.input, form input, form textarea, .bm-feld)::placeholder { color: var(--bm-text-faint); opacity: 1; }   /* 5,36:1 auf Rosé (Feldgrund), 5,37 auf dem Grund (P1-I) */
.bm-neu.bm-neu :is(.label, form label) {
  font-family: var(--bm-font);
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-normal);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text-leise);
}
.bm-neu.bm-neu input[type='checkbox'],
.bm-neu.bm-neu input[type='radio'] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--bm-flaeche-dunkel);
}
/* Fehler nie nur über Farbe: der Rand wird zusätzlich doppelt so stark
   (Fehlerrot liegt im Ton neben der Signalfarbe). Meldungstext und Zeichen
   setzt der jeweilige Formularbaustein. */
.bm-neu.bm-neu :is(input, select, textarea, .bm-feld)[aria-invalid='true'] {
  border-color: var(--bm-fehler);
  box-shadow: inset 0 0 0 1px var(--bm-fehler);
}

/* Selects: eigener Chevron. In Formularen als Feld, außerhalb (Filter) als
   weiße Pille nach Vorbild Referenzen-Filter. */
.bm-neu.bm-neu select,
.bm-neu select.bm-feld {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  padding-right: 3rem;
  /* Pfeil als Daten-URI: Variablen wirken darin nicht – Strichfarbe #0F1011
     entspricht --bm-text und muss bei einer Umstellung der Tinte von Hand
     mitgezogen werden (einzige feste Farbe dieser Datei). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F1011' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  cursor: pointer;
}
.bm-neu.bm-neu select:not(form select) {
  height: auto;
  min-height: 44px;
  padding: 0.625rem 3rem 0.5rem 1.25rem;
  background-color: var(--bm-bg);
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-gross);
  font-family: var(--bm-font);
  font-size: var(--bm-t-fest);
  color: var(--bm-text);
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu.bm-neu select:not(form select):hover { border-color: var(--bm-text); }
.bm-neu.bm-neu select:not(form select):focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }

/* ════════════════════════════════════════════════════════════════════════
   8. Sektionsflächen
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-flaeche-hell { background: var(--bm-bg); color: var(--bm-text); }
.bm-neu .bm-flaeche-kuehl { background: var(--bm-bg-kuehl); color: var(--bm-text); }
.bm-neu .bm-flaeche-alt { background: var(--bm-bg-alt); color: var(--bm-text); }
.bm-neu .bm-flaeche-verlauf {
  background: var(--bm-verlauf-hell), var(--bm-bg);
  color: var(--bm-text);
}
/* Karten auf kühler/alternativer Fläche werden weiß */
.bm-neu.bm-neu :is(.bm-flaeche-kuehl, .bm-flaeche-alt, .bm-flaeche-verlauf) :is(.card, .bm-kasten) { background: var(--bm-bg); }

/* Dunkle Fläche (Hero, Ergebnis-Block, CTA-Box). Die alte q-grad-Fläche
   (Modul cta) wird zur dunklen Box mit großem Radius. */
.bm-neu .bm-flaeche-dunkel,
.bm-neu.bm-neu .q-grad {
  background: var(--bm-flaeche-dunkel);
  color: var(--bm-text-invers);
}
.bm-neu.bm-neu .q-grad.rounded-3xl { border-radius: var(--bm-radius-gross); }
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.t-hero, .t-h2, .t-h3, .t-h4, .t-num, .t-giant, .t-lead, .text-ink, .q-grad-text) {
  color: var(--bm-text-invers);
}
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.t-sub, .text-muted) { color: var(--bm-text-invers-ruhig); }
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) .text-faint { color: var(--bm-text-invers-leise); }
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.border-line, .border-line-strong) { border-color: var(--bm-linie-invers); }
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.card, .bm-kasten) { background: var(--bm-karte-dunkel); color: var(--bm-text-invers); }
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.card-hover, .bm-kasten--link):hover { background: var(--bm-dunkel-erhaben); }
/* Auf Dunkel: Text NEBEN dem Kreis, im Kreis ein Pfeil (wie im CTA-Band),
   damit der Kreis nicht als leere Scheibe neben dem Text steht (SP2-M1).
   Knopfhöhe = Kreis; Innenabstand rechts wie links vom Text. */
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.btn-outline, .bm-knopf--punkt) {
  color: var(--bm-text-invers);
  min-height: var(--bm-knopf-punkt);
  padding-left: calc(var(--bm-knopf-punkt) + 1rem);   /* Text neben dem Kreis (s. Abschnitt 4) */
  padding-right: 1.5rem;
}
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.btn-outline, .bm-knopf--punkt)::before { background: var(--bm-signal); }
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.btn-outline, .bm-knopf--punkt)::after {
  content: '→';
  content: '→' / '';
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--bm-knopf-punkt);
  translate: 0 -50%;
  text-align: center;
  color: var(--bm-signal-text);
  font-size: 1.375rem;
  font-weight: var(--bm-g-normal);
  line-height: 1;
  transition: transform var(--bm-dauer) var(--bm-ease);
}
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.btn-outline, .bm-knopf--punkt):is(:hover, :focus-visible)::after {
  transform: translateX(var(--bm-bewegung-pfeil));
}
.bm-neu.bm-neu :is(.bm-flaeche-dunkel, .q-grad) :is(.btn-outline, .bm-knopf--punkt):is(:hover, :focus-visible) { color: var(--bm-signal-text); }
/* Fokusrahmen je Fläche (P3-I): Die Flächen setzen den Schalter --bm-fokus
   (tokens.css). Dunkle Flächen → heller Rahmen, helle und Signalflächen →
   dunkler Rahmen. Helle Flächenklassen setzen ihn ausdrücklich zurück, damit
   eine helle Fläche IN einer dunklen wieder den dunklen Rahmen bekommt.
   .bm-fokus-dunkel/-hell/-signal: dieselbe Umschaltung für Flächen, die
   keine der Flächenklassen tragen (Bildbühnen, eigene Bänder). */
.bm-neu :is(.bm-flaeche-dunkel, .q-grad, .bm-umkehr, .bm-fokus-dunkel) {
  --bm-fokus: var(--bm-fokus-auf-dunkel);
  --bm-fokus-gegen: var(--bm-fokus-auf-hell);
}
.bm-neu :is(.bm-flaeche-hell, .bm-flaeche-kuehl, .bm-flaeche-alt, .bm-flaeche-verlauf, .bm-fokus-hell) {
  --bm-fokus: var(--bm-fokus-auf-hell);
  --bm-fokus-gegen: var(--bm-fokus-auf-dunkel);
}
.bm-neu .bm-fokus-signal {
  --bm-fokus: var(--bm-fokus-auf-signal);
  --bm-fokus-gegen: var(--bm-fokus-auf-dunkel);
}

/* Zentrale Umkehrklasse (Z0-B): kehrt die Farb-Tokens für alle Nachfahren
   um, damit Bausteine, die --bm-bg/-text/-text-leise/-linie/-linie-zart
   lesen, auf dunkler Fläche lesbar bleiben (z. B. „Weitere Projekte“ im Case).
   Malt die Fläche selbst in --bm-flaeche-dunkel; --bm-bg wird zum Kartengrund
   --bm-dunkel. Nicht umgekehrt werden die Tailwind-Brücke (--c-*), die
   Kanalformen (--bm-*-rgb) und daraus abgeleitete Tokens (Schatten, Glas). */
.bm-neu .bm-umkehr {
  --bm-bg: var(--bm-dunkel);
  --bm-text: var(--bm-text-invers);
  --bm-text-leise: var(--bm-text-invers-leise);
  --bm-linie: var(--bm-linie-invers);
  --bm-linie-zart: var(--bm-linie-invers);
  background: var(--bm-flaeche-dunkel);
  color: var(--bm-text-invers);
}

/* ════════════════════════════════════════════════════════════════════════
   9. Typo-Hilfsklassen für eigene Bausteine (ohne alte Schicht)
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu :is(.bm-titel-1, .bm-titel-2, .bm-titel-3, .bm-titel-4) {
  letter-spacing: var(--bm-sp-leicht);
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
.bm-neu .bm-titel-1 { font-size: var(--bm-t-h1); line-height: var(--bm-zh-snug); }
.bm-neu .bm-titel-2 { font-size: var(--bm-t-h2); line-height: var(--bm-zh-snug); }
.bm-neu .bm-titel-3 { font-size: var(--bm-t-h3); line-height: var(--bm-zh-titel); }
.bm-neu .bm-titel-4 { font-size: var(--bm-t-h4); line-height: var(--bm-zh-titel); }
.bm-neu .bm-lead { font-size: var(--bm-t-lead); line-height: var(--bm-zh-lang); }
.bm-neu .bm-fliesstext { font-size: var(--bm-t-body); line-height: var(--bm-zh-text); color: var(--bm-text-leise); }
.bm-neu .bm-flaeche-dunkel .bm-fliesstext { color: var(--bm-text-invers-ruhig); }
.bm-neu .bm-ziffer {
  font-family: var(--bm-font-ziffer);
  font-size: var(--bm-t-ziffer);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-ziffer);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   10. Bewegung: Einblendungen, Lade-Puls
   ════════════════════════════════════════════════════════════════════════ */
/* Einblendungen, Hover-Heben, Pfeile, Druckgefühl, Seitenblende: eigene
   Schicht bewegung.css (PL-1). */
/* Gemeinsamer Puls für Lade-Skelette: Klasse .bm-skelett oder
   animation: bm-skelett-puls var(--bm-dauer-puls) var(--bm-ease) infinite alternate */
@keyframes bm-skelett-puls { from { opacity: 1; } to { opacity: 0.45; } }
.bm-neu .bm-skelett { animation: bm-skelett-puls var(--bm-dauer-puls) var(--bm-ease) infinite alternate; }

/* ════════════════════════════════════════════════════════════════════════
   11. Reduzierte Bewegung
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bm-neu .bm-skelett { animation: none; }
  .bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost, .card-hover, .chip, .input, .bm-link-pfeil, .bm-kasten--link, [class*='bm-knopf--']),
  .bm-neu.bm-neu :is(.btn-outline, .bm-knopf--punkt, .bm-link-pfeil)::before,
  .bm-neu.bm-neu :is(.btn-primary, .bm-knopf--signal, .btn-outline, .bm-knopf--punkt)::after {
    transition: none;
  }
  .bm-neu.bm-neu :is(.btn-primary, .bm-knopf--signal):hover,
  .bm-neu.bm-neu :is(.btn-outline, .bm-knopf--punkt)::after { transform: none; }
  .bm-neu.bm-neu :is(.btn, .btn-primary, .btn-outline, .btn-ghost, [class*='bm-knopf--']):active { scale: none; }
}
/* Website-Grundstile, nur innerhalb von .bm-neu */

/* Die Tokens liegen auf :root – so lesen html (Scrollbar), JS (bewegung.ts),
   Website (.bm-neu) und Kundenportal (.bm-portal) dieselben Werte, ohne
   :has() am Wurzelelement. .bm-neu/.bm-portal wiederholen den Block, damit die
   Ableitungen dort frisch aus den --kern-*-Grundwerten rechnen. Die
   Website-GRUNDSTILE (basis.css) hängen weiter nur an .bm-neu; im Portal
   greifen sie nicht. */
:root,
.bm-neu,
.bm-portal {
  /* ── Farben ─────────────────────────────────────────────────────────── */
  /* Grundwerte: alle aus /design/kern.css (dort umstellen, nicht hier) */
  --bm-bg: var(--kern-bg-warm);                       /* Grund, Karten */
  --bm-bg-alt: var(--kern-bg-sand);                /* Karteninhalt, Tags (sz gray-50) */
  --bm-bg-kuehl: var(--kern-bg);                   /* Wechselsektionen, Formularfelder: Reinweiß (Rosé entfällt, Alexander 04.10.2026) */
  --bm-bg-weiss: var(--kern-bg);                   /* reines Weiß: schwebende Bedienflächen auf dem warmen Grund (Bühnen-Umschalter, Kontakt-Karte; M-N1 nach mercedes-benz.de). Auf Weiß halten die warmen Töne mehr als auf dem Grund (Grund zu Weiß 1,10:1) */
  --bm-kachel: var(--kern-kachel-sand);                 /* Kacheln, Chips, zarte Linie (sz gray-100) */
  --bm-text: var(--kern-text);                     /* Überschriften, Primärtext */
  /* P1-I (27.09.2026): warme Text- und Linientöne (abgeleitet in kern.css);
     die kühlen --kern-text-leise/-faint/-zart/-tag, --kern-text-invers-ruhig
     und --kern-linie-invers bleiben dem Cockpit. Messwerte: docs/qa/p1-i.md */
  --bm-text-leise: var(--kern-text-warm-leise); /* Fließtext: 5,37:1 Grund, 5,78 Sand, 5,36 Rosé, 4,80 Kachel-Sand */
  --bm-text-faint: var(--kern-text-warm-leise); /* leiser Text der alten Schicht, Platzhalter: wie -leise (≥ 4,5:1) */
  --bm-text-zart: var(--kern-text-warm-zart); /* nur dekorativ, große Schrift (≥ 24 px), Grafik: 3,46:1 Grund, 3,72 Sand, 3,45 Rosé, 3,09 Kachel-Sand */
  --bm-text-tag: var(--kern-text-warm-tag); /* Chip-Text: 6,80:1 Grund, 7,31 Sand, 6,78 Rosé, 6,08 Kachel-Sand */
  --bm-text-invers: var(--kern-text-invers);
  --bm-text-invers-leise: var(--kern-text-invers-warm-leise); /* leiser Text auf Dunkel (8,54:1 Nacht, 8,36 Karte dunkel, 8,32 Zweitfarbe) */
  --bm-text-invers-ruhig: var(--kern-text-invers-warm); /* Fließtext auf Dunkel (18,67:1 Nacht, 17,74 Karte dunkel, 17,62 Zweitfarbe) */
  --bm-linie: var(--kern-linie-sand); /* starke Linie (Akkordeon, FAQ), Schmuck: 1,41:1 auf dem Grund */
  --bm-linie-zart: var(--kern-linie-sand-zart);         /* Standardlinie, dekorativ */
  --bm-linie-feld: var(--kern-linie-feld); /* Rand von Feldern und Bedienelementen auf Hell: 3,46:1 Grund, 3,72 Sand, 3,45 Rosé, 3,09 Kachel-Sand */
  --bm-linie-invers: var(--kern-linie-invers-warm);     /* Trennlinie auf Dunkel, dekorativ */
  --bm-linie-invers-stark: var(--kern-linie-invers-stark); /* Rand von Bedienelementen auf Dunkel (3,46:1 Nacht, 3,53 Karte dunkel, 3,52 Zweitfarbe) */

  /* Fokusrahmen (P3-I): feste Werte je Flächenart. Bausteine lesen NICHT
     diese drei, sondern den Schalter --bm-fokus (unten, nach diesem Block). */
  --bm-fokus-auf-hell: var(--kern-fokus); /* 17,30:1 Grund, 18,59 Sand, 17,24 Rosé, 15,46 Kachel-Sand */
  --bm-fokus-auf-dunkel: var(--kern-fokus-invers); /* 20,56:1 Nacht, 20,17 Dunkel, 19,54 Karte dunkel, 19,40 Zweitfarbe */
  --bm-fokus-auf-signal: var(--kern-fokus-signal); /* 6,21:1 Signal, 7,76 Pol */
  --bm-fokus-breite: 2px;
  --bm-fokus-versatz-innen: calc(-1 * var(--bm-fokus-breite)); /* Rahmen liegt innen an der Kante des Elements */

  /* Zustände. Fehlerrot liegt neben der Koralle: nie nur über Farbe zeigen
     (Text und Zeichen dazu). Auf Hell die dunklen Ableitungen (≥ 4,5:1 auf
     allen hellen Flächen), auf Dunkel die -hell-Töne. */
  --bm-fehler: var(--kern-fehler-klar); /* Fehlertext und -rand auf Hell: 6,56:1 Grund, 7,05 Sand, 6,54 Rosé, 5,86 Kachel-Sand */
  --bm-fehler-hell: var(--kern-fehler-hell); /* Fehler auf Dunkel (8,85:1 auf Nacht); von Signal-licht nicht zu trennen (1,08:1) → immer mit Zeichen und Text */
  --bm-fehler-hell-klar: var(--kern-fehler-hell-klar); /* VORSCHLAG (P2-I): hellerer Fehlerton auf Dunkel, zu Signal-licht 1,64:1; 13,53:1 auf Nacht. Noch von keinem Baustein der Website gelesen */
  --bm-erfolg: var(--kern-erfolg-tief); /* 5,74:1 Grund, 6,17 Sand, 5,72 Rosé, 5,13 Kachel-Sand */
  --bm-erfolg-hell: var(--kern-erfolg-hell);
  --bm-warnung: var(--kern-warnung-tief); /* 5,79:1 Grund, 6,22 Sand, 5,77 Rosé, 5,17 Kachel-Sand */
  --bm-warnung-hell: var(--kern-warnung-hell);
  --bm-info: var(--kern-info-tief); /* 5,98:1 Grund, 6,43 Sand, 5,96 Rosé, 5,35 Kachel-Sand */
  --bm-info-hell: var(--kern-info-hell);

  /* Signalfarbe (Quelle: --kern-signal) und ihre Ableitungen */
  --bm-signal: var(--kern-signal);                 /* Fläche; Text darauf immer --bm-signal-text */
  --bm-signal-hell: var(--kern-signal-hell);       /* Hover auf Signal */
  --bm-signal-verlauf: var(--kern-signal-verlauf); /* Signal → Pol: Primärknöpfe, Fortschrittsleiste, aktive Flächen; Text darauf --bm-signal-text */
  --bm-signal-verlauf-hover: var(--kern-signal-verlauf-hover); /* Verlauf mit Hover-Schleier (statisch) */
  --bm-signal-schleier: var(--kern-signal-schleier); /* Hover-Schleier über Signal/Verlauf (Pseudo-Element, Deckkraft animieren) */
  --bm-signal-kontur: var(--kern-signal-kontur); /* Signal mit ≥ 3:1 auf Hell (5,26:1 auf dem Grund): Knopfkontur, Markierungslinien (aktiv/Hover) */
  --bm-signal-licht: var(--kern-signal-licht);     /* Akzenttext/Icons/Linien auf Dunkel */
  --bm-signal-kreis: var(--kern-signal-kreis);     /* ruhender Kreis der Kreis-Punkt-Pille auf Hell, Tinte liegt darüber */
  --bm-signal-zart: var(--kern-signal-zart);       /* ruhige Signalfläche auf Hell, dunkle Schrift */
  --bm-signal-dunkel: var(--kern-signal-dunkel); /* Akzenttext/Icons auf Hell (8,32:1 auf dem Grund) */
  --bm-signal-tief: var(--kern-signal-tief); /* Akzenttext/Icons auf Hell, eine Stufe heller (6,91:1 auf dem Grund) */
  --bm-signal-glow: var(--kern-signal-glow);
  --bm-signal-text: var(--kern-signal-text);       /* Text auf Signal */

  /* Dunkeltöne (Quelle: --kern-dunkel, -flaeche-dunkel, -karte-dunkel).
     Schleier und „erhaben“ leiten sich von --bm-dunkel ab. */
  --bm-zweit: var(--kern-zweit); /* Zweitfarbe (sehr dunkles Mitternachtsblau): Sekundärknöpfe */
  --bm-dunkel: var(--kern-dunkel);                 /* Footer, Basis der Schleier */
  --bm-flaeche-dunkel: var(--kern-flaeche-dunkel); /* dunkle Sektionen/Hero (sz ink) */
  --bm-karte-dunkel: var(--kern-karte-dunkel);     /* Karte auf Dunkel (sz ink-2) */
  --bm-dunkel-erhaben: color-mix(in srgb, var(--kern-karte-dunkel) 94%, var(--kern-bg-warm)); /* ≈ #171928: Footer-Rechtsleiste, Karten-Hover auf Dunkel (zu Nacht 1,18:1, zur Karte 1,12:1; Weiß darauf 17,43:1). P1-I: --kern-dunkel-erhaben ist vom Grund nicht zu unterscheiden */
  --bm-schatten-farbe: var(--kern-schatten-tief); /* Schattenton: Zweitfarbe mit Tinte statt Blaugrau */

  /* Glas auf Dunkel (Knöpfe, Steuerung über Bildern) */
  --bm-glas: color-mix(in srgb, var(--bm-text-invers) 12%, transparent);
  --bm-glas-hover: color-mix(in srgb, var(--bm-text-invers) 18%, transparent);
  --bm-glas-kante: color-mix(in srgb, var(--bm-text-invers) 45%, transparent);

  /* Bildschleier (Lesbarkeit von Text auf Fotos), alle aus --bm-dunkel */
  --bm-schleier-leicht: color-mix(in srgb, var(--bm-dunkel) 45%, transparent);
  --bm-schleier-mittel: color-mix(in srgb, var(--bm-dunkel) 55%, transparent);
  --bm-schleier-stark: color-mix(in srgb, var(--bm-dunkel) 82%, transparent);
  --bm-schleier-dicht: color-mix(in srgb, var(--bm-dunkel) 90%, transparent);

  /* Verlauf »Farbspiel« (P2-I) – VORSCHLAG, Werte und Messung in
     /design/kern.css. Tiefe ist Mitternachtsblau, nicht Pflaume. */
  --bm-pfirsich: var(--kern-pfirsich); /* heller Pol der warmen Reihe; Schrift darauf dunkel (11,00:1), nie hell */
  --bm-verlauf-morgen: var(--kern-verlauf-morgen); /* Rosé → Pfirsich → Koralle, hell; Schrift --bm-verlauf-morgen-text (mindestens 6,21:1) */
  --bm-verlauf-morgen-text: var(--kern-verlauf-morgen-text);
  --bm-verlauf-abend: var(--kern-verlauf-abend); /* Pfirsich → Koralle → Mitternachtsblau; Text hell in der Tiefe (ab 50,5 %) oder dunkel im warmen Anfang (bis 48,5 %) */
  --bm-verlauf-abend-text: var(--kern-verlauf-abend-text); /* helle Schrift in der Tiefe */
  --bm-verlauf-abend-text-warm: var(--kern-verlauf-abend-text-warm); /* dunkle Schrift im warmen Anfang */
  --bm-schleier-bild: var(--kern-schleier-bild); /* Verlaufsschleier für helle Schrift über Bildern, Text in den unteren 40 % (Weiß ≥ 13,04:1) */
  --bm-schleier-bild-hell: var(--kern-schleier-bild-hell); /* Verlaufsschleier für dunkle Schrift über Bildern (Zweitfarbe ≥ 12,80:1) */

  /* Heller Flächenverlauf (.bm-flaeche-verlauf, sz Branche) */
  --bm-verlauf-hell: linear-gradient(153.9deg, color-mix(in srgb, var(--bm-bg) 40%, transparent) 19.53%, color-mix(in srgb, var(--kern-signal-zart) 60%, transparent) 74.81%);

  /* Kanalformen für die Tailwind-Brücke (basis.css: --c-* = var(--bm-*-rgb)).
     Abgeleitet per relativer Farbsyntax – KEINE Zahlen pflegen. Nur so
     verwenden: rgb(var(--bm-…-rgb)) oder rgb(var(--bm-…-rgb) / 0.5),
     nie rgba(var(…), a). */
  --bm-signal-rgb: var(--kern-signal-rgb);
  --bm-text-rgb: var(--kern-text-rgb);
  --bm-text-leise-rgb: var(--kern-text-warm-leise-rgb);
  --bm-text-faint-rgb: var(--kern-text-warm-leise-rgb);
  --bm-text-zart-rgb: var(--kern-text-warm-zart-rgb);
  --bm-bg-rgb: var(--kern-bg-warm-rgb);
  --bm-kachel-rgb: var(--kern-kachel-sand-rgb);   /* P1-I: vorher die kühle Kachel #e7ecf3 */

  /* ── Schrift ────────────────────────────────────────────────────────── */
  /* Familien: Quelle /design/kern.css (Dateien: /design/schriften.css). */
  --bm-font: var(--kern-font);
  --bm-font-titel: var(--kern-font-titel);      /* Überschriften der Website */
  --bm-font-ziffer: var(--kern-font-ziffer);
  /* Größenleiter, eine Kurve je Stufe (Werte bei 390 → 1440 → Deckel).
     TY-1 (27.09.2026): feiner und enger gestaffelt – Vorher/Nachher:
     docs/positionierung/design/typo.md. */
  --bm-t-riesig: clamp(2.75rem, 4.4vw, 4.5rem);          /* 44 → 63 → 72: große Zahlen, Portfolio-Bühne, 404 */
  --bm-t-display: clamp(2rem, 3vw, 3.25rem);             /* 32 → 43 → 52: große H2 (Start, Footer) */
  --bm-t-buehne: clamp(2.5rem, 3.6vw, 4rem);             /* 40 → 52 → 64: H1 der Startbühne */
  --bm-t-h1: clamp(2.25rem, 3.2vw, 3.5rem);              /* 36 → 46 → 56: H1 der Inhaltsseiten */
  --bm-t-zwischen: clamp(1.75rem, 2.7vw, 2.75rem);       /* 28 → 39 → 44: Zwischengröße (Spotlight, t-giant) */
  --bm-t-h2: clamp(1.75rem, 2.4vw, 2.5rem);              /* 28 → 35 → 40 */
  --bm-t-h3: clamp(1.25rem, 1.6vw, 1.5rem);              /* 20 → 23 → 24 */
  --bm-t-kartentitel: clamp(1.125rem, 1.4vw, 1.375rem);  /* 18 → 20 → 22: Titel in Karten/Akkordeon */
  --bm-t-h4: clamp(1.125rem, 1.3vw, 1.25rem);            /* 18 → 19 → 20 */
  --bm-t-lead: clamp(1.125rem, 1rem + 0.25vw, 1.25rem);  /* 18 → 19,6 → 20: Lead/Subline */
  --bm-t-body: clamp(1rem, 0.95rem + 0.1vw, 1.0625rem);  /* 16 → 16,6 → 17: Fließtext */
  --bm-t-knopf: 0.9375rem;                               /* 15 px, Gewicht 500 */
  --bm-t-nav: 0.9375rem;                                 /* 15 px, Gewicht 400: Hauptnavigation, Menüeinträge */
  --bm-t-fest: 1rem;                                     /* 16 px fest (Kartentext, Felder) */
  --bm-t-klein: 0.875rem;                                /* 14 px */
  --bm-t-meta: 0.8125rem;                                /* 13 px: Metatext, Gruppentitel */
  --bm-t-ziffer: 0.8125rem;                              /* 13 px DM Sans (Nummern) */
  --bm-t-mini: 0.75rem;                                  /* 12 px (Chips, Kennzeichen) */
  --bm-g-fett: var(--kern-g-fett);       /* nur echte Auszeichnung (Ziffern) */
  --bm-g-mittel: var(--kern-g-mittel);   /* Bedienelemente: Knöpfe, Chips, Spaltentitel */
  --bm-g-normal: var(--kern-g-normal);   /* Fließtext, Navigation */
  --bm-g-titel: var(--kern-g-titel);
  /* Zeilenhöhen, 7 Stufen (Titelschrift: eng/snug/titel) */
  --bm-zh-eng: 1.08;             /* Display, große Zahlen */
  --bm-zh-snug: 1.12;            /* H1/H2 mehrzeilig */
  --bm-zh-titel: 1.2;            /* H3/H4, Kartentitel */
  --bm-zh-kompakt: 1.3;          /* Knöpfe, Chips, Labels, kurze Zeilen */
  --bm-zh-mittel: 1.5;           /* Listen, Felder, Kleintext */
  --bm-zh-lang: 1.55;            /* Lead, Aufzählungen */
  --bm-zh-text: 1.62;            /* Fließtext */
  /* Laufweiten (Titelschrift 0 bis −0,01em) */
  --bm-sp-riesig: -0.015em;      /* große Zahlen */
  --bm-sp-display: -0.01em;      /* Display-Größen */
  --bm-sp-eng: -0.01em;          /* große Titel */
  --bm-sp-leicht: -0.005em;      /* Titel mittlerer Größe */
  --bm-sp-titel: 0.01em;
  --bm-sp-knopf: 0.01em;         /* Knöpfe, Navigation */
  --bm-sp-ziffer: 0.14em;
  /* Zeilenlänge: Fließtext um 62–72 Zeichen, Titel schmaler */
  --bm-zeile-text: 68ch;
  --bm-zeile-titel: 22ch;

  /* ── Raster und Abstände ────────────────────────────────────────────── */
  --bm-rand: clamp(1.25rem, 5.2vw, 2.5rem);    /* 20 (390) → 40 ab 768 */
  --bm-sektion: clamp(4.5rem, 8.4vw, 7.5rem);  /* 72 (mobil) → 120 (TY-1: mehr Luft; vorher 60 → 80) */
  --bm-sektion-halb: calc(var(--bm-sektion) / 2);
  --bm-titel-abstand: clamp(1.75rem, 3vw, 3rem); /* Überschrift → Inhalt einer Sektion */
  --bm-luecke: clamp(0.5rem, 1vw, 1rem);
  --bm-raster-luecke: 1.5rem;                  /* 24 px Kartenraster (vorher 20) */
  --bm-arbeiten-luecke: clamp(1.25rem, 4vw, 2rem); /* 20 (390) → 32 ab 800: Raster der Übersicht „Arbeiten“ (29.09.2026) */
  --bm-textbreite: 42rem;                      /* ≈ 68 Zeichen Fließtext (vorher 46rem) */
  --bm-inhalt-max: 1440px;                     /* Inhaltsbreite (Alexander 13.10.2026: wieder breiter, 1440 mit seitlichem Rand; davor 1200) */
  --bm-rahmen-max: calc(var(--bm-inhalt-max) + 2 * var(--bm-rand)); /* Kopf/Footer: Inhalt + Rand (1280 ab 768) */
  --bm-kopf-h: 60px;                           /* Kopfhöhe (13.10.2026 höher): 60 → 68 (ab 1024) → 72 (ab 1440); früher 56/60/64, Stufen unten (M-K 30.09.2026 nach mercedes-benz.de; vorher 64/72/80) */

  /* ── Formen ─────────────────────────────────────────────────────────── */
  /* Grundrundungen: Quelle /design/kern.css */
  --bm-radius: var(--kern-radius);               /* Referenzen/Bilder (red-Prinzip): eckig */
  --bm-radius-klein: var(--kern-radius-klein);   /* Felder, Anker-Pillen innen */
  --bm-radius-mittel: var(--kern-radius-mittel); /* Karten der Seitenmodule */
  --bm-radius-gross: var(--kern-radius-gross);   /* große Flächen: CTA-Box, Spotlight, Filter-Select */
  --bm-radius-pille: var(--kern-radius-pille);   /* Knöpfe, Chips */
  --bm-radius-feld: var(--bm-radius-klein);
  --bm-radius-karte: var(--bm-radius-mittel);
  --bm-knopf-hoehe: 48px;        /* TY-1: vorher 60 */
  --bm-knopf-klein: 40px;        /* kleiner Knopf, Kopf-Werkzeuge (Tippfläche per Rand 44) */
  --bm-knopf-punkt: 44px;        /* Kreis des Kreis-Punkt-Knopfs (TY-1: vorher 54) */
  --bm-schatten-karte: 0 16px 32px color-mix(in srgb, var(--bm-schatten-farbe) 15%, transparent);
  --bm-schatten-schwebend: 0 16px 64px color-mix(in srgb, var(--bm-schatten-farbe) 15%, transparent);
  --bm-schatten-kopf: 0 0 8px color-mix(in srgb, var(--bm-schatten-farbe) 24%, transparent);
  --bm-schatten-glow: 0 8px 20px var(--bm-signal-glow);

  /* ── Ebenen (z-index) ───────────────────────────────────────────────── */
  --bm-z-anker: 40;              /* Anker-Leiste (sticky) */
  --bm-z-kopf: 50;               /* fester Kopf */
  --bm-z-mega: 1;                /* Mega-Panel, innerhalb des Kopf-Stapels */
  --bm-z-fortschritt: 60;        /* Scroll-Fortschrittsleiste */
  --bm-z-sprung: 60;             /* Sprungmarke „Zum Inhalt“ */
  --bm-z-menue: 9999;            /* Mobil-Menü. Das Anmerkungstool liegt bewusst darüber (10000+) */

  /* ── Bewegung ───────────────────────────────────────────────────────── */
  /* JS-Timer lesen diese Werte über src/site/design/bewegung.ts.
     Grundtempo und -kurve: Quelle /design/kern.css; Sonderdauern hier. */
  --bm-ease: var(--kern-ease);               /* Standardkurve */
  --bm-ease-linear: var(--kern-ease-linear); /* Farbwechsel (sz) */
  --bm-dauer-kurz: var(--kern-dauer-kurz);   /* schnell */
  --bm-dauer: var(--kern-dauer);             /* normal */
  --bm-dauer-langsam: var(--kern-dauer-langsam); /* langsam */
  --bm-dauer-auftritt: 1.1s;                 /* erster Auftritt (Start-Bühne) */
  --bm-versatz: 0.15s;                       /* Staffelung von Auftritten */
  --bm-dauer-puls: 1.6s;                     /* Lade-Skelett */
  --bm-dauer-laufband: 60s;                  /* Laufband (Technologien) */
  --bm-laufband-takt: 5s;                    /* Laufband je Logo */
  --bm-takt-slider: 5s;                      /* automatischer Weiterlauf */
  --bm-kopf-dauer: var(--bm-dauer-kurz);     /* Kopf ein/aus, Fläche (sz .25s linear) */
  --bm-kopf-ease: var(--bm-ease-linear);
  --bm-menue-dauer: var(--bm-dauer);         /* Mobil-Menü (sz .5s ease-in-out) */
  --bm-menue-ease: ease-in-out;
}
/* ── Fokusrahmen je Fläche (P3-I, 27.09.2026) ─────────────────────────────
   EIN Schalter: --bm-fokus trägt die Rahmenfarbe der Fläche, auf der ein
   Element steht; --bm-fokus-gegen die Gegenfarbe (zweiter Ring bei Rahmen
   über Bildern). Jede Fokusregel schreibt
     outline: var(--bm-fokus-breite) solid var(--bm-fokus);
     outline-offset: var(--bm-fokus-versatz, 3px);
   und nennt keine Farbe mehr selbst. Der Rahmen liegt AUSSEN am Element –
   maßgeblich ist deshalb die Fläche um das Element, nicht seine eigene.
   Der Schalter steht bewusst nur auf :root und NICHT im Block oben: Bausteine
   tragen .bm-neu auch verschachtelt (Karten, Raster) und würden den Wert
   einer dunklen Fläche sonst wieder auf Hell zurücksetzen.
   Flächen setzen ihn um: basis.css Abschnitt 8 (.bm-flaeche-*, .q-grad,
   .bm-umkehr, .bm-fokus-dunkel/-hell/-signal). Eine Fläche ohne diese
   Klassen setzt in ihrer eigenen Regel
     --bm-fokus: var(--bm-fokus-auf-dunkel); --bm-fokus-gegen: var(--bm-fokus-auf-hell);
   --bm-fokus-versatz ist auf :root NICHT gesetzt (der Rückfallwert der
   Regel gilt); Behälter mit overflow, an deren Kante Ziele bündig sitzen,
   setzen ihn auf --bm-fokus-versatz-innen (Klasse .bm-fokus-innen). */
:root {
  --bm-fokus: var(--bm-fokus-auf-hell);
  --bm-fokus-gegen: var(--bm-fokus-auf-dunkel);
}
.bm-neu .bm-fokus-innen { --bm-fokus-versatz: var(--bm-fokus-versatz-innen); }

/* Kundenportal: behält die Laufweiten vor TY-1 (portal.css liest nur diese
   beiden Typo-Tokens; das Portal bleibt unverändert). */
.bm-portal {
  --bm-sp-leicht: -0.01em;
  --bm-sp-knopf: 0.02em;
}
@media (min-width: 1024px) {
  :root, .bm-neu, .bm-portal { --bm-kopf-h: 68px; }
}
@media (min-width: 1440px) {
  :root, .bm-neu, .bm-portal { --bm-kopf-h: 72px; }
}

.bm-neu {
  background: var(--bm-bg);
  color: var(--bm-text);
  font-family: var(--bm-font);
}

/* Bewegungs-Schicht der Agentur-Website (PL-1, 27.09.2026) – Stufe „ruhig"
   aus docs/positionierung/design/award-technik.md. Katalog, Regeln und
   Anleitung: docs/positionierung/design/bewegung.md.

   Grundsätze
   - Dauern und Kurven nur aus den Tokens (--bm-dauer*, --bm-versatz,
     --bm-ease; Grundtempo in design/kern.css).
   - Wege und Maße der Bewegung stehen EINMAL hier (--bm-bewegung-*). Sie
     sind keine Design-Tokens (tokens.css), deshalb wenden nur Regeln in
     dieser Datei (und basis.css) sie an; Bausteine schalten Bewegung per
     Klasse bzw. Attribut ein, nicht per eigener Zahl.
   - Ausgangszustand ist immer „sichtbar". Verborgen wird nur per JS
     (data-bm-stand, lib/motion.tsx); ohne JS, im Prerender und im Druck
     steht alles da.
   - Tastaturfokus löst dieselben Zustände aus wie Hover.
   - „Bewegung reduzieren" schaltet alles ab (Abschnitt 9).
   Geladen von lib/motion.tsx und basis.css (Vite legt beides zusammen). */

:root {
  --bm-bewegung-versatz: 16px;      /* Weg des Auftritts (höchstens 16 px) */
  --bm-bewegung-heben: -4px;        /* Karte hebt sich bei Hover/Fokus */
  --bm-bewegung-zoom: 1.03;         /* Bild in Karte bei Hover/Fokus (höchstens 1,03) */
  --bm-bewegung-druck: 0.97;        /* Knopf beim Drücken (:active) */
  --bm-bewegung-pfeil: 0.25rem;     /* Pfeil wandert bei Hover/Fokus */
  --bm-bewegung-schatten: var(--bm-schatten-karte); /* Schatten der gehobenen Karte */
}

/* ════════════════════════════════════════════════════════════════════════
   1. Auftritt beim Einscrollen (data-bm-stand, gesetzt von lib/motion.tsx)
   Bausteine markieren sich mit data-auftritt (ein Element) bzw.
   data-auftritt-gruppe (die Kinder erscheinen gestaffelt); Rahmen.tsx
   bereitet sie nach jedem Seitenwechsel vor (site/design/regie.tsx).
   ════════════════════════════════════════════════════════════════════════ */
@keyframes bm-auftritt {
  from { opacity: 0; translate: 0 var(--bm-bewegung-versatz); }
}
@keyframes bm-linie-auf {
  from { scale: 0 1; }
}
[data-bm-stand='wartet'] {
  opacity: 0;
  translate: 0 var(--bm-bewegung-versatz);
}
[data-bm-stand='da'] {
  animation: bm-auftritt var(--bm-dauer-langsam) var(--bm-ease) backwards;
  animation-delay: calc(var(--bm-auftritt-i, 0) * var(--bm-versatz) + var(--bm-auftritt-verzug, 0ms));
}
/* Fokus in einem noch wartenden Element zeigt es sofort. */
[data-bm-stand='wartet']:focus-within { opacity: 1; translate: none; }

/* Linien, die sich mit dem Auftritt aufziehen (von links). */
.bm-neu .d2c-liste__kopf[data-bm-stand='wartet']::after,
.bm-neu .bm-kennzahl[data-bm-stand='wartet']::before { scale: 0 1; }
.bm-neu .d2c-liste__kopf[data-bm-stand='da']::after,
.bm-neu .bm-kennzahl[data-bm-stand='da']::before {
  transform-origin: left center;
  animation: bm-linie-auf var(--bm-dauer-langsam) var(--bm-ease) backwards;
  animation-delay: calc(var(--bm-auftritt-i, 0) * var(--bm-versatz) + var(--bm-dauer-kurz));
}

/* ════════════════════════════════════════════════════════════════════════
   2. Seitenwechsel: weiche Blende über die View Transitions API
   (regie.tsx startet sie nur, wenn document.startViewTransition existiert
   und keine reduzierte Bewegung gewünscht ist). Die alte Routen-Blende
   (RouteFade, index.css) pausiert, solange die Website sie übernimmt.
   ════════════════════════════════════════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--bm-dauer);
  animation-timing-function: var(--bm-ease);
}
html.bm-seitenblende .route-fade { animation: none; }

/* ════════════════════════════════════════════════════════════════════════
   3. Karten heben sich (Hover, Tastaturfokus, Fokus im Inneren)
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu :is(.bm-teaser--link, .bm-start-wissen-gross) {
  transition:
    background-color var(--bm-dauer) var(--bm-ease),
    color var(--bm-dauer) var(--bm-ease),
    transform var(--bm-dauer) var(--bm-ease),
    box-shadow var(--bm-dauer) var(--bm-ease);
}
.bm-neu :is(.bm-teaser--link, .bm-start-wissen-gross):is(:hover, :focus-visible) {
  transform: translateY(var(--bm-bewegung-heben));
  box-shadow: var(--bm-bewegung-schatten);
}
/* Leistungskarten der Startseite liegen in einer Scroll-Spur: heben ohne
   Schatten (die Spur würde ihn abschneiden). */
.bm-neu .bm-start-leistung:is(:hover, :focus-within) { transform: translateY(var(--bm-bewegung-heben)); }

/* Bild in der gehobenen Karte wächst leicht (Rahmen schneidet ab). */
.bm-neu :is(.bm-start-leistung-bild, .bm-start-wissen-bild) .bm-bild {
  transition: transform var(--bm-dauer-langsam) var(--bm-ease);
}
.bm-neu .bm-start-leistung:is(:hover, :focus-within) .bm-start-leistung-bild .bm-bild,
.bm-neu .bm-start-wissen-gross:is(:hover, :focus-visible) .bm-start-wissen-bild .bm-bild {
  transform: scale(var(--bm-bewegung-zoom));
}

/* ════════════════════════════════════════════════════════════════════════
   4. Pfeile wandern ein Stück (Hover und Tastaturfokus gleich)
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-link-pfeil::after,
.bm-neu :is(.bm-verweis__pfeil, .bm-pfeilkreis, .d2c-kreis svg,
  .bm-start-pfeillink-kreis, .bm-start-kreis-pfeil, .bm-start-wissen-zeilenpfeil) {
  transition-property: transform, background-color, color, border-color;
  transition-duration: var(--bm-dauer);
  transition-timing-function: var(--bm-ease);
}
.bm-neu .bm-link-pfeil:is(:hover, :focus-visible)::after,
.bm-neu .bm-verweis:is(:hover, :focus-visible) .bm-verweis__pfeil,
.bm-neu .bm-teaser--link:is(:hover, :focus-visible) .bm-pfeilkreis,
.bm-neu .d2c-liste__zeile:is(:hover, :focus-visible) .d2c-kreis svg,
.bm-neu .bm-start-pfeillink:is(:hover, :focus-visible) .bm-start-pfeillink-kreis,
.bm-neu .bm-start-kreis:is(:hover, :focus-visible) .bm-start-kreis-pfeil,
.bm-neu .bm-start-wissen-zeile:is(:hover, :focus-visible) .bm-start-wissen-zeilenpfeil {
  transform: translateX(var(--bm-bewegung-pfeil));
}
/* Menü und Hilfe (eigene Scopes, Portale). P2-I: .bm-mega__pfeil entfernt –
   kein Baustein setzt die Klasse mehr (Befund P2-Z). */
:is(.bm-hilfe__pfeil, .bm-mobilmenue__pfeil) {
  transition: transform var(--bm-dauer) var(--bm-ease), color var(--bm-dauer) var(--bm-ease);
}
.bm-mega__uebersicht:is(:hover, :focus-visible) svg,
.bm-hilfe__zeile:is(:hover, :focus-visible) .bm-hilfe__pfeil,
.bm-mobilmenue__eintrag:is(:hover, :focus-visible) .bm-mobilmenue__pfeil {
  transform: translateX(var(--bm-bewegung-pfeil));
}
.bm-mega__uebersicht svg { transition: transform var(--bm-dauer) var(--bm-ease); }

/* ════════════════════════════════════════════════════════════════════════
   5. Unterstriche ziehen auf (statt hart zu erscheinen)
   Ein Hintergrund-Strich in currentColor wächst von links; Farbe je
   Baustein über --bm-strich (Standard: Schriftfarbe).
   ════════════════════════════════════════════════════════════════════════ */
:is(.bm-fuss .bm-fuss__link, .bm-fuss .bm-fuss__recht a, .bm-fuss a.bm-fuss__spaltentitel, .bm-mega__uebersicht) {
  text-decoration: none;
  background-image: linear-gradient(var(--bm-strich, currentColor), var(--bm-strich, currentColor));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--bm-dauer) var(--bm-ease), color var(--bm-dauer-kurz) var(--bm-ease);
}
:is(.bm-fuss .bm-fuss__link, .bm-fuss .bm-fuss__recht a, .bm-fuss a.bm-fuss__spaltentitel, .bm-mega__uebersicht):is(:hover, :focus-visible) {
  text-decoration: none;
  background-size: 100% 1px;
}
.bm-fuss a.bm-fuss__spaltentitel { --bm-strich: var(--bm-signal-licht); }
.bm-fuss a.bm-fuss__spaltentitel:is(:hover, :focus-visible),
.bm-mega__uebersicht:is(:hover, :focus-visible) { background-size: 100% 2px; }
.bm-mega__uebersicht { --bm-strich: var(--bm-signal-kontur); padding-bottom: 0.25rem; }

/* ════════════════════════════════════════════════════════════════════════
   6. Knöpfe: weiches Druckgefühl (:active leicht kleiner)
   Die Knöpfe aus basis.css (btn-*, bm-knopf--*) regeln das dort in ihrer
   eigenen Übergangsliste; hier die übrigen.
   ════════════════════════════════════════════════════════════════════════ */
:is(.bm-kopf__kontakt, .bm-mobilmenue__kontakt, .bm-start-kreis, .bm-start-knopf,
  .bm-fuss__hoch, .bm-stimmen-pfeil, .bm-start-leistungen-pfeile button, .bm-start-hero-steuer,
  .bm-hilfe__zu) {
  transition:
    scale var(--bm-dauer-kurz) var(--bm-ease),
    transform var(--bm-dauer) var(--bm-ease),
    box-shadow var(--bm-dauer) var(--bm-ease),
    background-color var(--bm-dauer-kurz) var(--bm-ease),
    border-color var(--bm-dauer-kurz) var(--bm-ease),
    color var(--bm-dauer) var(--bm-ease),
    opacity var(--bm-dauer-kurz) var(--bm-ease);
}
:is(.bm-kopf__kontakt, .bm-mobilmenue__kontakt, .bm-start-kreis, .bm-start-knopf,
  .bm-fuss__hoch, .bm-stimmen-pfeil:not(:disabled), .bm-start-leistungen-pfeile button:not(:disabled),
  .bm-start-hero-steuer, .bm-hilfe__zu, .bm-hilfe__knopf):active {
  scale: var(--bm-bewegung-druck);
}

/* ════════════════════════════════════════════════════════════════════════
   7. Hochzählen der Kennzahlen (site/design/regie.tsx, Hochzaehler)
   Ziel- und Laufzahl liegen in derselben Rasterzelle: die Breite steht
   von Anfang an fest, nichts springt. Die echte Zahl bleibt im
   Accessibility-Baum (nur Deckkraft), die Laufzahl ist aria-hidden.
   ════════════════════════════════════════════════════════════════════════ */
.bm-zahl { display: inline-grid; }
.bm-zahl > * { grid-area: 1 / 1; }
.bm-zahl__lauf { visibility: hidden; }
.bm-zahl[data-zaehlt] .bm-zahl__ziel { opacity: 0; }
.bm-zahl[data-zaehlt] .bm-zahl__lauf { visibility: visible; }

/* ════════════════════════════════════════════════════════════════════════
   8. Druck: alles sichtbar
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  [data-bm-stand] { opacity: 1 !important; translate: none !important; animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   9. Bewegung reduzieren: aus
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-bm-stand],
  [data-bm-stand] *::before,
  [data-bm-stand] *::after,
  [data-bm-stand]::before {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .bm-neu :is(.bm-teaser--link, .bm-start-wissen-gross, .bm-start-leistung):is(:hover, :focus-visible, :focus-within),
  .bm-neu :is(.bm-start-leistung-bild, .bm-start-wissen-bild) .bm-bild,
  .bm-neu .bm-link-pfeil:is(:hover, :focus-visible)::after,
  .bm-neu :is(.bm-verweis__pfeil, .bm-pfeilkreis, .d2c-kreis svg, .bm-start-pfeillink-kreis,
    .bm-start-kreis-pfeil, .bm-start-wissen-zeilenpfeil),
  :is(.bm-hilfe__pfeil, .bm-mobilmenue__pfeil, .bm-mega__uebersicht svg) {
    transform: none !important;
  }
  .bm-neu .bm-link-pfeil::after,
  .bm-neu :is(.bm-teaser--link, .bm-start-wissen-gross, .bm-verweis__pfeil,
    .bm-pfeilkreis, .d2c-kreis svg, .bm-start-pfeillink-kreis, .bm-start-kreis-pfeil,
    .bm-start-wissen-zeilenpfeil, .bm-start-leistung-bild .bm-bild, .bm-start-wissen-bild .bm-bild),
  :is(.bm-hilfe__pfeil, .bm-mobilmenue__pfeil, .bm-mega__uebersicht svg,
    .bm-fuss .bm-fuss__link, .bm-fuss .bm-fuss__recht a, .bm-fuss a.bm-fuss__spaltentitel, .bm-mega__uebersicht,
    .bm-kopf__kontakt, .bm-mobilmenue__kontakt, .bm-start-kreis, .bm-start-knopf, .bm-fuss__hoch,
    .bm-stimmen-pfeil, .bm-start-leistungen-pfeile button, .bm-start-hero-steuer, .bm-hilfe__zu) {
    transition: none !important;
  }
  :is(.bm-kopf__kontakt, .bm-mobilmenue__kontakt, .bm-start-kreis, .bm-start-knopf, .bm-fuss__hoch,
    .bm-stimmen-pfeil, .bm-start-leistungen-pfeile button, .bm-start-hero-steuer, .bm-hilfe__zu,
    .bm-hilfe__knopf):active { scale: none; }
}
html { overflow-x: clip; }
/* Case-Seiten mit page_bg (Seite.astro, seitenGrund): die Grundfarbe --bm-bg und
   ihre Kanalform ersetzen; .bm-neu rechnet sie sonst frisch aus --kern-bg-warm. */
body[data-seitengrund],
body[data-seitengrund] .bm-neu {
  --bm-bg: var(--seitengrund);
  --bm-bg-rgb: from var(--seitengrund) r g b;
}
body {
  background: var(--bm-bg);
  color: var(--bm-text-leise);
  font-family: var(--bm-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  margin: 0;
}