@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-wght-normal.8f704806db.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400-normal.14425ba9c6.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.cb182feeed.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-700-normal.d0d4e81880.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-400-normal.425c0713a8.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-500-normal.5bcc3aa180.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-700-normal.b9d66d1708.woff2") format("woff2");
}
/* 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;
}

/*
 * 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 „hero-integration“ (Vertrag Ph9 §3.3.1; Design „Integration DATEV v2“, Abschnitt 01): transparenter Abschnitt, links
 * Marke, H1, Lead, Aktionen und Hinweiszeile, rechts die Bühne im Rahmen. Raster 1.04fr/1fr, unter der Stufe
 * `stapeln` einspaltig mit der Bühne unter dem Text.
 */
.bx-hero-integration {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: var(--abstand-56);
  align-items: center;
  padding: var(--abstand-40) var(--seitenrand) var(--abstand-76);
  background-color: transparent;
}

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

/* Logo-Kachel 68 × 68, Name, Partner-Pille (Design 01) */
.bx-hero-integration__marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-18);
  margin-bottom: var(--abstand-28);
}

.bx-hero-integration__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--abstand-68);
  height: var(--abstand-68);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-panel);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-logo-kachel);
}

.bx-hero-integration__logo img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.bx-hero-integration__marke-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-8);
  min-width: 0;
}

.bx-hero-integration__name {
  margin: 0;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-logo-name-gewicht);
  font-size: var(--schrift-logo-name-groesse);
  line-height: var(--schrift-logo-name-zeile);
  letter-spacing: var(--schrift-logo-name-laufweite);
}

/* BW-84: Pille „Coming soon“ unter dem Namen, Aussehen der Grundelement-Pille */
.bx-hero-integration__status {
  margin: 0;
}

.bx-hero-integration__partner {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-8);
  padding: var(--abstand-5) var(--abstand-12) var(--abstand-5) var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  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);
  text-decoration: none;
}

.bx-hero-integration__partner:hover {
  outline: 1.5px solid var(--farbe-gruen);
  outline-offset: -1.5px;
}

.bx-hero-integration__partner:focus-visible,
.bx-hero-integration__logo:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-hero-integration__partner-punkt,
.bx-hero-integration__punkt {
  flex: none;
  width: var(--abstand-7);
  height: var(--abstand-7);
  border-radius: var(--radius-rund);
}

.bx-hero-integration__partner-punkt {
  background-color: var(--farbe-gruen);
}

/* H1, Lead (Design 01) */
.bx-hero-integration__titel {
  margin: 0 0 var(--abstand-20);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-hero-integration-gewicht);
  font-size: var(--schrift-hero-integration-groesse);
  line-height: var(--schrift-hero-integration-zeile);
  letter-spacing: var(--schrift-hero-integration-laufweite);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.bx-hero-integration__lead {
  max-width: var(--breite-lead-max);
  margin: 0 0 var(--abstand-32);
  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;
}

.bx-hero-integration__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-12);
}

.bx-hero-integration__aktionen .bx-cta-paar {
  display: contents;
}

/* Hinweiszeile mit Punkt (Design 01, oben 22) */
/* Hinweis 13,5 px/1,5 im Design: Token kennzahl-text (Zeile 1,6, Nahdublette) */
.bx-hero-integration__hinweis {
  display: flex;
  align-items: center;
  gap: var(--abstand-9);
  margin: var(--abstand-22) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  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-hero-integration__punkt {
  background-color: var(--farbe-mint-akzent);
}

/* Bühne: Rahmen kommt aus produkt-animation (rahmen: karte); ohne Szene eine leere Fläche im Seitenverhältnis */
.bx-hero-integration__buehne {
  position: relative;
  min-width: 0;
}

.bx-hero-integration__ohne-szene {
  aspect-ratio: 1040 / 620;
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-flaeche-hell);
  box-shadow: var(--schatten-medium);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
  Kern hero-integrationen (Teilplan E0b §6.3): App-Bausteine der Integrations-Heros in Bühnen-px (Designgröße 1040 × 620,
  skaliert als Ganzes). Geometrie wie im Design (HI Z. 26–109, 166–177, 192, 415); Farben, Schriften, Schatten und
  Radien nur als Tokens. Folgen über Fluss-Container (Werkzeugleiste, Zeilen der Liste) statt berechneter Lagen (D-5).
  Präfix bxi- des Designs ⇒ bx-hero-integrationen__. z-Reihenfolge wie im Design.
*/

hero-integrationen {
  --bx-buehne-flaeche: var(--farbe-flaeche-hell);
}

.bx-hero-integrationen__szene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--schrift-familie-app);
  color: var(--farbe-app-text);
  background: var(--farbe-flaeche-hell);
  -webkit-font-smoothing: antialiased;
}

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

.bx-hero-integrationen__ebene {
  position: absolute;
  left: 0;
  top: 0;
  width: 1040px;
  height: 620px;
  background: var(--farbe-flaeche-hell);
}

/* Seitenleiste mit Marke und Modulen (HI Z. 29–32) */
.bx-hero-integrationen__seitenleiste {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 64px;
  height: 620px;
  padding: 14px 0;
  background: var(--farbe-app-kopf);
}

.bx-hero-integrationen__marke {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
}

.bx-hero-integrationen__marke svg {
  display: block;
  width: 38px;
  height: 38px;
}

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

.bx-hero-integrationen__marke-zeichen {
  fill: var(--farbe-weiss);
}

.bx-hero-integrationen__modul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  color: var(--farbe-weiss);
}

.bx-hero-integrationen__modul[data-bx-aktiv] {
  color: var(--farbe-orange-navy-text);
}

.bx-hero-integrationen__modul svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.bx-hero-integrationen__modul-detail {
  fill: var(--farbe-app-kopf);
}

/* Kopf der Liste mit Titel, Zahl und „+ Neu“ (HI Z. 33–36) */
.bx-hero-integrationen__kopf {
  position: absolute;
  left: 64px;
  top: 0;
  width: 976px;
  height: 60px;
  border-bottom: 1px solid var(--farbe-app-linie);
  background: var(--farbe-weiss);
}

.bx-hero-integrationen__titel {
  position: absolute;
  left: 28px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 22px var(--schrift-familie-app);
}

.bx-hero-integrationen__zahl {
  padding: 3px 9px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-linie);
  font: 700 13px var(--schrift-familie-app);
}

.bx-hero-integrationen__neu {
  position: absolute;
  right: 28px;
  top: 13px;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-orange-flaeche);
  color: var(--farbe-weiss);
  font: 700 14px var(--schrift-familie-app);
}

/* Werkzeugleiste (HI Z. 37, 135–139): Fluss-Container ab 92/76, Lücke 10 */
.bx-hero-integrationen__werkzeuge {
  position: absolute;
  left: 92px;
  top: 76px;
  display: flex;
  gap: 10px;
}

.bx-hero-integrationen__werkzeug {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
  font: 700 14px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-integrationen__werkzeug--aktionen {
  width: 116px;
}

.bx-hero-integrationen__werkzeug--tags {
  width: 64px;
}

.bx-hero-integrationen__werkzeug--filter {
  width: 70px;
}

.bx-hero-integrationen__werkzeug--spalten {
  width: 136px;
}

.bx-hero-integrationen__pfeil {
  display: block;
  stroke: currentColor;
}

/* Liste (HI Z. 38–50, 207–209): Karte, Tabellenkopf, neue Zeile absolut, alte Zeilen im Fluss, Fuß */
.bx-hero-integrationen__karte {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app);
}

.bx-hero-integrationen__karte--liste {
  left: 92px;
  top: 126px;
  width: 920px;
  height: 470px;
}

.bx-hero-integrationen__tabellenkopf {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 40px;
  background: var(--farbe-app-kopf);
  color: var(--farbe-weiss);
  font: 700 13px var(--schrift-familie-app);
}

.bx-hero-integrationen__kopfzelle {
  position: absolute;
  top: 12px;
  white-space: nowrap;
}

.bx-hero-integrationen__kopfzelle--name,
.bx-hero-integrationen__zelle--name {
  left: 56px;
}

.bx-hero-integrationen__kopfzelle--organisation,
.bx-hero-integrationen__zelle--organisation {
  left: 250px;
}

.bx-hero-integrationen__kopfzelle--quelle,
.bx-hero-integrationen__zelle--quelle {
  left: 450px;
}

.bx-hero-integrationen__kopfzelle--status,
.bx-hero-integrationen__zelle--status {
  left: 600px;
}

.bx-hero-integrationen__zeilen {
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
}

.bx-hero-integrationen__zeile {
  position: relative;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid var(--farbe-app-linie);
  background: var(--farbe-weiss);
}

.bx-hero-integrationen__zeile--neu {
  position: absolute;
  left: 0;
  top: 40px;
}

.bx-hero-integrationen__markierung {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--farbe-gruen-flaeche);
  opacity: 0;
}

.bx-hero-integrationen__zelle {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  height: 60px;
  font: 400 15px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-integrationen__auswahl {
  position: absolute;
  left: 20px;
  top: 21px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--farbe-app-rand);
  border-radius: var(--radius-mini);
  background: var(--farbe-weiss);
}

.bx-hero-integrationen__tabellenkopf .bx-hero-integrationen__auswahl {
  top: 11px;
  border-color: var(--farbe-weiss);
  background: transparent;
}

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

.bx-hero-integrationen__organisation {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-linie);
  font: 700 13px var(--schrift-familie-app);
}

.bx-hero-integrationen__status {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--radius-app-chip);
  font: 700 13px var(--schrift-familie-app);
}

.bx-hero-integrationen__status--neu {
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
}

.bx-hero-integrationen__status--kontaktiert {
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-text-sekundaer);
}

.bx-hero-integrationen__status--qualifiziert {
  background: var(--farbe-linie);
  color: var(--farbe-navy);
}

/* Fuß: im Design top = Kartenhöhe − 44 ab der Rahmenkante, hier ab der Polsterkante (1 px Rahmen oben und unten) */
.bx-hero-integrationen__fuss {
  position: absolute;
  left: 20px;
  top: calc(100% - 42px);
  color: var(--farbe-app-sekundaer);
  font: 400 14px var(--schrift-familie-app);
}

/* Toast (HI Z. 104–106, 234) */
.bx-hero-integrationen__toast {
  position: absolute;
  left: 596px;
  top: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 424px;
  height: 88px;
  padding: 0 24px;
  border-radius: var(--radius-app-toast);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-toast);
  opacity: 0;
}

.bx-hero-integrationen__toast-symbol {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pille);
}

.bx-hero-integrationen__toast-symbol--logo {
  border: 1px solid var(--farbe-app-linie);
  background: var(--farbe-weiss);
}

.bx-hero-integrationen__toast-logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.bx-hero-integrationen__toast-titel {
  display: block;
  color: var(--farbe-app-dunkel);
  font: 700 16px var(--schrift-familie-app);
}

.bx-hero-integrationen__toast-text {
  display: block;
  margin-top: 4px;
  color: var(--farbe-app-nebentext);
  font: 400 14px var(--schrift-familie-app);
}

/* Fremdsystem als Fenster über brainX (HI Z. 167–175) */
.bx-hero-integrationen__abdunkeln {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 13;
  width: 1040px;
  height: 620px;
  background: var(--farbe-tooltip);
  opacity: 0;
  pointer-events: none;
}

.bx-hero-integrationen__fenster {
  position: absolute;
  z-index: 14;
  overflow: hidden;
  border-radius: var(--radius-app-fenster);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-fremdfenster);
  font-family: var(--schrift-familie-system);
  opacity: 0;
}

.bx-hero-integrationen__fensterleiste {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--farbe-fremd-leiste);
  color: var(--farbe-weiss);
  white-space: nowrap;
}

.bx-hero-integrationen__fensterpunkte {
  display: flex;
  flex: none;
  gap: 6px;
}

.bx-hero-integrationen__fensterpunkte i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-rund);
  background: var(--farbe-fremd-leiste-punkt);
}

.bx-hero-integrationen__fensterlogo {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: var(--radius-app);
  background: var(--farbe-weiss);
  object-fit: contain;
}

.bx-hero-integrationen__fenstername {
  flex: none;
  font: 700 13px var(--schrift-familie-system);
}

.bx-hero-integrationen__unterzeile {
  overflow: hidden;
  min-width: 0;
  color: var(--farbe-status-leer);
  font: 400 12px var(--schrift-familie-system);
  text-overflow: ellipsis;
}

.bx-hero-integrationen__extern {
  flex: none;
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid var(--farbe-navy-rand-mittel);
  border-radius: var(--radius-pille);
  color: var(--farbe-linie);
  font: 500 10px var(--schrift-familie-mono);
  letter-spacing: 0.9px;
}

.bx-hero-integrationen__fensterinhalt {
  position: absolute;
  left: 0;
  top: 38px;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* fliegendes Etikett (HI Z. 176–177) */
.bx-hero-integrationen__etikett {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-dunkel);
  box-shadow: var(--schatten-app-etikett);
  color: var(--farbe-weiss);
  font: 700 12px var(--schrift-familie-system);
  white-space: nowrap;
  opacity: 0;
}

.bx-hero-integrationen__etikett-logo {
  display: block;
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: var(--radius-app);
  background: var(--farbe-weiss);
  object-fit: contain;
}

/* Text in Systemschrift (SYSF, R3S; HI Z. 415, 1067): Lage und Schriftgrad in der Szenen-Klasse */
.bx-hero-integrationen__systemtext {
  position: absolute;
  font-family: var(--schrift-familie-system);
}

/* == Ph9 I0a P0: Status, Auswahl-Liste, Menü, Dialog, Haken-Toast (HI Z. 25–112, 129, 348–410; HD Z. 20–90) ==
   Nahdubletten (Vertrag Ph9 §6, Sichtvergleich; H9-39): Menü-Hervorhebung #F4F4F6 ⇒ flaeche-kachel, Gebucht #EAEBF2 ⇒
   linie-karte, Schatten Menü ⇒ app-toast, Dialog ⇒ app-dialog, Segment ⇒ app; gedrückter Knopf und Haken-Fläche über
   die Tokens des V-7-Nachtrags. */
.bx-hero-integrationen__status--offen {
  background: var(--farbe-app-chip-bernstein-flaeche);
  color: var(--farbe-gedaempft-text);
}

.bx-hero-integrationen__status--gesendet,
.bx-hero-integrationen__status--versendet {
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-text-sekundaer);
}

.bx-hero-integrationen__status--bezahlt,
.bx-hero-integrationen__status--erledigt,
.bx-hero-integrationen__status--signiert {
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
}

/* Aufgaben-Status (HI Z. 413): Farbpaare über vorhandene Tokens (Vertrag Ph9 §3.11.1, H9-39) */
.bx-hero-integrationen__status--nicht-begonnen {
  background: var(--farbe-app-chip-blau-flaeche);
  color: var(--farbe-app-chip-blau-text);
}

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

.bx-hero-integrationen__status--in-bearbeitung,
.bx-hero-integrationen__status--wartend {
  background: var(--farbe-app-linie);
  color: var(--farbe-text-sekundaer);
}

.bx-hero-integrationen__karte--auswahl {
  left: 92px;
  top: 126px;
  width: 920px;
  height: 470px;
}

.bx-hero-integrationen__karte--auswahl .bx-hero-integrationen__zeile {
  height: 60px;
}

.bx-hero-integrationen__karte--auswahl .bx-hero-integrationen__fuss {
  top: 420px;
  color: var(--farbe-app-sekundaer);
  font: 400 14px var(--schrift-familie-app);
  opacity: 1;
}

.bx-hero-integrationen__auswahl-haken {
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-mini);
  background: var(--farbe-app-gruen);
  color: var(--farbe-weiss);
  opacity: 0;
}

.bx-hero-integrationen__zelle--betrag {
  justify-content: flex-end;
}

