@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");
}
/* 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;
}

/*
 * Baustein „hero-navy“ (Teilplan A3 §4.7): Navy-Fläche mit Mint-Glow; Varianten kompakt und zweispaltig.
 * Überschriften werden nur über Klassen gestaltet (der Styleguide baut die H1 der Beispiele um).
 */
.bx-hero-navy {
  position: relative;
  overflow: hidden;
  background-color: var(--farbe-navy);
}

.bx-hero-navy::before {
  content: '';
  position: absolute;
  background: radial-gradient(closest-side, var(--farbe-glow-mint-hero), var(--farbe-glow-mint-aus));
  pointer-events: none;
}

.bx-hero-navy--kompakt::before {
  top: -180px; /* Design */
  right: -140px; /* Design */
  width: 700px;
  height: 600px;
}

.bx-hero-navy--zweispaltig::before {
  bottom: -300px; /* Design */
  left: -200px; /* Design */
  width: 800px;
  height: 700px;
}

.bx-hero-navy__brotkrumen,
.bx-hero-navy__inhalt {
  position: relative;
}

.bx-hero-navy__text {
  min-width: 0;
}

.bx-hero-navy__titel,
.bx-hero-navy__kicker,
.bx-hero-navy__aussage,
.bx-hero-navy__lead {
  margin: 0;
  /* Der Hero schneidet Überlauf ab (overflow: hidden): lange Wörter müssen umbrechen */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kompakt: H1 groß, Lead in Textgröße, Aktion rechts unten */
.bx-hero-navy--kompakt {
  padding: var(--abstand-hero-oben) var(--seitenrand) var(--abstand-hero-unten);
}

.bx-hero-navy--kompakt .bx-hero-navy__brotkrumen {
  margin-bottom: var(--abstand-16);
}

.bx-hero-navy--kompakt .bx-hero-navy__inhalt {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-gruppe);
}

.bx-hero-navy--kompakt .bx-hero-navy__titel {
  margin-bottom: var(--abstand-10);
  color: var(--farbe-weiss);
  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-hero-navy--kompakt .bx-hero-navy__lead {
  color: var(--farbe-navy-text-sekundaer);
  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-hero-navy--kompakt .bx-hero-navy__rechts {
  flex: none;
}

/* Zweispaltig: Kicker, Aussage, Lead links, Grafik oder Aktion rechts; unter der Stufe „stapeln“ eine Spalte */
.bx-hero-navy--zweispaltig .bx-hero-navy__brotkrumen {
  padding: var(--abstand-32) var(--seitenrand) 0;
}

.bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 480px);
  align-items: center;
  gap: var(--abstand-spalten);
  padding: var(--abstand-block) var(--seitenrand) var(--abstand-block-gross);
}

@media (width < 1080px) {
  .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt:where(:not([data-breiten] *)) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-gruppe);
  }
}

.bx-hero-navy__kicker {
  margin-bottom: var(--abstand-20);
  color: var(--farbe-mint);
  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-navy__kicker::before {
  content: '\2014\00a0';
}

.bx-hero-navy__aussage {
  margin-bottom: var(--abstand-20);
  color: var(--farbe-weiss);
  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);
  text-wrap: pretty;
}

.bx-hero-navy--zweispaltig .bx-hero-navy__lead {
  max-width: 560px;
  margin-bottom: var(--abstand-32);
  color: var(--farbe-navy-text-sekundaer);
  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;
}

/*
 * Ph8 (Vertrag Ph8 §3.3.1, Ä8-4; Teilplan H0a §4.3, §8): Fläche hell, Ausrichtung mitte, Akzent, Aktionen, Punkte,
 * Eyebrow, unten, Schriftstufen, betonter Titelteil und Breite der rechten Spalte. Ohne die neuen Parameter greift
 * keine Regel dieses Blocks außer der H1 ohne Aussage in „zweispaltig“ (E19, bisher ohne Regel).
 */

/* H1 ohne Aussage in „zweispaltig“ (E19): Hero-Stufe */
.bx-hero-navy--zweispaltig .bx-hero-navy__titel {
  margin-bottom: var(--abstand-20);
  color: var(--farbe-weiss);
  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);
  text-wrap: pretty;
}

/* Eyebrow über der H1 (= Kicker-Stil), Gedankenstrich per CSS */
.bx-hero-navy__eyebrow {
  margin: 0 0 var(--abstand-20);
  color: var(--farbe-mint);
  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-navy__eyebrow::before {
  content: '\2014\00a0';
}

/* Akzent auf Navy (E15): orange = --farbe-orange-navy-hell; gruen wie mint */
.bx-hero-navy[data-bx-akzent="orange"] .bx-hero-navy__kicker,
.bx-hero-navy[data-bx-akzent="orange"] .bx-hero-navy__eyebrow {
  color: var(--farbe-orange-navy-hell);
}

/* Aktionen: Abstand wie das CTA-Paar, Textlink auf Navy weiß */
.bx-hero-navy__aktionen {
  align-items: center;
}

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

/* Punkte: Häkchenliste unter den Aktionen (Icon-Kreis SVG) */
.bx-hero-navy__punkte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-12) var(--abstand-24);
  margin: var(--abstand-24) 0 0;
  padding: 0;
  list-style: none;
}

.bx-hero-navy__punkt {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  color: var(--farbe-navy-text-hell);
  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-hero-navy__punkt .bx-icon-kreis {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--farbe-weiss); /* Ph12 Design-Abgleich (V-B-app-2): weißer Haken auf dem grünen Kreis */
}

/* unten: verschachtelte Abschnitte unter der Hero-Zeile */
.bx-hero-navy__unten {
  position: relative;
}

/* Schriftstufen (E18): Aussage app/hell, H1 xl/gross/titel */
.bx-hero-navy[data-bx-schrift="app"] .bx-hero-navy__aussage {
  font-weight: var(--schrift-hero-app-gewicht);
  font-size: var(--schrift-hero-app-groesse);
  line-height: var(--schrift-hero-app-zeile);
  letter-spacing: var(--schrift-hero-app-laufweite);
}

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

.bx-hero-navy[data-bx-schrift="xl"] .bx-hero-navy__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-navy[data-bx-schrift="gross"] .bx-hero-navy__titel {
  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);
}

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

/* Fläche hell (OB, MU, VF, A7): transparent vor dem Seitenhintergrund, Linie unten, Text Navy, kein eigener Glow */
.bx-hero-navy--hell {
  border-bottom: 1px solid var(--farbe-linie);
  background-color: transparent;
}

.bx-hero-navy--hell::before {
  content: none;
}

.bx-hero-navy--hell .bx-hero-navy__titel,
.bx-hero-navy--hell .bx-hero-navy__aussage {
  color: var(--farbe-navy);
}

.bx-hero-navy--hell .bx-hero-navy__lead {
  color: var(--farbe-mikrotext);
}

.bx-hero-navy--hell .bx-hero-navy__kicker,
.bx-hero-navy--hell .bx-hero-navy__eyebrow {
  color: var(--farbe-mint-text);
}

.bx-hero-navy--hell[data-bx-akzent="orange"] .bx-hero-navy__kicker,
.bx-hero-navy--hell[data-bx-akzent="orange"] .bx-hero-navy__eyebrow {
  color: var(--farbe-orange-text);
}

.bx-hero-navy--hell .bx-hero-navy__punkt {
  color: var(--farbe-navy);
}

/* betonter Titelteil (E21, nur hell): zweite Farbe nach der Altwert-Regel */
.bx-hero-navy__betont {
  color: var(--farbe-mikrotext);
}

/* Ausrichtung mitte (A7): zentriert, ohne rechte Spalte */
.bx-hero-navy--mitte .bx-hero-navy__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding-top: 118px; /* Design */
  padding-bottom: var(--abstand-54); /* Wert laut Design */
  text-align: center;
}

.bx-hero-navy--mitte .bx-hero-navy__titel {
  max-width: 1100px;
}

.bx-hero-navy--mitte .bx-hero-navy__lead {
  max-width: 660px;
  margin-inline: auto;
  font-weight: var(--schrift-lead-gross-gewicht);
  font-size: var(--schrift-lead-gross-groesse);
  line-height: var(--schrift-lead-gross-zeile);
  letter-spacing: var(--schrift-lead-gross-laufweite);
}

.bx-hero-navy--mitte .bx-hero-navy__aktionen,
.bx-hero-navy--mitte .bx-hero-navy__punkte {
  justify-content: center;
}

/* Breite der rechten Spalte (E20): Steckbrief der Pakete, Bild der CRM-Übersicht */
.bx-hero-navy--rechts-steckbrief .bx-hero-navy__inhalt {
  grid-template-columns: minmax(0, 1fr) 420px;
}

.bx-hero-navy--rechts-bild .bx-hero-navy__inhalt {
  grid-template-columns: minmax(0, 1fr) var(--breite-hero-bild);
}

@media (width < 1080px) {
  .bx-hero-navy--rechts-steckbrief .bx-hero-navy__inhalt:where(:not([data-breiten] *)),
  .bx-hero-navy--rechts-bild .bx-hero-navy__inhalt:where(:not([data-breiten] *)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Ph12 Design-Abgleich: nur die benannten Seiten mit Seitenstufen. Migration und DSGVO haben im Design keine rechte
 * Hero-Spalte. CRM und ISO stapeln unter „weit“, CRM-Bereiche, Sicherheit und Hosting unter „eng“.
 * Hinter den Regeln für rechts-steckbrief/rechts-bild, damit deren feste Spaltenbreite nicht gewinnt.
 */
:is([data-breiten="migration"], [data-breiten="dsgvo"]) .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
  grid-template-columns: minmax(0, 1fr);
}

@media (width < 1024px) {
  :is([data-breiten="crm-bereich"], [data-breiten="sicherheit"], [data-breiten="hosting"]) .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-breiten="crm-bereich"] .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    gap: var(--abstand-40);
  }

  [data-breiten="sicherheit"] .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    gap: var(--abstand-56);
  }

  [data-breiten="hosting"] .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    gap: var(--abstand-32); /* Wert laut Design Hosting rHero: 32 px, abweichend von der allgemeinen Gap-Skala */
  }
}

@media (width < 1180px) {
  :is([data-breiten="crm"], [data-breiten="iso"]) .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-gruppe);
  }
}

/* pxHeroMock: im Zwischenbereich 580 px, höchstens die verfügbare Breite, mittig; mobil wie im Design volle Breite. */
@media (width >= 768px) and (width < 1180px) {
  [data-breiten="crm"] .bx-hero-navy--zweispaltig .bx-hero-navy__rechts {
    inline-size: var(--breite-hero-bild);
    max-inline-size: 100%;
    justify-self: center;
  }
}

/* Mobil-Dateien: CRM-Produktseite 20 px (abstand-gruppe), CRM-Bereiche und Sicherheit/ISO/Hosting jeweils 24 px. */
@media (width < 768px) {
  :is([data-breiten="crm-bereich"], [data-breiten="sicherheit"], [data-breiten="iso"], [data-breiten="hosting"]) .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    gap: var(--abstand-24);
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9 Teil 1: `rahmen: karte` und Schriftstufen `rolle`, `startups` (N11-11; Design `Loesung Startups v3`
 * Hero Z. 42, Rollenseiten Hero) ==
 * Karte: Navy-Fläche mit Seitenrand und Radius 24 auf heller Seite, Polster 40/72/76 (mobil schmaler). Die Stufen
 * gelten für die H1 (`__titel`) wie xl/gross/titel. Ohne die Werte greift keine dieser Regeln.
 */
.bx-hero-navy--karte {
  margin: var(--abstand-16) var(--seitenrand) 0;
  padding: var(--abstand-40) var(--abstand-72) var(--abstand-76);
  border-radius: var(--radius-box);
}

.bx-hero-navy--karte .bx-hero-navy__brotkrumen {
  padding: 0 0 var(--abstand-40);
}

.bx-hero-navy--karte .bx-hero-navy__inhalt {
  padding: 0;
}

/* Navy-Karte (SU): kein Gedankenstrich vor der Eyebrow, H11-58 / P-M1B-A-7; andere Heros behalten ihn */
.bx-hero-navy--karte .bx-hero-navy__eyebrow::before {
  content: none;
}

.bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__titel {
  font-weight: var(--schrift-hero-rolle-gewicht);
  font-size: var(--schrift-hero-rolle-groesse);
  line-height: var(--schrift-hero-rolle-zeile);
  letter-spacing: var(--schrift-hero-rolle-laufweite);
}

/*
 * == Ph12 Design-Abgleich (V-E-loesungen-32, -61, -63): Hero der Rollenseiten ==
 * Chips und Logos stehen in einer Zeile unter einer Trennlinie direkt auf Navy (Design Loesung Vertrieb/Kundenservice v3
 * Hero: margin-top 34, padding-top 26, border-top, gap 34; Logos mit Linie links, gap 30, opacity .62; Hero endet 50 px
 * darunter). Glow oben rechts (right -120, top -160, 660 × 560). Gilt nur für `schrift: rolle` (fünf Rollenseiten).
 */
.bx-hero-navy[data-bx-schrift="rolle"]::before {
  top: -160px; /* Design */
  right: -120px; /* Design */
  bottom: auto;
  left: auto;
  width: 660px;
  height: 560px;
}

.bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__inhalt {
  padding-block-end: 0;
}

/* Spalte der Schritte-Karte: Design 400 px, Abstand 52 px (Finanzen mit Glaskarte 440 px, Abstand 48 px) */
@media (width >= 1080px) {
  .bx-hero-navy[data-bx-schrift="rolle"].bx-hero-navy--rechts-steckbrief .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--abstand-52);
  }

  .bx-hero-navy[data-bx-schrift="rolle"].bx-hero-navy--rechts-steckbrief:has(.bx-schritte-karte[data-bx-stil="glas"]) .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: var(--abstand-48);
  }
}

.bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-16) var(--abstand-34);
  margin: var(--abstand-34) var(--seitenrand) 0;
  padding: var(--abstand-26) 0 var(--abstand-50);
  border-block-start: 1px solid var(--farbe-navy-linie);
}

.bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__unten > .bx-trust-pillen--chips {
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__unten > .bx-logoleiste {
  margin: 0;
  padding: 0 0 0 var(--abstand-34);
  border-inline-start: 1px solid var(--farbe-navy-linie);
  background: none;
}

.bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__unten .bx-logoleiste__liste {
  gap: var(--abstand-16) var(--abstand-30);
  padding: 0;
}

.bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__unten .bx-logoleiste__logo img {
  opacity: .62; /* Wert laut Design */
}

/* Wert laut Design Loesung Startups v3 Z. 46: Eyebrow Archivo 600 14px statt Mono */
.bx-hero-navy[data-bx-schrift="startups"] .bx-hero-navy__eyebrow {
  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-navy[data-bx-schrift="startups"] .bx-hero-navy__titel {
  font-weight: var(--schrift-hero-startups-gewicht);
  font-size: var(--schrift-hero-startups-groesse);
  line-height: var(--schrift-hero-startups-zeile);
  letter-spacing: var(--schrift-hero-startups-laufweite);
}

/*
 * == Ph12 Design-Abgleich (V-F-inhalte-61/-62, Tutorials; Design Tutorials v2 :37, :51–53) ==
 * `glow: oben-rechts`: Mint-Glow oben rechts wie `kompakt`. `meta`: Mono-Metazeile in Versalien unter den Aktionen.
 */
.bx-hero-navy--glow-oben-rechts::before {
  top: -180px; /* Design */
  right: -140px; /* Design */
  bottom: auto;
  left: auto;
  width: 760px;
  height: 640px;
}

.bx-hero-navy__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-8) var(--abstand-22);
  margin: var(--abstand-26) 0 0;
  padding: 0;
  color: var(--farbe-navy-grau);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-meta-mono-gewicht);
  font-size: var(--schrift-code-groesse);
  list-style: none;
  text-transform: uppercase;
}

@media (width < 768px) {
  /* Ph12 Design-Abgleich (V-E-loesungen-32): Zeile bricht um, die Logos stehen ohne Linie unter den Chips */
  .bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__unten > .bx-logoleiste {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .bx-hero-navy--karte {
    padding: var(--abstand-28) var(--abstand-20) var(--abstand-40);
  }

  /* Ph12 Design-Abgleich (P-DAC-6, O5): Aktionen füllen die Zeile (Design Onboarding mobil: flex 1 1 auto) */
  .bx-hero-navy--aktionen-gefuellt .bx-hero-navy__aktionen > * {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
  }
}

/*
 * == Ph12 B1: Hero der APP-Übersicht (`schrift: app`; Design APP Produktseite Tour v3 Z. 165–175, 1411–1430) ==
 * V-B-app-1: Spalten .92fr/1.08fr, Gap 56, Polster 22/30; das Datensatz-Fenster steht auf 85 % (Bühne 800 px auf
 * Spaltenbreite skaliert). V-B-app-3: Punkteliste 500/13.5 px, Gap 8/20. V-B-app-4: `einblenden` (steigAuf).
 */
@media (width >= 1080px) {
  .bx-hero-navy[data-bx-schrift="app"] .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: var(--abstand-56);
    padding-block: var(--abstand-22) var(--abstand-30);
  }

  .bx-hero-navy[data-bx-schrift="app"] :is(.bx-datensatz-fenster__kopf, .bx-datensatz-fenster__zeilen) {
    zoom: 0.85; /* Wert laut Design */
  }
}

.bx-hero-navy[data-bx-schrift="app"] .bx-hero-navy__punkte {
  gap: var(--abstand-8) var(--abstand-20);
  margin-block-start: var(--abstand-22);
}

.bx-hero-navy[data-bx-schrift="app"] .bx-hero-navy__punkt {
  font-weight: var(--schrift-hero-punkt-gewicht);
  font-size: var(--schrift-hero-punkt-groesse);
  line-height: var(--schrift-hero-punkt-zeile);
  letter-spacing: var(--schrift-hero-punkt-laufweite);
}

@keyframes bx-hero-navy-steig {
  from {
    opacity: 0;
    transform: translateY(10px); /* Wert laut Design */
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bx-hero-navy[data-bx-einblenden] .bx-hero-navy__kicker {
    animation: bx-hero-navy-steig var(--bewegung-einstieg-kurz) backwards;
  }

  .bx-hero-navy[data-bx-einblenden] .bx-hero-navy__aussage {
    animation: bx-hero-navy-steig var(--bewegung-einstieg-dauer) var(--bewegung-einstieg-staffel) backwards;
  }
}

/*
 * == Ph12 B1: Hero der Automatisierung (Design Automatisierung v7 Z. 50–59) ==
 * V-B-app-55: der betonte Titelteil steht in der zweiten Zeile (`<br>` im Design). V-B-app-56: der Textlink der hellen
 * Fläche mit grauer Unterkante. V-B-app-57: keine Linie unter dem zentrierten hellen Hero.
 */
.bx-hero-navy--mitte .bx-hero-navy__betont {
  display: block;
}

.bx-hero-navy--hell .bx-hero-navy__textlink {
  padding-block-end: 2px; /* Design */
  border-bottom: 1px solid var(--farbe-linie-stark);
}

.bx-hero-navy--hell .bx-hero-navy__textlink:hover {
  border-bottom-color: var(--farbe-orange-flaeche);
}

.bx-hero-navy--hell.bx-hero-navy--mitte {
  border-block-end: 0;
}

/*
 * == Ph12 B1: Hero von App oder CRM (`schrift: weiche`, `rechts_breite: weiche`; Design App oder CRM v2 Z. 50–58) ==
 * V-B-app-65: Lead ohne Silbentrennung, brainX CRM und brainX APP fett (weiß), höchstens 600 px. V-B-app-66: H1
 * clamp(38 px, 4vw, 54 px) mit höchstens 640 px, Grafikspalte 620 px mit Gap 48.
 */
.bx-hero-navy[data-bx-schrift="weiche"] .bx-hero-navy__titel {
  max-inline-size: 640px;
  font-weight: var(--schrift-hero-weiche-gewicht);
  font-size: var(--schrift-hero-weiche-groesse);
  line-height: var(--schrift-hero-weiche-zeile);
  letter-spacing: var(--schrift-hero-weiche-laufweite);
}

.bx-hero-navy[data-bx-schrift="weiche"] .bx-hero-navy__lead {
  max-inline-size: 600px;
  hyphens: manual;
}

.bx-hero-navy[data-bx-schrift="weiche"] .bx-hero-navy__lead strong {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-textlink-gewicht);
}

@media (width >= 1080px) {
  .bx-hero-navy--rechts-weiche .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 1fr) 620px;
    column-gap: var(--abstand-48);
  }
}

/* Ph12 Design-Abgleich (V-B-app-38, VF Z. 53): zwei gleich breite Spalten, Abstand 40 px / 60 px */
@media (width >= 1080px) {
  .bx-hero-navy--rechts-haelfte .bx-hero-navy__inhalt {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: var(--abstand-40) var(--abstand-60);
  }
}

/*
 * Abschnittstyp „schritte-karte“ (Vertrag Ph11 §3.3.2, Teilplan M0c §8.4): Variante rolle (senkrechte Liste auf Navy,
 * Etikett „automatisch“, Zeile „Ihre Aufgabe“ orange) und startseite (helle Karte mit Kopf, Fortschritt und sechs
 * Schrittkarten). Zustände nur über data-bx-schritt-zustand; ohne JavaScript Endzustand (alle erledigt, 100 %).
 */
.bx-schritte-karte {
  margin: 0;
}

.bx-schritte-karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-12);
}

.bx-schritte-karte__status {
  white-space: nowrap;
}

.bx-schritte-karte__titel,
.bx-schritte-karte__zusatz-kopf,
.bx-schritte-karte__status {
  margin: 0;
  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-schritte-karte__schritte {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Variante rolle: Karte auf Navy (DA „Allgemein Rollen“); eigene Navy-Fläche, damit die hellen Texte auch außerhalb des
   Navy-Heros (Styleguide) lesbar bleiben (Kontrast vor Design, CB-0c) */
.bx-schritte-karte[data-bx-variante="rolle"] {
  padding: var(--abstand-22) var(--abstand-24) var(--abstand-12); /* Ph12 Design-Abgleich V-E-loesungen-62: Design 22/24/12 */
  border: 1px solid var(--farbe-navy-glas-rand);
  border-radius: var(--radius-karte);
  background: var(--farbe-navy);
}

/* Ph12 V-E-loesungen-62: im Hero ein weißer Hauch über dem Navy des Heros (Design), sonst eigene Navy-Fläche (Styleguide) */
.bx-hero-navy .bx-schritte-karte[data-bx-variante="rolle"] {
  background: var(--farbe-navy-hauch);
}

.bx-schritte-karte[data-bx-variante="rolle"] .bx-schritte-karte__titel {
  color: var(--farbe-mint);
}

.bx-schritte-karte[data-bx-variante="rolle"] .bx-schritte-karte__zusatz-kopf {
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-etikett-gewicht);
}

.bx-schritte-karte[data-bx-variante="rolle"] .bx-schritte-karte__kopf {
  margin-block-end: var(--abstand-12);
}

/* Ph12 V-E-loesungen-62: fünf Segmente unter dem Kopf, mint; das Segment „Ihre Aufgabe“ orange (Design Hero Z. ~41) */
.bx-schritte-karte__segmente {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--abstand-4);
  margin-block-end: var(--abstand-14);
}

.bx-schritte-karte__segment {
  display: block;
  block-size: 5px;
  border-radius: var(--radius-mini);
  background: var(--farbe-mint);
}

.bx-schritte-karte__segment[data-bx-ton="orange"] {
  background: var(--farbe-orange-flaeche); /* Grafik ohne Text */
}

.bx-schritte-karte[data-bx-variante="rolle"] .bx-schritte-karte__schritte {
  display: block;
}

.bx-schritte-karte[data-bx-variante="rolle"] .bx-schritte-karte__schritt {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--abstand-10);
  padding-block: var(--abstand-9);
  border-block-start: 1px solid var(--farbe-navy-pille);
  color: var(--farbe-navy-text-lead);
}

.bx-schritte-karte__nummer {
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-pille-zeile);
}

.bx-schritte-karte__text {
  margin: 0;
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-karte-text-zeile);
}

.bx-schritte-karte__etikett {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-6);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-text); /* Ph12 V-E-loesungen-62: Design Archivo 500 12 px, mit Haken */
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-etikett-zeile);
}

.bx-schritte-karte__etikett-haken {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
}

/* Zeile „Ihre Aufgabe“: Text weiß und fett, nur die Nummer orange (Design) */
.bx-schritte-karte[data-bx-variante="rolle"] [data-bx-ihre-aufgabe] {
  color: var(--farbe-weiss);
}

.bx-schritte-karte[data-bx-variante="rolle"] [data-bx-ihre-aufgabe] .bx-schritte-karte__text {
  font-weight: var(--schrift-label-gewicht);
}

.bx-schritte-karte[data-bx-variante="rolle"] [data-bx-ihre-aufgabe] .bx-schritte-karte__nummer {
  color: var(--farbe-orange-navy-hell);
}

/* Stil „glas“ (Finanzen): Glasfläche, Polster 32, Text 16 px weiß (Design Loesung Finanzen v4 Hero) */
.bx-schritte-karte[data-bx-variante="rolle"][data-bx-stil="glas"],
.bx-hero-navy .bx-schritte-karte[data-bx-variante="rolle"][data-bx-stil="glas"] {
  padding: var(--abstand-32);
  background: var(--farbe-navy-flaeche-zart);
  backdrop-filter: blur(14px);
}

.bx-schritte-karte[data-bx-variante="rolle"][data-bx-stil="glas"] .bx-schritte-karte__schritt {
  color: var(--farbe-weiss);
}

.bx-schritte-karte[data-bx-variante="rolle"][data-bx-stil="glas"] .bx-schritte-karte__text {
  font-size: var(--schrift-text-groesse);
}

.bx-schritte-karte[data-bx-variante="rolle"] .bx-schritte-karte__pille {
  padding: var(--abstand-4) var(--abstand-8);
  border-radius: var(--radius-pille);
  background: var(--farbe-orange-text); /* Pille mit Text: weiß darauf 5,41 : 1 (P-M0C-A-1) */
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
}

/* Variante startseite: helle Karte mit Raster (DA §2.5 S1, DB §5.3) */
.bx-schritte-karte[data-bx-variante="startseite"] {
  overflow: hidden;
  max-inline-size: 1120px;
  margin-inline: auto; /* im Hero mittig wie Design S1 (CB-0c B) */
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte-klein);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-stationen); /* Vorbehalt A11-66: --schatten-hero-karte mit --schatten-stationen zusammengelegt */
}

.bx-schritte-karte[data-bx-variante="startseite"] .bx-schritte-karte__kopf {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-6) var(--abstand-12);
  padding: var(--abstand-12) var(--abstand-18);
  background: var(--farbe-flaeche-karte);
  color: var(--farbe-mikrotext);
}

/* graue Spur mit Balken darin (Design `Startseite v6` S1, V-A-rahmen-10) */
.bx-schritte-karte__spur {
  block-size: 3px;
  background: var(--farbe-flaeche-toggle);
}

.bx-schritte-karte__fortschritt {
  block-size: 100%;
  inline-size: var(--bx-prozent, 100%); /* Wert aus css/produkt/prozent.css; Rückfall voller Balken (Endzustand, Teilplan M0c E-9) */
  background: var(--farbe-orange-flaeche);
  transition: inline-size .6s cubic-bezier(.4, 0, .2, 1);
}

.bx-schritte-karte[data-bx-variante="startseite"] .bx-schritte-karte__schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--abstand-12);
  padding: var(--abstand-18);
}

.bx-schritte-karte[data-bx-variante="startseite"] .bx-schritte-karte__schritt {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--abstand-6);
  padding: var(--abstand-14) var(--abstand-14) var(--abstand-16);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-eingabe);
  background: var(--farbe-weiss);
  transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease,
    transform .35s cubic-bezier(.2, .7, .2, 1);
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="aktiv"] {
  border-color: var(--farbe-orange-flaeche);
  background: var(--farbe-orange-karte);
  box-shadow: var(--schatten-halo-schritt);
  transform: translateY(-3px);
}

.bx-schritte-karte__knopf {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.bx-schritte-karte__knopf[hidden] {
  display: none;
}

.bx-schritte-karte__kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  box-sizing: border-box;
  flex: none;
  border: 1.5px solid var(--farbe-kreis-offen);
  border-radius: var(--radius-pille);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-pille-zeile);
  transition: background-color .35s ease, border-color .35s ease;
}

/* Kreis und Label in einer Zeile (Design: `display:flex;gap:8px`) */
.bx-schritte-karte__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
}

.bx-schritte-karte__haken {
  display: none;
  inline-size: 12px;
  block-size: 12px;
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="erledigt"] .bx-schritte-karte__kreis {
  border-color: var(--farbe-navy);
  background: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="erledigt"] .bx-schritte-karte__ziffer {
  display: none;
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="erledigt"] .bx-schritte-karte__haken {
  display: block;
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="aktiv"] .bx-schritte-karte__kreis {
  border-color: var(--farbe-orange-flaeche);
  background: var(--farbe-orange-text); /* Ziffer weiß: 5,41 : 1 statt 3,56 : 1 (P-M0C-A-1) */
  color: var(--farbe-weiss);
}

.bx-schritte-karte__label {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  letter-spacing: 0;
}

/* Wert und Platzhalter „—“ liegen in derselben Rasterzelle; der Platzhalter zeigt sich nur bei „offen“ */
.bx-schritte-karte__wertzelle {
  display: grid;
}

.bx-schritte-karte__wertzelle > * {
  grid-area: 1 / 1;
}

.bx-schritte-karte__platzhalter {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: 15px;
  line-height: 1.35;
  opacity: 0;
  transition: opacity .25s ease;
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="offen"] .bx-schritte-karte__platzhalter {
  opacity: 1;
}

.bx-schritte-karte__wert,
.bx-schritte-karte__zusatz,
.bx-schritte-karte__pille {
  transition: opacity .4s ease, transform .4s ease;
}

.bx-schritte-karte__zusatz,
.bx-schritte-karte[data-bx-variante="startseite"] .bx-schritte-karte__pille {
  transition-delay: .1s;
}

/* noch nicht erreichter Schritt: Wert verborgen, Zusatz und Pille unsichtbar (Design `Startseite v6` S1) */
.bx-schritte-karte__schritt[data-bx-schritt-zustand="offen"] .bx-schritte-karte__wert {
  opacity: 0;
  transform: translateY(4px);
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="offen"] .bx-schritte-karte__zusatz {
  opacity: 0;
}

.bx-schritte-karte__schritt[data-bx-schritt-zustand="offen"] .bx-schritte-karte__pille {
  opacity: 0;
  transform: scale(.85);
}

.bx-schritte-karte__wert {
  margin: 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
}

.bx-schritte-karte__schritt[data-bx-ton="gruen"] .bx-schritte-karte__wert {
  color: var(--farbe-gruen);
}

.bx-schritte-karte__zusatz {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-schritte-karte[data-bx-variante="startseite"] .bx-schritte-karte__pille {
  justify-self: start;
  margin: 0;
  transform-origin: left center;
  padding: var(--abstand-4) var(--abstand-8);
  border-radius: var(--radius-pille);
  background: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-pille-zeile);
}

@media (prefers-reduced-motion: reduce) {
  .bx-schritte-karte[data-bx-variante="startseite"] .bx-schritte-karte__schritt,
  .bx-schritte-karte__kreis,
  .bx-schritte-karte__wert,
  .bx-schritte-karte__zusatz,
  .bx-schritte-karte__pille,
  .bx-schritte-karte__platzhalter,
  .bx-schritte-karte__fortschritt {
    transition: none;
  }

  .bx-schritte-karte__schritt[data-bx-schritt-zustand="aktiv"] {
    transform: none;
  }
}

/*
 * 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 „trust-pillen“ (Teilplan D3 §5.1): Hero-Pillen mit Punkt, Faktenzeile auf Navy, Chips und Trust-Liste.
 * Siegel (E23, N4-55): die zweite Zeile nennt die Gesellschaft; nur vorhandene Tokens. Die Faktenzeile trägt Seitenrand,
 * oberen Abstand und ihre Linie selbst (sie läuft über die volle Breite, R-11).
 */
.bx-trust-pillen {
  font-family: var(--schrift-familie-text);
}

.bx-trust-pillen__link {
  color: inherit;
  transition: color var(--bewegung-dauer-kurz);
}

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

/* == hell-punkt == */
.bx-trust-pillen--hell-punkt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand-10) var(--abstand-22);
  margin: var(--abstand-28) 0 0;
  padding: 0;
  list-style: none;
}

.bx-trust-pillen--mitte.bx-trust-pillen--hell-punkt,
.bx-trust-pillen--mitte.bx-trust-pillen--chips {
  justify-content: center;
}

