@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-wght-normal.8f704806db.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400-normal.14425ba9c6.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.cb182feeed.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-700-normal.d0d4e81880.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-400-normal.425c0713a8.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-500-normal.5bcc3aa180.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-700-normal.b9d66d1708.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/caveat-latin-wght-normal.891951df5e.woff2") format("woff2");
}
/* brainX Design-Tokens – einzige Quelle für Farben, Schriften, Radien, Schatten (V28) */
:root {
  /* == Farben == */
  --farbe-navy: #1E2850; /* Spec: Text, Überschriften, dunkle Flächen */
  --farbe-weiss: #FFFFFF; /* Ergänzung: Seite, Kasten, Karten, Text auf Navy (4800×) */
  --farbe-orange-flaeche: #FF3C00; /* Spec: nur Grafik ohne Text – Balken, Punkte, Link-Unterstrich, FAQ-Plus, Klickring */
  --farbe-orange-text: #C83000; /* Spec: Primärbutton, Eyebrows, Textlinks, Pillen mit Text */
  --farbe-orange-hover: #A82800; /* Spec: Hover des Primärbuttons */
  --farbe-gruen: #00795F; /* Spec: Ergebnis, enthalten-Punkt, Häkchen */
  --farbe-gruen-text: #00654F; /* Spec: Text in Ergebnisblöcken */
  --farbe-gruen-flaeche: #E6F2EE; /* Spec: Fläche der Ergebnisblöcke */
  --farbe-mint: #4FD8BC; /* Spec: Kicker und Pillen auf Navy */
  --farbe-mint-akzent: #00B48F; /* Spec: Akzent auf Navy */
  --farbe-mint-text: #007A61; /* Spec: grüne Eyebrows auf Hell */
  --farbe-gedaempft-punkt: #E89A2C; /* Spec: Punkt eingeschränkt */
  --farbe-gedaempft-text: #8A4B0F; /* Spec: Text eingeschränkt */
  --farbe-gedaempft-navy: #FFB08F; /* Spec: eingeschränkt auf Navy */
  --farbe-gedaempft-ring: #B4610F; /* Ergänzung: Ring des Minus-Kreises bei Grenzen (186×, 34 Seiten) */
  --farbe-mikrotext: #5A6478; /* Spec: kleinste Graustufe auf Hell, Labels, Lead hell */
  --farbe-text-sekundaer: #3D4759; /* Spec: Listen, Tabellenzellen */
  --farbe-navy-text-sekundaer: #9FA9C8; /* Spec: Text auf Navy, sekundär */
  --farbe-navy-text-hell: #DDE3F2; /* Spec: Text auf Navy, hell */
  --farbe-navy-grau: #9AA3BF; /* Spec: Brotkrumen, Navigation, Fuß auf Navy */
  --farbe-flaeche-karte: #F4F7FB; /* Spec: Fläche hell, Karte */
  --farbe-flaeche-band: #F4F6FA; /* Spec: Fläche hell, Band */
  --farbe-flaeche-hell: #F8FAFC; /* Spec: Fläche hell, sehr hell */
  --farbe-flaeche-toggle: #EEF1F6; /* Spec: Fläche hell, Umschalter */
  --farbe-flaeche-kachel: #F1F4F8; /* Ergänzung: Integrations-Kachel, Deko-Form rechts (154×, 30 Seiten) */
  --farbe-flaeche-zart: #F6F8FB; /* Ergänzung: Deko-Form links, Seitenspalte, Hinweiskasten (151×, 32 Seiten) */
  --farbe-linie: #E2E6EE; /* Spec: Linie, Standard */
  --farbe-linie-sektion: #ECEEF3; /* Spec: Linie zwischen Sektionen */
  --farbe-linie-karte: #E7EBF2; /* Spec: Linie, Karte */
  --farbe-linie-eingabe: #DDE2EC; /* Spec: Linie, Eingabefeld */
  --farbe-status-leer: #A6AEC0; /* Ergänzung: Status-Punkt nicht vorhanden, Ring (131×, 38 Seiten) */
  --farbe-hellblau-vergleich: #DCE5F3; /* Spec: brainX-Spalte im Vergleich */
  --farbe-gruen-zelle: #F4FAF8; /* Ergänzung: Zellen der brainX-Spalte (74×, 16 Seiten) */
  --farbe-navy-innenfeld: #28335E; /* Ergänzung: Innenfeld Grenzen auf Navy (13×, 12 Seiten) */
  --farbe-navy-linie: rgba(255,255,255,.12); /* Ergänzung: Linien auf Navy (196×) */
  --farbe-navy-pille: rgba(255,255,255,.1); /* Ergänzung: Pille auf Navy (150×) */
  --farbe-navy-pille-rand: rgba(255,255,255,.2); /* Ergänzung: Ph12 Design-Abgleich C-crm, Umrisspille der Trust-Zeile im Hero (CRM Produktseite v2 Z. 64–69) */
  --farbe-navy-abdunkel: rgba(0,0,0,.16); /* Ergänzung: Ph12 Design-Abgleich C-crm, abgedunkelte Trust-Zeile unter dem Hero (CRM Produktseite v2 Z. 64) */
  --farbe-navy-glas: rgba(255,255,255,.06); /* Ergänzung: Glaskarte auf Navy, Fläche (45×) */
  --farbe-navy-glas-rand: rgba(255,255,255,.14); /* Ergänzung: Glaskarte auf Navy, Rand (70×) */
  --farbe-navy-button-rand: rgba(255,255,255,.55); /* Ergänzung: Rand des Sekundärbuttons auf Navy (design.md Abschnitt 2) */
  --farbe-mint-pille: rgba(79,216,188,.18); /* Ergänzung: aktive Pille auf Navy (13×) */
  --farbe-flaeche-hintergrund-diagonal: #F3F6FA; /* Ergänzung: Design Hintergrund, mittlere klassische Diagonale */
  --farbe-flaeche-hintergrund-ende: #F7F9FC; /* Ergänzung: Design Hintergrund, fünfte klassische Fläche */
  --farbe-glow-orange-hintergrund: rgba(255,60,0,.085); /* Ergänzung: Design Hintergrund, klassische zweite Akzentstufe */
  --farbe-glow-mint-hintergrund: rgba(0,180,143,.1); /* Ergänzung: Design Hintergrund, klassische grüne zweite Akzentstufe */
  --farbe-glow-navy-hintergrund: rgba(30,40,80,.07); /* Ergänzung: Design Hintergrund, klassische mittlere Diagonale */
  --farbe-glow-orange: rgba(255,60,0,.11); /* Ergänzung: Glow der Deko rechts, Farbwelt standard */
  --farbe-glow-orange-aus: rgba(255,60,0,0); /* Ergänzung: Ausblendung des orangen Glows */
  --farbe-glow-mint: rgba(0,180,143,.11); /* Ergänzung: Glow der Deko links */
  --farbe-glow-mint-aus: rgba(0,180,143,0); /* Ergänzung: Ausblendung des Mint-Glows */
  --farbe-glow-mint-gruenwelt: rgba(0,180,143,.13); /* Ergänzung: Glow der Deko rechts, Farbwelt grün */
  --farbe-glow-mint-hero: rgba(0,180,143,.16); /* Ergänzung: Glow im Navy-Hero (40×) */
  --farbe-glow-navy: rgba(30,40,80,.06); /* Ergänzung: Glow jeder zweiten rechten Form */
  --farbe-glow-navy-aus: rgba(30,40,80,0); /* Ergänzung: Ausblendung des Navy-Glows */
  --farbe-app-kopf: #000000; /* Spec: Tabellenkopf, nur Nachbauten der Oberfläche */
  --farbe-app-text: #252627; /* Spec: Text, nur Nachbauten der Oberfläche */
  --farbe-app-sekundaer: #8E93A7; /* Spec: Text sekundär, nur Nachbauten der Oberfläche */
  --farbe-app-linie: #E9EAEE; /* Spec: Linie, nur Nachbauten der Oberfläche */
  --farbe-app-gruen: #00B48F; /* Spec: Grün, nur Nachbauten der Oberfläche */
  --farbe-blau: #2B58C8; /* Vertrag: Spaltenlabels im Mega-Menü, Bereiche Preise und Lösungen (6,3:1, Ph2 §5) */
  --farbe-schleier: rgba(14,19,40,.2); /* Vertrag: Schleier unter Mega-Menü und Suchpanel (Ph2 §5) */
  --farbe-schleier-dialog: rgba(16,22,40,.62); /* Vertrag: Hintergrund des Dialogs (Ph2 §5) */
  --farbe-icon-mint: rgba(0,180,143,.14); /* Vertrag: Icon-Kachel Mint der Spalte APP (Ph2 §5) */
  --farbe-icon-orange: rgba(255,60,0,.12); /* Vertrag: Icon-Kachel Orange der Spalte APP (Ph2 §5) */
  --farbe-icon-navy: rgba(30,40,80,.08); /* Vertrag: Icon-Kachel Navy der Spalte APP (Ph2 §5) */
  --farbe-mint-flaeche: rgba(0,180,143,.10); /* Vertrag: Fläche der Promo Startups (Ph2 §5) */
  --farbe-mint-rand: rgba(0,180,143,.34); /* Vertrag: Rand der Promo Startups (Ph2 §5) */
  --farbe-markierung: rgba(255,60,0,.14); /* Vertrag: markierte Suchwörter (Ph2 §5) */
  --farbe-bereich-produkt: var(--farbe-orange-flaeche); /* Vertrag: Bereichspunkt Produkt, nur Grafik (Ph2 §5) */
  --farbe-bereich-produkt-text: var(--farbe-orange-text); /* Vertrag: Bereichstext Produkt (Ph2 §5) */
  --farbe-bereich-preise: var(--farbe-blau); /* Vertrag: Bereichspunkt und -text Preise (Ph2 §5) */
  --farbe-bereich-loesungen: var(--farbe-blau); /* Vertrag: Bereichspunkt und -text Lösungen (Ph2 §5) */
  --farbe-bereich-integrationen: var(--farbe-gruen); /* Vertrag: Bereichspunkt und -text Integrationen (Ph2 §5) */
  --farbe-bereich-sicherheit: var(--farbe-navy); /* Vertrag: Bereichspunkt und -text Sicherheit (Ph2 §5) */
  --farbe-bereich-ressourcen: var(--farbe-mikrotext); /* Vertrag: Bereichspunkt und -text Ressourcen (Ph2 §5) */
  --farbe-bereich-unternehmen: var(--farbe-mikrotext); /* Vertrag: Bereichspunkt und -text Unternehmen (Ph2 §5) */
  --farbe-marke-youtube: #FF0000; /* Vertrag: Social-Hover YouTube, nur mit URL (Ph2 §5) */
  --farbe-marke-linkedin: #0A66C2; /* Vertrag: Social-Hover LinkedIn, nur mit URL (Ph2 §5) */
  --farbe-glow-mint-karte: rgba(0,180,143,.2); /* Vertrag: Glow der Navy-Karten der Fehlerseiten (Ph3 §6) */
  --farbe-halo-orange: rgba(255,60,0,.32); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, Beginn (Ph3 §6) */
  --farbe-halo-orange-aus: rgba(255,60,0,0); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, ausgeblendet (Ph3 §6) */
  --farbe-orange-durchstrich: rgba(255,60,0,.55); /* Vertrag: Durchstreichung der entfernten Adresse der 410 (Ph3 §6) */
  --farbe-navy-link-linie: rgba(255,255,255,.35); /* Ergänzung: Unterstrich der Links auf Navy-Karten (410 „Auch passend“; Ausnahme der Fix-Runde Ph3 C2, P-C2-5, vom Hauptprozess freigegeben) */
  --farbe-navy-tief: #101628; /* Vertrag: Hero und „Heute“ Über uns, „Die Menschen“, OG-Motiv unternehmen (Ph4 §6) */
  --farbe-violett: #7C3AED; /* Vertrag: Nummer 02 der Aussagenliste (Ph4 §6) */
  --farbe-orange-navy-text: #FF3C00; /* Vertrag: orange Text auf Navy-Tief („Heute“, 5,05:1), Ausnahme Ä4-21 (Ph4 §6) */
  --farbe-orange-navy-hell: #FF6A3D; /* Vertrag: Akzent auf Navy (Startseite „heute“) (Ph4 §6) */
  --farbe-orange-navy-hover: #FF7A52; /* Vertrag: Link-Hover auf Navy (Ph4 §6) */
  --farbe-navy-text-lead: #C4CBE0; /* Vertrag: Text auf Navy (Abschluss Startseite, Integrationen) (Ph4 §6) */
  --farbe-titel-zweitton: #7C87A8; /* Vertrag: H2-Zweitton auf Weiß, nur ab 24 px, Ausnahme Ä4-21 (Ph4 §6) */
  --farbe-linie-stark: #C3CAD8; /* Vertrag: grauer Linkunterstrich (Ph4 §6) */
  --farbe-linie-begriff: var(--farbe-app-rand-stark); /* Ergänzung: Design-Abgleich Ph12, gepunkteter Unterstrich der Lexikon-Verweise (#9AA3B8, Δ4 zu --farbe-app-rand-stark; AD, CF, VF Fließtexte, V-B-app-28) */
  --farbe-orange-wahl-text: #D93400; /* Ergänzung: Design-Abgleich Ph12, Titel der gewählten Szenario-Kachel (VF Z. 835), „OHNE brainX“ (VF Z. 540), V-B-app-35, -40 */
  --farbe-orange-wahl-hinweis: #B8451F; /* Ergänzung: Design-Abgleich Ph12, Hinweis der gewählten Szenario-Kachel (VF Z. 835), V-B-app-40 */
  --farbe-glow-mint-band: rgba(79,216,188,.24); /* Ergänzung: Design-Abgleich Ph12, Mint-Glow des Navy-Bands unter den Ursache-Karten (CF Z. 178), V-B-app-51 */
  --farbe-linie-grafik: #C3CCDD; /* Vertrag: Verbinder der Grafik „Der Vertrag steht in der Mitte“ (Ph4 §6) */
  --farbe-karte-punkt: #B7C1D6; /* Vertrag: Standortkarte, Punkte (Ph4 §6) */
  --farbe-karte-flaeche: #DCE3EF; /* Vertrag: Standortkarte, Fläche (Ph4 §6) */
  --farbe-maske: #000; /* Vertrag: Maske des Laufbands (Ph4 §6) */
  --farbe-glow-orange-cta: rgba(255,60,0,.16); /* Vertrag: Glow des Abschlusses navy-termin (Ph4 §6) */
  --farbe-diagramm-mint-hell: #B4EBDD; /* Vertrag: dashboard-widget, Reihe Mint hell (Ph4 §6) */
  --farbe-diagramm-orange-1: #FF6B3D; /* Vertrag: dashboard-widget, Reihe Orange 1 (Ph4 §6) */
  --farbe-diagramm-orange-2: #FF9A72; /* Vertrag: dashboard-widget, Reihe Orange 2 (Ph4 §6) */
  --farbe-diagramm-orange-3: #FFC9B3; /* Vertrag: dashboard-widget, Reihe Orange 3 (Ph4 §6) */
  --farbe-diagramm-schraffur: #F1FBF8; /* Vertrag: dashboard-widget, Schraffur (Ph4 §6) */
  --farbe-diagramm-grundlinie: #C9D0DD; /* Vertrag: dashboard-widget, Grundlinie (Ph4 §6) */
  --farbe-tooltip: #1B2230; /* Vertrag: dashboard-widget, Tooltip (Ph4 §6) */
  --farbe-saldo-negativ-rand: #E5484D; /* Vertrag: dashboard-widget, negativer Saldo, Rand (Ph4 §6) */
  --farbe-saldo-negativ-text: #D92D20; /* Vertrag: dashboard-widget, negativer Saldo, Text (Ph4 §6) */
  --farbe-widget-schalter-aus: #4A5578; /* Vertrag: dashboard-widget, Szenario-Schalter aus (D3 R-1) (Ph4 §6) */
  --farbe-navy-linie-stark: rgba(255,255,255,.2); /* Vertrag: Linie der Kapitelleiste auf Navy (D3 R-1) (Ph4 §6) */
  --farbe-video-knopf: var(--farbe-schleier-dialog); /* Vertrag: Abspielen-Knopf der Bühnen (Ph5 §6.1) */
  --farbe-video-knopf-hover: rgba(16,22,40,.85); /* Vertrag: Abspielen-Knopf im Hover (Ph5 §6.1) */
  --farbe-navy-rand-mittel: rgba(255,255,255,.28); /* Vertrag: Rand des Abspielen-Knopfs, inaktiver Story-Punkt (Ph5 §6.1) */
  --farbe-app-link: #00A57F; /* Vertrag: Bühnen, Link-Grün und Status „Neu“ der Oberfläche (Ph5 §6.1) */
  --farbe-app-status-ok: #DFF4EF; /* Vertrag: Bühnen, Fläche Status „Neu“ und „Bezahlt“ (Ph5 §6.1) */
  --farbe-app-rand: #B1B4BB; /* Vertrag: Bühnen, Rand der Checkbox (Ph5 §6.1) */
  --farbe-app-dunkel: #1A1B1E; /* Vertrag: Bühnen, Zeiger, Etikett, Toast-Titel, aktiver Story-Eintrag (Ph5 §6.1) */
  --farbe-app-kopf-text: #C9CCD6; /* Vertrag: Bühnen, Krümel und Seitenleiste der Story (Ph5 §6.1) */
  --farbe-app-kopf-linie: #33363D; /* Vertrag: Bühnen, Trennstrich der Titelleiste (Ph5 §6.1) */
  --farbe-fremd-leiste: #24272E; /* Vertrag: Bühnen, Titelleiste der Fremdfenster (Ph5 §6.1) */
  --farbe-app-nebentext: #6E7480; /* Vertrag: Bühnen, Unterzeile Toast, Nebentext Fremdsystem (Ph5 §6.5) */
  --farbe-fremd-leiste-punkt: #4A4F5A; /* Vertrag: Bühnen, Fensterpunkte der Titelleiste aller Fremdfenster (Ph5 §6.5) */
  --farbe-fremd-snapaddy-akzent: #1F9BD7; /* Vertrag: Bühnen, snapADDY Knopf „An CRM senden“ (Ph5 §6.5) */
  --farbe-fremd-snapaddy-akzent-gedrueckt: #1784BA; /* Vertrag: Bühnen, snapADDY Knopf gedrückt (Ph5 §6.5) */
  --farbe-fremd-snapaddy-erfolg: #1E8E4E; /* Vertrag: Bühnen, snapADDY Knopf gesendet, Häkchen (Ph5 §6.5) */
  --farbe-fremd-snapaddy-text: #1F2937; /* Vertrag: Bühnen, snapADDY Text der Karte und des Panels (Ph5 §6.5) */
  --farbe-fremd-snapaddy-scan: #4FD1FF; /* Vertrag: Bühnen, snapADDY Scanlinie (Ph5 §6.5) */
  --farbe-glow-orange-story: rgba(255,60,0,.08); /* Vertrag: Scrollstory, Glow im Fenster (Ph5 §6.2) */
  --farbe-story-zeiger: #111111; /* Vertrag: Scrollstory, Zeiger (Ph5 §6.2) */
  --farbe-app-symbol: #3A3D4A; /* Vertrag: Bühnen, Pfeil der Auswahlfelder, Linie unter Dialog-Abschnitten (Ph5 §6.5) */
  --farbe-app-platzhalter: #A3A8B8; /* Vertrag: Bühnen, Platzhalter in Eingabefeldern (Ph5 §6.5) */
  --farbe-app-leiste-sekundaer: #B9BCC8; /* Vertrag: Bühnen, Gruppentitel und Systemeinträge der Seitenleiste (Ph5 §6.5) */
  --farbe-app-rand-stark: #9AA0B4; /* Vertrag: Bühnen, Rand der Kontrollkästchen (Ph5 §6.5) */
  --farbe-app-werkzeug: #6B7088; /* Vertrag: Bühnen, Beschriftung der Werkzeug-Knöpfe (Ph5 §6.5) */
  --farbe-app-knopf-gruen: #11A889; /* Vertrag: Bühnen, Primärknopf der Video-Oberfläche (Ph5 §6.5) */
  --farbe-app-chip-tuerkis-text: #0F9FB4; /* Vertrag: Bühnen, Chip Neu und Meeting, Text (Ph5 §6.5) */
  --farbe-app-chip-blau-text: #1386D1; /* Vertrag: Bühnen, Chip Kontaktversuch, Text (Ph5 §6.5) */
  --farbe-app-chip-blau-flaeche: #E4F2FC; /* Vertrag: Bühnen, Chip Kontaktversuch, Neu, Meeting, Anruf, Fläche (Ph5 §6.5) */
  --farbe-app-chip-orange-text: #F08C00; /* Vertrag: Bühnen, Chip Qualifiziert, Hover der Auswahl, Text (Ph5 §6.5) */
  --farbe-app-chip-orange-flaeche: #FFF3E0; /* Vertrag: Bühnen, Chip Qualifiziert, Fläche (Ph5 §6.5) */
  --farbe-app-chip-rotorange-text: #F2400F; /* Vertrag: Bühnen, Chip Disqualifiziert, Kommunikation, Hoch, Text (Ph5 §6.5) */
  --farbe-app-chip-rotorange-flaeche: #FFE7DF; /* Vertrag: Bühnen, Chip Disqualifiziert, Kommunikation, Hoch, Fläche (Ph5 §6.5) */
  --farbe-app-chip-pink-text: #D6246E; /* Vertrag: Bühnen, Chip Webseite, Text (Ph5 §6.5) */
  --farbe-app-chip-pink-flaeche: #FCE8EF; /* Vertrag: Bühnen, Chip Webseite und Verloren, Fläche (Ph5 §6.5) */
  --farbe-app-chip-bernstein-text: #E08A0B; /* Vertrag: Bühnen, Chip Messe, nicht begonnen, Text (Ph5 §6.5) */
  --farbe-app-chip-bernstein-flaeche: #FFF5E8; /* Vertrag: Bühnen, Chip Messe, nicht begonnen, Fläche (Ph5 §6.5) */
  --farbe-app-chip-petrol-text: #1497B0; /* Vertrag: Bühnen, Chip Anruf, Text (Ph5 §6.5) */
  --farbe-app-chip-gelb-text: #D99A00; /* Vertrag: Bühnen, Chip Anfrage erhalten, Text (Ph5 §6.5) */
  --farbe-app-chip-gelb-flaeche: #FFF6D9; /* Vertrag: Bühnen, Chip Anfrage erhalten, Fläche (Ph5 §6.5) */
  --farbe-gruen-tabelle-text: #123F33; /* Ergänzung: Ph12 Paket Sicherheit, Text der Spalte „BEI brainX“ (Design Sicherheit v3 Z. 121) */
  --farbe-app-chip-grau-text: #2A3B7D; /* Vertrag: Bühnen, Chip Organisation, Text (Ph5 §6.5) */
  --farbe-video-abdunkeln: rgba(18,22,34,.34); /* Vertrag: Produktvideo, Abdunkelung hinter Dialogen (Ph5 §6.5) */
  --farbe-video-hinweis: rgba(40,44,58,.96); /* Vertrag: Produktvideo, Karte „Im Hintergrund“ (Ph5 §6.5) */
  --farbe-video-fortschritt: #3FD0B4; /* Vertrag: Produktvideo, Balken der Karte „Im Hintergrund“ (Ph5 §6.5) */
  --farbe-video-kapitel: #252A3A; /* Vertrag: Produktvideo, Kapitel-Chip (Ph5 §6.5) */
  --farbe-fremd-website-text: #1F2328; /* Vertrag: Bühnen, Text des nachgestellten Website-Formulars (Ph5 §6.5) */
  --farbe-fremd-website-label: #4B5563; /* Vertrag: Bühnen, Labels des Website-Formulars (Ph5 §6.5) */
  --farbe-fremd-website-feldrand: #D1D5DB; /* Vertrag: Bühnen, Feldrand des Website-Formulars (Ph5 §6.5) */
  /* Phase 6 (Vertrag Ph6 §6, V-5) */
  --farbe-gruen-rand: #BFE3D6; /* Vertrag: Rand der Free-Statuszeile (Ph6 §6) */
  --farbe-linie-mittel: #D6DCE8; /* Vertrag: Stationen-Fortschritt, Rand der Free-Pille, Hilfslinien Free-Diagramm (F-3 zusammengelegt) (Ph6 §6) */
  --farbe-glow-orange-medium: rgba(255,60,0,.14); /* Vertrag: Glow des Video-Kastens der Stationen (Ph6 §6) */
  --farbe-vorschau-blau-flaeche: #E7EEFB; /* Vertrag: Chip blau der Free-Vorschau, Fläche (Ph6 §6) */
  --farbe-vorschau-blau-text: #23489E; /* Vertrag: Chip blau der Free-Vorschau, Text (Ph6 §6) */
  --farbe-vorschau-rot-flaeche: #FDECEA; /* Vertrag: Chip rot der Free-Vorschau, Fläche (Ph6 §6) */
  --farbe-vorschau-rot-text: #A8261B; /* Vertrag: Chip rot der Free-Vorschau, Text (Ph6 §6) */
  --farbe-diagramm-ausgaben: #FF8A5C; /* Vertrag: Balken Ausgaben der Free-Vorschau (Ph6 §6) */
  --farbe-saldo-rand: #9ED9C8; /* Vertrag: Rand der Saldo-Pille der Free-Vorschau (Ph6 §6) */
  --farbe-streifen-hell: #E9EEF5; /* Vertrag: zweite Streifenfarbe des zeeg-Platzhalters (Ph6 §6) */
  /* Phase 7 (Vertrag Ph7 §6, V-5) */
  --farbe-flaeche-hinweis: #EDF1F7; /* Vertrag: Hinweis-Box Basis/Module, Protokoll aktiv (Ph7 §6) */
  --farbe-flaeche-hinweis-hover: #E3E9F3; /* Vertrag: Hover der Hinweis-Box (Ph7 §6) */
  --farbe-chip-blau-text: #22406B; /* Vertrag: Modul-Chips der Details (Fläche --farbe-hellblau-vergleich) (Ph7 §6) */
  --farbe-chip-blau-rand: #C6D2E6; /* Vertrag: Integrations-Pillen der Details (Ph7 §6) */
  --farbe-navy-flaeche-zart: rgba(255,255,255,.08); /* Vertrag: nur die .08-Stellen auf Navy: Zahlweise-Pille, Zeilenlinien der Auswahl-Spalte (H7-23/K-6) (Ph7 §6) */
  --farbe-navy-hauch: rgba(255,255,255,.05); /* Vertrag: nur Fuß der Auswahl-Spalte und Keil beider Preise-Hero, nicht die Zeilenlinien (H7-21 (1), H7-23/K-6) (Ph7 §6) */
  --farbe-mint-box: rgba(79,216,188,.13); /* Vertrag: Grenz-Box Business, nicht der Badge „sparen“ (der nutzt --farbe-mint-pille, H7-18) (Ph7 §6) */
  --farbe-mint-box-rand: rgba(79,216,188,.35); /* Vertrag: Rand der Grenz-Box Business (Ph7 §6) */
  /* Phase 8 (Vertrag Ph8 §6, V-5; Teil Welle 0) */
  --farbe-gruen-tief: #00594A; /* Vertrag: Fläche „Umsatz sichern“ der Tour (T3; Design gilt, Ausnahme zu „Grün nur für Status“) (Ph8 §6) */
  --farbe-kette-graublau: #5D7C93; /* Vertrag: Kettenstation 2, Stunden „ohne“, Insel „heute“, ton graublau (Paketseiten) (Ph8 §6) */
  --farbe-kette-mint-tief: #00A87F; /* Vertrag: Kettenstation 4 (Paketseiten; ≈ P5 --farbe-app-link, Δ3, andere Rolle, behalten L8-13) (Ph8 §6) */
  --farbe-system-crm: #8B7CFF; /* Vertrag: Systemfarbe „CRM“, Deko auf Navy (W3) (Ph8 §6) */
  --farbe-system-tool: #FFB020; /* Vertrag: Systemfarbe „Rechnungstool“ (W3) (Ph8 §6) */
  --farbe-system-tabelle: #3FA9F5; /* Vertrag: Systemfarbe „Tabellen“ (W3) (Ph8 §6) */
  --farbe-team-service: #F5C243; /* Vertrag: Team-Pille Service (CP), zugleich ton gelb von karten nummeriert (CP Karte 05, K-22) (Ph8 §6) */
  --farbe-team-projekte: #FF9270; /* Vertrag: Team-Pille Projekte und Abrechnung, Text (CP) (Ph8 §6) */
  --farbe-orange-tief: #B62C00; /* Vertrag: Warnungstext Szenario, Kicker hell (AC, VF) (Ph8 §6) */
  --farbe-orange-karte: #FFF4EF; /* Vertrag: orange Ergebniskarte (VF) (Ph8 §6) */
  --farbe-orange-karte-rand: #FFD2BF; /* Vertrag: Rand der orangen Ergebniskarte und Pille (VF) (Ph8 §6) */
  --farbe-knoten-bedingung: #C3B0EE; /* Vertrag: Challenge-Knotenrand Bedingung (A7) (Ph8 §6) */
  --farbe-knoten-zeit: #EFD79B; /* Vertrag: Challenge-Knotenrand Zeitschritt (A7) (Ph8 §6) */
  --farbe-knoten-entfaellt: #F3C9BC; /* Vertrag: Challenge-Knotenrand entfällt (A7) (Ph8 §6) */
  --farbe-ergebnis-gruen-rand: #CBE5DC; /* Vertrag: Rand des Ergebnis-Tons grün von passt-das (K8) (Ph8 §6) */
  --farbe-navy-fortschritt: rgba(255,255,255,.45); /* Vertrag: Fortschritt im Stand-Kasten auf Navy (passt-das) (Ph8 §6) */
  --farbe-warn-rand: #F5D9BC; /* Vertrag: Rand des Ergebnis-Tons warn (passt-das) (Ph8 §6) */
  --farbe-linie-mint: #A8D9CE; /* Vertrag: Abnahme-Linie mint im Phasenplan (wechsel-zeitplan) (Ph8 §6) */
  --farbe-linie-orange: #FFB59E; /* Vertrag: Abnahme-Linie orange im Phasenplan (wechsel-zeitplan) (Ph8 §6) */
  --farbe-orange-navy-blass: rgba(255,154,110,.55); /* Vertrag: Text der Lücke in der Weichen-Grafik auf Navy (AC) (Ph8 §6) */
  --farbe-phase-gelb: #FFC46B; /* Vertrag: Pillen-Punkt Phase 2 (MU Z. 300; H1c-Wert vor Welle 1, H8-16) (Ph8 §6) */
  --farbe-orange-nummer-blass: #FFD4C6; /* Vertrag: Nummer der Akzentkarte „04“ (OB Z. 229; H1c-Wert vor Welle 1, H8-16) (Ph8 §6) */
  --farbe-gruen-flaeche-hover: #DAEDE6; /* Vertrag: Hover der Link-Karte der Scrollstory (T3 Z. 361; V-11, Ä8-10) (Ph8 §6) */
  --farbe-app-status-faellig-text: #F59E0B; /* Vertrag: Status-Pille „Fällig“, Text (AD Rechnungslauf; H2a, vor Welle 2; Fläche P5 --farbe-app-chip-orange-flaeche, K7) (Ph8 §6) */
  --farbe-app-status-erstellt-text: #3B7DD8; /* Vertrag: Status-Pille „Erstellt“, Text (AD Rechnungslauf; H2a, vor Welle 2; Fläche P5 --farbe-app-chip-blau-flaeche, K7) (Ph8 §6) */
  --farbe-app-status-gesendet-text: var(--farbe-fremd-snapaddy-akzent); /* Vertrag: Status-Pille „Gesendet“, Text (AD #1BA0D8 = Nahdublette Δ5, nur Rollenname; H2a, vor Welle 2) (Ph8 §6) */
  --farbe-app-status-bezahlt-text: #1AB394; /* Vertrag: Status-Pille „Bezahlt“ und „Gebucht“, Text (AD Rechnungslauf; H2a, vor Welle 2; Fläche P5 --farbe-app-status-ok, K7) (Ph8 §6) */
  --farbe-app-status-mahnung-text: #F04E23; /* Vertrag: Status-Pille „2. Mahnung“, Text (AD Rechnungslauf; H2a, vor Welle 2; Fläche P6 --farbe-vorschau-rot-flaeche, N8-152) (Ph8 §6) */
  --farbe-team-vertrieb-flaeche: rgba(79,216,188,.14); /* Vertrag: Team-Pille Vertrieb, Fläche (CP Karten 01, 02; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-team-projekte-flaeche: rgba(255,146,112,.16); /* Vertrag: Team-Pille Projekte, Fläche (CP Karte 03; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-team-service-flaeche: rgba(245,194,67,.16); /* Vertrag: Team-Pille Service, Fläche (CP Karte 04; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-team-abrechnung-flaeche: rgba(255,60,0,.18); /* Vertrag: Team-Pille Abrechnung, Fläche (CP Karte 05; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-kette-aktiv-rand: rgba(79,216,188,.75); /* Vertrag: Rand der Karte mit aria-current in automation-kette (Fläche P7 --farbe-mint-box, K5; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-kette-ende-rand: rgba(255,60,0,.5); /* Vertrag: Rand der Karte 05 in Ruhe in automation-kette (H2c, vor Welle 2) (Ph8 §6) */
  --farbe-kette-ziffer: #8A93B5; /* Vertrag: Nummer und Pfeil der automation-kette (≈ --farbe-app-sekundaer Δ14, keine Nahdublette; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-etikett-gruen-flaeche: #CCF0E9; /* Vertrag: Bühne automation-ablauf, Etikett und Pille grün (AA .gr; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-etikett-orange-flaeche: #FFE3D6; /* Vertrag: Bühne automation-ablauf, Etikett orange, Fläche (AA .or; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-etikett-orange-text: #B83A0C; /* Vertrag: Bühne automation-ablauf, Etikett orange, Text (AA .or; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-pille-klausel-text: #4B5670; /* Ergänzung: Heute-Tabelle C-Level, Pille Klausel, Text (Design-Abgleich Ph12 E) */
  --farbe-tabelle-zeile-linie: #F1F4F9; /* Ergänzung: Heute-Tabelle C-Level, Linie zwischen den Zeilen (Design-Abgleich Ph12 E) */
  --farbe-app-bedingung: #7E2F8D; /* Vertrag: Bühne automation-ablauf, Symbol Bedingung (AA bolt; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-bedingung-flaeche: #F3E6F5; /* Vertrag: Bühne automation-ablauf, Symbolkachel Bedingung (H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-aktion: #0D9DDD; /* Vertrag: Bühne automation-ablauf, Symbol Aktion (AA akt; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-aktion-flaeche: #DDF1FA; /* Vertrag: Bühne automation-ablauf, Symbolkachel Aktion (H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-aktion-text: #0A7FB5; /* Vertrag: Bühne automation-ablauf, Legende Aktion (H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-port: var(--farbe-app-kopf-text); /* Vertrag: Bühne automation-ablauf, Ports der Knoten (AA #C9CED8 = Nahdublette Δ2, nur Rollenname; H2c, vor Welle 2) (Ph8 §6) */
  --farbe-app-bahn: var(--farbe-fremd-website-feldrand); /* Vertrag: Bühne automation-ablauf, Bahn der Kanten (AA #D3D7DF = Nahdublette Δ4, nur Rollenname; H2c, vor Welle 2) (Ph8 §6) */
  /* Phase 9 (Vertrag Ph9 §6, V-7; Welle 0: I0a, I0b, I0c) */
  --farbe-orange-rand-hover: #FFC2A8; /* Vertrag: Rand der Integrations-Kachel im Hover und Fokus (sammelliste, I0c) (Ph9 §6) */
  --farbe-app-gruen-gedrueckt: #009977; /* Vertrag: Bühnen, Primärknopf der Oberfläche gedrückt (Kern; hero-zugferd, hero-microsoft365, I1a) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-app-haken-flaeche: #D9F0E8; /* Vertrag: Bühnen, Kreis des großen Hakens .bxi-gross und des Toast-Hakens (Kern; I0a B, I1a) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-docusign-akzent: #4C00FF; /* Vertrag: Bühnen, DocuSign Knopf „Fertigstellen“ (hero-docusign) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-docusign-akzent-gedrueckt: #3A00C4; /* Vertrag: Bühnen, DocuSign Knopf „Fertigstellen“ gedrückt (hero-docusign) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-docusign-markierung: #FFD200; /* Vertrag: Bühnen, DocuSign Feld „Unterschreiben“ (hero-docusign) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-docusign-tinte: #1D2A6B; /* Vertrag: Bühnen, DocuSign Unterschrift in --schrift-familie-hand (hero-docusign) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-docusign-linie: #8A8A99; /* Vertrag: Bühnen, DocuSign Unterschriftslinie (hero-docusign) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-outlook-akzent: #1F6FD1; /* Vertrag: Bühnen, Outlook Primärknopf und Rand des Zielordners (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-outlook-akzent-gedrueckt: #1A5DB3; /* Vertrag: Bühnen, Outlook Primärknopf gedrückt (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-outlook-navigation: #1F5FBF; /* Vertrag: Bühnen, Outlook aktiver Navigationseintrag (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-outlook-markierung: #CFE0FA; /* Vertrag: Bühnen, Outlook markierter Feldwert (Telefonnummer im Kontakt) (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-outlook-ordner-ziel: #DCE8FA; /* Vertrag: Bühnen, Outlook Zielordner beim Ablegen (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-outlook-text-sekundaer: #374151; /* Vertrag: Bühnen, Outlook und Teams Nebentext (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-teams-avatar-1: #5B6B8C; /* Vertrag: Bühnen, Teams erster Avatar im Anruf (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-teams-avatar-2: #3D7A5C; /* Vertrag: Bühnen, Teams zweiter Avatar im Anruf (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-fremd-teams-verlassen: #C8463D; /* Vertrag: Bühnen, Teams Knopf „Verlassen“ (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-buehne-kapitel-flaeche: rgba(18,20,26,.88); /* Vertrag: Bühnen, Fläche der Kapitel-Pille (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  --farbe-buehne-kapitel-text: #8A90A0; /* Vertrag: Bühnen, Text der kommenden Kapitel in der Kapitel-Pille (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  /* Phase 9, Block „Ph9 I1a P1“ (Vertrag Ph9 §6, V-7 vor Welle 1; Szenen der Gruppe email: Brevo, CleverReach, Inxmail, Mailchimp) */
  --farbe-app-tab-text: #5A5F6B; /* Vertrag: Bühnen, Tabtext und Fortschrittstext im E-Mail-Modul der Oberfläche (Gruppe email, I1a; HI Z. 247, 786) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-brevo-akzent: #0B996E; /* Vertrag: Bühnen, Brevo Akzent (hero-brevo, I1a; HI Z. 809) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-brevo-text: #0B1F17; /* Vertrag: Bühnen, Brevo Text im Fenster (hero-brevo, I1a; HI Z. 812) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-brevo-nebentext: #5F6B66; /* Vertrag: Bühnen, Brevo Nebentext und Kennzahl-Label (hero-brevo, I1a; HI Z. 817, 818) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-brevo-rand: #DDE7E2; /* Vertrag: Bühnen, Brevo Rand der Kampagnenkarte und Balkengrund (hero-brevo, I1a; HI Z. 814, 818) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-cleverreach-akzent: #1F4FA8; /* Vertrag: Bühnen, CleverReach Knopf Anmeldung (hero-cleverreach, I1a; HI Z. 864) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-cleverreach-akzent-gedrueckt: #173C80; /* Vertrag: Bühnen, CleverReach Knopf Anmeldung gedrückt (hero-cleverreach, I1a; HI Z. 894) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-inxmail-akzent: #12507A; /* Vertrag: Bühnen, Inxmail Akzent (hero-inxmail, I1a; HI Z. 910) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-inxmail-nebentext: #5B6B7A; /* Vertrag: Bühnen, Inxmail Nebentext (hero-inxmail, I1a; HI Z. 913, 915, 918) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-inxmail-erfolg: #1E7F4F; /* Vertrag: Bühnen, Inxmail Status erfolgreich (hero-inxmail, I1a; HI Z. 911) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-mailchimp-text: #241C15; /* Vertrag: Bühnen, Mailchimp Text im Fenster (hero-mailchimp, I1a; HI Z. 983) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-mailchimp-nebentext: #5E574F; /* Vertrag: Bühnen, Mailchimp Nebentext und Pille „Abgemeldet“ (hero-mailchimp, I1a; HI Z. 982–988) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-mailchimp-erfolg: #1B6B3A; /* Vertrag: Bühnen, Mailchimp Pille „Abonniert“ (hero-mailchimp, I1a; HI Z. 981) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-mailchimp-rand: #EFEAE2; /* Vertrag: Bühnen, Mailchimp Zeilenlinie, Tabellenrand und Fläche der Pille „Abgemeldet“ (#EEEAE4, Nahdublette) (hero-mailchimp, I1a; HI Z. 980, 982, 985) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-mailchimp-hinweis: #FFF7C2; /* Vertrag: Bühnen, Mailchimp Kopfleiste und markierte Zeile (hero-mailchimp, I1a; HI Z. 980, 984) (Ph9 §6, V-7 Block I1a P1) */
  --farbe-fremd-mailchimp-hinweis-rand: #EFE3A0; /* Vertrag: Bühnen, Mailchimp Rand der Kopfleiste (hero-mailchimp, I1a; HI Z. 984) (Ph9 §6, V-7 Block I1a P1) */
  /* Phase 9, Block „Ph9 I1a P2“ (Vertrag Ph9 §6, V-7 durch den Umsetzer, H9-63; Gruppe zahlung, DocuSeal, Jira, JSM, Clockodo) */
  --farbe-fremd-zahlung-nebentext: #6B6B6B; /* Vertrag: Bühnen, Bezahlseite Mollie/Stripe Nebentext (Gruppe zahlung, I1a; HI Z. 1267) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-zahlung-rand: #E4E4E0; /* Vertrag: Bühnen, Bezahlseite Rand der Zahlarten (Gruppe zahlung, I1a; HI Z. 1263) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-zahlung-rand-feld: #D7D7D2; /* Vertrag: Bühnen, Bezahlseite Rand des IBAN-Felds (Gruppe zahlung, I1a; HI Z. 1271) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-zahlung-rand-radio: #B9B9B4; /* Vertrag: Bühnen, Bezahlseite Rand der Optionsknöpfe (Gruppe zahlung, I1a; HI Z. 1263) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-zahlung-knopf-gedrueckt: #333333; /* Vertrag: Bühnen, Bezahlseite Mollie Knopf „Bezahlen“ gedrückt (Gruppe zahlung, I1a; HI Z. 1314) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-stripe-akzent: #635BFF; /* Vertrag: Bühnen, Stripe Knopf „Einrichten“ (Gruppe zahlung, I1a; HI Z. 1287) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-stripe-akzent-gedrueckt: #4B44E0; /* Vertrag: Bühnen, Stripe Knopf „Einrichten“ gedrückt (Gruppe zahlung, I1a; HI Z. 1342) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-clockodo-akzent: #1A8FD8; /* Vertrag: Bühnen, Clockodo Start-Knopf und Rahmen (hero-clockodo, I1a; HI Z. 1072) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-docuseal-erfolg: #047857; /* Vertrag: Bühnen, DocuSeal Meldung „Dokument unterschrieben“ (hero-docuseal, I1a; HI Z. 1209) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jira-akzent: #0C66E4; /* Vertrag: Bühnen, Jira Akzent, Portalkopf, Status „In Arbeit“ (hero-jira, hero-jsm, I1a; HI Z. 1368, 1431) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jira-text: #172B4D; /* Vertrag: Bühnen, Jira Text und Protokoll-Hinweis (hero-jira, hero-jsm, I1a; HI Z. 1370, 1375) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jira-nebentext: #626F86; /* Vertrag: Bühnen, Jira Nebentext und Ticketschlüssel (hero-jira, I1a; HI Z. 1369, 1371) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jira-erledigt: #4BCE97; /* Vertrag: Bühnen, Jira Haken „Arbeit protokolliert“ (hero-jira, I1a; HI Z. 1375) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jsm-erfolg: #22A06B; /* Vertrag: Bühnen, Jira Service Management Haken (hero-jsm, I1a; HI Z. 1438) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jsm-erfolg-text: #216E4E; /* Vertrag: Bühnen, Jira Service Management Erfolgstext (hero-jsm, I1a; HI Z. 1438, 1444) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jsm-nebentext: #44546F; /* Vertrag: Bühnen, Jira Service Management Feldbeschriftung (hero-jsm, I1a; HI Z. 1432) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-fremd-jsm-link: #0055CC; /* Vertrag: Bühnen, Jira Service Management Knopf „Senden“ gedrückt (hero-jsm, I1a; HI Z. 1472) (Ph9 §6, V-7 Block I1a P2) */
  --farbe-app-status-wartend-text: #5B3E96; /* Vertrag: Bühnen, Aufgaben-Status „wartend“ Text (Gruppe r3 tsk, I1a; HI Z. 1068) (Ph9 §6, V-7 Block I1a P2) */
  /* Phase 9, Block „Ph9 I1a P3“ (Vertrag Ph9 §6, V-7 durch den Umsetzer, H9-63; SalesViewer) */
  --farbe-fremd-salesviewer-akzent: #2563EB; /* Vertrag: Bühnen, SalesViewer Auswahlring des erkannten Besuchers (hero-salesviewer, I1a; HI Z. 1597, 1605) (Ph9 §6, V-7 Block I1a P3) */
  --farbe-fremd-salesviewer-chip-text: #1E40AF; /* Vertrag: Bühnen, SalesViewer Text der Interessen-Chips (hero-salesviewer, I1a; HI Z. 1599) (Ph9 §6, V-7 Block I1a P3) */
  /* Phase 9, Block „Ph9 I1a P4“ (Vertrag Ph9 §6, V-7 durch den Umsetzer, H9-63; connect, Zapier, n8n, WordPress) */
  --farbe-fremd-telefon-erfolg-hell: #8FD6B4; /* Vertrag: Bühnen, Telefon-Fenster Status „Verbunden“ (Gruppe connect, I1a; HI Z. 1663) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-telefon-erfolg-flaeche: #BFEBDD; /* Vertrag: Bühnen, Sprechblasen-Symbol gedrückt im Anruf-Popup (Gruppe connect, I1a; HI Z. 1688) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-zapier-akzent: #6E56CF; /* Vertrag: Bühnen, Zapier aktiver Schritt und Punkt (hero-zapier, I1a; HI Z. 618) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-zapier-nebentext: #6B6F78; /* Vertrag: Bühnen, Zapier Nebentext (hero-zapier, I1a; HI Z. 180, 632) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-zapier-rand: #E2DED5; /* Vertrag: Bühnen, Zapier Rand der Schritte und Läufe (hero-zapier, I1a; HI Z. 179, 184) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-zapier-linie: #CFCBC2; /* Vertrag: Bühnen, Zapier Verbindungslinie (hero-zapier, I1a; HI Z. 630) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-n8n-akzent: #8B7CF6; /* Vertrag: Bühnen, n8n aktiver Knoten und Punkt (hero-n8n, I1a; HI Z. 653) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-n8n-node-aktiv: #3D3A57; /* Vertrag: Bühnen, n8n Fläche des aktiven Knotens (hero-n8n, I1a; HI Z. 681) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-n8n-rand-fertig: #3E7D63; /* Vertrag: Bühnen, n8n Rand des fertigen Knotens (hero-n8n, I1a; HI Z. 680) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-n8n-erfolg: #2FB67C; /* Vertrag: Bühnen, n8n Haken am Knoten (hero-n8n, I1a; HI Z. 189) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-n8n-text-hell: #7EE2B0; /* Vertrag: Bühnen, n8n Meldung „Ausführung erfolgreich“ (hero-n8n, I1a; HI Z. 673) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-wordpress-label: #6B6862; /* Vertrag: Bühnen, Website-Formular Einleitung und Danke-Text (hero-wordpress, I1a; HI Z. 715, 724) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-wordpress-rand: #B9B3A8; /* Vertrag: Bühnen, Website-Formular Rand der Zustimmung (hero-wordpress, I1a; HI Z. 717) (Ph9 §6, V-7 Block I1a P4) */
  --farbe-fremd-wordpress-feldrand: #D9D4CB; /* Vertrag: Bühnen, Website-Formular Feldrand (hero-wordpress, I1a; HI Z. 191) (Ph9 §6, V-7 Block I1a P4) */
  /* Phase 9, Block „Ph9 I1c“ (Vertrag Ph9 §6, V-7 vor Welle 1; K-119) */
  --farbe-navy-text-dezent: #C9D2E8; /* Vertrag: gestrichelter Rand des Geplant-Kastens (voraussetzungen, I1c; DV2 Z. 401) und Text auf Navy (vgl-bild, I1b; K-119) (Ph9 §6, V-7 Block I1c) */
  --farbe-navy-linie-deckend: #3A4570; /* Vertrag: deckende Linien auf Navy (besonderheit I1c, mini-rechner I2a) (Ph9 §6, V-7 Block I1c) */
  /* Phase 9, Block „Ph9 I1b“ (Vertrag Ph9 §6, V-7 vor I1b Stufe B, durch den Umsetzer; Teilplan I1b §9) */
  --farbe-vgl-verweis: #00875F; /* Vertrag: Linktext der Szenen (vgl-bild, I1b; VB Z. 39) (Ph9 §6, V-7 Block I1b) */
  --farbe-vgl-status-blau-text: #1A6FA8; /* Vertrag: Status „Neu“/„gesendet“ (vgl-bild, I1b; VB Z. 43) (Ph9 §6, V-7 Block I1b) */
  --farbe-vgl-status-orange-text: #C2410C; /* Vertrag: Status „Offen“/„Kontaktversuch“ und Mindestbestand (vgl-bild, I1b; VB Z. 43, 268) (Ph9 §6, V-7 Block I1b) */
  --farbe-vgl-nebentext: #7A8094; /* Vertrag: Unterzeile, Labels und Fuß der Szenen (vgl-bild, I1b; VB Z. 30, 47, 52) (Ph9 §6, V-7 Block I1b) */
  --farbe-vgl-schleier: rgba(37,38,39,.45); /* Vertrag: Abdunkeln hinter Dialogen (vgl-bild abo, erechnung, datev, I1b; VB Z. 129, 151, 219) (Ph9 §6, V-7 Block I1b) */
  /* Phase 9, Block „Ph9 I2a“ (Vertrag Ph9 §6, V-7 durch den Umsetzer, N9-197) */
  --farbe-ergebnis-hell: #6FD8B4; /* Vertrag: „günstiger“ auf Navy, Kontrast 8,2 : 1 (mini-rechner, I2a; Design 07 Preisvergleich) (Ph9 §6, V-7 Block I2a) */
  /* Phase 10 (Vertrag Ph10 §6, V-7; Welle 0: K0b, K0c; Welle 1: R1a, R1b, R1c) */
  --farbe-titelbild-grund: #0B1020; /* Vertrag: Grund des Whitepaper-Titelbilds (Titelbild, K0b; Kachel der sammelliste R2b) (Ph10 §6) */
  --farbe-titelbild-orange-glow: rgba(255,60,0,.2); /* Vertrag: Titelbild Palette orange, Glow-Ellipse (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-orange-bogen-1: #8A2E00; /* Vertrag: Titelbild Palette orange, Bogen bei 95 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-orange-bogen-2: #FF7A2D; /* Vertrag: Titelbild Palette orange, Bogen bei 100 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-orange-keil-1: var(--farbe-titelbild-orange-bogen-2); /* Vertrag: Titelbild Palette orange, Keil Anfang (Titelbild, K0b; D §2.5; wertgleich bogen-2) (Ph10 §6) */
  --farbe-titelbild-orange-keil-2: #C24000; /* Vertrag: Titelbild Palette orange, Keil bei 58 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-orange-keil-3: #7A2400; /* Vertrag: Titelbild Palette orange, Keil Ende (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-gruen-glow: var(--farbe-glow-mint-karte); /* Vertrag: Titelbild Palette gruen, Glow-Ellipse (Titelbild, K0b; D §2.5; wertgleich glow-mint-karte) (Ph10 §6) */
  --farbe-titelbild-gruen-bogen-1: #00553F; /* Vertrag: Titelbild Palette gruen, Bogen bei 95 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-gruen-bogen-2: #38D6B4; /* Vertrag: Titelbild Palette gruen, Bogen bei 100 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-gruen-keil-1: var(--farbe-titelbild-gruen-bogen-2); /* Vertrag: Titelbild Palette gruen, Keil Anfang (Titelbild, K0b; D §2.5; wertgleich bogen-2) (Ph10 §6) */
  --farbe-titelbild-gruen-keil-2: var(--farbe-gruen); /* Vertrag: Titelbild Palette gruen, Keil bei 58 % (Titelbild, K0b; D §2.5; wertgleich gruen) (Ph10 §6) */
  --farbe-titelbild-gruen-keil-3: #004534; /* Vertrag: Titelbild Palette gruen, Keil Ende (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-graublau-glow: rgba(59,74,122,.2); /* Vertrag: Titelbild Palette graublau, Glow-Ellipse (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-graublau-bogen-1: #2E3A66; /* Vertrag: Titelbild Palette graublau, Bogen bei 95 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-graublau-bogen-2: #8894C4; /* Vertrag: Titelbild Palette graublau, Bogen bei 100 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-graublau-keil-1: var(--farbe-titelbild-graublau-bogen-2); /* Vertrag: Titelbild Palette graublau, Keil Anfang (Titelbild, K0b; D §2.5; wertgleich bogen-2) (Ph10 §6) */
  --farbe-titelbild-graublau-keil-2: #3B4A7A; /* Vertrag: Titelbild Palette graublau, Keil bei 58 % (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-graublau-keil-3: #243059; /* Vertrag: Titelbild Palette graublau, Keil Ende (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-chip: rgba(255,255,255,.94); /* Vertrag: Fläche des Thema-Chips im Titelbild (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-stempel-rand: rgba(255,255,255,.7); /* Vertrag: Rand des Seitenstempels im Titelbild (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-titelbild-stempel-flaeche: rgba(11,16,32,.4); /* Vertrag: Fläche des Seitenstempels im Titelbild (Titelbild, K0b; D §2.5) (Ph10 §6) */
  --farbe-navy-dunkel: #151C33; /* Vertrag: Fläche der dunklen Teaser (unterlagen-teaser, R1b) (Ph10 §6) */
  --farbe-kategorie-backup: #4A5C8C; /* Vertrag: Kategorie BACKUP im Steckbrief der Hosting-Seite (steckbrief, R1b) (Ph10 §6) */
  --farbe-code-flaeche: #0A0F1E; /* Vertrag: Fläche des Code-Panels (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-text: #C7D2E8; /* Vertrag: Text im Code-Panel (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-schluessel: #8FA6D8; /* Vertrag: Schlüssel im Code-Panel (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-wert: #FFB08A; /* Vertrag: Zeichenkette im Code-Panel (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-zahl: #F2C66D; /* Vertrag: Zahl im Code-Panel (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-literal: #FF8A6B; /* Vertrag: Literal true/false/null im Code-Panel (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-label: #8A96B8; /* Vertrag: Label im Kopf des Code-Panels (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-hell-wert: #9C3D10; /* Vertrag: Zeichenkette im hellen Beispielblock (api-referenz, R1c) (Ph10 §6) */
  --farbe-code-hell-literal: #2B58C8; /* Vertrag: Zahl und Literal im hellen Beispielblock (api-referenz, R1c) (Ph10 §6) */
  --farbe-fehler-text: #B3261E; /* Vertrag: Fehlercode und Fehlertext (api-referenz, R1c) (Ph10 §6) */
  --farbe-fehler-flaeche: #FCF0EE; /* Vertrag: Fläche der Fehlerantwort und des Fehler-Codes (api-referenz, R1c) (Ph10 §6) */
  --farbe-methode-patch: #8F5400; /* Vertrag: Methoden-Badge PATCH, Text (api-referenz, R1c) (Ph10 §6) */
  --farbe-methode-patch-flaeche: rgba(255,150,0,.18); /* Vertrag: Methoden-Badge PATCH, Fläche (api-referenz, R1c) (Ph10 §6) */
  --farbe-methode-delete: #C62828; /* Vertrag: Methoden-Badge DELETE, Text (api-referenz, R1c) (Ph10 §6) */
  --farbe-methode-delete-flaeche: rgba(198,40,40,.10); /* Vertrag: Methoden-Badge DELETE, Fläche (api-referenz, R1c) (Ph10 §6) */
  --farbe-petrol: #16323C; /* Vertrag: Fläche der Telefon-Karte (support-wege, R1c) (Ph10 §6) */
  --farbe-petrol-akzent: #6FE3C4; /* Vertrag: Akzent, Nummer und Icon der Telefon-Karte (support-wege, R1c) (Ph10 §6) */
  --farbe-petrol-text: #A2BCC2; /* Vertrag: Text der Telefon-Karte (support-wege, R1c) (Ph10 §6) */
  --farbe-petrol-text-leise: #7C9AA2; /* Vertrag: leiser Text der Telefon-Karte, Zeiten (support-wege, R1c) (Ph10 §6) */
  --farbe-petrol-hover: #FF5A26; /* Vertrag: Hover der Telefonnummer auf Petrol (support-wege R1c; Design Support v2; 4,33:1 auf #16323C, Großtext) (Ph10 §6) */
  /* Phase 11 (Vertrag Ph11 §6, V-7; Teil 0, Welle 0: M0a, M0b, M0c) */
  --farbe-tab-inaktiv-hell: rgba(255, 255, 255, .55); /* Vertrag: Inaktive Tabs auf heller Fläche (kennzahl-fragen; H11-61, P-M1B-A-4; eigene Rolle gegenüber Navy-Button-Rand) (Ph11 §6) */
  --farbe-app-fehler: #DC3333; /* Vertrag: Zahl „ohne brainX“ und Fehler-Pillen der Regler-Bühnen (hero-regler, M0b; DB §1.2; --farbe-saldo-negativ-text liegt Δ 19 im Blaukanal) (Ph11 §6) */
  --farbe-element-blau: var(--farbe-app-aktion); /* Vertrag: Symbol Posteingang, Avatar Kontaktformular, Fenster Erinnerung der Regler-Bühnen; seit Z8 = --farbe-app-aktion (wertgleich, N11-26) (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-violett: var(--farbe-app-bedingung); /* Vertrag: Avatar der weitergeleiteten Mail der Regler-Bühnen; seit Z8 = --farbe-app-bedingung (wertgleich, N11-26) (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-gruen-flaeche: var(--farbe-app-etikett-gruen-flaeche); /* Vertrag: Chip grün und Marke „ein Datensatz“ der Regler-Bühnen; seit Z8 = --farbe-app-etikett-gruen-flaeche (wertgleich, N11-26) (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-orange-zeile: var(--farbe-orange-karte); /* Vertrag: hervorgehobene letzte Verlaufszeile der Regler-Bühnen; seit Z8 = --farbe-orange-karte (Nahdublette #FFF4EF, Sichtwechsel angenommen H11-23, N11-26) (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-tabelle: #1D7044; /* Vertrag: Symbol der Tabellenkalkulation auf der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-zettel: #FFE79E; /* Vertrag: Klebezettel auf der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-zettel-text: #5A4A18; /* Vertrag: Handschrift auf dem Klebezettel (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-zettel-nebentext: #9A8434; /* Vertrag: Unterzeile auf dem Klebezettel (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-vorher-text: var(--farbe-vgl-nebentext); /* Vertrag: Mono-Hinweise und Knotentitel der Vorher-Seite; seit Z1 = --farbe-vgl-nebentext (Nahdublette #7A8397, Δ3) (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-app-fehler-text: #C4494B; /* Vertrag: gedämpfte Fehlertexte der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-app-chip-gelb-dunkel-text: #C98E00; /* Vertrag: Chip Messe der Regler-Bühnen, Text (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-app-chip-crimson-text: #E0245E; /* Vertrag: Chip Webseite der Regler-Bühnen, Text (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-app-chip-amber-text: #FD9917; /* Vertrag: Chip Qualifiziert und angelegt der Regler-Bühnen, Text (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-regler-bahn-flaeche: #F7E2DA; /* Vertrag: leere Bahn der Zeitleiste auf der Nachher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-weiss-hinweis: rgba(255,255,255,.9); /* Vertrag: Fläche des Regler-Hinweises (produkt-animation, M0b; DB §1.2; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-element-vorher-licht: rgba(255,255,255,.30); /* Vertrag: Lichtverlauf der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-glow-orange-zart: rgba(255,60,0,.13); /* Vertrag: Glow der Nachher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --farbe-app-knopf-gruen-gedrueckt: #0B8F74; /* Vertrag: gedrückter grüner Knopf der Produktvideos (.bg.dr in VS, VR, VC) (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-app-chip-ocker-text: #B07D00; /* Vertrag: Chip „Anfrage erhalten“ der Produktvideos, Text (Kontrast 3,36:1 auf --farbe-app-chip-gelb-flaeche, unter 4,5:1, Design-Wert, Text nur in der aria-hidden-Bühne (Vermerk); video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-app-chip-petrol-tief-text: #0F8FA4; /* Vertrag: Chips „versendet“ und „gesendet“ der Produktvideos, Text (Kontrast 3,29:1 auf --farbe-app-aktion-flaeche, unter 4,5:1, Design-Wert, Text nur in der aria-hidden-Bühne (Vermerk); video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-app-chip-orange-tief-text: #D97A00; /* Vertrag: Chips „Warnung“ und „Offen“ der Produktvideos, Text (Kontrast 2,84:1 auf --farbe-app-chip-orange-flaeche, Design-Wert, Text nur in der aria-hidden-Bühne (Vermerk); video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-video-umsatz: #FF5A1F; /* Vertrag: Balken der Umsatzvorschau im Produktvideo (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-video-warnung: #FF8A3D; /* Vertrag: Kontingentbalken über der Warnschwelle im Produktvideo (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-aktion-text: var(--farbe-app-tab-text); /* Vertrag: Werkzeugtexte im Datensatzkopf der 4b-Bühnen; seit Z1 = --farbe-app-tab-text (Nahdublette #5A6070, Δ5; Kontrast 6,4:1 auf Weiß; hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-branche-gold-text: #E0A800; /* Vertrag: Branchen-Chip Beratung der 4b-Bühnen, Text (Kontrast ≈ 2,0:1 auf --farbe-app-chip-bernstein-flaeche, Design-Wert, Text nur in der aria-hidden-Bühne (Vermerk); hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-branche-pink-text: #C71656; /* Vertrag: Branchen-Chip Verlagswesen der 4b-Bühnen, Text (Kontrast 4,88:1 auf --farbe-app-chip-pink-flaeche; hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-einnahmen-2: #3FC9A5; /* Vertrag: Säule und Punkt Allg. Rechnungen im Cashflow der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-einnahmen-3: #A8E6D5; /* Vertrag: Geplante Abschläge und Schraffur im Cashflow der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-schraffur-rand: #CFEDE2; /* Vertrag: Rand der Schraffur im Cashflow der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-ausgaben-2: #4A5796; /* Vertrag: zweite Ausgabensäule im Cashflow der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-ausgaben-3: #7C87B8; /* Vertrag: dritte Ausgabensäule im Cashflow der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-legende-strom: #5B68A8; /* Vertrag: Legendenpunkt Strom im Cashflow der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-tip-miete: #4356A8; /* Vertrag: Tooltip-Punkt Miete der 4b-Bühnen (Punkt, rein grafisch, 2,57:1 auf --farbe-app-dunkel (Vermerk, aria-hidden); hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-tip-strom: #6E7CC4; /* Vertrag: Tooltip-Punkt Strom der 4b-Bühnen (Punkt, rein grafisch, 4,38:1 auf --farbe-app-dunkel; hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-tip-linie: #3A3A3A; /* Vertrag: Trennlinie im Tooltip der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-tip-netto: #F4553D; /* Vertrag: Nettogewinn im Tooltip der 4b-Bühnen (Kontrast 5,1:1 auf --farbe-app-dunkel; hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-element-4b-glow-blau: #7C8CEB; /* Vertrag: Leuchten der Ausgabensäule September der 4b-Bühnen (hero-saas-4b, M0b B; H4S DB §2.5; V-7-Muster H11-23) (Ph11 §6) */
  --farbe-orange-etikett: var(--farbe-app-chip-rotorange-flaeche); /* Vertrag: Etiketten KOSTEN und RISIKO (kostenkarten), Nahdublette #FFE9E0 → #FFE7DF (Δ 2); V-7 Teil 1 (Ph11 §6) */
  --farbe-zahlband-mitte: #1A2445; /* Ergänzung: Design, Verlauf der Zahlenkarte band, Mitte bei 62 % (Loesung Vertrieb v3 „Zahlen“, Ph12 Design-Abgleich Rollen V-E-loesungen-36) */
  --farbe-zahlband-tief: #141C36; /* Ergänzung: Design, Verlauf der Zahlenkarte band, Ende (Loesung Vertrieb v3 „Zahlen“, Ph12 Design-Abgleich Rollen V-E-loesungen-36) */
  --farbe-mint-glow-zart: rgba(0,180,143,.10); /* Ergänzung: Design `Loesung Abrechnung v3` „Vertragsjahr“, Mint-Glow oben rechts im Terminbereich (BW-76) */
  --farbe-zahlband-glow: rgba(0,180,143,.26); /* Ergänzung: Design, Mint-Glow rechts unten der Zahlenkarte band (Loesung Vertrieb v3 „Zahlen“, Ph12 Design-Abgleich Rollen V-E-loesungen-36) */
  --farbe-zahlband-pille-rand: rgba(79,216,188,.42); /* Ergänzung: Design, Rand der Pille „MIT brainX“ der Zahlenkarte band (Loesung Vertrieb v3 „Zahlen“, Ph12 Design-Abgleich Rollen V-E-loesungen-36) */
  --farbe-umschalter-chip-rand: rgba(255,60,0,.38); /* Ergänzung: Design, Rand des Chips HEUTE im Zeilen-Umschalter (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --farbe-umschalter-chip-flaeche: rgba(255,60,0,.1); /* Ergänzung: Design, Fläche des Chips HEUTE im Zeilen-Umschalter (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --farbe-umschalter-balken-orange-ende: #FF8A5C; /* Ergänzung: Design, Ende des Balkenverlaufs im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --farbe-umschalter-balken-mint-ende: #7BF0D8; /* Ergänzung: Design, Ende des Balkenverlaufs im Zustand Mit brainX (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --farbe-umschalter-linie-orange: #FFC3B0; /* Ergänzung: Design, Linie links vom Text im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --farbe-umschalter-linie-mint: #9FE7DA; /* Ergänzung: Design, Linie links vom Text im Zustand Mit brainX (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --farbe-umschalter-karte-ende: #F4F7FB; /* Ergänzung: Design, Ende des Kartenverlaufs im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --farbe-umschalter-karte-mitte: #F8FAFD; /* Ergänzung: Design, Mitte des Kartenverlaufs im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */

  --farbe-vertragshero-aktiv: rgba(0,180,143,.08); /* Ergänzung: Design-Abgleich Ph12, aktive Zeile der Rechnungsvorschau (VF Z. 714) */
  --farbe-vertragshero-aktiv-rand: rgba(0,180,143,.45); /* Ergänzung: Design-Abgleich Ph12, Rand der aktiven Zeile der Rechnungsvorschau (VF Z. 713) */
  --farbe-vertragshero-monat: rgba(255,255,255,.8); /* Ergänzung: Design-Abgleich Ph12, Monat in der aktiven Datumskachel (VF Z. 711) */
  --farbe-vertragshero-puls: #8CDDCD; /* Ergänzung: Design-Abgleich Ph12, Farbe des Pulspunkts bei 50 % (VF heroPuls Z. 37) */
  --farbe-steckbrief-punkt-blau: #6FA8F0; /* Ergänzung: Design-Abgleich Ph12, blauer Punkt der Steckbrief-Pillen (AD Z. 130, CF Z. 105) */
  --farbe-kreis-offen: #C9CED9; /* Ergänzung: Design-Abgleich Ph12, Rand des offenen Schrittkreises der Schritte-Karte (Startseite v6 S1; V-A-rahmen-9) */
  --farbe-mint-spur: #CDEFE6; /* Ergänzung: Design, helle Spur der Mini-Grafiken Ring und Torte in den Hero-Kacheln (Loesung Startups v3, Z. 70–73) (Ph12 Design-Abgleich) */
  --farbe-linie-hover: #C3CAD8; /* Ergänzung: Design, Rand der Vertrauenskarten im Hover (Loesung Startups v3, Z. 193) (Ph12 Design-Abgleich) */
  --farbe-orange-blass: #FBE9E4; /* Ergänzung: Design, Pille „fehleranfällig“ der Vergleichsgrafik (kernunterschied vergleich; Loesung Abrechnung v3 Z. 135) (Ph12 Design-Abgleich) */
  --farbe-linie-gestrichelt: #A9B2C2; /* Ergänzung: Design, gestrichelte Linie „von Hand“ der Vergleichsgrafik (Loesung Abrechnung v3 Z. 130) (Ph12 Design-Abgleich) */
  --farbe-glow-mint-vergleich: rgba(79,216,188,.24); /* Ergänzung: Design, Glow oben rechts in der Navy-Hälfte der Vergleichsgrafik (Loesung Abrechnung v3 Z. 143) (Ph12 Design-Abgleich) */
  --farbe-glow-mint-vergleich-aus: rgba(79,216,188,0); /* Ergänzung: Design, Ausblendung des Glows der Vergleichsgrafik (Ph12 Design-Abgleich) */
  --farbe-kennzahl-vorher: #B6C0D2; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 688, durchgestrichener Vorherwert */
  --farbe-story-haken-gedaempft: #80BCAF; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 1317 (Grün #00795F bei Deckkraft .5 auf Weiß) */
  --farbe-story-kicker-gedaempft: #E3977F; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 1317 (Orange #C83000 bei Deckkraft .5 auf Weiß) */
  --farbe-navy-text-offen: #8F9BBC; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 123, Zeilentext im Stand-Kasten vor der Antwort */

  /* == Schrift-Familien == */
  --schrift-familie-text: Archivo, system-ui, sans-serif; /* Spec: Website, Archivo bis Modern Era per @font-face kommt (design.md Z. 42, N4-62; V-A-rahmen-1) */
  --schrift-familie-mono: 'JetBrains Mono', ui-monospace, monospace; /* Spec: Code-Akzente – Eyebrows, Brotkrumen, Labels */
  --schrift-familie-app: Roboto, system-ui, sans-serif; /* Spec: Nachbauten der brainX-Oberfläche */
  --schrift-familie-hand: Caveat, cursive; /* Spec: Handschrift in Hero-Animationen */
  --schrift-familie-system: system-ui, -apple-system, 'Segoe UI', sans-serif; /* Vertrag: Fremdsysteme in den Bühnen, Systemschrift ohne Laden (Ph5 §6.1) */
  --schrift-familie-fremd-grotesk: 'Helvetica Neue', Arial, sans-serif; /* Vertrag: nachgestelltes Website-Formular, Systemschrift ohne Laden (Ph5 §6.5) */
  --schrift-familie-fremd-serif: Georgia, serif; /* Vertrag: nachgestelltes Website-Formular, Systemschrift ohne Laden (Ph5 §6.5) */
  /* == Schriftstufen == */
  --schrift-hero-gewicht: 800; /* Spec: Hero-Aussage */
  --schrift-hero-groesse: clamp(34px, 3.6vw, 52px); /* Spec: Hero-Aussage */
  --schrift-hero-zeile: 1.08; /* Spec: Hero-Aussage */
  --schrift-hero-laufweite: -1.6px; /* Spec: Hero-Aussage */
  --schrift-titel-gewicht: 800; /* Ergänzung: H1 groß im kompakten Hero */
  --schrift-titel-groesse: 44px; /* Ergänzung: H1 groß im kompakten Hero */
  --schrift-titel-zeile: 1.1; /* Ergänzung: H1 groß im kompakten Hero */
  --schrift-titel-laufweite: -1.5px; /* Ergänzung: H1 groß im kompakten Hero */
  --schrift-kicker-gewicht: 500; /* Spec: H1 als Kicker */
  --schrift-kicker-groesse: 13px; /* Spec: H1 als Kicker */
  --schrift-kicker-zeile: 1.3077; /* Spec: H1 als Kicker; feste Zeilenhöhe von JetBrains Mono (17 px bei 13 px) gegen den Layoutsprung beim Schriftwechsel (P-H2C-15) */
  --schrift-kicker-laufweite: 0.5px; /* Spec: H1 als Kicker */
  --schrift-h2-gewicht: 800; /* Spec: H2 überall */
  --schrift-h2-groesse: 36px; /* Spec: H2 überall */
  --schrift-h2-zeile: 1.16; /* Spec: H2 überall */
  --schrift-h2-laufweite: -1.2px; /* Spec: H2 überall */
  --schrift-h3-gewicht: 800; /* Spec: H3 Karte */
  --schrift-h3-groesse: 20px; /* Spec: H3 Karte, Spanne 17–20 (20 px: 269×) */
  --schrift-h3-zeile: 1.3; /* Spec: H3 Karte */
  --schrift-h3-laufweite: -0.4px; /* Spec: H3 Karte (155×) */
  --schrift-lead-gewicht: 400; /* Spec: Lead */
  --schrift-lead-groesse: 18px; /* Spec: Lead */
  --schrift-lead-zeile: 1.62; /* Spec: Lead */
  --schrift-lead-laufweite: 0; /* Spec: Lead */
  --schrift-text-gewicht: 400; /* Spec: Fließtext */
  --schrift-text-groesse: 16.5px; /* Spec: Fließtext */
  --schrift-text-zeile: 1.65; /* Spec: Fließtext */
  --schrift-text-laufweite: 0; /* Spec: Fließtext */
  --schrift-text-kompakt-gewicht: 400; /* Ergänzung: Rechtstext, Seitenspalte */
  --schrift-text-kompakt-groesse: 15px; /* Ergänzung: Rechtstext, Seitenspalte (191×) */
  --schrift-text-kompakt-zeile: 1.65; /* Ergänzung: Rechtstext, Seitenspalte */
  --schrift-text-kompakt-laufweite: 0; /* Ergänzung: Rechtstext, Seitenspalte */
  --schrift-liste-gewicht: 400; /* Spec: Liste, Tabelle */
  --schrift-liste-groesse: 15px; /* Spec: Liste, Tabelle */
  --schrift-liste-zeile: 1.5; /* Spec: Liste, Tabelle */
  --schrift-liste-laufweite: 0; /* Spec: Liste, Tabelle */
  --schrift-fussnote-gewicht: 400; /* Spec: Fußnote */
  --schrift-fussnote-groesse: 12.5px; /* Spec: Fußnote */
  --schrift-fussnote-zeile: 1.6; /* Spec: Fußnote */
  --schrift-fussnote-laufweite: 0; /* Spec: Fußnote */
  --schrift-zahl-gewicht: 800; /* Spec: Große Zahl */
  --schrift-zahl-groesse: 34px; /* Spec: Große Zahl, Spanne 34–60 (34 px: häufigste) */
  --schrift-zahl-zeile: 1; /* Spec: Große Zahl */
  --schrift-zahl-laufweite: -1.3px; /* Spec: Große Zahl */
  --schrift-zahl-gross-gewicht: 800; /* Spec: Hero-Zahl */
  --schrift-zahl-gross-groesse: 60px; /* Spec: Hero-Zahl, Spannenende (Hero-Zahlenkarte) */
  --schrift-zahl-gross-zeile: 1; /* Spec: Hero-Zahl */
  --schrift-zahl-gross-laufweite: -2.4px; /* Spec: Hero-Zahl */
  --schrift-eyebrow-gewicht: 500; /* Spec: Eyebrow */
  --schrift-eyebrow-groesse: 11px; /* Spec: Eyebrow */
  --schrift-eyebrow-zeile: normal; /* Spec: Eyebrow */
  --schrift-eyebrow-laufweite: 1.3px; /* Spec: Eyebrow */
  --schrift-label-gewicht: 700; /* Ergänzung: Mono-Label, Seitenspalte (345×) */
  --schrift-label-groesse: 10.5px; /* Ergänzung: Mono-Label, Seitenspalte */
  --schrift-label-zeile: normal; /* Ergänzung: Mono-Label, Seitenspalte */
  --schrift-label-laufweite: 1.2px; /* Ergänzung: Mono-Label, Seitenspalte */
  --schrift-etikett-gewicht: 500; /* Ergänzung: Mono-Etikett-Pille (12×) */
  --schrift-etikett-groesse: 11px; /* Ergänzung: Mono-Etikett-Pille */
  --schrift-etikett-zeile: 1; /* Ergänzung: Mono-Etikett-Pille */
  --schrift-etikett-laufweite: 0.3px; /* Ergänzung: Mono-Etikett-Pille */
  --schrift-button-gewicht: 700; /* Ergänzung: Buttons (247×) */
  --schrift-button-groesse: 15.5px; /* Ergänzung: Buttons */
  --schrift-button-zeile: normal; /* Ergänzung: Buttons */
  --schrift-button-laufweite: 0; /* Ergänzung: Buttons */
  --schrift-textlink-gewicht: 700; /* Ergänzung: Textlink */
  --schrift-textlink-groesse: 14px; /* Ergänzung: Textlink */
  --schrift-textlink-zeile: normal; /* Ergänzung: Textlink */
  --schrift-textlink-laufweite: 0; /* Ergänzung: Textlink */
  --schrift-pille-gewicht: 700; /* Ergänzung: Pille */
  --schrift-pille-groesse: 11.5px; /* Ergänzung: Pille */
  --schrift-pille-zeile: 1; /* Ergänzung: Pille */
  --schrift-pille-laufweite: 0; /* Ergänzung: Pille */
  --schrift-pille-gross-gewicht: 700; /* Ergänzung: Ergebnis-Pille */
  --schrift-pille-gross-groesse: 12.5px; /* Ergänzung: Ergebnis-Pille */
  --schrift-pille-gross-zeile: 1; /* Ergänzung: Ergebnis-Pille */
  --schrift-pille-gross-laufweite: 0; /* Ergänzung: Ergebnis-Pille */
  --schrift-menue-punkt-gewicht: 500; /* Vertrag: Hauptpunkte des Menüs (Ph2 §5) */
  --schrift-menue-punkt-groesse: 15px; /* Vertrag: Hauptpunkte des Menüs (Ph2 §5) */
  --schrift-menue-punkt-zeile: normal; /* Vertrag: Hauptpunkte des Menüs (Ph2 §5) */
  --schrift-menue-punkt-laufweite: 0; /* Vertrag: Hauptpunkte des Menüs (Ph2 §5) */
  --schrift-menue-eintrag-gewicht: 600; /* Vertrag: Einträge der Menü-Panels (Ph2 §5) */
  --schrift-menue-eintrag-groesse: 14.5px; /* Vertrag: Einträge der Menü-Panels (Ph2 §5) */
  --schrift-menue-eintrag-zeile: 1.35; /* Vertrag: Einträge der Menü-Panels (Ph2 §5) */
  --schrift-menue-eintrag-laufweite: 0; /* Vertrag: Einträge der Menü-Panels (Ph2 §5) */
  --schrift-menue-beschreibung-gewicht: 400; /* Vertrag: Unterzeilen der Menü-Panels (Ph2 §5) */
  --schrift-menue-beschreibung-groesse: 12.5px; /* Vertrag: Unterzeilen der Menü-Panels (Ph2 §5) */
  --schrift-menue-beschreibung-zeile: 1.45; /* Vertrag: Unterzeilen der Menü-Panels (Ph2 §5) */
  --schrift-menue-beschreibung-laufweite: 0; /* Vertrag: Unterzeilen der Menü-Panels (Ph2 §5) */
  --schrift-menue-label-gewicht: 700; /* Vertrag: Spaltenlabels des Menüs, Archivo, Versalien per CSS (Ph2 §5) */
  --schrift-menue-label-groesse: 11px; /* Vertrag: Spaltenlabels des Menüs, Archivo, Versalien per CSS (Ph2 §5) */
  --schrift-menue-label-zeile: normal; /* Vertrag: Spaltenlabels des Menüs, Archivo, Versalien per CSS (Ph2 §5) */
  --schrift-menue-label-laufweite: 1.2px; /* Vertrag: Spaltenlabels des Menüs, Archivo, Versalien per CSS (Ph2 §5) */
  --schrift-kopf-cta-gewicht: 600; /* Vertrag: Kopf-CTA in Ruhe (Ph2 §5) */
  --schrift-kopf-cta-groesse: 15px; /* Vertrag: Kopf-CTA in Ruhe (Ph2 §5) */
  --schrift-kopf-cta-zeile: normal; /* Vertrag: Kopf-CTA in Ruhe (Ph2 §5) */
  --schrift-kopf-cta-laufweite: 0; /* Vertrag: Kopf-CTA in Ruhe (Ph2 §5) */
  --schrift-fuss-kopf-gewicht: 700; /* Vertrag: Spaltentitel im Fuß (Ph2 §5) */
  --schrift-fuss-kopf-groesse: 13px; /* Vertrag: Spaltentitel im Fuß (Ph2 §5) */
  --schrift-fuss-kopf-zeile: normal; /* Vertrag: Spaltentitel im Fuß (Ph2 §5) */
  --schrift-fuss-kopf-laufweite: 1px; /* Vertrag: Spaltentitel im Fuß (Ph2 §5) */
  --schrift-fuss-link-gewicht: 400; /* Vertrag: Links im Fuß (Ph2 §5) */
  --schrift-fuss-link-groesse: 14px; /* Vertrag: Links im Fuß (Ph2 §5) */
  --schrift-fuss-link-zeile: normal; /* Vertrag: Links im Fuß (Ph2 §5) */
  --schrift-fuss-link-laufweite: 0; /* Vertrag: Links im Fuß (Ph2 §5) */
  --schrift-brotkrumen-gewicht: 500; /* Vertrag: Brotkrumen, Mono (Ph2 §5) */
  --schrift-brotkrumen-groesse: 12.5px; /* Vertrag: Brotkrumen, Mono (Ph2 §5) */
  --schrift-brotkrumen-zeile: 1.36; /* Vertrag: Brotkrumen, Mono (Ph2 §5); feste Zeilenhöhe von JetBrains Mono (17 px bei 12.5 px) gegen den Layoutsprung beim Schriftwechsel (P-H2C-15) */
  --schrift-brotkrumen-laufweite: 0.4px; /* Vertrag: Brotkrumen, Mono (Ph2 §5) */
  --schrift-burger-gruppe-gewicht: 600; /* Vertrag: Gruppentitel im Burger-Menü (Ph2 §5) */
  --schrift-burger-gruppe-groesse: 17px; /* Vertrag: Gruppentitel im Burger-Menü (Ph2 §5) */
  --schrift-burger-gruppe-zeile: normal; /* Vertrag: Gruppentitel im Burger-Menü (Ph2 §5) */
  --schrift-burger-gruppe-laufweite: 0; /* Vertrag: Gruppentitel im Burger-Menü (Ph2 §5) */
  --schrift-burger-eintrag-gewicht: 600; /* Vertrag: Einträge im Burger-Menü (Ph2 §5) */
  --schrift-burger-eintrag-groesse: 15px; /* Vertrag: Einträge im Burger-Menü (Ph2 §5) */
  --schrift-burger-eintrag-zeile: 1.35; /* Vertrag: Einträge im Burger-Menü (Ph2 §5) */
  --schrift-burger-eintrag-laufweite: 0; /* Vertrag: Einträge im Burger-Menü (Ph2 §5) */
  --schrift-burger-beschreibung-gewicht: 400; /* Vertrag: Unterzeilen im Burger-Menü (Ph2 §5) */
  --schrift-burger-beschreibung-groesse: 13px; /* Vertrag: Unterzeilen im Burger-Menü (Ph2 §5) */
  --schrift-burger-beschreibung-zeile: 1.45; /* Vertrag: Unterzeilen im Burger-Menü (Ph2 §5) */
  --schrift-burger-beschreibung-laufweite: 0; /* Vertrag: Unterzeilen im Burger-Menü (Ph2 §5) */
  --schrift-menue-intro-titel-gewicht: 700; /* Vertrag: Intro-Titel im Panel Produkt (Ph2 §5) */
  --schrift-menue-intro-titel-groesse: 19px; /* Vertrag: Intro-Titel im Panel Produkt (Ph2 §5) */
  --schrift-menue-intro-titel-zeile: 1.28; /* Vertrag: Intro-Titel im Panel Produkt (Ph2 §5) */
  --schrift-menue-intro-titel-laufweite: 0; /* Vertrag: Intro-Titel im Panel Produkt (Ph2 §5) */
  --schrift-social-gewicht: 600; /* Vertrag: Social-Buttons im Fuß (Ph2 §5) */
  --schrift-social-groesse: 13.5px; /* Vertrag: Social-Buttons im Fuß (Ph2 §5) */
  --schrift-social-zeile: normal; /* Vertrag: Social-Buttons im Fuß (Ph2 §5) */
  --schrift-social-laufweite: 0; /* Vertrag: Social-Buttons im Fuß (Ph2 §5) */
  --schrift-treffer-titel-gewicht: 700; /* Vertrag: Titel der Trefferkarte (Ph2 §5) */
  --schrift-treffer-titel-groesse: 17.5px; /* Vertrag: Titel der Trefferkarte (Ph2 §5) */
  --schrift-treffer-titel-zeile: 1.35; /* Vertrag: Titel der Trefferkarte (Ph2 §5) */
  --schrift-treffer-titel-laufweite: 0; /* Vertrag: Titel der Trefferkarte (Ph2 §5) */
  --schrift-suchpfad-gewicht: 500; /* Vertrag: Pfadzeile der Treffer, Mono (Ph2 §5) */
  --schrift-suchpfad-groesse: 11.5px; /* Vertrag: Pfadzeile der Treffer, Mono (Ph2 §5) */
  --schrift-suchpfad-zeile: 1.3; /* Vertrag: Pfadzeile der Treffer, Mono (Ph2 §5) */
  --schrift-suchpfad-laufweite: 0; /* Vertrag: Pfadzeile der Treffer, Mono (Ph2 §5) */
  --schrift-suchfeld-gewicht: 400; /* Vertrag: Suchfeld im Kopf (Ph2 §5) */
  --schrift-suchfeld-groesse: 14px; /* Vertrag: Suchfeld im Kopf (Ph2 §5) */
  --schrift-suchfeld-zeile: normal; /* Vertrag: Suchfeld im Kopf (Ph2 §5) */
  --schrift-suchfeld-laufweite: 0; /* Vertrag: Suchfeld im Kopf (Ph2 §5) */
  --schrift-suchfeld-gross-gewicht: 400; /* Vertrag: Suchfeld der Seite und des Burger-Menüs (Ph2 §5) */
  --schrift-suchfeld-gross-groesse: 16px; /* Vertrag: Suchfeld der Seite und des Burger-Menüs (Ph2 §5) */
  --schrift-suchfeld-gross-zeile: normal; /* Vertrag: Suchfeld der Seite und des Burger-Menüs (Ph2 §5) */
  --schrift-suchfeld-gross-laufweite: 0; /* Vertrag: Suchfeld der Seite und des Burger-Menüs (Ph2 §5) */
  --schrift-kopf-cta-kompakt-gewicht: 600; /* Vertrag: Kopf-CTA im Kompaktmodus (Ph2 §5) */
  --schrift-kopf-cta-kompakt-groesse: 13.5px; /* Vertrag: Kopf-CTA im Kompaktmodus (Ph2 §5) */
  --schrift-kopf-cta-kompakt-zeile: normal; /* Vertrag: Kopf-CTA im Kompaktmodus (Ph2 §5) */
  --schrift-kopf-cta-kompakt-laufweite: 0; /* Vertrag: Kopf-CTA im Kompaktmodus (Ph2 §5) */
  --schrift-menue-link-gewicht: 600; /* Vertrag: Schnellzugriff-Links und Integrationen-Zeile im Panel (Ph2 §5) */
  --schrift-menue-link-groesse: 13.5px; /* Vertrag: Schnellzugriff-Links und Integrationen-Zeile im Panel (Ph2 §5) */
  --schrift-menue-link-zeile: normal; /* Vertrag: Schnellzugriff-Links und Integrationen-Zeile im Panel (Ph2 §5) */
  --schrift-menue-link-laufweite: 0; /* Vertrag: Schnellzugriff-Links und Integrationen-Zeile im Panel (Ph2 §5) */
  --schrift-menue-aktion-gewicht: 700; /* Vertrag: Aktionslinks im Panel (App oder CRM, Live-Demo, Story lesen) (Ph2 §5) */
  --schrift-menue-aktion-groesse: 13.5px; /* Vertrag: Aktionslinks im Panel (App oder CRM, Live-Demo, Story lesen) (Ph2 §5) */
  --schrift-menue-aktion-zeile: normal; /* Vertrag: Aktionslinks im Panel (App oder CRM, Live-Demo, Story lesen) (Ph2 §5) */
  --schrift-menue-aktion-laufweite: 0; /* Vertrag: Aktionslinks im Panel (App oder CRM, Live-Demo, Story lesen) (Ph2 §5) */
  --schrift-menue-intro-text-gewicht: 400; /* Vertrag: Fließtext im Intro des Panels Produkt (Ph2 §5) */
  --schrift-menue-intro-text-groesse: 13.5px; /* Vertrag: Fließtext im Intro des Panels Produkt (Ph2 §5) */
  --schrift-menue-intro-text-zeile: 1.55; /* Vertrag: Fließtext im Intro des Panels Produkt (Ph2 §5) */
  --schrift-menue-intro-text-laufweite: 0; /* Vertrag: Fließtext im Intro des Panels Produkt (Ph2 §5) */
  --schrift-menue-teaser-titel-gewicht: 600; /* Vertrag: Titel von Promo Startups und Story-Teaser im Panel (Ph2 §5) */
  --schrift-menue-teaser-titel-groesse: 14px; /* Vertrag: Titel von Promo Startups und Story-Teaser im Panel (Ph2 §5) */
  --schrift-menue-teaser-titel-zeile: 1.4; /* Vertrag: Titel von Promo Startups und Story-Teaser im Panel (Ph2 §5) */
  --schrift-menue-teaser-titel-laufweite: 0; /* Vertrag: Titel von Promo Startups und Story-Teaser im Panel (Ph2 §5) */
  --schrift-menue-teaser-label-gewicht: 700; /* Vertrag: Etikett des Story-Teasers, Versalien per CSS (Ph2 §5) */
  --schrift-menue-teaser-label-groesse: 10.5px; /* Vertrag: Etikett des Story-Teasers, Versalien per CSS (Ph2 §5) */
  --schrift-menue-teaser-label-zeile: normal; /* Vertrag: Etikett des Story-Teasers, Versalien per CSS (Ph2 §5) */
  --schrift-menue-teaser-label-laufweite: 1.3px; /* Vertrag: Etikett des Story-Teasers, Versalien per CSS (Ph2 §5) */
  --schrift-menue-promo-button-gewicht: 600; /* Vertrag: Button der Promo Startups (Ph2 §5) */
  --schrift-menue-promo-button-groesse: 13px; /* Vertrag: Button der Promo Startups (Ph2 §5) */
  --schrift-menue-promo-button-zeile: normal; /* Vertrag: Button der Promo Startups (Ph2 §5) */
  --schrift-menue-promo-button-laufweite: 0; /* Vertrag: Button der Promo Startups (Ph2 §5) */
  --schrift-burger-plus-gewicht: 400; /* Vertrag: Plus-Zeichen der Burger-Gruppen (Ph2 §5) */
  --schrift-burger-plus-groesse: 28px; /* Vertrag: Plus-Zeichen der Burger-Gruppen (Ph2 §5) */
  --schrift-burger-plus-zeile: 1; /* Vertrag: Plus-Zeichen der Burger-Gruppen (Ph2 §5) */
  --schrift-burger-plus-laufweite: 0; /* Vertrag: Plus-Zeichen der Burger-Gruppen (Ph2 §5) */
  --schrift-fuss-text-gewicht: 400; /* Vertrag: Beschreibung der Marke im Fuß (Ph2 §5) */
  --schrift-fuss-text-groesse: 14px; /* Vertrag: Beschreibung der Marke im Fuß (Ph2 §5) */
  --schrift-fuss-text-zeile: 1.6; /* Vertrag: Beschreibung der Marke im Fuß (Ph2 §5) */
  --schrift-fuss-text-laufweite: 0; /* Vertrag: Beschreibung der Marke im Fuß (Ph2 §5) */
  --schrift-fuss-label-gewicht: 700; /* Vertrag: Labels Folgen Sie uns und Newsletter im Fuß, Mono (Ph2 §5) */
  --schrift-fuss-label-groesse: 11.5px; /* Vertrag: Labels Folgen Sie uns und Newsletter im Fuß, Mono (Ph2 §5) */
  --schrift-fuss-label-zeile: normal; /* Vertrag: Labels Folgen Sie uns und Newsletter im Fuß, Mono (Ph2 §5) */
  --schrift-fuss-label-laufweite: 1.4px; /* Vertrag: Labels Folgen Sie uns und Newsletter im Fuß, Mono (Ph2 §5) */
  --schrift-fuss-recht-gewicht: 400; /* Vertrag: Bodenzeile des Fußes: Copyright und Rechtslinks (Ph2 §5) */
  --schrift-fuss-recht-groesse: 13px; /* Vertrag: Bodenzeile des Fußes: Copyright und Rechtslinks (Ph2 §5) */
  --schrift-fuss-recht-zeile: 1.5; /* Vertrag: Bodenzeile des Fußes: Copyright und Rechtslinks (Ph2 §5) */
  --schrift-fuss-recht-laufweite: 0; /* Vertrag: Bodenzeile des Fußes: Copyright und Rechtslinks (Ph2 §5) */
  --schrift-fuss-feld-gewicht: 400; /* Vertrag: E-Mail-Feld des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-feld-groesse: 13.5px; /* Vertrag: E-Mail-Feld des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-feld-zeile: normal; /* Vertrag: E-Mail-Feld des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-feld-laufweite: 0; /* Vertrag: E-Mail-Feld des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-einwilligung-gewicht: 400; /* Vertrag: Einwilligungstext des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-einwilligung-groesse: 11.5px; /* Vertrag: Einwilligungstext des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-einwilligung-zeile: 1.45; /* Vertrag: Einwilligungstext des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-einwilligung-laufweite: 0; /* Vertrag: Einwilligungstext des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-fehler-gewicht: 500; /* Vertrag: Fehlerzeile des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-fehler-groesse: 12px; /* Vertrag: Fehlerzeile des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-fehler-zeile: 1.4; /* Vertrag: Fehlerzeile des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-fehler-laufweite: 0; /* Vertrag: Fehlerzeile des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-absenden-gewicht: 600; /* Vertrag: Absenden-Button des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-absenden-groesse: 13.5px; /* Vertrag: Absenden-Button des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-absenden-zeile: normal; /* Vertrag: Absenden-Button des Newsletters im Fuß (Ph2 §5) */
  --schrift-fuss-absenden-laufweite: 0; /* Vertrag: Absenden-Button des Newsletters im Fuß (Ph2 §5) */
  --schrift-suchpanel-filter-gewicht: 600; /* Vertrag: Bereichsfilter im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-filter-groesse: 13.5px; /* Vertrag: Bereichsfilter im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-filter-zeile: normal; /* Vertrag: Bereichsfilter im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-filter-laufweite: 0; /* Vertrag: Bereichsfilter im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-alle-gewicht: 700; /* Vertrag: Link Alle Ergebnisse im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-alle-groesse: 13px; /* Vertrag: Link Alle Ergebnisse im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-alle-zeile: normal; /* Vertrag: Link Alle Ergebnisse im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-alle-laufweite: 0; /* Vertrag: Link Alle Ergebnisse im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-hinweis-gewicht: 400; /* Vertrag: Tastaturhinweis im Kopf-Suchpanel, Mono (Ph2 §5) */
  --schrift-suchpanel-hinweis-groesse: 11.5px; /* Vertrag: Tastaturhinweis im Kopf-Suchpanel, Mono (Ph2 §5) */
  --schrift-suchpanel-hinweis-zeile: normal; /* Vertrag: Tastaturhinweis im Kopf-Suchpanel, Mono (Ph2 §5) */
  --schrift-suchpanel-hinweis-laufweite: 0; /* Vertrag: Tastaturhinweis im Kopf-Suchpanel, Mono (Ph2 §5) */
  --schrift-suchpanel-vorschlag-gewicht: 600; /* Vertrag: Vorschlags-Chips im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-vorschlag-groesse: 12.5px; /* Vertrag: Vorschlags-Chips im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-vorschlag-zeile: normal; /* Vertrag: Vorschlags-Chips im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-vorschlag-laufweite: 0; /* Vertrag: Vorschlags-Chips im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-titel-gewicht: 600; /* Vertrag: Titel der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-titel-groesse: 15px; /* Vertrag: Titel der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-titel-zeile: 1.35; /* Vertrag: Titel der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-titel-laufweite: 0; /* Vertrag: Titel der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-beschreibung-gewicht: 400; /* Vertrag: Beschreibung der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-beschreibung-groesse: 12.5px; /* Vertrag: Beschreibung der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-beschreibung-zeile: 1.5; /* Vertrag: Beschreibung der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchpanel-treffer-beschreibung-laufweite: 0; /* Vertrag: Beschreibung der Treffer im Kopf-Suchpanel (Ph2 §5) */
  --schrift-suchleer-gewicht: 400; /* Vertrag: Hinweis ohne Treffer in Kopf-Suchpanel und Burger-Suche (Ph2 §5) */
  --schrift-suchleer-groesse: 14px; /* Vertrag: Hinweis ohne Treffer in Kopf-Suchpanel und Burger-Suche (Ph2 §5) */
  --schrift-suchleer-zeile: 1.5; /* Vertrag: Hinweis ohne Treffer in Kopf-Suchpanel und Burger-Suche (Ph2 §5) */
  --schrift-suchleer-laufweite: 0; /* Vertrag: Hinweis ohne Treffer in Kopf-Suchpanel und Burger-Suche (Ph2 §5) */
  --schrift-suchleer-gross-gewicht: 400; /* Vertrag: Hinweis ohne Treffer auf der Suchseite (Ph2 §5) */
  --schrift-suchleer-gross-groesse: 15px; /* Vertrag: Hinweis ohne Treffer auf der Suchseite (Ph2 §5) */
  --schrift-suchleer-gross-zeile: 1.55; /* Vertrag: Hinweis ohne Treffer auf der Suchseite (Ph2 §5) */
  --schrift-suchleer-gross-laufweite: 0; /* Vertrag: Hinweis ohne Treffer auf der Suchseite (Ph2 §5) */
  --schrift-suchfilter-gewicht: 600; /* Vertrag: Bereichsfilter der Suchseite (Ph2 §5) */
  --schrift-suchfilter-groesse: 14px; /* Vertrag: Bereichsfilter der Suchseite (Ph2 §5) */
  --schrift-suchfilter-zeile: normal; /* Vertrag: Bereichsfilter der Suchseite (Ph2 §5) */
  --schrift-suchfilter-laufweite: 0; /* Vertrag: Bereichsfilter der Suchseite (Ph2 §5) */
  --schrift-suchfilter-zahl-gewicht: 500; /* Vertrag: Trefferzahl im Bereichsfilter, Kopf-Suchpanel und Suchseite, Mono (Ph2 §5) */
  --schrift-suchfilter-zahl-groesse: 12px; /* Vertrag: Trefferzahl im Bereichsfilter, Kopf-Suchpanel und Suchseite, Mono (Ph2 §5) */
  --schrift-suchfilter-zahl-zeile: normal; /* Vertrag: Trefferzahl im Bereichsfilter, Kopf-Suchpanel und Suchseite, Mono (Ph2 §5) */
  --schrift-suchfilter-zahl-laufweite: 0; /* Vertrag: Trefferzahl im Bereichsfilter, Kopf-Suchpanel und Suchseite, Mono (Ph2 §5) */
  --schrift-treffer-beschreibung-gewicht: 400; /* Vertrag: Beschreibung der Trefferkarte auf der Suchseite (Ph2 §5) */
  --schrift-treffer-beschreibung-groesse: 14px; /* Vertrag: Beschreibung der Trefferkarte auf der Suchseite (Ph2 §5) */
  --schrift-treffer-beschreibung-zeile: 1.55; /* Vertrag: Beschreibung der Trefferkarte auf der Suchseite (Ph2 §5) */
  --schrift-treffer-beschreibung-laufweite: 0; /* Vertrag: Beschreibung der Trefferkarte auf der Suchseite (Ph2 §5) */
  --schrift-suchvorschlag-gewicht: 600; /* Vertrag: Vorschlags-Chips der Suchseite (Ph2 §5) */
  --schrift-suchvorschlag-groesse: 13px; /* Vertrag: Vorschlags-Chips der Suchseite (Ph2 §5) */
  --schrift-suchvorschlag-zeile: normal; /* Vertrag: Vorschlags-Chips der Suchseite (Ph2 §5) */
  --schrift-suchvorschlag-laufweite: 0; /* Vertrag: Vorschlags-Chips der Suchseite (Ph2 §5) */
  --schrift-suchhilfe-titel-gewicht: 700; /* Vertrag: Titel des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-titel-groesse: 16px; /* Vertrag: Titel des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-titel-zeile: normal; /* Vertrag: Titel des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-titel-laufweite: 0; /* Vertrag: Titel des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-text-gewicht: 400; /* Vertrag: Text des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-text-groesse: 14px; /* Vertrag: Text des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-text-zeile: 1.5; /* Vertrag: Text des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-text-laufweite: 0; /* Vertrag: Text des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-aktion-gewicht: 600; /* Vertrag: Link und Button des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-aktion-groesse: 14px; /* Vertrag: Link und Button des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-aktion-zeile: normal; /* Vertrag: Link und Button des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-suchhilfe-aktion-laufweite: 0; /* Vertrag: Link und Button des Hilfebands unter den Treffern (Ph2 §5) */
  --schrift-sitemap-nummer-gewicht: 700; /* Ergänzung: HTML-Sitemap, Nummer des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-nummer-groesse: 11px; /* Ergänzung: HTML-Sitemap, Nummer des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-nummer-zeile: normal; /* Ergänzung: HTML-Sitemap, Nummer des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-nummer-laufweite: 1.2px; /* Ergänzung: HTML-Sitemap, Nummer des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-bereichstitel-gewicht: 700; /* Ergänzung: HTML-Sitemap, Titel des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-bereichstitel-groesse: 15px; /* Ergänzung: HTML-Sitemap, Titel des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-bereichstitel-zeile: normal; /* Ergänzung: HTML-Sitemap, Titel des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-bereichstitel-laufweite: 0; /* Ergänzung: HTML-Sitemap, Titel des Bereichs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-zahl-gewicht: 500; /* Ergänzung: HTML-Sitemap, Zahl am Bereichskopf (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-zahl-groesse: 10.5px; /* Ergänzung: HTML-Sitemap, Zahl am Bereichskopf (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-zahl-zeile: normal; /* Ergänzung: HTML-Sitemap, Zahl am Bereichskopf (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-zahl-laufweite: 0; /* Ergänzung: HTML-Sitemap, Zahl am Bereichskopf (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-gruppe-gewicht: 500; /* Ergänzung: HTML-Sitemap, Gruppenlabel und Label des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-gruppe-groesse: 10.5px; /* Ergänzung: HTML-Sitemap, Gruppenlabel und Label des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-gruppe-zeile: normal; /* Ergänzung: HTML-Sitemap, Gruppenlabel und Label des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-gruppe-laufweite: 1.2px; /* Ergänzung: HTML-Sitemap, Gruppenlabel und Label des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-link-gewicht: 500; /* Ergänzung: HTML-Sitemap, Links der Gruppen (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-link-groesse: 14px; /* Ergänzung: HTML-Sitemap, Links der Gruppen (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-link-zeile: 1.45; /* Ergänzung: HTML-Sitemap, Links der Gruppen (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-link-laufweite: 0; /* Ergänzung: HTML-Sitemap, Links der Gruppen (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-link-unter-gewicht: 400; /* Ergänzung: Design-Abgleich Ph12, eingerückte Unterseiten der HTML-Sitemap (Sitemap MAP `sub`; V-A-rahmen-32) */
  --schrift-sitemap-link-unter-groesse: 13.5px; /* Ergänzung: Design-Abgleich Ph12, eingerückte Unterseiten der HTML-Sitemap (Sitemap MAP `sub`; V-A-rahmen-32) */
  --schrift-sitemap-link-unter-zeile: 1.45; /* Ergänzung: Design-Abgleich Ph12, eingerückte Unterseiten der HTML-Sitemap (Sitemap MAP `sub`; V-A-rahmen-32) */
  --schrift-sitemap-link-unter-laufweite: 0; /* Ergänzung: Design-Abgleich Ph12, eingerückte Unterseiten der HTML-Sitemap (Sitemap MAP `sub`; V-A-rahmen-32) */
  --schrift-sitemap-schnelleinstieg-gewicht: 600; /* Ergänzung: HTML-Sitemap, Links des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-schnelleinstieg-groesse: 14px; /* Ergänzung: HTML-Sitemap, Links des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-schnelleinstieg-zeile: normal; /* Ergänzung: HTML-Sitemap, Links des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-sitemap-schnelleinstieg-laufweite: 0; /* Ergänzung: HTML-Sitemap, Links des Schnelleinstiegs (Nachzug Welle 1, P-B2-5) */
  --schrift-fehler-adresse-gewicht: 500; /* Vertrag: Fehlerseiten, Adressbox der 404, Mono (Ph3 §6) */
  --schrift-fehler-adresse-groesse: clamp(16px, 1.8vw, 23px); /* Vertrag: Fehlerseiten, Adressbox der 404, Mono (Ph3 §6) */
  --schrift-fehler-adresse-zeile: 1.55; /* Vertrag: Fehlerseiten, Adressbox der 404, Mono (Ph3 §6) */
  --schrift-fehler-adresse-laufweite: 0; /* Vertrag: Fehlerseiten, Adressbox der 404, Mono (Ph3 §6) */
  --schrift-fehler-diagnose-gewicht: 400; /* Vertrag: Fehlerseiten, Diagnose der 404 und Fußzeile der Bereiche (Ph3 §6) */
  --schrift-fehler-diagnose-groesse: 15px; /* Vertrag: Fehlerseiten, Diagnose der 404 und Fußzeile der Bereiche (Ph3 §6) */
  --schrift-fehler-diagnose-zeile: 1.55; /* Vertrag: Fehlerseiten, Diagnose der 404 und Fußzeile der Bereiche (Ph3 §6) */
  --schrift-fehler-diagnose-laufweite: 0; /* Vertrag: Fehlerseiten, Diagnose der 404 und Fußzeile der Bereiche (Ph3 §6) */
  --schrift-fehler-treffer-titel-gewicht: 800; /* Vertrag: Fehlerseiten, Titel der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-treffer-titel-groesse: 30px; /* Vertrag: Fehlerseiten, Titel der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-treffer-titel-zeile: 1.15; /* Vertrag: Fehlerseiten, Titel der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-treffer-titel-laufweite: -0.8px; /* Vertrag: Fehlerseiten, Titel der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-pfad-gewicht: 500; /* Vertrag: Fehlerseiten, Bereichspfad der Karten, Mono (Ph3 §6) */
  --schrift-fehler-pfad-groesse: 12px; /* Vertrag: Fehlerseiten, Bereichspfad der Karten, Mono (Ph3 §6) */
  --schrift-fehler-pfad-zeile: normal; /* Vertrag: Fehlerseiten, Bereichspfad der Karten, Mono (Ph3 §6) */
  --schrift-fehler-pfad-laufweite: 0; /* Vertrag: Fehlerseiten, Bereichspfad der Karten, Mono (Ph3 §6) */
  --schrift-fehler-treffer-text-gewicht: 400; /* Vertrag: Fehlerseiten, Beschreibung der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-treffer-text-groesse: 16px; /* Vertrag: Fehlerseiten, Beschreibung der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-treffer-text-zeile: 1.55; /* Vertrag: Fehlerseiten, Beschreibung der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-treffer-text-laufweite: 0; /* Vertrag: Fehlerseiten, Beschreibung der Karte „Meinten Sie“ (Ph3 §6) */
  --schrift-fehler-hinweis-titel-gewicht: 800; /* Vertrag: Fehlerseiten, Titel „Keine eindeutige Seite gefunden.“ (Ph3 §6) */
  --schrift-fehler-hinweis-titel-groesse: 20px; /* Vertrag: Fehlerseiten, Titel „Keine eindeutige Seite gefunden.“ (Ph3 §6) */
  --schrift-fehler-hinweis-titel-zeile: 1.3; /* Vertrag: Fehlerseiten, Titel „Keine eindeutige Seite gefunden.“ (Ph3 §6) */
  --schrift-fehler-hinweis-titel-laufweite: 0; /* Vertrag: Fehlerseiten, Titel „Keine eindeutige Seite gefunden.“ (Ph3 §6) */
  --schrift-fehler-hinweis-gewicht: 400; /* Vertrag: Fehlerseiten, Hinweistext der 404 und Ersatz-Text der 410 (Ph3 §6) */
  --schrift-fehler-hinweis-groesse: 15.5px; /* Vertrag: Fehlerseiten, Hinweistext der 404 und Ersatz-Text der 410 (Ph3 §6) */
  --schrift-fehler-hinweis-zeile: 1.55; /* Vertrag: Fehlerseiten, Hinweistext der 404 und Ersatz-Text der 410 (Ph3 §6) */
  --schrift-fehler-hinweis-laufweite: 0; /* Vertrag: Fehlerseiten, Hinweistext der 404 und Ersatz-Text der 410 (Ph3 §6) */
  --schrift-fehler-chip-gewicht: 600; /* Vertrag: Fehlerseiten, Chips „Auch passend“ und „Am ehesten“ der 404 (Ph3 §6) */
  --schrift-fehler-chip-groesse: 14px; /* Vertrag: Fehlerseiten, Chips „Auch passend“ und „Am ehesten“ der 404 (Ph3 §6) */
  --schrift-fehler-chip-zeile: normal; /* Vertrag: Fehlerseiten, Chips „Auch passend“ und „Am ehesten“ der 404 (Ph3 §6) */
  --schrift-fehler-chip-laufweite: 0; /* Vertrag: Fehlerseiten, Chips „Auch passend“ und „Am ehesten“ der 404 (Ph3 §6) */
  --schrift-feld-label-gewicht: 600; /* Vertrag: Fehlerseiten, sichtbares Feldlabel, Suchfeld der 404 (auch Ph6) (Ph3 §6) */
  --schrift-feld-label-groesse: 13.5px; /* Vertrag: Fehlerseiten, sichtbares Feldlabel, Suchfeld der 404 (auch Ph6) (Ph3 §6) */
  --schrift-feld-label-zeile: normal; /* Vertrag: Fehlerseiten, sichtbares Feldlabel, Suchfeld der 404 (auch Ph6) (Ph3 §6) */
  --schrift-feld-label-laufweite: 0; /* Vertrag: Fehlerseiten, sichtbares Feldlabel, Suchfeld der 404 (auch Ph6) (Ph3 §6) */
  --schrift-fehler-bereich-gewicht: 700; /* Vertrag: Fehlerseiten, Name der Bereichskarte (Ph3 §6) */
  --schrift-fehler-bereich-groesse: 16px; /* Vertrag: Fehlerseiten, Name der Bereichskarte (Ph3 §6) */
  --schrift-fehler-bereich-zeile: normal; /* Vertrag: Fehlerseiten, Name der Bereichskarte (Ph3 §6) */
  --schrift-fehler-bereich-laufweite: 0; /* Vertrag: Fehlerseiten, Name der Bereichskarte (Ph3 §6) */
  --schrift-fehler-link-gewicht: 500; /* Vertrag: Fehlerseiten, Links der Bereichskarten (Ph3 §6) */
  --schrift-fehler-link-groesse: 14.5px; /* Vertrag: Fehlerseiten, Links der Bereichskarten (Ph3 §6) */
  --schrift-fehler-link-zeile: 1.4; /* Vertrag: Fehlerseiten, Links der Bereichskarten (Ph3 §6) */
  --schrift-fehler-link-laufweite: 0; /* Vertrag: Fehlerseiten, Links der Bereichskarten (Ph3 §6) */
  --schrift-fehler-anlass-titel-gewicht: 800; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-anlass-titel-groesse: 24px; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-anlass-titel-zeile: 1.25; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-anlass-titel-laufweite: -0.5px; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-anlass-text-gewicht: 400; /* Vertrag: Fehlerseiten, Text des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-anlass-text-groesse: 16.5px; /* Vertrag: Fehlerseiten, Text des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-anlass-text-zeile: 1.62; /* Vertrag: Fehlerseiten, Text des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-anlass-text-laufweite: 0; /* Vertrag: Fehlerseiten, Text des Anlasses der 410 (Ph3 §6) */
  --schrift-fehler-label-gewicht: 700; /* Vertrag: Fehlerseiten, Labels „Entfernte Adresse“ und „Auch passend“ der 410, Mono (Ph3 §6) */
  --schrift-fehler-label-groesse: 10.5px; /* Vertrag: Fehlerseiten, Labels „Entfernte Adresse“ und „Auch passend“ der 410, Mono (Ph3 §6) */
  --schrift-fehler-label-zeile: normal; /* Vertrag: Fehlerseiten, Labels „Entfernte Adresse“ und „Auch passend“ der 410, Mono (Ph3 §6) */
  --schrift-fehler-label-laufweite: 1.1px; /* Vertrag: Fehlerseiten, Labels „Entfernte Adresse“ und „Auch passend“ der 410, Mono (Ph3 §6) */
  --schrift-fehler-entfernt-gewicht: 500; /* Vertrag: Fehlerseiten, entfernte Adresse der 410, Mono (Ph3 §6) */
  --schrift-fehler-entfernt-groesse: 13.5px; /* Vertrag: Fehlerseiten, entfernte Adresse der 410, Mono (Ph3 §6) */
  --schrift-fehler-entfernt-zeile: 1.45; /* Vertrag: Fehlerseiten, entfernte Adresse der 410, Mono (Ph3 §6) */
  --schrift-fehler-entfernt-laufweite: 0; /* Vertrag: Fehlerseiten, entfernte Adresse der 410, Mono (Ph3 §6) */
  --schrift-fehler-datum-gewicht: 400; /* Vertrag: Fehlerseiten, Zeile „Entfernt im …“ der 410 (Ph3 §6) */
  --schrift-fehler-datum-groesse: 13px; /* Vertrag: Fehlerseiten, Zeile „Entfernt im …“ der 410 (Ph3 §6) */
  --schrift-fehler-datum-zeile: normal; /* Vertrag: Fehlerseiten, Zeile „Entfernt im …“ der 410 (Ph3 §6) */
  --schrift-fehler-datum-laufweite: 0; /* Vertrag: Fehlerseiten, Zeile „Entfernt im …“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-titel-gewicht: 800; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-titel-groesse: 26px; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-titel-zeile: 1.2; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-titel-laufweite: -0.6px; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-link-gewicht: 600; /* Vertrag: Fehlerseiten, Links „Auch passend“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-link-groesse: 14px; /* Vertrag: Fehlerseiten, Links „Auch passend“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-link-zeile: normal; /* Vertrag: Fehlerseiten, Links „Auch passend“ der 410 (Ph3 §6) */
  --schrift-fehler-ersatz-link-laufweite: 0; /* Vertrag: Fehlerseiten, Links „Auch passend“ der 410 (Ph3 §6) */
  --schrift-hero-gross-gewicht: 800; /* Vertrag: H1 Über uns, Startseite, D4 (Ph4 §6) */
  --schrift-hero-gross-groesse: clamp(40px, 4.7vw, 68px); /* Vertrag: H1 Über uns, Startseite, D4 (Ph4 §6) */
  --schrift-hero-gross-zeile: 1.04; /* Vertrag: H1 Über uns, Startseite, D4 (Ph4 §6) */
  --schrift-hero-gross-laufweite: -2.4px; /* Vertrag: H1 Über uns, Startseite, D4 (Ph4 §6) */
  --schrift-lead-gross-gewicht: 400; /* Vertrag: Lead im Hero Über uns, D4 (Ph4 §6) */
  --schrift-lead-gross-groesse: 20px; /* Vertrag: Lead im Hero Über uns, D4 (Ph4 §6) */
  --schrift-lead-gross-zeile: 1.6; /* Vertrag: Lead im Hero Über uns, D4 (Ph4 §6) */
  --schrift-lead-gross-laufweite: 0; /* Vertrag: Lead im Hero Über uns, D4 (Ph4 §6) */
  --schrift-kapitel-jahr-gewicht: 800; /* Vertrag: Jahr in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-kapitel-jahr-groesse: 32px; /* Vertrag: Jahr in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-kapitel-jahr-zeile: 1; /* Vertrag: Jahr in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-kapitel-jahr-laufweite: -1.2px; /* Vertrag: Jahr in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-kapitel-titel-gewicht: 500; /* Vertrag: Titel in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-kapitel-titel-groesse: 15px; /* Vertrag: Titel in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-kapitel-titel-zeile: 1.45; /* Vertrag: Titel in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-kapitel-titel-laufweite: 0; /* Vertrag: Titel in der Kapitelleiste, D3 (Ph4 §6) */
  --schrift-jahr-gross-gewicht: 800; /* Vertrag: großes Jahr „2014“, D4 (Ph4 §6) */
  --schrift-jahr-gross-groesse: 96px; /* Vertrag: großes Jahr „2014“, D4 (Ph4 §6) */
  --schrift-jahr-gross-zeile: .9; /* Vertrag: großes Jahr „2014“, D4 (Ph4 §6) */
  --schrift-jahr-gross-laufweite: -4px; /* Vertrag: großes Jahr „2014“, D4 (Ph4 §6) */
  --schrift-text-gross-gewicht: 400; /* Vertrag: erster Absatz eines Kapitels, D4 (Ph4 §6) */
  --schrift-text-gross-groesse: 19px; /* Vertrag: erster Absatz eines Kapitels, D4 (Ph4 §6) */
  --schrift-text-gross-zeile: 1.62; /* Vertrag: erster Absatz eines Kapitels, D4 (Ph4 §6) */
  --schrift-text-gross-laufweite: 0; /* Vertrag: erster Absatz eines Kapitels, D4 (Ph4 §6) */
  --schrift-zitat-mittel-gewicht: 500; /* Vertrag: Ideen-Kasten, D4 (Ph4 §6) */
  --schrift-zitat-mittel-groesse: 21px; /* Vertrag: Ideen-Kasten, D4 (Ph4 §6) */
  --schrift-zitat-mittel-zeile: 1.55; /* Vertrag: Ideen-Kasten, D4 (Ph4 §6) */
  --schrift-zitat-mittel-laufweite: -0.3px; /* Vertrag: Ideen-Kasten, D4 (Ph4 §6) */
  --schrift-zitat-gross-gewicht: 600; /* Vertrag: Zitat linksbalken und navy-*, D3 (Ph4 §6) */
  --schrift-zitat-gross-groesse: 25px; /* Vertrag: Zitat linksbalken und navy-*, D3 (Ph4 §6) */
  --schrift-zitat-gross-zeile: 1.42; /* Vertrag: Zitat linksbalken und navy-*, D3 (Ph4 §6) */
  --schrift-zitat-gross-laufweite: -0.5px; /* Vertrag: Zitat linksbalken und navy-*, D3 (Ph4 §6) */
  --schrift-aussage-gewicht: 800; /* Vertrag: Aussagenliste, D3 (Ph4 §6) */
  --schrift-aussage-groesse: 40px; /* Vertrag: Aussagenliste, D3 (Ph4 §6) */
  --schrift-aussage-zeile: 1.1; /* Vertrag: Aussagenliste, D3 (Ph4 §6) */
  --schrift-aussage-laufweite: -1.6px; /* Vertrag: Aussagenliste, D3 (Ph4 §6) */
  --schrift-h3-gross-gewicht: 800; /* Vertrag: Grafik-Titel, cta-titel der Bänder, D3 (Ph4 §6) */
  --schrift-h3-gross-groesse: 24px; /* Vertrag: Grafik-Titel, cta-titel der Bänder, D3 (Ph4 §6) */
  --schrift-h3-gross-zeile: 1.25; /* Vertrag: Grafik-Titel, cta-titel der Bänder, D3 (Ph4 §6) */
  --schrift-h3-gross-laufweite: -0.6px; /* Vertrag: Grafik-Titel, cta-titel der Bänder, D3 (Ph4 §6) */
  --schrift-person-name-gewicht: 800; /* Vertrag: Name der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-name-groesse: 16.5px; /* Vertrag: Name der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-name-zeile: normal; /* Vertrag: Name der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-name-laufweite: -0.3px; /* Vertrag: Name der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-rolle-gewicht: 500; /* Vertrag: Rolle der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-rolle-groesse: 13px; /* Vertrag: Rolle der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-rolle-zeile: 1.5; /* Vertrag: Rolle der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-rolle-laufweite: 0; /* Vertrag: Rolle der Gründer-Karte, D3 (Ph4 §6) */
  --schrift-person-name-klein-gewicht: 700; /* Vertrag: Name der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-person-name-klein-groesse: 15px; /* Vertrag: Name der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-person-name-klein-zeile: 1.3; /* Vertrag: Name der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-person-name-klein-laufweite: 0; /* Vertrag: Name der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-person-rolle-klein-gewicht: 400; /* Vertrag: Rolle der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-person-rolle-klein-groesse: 12.5px; /* Vertrag: Rolle der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-person-rolle-klein-zeile: 1.45; /* Vertrag: Rolle der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-person-rolle-klein-laufweite: 0; /* Vertrag: Rolle der Personen-Kacheln und des Rasters, D3 (Ph4 §6) */
  --schrift-monogramm-gewicht: 800; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48), D3 (Ph4 §6) */
  --schrift-monogramm-groesse: 40px; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48), D3 (Ph4 §6) */
  --schrift-monogramm-zeile: normal; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48), D3 (Ph4 §6) */
  --schrift-monogramm-laufweite: -1.5px; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48), D3 (Ph4 §6) */
  --schrift-kennzahl-gewicht: 800; /* Vertrag: Wert im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-kennzahl-groesse: 30px; /* Vertrag: Wert im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-kennzahl-zeile: 1; /* Vertrag: Wert im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-kennzahl-laufweite: -1.1px; /* Vertrag: Wert im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-kennzahl-text-gewicht: 400; /* Vertrag: Text im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-kennzahl-text-groesse: 13.5px; /* Vertrag: Text im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-kennzahl-text-zeile: 1.6; /* Vertrag: Text im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-kennzahl-text-laufweite: 0; /* Vertrag: Text im Kennzahlen-Raster, D3 (Ph4 §6) */
  --schrift-trust-pille-gewicht: 500; /* Vertrag: Trust-Pillen, D3 (Ph4 §6) */
  --schrift-trust-pille-groesse: 13.5px; /* Vertrag: Trust-Pillen, D3 (Ph4 §6) */
  --schrift-trust-pille-zeile: normal; /* Vertrag: Trust-Pillen, D3 (Ph4 §6) */
  --schrift-trust-pille-laufweite: 0; /* Vertrag: Trust-Pillen, D3 (Ph4 §6) */
  --schrift-karte-titel-gewicht: 800; /* Vertrag: Titel der Karten absage, D3 (Ph4 §6) */
  --schrift-karte-titel-groesse: 21px; /* Vertrag: Titel der Karten absage, D3 (Ph4 §6) */
  --schrift-karte-titel-zeile: 1.25; /* Vertrag: Titel der Karten absage, D3 (Ph4 §6) */
  --schrift-karte-titel-laufweite: -0.6px; /* Vertrag: Titel der Karten absage, D3 (Ph4 §6) */
  --schrift-karte-ziffer-gewicht: 800; /* Ergänzung: Ph12 Design-Abgleich C-crm, Nummer der Karten mit Kopf links (Onboarding v2 Z. 413–425) */
  --schrift-karte-ziffer-groesse: 22px; /* Ergänzung: Ph12 Design-Abgleich C-crm, Nummer der Karten mit Kopf links (Onboarding v2 Z. 413–425) */
  --schrift-karte-ziffer-zeile: 1; /* Ergänzung: Ph12 Design-Abgleich C-crm, Nummer der Karten mit Kopf links (Onboarding v2 Z. 413–425) */
  --schrift-karte-ziffer-laufweite: 0; /* Ergänzung: Ph12 Design-Abgleich C-crm, Nummer der Karten mit Kopf links (Onboarding v2 Z. 413–425) */
  --schrift-karte-text-gewicht: 400; /* Vertrag: Text der Karten absage, D3 (Ph4 §6) */
  --schrift-karte-text-groesse: 14.5px; /* Vertrag: Text der Karten absage, D3 (Ph4 §6) */
  --schrift-karte-text-zeile: 1.65; /* Vertrag: Text der Karten absage, D3 (Ph4 §6) */
  --schrift-karte-text-laufweite: 0; /* Vertrag: Text der Karten absage, D3 (Ph4 §6) */
  --schrift-tabelle-name-groesse: 12.5px; /* Ergänzung: Heute-Tabelle C-Level, Vertragsname (Design-Abgleich Ph12 E) */
  --schrift-tabelle-name-zeile: normal; /* Ergänzung: Heute-Tabelle C-Level, Vertragsname (Design-Abgleich Ph12 E) */
  --schrift-tabelle-name-laufweite: 0; /* Ergänzung: Heute-Tabelle C-Level, Vertragsname (Design-Abgleich Ph12 E) */
  --schrift-tabelle-name-gewicht: 600; /* Ergänzung: Heute-Tabelle C-Level, Vertragsname (Design-Abgleich Ph12 E) */
  --schrift-faq-frage-gewicht: 700; /* Vertrag: Frage im FAQ, D2 (Ph4 §6) */
  --schrift-faq-frage-groesse: 17.5px; /* Vertrag: Frage im FAQ, D2 (Ph4 §6) */
  --schrift-faq-frage-zeile: 1.4; /* Vertrag: Frage im FAQ, D2 (Ph4 §6) */
  --schrift-faq-frage-laufweite: -0.2px; /* Vertrag: Frage im FAQ, D2 (Ph4 §6) */
  --schrift-faq-antwort-gewicht: 400; /* Vertrag: Antwort im FAQ, D2 (Ph4 §6) */
  --schrift-faq-antwort-groesse: 15.5px; /* Vertrag: Antwort im FAQ, D2 (Ph4 §6) */
  --schrift-faq-antwort-zeile: 1.65; /* Vertrag: Antwort im FAQ, D2 (Ph4 §6) */
  --schrift-faq-antwort-laufweite: 0; /* Vertrag: Antwort im FAQ, D2 (Ph4 §6) */
  --schrift-trust-titel-gewicht: 800; /* Vertrag: Titel der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-titel-groesse: 17px; /* Vertrag: Titel der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-titel-zeile: normal; /* Vertrag: Titel der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-titel-laufweite: 0; /* Vertrag: Titel der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-text-gewicht: 400; /* Vertrag: Text der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-text-groesse: 14.5px; /* Vertrag: Text der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-text-zeile: 1.5; /* Vertrag: Text der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-text-laufweite: 0; /* Vertrag: Text der Trust-Liste, D3 R-1 (Ph4 §6) */
  --schrift-trust-chip-gewicht: 600; /* Vertrag: Chips der Trust-Bausteine, D3 R-1 (Ph4 §6) */
  --schrift-trust-chip-groesse: 13.5px; /* Vertrag: Chips der Trust-Bausteine, D3 R-1 (Ph4 §6) */
  --schrift-trust-chip-zeile: normal; /* Vertrag: Chips der Trust-Bausteine, D3 R-1 (Ph4 §6) */
  --schrift-trust-chip-laufweite: 0; /* Vertrag: Chips der Trust-Bausteine, D3 R-1 (Ph4 §6) */
  --schrift-anfuehrung-gewicht: 800; /* Vertrag: Anführungszeichen der Zitate, D3 R-1 (Ph4 §6) */
  --schrift-anfuehrung-groesse: 40px; /* Vertrag: Anführungszeichen der Zitate, D3 R-1 (Ph4 §6) */
  --schrift-anfuehrung-zeile: 1; /* Vertrag: Anführungszeichen der Zitate, D3 R-1 (Ph4 §6) */
  --schrift-anfuehrung-laufweite: 0; /* Vertrag: Anführungszeichen der Zitate, D3 R-1 (Ph4 §6) */
  --schrift-beleg-aussage-gewicht: 600; /* Vertrag: Aussage im Beleg, D3 R-1 (Ph4 §6) */
  --schrift-beleg-aussage-groesse: 15px; /* Vertrag: Aussage im Beleg, D3 R-1 (Ph4 §6) */
  --schrift-beleg-aussage-zeile: 1.45; /* Vertrag: Aussage im Beleg, D3 R-1 (Ph4 §6) */
  --schrift-beleg-aussage-laufweite: 0; /* Vertrag: Aussage im Beleg, D3 R-1 (Ph4 §6) */
  --schrift-monogramm-mittel-gewicht: 800; /* Vertrag: Monogramm mittel (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-monogramm-mittel-groesse: 18px; /* Vertrag: Monogramm mittel (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-monogramm-mittel-zeile: normal; /* Vertrag: Monogramm mittel (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-monogramm-mittel-laufweite: -0.4px; /* Vertrag: Monogramm mittel (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-monogramm-klein-gewicht: 800; /* Vertrag: Monogramm klein (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-monogramm-klein-groesse: 15px; /* Vertrag: Monogramm klein (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-monogramm-klein-zeile: normal; /* Vertrag: Monogramm klein (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-monogramm-klein-laufweite: -0.4px; /* Vertrag: Monogramm klein (Avatare), D3 R-1 (Ph4 §6) */
  --schrift-linkedin-marke-gewicht: 800; /* Vertrag: LinkedIn-Marke an den Kacheln, Mono, Gewicht nach Design (Team), D3 R-1 (Ph4 §6) */
  --schrift-linkedin-marke-groesse: 9.5px; /* Vertrag: LinkedIn-Marke an den Kacheln, Mono, Gewicht nach Design (Team), D3 R-1 (Ph4 §6) */
  --schrift-linkedin-marke-zeile: normal; /* Vertrag: LinkedIn-Marke an den Kacheln, Mono, Gewicht nach Design (Team), D3 R-1 (Ph4 §6) */
  --schrift-linkedin-marke-laufweite: 0.2px; /* Vertrag: LinkedIn-Marke an den Kacheln, Mono, Gewicht nach Design (Team), D3 R-1 (Ph4 §6) */
  --schrift-team-fuss-gewicht: 500; /* Vertrag: Fußzeile des Team-Rasters, D3 R-1 (Ph4 §6) */
  --schrift-team-fuss-groesse: 14px; /* Vertrag: Fußzeile des Team-Rasters, D3 R-1 (Ph4 §6) */
  --schrift-team-fuss-zeile: 1.5; /* Vertrag: Fußzeile des Team-Rasters, D3 R-1 (Ph4 §6) */
  --schrift-team-fuss-laufweite: 0; /* Vertrag: Fußzeile des Team-Rasters, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-kicker-gewicht: 500; /* Vertrag: Kicker der Zertifikats-Kachel, Mono, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-kicker-groesse: 9px; /* Vertrag: Kicker der Zertifikats-Kachel, Mono, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-kicker-zeile: normal; /* Vertrag: Kicker der Zertifikats-Kachel, Mono, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-kicker-laufweite: 1.3px; /* Vertrag: Kicker der Zertifikats-Kachel, Mono, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-text-gewicht: 400; /* Vertrag: Text der Zertifikats-Kachel, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-text-groesse: 11.5px; /* Vertrag: Text der Zertifikats-Kachel, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-text-zeile: 1.4; /* Vertrag: Text der Zertifikats-Kachel, D3 R-1 (Ph4 §6) */
  --schrift-zertifikat-text-laufweite: 0; /* Vertrag: Text der Zertifikats-Kachel, D3 R-1 (Ph4 §6) */
  --schrift-karte-pille-gewicht: 700; /* Vertrag: Pille der Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-karte-pille-groesse: 11px; /* Vertrag: Pille der Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-karte-pille-zeile: normal; /* Vertrag: Pille der Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-karte-pille-laufweite: 0.6px; /* Vertrag: Pille der Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-karte-klein-titel-gewicht: 700; /* Vertrag: Titel der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-klein-titel-groesse: 14px; /* Vertrag: Titel der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-klein-titel-zeile: normal; /* Vertrag: Titel der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-klein-titel-laufweite: -0.2px; /* Vertrag: Titel der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-kopf-klein-gewicht: 700; /* Vertrag: Kopf der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-kopf-klein-groesse: 18px; /* Vertrag: Kopf der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-kopf-klein-zeile: 1.35; /* Vertrag: Kopf der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-kopf-klein-laufweite: -0.4px; /* Vertrag: Kopf der kleinen Karten, D3 R-1 (Ph4 §6) */
  --schrift-karte-rolle-gewicht: 600; /* Vertrag: Rolle in den Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-karte-rolle-groesse: 11.5px; /* Vertrag: Rolle in den Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-karte-rolle-zeile: normal; /* Vertrag: Rolle in den Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-karte-rolle-laufweite: 0.6px; /* Vertrag: Rolle in den Karten, Mono, D3 R-1 (Ph4 §6) */
  --schrift-cta-titel-gross-gewicht: 800; /* Vertrag: Titel des Abschlusses navy-termin, D3 R-1 (Ph4 §6) */
  --schrift-cta-titel-gross-groesse: clamp(36px, 4vw, 56px); /* Vertrag: Titel des Abschlusses navy-termin, D3 R-1 (Ph4 §6) */
  --schrift-cta-titel-gross-zeile: 1.05; /* Vertrag: Titel des Abschlusses navy-termin, D3 R-1 (Ph4 §6) */
  --schrift-cta-titel-gross-laufweite: -2px; /* Vertrag: Titel des Abschlusses navy-termin, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-titel-gewicht: 700; /* Vertrag: Titel der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-titel-groesse: 16px; /* Vertrag: Titel der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-titel-zeile: 1.35; /* Vertrag: Titel der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-titel-laufweite: 0; /* Vertrag: Titel der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-text-gewicht: 400; /* Vertrag: Text der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-text-groesse: 14.5px; /* Vertrag: Text der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-text-zeile: 1.55; /* Vertrag: Text der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-schritt-text-laufweite: 0; /* Vertrag: Text der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-nummer-gewicht: 700; /* Vertrag: Nummer der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-nummer-groesse: 13px; /* Vertrag: Nummer der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-nummer-zeile: normal; /* Vertrag: Nummer der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-termin-nummer-laufweite: 0; /* Vertrag: Nummer der Terminschritte, D3 R-1 (Ph4 §6) */
  --schrift-standort-koordinaten-gewicht: 500; /* Vertrag: Koordinaten der Standortkarte, Mono, Laufweite nach Design (karte-standort.js), D3 R-1 (Ph4 §6) */
  --schrift-standort-koordinaten-groesse: 10.5px; /* Vertrag: Koordinaten der Standortkarte, Mono, Laufweite nach Design (karte-standort.js), D3 R-1 (Ph4 §6) */
  --schrift-standort-koordinaten-zeile: 1; /* Vertrag: Koordinaten der Standortkarte, Mono, Laufweite nach Design (karte-standort.js), D3 R-1 (Ph4 §6) */
  --schrift-standort-koordinaten-laufweite: 0.6px; /* Vertrag: Koordinaten der Standortkarte, Mono, Laufweite nach Design (karte-standort.js), D3 R-1 (Ph4 §6) */
  --schrift-widget-titel-gewicht: 700; /* Vertrag: dashboard-widget, Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-titel-groesse: 16px; /* Vertrag: dashboard-widget, Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-titel-zeile: normal; /* Vertrag: dashboard-widget, Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-titel-laufweite: -0.3px; /* Vertrag: dashboard-widget, Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-untertitel-gewicht: 400; /* Vertrag: dashboard-widget, Untertitel, D3 R-1 (Ph4 §6) */
  --schrift-widget-untertitel-groesse: 12px; /* Vertrag: dashboard-widget, Untertitel, D3 R-1 (Ph4 §6) */
  --schrift-widget-untertitel-zeile: normal; /* Vertrag: dashboard-widget, Untertitel, D3 R-1 (Ph4 §6) */
  --schrift-widget-untertitel-laufweite: 0; /* Vertrag: dashboard-widget, Untertitel, D3 R-1 (Ph4 §6) */
  --schrift-widget-knopf-gewicht: 600; /* Vertrag: dashboard-widget, Knopf, D3 R-1 (Ph4 §6) */
  --schrift-widget-knopf-groesse: 12px; /* Vertrag: dashboard-widget, Knopf, D3 R-1 (Ph4 §6) */
  --schrift-widget-knopf-zeile: normal; /* Vertrag: dashboard-widget, Knopf, D3 R-1 (Ph4 §6) */
  --schrift-widget-knopf-laufweite: 0; /* Vertrag: dashboard-widget, Knopf, D3 R-1 (Ph4 §6) */
  --schrift-widget-kicker-gewicht: 700; /* Vertrag: dashboard-widget, Kicker, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-kicker-groesse: 9.5px; /* Vertrag: dashboard-widget, Kicker, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-kicker-zeile: normal; /* Vertrag: dashboard-widget, Kicker, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-kicker-laufweite: 1px; /* Vertrag: dashboard-widget, Kicker, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-achse-gewicht: 500; /* Vertrag: dashboard-widget, Achse, D3 R-1 (Ph4 §6) */
  --schrift-widget-achse-groesse: 11px; /* Vertrag: dashboard-widget, Achse, D3 R-1 (Ph4 §6) */
  --schrift-widget-achse-zeile: normal; /* Vertrag: dashboard-widget, Achse, D3 R-1 (Ph4 §6) */
  --schrift-widget-achse-laufweite: 0; /* Vertrag: dashboard-widget, Achse, D3 R-1 (Ph4 §6) */
  --schrift-widget-pille-gewicht: 700; /* Vertrag: dashboard-widget, Pille, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-pille-groesse: 11px; /* Vertrag: dashboard-widget, Pille, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-pille-zeile: normal; /* Vertrag: dashboard-widget, Pille, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-pille-laufweite: 0; /* Vertrag: dashboard-widget, Pille, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-monat-gewicht: 500; /* Vertrag: dashboard-widget, Monat, D3 R-1 (Ph4 §6) */
  --schrift-widget-monat-groesse: 12px; /* Vertrag: dashboard-widget, Monat, D3 R-1 (Ph4 §6) */
  --schrift-widget-monat-zeile: normal; /* Vertrag: dashboard-widget, Monat, D3 R-1 (Ph4 §6) */
  --schrift-widget-monat-laufweite: 0; /* Vertrag: dashboard-widget, Monat, D3 R-1 (Ph4 §6) */
  --schrift-widget-saldo-label-gewicht: 700; /* Vertrag: dashboard-widget, Saldo-Label, D3 R-1 (Ph4 §6) */
  --schrift-widget-saldo-label-groesse: 13px; /* Vertrag: dashboard-widget, Saldo-Label, D3 R-1 (Ph4 §6) */
  --schrift-widget-saldo-label-zeile: normal; /* Vertrag: dashboard-widget, Saldo-Label, D3 R-1 (Ph4 §6) */
  --schrift-widget-saldo-label-laufweite: 0; /* Vertrag: dashboard-widget, Saldo-Label, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-label-gewicht: 700; /* Vertrag: dashboard-widget, Wert-Label, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-label-groesse: 10px; /* Vertrag: dashboard-widget, Wert-Label, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-label-zeile: normal; /* Vertrag: dashboard-widget, Wert-Label, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-label-laufweite: 1px; /* Vertrag: dashboard-widget, Wert-Label, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-gewicht: 700; /* Vertrag: dashboard-widget, Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-groesse: 15px; /* Vertrag: dashboard-widget, Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-zeile: normal; /* Vertrag: dashboard-widget, Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-wert-laufweite: 0; /* Vertrag: dashboard-widget, Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-auswertung-gewicht: 600; /* Vertrag: dashboard-widget, Auswertung, D3 R-1 (Ph4 §6) */
  --schrift-widget-auswertung-groesse: 14.5px; /* Vertrag: dashboard-widget, Auswertung, D3 R-1 (Ph4 §6) */
  --schrift-widget-auswertung-zeile: 1.5; /* Vertrag: dashboard-widget, Auswertung, D3 R-1 (Ph4 §6) */
  --schrift-widget-auswertung-laufweite: 0; /* Vertrag: dashboard-widget, Auswertung, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-titel-gewicht: 700; /* Vertrag: dashboard-widget, Tooltip-Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-titel-groesse: 12px; /* Vertrag: dashboard-widget, Tooltip-Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-titel-zeile: 1.5; /* Vertrag: dashboard-widget, Tooltip-Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-titel-laufweite: 0; /* Vertrag: dashboard-widget, Tooltip-Titel, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-gewicht: 400; /* Vertrag: dashboard-widget, Tooltip, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-groesse: 11.5px; /* Vertrag: dashboard-widget, Tooltip, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-zeile: 1.57; /* Vertrag: dashboard-widget, Tooltip, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-laufweite: 0; /* Vertrag: dashboard-widget, Tooltip, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-wert-gewicht: 500; /* Vertrag: dashboard-widget, Tooltip-Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-wert-groesse: 11.5px; /* Vertrag: dashboard-widget, Tooltip-Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-wert-zeile: 1.57; /* Vertrag: dashboard-widget, Tooltip-Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-widget-tooltip-wert-laufweite: 0; /* Vertrag: dashboard-widget, Tooltip-Wert, Mono, D3 R-1 (Ph4 §6) */
  --schrift-h2-start-gewicht: 800; /* Vertrag: H2 der Scrollstory (Ph5 §6.2) */
  --schrift-h2-start-groesse: 40px; /* Vertrag: H2 der Scrollstory (Ph5 §6.2) */
  --schrift-h2-start-zeile: 1.12; /* Vertrag: H2 der Scrollstory (Ph5 §6.2) */
  --schrift-h2-start-laufweite: -1.4px; /* Vertrag: H2 der Scrollstory (Ph5 §6.2) */
  --schrift-story-kicker-gewicht: 500; /* Vertrag: Eyebrow der Story-Schritte, Mono (Ph5 §6.2) */
  --schrift-story-kicker-groesse: 11px; /* Vertrag: Eyebrow der Story-Schritte, Mono (Ph5 §6.2) */
  --schrift-story-kicker-zeile: 1; /* Vertrag: Eyebrow der Story-Schritte, Mono (Ph5 §6.2) */
  --schrift-story-kicker-laufweite: 1.3px; /* Vertrag: Eyebrow der Story-Schritte, Mono (Ph5 §6.2) */
  --schrift-story-frage-gewicht: 600; /* Vertrag: Leitfrage der Story-Schritte (Ph5 §6.2) */
  --schrift-story-frage-groesse: 16px; /* Vertrag: Leitfrage der Story-Schritte (Ph5 §6.2) */
  --schrift-story-frage-zeile: 21px; /* Vertrag: Leitfrage der Story-Schritte (Ph5 §6.2) */
  --schrift-story-frage-laufweite: 0; /* Vertrag: Leitfrage der Story-Schritte (Ph5 §6.2) */
  --schrift-story-titel-gewicht: 800; /* Vertrag: Überschrift der Story-Schritte (Ph5 §6.2) */
  --schrift-story-titel-groesse: clamp(24px, 2.3vw, 32px); /* Vertrag: Überschrift der Story-Schritte (Ph5 §6.2) */
  --schrift-story-titel-zeile: 1.18; /* Vertrag: Überschrift der Story-Schritte (Ph5 §6.2) */
  --schrift-story-titel-laufweite: -1px; /* Vertrag: Überschrift der Story-Schritte (Ph5 §6.2) */
  --schrift-story-kopf-gewicht: 500; /* Vertrag: Kopfzeile „Schritt n von N“ der Story, Mono (Ph5 §6.2) */
  --schrift-story-kopf-groesse: 12px; /* Vertrag: Kopfzeile „Schritt n von N“ der Story, Mono (Ph5 §6.2) */
  --schrift-story-kopf-zeile: normal; /* Vertrag: Kopfzeile „Schritt n von N“ der Story, Mono (Ph5 §6.2) */
  --schrift-story-kopf-laufweite: 0.4px; /* Vertrag: Kopfzeile „Schritt n von N“ der Story, Mono (Ph5 §6.2) */
  /* Phase 6 (Vertrag Ph6 §6, V-5) */
  --schrift-feld-gewicht: 400; /* Vertrag: Eingabe der Seitenformulare (Kontakt, Free S2) (Ph6 §6) */
  --schrift-feld-groesse: 15px; /* Vertrag: Eingabe der Seitenformulare (Kontakt, Free S2) (Ph6 §6) */
  --schrift-feld-zeile: normal; /* Vertrag: Eingabe der Seitenformulare (Kontakt, Free S2) (Ph6 §6) */
  --schrift-feld-laufweite: 0; /* Vertrag: Eingabe der Seitenformulare (Kontakt, Free S2) (Ph6 §6) */
  --schrift-feld-mehrzeilig-gewicht: 400; /* Vertrag: mehrzeiliges Eingabefeld (Ph6 §6) */
  --schrift-feld-mehrzeilig-groesse: 15px; /* Vertrag: mehrzeiliges Eingabefeld (Ph6 §6) */
  --schrift-feld-mehrzeilig-zeile: 1.6; /* Vertrag: mehrzeiliges Eingabefeld (Ph6 §6) */
  --schrift-feld-mehrzeilig-laufweite: 0; /* Vertrag: mehrzeiliges Eingabefeld (Ph6 §6) */
  --schrift-feld-label-klein-gewicht: 600; /* Vertrag: Feldlabel, Dialog-Pille, Text der Free-Vorschau (S-3, eigene Formular-Rolle statt Suchpanel-Vorschlag) (Ph6 §6) */
  --schrift-feld-label-klein-groesse: 12.5px; /* Vertrag: Feldlabel, Dialog-Pille, Text der Free-Vorschau (S-3, eigene Formular-Rolle statt Suchpanel-Vorschlag) (Ph6 §6) */
  --schrift-feld-label-klein-zeile: normal; /* Vertrag: Feldlabel, Dialog-Pille, Text der Free-Vorschau (S-3, eigene Formular-Rolle statt Suchpanel-Vorschlag) (Ph6 §6) */
  --schrift-feld-label-klein-laufweite: 0; /* Vertrag: Feldlabel, Dialog-Pille, Text der Free-Vorschau (S-3, eigene Formular-Rolle statt Suchpanel-Vorschlag) (Ph6 §6) */
  --schrift-feld-label-mono-gewicht: 500; /* Vertrag: Feldlabel in Dialogen, Beleg-Begriff, Kontakt, zeeg, Mono (Ph6 §6) */
  --schrift-feld-label-mono-groesse: 10.5px; /* Vertrag: Feldlabel in Dialogen, Beleg-Begriff, Kontakt, zeeg, Mono (Ph6 §6) */
  --schrift-feld-label-mono-zeile: normal; /* Vertrag: Feldlabel in Dialogen, Beleg-Begriff, Kontakt, zeeg, Mono (Ph6 §6) */
  --schrift-feld-label-mono-laufweite: 1px; /* Vertrag: Feldlabel in Dialogen, Beleg-Begriff, Kontakt, zeeg, Mono (Ph6 §6) */
  --schrift-feld-kompakt-gewicht: 400; /* Vertrag: Eingabe in Dialogen (Ph7) (Ph6 §6) */
  --schrift-feld-kompakt-groesse: 14.5px; /* Vertrag: Eingabe in Dialogen (Ph7) (Ph6 §6) */
  --schrift-feld-kompakt-zeile: normal; /* Vertrag: Eingabe in Dialogen (Ph7) (Ph6 §6) */
  --schrift-feld-kompakt-laufweite: 0; /* Vertrag: Eingabe in Dialogen (Ph7) (Ph6 §6) */
  --schrift-feld-kompakt-betont-gewicht: 500; /* Vertrag: Eingabe im Free-Dialog Stufe 2 (Ph6 §6) */
  --schrift-feld-kompakt-betont-groesse: 14.5px; /* Vertrag: Eingabe im Free-Dialog Stufe 2 (Ph6 §6) */
  --schrift-feld-kompakt-betont-zeile: normal; /* Vertrag: Eingabe im Free-Dialog Stufe 2 (Ph6 §6) */
  --schrift-feld-kompakt-betont-laufweite: 0; /* Vertrag: Eingabe im Free-Dialog Stufe 2 (Ph6 §6) */
  --schrift-feld-pille-gewicht: 500; /* Vertrag: E-Mail-Feld der Free-Pille (Ph6 §6) */
  --schrift-feld-pille-groesse: 16px; /* Vertrag: E-Mail-Feld der Free-Pille (Ph6 §6) */
  --schrift-feld-pille-zeile: normal; /* Vertrag: E-Mail-Feld der Free-Pille (Ph6 §6) */
  --schrift-feld-pille-laufweite: 0; /* Vertrag: E-Mail-Feld der Free-Pille (Ph6 §6) */
  --schrift-feld-hinweis-gewicht: 500; /* Vertrag: Feldhinweis („optional“) (Ph6 §6) */
  --schrift-feld-hinweis-groesse: 12.5px; /* Vertrag: Feldhinweis („optional“) (Ph6 §6) */
  --schrift-feld-hinweis-zeile: normal; /* Vertrag: Feldhinweis („optional“) (Ph6 §6) */
  --schrift-feld-hinweis-laufweite: 0; /* Vertrag: Feldhinweis („optional“) (Ph6 §6) */
  --schrift-meldung-gewicht: 500; /* Vertrag: Feldfehler und Formular-Meldung aller Formulare (S-8, eigene Formular-Rolle; Fuß-Fehler Ph2 unverändert) (Ph6 §6) */
  --schrift-meldung-groesse: 12px; /* Vertrag: Feldfehler und Formular-Meldung aller Formulare (S-8, eigene Formular-Rolle; Fuß-Fehler Ph2 unverändert) (Ph6 §6) */
  --schrift-meldung-zeile: 1.4; /* Vertrag: Feldfehler und Formular-Meldung aller Formulare (S-8, eigene Formular-Rolle; Fuß-Fehler Ph2 unverändert) (Ph6 §6) */
  --schrift-meldung-laufweite: 0; /* Vertrag: Feldfehler und Formular-Meldung aller Formulare (S-8, eigene Formular-Rolle; Fuß-Fehler Ph2 unverändert) (Ph6 §6) */
  --schrift-einwilligung-gewicht: 400; /* Vertrag: Einwilligungstext aller Formulare (Ph6 §6) */
  --schrift-einwilligung-groesse: 12.5px; /* Vertrag: Einwilligungstext aller Formulare (Ph6 §6) */
  --schrift-einwilligung-zeile: 1.55; /* Vertrag: Einwilligungstext aller Formulare (Ph6 §6) */
  --schrift-einwilligung-laufweite: 0; /* Vertrag: Einwilligungstext aller Formulare (Ph6 §6) */
  --schrift-hero-free-gewicht: 800; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) (Ph6 §6) */
  --schrift-hero-free-groesse: 64px; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) (Ph6 §6) */
  --schrift-hero-free-zeile: 1.04; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) (Ph6 §6) */
  --schrift-hero-free-laufweite: -2.6px; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) (Ph6 §6) */
  --schrift-lead-klein-gewicht: 400; /* Vertrag: Lead Danke, Kontakt, Termin (Ph6 §6) */
  --schrift-lead-klein-groesse: 17px; /* Vertrag: Lead Danke, Kontakt, Termin (Ph6 §6) */
  --schrift-lead-klein-zeile: 1.6; /* Vertrag: Lead Danke, Kontakt, Termin (Ph6 §6) */
  --schrift-lead-klein-laufweite: 0; /* Vertrag: Lead Danke, Kontakt, Termin (Ph6 §6) */
  --schrift-text-klein-gewicht: 400; /* Vertrag: kleiner Text Kontakt, Danke, zeeg-Platzhalter, Kapiteltext YouTube (S-24 zusammengelegt) (Ph6 §6) */
  --schrift-text-klein-groesse: 13.5px; /* Vertrag: kleiner Text Kontakt, Danke, zeeg-Platzhalter, Kapiteltext YouTube (S-24 zusammengelegt) (Ph6 §6) */
  --schrift-text-klein-zeile: 1.5; /* Vertrag: kleiner Text Kontakt, Danke, zeeg-Platzhalter, Kapiteltext YouTube (S-24 zusammengelegt) (Ph6 §6) */
  --schrift-text-klein-laufweite: 0; /* Vertrag: kleiner Text Kontakt, Danke, zeeg-Platzhalter, Kapiteltext YouTube (S-24 zusammengelegt) (Ph6 §6) */
  --schrift-beleg-wert-gewicht: 600; /* Vertrag: Beleg-Wert der Danke-Seite, erledigt (Ph6 §6) */
  --schrift-beleg-wert-groesse: 14.5px; /* Vertrag: Beleg-Wert der Danke-Seite, erledigt (Ph6 §6) */
  --schrift-beleg-wert-zeile: 1.4; /* Vertrag: Beleg-Wert der Danke-Seite, erledigt (Ph6 §6) */
  --schrift-beleg-wert-laufweite: 0; /* Vertrag: Beleg-Wert der Danke-Seite, erledigt (Ph6 §6) */
  --schrift-tab-gewicht: 700; /* Vertrag: Stationen-Tab, Danke-Thementab (Ph6 §6) */
  --schrift-tab-groesse: 16px; /* Vertrag: Stationen-Tab, Danke-Thementab (Ph6 §6) */
  --schrift-tab-zeile: 1.3; /* Vertrag: Stationen-Tab, Danke-Thementab (Ph6 §6) */
  --schrift-tab-laufweite: -0.3px; /* Vertrag: Stationen-Tab, Danke-Thementab (Ph6 §6) */
  --schrift-station-titel-gewicht: 800; /* Vertrag: Stationstitel (Ph6 §6) */
  --schrift-station-titel-groesse: 26px; /* Vertrag: Stationstitel (Ph6 §6) */
  --schrift-station-titel-zeile: 1.22; /* Vertrag: Stationstitel (Ph6 §6) */
  --schrift-station-titel-laufweite: -0.7px; /* Vertrag: Stationstitel (Ph6 §6) */
  --schrift-dialog-zurueck-gewicht: 700; /* Vertrag: Textknopf „Zurück“ im Dialog (Ph6 §6) */
  --schrift-dialog-zurueck-groesse: 14.5px; /* Vertrag: Textknopf „Zurück“ im Dialog (Ph6 §6) */
  --schrift-dialog-zurueck-zeile: normal; /* Vertrag: Textknopf „Zurück“ im Dialog (Ph6 §6) */
  --schrift-dialog-zurueck-laufweite: 0; /* Vertrag: Textknopf „Zurück“ im Dialog (Ph6 §6) */
  --schrift-schritt-zahl-gewicht: 700; /* Vertrag: Zahl im Schrittkreis, zeeg-Dauer (dort mit Mono-Familie) (Ph6 §6) */
  --schrift-schritt-zahl-groesse: 12px; /* Vertrag: Zahl im Schrittkreis, zeeg-Dauer (dort mit Mono-Familie) (Ph6 §6) */
  --schrift-schritt-zahl-zeile: normal; /* Vertrag: Zahl im Schrittkreis, zeeg-Dauer (dort mit Mono-Familie) (Ph6 §6) */
  --schrift-schritt-zahl-laufweite: 0; /* Vertrag: Zahl im Schrittkreis, zeeg-Dauer (dort mit Mono-Familie) (Ph6 §6) */
  --schrift-free-ablauf-nummer-gewicht: 700; /* Vertrag: Nummer im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-free-ablauf-nummer-groesse: 12px; /* Vertrag: Nummer im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-free-ablauf-nummer-zeile: normal; /* Vertrag: Nummer im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-free-ablauf-nummer-laufweite: 1px; /* Vertrag: Nummer im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-free-ablauf-zeit-gewicht: 600; /* Vertrag: Zeitangabe im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-free-ablauf-zeit-groesse: 11.5px; /* Vertrag: Zeitangabe im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-free-ablauf-zeit-zeile: normal; /* Vertrag: Zeitangabe im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-free-ablauf-zeit-laufweite: 0; /* Vertrag: Zeitangabe im Free-Ablauf, Mono (Ph6 §6) */
  --schrift-karte-titel-mittel-gewicht: 700; /* Vertrag: Titel Free-Ablauf, Kontakt-Kartenwert und Wege-Titel (S-29 zusammengelegt) (Ph6 §6) */
  --schrift-karte-titel-mittel-groesse: 17px; /* Vertrag: Titel Free-Ablauf, Kontakt-Kartenwert und Wege-Titel (S-29 zusammengelegt) (Ph6 §6) */
  --schrift-karte-titel-mittel-zeile: 1.35; /* Vertrag: Titel Free-Ablauf, Kontakt-Kartenwert und Wege-Titel (S-29 zusammengelegt) (Ph6 §6) */
  --schrift-karte-titel-mittel-laufweite: -0.3px; /* Vertrag: Titel Free-Ablauf, Kontakt-Kartenwert und Wege-Titel (S-29 zusammengelegt) (Ph6 §6) */
  --schrift-meta-mono-gewicht: 500; /* Vertrag: Meta-Zeile Vorschau-Fuß, Kontakt-Wege, Danke-Kachel, Mono (S-35 zusammengelegt) (Ph6 §6) */
  --schrift-meta-mono-groesse: 11.5px; /* Vertrag: Meta-Zeile Vorschau-Fuß, Kontakt-Wege, Danke-Kachel, Mono (S-35 zusammengelegt) (Ph6 §6) */
  --schrift-meta-mono-zeile: normal; /* Vertrag: Meta-Zeile Vorschau-Fuß, Kontakt-Wege, Danke-Kachel, Mono (S-35 zusammengelegt) (Ph6 §6) */
  --schrift-meta-mono-laufweite: 0; /* Vertrag: Meta-Zeile Vorschau-Fuß, Kontakt-Wege, Danke-Kachel, Mono (S-35 zusammengelegt) (Ph6 §6) */
  --schrift-vorschau-titel-gewicht: 700; /* Vertrag: Titel der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-titel-groesse: 12.5px; /* Vertrag: Titel der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-titel-zeile: normal; /* Vertrag: Titel der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-titel-laufweite: 0; /* Vertrag: Titel der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-kopfzeile-gewicht: 600; /* Vertrag: Tabellenkopf der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-kopfzeile-groesse: 10px; /* Vertrag: Tabellenkopf der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-kopfzeile-zeile: normal; /* Vertrag: Tabellenkopf der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-kopfzeile-laufweite: 0.3px; /* Vertrag: Tabellenkopf der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-pille-gewicht: 600; /* Vertrag: Status-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-pille-groesse: 10.5px; /* Vertrag: Status-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-pille-zeile: normal; /* Vertrag: Status-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-pille-laufweite: 0; /* Vertrag: Status-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-unterzeile-gewicht: 400; /* Vertrag: Unterzeile der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-unterzeile-groesse: 11px; /* Vertrag: Unterzeile der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-unterzeile-zeile: normal; /* Vertrag: Unterzeile der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-unterzeile-laufweite: 0; /* Vertrag: Unterzeile der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-achse-gewicht: 500; /* Vertrag: Diagrammachse der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-vorschau-achse-groesse: 9.5px; /* Vertrag: Diagrammachse der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-vorschau-achse-zeile: normal; /* Vertrag: Diagrammachse der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-vorschau-achse-laufweite: 0; /* Vertrag: Diagrammachse der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-vorschau-saldo-gewicht: 600; /* Vertrag: Saldo-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-saldo-groesse: 9px; /* Vertrag: Saldo-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-saldo-zeile: normal; /* Vertrag: Saldo-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-saldo-laufweite: 0; /* Vertrag: Saldo-Pille der Free-Vorschau (Ph6 §6) */
  --schrift-vorschau-monat-gewicht: 500; /* Vertrag: Monate der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-vorschau-monat-groesse: 10px; /* Vertrag: Monate der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-vorschau-monat-zeile: normal; /* Vertrag: Monate der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-vorschau-monat-laufweite: 0; /* Vertrag: Monate der Free-Vorschau, Mono (Ph6 §6) */
  --schrift-adresse-titel-gewicht: 700; /* Vertrag: Adresstitel /kontakt/ (Ph6 §6) */
  --schrift-adresse-titel-groesse: 15.5px; /* Vertrag: Adresstitel /kontakt/ (Ph6 §6) */
  --schrift-adresse-titel-zeile: normal; /* Vertrag: Adresstitel /kontakt/ (Ph6 §6) */
  --schrift-adresse-titel-laufweite: 0; /* Vertrag: Adresstitel /kontakt/ (Ph6 §6) */
  --schrift-h4-gewicht: 800; /* Vertrag: Zwischenüberschrift /kontakt/ (Ph6 §6) */
  --schrift-h4-groesse: 19px; /* Vertrag: Zwischenüberschrift /kontakt/ (Ph6 §6) */
  --schrift-h4-zeile: normal; /* Vertrag: Zwischenüberschrift /kontakt/ (Ph6 §6) */
  --schrift-h4-laufweite: -0.5px; /* Vertrag: Zwischenüberschrift /kontakt/ (Ph6 §6) */
  --schrift-zeeg-titel-gewicht: 700; /* Vertrag: Titel der Terminart-Karte (Ph6 §6) */
  --schrift-zeeg-titel-groesse: 20px; /* Vertrag: Titel der Terminart-Karte (Ph6 §6) */
  --schrift-zeeg-titel-zeile: normal; /* Vertrag: Titel der Terminart-Karte (Ph6 §6) */
  --schrift-zeeg-titel-laufweite: -0.4px; /* Vertrag: Titel der Terminart-Karte (Ph6 §6) */
  --schrift-alternative-titel-gewicht: 800; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin/ (Ph6 §6) */
  --schrift-alternative-titel-groesse: 28px; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin/ (Ph6 §6) */
  --schrift-alternative-titel-zeile: 1.25; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin/ (Ph6 §6) */
  --schrift-alternative-titel-laufweite: -0.8px; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin/ (Ph6 §6) */
  --schrift-youtube-titel-gewicht: 400; /* Vertrag: Fußzeile des YouTube-Rahmens (Ph6 §6) */
  --schrift-youtube-titel-groesse: 12.5px; /* Vertrag: Fußzeile des YouTube-Rahmens (Ph6 §6) */
  --schrift-youtube-titel-zeile: normal; /* Vertrag: Fußzeile des YouTube-Rahmens (Ph6 §6) */
  --schrift-youtube-titel-laufweite: 0; /* Vertrag: Fußzeile des YouTube-Rahmens (Ph6 §6) */
  --schrift-youtube-kapitel-zeit-gewicht: 700; /* Vertrag: Zeitmarke der YouTube-Kapitel, Mono (Ph6 §6) */
  --schrift-youtube-kapitel-zeit-groesse: 11.5px; /* Vertrag: Zeitmarke der YouTube-Kapitel, Mono (Ph6 §6) */
  --schrift-youtube-kapitel-zeit-zeile: normal; /* Vertrag: Zeitmarke der YouTube-Kapitel, Mono (Ph6 §6) */
  --schrift-youtube-kapitel-zeit-laufweite: 0; /* Vertrag: Zeitmarke der YouTube-Kapitel, Mono (Ph6 §6) */
  /* Phase 7 (Vertrag Ph7 §6, V-5) */
  --schrift-schritt-label-gewicht: 700; /* Vertrag: „Schritt n“ des Konfigurators, Mono (Ph7 §6) */
  --schrift-schritt-label-groesse: 12px; /* Vertrag: „Schritt n“ des Konfigurators, Mono (Ph7 §6) */
  --schrift-schritt-label-zeile: normal; /* Vertrag: „Schritt n“ des Konfigurators, Mono (Ph7 §6) */
  --schrift-schritt-label-laufweite: 1.2px; /* Vertrag: „Schritt n“ des Konfigurators, Mono (Ph7 §6) */
  --schrift-zahl-eingabe-gewicht: 800; /* Vertrag: Userzahl-Feld des Konfigurators (Ph7 §6) */
  --schrift-zahl-eingabe-groesse: 48px; /* Vertrag: Userzahl-Feld des Konfigurators (Ph7 §6) */
  --schrift-zahl-eingabe-zeile: 1; /* Vertrag: Userzahl-Feld des Konfigurators (Ph7 §6) */
  --schrift-zahl-eingabe-laufweite: -1.8px; /* Vertrag: Userzahl-Feld des Konfigurators (Ph7 §6) */
  --schrift-umfang-mono-gewicht: 700; /* Vertrag: Zähler „n Module · m Integrationen“, Mono (mobil 10.5px/0 im Baustein) (Ph7 §6) */
  --schrift-umfang-mono-groesse: 11.5px; /* Vertrag: Zähler „n Module · m Integrationen“, Mono (mobil 10.5px/0 im Baustein) (Ph7 §6) */
  --schrift-umfang-mono-zeile: 1.45; /* Vertrag: Zähler „n Module · m Integrationen“, Mono (mobil 10.5px/0 im Baustein) (Ph7 §6) */
  --schrift-umfang-mono-laufweite: 0.2px; /* Vertrag: Zähler „n Module · m Integrationen“, Mono (mobil 10.5px/0 im Baustein) (Ph7 §6) */
  --schrift-kachel-zahl-gewicht: 800; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz (Ph7 §6) */
  --schrift-kachel-zahl-groesse: 26px; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz (Ph7 §6) */
  --schrift-kachel-zahl-zeile: 1; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz (Ph7 §6) */
  --schrift-kachel-zahl-laufweite: -1px; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz (Ph7 §6) */
  --schrift-einfuehrung-zahl-gewicht: 800; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP (Ph7 §6) */
  --schrift-einfuehrung-zahl-groesse: 38px; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP (Ph7 §6) */
  --schrift-einfuehrung-zahl-zeile: 1; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP (Ph7 §6) */
  --schrift-einfuehrung-zahl-laufweite: -1.5px; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP (Ph7 §6) */
  --schrift-chip-mono-gewicht: 700; /* Vertrag: Chips „ISO 27001“, Pille „Immer enthalten“, Mono (Ph7 §6) */
  --schrift-chip-mono-groesse: 10.5px; /* Vertrag: Chips „ISO 27001“, Pille „Immer enthalten“, Mono (Ph7 §6) */
  --schrift-chip-mono-zeile: normal; /* Vertrag: Chips „ISO 27001“, Pille „Immer enthalten“, Mono (Ph7 §6) */
  --schrift-chip-mono-laufweite: 0.6px; /* Vertrag: Chips „ISO 27001“, Pille „Immer enthalten“, Mono (Ph7 §6) */
  --schrift-rechner-wert-gewicht: 700; /* Vertrag: Werte im Kosten-Nutzen-Rechner (Größe, Feineinstellung), Mono (Ph7 §6) */
  --schrift-rechner-wert-groesse: 18px; /* Vertrag: Werte im Kosten-Nutzen-Rechner (Größe, Feineinstellung), Mono (Ph7 §6) */
  --schrift-rechner-wert-zeile: normal; /* Vertrag: Werte im Kosten-Nutzen-Rechner (Größe, Feineinstellung), Mono (Ph7 §6) */
  --schrift-rechner-wert-laufweite: 0; /* Vertrag: Werte im Kosten-Nutzen-Rechner (Größe, Feineinstellung), Mono (Ph7 §6) */
  --schrift-rechner-label-gewicht: 500; /* Vertrag: Labels im Kosten-Nutzen-Rechner (Ph7 §6) */
  --schrift-rechner-label-groesse: 12.5px; /* Vertrag: Labels im Kosten-Nutzen-Rechner (Ph7 §6) */
  --schrift-rechner-label-zeile: 1.5; /* Vertrag: Labels im Kosten-Nutzen-Rechner (Ph7 §6) */
  --schrift-rechner-label-laufweite: 0; /* Vertrag: Labels im Kosten-Nutzen-Rechner (Ph7 §6) */
  --schrift-auswahl-summe-gewicht: 700; /* Vertrag: „Gesamt pro User“, Formular-Titel Bilanz; wertgleich Ph6 zeeg-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  --schrift-auswahl-summe-groesse: 20px; /* Vertrag: „Gesamt pro User“, Formular-Titel Bilanz; wertgleich Ph6 zeeg-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  --schrift-auswahl-summe-zeile: normal; /* Vertrag: „Gesamt pro User“, Formular-Titel Bilanz; wertgleich Ph6 zeeg-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  --schrift-auswahl-summe-laufweite: -0.4px; /* Vertrag: „Gesamt pro User“, Formular-Titel Bilanz; wertgleich Ph6 zeeg-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  --schrift-interview-titel-gewicht: 800; /* Vertrag: H2 des Interviews; wertgleich Ph6 alternative-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  --schrift-interview-titel-groesse: 28px; /* Vertrag: H2 des Interviews; wertgleich Ph6 alternative-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  --schrift-interview-titel-zeile: 1.25; /* Vertrag: H2 des Interviews; wertgleich Ph6 alternative-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  --schrift-interview-titel-laufweite: -0.8px; /* Vertrag: H2 des Interviews; wertgleich Ph6 alternative-titel, eigene Ph7-Rolle (H7-18/B15) (Ph7 §6) */
  /* Phase 8 (Vertrag Ph8 §6, V-5; Teil Welle 0) */
  --schrift-hero-app-gewicht: 800; /* Vertrag: Aussage im Tour-Hero (hero-navy schrift: app, T3) (Ph8 §6) */
  --schrift-hero-app-groesse: clamp(28px, 2.9vw, 42px); /* Vertrag: Aussage im Tour-Hero (hero-navy schrift: app, T3) (Ph8 §6) */
  --schrift-hero-app-zeile: 1.1; /* Vertrag: Aussage im Tour-Hero (hero-navy schrift: app, T3) (Ph8 §6) */
  --schrift-hero-app-laufweite: -1.5px; /* Vertrag: Aussage im Tour-Hero (hero-navy schrift: app, T3) (Ph8 §6) */
  --schrift-hero-hell-gewicht: 800; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) (Ph8 §6) */
  --schrift-hero-hell-groesse: 60px; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) (Ph8 §6) */
  --schrift-hero-hell-zeile: 1.04; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) (Ph8 §6) */
  --schrift-hero-hell-laufweite: -2.2px; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) (Ph8 §6) */
  --schrift-hero-xl-gewicht: 800; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl, A7; mobil 38px) (Ph8 §6) */
  --schrift-hero-xl-groesse: 76px; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl, A7; mobil 38px) (Ph8 §6) */
  --schrift-hero-xl-zeile: 1.02; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl, A7; mobil 38px) (Ph8 §6) */
  --schrift-hero-xl-laufweite: -3.2px; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl, A7; mobil 38px) (Ph8 §6) */
  --schrift-zahl-bilanz-gewicht: 800; /* Vertrag: Bilanz- und Zahlenkarten (A7, VF, CF, AD; mobil 30px, K3) (Ph8 §6) */
  --schrift-zahl-bilanz-groesse: 42px; /* Vertrag: Bilanz- und Zahlenkarten (A7, VF, CF, AD; mobil 30px, K3) (Ph8 §6) */
  --schrift-zahl-bilanz-zeile: 1; /* Vertrag: Bilanz- und Zahlenkarten (A7, VF, CF, AD; mobil 30px, K3) (Ph8 §6) */
  --schrift-zahl-bilanz-laufweite: -1.6px; /* Vertrag: Bilanz- und Zahlenkarten (A7, VF, CF, AD; mobil 30px, K3) (Ph8 §6) */
  --schrift-label-stark-gewicht: 800; /* Vertrag: Kicker stark, Mono (Pakete, A7; Laufweite festgelegt in V-5) (Ph8 §6) */
  --schrift-label-stark-groesse: 11px; /* Vertrag: Kicker stark, Mono (Pakete, A7; Laufweite festgelegt in V-5) (Ph8 §6) */
  --schrift-label-stark-zeile: normal; /* Vertrag: Kicker stark, Mono (Pakete, A7; Laufweite festgelegt in V-5) (Ph8 §6) */
  --schrift-label-stark-laufweite: 1.3px; /* Vertrag: Kicker stark, Mono (Pakete, A7; Laufweite festgelegt in V-5) (Ph8 §6) */
  --schrift-karte-titel-klein-gewicht: 800; /* Vertrag: Kartentitel klein (T3 „Auf einen Blick“; ≠ karte-titel 21px) (Ph8 §6) */
  --schrift-karte-titel-klein-groesse: 19px; /* Vertrag: Kartentitel klein (T3 „Auf einen Blick“; ≠ karte-titel 21px) (Ph8 §6) */
  --schrift-karte-titel-klein-zeile: 1.25; /* Vertrag: Kartentitel klein (T3 „Auf einen Blick“; ≠ karte-titel 21px) (Ph8 §6) */
  --schrift-karte-titel-klein-laufweite: -0.4px; /* Vertrag: Kartentitel klein (T3 „Auf einen Blick“; ≠ karte-titel 21px) (Ph8 §6) */
  --schrift-zitat-definition-gewicht: 500; /* Vertrag: Satz „Was brainX ist“ (W3, kurzantwort zitat; K10; mobil 21px) (Ph8 §6) */
  --schrift-zitat-definition-groesse: 27px; /* Vertrag: Satz „Was brainX ist“ (W3, kurzantwort zitat; K10; mobil 21px) (Ph8 §6) */
  --schrift-zitat-definition-zeile: 1.45; /* Vertrag: Satz „Was brainX ist“ (W3, kurzantwort zitat; K10; mobil 21px) (Ph8 §6) */
  --schrift-zitat-definition-laufweite: -0.5px; /* Vertrag: Satz „Was brainX ist“ (W3, kurzantwort zitat; K10; mobil 21px) (Ph8 §6) */
  --schrift-ergebnis-titel-gewicht: 800; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) (Ph8 §6) */
  --schrift-ergebnis-titel-groesse: 27px; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) (Ph8 §6) */
  --schrift-ergebnis-titel-zeile: normal; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) (Ph8 §6) */
  --schrift-ergebnis-titel-laufweite: -1px; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) (Ph8 §6) */
  --schrift-phase-titel-gewicht: 700; /* Vertrag: Phasentitel im Phasenplan (wechsel-zeitplan, OB) (Ph8 §6) */
  --schrift-phase-titel-groesse: 14.5px; /* Vertrag: Phasentitel im Phasenplan (wechsel-zeitplan, OB) (Ph8 §6) */
  --schrift-phase-titel-zeile: 1.35; /* Vertrag: Phasentitel im Phasenplan (wechsel-zeitplan, OB) (Ph8 §6) */
  --schrift-phase-titel-laufweite: 0; /* Vertrag: Phasentitel im Phasenplan (wechsel-zeitplan, OB) (Ph8 §6) */
  --schrift-zitat-person-gewicht: 500; /* Vertrag: Zitat „Wer dahintersteht“ (W3 Z. 202, beleg person; H1c-Wert vor Welle 1, H8-16; mobil 24px) (Ph8 §6) */
  --schrift-zitat-person-groesse: 30px; /* Vertrag: Zitat „Wer dahintersteht“ (W3 Z. 202, beleg person; H1c-Wert vor Welle 1, H8-16; mobil 24px) (Ph8 §6) */
  --schrift-zitat-person-zeile: 1.35; /* Vertrag: Zitat „Wer dahintersteht“ (W3 Z. 202, beleg person; H1c-Wert vor Welle 1, H8-16; mobil 24px) (Ph8 §6) */
  --schrift-zitat-person-laufweite: -0.8px; /* Vertrag: Zitat „Wer dahintersteht“ (W3 Z. 202, beleg person; H1c-Wert vor Welle 1, H8-16; mobil 24px) (Ph8 §6) */
  --schrift-bento-ziffer-gewicht: 800; /* Vertrag: Geisterziffer im Bento von karten nummeriert, Mono (CP „Was Sie davon haben“; H2c-Fix, H8-82; mobil 30px) (Ph8 §6) */
  --schrift-bento-ziffer-groesse: 46px; /* Vertrag: Geisterziffer im Bento von karten nummeriert, Mono (CP „Was Sie davon haben“; H2c-Fix, H8-82; mobil 30px) (Ph8 §6) */
  --schrift-bento-ziffer-zeile: 1; /* Vertrag: Geisterziffer im Bento von karten nummeriert, Mono (CP „Was Sie davon haben“; H2c-Fix, H8-82; mobil 30px) (Ph8 §6) */
  --schrift-bento-ziffer-laufweite: -2px; /* Vertrag: Geisterziffer im Bento von karten nummeriert, Mono (CP „Was Sie davon haben“; H2c-Fix, H8-82; mobil 30px) (Ph8 §6) */
  /* Phase 9 (Vertrag Ph9 §6, V-7; Welle 0: I0a, I0b, I0c) */
  --schrift-hero-integration-gewicht: 800; /* Vertrag: H1 der Integrationsseite (hero-integration, I0a) (Ph9 §6) */
  --schrift-hero-integration-groesse: clamp(32px, 3.2vw, 46px); /* Vertrag: H1 der Integrationsseite (hero-integration, I0a) (Ph9 §6) */
  --schrift-hero-integration-zeile: 1.1; /* Vertrag: H1 der Integrationsseite (hero-integration, I0a) (Ph9 §6) */
  --schrift-hero-integration-laufweite: -1.4px; /* Vertrag: H1 der Integrationsseite (hero-integration, I0a) (Ph9 §6) */
  --schrift-logo-name-gewicht: 800; /* Vertrag: Name neben dem Logo (hero-integration, I0a; mobil 24px) (Ph9 §6) */
  --schrift-logo-name-groesse: 30px; /* Vertrag: Name neben dem Logo (hero-integration, I0a; mobil 24px) (Ph9 §6) */
  --schrift-logo-name-zeile: 1; /* Vertrag: Name neben dem Logo (hero-integration, I0a; mobil 24px) (Ph9 §6) */
  --schrift-logo-name-laufweite: -0.8px; /* Vertrag: Name neben dem Logo (hero-integration, I0a; mobil 24px) (Ph9 §6) */
  --schrift-karte-titel-integration-gewicht: 800; /* Vertrag: Titel der Weg- und Voraussetzungs-Karten (weg-der-daten I0a, voraussetzungen I1c) (Ph9 §6) */
  --schrift-karte-titel-integration-groesse: 19px; /* Vertrag: Titel der Weg- und Voraussetzungs-Karten (weg-der-daten I0a, voraussetzungen I1c) (Ph9 §6) */
  --schrift-karte-titel-integration-zeile: 1.3; /* Vertrag: Titel der Weg- und Voraussetzungs-Karten (weg-der-daten I0a, voraussetzungen I1c) (Ph9 §6) */
  --schrift-karte-titel-integration-laufweite: 0; /* Vertrag: Titel der Weg- und Voraussetzungs-Karten (weg-der-daten I0a, voraussetzungen I1c) (Ph9 §6) */
  --schrift-abschluss-titel-gewicht: 800; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross, I0a; mobil 21px) (Ph9 §6) */
  --schrift-abschluss-titel-groesse: 26px; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross, I0a; mobil 21px) (Ph9 §6) */
  --schrift-abschluss-titel-zeile: 1.25; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross, I0a; mobil 21px) (Ph9 §6) */
  --schrift-abschluss-titel-laufweite: -0.6px; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross, I0a; mobil 21px) (Ph9 §6) */
  --schrift-tabelle-zelle-titel-gewicht: 700; /* Vertrag: Tabellenkopf und Merkmal (varianten-tabelle, I0a) (Ph9 §6) */
  --schrift-tabelle-zelle-titel-groesse: 15px; /* Vertrag: Tabellenkopf und Merkmal (varianten-tabelle, I0a) (Ph9 §6) */
  --schrift-tabelle-zelle-titel-zeile: 1.4; /* Vertrag: Tabellenkopf und Merkmal (varianten-tabelle, I0a); Zeile 1.4 nach H9-35/P-VW0-5 (Ph9 §6) */
  --schrift-tabelle-zelle-titel-laufweite: 0; /* Vertrag: Tabellenkopf und Merkmal (varianten-tabelle, I0a) (Ph9 §6) */
  --schrift-tabelle-zelle-titel-klein-gewicht: 700; /* Vertrag: Tabellenkopf und Merkmal bei Elementbreite unter 720 px (varianten-tabelle klein, D §9.0, H9-35/P-VW0-5) (Ph9 §6) */
  --schrift-tabelle-zelle-titel-klein-groesse: 13.5px; /* Vertrag: Tabellenkopf und Merkmal bei Elementbreite unter 720 px (varianten-tabelle klein, D §9.0, H9-35/P-VW0-5) (Ph9 §6) */
  --schrift-tabelle-zelle-titel-klein-zeile: 1.4; /* Vertrag: Tabellenkopf und Merkmal bei Elementbreite unter 720 px (varianten-tabelle klein, D §9.0, H9-35/P-VW0-5) (Ph9 §6) */
  --schrift-tabelle-zelle-titel-klein-laufweite: 0; /* Vertrag: Tabellenkopf und Merkmal bei Elementbreite unter 720 px (varianten-tabelle klein, D §9.0, H9-35/P-VW0-5) (Ph9 §6) */
  --schrift-gruppenlabel-gewicht: 500; /* Vertrag: Gruppen-Labels, Mono (varianten-tabelle Kopf „Merkmal“ I0a, stationen ablauf I1c, vergleichsmatrix I3c; H9-35/P-VW0-4) (Ph9 §6) */
  --schrift-gruppenlabel-groesse: 11px; /* Vertrag: Gruppen-Labels, Mono (varianten-tabelle Kopf „Merkmal“ I0a, stationen ablauf I1c, vergleichsmatrix I3c; H9-35/P-VW0-4) (Ph9 §6) */
  --schrift-gruppenlabel-zeile: 1.3; /* Vertrag: Gruppen-Labels, Mono (varianten-tabelle Kopf „Merkmal“ I0a, stationen ablauf I1c, vergleichsmatrix I3c; H9-35/P-VW0-4) (Ph9 §6) */
  --schrift-gruppenlabel-laufweite: 1.1px; /* Vertrag: Gruppen-Labels, Mono (varianten-tabelle Kopf „Merkmal“ I0a, stationen ablauf I1c, vergleichsmatrix I3c; H9-35/P-VW0-4) (Ph9 §6) */
  --schrift-anbieter-tabelle-gewicht: 700; /* Vertrag: Mail-Tabelle mit fünf Spalten, Kopf 700, Zellen mit Gewicht 400 (varianten-tabelle, I0a) (Ph9 §6) */
  --schrift-anbieter-tabelle-groesse: 12.5px; /* Vertrag: Mail-Tabelle mit fünf Spalten, Kopf 700, Zellen mit Gewicht 400 (varianten-tabelle, I0a) (Ph9 §6) */
  --schrift-anbieter-tabelle-zeile: 1.5; /* Vertrag: Mail-Tabelle mit fünf Spalten, Kopf 700, Zellen mit Gewicht 400 (varianten-tabelle, I0a) (Ph9 §6) */
  --schrift-anbieter-tabelle-laufweite: 0; /* Vertrag: Mail-Tabelle mit fünf Spalten, Kopf 700, Zellen mit Gewicht 400 (varianten-tabelle, I0a) (Ph9 §6) */
  --schrift-sammelliste-gruppe-gewicht: 800; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste, I0c R-10; mobil 24px) (Ph9 §6) */
  --schrift-sammelliste-gruppe-groesse: 28px; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste, I0c R-10; mobil 24px) (Ph9 §6) */
  --schrift-sammelliste-gruppe-zeile: normal; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste, I0c R-10; mobil 24px) (Ph9 §6) */
  --schrift-sammelliste-gruppe-laufweite: -0.7px; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste, I0c R-10; mobil 24px) (Ph9 §6) */
  --schrift-leer-titel-gewicht: 700; /* Vertrag: Titel des Leerzustands (sammelliste, I0c R-10) (Ph9 §6) */
  --schrift-leer-titel-groesse: 20px; /* Vertrag: Titel des Leerzustands (sammelliste, I0c R-10) (Ph9 §6) */
  --schrift-leer-titel-zeile: normal; /* Vertrag: Titel des Leerzustands (sammelliste, I0c R-10) (Ph9 §6) */
  --schrift-leer-titel-laufweite: 0; /* Vertrag: Titel des Leerzustands (sammelliste, I0c R-10) (Ph9 §6) */
  /* Phase 9, Block „Ph9 I1c“ (Vertrag Ph9 §6, V-7 vor Welle 1) */
  --schrift-tab-titel-gewicht: 700; /* Vertrag: Titel der Ablauf-Tabs (stationen ablauf, I1c; DV2 Z. 173) (Ph9 §6, V-7 Block I1c) */
  --schrift-tab-titel-groesse: 14.5px; /* Vertrag: Titel der Ablauf-Tabs (stationen ablauf, I1c; DV2 Z. 173) (Ph9 §6, V-7 Block I1c) */
  --schrift-tab-titel-zeile: 1.25; /* Vertrag: Titel der Ablauf-Tabs (stationen ablauf, I1c; DV2 Z. 173) (Ph9 §6, V-7 Block I1c) */
  --schrift-tab-titel-laufweite: 0; /* Vertrag: Titel der Ablauf-Tabs (stationen ablauf, I1c; DV2 Z. 173) (Ph9 §6, V-7 Block I1c) */
  --schrift-tab-nummer-gewicht: 700; /* Vertrag: Nummer der Ablauf-Tabs, Mono (stationen ablauf, I1c; DV2 Z. 172) (Ph9 §6, V-7 Block I1c) */
  --schrift-tab-nummer-groesse: 12px; /* Vertrag: Nummer der Ablauf-Tabs, Mono (stationen ablauf, I1c; DV2 Z. 172) (Ph9 §6, V-7 Block I1c) */
  --schrift-tab-nummer-zeile: 1; /* Vertrag: Nummer der Ablauf-Tabs, Mono (stationen ablauf, I1c; DV2 Z. 172) (Ph9 §6, V-7 Block I1c) */
  --schrift-tab-nummer-laufweite: 0; /* Vertrag: Nummer der Ablauf-Tabs, Mono (stationen ablauf, I1c; DV2 Z. 172) (Ph9 §6, V-7 Block I1c) */
  --schrift-kennzahl-gruen-gewicht: 800; /* Vertrag: Ergebnis der Besonderheit (besonderheit, I1c; DV2 Z. 268; mobil 24px) (Ph9 §6, V-7 Block I1c) */
  --schrift-kennzahl-gruen-groesse: 28px; /* Vertrag: Ergebnis der Besonderheit (besonderheit, I1c; DV2 Z. 268; mobil 24px) (Ph9 §6, V-7 Block I1c) */
  --schrift-kennzahl-gruen-zeile: 1.1; /* Vertrag: Ergebnis der Besonderheit (besonderheit, I1c; DV2 Z. 268; mobil 24px) (Ph9 §6, V-7 Block I1c) */
  --schrift-kennzahl-gruen-laufweite: -0.8px; /* Vertrag: Ergebnis der Besonderheit (besonderheit, I1c; DV2 Z. 268; mobil 24px) (Ph9 §6, V-7 Block I1c) */
  --schrift-besonderheit-zelle-betont-gewicht: 700; /* Vertrag: betonte Zeile (Summenzeile) in tabelle, zeile und details der Besonderheit; normale Zeile 400 (besonderheit, I1c; ZF Z. 282, A-103) (Ph9 §6, V-7 Block I1c) */
  --schrift-besonderheit-zelle-betont-groesse: 13.5px; /* Vertrag: betonte Zeile (Summenzeile) in tabelle, zeile und details der Besonderheit; normale Zeile 400 (besonderheit, I1c; ZF Z. 282, A-103) (Ph9 §6, V-7 Block I1c) */
  --schrift-besonderheit-zelle-betont-zeile: 1.45; /* Vertrag: betonte Zeile (Summenzeile) in tabelle, zeile und details der Besonderheit; normale Zeile 400 (besonderheit, I1c; ZF Z. 282, A-103) (Ph9 §6, V-7 Block I1c) */
  --schrift-besonderheit-zelle-betont-laufweite: 0; /* Vertrag: betonte Zeile (Summenzeile) in tabelle, zeile und details der Besonderheit; normale Zeile 400 (besonderheit, I1c; ZF Z. 282, A-103) (Ph9 §6, V-7 Block I1c) */
  /* Phase 9, Block „Ph9 I2a“ (Vertrag Ph9 §6, V-7 durch den Umsetzer, N9-197; H9-23/I2a R-3, B11) */
  --schrift-regler-wert-gewicht: 800; /* Vertrag: Wert neben dem Regler-Label (mini-rechner, I2a; Design 07 Preisvergleich) (Ph9 §6, V-7 Block I2a) */
  --schrift-regler-wert-groesse: 22px; /* Vertrag: Wert neben dem Regler-Label (mini-rechner, I2a; Design 07 Preisvergleich) (Ph9 §6, V-7 Block I2a) */
  --schrift-regler-wert-zeile: normal; /* Vertrag: Wert neben dem Regler-Label (mini-rechner, I2a; Design 07 Preisvergleich) (Ph9 §6, V-7 Block I2a) */
  --schrift-regler-wert-laufweite: -0.5px; /* Vertrag: Wert neben dem Regler-Label (mini-rechner, I2a; Design 07 Preisvergleich) (Ph9 §6, V-7 Block I2a) */
  --schrift-tabelle-kopf-gewicht: 700; /* Vertrag: Tabellenkopf der Beispieltabelle, Mono (mini-rechner, I2a; Matrix-Kopf I3c) (Ph9 §6, V-7 Block I2a) */
  --schrift-tabelle-kopf-groesse: 12px; /* Vertrag: Tabellenkopf der Beispieltabelle, Mono (mini-rechner, I2a; Matrix-Kopf I3c) (Ph9 §6, V-7 Block I2a) */
  --schrift-tabelle-kopf-zeile: normal; /* Vertrag: Tabellenkopf der Beispieltabelle, Mono (mini-rechner, I2a; Matrix-Kopf I3c) (Ph9 §6, V-7 Block I2a) */
  --schrift-tabelle-kopf-laufweite: 0.6px; /* Vertrag: Tabellenkopf der Beispieltabelle, Mono (mini-rechner, I2a; Matrix-Kopf I3c) (Ph9 §6, V-7 Block I2a) */
  /* Phase 10 (Vertrag Ph10 §6, V-7; Welle 0: K0b, K0c; Welle 1: R1a, R1b, R1c) */
  --schrift-kachel-titel-gewicht: 700; /* Vertrag: Titel der Whitepaper-Kachel und der Download-Karte (whitepaper-kopf K0b, sammelliste Medium titelbild R2b) (Ph10 §6) */
  --schrift-kachel-titel-groesse: 16.5px; /* Vertrag: Titel der Whitepaper-Kachel und der Download-Karte (whitepaper-kopf K0b, sammelliste Medium titelbild R2b) (Ph10 §6) */
  --schrift-kachel-titel-zeile: 1.32; /* Vertrag: Titel der Whitepaper-Kachel und der Download-Karte (whitepaper-kopf K0b, sammelliste Medium titelbild R2b) (Ph10 §6) */
  --schrift-kachel-titel-laufweite: -0.3px; /* Vertrag: Titel der Whitepaper-Kachel und der Download-Karte (whitepaper-kopf K0b, sammelliste Medium titelbild R2b) (Ph10 §6) */
  --schrift-schritt-titel-gewicht: 700; /* Vertrag: Schritt- und Kapiteltitel (whitepaper-inhalt K0b, einrichtung R1a, rechte-tabs R1b) (Ph10 §6) */
  --schrift-schritt-titel-groesse: 17px; /* Vertrag: Schritt- und Kapiteltitel (whitepaper-inhalt K0b, einrichtung R1a, rechte-tabs R1b) (Ph10 §6) */
  --schrift-schritt-titel-zeile: 1.35; /* Vertrag: Schritt- und Kapiteltitel (whitepaper-inhalt K0b, einrichtung R1a, rechte-tabs R1b) (Ph10 §6) */
  --schrift-schritt-titel-laufweite: 0; /* Vertrag: Schritt- und Kapiteltitel (whitepaper-inhalt K0b, einrichtung R1a, rechte-tabs R1b) (Ph10 §6) */
  --schrift-nummer-gross-gewicht: 800; /* Vertrag: Nummer der Kernaussage (whitepaper-inhalt, K0b) (Ph10 §6) */
  --schrift-nummer-gross-groesse: 26px; /* Vertrag: Nummer der Kernaussage (whitepaper-inhalt, K0b) (Ph10 §6) */
  --schrift-nummer-gross-zeile: 1; /* Vertrag: Nummer der Kernaussage (whitepaper-inhalt, K0b) (Ph10 §6) */
  --schrift-nummer-gross-laufweite: -1px; /* Vertrag: Nummer der Kernaussage (whitepaper-inhalt, K0b) (Ph10 §6) */
  --schrift-titelbild-titel-gewicht: 700; /* Vertrag: Kurztitel im Titelbild (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-titel-groesse: 21px; /* Vertrag: Kurztitel im Titelbild (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-titel-zeile: 1.24; /* Vertrag: Kurztitel im Titelbild (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-titel-laufweite: -0.5px; /* Vertrag: Kurztitel im Titelbild (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-gewicht: 800; /* Vertrag: Seitenzahl im Stempel des Titelbilds (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-groesse: 17px; /* Vertrag: Seitenzahl im Stempel des Titelbilds (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-zeile: 1; /* Vertrag: Seitenzahl im Stempel des Titelbilds (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-laufweite: -0.6px; /* Vertrag: Seitenzahl im Stempel des Titelbilds (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-label-gewicht: 700; /* Vertrag: Label „Seiten“ im Stempel des Titelbilds, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-label-groesse: 6.5px; /* Vertrag: Label „Seiten“ im Stempel des Titelbilds, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-label-zeile: 1; /* Vertrag: Label „Seiten“ im Stempel des Titelbilds, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-stempel-label-laufweite: 1.2px; /* Vertrag: Label „Seiten“ im Stempel des Titelbilds, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-chip-gewicht: 700; /* Vertrag: Thema-Chip im Titelbild, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-chip-groesse: 10px; /* Vertrag: Thema-Chip im Titelbild, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-chip-zeile: 1; /* Vertrag: Thema-Chip im Titelbild, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titelbild-chip-laufweite: 0.8px; /* Vertrag: Thema-Chip im Titelbild, Mono (Titelbild, K0b) (Ph10 §6) */
  --schrift-titel-recht-gewicht: 800; /* Vertrag: H1 der Rechtsseiten (rechtstext, K0c; mobil 30px) (Ph10 §6) */
  --schrift-titel-recht-groesse: 40px; /* Vertrag: H1 der Rechtsseiten (rechtstext, K0c; mobil 30px) (Ph10 §6) */
  --schrift-titel-recht-zeile: 1.14; /* Vertrag: H1 der Rechtsseiten (rechtstext, K0c; mobil 30px) (Ph10 §6) */
  --schrift-titel-recht-laufweite: -1.4px; /* Vertrag: H1 der Rechtsseiten (rechtstext, K0c; mobil 30px) (Ph10 §6) */
  --schrift-rechtstext-gewicht: 400; /* Vertrag: Fließtext der Rechtsseiten und Datentabellen (rechtstext, K0c) (Ph10 §6) */
  --schrift-rechtstext-groesse: 15px; /* Vertrag: Fließtext der Rechtsseiten und Datentabellen (rechtstext, K0c) (Ph10 §6) */
  --schrift-rechtstext-zeile: 1.7; /* Vertrag: Fließtext der Rechtsseiten und Datentabellen (rechtstext, K0c) (Ph10 §6) */
  --schrift-rechtstext-laufweite: 0; /* Vertrag: Fließtext der Rechtsseiten und Datentabellen (rechtstext, K0c) (Ph10 §6) */
  --schrift-recht-kicker-gewicht: 500; /* Vertrag: Kicker „Kapitel 01“ und Nummern der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-kicker-groesse: 12px; /* Vertrag: Kicker „Kapitel 01“ und Nummern der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-kicker-zeile: normal; /* Vertrag: Kicker „Kapitel 01“ und Nummern der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-kicker-laufweite: 1.1px; /* Vertrag: Kicker „Kapitel 01“ und Nummern der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-eintrag-gewicht: 600; /* Vertrag: Eintragstitel des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-eintrag-groesse: 13.5px; /* Vertrag: Eintragstitel des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-eintrag-zeile: 1.45; /* Vertrag: Eintragstitel des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-eintrag-laufweite: 0; /* Vertrag: Eintragstitel des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-unterpunkt-gewicht: 400; /* Vertrag: Unterpunkte des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-unterpunkt-groesse: 13px; /* Vertrag: Unterpunkte des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-unterpunkt-zeile: 1.45; /* Vertrag: Unterpunkte des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-unterpunkt-laufweite: 0; /* Vertrag: Unterpunkte des Verzeichnisses der Rechtsseiten (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-stand-gewicht: 500; /* Vertrag: Stand-Zeile am Textende der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-stand-groesse: 12px; /* Vertrag: Stand-Zeile am Textende der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-stand-zeile: normal; /* Vertrag: Stand-Zeile am Textende der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-recht-stand-laufweite: 0.8px; /* Vertrag: Stand-Zeile am Textende der Rechtsseiten, Mono (rechtstext, K0c Fix) (Ph10 §6) */
  --schrift-h2-dicht-gewicht: 800; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register R1a; api-referenz R1c; mobil 24px) (Ph10 §6) */
  --schrift-h2-dicht-groesse: 32px; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register R1a; api-referenz R1c; mobil 24px) (Ph10 §6) */
  --schrift-h2-dicht-zeile: 1.16; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register R1a; api-referenz R1c; mobil 24px) (Ph10 §6) */
  --schrift-h2-dicht-laufweite: -1.1px; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register R1a; api-referenz R1c; mobil 24px) (Ph10 §6) */
  --schrift-ziffer-gross-gewicht: 800; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer, R1b; mobil 44px) (Ph10 §6) */
  --schrift-ziffer-gross-groesse: 62px; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer, R1b; mobil 44px) (Ph10 §6) */
  --schrift-ziffer-gross-zeile: 1; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer, R1b; mobil 44px) (Ph10 §6) */
  --schrift-ziffer-gross-laufweite: 0; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer, R1b; mobil 44px) (Ph10 §6) */
  --schrift-steckbrief-wert-gewicht: 700; /* Vertrag: Werte der Steckbriefe, Mono (steckbrief R1b, einrichtung R1a) (Ph10 §6) */
  --schrift-steckbrief-wert-groesse: 15px; /* Vertrag: Werte der Steckbriefe, Mono (steckbrief R1b, einrichtung R1a) (Ph10 §6) */
  --schrift-steckbrief-wert-zeile: 1.3; /* Vertrag: Werte der Steckbriefe, Mono (steckbrief R1b, einrichtung R1a) (Ph10 §6) */
  --schrift-steckbrief-wert-laufweite: 0; /* Vertrag: Werte der Steckbriefe, Mono (steckbrief R1b, einrichtung R1a) (Ph10 §6) */
  --schrift-hosting-legende-titel-gewicht: 700; /* Ergänzung: Design-Abgleich Ph12, Titel der Legende in der Hosting-Karte */
  --schrift-hosting-legende-titel-groesse: 15px; /* Ergänzung: Design-Abgleich Ph12, Titel der Legende in der Hosting-Karte */
  --schrift-hosting-legende-titel-zeile: normal; /* Ergänzung: Design-Abgleich Ph12, Titel der Legende in der Hosting-Karte */
  --schrift-hosting-legende-titel-laufweite: 0; /* Ergänzung: Design-Abgleich Ph12, Titel der Legende in der Hosting-Karte */
  --schrift-hosting-ort-gewicht: 700; /* Ergänzung: Design-Abgleich 27.10., Ortsname auf der Hosting-Karte */
  --schrift-hosting-ort-groesse: 13px; /* Ergänzung: Design-Abgleich 27.10., Ortsname auf der Hosting-Karte */
  --schrift-hosting-ort-zeile: 13px; /* Ergänzung: Design-Abgleich 27.10., Ortsname auf der Hosting-Karte */
  --schrift-hosting-region-gewicht: 500; /* Ergänzung: Design-Abgleich 27.10., Region auf der Hosting-Karte */
  --schrift-hosting-region-groesse: 9.5px; /* Ergänzung: Design-Abgleich 27.10., Region auf der Hosting-Karte */
  --schrift-hosting-region-zeile: 14px; /* Ergänzung: Design-Abgleich 27.10., Region auf der Hosting-Karte */
  --schrift-hosting-region-laufweite: .6px; /* Ergänzung: Design-Abgleich 27.10., Region auf der Hosting-Karte */
  --schrift-stempel-gewicht: 800; /* Ergänzung: Design-Abgleich 27.10., Stempel der Zertifikatsgrafik */
  --schrift-stempel-laufweite: .6px; /* Ergänzung: Design-Abgleich 27.10., Stempel der Zertifikatsgrafik */
  --schrift-stempel-datum-groesse: 8px; /* Ergänzung: Design-Abgleich 27.10., Datum im Stempel */
  --schrift-stempel-datum-gewicht: 500; /* Ergänzung: Design-Abgleich 27.10., Datum im Stempel */
  --schrift-hosting-legende-text-gewicht: 400; /* Ergänzung: Design-Abgleich Ph12, Text der Legende in der Hosting-Karte */
  --schrift-hosting-legende-text-groesse: 13.5px; /* Ergänzung: Design-Abgleich Ph12, Text der Legende in der Hosting-Karte */
  --schrift-hosting-legende-text-zeile: 1.55; /* Ergänzung: Design-Abgleich Ph12, Text der Legende in der Hosting-Karte */
  --schrift-hosting-legende-text-laufweite: 0; /* Ergänzung: Design-Abgleich Ph12, Text der Legende in der Hosting-Karte */
  --schrift-h2-teaser-gewicht: 800; /* Ergänzung: Design-Abgleich Ph12, H2 des Unterlagen-Teasers der DSGVO-Seite (ab mobil) */
  --schrift-h2-teaser-groesse: clamp(30px, calc(18px + 1.25vw), 36px); /* Ergänzung: Design-Abgleich Ph12, H2 des Unterlagen-Teasers der DSGVO-Seite (ab mobil) */
  --schrift-h2-teaser-zeile: 1.14; /* Ergänzung: Design-Abgleich Ph12, H2 des Unterlagen-Teasers der DSGVO-Seite (ab mobil) */
  --schrift-h2-teaser-laufweite: -1.2px; /* Ergänzung: Design-Abgleich Ph12, H2 des Unterlagen-Teasers der DSGVO-Seite (ab mobil) */
  --schrift-code-gewicht: 500; /* Vertrag: Code und Inline-Code, Mono (api-referenz, R1c) (Ph10 §6) */
  --schrift-code-groesse: 12.5px; /* Vertrag: Code und Inline-Code, Mono (api-referenz, R1c) (Ph10 §6) */
  --schrift-code-zeile: 1.8; /* Vertrag: Code und Inline-Code, Mono (api-referenz, R1c) (Ph10 §6) */
  --schrift-code-laufweite: 0; /* Vertrag: Code und Inline-Code, Mono (api-referenz, R1c) (Ph10 §6) */
  /* Phase 11 (Vertrag Ph11 §6, V-7; Teil 0, Welle 0: M0a, M0b, M0c) */
  --schrift-hero-aufgabe-gewicht: 800; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, M0a; DA §4 „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) (Ph11 §6) */
  --schrift-hero-aufgabe-groesse: 54px; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, M0a; DA §4 „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) (Ph11 §6) */
  --schrift-hero-aufgabe-zeile: 1.06; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, M0a; DA §4 „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) (Ph11 §6) */
  --schrift-hero-aufgabe-laufweite: -1.8px; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, M0a; DA §4 „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) (Ph11 §6) */
  --schrift-hero-branche-gewicht: 800; /* Vertrag: H1 der Branchen-Heros IT und HS (hero-hell branche, M0a; DA „Allgemein Branchen“; clamp trägt alle Breiten) (Ph11 §6) */
  --schrift-hero-branche-groesse: clamp(44px, 5.4vw, 76px); /* Vertrag: H1 der Branchen-Heros IT und HS (hero-hell branche, M0a; DA „Allgemein Branchen“; clamp trägt alle Breiten) (Ph11 §6) */
  --schrift-hero-branche-zeile: 1; /* Vertrag: H1 der Branchen-Heros IT und HS (hero-hell branche, M0a; DA „Allgemein Branchen“; clamp trägt alle Breiten) (Ph11 §6) */
  --schrift-hero-branche-laufweite: -3.2px; /* Vertrag: H1 der Branchen-Heros IT und HS (hero-hell branche, M0a; DA „Allgemein Branchen“; clamp trägt alle Breiten) (Ph11 §6) */
  --schrift-hero-satz-gewicht: 700; /* Vertrag: H1 der Startseite als Satz (hero-hell startseite, M0a/M0c; DA §2.5 S1) (Ph11 §6) */
  --schrift-hero-satz-groesse: clamp(17px, 1.6vw, 21px); /* Vertrag: H1 der Startseite als Satz (hero-hell startseite, M0a/M0c; DA §2.5 S1) (Ph11 §6) */
  --schrift-hero-satz-zeile: 1.35; /* Vertrag: H1 der Startseite als Satz (hero-hell startseite, M0a/M0c; DA §2.5 S1) (Ph11 §6) */
  --schrift-hero-satz-laufweite: -0.3px; /* Vertrag: Design-Abgleich Ph12 (V-A-rahmen-7; vorher 0), H1 der Startseite als Satz (hero-hell startseite, M0a/M0c; DA §2.5 S1) (Ph11 §6) */
  --schrift-lead-branche-gewicht: 400; /* Vertrag: Lead der Branchen-Heros (hero-hell branche, M0a; DA „Allgemein Branchen“; ≠ lead-gross 20/1.6) (Ph11 §6) */
  --schrift-lead-branche-groesse: 21px; /* Vertrag: Lead der Branchen-Heros (hero-hell branche, M0a; DA „Allgemein Branchen“; ≠ lead-gross 20/1.6) (Ph11 §6) */
  --schrift-lead-branche-zeile: 1.55; /* Vertrag: Lead der Branchen-Heros (hero-hell branche, M0a; DA „Allgemein Branchen“; ≠ lead-gross 20/1.6) (Ph11 §6) */
  --schrift-lead-branche-laufweite: 0; /* Vertrag: Lead der Branchen-Heros (hero-hell branche, M0a; DA „Allgemein Branchen“; ≠ lead-gross 20/1.6) (Ph11 §6) */
  --schrift-lead-start-gewicht: 400; /* Ergänzung: Design-Abgleich Ph12, Lead der Startseite (hero-hell startseite; Startseite v6 S1; V-A-rahmen-8) */
  --schrift-lead-start-groesse: clamp(17px, 1.5vw, 20px); /* Ergänzung: Design-Abgleich Ph12, Lead der Startseite (hero-hell startseite; Startseite v6 S1; V-A-rahmen-8) */
  --schrift-lead-start-zeile: 1.6; /* Ergänzung: Design-Abgleich Ph12, Lead der Startseite (hero-hell startseite; Startseite v6 S1; V-A-rahmen-8) */
  --schrift-lead-start-laufweite: 0; /* Ergänzung: Design-Abgleich Ph12, Lead der Startseite (hero-hell startseite; Startseite v6 S1; V-A-rahmen-8) */
  /* Phase 11 (Vertrag Ph11 §6, V-7 Teil 1; Welle 1) */
  --schrift-hero-rolle-gewicht: 800; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-hero-rolle-groesse: 47px; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-hero-rolle-zeile: 1.08; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-hero-rolle-laufweite: -1.5px; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-hero-startups-gewicht: 800; /* Vertrag: H1 Startups (SU, DA §4.13) (Ph11 §6) */
  --schrift-hero-startups-groesse: 56px; /* Vertrag: H1 Startups (SU, DA §4.13) (Ph11 §6) */
  --schrift-hero-startups-zeile: 1.04; /* Vertrag: H1 Startups (SU, DA §4.13) (Ph11 §6) */
  --schrift-hero-startups-laufweite: -2.2px; /* Vertrag: H1 Startups (SU, DA §4.13) (Ph11 §6) */
  --schrift-kosten-zahl-gewicht: 800; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-kosten-zahl-groesse: 36px; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-kosten-zahl-zeile: 1; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-kosten-zahl-laufweite: -1.4px; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) (Ph11 §6) */
  --schrift-app-schritt-titel-gewicht: 800; /* Vertrag: Schritttitel, Zahlenband und offene FAQ (app-rahmen, zahlenkarte, faq) (Ph11 §6) */
  --schrift-app-schritt-titel-groesse: 22px; /* Vertrag: Schritttitel, Zahlenband und offene FAQ (app-rahmen, zahlenkarte, faq) (Ph11 §6) */
  --schrift-app-schritt-titel-zeile: 1.25; /* Vertrag: Schritttitel, Zahlenband und offene FAQ (app-rahmen, zahlenkarte, faq) (Ph11 §6) */
  --schrift-app-schritt-titel-laufweite: -0.6px; /* Vertrag: Schritttitel, Zahlenband und offene FAQ (app-rahmen, zahlenkarte, faq) (Ph11 §6) */
  --schrift-zahl-band-gewicht: 800; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) (Ph11 §6) */
  --schrift-zahl-band-groesse: 64px; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) (Ph11 §6) */
  --schrift-zahl-band-zeile: 1; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) (Ph11 §6) */
  --schrift-zahl-band-laufweite: -2.6px; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) (Ph11 §6) */
  --schrift-cta-branche-gewicht: 800; /* Vertrag: Abschluss-H2 (SU, SA, IT, HS) (Ph11 §6) */
  --schrift-cta-branche-groesse: clamp(34px, 3.8vw, 52px); /* Vertrag: Abschluss-H2 (SU, SA, IT, HS) (Ph11 §6) */
  --schrift-cta-branche-zeile: 1.05; /* Vertrag: Abschluss-H2 (SU, SA, IT, HS) (Ph11 §6) */
  --schrift-cta-branche-laufweite: -2.2px; /* Vertrag: Abschluss-H2 (SU, SA, IT, HS) (Ph11 §6) */
  --schrift-beleg-zahl-gewicht: 800; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA §4.13; Mobilwert und Laufweite aus Loesung Startups v3, H11-55) (Ph11 §6) */
  --schrift-beleg-zahl-groesse: 48px; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA §4.13; Mobilwert und Laufweite aus Loesung Startups v3, H11-55) (Ph11 §6) */
  --schrift-beleg-zahl-zeile: 1; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA §4.13; Mobilwert und Laufweite aus Loesung Startups v3, H11-55) (Ph11 §6) */
  --schrift-beleg-zahl-laufweite: -1.8px; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA §4.13; Mobilwert und Laufweite aus Loesung Startups v3, H11-55) (Ph11 §6) */

  /* Phase 11 (Vertrag Ph11 §6, V-7 Teil 2; Welle 2) */
  --schrift-h2-branche-gewicht: 800; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) (Ph11 §6) */
  --schrift-h2-branche-groesse: 46px; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) (Ph11 §6) */
  --schrift-h2-branche-zeile: 1.08; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) (Ph11 §6) */
  --schrift-h2-branche-laufweite: -1.9px; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) (Ph11 §6) */
  --schrift-aussage-gross-gewicht: 800; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) (Ph11 §6) */
  --schrift-aussage-gross-groesse: 34px; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) (Ph11 §6) */
  --schrift-aussage-gross-zeile: 1.15; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) (Ph11 §6) */
  --schrift-aussage-gross-laufweite: -1.2px; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) (Ph11 §6) */
  --schrift-rechnung-netto-gewicht: 800; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) (Ph11 §6) */
  --schrift-rechnung-netto-groesse: 24px; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) (Ph11 §6) */
  --schrift-rechnung-netto-zeile: normal; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) (Ph11 §6) */
  --schrift-rechnung-netto-laufweite: -0.8px; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) (Ph11 §6) */
  --schrift-app-feld-wert-gewicht: 600; /* Vertrag: Vertragswerte (modell-tabs; SA, IT, HS; DA 600 14.5px) (Ph11 §6) */
  --schrift-app-feld-wert-groesse: 14.5px; /* Vertrag: Vertragswerte (modell-tabs; SA, IT, HS; DA 600 14.5px) (Ph11 §6) */
  --schrift-app-feld-wert-zeile: normal; /* Vertrag: Vertragswerte (modell-tabs; SA, IT, HS; DA 600 14.5px) (Ph11 §6) */
  --schrift-app-feld-wert-laufweite: 0; /* Vertrag: Vertragswerte (modell-tabs; SA, IT, HS; DA 600 14.5px) (Ph11 §6) */
  --schrift-geplant-text-gewicht: 400; /* Vertrag: Text im Geplant-Kasten (voraussetzungen; DATEV v2, ZUGFeRD; Design 400 15px/1.55) (Ph12 Design-Abgleich) */
  --schrift-geplant-text-groesse: 15px; /* Vertrag: Text im Geplant-Kasten (voraussetzungen; DATEV v2, ZUGFeRD; Design 400 15px/1.55) (Ph12 Design-Abgleich) */
  --schrift-geplant-text-zeile: 1.55; /* Vertrag: Text im Geplant-Kasten (voraussetzungen; DATEV v2, ZUGFeRD; Design 400 15px/1.55) (Ph12 Design-Abgleich) */
  --schrift-geplant-text-laufweite: 0; /* Vertrag: Text im Geplant-Kasten (voraussetzungen; DATEV v2, ZUGFeRD; Design 400 15px/1.55) (Ph12 Design-Abgleich) */
  /* Design-Abgleich Ph12 F2 (Über uns / Team) */
  --schrift-beleg-namen-gewicht: 500; /* Ergänzung: Zuordnung unter dem Gründerzitat, Mono (Über uns Chronik v3 Z. 186) (Design-Abgleich Ph12 F2) */
  --schrift-beleg-namen-groesse: 12px; /* Ergänzung: Zuordnung unter dem Gründerzitat, Mono (Über uns Chronik v3 Z. 186) (Design-Abgleich Ph12 F2) */
  --schrift-beleg-namen-zeile: 1.9; /* Ergänzung: Zuordnung unter dem Gründerzitat, Mono (Über uns Chronik v3 Z. 186) (Design-Abgleich Ph12 F2) */
  --schrift-beleg-namen-laufweite: 1.2px; /* Ergänzung: Zuordnung unter dem Gründerzitat, Mono (Über uns Chronik v3 Z. 186) (Design-Abgleich Ph12 F2) */
  --schrift-chronik-nummer-gewicht: 800; /* Ergänzung: Nummern der Aussagenliste, Mono (Über uns Chronik v3 Z. 146–161) (Design-Abgleich Ph12 F2) */
  --schrift-chronik-nummer-groesse: 13px; /* Ergänzung: Nummern der Aussagenliste, Mono (Über uns Chronik v3 Z. 146–161) (Design-Abgleich Ph12 F2) */
  --schrift-chronik-nummer-zeile: normal; /* Ergänzung: Nummern der Aussagenliste, Mono (Über uns Chronik v3 Z. 146–161) (Design-Abgleich Ph12 F2) */
  --schrift-chronik-nummer-laufweite: 1.3px; /* Ergänzung: Nummern der Aussagenliste, Mono (Über uns Chronik v3 Z. 146–161) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-gewicht: 800; /* Ergänzung: Titel der hellen Knoten der Vertragsgrafik (Über uns Chronik v3 Z. 202, 211, 212) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-groesse: 16px; /* Ergänzung: Titel der hellen Knoten der Vertragsgrafik (Über uns Chronik v3 Z. 202, 211, 212) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-zeile: normal; /* Ergänzung: Titel der hellen Knoten der Vertragsgrafik (Über uns Chronik v3 Z. 202, 211, 212) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-laufweite: -0.2px; /* Ergänzung: Titel der hellen Knoten der Vertragsgrafik (Über uns Chronik v3 Z. 202, 211, 212) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-gross-gewicht: 800; /* Ergänzung: Titel des Navy-Knotens „Vertrag“ der Vertragsgrafik (Über uns Chronik v3 Z. 205) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-gross-groesse: 22px; /* Ergänzung: Titel des Navy-Knotens „Vertrag“ der Vertragsgrafik (Über uns Chronik v3 Z. 205) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-gross-zeile: normal; /* Ergänzung: Titel des Navy-Knotens „Vertrag“ der Vertragsgrafik (Über uns Chronik v3 Z. 205) (Design-Abgleich Ph12 F2) */
  --schrift-knoten-titel-gross-laufweite: -0.4px; /* Ergänzung: Titel des Navy-Knotens „Vertrag“ der Vertragsgrafik (Über uns Chronik v3 Z. 205) (Design-Abgleich Ph12 F2) */
  --schrift-pille-hero-gewicht: 600; /* Ergänzung: Pille im Hero der Über-uns-Seite (Über uns Chronik v3 Z. 43) (Design-Abgleich Ph12 F2) */
  --schrift-pille-hero-groesse: 13px; /* Ergänzung: Pille im Hero der Über-uns-Seite (Über uns Chronik v3 Z. 43) (Design-Abgleich Ph12 F2) */
  --schrift-pille-hero-zeile: 1; /* Ergänzung: Pille im Hero der Über-uns-Seite (Über uns Chronik v3 Z. 43) (Design-Abgleich Ph12 F2) */
  --schrift-pille-hero-laufweite: 0; /* Ergänzung: Pille im Hero der Über-uns-Seite (Über uns Chronik v3 Z. 43) (Design-Abgleich Ph12 F2) */
  --schrift-button-kompakt-gewicht: 700; /* Ergänzung: kleiner Button im Standort-Abschluss und im Navy-Block der Team-Seite (Über uns Chronik v3 Z. 305, Team v2 Z. 117) (Design-Abgleich Ph12 F2) */
  --schrift-button-kompakt-groesse: 14.5px; /* Ergänzung: kleiner Button im Standort-Abschluss und im Navy-Block der Team-Seite (Über uns Chronik v3 Z. 305, Team v2 Z. 117) (Design-Abgleich Ph12 F2) */
  --schrift-button-kompakt-zeile: normal; /* Ergänzung: kleiner Button im Standort-Abschluss und im Navy-Block der Team-Seite (Über uns Chronik v3 Z. 305, Team v2 Z. 117) (Design-Abgleich Ph12 F2) */
  --schrift-button-kompakt-laufweite: 0; /* Ergänzung: kleiner Button im Standort-Abschluss und im Navy-Block der Team-Seite (Über uns Chronik v3 Z. 305, Team v2 Z. 117) (Design-Abgleich Ph12 F2) */
  --schrift-lead-dicht-gewicht: 400; /* Ergänzung: Lead im Navy-Block der Team-Seite (Team v2 Z. 100) (Design-Abgleich Ph12 F2) */
  --schrift-lead-dicht-groesse: 16px; /* Ergänzung: Lead im Navy-Block der Team-Seite (Team v2 Z. 100) (Design-Abgleich Ph12 F2) */
  --schrift-lead-dicht-zeile: 1.6; /* Ergänzung: Lead im Navy-Block der Team-Seite (Team v2 Z. 100) (Design-Abgleich Ph12 F2) */
  --schrift-lead-dicht-laufweite: 0; /* Ergänzung: Lead im Navy-Block der Team-Seite (Team v2 Z. 100) (Design-Abgleich Ph12 F2) */
  --schrift-kachel-wert-gewicht: 700; /* Ergänzung: Design, Wert der Hero-Kacheln Startups (kennzahlen-karte kacheln; Loesung Startups v3, 700 22px) (Ph12 Design-Abgleich) */
  --schrift-kachel-wert-groesse: 22px; /* Ergänzung: Design, Wert der Hero-Kacheln Startups (kennzahlen-karte kacheln; Loesung Startups v3, 700 22px) (Ph12 Design-Abgleich) */
  --schrift-kachel-wert-zeile: normal; /* Ergänzung: Design, Wert der Hero-Kacheln Startups (kennzahlen-karte kacheln; Loesung Startups v3, 700 22px) (Ph12 Design-Abgleich) */
  --schrift-kachel-wert-laufweite: -0.5px; /* Ergänzung: Design, Wert der Hero-Kacheln Startups (kennzahlen-karte kacheln; Loesung Startups v3, 700 22px) (Ph12 Design-Abgleich) */

  --schrift-vertragshero-titel-gewicht: 800; /* Ergänzung: Design-Abgleich Ph12, Titel der Hero-Karte (VF Z. 66) */
  --schrift-vertragshero-titel-groesse: 20px; /* Ergänzung: Design-Abgleich Ph12, Titel der Hero-Karte (VF Z. 66) */
  --schrift-vertragshero-titel-zeile: normal; /* Ergänzung: Design-Abgleich Ph12, Titel der Hero-Karte (VF Z. 66) */
  --schrift-vertragshero-titel-laufweite: -.5px; /* Ergänzung: Design-Abgleich Ph12, Titel der Hero-Karte (VF Z. 66) */
  --schrift-vertragshero-tag-gewicht: 800; /* Ergänzung: Design-Abgleich Ph12, Tag der Datumskachel und Betrag der Rechnungsvorschau (VF Z. 71–84) */
  --schrift-vertragshero-tag-groesse: 17px; /* Ergänzung: Design-Abgleich Ph12, Tag der Datumskachel und Betrag der Rechnungsvorschau (VF Z. 71–84) */
  --schrift-vertragshero-tag-zeile: 1; /* Ergänzung: Design-Abgleich Ph12, Tag der Datumskachel und Betrag der Rechnungsvorschau (VF Z. 71–84) */
  --schrift-vertragshero-tag-laufweite: normal; /* Ergänzung: Design-Abgleich Ph12, Tag der Datumskachel und Betrag der Rechnungsvorschau (VF Z. 71–84) */
  --schrift-vertragshero-monat-gewicht: 600; /* Ergänzung: Design-Abgleich Ph12, Monat der Datumskachel (VF Z. 72) */
  --schrift-vertragshero-monat-groesse: 9.5px; /* Ergänzung: Design-Abgleich Ph12, Monat der Datumskachel (VF Z. 72) */
  --schrift-vertragshero-monat-zeile: normal; /* Ergänzung: Design-Abgleich Ph12, Monat der Datumskachel (VF Z. 72) */
  --schrift-vertragshero-monat-laufweite: .6px; /* Ergänzung: Design-Abgleich Ph12, Monat der Datumskachel (VF Z. 72) */
  --schrift-vertragshero-zeile-gewicht: 700; /* Ergänzung: Design-Abgleich Ph12, Titel der Zeile der Rechnungsvorschau (VF Z. 73) */
  --schrift-vertragshero-zeile-groesse: 16px; /* Ergänzung: Design-Abgleich Ph12, Titel der Zeile der Rechnungsvorschau (VF Z. 73) */
  --schrift-vertragshero-zeile-zeile: 1.3; /* Ergänzung: Design-Abgleich Ph12, Titel der Zeile der Rechnungsvorschau (VF Z. 73) */
  --schrift-vertragshero-zeile-laufweite: -.3px; /* Ergänzung: Design-Abgleich Ph12, Titel der Zeile der Rechnungsvorschau (VF Z. 73) */
  --schrift-liste-titel-gewicht: 700; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-liste-titel-groesse: 17px; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-liste-titel-zeile: 1.35; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-liste-titel-laufweite: 0; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-liste-text-gewicht: 400; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-liste-text-groesse: 15.5px; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-liste-text-zeile: 1.6; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-liste-text-laufweite: 0; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 798–803, Liste „Warum jetzt“ */
  --schrift-karte-kompakt-titel-gewicht: 700; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 945–954, Unterlagen zum Weitergeben */
  --schrift-karte-kompakt-titel-groesse: 16.5px; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 945–954, Unterlagen zum Weitergeben */
  --schrift-karte-kompakt-titel-zeile: 1.35; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 945–954, Unterlagen zum Weitergeben */
  --schrift-karte-kompakt-titel-laufweite: 0; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 945–954, Unterlagen zum Weitergeben */
  --schrift-liste-kopf-gewicht: 400; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 514, Lead „Statt Insellösungen“ */
  --schrift-liste-kopf-groesse: 16px; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 514, Lead „Statt Insellösungen“ */
  --schrift-liste-kopf-zeile: 1.6; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 514, Lead „Statt Insellösungen“ */
  --schrift-liste-kopf-laufweite: 0; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 514, Lead „Statt Insellösungen“ */
  --schrift-hero-punkt-gewicht: 500; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 172–175, Häkchenliste im Hero */
  --schrift-hero-punkt-groesse: 13.5px; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 172–175, Häkchenliste im Hero */
  --schrift-hero-punkt-zeile: 1.4; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 172–175, Häkchenliste im Hero */
  --schrift-hero-punkt-laufweite: 0; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 172–175, Häkchenliste im Hero */
  --schrift-kurz-text-gewicht: 400; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 100–107, Absatz „Kurz gesagt“ */
  --schrift-kurz-text-groesse: 25px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 100–107, Absatz „Kurz gesagt“ */
  --schrift-kurz-text-zeile: 1.55; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 100–107, Absatz „Kurz gesagt“ */
  --schrift-kurz-text-laufweite: -0.5px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 100–107, Absatz „Kurz gesagt“ */
  --schrift-kurz-text-mobil-gewicht: 400; /* Ergänzung: Ph12 B1, Automatisierung v7 mobil Z. 102–108, Absatz „Kurz gesagt“ */
  --schrift-kurz-text-mobil-groesse: 21px; /* Ergänzung: Ph12 B1, Automatisierung v7 mobil Z. 102–108, Absatz „Kurz gesagt“ */
  --schrift-kurz-text-mobil-zeile: 1.55; /* Ergänzung: Ph12 B1, Automatisierung v7 mobil Z. 102–108, Absatz „Kurz gesagt“ */
  --schrift-kurz-text-mobil-laufweite: -0.4px; /* Ergänzung: Ph12 B1, Automatisierung v7 mobil Z. 102–108, Absatz „Kurz gesagt“ */
  --schrift-h2-xl-gewicht: 800; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-xl-groesse: 50px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-xl-zeile: 1.06; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-xl-laufweite: -2px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-gewicht: 800; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-groesse: 30px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-zeile: 1.1; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-laufweite: -1.1px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-zitat-tabelle-gewicht: 600; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 596, Schlusssatz unter der Vergleichstabelle */
  --schrift-zitat-tabelle-groesse: 21px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 596, Schlusssatz unter der Vergleichstabelle */
  --schrift-zitat-tabelle-zeile: 1.45; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 596, Schlusssatz unter der Vergleichstabelle */
  --schrift-zitat-tabelle-laufweite: -0.4px; /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 596, Schlusssatz unter der Vergleichstabelle */
  --schrift-zeilen-text-gewicht: 500; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 123, Stand-Kasten „Drei Fragen“ */
  --schrift-zeilen-text-groesse: 13.5px; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 123, Stand-Kasten „Drei Fragen“ */
  --schrift-zeilen-text-zeile: 1.3; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 123, Stand-Kasten „Drei Fragen“ */
  --schrift-zeilen-text-laufweite: 0; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 123, Stand-Kasten „Drei Fragen“ */
  --schrift-hero-weiche-gewicht: 800; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 52, H1 des Hero */
  --schrift-hero-weiche-groesse: clamp(38px, 4vw, 54px); /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 52, H1 des Hero */
  --schrift-hero-weiche-zeile: 1.06; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 52, H1 des Hero */
  --schrift-hero-weiche-laufweite: -2px; /* Ergänzung: Ph12 B1, App oder CRM v2 Z. 52, H1 des Hero */
  --schrift-integration-kette-text-gewicht: 400; /* Ergänzung: Design-Abgleich Ph12 D (V-D-integrationen-13), Text der Karten der Reihe in der Modulkette (Design „Integration Brevo“ 06) */
  --schrift-integration-kette-text-groesse: 14px; /* Ergänzung: Design-Abgleich Ph12 D (V-D-integrationen-13), Text der Karten der Reihe in der Modulkette (Design „Integration Brevo“ 06) */
  --schrift-integration-kette-text-zeile: 1.55; /* Ergänzung: Design-Abgleich Ph12 D (V-D-integrationen-13), Text der Karten der Reihe in der Modulkette (Design „Integration Brevo“ 06) */
  --schrift-integration-kette-text-laufweite: 0; /* Ergänzung: Design-Abgleich Ph12 D (V-D-integrationen-13), Text der Karten der Reihe in der Modulkette (Design „Integration Brevo“ 06) */
  /* == Abstände == */
  --abstand-4: 4px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-5: 5px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-6: 6px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-7: 7px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-8: 8px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-9: 9px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-10: 10px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-11: 11px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-12: 12px; /* Ergänzung: Kleinabstand der Skala, Gap des CTA-Paars */
  --abstand-13: 13px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-14: 14px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-15: 15px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-16: 16px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-17: 17px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-18: 18px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-20: 20px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-22: 22px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-24: 24px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-26: 26px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-28: 28px; /* Ergänzung: Kleinabstand der Skala, nie als Gap */
  --abstand-30: 30px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-32: 32px; /* Ergänzung: Kleinabstand der Skala, nie als Gap */
  --abstand-34: 34px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-35: 35px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-36: 36px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-38: 38px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-40: 40px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-42: 42px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-44: 44px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-48: 48px; /* Ergänzung: Skala aus dem Design (Rahmen Ph2, FW-9) */
  --abstand-50: 50px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-52: 52px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-56: 56px; /* Ergänzung: Skala aus dem Design (Fehlerseiten Ph3 §6) */
  --abstand-60: 60px; /* Ergänzung: Skala aus dem Design (Fehlerseiten Ph3 §6) */
  --abstand-62: 62px; /* Ergänzung: Skala aus dem Design (Z2 Ph11: Ph10 whitepaper-kopf, Ph11 kpi-dashboard) */
  --abstand-64: 64px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-68: 68px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-72: 72px; /* Ergänzung: Skala aus dem Design (Ph4), Raster-Gap Kapitel und Menschen, Laufband-Gap */
  --abstand-76: 76px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-80: 80px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --abstand-90: 90px; /* Ergänzung: Skala aus dem Design (Z2 Ph10: Ph8 karten bento, Ph10 whitepaper-inhalt) */
  --abstand-19: 19px; /* Ergänzung: Skala aus dem Design (Ph12 Design-Abgleich: werkzeugkasten, zeitachse) */
  --abstand-37: 37px; /* Ergänzung: Skala aus dem Design (Ph12 Design-Abgleich: kosten-nutzen-rechner, weg-der-daten) */
  --abstand-46: 46px; /* Ergänzung: Skala aus dem Design (Ph12 Design-Abgleich: karten, suchfeld) */
  --abstand-54: 54px; /* Ergänzung: Skala aus dem Design (Ph12 Design-Abgleich: hero-navy, weg-der-daten, Fußpolster Ursache-Abschnitt CF Z. 133) */
  --abstand-96: 96px; /* Ergänzung: Skala aus dem Design (Ph4) */
  --seitenrand: 64px; /* Vertrag: Seiten- und Sektionsrand (V29), 32 px von 768 bis 1079 px */
  --abstand-seitenrand-eng: 40px; /* Ergänzung: Ph12 Design-Abgleich, Seitenrand der Seiten mit Seitenstufen (data-breiten) von 768 bis 1023 px */
  --abstand-seitenrand-breit: 64px; /* Ergänzung: Ph12 Design-Abgleich, Seitenrand der Seiten mit Seitenstufen (data-breiten) ab 1024 px */
  --abstand-seitenrand-crm: 56px; /* Ergänzung: Ph12 Design-Abgleich C-crm, Seitenrand der CRM-Produktseite ab 1024 px (CRM Produktseite v2: padding 56px) */
  --breite-kopf-links: 340px; /* Ergänzung: Ph12 Design-Abgleich C-crm, Kopfspalte der Karten mit Kopf links (Onboarding v2 Z. 413) */
  --breite-karte-min: 400px; /* Ergänzung: Ph12 Design-Abgleich, Statuskarte im ISO-Hero 1180 bis 1279 px (Sicherheit ISO v3 rHero) */
  --breite-karte-max: 640px; /* Ergänzung: Ph12 Design-Abgleich, Hero-Karte einspaltig (Sicherheit ISO v3, Sicherheit Hosting v2 heroKarte) */
  --breite-grafik-max: 460px; /* Ergänzung: Ph12 Design-Abgleich, Grafik des Unterlagen-Teasers einspaltig (Sicherheit ISO v3 teaserBild, DSGVO v3 abschlussBild) */
  --hoehe-grafik-schmal: 236px; /* Ergänzung: Ph12 Design-Abgleich, Höhe der Blattgrafik unter 1100 px (Sicherheit DSGVO v3 abschlussBild) */
  --breite-nachweise-umbruch: 760px; /* Ergänzung: Ph12 Design-Abgleich, Inhaltsbreite, ab der Nachweis-Text und Firmenkarte nebeneinander stehen (Team v2) */
  --breite-zeitplan-min: 980px; /* Ergänzung: Ph12 Design-Abgleich, Mindestbreite des wischbaren Zeitplans unter 1024 px (Migration planMin) */
  --abstand-sektion: 56px; /* Spec: Sektion vertikal */
  --abstand-sektion-gross: 88px; /* Spec: Sektion vertikal auf Vergleichsseiten */
  --schrift-weiche-unterzeile-groesse: 14px; /* Design-Abgleich 27.10.: Unterzeile der Produktweiche-Karte (Vergleich Uebersicht 03) */
  --schrift-weiche-unterzeile-gewicht: 500; /* Design-Abgleich 27.10.: Unterzeile der Produktweiche-Karte */
  --schrift-weiche-text-groesse: 15.5px; /* Design-Abgleich 27.10.: Text der Produktweiche-Karte */
  --schrift-weiche-text-zeile: 1.55; /* Design-Abgleich 27.10.: Text der Produktweiche-Karte */
  --schrift-weiche-punkt-groesse: 14.5px; /* Design-Abgleich 27.10.: Punkte der Produktweiche-Karte */
  --schrift-weiche-punkt-zeile: 1.45; /* Design-Abgleich 27.10.: Punkte der Produktweiche-Karte */
  --schrift-weiche-pille-gewicht: 600; /* Design-Abgleich 27.10.: Vergleichs-Pille der Produktweiche-Karte */
  --schrift-weiche-pille-groesse: 13.5px; /* Design-Abgleich 27.10.: Vergleichs-Pille der Produktweiche-Karte */
  --schrift-weiche-button-groesse: 14.5px; /* Design-Abgleich 27.10.: Buttons der Produktweiche-Karte */
  --schrift-weiche-liste-laufweite: 0.6px; /* Design-Abgleich 27.10.: Listen-Überschrift der Produktweiche-Karte */
  --abstand-sektion-kapitel: 96px; /* Vertrag: vertikale Polster der Kapitel (Über uns) (Ph4 §6) */
  --abstand-block: 40px; /* Ergänzung: Spaltenpolster vertikal */
  --abstand-block-gross: 64px; /* Ergänzung: Polster unten im Hero */
  --abstand-hero-oben: 42px; /* Ergänzung: Polster oben im kompakten Hero */
  --abstand-hero-unten: 46px; /* Ergänzung: Polster unten im kompakten Hero */
  --abstand-spalten: 56px; /* Ergänzung: Gap der Zweispalter */
  --abstand-gruppe: 40px; /* Ergänzung: Gap von Gruppen */
  --abstand-raster: 28px; /* Ergänzung: Gap von Rastern */
  --abstand-raster-gross: 48px; /* Ergänzung: Gap großer Raster */
  --abstand-karte-x: 30px; /* Ergänzung: horizontales Innenpolster der Karte */
  --abstand-box-x: 24px; /* Ergänzung: horizontales Innenpolster der Box */
  --abstand-seitenspalte-x: 36px; /* Ergänzung: horizontales Innenpolster der Seitenspalte */
  --abstand-button-x: 30px; /* Ergänzung: horizontales Polster des Primärbuttons */
  --abstand-button-sek-x: 26px; /* Ergänzung: horizontales Polster des Sekundärbuttons */
  --abstand-button-y: 15px; /* Ergänzung: vertikales Polster der Buttons */
  --abstand-kopf-y: 17px; /* Vertrag: vertikales Polster der Kopfleiste in Ruhe (Ph2 §5) */
  --abstand-kopf-y-kompakt: var(--abstand-8); /* Vertrag: vertikales Polster der Kopfleiste im Kompaktmodus (Ph2 §5) */
  --abstand-sitemap-brotkrumen-oben: 52px; /* Ergänzung: HTML-Sitemap, Polster oben der Brotkrumen ab 1080px (Nachzug Welle 1, NW-10, P-NZ1-5) */
  --abstand-sitemap-brotkrumen-oben-gestapelt: 42px; /* Ergänzung: HTML-Sitemap, Polster oben der Brotkrumen unter 1080px (Nachzug Welle 1, NW-10, P-NZ1-5) */
  --abstand-suche-brotkrumen-oben: 40px; /* Ergänzung: Suchseite, Polster oben der Brotkrumen in der grauen Fläche, alle Breiten (E3-3, N2-82) */
  --abstand-suche-ergebnisse-hoehe-min: 575px; /* Ergänzung: Suchseite, Mindesthöhe des Ergebnisbausteins; Design: Fläche 632 px (main min-height 520 + Polster 40/72) abzüglich Brotkrumenzeile 57 px (E3-10, NZ2-3) */
  --abstand-fehler-adresse-x: 28px; /* Vertrag: Fehlerseiten, Adressbox seitlich (Ph3 §6) */
  --abstand-fehler-treffer-x: 36px; /* Vertrag: Fehlerseiten, Karte „Meinten Sie“ seitlich (Ph3 §6) */
  --abstand-fehler-karte-x: 32px; /* Vertrag: Fehlerseiten, Karte „Keine eindeutige Seite“ und Karten der 410 seitlich (Ph3 §6) */
  --abstand-fehler-bereich-x: 26px; /* Vertrag: Fehlerseiten, Bereichskarte seitlich (Ph3 §6) */
  --abstand-fehler-knopf-x: 28px; /* Vertrag: Fehlerseiten, Knopf „Zur Seite“ der 404 seitlich (Ph3 §6) */
  --abstand-fehler-knopf-klein-x: 26px; /* Vertrag: Fehlerseiten, Knopf „Zur Seite“ der 410 seitlich (Ph3 §6) */
  --abstand-fehler-eingabe-x: 22px; /* Vertrag: Fehlerseiten, Suchfeld der 404, Eingabe links (Ph3 §6) */
  --breite-sitemap-titel-max: 640px; /* Ergänzung: HTML-Sitemap, Höchstbreite der Seitenüberschrift (Nachzug Welle 1, P-B2-5, P-NZ1-5) */
  --breite-sitemap-lead-max: 560px; /* Ergänzung: HTML-Sitemap, Höchstbreite des Leads (Nachzug Welle 1, P-B2-5, P-NZ1-5) */
  --breite-sitemap-spalte-rechts: 0.42fr; /* Ergänzung: HTML-Sitemap, Spaltenanteil des Schnelleinstiegs neben der Einleitung (Nachzug Welle 1, P-B2-5, P-NZ1-5) */
  --breite-fehler-spalte-max: 920px; /* Vertrag: Fehlerseiten, Höchstbreite der Spalte der 404 (Ph3 §6) */
  --breite-fehler-spalte-schmal-max: 820px; /* Vertrag: Fehlerseiten, Höchstbreite der Spalte der 410 (Ph3 §6) */
  --breite-fehler-paar-max: 1040px; /* Vertrag: Fehlerseiten, Höchstbreite des Paar-Rasters der 410 (Ph3 §6) */
  --breite-fehler-lead-max: 600px; /* Vertrag: Fehlerseiten, Höchstbreite des Leads (Ph3 §6) */
  --breite-fehler-diagnose-max: 620px; /* Vertrag: Fehlerseiten, Höchstbreite der Diagnose (Ph3 §6) */
  --breite-chronik-max: 1000px; /* Vertrag: Höchstbreite der Kapitel Über uns (Ph4 §6) */
  --breite-inhalt-weit-max: 1312px; /* Ergänzung: Ph12 Design-Abgleich, Inhaltsbreite zwischen den 64-px-Rändern der 1440-px-Seite (Sicherheit ISO v3, Migration Umzug v2, Onboarding v2, Integrationen v2, Whitepaper v2: Abschnitt `padding: … 64px`, keine Höchstbreite) */
  --breite-inhalt-mittel-max: 1200px; /* Vertrag: Höchstbreite des Rasters Über uns (Ph4 §6); seit Ph12 nur Über uns (Ueber uns Chronik v3 `max-width:1200px`), Standort- und Termin-Abschluss und Fußnoten */
  --breite-inhalt-schmal-max: 1100px; /* Ergänzung: Ph12 Design-Abgleich, Wochenkarten „Wie kommen wir hinein?“ (Warum brainX D3 `max-width:1100px`, Z. 240) */
  --linie-sitemap-schnell: 2px; /* Ergänzung: HTML-Sitemap, Linie links am Schnelleinstieg (Nachzug Welle 1, P-B2-5, P-NZ1-5) */
  --linie-sitemap-bereich: 1.5px; /* Ergänzung: HTML-Sitemap, Linie unter dem Bereichskopf (Nachzug Welle 1, P-B2-5, P-NZ1-5) */
  --linie-sitemap-unter: 1.5px; /* Ergänzung: Design-Abgleich Ph12, Linie links an eingerückten Sitemap-Links (Sitemap MAP `sub`; V-A-rahmen-32) */
  --linie-fehler-welle: 1.5px; /* Vertrag: Fehlerseiten, Wellenlinie unter unbekannten Wörtern der Adresse (404) und Durchstreichung der entfernten Adresse (410) (Ph3 §6, N3-57) */
  /* Phase 6 (Vertrag Ph6 §6, V-5) */
  --breite-dialog: 560px; /* Vertrag: Dialog-Karte (unter 640 px 100 % im Baustein) (Ph6 §6) */
  --breite-dialog-weit: 660px; /* Vertrag: Free-Dialog Stufe 2 (unter 640 px 100 % im Baustein) (Ph6 §6) */
  --breite-free-formular: 440px; /* Vertrag: Hero-Spalte /free/ (mobil 100 % im Baustein) (Ph6 §6) */
  --groesse-checkbox: 17px; /* Vertrag: Einwilligungs-Häkchen (Ph6 §6) */
  --groesse-captcha-platz: 58px; /* Vertrag: reservierte Mindesthöhe des Captcha-Platzes (TrustCaptcha 3.0.2, H6-33) (Ph6 §6) */
  --groesse-haken-gross: 56px; /* Vertrag: Haken-Kreis der Danke-Seite (Ph6 §6) */
  --groesse-abspielen-gross: 64px; /* Vertrag: Play-Kreis YouTube (mobil 52 px im Baustein) (Ph6 §6) */
  --groesse-schliessen: 34px; /* Vertrag: Schließen-Knopf des Dialogs (Ph6 §6) */
  --hoehe-zeeg: 560px; /* Vertrag: zeeg-Platzhalter und Mindesthöhe des iframes (Ph6 §6) */
  /* Phase 7 (Vertrag Ph7 §6, V-5) */
  --abstand-100: 100px; /* Vertrag: Abstand oben Pakete und Konfigurator unter dem überlappenden Umschalter (mobil --abstand-56 im Baustein) (Ph7 §6) */
  --breite-preise-hero-kasten: 430px; /* Vertrag: Glas-Kasten des Preise-Hero (mobil 100 % im Baustein) (Ph7 §6) */
  --breite-konfigurator-auswahl: 400px; /* Vertrag: Auswahl-Spalte des Konfigurators (mobil 100 % im Baustein) (Ph7 §6) */
  --breite-rechner-bilanz: 360px; /* Vertrag: Live-Bilanz des Kosten-Nutzen-Rechners (mobil 100 % im Baustein) (Ph7 §6) */
  --breite-rechner-protokoll: 300px; /* Vertrag: Protokoll des Kosten-Nutzen-Rechners (mobil 100 % im Baustein) (Ph7 §6) */
  --hoehe-rechner-interview-min: 520px; /* Vertrag: Mindesthöhe der Interview-Karte (Ph7 §6) */
  --versatz-sticky-seitenspalte: 94px; /* Vertrag: top der klebenden Auswahl-Spalte (Ph7 §6) */
  /* Phase 8 (Vertrag Ph8 §6, V-5; Teil Welle 0) */
  --abstand-58: 58px; /* Vertrag: Sektionen der APP-Detailseiten (VF, CF, AD; H2a) (Ph8 §6) */
  --abstand-66: 66px; /* Vertrag: Mehrwerte der Paketseiten (H1b; mobil 40px im Baustein, Skala bleibt mobil fest) (Ph8 §6) */
  --breite-hero-bild: 580px; /* Vertrag: rechte Spalte im CP-Hero (hero-navy rechts_breite: bild; gestapelt ab stapeln) (Ph8 §6) */
  /* Phase 9 (Vertrag Ph9 §6, V-7; Welle 0: I0a, I0b, I0c) */
  --abstand-84: 84px; /* Vertrag: Sektionspolster der Integrationsseiten (alle Integrations-Bausteine; Skala mobil fest) (Ph9 §6) */
  --breite-text-max: 760px; /* Vertrag: Höchstbreite der Kopfblöcke (alle Ph9-Sektionsköpfe) (Ph9 §6) */
  --breite-lead-max: 560px; /* Vertrag: Höchstbreite des Leads (hero-integration, Vergleiche) (Ph9 §6) */
  /* Phase 10 (Vertrag Ph10 §6, V-7; Welle 0: K0b, K0c; Welle 1: R1a, R1b, R1c) */
  --breite-whitepaper-cover: 380px; /* Vertrag: Cover-Spalte im Hero der Whitepaper-Detailseite (whitepaper-kopf, K0b) (Ph10 §6) */
  --breite-seitenspalte: 400px; /* Vertrag: Seitenspalte mit der Download-Karte (whitepaper-inhalt, K0b) (Ph10 §6) */
  --breite-recht-spalte: 340px; /* Vertrag: Verzeichnis-Spalte der Rechtsseiten (rechtstext, K0c) (Ph10 §6) */
  --breite-impressum-spalte: 400px; /* Vertrag: Spalte der Firmenkarte im Impressum (rechtstext variante impressum, K0c) (Ph10 §6) */
  --breite-rechtstext-max: 820px; /* Vertrag: Höchstbreite der Textspalte der Rechtsseiten (rechtstext, K0c) (Ph10 §6) */
  --breite-register: 360px; /* Vertrag: Spalte der Begriffsliste im Lexikon (glossar-register, R1a) (Ph10 §6) */
  --breite-api-nav: 264px; /* Vertrag: Spalte der Navigation der API-Referenz (api-referenz, R1c) (Ph10 §6) */
  /* Phase 11 (Vertrag Ph11 §6, V-7; Teil 0, Welle 0: M0a, M0b, M0c) */
  --abstand-104: 104px; /* Vertrag: Sektionspolster 104 px (Scrollstory-Hülle, `abschluss-cta navy-termin`, `chronik-kapitel` kurz, Startseite) (Ph11 §6) */
  --breite-buehne-app: 1288px; /* Vertrag: Höchstbreite der 4b-Bühnen und des KPI-Dashboards (Element-CSS hero-4b, M0b; kpi-dashboard, M2a; DB §1.3) (Ph11 §6) */
  --hoehe-demo-leiste: 77px; /* Vertrag: Freiraum am Fuß und scroll-padding-bottom (demo-leiste); V-7 Teil 1 (Ph11 §6) */
  --breite-seitenspalte-whitepaper: 324px; /* Ergänzung: Design-Abgleich Ph12, Karten der Seitenspalte der Whitepaper-Detailseite (Design 400-px-Spalte mit 12 px Polster links und 64 px Seitenrand; --breite-seitenspalte bleibt 400 px für die Team-Seite) */
  --abstand-70: 70px; /* Ergänzung: Design, Abstand Brotkrumen zu Eyebrow im Branchen-Hero (Loesung Hochschulen v3, IT-Dienstleister v3, SaaS v2) (Ph12 Design-Abgleich) */
  --breite-story-text-max: 560px; /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 1431–1432, Text und Punkte der Tour */

  /* Design 404 C / 410 C: ergänzende Werte ohne passendes Bestandstoken. */
  --farbe-fehler-marke-rand: rgba(255,176,143,.45); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C (Ph12 Design-Abgleich) */
  --farbe-fehler-weg-linie: rgba(79,216,188,.55); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C (Ph12 Design-Abgleich) */
  --farbe-fehler-server-punkt: rgba(255,255,255,.22); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C (Ph12 Design-Abgleich) */
  --schatten-fehler-karte-hover: 0 26px 50px -30px rgba(30,40,80,.45); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C (Ph12 Design-Abgleich) */
  --schatten-fehler-suchfokus: 0 0 0 3px rgba(255,60,0,.16); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C (Ph12 Design-Abgleich) */
  --schatten-fehler-halo-mint-an: 0 0 0 4px rgba(0,180,143,.28); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C (Ph12 Design-Abgleich) */
  --schatten-fehler-halo-mint-aus: 0 0 0 9px rgba(0,180,143,.06); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C (Ph12 Design-Abgleich) */

  /* == Radien == */
  --radius-pille: 999px; /* Spec: Pillen und Buttons */
  --radius-rund: 50%; /* Ergänzung: Kreise – Status-Punkt, Icon-Kreis (1556×) */
  --radius-karte: 20px; /* Spec: Karten (20 px: 470×, 18 px: 306×) */
  --radius-box: 24px; /* Spec: große Boxen */
  --radius-eingabe: 10px; /* Spec: Eingabefelder */
  --radius-chip: 6px; /* Spec: kleine Chips, Spanne 5–8 (6 px: 283×) */
  --radius-rahmen: 14px; /* Ergänzung: Medienrahmen, Hinweiskasten (557×) */
  --radius-mini: 3px; /* Ergänzung: Balken (246×) */
  --radius-app: 4px; /* Spec: Nachbauten der Oberfläche */
  --radius-app-chip: 3.67px; /* Spec: Chips der Nachbauten */
  --radius-panel: 16px; /* Vertrag: Mega-Panel und Suchpanel (Ph2 §5) */
  --radius-promo: 12px; /* Vertrag: Promo und Tabs (Ph2 §5) */
  --radius-kachel: 9px; /* Vertrag: Icon-Kachel 34 px (Ph2 §5) */
  --radius-kachel-klein: 7px; /* Vertrag: Icon-Kachel 24 px (Ph2 §5) */
  --radius-code: 4px; /* Vertrag: Ecken von Code, Methoden-Badges, Portal-Marke und Wege-Nummern (api-referenz, portal-karte, support-wege; R1c) (Ph10 §6) */
  --radius-karte-klein: 18px; /* Vertrag: Kennzahlen-Rahmen, Standortkarte, Firmenkarte (Ph4 §6) */
  --radius-karte-gross: 22px; /* Vertrag: Terminkarte, OG-Motiv, Sicherheit (Ph4 §6) */
  --radius-app-karte: 8px; /* Vertrag: Bühnen, Karten der Oberfläche (Ph5 §6.1) */
  --radius-app-fenster: 12px; /* Vertrag: Bühnen, Fenster der Oberfläche und der Fremdsysteme (Ph5 §6.1) */
  --radius-app-toast: 28px; /* Vertrag: Bühnen, Toast (Ph5 §6.1) */
  --radius-story-deko: 40px; /* Vertrag: Scrollstory, Deko-Fläche hinter dem Fenster (Ph5 §6.2) */
  /* Phase 8 (Vertrag Ph8 §6, V-5; Teil Welle 0) */
  --radius-klein: 8px; /* Vertrag: kleine Karten, Balken, Chips (wertgleich Ph5 --radius-app-karte, andere Rolle) (Ph8 §6) */
  --radius-box-gross: 32px; /* Vertrag: Zwischen-CTA, Werkzeugkasten- und Abschluss-Box der Automatisierung (A7 „border-radius: 32px“, H2b) (Ph8 §6) */
  /* Phase 9, Block „Ph9 I1c“ (Vertrag Ph9 §6, V-7 vor Welle 1) */
  --radius-strich: 2px; /* Vertrag: Balken und Fortschritt (stationen ablauf I1c; mini-rechner, vergleichsmatrix; DV2 Z. 174) (Ph9 §6, V-7 Block I1c) */
  /* Phase 11 (Vertrag Ph11 §6, V-7; Teil 0, Welle 0: M0a, M0b, M0c) */
  --radius-video-toast: 38px; /* Vertrag: Toast der Produktvideos (Element-CSS video, M0b; DB §1.4; ≠ --radius-app-toast 28px) (Ph11 §6) */
  --radius-element-fenster: 5px; /* Vertrag: Reiter und Fenster der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --radius-element-strich: var(--radius-strich); /* Vertrag: Symbolquadrate, Textzeilen, Bahn und Aktiv-Strich der Regler-Bühnen; seit Z1 = --radius-strich (wertgleich, N11-30) (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  /* == Schatten == */
  --schatten-karte-aktiv: 0 26px 50px -26px rgba(10,15,35,.7); /* Spec: aktive Karte hell (Design nutzt .45, Sichtvergleich Ph4) */
  --schatten-karte-navy: 0 30px 60px -30px rgba(30,40,80,.5); /* Spec: Karte Navy */
  --schatten-rahmen: 0 20px 40px -28px rgba(30,40,80,.45); /* Ergänzung: Screenshot- und Medienrahmen (96×) */
  --schatten-paket: 0 0 0 3px #FFFFFF; /* Ergänzung: Design-Abgleich Ph12, weißer Ring der Paketpunkte auf den Speichen (AD Z. 179), V-B-app-42 */
  --schatten-szenario-aktiv: 0 8px 20px -14px rgba(255,60,0,.7); /* Ergänzung: Design-Abgleich Ph12, gewählte Szenario-Kachel (VF Z. 835), V-B-app-40 */
  --schatten-hotspot: 0 8px 20px -6px rgba(16,22,40,.6); /* Ergänzung: Design-Abgleich Ph12, Hotspots des Vertragsformulars (VF Z. 301), V-B-app-36 */
  --schatten-hotspot-aktiv: 0 8px 20px -6px rgba(16,22,40,.6), 0 0 0 8px rgba(255,60,0,.22); /* Ergänzung: Design-Abgleich Ph12, aktiver Hotspot mit orangem Ring (VF Z. 301), V-B-app-36 */
  --schatten-app: 0 2px 6px rgba(0,0,0,.08); /* Spec: Nachbauten der Oberfläche */
  --schatten-schalter-innen: inset 0 1px 3px rgba(30,40,80,.16); /* Ergänzung: Ph12 Design-Abgleich C-crm, Schalterfläche „Ohne/Mit Paket“ (CRM Sales v2 Z. 197) */
  --schatten-fokus-feld: 0 0 0 2px var(--farbe-navy); /* Ergänzung: Fokus von Formularfeldern (24×) */
  --schatten-kopf: 0 10px 26px -24px rgba(30,40,80,.5); /* Vertrag: Kopfleiste in Ruhe (Ph2 §5) */
  --schatten-kopf-kompakt: 0 12px 28px -22px rgba(30,40,80,.65); /* Vertrag: Kopfleiste im Kompaktmodus (Ph2 §5) */
  --schatten-panel: 0 30px 60px -28px rgba(30,40,80,.35); /* Vertrag: Mega-Panel und Burger-Sheet (Ph2 §5) */
  --schatten-suchpanel: 0 30px 60px -28px rgba(30,40,80,.4); /* Vertrag: Suchpanel im Kopf (Ph2 §5) */
  --schatten-treffer: 0 18px 36px -24px rgba(30,40,80,.4); /* Vertrag: Trefferkarte im Hover (Ph2 §5) */
  --schatten-tab-aktiv: 0 12px 26px -16px rgba(10,15,35,.5); /* Vertrag: aktiver Tab (Ph2 §5) */
  --schatten-dialog: 0 40px 90px -30px rgba(0,0,0,.6); /* Vertrag: Dialog (Ph2 §5) */
  --schatten-fehler-halo-an: 0 0 0 0 var(--farbe-halo-orange); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, Beginn der Animation (Ph3 §6, N3-31) */
  --schatten-fehler-halo-aus: 0 0 0 9px var(--farbe-halo-orange-aus); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, Mitte der Animation (Ph3 §6, N3-31) */
  --schatten-fehler-adresse: 0 22px 44px -32px rgba(30,40,80,.4); /* Vertrag: Adressbox der 404 (Ph3 §6) */
  --schatten-karte-navy-hover: 0 36px 64px -30px rgba(30,40,80,.62); /* Vertrag: Karte „Meinten Sie“ im Hover (Ph3 §6) */
  --schatten-karte-hover: 0 24px 50px rgba(30,40,80,.12); /* Vertrag: Hover der Karten absage (Ph4 §6) */
  --schatten-cta: 0 18px 36px -18px rgba(255,60,0,.8); /* Vertrag: Primärbutton des Abschlusses navy-termin (Ph4 §6) */
  --schatten-beleg: 0 40px 80px -48px rgba(16,22,40,.7); /* Vertrag: Beleg navy-3 (Ph4 §6) */
  --schatten-widget: 0 20px 50px -40px rgba(30,40,80,.35); /* Vertrag: dashboard-widget (Ph4 §6) */
  --schatten-avatar-ring: 0 0 0 3px var(--farbe-weiss); /* Vertrag: überlappende Avatare (Beleg linksbalken) (Ph4 §6) */
  --schatten-karte-pin: 0 0 0 2.5px var(--farbe-weiss), 0 6px 14px -4px rgba(255,60,0,.6); /* Vertrag: Standortkarte, Pin (Ph4 §6) */
  --schatten-karte-etikett: 0 10px 24px -12px rgba(16,22,40,.7); /* Vertrag: Standortkarte, Etikett (Ph4 §6) */
  --schatten-puls-orange-an: 0 0 0 0 rgba(255,60,0,.55); /* Vertrag: Marker „Heute“, Beginn des Pulses (reduziert aus) (Ph4 §6) */
  --schatten-puls-orange-aus: 0 0 0 12px rgba(255,60,0,0); /* Vertrag: Marker „Heute“, Ende des Pulses (reduziert aus) (Ph4 §6) */
  --schatten-halo-navy-an: 0 18px 36px -22px rgba(16,22,40,.7), 0 0 0 3px rgba(30,40,80,.12); /* Vertrag: Knoten Navy der Grafik, Ruhe (reduziert aus) (Ph4 §6) */
  --schatten-halo-navy-aus: 0 18px 36px -22px rgba(16,22,40,.7), 0 0 0 10px rgba(30,40,80,.02); /* Vertrag: Knoten Navy der Grafik, Mitte des Halos (reduziert aus) (Ph4 §6) */
  --schatten-tooltip: 0 18px 40px -18px rgba(0,0,0,.6); /* Vertrag: Tooltip des dashboard-widget (D3 R-1) (Ph4 §6) */
  --schatten-szenario-aus: 0 0 0 4px rgba(255,60,0,.18); /* Vertrag: Ring des Szenario-Schalters, aus (D3 R-1) (Ph4 §6) */
  --schatten-szenario-an: 0 0 0 4px rgba(0,180,143,.22); /* Vertrag: Ring des Szenario-Schalters, an (D3 R-1) (Ph4 §6) */
  --schatten-buehne: 0 30px 60px -36px rgba(30,40,80,.45); /* Vertrag: Rahmen karte der Bühnen (Ph5 §6.1) */
  --schatten-app-fremdfenster: 0 34px 70px -24px rgba(8,12,28,.62), 0 0 0 1px rgba(10,12,20,.35); /* Vertrag: Bühnen, Fremdfenster über brainX (Ph5 §6.5) */
  --schatten-app-toast: 0 20px 44px -16px rgba(18,24,45,.3), 0 4px 14px rgba(18,24,45,.08); /* Vertrag: Bühnen, Toast (Ph5 §6.5) */
  --schatten-app-etikett: 0 10px 24px -8px rgba(0,0,0,.45); /* Vertrag: Bühnen, fliegendes Etikett (Ph5 §6.5) */
  --schatten-fremd-snapaddy-karte: 0 12px 26px rgba(0,0,0,.45); /* Vertrag: Bühnen, snapADDY Visitenkarte (Ph5 §6.5) */
  --schatten-fremd-snapaddy-scan: 0 0 12px 3px rgba(79,209,255,.6); /* Vertrag: Bühnen, snapADDY Leuchten der Scanlinie (Ph5 §6.5) */
  --schatten-story-fenster-navy: 0 40px 80px -36px rgba(0,0,0,.65); /* Vertrag: Scrollstory, Fenster dunkel (Ph5 §6.2) */
  --schatten-story-fenster: 0 30px 60px -30px rgba(30,40,80,.45); /* Vertrag: Scrollstory, Fenster hell (Ph5 §6.2) */
  --schatten-zeiger: 0 1px 1.5px rgba(0,0,0,.32); /* Vertrag: Scrollstory, Zeiger per drop-shadow (Ph5 §6.2) */
  --schatten-app-karte-flach: 0 2px 6px rgba(0,0,0,.05); /* Vertrag: Bühnen, flache Karten (Ph5 §6.5) */
  --schatten-app-dialog: 0 40px 80px -30px rgba(10,15,35,.55); /* Vertrag: Bühnen, Dialoge (Ph5 §6.5) */
  --schatten-app-auswahl: 0 22px 44px -14px rgba(10,15,35,.38), 0 0 0 1px var(--farbe-app-linie); /* Vertrag: Bühnen, Auswahlliste (Ph5 §6.5) */
  --schatten-app-auswahl-hover: inset 0 0 0 2px var(--farbe-app-chip-orange-text); /* Vertrag: Bühnen, Auswahlliste im Hover (Ph5 §6.5) */
  --schatten-app-feld-fokus: 0 0 0 3px var(--farbe-icon-orange); /* Vertrag: Bühnen, Fokus der Eingabefelder (Ph5 §6.5) */
  --schatten-app-reiter-aktiv: inset 0 -3px 0 var(--farbe-orange-flaeche); /* Vertrag: Bühnen, aktiver Reiter (Ph5 §6.5) */
  --schatten-video-markierung: 0 0 0 6px var(--farbe-markierung); /* Vertrag: Produktvideo, Markierung (Ph5 §6.5) */
  --schatten-video-hinweis: 0 30px 60px -24px rgba(10,15,35,.6); /* Vertrag: Produktvideo, Karte „Im Hintergrund“ (Ph5 §6.5) */
  --schatten-video-kapitel: 0 16px 30px -14px rgba(10,15,35,.5); /* Vertrag: Produktvideo, Kapitel-Chip (Ph5 §6.5) */
  --schatten-video-zeiger: 0 3px 4px rgba(0,0,0,.35); /* Vertrag: Produktvideo, Zeiger per drop-shadow (Ph5 §6.5) */
  --schatten-fremd-website-fenster: 0 50px 90px -30px rgba(10,15,35,.6), 0 0 0 1px rgba(0,0,0,.08); /* Vertrag: Bühnen, Fenster des Website-Formulars (Ph5 §6.5) */
  --schatten-fremd-website-fokus: 0 0 0 3px rgba(36,39,46,.12); /* Vertrag: Bühnen, Feldfokus des Website-Formulars (Ph5 §6.5) */
  /* Phase 6 (Vertrag Ph6 §6, V-5) */
  --schatten-feld-pille: 0 18px 40px -26px rgba(30,40,80,.45); /* Vertrag: Free-Pille (Ph6 §6) */
  --schatten-beleg-danke: var(--schatten-fehler-adresse); /* Vertrag: Beleg-Karte und Kachel der Danke-Seite (eigene Rolle) (Ph6 §6) */
  --schatten-karte-hover-weich: 0 26px 50px -32px rgba(10,15,35,.45); /* Vertrag: Wegkarte der Danke-Seite im Hover (Ph6 §6) */
  --schatten-tab-thema: 0 14px 30px -18px rgba(10,15,35,.45); /* Vertrag: aktiver Thementab der Danke-Seite (Ph6 §6) */
  --schatten-halo-klein-aus: 0 0 0 6px var(--farbe-halo-orange-aus); /* Vertrag: Punkt „ALS NÄCHSTES“, Mitte des Halos (an: --schatten-fehler-halo-an) (Ph6 §6) */
  --schatten-stationen: 0 40px 80px -50px rgba(30,40,80,.45); /* Vertrag: Stationen-Karte (Ph6 §6) */
  --schatten-tab-station: 0 14px 30px -16px rgba(30,40,80,.45), 0 0 0 1px var(--farbe-linie-karte); /* Vertrag: aktiver Stationen-Tab (Ph6 §6) */
  --schatten-halo-orange-aus: 0 0 0 9px rgba(255,60,0,.05); /* Vertrag: Stationen-Punkt, Mitte des Halos (an: --schatten-szenario-aus) (Ph6 §6) */
  --schatten-video: 0 24px 50px -24px rgba(30,40,80,.4); /* Vertrag: Video-Innenrahmen der Stationen (Ph6 §6) */
  --schatten-free-fenster: 0 40px 80px -36px rgba(30,40,80,.4); /* Vertrag: Fenster der Free-Vorschau (Ph6 §6) */
  --schatten-karte-hover-klein: 0 16px 30px -18px rgba(30,40,80,.35); /* Vertrag: Karten /free/ im Hover (Ph6 §6) */
  --schatten-karte-lift: 0 1px 2px rgba(30,40,80,.05), 0 18px 34px -18px rgba(30,40,80,.26); /* Ergänzung: Design-Abgleich Ph12, Karten und Steckbrief-Gruppen auf Hosting und DSGVO im Hover */
  --schatten-tab-lift: 0 1px 2px rgba(30,40,80,.05), 0 14px 28px -16px rgba(30,40,80,.28); /* Ergänzung: Design-Abgleich Ph12, Rechte-Liste der DSGVO-Seite im Hover */
  --schatten-karte-lift-ruhe: 0 1px 2px rgba(30,40,80,.04), 0 8px 24px rgba(30,40,80,.06); /* Ergänzung: Design-Abgleich Ph12, Karten und Steckbrief-Gruppen auf Hosting und DSGVO in Ruhe */
  --schatten-tab-lift-ruhe: 0 1px 2px rgba(30,40,80,.04), 0 6px 18px rgba(30,40,80,.05); /* Ergänzung: Design-Abgleich Ph12, Rechte-Liste der DSGVO-Seite in Ruhe */
  --schatten-karte-navy-tief: 0 20px 40px -28px rgba(30,40,80,.8); /* Vertrag: Navy-Karte /kontakt/ (Ph6 §6) */
  --schatten-youtube-rahmen: 0 26px 54px -40px rgba(30,40,80,.55); /* Vertrag: Rahmen youtube-zweiklick (Optik Case-Study-Videorahmen) (Ph6 §6) */
  /* Phase 7 (Vertrag Ph7 §6, V-5) */
  --schatten-karte-aktiv-hover: 0 34px 60px -26px rgba(10,15,35,.8); /* Vertrag: Umschalter-Karte im Hover (Ph7 §6) */
  --schatten-ueberlagerung: 0 26px 44px -26px rgba(30,40,80,.45); /* Vertrag: Details-Überlagerung des Konfigurators (Ph7 §6) */
  --schatten-interview: 0 12px 34px -26px rgba(30,40,80,.45); /* Vertrag: Interview-Karte (Ph7 §6) */
  --schatten-rechner-aktiv: 0 0 0 3px rgba(79,216,188,.55), 0 18px 40px -28px rgba(30,40,80,.8); /* Vertrag: Business-Karte Frage 1 (Ph7 §6) */
  /* Phase 8 (Vertrag Ph8 §6, V-5; Teil Welle 0) */
  --schatten-ring-hell: 0 0 0 4px var(--farbe-flaeche-hell); /* Vertrag: Ring um Nummern und Punkte (Kette, Etappen, Zeitplan; K1) (Ph8 §6) */
  --schatten-karte-ruhe: 0 1px 2px rgba(16,22,40,.04), 0 14px 28px -24px rgba(16,22,40,.32); /* Vertrag: Karten in Ruhe (Ph8 §6) */
  --schatten-story-umschalter: 0 8px 20px -10px rgba(16,22,40,.45); /* Vertrag: Umschalter-Knöpfe im Story-Fenster (T3 Z. 473; V-11, Ä8-8) (Ph8 §6) */
  --schatten-app-deal: 0 10px 24px -16px rgba(23,33,60,.35); /* Vertrag: Bühne automation-ablauf, Deal-Karte (H2c, vor Welle 2) (Ph8 §6) */
  --schatten-app-zeiger: 0 2px 3px rgba(23,33,60,.35); /* Vertrag: Bühne automation-ablauf, Zeiger per drop-shadow (H2c, vor Welle 2) (Ph8 §6) */
  --schatten-app-halo-an: 0 0 0 0 rgba(0,180,143,.28), 0 8px 18px -10px rgba(0,121,95,.5); /* Vertrag: Bühne automation-ablauf, Halo des aktiven Knotens, Beginn (bx-aa-halo; H2c, vor Welle 2) (Ph8 §6) */
  --schatten-app-halo-aus: 0 0 0 7px rgba(0,180,143,0), 0 8px 18px -10px rgba(0,121,95,.5); /* Vertrag: Bühne automation-ablauf, Halo des aktiven Knotens, Mitte (bx-aa-halo; H2c, vor Welle 2) (Ph8 §6) */
  /* Phase 9 (Vertrag Ph9 §6, V-7; Welle 0: I0a, I0b, I0c) */
  --schatten-logo-kachel: 0 8px 22px -14px rgba(30,40,80,.25); /* Vertrag: Logo-Kachel 68 × 68 (hero-integration, I0a) (Ph9 §6) */
  --schatten-medium: 0 30px 60px -40px rgba(30,40,80,.45); /* Vertrag: Bühne und Ablauf-Medium (hero-integration I0a, stationen ablauf I1c) (Ph9 §6) */
  --schatten-kachel-hover: 0 20px 36px -22px rgba(30,40,80,.5); /* Vertrag: Integrations-Kachel im Hover und Fokus (sammelliste, I0c R-10) (Ph9 §6) */
  --schatten-app-hervorhebung: 0 0 0 2px var(--farbe-app-gruen), 0 0 0 7px var(--farbe-icon-mint); /* Vertrag: Bühnen, Hervorhebungsrahmen r3hl (Kern; hero-docusign I0a B, hero-docuseal, hero-mollie, hero-stripe, hero-jira I1a) (Ph9 §6, V-7-Nachtrag I0a B) */
  --schatten-fremd-teams-fenster: 0 24px 48px -16px rgba(0,0,0,.5); /* Vertrag: Bühnen, Teams Anruffenster (hero-microsoft365) (Ph9 §6, V-7-Nachtrag I0a B) */
  /* Phase 9, Block „Ph9 I1a P1“, Nachtrag Stufe A (H9-63) */
  --schatten-app-seitenpanel: -24px 0 48px -20px rgba(18,24,45,.35); /* Vertrag: Bühnen, Seitenpanel „Einstellungen“ des E-Mail-Moduls von rechts (hero-inxmail, I1a; HI Z. 272) (Ph9 §6, V-7 Block I1a P1) */
  /* Phase 9, Block „Ph9 I1a P2“ (V-7 durch den Umsetzer, H9-63) */
  --schatten-fremd-zahlung-karte: 0 2px 10px rgba(0,0,0,.08); /* Vertrag: Bühnen, Bezahlkarte Mollie/Stripe (Gruppe zahlung, I1a; HI Z. 1265, 1280) (Ph9 §6, V-7 Block I1a P2) */
  --schatten-fremd-jira-karte: 0 1px 2px rgba(9,30,66,.25); /* Vertrag: Bühnen, Jira-Karte im Board (hero-jira, I1a; HI Z. 1369) (Ph9 §6, V-7 Block I1a P2) */
  /* Phase 9, Block „Ph9 I1a P4“ (V-7 durch den Umsetzer, H9-63) */
  --schatten-fremd-zapier-punkt: 0 0 0 4px rgba(110,86,207,.22); /* Vertrag: Bühnen, Zapier und n8n Halo des Punkts (hero-zapier, hero-n8n, I1a; HI Z. 235) (Ph9 §6, V-7 Block I1a P4) */
  --schatten-fremd-zapier-schritt: 0 0 0 3px rgba(110,86,207,.18); /* Vertrag: Bühnen, Ring des aktiven Zapier-Schritts (hero-zapier, I1a; HI Z. 641; H9-83) (Ph9 §6, V-7 Block I1a P4) */
  --schatten-app-panel: 0 24px 48px -18px rgba(18,24,45,.38), 0 2px 8px rgba(18,24,45,.08); /* Vertrag: Bühnen, Panel im Bühnen-Nachbau (Anruf-Popup, Kommentar, DocuSeal-Automatisierung; Gruppe connect, hero-docuseal, I1a; HI Z. 78; H9-83) (Ph9 §6, V-7 Block I1a P4) */
  /* Phase 9, Block „Ph9 I1c“ (Vertrag Ph9 §6, V-7 vor Welle 1) */
  --schatten-screenshot: 0 22px 40px -28px rgba(30,40,80,.55); /* Vertrag: Linkkarten und Screens (stationen I1c, modulkette I2c; DV2 Z. 325) (Ph9 §6, V-7 Block I1c) */
  --schatten-karte-auf-navy: 0 30px 60px -30px rgba(0,0,0,.5); /* Vertrag: Beispielkarte auf Navy (besonderheit, I1c; DV2 Z. 260) (Ph9 §6, V-7 Block I1c) */
  --schatten-grafik-kachel: 0 1.875cqw 3.75cqw -2.375cqw rgba(30,40,80,.4); /* Vertrag: Logo-Kachel der Ablauf-Grafiken (stationen-grafiken, I1c; ZP Z. 192) (Ph9 §6, V-7 Block I1c) */
  /* Phase 9, Block „Ph9 I1b“ (Vertrag Ph9 §6, V-7 vor I1b Stufe B, durch den Umsetzer; Teilplan I1b §9) */
  --schatten-vgl-karte: 0 2px 6px rgba(18,24,45,.06); /* Vertrag: Karte der Szenen (vgl-bild, I1b; VB Z. 32) (Ph9 §6, V-7 Block I1b) */
  --schatten-vgl-toast: 0 12px 24px -8px rgba(18,24,45,.45); /* Vertrag: Toast der Szenen (vgl-bild, I1b; VB Z. 49) (Ph9 §6, V-7 Block I1b) */
  --schatten-vgl-dialog: 0 30px 60px -20px rgba(18,24,45,.5); /* Vertrag: Dialog der Szenen (vgl-bild abo, erechnung, datev, I1b; VB Z. 130, 152, 220) (Ph9 §6, V-7 Block I1b) */
  --schatten-vgl-knopf-punkt: 0 1px 2px rgba(0,0,0,.2); /* Vertrag: Knopf des Schalters (vgl-bild, I1b; VB Z. 58) (Ph9 §6, V-7 Block I1b) */
  --schatten-vgl-karte-test: 0 14px 30px -18px rgba(30,40,80,.35); /* Vertrag: Karte brainX APP Free (vgl-bild test, I1b; VB Z. 256) (Ph9 §6, V-7 Block I1b) */
  --schatten-vgl-kette: 0 12px 22px -10px rgba(30,40,80,.55); /* Vertrag: Aktives Kettenglied (vgl-bild kette, I1b; VB Z. 208) (Ph9 §6, V-7 Block I1b) */
  /* Phase 10 (Vertrag Ph10 §6, V-7; Welle 0: K0b, K0c; Welle 1: R1a, R1b, R1c) */
  --schatten-download-karte: 0 26px 50px -40px rgba(30,40,80,.6); /* Vertrag: Download-Karte der Whitepaper-Detailseite (whitepaper-inhalt K0b; portal-karte R1c) (Ph10 §6) */
  --schatten-eintrag-aktiv: 0 4px 14px -8px rgba(30,40,80,.3); /* Vertrag: aktiver Verzeichnis- und Navigationseintrag (rechtstext K0c; api-referenz R1c) (Ph10 §6) */
  --schatten-pille-hell: 0 8px 22px -16px rgba(30,40,80,.3); /* Vertrag: Pille „NEU IN brainX“ (neuigkeiten-kopf, R1a) (Ph10 §6) */
  --schatten-api-code-ok: inset 0 0 0 1.5px var(--farbe-gruen-text); /* Vertrag: ausgewählter Erfolgs-Code der API-Referenz, P-R1C-16 (Ph10 §6) */
  --schatten-api-code-fehler: inset 0 0 0 1.5px var(--farbe-fehler-text); /* Vertrag: ausgewählter Fehler-Code der API-Referenz, P-R1C-16 (Ph10 §6) */
  --schatten-karte-petrol: 0 22px 44px -30px rgba(22,50,60,.8); /* Vertrag: Schatten der Telefon-Karte (support-wege, R1c) (Ph10 §6) */
  /* Phase 11 (Vertrag Ph11 §6, V-7; Teil 0, Welle 0: M0a, M0b, M0c) */
  --schatten-bild: 0 24px 60px -30px rgba(30,40,80,.3); /* Vertrag: Bild des Kernunterschieds und Loop-Kacheln der Branchen (kernunterschied, M0a; video-loop-Hülle, M2a) (Ph11 §6) */
  --schatten-rollenkarte-hover: 0 20px 40px -32px rgba(30,40,80,.5); /* Vertrag: Rollenkarte im Hover und Fokus (rollenkarten, M0a; karten leiste, M1b) (Ph11 §6) */
  --schatten-halo-schritt: 0 0 0 4px var(--farbe-icon-orange); /* Vertrag: Halo der aktiven Schritt-Karte (schritte-karte, M0c; DA §2.5 S1) (Ph11 §6) */
  --schatten-buehne-oben: 0 -10px 60px -30px rgba(30,40,80,.25); /* Vertrag: Rahmen der 4b-Bühnen (Element-CSS hero-4b, M0b; DB §1.3) (Ph11 §6) */
  --schatten-regler-knopf: 0 12px 28px -12px rgba(255,60,0,.85); /* Vertrag: Knopf des Vorher-Nachher-Reglers (produkt-animation, M0b; DB §1.2, N11-17) (Ph11 §6) */
  --schatten-element-fenster: 0 18px 34px -18px rgba(23,33,60,.45); /* Vertrag: Fenster der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-element-zettel: 0 14px 26px -12px rgba(23,33,60,.5); /* Vertrag: Klebezettel der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-element-karte: 0 8px 16px -10px rgba(23,33,60,.4); /* Vertrag: eingescannte Visitenkarten der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-app-fehler-pille: 0 8px 18px -8px rgba(220,51,51,.9); /* Vertrag: rote Fehler-Pillen der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-element-scan: inset 0 0 40px rgba(120,130,150,.16); /* Vertrag: Papier des Scans auf der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-regler-puls-an: 0 0 0 0 rgba(255,60,0,.45); /* Vertrag: Ring-Puls des Regler-Knopfs, Beginn (produkt-animation, M0b; DB §1.2; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-regler-puls-aus: 0 0 0 22px rgba(255,60,0,0); /* Vertrag: Ring-Puls des Regler-Knopfs, Ende (produkt-animation, M0b; DB §1.2; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-knoten-vorher: 0 0 0 3px var(--farbe-linie-eingabe); /* Vertrag: Knoten der Zeitleiste auf der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-knoten-nachher: 0 0 0 3px var(--farbe-weiss), 0 0 0 8px rgba(255,60,0,.10); /* Vertrag: Knoten der Zeitleiste auf der Nachher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-app-reiter-schmal: inset 0 -2px 0 var(--farbe-orange-flaeche); /* Vertrag: aktiver Reiter der Regler-Bühnen (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-app-zelle-fehler: inset 0 0 0 1.5px var(--farbe-app-fehler); /* Vertrag: Tabellenzelle mit Fehler auf der Vorher-Seite (hero-regler, M0b; DB §1.2, §2.1; V-7 Teil 0b, H11-23) (Ph11 §6) */
  --schatten-app-auswahl-hover-text: inset 0 0 0 2px currentColor; /* Vertrag: Auswahleintrag unter dem Zeiger in Textfarbe (Produktvideos) (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-video-fokus-ring: 0 0 0 3px var(--farbe-orange-flaeche); /* Vertrag: Fokusring um das Statusfeld der Deal-Liste im Produktvideo (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-video-toast: 0 20px 44px -16px rgba(18,24,45,.3), 0 0 0 1px var(--farbe-flaeche-toggle); /* Vertrag: Toast der Produktvideos (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-video-toast-schliessen: 0 4px 12px rgba(18,24,45,.22); /* Vertrag: Schließkreis am Toast der Produktvideos (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-video-toast-symbol: inset 0 0 0 3px var(--farbe-mint-akzent); /* Vertrag: Symbolkreis im Toast der Produktvideos (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-video-pille: inset 0 0 0 1px rgba(255,255,255,.22); /* Vertrag: Integrations-Pille in der Karte Im Hintergrund (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-video-haken-leer: inset 0 0 0 2px var(--farbe-navy-rand-mittel); /* Vertrag: offener Schritt in der Karte Im Hintergrund (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-video-meldung: 0 24px 48px -18px rgba(10,15,35,.4), 0 0 0 1px var(--farbe-app-linie); /* Vertrag: Meldung DATEV-Übertragung der Produktvideos (VS, VR) (video-abschluss, M0b B; VS DB §2.9; V-7-Muster H11-23) (Ph11 §6) */
  --schatten-preis-aktiv: 0 26px 50px -26px rgba(10,15,35,.35); /* Vertrag: APP-Preiskarte (preis-karten, S11); V-7 Teil 1 (Ph11 §6) */

  --schatten-leiste-unten: 0 -10px 30px -16px rgba(10,15,35,.3); /* Vertrag: Feste Demo-Leiste (demo-leiste); V-7 Teil 1 (Ph11 §6) */

  --schatten-umzug: 0 30px 70px -44px rgba(30,40,80,.4); /* Vertrag: Umzug-Karte (umzug, N11-17); V-7 Teil 1 (Ph11 §6) */
  --schatten-free-tab-linie: inset 0 -1px 0 var(--farbe-linie-sektion); /* Ergänzung: Design, Free Anmeldung v2 Z. 76, Trennlinie unter den Tabs der App-Vorschau (am Tab, damit der 2-px-Balken sie überdeckt) */
  --schatten-regler-knopf-hell: 0 2px 6px rgba(30,40,80,.25); /* Ergänzung: Design, Daumen der Regler im Rechner C-Level (Loesung C-Level v3 „Rechner“, Ph12 Design-Abgleich Rollen V-E-loesungen-53) */
  --schatten-umschalter-spur: inset 0 1px 3px rgba(30,40,80,.16); /* Ergänzung: Design, Spur des Zeilen-Umschalters (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --schatten-umschalter-knopf: 0 2px 6px -2px rgba(30,40,80,.4); /* Ergänzung: Design, Schieber des Zeilen-Umschalters (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --schatten-umschalter-halo: 0 0 0 4px rgba(255,60,0,.16); /* Ergänzung: Design, Halo der Zeilennummer im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --schatten-umschalter-pille: 0 6px 18px -8px rgba(255,60,0,.85); /* Ergänzung: Design, Schatten der gefüllten Pille im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41) */
  --schatten-vergleich: 0 24px 60px -30px rgba(30,40,80,.3); /* Ergänzung: Design, Hülle der Vergleichsgrafik (Loesung Abrechnung v3 Z. 114) (Ph12 Design-Abgleich) */

  --schatten-vertragshero: 0 40px 80px -50px rgba(16,22,40,.45); /* Ergänzung: Design-Abgleich Ph12, Schatten der Hero-Karte (VF Z. 61) */
  --schatten-landkarte-puls-aus: 0 0 0 0 rgba(0,180,143,.4); /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 38, Puls des Hubs, Start */
  --schatten-landkarte-puls-an: 0 0 0 14px rgba(0,180,143,0); /* Ergänzung: Ph12 B1, Automatisierung v7 Z. 38, Puls des Hubs, Ende */
  --schatten-regler-knopf-roi: 0 2px 8px rgba(30,40,80,.35); /* Ergänzung: Ph12 B1, ROI-Rechner v3 Z. 29–30, Regler-Knopf */
  --schatten-story-punkt-leer: inset 0 0 0 1.5px var(--farbe-status-leer); /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 1444–1446, offener Punkt */
  --schatten-story-punkt-besucht: inset 0 0 0 1.5px var(--farbe-navy); /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 1444–1446, besuchter Punkt */
  --schatten-story-punkt-aktiv: inset 0 0 0 1.5px var(--farbe-orange-flaeche); /* Ergänzung: Ph12 B1, APP Produktseite Tour v3 Z. 1444–1446, aktiver Punkt */
  /* == Bewegung == */
  --bewegung-dauer-kurz: .2s; /* Ergänzung: Hover-Übergänge (1089×) */
  --bewegung-kurve: cubic-bezier(.4,0,.2,1); /* Spec: FAQ und Übergänge */
  --bewegung-einstieg-dauer: .85s; /* Spec: Einstieg steigAuf (.85 s: 60×) */
  --bewegung-einstieg-staffel: .06s; /* Spec: Staffelung des Einstiegs */
  --bewegung-faq-dauer: .34s; /* Spec: FAQ Höhe */
  --bewegung-faq-deckkraft: .24s; /* Spec: FAQ Deckkraft */
  --bewegung-faq-drehen: .32s; /* Spec: FAQ Plus dreht */
  --bewegung-lift: -2px; /* Spec: Hover-Lift (translateY), Spanne 2–3 (2 px: 320×) */
  --bewegung-lift-gross: -3px; /* Ergänzung: Design-Abgleich Ph12, Hover-Lift der Karten auf Hosting und DSGVO */
  --bewegung-dauer-lift: .18s; /* Ergänzung: Design-Abgleich Ph12, Übergangsdauer des Hover-Lifts auf Hosting und DSGVO */
  --bewegung-kopf-dauer: .28s; /* Vertrag: Wechsel in den Kompaktmodus (Ph2 §5) */
  --bewegung-kopf-kurve: cubic-bezier(.22,.61,.36,1); /* Vertrag: Kurve des Kompaktmodus (Ph2 §5) */
  --bewegung-panel-dauer: .24s; /* Vertrag: Panels und Suchfeld (Ph2 §5) */
  --bewegung-laufband-dauer: 38s; /* Vertrag: Laufband (Ph2 §5) */
  --bewegung-lift-karte: -5px; /* Vertrag: Hover-Lift der Karten absage (Ph4 §6) */
  --bewegung-laufband-dauer-einfarbig: 42s; /* Vertrag: logo-laufband einfarbig (Preise APP) (Ph4 §6) */
  --bewegung-story-schritt: .35s; /* Vertrag: Scrollstory, Farbwechsel der Schritte (reduziert aus) (Ph5 §6.2) */
  --bewegung-story-punkt: .25s; /* Vertrag: Scrollstory, Punkte und Seitenleiste (reduziert aus) (Ph5 §6.2) */
  --bewegung-story-wechsel: 260ms; /* Vertrag: Scrollstory, Überblendung der Ansichten (reduziert aus) (Ph5 §6.2) */
  --bewegung-kurve-heraus: cubic-bezier(.2,.7,.2,1); /* Vertrag: Scrollstory, Kurve der Überblendung (Ph5 §6.2) */
  /* Phase 6 (Vertrag Ph6 §6, V-5) */
  --bewegung-wechsel-dauer: .5s; /* Vertrag: Wechsel-Fade der Stationen (reduziert 0s) (Ph6 §6) */
  --bewegung-wechsel-kurve: cubic-bezier(.2,.8,.2,1); /* Vertrag: Kurve des Wechsel-Fades der Stationen (Ph6 §6) */
  --bewegung-ablauf-wechsel-dauer: .45s; /* Ergänzung: Design, Ph12 D (V-D-integrationen-20), Wechsel des Ablauf-Panels bxWechsel (Integration Brevo Z. 30, .45s) */
  --bewegung-ablauf-wechsel-kurve: cubic-bezier(.2,.7,.2,1); /* Ergänzung: Design, Ph12 D (V-D-integrationen-20), Kurve des Ablauf-Panel-Wechsels (Integration Brevo, bxWechsel) */
  /* Phase 7 (Vertrag Ph7 §6, V-5) */
  --bewegung-balken-dauer: .3s; /* Vertrag: Breitenwechsel der meter (reduziert 0s) (Ph7 §6) */
  /* Phase 11 (Vertrag Ph11 §6, V-7; Teil 0, Welle 0: M0a, M0b, M0c) */
  --bewegung-glow-atem: 9s; /* Vertrag: Glow-Atmen im Aufgaben-Hero (hero-hell aufgabe, M0a; reduziert aus) (Ph11 §6) */
  --bewegung-pfeil-takt: 2s; /* Vertrag: Pfeile der Kette (kernunterschied, M0a; reduziert aus) (Ph11 §6) */
  --bewegung-einstieg-kurz: .7s; /* Vertrag: Einstieg der Eyebrow steigAuf (hero-hell, M0a; H1 mit --bewegung-einstieg-dauer und -staffel) (Ph11 §6) */
  /* Design-Abgleich Ph12 E (Heute-Tabelle C-Level) */
  --bewegung-tabelle-feld-dauer: .4s; /* Ergänzung: Heute-Tabelle C-Level, „alter Preis“ blendet ein (dcFeld) */
  --bewegung-tabelle-feld-versatz-1: .4s; /* Ergänzung: Heute-Tabelle C-Level, Zeile 1 */
  --bewegung-tabelle-feld-versatz-2: .7s; /* Ergänzung: Heute-Tabelle C-Level, Zeile 2 */
  --bewegung-tabelle-feld-versatz-3: 1s; /* Ergänzung: Heute-Tabelle C-Level, Zeile 3 */
  /* Design-Abgleich Ph12 J: Desktop und Mobil, Loesung C-Level v3 / Finanzen v4 / Vertrieb v3 / Kundenservice v3 / Operations v3. */
  --bewegung-kostenkarten-feld-dauer: .35s; /* Ergänzung: dcFeld der Heute-Karten, Segmente .35s (Loesung C-Level v3 Z. 113) */
  --bewegung-kostenkarten-punkt-dauer: .4s; /* Ergänzung: dcPunkt der Heute-Karten, Kettenpunkte .4s (Loesung C-Level v3 Z. 140) */
  --bewegung-kostenkarten-punkt-skala: .3; /* Ergänzung: dcPunkt from scale(.3) (Loesung C-Level v3 Z. 33) */
  --bewegung-kostenkarten-kurve: var(--bewegung-kurve-heraus); /* Ergänzung: Kurve der Heute-Karten, wertgleich cubic-bezier(.2,.7,.2,1) (Loesung Finanzen v4 Z. 107) */
  --bewegung-kostenkarten-kurve-c-level: ease; /* Ergänzung: Heute-Karten C-Level ohne Timing-Funktion = ease (Loesung C-Level v3 Z. 113) */
  --bewegung-kostenkarten-segment-versatz-1: .3s; /* Ergänzung: Heute Karte 1, Segment 1 der Zeilenfolge (Loesung C-Level v3 Z. 113–115, Kundenservice/Operations gleich) */
  --bewegung-kostenkarten-segment-versatz-2: .4s; /* Ergänzung: Heute Karte 1, Segment 2 der Zeilenfolge (Loesung C-Level v3 Z. 113–115, Kundenservice/Operations gleich) */
  --bewegung-kostenkarten-segment-versatz-3: .6s; /* Ergänzung: Heute Karte 1, Segment 3 der Zeilenfolge (Loesung C-Level v3 Z. 113–115, Kundenservice/Operations gleich) */
  --bewegung-kostenkarten-segment-versatz-4: .7s; /* Ergänzung: Heute Karte 1, Segment 4 der Zeilenfolge (Loesung C-Level v3 Z. 113–115, Kundenservice/Operations gleich) */
  --bewegung-kostenkarten-segment-versatz-5: .9s; /* Ergänzung: Heute Karte 1, Segment 5 der Zeilenfolge (Loesung C-Level v3 Z. 113–115, Kundenservice/Operations gleich) */
  --bewegung-kostenkarten-segment-versatz-6: 1s; /* Ergänzung: Heute Karte 1, Segment 6 der Zeilenfolge (Loesung C-Level v3 Z. 113–115, Kundenservice/Operations gleich) */
  --bewegung-kostenkarten-finanzen-versatz-1: .3s; /* Ergänzung: Heute Karte 1, Finanzen Feld 1 der Zeilenfolge (Loesung Finanzen v4 Z. 107) */
  --bewegung-kostenkarten-finanzen-versatz-2: .42s; /* Ergänzung: Heute Karte 1, Finanzen Feld 2 der Zeilenfolge (Loesung Finanzen v4 Z. 107) */
  --bewegung-kostenkarten-finanzen-versatz-3: .55s; /* Ergänzung: Heute Karte 1, Finanzen Feld 3 der Zeilenfolge (Loesung Finanzen v4 Z. 107) */
  --bewegung-kostenkarten-finanzen-versatz-4: .67s; /* Ergänzung: Heute Karte 1, Finanzen Feld 4 der Zeilenfolge (Loesung Finanzen v4 Z. 107) */
  --bewegung-kostenkarten-vertrieb-versatz-1: .3s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 1 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-2: .38s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 2 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-3: .46s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 3 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-4: .54s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 4 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-5: .62s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 5 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-6: .7s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 6 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-7: .85s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 7 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-8: .93s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 8 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-9: 1.01s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 9 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-10: 1.09s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 10 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-11: 1.17s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 11 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-vertrieb-versatz-12: 1.25s; /* Ergänzung: Heute Karte 1, Vertrieb Feld 12 (Auftrag/Abrechnung, Loesung Vertrieb v3 Z. 111–112) */
  --bewegung-kostenkarten-punkt-versatz-1: .3s; /* Ergänzung: Heute Karte 3, Kettenpunkt 1 (Loesung C-Level v3 Z. 140–142) */
  --bewegung-kostenkarten-punkt-versatz-2: .7s; /* Ergänzung: Heute Karte 3, Kettenpunkt 2 (Loesung C-Level v3 Z. 140–142) */
  --bewegung-kostenkarten-punkt-versatz-3: 1.1s; /* Ergänzung: Heute Karte 3, Kettenpunkt 3 (Loesung C-Level v3 Z. 140–142) */
  --bewegung-kostenkarten-saeule-dauer: .5s; /* Ergänzung: dcSaeule der Heute-Karten, Säulen von Karte 2 .5s (Loesung Finanzen v4 Z. 115) */
  --bewegung-kostenkarten-saeule-versatz-1: .37s; /* Ergänzung: Heute Karte 2, Säule 1 (.37s + 0 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 124) */
  --bewegung-kostenkarten-saeule-versatz-2: .44s; /* Ergänzung: Heute Karte 2, Säule 2 (.37s + 1 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 125) */
  --bewegung-kostenkarten-saeule-versatz-3: .51s; /* Ergänzung: Heute Karte 2, Säule 3 (.37s + 2 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 126) */
  --bewegung-kostenkarten-saeule-versatz-4: .58s; /* Ergänzung: Heute Karte 2, Säule 4 (.37s + 3 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 127) */
  --bewegung-kostenkarten-saeule-versatz-5: .65s; /* Ergänzung: Heute Karte 2, Säule 5 (.37s + 4 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 128) */
  --bewegung-kostenkarten-saeule-versatz-6: .72s; /* Ergänzung: Heute Karte 2, Säule 6 (.37s + 5 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 129) */
  --bewegung-kostenkarten-saeule-versatz-7: .79s; /* Ergänzung: Heute Karte 2, Säule 7 (.37s + 6 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 130) */
  --bewegung-kostenkarten-saeule-versatz-8: .86s; /* Ergänzung: Heute Karte 2, Säule 8 (.37s + 7 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 131) */
  --bewegung-kostenkarten-saeule-versatz-9: .93s; /* Ergänzung: Heute Karte 2, Säule 9 (.37s + 8 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 132) */
  --bewegung-kostenkarten-saeule-versatz-10: 1s; /* Ergänzung: Heute Karte 2, Säule 10 (.37s + 9 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 133) */
  --bewegung-kostenkarten-saeule-versatz-11: 1.07s; /* Ergänzung: Heute Karte 2, Säule 11 (.37s + 10 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 134) */
  --bewegung-kostenkarten-saeule-versatz-12: 1.14s; /* Ergänzung: Heute Karte 2, Säule 12 (.37s + 11 × .07s; Loesung Finanzen v4 Z. 115, Loesung Vertrieb v3 Z. 122, Loesung Kundenservice v3 Z. 135) */
  --bewegung-kapitelleiste-lift-dauer: .25s; /* Ergänzung: Hover-Lift der Kapitelleiste (Über uns Chronik v3 Z. 56, transform .25s) */
  --bewegung-vertragshero-wechsel: .4s; /* Ergänzung: Design-Abgleich Ph12, Wechsel der aktiven Zeile der Rechnungsvorschau (VF Z. 70) */
  --bewegung-vertragshero-puls: 1.6s; /* Ergänzung: Design-Abgleich Ph12, Pulsdauer des Fußpunkts (VF heroPuls Z. 37, 883) */
  --bewegung-vertragshero-puls-skala: .7; /* Ergänzung: Design-Abgleich Ph12, Skalierung des Pulspunkts bei 50 % (VF heroPuls Z. 37) */
  --bewegung-lupe-zoom: .55s; /* Ergänzung: Design-Abgleich Ph12, Zoom der Lupe im Vertragsformular (VF Z. 299, transform .55s) */
  --bewegung-lupe-knopf: .18s; /* Ergänzung: Design-Abgleich Ph12, Farbwechsel der Lupenknöpfe (VF Z. 309, 311, transition .18s) */
  --bewegung-free-panel: .35s; /* Ergänzung: Design, Free Anmeldung v2 Z. 86, Überblendung der Panels der App-Vorschau (Ph12 Formulare) */
  --bewegung-umschalter-schieber: .38s; /* Ergänzung: Design, Gleiten des Schiebers im Zeilen-Umschalter (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41/-42) */
  --bewegung-umschalter-schieber-kurve: cubic-bezier(.34,1.36,.5,1); /* Ergänzung: Design, Kurve des Schiebers im Zeilen-Umschalter (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-41/-42) */
  --bewegung-umschalter-wechsel: .82s; /* Ergänzung: Design, Überblendung der Zustände im Zeilen-Umschalter, 820 ms (Loesung Vertrieb v3 „Umschalter“, Ph12 Design-Abgleich Rollen V-E-loesungen-42) */
  --bewegung-umschalter-wechsel-kurve: cubic-bezier(.65,0,.35,1); /* Ergänzung: Design, Kurve der Überblendung der Zustände (easeInOutCubic, Ph12 Design-Abgleich Rollen V-E-loesungen-42) */
  --bewegung-umschalter-nudge: 2.6s; /* Ergänzung: Design, Stups des Schiebers im Zustand Heute, dcSchieber (Loesung Vertrieb v3, Ph12 Design-Abgleich Rollen V-E-loesungen-42) */
  --bewegung-umschalter-pfeil: 1.5s; /* Ergänzung: Design, Stups des Hinweises, dcNudge (Loesung Vertrieb v3, Ph12 Design-Abgleich Rollen V-E-loesungen-42) */
  /* == Sonstiges == */
  --fokus-ring: 2px solid var(--farbe-navy); /* Vertrag: Fokus-Ring (V32), auf Navy Weiß */
  --fokus-versatz: 2px; /* Vertrag: Abstand des Fokus-Rings */
  --kopf-hoehe: 75px; /* Vertrag: Höhe der Kopfleiste in Ruhe samt Linie, gemessen 390/1000/1440 px (B1, E7) */
  --kopf-hoehe-kompakt: 57px; /* Vertrag: Höhe der kompakten Kopfleiste, Sprungversatz, gemessen 390/1000/1440 px (B1, E7) */
  --kopf-logo-hoehe: 30px; /* Vertrag: Logo in Ruhe (Ph2 §5) */
  --kopf-logo-hoehe-kompakt: 23px; /* Vertrag: Logo im Kompaktmodus (Ph2 §5) */
  --kasten-breite: 1440px; /* Vertrag: Breite des Seitenkastens, gleich kasten in breiten.yaml */
  /* Ph12 Design-Abgleich A-rahmen: Umriss-Pille des Sekundärbuttons „Free-Zugang anfordern“ (Design Lösungsseiten) */
  --abstand-button-pille-x: calc(var(--abstand-button-cta-x) - var(--linie-button-rand)); /* Ergänzung: Design, Hero der Branchenseiten und zentrierter Navy-Abschluss (15,5 px 32,5 px), gekoppelt an den Primärbutton */
  --abstand-button-pille-x-raster: calc(var(--abstand-button-cta-x-raster) - var(--linie-button-rand)); /* Ergänzung: Design, Navy-Abschluss im Raster (15,5 px 30,5 px), gekoppelt an den Primärbutton */
  --linie-button-rand: 1.5px; /* Ergänzung: Design, Umriss der Sekundärbuttons; vom Polster abzuziehen, damit beide Buttons gleich hoch und breit bleiben */
  --breite-button-paar-max: 320px; /* Ergänzung: Design Mobil, Höchstbreite je Button im gleich breiten Button-Paar */
  --abstand-button-cta-y: 17px; /* Ergänzung: Design, Buttons im Navy-Abschluss der Lösungsseiten und im Hero der Branchenseiten (17 px, Umriss 15,5 px) */
  --abstand-button-cta-x: 34px; /* Ergänzung: Design, zentrierter Navy-Abschluss und Hero der Branchenseiten (17 px 34 px) */
  --abstand-button-cta-x-raster: 32px; /* Ergänzung: Design, Navy-Abschluss im Raster mit zwei Buttons (17 px 32 px) */
  --schrift-button-cta-gewicht: 700; /* Ergänzung: Design, Buttons im Navy-Abschluss und im Branchen-Hero (16,5 px); Gewicht wie --schrift-button-gewicht */
  --schrift-button-cta-groesse: 16.5px; /* Ergänzung: Design, Buttons im Navy-Abschluss und im Branchen-Hero (16,5 px) */
  --schrift-button-cta-zeile: normal; /* Ergänzung: Design, Buttons im Navy-Abschluss und im Branchen-Hero (16,5 px); Zeilenhöhe wie --schrift-button-zeile */
  --schrift-button-cta-laufweite: 0; /* Ergänzung: Design, Buttons im Navy-Abschluss und im Branchen-Hero (16,5 px); Laufweite wie --schrift-button-laufweite */
  --schrift-button-cta-raster-gewicht: 700; /* Ergänzung: Design, Navy-Abschluss im Raster mit zwei Buttons (16 px); Gewicht wie --schrift-button-gewicht */
  --schrift-button-cta-raster-groesse: 16px; /* Ergänzung: Design, Navy-Abschluss im Raster mit zwei Buttons (16 px) */
  --schrift-button-cta-raster-zeile: normal; /* Ergänzung: Design, Navy-Abschluss im Raster mit zwei Buttons (16 px); Zeilenhöhe wie --schrift-button-zeile */
  --schrift-button-cta-raster-laufweite: 0; /* Ergänzung: Design, Navy-Abschluss im Raster mit zwei Buttons (16 px); Laufweite wie --schrift-button-laufweite */
  --abstand-button-termin-y: 16px; /* Ergänzung: Design, Buttons im Abschluss der Startseite (navy-termin, Startseite v6: 16 px, Umriss 14,5 px) */
  --abstand-button-termin-x: 32px; /* Ergänzung: Design, Primärbutton im Abschluss der Startseite (16 px 32 px) */
  --abstand-button-termin-sek-x: 28px; /* Ergänzung: Design, Umriss-Button im Abschluss der Startseite (14,5 px 28 px) */
  --schrift-button-termin-gewicht: 700; /* Ergänzung: Design, Buttons im Abschluss der Startseite (16 px); Gewicht wie --schrift-button-gewicht */
  --schrift-button-termin-groesse: 16px; /* Ergänzung: Design, Buttons im Abschluss der Startseite (16 px) */
  --schrift-button-termin-zeile: normal; /* Ergänzung: Design, Buttons im Abschluss der Startseite (16 px); Zeilenhöhe wie --schrift-button-zeile */
  --schrift-button-termin-laufweite: 0; /* Ergänzung: Design, Buttons im Abschluss der Startseite (16 px); Laufweite wie --schrift-button-laufweite */
  --breite-free-fenster-fest: 440px; /* Ergänzung: Design, Free Anmeldung v2 Mobil Z. 355 und 376, Festbreite des App-Fensters vor dem Skalieren */
  --schrift-button-klein-gewicht: 700; /* Ergänzung: Design, Kontakt v2, Button „Zum Support“ in der Bestandskunden-Karte (12 px 24 px, 14 px); Gewicht wie --schrift-button-gewicht */
  --schrift-button-klein-groesse: 14px; /* Ergänzung: Design, Kontakt v2, Button „Zum Support“ in der Bestandskunden-Karte (12 px 24 px, 14 px) */
  --schrift-button-klein-zeile: normal; /* Ergänzung: Design, Kontakt v2, Button „Zum Support“ in der Bestandskunden-Karte (12 px 24 px, 14 px); Zeilenhöhe wie --schrift-button-zeile */
  --schrift-button-klein-laufweite: 0; /* Ergänzung: Design, Kontakt v2, Button „Zum Support“ in der Bestandskunden-Karte (12 px 24 px, 14 px); Laufweite wie --schrift-button-laufweite */
  --farbe-navy-button-rand-termin: rgba(255,255,255,.4); /* Ergänzung: Design, Rand des Umriss-Buttons im Abschluss der Startseite (Startseite v6, rgba(255,255,255,.4)) */
  /* Phase 6 (Vertrag Ph6 §6, V-5) */
  --deckkraft-inaktiv: .45; /* Vertrag: Absende-Knopf mit aria-disabled (Ph6 §6) */
}

@media (width < 1080px) {
  :root {
    --seitenrand: 32px; /* Vertrag: 32 px von 768 bis 1079 px (V29) */
    --schrift-hero-aufgabe-groesse: clamp(33px, 5vw, 54px); /* Vertrag: Zwischenwert 768–1079 px (Ph11 §6.3, §6.4, Ä11-60) */
    --schrift-hero-rolle-groesse: clamp(30px, 4.4vw, 47px); /* Vertrag: Zwischenwert 768–1079 px (Ph11 §6.3, §6.4) */
    --schrift-hero-startups-groesse: clamp(33px, 5.2vw, 56px); /* Vertrag: Zwischenwert 768–1079 px (Ph11 §6.3, §6.4) */
    --schrift-kosten-zahl-groesse: clamp(27px, 3.3vw, 36px); /* Vertrag: Zwischenwert 768–1079 px (Ph11 §6.3, §6.4) */
    --schrift-zahl-band-groesse: clamp(38px, 5.9vw, 64px); /* Vertrag: Zwischenwert 768–1079 px (Ph11 §6.3, §6.4) */
    --schrift-h2-branche-groesse: clamp(30px, 4.3vw, 46px); /* Vertrag: Zwischenwert 768–1079 px (Ph11 §6.3, §6.4) */
    --schrift-aussage-gross-groesse: clamp(27px, 3.1vw, 34px); /* Vertrag: Zwischenwert 768–1079 px (Ph11 §6.3, §6.4) */

  }
}

/*
 * Ph12 Design-Abgleich: Seiten mit eigenen Breitenstufen (Frontmatter breitenstufen, data-breiten an .bx-ebene; Sicherheit,
 * ISO, Hosting, DSGVO, CRM-Bereiche, CRM, Migration, Team). Das Design hält den Seitenrand dort bei 64 px bis 1024 px und
 * setzt ihn darunter auf 40 px (statt 64/32 mit der Grenze 1080). Kopf und Fuß behalten --seitenrand der Wurzel; der Rand
 * gilt nur für den Inhalt (main, Brotkrumen als Kind der Ebene). Unter 768 px bleibt der mobile Rand.
 */
@media (width >= 768px) {
  .bx-ebene[data-breiten] > main,
  .bx-ebene[data-breiten] > .bx-brotkrumen {
    --seitenrand: var(--abstand-seitenrand-breit);
  }
}

@media (width >= 768px) and (width < 1024px) {
  .bx-ebene[data-breiten] > main,
  .bx-ebene[data-breiten] > .bx-brotkrumen {
    --seitenrand: var(--abstand-seitenrand-eng);
  }
}

@media (width >= 1024px) {
  .bx-ebene[data-breiten="crm"] > main,
  .bx-ebene[data-breiten="crm"] > .bx-brotkrumen {
    --seitenrand: var(--abstand-seitenrand-crm);
  }
}

/*
 * Ph12 Design-Abgleich: Schriftgröße der H1 auf den Seiten mit Seitenstufen (Design `h1Stil`): ab 1024 px fest, von 768 bis
 * 1023 px `clamp(34px, 5vw, N)`. Sicherheit 50, ISO und Hosting 48, DSGVO 42, CRM-Bereiche 52, Migration 46 (Titelstufe).
 * Unter 768 px gilt die Mobil-Schicht.
 */
@media (width >= 768px) {
  .bx-ebene[data-breiten="sicherheit"] { --schrift-hero-groesse: 50px; }
  .bx-ebene:is([data-breiten="iso"], [data-breiten="hosting"]) { --schrift-hero-groesse: 48px; }
  .bx-ebene[data-breiten="dsgvo"] { --schrift-hero-groesse: 42px; }
  .bx-ebene[data-breiten="crm-bereich"] { --schrift-hero-groesse: 52px; }
  .bx-ebene[data-breiten="migration"] { --schrift-titel-groesse: 46px; }
}

@media (width >= 768px) and (width < 1024px) {
  .bx-ebene[data-breiten="sicherheit"] { --schrift-hero-groesse: clamp(34px, 5vw, 50px); }
  .bx-ebene:is([data-breiten="iso"], [data-breiten="hosting"]) { --schrift-hero-groesse: clamp(34px, 5vw, 48px); }
  .bx-ebene[data-breiten="dsgvo"] { --schrift-hero-groesse: clamp(34px, 5vw, 42px); }
  .bx-ebene[data-breiten="crm-bereich"] { --schrift-hero-groesse: clamp(34px, 5vw, 52px); }
  .bx-ebene[data-breiten="migration"] { --schrift-titel-groesse: clamp(34px, 5vw, 46px); }
}

/*
 * Ph12 Design-Abgleich, Paket Sicherheit (V-F-inhalte-3): H2 der vier Sicherheitsseiten 32 px/1.2/−1 px (Design `font:800 32px/1.2`,
 * `letter-spacing:-1px`). Unter 768 px gilt die Mobil-Schicht.
 */
@media (width >= 768px) {
  .bx-ebene:is([data-breiten="sicherheit"], [data-breiten="iso"], [data-breiten="hosting"], [data-breiten="dsgvo"]) {
    --schrift-h2-groesse: 32px;
    --schrift-h2-zeile: 1.2;
    --schrift-h2-laufweite: -1px;
  }

  .bx-ebene:is([data-breiten="sicherheit"], [data-breiten="iso"], [data-breiten="hosting"], [data-breiten="dsgvo"]) .bx-sektionskopf__titel {
    max-width: 660px;
    text-wrap: pretty;
  }
}

/*
 * Ph12 Design-Abgleich (C-crm, V-C-crm-4): H2-Stufen der Seiten mit Seitenstufen (Design `font`-Angaben der H2). CRM-Bereiche
 * 30/1.2/-.9 (Umschalter-Kopf 34/1.18/-1), CRM-Produktseite 34/1.15/-1.1 (FAQ 40/1.1/-1.2, Abschluss 38/1.14/-1.3), Migration
 * 28/1.2/-.8 (FAQ 34/1.14/-1). Unter 768 px gilt die Mobil-Schicht.
 */
@media (width >= 768px) {
  .bx-ebene[data-breiten="crm-bereich"] { --schrift-h2-groesse: 30px; --schrift-h2-zeile: 1.2; --schrift-h2-laufweite: -0.9px; }
  .bx-ebene[data-breiten="crm-bereich"] .bx-umschalter__kopf { --schrift-h2-groesse: 34px; --schrift-h2-zeile: 1.18; --schrift-h2-laufweite: -1px; }
  .bx-ebene[data-breiten="crm"] { --schrift-h2-groesse: 34px; --schrift-h2-zeile: 1.15; --schrift-h2-laufweite: -1.1px; }
  .bx-ebene[data-breiten="crm"] .bx-faq { --schrift-h2-groesse: 40px; --schrift-h2-zeile: 1.1; --schrift-h2-laufweite: -1.2px; }
  .bx-ebene[data-breiten="crm"] .bx-abschluss-cta { --schrift-h2-groesse: 38px; --schrift-h2-zeile: 1.14; --schrift-h2-laufweite: -1.3px; }
  .bx-ebene[data-breiten="migration"] { --schrift-h2-groesse: 28px; --schrift-h2-zeile: 1.2; --schrift-h2-laufweite: -0.8px; }
  .bx-ebene[data-breiten="migration"] .bx-faq { --schrift-h2-groesse: 34px; --schrift-h2-zeile: 1.14; --schrift-h2-laufweite: -1px; }
}

/*
 * Feste Module (data-mobil-fest, Vertrag 5) behalten die Desktopwerte der Tokens, die die Mobil-Schicht ändert.
 * Ohne --seitenrand und ohne --fokus-ring: Seitenrand und weißer Fokus-Ring auf Navy gelten auch dort.
 * TokensTest hält diesen Block gleich den Desktopwerten oben und gleich der Tokenmenge von mobil.css.
 */
[data-mobil-fest] {
  --schrift-titel-groesse: 44px;
  --schrift-titel-laufweite: -1.5px;
  --schrift-h2-groesse: 36px;
  --schrift-h2-laufweite: -1.2px;
  --schrift-zahl-groesse: 34px;
  --schrift-zahl-laufweite: -1.3px;
  --schrift-zahl-gross-groesse: 60px;
  --schrift-zahl-gross-laufweite: -2.4px;
  --schrift-fehler-treffer-titel-groesse: 30px;
  --schrift-fehler-treffer-titel-laufweite: -0.8px;
  --schrift-fehler-anlass-titel-groesse: 24px;
  --schrift-fehler-anlass-titel-laufweite: -0.5px;
  --schrift-fehler-ersatz-titel-groesse: 26px;
  --schrift-fehler-ersatz-titel-laufweite: -0.6px;
  --schrift-kapitel-jahr-groesse: 32px;
  --schrift-kapitel-jahr-laufweite: -1.2px;
  --schrift-jahr-gross-groesse: 96px;
  --schrift-jahr-gross-laufweite: -4px;
  --schrift-zitat-gross-groesse: 25px;
  --schrift-zitat-gross-laufweite: -0.5px;
  --schrift-aussage-groesse: 40px;
  --schrift-aussage-laufweite: -1.6px;
  --schrift-h3-gross-groesse: 24px;
  --schrift-h3-gross-laufweite: -0.6px;
  --schrift-monogramm-groesse: 40px;
  --schrift-monogramm-laufweite: -1.5px;
  --schrift-kennzahl-groesse: 30px;
  --schrift-kennzahl-laufweite: -1.1px;
  --schrift-anfuehrung-groesse: 40px;
  --schrift-h2-start-groesse: 40px;
  --schrift-h2-start-laufweite: -1.4px;
  --schrift-hero-free-groesse: 64px;
  --schrift-hero-free-laufweite: -2.6px;
  --schrift-station-titel-groesse: 26px;
  --schrift-station-titel-laufweite: -0.7px;
  --schrift-alternative-titel-groesse: 28px;
  --schrift-alternative-titel-laufweite: -0.8px;
  --schrift-zahl-eingabe-groesse: 48px;
  --schrift-zahl-eingabe-laufweite: -1.8px;
  --schrift-kachel-zahl-groesse: 26px;
  --schrift-kachel-zahl-laufweite: -1px;
  --schrift-einfuehrung-zahl-groesse: 38px;
  --schrift-einfuehrung-zahl-laufweite: -1.5px;
  --schrift-interview-titel-groesse: 28px;
  --schrift-interview-titel-laufweite: -0.8px;
  --schrift-hero-hell-groesse: 60px;
  --schrift-hero-hell-laufweite: -2.2px;
  --schrift-hero-xl-groesse: 76px;
  --schrift-hero-xl-laufweite: -3.2px;
  --schrift-zahl-bilanz-groesse: 42px;
  --schrift-zahl-bilanz-laufweite: -1.6px;
  --schrift-zitat-definition-groesse: 27px;
  --schrift-zitat-definition-laufweite: -0.5px;
  --schrift-ergebnis-titel-groesse: 27px;
  --schrift-ergebnis-titel-laufweite: -1px;
  --schrift-zitat-person-groesse: 30px;
  --schrift-zitat-person-laufweite: -0.8px;
  --schrift-bento-ziffer-groesse: 46px;
  --schrift-bento-ziffer-laufweite: -2px;
  --schrift-logo-name-groesse: 30px;
  --schrift-logo-name-laufweite: -0.8px;
  --schrift-abschluss-titel-groesse: 26px;
  --schrift-abschluss-titel-laufweite: -0.6px;
  --schrift-sammelliste-gruppe-groesse: 28px;
  --schrift-sammelliste-gruppe-laufweite: -0.7px;
  --schrift-kennzahl-gruen-groesse: 28px;
  --schrift-kennzahl-gruen-laufweite: -0.8px;
  --schrift-titel-recht-groesse: 40px;
  --schrift-titel-recht-laufweite: -1.4px;
  --schrift-h2-dicht-groesse: 32px;
  --schrift-h2-dicht-laufweite: -1.1px;
  --schrift-ziffer-gross-groesse: 62px;
  --schrift-hero-aufgabe-groesse: 54px;
  --schrift-hero-aufgabe-laufweite: -1.8px;
  --schrift-hero-rolle-groesse: 47px;
  --schrift-hero-rolle-laufweite: -1.5px;
  --schrift-hero-startups-groesse: 56px;
  --schrift-hero-startups-laufweite: -2.2px;
  --schrift-kosten-zahl-groesse: 36px;
  --schrift-kosten-zahl-laufweite: -1.4px;
  --schrift-zahl-band-groesse: 64px;
  --schrift-zahl-band-laufweite: -2.6px;
  --schrift-beleg-zahl-groesse: 48px;
  --schrift-beleg-zahl-laufweite: -1.8px;
  --schrift-h2-branche-groesse: 46px;
  --schrift-h2-branche-laufweite: -1.9px;
  --schrift-aussage-gross-groesse: 34px;
  --schrift-aussage-gross-laufweite: -1.2px;
  --schrift-rechnung-netto-groesse: 24px;
  --schrift-rechnung-netto-laufweite: -0.8px;

  --abstand-sektion: 56px;
  --abstand-sektion-gross: 88px;
  --abstand-sektion-kapitel: 96px;
  --abstand-block: 40px;
  --abstand-block-gross: 64px;
  --abstand-hero-oben: 42px;
  --abstand-hero-unten: 46px;
  --abstand-spalten: 56px;
  --abstand-gruppe: 40px;
  --abstand-raster: 28px;
  --abstand-raster-gross: 48px;
  --abstand-karte-x: 30px;
  --abstand-box-x: 24px;
  --abstand-seitenspalte-x: 36px;
  --abstand-button-x: 30px;
  --abstand-button-sek-x: 26px;
  --abstand-fehler-adresse-x: 28px;
  --abstand-fehler-treffer-x: 36px;
  --abstand-fehler-karte-x: 32px;
  --abstand-fehler-bereich-x: 26px;
  --abstand-fehler-knopf-x: 28px;
  --abstand-fehler-knopf-klein-x: 26px;
  --abstand-fehler-eingabe-x: 22px;
}

/*
 * Basis (Vertrag Abschnitt 5, Teilplan A3 §4.3): Box-Modell, Body, Kasten, Ebene, Abschnitt, Links, Fokus,
 * Schriftklassen, unsichtbarer Text, reduzierte Bewegung, Sprungversatz. Außerhalb von tokens.css nur var(--…).
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Automatische Silbentrennung (hyphens: auto in Bausteinen) nur für lange Wörter: ab 12 Zeichen, mindestens
 * 5 vor und 5 nach dem Strich (Entscheidung Patrick, R1). Die einzige Stelle dafür; die Eigenschaften erben.
 * Safari bis 26 kennt nur die Präfixe vor und nach dem Strich (Mindestlänge damit 10), die Standard-Eigenschaft
 * steht danach und gilt, wo es sie gibt.
 */
html {
  scroll-padding-top: var(--kopf-hoehe-kompakt);
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  hyphenate-limit-chars: 12 5 5;
}

html,
body {
  margin: 0;
  background: var(--farbe-weiss);
}

body {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
}

/* Bis zur Kastenbreite (1440 px) sitzt der Rahmen mittig und ist außen weiß; clip statt hidden, damit der Seitenkopf (Ph2) kleben kann */
.bx-kasten {
  width: 100%;
  max-width: var(--kasten-breite);
  margin-inline: auto;
  background: var(--farbe-weiss);
  overflow: clip;
}

/*
 * 2K und größer: Der Rahmen wächst unbegrenzt mit dem Fenster. Kopf, Fuß, Bänder und Hintergrundformen gehen über die volle
 * Breite, der Inhalt bleibt so breit wie bei 1440 px und mittig: Der Seitenrand wächst um die halbe Mehrbreite
 * (--bx-rand-extra). cqi bezieht sich auf den Rahmen; --bx-rand-extra ist registriert (Länge), damit die Mehrbreite an der
 * Ebene und der Hintergrund-Ebene zu Pixeln aufgelöst wird und in eigenen Containern der Bausteine (cqw/cqi dort)
 * nicht neu gegen den inneren Container ausgewertet wird.
 */
@property --bx-rand-extra {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@media (width > 1440px) {
  .bx-kasten {
    max-width: none;
    container-type: inline-size;
  }

  .bx-kasten > :is(.bx-ebene, .bx-hintergrund) {
    --bx-rand-extra: max(0px, calc((100cqi - var(--kasten-breite)) / 2)); /* nie negativ: Scrollleiste verkürzt cqi, nicht die Media-Query */
  }

  .bx-ebene {
    --seitenrand: calc(var(--abstand-seitenrand-breit) + var(--bx-rand-extra));
  }

  .bx-ebene[data-breiten] > main,
  .bx-ebene[data-breiten] > .bx-brotkrumen {
    --seitenrand: calc(var(--abstand-seitenrand-breit) + var(--bx-rand-extra));
  }

  .bx-ebene[data-breiten="crm"] > main,
  .bx-ebene[data-breiten="crm"] > .bx-brotkrumen {
    --seitenrand: calc(var(--abstand-seitenrand-crm) + var(--bx-rand-extra));
  }
}

.bx-ebene {
  position: relative;
  z-index: 1;
}

.bx-abschnitt {
  position: relative;
  isolation: isolate;
}

/* where() hält die Spezifität niedrig: Buttons und Bausteine überschreiben die Linkfarbe ohne Kampf */
:where(a) {
  color: var(--farbe-navy);
  text-decoration: none;
}

:where(a):hover {
  color: var(--farbe-orange-text);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

/* Jede Navy-Fläche trägt data-flaeche="navy" und dreht den Fokus-Ring auf Weiß */
[data-flaeche="navy"] {
  --fokus-ring: 2px solid var(--farbe-weiss);
}

/* Deckend weiße Abschnittsfläche (Parameter deckend): Die Formen des Seitenhintergrunds scheinen nicht durch */
section[data-flaeche="weiss-deckend"] {
  background-color: var(--farbe-weiss);
}

.bx-schrift-hero {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-hero-gewicht);
  font-size: var(--schrift-hero-groesse);
  line-height: var(--schrift-hero-zeile);
  letter-spacing: var(--schrift-hero-laufweite);
}

.bx-schrift-titel {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-titel-gewicht);
  font-size: var(--schrift-titel-groesse);
  line-height: var(--schrift-titel-zeile);
  letter-spacing: var(--schrift-titel-laufweite);
}

.bx-schrift-kicker {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-kicker-gewicht);
  font-size: var(--schrift-kicker-groesse);
  line-height: var(--schrift-kicker-zeile);
  letter-spacing: var(--schrift-kicker-laufweite);
}

.bx-schrift-h2 {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-h2-gewicht);
  font-size: var(--schrift-h2-groesse);
  line-height: var(--schrift-h2-zeile);
  letter-spacing: var(--schrift-h2-laufweite);
}

.bx-schrift-h3 {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-h3-groesse);
  line-height: var(--schrift-h3-zeile);
  letter-spacing: var(--schrift-h3-laufweite);
}

.bx-schrift-lead {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-lead-gewicht);
  font-size: var(--schrift-lead-groesse);
  line-height: var(--schrift-lead-zeile);
  letter-spacing: var(--schrift-lead-laufweite);
}

.bx-schrift-text {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
}

.bx-schrift-text-kompakt {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-text-kompakt-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-text-kompakt-zeile);
  letter-spacing: var(--schrift-text-kompakt-laufweite);
}

.bx-schrift-liste {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-liste-gewicht);
  font-size: var(--schrift-liste-groesse);
  line-height: var(--schrift-liste-zeile);
  letter-spacing: var(--schrift-liste-laufweite);
}

.bx-schrift-fussnote {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
  letter-spacing: var(--schrift-fussnote-laufweite);
}

.bx-schrift-zahl {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-zahl-gewicht);
  font-size: var(--schrift-zahl-groesse);
  line-height: var(--schrift-zahl-zeile);
  letter-spacing: var(--schrift-zahl-laufweite);
}

.bx-schrift-zahl-gross {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-zahl-gross-gewicht);
  font-size: var(--schrift-zahl-gross-groesse);
  line-height: var(--schrift-zahl-gross-zeile);
  letter-spacing: var(--schrift-zahl-gross-laufweite);
}

.bx-schrift-eyebrow {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}

.bx-schrift-label {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-schrift-etikett {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
  letter-spacing: var(--schrift-etikett-laufweite);
}

.bx-schrift-button {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-button-groesse);
  line-height: var(--schrift-button-zeile);
  letter-spacing: var(--schrift-button-laufweite);
}

.bx-schrift-textlink {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
}

.bx-schrift-pille {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-pille-zeile);
  letter-spacing: var(--schrift-pille-laufweite);
}

.bx-schrift-pille-gross {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-pille-gross-gewicht);
  font-size: var(--schrift-pille-gross-groesse);
  line-height: var(--schrift-pille-gross-zeile);
  letter-spacing: var(--schrift-pille-gross-laufweite);
}

/* Visuell verborgen, für Screenreader lesbar */
.bx-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important; /* sonst bleibt eine geschlossene Akkordeon-Antwort 340 ms sichtbar */
    scroll-behavior: auto !important;
  }
}

/*
 * Mobil-Schicht (Vertrag Abschnitt 5, V23): Tokens unter 768px nach den Regeln des Mobil-Generators,
 * dazu Layout-Grundformen, die Bausteine ausdrücklich wählen. Ohne Farben, Radien, Schatten, Familien.
 * Feste Module (data-mobil-fest) behalten ihre Desktopwerte (tokens.css) und werden nie angefasst.
 */
html,
body {
  overflow-x: clip;
}

@media (width < 768px) {
  :root {
    --schrift-titel-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-titel-laufweite: -1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-h2-groesse: 27px; /* Mobil: Größe 34–39 px → 27 px */
    --schrift-h2-laufweite: -0.9px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zahl-groesse: 27px; /* Mobil: Größe 34–39 px → 27 px */
    --schrift-zahl-laufweite: -1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zahl-gross-groesse: 38px; /* Mobil: Größe ab 60 px → 38 px */
    --schrift-zahl-gross-laufweite: -1.5px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-fehler-treffer-titel-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-fehler-treffer-titel-laufweite: -0.6px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-fehler-anlass-titel-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-fehler-anlass-titel-laufweite: -0.4px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-fehler-ersatz-titel-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-fehler-ersatz-titel-laufweite: -0.5px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-kapitel-jahr-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-kapitel-jahr-laufweite: -0.9px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-jahr-gross-groesse: 38px; /* Mobil: Größe ab 60 px → 38 px */
    --schrift-jahr-gross-laufweite: -1.6px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zitat-gross-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-zitat-gross-laufweite: -0.4px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-aussage-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-aussage-laufweite: -1.2px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-h3-gross-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-h3-gross-laufweite: -0.5px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-monogramm-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-monogramm-laufweite: -1.1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-kennzahl-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-kennzahl-laufweite: -0.9px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-anfuehrung-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-h2-start-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-h2-start-laufweite: -1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-hero-free-groesse: clamp(30px, 9.7vw, 38px); /* Mobil: Größe ab 60 px → 38 px als Obergrenze von clamp (Vertrag Ph6 §6) */
    --schrift-hero-free-laufweite: -1.5px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-station-titel-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-station-titel-laufweite: -0.6px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-alternative-titel-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-alternative-titel-laufweite: -0.7px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zahl-eingabe-groesse: 33px; /* Mobil: Größe 48–59 px → 33 px */
    --schrift-zahl-eingabe-laufweite: -1.2px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-kachel-zahl-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-kachel-zahl-laufweite: -0.8px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-einfuehrung-zahl-groesse: 27px; /* Mobil: Größe 34–39 px → 27 px */
    --schrift-einfuehrung-zahl-laufweite: -1.1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-interview-titel-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-interview-titel-laufweite: -0.7px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-hero-hell-groesse: 38px; /* Mobil: Größe ab 60 px → 38 px */
    --schrift-hero-hell-laufweite: -1.4px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-hero-xl-groesse: 38px; /* Mobil: Größe ab 60 px → 38 px */
    --schrift-hero-xl-laufweite: -1.6px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zahl-bilanz-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-zahl-bilanz-laufweite: -1.1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zitat-definition-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-zitat-definition-laufweite: -0.4px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-ergebnis-titel-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-ergebnis-titel-laufweite: -0.8px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zitat-person-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-zitat-person-laufweite: -0.6px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-bento-ziffer-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-bento-ziffer-laufweite: -1.3px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-logo-name-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-logo-name-laufweite: -0.6px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-abschluss-titel-groesse: 21px; /* Mobil: Größe 24–27 px → 21 px */
    --schrift-abschluss-titel-laufweite: -0.5px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-sammelliste-gruppe-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-sammelliste-gruppe-laufweite: -0.6px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-kennzahl-gruen-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-kennzahl-gruen-laufweite: -0.7px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-titel-recht-groesse: 30px; /* Mobil: Größe 40–47 px → 30 px */
    --schrift-titel-recht-laufweite: -1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-h2-dicht-groesse: 24px; /* Mobil: Größe 28–33 px → 24 px */
    --schrift-h2-dicht-laufweite: -0.8px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-ziffer-gross-groesse: 44px; /* Mobil: Größe 62 px → 44 px nach Vertrag Ph10 §6 (Design mobil statt Generator 38 px; Laufweite 0) */
    --schrift-hero-aufgabe-groesse: 33px; /* Mobil: Größe 48–59 px → 33 px */
    --schrift-hero-aufgabe-laufweite: -1.1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-hero-rolle-groesse: 30px; /* Mobil: Größe nach Ph11 §6.3 */
    --schrift-hero-rolle-laufweite: -1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-hero-startups-groesse: 33px; /* Mobil: Größe nach Ph11 §6.3 */
    --schrift-hero-startups-laufweite: -1.3px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-kosten-zahl-groesse: 27px; /* Mobil: Größe nach Ph11 §6.3 */
    --schrift-kosten-zahl-laufweite: -1px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-zahl-band-groesse: 38px; /* Mobil: Größe nach Ph11 §6.3 */
    --schrift-zahl-band-laufweite: -1.5px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-beleg-zahl-groesse: 33px; /* Mobil: Größe nach Ph11 §6.3 */
    --schrift-beleg-zahl-laufweite: -1.2px; /* Mobil: Laufweite im Verhältnis der Größe */
    --schrift-h2-branche-groesse: 30px; /* Mobil: Ph11 V-7 Teil 2, Design/Generator */
    --schrift-h2-branche-laufweite: -1.2px; /* Mobil: Ph11 V-7 Teil 2, Design/Generator */
    --schrift-aussage-gross-groesse: 27px; /* Mobil: Ph11 V-7 Teil 2, Design/Generator */
    --schrift-aussage-gross-laufweite: -1px; /* Mobil: Ph11 V-7 Teil 2, Design/Generator */
    --schrift-rechnung-netto-groesse: 21px; /* Mobil: Ph11 V-7 Teil 2, Design/Generator */
    --schrift-rechnung-netto-laufweite: -0.7px; /* Mobil: Ph11 V-7 Teil 2, Design/Generator */

    --seitenrand: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-sektion: 45px; /* Mobil: vertikal 40–63 px ×0,8 */
    --abstand-sektion-gross: 55px; /* Mobil: vertikal 64–95 px ×0,62 */
    --abstand-sektion-kapitel: 56px; /* Mobil: vertikal ab 96 px → 56 px */
    --abstand-block: 32px; /* Mobil: vertikal 40–63 px ×0,8 */
    --abstand-block-gross: 40px; /* Mobil: vertikal 64–95 px ×0,62 */
    --abstand-hero-oben: 34px; /* Mobil: vertikal 40–63 px ×0,8 */
    --abstand-hero-unten: 37px; /* Mobil: vertikal 40–63 px ×0,8 */
    --abstand-spalten: 24px; /* Mobil: Gap ab 56 px → 24 px */
    --abstand-gruppe: 20px; /* Mobil: Gap 28–55 px → 20 px */
    --abstand-raster: 20px; /* Mobil: Gap 28–55 px → 20 px */
    --abstand-raster-gross: 20px; /* Mobil: Gap 28–55 px → 20 px */
    --abstand-karte-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-box-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-seitenspalte-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-button-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-button-sek-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-fehler-adresse-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-fehler-treffer-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-fehler-karte-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-fehler-bereich-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-fehler-knopf-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-fehler-knopf-klein-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
    --abstand-fehler-eingabe-x: 20px; /* Mobil: horizontal über 20 px → 20 px */
  }

  /* Eine Spalte: Flex-Zeile wird zur Spalte, Kinder nehmen die volle Breite */
  .bx-stapeln:not([data-mobil-fest], [data-mobil-fest] *) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .bx-stapeln:not([data-mobil-fest], [data-mobil-fest] *) > * {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    align-self: auto !important;
  }

  /* Zwei Spalten: Raster mit zwei gleich breiten Spalten, Kinder ohne feste Zellen */
  .bx-raster-mobil-2:not([data-mobil-fest], [data-mobil-fest] *) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
  }

  .bx-raster-mobil-2:not([data-mobil-fest], [data-mobil-fest] *) > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Kurze Zeilen dürfen umbrechen */
  .bx-zeile-umbrechen:not([data-mobil-fest], [data-mobil-fest] *) {
    flex-wrap: wrap !important;
  }

  /* Klebende Elemente werden statisch, außer Seitenkopf und Scrollstory (data-klebend="immer") */
  [data-klebend]:not([data-klebend="immer"], [data-mobil-fest], [data-mobil-fest] *) {
    position: static !important;
    top: auto !important;
  }
}

/*
 * Grundelemente (Vertrag 3.8, Teilplan A3 §4.5): Buttons, Textlink, CTA-Paar, Sektionskopf, Pillen,
 * Status-Punkt, Icon-Kreis. Nur Tokens. Jede Hover-Regel gilt zusätzlich für [data-sg-zustand="hover"]
 * (nur Darstellung im Styleguide).
 */

/* == Buttons == */
.bx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand-button-y) var(--abstand-button-x);
  border: 0;
  border-radius: var(--radius-pille);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-button-groesse);
  line-height: var(--schrift-button-zeile);
  letter-spacing: var(--schrift-button-laufweite);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--bewegung-dauer-kurz),
    border-color var(--bewegung-dauer-kurz),
    color var(--bewegung-dauer-kurz);
}

.bx-button--primaer {
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-button--primaer:hover,
[data-sg-zustand="hover"] .bx-button--primaer {
  background-color: var(--farbe-orange-hover);
  color: var(--farbe-weiss);
}

.bx-button--sekundaer-hell,
.bx-button--sekundaer-navy {
  padding: calc(var(--abstand-button-y) - var(--linie-button-rand)) var(--abstand-button-sek-x);
  border: var(--linie-button-rand) solid var(--farbe-navy);
  background-color: transparent;
  color: var(--farbe-navy);
}

.bx-button--sekundaer-hell:hover,
[data-sg-zustand="hover"] .bx-button--sekundaer-hell {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-button--sekundaer-navy {
  border-color: var(--farbe-navy-button-rand);
  color: var(--farbe-weiss);
}

.bx-button--sekundaer-navy:hover,
[data-sg-zustand="hover"] .bx-button--sekundaer-navy {
  background-color: var(--farbe-weiss);
  border-color: var(--farbe-weiss);
  color: var(--farbe-navy);
}

/* == Textlink: der orange Unterstrich zeigt den Link, kein Pfeil == */
.bx-textlink {
  border-bottom: 1.5px solid var(--farbe-orange-flaeche);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
  transition: color var(--bewegung-dauer-kurz);
}

.bx-textlink:hover,
[data-sg-zustand="hover"] .bx-textlink {
  color: var(--farbe-orange-text);
}

/* Ton mint (H8-84; Design Automatisierung v7 Kontrollkasten): grüner Text, mintfarbene Linie, Hover navy */
.bx-textlink--mint {
  border-bottom-width: 1px;
  border-bottom-color: var(--farbe-mint-akzent);
  color: var(--farbe-mint-text);
}

.bx-textlink--mint:hover,
[data-sg-zustand="hover"] .bx-textlink--mint {
  border-bottom-color: var(--farbe-navy);
  color: var(--farbe-navy);
}

/* Ph12 Design-Abgleich (V-B-app-37, VF): H2-Größe einzelner Köpfe über `kopf.titel_groesse` */
@media (width >= 768px) {
  [data-bx-titel="klein"] .bx-sektionskopf__titel {
    font-size: var(--schrift-h2-dicht-groesse);
    line-height: 1.15;
    letter-spacing: -1px;
  }

  [data-bx-titel="kette"] .bx-sektionskopf__titel {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -1.2px;
  }

  [data-bx-titel="simulator"] .bx-sektionskopf__titel {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -1.3px;
  }
}

/*
 * Ph12 Design-Abgleich (V-B-app-28, -29): Fließtext-Verweise der APP-Detailseiten.
 * `bx-begriff` = Verweis auf einen Lexikon-Begriff (gepunktet unterstrichen, Hover Orange; Design VF/AD/CF `underline dotted`),
 * `bx-inlinelink` = Verweis im Kopftext (navy, 600, unterstrichen).
 */
.bx-begriff {
  color: inherit;
  text-decoration: underline dotted var(--farbe-linie-begriff);
  text-underline-offset: 3px;
}

.bx-begriff:hover,
[data-sg-zustand="hover"] .bx-begriff {
  color: var(--farbe-orange-text);
  text-decoration-color: currentcolor;
}

.bx-inlinelink {
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bx-inlinelink:hover,
[data-sg-zustand="hover"] .bx-inlinelink {
  color: var(--farbe-orange-text);
}

/* == CTA-Paar == */
.bx-cta-paar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-12);
}

/* == Sektionskopf == */
.bx-sektionskopf {
  max-width: 760px;
  margin-bottom: var(--abstand-28);
}

.bx-sektionskopf__eyebrow {
  margin: 0 0 var(--abstand-14);
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}

/* Das Design setzt den Eyebrow auf Über uns und Team versal, auf Sicherheit, CRM u. a. gemischt: nur auf Wunsch */
.bx-sektionskopf__eyebrow--versal {
  text-transform: uppercase;
}

.bx-sektionskopf__eyebrow--gruen {
  color: var(--farbe-mint-text);
}

.bx-sektionskopf__eyebrow::before {
  content: '\2014\00a0';
}

/* Ph8 H2b (Ä8-27): mit Nummer trägt der Eyebrow „01 — “ im Text, der Strich davor entfällt; die nummerierten
   Eyebrows stehen im Design (Automatisierung v7, 02–07) in Mint (P-H2B-16 b, H8-76) */
.bx-sektionskopf__eyebrow--nummer {
  color: var(--farbe-mint-text);
}

.bx-sektionskopf__eyebrow--nummer::before {
  content: none;
}

.bx-sektionskopf__titel {
  margin: 0 0 var(--abstand-14);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-h2-gewicht);
  font-size: var(--schrift-h2-groesse);
  line-height: var(--schrift-h2-zeile);
  letter-spacing: var(--schrift-h2-laufweite);
  text-wrap: balance;
}

.bx-sektionskopf__lead {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-lead-gewicht);
  font-size: var(--schrift-lead-groesse);
  line-height: var(--schrift-lead-zeile);
  letter-spacing: var(--schrift-lead-laufweite);
  text-wrap: pretty;
}

[data-flaeche="navy"] .bx-sektionskopf__eyebrow {
  color: var(--farbe-mint);
}

[data-flaeche="navy"] .bx-sektionskopf__titel {
  color: var(--farbe-weiss);
}

[data-flaeche="navy"] .bx-sektionskopf__lead {
  color: var(--farbe-navy-text-sekundaer);
}

/* == Pillen == */
.bx-pille {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--abstand-8);
  border-radius: var(--radius-pille);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-pille-zeile);
  letter-spacing: var(--schrift-pille-laufweite);
  white-space: nowrap;
}

.bx-pille--hell {
  border: 1px solid var(--farbe-linie-eingabe);
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
}

.bx-pille--navy {
  background-color: var(--farbe-navy-pille);
  color: var(--farbe-weiss);
}

.bx-pille--navy-aktiv {
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-pille--ergebnis {
  gap: var(--abstand-8);
  height: auto;
  padding: var(--abstand-4) var(--abstand-12) var(--abstand-4) var(--abstand-10);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  font-size: var(--schrift-pille-gross-groesse);
  line-height: var(--schrift-pille-gross-zeile);
}

.bx-pille__punkt {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-gruen);
}

.bx-pille--mono-etikett {
  height: auto;
  padding: var(--abstand-4) var(--abstand-8);
  border: 1px solid var(--farbe-linie-eingabe);
  background-color: var(--farbe-weiss);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
  letter-spacing: var(--schrift-etikett-laufweite);
}

/* == Status-Punkt (Text nur für Screenreader) == */
.bx-status {
  display: inline-flex;
  align-items: center;
}

.bx-status__punkt {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-rund);
}

.bx-status[data-status="enthalten"] .bx-status__punkt {
  background-color: var(--farbe-gruen);
}

.bx-status[data-status="eingeschraenkt"] .bx-status__punkt {
  background-color: var(--farbe-gedaempft-punkt);
}

.bx-status[data-status="nicht-vorhanden"] .bx-status__punkt {
  border: 1.5px solid var(--farbe-status-leer);
  background-color: transparent;
}

/* == Icon-Kreis: Zeichen als SVG, zentriert per Flex; Farbe über currentColor == */
.bx-icon-kreis {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-rund);
}

.bx-icon-kreis svg {
  display: block;
  flex: none;
}

.bx-icon-kreis[data-icon="haken"],
.bx-icon-kreis[data-icon="plus"] {
  background-color: var(--farbe-gruen);
  color: var(--farbe-weiss);
}

.bx-icon-kreis[data-icon="minus"] {
  border: 1.5px solid var(--farbe-gedaempft-ring);
  background-color: transparent;
  color: var(--farbe-gedaempft-ring);
}

/*
 * == Ph12 Design-Abgleich (V-E-loesungen-1/-40/-64, Eyebrows der Lösungsseiten) ==
 * Auf den Rollen-, Aufgaben- und Startups-Seiten sind die Abschnitts-Eyebrows im Design grün (Mint-Text);
 * nur der Kostenabschnitt (Heute …) bleibt orange. Navy-Flächen und das Kostenprotokoll behalten ihre Farbe.
 */
main:has(:is(.bx-hero-navy[data-bx-schrift="rolle"], .bx-hero-navy[data-bx-schrift="startups"], .bx-hero-hell[data-bx-variante="aufgabe"]))
  :is(.bx-sektionskopf__eyebrow, .bx-stationen__eyebrow):not(.bx-kostenkarten *, .bx-kostenprotokoll *, [data-flaeche="navy"] *) {
  color: var(--farbe-mint-text);
}

/*
 * == Ph12 Design-Abgleich (V-E-loesungen-52/-70/-106/-132, Textlinks) ==
 * Kopf- und Kartenlinks der Lösungsseiten stehen im Design orange und fett ohne Unterstrich (Hover navy);
 * Orange als Text bleibt #C83000 (Kontrast).
 */
:is(
  .bx-app-rahmen__kopf-link,
  .bx-zahlenkarte__band-linkzeile,
  .bx-rollenkarten__link,
  .bx-faq__offen-antwort .bx-faq__links,
  .bx-faq__aktionen,
  .bx-modell-tabs__links,
  .bx-karten--fakten .bx-karten__links,
  .bx-umzug__link,
  .bx-integrations-kacheln__kopfkarte-link
) .bx-textlink,
.bx-rollenkarten__link.bx-textlink {
  border-bottom: 0;
  color: var(--farbe-orange-text);
}

:is(
  .bx-app-rahmen__kopf-link,
  .bx-zahlenkarte__band-linkzeile,
  .bx-rollenkarten__link,
  .bx-faq__offen-antwort .bx-faq__links,
  .bx-faq__aktionen,
  .bx-modell-tabs__links,
  .bx-karten--fakten .bx-karten__links,
  .bx-umzug__link,
  .bx-integrations-kacheln__kopfkarte-link
) .bx-textlink:hover,
.bx-rollenkarten__link.bx-textlink:hover,
[data-sg-zustand="hover"] :is(
  .bx-app-rahmen__kopf-link,
  .bx-zahlenkarte__band-linkzeile,
  .bx-rollenkarten__link,
  .bx-faq__offen-antwort .bx-faq__links,
  .bx-faq__aktionen,
  .bx-modell-tabs__links,
  .bx-karten--fakten .bx-karten__links,
  .bx-umzug__link,
  .bx-integrations-kacheln__kopfkarte-link
) .bx-textlink,
[data-sg-zustand="hover"] .bx-rollenkarten__link.bx-textlink {
  color: var(--farbe-navy);
}

:is(.bx-modell-tabs__links, .bx-karten--fakten .bx-karten__links) .bx-textlink {
  font-size: var(--schrift-tab-groesse); /* Design 16 px */
}

/*
 * == Ph12 Design-Abgleich (V-E-loesungen-51/-65): Kopf der Rollen-Abschnitte ==
 * Lead 16,5 px / 1,6 (statt Lead-Stufe 18 px), H2 `pretty` statt `balance` (Design: Umbruch „… solange Support und /
 * Verträge getrennt sind“).
 */
:is(.bx-kostenkarten, .bx-app-rahmen, .bx-integrations-kacheln--rolle, .bx-zeitachse--fristen) .bx-sektionskopf__lead {
  font-size: var(--schrift-text-groesse);
  line-height: 1.6; /* Design */
}

:is(.bx-kostenkarten, .bx-app-rahmen, .bx-integrations-kacheln--rolle, .bx-zeitachse--fristen, .bx-rollenkarten) .bx-sektionskopf__titel {
  text-wrap: pretty;
}

/*
 * Ph12 B1, V-B-app-59 (Design Automatisierung v7 Z. 113, 205, 231, 465, 547, 620, 725): größere Überschriften der
 * Sektionsköpfe mit `kopf.titel_stufe` (gross 46 px, xl 50 px, mobil 30 px).
 */
.bx-sektionskopf__titel--gross {
  font-weight: var(--schrift-h2-branche-gewicht);
  font-size: var(--schrift-h2-branche-groesse);
  line-height: var(--schrift-h2-branche-zeile);
  letter-spacing: var(--schrift-h2-branche-laufweite);
}

.bx-sektionskopf__titel--xl {
  font-weight: var(--schrift-h2-xl-gewicht);
  font-size: var(--schrift-h2-xl-groesse);
  line-height: var(--schrift-h2-xl-zeile);
  letter-spacing: var(--schrift-h2-xl-laufweite);
}

@media (width < 768px) {
  .bx-sektionskopf__titel--gross,
  .bx-sektionskopf__titel--xl {
    font-size: var(--schrift-h2-gross-mobil-groesse);
    line-height: var(--schrift-h2-gross-mobil-zeile);
    letter-spacing: var(--schrift-h2-gross-mobil-laufweite);
  }
}

/* Seitenhintergrund nach Design; Pseudo-Elemente bleiben als Rückfall ohne JavaScript. */

/*
 * Formwerte des Designs als Zahlen (Prozent der Formbreite bzw. Pixel), je an einer Stelle: Die Grundregeln setzen sie
 * mit `calc(<Zahl> * 1%)` bzw. `calc(-1 * <Pixel>)` ein, die 2K-Regeln unten rechnen mit denselben Werten.
 */
:root {
  --bx-form-rechts-breite: 56;
  --bx-form-rechts-schraege: 14;
  --bx-form-links-breite: 48;
  --bx-form-klassisch-1-breite: 58;
  --bx-form-klassisch-1-schraege: 10;
  --bx-form-klassisch-2-breite: 46;
  --bx-form-klassisch-4-spitze: 74;
  --bx-form-klassisch-5-breite: 50;
  --bx-glow-links-versatz: 380px;
  --bx-glow-klassisch-2-versatz: 380px;
  --bx-glow-klassisch-3-rechts-versatz: 380px;
  --bx-glow-klassisch-3-links-versatz: 400px;
  --bx-glow-klassisch-4-versatz: 420px;
  --bx-glow-klassisch-5-versatz: 320px;
}

.bx-abschnitt[data-deko="rechts"]::before,
.bx-abschnitt[data-deko="links"]::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Rechts: Form oben rechts, Glow abwechselnd orange und navy; Farbwelt grün färbt den ersten Glow mint */
.bx-abschnitt[data-deko="rechts"]::before {
  right: 0;
  width: calc(var(--bx-form-rechts-breite) * 1%);
  clip-path: polygon(calc(var(--bx-form-rechts-schraege) * 1%) 0, 100% 0, 100% 90%);
  background:
    radial-gradient(closest-side, var(--farbe-glow-orange), var(--farbe-glow-orange-aus)) 160px -140px / 960px 800px no-repeat,
    var(--farbe-flaeche-kachel);
}

.bx-abschnitt:nth-child(even of [data-deko="rechts"])::before {
  background:
    radial-gradient(closest-side, var(--farbe-glow-navy), var(--farbe-glow-navy-aus)) 160px -140px / 960px 800px no-repeat,
    var(--farbe-flaeche-kachel);
}

.bx-hintergrund[data-farbwelt="gruen"] ~ .bx-ebene .bx-abschnitt:nth-child(odd of [data-deko="rechts"])::before {
  background:
    radial-gradient(closest-side, var(--farbe-glow-mint-gruenwelt), var(--farbe-glow-mint-aus)) 160px -140px / 960px 800px no-repeat,
    var(--farbe-flaeche-kachel);
}

/* Links: Dreieck, Glow mint; die Position 30 % + 240 px setzt den Glow auf 30 % der Abschnittshöhe */
.bx-abschnitt[data-deko="links"]::before {
  left: 0;
  width: calc(var(--bx-form-links-breite) * 1%);
  clip-path: polygon(0 0, 100% 58%, 0 100%);
  background:
    radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus)) calc(-1 * var(--bx-glow-links-versatz)) calc(30% + 240px) / 960px 800px no-repeat,
    var(--farbe-flaeche-zart);
}

/* Die Ebene ist ein Geschwister des Seiteninhalts; dunkle Bänder liegen vollständig davor. */
.bx-kasten { position: relative; }
.bx-hintergrund {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  --bx-glow-akzent: var(--farbe-glow-orange);
  --bx-glow-akzent-aus: var(--farbe-glow-orange-aus);
  --bx-glow-zweit: var(--farbe-glow-orange-hintergrund);
}
.bx-hintergrund[data-farbwelt="gruen"] {
  --bx-glow-akzent: var(--farbe-glow-mint-gruenwelt);
  --bx-glow-akzent-aus: var(--farbe-glow-mint-aus);
  --bx-glow-zweit: var(--farbe-glow-mint-hintergrund);
}
.bx-hintergrund[data-aktiv="true"] ~ .bx-ebene .bx-abschnitt::before { content: none; }
.bx-hintergrund__form { position: absolute; }
.bx-hintergrund__glow {
  position: absolute;
  width: 960px;
  height: 800px;
  background: radial-gradient(closest-side, var(--bx-glow-akzent), var(--bx-glow-akzent-aus));
  /* Stärke der Seite (hintergrund_glowstaerke, höchstens 1): Deckkraft statt relativer Farbsyntax, damit alle
     aktuellen Browser inklusive Safari die Glows zeigen */
  opacity: var(--bx-glowstaerke, 1);
}
.bx-hintergrund__form--rechts {
  right: 0;
  width: calc(var(--bx-form-rechts-breite) * 1%);
  clip-path: polygon(calc(var(--bx-form-rechts-schraege) * 1%) 0, 100% 0, 100% 90%);
  background: var(--farbe-flaeche-kachel);
}
.bx-hintergrund__form--rechts .bx-hintergrund__glow { left: 160px; top: -140px; } /* Design */
.bx-hintergrund__form--rechts[data-glow="navy"] .bx-hintergrund__glow {
  background: radial-gradient(closest-side, var(--farbe-glow-navy), var(--farbe-glow-navy-aus));
}
.bx-hintergrund__form--links {
  left: 0;
  width: calc(var(--bx-form-links-breite) * 1%);
  clip-path: polygon(0 0, 100% 58%, 0 100%);
  background: var(--farbe-flaeche-zart);
}
.bx-hintergrund__form--links .bx-hintergrund__glow {
  left: calc(-1 * var(--bx-glow-links-versatz));
  top: 30%;
  background: radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus));
}
.bx-hintergrund__form--klassisch-1 {
  top: 0; right: 0; width: calc(var(--bx-form-klassisch-1-breite) * 1%); height: clamp(520px, 32%, 1500px);
  background: var(--farbe-flaeche-kachel); clip-path: polygon(calc(var(--bx-form-klassisch-1-schraege) * 1%) 0, 100% 0, 100% 92%);
}
.bx-hintergrund__form--klassisch-1 .bx-hintergrund__glow { left: 180px; top: -140px; width: 1000px; height: 840px; } /* Design */
.bx-hintergrund__form--klassisch-2 {
  top: 9%; left: 0; width: calc(var(--bx-form-klassisch-2-breite) * 1%); height: clamp(520px, 32%, 1500px);
  background: var(--farbe-flaeche-zart); clip-path: polygon(0 0, 100% 60%, 0 100%);
}
.bx-hintergrund__form--klassisch-2 .bx-hintergrund__glow {
  left: calc(-1 * var(--bx-glow-klassisch-2-versatz)); top: 380px; width: 1020px; height: 860px; /* Design */
  background: radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus));
}
.bx-hintergrund__form--klassisch-3 {
  top: 58%; left: 0; width: 100%; height: clamp(560px, 34%, 1600px);
  background: var(--farbe-flaeche-hintergrund-diagonal); clip-path: polygon(100% 0, 100% 48%, 0 100%, 0 64%);
}
.bx-hintergrund__form--klassisch-3 .bx-hintergrund__glow:first-child {
  right: calc(-1 * var(--bx-glow-klassisch-3-rechts-versatz)); top: calc(-1 * var(--abstand-90)); width: 1000px; height: 860px;
  background: radial-gradient(closest-side, var(--bx-glow-zweit), var(--bx-glow-akzent-aus));
}
.bx-hintergrund__form--klassisch-3 .bx-hintergrund__glow:last-child {
  left: calc(-1 * var(--bx-glow-klassisch-3-links-versatz)); top: 880px; width: 1040px; height: 860px; /* Design */
  background: radial-gradient(closest-side, var(--farbe-glow-navy-hintergrund), var(--farbe-glow-navy-aus));
}
.bx-hintergrund__form--klassisch-4 {
  bottom: 7%; left: 0; width: 100%; height: clamp(600px, 38%, 1800px);
  background: var(--farbe-flaeche-kachel); clip-path: polygon(0 26%, calc(var(--bx-form-klassisch-4-spitze) * 1%) 100%, 0 100%);
}
.bx-hintergrund__form--klassisch-4 .bx-hintergrund__glow {
  left: calc(-1 * var(--bx-glow-klassisch-4-versatz)); top: 850px; width: 1060px; height: 900px; /* Design */
  background: radial-gradient(closest-side, var(--bx-glow-zweit), var(--bx-glow-akzent-aus));
}
.bx-hintergrund__form--klassisch-5 {
  bottom: 6%; right: 0; width: calc(var(--bx-form-klassisch-5-breite) * 1%); height: clamp(420px, 24%, 1100px);
  background: var(--farbe-flaeche-hintergrund-ende); clip-path: polygon(100% 4%, 100% 100%, 0 100%);
}
.bx-hintergrund__form--klassisch-5 .bx-hintergrund__glow {
  right: calc(-1 * var(--bx-glow-klassisch-5-versatz)); top: 380px; width: 960px; height: 820px; /* Design */
  background: radial-gradient(closest-side, var(--farbe-glow-navy), var(--farbe-glow-navy-aus));
}
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-1 { height: 1500px; }
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-2 { top: 420px; height: 1500px; } /* Design */
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-3 { top: 2900px; height: 1600px; } /* Design */
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-4 { bottom: 360px; height: 1800px; } /* Design */
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-5 { bottom: 300px; height: 1100px; } /* Design */

/*
 * 2K und größer (Rahmen breiter als die Kastenbreite): Jede Form behält ihre Gestalt wie bei 1440 px und wird nur zum
 * Fensterrand hin verlängert, nicht aufgeblasen. Der mittlere Bereich von 1440 px bleibt Punkt für Punkt gleich; außen
 * setzt jede Form ihre Randkante waagerecht fort (Fünfeck statt Dreieck). --bx-rand-extra ist die halbe Mehrbreite
 * (basis.css); --bx-form-b die Formbreite bei 1440 px. Die Regeln greifen nur an der Seitenebene (Hintergrund als Kind des Kastens, Abschnitte direkt unter `main`), nicht in
 * den Musterbühnen des Styleguides, wo --bx-rand-extra von außen geerbt würde. Glows behalten Größe und Lage zur Form, rand-gebundene
 * Glows rücken um die Mehrbreite mit.
 */
@media (width > 1440px) {
  .bx-ebene > main > .bx-abschnitt[data-deko="rechts"]::before {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-rechts-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(calc(var(--bx-form-b) * var(--bx-form-rechts-schraege) / 100) 0, 100% 0, 100% 90%, var(--bx-form-b) 90%);
  }

  .bx-ebene > main > .bx-abschnitt[data-deko="links"]::before {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-links-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(0 0, var(--bx-rand-extra) 0, 100% 58%, var(--bx-rand-extra) 100%, 0 100%);
    background:
      radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus)) calc(var(--bx-rand-extra) - var(--bx-glow-links-versatz)) calc(30% + 240px) / 960px 800px no-repeat,
      var(--farbe-flaeche-zart);
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--rechts {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-rechts-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(calc(var(--bx-form-b) * var(--bx-form-rechts-schraege) / 100) 0, 100% 0, 100% 90%, var(--bx-form-b) 90%);
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--links {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-links-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(0 0, var(--bx-rand-extra) 0, 100% 58%, var(--bx-rand-extra) 100%, 0 100%);
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--links .bx-hintergrund__glow { left: calc(var(--bx-rand-extra) - var(--bx-glow-links-versatz)); }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-1 {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-klassisch-1-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(calc(var(--bx-form-b) * var(--bx-form-klassisch-1-schraege) / 100) 0, 100% 0, 100% 92%, var(--bx-form-b) 92%);
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-2 {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-klassisch-2-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(0 0, var(--bx-rand-extra) 0, 100% 60%, var(--bx-rand-extra) 100%, 0 100%);
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-2 .bx-hintergrund__glow { left: calc(var(--bx-rand-extra) - var(--bx-glow-klassisch-2-versatz)); }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-3 {
    clip-path: polygon(
      0 64%, var(--bx-rand-extra) 64%, calc(100% - var(--bx-rand-extra)) 0, 100% 0,
      100% 48%, calc(100% - var(--bx-rand-extra)) 48%, var(--bx-rand-extra) 100%, 0 100%
    );
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-3 .bx-hintergrund__glow:first-child { right: calc(var(--bx-rand-extra) - var(--bx-glow-klassisch-3-rechts-versatz)); }
  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-3 .bx-hintergrund__glow:last-child { left: calc(var(--bx-rand-extra) - var(--bx-glow-klassisch-3-links-versatz)); }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-4 {
    clip-path: polygon(
      0 26%, var(--bx-rand-extra) 26%,
      calc(var(--bx-rand-extra) + var(--kasten-breite) * var(--bx-form-klassisch-4-spitze) / 100) 100%, 0 100%
    );
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-4 .bx-hintergrund__glow { left: calc(var(--bx-rand-extra) - var(--bx-glow-klassisch-4-versatz)); }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-5 {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-klassisch-5-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(var(--bx-form-b) 4%, 100% 4%, 100% 100%, 0 100%);
  }

  .bx-kasten > .bx-hintergrund .bx-hintergrund__form--klassisch-5 .bx-hintergrund__glow { right: calc(var(--bx-rand-extra) - var(--bx-glow-klassisch-5-versatz)); }
}

/*
 * Rahmenteil „seitenkopf“ (Teilplan B1 §4, §8.1): klebende Leiste mit Logo, Hauptpunkten, Mega-Panels, rechter Gruppe
 * und Burger. Alle Werte aus tokens.css (E24); Maße ohne Token stehen so im Design. Bezugsrahmen für Panels, Burger-Blatt,
 * Suchpanel und Schleier ist die Leiste (position: relative); zwischen Leiste und Panels trägt kein Element eine position
 * außer static und kein overflow außer visible (N2-30, N2-52). Der Schleier ist das erste Kind der Leiste und liegt
 * durch die DOM-Reihenfolge unter den Panels, ohne z-index (N2-64, N2-69).
 */

/* Hülle: klebt oben, reserviert die Höhe der Leiste in Ruhe (kein Sprung beim Kompaktmodus), lässt Klicks im
   durchsichtigen Streifen unter der kompakten Leiste durch (E6) */
.bx-seitenkopf {
  position: sticky;
  top: 0;
  z-index: 40;
  min-block-size: var(--kopf-hoehe);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  pointer-events: none;
}

/* Rahmenbeispiele im Styleguide kleben nicht und kennen keinen Kompaktmodus per Scrollen */
.bx-seitenkopf[data-beispiel] {
  position: relative;
}

.bx-seitenkopf__leiste {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-32);
  padding-block: var(--abstand-kopf-y);
  padding-inline: var(--seitenrand);
  border-bottom: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-kopf);
  pointer-events: auto;
  transition:
    padding var(--bewegung-kopf-dauer) var(--bewegung-kopf-kurve),
    box-shadow var(--bewegung-kopf-dauer) var(--bewegung-kopf-kurve);
}

.bx-seitenkopf[data-kompakt] .bx-seitenkopf__leiste {
  padding-block: var(--abstand-kopf-y-kompakt);
  box-shadow: var(--schatten-kopf-kompakt);
}

/* Schleier unter der Leiste über der Seite; nur mit JavaScript sichtbar (hidden) */
.bx-seitenkopf__schleier {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  block-size: 100vh;
  background-color: var(--farbe-schleier);
  backdrop-filter: blur(1.5px) saturate(0.95);
  pointer-events: auto;
  animation: bx-seitenkopf-schleier var(--bewegung-panel-dauer) ease-out;
}

@keyframes bx-seitenkopf-schleier {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes bx-seitenkopf-ein {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bx-seitenkopf__logo {
  display: flex;
  flex: none;
}

.bx-seitenkopf__logo img {
  display: block;
  inline-size: auto;
  block-size: var(--kopf-logo-hoehe);
  transition: block-size var(--bewegung-kopf-dauer) var(--bewegung-kopf-kurve);
}

.bx-seitenkopf[data-kompakt] .bx-seitenkopf__logo img {
  block-size: var(--kopf-logo-hoehe-kompakt);
}

/* Hauptpunkte (Desktop) */
.bx-seitenkopf__navigation {
  flex: none;
}

.bx-seitenkopf__punkte,
.bx-seitenkopf__eintraege,
.bx-seitenkopf__intro-links,
.bx-seitenkopf__schnellzugriff ul,
.bx-seitenkopf__gruppe ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-seitenkopf__punkte {
  display: flex;
  gap: var(--abstand-34);
}

.bx-seitenkopf__punkt-knopf,
.bx-seitenkopf__punkt-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3.4px; /* Design: Leerzeichen (3,1 px) vor dem Zeichen „▾“ plus dessen Vorlauf */
  min-block-size: 40px;
  color: var(--farbe-navy);
  font-weight: var(--schrift-menue-punkt-gewicht);
  font-size: var(--schrift-menue-punkt-groesse);
  line-height: var(--schrift-menue-punkt-zeile);
  letter-spacing: var(--schrift-menue-punkt-laufweite);
  list-style: none;
  cursor: pointer;
}

.bx-seitenkopf__punkt-knopf::-webkit-details-marker,
.bx-seitenkopf__gruppe-knopf::-webkit-details-marker,
.bx-seitenkopf__burger-knopf::-webkit-details-marker {
  display: none;
}

.bx-seitenkopf__winkel {
  position: relative;
  /* Mitte des Zeichens 2,35 px unter der Mitte der Textzeile (Grundlinie), in jedem Zustand gleich grau (Design) */
  inset-block-start: 2.35px; /* Design */
  flex: none;
  color: var(--farbe-mikrotext);
  transition: transform var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve);
}

.bx-seitenkopf__punkt[open] .bx-seitenkopf__winkel {
  transform: rotate(180deg);
}

/* aktiver oder geöffneter Hauptpunkt: orange Text, Unterstrich als Grafik */
.bx-seitenkopf__punkt[open] > .bx-seitenkopf__punkt-knopf,
.bx-seitenkopf__punkt[data-aktiv] > .bx-seitenkopf__punkt-knopf,
.bx-seitenkopf__punkt-link[data-aktiv] {
  color: var(--farbe-orange-text);
}

.bx-seitenkopf__punkt[open] > .bx-seitenkopf__punkt-knopf::after,
.bx-seitenkopf__punkt[data-aktiv] > .bx-seitenkopf__punkt-knopf::after,
.bx-seitenkopf__punkt-link[data-aktiv]::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: calc(-1px - var(--abstand-kopf-y)); /* Design */
  block-size: 3px;
  border-radius: var(--radius-mini) var(--radius-mini) 0 0;
  background-color: var(--farbe-orange-flaeche);
  transition: bottom var(--bewegung-kopf-dauer) var(--bewegung-kopf-kurve);
}

.bx-seitenkopf[data-kompakt] .bx-seitenkopf__punkt[open] > .bx-seitenkopf__punkt-knopf::after,
.bx-seitenkopf[data-kompakt] .bx-seitenkopf__punkt[data-aktiv] > .bx-seitenkopf__punkt-knopf::after,
.bx-seitenkopf[data-kompakt] .bx-seitenkopf__punkt-link[data-aktiv]::after {
  bottom: calc(-1px - var(--abstand-kopf-y-kompakt)); /* Design */
}

/* Rechte Gruppe: Suche (B3), Sprach-Toggle, Login, CTA */
.bx-seitenkopf__aktionen {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--abstand-20);
  min-inline-size: 0;
}

.bx-seitenkopf__suche {
  display: flex;
  align-items: center;
}

.bx-seitenkopf__sprache,
.bx-seitenkopf__login {
  flex: none;
  color: var(--farbe-navy);
  white-space: nowrap;
}

.bx-seitenkopf__sprache {
  font-weight: var(--schrift-menue-link-gewicht);
  font-size: var(--schrift-menue-link-groesse);
  line-height: var(--schrift-menue-link-zeile);
  letter-spacing: var(--schrift-menue-link-laufweite);
}

.bx-seitenkopf__login {
  font-weight: var(--schrift-kopf-cta-gewicht);
  font-size: var(--schrift-kopf-cta-groesse);
  line-height: var(--schrift-kopf-cta-zeile);
  letter-spacing: var(--schrift-kopf-cta-laufweite);
}

.bx-seitenkopf__sprache:hover,
.bx-seitenkopf__login:hover {
  color: var(--farbe-orange-text);
}

.bx-seitenkopf__cta {
  flex: none;
  padding: var(--abstand-11) var(--abstand-22);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-kopf-cta-gewicht);
  font-size: var(--schrift-kopf-cta-groesse);
  line-height: var(--schrift-kopf-cta-zeile);
  letter-spacing: var(--schrift-kopf-cta-laufweite);
  white-space: nowrap;
  transition: padding var(--bewegung-kopf-dauer) var(--bewegung-kopf-kurve),
    font-size var(--bewegung-kopf-dauer) var(--bewegung-kopf-kurve),
    background-color var(--bewegung-dauer-kurz);
}

.bx-seitenkopf__cta:hover {
  background-color: var(--farbe-orange-hover);
  color: var(--farbe-weiss);
}

.bx-seitenkopf[data-kompakt] .bx-seitenkopf__cta {
  padding: var(--abstand-8) var(--abstand-17);
  font-weight: var(--schrift-kopf-cta-kompakt-gewicht);
  font-size: var(--schrift-kopf-cta-kompakt-groesse);
  line-height: var(--schrift-kopf-cta-kompakt-zeile);
  letter-spacing: var(--schrift-kopf-cta-kompakt-laufweite);
}

/* Mega-Panel: hängt an der Leiste, mittig unter ihr, 16 px Abstand; die Lücke gehört zum Panel (::before), damit der
   Zeiger auf dem Weg zum Panel nicht über den Schleier läuft */
.bx-seitenkopf__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  inline-size: 1060px;
  max-inline-size: calc(100% - 2 * var(--seitenrand));
  margin: var(--abstand-16) auto 0;
  border: 1px solid var(--farbe-linie-sektion);
  border-radius: var(--radius-panel);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-panel);
  animation: bx-seitenkopf-ein var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve);
}

.bx-seitenkopf__panel::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: calc(-1 * var(--abstand-16));
  block-size: 16px;
}

.bx-seitenkopf__panel--produkt {
  inline-size: 1060px;
}

.bx-seitenkopf__panel--loesungen {
  inline-size: 980px;
}

.bx-seitenkopf__panel--ressourcen {
  inline-size: 1140px;
}

/* Pfeil unter dem Hauptpunkt; die Lage setzt kopf.js, ohne JavaScript entfällt er */
.bx-seitenkopf__pfeil {
  display: none;
  position: absolute;
  top: calc(-1 * var(--abstand-8));
  left: var(--bx-seitenkopf-pfeil, 0);
  inline-size: 14px;
  block-size: 14px;
  border-top: 1px solid var(--farbe-linie-sektion);
  border-left: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-weiss);
  transform: rotate(45deg);
}

.bx-seitenkopf[data-bx-gestartet~="kopf"] .bx-seitenkopf__pfeil {
  display: block;
}

.bx-seitenkopf__raster {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.bx-seitenkopf__panel--produkt .bx-seitenkopf__raster {
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr) minmax(0, 252px);
}

.bx-seitenkopf__panel--loesungen .bx-seitenkopf__raster {
  gap: var(--abstand-30);
  padding: var(--abstand-28) var(--abstand-30) var(--abstand-4);
}

.bx-seitenkopf__panel--ressourcen .bx-seitenkopf__raster {
  gap: var(--abstand-30);
  padding: var(--abstand-28) var(--abstand-30);
}

.bx-seitenkopf__panel--mit-teaser .bx-seitenkopf__raster {
  grid-template-columns: minmax(0, 250px);
}

/* Intro (Produkt) */
.bx-seitenkopf__intro {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-28) var(--abstand-26);
  border-inline-end: 1px solid var(--farbe-linie-sektion);
  border-start-start-radius: var(--radius-panel);
  background-color: var(--farbe-flaeche-hell);
}

.bx-seitenkopf__intro-titel {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-navy);
  font-weight: var(--schrift-menue-intro-titel-gewicht);
  font-size: var(--schrift-menue-intro-titel-groesse);
  line-height: var(--schrift-menue-intro-titel-zeile);
  letter-spacing: var(--schrift-menue-intro-titel-laufweite);
}

.bx-seitenkopf__intro-text {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-menue-intro-text-gewicht);
  font-size: var(--schrift-menue-intro-text-groesse);
  line-height: var(--schrift-menue-intro-text-zeile);
  letter-spacing: var(--schrift-menue-intro-text-laufweite);
}

.bx-seitenkopf__intro-links {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-12);
  margin-block-start: auto;
  padding-block-start: var(--abstand-34);
  /* die Links sind inline: Zeile der Liste = Zeile ihrer Rolle, nicht die des Fließtexts (E3-1, N2-82) */
  font-size: var(--schrift-menue-aktion-groesse);
  line-height: var(--schrift-menue-aktion-zeile);
}

.bx-seitenkopf__intro-link,
.bx-seitenkopf__teaser-link,
.bx-seitenkopf__free {
  color: var(--farbe-orange-text);
  font-weight: var(--schrift-menue-aktion-gewicht);
  font-size: var(--schrift-menue-aktion-groesse);
  line-height: var(--schrift-menue-aktion-zeile);
  letter-spacing: var(--schrift-menue-aktion-laufweite);
}

.bx-seitenkopf__intro-link:hover,
.bx-seitenkopf__teaser-link:hover,
.bx-seitenkopf__free:hover {
  color: var(--farbe-orange-hover);
}

.bx-seitenkopf__intro-link[data-ton="mint"] {
  color: var(--farbe-gruen);
}

.bx-seitenkopf__intro-link[data-ton="mint"]:hover {
  color: var(--farbe-gruen-text);
}

/* Teaser (Ressourcen), ohne Bild */
.bx-seitenkopf__teaser {
  padding-inline-end: var(--abstand-28);
  border-inline-end: 1px solid var(--farbe-linie-sektion);
}

.bx-seitenkopf__teaser-label {
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-menue-teaser-label-gewicht);
  font-size: var(--schrift-menue-teaser-label-groesse);
  line-height: var(--schrift-menue-teaser-label-zeile);
  letter-spacing: var(--schrift-menue-teaser-label-laufweite);
  text-transform: uppercase;
}

.bx-seitenkopf__teaser-titel,
.bx-seitenkopf__promo-titel {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-navy);
  font-weight: var(--schrift-menue-teaser-titel-gewicht);
  font-size: var(--schrift-menue-teaser-titel-groesse);
  line-height: var(--schrift-menue-teaser-titel-zeile);
  letter-spacing: var(--schrift-menue-teaser-titel-laufweite);
}

/* Spalten; die Zeile des Spaltenkopfs (inline-flex) gibt die Rolle „textlink“ vor, nicht der Fließtext (E3-1, N2-82) */
.bx-seitenkopf__spalte {
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
}

.bx-seitenkopf__panel--produkt .bx-seitenkopf__spalte {
  padding: var(--abstand-26) var(--abstand-28);
}

.bx-seitenkopf__panel--produkt .bx-seitenkopf__spalte + .bx-seitenkopf__spalte {
  padding-inline-start: var(--abstand-6);
}

.bx-seitenkopf__spalten-kopf {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-6);
  margin-block-end: var(--abstand-18);
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
}

.bx-seitenkopf__spalten-kopf:hover {
  color: var(--farbe-orange-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bx-seitenkopf__spalten-titel {
  margin: 0 0 var(--abstand-16);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-menue-label-gewicht);
  font-size: var(--schrift-menue-label-groesse);
  line-height: var(--schrift-menue-label-zeile);
  letter-spacing: var(--schrift-menue-label-laufweite);
  text-transform: uppercase;
}

.bx-seitenkopf__spalte[data-ton="blau"] .bx-seitenkopf__spalten-titel {
  color: var(--farbe-blau);
}

.bx-seitenkopf__spalte[data-ton="grau"] .bx-seitenkopf__spalten-titel {
  color: var(--farbe-mikrotext);
}

.bx-seitenkopf__spalte[data-ton="mint"] .bx-seitenkopf__spalten-titel {
  color: var(--farbe-mint-text);
}

.bx-seitenkopf__eintraege {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Design */
}

.bx-seitenkopf__eintrag,
.bx-seitenkopf__gruppe-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: var(--farbe-navy);
  overflow-wrap: break-word;
}

.bx-seitenkopf__eintrag {
  margin-inline: calc(-1 * var(--abstand-10));
  padding: var(--abstand-8) var(--abstand-10);
  border-radius: var(--radius-eingabe);
}

.bx-seitenkopf__eintrag:hover {
  background-color: var(--farbe-flaeche-zart);
  color: var(--farbe-navy);
}

/* mit Icon: Kachel links über beide Zeilen */
.bx-seitenkopf__eintrag:has(> .bx-seitenkopf__icon) {
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: var(--abstand-13);
  padding-block: var(--abstand-9);
}

.bx-seitenkopf__eintrag:has(> .bx-seitenkopf__icon) > .bx-seitenkopf__eintrag-titel,
.bx-seitenkopf__eintrag:has(> .bx-seitenkopf__icon) > .bx-seitenkopf__eintrag-unterzeile {
  grid-column: 2;
}

.bx-seitenkopf__eintrag-titel {
  display: block;
  font-weight: var(--schrift-menue-eintrag-gewicht);
  font-size: var(--schrift-menue-eintrag-groesse);
  line-height: var(--schrift-menue-eintrag-zeile);
  letter-spacing: var(--schrift-menue-eintrag-laufweite);
}

.bx-seitenkopf__eintrag-unterzeile {
  display: block;
  margin-block-start: 1px; /* Design: Einträge ohne Icon 1 px (NZ2-1, E3-8) */
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-menue-beschreibung-gewicht);
  font-size: var(--schrift-menue-beschreibung-groesse);
  line-height: var(--schrift-menue-beschreibung-zeile);
  letter-spacing: var(--schrift-menue-beschreibung-laufweite);
}

/* bei Einträgen mit Icon (Panel Produkt) 2 px unter dem Titel (Design) */
.bx-seitenkopf__eintrag:has(> .bx-seitenkopf__icon) > .bx-seitenkopf__eintrag-unterzeile {
  margin-block-start: 2px; /* Design */
}

.bx-seitenkopf__icon {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-kachel);
  background-color: var(--farbe-icon-navy);
  color: var(--farbe-navy);
}

.bx-seitenkopf__icon[data-ton="mint"] {
  background-color: var(--farbe-icon-mint);
  color: var(--farbe-gruen);
}

.bx-seitenkopf__icon[data-ton="orange"] {
  background-color: var(--farbe-icon-orange);
  color: var(--farbe-orange-text);
}

/* Fußzeile der Spalte (Integrationen mit Kurzliste) */
.bx-seitenkopf__fusszeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-11);
  margin-block-start: var(--abstand-18);
  padding-block-start: var(--abstand-15);
  border-top: 1px solid var(--farbe-linie-sektion);
  color: var(--farbe-navy);
}

.bx-seitenkopf__fusszeile .bx-seitenkopf__icon {
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-kachel-klein);
}

.bx-seitenkopf__fusszeile .bx-seitenkopf__eintrag-titel {
  font-weight: var(--schrift-menue-link-gewicht);
  font-size: var(--schrift-menue-link-groesse);
  line-height: var(--schrift-menue-link-zeile);
  letter-spacing: var(--schrift-menue-link-laufweite);
  white-space: nowrap;
}

.bx-seitenkopf__fusszeile .bx-seitenkopf__eintrag-unterzeile {
  margin: 0;
}

/* Promo Startups */
.bx-seitenkopf__promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--abstand-18);
  margin: var(--abstand-20) var(--abstand-30) var(--abstand-24);
  padding: var(--abstand-16) var(--abstand-18);
  border: 1px solid var(--farbe-mint-rand);
  border-radius: var(--radius-promo);
  background-color: var(--farbe-mint-flaeche);
}

.bx-seitenkopf__promo-titel {
  grid-column: 1;
  margin: 0;
}

.bx-seitenkopf__promo-text,
.bx-seitenkopf__promo-zusatz { /* zweite Zeile der Promo, Design Seitenkopf Z. 213 */
  grid-column: 1;
  margin: 3px 0 0; /* Design */
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-menue-beschreibung-gewicht);
  font-size: var(--schrift-menue-beschreibung-groesse);
  line-height: var(--schrift-menue-beschreibung-zeile);
  letter-spacing: var(--schrift-menue-beschreibung-laufweite);
}

.bx-seitenkopf__promo-link {
  grid-column: 2;
  grid-row: 1 / span 3; /* Titel, Text, Zusatz – eine leere Zeile hat die Höhe 0 */
  padding: var(--abstand-10) var(--abstand-18);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-gruen);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-menue-promo-button-gewicht);
  font-size: var(--schrift-menue-promo-button-groesse);
  line-height: var(--schrift-menue-promo-button-zeile);
  letter-spacing: var(--schrift-menue-promo-button-laufweite);
  white-space: nowrap;
}

.bx-seitenkopf__promo-link:hover {
  background-color: var(--farbe-gruen-text);
  color: var(--farbe-weiss);
}

/* Schnellzugriff mit Free-CTA */
.bx-seitenkopf__schnellzugriff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-8) var(--abstand-24);
  padding: var(--abstand-14) var(--abstand-28);
  border-top: 1px solid var(--farbe-linie-sektion);
  border-end-start-radius: var(--radius-panel);
  border-end-end-radius: var(--radius-panel);
  background-color: var(--farbe-flaeche-hell);
}

.bx-seitenkopf__panel--loesungen .bx-seitenkopf__schnellzugriff,
.bx-seitenkopf__panel--ressourcen .bx-seitenkopf__schnellzugriff {
  padding-inline: var(--abstand-30);
}

.bx-seitenkopf__label {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-menue-label-gewicht);
  font-size: var(--schrift-menue-label-groesse);
  line-height: var(--schrift-menue-label-zeile);
  letter-spacing: var(--schrift-menue-label-laufweite);
  text-transform: uppercase;
}

.bx-seitenkopf__schnellzugriff ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-8) var(--abstand-24);
  /* inline-Links: Zeile der Liste = Zeile der Rolle „menue-link“ (E3-1, N2-82) */
  font-size: var(--schrift-menue-link-groesse);
  line-height: var(--schrift-menue-link-zeile);
}

.bx-seitenkopf__schnellzugriff-link {
  color: var(--farbe-navy);
  font-weight: var(--schrift-menue-link-gewicht);
  font-size: var(--schrift-menue-link-groesse);
  line-height: var(--schrift-menue-link-zeile);
  letter-spacing: var(--schrift-menue-link-laufweite);
}

.bx-seitenkopf__free {
  margin-inline-start: auto;
}

/* Burger: unter der Stufe „burger“ statt Hauptpunkten und rechter Gruppe */
.bx-seitenkopf__burger {
  display: block;
  /* Der Knopf ragt um 8 px in den Seitenrand; der Rand liegt am details, damit dessen Box so breit ist wie der Knopf */
  margin-inline-end: calc(-1 * var(--abstand-8));
}

@media (width >= 1000px) {
  .bx-seitenkopf__burger {
    display: none;
  }
}

@media (width < 1000px) {
  .bx-seitenkopf__navigation,
  .bx-seitenkopf__aktionen {
    display: none;
  }
}

.bx-seitenkopf__burger-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block: -2px; /* Design */
  border-radius: var(--radius-eingabe);
  list-style: none;
  cursor: pointer;
}

.bx-seitenkopf__burger-icon {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-5);
}

.bx-seitenkopf__burger-icon > span {
  display: block;
  inline-size: 22px;
  block-size: 2px;
  border-radius: var(--radius-mini);
  background-color: var(--farbe-navy);
  transition: transform var(--bewegung-kopf-dauer) ease, opacity var(--bewegung-dauer-kurz) ease;
}

.bx-seitenkopf__burger[open] .bx-seitenkopf__burger-icon > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.bx-seitenkopf__burger[open] .bx-seitenkopf__burger-icon > span:nth-child(2) {
  opacity: 0;
}

.bx-seitenkopf__burger[open] .bx-seitenkopf__burger-icon > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ohne JavaScript zeigt das CSS je nach Zustand genau eine der beiden Beschriftungen */
.bx-seitenkopf__burger[open] .bx-seitenkopf__burger-auf {
  display: none;
}

.bx-seitenkopf__burger:not([open]) .bx-seitenkopf__burger-zu {
  display: none;
}

.bx-seitenkopf__blatt {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  max-block-size: calc(100dvh - var(--kopf-hoehe));
  overflow-y: auto;
  /* Fokus-Ring (Versatz 2 px + Breite 2 px = 4 px) bleibt am Rand der Scrollfläche sichtbar (TF-KO-09) */
  scroll-padding-block: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-panel);
  animation: bx-seitenkopf-ein var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve);
}

.bx-seitenkopf__blatt > nav {
  padding: var(--abstand-4) var(--seitenrand) var(--abstand-28);
}

/* mit Eingabe im Burger-Suchfeld zeigt das Blatt nur die Treffer (B3, Design mobilMenue) */
.bx-seitenkopf__blatt:has([data-bx-suchfeld][data-hat-anfrage]) .bx-seitenkopf__gruppen {
  display: none;
}

.bx-seitenkopf__gruppe {
  border-bottom: 1px solid var(--farbe-linie-sektion);
}

.bx-seitenkopf__gruppe-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-16);
  min-block-size: 56px;
  color: var(--farbe-navy);
  font-weight: var(--schrift-burger-gruppe-gewicht);
  font-size: var(--schrift-burger-gruppe-groesse);
  line-height: var(--schrift-burger-gruppe-zeile);
  letter-spacing: var(--schrift-burger-gruppe-laufweite);
  list-style: none;
  cursor: pointer;
}

.bx-seitenkopf__gruppe[data-aktiv] > .bx-seitenkopf__gruppe-knopf,
.bx-seitenkopf__gruppe-preise[data-aktiv] {
  color: var(--farbe-orange-text);
}

/* Plus als Grafik (Orange-Fläche nur als Strich, nie als Textfarbe), dreht im offenen Zustand zum Kreuz */
.bx-seitenkopf__plus {
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  font-size: var(--schrift-burger-plus-groesse);
  line-height: var(--schrift-burger-plus-zeile);
  stroke: var(--farbe-orange-flaeche);
  transform-origin: 69.64% 50%; /* Mitte der Tinte (19,5 von 28), siehe Symbole::plus() */
  transition: transform var(--bewegung-faq-drehen);
}

.bx-seitenkopf__gruppe[open] .bx-seitenkopf__plus {
  transform: rotate(45deg);
}

.bx-seitenkopf__gruppe ul {
  display: flex;
  flex-direction: column;
  padding-block-end: var(--abstand-14);
}

.bx-seitenkopf__gruppe-link {
  padding-block: var(--abstand-10);
}

.bx-seitenkopf__gruppe-link:hover {
  color: var(--farbe-orange-text);
}

.bx-seitenkopf__gruppe-link .bx-seitenkopf__eintrag-titel {
  font-weight: var(--schrift-burger-eintrag-gewicht);
  font-size: var(--schrift-burger-eintrag-groesse);
  line-height: var(--schrift-burger-eintrag-zeile);
  letter-spacing: var(--schrift-burger-eintrag-laufweite);
}

.bx-seitenkopf__gruppe-link .bx-seitenkopf__eintrag-unterzeile {
  margin-block-start: 2px; /* Design: Mobil 2 px */
  font-weight: var(--schrift-burger-beschreibung-gewicht);
  font-size: var(--schrift-burger-beschreibung-groesse);
  line-height: var(--schrift-burger-beschreibung-zeile);
  letter-spacing: var(--schrift-burger-beschreibung-laufweite);
}

.bx-seitenkopf__gruppe-preise {
  display: flex;
  align-items: center;
  min-block-size: 56px;
  border-bottom: 1px solid var(--farbe-linie-sektion);
  color: var(--farbe-navy);
  font-weight: var(--schrift-burger-gruppe-gewicht);
  font-size: var(--schrift-burger-gruppe-groesse);
  line-height: var(--schrift-burger-gruppe-zeile);
  letter-spacing: var(--schrift-burger-gruppe-laufweite);
}

.bx-seitenkopf__blatt-aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-10);
  margin-block-start: var(--abstand-22);
}

.bx-seitenkopf__blatt-cta,
.bx-seitenkopf__blatt-free,
.bx-seitenkopf__blatt-login,
.bx-seitenkopf__blatt-sprache {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  border-radius: var(--radius-pille);
  font-weight: var(--schrift-kopf-cta-gewicht);
  font-size: var(--schrift-kopf-cta-groesse);
  line-height: var(--schrift-kopf-cta-zeile);
  letter-spacing: var(--schrift-kopf-cta-laufweite);
}

.bx-seitenkopf__blatt-cta {
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-seitenkopf__blatt-cta:hover {
  background-color: var(--farbe-orange-hover);
  color: var(--farbe-weiss);
}

.bx-seitenkopf__blatt-free,
.bx-seitenkopf__blatt-login,
.bx-seitenkopf__blatt-sprache {
  border: 1px solid var(--farbe-linie-eingabe);
  color: var(--farbe-navy);
}

/*
 * Baustein „suchfeld“ (Vertrag Ph2 §3.10, §5; Teilplan B3 §5.3, E7, E19, E20): Kopf (eingeklappt, Panel unter der
 * Kopfleiste), Burger (Feld mit Trefferliste) und Seite (GET-Formular). Nur Tokens; Zustände über hidden, data-offen,
 * data-hat-anfrage und aria-selected. Die Wurzel im Kopf bleibt position: static, das Panel bezieht sich auf
 * .bx-seitenkopf__leiste (N2-30, N2-52); das Feld bleibt im Fluss und klappt nach links auf (N2-65).
 */
.bx-suchfeld {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
}

/* Bereichsfarbe je Treffer und Filter (Vertrag Ph2 §5): Punkt und Text */
.bx-suchfeld [data-bereich] {
  --bx-bereich-punkt: var(--farbe-mikrotext);
  --bx-bereich-text: var(--farbe-mikrotext);
}

.bx-suchfeld [data-bereich="produkt"] {
  --bx-bereich-punkt: var(--farbe-bereich-produkt);
  --bx-bereich-text: var(--farbe-bereich-produkt-text);
}

.bx-suchfeld [data-bereich="preise"] {
  --bx-bereich-punkt: var(--farbe-bereich-preise);
  --bx-bereich-text: var(--farbe-bereich-preise);
}

.bx-suchfeld [data-bereich="integrationen"] {
  --bx-bereich-punkt: var(--farbe-bereich-integrationen);
  --bx-bereich-text: var(--farbe-bereich-integrationen);
}

.bx-suchfeld [data-bereich="sicherheit"] {
  --bx-bereich-punkt: var(--farbe-bereich-sicherheit);
  --bx-bereich-text: var(--farbe-bereich-sicherheit);
}

.bx-suchfeld [data-bereich="loesungen"] {
  --bx-bereich-punkt: var(--farbe-bereich-loesungen);
  --bx-bereich-text: var(--farbe-bereich-loesungen);
}

.bx-suchfeld [data-bereich="ressourcen"] {
  --bx-bereich-punkt: var(--farbe-bereich-ressourcen);
  --bx-bereich-text: var(--farbe-bereich-ressourcen);
}

.bx-suchfeld [data-bereich="unternehmen"] {
  --bx-bereich-punkt: var(--farbe-bereich-unternehmen);
  --bx-bereich-text: var(--farbe-bereich-unternehmen);
}

/* ---------- Feld (alle Varianten) ---------- */

.bx-suchfeld__feld {
  position: relative; /* nur für z-index und die Lupe; kein Vorfahr des Panels (N2-65) */
  z-index: 1;
}

.bx-suchfeld__eingabe {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1.5px solid var(--farbe-linie-karte);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-hell);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-suchfeld-gross-gewicht);
  font-size: var(--schrift-suchfeld-gross-groesse);
  line-height: var(--schrift-suchfeld-gross-zeile);
  letter-spacing: var(--schrift-suchfeld-gross-laufweite);
  appearance: none;
  transition:
    width var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve),
    margin var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve),
    padding var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve),
    border-color var(--bewegung-dauer-kurz) var(--bewegung-kurve),
    background-color var(--bewegung-dauer-kurz) var(--bewegung-kurve);
}

.bx-suchfeld__eingabe::-webkit-search-cancel-button,
.bx-suchfeld__eingabe::-webkit-search-decoration {
  appearance: none;
}

.bx-suchfeld__eingabe::placeholder {
  color: var(--farbe-mikrotext);
  opacity: 1;
}

/* Fokus V32 aus basis.css bleibt; zusätzlich der orange Rand (W16, E20), kein Glow */
.bx-suchfeld__eingabe:focus {
  border-color: var(--farbe-orange-flaeche);
  background-color: var(--farbe-weiss);
}

.bx-suchfeld__lupe {
  position: absolute;
  top: 50%;
  right: var(--abstand-12);
  color: var(--farbe-mikrotext);
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---------- Kopf ---------- */

/* Ohne JavaScript unsichtbar, der Platz bleibt reserviert (SU AK10, E7): kein Sprung beim Start */
.bx-suchfeld--kopf[hidden] {
  display: block;
  visibility: hidden;
}

.bx-suchfeld--kopf {
  flex: none;
  width: 40px; /* eingeklappt nur die Lupe (Design) */
}

.bx-suchfeld--kopf .bx-suchfeld__feld {
  width: 40px;
  height: 40px;
  margin-inline-start: auto;
  transition:
    width var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve),
    margin var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve);
}

.bx-suchfeld--kopf .bx-suchfeld__eingabe {
  height: 40px;
  padding: 0;
  color: transparent;
  font-weight: var(--schrift-suchfeld-gewicht);
  font-size: var(--schrift-suchfeld-groesse);
  line-height: var(--schrift-suchfeld-zeile);
  letter-spacing: var(--schrift-suchfeld-laufweite);
  cursor: pointer;
}

/* Offen: 280 px nach links über den reservierten Platz (Design Seitenkopf), im Fluss per negativem Rand */
.bx-suchfeld--kopf[data-offen] .bx-suchfeld__feld,
.bx-suchfeld--kopf .bx-suchfeld__feld:focus-within {
  width: 280px;
  margin-inline-start: -240px; /* Design */
}

.bx-suchfeld--kopf[data-offen] .bx-suchfeld__eingabe,
.bx-suchfeld--kopf .bx-suchfeld__eingabe:focus {
  padding: 0 var(--abstand-36) 0 var(--abstand-14); /* Platz für die Lupe rechts (Design) */
  color: var(--farbe-navy);
  cursor: text;
}

/* lokale Stufe Suchfeld: breit (reservierte Breite 240 px, mit Begriff bleibt das Feld offen) */
@media (width >= 1100px) {
  .bx-suchfeld--kopf {
    flex: 0 1 auto;
    width: 240px;
    min-width: 120px;
  }

  .bx-suchfeld--kopf[data-offen] .bx-suchfeld__feld,
  .bx-suchfeld--kopf[data-hat-anfrage] .bx-suchfeld__feld,
  .bx-suchfeld--kopf .bx-suchfeld__feld:focus-within {
    width: 100%;
    margin-inline-start: 0;
  }

  .bx-suchfeld--kopf[data-hat-anfrage] .bx-suchfeld__eingabe {
    padding: 0 var(--abstand-36) 0 var(--abstand-14);
    color: var(--farbe-navy);
    cursor: text;
  }
}

/* Panel unter der Kopfleiste (Bezugsrahmen .bx-seitenkopf__leiste, N2-30) */
.bx-suchfeld__panel {
  position: absolute;
  top: 100%;
  right: var(--seitenrand);
  box-sizing: border-box;
  width: 760px; /* Seitenkopf (Design) */
  max-width: calc(100vw - 2 * var(--seitenrand));
  margin-top: var(--abstand-10);
  overflow: hidden;
  border: 1px solid var(--farbe-linie-sektion);
  border-radius: var(--radius-panel);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-suchpanel);
  text-align: start;
  animation: bx-suchfeld-panel var(--bewegung-panel-dauer) var(--bewegung-kopf-kurve);
}

@keyframes bx-suchfeld-panel {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* Beispiel im Styleguide: die Bühne schneidet ab (overflow: clip), deshalb steht das Panel dort im Fluss unter dem
   Feld; im echten Kopf liegt es absolut unter der Leiste */
.bx-styleguide__buehne > .bx-suchfeld--beispiel.bx-suchfeld--kopf {
  width: auto;
}

.bx-styleguide__buehne > .bx-suchfeld--beispiel .bx-suchfeld__feld,
.bx-styleguide__buehne > .bx-suchfeld--beispiel[data-offen] .bx-suchfeld__feld,
.bx-styleguide__buehne > .bx-suchfeld--beispiel .bx-suchfeld__feld:focus-within {
  margin-inline-start: auto;
}

.bx-styleguide__buehne > .bx-suchfeld--beispiel[data-offen] .bx-suchfeld__feld,
.bx-styleguide__buehne > .bx-suchfeld--beispiel[data-hat-anfrage] .bx-suchfeld__feld,
.bx-styleguide__buehne > .bx-suchfeld--beispiel .bx-suchfeld__feld:focus-within {
  width: 280px; /* wie im Kopf offen (Design Seitenkopf) */
}

.bx-styleguide__buehne > .bx-suchfeld--beispiel .bx-suchfeld__panel {
  position: static;
  max-width: 100%;
  margin-inline-start: auto;
}

.bx-suchfeld__label {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
  text-transform: uppercase;
}

/* Überschrift der Treffer: nur „Treffer für“ in Versalien, der Begriff wie eingegeben (Design Seitenkopf) */
.bx-suchfeld__label[data-bx-suche-ueberschrift] {
  text-transform: none;
}

.bx-suchfeld__versal {
  text-transform: uppercase;
}

.bx-suchfeld__haeufig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-10);
  padding: var(--abstand-18) var(--abstand-20); /* 18 px oben und unten (Design) */
}

.bx-suchfeld__haeufig .bx-suchfeld__label {
  margin: 0 var(--abstand-4) 0 0;
}

.bx-suchfeld__vorschlaege {
  display: contents;
  list-style: none;
}

.bx-suchfeld__vorschlaege li {
  display: contents;
}

.bx-suchfeld__vorschlag {
  padding: var(--abstand-6) var(--abstand-12);
  border: 0;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-kachel);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-suchpanel-vorschlag-gewicht);
  font-size: var(--schrift-suchpanel-vorschlag-groesse);
  line-height: var(--schrift-suchpanel-vorschlag-zeile);
  letter-spacing: var(--schrift-suchpanel-vorschlag-laufweite);
  cursor: pointer;
}

.bx-suchfeld__vorschlag:hover {
  background-color: var(--farbe-linie-karte);
}

.bx-suchfeld--kopf .bx-suchfeld__ergebnis {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr); /* Filterspalte 200 px (Design) */
}

.bx-suchfeld__bereiche {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Design */
  padding: var(--abstand-18) var(--abstand-16);
  border-right: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-flaeche-hell);
}

.bx-suchfeld__bereich {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  padding: var(--abstand-8) var(--abstand-10);
  border: 0;
  border-radius: var(--radius-kachel);
  background-color: transparent;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-suchpanel-filter-gewicht);
  font-size: var(--schrift-suchpanel-filter-groesse);
  line-height: var(--schrift-suchpanel-filter-zeile);
  letter-spacing: var(--schrift-suchpanel-filter-laufweite);
  text-align: start;
  cursor: pointer;
}

.bx-suchfeld__bereich:hover {
  background-color: var(--farbe-flaeche-kachel);
}

.bx-suchfeld__bereich[aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--bx-bereich-punkt) 8%, transparent);
}

.bx-suchfeld__bereich[data-bx-suche-bereich=""][aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--farbe-navy) 7%, transparent);
}

.bx-suchfeld__punkt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pille);
  background-color: var(--bx-bereich-punkt, var(--farbe-navy));
}

.bx-suchfeld__zahl {
  margin-left: auto;
  padding-left: var(--abstand-10);
  color: var(--bx-bereich-text, var(--farbe-mikrotext));
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-suchfilter-zahl-gewicht);
  font-size: var(--schrift-suchfilter-zahl-groesse);
  line-height: var(--schrift-suchfilter-zahl-zeile);
  letter-spacing: var(--schrift-suchfilter-zahl-laufweite);
}

.bx-suchfeld__treffer {
  min-width: 0;
  padding: var(--abstand-18) var(--abstand-8) var(--abstand-8); /* 20 px (Design), davon 12 px in den Optionen */
}

.bx-suchfeld__treffer > .bx-suchfeld__label,
.bx-suchfeld__treffer > .bx-suchfeld__leer,
.bx-suchfeld__treffer > .bx-suchfeld__fuss {
  margin-inline: var(--abstand-12);
}

.bx-suchfeld__liste {
  display: flex;
  flex-direction: column;
}

.bx-suchfeld__option {
  display: block;
  padding: var(--abstand-11) var(--abstand-12);
  font-size: var(--schrift-suchpfad-groesse); /* Zeile mit dem Pfad (inline): sonst erbt sie 27,2 px Zeilenhöhe */
  line-height: var(--schrift-suchpfad-zeile);
  border-radius: var(--radius-eingabe);
  color: var(--farbe-navy);
  text-decoration: none;
}

.bx-suchfeld__option:hover,
.bx-suchfeld__option[aria-selected="true"] {
  background-color: var(--farbe-flaeche-zart);
  color: var(--farbe-navy);
}

.bx-suchfeld__option[aria-selected="true"] {
  outline: var(--fokus-ring);
  outline-offset: calc(-1 * var(--fokus-versatz));
}

.bx-suchfeld__pfad {
  display: inline;
  color: var(--bx-bereich-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-suchpfad-gewicht);
  font-size: var(--schrift-suchpfad-groesse);
  line-height: var(--schrift-suchpfad-zeile);
  letter-spacing: var(--schrift-suchpfad-laufweite);
  overflow-wrap: anywhere;
}

.bx-suchfeld__extern {
  margin-left: var(--abstand-8);
  padding: 0 var(--abstand-6);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-chip);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-suchpfad-gewicht);
  font-size: var(--schrift-suchpfad-groesse);
  line-height: var(--schrift-suchpfad-zeile);
}

.bx-suchfeld__titel {
  display: block;
  margin-top: 3px; /* Design */
  font-weight: var(--schrift-suchpanel-treffer-titel-gewicht);
  font-size: var(--schrift-suchpanel-treffer-titel-groesse);
  line-height: var(--schrift-suchpanel-treffer-titel-zeile);
  letter-spacing: var(--schrift-suchpanel-treffer-titel-laufweite);
  overflow-wrap: anywhere;
}

.bx-suchfeld__beschreibung {
  display: block;
  margin-top: 3px; /* Design */
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-suchpanel-treffer-beschreibung-gewicht);
  font-size: var(--schrift-suchpanel-treffer-beschreibung-groesse);
  line-height: var(--schrift-suchpanel-treffer-beschreibung-zeile);
  letter-spacing: var(--schrift-suchpanel-treffer-beschreibung-laufweite);
  overflow-wrap: break-word;
}

.bx-suchfeld__leer,
.bx-suchfeld__fehler {
  margin: 0;
  padding: var(--abstand-18) 0 var(--abstand-24);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-suchleer-gewicht);
  font-size: var(--schrift-suchleer-groesse);
  line-height: var(--schrift-suchleer-zeile);
  letter-spacing: var(--schrift-suchleer-laufweite);
}

.bx-suchfeld__panel > .bx-suchfeld__fehler {
  padding: var(--abstand-18) var(--abstand-20);
}

.bx-suchfeld__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-16);
  margin-top: var(--abstand-14);
  padding: var(--abstand-12) 0;
  border-top: 1px solid var(--farbe-flaeche-kachel);
}

.bx-suchfeld__alle {
  color: var(--farbe-orange-text);
  font-weight: var(--schrift-suchpanel-alle-gewicht);
  font-size: var(--schrift-suchpanel-alle-groesse);
  line-height: var(--schrift-suchpanel-alle-zeile);
  letter-spacing: var(--schrift-suchpanel-alle-laufweite);
  text-decoration: none;
}

.bx-suchfeld__alle:hover {
  color: var(--farbe-orange-hover);
}

.bx-suchfeld__tastatur {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-suchpanel-hinweis-gewicht);
  font-size: var(--schrift-suchpanel-hinweis-groesse);
  line-height: var(--schrift-suchpanel-hinweis-zeile);
  letter-spacing: var(--schrift-suchpanel-hinweis-laufweite);
}

/* ---------- Burger ---------- */

.bx-suchfeld--burger {
  margin: var(--abstand-16) 0 var(--abstand-6);
}

.bx-suchfeld--burger .bx-suchfeld__eingabe {
  height: 48px; /* Burger-Feld, Mindestgröße für Touch (Design) */
  padding: 0 var(--abstand-46) 0 var(--abstand-18); /* Wert laut Design: Platz für die Lupe rechts */
}

.bx-suchfeld--burger .bx-suchfeld__lupe,
.bx-suchfeld--seite .bx-suchfeld__lupe {
  right: var(--abstand-18);
}

.bx-suchfeld--burger .bx-suchfeld__ergebnis {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-10) 0 2px; /* Design: 6 px unter dem Feldblock + 4 px Polster der Liste */
}

.bx-suchfeld--burger .bx-suchfeld__option {
  margin: 0;
  padding: var(--abstand-12) 0;
  border-bottom: 1px solid var(--farbe-linie-sektion);
  border-radius: 0;
}

.bx-suchfeld--burger .bx-suchfeld__titel {
  font-weight: var(--schrift-burger-eintrag-gewicht);
  font-size: var(--schrift-burger-eintrag-groesse);
  line-height: var(--schrift-burger-eintrag-zeile);
  letter-spacing: var(--schrift-burger-eintrag-laufweite);
}

.bx-suchfeld--burger .bx-suchfeld__beschreibung {
  margin-top: 2px; /* Design */
  font-weight: var(--schrift-burger-beschreibung-gewicht);
  font-size: var(--schrift-burger-beschreibung-groesse);
  line-height: var(--schrift-burger-beschreibung-zeile);
  letter-spacing: var(--schrift-burger-beschreibung-laufweite);
}

.bx-suchfeld--burger .bx-suchfeld__leer {
  padding: var(--abstand-14) 0;
}

.bx-suchfeld--burger .bx-suchfeld__fuss {
  margin-top: 0;
  padding: 0;
  border-top: 0;
}

.bx-suchfeld--burger .bx-suchfeld__alle {
  display: flex;
  align-items: center;
  min-height: 48px; /* Zielgröße für Touch (Design) */
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
}

/* ---------- Seite (Formular ohne JavaScript) ---------- */

.bx-suchfeld--seite {
  position: relative;
  max-width: 620px; /* Suche (Design) */
}

.bx-suchfeld--seite .bx-suchfeld__eingabe {
  padding: var(--abstand-14) var(--abstand-48) var(--abstand-14) var(--abstand-20); /* Platz für den Knopf rechts (Design) */
  background-color: var(--farbe-weiss);
}

.bx-suchfeld__absenden {
  position: absolute;
  top: 50%;
  right: var(--abstand-6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pille);
  background-color: transparent;
  color: var(--farbe-mikrotext);
  transform: translateY(-50%);
  cursor: pointer;
}

.bx-suchfeld__absenden:hover {
  color: var(--farbe-navy);
}

.bx-suchfeld__absenden .bx-suchfeld__lupe {
  position: static;
  transform: none;
}

/* ---------- Fehlerseite (404, Vertrag Ph3 W31) ---------- */

.bx-suchfeld--fehlerseite {
  max-width: var(--breite-fehler-spalte-max);
  margin: var(--abstand-28) auto 0;
  text-align: left;
}

/* sichtbares Label in Textschrift statt der Mono-Versalien der Panel-Labels */
.bx-suchfeld--fehlerseite .bx-suchfeld__label {
  display: block;
  margin: 0 0 var(--abstand-8);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-feld-label-gewicht);
  font-size: var(--schrift-feld-label-groesse);
  line-height: var(--schrift-feld-label-zeile);
  letter-spacing: var(--schrift-feld-label-laufweite);
  text-transform: none;
}

/* Platz rechts für den runden Knopf (Design 60 px, auch mobil), links die Eingabe-Rolle */
.bx-suchfeld--fehlerseite .bx-suchfeld__eingabe {
  padding: var(--abstand-15) var(--abstand-60) var(--abstand-15) var(--abstand-fehler-eingabe-x);
  border-color: var(--farbe-linie-eingabe);
  background-color: var(--farbe-weiss);
}

.bx-suchfeld--fehlerseite .bx-suchfeld__absenden {
  right: calc(var(--abstand-6) + 1px); /* Design */
  width: 42px;
  height: 42px;
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  transition: background-color var(--bewegung-dauer-kurz) var(--bewegung-kurve);
}

.bx-suchfeld--fehlerseite .bx-suchfeld__absenden .bx-suchfeld__lupe {
  color: inherit;
}

.bx-suchfeld--fehlerseite .bx-suchfeld__absenden:hover {
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

/* hidden gilt auch gegen die display-Regeln oben (Panel-Teile, Ergebnis) */
.bx-suchfeld [hidden] {
  display: none;
}

/*
 * Abschnittstyp „hero-hell“ (Vertrag Ph11 §3.3.1, Teilplan M0a §8.4; Design „Allgemein Aufgaben“, „Allgemein
 * Branchen“, Startseite v6 S1): heller, zentrierter Hero mit Glow, H1 aus dem Seitentitel, Aktionen, Hinweiszeile und
 * Bühne. Glow und Einstieg nur CSS, unter reduzierter Bewegung aus. Stufen nur 768px und 1080px.
 */
.bx-hero-hell {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.bx-hero-hell__brotkrumen {
  position: relative;
  padding: var(--abstand-34) var(--seitenrand) 0;
  text-align: start;
}

.bx-hero-hell__brotkrumen > .bx-brotkrumen {
  padding: 0;
}

.bx-hero-hell__glow {
  position: absolute;
  top: -260px; /* Design */
  left: 50%;
  width: 900px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--farbe-glow-orange-medium), var(--farbe-glow-orange-aus));
  pointer-events: none;
}

.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__glow {
  top: -340px; /* Design */
  width: 1200px;
  height: 860px;
  background: radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus));
}

.bx-hero-hell__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--abstand-40) clamp(var(--abstand-20), 4vw, var(--abstand-56));
}

.bx-hero-hell__eyebrow,
.bx-hero-hell__titel,
.bx-hero-hell__aussage,
.bx-hero-hell__lead,
.bx-hero-hell__hinweis {
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.bx-hero-hell__eyebrow {
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-kicker-gewicht);
  font-size: var(--schrift-kicker-groesse);
  line-height: var(--schrift-kicker-zeile);
  letter-spacing: var(--schrift-kicker-laufweite);
}

.bx-hero-hell[data-bx-variante="aufgabe"] .bx-hero-hell__eyebrow::before {
  content: '\2014\00a0';
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__eyebrow {
  color: var(--farbe-mint-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-menue-teaser-titel-gewicht);
  font-size: var(--schrift-menue-teaser-titel-groesse);
  line-height: var(--schrift-menue-teaser-titel-zeile);
  letter-spacing: var(--schrift-menue-teaser-titel-laufweite);
}

.bx-hero-hell__titel {
  max-width: 940px;
  margin-top: var(--abstand-18);
  color: var(--farbe-navy);
  font-weight: var(--schrift-hero-aufgabe-gewicht);
  font-size: var(--schrift-hero-aufgabe-groesse);
  line-height: var(--schrift-hero-aufgabe-zeile);
  letter-spacing: var(--schrift-hero-aufgabe-laufweite);
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__titel {
  max-width: 1000px;
  font-weight: var(--schrift-hero-branche-gewicht);
  font-size: var(--schrift-hero-branche-groesse);
  line-height: var(--schrift-hero-branche-zeile);
  letter-spacing: var(--schrift-hero-branche-laufweite);
}

.bx-hero-hell[data-bx-titel-stufe="xl"] .bx-hero-hell__titel {
  font-weight: var(--schrift-hero-xl-gewicht);
  font-size: var(--schrift-hero-xl-groesse);
  line-height: var(--schrift-hero-xl-zeile);
  letter-spacing: var(--schrift-hero-xl-laufweite);
}

.bx-hero-hell[data-bx-titel-stufe="xl"] .bx-hero-hell__text {
  padding-inline: var(--abstand-56);
}

.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__titel {
  margin-top: 0;
  font-weight: var(--schrift-hero-satz-gewicht);
  font-size: var(--schrift-hero-satz-groesse);
  line-height: var(--schrift-hero-satz-zeile);
  letter-spacing: var(--schrift-hero-satz-laufweite);
}

.bx-hero-hell__aussage {
  max-width: 1000px;
  margin-top: var(--abstand-16);
  color: var(--farbe-navy);
  font-weight: var(--schrift-hero-gross-gewicht);
  font-size: var(--schrift-hero-gross-groesse);
  line-height: var(--schrift-hero-gross-zeile);
  letter-spacing: var(--schrift-hero-gross-laufweite);
}

/* Betonter Teil der Aussage: Orange für Text (Regel css.altwert, Kontrast vor Design) */
.bx-hero-hell__betont {
  color: var(--farbe-orange-text);
}

.bx-hero-hell__lead {
  max-width: 760px;
  margin-top: var(--abstand-20);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-lead-branche-gewicht);
  font-size: var(--schrift-lead-branche-groesse);
  line-height: var(--schrift-lead-branche-zeile);
  letter-spacing: var(--schrift-lead-branche-laufweite);
}

.bx-hero-hell__aktionen {
  justify-content: center;
  margin-top: var(--abstand-32);
}

/* Branchenseiten: Sekundärbutton als Umriss-Pille mit Design-Polster; Hover färbt Rand und Text orange, keine Füllung
   (Ph12 Design-Abgleich; Design `Loesung Hochschulen v3`, `Loesung SaaS v2`, `Loesung IT-Dienstleister v3`).
   Orange als Text nach Regel css.altwert (Kontrast vor Design, #FF3C00 hätte auf Weiß nur 3,5:1). */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen {
  gap: var(--abstand-14);
}

.bx-hero-hell[data-bx-variante="branche"] .bx-button--sekundaer-hell {
  padding-inline: var(--abstand-button-pille-x);
  white-space: nowrap;
}

.bx-hero-hell[data-bx-variante="branche"] .bx-button--sekundaer-hell:hover,
[data-sg-zustand="hover"] .bx-hero-hell[data-bx-variante="branche"] .bx-button--sekundaer-hell {
  border-color: var(--farbe-orange-text);
  background-color: transparent;
  color: var(--farbe-orange-text);
}

/* Branchenseiten: beide Buttons im Design-Maß (17 px, 16,5 px; Umriss zieht den Rand ab) */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen .bx-button {
  padding-block: var(--abstand-button-cta-y);
  font-weight: var(--schrift-button-cta-gewicht);
  font-size: var(--schrift-button-cta-groesse);
  line-height: var(--schrift-button-cta-zeile);
  letter-spacing: var(--schrift-button-cta-laufweite);
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen .bx-button--sekundaer-hell {
  padding-block: calc(var(--abstand-button-cta-y) - var(--linie-button-rand));
}

@media (width >= 768px) {
  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen .bx-button--primaer {
    padding-inline: var(--abstand-button-cta-x);
  }
}

.bx-hero-hell__hinweis {
  margin-top: var(--abstand-18);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-brotkrumen-gewicht);
  font-size: var(--schrift-brotkrumen-groesse);
  line-height: var(--schrift-brotkrumen-zeile);
  letter-spacing: var(--schrift-brotkrumen-laufweite);
}

/* Bühne: Rahmen oben ohne Rand unten (huelle oben), ganz gerundet mit Schatten (huelle rund) */
.bx-hero-hell__buehne {
  position: relative;
  max-width: 1288px;
  margin: 0 var(--abstand-56);
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-bottom: 0;
  border-radius: var(--radius-karte-klein) var(--radius-karte-klein) 0 0;
  text-align: start;
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__buehne {
  margin-inline: auto;
}

.bx-hero-hell[data-bx-huelle="rund"] .bx-hero-hell__buehne {
  margin-bottom: var(--abstand-40);
  border-bottom: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
  box-shadow: var(--schatten-buehne);
}

.bx-hero-hell__karte,
.bx-hero-hell__unten {
  position: relative;
  padding: 0 clamp(var(--abstand-20), 4vw, var(--abstand-56)) var(--abstand-40);
  text-align: start;
}

/* Startseite (Design `Startseite v6` S1, V-A-rahmen-6 bis -8): Abstände 76 oben, 52 vor der Karte, 72 unten; H1 und
   Aussage ausbalanciert, Lead 720 px */
.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__text {
  padding-block: var(--abstand-76) 0;
}

.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__unten {
  padding-bottom: var(--abstand-52);
}

.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__karte {
  padding-bottom: var(--abstand-72);
}

.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__titel {
  max-width: 880px;
  margin-bottom: var(--abstand-24);
  text-wrap: balance;
}

.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__aussage {
  margin-top: 0;
  text-wrap: balance;
}

.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__lead {
  max-width: 720px;
  margin-top: var(--abstand-30);
  font-weight: var(--schrift-lead-start-gewicht);
  font-size: var(--schrift-lead-start-groesse);
  line-height: var(--schrift-lead-start-zeile);
  letter-spacing: var(--schrift-lead-start-laufweite);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-hero-hell[data-bx-variante="aufgabe"] .bx-hero-hell__glow {
    animation: bx-hero-hell-atem var(--bewegung-glow-atem) ease-in-out infinite;
  }

  .bx-hero-hell__eyebrow {
    animation: bx-hero-hell-steig var(--bewegung-einstieg-kurz) backwards;
  }

  /* Startseite ohne Einblendung der H1 wie Design `Startseite v6` S1 (P-M0C-B-2, H11-50) */
  .bx-hero-hell:not([data-bx-variante="startseite"]) .bx-hero-hell__titel {
    animation: bx-hero-hell-steig var(--bewegung-einstieg-dauer) var(--bewegung-einstieg-staffel) backwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-hero-hell__glow,
  .bx-hero-hell__eyebrow,
  .bx-hero-hell__titel {
    animation: none;
    animation-delay: 0s;
  }
}

@keyframes bx-hero-hell-atem {
  0%,
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: .7;
    transform: translateX(-50%) scale(1.06);
  }
}

@keyframes bx-hero-hell-steig {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (width < 768px) {
  .bx-hero-hell__brotkrumen {
    padding-inline: var(--abstand-20);
  }

  .bx-hero-hell__text {
    padding: var(--abstand-32) var(--abstand-20);
  }

  .bx-hero-hell__buehne {
    margin-inline: var(--abstand-20);
    box-shadow: var(--schatten-buehne);
  }

  /* Branchenseiten: beide Buttons gleich breit nebeneinander oder umgebrochen (Design Mobil: flex 1 1 0, mindestens
     Inhaltsbreite, höchstens 320 px; Gruppe so breit wie der Inhalt, mittig) */
  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
  }

  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen .bx-button {
    flex: 1 1 0;
    box-sizing: border-box;
    min-inline-size: max-content;
    max-inline-size: var(--breite-button-paar-max);
    text-align: center;
  }

  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen .bx-button--sekundaer-hell {
    padding-inline: calc(var(--abstand-button-x) - var(--linie-button-rand));
  }

  .bx-hero-hell[data-bx-titel-stufe="xl"] .bx-hero-hell__text {
    padding-inline: var(--abstand-20);
  }
}

/*
 * Ph12 Design-Abgleich (Fix E2; E-loesungen -7, -91 bis -97, -124): Branchen-Hero ohne Glow und ohne Einstieg, mit den
 * Abständen des Designs, Lead 720 px ohne Trennung; Bühne der Branchen mobil mit 20 px Rand; Bühne der Aufgabenseiten
 * 1400 px breit, eckig und ohne Rand (Design-Bild), mobil randlos; H1 der Aufgaben ohne Silbentrennung.
 */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__glow {
  display: none;
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__text {
  padding-block: var(--abstand-70) var(--abstand-64);
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__titel {
  margin-top: var(--abstand-24);
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__lead {
  max-width: 720px;
  margin-top: var(--abstand-28);
  hyphens: manual;
  text-wrap: pretty;
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen {
  margin-top: var(--abstand-38);
}

.bx-hero-hell[data-bx-variante="aufgabe"] .bx-hero-hell__titel {
  hyphens: manual;
  text-wrap: pretty;
}

.bx-hero-hell[data-bx-variante="aufgabe"] .bx-hero-hell__buehne {
  max-width: 1400px;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
}

/* IT: Logoleiste als eigener Streifen mit Linie oben, Logos 28 px grau (Design IT-Dienstleister v3) */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__unten {
  padding: 0;
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__unten .bx-logoleiste {
  padding: var(--abstand-34) clamp(var(--abstand-20), 4vw, var(--abstand-56));
  border-block: 0;
  border-block-start: 1px solid var(--farbe-linie-sektion);
  background-color: transparent;
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__unten .bx-logoleiste__liste {
  padding: 0;
  gap: var(--abstand-28) var(--abstand-56);
}

.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__unten .bx-logoleiste__logo img {
  block-size: 28px;
  filter: grayscale(1);
}

/* HS: Linie direkt unter der Bühne, wo keine Logoleiste folgt */
.bx-hero-hell[data-bx-variante="branche"]:not(:has(.bx-hero-hell__unten)) {
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__eyebrow,
  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__titel {
    animation: none;
  }
}

@media (width < 768px) {
  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__text {
    padding-block: var(--abstand-42) var(--abstand-40);
  }

  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__buehne {
    margin-inline: var(--abstand-20);
  }

  .bx-hero-hell[data-bx-variante="aufgabe"] .bx-hero-hell__buehne {
    margin-inline: 0;
    box-shadow: none;
  }

  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__unten .bx-logoleiste__liste {
    gap: var(--abstand-20) var(--abstand-24);
  }
}

/*
 * Rahmenteil „brotkrumen“ (Vertrag Ph2 §3.10, Teilplan B1 E22): Mono-Zeile mit Trenner „/“, umbrechend statt
 * abgeschnitten. Auf Navy (Hero, Beispiel) hellere Farben. Das Polster gilt nur für die Zeile als direktes Kind der
 * Ebene; im Hero und in den Rahmenbeispielen bestimmt der Umschlag den Abstand.
 */
.bx-brotkrumen {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-brotkrumen-gewicht);
  font-size: var(--schrift-brotkrumen-groesse);
  line-height: var(--schrift-brotkrumen-zeile);
  letter-spacing: var(--schrift-brotkrumen-laufweite);
}

.bx-ebene > .bx-brotkrumen {
  padding: var(--abstand-32) var(--seitenrand) 0;
}

.bx-brotkrumen__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-brotkrumen__glied {
  display: flex;
  gap: var(--abstand-8);
  min-width: 0;
  overflow-wrap: anywhere;
}

.bx-brotkrumen__link {
  color: inherit;
  text-decoration: none;
}

.bx-brotkrumen__link:hover {
  color: var(--farbe-orange-text);
}

.bx-brotkrumen__text[aria-current="page"] {
  color: inherit; /* Wert laut Design: alle Glieder gleich grau, auch das letzte (V-A-rahmen-36) */
}

[data-flaeche="navy"] .bx-brotkrumen {
  color: var(--farbe-navy-grau);
}

[data-flaeche="navy"] .bx-brotkrumen__link:hover,
[data-flaeche="navy"] .bx-brotkrumen__text[aria-current="page"] {
  color: var(--farbe-weiss);
}

/* Beispiel „Auf Navy“ im Styleguide: Umschlag mit Navy-Fläche wie der Hero */
.bx-brotkrumen-beispiel {
  padding: var(--abstand-24) var(--seitenrand);
  background-color: var(--farbe-navy);
}

/*
 * Baustein „produkt-animation“ (Vertrag Ph5 §3.2, §3.4.4; Teilplan E0a §5.5): Hülle, Fläche mit den Rahmen karte (Design
 * Integration DATEV v2 Z. 56) und video (video-leads.js Z. 75–77), Box des Hosts, Standbild-Hülle, Abspielen-Knopf
 * (video-leads.js Z. 210–211), Platz des Reglers und die Kapitelliste. Zustände, Live-Ebene, Symbolwahl des Knopfs und
 * das Ausblenden der Bedienung im Standbild stehen in css/elemente/gemeinsam.css (E0b R-2, R-5). Der Host trägt weder
 * Polster noch Rahmen, Hülle, Fläche und Host tragen kein transform, filter, isolation, contain oder will-change – sonst
 * springt die Skala bzw. greift die Aufnahme mit nativ nicht (N5-122, E0b M-5).
 */
.bx-produkt-animation {
  display: grid;
  gap: var(--abstand-24);
  min-inline-size: 0;
}

.bx-produkt-animation__flaeche {
  position: relative;
  min-inline-size: 0;
}

.bx-produkt-animation[data-bx-rahmen="karte"] > .bx-produkt-animation__flaeche {
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche-hell);
  box-shadow: var(--schatten-buehne);
  overflow: clip;
}

.bx-produkt-animation[data-bx-rahmen="video"] > .bx-produkt-animation__flaeche {
  border: 1px solid var(--farbe-navy-glas-rand);
  border-radius: var(--radius-karte);
  background: var(--farbe-navy-tief);
  overflow: clip;
}

/* Box des Hosts (R-5): ohne padding und border, die Fläche der Bühne setzt das Element-CSS (E0b R-7) */
.bx-produkt-animation__buehne {
  display: block;
  position: relative;
  overflow: clip;
  background: var(--bx-buehne-flaeche, var(--farbe-flaeche-hell));
}

.bx-produkt-animation__standbild,
.bx-produkt-animation__standbild picture,
.bx-produkt-animation__standbild img {
  display: block;
}

.bx-produkt-animation__standbild img {
  inline-size: 100%;
  block-size: auto;
}

.bx-produkt-animation__abspielen {
  position: absolute;
  right: var(--abstand-14);
  bottom: var(--abstand-14);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  padding: 0;
  border: 1px solid var(--farbe-navy-rand-mittel);
  border-radius: var(--radius-pille);
  background: var(--farbe-video-knopf);
  color: var(--farbe-weiss);
  cursor: pointer;
  transition: background var(--bewegung-dauer-kurz);
}

.bx-produkt-animation__abspielen:hover {
  background: var(--farbe-video-knopf-hover);
}

/* Autoren-display überstimmt sonst hidden */
.bx-produkt-animation__abspielen[hidden],
.bx-produkt-animation__regler[hidden] {
  display: none;
}

/* Platz des Reglers; die Gestalt folgt mit dem ersten Regler-Element (Ph11) */
.bx-produkt-animation__regler {
  position: absolute;
  left: var(--abstand-14);
  right: var(--abstand-14);
  bottom: var(--abstand-14);
}

.bx-produkt-animation__stationen {
  display: grid;
  gap: var(--abstand-16);
}

.bx-produkt-animation__kapitelliste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-8);
}

.bx-produkt-animation__kapitelliste [role="tab"] {
  padding: var(--abstand-10) var(--abstand-16);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
  cursor: pointer;
}

.bx-produkt-animation__kapitelliste [role="tab"][aria-selected="true"] {
  border-color: var(--farbe-navy);
  background: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-produkt-animation__station {
  display: grid;
  gap: var(--abstand-12);
  align-content: start;
}

.bx-produkt-animation__station-titel {
  margin: 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-h3-groesse);
  line-height: var(--schrift-h3-zeile);
  letter-spacing: var(--schrift-h3-laufweite);
}

.bx-produkt-animation__station-text {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-text-kompakt-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-text-kompakt-zeile);
  letter-spacing: var(--schrift-text-kompakt-laufweite);
}

.bx-produkt-animation__station-punkte {
  margin: 0;
  padding-inline-start: var(--abstand-20);
  font-weight: var(--schrift-liste-gewicht);
  font-size: var(--schrift-liste-groesse);
  line-height: var(--schrift-liste-zeile);
  letter-spacing: var(--schrift-liste-laufweite);
}

/* ===== Ph11 M0b: Vorher-nachher-Regler (Vertrag Ph11 §3.8.4, Ä11-38 bis Ä11-41, N11-5; Teilplan M0b §8.3) =====
   Der unsichtbare Regler deckt die ganze Bühne (Zugfläche, senkrechtes Scrollen bleibt); Knopf und Hinweis liegen
   außerhalb der skalierten Szene, unskaliert, in Bühnen-Prozent (Design .bx-knob 190 + 24 von 520, .bx-hint 234 von 520,
   Ränder 96 von 1400). Den Anteil setzt regler-bedienung.js als --bx-regler-anteil an der Fläche. Ohne JS bleiben alle drei
   hidden. Der Ring-Puls endet mit der ersten Bedienung bzw. im Zustand ende; bei reduzierter Bewegung läuft er nicht
   (basis.css kürzt jede Animation). Die Zustandsregeln für die Standbild-Aufnahme und das Ausblenden des Hinweises unter
   768px stehen in css/elemente/hero-regler/kern.css: dieser Baustein trägt weder Media Query noch
   [data-bx-standbild] (ProduktAnimationCssTest, Ph5 E0a §5.5). */
.bx-produkt-animation[data-bx-bedienung="regler"] .bx-produkt-animation__regler {
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.bx-produkt-animation[data-bx-bedienung="regler"] .bx-produkt-animation__regler-knopf {
  position: absolute;
  left: var(--bx-regler-anteil);
  top: 41.15%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(28px, 3.4286%, 48px);
  aspect-ratio: 1;
  border-radius: var(--radius-pille);
  background: var(--farbe-orange-flaeche);
  box-shadow: var(--schatten-regler-knopf);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-monogramm-klein-gewicht);
  font-size: var(--schrift-monogramm-klein-groesse);
  line-height: var(--schrift-monogramm-klein-zeile);
  letter-spacing: var(--schrift-monogramm-klein-laufweite);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Autoren-display überstimmt sonst hidden */
.bx-produkt-animation[data-bx-bedienung="regler"] .bx-produkt-animation__regler-knopf[hidden] {
  display: none;
}

.bx-produkt-animation[data-bx-bedienung="regler"] .bx-produkt-animation__regler-knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pille);
  animation: bx-produkt-animation-ring 2.8s ease-out infinite;
}

.bx-produkt-animation[data-bx-bedienung="regler"] [data-bx-ruht] ~ [data-bx-regler-knopf]::before,
.bx-produkt-animation[data-bx-bedienung="regler"] [data-bx-bedient] ~ [data-bx-regler-knopf]::before {
  animation: none;
}

.bx-produkt-animation[data-bx-bedienung="regler"] .bx-produkt-animation__regler:focus-visible ~ .bx-produkt-animation__regler-knopf {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-produkt-animation[data-bx-bedienung="regler"] .bx-produkt-animation__regler-hinweis {
  position: absolute;
  left: clamp(6.857%, var(--bx-regler-anteil), 93.143%);
  top: 45%;
  z-index: 1;
  padding: var(--abstand-5) var(--abstand-12);
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss-hinweis);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
  letter-spacing: var(--schrift-etikett-laufweite);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .4s;
  pointer-events: none;
}

/* hidden blendet weich aus (Design opacity .4s); ohne JS ist der Hinweis ebenso unsichtbar */
.bx-produkt-animation[data-bx-bedienung="regler"] .bx-produkt-animation__regler-hinweis[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s, visibility 0s .4s;
}

@keyframes bx-produkt-animation-ring {
  0% {
    box-shadow: var(--schatten-regler-puls-an);
  }

  70%,
  100% {
    box-shadow: var(--schatten-regler-puls-aus);
  }
}

/*
  Gemeinsames CSS der Bühnen (Vertrag Ph5 §3.2, §3.4.4, §3.9; Teilplan E0b §6.5): Live-Ebene über dem Standbild,
  Sichtbarkeit je Zustand, Skalierung der Fläche, Zeiger, Klickring und Schleier der Familie A, Standbild-Aufnahme der
  Prüffunktion, Symbol des Abspielen-Knopfs und die Pausenregel. Die Box des Hosts und die Standbild-Hülle stehen nur in
  css/bausteine/produkt-animation.css (R-5); die Live-Ebene setzt den positionierten Host voraus. Reduzierte Bewegung
  wirkt nur über den Zustand reduziert (D-4), keine Media Query.
*/

/* Live-Ebene: liegt über der Standbild-Hülle, sichtbar nur in den Laufzuständen (D-2: visibility statt display) */
.bx-buehne__live {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  background: var(--bx-buehne-flaeche, transparent);
}

[data-bx-zustand="laeuft"] > .bx-buehne__live,
[data-bx-zustand="pausiert"] > .bx-buehne__live,
[data-bx-zustand="angehalten"] > .bx-buehne__live,
[data-bx-zustand="ende"] > .bx-buehne__live {
  visibility: visible;
}

/* Fläche fester Geometrie, als Ganzes skaliert (skaliere.js, Vertrag §3.4.4; transform: scale(), nie scale) */
.bx-buehne__flaeche {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--bx-breite) * 1px);
  height: calc(var(--bx-hoehe) * 1px);
  overflow: hidden;
  transform: scale(var(--bx-skala, 0));
  transform-origin: 0 0;
}

/* Zeiger, Klickring, Schleier (HI Z. 107–109); Lage, Deckkraft und die Maße des Rings (RING in zeiger.js, als
   --bx-ring-durchmesser und --bx-ring-rand) setzt zeiger.js per CSSOM */
.bx-buehne__zeiger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  width: 26px;
  height: 34px;
  opacity: 0;
  pointer-events: none;
}

.bx-buehne__zeiger path {
  fill: var(--farbe-app-dunkel);
  stroke: var(--farbe-weiss);
  stroke-width: 2;
  stroke-linejoin: round;
}

.bx-buehne__ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 29;
  width: calc(var(--bx-ring-durchmesser) * 1px);
  height: calc(var(--bx-ring-durchmesser) * 1px);
  margin: calc(var(--bx-ring-durchmesser) * -0.5px) 0 0 calc(var(--bx-ring-durchmesser) * -0.5px);
  border: calc(var(--bx-ring-rand) * 1px) solid var(--farbe-orange-flaeche);
  border-radius: var(--radius-pille);
  opacity: 0;
  pointer-events: none;
}

.bx-buehne__schleier {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--bx-buehne-flaeche, transparent);
  opacity: 0;
  pointer-events: none;
}

/* Standbild-Aufnahme der Prüffunktion (zeig mit standbild: true): ohne Zeiger, Ring, Kapitel-Chip und Bedienung */
[data-bx-standbild] .bx-buehne__zeiger,
[data-bx-standbild] .bx-buehne__ring,
[data-bx-standbild] .bx-buehne__chip,
[data-bx-standbild] ~ [data-bx-abspielen],
[data-bx-standbild] ~ [data-bx-regler] {
  visibility: hidden;
}

/* Prüffunktion nativ (D-12): Live-Ebene fest oben links in Designgröße, Skala 1 (Aufnahme, Vertrag §5) */
[data-bx-nativ] > .bx-buehne__live {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: calc(var(--bx-breite) * 1px);
  height: calc(var(--bx-sicht-hoehe) * 1px);
}

[data-bx-nativ] .bx-buehne__flaeche {
  transform: none;
}

/* Symbol des Abspielen-Knopfs (R-4 a mit Korrektur): laeuft und pausiert ⇒ Pause, alle übrigen Zustände ⇒ Abspielen */
[data-bx-zustand="laeuft"] ~ [data-bx-abspielen] [data-bx-symbol="abspielen"],
[data-bx-zustand="pausiert"] ~ [data-bx-abspielen] [data-bx-symbol="abspielen"],
[data-bx-zustand]:not([data-bx-zustand="laeuft"], [data-bx-zustand="pausiert"]) ~ [data-bx-abspielen] [data-bx-symbol="pause"] {
  display: none;
}

/* Pausenregel (Vertrag §3.9): CSS-Dauerbewegungen stehen außer Sicht, angehalten und bei reduzierter Bewegung */
[data-bx-zustand="pausiert"] *,
[data-bx-zustand="angehalten"] *,
[data-bx-zustand="reduziert"] * {
  animation-play-state: paused;
}

/*
  Familien-Kern der Vorher-nachher-Regler hero-* (Vertrag Ph11 §3.8.3, Familie D; Teilplan M0b §8.2): die gemeinsamen Teile
  aus hero-leads.js Z. 13–249 (Gerüst, Seiten, Trenner, Fensterleiste, Fenster, Tabelle, Mails, Scan, Zettel, Stempel,
  Fehler-Pillen, Erfassungsmaske, Übergaben, Seitenleiste, Kopfleiste, Karten, Felder, Verlauf, Chips, Zeitleiste,
  Ergebnisblöcke) mit Präfix bx-hero-regler__, Maße in Bühnen-px (1400 × 520). Farben, Schriften, Schatten und Radien nur als
  Tokens (Nahdubletten auf main-Tokens, neue Werte V-7 Teil 0b, H11-23). Die Kette des Designs (bxBahn, bxK1–5, bxR1–5,
  bxAkt3–5) zeichnet kern.js nach t; hier bleiben nur die endlosen Dauereffekte (Fehler-Pille, Schreibmarke), die im
  Zustand ende ruhen (data-bx-ruht, Ä11-41). Knopf und Hinweis des Reglers liegen außerhalb der Szene
  (css/bausteine/produkt-animation.css, Block „Ph11 M0b“). Tote Teile des Designs (Kontingentbalken, Toast) fehlen (B-17).
*/

/* Regler-Teile außerhalb der Szene (Vertrag Ph11 §3.8.4, Ä11-41): bei der Standbild-Aufnahme ausgeblendet (wie
   [data-bx-standbild] ~ [data-bx-regler] in gemeinsam.css); der Hinweis entfällt unter 768px (Design, DB §1.2) */
[data-bx-standbild] ~ [data-bx-regler-knopf],
[data-bx-standbild] ~ [data-bx-regler-hinweis] {
  visibility: hidden;
}

@media (width < 768px) {
  [data-bx-bedienung="regler"] [data-bx-regler-hinweis][aria-hidden] {
    display: none;
  }
}

.bx-hero-regler {
  position: absolute;
  left: 0;
  top: 0;
  width: 1400px;
  height: 520px;
  overflow: hidden;
  border-top: 1px solid var(--farbe-linie-sektion);
  background: var(--farbe-linie-karte);
}

.bx-hero-regler * {
  box-sizing: border-box;
}

/* Gerüst: Nachher-Seite voll, Vorher-Seite im Clip bis zum Anteil, Trenner (HL Z. 17–24) */
.bx-hero-regler__seite {
  position: absolute;
  left: 0;
  top: 0;
  width: 1400px;
  height: 520px;
}

.bx-hero-regler__clip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bx-regler-anteil);
  overflow: hidden;
}

.bx-hero-regler__trenner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--bx-regler-anteil);
  z-index: 6;
  width: 2px;
  margin-left: -1px;
  background: var(--farbe-orange-flaeche);
  pointer-events: none;
}

/* ===== Vorher-Seite (HL Z. 32–90) ===== */
.bx-hero-regler__vorher {
  background: var(--farbe-linie-karte);
}

.bx-hero-regler__vorher::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 30% 40%, var(--farbe-element-vorher-licht), var(--farbe-icon-navy));
  pointer-events: none;
}

.bx-hero-regler__leiste {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 8px;
  width: 1400px;
  height: 52px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--farbe-diagramm-grundlinie);
  background: var(--farbe-linie-eingabe);
}

.bx-hero-regler__reiter {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--farbe-diagramm-grundlinie);
  border-radius: var(--radius-element-fenster);
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-app-werkzeug);
  font: 400 11.5px var(--schrift-familie-text);
  white-space: nowrap;
}

.bx-hero-regler__reiter s,
.bx-hero-regler__fensterkopf s {
  margin-left: auto;
  color: var(--farbe-status-leer);
  text-decoration: none;
}

.bx-hero-regler__reiter s {
  font-size: 11px;
}

.bx-hero-regler__leiste-zusatz {
  position: absolute;
  right: 24px;
  top: 19px;
  color: var(--farbe-element-vorher-text);
  font: 500 11px var(--schrift-familie-mono);
  letter-spacing: .4px;
}

.bx-hero-regler__symbol {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-element-strich);
}

.bx-hero-regler__fensterkopf .bx-hero-regler__symbol {
  width: 11px;
  height: 11px;
}

.bx-hero-regler__symbol--blau,
.bx-hero-regler__avatar--blau {
  background: var(--farbe-element-blau);
}

.bx-hero-regler__symbol--tabelle {
  background: var(--farbe-element-tabelle);
}

.bx-hero-regler__symbol--fehler,
.bx-hero-regler__avatar--fehler {
  background: var(--farbe-app-fehler);
}

.bx-hero-regler__symbol--navy {
  background: var(--farbe-app-chip-grau-text);
}

.bx-hero-regler__avatar--violett {
  background: var(--farbe-element-violett);
}

.bx-hero-regler__fenster {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--farbe-diagramm-grundlinie);
  border-radius: var(--radius-element-fenster);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-element-fenster);
}

.bx-hero-regler__fensterkopf {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid var(--farbe-linie-eingabe);
  background: linear-gradient(var(--farbe-flaeche-kachel), var(--farbe-linie-karte));
  color: var(--farbe-mikrotext);
  font: 400 11.5px var(--schrift-familie-text);
}

.bx-hero-regler__fensterkopf s {
  font: 400 11px var(--schrift-familie-mono);
  letter-spacing: 2px;
}

/* Tabellenkalkulation (HL Z. 47–60) */
.bx-hero-regler__formel {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  padding: 0 10px;
  border-bottom: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche-hell);
  color: var(--farbe-element-vorher-text);
  font: 400 10.5px var(--schrift-familie-mono);
}

.bx-hero-regler__formel b {
  color: var(--farbe-status-leer);
  font-weight: 700;
}

.bx-hero-regler__tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.bx-hero-regler__tabelle th,
.bx-hero-regler__tabelle td {
  height: 22px;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
  color: var(--farbe-fremd-website-label);
  font: 400 11px var(--schrift-familie-text);
  text-align: left;
  white-space: nowrap;
}

.bx-hero-regler__tabelle th {
  height: 18px;
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-app-sekundaer);
  font: 500 10px var(--schrift-familie-mono);
  letter-spacing: .4px;
}

.bx-hero-regler__tabelle .bx-hero-regler__zelle--fehler {
  background: var(--farbe-vorschau-rot-flaeche);
  box-shadow: var(--schatten-app-zelle-fehler);
  color: var(--farbe-app-fehler);
  font-weight: 700;
}

.bx-hero-regler__tabelle .bx-hero-regler__zelle--leer {
  color: var(--farbe-linie-stark);
}

.bx-hero-regler__markiert {
  position: relative;
}

.bx-hero-regler__markiert::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent var(--farbe-app-fehler) transparent transparent;
}

.bx-hero-regler__blaetter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-top: 1px solid var(--farbe-linie-eingabe);
  background: var(--farbe-flaeche-toggle);
}

.bx-hero-regler__blaetter span {
  padding: 2px 7px;
  border-radius: var(--radius-mini);
  color: var(--farbe-app-sekundaer);
  font: 400 10px var(--schrift-familie-text);
}

.bx-hero-regler__blaetter .bx-hero-regler__blatt--aktiv {
  border: 1px solid var(--farbe-linie-eingabe);
  border-bottom-color: var(--farbe-weiss);
  background: var(--farbe-weiss);
  color: var(--farbe-fremd-website-label);
}

/* Mailverlauf (HL Z. 62–67) */
.bx-hero-regler__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--farbe-flaeche-toggle);
}

.bx-hero-regler__mail b {
  display: block;
  color: var(--farbe-text-sekundaer);
  font: 600 11.5px var(--schrift-familie-text);
}

.bx-hero-regler__mail em {
  display: block;
  margin-top: 1px;
  color: var(--farbe-app-sekundaer);
  font: 400 11px var(--schrift-familie-text);
  font-style: normal;
}

.bx-hero-regler__mail u {
  margin-left: auto;
  color: var(--farbe-status-leer);
  font: 400 10px var(--schrift-familie-mono);
  text-decoration: none;
  white-space: nowrap;
}

.bx-hero-regler__mail--warnung {
  background: var(--farbe-vorschau-rot-flaeche);
}

.bx-hero-regler__mail--warnung b {
  color: var(--farbe-app-fehler);
}

.bx-hero-regler__mail--warnung em,
.bx-hero-regler__mail--warnung u {
  color: var(--farbe-app-fehler-text);
}

.bx-hero-regler__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pille);
  color: var(--farbe-weiss);
  font: 700 9.5px var(--schrift-familie-text);
}

/* Scan, Textzeilen, Stempel, Zettel (HL Z. 69–76) */
.bx-hero-regler__scan {
  position: absolute;
  inset: 0;
  background: var(--farbe-flaeche-hell);
  box-shadow: var(--schatten-element-scan);
}

.bx-hero-regler__textzeile {
  position: absolute;
  height: 6px;
  border-radius: var(--radius-element-strich);
  background: var(--farbe-linie-mittel);
}

.bx-hero-regler__stempel {
  position: absolute;
  padding: 3px 8px;
  border: 2px solid var(--farbe-app-fehler);
  border-radius: var(--radius-app);
  color: var(--farbe-app-fehler);
  font: 700 13px var(--schrift-familie-mono);
  letter-spacing: 2px;
  opacity: .85;
}

.bx-hero-regler__zettel {
  position: absolute;
  padding: 16px 16px 12px;
  background: var(--farbe-element-zettel);
  box-shadow: var(--schatten-element-zettel);
}

.bx-hero-regler__zettel p {
  margin: 0;
  color: var(--farbe-element-zettel-text);
  font: 600 19px/1.28 var(--schrift-familie-hand);
}

.bx-hero-regler__zettel small {
  position: absolute;
  right: 14px;
  bottom: 9px;
  color: var(--farbe-element-zettel-nebentext);
  font: 500 14px var(--schrift-familie-hand);
}

/* Erfassungsmaske (HL Z. 78–81) */
.bx-hero-regler__feldbox {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--farbe-diagramm-grundlinie);
  border-radius: var(--radius-mini);
  background: var(--farbe-weiss);
  color: var(--farbe-text-sekundaer);
  font: 400 11.5px var(--schrift-familie-text);
}

.bx-hero-regler__feldbox--fehler {
  border-color: var(--farbe-app-fehler);
  background: var(--farbe-vorschau-rot-flaeche);
  color: var(--farbe-app-fehler);
}

.bx-hero-regler__feldbox--leer {
  color: var(--farbe-linie-stark);
}

.bx-hero-regler__feldlabel {
  position: absolute;
  color: var(--farbe-app-sekundaer);
  font: 500 9.5px var(--schrift-familie-mono);
  letter-spacing: .4px;
}

.bx-hero-regler__schreibmarke {
  display: inline-block;
  width: 1px;
  height: 13px;
  margin-left: 1px;
  background: var(--farbe-text-sekundaer);
  animation: bx-hero-regler-blinken 1.1s steps(1) infinite;
}

.bx-hero-regler__feldbox--fehler .bx-hero-regler__schreibmarke {
  background: var(--farbe-app-fehler);
}

/* Übergabe-Pfeile und rote Fehler-Pillen (HL Z. 83–90) */
.bx-hero-regler__uebergabe {
  position: absolute;
  height: 1px;
  border-top: 2px dashed var(--farbe-status-leer);
}

.bx-hero-regler__uebergabe::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--farbe-status-leer);
}

.bx-hero-regler__uebergabe-label {
  position: absolute;
  padding: 0 4px;
  background: var(--farbe-linie-karte);
  color: var(--farbe-app-sekundaer);
  font: 500 9.5px var(--schrift-familie-mono);
  letter-spacing: .6px;
}

.bx-hero-regler__pille {
  position: absolute;
  padding: 4px 8px;
  border-radius: var(--radius-mini);
  background: var(--farbe-app-fehler);
  box-shadow: var(--schatten-app-fehler-pille);
  color: var(--farbe-weiss);
  font: 700 10.5px var(--schrift-familie-mono);
  letter-spacing: .4px;
  animation: bx-hero-regler-puls 2.6s ease-in-out infinite;
}

.bx-hero-regler__pille--langsam {
  animation: bx-hero-regler-puls 3.4s ease-in-out .9s infinite;
}

/* ===== Nachher-Seite (HL Z. 93–130) ===== */
.bx-hero-regler__nachher {
  background: var(--farbe-flaeche-hell);
  font-family: var(--schrift-familie-app);
}

.bx-hero-regler__nachher::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -220px;
  width: 760px;
  height: 620px;
  background: radial-gradient(closest-side, var(--farbe-glow-orange-zart), var(--farbe-glow-orange-aus));
  pointer-events: none;
}

.bx-hero-regler__nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 380px;
  background: var(--farbe-app-dunkel);
}

.bx-hero-regler__nav-suche {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  border-radius: var(--radius-app);
  background: var(--farbe-fremd-leiste);
  color: var(--farbe-app-sekundaer);
}

.bx-hero-regler__nav-eintraege {
  position: absolute;
  left: 0;
  top: 54px;
  display: grid;
  grid-auto-rows: 32px;
}

.bx-hero-regler__nav-eintrag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 34px;
  color: var(--farbe-app-sekundaer);
}

.bx-hero-regler__nav-eintrag--aktiv {
  color: var(--farbe-orange-navy-text);
}

.bx-hero-regler__nav-eintrag--aktiv::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 var(--radius-element-strich) var(--radius-element-strich) 0;
  background: var(--farbe-orange-flaeche);
}

.bx-hero-regler__nav-marke {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-chip);
  background: linear-gradient(140deg, var(--farbe-app-symbol), var(--farbe-fremd-leiste));
}

.bx-hero-regler__zeichen {
  display: block;
  width: 30px;
  height: 30px;
}

.bx-hero-regler__zeichen-kreis {
  fill: var(--farbe-orange-flaeche);
}

.bx-hero-regler__zeichen-x {
  fill: var(--farbe-weiss);
}

.bx-hero-regler__kopfleiste {
  position: absolute;
  left: 72px;
  top: 0;
  width: 1328px;
  height: 52px;
  border-bottom: 1px solid var(--farbe-app-linie);
  background: var(--farbe-weiss);
}

.bx-hero-regler__werkzeug {
  position: absolute;
  top: 5px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 82px;
  height: 42px;
  border-radius: var(--radius-app);
  color: var(--farbe-element-vorher-text);
}

/* Werkzeug der Kette leuchtet auf: Fläche über --bx-an (kern.js), Farbe ab der Hälfte über data-bx-stufe */
.bx-hero-regler__werkzeug::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-app);
  background: var(--farbe-vorschau-rot-flaeche);
  opacity: var(--bx-an, 0);
}

.bx-hero-regler__werkzeug[data-bx-stufe="an"] {
  color: var(--farbe-orange-navy-text);
}

.bx-hero-regler__werkzeug span {
  font: 400 9.5px var(--schrift-familie-app);
  letter-spacing: .1px;
  white-space: nowrap;
}

.bx-hero-regler__knopf-gruen {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border-radius: var(--radius-app);
  background: var(--farbe-app-gruen);
  color: var(--farbe-weiss);
  font: 700 12.5px var(--schrift-familie-app);
}

.bx-hero-regler__reiterleiste {
  position: absolute;
  left: 96px;
  top: 56px;
  display: flex;
  gap: 26px;
}

.bx-hero-regler__reiterleiste span {
  padding-bottom: 10px;
  color: var(--farbe-element-vorher-text);
  font: 400 13px var(--schrift-familie-app);
}

.bx-hero-regler__reiterleiste .bx-hero-regler__reiter--aktiv {
  box-shadow: var(--schatten-app-reiter-schmal);
  color: var(--farbe-orange-navy-text);
  font-weight: 700;
}

.bx-hero-regler__karte {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app);
}

.bx-hero-regler__karte-titel {
  position: absolute;
  color: var(--farbe-app-text);
  font: 700 16px/24px var(--schrift-familie-app);
  letter-spacing: -.2px;
}

.bx-hero-regler__karte-unter {
  position: absolute;
  color: var(--farbe-app-sekundaer);
  font: 400 11px var(--schrift-familie-app);
}

.bx-hero-regler__feld {
  position: absolute;
  border-bottom: 1px solid var(--farbe-app-linie);
}

.bx-hero-regler__feld i {
  display: block;
  margin-bottom: 5px;
  color: var(--farbe-app-sekundaer);
  font: 400 10.5px var(--schrift-familie-app);
  font-style: normal;
}

.bx-hero-regler__feld b {
  display: block;
  color: var(--farbe-app-text);
  font: 400 13px var(--schrift-familie-app);
}

.bx-hero-regler__kopf {
  position: absolute;
  display: flex;
  align-items: center;
  height: 28px;
  background: var(--farbe-app-kopf);
}

.bx-hero-regler__kopf span {
  position: absolute;
  color: var(--farbe-weiss);
  font: 700 11px var(--schrift-familie-app);
  letter-spacing: .2px;
}

.bx-hero-regler__eintrag {
  position: absolute;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--farbe-flaeche-toggle);
}

.bx-hero-regler__kennung {
  padding: 3px 6px;
  border-radius: var(--radius-app-chip);
  background: var(--farbe-vorschau-rot-flaeche);
  color: var(--farbe-orange-navy-text);
  font: 700 10.5px var(--schrift-familie-mono);
  letter-spacing: .3px;
}

.bx-hero-regler__txt {
  color: var(--farbe-app-text);
  font: 400 12.5px var(--schrift-familie-app);
}

.bx-hero-regler__chip {
  padding: 3px 8px;
  border-radius: var(--radius-app-chip);
  font: 700 10.5px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-regler__chip--gruen {
  background: var(--farbe-element-gruen-flaeche);
  color: var(--farbe-app-gruen);
}

.bx-hero-regler__chip--amber {
  background: var(--farbe-app-chip-bernstein-flaeche);
  color: var(--farbe-app-chip-amber-text);
}

.bx-hero-regler__chip--navy {
  background: var(--farbe-linie-karte);
  color: var(--farbe-app-chip-grau-text);
}

.bx-hero-regler__betrag {
  color: var(--farbe-app-text);
  font: 700 12.5px var(--schrift-familie-app);
}

/* ===== Zeitleiste unten, beide Seiten (HL Z. 137–157): Knoten bei 300 / 500 / 700 / 900 / 1100 ===== */
.bx-hero-regler__zeitleiste {
  position: absolute;
  left: 0;
  top: 380px;
  z-index: 2;
  width: 1400px;
  height: 140px;
}

.bx-hero-regler__zeitleiste--vorher {
  border-top: 1px solid var(--farbe-diagramm-grundlinie);
  background: var(--farbe-linie-mittel);
}

.bx-hero-regler__zeitleiste--nachher {
  border-top: 1px solid var(--farbe-app-linie);
  background: var(--farbe-weiss);
}

.bx-hero-regler__x-1 {
  left: 300px;
}

.bx-hero-regler__x-2 {
  left: 500px;
}

.bx-hero-regler__x-3 {
  left: 700px;
}

.bx-hero-regler__x-4 {
  left: 900px;
}

.bx-hero-regler__x-5 {
  left: 1100px;
}

.bx-hero-regler__oben {
  position: absolute;
  top: 38px;
  transform: translateX(-50%);
  color: var(--farbe-element-vorher-text);
  font: 700 10.5px var(--schrift-familie-mono);
  letter-spacing: 1.1px;
  white-space: nowrap;
}

.bx-hero-regler__unten {
  position: absolute;
  top: 93px;
  width: 150px;
  margin-left: -75px;
  color: var(--farbe-app-werkzeug);
  font: 400 12.5px/1.3 var(--schrift-familie-text);
  text-align: center;
}

.bx-hero-regler__oben[data-bx-stufe="an"] {
  color: var(--farbe-orange-navy-text);
}

.bx-hero-regler__unten[data-bx-stufe="an"] {
  color: var(--farbe-mikrotext);
}

.bx-hero-regler__oben[data-bx-stufe="fehler"],
.bx-hero-regler__unten[data-bx-stufe="fehler"] {
  color: var(--farbe-app-fehler-text);
}

.bx-hero-regler__punkt {
  position: absolute;
  top: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 2.5px solid var(--farbe-linie-mittel);
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss);
  color: var(--farbe-weiss);
}

.bx-hero-regler__punkt[data-bx-stufe="leer"] {
  border-color: var(--farbe-app-leiste-sekundaer);
  box-shadow: var(--schatten-knoten-vorher);
}

.bx-hero-regler__punkt[data-bx-stufe="fehler"] {
  border-color: var(--farbe-app-fehler);
  background: var(--farbe-app-fehler);
  box-shadow: var(--schatten-knoten-vorher);
}

.bx-hero-regler__punkt[data-bx-stufe="an"] {
  box-shadow: var(--schatten-knoten-nachher);
}

/* Knoten der Kette: orange Fläche über --bx-an (kern.js, bxK1–5), Ruhewert ohne JS = Endzustand */
.bx-hero-regler__punkt[data-bx-stufe="an"]::before {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: var(--radius-pille);
  background: var(--farbe-orange-flaeche);
  opacity: var(--bx-an, 1);
}

.bx-hero-regler__punkt svg {
  position: relative;
}

.bx-hero-regler__bahn {
  position: absolute;
  left: 300px;
  top: 72px;
  width: 800px;
  height: 4px;
  border-radius: var(--radius-element-strich);
}

.bx-hero-regler__bahn--leer {
  background: var(--farbe-regler-bahn-flaeche);
}

.bx-hero-regler__bahn--voll {
  background: var(--farbe-orange-flaeche);
  transform-origin: left;
}

/* Lücken der Vorher-Schiene: zwei Strecken mit Übergabe-Marke oder eine gestrichelte Strecke */
.bx-hero-regler__luecke {
  position: absolute;
  top: 0;
  width: 200px;
  height: 140px;
}

.bx-hero-regler__strecke {
  position: absolute;
  left: 9px;
  top: 72px;
  width: 69px;
  height: 4px;
  border-radius: var(--radius-element-strich);
  background: var(--farbe-linie-stark);
}

.bx-hero-regler__strecke--zwei {
  left: 122px;
}

.bx-hero-regler__strecke--offen {
  width: 182px;
  height: 0;
  border-top: 3px dashed var(--farbe-linie-stark);
  border-radius: 0;
  background: transparent;
}

.bx-hero-regler__marke-wechsel {
  position: absolute;
  left: 100px;
  top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  margin-left: -11px;
  border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-app);
  background: var(--farbe-weiss);
  color: var(--farbe-app-sekundaer);
}

/* Ergebnisblöcke an den Außenkanten (HL Z. 159–166): in der Seite über der Zeitleiste (380 + 30) */
.bx-hero-regler__ergebnis {
  position: absolute;
  top: 410px;
  z-index: 3;
  width: 300px;
}

.bx-hero-regler__ergebnis--vorher {
  left: 24px;
}

.bx-hero-regler__ergebnis--nachher {
  right: 24px;
  text-align: right;
}

.bx-hero-regler__ergebnis-seite {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 20px;
  color: var(--farbe-mikrotext);
  font: 700 12.5px var(--schrift-familie-text);
}

.bx-hero-regler__ergebnis-seite svg {
  color: var(--farbe-app-rand-stark);
}

.bx-hero-regler__ergebnis--nachher .bx-hero-regler__ergebnis-seite {
  justify-content: flex-end;
}

.bx-hero-regler__ergebnis-zahl {
  margin-top: 8px;
  font: 800 32px/1.05 var(--schrift-familie-text);
  letter-spacing: -1.2px;
  white-space: nowrap;
}

.bx-hero-regler__ergebnis--vorher .bx-hero-regler__ergebnis-zahl {
  color: var(--farbe-app-fehler);
}

.bx-hero-regler__ergebnis--nachher .bx-hero-regler__ergebnis-zahl {
  color: var(--farbe-navy);
}

.bx-hero-regler__ergebnis-zahl span {
  font-size: 22px;
  letter-spacing: -.6px;
}

.bx-hero-regler__ergebnis-satz {
  margin-top: 7px;
  color: var(--farbe-mikrotext);
  font: 400 12.5px var(--schrift-familie-text);
  white-space: nowrap;
}

.bx-hero-regler__logo {
  display: block;
  width: auto;
  height: 18px;
  color: var(--farbe-navy);
}

/* Dauereffekte (HL Z. 169–172), endlos; im Zustand ende ruhen sie (data-bx-ruht) */
@keyframes bx-hero-regler-blinken {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes bx-hero-regler-puls {
  0%,
  100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

/* Ruhe im Zustand ende (Ä11-41): am Dateiende, damit die Regel die animation-Kurzschreibweisen davor überstimmt */
[data-bx-ruht] * {
  animation-play-state: paused;
}

/*
  Element hero-abrechnung (Vertrag Ph11 §3.8.5 Nr. 3, Familie D; Teilplan M1a §8.1): die szeneneigenen Teile aus
  hero-abrechnung.js Z. 11–185 (Abweichungen zum Kern) und jeder Inline-Stil des Markups Z. 200–325 als Klasse
  bx-hero-abrechnung__… mit den Werten wörtlich aus HR (Bühnen-px, 1400 × 520). Die Lage-Klassen am Dateiende entstehen aus
  den lage()-Aufrufen im Modul. Farben, Schriften, Schatten und Radien nur als Tokens (Nahdubletten ≤ 6 je Kanal, Ausnahme:
  Symbol der Word-Datei, Vermerk im Bericht); die Gerüst-, Fenster-, Karten- und Zeitleisten-Klassen stehen im Kern
  (hero-regler/kern.css). Tote Teile des Designs (Säulen, Pillen, Legende) fehlen (B-17).
*/

hero-abrechnung {
  --bx-buehne-flaeche: var(--farbe-linie-karte);
}

/* Abweichungen zum Kern (HR Z. 36–69, 160–166): Farben der Vorher-Seite, rechtsbündige Spaltenköpfe, Mails 40 px */
.bx-hero-regler__symbol--docx {
  background: var(--farbe-vorschau-blau-text);
}

hero-abrechnung .bx-hero-regler__leiste-zusatz {
  color: var(--farbe-mikrotext);
}

hero-abrechnung .bx-hero-regler__fensterkopf {
  overflow: hidden;
  white-space: nowrap;
}

hero-abrechnung .bx-hero-regler__formel {
  color: var(--farbe-mikrotext);
  white-space: nowrap;
}

hero-abrechnung .bx-hero-regler__tabelle th {
  color: var(--farbe-mikrotext);
}

hero-abrechnung .bx-hero-regler__blaetter span {
  color: var(--farbe-mikrotext);
}

hero-abrechnung .bx-hero-regler__blaetter .bx-hero-regler__blatt--aktiv {
  color: var(--farbe-fremd-website-label);
}

hero-abrechnung .bx-hero-regler__mail {
  height: 40px;
}

hero-abrechnung .bx-hero-regler__mail b,
hero-abrechnung .bx-hero-regler__mail em {
  white-space: nowrap;
}

hero-abrechnung .bx-hero-regler__mail em {
  color: var(--farbe-mikrotext);
}

hero-abrechnung .bx-hero-regler__mail u {
  color: var(--farbe-app-sekundaer);
}

hero-abrechnung .bx-hero-regler__mail--warnung b,
hero-abrechnung .bx-hero-regler__mail--warnung em,
hero-abrechnung .bx-hero-regler__mail--warnung u {
  color: var(--farbe-app-fehler-text);
}

hero-abrechnung .bx-hero-regler__stempel {
  font-size: 12px;
  white-space: nowrap;
}

hero-abrechnung .bx-hero-regler__pille {
  white-space: nowrap;
}

hero-abrechnung .bx-hero-regler__oben[data-bx-stufe="leer"],
hero-abrechnung .bx-hero-regler__unten[data-bx-stufe="leer"] {
  color: var(--farbe-mikrotext);
}

.bx-hero-abrechnung__avatar--navy {
  background: var(--farbe-app-chip-grau-text);
}

/* ===== Nachher-Seite (HR Z. 200–244) ===== */
.bx-hero-abrechnung__nav-eintraege {
  top: 62px;
  grid-auto-rows: 38px;
}

.bx-hero-abrechnung__name {
  position: absolute;
  left: 96px;
  top: 14px;
  color: var(--farbe-app-text);
  font: 700 17px var(--schrift-familie-app);
  letter-spacing: -.2px;
  white-space: nowrap;
}

.bx-hero-abrechnung__schalter {
  position: absolute;
  top: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-app);
  background: var(--farbe-weiss);
  color: var(--farbe-app-text);
  font: 700 11.5px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-abrechnung__schalter--gruen {
  border-color: var(--farbe-app-knopf-gruen);
  background: var(--farbe-app-knopf-gruen);
  color: var(--farbe-weiss);
}

.bx-hero-abrechnung__reiterleiste {
  top: 58px;
  gap: 24px;
}

.bx-hero-abrechnung__titel-icon {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.bx-hero-abrechnung__titel-icon svg {
  color: var(--farbe-mikrotext);
}

.bx-hero-abrechnung__nowrap {
  white-space: nowrap;
}

.bx-hero-abrechnung__haken {
  display: block;
  flex: none;
  width: 11px;
  height: 11px;
  margin-left: 14px;
  border: 1.5px solid var(--farbe-app-rand-stark);
  border-radius: var(--radius-element-strich);
  background: var(--farbe-weiss);
}

.bx-hero-abrechnung__haken--kopf {
  margin-left: 0;
  border-color: var(--farbe-weiss);
  background: var(--farbe-app-kopf);
}

.bx-hero-abrechnung__text {
  position: absolute;
  color: var(--farbe-app-text);
  font: 400 11.5px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-abrechnung__text--link {
  color: var(--farbe-app-link);
}

.bx-hero-abrechnung__text--fett {
  font-weight: 700;
}

.bx-hero-abrechnung__chip--grau {
  background: var(--farbe-flaeche-kachel);
  color: var(--farbe-mikrotext);
}

.bx-hero-abrechnung__fuss {
  display: flex;
  justify-content: space-between;
  color: var(--farbe-app-sekundaer);
  font: 400 10.5px var(--schrift-familie-app);
}

.bx-hero-abrechnung__feldname {
  margin-left: 14px;
  color: var(--farbe-app-text);
  font: 700 11.5px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-abrechnung__feldwert {
  position: absolute;
  right: 14px;
  color: var(--farbe-app-text);
  font: 400 11.5px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-abrechnung__feldwert--chip {
  top: 9px;
}

.bx-hero-abrechnung__feldwert--summe {
  color: var(--farbe-app-link);
  font-size: 13px;
  font-weight: 700;
}

/* ===== Vorher-Seite (HR Z. 248–325) ===== */
.bx-hero-abrechnung__reiter-1 {
  width: 206px;
}

.bx-hero-abrechnung__reiter-2 {
  width: 200px;
}

.bx-hero-abrechnung__reiter-3 {
  width: 204px;
}

.bx-hero-abrechnung__reiter-4 {
  width: 208px;
}

.bx-hero-abrechnung__sp-24 {
  width: 24%;
}

.bx-hero-abrechnung__sp-16 {
  width: 16%;
}

.bx-hero-regler__tabelle .bx-hero-abrechnung__th-rechts {
  text-align: right;
}

.bx-hero-regler__tabelle .bx-hero-abrechnung__zahl {
  font-family: var(--schrift-familie-mono);
  font-size: 10.5px;
  text-align: right;
}

.bx-hero-abrechnung__summe td {
  background: var(--farbe-flaeche-band);
  font-weight: 700;
}

.bx-hero-abrechnung__papier {
  background: var(--farbe-flaeche-hell);
}

.bx-hero-abrechnung__papier-titel {
  color: var(--farbe-text-sekundaer);
  font: 700 12px var(--schrift-familie-text);
}

.bx-hero-abrechnung__papier-zeile {
  color: var(--farbe-mikrotext);
  font: 400 10.5px var(--schrift-familie-text);
}

.bx-hero-abrechnung__hinweis {
  padding: 2px 5px;
  background: var(--farbe-element-zettel);
  color: var(--farbe-element-zettel-text);
  font: 600 11px var(--schrift-familie-text);
  white-space: nowrap;
}

.bx-hero-abrechnung__mono {
  position: absolute;
  color: var(--farbe-mikrotext);
  font: 500 10px var(--schrift-familie-mono);
}

.bx-hero-abrechnung__papier-fuss {
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-top: 1px solid var(--farbe-linie-eingabe);
  background: var(--farbe-flaeche-toggle);
  font-weight: 400;
}

/* lagen:start (erzeugt aus den lage()-Aufrufen im Modul, nicht von Hand ändern) */
.bx-hero-abrechnung__lage-l96-t96-w836-h268 {
  position: absolute;
  left: 96px;
  top: 96px;
  width: 836px;
  height: 268px;
}

.bx-hero-abrechnung__lage-l930 {
  position: absolute;
  left: 930px;
}

.bx-hero-abrechnung__lage-l1010 {
  position: absolute;
  left: 1010px;
}

.bx-hero-abrechnung__lage-l1068 {
  position: absolute;
  left: 1068px;
}

.bx-hero-abrechnung__lage-l1132 {
  position: absolute;
  left: 1132px;
}

.bx-hero-abrechnung__lage-l1250 {
  position: absolute;
  left: 1250px;
}

.bx-hero-abrechnung__lage-l96-t178-w836-h37 {
  position: absolute;
  left: 96px;
  top: 178px;
  width: 836px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l96-t215-w836-h37 {
  position: absolute;
  left: 96px;
  top: 215px;
  width: 836px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l96-t252-w836-h37 {
  position: absolute;
  left: 96px;
  top: 252px;
  width: 836px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l96-t289-w836-h37 {
  position: absolute;
  left: 96px;
  top: 289px;
  width: 836px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l36 {
  position: absolute;
  left: 36px;
}

.bx-hero-abrechnung__lage-l126 {
  position: absolute;
  left: 126px;
}

.bx-hero-abrechnung__lage-l304 {
  position: absolute;
  left: 304px;
}

.bx-hero-abrechnung__lage-l444 {
  position: absolute;
  left: 444px;
}

.bx-hero-abrechnung__lage-l552 {
  position: absolute;
  left: 552px;
}

.bx-hero-abrechnung__lage-r16 {
  position: absolute;
  right: 16px;
}

.bx-hero-abrechnung__lage-l948-t178-w412-h37 {
  position: absolute;
  left: 948px;
  top: 178px;
  width: 412px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l948-t215-w412-h37 {
  position: absolute;
  left: 948px;
  top: 215px;
  width: 412px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l948-t252-w412-h37 {
  position: absolute;
  left: 948px;
  top: 252px;
  width: 412px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l948-t289-w412-h37 {
  position: absolute;
  left: 948px;
  top: 289px;
  width: 412px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l948-t326-w412-h37 {
  position: absolute;
  left: 948px;
  top: 326px;
  width: 412px;
  height: 37px;
}

.bx-hero-abrechnung__lage-l22-t68-w230 {
  position: absolute;
  left: 22px;
  top: 68px;
  width: 230px;
}

.bx-hero-abrechnung__lage-l22-t82-w196 {
  position: absolute;
  left: 22px;
  top: 82px;
  width: 196px;
}

.bx-hero-abrechnung__lage-l22-t96-w214 {
  position: absolute;
  left: 22px;
  top: 96px;
  width: 214px;
}

.bx-hero-abrechnung__lage-l22-t146-w222 {
  position: absolute;
  left: 22px;
  top: 146px;
  width: 222px;
}

.bx-hero-abrechnung__lage-l22-t160-w180 {
  position: absolute;
  left: 22px;
  top: 160px;
  width: 180px;
}

.bx-hero-abrechnung__lage-l22-t174-w206 {
  position: absolute;
  left: 22px;
  top: 174px;
  width: 206px;
}

.bx-hero-abrechnung__lage-l112-t104 {
  position: absolute;
  left: 112px;
  top: 104px;
}

.bx-hero-abrechnung__lage-l135-t128 {
  position: absolute;
  left: 135px;
  top: 128px;
}

.bx-hero-abrechnung__lage-l96-t150-w836 {
  position: absolute;
  left: 96px;
  top: 150px;
  width: 836px;
}

.bx-hero-abrechnung__lage-l14 {
  position: absolute;
  left: 14px;
}

.bx-hero-abrechnung__lage-l110-t338-w806 {
  position: absolute;
  left: 110px;
  top: 338px;
  width: 806px;
}

.bx-hero-abrechnung__lage-l948-t96-w412-h268 {
  position: absolute;
  left: 948px;
  top: 96px;
  width: 412px;
  height: 268px;
}

.bx-hero-abrechnung__lage-l962-t104 {
  position: absolute;
  left: 962px;
  top: 104px;
}

.bx-hero-abrechnung__lage-l962-t128 {
  position: absolute;
  left: 962px;
  top: 128px;
}

.bx-hero-abrechnung__lage-l948-t150-w412 {
  position: absolute;
  left: 948px;
  top: 150px;
  width: 412px;
}

.bx-hero-abrechnung__lage-r14 {
  position: absolute;
  right: 14px;
}

.bx-hero-abrechnung__lage-l22-t22 {
  position: absolute;
  left: 22px;
  top: 22px;
}

.bx-hero-abrechnung__lage-l22-t40 {
  position: absolute;
  left: 22px;
  top: 40px;
}

.bx-hero-abrechnung__lage-l18-t114 {
  position: absolute;
  left: 18px;
  top: 114px;
}

.bx-hero-abrechnung__lage-r18-t204-dm10 {
  position: absolute;
  right: 18px;
  top: 204px;
  transform: rotate(-10deg);
}

.bx-hero-abrechnung__lage-l12-b9 {
  position: absolute;
  left: 12px;
  bottom: 9px;
}

.bx-hero-abrechnung__lage-l36-t70-w600-h252-dm0p8 {
  position: absolute;
  left: 36px;
  top: 70px;
  width: 600px;
  height: 252px;
  transform: rotate(-0.8deg);
}

.bx-hero-abrechnung__lage-l664-t82-w290-h276-dm2p2 {
  position: absolute;
  left: 664px;
  top: 82px;
  width: 290px;
  height: 276px;
  transform: rotate(-2.2deg);
}

.bx-hero-abrechnung__lage-l982-t72-w178-h140-d4p5 {
  position: absolute;
  left: 982px;
  top: 72px;
  width: 178px;
  height: 140px;
  transform: rotate(4.5deg);
}

.bx-hero-abrechnung__lage-l988-t226-w372-h146-d1p2 {
  position: absolute;
  left: 988px;
  top: 226px;
  width: 372px;
  height: 146px;
  transform: rotate(1.2deg);
}

.bx-hero-abrechnung__lage-l470-t96 {
  position: absolute;
  left: 470px;
  top: 96px;
}

.bx-hero-abrechnung__lage-l748-t334 {
  position: absolute;
  left: 748px;
  top: 334px;
}
/* lagen:ende */

/*
 * Abschnittstyp „kostenprotokoll“ (Vertrag Ph11 §3.3.4, Teilplan M0a §8.4; Design „Allgemein Aufgaben“ „Kosten“):
 * Navy-Karte, Kopf links (340 px), fünf Protokollzeilen rechts (Zeitpunkt | Text | Aufwand). Unter 1080px
 * einspaltig, unter 768px Zeitpunkt über Text und Aufwand. Statisch, keine Bewegung.
 */
.bx-kostenprotokoll {
  position: relative;
  padding: var(--abstand-72) var(--abstand-56) 0;
}

.bx-kostenprotokoll__karte {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--abstand-52);
  align-items: start;
  padding: var(--abstand-52) var(--abstand-56);
  border-radius: var(--radius-box);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-kostenprotokoll__kopf {
  min-width: 0;
}

.bx-kostenprotokoll .bx-sektionskopf__eyebrow {
  color: var(--farbe-orange-navy-hell);
}

.bx-kostenprotokoll .bx-sektionskopf__lead {
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
  letter-spacing: var(--schrift-karte-text-laufweite);
}

.bx-kostenprotokoll__zeilen {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-kostenprotokoll__zeile {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 90px;
  gap: var(--abstand-24);
  align-items: baseline;
  padding: var(--abstand-18) 0;
  border-bottom: 1px solid var(--farbe-navy-linie);
}

.bx-kostenprotokoll__zeile:first-child {
  padding-top: 0;
}

.bx-kostenprotokoll__zeile:last-child {
  border-bottom: 0;
}

.bx-kostenprotokoll__zeitpunkt,
.bx-kostenprotokoll__text,
.bx-kostenprotokoll__aufwand {
  margin: 0;
  overflow-wrap: break-word;
}

.bx-kostenprotokoll__zeitpunkt {
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-pille-zeile);
  letter-spacing: var(--schrift-pille-laufweite);
}

.bx-kostenprotokoll__text {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-text-kompakt-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-text-kompakt-zeile);
  letter-spacing: var(--schrift-text-kompakt-laufweite);
}

.bx-kostenprotokoll__aufwand {
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-brotkrumen-gewicht);
  font-size: var(--schrift-brotkrumen-groesse);
  line-height: var(--schrift-brotkrumen-zeile);
  letter-spacing: var(--schrift-brotkrumen-laufweite);
  text-align: end;
}

@media (width < 1080px) {
  .bx-kostenprotokoll {
    padding-inline: clamp(var(--abstand-20), 4vw, var(--abstand-56));
  }

  .bx-kostenprotokoll__karte {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-32);
    padding: var(--abstand-40) clamp(var(--abstand-20), 4vw, var(--abstand-56));
  }
}

@media (width < 768px) {
  .bx-kostenprotokoll {
    padding: var(--abstand-44) var(--abstand-20) 0;
  }

  .bx-kostenprotokoll__karte {
    padding: var(--abstand-42) var(--abstand-20);
  }

  .bx-kostenprotokoll__zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--abstand-8) var(--abstand-16);
  }

  .bx-kostenprotokoll__zeitpunkt {
    grid-column: 1 / -1;
  }
}

/* 2K und größer: Der Abschnitt wächst nach außen, die Navy-Karte behält ihre Breite wie bei 1440 px */
@media (width > 1440px) {
  .bx-kostenprotokoll {
    padding-inline: calc(var(--abstand-56) + var(--bx-rand-extra));
  }
}

/*
 * Abschnittstyp „kernunterschied“ (Vertrag Ph11 §3.3.5, Teilplan M0a §8.4; Design „Allgemein Aufgaben“
 * „Kernunterschied“): Text und Kette links, Bild (520/360) bzw. Grafik „Von Hand ↔ brainX“ rechts; unter
 * 1080px untereinander. Pfeil-Takt nur CSS, hält bei data-bx-sicht="aus" (Sichtpause Ph8) und unter
 * reduzierter Bewegung.
 */
.bx-kernunterschied {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: var(--abstand-52);
  align-items: center;
  padding: var(--abstand-52) var(--abstand-56);
}

.bx-kernunterschied--hell {
  background-color: var(--farbe-flaeche-hell);
}

.bx-kernunterschied--zart {
  background-color: var(--farbe-flaeche-kachel);
}

.bx-kernunterschied--navy {
  background-color: var(--farbe-navy);
}

.bx-kernunterschied__text {
  min-width: 0;
}

.bx-kernunterschied__kette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-8);
  margin: var(--abstand-24) 0 0;
  padding: 0;
  list-style: none;
}

.bx-kernunterschied__glied {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-8);
  padding: var(--abstand-10) var(--abstand-14);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  background-color: var(--farbe-flaeche-kachel);
  color: var(--farbe-navy);
  font-weight: var(--schrift-trust-chip-gewicht);
  font-size: var(--schrift-trust-chip-groesse);
  line-height: var(--schrift-trust-chip-zeile);
  letter-spacing: var(--schrift-trust-chip-laufweite);
}

/* Der Verbinder steht vor dem Chip, außerhalb seines Rahmens (Design: Pfeil zwischen den Chips) */
.bx-kernunterschied__glied[data-bx-verbinder] {
  margin-inline-start: var(--abstand-20);
}

/* Wert laut Design: das Ergebnisglied („Rechnung“, „Cashflow Übersicht“, „Deal“) ist orange gefüllt (Text: --farbe-orange-text) */
.bx-kernunterschied__glied[data-bx-hervor] {
  border-color: var(--farbe-orange-text);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-kernunterschied__verbinder {
  position: absolute;
  inset-inline-start: calc(var(--abstand-22) * -1);
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-termin-nummer-gewicht);
  font-size: var(--schrift-termin-nummer-groesse);
  line-height: var(--schrift-termin-nummer-zeile);
  letter-spacing: var(--schrift-termin-nummer-laufweite);
}

.bx-kernunterschied__glied[data-bx-verbinder="plus"] .bx-kernunterschied__verbinder {
  color: var(--farbe-mikrotext);
}

.bx-kernunterschied__logo {
  display: inline-flex;
  inline-size: 20px;
  block-size: 20px;
}

.bx-kernunterschied__logo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.bx-kernunterschied__bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-bild);
}

.bx-kernunterschied__bild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 520 / 360;
  object-fit: cover;
  object-position: 0 0;
}

.bx-kernunterschied__fuss {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--abstand-24) var(--abstand-16) var(--abstand-12);
  background: linear-gradient(to top, var(--farbe-flaeche-hell), transparent);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}

/*
 * Vergleichsgrafik (Design „Loesung Abrechnung v3“ Z. 114–156): weiße Hülle, darin oben eine helle (von Hand) und
 * unten eine Navy-Hälfte. Je Hälfte eine Kopfzeile (Kicker links, Stand rechts) und ein Raster Chips | Weg | Karte.
 */
.bx-kernunterschied__grafik {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-14);
  margin: 0;
  padding: var(--abstand-24);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-vergleich);
}

.bx-kernunterschied__seite {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-16) var(--abstand-18) var(--abstand-18);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
}

.bx-kernunterschied__seite[data-bx-seite="unten"] {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-kernunterschied__seite[data-bx-seite="unten"]::before {
  content: '';
  position: absolute;
  inset-inline-end: calc(-1 * var(--abstand-80));
  inset-block-start: -110px; /* Design */
  inline-size: 280px;
  block-size: 260px;
  border-radius: var(--radius-rund);
  background: radial-gradient(circle, var(--farbe-glow-mint-vergleich) 0%, var(--farbe-glow-mint-vergleich-aus) 68%);
  pointer-events: none;
}

.bx-kernunterschied__seite-kopf,
.bx-kernunterschied__seite-raster {
  position: relative;
}

.bx-kernunterschied__seite-kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-12);
  margin-block-end: var(--abstand-14);
}

.bx-kernunterschied__seite-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); /* Wert laut Design: Mitte 100 px */
  align-items: center;
}

.bx-kernunterschied__seite-kicker,
.bx-kernunterschied__seite-stand,
.bx-kernunterschied__uebergang,
.bx-kernunterschied__karte-titel,
.bx-kernunterschied__karte-text,
.bx-kernunterschied__pille {
  margin: 0;
}

.bx-kernunterschied__seite-kicker,
.bx-kernunterschied__seite-stand {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-kernunterschied__seite-kicker {
  color: var(--farbe-mikrotext);
}

.bx-kernunterschied__seite-stand {
  color: var(--farbe-orange-tief);
}

.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__seite-kicker,
.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__seite-stand {
  color: var(--farbe-mint);
}

.bx-kernunterschied__chips {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-kernunterschied__chips li {
  padding: var(--abstand-7) var(--abstand-10);
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-klein);
  background-color: var(--farbe-weiss);
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-tabelle-name-gewicht);
  font-size: var(--schrift-tabelle-name-groesse);
  line-height: normal;
  overflow-wrap: anywhere;
}

.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__chips li {
  border-color: var(--farbe-navy-glas-rand);
  background-color: var(--farbe-navy-flaeche-zart);
  color: var(--farbe-weiss);
}

.bx-kernunterschied__weg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-6);
  padding: 0 var(--abstand-6);
}

.bx-kernunterschied__uebergang {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-vorschau-achse-gewicht);
  font-size: var(--schrift-vorschau-achse-groesse);
  line-height: normal;
  letter-spacing: 0.4px;
  text-align: center;
}

.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__uebergang {
  color: var(--farbe-mint);
}

.bx-kernunterschied__linie {
  position: relative;
  display: block;
  inline-size: 100%;
  border-block-start: 2px dashed var(--farbe-linie-gestrichelt);
}

/* unten: durchgezogene Mint-Linie mit Pfeilspitze */
.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__linie {
  block-size: 2px;
  border: 0;
  background-color: var(--farbe-mint);
}

.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__linie::after {
  content: '';
  position: absolute;
  inset-inline-end: -2px; /* Design */
  inset-block-start: calc(-1 * var(--abstand-4));
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--farbe-mint);
}

.bx-kernunterschied__karte {
  min-inline-size: 0;
  padding: var(--abstand-12) var(--abstand-12) var(--abstand-13);
  border: 1.5px dashed var(--farbe-diagramm-grundlinie);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
}

.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__karte {
  border: 0;
  padding: var(--abstand-13) var(--abstand-13) var(--abstand-13);
}

.bx-kernunterschied__karte-titel {
  color: var(--farbe-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-tabelle-name-gewicht);
  font-size: var(--schrift-tabelle-name-groesse);
  line-height: normal;
  overflow-wrap: anywhere;
}

.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__karte-titel {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fuss-kopf-gewicht);
  font-size: var(--schrift-fuss-kopf-groesse);
}

.bx-kernunterschied__karte-text {
  margin-block: var(--abstand-4) var(--abstand-9);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-widget-untertitel-gewicht);
  font-size: var(--schrift-widget-untertitel-groesse);
  line-height: 1.4;
}

.bx-kernunterschied__pille {
  display: inline-block;
  padding: 3px var(--abstand-9); /* Design */
  border-radius: var(--radius-pille);
  background-color: var(--farbe-orange-blass);
  color: var(--farbe-orange-tief);
  font-weight: var(--schrift-vorschau-pille-gewicht);
  font-size: 11px;
  line-height: normal;
}

.bx-kernunterschied__seite[data-bx-seite="unten"] .bx-kernunterschied__pille {
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-kernunterschied__glied[data-bx-verbinder="pfeil"] .bx-kernunterschied__verbinder {
    animation: bx-kernunterschied-pfeil var(--bewegung-pfeil-takt) ease-in-out infinite;
  }

  .bx-kernunterschied[data-bx-sicht="aus"] .bx-kernunterschied__verbinder {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-kernunterschied__verbinder {
    animation: none;
    animation-delay: 0s;
  }
}

@keyframes bx-kernunterschied-pfeil {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(3px);
  }
}

@media (width < 1080px) {
  .bx-kernunterschied {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-32);
    padding-inline: clamp(var(--abstand-20), 4vw, var(--abstand-56));
  }
}

@media (width < 768px) {
  /* lesbare Fassung: Chips, Weg und Karte untereinander, der Weg als kurze Linie */
  .bx-kernunterschied__seite-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-12);
  }

  .bx-kernunterschied__weg {
    padding-block: var(--abstand-4);
  }

  .bx-kernunterschied {
    gap: var(--abstand-24);
    padding: var(--abstand-42) var(--abstand-20);
  }
}

/* 2K und größer: Fläche über die volle Breite, Inhalt wie bei 1440 px */
@media (width > 1440px) {
  .bx-kernunterschied {
    padding-inline: calc(var(--abstand-56) + var(--bx-rand-extra));
  }
}

/*
 * Abschnittstyp „stationen“ (Vertrag Ph6 §3.10, §6; Teilplan F0c §7.6): Stationsliste nach „Loesung Leads v3“ (LL3
 * Z. 115–285, D Ph5 §8.b) – Kopf, Karte mit Tab-Leiste (Punkt, Linie, Fortschritt), Textspalte mit Höhenstapel und
 * einer Pfeilzeile, Medium rechts. Unter 1080px stehen je zwei Tabs in einer Zeile, die Station ist einspaltig,
 * der Text steht über dem Medium (P4-5). Ohne JavaScript (`@media (scripting: none)`) stehen alle Stationen als Liste
 * unter dem Medium, Tabs und Pfeile entfallen; mit JavaScript zeigt die Karte schon vor dem Start die Tab-Form (E-5).
 * Erledigte Tabs (vor dem gewählten) per :has(), ohne Klasse (E-11). Den Fortschritt zeichnet durchlauf.css bzw. mit
 * Video die Laufzeit-Eigenschaft --bx-stationen-fortschritt (E-12). Halo und Wechsel nur ohne reduzierte Bewegung. Nur
 * Tokens; Stufen nur 768px und 1080px.
 */

.bx-stationen {
  padding: var(--abstand-50) var(--seitenrand);
}

.bx-stationen__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-20) var(--abstand-40);
  margin-block-end: var(--abstand-28);
}

.bx-stationen__eyebrow {
  margin: 0 0 var(--abstand-14);
  color: var(--farbe-mint-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}

.bx-stationen__eyebrow::before {
  content: '\2014\00a0';
}

.bx-stationen__ueberschrift {
  margin: 0;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-h2-gewicht);
  font-size: var(--schrift-h2-groesse);
  line-height: var(--schrift-h2-zeile);
  letter-spacing: var(--schrift-h2-laufweite);
  text-wrap: pretty;
}

.bx-stationen__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-10) var(--abstand-24);
  margin: 0;
}

.bx-stationen__link {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
  text-decoration: none;
  transition: color var(--bewegung-dauer-kurz);
}

.bx-stationen__link:hover,
.bx-stationen__link[data-sg-zustand="hover"] {
  color: var(--farbe-orange-text);
}

.bx-stationen__link:first-child {
  color: var(--farbe-orange-text);
}

.bx-stationen__link:first-child:hover,
.bx-stationen__link:first-child[data-sg-zustand="hover"] {
  color: var(--farbe-navy);
}

/* Karte */

.bx-stationen__karte {
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-box);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-stationen);
}

.bx-stationen__tabs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  row-gap: var(--abstand-6);
  padding: var(--abstand-8);
  border-block-end: 1px solid var(--farbe-linie-karte);
  background-color: var(--farbe-flaeche-karte);
}

.bx-stationen__tab {
  position: relative;
  display: grid;
  grid-template-rows: 14px auto; /* Zeile des Punkts (Design) */
  row-gap: var(--abstand-16);
  align-content: start;
  padding: var(--abstand-18) var(--abstand-20);
  border: 0;
  border-radius: var(--radius-rahmen);
  background-color: transparent;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tab-gewicht);
  font-size: var(--schrift-tab-groesse);
  line-height: var(--schrift-tab-zeile);
  letter-spacing: var(--schrift-tab-laufweite);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--bewegung-dauer-kurz), box-shadow var(--bewegung-dauer-kurz),
    transform var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz);
}

.bx-stationen__tab:hover,
.bx-stationen__tab[data-sg-zustand="hover"] {
  color: var(--farbe-navy);
  transform: translateY(var(--bewegung-lift));
}

.bx-stationen__tab[aria-selected="true"] {
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
  box-shadow: var(--schatten-tab-station);
}

/* Linie von der Punktmitte bis zur Punktmitte des nächsten Tabs (Design −27 px = Polster 20 + halber Punkt 7) */
.bx-stationen__tab::before,
.bx-stationen__fortschritt {
  position: absolute;
  inset-block-start: var(--abstand-24);
  inset-inline: calc(var(--abstand-20) + var(--abstand-7)) calc(-1 * (var(--abstand-20) + var(--abstand-7)));
  block-size: 2px;
}

.bx-stationen__tab::before {
  content: '';
  background-color: var(--farbe-linie-mittel);
  transition: background-color var(--bewegung-dauer-kurz);
}

.bx-stationen__tab:has(~ [aria-selected="true"])::before {
  background-color: var(--farbe-navy);
}

.bx-stationen__tab:last-child::before,
.bx-stationen__tab:last-child .bx-stationen__fortschritt {
  inset-inline-end: var(--abstand-20);
}

.bx-stationen__fortschritt {
  z-index: 1;
  background-color: var(--farbe-orange-flaeche);
  transform: scaleX(var(--bx-stationen-fortschritt, 0));
  transform-origin: left;
}

.bx-stationen__punkt {
  position: relative;
  z-index: 2;
  display: block;
  inline-size: 14px;
  block-size: 14px;
  box-sizing: border-box;
  border: 2px solid var(--farbe-linie-stark);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  transition: background-color var(--bewegung-dauer-kurz), border-color var(--bewegung-dauer-kurz);
}

.bx-stationen__tab[aria-selected="true"] .bx-stationen__punkt {
  border-color: var(--farbe-orange-flaeche);
  background-color: var(--farbe-orange-flaeche);
}

.bx-stationen__tab:has(~ [aria-selected="true"]) .bx-stationen__punkt {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
}

.bx-stationen__tab-text {
  text-wrap: pretty;
}

/* Station: Textspalte und Medium */

.bx-stationen__raster {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr); /* Textspalte (Design) */
  gap: var(--abstand-40);
  align-items: center;
  padding: var(--abstand-36) var(--abstand-34) var(--abstand-36) var(--abstand-40);
}

.bx-stationen__inhalt {
  min-inline-size: 0;
}

.bx-stationen__nummer {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-sitemap-nummer-gewicht);
  font-size: var(--schrift-sitemap-nummer-groesse);
  line-height: var(--schrift-sitemap-nummer-zeile);
  letter-spacing: var(--schrift-sitemap-nummer-laufweite);
}

.bx-stationen__titel {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-station-titel-gewicht);
  font-size: var(--schrift-station-titel-groesse);
  line-height: var(--schrift-station-titel-zeile);
  letter-spacing: var(--schrift-station-titel-laufweite);
  text-wrap: pretty;
}

.bx-stationen__text {
  margin: 0 0 var(--abstand-26);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-faq-antwort-gewicht);
  font-size: var(--schrift-faq-antwort-groesse);
  line-height: var(--schrift-faq-antwort-zeile);
  letter-spacing: var(--schrift-faq-antwort-laufweite);
  text-wrap: pretty;
}

.bx-stationen__laeuft-mit {
  margin: 0 0 var(--abstand-14);
  color: var(--farbe-mint-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-stationen__laeuft-mit[hidden] {
  display: none;
}

.bx-stationen__punkte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-stationen__punkte li {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-12);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-termin-schritt-text-gewicht);
  font-size: var(--schrift-termin-schritt-text-groesse);
  line-height: var(--schrift-termin-schritt-text-zeile);
  letter-spacing: var(--schrift-termin-schritt-text-laufweite);
  text-wrap: pretty;
}

.bx-stationen__punkte .bx-icon-kreis {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px; /* Design */
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen);
}

/* die eine Pfeilzeile nach dem Stapel (H6-32/F0c R-1) */
.bx-stationen__pfeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-10);
  margin-block-start: var(--abstand-30);
}

.bx-stationen__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1.5px solid var(--farbe-linie-mittel);
  border-radius: var(--radius-pille);
  background-color: transparent;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-tab-groesse);
  line-height: var(--schrift-tab-zeile);
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--bewegung-dauer-kurz), border-color var(--bewegung-dauer-kurz),
    color var(--bewegung-dauer-kurz);
}

.bx-stationen__pfeil:hover,
.bx-stationen__pfeil[data-sg-zustand="hover"] {
  border-color: var(--farbe-navy);
  color: var(--farbe-orange-text);
}

.bx-stationen__pfeil[data-bx-stationen-schritt="1"] {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-stationen__pfeil[data-bx-stationen-schritt="1"]:hover,
.bx-stationen__pfeil[data-bx-stationen-schritt="1"][data-sg-zustand="hover"] {
  border-color: var(--farbe-orange-text);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-stationen__laufstatus {
  margin-inline-start: var(--abstand-6);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
  letter-spacing: var(--schrift-etikett-laufweite);
}

.bx-stationen__laufstatus[hidden] {
  display: none;
}

.bx-stationen__medium {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  padding: var(--abstand-20);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-flaeche-toggle);
}

.bx-stationen__medium::before {
  content: '';
  position: absolute;
  inset-block-start: -120px; /* Design */
  inset-inline-end: calc(-1 * var(--abstand-80));
  inline-size: 360px;
  block-size: 300px;
  background: radial-gradient(closest-side, var(--farbe-glow-orange-medium), transparent);
  pointer-events: none;
}

.bx-stationen__medium > * {
  position: relative;
}

.bx-stationen__rahmen {
  overflow: hidden;
  border-radius: var(--radius-karte);
  background-color: var(--farbe-navy-tief);
  box-shadow: var(--schatten-video);
  clip-path: inset(0 round var(--radius-karte));
}

/* Nicht für die Bilder in der Bühne einer Produkt-Animation (Avatare, Logos mit eigener Größe); nur das Standbild füllt den Rahmen (BW-70) */
.bx-stationen__rahmen img:not(.bx-produkt-animation__buehne img),
.bx-stationen__rahmen .bx-produkt-animation__standbild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/*
 * Mit JavaScript vor dem Start: schon die Tab-Form, nur das erste Panel sichtbar (E-5, N2-8). Lädt stationen.js nicht,
 * endet die Regel mit dem ersten Wechsel von tabs.js (dann trägt ein Panel aria-hidden): alle Panels bleiben über die
 * Tabs erreichbar. :where() hält die Spezifität gleich, damit @media (scripting: none) unten weiter überschreibt.
 */
[data-bx-stationen-zustand="liste"]:where(:not(:has(.bx-stationen__station[aria-hidden="true"])))
  .bx-stationen__station:not(:first-child) {
  visibility: hidden;
}

/* Bewegung nur ohne reduzierte Bewegung: Halo am gewählten Punkt, Wechsel beim Wegfall von aria-hidden (erst nach dem
   ersten Wechsel, data-bx-stationen-gewechselt: Panel 1 blendet beim Start nicht ein) */
@keyframes bx-stationen-halo {
  0%,
  100% {
    box-shadow: var(--schatten-szenario-aus);
  }

  50% {
    box-shadow: var(--schatten-halo-orange-aus);
  }
}

@keyframes bx-stationen-wechsel {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* Ph12 D (V-D-integrationen-20): Ablauf wechselt mit 10 px Versatz (Design bxWechsel, .45s) */
@keyframes bx-stationen-ablauf-wechsel {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bx-stationen__tab[aria-selected="true"] .bx-stationen__punkt {
    animation: bx-stationen-halo 2.6s ease-in-out infinite;
  }

  [data-bx-stationen-zustand="tabs"][data-bx-stationen-gewechselt] .bx-stationen__station:not([aria-hidden="true"]) {
    animation: bx-stationen-wechsel var(--bewegung-wechsel-dauer) var(--bewegung-wechsel-kurve) both;
  }

  .bx-stationen[data-bx-variante="ablauf"] [data-bx-stationen-zustand="tabs"][data-bx-stationen-gewechselt] .bx-stationen__station:not([aria-hidden="true"]) {
    animation: bx-stationen-ablauf-wechsel var(--bewegung-ablauf-wechsel-dauer) var(--bewegung-ablauf-wechsel-kurve) both;
  }

  /* Ph8 H3a: das Overlay des gewählten Falls blendet ein (Variante faelle) */
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(1)[aria-selected="true"]) [data-bx-stationen-hinweis="1"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(2)[aria-selected="true"]) [data-bx-stationen-hinweis="2"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(3)[aria-selected="true"]) [data-bx-stationen-hinweis="3"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(4)[aria-selected="true"]) [data-bx-stationen-hinweis="4"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(5)[aria-selected="true"]) [data-bx-stationen-hinweis="5"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(6)[aria-selected="true"]) [data-bx-stationen-hinweis="6"] {
    animation: bx-stationen-hinweis-ein var(--bewegung-wechsel-dauer) var(--bewegung-wechsel-kurve) both;
  }
}

@media (width < 1080px) {
  .bx-stationen__tabs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-stationen__tab:nth-child(2n)::before,
  .bx-stationen__tab:nth-child(2n) .bx-stationen__fortschritt {
    inset-inline-end: var(--abstand-20);
  }

  .bx-stationen__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-20);
    padding: var(--abstand-36) var(--abstand-20);
  }
}

@media (width < 768px) {
  .bx-stationen {
    padding: var(--abstand-40) var(--seitenrand);
  }

  .bx-stationen__kopf {
    column-gap: var(--abstand-20);
  }
}

/* Ohne JavaScript: alle Stationen als Liste unter dem Medium, Tabs und Pfeile aus (LS, Ph5 §11, E-5) */
@media (scripting: none) {
  [data-bx-stationen-zustand="liste"] .bx-stationen__tabs,
  [data-bx-stationen-zustand="liste"] .bx-stationen__pfeile {
    display: none;
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__medium {
    order: -1;
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__stapel {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-40);
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__station:not(:first-child) {
    visibility: visible;
  }

  /* Ph8 H3a: Variante faelle als Liste, die Overlays entfallen (der Hinweis steht im Panel) */
  [data-bx-stationen-zustand="liste"] .bx-stationen__faelle,
  [data-bx-stationen-zustand="liste"] .bx-stationen__hinweis {
    display: none;
  }

  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__karte[data-bx-stationen-zustand="liste"] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__faelle + .bx-stationen__raster {
    margin-block-start: var(--abstand-28);
  }
}

/*
 * Ph8 H3a – Variante „faelle“ (Vertrag Ph8 Ä8-7, §3.11; Design APP Produktseite Tour v3 „Subscription-Abrechnung“):
 * links senkrechte Fall-Tabs mit Fortschritt, rechts das App-Fenster mit den Hinweis-Overlays und je Fall die
 * grüne Ergebniszeile samt Rechenweg. Das Overlay folgt dem gewählten Tab per :has() (stationen.js bleibt unverändert);
 * ohne JavaScript steht jeder Fall als Liste unter dem Fenster. Nur Tokens; Stufen nur 1080px.
 */
.bx-stationen__kopf-text {
  max-inline-size: 780px;
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-lead-klein-gewicht);
  font-size: var(--schrift-lead-klein-groesse);
  line-height: var(--schrift-lead-klein-zeile);
  letter-spacing: var(--schrift-lead-klein-laufweite);
  text-wrap: pretty;
}

.bx-stationen[data-bx-variante="faelle"] {
  padding-block: var(--abstand-76) var(--abstand-72);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__kopf {
  display: block;
  max-inline-size: 780px;
  margin-block-end: var(--abstand-36);
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__eyebrow {
  color: var(--farbe-orange-text);
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__karte {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--abstand-56);
  align-items: start;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.bx-stationen__faelle {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-8);
  min-inline-size: 0;
}

.bx-stationen__fall {
  position: relative;
  display: grid;
  grid-template-columns: var(--abstand-28) minmax(0, 1fr);
  gap: var(--abstand-14);
  align-items: start;
  overflow: hidden;
  padding: var(--abstand-16) var(--abstand-18);
  border: 1px solid transparent;
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-flaeche-band);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--bewegung-panel-dauer), box-shadow var(--bewegung-panel-dauer),
    transform var(--bewegung-dauer-kurz);
}

.bx-stationen__fall:hover,
.bx-stationen__fall[data-sg-zustand="hover"] {
  transform: translateY(var(--bewegung-lift));
  box-shadow: var(--schatten-karte-hover-klein);
}

.bx-stationen__fall[aria-selected="true"] {
  border-color: var(--farbe-linie);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-tab-station);
}

.bx-stationen__fall-nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--abstand-28);
  block-size: var(--abstand-28);
  border-radius: var(--radius-rund);
  background-color: var(--farbe-streifen-hell);
  color: var(--farbe-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
  transition: background-color var(--bewegung-panel-dauer), color var(--bewegung-panel-dauer);
}

.bx-stationen__fall[aria-selected="true"] .bx-stationen__fall-nummer {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-stationen__fall-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  min-inline-size: 0;
}

.bx-stationen__fall-titel {
  color: var(--farbe-navy);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-termin-schritt-titel-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
  letter-spacing: var(--schrift-termin-schritt-titel-laufweite);
}

.bx-stationen__fall-text {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-treffer-beschreibung-gewicht);
  font-size: var(--schrift-treffer-beschreibung-groesse);
  line-height: var(--schrift-treffer-beschreibung-zeile);
  letter-spacing: var(--schrift-treffer-beschreibung-laufweite);
  text-wrap: pretty;
}

.bx-stationen__fall-fortschritt {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 3px;
  background-color: var(--farbe-orange-flaeche);
  transform: scaleX(0);
  transform-origin: left;
}

/* rechte Spalte: Fenster und Ergebnis bilden eine Karte (Design: ein Rahmen um Fenster, Bild und Ergebniszeile) */
.bx-stationen[data-bx-variante="faelle"] .bx-stationen__raster {
  display: block;
  min-inline-size: 0;
  padding: 0;
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__medium {
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__medium::before {
  content: none;
}

.bx-stationen[data-bx-variante="faelle"] .bx-app-fenster {
  border-block-end: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: var(--radius-panel);
  border-start-end-radius: var(--radius-panel);
  box-shadow: var(--schatten-story-fenster);
}

.bx-stationen__hinweis {
  position: absolute;
  inset-block-end: var(--abstand-14);
  inset-inline-end: var(--abstand-14);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-5);
  max-inline-size: min(330px, 82%);
  padding: var(--abstand-12) var(--abstand-15) var(--abstand-13);
  border-radius: var(--radius-promo);
  background-color: var(--farbe-navy);
  box-shadow: var(--schatten-video-hinweis);
  visibility: hidden;
}

.bx-stationen__hinweis-label {
  display: flex;
  align-items: center;
  gap: var(--abstand-7);
  color: var(--farbe-team-projekte); /* Wert wie Design (#FF9270) */
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-stationen__hinweis-label::before {
  content: '';
  flex: none;
  inline-size: var(--abstand-7);
  block-size: var(--abstand-7);
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
}

.bx-stationen__hinweis-satz {
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-feld-kompakt-betont-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
  text-wrap: pretty;
}

/* Overlay = gewählter Tab (Wertetabelle n = 1…6, Ph6 `stationen` höchstens sechs Stationen) */
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(1)[aria-selected="true"]) [data-bx-stationen-hinweis="1"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(2)[aria-selected="true"]) [data-bx-stationen-hinweis="2"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(3)[aria-selected="true"]) [data-bx-stationen-hinweis="3"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(4)[aria-selected="true"]) [data-bx-stationen-hinweis="4"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(5)[aria-selected="true"]) [data-bx-stationen-hinweis="5"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(6)[aria-selected="true"]) [data-bx-stationen-hinweis="6"] {
  visibility: visible;
}

.bx-stationen__fall-panel {
  min-inline-size: 0;
}

.bx-stationen__fall-panel > .bx-stationen__titel,
.bx-stationen__fall-panel > .bx-stationen__text,
.bx-stationen__fall-panel > .bx-stationen__hinweis-text {
  margin: 0 0 var(--abstand-10);
}

.bx-stationen__hinweis-text span {
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
}

.bx-stationen__ergebnis {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-10);
  margin: 0;
  padding: var(--abstand-14) var(--abstand-20);
  border: 1px solid var(--farbe-ergebnis-gruen-rand);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-faq-antwort-zeile);
  text-wrap: pretty;
}

.bx-stationen__ergebnis .bx-icon-kreis {
  flex: none;
  inline-size: var(--abstand-20);
  block-size: var(--abstand-20);
  margin-block-start: 1px; /* Design */
  background-color: var(--farbe-gruen);
  color: var(--farbe-weiss);
}

.bx-stationen__fussnote {
  margin: var(--abstand-12) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
  letter-spacing: var(--schrift-fussnote-laufweite);
  text-wrap: pretty;
}

@keyframes bx-stationen-hinweis-ein {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* mit Skript: Titel, Text und Hinweis der Panels stehen schon im Tab bzw. im Overlay (Hinweis nur für Screenreader) */
@media (scripting: enabled) {
  .bx-stationen__fall-panel > .bx-stationen__titel,
  .bx-stationen__fall-panel > .bx-stationen__text {
    display: none;
  }

  .bx-stationen__fall-panel > .bx-stationen__hinweis-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (width < 1080px) {
  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__karte {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-28);
  }
}

@media (width < 768px) {
  .bx-stationen[data-bx-variante="faelle"] {
    padding-block: var(--abstand-48);
  }

  .bx-stationen__fall {
    padding: var(--abstand-14);
  }
}

/*
 * Ph12 Design-Abgleich (APP Produktseite Tour v3, mobil): Der Hinweis-Kasten liegt nicht mehr über dem Screenshot, sondern
 * im Raster darunter (Rand 12 px, Zeilenabstand 12 px). Das Medium übernimmt dafür den Rahmen des Fensters. Alle fünf
 * Kästen teilen sich eine Zelle, sichtbar ist nur der gewählte: die Höhe bleibt beim Wechsel gleich. Ohne Skript gilt
 * die Liste, dort entfallen die Kästen.
 */
@media (width < 768px) and (scripting: enabled) {
  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__medium {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--abstand-12);
    padding-block-end: var(--abstand-12);
    overflow: hidden;
    border: 1px solid var(--farbe-linie-karte);
    border-block-end: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--farbe-flaeche-band);
    box-shadow: var(--schatten-story-fenster);
  }

  .bx-stationen[data-bx-variante="faelle"] .bx-app-fenster {
    grid-area: 1 / 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__hinweis {
    position: static;
    grid-area: 2 / 1;
    align-self: start;
    max-inline-size: none;
    margin-inline: var(--abstand-12);
  }
}

/* Ph9 I1c: Ablauf (DV2 Z. 161–244); Standard-Regeln bleiben unverändert. */
.bx-stationen__kopftext-text {
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-text-sekundaer);
}

.bx-stationen[data-bx-variante="ablauf"] {
  padding: var(--abstand-80) var(--seitenrand) var(--abstand-sektion-gross);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__karte {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__kopftext {
  max-width: var(--breite-text-max);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__eyebrow {
  color: var(--farbe-orange-text);
  text-transform: uppercase;
}

/* Gruppenleiste und Tabliste bilden eine Fläche (Design: Labels in der Tabliste) */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppen {
  display: grid;
  column-gap: var(--abstand-6);
  padding: var(--abstand-6) var(--abstand-6) 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background-color: var(--farbe-flaeche-karte);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppe {
  display: flex;
  align-items: center;
  gap: var(--abstand-10);
  min-width: 0;
  padding: var(--abstand-8) var(--abstand-10) 0;
  color: var(--farbe-mikrotext);
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-gruppenlabel-gewicht);
  font-size: var(--schrift-gruppenlabel-groesse);
  line-height: var(--schrift-gruppenlabel-zeile);
  letter-spacing: var(--schrift-gruppenlabel-laufweite);
}

/* Linie hinter dem Label bis zum Ende der Gruppe */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppe::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--farbe-linie-eingabe);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tabs {
  grid-auto-flow: row;
  gap: var(--abstand-6);
  padding: var(--abstand-6);
  border: 0;
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

/* Tab: Nummer neben dem Titel */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-10);
  min-width: 0;
  overflow: hidden;
  padding: var(--abstand-14) var(--abstand-14) var(--abstand-17);
  border: 0;
  border-radius: var(--radius-promo);
  color: var(--farbe-navy);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab[aria-selected="true"] {
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-tab-aktiv);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tabnummer {
  flex: none;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-tab-nummer-gewicht);
  font-size: var(--schrift-tab-nummer-groesse);
  line-height: var(--schrift-tab-nummer-zeile);
  letter-spacing: var(--schrift-tab-nummer-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab[aria-selected="true"] .bx-stationen__tabnummer {
  color: var(--farbe-orange-text);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--schrift-tab-titel-gewicht);
  font-size: var(--schrift-tab-titel-groesse);
  line-height: var(--schrift-tab-titel-zeile);
  letter-spacing: var(--schrift-tab-titel-laufweite);
}

/* Fortschritt unten im Tab */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__fortschritt {
  inset-block: auto var(--abstand-6);
  inset-inline: var(--abstand-14);
  block-size: 3px; /* Fortschritt 3px hoch (DV2 Z. 174) */
  border-radius: var(--radius-strich);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__stapel {
  margin-block-start: var(--abstand-20);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__station {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "medium text";
  gap: var(--abstand-28) var(--abstand-44);
  align-items: center;
  padding: 0;
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__text {
  grid-area: text;
  min-width: 0;
  margin: 0;
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__text > p:last-child {
  margin: 0;
}

/* Schrittnummer: Mono versal in Grau (Design „SCHRITT 01 · EINMALIG“) */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__nummer {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-mikrotext);
  text-transform: uppercase;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-gruppenlabel-gewicht);
  font-size: var(--schrift-gruppenlabel-groesse);
  line-height: var(--schrift-gruppenlabel-zeile);
  letter-spacing: var(--schrift-gruppenlabel-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__titel {
  margin: 0 0 var(--abstand-10);
  font-weight: var(--schrift-h3-gross-gewicht);
  font-size: var(--schrift-h3-gross-groesse);
  line-height: var(--schrift-h3-gross-zeile);
  letter-spacing: var(--schrift-h3-gross-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium {
  grid-area: medium;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1600 / 820;
  margin: 0;
  padding: 0;
  overflow: hidden;
  container-type: inline-size; /* cqw der Ablauf-Grafiken gilt für die Breite des Mediums (auch auf dem Grafik-Element selbst) */
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-karte-klein);
  background: var(--farbe-flaeche-karte);
  box-shadow: var(--schatten-medium);
}

/* Bildregel nur für Screenshots als direkte Kinder, nicht für Logos in den Grafiken */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium > picture,
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium > picture img,
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Das Ablauf-Medium und die Tabs haben keinen Ph6-Halo bzw. keine Ph6-Verbindungslinie. */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium::before,
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab::before {
  content: none;
}

.bx-stationen[data-bx-variante="ablauf"] [data-bx-medium-spalte="nein"] .bx-stationen__station {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text";
}

/* Ph12: Textabläufe ohne Screenshot behalten die Zeilenlänge des Designs. */
.bx-stationen[data-bx-variante="ablauf"] [data-bx-medium-spalte="nein"] .bx-stationen__text {
  max-inline-size: 640px;
}

.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="1"] { grid-column-start: 1; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="1"] { grid-column-end: 2; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="2"] { grid-column-start: 2; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="2"] { grid-column-end: 3; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="3"] { grid-column-start: 3; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="3"] { grid-column-end: 4; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="4"] { grid-column-start: 4; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="4"] { grid-column-end: 5; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="5"] { grid-column-start: 5; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="5"] { grid-column-end: 6; }

@media (width < 1080px) {
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__station {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "medium";
  }
}

@media (width < 768px) {
  .bx-stationen[data-bx-variante="ablauf"] [data-bx-medium-spalte="nein"] .bx-stationen__text {
    max-inline-size: none;
  }

  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tabs[data-bx-spalten] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppe[data-bx-gruppe-von] {
    grid-column: 1 / -1;
  }

  /* Tab-Titel nur visuell aus: Clip-Muster von bx-unsichtbar, der zugängliche Name bleibt „0n {kurz}“ (A-104) */
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px; /* Design */
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (scripting: none) {
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppen,
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tabs {
    display: none;
  }

  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__station {
    grid-area: auto;
    margin-block-end: var(--abstand-40);
    visibility: visible;
    opacity: 1;
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: Variante `termine` (Ä11-21, A-25, N11-11; Design `Loesung Abrechnung v3` „Vertragsjahr“ Z. 364–651) ==
 * Termin-Knöpfe in der Tab-Leiste der Ph6-Karte (Punkt, Linie, Fortschritt bleiben die Ph6-Regeln), darunter je Termin
 * Kicker, H3, Text und die App-Karte zweispaltig, unter 1080px gestapelt. Der Laufstatus erscheint erst in der
 * Tab-Form (stationen.js) und zeigt je `data-bx-durchlauf` einen der zwei Texte. Ohne JavaScript stehen alle Termine
 * als Liste mit Datum und Name. Ohne `data-bx-variante="termine"` greift keine dieser Regeln.
 */
.bx-stationen__termine-hinweis {
  max-inline-size: 780px;
  margin: calc(-1 * var(--abstand-16)) 0 var(--abstand-28);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-trust-titel-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
}

.bx-stationen__termin-datum {
  display: block;
  margin-block-end: var(--abstand-5);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-meta-mono-gewicht);
  font-size: var(--schrift-meta-mono-groesse);
  line-height: var(--schrift-meta-mono-zeile);
  letter-spacing: var(--schrift-meta-mono-laufweite);
}

.bx-stationen__termin-name {
  display: block;
  font-weight: var(--schrift-textlink-gewicht);
}

.bx-stationen__termine-inhalt {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-36) var(--abstand-40) var(--abstand-34);
}

/* BW-76: Mint-Glow oben rechts (Design: right -160, top -180, 560 × 460) */
.bx-stationen__termine-inhalt::before {
  content: '';
  position: absolute;
  inset-block-start: -180px; /* Design */
  inset-inline-end: -160px; /* Design */
  inline-size: 560px;
  block-size: 460px;
  background: radial-gradient(closest-side, var(--farbe-mint-glow-zart), transparent);
  pointer-events: none;
}

.bx-stationen__termine-inhalt > * {
  position: relative;
}

.bx-stationen__termin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--abstand-32) var(--abstand-48);
  align-items: center;
}

.bx-stationen__termin-marke {
  display: none;
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-mikrotext);
}

.bx-stationen__termin-kicker {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-mint-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-stationen__termin .bx-stationen__text {
  margin: 0;
}

/* App-Karte (Roboto-Nachbau, Demo-Werte; Text lesbar, Kontrast vor Designfarbe) */
.bx-stationen__app {
  min-inline-size: 0;
}

.bx-stationen__app-kopf {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-chip-mono-laufweite);
}

.bx-stationen__app-fenster {
  overflow: hidden;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-chip);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-tab-station);
  color: var(--farbe-app-text);
  font-family: var(--schrift-familie-app);
}

.bx-stationen__app-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  margin: 0;
  padding: var(--abstand-15) var(--abstand-18);
  border-block-end: 1px solid var(--farbe-app-linie);
  font-weight: var(--schrift-widget-titel-gewicht);
  font-size: var(--schrift-widget-titel-groesse);
  line-height: var(--schrift-widget-titel-zeile);
}

.bx-stationen__app-chip {
  flex: none;
  padding: var(--abstand-4) var(--abstand-10);
  border-radius: var(--radius-app);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  font-size: var(--schrift-pille-gross-groesse);
}

.bx-stationen__app-zeilen {
  margin: 0;
}

.bx-stationen__app-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-16);
  padding: var(--abstand-13) var(--abstand-18);
  border-block-end: 1px solid var(--farbe-linie-karte);
  font-size: var(--schrift-textlink-groesse);
}

.bx-stationen__app-zeile dt {
  font-weight: var(--schrift-textlink-gewicht);
  white-space: nowrap;
}

.bx-stationen__app-zeile dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--abstand-4) var(--abstand-8);
  margin: 0;
  text-align: end;
}

.bx-stationen__app-alt {
  color: var(--farbe-mikrotext);
}

.bx-stationen__app-zeile--betrag {
  padding-block: var(--abstand-15);
  border-block-end: 0;
  background-color: var(--farbe-flaeche-karte);
}

.bx-stationen__app-betrag {
  color: var(--farbe-gruen);
  font-weight: var(--schrift-rechner-wert-gewicht);
  font-size: var(--schrift-rechner-wert-groesse);
  white-space: nowrap;
}

/* Laufstatus: erst in der Tab-Form, Text je Durchlauf-Zustand (A-25) */
.bx-stationen__termine-status {
  display: none;
  align-items: center;
  gap: var(--abstand-10);
  margin: var(--abstand-26) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-meta-mono-gewicht);
  font-size: var(--schrift-meta-mono-groesse);
  line-height: var(--schrift-meta-mono-zeile);
  letter-spacing: var(--schrift-meta-mono-laufweite);
}

[data-bx-stationen-zustand="tabs"] .bx-stationen__termine-status {
  display: flex;
}

.bx-stationen__termine-punkt {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-mint-akzent);
}

[data-bx-durchlauf="aus"] [data-bx-termine-status="laeuft"],
[data-bx-durchlauf="laeuft"] [data-bx-termine-status="angehalten"],
[data-bx-durchlauf="pausiert"] [data-bx-termine-status="angehalten"] {
  display: none;
}

.bx-stationen__termine-fussnote {
  max-inline-size: 900px;
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

@media (width < 1080px) {
  .bx-stationen__termin {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-20);
  }

  .bx-stationen__termine-inhalt {
    padding: var(--abstand-36) var(--abstand-20);
  }
}

/* Ohne JavaScript: Datum und Name stehen im Panel (die Tabs entfallen, Ph6-Regel oben) */
@media (scripting: none) {
  .bx-stationen--termine .bx-stationen__termin-marke {
    display: block;
  }
}

/* Abgleich 27.10.: zwischen Mobil- und Engstufe stehen Nummer und Titel im Tab untereinander, der Titel bricht um
   statt mit Auslassungspunkten zu enden (nur Seiten mit tab_umbruch, Design „Integration d.velop“ tabEng) */
@media (width >= 768px) and (width < 1024px) {
  .bx-stationen[data-bx-variante="ablauf"][data-bx-tab-umbruch="ja"] .bx-stationen__tab {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-5);
    padding: var(--abstand-12) var(--abstand-10) var(--abstand-17);
  }

  .bx-stationen[data-bx-variante="ablauf"][data-bx-tab-umbruch="ja"] .bx-stationen__tab-text {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
  }
}

/*
 * Tabs (Teilplan B4 E4, E5): Zustandswirkung. Außerhalb eines Höhenstapels (data-bx-hoehe-zustand) wird ein inaktives
 * Panel ausgeblendet; im Stapel bleibt es in der Rasterzelle und ist nur unsichtbar (hoehe.css). Ohne JavaScript
 * bleibt es dabei: sichtbar ist das erste Panel, die übrigen stehen im HTML.
 */
[data-bx-tabs-panel][aria-hidden="true"]:not([data-bx-hoehe-zustand]) {
  display: none;
}

/*
 * Höhenausgleich (Teilplan B4 E4, DS AK7): alle Zustände eines Moduls liegen in derselben Rasterzelle, der
 * längste trägt die Höhe, der Wechsel ändert sie nicht. Inaktive Zustände tragen aria-hidden und inert und sind
 * nur unsichtbar (nie display: none: das nähme sie aus dem Raster).
 */
[data-bx-modul~="hoehe"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

[data-bx-hoehe-zustand] {
  grid-area: 1 / 1;
  min-inline-size: 0;
}

[data-bx-hoehe-zustand][aria-hidden="true"] {
  visibility: hidden;
}

/*
  Kern der Produktvideos video-* (Teilplan E2 §8.4, E-1 bis E-3, E-6, E-10, E-11): die Teile der vereinfachten brainX-
  Oberfläche, die alle vier Videos gemeinsam haben (video-leads.js Z. 78–212, Klassen .sc .ab .fl .sb* .ly .h1 .h2 .hr
  .tabs .lin .bo .bg .to .cd .ct .cs .th .tr .lk .cb .ch .fd .dim .dl* .sh .in .kar .df .tg .dd .hl .ov* .kp* .cu .ri
  .us) in Bühnen-px (Designgröße 1920 × 1003, als Ganzes skaliert). Farben, Schriften, Schatten und Radien nur als
  Tokens; Zustände als Attribute data-bx-<name> (aktiv, fokus, gedrueckt, hover, gedaempft). Der Anfangszustand der
  Teile ist nur über opacity: 0 verborgen, nie über visibility (N5-116): das JS setzt nur opacity (N5-74); einzige
  Ausnahme ist die Standbild-Regel für Zeiger und Ring. Orange als Text über --farbe-orange-navy-text (R-5), als
  Fläche, Rand und Ring über --farbe-orange-flaeche. Leads-eigene Teile und die Farben der Chips stehen im Element-CSS.
*/

.bx-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--farbe-flaeche-hell);
  font-family: var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-video * {
  box-sizing: border-box;
}

.bx-video__abs {
  position: absolute;
}

.bx-video__fl {
  display: flex;
  align-items: center;
}

/* Seitenleiste (VL Z. 81–92) */
.bx-video__leiste {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  height: 1003px;
  background: var(--farbe-app-kopf);
}

.bx-video__mandant {
  position: absolute;
  left: 16px;
  top: 22px;
  width: 208px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-app-text);
  font: 700 19px var(--schrift-familie-app);
  color: var(--farbe-weiss);
}

.bx-video__mandant-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pille);
  background: var(--farbe-orange-flaeche);
  color: var(--farbe-weiss);
}

.bx-video__suche {
  position: absolute;
  left: 20px;
  top: 102px;
  width: 200px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss);
  font: 400 17px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
}

.bx-video__leistentitel {
  position: absolute;
  left: 22px;
  font: 700 14px var(--schrift-familie-app);
  color: var(--farbe-app-leiste-sekundaer);
  letter-spacing: 0.6px;
}

.bx-video__nav {
  position: absolute;
  left: 0;
  width: 240px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  font: 400 21px var(--schrift-familie-app);
  color: var(--farbe-weiss);
  white-space: nowrap;
}

.bx-video__nav svg {
  flex: none;
}

.bx-video__nav[data-bx-gedaempft] {
  color: var(--farbe-app-leiste-sekundaer);
}

.bx-video__nav[data-bx-aktiv] {
  color: var(--farbe-orange-navy-text);
}

.bx-video__nutzer {
  position: absolute;
  left: 16px;
  top: 921px;
  width: 208px;
  height: 62px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-app-text);
}

.bx-video__nutzer-zeile {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  overflow: hidden;
  font: 700 16px var(--schrift-familie-app);
  color: var(--farbe-weiss);
  white-space: nowrap;
}

.bx-video__nutzer-zeile img {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pille);
  object-fit: cover;
}

.bx-video__nutzer-zeile span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ansicht mit Kopf, Reitern und Werkzeugleiste (VL Z. 93–106) */
.bx-video__ebene {
  position: absolute;
  left: 240px;
  top: 40px;
  width: 1680px;
  height: 963px;
  overflow: hidden;
  background: var(--farbe-flaeche-hell);
  opacity: 0;
  transform-origin: 50% 40%;
}

.bx-video__titel {
  position: absolute;
  left: 36px;
  top: 84px;
  display: flex;
  align-items: center;
  gap: 16px;
  font: 700 38px/46px var(--schrift-familie-app);
  letter-spacing: -0.4px;
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__titel svg {
  color: var(--farbe-app-sekundaer);
}

.bx-video__untertitel {
  position: absolute;
  left: 36px;
  top: 140px;
  font: 400 20px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video__werkzeuge {
  position: absolute;
  right: 36px;
  top: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.bx-video__reiter {
  position: absolute;
  left: 36px;
  top: 182px;
  display: flex;
  gap: 44px;
}

.bx-video__reiter span {
  padding-bottom: 12px;
  font: 700 23px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video__reiter span[data-bx-aktiv] {
  color: var(--farbe-orange-navy-text);
  box-shadow: var(--schatten-app-reiter-aktiv);
}

.bx-video__linie {
  position: absolute;
  left: 0;
  right: 0;
  top: 228px;
  height: 1px;
  background: var(--farbe-app-linie);
}

.bx-video__knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-chip);
  background: var(--farbe-weiss);
  font: 700 20px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__knopf svg {
  color: var(--farbe-app-link);
}

.bx-video__knopf--gruen {
  padding: 0 24px;
  border: 0;
  background: var(--farbe-app-knopf-gruen);
  color: var(--farbe-weiss);
}

.bx-video__knopf--gruen svg {
  color: inherit;
}

.bx-video__werkzeug {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: 400 17px var(--schrift-familie-app);
  color: var(--farbe-app-werkzeug);
  white-space: nowrap;
}

.bx-video__werkzeug svg {
  color: var(--farbe-app-link);
}

/* Karten, Tabellen, Chips (VL Z. 107–123) */
.bx-video__karte {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-eingabe);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-karte-flach);
}

.bx-video__karte-titel {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 27px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__karte-text {
  position: absolute;
  font: 400 19px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video__kopfzeile {
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--farbe-app-kopf);
  font: 700 21px var(--schrift-familie-app);
  color: var(--farbe-weiss);
}

.bx-video__kopfzeile > span,
.bx-video__zeile > span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

.bx-video__zeile {
  position: absolute;
  left: 0;
  right: 0;
  height: 76px;
  border-bottom: 1px solid var(--farbe-app-linie);
  background: var(--farbe-weiss);
  font: 400 24px var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-video__link {
  color: var(--farbe-app-link);
}

.bx-video__kontrollkasten {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--farbe-app-rand-stark);
  border-radius: var(--radius-app);
  background: var(--farbe-weiss);
}

.bx-video__kontrollkasten--kopf {
  border-color: var(--farbe-weiss);
  background: var(--farbe-app-kopf);
}

.bx-video__chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-chip);
  font: 700 20px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-video__person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 18px 0 4px;
  border-radius: var(--radius-pille);
  background: var(--farbe-flaeche-toggle);
  font: 700 20px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__person img,
.bx-video__person-symbol {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pille);
  object-fit: cover;
}

.bx-video__person-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--farbe-navy);
  color: var(--farbe-weiss);
}

/* Felder der Detailansicht (VL Z. 124–131) */
.bx-video__feld {
  position: absolute;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--farbe-app-linie);
}

.bx-video__feld > i {
  display: block;
  margin-bottom: 8px;
  font: 400 18px var(--schrift-familie-app);
  font-style: normal;
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video__feld > b {
  display: block;
  position: relative;
  overflow: hidden;
  font: 400 24px/30px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-video__feld > .bx-video__link {
  color: var(--farbe-app-link);
}

.bx-video__feld > .bx-video__wert--klein {
  font-size: 21px;
}

.bx-video__feld .bx-video__chip {
  height: 36px;
  font-size: 19px;
}

.bx-video__feld .bx-video__pfeil {
  position: absolute;
  right: 4px;
  bottom: 16px;
  color: var(--farbe-app-symbol);
}

.bx-video__feld[data-bx-fokus] {
  border-bottom: 2px solid var(--farbe-orange-flaeche);
}

/* Abdunkelung, Dialog, Eingaben (VL Z. 132–148) */
.bx-video__abdunkeln {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1003px;
  background: var(--farbe-video-abdunkeln);
  opacity: 0;
}

.bx-video__dialog {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-app-fenster);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-dialog);
  opacity: 0;
}

.bx-video__dialog-titel {
  position: absolute;
  left: 36px;
  top: 30px;
  font: 700 30px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__dialog-schliessen {
  position: absolute;
  right: 30px;
  top: 30px;
  color: var(--farbe-app-text);
}

.bx-video__abschnitt {
  position: absolute;
  left: 36px;
  right: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--farbe-app-symbol);
  font: 700 24px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__eingabe {
  position: absolute;
  height: 84px;
  padding: 12px 18px 0;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-chip);
  background: var(--farbe-weiss);
}

.bx-video__eingabe > i {
  display: block;
  font: 400 17px var(--schrift-familie-app);
  font-style: normal;
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video__pflicht {
  font-style: normal;
  color: var(--farbe-orange-navy-text);
}

.bx-video__eingabe > b {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  margin-top: 6px;
  padding-right: 28px;
  overflow: hidden;
  font: 400 22px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__eingabe > .bx-video__platzhalter {
  color: var(--farbe-app-platzhalter);
}

.bx-video__eingabe .bx-video__chip {
  height: 32px;
  padding: 0 12px;
  font-size: 18px;
}

.bx-video__eingabe img {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pille);
  object-fit: cover;
}

.bx-video__eingabe .bx-video__pfeil {
  position: absolute;
  right: 16px;
  top: 30px;
  color: var(--farbe-app-symbol);
}

.bx-video__eingabe[data-bx-fokus] {
  border-color: var(--farbe-orange-flaeche);
  box-shadow: var(--schatten-app-feld-fokus);
}

/* Schreibmarke: blinkt nur im Zustand laeuft, sonst steht sie sichtbar (E-6); pausiert, angehalten und reduziert hält
   die Pausenregel aus gemeinsam.css an */
.bx-video__schreibmarke {
  display: inline-block;
  width: 2px;
  height: 24px;
  margin-left: 1px;
  background: var(--farbe-app-text);
  vertical-align: -4px;
}

[data-bx-zustand="laeuft"] .bx-video__schreibmarke {
  animation: bx-video-blinken 1s steps(1) infinite;
}

@keyframes bx-video-blinken {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.bx-video__dialog-fuss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 110px;
  border-top: 1px solid var(--farbe-app-linie);
  background: var(--farbe-flaeche-zart);
}

.bx-video__schalter {
  position: relative;
  display: block;
  width: 58px;
  height: 32px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-kopf-text);
}

.bx-video__schalter::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss);
}

.bx-video__schalter[data-bx-aktiv] {
  background: var(--farbe-orange-flaeche);
}

.bx-video__schalter[data-bx-aktiv]::after {
  transform: translateX(26px);
}

.bx-video__auswahl {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-auswahl);
  opacity: 0;
}

.bx-video__auswahl-eintrag {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-chip);
  font: 700 20px var(--schrift-familie-app);
}

.bx-video__auswahl-eintrag[data-bx-hover] {
  box-shadow: var(--schatten-app-auswahl-hover);
}

.bx-video__markierung {
  position: absolute;
  border: 3px solid var(--farbe-orange-flaeche);
  border-radius: var(--radius-eingabe);
  box-shadow: var(--schatten-video-markierung);
  opacity: 0;
  pointer-events: none;
}

/* Karte „Im Hintergrund“ (VL Z. 198–204) */
.bx-video__hinweis {
  position: absolute;
  padding: 28px 32px 30px;
  border-radius: var(--radius-rahmen);
  background: var(--farbe-video-hinweis);
  box-shadow: var(--schatten-video-hinweis);
  opacity: 0;
}

.bx-video__hinweis-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 17px var(--schrift-familie-mono);
  letter-spacing: 3px;
  color: var(--farbe-mint);
}

.bx-video__hinweis-marke::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pille);
  background: var(--farbe-mint);
}

.bx-video__hinweis-titel {
  margin-top: 12px;
  font: 800 30px/1.2 var(--schrift-familie-text);
  letter-spacing: -0.4px;
  color: var(--farbe-weiss);
}

.bx-video__hinweis-text {
  margin-top: 8px;
  font: 400 20px var(--schrift-familie-text);
  color: var(--farbe-app-kopf-text);
}

.bx-video__hinweis-balken {
  position: relative;
  height: 12px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: var(--radius-pille);
  background: var(--farbe-navy-linie);
}

.bx-video__hinweis-balken span {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius-pille);
  background: var(--farbe-video-fortschritt);
  transform-origin: left;
  transform: scaleX(0);
}

/* Kapitel-Chip (VL Z. 205–207): die Klasse bx-buehne__chip blendet gemeinsam.css im Standbild aus (N5-74) */
.bx-video__kapitel {
  position: absolute;
  left: 276px;
  top: 72px;
  display: flex;
  align-items: center;
  height: 50px;
  border-left: 6px solid var(--farbe-orange-flaeche);
  border-radius: var(--radius-kachel-klein);
  background: var(--farbe-video-kapitel);
  box-shadow: var(--schatten-video-kapitel);
  opacity: 0;
  white-space: nowrap;
}

.bx-video__kapitel-nummer {
  padding: 0 16px 0 18px;
  border-right: 1px solid var(--farbe-navy-linie-stark);
  font: 500 18px var(--schrift-familie-mono);
  letter-spacing: 2px;
  color: var(--farbe-mint);
}

.bx-video__kapitel-titel {
  padding: 0 22px 0 16px;
  font: 800 22px var(--schrift-familie-text);
  color: var(--farbe-weiss);
}

/* Zeiger und Klickring (VL Z. 208–209); der Ring misst 2 × RING_RADIUS (39) px, die Skala setzt das JS */
.bx-video__zeiger {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(var(--schatten-video-zeiger));
  opacity: 0;
  pointer-events: none;
  transform-origin: 7.7px 4.6px;
}

.bx-video__zeiger path {
  fill: var(--farbe-story-zeiger);
  stroke: var(--farbe-weiss);
}

.bx-video__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 78px;
  height: 78px;
  border: 3px solid var(--farbe-orange-flaeche);
  border-radius: var(--radius-pille);
  opacity: 0;
  pointer-events: none;
}

/* Standbild-Aufnahme der Prüffunktion: ohne Zeiger und Ring (der Chip steht in gemeinsam.css) */
[data-bx-standbild] :is(.bx-video__zeiger, .bx-video__ring) {
  visibility: hidden;
}

/* Hilfsklassen: leerer Wert, Pflichtstern, Anfangsdeckkraft 0, übereinandergelegte Chips */
.bx-video__leer {
  color: var(--farbe-app-platzhalter);
}

.bx-video__aus {
  opacity: 0;
}

.bx-video__gestapelt {
  position: absolute;
  left: 0;
  top: 0;
}

/* Ph11 M0b (Vertrag Ph11 §3.8.3, Ä11-46): gemeinsame Video-Oberfläche mit mindestens zwei Nutzern unter VS, VR und VC.
   Seitenleiste mit Lagen der Einträge (VS Z. 543–556, VR Z. 278–285, VC Z. 282–298), Achsen (VS Z. 313, VR Z. 229,
   VC Z. 201; Lage je Index im Szenen-CSS), Menü (VS/VR .mn) und die Zustände von Werkzeug, Knopf und Fokus (.to.an,
   .bg.dr, .bo.fo in allen drei). */
.bx-video__nav span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-video__leistentitel--favoriten {
  top: 176px;
}

.bx-video__leistentitel--system {
  top: 548px;
}

.bx-video__nav--1 {
  top: 206px;
}

.bx-video__nav--2 {
  top: 258px;
}

.bx-video__nav--3 {
  top: 310px;
}

.bx-video__nav--4 {
  top: 362px;
}

.bx-video__nav--5 {
  top: 414px;
}

.bx-video__nav--6 {
  top: 466px;
}

.bx-video__nav--s1 {
  top: 578px;
}

.bx-video__nav--s2 {
  top: 630px;
}

.bx-video__achse-wert {
  position: absolute;
  font: 400 17px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
  text-align: right;
}

.bx-video__achse-linie {
  position: absolute;
  border-top: 1px dashed var(--farbe-linie-eingabe);
}

.bx-video__achse-linie[data-bx-null] {
  border-top-style: solid;
  border-top-color: var(--farbe-app-kopf-text);
}

.bx-video__menue {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-auswahl);
  opacity: 0;
}

.bx-video__menue > span {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 16px;
  border-radius: var(--radius-chip);
  font: 400 21px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video__menue > span svg {
  flex: none;
  color: var(--farbe-app-sekundaer);
}

.bx-video__menue > span[data-bx-hover] {
  background: var(--farbe-flaeche-kachel);
}

.bx-video__menue > span[data-bx-hover] svg {
  color: var(--farbe-orange-navy-text);
}

.bx-video__werkzeug[data-bx-aktiv],
.bx-video__werkzeug[data-bx-aktiv] svg {
  color: var(--farbe-orange-navy-text);
}

.bx-video__knopf--gruen[data-bx-gedrueckt] {
  background: var(--farbe-app-knopf-gruen-gedrueckt);
  transform: scale(0.97);
}

.bx-video__knopf[data-bx-fokus] {
  border-color: var(--farbe-orange-flaeche);
  box-shadow: var(--schatten-app-feld-fokus);
}

/*
  Video „Wiederkehrende Abrechnung automatisieren“ (Vertrag Ph11 §3.8.3, §3.8.5 Nr. 10; Teilplan M1a §8.1): die eigenen Teile
  des Videos (video-abrechnung.js Z. 76–185) und die Inline-Stile des Markups Z. 195–372 als Klassen mit den Werten wörtlich
  aus VR (Bühnen-px, Designgröße 1920 × 1003). Die Lage-Klassen am Dateiende entstehen aus den lage()-Aufrufen im Modul;
  Spalten je Tabelle über nth-of-type. Farben, Schriften, Schatten und Radien nur als Tokens (Nahdubletten ≤ 6 je Kanal,
  Ausnahme: Text der Organisations-Chips, Vermerk im Bericht). Der Anfangszustand ist nur über opacity: 0 verborgen, nie über
  visibility (N5-116).
*/

video-abrechnung {
  --bx-buehne-flaeche: var(--farbe-flaeche-hell);
}

/* Zeilen: Schrift 23 px (VR Z. 117), Listen 64 px hoch bei 22 px */
video-abrechnung .bx-video__zeile {
  font-size: 23px;
}

.bx-video__zeile.bx-video-abrechnung__sp-rl {
  height: 64px;
  font-size: 22px;
}

.bx-video-abrechnung__sp-rl > span:nth-of-type(1) {
  left: 34px;
}

.bx-video-abrechnung__sp-rl > span:nth-of-type(2) {
  left: 90px;
}

.bx-video-abrechnung__sp-rl > span:nth-of-type(3) {
  left: 300px;
}

.bx-video-abrechnung__sp-rl > span:nth-of-type(4) {
  left: 720px;
}

.bx-video-abrechnung__sp-rl > span:nth-of-type(5) {
  left: 1010px;
}

.bx-video-abrechnung__sp-rl > span:nth-of-type(6) {
  left: 1220px;
}

.bx-video-abrechnung__sp-rl > span:nth-of-type(7) {
  right: 30px;
}

.bx-video-abrechnung__sp-pos > span:nth-of-type(1) {
  left: 30px;
}

.bx-video-abrechnung__sp-pos > span:nth-of-type(2) {
  left: 600px;
}

.bx-video-abrechnung__sp-pos > span:nth-of-type(3) {
  left: 720px;
}

.bx-video-abrechnung__sp-pos > span:nth-of-type(4) {
  left: 900px;
}

.bx-video-abrechnung__sp-dv > span:nth-of-type(1) {
  left: 36px;
}

.bx-video-abrechnung__sp-dv > span:nth-of-type(2) {
  left: 200px;
}

.bx-video-abrechnung__sp-dv > span:nth-of-type(3) {
  left: 520px;
}

.bx-video-abrechnung__sp-dv > span:nth-of-type(4) {
  left: 740px;
}

.bx-video-abrechnung__sp-dv > span:nth-of-type(5) {
  left: 900px;
}

.bx-video-abrechnung__sp-dv > span:nth-of-type(6) {
  left: 1100px;
}

.bx-video-abrechnung__ohne-linie {
  border-bottom: 0;
}

/* Chips (VR Z. 121–124) */
.bx-video-abrechnung__chip--klein {
  height: 34px;
  padding: 0 13px;
  font-size: 18px;
}

.bx-video-abrechnung__chip--akt {
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__chip--bez {
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__chip--auto {
  background: var(--farbe-linie-karte);
  color: var(--farbe-app-chip-grau-text);
}

.bx-video-abrechnung__chip--ges {
  background: var(--farbe-app-aktion-flaeche);
  color: var(--farbe-app-chip-petrol-tief-text);
}

.bx-video-abrechnung__chip--off {
  background: var(--farbe-app-chip-orange-flaeche);
  color: var(--farbe-app-chip-orange-tief-text);
}

.bx-video-abrechnung__chip--best {
  background: var(--farbe-app-bedingung-flaeche);
  color: var(--farbe-app-bedingung);
}

.bx-video-abrechnung__chip--org {
  background: var(--farbe-flaeche-band);
  color: var(--farbe-element-4b-aktion-text);
}

.bx-video-abrechnung__ursprung-links {
  transform-origin: left center;
}

.bx-video__feld > .bx-video-abrechnung__wert--chips {
  height: 36px;
  overflow: visible;
}

.bx-video-abrechnung__grau[data-bx-gedrueckt] {
  background: var(--farbe-flaeche-band);
  transform: scale(0.97);
}

.bx-video-abrechnung__aktionen {
  position: relative;
}

/* Markierungen innerhalb der Zeilen und Kästen */
.bx-video-abrechnung__flaeche {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bx-video-abrechnung__flaeche--neu {
  background: var(--farbe-app-status-ok);
}

.bx-video-abrechnung__flaeche--haken {
  background: var(--farbe-diagramm-schraffur);
}

.bx-video-abrechnung__haken {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bx-video-abrechnung__haken svg {
  display: block;
  color: var(--farbe-weiss);
  opacity: 0;
}

.bx-video-abrechnung__haken[data-bx-aktiv] {
  border-color: var(--farbe-app-knopf-gruen);
  background: var(--farbe-app-knopf-gruen);
}

.bx-video-abrechnung__haken[data-bx-aktiv] svg {
  opacity: 1;
}

.bx-video-abrechnung__fuss {
  display: flex;
  justify-content: space-between;
  font: 400 18px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
}

.bx-video-abrechnung__fussnote {
  font: 400 19px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video-abrechnung__hinweis {
  font: 400 19px/1.45 var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
}

/* Vertrag (VR Z. 112–114, 290–315) */
.bx-video-abrechnung__kt {
  left: 30px;
  right: 30px;
  top: 24px;
  padding-bottom: 14px;
}

.bx-video-abrechnung__vr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 64px;
  border-bottom: 1px solid var(--farbe-app-linie);
  white-space: nowrap;
}

.bx-video-abrechnung__vr > i {
  font: 400 20px var(--schrift-familie-app);
  font-style: normal;
  color: var(--farbe-app-sekundaer);
}

.bx-video-abrechnung__vr > b {
  font: 400 22px var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-video-abrechnung__vr > .bx-video__link {
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__vr .bx-video__chip {
  height: 34px;
  padding: 0 13px;
  font-size: 18px;
}

.bx-video-abrechnung__ctb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  gap: 40px;
  height: 70px;
  padding: 0 30px;
  border-bottom: 1px solid var(--farbe-app-linie);
}

.bx-video-abrechnung__ctb span {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 21px var(--schrift-familie-app);
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video-abrechnung__ctb span[data-bx-aktiv] {
  color: var(--farbe-orange-navy-text);
  box-shadow: var(--schatten-app-reiter-aktiv);
}

.bx-video-abrechnung__feld-bereich {
  background: var(--farbe-flaeche-toggle);
}

.bx-video-abrechnung__box {
  overflow: hidden;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
}

.bx-video-abrechnung__box-titel {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 24px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video-abrechnung__pille {
  padding: 5px 14px;
  border-radius: var(--radius-pille);
  background: var(--farbe-gruen-flaeche);
  font: 700 17px var(--schrift-familie-app);
  color: var(--farbe-app-link);
  white-space: nowrap;
}

.bx-video-abrechnung__pille span {
  font-weight: 400;
}

.bx-video-abrechnung__statistik {
  font: 700 16px var(--schrift-familie-app);
  color: var(--farbe-mikrotext);
  white-space: nowrap;
}

.bx-video-abrechnung__statistik-wert {
  margin-top: 6px;
  font: 700 24px var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-video-abrechnung__statistik-wert--gruen {
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__tabelle-box {
  overflow: hidden;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app-karte);
}

.bx-video-abrechnung__band {
  background: var(--farbe-flaeche-kachel);
  font: 700 19px var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-video-abrechnung__zelle {
  font: 400 22px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video-abrechnung__zelle--symbol {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bx-video-abrechnung__mk {
  border-radius: var(--radius-app-karte);
}

.bx-video-abrechnung__mk-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 23px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video-abrechnung__mk-h > span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bx-video-abrechnung__mk-h svg {
  color: var(--farbe-mikrotext);
}

.bx-video-abrechnung__mk-c {
  padding: 5px 12px;
  border-radius: var(--radius-app);
  background: var(--farbe-app-status-ok);
  font: 700 17px var(--schrift-familie-app);
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__mk-r {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--farbe-app-linie);
}

.bx-video-abrechnung__mk-r > i {
  display: block;
  margin-bottom: 6px;
  font: 400 17px var(--schrift-familie-app);
  font-style: normal;
  color: var(--farbe-app-sekundaer);
  white-space: nowrap;
}

.bx-video-abrechnung__mk-r > b {
  display: block;
  position: relative;
  height: 28px;
  font: 400 22px/28px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video-abrechnung__mk-s {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  padding: 0 22px;
  border-top: 1px solid var(--farbe-app-linie);
  background: var(--farbe-flaeche-zart);
  font: 700 21px var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-video-abrechnung__mk-s-wert {
  position: relative;
  display: block;
  width: 200px;
  height: 32px;
  font: 700 27px/32px var(--schrift-familie-app);
  color: var(--farbe-app-link);
  text-align: right;
}

.bx-video-abrechnung__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-kachel-klein);
  background: var(--farbe-video-kapitel);
  box-shadow: var(--schatten-video-kapitel);
  font: 700 19px var(--schrift-familie-app);
  color: var(--farbe-weiss);
  white-space: nowrap;
  opacity: 0;
}

.bx-video-abrechnung__tag::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pille);
  background: var(--farbe-orange-flaeche);
}

.bx-video-abrechnung__rel {
  height: 84px;
  border-bottom: 1px solid var(--farbe-app-linie);
}

.bx-video-abrechnung__rel > i {
  display: block;
  font: 400 18px var(--schrift-familie-app);
  font-style: normal;
  color: var(--farbe-app-sekundaer);
}

.bx-video-abrechnung__rel > b {
  display: block;
  margin-top: 8px;
  font: 400 23px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

/* Dialoge, DATEV, Meldungen (VR Z. 138–185, 372–440) */
.bx-video-abrechnung__datev {
  display: block;
  flex: none;
  object-fit: contain;
}

.bx-video-abrechnung__datev--24 {
  width: 24px;
  height: 24px;
}

.bx-video-abrechnung__datev--28 {
  width: 28px;
  height: 28px;
}

.bx-video-abrechnung__datev--36 {
  width: 36px;
  height: 36px;
}

.bx-video-abrechnung__datev--72 {
  width: 72px;
  height: 72px;
}

.bx-video-abrechnung__logo {
  display: flex;
  justify-content: center;
}

.bx-video-abrechnung__logo-titel {
  font: 700 28px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  text-align: center;
  white-space: nowrap;
}

.bx-video-abrechnung__dialog-titel-datev {
  gap: 14px;
}

.bx-video-abrechnung__erfolg {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 700 30px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video-abrechnung__erfolg-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__toast {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-eingabe);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-video-meldung);
  opacity: 0;
}

.bx-video-abrechnung__toast-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__toast-titel {
  font: 700 21px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-video-abrechnung__toast-text {
  margin-top: 5px;
  font: 400 18px var(--schrift-familie-app);
  color: var(--farbe-mikrotext);
  white-space: nowrap;
}

.bx-video-abrechnung__meldung {
  padding: 22px 26px;
  border-radius: var(--radius-eingabe);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-video-meldung);
  opacity: 0;
}

.bx-video-abrechnung__meldung-kopf {
  gap: 12px;
  font: 700 21px var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-video-abrechnung__meldung-status {
  margin-left: auto;
  font: 700 18px var(--schrift-familie-app);
  color: var(--farbe-mikrotext);
}

.bx-video-abrechnung__meldung-status[data-bx-ok] {
  color: var(--farbe-app-link);
}

.bx-video-abrechnung__meldung-text {
  margin-top: 12px;
  font: 400 17px var(--schrift-familie-app);
  color: var(--farbe-mikrotext);
  white-space: nowrap;
}

.bx-video-abrechnung__meldung-fortschritt {
  gap: 16px;
  margin-top: 20px;
}

.bx-video-abrechnung__meldung-balken {
  position: relative;
  flex: 1;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pille);
  background: var(--farbe-flaeche-toggle);
}

.bx-video-abrechnung__meldung-balken span {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--farbe-app-knopf-gruen);
  transform: scaleX(0.15);
  transform-origin: left;
}

.bx-video-abrechnung__meldung-prozent {
  width: 60px;
  font: 700 18px var(--schrift-familie-app);
  color: var(--farbe-app-text);
  text-align: right;
}

/* lagen:start (erzeugt aus den lage()-Aufrufen im Modul, nicht von Hand ändern) */
.bx-video-abrechnung__lage-l36-t257-w560-h660 {
  position: absolute;
  left: 36px;
  top: 257px;
  width: 560px;
  height: 660px;
}

.bx-video-abrechnung__lage-l864-t800-w920 {
  position: absolute;
  left: 864px;
  top: 800px;
  width: 920px;
}

.bx-video-abrechnung__lage-l1000-t48-w880 {
  position: absolute;
  left: 1000px;
  top: 48px;
  width: 880px;
}

.bx-video-abrechnung__lage-l1330-t800-w456 {
  position: absolute;
  left: 1330px;
  top: 800px;
  width: 456px;
}

.bx-video-abrechnung__lage-l300-t800-w760 {
  position: absolute;
  left: 300px;
  top: 800px;
  width: 760px;
}

.bx-video-abrechnung__lage-t152 {
  position: absolute;
  top: 152px;
}

.bx-video-abrechnung__lage-t216 {
  position: absolute;
  top: 216px;
}

.bx-video-abrechnung__lage-t280 {
  position: absolute;
  top: 280px;
}

.bx-video-abrechnung__lage-t344 {
  position: absolute;
  top: 344px;
}

.bx-video-abrechnung__lage-t408 {
  position: absolute;
  top: 408px;
}

.bx-video-abrechnung__lage-t472 {
  position: absolute;
  top: 472px;
}

.bx-video-abrechnung__lage-t536 {
  position: absolute;
  top: 536px;
}

.bx-video-abrechnung__lage-t160 {
  position: absolute;
  top: 160px;
}

.bx-video-abrechnung__lage-t236 {
  position: absolute;
  top: 236px;
}

.bx-video-abrechnung__lage-t312 {
  position: absolute;
  top: 312px;
}

.bx-video-abrechnung__lage-l30-r30-t86 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 86px;
}

.bx-video-abrechnung__lage-l30-r30-t150 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 150px;
}

.bx-video-abrechnung__lage-l30-r30-t214 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 214px;
}

.bx-video-abrechnung__lage-l30-r30-t278 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 278px;
}

.bx-video-abrechnung__lage-l30-r30-t342 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 342px;
}

.bx-video-abrechnung__lage-l30-r30-t406 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 406px;
}

.bx-video-abrechnung__lage-l30-r30-t470 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 470px;
}

.bx-video-abrechnung__lage-l30-r30-t534 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 534px;
}

.bx-video-abrechnung__lage-r390-t22-ar {
  position: absolute;
  right: 390px;
  top: 22px;
  text-align: right;
}

.bx-video-abrechnung__lage-r200-t22-ar {
  position: absolute;
  right: 200px;
  top: 22px;
  text-align: right;
}

.bx-video-abrechnung__lage-r24-t22-ar {
  position: absolute;
  right: 24px;
  top: 22px;
  text-align: right;
}

.bx-video-abrechnung__lage-l22-r22-t76 {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 76px;
}

.bx-video-abrechnung__lage-l22-r22-t152 {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 152px;
}

.bx-video-abrechnung__lage-l22-r22-t228 {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 228px;
}

.bx-video-abrechnung__lage-l30-r30-t182 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 182px;
}

.bx-video-abrechnung__lage-l30-r30-t374 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 374px;
}

.bx-video-abrechnung__lage-l0-t0-r0-b0 {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

.bx-video-abrechnung__lage-t96 {
  position: absolute;
  top: 96px;
}

.bx-video-abrechnung__lage-l18-t272-w524-h334 {
  position: absolute;
  left: 18px;
  top: 272px;
  width: 524px;
  height: 334px;
}

.bx-video-abrechnung__lage-l0-r0-t70-b0 {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 70px;
  bottom: 0px;
}

.bx-video-abrechnung__lage-l24-r24-t24-h300 {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  height: 300px;
}

.bx-video-abrechnung__lage-l24-t22 {
  position: absolute;
  left: 24px;
  top: 22px;
}

.bx-video-abrechnung__lage-l24-t64 {
  position: absolute;
  left: 24px;
  top: 64px;
}

.bx-video-abrechnung__lage-l24-r24-t128-h150 {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 128px;
  height: 150px;
}

.bx-video-abrechnung__lage-l0-r0-t0-h54 {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 54px;
}

.bx-video-abrechnung__lage-l22-t16 {
  position: absolute;
  left: 22px;
  top: 16px;
}

.bx-video-abrechnung__lage-l470-t16 {
  position: absolute;
  left: 470px;
  top: 16px;
}

.bx-video-abrechnung__lage-l740-t16 {
  position: absolute;
  left: 740px;
  top: 16px;
}

.bx-video-abrechnung__lage-l22-t76 {
  position: absolute;
  left: 22px;
  top: 76px;
}

.bx-video-abrechnung__lage-l470-t78 {
  position: absolute;
  left: 470px;
  top: 78px;
}

.bx-video-abrechnung__lage-l740-t78 {
  position: absolute;
  left: 740px;
  top: 78px;
}

.bx-video-abrechnung__lage-l24-t24-w452-h400 {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 452px;
  height: 400px;
}

.bx-video-abrechnung__lage-l22-r22-t18 {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 18px;
}

.bx-video-abrechnung__lage-l6-t6-r6-b6 {
  position: absolute;
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
}

.bx-video-abrechnung__lage-l0-t0 {
  position: absolute;
  left: 0px;
  top: 0px;
}

.bx-video-abrechnung__lage-r0-t0 {
  position: absolute;
  right: 0px;
  top: 0px;
}

.bx-video-abrechnung__lage-l8-t220-r8-b8 {
  position: absolute;
  left: 8px;
  top: 220px;
  right: 8px;
  bottom: 8px;
}

.bx-video-abrechnung__lage-l620-t257-w1024-h660 {
  position: absolute;
  left: 620px;
  top: 257px;
  width: 1024px;
  height: 660px;
}

.bx-video-abrechnung__lage-l1112-t596 {
  position: absolute;
  left: 1112px;
  top: 596px;
}

.bx-video-abrechnung__lage-l36-t257-w1608-h660 {
  position: absolute;
  left: 36px;
  top: 257px;
  width: 1608px;
  height: 660px;
}

.bx-video-abrechnung__lage-l30-t22 {
  position: absolute;
  left: 30px;
  top: 22px;
}

.bx-video-abrechnung__lage-l68-t62 {
  position: absolute;
  left: 68px;
  top: 62px;
}

.bx-video-abrechnung__lage-l30-r30-t614 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 614px;
}

.bx-video-abrechnung__lage-l8-t148-w1592-h72 {
  position: absolute;
  left: 8px;
  top: 148px;
  width: 1592px;
  height: 72px;
}

.bx-video-abrechnung__lage-l30-t86-w480 {
  position: absolute;
  left: 30px;
  top: 86px;
  width: 480px;
}

.bx-video-abrechnung__lage-l550-t86-w480 {
  position: absolute;
  left: 550px;
  top: 86px;
  width: 480px;
}

.bx-video-abrechnung__lage-l30-t172-w480 {
  position: absolute;
  left: 30px;
  top: 172px;
  width: 480px;
}

.bx-video-abrechnung__lage-l550-t172-w480 {
  position: absolute;
  left: 550px;
  top: 172px;
  width: 480px;
}

.bx-video-abrechnung__lage-l36-t257-w1060-h660 {
  position: absolute;
  left: 36px;
  top: 257px;
  width: 1060px;
  height: 660px;
}

.bx-video-abrechnung__lage-l30-t258-w480 {
  position: absolute;
  left: 30px;
  top: 258px;
  width: 480px;
}

.bx-video-abrechnung__lage-l550-t258-w480 {
  position: absolute;
  left: 550px;
  top: 258px;
  width: 480px;
}

.bx-video-abrechnung__lage-t372 {
  position: absolute;
  top: 372px;
}

.bx-video-abrechnung__lage-t428 {
  position: absolute;
  top: 428px;
}

.bx-video-abrechnung__lage-t504 {
  position: absolute;
  top: 504px;
}

.bx-video-abrechnung__lage-l30-t598 {
  position: absolute;
  left: 30px;
  top: 598px;
}

.bx-video-abrechnung__lage-l18-t246-w1024-h96 {
  position: absolute;
  left: 18px;
  top: 246px;
  width: 1024px;
  height: 96px;
}

.bx-video-abrechnung__lage-l18-t416-w1024-h220 {
  position: absolute;
  left: 18px;
  top: 416px;
  width: 1024px;
  height: 220px;
}

.bx-video-abrechnung__lage-l1120-t257-w524-h500 {
  position: absolute;
  left: 1120px;
  top: 257px;
  width: 524px;
  height: 500px;
}

.bx-video-abrechnung__lage-l66-t600-w380 {
  position: absolute;
  left: 66px;
  top: 600px;
  width: 380px;
}

.bx-video-abrechnung__lage-l0-t64-w470 {
  position: absolute;
  left: 0px;
  top: 64px;
  width: 470px;
}

.bx-video-abrechnung__lage-l36-t257-w1608-h560 {
  position: absolute;
  left: 36px;
  top: 257px;
  width: 1608px;
  height: 560px;
}

.bx-video-abrechnung__lage-l30-r30-t500 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 500px;
}

.bx-video-abrechnung__lage-l560-t190-w1000-h600 {
  position: absolute;
  left: 560px;
  top: 190px;
  width: 1000px;
  height: 600px;
}

.bx-video-abrechnung__lage-l36-t156-w450 {
  position: absolute;
  left: 36px;
  top: 156px;
  width: 450px;
}

.bx-video-abrechnung__lage-l514-t156-w450 {
  position: absolute;
  left: 514px;
  top: 156px;
  width: 450px;
}

.bx-video-abrechnung__lage-l36-t258-w450 {
  position: absolute;
  left: 36px;
  top: 258px;
  width: 450px;
}

.bx-video-abrechnung__lage-l514-t258-w450 {
  position: absolute;
  left: 514px;
  top: 258px;
  width: 450px;
}

.bx-video-abrechnung__lage-l36-t360-w450 {
  position: absolute;
  left: 36px;
  top: 360px;
  width: 450px;
}

.bx-video-abrechnung__lage-l514-t384-w450 {
  position: absolute;
  left: 514px;
  top: 384px;
  width: 450px;
}

.bx-video-abrechnung__lage-l600-t300-w720-h340 {
  position: absolute;
  left: 600px;
  top: 300px;
  width: 720px;
  height: 340px;
}

.bx-video-abrechnung__lage-l0-r0-t44 {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 44px;
}

.bx-video-abrechnung__lage-l0-r0-t136 {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 136px;
}

.bx-video-abrechnung__lage-l330-t220-w1360-h520 {
  position: absolute;
  left: 330px;
  top: 220px;
  width: 1360px;
  height: 520px;
}

.bx-video-abrechnung__lage-t104 {
  position: absolute;
  top: 104px;
}

.bx-video-abrechnung__lage-l10-t152-w1340-h244 {
  position: absolute;
  left: 10px;
  top: 152px;
  width: 1340px;
  height: 244px;
}

.bx-video-abrechnung__lage-l1350-t712-w530-h164 {
  position: absolute;
  left: 1350px;
  top: 712px;
  width: 530px;
  height: 164px;
}

.bx-video-abrechnung__lage-l640-t350-w640-h190 {
  position: absolute;
  left: 640px;
  top: 350px;
  width: 640px;
  height: 190px;
}

.bx-video-abrechnung__lage-l40-t60 {
  position: absolute;
  left: 40px;
  top: 60px;
}

.bx-video-abrechnung__lage-l1330-t56-w550 {
  position: absolute;
  left: 1330px;
  top: 56px;
  width: 550px;
}
/* lagen:ende */

/*
 * Auto-Durchlauf (Teilplan B4 E6): Der Fortschritt ist eine Animation des Balkens im gewählten Tab. Sie läuft nur
 * unter laeuft und pausiert unter pausiert – ohne diese Zustände (aus, Server-HTML, reduzierte Bewegung) gibt es keine
 * Animation, damit die globale Regel für reduzierte Bewegung (basis.css) kein animationend auslöst. Lage, Höhe und
 * Farbe des Balkens gehören dem nutzenden Baustein; die Dauer setzt durchlauf.js als --bx-durchlauf-dauer.
 */
@keyframes bx-durchlauf {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

[data-bx-durchlauf="laeuft"] [aria-selected="true"] [data-bx-durchlauf-balken],
[data-bx-durchlauf="pausiert"] [aria-selected="true"] [data-bx-durchlauf-balken] {
  animation: bx-durchlauf var(--bx-durchlauf-dauer, 6500ms) linear forwards;
}

[data-bx-durchlauf="pausiert"] [aria-selected="true"] [data-bx-durchlauf-balken] {
  animation-play-state: paused;
}

/*
 * Baustein „vergleich-davor-danach“, Variante `tabelle` (Vertrag Ph8 §3.4.7, §3.4.13, Teilplan H0b E15, E22, E23;
 * Design Automatisierung v7 „Vergleich“, APP Cashflow Forecast A v5 und APP Abrechnung DATEV D v3 „Vergleich“).
 * Skalierung rein per CSS (H8-14/B9): Hülle = Container, Rahmen (Kind) trägt `--bx-skala` und die Höhe aus den Daten
 * (`data-bx-zeilen`, `data-bx-gruppen`, A-1, H8-16), Bühne 1312 px wird skaliert. Feste Höhen und `line-clamp` sind
 * Designmaße, gemessen im Chrome-Block H0b (22.10.2026, Bühne 1312 px, Fenster 1600 px): Kopfzeile 44 px (A7, CF, AD)
 * + 2 px Rahmenlinien, Gruppenkopf 44 px (A7), höchste Datenzeile 129 px (AD; A7 107, CF 109), Zeilenzahl der
 * Fragespalte höchstens 4 (AD), der übrigen Zellen höchstens 3 (A7, AD).
 */
.bx-vergleich-davor-danach {
  padding: var(--abstand-56) var(--seitenrand) var(--abstand-60);
  border-block-end: 1px solid var(--farbe-linie-sektion);
  font-family: var(--schrift-familie-text);
}

.bx-vergleich-davor-danach--hell {
  background-color: var(--farbe-flaeche-hell);
}

.bx-vergleich-davor-danach--zart {
  background-color: var(--farbe-flaeche-zart);
}

.bx-vergleich-davor-danach--navy {
  background-color: var(--farbe-navy);
}

.bx-vergleich-davor-danach__kopf {
  margin-block-end: var(--abstand-30);
}

/* Ph8 H2b (P-H2B-16 a, H8-76): `kopf.ausrichtung: mitte` zentriert den Kopf (Design Automatisierung v7) */
.bx-vergleich-davor-danach__kopf--mitte {
  text-align: center;
}

.bx-vergleich-davor-danach__kopf--mitte .bx-sektionskopf {
  margin-inline: auto;
}

.bx-vergleich-davor-danach__huelle {
  container-type: inline-size;
}

.bx-vergleich-davor-danach__rahmen {
  --bx-skala: min(1, tan(atan2(100cqi, 1312px))); /* Bühnenbreite 1312 px (Messung H0b) */
  --bx-hoehe: calc(46px + var(--bx-gruppen, 0) * 44px + var(--bx-zeilen, 1) * 129px); /* Kopf 44 + 2 Linien, Gruppe 44, Zeile 129 (Messung H0b) */
  max-inline-size: 1312px;
  block-size: calc(var(--bx-hoehe) * var(--bx-skala));
  margin-inline: auto;
  overflow: hidden;
}

.bx-vergleich-davor-danach__buehne {
  inline-size: 1312px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-weiss);
  transform: scale(var(--bx-skala));
  transform-origin: top left;
}

.bx-vergleich-davor-danach__tabelle {
  --bx-vdd-spalten: 60px minmax(180px, 1fr) repeat(2, minmax(0, 1.15fr));
  display: block;
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}

.bx-vergleich-davor-danach__tabelle thead,
.bx-vergleich-davor-danach__tabelle tbody,
.bx-vergleich-davor-danach__tabelle tfoot {
  display: block;
}

.bx-vergleich-davor-danach__tabelle[data-bx-spalten="4"] {
  --bx-vdd-spalten: 60px minmax(180px, 1fr) repeat(3, minmax(0, 1.15fr));
}

.bx-vergleich-davor-danach__tabelle[data-bx-spalten="5"] {
  --bx-vdd-spalten: 60px minmax(180px, 1fr) repeat(4, minmax(0, 1.15fr));
}

.bx-vergleich-davor-danach__kopfzeile,
.bx-vergleich-davor-danach__zeile {
  display: grid;
  grid-template-columns: var(--bx-vdd-spalten);
  box-sizing: border-box;
}

.bx-vergleich-davor-danach__kopfzeile {
  block-size: 44px; /* Messung H0b */
}

.bx-vergleich-davor-danach__kopfzeile th,
.bx-vergleich-davor-danach__kopfzeile td {
  padding: var(--abstand-15) var(--abstand-22);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}

.bx-vergleich-davor-danach__kopfzeile td:empty {
  display: none;
}

.bx-vergleich-davor-danach__kopfzeile td:empty + th {
  grid-column: span 2;
  color: var(--farbe-navy);
  font-weight: var(--schrift-label-stark-gewicht);
}

.bx-vergleich-davor-danach__kopfzeile th:nth-last-child(2) {
  border-inline-start: 1px solid var(--farbe-linie);
  background-color: var(--farbe-flaeche-karte);
}

.bx-vergleich-davor-danach__kopfzeile th:last-child {
  border-inline-start: 1px solid var(--farbe-linie-grafik);
  background-color: var(--farbe-hellblau-vergleich);
  color: var(--farbe-gruen);
}

.bx-vergleich-davor-danach__gruppe {
  display: block;
  box-sizing: border-box;
  block-size: 44px; /* Messung H0b */
  border-block-start: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-navy);
}

.bx-vergleich-davor-danach__gruppe th {
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
  block-size: 100%;
  box-sizing: border-box;
  padding: var(--abstand-14) var(--abstand-24);
  text-align: start;
}

.bx-vergleich-davor-danach__gruppen-punkt {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="gruen"] .bx-vergleich-davor-danach__gruppen-punkt {
  background-color: var(--farbe-mint);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="grau"] .bx-vergleich-davor-danach__gruppen-punkt {
  background-color: var(--farbe-navy-text-sekundaer);
}

.bx-vergleich-davor-danach__gruppen-label {
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-stark-gewicht);
  font-size: var(--schrift-label-stark-groesse);
  line-height: var(--schrift-label-stark-zeile);
  letter-spacing: var(--schrift-label-stark-laufweite);
  text-transform: uppercase;
}

.bx-vergleich-davor-danach__gruppen-pfeil {
  color: var(--farbe-mint);
  font-weight: var(--schrift-textlink-gewicht);
}

.bx-vergleich-davor-danach__gruppen-text {
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-fuss-recht-gewicht);
  font-size: var(--schrift-fuss-recht-groesse);
}

.bx-vergleich-davor-danach__zeile {
  block-size: 129px; /* Messung H0b */
  border-block-start: 1px solid var(--farbe-flaeche-toggle);
}

.bx-vergleich-davor-danach__zeile--schluss {
  border-block-start-color: var(--farbe-linie-karte);
}

.bx-vergleich-davor-danach__zeilenkopf {
  display: grid;
  grid-column: span 2;
  grid-template-columns: 60px minmax(0, 1fr);
  padding: 0;
  font-weight: var(--schrift-text-gewicht);
  text-align: start;
}

.bx-vergleich-davor-danach__nummer {
  display: flex;
  align-items: center;
  padding-inline-start: var(--abstand-18);
  border-inline-start: 4px solid var(--farbe-orange-flaeche);
}

.bx-vergleich-davor-danach__marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 27px;
  block-size: 27px;
  border-radius: var(--radius-klein);
  background-color: var(--farbe-orange-flaeche);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-stark-gewicht);
  font-size: var(--schrift-person-rolle-klein-groesse);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="gruen"] .bx-vergleich-davor-danach__nummer {
  border-inline-start-color: var(--farbe-mint-akzent);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="gruen"] .bx-vergleich-davor-danach__marke {
  background-color: var(--farbe-mint-akzent);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="grau"] .bx-vergleich-davor-danach__nummer {
  border-inline-start-color: var(--farbe-navy);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="grau"] .bx-vergleich-davor-danach__marke {
  background-color: var(--farbe-navy);
}

.bx-vergleich-davor-danach__zeile--schluss .bx-vergleich-davor-danach__nummer {
  border-inline-start-color: transparent;
}

.bx-vergleich-davor-danach__zeile--schluss .bx-vergleich-davor-danach__marke {
  box-sizing: border-box;
  border: 1.5px dashed var(--farbe-linie-stark);
  background-color: transparent;
  color: var(--farbe-mikrotext);
}

.bx-vergleich-davor-danach__frage {
  display: -webkit-box;
  align-self: center;
  overflow: hidden;
  padding: var(--abstand-16) var(--abstand-20) var(--abstand-16) 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-termin-schritt-titel-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
  letter-spacing: var(--schrift-termin-schritt-titel-laufweite);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* Messung H0b: höchstens vier Zeilen (AD) */
  line-clamp: 4;
  text-wrap: pretty;
}

.bx-vergleich-davor-danach__zelle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--abstand-9);
  min-inline-size: 0;
  overflow: hidden;
  padding: var(--abstand-16) var(--abstand-22);
  border-inline-start: 1px solid var(--farbe-linie);
  background-color: var(--farbe-flaeche-karte);
}

.bx-vergleich-davor-danach__zelle--brainx {
  border-inline-start-color: var(--farbe-linie-grafik);
  background-color: var(--farbe-hellblau-vergleich);
}

.bx-vergleich-davor-danach__zelltext {
  display: -webkit-box;
  overflow: hidden;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-termin-schritt-text-gewicht);
  font-size: var(--schrift-termin-schritt-text-groesse);
  line-height: var(--schrift-termin-schritt-text-zeile);
  letter-spacing: var(--schrift-termin-schritt-text-laufweite);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Messung H0b: höchstens drei Zeilen (A7, AD) */
  line-clamp: 3;
  text-wrap: pretty;
}

.bx-vergleich-davor-danach__zelle--brainx .bx-vergleich-davor-danach__zelltext {
  color: var(--farbe-navy);
  font-weight: var(--schrift-trust-chip-gewicht);
}

.bx-vergleich-davor-danach__pille {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-6);
  padding: 3px var(--abstand-9); /* Design */
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-pille-zeile);
  white-space: nowrap;
}

.bx-vergleich-davor-danach__pille::before {
  content: '';
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-linie-stark);
}

.bx-vergleich-davor-danach__pille--brainx {
  border-color: var(--farbe-mint-akzent);
  background-color: var(--farbe-mint-akzent);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-pille-gewicht);
}

.bx-vergleich-davor-danach__pille--brainx::before {
  content: none;
}

.bx-vergleich-davor-danach__zitat {
  max-inline-size: 760px;
  margin: var(--abstand-26) 0 0;
  padding: var(--abstand-4) 0 var(--abstand-4) var(--abstand-22);
  border-inline-start: 3px solid var(--farbe-orange-flaeche);
}

.bx-vergleich-davor-danach__zitat p {
  margin: 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-zitat-mittel-gewicht);
  font-size: var(--schrift-zitat-mittel-groesse);
  line-height: var(--schrift-zitat-mittel-zeile);
  letter-spacing: var(--schrift-zitat-mittel-laufweite);
  text-wrap: pretty;
}

/* Rückfall ohne tan(atan2()): gestapelte Zeilen, keine feste Höhe, kein line-clamp (E23) */
@supports not (scale: tan(atan2(1px, 1px))) {
  .bx-vergleich-davor-danach__rahmen {
    block-size: auto;
  }

  .bx-vergleich-davor-danach__buehne {
    inline-size: auto;
    transform: none;
  }

  .bx-vergleich-davor-danach__kopfzeile,
  .bx-vergleich-davor-danach__zeile {
    grid-template-columns: minmax(0, 1fr);
    block-size: auto;
  }

  .bx-vergleich-davor-danach__gruppe {
    block-size: auto;
  }

  .bx-vergleich-davor-danach__frage,
  .bx-vergleich-davor-danach__zelltext {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
  }
}

[data-bx-zeilen="1"] {
  --bx-zeilen: 1;
}

[data-bx-zeilen="2"] {
  --bx-zeilen: 2;
}

[data-bx-zeilen="3"] {
  --bx-zeilen: 3;
}

[data-bx-zeilen="4"] {
  --bx-zeilen: 4;
}

[data-bx-zeilen="5"] {
  --bx-zeilen: 5;
}

[data-bx-zeilen="6"] {
  --bx-zeilen: 6;
}

[data-bx-zeilen="7"] {
  --bx-zeilen: 7;
}

[data-bx-zeilen="8"] {
  --bx-zeilen: 8;
}

[data-bx-zeilen="9"] {
  --bx-zeilen: 9;
}

[data-bx-zeilen="10"] {
  --bx-zeilen: 10;
}

[data-bx-zeilen="11"] {
  --bx-zeilen: 11;
}

[data-bx-zeilen="12"] {
  --bx-zeilen: 12;
}

[data-bx-zeilen="13"] {
  --bx-zeilen: 13;
}

[data-bx-zeilen="14"] {
  --bx-zeilen: 14;
}

[data-bx-zeilen="15"] {
  --bx-zeilen: 15;
}

[data-bx-zeilen="16"] {
  --bx-zeilen: 16;
}

[data-bx-zeilen="17"] {
  --bx-zeilen: 17;
}

[data-bx-zeilen="18"] {
  --bx-zeilen: 18;
}

[data-bx-zeilen="19"] {
  --bx-zeilen: 19;
}

[data-bx-zeilen="20"] {
  --bx-zeilen: 20;
}

[data-bx-zeilen="21"] {
  --bx-zeilen: 21;
}

[data-bx-zeilen="22"] {
  --bx-zeilen: 22;
}

[data-bx-zeilen="23"] {
  --bx-zeilen: 23;
}

[data-bx-zeilen="24"] {
  --bx-zeilen: 24;
}

[data-bx-zeilen="25"] {
  --bx-zeilen: 25;
}

[data-bx-gruppen="0"] {
  --bx-gruppen: 0;
}

[data-bx-gruppen="1"] {
  --bx-gruppen: 1;
}

[data-bx-gruppen="2"] {
  --bx-gruppen: 2;
}

[data-bx-gruppen="3"] {
  --bx-gruppen: 3;
}

/*
 * == Ph8 H1c: Variante `zustaendigkeit` (Teilplan H1c §4.5; Design Migration Umzug v2 „Zuständigkeiten“) ==
 * Echte Tabelle ohne Skalierung: die Zeilenhöhe folgt dem Inhalt, die Spaltenbreiten stehen wie im Design
 * (Schritt 60, Aktion 202, zwei Anteile gleich, Zeitfenster 232 px). Unter `stapeln` wird jede Zeile zur Karte, die
 * Zellen tragen ihren Spaltenkopf als `data-bx-spaltenkopf`. Jede Regel trägt den Vorsatz `--zustaendigkeit`.
 */
.bx-vergleich-davor-danach__tabelle--zustaendigkeit {
  --bx-vdd-spalten: 60px 202px minmax(0, 1fr) minmax(0, 1fr) 232px;
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-weiss);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th {
  color: var(--farbe-mikrotext);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th:first-child,
.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th:nth-child(2) {
  border: 0;
  background-color: transparent;
  color: var(--farbe-navy);
  font-weight: var(--schrift-label-stark-gewicht);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th:first-child {
  padding-inline-end: 0;
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th:nth-child(2) {
  padding-inline-start: 0;
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th:nth-child(3) {
  border-inline-start: 1px solid var(--farbe-linie-karte);
  background-color: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th[data-bx-spalte="anteil"] {
  border-inline-start: 1px solid var(--farbe-linie-grafik);
  background-color: var(--farbe-hellblau-vergleich);
  color: var(--farbe-orange-tief);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th:last-child {
  border-inline-start: 1px solid var(--farbe-linie-grafik);
  background-color: transparent;
  color: var(--farbe-mint-text);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__phase[data-bx-akzent="grau"]
  .bx-vergleich-davor-danach__gruppen-punkt {
  background-color: var(--farbe-phase-gelb);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__zeile {
  block-size: auto;
  align-items: stretch;
  border-block-start-color: var(--farbe-flaeche-band);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__nummer {
  align-items: flex-start;
  padding-block: var(--abstand-20);
  font-weight: var(--schrift-text-gewicht);
  text-align: start;
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__phase[data-bx-akzent="grau"]
  .bx-vergleich-davor-danach__nummer {
  border-inline-start-color: var(--farbe-linie);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__phase[data-bx-akzent="grau"]
  .bx-vergleich-davor-danach__marke {
  background-color: var(--farbe-mikrotext);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__phase[data-bx-akzent="gruen"]
  .bx-vergleich-davor-danach__marke {
  background-color: var(--farbe-mint-text);
}

.bx-vergleich-davor-danach__aktion {
  padding: var(--abstand-20) var(--abstand-20) var(--abstand-20) 0;
  color: var(--farbe-navy);
  text-align: start;
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-termin-schritt-titel-groesse);
  line-height: var(--schrift-person-name-klein-zeile);
  letter-spacing: var(--schrift-termin-schritt-titel-laufweite);
  text-wrap: pretty;
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit td:nth-child(n + 3) {
  min-inline-size: 0;
  padding: var(--abstand-20) var(--abstand-22);
  border-inline-start: 1px solid var(--farbe-linie-karte);
  background-color: var(--farbe-flaeche-karte);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-text-kompakt-zeile);
  text-wrap: pretty;
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit td[data-bx-spalte="anteil"] {
  border-inline-start-color: var(--farbe-linie-grafik);
  background-color: var(--farbe-hellblau-vergleich);
  color: var(--farbe-navy);
  font-weight: var(--schrift-menue-eintrag-gewicht);
}

.bx-vergleich-davor-danach__tabelle--zustaendigkeit td:last-child {
  border-inline-start-color: var(--farbe-linie-grafik);
  background-color: transparent;
  padding-inline: var(--abstand-20) var(--abstand-26);
}

.bx-vergleich-davor-danach__zeit {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-8);
  padding: var(--abstand-8) var(--abstand-12);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  background-color: var(--farbe-flaeche-band);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-stark-gewicht);
  font-size: var(--schrift-umfang-mono-groesse);
  line-height: var(--schrift-pille-zeile);
  white-space: nowrap;
}

.bx-vergleich-davor-danach__zeit::before {
  content: '';
  flex: none;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="grau"] .bx-vergleich-davor-danach__zeit::before {
  background-color: var(--farbe-phase-gelb);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="gruen"] .bx-vergleich-davor-danach__zeit {
  border-color: var(--farbe-linie-mint);
  background-color: var(--farbe-mint-flaeche);
  color: var(--farbe-gruen);
}

.bx-vergleich-davor-danach__phase[data-bx-akzent="gruen"] .bx-vergleich-davor-danach__zeit::before {
  background-color: var(--farbe-mint-akzent);
}

.bx-vergleich-davor-danach__fussnote {
  max-inline-size: 820px;
  margin: var(--abstand-18) 0 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-kennzahl-text-gewicht);
  font-size: var(--schrift-kennzahl-text-groesse);
  line-height: var(--schrift-kennzahl-text-zeile);
}

/*
 * Ph12 Design-Abgleich (Design Migration Umzug v2 `zKopf`, `zZeile`, `zZelle`, `zZeit`): Die Zuständigkeiten stehen unter
 * 1024 px (und mobil) als Karten. Raster aus Schrittnummer und Aktion (61 px bzw. 60 px | 1fr), die drei Anteile darunter
 * über die volle Breite mit ihren Flächen; der Spaltenkopf steht als farbiges Label vor dem Inhalt. Die Kopfzeile bleibt
 * für Screenreader, jede Zelle ist wie `.bx-unsichtbar` verborgen.
 */
@media (width < 1024px) {
  .bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile {
    display: block;
    position: absolute;
    block-size: 1px;
    inline-size: 1px;
  }

  .bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile th,
  .bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__kopfzeile td {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px; /* Design: wie .bx-unsichtbar */
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__zeile {
    grid-template-columns: 61px minmax(0, 1fr);
  }

  .bx-vergleich-davor-danach__tabelle--zustaendigkeit td:nth-child(n + 3),
  .bx-vergleich-davor-danach__tabelle--zustaendigkeit td:last-child {
    grid-column: 1 / -1;
  }

  .bx-vergleich-davor-danach__tabelle--zustaendigkeit td:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-6);
  }

  .bx-vergleich-davor-danach__tabelle--zustaendigkeit td[data-bx-spaltenkopf]::before {
    content: attr(data-bx-spaltenkopf);
    display: block;
    margin-block-end: var(--abstand-6);
    color: var(--farbe-navy);
    font-family: var(--schrift-familie-mono);
    font-weight: var(--schrift-label-stark-gewicht);
    font-size: var(--schrift-widget-kicker-groesse);
    line-height: var(--schrift-label-zeile);
    letter-spacing: var(--schrift-label-laufweite);
    text-transform: uppercase;
  }

  .bx-vergleich-davor-danach__tabelle--zustaendigkeit td[data-bx-spalte="anteil"]::before {
    color: var(--farbe-orange-tief);
  }

  .bx-vergleich-davor-danach__tabelle--zustaendigkeit td:last-child::before {
    margin-block-end: 0;
    color: var(--farbe-mint-text);
  }
}

@media (width >= 768px) and (width < 1024px) {
  .bx-vergleich-davor-danach__tabelle--zustaendigkeit .bx-vergleich-davor-danach__zeile {
    grid-template-columns: 60px minmax(0, 1fr);
  }
}

/*
 * Ph8 H2a: VF-Kette mit Höhenstapel. Ph12 Design-Abgleich (V-B-app-35, VF Z. 489–556): Paneel mit Nummernkachel, Titel und
 * Pfeilknöpfen oben, Pillen mit Pfeilen dazwischen, Fortschrittslinie, zweispaltige Vergleichskarte (grüne und orange
 * Oberkante) und Hinweis-Pillen mit Punkt.
 */
.bx-vergleich-davor-danach__interaktiv {
  padding: var(--abstand-20) var(--abstand-24) var(--abstand-22);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
  background: var(--farbe-flaeche-karte);
}
.bx-vergleich-davor-danach__kette-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-20); margin-block-end: var(--abstand-16); }
.bx-vergleich-davor-danach__kette-titel { display: flex; align-items: center; gap: var(--abstand-11); }
.bx-vergleich-davor-danach__kette-kopf .bx-vergleich-davor-danach__nummer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-kachel);
  background: var(--farbe-navy);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: 800;
  font-size: 12.5px;
}
.bx-vergleich-davor-danach__kette-name { display: block; color: var(--farbe-navy); font-weight: 800; font-size: 14.5px; letter-spacing: -0.2px; white-space: nowrap; }
.bx-vergleich-davor-danach__kette-titel .bx-vergleich-davor-danach__zusatz {
  display: block;
  margin: 2px 0 0; /* Design */
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1px;
}
.bx-vergleich-davor-danach__pfeile { display: flex; align-items: center; gap: var(--abstand-10); }
.bx-vergleich-davor-danach--stationen .bx-vergleich-davor-danach__pfeile button {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 1.5px solid var(--farbe-linie);
  border-radius: var(--radius-rund);
  background: var(--farbe-weiss);
  color: var(--farbe-navy);
}
.bx-vergleich-davor-danach--stationen .bx-vergleich-davor-danach__pfeile button:hover { border-color: var(--farbe-navy); }
.bx-vergleich-davor-danach__pfeile svg { inline-size: 16px; block-size: 16px; }
.bx-vergleich-davor-danach__pillen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-6); min-block-size: 76px; margin-block-end: var(--abstand-10); }
.bx-vergleich-davor-danach--stationen .bx-vergleich-davor-danach__pillen button {
  cursor: pointer;
  padding: var(--abstand-8) var(--abstand-15);
  border: 1.5px solid var(--farbe-linie);
  background: var(--farbe-weiss);
  color: var(--farbe-mikrotext);
  border-radius: var(--radius-pille);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  transition: background var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz), border-color var(--bewegung-dauer-kurz);
}
.bx-vergleich-davor-danach--stationen .bx-vergleich-davor-danach__pillen button[data-bx-erledigt] { background: var(--farbe-vertragshero-aktiv); color: var(--farbe-gruen); border-color: var(--farbe-vertragshero-aktiv-rand); }
.bx-vergleich-davor-danach--stationen .bx-vergleich-davor-danach__pillen button[aria-pressed="true"] { background: var(--farbe-navy); color: var(--farbe-weiss); border-color: var(--farbe-navy); }
.bx-vergleich-davor-danach__zwischen { color: var(--farbe-linie-stark); font-weight: 600; font-size: 13px; }
.bx-vergleich-davor-danach__zwischen[data-bx-erledigt] { color: var(--farbe-mint-akzent); }
.bx-vergleich-davor-danach__fortschritt { position: relative; overflow: hidden; block-size: 3px; margin-block: 0 var(--abstand-18); border-radius: var(--radius-strich); background: var(--farbe-linie); }
.bx-vergleich-davor-danach__fortschritt > span { display: block; block-size: 100%; border-radius: var(--radius-strich); transform-origin: left; background: var(--farbe-mint-akzent); transition: transform 3400ms linear; }
.bx-vergleich-davor-danach__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--farbe-linie); border-radius: var(--radius-rahmen); background: var(--farbe-weiss); box-shadow: var(--schatten-rahmen); }
.bx-vergleich-davor-danach__paar > div { min-block-size: 164px; padding: var(--abstand-20) var(--abstand-22) var(--abstand-22); box-sizing: border-box; border-block-start: 3px solid var(--farbe-mint-akzent); }
.bx-vergleich-davor-danach__paar > div:last-child { border-block-start-color: var(--farbe-orange-flaeche); border-inline-start: 1px solid var(--farbe-linie); background: var(--farbe-orange-karte); }
.bx-vergleich-davor-danach__paar strong { display: flex; align-items: center; gap: var(--abstand-8); margin-block-end: var(--abstand-12); color: var(--farbe-gruen); font-family: var(--schrift-familie-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.bx-vergleich-davor-danach__paar strong::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; border-radius: var(--radius-rund); background: var(--farbe-mint-akzent); }
.bx-vergleich-davor-danach__paar > div:last-child strong { color: var(--farbe-mikrotext); }
.bx-vergleich-davor-danach__paar > div:last-child strong::before { background: var(--farbe-orange-flaeche); }
.bx-vergleich-davor-danach__paar h4 { margin: 0 0 var(--abstand-8); color: var(--farbe-orange-wahl-text); font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -0.4px; text-wrap: pretty; }
.bx-vergleich-davor-danach__paar p { margin: 0; color: var(--farbe-navy); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.bx-vergleich-davor-danach__paar > div:first-child p { font-size: 15px; line-height: 1.6; }
.bx-vergleich-davor-danach__hinweise { display: flex; flex-wrap: wrap; gap: var(--abstand-8); margin: var(--abstand-16) 0 var(--abstand-26); list-style: none; padding: 0; }
.bx-vergleich-davor-danach__hinweise li { display: inline-flex; align-items: center; gap: var(--abstand-8); padding: var(--abstand-8) var(--abstand-15); border: 1px solid var(--farbe-linie); border-radius: var(--radius-pille); background: var(--farbe-weiss); color: var(--farbe-mikrotext); font-size: 12.5px; }
.bx-vergleich-davor-danach__hinweise li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; border-radius: var(--radius-rund); background: var(--farbe-mint-akzent); }
.bx-vergleich-davor-danach__hinweise strong { color: var(--farbe-navy); font-weight: 700; }
.bx-vergleich-davor-danach__interaktiv[hidden],
.bx-vergleich-davor-danach__liste[hidden] { display: none; }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="1"] { transform: scaleX(0.125); }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="2"] { transform: scaleX(0.25); }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="3"] { transform: scaleX(0.375); }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="4"] { transform: scaleX(0.5); }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="5"] { transform: scaleX(0.625); }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="6"] { transform: scaleX(0.75); }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="7"] { transform: scaleX(0.875); }
.bx-vergleich-davor-danach__fortschritt [data-bx-stufe="8"] { transform: scaleX(1.0); }
@media (prefers-reduced-motion: reduce) { .bx-vergleich-davor-danach__fortschritt > span { transition: none; } }
@media (width < 768px) { .bx-vergleich-davor-danach__paar { grid-template-columns: minmax(0, 1fr); } .bx-vergleich-davor-danach__paar > div:last-child { border-inline-start: 0; } }

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * Ph11 V-9 (N11-11): Integrationslogo vor dem Text der brainX-Pille (Design Loesung Abrechnung v3 Zeile 06): weißes
 * Feld 16 × 16, Logo 72 %, links bündig mit dem Pillenrand (-5px wie Design).
 */
.bx-vergleich-davor-danach__pille-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 16px; /* Logo-Feld (Design) */
  block-size: 16px; /* Logo-Feld (Design) */
  margin-inline-start: calc(var(--abstand-5) * -1);
  border-radius: var(--radius-chip); /* nächster Token zu 4px im Design */
  background-color: var(--farbe-weiss);
}

.bx-vergleich-davor-danach__pille-bild,
.bx-vergleich-davor-danach__pille-bild img {
  display: block;
  inline-size: 72%;
  block-size: 72%;
  object-fit: contain;
}

.bx-vergleich-davor-danach__pille-bild img {
  inline-size: 100%;
  block-size: 100%;
}

/*
 * Ph12 B1, V-B-app-62 und V-B-app-63 (Design Automatisierung v7 Z. 596, 548 ff.): Schlusssatz der Tabellenvariante in
 * 600/21 px, die Kopfzelle „brainX · EIN DATENSATZ“ in gemischter Schreibung, keine Trennlinien nach den Abschnitten
 * rund um den Prozess-Editor.
 */
.bx-vergleich-davor-danach:has(.bx-vergleich-davor-danach__kopf-nummer) .bx-vergleich-davor-danach__zitat p {
  font-weight: var(--schrift-zitat-tabelle-gewicht);
  font-size: var(--schrift-zitat-tabelle-groesse);
  line-height: var(--schrift-zitat-tabelle-zeile);
  letter-spacing: var(--schrift-zitat-tabelle-laufweite);
}

.bx-vergleich-davor-danach:has(.bx-vergleich-davor-danach__kopf-nummer) .bx-vergleich-davor-danach__kopfzeile th:last-child {
  text-transform: none;
}

.bx-ebene:has(.bx-prozess-editor) :is(.bx-kurzantwort, .bx-vergleich-davor-danach) {
  border-block-end: 0;
}

/* Ph12 Design-Abgleich (V-B-app-32, CF Z. 519): Beleg unter der Tabelle über die volle Inhaltsbreite */
.bx-vergleich-davor-danach .bx-beleg--navy-3 {
  padding: var(--abstand-36) 0 0;
}

/*
 * Baustein „case-study-zeile“ (Design-Abgleich Ph12, Paket E; Design „Case-Study-Link“ der Lösungsseiten): ein Satz mit
 * einem Link, bei der Aufgabenseite 30 px, bei der Rollenseite 26 px in den vorigen Abschnitt gezogen (negativer Rand
 * wie im Design). Der Link ist orange (Textlink-Orange, AA) und wird beim Zeigen navy. Nur Tokens; Stufe nur
 * 768px.
 */
.bx-case-study-zeile {
  margin-block-start: calc(-1 * var(--abstand-30));
  padding: 0 var(--seitenrand) var(--abstand-52);
}

.bx-case-study-zeile[data-bx-variante="rolle"] {
  margin-block-start: calc(-1 * var(--abstand-26));
  padding-block-end: var(--abstand-48);
}

/* Die Zeile hängt wie im Design am vorigen Abschnitt, ohne Sektionslinie */
.bx-abschnitt:has(+ .bx-abschnitt > .bx-case-study-zeile) > .bx-vergleich-davor-danach {
  border-block-end: 0;
}

.bx-case-study-zeile__text {
  margin: 0;
  color: var(--farbe-text-sekundaer);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-fussnote-zeile);
  text-wrap: pretty;
}

.bx-case-study-zeile__link {
  color: var(--farbe-orange-text);
  font-weight: var(--schrift-textlink-gewicht);
  transition: color var(--bewegung-dauer-kurz);
}

.bx-case-study-zeile__link:hover {
  color: var(--farbe-navy);
}

@media (width < 768px) {
  .bx-case-study-zeile {
    margin-block-start: calc(-1 * var(--abstand-20));
    padding-block-end: var(--abstand-42);
  }

  .bx-case-study-zeile[data-bx-variante="rolle"] {
    margin-block-start: calc(-1 * var(--abstand-16));
    padding-block-end: var(--abstand-38);
  }

  .bx-case-study-zeile[data-bx-variante="rolle"] .bx-case-study-zeile__link {
    white-space: nowrap;
  }
}

/*
 * Baustein „ergebnis-rechnung“ (Vertrag Ph8 §3.4.3, Teilplan H0b E3; Design APP Vertragsverwaltung F v2 „Rechner“):
 * zwei Spalten (Erklärung, Karte), Anteilsbalken über `data-bx-prozent` (`css/produkt/prozent.css`, waagrecht),
 * Vorteil-Block auf Navy-tief mit Mint-Glow.
 */
.bx-ergebnis-rechnung {
  padding: var(--abstand-52) var(--seitenrand) var(--abstand-56);
  border-block-end: 1px solid var(--farbe-linie-sektion);
  font-family: var(--schrift-familie-text);
}

.bx-ergebnis-rechnung--hell {
  background-color: var(--farbe-flaeche-hell);
}

.bx-ergebnis-rechnung--zart {
  background-color: var(--farbe-flaeche-zart);
}

.bx-ergebnis-rechnung--navy {
  background-color: var(--farbe-navy);
}

.bx-ergebnis-rechnung__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--abstand-40) var(--abstand-56);
  align-items: start;
}

.bx-ergebnis-rechnung__kopf {
  margin-block-end: var(--abstand-20);
}

.bx-ergebnis-rechnung__absaetze {
  max-inline-size: 520px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-ergebnis-rechnung__absaetze li {
  padding-block: var(--abstand-16);
  border-block-start: 1px solid var(--farbe-linie-sektion);
}

.bx-ergebnis-rechnung__absaetze li:last-child {
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-ergebnis-rechnung__absatz-titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-10);
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-navy);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-termin-schritt-titel-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
  letter-spacing: var(--schrift-termin-schritt-titel-laufweite);
}

.bx-ergebnis-rechnung__absatz-text {
  margin: 0 0 0 var(--abstand-20);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-kennzahl-text-gewicht);
  font-size: var(--schrift-kennzahl-text-groesse);
  line-height: var(--schrift-kennzahl-text-zeile);
  letter-spacing: var(--schrift-kennzahl-text-laufweite);
  text-wrap: pretty;
}

.bx-ergebnis-rechnung__marke {
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-mini);
  background-color: var(--farbe-navy);
}

li:nth-child(2) > .bx-ergebnis-rechnung__marke,
li:nth-child(2) > .bx-ergebnis-rechnung__absatz-titel .bx-ergebnis-rechnung__marke {
  background-color: var(--farbe-karte-punkt);
}

li:nth-child(3) > .bx-ergebnis-rechnung__marke,
li:nth-child(3) > .bx-ergebnis-rechnung__absatz-titel .bx-ergebnis-rechnung__marke {
  background-color: var(--farbe-mint-akzent);
}

.bx-ergebnis-rechnung__aktion {
  margin: var(--abstand-24) 0 0;
}

.bx-ergebnis-rechnung__karte {
  padding: var(--abstand-28) var(--abstand-30);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-rahmen);
}

.bx-ergebnis-rechnung__titel {
  margin: 0 0 var(--abstand-4);
  color: var(--farbe-navy);
  font-weight: var(--schrift-trust-titel-gewicht);
  font-size: var(--schrift-trust-titel-groesse);
  line-height: var(--schrift-trust-titel-zeile);
  letter-spacing: var(--schrift-trust-titel-laufweite);
}

.bx-ergebnis-rechnung__annahme {
  margin: 0 0 var(--abstand-16);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-person-rolle-gewicht);
  font-size: var(--schrift-person-rolle-groesse);
  line-height: var(--schrift-person-rolle-zeile);
  letter-spacing: var(--schrift-person-rolle-laufweite);
}

.bx-ergebnis-rechnung__summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-10);
  margin: 0;
}

.bx-ergebnis-rechnung__summe-zahl {
  color: var(--farbe-navy);
  font-weight: var(--schrift-zahl-gross-gewicht);
  font-size: var(--schrift-zahl-gross-groesse);
  line-height: var(--schrift-zahl-gross-zeile);
  letter-spacing: var(--schrift-zahl-gross-laufweite);
  font-variant-numeric: tabular-nums;
}

.bx-ergebnis-rechnung__summe-einheit {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
}

.bx-ergebnis-rechnung__balken {
  display: flex;
  gap: 3px; /* Design */
  block-size: 10px;
  margin: var(--abstand-24) 0 var(--abstand-14);
}

.bx-ergebnis-rechnung__anteil {
  inline-size: var(--bx-prozent);
  background-color: var(--farbe-navy);
}

.bx-ergebnis-rechnung__anteil:first-child {
  border-start-start-radius: var(--radius-pille);
  border-end-start-radius: var(--radius-pille);
}

.bx-ergebnis-rechnung__anteil:last-child {
  border-start-end-radius: var(--radius-pille);
  border-end-end-radius: var(--radius-pille);
}

.bx-ergebnis-rechnung__anteil:nth-child(2) {
  background-color: var(--farbe-karte-punkt);
}

.bx-ergebnis-rechnung__anteil:nth-child(3) {
  background-color: var(--farbe-mint-akzent);
}

.bx-ergebnis-rechnung__zeilen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--abstand-9) var(--abstand-10);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-ergebnis-rechnung__zeilen li {
  display: contents;
}

.bx-ergebnis-rechnung__zeile-text {
  color: var(--farbe-navy);
  font-weight: var(--schrift-trust-chip-gewicht);
  font-size: var(--schrift-trust-chip-groesse);
  line-height: var(--schrift-trust-chip-zeile);
}

.bx-ergebnis-rechnung__zeile-wert {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-stark-gewicht);
  font-size: var(--schrift-textlink-groesse);
  white-space: nowrap;
}

.bx-ergebnis-rechnung__vorteil {
  position: relative;
  overflow: hidden;
  margin-block-start: var(--abstand-22);
  padding: var(--abstand-20) var(--abstand-22) var(--abstand-6);
  border-radius: var(--radius-panel);
  background: radial-gradient(280px 280px at 100% 0%, var(--farbe-glow-mint-karte), var(--farbe-glow-mint-aus) 68%),
    var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-ergebnis-rechnung__vorteil-kicker {
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
  text-transform: uppercase;
}

.bx-ergebnis-rechnung__vorteil-zeile,
.bx-ergebnis-rechnung__zusatz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-16);
  padding-block: var(--abstand-14);
}

.bx-ergebnis-rechnung__zusatz {
  padding-block-end: var(--abstand-16);
  border-block-start: 1px solid var(--farbe-navy-linie);
}

.bx-ergebnis-rechnung__vorteil-text,
.bx-ergebnis-rechnung__zusatz-titel {
  margin: 0;
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-karte-text-zeile);
  text-wrap: pretty;
}

.bx-ergebnis-rechnung__zusatz-text {
  margin: var(--abstand-4) 0 0;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-ergebnis-rechnung__vorteil-wert {
  flex: none;
  margin: 0;
  font-weight: var(--schrift-zahl-bilanz-gewicht);
  font-size: var(--schrift-zahl-bilanz-groesse);
  line-height: var(--schrift-zahl-bilanz-zeile);
  letter-spacing: var(--schrift-zahl-bilanz-laufweite);
}

.bx-ergebnis-rechnung__zusatz-wert {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
}

.bx-ergebnis-rechnung__zusatz-zahl {
  font-weight: var(--schrift-fehler-hinweis-titel-gewicht);
  font-size: var(--schrift-fehler-hinweis-titel-groesse);
  line-height: var(--schrift-fehler-hinweis-titel-zeile);
  white-space: nowrap;
}

.bx-ergebnis-rechnung__zusatz-einheit {
  margin-block-start: var(--abstand-5);
  color: var(--farbe-mint);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
}

.bx-ergebnis-rechnung__fussnoten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6);
  margin-block-start: var(--abstand-14);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
  text-wrap: pretty;
}

.bx-ergebnis-rechnung__fussnoten p {
  margin: 0;
}

@media (width < 768px) {
  .bx-ergebnis-rechnung {
    padding-block: var(--abstand-40);
  }

  .bx-ergebnis-rechnung__karte {
    padding: var(--abstand-22) var(--abstand-20);
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: Variante `aufgabe` (Ä11-17, K-10; Design `Loesung Leads v3` „Rechnung“ Z. 436–457, DA §5.3) ==
 * Raster drei Spalten: Kopf und Annahmen über zwei, die Navy-Karte in der dritten; unter 1080px gestapelt.
 * Die Fußnote steht unter dem Raster. Ohne den Modifikator `--aufgabe` greift keine dieser Regeln.
 */
.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__raster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-22);
  align-items: stretch;
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__erklaerung {
  grid-column: span 2;
}

.bx-ergebnis-rechnung__annahmen {
  max-inline-size: 600px;
  margin: 0;
  border-block-end: 1px solid var(--farbe-linie-karte);
}

.bx-ergebnis-rechnung__annahmen-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-16);
  padding-block: var(--abstand-12);
  border-block-start: 1px solid var(--farbe-linie-karte);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
  letter-spacing: var(--schrift-karte-text-laufweite);
}

.bx-ergebnis-rechnung__annahmen-zeile dd {
  margin: 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  white-space: nowrap;
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__karte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--abstand-26) var(--abstand-28);
  border: 0;
  border-radius: var(--radius-karte);
  background-color: var(--farbe-navy);
  box-shadow: none;
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__titel {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__annahme,
.bx-ergebnis-rechnung__satz {
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-person-rolle-klein-gewicht);
  font-size: var(--schrift-person-rolle-groesse);
  line-height: var(--schrift-person-rolle-zeile);
  letter-spacing: var(--schrift-person-rolle-laufweite);
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__annahme {
  margin: 0 0 var(--abstand-14);
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__summe {
  gap: 0 var(--abstand-8);
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__summe-zahl,
.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__summe-einheit {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schrift-h2-start-zeile);
  letter-spacing: var(--schrift-h2-start-laufweite);
}

.bx-ergebnis-rechnung__satz {
  margin: var(--abstand-6) 0 var(--abstand-16);
}

.bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__aktion {
  margin: 0;
}

.bx-ergebnis-rechnung__aktion-link {
  border-bottom-color: transparent;
  color: var(--farbe-weiss);
}

.bx-ergebnis-rechnung__aktion-link:hover,
[data-sg-zustand="hover"] .bx-ergebnis-rechnung__aktion-link {
  color: var(--farbe-mint);
}

.bx-ergebnis-rechnung--aufgabe > .bx-ergebnis-rechnung__fussnoten {
  max-inline-size: 900px;
}

@media (width < 1080px) {
  .bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-ergebnis-rechnung--aufgabe .bx-ergebnis-rechnung__erklaerung {
    grid-column: auto;
  }
}

/* Ph12 Design-Abgleich (E-loesungen -128): Stern an der Summe hochgestellt, halb so groß (Design „18.200 €*“) */
.bx-ergebnis-rechnung__stern {
  font-size: 0.5em;
  font-weight: var(--schrift-pille-gewicht);
  letter-spacing: 0;
  vertical-align: super;
}

/*
 * Ph12 Design-Abgleich (V-B-app-26, VF Z. 439–476): Vorteil-Block mit Kopfzeile (Wortmarke und „APP“ links, Kicker
 * rechts), Wert mit Unterzeile rechtsbündig und Sternchen an Summe und Zusatzwert.
 */
.bx-ergebnis-rechnung__vorteil-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  margin-block-end: var(--abstand-6);
}

.bx-ergebnis-rechnung__vorteil-marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
}

.bx-ergebnis-rechnung__vorteil-marke img {
  display: block;
  block-size: 19px;
  inline-size: auto;
}

.bx-ergebnis-rechnung__vorteil-kopf .bx-ergebnis-rechnung__vorteil-kicker {
  margin: 0;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
}

.bx-ergebnis-rechnung__vorteil-text {
  flex: 1 1 140px;
  font-weight: 600;
  line-height: 1.45;
}

.bx-ergebnis-rechnung__vorteil-zeile {
  position: relative;
  flex-wrap: wrap;
}

.bx-ergebnis-rechnung__vorteil-wert {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1.5px;
}

.bx-ergebnis-rechnung__vorteil-unter {
  margin-block-start: var(--abstand-5);
  color: var(--farbe-mint);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0;
}

.bx-ergebnis-rechnung__summe-stern {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0;
}

.bx-ergebnis-rechnung__zusatz-stern {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
}

/*
 * Geteilte Prozent-Tabelle der Ph8-Bausteine (Vertrag Ph8 W26, §3.4.13, Teilplan H0b E24, H8-14/H0b R14, K-3): das
 * Attribut `data-bx-prozent` (Ganzzahl 0…100, im Build gerechnet) setzt nur die Laufvariable `--bx-prozent`; die Achse
 * (`inline-size` bzw. `block-size`) wählt jeder Nutzer in seinem Baustein-CSS. Einzige Tabelle für dieses Attribut.
 */

[data-bx-prozent="0"] {
  --bx-prozent: 0%;
}

[data-bx-prozent="1"] {
  --bx-prozent: 1%;
}

[data-bx-prozent="2"] {
  --bx-prozent: 2%;
}

[data-bx-prozent="3"] {
  --bx-prozent: 3%;
}

[data-bx-prozent="4"] {
  --bx-prozent: 4%;
}

[data-bx-prozent="5"] {
  --bx-prozent: 5%;
}

[data-bx-prozent="6"] {
  --bx-prozent: 6%;
}

[data-bx-prozent="7"] {
  --bx-prozent: 7%;
}

[data-bx-prozent="8"] {
  --bx-prozent: 8%;
}

[data-bx-prozent="9"] {
  --bx-prozent: 9%;
}

[data-bx-prozent="10"] {
  --bx-prozent: 10%;
}

[data-bx-prozent="11"] {
  --bx-prozent: 11%;
}

[data-bx-prozent="12"] {
  --bx-prozent: 12%;
}

[data-bx-prozent="13"] {
  --bx-prozent: 13%;
}

[data-bx-prozent="14"] {
  --bx-prozent: 14%;
}

[data-bx-prozent="15"] {
  --bx-prozent: 15%;
}

[data-bx-prozent="16"] {
  --bx-prozent: 16%;
}

[data-bx-prozent="17"] {
  --bx-prozent: 17%;
}

[data-bx-prozent="18"] {
  --bx-prozent: 18%;
}

[data-bx-prozent="19"] {
  --bx-prozent: 19%;
}

[data-bx-prozent="20"] {
  --bx-prozent: 20%;
}

[data-bx-prozent="21"] {
  --bx-prozent: 21%;
}

[data-bx-prozent="22"] {
  --bx-prozent: 22%;
}

[data-bx-prozent="23"] {
  --bx-prozent: 23%;
}

[data-bx-prozent="24"] {
  --bx-prozent: 24%;
}

[data-bx-prozent="25"] {
  --bx-prozent: 25%;
}

[data-bx-prozent="26"] {
  --bx-prozent: 26%;
}

[data-bx-prozent="27"] {
  --bx-prozent: 27%;
}

[data-bx-prozent="28"] {
  --bx-prozent: 28%;
}

[data-bx-prozent="29"] {
  --bx-prozent: 29%;
}

[data-bx-prozent="30"] {
  --bx-prozent: 30%;
}

[data-bx-prozent="31"] {
  --bx-prozent: 31%;
}

[data-bx-prozent="32"] {
  --bx-prozent: 32%;
}

[data-bx-prozent="33"] {
  --bx-prozent: 33%;
}

[data-bx-prozent="34"] {
  --bx-prozent: 34%;
}

[data-bx-prozent="35"] {
  --bx-prozent: 35%;
}

[data-bx-prozent="36"] {
  --bx-prozent: 36%;
}

[data-bx-prozent="37"] {
  --bx-prozent: 37%;
}

[data-bx-prozent="38"] {
  --bx-prozent: 38%;
}

[data-bx-prozent="39"] {
  --bx-prozent: 39%;
}

[data-bx-prozent="40"] {
  --bx-prozent: 40%;
}

[data-bx-prozent="41"] {
  --bx-prozent: 41%;
}

[data-bx-prozent="42"] {
  --bx-prozent: 42%;
}

[data-bx-prozent="43"] {
  --bx-prozent: 43%;
}

[data-bx-prozent="44"] {
  --bx-prozent: 44%;
}

[data-bx-prozent="45"] {
  --bx-prozent: 45%;
}

[data-bx-prozent="46"] {
  --bx-prozent: 46%;
}

[data-bx-prozent="47"] {
  --bx-prozent: 47%;
}

[data-bx-prozent="48"] {
  --bx-prozent: 48%;
}

[data-bx-prozent="49"] {
  --bx-prozent: 49%;
}

[data-bx-prozent="50"] {
  --bx-prozent: 50%;
}

[data-bx-prozent="51"] {
  --bx-prozent: 51%;
}

[data-bx-prozent="52"] {
  --bx-prozent: 52%;
}

[data-bx-prozent="53"] {
  --bx-prozent: 53%;
}

[data-bx-prozent="54"] {
  --bx-prozent: 54%;
}

[data-bx-prozent="55"] {
  --bx-prozent: 55%;
}

[data-bx-prozent="56"] {
  --bx-prozent: 56%;
}

[data-bx-prozent="57"] {
  --bx-prozent: 57%;
}

[data-bx-prozent="58"] {
  --bx-prozent: 58%;
}

[data-bx-prozent="59"] {
  --bx-prozent: 59%;
}

[data-bx-prozent="60"] {
  --bx-prozent: 60%;
}

[data-bx-prozent="61"] {
  --bx-prozent: 61%;
}

[data-bx-prozent="62"] {
  --bx-prozent: 62%;
}

[data-bx-prozent="63"] {
  --bx-prozent: 63%;
}

[data-bx-prozent="64"] {
  --bx-prozent: 64%;
}

[data-bx-prozent="65"] {
  --bx-prozent: 65%;
}

[data-bx-prozent="66"] {
  --bx-prozent: 66%;
}

[data-bx-prozent="67"] {
  --bx-prozent: 67%;
}

[data-bx-prozent="68"] {
  --bx-prozent: 68%;
}

[data-bx-prozent="69"] {
  --bx-prozent: 69%;
}

[data-bx-prozent="70"] {
  --bx-prozent: 70%;
}

[data-bx-prozent="71"] {
  --bx-prozent: 71%;
}

[data-bx-prozent="72"] {
  --bx-prozent: 72%;
}

[data-bx-prozent="73"] {
  --bx-prozent: 73%;
}

[data-bx-prozent="74"] {
  --bx-prozent: 74%;
}

[data-bx-prozent="75"] {
  --bx-prozent: 75%;
}

[data-bx-prozent="76"] {
  --bx-prozent: 76%;
}

[data-bx-prozent="77"] {
  --bx-prozent: 77%;
}

[data-bx-prozent="78"] {
  --bx-prozent: 78%;
}

[data-bx-prozent="79"] {
  --bx-prozent: 79%;
}

[data-bx-prozent="80"] {
  --bx-prozent: 80%;
}

[data-bx-prozent="81"] {
  --bx-prozent: 81%;
}

[data-bx-prozent="82"] {
  --bx-prozent: 82%;
}

[data-bx-prozent="83"] {
  --bx-prozent: 83%;
}

[data-bx-prozent="84"] {
  --bx-prozent: 84%;
}

[data-bx-prozent="85"] {
  --bx-prozent: 85%;
}

[data-bx-prozent="86"] {
  --bx-prozent: 86%;
}

[data-bx-prozent="87"] {
  --bx-prozent: 87%;
}

[data-bx-prozent="88"] {
  --bx-prozent: 88%;
}

[data-bx-prozent="89"] {
  --bx-prozent: 89%;
}

[data-bx-prozent="90"] {
  --bx-prozent: 90%;
}

[data-bx-prozent="91"] {
  --bx-prozent: 91%;
}

[data-bx-prozent="92"] {
  --bx-prozent: 92%;
}

[data-bx-prozent="93"] {
  --bx-prozent: 93%;
}

[data-bx-prozent="94"] {
  --bx-prozent: 94%;
}

[data-bx-prozent="95"] {
  --bx-prozent: 95%;
}

[data-bx-prozent="96"] {
  --bx-prozent: 96%;
}

[data-bx-prozent="97"] {
  --bx-prozent: 97%;
}

[data-bx-prozent="98"] {
  --bx-prozent: 98%;
}

[data-bx-prozent="99"] {
  --bx-prozent: 99%;
}

[data-bx-prozent="100"] {
  --bx-prozent: 100%;
}

/*
 * Abschnittstyp „faq“ (Vertrag Ph4 §3.5, §6; Teilplan D2 E-4, E-5, §8.4): FAQ einspaltig nach Startseite v6 S12
 * (PC Z. 28–34), Variante B ohne Höhenreserve für die CRM-Pakete (PC Z. 167). Nur Tokens; Stufen nur 768px.
 * Die Trennlinie ist ein `::after` des Eintrags ohne Rahmenhöhe, weil das Modul `akkordeon` nur Überschriften und
 * Antworten misst (keine Höhensprünge, DS AK7). Das „+“ zeichnet ein SVG mit Strich in Orange-Fläche (nie als
 * Textfarbe, N4-6); es dreht sich beim Öffnen und ist ohne JavaScript unsichtbar. Reduzierte Bewegung regelt
 * basis.css (Endzustand ohne Übergang).
 */

.bx-faq {
  padding: var(--abstand-100) var(--seitenrand) var(--abstand-96); /* auch Mobil-Referenz S12 */
}

.bx-faq__innen {
  max-inline-size: 880px; /* Breite der Liste (Design) */
}

.bx-faq .bx-sektionskopf {
  margin-block-end: var(--abstand-24); /* Abstand H2 oder Lead zur ersten Frage, bei jeder Breite */
}

/* Variante B: hebt die Höhenreserve des Moduls auf (die Höhe ändert sich beim Öffnen bewusst) */
.bx-faq--ohne-reserve .bx-faq__liste {
  min-block-size: auto;
}

.bx-faq__eintrag {
  position: relative;
}

/* Linie ohne Einfluss auf die Messung des Moduls */
.bx-faq__eintrag::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background-color: var(--farbe-linie);
}

.bx-faq__frage {
  margin: 0;
}

.bx-faq__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-20);
  inline-size: 100%;
  padding: var(--abstand-22) 0;
  border: 0;
  background-color: transparent;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-faq-frage-gewicht);
  font-size: var(--schrift-faq-frage-groesse);
  line-height: var(--schrift-faq-frage-zeile);
  letter-spacing: var(--schrift-faq-frage-laufweite);
  text-align: start;
  text-wrap: pretty;
  cursor: pointer;
}

.bx-faq__knopf[aria-disabled="true"] {
  cursor: default;
}

.bx-faq__plus {
  flex: none;
  inline-size: 16px;
  block-size: 28px; /* Höhe des „+“ im Design: Glyphe 28 px mit Zeilenhöhe 1, Zeile 72 px */
  stroke: var(--farbe-orange-flaeche);
  transition: transform var(--bewegung-faq-drehen) var(--bewegung-kurve);
}

.bx-faq__knopf[aria-expanded="true"] .bx-faq__plus {
  transform: rotate(45deg);
}

.bx-faq__antwort-innen {
  padding: 0 var(--abstand-20) var(--abstand-22) 0;
}

@media (width >= 768px) {
  .bx-faq__antwort-innen {
    padding-inline-end: var(--abstand-48);
  }
}

.bx-faq__absatz {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-faq-antwort-gewicht);
  font-size: var(--schrift-faq-antwort-groesse);
  line-height: var(--schrift-faq-antwort-zeile);
  letter-spacing: var(--schrift-faq-antwort-laufweite);
  text-wrap: pretty;
}

.bx-faq__absatz + .bx-faq__absatz,
.bx-faq__links {
  margin: var(--abstand-12) 0 0;
}

/* Linkzeile ohne Zeilenumbruch innerhalb eines Links (Daten: links_nicht_umbrechen, Vertrieb „Was kostet das?“) */
.bx-faq__links--nowrap .bx-textlink {
  white-space: nowrap;
}

/* Ohne JavaScript: alle Antworten offen (Modul-CSS), das „+“ ohne Funktion */
@media (scripting: none) {
  .bx-faq__plus {
    visibility: hidden;
  }

  .bx-faq__knopf {
    cursor: default;
  }
}

/*
 * Phase 7 (Vertrag Ph7 §3.12.5, Ä7-10; Teilplan G1c E-18): Kopf links, Liste rechts. Der Modifikator `bx-faq--zwei`
 * (Preise APP, Raster 1fr 1.4fr) bzw. `bx-faq--zwei-breit` (Preise CRM, 1fr 1.6fr) macht Kopf und Liste zu den zwei
 * Grid-Kindern; ab 1080px steht der Kopf über der Liste. Das Polster ersetzt das der Grundregel nur hier.
 */
.bx-faq--zwei,
.bx-faq--zwei-breit {
  padding: var(--abstand-72) var(--seitenrand);
}

.bx-faq--zwei .bx-faq__innen,
.bx-faq--zwei-breit .bx-faq__innen {
  display: grid;
  gap: var(--abstand-28) var(--abstand-72);
  max-inline-size: none;
}

.bx-faq--zwei .bx-faq__innen {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.bx-faq--zwei-breit .bx-faq__innen {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.bx-faq__kopf .bx-sektionskopf {
  margin-block-end: 0;
}

.bx-faq__kopf .bx-sektionskopf__titel {
  margin: 0;
}

.bx-faq__betont {
  color: var(--farbe-orange-text);
}

.bx-faq__kopftext {
  max-inline-size: 300px;
  margin: var(--abstand-18) 0 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-fehler-treffer-text-gewicht);
  font-size: var(--schrift-fehler-treffer-text-groesse);
  line-height: var(--schrift-fehler-treffer-text-zeile);
  letter-spacing: var(--schrift-fehler-treffer-text-laufweite);
}

@media (width < 1080px) {
  .bx-faq--zwei .bx-faq__innen,
  .bx-faq--zwei-breit .bx-faq__innen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-faq--zwei,
  .bx-faq--zwei-breit {
    padding-block: var(--abstand-block-gross);
  }
}


/*
 * Phase 8 H3b (Vertrag Ph8 Ä8-26; Teilplan H3b §3, §6): Raster `zwei-weit` (/app/, T3 `faqCols`), Links im
 * Kopftext (VF, AD, CF, W3), Aktionen und „Weiterführend“ (Automatisierung v7 „Fragen“). Ohne die Ph8-Parameter
 * greift keine dieser Regeln.
 */
.bx-faq--zwei-weit {
  padding: var(--abstand-72) var(--seitenrand);
}

.bx-faq--zwei-weit .bx-faq__innen {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  display: grid;
  gap: var(--abstand-28) var(--abstand-72);
  max-inline-size: none;
}

/* Kopftext mit Links bzw. Aktionen: ohne Höchstbreite (Design VF, CF, A7) */
.bx-faq__kopftext--breit {
  max-inline-size: none;
}

.bx-faq__kopftext .bx-textlink {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.bx-faq__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-18);
  margin-block-start: var(--abstand-26);
}

/* A7: Primärbutton in Navy (Kontrast Weiß auf Navy), Hover Orange */
.bx-faq__aktionen .bx-button--primaer {
  background-color: var(--farbe-navy);
}

.bx-faq__aktionen .bx-button--primaer:hover,
[data-sg-zustand="hover"] .bx-faq__aktionen .bx-button--primaer {
  background-color: var(--farbe-orange-text);
}

.bx-faq__weiter {
  margin-block-start: var(--abstand-38);
}

.bx-faq__weiter-label {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
  text-transform: uppercase;
}

.bx-faq__weiter-liste {
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--farbe-linie-karte);
  list-style: none;
}

.bx-faq__weiter-link {
  display: block;
  padding: var(--abstand-13) 0;
  border-block-end: 1px solid var(--farbe-linie-karte);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-fehler-link-groesse);
  line-height: var(--schrift-fehler-link-zeile);
  letter-spacing: var(--schrift-fehler-link-laufweite);
  transition: color var(--bewegung-dauer-kurz);
}

.bx-faq__weiter-link:hover,
[data-sg-zustand="hover"] .bx-faq__weiter-link {
  color: var(--farbe-orange-text);
}

@media (width < 1080px) {
  .bx-faq--zwei-weit .bx-faq__innen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-faq--zwei-weit {
    padding-block: var(--abstand-block-gross);
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: Kopfspalte `verweise` und `darstellung: offen` (§3.4.1, §3.10.3, N11-10 c; Design `Loesung Leads v3`
 * „FAQ“ Z. 459–480, `Loesung SaaS v2` „FAQ“, `Loesung C-Level v3` „Entscheiderfragen“ Z. 303–347) ==
 * `verweise` links: Kopf mit Querlinks in der Spalte 320px, Liste daneben; rechts: Kopf und Liste links, Karten in
 * der Spalte 360px; unter 1080px untereinander. `offen`: nummerierte Fragen mit sichtbarer Antwort, ohne
 * Akkordeon. Ohne die Modifikatoren bzw. `ol.bx-faq__offen` greift keine dieser Regeln.
 */
.bx-faq--verweise {
  padding: var(--abstand-52) var(--seitenrand);
}

.bx-faq--verweise .bx-faq__innen {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--abstand-28) var(--abstand-52);
  align-items: start;
  max-inline-size: none;
}

.bx-faq__kopf > .bx-faq__verweise {
  max-inline-size: 340px;
  margin-block-start: var(--abstand-18);
}

.bx-faq__verweise-liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-faq__verweis {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  padding-block: var(--abstand-13);
  border-block-start: 1px solid var(--farbe-linie);
}

.bx-faq__verweis:last-child {
  border-block-end: 1px solid var(--farbe-linie);
}

.bx-faq__verweis-kicker,
.bx-faq__verweise-titel {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-faq__verweis-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-4) var(--abstand-14);
}

.bx-faq__verweis-link {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-karte-titel-mittel-zeile);
  text-wrap: balance;
  transition: color var(--bewegung-dauer-kurz);
}

.bx-faq__verweis-link:hover,
[data-sg-zustand="hover"] .bx-faq__verweis-link {
  color: var(--farbe-orange-text);
}

.bx-faq__verweis-satz {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-person-rolle-zeile);
  text-wrap: pretty;
}

/* Lage rechts (Branchen): Kopf und Liste links, Karten rechts über beide Zeilen */
.bx-faq--verweise-rechts {
  padding: var(--abstand-96) var(--seitenrand) var(--abstand-100);
}

.bx-faq--verweise-rechts .bx-faq__innen {
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: 'kopf verweise' 'liste verweise';
  gap: var(--abstand-28) var(--abstand-72);
}

.bx-faq--verweise-rechts .bx-faq__kopf {
  grid-area: kopf;
}

.bx-faq--verweise-rechts .bx-faq__liste,
.bx-faq--verweise-rechts .bx-faq__offen {
  grid-area: liste;
}

.bx-faq--verweise-rechts .bx-faq__innen > .bx-faq__verweise {
  grid-area: verweise;
  padding-block-start: var(--abstand-66);
}

.bx-faq--verweise-rechts .bx-faq__verweise-titel {
  margin: 0 0 var(--abstand-14);
}

.bx-faq--verweise-rechts .bx-faq__verweise-liste {
  gap: var(--abstand-12);
}

.bx-faq--verweise-rechts .bx-faq__verweis {
  gap: var(--abstand-5);
  padding: var(--abstand-18) var(--abstand-20);
  border: 0;
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-flaeche-karte);
}

.bx-faq--verweise-rechts .bx-faq__verweis-link {
  font-weight: var(--schrift-person-name-gewicht);
  font-size: var(--schrift-person-name-groesse);
  line-height: var(--schrift-karte-titel-zeile);
}

/* Darstellung offen (C-Level „Entscheiderfragen“): Nummer | Frage | Antwort */
.bx-faq:has(> .bx-faq__innen > .bx-faq__offen) .bx-faq__innen {
  max-inline-size: none;
}

.bx-faq__offen {
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--farbe-linie);
  list-style: none;
}

.bx-faq__offen-eintrag {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--abstand-32);
  align-items: start;
  padding-block: var(--abstand-26);
  border-block-end: 1px solid var(--farbe-linie);
}

.bx-faq__nummer {
  padding-block-start: var(--abstand-4);
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-textlink-zeile);
}

.bx-faq__offen-frage {
  margin: 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-app-schritt-titel-gewicht);
  font-size: var(--schrift-app-schritt-titel-groesse);
  line-height: var(--schrift-app-schritt-titel-zeile);
  letter-spacing: var(--schrift-app-schritt-titel-laufweite);
  text-wrap: pretty;
}

.bx-faq__offen-antwort .bx-faq__absatz {
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-lead-zeile);
}

@media (width < 1080px) {
  .bx-faq--verweise .bx-faq__innen,
  .bx-faq--verweise-rechts .bx-faq__innen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .bx-faq--verweise-rechts .bx-faq__kopf,
  .bx-faq--verweise-rechts .bx-faq__liste,
  .bx-faq--verweise-rechts .bx-faq__offen,
  .bx-faq--verweise-rechts .bx-faq__innen > .bx-faq__verweise {
    grid-area: auto;
  }

  .bx-faq--verweise-rechts .bx-faq__innen > .bx-faq__verweise {
    padding-block-start: 0;
  }

  .bx-faq__offen-eintrag {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--abstand-12) var(--abstand-20);
  }

  .bx-faq__offen-antwort {
    grid-column: 2;
  }
}

@media (width < 768px) {
  .bx-faq--verweise,
  .bx-faq--verweise-rechts {
    padding-block: var(--abstand-block-gross);
  }
}

/*
 * == Ph11 V-9 Teil 1: `logos` unter einer Antwort von `offen` (N11-11; Design `Loesung C-Level v3` Frage 6 Z. 339–342) ==
 * Einfarbige Logos in einer Zeile, auf heller Fläche invertiert und gedämpft wie im Design; ohne Link.
 */
.bx-faq__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-16) var(--abstand-28);
  margin: var(--abstand-18) 0 0;
  padding: 0;
  list-style: none;
}

.bx-faq__logo img {
  display: block;
  inline-size: auto;
  block-size: 26px;
  opacity: 0.55;
  filter: invert(1);
}

/*
 * Ph12 D (V-D-integrationen-8 und -9, mobil-12; Design „Integration *“ `faqCols`): FAQ der Integrationsseiten, Kopf links
 * (.78fr), Liste rechts (1.4fr), Abstand 56 px, Polster 84/88 px. Der Satz im Kopf steht ohne Höchstbreite, der
 * Handbuch-Link darunter in einer eigenen Zeile (`display: table` hält die Breite auf den Inhalt).
 */
.bx-faq--zwei-integration {
  padding: var(--abstand-84) var(--seitenrand) var(--abstand-sektion-gross);
}

.bx-faq--zwei-integration .bx-faq__innen {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr);
  gap: var(--abstand-28) var(--abstand-56);
  max-inline-size: none;
}

.bx-faq--zwei-integration .bx-faq__kopftext {
  max-inline-size: none;
  margin-block-start: var(--abstand-14);
  color: var(--farbe-mikrotext);
}

.bx-faq--zwei-integration .bx-faq__kopftext .bx-textlink {
  display: table;
  margin-block-start: var(--abstand-18);
  font-size: var(--schrift-textlink-groesse);
  line-height: normal;
}

@media (width < 1080px) {
  .bx-faq--zwei-integration .bx-faq__innen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-faq--zwei-integration {
    padding-block: var(--abstand-block-gross);
  }
}

/* Abgleich 27.10. (BW-86; „Vergleich Uebersicht“ faqSp): Kopf links (.8fr), Liste rechts (1.2fr), Abstand 56 px,
   Polster nur unten */
.bx-faq--zwei-vergleich {
  padding: 0 var(--seitenrand) var(--abstand-sektion-gross);
}

.bx-faq--zwei-vergleich .bx-faq__innen {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--abstand-28) var(--abstand-56);
  max-inline-size: none;
}

@media (width < 1080px) {
  .bx-faq--zwei-vergleich .bx-faq__innen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Ph12 Design-Abgleich (Fix E2; E-loesungen -6, -115): Oberlinie über der ersten Frage (Design: border-top 1px #E2E6EE),
 * als Pseudo-Element, damit sie die Höhenreserve der Liste nicht verändert; bei Karten rechts streckt die Kopfzeile
 * nicht mehr mit der Querlinks-Spalte.
 */
.bx-faq--verweise .bx-faq__liste,
.bx-faq--verweise-rechts .bx-faq__liste {
  position: relative;
}

.bx-faq--verweise .bx-faq__liste::before,
.bx-faq--verweise-rechts .bx-faq__liste::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 1px;
  background-color: var(--farbe-linie);
}

.bx-faq--verweise-rechts .bx-faq__innen {
  grid-template-rows: auto 1fr;
}

.bx-faq--verweise-rechts .bx-faq__liste,
.bx-faq--verweise-rechts .bx-faq__offen {
  align-self: start;
}

/*
 * Akkordeon (Teilplan B4 E7): Zustandswirkung. Die Antwort folgt direkt auf ihre Überschrift; der Zustand steht in
 * aria-expanded der Frage. Geschlossen ist die Antwort ohne Höhe, durchsichtig und unsichtbar, aber nie
 * display: none (Suchmaschinen und Screenreader lesen sie; Messung der Höhe). Offen darf sie bis zur gemessenen
 * längsten Antwort wachsen (--bx-akkordeon-max, von akkordeon.js); ohne Messung gilt keine Grenze. Die Wurzel
 * reserviert die Höhe der Überschriften plus der längsten Antwort (--bx-akkordeon-reserve). Überschriften und
 * Antworten tragen keine senkrechten Außenabstände, die die Messung nicht kennt (sie liest sie trotzdem mit).
 */
[data-bx-modul~="akkordeon"] {
  min-block-size: var(--bx-akkordeon-reserve, auto);
}

[data-bx-akkordeon-antwort] {
  max-block-size: 0;
  opacity: 0;
  visibility: hidden;
  overflow: clip;
  transition:
    max-block-size var(--bewegung-faq-dauer) var(--bewegung-kurve),
    opacity var(--bewegung-faq-deckkraft) var(--bewegung-kurve),
    visibility 0s linear var(--bewegung-faq-dauer);
}

:has(> [data-bx-akkordeon-frage][aria-expanded="true"]) + [data-bx-akkordeon-antwort] {
  max-block-size: var(--bx-akkordeon-max, none);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Ohne JavaScript stehen alle Antworten sichtbar untereinander (N2-8); bei aktivem JavaScript greift die Regel nie */
@media (scripting: none) {
  [data-bx-akkordeon-antwort] {
    max-block-size: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }
}

/*
 * Baustein „abschluss-cta“ (Teilplan D3 §5.10): Standort (Karte mit Pin, Adresse), Navy mit Terminkarte, helles Band und
 * Kachel-Band. Die Pinlage läuft über die Wertetabellen am Ende (E1, CSP; Prozent, keine px). Der Puls nur ohne
 * reduzierte Bewegung (Keyframes mit `from`, N3-21).
 */
.bx-abschluss-cta {
  font-family: var(--schrift-familie-text);
}

.bx-abschluss-cta__innen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--abstand-56);
  align-items: center;
  max-width: var(--breite-inhalt-mittel-max);
  margin-inline: auto;
}

.bx-abschluss-cta__text {
  min-inline-size: 0;
}

.bx-abschluss-cta__titel {
  margin: 0 0 var(--abstand-14);
  color: var(--farbe-navy);
  font-weight: var(--schrift-h2-gewicht);
  font-size: var(--schrift-h2-groesse);
  line-height: var(--schrift-h2-zeile);
  letter-spacing: var(--schrift-h2-laufweite);
  text-wrap: balance;
}

.bx-abschluss-cta__satz {
  margin: 0 0 var(--abstand-28);
  max-width: 560px;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
}

.bx-abschluss-cta__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-12);
}

.bx-abschluss-cta__zusatz {
  margin: var(--abstand-26) 0 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-trust-text-gewicht);
  font-size: var(--schrift-trust-text-groesse);
  line-height: var(--schrift-trust-text-zeile);
  letter-spacing: var(--schrift-trust-text-laufweite);
}

/* == standort == */
.bx-abschluss-cta--standort {
  padding: var(--abstand-100) var(--seitenrand) 110px; /* Design */
}

.bx-abschluss-cta--standort .bx-abschluss-cta__innen {
  max-width: none; /* volle Breite zwischen den Seitenrändern wie im Layout des Entwurfs, keine Höchstbreite */
}

.bx-abschluss-cta--standort .bx-abschluss-cta__titel {
  max-width: 24ch;
  font-weight: var(--schrift-aussage-gross-gewicht); /* Chronik v3 Z. 302: 34 px, 1,15, −1,3 px */
  font-size: var(--schrift-aussage-gross-groesse);
  line-height: var(--schrift-aussage-gross-zeile);
  letter-spacing: var(--schrift-aussage-gross-laufweite);
}

.bx-abschluss-cta__ort {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
}

.bx-abschluss-cta__karte {
  position: relative;
  overflow: hidden;
  min-block-size: 280px;
  background-color: var(--farbe-flaeche-karte);
}

.bx-abschluss-cta__kartenbild,
.bx-abschluss-cta__kartenbild img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.bx-abschluss-cta__pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
  box-shadow: var(--schatten-karte-pin);
  translate: -50% -50%;
}

.bx-abschluss-cta__puls {
  position: absolute;
  inset: 0;
  border: 2px solid var(--farbe-orange-flaeche);
  border-radius: var(--radius-rund);
  opacity: 0;
}

/* Chronik v3 Z. 305: "Gespräch vereinbaren" im Standort-Abschluss kleiner (14,5 px, 14/26 px) */
.bx-abschluss-cta--standort .bx-button {
  padding: var(--abstand-14) var(--abstand-26);
  font-size: var(--schrift-button-kompakt-groesse);
}

.bx-abschluss-cta__etikett {
  position: absolute;
  padding: var(--abstand-8) var(--abstand-12);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy);
  box-shadow: var(--schatten-karte-etikett);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-pille-gross-gewicht);
  font-size: var(--schrift-pille-gross-groesse);
  line-height: var(--schrift-pille-gross-zeile);
  letter-spacing: var(--schrift-pille-gross-laufweite);
  white-space: nowrap;
  translate: var(--abstand-14) -50%;
}

.bx-abschluss-cta__etikett--links {
  translate: calc(-100% - var(--abstand-14)) -50%;
}

.bx-abschluss-cta__koordinaten {
  position: absolute;
  inset: var(--abstand-16) auto auto var(--abstand-16);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-standort-koordinaten-gewicht);
  font-size: var(--schrift-standort-koordinaten-groesse);
  line-height: var(--schrift-standort-koordinaten-zeile);
  letter-spacing: var(--schrift-standort-koordinaten-laufweite);
}

.bx-abschluss-cta__adresse {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Adresse senkrecht mittig neben der Karte (Chronik v3 Z. 313) */
  min-inline-size: 0;
  padding: var(--abstand-26) var(--abstand-26) var(--abstand-28);
  font-style: normal;
}

.bx-abschluss-cta__firma {
  margin-block-end: var(--abstand-6);
  color: var(--farbe-navy);
  font-weight: var(--schrift-person-name-gewicht);
  font-size: var(--schrift-person-name-groesse);
  line-height: var(--schrift-person-name-zeile);
  letter-spacing: var(--schrift-person-name-laufweite);
}

.bx-abschluss-cta__adresse > span:not(.bx-abschluss-cta__firma) {
  display: block;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-fuss-text-gewicht);
  font-size: var(--schrift-fuss-text-groesse);
  line-height: var(--schrift-fuss-text-zeile);
  letter-spacing: var(--schrift-fuss-text-laufweite);
}

.bx-abschluss-cta__route {
  align-self: flex-start;
  margin-block-start: var(--abstand-18);
  border-bottom: 1.5px solid var(--farbe-orange-flaeche);
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
}

.bx-abschluss-cta__route:hover {
  color: var(--farbe-orange-text);
}

/* == navy-termin == */
.bx-abschluss-cta--navy-termin {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-104) clamp(var(--abstand-20), 4.5vw, var(--abstand-64));
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-abschluss-cta--navy-termin::before {
  content: '';
  position: absolute;
  top: -300px; /* Design */
  right: -200px; /* Design */
  width: 800px;
  height: 700px;
  background: radial-gradient(closest-side, var(--farbe-glow-orange-cta), var(--farbe-glow-orange-aus));
  pointer-events: none;
}

.bx-abschluss-cta--navy-termin::after {
  content: '';
  position: absolute;
  bottom: -320px; /* Design */
  left: -240px; /* Design */
  width: 760px;
  height: 680px;
  background: radial-gradient(closest-side, var(--farbe-navy-glas), transparent);
  pointer-events: none;
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__innen {
  position: relative;
  z-index: 1;
  --bx-cta-spaltenabstand-anteil: 6; /* Prozent der Breite, Obergrenze --abstand-96; 2K-Regel unten rechnet mit demselben Wert */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--abstand-40), calc(var(--bx-cta-spaltenabstand-anteil) * 1vw), var(--abstand-96));
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__eyebrow {
  margin: 0 0 var(--abstand-18);
  color: var(--farbe-gedaempft-navy);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
  text-transform: uppercase;
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__titel {
  margin-block-end: var(--abstand-20);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-cta-titel-gross-gewicht);
  font-size: var(--schrift-cta-titel-gross-groesse);
  line-height: var(--schrift-cta-titel-gross-zeile);
  letter-spacing: var(--schrift-cta-titel-gross-laufweite);
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__betont {
  color: var(--farbe-orange-navy-hell);
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__satz {
  max-width: 520px;
  margin-block-end: var(--abstand-36);
  color: var(--farbe-navy-text-lead);
  font-weight: var(--schrift-lead-gewicht);
  font-size: var(--schrift-lead-groesse);
  line-height: var(--schrift-lead-zeile);
  letter-spacing: var(--schrift-lead-laufweite);
}

.bx-abschluss-cta--navy-termin .bx-button--primaer {
  box-shadow: var(--schatten-cta);
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__zusatz {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__zusatz .bx-textlink {
  color: var(--farbe-weiss);
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__zusatz .bx-textlink:hover {
  color: var(--farbe-gedaempft-navy);
}

.bx-abschluss-cta__terminkarte {
  padding: var(--abstand-28) var(--abstand-30) var(--abstand-12);
  border: 1px solid var(--farbe-navy-linie);
  border-radius: var(--radius-karte-gross);
  background-color: var(--farbe-navy-glas);
}

.bx-abschluss-cta__terminkopf {
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
  text-transform: uppercase;
}

.bx-abschluss-cta__schritte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-abschluss-cta__schritte > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--abstand-14);
  padding: var(--abstand-18) 0;
  border-top: 1px solid var(--farbe-navy-linie);
}

.bx-abschluss-cta__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--farbe-navy-link-linie);
  border-radius: var(--radius-rund);
  font-weight: var(--schrift-termin-nummer-gewicht);
  font-size: var(--schrift-termin-nummer-groesse);
  line-height: var(--schrift-termin-nummer-zeile);
  letter-spacing: var(--schrift-termin-nummer-laufweite);
}

.bx-abschluss-cta__schritttitel {
  display: block;
  margin-block-end: var(--abstand-4);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-termin-schritt-titel-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
  letter-spacing: var(--schrift-termin-schritt-titel-laufweite);
}

.bx-abschluss-cta__schritttext {
  display: block;
  color: var(--farbe-navy-text-lead);
  font-weight: var(--schrift-termin-schritt-text-gewicht);
  font-size: var(--schrift-termin-schritt-text-groesse);
  line-height: var(--schrift-termin-schritt-text-zeile);
  letter-spacing: var(--schrift-termin-schritt-text-laufweite);
}

/* == band-hell, band-kachel == */
.bx-abschluss-cta--band-hell,
.bx-abschluss-cta--band-kachel {
  padding: var(--abstand-52) var(--seitenrand);
}

.bx-abschluss-cta--band-hell {
  border-top: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-flaeche-hell);
}

.bx-abschluss-cta--band-kachel {
  padding-block: var(--abstand-sektion);
  background-color: var(--farbe-flaeche-kachel);
}

.bx-abschluss-cta--band-hell .bx-abschluss-cta__innen,
.bx-abschluss-cta--band-kachel .bx-abschluss-cta__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-24) var(--abstand-40);
}

.bx-abschluss-cta--band-hell .bx-abschluss-cta__innen {
  max-width: none; /* Ä7-9: volle Breite zwischen den Seitenrändern wie im Design, keine Höchstbreite (N4-77 überholt) */
}

.bx-abschluss-cta--band-kachel .bx-abschluss-cta__innen {
  gap: var(--abstand-24) var(--abstand-48);
}

.bx-abschluss-cta--band-hell .bx-abschluss-cta__text,
.bx-abschluss-cta--band-kachel .bx-abschluss-cta__text {
  flex: 1 1 420px;
}

.bx-abschluss-cta--band-hell .bx-abschluss-cta__titel {
  margin-block-end: var(--abstand-8);
  font-weight: var(--schrift-h3-gross-gewicht);
  font-size: var(--schrift-h3-gross-groesse);
  line-height: var(--schrift-h3-gross-zeile);
  letter-spacing: var(--schrift-h3-gross-laufweite);
}

.bx-abschluss-cta--band-kachel .bx-abschluss-cta__titel {
  margin-block-end: var(--abstand-10);
}

.bx-abschluss-cta--band-hell .bx-abschluss-cta__satz,
.bx-abschluss-cta--band-kachel .bx-abschluss-cta__satz {
  max-width: 640px;
  margin-block-end: 0;
  font-weight: var(--schrift-faq-antwort-gewicht);
  font-size: var(--schrift-faq-antwort-groesse);
  line-height: var(--schrift-faq-antwort-zeile);
  letter-spacing: var(--schrift-faq-antwort-laufweite);
}

.bx-abschluss-cta--band-kachel .bx-abschluss-cta__satz {
  max-width: 620px;
}

.bx-abschluss-cta--band-kachel .bx-abschluss-cta__zusatz {
  margin-block-start: var(--abstand-16);
}

.bx-abschluss-cta--band-kachel .bx-abschluss-cta__zusatz .bx-textlink {
  border-bottom-color: var(--farbe-linie-stark);
}

.bx-abschluss-cta--band-kachel .bx-abschluss-cta__zusatz .bx-textlink:hover {
  border-bottom-color: var(--farbe-orange-flaeche);
  color: var(--farbe-orange-text);
}

.bx-abschluss-cta--band-hell .bx-abschluss-cta__aktionen,
.bx-abschluss-cta--band-kachel .bx-abschluss-cta__aktionen {
  flex: none;
}

/*
 * Ph12 Design-Abgleich (V-C-crm-7, V-D-integrationen-2, V-B-app-24): Text links, Aktionen als rechte Spalte, mittig auf einer
 * Zeile (Integration Brevo „09 Abschluss“ gap 24px 40px; CRM Sales „Abschluss“ gap 48px; Preise APP Z. 341 gap 40px). Muster
 * `band-navy`. Satz ohne Höchstbreite bei `band-hell` (Brevo Z. 430). Unter 768px eine Spalte mit 20 px Abstand, der
 * Zusatz-Link vor den Aktionen (Cashflow mobil), ein einzelner Knopf auf voller Breite (Preise APP mobil).
 */
.bx-abschluss-cta--band-hell .bx-abschluss-cta__satz {
  max-width: none;
}

.bx-abschluss-cta:is(.bx-abschluss-cta--band-hell, .bx-abschluss-cta--band-kachel):not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.bx-abschluss-cta:is(.bx-abschluss-cta--band-hell, .bx-abschluss-cta--band-kachel):not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__text > * {
  grid-column: 1;
}

.bx-abschluss-cta:is(.bx-abschluss-cta--band-hell, .bx-abschluss-cta--band-kachel):not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__text > .bx-abschluss-cta__aktionen {
  order: 1;
  margin-block-start: var(--abstand-20);
}

.bx-abschluss-cta:is(.bx-abschluss-cta--band-hell, .bx-abschluss-cta--band-kachel):not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__aktionen > :only-child {
  flex: 1 1 100%;
  justify-content: center;
  text-align: center;
}

@media (width >= 768px) {
  .bx-abschluss-cta--band-hell:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__text {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--abstand-40);
  }

  .bx-abschluss-cta--band-kachel:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__text {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--abstand-48);
  }

  .bx-abschluss-cta:is(.bx-abschluss-cta--band-hell, .bx-abschluss-cta--band-kachel):not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__text > .bx-abschluss-cta__aktionen {
    grid-column: 2;
    grid-row: 1 / span 4;
    order: 0;
    margin-block-start: 0;
  }

  .bx-abschluss-cta:is(.bx-abschluss-cta--band-hell, .bx-abschluss-cta--band-kachel):not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__aktionen > :only-child {
    flex: none;
  }
}

/* CRM-Bereiche mobil (CRM Sales „Abschluss“, data-mobil-stapel): Knöpfe untereinander, volle Breite, Beschriftung zentriert */
@media (width < 768px) {
  .bx-ebene[data-breiten="crm-bereich"] .bx-abschluss-cta--band-kachel .bx-abschluss-cta__aktionen {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .bx-ebene[data-breiten="crm-bereich"] .bx-abschluss-cta--band-kachel .bx-abschluss-cta__aktionen > * {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bx-abschluss-cta-puls {
    from {
      opacity: .75;
      scale: 1;
    }
  }

  .bx-abschluss-cta__puls {
    animation: bx-abschluss-cta-puls 2.6s var(--bewegung-kurve-heraus) infinite;
    scale: 3.6;
  }
}

@media (width < 1080px) {
  .bx-abschluss-cta--navy-termin .bx-abschluss-cta__innen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-abschluss-cta__terminkarte {
    padding-inline: var(--abstand-20);
  }

  .bx-abschluss-cta--standort {
    padding-block: var(--abstand-sektion-kapitel);
  }

  .bx-abschluss-cta--standort .bx-abschluss-cta__innen {
    gap: var(--abstand-24);
  }

  .bx-abschluss-cta__ort {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-abschluss-cta__adresse {
    padding-inline: var(--abstand-20);
  }

  .bx-abschluss-cta--standort .bx-button {
    padding-inline: var(--abstand-20); /* Chronik v3 Mobil Z. 307 */
  }
}

/* Wertetabelle (E1, CSP): Pin und Etikett waagrecht, 0 bis 100 % */
[data-bx-x="0"] {
  left: 0%;
}

[data-bx-x="1"] {
  left: 1%;
}

[data-bx-x="2"] {
  left: 2%;
}

[data-bx-x="3"] {
  left: 3%;
}

[data-bx-x="4"] {
  left: 4%;
}

[data-bx-x="5"] {
  left: 5%;
}

[data-bx-x="6"] {
  left: 6%;
}

[data-bx-x="7"] {
  left: 7%;
}

[data-bx-x="8"] {
  left: 8%;
}

[data-bx-x="9"] {
  left: 9%;
}

[data-bx-x="10"] {
  left: 10%;
}

[data-bx-x="11"] {
  left: 11%;
}

[data-bx-x="12"] {
  left: 12%;
}

[data-bx-x="13"] {
  left: 13%;
}

[data-bx-x="14"] {
  left: 14%;
}

[data-bx-x="15"] {
  left: 15%;
}

[data-bx-x="16"] {
  left: 16%;
}

[data-bx-x="17"] {
  left: 17%;
}

[data-bx-x="18"] {
  left: 18%;
}

[data-bx-x="19"] {
  left: 19%;
}

[data-bx-x="20"] {
  left: 20%;
}

[data-bx-x="21"] {
  left: 21%;
}

[data-bx-x="22"] {
  left: 22%;
}

[data-bx-x="23"] {
  left: 23%;
}

[data-bx-x="24"] {
  left: 24%;
}

[data-bx-x="25"] {
  left: 25%;
}

[data-bx-x="26"] {
  left: 26%;
}

[data-bx-x="27"] {
  left: 27%;
}

[data-bx-x="28"] {
  left: 28%;
}

[data-bx-x="29"] {
  left: 29%;
}

[data-bx-x="30"] {
  left: 30%;
}

[data-bx-x="31"] {
  left: 31%;
}

[data-bx-x="32"] {
  left: 32%;
}

[data-bx-x="33"] {
  left: 33%;
}

[data-bx-x="34"] {
  left: 34%;
}

[data-bx-x="35"] {
  left: 35%;
}

[data-bx-x="36"] {
  left: 36%;
}

[data-bx-x="37"] {
  left: 37%;
}

[data-bx-x="38"] {
  left: 38%;
}

[data-bx-x="39"] {
  left: 39%;
}

[data-bx-x="40"] {
  left: 40%;
}

[data-bx-x="41"] {
  left: 41%;
}

[data-bx-x="42"] {
  left: 42%;
}

[data-bx-x="43"] {
  left: 43%;
}

[data-bx-x="44"] {
  left: 44%;
}

[data-bx-x="45"] {
  left: 45%;
}

[data-bx-x="46"] {
  left: 46%;
}

[data-bx-x="47"] {
  left: 47%;
}

[data-bx-x="48"] {
  left: 48%;
}

[data-bx-x="49"] {
  left: 49%;
}

[data-bx-x="50"] {
  left: 50%;
}

[data-bx-x="51"] {
  left: 51%;
}

[data-bx-x="52"] {
  left: 52%;
}

[data-bx-x="53"] {
  left: 53%;
}

[data-bx-x="54"] {
  left: 54%;
}

[data-bx-x="55"] {
  left: 55%;
}

[data-bx-x="56"] {
  left: 56%;
}

[data-bx-x="57"] {
  left: 57%;
}

[data-bx-x="58"] {
  left: 58%;
}

[data-bx-x="59"] {
  left: 59%;
}

[data-bx-x="60"] {
  left: 60%;
}

[data-bx-x="61"] {
  left: 61%;
}

[data-bx-x="62"] {
  left: 62%;
}

[data-bx-x="63"] {
  left: 63%;
}

[data-bx-x="64"] {
  left: 64%;
}

[data-bx-x="65"] {
  left: 65%;
}

[data-bx-x="66"] {
  left: 66%;
}

[data-bx-x="67"] {
  left: 67%;
}

[data-bx-x="68"] {
  left: 68%;
}

[data-bx-x="69"] {
  left: 69%;
}

[data-bx-x="70"] {
  left: 70%;
}

[data-bx-x="71"] {
  left: 71%;
}

[data-bx-x="72"] {
  left: 72%;
}

[data-bx-x="73"] {
  left: 73%;
}

[data-bx-x="74"] {
  left: 74%;
}

[data-bx-x="75"] {
  left: 75%;
}

[data-bx-x="76"] {
  left: 76%;
}

[data-bx-x="77"] {
  left: 77%;
}

[data-bx-x="78"] {
  left: 78%;
}

[data-bx-x="79"] {
  left: 79%;
}

[data-bx-x="80"] {
  left: 80%;
}

[data-bx-x="81"] {
  left: 81%;
}

[data-bx-x="82"] {
  left: 82%;
}

[data-bx-x="83"] {
  left: 83%;
}

[data-bx-x="84"] {
  left: 84%;
}

[data-bx-x="85"] {
  left: 85%;
}

[data-bx-x="86"] {
  left: 86%;
}

[data-bx-x="87"] {
  left: 87%;
}

[data-bx-x="88"] {
  left: 88%;
}

[data-bx-x="89"] {
  left: 89%;
}

[data-bx-x="90"] {
  left: 90%;
}

[data-bx-x="91"] {
  left: 91%;
}

[data-bx-x="92"] {
  left: 92%;
}

[data-bx-x="93"] {
  left: 93%;
}

[data-bx-x="94"] {
  left: 94%;
}

[data-bx-x="95"] {
  left: 95%;
}

[data-bx-x="96"] {
  left: 96%;
}

[data-bx-x="97"] {
  left: 97%;
}

[data-bx-x="98"] {
  left: 98%;
}

[data-bx-x="99"] {
  left: 99%;
}

[data-bx-x="100"] {
  left: 100%;
}

/* Wertetabelle (E1, CSP): Pin und Etikett senkrecht, 0 bis 100 % */
[data-bx-y="0"] {
  top: 0%;
}

[data-bx-y="1"] {
  top: 1%;
}

[data-bx-y="2"] {
  top: 2%;
}

[data-bx-y="3"] {
  top: 3%;
}

[data-bx-y="4"] {
  top: 4%;
}

[data-bx-y="5"] {
  top: 5%;
}

[data-bx-y="6"] {
  top: 6%;
}

[data-bx-y="7"] {
  top: 7%;
}

[data-bx-y="8"] {
  top: 8%;
}

[data-bx-y="9"] {
  top: 9%;
}

[data-bx-y="10"] {
  top: 10%;
}

[data-bx-y="11"] {
  top: 11%;
}

[data-bx-y="12"] {
  top: 12%;
}

[data-bx-y="13"] {
  top: 13%;
}

[data-bx-y="14"] {
  top: 14%;
}

[data-bx-y="15"] {
  top: 15%;
}

[data-bx-y="16"] {
  top: 16%;
}

[data-bx-y="17"] {
  top: 17%;
}

[data-bx-y="18"] {
  top: 18%;
}

[data-bx-y="19"] {
  top: 19%;
}

[data-bx-y="20"] {
  top: 20%;
}

[data-bx-y="21"] {
  top: 21%;
}

[data-bx-y="22"] {
  top: 22%;
}

[data-bx-y="23"] {
  top: 23%;
}

[data-bx-y="24"] {
  top: 24%;
}

[data-bx-y="25"] {
  top: 25%;
}

[data-bx-y="26"] {
  top: 26%;
}

[data-bx-y="27"] {
  top: 27%;
}

[data-bx-y="28"] {
  top: 28%;
}

[data-bx-y="29"] {
  top: 29%;
}

[data-bx-y="30"] {
  top: 30%;
}

[data-bx-y="31"] {
  top: 31%;
}

[data-bx-y="32"] {
  top: 32%;
}

[data-bx-y="33"] {
  top: 33%;
}

[data-bx-y="34"] {
  top: 34%;
}

[data-bx-y="35"] {
  top: 35%;
}

[data-bx-y="36"] {
  top: 36%;
}

[data-bx-y="37"] {
  top: 37%;
}

[data-bx-y="38"] {
  top: 38%;
}

[data-bx-y="39"] {
  top: 39%;
}

[data-bx-y="40"] {
  top: 40%;
}

[data-bx-y="41"] {
  top: 41%;
}

[data-bx-y="42"] {
  top: 42%;
}

[data-bx-y="43"] {
  top: 43%;
}

[data-bx-y="44"] {
  top: 44%;
}

[data-bx-y="45"] {
  top: 45%;
}

[data-bx-y="46"] {
  top: 46%;
}

[data-bx-y="47"] {
  top: 47%;
}

[data-bx-y="48"] {
  top: 48%;
}

[data-bx-y="49"] {
  top: 49%;
}

[data-bx-y="50"] {
  top: 50%;
}

[data-bx-y="51"] {
  top: 51%;
}

[data-bx-y="52"] {
  top: 52%;
}

[data-bx-y="53"] {
  top: 53%;
}

[data-bx-y="54"] {
  top: 54%;
}

[data-bx-y="55"] {
  top: 55%;
}

[data-bx-y="56"] {
  top: 56%;
}

[data-bx-y="57"] {
  top: 57%;
}

[data-bx-y="58"] {
  top: 58%;
}

[data-bx-y="59"] {
  top: 59%;
}

[data-bx-y="60"] {
  top: 60%;
}

[data-bx-y="61"] {
  top: 61%;
}

[data-bx-y="62"] {
  top: 62%;
}

[data-bx-y="63"] {
  top: 63%;
}

[data-bx-y="64"] {
  top: 64%;
}

[data-bx-y="65"] {
  top: 65%;
}

[data-bx-y="66"] {
  top: 66%;
}

[data-bx-y="67"] {
  top: 67%;
}

[data-bx-y="68"] {
  top: 68%;
}

[data-bx-y="69"] {
  top: 69%;
}

[data-bx-y="70"] {
  top: 70%;
}

[data-bx-y="71"] {
  top: 71%;
}

[data-bx-y="72"] {
  top: 72%;
}

[data-bx-y="73"] {
  top: 73%;
}

[data-bx-y="74"] {
  top: 74%;
}

[data-bx-y="75"] {
  top: 75%;
}

[data-bx-y="76"] {
  top: 76%;
}

[data-bx-y="77"] {
  top: 77%;
}

[data-bx-y="78"] {
  top: 78%;
}

[data-bx-y="79"] {
  top: 79%;
}

[data-bx-y="80"] {
  top: 80%;
}

[data-bx-y="81"] {
  top: 81%;
}

[data-bx-y="82"] {
  top: 82%;
}

[data-bx-y="83"] {
  top: 83%;
}

[data-bx-y="84"] {
  top: 84%;
}

[data-bx-y="85"] {
  top: 85%;
}

[data-bx-y="86"] {
  top: 86%;
}

[data-bx-y="87"] {
  top: 87%;
}

[data-bx-y="88"] {
  top: 88%;
}

[data-bx-y="89"] {
  top: 89%;
}

[data-bx-y="90"] {
  top: 90%;
}

[data-bx-y="91"] {
  top: 91%;
}

[data-bx-y="92"] {
  top: 92%;
}

[data-bx-y="93"] {
  top: 93%;
}

[data-bx-y="94"] {
  top: 94%;
}

[data-bx-y="95"] {
  top: 95%;
}

[data-bx-y="96"] {
  top: 96%;
}

[data-bx-y="97"] {
  top: 97%;
}

[data-bx-y="98"] {
  top: 98%;
}

[data-bx-y="99"] {
  top: 99%;
}

[data-bx-y="100"] {
  top: 100%;
}

/* == Ph8 H0c: ergebnisabhängiger Kopf (Ä8-6, Teilplan H0c E-T11) – Eyebrow und Titel als Höhenstapel == */
.bx-abschluss-cta__eyebrow[data-bx-modul~="hoehe"],
.bx-abschluss-cta__titel[data-bx-modul~="hoehe"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/*
 * == Ph8 H2c: `unten` (Ä8-6, H8-14/H2c R-3; Design CRM Produktseite v2 „Abschluss“) ==
 * Trustzeile unter dem Kasten von `navy-termin`: eine Linie oben, darunter die verschachtelte Zeile `trust-pillen
 * navy-zeile` bündig mit dem Text, ohne eigene Linie und eigenes Polster (P-H2C-11). Dazu die Aktionsart `textlink`
 * (P-H2C-12). Steht vor dem H0c-Block, damit dieser am Ende der Phasen-Blöcke bleibt (BausteinCssTest).
 */
.bx-abschluss-cta__unten {
  position: relative;
  z-index: 1;
  margin-block-start: var(--abstand-32);
  padding-block-start: var(--abstand-26);
  border-block-start: 1px solid var(--farbe-navy-linie);
}

.bx-abschluss-cta__unten > .bx-trust-pillen--navy-zeile {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.bx-abschluss-cta__unten .bx-trust-pillen__liste {
  gap: var(--abstand-10) var(--abstand-36);
}

.bx-abschluss-cta__unten .bx-trust-pillen__eintrag {
  color: var(--farbe-navy-text-sekundaer);
}

/* Gesellschaft hinter dem Siegel in derselben Zeile in Klammern wie im Design („ISO 9001 (brainX GmbH)“; NP-H2C-3 b) */
.bx-abschluss-cta__unten .bx-trust-pillen__siegel {
  display: inline;
}

.bx-abschluss-cta__unten .bx-trust-pillen__siegel .bx-trust-pillen__link {
  display: inline;
}

.bx-abschluss-cta__unten .bx-trust-pillen__gesellschaft {
  display: inline;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.bx-abschluss-cta__unten .bx-trust-pillen__gesellschaft::before {
  content: ' (';
}

.bx-abschluss-cta__unten .bx-trust-pillen__gesellschaft::after {
  content: ')';
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__textlink {
  border-bottom-width: 1px;
  border-bottom-color: var(--farbe-navy-link-linie);
  color: var(--farbe-weiss);
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__textlink:hover,
[data-sg-zustand="hover"] .bx-abschluss-cta--navy-termin .bx-abschluss-cta__textlink {
  border-bottom-color: var(--farbe-mint);
  color: var(--farbe-mint);
}

.bx-abschluss-cta--navy-termin .bx-abschluss-cta__aktionen:has(> .bx-abschluss-cta__textlink) {
  align-items: center;
  gap: var(--abstand-20);
}

@media (width < 768px) {
  .bx-abschluss-cta__unten .bx-trust-pillen__liste {
    gap: var(--abstand-10) var(--abstand-20);
  }
}

/*
 * == Ph8 H0c: `navy-termin` ohne Terminkarte als breites Band (P-H0C-A2-1, H8-38; Design AC „Abschluss“, OB) ==
 * Text links bis 700 px, Aktion rechts unten, H2 der Seite statt `cta-titel-gross`. Jede Regel gilt nur ohne
 * Terminkarte; der Bestand mit `schritte` oben bleibt unverändert.
 */
.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) {
  padding: var(--abstand-sektion) var(--seitenrand);
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte))::before {
  top: -160px; /* Design */
  right: calc(-1 * var(--abstand-100));
  width: 620px;
  height: 540px;
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte))::after {
  content: none;
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__innen {
  grid-template-columns: minmax(0, 1fr);
  max-width: none; /* volle Breite zwischen den Seitenrändern wie im Design, Aktion am rechten Rand */
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__text {
  display: grid;
  grid-template-columns: minmax(0, 700px) auto;
  justify-content: space-between;
  column-gap: var(--abstand-56);
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__text > * {
  grid-column: 1;
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__eyebrow {
  margin-block-end: var(--abstand-12);
  color: var(--farbe-mint);
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__titel {
  margin-block-end: var(--abstand-14);
  font-weight: var(--schrift-h2-gewicht);
  font-size: var(--schrift-h2-groesse);
  line-height: var(--schrift-h2-zeile);
  letter-spacing: var(--schrift-h2-laufweite);
  text-wrap: pretty;
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__satz {
  max-width: none;
  margin-block-end: 0;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
}

.bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__text > .bx-abschluss-cta__aktionen {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: end;
  flex-wrap: nowrap;
}

@media (width < 768px) {
  .bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__text {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-abschluss-cta--navy-termin:not(:has(.bx-abschluss-cta__terminkarte)) .bx-abschluss-cta__text > .bx-abschluss-cta__aktionen {
    grid-column: 1;
    grid-row: auto;
    margin-block-start: var(--abstand-24);
    flex-wrap: wrap;
  }
}

/*
 * == Ph8 H1c: `band-navy`, `ausrichtung: mitte` und `stand` (Ä8-6, Teilplan H1c §4.7; Design MU „Schicken Sie uns
 * einen Export“, W3 „Abschluss“) ==
 * Eigener Block am Dateiende, hinter dem H0c-Block; jede Regel trägt den Vorsatz ihrer Variante bzw. ihres Attributs.
 */
.bx-abschluss-cta--band-navy {
  padding: var(--abstand-44) var(--seitenrand);
  background-color: var(--farbe-navy);
}

.bx-abschluss-cta--band-navy .bx-abschluss-cta__innen {
  display: block;
  max-width: none;
}

.bx-abschluss-cta--band-navy .bx-abschluss-cta__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--abstand-40);
  align-items: center;
}

.bx-abschluss-cta--band-navy .bx-abschluss-cta__titel {
  grid-column: 1;
  margin-block-end: var(--abstand-8);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-h3-gross-gewicht);
  font-size: var(--schrift-h3-gross-groesse);
  line-height: var(--schrift-h3-gross-zeile);
  letter-spacing: var(--schrift-h3-gross-laufweite);
}

.bx-abschluss-cta--band-navy .bx-abschluss-cta__satz {
  grid-column: 1;
  max-width: none;
  margin-block-end: 0;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-text-kompakt-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-text-kompakt-zeile);
  letter-spacing: var(--schrift-text-kompakt-laufweite);
}

.bx-abschluss-cta--band-navy .bx-abschluss-cta__text > .bx-abschluss-cta__aktionen {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-wrap: nowrap;
}

.bx-abschluss-cta--band-kachel[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__innen {
  justify-content: center;
  text-align: center;
}

.bx-abschluss-cta--band-kachel[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__titel {
  max-width: 720px;
  margin-inline: auto;
  text-wrap: balance;
}

.bx-abschluss-cta--band-kachel[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__satz {
  max-width: 520px;
  margin-block-end: var(--abstand-32);
  margin-inline: auto;
  text-wrap: pretty;
}

.bx-abschluss-cta--band-kachel[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__aktionen {
  justify-content: center;
}

.bx-abschluss-cta__stand {
  margin: var(--abstand-36) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
  text-align: center;
  text-transform: uppercase;
}

@media (width < 768px) {
  .bx-abschluss-cta--band-navy {
    padding-block: var(--abstand-36);
  }

  .bx-abschluss-cta--band-navy .bx-abschluss-cta__text {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-abschluss-cta--band-navy .bx-abschluss-cta__text > .bx-abschluss-cta__aktionen {
    grid-column: 1;
    grid-row: auto;
    flex-wrap: wrap;
    margin-block-start: var(--abstand-24);
  }
}

/*
 * == Ph8 H2b (P-H2B-16 e, H8-76): `navy-termin` mit `ausrichtung: mitte` (Design Automatisierung v7 „CTA“):
 * eingerückte Navy-Box in der Inhaltsbreite, Titel, Satz und Buttons zentriert untereinander. Nach dem H0c-Block, damit
 * die Regeln des Bands ohne Terminkarte (gleiche Spezifität) hier enden; ohne das Attribut bleibt alles unverändert ==
 */
.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] {
  margin: 0 var(--seitenrand) var(--abstand-96);
  padding: var(--abstand-72);
  border-radius: var(--radius-box-gross); /* A7: 32 px */
  background: linear-gradient(199deg, var(--farbe-navy-glas) 0%, var(--farbe-navy-glas) 36%, transparent 36.1%),
    var(--farbe-navy);
  text-align: center;
}

.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"]::before,
.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"]::after {
  content: none;
}

.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__innen,
.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__text {
  display: block;
}

.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__titel {
  margin-block-end: var(--abstand-16);
  text-wrap: balance;
}

.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__satz {
  margin-block-end: var(--abstand-32);
}

.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__text > .bx-abschluss-cta__aktionen,
.bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] .bx-cta-paar {
  justify-content: center;
}

@media (width < 768px) {
  .bx-abschluss-cta--navy-termin[data-bx-ausrichtung="mitte"] {
    margin-block-end: var(--abstand-56);
    padding: var(--abstand-44) var(--abstand-24);
  }
}

/*
 * == Ph8 H3b: `band-kachel` ohne Höchstbreite (Vertrag Ph8 Ä8-18, O-28; Teilplan H3b E-9): wie `standort` und Ph7
 * `band-hell` (Ä7-9) volle Breite zwischen den Seitenrändern; gilt auch für den Kosten-Nutzen-Abschluss (gewollt) ==
 */
.bx-abschluss-cta--band-kachel .bx-abschluss-cta__innen {
  max-width: none;
}

/* == Ph9 I0a == */
/* Ä9-8 titel_stufe (H9-23/I0a R-11): Abschluss-Titel der Integrationsseiten, mobil über mobil.css;
   band-hell ohne Höchstbreite liefert seit Z2 Ph7 Ä7-9 */
.bx-abschluss-cta__titel.bx-abschluss-cta__titel--gross {
  font-weight: var(--schrift-abschluss-titel-gewicht);
  font-size: var(--schrift-abschluss-titel-groesse);
  line-height: var(--schrift-abschluss-titel-zeile);
  letter-spacing: var(--schrift-abschluss-titel-laufweite);
}

/* Ph9 I2b (Ä9-8; D §5.11 V-12): mailto-Zeile „Vergleich weiterleiten“ unter den Aktionen von `navy-termin` */
.bx-abschluss-cta__weiterleiten {
  margin: var(--abstand-18) 0 0;
  font-size: var(--schrift-menue-link-groesse);
}

.bx-abschluss-cta__weiterleiten a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--farbe-orange-flaeche);
  text-decoration-thickness: 1.5px;
  text-underline-offset: var(--abstand-4);
}

.bx-abschluss-cta__weiterleiten a:hover {
  color: var(--farbe-gedaempft-navy);
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: `navy-termin` ohne Höchstbreite (N4-77; Design Startseite v6 S13). Die zentrierte Box von Ph8 H2b
 * (`ausrichtung: mitte`) behält die Inhaltsbreite ==
 */
.bx-abschluss-cta--navy-termin:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__innen {
  max-width: none;
}

/*
 * == Ph11 V-9: Variante `navy-karte` (§3.4.1; Design `Loesung Leads v3` „CTA“ Z. 536–553, `Loesung Vertrieb v3`,
 * `Loesung SaaS v2` „CTA“) ==
 * Navy-Karte mit Seitenrand und Radius 24, Fläche rechts oben und zwei Glows; `raster`: Text | Aktionsspalte 420px,
 * unter 1080px gestapelt; `mitte` (data-bx-ausrichtung): alles zentriert, H2 groß. Sekundäre Aktion als
 * Umriss-Pille (Mint im Raster, Weiß zentriert; Ph12 Design-Abgleich: Design `Loesung Vertrieb v3`, `Loesung
 * Hochschulen v3`, vorher Textlink). Die linke Deko-Fläche des Entwurfs entfällt (Nahdublette der Navy-Fläche).
 */
.bx-abschluss-cta--navy-karte {
  position: relative;
  overflow: hidden;
  margin: var(--abstand-32) var(--seitenrand) var(--abstand-sektion-gross);
  padding: var(--abstand-72) var(--abstand-64);
  border-radius: var(--radius-box);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-abschluss-cta--navy-karte::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  background-color: var(--farbe-navy-innenfeld);
  clip-path: polygon(10% 0, 100% 0, 100% 92%);
  pointer-events: none;
}

.bx-abschluss-cta--navy-karte::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side, var(--farbe-glow-orange-cta), var(--farbe-glow-orange-aus)) right -160px top -280px / 760px 640px no-repeat,
    radial-gradient(closest-side, var(--farbe-glow-mint-karte), var(--farbe-glow-mint-aus)) left -120px bottom -260px / 720px 600px no-repeat;
  pointer-events: none;
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__innen {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--abstand-40) var(--abstand-48);
  max-width: none;
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__titel {
  margin-block-end: var(--abstand-16);
  color: var(--farbe-weiss);
  text-wrap: pretty;
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__satz {
  max-width: none;
  margin: 0;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-lead-klein-gewicht);
  font-size: var(--schrift-lead-klein-groesse);
  line-height: var(--schrift-lead-klein-zeile);
  letter-spacing: var(--schrift-lead-klein-laufweite);
}

.bx-abschluss-cta__aktionsspalte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-12);
  min-inline-size: 0;
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__aktionen {
  align-items: center;
  justify-content: center;
  gap: var(--abstand-14);
}

.bx-abschluss-cta--navy-karte .bx-button--primaer {
  flex: 1 1 auto;
  box-shadow: var(--schatten-cta);
  text-align: center;
}

/* Sekundäre Aktion: Umriss-Pille in Mint, Hover Rand und Text Weiß ohne Füllung (Design: kein Hintergrund) */
.bx-abschluss-cta--navy-karte .bx-button--sekundaer-navy {
  padding-inline: var(--abstand-button-pille-x-raster);
  border-color: var(--farbe-mint);
  background-color: transparent;
  color: var(--farbe-mint);
  white-space: nowrap;
}

.bx-abschluss-cta--navy-karte .bx-button--sekundaer-navy:hover,
[data-sg-zustand="hover"] .bx-abschluss-cta--navy-karte .bx-button--sekundaer-navy {
  border-color: var(--farbe-weiss);
  background-color: transparent;
  color: var(--farbe-weiss);
}

/* Buttons der Navy-Karte im Design-Maß; der Umriss zieht seinen Rand vom Polster ab */
.bx-abschluss-cta--navy-karte .bx-abschluss-cta__aktionen .bx-button {
  padding-block: var(--abstand-button-cta-y);
  font-weight: var(--schrift-button-cta-gewicht);
  font-size: var(--schrift-button-cta-groesse);
  line-height: var(--schrift-button-cta-zeile);
  letter-spacing: var(--schrift-button-cta-laufweite);
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__aktionen .bx-button--sekundaer-navy {
  padding-block: calc(var(--abstand-button-cta-y) - var(--linie-button-rand));
}

.bx-abschluss-cta--navy-karte:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__aktionen:has(.bx-button--sekundaer-navy) .bx-button {
  font-weight: var(--schrift-button-cta-raster-gewicht);
  font-size: var(--schrift-button-cta-raster-groesse);
  line-height: var(--schrift-button-cta-raster-zeile);
  letter-spacing: var(--schrift-button-cta-raster-laufweite);
}

@media (width >= 768px) {
  .bx-abschluss-cta--navy-karte:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__aktionen:has(.bx-button--sekundaer-navy) .bx-button--primaer {
    padding-inline: var(--abstand-button-cta-x-raster);
  }

  .bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__aktionen .bx-button--primaer {
    padding-inline: var(--abstand-button-cta-x);
  }
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__zusatz {
  margin: 0;
  padding: var(--abstand-12);
  color: var(--farbe-mint);
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-button-groesse);
  line-height: var(--schrift-button-zeile);
  text-align: center;
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__zusatz .bx-textlink {
  border-bottom-color: transparent;
  color: var(--farbe-mint);
  font-size: var(--schrift-button-groesse);
}

.bx-abschluss-cta--navy-karte .bx-abschluss-cta__zusatz .bx-textlink:hover,
[data-sg-zustand="hover"] .bx-abschluss-cta--navy-karte .bx-abschluss-cta__zusatz .bx-textlink {
  color: var(--farbe-weiss);
}

/* Zentriert (Branchen, Startups) */
.bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] {
  margin-block-start: 0;
  padding: var(--abstand-sektion-gross) var(--abstand-56);
  text-align: center;
}

.bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__innen {
  display: block;
}

.bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__titel {
  max-width: 960px;
  margin: 0 auto var(--abstand-20);
  font-weight: var(--schrift-cta-branche-gewicht);
  font-size: var(--schrift-cta-branche-groesse);
  line-height: var(--schrift-cta-branche-zeile);
  letter-spacing: var(--schrift-cta-branche-laufweite);
  text-wrap: balance;
}

.bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__satz {
  max-width: 620px;
  margin: 0 auto var(--abstand-36);
  font-weight: var(--schrift-lead-gewicht);
  font-size: var(--schrift-lead-groesse);
  line-height: var(--schrift-lead-zeile);
}

.bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-button--primaer {
  flex: none;
}

.bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-button--sekundaer-navy {
  padding-inline: var(--abstand-button-pille-x);
  border-color: var(--farbe-weiss);
  color: var(--farbe-weiss);
}

/* Hover: Rand und Text in Orange; Design #FF3C00, hier mit dem Navy-Hover-Orange (Ph11 V-9, H11-42, Kontrast) */
.bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-button--sekundaer-navy:hover,
[data-sg-zustand="hover"] .bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-button--sekundaer-navy {
  border-color: var(--farbe-orange-navy-hover); /* Ph11 V-9 (H11-42): 5,53:1 auf Navy, 4,73:1 auf dem Innenfeld */
  color: var(--farbe-orange-navy-hover);
}

/* Raster mit zwei Buttons (Design `Loesung Vertrieb v3`, `C-Level v3`, `Finanzen v4`, `Kundenservice v3`,
   `Operations v3`): Text über die ganze Breite, darunter beide Buttons linksbündig in einer Zeile */
.bx-abschluss-cta--navy-karte:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__innen:has(.bx-button--sekundaer-navy) {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--abstand-44);
}

.bx-abschluss-cta--navy-karte:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__aktionen:has(.bx-button--sekundaer-navy) {
  justify-content: flex-start;
}

@media (width >= 768px) {
  .bx-abschluss-cta--navy-karte .bx-abschluss-cta__aktionen:has(.bx-button--sekundaer-navy) .bx-button--primaer {
    flex: none;
  }
}

@media (width < 1080px) {
  .bx-abschluss-cta--navy-karte .bx-abschluss-cta__innen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-abschluss-cta--navy-karte,
  .bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] {
    margin-block-end: var(--abstand-56);
    padding: var(--abstand-44) var(--abstand-24);
  }

  /* Beide Buttons gleich breit nebeneinander oder umgebrochen (Design Mobil: flex 1 1 0, mindestens Inhaltsbreite,
     höchstens 320 px, nur bei einem Paar); der Umriss zieht seinen Rand vom Polster ab, damit er so breit ist wie der gefüllte Button */
  .bx-abschluss-cta--navy-karte .bx-abschluss-cta__aktionen:has(.bx-button--sekundaer-navy) .bx-button {
    flex: 1 1 0;
    box-sizing: border-box;
    min-inline-size: max-content;
    max-inline-size: var(--breite-button-paar-max);
    text-align: center;
  }

  .bx-abschluss-cta--navy-karte .bx-abschluss-cta__aktionen .bx-button--sekundaer-navy {
    padding-inline: calc(var(--abstand-button-x) - var(--linie-button-rand));
  }

  /* Zentriert: Gruppe so breit wie der Inhalt, mittig */
  .bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__aktionen {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
  }
}

/*
 * == Ph12 Design-Abgleich (P-DAA-6): Abschluss der Startseite (`navy-termin` mit Terminkarte und Umriss-Button; Design
 * `Startseite v6`): Primärbutton 16 px 32 px, Umriss 14,5 px 28 px, beide 16 px Schrift, Rand .4. Andere Seiten mit
 * `navy-termin` haben keine Terminkarte neben einem Umriss-Button und bleiben unberührt. Mobil bleibt das waagerechte
 * Polster 20 px aus den Tokens. ==
 */
.bx-abschluss-cta--navy-termin:has(.bx-abschluss-cta__terminkarte):has(.bx-button--sekundaer-navy) .bx-abschluss-cta__aktionen .bx-button {
  padding-block: var(--abstand-button-termin-y);
  font-weight: var(--schrift-button-termin-gewicht);
  font-size: var(--schrift-button-termin-groesse);
  line-height: var(--schrift-button-termin-zeile);
  letter-spacing: var(--schrift-button-termin-laufweite);
}

.bx-abschluss-cta--navy-termin:has(.bx-abschluss-cta__terminkarte):has(.bx-button--sekundaer-navy) .bx-abschluss-cta__aktionen .bx-button--sekundaer-navy {
  padding-block: calc(var(--abstand-button-termin-y) - var(--linie-button-rand));
  border-color: var(--farbe-navy-button-rand-termin);
}

.bx-abschluss-cta--navy-termin:has(.bx-abschluss-cta__terminkarte):has(.bx-button--sekundaer-navy) .bx-abschluss-cta__aktionen .bx-button--sekundaer-navy:hover,
[data-sg-zustand="hover"] .bx-abschluss-cta--navy-termin:has(.bx-abschluss-cta__terminkarte):has(.bx-button--sekundaer-navy) .bx-abschluss-cta__aktionen .bx-button--sekundaer-navy {
  border-color: var(--farbe-weiss);
}

@media (width >= 768px) {
  .bx-abschluss-cta--navy-termin:has(.bx-abschluss-cta__terminkarte):has(.bx-button--sekundaer-navy) .bx-abschluss-cta__aktionen .bx-button--primaer {
    padding-inline: var(--abstand-button-termin-x);
  }

  .bx-abschluss-cta--navy-termin:has(.bx-abschluss-cta__terminkarte):has(.bx-button--sekundaer-navy) .bx-abschluss-cta__aktionen .bx-button--sekundaer-navy {
    padding-inline: var(--abstand-button-termin-sek-x);
  }
}

/*
 * == Ph12 Design-Abgleich (V-F-inhalte-63): `band-hell` mit `als_karte` (Tutorials; Design Tutorials v2 :108–116) ==
 * Weiße Karte mit Rand und Radius 18 px auf der hellen Fläche, Titel 17 px, Text 14 px, Navy-Knopf rechts in der Zeile.
 */
.bx-abschluss-cta--band-hell[data-bx-karte] .bx-abschluss-cta__innen {
  flex-wrap: nowrap;
  padding: var(--abstand-22) var(--abstand-26);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-weiss);
}

.bx-abschluss-cta--band-hell[data-bx-karte] .bx-abschluss-cta__titel {
  margin-block-end: var(--abstand-4);
  font-weight: var(--schrift-kachel-titel-gewicht);
  font-size: var(--schrift-kachel-titel-groesse);
  line-height: normal;
  letter-spacing: 0;
}

.bx-abschluss-cta--band-hell[data-bx-karte] .bx-abschluss-cta__satz {
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-text-klein-groesse);
}

.bx-abschluss-cta--band-hell[data-bx-karte] .bx-button {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-abschluss-cta--band-hell[data-bx-karte] .bx-button:hover {
  background-color: var(--farbe-orange-hover);
}

@media (width < 768px) {
  .bx-abschluss-cta--band-hell[data-bx-karte] .bx-abschluss-cta__innen {
    flex-wrap: wrap;
  }
}

/*
 * Ph12 B1, V-B-app-72 (Design ROI-Rechner v3 Z. 333–338): `dicht` am Band „Lieber direkt sprechen?“ mit Polster 48 px
 * und Linie oben. Nur mit dem Parameter.
 */
.bx-abschluss-cta--band-kachel.bx-abschluss-cta--dicht {
  padding-block: var(--abstand-48);
  border-block-start: 1px solid var(--farbe-linie);
}

@media (width < 768px) {
  .bx-abschluss-cta--band-kachel.bx-abschluss-cta--dicht {
    padding-block: var(--abstand-38);
  }
}

/* 2K und größer: Navy-Abschluss über die volle Breite, Text und Karte bleiben im Inhaltsbereich (basis.css) */
@media (width > 1440px) {
  .bx-abschluss-cta--navy-termin {
    padding-inline: calc(var(--abstand-64) + var(--bx-rand-extra));
  }

  /* Der Spaltenabstand (6 vw, höchstens 96 px) bleibt bei dem Wert von 1440 px: dieselben 6 % der Kastenbreite */
  .bx-abschluss-cta--navy-termin .bx-abschluss-cta__innen {
    gap: calc(var(--kasten-breite) * var(--bx-cta-spaltenabstand-anteil) / 100);
  }
}

/*
 * Rahmenteil „seitenfuss“, Fuß v2 (Teilplan B1 §4, §8.1): Navy-Fläche mit Marke, Social, Newsletter (nur Optik), drei
 * Linkspalten und Bodenzeile. Seitenrand über --seitenrand (nie über lokale Stufen); Farben, Schriften und jeder Abstand,
 * der einem Skalen-Token --abstand-<n> gleicht, stehen als Token (E24, FW-1); Einzelmaße des Designs ohne Token bleiben Literale.
 */
.bx-seitenfuss {
  padding-block: clamp(var(--abstand-44), 6vw, var(--abstand-64)) var(--abstand-32);
  padding-inline: var(--seitenrand);
  background-color: var(--farbe-navy);
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-text);
  container-type: inline-size; /* Umbruch der Newsletter-Spalte nach Inhaltsbreite (Design: Logik `umbruch`) */
}

/* Reihe 1 (Variante B, Design 20.10.2026): Marke links, Newsletter-Spalte rechts; Linkspalten stehen als eigene Reihe */
.bx-seitenfuss__oben {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abstand-36) var(--abstand-40);
}

.bx-seitenfuss__marke {
  flex: 1 1 260px;
  min-inline-size: 0;
  max-inline-size: 340px;
}

.bx-seitenfuss__logo {
  display: inline-flex;
}

.bx-seitenfuss__logo img {
  display: block;
  inline-size: auto;
  block-size: var(--kopf-logo-hoehe);
  margin-block-end: var(--abstand-18);
}

.bx-seitenfuss__claim {
  max-inline-size: 280px;
  margin: 0 0 var(--abstand-26);
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-fuss-text-gewicht);
  font-size: var(--schrift-fuss-text-groesse);
  line-height: var(--schrift-fuss-text-zeile);
  letter-spacing: var(--schrift-fuss-text-laufweite);
}

/* Kleine Überschriften der Gruppen Social und Newsletter */
.bx-seitenfuss__label {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-fuss-label-gewicht);
  font-size: var(--schrift-fuss-label-groesse);
  line-height: var(--schrift-fuss-label-zeile);
  letter-spacing: var(--schrift-fuss-label-laufweite);
  text-transform: uppercase;
}

.bx-seitenfuss__social ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-seitenfuss__kanal {
  display: flex;
  align-items: center;
  gap: var(--abstand-9);
  padding: var(--abstand-9) var(--abstand-15);
  border: 1px solid var(--farbe-navy-glas-rand);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-navy-glas);
  color: var(--farbe-navy-text-hell);
  font-weight: var(--schrift-social-gewicht);
  font-size: var(--schrift-social-groesse);
  line-height: var(--schrift-social-zeile);
  letter-spacing: var(--schrift-social-laufweite);
  transition: background-color var(--bewegung-dauer-kurz) ease, border-color var(--bewegung-dauer-kurz) ease,
    color var(--bewegung-dauer-kurz) ease;
}

.bx-seitenfuss__kanal svg {
  display: block;
  flex: none;
}

.bx-seitenfuss__kanal:hover {
  border-color: var(--farbe-weiss);
  color: var(--farbe-weiss);
}

.bx-seitenfuss__kanal[data-kanal="youtube"]:hover {
  border-color: var(--farbe-marke-youtube);
  background-color: var(--farbe-marke-youtube);
}

.bx-seitenfuss__kanal[data-kanal="linkedin"]:hover {
  border-color: var(--farbe-marke-linkedin);
  background-color: var(--farbe-marke-linkedin);
}

/*
 * Newsletter im Fuß, seit TP-9 R2 ein eigenes Formular mit nativem POST an Brevo (Vertrag Ph6 §3.3 „Variante fuss“,
 * W20 Ausnahme, W37; Teilplan F7): Wurzel mit Titel und Formular, ohne Formular-Kern, ohne Captcha-Platz und ohne
 * Ohne-JS-Hinweis – ohne JS bleibt das Formular sichtbar. Der Fuß lädt formular.css nicht (er steht auf jeder Seite):
 * Honigtopf, Fehlerzeile und der Zustand „sendet“ von newsletter.js sind hier gestaltet, nur über Attribute; die
 * Fehlerzeile reserviert eine Zeile (kein Höhensprung).
 */
.bx-seitenfuss__newsletter-wurzel {
  display: flex;
  flex: 0 1 360px;
  flex-direction: column;
  gap: var(--abstand-10);
  min-inline-size: 0;
  max-inline-size: 360px;
  margin: 51px 0 0; /* Design: Überschrift auf Höhe der ersten Claim-Zeile */
}

.bx-seitenfuss__newsletter-wurzel .bx-seitenfuss__label {
  margin-block-end: 2px; /* Design */
}

/* Feld und Knopf in einer Zeile, Haken und Meldung darunter über die volle Breite (Reihenfolge per order, DOM bleibt Feld, Haken, Meldung, Knopf) */
.bx-seitenfuss__newsletter {
  display: flex;
  flex-flow: row wrap;
  gap: var(--abstand-10) var(--abstand-8);
  min-inline-size: 0;
}

.bx-seitenfuss__feld {
  box-sizing: border-box;
  flex: 1 1 0;
  inline-size: auto;
  min-inline-size: 0;
  block-size: 37px;
  padding-inline: var(--abstand-13);
  border: 1px solid var(--farbe-weiss);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-navy-glas);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fuss-feld-gewicht);
  font-size: var(--schrift-fuss-feld-groesse);
  line-height: var(--schrift-fuss-feld-zeile);
  letter-spacing: var(--schrift-fuss-feld-laufweite);
}

.bx-seitenfuss__feld::placeholder {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-seitenfuss__feld:focus-visible {
  border-color: var(--farbe-orange-text);
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-seitenfuss__feld[aria-invalid="true"] {
  border-color: var(--farbe-gedaempft-navy);
}

.bx-seitenfuss__honigtopf {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px; /* Design: wie .bx-unsichtbar */
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bx-seitenfuss__einwilligung {
  display: flex;
  flex: 1 1 100%;
  order: 1;
  align-items: flex-start;
  gap: var(--abstand-8);
  color: var(--farbe-navy-text-hell);
  font-weight: var(--schrift-fuss-einwilligung-gewicht);
  font-size: var(--schrift-fuss-einwilligung-groesse);
  line-height: var(--schrift-fuss-einwilligung-zeile);
  letter-spacing: var(--schrift-fuss-einwilligung-laufweite);
}

.bx-seitenfuss__einwilligung input {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  margin: 1px 0 0; /* Design */
  accent-color: var(--farbe-orange-text);
}

.bx-seitenfuss__einwilligung input:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-seitenfuss__einwilligung label {
  min-inline-size: 0;
  cursor: pointer;
}

.bx-seitenfuss__einwilligung a {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-fuss-absenden-gewicht);
  text-decoration: underline;
}

/* eine Zeile für die Meldungen an Feld und Haken, ohne :empty-Regel: kein Höhensprung bei einzeiliger Meldung */
.bx-seitenfuss__fehler {
  flex: 1 1 100%;
  order: 1;
  min-block-size: calc(var(--schrift-fuss-fehler-zeile) * 1em);
  margin: 0;
  color: var(--farbe-gedaempft-navy);
  font-weight: var(--schrift-fuss-fehler-gewicht);
  font-size: var(--schrift-fuss-fehler-groesse);
  line-height: var(--schrift-fuss-fehler-zeile);
  letter-spacing: var(--schrift-fuss-fehler-laufweite);
}

.bx-seitenfuss__absenden {
  flex: none;
  align-self: flex-start;
  white-space: nowrap;
  block-size: 37px;
  padding-inline: var(--abstand-15);
  border: 0;
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fuss-absenden-gewicht);
  font-size: var(--schrift-fuss-absenden-groesse);
  line-height: var(--schrift-fuss-absenden-zeile);
  letter-spacing: var(--schrift-fuss-absenden-laufweite);
  cursor: pointer;
}

.bx-seitenfuss__absenden:hover:not([aria-disabled="true"]) {
  background-color: var(--farbe-orange-hover);
}

.bx-seitenfuss__absenden:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-seitenfuss__absenden[aria-disabled="true"] {
  opacity: var(--deckkraft-inaktiv);
  cursor: not-allowed;
}

.bx-seitenfuss__newsletter[data-bx-newsletter-zustand="sendet"] .bx-seitenfuss__absenden {
  opacity: var(--deckkraft-inaktiv);
  cursor: progress;
}

/* Linkspalten: Reihe 2 über die volle Breite */
.bx-seitenfuss__spalten {
  display: grid;
  margin-block: var(--abstand-48);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-36) var(--abstand-40);
  min-inline-size: 0;
}

.bx-seitenfuss__titel {
  margin: 0 0 var(--abstand-16);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-fuss-kopf-gewicht);
  font-size: var(--schrift-fuss-kopf-groesse);
  line-height: var(--schrift-fuss-kopf-zeile);
  letter-spacing: var(--schrift-fuss-kopf-laufweite);
  text-transform: uppercase;
}

.bx-seitenfuss__spalte ul {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-10);
  margin: 0;
  padding: 0;
  list-style: none;
  /* inline-Links: Zeile der Liste = Zeile der Rolle „fuss-link“, nicht die des Fließtexts (E3-1, N2-82) */
  font-size: var(--schrift-fuss-link-groesse);
  line-height: var(--schrift-fuss-link-zeile);
}

.bx-seitenfuss__spalte a {
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-fuss-link-gewicht);
  font-size: var(--schrift-fuss-link-groesse);
  line-height: var(--schrift-fuss-link-zeile);
  letter-spacing: var(--schrift-fuss-link-laufweite);
  overflow-wrap: break-word;
}

.bx-seitenfuss__spalte a:hover,
.bx-seitenfuss__recht a:hover {
  color: var(--farbe-weiss);
}

/* Bodenzeile */
.bx-seitenfuss__boden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-14) var(--abstand-24);
  padding-block-start: var(--abstand-24);
  border-top: 1px solid var(--farbe-navy-linie);
}

.bx-seitenfuss__anbieter {
  margin: 0;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-fuss-recht-gewicht);
  font-size: var(--schrift-fuss-recht-groesse);
  line-height: var(--schrift-fuss-recht-zeile);
  letter-spacing: var(--schrift-fuss-recht-laufweite);
}

.bx-seitenfuss__recht ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-10) var(--abstand-24);
  margin: 0;
  padding: 0;
  list-style: none;
  /* inline-Links: Zeile der Liste = Zeile der Links, im Design `normal` (font-Kurzform); der Token fuss-recht-zeile
     (1,5) gilt dem Copyright, nicht den Links (E3-1, N2-82) */
  font-size: var(--schrift-fuss-recht-groesse);
  line-height: normal;
}

.bx-seitenfuss__recht a {
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-fuss-recht-gewicht);
  font-size: var(--schrift-fuss-recht-groesse);
  line-height: normal;
  letter-spacing: var(--schrift-fuss-recht-laufweite);
}

/* passen Marke (260) + Abstand (40) + Newsletter (360) nicht in die Inhaltsbreite, bricht die Spalte unter die Marke */
@container (inline-size < 660px) {
  .bx-seitenfuss__oben {
    row-gap: var(--abstand-48);
  }

  .bx-seitenfuss__newsletter-wurzel {
    margin-block-start: 0;
  }
}

/* lokale Stufe Seitenfuss: zwei Linkspalten, Marke und Newsletter gestapelt (Feld, Haken, Knopf untereinander) */
@media (width < 640px) {
  .bx-seitenfuss {
    padding-block: var(--abstand-44) var(--abstand-28);
  }

  .bx-seitenfuss__oben {
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-26);
  }

  .bx-seitenfuss__marke {
    flex: none;
  }

  .bx-seitenfuss__newsletter-wurzel {
    flex: none;
    max-inline-size: 300px;
  }

  .bx-seitenfuss__newsletter {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .bx-seitenfuss__feld,
  .bx-seitenfuss__einwilligung,
  .bx-seitenfuss__fehler {
    flex: none;
    order: 0;
  }

  .bx-seitenfuss__feld {
    inline-size: 100%;
  }

  .bx-seitenfuss__spalten {
    margin-block: var(--abstand-30) var(--abstand-32);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-30) var(--abstand-18);
  }
}

@media print {
/* Druck: weder Ebene noch Rückfall-Formen (AssetArt::CssDruck; die Pipeline setzt die Regeln in @media print) */
.bx-hintergrund { display: none; }
.bx-abschnitt[data-deko]::before { content: none; }
}