.bx-hero-integrationen__zelltext {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-hero-integrationen__werkzeug[data-bx-stufe="offen"] {
  border-color: var(--farbe-app-text);
}

/* Menü (HI Z. 61–64) */
.bx-hero-integrationen__menue {
  position: absolute;
  left: 92px;
  top: 118px;
  z-index: 8;
  width: 300px;
  padding: 8px 0;
  border-radius: var(--radius-app);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-toast);
  opacity: 0;
  transform-origin: 20% 0;
}

.bx-hero-integrationen__menue-eintrag {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  font: 400 15px var(--schrift-familie-app);
}

.bx-hero-integrationen__menue-eintrag span {
  position: relative;
}

.bx-hero-integrationen__menue-hl {
  position: absolute;
  inset: 0 6px;
  border-radius: var(--radius-app);
  background: var(--farbe-flaeche-kachel);
  opacity: 0;
}

.bx-hero-integrationen__menue-trenner {
  height: 1px;
  margin: 4px 0;
  background: var(--farbe-app-linie);
}

/* Schleier und Dialog (HI Z. 65–90) */
.bx-hero-integrationen__scrim {
  position: absolute;
  left: 64px;
  top: 0;
  z-index: 9;
  width: 976px;
  height: 620px;
  background: var(--farbe-app-text);
  opacity: 0;
}

.bx-hero-integrationen__dialog {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-dialog);
  opacity: 0;
}

.bx-hero-integrationen__dialog-kopf {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 19px var(--schrift-familie-app);
}

.bx-hero-integrationen__dialog-logo {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.bx-hero-integrationen__dialog-x {
  margin-left: auto;
  color: var(--farbe-app-sekundaer);
  font: 400 24px/1 var(--schrift-familie-app);
}

.bx-hero-integrationen__phase {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.bx-hero-integrationen__feldlabel {
  position: absolute;
  left: 24px;
  color: var(--farbe-app-sekundaer);
  font: 700 12.5px var(--schrift-familie-app);
}

.bx-hero-integrationen__segment {
  position: absolute;
  display: flex;
  height: 36px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-flaeche-toggle);
}

.bx-hero-integrationen__segment-an {
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(50% - 3px);
  height: 30px;
  border-radius: var(--radius-chip);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app);
}

.bx-hero-integrationen__segment span {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  font: 400 14px var(--schrift-familie-app);
}

.bx-hero-integrationen__segment span[data-bx-aktiv] {
  font-weight: 700;
}

.bx-hero-integrationen__wahl {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app);
  font: 400 14px var(--schrift-familie-app);
}

.bx-hero-integrationen__schalter {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px var(--schrift-familie-app);
}

.bx-hero-integrationen__schalter-knopf {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-gruen);
}

.bx-hero-integrationen__schalter-knopf::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-rund);
  background: var(--farbe-weiss);
}

.bx-hero-integrationen__knopf {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--radius-app);
  font: 700 14px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-integrationen__knopf--primaer {
  background: var(--farbe-app-gruen);
  color: var(--farbe-weiss);
}

.bx-hero-integrationen__knopf--primaer[data-bx-stufe="gedrueckt"] {
  background: var(--farbe-app-gruen-gedrueckt);
}

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

.bx-hero-integrationen__knopf--text {
  color: var(--farbe-app-sekundaer);
}

.bx-hero-integrationen__balken {
  position: absolute;
  left: 24px;
  overflow: hidden;
  width: 432px;
  height: 10px;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-linie);
}

.bx-hero-integrationen__balken-fuellung {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pille);
  background: var(--farbe-app-gruen);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.bx-hero-integrationen__haken-gross {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--farbe-app-gruen);
  border-radius: var(--radius-pille);
  background: var(--farbe-app-haken-flaeche);
  color: var(--farbe-app-gruen);
}

.bx-hero-integrationen__datei {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app-karte);
  font: 700 13.5px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-integrationen__datei i {
  padding: 4px 6px;
  border-radius: var(--radius-app);
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-text-sekundaer);
  font: 700 10px var(--schrift-familie-app);
  font-style: normal;
}

.bx-hero-integrationen__datei span {
  margin-left: auto;
  color: var(--farbe-app-sekundaer);
  font-weight: 400;
}

.bx-hero-integrationen__toast-symbol--haken {
  border: 2px solid var(--farbe-app-gruen);
  background: var(--farbe-app-haken-flaeche);
  color: var(--farbe-app-gruen);
}

/* Strich für leere Werte (HI Z. 654, STRICH) */
.bx-hero-integrationen__strich {
  color: var(--farbe-app-rand);
}

/* == Ph9 I0a P0 r3: Kopf mit Unterzeile, Karte mit Feldern, Hervorhebung, Wechsel (HI Z. 240–262, 1052–1066) == */
.bx-hero-integrationen__r3-titel {
  position: absolute;
  left: 28px;
  top: 11px;
  white-space: nowrap;
}

.bx-hero-integrationen__r3-titel b {
  display: block;
  font: 700 19px var(--schrift-familie-app);
}

.bx-hero-integrationen__r3-titel span {
  display: block;
  margin-top: 2px;
  color: var(--farbe-app-sekundaer);
  font: 400 12.5px var(--schrift-familie-app);
}

.bx-hero-integrationen__r3-aktion {
  position: absolute;
  right: 28px;
  top: 13px;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
  font: 700 14px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-integrationen__r3-karte-titel {
  position: absolute;
  left: 20px;
  top: 18px;
  font: 700 15px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-integrationen__r3-felder {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 52px;
}

/* Feld 50 hoch im Takt 52 (HI Z. 1057: top 52 + i · 52) */
.bx-hero-integrationen__r3-feld {
  position: relative;
  height: 50px;
  margin-bottom: 2px;
  border-top: 1px solid var(--farbe-linie-sektion);
}

.bx-hero-integrationen__r3-feld b {
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--farbe-app-sekundaer);
  font: 700 12px var(--schrift-familie-app);
}

.bx-hero-integrationen__r3-wert {
  position: absolute;
  left: 0;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  font: 400 15px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-integrationen__r3-stufe {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  opacity: 0;
}

.bx-hero-integrationen__r3-hervorhebung {
  position: absolute;
  z-index: 3;
  border-radius: var(--radius-app-karte);
  box-shadow: var(--schatten-app-hervorhebung);
  opacity: 0;
  pointer-events: none;
}

/* Abgleich-Marke (HI Z. 178, bxi-sync) */
.bx-hero-integrationen__sync {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-app-chip);
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
  font: 700 12.5px var(--schrift-familie-app);
}

/* == Ph9 I1a P2: Aufgaben-Status der Runde 3 (tsk) und leise Zelle der Liste listeH (Gruppe r3; HI Z. 1068, 208) ==
   Farbpaare TSK über vorhandene Tokens, Nahdubletten (Vertrag Ph9 §6): geplant #E8F0FB ⇒ vorschau-blau-flaeche,
   in Bearbeitung #FFF4E5 ⇒ app-chip-bernstein-flaeche; „wartend“ über die Tokens des Blocks „Ph9 I1a P2“. */
.bx-hero-integrationen__tsk--nicht-begonnen {
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-text-sekundaer);
}

.bx-hero-integrationen__tsk--geplant {
  background: var(--farbe-vorschau-blau-flaeche);
  color: var(--farbe-fremd-outlook-navigation);
}

.bx-hero-integrationen__tsk--in-bearbeitung {
  background: var(--farbe-app-chip-bernstein-flaeche);
  color: var(--farbe-gedaempft-text);
}

.bx-hero-integrationen__tsk--wartend {
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-app-status-wartend-text);
}

.bx-hero-integrationen__tsk--erledigt {
  background: var(--farbe-app-status-ok);
  color: var(--farbe-app-link);
}

.bx-hero-integrationen__r3-leise {
  color: var(--farbe-app-sekundaer);
}

/* Ticket „In Bearbeitung“ (HI Z. 1448: #E3E8F4/#1E2850 ⇒ linie-karte/navy, Nahdublette wie DocuSign „Angesehen“) */
.bx-hero-integrationen__tsk--ticket-bearbeitung {
  background: var(--farbe-linie-karte);
  color: var(--farbe-navy);
}

/*
  Szene hero-docuseal (Teilplan I1a §4.1; HI Z. 1196–1239): Auftrag mit Umschlag-Karte und Automatisierung, Aufgabenliste
  als zweite Ebene, DocuSeal-Fenster mit Dokument und Zeichenfeld. Lagen in Bühnen-px wie im Design. Nahdubletten
  (Vertrag Ph9 §6, Teilplan I1a §9): Text #111827 ⇒ navy-tief, Seitenleiste #F3F4F6 ⇒ flaeche-kachel, Linie #E5E7EB ⇒
  app-linie, #9CA3AF ⇒ app-rand-stark, #6B7280 ⇒ app-nebentext, Feld #FAFAFA ⇒ flaeche-hell, Knopf gedrückt #374151 ⇒
  fremd-outlook-text-sekundaer (wertgleich), Erfolg #ECFDF5 ⇒ diagramm-schraffur, Knotenrand #DDE2EC ⇒ linie-eingabe,
  Blattschatten ⇒ schatten-app, Panel-Schatten ⇒ schatten-app-panel (H9-83), Unterschrift „cursive“ ⇒ schrift-familie-hand.
*/

.bx-hero-docuseal__auftrag {
  left: 92px;
  top: 120px;
  width: 452px;
  height: 274px;
}

.bx-hero-docuseal__umschlag {
  left: 560px;
  top: 120px;
  width: 452px;
  height: 326px;
}

/* Automatisierung (HI Z. 1212–1222) */
.bx-hero-docuseal__panel {
  position: absolute;
  left: 92px;
  top: 462px;
  z-index: 6;
  overflow: hidden;
  width: 920px;
  height: 152px;
  border-radius: var(--radius-eingabe);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app-panel);
  opacity: 0;
}

.bx-hero-docuseal__panel-kopf {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--farbe-app-linie);
  font: 700 14px var(--schrift-familie-app);
  white-space: nowrap;
}

.bx-hero-docuseal__panel-x {
  margin-left: auto;
  color: var(--farbe-app-sekundaer);
  font: 400 12px var(--schrift-familie-app);
}

.bx-hero-docuseal__knoten {
  position: absolute;
  top: 54px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 152px;
  height: 62px;
  padding: 6px 10px;
  border: 1.5px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-app-karte);
  background: var(--farbe-weiss);
}

.bx-hero-docuseal__knoten b {
  display: block;
  font: 700 12.5px/14px var(--schrift-familie-app);
}

.bx-hero-docuseal__knoten span {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--farbe-app-sekundaer);
  font: 400 11px var(--schrift-familie-app);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-hero-docuseal__knoten--0 {
  left: 20px;
}

.bx-hero-docuseal__knoten--1 {
  left: 202px;
}

.bx-hero-docuseal__knoten--2 {
  left: 384px;
}

.bx-hero-docuseal__knoten--3 {
  left: 566px;
}

.bx-hero-docuseal__knoten--4 {
  left: 748px;
}

.bx-hero-docuseal__knoten-ok {
  position: absolute;
  right: -8px;
  top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-rund);
  background: var(--farbe-app-gruen);
  color: var(--farbe-weiss);
  opacity: 0;
}

.bx-hero-docuseal__pfeil {
  position: absolute;
  top: 75px;
  width: 30px;
  color: var(--farbe-app-gruen);
  font: 400 16px/20px var(--schrift-familie-app);
  text-align: center;
}

.bx-hero-docuseal__pfeil--1 {
  left: 172px;
}

.bx-hero-docuseal__pfeil--2 {
  left: 354px;
}

.bx-hero-docuseal__pfeil--3 {
  left: 536px;
}

.bx-hero-docuseal__pfeil--4 {
  left: 718px;
}

.bx-hero-docuseal__api {
  position: absolute;
  left: 20px;
  top: 126px;
  padding: 2px 7px;
  font-size: 11px;
  opacity: 0;
}

/* Aufgabenliste (HI Z. 1223–1225, 1236): Karte 430 hoch */
.bx-hero-docuseal__aufgaben-ebene {
  opacity: 0;
}

.bx-hero-docuseal__aufgaben {
  height: 430px;
}

.bx-hero-docuseal__sp-titel {
  left: 56px;
}

.bx-hero-docuseal__sp-bezug {
  left: 290px;
}

.bx-hero-docuseal__sp-status {
  left: 500px;
}

.bx-hero-docuseal__sp-zustaendig {
  left: 780px;
}

.bx-hero-docuseal__neu-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* DocuSeal-Fenster (HI Z. 1196–1210) */
.bx-hero-docuseal__fenster {
  left: 150px;
  top: 90px;
  width: 620px;
  height: 420px;
}

.bx-hero-docuseal__flaeche {
  position: absolute;
  inset: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-navy-tief);
}

.bx-hero-docuseal__leiste {
  position: absolute;
  left: 0;
  top: 0;
  width: 290px;
  height: 100%;
  border-right: 1px solid var(--farbe-app-linie);
  background: var(--farbe-flaeche-kachel);
}

.bx-hero-docuseal__blatt {
  position: absolute;
  left: 24px;
  top: 22px;
  width: 242px;
  height: 330px;
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-app);
}

.bx-hero-docuseal__blatt-titel {
  left: 18px;
  top: 18px;
  font: 700 12.5px var(--schrift-familie-system);
}

.bx-hero-docuseal__blatt-zeile {
  left: 18px;
  font: 400 11.5px var(--schrift-familie-system);
}

.bx-hero-docuseal__blatt-zeile--1 {
  top: 52px;
}

.bx-hero-docuseal__blatt-zeile--2 {
  top: 74px;
}

.bx-hero-docuseal__blatt-zeile--3 {
  top: 96px;
}

.bx-hero-docuseal__blatt-linie {
  position: absolute;
  left: 18px;
  top: 250px;
  width: 150px;
  height: 1px;
  background: var(--farbe-app-rand-stark);
}

.bx-hero-docuseal__blatt-unter {
  left: 18px;
  top: 256px;
  color: var(--farbe-app-nebentext);
  font: 400 10px var(--schrift-familie-system);
}

.bx-hero-docuseal__mini {
  position: absolute;
  left: 22px;
  top: 222px;
  color: var(--farbe-navy-tief);
  font: italic 400 20px var(--schrift-familie-hand);
  opacity: 0;
}

.bx-hero-docuseal__titel {
  left: 316px;
  top: 24px;
  font: 700 16px var(--schrift-familie-system);
}

.bx-hero-docuseal__text {
  left: 316px;
  top: 48px;
  color: var(--farbe-app-nebentext);
  font: 400 12.5px var(--schrift-familie-system);
}

.bx-hero-docuseal__feld {
  position: absolute;
  left: 316px;
  top: 84px;
  width: 280px;
  height: 130px;
  border: 1.5px dashed var(--farbe-app-rand-stark);
  border-radius: var(--radius-app-karte);
  background: var(--farbe-flaeche-hell);
}

.bx-hero-docuseal__zeichnung {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--farbe-navy-tief);
}

.bx-hero-docuseal__zeichnung path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.bx-hero-docuseal__knopf {
  position: absolute;
  left: 316px;
  top: 236px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 42px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-navy-tief);
  color: var(--farbe-weiss);
  font: 700 14px var(--schrift-familie-system);
}

.bx-hero-docuseal__knopf[data-bx-stufe="gedrueckt"] {
  background: var(--farbe-fremd-outlook-text-sekundaer);
}

.bx-hero-docuseal__ok {
  position: absolute;
  left: 316px;
  top: 294px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 280px;
  height: 40px;
  border-radius: var(--radius-app-karte);
  background: var(--farbe-diagramm-schraffur);
  color: var(--farbe-fremd-docuseal-erfolg);
  font: 700 13.5px var(--schrift-familie-system);
  opacity: 0;
}

.bx-hero-docuseal__ok-haken {
  flex: none;
}