.bx-trust-pillen--hell-punkt .bx-trust-pillen__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-8);
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-trust-pille-gewicht);
  font-size: var(--schrift-trust-pille-groesse);
  line-height: var(--schrift-trust-pille-zeile);
  letter-spacing: var(--schrift-trust-pille-laufweite);
}

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

.bx-trust-pillen--hell-punkt .bx-trust-pillen__eintrag--hervorgehoben {
  color: var(--farbe-gruen-text);
  font-weight: var(--schrift-label-gewicht);
}

/* == navy-zeile == */
.bx-trust-pillen--navy-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-10) var(--abstand-26);
  margin: var(--abstand-60) 0 0;
  padding: var(--abstand-18) var(--seitenrand);
  border-top: 1px solid var(--farbe-navy-pille);
}

.bx-trust-pillen__label {
  margin: 0;
  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-trust-pillen--navy-zeile .bx-trust-pillen__label {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-trust-pillen__trenner {
  flex: none;
  width: 1px;
  height: 16px;
  background-color: var(--farbe-navy-linie-stark);
}

.bx-trust-pillen__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-10) var(--abstand-26);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-trust-pillen--navy-zeile .bx-trust-pillen__eintrag {
  color: var(--farbe-navy-text-hell);
  font-weight: var(--schrift-trust-pille-gewicht);
  font-size: var(--schrift-trust-pille-groesse);
  line-height: var(--schrift-trust-pille-zeile);
  letter-spacing: var(--schrift-trust-pille-laufweite);
}

.bx-trust-pillen--navy-zeile .bx-trust-pillen__link:hover,
[data-sg-zustand="hover"] .bx-trust-pillen--navy-zeile .bx-trust-pillen__link {
  color: var(--farbe-orange-navy-hover);
}

/* == chips == */
.bx-trust-pillen--chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-16) var(--abstand-28);
  max-width: 1180px;
  margin: var(--abstand-20) auto 0;
  padding: var(--abstand-20) var(--abstand-26);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
}

.bx-trust-pillen--chips .bx-trust-pillen__label {
  margin-inline-end: var(--abstand-6);
  color: var(--farbe-gruen);
}

.bx-trust-pillen--chips .bx-trust-pillen__liste {
  gap: var(--abstand-10);
}

.bx-trust-pillen__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--abstand-14);
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-pille);
  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);
  white-space: nowrap;
}

.bx-trust-pillen__chip--hervorgehoben {
  border-color: var(--farbe-mint-rand);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

.bx-trust-pillen--start.bx-trust-pillen--chips {
  justify-content: space-between;
}

.bx-trust-pillen__chiplink {
  flex: none;
  margin: 0;
}

/* == liste == */
.bx-trust-pillen--liste {
  padding: var(--abstand-block-gross) var(--seitenrand) var(--abstand-68);
  border-top: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-weiss);
}

.bx-trust-pillen__titel {
  margin: 0 0 var(--abstand-22);
  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);
  text-transform: uppercase;
}

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

.bx-trust-pillen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--abstand-22) var(--abstand-28);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-trust-pillen__eintragstitel {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-10);
  margin: 0 0 var(--abstand-6);
  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-trust-pillen__eintragstitel .bx-icon-kreis {
  flex: none;
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen);
}

.bx-trust-pillen__text {
  margin: 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);
}

/* Liste: Beschreibungstext ausbalanciert, „Go-live“ bleibt zusammen (Ph12 Design-Abgleich; Design `Startseite v6`,
   Abschnitt Sicherheit; nur die Startseite nutzt `variante: liste`, andere Seiten haben im Design keine solche Liste) */
.bx-trust-pillen--liste .bx-trust-pillen__text {
  text-wrap: balance;
}

.bx-trust-pillen__ohne-umbruch {
  white-space: nowrap;
}

.bx-trust-pillen__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-12) var(--abstand-26);
  margin: var(--abstand-28) 0 0;
}

/* == Siegel mit Gesellschaftszeile (E23, N4-55) == */
.bx-trust-pillen__eintrag--siegel {
  align-items: flex-start;
}

.bx-trust-pillen__eintrag--siegel .bx-trust-pillen__punkt {
  margin-block-start: var(--abstand-5);
}

.bx-trust-pillen__siegel {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.bx-trust-pillen__siegel .bx-trust-pillen__link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.bx-trust-pillen__gesellschaft {
  display: block;
  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);
}

.bx-trust-pillen--navy-zeile .bx-trust-pillen__gesellschaft {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-trust-pillen__eintragstitel .bx-trust-pillen__gesellschaft {
  font-weight: var(--schrift-trust-text-gewicht);
}

.bx-trust-pillen__gesellschaft--inline {
  color: var(--farbe-mikrotext);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.bx-trust-pillen__chip--hervorgehoben .bx-trust-pillen__gesellschaft--inline {
  color: inherit;
}

.bx-trust-pillen__link:hover .bx-trust-pillen__gesellschaft,
[data-sg-zustand="hover"] .bx-trust-pillen__link .bx-trust-pillen__gesellschaft {
  color: inherit;
}

@media (width < 768px) {
  .bx-trust-pillen--navy-zeile {
    margin-block-start: var(--abstand-48);
  }

  .bx-trust-pillen--liste {
    padding-block-start: var(--abstand-42);
  }

  .bx-trust-pillen__raster {
    gap: var(--abstand-22) var(--abstand-20);
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9 Teil 1: `chips` mit `icon` bzw. `integration` (N11-11; Design `Loesung Finanzen v4` Hero Z. 80–84) ==
 * Chip mit Icon: Kachel-Fläche, Radius 12, Polster 7/14/7/7, davor ein weißes 28-px-Feld (Radius 8). Ohne Icon greift
 * keine dieser Regeln.
 */
.bx-trust-pillen__chip--icon {
  gap: var(--abstand-10);
  height: auto;
  padding: var(--abstand-7) var(--abstand-14) var(--abstand-7) var(--abstand-7);
  border-color: var(--farbe-linie);
  border-radius: var(--radius-promo);
  background-color: var(--farbe-flaeche-kachel);
}

.bx-trust-pillen__chip--icon .bx-trust-pillen__link {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-10);
}

.bx-trust-pillen__chip-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-app-karte);
  background-color: var(--farbe-weiss);
}

.bx-trust-pillen__chip-icon img {
  display: block;
  inline-size: 18px;
  block-size: 18px;
  object-fit: contain;
}

/* Startseite v6 (V-A-rahmen-14): H2 der Abschnitte „Was Ihre IT …“ und „Häufige Fragen“ in der Startseiten-Stufe 40/1,12;
   nur auf der Seite mit dem Umschalter pain-points (nachfolgende Abschnitte), andere Seiten behalten die Standard-H2 */
.bx-abschnitt:has(.bx-umschalter--pain-points) ~ .bx-abschnitt .bx-trust-pillen--liste .bx-sektionskopf__titel,
.bx-abschnitt:has(.bx-umschalter--pain-points) ~ .bx-abschnitt .bx-faq__innen .bx-sektionskopf__titel {
  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);
}

/*
 * Baustein „logoleiste“ (Teilplan D3 §5.2, E20): statische, umbrechende Reihe mit den Maßen des Laufbands; einfarbig
 * auf Navy wie das einfarbige Laufband. Höhe je Logo aus der Wertetabelle.
 */
.bx-logoleiste {
  padding: var(--abstand-30) 0 var(--abstand-34);
  border-block: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-weiss);
}

.bx-logoleiste--mitte {
  text-align: center;
}

.bx-logoleiste--einfarbig {
  padding: var(--abstand-26) 0;
  border-block: 0;
  background-color: var(--farbe-navy);
}

.bx-logoleiste__titel {
  padding-inline: var(--seitenrand);
}

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

.bx-logoleiste--mitte .bx-logoleiste__liste {
  justify-content: center;
}

.bx-logoleiste--einfarbig .bx-logoleiste__liste {
  gap: var(--abstand-24) var(--abstand-60);
}

/* Logo: Höhe aus dem Wertetabellen-Block, Graustufen per Filter (nicht einfarbig) */
.bx-logoleiste__logo img {
  display: block;
  inline-size: auto;
  block-size: var(--bx-logo-hoehe);
  max-inline-size: none;
  filter: brightness(0) saturate(0);
  opacity: .5;
  transition: opacity var(--bewegung-dauer-kurz);
}

.bx-logoleiste__logo:hover img,
.bx-logoleiste__logo:focus-within img {
  opacity: .85;
}

.bx-logoleiste--einfarbig .bx-logoleiste__logo img {
  filter: none;
  opacity: .72;
}

.bx-logoleiste__titel {
  margin: 0 0 var(--abstand-22);
  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);
}

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

.bx-logoleiste--einfarbig .bx-logoleiste__titel {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-logoleiste--einfarbig .bx-logoleiste__titel a:hover {
  color: var(--farbe-weiss);
}

@media (width < 768px) {
  .bx-logoleiste__liste {
    gap: var(--abstand-20) var(--abstand-24);
  }
}

/* Wertetabelle (E1, CSP): Logohöhe 8 bis 64 px aus data-bx-hoehe */
[data-bx-hoehe="8"] {
  --bx-logo-hoehe: 8px;
}

[data-bx-hoehe="9"] {
  --bx-logo-hoehe: 9px;
}

[data-bx-hoehe="10"] {
  --bx-logo-hoehe: 10px;
}

[data-bx-hoehe="11"] {
  --bx-logo-hoehe: 11px;
}

[data-bx-hoehe="12"] {
  --bx-logo-hoehe: 12px;
}

[data-bx-hoehe="13"] {
  --bx-logo-hoehe: 13px;
}

[data-bx-hoehe="14"] {
  --bx-logo-hoehe: 14px;
}

[data-bx-hoehe="15"] {
  --bx-logo-hoehe: 15px;
}

[data-bx-hoehe="16"] {
  --bx-logo-hoehe: 16px;
}

[data-bx-hoehe="17"] {
  --bx-logo-hoehe: 17px;
}

[data-bx-hoehe="18"] {
  --bx-logo-hoehe: 18px;
}

[data-bx-hoehe="19"] {
  --bx-logo-hoehe: 19px;
}

[data-bx-hoehe="20"] {
  --bx-logo-hoehe: 20px;
}

[data-bx-hoehe="21"] {
  --bx-logo-hoehe: 21px;
}

[data-bx-hoehe="22"] {
  --bx-logo-hoehe: 22px;
}

[data-bx-hoehe="23"] {
  --bx-logo-hoehe: 23px;
}

[data-bx-hoehe="24"] {
  --bx-logo-hoehe: 24px;
}

[data-bx-hoehe="25"] {
  --bx-logo-hoehe: 25px;
}

[data-bx-hoehe="26"] {
  --bx-logo-hoehe: 26px;
}

[data-bx-hoehe="27"] {
  --bx-logo-hoehe: 27px;
}

[data-bx-hoehe="28"] {
  --bx-logo-hoehe: 28px;
}

[data-bx-hoehe="29"] {
  --bx-logo-hoehe: 29px;
}

[data-bx-hoehe="30"] {
  --bx-logo-hoehe: 30px;
}

[data-bx-hoehe="31"] {
  --bx-logo-hoehe: 31px;
}

[data-bx-hoehe="32"] {
  --bx-logo-hoehe: 32px;
}

[data-bx-hoehe="33"] {
  --bx-logo-hoehe: 33px;
}

[data-bx-hoehe="34"] {
  --bx-logo-hoehe: 34px;
}

[data-bx-hoehe="35"] {
  --bx-logo-hoehe: 35px;
}

[data-bx-hoehe="36"] {
  --bx-logo-hoehe: 36px;
}

[data-bx-hoehe="37"] {
  --bx-logo-hoehe: 37px;
}

[data-bx-hoehe="38"] {
  --bx-logo-hoehe: 38px;
}

[data-bx-hoehe="39"] {
  --bx-logo-hoehe: 39px;
}

[data-bx-hoehe="40"] {
  --bx-logo-hoehe: 40px;
}

[data-bx-hoehe="41"] {
  --bx-logo-hoehe: 41px;
}

[data-bx-hoehe="42"] {
  --bx-logo-hoehe: 42px;
}

[data-bx-hoehe="43"] {
  --bx-logo-hoehe: 43px;
}

[data-bx-hoehe="44"] {
  --bx-logo-hoehe: 44px;
}

[data-bx-hoehe="45"] {
  --bx-logo-hoehe: 45px;
}

[data-bx-hoehe="46"] {
  --bx-logo-hoehe: 46px;
}

[data-bx-hoehe="47"] {
  --bx-logo-hoehe: 47px;
}

[data-bx-hoehe="48"] {
  --bx-logo-hoehe: 48px;
}

[data-bx-hoehe="49"] {
  --bx-logo-hoehe: 49px;
}

[data-bx-hoehe="50"] {
  --bx-logo-hoehe: 50px;
}

[data-bx-hoehe="51"] {
  --bx-logo-hoehe: 51px;
}

[data-bx-hoehe="52"] {
  --bx-logo-hoehe: 52px;
}

[data-bx-hoehe="53"] {
  --bx-logo-hoehe: 53px;
}

[data-bx-hoehe="54"] {
  --bx-logo-hoehe: 54px;
}

[data-bx-hoehe="55"] {
  --bx-logo-hoehe: 55px;
}

[data-bx-hoehe="56"] {
  --bx-logo-hoehe: 56px;
}

[data-bx-hoehe="57"] {
  --bx-logo-hoehe: 57px;
}

[data-bx-hoehe="58"] {
  --bx-logo-hoehe: 58px;
}

[data-bx-hoehe="59"] {
  --bx-logo-hoehe: 59px;
}

[data-bx-hoehe="60"] {
  --bx-logo-hoehe: 60px;
}

[data-bx-hoehe="61"] {
  --bx-logo-hoehe: 61px;
}

[data-bx-hoehe="62"] {
  --bx-logo-hoehe: 62px;
}

[data-bx-hoehe="63"] {
  --bx-logo-hoehe: 63px;
}

[data-bx-hoehe="64"] {
  --bx-logo-hoehe: 64px;
}

/*
 * Abschnittstyp „kostenkarten“ (Vertrag Ph11 §3.3.6, Teilplan M1b E2, E3; Design „Allgemein Rollen-Seiten“ „Problem“):
 * Kopf und drei Karten in einer Rasterzeile (Subgrid: Etikett, Titel, Text, Grafik und Zahl liegen auf einer Linie),
 * Karte 3 Navy. Die Mini-Grafik ist dekorativ (segmente, zeitleiste, tabelle, kette); Höhen und Spalten kommen aus
 * Datenattributen, nie aus style-Attributen. Statisch; Hover nur ohne reduzierte Bewegung. Nur Tokens; Stufen nur
 * 768px und 1080px.
 */

.bx-kostenkarten {
  padding: var(--abstand-48) var(--seitenrand);
}

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

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

.bx-kostenkarten__kopf {
  max-inline-size: 760px; /* Breite laut Design */
  margin-block-end: var(--abstand-28);
}

.bx-kostenkarten__kopf .bx-sektionskopf__eyebrow {
  color: var(--farbe-orange-text);
}

.bx-kostenkarten__karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); /* Mindestbreite laut Design */
  grid-auto-rows: auto;
  gap: var(--abstand-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-kostenkarten__karte {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 0;
  overflow: hidden;
  padding: var(--abstand-26) var(--abstand-28) var(--abstand-28);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-widget);
  transition: transform var(--bewegung-dauer-kurz) var(--bewegung-kurve),
    box-shadow var(--bewegung-dauer-kurz) var(--bewegung-kurve);
}

.bx-kostenkarten__karte[data-bx-etikett="risiko"] {
  border-color: var(--farbe-app-etikett-orange-flaeche);
  background-color: var(--farbe-orange-karte);
}

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

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bx-kostenkarten__karte:hover {
    transform: translateY(var(--bewegung-lift));
    box-shadow: var(--schatten-karte-hover);
  }
}

.bx-kostenkarten__etikett {
  justify-self: start;
  align-self: start;
  margin: 0 0 var(--abstand-18);
  padding: var(--abstand-5) var(--abstand-9);
  border-radius: var(--radius-chip);
  background-color: var(--farbe-orange-etikett);
  color: var(--farbe-app-etikett-orange-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-kostenkarten__karte[data-bx-etikett="risiko"] .bx-kostenkarten__etikett {
  background-color: var(--farbe-weiss);
}

.bx-kostenkarten__karte[data-flaeche="navy"] .bx-kostenkarten__etikett {
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-kostenkarten__titel {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-navy);
  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);
  text-wrap: pretty;
}

.bx-kostenkarten__text {
  margin: 0 0 var(--abstand-22);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  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);
  text-wrap: pretty;
}

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

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

/* == Zahl == */

.bx-kostenkarten__zahl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-8);
  margin: var(--abstand-20) 0 0;
  padding-block-start: var(--abstand-18);
  border-block-start: 1px solid var(--farbe-linie-karte);
}

.bx-kostenkarten__karte[data-bx-etikett="risiko"] .bx-kostenkarten__zahl {
  border-block-start-color: var(--farbe-app-etikett-orange-flaeche);
}

.bx-kostenkarten__karte[data-flaeche="navy"] .bx-kostenkarten__zahl {
  border-block-start-color: var(--farbe-navy-linie);
}

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

.bx-kostenkarten__zahl[data-bx-wort] .bx-kostenkarten__wert {
  font-size: var(--schrift-h3-gross-groesse);
  line-height: var(--schrift-h3-gross-zeile);
  letter-spacing: var(--schrift-h3-gross-laufweite);
}

.bx-kostenkarten__einheit {
  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);
}

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

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

/* == Mini-Grafik (dekorativ) == */

.bx-kostenkarten__grafik {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--abstand-6);
  padding: var(--abstand-16);
  border: 1px solid var(--farbe-linie-sektion);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-weiss);
  min-inline-size: 0;
}

.bx-kostenkarten__zeile {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr); /* Beschriftungsspalte laut Design */
  gap: var(--abstand-8);
  align-items: center;
}

.bx-kostenkarten__beschriftung,
.bx-kostenkarten__fuss,
.bx-kostenkarten__anfang,
.bx-kostenkarten__ende {
  margin: 0;
  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-fussnote-zeile);
}

.bx-kostenkarten__zellen {
  display: flex;
  gap: 3px; /* Design */
}

.bx-kostenkarten__zelle {
  flex: 1 1 0;
  block-size: 14px;
  min-inline-size: 0;
  border-radius: var(--radius-mini);
  background-color: var(--farbe-flaeche-toggle);
}

.bx-kostenkarten__zelle[data-bx-gefuellt] {
  background-color: var(--farbe-orange-flaeche);
}

.bx-kostenkarten__grafik[data-bx-art="segmente"] .bx-kostenkarten__fuss {
  margin-block-start: var(--abstand-4);
}

/* Zeitleiste: zwölf Säulen, Höhe über data-bx-stufe */
.bx-kostenkarten__saeulen {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--abstand-4);
  align-items: end;
  block-size: 62px; /* Höhe laut Design */
}

.bx-kostenkarten__saeule {
  display: block;
  border-radius: var(--radius-mini) var(--radius-mini) 0 0;
  background: linear-gradient(180deg, var(--farbe-diagramm-orange-1), var(--farbe-orange-flaeche));
}

.bx-kostenkarten__saeule[data-bx-stufe="1"] { block-size: 8%; }
.bx-kostenkarten__saeule[data-bx-stufe="2"] { block-size: 17%; }
.bx-kostenkarten__saeule[data-bx-stufe="3"] { block-size: 25%; }
.bx-kostenkarten__saeule[data-bx-stufe="4"] { block-size: 33%; }
.bx-kostenkarten__saeule[data-bx-stufe="5"] { block-size: 42%; }
.bx-kostenkarten__saeule[data-bx-stufe="6"] { block-size: 50%; }
.bx-kostenkarten__saeule[data-bx-stufe="7"] { block-size: 58%; }
.bx-kostenkarten__saeule[data-bx-stufe="8"] { block-size: 67%; }
.bx-kostenkarten__saeule[data-bx-stufe="9"] { block-size: 75%; }
.bx-kostenkarten__saeule[data-bx-stufe="10"] { block-size: 83%; }
.bx-kostenkarten__saeule[data-bx-stufe="11"] { block-size: 92%; }
.bx-kostenkarten__saeule[data-bx-stufe="12"] { block-size: 100%; }

.bx-kostenkarten__achse {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-10);
  margin: var(--abstand-10) 0 0;
}

/* Zeitleiste mit Legende: Sockel grau, Überschuss orange; Höhe des Überschusses über data-bx-oben */
.bx-kostenkarten__saeule[data-bx-gestapelt] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px; /* Design */
  block-size: 100%;
  background: none;
}

.bx-kostenkarten__saeule-sockel {
  display: block;
  block-size: 52%;
  border-radius: 0 0 var(--radius-mini) var(--radius-mini);
  background-color: var(--farbe-diagramm-grundlinie);
}

.bx-kostenkarten__saeule-oben {
  display: block;
  border-radius: var(--radius-mini) var(--radius-mini) 0 0;
  background: linear-gradient(180deg, var(--farbe-diagramm-orange-1), var(--farbe-orange-flaeche));
}

.bx-kostenkarten__saeule-oben[data-bx-oben="1"] { block-size: 10%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="2"] { block-size: 18%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="3"] { block-size: 6%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="4"] { block-size: 24%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="5"] { block-size: 14%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="6"] { block-size: 30%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="7"] { block-size: 12%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="8"] { block-size: 20%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="9"] { block-size: 34%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="10"] { block-size: 16%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="11"] { block-size: 26%; }
.bx-kostenkarten__saeule-oben[data-bx-oben="12"] { block-size: 38%; }

.bx-kostenkarten__legende {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-10);
  margin: var(--abstand-10) 0 0;
  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-fussnote-zeile);
}

.bx-kostenkarten__legende span {
  display: flex;
  align-items: center;
  gap: var(--abstand-6);
}

.bx-kostenkarten__legende span::before {
  content: '';
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  border-radius: var(--radius-element-strich);
  background-color: var(--farbe-orange-flaeche);
}

.bx-kostenkarten__legende [data-bx-farbe="sockel"]::before {
  background-color: var(--farbe-diagramm-grundlinie);
}

/*
 * Tabelle: Spalten über data-bx-spalten. Die dreispaltige Heute-Tabelle (CL: Vertrag | Klausel | Rechnung) zeigt
 * Klausel und Rechnung als Pillen. Unter 324 px Inhaltsbreite (Design: Breite bei 1440) steht der Vertragsname in
 * voller Breite oben, die Pillen darunter. Ohne JavaScript und bei reduzierter Bewegung gilt der Endzustand.
 */
.bx-kostenkarten__grafik[data-bx-art="tabelle"] {
  container-type: inline-size;
  padding-block: var(--abstand-12);
}

.bx-kostenkarten__tabelle {
  display: flex;
  flex-direction: column;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-kostenkarten__tabelle-zeile {
  display: grid;
  gap: var(--abstand-8) var(--abstand-10);
  align-items: center;
  padding-block: var(--abstand-7);
  border-block-end: 1px solid var(--farbe-tabelle-zeile-linie);
  color: var(--farbe-navy);
}

.bx-kostenkarten__tabelle[data-bx-spalten="2"] .bx-kostenkarten__tabelle-zeile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.bx-kostenkarten__tabelle[data-bx-spalten="4"] .bx-kostenkarten__tabelle-zeile {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bx-kostenkarten__tabelle-zeile[data-bx-kopf] {
  padding-block: 0 var(--abstand-6);
  border-block-end-color: var(--farbe-flaeche-toggle);
  color: var(--farbe-mikrotext);
}

.bx-kostenkarten__tabelle-zeile:last-child {
  padding-block-end: 2px; /* Design */
  border-block-end: 0;
}

/* Vertragsname: eine Zeile mit Auslassung */
.bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:first-child {
  overflow: hidden;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tabelle-name-gewicht);
  font-size: var(--schrift-tabelle-name-groesse);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Klausel und Rechnung als Pillen */
.bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:nth-child(n + 2) {
  padding: 3px var(--abstand-8); /* Design */
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-toggle);
  color: var(--farbe-pille-klausel-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: normal;
  white-space: nowrap;
}

.bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:last-child {
  background-color: var(--farbe-app-etikett-orange-flaeche);
  color: var(--farbe-app-etikett-orange-text);
}

@container (inline-size < 324px) { /* Umbruchbreite der Heute-Tabelle laut Design (TAB_UMBRUCH) */
  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile[data-bx-kopf] > span:nth-child(n + 2) {
    display: none;
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:first-child {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile[data-bx-kopf] {
    font-size: var(--schrift-widget-pille-groesse);
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:nth-child(n + 2) {
    font-size: var(--schrift-widget-pille-groesse);
  }
}

/* Mobil-Design der Heute-Tabelle: zwei gleiche Spalten, Kopf vollständig, Name einzeilig, Pillen ohne Vergrößerung */
@media (width < 768px) {
  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile[data-bx-kopf] {
    font-size: var(--schrift-label-groesse);
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile[data-bx-kopf] > span:nth-child(n + 2) {
    display: block;
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:first-child {
    grid-column: auto;
    white-space: nowrap;
  }

  .bx-kostenkarten__tabelle[data-bx-spalten="3"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:nth-child(n + 2) {
    font-size: var(--schrift-label-groesse);
  }
}

/*
 * Versetztes Einblenden von „alter Preis“ (Design: dcFeld, 0,4 s, Verzögerung 0,4 / 0,7 / 1 s): Das Modul
 * „tabelle-einblenden“ setzt data-bx-einblenden auf „warten“ und beim Sichtbarwerden auf „ein“. Ohne das Modul gibt es
 * keine Animation.
 */
@keyframes bx-kostenkarten-feld {
  from { background-color: var(--farbe-flaeche-toggle); }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.bx-kostenkarten, .bx-kostenkarten__grafik)[data-bx-einblenden="warten"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:last-child {
    background-color: var(--farbe-flaeche-toggle);
  }

  :is(.bx-kostenkarten, .bx-kostenkarten__grafik)[data-bx-einblenden="ein"] .bx-kostenkarten__tabelle-zeile:not([data-bx-kopf]) > span:last-child {
    animation: bx-kostenkarten-feld var(--bewegung-tabelle-feld-dauer) both;
  }

  :is(.bx-kostenkarten, .bx-kostenkarten__grafik)[data-bx-einblenden="ein"] .bx-kostenkarten__tabelle-zeile:nth-child(2) > span:last-child {
    animation-delay: var(--bewegung-tabelle-feld-versatz-1);
  }

  :is(.bx-kostenkarten, .bx-kostenkarten__grafik)[data-bx-einblenden="ein"] .bx-kostenkarten__tabelle-zeile:nth-child(3) > span:last-child {
    animation-delay: var(--bewegung-tabelle-feld-versatz-2);
  }

  :is(.bx-kostenkarten, .bx-kostenkarten__grafik)[data-bx-einblenden="ein"] .bx-kostenkarten__tabelle-zeile:nth-child(4) > span:last-child {
    animation-delay: var(--bewegung-tabelle-feld-versatz-3);
  }
}

/* Kette: Punkt, Text, Pille; Linie hinter den Punkten */
.bx-kostenkarten__kette {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-kostenkarten__kette::before {
  content: '';
  position: absolute;
  inset-block: var(--abstand-8);
  inset-inline-start: 4.5px; /* Design */
  inline-size: 1px;
  background-color: var(--farbe-linie);
}

.bx-kostenkarten__glied {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--abstand-10);
}

.bx-kostenkarten__glied-punkt {
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
}

.bx-kostenkarten__glied[data-bx-stufe="start"] .bx-kostenkarten__glied-punkt {
  background-color: var(--farbe-status-leer);
}

.bx-kostenkarten__glied-text {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tab-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-kostenkarten__glied-unter {
  margin: 0;
  padding: var(--abstand-4) var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-app-etikett-orange-flaeche);
  color: var(--farbe-app-etikett-orange-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-pille-zeile);
}

.bx-kostenkarten__glied[data-bx-stufe="start"] .bx-kostenkarten__glied-unter {
  background-color: var(--farbe-flaeche-toggle);
  color: var(--farbe-mikrotext);
}

/* == Fußnote, Quelle, Aktion == */

.bx-kostenkarten__fussnote,
.bx-kostenkarten__quelle {
  max-inline-size: 900px; /* Breite laut Design */
  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);
  text-wrap: pretty;
}

.bx-kostenkarten__quelle {
  margin-block-start: var(--abstand-6);
}

.bx-kostenkarten__aktion {
  margin: var(--abstand-20) 0 0;
}

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

@media (width < 768px) {
  .bx-kostenkarten {
    padding: var(--abstand-40) var(--abstand-20);
  }

  .bx-kostenkarten__karten {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-kostenkarten__karte {
    grid-template-rows: none;
    grid-row: auto;
    padding-inline: var(--abstand-20);
  }
}

/* Rollen-Designs, Heute: dcFeld ändert nur die Hintergrundfarbe, dcPunkt zusätzlich die Skalierung, dcSaeule wächst
 * von unten (scaleY).
 * Endzustand ohne Modul; Anfangszustand und Animation ausschließlich ohne reduzierte Bewegung.
 */
@keyframes bx-kostenkarten-saeule {
  from { transform: scaleY(0); }
}

@keyframes bx-kostenkarten-punkt {
  from {
    transform: scale(var(--bewegung-kostenkarten-punkt-skala));
    background-color: var(--farbe-linie);
  }
}

.bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zeile:first-child .bx-kostenkarten__zelle {
  background-color: var(--farbe-status-leer);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-kostenkarten[data-bx-variante] {
    --bx-kostenkarten-kurve: var(--bewegung-kostenkarten-kurve);
  }

  .bx-kostenkarten[data-bx-variante="c-level"] {
    --bx-kostenkarten-kurve: var(--bewegung-kostenkarten-kurve-c-level);
  }

  .bx-kostenkarten[data-bx-einblenden="warten"] .bx-kostenkarten__zelle[data-bx-gefuellt] {
    background-color: var(--farbe-flaeche-toggle);
  }

  .bx-kostenkarten[data-bx-einblenden="warten"] .bx-kostenkarten__glied-punkt {
    transform: scale(var(--bewegung-kostenkarten-punkt-skala));
    background-color: var(--farbe-linie);
  }

  .bx-kostenkarten[data-bx-einblenden="ein"] .bx-kostenkarten__zelle[data-bx-gefuellt] {
    animation: bx-kostenkarten-feld var(--bewegung-kostenkarten-feld-dauer) var(--bx-kostenkarten-kurve) both;
    animation-delay: var(--bx-kostenkarten-versatz);
  }

  .bx-kostenkarten[data-bx-einblenden="ein"] .bx-kostenkarten__glied-punkt {
    animation: bx-kostenkarten-punkt var(--bewegung-kostenkarten-punkt-dauer) var(--bx-kostenkarten-kurve) both;
    animation-delay: var(--bx-kostenkarten-versatz);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__zelle[data-bx-versatz="1"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-segment-versatz-1);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__zelle[data-bx-versatz="2"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-segment-versatz-2);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__zelle[data-bx-versatz="3"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-segment-versatz-3);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__zelle[data-bx-versatz="4"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-segment-versatz-4);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__zelle[data-bx-versatz="5"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-segment-versatz-5);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__zelle[data-bx-versatz="6"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-segment-versatz-6);
  }

  .bx-kostenkarten[data-bx-variante="finanzen"] .bx-kostenkarten__zelle[data-bx-versatz="1"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-finanzen-versatz-1);
  }

  .bx-kostenkarten[data-bx-variante="finanzen"] .bx-kostenkarten__zelle[data-bx-versatz="2"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-finanzen-versatz-2);
  }

  .bx-kostenkarten[data-bx-variante="finanzen"] .bx-kostenkarten__zelle[data-bx-versatz="3"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-finanzen-versatz-3);
  }

  .bx-kostenkarten[data-bx-variante="finanzen"] .bx-kostenkarten__zelle[data-bx-versatz="4"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-finanzen-versatz-4);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="1"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-1);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="2"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-2);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="3"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-3);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="4"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-4);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="5"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-5);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="6"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-6);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="7"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-7);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="8"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-8);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="9"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-9);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="10"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-10);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="11"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-11);
  }

  .bx-kostenkarten[data-bx-variante="vertrieb"] .bx-kostenkarten__zelle[data-bx-versatz="12"] {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-vertrieb-versatz-12);
  }

  .bx-kostenkarten[data-bx-einblenden="warten"] :is(.bx-kostenkarten__saeule:not([data-bx-gestapelt]), .bx-kostenkarten__saeule-oben) {
    transform: scaleY(0);
    transform-origin: bottom;
  }

  .bx-kostenkarten[data-bx-einblenden="ein"] :is(.bx-kostenkarten__saeule:not([data-bx-gestapelt]), .bx-kostenkarten__saeule-oben) {
    animation: bx-kostenkarten-saeule var(--bewegung-kostenkarten-saeule-dauer) var(--bewegung-kostenkarten-kurve) both;
    animation-delay: var(--bx-kostenkarten-versatz);
    transform-origin: bottom;
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="1"], .bx-kostenkarten__saeule-oben[data-bx-oben="1"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-1);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="2"], .bx-kostenkarten__saeule-oben[data-bx-oben="2"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-2);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="3"], .bx-kostenkarten__saeule-oben[data-bx-oben="3"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-3);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="4"], .bx-kostenkarten__saeule-oben[data-bx-oben="4"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-4);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="5"], .bx-kostenkarten__saeule-oben[data-bx-oben="5"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-5);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="6"], .bx-kostenkarten__saeule-oben[data-bx-oben="6"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-6);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="7"], .bx-kostenkarten__saeule-oben[data-bx-oben="7"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-7);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="8"], .bx-kostenkarten__saeule-oben[data-bx-oben="8"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-8);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="9"], .bx-kostenkarten__saeule-oben[data-bx-oben="9"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-9);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="10"], .bx-kostenkarten__saeule-oben[data-bx-oben="10"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-10);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="11"], .bx-kostenkarten__saeule-oben[data-bx-oben="11"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-11);
  }

  .bx-kostenkarten[data-bx-variante] :is(.bx-kostenkarten__saeule[data-bx-stufe="12"], .bx-kostenkarten__saeule-oben[data-bx-oben="12"]) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-saeule-versatz-12);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__glied:nth-child(1) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-punkt-versatz-1);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__glied:nth-child(2) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-punkt-versatz-2);
  }

  .bx-kostenkarten[data-bx-variante] .bx-kostenkarten__glied:nth-child(3) {
    --bx-kostenkarten-versatz: var(--bewegung-kostenkarten-punkt-versatz-3);
  }
}