/*
 * Baustein „weg-der-daten“ (Vertrag Ph9 §3.3.2; Design „Integration DATEV v2“, Abschnitt 02): Band mit Linien oben
 * und unten, drei Karten und zwei Verbinder im Raster 1fr 148px 1fr 148px 1fr; unter der Stufe `stapeln` einspaltig,
 * die Pfeile zeigen dann nach unten. Nahdubletten: Liste 14,5 px/1,5 ⇒ karte-text, Verbinder-Label 700 12,5 px/1,3 ⇒
 * pille-gross, Unterzeile 12,5 px/1,4 ⇒ fussnote.
 */
.bx-weg-der-daten {
  padding: var(--abstand-64) var(--seitenrand) var(--abstand-68);
  border-top: 1px solid var(--farbe-linie-sektion);
  border-bottom: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-flaeche-band);
}

.bx-weg-der-daten__kopf {
  max-width: var(--breite-text-max);
  margin-bottom: var(--abstand-32);
}

.bx-weg-der-daten__karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr) 148px minmax(0, 1fr);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-weg-der-daten__karte {
  padding: var(--abstand-28) var(--abstand-28) var(--abstand-30);
  border-radius: var(--radius-karte);
}

.bx-weg-der-daten__karte--1 {
  background-color: var(--farbe-navy);
  box-shadow: var(--schatten-karte-navy);
}

.bx-weg-der-daten__karte--2 {
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-weiss);
}

.bx-weg-der-daten__karte--3 {
  background-color: var(--farbe-gruen-flaeche);
}

.bx-weg-der-daten__nummer {
  margin: 0 0 var(--abstand-12);
  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-weg-der-daten__titel {
  margin: 0 0 var(--abstand-16);
  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-weg-der-daten__punkte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-11);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-weg-der-daten__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-11);
  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);
}

/* Raute 6 px, 45° gedreht (Design 02) */
.bx-weg-der-daten__punkt::before {
  content: '';
  flex: none;
  width: var(--abstand-6);
  height: var(--abstand-6);
  margin-top: var(--abstand-8);
  transform: rotate(45deg);
}

.bx-weg-der-daten__karte--1 .bx-weg-der-daten__nummer {
  color: var(--farbe-mint);
}

.bx-weg-der-daten__karte--1 .bx-weg-der-daten__punkt::before {
  background-color: var(--farbe-mint);
}

.bx-weg-der-daten__karte--1 .bx-weg-der-daten__titel {
  color: var(--farbe-weiss);
}

.bx-weg-der-daten__karte--1 .bx-weg-der-daten__punkt {
  color: var(--farbe-navy-text-hell);
}

.bx-weg-der-daten__karte--2 .bx-weg-der-daten__nummer {
  color: var(--farbe-mikrotext);
}

.bx-weg-der-daten__karte--2 .bx-weg-der-daten__titel {
  color: var(--farbe-navy);
}

.bx-weg-der-daten__karte--2 .bx-weg-der-daten__punkt {
  color: var(--farbe-text-sekundaer);
}

.bx-weg-der-daten__karte--2 .bx-weg-der-daten__punkt::before {
  background-color: var(--farbe-navy);
}

.bx-weg-der-daten__karte--3 .bx-weg-der-daten__nummer {
  color: var(--farbe-gruen);
}

.bx-weg-der-daten__karte--3 .bx-weg-der-daten__titel {
  color: var(--farbe-gruen-text);
}

.bx-weg-der-daten__karte--3 .bx-weg-der-daten__punkt {
  color: var(--farbe-navy);
}

.bx-weg-der-daten__karte--3 .bx-weg-der-daten__punkt::before {
  background-color: var(--farbe-gruen);
}

/* Verbinder 148 px (Design 02): Label, Pfeil, Unterzeile */
.bx-weg-der-daten__verbinder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-6);
  padding: var(--abstand-12) var(--abstand-8);
  text-align: center;
}

.bx-weg-der-daten__label {
  color: var(--farbe-gruen-text);
  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);
}

.bx-weg-der-daten__pfeil {
  display: block;
  width: var(--abstand-28);
  height: var(--abstand-28);
  color: var(--farbe-mint-akzent);
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bx-weg-der-daten__unterzeile {
  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);
}

@media (width < 1080px) {
  .bx-weg-der-daten__karten {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-4);
  }

  .bx-weg-der-daten__pfeil {
    transform: rotate(90deg);
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * Ph11 V-9 Teil 2 (N11-12, Teilplan M2b R-2; Design „Loesung Leads v3“ „Anschluss“): Kopfzeile mit Kicker über dem
 * Titel und Chip rechts daneben. Kicker Mono 500 10,5 px ⇒ feld-label-mono, Chip Mono 700 11 px ⇒ karte-pille;
 * Farben je Kartenfläche mit vorhandenen Tokens (Kontrast vor Design).
 */
.bx-weg-der-daten__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-8) var(--abstand-16);
  margin-bottom: var(--abstand-16);
}

.bx-weg-der-daten__kopfzeile .bx-weg-der-daten__titel {
  margin-bottom: 0;
}

.bx-weg-der-daten__kicker {
  margin: 0 0 var(--abstand-4);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-feld-label-mono-gewicht);
  font-size: var(--schrift-feld-label-mono-groesse);
  line-height: var(--schrift-feld-label-mono-zeile);
  letter-spacing: var(--schrift-feld-label-mono-laufweite);
}

.bx-weg-der-daten__chip {
  flex: none;
  padding: var(--abstand-6) var(--abstand-10);
  border-radius: var(--radius-pille);
  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);
}

.bx-weg-der-daten__karte--1 .bx-weg-der-daten__kicker {
  color: var(--farbe-navy-text-hell);
}

.bx-weg-der-daten__karte--1 .bx-weg-der-daten__chip {
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-weg-der-daten__karte--2 .bx-weg-der-daten__kicker {
  color: var(--farbe-text-sekundaer);
}

.bx-weg-der-daten__karte--2 .bx-weg-der-daten__chip {
  background-color: var(--farbe-flaeche-band);
  color: var(--farbe-navy);
}

.bx-weg-der-daten__karte--3 .bx-weg-der-daten__kicker {
  color: var(--farbe-gruen-text);
}

.bx-weg-der-daten__karte--3 .bx-weg-der-daten__chip {
  background-color: var(--farbe-weiss);
  color: var(--farbe-gruen-text);
}

/*
 * Ph12 D (V-D-integrationen-6, mobil-16; Design Zapier, n8n, WordPress, Abschnitt 02): Karte 1 weiß wie Karte 2,
 * Feld `flaeche: weiss` an der Karte. Rand, Nummer, Titel, Punkte und Raute wie Karte 2, kein Navy-Schatten.
 */
.bx-weg-der-daten__karte--1[data-bx-flaeche="weiss"] {
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-weiss);
  box-shadow: none;
}

.bx-weg-der-daten__karte--1[data-bx-flaeche="weiss"] .bx-weg-der-daten__nummer {
  color: var(--farbe-mikrotext);
}

.bx-weg-der-daten__karte--1[data-bx-flaeche="weiss"] .bx-weg-der-daten__titel {
  color: var(--farbe-navy);
}

.bx-weg-der-daten__karte--1[data-bx-flaeche="weiss"] .bx-weg-der-daten__punkt {
  color: var(--farbe-text-sekundaer);
}

.bx-weg-der-daten__karte--1[data-bx-flaeche="weiss"] .bx-weg-der-daten__punkt::before {
  background-color: var(--farbe-navy);
}

.bx-weg-der-daten__karte--1[data-bx-flaeche="weiss"] .bx-weg-der-daten__kicker {
  color: var(--farbe-text-sekundaer);
}

.bx-weg-der-daten__karte--1[data-bx-flaeche="weiss"] .bx-weg-der-daten__chip {
  background-color: var(--farbe-flaeche-band);
  color: var(--farbe-navy);
}

/*
 * Ph12 Design-Abgleich (Fix E2; E-loesungen -129, Design „Loesung Leads v3“ Z. 331–375): in der Kopfkarte der
 * Integrations-Kacheln steht der Weg der Daten als senkrechter Ablauf (Endzustand): Knoten links, durchgehende Linie,
 * Karten rechts, die letzte Station grün mit orangem Knoten. Verbinder entfallen, die Chips tragen die Labels.
 */
.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten {
  padding: 0;
  border: 0;
  background-color: transparent;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-18);
  counter-reset: bx-weg;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__verbinder {
  display: none;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte {
  position: relative;
  margin-inline-start: var(--abstand-54); /* Knoten 36 px + Abstand 18 px (Design) */
  padding: var(--abstand-14) var(--abstand-18);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-weiss);
  box-shadow: none;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--3 {
  border-color: var(--farbe-gruen-flaeche);
  background-color: var(--farbe-gruen-flaeche);
}

/* Knoten: die Nummer wird zum navy Kreis mit Haken */
.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__nummer {
  position: absolute;
  inset-inline-start: calc(-1 * var(--abstand-54));
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  margin: 0;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  font-size: 0;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__nummer::before {
  content: '\2713';
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-schritt-zahl-gewicht);
  font-size: var(--schrift-kopf-cta-groesse);
  line-height: 1;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--3 .bx-weg-der-daten__nummer {
  background-color: var(--farbe-orange-text);
  box-shadow: var(--schatten-szenario-aus);
}

/* durchgehende Linie von Knoten zu Knoten */
.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(-1 * var(--abstand-37));
  inset-block-start: var(--abstand-36);
  inset-block-end: calc(var(--abstand-18) * -1);
  inline-size: 2px;
  background-color: var(--farbe-navy);
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__kicker,
.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--1 .bx-weg-der-daten__kicker {
  color: var(--farbe-mikrotext);
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__titel,
.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--1 .bx-weg-der-daten__titel {
  color: var(--farbe-navy);
  font-weight: var(--schrift-karte-titel-mittel-gewicht);
  font-size: var(--schrift-karte-titel-mittel-groesse);
  line-height: 1.35;
  letter-spacing: 0;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--3 .bx-weg-der-daten__titel {
  color: var(--farbe-gruen-text);
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__punkte {
  margin-block-start: var(--abstand-6);
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__punkt,
.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--1 .bx-weg-der-daten__punkt {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-text-klein-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--3 .bx-weg-der-daten__punkt {
  color: var(--farbe-gruen-text);
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__punkt::before {
  display: none;
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--1 .bx-weg-der-daten__chip {
  background-color: var(--farbe-flaeche-kachel);
  color: var(--farbe-navy);
}

.bx-integrations-kacheln__kopfkarte-unten .bx-weg-der-daten__karte--2 .bx-weg-der-daten__chip {
  background-color: var(--farbe-icon-orange);
  color: var(--farbe-orange-text);
}

/*
 * Baustein „varianten-tabelle“ (Vertrag Ph9 §3.3.3; Design „Integration DATEV v2“, Abschnitt 03): Kopfblock, Tabelle
 * im Rahmen (Radius 20, Rand), Kopf Navy, hervorgehobene Spalte Grün, Status als Punkt (ja gefüllt, nein Ring) und Fuß.
 * Spaltenbreiten über `data-bx-spalten`; unter der Stufe `mobil` scrollt der Rahmen quer (Tastatur über tabindex).
 * Nahdubletten: Zellentext 400 15 px/1,5 ⇒ liste, Pille 700 11,5 px ⇒ pille.
 */
.bx-varianten-tabelle {
  padding: var(--abstand-80) var(--seitenrand) var(--abstand-40);
  background-color: var(--farbe-weiss);
}

.bx-varianten-tabelle__kopf {
  max-width: var(--breite-text-max);
  margin-bottom: var(--abstand-28);
}

.bx-varianten-tabelle__rahmen {
  overflow-x: auto;
  scroll-padding-inline: var(--abstand-4);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
}

.bx-varianten-tabelle__rahmen:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-varianten-tabelle__tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Spaltenbreiten (Design: DATEV 28/36/36 %, Mail-Tabelle fünf Spalten zu je 20 %) */
[data-bx-spalten="3"] th:first-child {
  width: 28%;
}

[data-bx-spalten="4"] th:first-child {
  width: 25%;
}

[data-bx-spalten="5"] th:first-child {
  width: 20%;
}

/*
 * Ph12 D (V-D-integrationen-14 und -15): Zellen der fünfspaltigen Mail-Tabelle wie alle anderen (Design 15 px, Brevo 03);
 * Spaltenbreiten je Tabelle (Design: Microsoft 365 20/26/54 %, Mollie und Stripe 34/33/33 %)
 */
[data-bx-tabelle="microsoft-365"] th:first-child {
  width: 20%;
}

[data-bx-tabelle="microsoft-365"] th:nth-child(2) {
  width: 26%;
}

[data-bx-tabelle="zahlung"] th:first-child {
  width: 34%;
}

.bx-varianten-tabelle__tabelle th,
.bx-varianten-tabelle__tabelle td {
  padding: var(--abstand-16) var(--abstand-22);
  text-align: left;
  vertical-align: top;
}

.bx-varianten-tabelle__tabelle thead th {
  vertical-align: bottom;
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tabelle-zelle-titel-gewicht);
  font-size: var(--schrift-tabelle-zelle-titel-groesse);
  line-height: var(--schrift-tabelle-zelle-titel-zeile);
  letter-spacing: var(--schrift-tabelle-zelle-titel-laufweite);
}

/* erste Kopfzelle „MERKMAL“ bzw. „BEREICH“ in Mono (Design 03) */
.bx-varianten-tabelle__tabelle thead th:first-child {
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-gruppenlabel-gewicht);
  font-size: var(--schrift-gruppenlabel-groesse);
  line-height: var(--schrift-gruppenlabel-zeile);
  letter-spacing: var(--schrift-gruppenlabel-laufweite);
}

.bx-varianten-tabelle__tabelle thead th[data-bx-hervorgehoben] {
  background-color: var(--farbe-gruen-text);
}

.bx-varianten-tabelle__tabelle thead th:not(:first-child) {
  font-weight: var(--schrift-h3-gewicht);
}

.bx-varianten-tabelle__spaltentitel {
  margin-right: var(--abstand-10);
}

.bx-varianten-tabelle__pille {
  display: inline-flex;
  align-items: center;
  height: var(--abstand-22);
  padding: 0 var(--abstand-9);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy-linie-stark);
  color: var(--farbe-weiss);
  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-varianten-tabelle__tabelle tbody tr {
  border-top: 1px solid var(--farbe-linie);
}

.bx-varianten-tabelle__tabelle tbody th {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tabelle-zelle-titel-gewicht);
  font-size: var(--schrift-tabelle-zelle-titel-groesse);
  line-height: var(--schrift-tabelle-zelle-titel-zeile);
  letter-spacing: var(--schrift-tabelle-zelle-titel-laufweite);
}

.bx-varianten-tabelle__tabelle td {
  color: var(--farbe-text-sekundaer);
  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-varianten-tabelle__tabelle td[data-bx-hervorgehoben] {
  background-color: var(--farbe-gruen-zelle);
  color: var(--farbe-navy);
}

/* Status 10 px: ja gefüllt, nein Ring (Design 03); Text steht immer daneben */
.bx-varianten-tabelle__status {
  display: inline-block;
  width: var(--abstand-10);
  height: var(--abstand-10);
  margin-right: var(--abstand-10);
  border-radius: var(--radius-rund);
  vertical-align: middle; /* BW-78: Punkt und Ring mittig zur ersten Textzeile (Design: Mitte der Zeile) */
}

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

.bx-varianten-tabelle__status[data-bx-status="nein"] {
  border: 1.5px solid var(--farbe-status-leer);
}

.bx-varianten-tabelle__fuss {
  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);
  letter-spacing: var(--schrift-fussnote-laufweite);
}

.bx-varianten-tabelle__quelle {
  color: var(--farbe-navy);
  text-decoration: underline;
}

@media (width < 768px) {
  .bx-varianten-tabelle__tabelle {
    min-width: 560px;
  }

  /* Ph12 D (V-D-integrationen-mobil-1): drei Spalten passen in die Breite (Design 28/36/36 % in 342 px) */
  [data-bx-spalten="3"] .bx-varianten-tabelle__tabelle {
    min-width: 0;
  }

  .bx-varianten-tabelle__tabelle th,
  .bx-varianten-tabelle__tabelle td {
    padding: var(--abstand-12);
  }

  .bx-varianten-tabelle__tabelle thead th:not(:first-child),
  .bx-varianten-tabelle__tabelle tbody th {
    font-size: var(--schrift-tabelle-zelle-titel-klein-groesse);
  }

  .bx-varianten-tabelle__tabelle td {
    font-size: var(--schrift-tabelle-zelle-titel-klein-groesse);
  }
}

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

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

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

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

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

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

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

.bx-stationen__link {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
  text-decoration: none;
  transition: color var(--bewegung-dauer-kurz);
}

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

.bx-stationen__link:first-child {
  color: var(--farbe-orange-text);
}

.bx-stationen__link:first-child:hover,
.bx-stationen__link:first-child[data-sg-zustand="hover"] {
  color: var(--farbe-navy);
}

/* Karte */

.bx-stationen__karte {
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-box);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-stationen);
}

.bx-stationen__tabs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  row-gap: var(--abstand-6);
  padding: var(--abstand-8);
  border-block-end: 1px solid var(--farbe-linie-karte);
  background-color: var(--farbe-flaeche-karte);
}

.bx-stationen__tab {
  position: relative;
  display: grid;
  grid-template-rows: 14px auto; /* Zeile des Punkts (Design) */
  row-gap: var(--abstand-16);
  align-content: start;
  padding: var(--abstand-18) var(--abstand-20);
  border: 0;
  border-radius: var(--radius-rahmen);
  background-color: transparent;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tab-gewicht);
  font-size: var(--schrift-tab-groesse);
  line-height: var(--schrift-tab-zeile);
  letter-spacing: var(--schrift-tab-laufweite);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--bewegung-dauer-kurz), box-shadow var(--bewegung-dauer-kurz),
    transform var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz);
}

.bx-stationen__tab:hover,
.bx-stationen__tab[data-sg-zustand="hover"] {
  color: var(--farbe-navy);
  transform: translateY(var(--bewegung-lift));
}

.bx-stationen__tab[aria-selected="true"] {
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
  box-shadow: var(--schatten-tab-station);
}

/* Linie von der Punktmitte bis zur Punktmitte des nächsten Tabs (Design −27 px = Polster 20 + halber Punkt 7) */
.bx-stationen__tab::before,
.bx-stationen__fortschritt {
  position: absolute;
  inset-block-start: var(--abstand-24);
  inset-inline: calc(var(--abstand-20) + var(--abstand-7)) calc(-1 * (var(--abstand-20) + var(--abstand-7)));
  block-size: 2px;
}

.bx-stationen__tab::before {
  content: '';
  background-color: var(--farbe-linie-mittel);
  transition: background-color var(--bewegung-dauer-kurz);
}

.bx-stationen__tab:has(~ [aria-selected="true"])::before {
  background-color: var(--farbe-navy);
}

.bx-stationen__tab:last-child::before,
.bx-stationen__tab:last-child .bx-stationen__fortschritt {
  inset-inline-end: var(--abstand-20);
}

.bx-stationen__fortschritt {
  z-index: 1;
  background-color: var(--farbe-orange-flaeche);
  transform: scaleX(var(--bx-stationen-fortschritt, 0));
  transform-origin: left;
}

.bx-stationen__punkt {
  position: relative;
  z-index: 2;
  display: block;
  inline-size: 14px;
  block-size: 14px;
  box-sizing: border-box;
  border: 2px solid var(--farbe-linie-stark);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  transition: background-color var(--bewegung-dauer-kurz), border-color var(--bewegung-dauer-kurz);
}

.bx-stationen__tab[aria-selected="true"] .bx-stationen__punkt {
  border-color: var(--farbe-orange-flaeche);
  background-color: var(--farbe-orange-flaeche);
}

.bx-stationen__tab:has(~ [aria-selected="true"]) .bx-stationen__punkt {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
}

.bx-stationen__tab-text {
  text-wrap: pretty;
}

/* Station: Textspalte und Medium */

.bx-stationen__raster {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr); /* Textspalte (Design) */
  gap: var(--abstand-40);
  align-items: center;
  padding: var(--abstand-36) var(--abstand-34) var(--abstand-36) var(--abstand-40);
}

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

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

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

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

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

.bx-stationen__laeuft-mit[hidden] {
  display: none;
}

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

.bx-stationen__punkte li {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-12);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-termin-schritt-text-gewicht);
  font-size: var(--schrift-termin-schritt-text-groesse);
  line-height: var(--schrift-termin-schritt-text-zeile);
  letter-spacing: var(--schrift-termin-schritt-text-laufweite);
  text-wrap: pretty;
}

.bx-stationen__punkte .bx-icon-kreis {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px; /* Design */
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen);
}

/* die eine Pfeilzeile nach dem Stapel (H6-32/F0c R-1) */
.bx-stationen__pfeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-10);
  margin-block-start: var(--abstand-30);
}

.bx-stationen__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1.5px solid var(--farbe-linie-mittel);
  border-radius: var(--radius-pille);
  background-color: transparent;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-tab-groesse);
  line-height: var(--schrift-tab-zeile);
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--bewegung-dauer-kurz), border-color var(--bewegung-dauer-kurz),
    color var(--bewegung-dauer-kurz);
}

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

.bx-stationen__pfeil[data-bx-stationen-schritt="1"] {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-stationen__pfeil[data-bx-stationen-schritt="1"]:hover,
.bx-stationen__pfeil[data-bx-stationen-schritt="1"][data-sg-zustand="hover"] {
  border-color: var(--farbe-orange-text);
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-stationen__laufstatus {
  margin-inline-start: var(--abstand-6);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
  letter-spacing: var(--schrift-etikett-laufweite);
}

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

.bx-stationen__medium {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  padding: var(--abstand-20);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-flaeche-toggle);
}

.bx-stationen__medium::before {
  content: '';
  position: absolute;
  inset-block-start: -120px; /* Design */
  inset-inline-end: calc(-1 * var(--abstand-80));
  inline-size: 360px;
  block-size: 300px;
  background: radial-gradient(closest-side, var(--farbe-glow-orange-medium), transparent);
  pointer-events: none;
}

.bx-stationen__medium > * {
  position: relative;
}

.bx-stationen__rahmen {
  overflow: hidden;
  border-radius: var(--radius-karte);
  background-color: var(--farbe-navy-tief);
  box-shadow: var(--schatten-video);
  clip-path: inset(0 round var(--radius-karte));
}

/* Nicht für die Bilder in der Bühne einer Produkt-Animation (Avatare, Logos mit eigener Größe); nur das Standbild füllt den Rahmen (BW-70) */
.bx-stationen__rahmen img:not(.bx-produkt-animation__buehne img),
.bx-stationen__rahmen .bx-produkt-animation__standbild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/*
 * Mit JavaScript vor dem Start: schon die Tab-Form, nur das erste Panel sichtbar (E-5, N2-8). Lädt stationen.js nicht,
 * endet die Regel mit dem ersten Wechsel von tabs.js (dann trägt ein Panel aria-hidden): alle Panels bleiben über die
 * Tabs erreichbar. :where() hält die Spezifität gleich, damit @media (scripting: none) unten weiter überschreibt.
 */
[data-bx-stationen-zustand="liste"]:where(:not(:has(.bx-stationen__station[aria-hidden="true"])))
  .bx-stationen__station:not(:first-child) {
  visibility: hidden;
}

/* Bewegung nur ohne reduzierte Bewegung: Halo am gewählten Punkt, Wechsel beim Wegfall von aria-hidden (erst nach dem
   ersten Wechsel, data-bx-stationen-gewechselt: Panel 1 blendet beim Start nicht ein) */
@keyframes bx-stationen-halo {
  0%,
  100% {
    box-shadow: var(--schatten-szenario-aus);
  }

  50% {
    box-shadow: var(--schatten-halo-orange-aus);
  }
}

@keyframes bx-stationen-wechsel {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* Ph12 D (V-D-integrationen-20): Ablauf wechselt mit 10 px Versatz (Design bxWechsel, .45s) */
@keyframes bx-stationen-ablauf-wechsel {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bx-stationen__tab[aria-selected="true"] .bx-stationen__punkt {
    animation: bx-stationen-halo 2.6s ease-in-out infinite;
  }

  [data-bx-stationen-zustand="tabs"][data-bx-stationen-gewechselt] .bx-stationen__station:not([aria-hidden="true"]) {
    animation: bx-stationen-wechsel var(--bewegung-wechsel-dauer) var(--bewegung-wechsel-kurve) both;
  }

  .bx-stationen[data-bx-variante="ablauf"] [data-bx-stationen-zustand="tabs"][data-bx-stationen-gewechselt] .bx-stationen__station:not([aria-hidden="true"]) {
    animation: bx-stationen-ablauf-wechsel var(--bewegung-ablauf-wechsel-dauer) var(--bewegung-ablauf-wechsel-kurve) both;
  }

  /* Ph8 H3a: das Overlay des gewählten Falls blendet ein (Variante faelle) */
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(1)[aria-selected="true"]) [data-bx-stationen-hinweis="1"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(2)[aria-selected="true"]) [data-bx-stationen-hinweis="2"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(3)[aria-selected="true"]) [data-bx-stationen-hinweis="3"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(4)[aria-selected="true"]) [data-bx-stationen-hinweis="4"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(5)[aria-selected="true"]) [data-bx-stationen-hinweis="5"],
  .bx-stationen__karte:has(.bx-stationen__fall:nth-child(6)[aria-selected="true"]) [data-bx-stationen-hinweis="6"] {
    animation: bx-stationen-hinweis-ein var(--bewegung-wechsel-dauer) var(--bewegung-wechsel-kurve) both;
  }
}

@media (width < 1080px) {
  .bx-stationen__tabs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-stationen__tab:nth-child(2n)::before,
  .bx-stationen__tab:nth-child(2n) .bx-stationen__fortschritt {
    inset-inline-end: var(--abstand-20);
  }

  .bx-stationen__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-20);
    padding: var(--abstand-36) var(--abstand-20);
  }
}

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

  .bx-stationen__kopf {
    column-gap: var(--abstand-20);
  }
}

/* Ohne JavaScript: alle Stationen als Liste unter dem Medium, Tabs und Pfeile aus (LS, Ph5 §11, E-5) */
@media (scripting: none) {
  [data-bx-stationen-zustand="liste"] .bx-stationen__tabs,
  [data-bx-stationen-zustand="liste"] .bx-stationen__pfeile {
    display: none;
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__medium {
    order: -1;
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__stapel {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-40);
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__station:not(:first-child) {
    visibility: visible;
  }

  /* Ph8 H3a: Variante faelle als Liste, die Overlays entfallen (der Hinweis steht im Panel) */
  [data-bx-stationen-zustand="liste"] .bx-stationen__faelle,
  [data-bx-stationen-zustand="liste"] .bx-stationen__hinweis {
    display: none;
  }

  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__karte[data-bx-stationen-zustand="liste"] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-bx-stationen-zustand="liste"] .bx-stationen__faelle + .bx-stationen__raster {
    margin-block-start: var(--abstand-28);
  }
}

/*
 * Ph8 H3a – Variante „faelle“ (Vertrag Ph8 Ä8-7, §3.11; Design APP Produktseite Tour v3 „Subscription-Abrechnung“):
 * links senkrechte Fall-Tabs mit Fortschritt, rechts das App-Fenster mit den Hinweis-Overlays und je Fall die
 * grüne Ergebniszeile samt Rechenweg. Das Overlay folgt dem gewählten Tab per :has() (stationen.js bleibt unverändert);
 * ohne JavaScript steht jeder Fall als Liste unter dem Fenster. Nur Tokens; Stufen nur 1080px.
 */
.bx-stationen__kopf-text {
  max-inline-size: 780px;
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-lead-klein-gewicht);
  font-size: var(--schrift-lead-klein-groesse);
  line-height: var(--schrift-lead-klein-zeile);
  letter-spacing: var(--schrift-lead-klein-laufweite);
  text-wrap: pretty;
}

.bx-stationen[data-bx-variante="faelle"] {
  padding-block: var(--abstand-76) var(--abstand-72);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__kopf {
  display: block;
  max-inline-size: 780px;
  margin-block-end: var(--abstand-36);
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__eyebrow {
  color: var(--farbe-orange-text);
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__karte {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--abstand-56);
  align-items: start;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.bx-stationen__faelle {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-8);
  min-inline-size: 0;
}

.bx-stationen__fall {
  position: relative;
  display: grid;
  grid-template-columns: var(--abstand-28) minmax(0, 1fr);
  gap: var(--abstand-14);
  align-items: start;
  overflow: hidden;
  padding: var(--abstand-16) var(--abstand-18);
  border: 1px solid transparent;
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-flaeche-band);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--bewegung-panel-dauer), box-shadow var(--bewegung-panel-dauer),
    transform var(--bewegung-dauer-kurz);
}

.bx-stationen__fall:hover,
.bx-stationen__fall[data-sg-zustand="hover"] {
  transform: translateY(var(--bewegung-lift));
  box-shadow: var(--schatten-karte-hover-klein);
}

.bx-stationen__fall[aria-selected="true"] {
  border-color: var(--farbe-linie);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-tab-station);
}

.bx-stationen__fall-nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--abstand-28);
  block-size: var(--abstand-28);
  border-radius: var(--radius-rund);
  background-color: var(--farbe-streifen-hell);
  color: var(--farbe-text-sekundaer);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
  transition: background-color var(--bewegung-panel-dauer), color var(--bewegung-panel-dauer);
}

.bx-stationen__fall[aria-selected="true"] .bx-stationen__fall-nummer {
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
}

.bx-stationen__fall-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  min-inline-size: 0;
}

.bx-stationen__fall-titel {
  color: var(--farbe-navy);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-termin-schritt-titel-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
  letter-spacing: var(--schrift-termin-schritt-titel-laufweite);
}

.bx-stationen__fall-text {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-treffer-beschreibung-gewicht);
  font-size: var(--schrift-treffer-beschreibung-groesse);
  line-height: var(--schrift-treffer-beschreibung-zeile);
  letter-spacing: var(--schrift-treffer-beschreibung-laufweite);
  text-wrap: pretty;
}

.bx-stationen__fall-fortschritt {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 3px;
  background-color: var(--farbe-orange-flaeche);
  transform: scaleX(0);
  transform-origin: left;
}

/* rechte Spalte: Fenster und Ergebnis bilden eine Karte (Design: ein Rahmen um Fenster, Bild und Ergebniszeile) */
.bx-stationen[data-bx-variante="faelle"] .bx-stationen__raster {
  display: block;
  min-inline-size: 0;
  padding: 0;
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__medium {
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.bx-stationen[data-bx-variante="faelle"] .bx-stationen__medium::before {
  content: none;
}

.bx-stationen[data-bx-variante="faelle"] .bx-app-fenster {
  border-block-end: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: var(--radius-panel);
  border-start-end-radius: var(--radius-panel);
  box-shadow: var(--schatten-story-fenster);
}

.bx-stationen__hinweis {
  position: absolute;
  inset-block-end: var(--abstand-14);
  inset-inline-end: var(--abstand-14);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-5);
  max-inline-size: min(330px, 82%);
  padding: var(--abstand-12) var(--abstand-15) var(--abstand-13);
  border-radius: var(--radius-promo);
  background-color: var(--farbe-navy);
  box-shadow: var(--schatten-video-hinweis);
  visibility: hidden;
}

.bx-stationen__hinweis-label {
  display: flex;
  align-items: center;
  gap: var(--abstand-7);
  color: var(--farbe-team-projekte); /* Wert wie Design (#FF9270) */
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-label-laufweite);
}

.bx-stationen__hinweis-label::before {
  content: '';
  flex: none;
  inline-size: var(--abstand-7);
  block-size: var(--abstand-7);
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
}

.bx-stationen__hinweis-satz {
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-feld-kompakt-betont-groesse);
  line-height: var(--schrift-termin-schritt-titel-zeile);
  text-wrap: pretty;
}