/*
 * Abschnittstyp „umschalter“, Variante `stunden` (Vertrag Ph8 §3.4.8, Teilplan H0b E5–E9, §8.1, §8.5; Design CRM Sales
 * v2 „Vorher Nachher“): Schalter mit Wackeln am Knopf „ohne“ (nur CSS, Sichtpause über data-bx-sicht), Zeilen mit
 * Balken (`data-bx-prozent`, Achse waagrecht), Geist schraffiert im Zustand „mit“, Panel weiß ⇒ Navy.
 */
.bx-umschalter {
  padding: var(--abstand-64) var(--seitenrand);
  border-block-end: 1px solid var(--farbe-linie-sektion);
  font-family: var(--schrift-familie-text);
}

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

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

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

.bx-umschalter__kopf {
  margin-block-end: var(--abstand-20);
}

/* Kopf links, Schalter rechts, unten bündig (P-H1B-H0B-3, Design CRM <Paket> v2 „Vorher Nachher“) */
.bx-umschalter__leiste {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-48);
  margin-block-end: var(--abstand-36);
}

.bx-umschalter__leiste > .bx-umschalter__kopf {
  min-inline-size: 0;
  margin-block-end: 0;
}

.bx-umschalter__leiste > .bx-umschalter__schalter {
  flex: none;
  margin-block-end: 0;
}

.bx-umschalter__schalter {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-4);
  margin-block-end: var(--abstand-36);
  padding: var(--abstand-4);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-toggle);
}

.bx-umschalter__knopf {
  padding: var(--abstand-10) var(--abstand-18);
  border: 0;
  border-radius: var(--radius-pille);
  background-color: transparent;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-fuss-recht-groesse);
  cursor: pointer;
  transition: background-color var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz);
}

.bx-umschalter__knopf[aria-pressed="true"] {
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
  box-shadow: var(--schatten-app);
}

.bx-umschalter__knopf[data-wert="mit"][aria-pressed="true"] {
  background-color: var(--farbe-mint-akzent);
  color: var(--farbe-weiss);
}

/* Ph12 Design-Abgleich (V-C-crm-6): Schalterfläche mit Innenschatten, „Mit Paket“ grün, Hinweis links vom Schalter (CRM Sales v2 Z. 196–200) */
.bx-umschalter--stunden .bx-umschalter__schalter {
  background-color: var(--farbe-flaeche-hinweis-hover);
  box-shadow: var(--schatten-schalter-innen);
}

.bx-umschalter__knopf[data-wert="mit"][aria-pressed="false"] {
  color: var(--farbe-gruen);
}

.bx-umschalter__leiste > .bx-umschalter__zeilen-steuerung {
  flex: none;
}

.bx-umschalter__zeilen-steuerung > .bx-umschalter__schalter {
  margin-block-end: 0;
}

.bx-umschalter--stunden:has(.bx-umschalter__knopf[data-wert="mit"][aria-pressed="true"]) .bx-umschalter__zeilen-hinweis {
  visibility: hidden;
}

.bx-umschalter__knopf[data-wert="ohne"][aria-pressed="true"] {
  animation: bx-umschalter-wackeln 2.6s ease-in-out infinite;
}

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

@keyframes bx-umschalter-wackeln {
  0%,
  70%,
  100% {
    translate: 0 0;
  }

  80% {
    translate: 3px 0;
  }

  90% {
    translate: -2px 0;
  }
}

.bx-umschalter__flaeche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--abstand-32);
  align-items: start;
}

.bx-umschalter__liste {
  padding: var(--abstand-32) var(--abstand-34) var(--abstand-28);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
}

.bx-umschalter__listenkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-20);
  margin: 0 0 var(--abstand-26);
  padding-block-end: var(--abstand-20);
  border-block-end: 1px solid var(--farbe-flaeche-toggle);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-umschalter__zeilen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-26);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-umschalter__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--abstand-20);
  align-items: baseline;
}

.bx-umschalter__aufgabe {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 var(--abstand-11);
  color: var(--farbe-navy);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-person-name-groesse);
}

.bx-umschalter__balken {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  block-size: 16px;
  overflow: hidden;
  border-radius: var(--radius-klein);
  background-color: var(--farbe-flaeche-kachel);
}

.bx-umschalter__balken > span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--bx-prozent);
  border-radius: var(--radius-klein);
  transition: inline-size 0.45s var(--bewegung-kurve), opacity 0.45s var(--bewegung-kurve);
}

.bx-umschalter__geist {
  background: repeating-linear-gradient(45deg, var(--farbe-linie) 0 2px, var(--farbe-flaeche-toggle) 2px 14px);
  opacity: 0;
}

.bx-umschalter__ohne {
  background-color: var(--farbe-kette-graublau);
}

.bx-umschalter__mit {
  background-color: var(--farbe-mint-akzent);
  opacity: 0;
}

.bx-umschalter:has([data-bx-umschalter-knopf][data-wert="mit"][aria-pressed="true"]) .bx-umschalter__geist,
.bx-umschalter:has([data-bx-umschalter-knopf][data-wert="mit"][aria-pressed="true"]) .bx-umschalter__mit {
  opacity: 1;
}

.bx-umschalter:has([data-bx-umschalter-knopf][data-wert="mit"][aria-pressed="true"]) .bx-umschalter__ohne {
  opacity: 0;
}

/*
 * Feinabgleich H1b (Design CRM <Paket> v2): Zahl in der Titelzeile rechts neben der Aufgabe, Zeilentext und Modul-Etikett
 * unter dem Balken. Stapel und Zustände übernehmen die Spuren der Zeile als Subgrid; der Höhenstapel bleibt (alle
 * Zustände in denselben Zellen, `grid-area` überschreibt `hoehe.css`).
 */
.bx-umschalter__stapel {
  display: grid;
  grid-area: 1 / 1 / 4 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  pointer-events: none;
}

.bx-umschalter__stapel > .bx-umschalter__zustand {
  display: grid;
  grid-area: 1 / 1 / 4 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  align-items: baseline;
}

.bx-umschalter__zahl {
  grid-column: 2;
  grid-row: 1;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-stark-gewicht);
  font-size: var(--schrift-trust-titel-groesse);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.bx-umschalter__zustand[data-wert="mit"] .bx-umschalter__zahl {
  color: var(--farbe-gruen);
}

.bx-umschalter__zeilentext {
  grid-column: 1;
  grid-row: 3;
  margin: var(--abstand-10) 0 0;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-fuss-text-gewicht);
  font-size: var(--schrift-fuss-text-groesse);
  line-height: var(--schrift-trust-text-zeile);
}

.bx-umschalter__modul {
  grid-column: 2;
  grid-row: 3;
  margin: var(--abstand-10) 0 0;
  text-align: end;
  color: var(--farbe-mint-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-widget-wert-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
  text-transform: uppercase;
}

.bx-umschalter__panel {
  padding: var(--abstand-32) var(--abstand-30);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-flaeche-toggle);
  color: var(--farbe-navy);
  transition: background-color 0.28s var(--bewegung-kurve), color 0.28s var(--bewegung-kurve);
}

.bx-umschalter:has([data-bx-umschalter-knopf][data-wert="mit"][aria-pressed="true"]) .bx-umschalter__panel {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

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

.bx-umschalter__panel-zustand[data-wert="mit"] .bx-umschalter__kicker {
  color: var(--farbe-mint);
}

.bx-umschalter__summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-8) var(--abstand-14);
  margin: 0 0 var(--abstand-6);
}

/* BW-41: Zahl und „h“ als Gruppe (Design: Abstand 8 px), über der Mobilstufe ohne Umbruch, damit der Zähler weder die
   Streichzahl noch den Text darunter springen lässt */
.bx-umschalter__zahlgruppe {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-8);
  white-space: nowrap;
}

@media (width >= 768px) {
  .bx-umschalter__summe {
    flex-wrap: nowrap;
  }

  .bx-umschalter__streich {
    min-inline-size: 0;
  }
}

.bx-umschalter__panelzahl {
  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-umschalter__einheit {
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-fehler-hinweis-titel-groesse);
}

.bx-umschalter__streich {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Design */
  color: var(--farbe-navy-grau);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-fehler-hinweis-titel-groesse);
}

.bx-umschalter__streich s {
  text-decoration-color: var(--farbe-diagramm-orange-1);
  text-decoration-thickness: 2px;
}

.bx-umschalter__streich span {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-widget-kicker-groesse);
  text-transform: uppercase;
}

.bx-umschalter__team {
  margin: var(--abstand-14) 0 var(--abstand-26);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-fuss-text-groesse);
}

.bx-umschalter__paneltext {
  margin: 0;
  padding-block-start: var(--abstand-22);
  border-block-start: 1px solid var(--farbe-linie);
  font-weight: var(--schrift-trust-text-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-fuss-recht-zeile);
}

.bx-umschalter:has([data-bx-umschalter-knopf][data-wert="mit"][aria-pressed="true"]) .bx-umschalter__team {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-umschalter:has([data-bx-umschalter-knopf][data-wert="mit"][aria-pressed="true"]) .bx-umschalter__paneltext {
  border-block-start-color: var(--farbe-navy-linie);
}

.bx-umschalter__fussnote {
  max-inline-size: 640px;
  margin: var(--abstand-18) 0 0 auto;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

@media (prefers-reduced-motion: reduce) {
  .bx-umschalter__knopf[data-wert="ohne"][aria-pressed="true"] {
    animation: none;
  }
}

@media (width < 1080px) {
  .bx-umschalter__flaeche {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-umschalter {
    padding-block: var(--abstand-40);
  }

  .bx-umschalter__schalter {
    display: grid;
  }

  .bx-umschalter__leiste {
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-14);
  }

  .bx-umschalter__knopf {
    padding-inline: var(--abstand-8);
  }

  .bx-umschalter--stunden .bx-umschalter__zeilen-steuerung {
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-10);
  }

  .bx-umschalter--stunden .bx-umschalter__zeilen-hinweis {
    align-self: flex-start;
  }

  .bx-umschalter__liste {
    padding: var(--abstand-22) var(--abstand-20);
  }
}

/*
 * == Ph8 H1c: Variante `knoten` (Vertrag Ph8 §3.4.8, Teilplan H1c §4.4; Design Warum brainX D3 „Einstieg“) ==
 * Systemvergleich „Heute“ gegen „brainX“ auf Navy: Schalter und Zähler, sechs Knoten je Zustand (Ton je `data-ton`),
 * Verbinder mit pulsierenden Übergabe-Badges bzw. fließender Linie, Legende. Die Endlos-Animationen laufen nur ohne
 * reduzierte Bewegung und halten außer Sicht an (`data-bx-sicht="aus"`, gesetzt von `sichtpause.js`). Raster: sechs
 * Spalten ab `stapeln`, drei darunter, zwei unter `mobil`. Alle Klassen tragen den Namensraum `__knoten-`.
 */
.bx-umschalter--knoten {
  padding: 0;
  border: 0;
  background-color: transparent;
}

.bx-umschalter__knoten-panel {
  position: relative;
  padding: var(--abstand-36) var(--abstand-40) var(--abstand-40);
  border: 1px solid var(--farbe-navy-linie);
  border-radius: var(--radius-box);
  background-color: var(--farbe-navy-hauch);
  color: var(--farbe-weiss);
}

.bx-umschalter--knoten:not([data-flaeche="navy"]) .bx-umschalter__knoten-panel {
  background-color: var(--farbe-navy);
}

/* Ph12 Design-Abgleich: Systemvergleich im Hero steht innerhalb des Seitenrands (Design Warum brainX: Panel in 64 px Rand) */
.bx-hero-navy__unten > .bx-umschalter--knoten {
  margin-inline: var(--seitenrand);
}

.bx-umschalter__knoten-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-24);
  margin-block-end: var(--abstand-40);
}

.bx-umschalter__knoten-schalter {
  display: inline-flex;
  padding: var(--abstand-4);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy-flaeche-zart);
}

.bx-umschalter__knoten-knopf {
  padding: var(--abstand-11) var(--abstand-22);
  border: 0;
  border-radius: var(--radius-pille);
  background-color: transparent;
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  cursor: pointer;
  transition: background-color var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz);
}

.bx-umschalter__knoten-knopf:first-child[aria-pressed="true"] {
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
}

.bx-umschalter__knoten-knopf:last-child[aria-pressed="true"] {
  background-color: var(--farbe-mint-akzent);
  color: var(--farbe-weiss);
}

.bx-umschalter__knoten-zaehler {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-14);
  margin: 0;
}

.bx-umschalter__knoten-zahl {
  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);
  transition: color .3s;
}

.bx-umschalter__knoten-zahl[data-ton="warn"] {
  color: var(--farbe-orange-navy-text);
}

.bx-umschalter__knoten-zahl[data-ton="gut"] {
  color: var(--farbe-mint);
}

.bx-umschalter__knoten-zaehler-text {
  max-inline-size: 180px;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-menue-punkt-gewicht);
  font-size: var(--schrift-menue-punkt-groesse);
  line-height: var(--schrift-kopf-cta-zeile);
}

.bx-umschalter__knoten-liste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--abstand-36) var(--abstand-48);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-umschalter__knoten-eintrag {
  --bx-ton: var(--farbe-navy-grau);
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.bx-umschalter__knoten-eintrag[data-ton="crm"],
.bx-umschalter__knoten-legende-eintrag[data-ton="crm"] {
  --bx-ton: var(--farbe-system-crm);
}

.bx-umschalter__knoten-eintrag[data-ton="tool"],
.bx-umschalter__knoten-legende-eintrag[data-ton="tool"] {
  --bx-ton: var(--farbe-system-tool);
}

.bx-umschalter__knoten-eintrag[data-ton="tabelle"],
.bx-umschalter__knoten-legende-eintrag[data-ton="tabelle"] {
  --bx-ton: var(--farbe-system-tabelle);
}

.bx-umschalter__knoten-eintrag[data-ton="brainx"],
.bx-umschalter__knoten-legende-eintrag[data-ton="brainx"] {
  --bx-ton: var(--farbe-mint-akzent);
}

.bx-umschalter__knoten-eintrag[data-ton="datev"],
.bx-umschalter__knoten-legende-eintrag[data-ton="datev"] {
  --bx-ton: var(--farbe-mint);
}

.bx-umschalter__knoten-legende-eintrag[data-ton="aussen"] {
  --bx-ton: var(--farbe-navy-grau);
}

.bx-umschalter__knoten-legende-eintrag[data-ton="uebergabe"] {
  --bx-ton: var(--farbe-orange-flaeche);
}

.bx-umschalter__knoten-system {
  overflow: hidden;
  margin: 0 0 var(--abstand-10);
  color: var(--bx-ton);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-widget-wert-label-gewicht);
  font-size: var(--schrift-widget-wert-label-groesse);
  line-height: var(--schrift-widget-wert-label-zeile);
  letter-spacing: var(--schrift-widget-wert-label-laufweite);
  min-block-size: 28px;
  overflow-wrap: anywhere;
}

.bx-umschalter__knoten-karte {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  padding: 0 var(--abstand-18) var(--abstand-18);
  border: 1px solid color-mix(in srgb, var(--bx-ton) 40%, transparent);
  border-radius: var(--radius-panel);
  background-color: color-mix(in srgb, var(--bx-ton) 13%, transparent);
}

.bx-umschalter__knoten-eintrag[data-ton="aussen"] .bx-umschalter__knoten-karte {
  border-color: var(--farbe-navy-glas-rand);
  background-color: var(--farbe-navy-hauch);
}

.bx-umschalter__knoten-eintrag[data-ton="brainx"] .bx-umschalter__knoten-karte {
  border-color: color-mix(in srgb, var(--farbe-mint) 40%, transparent);
  background-color: color-mix(in srgb, var(--farbe-mint-akzent) 14%, transparent);
}

.bx-umschalter__knoten-eintrag[data-ton="datev"] .bx-umschalter__knoten-karte {
  border-color: color-mix(in srgb, var(--farbe-mint) 60%, transparent);
  background-color: color-mix(in srgb, var(--farbe-mint) 8%, transparent);
}

.bx-umschalter__knoten-balken {
  display: block;
  block-size: 5px;
  margin: 0 calc(-1 * var(--abstand-18)) var(--abstand-16);
  background-color: var(--bx-ton);
}

.bx-umschalter__knoten-titel {
  min-block-size: 38px;
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-person-name-klein-gewicht);
  font-size: var(--schrift-person-name-klein-groesse);
  line-height: var(--schrift-person-name-klein-zeile);
  overflow-wrap: anywhere;
}

.bx-umschalter__knoten-text {
  min-block-size: 36px;
  margin: 0;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-menue-beschreibung-gewicht);
  font-size: var(--schrift-menue-beschreibung-groesse);
  line-height: var(--schrift-menue-beschreibung-zeile);
}

.bx-umschalter__knoten-wer {
  align-self: flex-start;
  max-inline-size: 100%;
  margin-block-start: var(--abstand-14);
  padding: var(--abstand-4) var(--abstand-9);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy-pille);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-chip-mono-gewicht);
  font-size: var(--schrift-chip-mono-groesse);
  line-height: var(--schrift-pille-zeile);
  letter-spacing: var(--schrift-chip-mono-laufweite);
  overflow-wrap: anywhere;
}

.bx-umschalter__knoten-eintrag[data-ton="brainx"] .bx-umschalter__knoten-wer,
.bx-umschalter__knoten-eintrag[data-ton="datev"] .bx-umschalter__knoten-wer {
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

/* Verbinder: Linie über den Spaltenabstand, im ersten Zustand mit Übergabe-Badge */
.bx-umschalter__knoten-verbinder {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-1 * var(--abstand-48));
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--abstand-48);
}

.bx-umschalter__knoten-linie {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 2px;
  background-size: 28px 2px;
}

.bx-umschalter__knoten-flaeche[data-bx-nr="1"] .bx-umschalter__knoten-linie {
  background-image: repeating-linear-gradient(90deg, var(--farbe-orange-flaeche) 0 10px, transparent 10px 18px);
}

.bx-umschalter__knoten-flaeche[data-bx-nr="2"] .bx-umschalter__knoten-linie {
  background-image: linear-gradient(90deg, var(--farbe-mint-akzent), var(--farbe-mint));
}

.bx-umschalter__knoten-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--radius-rund);
  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-schritt-label-groesse);
  line-height: var(--schrift-pille-zeile);
}

.bx-umschalter__knoten-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--farbe-orange-flaeche);
  border-radius: var(--radius-rund);
  opacity: 0;
  scale: 1.9;
}

.bx-umschalter__knoten-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-22);
  margin: var(--abstand-32) 0 0;
  padding: var(--abstand-22) 0 0;
  border-block-start: 1px solid var(--farbe-navy-linie);
  list-style: none;
}

.bx-umschalter__knoten-legende-eintrag {
  --bx-ton: var(--farbe-navy-grau);
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-menue-beschreibung-gewicht);
  font-size: var(--schrift-menue-beschreibung-groesse);
  line-height: var(--schrift-menue-beschreibung-zeile);
}

.bx-umschalter__knoten-legende-eintrag::before {
  content: '';
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--radius-mini);
  background-color: var(--bx-ton);
}

/* Bewegung: Puls, Fluss und Einblendung nur ohne reduzierte Bewegung; außer Sicht angehalten */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bx-umschalter-knoten-puls {
    from {
      opacity: .6;
      scale: 1;
    }
  }

  @keyframes bx-umschalter-knoten-fluss {
    to {
      background-position: 28px 0;
    }
  }

  @keyframes bx-umschalter-knoten-ein-a {
    from {
      translate: 0 8px;
    }
  }

  @keyframes bx-umschalter-knoten-ein-b {
    from {
      translate: 0 8px;
    }
  }

  .bx-umschalter__knoten-badge::after {
    animation: bx-umschalter-knoten-puls 1.8s ease-out infinite;
  }

  .bx-umschalter__knoten-badge[data-bx-badge="2"]::after {
    animation-delay: .3s;
  }

  .bx-umschalter__knoten-badge[data-bx-badge="3"]::after {
    animation-delay: .6s;
  }

  .bx-umschalter__knoten-badge[data-bx-badge="4"]::after {
    animation-delay: .9s;
  }

  .bx-umschalter__knoten-badge[data-bx-badge="5"]::after {
    animation-delay: 1.2s;
  }

  .bx-umschalter__knoten-flaeche[data-bx-nr="2"] .bx-umschalter__knoten-linie {
    animation: bx-umschalter-knoten-fluss .8s linear infinite;
  }

  .bx-umschalter__knoten-flaeche[data-bx-einblendung="a"] .bx-umschalter__knoten-karte {
    animation: bx-umschalter-knoten-ein-a .35s ease;
  }

  .bx-umschalter__knoten-flaeche[data-bx-einblendung="b"] .bx-umschalter__knoten-karte {
    animation: bx-umschalter-knoten-ein-b .35s ease;
  }

  .bx-umschalter--knoten[data-bx-sicht="aus"] .bx-umschalter__knoten-badge::after,
  .bx-umschalter--knoten[data-bx-sicht="aus"] .bx-umschalter__knoten-linie {
    animation-play-state: paused;
  }
}

@media (width < 1080px) {
  .bx-umschalter__knoten-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* erster Knoten einer Zeile: keine Linie, das Badge sitzt als Eck-Badge am Knoten */
  .bx-umschalter__knoten-eintrag:nth-child(3n + 1) .bx-umschalter__knoten-verbinder {
    inset-inline-start: calc(-1 * var(--abstand-12));
    inset-block: var(--abstand-12) auto;
    inline-size: auto;
    z-index: 2;
  }

  .bx-umschalter__knoten-eintrag:nth-child(3n + 1) .bx-umschalter__knoten-linie {
    display: none;
  }
}

@media (width < 768px) {
  .bx-umschalter__knoten-panel {
    padding: var(--abstand-24) var(--abstand-20) var(--abstand-28);
  }

  .bx-umschalter__knoten-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--abstand-30);
  }

  .bx-umschalter__knoten-verbinder {
    inset-inline-start: calc(-1 * var(--abstand-30));
    inline-size: var(--abstand-30);
  }

  /* zwei Spalten: jeder zweite Knoten beginnt eine Zeile; die Dreierregel oben gilt nicht mehr */
  .bx-umschalter__knoten-eintrag:nth-child(3n + 1):not(:nth-child(2n + 1)) .bx-umschalter__knoten-verbinder {
    inset-inline-start: calc(-1 * var(--abstand-30));
    inset-block: 0;
    inline-size: var(--abstand-30);
  }

  .bx-umschalter__knoten-eintrag:nth-child(3n + 1):not(:nth-child(2n + 1)) .bx-umschalter__knoten-linie {
    display: block;
  }

  .bx-umschalter__knoten-eintrag:nth-child(2n + 1) .bx-umschalter__knoten-verbinder {
    inset-inline-start: calc(-1 * var(--abstand-12));
    inset-block: var(--abstand-28) auto;
    inline-size: auto;
    z-index: 2;
  }

  .bx-umschalter__knoten-eintrag:nth-child(2n + 1) .bx-umschalter__knoten-linie {
    display: none;
  }

  .bx-umschalter__knoten-karte {
    padding-inline: var(--abstand-14);
  }

  .bx-umschalter__knoten-balken {
    margin-inline: calc(-1 * var(--abstand-14));
  }

  .bx-umschalter__knoten-zahl {
    font-size: var(--schrift-zahl-gross-groesse);
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: Variante `zeilen` (§3.4.1, Ä11-13; Design Loesung Vertrieb v3 „Umschalter“, Finanzen v4) ==
 * Schalter `role="switch"` mit beiden Beschriftungen (Stand über `aria-checked`), Karte im Höhenstapel: Zustand 1 hell,
 * Zustand 2 Navy; Kopf mit Chip, drei Zahl-Wort-Paaren und Notiz, darunter fünf Zeilen (Nummer, Label, Text, Pille,
 * Balken = manueller Anteil über `--bx-prozent`). Unter 1080px Text unter dem Label, unter 768px alles
 * untereinander. Der Gradient des Designs ist als Fläche aus Tokens gesetzt (Navy bzw. Weiß).
 */
.bx-umschalter__zeilen-steuerung {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--abstand-12);
}

.bx-umschalter__zeilen-hinweis {
  color: var(--farbe-gruen);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-umschalter__zeilen-schalter {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--abstand-4);
  border: 0;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-toggle);
  cursor: pointer;
}

.bx-umschalter__zeilen-schalter-text {
  padding: var(--abstand-10) var(--abstand-18);
  border-radius: var(--radius-pille);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  transition: background-color var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz);
}

.bx-umschalter__zeilen-schalter[aria-checked="false"] > .bx-umschalter__zeilen-schalter-text:first-child,
.bx-umschalter__zeilen-schalter[aria-checked="true"] > .bx-umschalter__zeilen-schalter-text:last-child {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-umschalter__zeilen-karte {
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte-navy);
}

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

.bx-umschalter__zeilen-zustand[data-bx-nr="2"] {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-umschalter__zeilen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-40);
  padding: var(--abstand-30) var(--abstand-30) var(--abstand-28);
}

.bx-umschalter__zeilen-kopf-links {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-16);
}

.bx-umschalter__zeilen-chip {
  align-self: flex-start;
  margin: 0;
  padding: var(--abstand-6) var(--abstand-14);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-app-chip-rotorange-flaeche);
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-chip {
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-umschalter__zeilen-zaehler {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-10);
  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-umschalter__zeilen-zahl {
  font-variant-numeric: tabular-nums;
}

.bx-umschalter__zeilen-wort,
.bx-umschalter__zeilen-punkt {
  color: var(--farbe-mikrotext);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-wort,
[data-bx-nr="2"] .bx-umschalter__zeilen-punkt,
[data-bx-nr="2"] .bx-umschalter__zeilen-notiz {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-umschalter__zeilen-notiz {
  max-inline-size: 230px;
  padding-inline-start: var(--abstand-26);
  border-inline-start: 1px solid var(--farbe-linie);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-umschalter__zeilen-notiz > p {
  margin: 0;
}

.bx-umschalter__zeilen-legende {
  margin-block-start: var(--abstand-8);
  font-family: var(--schrift-familie-mono);
  font-size: var(--schrift-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

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

.bx-umschalter__zeilen-zeile {
  display: grid;
  grid-template-columns: 58px 196px minmax(0, 1fr) 182px;
  align-items: center;
  padding-block: var(--abstand-18);
  padding-inline-end: var(--abstand-30);
  border-block-start: 1px solid var(--farbe-linie);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-zeile,
[data-bx-nr="2"] .bx-umschalter__zeilen-notiz {
  border-color: var(--farbe-navy-linie);
}

.bx-umschalter__zeilen-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-nr {
  background-color: var(--farbe-mint);
  color: var(--farbe-navy);
}

.bx-umschalter__zeilen-label {
  margin: 0;
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-button-groesse);
}

.bx-umschalter__zeilen-text {
  margin: 0;
  padding-inline: var(--abstand-15) var(--abstand-24);
  border-inline-start: 2px solid var(--farbe-linie);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
}

.bx-umschalter__zeilen-text > strong {
  color: var(--farbe-navy);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-text {
  border-color: var(--farbe-mint);
  color: var(--farbe-navy-text-hell);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-text > strong {
  color: var(--farbe-weiss);
}

.bx-umschalter__zeilen-mass {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-8);
}

.bx-umschalter__zeilen-pille {
  margin: 0;
  padding: var(--abstand-5) var(--abstand-13);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-app-chip-rotorange-flaeche);
  color: var(--farbe-orange-text);
  font-weight: var(--schrift-trust-chip-gewicht);
  font-size: var(--schrift-trust-chip-groesse);
  white-space: nowrap;
}

[data-bx-nr="2"] .bx-umschalter__zeilen-pille {
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-umschalter__zeilen-spur {
  display: block;
  inline-size: 100%;
  block-size: 6px;
  overflow: hidden;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-linie);
}

.bx-umschalter__zeilen-balken {
  display: block;
  inline-size: var(--bx-prozent, 0%);
  block-size: 100%;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-orange-flaeche);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-spur {
  background-color: var(--farbe-navy-linie);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-balken {
  background-color: var(--farbe-mint);
}

.bx-umschalter__zeilen-daneben {
  margin-block-start: var(--abstand-44);
}

@media (width < 1080px) {
  .bx-umschalter__zeilen-zeile {
    grid-template-columns: 58px minmax(0, 1fr) 182px;
    row-gap: var(--abstand-8);
  }

  .bx-umschalter__zeilen-text {
    grid-column: 2 / 3;
  }
}

@media (width < 768px) {
  .bx-umschalter--zeilen .bx-umschalter__leiste {
    flex-direction: column;
    align-items: flex-start;
  }

  .bx-umschalter__zeilen-kopf {
    padding: var(--abstand-24) var(--abstand-20);
  }

  .bx-umschalter__zeilen-zeile {
    grid-template-columns: 44px minmax(0, 1fr);
    padding-inline-end: var(--abstand-20);
  }

  .bx-umschalter__zeilen-text,
  .bx-umschalter__zeilen-mass {
    grid-column: 2 / 3;
  }

  .bx-umschalter__zeilen-notiz {
    max-inline-size: none;
  }
}

/*
 * == Ph11 V-9: Variante `pain-points` (§3.4.1, §3.6.2 S2, N11-11; Design Startseite v6 Z. 215–311) ==
 * Segmentknöpfe wie `stunden`; Karten im Raster auto-fit ab 320px, Bildfläche 150px mit Mini-Grafik je Zustand
 * (Höhenstapel, `aria-hidden`); beide Absätze bleiben lesbar, der zum Stand passende ist betont (Navy bzw. Grün).
 */
.bx-umschalter__pain-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--abstand-20);
}
@media (width < 1080px) {
  .bx-umschalter__pain-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 768px) {
  .bx-umschalter__pain-raster { grid-template-columns: minmax(0, 1fr); }
}


.bx-umschalter__pain-karte {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-24) var(--abstand-24) var(--abstand-26);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-flaeche-karte);
}

.bx-umschalter__pain-bild {
  block-size: 150px;
  padding: var(--abstand-16);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-weiss);
}

.bx-umschalter__pain-grafik-zustand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bx-umschalter__pain-grafik {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-12);
  font-family: var(--schrift-familie-app);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
}

.bx-umschalter__pain-teile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-6);
}

[data-art="chips"] > .bx-umschalter__pain-teile {
  display: grid;
  grid-template-columns: repeat(2, 96px);
  gap: var(--abstand-22) var(--abstand-34);
}

[data-art="chips"] .bx-umschalter__pain-teil {
  padding-block: var(--abstand-8);
  border: 1.5px dashed var(--farbe-app-fehler);
  border-radius: var(--radius-chip);
  background-color: var(--farbe-vorschau-rot-flaeche);
  color: var(--farbe-app-text);
  text-align: center;
}

[data-art="chips"] > .bx-umschalter__pain-band {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  background-color: var(--farbe-app-fehler);
  color: var(--farbe-weiss);
}

[data-art="kette"] > .bx-umschalter__pain-teile {
  padding: var(--abstand-6);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy);
}

[data-art="kette"] .bx-umschalter__pain-teil {
  padding: var(--abstand-6) var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy-pille);
  color: var(--farbe-weiss);
}