/* Overlay = gewählter Tab (Wertetabelle n = 1…6, Ph6 `stationen` höchstens sechs Stationen) */
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(1)[aria-selected="true"]) [data-bx-stationen-hinweis="1"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(2)[aria-selected="true"]) [data-bx-stationen-hinweis="2"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(3)[aria-selected="true"]) [data-bx-stationen-hinweis="3"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(4)[aria-selected="true"]) [data-bx-stationen-hinweis="4"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(5)[aria-selected="true"]) [data-bx-stationen-hinweis="5"],
.bx-stationen__karte:has(.bx-stationen__fall:nth-child(6)[aria-selected="true"]) [data-bx-stationen-hinweis="6"] {
  visibility: visible;
}

.bx-stationen__fall-panel {
  min-inline-size: 0;
}

.bx-stationen__fall-panel > .bx-stationen__titel,
.bx-stationen__fall-panel > .bx-stationen__text,
.bx-stationen__fall-panel > .bx-stationen__hinweis-text {
  margin: 0 0 var(--abstand-10);
}

.bx-stationen__hinweis-text span {
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
}

.bx-stationen__ergebnis {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-10);
  margin: 0;
  padding: var(--abstand-14) var(--abstand-20);
  border: 1px solid var(--farbe-ergebnis-gruen-rand);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-faq-antwort-zeile);
  text-wrap: pretty;
}

.bx-stationen__ergebnis .bx-icon-kreis {
  flex: none;
  inline-size: var(--abstand-20);
  block-size: var(--abstand-20);
  margin-block-start: 1px; /* Design */
  background-color: var(--farbe-gruen);
  color: var(--farbe-weiss);
}

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

@keyframes bx-stationen-hinweis-ein {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* mit Skript: Titel, Text und Hinweis der Panels stehen schon im Tab bzw. im Overlay (Hinweis nur für Screenreader) */
@media (scripting: enabled) {
  .bx-stationen__fall-panel > .bx-stationen__titel,
  .bx-stationen__fall-panel > .bx-stationen__text {
    display: none;
  }

  .bx-stationen__fall-panel > .bx-stationen__hinweis-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (width < 1080px) {
  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__karte {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-28);
  }
}

@media (width < 768px) {
  .bx-stationen[data-bx-variante="faelle"] {
    padding-block: var(--abstand-48);
  }

  .bx-stationen__fall {
    padding: var(--abstand-14);
  }
}

/*
 * Ph12 Design-Abgleich (APP Produktseite Tour v3, mobil): Der Hinweis-Kasten liegt nicht mehr über dem Screenshot, sondern
 * im Raster darunter (Rand 12 px, Zeilenabstand 12 px). Das Medium übernimmt dafür den Rahmen des Fensters. Alle fünf
 * Kästen teilen sich eine Zelle, sichtbar ist nur der gewählte: die Höhe bleibt beim Wechsel gleich. Ohne Skript gilt
 * die Liste, dort entfallen die Kästen.
 */
@media (width < 768px) and (scripting: enabled) {
  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__medium {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--abstand-12);
    padding-block-end: var(--abstand-12);
    overflow: hidden;
    border: 1px solid var(--farbe-linie-karte);
    border-block-end: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--farbe-flaeche-band);
    box-shadow: var(--schatten-story-fenster);
  }

  .bx-stationen[data-bx-variante="faelle"] .bx-app-fenster {
    grid-area: 1 / 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .bx-stationen[data-bx-variante="faelle"] .bx-stationen__hinweis {
    position: static;
    grid-area: 2 / 1;
    align-self: start;
    max-inline-size: none;
    margin-inline: var(--abstand-12);
  }
}

/* Ph9 I1c: Ablauf (DV2 Z. 161–244); Standard-Regeln bleiben unverändert. */
.bx-stationen__kopftext-text {
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-text-sekundaer);
}

.bx-stationen[data-bx-variante="ablauf"] {
  padding: var(--abstand-80) var(--seitenrand) var(--abstand-sektion-gross);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__karte {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__kopftext {
  max-width: var(--breite-text-max);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__eyebrow {
  color: var(--farbe-orange-text);
  text-transform: uppercase;
}

/* Gruppenleiste und Tabliste bilden eine Fläche (Design: Labels in der Tabliste) */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppen {
  display: grid;
  column-gap: var(--abstand-6);
  padding: var(--abstand-6) var(--abstand-6) 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background-color: var(--farbe-flaeche-karte);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppe {
  display: flex;
  align-items: center;
  gap: var(--abstand-10);
  min-width: 0;
  padding: var(--abstand-8) var(--abstand-10) 0;
  color: var(--farbe-mikrotext);
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-gruppenlabel-gewicht);
  font-size: var(--schrift-gruppenlabel-groesse);
  line-height: var(--schrift-gruppenlabel-zeile);
  letter-spacing: var(--schrift-gruppenlabel-laufweite);
}

/* Linie hinter dem Label bis zum Ende der Gruppe */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppe::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--farbe-linie-eingabe);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tabs {
  grid-auto-flow: row;
  gap: var(--abstand-6);
  padding: var(--abstand-6);
  border: 0;
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

/* Tab: Nummer neben dem Titel */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-10);
  min-width: 0;
  overflow: hidden;
  padding: var(--abstand-14) var(--abstand-14) var(--abstand-17);
  border: 0;
  border-radius: var(--radius-promo);
  color: var(--farbe-navy);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab[aria-selected="true"] {
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-tab-aktiv);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tabnummer {
  flex: none;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-tab-nummer-gewicht);
  font-size: var(--schrift-tab-nummer-groesse);
  line-height: var(--schrift-tab-nummer-zeile);
  letter-spacing: var(--schrift-tab-nummer-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab[aria-selected="true"] .bx-stationen__tabnummer {
  color: var(--farbe-orange-text);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--schrift-tab-titel-gewicht);
  font-size: var(--schrift-tab-titel-groesse);
  line-height: var(--schrift-tab-titel-zeile);
  letter-spacing: var(--schrift-tab-titel-laufweite);
}

/* Fortschritt unten im Tab */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__fortschritt {
  inset-block: auto var(--abstand-6);
  inset-inline: var(--abstand-14);
  block-size: 3px; /* Fortschritt 3px hoch (DV2 Z. 174) */
  border-radius: var(--radius-strich);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__stapel {
  margin-block-start: var(--abstand-20);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__station {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "medium text";
  gap: var(--abstand-28) var(--abstand-44);
  align-items: center;
  padding: 0;
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__text {
  grid-area: text;
  min-width: 0;
  margin: 0;
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__text > p:last-child {
  margin: 0;
}

/* Schrittnummer: Mono versal in Grau (Design „SCHRITT 01 · EINMALIG“) */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__nummer {
  margin: 0 0 var(--abstand-12);
  color: var(--farbe-mikrotext);
  text-transform: uppercase;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-gruppenlabel-gewicht);
  font-size: var(--schrift-gruppenlabel-groesse);
  line-height: var(--schrift-gruppenlabel-zeile);
  letter-spacing: var(--schrift-gruppenlabel-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__titel {
  margin: 0 0 var(--abstand-10);
  font-weight: var(--schrift-h3-gross-gewicht);
  font-size: var(--schrift-h3-gross-groesse);
  line-height: var(--schrift-h3-gross-zeile);
  letter-spacing: var(--schrift-h3-gross-laufweite);
}

.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium {
  grid-area: medium;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1600 / 820;
  margin: 0;
  padding: 0;
  overflow: hidden;
  container-type: inline-size; /* cqw der Ablauf-Grafiken gilt für die Breite des Mediums (auch auf dem Grafik-Element selbst) */
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-karte-klein);
  background: var(--farbe-flaeche-karte);
  box-shadow: var(--schatten-medium);
}

/* Bildregel nur für Screenshots als direkte Kinder, nicht für Logos in den Grafiken */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium > picture,
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium > picture img,
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Das Ablauf-Medium und die Tabs haben keinen Ph6-Halo bzw. keine Ph6-Verbindungslinie. */
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__medium::before,
.bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab::before {
  content: none;
}

.bx-stationen[data-bx-variante="ablauf"] [data-bx-medium-spalte="nein"] .bx-stationen__station {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text";
}

/* Ph12: Textabläufe ohne Screenshot behalten die Zeilenlänge des Designs. */
.bx-stationen[data-bx-variante="ablauf"] [data-bx-medium-spalte="nein"] .bx-stationen__text {
  max-inline-size: 640px;
}

.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-spalten="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="1"] { grid-column-start: 1; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="1"] { grid-column-end: 2; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="2"] { grid-column-start: 2; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="2"] { grid-column-end: 3; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="3"] { grid-column-start: 3; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="3"] { grid-column-end: 4; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="4"] { grid-column-start: 4; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="4"] { grid-column-end: 5; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-von="5"] { grid-column-start: 5; }
.bx-stationen[data-bx-variante="ablauf"] [data-bx-gruppe-bis="5"] { grid-column-end: 6; }

@media (width < 1080px) {
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__station {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "medium";
  }
}

@media (width < 768px) {
  .bx-stationen[data-bx-variante="ablauf"] [data-bx-medium-spalte="nein"] .bx-stationen__text {
    max-inline-size: none;
  }

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

  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppe[data-bx-gruppe-von] {
    grid-column: 1 / -1;
  }

  /* Tab-Titel nur visuell aus: Clip-Muster von bx-unsichtbar, der zugängliche Name bleibt „0n {kurz}“ (A-104) */
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tab-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px; /* Design */
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (scripting: none) {
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__gruppen,
  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__tabs {
    display: none;
  }

  .bx-stationen[data-bx-variante="ablauf"] .bx-stationen__station {
    grid-area: auto;
    margin-block-end: var(--abstand-40);
    visibility: visible;
    opacity: 1;
  }
}

/* Phase 11 (Vertrag Ph11 §3.4) */
/*
 * == Ph11 V-9: Variante `termine` (Ä11-21, A-25, N11-11; Design `Loesung Abrechnung v3` „Vertragsjahr“ Z. 364–651) ==
 * Termin-Knöpfe in der Tab-Leiste der Ph6-Karte (Punkt, Linie, Fortschritt bleiben die Ph6-Regeln), darunter je Termin
 * Kicker, H3, Text und die App-Karte zweispaltig, unter 1080px gestapelt. Der Laufstatus erscheint erst in der
 * Tab-Form (stationen.js) und zeigt je `data-bx-durchlauf` einen der zwei Texte. Ohne JavaScript stehen alle Termine
 * als Liste mit Datum und Name. Ohne `data-bx-variante="termine"` greift keine dieser Regeln.
 */
.bx-stationen__termine-hinweis {
  max-inline-size: 780px;
  margin: calc(-1 * var(--abstand-16)) 0 var(--abstand-28);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-trust-titel-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
}

.bx-stationen__termin-datum {
  display: block;
  margin-block-end: var(--abstand-5);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-meta-mono-gewicht);
  font-size: var(--schrift-meta-mono-groesse);
  line-height: var(--schrift-meta-mono-zeile);
  letter-spacing: var(--schrift-meta-mono-laufweite);
}

.bx-stationen__termin-name {
  display: block;
  font-weight: var(--schrift-textlink-gewicht);
}

.bx-stationen__termine-inhalt {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-36) var(--abstand-40) var(--abstand-34);
}

/* BW-76: Mint-Glow oben rechts (Design: right -160, top -180, 560 × 460) */
.bx-stationen__termine-inhalt::before {
  content: '';
  position: absolute;
  inset-block-start: -180px; /* Design */
  inset-inline-end: -160px; /* Design */
  inline-size: 560px;
  block-size: 460px;
  background: radial-gradient(closest-side, var(--farbe-mint-glow-zart), transparent);
  pointer-events: none;
}

.bx-stationen__termine-inhalt > * {
  position: relative;
}

.bx-stationen__termin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--abstand-32) var(--abstand-48);
  align-items: center;
}

.bx-stationen__termin-marke {
  display: none;
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-mikrotext);
}

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

.bx-stationen__termin .bx-stationen__text {
  margin: 0;
}

/* App-Karte (Roboto-Nachbau, Demo-Werte; Text lesbar, Kontrast vor Designfarbe) */
.bx-stationen__app {
  min-inline-size: 0;
}

.bx-stationen__app-kopf {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-chip-mono-laufweite);
}

.bx-stationen__app-fenster {
  overflow: hidden;
  border: 1px solid var(--farbe-app-linie);
  border-radius: var(--radius-chip);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-tab-station);
  color: var(--farbe-app-text);
  font-family: var(--schrift-familie-app);
}

.bx-stationen__app-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  margin: 0;
  padding: var(--abstand-15) var(--abstand-18);
  border-block-end: 1px solid var(--farbe-app-linie);
  font-weight: var(--schrift-widget-titel-gewicht);
  font-size: var(--schrift-widget-titel-groesse);
  line-height: var(--schrift-widget-titel-zeile);
}

.bx-stationen__app-chip {
  flex: none;
  padding: var(--abstand-4) var(--abstand-10);
  border-radius: var(--radius-app);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  font-size: var(--schrift-pille-gross-groesse);
}

.bx-stationen__app-zeilen {
  margin: 0;
}

.bx-stationen__app-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-16);
  padding: var(--abstand-13) var(--abstand-18);
  border-block-end: 1px solid var(--farbe-linie-karte);
  font-size: var(--schrift-textlink-groesse);
}

.bx-stationen__app-zeile dt {
  font-weight: var(--schrift-textlink-gewicht);
  white-space: nowrap;
}

.bx-stationen__app-zeile dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--abstand-4) var(--abstand-8);
  margin: 0;
  text-align: end;
}

.bx-stationen__app-alt {
  color: var(--farbe-mikrotext);
}

.bx-stationen__app-zeile--betrag {
  padding-block: var(--abstand-15);
  border-block-end: 0;
  background-color: var(--farbe-flaeche-karte);
}

.bx-stationen__app-betrag {
  color: var(--farbe-gruen);
  font-weight: var(--schrift-rechner-wert-gewicht);
  font-size: var(--schrift-rechner-wert-groesse);
  white-space: nowrap;
}

/* Laufstatus: erst in der Tab-Form, Text je Durchlauf-Zustand (A-25) */
.bx-stationen__termine-status {
  display: none;
  align-items: center;
  gap: var(--abstand-10);
  margin: var(--abstand-26) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-meta-mono-gewicht);
  font-size: var(--schrift-meta-mono-groesse);
  line-height: var(--schrift-meta-mono-zeile);
  letter-spacing: var(--schrift-meta-mono-laufweite);
}

[data-bx-stationen-zustand="tabs"] .bx-stationen__termine-status {
  display: flex;
}

.bx-stationen__termine-punkt {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-mint-akzent);
}

[data-bx-durchlauf="aus"] [data-bx-termine-status="laeuft"],
[data-bx-durchlauf="laeuft"] [data-bx-termine-status="angehalten"],
[data-bx-durchlauf="pausiert"] [data-bx-termine-status="angehalten"] {
  display: none;
}

.bx-stationen__termine-fussnote {
  max-inline-size: 900px;
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

@media (width < 1080px) {
  .bx-stationen__termin {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-20);
  }

  .bx-stationen__termine-inhalt {
    padding: var(--abstand-36) var(--abstand-20);
  }
}

/* Ohne JavaScript: Datum und Name stehen im Panel (die Tabs entfallen, Ph6-Regel oben) */
@media (scripting: none) {
  .bx-stationen--termine .bx-stationen__termin-marke {
    display: block;
  }
}

/* Abgleich 27.10.: zwischen Mobil- und Engstufe stehen Nummer und Titel im Tab untereinander, der Titel bricht um
   statt mit Auslassungspunkten zu enden (nur Seiten mit tab_umbruch, Design „Integration d.velop“ tabEng) */
@media (width >= 768px) and (width < 1024px) {
  .bx-stationen[data-bx-variante="ablauf"][data-bx-tab-umbruch="ja"] .bx-stationen__tab {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-5);
    padding: var(--abstand-12) var(--abstand-10) var(--abstand-17);
  }

  .bx-stationen[data-bx-variante="ablauf"][data-bx-tab-umbruch="ja"] .bx-stationen__tab-text {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
  }
}

/*
 * Tabs (Teilplan B4 E4, E5): Zustandswirkung. Außerhalb eines Höhenstapels (data-bx-hoehe-zustand) wird ein inaktives
 * Panel ausgeblendet; im Stapel bleibt es in der Rasterzelle und ist nur unsichtbar (hoehe.css). Ohne JavaScript
 * bleibt es dabei: sichtbar ist das erste Panel, die übrigen stehen im HTML.
 */
[data-bx-tabs-panel][aria-hidden="true"]:not([data-bx-hoehe-zustand]) {
  display: none;
}

/*
 * Höhenausgleich (Teilplan B4 E4, DS AK7): alle Zustände eines Moduls liegen in derselben Rasterzelle, der
 * längste trägt die Höhe, der Wechsel ändert sie nicht. Inaktive Zustände tragen aria-hidden und inert und sind
 * nur unsichtbar (nie display: none: das nähme sie aus dem Raster).
 */
[data-bx-modul~="hoehe"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

[data-bx-hoehe-zustand] {
  grid-area: 1 / 1;
  min-inline-size: 0;
}

[data-bx-hoehe-zustand][aria-hidden="true"] {
  visibility: hidden;
}

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

/* Ph9 I1c: Grafik skaliert mit der Breite ihres Mediums. */
.bx-stationen-grafik {
  --bx-cq: 1cqw;
  --bx-radius-kachel: calc(1.5 * var(--bx-cq));
  container-type: inline-size;
  width: 100%;
  height: 100%;
  background: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
}

.bx-stationen-grafik--zapier-1 {
  display: grid;
  grid-template-columns: auto calc(35 * var(--bx-cq)) auto; /* Wert laut Design Zapier o1: auto 35cqw auto; die cqw-Maße gelten über den Container des Mediums (stationen.css) */
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  row-gap: calc(1.625 * var(--bx-cq));
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-tab-titel-gewicht);
  font-size: calc(1.75 * var(--bx-cq));
  line-height: 1.2; /* Grafiktext 700 1.75cqw/1.2 (ZP Z. 192, Teilplan §7) */
}

.bx-stationen-grafik__kachel {
  display: grid;
  place-items: center;
  width: calc(12.5 * var(--bx-cq));
  height: calc(12.5 * var(--bx-cq));
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--bx-radius-kachel);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-grafik-kachel);
}

.bx-stationen-grafik__kachel img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

/* inneres Feld der Logo-Kachel (Design Zapier o1: 9,375 cqw, Radius 1,625 cqw) */
.bx-stationen-grafik__kachel-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(9.375 * var(--bx-cq));
  height: calc(9.375 * var(--bx-cq));
  border-radius: var(--bx-r-1-625);
  background-color: var(--farbe-flaeche-kachel);
}

.bx-stationen-grafik__verbinder {
  display: grid;
  text-align: center;
}

/*
 * Block „Ph9 I2c“: Grafiken zapier-2, zapier-3, n8n-2 bis n8n-5. Maße in Containerbreiten (cqw über --bx-cq),
 * Werte aus den Grafiken der Design-Dateien „Integration Zapier“ und „Integration n8n“ (Abschnitt 04, Medium des Schritts).
 * Design: Schrift-, Abstands- und Flächenmaße stehen als cqw-Werte am Ort; nur die Radien bleiben Eigenschaften
 * `--bx-r-<Wert in cqw>`, weil die Radius-Regel (TokensTest) einen var()-Verweis verlangt.
 */
.bx-stationen-grafik {
  --bx-r-0-0-875-0-875-0: 0 calc(0.875 * var(--bx-cq)) calc(0.875 * var(--bx-cq)) 0;
  --bx-r-0-125: calc(0.125 * var(--bx-cq));
  --bx-r-0-1563: calc(0.1563 * var(--bx-cq));
  --bx-r-0-3125: calc(0.3125 * var(--bx-cq));
  --bx-r-0-375: calc(0.375 * var(--bx-cq));
  --bx-r-0-4375: calc(0.4375 * var(--bx-cq));
  --bx-r-0-5: calc(0.5 * var(--bx-cq));
  --bx-r-0-5625: calc(0.5625 * var(--bx-cq));
  --bx-r-0-6587-0-6587-0-0: calc(0.6587 * var(--bx-cq)) calc(0.6587 * var(--bx-cq)) 0 0;
  --bx-r-0-75: calc(0.75 * var(--bx-cq));
  --bx-r-0-875: calc(0.875 * var(--bx-cq));
  --bx-r-0-875-0-0-0-875: calc(0.875 * var(--bx-cq)) 0 0 calc(0.875 * var(--bx-cq));
  --bx-r-1: calc(1 * var(--bx-cq));
  --bx-r-1-125: calc(1.125 * var(--bx-cq));
  --bx-r-1-5: calc(1.5 * var(--bx-cq));
  --bx-r-1-625: calc(1.625 * var(--bx-cq));
}

.bx-stationen-grafik--zapier-2,
.bx-stationen-grafik--zapier-3,
.bx-stationen-grafik--n8n-2,
.bx-stationen-grafik--n8n-3,
.bx-stationen-grafik--n8n-4,
.bx-stationen-grafik--n8n-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schrift-familie-text);
}

.bx-stationen-grafik--zapier-2 { gap: calc(2.75 * var(--bx-cq)); }
.bx-stationen-grafik--zapier-3 { flex-direction: column; gap: calc(2.5 * var(--bx-cq)); }
.bx-stationen-grafik--n8n-4 { gap: calc(2.5 * var(--bx-cq)); }

.bx-stationen-grafik__karte {
  box-sizing: border-box;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bx-r-1-5);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-grafik-kachel);
}

.bx-stationen-grafik__karte--ausloeser,
.bx-stationen-grafik__karte--leer,
.bx-stationen-grafik__karte--test,
.bx-stationen-grafik__karte--webhook {
  display: flex;
  flex-direction: column;
}

.bx-stationen-grafik__karte--ausloeser { width: calc(35 * var(--bx-cq)); padding: calc(2.125 * var(--bx-cq)); gap: calc(1.125 * var(--bx-cq)); }
.bx-stationen-grafik__karte--leer {
  align-self: stretch;
  width: calc(28.75 * var(--bx-cq));
  padding: calc(2.125 * var(--bx-cq));
  gap: calc(1.375 * var(--bx-cq));
  border: calc(0.1875 * var(--bx-cq)) dashed var(--farbe-linie-grafik);
  background-color: transparent;
  box-shadow: none;
}
.bx-stationen-grafik__karte--zugang { display: flex; flex-direction: column; width: calc(48.75 * var(--bx-cq)); padding: calc(2.5 * var(--bx-cq)) calc(2.75 * var(--bx-cq)); gap: calc(1.5 * var(--bx-cq)); }
.bx-stationen-grafik__karte--test { width: calc(29.375 * var(--bx-cq)); padding: calc(2 * var(--bx-cq)) calc(2.25 * var(--bx-cq)) calc(1.125 * var(--bx-cq)); }
.bx-stationen-grafik__karte--webhook { width: calc(29.375 * var(--bx-cq)); padding: calc(2.25 * var(--bx-cq)); gap: calc(1.375 * var(--bx-cq)); }
.bx-stationen-grafik__karte--produktion { width: calc(38.75 * var(--bx-cq)); padding: calc(2.375 * var(--bx-cq)) calc(2.625 * var(--bx-cq)) calc(1.25 * var(--bx-cq)); }

.bx-stationen-grafik__etikett {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: calc(1.3125 * var(--bx-cq));
  line-height: 1.2;
  letter-spacing: .08em;
}

.bx-stationen-grafik__karte--test > .bx-stationen-grafik__etikett { margin-block-end: calc(1 * var(--bx-cq)); }

.bx-stationen-grafik__zeile {
  display: flex;
  align-items: center;
  gap: calc(1.25 * var(--bx-cq));
  padding: calc(1.125 * var(--bx-cq)) calc(1.375 * var(--bx-cq));
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bx-r-1);
}

.bx-stationen-grafik__zeilentext {
  font-weight: var(--schrift-tab-titel-gewicht);
  font-size: calc(1.6875 * var(--bx-cq));
  line-height: 1.25;
}

.bx-stationen-grafik__symbol {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(4 * var(--bx-cq));
  height: calc(4 * var(--bx-cq));
  border-radius: var(--bx-r-0-875);
  background-color: var(--farbe-flaeche-kachel);
}

.bx-stationen-grafik__symbol--gross { width: calc(5.25 * var(--bx-cq)); height: calc(5.25 * var(--bx-cq)); border-radius: var(--bx-r-1-125); }

.bx-stationen-grafik__symbol img { display: block; width: 72%; height: 72%; object-fit: contain; }

.bx-stationen-grafik__symbol-zeilen { display: flex; flex-direction: column; gap: calc(0.375 * var(--bx-cq)); width: calc(1.875 * var(--bx-cq)); }

.bx-stationen-grafik__symbol-zeilen > span {
  display: block;
  width: 100%;
  height: calc(0.3125 * var(--bx-cq));
  border-radius: var(--bx-r-0-1563);
  background-color: var(--farbe-navy);
}

.bx-stationen-grafik__symbol-zeilen > span:last-child { width: 60%; }

.bx-stationen-grafik__symbol-film {
  position: relative;
  box-sizing: border-box;
  width: calc(2.125 * var(--bx-cq));
  height: calc(1.625 * var(--bx-cq));
  border: calc(0.2188 * var(--bx-cq)) solid var(--farbe-navy);
  border-radius: var(--bx-r-0-3125);
}

.bx-stationen-grafik__symbol-film::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: calc(-0.375 * var(--bx-cq)) 0 0 calc(-0.1875 * var(--bx-cq));
  border-block: calc(0.375 * var(--bx-cq)) solid transparent;
  border-inline-start: calc(0.5625 * var(--bx-cq)) solid var(--farbe-navy);
}

.bx-stationen-grafik__pfeil {
  position: relative;
  flex: none;
  width: calc(8.125 * var(--bx-cq));
  height: calc(0.25 * var(--bx-cq));
  border-radius: var(--bx-r-0-125);
  background-color: var(--farbe-navy);
}

.bx-stationen-grafik__pfeil::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-0.125 * var(--bx-cq));
  width: 0;
  height: 0;
  margin-top: calc(-0.6875 * var(--bx-cq));
  border-block: calc(0.6875 * var(--bx-cq)) solid transparent;
  border-inline-start: calc(1.125 * var(--bx-cq)) solid var(--farbe-navy);
}

.bx-stationen-grafik__pfeil--kurz { width: calc(3.25 * var(--bx-cq)); }
.bx-stationen-grafik__pfeil--lang { width: calc(9.375 * var(--bx-cq)); }

.bx-stationen-grafik__balken {
  display: block;
  width: 70%;
  height: calc(1.125 * var(--bx-cq));
  border-radius: var(--bx-r-0-5625);
  background-color: var(--farbe-linie);
}

.bx-stationen-grafik__balken--kurz { width: 46%; }
.bx-stationen-grafik__balken--url { width: 100%; height: calc(0.875 * var(--bx-cq)); border-radius: var(--bx-r-0-4375); background-color: var(--farbe-linie-eingabe); }

/* zapier-3 */
.bx-stationen-grafik__module { display: flex; align-items: center; gap: calc(0.875 * var(--bx-cq)); }
.bx-stationen-grafik__module > .bx-stationen-grafik__etikett { margin-inline-end: calc(0.5 * var(--bx-cq)); }

.bx-stationen-grafik__pille {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--farbe-linie-eingabe);
  box-sizing: border-box;
  height: calc(3.625 * var(--bx-cq));
  padding: 0 calc(1.75 * var(--bx-cq));
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
  font-weight: var(--schrift-tab-titel-gewicht);
  font-size: calc(1.5 * var(--bx-cq));
  line-height: 1;
  white-space: nowrap;
}

.bx-stationen-grafik__pille--aktiv { border-color: var(--farbe-navy); background-color: var(--farbe-navy); color: var(--farbe-weiss); }

.bx-stationen-grafik__zuordnung {
  display: grid;
  grid-template-columns: calc(25 * var(--bx-cq)) calc(11.875 * var(--bx-cq)) calc(25 * var(--bx-cq));
  grid-template-rows: calc(5.375 * var(--bx-cq)) repeat(4, calc(4.875 * var(--bx-cq))) calc(1.625 * var(--bx-cq));
}

.bx-stationen-grafik__flaeche {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bx-r-1-5);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-grafik-kachel);
}

.bx-stationen-grafik__flaeche--links { grid-area: 1 / 1 / 7 / 2; }
.bx-stationen-grafik__flaeche--rechts { grid-area: 1 / 3 / 7 / 4; }
.bx-stationen-grafik__etikett--links { grid-area: 1 / 1; align-self: center; padding: 0 calc(1.875 * var(--bx-cq)); }

.bx-stationen-grafik__titel--rechts {
  grid-area: 1 / 3;
  align-self: center;
  padding: 0 calc(1.875 * var(--bx-cq));
  font-weight: var(--schrift-h3-gewicht);
  font-size: calc(1.6875 * var(--bx-cq));
  line-height: 1;
}

.bx-stationen-grafik__feld {
  position: relative;
  z-index: 1;
  align-self: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: calc(3.625 * var(--bx-cq));
  margin-inline: calc(1.625 * var(--bx-cq));
  padding: 0 calc(1.375 * var(--bx-cq));
  border-radius: var(--bx-r-0-75);
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-flaeche-karte);
  font-weight: 600;
  font-size: calc(1.5625 * var(--bx-cq));
  line-height: 1;
}

.bx-stationen-grafik__feld--links { grid-column: 1; }
.bx-stationen-grafik__feld--rechts { grid-column: 3; }
.bx-stationen-grafik__feld--zeile-1, .bx-stationen-grafik__verbinder--zeile-1 { grid-row: 2; }
.bx-stationen-grafik__feld--zeile-2, .bx-stationen-grafik__verbinder--zeile-2 { grid-row: 3; }
.bx-stationen-grafik__feld--zeile-3, .bx-stationen-grafik__verbinder--zeile-3 { grid-row: 4; }
.bx-stationen-grafik__feld--zeile-4, .bx-stationen-grafik__verbinder--zeile-4 { grid-row: 5; }

.bx-stationen-grafik__verbinder {
  position: relative;
  grid-column: 2;
  align-self: center;
  height: calc(0.25 * var(--bx-cq));
  margin-inline: calc(-1.625 * var(--bx-cq));
  background-color: var(--farbe-navy);
}

.bx-stationen-grafik__verbinder::before,
.bx-stationen-grafik__verbinder::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(1 * var(--bx-cq));
  height: calc(1 * var(--bx-cq));
  margin-top: calc(-0.5 * var(--bx-cq));
  border-radius: var(--radius-rund);
  background-color: var(--farbe-navy);
}

.bx-stationen-grafik__verbinder::before { left: calc(-0.25 * var(--bx-cq)); }
.bx-stationen-grafik__verbinder::after { right: calc(-0.25 * var(--bx-cq)); }

/* zapier-1: Produkthinweis unter der Linie (Design 500 1.4375cqw/1.3, #5A6478) */
.bx-stationen-grafik--zapier-1 > span {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: calc(1.4375 * var(--bx-cq));
  line-height: 1.3;
}

/* zapier-1: Linie mit Punkten außen und Pille in der Mitte (Design Zapier o1, Verbinder), nach dem Block der Zuordnung */
.bx-stationen-grafik--zapier-1 .bx-stationen-grafik__verbinder {
  display: block;
  width: 100%;
  margin-inline: 0;
}

.bx-stationen-grafik--zapier-1 .bx-stationen-grafik__verbinder::before { left: calc(-0.5 * var(--bx-cq)); }
.bx-stationen-grafik--zapier-1 .bx-stationen-grafik__verbinder::after { right: calc(-0.5 * var(--bx-cq)); }