[data-art="kette"] .bx-umschalter__pain-teil:last-child {
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-umschalter__pain-band {
  padding: var(--abstand-4) var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  white-space: nowrap;
}

.bx-umschalter__pain-zellen {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  gap: var(--abstand-4);
  font-family: var(--schrift-familie-mono);
}

.bx-umschalter__pain-zelle {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 20px;
  background-color: var(--farbe-flaeche-band);
}

.bx-umschalter__pain-zelle[data-fehler] {
  background-color: var(--farbe-vorschau-rot-flaeche);
  color: var(--farbe-vorschau-rot-text);
}

[data-art="monatsachse"] > .bx-umschalter__pain-teile {
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: var(--abstand-10);
  block-size: 100px;
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-vorschau-monat-gewicht);
  font-size: var(--schrift-vorschau-monat-groesse);
}

[data-art="monatsachse"] .bx-umschalter__pain-teil {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--abstand-5);
}

[data-art="monatsachse"] .bx-umschalter__pain-teil::after {
  content: "";
  inline-size: 26px;
  block-size: var(--bx-saeule, 44px);
  border-radius: var(--radius-mini) var(--radius-mini) 0 0;
  background-color: var(--farbe-mint-akzent);
}

/* Säulenhöhen und Prognose-Schraffur der letzten zwei Monate wie Design (44, 52, 58, 66, 72, 82 px) */
[data-art="monatsachse"] .bx-umschalter__pain-teil:nth-child(2) {
  --bx-saeule: 52px;
}

[data-art="monatsachse"] .bx-umschalter__pain-teil:nth-child(3) {
  --bx-saeule: 58px;
}

[data-art="monatsachse"] .bx-umschalter__pain-teil:nth-child(4) {
  --bx-saeule: 66px;
}

[data-art="monatsachse"] .bx-umschalter__pain-teil:nth-child(5) {
  --bx-saeule: 72px;
}

[data-art="monatsachse"] .bx-umschalter__pain-teil:nth-child(6) {
  --bx-saeule: 82px;
}

[data-art="monatsachse"] .bx-umschalter__pain-teil:nth-last-child(-n + 2)::after {
  background-color: var(--farbe-diagramm-mint-hell);
}

.bx-umschalter__pain-rechnung {
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
}

.bx-umschalter__pain-beleg {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  padding: var(--abstand-10) var(--abstand-12);
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app);
  box-shadow: var(--schatten-app);
  color: var(--farbe-app-text);
}

[data-ton="falsch"] .bx-umschalter__pain-beleg[data-seite="ziel"] {
  border-color: var(--farbe-app-fehler);
  background-color: var(--farbe-vorschau-rot-flaeche);
  color: var(--farbe-vorschau-rot-text);
}

[data-ton="richtig"] .bx-umschalter__pain-beleg[data-seite="ziel"] {
  border-color: var(--farbe-mint-akzent);
  background-color: var(--farbe-gruen-zelle);
  color: var(--farbe-gruen-text);
}

.bx-umschalter__pain-beleg-betrag {
  font-size: var(--schrift-textlink-groesse);
}

.bx-umschalter__pain-weg {
  color: var(--farbe-mikrotext);
}

[data-ton="richtig"] .bx-umschalter__pain-weg {
  color: var(--farbe-gruen);
}

.bx-umschalter__pain-nummer {
  margin: var(--abstand-22) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}

.bx-umschalter__pain-titel {
  margin: var(--abstand-6) 0 var(--abstand-12);
  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-umschalter__pain-absatz {
  margin: 0 0 var(--abstand-8);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-faq-antwort-groesse);
  line-height: var(--schrift-faq-antwort-zeile);
  transition: color var(--bewegung-dauer-kurz);
}

.bx-umschalter--pain-points:has([data-bx-umschalter-knopf][data-wert="heute"][aria-pressed="true"])
  .bx-umschalter__pain-absatz[data-wert="heute"] {
  color: var(--farbe-navy);
}

.bx-umschalter--pain-points:has([data-bx-umschalter-knopf][data-wert="mit"][aria-pressed="true"])
  .bx-umschalter__pain-absatz[data-wert="mit"] {
  color: var(--farbe-gruen-text);
}

.bx-umschalter__pain-link {
  margin: auto 0 0;
  padding-block-start: var(--abstand-10);
}

.bx-umschalter__pain-fuss {
  margin: var(--abstand-36) 0 0;
}

/* Ph12 Design-Abgleich (V-E-loesungen-55): Schalter bündig zur Unterkante der H2 */
.bx-umschalter--zeilen .bx-umschalter__leiste .bx-sektionskopf {
  margin-block-end: 0;
}

/* Ph12 Design-Abgleich (V-E-loesungen-43): H3-Kopf des Umschalters 24 px (Design Finanzen: 800 24 px / 1,25 / −0,7 px) */
.bx-umschalter--zeilen h3.bx-sektionskopf__titel {
  font-size: 24px; /* Wert laut Design */
  line-height: 1.25; /* Wert laut Design */
  letter-spacing: -.7px; /* Wert laut Design */
}

/*
 * == Ph12 Design-Abgleich (V-E-loesungen-41/-42/-76/-77/-78): Zeilen-Umschalter nach Design ==
 * Schalter mit gleitendem weißem Schieber (Zustand 2 grün), Chip mit Punkt und Rand, Zähler in Navy mit orangen Punkten,
 * Nummern „01“ mit Halo, gefüllte Pillen, Balkenverlauf, Kartenverlauf; Wechsel der Zustände als Überblendung (820 ms),
 * Schieber und Hinweis stupsen im Zustand „Heute“ (ohne reduzierte Bewegung). Weiß auf dem Orange des Designs
 * (3,56 : 1) bzw. Mint (2,9 : 1) wird auf --farbe-orange-text bzw. --farbe-gruen (Kontrast) gelegt.
 */
.bx-umschalter__zeilen-schalter {
  position: relative;
  background-color: var(--farbe-linie);
  box-shadow: var(--schatten-umschalter-spur);
}

.bx-umschalter__zeilen-schalter::before {
  content: '';
  position: absolute;
  inset-block: var(--abstand-4);
  inset-inline-start: var(--abstand-4);
  inline-size: calc(50% - var(--abstand-4));
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-umschalter-knopf);
  transition: transform var(--bewegung-umschalter-schieber) var(--bewegung-umschalter-schieber-kurve),
    background-color var(--bewegung-dauer-kurz);
}

.bx-umschalter__zeilen-schalter[aria-checked="true"]::before {
  transform: translateX(100%);
  background-color: var(--farbe-gruen);
}

.bx-umschalter__zeilen-schalter > .bx-umschalter__zeilen-schalter-text {
  position: relative;
  background-color: transparent;
}

.bx-umschalter__zeilen-schalter[aria-checked="false"] > .bx-umschalter__zeilen-schalter-text:first-child {
  background-color: transparent;
  color: var(--farbe-navy);
}

.bx-umschalter__zeilen-schalter[aria-checked="false"] > .bx-umschalter__zeilen-schalter-text:last-child {
  color: var(--farbe-gruen);
}

.bx-umschalter__zeilen-schalter[aria-checked="true"] > .bx-umschalter__zeilen-schalter-text:first-child {
  color: var(--farbe-mikrotext);
}

.bx-umschalter__zeilen-schalter[aria-checked="true"] > .bx-umschalter__zeilen-schalter-text:last-child {
  background-color: transparent;
  color: var(--farbe-weiss);
}

/* Der Hinweis verschwindet nach dem Kippen (Design) */
.bx-umschalter__zeilen-steuerung:has(.bx-umschalter__zeilen-schalter[aria-checked="true"]) .bx-umschalter__zeilen-hinweis {
  opacity: 0;
}

.bx-umschalter__zeilen-hinweis {
  transition: opacity var(--bewegung-dauer-kurz);
}

.bx-umschalter__zeilen-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-9); /* Wert laut Design */
  border: 1px solid var(--farbe-umschalter-chip-rand);
  background-color: var(--farbe-umschalter-chip-flaeche);
  letter-spacing: 1.4px; /* Wert laut Design */
}

.bx-umschalter__zeilen-chip::before {
  content: '';
  flex: none;
  inline-size: 7px; /* Wert laut Design */
  block-size: 7px; /* Wert laut Design */
  border-radius: var(--radius-rund);
  background-color: currentColor;
}

[data-bx-nr="2"] .bx-umschalter__zeilen-chip {
  border-color: var(--farbe-zahlband-pille-rand);
}

.bx-umschalter__zeilen-wort {
  color: inherit;
}

.bx-umschalter__zeilen-punkt {
  color: var(--farbe-orange-text);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-wort {
  color: inherit;
}

[data-bx-nr="2"] .bx-umschalter__zeilen-punkt {
  color: var(--farbe-mint);
}

.bx-umschalter__zeilen-nr {
  box-shadow: var(--schatten-umschalter-halo);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-nr {
  box-shadow: none;
}

.bx-umschalter__zeilen-pille {
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
  box-shadow: var(--schatten-umschalter-pille);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-pille {
  background-color: var(--farbe-mint-pille);
  box-shadow: none;
  color: var(--farbe-mint);
}

.bx-umschalter__zeilen-balken {
  background: linear-gradient(90deg, var(--farbe-orange-flaeche), var(--farbe-umschalter-balken-orange-ende));
}

[data-bx-nr="2"] .bx-umschalter__zeilen-balken {
  background: linear-gradient(90deg, var(--farbe-mint-akzent), var(--farbe-umschalter-balken-mint-ende));
}

.bx-umschalter__zeilen-text {
  border-inline-start-color: var(--farbe-umschalter-linie-orange);
}

[data-bx-nr="2"] .bx-umschalter__zeilen-text {
  border-inline-start-color: var(--farbe-umschalter-linie-mint);
}

.bx-umschalter__zeilen-zustand:not([data-bx-nr="2"]) {
  background: linear-gradient(165deg, var(--farbe-weiss) 0, var(--farbe-umschalter-karte-mitte) 62%,
    var(--farbe-umschalter-karte-ende) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-umschalter__zeilen-zustand {
    transition: opacity var(--bewegung-umschalter-wechsel) var(--bewegung-umschalter-wechsel-kurve);
  }

  /* Balken gleiten mit der Überblendung (Design balkenStil: Breite von Heute nach Mit brainX, 820 ms, easeInOutCubic);
     der ausgeblendete Zustand trägt die Breite des Gegenzustands (--bx-prozent-gegen aus data-bx-gegen) */
  .bx-umschalter__zeilen-balken {
    transition: inline-size var(--bewegung-umschalter-wechsel) var(--bewegung-umschalter-wechsel-kurve);
  }

  .bx-umschalter__zeilen-zustand[aria-hidden="true"] .bx-umschalter__zeilen-balken {
    inline-size: var(--bx-prozent-gegen, var(--bx-prozent, 0%));
  }

  .bx-umschalter__zeilen-zustand[aria-hidden="true"] {
    opacity: 0;
    transition: opacity var(--bewegung-umschalter-wechsel) var(--bewegung-umschalter-wechsel-kurve),
      visibility 0s linear var(--bewegung-umschalter-wechsel);
  }

  /* Stups im Zustand Heute (Design dcSchieber / dcNudge) */
  .bx-umschalter__zeilen-schalter[aria-checked="false"]::before {
    animation: bx-umschalter-schieber var(--bewegung-umschalter-nudge) ease-in-out infinite;
  }

  .bx-umschalter__zeilen-hinweis {
    animation: bx-umschalter-pfeil var(--bewegung-umschalter-pfeil) ease-in-out infinite;
  }

  .bx-umschalter__zeilen-steuerung:has(.bx-umschalter__zeilen-schalter[aria-checked="true"]) .bx-umschalter__zeilen-hinweis {
    animation: none;
  }
}

@keyframes bx-umschalter-schieber {
  0%,
  72%,
  100% {
    translate: 0;
  }

  84% {
    translate: 11px;
  }
}

@keyframes bx-umschalter-pfeil {
  0%,
  100% {
    translate: 0;
    opacity: .75;
  }

  50% {
    translate: 4px;
    opacity: 1;
  }
}

/* Startseite v6 S2 (V-A-rahmen-13, -14): Umschalter Navy aktiv, 700 14 px, Inhaltsbreite; H2 in der Startseiten-Stufe */
.bx-umschalter--pain-points .bx-sektionskopf__titel {
  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-umschalter--pain-points .bx-umschalter__schalter {
  display: inline-flex;
  inline-size: fit-content;
}

.bx-umschalter--pain-points .bx-umschalter__knopf {
  padding: var(--abstand-10) var(--abstand-20);
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
}

.bx-umschalter--pain-points .bx-umschalter__knopf[aria-pressed="true"],
.bx-umschalter--pain-points .bx-umschalter__knopf[data-wert="mit"][aria-pressed="true"] {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  box-shadow: none;
}

.bx-umschalter--pain-points .bx-umschalter__leiste {
  margin-block-end: var(--abstand-28);
}

/* Kopfzeile der Belege „Deal“ und „Rechnung ✕/✓“ (V-A-rahmen-15) */
.bx-umschalter__pain-beleg-kopf {
  color: var(--farbe-app-sekundaer);
  font-weight: var(--schrift-label-gewicht);
  font-size: 11px;
  letter-spacing: 0;
}

[data-ton="falsch"] .bx-umschalter__pain-beleg[data-seite="ziel"] .bx-umschalter__pain-beleg-kopf {
  color: var(--farbe-app-fehler);
}

[data-ton="richtig"] .bx-umschalter__pain-beleg[data-seite="ziel"] .bx-umschalter__pain-beleg-kopf {
  color: var(--farbe-app-link);
}

/* == Ph12 Abgleich 27.10.2026 (Warum brainX D3): Systemzeile der Knoten == */
/* Einzeilig; zweizeilig nur, wenn die Spalte schmaler ist als die längste Zeile („SYSTEM 2 · RECHNUNGSTOOL“) */
.bx-umschalter__knoten-eintrag {
  container-type: inline-size;
}

.bx-umschalter__knoten-system {
  letter-spacing: var(--schrift-chip-mono-laufweite);
  overflow-wrap: normal;
  white-space: nowrap;
}

@container (max-width: 160px) {
  .bx-umschalter__knoten-system {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/*
 * Umschalter (Teilplan B4 E4, E8): Zustandswirkung. Außerhalb eines Höhenstapels (data-bx-hoehe-zustand) wird ein
 * inaktiver Zustand ausgeblendet; im Stapel bleibt er in der Rasterzelle und ist nur unsichtbar (hoehe.css). Ohne
 * JavaScript bleibt es dabei: sichtbar ist der erste Zustand, die übrigen stehen im HTML.
 */
[data-bx-umschalter-zustand][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;
}

/*
 * 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%;
}

/*
 * Gegenbreite der Balken im Umschalter „zeilen“ (Loesung Vertrieb/Kundenservice/Finanzen/Operations „Der Unterschied im
 * Alltag“, BW-47, BW-49, BW-50, BW-68): das Attribut `data-bx-gegen` (Ganzzahl 0…100, im Build gerechnet) trägt die
 * Breite des gleich platzierten Balkens im anderen Zustand und setzt nur die Laufvariable `--bx-prozent-gegen`; den
 * Gebrauch (Gleiten beim Wechsel) regelt umschalter.css. Einzige Tabelle für dieses Attribut, gleiche Stufen wie
 * produkt/prozent.css.
 */

[data-bx-gegen="0"] {
  --bx-prozent-gegen: 0%;
}

[data-bx-gegen="1"] {
  --bx-prozent-gegen: 1%;
}

[data-bx-gegen="2"] {
  --bx-prozent-gegen: 2%;
}

[data-bx-gegen="3"] {
  --bx-prozent-gegen: 3%;
}

[data-bx-gegen="4"] {
  --bx-prozent-gegen: 4%;
}

[data-bx-gegen="5"] {
  --bx-prozent-gegen: 5%;
}

[data-bx-gegen="6"] {
  --bx-prozent-gegen: 6%;
}

[data-bx-gegen="7"] {
  --bx-prozent-gegen: 7%;
}

[data-bx-gegen="8"] {
  --bx-prozent-gegen: 8%;
}

[data-bx-gegen="9"] {
  --bx-prozent-gegen: 9%;
}

[data-bx-gegen="10"] {
  --bx-prozent-gegen: 10%;
}

[data-bx-gegen="11"] {
  --bx-prozent-gegen: 11%;
}

[data-bx-gegen="12"] {
  --bx-prozent-gegen: 12%;
}

[data-bx-gegen="13"] {
  --bx-prozent-gegen: 13%;
}

[data-bx-gegen="14"] {
  --bx-prozent-gegen: 14%;
}

[data-bx-gegen="15"] {
  --bx-prozent-gegen: 15%;
}

[data-bx-gegen="16"] {
  --bx-prozent-gegen: 16%;
}

[data-bx-gegen="17"] {
  --bx-prozent-gegen: 17%;
}

[data-bx-gegen="18"] {
  --bx-prozent-gegen: 18%;
}

[data-bx-gegen="19"] {
  --bx-prozent-gegen: 19%;
}

[data-bx-gegen="20"] {
  --bx-prozent-gegen: 20%;
}

[data-bx-gegen="21"] {
  --bx-prozent-gegen: 21%;
}

[data-bx-gegen="22"] {
  --bx-prozent-gegen: 22%;
}

[data-bx-gegen="23"] {
  --bx-prozent-gegen: 23%;
}

[data-bx-gegen="24"] {
  --bx-prozent-gegen: 24%;
}

[data-bx-gegen="25"] {
  --bx-prozent-gegen: 25%;
}

[data-bx-gegen="26"] {
  --bx-prozent-gegen: 26%;
}

[data-bx-gegen="27"] {
  --bx-prozent-gegen: 27%;
}

[data-bx-gegen="28"] {
  --bx-prozent-gegen: 28%;
}

[data-bx-gegen="29"] {
  --bx-prozent-gegen: 29%;
}

[data-bx-gegen="30"] {
  --bx-prozent-gegen: 30%;
}

[data-bx-gegen="31"] {
  --bx-prozent-gegen: 31%;
}

[data-bx-gegen="32"] {
  --bx-prozent-gegen: 32%;
}

[data-bx-gegen="33"] {
  --bx-prozent-gegen: 33%;
}

[data-bx-gegen="34"] {
  --bx-prozent-gegen: 34%;
}

[data-bx-gegen="35"] {
  --bx-prozent-gegen: 35%;
}

[data-bx-gegen="36"] {
  --bx-prozent-gegen: 36%;
}

[data-bx-gegen="37"] {
  --bx-prozent-gegen: 37%;
}

[data-bx-gegen="38"] {
  --bx-prozent-gegen: 38%;
}

[data-bx-gegen="39"] {
  --bx-prozent-gegen: 39%;
}

[data-bx-gegen="40"] {
  --bx-prozent-gegen: 40%;
}

[data-bx-gegen="41"] {
  --bx-prozent-gegen: 41%;
}

[data-bx-gegen="42"] {
  --bx-prozent-gegen: 42%;
}

[data-bx-gegen="43"] {
  --bx-prozent-gegen: 43%;
}

[data-bx-gegen="44"] {
  --bx-prozent-gegen: 44%;
}

[data-bx-gegen="45"] {
  --bx-prozent-gegen: 45%;
}

[data-bx-gegen="46"] {
  --bx-prozent-gegen: 46%;
}

[data-bx-gegen="47"] {
  --bx-prozent-gegen: 47%;
}

[data-bx-gegen="48"] {
  --bx-prozent-gegen: 48%;
}

[data-bx-gegen="49"] {
  --bx-prozent-gegen: 49%;
}

[data-bx-gegen="50"] {
  --bx-prozent-gegen: 50%;
}

[data-bx-gegen="51"] {
  --bx-prozent-gegen: 51%;
}

[data-bx-gegen="52"] {
  --bx-prozent-gegen: 52%;
}

[data-bx-gegen="53"] {
  --bx-prozent-gegen: 53%;
}

[data-bx-gegen="54"] {
  --bx-prozent-gegen: 54%;
}

[data-bx-gegen="55"] {
  --bx-prozent-gegen: 55%;
}

[data-bx-gegen="56"] {
  --bx-prozent-gegen: 56%;
}

[data-bx-gegen="57"] {
  --bx-prozent-gegen: 57%;
}

[data-bx-gegen="58"] {
  --bx-prozent-gegen: 58%;
}

[data-bx-gegen="59"] {
  --bx-prozent-gegen: 59%;
}

[data-bx-gegen="60"] {
  --bx-prozent-gegen: 60%;
}

[data-bx-gegen="61"] {
  --bx-prozent-gegen: 61%;
}

[data-bx-gegen="62"] {
  --bx-prozent-gegen: 62%;
}

[data-bx-gegen="63"] {
  --bx-prozent-gegen: 63%;
}

[data-bx-gegen="64"] {
  --bx-prozent-gegen: 64%;
}

[data-bx-gegen="65"] {
  --bx-prozent-gegen: 65%;
}

[data-bx-gegen="66"] {
  --bx-prozent-gegen: 66%;
}

[data-bx-gegen="67"] {
  --bx-prozent-gegen: 67%;
}

[data-bx-gegen="68"] {
  --bx-prozent-gegen: 68%;
}

[data-bx-gegen="69"] {
  --bx-prozent-gegen: 69%;
}

[data-bx-gegen="70"] {
  --bx-prozent-gegen: 70%;
}

[data-bx-gegen="71"] {
  --bx-prozent-gegen: 71%;
}

[data-bx-gegen="72"] {
  --bx-prozent-gegen: 72%;
}

[data-bx-gegen="73"] {
  --bx-prozent-gegen: 73%;
}

[data-bx-gegen="74"] {
  --bx-prozent-gegen: 74%;
}

[data-bx-gegen="75"] {
  --bx-prozent-gegen: 75%;
}

[data-bx-gegen="76"] {
  --bx-prozent-gegen: 76%;
}

[data-bx-gegen="77"] {
  --bx-prozent-gegen: 77%;
}

[data-bx-gegen="78"] {
  --bx-prozent-gegen: 78%;
}

[data-bx-gegen="79"] {
  --bx-prozent-gegen: 79%;
}

[data-bx-gegen="80"] {
  --bx-prozent-gegen: 80%;
}

[data-bx-gegen="81"] {
  --bx-prozent-gegen: 81%;
}

[data-bx-gegen="82"] {
  --bx-prozent-gegen: 82%;
}

[data-bx-gegen="83"] {
  --bx-prozent-gegen: 83%;
}

[data-bx-gegen="84"] {
  --bx-prozent-gegen: 84%;
}

[data-bx-gegen="85"] {
  --bx-prozent-gegen: 85%;
}

[data-bx-gegen="86"] {
  --bx-prozent-gegen: 86%;
}

[data-bx-gegen="87"] {
  --bx-prozent-gegen: 87%;
}

[data-bx-gegen="88"] {
  --bx-prozent-gegen: 88%;
}

[data-bx-gegen="89"] {
  --bx-prozent-gegen: 89%;
}

[data-bx-gegen="90"] {
  --bx-prozent-gegen: 90%;
}

[data-bx-gegen="91"] {
  --bx-prozent-gegen: 91%;
}

[data-bx-gegen="92"] {
  --bx-prozent-gegen: 92%;
}

[data-bx-gegen="93"] {
  --bx-prozent-gegen: 93%;
}

[data-bx-gegen="94"] {
  --bx-prozent-gegen: 94%;
}

[data-bx-gegen="95"] {
  --bx-prozent-gegen: 95%;
}

[data-bx-gegen="96"] {
  --bx-prozent-gegen: 96%;
}

[data-bx-gegen="97"] {
  --bx-prozent-gegen: 97%;
}

[data-bx-gegen="98"] {
  --bx-prozent-gegen: 98%;
}

[data-bx-gegen="99"] {
  --bx-prozent-gegen: 99%;
}

[data-bx-gegen="100"] {
  --bx-prozent-gegen: 100%;
}

/*
 * Baustein „zahlenkarte“ (Vertrag Ph8 §3.4.2, Teilplan H0b E3, §8.5): `hero` als Glaskarte im Slot `hero-navy.rechts`
 * (Design APP Cashflow Forecast A v5 und APP Abrechnung DATEV D v3, Hero rechts), `cta` als Navy-Band (Automatisierung
 * v7 „Zwischen-CTA“).
 */
.bx-zahlenkarte {
  font-family: var(--schrift-familie-text);
}

.bx-zahlenkarte__karte {
  padding: var(--abstand-26) var(--abstand-28);
  border: 1px solid var(--farbe-navy-glas-rand);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-navy-glas);
}

.bx-zahlenkarte__aussage {
  margin: 0 0 var(--abstand-4);
  color: var(--farbe-weiss);
  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);
  text-wrap: pretty;
}

.bx-zahlenkarte__annahme {
  margin: 0 0 var(--abstand-14);
  color: var(--farbe-navy-text-sekundaer);
  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);
}

.bx-zahlenkarte__zahlzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-10);
  margin: 0 0 var(--abstand-18);
}

.bx-zahlenkarte__zahl {
  margin: 0;
  color: var(--farbe-weiss);
  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);
  font-variant-numeric: tabular-nums;
}

.bx-zahlenkarte__einheit {
  color: var(--farbe-navy-text-sekundaer);
  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-zahlenkarte__vorteil {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-18) var(--abstand-20) var(--abstand-16);
  border: 1px solid var(--farbe-mint-rand);
  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-tief);
}

.bx-zahlenkarte__vorteil-kicker {
  margin: 0;
  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-zahlenkarte__vorteil-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-16);
  padding-block-start: var(--abstand-14);
}

.bx-zahlenkarte__vorteil-text {
  margin: 0;
  color: var(--farbe-weiss);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-karte-text-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
  text-wrap: pretty;
}

.bx-zahlenkarte__vorteil-wert {
  flex: none;
  margin: 0;
  color: var(--farbe-weiss);
  font-weight: var(--schrift-zahl-gewicht);
  font-size: var(--schrift-zahl-groesse);
  line-height: var(--schrift-zahl-zeile);
  letter-spacing: var(--schrift-zahl-laufweite);
  white-space: nowrap;
}

.bx-zahlenkarte__fussnote {
  margin: var(--abstand-12) 0 0;
  padding-inline: var(--abstand-6);
  color: var(--farbe-titel-zweitton);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
  letter-spacing: var(--schrift-fussnote-laufweite);
}

/* Variante „cta“ */
.bx-zahlenkarte--cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-28);
  padding: var(--abstand-36) var(--abstand-44);
  border-radius: var(--radius-box);
  background: linear-gradient(199deg, var(--farbe-navy-glas) 0%, var(--farbe-navy-glas) 36%, transparent 36.1%),
    var(--farbe-navy);
}

/* Ph8 H2b (P-H2B-15, H8-76): als eigener Abschnitt steht die Karte in der Inhaltsbreite (A7 „padding: 0 64px“) */
.bx-abschnitt > .bx-zahlenkarte--cta {
  margin-inline: var(--seitenrand);
  border-radius: var(--radius-box-gross); /* A7: 32 px */
}

.bx-zahlenkarte__links {
  display: flex;
  align-items: center;
  gap: var(--abstand-26);
  min-inline-size: 0;
}

.bx-zahlenkarte--cta .bx-zahlenkarte__zahl {
  flex: none;
  color: var(--farbe-orange-navy-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-zahlenkarte__praefix {
  font-size: var(--schrift-zahl-groesse);
}

.bx-zahlenkarte--cta .bx-zahlenkarte__aussage {
  margin-block-end: var(--abstand-6);
  font-weight: var(--schrift-fehler-anlass-titel-gewicht);
  font-size: var(--schrift-fehler-anlass-titel-groesse);
  line-height: var(--schrift-fehler-anlass-titel-zeile);
  letter-spacing: var(--schrift-fehler-anlass-titel-laufweite);
  text-wrap: balance;
}

.bx-zahlenkarte--cta .bx-zahlenkarte__annahme {
  margin: 0;
  font-size: var(--schrift-text-kompakt-groesse);
}

.bx-zahlenkarte__aktion {
  margin: 0;
}

@media (width < 768px) {
  .bx-zahlenkarte__karte {
    padding: var(--abstand-22) var(--abstand-20);
  }

  .bx-zahlenkarte--cta {
    padding: var(--abstand-28) var(--abstand-24);
  }

  .bx-zahlenkarte__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-14);
  }
}

/*
 * Ph9 I2b – Variante `gegenueber` (Vertrag Ph9 §3.9.3, Ä9-19; Design HubSpot E „Auf einen Blick“, Karte 2): Zeile
 * brainX grün mit großem Wert, Zeile Wettbewerber, „*“, Fußnote mit Anker-Link darunter.
 */
.bx-zahlenkarte--gegenueber {
  display: grid;
  gap: var(--abstand-12);
}

.bx-zahlenkarte--gegenueber .bx-zahlenkarte__karte {
  padding: var(--abstand-24);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
}

.bx-zahlenkarte__titel {
  margin: 0 0 var(--abstand-6);
  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-zahlenkarte--gegenueber .bx-zahlenkarte__unterzeile {
  margin: 0 0 var(--abstand-18);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-menue-link-groesse);
}

.bx-zahlenkarte__zeilen {
  display: grid;
  gap: var(--abstand-8);
  margin: 0;
}

.bx-zahlenkarte__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--abstand-12);
  padding: var(--abstand-12) var(--abstand-14);
  border-radius: var(--radius-rahmen);
  background: var(--farbe-weiss);
}

.bx-zahlenkarte__zeile[data-bx-seite="brainx"] {
  background: var(--farbe-gruen-flaeche);
}

.bx-zahlenkarte__name {
  font-weight: var(--schrift-h3-gewicht);
}

.bx-zahlenkarte__zeile .bx-zahlenkarte__wert {
  margin: 0;
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-h3-groesse);
  font-variant-numeric: tabular-nums;
}

.bx-zahlenkarte__zeile[data-bx-seite="brainx"] .bx-zahlenkarte__wert {
  color: var(--farbe-gruen);
  font-size: var(--schrift-h2-groesse);
}

.bx-zahlenkarte--gegenueber .bx-zahlenkarte__fussnote {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-menue-link-groesse);
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: Variante `band` (§3.4.1, N11-11; Design Loesung Vertrieb v3 „Zahlen“, Finanzen v4) ==
 * Navy: Band zweispaltig (Kicker, H3, Text, Zahl links; Vorteil-Kicker und Satz rechts), Fußnote darunter; unter
 * 1080px untereinander. Hell: zwei Zahlkarten im Raster auto-fit ab 280px, Linkzeile, grüner Vorteil-Block.
 */
.bx-zahlenkarte--band {
  font-family: var(--schrift-familie-text);
}

/* Ph12 Design-Abgleich (V-E-loesungen-36, -79): die Navy-Karte steht im Seitenraster (Design: Abschnitt 48 / 56 px, mobil 38 / 20 px) */
.bx-zahlenkarte--band-navy {
  padding: var(--abstand-48) var(--seitenrand);
}

.bx-zahlenkarte__band-flaeche {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--farbe-navy);
  border-radius: var(--radius-karte);
  background: linear-gradient(165deg, var(--farbe-navy-innenfeld) 0, var(--farbe-zahlband-mitte) 62%, var(--farbe-zahlband-tief) 100%);
  box-shadow: var(--schatten-karte-navy);
  color: var(--farbe-weiss);
}

/* Mint-Glow rechts unten (Design: right -160, bottom -220, 640 × 520) */
.bx-zahlenkarte__band-flaeche::after {
  content: '';
  position: absolute;
  right: -160px; /* Design */
  bottom: -220px; /* Design */
  inline-size: 640px;
  block-size: 520px;
  background: radial-gradient(closest-side, var(--farbe-zahlband-glow), var(--farbe-glow-mint-aus));
  pointer-events: none;
}

.bx-zahlenkarte__band-links,
.bx-zahlenkarte__band-rechts {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--abstand-32) var(--abstand-36) var(--abstand-34);
}

.bx-zahlenkarte__band-rechts {
  border-inline-start: 1px solid var(--farbe-navy-linie);
}

.bx-zahlenkarte__band-kicker,
.bx-zahlenkarte__band-vorteil-kicker {
  margin: 0 0 var(--abstand-18);
  padding: var(--abstand-4) var(--abstand-9);
  border-radius: var(--radius-chip);
  background-color: var(--farbe-navy-flaeche-zart);
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-zahlenkarte__band-rechts > .bx-zahlenkarte__band-vorteil-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-8);
  border: 1px solid var(--farbe-zahlband-pille-rand);
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
  white-space: nowrap;
}

/* Punkt vor „MIT brainX“ (Design: 6 px) */
.bx-zahlenkarte__band-rechts > .bx-zahlenkarte__band-vorteil-kicker::before {
  content: '';
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-mint);
}

.bx-zahlenkarte__band-titel,
.bx-zahlenkarte__band-flaeche .bx-zahlenkarte__band-satz {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-weiss);
  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);
}

.bx-zahlenkarte__band-flaeche .bx-zahlenkarte__annahme {
  margin: 0;
  max-inline-size: 500px;
  color: var(--farbe-navy-text-sekundaer);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-text-kompakt-zeile);
}