.bx-stationen-grafik--zapier-1 .bx-stationen-grafik__verbinder > span {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: calc(1 * var(--bx-cq)) calc(2 * var(--bx-cq));
  border-radius: var(--radius-pille);
  background-color: var(--farbe-navy);
  color: var(--farbe-weiss);
  font-weight: var(--schrift-tab-titel-gewicht);
  font-size: calc(1.625 * var(--bx-cq));
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* n8n-2 */
.bx-stationen-grafik__kopf { display: flex; align-items: center; gap: calc(1.375 * var(--bx-cq)); }

.bx-stationen-grafik__titel {
  font-weight: var(--schrift-h3-gewicht);
  font-size: calc(2.125 * var(--bx-cq));
  line-height: 1.15;
  letter-spacing: -.02em;
}

.bx-stationen-grafik__eingabe { display: flex; flex-direction: column; gap: calc(0.625 * var(--bx-cq)); }

.bx-stationen-grafik__eingabe-label {
  color: var(--farbe-mikrotext);
  font-weight: 600;
  font-size: calc(1.375 * var(--bx-cq));
  line-height: 1.2;
}

.bx-stationen-grafik__eingabe-feld {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: calc(4 * var(--bx-cq));
  padding: 0 calc(1.375 * var(--bx-cq));
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bx-r-0-75);
  background-color: var(--farbe-flaeche-hell);
}

.bx-stationen-grafik__platzhalter {
  display: block;
  height: calc(1 * var(--bx-cq));
  border-radius: var(--bx-r-0-5);
  background-color: var(--farbe-linie-eingabe);
}

.bx-stationen-grafik__platzhalter--breit { width: 58%; }
.bx-stationen-grafik__platzhalter--mittel { width: 34%; }

.bx-stationen-grafik__punkte {
  color: var(--farbe-navy);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: calc(1.875 * var(--bx-cq));
  line-height: 1;
  letter-spacing: .18em;
}

.bx-stationen-grafik__pruefung {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--bx-cq));
  padding: calc(1.125 * var(--bx-cq)) calc(1.375 * var(--bx-cq));
  border-radius: var(--bx-r-0-875);
  background-color: var(--farbe-gruen-flaeche);
}

.bx-stationen-grafik__haken {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(2.5 * var(--bx-cq));
  height: calc(2.5 * var(--bx-cq));
  border-radius: var(--radius-rund);
  background-color: var(--farbe-gruen);
  color: var(--farbe-weiss);
}

.bx-stationen-grafik__haken-svg { display: block; width: 62%; height: 62%; }

.bx-stationen-grafik__pruefung-text {
  color: var(--farbe-gruen-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: calc(1.625 * var(--bx-cq));
  line-height: 1;
}

/* n8n-3 */
.bx-stationen-grafik__workflow { display: flex; align-items: center; }

.bx-stationen-grafik__knoten {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(0.5 * var(--bx-cq));
  box-sizing: border-box;
  height: calc(7 * var(--bx-cq));
  padding: 0 calc(1.5 * var(--bx-cq));
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bx-r-1-5);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-grafik-kachel);
}

.bx-stationen-grafik__knoten--webhook { width: calc(12.25 * var(--bx-cq)); }
.bx-stationen-grafik__knoten--search { width: calc(14.5 * var(--bx-cq)); }
.bx-stationen-grafik__knoten--if { width: calc(8.25 * var(--bx-cq)); }
.bx-stationen-grafik__knoten--zweig { width: calc(14.75 * var(--bx-cq)); }
.bx-stationen-grafik__knoten--relations { width: calc(18.75 * var(--bx-cq)); }

.bx-stationen-grafik__knoten-titel {
  font-weight: var(--schrift-textlink-gewicht);
  font-size: calc(1.5625 * var(--bx-cq));
  line-height: 1.15;
  white-space: nowrap;
}

.bx-stationen-grafik__knoten-unter {
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: calc(1.125 * var(--bx-cq));
  line-height: 1.2;
  letter-spacing: .08em;
}

.bx-stationen-grafik__strich {
  flex: none;
  width: calc(1.875 * var(--bx-cq));
  height: calc(0.25 * var(--bx-cq));
  border-radius: var(--bx-r-0-125);
  background-color: var(--farbe-navy);
}

.bx-stationen-grafik__klammer {
  flex: none;
  box-sizing: border-box;
  width: calc(2.75 * var(--bx-cq));
  height: calc(12 * var(--bx-cq));
  border: calc(0.25 * var(--bx-cq)) solid var(--farbe-navy);
}

.bx-stationen-grafik__klammer--links { border-inline-end: 0; border-radius: var(--bx-r-0-875-0-0-0-875); }
.bx-stationen-grafik__klammer--rechts { border-inline-start: 0; border-radius: var(--bx-r-0-0-875-0-875-0); }

.bx-stationen-grafik__zweige { display: flex; flex-direction: column; gap: calc(4.75 * var(--bx-cq)); }

/* n8n-4 */
.bx-stationen-grafik__datenzeile {
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--bx-cq));
  padding: calc(1 * var(--bx-cq)) 0;
  border-block-start: 1px solid var(--farbe-linie);
}

.bx-stationen-grafik__datenzeile-label {
  color: var(--farbe-mikrotext);
  font-weight: 600;
  font-size: calc(1.3125 * var(--bx-cq));
  line-height: 1.2;
}

.bx-stationen-grafik__datenzeile-wert { font-weight: var(--schrift-textlink-gewicht); font-size: calc(1.625 * var(--bx-cq)); line-height: 1.2; }

.bx-stationen-grafik__karte--webhook > .bx-stationen-grafik__titel { font-size: calc(2 * var(--bx-cq)); line-height: 1; }

.bx-stationen-grafik__url {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--bx-cq));
  padding: calc(1.125 * var(--bx-cq)) calc(1.25 * var(--bx-cq));
  border-radius: var(--bx-r-0-875);
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-flaeche-karte);
}

.bx-stationen-grafik__url-text { font-weight: var(--schrift-textlink-gewicht); font-size: calc(1.5625 * var(--bx-cq)); line-height: 1; }
.bx-stationen-grafik__url-platzhalter { width: 42%; margin-inline-start: auto; }

.bx-stationen-grafik__uhr {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: calc(2.5 * var(--bx-cq));
  height: calc(2.5 * var(--bx-cq));
  border: calc(0.2188 * var(--bx-cq)) solid var(--farbe-navy);
  border-radius: var(--radius-rund);
}

.bx-stationen-grafik__uhr-zeiger { position: absolute; border-radius: var(--bx-r-0-125); background-color: var(--farbe-navy); }
.bx-stationen-grafik__uhr-zeiger--hoch { left: 50%; bottom: 50%; width: calc(0.2188 * var(--bx-cq)); height: calc(0.75 * var(--bx-cq)); margin-left: calc(-0.1094 * var(--bx-cq)); }
.bx-stationen-grafik__uhr-zeiger--quer { left: 50%; top: 50%; width: calc(0.6 * var(--bx-cq)); height: calc(0.2188 * var(--bx-cq)); margin-top: calc(-0.1094 * var(--bx-cq)); }

/* n8n-5 */
.bx-stationen-grafik__titel--klein { margin-block-end: calc(1.5 * var(--bx-cq)); font-size: calc(2.125 * var(--bx-cq)); line-height: 1; }

.bx-stationen-grafik__eintrag {
  display: flex;
  align-items: center;
  gap: calc(1.125 * var(--bx-cq));
  padding: calc(1.25 * var(--bx-cq)) 0;
  border-block-start: 1px solid var(--farbe-linie);
}

.bx-stationen-grafik__eintrag-symbol {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(2.5 * var(--bx-cq));
}

.bx-stationen-grafik__eintrag-symbol--schloss { flex-direction: column; }

.bx-stationen-grafik__eintrag-text { font-weight: var(--schrift-textlink-gewicht); font-size: calc(1.625 * var(--bx-cq)); line-height: 1.2; }
.bx-stationen-grafik__eintrag-text--gruen { color: var(--farbe-gruen-text); }

.bx-stationen-grafik__url-rahmen {
  display: block;
  box-sizing: border-box;
  width: calc(2 * var(--bx-cq));
  height: calc(1.375 * var(--bx-cq));
  border: calc(0.2188 * var(--bx-cq)) solid var(--farbe-navy);
  border-radius: var(--bx-r-0-375);
}

.bx-stationen-grafik__status-punkt {
  display: block;
  width: calc(1.25 * var(--bx-cq));
  height: calc(1.25 * var(--bx-cq));
  border-radius: var(--radius-rund);
  background-color: var(--farbe-gruen);
  outline: calc(0.4375 * var(--bx-cq)) solid var(--farbe-gruen-flaeche);
}

.bx-stationen-grafik__schloss-buegel {
  box-sizing: border-box;
  width: calc(1.3175 * var(--bx-cq));
  height: calc(1.0625 * var(--bx-cq));
  border: calc(0.25 * var(--bx-cq)) solid var(--farbe-navy);
  border-block-end: 0;
  border-radius: var(--bx-r-0-6587-0-6587-0-0);
}

.bx-stationen-grafik__schloss-koerper {
  width: calc(2.125 * var(--bx-cq));
  height: calc(1.5725 * var(--bx-cq));
  border-radius: var(--bx-r-0-375);
  background-color: var(--farbe-navy);
}

/*
 * Block „Ph9 I3a docuseal-4“: Grafik 4 aus „Integration DocuSeal“ (Z. 193), Maße in cqw über --bx-cq.
 * Design: Dokumentkarte 26.875 x 37.5, Browser-Symbol 15.625 x 10.625, Schriftgrößen 1.1875 bis 2.125 cqw.
 */
.bx-stationen-grafik--docuseal-4 {
  --bx-r-1-25: calc(1.25 * var(--bx-cq));

  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4.75 * var(--bx-cq));
  font-family: var(--schrift-familie-text);
}

.bx-stationen-grafik__dokument {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: none;
  gap: calc(1 * var(--bx-cq));
  width: calc(26.875 * var(--bx-cq));
  height: calc(37.5 * var(--bx-cq));
  padding: calc(2.75 * var(--bx-cq)) calc(2.625 * var(--bx-cq));
  border: 1px solid var(--farbe-linie);
  border-radius: var(--bx-r-0-875);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-grafik-kachel);
  color: var(--farbe-navy);
}

.bx-stationen-grafik__etikett--ab {
  font-size: calc(1.1875 * var(--bx-cq));
}

.bx-stationen-grafik__etikett--klein {
  font-size: calc(1.125 * var(--bx-cq));
}

.bx-stationen-grafik__dokument-titel {
  margin-block-end: calc(0.875 * var(--bx-cq));
  font-weight: var(--schrift-h3-gewicht);
  font-size: calc(1.875 * var(--bx-cq));
  line-height: 1.15;
}

.bx-stationen-grafik__textzeile {
  display: block;
  width: 100%;
  height: calc(0.75 * var(--bx-cq));
  border-radius: var(--bx-r-0-375);
  background-color: var(--farbe-linie-eingabe);
}

.bx-stationen-grafik__textzeile--92 { width: 92%; }
.bx-stationen-grafik__textzeile--96 { width: 96%; }
.bx-stationen-grafik__textzeile--64 { width: 64%; }

.bx-stationen-grafik__abstand { flex: 1; }

.bx-stationen-grafik__unterschrift {
  display: block;
  width: calc(15.625 * var(--bx-cq));
  height: auto;
}

.bx-stationen-grafik__unterschrift-linie {
  display: block;
  height: calc(0.1875 * var(--bx-cq));
  margin-block-start: calc(-0.625 * var(--bx-cq));
  background-color: var(--farbe-navy);
}

.bx-stationen-grafik__browser-spalte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1.625 * var(--bx-cq));
}

.bx-stationen-grafik__browser {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: calc(15.625 * var(--bx-cq));
  height: calc(10.625 * var(--bx-cq));
  border: calc(0.25 * var(--bx-cq)) solid var(--farbe-navy);
  border-radius: var(--bx-r-1-125);
  background-color: var(--farbe-weiss);
}

.bx-stationen-grafik__browser-leiste {
  display: flex;
  align-items: center;
  height: calc(2.625 * var(--bx-cq));
  padding: 0 calc(1 * var(--bx-cq));
  border-block-end: calc(0.25 * var(--bx-cq)) solid var(--farbe-navy);
}

.bx-stationen-grafik__platzhalter--browser { width: 62%; height: calc(0.75 * var(--bx-cq)); border-radius: var(--bx-r-0-375); }

.bx-stationen-grafik__browser-inhalt { display: flex; flex: 1; align-items: center; justify-content: center; }

.bx-stationen-grafik__haken--gross { width: calc(3.125 * var(--bx-cq)); height: calc(3.125 * var(--bx-cq)); }

.bx-stationen-grafik__hinweis {
  font-weight: var(--schrift-h3-gewicht);
  font-size: calc(2.125 * var(--bx-cq));
  line-height: 1.15;
}

.bx-stationen-grafik__logozeile { display: flex; align-items: center; gap: calc(1 * var(--bx-cq)); }

.bx-stationen-grafik__symbol--logo {
  width: calc(6 * var(--bx-cq));
  height: calc(6 * var(--bx-cq));
  border-radius: var(--bx-r-1-25);
}

.bx-stationen-grafik__logoname {
  font-weight: var(--schrift-textlink-gewicht);
  font-size: calc(1.6875 * var(--bx-cq));
  line-height: 1;
}

/*
 * Baustein „modulkette“ (Vertrag Ph8 §3.4.5, Teilplan H0b E10, §8.5): `einordnung` (Design APP Cashflow Forecast A v5
 * „Verbindung“: Kopf links, senkrechte Kette rechts, Karte „SIE SIND HIER“ Navy) und `paketkette` (Block unten).
 */
.bx-modulkette {
  padding: var(--abstand-56) var(--seitenrand);
  border-block-end: 1px solid var(--farbe-linie-sektion);
  font-family: var(--schrift-familie-text);
}

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

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

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

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

/* Ph12 Design-Abgleich (V-B-app-33, CF Z. 543/741): Kopf zu Karten wie 1 : 1,6 */
.bx-modulkette__einordnung--breit {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.bx-modulkette__karten {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--abstand-36);
  list-style: none;
}

.bx-modulkette__karten::before {
  content: '';
  position: absolute;
  inset-block: var(--abstand-28);
  inset-inline-start: var(--abstand-9);
  inline-size: 2px;
  background: linear-gradient(var(--farbe-linie-grafik), var(--farbe-linie-grafik) 60%, var(--farbe-navy));
}

.bx-modulkette__station {
  position: relative;
}

.bx-modulkette__station + .bx-modulkette__station {
  margin-block-start: var(--abstand-12);
}

.bx-modulkette__station::before {
  content: '';
  position: absolute;
  inset-block-start: var(--abstand-24);
  inset-inline-start: -33px; /* Design */
  inline-size: 12px;
  block-size: 12px;
  box-sizing: border-box;
  border: 2px solid var(--farbe-linie-grafik);
  border-radius: var(--radius-rund);
  background-color: var(--farbe-weiss);
}

.bx-modulkette__station[data-bx-rolle="hier"]::before {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
  box-shadow: var(--schatten-ring-hell);
}

.bx-modulkette__karte {
  display: block;
  padding: var(--abstand-18) var(--abstand-22);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
  text-decoration: none;
  transition: border-color var(--bewegung-dauer-kurz);
}

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

.bx-modulkette__station[data-bx-rolle="hier"] .bx-modulkette__karte {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
}

.bx-modulkette__karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-18);
}