.bx-zahlenkarte__band-flaeche .bx-zahlenkarte__zahlzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-10);
  margin: auto 0 0;
  padding-block-start: var(--abstand-28);
}

.bx-zahlenkarte__band-flaeche .bx-zahlenkarte__zahl {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-zahl-band-gewicht);
  font-size: var(--schrift-zahl-band-groesse);
  line-height: var(--schrift-zahl-band-zeile);
  letter-spacing: var(--schrift-zahl-band-laufweite);
}

.bx-zahlenkarte__band-flaeche .bx-zahlenkarte__einheit {
  color: var(--farbe-orange-navy-hell);
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-lead-klein-groesse);
}

.bx-zahlenkarte__band-hervor {
  color: var(--farbe-mint);
  font-weight: inherit;
}

.bx-zahlenkarte--band > .bx-zahlenkarte__fussnote {
  margin-block-start: var(--abstand-14);
}

.bx-zahlenkarte__band-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--abstand-20);
}

.bx-zahlenkarte__band-karte {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-28) var(--abstand-30);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
}

.bx-zahlenkarte__band-kartentitel {
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-navy);
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-karte-titel-mittel-groesse);
  line-height: var(--schrift-karte-titel-mittel-zeile);
}

.bx-zahlenkarte__band-karte .bx-zahlenkarte__annahme {
  margin: 0 0 var(--abstand-22);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-zahlenkarte__band-karte .bx-zahlenkarte__zahlzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-8);
  margin: auto 0 0;
}

.bx-zahlenkarte__band-karte .bx-zahlenkarte__zahl {
  color: var(--farbe-navy);
  font-weight: var(--schrift-bento-ziffer-gewicht);
  font-size: var(--schrift-bento-ziffer-groesse);
  line-height: var(--schrift-bento-ziffer-zeile);
  letter-spacing: var(--schrift-bento-ziffer-laufweite);
}

.bx-zahlenkarte__band-karte .bx-zahlenkarte__einheit {
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-text-kompakt-groesse);
}

.bx-zahlenkarte__band-linkzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-6) var(--abstand-16);
  margin: var(--abstand-18) 0 0;
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-text-kompakt-zeile);
}

.bx-zahlenkarte__band-vorteil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-16);
  margin: var(--abstand-20) 0 0;
  padding: var(--abstand-22) var(--abstand-28);
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

.bx-zahlenkarte__band-vorteil > .bx-zahlenkarte__band-vorteil-kicker {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: var(--farbe-gruen-text);
}

.bx-zahlenkarte__band-vorteil > .bx-zahlenkarte__band-satz {
  font-weight: var(--schrift-button-gewicht);
  font-size: var(--schrift-karte-titel-mittel-groesse);
  line-height: var(--schrift-karte-titel-mittel-zeile);
}

.bx-zahlenkarte__band-vorteil .bx-zahlenkarte__band-hervor {
  color: inherit;
}

@media (width < 1080px) {
  .bx-zahlenkarte__band-flaeche {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-zahlenkarte__band-rechts {
    border-block-start: 1px solid var(--farbe-navy-linie);
    border-inline-start: 0;
  }
}

/*
 * Ph12 Design-Abgleich (V-B-app-25, AD Z. 91–112, CF Z. 69–78): Vorteil-Block mit Kopfzeile (Wortmarke und „APP“ links,
 * Kicker rechts) und Wert mit Unterzeile rechtsbündig; Variante `flaeche: hell` (AD) als weiße Karte mit Navy-Kasten.
 */
.bx-zahlenkarte__vorteil-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
}

.bx-zahlenkarte__vorteil-marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  color: var(--farbe-weiss);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
}

.bx-zahlenkarte__vorteil-marke img {
  display: block;
  block-size: 19px;
  inline-size: auto;
}

.bx-zahlenkarte__vorteil-kopf .bx-zahlenkarte__vorteil-kicker {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
}

.bx-zahlenkarte__vorteil-zeile {
  position: relative;
  flex-wrap: wrap;
}

.bx-zahlenkarte__vorteil-text {
  flex: 1 1 140px;
  font-weight: 600;
  line-height: 1.45;
}

.bx-zahlenkarte__vorteil-wert {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.bx-zahlenkarte__vorteil-unter {
  margin-block-start: var(--abstand-5);
  color: var(--farbe-mint);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0;
}

.bx-zahlenkarte__stern {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0;
  vertical-align: super;
}

.bx-zahlenkarte--hell .bx-zahlenkarte__karte {
  border: 0;
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
}

.bx-zahlenkarte--hell .bx-zahlenkarte__aussage,
.bx-zahlenkarte--hell .bx-zahlenkarte__zahl {
  color: var(--farbe-navy);
}

.bx-zahlenkarte--hell .bx-zahlenkarte__annahme,
.bx-zahlenkarte--hell .bx-zahlenkarte__einheit {
  color: var(--farbe-mikrotext);
}

.bx-zahlenkarte--hell .bx-zahlenkarte__annahme {
  margin-block-end: var(--abstand-16);
  font-size: 13px;
  line-height: normal;
}

.bx-zahlenkarte--hell .bx-zahlenkarte__einheit {
  font-weight: 700;
  font-size: 15px;
}

.bx-zahlenkarte--hell .bx-zahlenkarte__zahlzeile {
  margin-block-end: var(--abstand-20);
}

.bx-zahlenkarte--hell .bx-zahlenkarte__vorteil {
  border: 0;
  background: radial-gradient(280px 280px at 100% 0%, var(--farbe-glow-mint-band), var(--farbe-glow-mint-aus) 68%),
    var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-zahlenkarte--hell .bx-zahlenkarte__fussnote {
  margin-block-start: var(--abstand-14);
  color: var(--farbe-navy-text-sekundaer);
  font-size: 12.5px;
  line-height: 1.55;
}

/*
 * Abschnittstyp „app-rahmen“ (Vertrag Ph11 §3.3.7, Teilplan M1b §3, E2; Design „Loesung Finanzen v4“ „Der Monatslauf“
 * und die Ablauf-Abschnitte von VT, KS, OP, CL): weiße Karte mit Schritt-Tabs (Nummer, Text, Fortschritt des
 * Durchlaufs), dem Fenster-Nachbau und dem Schritttext darunter. Das Fenster ist 1224 px breit und wird unter dieser
 * Breite als Ganzes verkleinert, nur mit CSS (Muster Ph8 vergleich-davor-danach: das Panel als Container, `--bx-skala` aus
 * tan(atan2()), feste Innenhöhe). Alle Panels liegen im Höhenstapel (hoehe.css), der Durchlauf zeichnet durchlauf.css.
 * Die Nachbauten tragen die App-Schrift und die App-Farben; Längen von Balken und Säulen über data-bx-prozent
 * (prozent.css). Statisch, Bewegung nur über die Ph2-Module. Nur Tokens; Stufen nur 768px und 1080px.
 */

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

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

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

.bx-app-rahmen__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-26);
}

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

.bx-app-rahmen__kopf-link {
  margin: 0;
  white-space: nowrap;
}

/* == Karte mit Tabs == */

.bx-app-rahmen__ablauf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-20);
  padding: var(--abstand-28) var(--abstand-30);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
}

.bx-app-rahmen__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Mindestbreite laut Design */
  gap: var(--abstand-8);
}

.bx-app-rahmen__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--abstand-10);
  overflow: hidden;
  padding: var(--abstand-13) var(--abstand-16);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-promo);
  background-color: var(--farbe-weiss); /* Ph12 V-E-loesungen-69: inaktive Tabs weiß, Text grau, Rand grau (Design) */
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tab-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-faq-frage-zeile);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz),
    transform var(--bewegung-dauer-kurz);
}

.bx-app-rahmen__tab:hover,
.bx-app-rahmen__tab[data-sg-zustand="hover"] {
  transform: translateY(var(--bewegung-lift));
}

.bx-app-rahmen__tab[aria-selected="true"] {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-app-rahmen__nummer {
  flex: none;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-sitemap-nummer-gewicht);
  font-size: var(--schrift-sitemap-nummer-groesse);
  opacity: 0.62; /* Wert laut Design */
}

.bx-app-rahmen__tab-text {
  min-inline-size: 0;
  text-wrap: pretty;
}

.bx-app-rahmen__fortschritt {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background-color: var(--farbe-mint);
  transform: scaleX(0);
  transform-origin: left;
}

/* == Panel: Fenster und Schritttext == */

.bx-app-rahmen__panel {
  container-type: inline-size; /* Bezugsbreite der Skalierung: die Hülle darf nicht ihr eigener Container sein */
  display: flex;
  flex-direction: column;
  gap: var(--abstand-22);
  min-inline-size: 0;
}

.bx-app-rahmen__huelle {
  --bx-skala: min(1, tan(atan2(100cqi, 1224px))); /* Fensterbreite 1224 px (Design MOCK_B) */
  --bx-fenster-hoehe: 525px; /* Innenhöhe laut Design: 1224 px im Verhältnis 21 zu 9 */
  position: relative;
  block-size: calc(var(--bx-fenster-hoehe) * var(--bx-skala));
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-box-gross);
  background-color: var(--farbe-flaeche-band);
}

.bx-app-rahmen__fenster {
  display: flex;
  inline-size: max(1224px, calc(100cqi - 2px)); /* Ph12 V-E-loesungen-68: füllt die Hülle ohne Lücke rechts (Skala 1) */
  block-size: var(--bx-fenster-hoehe);
  transform: scale(var(--bx-skala));
  transform-origin: top left;
  font-family: var(--schrift-familie-app);
  color: var(--farbe-app-text);
}

.bx-app-rahmen__leiste {
  flex: none;
  inline-size: 168px; /* Seitenleiste laut Design */
  padding: var(--abstand-10);
  background-color: var(--farbe-app-kopf);
  color: var(--farbe-weiss);
}

.bx-app-rahmen__kopfzeile {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6);
}

.bx-app-rahmen__mandant {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  padding: var(--abstand-9);
  border-radius: var(--radius-kachel-klein);
  background-color: var(--farbe-app-dunkel);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__mandant::before {
  content: '';
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
}

.bx-app-rahmen__nutzer {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  padding: var(--abstand-5) var(--abstand-9);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  color: var(--farbe-app-text);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__nutzer img {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-rund);
  object-fit: cover;
}

.bx-app-rahmen__module {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  margin: var(--abstand-16) 0 0;
  padding: 0;
  list-style: none;
}

.bx-app-rahmen__module li {
  padding: var(--abstand-7) var(--abstand-10);
  border-radius: var(--radius-kachel-klein);
  color: var(--farbe-app-leiste-sekundaer);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__module li[data-bx-aktiv] {
  background-color: var(--farbe-app-dunkel);
  color: var(--farbe-weiss);
}

.bx-app-rahmen__seite {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
  background-color: var(--farbe-flaeche-band);
}

/* == Ansicht == */

.bx-app-rahmen__ansicht {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
}

.bx-app-rahmen__pfadzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  padding: var(--abstand-12) var(--abstand-18);
  border-block-end: 1px solid var(--farbe-linie-karte);
  background-color: var(--farbe-weiss);
}

.bx-app-rahmen__pfad {
  color: var(--farbe-app-sekundaer);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__status,
.bx-app-rahmen__marke {
  padding: var(--abstand-5) var(--abstand-10);
  border-radius: var(--radius-chip);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-pille-zeile);
  letter-spacing: var(--schrift-label-laufweite);
  white-space: nowrap;
}

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

.bx-app-rahmen__status[data-bx-ton="navy"] {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-app-rahmen__status[data-bx-ton="orange"] {
  background-color: var(--farbe-orange-flaeche);
  color: var(--farbe-weiss);
}

.bx-app-rahmen__inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--abstand-12);
  min-block-size: 0;
  padding: var(--abstand-16) var(--abstand-18);
  overflow: hidden;
}

.bx-app-rahmen__kacheln {
  display: flex;
  gap: var(--abstand-10);
  margin: 0;
}

.bx-app-rahmen__kachel {
  flex: 1;
  padding: var(--abstand-12) var(--abstand-14);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
}

.bx-app-rahmen__kachel dt {
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-widget-kicker-groesse);
  line-height: var(--schrift-pille-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-app-rahmen__kachel dd {
  margin: 0;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-kosten-zahl-gewicht);
  font-size: var(--schrift-auswahl-summe-groesse);
  line-height: var(--schrift-pille-zeile);
}

.bx-app-rahmen__kachel[data-bx-ton="plus"] dd {
  color: var(--farbe-gruen);
}

.bx-app-rahmen__kachel[data-bx-ton="warnung"] dd {
  color: var(--farbe-orange-text);
}

.bx-app-rahmen__untertitelzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  margin: 0;
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-app-rahmen__marke {
  background-color: var(--farbe-flaeche-toggle);
  color: var(--farbe-mikrotext);
}

.bx-app-rahmen__fortschrittszeile {
  padding: var(--abstand-14) var(--abstand-16);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
}

.bx-app-rahmen__fortschritt-kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-12);
  margin: 0 0 var(--abstand-9);
  color: var(--farbe-navy);
  font-weight: var(--schrift-tab-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__fortschritt-zahl {
  color: var(--farbe-gruen);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-pille-groesse);
}

.bx-app-rahmen__fortschritt-leiste {
  overflow: hidden;
  block-size: 8px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-toggle);
}

.bx-app-rahmen__fortschritt-leiste span {
  display: block;
  inline-size: var(--bx-prozent, 0%);
  block-size: 100%;
  border-radius: var(--radius-pille);
  background: linear-gradient(90deg, var(--farbe-mint-akzent), var(--farbe-mint));
}

/* Tabelle */

.bx-app-rahmen__tabelle {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__tabelle th {
  padding: var(--abstand-9) var(--abstand-16);
  background-color: var(--farbe-flaeche-zart);
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-widget-wert-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
  text-align: start;
}

.bx-app-rahmen__tabelle td {
  padding: var(--abstand-10) var(--abstand-16);
  border-block-start: 1px solid var(--farbe-linie-sektion);
  color: var(--farbe-navy);
}

.bx-app-rahmen__tabelle td:last-child,
.bx-app-rahmen__tabelle th:last-child {
  text-align: end;
}

.bx-app-rahmen__pille {
  display: inline-block;
  padding: var(--abstand-4) var(--abstand-9);
  border-radius: var(--radius-pille);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-widget-wert-label-groesse);
  line-height: var(--schrift-pille-zeile);
}

.bx-app-rahmen__pille[data-bx-ton="offen"] {
  background-color: var(--farbe-app-chip-orange-flaeche);
  color: var(--farbe-app-status-faellig-text);
}

.bx-app-rahmen__pille[data-bx-ton="erledigt"] {
  background-color: var(--farbe-app-status-ok);
  color: var(--farbe-app-status-bezahlt-text);
}

.bx-app-rahmen__pille[data-bx-ton="warnung"] {
  background-color: var(--farbe-app-etikett-orange-flaeche);
  color: var(--farbe-app-etikett-orange-text);
}

.bx-app-rahmen__pille[data-bx-ton="aktiv"] {
  background-color: var(--farbe-app-chip-blau-flaeche);
  color: var(--farbe-app-status-erstellt-text);
}

/* Band, Kette, Verlauf */

.bx-app-rahmen__band {
  margin: 0;
  padding: var(--abstand-9) var(--abstand-14);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-app-rahmen__kette,
.bx-app-rahmen__verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-app-rahmen__kette li {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-12);
  padding: var(--abstand-9) var(--abstand-14);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
}

.bx-app-rahmen__kette li[data-bx-ton="aktiv"] {
  border-color: var(--farbe-mint);
}

.bx-app-rahmen__kette-kicker {
  flex: none;
  margin: 0;
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-widget-wert-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-app-rahmen__kette-text,
.bx-app-rahmen__verlauf-text {
  margin: 0;
  color: var(--farbe-navy);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__verlauf li {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-10);
  padding: var(--abstand-9) var(--abstand-14);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
  font-size: var(--schrift-fussnote-groesse);
}

.bx-app-rahmen__verlauf-punkt {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-status-leer);
}

.bx-app-rahmen__verlauf li[data-bx-ton="erledigt"] .bx-app-rahmen__verlauf-punkt {
  background-color: var(--farbe-mint-akzent);
}

.bx-app-rahmen__verlauf li[data-bx-ton="aktiv"] .bx-app-rahmen__verlauf-punkt {
  background-color: var(--farbe-orange-flaeche);
}

.bx-app-rahmen__verlauf li[data-bx-ton="warnung"] .bx-app-rahmen__verlauf-punkt {
  background-color: var(--farbe-gedaempft-punkt);
}

.bx-app-rahmen__verlauf-titel {
  flex: 1;
  color: var(--farbe-navy);
  font-weight: var(--schrift-tab-gewicht);
}

.bx-app-rahmen__verlauf-zeit {
  margin: 0;
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-size: var(--schrift-widget-wert-label-groesse);
}

/* Karte, Chips, Diagramm, Notiz */

.bx-app-rahmen__karte {
  padding: var(--abstand-14) var(--abstand-16);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
}

.bx-app-rahmen__karte-titel {
  margin: 0 0 var(--abstand-8);
  color: var(--farbe-navy);
  font-weight: var(--schrift-kosten-zahl-gewicht);
  font-size: var(--schrift-text-kompakt-groesse);
  line-height: var(--schrift-faq-frage-zeile);
}

.bx-app-rahmen__karte-zeilen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  margin: 0;
  font-size: var(--schrift-fussnote-groesse);
}

.bx-app-rahmen__karte-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-12);
}

.bx-app-rahmen__karte-zeile dt {
  color: var(--farbe-app-sekundaer);
}

.bx-app-rahmen__karte-zeile dd {
  margin: 0;
  color: var(--farbe-navy);
}

.bx-app-rahmen__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-8);
  margin: var(--abstand-12) 0 0;
}

.bx-app-rahmen__knopf {
  padding: var(--abstand-7) var(--abstand-14);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-tab-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-pille-zeile);
}

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

.bx-app-rahmen__chips li {
  padding: var(--abstand-5) var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-toggle);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-widget-wert-label-groesse);
  line-height: var(--schrift-pille-zeile);
}

.bx-app-rahmen__diagramm {
  padding: var(--abstand-12) var(--abstand-16);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-weiss);
}

.bx-app-rahmen__diagramm-titel {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-widget-wert-label-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-app-rahmen__diagramm-saeulen {
  display: flex;
  align-items: flex-end;
  gap: var(--abstand-8);
  block-size: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-app-rahmen__diagramm-saeulen li {
  display: grid; /* Ph12 V-E-loesungen-35: Säule und Label teilen sich die Höhe, die Säulen behalten ihre Prozent */
  flex: 1;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--abstand-4);
  block-size: 100%;
  min-inline-size: 0;
}

.bx-app-rahmen__diagramm-saeule {
  display: block;
  align-self: end;
  block-size: var(--bx-prozent, 0%);
  border-radius: var(--radius-mini) var(--radius-mini) 0 0;
  background-color: var(--farbe-mint-akzent);
}

.bx-app-rahmen__diagramm-label {
  color: var(--farbe-app-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-size: var(--schrift-widget-wert-label-groesse);
  text-align: center;
}

.bx-app-rahmen__notiz {
  margin: 0;
  color: var(--farbe-app-sekundaer);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-app-rahmen__fuss {
  position: absolute;
  inset-inline: var(--abstand-18) var(--abstand-12);
  inset-block-end: var(--abstand-12);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-8);
  margin: 0;
  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-pille-zeile);
}

/* == Schritttext == */

.bx-app-rahmen__schritt {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr); /* Kickerspalte laut Design */
  gap: var(--abstand-24);
  align-items: start;
  min-block-size: 132px; /* Mindesthöhe laut Design */
  box-sizing: border-box;
  padding-block-start: var(--abstand-22);
  border-block-start: 1px solid var(--farbe-linie-karte);
}

.bx-app-rahmen__kicker {
  margin: 0;
  padding-block-start: var(--abstand-4);
  color: var(--farbe-mint-text);
  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);
}

.bx-app-rahmen__kicker[data-bx-ihr-schritt] {
  color: var(--farbe-orange-text);
}

.bx-app-rahmen__titel {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  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-app-rahmen__text {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .bx-app-rahmen__tab,
  .bx-app-rahmen__tab:hover {
    transform: none;
    transition: none;
  }
}

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

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

@media (width < 768px) {
  .bx-app-rahmen {
    padding: var(--abstand-40) var(--abstand-20);
  }

  .bx-app-rahmen__ablauf {
    padding: var(--abstand-20) var(--abstand-16);
  }

}

/* Ph12 Design-Abgleich (V-E-loesungen-55): Link bündig zur Unterkante der H2 (Design: align-items flex-end, H2 ohne Abstand) */
.bx-app-rahmen__kopf .bx-sektionskopf {
  margin-block-end: 0;
}

/* Ph12 Design-Abgleich (V-E-loesungen-67): Schritt mit Kette und Karte (Operations): Kette links, Karte rechts (Design 250 px) */
.bx-app-rahmen__inhalt:has(> .bx-app-rahmen__kette) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px; /* Wert laut Design */
  align-items: start;
  padding-block-end: var(--abstand-44);
}

.bx-app-rahmen__inhalt:has(> .bx-app-rahmen__kette) .bx-app-rahmen__kette li {
  padding-block: var(--abstand-6);
}

/*
 * 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;
}

/*
 * 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 „zeitachse“ (Teilplan D3 §5.5, Design Über uns Chronik v2 Z. 43–85, Startseite v6 Z. 491–511):
 * Kapitelleiste auf Navy (mit Puls am aktuellen Glied) und Liste mit Raute. Die Kapitelleiste trägt Seitenrand, oberen
 * Abstand und Linien selbst (verschachtelt im Hero nutzbar). Bewegung nur ohne reduzierte Bewegung; Keyframes mit
 * `from` (Grundgestalt = Endzustand, N3-21).
 */
.bx-zeitachse {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-familie-text);
}

/* == kapitelleiste == */
.bx-zeitachse--kapitelleiste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: var(--abstand-36);
  margin-block-start: var(--abstand-68);
  padding-inline: var(--seitenrand);
}

.bx-zeitachse__kapitel {
  position: relative;
  min-inline-size: 0;
  border-top: 2px solid var(--farbe-navy-linie-stark);
}

.bx-zeitachse__marke {
  position: absolute;
  inset-block-start: calc(var(--abstand-6) * -1);
  left: 1px; /* Design */
  width: 10px;
  height: 10px;
  background-color: var(--farbe-weiss);
  rotate: 45deg;
}

.bx-zeitachse__link {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-9);
  padding: var(--abstand-26) var(--abstand-20) 0 0;
  color: var(--farbe-weiss);
  transition: translate var(--bewegung-dauer-kurz);
}

.bx-zeitachse__link:hover,
.bx-zeitachse__link:focus-visible {
  translate: 0 var(--bewegung-lift);
}

.bx-zeitachse__kapitel .bx-zeitachse__jahr {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-kapitel-jahr-gewicht);
  font-size: var(--schrift-kapitel-jahr-groesse);
  line-height: var(--schrift-kapitel-jahr-zeile);
  letter-spacing: var(--schrift-kapitel-jahr-laufweite);
}

.bx-zeitachse__kurz {
  color: var(--farbe-navy-text-hell);
  font-weight: var(--schrift-kapitel-titel-gewicht);
  font-size: var(--schrift-kapitel-titel-groesse);
  line-height: var(--schrift-kapitel-titel-zeile);
  letter-spacing: var(--schrift-kapitel-titel-laufweite);
}

.bx-zeitachse__kapitel--aktuell .bx-zeitachse__marke {
  inset-block-start: calc(var(--abstand-8) * -1);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
  box-shadow: var(--schatten-puls-orange-aus);
  rotate: 0deg;
}

.bx-zeitachse__kapitel--aktuell .bx-zeitachse__jahr {
  color: var(--farbe-orange-navy-text);
}

/* == liste == */
.bx-zeitachse--liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--abstand-28) var(--abstand-32);
  margin-block-start: var(--abstand-72);
  border-top: 2px solid var(--farbe-navy);
}

.bx-zeitachse__eintrag {
  position: relative;
  min-inline-size: 0;
  padding-block-start: var(--abstand-22);
}

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

.bx-zeitachse__eintrag--aktuell .bx-zeitachse__marke {
  background-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__eintrag .bx-zeitachse__jahr {
  margin: 0;
  color: var(--farbe-navy);
  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-zeitachse__eintrag--aktuell .bx-zeitachse__jahr {
  color: var(--farbe-orange-text);
}

.bx-zeitachse__satz {
  margin: var(--abstand-10) 0 0;
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-liste-gewicht);
  font-size: var(--schrift-liste-groesse);
  line-height: var(--schrift-liste-zeile);
  letter-spacing: var(--schrift-liste-laufweite);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bx-zeitachse-steig {
    from {
      opacity: 0;
      translate: 0 10px;
    }
  }

  @keyframes bx-zeitachse-puls {
    from {
      box-shadow: var(--schatten-puls-orange-an);
    }
  }

  .bx-zeitachse__kapitel {
    animation: bx-zeitachse-steig var(--bewegung-einstieg-dauer) both;
  }

  .bx-zeitachse__kapitel:nth-child(2) {
    animation-delay: calc(.16s + var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(3) {
    animation-delay: calc(.16s + 2 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(4) {
    animation-delay: calc(.16s + 3 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(5) {
    animation-delay: calc(.16s + 4 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(6) {
    animation-delay: calc(.16s + 5 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel--aktuell .bx-zeitachse__marke {
    animation: bx-zeitachse-puls 2.4s infinite;
  }

  /* Kapitelleiste (Über uns Chronik v3 Z. 54–90): .7 s, erstes Kapitel erst nach .16 s, Puls mit 70-%-Stufe und ease-out */
  @keyframes bx-zeitachse-puls-leiste {
    0% {
      box-shadow: var(--schatten-puls-orange-an);
    }

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

  .bx-zeitachse--kapitelleiste .bx-zeitachse__kapitel {
    animation-duration: var(--bewegung-einstieg-kurz);
  }

  .bx-zeitachse--kapitelleiste .bx-zeitachse__kapitel:nth-child(1) {
    animation-delay: .16s;
  }

  .bx-zeitachse--kapitelleiste .bx-zeitachse__kapitel--aktuell .bx-zeitachse__marke {
    animation: bx-zeitachse-puls-leiste 2.4s ease-out infinite;
  }

  .bx-zeitachse--kapitelleiste .bx-zeitachse__link {
    transition-duration: var(--bewegung-kapitelleiste-lift-dauer);
    transition-timing-function: var(--bewegung-kurve-heraus);
  }
}

.bx-zeitachse--kapitelleiste .bx-zeitachse__link:hover,
.bx-zeitachse--kapitelleiste .bx-zeitachse__link:focus-visible {
  translate: 0 var(--bewegung-lift-gross);
}

@media (width < 1080px) {
  .bx-zeitachse--kapitelleiste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 768px) {
  .bx-zeitachse--kapitelleiste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--abstand-20);
    margin-block-start: var(--abstand-42);
  }

  .bx-zeitachse--liste {
    gap: var(--abstand-20) var(--abstand-20);
    margin-block-start: 45px; /* Design */
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: Variante `fristen` (Design `Loesung Abschluss v4` Zeitstrahl Z. 354–392, `Loesung Finanzen v4`
 * „E-Rechnungspflicht“ Z. 306–359) ==
 * Drei Stufen als Raster Jahr | Knoten | Karte, eine gestrichelte Linie zwischen den Knoten, der Status je Stufe aus dem
 * Build-Stichtag (`data-bx-stufe`). Die Heute-Marke steht vor der nächsten Stufe, ihr Fortschritt über
 * `data-bx-prozent` (Ph8 prozent.css). Mit `liste` steht die Navy-Liste rechts daneben, unter 1080px
 * darunter. Ohne den Modifikator `--fristen` greift keine dieser Regeln.
 */
.bx-zeitachse--fristen {
  display: block;
}

/*
 * Ph12 Design-Abgleich (V-E-loesungen-37, Rollen): der eigene Abschnitt mit Navy-Liste (Finanzen) steht im Seitenraster auf
 * dem hellen Band (Design `Loesung Finanzen v4` `#e-rechnung`: padding 50 / 56, Fläche #F4F6FA). Ohne Liste steckt die
 * Zeitachse in einer Karte (Abschluss zur Rechnung) und bleibt ohne Polster.
 */
.bx-zeitachse--fristen.bx-zeitachse--mit-liste {
  padding: var(--abstand-50) var(--seitenrand);
  background-color: var(--farbe-flaeche-band);
}

.bx-zeitachse--fristen .bx-zeitachse__kopf {
  max-inline-size: 780px;
  margin-block-end: var(--abstand-30);
}

.bx-zeitachse__fristen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-40);
  align-items: start;
}

.bx-zeitachse--mit-liste .bx-zeitachse__fristen-raster {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.bx-zeitachse__fristen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-zeitachse__stufe,
.bx-zeitachse__heute {
  position: relative;
  display: grid;
  grid-template-columns: 78px 36px minmax(0, 1fr);
  gap: 0 var(--abstand-18);
  padding-block-end: var(--abstand-18);
}

/* Linie von Knoten zu Knoten (gestrichelt; vor dem Erreichten durchgezogen) */
.bx-zeitachse__stufe::before,
.bx-zeitachse__heute::before {
  content: '';
  position: absolute;
  inset-block: var(--abstand-36) 0;
  inset-inline-start: calc(78px + var(--abstand-18) + var(--abstand-17)); /* Design: Mitte des Knotens */
  inline-size: 2px;
  background: repeating-linear-gradient(180deg, var(--farbe-linie-mittel) 0 6px, transparent 6px 12px);
}

.bx-zeitachse__stufe:last-child::before {
  content: none;
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"]::before {
  background: var(--farbe-navy);
}

.bx-zeitachse__stufe-jahr {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-block-start: var(--abstand-6);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-kachel-zahl-gewicht);
  font-size: var(--schrift-kachel-zahl-groesse);
  line-height: var(--schrift-kachel-zahl-zeile);
  letter-spacing: var(--schrift-kachel-zahl-laufweite);
  text-align: end;
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-jahr {
  color: var(--farbe-navy);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-jahr {
  color: var(--farbe-orange-text);
}

.bx-zeitachse__stufe-datum {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: var(--abstand-5) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-meta-mono-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-meta-mono-zeile);
  letter-spacing: var(--schrift-meta-mono-laufweite);
  text-align: end;
}

.bx-zeitachse__stufe-knoten {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie-mittel);
  box-sizing: border-box;
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-textlink-groesse);
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-knoten {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-knoten {
  border-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__stufe-karte {
  grid-column: 3;
  grid-row: 1 / span 2;
  padding: var(--abstand-14) var(--abstand-18);
  border-radius: var(--radius-rahmen);
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-weiss);
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-karte {
  border-color: var(--farbe-flaeche-karte);
  background-color: var(--farbe-flaeche-karte);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-karte {
  border-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__stufe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-8) var(--abstand-16);
  margin: 0;
}

.bx-zeitachse__stufe-titel {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  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);
  text-wrap: pretty;
}

.bx-zeitachse__stufe-pille {
  flex: none;
  padding: var(--abstand-6) var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
  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-chip-mono-laufweite);
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-orange-karte);
  color: var(--farbe-orange-text);
}

.bx-zeitachse__stufe-text {
  margin: var(--abstand-8) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  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);
  text-wrap: pretty;
}

.bx-zeitachse__stufe-zusatz {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-10);
  margin: var(--abstand-10) 0 0;
  color: var(--farbe-gruen-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-zeitachse__stufe-haken {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen);
}

/* Heute-Marke: kleiner Knoten, Datum, Fortschritt bis zur nächsten Stufe und Übergangszeile */
.bx-zeitachse__heute-knoten {
  position: relative;
  z-index: 1;
  grid-column: 2;
  justify-self: center;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__heute-inhalt {
  grid-column: 3;
  padding-block: var(--abstand-6) var(--abstand-4);
}

.bx-zeitachse__heute-marke {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-orange-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-zeitachse__heute-fortschritt {
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
  margin: 0;
}

.bx-zeitachse__heute-balken {
  position: relative;
  flex: 1;
  block-size: 6px;
  overflow: hidden;
  border-radius: var(--radius-mini);
  background-color: var(--farbe-linie);
}

.bx-zeitachse__heute-fuellung {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--bx-prozent, 0%);
  border-radius: var(--radius-mini);
  background: linear-gradient(90deg, var(--farbe-navy), var(--farbe-orange-flaeche));
}

.bx-zeitachse__heute-prozent {
  flex: none;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
}

.bx-zeitachse__heute-text {
  margin: var(--abstand-10) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

/* Navy-Liste neben den Stufen (FI) */
.bx-zeitachse__fristen-liste {
  padding: var(--abstand-28) var(--abstand-30);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-navy);
}

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

.bx-zeitachse__liste-punkte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-18);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-zeitachse__liste-punkt-titel {
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-trust-titel-gewicht);
  font-size: var(--schrift-trust-titel-groesse);
  line-height: var(--schrift-trust-titel-zeile);
}

.bx-zeitachse__liste-punkt-text {
  margin: 0;
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
}

.bx-zeitachse__stand,
.bx-zeitachse__quelle {
  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);
}

.bx-zeitachse__fristen-link {
  margin: var(--abstand-18) 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-karte {
    transition: transform var(--bewegung-dauer-kurz);
  }

  .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-karte:hover {
    transform: translateX(var(--abstand-4));
  }
}

@media (width < 1080px) {
  .bx-zeitachse--mit-liste .bx-zeitachse__fristen-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-zeitachse__stufe,
  .bx-zeitachse__heute {
    grid-template-columns: 56px 28px minmax(0, 1fr);
    gap: 0 var(--abstand-12);
  }

  .bx-zeitachse__stufe::before,
  .bx-zeitachse__heute::before {
    inset-block-start: var(--abstand-28);
    inset-inline-start: calc(var(--abstand-56) + var(--abstand-12) + var(--abstand-13));
  }

  .bx-zeitachse__stufe-knoten {
    inline-size: 28px;
    block-size: 28px;
  }

  .bx-zeitachse__stufe-jahr {
    font-size: var(--schrift-h3-groesse);
  }
}

/*
 * == Design-Abgleich 27.10. (Finanzen v5 „E-Rechnungspflicht“): Stufen als weiße Karten neben der Navy-Liste ==
 * Mit Liste (nur Finanzen) ist jede Stufe eine Karte (Radius 14, Rahmen, Polster 16 / 20) aus Jahres-Kachel 46 px und Text;
 * Knoten, Linie und Datum entfallen. Die Kartenspalte ist so hoch wie die Navy-Karte (Raster stretch, Karten gleich hoch,
 * Inhalt mittig); der Link steht in der Kopfzeile rechts neben der Einleitung.
 */
.bx-zeitachse__fristen-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-16) var(--abstand-40);
  margin-block-end: var(--abstand-28);
}

.bx-zeitachse__fristen-kopfzeile > .bx-zeitachse__kopf {
  max-inline-size: 760px;
  min-inline-size: 0;
  margin-block-end: 0;
}

.bx-zeitachse__fristen-kopflink {
  margin: 0;
  white-space: nowrap;
}

.bx-zeitachse--mit-liste .bx-zeitachse__fristen-raster {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--abstand-24);
  align-items: stretch;
}

.bx-zeitachse--mit-liste .bx-zeitachse__fristen {
  gap: var(--abstand-10);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe {
  flex: 1 1 0;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--abstand-16);
  align-items: center;
  align-content: center;
  padding: var(--abstand-16) var(--abstand-20);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-weiss);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe::before,
.bx-zeitachse--mit-liste .bx-zeitachse__stufe-datum,
.bx-zeitachse--mit-liste .bx-zeitachse__stufe-knoten {
  display: none;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-jahr {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  padding: 0;
  border-radius: var(--radius-promo);
  background-color: var(--farbe-flaeche-kachel);
  color: var(--farbe-navy);
  font-size: 14px; /* Wert laut Design */
  line-height: 1;
  letter-spacing: -.3px;
  text-align: center;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe] .bx-zeitachse__stufe-jahr {
  color: var(--farbe-navy);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-jahr {
  background-color: var(--farbe-orange-karte);
  color: var(--farbe-orange-text);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-karte {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe] .bx-zeitachse__stufe-karte {
  border: 0;
  background-color: transparent;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-kopf {
  justify-content: flex-start;
  gap: var(--abstand-10);
  margin-block-end: var(--abstand-4);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-titel {
  font-size: 15.5px; /* Wert laut Design */
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-pille {
  padding: 3px var(--abstand-10); /* Design */
  background-color: var(--farbe-linie-sektion);
  color: var(--farbe-app-chip-grau-text);
  font-family: var(--schrift-familie-text);
  font-size: 11px; /* Wert laut Design */
  letter-spacing: 0;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-text {
  margin: 0;
  font-size: var(--schrift-textlink-groesse);
  line-height: 1.55;
}

.bx-zeitachse--mit-liste .bx-zeitachse__fristen-liste {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-26) var(--abstand-28) var(--abstand-10);
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-titel {
  margin-block-end: var(--abstand-14);
  letter-spacing: 1.3px; /* Wert laut Design */
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkte {
  flex: 1 0 auto;
  gap: 0;
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkte > li {
  display: grid;
  flex: 1 0 auto;
  align-content: center;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--abstand-12);
  padding-block: var(--abstand-16);
  border-block-start: 1px solid var(--farbe-navy-linie);
}

.bx-zeitachse__liste-haken {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkt-titel {
  margin-block-end: 3px; /* Design */
  font-size: 15.5px; /* Wert laut Design */
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkt-text {
  color: var(--farbe-navy-text-lead);
  font-size: var(--schrift-textlink-groesse);
  line-height: 1.55;
}

/*
 * Abschnittstyp „rollenkarten“ (Vertrag Ph11 §3.3.8, Teilplan M0a §8.4; Design „Allgemein Rollen-Seiten“
 * „Rollenkarten“): Kopf und zwei bis vier Karten; vier Spalten, unter 1180 px zwei (lokale Schwelle des Designs,
 * A11-67), unter 768px eine. Bildfläche 172 px oder Schraffur ohne Text. Statisch.
 */
.bx-rollenkarten {
  position: relative;
  padding: var(--abstand-50) var(--seitenrand); /* Ph12 V-E-loesungen-80: in der Flucht des Seitenrands (Design 56 px im 1400er Rahmen) */
}

/* Ph12 V-E-loesungen-48: Kopf höchstens 620 px, die H2 steht zweizeilig */
.bx-rollenkarten .bx-sektionskopf {
  max-inline-size: 620px; /* Wert laut Design */
}

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

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

.bx-rollenkarten__karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--abstand-18); /* Ph12 V-E-loesungen-80: Design 18 px */
  margin: var(--abstand-32) 0 0;
  padding: 0;
  list-style: none;
}

.bx-rollenkarten__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-9); /* Ph12 V-E-loesungen-48: Design 9 px */
  overflow: hidden;
  padding: 0 0 var(--abstand-22); /* Bild randlos oben, Text mit Einzug (Design) */
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-weiss);
  transition: box-shadow var(--bewegung-dauer-kurz) var(--bewegung-kurve),
    transform var(--bewegung-dauer-kurz) var(--bewegung-kurve);
}

.bx-rollenkarten__karte:hover,
.bx-rollenkarten__karte:has(.bx-rollenkarten__link:focus-visible),
[data-sg-zustand="hover"] .bx-rollenkarten__karte {
  box-shadow: var(--schatten-rollenkarte-hover);
  transform: translateY(var(--bewegung-lift));
}

.bx-rollenkarten__bild {
  overflow: hidden;
  block-size: 172px;
  margin: 0 0 var(--abstand-10);
  border-radius: 0;
  background-color: var(--farbe-flaeche-kachel);
}

.bx-rollenkarten__bild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Abgleich mit dem Design 27.10.: senkrechter Ausschnitt je Foto (object-position 50% n) */
.bx-rollenkarten__bild[data-bx-fokus="30"] img {
  object-position: 50% 30%;
}

.bx-rollenkarten__bild[data-bx-fokus="35"] img {
  object-position: 50% 35%;
}

.bx-rollenkarten__bild[data-bx-fokus="45"] img {
  object-position: 50% 45%;
}

.bx-rollenkarten__bild[data-bx-platzhalter] {
  background: repeating-linear-gradient(45deg, var(--farbe-linie-karte) 0 8px, var(--farbe-flaeche-kachel) 8px 16px);
}

.bx-rollenkarten__kicker,
.bx-rollenkarten__text {
  margin: 0;
}

/* Ph12 V-E-loesungen-48/-80: Textblock mit 22 px Einzug unter dem randlosen Bild */
.bx-rollenkarten__karte > :not(.bx-rollenkarten__bild) {
  margin-inline: var(--abstand-22);
}

/* ohne Bilder (Finanzen) steht der Text mit 24 px Polster rundum (Design Finanzen v4 „Rollen“) */
.bx-rollenkarten:not([data-bx-bilder="ja"]) .bx-rollenkarten__karte {
  gap: var(--abstand-10);
  padding: var(--abstand-24);
}

.bx-rollenkarten:not([data-bx-bilder="ja"]) .bx-rollenkarten__karte > * {
  margin-inline: 0;
}

.bx-rollenkarten__kicker {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-karte-pille-gewicht);
  font-size: var(--schrift-karte-pille-groesse);
  line-height: var(--schrift-karte-pille-zeile);
  letter-spacing: var(--schrift-karte-pille-laufweite);
  text-transform: uppercase;
}

.bx-rollenkarten__text {
  flex: 1;
  color: var(--farbe-mikrotext); /* Ph12 V-E-loesungen-48: Design #5A6478 */
  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);
}

.bx-rollenkarten__link {
  align-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .bx-rollenkarten__karte,
  .bx-rollenkarten__karte:hover,
  .bx-rollenkarten__karte:has(.bx-rollenkarten__link:focus-visible) {
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* Lokale Schwelle des Designs (Rollenkarten zweispaltig unter 1180 px, A11-67) */
@media (width < 1180px) {
  .bx-rollenkarten__karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (width < 768px) {
  .bx-rollenkarten {
    padding: var(--abstand-40) var(--abstand-20);
  }

  .bx-rollenkarten__karten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Baustein „karten“ (Teilplan D3 §5.8, Design Über uns Chronik v2 Z. 227–244 und 314–332, Team Z. 75–92): Standard-,
 * Absage-, Glas- und Gesellschafts-Karten. Die Spaltenbreite läuft über die Wertetabellen am Ende (E1, CSP).
 */
.bx-karten {
  font-family: var(--schrift-familie-text);
}

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

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

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

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

.bx-karten__innen {
  max-width: var(--breite-inhalt-weit-max);
  margin-inline: auto;
}

/* Ph12 Design-Abgleich: „Drei Absagen“ bleibt im 1200-px-Raster (Ueber uns Chronik v3 Z. 238) */
.bx-karten--absage .bx-karten__innen {
  max-width: var(--breite-inhalt-mittel-max);
}

.bx-karten__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-karten-min, 260px)), 1fr));
  gap: var(--abstand-18);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-karten__karte {
  position: relative;
  min-inline-size: 0;
  padding: var(--abstand-karte-x);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
  transition: translate var(--bewegung-dauer-kurz), box-shadow var(--bewegung-dauer-kurz);
}

.bx-karten__karte--hover:hover,
.bx-karten__karte--hover:focus-within {
  translate: 0 var(--bewegung-lift);
  box-shadow: var(--schatten-karte-aktiv);
}

/*
 * Ph12 Design-Abgleich (Hosting v2, DSGVO v3): Ruheschatten und Hover-Lift der Karten ohne Link (`lift: true` am
 * Abschnitt). Bei reduzierter Bewegung bleibt die Karte stehen, der Ruheschatten bleibt.
 */
.bx-karten--lift .bx-karten__karte {
  box-shadow: var(--schatten-karte-lift-ruhe);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-karten--lift .bx-karten__karte {
    transition: translate var(--bewegung-dauer-lift), box-shadow var(--bewegung-dauer-lift);
  }

  .bx-karten--lift .bx-karten__karte:hover {
    translate: 0 var(--bewegung-lift-gross);
    box-shadow: var(--schatten-karte-lift);
  }
}

.bx-karten__karte--link .bx-karten__fuss a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.bx-karten__bild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin-block-end: var(--abstand-16);
  border-radius: var(--radius-rahmen);
}

.bx-karten__eyebrow {
  margin: 0 0 var(--abstand-8);
  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);
  text-transform: uppercase;
}

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

.bx-karten__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-karten__fuss {
  margin: var(--abstand-16) 0 0;
}

.bx-karten__aktion {
  margin: var(--abstand-28) 0 0;
}

.bx-karten__kopf-link,
.bx-karten__kopf-aktion {
  margin: 0;
}

.bx-karten__kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

/* == absage == */
.bx-karten--absage {
  padding: var(--abstand-sektion-kapitel) var(--seitenrand) var(--abstand-100);
  border-top: 1px solid var(--farbe-linie-karte);
}

.bx-karten--absage .bx-karten__kopf {
  max-width: 720px;
  margin: 0 auto var(--abstand-52);
}

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

.bx-karten--absage .bx-sektionskopf__eyebrow::before,
.bx-karten--gesellschaften .bx-sektionskopf__eyebrow::before {
  content: none;
}

.bx-karten--absage .bx-sektionskopf__titel {
  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-karten--absage .bx-karten__karte {
  padding: var(--abstand-28) var(--abstand-28) var(--abstand-30);
  transition: translate .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s cubic-bezier(.2, .7, .3, 1);
}

.bx-karten--absage .bx-karten__karte--hover:hover,
.bx-karten--absage .bx-karten__karte--hover:focus-within {
  translate: 0 var(--bewegung-lift-karte);
  box-shadow: var(--schatten-karte-hover);
}

.bx-karten--absage .bx-karten__pille {
  display: inline-block;
  margin: 0 0 var(--abstand-18);
  padding: var(--abstand-5) var(--abstand-9);
  border-radius: var(--radius-kachel-klein);
  background-color: var(--farbe-icon-orange);
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-karte-pille-gewicht);
  font-size: var(--schrift-karte-pille-groesse);
  line-height: var(--schrift-karte-pille-zeile);
  letter-spacing: var(--schrift-karte-pille-laufweite);
  text-transform: uppercase;
}

.bx-karten--absage .bx-karten__titel {
  margin-block-end: var(--abstand-12);
}

/* == glas-navy == */
.bx-karten--glas-navy {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-hero-unten) var(--seitenrand) var(--abstand-50);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-karten--glas-navy.bx-karten--navy-tief {
  background-color: var(--farbe-navy-tief);
}

.bx-karten--glas-navy::before {
  content: '';
  position: absolute;
  top: -200px; /* Design */
  right: -160px; /* Design */
  width: 720px;
  height: 620px;
  background: radial-gradient(closest-side, var(--farbe-glow-mint-hero), var(--farbe-glow-mint-aus));
  pointer-events: none;
}

.bx-karten--glas-navy .bx-karten__innen {
  position: relative;
  max-width: none; /* volle Breite zwischen den Seitenrändern wie im Layout des Entwurfs, keine Höchstbreite */
}

.bx-karten--glas-navy .bx-karten__innen--mit-rechts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--abstand-spalten);
  align-items: start;
}

.bx-karten--glas-navy .bx-sektionskopf__titel {
  margin-block-end: var(--abstand-12); /* Team v2 Z. 99 */
  color: var(--farbe-weiss);
  font-weight: var(--schrift-h2-dicht-gewicht);
  font-size: var(--schrift-h2-dicht-groesse);
  line-height: var(--schrift-h2-dicht-zeile);
  letter-spacing: var(--schrift-h2-dicht-laufweite);
}

.bx-karten--glas-navy .bx-sektionskopf__lead {
  max-width: 600px; /* Team v2 Z. 100 */
  margin-block-end: var(--abstand-26);
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-lead-dicht-gewicht);
  font-size: var(--schrift-lead-dicht-groesse);
  line-height: var(--schrift-lead-dicht-zeile);
  letter-spacing: var(--schrift-lead-dicht-laufweite);
}

.bx-karten--glas-navy .bx-karten__raster {
  /* Ph12 Design-Abgleich (Team v2, T10): so viele Spalten à mindestens 200 px (halbe Breite abzüglich halber Lücke) */
  grid-template-columns: repeat(auto-fill, minmax(max(min(200px, 100%), calc(50% - var(--abstand-6))), 1fr));
  max-width: 640px;
  gap: var(--abstand-12);
}

.bx-karten--glas-navy .bx-karten__karte {
  padding: var(--abstand-15) var(--abstand-17);
  border: 1px solid var(--farbe-navy-glas-rand);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-navy-glas);
}

.bx-karten--glas-navy .bx-karten__titel {
  margin: 0;
  color: var(--farbe-weiss);
  font-weight: var(--schrift-karte-klein-titel-gewicht);
  font-size: var(--schrift-karte-klein-titel-groesse);
  line-height: var(--schrift-karte-klein-titel-zeile);
  letter-spacing: var(--schrift-karte-klein-titel-laufweite);
}

.bx-karten--glas-navy .bx-karten__text {
  margin-block-start: var(--abstand-4);
  color: var(--farbe-navy-text-sekundaer);
  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-karten--glas-navy .bx-karten__aktion {
  margin-block-start: var(--abstand-26);
}

/* Team v2 Z. 117: "Sicherheit und Nachweise ansehen" 14,5 px mit 13/24 px */
.bx-karten--glas-navy .bx-karten__aktion .bx-button {
  padding: var(--abstand-13) var(--abstand-24);
  font-size: var(--schrift-button-kompakt-groesse);
}

/* Ph12 Design-Abgleich (Team v2): ganze Karte als Link, Hover und Fokus färben Rand und Titel mint */
.bx-karten--glas-navy .bx-karten__titellink {
  color: inherit;
  text-decoration: none;
}

.bx-karten--glas-navy .bx-karten__titellink::after {
  content: '';
  position: absolute;
  inset: 0;
}

.bx-karten--glas-navy .bx-karten__karte--kartenlink:hover,
.bx-karten--glas-navy .bx-karten__karte--kartenlink:focus-within {
  border-color: var(--farbe-mint);
}

.bx-karten--glas-navy .bx-karten__karte--kartenlink:hover .bx-karten__titellink,
.bx-karten--glas-navy .bx-karten__karte--kartenlink:focus-within .bx-karten__titellink {
  color: var(--farbe-mint);
}

/* == gesellschaften == */
.bx-karten--gesellschaften {
  padding: var(--abstand-44) var(--seitenrand) var(--abstand-48);
  border-top: 1px solid var(--farbe-linie-karte);
}

.bx-karten--gesellschaften .bx-karten__raster {
  max-width: var(--breite-inhalt-mittel-max);
  margin-inline: auto;
  gap: var(--abstand-28) var(--abstand-48);
}

.bx-karten--gesellschaften .bx-karten__kopf .bx-sektionskopf {
  margin-block-end: 0;
}

.bx-karten--gesellschaften .bx-sektionskopf__eyebrow {
  margin-block-end: var(--abstand-10);
  color: var(--farbe-mint-text);
}

.bx-karten--gesellschaften .bx-sektionskopf__titel {
  margin-block-end: var(--abstand-14);
  font-weight: var(--schrift-karte-kopf-klein-gewicht);
  font-size: var(--schrift-karte-kopf-klein-groesse);
  line-height: var(--schrift-karte-kopf-klein-zeile);
  letter-spacing: var(--schrift-karte-kopf-klein-laufweite);
}

.bx-karten--gesellschaften .bx-textlink {
  border-bottom-color: var(--farbe-linie-stark);
}

.bx-karten--gesellschaften .bx-textlink:hover {
  border-bottom-color: var(--farbe-orange-flaeche);
  color: var(--farbe-orange-text);
}

.bx-karten--gesellschaften .bx-karten__karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6);
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.bx-karten--gesellschaften .bx-karten__titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-10);
  margin: 0;
  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-karten--gesellschaften .bx-karten__pille {
  padding: var(--abstand-4) var(--abstand-7);
  border-radius: var(--radius-chip);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-karte-pille-gewicht);
  font-size: var(--schrift-karte-pille-groesse);
  line-height: var(--schrift-karte-pille-zeile);
  letter-spacing: var(--schrift-karte-pille-laufweite);
}

/* Ph12 Design-Abgleich (Chronik v3): ISO-Pille als Link, Hover orange (Kontrastwert H11-42), ohne Übergang wie im Design */
.bx-karten--gesellschaften a.bx-karten__pille--link {
  text-decoration: none;
}

.bx-karten--gesellschaften a.bx-karten__pille--link:hover {
  color: var(--farbe-orange-text);
}

.bx-karten__rolle {
  margin: 0;
  color: var(--farbe-gruen);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-karte-rolle-gewicht);
  font-size: var(--schrift-karte-rolle-groesse);
  line-height: var(--schrift-karte-rolle-zeile);
  letter-spacing: var(--schrift-karte-rolle-laufweite);
  text-transform: uppercase;
}

.bx-karten--gesellschaften .bx-karten__text {
  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);
}

@media (width < 1080px) {
  .bx-karten--glas-navy .bx-karten__innen--mit-rechts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-karten--absage {
    padding-block: var(--abstand-sektion-kapitel);
  }

  .bx-karten--absage .bx-karten__karte {
    padding: var(--abstand-28) var(--abstand-20) var(--abstand-30);
  }

  .bx-karten--glas-navy {
    padding: var(--abstand-hero-unten) var(--seitenrand) var(--abstand-40);
  }

  .bx-karten--glas-navy .bx-karten__aktion .bx-button {
    padding-inline: var(--abstand-20); /* Team v2 Mobil Z. 119 */
  }

  .bx-karten__raster[data-bx-spalten]:not(.bx-karten--glas-navy *) {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-karten--gesellschaften {
    padding: var(--abstand-35) var(--seitenrand) var(--abstand-38);
  }

  .bx-karten--gesellschaften .bx-karten__raster {
    gap: var(--abstand-20);
  }
}

/* Wertetabelle (E1, CSP): Mindestbreite der Karten, 160 bis 480 px in Zehnerschritten */
[data-bx-spalten-min="160"] {
  --bx-karten-min: 160px;
}

[data-bx-spalten-min="170"] {
  --bx-karten-min: 170px;
}

[data-bx-spalten-min="180"] {
  --bx-karten-min: 180px;
}

[data-bx-spalten-min="190"] {
  --bx-karten-min: 190px;
}

[data-bx-spalten-min="200"] {
  --bx-karten-min: 200px;
}

[data-bx-spalten-min="210"] {
  --bx-karten-min: 210px;
}

[data-bx-spalten-min="220"] {
  --bx-karten-min: 220px;
}

[data-bx-spalten-min="230"] {
  --bx-karten-min: 230px;
}

[data-bx-spalten-min="240"] {
  --bx-karten-min: 240px;
}

[data-bx-spalten-min="250"] {
  --bx-karten-min: 250px;
}

[data-bx-spalten-min="260"] {
  --bx-karten-min: 260px;
}

[data-bx-spalten-min="270"] {
  --bx-karten-min: 270px;
}

[data-bx-spalten-min="280"] {
  --bx-karten-min: 280px;
}

[data-bx-spalten-min="290"] {
  --bx-karten-min: 290px;
}

[data-bx-spalten-min="300"] {
  --bx-karten-min: 300px;
}

[data-bx-spalten-min="310"] {
  --bx-karten-min: 310px;
}

[data-bx-spalten-min="320"] {
  --bx-karten-min: 320px;
}

[data-bx-spalten-min="330"] {
  --bx-karten-min: 330px;
}

[data-bx-spalten-min="340"] {
  --bx-karten-min: 340px;
}

[data-bx-spalten-min="350"] {
  --bx-karten-min: 350px;
}

[data-bx-spalten-min="360"] {
  --bx-karten-min: 360px;
}

[data-bx-spalten-min="370"] {
  --bx-karten-min: 370px;
}

[data-bx-spalten-min="380"] {
  --bx-karten-min: 380px;
}

[data-bx-spalten-min="390"] {
  --bx-karten-min: 390px;
}

[data-bx-spalten-min="400"] {
  --bx-karten-min: 400px;
}

[data-bx-spalten-min="410"] {
  --bx-karten-min: 410px;
}

[data-bx-spalten-min="420"] {
  --bx-karten-min: 420px;
}

[data-bx-spalten-min="430"] {
  --bx-karten-min: 430px;
}

[data-bx-spalten-min="440"] {
  --bx-karten-min: 440px;
}

[data-bx-spalten-min="450"] {
  --bx-karten-min: 450px;
}

[data-bx-spalten-min="460"] {
  --bx-karten-min: 460px;
}

[data-bx-spalten-min="470"] {
  --bx-karten-min: 470px;
}

[data-bx-spalten-min="480"] {
  --bx-karten-min: 480px;
}

/* Wertetabelle (E1, CSP): feste Spaltenzahl 1 bis 4 */
[data-bx-spalten="1"] {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

[data-bx-spalten="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-bx-spalten="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-bx-spalten="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Phase 7 (Vertrag Ph7 §3.12.4, Ä7-8, Ä7-17; Teilplan G1c E-14 bis E-17): Varianten `vertrauen` (Preise APP, Design
 * Vertrauen) und `enthalten-spalten` (Preise CRM, Design Enthalten). Das Raster liegt als Wertetabelle `data-bx-spalten="3"`
 * oben; unter 768px steht eine Spalte.
 */

/* == vertrauen == */
.bx-karten--vertrauen {
  padding: var(--abstand-block-gross) var(--seitenrand) 0;
}

.bx-karten--vertrauen .bx-karten__innen {
  max-width: none; /* volle Breite zwischen den Seitenrändern wie im Design */
}

.bx-karten--vertrauen .bx-karten__kopf .bx-sektionskopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-40);
  max-width: none;
  margin-block-end: var(--abstand-34);
}

.bx-karten--vertrauen .bx-sektionskopf__titel {
  margin: 0;
}

.bx-karten--vertrauen .bx-sektionskopf__lead {
  max-width: 440px;
  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-karten--vertrauen .bx-karten__raster {
  gap: var(--abstand-20);
}

.bx-karten--vertrauen .bx-karten__karte {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-26) var(--abstand-28);
  border-radius: var(--radius-karte-klein);
}

.bx-karten__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  margin-block-end: var(--abstand-16);
  border-radius: var(--radius-eingabe);
}

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

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

.bx-karten__icon[data-bx-icon="navy"] {
  background-color: var(--farbe-icon-navy);
  color: var(--farbe-navy);
}

.bx-karten--vertrauen .bx-karten__titel {
  font-weight: var(--schrift-treffer-titel-gewicht);
  font-size: var(--schrift-treffer-titel-groesse);
  line-height: var(--schrift-treffer-titel-zeile);
  letter-spacing: var(--schrift-treffer-titel-laufweite);
  text-wrap: balance;
}

.bx-karten--vertrauen .bx-karten__text {
  flex: 1;
  margin-block-end: var(--abstand-16);
  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-karten__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-6);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chip: Mono-Versalien auf Navy, vorn der Mint-Punkt; mit Zertifikat steht die Gesellschaft in einer zweiten Zeile.
   Auf `vertrauen` begrenzt, damit `nummeriert` (Ph8) die Regeln nicht erbt (P-H0B-B-1, N8-95 Nr. 6). */
.bx-karten--vertrauen .bx-karten__chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--abstand-6);
  padding: var(--abstand-8) var(--abstand-12);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  white-space: nowrap;
}

.bx-karten--vertrauen .bx-karten__chip::before {
  content: '';
  grid-row: 1 / span 2;
  inline-size: var(--abstand-5);
  block-size: var(--abstand-5);
  border-radius: var(--radius-rund);
  background-color: var(--farbe-mint);
}

.bx-karten--vertrauen a.bx-karten__chip:hover {
  color: var(--farbe-mint);
}

.bx-karten--vertrauen .bx-karten__chip-name {
  grid-column: 2;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-chip-mono-gewicht);
  font-size: var(--schrift-chip-mono-groesse);
  line-height: var(--schrift-chip-mono-zeile);
  letter-spacing: var(--schrift-chip-mono-laufweite);
  text-transform: uppercase;
}

.bx-karten--vertrauen .bx-karten__chip-gesellschaft {
  grid-column: 2;
  color: var(--farbe-navy-text-sekundaer);
  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);
}

/* == enthalten-spalten == */
.bx-karten--enthalten-spalten {
  padding: var(--abstand-block-gross) var(--seitenrand) 0;
}

.bx-karten--enthalten-spalten .bx-karten__innen {
  max-width: none;
  padding-block-start: var(--abstand-44);
  border-top: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--enthalten-spalten .bx-karten__raster {
  gap: var(--abstand-44);
}

.bx-karten--enthalten-spalten .bx-karten__karte {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.bx-karten--enthalten-spalten .bx-karten__titel {
  margin-block-end: var(--abstand-10);
  font-weight: var(--schrift-treffer-titel-gewicht);
  font-size: var(--schrift-treffer-titel-groesse);
  line-height: var(--schrift-treffer-titel-zeile);
  letter-spacing: var(--schrift-treffer-titel-laufweite);
}

.bx-karten--enthalten-spalten .bx-karten__text {
  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-karten--enthalten-spalten .bx-textlink {
  border-bottom: 0;
  color: var(--farbe-orange-text);
}

@media (width < 768px) {
  .bx-karten--vertrauen .bx-karten__raster,
  .bx-karten--enthalten-spalten .bx-karten__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-karten--vertrauen .bx-karten__raster {
    gap: var(--abstand-14);
  }

  .bx-karten--vertrauen .bx-karten__kopf .bx-sektionskopf {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-12);
    margin-block-end: var(--abstand-24);
  }

  .bx-karten--enthalten-spalten .bx-karten__raster {
    gap: var(--abstand-gruppe);
  }
}

/* Block „Ph8 H0b“ (Vertrag Ph8 §3.4.12, Ä8-5, Teilplan H0b E18): Variante `nummeriert`, Nummer und Akzent je `ton` */

.bx-karten__karte--nummeriert {
  --bx-karten-ton: var(--farbe-orange-text);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-10);
  border-block-start: 3px solid var(--bx-karten-ton);
}

.bx-karten__karte--nummeriert[data-bx-ton="mint"] {
  --bx-karten-ton: var(--farbe-mint-text);
}

.bx-karten__karte--nummeriert[data-bx-ton="navy"] {
  --bx-karten-ton: var(--farbe-navy);
}

.bx-karten__karte--nummeriert[data-bx-ton="graublau"] {
  --bx-karten-ton: var(--farbe-kette-graublau);
}

.bx-karten__karte--nummeriert[data-bx-ton="gelb"] {
  --bx-karten-ton: var(--farbe-team-service);
}

.bx-karten__nummer {
  margin: 0;
  color: var(--bx-karten-ton);
  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);
}

.bx-karten__karte--nummeriert .bx-karten__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-9);
  margin: var(--abstand-12) 0 0;
  padding: 0;
  list-style: none;
}

.bx-karten__karte--nummeriert .bx-karten__chip {
  display: inline-flex;
  flex-direction: column;
  padding: var(--abstand-6) var(--abstand-10);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-kachel-klein);
  background-color: transparent;
  color: var(--farbe-navy);
  white-space: normal;
}

.bx-karten__karte--nummeriert .bx-karten__chip::before {
  content: none;
}

.bx-karten__karte--nummeriert a.bx-karten__chip:hover,
[data-sg-zustand="hover"] .bx-karten__karte--nummeriert a.bx-karten__chip {
  border-color: var(--farbe-navy);
}

.bx-karten__karte--nummeriert .bx-karten__chip-name {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-pille-zeile);
}

.bx-karten__karte--nummeriert .bx-karten__chip-gesellschaft {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-karten__karte--nummeriert .bx-karten__chips-eintrag:last-child:not(:first-child) .bx-karten__chip {
  padding-inline: 0;
  border-color: transparent;
  color: var(--farbe-titel-zweitton);
}

.bx-karten__fusssatz {
  margin: var(--abstand-24) 0 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);
  text-align: center;
}

/*
 * Ph12 Design-Abgleich (V-C-crm-24): `raster: kopf-links` der Variante `nummeriert`: Kopf links (340 px), rechts Karten 2 × 2
 * auf heller Fläche mit Rand, Nummer orange (Design Onboarding v2 „Voraussetzungen“, Z. 413–425). Unter „stapeln“ steht der
 * Kopf über den Karten, unter „mobil“ eine Spalte.
 */
.bx-karten--kopf-links .bx-karten__haupt {
  display: grid;
  grid-template-columns: var(--breite-kopf-links) minmax(0, 1fr);
  gap: var(--abstand-56);
  align-items: start;
}

.bx-karten--kopf-links .bx-karten__kopf {
  margin-block-end: 0;
}

.bx-karten__raster[data-bx-raster="kopf-links"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-14);
}

.bx-karten__raster[data-bx-raster="kopf-links"] > .bx-karten__karte {
  gap: var(--abstand-7);
  padding: var(--abstand-24) var(--abstand-26);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-panel);
  background-color: var(--farbe-flaeche-zart);
}

.bx-karten__raster[data-bx-raster="kopf-links"] .bx-karten__nummer {
  margin-block-end: var(--abstand-5);
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-karte-ziffer-gewicht);
  font-size: var(--schrift-karte-ziffer-groesse);
  line-height: var(--schrift-karte-ziffer-zeile);
  letter-spacing: var(--schrift-karte-ziffer-laufweite);
}

.bx-karten__raster[data-bx-raster="kopf-links"] .bx-karten__titel {
  margin: 0;
  font-weight: var(--schrift-karte-titel-mittel-gewicht);
  font-size: var(--schrift-button-groesse);
}