.bx-modulkette__karte-titel {
  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-modulkette__rolle {
  flex: none;
  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-modulkette__karte-text {
  display: block;
  margin-block-start: var(--abstand-5);
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-kennzahl-text-gewicht);
  font-size: var(--schrift-kennzahl-text-groesse);
  line-height: var(--schrift-kennzahl-text-zeile);
  letter-spacing: var(--schrift-kennzahl-text-laufweite);
  text-wrap: pretty;
}

.bx-modulkette__zum-bereich {
  display: block;
  margin-block-start: var(--abstand-10);
  color: var(--farbe-orange-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-person-rolle-groesse);
}

.bx-modulkette__station[data-bx-rolle="hier"] .bx-modulkette__karte-titel {
  color: var(--farbe-weiss);
}

.bx-modulkette__station[data-bx-rolle="hier"] .bx-modulkette__rolle {
  color: var(--farbe-mint);
}

.bx-modulkette__station[data-bx-rolle="hier"] .bx-modulkette__karte-text {
  color: var(--farbe-navy-text-lead);
}

/* Variante `paketkette` (Design CRM Sales v2 „Kette“): fünf Spalten ab `stapeln`, darunter senkrecht */
.bx-modulkette__paketkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-40);
  margin-block-end: var(--abstand-34);
}

/* Kopf links (Eyebrow, H2), Text rechts, unten bündig (P-H1B-H0B-3, Design CRM <Paket> v2 „Kette“) */
.bx-modulkette__paketkopf > .bx-modulkette__kopf {
  min-inline-size: 0;
}

.bx-modulkette__paketkopf .bx-sektionskopf__titel {
  margin-block-end: 0;
}

.bx-modulkette__seitentext {
  max-inline-size: 290px; /* Breite des Kopf-Texts (Design) */
  flex: none;
  margin: 0;
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-kennzahl-text-zeile);
  text-wrap: pretty;
}

.bx-modulkette__stationen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-weiss);
  list-style: none;
}

.bx-modulkette__stationen > li {
  /* Stationsfarbe für Nummer und Punkt; Etiketten in einer Textfarbe ab 4,5 : 1 auf Weiß (P-H1B-H0B-5) */
  --bx-kette-farbe: var(--farbe-mikrotext);
  --bx-kette-text: var(--farbe-mikrotext);
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 0 var(--abstand-20) var(--abstand-20);
}

.bx-modulkette__stationen > li + li {
  border-inline-start: 1px solid var(--farbe-flaeche-toggle);
}

.bx-modulkette__stationen > li[data-bx-farbe="graublau"] {
  --bx-kette-farbe: var(--farbe-kette-graublau);
  --bx-kette-text: var(--farbe-mikrotext);
}

.bx-modulkette__stationen > li[data-bx-farbe="mint"] {
  --bx-kette-farbe: var(--farbe-mint-akzent);
  --bx-kette-text: var(--farbe-mint-text);
}

.bx-modulkette__stationen > li[data-bx-farbe="mint-tief"] {
  --bx-kette-farbe: var(--farbe-kette-mint-tief);
  --bx-kette-text: var(--farbe-gruen-text);
}

.bx-modulkette__stationen > li[data-bx-farbe="orange"] {
  --bx-kette-farbe: var(--farbe-orange-text);
  --bx-kette-text: var(--farbe-orange-text);
}

.bx-modulkette__nummer {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 calc(-1 * var(--abstand-20)) var(--abstand-20);
  padding: var(--abstand-42) 0 var(--abstand-22);
  border-block-end: 1px solid var(--farbe-flaeche-toggle);
  background-color: var(--farbe-flaeche-hell);
}

.bx-modulkette__stationen > li:first-child .bx-modulkette__nummer {
  border-start-start-radius: var(--radius-karte);
}

.bx-modulkette__stationen > li:last-child .bx-modulkette__nummer {
  border-start-end-radius: var(--radius-karte);
}

/*
 * Verbindungslinie von Mitte zu Mitte der Nummern (Design CRM Sales v2 Z. 116: 2 px, oben 54 px = Mitte der
 * 26-px-Nummer, 21 px Luft vor und nach jeder Nummer; hier die Skalenstufe 22)
 */
.bx-modulkette__paketstation + .bx-modulkette__paketstation .bx-modulkette__nummer::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--abstand-42) + var(--abstand-12));
  inset-inline: calc(-50% + var(--abstand-22)) calc(50% + var(--abstand-22));
  block-size: 2px;
  background-color: var(--farbe-linie);
}

.bx-modulkette__nummer span {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--radius-rund);
  background-color: var(--bx-kette-farbe);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-pille-groesse);
  box-shadow: var(--schatten-ring-hell);
}

.bx-modulkette__uebergabe {
  position: absolute;
  inset-block-start: var(--abstand-14);
  inset-inline-start: 0;
  z-index: 1;
  margin: 0;
  padding: var(--abstand-4) var(--abstand-10);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-widget-kicker-groesse);
  white-space: nowrap;
  translate: -50% 0;
}

.bx-modulkette__phase {
  margin: 0 0 var(--abstand-9);
  color: var(--bx-kette-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);
}

.bx-modulkette__titel {
  margin: 0 0 var(--abstand-8);
  color: var(--farbe-navy);
  font-weight: var(--schrift-termin-schritt-titel-gewicht);
  font-size: var(--schrift-person-name-groesse);
}

.bx-modulkette__text {
  flex: 1;
  margin: 0;
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-fuss-recht-groesse);
  line-height: var(--schrift-trust-text-zeile);
}

.bx-modulkette__module {
  margin: var(--abstand-16) 0 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-trust-chip-gewicht);
  font-size: var(--schrift-fussnote-groesse);
}

.bx-modulkette__module span {
  display: block;
  margin-block-end: var(--abstand-5);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-widget-kicker-groesse);
  letter-spacing: var(--schrift-label-laufweite);
}

/*
 * Block „Ph9 I2c“ (Ä9-18, H9-23/I2c R-1): Anordnung `reihe` der Integrationsseiten (Design Abschnitt „06 …“): Kopf oben
 * mit dem Textlink rechts, darunter die Karten nebeneinander; gleiches HTML wie `kette`, unter `stapeln` einspaltig
 */
.bx-modulkette__einordnung--reihe {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-28);
}

.bx-modulkette__einordnung--reihe .bx-modulkette__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-20) var(--abstand-40);
}

.bx-modulkette__einordnung--reihe .bx-modulkette__kopf-link {
  flex: none;
  margin: 0;
}

.bx-modulkette__einordnung--reihe .bx-modulkette__karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-16);
  padding: 0;
}

.bx-modulkette__einordnung--reihe .bx-modulkette__karten::before,
.bx-modulkette__einordnung--reihe .bx-modulkette__station::before {
  display: none;
}

.bx-modulkette__einordnung--reihe .bx-modulkette__station + .bx-modulkette__station {
  margin-block-start: 0;
}

.bx-modulkette__einordnung--reihe .bx-modulkette__station {
  display: flex;
}

.bx-modulkette__einordnung--reihe .bx-modulkette__karte {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--abstand-8);
  padding: var(--abstand-24) var(--abstand-26);
  border-color: var(--farbe-linie-karte);
  border-radius: var(--radius-karte-klein);
  transition: transform var(--bewegung-dauer-kurz), box-shadow var(--bewegung-dauer-kurz),
    border-color var(--bewegung-dauer-kurz);
}

.bx-modulkette__einordnung--reihe .bx-modulkette__karte-kopf {
  display: contents;
}

/* Label über dem Titel (Design: Label, Titel, Text, Link untereinander) */
.bx-modulkette__einordnung--reihe .bx-modulkette__rolle {
  order: -1;
}

/* Ph12 D (V-D-integrationen-13, mobil-6; Design „Integration Brevo“ 06): Titel 800 20 px/1,25 mit −0,4 px, Text 14 px/1,55 */
.bx-modulkette__einordnung--reihe .bx-modulkette__karte-titel {
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-h3-groesse);
  line-height: var(--schrift-h3-gross-zeile);
  letter-spacing: var(--schrift-h3-laufweite);
}

.bx-modulkette__einordnung--reihe .bx-modulkette__karte-text {
  margin-block-start: 0;
  font-size: var(--schrift-integration-kette-text-groesse);
  line-height: var(--schrift-integration-kette-text-zeile);
}

.bx-modulkette__einordnung--reihe .bx-modulkette__zum-bereich {
  margin-block-start: auto;
  padding-block-start: var(--abstand-8);
}

.bx-modulkette__einordnung--reihe a.bx-modulkette__karte:hover,
[data-sg-zustand="hover"] .bx-modulkette__einordnung--reihe a.bx-modulkette__karte {
  border-color: var(--farbe-navy);
  box-shadow: var(--schatten-screenshot);
  transform: translateY(-3px); /* Hover-Hub (Design) */
}

.bx-modulkette__einordnung--reihe .bx-modulkette__station[data-bx-rolle="hier"] .bx-modulkette__karte {
  box-shadow: var(--schatten-karte-auf-navy);
}

@media (width < 768px) {
  .bx-modulkette__einordnung--reihe .bx-modulkette__karten {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ph12 D (V-D-integrationen-mobil-7): Kartenpolster mobil 24/20 */
  .bx-modulkette__einordnung--reihe .bx-modulkette__karte {
    padding: var(--abstand-24) var(--abstand-20);
  }
}

@media (width < 1080px) {
  .bx-modulkette__einordnung {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-32);
  }

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

  .bx-modulkette__stationen > li + li {
    border-inline-start: 0;
    border-block-start: 1px solid var(--farbe-flaeche-toggle);
  }

  .bx-modulkette__nummer {
    justify-content: flex-start;
    padding: var(--abstand-20) var(--abstand-20) var(--abstand-18);
  }

  .bx-modulkette__paketstation + .bx-modulkette__paketstation .bx-modulkette__nummer::before {
    display: none;
  }

  .bx-modulkette__uebergabe {
    position: static;
    align-self: flex-start;
    margin-block-start: var(--abstand-14);
    translate: none;
  }
}

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

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

/* Ph9 I1c: zwei Karten, Consulting und geplanter Ausbau. */
.bx-voraussetzungen { padding: var(--abstand-80) var(--seitenrand) var(--abstand-84); border-block-start: 1px solid var(--farbe-linie-sektion); background: var(--farbe-flaeche-karte); color: var(--farbe-navy); }
.bx-voraussetzungen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-18); margin-block-start: var(--abstand-28); }
.bx-voraussetzungen__karte { padding: var(--abstand-28) var(--abstand-30) var(--abstand-26); border: 1px solid var(--farbe-linie-karte); border-radius: var(--radius-box); background: var(--farbe-weiss); }
.bx-voraussetzungen__karte:last-child { padding-block-end: var(--abstand-10); }
/* Ph12 D (V-D-integrationen-8, mobil-8; Design „Integration Brevo“ 07): Titel 19 px, Punkte Titel 16,5 px, Text 15 px/1,55 */
.bx-voraussetzungen__karte h3 { margin: 0 0 var(--abstand-12); font-weight: var(--schrift-karte-titel-integration-gewicht); font-size: var(--schrift-karte-titel-integration-groesse); line-height: var(--schrift-karte-titel-integration-zeile); letter-spacing: var(--schrift-karte-titel-integration-laufweite); }
.bx-voraussetzungen__brauchen { counter-reset: voraussetzung; margin: 0; padding: 0; list-style: none; }
.bx-voraussetzungen__brauchen li { display: flex; align-items: flex-start; gap: var(--abstand-14); padding-block: var(--abstand-16); border-block-start: 1px solid var(--farbe-linie); counter-increment: voraussetzung; }
.bx-voraussetzungen__brauchen li::before { content: counter(voraussetzung); display: grid; place-items: center; flex: 0 0 var(--abstand-32); height: var(--abstand-32); border-radius: var(--radius-rund); background: var(--farbe-navy); color: var(--farbe-weiss); font-family: var(--schrift-familie-mono); font-weight: var(--schrift-termin-nummer-gewicht); font-size: var(--schrift-termin-nummer-groesse); line-height: 1; }
.bx-voraussetzungen__brauchen strong { display: block; font-weight: var(--schrift-person-name-klein-gewicht); font-size: var(--schrift-text-groesse); line-height: 1.35; }
.bx-voraussetzungen__brauchen p { margin: 3px 0 0; /* Design: unter der Skala (4 px) */ color: var(--farbe-mikrotext); font-size: var(--schrift-liste-groesse); line-height: 1.55; }
.bx-voraussetzungen__consulting { margin-block-start: var(--abstand-6); padding: var(--abstand-16) var(--abstand-18); border-radius: var(--radius-rahmen); background: var(--farbe-gruen-flaeche); color: var(--farbe-gruen-text); }
.bx-voraussetzungen__consulting p { margin: 0 0 var(--abstand-10); font-size: var(--schrift-karte-text-groesse); line-height: 1.55; }
/* Linkzeile im Consulting-Kasten: Consulting anfragen, Zusatzlink und Handbuch nebeneinander (Design 07) */
.bx-voraussetzungen__consulting-links { display: flex; flex-wrap: wrap; gap: var(--abstand-8) var(--abstand-22); }
.bx-voraussetzungen__grenzen { list-style: none; margin: 0; padding: 0; color: var(--farbe-mikrotext); font-size: var(--schrift-liste-groesse); line-height: 1.55; }
.bx-voraussetzungen__grenzen li { position: relative; padding: var(--abstand-16) 0 var(--abstand-16) var(--abstand-32); border-block-start: 1px solid var(--farbe-linie); }
.bx-voraussetzungen__grenzen strong { color: var(--farbe-navy); }
/* BW-78: Minus als gezeichneter Strich statt Textzeichen (Design: Strich M2.5 6h7 im Ring), damit er im Kreis mittig steht */
.bx-voraussetzungen__grenzen li::before { content: ''; position: absolute; left: 0; box-sizing: border-box; width: var(--abstand-20); height: var(--abstand-20); border: 1.5px solid var(--farbe-gedaempft-ring); border-radius: var(--radius-rund); background: linear-gradient(var(--farbe-gedaempft-ring), var(--farbe-gedaempft-ring)) center / 7px 2px no-repeat; }
/* Ph12: Geplant-Kasten wie im Design (DATEV v2, ZUGFeRD): Pille mit orangem Punkt, Text daneben, Umbruch bei wenig Platz */
.bx-voraussetzungen__geplant { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-10) var(--abstand-16); margin-block-start: var(--abstand-18); padding: var(--abstand-16) var(--abstand-22); border: 1.5px dashed var(--farbe-navy-text-dezent); border-radius: var(--radius-panel); background: var(--farbe-weiss); }
.bx-voraussetzungen__geplant time { display: inline-flex; align-items: center; gap: var(--abstand-7); height: var(--abstand-24); padding: 0 var(--abstand-10); border-radius: var(--radius-pille); background: var(--farbe-orange-karte); color: var(--farbe-gedaempft-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); letter-spacing: var(--schrift-pille-laufweite); white-space: nowrap; }
.bx-voraussetzungen__geplant time::before { content: ''; flex: none; width: var(--abstand-6); height: var(--abstand-6); border-radius: var(--radius-rund); background: var(--farbe-orange-flaeche); }
.bx-voraussetzungen__geplant p { flex: 1 1 320px; min-inline-size: 0; margin: 0; color: var(--farbe-mikrotext); font-family: var(--schrift-familie-text); font-weight: var(--schrift-geplant-text-gewicht); font-size: var(--schrift-geplant-text-groesse); line-height: var(--schrift-geplant-text-zeile); letter-spacing: var(--schrift-geplant-text-laufweite); text-wrap: pretty; }
.bx-voraussetzungen__geplant strong { color: var(--farbe-navy); }
.bx-voraussetzungen__stand { margin: var(--abstand-22) 0 0; color: var(--farbe-mikrotext); font-size: var(--schrift-fussnote-groesse); line-height: var(--schrift-fussnote-zeile); }
.bx-voraussetzungen__stand a { color: var(--farbe-navy); text-decoration: underline; }
@media (width < 768px) {
  .bx-voraussetzungen__raster { grid-template-columns: 1fr; }
  .bx-voraussetzungen__karte { padding: var(--abstand-28) var(--abstand-20) var(--abstand-26); }
  .bx-voraussetzungen__karte:last-child { padding-block-end: var(--abstand-10); }
  .bx-voraussetzungen__geplant { padding-inline: var(--abstand-20); }
}

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