.bx-karten__raster[data-bx-raster="kopf-links"] .bx-karten__text {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-kennzahl-text-groesse);
  line-height: var(--schrift-kennzahl-text-zeile);
}

@media (width < 1080px) {
  .bx-karten--kopf-links .bx-karten__haupt {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-32);
  }
}

@media (width < 768px) {
  .bx-karten__raster[data-bx-raster="kopf-links"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * == Block „Ph8 H2c“ (Vertrag Ph8 Ä8-5, H8-14/B11, H2c R-2; Teilplan H2c §2; Design CRM Produktseite v2 „Was Sie davon
 * haben“) ==
 * `raster: bento` der Variante `nummeriert`: zwölf Spalten (7/5, dann 4/4/4), Karte mit `ton: navy` als Navy-Karte mit
 * Mint-Glow, die Nummer als Geisterziffer rechts oben, die Oberkante je `ton`. Jede Regel trägt den Vorsatz des Rasters
 * bzw. der Sektion `bx-karten--bento` (P-H2C-10: Polster und Seitenrand wie die Nachbarsektionen, volle Inhaltsbreite).
 */
.bx-karten--bento {
  padding: var(--abstand-sektion) var(--seitenrand) var(--abstand-60);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--bento .bx-karten__innen {
  max-width: none;
}

/* Eyebrow „Was Sie davon haben“ grün auf Hell wie im Design (NP-H2C-3 c) */
.bx-karten--bento .bx-sektionskopf__eyebrow {
  color: var(--farbe-mint-text);
}

.bx-karten--bento .bx-karten__kopf {
  margin-block-end: var(--abstand-30);
}

.bx-karten__raster[data-bx-raster="bento"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--abstand-14);
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte {
  grid-column: span 4;
  overflow: hidden;
  padding: var(--abstand-24) var(--abstand-26) var(--abstand-26);
  border-radius: var(--radius-panel);
  transition: translate var(--bewegung-dauer-kurz), box-shadow var(--bewegung-dauer-kurz), border-color var(--bewegung-dauer-kurz);
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:nth-child(1) {
  grid-column: span 7;
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:nth-child(2) {
  grid-column: span 5;
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:hover,
.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:focus-within {
  border-color: var(--bx-karten-ton);
  box-shadow: var(--schatten-karte-aktiv);
  translate: 0 var(--bewegung-lift);
}

/* Geisterziffer: die Nummer liegt rechts oben hinter dem Inhalt (Design 46 px, mobil 30 px; P-H2C-2) */
.bx-karten__raster[data-bx-raster="bento"] .bx-karten__nummer {
  position: absolute;
  inset-block-start: var(--abstand-10);
  inset-inline-end: var(--abstand-16);
  color: var(--farbe-flaeche-band);
  font-weight: var(--schrift-bento-ziffer-gewicht);
  font-size: var(--schrift-bento-ziffer-groesse);
  line-height: var(--schrift-bento-ziffer-zeile);
  letter-spacing: var(--schrift-bento-ziffer-laufweite);
  pointer-events: none;
}

.bx-karten__raster[data-bx-raster="bento"] .bx-karten__titel {
  position: relative;
  max-inline-size: 340px;
  margin: 0 0 var(--abstand-10);
  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);
  text-wrap: pretty;
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:nth-child(-n + 2) .bx-karten__titel {
  margin-block-end: var(--abstand-12);
  font-weight: var(--schrift-ergebnis-titel-gewicht);
  font-size: var(--schrift-ergebnis-titel-groesse);
  line-height: var(--schrift-ergebnis-titel-zeile);
  letter-spacing: var(--schrift-ergebnis-titel-laufweite);
}

.bx-karten__raster[data-bx-raster="bento"] .bx-karten__text {
  position: relative;
  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);
  text-wrap: pretty;
}

/* Link und Chips: der Link steht unter dem Text, die Chips am Fuß der Karte */
.bx-karten__raster[data-bx-raster="bento"] .bx-karten__fuss {
  position: relative;
  order: 1;
  margin-block-start: var(--abstand-6);
}

/* Ph12 Design-Abgleich (V-C-crm-15): Textlink der hellen Bento-Karten orange und ohne Linie (Design CRM Produktseite v2 Z. 230, 251) */
.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:not([data-bx-ton="navy"]) .bx-karten__fuss .bx-textlink {
  border-bottom: 0;
  color: var(--farbe-orange-text);
}

.bx-karten__raster[data-bx-raster="bento"] .bx-karten__karte--nummeriert .bx-karten__chips {
  position: relative;
  order: 2;
  margin-block-start: auto;
  padding-block-start: var(--abstand-22);
}

/* Weiße Karte mit Chips (Karte 02): gefüllte Chips ohne Rand wie im Design (NP-H2C-3 a) */
.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:not([data-bx-ton="navy"]) {
  --bx-karten-chip-rand: transparent;
  --bx-karten-chip-flaeche: var(--farbe-flaeche-hinweis);
  --bx-karten-chip-farbe: var(--farbe-chip-blau-text);
}

/* Navy-Karte: Fläche, Glow rechts oben, helle Texte und Chips */
.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte[data-bx-ton="navy"] {
  --bx-karten-chip-rand: var(--farbe-navy-glas-rand);
  --bx-karten-chip-flaeche: var(--farbe-navy-flaeche-zart);
  --bx-karten-chip-farbe: var(--farbe-weiss);
  --bx-karten-chip-zusatz: var(--farbe-navy-text-sekundaer);
  padding: var(--abstand-30) var(--abstand-34) var(--abstand-32);
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte[data-bx-ton="navy"]::before {
  content: '';
  position: absolute;
  inset-block-start: -140px; /* Design */
  inset-inline-end: calc(-1 * var(--abstand-90));
  inline-size: 460px;
  block-size: 400px;
  background: radial-gradient(closest-side, var(--farbe-glow-mint-gruenwelt), transparent);
  pointer-events: none;
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte[data-bx-ton="navy"] .bx-karten__nummer {
  color: var(--farbe-navy-flaeche-zart);
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte[data-bx-ton="navy"] .bx-karten__titel {
  max-inline-size: 460px;
  color: var(--farbe-weiss);
}

.bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte[data-bx-ton="navy"] .bx-karten__text {
  max-inline-size: 480px;
  color: var(--farbe-navy-text-sekundaer);
}

/* Navy-Karte: die Chips folgen direkt dem Text (Design ohne Fußausrichtung, Fix-Runde H2c) */
.bx-karten__raster[data-bx-raster="bento"] > [data-bx-ton="navy"].bx-karten__karte--nummeriert .bx-karten__chips {
  margin-block-start: 0;
}

.bx-karten__raster[data-bx-raster="bento"] .bx-karten__karte--nummeriert .bx-karten__chip {
  border-color: var(--bx-karten-chip-rand, var(--farbe-linie));
  background-color: var(--bx-karten-chip-flaeche, transparent);
  color: var(--bx-karten-chip-farbe, var(--farbe-navy));
}

.bx-karten__raster[data-bx-raster="bento"] .bx-karten__karte--nummeriert .bx-karten__chips-eintrag:last-child:not(:first-child) .bx-karten__chip {
  border-color: transparent;
  background-color: transparent;
  color: var(--bx-karten-chip-zusatz, var(--farbe-titel-zweitton));
}

/* Zusatz („eine Akte“, „in Basis“): Fließtext statt Mono (Design Archivo 400 12.5 px, P-H2C-1) */
.bx-karten__raster[data-bx-raster="bento"] .bx-karten__karte--nummeriert .bx-karten__chips-eintrag:last-child:not(:first-child) .bx-karten__chip-name {
  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);
}

/* Trennpunkte „·“ zwischen den Chips der Navy-Karte, nicht vor dem Zusatz (Design #54608A ≈ --farbe-navy-rand-mittel
   auf Navy, P-H2C-1); hinter dem Chip, damit der Punkt beim Umbruch am Zeilenende bleibt; nur Darstellung, ohne Text
   für Screenreader */
.bx-karten__raster[data-bx-raster="bento"] > [data-bx-ton="navy"].bx-karten__karte--nummeriert .bx-karten__chips-eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-9);
}

.bx-karten__raster[data-bx-raster="bento"] > [data-bx-ton="navy"].bx-karten__karte--nummeriert .bx-karten__chips-eintrag:not(:last-child):not(:nth-last-child(2))::after {
  content: '·' / '';
  color: var(--farbe-navy-rand-mittel);
}

@media (width < 768px) {
  .bx-karten--bento {
    padding-block-end: var(--abstand-48);
  }

  .bx-karten__raster[data-bx-raster="bento"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte[data-bx-ton="navy"] {
    padding-inline: var(--abstand-20);
  }

  .bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte,
  .bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:nth-child(1),
  .bx-karten__raster[data-bx-raster="bento"] > .bx-karten__karte:nth-child(2) {
    grid-column: auto;
  }
}

/*
 * == Block „Ph8 H1c“ (Vertrag Ph8 §3.4.12, Ä8-5, H8-14/H1c R2; Teilplan H1c §4.6; Design Onboarding v2) ==
 * Varianten `aussage` („Vier Sätze“), `drei-spalten` („Kurzfassung“) und die Erweiterung von `standard`: Punkte
 * („Training“), Chips („Migrationswege“), `hervorgehoben` und der Hinweis-Kasten neben dem Kopf. Jede Chip-Regel trägt
 * den Vorsatz `.bx-karten--standard`.
 */
.bx-karten--standard,
.bx-karten--aussage,
.bx-karten--drei-spalten {
  padding: var(--abstand-block-gross) var(--seitenrand);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--aussage .bx-karten__kopf,
.bx-karten--drei-spalten .bx-karten__kopf,
.bx-karten--standard .bx-karten__kopf {
  margin-block-end: var(--abstand-40);
}

.bx-karten--aussage .bx-karten__kopf,
.bx-karten--drei-spalten .bx-karten__kopf {
  max-width: 700px;
}

/* Kopfzeile mit Hinweis-Kasten (Training: „Gesteuert über awork“) */
.bx-karten__kopfzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--abstand-56);
  align-items: end;
  margin-block-end: var(--abstand-44);
}

.bx-karten__kopfzeile .bx-karten__kopf {
  margin-block-end: 0;
}

.bx-karten__hinweis {
  padding: var(--abstand-24) var(--abstand-26);
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-flaeche-zart);
}

.bx-karten--zart .bx-karten__hinweis {
  background-color: var(--farbe-weiss);
}

.bx-karten__hinweis-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);
}

.bx-karten__hinweis-text {
  margin: 0;
  color: var(--farbe-text-sekundaer);
  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);
  text-wrap: pretty;
}

/* standard mit Punkten: flache Spalten mit Kopflinie (Training) */
.bx-karten--standard .bx-karten__raster:has(.bx-karten__karte--punkte) {
  gap: 0;
}

.bx-karten--standard .bx-karten__karte--punkte {
  padding: var(--abstand-22) var(--abstand-26) 0;
  border: 0;
  border-block-start: 3px solid var(--farbe-navy);
  border-radius: 0;
  background-color: transparent;
}

.bx-karten--standard .bx-karten__karte--punkte + .bx-karten__karte--punkte {
  border-inline-start: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--standard .bx-karten__karte--punkte:first-child {
  padding-inline-start: 0;
}

.bx-karten--standard .bx-karten__karte--punkte:last-child {
  padding-inline-end: 0;
}

.bx-karten--standard .bx-karten__karte--punkte.bx-karten__karte--hervorgehoben {
  border-block-start-color: var(--farbe-orange-flaeche);
}

.bx-karten--standard .bx-karten__karte--punkte .bx-karten__titel {
  margin-block-end: var(--abstand-18);
}

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

.bx-karten--standard .bx-karten__punkte li {
  padding: var(--abstand-10) 0;
  border-block-start: 1px solid var(--farbe-linie-sektion);
  color: var(--farbe-text-sekundaer);
  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);
}

/*
 * Ph12 Design-Abgleich (V-F-inhalte-28, DSGVO v3 „Drei Unterlagen“): `standard` mit Punkten und `lift: true` sind weiße
 * Karten mit Rand, Radius und Ruheschatten statt flacher Spalten; Punkte als Rauten am Kartenfuß unter einer Linie.
 */
.bx-karten--standard.bx-karten--lift .bx-karten__raster:has(.bx-karten__karte--punkte) {
  gap: var(--abstand-18);
}

.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte,
.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte:first-child,
.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte:last-child {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-28) var(--abstand-30) var(--abstand-26);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
}

.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte + .bx-karten__karte--punkte {
  border-inline-start: 1px solid var(--farbe-linie);
}

.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte .bx-karten__eyebrow {
  margin-block-end: var(--abstand-14);
}

.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte .bx-karten__titel {
  margin-block-end: var(--abstand-12);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.28;
  letter-spacing: -0.5px;
  text-wrap: pretty;
}

.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte .bx-karten__text {
  margin-block-end: var(--abstand-20);
  font-size: 14.5px;
  line-height: 1.62;
  text-wrap: pretty;
}

.bx-karten--standard.bx-karten--lift .bx-karten__karte--punkte .bx-karten__punkte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-11);
  margin-block-start: auto;
  padding-block-start: var(--abstand-20);
  border-block-start: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--standard.bx-karten--lift .bx-karten__punkte li {
  display: flex;
  gap: var(--abstand-11);
  align-items: flex-start;
  padding: 0;
  border-block-start: 0;
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.bx-karten--standard.bx-karten--lift .bx-karten__punkte li::before {
  content: '';
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: var(--abstand-7);
  background-color: var(--farbe-mint-akzent);
  rotate: 45deg;
}

/* Hinweiszeile mit Link unter den Karten (Block `unten`, V-F-inhalte-28) */
.bx-karten__unten {
  display: flex;
  align-items: center;
  gap: var(--abstand-14);
  margin: var(--abstand-20) 0 0;
  color: var(--farbe-mikrotext);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
}

.bx-karten__unten .bx-textlink {
  border-block-end: 0;
  color: var(--farbe-gruen);
  font-size: 14.5px;
  white-space: nowrap;
}

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

@media (width < 768px) {
  .bx-karten__unten {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-8);
  }
}

/* standard mit Chips: Karte mit Kopflinie nach der Eyebrow (Migrationswege) */
.bx-karten--standard .bx-karten__karte--chips {
  padding: var(--abstand-30) var(--abstand-32);
}

.bx-karten--standard .bx-karten__karte--chips .bx-karten__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--abstand-10);
  margin-block-end: var(--abstand-16);
  color: var(--farbe-mint-text);
  font-weight: var(--schrift-label-gewicht);
}

.bx-karten--standard .bx-karten__karte--chips .bx-karten__eyebrow::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background-color: var(--farbe-linie);
}

.bx-karten--standard .bx-karten__karte--chips.bx-karten__karte--hervorgehoben .bx-karten__eyebrow,
.bx-karten--standard .bx-karten__karte--chips:nth-child(2n) .bx-karten__eyebrow {
  color: var(--farbe-orange-text);
}

.bx-karten--standard .bx-karten__karte--chips .bx-karten__text {
  margin-block-end: var(--abstand-20);
  font-weight: var(--schrift-lead-gewicht);
  font-size: var(--schrift-liste-groesse);
  line-height: var(--schrift-lead-zeile);
}

.bx-karten--standard .bx-karten__chips {
  gap: var(--abstand-7);
  margin: 0;
}

.bx-karten--standard .bx-karten__chip {
  display: inline-flex;
  padding: var(--abstand-6) var(--abstand-11);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-kachel-klein);
  background-color: var(--farbe-flaeche-zart);
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-widget-knopf-gewicht);
  font-size: var(--schrift-widget-knopf-groesse);
  line-height: var(--schrift-widget-knopf-zeile);
}

/* == aussage == */
.bx-karten--aussage .bx-karten__raster {
  display: block;
}

.bx-karten__karte--aussage {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 200px;
  gap: var(--abstand-32);
  align-items: start;
  padding: var(--abstand-34) 0;
  border: 0;
  border-block-start: 1px solid var(--farbe-linie);
  border-radius: 0;
  background-color: transparent;
}

.bx-karten__karte--aussage:last-child {
  border-block-end: 1px solid var(--farbe-linie);
}

.bx-karten__aussage-nummer {
  margin: 0;
  color: var(--farbe-linie);
  font-weight: var(--schrift-aussage-gewicht);
  font-size: var(--schrift-aussage-groesse);
  line-height: var(--schrift-aussage-zeile);
  letter-spacing: var(--schrift-aussage-laufweite);
}

.bx-karten__karte--aussage .bx-karten__titel {
  margin-block-end: var(--abstand-16);
  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-karten__karte--aussage .bx-karten__text {
  max-width: 620px;
  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);
}

.bx-karten__aussage-pille {
  margin: 0;
  text-align: end;
}

.bx-karten__aussage-pille span {
  display: inline-block;
  padding: var(--abstand-8) var(--abstand-12);
  border-radius: var(--radius-klein);
  background-color: var(--farbe-mint-flaeche);
  color: var(--farbe-gruen);
  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);
}

.bx-karten__karte--aussage.bx-karten__karte--hervorgehoben .bx-karten__aussage-nummer {
  color: var(--farbe-orange-nummer-blass);
}

.bx-karten__karte--aussage.bx-karten__karte--hervorgehoben .bx-karten__titel {
  color: var(--farbe-orange-text);
}

.bx-karten__karte--aussage.bx-karten__karte--hervorgehoben .bx-karten__aussage-pille span {
  background-color: var(--farbe-orange-flaeche);
  color: var(--farbe-weiss);
}

/* == drei-spalten == */
.bx-karten--drei-spalten .bx-karten__raster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.bx-karten__karte--spalte {
  overflow: hidden;
  padding: 0;
  border-radius: 0;
}

.bx-karten__karte--spalte:first-child {
  border-radius: var(--radius-karte) 0 0 var(--radius-karte);
}

.bx-karten__karte--spalte + .bx-karten__karte--spalte {
  border-inline-start: 0;
  border-radius: 0 var(--radius-karte) var(--radius-karte) 0;
}

.bx-karten__spaltenkopf {
  padding: var(--abstand-24) var(--abstand-30) var(--abstand-18);
  border-block-start: 3px solid var(--farbe-navy);
}

.bx-karten__karte--spalte + .bx-karten__karte--spalte .bx-karten__spaltenkopf {
  border-block-start-color: var(--farbe-orange-flaeche);
}

.bx-karten__kicker {
  margin: 0 0 var(--abstand-11);
  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);
}

.bx-karten__karte--spalte + .bx-karten__karte--spalte .bx-karten__kicker {
  color: var(--farbe-orange-text);
}

.bx-karten__karte--spalte .bx-karten__titel {
  margin: 0;
}

.bx-karten__karte--spalte .bx-karten__punkte li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--abstand-13);
  align-items: start;
  padding: var(--abstand-15) var(--abstand-30);
  border-block-start: 1px solid var(--farbe-linie-sektion);
  color: var(--farbe-text-sekundaer);
  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-karten__karte--spalte .bx-karten__punkte li::before {
  content: '';
  inline-size: 9px;
  block-size: 9px;
  margin-block-start: var(--abstand-5);
  border: 1.5px solid var(--farbe-linie-stark);
  border-radius: var(--radius-mini);
}

.bx-karten__karte--spalte + .bx-karten__karte--spalte .bx-karten__punkte li::before {
  border-color: var(--farbe-orange-flaeche);
  background-color: var(--farbe-orange-flaeche);
}

.bx-karten__karte--ergebnis {
  grid-column: 1 / -1;
  margin-block-start: var(--abstand-20);
  padding: var(--abstand-40) var(--abstand-40) var(--abstand-44);
  border: 0;
  border-radius: var(--radius-karte-gross);
  background-color: var(--farbe-navy);
  background-image: linear-gradient(199deg, var(--farbe-navy-glas) 0 36%, transparent 36.1%);
  color: var(--farbe-weiss);
}

.bx-karten__ergebnis-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--abstand-40);
  align-items: start;
  margin-block-end: var(--abstand-36);
}

.bx-karten__karte--ergebnis .bx-karten__kicker {
  margin-block-end: var(--abstand-14);
  color: var(--farbe-mint);
}

.bx-karten__karte--ergebnis .bx-karten__titel {
  margin: 0;
  color: var(--farbe-weiss);
  font-weight: var(--schrift-ergebnis-titel-gewicht);
  font-size: var(--schrift-ergebnis-titel-groesse);
  line-height: var(--schrift-h2-zeile);
  letter-spacing: var(--schrift-ergebnis-titel-laufweite);
  text-wrap: pretty;
}

.bx-karten__ergebnis-pille {
  margin: 0;
  padding: var(--abstand-8) var(--abstand-15);
  border: 1px solid var(--farbe-mint-box-rand);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-mint-box);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-pille-gross-gewicht);
  font-size: var(--schrift-pille-gross-groesse);
  line-height: var(--schrift-pille-gross-zeile);
  white-space: nowrap;
}

.bx-karten__karte--ergebnis .bx-karten__punkte {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--abstand-24);
}

.bx-karten__karte--ergebnis .bx-karten__punkte li {
  padding-block-start: var(--abstand-17);
  border-block-start: 3px solid var(--farbe-mint);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-treffer-titel-gewicht);
  font-size: var(--schrift-treffer-titel-groesse);
  line-height: var(--schrift-treffer-titel-zeile);
  text-wrap: pretty;
}

@media (width < 1080px) {
  .bx-karten__kopfzeile {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-24);
  }

  .bx-karten__karte--ergebnis .bx-karten__punkte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 768px) {
  .bx-karten--standard .bx-karten__raster:has(.bx-karten__karte--punkte) {
    gap: var(--abstand-24);
  }

  .bx-karten--standard .bx-karten__karte--punkte,
  .bx-karten--standard .bx-karten__karte--punkte:first-child,
  .bx-karten--standard .bx-karten__karte--punkte:last-child {
    padding-inline: 0;
  }

  .bx-karten--standard .bx-karten__karte--punkte + .bx-karten__karte--punkte {
    border-inline-start: 0;
  }

  .bx-karten--standard .bx-karten__karte--chips {
    padding: var(--abstand-24) var(--abstand-20);
  }

  .bx-karten__karte--aussage {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-14);
  }

  .bx-karten__aussage-pille {
    text-align: start;
  }

  .bx-karten--drei-spalten .bx-karten__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-karten__karte--spalte:first-child,
  .bx-karten__karte--spalte + .bx-karten__karte--spalte {
    border: 1px solid var(--farbe-linie-karte);
    border-radius: var(--radius-karte);
  }

  .bx-karten__karte--spalte + .bx-karten__karte--spalte {
    margin-block-start: var(--abstand-14);
  }

  .bx-karten__karte--ergebnis {
    padding: var(--abstand-32) var(--abstand-20) var(--abstand-34);
  }

  .bx-karten__ergebnis-kopf {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-20);
  }

  /* Ph12 Design-Abgleich (P-DAC-6, O7): die Pille bricht um und bleibt in der Karte (Design Onboarding mobil) */
  .bx-karten__ergebnis-pille {
    max-inline-size: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

  .bx-karten__karte--ergebnis .bx-karten__punkte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Ph8 H2a: CF-Ursachen und zwei Bildfragen. Ph12 Design-Abgleich (V-B-app-49 bis -51, CF Z. 133–183): Abschnitt mit
 * 58/64/54 px Polster (Bild-Paar 60) und Raster über die volle Breite zwischen den Seitenrändern; Karte mit grauem Kopfteil
 * (Bereich mit Punkt, Zelle, Formelfeld mit Durchstreichung und Pille), darunter Titel und Text.
 */
.bx-karten--ursache,
.bx-karten--bild-paar {
  padding: var(--abstand-58) var(--seitenrand) var(--abstand-54);
}

.bx-karten--bild-paar {
  padding-block-end: var(--abstand-60);
}

.bx-karten--ursache .bx-karten__innen,
.bx-karten--bild-paar .bx-karten__innen {
  max-width: none;
}

.bx-karten--ursache .bx-karten__karte {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-karte-klein);
  box-shadow: none;
}

.bx-karten--ursache .bx-karten__titel {
  margin: var(--abstand-20) var(--abstand-22) var(--abstand-8);
  color: var(--farbe-navy);
  font-weight: var(--schrift-karte-titel-gewicht);
  font-size: var(--schrift-karte-titel-groesse);
  line-height: 1.2;
  letter-spacing: var(--schrift-karte-titel-laufweite);
  text-wrap: pretty;
}

.bx-karten--ursache .bx-karten__text {
  margin: 0 var(--abstand-22) var(--abstand-22);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-text-klein-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: 1.55;
  text-wrap: pretty;
}

.bx-karten__zelle {
  padding: var(--abstand-16) var(--abstand-22) var(--abstand-18);
  background: var(--farbe-flaeche-karte);
  border-block-end: 1px solid var(--farbe-linie);
}

.bx-karten__zelle-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 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);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-karten__zelle-kopf > span:first-child {
  display: flex;
  align-items: center;
  gap: var(--abstand-7);
}

.bx-karten__zelle-kopf > span:first-child::before {
  content: "";
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-rund);
  background: var(--farbe-orange-flaeche);
}

.bx-karten__zelle-kopf > span:first-child[data-bx-punkt="gruen"]::before {
  background: var(--farbe-mint-akzent);
}

.bx-karten__zelle-kopf > span:first-child[data-bx-punkt="rot"]::before {
  background: var(--farbe-orange-tief);
}

.bx-karten__zelle-kopf > span:last-child {
  font-weight: 600;
  letter-spacing: 1px;
}

.bx-karten__feld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  padding: var(--abstand-10) var(--abstand-14);
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-diagramm-grundlinie);
  border-radius: var(--radius-chip);
}

.bx-karten__formel {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: line-through var(--farbe-orange-flaeche) 2.5px;
}

.bx-karten--ursache .bx-karten__pille {
  padding: 3px var(--abstand-9); /* Design */
  background: var(--farbe-app-chip-rotorange-flaeche);
  border-radius: var(--radius-pille);
  color: var(--farbe-orange-tief);
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}

.bx-karten__band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-18);
  padding: var(--abstand-16) var(--abstand-22);
  margin-block-start: var(--abstand-18);
  overflow: hidden;
  background: var(--farbe-navy);
  color: var(--farbe-weiss);
  border-radius: var(--radius-rahmen);
}

.bx-karten__band::before {
  content: "";
  position: absolute;
  inset-block-start: -130px; /* Design */
  inset-inline-end: calc(-1 * var(--abstand-70));
  inline-size: 320px;
  block-size: 280px;
  border-radius: var(--radius-rund);
  background: radial-gradient(circle, var(--farbe-glow-mint-band) 0%, transparent 68%);
  pointer-events: none;
}

.bx-karten__band > * {
  position: relative;
}

.bx-karten__band-marke {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--abstand-8);
}

.bx-karten__band-marke img {
  display: block;
  block-size: 17px;
  inline-size: auto;
}

.bx-karten__band-marke strong {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.6px;
}

.bx-karten__band p {
  flex: 1;
  min-inline-size: 260px;
  margin: 0;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

.bx-karten__band-pille {
  flex: none;
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
}

.bx-karten--bild-paar .bx-karten__karte { padding: var(--abstand-24); overflow: hidden; }
.bx-karten--bild-paar .bx-karten__eyebrow {
  margin: 0 0 var(--abstand-14);
  text-transform: none;
  color: var(--farbe-mint-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}
.bx-karten__bilder { display: grid; gap: var(--abstand-18); margin-block-start: var(--abstand-24); }
.bx-karten__bilder img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-klein); }
@media (width < 1080px) { .bx-karten--bild-paar .bx-karten__raster { grid-template-columns: minmax(0, 1fr); } }

/*
 * == Ph8 H2b (P-H2B-16 a, c; H8-76): `nummeriert` mit `darstellung: zeilen` und zentriertem Kopf (Design Automatisierung
 * v7 „Die Regeln“: Nummer · großer Titel mit farbigem Punkt · Text rechts, Trennlinien, Breite 1000 px) ==
 * Ohne `darstellung` und ohne `ausrichtung: mitte` bleibt `nummeriert` unverändert (H0b, H1c, H2a, H2c).
 */
.bx-karten--nummeriert .bx-karten__kopf--mitte .bx-sektionskopf {
  margin-inline: auto;
}

.bx-karten__karte--nummeriert[data-bx-ton="violett"] {
  --bx-karten-ton: var(--farbe-violett);
}

.bx-karten__karte--nummeriert[data-bx-ton="blau"] {
  --bx-karten-ton: var(--farbe-blau);
}

.bx-karten__innen:has(> .bx-karten__haupt > [data-bx-darstellung="zeilen"]) {
  max-width: 1000px; /* A7 „Die Regeln“ */
}

.bx-karten__raster[data-bx-darstellung="zeilen"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block-end: 1px solid var(--farbe-linie-karte);
}

[data-bx-darstellung="zeilen"] > .bx-karten__karte--nummeriert {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 380px); /* A7 „Die Regeln“ */
  gap: var(--abstand-24);
  align-items: center;
  padding: var(--abstand-22) 0;
  border: 0;
  border-block-start: 1px solid var(--farbe-linie-karte);
  border-radius: 0;
  background-color: transparent;
}

[data-bx-darstellung="zeilen"] .bx-karten__nummer {
  font-size: var(--schrift-text-kompakt-groesse);
}

[data-bx-darstellung="zeilen"] .bx-karten__titel {
  margin: 0;
  font-weight: var(--schrift-titel-gewicht);
  font-size: var(--schrift-titel-groesse);
  line-height: var(--schrift-titel-zeile);
  letter-spacing: var(--schrift-titel-laufweite);
}

[data-bx-darstellung="zeilen"] .bx-karten__titel::after {
  content: '.';
  color: var(--bx-karten-ton);
}

[data-bx-darstellung="zeilen"] + .bx-karten__fusssatz {
  text-align: center;
}

@media (width < 768px) {
  .bx-karten__raster[data-bx-darstellung="zeilen"] {
    margin-inline: var(--seitenrand); /* A7 mobil: 20 px Rand für Zeilen und Linien */
  }

  [data-bx-darstellung="zeilen"] > .bx-karten__karte--nummeriert {
    gap: var(--abstand-20); /* Mobil-Datei: Raster bleibt dreispaltig */
  }

  [data-bx-darstellung="zeilen"] .bx-karten__titel {
    font-size: var(--schrift-h2-groesse);
  }
}

/*
 * Ph8 H3a (Vertrag Ph8 Ä8-5, §3.4.12; Teilplan H3a §5.5; Design APP Produktseite Tour v3 „Für Ihre Rolle“ Z. 496–504
 * und „Preise“ Z. 807–834): `leiste` (Rollenkarten in einer Reihe, Titel in Eyebrow-Optik) und `preis-kurz` (Kopf
 * links, drei Preiskarten rechts, die hervorgehobene auf Navy). Spaltenbreite 210 über die Wertetabelle (E1).
 */
.bx-karten--leiste {
  padding: var(--abstand-40) var(--seitenrand) var(--abstand-44);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--leiste .bx-karten__innen {
  max-width: none;
}

.bx-karten--leiste .bx-sektionskopf__titel {
  margin: 0 0 var(--abstand-16);
  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);
  text-transform: uppercase;
}

.bx-karten--leiste .bx-sektionskopf__titel::before {
  content: '\2014\00a0';
}

.bx-karten--leiste .bx-karten__raster {
  gap: var(--abstand-12);
}

.bx-karten--leiste .bx-karten__karte {
  padding: 0;
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-flaeche-band);
  border-color: var(--farbe-linie);
  transition: translate var(--bewegung-dauer-kurz), box-shadow var(--bewegung-panel-dauer),
    background-color var(--bewegung-panel-dauer);
}

.bx-karten--leiste .bx-karten__karte:hover,
.bx-karten--leiste .bx-karten__karte:focus-within {
  translate: 0 var(--bewegung-lift);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-karte-hover-klein);
}

.bx-karten__leiste-link {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  padding: var(--abstand-18) var(--abstand-20);
  color: var(--farbe-navy);
  text-decoration: none;
}

.bx-karten__leiste-titel {
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-termin-schritt-titel-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
}

.bx-karten__leiste-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);
  text-wrap: pretty;
}

/* == preis-kurz == */
.bx-karten--preis-kurz {
  padding: var(--abstand-72) var(--seitenrand) var(--abstand-64);
  border-block-end: 1px solid var(--farbe-linie-karte);
}

.bx-karten--preis-kurz .bx-karten__innen {
  max-width: none;
}

.bx-karten--preis-kurz .bx-karten__haupt {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--abstand-40);
  align-items: start;
}

.bx-karten--preis-kurz .bx-karten__raster {
  gap: var(--abstand-14);
}

.bx-karten--preis-kurz .bx-karten__karte {
  padding: var(--abstand-22) var(--abstand-22) var(--abstand-20);
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-weiss);
}

.bx-karten--preis-kurz .bx-karten__eyebrow {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  letter-spacing: var(--schrift-eyebrow-laufweite);
}

.bx-karten--preis-kurz .bx-karten__titel {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-6);
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-navy);
  font-weight: var(--schrift-zahl-gewicht);
  font-size: var(--schrift-zahl-groesse);
  line-height: var(--schrift-zahl-zeile);
  letter-spacing: var(--schrift-zahl-laufweite);
}

/* die letzte Karte nennt keinen Preis, sondern „Auf Anfrage“: kleinere Schrift wie im Design */
.bx-karten--preis-kurz .bx-karten__karte:last-child .bx-karten__titel {
  font-size: var(--schrift-h3-gross-groesse);
  line-height: var(--schrift-h3-gross-zeile);
  letter-spacing: var(--schrift-h3-gross-laufweite);
}

.bx-karten__zusatz {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-story-frage-gewicht);
  font-size: var(--schrift-person-rolle-groesse);
  letter-spacing: 0;
}

.bx-karten--preis-kurz .bx-karten__text {
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-text-klein-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-karten--preis-kurz .bx-karten__karte--hervorgehoben {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  box-shadow: var(--schatten-karte-navy);
}

.bx-karten--preis-kurz .bx-karten__karte--hervorgehoben .bx-karten__eyebrow {
  color: var(--farbe-mint);
}

.bx-karten--preis-kurz .bx-karten__karte--hervorgehoben .bx-karten__titel {
  color: var(--farbe-weiss);
}

.bx-karten--preis-kurz .bx-karten__karte--hervorgehoben .bx-karten__zusatz {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-karten--preis-kurz .bx-karten__karte--hervorgehoben .bx-karten__text {
  color: var(--farbe-navy-text-hell);
}

@media (width < 1080px) {
  .bx-karten--preis-kurz .bx-karten__haupt {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 768px) {
  .bx-karten--preis-kurz {
    padding-block: var(--abstand-48);
  }
}

/*
 * == Block „Ph9 I3b“ (Vertrag Ph9 Ä9-7, §3.9.8; Teilplan I3b §10; Design „Vergleich Odoo“ 07 Kosten) ==
 * Variante `preislogik`: zwei Karten nebeneinander (Wettbewerber auf Hell, brainX auf Mint), unter `stapeln`
 * untereinander; Punkte als Liste mit Aufzählungszeichen, Fußnote unter den Karten.
 */
.bx-karten--preislogik {
  padding: 0 var(--seitenrand) var(--abstand-sektion-gross);
}

.bx-karten--preislogik .bx-karten__kopf {
  max-inline-size: var(--breite-text-max);
  margin-block-end: var(--abstand-28);
}

.bx-karten--preislogik .bx-karten__raster {
  gap: var(--abstand-16);
}

.bx-karten--preislogik .bx-karten__karte {
  padding: var(--abstand-28) var(--abstand-30);
  border: 0;
  background-color: var(--farbe-flaeche-karte);
}

.bx-karten--preislogik .bx-karten__karte[data-bx-seite="brainx"] {
  background-color: var(--farbe-gruen-flaeche);
}

.bx-karten--preislogik .bx-karten__titel {
  margin: 0 0 var(--abstand-14);
  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-karten--preislogik .bx-karten__punkte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-7);
  padding-inline-start: var(--abstand-18);
  color: var(--farbe-navy);
  list-style: disc;
  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-karten--preislogik .bx-karten__karte[data-bx-seite="brainx"] .bx-karten__titel,
.bx-karten--preislogik .bx-karten__karte[data-bx-seite="brainx"] .bx-karten__punkte {
  color: var(--farbe-gruen-text);
}

.bx-karten--preislogik .bx-karten__fuss {
  max-inline-size: 1100px; /* Lesebreite der Fußnote (Maß des Entwurfs) */
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-mikrotext);
  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-karten--preislogik .bx-karten__fuss a {
  color: var(--farbe-navy);
}

@media (width < 1080px) {
  .bx-karten--preislogik .bx-karten__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Ph10 R1a (Vertrag Ph10 Ä10-7, §3.8; Teilplan R1a; Design „Neu in brainX“ N-03): `linie` – drei Spalten ohne Rahmen mit
 * Linie oben, Titel samt Marke in einer umbrechenden Zeile, darunter der Text. Die Marke trägt ihren Ton als
 * Wertetabelle `data-bx-ton`; die Spaltenzahl (3) steht in der Wertetabelle `data-bx-spalten` oben.
 */
.bx-karten--linie {
  padding: var(--abstand-64) var(--seitenrand) 0;
}

.bx-karten--linie .bx-karten__innen {
  max-width: none;
}

.bx-karten--linie .bx-karten__raster {
  gap: var(--abstand-28) var(--abstand-44);
}

.bx-karten--linie .bx-karten__karte {
  padding: var(--abstand-26) 0 0;
  border: 0;
  border-top: 1px solid var(--farbe-linie);
  border-radius: 0;
  background-color: transparent;
}

.bx-karten__linie-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-6) var(--abstand-12);
}

.bx-karten--linie .bx-karten__titel {
  margin: 0;
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-h3-groesse);
  line-height: var(--schrift-h3-zeile);
  letter-spacing: var(--schrift-h3-laufweite);
  text-wrap: pretty;
}

.bx-karten__marke {
  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-karten__marke[data-bx-ton="orange"] {
  color: var(--farbe-orange-text);
}

.bx-karten--linie .bx-karten__text {
  margin-block-start: var(--abstand-10);
  text-wrap: pretty;
}

/* unter 900 px einspaltig (Design `schmal`, nur hier) */
@media (width < 900px) {
  .bx-karten--linie .bx-karten__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * == Block „Ph10 R1b“ (Vertrag Ph10 §3.10.3, Ä10-7; Teilplan R1b §8.5; Design Sicherheit v3, ISO v3, Hosting v2, DSGVO v3) ==
 * Varianten `meilensteine`, `panel-navykopf`, `saeule`, `zusage`, `navy-kasten`, `ziffer`; jede Regel trägt den Vorsatz der
 * Variante. Hover-Lift nur ohne reduzierte Bewegung.
 */
.bx-karten--meilensteine, .bx-karten--panel-navykopf, .bx-karten--saeule, .bx-karten--zusage, .bx-karten--navy-kasten, .bx-karten--ziffer {
  padding: var(--abstand-block-gross) var(--seitenrand);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

/* V-F-inhalte-11: Abschnittspolster der Zeitachse 44/46 (Design Sicherheit v3) */
.bx-karten--meilensteine {
  padding-block: var(--abstand-44) var(--abstand-46);
}

.bx-karten--meilensteine .bx-karten__kopf, .bx-karten--panel-navykopf .bx-karten__kopf, .bx-karten--saeule .bx-karten__kopf, .bx-karten--zusage .bx-karten__kopf, .bx-karten--navy-kasten .bx-karten__kopf, .bx-karten--ziffer .bx-karten__kopf {
  margin-block-end: var(--abstand-40);
}

.bx-karten--meilensteine .bx-karten__raster {
  gap: 0; /* V-F-inhalte-11: die Linie läuft bis zum Spaltenende */
}

.bx-karten--meilensteine .bx-karten__karte {
  padding: 0 var(--abstand-26) 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.bx-karten--meilensteine .bx-karten__punkt {
  display: block;
  margin-block-end: var(--abstand-18);
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-mint);
}

.bx-karten--meilensteine .bx-karten__punkt::after {
  content: '';
  position: absolute;
  inset-block-start: var(--abstand-4);
  inset-inline-start: var(--abstand-28);
  inset-inline-end: var(--abstand-26);
  block-size: 1px;
  background-color: var(--farbe-navy-glas-rand);
}

.bx-karten--meilensteine .bx-karten__karte:last-child .bx-karten__punkt::after {
  content: none;
}

.bx-karten--meilensteine .bx-karten__raster {
  overflow: hidden;
}

.bx-karten--meilensteine .bx-karten__zeit {
  margin: 0 0 var(--abstand-8);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  text-transform: uppercase;
  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-karten--meilensteine .bx-karten__titel {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-karte-titel-klein-gewicht);
  font-size: var(--schrift-karte-titel-klein-groesse);
  line-height: var(--schrift-karte-titel-klein-zeile);
  letter-spacing: var(--schrift-karte-titel-klein-laufweite);
}

.bx-karten--meilensteine .bx-karten__text {
  color: var(--farbe-navy-text-sekundaer);
  font-size: 13.5px;
  line-height: 1.6;
}

.bx-karten--panel-navykopf .bx-karten__karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.bx-karten--panel-navykopf .bx-karten__panelkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-8) var(--abstand-12);
  padding: var(--abstand-26) var(--abstand-28);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="hell"] .bx-karten__panelkopf {
  border-block-end: 1px solid var(--farbe-linie-karte);
  background-color: var(--farbe-flaeche-zart);
  color: var(--farbe-navy);
}

.bx-karten--panel-navykopf .bx-karten__panelkopf .bx-karten__titel {
  flex-basis: 100%;
  margin: 0;
  color: inherit;
  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-karten--panel-navykopf .bx-karten__kicker {
  margin: 0;
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  text-transform: uppercase;
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

/* V-F-inhalte-13: Etikett rechts in der Kopfzeile, Titel darunter über die volle Breite */
.bx-karten--panel-navykopf .bx-karten__panelkopf {
  justify-content: space-between;
}

.bx-karten--panel-navykopf .bx-karten__panelkopf .bx-karten__titel {
  order: 3;
}

.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="navy"] .bx-karten__panelkoerper {
  background-color: var(--farbe-navy);
}

.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="navy"] .bx-karten__text,
.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="navy"] .bx-karten__punkte li {
  color: var(--farbe-navy-text-lead);
}

.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="navy"] .bx-karten__punkte {
  border-block-start-color: var(--farbe-navy-linie);
}

/* V-F-inhalte-16: Lead des Navy-Panels (SAST) 16 px/600 */
.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="navy"] .bx-karten__text {
  font-weight: 600;
  font-size: 16px;
}

.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="hell"] .bx-karten__kicker {
  color: var(--farbe-mint-text);
}

.bx-karten--panel-navykopf .bx-karten__etikett, .bx-karten--panel-navykopf .bx-karten__pille {
  margin: 0;
  padding: var(--abstand-4) var(--abstand-8);
  border-radius: var(--radius-chip);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  text-transform: uppercase;
  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-karten--panel-navykopf .bx-karten__pille {
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-karten--panel-navykopf .bx-karten__karte[data-bx-ton="hell"] .bx-karten__pille {
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

.bx-karten--panel-navykopf .bx-karten__panelkoerper {
  display: grid;
  gap: var(--abstand-16);
  padding: var(--abstand-24) var(--abstand-28) var(--abstand-28);
}

.bx-karten--panel-navykopf .bx-karten__text {
  color: var(--farbe-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-karten--panel-navykopf .bx-karten__punkte {
  display: grid;
  gap: var(--abstand-10);
  padding-block-start: var(--abstand-20);
  border-block-start: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--panel-navykopf .bx-karten__punkte li {
  position: relative;
  padding-inline-start: var(--abstand-20);
  color: var(--farbe-text-sekundaer);
  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-karten--panel-navykopf .bx-karten__punkte li::before {
  content: '';
  position: absolute;
  inset-block-start: var(--abstand-8);
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 6px;
  rotate: 45deg;
  background-color: var(--farbe-mint-akzent);
}

.bx-karten--saeule .bx-karten__raster {
  grid-template-columns: repeat(auto-fill, minmax(max(min(260px, 100%), calc(33.333% - 14px)), 1fr)); /* Formel aus dem Design (SH-6) */
}

.bx-karten--saeule .bx-karten__raster {
  gap: var(--abstand-20);
}

.bx-karten--saeule .bx-karten__karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-karte-gross);
}

/* Navy-Kopf (Design Sicherheit v3 Z. 211–217): Kicker links, Nummer als orange Pille rechts, H3 weiß */
.bx-karten--saeule .bx-karten__saeulenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  padding: var(--abstand-26) var(--abstand-32) var(--abstand-24);
  background-color: var(--farbe-navy);
}

.bx-karten--saeule .bx-karten__saeulenkoerper {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--abstand-26) var(--abstand-32) var(--abstand-30);
}

.bx-karten--saeule .bx-karten__nummer {
  order: 2;
  margin: 0;
  padding: var(--abstand-5) var(--abstand-9);
  border-radius: var(--radius-kachel-klein);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .4px;
}

.bx-karten--saeule .bx-karten__kicker {
  order: 1;
  margin: 0;
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  text-transform: uppercase;
  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-karten--saeule .bx-karten__titel {
  order: 3;
  flex-basis: 100%;
  margin: var(--abstand-4) 0 0;
  color: var(--farbe-weiss);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -.9px;
  text-wrap: pretty;
}

.bx-karten--saeule .bx-karten__text {
  flex: 1;
  margin: 0 0 var(--abstand-22);
}

.bx-karten--saeule .bx-karten__punkte {
  display: grid;
  gap: var(--abstand-10);
  margin-block-end: var(--abstand-24);
  padding-block-start: var(--abstand-20);
  border-block-start: 1px solid var(--farbe-linie-sektion);
}

.bx-karten--saeule .bx-karten__punkte li {
  position: relative;
  padding-inline-start: var(--abstand-17);
  color: var(--farbe-navy);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
}

.bx-karten--saeule .bx-karten__punkte li::before {
  content: '';
  position: absolute;
  inset-block-start: var(--abstand-7);
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 6px;
  rotate: 45deg;
  background-color: var(--farbe-mint-akzent);
}

.bx-karten--saeule .bx-karten__cta {
  margin: auto 0 0;
}

/* CTA als orange Pille (Design Z. 228); die ganze Karte bleibt über ::after verlinkt */
.bx-karten--saeule .bx-karten__saeulenlink {
  display: inline-block;
  padding: var(--abstand-12) var(--abstand-24);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

.bx-karten--saeule .bx-karten__saeulenlink::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.bx-karten--saeule .bx-karten__saeulenlink:focus-visible {
  outline: none;
}

.bx-karten--saeule .bx-karten__karte--link:focus-within {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-karten--saeule .bx-karten__karte--link:hover {
    translate: 0 -4px; /* Wert laut Design Sicherheit v3 Z. 210: translateY(-4px) */
    box-shadow: var(--schatten-karte-hover);
  }
}

/* „Was wir zusichern“ (Design Sicherheit v3 Z. 235–247): Liste ohne Karten, Häkchen-Quadrat 26 px, drei Spalten */
.bx-karten--zusage .bx-karten__raster {
  gap: var(--abstand-24) var(--abstand-34);
}

.bx-karten--zusage .bx-karten__karte {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: var(--abstand-14);
  row-gap: var(--abstand-6);
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.bx-karten--zusage .bx-icon-kreis {
  grid-row: 1 / span 2;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--radius-klein);
  background-color: var(--farbe-mint-akzent);
  color: var(--farbe-weiss);
}

.bx-karten--zusage .bx-icon-kreis svg {
  inline-size: 14px;
  block-size: 14px;
}

.bx-karten--zusage .bx-karten__titel {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.2px;
  text-wrap: pretty;
}

.bx-karten--zusage .bx-karten__text {
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

.bx-karten--navy-kasten .bx-karten__kasten {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-34) var(--abstand-36);
  border-radius: var(--radius-karte-gross);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-karten--navy-kasten .bx-karten__kasten::before {
  content: '';
  position: absolute;
  top: -160px; /* Design */
  right: -120px; /* Design */
  width: 420px;
  height: 360px;
  background: radial-gradient(closest-side, var(--farbe-glow-mint-hero), var(--farbe-glow-mint-aus));
  pointer-events: none;
}

.bx-karten--navy-kasten .bx-karten__kastenkopf {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--abstand-12) var(--abstand-32);
  margin-block-end: var(--abstand-28);
}

.bx-karten--navy-kasten .bx-karten__kastentitel {
  margin: 0;
  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-karten--navy-kasten .bx-karten__kopf-rechts {
  margin: 0;
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  text-transform: uppercase;
  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-karten--navy-kasten .bx-karten__kasten .bx-karten__karte {
  position: relative;
  padding: var(--abstand-20) 0 0;
  border: 0;
  border-block-start: 2px solid var(--farbe-mint-box-rand);
  border-radius: 0;
  background-color: transparent;
}

.bx-karten--navy-kasten .bx-karten__ziffer {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-navy-glas-rand);
  font-weight: var(--schrift-ziffer-gross-gewicht);
  font-size: var(--schrift-ziffer-gross-groesse);
  line-height: var(--schrift-ziffer-gross-zeile);
  letter-spacing: var(--schrift-ziffer-gross-laufweite);
}

.bx-karten--navy-kasten .bx-karten__kasten .bx-karten__titel {
  color: var(--farbe-weiss);
}

.bx-karten--navy-kasten .bx-karten__kasten .bx-karten__text {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-karten--navy-kasten .bx-karten__karte[data-bx-ton] {
  padding: var(--abstand-28);
  border-radius: var(--radius-karte);
}

.bx-karten--navy-kasten .bx-karten__karte[data-bx-ton] .bx-karten__text {
  font-size: 14px;
}

.bx-karten--navy-kasten .bx-karten__karte[data-bx-ton="navy"] {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-karten--navy-kasten .bx-karten__karte[data-bx-ton="navy"] .bx-karten__titel {
  color: var(--farbe-weiss);
}

.bx-karten--navy-kasten .bx-karten__karte[data-bx-ton="navy"] .bx-karten__text {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-karten--navy-kasten .bx-karten__karte[data-bx-ton="navy"] .bx-karten__eyebrow {
  color: var(--farbe-mint);
}

.bx-karten--ziffer .bx-karten__karte {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-26) var(--abstand-28);
}

/* V-F-inhalte-20 b: Ziffer absolut rechts oben, Titel 64 px darunter (Design Hosting v2 Z. 95) */
.bx-karten--ziffer .bx-karten__ziffer {
  position: absolute;
  inset-block-start: var(--abstand-22);
  inset-inline-end: var(--abstand-28);
  margin: 0;
  color: var(--farbe-flaeche-toggle);
  font-weight: var(--schrift-ziffer-gross-gewicht);
  font-size: 56px; /* Wert laut Design Hosting v2 Z. 95 */
  line-height: var(--schrift-ziffer-gross-zeile);
  letter-spacing: var(--schrift-ziffer-gross-laufweite);
}

.bx-karten--ziffer .bx-karten__ziffer + * {
  margin-block-start: var(--abstand-64);
}

.bx-karten--ziffer .bx-karten__kopfzeile {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bx-karten--ziffer .bx-karten__kennwert {
  margin: 0;
  padding: var(--abstand-18) var(--abstand-22);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-flaeche-hell);
}

.bx-karten--ziffer .bx-karten__kennwert dt {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  text-transform: uppercase;
  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-karten--ziffer .bx-karten__kennwert dd {
  margin: var(--abstand-6) 0 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-kennzahl-gewicht);
  font-size: var(--schrift-kennzahl-groesse);
  line-height: var(--schrift-kennzahl-zeile);
  letter-spacing: var(--schrift-kennzahl-laufweite);
}

@media (width < 1080px) {
  .bx-karten--ziffer .bx-karten__kopfzeile {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-24);
  }
}

@media (width < 768px) {
  .bx-karten--meilensteine, .bx-karten--panel-navykopf, .bx-karten--saeule, .bx-karten--zusage, .bx-karten--navy-kasten, .bx-karten--ziffer {
    padding: var(--abstand-40) var(--abstand-20);
  }

  .bx-karten--meilensteine .bx-karten__punkt::after {
    content: none;
  }

  .bx-karten--navy-kasten .bx-karten__kasten {
    padding: var(--abstand-28) var(--abstand-20);
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * Ph11 V-9: Variante `aussage-gross` (Design Loesung SaaS v2 „Realität“): große Aussagen ohne Rahmen, zentriert
 * untereinander mit Linie (Design: eine Spalte, max. 940px; der Vertrag nennt drei Spalten, Design gilt), Titel
 * 800 34px/1.15/−1.2px in `--schrift-aussage-gross` (V-7 Teil 2; zwischen 768 und 1079 px `clamp(27px, 3.1vw, 34px)`).
 */
.bx-karten--aussage-gross .bx-karten__raster {
  display: block;
  max-inline-size: 940px; /* Breite (Design) */
  margin-inline: auto;
  text-align: center;
}

.bx-karten--aussage-gross .bx-karten__karte {
  padding: var(--abstand-28) 0;
  border: 0;
  border-block-start: 1px solid var(--farbe-linie-eingabe);
  border-radius: 0;
  background-color: transparent;
}

.bx-karten--aussage-gross .bx-karten__karte:last-child {
  border-block-end: 1px solid var(--farbe-linie-eingabe);
}

.bx-karten--aussage-gross .bx-karten__titel {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-navy);
  font-weight: var(--schrift-aussage-gross-gewicht);
  font-size: var(--schrift-aussage-gross-groesse);
  line-height: var(--schrift-aussage-gross-zeile);
  letter-spacing: var(--schrift-aussage-gross-laufweite);
}

.bx-karten--aussage-gross .bx-karten__text {
  max-inline-size: 720px; /* Breite (Design) */
  margin: 0 auto;
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-lead-groesse);
  line-height: var(--schrift-lead-zeile);
}

/*
 * Ph11 V-9: Variante `fakten` (Design Loesung Hochschulen v3 „Betrieb und Datenschutz“): Kacheln mit Akzentstrich links
 * (orange, navy, mint, orange), Mono-Kicker, Wert 800 22px/1.1, kleiner Text; eine verlinkte Kachel ist ganz klickbar.
 * Dekor-Icons oben rechts über `fakt_icon` (BW-81). Textlinks zentriert darunter. Sektions-H2
 * 800 46px/1.08/−1.9px in `--schrift-h2-branche` (V-7 Teil 2, nur Branchenseiten).
 */
.bx-karten--fakten .bx-sektionskopf__titel {
  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-karten--fakten .bx-karten__raster {
  gap: var(--abstand-14);
  max-inline-size: 1120px; /* Breite (Design) */
  margin-inline: auto;
}

.bx-karten--fakten .bx-karten__karte {
  overflow: hidden;
  padding: var(--abstand-22) var(--abstand-20) var(--abstand-22) var(--abstand-24);
  border-radius: var(--radius-rahmen);
}

.bx-karten--fakten .bx-karten__karte::before {
  content: '';
  position: absolute;
  inset-block: var(--abstand-22);
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
  background-color: var(--farbe-orange-flaeche);
}

.bx-karten--fakten .bx-karten__karte:nth-child(4n + 2)::before {
  background-color: var(--farbe-navy);
}

.bx-karten--fakten .bx-karten__karte:nth-child(4n + 3)::before {
  background-color: var(--farbe-mint-akzent);
}

.bx-karten--fakten .bx-karten__fakt-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.bx-karten--fakten .bx-karten__fakt-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.bx-karten--fakten .bx-karten__eyebrow {
  margin-block-end: var(--abstand-12);
}

/* BW-81: Dekor-Icon oben rechts (Design: right 18, top 20, Deckkraft .9) */
.bx-karten--fakten .bx-karten__fakt-icon {
  position: absolute;
  inset-block-start: var(--abstand-20);
  inset-inline-end: var(--abstand-18);
  opacity: .9;
}

.bx-karten--fakten .bx-karten__karte:nth-child(4n + 2) .bx-karten__eyebrow {
  color: var(--farbe-navy);
}

.bx-karten--fakten .bx-karten__karte:nth-child(4n + 3) .bx-karten__eyebrow {
  color: var(--farbe-mint-text);
}

.bx-karten--fakten .bx-karten__titel {
  margin: 0 0 var(--abstand-8);
  color: var(--farbe-navy);
  font-weight: var(--schrift-app-schritt-titel-gewicht); /* 800 22px wie Design (Token aus V-7 Teil 1) */
  font-size: var(--schrift-app-schritt-titel-groesse);
  line-height: var(--schrift-aussage-zeile); /* Zeilenhöhe 1.1 wie Design (wertgleiches Token) */
  letter-spacing: var(--schrift-app-schritt-titel-laufweite);
}

.bx-karten--fakten .bx-karten__karte--link:hover .bx-karten__titel,
.bx-karten--fakten .bx-karten__karte--link:focus-within .bx-karten__titel {
  color: var(--farbe-orange-text);
}

.bx-karten--fakten .bx-karten__text,
.bx-karten--fakten .bx-karten__gesellschaft {
  margin: 0;
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-karten__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-12) var(--abstand-36);
  margin: var(--abstand-48) 0 0;
}

/* Ph11 M1b A Fix (H11-58): Textlink der Vertrauenskarte ohne Zusatzabstand unter dem Text */
.bx-karten--vertrauen .bx-karten__fuss {
  margin-block-start: 0;
}

/*
 * Ph11 M2a Fix (P-M2A-1): Kopf von `aussage-gross` wie Design „Realität“ (SaaS v2, IT-Dienstleister v3, Hochschulen
 * v3, auch mobil) als grüner Kicker 600 14px, mittig über voller Breite, 22 px darunter. Die H2 bleibt für die
 * Gliederung der Seite und trägt nur die Optik des Kickers.
 */
.bx-karten--aussage-gross .bx-karten__kopf .bx-sektionskopf {
  max-inline-size: none;
  margin: 0 0 var(--abstand-22);
}

.bx-karten--aussage-gross .bx-karten__kopf .bx-sektionskopf__titel {
  margin: 0;
  color: var(--farbe-mint-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);
}

/*
 * == Ph12 Design-Abgleich (V-E-loesungen-49/-81/-24): „Ihre Branche“ unter den Rollenkarten und auf Startups ==
 * Design: Teil des Rollen-Abschnitts (Abstand 32, keine Trennlinie), Titel grau ohne Strich (Mono 11 px, 1,3 px Laufweite),
 * Karten weiß mit Radius 18, Abstand 16, Kartentitel 800.
 */
.bx-abschnitt:has(> .bx-rollenkarten) + .bx-abschnitt > .bx-karten--leiste,
main:has(.bx-hero-navy[data-bx-schrift="startups"]) .bx-karten--leiste {
  padding-block: var(--abstand-32) var(--abstand-50);
  border-block-end: 0;
}

.bx-abschnitt:has(> .bx-rollenkarten) + .bx-abschnitt > .bx-karten--leiste .bx-sektionskopf__titel,
main:has(.bx-hero-navy[data-bx-schrift="startups"]) .bx-karten--leiste .bx-sektionskopf__titel {
  color: var(--farbe-mikrotext);
  letter-spacing: 1.3px; /* Wert laut Design */
}

.bx-abschnitt:has(> .bx-rollenkarten) + .bx-abschnitt > .bx-karten--leiste .bx-sektionskopf__titel::before,
main:has(.bx-hero-navy[data-bx-schrift="startups"]) .bx-karten--leiste .bx-sektionskopf__titel::before {
  content: none;
}

.bx-abschnitt:has(> .bx-rollenkarten) + .bx-abschnitt > .bx-karten--leiste .bx-karten__raster,
main:has(.bx-hero-navy[data-bx-schrift="startups"]) .bx-karten--leiste .bx-karten__raster {
  gap: var(--abstand-16);
}

.bx-abschnitt:has(> .bx-rollenkarten) + .bx-abschnitt > .bx-karten--leiste .bx-karten__karte,
main:has(.bx-hero-navy[data-bx-schrift="startups"]) .bx-karten--leiste .bx-karten__karte {
  border-radius: var(--radius-karte-klein);
  background-color: var(--farbe-weiss);
}

.bx-abschnitt:has(> .bx-rollenkarten) + .bx-abschnitt > .bx-karten--leiste .bx-karten__leiste-titel,
main:has(.bx-hero-navy[data-bx-schrift="startups"]) .bx-karten--leiste .bx-karten__leiste-titel {
  font-weight: var(--schrift-karte-titel-gewicht);
}

/*
 * == Ph12 B1 (Design APP Produktseite Tour v3, `/app/`) ==
 * V-B-app-19: `nummeriert` mit `darstellung: liste` (Z. 792–804): Kopf links, nummerierte Liste mit Linien rechts, Sektion
 * über die volle Breite mit Seitenrand. V-B-app-20: `stil: kompakt` (Z. 945–954): Karten über die volle Breite. Beide
 * Blöcke greifen nur mit dem jeweiligen Feld, andere Seiten ändern sich nicht.
 */
.bx-karten--nummeriert:has([data-bx-darstellung="liste"]) {
  padding: var(--abstand-64) var(--seitenrand);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-karten__innen:has(> .bx-karten__haupt > [data-bx-darstellung="liste"]) {
  max-width: none;
}

.bx-karten__haupt:has(> [data-bx-darstellung="liste"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-28) var(--abstand-56);
  align-items: start;
}

@media (width >= 1024px) {
  .bx-karten__haupt:has(> [data-bx-darstellung="liste"]) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.bx-karten__haupt:has(> [data-bx-darstellung="liste"]) > .bx-karten__kopf {
  min-inline-size: 0;
}

.bx-karten__haupt:has(> [data-bx-darstellung="liste"]) .bx-sektionskopf {
  margin-block-end: 0;
}

.bx-karten__raster[data-bx-darstellung="liste"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-inline-size: 0;
  border-block-end: 1px solid var(--farbe-linie-eingabe);
}

[data-bx-darstellung="liste"] > .bx-karten__karte--nummeriert {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: var(--abstand-14);
  row-gap: var(--abstand-4);
  padding: var(--abstand-16) 0;
  border: 0;
  border-block-start: 1px solid var(--farbe-linie-eingabe);
  border-radius: 0;
  background-color: transparent;
}

[data-bx-darstellung="liste"] .bx-karten__nummer {
  display: flex;
  grid-row: 1 / span 3;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  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-darstellung="liste"] .bx-karten__titel {
  grid-column: 2;
  margin: 0;
  font-weight: var(--schrift-liste-titel-gewicht);
  font-size: var(--schrift-liste-titel-groesse);
  line-height: var(--schrift-liste-titel-zeile);
  letter-spacing: var(--schrift-liste-titel-laufweite);
}

[data-bx-darstellung="liste"] .bx-karten__text {
  grid-column: 2;
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-liste-text-gewicht);
  font-size: var(--schrift-liste-text-groesse);
  line-height: var(--schrift-liste-text-zeile);
  letter-spacing: var(--schrift-liste-text-laufweite);
  text-wrap: pretty;
}

.bx-karten__link {
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  text-decoration: underline;
  text-underline-offset: 3px; /* Wert laut Design */
}

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

.bx-karten--kompakt .bx-karten__innen {
  max-width: none;
}

.bx-karten--kompakt .bx-karten__raster {
  gap: var(--abstand-12);
}

.bx-karten--kompakt .bx-karten__karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6); /* Wert laut Design */
  padding: var(--abstand-20);
  border-color: var(--farbe-linie);
  border-radius: var(--radius-rahmen);
}

.bx-karten--kompakt .bx-karten__eyebrow {
  margin: 0;
  color: var(--farbe-mikrotext);
  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-karten--kompakt .bx-karten__titel {
  margin: 0;
  font-weight: var(--schrift-karte-kompakt-titel-gewicht);
  font-size: var(--schrift-karte-kompakt-titel-groesse);
  line-height: var(--schrift-karte-kompakt-titel-zeile);
  letter-spacing: var(--schrift-karte-kompakt-titel-laufweite);
}

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

.bx-karten--kompakt .bx-karten__fuss {
  margin: auto 0 0;
  padding-block-start: var(--abstand-8);
}

.bx-karten--kompakt .bx-textlink {
  border-bottom: 0;
  color: var(--farbe-orange-text);
}

/* Ph12 B1, V-B-app-77: Vertrauenskarten mobil mit 20 px seitlich (Design Preise APP v2 mobil, `padding: 26px 20px`) */
@media (width < 768px) {
  .bx-karten--vertrauen .bx-karten__karte {
    padding: var(--abstand-26) var(--abstand-20);
  }
}

/*
 * Ph12 Design-Abgleich (Fix E2; E-loesungen -98, -99, -102): Abschnittspolster von `aussage-gross` und `fakten`
 * (Design: padding 80px clamp(20px, 4vw, 56px)), Eyebrow der Fakten grün 600 14px ohne Strich.
 */
.bx-karten--aussage-gross,
.bx-karten--fakten {
  padding: var(--abstand-80) clamp(var(--abstand-20), 4vw, var(--abstand-56));
}

.bx-karten--fakten .bx-karten__kopf .bx-sektionskopf__eyebrow {
  margin-block-end: var(--abstand-22);
  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-karten--fakten .bx-karten__kopf .bx-sektionskopf__eyebrow::before {
  content: none;
}

/* == Ph12 Abgleich 27.10.2026 (BW-26): zentrierter Kopf == */
/* Der Sektionskopf (max. 760 px) steht im zentrierten Kopf mittig, Eyebrow und Titel bündig zueinander */
.bx-karten__kopf--mitte .bx-sektionskopf {
  margin-inline: auto;
}

/*
 * 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; }
}