@font-face {
  font-family: "Modern Era";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/modern-era-400-normal.6d3ad50f18.woff2") format("woff2");
}
@font-face {
  font-family: "Modern Era";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/modern-era-400-italic.4ae8dfde52.woff2") format("woff2");
}
@font-face {
  font-family: "Modern Era";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/assets/fonts/modern-era-700-normal.9ea22cd73f.woff2") format("woff2");
}
@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 – the single source for colours, type, radii and shadows */
: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: #FF3C00; /* Spec: Primärbutton, Eyebrows, Textlinks, Pillen mit Text; wertgleich mit der Orange-Fläche wie die Designseiten, 3,56:1 auf Weiß bewusst unter 4,5:1 (deliberate, deviates from design.md) */
  --farbe-orange-hover: #FF5722; /* Spec: Hover des Primärbuttons, 3,16:1 auf Weiß bewusst; einzige erlaubte Stelle dieses Werts (css.altwert) */
  --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: outline pill of the trust line in the hero (CRM Produktseite v2 Z. 64–69) */
  --farbe-navy-abdunkel: rgba(0,0,0,.16); /* Ergänzung: darkened trust line below the 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) */
  --farbe-schleier: rgba(14,19,40,.2); /* Vertrag: Schleier unter Mega-Menü und Suchpanel */
  --farbe-schleier-dialog: rgba(16,22,40,.62); /* Vertrag: Hintergrund des Dialogs */
  --farbe-icon-mint: rgba(0,180,143,.14); /* Vertrag: Icon-Kachel Mint der Spalte APP */
  --farbe-icon-orange: rgba(255,60,0,.12); /* Vertrag: Icon-Kachel Orange der Spalte APP */
  --farbe-icon-navy: rgba(30,40,80,.08); /* Vertrag: Icon-Kachel Navy der Spalte APP */
  --farbe-mint-flaeche: rgba(0,180,143,.10); /* Vertrag: Fläche der Promo Startups */
  --farbe-mint-rand: rgba(0,180,143,.34); /* Vertrag: Rand der Promo Startups */
  --farbe-markierung: rgba(255,60,0,.14); /* Vertrag: markierte Suchwörter */
  --farbe-bereich-produkt: var(--farbe-orange-flaeche); /* Vertrag: Bereichspunkt Produkt, nur Grafik */
  --farbe-bereich-produkt-text: var(--farbe-orange-text); /* Vertrag: Bereichstext Produkt */
  --farbe-bereich-preise: var(--farbe-blau); /* Vertrag: Bereichspunkt und -text Preise */
  --farbe-bereich-loesungen: var(--farbe-blau); /* Vertrag: Bereichspunkt und -text Lösungen */
  --farbe-bereich-integrationen: var(--farbe-gruen); /* Vertrag: Bereichspunkt und -text Integrationen */
  --farbe-bereich-sicherheit: var(--farbe-navy); /* Vertrag: Bereichspunkt und -text Sicherheit */
  --farbe-bereich-ressourcen: var(--farbe-mikrotext); /* Vertrag: Bereichspunkt und -text Ressourcen */
  --farbe-bereich-unternehmen: var(--farbe-mikrotext); /* Vertrag: Bereichspunkt und -text Unternehmen */
  --farbe-marke-youtube: #FF0000; /* Vertrag: Social-Hover YouTube, nur mit URL */
  --farbe-marke-linkedin: #0A66C2; /* Vertrag: Social-Hover LinkedIn, nur mit URL */
  --farbe-glow-mint-karte: rgba(0,180,143,.2); /* Vertrag: Glow der Navy-Karten der Fehlerseiten */
  --farbe-halo-orange: rgba(255,60,0,.32); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, Beginn */
  --farbe-halo-orange-aus: rgba(255,60,0,0); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, ausgeblendet */
  --farbe-orange-durchstrich: rgba(255,60,0,.55); /* Vertrag: Durchstreichung der entfernten Adresse der 410 */
  --farbe-navy-link-linie: rgba(255,255,255,.35); /* Ergänzung: underline of links on navy cards (410 page "also relevant"; approved exception) */
  --farbe-navy-tief: #101628; /* Vertrag: Hero und „Heute“ Über uns, „Die Menschen“, OG-Motiv unternehmen */
  --farbe-violett: #7C3AED; /* Vertrag: Nummer 02 der Aussagenliste */
  --farbe-orange-navy-text: #FF3C00; /* Vertrag: orange Text auf Navy-Tief („Heute“, 5,05:1), Ausnahme */
  --farbe-orange-navy-hell: #FF6A3D; /* Vertrag: Akzent auf Navy (Startseite „heute“) */
  --farbe-orange-navy-hover: #FF7A52; /* Vertrag: Link-Hover auf Navy */
  --farbe-navy-text-lead: #C4CBE0; /* Vertrag: Text auf Navy (Abschluss Startseite, Integrationen) */
  --farbe-titel-zweitton: #7C87A8; /* Vertrag: H2-Zweitton auf Weiß, nur ab 24 px, Ausnahme */
  --farbe-linie-stark: #C3CAD8; /* Vertrag: grauer Linkunterstrich */
  --farbe-linie-begriff: var(--farbe-app-rand-stark); /* Ergänzung: gepunkteter Unterstrich der Lexikon-Verweise (#9AA3B8, Δ4 zu --farbe-app-rand-stark; AD, CF, VF Fließtexte) */
  --farbe-orange-wahl-text: #D93400; /* Ergänzung: Titel der gewählten Szenario-Kachel (VF Z. 835), „OHNE brainX“ (VF Z. 540), -40 */
  --farbe-orange-wahl-hinweis: #B8451F; /* Ergänzung: Hinweis der gewählten Szenario-Kachel (VF Z. 835) */
  --farbe-glow-mint-band: rgba(79,216,188,.24); /* Ergänzung: Mint-Glow des Navy-Bands unter den Ursache-Karten (CF Z. 178) */
  --farbe-linie-grafik: #C3CCDD; /* Vertrag: Verbinder der Grafik „Der Vertrag steht in der Mitte“ */
  --farbe-karte-punkt: #B7C1D6; /* Vertrag: Standortkarte, Punkte */
  --farbe-karte-flaeche: #DCE3EF; /* Vertrag: Standortkarte, Fläche */
  --farbe-maske: #000; /* Vertrag: Maske des Laufbands */
  --farbe-glow-orange-cta: rgba(255,60,0,.16); /* Vertrag: Glow des Abschlusses navy-termin */
  --farbe-diagramm-mint-hell: #B4EBDD; /* Vertrag: dashboard-widget, Reihe Mint hell */
  --farbe-diagramm-orange-1: #FF6B3D; /* Vertrag: dashboard-widget, Reihe Orange 1 */
  --farbe-diagramm-orange-2: #FF9A72; /* Vertrag: dashboard-widget, Reihe Orange 2 */
  --farbe-diagramm-orange-3: #FFC9B3; /* Vertrag: dashboard-widget, Reihe Orange 3 */
  --farbe-diagramm-schraffur: #F1FBF8; /* Vertrag: dashboard-widget, Schraffur */
  --farbe-diagramm-grundlinie: #C9D0DD; /* Vertrag: dashboard-widget, Grundlinie */
  --farbe-tooltip: #1B2230; /* Vertrag: dashboard-widget, Tooltip */
  --farbe-saldo-negativ-rand: #E5484D; /* Vertrag: dashboard-widget, negativer Saldo, Rand */
  --farbe-saldo-negativ-text: #D92D20; /* Vertrag: dashboard-widget, negativer Saldo, Text */
  --farbe-widget-schalter-aus: #4A5578; /* Vertrag: dashboard-widget, Szenario-Schalter aus */
  --farbe-navy-linie-stark: rgba(255,255,255,.2); /* Vertrag: Linie der Kapitelleiste auf Navy */
  --farbe-video-knopf: var(--farbe-schleier-dialog); /* Vertrag: Abspielen-Knopf der Bühnen */
  --farbe-video-knopf-hover: rgba(16,22,40,.85); /* Vertrag: Abspielen-Knopf im Hover */
  --farbe-navy-rand-mittel: rgba(255,255,255,.28); /* Vertrag: Rand des Abspielen-Knopfs, inaktiver Story-Punkt */
  --farbe-app-link: #00A57F; /* Vertrag: Bühnen, Link-Grün und Status „Neu“ der Oberfläche */
  --farbe-app-status-ok: #DFF4EF; /* Vertrag: Bühnen, Fläche Status „Neu“ und „Bezahlt“ */
  --farbe-app-rand: #B1B4BB; /* Vertrag: Bühnen, Rand der Checkbox */
  --farbe-app-dunkel: #1A1B1E; /* Vertrag: Bühnen, Zeiger, Etikett, Toast-Titel, aktiver Story-Eintrag */
  --farbe-app-kopf-text: #C9CCD6; /* Vertrag: Bühnen, Krümel und Seitenleiste der Story */
  --farbe-app-kopf-linie: #33363D; /* Vertrag: Bühnen, Trennstrich der Titelleiste */
  --farbe-fremd-leiste: #24272E; /* Vertrag: Bühnen, Titelleiste der Fremdfenster */
  --farbe-app-nebentext: #6E7480; /* Vertrag: Bühnen, Unterzeile Toast, Nebentext Fremdsystem */
  --farbe-fremd-leiste-punkt: #4A4F5A; /* Vertrag: Bühnen, Fensterpunkte der Titelleiste aller Fremdfenster */
  --farbe-fremd-snapaddy-akzent: #1F9BD7; /* Vertrag: Bühnen, snapADDY Knopf „An CRM senden“ */
  --farbe-fremd-snapaddy-akzent-gedrueckt: #1784BA; /* Vertrag: Bühnen, snapADDY Knopf gedrückt */
  --farbe-fremd-snapaddy-erfolg: #1E8E4E; /* Vertrag: Bühnen, snapADDY Knopf gesendet, Häkchen */
  --farbe-fremd-snapaddy-text: #1F2937; /* Vertrag: Bühnen, snapADDY Text der Karte und des Panels */
  --farbe-fremd-snapaddy-scan: #4FD1FF; /* Vertrag: Bühnen, snapADDY Scanlinie */
  --farbe-glow-orange-story: rgba(255,60,0,.08); /* Vertrag: Scrollstory, Glow im Fenster */
  --farbe-story-zeiger: #111111; /* Vertrag: Scrollstory, Zeiger */
  --farbe-app-symbol: #3A3D4A; /* Vertrag: Bühnen, Pfeil der Auswahlfelder, Linie unter Dialog-Abschnitten */
  --farbe-app-platzhalter: #A3A8B8; /* Vertrag: Bühnen, Platzhalter in Eingabefeldern */
  --farbe-app-leiste-sekundaer: #B9BCC8; /* Vertrag: Bühnen, Gruppentitel und Systemeinträge der Seitenleiste */
  --farbe-app-rand-stark: #9AA0B4; /* Vertrag: Bühnen, Rand der Kontrollkästchen */
  --farbe-app-werkzeug: #6B7088; /* Vertrag: Bühnen, Beschriftung der Werkzeug-Knöpfe */
  --farbe-app-knopf-gruen: #11A889; /* Vertrag: Bühnen, Primärknopf der Video-Oberfläche */
  --farbe-app-chip-tuerkis-text: #0F9FB4; /* Vertrag: Bühnen, Chip Neu und Meeting, Text */
  --farbe-app-chip-blau-text: #1386D1; /* Vertrag: Bühnen, Chip Kontaktversuch, Text */
  --farbe-app-chip-blau-flaeche: #E4F2FC; /* Vertrag: Bühnen, Chip Kontaktversuch, Neu, Meeting, Anruf, Fläche */
  --farbe-app-chip-orange-text: #F08C00; /* Vertrag: Bühnen, Chip Qualifiziert, Hover der Auswahl, Text */
  --farbe-app-chip-orange-flaeche: #FFF3E0; /* Vertrag: Bühnen, Chip Qualifiziert, Fläche */
  --farbe-app-chip-rotorange-text: #F2400F; /* Vertrag: Bühnen, Chip Disqualifiziert, Kommunikation, Hoch, Text */
  --farbe-app-chip-rotorange-flaeche: #FFE7DF; /* Vertrag: Bühnen, Chip Disqualifiziert, Kommunikation, Hoch, Fläche */
  --farbe-app-chip-pink-text: #D6246E; /* Vertrag: Bühnen, Chip Webseite, Text */
  --farbe-app-chip-pink-flaeche: #FCE8EF; /* Vertrag: Bühnen, Chip Webseite und Verloren, Fläche */
  --farbe-app-chip-bernstein-text: #E08A0B; /* Vertrag: Bühnen, Chip Messe, nicht begonnen, Text */
  --farbe-app-chip-bernstein-flaeche: #FFF5E8; /* Vertrag: Bühnen, Chip Messe, nicht begonnen, Fläche */
  --farbe-app-chip-petrol-text: #1497B0; /* Vertrag: Bühnen, Chip Anruf, Text */
  --farbe-app-chip-gelb-text: #D99A00; /* Vertrag: Bühnen, Chip Anfrage erhalten, Text */
  --farbe-app-chip-gelb-flaeche: #FFF6D9; /* Vertrag: Bühnen, Chip Anfrage erhalten, Fläche */
  --farbe-gruen-tabelle-text: #123F33; /* Ergänzung: Text der Spalte „BEI brainX“ (Design Sicherheit v3 Z. 121) */
  --farbe-app-chip-grau-text: #2A3B7D; /* Vertrag: Bühnen, Chip Organisation, Text */
  --farbe-video-abdunkeln: rgba(18,22,34,.34); /* Vertrag: Produktvideo, Abdunkelung hinter Dialogen */
  --farbe-video-hinweis: rgba(40,44,58,.96); /* Vertrag: Produktvideo, Karte „Im Hintergrund“ */
  --farbe-video-fortschritt: #3FD0B4; /* Vertrag: Produktvideo, Balken der Karte „Im Hintergrund“ */
  --farbe-video-kapitel: #252A3A; /* Vertrag: Produktvideo, Kapitel-Chip */
  --farbe-fremd-website-text: #1F2328; /* Vertrag: Bühnen, Text des nachgestellten Website-Formulars */
  --farbe-fremd-website-label: #4B5563; /* Vertrag: Bühnen, Labels des Website-Formulars */
  --farbe-fremd-website-feldrand: #D1D5DB; /* Vertrag: Bühnen, Feldrand des Website-Formulars */
  --farbe-gruen-rand: #BFE3D6; /* Vertrag: Rand der Free-Statuszeile */
  --farbe-linie-mittel: #D6DCE8; /* Vertrag: Stationen-Fortschritt, Rand der Free-Pille, Hilfslinien Free-Diagramm (zusammengelegt) */
  --farbe-glow-orange-medium: rgba(255,60,0,.14); /* Vertrag: Glow des Video-Kastens der Stationen */
  --farbe-vorschau-blau-flaeche: #E7EEFB; /* Vertrag: Chip blau der Free-Vorschau, Fläche */
  --farbe-vorschau-blau-text: #23489E; /* Vertrag: Chip blau der Free-Vorschau, Text */
  --farbe-vorschau-rot-flaeche: #FDECEA; /* Vertrag: Chip rot der Free-Vorschau, Fläche */
  --farbe-vorschau-rot-text: #A8261B; /* Vertrag: Chip rot der Free-Vorschau, Text */
  --farbe-diagramm-ausgaben: #FF8A5C; /* Vertrag: Balken Ausgaben der Free-Vorschau */
  --farbe-saldo-rand: #9ED9C8; /* Vertrag: Rand der Saldo-Pille der Free-Vorschau */
  --farbe-streifen-hell: #E9EEF5; /* Vertrag: zweite Streifenfarbe des zeeg-Platzhalters */
  --farbe-flaeche-hinweis: #EDF1F7; /* Vertrag: Hinweis-Box Basis/Module, Protokoll aktiv */
  --farbe-flaeche-hinweis-hover: #E3E9F3; /* Vertrag: Hover der Hinweis-Box */
  --farbe-chip-blau-text: #22406B; /* Vertrag: Modul-Chips der Details (Fläche --farbe-hellblau-vergleich) */
  --farbe-chip-blau-rand: #C6D2E6; /* Vertrag: Integrations-Pillen der Details */
  --farbe-navy-flaeche-zart: rgba(255,255,255,.08); /* Vertrag: nur die .08-Stellen auf Navy: Zahlweise-Pille, Zeilenlinien der Auswahl-Spalte */
  --farbe-navy-hauch: rgba(255,255,255,.05); /* Vertrag: only the foot of the selection column and the wedge of both pricing heroes, not the row lines */
  --farbe-mint-box: rgba(79,216,188,.13); /* Vertrag: Grenz-Box Business, nicht der Badge „sparen“ (der nutzt --farbe-mint-pille) */
  --farbe-mint-box-rand: rgba(79,216,188,.35); /* Vertrag: Rand der Grenz-Box Business */
  --farbe-gruen-tief: #00594A; /* Vertrag: "secure revenue" area of the tour (the design applies, exception to "green only for status") */
  --farbe-kette-graublau: #5D7C93; /* Vertrag: Kettenstation 2, Stunden „ohne“, Insel „heute“, ton graublau (Paketseiten) */
  --farbe-kette-mint-tief: #00A87F; /* Vertrag: chain station 4 (package pages; close to --farbe-app-link, Δ3, different role, kept) */
  --farbe-system-crm: #8B7CFF; /* Vertrag: Systemfarbe „CRM“, Deko auf Navy */
  --farbe-system-tool: #FFB020; /* Vertrag: Systemfarbe „Rechnungstool“ */
  --farbe-system-tabelle: #3FA9F5; /* Vertrag: Systemfarbe „Tabellen“ */
  --farbe-team-service: #F5C243; /* Vertrag: Team-Pille Service (CP), zugleich ton gelb von karten nummeriert (CP Karte 05) */
  --farbe-team-projekte: #FF9270; /* Vertrag: Team-Pille Projekte und Abrechnung, Text (CP) */
  --farbe-orange-tief: #B62C00; /* Vertrag: Warnungstext Szenario, Kicker hell (AC, VF) */
  --farbe-orange-karte: #FFF4EF; /* Vertrag: orange Ergebniskarte (VF) */
  --farbe-orange-karte-rand: #FFD2BF; /* Vertrag: Rand der orangen Ergebniskarte und Pille (VF) */
  --farbe-knoten-bedingung: #C3B0EE; /* Vertrag: Challenge-Knotenrand Bedingung */
  --farbe-knoten-zeit: #EFD79B; /* Vertrag: Challenge-Knotenrand Zeitschritt */
  --farbe-knoten-entfaellt: #F3C9BC; /* Vertrag: Challenge-Knotenrand entfällt */
  --farbe-ergebnis-gruen-rand: #CBE5DC; /* Vertrag: Rand des Ergebnis-Tons grün von passt-das */
  --farbe-navy-fortschritt: rgba(255,255,255,.45); /* Vertrag: Fortschritt im Stand-Kasten auf Navy (passt-das) */
  --farbe-warn-rand: #F5D9BC; /* Vertrag: Rand des Ergebnis-Tons warn (passt-das) */
  --farbe-linie-mint: #A8D9CE; /* Vertrag: Abnahme-Linie mint im Phasenplan (wechsel-zeitplan) */
  --farbe-linie-orange: #FFB59E; /* Vertrag: Abnahme-Linie orange im Phasenplan (wechsel-zeitplan) */
  --farbe-orange-navy-blass: rgba(255,154,110,.55); /* Vertrag: Text der Lücke in der Weichen-Grafik auf Navy (AC) */
  --farbe-phase-gelb: #FFC46B; /* Vertrag: pill dot (MU Z. 300) */
  --farbe-orange-nummer-blass: #FFD4C6; /* Vertrag: number of the accent card "04" (OB Z. 229) */
  --farbe-gruen-flaeche-hover: #DAEDE6; /* Vertrag: Hover der Link-Karte der Scrollstory (T3 Z. 361) */
  --farbe-app-status-faellig-text: #F59E0B; /* Vertrag: status pill "due", text (AD invoice run; area --farbe-app-chip-orange-flaeche) */
  --farbe-app-status-erstellt-text: #3B7DD8; /* Vertrag: status pill "created", text (AD invoice run; area --farbe-app-chip-blau-flaeche) */
  --farbe-app-status-gesendet-text: var(--farbe-fremd-snapaddy-akzent); /* Vertrag: Status-Pille „Gesendet“, Text (AD #1BA0D8 = Nahdublette Δ5, nur Rollenname) */
  --farbe-app-status-bezahlt-text: #1AB394; /* Vertrag: status pill "paid" and "booked", text (AD invoice run; area --farbe-app-status-ok) */
  --farbe-app-status-mahnung-text: #F04E23; /* Vertrag: status pill "2nd reminder", text (AD invoice run; area --farbe-vorschau-rot-flaeche) */
  --farbe-team-vertrieb-flaeche: rgba(79,216,188,.14); /* Vertrag: Team-Pille Vertrieb, Fläche (CP Karten 01, 02) */
  --farbe-team-projekte-flaeche: rgba(255,146,112,.16); /* Vertrag: Team-Pille Projekte, Fläche (CP Karte 03) */
  --farbe-team-service-flaeche: rgba(245,194,67,.16); /* Vertrag: Team-Pille Service, Fläche (CP Karte 04) */
  --farbe-team-abrechnung-flaeche: rgba(255,60,0,.18); /* Vertrag: Team-Pille Abrechnung, Fläche (CP Karte 05) */
  --farbe-kette-aktiv-rand: rgba(79,216,188,.75); /* Vertrag: border of the card with aria-current in automation-kette (area --farbe-mint-box) */
  --farbe-kette-ende-rand: rgba(255,60,0,.5); /* Vertrag: Rand der Karte 05 in Ruhe in automation-kette */
  --farbe-kette-ziffer: #8A93B5; /* Vertrag: Nummer und Pfeil der automation-kette (≈ --farbe-app-sekundaer Δ14, keine Nahdublette) */
  --farbe-app-etikett-gruen-flaeche: #CCF0E9; /* Vertrag: Bühne automation-ablauf, Etikett und Pille grün (AA .gr) */
  --farbe-app-etikett-orange-flaeche: #FFE3D6; /* Vertrag: Bühne automation-ablauf, Etikett orange, Fläche (AA .or) */
  --farbe-app-etikett-orange-text: #B83A0C; /* Vertrag: Bühne automation-ablauf, Etikett orange, Text (AA .or) */
  --farbe-pille-klausel-text: #4B5670; /* Ergänzung: Heute-Tabelle C-Level, Pille Klausel, Text */
  --farbe-tabelle-zeile-linie: #F1F4F9; /* Ergänzung: Heute-Tabelle C-Level, Linie zwischen den Zeilen */
  --farbe-app-bedingung: #7E2F8D; /* Vertrag: Bühne automation-ablauf, Symbol Bedingung (AA bolt) */
  --farbe-app-bedingung-flaeche: #F3E6F5; /* Vertrag: Bühne automation-ablauf, Symbolkachel Bedingung */
  --farbe-app-aktion: #0D9DDD; /* Vertrag: Bühne automation-ablauf, Symbol Aktion (AA akt) */
  --farbe-app-aktion-flaeche: #DDF1FA; /* Vertrag: Bühne automation-ablauf, Symbolkachel Aktion */
  --farbe-app-aktion-text: #0A7FB5; /* Vertrag: Bühne automation-ablauf, Legende Aktion */
  --farbe-app-port: var(--farbe-app-kopf-text); /* Vertrag: Bühne automation-ablauf, Ports der Knoten (AA #C9CED8 = Nahdublette Δ2, nur Rollenname) */
  --farbe-app-bahn: var(--farbe-fremd-website-feldrand); /* Vertrag: Bühne automation-ablauf, Bahn der Kanten (AA #D3D7DF = Nahdublette Δ4, nur Rollenname) */
  --farbe-orange-rand-hover: #FFC2A8; /* Vertrag: Rand der Integrations-Kachel im Hover und Fokus (sammelliste) */
  --farbe-app-gruen-gedrueckt: #009977; /* Vertrag: Bühnen, Primärknopf der Oberfläche gedrückt (Kern; hero-zugferd, hero-microsoft365) */
  --farbe-app-haken-flaeche: #D9F0E8; /* Vertrag: Bühnen, Kreis des großen Hakens .bxi-gross und des Toast-Hakens (Kern) */
  --farbe-fremd-docusign-akzent: #4C00FF; /* Vertrag: Bühnen, DocuSign Knopf „Fertigstellen“ (hero-docusign) */
  --farbe-fremd-docusign-akzent-gedrueckt: #3A00C4; /* Vertrag: Bühnen, DocuSign Knopf „Fertigstellen“ gedrückt (hero-docusign) */
  --farbe-fremd-docusign-markierung: #FFD200; /* Vertrag: Bühnen, DocuSign Feld „Unterschreiben“ (hero-docusign) */
  --farbe-fremd-docusign-tinte: #1D2A6B; /* Vertrag: Bühnen, DocuSign Unterschrift in --schrift-familie-hand (hero-docusign) */
  --farbe-fremd-docusign-linie: #8A8A99; /* Vertrag: Bühnen, DocuSign Unterschriftslinie (hero-docusign) */
  --farbe-fremd-outlook-akzent: #1F6FD1; /* Vertrag: Bühnen, Outlook Primärknopf und Rand des Zielordners (hero-microsoft365) */
  --farbe-fremd-outlook-akzent-gedrueckt: #1A5DB3; /* Vertrag: Bühnen, Outlook Primärknopf gedrückt (hero-microsoft365) */
  --farbe-fremd-outlook-navigation: #1F5FBF; /* Vertrag: Bühnen, Outlook aktiver Navigationseintrag (hero-microsoft365) */
  --farbe-fremd-outlook-markierung: #CFE0FA; /* Vertrag: Bühnen, Outlook markierter Feldwert (Telefonnummer im Kontakt) (hero-microsoft365) */
  --farbe-fremd-outlook-ordner-ziel: #DCE8FA; /* Vertrag: Bühnen, Outlook Zielordner beim Ablegen (hero-microsoft365) */
  --farbe-fremd-outlook-text-sekundaer: #374151; /* Vertrag: Bühnen, Outlook und Teams Nebentext (hero-microsoft365) */
  --farbe-fremd-teams-avatar-1: #5B6B8C; /* Vertrag: Bühnen, Teams erster Avatar im Anruf (hero-microsoft365) */
  --farbe-fremd-teams-avatar-2: #3D7A5C; /* Vertrag: Bühnen, Teams zweiter Avatar im Anruf (hero-microsoft365) */
  --farbe-fremd-teams-verlassen: #C8463D; /* Vertrag: Bühnen, Teams Knopf „Verlassen“ (hero-microsoft365) */
  --farbe-buehne-kapitel-flaeche: rgba(18,20,26,.88); /* Vertrag: Bühnen, Fläche der Kapitel-Pille (hero-microsoft365) */
  --farbe-buehne-kapitel-text: #8A90A0; /* Vertrag: Bühnen, Text der kommenden Kapitel in der Kapitel-Pille (hero-microsoft365) */
  /* Scenes of the email group: Brevo, CleverReach, Inxmail, Mailchimp */
  --farbe-app-tab-text: #5A5F6B; /* Vertrag: Bühnen, Tabtext und Fortschrittstext im E-Mail-Modul der Oberfläche (Gruppe email; HI Z. 247, 786) */
  --farbe-fremd-brevo-akzent: #0B996E; /* Vertrag: Bühnen, Brevo Akzent (hero-brevo; HI Z. 809) */
  --farbe-fremd-brevo-text: #0B1F17; /* Vertrag: Bühnen, Brevo Text im Fenster (hero-brevo; HI Z. 812) */
  --farbe-fremd-brevo-nebentext: #5F6B66; /* Vertrag: Bühnen, Brevo Nebentext und Kennzahl-Label (hero-brevo; HI Z. 817, 818) */
  --farbe-fremd-brevo-rand: #DDE7E2; /* Vertrag: Bühnen, Brevo Rand der Kampagnenkarte und Balkengrund (hero-brevo; HI Z. 814, 818) */
  --farbe-fremd-cleverreach-akzent: #1F4FA8; /* Vertrag: Bühnen, CleverReach Knopf Anmeldung (hero-cleverreach; HI Z. 864) */
  --farbe-fremd-cleverreach-akzent-gedrueckt: #173C80; /* Vertrag: Bühnen, CleverReach Knopf Anmeldung gedrückt (hero-cleverreach; HI Z. 894) */
  --farbe-fremd-inxmail-akzent: #12507A; /* Vertrag: Bühnen, Inxmail Akzent (hero-inxmail; HI Z. 910) */
  --farbe-fremd-inxmail-nebentext: #5B6B7A; /* Vertrag: Bühnen, Inxmail Nebentext (hero-inxmail; HI Z. 913, 915, 918) */
  --farbe-fremd-inxmail-erfolg: #1E7F4F; /* Vertrag: Bühnen, Inxmail Status erfolgreich (hero-inxmail; HI Z. 911) */
  --farbe-fremd-mailchimp-text: #241C15; /* Vertrag: Bühnen, Mailchimp Text im Fenster (hero-mailchimp; HI Z. 983) */
  --farbe-fremd-mailchimp-nebentext: #5E574F; /* Vertrag: Bühnen, Mailchimp Nebentext und Pille „Abgemeldet“ (hero-mailchimp; HI Z. 982–988) */
  --farbe-fremd-mailchimp-erfolg: #1B6B3A; /* Vertrag: Bühnen, Mailchimp Pille „Abonniert“ (hero-mailchimp; HI Z. 981) */
  --farbe-fremd-mailchimp-rand: #EFEAE2; /* Vertrag: Bühnen, Mailchimp Zeilenlinie, Tabellenrand und Fläche der Pille „Abgemeldet“ (#EEEAE4, Nahdublette) (hero-mailchimp; HI Z. 980, 982, 985) */
  --farbe-fremd-mailchimp-hinweis: #FFF7C2; /* Vertrag: Bühnen, Mailchimp Kopfleiste und markierte Zeile (hero-mailchimp; HI Z. 980, 984) */
  --farbe-fremd-mailchimp-hinweis-rand: #EFE3A0; /* Vertrag: Bühnen, Mailchimp Rand der Kopfleiste (hero-mailchimp; HI Z. 984) */
  /* Payment group, DocuSeal, Jira, JSM, Clockodo */
  --farbe-fremd-zahlung-nebentext: #6B6B6B; /* Vertrag: Bühnen, Bezahlseite Mollie/Stripe Nebentext (Gruppe zahlung; HI Z. 1267) */
  --farbe-fremd-zahlung-rand: #E4E4E0; /* Vertrag: Bühnen, Bezahlseite Rand der Zahlarten (Gruppe zahlung; HI Z. 1263) */
  --farbe-fremd-zahlung-rand-feld: #D7D7D2; /* Vertrag: Bühnen, Bezahlseite Rand des IBAN-Felds (Gruppe zahlung; HI Z. 1271) */
  --farbe-fremd-zahlung-rand-radio: #B9B9B4; /* Vertrag: Bühnen, Bezahlseite Rand der Optionsknöpfe (Gruppe zahlung; HI Z. 1263) */
  --farbe-fremd-zahlung-knopf-gedrueckt: #333333; /* Vertrag: Bühnen, Bezahlseite Mollie Knopf „Bezahlen“ gedrückt (Gruppe zahlung; HI Z. 1314) */
  --farbe-fremd-stripe-akzent: #635BFF; /* Vertrag: Bühnen, Stripe Knopf „Einrichten“ (Gruppe zahlung; HI Z. 1287) */
  --farbe-fremd-stripe-akzent-gedrueckt: #4B44E0; /* Vertrag: Bühnen, Stripe Knopf „Einrichten“ gedrückt (Gruppe zahlung; HI Z. 1342) */
  --farbe-fremd-clockodo-akzent: #1A8FD8; /* Vertrag: Bühnen, Clockodo Start-Knopf und Rahmen (hero-clockodo; HI Z. 1072) */
  --farbe-fremd-docuseal-erfolg: #047857; /* Vertrag: Bühnen, DocuSeal Meldung „Dokument unterschrieben“ (hero-docuseal; HI Z. 1209) */
  --farbe-fremd-jira-akzent: #0C66E4; /* Vertrag: Bühnen, Jira Akzent, Portalkopf, Status „In Arbeit“ (hero-jira, hero-jsm; HI Z. 1368, 1431) */
  --farbe-fremd-jira-text: #172B4D; /* Vertrag: Bühnen, Jira Text und Protokoll-Hinweis (hero-jira, hero-jsm; HI Z. 1370, 1375) */
  --farbe-fremd-jira-nebentext: #626F86; /* Vertrag: Bühnen, Jira Nebentext und Ticketschlüssel (hero-jira; HI Z. 1369, 1371) */
  --farbe-fremd-jira-erledigt: #4BCE97; /* Vertrag: Bühnen, Jira Haken „Arbeit protokolliert“ (hero-jira; HI Z. 1375) */
  --farbe-fremd-jsm-erfolg: #22A06B; /* Vertrag: Bühnen, Jira Service Management Haken (hero-jsm; HI Z. 1438) */
  --farbe-fremd-jsm-erfolg-text: #216E4E; /* Vertrag: Bühnen, Jira Service Management Erfolgstext (hero-jsm; HI Z. 1438, 1444) */
  --farbe-fremd-jsm-nebentext: #44546F; /* Vertrag: Bühnen, Jira Service Management Feldbeschriftung (hero-jsm; HI Z. 1432) */
  --farbe-fremd-jsm-link: #0055CC; /* Vertrag: Bühnen, Jira Service Management Knopf „Senden“ gedrückt (hero-jsm; HI Z. 1472) */
  --farbe-app-status-wartend-text: #5B3E96; /* Vertrag: Bühnen, Aufgaben-Status „wartend“ Text (Gruppe r3 tsk; HI Z. 1068) */
  /* SalesViewer */
  --farbe-fremd-salesviewer-akzent: #2563EB; /* Vertrag: Bühnen, SalesViewer Auswahlring des erkannten Besuchers (hero-salesviewer; HI Z. 1597, 1605) */
  --farbe-fremd-salesviewer-chip-text: #1E40AF; /* Vertrag: Bühnen, SalesViewer Text der Interessen-Chips (hero-salesviewer; HI Z. 1599) */
  /* connect, Zapier, n8n, WordPress */
  --farbe-fremd-telefon-erfolg-hell: #8FD6B4; /* Vertrag: Bühnen, Telefon-Fenster Status „Verbunden“ (Gruppe connect; HI Z. 1663) */
  --farbe-fremd-telefon-erfolg-flaeche: #BFEBDD; /* Vertrag: Bühnen, Sprechblasen-Symbol gedrückt im Anruf-Popup (Gruppe connect; HI Z. 1688) */
  --farbe-fremd-zapier-akzent: #6E56CF; /* Vertrag: Bühnen, Zapier aktiver Schritt und Punkt (hero-zapier; HI Z. 618) */
  --farbe-fremd-zapier-nebentext: #6B6F78; /* Vertrag: Bühnen, Zapier Nebentext (hero-zapier; HI Z. 180, 632) */
  --farbe-fremd-zapier-rand: #E2DED5; /* Vertrag: Bühnen, Zapier Rand der Schritte und Läufe (hero-zapier; HI Z. 179, 184) */
  --farbe-fremd-zapier-linie: #CFCBC2; /* Vertrag: Bühnen, Zapier Verbindungslinie (hero-zapier; HI Z. 630) */
  --farbe-fremd-n8n-akzent: #8B7CF6; /* Vertrag: Bühnen, n8n aktiver Knoten und Punkt (hero-n8n; HI Z. 653) */
  --farbe-fremd-n8n-node-aktiv: #3D3A57; /* Vertrag: Bühnen, n8n Fläche des aktiven Knotens (hero-n8n; HI Z. 681) */
  --farbe-fremd-n8n-rand-fertig: #3E7D63; /* Vertrag: Bühnen, n8n Rand des fertigen Knotens (hero-n8n; HI Z. 680) */
  --farbe-fremd-n8n-erfolg: #2FB67C; /* Vertrag: Bühnen, n8n Haken am Knoten (hero-n8n; HI Z. 189) */
  --farbe-fremd-n8n-text-hell: #7EE2B0; /* Vertrag: Bühnen, n8n Meldung „Ausführung erfolgreich“ (hero-n8n; HI Z. 673) */
  --farbe-fremd-wordpress-label: #6B6862; /* Vertrag: Bühnen, Website-Formular Einleitung und Danke-Text (hero-wordpress; HI Z. 715, 724) */
  --farbe-fremd-wordpress-rand: #B9B3A8; /* Vertrag: Bühnen, Website-Formular Rand der Zustimmung (hero-wordpress; HI Z. 717) */
  --farbe-fremd-wordpress-feldrand: #D9D4CB; /* Vertrag: Bühnen, Website-Formular Feldrand (hero-wordpress; HI Z. 191) */
  --farbe-navy-text-dezent: #C9D2E8; /* Vertrag: gestrichelter Rand des Geplant-Kastens (voraussetzungen; DV2 Z. 401) und Text auf Navy (vgl-bild) */
  --farbe-navy-linie-deckend: #3A4570; /* Vertrag: deckende Linien auf Navy (besonderheit, mini-rechner) */
  --farbe-vgl-verweis: #00875F; /* Vertrag: Linktext der Szenen (vgl-bild; VB Z. 39) */
  --farbe-vgl-status-blau-text: #1A6FA8; /* Vertrag: Status „Neu“/„gesendet“ (vgl-bild; VB Z. 43) */
  --farbe-vgl-status-orange-text: #C2410C; /* Vertrag: Status „Offen“/„Kontaktversuch“ und Mindestbestand (vgl-bild; VB Z. 43, 268) */
  --farbe-vgl-nebentext: #7A8094; /* Vertrag: Unterzeile, Labels und Fuß der Szenen (vgl-bild; VB Z. 30, 47, 52) */
  --farbe-vgl-schleier: rgba(37,38,39,.45); /* Vertrag: Abdunkeln hinter Dialogen (vgl-bild abo, erechnung, datev; VB Z. 129, 151, 219) */
  --farbe-ergebnis-hell: #6FD8B4; /* Vertrag: „günstiger“ auf Navy, Kontrast 8,2 : 1 (mini-rechner; Design 07 Preisvergleich) */
  --farbe-titelbild-grund: #0B1020; /* Vertrag: Grund des Whitepaper-Titelbilds (Titelbild; Kachel der sammelliste) */
  --farbe-titelbild-orange-glow: rgba(255,60,0,.2); /* Vertrag: Titelbild Palette orange, Glow-Ellipse (Titelbild) */
  --farbe-titelbild-orange-bogen-1: #8A2E00; /* Vertrag: Titelbild Palette orange, Bogen bei 95 % (Titelbild) */
  --farbe-titelbild-orange-bogen-2: #FF7A2D; /* Vertrag: Titelbild Palette orange, Bogen bei 100 % (Titelbild) */
  --farbe-titelbild-orange-keil-1: var(--farbe-titelbild-orange-bogen-2); /* Vertrag: Titelbild Palette orange, Keil Anfang (Titelbild; wertgleich bogen-2) */
  --farbe-titelbild-orange-keil-2: #C24000; /* Vertrag: Titelbild Palette orange, Keil bei 58 % (Titelbild) */
  --farbe-titelbild-orange-keil-3: #7A2400; /* Vertrag: Titelbild Palette orange, Keil Ende (Titelbild) */
  --farbe-titelbild-gruen-glow: var(--farbe-glow-mint-karte); /* Vertrag: Titelbild Palette gruen, Glow-Ellipse (Titelbild; wertgleich glow-mint-karte) */
  --farbe-titelbild-gruen-bogen-1: #00553F; /* Vertrag: Titelbild Palette gruen, Bogen bei 95 % (Titelbild) */
  --farbe-titelbild-gruen-bogen-2: #38D6B4; /* Vertrag: Titelbild Palette gruen, Bogen bei 100 % (Titelbild) */
  --farbe-titelbild-gruen-keil-1: var(--farbe-titelbild-gruen-bogen-2); /* Vertrag: Titelbild Palette gruen, Keil Anfang (Titelbild; wertgleich bogen-2) */
  --farbe-titelbild-gruen-keil-2: var(--farbe-gruen); /* Vertrag: Titelbild Palette gruen, Keil bei 58 % (Titelbild; wertgleich gruen) */
  --farbe-titelbild-gruen-keil-3: #004534; /* Vertrag: Titelbild Palette gruen, Keil Ende (Titelbild) */
  --farbe-titelbild-graublau-glow: rgba(59,74,122,.2); /* Vertrag: Titelbild Palette graublau, Glow-Ellipse (Titelbild) */
  --farbe-titelbild-graublau-bogen-1: #2E3A66; /* Vertrag: Titelbild Palette graublau, Bogen bei 95 % (Titelbild) */
  --farbe-titelbild-graublau-bogen-2: #8894C4; /* Vertrag: Titelbild Palette graublau, Bogen bei 100 % (Titelbild) */
  --farbe-titelbild-graublau-keil-1: var(--farbe-titelbild-graublau-bogen-2); /* Vertrag: Titelbild Palette graublau, Keil Anfang (Titelbild; wertgleich bogen-2) */
  --farbe-titelbild-graublau-keil-2: #3B4A7A; /* Vertrag: Titelbild Palette graublau, Keil bei 58 % (Titelbild) */
  --farbe-titelbild-graublau-keil-3: #243059; /* Vertrag: Titelbild Palette graublau, Keil Ende (Titelbild) */
  --farbe-titelbild-chip: rgba(255,255,255,.94); /* Vertrag: Fläche des Thema-Chips im Titelbild (Titelbild) */
  --farbe-titelbild-stempel-rand: rgba(255,255,255,.7); /* Vertrag: Rand des Seitenstempels im Titelbild (Titelbild) */
  --farbe-titelbild-stempel-flaeche: rgba(11,16,32,.4); /* Vertrag: Fläche des Seitenstempels im Titelbild (Titelbild) */
  --farbe-navy-dunkel: #151C33; /* Vertrag: Fläche der dunklen Teaser (unterlagen-teaser) */
  --farbe-kategorie-backup: #4A5C8C; /* Vertrag: Kategorie BACKUP im Steckbrief der Hosting-Seite (steckbrief) */
  --farbe-code-flaeche: #0A0F1E; /* Vertrag: Fläche des Code-Panels (api-referenz) */
  --farbe-code-text: #C7D2E8; /* Vertrag: Text im Code-Panel (api-referenz) */
  --farbe-code-schluessel: #8FA6D8; /* Vertrag: Schlüssel im Code-Panel (api-referenz) */
  --farbe-code-wert: #FFB08A; /* Vertrag: Zeichenkette im Code-Panel (api-referenz) */
  --farbe-code-zahl: #F2C66D; /* Vertrag: Zahl im Code-Panel (api-referenz) */
  --farbe-code-literal: #FF8A6B; /* Vertrag: Literal true/false/null im Code-Panel (api-referenz) */
  --farbe-code-label: #8A96B8; /* Vertrag: Label im Kopf des Code-Panels (api-referenz) */
  --farbe-code-hell-wert: #9C3D10; /* Vertrag: Zeichenkette im hellen Beispielblock (api-referenz) */
  --farbe-code-hell-literal: #2B58C8; /* Vertrag: Zahl und Literal im hellen Beispielblock (api-referenz) */
  --farbe-fehler-text: #B3261E; /* Vertrag: Fehlercode und Fehlertext (api-referenz) */
  --farbe-fehler-flaeche: #FCF0EE; /* Vertrag: Fläche der Fehlerantwort und des Fehler-Codes (api-referenz) */
  --farbe-methode-patch: #8F5400; /* Vertrag: Methoden-Badge PATCH, Text (api-referenz) */
  --farbe-methode-patch-flaeche: rgba(255,150,0,.18); /* Vertrag: Methoden-Badge PATCH, Fläche (api-referenz) */
  --farbe-methode-delete: #C62828; /* Vertrag: Methoden-Badge DELETE, Text (api-referenz) */
  --farbe-methode-delete-flaeche: rgba(198,40,40,.10); /* Vertrag: Methoden-Badge DELETE, Fläche (api-referenz) */
  --farbe-methode-get-flaeche: rgba(0,180,143,.16); /* Ergänzung: Methoden-Badge GET hell, Fläche (Design API Dokumentation v2 `BADGE`) */
  --farbe-methode-post-flaeche: rgba(43,88,200,.12); /* Ergänzung: Methoden-Badge POST hell, Fläche (`BADGE`) */
  --farbe-methode-patch-voll: #9A5A00; /* Ergänzung: Methoden-Badge PATCH gefüllt auf dunkel (`BADGE_D`) */
  --farbe-code-rand: rgba(255,255,255,.09); /* Ergänzung: Rand der Code-Kästen und Methoden-Kopf im dunklen Panel */
  --farbe-code-trenner: rgba(255,255,255,.07); /* Ergänzung: Trennlinien in der Endpunkt-Liste und Kapitel-Unterkante des dunklen Panels */
  --farbe-code-scroll: #3A4466; /* Ergänzung: Rollbalken der Code-Spalte der API-Referenz */
  --farbe-navy-text-kopf: #B7C0DA; /* Ergänzung: Lead im Kopf der API-Referenz, Kopieren-Knopf, Textlink im Kopf */
  --farbe-api-reiter-ok-flaeche: rgba(0,180,143,.14); /* Ergänzung: Status-Reiter 2xx im dunklen Panel (`tabStil`) */
  --farbe-api-reiter-ok-text: #7FDCC4; /* Ergänzung: Status-Reiter 2xx, Text */
  --farbe-api-reiter-fehler-flaeche: rgba(255,60,0,.14); /* Ergänzung: Status-Reiter ab 4xx im dunklen Panel */
  --farbe-api-reiter-fehler-text: #FF9A80; /* Ergänzung: Status-Reiter ab 4xx, Text */
  --farbe-api-antwort-ok: #EEF6F2; /* Ergänzung: Zeile einer Erfolgsantwort in der Antwortliste */
  --farbe-orange-navy-eyebrow: #FF8A6B; /* Ergänzung: Eyebrow „— ENTWICKLER“ im Kopf der API-Referenz (Design API Dokumentation v2) */
  --farbe-petrol: #16323C; /* Vertrag: Fläche der Telefon-Karte (support-wege) */
  --farbe-petrol-akzent: #6FE3C4; /* Vertrag: Akzent, Nummer und Icon der Telefon-Karte (support-wege) */
  --farbe-petrol-text: #A2BCC2; /* Vertrag: Text der Telefon-Karte (support-wege) */
  --farbe-petrol-text-leise: #7C9AA2; /* Vertrag: leiser Text der Telefon-Karte, Zeiten (support-wege) */
  --farbe-petrol-hover: #FF5A26; /* Vertrag: Hover der Telefonnummer auf Petrol (support-wege; Design Support v2; 4,33:1 auf #16323C, Großtext) */
  --farbe-tab-inaktiv-hell: rgba(255, 255, 255, .55); /* Vertrag: Inaktive Tabs auf heller Fläche (kennzahl-fragen; eigene Rolle gegenüber Navy-Button-Rand) */
  --farbe-app-fehler: #DC3333; /* Vertrag: Zahl „ohne brainX“ und Fehler-Pillen der Regler-Bühnen (hero-regler; --farbe-saldo-negativ-text liegt Δ 19 im Blaukanal) */
  --farbe-element-blau: var(--farbe-app-aktion); /* Vertrag: inbox icon, contact form avatar and reminder window of the slider stages; same value as --farbe-app-aktion (hero-regler) */
  --farbe-element-violett: var(--farbe-app-bedingung); /* Vertrag: avatar of the forwarded mail on the slider stages; same value as --farbe-app-bedingung (hero-regler) */
  --farbe-element-gruen-flaeche: var(--farbe-app-etikett-gruen-flaeche); /* Vertrag: green chip and "one record" mark on the slider stages; same value as --farbe-app-etikett-gruen-flaeche (hero-regler) */
  --farbe-element-orange-zeile: var(--farbe-orange-karte); /* Vertrag: highlighted last history row on the slider stages; alias of --farbe-orange-karte (near duplicate #FFF4EF, visual change accepted) (hero-regler) */
  --farbe-element-tabelle: #1D7044; /* Vertrag: Symbol der Tabellenkalkulation auf der Vorher-Seite (hero-regler) */
  --farbe-element-zettel: #FFE79E; /* Vertrag: Klebezettel auf der Vorher-Seite (hero-regler) */
  --farbe-element-zettel-text: #5A4A18; /* Vertrag: Handschrift auf dem Klebezettel (hero-regler) */
  --farbe-element-zettel-nebentext: #9A8434; /* Vertrag: Unterzeile auf dem Klebezettel (hero-regler) */
  --farbe-element-vorher-text: var(--farbe-vgl-nebentext); /* Vertrag: mono hints and node titles of the "before" side; alias of --farbe-vgl-nebentext (near duplicate #7A8397, Δ3) (hero-regler) */
  --farbe-app-fehler-text: #C4494B; /* Vertrag: gedämpfte Fehlertexte der Vorher-Seite (hero-regler) */
  --farbe-app-chip-gelb-dunkel-text: #C98E00; /* Vertrag: Chip Messe der Regler-Bühnen, Text (hero-regler) */
  --farbe-app-chip-crimson-text: #E0245E; /* Vertrag: Chip Webseite der Regler-Bühnen, Text (hero-regler) */
  --farbe-app-chip-amber-text: #FD9917; /* Vertrag: Chip Qualifiziert und angelegt der Regler-Bühnen, Text (hero-regler) */
  --farbe-regler-bahn-flaeche: #F7E2DA; /* Vertrag: leere Bahn der Zeitleiste auf der Nachher-Seite (hero-regler) */
  --farbe-weiss-hinweis: rgba(255,255,255,.9); /* Vertrag: Fläche des Regler-Hinweises (produkt-animation) */
  --farbe-element-vorher-licht: rgba(255,255,255,.30); /* Vertrag: Lichtverlauf der Vorher-Seite (hero-regler) */
  --farbe-glow-orange-zart: rgba(255,60,0,.13); /* Vertrag: Glow der Nachher-Seite (hero-regler) */
  --farbe-app-knopf-gruen-gedrueckt: #0B8F74; /* Vertrag: gedrückter grüner Knopf der Produktvideos (.bg.dr in VS, VR, VC) (video-abschluss; VS DB) */
  --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; VS DB) */
  --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; VS DB) */
  --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; VS DB) */
  --farbe-video-umsatz: #FF5A1F; /* Vertrag: Balken der Umsatzvorschau im Produktvideo (video-abschluss; VS DB) */
  --farbe-video-warnung: #FF8A3D; /* Vertrag: Kontingentbalken über der Warnschwelle im Produktvideo (video-abschluss; VS DB) */
  --farbe-element-4b-aktion-text: var(--farbe-app-tab-text); /* Vertrag: tool texts in the record head of the 4b stages; alias of --farbe-app-tab-text (near duplicate #5A6070, Δ5; contrast 6.4:1 on white; hero-saas-4b) */
  --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; H4S DB) */
  --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; H4S DB) */
  --farbe-element-4b-einnahmen-2: #3FC9A5; /* Vertrag: Säule und Punkt Allg. Rechnungen im Cashflow der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --farbe-element-4b-einnahmen-3: #A8E6D5; /* Vertrag: Geplante Abschläge und Schraffur im Cashflow der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --farbe-element-4b-schraffur-rand: #CFEDE2; /* Vertrag: Rand der Schraffur im Cashflow der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --farbe-element-4b-ausgaben-2: #4A5796; /* Vertrag: zweite Ausgabensäule im Cashflow der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --farbe-element-4b-ausgaben-3: #7C87B8; /* Vertrag: dritte Ausgabensäule im Cashflow der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --farbe-element-4b-legende-strom: #5B68A8; /* Vertrag: Legendenpunkt Strom im Cashflow der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --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; H4S DB) */
  --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; H4S DB) */
  --farbe-element-4b-tip-linie: #3A3A3A; /* Vertrag: Trennlinie im Tooltip der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --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; H4S DB) */
  --farbe-element-4b-glow-blau: #7C8CEB; /* Vertrag: Leuchten der Ausgabensäule September der 4b-Bühnen (hero-saas-4b; H4S DB) */
  --farbe-orange-etikett: var(--farbe-app-chip-rotorange-flaeche); /* Vertrag: Etiketten KOSTEN und RISIKO (kostenkarten), Nahdublette #FFE9E0 → #FFE7DF (Δ 2) */
  --farbe-zahlband-mitte: #1A2445; /* Ergänzung: Design, Verlauf der Zahlenkarte band, Mitte bei 62 % (Loesung Vertrieb v3 „Zahlen“, Rollen) */
  --farbe-zahlband-tief: #141C36; /* Ergänzung: Design, Verlauf der Zahlenkarte band, Ende (Loesung Vertrieb v3 „Zahlen“, Rollen) */
  --farbe-mint-glow-zart: rgba(0,180,143,.10); /* Ergänzung: Design `Loesung Abrechnung v3` „Vertragsjahr“, Mint-Glow oben rechts im Terminbereich */
  --farbe-zahlband-glow: rgba(0,180,143,.26); /* Ergänzung: Design, Mint-Glow rechts unten der Zahlenkarte band (Loesung Vertrieb v3 „Zahlen“, Rollen) */
  --farbe-zahlband-pille-rand: rgba(79,216,188,.42); /* Ergänzung: Design, Rand der Pille „MIT brainX“ der Zahlenkarte band (Loesung Vertrieb v3 „Zahlen“, Rollen) */
  --farbe-umschalter-chip-rand: rgba(255,60,0,.38); /* Ergänzung: Design, Rand des Chips HEUTE im Zeilen-Umschalter (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --farbe-umschalter-chip-flaeche: rgba(255,60,0,.1); /* Ergänzung: Design, Fläche des Chips HEUTE im Zeilen-Umschalter (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --farbe-umschalter-balken-orange-ende: #FF8A5C; /* Ergänzung: Design, Ende des Balkenverlaufs im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --farbe-umschalter-balken-mint-ende: #7BF0D8; /* Ergänzung: Design, Ende des Balkenverlaufs im Zustand Mit brainX (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --farbe-umschalter-linie-orange: #FFC3B0; /* Ergänzung: Design, Linie links vom Text im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --farbe-umschalter-linie-mint: #9FE7DA; /* Ergänzung: Design, Linie links vom Text im Zustand Mit brainX (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --farbe-umschalter-karte-ende: #F4F7FB; /* Ergänzung: Design, Ende des Kartenverlaufs im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --farbe-umschalter-karte-mitte: #F8FAFD; /* Ergänzung: Design, Mitte des Kartenverlaufs im Zustand Heute (Loesung Vertrieb v3 „Umschalter“, Rollen) */

  --farbe-vertragshero-aktiv: rgba(0,180,143,.08); /* Ergänzung: aktive Zeile der Rechnungsvorschau (VF Z. 714) */
  --farbe-vertragshero-aktiv-rand: rgba(0,180,143,.45); /* Ergänzung: Rand der aktiven Zeile der Rechnungsvorschau (VF Z. 713) */
  --farbe-vertragshero-monat: rgba(255,255,255,.8); /* Ergänzung: Monat in der aktiven Datumskachel (VF Z. 711) */
  --farbe-vertragshero-puls: #8CDDCD; /* Ergänzung: Farbe des Pulspunkts bei 50 % (VF heroPuls Z. 37) */
  --farbe-steckbrief-punkt-blau: #6FA8F0; /* Ergänzung: blauer Punkt der Steckbrief-Pillen (AD Z. 130, CF Z. 105) */
  --farbe-kreis-offen: #C9CED9; /* Ergänzung: Rand des offenen Schrittkreises der Schritte-Karte (Startseite v6 S1) */
  --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) */
  --farbe-linie-hover: #C3CAD8; /* Ergänzung: Design, Rand der Vertrauenskarten im Hover (Loesung Startups v3, Z. 193) */
  --farbe-orange-blass: #FBE9E4; /* Ergänzung: Design, Pille „fehleranfällig“ der Vergleichsgrafik (kernunterschied vergleich; Loesung Abrechnung v3 Z. 135) */
  --farbe-linie-gestrichelt: #A9B2C2; /* Ergänzung: Design, gestrichelte Linie „von Hand“ der Vergleichsgrafik (Loesung Abrechnung v3 Z. 130) */
  --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) */
  --farbe-glow-mint-vergleich-aus: rgba(79,216,188,0); /* Ergänzung: Design, Ausblendung des Glows der Vergleichsgrafik */
  --farbe-kennzahl-vorher: #B6C0D2; /* Ergänzung: Automatisierung v7 Z. 688, durchgestrichener Vorherwert */
  --farbe-story-haken-gedaempft: #80BCAF; /* Ergänzung: APP Produktseite Tour v3 Z. 1317 (Grün #00795F bei Deckkraft .5 auf Weiß) */
  --farbe-story-kicker-gedaempft: #E3977F; /* Ergänzung: APP Produktseite Tour v3 Z. 1317 (Orange #C83000 bei Deckkraft .5 auf Weiß; Wert aus der Zeit vor der Angleichung von Orange-Text und Orange-Fläche, bleibt bewusst) */
  --farbe-navy-text-offen: #8F9BBC; /* Ergänzung: App oder CRM v2 Z. 123, Zeilentext im Stand-Kasten vor der Antwort */

  /* == Schrift-Familien == */
  --schrift-familie-text: 'Modern Era', Archivo, system-ui, sans-serif; /* Spec: Website, Hausschrift Modern Era, Archivo als Ausweichschrift (design.md Z. 42) */
  --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 */
  --schrift-familie-fremd-grotesk: 'Helvetica Neue', Arial, sans-serif; /* Vertrag: nachgestelltes Website-Formular, Systemschrift ohne Laden */
  --schrift-familie-fremd-serif: Georgia, serif; /* Vertrag: nachgestelltes Website-Formular, Systemschrift ohne Laden */
  /* == Schriftstufen == */
  /* Roles shared by several files or rescaled by the mobile layer; type values of a single block live as local variables (--_…) in its CSS. */
  --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 */
  --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-button-cta-gewicht: 700; /* Ergänzung: buttons in the navy closing section and the industry hero (16.5 px); weight as --schrift-button-gewicht */
  --schrift-button-cta-groesse: 16.5px; /* Ergänzung: buttons in the navy closing section and the industry hero (16.5 px) */
  --schrift-button-cta-zeile: normal; /* Ergänzung: buttons in the navy closing section and the industry hero (16.5 px); line height as --schrift-button-zeile */
  --schrift-button-cta-laufweite: 0; /* Ergänzung: buttons in the navy closing section and the industry hero (16.5 px); letter spacing as --schrift-button-laufweite */
  --schrift-button-cta-raster-gewicht: 700; /* Ergänzung: navy closing section in a grid with two buttons (16 px); weight as --schrift-button-gewicht */
  --schrift-button-cta-raster-groesse: 16px; /* Ergänzung: navy closing section in a grid with two buttons (16 px) */
  --schrift-button-cta-raster-zeile: normal; /* Ergänzung: navy closing section in a grid with two buttons (16 px); line height as --schrift-button-zeile */
  --schrift-button-cta-raster-laufweite: 0; /* Ergänzung: navy closing section in a grid with two buttons (16 px); letter spacing as --schrift-button-laufweite */
  --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: main menu items */
  --schrift-menue-punkt-groesse: 15px; /* Vertrag: main menu items */
  --schrift-menue-punkt-zeile: normal; /* Vertrag: main menu items */
  --schrift-menue-punkt-laufweite: 0; /* Vertrag: main menu items */
  --schrift-menue-eintrag-gewicht: 600; /* Vertrag: entries of the menu panels */
  --schrift-menue-eintrag-groesse: 14.5px; /* Vertrag: entries of the menu panels */
  --schrift-menue-eintrag-zeile: 1.35; /* Vertrag: entries of the menu panels */
  --schrift-menue-eintrag-laufweite: 0; /* Vertrag: entries of the menu panels */
  --schrift-menue-beschreibung-gewicht: 400; /* Vertrag: sub-lines of the menu panels */
  --schrift-menue-beschreibung-groesse: 12.5px; /* Vertrag: sub-lines of the menu panels */
  --schrift-menue-beschreibung-zeile: 1.45; /* Vertrag: sub-lines of the menu panels */
  --schrift-menue-beschreibung-laufweite: 0; /* Vertrag: sub-lines of the menu panels */
  --schrift-menue-label-gewicht: 700; /* Vertrag: column labels of the menu, upper case via CSS */
  --schrift-menue-label-groesse: 11px; /* Vertrag: column labels of the menu, upper case via CSS */
  --schrift-menue-label-zeile: normal; /* Vertrag: column labels of the menu, upper case via CSS */
  --schrift-menue-label-laufweite: 1.2px; /* Vertrag: column labels of the menu, upper case via CSS */
  --schrift-kopf-cta-gewicht: 600; /* Vertrag: header CTA at rest */
  --schrift-kopf-cta-groesse: 15px; /* Vertrag: header CTA at rest */
  --schrift-kopf-cta-zeile: normal; /* Vertrag: header CTA at rest */
  --schrift-kopf-cta-laufweite: 0; /* Vertrag: header CTA at rest */
  --schrift-fuss-kopf-gewicht: 700; /* Vertrag: column titles in the footer */
  --schrift-fuss-kopf-groesse: 13px; /* Vertrag: column titles in the footer */
  --schrift-fuss-kopf-zeile: normal; /* Vertrag: column titles in the footer */
  --schrift-fuss-kopf-laufweite: 1px; /* Vertrag: column titles in the footer */
  --schrift-fuss-link-gewicht: 400; /* Vertrag: links in the footer */
  --schrift-fuss-link-groesse: 14px; /* Vertrag: links in the footer */
  --schrift-fuss-link-zeile: normal; /* Vertrag: links in the footer */
  --schrift-fuss-link-laufweite: 0; /* Vertrag: links in the footer */
  --schrift-brotkrumen-gewicht: 500; /* Vertrag: breadcrumbs, mono */
  --schrift-brotkrumen-groesse: 12.5px; /* Vertrag: breadcrumbs, mono */
  --schrift-brotkrumen-zeile: 1.36; /* Vertrag: breadcrumbs, mono; fixed JetBrains Mono line height (17 px at 12.5 px) avoids a layout shift when the font swaps */
  --schrift-brotkrumen-laufweite: 0.4px; /* Vertrag: breadcrumbs, mono */
  --schrift-burger-gruppe-gewicht: 600; /* Vertrag: group titles in the burger menu */
  --schrift-burger-gruppe-groesse: 17px; /* Vertrag: group titles in the burger menu */
  --schrift-burger-gruppe-zeile: normal; /* Vertrag: group titles in the burger menu */
  --schrift-burger-gruppe-laufweite: 0; /* Vertrag: group titles in the burger menu */
  --schrift-burger-eintrag-gewicht: 600; /* Vertrag: entries in the burger menu */
  --schrift-burger-eintrag-groesse: 15px; /* Vertrag: entries in the burger menu */
  --schrift-burger-eintrag-zeile: 1.35; /* Vertrag: entries in the burger menu */
  --schrift-burger-eintrag-laufweite: 0; /* Vertrag: entries in the burger menu */
  --schrift-burger-beschreibung-gewicht: 400; /* Vertrag: sub-lines in the burger menu */
  --schrift-burger-beschreibung-groesse: 13px; /* Vertrag: sub-lines in the burger menu */
  --schrift-burger-beschreibung-zeile: 1.45; /* Vertrag: sub-lines in the burger menu */
  --schrift-burger-beschreibung-laufweite: 0; /* Vertrag: sub-lines in the burger menu */
  --schrift-menue-intro-titel-gewicht: 700; /* Vertrag: intro title in the product panel */
  --schrift-menue-intro-titel-groesse: 19px; /* Vertrag: intro title in the product panel */
  --schrift-menue-intro-titel-zeile: 1.28; /* Vertrag: intro title in the product panel */
  --schrift-menue-intro-titel-laufweite: 0; /* Vertrag: intro title in the product panel */
  --schrift-social-gewicht: 600; /* Vertrag: social buttons in the footer */
  --schrift-social-groesse: 13.5px; /* Vertrag: social buttons in the footer */
  --schrift-social-zeile: normal; /* Vertrag: social buttons in the footer */
  --schrift-social-laufweite: 0; /* Vertrag: social buttons in the footer */
  --schrift-treffer-titel-gewicht: 700; /* Vertrag: title of the hit card */
  --schrift-treffer-titel-groesse: 17.5px; /* Vertrag: title of the hit card */
  --schrift-treffer-titel-zeile: 1.35; /* Vertrag: title of the hit card */
  --schrift-treffer-titel-laufweite: 0; /* Vertrag: title of the hit card */
  --schrift-suchpfad-gewicht: 500; /* Vertrag: path line of the hits, mono */
  --schrift-suchpfad-groesse: 11.5px; /* Vertrag: path line of the hits, mono */
  --schrift-suchpfad-zeile: 1.3; /* Vertrag: path line of the hits, mono */
  --schrift-suchpfad-laufweite: 0; /* Vertrag: path line of the hits, mono */
  --schrift-suchfeld-gewicht: 400; /* Vertrag: search field in the header */
  --schrift-suchfeld-groesse: 14px; /* Vertrag: search field in the header */
  --schrift-suchfeld-zeile: normal; /* Vertrag: search field in the header */
  --schrift-suchfeld-laufweite: 0; /* Vertrag: search field in the header */
  --schrift-suchfeld-gross-gewicht: 400; /* Vertrag: search field of the search page and the burger menu */
  --schrift-suchfeld-gross-groesse: 16px; /* Vertrag: search field of the search page and the burger menu */
  --schrift-suchfeld-gross-zeile: normal; /* Vertrag: search field of the search page and the burger menu */
  --schrift-suchfeld-gross-laufweite: 0; /* Vertrag: search field of the search page and the burger menu */
  --schrift-kopf-cta-kompakt-gewicht: 600; /* Vertrag: header CTA in compact mode */
  --schrift-kopf-cta-kompakt-groesse: 13.5px; /* Vertrag: header CTA in compact mode */
  --schrift-kopf-cta-kompakt-zeile: normal; /* Vertrag: header CTA in compact mode */
  --schrift-kopf-cta-kompakt-laufweite: 0; /* Vertrag: header CTA in compact mode */
  --schrift-menue-link-gewicht: 600; /* Vertrag: quick links and the integrations line in the panel */
  --schrift-menue-link-groesse: 13.5px; /* Vertrag: quick links and the integrations line in the panel */
  --schrift-menue-link-zeile: normal; /* Vertrag: quick links and the integrations line in the panel */
  --schrift-menue-link-laufweite: 0; /* Vertrag: quick links and the integrations line in the panel */
  --schrift-menue-aktion-gewicht: 700; /* Vertrag: action links in the menu panel */
  --schrift-menue-aktion-groesse: 13.5px; /* Vertrag: action links in the menu panel */
  --schrift-menue-aktion-zeile: normal; /* Vertrag: action links in the menu panel */
  --schrift-menue-aktion-laufweite: 0; /* Vertrag: action links in the menu panel */
  --schrift-menue-intro-text-gewicht: 400; /* Vertrag: body text in the intro of the product panel */
  --schrift-menue-intro-text-groesse: 13.5px; /* Vertrag: body text in the intro of the product panel */
  --schrift-menue-intro-text-zeile: 1.55; /* Vertrag: body text in the intro of the product panel */
  --schrift-menue-intro-text-laufweite: 0; /* Vertrag: body text in the intro of the product panel */
  --schrift-menue-teaser-titel-gewicht: 600; /* Vertrag: title of the startup promo and the story teaser in the panel */
  --schrift-menue-teaser-titel-groesse: 14px; /* Vertrag: title of the startup promo and the story teaser in the panel */
  --schrift-menue-teaser-titel-zeile: 1.4; /* Vertrag: title of the startup promo and the story teaser in the panel */
  --schrift-menue-teaser-titel-laufweite: 0; /* Vertrag: title of the startup promo and the story teaser in the panel */
  --schrift-menue-teaser-label-gewicht: 700; /* Vertrag: label of the story teaser, upper case via CSS */
  --schrift-menue-teaser-label-groesse: 10.5px; /* Vertrag: label of the story teaser, upper case via CSS */
  --schrift-menue-teaser-label-zeile: normal; /* Vertrag: label of the story teaser, upper case via CSS */
  --schrift-menue-teaser-label-laufweite: 1.3px; /* Vertrag: label of the story teaser, upper case via CSS */
  --schrift-fuss-text-gewicht: 400; /* Vertrag: brand description in the footer */
  --schrift-fuss-text-groesse: 14px; /* Vertrag: brand description in the footer */
  --schrift-fuss-text-zeile: 1.6; /* Vertrag: brand description in the footer */
  --schrift-fuss-text-laufweite: 0; /* Vertrag: brand description in the footer */
  --schrift-fuss-label-gewicht: 700; /* Vertrag: "follow us" and newsletter labels in the footer, mono */
  --schrift-fuss-label-groesse: 11.5px; /* Vertrag: "follow us" and newsletter labels in the footer, mono */
  --schrift-fuss-label-zeile: normal; /* Vertrag: "follow us" and newsletter labels in the footer, mono */
  --schrift-fuss-label-laufweite: 1.4px; /* Vertrag: "follow us" and newsletter labels in the footer, mono */
  --schrift-fuss-recht-gewicht: 400; /* Vertrag: bottom line of the footer: copyright and legal links */
  --schrift-fuss-recht-groesse: 13px; /* Vertrag: bottom line of the footer: copyright and legal links */
  --schrift-fuss-recht-zeile: 1.5; /* Vertrag: bottom line of the footer: copyright and legal links */
  --schrift-fuss-recht-laufweite: 0; /* Vertrag: bottom line of the footer: copyright and legal links */
  --schrift-fuss-feld-gewicht: 400; /* Vertrag: newsletter e-mail field in the footer */
  --schrift-fuss-feld-groesse: 13.5px; /* Vertrag: newsletter e-mail field in the footer */
  --schrift-fuss-feld-zeile: normal; /* Vertrag: newsletter e-mail field in the footer */
  --schrift-fuss-feld-laufweite: 0; /* Vertrag: newsletter e-mail field in the footer */
  --schrift-fuss-einwilligung-gewicht: 400; /* Vertrag: newsletter consent text in the footer */
  --schrift-fuss-einwilligung-groesse: 11.5px; /* Vertrag: newsletter consent text in the footer */
  --schrift-fuss-einwilligung-zeile: 1.45; /* Vertrag: newsletter consent text in the footer */
  --schrift-fuss-einwilligung-laufweite: 0; /* Vertrag: newsletter consent text in the footer */
  --schrift-fuss-fehler-gewicht: 500; /* Vertrag: newsletter error line in the footer */
  --schrift-fuss-fehler-groesse: 12px; /* Vertrag: newsletter error line in the footer */
  --schrift-fuss-fehler-zeile: 1.4; /* Vertrag: newsletter error line in the footer */
  --schrift-fuss-fehler-laufweite: 0; /* Vertrag: newsletter error line in the footer */
  --schrift-suchpanel-filter-gewicht: 600; /* Vertrag: section filter in the header search panel */
  --schrift-suchpanel-filter-groesse: 13.5px; /* Vertrag: section filter in the header search panel */
  --schrift-suchpanel-filter-zeile: normal; /* Vertrag: section filter in the header search panel */
  --schrift-suchpanel-filter-laufweite: 0; /* Vertrag: section filter in the header search panel */
  --schrift-suchpanel-alle-gewicht: 700; /* Vertrag: "all results" link in the header search panel */
  --schrift-suchpanel-alle-groesse: 13px; /* Vertrag: "all results" link in the header search panel */
  --schrift-suchpanel-alle-zeile: normal; /* Vertrag: "all results" link in the header search panel */
  --schrift-suchpanel-alle-laufweite: 0; /* Vertrag: "all results" link in the header search panel */
  --schrift-suchpanel-vorschlag-gewicht: 600; /* Vertrag: suggestion chips in the header search panel */
  --schrift-suchpanel-vorschlag-groesse: 12.5px; /* Vertrag: suggestion chips in the header search panel */
  --schrift-suchpanel-vorschlag-zeile: normal; /* Vertrag: suggestion chips in the header search panel */
  --schrift-suchpanel-vorschlag-laufweite: 0; /* Vertrag: suggestion chips in the header search panel */
  --schrift-suchpanel-treffer-titel-gewicht: 600; /* Vertrag: hit title in the header search panel */
  --schrift-suchpanel-treffer-titel-groesse: 15px; /* Vertrag: hit title in the header search panel */
  --schrift-suchpanel-treffer-titel-zeile: 1.35; /* Vertrag: hit title in the header search panel */
  --schrift-suchpanel-treffer-titel-laufweite: 0; /* Vertrag: hit title in the header search panel */
  --schrift-suchpanel-treffer-beschreibung-gewicht: 400; /* Vertrag: hit description in the header search panel */
  --schrift-suchpanel-treffer-beschreibung-groesse: 12.5px; /* Vertrag: hit description in the header search panel */
  --schrift-suchpanel-treffer-beschreibung-zeile: 1.5; /* Vertrag: hit description in the header search panel */
  --schrift-suchpanel-treffer-beschreibung-laufweite: 0; /* Vertrag: hit description in the header search panel */
  --schrift-suchleer-gross-gewicht: 400; /* Vertrag: notice without hits on the search page */
  --schrift-suchleer-gross-groesse: 15px; /* Vertrag: notice without hits on the search page */
  --schrift-suchleer-gross-zeile: 1.55; /* Vertrag: notice without hits on the search page */
  --schrift-suchleer-gross-laufweite: 0; /* Vertrag: notice without hits on the search page */
  --schrift-suchfilter-zahl-gewicht: 500; /* Vertrag: hit count in the section filter, header search panel and search page, mono */
  --schrift-suchfilter-zahl-groesse: 12px; /* Vertrag: hit count in the section filter, header search panel and search page, mono */
  --schrift-suchfilter-zahl-zeile: normal; /* Vertrag: hit count in the section filter, header search panel and search page, mono */
  --schrift-suchfilter-zahl-laufweite: 0; /* Vertrag: hit count in the section filter, header search panel and search page, mono */
  --schrift-treffer-beschreibung-gewicht: 400; /* Vertrag: description of the hit card on the search page */
  --schrift-treffer-beschreibung-groesse: 14px; /* Vertrag: description of the hit card on the search page */
  --schrift-treffer-beschreibung-zeile: 1.55; /* Vertrag: description of the hit card on the search page */
  --schrift-treffer-beschreibung-laufweite: 0; /* Vertrag: description of the hit card on the search page */
  --schrift-suchvorschlag-gewicht: 600; /* Vertrag: suggestion chips on the search page */
  --schrift-suchvorschlag-groesse: 13px; /* Vertrag: suggestion chips on the search page */
  --schrift-suchvorschlag-zeile: normal; /* Vertrag: suggestion chips on the search page */
  --schrift-suchvorschlag-laufweite: 0; /* Vertrag: suggestion chips on the search page */
  --schrift-suchhilfe-titel-gewicht: 700; /* Vertrag: title of the help band below the hits */
  --schrift-suchhilfe-titel-groesse: 16px; /* Vertrag: title of the help band below the hits */
  --schrift-suchhilfe-titel-zeile: normal; /* Vertrag: title of the help band below the hits */
  --schrift-suchhilfe-titel-laufweite: 0; /* Vertrag: title of the help band below the hits */
  --schrift-suchhilfe-text-gewicht: 400; /* Vertrag: text of the help band below the hits */
  --schrift-suchhilfe-text-groesse: 14px; /* Vertrag: text of the help band below the hits */
  --schrift-suchhilfe-text-zeile: 1.5; /* Vertrag: text of the help band below the hits */
  --schrift-suchhilfe-text-laufweite: 0; /* Vertrag: text of the help band below the hits */
  --schrift-sitemap-nummer-gewicht: 700; /* Ergänzung: HTML sitemap, section number */
  --schrift-sitemap-nummer-groesse: 11px; /* Ergänzung: HTML sitemap, section number */
  --schrift-sitemap-nummer-zeile: normal; /* Ergänzung: HTML sitemap, section number */
  --schrift-sitemap-nummer-laufweite: 1.2px; /* Ergänzung: HTML sitemap, section number */
  --schrift-sitemap-bereichstitel-gewicht: 700; /* Ergänzung: HTML sitemap, section title */
  --schrift-sitemap-bereichstitel-groesse: 15px; /* Ergänzung: HTML sitemap, section title */
  --schrift-sitemap-bereichstitel-zeile: normal; /* Ergänzung: HTML sitemap, section title */
  --schrift-sitemap-bereichstitel-laufweite: 0; /* Ergänzung: HTML sitemap, section title */
  --schrift-sitemap-zahl-gewicht: 500; /* Ergänzung: HTML sitemap, count in the section head */
  --schrift-sitemap-zahl-groesse: 10.5px; /* Ergänzung: HTML sitemap, count in the section head */
  --schrift-sitemap-zahl-zeile: normal; /* Ergänzung: HTML sitemap, count in the section head */
  --schrift-sitemap-zahl-laufweite: 0; /* Ergänzung: HTML sitemap, count in the section head */
  --schrift-fehler-pfad-gewicht: 500; /* Vertrag: error pages, section path of the cards, mono */
  --schrift-fehler-pfad-groesse: 12px; /* Vertrag: error pages, section path of the cards, mono */
  --schrift-fehler-pfad-zeile: normal; /* Vertrag: error pages, section path of the cards, mono */
  --schrift-fehler-pfad-laufweite: 0; /* Vertrag: error pages, section path of the cards, mono */
  --schrift-fehler-treffer-text-gewicht: 400; /* Vertrag: error pages, description of the "did you mean" card */
  --schrift-fehler-treffer-text-groesse: 16px; /* Vertrag: error pages, description of the "did you mean" card */
  --schrift-fehler-treffer-text-zeile: 1.55; /* Vertrag: error pages, description of the "did you mean" card */
  --schrift-fehler-treffer-text-laufweite: 0; /* Vertrag: error pages, description of the "did you mean" card */
  --schrift-fehler-hinweis-titel-gewicht: 800; /* Vertrag: error pages, title "no unique page found" */
  --schrift-fehler-hinweis-titel-groesse: 20px; /* Vertrag: error pages, title "no unique page found" */
  --schrift-fehler-hinweis-titel-zeile: 1.3; /* Vertrag: error pages, title "no unique page found" */
  --schrift-fehler-hinweis-titel-laufweite: 0; /* Vertrag: error pages, title "no unique page found" */
  --schrift-feld-label-gewicht: 600; /* Vertrag: visible field label, also the search field of the 404 page */
  --schrift-feld-label-groesse: 13.5px; /* Vertrag: visible field label, also the search field of the 404 page */
  --schrift-feld-label-zeile: normal; /* Vertrag: visible field label, also the search field of the 404 page */
  --schrift-feld-label-laufweite: 0; /* Vertrag: visible field label, also the search field of the 404 page */
  --schrift-fehler-link-gewicht: 500; /* Vertrag: error pages, links of the section cards */
  --schrift-fehler-link-groesse: 14.5px; /* Vertrag: error pages, links of the section cards */
  --schrift-fehler-link-zeile: 1.4; /* Vertrag: error pages, links of the section cards */
  --schrift-fehler-link-laufweite: 0; /* Vertrag: error pages, links of the section cards */
  --schrift-fehler-anlass-titel-gewicht: 800; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 */
  --schrift-fehler-anlass-titel-groesse: 24px; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 */
  --schrift-fehler-anlass-titel-zeile: 1.25; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 */
  --schrift-fehler-anlass-titel-laufweite: -0.5px; /* Vertrag: Fehlerseiten, Titel des Anlasses der 410 */
  --schrift-fehler-anlass-text-gewicht: 400; /* Vertrag: error pages, reason text of the 410 page */
  --schrift-fehler-anlass-text-groesse: 16.5px; /* Vertrag: error pages, reason text of the 410 page */
  --schrift-fehler-anlass-text-zeile: 1.62; /* Vertrag: error pages, reason text of the 410 page */
  --schrift-fehler-anlass-text-laufweite: 0; /* Vertrag: error pages, reason text of the 410 page */
  --schrift-fehler-entfernt-gewicht: 500; /* Vertrag: error pages, removed address on the 410 page, mono */
  --schrift-fehler-entfernt-groesse: 13.5px; /* Vertrag: error pages, removed address on the 410 page, mono */
  --schrift-fehler-entfernt-zeile: 1.45; /* Vertrag: error pages, removed address on the 410 page, mono */
  --schrift-fehler-entfernt-laufweite: 0; /* Vertrag: error pages, removed address on the 410 page, mono */
  --schrift-fehler-ersatz-titel-gewicht: 800; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 */
  --schrift-fehler-ersatz-titel-groesse: 26px; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 */
  --schrift-fehler-ersatz-titel-zeile: 1.2; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 */
  --schrift-fehler-ersatz-titel-laufweite: -0.6px; /* Vertrag: Fehlerseiten, Titel der Karte „Stattdessen“ der 410 */
  --schrift-hero-gross-gewicht: 800; /* Vertrag: H1 on the about page and the home page */
  --schrift-hero-gross-groesse: clamp(40px, 4.7vw, 68px); /* Vertrag: H1 on the about page and the home page */
  --schrift-hero-gross-zeile: 1.04; /* Vertrag: H1 on the about page and the home page */
  --schrift-hero-gross-laufweite: -2.4px; /* Vertrag: H1 on the about page and the home page */
  --schrift-lead-gross-gewicht: 400; /* Vertrag: lead in the about hero */
  --schrift-lead-gross-groesse: 20px; /* Vertrag: lead in the about hero */
  --schrift-lead-gross-zeile: 1.6; /* Vertrag: lead in the about hero */
  --schrift-lead-gross-laufweite: 0; /* Vertrag: lead in the about hero */
  --schrift-kapitel-jahr-gewicht: 800; /* Vertrag: Jahr in der Kapitelleiste */
  --schrift-kapitel-jahr-groesse: 32px; /* Vertrag: Jahr in der Kapitelleiste */
  --schrift-kapitel-jahr-zeile: 1; /* Vertrag: Jahr in der Kapitelleiste */
  --schrift-kapitel-jahr-laufweite: -1.2px; /* Vertrag: Jahr in der Kapitelleiste */
  --schrift-kapitel-titel-gewicht: 500; /* Vertrag: title in the chapter bar */
  --schrift-kapitel-titel-groesse: 15px; /* Vertrag: title in the chapter bar */
  --schrift-kapitel-titel-zeile: 1.45; /* Vertrag: title in the chapter bar */
  --schrift-kapitel-titel-laufweite: 0; /* Vertrag: title in the chapter bar */
  --schrift-jahr-gross-gewicht: 800; /* Vertrag: großes Jahr „2014“ */
  --schrift-jahr-gross-groesse: 96px; /* Vertrag: großes Jahr „2014“ */
  --schrift-jahr-gross-zeile: .9; /* Vertrag: großes Jahr „2014“ */
  --schrift-jahr-gross-laufweite: -4px; /* Vertrag: großes Jahr „2014“ */
  --schrift-text-gross-gewicht: 400; /* Vertrag: first paragraph of a chapter */
  --schrift-text-gross-groesse: 19px; /* Vertrag: first paragraph of a chapter */
  --schrift-text-gross-zeile: 1.62; /* Vertrag: first paragraph of a chapter */
  --schrift-text-gross-laufweite: 0; /* Vertrag: first paragraph of a chapter */
  --schrift-zitat-mittel-gewicht: 500; /* Vertrag: idea box */
  --schrift-zitat-mittel-groesse: 21px; /* Vertrag: idea box */
  --schrift-zitat-mittel-zeile: 1.55; /* Vertrag: idea box */
  --schrift-zitat-mittel-laufweite: -0.3px; /* Vertrag: idea box */
  --schrift-zitat-gross-gewicht: 600; /* Vertrag: Zitat linksbalken und navy-* */
  --schrift-zitat-gross-groesse: 25px; /* Vertrag: Zitat linksbalken und navy-* */
  --schrift-zitat-gross-zeile: 1.42; /* Vertrag: Zitat linksbalken und navy-* */
  --schrift-zitat-gross-laufweite: -0.5px; /* Vertrag: Zitat linksbalken und navy-* */
  --schrift-aussage-gewicht: 800; /* Vertrag: Aussagenliste */
  --schrift-aussage-groesse: 40px; /* Vertrag: Aussagenliste */
  --schrift-aussage-zeile: 1.1; /* Vertrag: Aussagenliste */
  --schrift-aussage-laufweite: -1.6px; /* Vertrag: Aussagenliste */
  --schrift-h3-gross-gewicht: 800; /* Vertrag: Grafik-Titel, cta-titel der Bänder */
  --schrift-h3-gross-groesse: 24px; /* Vertrag: Grafik-Titel, cta-titel der Bänder */
  --schrift-h3-gross-zeile: 1.25; /* Vertrag: Grafik-Titel, cta-titel der Bänder */
  --schrift-h3-gross-laufweite: -0.6px; /* Vertrag: Grafik-Titel, cta-titel der Bänder */
  --schrift-person-name-gewicht: 800; /* Vertrag: name on the founder card */
  --schrift-person-name-groesse: 16.5px; /* Vertrag: name on the founder card */
  --schrift-person-name-zeile: normal; /* Vertrag: name on the founder card */
  --schrift-person-name-laufweite: -0.3px; /* Vertrag: name on the founder card */
  --schrift-person-rolle-gewicht: 500; /* Vertrag: role on the founder card */
  --schrift-person-rolle-groesse: 13px; /* Vertrag: role on the founder card */
  --schrift-person-rolle-zeile: 1.5; /* Vertrag: role on the founder card */
  --schrift-person-rolle-laufweite: 0; /* Vertrag: role on the founder card */
  --schrift-person-name-klein-gewicht: 700; /* Vertrag: name on the person tiles and in the grid */
  --schrift-person-name-klein-groesse: 15px; /* Vertrag: name on the person tiles and in the grid */
  --schrift-person-name-klein-zeile: 1.3; /* Vertrag: name on the person tiles and in the grid */
  --schrift-person-name-klein-laufweite: 0; /* Vertrag: name on the person tiles and in the grid */
  --schrift-person-rolle-klein-gewicht: 400; /* Vertrag: role on the person tiles and in the grid */
  --schrift-person-rolle-klein-groesse: 12.5px; /* Vertrag: role on the person tiles and in the grid */
  --schrift-person-rolle-klein-zeile: 1.45; /* Vertrag: role on the person tiles and in the grid */
  --schrift-person-rolle-klein-laufweite: 0; /* Vertrag: role on the person tiles and in the grid */
  --schrift-monogramm-gewicht: 800; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48) */
  --schrift-monogramm-groesse: 40px; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48) */
  --schrift-monogramm-zeile: normal; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48) */
  --schrift-monogramm-laufweite: -1.5px; /* Vertrag: Monogramm im Team-Raster, Zeile nach Design (Team Z. 48) */
  --schrift-kennzahl-gewicht: 800; /* Vertrag: Wert im Kennzahlen-Raster */
  --schrift-kennzahl-groesse: 30px; /* Vertrag: Wert im Kennzahlen-Raster */
  --schrift-kennzahl-zeile: 1; /* Vertrag: Wert im Kennzahlen-Raster */
  --schrift-kennzahl-laufweite: -1.1px; /* Vertrag: Wert im Kennzahlen-Raster */
  --schrift-kennzahl-text-gewicht: 400; /* Vertrag: text in the key figure grid */
  --schrift-kennzahl-text-groesse: 13.5px; /* Vertrag: text in the key figure grid */
  --schrift-kennzahl-text-zeile: 1.6; /* Vertrag: text in the key figure grid */
  --schrift-kennzahl-text-laufweite: 0; /* Vertrag: text in the key figure grid */
  --schrift-trust-pille-gewicht: 500; /* Vertrag: trust pills */
  --schrift-trust-pille-groesse: 13.5px; /* Vertrag: trust pills */
  --schrift-trust-pille-zeile: normal; /* Vertrag: trust pills */
  --schrift-trust-pille-laufweite: 0; /* Vertrag: trust pills */
  --schrift-karte-titel-gewicht: 800; /* Vertrag: card title */
  --schrift-karte-titel-groesse: 21px; /* Vertrag: card title */
  --schrift-karte-titel-zeile: 1.25; /* Vertrag: card title */
  --schrift-karte-titel-laufweite: -0.6px; /* Vertrag: card title */
  --schrift-karte-ziffer-gewicht: 800; /* Ergänzung: number of the cards with the head on the left */
  --schrift-karte-ziffer-groesse: 22px; /* Ergänzung: number of the cards with the head on the left */
  --schrift-karte-ziffer-zeile: 1; /* Ergänzung: number of the cards with the head on the left */
  --schrift-karte-ziffer-laufweite: 0; /* Ergänzung: number of the cards with the head on the left */
  --schrift-karte-text-gewicht: 400; /* Vertrag: card text */
  --schrift-karte-text-groesse: 14.5px; /* Vertrag: card text */
  --schrift-karte-text-zeile: 1.65; /* Vertrag: card text */
  --schrift-karte-text-laufweite: 0; /* Vertrag: card text */
  --schrift-tabelle-name-groesse: 12.5px; /* Ergänzung: contract name in the C-level table */
  --schrift-tabelle-name-zeile: normal; /* Ergänzung: contract name in the C-level table */
  --schrift-tabelle-name-laufweite: 0; /* Ergänzung: contract name in the C-level table */
  --schrift-tabelle-name-gewicht: 600; /* Ergänzung: contract name in the C-level table */
  --schrift-faq-frage-gewicht: 700; /* Vertrag: FAQ question */
  --schrift-faq-frage-groesse: 17.5px; /* Vertrag: FAQ question */
  --schrift-faq-frage-zeile: 1.4; /* Vertrag: FAQ question */
  --schrift-faq-frage-laufweite: -0.2px; /* Vertrag: FAQ question */
  --schrift-faq-antwort-gewicht: 400; /* Vertrag: FAQ answer */
  --schrift-faq-antwort-groesse: 15.5px; /* Vertrag: FAQ answer */
  --schrift-faq-antwort-zeile: 1.65; /* Vertrag: FAQ answer */
  --schrift-faq-antwort-laufweite: 0; /* Vertrag: FAQ answer */
  --schrift-trust-titel-gewicht: 800; /* Vertrag: title of the trust list */
  --schrift-trust-titel-groesse: 17px; /* Vertrag: title of the trust list */
  --schrift-trust-titel-zeile: normal; /* Vertrag: title of the trust list */
  --schrift-trust-titel-laufweite: 0; /* Vertrag: title of the trust list */
  --schrift-trust-text-gewicht: 400; /* Vertrag: text of the trust list */
  --schrift-trust-text-groesse: 14.5px; /* Vertrag: text of the trust list */
  --schrift-trust-text-zeile: 1.5; /* Vertrag: text of the trust list */
  --schrift-trust-text-laufweite: 0; /* Vertrag: text of the trust list */
  --schrift-trust-chip-gewicht: 600; /* Vertrag: chips of the trust blocks */
  --schrift-trust-chip-groesse: 13.5px; /* Vertrag: chips of the trust blocks */
  --schrift-trust-chip-zeile: normal; /* Vertrag: chips of the trust blocks */
  --schrift-trust-chip-laufweite: 0; /* Vertrag: chips of the trust blocks */
  --schrift-anfuehrung-gewicht: 800; /* Vertrag: Anführungszeichen der Zitate */
  --schrift-anfuehrung-groesse: 40px; /* Vertrag: Anführungszeichen der Zitate */
  --schrift-anfuehrung-zeile: 1; /* Vertrag: Anführungszeichen der Zitate */
  --schrift-anfuehrung-laufweite: 0; /* Vertrag: Anführungszeichen der Zitate */
  --schrift-monogramm-mittel-gewicht: 800; /* Vertrag: medium monogram (avatars) */
  --schrift-monogramm-mittel-groesse: 18px; /* Vertrag: medium monogram (avatars) */
  --schrift-monogramm-mittel-zeile: normal; /* Vertrag: medium monogram (avatars) */
  --schrift-monogramm-mittel-laufweite: -0.4px; /* Vertrag: medium monogram (avatars) */
  --schrift-monogramm-klein-gewicht: 800; /* Vertrag: small monogram (avatars) */
  --schrift-monogramm-klein-groesse: 15px; /* Vertrag: small monogram (avatars) */
  --schrift-monogramm-klein-zeile: normal; /* Vertrag: small monogram (avatars) */
  --schrift-monogramm-klein-laufweite: -0.4px; /* Vertrag: small monogram (avatars) */
  --schrift-linkedin-marke-gewicht: 800; /* Vertrag: LinkedIn mark on the tiles, mono */
  --schrift-linkedin-marke-groesse: 9.5px; /* Vertrag: LinkedIn mark on the tiles, mono */
  --schrift-linkedin-marke-zeile: normal; /* Vertrag: LinkedIn mark on the tiles, mono */
  --schrift-linkedin-marke-laufweite: 0.2px; /* Vertrag: LinkedIn mark on the tiles, mono */
  --schrift-zertifikat-kicker-gewicht: 500; /* Vertrag: kicker of the certificate tile, mono */
  --schrift-zertifikat-kicker-groesse: 9px; /* Vertrag: kicker of the certificate tile, mono */
  --schrift-zertifikat-kicker-zeile: normal; /* Vertrag: kicker of the certificate tile, mono */
  --schrift-zertifikat-kicker-laufweite: 1.3px; /* Vertrag: kicker of the certificate tile, mono */
  --schrift-zertifikat-text-gewicht: 400; /* Vertrag: text of the certificate tile */
  --schrift-zertifikat-text-groesse: 11.5px; /* Vertrag: text of the certificate tile */
  --schrift-zertifikat-text-zeile: 1.4; /* Vertrag: text of the certificate tile */
  --schrift-zertifikat-text-laufweite: 0; /* Vertrag: text of the certificate tile */
  --schrift-karte-pille-gewicht: 700; /* Vertrag: card pill, mono */
  --schrift-karte-pille-groesse: 11px; /* Vertrag: card pill, mono */
  --schrift-karte-pille-zeile: normal; /* Vertrag: card pill, mono */
  --schrift-karte-pille-laufweite: 0.6px; /* Vertrag: card pill, mono */
  --schrift-karte-klein-titel-gewicht: 700; /* Vertrag: title of the small cards */
  --schrift-karte-klein-titel-groesse: 14px; /* Vertrag: title of the small cards */
  --schrift-karte-klein-titel-zeile: normal; /* Vertrag: title of the small cards */
  --schrift-karte-klein-titel-laufweite: -0.2px; /* Vertrag: title of the small cards */
  --schrift-karte-kopf-klein-gewicht: 700; /* Vertrag: head of the small cards */
  --schrift-karte-kopf-klein-groesse: 18px; /* Vertrag: head of the small cards */
  --schrift-karte-kopf-klein-zeile: 1.35; /* Vertrag: head of the small cards */
  --schrift-karte-kopf-klein-laufweite: -0.4px; /* Vertrag: head of the small cards */
  --schrift-karte-rolle-gewicht: 600; /* Vertrag: role in the cards, mono */
  --schrift-karte-rolle-groesse: 11.5px; /* Vertrag: role in the cards, mono */
  --schrift-karte-rolle-zeile: normal; /* Vertrag: role in the cards, mono */
  --schrift-karte-rolle-laufweite: 0.6px; /* Vertrag: role in the cards, mono */
  --schrift-termin-schritt-titel-gewicht: 700; /* Vertrag: title of the appointment steps */
  --schrift-termin-schritt-titel-groesse: 16px; /* Vertrag: title of the appointment steps */
  --schrift-termin-schritt-titel-zeile: 1.35; /* Vertrag: title of the appointment steps */
  --schrift-termin-schritt-titel-laufweite: 0; /* Vertrag: title of the appointment steps */
  --schrift-termin-schritt-text-gewicht: 400; /* Vertrag: text of the appointment steps */
  --schrift-termin-schritt-text-groesse: 14.5px; /* Vertrag: text of the appointment steps */
  --schrift-termin-schritt-text-zeile: 1.55; /* Vertrag: text of the appointment steps */
  --schrift-termin-schritt-text-laufweite: 0; /* Vertrag: text of the appointment steps */
  --schrift-termin-nummer-gewicht: 700; /* Vertrag: number of the appointment steps */
  --schrift-termin-nummer-groesse: 13px; /* Vertrag: number of the appointment steps */
  --schrift-termin-nummer-zeile: normal; /* Vertrag: number of the appointment steps */
  --schrift-termin-nummer-laufweite: 0; /* Vertrag: number of the appointment steps */
  --schrift-widget-titel-gewicht: 700; /* Vertrag: dashboard widget, title */
  --schrift-widget-titel-groesse: 16px; /* Vertrag: dashboard widget, title */
  --schrift-widget-titel-zeile: normal; /* Vertrag: dashboard widget, title */
  --schrift-widget-titel-laufweite: -0.3px; /* Vertrag: dashboard widget, title */
  --schrift-widget-untertitel-gewicht: 400; /* Vertrag: dashboard widget, subtitle */
  --schrift-widget-untertitel-groesse: 12px; /* Vertrag: dashboard widget, subtitle */
  --schrift-widget-untertitel-zeile: normal; /* Vertrag: dashboard widget, subtitle */
  --schrift-widget-untertitel-laufweite: 0; /* Vertrag: dashboard widget, subtitle */
  --schrift-widget-knopf-gewicht: 600; /* Vertrag: dashboard widget, button */
  --schrift-widget-knopf-groesse: 12px; /* Vertrag: dashboard widget, button */
  --schrift-widget-knopf-zeile: normal; /* Vertrag: dashboard widget, button */
  --schrift-widget-knopf-laufweite: 0; /* Vertrag: dashboard widget, button */
  --schrift-widget-kicker-gewicht: 700; /* Vertrag: dashboard widget, kicker, mono */
  --schrift-widget-kicker-groesse: 9.5px; /* Vertrag: dashboard widget, kicker, mono */
  --schrift-widget-kicker-zeile: normal; /* Vertrag: dashboard widget, kicker, mono */
  --schrift-widget-kicker-laufweite: 1px; /* Vertrag: dashboard widget, kicker, mono */
  --schrift-widget-achse-gewicht: 500; /* Vertrag: dashboard widget, axis */
  --schrift-widget-achse-groesse: 11px; /* Vertrag: dashboard widget, axis */
  --schrift-widget-achse-zeile: normal; /* Vertrag: dashboard widget, axis */
  --schrift-widget-achse-laufweite: 0; /* Vertrag: dashboard widget, axis */
  --schrift-widget-pille-gewicht: 700; /* Vertrag: dashboard widget, pill, mono */
  --schrift-widget-pille-groesse: 11px; /* Vertrag: dashboard widget, pill, mono */
  --schrift-widget-pille-zeile: normal; /* Vertrag: dashboard widget, pill, mono */
  --schrift-widget-pille-laufweite: 0; /* Vertrag: dashboard widget, pill, mono */
  --schrift-widget-monat-gewicht: 500; /* Vertrag: dashboard widget, month */
  --schrift-widget-monat-groesse: 12px; /* Vertrag: dashboard widget, month */
  --schrift-widget-monat-zeile: normal; /* Vertrag: dashboard widget, month */
  --schrift-widget-monat-laufweite: 0; /* Vertrag: dashboard widget, month */
  --schrift-widget-saldo-label-gewicht: 700; /* Vertrag: dashboard widget, balance label */
  --schrift-widget-saldo-label-groesse: 13px; /* Vertrag: dashboard widget, balance label */
  --schrift-widget-saldo-label-zeile: normal; /* Vertrag: dashboard widget, balance label */
  --schrift-widget-saldo-label-laufweite: 0; /* Vertrag: dashboard widget, balance label */
  --schrift-widget-wert-label-gewicht: 700; /* Vertrag: dashboard widget, value label, mono */
  --schrift-widget-wert-label-groesse: 10px; /* Vertrag: dashboard widget, value label, mono */
  --schrift-widget-wert-label-zeile: normal; /* Vertrag: dashboard widget, value label, mono */
  --schrift-widget-wert-label-laufweite: 1px; /* Vertrag: dashboard widget, value label, mono */
  --schrift-widget-wert-gewicht: 700; /* Vertrag: dashboard widget, value, mono */
  --schrift-widget-wert-groesse: 15px; /* Vertrag: dashboard widget, value, mono */
  --schrift-widget-wert-zeile: normal; /* Vertrag: dashboard widget, value, mono */
  --schrift-widget-wert-laufweite: 0; /* Vertrag: dashboard widget, value, mono */
  --schrift-widget-tooltip-titel-gewicht: 700; /* Vertrag: dashboard widget, tooltip title */
  --schrift-widget-tooltip-titel-groesse: 12px; /* Vertrag: dashboard widget, tooltip title */
  --schrift-widget-tooltip-titel-zeile: 1.5; /* Vertrag: dashboard widget, tooltip title */
  --schrift-widget-tooltip-titel-laufweite: 0; /* Vertrag: dashboard widget, tooltip title */
  --schrift-widget-tooltip-wert-gewicht: 500; /* Vertrag: dashboard widget, tooltip value, mono */
  --schrift-widget-tooltip-wert-groesse: 11.5px; /* Vertrag: dashboard widget, tooltip value, mono */
  --schrift-widget-tooltip-wert-zeile: 1.57; /* Vertrag: dashboard widget, tooltip value, mono */
  --schrift-widget-tooltip-wert-laufweite: 0; /* Vertrag: dashboard widget, tooltip value, mono */
  --schrift-h2-start-gewicht: 800; /* Vertrag: H2 der Scrollstory */
  --schrift-h2-start-groesse: 40px; /* Vertrag: H2 der Scrollstory */
  --schrift-h2-start-zeile: 1.12; /* Vertrag: H2 der Scrollstory */
  --schrift-h2-start-laufweite: -1.4px; /* Vertrag: H2 der Scrollstory */
  --schrift-story-kicker-gewicht: 500; /* Vertrag: eyebrow of the story steps, mono */
  --schrift-story-kicker-groesse: 11px; /* Vertrag: eyebrow of the story steps, mono */
  --schrift-story-kicker-zeile: 1; /* Vertrag: eyebrow of the story steps, mono */
  --schrift-story-kicker-laufweite: 1.3px; /* Vertrag: eyebrow of the story steps, mono */
  --schrift-story-frage-gewicht: 600; /* Vertrag: guiding question of the story steps */
  --schrift-story-frage-groesse: 16px; /* Vertrag: guiding question of the story steps */
  --schrift-story-frage-zeile: 21px; /* Vertrag: guiding question of the story steps */
  --schrift-story-frage-laufweite: 0; /* Vertrag: guiding question of the story steps */
  --schrift-feld-gewicht: 400; /* Vertrag: input of the page forms (contact, free sign-up) */
  --schrift-feld-groesse: 15px; /* Vertrag: input of the page forms (contact, free sign-up) */
  --schrift-feld-zeile: normal; /* Vertrag: input of the page forms (contact, free sign-up) */
  --schrift-feld-laufweite: 0; /* Vertrag: input of the page forms (contact, free sign-up) */
  --schrift-feld-label-klein-gewicht: 600; /* Vertrag: field label, dialog pill, text of the free preview */
  --schrift-feld-label-klein-groesse: 12.5px; /* Vertrag: field label, dialog pill, text of the free preview */
  --schrift-feld-label-klein-zeile: normal; /* Vertrag: field label, dialog pill, text of the free preview */
  --schrift-feld-label-klein-laufweite: 0; /* Vertrag: field label, dialog pill, text of the free preview */
  --schrift-feld-label-mono-gewicht: 500; /* Vertrag: field label in dialogs, receipt term, contact, booking, mono */
  --schrift-feld-label-mono-groesse: 10.5px; /* Vertrag: field label in dialogs, receipt term, contact, booking, mono */
  --schrift-feld-label-mono-zeile: normal; /* Vertrag: field label in dialogs, receipt term, contact, booking, mono */
  --schrift-feld-label-mono-laufweite: 1px; /* Vertrag: field label in dialogs, receipt term, contact, booking, mono */
  --schrift-feld-kompakt-gewicht: 400; /* Vertrag: input in dialogs */
  --schrift-feld-kompakt-groesse: 14.5px; /* Vertrag: input in dialogs */
  --schrift-feld-kompakt-zeile: normal; /* Vertrag: input in dialogs */
  --schrift-feld-kompakt-laufweite: 0; /* Vertrag: input in dialogs */
  --schrift-feld-kompakt-betont-gewicht: 500; /* Vertrag: input in the second step of the free sign-up dialog */
  --schrift-feld-kompakt-betont-groesse: 14.5px; /* Vertrag: input in the second step of the free sign-up dialog */
  --schrift-feld-kompakt-betont-zeile: normal; /* Vertrag: input in the second step of the free sign-up dialog */
  --schrift-feld-kompakt-betont-laufweite: 0; /* Vertrag: input in the second step of the free sign-up dialog */
  --schrift-feld-hinweis-gewicht: 500; /* Vertrag: field hint ("optional") */
  --schrift-feld-hinweis-groesse: 12.5px; /* Vertrag: field hint ("optional") */
  --schrift-feld-hinweis-zeile: normal; /* Vertrag: field hint ("optional") */
  --schrift-feld-hinweis-laufweite: 0; /* Vertrag: field hint ("optional") */
  --schrift-hero-free-gewicht: 800; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) */
  --schrift-hero-free-groesse: 64px; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) */
  --schrift-hero-free-zeile: 1.04; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) */
  --schrift-hero-free-laufweite: -2.6px; /* Vertrag: H1 /free/ (mobil clamp 30–38 px) */
  --schrift-lead-klein-gewicht: 400; /* Vertrag: lead on thank-you, contact and appointment pages */
  --schrift-lead-klein-groesse: 17px; /* Vertrag: lead on thank-you, contact and appointment pages */
  --schrift-lead-klein-zeile: 1.6; /* Vertrag: lead on thank-you, contact and appointment pages */
  --schrift-lead-klein-laufweite: 0; /* Vertrag: lead on thank-you, contact and appointment pages */
  --schrift-text-klein-gewicht: 400; /* Vertrag: small text on contact, thank-you, booking placeholder and YouTube chapters */
  --schrift-text-klein-groesse: 13.5px; /* Vertrag: small text on contact, thank-you, booking placeholder and YouTube chapters */
  --schrift-text-klein-zeile: 1.5; /* Vertrag: small text on contact, thank-you, booking placeholder and YouTube chapters */
  --schrift-text-klein-laufweite: 0; /* Vertrag: small text on contact, thank-you, booking placeholder and YouTube chapters */
  --schrift-beleg-wert-gewicht: 600; /* Vertrag: receipt value on the thank-you page, done state */
  --schrift-beleg-wert-groesse: 14.5px; /* Vertrag: receipt value on the thank-you page, done state */
  --schrift-beleg-wert-zeile: 1.4; /* Vertrag: receipt value on the thank-you page, done state */
  --schrift-beleg-wert-laufweite: 0; /* Vertrag: receipt value on the thank-you page, done state */
  --schrift-tab-gewicht: 700; /* Vertrag: Stationen-Tab, Danke-Thementab */
  --schrift-tab-groesse: 16px; /* Vertrag: Stationen-Tab, Danke-Thementab */
  --schrift-tab-zeile: 1.3; /* Vertrag: Stationen-Tab, Danke-Thementab */
  --schrift-tab-laufweite: -0.3px; /* Vertrag: Stationen-Tab, Danke-Thementab */
  --schrift-station-titel-gewicht: 800; /* Vertrag: Stationstitel */
  --schrift-station-titel-groesse: 26px; /* Vertrag: Stationstitel */
  --schrift-station-titel-zeile: 1.22; /* Vertrag: Stationstitel */
  --schrift-station-titel-laufweite: -0.7px; /* Vertrag: Stationstitel */
  --schrift-dialog-zurueck-gewicht: 700; /* Vertrag: text button "back" in dialogs */
  --schrift-dialog-zurueck-groesse: 14.5px; /* Vertrag: text button "back" in dialogs */
  --schrift-dialog-zurueck-zeile: normal; /* Vertrag: text button "back" in dialogs */
  --schrift-dialog-zurueck-laufweite: 0; /* Vertrag: text button "back" in dialogs */
  --schrift-schritt-zahl-gewicht: 700; /* Vertrag: number in the step circle, booking duration (there with the mono family) */
  --schrift-schritt-zahl-groesse: 12px; /* Vertrag: number in the step circle, booking duration (there with the mono family) */
  --schrift-schritt-zahl-zeile: normal; /* Vertrag: number in the step circle, booking duration (there with the mono family) */
  --schrift-schritt-zahl-laufweite: 0; /* Vertrag: number in the step circle, booking duration (there with the mono family) */
  --schrift-karte-titel-mittel-gewicht: 700; /* Vertrag: title of the free sign-up steps, contact card value and channel titles */
  --schrift-karte-titel-mittel-groesse: 17px; /* Vertrag: title of the free sign-up steps, contact card value and channel titles */
  --schrift-karte-titel-mittel-zeile: 1.35; /* Vertrag: title of the free sign-up steps, contact card value and channel titles */
  --schrift-karte-titel-mittel-laufweite: -0.3px; /* Vertrag: title of the free sign-up steps, contact card value and channel titles */
  --schrift-meta-mono-gewicht: 500; /* Vertrag: meta line of the preview footer, contact channels, thank-you tile, mono */
  --schrift-meta-mono-groesse: 11.5px; /* Vertrag: meta line of the preview footer, contact channels, thank-you tile, mono */
  --schrift-meta-mono-zeile: normal; /* Vertrag: meta line of the preview footer, contact channels, thank-you tile, mono */
  --schrift-meta-mono-laufweite: 0; /* Vertrag: meta line of the preview footer, contact channels, thank-you tile, mono */
  --schrift-vorschau-titel-gewicht: 700; /* Vertrag: title of the free preview */
  --schrift-vorschau-titel-groesse: 12.5px; /* Vertrag: title of the free preview */
  --schrift-vorschau-titel-zeile: normal; /* Vertrag: title of the free preview */
  --schrift-vorschau-titel-laufweite: 0; /* Vertrag: title of the free preview */
  --schrift-vorschau-pille-gewicht: 600; /* Vertrag: status pill of the free preview */
  --schrift-vorschau-pille-groesse: 10.5px; /* Vertrag: status pill of the free preview */
  --schrift-vorschau-pille-zeile: normal; /* Vertrag: status pill of the free preview */
  --schrift-vorschau-pille-laufweite: 0; /* Vertrag: status pill of the free preview */
  --schrift-vorschau-achse-gewicht: 500; /* Vertrag: chart axis of the free preview, mono */
  --schrift-vorschau-achse-groesse: 9.5px; /* Vertrag: chart axis of the free preview, mono */
  --schrift-vorschau-achse-zeile: normal; /* Vertrag: chart axis of the free preview, mono */
  --schrift-vorschau-achse-laufweite: 0; /* Vertrag: chart axis of the free preview, mono */
  --schrift-vorschau-monat-gewicht: 500; /* Vertrag: months of the free preview, mono */
  --schrift-vorschau-monat-groesse: 10px; /* Vertrag: months of the free preview, mono */
  --schrift-vorschau-monat-zeile: normal; /* Vertrag: months of the free preview, mono */
  --schrift-vorschau-monat-laufweite: 0; /* Vertrag: months of the free preview, mono */
  --schrift-adresse-titel-gewicht: 700; /* Vertrag: address title on the contact page */
  --schrift-adresse-titel-groesse: 15.5px; /* Vertrag: address title on the contact page */
  --schrift-adresse-titel-zeile: normal; /* Vertrag: address title on the contact page */
  --schrift-adresse-titel-laufweite: 0; /* Vertrag: address title on the contact page */
  --schrift-h4-gewicht: 800; /* Vertrag: subheading on the contact page */
  --schrift-h4-groesse: 19px; /* Vertrag: subheading on the contact page */
  --schrift-h4-zeile: normal; /* Vertrag: subheading on the contact page */
  --schrift-h4-laufweite: -0.5px; /* Vertrag: subheading on the contact page */
  --schrift-alternative-titel-gewicht: 800; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin */
  --schrift-alternative-titel-groesse: 28px; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin */
  --schrift-alternative-titel-zeile: 1.25; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin */
  --schrift-alternative-titel-laufweite: -0.8px; /* Vertrag: Titel „Kein passender Slot dabei?“ /termin */
  --schrift-youtube-titel-gewicht: 400; /* Vertrag: footer line of the YouTube frame */
  --schrift-youtube-titel-groesse: 12.5px; /* Vertrag: footer line of the YouTube frame */
  --schrift-youtube-titel-zeile: normal; /* Vertrag: footer line of the YouTube frame */
  --schrift-youtube-titel-laufweite: 0; /* Vertrag: footer line of the YouTube frame */
  --schrift-schritt-label-gewicht: 700; /* Vertrag: "step n" of the configurator, mono */
  --schrift-schritt-label-groesse: 12px; /* Vertrag: "step n" of the configurator, mono */
  --schrift-schritt-label-zeile: normal; /* Vertrag: "step n" of the configurator, mono */
  --schrift-schritt-label-laufweite: 1.2px; /* Vertrag: "step n" of the configurator, mono */
  --schrift-zahl-eingabe-gewicht: 800; /* Vertrag: Userzahl-Feld des Konfigurators */
  --schrift-zahl-eingabe-groesse: 48px; /* Vertrag: Userzahl-Feld des Konfigurators */
  --schrift-zahl-eingabe-zeile: 1; /* Vertrag: Userzahl-Feld des Konfigurators */
  --schrift-zahl-eingabe-laufweite: -1.8px; /* Vertrag: Userzahl-Feld des Konfigurators */
  --schrift-umfang-mono-gewicht: 700; /* Vertrag: counter "n modules · m integrations", mono (mobile 10.5px/0 in the block) */
  --schrift-umfang-mono-groesse: 11.5px; /* Vertrag: counter "n modules · m integrations", mono (mobile 10.5px/0 in the block) */
  --schrift-umfang-mono-zeile: 1.45; /* Vertrag: counter "n modules · m integrations", mono (mobile 10.5px/0 in the block) */
  --schrift-umfang-mono-laufweite: 0.2px; /* Vertrag: counter "n modules · m integrations", mono (mobile 10.5px/0 in the block) */
  --schrift-kachel-zahl-gewicht: 800; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz */
  --schrift-kachel-zahl-groesse: 26px; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz */
  --schrift-kachel-zahl-zeile: 1; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz */
  --schrift-kachel-zahl-laufweite: -1px; /* Vertrag: Kacheln Preise APP, „Gesamt“ der Auswahl-Spalte, Netto der Live-Bilanz */
  --schrift-einfuehrung-zahl-gewicht: 800; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP */
  --schrift-einfuehrung-zahl-groesse: 38px; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP */
  --schrift-einfuehrung-zahl-zeile: 1; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP */
  --schrift-einfuehrung-zahl-laufweite: -1.5px; /* Vertrag: „sechs Wochen“ der Kennzahlen Preise APP */
  --schrift-chip-mono-gewicht: 700; /* Vertrag: chips such as "ISO 27001" and the "always included" pill, mono */
  --schrift-chip-mono-groesse: 10.5px; /* Vertrag: chips such as "ISO 27001" and the "always included" pill, mono */
  --schrift-chip-mono-zeile: normal; /* Vertrag: chips such as "ISO 27001" and the "always included" pill, mono */
  --schrift-chip-mono-laufweite: 0.6px; /* Vertrag: chips such as "ISO 27001" and the "always included" pill, mono */
  --schrift-rechner-wert-gewicht: 700; /* Vertrag: values in the cost-benefit calculator, mono */
  --schrift-rechner-wert-groesse: 18px; /* Vertrag: values in the cost-benefit calculator, mono */
  --schrift-rechner-wert-zeile: normal; /* Vertrag: values in the cost-benefit calculator, mono */
  --schrift-rechner-wert-laufweite: 0; /* Vertrag: values in the cost-benefit calculator, mono */
  --schrift-rechner-label-gewicht: 500; /* Vertrag: labels in the cost-benefit calculator */
  --schrift-rechner-label-groesse: 12.5px; /* Vertrag: labels in the cost-benefit calculator */
  --schrift-rechner-label-zeile: 1.5; /* Vertrag: labels in the cost-benefit calculator */
  --schrift-rechner-label-laufweite: 0; /* Vertrag: labels in the cost-benefit calculator */
  --schrift-auswahl-summe-gewicht: 700; /* Vertrag: "total per user" and the balance form title; same values as the booking title, kept as its own role */
  --schrift-auswahl-summe-groesse: 20px; /* Vertrag: "total per user" and the balance form title; same values as the booking title, kept as its own role */
  --schrift-auswahl-summe-zeile: normal; /* Vertrag: "total per user" and the balance form title; same values as the booking title, kept as its own role */
  --schrift-auswahl-summe-laufweite: -0.4px; /* Vertrag: "total per user" and the balance form title; same values as the booking title, kept as its own role */
  --schrift-interview-titel-gewicht: 800; /* Vertrag: H2 des Interviews; wertgleich alternative-titel, eigene */
  --schrift-interview-titel-groesse: 28px; /* Vertrag: H2 des Interviews; wertgleich alternative-titel, eigene */
  --schrift-interview-titel-zeile: 1.25; /* Vertrag: H2 des Interviews; wertgleich alternative-titel, eigene */
  --schrift-interview-titel-laufweite: -0.8px; /* Vertrag: H2 des Interviews; wertgleich alternative-titel, eigene */
  --schrift-hero-app-gewicht: 800; /* Vertrag: statement in the tour hero (navy hero with app type) */
  --schrift-hero-app-groesse: clamp(28px, 2.9vw, 42px); /* Vertrag: statement in the tour hero (navy hero with app type) */
  --schrift-hero-app-zeile: 1.1; /* Vertrag: statement in the tour hero (navy hero with app type) */
  --schrift-hero-app-laufweite: -1.5px; /* Vertrag: statement in the tour hero (navy hero with app type) */
  --schrift-hero-hell-gewicht: 800; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) */
  --schrift-hero-hell-groesse: 60px; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) */
  --schrift-hero-hell-zeile: 1.04; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) */
  --schrift-hero-hell-laufweite: -2.2px; /* Vertrag: Aussage im hellen Hero (hero-navy schrift: hell, VF; mobil 38px) */
  --schrift-hero-xl-gewicht: 800; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl; mobil 38px) */
  --schrift-hero-xl-groesse: 76px; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl; mobil 38px) */
  --schrift-hero-xl-zeile: 1.02; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl; mobil 38px) */
  --schrift-hero-xl-laufweite: -3.2px; /* Vertrag: H1 Automatisierung (hero-navy schrift: xl; mobil 38px) */
  --schrift-zahl-bilanz-gewicht: 800; /* Vertrag: Bilanz- und Zahlenkarten (VF, CF, AD; mobil 30px) */
  --schrift-zahl-bilanz-groesse: 42px; /* Vertrag: Bilanz- und Zahlenkarten (VF, CF, AD; mobil 30px) */
  --schrift-zahl-bilanz-zeile: 1; /* Vertrag: Bilanz- und Zahlenkarten (VF, CF, AD; mobil 30px) */
  --schrift-zahl-bilanz-laufweite: -1.6px; /* Vertrag: Bilanz- und Zahlenkarten (VF, CF, AD; mobil 30px) */
  --schrift-label-stark-gewicht: 800; /* Vertrag: strong kicker, mono (packages) */
  --schrift-label-stark-groesse: 11px; /* Vertrag: strong kicker, mono (packages) */
  --schrift-label-stark-zeile: normal; /* Vertrag: strong kicker, mono (packages) */
  --schrift-label-stark-laufweite: 1.3px; /* Vertrag: strong kicker, mono (packages) */
  --schrift-karte-titel-klein-gewicht: 800; /* Vertrag: small card title ("at a glance"; differs from karte-titel 21 px) */
  --schrift-karte-titel-klein-groesse: 19px; /* Vertrag: small card title ("at a glance"; differs from karte-titel 21 px) */
  --schrift-karte-titel-klein-zeile: 1.25; /* Vertrag: small card title ("at a glance"; differs from karte-titel 21 px) */
  --schrift-karte-titel-klein-laufweite: -0.4px; /* Vertrag: small card title ("at a glance"; differs from karte-titel 21 px) */
  --schrift-zitat-definition-gewicht: 500; /* Vertrag: sentence "what brainX is" (kurzantwort quote; mobile 21px) */
  --schrift-zitat-definition-groesse: 27px; /* Vertrag: sentence "what brainX is" (kurzantwort quote; mobile 21px) */
  --schrift-zitat-definition-zeile: 1.45; /* Vertrag: sentence "what brainX is" (kurzantwort quote; mobile 21px) */
  --schrift-zitat-definition-laufweite: -0.5px; /* Vertrag: sentence "what brainX is" (kurzantwort quote; mobile 21px) */
  --schrift-ergebnis-titel-gewicht: 800; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) */
  --schrift-ergebnis-titel-groesse: 27px; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) */
  --schrift-ergebnis-titel-zeile: normal; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) */
  --schrift-ergebnis-titel-laufweite: -1px; /* Vertrag: Titel der Ergebniskarte von passt-das (AC; mobil 21px) */
  --schrift-phase-titel-gewicht: 700; /* Vertrag: phase title in the phase plan */
  --schrift-phase-titel-groesse: 14.5px; /* Vertrag: phase title in the phase plan */
  --schrift-phase-titel-zeile: 1.35; /* Vertrag: phase title in the phase plan */
  --schrift-phase-titel-laufweite: 0; /* Vertrag: phase title in the phase plan */
  --schrift-zitat-person-gewicht: 500; /* Vertrag: quote "who is behind it" (beleg person; mobile 24px) */
  --schrift-zitat-person-groesse: 30px; /* Vertrag: quote "who is behind it" (beleg person; mobile 24px) */
  --schrift-zitat-person-zeile: 1.35; /* Vertrag: quote "who is behind it" (beleg person; mobile 24px) */
  --schrift-zitat-person-laufweite: -0.8px; /* Vertrag: quote "who is behind it" (beleg person; mobile 24px) */
  --schrift-bento-ziffer-gewicht: 800; /* Vertrag: ghost digit in the bento of numbered cards, mono (CP "what you get"; mobile 30px) */
  --schrift-bento-ziffer-groesse: 46px; /* Vertrag: ghost digit in the bento of numbered cards, mono (CP "what you get"; mobile 30px) */
  --schrift-bento-ziffer-zeile: 1; /* Vertrag: ghost digit in the bento of numbered cards, mono (CP "what you get"; mobile 30px) */
  --schrift-bento-ziffer-laufweite: -2px; /* Vertrag: ghost digit in the bento of numbered cards, mono (CP "what you get"; mobile 30px) */
  --schrift-logo-name-gewicht: 800; /* Vertrag: Name neben dem Logo (hero-integration; mobil 24px) */
  --schrift-logo-name-groesse: 30px; /* Vertrag: Name neben dem Logo (hero-integration; mobil 24px) */
  --schrift-logo-name-zeile: 1; /* Vertrag: Name neben dem Logo (hero-integration; mobil 24px) */
  --schrift-logo-name-laufweite: -0.8px; /* Vertrag: Name neben dem Logo (hero-integration; mobil 24px) */
  --schrift-karte-titel-integration-gewicht: 800; /* Vertrag: title of the data path and prerequisite cards */
  --schrift-karte-titel-integration-groesse: 19px; /* Vertrag: title of the data path and prerequisite cards */
  --schrift-karte-titel-integration-zeile: 1.3; /* Vertrag: title of the data path and prerequisite cards */
  --schrift-karte-titel-integration-laufweite: 0; /* Vertrag: title of the data path and prerequisite cards */
  --schrift-abschluss-titel-gewicht: 800; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross; mobil 21px) */
  --schrift-abschluss-titel-groesse: 26px; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross; mobil 21px) */
  --schrift-abschluss-titel-zeile: 1.25; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross; mobil 21px) */
  --schrift-abschluss-titel-laufweite: -0.6px; /* Vertrag: Abschluss-Titel der Integrationsseiten (abschluss-cta titel_stufe gross; mobil 21px) */
  --schrift-tabelle-zelle-titel-gewicht: 700; /* Vertrag: table head and feature (variant table) */
  --schrift-tabelle-zelle-titel-groesse: 15px; /* Vertrag: table head and feature (variant table) */
  --schrift-tabelle-zelle-titel-zeile: 1.4; /* Vertrag: table head and feature (variant table); line height 1.4 */
  --schrift-tabelle-zelle-titel-laufweite: 0; /* Vertrag: table head and feature (variant table) */
  --schrift-gruppenlabel-gewicht: 500; /* Vertrag: group labels, mono (variant table head, process stations, comparison matrix) */
  --schrift-gruppenlabel-groesse: 11px; /* Vertrag: group labels, mono (variant table head, process stations, comparison matrix) */
  --schrift-gruppenlabel-zeile: 1.3; /* Vertrag: group labels, mono (variant table head, process stations, comparison matrix) */
  --schrift-gruppenlabel-laufweite: 1.1px; /* Vertrag: group labels, mono (variant table head, process stations, comparison matrix) */
  --schrift-sammelliste-gruppe-gewicht: 800; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste; mobil 24px) */
  --schrift-sammelliste-gruppe-groesse: 28px; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste; mobil 24px) */
  --schrift-sammelliste-gruppe-zeile: normal; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste; mobil 24px) */
  --schrift-sammelliste-gruppe-laufweite: -0.7px; /* Vertrag: Gruppen-H2 der Sammelliste (sammelliste; mobil 24px) */
  --schrift-tab-titel-gewicht: 700; /* Vertrag: title of the process tabs */
  --schrift-tab-titel-groesse: 14.5px; /* Vertrag: title of the process tabs */
  --schrift-tab-titel-zeile: 1.25; /* Vertrag: title of the process tabs */
  --schrift-tab-titel-laufweite: 0; /* Vertrag: title of the process tabs */
  --schrift-tab-nummer-gewicht: 700; /* Vertrag: number of the process tabs, mono */
  --schrift-tab-nummer-groesse: 12px; /* Vertrag: number of the process tabs, mono */
  --schrift-tab-nummer-zeile: 1; /* Vertrag: number of the process tabs, mono */
  --schrift-tab-nummer-laufweite: 0; /* Vertrag: number of the process tabs, mono */
  --schrift-kennzahl-gruen-gewicht: 800; /* Vertrag: Ergebnis der Besonderheit (besonderheit; DV2 Z. 268; mobil 24px) */
  --schrift-kennzahl-gruen-groesse: 28px; /* Vertrag: Ergebnis der Besonderheit (besonderheit; DV2 Z. 268; mobil 24px) */
  --schrift-kennzahl-gruen-zeile: 1.1; /* Vertrag: Ergebnis der Besonderheit (besonderheit; DV2 Z. 268; mobil 24px) */
  --schrift-kennzahl-gruen-laufweite: -0.8px; /* Vertrag: Ergebnis der Besonderheit (besonderheit; DV2 Z. 268; mobil 24px) */
  --schrift-regler-wert-gewicht: 800; /* Vertrag: value next to the slider label (mini calculator) */
  --schrift-regler-wert-groesse: 22px; /* Vertrag: value next to the slider label (mini calculator) */
  --schrift-regler-wert-zeile: normal; /* Vertrag: value next to the slider label (mini calculator) */
  --schrift-regler-wert-laufweite: -0.5px; /* Vertrag: value next to the slider label (mini calculator) */
  --schrift-tabelle-kopf-gewicht: 700; /* Vertrag: head of the sample table, mono (mini calculator, matrix head) */
  --schrift-tabelle-kopf-groesse: 12px; /* Vertrag: head of the sample table, mono (mini calculator, matrix head) */
  --schrift-tabelle-kopf-zeile: normal; /* Vertrag: head of the sample table, mono (mini calculator, matrix head) */
  --schrift-tabelle-kopf-laufweite: 0.6px; /* Vertrag: head of the sample table, mono (mini calculator, matrix head) */
  --schrift-kachel-titel-gewicht: 700; /* Vertrag: title of the white paper tile and the download card */
  --schrift-kachel-titel-groesse: 16.5px; /* Vertrag: title of the white paper tile and the download card */
  --schrift-kachel-titel-zeile: 1.32; /* Vertrag: title of the white paper tile and the download card */
  --schrift-kachel-titel-laufweite: -0.3px; /* Vertrag: title of the white paper tile and the download card */
  --schrift-schritt-titel-gewicht: 700; /* Vertrag: step and chapter titles (white paper contents, setup, rights tabs) */
  --schrift-schritt-titel-groesse: 17px; /* Vertrag: step and chapter titles (white paper contents, setup, rights tabs) */
  --schrift-schritt-titel-zeile: 1.35; /* Vertrag: step and chapter titles (white paper contents, setup, rights tabs) */
  --schrift-schritt-titel-laufweite: 0; /* Vertrag: step and chapter titles (white paper contents, setup, rights tabs) */
  --schrift-titelbild-chip-gewicht: 700; /* Vertrag: topic chip in the cover image, mono */
  --schrift-titelbild-chip-groesse: 10px; /* Vertrag: topic chip in the cover image, mono */
  --schrift-titelbild-chip-zeile: 1; /* Vertrag: topic chip in the cover image, mono */
  --schrift-titelbild-chip-laufweite: 0.8px; /* Vertrag: topic chip in the cover image, mono */
  --schrift-titel-recht-gewicht: 800; /* Vertrag: H1 der Rechtsseiten (rechtstext; mobil 30px) */
  --schrift-titel-recht-groesse: 40px; /* Vertrag: H1 der Rechtsseiten (rechtstext; mobil 30px) */
  --schrift-titel-recht-zeile: 1.14; /* Vertrag: H1 der Rechtsseiten (rechtstext; mobil 30px) */
  --schrift-titel-recht-laufweite: -1.4px; /* Vertrag: H1 der Rechtsseiten (rechtstext; mobil 30px) */
  --schrift-rechtstext-gewicht: 400; /* Vertrag: body text of the legal pages and data tables */
  --schrift-rechtstext-groesse: 15px; /* Vertrag: body text of the legal pages and data tables */
  --schrift-rechtstext-zeile: 1.7; /* Vertrag: body text of the legal pages and data tables */
  --schrift-rechtstext-laufweite: 0; /* Vertrag: body text of the legal pages and data tables */
  --schrift-h2-dicht-gewicht: 800; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register; api-referenz; mobil 24px) */
  --schrift-h2-dicht-groesse: 32px; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register; api-referenz; mobil 24px) */
  --schrift-h2-dicht-zeile: 1.16; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register; api-referenz; mobil 24px) */
  --schrift-h2-dicht-laufweite: -1.1px; /* Vertrag: H2 der Lexikon-Artikel und der API-Kapitel (glossar-register; api-referenz; mobil 24px) */
  --schrift-ziffer-gross-gewicht: 800; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer; mobil 44px) */
  --schrift-ziffer-gross-groesse: 62px; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer; mobil 44px) */
  --schrift-ziffer-gross-zeile: 1; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer; mobil 44px) */
  --schrift-ziffer-gross-laufweite: 0; /* Vertrag: große Ziffer der Karten (karten navy-kasten und ziffer; mobil 44px) */
  --schrift-code-gewicht: 500; /* Vertrag: code and inline code, mono (API reference) */
  --schrift-code-groesse: 12.5px; /* Vertrag: code and inline code, mono (API reference) */
  --schrift-code-zeile: 1.8; /* Vertrag: code and inline code, mono (API reference) */
  --schrift-code-laufweite: 0; /* Vertrag: code and inline code, mono (API reference) */
  --schrift-hero-aufgabe-gewicht: 800; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, DA „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) */
  --schrift-hero-aufgabe-groesse: 54px; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, DA „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) */
  --schrift-hero-aufgabe-zeile: 1.06; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, DA „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) */
  --schrift-hero-aufgabe-laufweite: -1.8px; /* Vertrag: H1 der Aufgaben-Heros (hero-hell aufgabe, DA „Allgemein Aufgaben“; zwischen 768 und 1079 px clamp(33px, 5vw, 54px), mobil 33px) */
  --schrift-lead-branche-gewicht: 400; /* Vertrag: lead of the industry heroes (differs from lead-gross 20/1.6) */
  --schrift-lead-branche-groesse: 21px; /* Vertrag: lead of the industry heroes (differs from lead-gross 20/1.6) */
  --schrift-lead-branche-zeile: 1.55; /* Vertrag: lead of the industry heroes (differs from lead-gross 20/1.6) */
  --schrift-lead-branche-laufweite: 0; /* Vertrag: lead of the industry heroes (differs from lead-gross 20/1.6) */
  --schrift-hero-rolle-gewicht: 800; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) */
  --schrift-hero-rolle-groesse: 47px; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) */
  --schrift-hero-rolle-zeile: 1.08; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) */
  --schrift-hero-rolle-laufweite: -1.5px; /* Vertrag: H1 der Rollen-Heros (FI, VT, KS, OP, CL) */
  --schrift-hero-startups-gewicht: 800; /* Vertrag: H1 Startups (SU, DA) */
  --schrift-hero-startups-groesse: 56px; /* Vertrag: H1 Startups (SU, DA) */
  --schrift-hero-startups-zeile: 1.04; /* Vertrag: H1 Startups (SU, DA) */
  --schrift-hero-startups-laufweite: -2.2px; /* Vertrag: H1 Startups (SU, DA) */
  --schrift-kosten-zahl-gewicht: 800; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) */
  --schrift-kosten-zahl-groesse: 36px; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) */
  --schrift-kosten-zahl-zeile: 1; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) */
  --schrift-kosten-zahl-laufweite: -1.4px; /* Vertrag: Kostenkarten-Zahlen (FI, VT, KS, OP, CL) */
  --schrift-app-schritt-titel-gewicht: 800; /* Vertrag: step titles, number band and open FAQ (app frame, number card, FAQ) */
  --schrift-app-schritt-titel-groesse: 22px; /* Vertrag: step titles, number band and open FAQ (app frame, number card, FAQ) */
  --schrift-app-schritt-titel-zeile: 1.25; /* Vertrag: step titles, number band and open FAQ (app frame, number card, FAQ) */
  --schrift-app-schritt-titel-laufweite: -0.6px; /* Vertrag: step titles, number band and open FAQ (app frame, number card, FAQ) */
  --schrift-zahl-band-gewicht: 800; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) */
  --schrift-zahl-band-groesse: 64px; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) */
  --schrift-zahl-band-zeile: 1; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) */
  --schrift-zahl-band-laufweite: -2.6px; /* Vertrag: Zahl im Navy-Band (FI, VT, KS, OP) */
  --schrift-beleg-zahl-gewicht: 800; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA; Mobilwert und Laufweite aus Loesung Startups v3) */
  --schrift-beleg-zahl-groesse: 48px; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA; Mobilwert und Laufweite aus Loesung Startups v3) */
  --schrift-beleg-zahl-zeile: 1; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA; Mobilwert und Laufweite aus Loesung Startups v3) */
  --schrift-beleg-zahl-laufweite: -1.8px; /* Vertrag: Beleg „4 statt 40“ der Startups-Seite (kennzahlen-karte beleg, SU; DA; Mobilwert und Laufweite aus Loesung Startups v3) */
  --schrift-h2-branche-gewicht: 800; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) */
  --schrift-h2-branche-groesse: 46px; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) */
  --schrift-h2-branche-zeile: 1.08; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) */
  --schrift-h2-branche-laufweite: -1.9px; /* Vertrag: H2 der Branchen-Sektionen (modell-tabs, kpi-dashboard; SA, IT, HS) */
  --schrift-aussage-gross-gewicht: 800; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) */
  --schrift-aussage-gross-groesse: 34px; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) */
  --schrift-aussage-gross-zeile: 1.15; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) */
  --schrift-aussage-gross-laufweite: -1.2px; /* Vertrag: Realitätsaussagen (karten aussage-gross; SA, IT, HS; DA −1.2px) */
  --schrift-rechnung-netto-gewicht: 800; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) */
  --schrift-rechnung-netto-groesse: 24px; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) */
  --schrift-rechnung-netto-zeile: normal; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) */
  --schrift-rechnung-netto-laufweite: -0.8px; /* Vertrag: Rechnungsnetto (modell-tabs; SA, IT, HS; DA −.8px, mobil −.7px) */
  --schrift-button-kompakt-gewicht: 700; /* Ergänzung: small button in the location closing section and the navy block of the team page */
  --schrift-button-kompakt-groesse: 14.5px; /* Ergänzung: small button in the location closing section and the navy block of the team page */
  --schrift-button-kompakt-zeile: normal; /* Ergänzung: small button in the location closing section and the navy block of the team page */
  --schrift-button-kompakt-laufweite: 0; /* Ergänzung: small button in the location closing section and the navy block of the team page */
  --schrift-vertragshero-titel-gewicht: 800; /* Ergänzung: title of the hero card on the contract page */
  --schrift-vertragshero-titel-groesse: 20px; /* Ergänzung: title of the hero card on the contract page */
  --schrift-vertragshero-titel-zeile: normal; /* Ergänzung: title of the hero card on the contract page */
  --schrift-vertragshero-titel-laufweite: -.5px; /* Ergänzung: title of the hero card on the contract page */
  --schrift-liste-text-gewicht: 400; /* Ergänzung: list text such as "why now" on the tour page */
  --schrift-liste-text-groesse: 15.5px; /* Ergänzung: list text such as "why now" on the tour page */
  --schrift-liste-text-zeile: 1.6; /* Ergänzung: list text such as "why now" on the tour page */
  --schrift-liste-text-laufweite: 0; /* Ergänzung: list text such as "why now" on the tour page */
  --schrift-h2-xl-gewicht: 800; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-xl-groesse: 50px; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-xl-zeile: 1.06; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-xl-laufweite: -2px; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-gewicht: 800; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-groesse: 30px; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-zeile: 1.1; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  --schrift-h2-gross-mobil-laufweite: -1.1px; /* Ergänzung: Automatisierung v7 Z. 547 und Mobil-Fassung, Überschriften der Sektionsköpfe */
  /* == Schriftskala == */
  /* Fixed values without a role, one token per value; blocks refer to them through their local variables (--_…). The mobile layer does not rescale them. */
  --schriftskala-groesse-6-5: 6.5px; /* Ergänzung: font size 6.5px on the type scale */
  --schriftskala-groesse-8: 8px; /* Ergänzung: font size 8px on the type scale */
  --schriftskala-groesse-9: 9px; /* Ergänzung: font size 9px on the type scale */
  --schriftskala-groesse-9-5: 9.5px; /* Ergänzung: font size 9.5px on the type scale */
  --schriftskala-groesse-10: 10px; /* Ergänzung: font size 10px on the type scale */
  --schriftskala-groesse-10-5: 10.5px; /* Ergänzung: font size 10.5px on the type scale */
  --schriftskala-groesse-11: 11px; /* Ergänzung: font size 11px on the type scale */
  --schriftskala-groesse-11-5: 11.5px; /* Ergänzung: font size 11.5px on the type scale */
  --schriftskala-groesse-12: 12px; /* Ergänzung: font size 12px on the type scale */
  --schriftskala-groesse-12-5: 12.5px; /* Ergänzung: font size 12.5px on the type scale */
  --schriftskala-groesse-13: 13px; /* Ergänzung: font size 13px on the type scale */
  --schriftskala-groesse-13-5: 13.5px; /* Ergänzung: font size 13.5px on the type scale */
  --schriftskala-groesse-14: 14px; /* Ergänzung: font size 14px on the type scale */
  --schriftskala-groesse-14-5: 14.5px; /* Ergänzung: font size 14.5px on the type scale */
  --schriftskala-groesse-15: 15px; /* Ergänzung: font size 15px on the type scale */
  --schriftskala-groesse-15-5: 15.5px; /* Ergänzung: font size 15.5px on the type scale */
  --schriftskala-groesse-16: 16px; /* Ergänzung: font size 16px on the type scale */
  --schriftskala-groesse-16-5: 16.5px; /* Ergänzung: font size 16.5px on the type scale */
  --schriftskala-groesse-17: 17px; /* Ergänzung: font size 17px on the type scale */
  --schriftskala-groesse-19: 19px; /* Ergänzung: font size 19px on the type scale */
  --schriftskala-groesse-20: 20px; /* Ergänzung: font size 20px on the type scale */
  --schriftskala-groesse-21: 21px; /* Ergänzung: font size 21px on the type scale */
  --schriftskala-groesse-22: 22px; /* Ergänzung: font size 22px on the type scale */
  --schriftskala-groesse-24: 24px; /* Ergänzung: font size 24px on the type scale */
  --schriftskala-groesse-25: 25px; /* Ergänzung: font size 25px on the type scale */
  --schriftskala-groesse-26: 26px; /* Ergänzung: font size 26px on the type scale */
  --schriftskala-groesse-28: 28px; /* Ergänzung: font size 28px on the type scale */
  --schriftskala-groesse-30: 30px; /* Ergänzung: font size 30px on the type scale */
  --schriftskala-groesse-40: 40px; /* Ergänzung: font size 40px on the type scale */
  --schriftskala-gewicht-400: 400; /* Ergänzung: font weight 400 on the type scale */
  --schriftskala-gewicht-500: 500; /* Ergänzung: font weight 500 on the type scale */
  --schriftskala-gewicht-600: 600; /* Ergänzung: font weight 600 on the type scale */
  --schriftskala-gewicht-700: 700; /* Ergänzung: font weight 700 on the type scale */
  --schriftskala-gewicht-800: 800; /* Ergänzung: font weight 800 on the type scale */
  --schriftskala-zeile-1: 1; /* Ergänzung: line height 1 on the type scale */
  --schriftskala-zeile-1-05: 1.05; /* Ergänzung: line height 1.05 on the type scale */
  --schriftskala-zeile-1-06: 1.06; /* Ergänzung: line height 1.06 on the type scale */
  --schriftskala-zeile-1-1: 1.1; /* Ergänzung: line height 1.1 on the type scale */
  --schriftskala-zeile-1-14: 1.14; /* Ergänzung: line height 1.14 on the type scale */
  --schriftskala-zeile-1-15: 1.15; /* Ergänzung: line height 1.15 on the type scale */
  --schriftskala-zeile-1-18: 1.18; /* Ergänzung: line height 1.18 on the type scale */
  --schriftskala-zeile-1-2: 1.2; /* Ergänzung: line height 1.2 on the type scale */
  --schriftskala-zeile-1-24: 1.24; /* Ergänzung: line height 1.24 on the type scale */
  --schriftskala-zeile-1-25: 1.25; /* Ergänzung: line height 1.25 on the type scale */
  --schriftskala-zeile-1-3: 1.3; /* Ergänzung: line height 1.3 on the type scale */
  --schriftskala-zeile-1-35: 1.35; /* Ergänzung: line height 1.35 on the type scale */
  --schriftskala-zeile-1-4: 1.4; /* Ergänzung: line height 1.4 on the type scale */
  --schriftskala-zeile-1-45: 1.45; /* Ergänzung: line height 1.45 on the type scale */
  --schriftskala-zeile-1-5: 1.5; /* Ergänzung: line height 1.5 on the type scale */
  --schriftskala-zeile-1-55: 1.55; /* Ergänzung: line height 1.55 on the type scale */
  --schriftskala-zeile-1-57: 1.57; /* Ergänzung: line height 1.57 on the type scale */
  --schriftskala-zeile-1-6: 1.6; /* Ergänzung: line height 1.6 on the type scale */
  --schriftskala-zeile-1-65: 1.65; /* Ergänzung: line height 1.65 on the type scale */
  --schriftskala-zeile-1-9: 1.9; /* Ergänzung: line height 1.9 on the type scale */
  --schriftskala-zeile-13px: 13px; /* Ergänzung: line height 13px on the type scale */
  --schriftskala-zeile-14px: 14px; /* Ergänzung: line height 14px on the type scale */
  --schriftskala-laufweite-minus-3-2: -3.2px; /* Ergänzung: letter spacing -3.2px on the type scale */
  --schriftskala-laufweite-minus-2-2: -2.2px; /* Ergänzung: letter spacing -2.2px on the type scale */
  --schriftskala-laufweite-minus-2: -2px; /* Ergänzung: letter spacing -2px on the type scale */
  --schriftskala-laufweite-minus-1-4: -1.4px; /* Ergänzung: letter spacing -1.4px on the type scale */
  --schriftskala-laufweite-minus-1-2: -1.2px; /* Ergänzung: letter spacing -1.2px on the type scale */
  --schriftskala-laufweite-minus-1: -1px; /* Ergänzung: letter spacing -1px on the type scale */
  --schriftskala-laufweite-minus-0-8: -0.8px; /* Ergänzung: letter spacing -0.8px on the type scale */
  --schriftskala-laufweite-minus-0-6: -0.6px; /* Ergänzung: letter spacing -0.6px on the type scale */
  --schriftskala-laufweite-minus-0-5: -0.5px; /* Ergänzung: letter spacing -0.5px on the type scale */
  --schriftskala-laufweite-minus-0-4: -0.4px; /* Ergänzung: letter spacing -0.4px on the type scale */
  --schriftskala-laufweite-minus-0-3: -0.3px; /* Ergänzung: letter spacing -0.3px on the type scale */
  --schriftskala-laufweite-minus-0-2: -0.2px; /* Ergänzung: letter spacing -0.2px on the type scale */
  --schriftskala-laufweite-0-2: 0.2px; /* Ergänzung: letter spacing 0.2px on the type scale */
  --schriftskala-laufweite-0-3: 0.3px; /* Ergänzung: letter spacing 0.3px on the type scale */
  --schriftskala-laufweite-0-4: 0.4px; /* Ergänzung: letter spacing 0.4px on the type scale */
  --schriftskala-laufweite-0-6: 0.6px; /* Ergänzung: letter spacing 0.6px on the type scale */
  --schriftskala-laufweite-0-8: 0.8px; /* Ergänzung: letter spacing 0.8px on the type scale */
  --schriftskala-laufweite-1: 1px; /* Ergänzung: letter spacing 1px on the type scale */
  --schriftskala-laufweite-1-1: 1.1px; /* Ergänzung: letter spacing 1.1px on the type scale */
  --schriftskala-laufweite-1-2: 1.2px; /* Ergänzung: letter spacing 1.2px on the type scale */
  --schriftskala-laufweite-1-3: 1.3px; /* Ergänzung: letter spacing 1.3px on the type scale */
  --schriftskala-laufweite-1-4: 1.4px; /* Ergänzung: letter spacing 1.4px on the type scale */
  /* == Abstände == */
  --abstand-4: 4px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-5: 5px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-6: 6px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-7: 7px; /* Ergänzung: Skala aus dem Design */
  --abstand-8: 8px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-9: 9px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-10: 10px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-11: 11px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-12: 12px; /* Ergänzung: Kleinabstand der Skala, Gap des CTA-Paars */
  --abstand-13: 13px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-14: 14px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-15: 15px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-16: 16px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-17: 17px; /* Ergänzung: Skala aus dem Design */
  --abstand-18: 18px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-20: 20px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-22: 22px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-24: 24px; /* Ergänzung: Kleinabstand der Skala */
  --abstand-26: 26px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-28: 28px; /* Ergänzung: Kleinabstand der Skala, nie als Gap */
  --abstand-30: 30px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-32: 32px; /* Ergänzung: Kleinabstand der Skala, nie als Gap */
  --abstand-34: 34px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-35: 35px; /* Ergänzung: Skala aus dem Design */
  --abstand-36: 36px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-38: 38px; /* Ergänzung: Skala aus dem Design */
  --abstand-40: 40px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-42: 42px; /* Ergänzung: Skala aus dem Design */
  --abstand-44: 44px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-48: 48px; /* Ergänzung: Skala aus dem Design (Rahmen) */
  --abstand-50: 50px; /* Ergänzung: Skala aus dem Design */
  --abstand-52: 52px; /* Ergänzung: Skala aus dem Design */
  --abstand-56: 56px; /* Ergänzung: Skala aus dem Design (Fehlerseiten) */
  --abstand-60: 60px; /* Ergänzung: Skala aus dem Design (Fehlerseiten) */
  --abstand-62: 62px; /* Ergänzung: Skala aus dem Design (whitepaper-kopf, kpi-dashboard) */
  --abstand-64: 64px; /* Ergänzung: Skala aus dem Design */
  --abstand-68: 68px; /* Ergänzung: Skala aus dem Design */
  --abstand-72: 72px; /* Ergänzung: Skala aus dem Design, Raster-Gap Kapitel und Menschen, Laufband-Gap */
  --abstand-76: 76px; /* Ergänzung: Skala aus dem Design */
  --abstand-80: 80px; /* Ergänzung: Skala aus dem Design */
  --abstand-90: 90px; /* Ergänzung: Skala aus dem Design (karten bento, whitepaper-inhalt) */
  --abstand-19: 19px; /* Ergänzung: Skala aus dem Design (werkzeugkasten, zeitachse) */
  --abstand-37: 37px; /* Ergänzung: Skala aus dem Design (kosten-nutzen-rechner, weg-der-daten) */
  --abstand-46: 46px; /* Ergänzung: Skala aus dem Design (karten, suchfeld) */
  --abstand-54: 54px; /* Ergänzung: Skala aus dem Design (hero-navy, weg-der-daten, Fußpolster Ursache-Abschnitt CF Z. 133) */
  --abstand-47: 47px; /* Ergänzung: Skala aus dem Design (app-rahmen, team) */
  --abstand-96: 96px; /* Ergänzung: Skala aus dem Design */
  --seitenrand: 64px; /* Vertrag: page and section margin, 32 px from 768 to 1079 px */
  --abstand-seitenrand-eng: 40px; /* Ergänzung: Seitenrand der Seiten mit Seitenstufen (data-breiten) von 768 bis 1023 px */
  --abstand-seitenrand-breit: 64px; /* Ergänzung: Seitenrand der Seiten mit Seitenstufen (data-breiten) ab 1024 px */
  --abstand-seitenrand-crm: 56px; /* Ergänzung: page margin of the CRM product page from 1024 px (CRM Produktseite v2: padding 56px) */
  --breite-kopf-links: 340px; /* Ergänzung: head column of the cards with the head on the left (Onboarding v2 Z. 413) */
  --breite-karte-min: 400px; /* Ergänzung: Statuskarte im ISO-Hero 1180 bis 1279 px (Sicherheit ISO v3 rHero) */
  --breite-karte-max: 640px; /* Ergänzung: Hero-Karte einspaltig (Sicherheit ISO v3, Sicherheit Hosting v2 heroKarte) */
  --breite-grafik-max: 460px; /* Ergänzung: Grafik des Unterlagen-Teasers einspaltig (Sicherheit ISO v3 teaserBild, DSGVO v3 abschlussBild) */
  --hoehe-grafik-schmal: 236px; /* Ergänzung: Höhe der Blattgrafik unter 1100 px (Sicherheit DSGVO v3 abschlussBild) */
  --breite-nachweise-umbruch: 760px; /* Ergänzung: Inhaltsbreite, ab der Nachweis-Text und Firmenkarte nebeneinander stehen (Team v2) */
  --breite-zeitplan-min: 980px; /* Ergänzung: Mindestbreite des wischbaren Zeitplans unter 1024 px (Migration planMin) */
  --abstand-sektion: 56px; /* Spec: Sektion vertikal */
  --abstand-sektion-gross: 88px; /* Spec: Sektion vertikal auf Vergleichsseiten */
  --abstand-sektion-kapitel: 96px; /* Vertrag: vertikale Polster der Kapitel (Über uns) */
  --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 */
  --abstand-kopf-y-kompakt: var(--abstand-8); /* Vertrag: vertikales Polster der Kopfleiste im Kompaktmodus */
  --abstand-sitemap-brotkrumen-oben: 52px; /* Ergänzung: HTML sitemap, top padding of the breadcrumbs from 1080px */
  --abstand-sitemap-brotkrumen-oben-gestapelt: 42px; /* Ergänzung: HTML sitemap, top padding of the breadcrumbs below 1080px */
  --abstand-suche-brotkrumen-oben: 40px; /* Ergänzung: Suchseite, Polster oben der Brotkrumen in der grauen Fläche, alle Breiten */
  --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 */
  --abstand-fehler-adresse-x: 28px; /* Vertrag: Fehlerseiten, Adressbox seitlich */
  --abstand-fehler-treffer-x: 36px; /* Vertrag: Fehlerseiten, Karte „Meinten Sie“ seitlich */
  --abstand-fehler-karte-x: 32px; /* Vertrag: Fehlerseiten, Karte „Keine eindeutige Seite“ und Karten der 410 seitlich */
  --abstand-fehler-bereich-x: 26px; /* Vertrag: Fehlerseiten, Bereichskarte seitlich */
  --abstand-fehler-knopf-x: 28px; /* Vertrag: Fehlerseiten, Knopf „Zur Seite“ der 404 seitlich */
  --abstand-fehler-knopf-klein-x: 26px; /* Vertrag: Fehlerseiten, Knopf „Zur Seite“ der 410 seitlich */
  --abstand-fehler-eingabe-x: 22px; /* Vertrag: Fehlerseiten, Suchfeld der 404, Eingabe links */
  --breite-sitemap-titel-max: 640px; /* Ergänzung: HTML sitemap, max width of the page heading */
  --breite-sitemap-lead-max: 560px; /* Ergänzung: HTML sitemap, max width of the lead */
  --breite-sitemap-spalte-rechts: 0.42fr; /* Ergänzung: HTML sitemap, column share of the quick links next to the intro */
  --breite-fehler-spalte-max: 920px; /* Vertrag: Fehlerseiten, Höchstbreite der Spalte der 404 */
  --breite-fehler-spalte-schmal-max: 820px; /* Vertrag: Fehlerseiten, Höchstbreite der Spalte der 410 */
  --breite-fehler-paar-max: 1040px; /* Vertrag: Fehlerseiten, Höchstbreite des Paar-Rasters der 410 */
  --breite-fehler-lead-max: 600px; /* Vertrag: Fehlerseiten, Höchstbreite des Leads */
  --breite-fehler-diagnose-max: 620px; /* Vertrag: Fehlerseiten, Höchstbreite der Diagnose */
  --breite-chronik-max: 1000px; /* Vertrag: Höchstbreite der Kapitel Über uns */
  --breite-inhalt-weit-max: 1312px; /* Ergänzung: 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; seit nur Über uns (Ueber uns Chronik v3 `max-width:1200px`), Standort- und Termin-Abschluss und Fußnoten */
  --breite-inhalt-schmal-max: 1100px; /* Ergänzung: Wochenkarten „Wie kommen wir hinein?“ (Warum brainX `max-width:1100px`, Z. 240) */
  --linie-sitemap-schnell: 2px; /* Ergänzung: HTML sitemap, line left of the quick links */
  --linie-sitemap-bereich: 1.5px; /* Ergänzung: HTML sitemap, line below the section head */
  --linie-sitemap-unter: 1.5px; /* Ergänzung: Linie links an eingerückten Sitemap-Links (Sitemap MAP `sub`) */
  --linie-fehler-welle: 1.5px; /* Vertrag: Fehlerseiten, Wellenlinie unter unbekannten Wörtern der Adresse (404) und Durchstreichung der entfernten Adresse (410) */
  --breite-dialog: 560px; /* Vertrag: Dialog-Karte (unter 640 px 100 % im Baustein) */
  --breite-dialog-weit: 660px; /* Vertrag: Free-Dialog Stufe 2 (unter 640 px 100 % im Baustein) */
  --breite-free-formular: 440px; /* Vertrag: Hero-Spalte /free/ (mobil 100 % im Baustein) */
  --groesse-checkbox: 17px; /* Vertrag: Einwilligungs-Häkchen */
  --groesse-captcha-platz: 58px; /* Vertrag: reservierte Mindesthöhe des Captcha-Platzes (TrustCaptcha 3.0.2) */
  --groesse-haken-gross: 56px; /* Vertrag: Haken-Kreis der Danke-Seite */
  --groesse-abspielen-gross: 64px; /* Vertrag: Play-Kreis YouTube (mobil 52 px im Baustein) */
  --groesse-schliessen: 34px; /* Vertrag: Schließen-Knopf des Dialogs */
  --hoehe-zeeg: 780px; /* Vertrag: zeeg-Platzhalter und Mindesthöhe des iframes */
  --abstand-100: 100px; /* Vertrag: Abstand oben Pakete und Konfigurator unter dem überlappenden Umschalter (mobil --abstand-56 im Baustein) */
  --breite-preise-hero-kasten: 430px; /* Vertrag: Glas-Kasten des Preise-Hero (mobil 100 % im Baustein) */
  --breite-konfigurator-auswahl: 400px; /* Vertrag: Auswahl-Spalte des Konfigurators (mobil 100 % im Baustein) */
  --breite-rechner-bilanz: 360px; /* Vertrag: Live-Bilanz des Kosten-Nutzen-Rechners (mobil 100 % im Baustein) */
  --breite-rechner-protokoll: 300px; /* Vertrag: Protokoll des Kosten-Nutzen-Rechners (mobil 100 % im Baustein) */
  --hoehe-rechner-interview-min: 520px; /* Vertrag: Mindesthöhe der Interview-Karte */
  --versatz-sticky-seitenspalte: 94px; /* Vertrag: top der klebenden Auswahl-Spalte */
  --abstand-58: 58px; /* Vertrag: Sektionen der APP-Detailseiten (VF, CF, AD) */
  --abstand-66: 66px; /* Vertrag: Mehrwerte der Paketseiten (mobil 40px im Baustein, Skala bleibt mobil fest) */
  --breite-hero-bild: 580px; /* Vertrag: rechte Spalte im CP-Hero (hero-navy rechts_breite: bild; gestapelt ab stapeln) */
  --abstand-84: 84px; /* Vertrag: Sektionspolster der Integrationsseiten (alle Integrations-Bausteine; Skala mobil fest) */
  --breite-text-max: 760px; /* Vertrag: Höchstbreite der Kopfblöcke (alle öpfe) */
  --breite-lead-max: 560px; /* Vertrag: Höchstbreite des Leads (hero-integration, Vergleiche) */
  --breite-whitepaper-cover: 380px; /* Vertrag: Cover-Spalte im Hero der Whitepaper-Detailseite (whitepaper-kopf) */
  --breite-seitenspalte: 400px; /* Vertrag: Seitenspalte mit der Download-Karte (whitepaper-inhalt) */
  --breite-recht-spalte: 340px; /* Vertrag: Verzeichnis-Spalte der Rechtsseiten (rechtstext) */
  --breite-impressum-spalte: 400px; /* Vertrag: Spalte der Firmenkarte im Impressum (rechtstext variante impressum) */
  --breite-rechtstext-max: 820px; /* Vertrag: Höchstbreite der Textspalte der Rechtsseiten (rechtstext) */
  --breite-register: 360px; /* Vertrag: Spalte der Begriffsliste im Lexikon (glossar-register) */
  --breite-api-nav: 264px; /* Vertrag: Spalte der Navigation der API-Referenz (api-referenz) */
  --abstand-104: 104px; /* Vertrag: Sektionspolster 104 px (Scrollstory-Hülle, `abschluss-cta navy-termin`, `chronik-kapitel` kurz, Startseite) */
  --breite-buehne-app: 1288px; /* Vertrag: Höchstbreite der 4b-Bühnen und des KPI-Dashboards (Element-CSS hero-4b; kpi-dashboard) */
  --hoehe-demo-leiste: 77px; /* Vertrag: Freiraum am Fuß und scroll-padding-bottom (demo-leiste) */
  --breite-seitenspalte-whitepaper: 324px; /* Ergänzung: 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) */
  --breite-story-text-max: 560px; /* Ergänzung: APP Produktseite Tour v3 Z. 1431–1432, Text und Punkte der Tour */

  /* Supplementary values for the error pages with no matching existing token. */
  --farbe-fehler-marke-rand: rgba(255,176,143,.45); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C */
  --farbe-fehler-weg-linie: rgba(79,216,188,.55); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C */
  --farbe-fehler-server-punkt: rgba(255,255,255,.22); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C */
  --schatten-fehler-karte-hover: 0 26px 50px -30px rgba(30,40,80,.45); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C */
  --schatten-fehler-suchfokus: 0 0 0 3px rgba(255,60,0,.16); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C */
  --schatten-fehler-halo-mint-an: 0 0 0 4px rgba(0,180,143,.28); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C */
  --schatten-fehler-halo-mint-aus: 0 0 0 9px rgba(0,180,143,.06); /* Ergänzung: Design, Fehlerseiten 404 C / 410 C */

  /* == 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 */
  --radius-promo: 12px; /* Vertrag: Promo und Tabs */
  --radius-kachel: 9px; /* Vertrag: Icon-Kachel 34 px */
  --radius-kachel-klein: 7px; /* Vertrag: Icon-Kachel 24 px */
  --radius-code: 4px; /* Vertrag: Ecken von Code, Methoden-Badges, Portal-Marke und Wege-Nummern (api-referenz, portal-karte, support-wege) */
  --radius-karte-klein: 18px; /* Vertrag: Kennzahlen-Rahmen, Standortkarte, Firmenkarte */
  --radius-karte-gross: 22px; /* Vertrag: Terminkarte, OG-Motiv, Sicherheit */
  --radius-app-karte: 8px; /* Vertrag: Bühnen, Karten der Oberfläche */
  --radius-app-fenster: 12px; /* Vertrag: Bühnen, Fenster der Oberfläche und der Fremdsysteme */
  --radius-app-toast: 28px; /* Vertrag: Bühnen, Toast */
  --radius-story-deko: 40px; /* Vertrag: Scrollstory, Deko-Fläche hinter dem Fenster */
  --radius-klein: 8px; /* Vertrag: kleine Karten, Balken, Chips (wertgleich --radius-app-karte, andere Rolle) */
  --radius-box-gross: 32px; /* Vertrag: Zwischen-CTA, Werkzeugkasten- und Abschluss-Box der Automatisierung („border-radius: 32px“) */
  --radius-strich: 2px; /* Vertrag: Balken und Fortschritt (stationen ablauf; mini-rechner, vergleichsmatrix; DV2 Z. 174) */
  --radius-video-toast: 38px; /* Vertrag: Toast der Produktvideos (Element-CSS video; ≠ --radius-app-toast 28px) */
  --radius-element-fenster: 5px; /* Vertrag: Reiter und Fenster der Vorher-Seite (hero-regler) */
  --radius-element-strich: var(--radius-strich); /* Vertrag: icon squares, text lines, track and active stroke of the slider stages; same value as --radius-strich (hero-regler) */
  /* == Schatten == */
  --schatten-karte-aktiv: 0 26px 50px -26px rgba(10,15,35,.7); /* Spec: aktive Karte hell (Design nutzt .45, Sichtvergleich) */
  --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: weißer Ring der Paketpunkte auf den Speichen (AD Z. 179) */
  --schatten-szenario-aktiv: 0 8px 20px -14px rgba(255,60,0,.7); /* Ergänzung: gewählte Szenario-Kachel (VF Z. 835) */
  --schatten-hotspot: 0 8px 20px -6px rgba(16,22,40,.6); /* Ergänzung: Hotspots des Vertragsformulars (VF Z. 301) */
  --schatten-hotspot-aktiv: 0 8px 20px -6px rgba(16,22,40,.6), 0 0 0 8px rgba(255,60,0,.22); /* Ergänzung: aktiver Hotspot mit orangem Ring (VF Z. 301) */
  --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: switch area "without/with package" (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 */
  --schatten-kopf-kompakt: 0 12px 28px -22px rgba(30,40,80,.65); /* Vertrag: Kopfleiste im Kompaktmodus */
  --schatten-panel: 0 30px 60px -28px rgba(30,40,80,.35); /* Vertrag: Mega-Panel und Burger-Sheet */
  --schatten-suchpanel: 0 30px 60px -28px rgba(30,40,80,.4); /* Vertrag: Suchpanel im Kopf */
  --schatten-treffer: 0 18px 36px -24px rgba(30,40,80,.4); /* Vertrag: Trefferkarte im Hover */
  --schatten-tab-aktiv: 0 12px 26px -16px rgba(10,15,35,.5); /* Vertrag: aktiver Tab */
  --schatten-dialog: 0 40px 90px -30px rgba(0,0,0,.6); /* Vertrag: Dialog */
  --schatten-fehler-halo-an: 0 0 0 0 var(--farbe-halo-orange); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, Beginn der Animation */
  --schatten-fehler-halo-aus: 0 0 0 9px var(--farbe-halo-orange-aus); /* Vertrag: Halo am Knopf „Zur Seite“ der 404, Mitte der Animation */
  --schatten-fehler-adresse: 0 22px 44px -32px rgba(30,40,80,.4); /* Vertrag: Adressbox der 404 */
  --schatten-karte-navy-hover: 0 36px 64px -30px rgba(30,40,80,.62); /* Vertrag: Karte „Meinten Sie“ im Hover */
  --schatten-karte-hover: 0 24px 50px rgba(30,40,80,.12); /* Vertrag: Hover der Karten absage */
  --schatten-cta: 0 18px 36px -18px rgba(255,60,0,.8); /* Vertrag: Primärbutton des Abschlusses navy-termin */
  --schatten-beleg: 0 40px 80px -48px rgba(16,22,40,.7); /* Vertrag: Beleg navy-3 */
  --schatten-widget: 0 20px 50px -40px rgba(30,40,80,.35); /* Vertrag: dashboard-widget */
  --schatten-avatar-ring: 0 0 0 3px var(--farbe-weiss); /* Vertrag: überlappende Avatare (Beleg linksbalken) */
  --schatten-karte-pin: 0 0 0 2.5px var(--farbe-weiss), 0 6px 14px -4px rgba(255,60,0,.6); /* Vertrag: Standortkarte, Pin */
  --schatten-karte-etikett: 0 10px 24px -12px rgba(16,22,40,.7); /* Vertrag: Standortkarte, Etikett */
  --schatten-puls-orange-an: 0 0 0 0 rgba(255,60,0,.55); /* Vertrag: Marker „Heute“, Beginn des Pulses (reduziert aus) */
  --schatten-puls-orange-aus: 0 0 0 12px rgba(255,60,0,0); /* Vertrag: Marker „Heute“, Ende des Pulses (reduziert aus) */
  --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) */
  --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) */
  --schatten-tooltip: 0 18px 40px -18px rgba(0,0,0,.6); /* Vertrag: Tooltip des dashboard-widget */
  --schatten-szenario-aus: 0 0 0 4px rgba(255,60,0,.18); /* Vertrag: Ring des Szenario-Schalters, aus */
  --schatten-szenario-an: 0 0 0 4px rgba(0,180,143,.22); /* Vertrag: Ring des Szenario-Schalters, an */
  --schatten-buehne: 0 30px 60px -36px rgba(30,40,80,.45); /* Vertrag: Rahmen karte der Bühnen */
  --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 */
  --schatten-app-toast: 0 20px 44px -16px rgba(18,24,45,.3), 0 4px 14px rgba(18,24,45,.08); /* Vertrag: Bühnen, Toast */
  --schatten-app-etikett: 0 10px 24px -8px rgba(0,0,0,.45); /* Vertrag: Bühnen, fliegendes Etikett */
  --schatten-fremd-snapaddy-karte: 0 12px 26px rgba(0,0,0,.45); /* Vertrag: Bühnen, snapADDY Visitenkarte */
  --schatten-fremd-snapaddy-scan: 0 0 12px 3px rgba(79,209,255,.6); /* Vertrag: Bühnen, snapADDY Leuchten der Scanlinie */
  --schatten-story-fenster-navy: 0 40px 80px -36px rgba(0,0,0,.65); /* Vertrag: Scrollstory, Fenster dunkel */
  --schatten-story-fenster: 0 30px 60px -30px rgba(30,40,80,.45); /* Vertrag: Scrollstory, Fenster hell */
  --schatten-zeiger: 0 1px 1.5px rgba(0,0,0,.32); /* Vertrag: Scrollstory, Zeiger per drop-shadow */
  --schatten-app-karte-flach: 0 2px 6px rgba(0,0,0,.05); /* Vertrag: Bühnen, flache Karten */
  --schatten-app-dialog: 0 40px 80px -30px rgba(10,15,35,.55); /* Vertrag: Bühnen, Dialoge */
  --schatten-app-auswahl: 0 22px 44px -14px rgba(10,15,35,.38), 0 0 0 1px var(--farbe-app-linie); /* Vertrag: Bühnen, Auswahlliste */
  --schatten-app-auswahl-hover: inset 0 0 0 2px var(--farbe-app-chip-orange-text); /* Vertrag: Bühnen, Auswahlliste im Hover */
  --schatten-app-feld-fokus: 0 0 0 3px var(--farbe-icon-orange); /* Vertrag: Bühnen, Fokus der Eingabefelder */
  --schatten-app-reiter-aktiv: inset 0 -3px 0 var(--farbe-orange-flaeche); /* Vertrag: Bühnen, aktiver Reiter */
  --schatten-video-markierung: 0 0 0 6px var(--farbe-markierung); /* Vertrag: Produktvideo, Markierung */
  --schatten-video-hinweis: 0 30px 60px -24px rgba(10,15,35,.6); /* Vertrag: Produktvideo, Karte „Im Hintergrund“ */
  --schatten-video-kapitel: 0 16px 30px -14px rgba(10,15,35,.5); /* Vertrag: Produktvideo, Kapitel-Chip */
  --schatten-video-zeiger: 0 3px 4px rgba(0,0,0,.35); /* Vertrag: Produktvideo, Zeiger per drop-shadow */
  --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 */
  --schatten-fremd-website-fokus: 0 0 0 3px rgba(36,39,46,.12); /* Vertrag: Bühnen, Feldfokus des Website-Formulars */
  --schatten-feld-pille: 0 18px 40px -26px rgba(30,40,80,.45); /* Vertrag: Free-Pille */
  --schatten-beleg-danke: var(--schatten-fehler-adresse); /* Vertrag: Beleg-Karte und Kachel der Danke-Seite (eigene Rolle) */
  --schatten-karte-hover-weich: 0 26px 50px -32px rgba(10,15,35,.45); /* Vertrag: Wegkarte der Danke-Seite im Hover */
  --schatten-tab-thema: 0 14px 30px -18px rgba(10,15,35,.45); /* Vertrag: aktiver Thementab der Danke-Seite */
  --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) */
  --schatten-stationen: 0 40px 80px -50px rgba(30,40,80,.45); /* Vertrag: Stationen-Karte */
  --schatten-tab-station: 0 14px 30px -16px rgba(30,40,80,.45), 0 0 0 1px var(--farbe-linie-karte); /* Vertrag: aktiver Stationen-Tab */
  --schatten-halo-orange-aus: 0 0 0 9px rgba(255,60,0,.05); /* Vertrag: station dot, middle of the halo (on: --schatten-szenario-aus) */
  --schatten-video: 0 24px 50px -24px rgba(30,40,80,.4); /* Vertrag: Video-Innenrahmen der Stationen */
  --schatten-free-fenster: 0 40px 80px -36px rgba(30,40,80,.4); /* Vertrag: Fenster der Free-Vorschau */
  --schatten-karte-hover-klein: 0 16px 30px -18px rgba(30,40,80,.35); /* Vertrag: Karten /free/ im Hover */
  --schatten-karte-lift: 0 1px 2px rgba(30,40,80,.05), 0 18px 34px -18px rgba(30,40,80,.26); /* Ergänzung: 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: 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: 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: Rechte-Liste der DSGVO-Seite in Ruhe */
  --schatten-karte-navy-tief: 0 20px 40px -28px rgba(30,40,80,.8); /* Vertrag: Navy-Karte /kontakt */
  --schatten-youtube-rahmen: 0 26px 54px -40px rgba(30,40,80,.55); /* Vertrag: Rahmen youtube-zweiklick (Optik Case-Study-Videorahmen) */
  --schatten-karte-aktiv-hover: 0 34px 60px -26px rgba(10,15,35,.8); /* Vertrag: Umschalter-Karte im Hover */
  --schatten-ueberlagerung: 0 26px 44px -26px rgba(30,40,80,.45); /* Vertrag: Details-Überlagerung des Konfigurators */
  --schatten-interview: 0 12px 34px -26px rgba(30,40,80,.45); /* Vertrag: Interview-Karte */
  --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 */
  --schatten-ring-hell: 0 0 0 4px var(--farbe-flaeche-hell); /* Vertrag: Ring um Nummern und Punkte (Kette, Etappen, Zeitplan) */
  --schatten-karte-ruhe: 0 1px 2px rgba(16,22,40,.04), 0 14px 28px -24px rgba(16,22,40,.32); /* Vertrag: Karten in Ruhe */
  --schatten-story-umschalter: 0 8px 20px -10px rgba(16,22,40,.45); /* Vertrag: Umschalter-Knöpfe im Story-Fenster (T3 Z. 473) */
  --schatten-app-deal: 0 10px 24px -16px rgba(23,33,60,.35); /* Vertrag: Bühne automation-ablauf, Deal-Karte */
  --schatten-app-zeiger: 0 2px 3px rgba(23,33,60,.35); /* Vertrag: Bühne automation-ablauf, Zeiger per drop-shadow */
  --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) */
  --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) */
  --schatten-logo-kachel: 0 8px 22px -14px rgba(30,40,80,.25); /* Vertrag: Logo-Kachel 68 × 68 (hero-integration) */
  --schatten-medium: 0 30px 60px -40px rgba(30,40,80,.45); /* Vertrag: Bühne und Ablauf-Medium (hero-integration, stationen ablauf) */
  --schatten-kachel-hover: 0 20px 36px -22px rgba(30,40,80,.5); /* Vertrag: Integrations-Kachel im Hover und Fokus (sammelliste) */
  --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 B, hero-docuseal, hero-mollie, hero-stripe, hero-jira) */
  --schatten-fremd-teams-fenster: 0 24px 48px -16px rgba(0,0,0,.5); /* Vertrag: Bühnen, Teams Anruffenster (hero-microsoft365) */
  --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; HI Z. 272) */
  --schatten-fremd-zahlung-karte: 0 2px 10px rgba(0,0,0,.08); /* Vertrag: Bühnen, Bezahlkarte Mollie/Stripe (Gruppe zahlung; HI Z. 1265, 1280) */
  --schatten-fremd-jira-karte: 0 1px 2px rgba(9,30,66,.25); /* Vertrag: Bühnen, Jira-Karte im Board (hero-jira; HI Z. 1369) */
  --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; HI Z. 235) */
  --schatten-fremd-zapier-schritt: 0 0 0 3px rgba(110,86,207,.18); /* Vertrag: Bühnen, Ring des aktiven Zapier-Schritts (hero-zapier; HI Z. 641) */
  --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; HI Z. 78) */
  --schatten-screenshot: 0 22px 40px -28px rgba(30,40,80,.55); /* Vertrag: Linkkarten und Screens (stationen, modulkette; DV2 Z. 325) */
  --schatten-karte-auf-navy: 0 30px 60px -30px rgba(0,0,0,.5); /* Vertrag: Beispielkarte auf Navy (besonderheit; DV2 Z. 260) */
  --schatten-grafik-kachel: 0 1.875cqw 3.75cqw -2.375cqw rgba(30,40,80,.4); /* Vertrag: Logo-Kachel der Ablauf-Grafiken (stationen-grafiken; ZP Z. 192) */
  --schatten-vgl-karte: 0 2px 6px rgba(18,24,45,.06); /* Vertrag: Karte der Szenen (vgl-bild; VB Z. 32) */
  --schatten-vgl-toast: 0 12px 24px -8px rgba(18,24,45,.45); /* Vertrag: Toast der Szenen (vgl-bild; VB Z. 49) */
  --schatten-vgl-dialog: 0 30px 60px -20px rgba(18,24,45,.5); /* Vertrag: Dialog der Szenen (vgl-bild abo, erechnung, datev; VB Z. 130, 152, 220) */
  --schatten-vgl-knopf-punkt: 0 1px 2px rgba(0,0,0,.2); /* Vertrag: Knopf des Schalters (vgl-bild; VB Z. 58) */
  --schatten-vgl-karte-test: 0 14px 30px -18px rgba(30,40,80,.35); /* Vertrag: Karte brainX APP Free (vgl-bild test; VB Z. 256) */
  --schatten-vgl-kette: 0 12px 22px -10px rgba(30,40,80,.55); /* Vertrag: Aktives Kettenglied (vgl-bild kette; VB Z. 208) */
  --schatten-download-karte: 0 26px 50px -40px rgba(30,40,80,.6); /* Vertrag: Download-Karte der Whitepaper-Detailseite (whitepaper-inhalt; portal-karte) */
  --schatten-eintrag-aktiv: 0 4px 14px -8px rgba(30,40,80,.3); /* Vertrag: aktiver Verzeichnis- und Navigationseintrag (rechtstext; api-referenz) */
  --schatten-pille-hell: 0 8px 22px -16px rgba(30,40,80,.3); /* Vertrag: Pille „NEU IN brainX“ (neuigkeiten-kopf) */
  --schatten-api-code-ok: inset 0 0 0 1.5px var(--farbe-gruen-text); /* Vertrag: ausgewählter Erfolgs-Code der API-Referenz */
  --schatten-api-code-fehler: inset 0 0 0 1.5px var(--farbe-fehler-text); /* Vertrag: ausgewählter Fehler-Code der API-Referenz */
  --schatten-api-zeile-gewaehlt: inset 0 0 0 1.5px var(--farbe-navy); /* Ergänzung: gewählte Zeile der Fehlercode-Liste der API-Referenz */
  --schatten-karte-petrol: 0 22px 44px -30px rgba(22,50,60,.8); /* Vertrag: Schatten der Telefon-Karte (support-wege) */
  --schatten-bild: 0 24px 60px -30px rgba(30,40,80,.3); /* Vertrag: Bild des Kernunterschieds und Loop-Kacheln der Branchen (kernunterschied; video-loop-Hülle) */
  --schatten-rollenkarte-hover: 0 20px 40px -32px rgba(30,40,80,.5); /* Vertrag: Rollenkarte im Hover und Fokus (rollenkarten; karten leiste) */
  --schatten-halo-schritt: 0 0 0 4px var(--farbe-icon-orange); /* Vertrag: Halo der aktiven Schritt-Karte (schritte-karte; DA S1) */
  --schatten-buehne-oben: 0 -10px 60px -30px rgba(30,40,80,.25); /* Vertrag: Rahmen der 4b-Bühnen (Element-CSS hero-4b) */
  --schatten-regler-knopf: 0 12px 28px -12px rgba(255,60,0,.85); /* Vertrag: Knopf des Vorher-Nachher-Reglers (produkt-animation) */
  --schatten-element-fenster: 0 18px 34px -18px rgba(23,33,60,.45); /* Vertrag: Fenster der Vorher-Seite (hero-regler) */
  --schatten-element-zettel: 0 14px 26px -12px rgba(23,33,60,.5); /* Vertrag: Klebezettel der Vorher-Seite (hero-regler) */
  --schatten-element-karte: 0 8px 16px -10px rgba(23,33,60,.4); /* Vertrag: eingescannte Visitenkarten der Vorher-Seite (hero-regler) */
  --schatten-app-fehler-pille: 0 8px 18px -8px rgba(220,51,51,.9); /* Vertrag: rote Fehler-Pillen der Vorher-Seite (hero-regler) */
  --schatten-element-scan: inset 0 0 40px rgba(120,130,150,.16); /* Vertrag: Papier des Scans auf der Vorher-Seite (hero-regler) */
  --schatten-regler-puls-an: 0 0 0 0 rgba(255,60,0,.45); /* Vertrag: Ring-Puls des Regler-Knopfs, Beginn (produkt-animation) */
  --schatten-regler-puls-aus: 0 0 0 22px rgba(255,60,0,0); /* Vertrag: Ring-Puls des Regler-Knopfs, Ende (produkt-animation) */
  --schatten-knoten-vorher: 0 0 0 3px var(--farbe-linie-eingabe); /* Vertrag: Knoten der Zeitleiste auf der Vorher-Seite (hero-regler) */
  --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) */
  --schatten-app-reiter-schmal: inset 0 -2px 0 var(--farbe-orange-flaeche); /* Vertrag: aktiver Reiter der Regler-Bühnen (hero-regler) */
  --schatten-app-zelle-fehler: inset 0 0 0 1.5px var(--farbe-app-fehler); /* Vertrag: Tabellenzelle mit Fehler auf der Vorher-Seite (hero-regler) */
  --schatten-app-auswahl-hover-text: inset 0 0 0 2px currentColor; /* Vertrag: Auswahleintrag unter dem Zeiger in Textfarbe (Produktvideos) (video-abschluss; VS DB) */
  --schatten-video-fokus-ring: 0 0 0 3px var(--farbe-orange-flaeche); /* Vertrag: Fokusring um das Statusfeld der Deal-Liste im Produktvideo (video-abschluss; VS DB) */
  --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; VS DB) */
  --schatten-video-toast-schliessen: 0 4px 12px rgba(18,24,45,.22); /* Vertrag: Schließkreis am Toast der Produktvideos (video-abschluss; VS DB) */
  --schatten-video-toast-symbol: inset 0 0 0 3px var(--farbe-mint-akzent); /* Vertrag: Symbolkreis im Toast der Produktvideos (video-abschluss; VS DB) */
  --schatten-video-pille: inset 0 0 0 1px rgba(255,255,255,.22); /* Vertrag: Integrations-Pille in der Karte Im Hintergrund (video-abschluss; VS DB) */
  --schatten-video-haken-leer: inset 0 0 0 2px var(--farbe-navy-rand-mittel); /* Vertrag: offener Schritt in der Karte Im Hintergrund (video-abschluss; VS DB) */
  --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; VS DB) */
  --schatten-preis-aktiv: 0 26px 50px -26px rgba(10,15,35,.35); /* Vertrag: APP-Preiskarte (preis-karten, S11) */

  --schatten-leiste-unten: 0 -10px 30px -16px rgba(10,15,35,.3); /* Vertrag: Feste Demo-Leiste (demo-leiste) */

  --schatten-umzug: 0 30px 70px -44px rgba(30,40,80,.4); /* Vertrag: Umzug-Karte (umzug) */
  --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“, Rollen) */
  --schatten-umschalter-spur: inset 0 1px 3px rgba(30,40,80,.16); /* Ergänzung: Design, Spur des Zeilen-Umschalters (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --schatten-umschalter-knopf: 0 2px 6px -2px rgba(30,40,80,.4); /* Ergänzung: Design, Schieber des Zeilen-Umschalters (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --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“, Rollen) */
  --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“, Rollen) */
  --schatten-vergleich: 0 24px 60px -30px rgba(30,40,80,.3); /* Ergänzung: Design, Hülle der Vergleichsgrafik (Loesung Abrechnung v3 Z. 114) */

  --schatten-vertragshero: 0 40px 80px -50px rgba(16,22,40,.45); /* Ergänzung: Schatten der Hero-Karte (VF Z. 61) */
  --schatten-landkarte-puls-aus: 0 0 0 0 rgba(0,180,143,.4); /* Ergänzung: Automatisierung v7 Z. 38, Puls des Hubs, Start */
  --schatten-landkarte-puls-an: 0 0 0 14px rgba(0,180,143,0); /* Ergänzung: Automatisierung v7 Z. 38, Puls des Hubs, Ende */
  --schatten-regler-knopf-roi: 0 2px 8px rgba(30,40,80,.35); /* Ergänzung: ROI-Rechner v3 Z. 29–30, Regler-Knopf */
  --schatten-story-punkt-leer: inset 0 0 0 1.5px var(--farbe-status-leer); /* Ergänzung: APP Produktseite Tour v3 Z. 1444–1446, offener Punkt */
  --schatten-story-punkt-besucht: inset 0 0 0 1.5px var(--farbe-navy); /* Ergänzung: 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: APP Produktseite Tour v3 Z. 1444–1446, aktiver Punkt */
  --schatten-markierung-links: inset 3px 0 0 var(--farbe-orange-flaeche); /* Ergänzung: Case Study Brainformatik, aktives Kapitel der Seitenspalte (Design Case Study v3) */
  --farbe-flaeche-orange-zart: #FDF3F0; /* Ergänzung: Case Study Brainformatik, Kostenkasten (Design Case Study v3, 27.10.2026) */
  --schatten-umzug-haken-leer: inset 0 0 0 2px var(--farbe-linie-eingabe); /* Ergänzung: 27.10., Haken der Zielkarte vor der Einblendung (Loesung Excel-Cashflow v3 „Umzug“) */
  /* == 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: Hover-Lift der Karten auf Hosting und DSGVO */
  --bewegung-dauer-lift: .18s; /* Ergänzung: Übergangsdauer des Hover-Lifts auf Hosting und DSGVO */
  --bewegung-kopf-dauer: .28s; /* Vertrag: Wechsel in den Kompaktmodus */
  --bewegung-kopf-kurve: cubic-bezier(.22,.61,.36,1); /* Vertrag: Kurve des Kompaktmodus */
  --bewegung-panel-dauer: .24s; /* Vertrag: Panels und Suchfeld */
  --bewegung-laufband-dauer: 38s; /* Vertrag: Laufband */
  --bewegung-lift-karte: -5px; /* Vertrag: Hover-Lift der Karten absage */
  --bewegung-laufband-dauer-einfarbig: 42s; /* Vertrag: logo-laufband einfarbig (Preise APP) */
  --bewegung-story-schritt: .35s; /* Vertrag: Scrollstory, Farbwechsel der Schritte (reduziert aus) */
  --bewegung-story-punkt: .25s; /* Vertrag: Scrollstory, Punkte und Seitenleiste (reduziert aus) */
  --bewegung-story-wechsel: 260ms; /* Vertrag: Scrollstory, Überblendung der Ansichten (reduziert aus) */
  --bewegung-kurve-heraus: cubic-bezier(.2,.7,.2,1); /* Vertrag: Scrollstory, Kurve der Überblendung */
  --bewegung-wechsel-dauer: .5s; /* Vertrag: Wechsel-Fade der Stationen (reduziert 0s) */
  --bewegung-wechsel-kurve: cubic-bezier(.2,.8,.2,1); /* Vertrag: Kurve des Wechsel-Fades der Stationen */
  --bewegung-ablauf-wechsel-dauer: .45s; /* Ergänzung: Design, Wechsel des Ablauf-Panels bxWechsel (Integration Brevo Z. 30, .45s) */
  --bewegung-ablauf-wechsel-kurve: cubic-bezier(.2,.7,.2,1); /* Ergänzung: Design, Kurve des Ablauf-Panel-Wechsels (Integration Brevo, bxWechsel) */
  --bewegung-balken-dauer: .3s; /* Vertrag: Breitenwechsel der meter (reduziert 0s) */
  --bewegung-glow-atem: 9s; /* Vertrag: Glow-Atmen im Aufgaben-Hero (hero-hell aufgabe; reduziert aus) */
  --bewegung-pfeil-takt: 2s; /* Vertrag: Pfeile der Kette (kernunterschied; reduziert aus) */
  --bewegung-einstieg-kurz: .7s; /* Vertrag: Einstieg der Eyebrow steigAuf (hero-hell; H1 mit --bewegung-einstieg-dauer und -staffel) */
  /* Today table, C-level page */
  --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 */
  /* Today cards of the solution pages, desktop and mobile. */
  --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: Wechsel der aktiven Zeile der Rechnungsvorschau (VF Z. 70) */
  --bewegung-vertragshero-puls: 1.6s; /* Ergänzung: Pulsdauer des Fußpunkts (VF heroPuls Z. 37, 883) */
  --bewegung-vertragshero-puls-skala: .7; /* Ergänzung: Skalierung des Pulspunkts bei 50 % (VF heroPuls Z. 37) */
  --bewegung-lupe-zoom: .55s; /* Ergänzung: Zoom der Lupe im Vertragsformular (VF Z. 299, transform .55s) */
  --bewegung-lupe-knopf: .18s; /* Ergänzung: 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 (Formulare) */
  --bewegung-umschalter-schieber: .38s; /* Ergänzung: design, glide of the slider in the row switch (Loesung Vertrieb v3 "Umschalter") */
  --bewegung-umschalter-schieber-kurve: cubic-bezier(.34,1.36,.5,1); /* Ergänzung: design, easing of the slider in the row switch (Loesung Vertrieb v3 "Umschalter") */
  --bewegung-umschalter-wechsel: .82s; /* Ergänzung: Design, Überblendung der Zustände im Zeilen-Umschalter, 820 ms (Loesung Vertrieb v3 „Umschalter“, Rollen) */
  --bewegung-umschalter-wechsel-kurve: cubic-bezier(.65,0,.35,1); /* Ergänzung: Design, Kurve der Überblendung der Zustände (easeInOutCubic, Rollen) */
  --bewegung-umschalter-nudge: 2.6s; /* Ergänzung: Design, Stups des Schiebers im Zustand Heute, dcSchieber (Loesung Vertrieb v3, Rollen) */
  --bewegung-umschalter-pfeil: 1.5s; /* Ergänzung: Design, Stups des Hinweises, dcNudge (Loesung Vertrieb v3, Rollen) */
  /* == Sonstiges == */
  --fokus-ring: 2px solid var(--farbe-navy); /* Vertrag: focus ring, white on navy */
  --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 */
  --kopf-hoehe-kompakt: 57px; /* Vertrag: Höhe der kompakten Kopfleiste, Sprungversatz, gemessen 390/1000/1440 px */
  --kopf-logo-hoehe: 30px; /* Vertrag: Logo in Ruhe */
  --kopf-logo-hoehe-kompakt: 23px; /* Vertrag: Logo im Kompaktmodus */
  --kasten-breite: 1440px; /* Vertrag: Breite des Seitenkastens, gleich kasten in breiten.yaml */
  /* Outline pill of the secondary button "Free-Zugang anfordern" on the solution pages */
  --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) */
  --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) */
  --breite-free-fenster-fest: 440px; /* Ergänzung: Design, Free Anmeldung v2 Mobil Z. 355 und 376, Festbreite des App-Fensters vor dem Skalieren */
  --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)) */
  --deckkraft-inaktiv: .45; /* Vertrag: Absende-Knopf mit aria-disabled */

  /* App frame: sidebar, view header, tables */
  --farbe-app-tabellenkopf: #12161F; /* Ergänzung: Design, dunkler Tabellenkopf der Fenster-Nachbauten */
  --farbe-app-leiste-kachel: #1C1C1E; /* Ergänzung: Design, Mandant- und Nutzerkachel der Seitenleiste */
  --farbe-app-leiste-text: #E4E6EB; /* Ergänzung: Design, Modul der Seitenleiste */
  --farbe-app-leiste-aktiv-text: #FF6B3D; /* Ergänzung: Design, aktives Modul der Seitenleiste */
  --farbe-app-leiste-aktiv-flaeche: rgba(255,60,0,.16); /* Ergänzung: Design, aktives Modul der Seitenleiste */
  --farbe-app-chip-mint-flaeche: #E3F7F1; /* Ergänzung: Design, Chip und Pille mint (Aktiv, Qualifiziert, Quelle am Datensatz) */
  --farbe-app-pille-blau-flaeche: #E4ECFB; /* Ergänzung: Design, Pille Neu und Fällig */
  --farbe-app-pille-warn-flaeche: #FFE9E0; /* Ergänzung: Design, Pille dringend, offen und prüfen */
  --farbe-app-optional-flaeche: #FFF1E8; /* Ergänzung: Design, Etikett „optional“ */
  --farbe-app-zeile-neu: #F2FAF7; /* Ergänzung: Design, neue Zeile und Unterschriftsfeld */
  --farbe-app-zeile-neu-start: #CDEDE2; /* Ergänzung: Design, Beginn der Hervorhebung einer neuen Zeile */
  --farbe-app-pause-linie: #D5DBE6; /* Ergänzung: Design, Rand des Pause-Knopfs */
  --farbe-app-hinweis-orange-text: #C43000; /* Ergänzung: Design, Kicker der Wiedervorlage (Design-Wert; bis Nahdublette von --farbe-orange-text) */
  --farbe-app-hinweis-orange-flaeche: #FFE9E0; /* Ergänzung: Design, Symbolfläche der Wiedervorlage */
  --farbe-app-balken-spur: rgba(30,40,80,.08); /* Ergänzung: Design, Spur des Fortschritts am Fensterfuß */
  --schatten-app-puls-mint-an: 0 0 0 0 rgba(0,180,143,.45); /* Ergänzung: Design, Keyframes dcPuls */
  --schatten-app-puls-mint-aus: 0 0 0 9px rgba(0,180,143,0); /* Ergänzung: Design, Keyframes dcPuls */
  --schatten-app-puls-orange-an: 0 0 0 0 rgba(255,60,0,.35); /* Ergänzung: Design, Keyframes dcNavPuls */
  --schatten-app-puls-orange-aus: 0 0 0 4px rgba(255,60,0,0); /* Ergänzung: Design, Keyframes dcNavPuls */
  --schatten-app-hinweis: 0 14px 28px -22px rgba(255,60,0,.5); /* Ergänzung: Design, Wiedervorlage */
  --farbe-app-knoten-linie: #C6D2E6; /* Ergänzung: Design, Rand der Knoten einer Automations-Kette */
  --farbe-app-knoten-flaeche: #F4F7FB; /* Ergänzung: Design, Fläche der Knoten einer Automations-Kette */
  --schatten-app-knoten-orange: 0 0 0 3px rgba(255,60,0,.12); /* Ergänzung: Design, angepasster Knoten */
  --schatten-app-tabellenkopf: 0 0 0 1px var(--farbe-app-tabellenkopf); /* Ergänzung: Design, dunkler Tabellenkopf ohne Nähte */
  --schatten-app-tabellenkopf-hell: 0 0 0 1px var(--farbe-flaeche-zart); /* Ergänzung: Design, heller Tabellenkopf ohne Nähte */
  --schatten-app-antwort: 0 0 0 3px rgba(0,180,143,.1); /* Ergänzung: Design, Rand der Antwortkarte im Ticket */
  --farbe-app-symbol-blau: #2B58C8; /* Ergänzung: Design, Mail-Symbol im Verlauf */
  --farbe-app-zeile-hervor: #FFF6F2; /* Ergänzung: Design, hervorgehobene Tabellenzeile (Wiedervorlage) */
  --farbe-diagramm-extra: #FFD2C0; /* Ergänzung: Design, Reihe „Extra Services“ der Umsatzvorschau */

  --schatten-schalter-knopf-mint: 0 3px 10px -3px rgba(0,120,95,.65); /* Ergänzung: 27.10., Schieber „Mit Paket“ (CRM Sales v2 Z. 207) */
  --bewegung-umschalter-balken-kurve: cubic-bezier(.33,.9,.28,1); /* Ergänzung: 27.10., Kurve der Balkenbreite im Stunden-Umschalter (CRM Sales v2) */
  --bewegung-umschalter-balken-farbe: .6s; /* Ergänzung: 27.10., Hintergrund der Balken im Stunden-Umschalter */
  --bewegung-umschalter-geist: .45s; /* Ergänzung: 27.10., Deckkraft der Geisterbalken */
  --bewegung-umschalter-text: .22s; /* Ergänzung: 27.10., Farbe der Schalterbeschriftung und des Schiebers */
  --farbe-flaeche-betrag: #FAFBFC; /* Ergänzung: 27.10., Zeile Rechnungsbetrag der App-Karte (Abrechnung v3) */
  --schatten-fakt-karte: 0 14px 30px -26px rgba(16,22,40,.35); /* Ergänzung: 27.10., Karten „Wo liegen unsere Daten?“ (Warum brainX) */
  --farbe-linie-chip: var(--farbe-linie-eingabe); /* Ergänzung: Rand der Übergabe-Chips im Baustein bruch (#DCE2EC, Δ1 zu --farbe-linie-eingabe; APP Abrechnung DATEV D v3 Z. 931) */
  --farbe-glow-orange-bruch: rgba(255,60,0,.26); /* Ergänzung: roter Schein im Fuß der gewählten Werkzeugkarte (APP Abrechnung DATEV D v3 Z. 210) */
  --schatten-bruch-chip: 0 4px 12px -8px rgba(16,22,40,.35); /* Ergänzung: Übergabe-Chip in Ruhe (APP Abrechnung DATEV D v3 Z. 932) */
  --schatten-bruch-chip-aktiv: 0 8px 18px -10px rgba(16,22,40,.6); /* Ergänzung: Übergabe-Chip des gewählten Werkzeugs (APP Abrechnung DATEV D v3 Z. 932) */
  --schatten-bruch-karte-aktiv: 0 14px 30px -18px rgba(16,22,40,.65); /* Ergänzung: gewählte Werkzeugkarte ohne Puls (APP Abrechnung DATEV D v3 Z. 908) */
  --schatten-bruch-karte-hover: 0 16px 34px -18px rgba(16,22,40,.6); /* Ergänzung: Werkzeugkarte im Hover (APP Abrechnung DATEV D v3 Z. 199) */
  --schatten-bruch-wach-an: 0 14px 30px -20px rgba(16,22,40,.55), 0 0 0 3px rgba(30,40,80,.13); /* Ergänzung: Puls der gewählten Werkzeugkarte, Anfang und Ende (APP Abrechnung DATEV D v3 Z. 40, bxWach) */
  --schatten-bruch-wach-aus: 0 14px 30px -20px rgba(16,22,40,.55), 0 0 0 7px rgba(30,40,80,.05); /* Ergänzung: Puls der gewählten Werkzeugkarte, Mitte (APP Abrechnung DATEV D v3 Z. 40, bxWach) */
  --bewegung-bruch-karte: .38s; /* Ergänzung: Größenwechsel der Werkzeugkarten (APP Abrechnung DATEV D v3 Z. 198) */
  --breite-rechner-paket: 280px; /* Ergänzung: Design ROI-Rechner v4 (30.10.2026), Paketkarte rechts neben der Frage ab 1280 px */
  --schatten-rechner-paket: 0 12px 30px -24px rgba(30,40,80,.55); /* Ergänzung: Design ROI-Rechner v4 (30.10.2026), Paketkarte */
  --schatten-rechner-ent-aktiv: inset 0 0 0 1.5px var(--farbe-orange-flaeche); /* Ergänzung: Design ROI-Rechner v4 (30.10.2026), Enterprise ab dem Freivolumen */
  --schatten-rechner-eingabe-fokus: 0 0 0 3px rgba(30,40,80,.12); /* Ergänzung: Design ROI-Rechner v4 (30.10.2026), Fokus des Eingabefelds */
  --farbe-navy-text-formel: #C5CCE0; /* Ergänzung: Design ROI-Rechner v4 (30.10.2026), Rechenweg auf Navy in der Paketkarte */
  --farbe-linie-eingabefeld: #D4DAE6; /* Ergänzung: Design ROI-Rechner v4 (30.10.2026), Rahmen des Eingabefelds */
}

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

  }
}

/*
 * Pages with their own width steps (frontmatter breitenstufen, data-breiten on .bx-ebene). The page margin stays
 * at 64 px up to 1024 px and drops to 40 px below (instead of 64/32 with the 1080 limit). Header and footer keep the
 * root --seitenrand; the margin applies to the content only (main, breadcrumbs as child of the layer). Below 768 px
 * the mobile margin applies.
 */
@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);
  }
}

/*
 * H1 font size on the pages with page steps: fixed from 1024 px, `clamp(34px, 5vw)` from 768 to 1023 px.
 * Security 50, ISO and hosting 48, GDPR 42, CRM areas 52, migration 46 (via `--schrift-titel-groesse`).
 * Below 768 px the mobile layer applies.
 */
@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); }
}

/*
 * H2 of the four security pages: 32 px/1.2/-1 px. Below 768 px the mobile layer applies.
 */
@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;
  }
}

/*
 * H2 sizes of the pages with page stages. CRM areas
 * 30/1.2/-.9 (switch head 34/1.18/-1), CRM product page 34/1.15/-1.1 (FAQ 40/1.1/-1.2, closing 38/1.14/-1.3), migration
 * 28/1.2/-.8 (FAQ 34/1.14/-1). Below 768 px the mobile layer applies.
 */
@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; }
}

/*
 * Fixed modules (data-mobil-fest) keep the desktop values of the tokens the mobile layer changes.
 * Without --seitenrand and --fokus-ring: the page margin and the white focus ring on navy apply there too.
 * TokensTest keeps this block equal to the desktop values above and to the token set of 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-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;
}

/*
 * Base: box model, body, box, layer, section, links, focus, font classes, hidden text, reduced motion, scroll offset.
 * Outside tokens.css only `var(--…)`.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Automatic hyphenation (`hyphens: auto` in blocks) only for long words: from 12 characters, at least 5 before and 5
 * after the break. The only place for it; the properties inherit.
 * Safari up to 26 only knows the prefixes for the characters before and after the break (minimum length thus 10); the
 * standard property comes last and applies where it exists.
 */
html {
  scroll-padding-top: var(--kopf-hoehe-kompakt);
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  hyphenate-limit-chars: 12 5 5;
}

/* without JS the head keeps its full height: kopf.js never sets data-kompakt */
@media (scripting: none) {
  html {
    scroll-padding-top: var(--kopf-hoehe);
  }
}

/*
 * Scroll offset off while the search in the sticky head has focus: the field always lies within the scroll-padding area,
 * so the browser would treat it as covered and keep scrolling up on focus and on every keystroke (`scroll-margin` on the
 * field does not help).
 */
html:has(.bx-seitenkopf .bx-suchfeld:focus-within) {
  scroll-padding-top: 0;
}

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

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

/*
 * Up to the box width (1440 px) the frame is centred and white outside; `clip` instead of `hidden` so the page head can
 * stick
 */
.bx-kasten {
  width: 100%;
  max-width: var(--kasten-breite);
  margin-inline: auto;
  background: var(--farbe-weiss);
  overflow: clip;
}

/*
 * 2K and larger: the frame grows with the window without limit. Head, foot, bands and background shapes span the full
 * width, the content stays as wide as at 1440 px and centred: the page margin grows by half the extra width
 * (`--bx-rand-extra`). `cqi` refers to the frame; `--bx-rand-extra` is registered (length) so the extra width resolves
 * to pixels at the layer and the background layer and is not re-evaluated against the inner container in the blocks' own
 * containers (cqw/cqi there).
 */
@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)); /* never negative: a scrollbar shortens cqi, not the 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() keeps specificity low: buttons and blocks override the link colour without a fight */
: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);
}

/* Every navy surface carries data-flaeche="navy" and turns the focus ring white */
[data-flaeche="navy"] {
  --fokus-ring: 2px solid var(--farbe-weiss);
}

/* Opaque white section surface (parameter `deckend`): the shapes of the page background do not show through */
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);
}

/* Visually hidden, readable for screen readers */
.bx-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Transitions 0s: then the browser creates none and the end state applies in the same style update. A short duration
 * still starts a transition that shows its start value until the next rendered frame, on large pages or under load
 * for hundreds of milliseconds. Animations keep 0.01ms so that animationend still fires.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important; /* otherwise a closed accordion answer stays visible for 340 ms */
    scroll-behavior: auto !important;
  }
}

/*
 * Mobile layer: tokens below 768px following the rules of the mobile generator, plus
 * basic layout forms that blocks opt into. No colours, radii, shadows or families.
 * Fixed modules (data-mobil-fest) keep their desktop values (tokens.css) and are never touched.
 */
html,
body {
  overflow-x: clip;
}

@media (width < 768px) {
  :root {
    --schrift-titel-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-titel-laufweite: -1px; /* Mobil: tracking scaled with the size */
    --schrift-h2-groesse: 27px; /* Mobil: size 34–39 px → 27 px */
    --schrift-h2-laufweite: -0.9px; /* Mobil: tracking scaled with the size */
    --schrift-zahl-groesse: 27px; /* Mobil: size 34–39 px → 27 px */
    --schrift-zahl-laufweite: -1px; /* Mobil: tracking scaled with the size */
    --schrift-zahl-gross-groesse: 38px; /* Mobil: size from 60 px → 38 px */
    --schrift-zahl-gross-laufweite: -1.5px; /* Mobil: tracking scaled with the size */
    --schrift-fehler-anlass-titel-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-fehler-anlass-titel-laufweite: -0.4px; /* Mobil: tracking scaled with the size */
    --schrift-fehler-ersatz-titel-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-fehler-ersatz-titel-laufweite: -0.5px; /* Mobil: tracking scaled with the size */
    --schrift-kapitel-jahr-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-kapitel-jahr-laufweite: -0.9px; /* Mobil: tracking scaled with the size */
    --schrift-jahr-gross-groesse: 38px; /* Mobil: size from 60 px → 38 px */
    --schrift-jahr-gross-laufweite: -1.6px; /* Mobil: tracking scaled with the size */
    --schrift-zitat-gross-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-zitat-gross-laufweite: -0.4px; /* Mobil: tracking scaled with the size */
    --schrift-aussage-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-aussage-laufweite: -1.2px; /* Mobil: tracking scaled with the size */
    --schrift-h3-gross-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-h3-gross-laufweite: -0.5px; /* Mobil: tracking scaled with the size */
    --schrift-monogramm-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-monogramm-laufweite: -1.1px; /* Mobil: tracking scaled with the size */
    --schrift-kennzahl-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-kennzahl-laufweite: -0.9px; /* Mobil: tracking scaled with the size */
    --schrift-anfuehrung-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-h2-start-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-h2-start-laufweite: -1px; /* Mobil: tracking scaled with the size */
    --schrift-hero-free-groesse: clamp(30px, 9.7vw, 38px); /* Mobil: size from 60 px → 38 px, upper bound of the clamp */
    --schrift-hero-free-laufweite: -1.5px; /* Mobil: tracking scaled with the size */
    --schrift-station-titel-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-station-titel-laufweite: -0.6px; /* Mobil: tracking scaled with the size */
    --schrift-alternative-titel-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-alternative-titel-laufweite: -0.7px; /* Mobil: tracking scaled with the size */
    --schrift-zahl-eingabe-groesse: 33px; /* Mobil: size 48–59 px → 33 px */
    --schrift-zahl-eingabe-laufweite: -1.2px; /* Mobil: tracking scaled with the size */
    --schrift-kachel-zahl-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-kachel-zahl-laufweite: -0.8px; /* Mobil: tracking scaled with the size */
    --schrift-einfuehrung-zahl-groesse: 27px; /* Mobil: size 34–39 px → 27 px */
    --schrift-einfuehrung-zahl-laufweite: -1.1px; /* Mobil: tracking scaled with the size */
    --schrift-interview-titel-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-interview-titel-laufweite: -0.7px; /* Mobil: tracking scaled with the size */
    --schrift-hero-hell-groesse: 38px; /* Mobil: size from 60 px → 38 px */
    --schrift-hero-hell-laufweite: -1.4px; /* Mobil: tracking scaled with the size */
    --schrift-hero-xl-groesse: 38px; /* Mobil: size from 60 px → 38 px */
    --schrift-hero-xl-laufweite: -1.6px; /* Mobil: tracking scaled with the size */
    --schrift-zahl-bilanz-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-zahl-bilanz-laufweite: -1.1px; /* Mobil: tracking scaled with the size */
    --schrift-zitat-definition-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-zitat-definition-laufweite: -0.4px; /* Mobil: tracking scaled with the size */
    --schrift-ergebnis-titel-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-ergebnis-titel-laufweite: -0.8px; /* Mobil: tracking scaled with the size */
    --schrift-zitat-person-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-zitat-person-laufweite: -0.6px; /* Mobil: tracking scaled with the size */
    --schrift-bento-ziffer-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-bento-ziffer-laufweite: -1.3px; /* Mobil: tracking scaled with the size */
    --schrift-logo-name-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-logo-name-laufweite: -0.6px; /* Mobil: tracking scaled with the size */
    --schrift-abschluss-titel-groesse: 21px; /* Mobil: size 24–27 px → 21 px */
    --schrift-abschluss-titel-laufweite: -0.5px; /* Mobil: tracking scaled with the size */
    --schrift-sammelliste-gruppe-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-sammelliste-gruppe-laufweite: -0.6px; /* Mobil: tracking scaled with the size */
    --schrift-kennzahl-gruen-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-kennzahl-gruen-laufweite: -0.7px; /* Mobil: tracking scaled with the size */
    --schrift-titel-recht-groesse: 30px; /* Mobil: size 40–47 px → 30 px */
    --schrift-titel-recht-laufweite: -1px; /* Mobil: tracking scaled with the size */
    --schrift-h2-dicht-groesse: 24px; /* Mobil: size 28–33 px → 24 px */
    --schrift-h2-dicht-laufweite: -0.8px; /* Mobil: tracking scaled with the size */
    --schrift-ziffer-gross-groesse: 44px; /* Mobil: size 62 px → 44 px (mobile design instead of generator 38 px; tracking 0) */
    --schrift-hero-aufgabe-groesse: 33px; /* Mobil: size 48–59 px → 33 px */
    --schrift-hero-aufgabe-laufweite: -1.1px; /* Mobil: tracking scaled with the size */
    --schrift-hero-rolle-groesse: 30px; /* Mobil: size set to the mobile design value */
    --schrift-hero-rolle-laufweite: -1px; /* Mobil: tracking scaled with the size */
    --schrift-hero-startups-groesse: 33px; /* Mobil: size set to the mobile design value */
    --schrift-hero-startups-laufweite: -1.3px; /* Mobil: tracking scaled with the size */
    --schrift-kosten-zahl-groesse: 27px; /* Mobil: size set to the mobile design value */
    --schrift-kosten-zahl-laufweite: -1px; /* Mobil: tracking scaled with the size */
    --schrift-zahl-band-groesse: 38px; /* Mobil: size set to the mobile design value */
    --schrift-zahl-band-laufweite: -1.5px; /* Mobil: tracking scaled with the size */
    --schrift-beleg-zahl-groesse: 33px; /* Mobil: size set to the mobile design value */
    --schrift-beleg-zahl-laufweite: -1.2px; /* Mobil: tracking scaled with the size */
    --schrift-h2-branche-groesse: 30px; /* Mobil: mobile design / generator value */
    --schrift-h2-branche-laufweite: -1.2px; /* Mobil: mobile design / generator value */
    --schrift-aussage-gross-groesse: 27px; /* Mobil: mobile design / generator value */
    --schrift-aussage-gross-laufweite: -1px; /* Mobil: mobile design / generator value */
    --schrift-rechnung-netto-groesse: 21px; /* Mobil: mobile design / generator value */
    --schrift-rechnung-netto-laufweite: -0.7px; /* Mobil: mobile design / generator value */

    --seitenrand: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-sektion: 45px; /* Mobil: vertical 40–63 px ×0,8 */
    --abstand-sektion-gross: 55px; /* Mobil: vertical 64–95 px ×0,62 */
    --abstand-sektion-kapitel: 56px; /* Mobil: vertical from 96 px → 56 px */
    --abstand-block: 32px; /* Mobil: vertical 40–63 px ×0,8 */
    --abstand-block-gross: 40px; /* Mobil: vertical 64–95 px ×0,62 */
    --abstand-hero-oben: 34px; /* Mobil: vertical 40–63 px ×0,8 */
    --abstand-hero-unten: 37px; /* Mobil: vertical 40–63 px ×0,8 */
    --abstand-spalten: 24px; /* Mobil: gap from 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 above 20 px → 20 px */
    --abstand-box-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-seitenspalte-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-button-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-button-sek-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-fehler-adresse-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-fehler-treffer-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-fehler-karte-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-fehler-bereich-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-fehler-knopf-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-fehler-knopf-klein-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
    --abstand-fehler-eingabe-x: 20px; /* Mobil: horizontal above 20 px → 20 px */
  }

  /* One column: a flex row becomes a column, children take the full width */
  .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;
  }

  /* Two columns: grid with two equal columns, children without fixed cells */
  .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;
  }

  /* Short rows may wrap */
  .bx-zeile-umbrechen:not([data-mobil-fest], [data-mobil-fest] *) {
    flex-wrap: wrap !important;
  }

  /* Sticky elements become static, except page header and scrollstory (data-klebend="immer") */
  [data-klebend]:not([data-klebend="immer"], [data-mobil-fest], [data-mobil-fest] *) {
    position: static !important;
    top: auto !important;
  }
}

/*
 * Basic elements: buttons, text link, CTA pair, section head, pills, status dot, icon circle. Tokens only.
 * Every hover rule also applies to [data-sg-zustand="hover"] (display only, for the 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);
}

/* == Text link: the orange underline marks the link, no arrow == */
.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);
}

/* Mint tone: green text, mint line, navy on hover */
.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);
}

/* H2 size of single heads via `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;
  }
}

/*
 * Inline links of the APP detail pages.
 * `bx-begriff` = link to a glossary term (dotted underline, orange on hover),
 * `bx-inlinelink` = link in the head text (navy, 600, underlined).
 */
.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 pair == */
.bx-cta-paar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-12);
}

/* == Section head == */
.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);
}

/* The eyebrow is uppercase on some pages and mixed case on others: only on request */
.bx-sektionskopf__eyebrow--versal {
  text-transform: uppercase;
}

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

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

/* with a number the eyebrow carries "01 — " in its text and the dash before it is dropped; numbered
   eyebrows are mint */
.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);
}

/* == Pills == */
.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 dot (text for screen readers only) == */
.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 circle: glyph as SVG, centred via flex; colour via 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);
}

/*
 * == Eyebrows of the solution pages ==
 * On the role, task and startup pages the section eyebrows are green (mint text);
 * only the cost section (Heute …) stays orange. Navy surfaces and the cost log keep their colour.
 */
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);
}

/*
 * == Text links ==
 * Head and card links of the solution pages are orange and bold without underline (navy on hover);
 * orange as text is `--farbe-orange-text` (#FF3C00).
 */
: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 */
}

/*
 * == Head of the role sections ==
 * Lead 16.5 px / 1.6 (instead of the 18 px lead step), H2 `pretty` instead of `balance` (avoids an orphan line
 * break in the title).
 */
: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;
}

/*
 * Larger headings of the section heads with `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);
  }
}

/*
 * Frame part "news-banner": navy bar before the sticky page header, one line with chip, text (short text on mobile) and
 * link text; close button on the right. Hiding via the attribute hidden (module), never via a style. Focus ring white
 * via data-flaeche="navy" (basis.css). Dimensions 40/22/28 px (banner height as a literal).
 */
.bx-news-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 40px;
  padding: 0 clamp(var(--abstand-20), 4.5vw, var(--abstand-64));
  background: var(--farbe-navy);
  color: var(--farbe-weiss);
}

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

.bx-news-banner__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--abstand-10);
  min-inline-size: 0;
  min-block-size: 40px;
  padding-inline-end: var(--abstand-32);
  color: inherit;
  text-decoration: none;
}

.bx-news-banner__chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  block-size: 22px;
  padding: 0 var(--abstand-9);
  border-radius: var(--radius-pille);
  background: var(--farbe-mint-pille);
  color: var(--farbe-mint);
  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-news-banner__text {
  overflow: hidden;
  min-inline-size: 0;
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-menue-punkt-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bx-news-banner__linktext {
  flex: none;
  color: var(--farbe-mint);
  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-news-banner__link:hover .bx-news-banner__linktext {
  text-decoration: underline;
}

.bx-news-banner [data-bx-lang="kurz"] {
  display: none;
}

.bx-news-banner__zu {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: clamp(var(--abstand-12), 3vw, var(--abstand-40));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pille);
  background: transparent;
  color: var(--farbe-navy-text-sekundaer);
  cursor: pointer;
  transform: translateY(-50%);
}

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

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

.bx-news-banner__zu svg {
  inline-size: 12px;
  block-size: 12px;
}

@media (width < 768px) {
  .bx-news-banner [data-bx-lang="lang"] {
    display: none;
  }

  .bx-news-banner [data-bx-lang="kurz"] {
    display: inline;
  }
}

/* 2K and larger: the bar spans the full width, text and close button stay in the content area */
@media (width > 1440px) {
  .bx-news-banner {
    padding-inline: calc(var(--abstand-64) + var(--bx-rand-extra));
  }
}

/*
 * Frame part "seitenkopf": sticky bar with logo, main items, mega panels, right group and burger. All values
 * from tokens.css; measures without a token are as in the design. Panels, burger sheet, search panel and veil
 * are positioned against the bar (position: relative); between bar and panels no element has a position other
 * than static or an overflow other than visible. The veil is the first child of the bar and lies below the
 * panels through DOM order, without z-index.
 */

/* Wrapper: sticks to the top, reserves the bar height at rest (no jump in compact mode), lets clicks pass through
   the transparent strip under the compact bar */
.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;
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-seitenkopf, [class*="bx-seitenkopf__"]) {
  --_menue-promo-button-gewicht: var(--schriftskala-gewicht-600);
  --_menue-promo-button-groesse: var(--schriftskala-groesse-13);
  --_menue-promo-button-zeile: normal;
  --_menue-promo-button-laufweite: 0;
  --_burger-plus-groesse: var(--schriftskala-groesse-28);
  --_burger-plus-zeile: var(--schriftskala-zeile-1);
}

/* Frame examples in the styleguide do not stick and have no compact mode on scroll */
.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);
}

/* Veil under the bar over the page; visible only with JavaScript (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);
}

/* Main items (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: space (3.1 px) before the character "▾" plus its lead */
  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;
  /* middle of the character 2.35 px below the middle of the text line (baseline), equally grey in every state */
  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);
}

/* active or opened main item: orange text, underline as graphic */
.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 */
}

/* Right group: search, language 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: hangs on the bar, centered below it, 16 px gap; the gap belongs to the panel (::before) so the pointer
   does not cross the veil on the way to the panel */
.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;
}

/* Arrow under the main item; kopf.js sets its position, without JavaScript it is dropped */
.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);
  /* the links are inline: list line = line of their role, not that of body text */
  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), no image */
.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);
}

/* Columns; the line of the column head (inline-flex) takes the role "textlink", not body text */
.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);
}

/* with icon: tile on the left across both rows */
.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: entries without icon 1 px */
  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);
}

/* for entries with icon (panel Produkt) 2 px below the title */
.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);
}

/* Column footer (integrations with short list) */
.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 { /* second line of the promo */
  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; /* Title, text, addendum – an empty line has height 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(--_menue-promo-button-gewicht);
  font-size: var(--_menue-promo-button-groesse);
  line-height: var(--_menue-promo-button-zeile);
  letter-spacing: var(--_menue-promo-button-laufweite);
  white-space: nowrap;
}

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

/* Quick access with 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: list line = line of the role "menue-link" */
  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: replaces main items and right group below the step "burger" */
.bx-seitenkopf__burger {
  display: block;
  /* The button protrudes 8 px into the page margin; the margin sits on the details so its box is as wide as the button */
  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);
}

/* without JavaScript the CSS shows exactly one of the two labels depending on state */
.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;
  /* Focus ring (offset 2 px + width 2 px = 4 px) stays visible at the edge of the scroll area */
  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);
}

/* with input in the burger search field the sheet shows only the hits */
.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 as graphic (orange surface only as a stroke, never as text color), turns into a cross when open */
.bx-seitenkopf__plus {
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  font-size: var(--_burger-plus-groesse);
  line-height: var(--_burger-plus-zeile);
  stroke: var(--farbe-orange-flaeche);
  transform-origin: 69.64% 50%; /* middle of the ink (19.5 of 28), see 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: mobile 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);
}

/*
 * Block "suchfeld": header (collapsed, panel below the header bar), burger (field with hit list) and page (GET
 * form). Tokens only; states via hidden, data-offen, data-hat-anfrage and aria-selected. The root in the header
 * stays position: static, the panel is positioned against .bx-seitenkopf__leiste; the field stays in the flow
 * and expands to the left.
 */
.bx-suchfeld {
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-text);
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-suchfeld, [class*="bx-suchfeld__"]) {
  --_suchleer-gewicht: var(--schriftskala-gewicht-400);
  --_suchleer-groesse: var(--schriftskala-groesse-14);
  --_suchleer-zeile: var(--schriftskala-zeile-1-5);
  --_suchleer-laufweite: 0;
  --_suchpanel-hinweis-gewicht: var(--schriftskala-gewicht-400);
  --_suchpanel-hinweis-groesse: var(--schriftskala-groesse-11-5);
  --_suchpanel-hinweis-zeile: normal;
  --_suchpanel-hinweis-laufweite: 0;
}

/* Area color per hit and filter: dot and 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);
}

/* ---------- Field (all variants) ---------- */

.bx-suchfeld__feld {
  position: relative; /* only for z-index and the magnifier; not an ancestor of the panel */
  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;
}

/* the focus ring from basis.css stays; the orange border is added, no 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;
}

/* ---------- Header ---------- */

/* Invisible without JavaScript, the space stays reserved: no jump at start */
.bx-suchfeld--kopf[hidden] {
  display: block;
  visibility: hidden;
}

.bx-suchfeld--kopf {
  flex: none;
  width: 40px; /* collapsed: only the magnifier */
}

.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;
}

/* Open: 280 px to the left over the reserved space, in the flow via negative margin */
.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); /* room for the magnifier on the right */
  color: var(--farbe-navy);
  cursor: text;
}

/* local step suchfeld: wide (reserved width 240 px, with a term the field stays open) */
@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 below the header bar (reference frame .bx-seitenkopf__leiste) */
.bx-suchfeld__panel {
  position: absolute;
  top: 100%;
  right: var(--seitenrand);
  box-sizing: border-box;
  width: 760px; /* header */
  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);
  }
}

/* Example in the styleguide: the stage clips (overflow: clip), so the panel stands in the flow under the field there;
   in the real header it lies absolutely under the bar */
.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; /* as open in the header */
}

.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;
}

/* Heading of the hits: only "Treffer für" in uppercase, the term as typed */
.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 top and bottom */
}

.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); /* filter column 200 px */
}

.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, of which 12 px in the options */
}

.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); /* Path line (inline): otherwise it inherits 27.2 px line height */
  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(--_suchleer-gewicht);
  font-size: var(--_suchleer-groesse);
  line-height: var(--_suchleer-zeile);
  letter-spacing: var(--_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(--_suchpanel-hinweis-gewicht);
  font-size: var(--_suchpanel-hinweis-groesse);
  line-height: var(--_suchpanel-hinweis-zeile);
  letter-spacing: var(--_suchpanel-hinweis-laufweite);
}

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

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

.bx-suchfeld--burger .bx-suchfeld__eingabe {
  height: 48px; /* Burger field, minimum size for touch */
  padding: 0 var(--abstand-46) 0 var(--abstand-18); /* value from the design: room for the magnifier on the right */
}

.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 below the field block + 4 px list padding */
}

.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; /* target size for touch */
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
}

/* ---------- Page (form without JavaScript) ---------- */

.bx-suchfeld--seite {
  position: relative;
  max-width: 620px;
}

.bx-suchfeld--seite .bx-suchfeld__eingabe {
  padding: var(--abstand-14) var(--abstand-48) var(--abstand-14) var(--abstand-20); /* room for the button on the right */
  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;
}

/* ---------- Error page (404) ---------- */

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

/* visible label in text font instead of the mono uppercase of the 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;
}

/* room on the right for the round button (60 px, also on mobile), the input role on the left */
.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 also beats the display rules above (panel parts, result) */
.bx-suchfeld [hidden] {
  display: none;
}

/*
 * Section type "hero-hell": light, centred hero with glow, H1 from the page title, actions, note line and stage.
 * Glow and entrance are CSS only and off under reduced motion. Only `768px` and `1080px` apply.
 */
.bx-hero-hell {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-hero-hell, [class*="bx-hero-hell__"]) {
  --_hero-branche-gewicht: var(--schriftskala-gewicht-800);
  --_hero-branche-groesse: clamp(44px, 5.4vw, 76px);
  --_hero-branche-zeile: var(--schriftskala-zeile-1);
  --_hero-branche-laufweite: var(--schriftskala-laufweite-minus-3-2);
  --_hero-satz-gewicht: var(--schriftskala-gewicht-700);
  --_hero-satz-groesse: clamp(17px, 1.6vw, 21px);
  --_hero-satz-zeile: var(--schriftskala-zeile-1-35);
  --_hero-satz-laufweite: var(--schriftskala-laufweite-minus-0-3);
  --_lead-start-gewicht: var(--schriftskala-gewicht-400);
  --_lead-start-groesse: clamp(17px, 1.5vw, 20px);
  --_lead-start-zeile: var(--schriftskala-zeile-1-6);
  --_lead-start-laufweite: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Emphasised part of the statement: orange for text (`--farbe-orange-text`) */
.bx-hero-hell__betont {
  color: var(--farbe-orange-text);
}

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

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

/* Industry pages: secondary button as outlined pill; hover colours border and text orange, no fill.
 * Orange as text via `--farbe-orange-text` (3.56:1 on white, deliberately). */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen {
  gap: var(--abstand-14);
}

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

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

/* Industry pages: both buttons at the design size (17 px, 16.5 px; the outline subtracts the border) */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen .bx-button {
  padding-block: var(--abstand-button-cta-y);
  font-weight: var(--schrift-button-cta-gewicht);
  font-size: var(--schrift-button-cta-groesse);
  line-height: var(--schrift-button-cta-zeile);
  letter-spacing: var(--schrift-button-cta-laufweite);
}

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

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

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

/* Stage: frame without bottom border (`huelle oben`), fully rounded with shadow (`huelle rund`) */
.bx-hero-hell__buehne {
  position: relative;
  max-width: 1288px;
  margin: 0 var(--abstand-56);
  overflow: hidden;
  border: 1px solid var(--farbe-linie-karte);
  border-bottom: 0;
  border-radius: var(--radius-karte-klein) var(--radius-karte-klein) 0 0;
  text-align: start;
}

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

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

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

/* Home page: spacing 76 top, 52 before the card, 72 bottom; H1 and statement balanced, lead 720 px */
.bx-hero-hell[data-bx-variante="startseite"] .bx-hero-hell__text {
  padding-block: var(--abstand-76) 0;
}

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

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

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

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

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

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

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

  /* Home page: no entrance animation on the H1 */
  .bx-hero-hell:not([data-bx-variante="startseite"]) .bx-hero-hell__titel {
    animation: bx-hero-hell-steig var(--bewegung-einstieg-dauer) var(--bewegung-einstieg-staffel) backwards;
  }
}

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

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

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

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

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

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

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

  /* Industry pages: both buttons equally wide side by side or wrapped (flex 1 1 0, at least content width, at most
     320 px; group as wide as its content, centred) */
  .bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__aktionen {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
  }

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

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

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

/*
 * Industry hero without glow and entrance, lead 720 px without hyphenation; industry stage 20 px margin on mobile; task
 * page stage 1400 px wide, square and borderless, borderless on mobile; task H1 without hyphenation.
 */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__glow {
  display: none;
}

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

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

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

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

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

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

/* IT: logo bar as its own strip with a line on top, logos 28 px grey */
.bx-hero-hell[data-bx-variante="branche"] .bx-hero-hell__unten {
  padding: 0;
}

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

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

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

/* Higher education: line directly below the stage where no logo bar follows */
.bx-hero-hell[data-bx-variante="branche"]:not(:has(.bx-hero-hell__unten)) {
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

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

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

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

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

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

/*
 * Frame part `brotkrumen`: mono line with separator "/", wrapping instead of cut off. On navy (hero, sample) lighter
 * colours. The padding only applies to the line as a direct child of the layer; in the hero and in the frame samples the
 * wrapper sets the spacing.
 */
.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; /* all items equally grey, the last one too */
}

[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);
}

/* Sample "on navy" in the styleguide: wrapper with navy surface like the hero */
.bx-brotkrumen-beispiel {
  padding: var(--abstand-24) var(--seitenrand);
  background-color: var(--farbe-navy);
}

/*
 * Block "trust-pillen": hero pills with a dot, fact line on navy, chips and trust list. Seals: the second
 * line names the company; existing tokens only. The fact line carries its own page margin, top spacing and
 * line (it runs across the full width).
 */
.bx-trust-pillen {
  font-family: var(--schrift-familie-text);
}

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

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

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

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

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

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

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

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

.bx-trust-pillen__label {
  margin: 0;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-eyebrow-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-eyebrow-zeile);
  letter-spacing: var(--schrift-eyebrow-laufweite);
  text-transform: uppercase;
}

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

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

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

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

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

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

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

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

.bx-trust-pillen__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--abstand-14);
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-pille);
  color: var(--farbe-navy);
  font-weight: var(--schrift-trust-chip-gewicht);
  font-size: var(--schrift-trust-chip-groesse);
  line-height: var(--schrift-trust-chip-zeile);
  letter-spacing: var(--schrift-trust-chip-laufweite);
  white-space: nowrap;
}

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

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

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

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

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

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

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

.bx-trust-pillen__eintragstitel {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-10);
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-navy);
  font-weight: var(--schrift-trust-titel-gewicht);
  font-size: var(--schrift-trust-titel-groesse);
  line-height: var(--schrift-trust-titel-zeile);
  letter-spacing: var(--schrift-trust-titel-laufweite);
}

.bx-trust-pillen__eintragstitel .bx-icon-kreis {
  flex: none;
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen);
}

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

/* List: description text balanced, "Go-live" stays together (only the home page uses `variante: liste`) */
.bx-trust-pillen--liste .bx-trust-pillen__text {
  text-wrap: balance;
}

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

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

/* == Seals with a company line == */
.bx-trust-pillen__eintrag--siegel {
  align-items: flex-start;
}

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

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

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

.bx-trust-pillen__gesellschaft {
  display: block;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
  letter-spacing: var(--schrift-fussnote-laufweite);
}

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

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

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

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

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

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

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

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

/*
 * == `chips` with `icon` or `integration` ==
 * Chip with icon: tile surface, radius 12, padding 7/14/7/7, in front a white 28 px field (radius 8). Without icon
 * none of these rules apply.
 */
.bx-trust-pillen__chip--icon {
  gap: var(--abstand-10);
  height: auto;
  padding: var(--abstand-7) var(--abstand-14) var(--abstand-7) var(--abstand-7);
  border-color: var(--farbe-linie);
  border-radius: var(--radius-promo);
  background-color: var(--farbe-flaeche-kachel);
}

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

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

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

/* H2 of the sections "Was Ihre IT …" and "Häufige Fragen" in the home-page step 40/1.12; only on the page with the
   pain-points switch (following sections), other pages keep the standard H2 */
.bx-abschnitt:has(.bx-umschalter--pain-points) ~ .bx-abschnitt .bx-trust-pillen--liste .bx-sektionskopf__titel,
.bx-abschnitt:has(.bx-umschalter--pain-points) ~ .bx-abschnitt .bx-faq__innen .bx-sektionskopf__titel {
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schrift-h2-start-zeile);
  letter-spacing: var(--schrift-h2-start-laufweite);
}

/*
 * Section type "schritte-karte": variant rolle (vertical list on navy, label "automatisch", row "Ihre Aufgabe"
 * orange) and startseite (light card with head, progress and six step cards). States only via
 * data-bx-schritt-zustand; without JavaScript the end state (all done, 100 %).
 */
.bx-schritte-karte {
  margin: 0;
}

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

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

.bx-schritte-karte__titel,
.bx-schritte-karte__zusatz-kopf,
.bx-schritte-karte__status {
  margin: 0;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-pille-zeile);
  letter-spacing: var(--schrift-pille-laufweite);
}

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

/* Variant rolle: card on navy; own navy surface so the light texts stay readable outside the navy hero (styleguide)
   too (contrast beats design) */
.bx-schritte-karte[data-bx-variante="rolle"] {
  padding: var(--abstand-22) var(--abstand-24) var(--abstand-12); /* 22/24/12 as in the design */
  border: 1px solid var(--farbe-navy-glas-rand);
  border-radius: var(--radius-karte);
  background: var(--farbe-navy);
}

/* in the hero a white haze over the navy of the hero, otherwise own navy surface (styleguide) */
.bx-hero-navy .bx-schritte-karte[data-bx-variante="rolle"] {
  background: var(--farbe-navy-hauch);
}

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

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

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

/* five segments under the head, mint; the segment "Ihre Aufgabe" orange */
.bx-schritte-karte__segmente {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--abstand-4);
  margin-block-end: var(--abstand-14);
}

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

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

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

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

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

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

.bx-schritte-karte__etikett {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-6);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-text); /* Archivo 500 12 px with check mark, as in the design */
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-pille-groesse);
  line-height: var(--schrift-etikett-zeile);
}

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

/* Row "Ihre Aufgabe": text white and bold, only the number orange */
.bx-schritte-karte[data-bx-variante="rolle"] [data-bx-ihre-aufgabe] {
  color: var(--farbe-weiss);
}

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

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

/* Style "glas" (Finanzen): glass surface, padding 32, text 16 px white */
.bx-schritte-karte[data-bx-variante="rolle"][data-bx-stil="glas"],
.bx-hero-navy .bx-schritte-karte[data-bx-variante="rolle"][data-bx-stil="glas"] {
  padding: var(--abstand-32);
  background: var(--farbe-navy-flaeche-zart);
  backdrop-filter: blur(14px);
}

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

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

.bx-schritte-karte[data-bx-variante="rolle"] .bx-schritte-karte__pille {
  padding: var(--abstand-4) var(--abstand-8);
  border-radius: var(--radius-pille);
  background: var(--farbe-orange-text); /* Pill with text: white on it 3.56:1, on purpose */
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-label-zeile);
}

/* Variant startseite: light card with grid */
.bx-schritte-karte[data-bx-variante="startseite"] {
  overflow: hidden;
  max-inline-size: 1120px;
  margin-inline: auto; /* centered in the hero */
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte-klein);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-stationen);
}

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

/* grey track with bar inside */
.bx-schritte-karte__spur {
  block-size: 3px;
  background: var(--farbe-flaeche-toggle);
}

.bx-schritte-karte__fortschritt {
  block-size: 100%;
  inline-size: var(--bx-prozent, 100%); /* value from css/produkt/prozent.css; fallback full bar (end state) */
  background: var(--farbe-orange-flaeche);
  transition: inline-size .6s cubic-bezier(.4, 0, .2, 1);
}

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

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

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

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

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

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

/* circle and label on one line */
.bx-schritte-karte__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
}

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

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

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

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

.bx-schritte-karte__schritt[data-bx-schritt-zustand="aktiv"] .bx-schritte-karte__kreis {
  border-color: var(--farbe-orange-flaeche);
  background: var(--farbe-orange-text); /* white digit: 3.56:1, on purpose */
  color: var(--farbe-weiss);
}

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

/* Value and placeholder "—" share one grid cell; the placeholder shows only when "offen" */
.bx-schritte-karte__wertzelle {
  display: grid;
}

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

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

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

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

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

/* step not yet reached: value hidden, addendum and pill invisible */
.bx-schritte-karte__schritt[data-bx-schritt-zustand="offen"] .bx-schritte-karte__wert {
  opacity: 0;
  transform: translateY(4px);
}

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

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

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

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

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

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

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

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

/*
 * Shared percentage table of the product blocks: the attribute `data-bx-prozent` (integer 0…100, computed in
 * the build) only sets the runtime variable `--bx-prozent`; each user picks the axis (`inline-size` or
 * `block-size`) in its block CSS. The only table for this attribute.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * Section type "umschalter", variant `stunden`: switch with a wobble on the button "ohne" (CSS only, visibility pause
 * via data-bx-sicht), rows with bars (`data-bx-prozent`, horizontal axis), ghost hatched in state "mit", panel
 * white ⇒ navy.
 */
.bx-umschalter {
  padding: var(--abstand-64) var(--seitenrand);
  border-block-end: 1px solid var(--farbe-linie-sektion);
  font-family: var(--schrift-familie-text);
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-umschalter, [class*="bx-umschalter__"]) {
  --_pfeil-hinweis-groesse: var(--schriftskala-groesse-15);
}

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

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

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

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

/* Head left, switch right, aligned at the bottom */
.bx-umschalter__leiste {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-48);
  margin-block-end: var(--abstand-36);
}

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

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

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

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

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

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

/* Switch surface with inner shadow, "Mit Paket" green, note left of the switch */
.bx-umschalter--stunden .bx-umschalter__schalter {
  background-color: var(--farbe-flaeche-hinweis-hover);
  box-shadow: var(--schatten-schalter-innen);
}

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

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

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

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

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

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

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

  80% {
    translate: 3px 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * Fine-tuning: number in the title row right next to the task, row text and module label under the bar. Stack and
 * states take over the row's tracks as a subgrid; the height stack stays (all states in the same cells, `grid-area`
 * overrides `hoehe.css`).
 */
.bx-umschalter__stapel {
  display: grid;
  grid-area: 1 / 1 / 4 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

/* Number and "h" as a group (gap 8 px), no wrap above the mobile step so the counter lets neither the strike number
   nor the text below jump */
.bx-umschalter__zahlgruppe {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-8);
  white-space: nowrap;
}

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

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

.bx-umschalter__panelzahl {
  font-weight: var(--schrift-zahl-gross-gewicht);
  font-size: var(--schrift-zahl-gross-groesse);
  line-height: var(--schrift-zahl-gross-zeile);
  letter-spacing: var(--schrift-zahl-gross-laufweite);
  font-variant-numeric: tabular-nums;
}

.bx-umschalter__einheit {
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-fehler-hinweis-titel-groesse);
}

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

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

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

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

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

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

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

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

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

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

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

  .bx-umschalter__schalter {
    display: grid;
  }

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

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

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

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

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

/*
 * == Variant `knoten` ==
 * System comparison "Heute" against "brainX" on navy: switch and counter, six nodes per state (tone per `data-ton`),
 * connectors with pulsing handover badges or flowing line, legend. The endless animations run only without reduced
 * motion and pause out of view (`data-bx-sicht="aus"`, set by `sichtpause.js`). Grid: six columns from `stapeln`,
 * three below, two below `mobil`. All classes carry the namespace `__knoten-`.
 */
.bx-umschalter--knoten {
  padding: 0;
  border: 0;
  background-color: transparent;
}

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

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

/* The system comparison in the hero sits inside the page margin (panel in a 64 px margin) */
.bx-hero-navy__unten > .bx-umschalter--knoten {
  margin-inline: var(--seitenrand);
}

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

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

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

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

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

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

.bx-umschalter__knoten-zahl {
  font-weight: var(--schrift-hero-xl-gewicht);
  font-size: var(--schrift-hero-xl-groesse);
  line-height: var(--schrift-hero-xl-zeile);
  letter-spacing: var(--schrift-hero-xl-laufweite);
  transition: color .3s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Connector: line across the column gap, in the first state with a handover badge */
.bx-umschalter__knoten-verbinder {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-1 * var(--abstand-48));
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--abstand-48);
}

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

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

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

.bx-umschalter__knoten-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-stark-gewicht);
  font-size: var(--schrift-schritt-label-groesse);
  line-height: var(--schrift-pille-zeile);
}

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

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

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

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

/* Motion: pulse, flow and fade-in only without reduced motion; paused out of view */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bx-umschalter-knoten-puls {
    from {
      opacity: .6;
      scale: 1;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* first node of a row: no line, the badge sits as a corner badge on the node */
  .bx-umschalter__knoten-eintrag:nth-child(3n + 1) .bx-umschalter__knoten-verbinder {
    inset-inline-start: calc(-1 * var(--abstand-12));
    inset-block: var(--abstand-12) auto;
    inline-size: auto;
    z-index: 2;
  }

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

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

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

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

  /* two columns: every second node starts a row; the rule of three above no longer applies */
  .bx-umschalter__knoten-eintrag:nth-child(3n + 1):not(:nth-child(2n + 1)) .bx-umschalter__knoten-verbinder {
    inset-inline-start: calc(-1 * var(--abstand-30));
    inset-block: 0;
    inline-size: var(--abstand-30);
  }

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

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

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

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

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

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

/*
 * == Variant `zeilen` ==
 * Switch `role="switch"` with both labels (state via `aria-checked`), card in the height stack: state 1 light, state 2
 * navy; head with chip, three number-word pairs and note, below five rows (number, label, text, pill, bar = manual
 * share via `--bx-prozent`). Below 1080px text under the label, below 768px everything stacked. The
 * gradient of the design is set as a surface from tokens (navy or white).
 */
.bx-umschalter__zeilen-steuerung {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--abstand-12);
}

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

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

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

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

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

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

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

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

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

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

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

.bx-umschalter__zeilen-zaehler {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-10);
  margin: 0;
  font-weight: var(--schrift-zahl-bilanz-gewicht);
  font-size: var(--schrift-zahl-bilanz-groesse);
  line-height: var(--schrift-zahl-bilanz-zeile);
  letter-spacing: var(--schrift-zahl-bilanz-laufweite);
}

.bx-umschalter__zeilen-zahl {
  font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * == Variant `pain-points` ==
 * Segment buttons like `stunden`; cards in an auto-fit grid from 320px, image area 150px with a mini graphic per
 * state (height stack, `aria-hidden`); both paragraphs stay readable, the one matching the state is emphasized (navy
 * or green).
 */
.bx-umschalter__pain-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--abstand-20);
}
@media (width < 1080px) {
  .bx-umschalter__pain-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 768px) {
  .bx-umschalter__pain-raster { grid-template-columns: minmax(0, 1fr); }
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Column heights and forecast hatching of the last two months as in the design (44, 52, 58, 66, 72, 82 px) */
[data-art="monatsachse"] .bx-umschalter__pain-teil:nth-child(2) {
  --bx-saeule: 52px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bx-umschalter__pain-absatz {
  margin: 0 0 var(--abstand-8);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-faq-antwort-groesse);
  line-height: var(--schrift-faq-antwort-zeile);
  transition: color var(--bewegung-dauer-kurz);
}

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

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

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

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

/* Switch aligned with the bottom edge of the H2 */
.bx-umschalter--zeilen .bx-umschalter__leiste .bx-sektionskopf {
  margin-block-end: 0;
}

/* H3 head of the switch 24 px (800 24 px / 1.25 / −0.7 px) */
.bx-umschalter--zeilen h3.bx-sektionskopf__titel {
  font-size: 24px; /* value as in the design */
  line-height: var(--schriftskala-zeile-1-25); /* value as in the design */
  letter-spacing: -.7px; /* value as in the design */
}

/*
 * == Row switch ==
 * Switch with a gliding white slider (state 2 green), chip with dot and border, counter in navy with orange dots,
 * numbers "01" with halo, filled pills, bar gradient, card gradient; states change as a cross-fade (820 ms), slider
 * and note nudge in state "Heute" (without reduced motion). White text on orange uses `--farbe-orange-text`; on mint
 * (2.9 : 1) it uses `--farbe-gruen` for contrast.
 */
.bx-umschalter__zeilen-schalter {
  position: relative;
  background-color: var(--farbe-linie);
  box-shadow: var(--schatten-umschalter-spur);
}

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

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

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

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

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

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

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

/* The note disappears after the flip */
.bx-umschalter__zeilen-steuerung:has(.bx-umschalter__zeilen-schalter[aria-checked="true"]) .bx-umschalter__zeilen-hinweis {
  opacity: 0;
}

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

.bx-umschalter__zeilen-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-9); /* value as in the design */
  border: 1px solid var(--farbe-umschalter-chip-rand);
  background-color: var(--farbe-umschalter-chip-flaeche);
  letter-spacing: var(--schriftskala-laufweite-1-4); /* value as in the design */
}

.bx-umschalter__zeilen-chip::before {
  content: '';
  flex: none;
  inline-size: 7px; /* value as in the design */
  block-size: 7px; /* value as in the design */
  border-radius: var(--radius-rund);
  background-color: currentColor;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Bars glide with the cross-fade (width from Heute to Mit brainX, 820 ms, easeInOutCubic); the hidden state carries
     the width of the opposite state (--bx-prozent-gegen from data-bx-gegen) */
  .bx-umschalter__zeilen-balken {
    transition: inline-size var(--bewegung-umschalter-wechsel) var(--bewegung-umschalter-wechsel-kurve);
  }

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

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

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

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

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

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

  84% {
    translate: 11px;
  }
}

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

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

/* Switch navy active, 700 14 px, content width; H2 in the home-page step */
.bx-umschalter--pain-points .bx-sektionskopf__titel {
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schrift-h2-start-zeile);
  letter-spacing: var(--schrift-h2-start-laufweite);
}

.bx-umschalter--pain-points .bx-umschalter__schalter {
  display: inline-flex;
  inline-size: fit-content;
}

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

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

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

/* Header row of the records "Deal" and "Rechnung ✕/✓" */
.bx-umschalter__pain-beleg-kopf {
  color: var(--farbe-app-sekundaer);
  font-weight: var(--schrift-label-gewicht);
  font-size: 11px;
  letter-spacing: 0;
}

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

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

/* == System line of the nodes == */
/* Single line; two lines only if the column is narrower than the longest line ("SYSTEM 2 · RECHNUNGSTOOL") */
.bx-umschalter__knoten-eintrag {
  container-type: inline-size;
}

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

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

/*
 * == Hours switch ==
 * Switch as a pill with gliding slider (.38 s, overshoot), labels change color (.22 s); the note "Umschalten →" pulses
 * the arrow, the slider nudges in state "Ohne". Bars grow .82 s, ghost bars fade .45 s. Reduced motion: instant
 * change. Applies to all CRM package pages with `variante: stunden`.
 */
.bx-umschalter--stunden .bx-umschalter__schalter {
  position: relative;
  gap: 0;
  cursor: pointer;
}

.bx-umschalter--stunden .bx-umschalter__schalter::before {
  content: '';
  position: absolute;
  inset-block: var(--abstand-4);
  inset-inline-start: var(--abstand-4);
  inline-size: calc(50% - var(--abstand-4));
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-umschalter-knopf);
  pointer-events: none;
}

.bx-umschalter--stunden .bx-umschalter__schalter:has(.bx-umschalter__knopf[data-wert="mit"][aria-pressed="true"])::before {
  background-color: var(--farbe-mint-akzent);
  box-shadow: var(--schatten-schalter-knopf-mint);
  transform: translateX(100%);
}

.bx-umschalter--stunden .bx-umschalter__knopf,
.bx-umschalter--stunden .bx-umschalter__knopf[aria-pressed="true"],
.bx-umschalter--stunden .bx-umschalter__knopf[data-wert="mit"][aria-pressed="true"] {
  position: relative;
  background-color: transparent;
  box-shadow: none;
  animation: none;
}

.bx-umschalter--stunden .bx-umschalter__knopf[data-wert="ohne"][aria-pressed="true"] {
  color: var(--farbe-navy);
}

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

.bx-umschalter--stunden .bx-umschalter__knopf[data-wert="ohne"][aria-pressed="false"] {
  color: var(--farbe-mikrotext);
}

.bx-umschalter--stunden .bx-umschalter__zeilen-hinweis {
  display: inline-flex;
  font-size: var(--schrift-eyebrow-groesse);
  align-items: center;
  gap: var(--abstand-7);
  animation: none;
}

.bx-umschalter__zeilen-pfeil {
  display: inline-block;
  font-size: var(--_pfeil-hinweis-groesse);
}

@media (prefers-reduced-motion: no-preference) {
  .bx-umschalter--stunden .bx-umschalter__schalter::before {
    transition: transform var(--bewegung-umschalter-schieber) var(--bewegung-umschalter-schieber-kurve),
      background-color var(--bewegung-umschalter-text);
  }

  .bx-umschalter--stunden .bx-umschalter__schalter:has(.bx-umschalter__knopf[data-wert="ohne"][aria-pressed="true"])::before {
    animation: bx-umschalter-schieber var(--bewegung-umschalter-nudge) ease-in-out infinite;
  }

  .bx-umschalter--stunden .bx-umschalter__knopf {
    transition: color var(--bewegung-umschalter-text);
  }

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

  .bx-umschalter--stunden .bx-umschalter__balken > span {
    transition: inline-size var(--bewegung-umschalter-wechsel) var(--bewegung-umschalter-balken-kurve),
      background-color var(--bewegung-umschalter-balken-farbe) ease,
      opacity var(--bewegung-umschalter-geist) ease;
  }

  .bx-umschalter--stunden .bx-umschalter__geist {
    transition: inline-size var(--bewegung-umschalter-wechsel) var(--bewegung-umschalter-balken-kurve),
      opacity var(--bewegung-umschalter-geist) ease;
  }
}

/*
 * A single bar glides (width .82 s, color .6 s): the bar "mit" starts at the width of "ohne" (`--bx-prozent-gegen`,
 * grey-blue) and grows to the width "mit" (mint); "ohne" stays invisible in reserve.
 */
.bx-umschalter--stunden .bx-umschalter__ohne {
  opacity: 0;
}

.bx-umschalter--stunden .bx-umschalter__mit {
  inline-size: var(--bx-prozent-gegen, var(--bx-prozent));
  background-color: var(--farbe-kette-graublau);
  opacity: 1;
}

.bx-umschalter--stunden:has(.bx-umschalter__knopf[data-wert="mit"][aria-pressed="true"]) .bx-umschalter__mit {
  inline-size: var(--bx-prozent);
  background-color: var(--farbe-mint-akzent);
}

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

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

/*
 * below the mobile step row text and module line stand one under the other instead of in the same cell (stacked,
 * gap 6 px); stack and states span four rows for this.
 */
@media (width < 768px) {
  .bx-umschalter--stunden .bx-umschalter__stapel,
  .bx-umschalter--stunden .bx-umschalter__stapel > .bx-umschalter__zustand {
    grid-area: 1 / 1 / 5 / -1;
    grid-template-rows: subgrid;
  }

  .bx-umschalter--stunden .bx-umschalter__zeilentext {
    grid-column: 1 / -1;
  }

  .bx-umschalter--stunden .bx-umschalter__modul {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-block-start: var(--abstand-6);
    text-align: start;
  }
}

/*
 * Switcher: state effect. Outside a height stack (data-bx-hoehe-zustand) an inactive state is hidden; inside the
 * stack it stays in the grid cell and is only invisible (hoehe.css). Without JavaScript it stays that way: the
 * first state is visible, the others are in the HTML.
 */
[data-bx-umschalter-zustand][aria-hidden="true"]:not([data-bx-hoehe-zustand]) {
  display: none;
}

/*
 * Height equalisation: all states of a module sit in the same grid cell, the longest one sets the height and
 * switching does not change it. Inactive states carry aria-hidden and inert and are only invisible (never
 * display: none, which would take them out of the grid).
 */
[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;
}

/*
 * Block "scrollstory": section with head, steps on the left and a standing window on the right (on top on mobile),
 * variants dark and light via local properties. Sticking and inactive colors only with module state (not in standbild
 * and fehler): without JavaScript and after a load error the story is a sequence of text and still image. Inactive
 * steps never via opacity.
 */
.bx-scrollstory {
  --bx-story-rand: clamp(var(--abstand-20), 4.5vw, var(--abstand-64));
  --bx-story-flaeche: var(--farbe-navy);
  --bx-story-titel: var(--farbe-weiss);
  --bx-story-text: var(--farbe-navy-text-hell);
  --bx-story-kicker: var(--farbe-mint);
  --bx-story-frage: var(--farbe-navy-text-sekundaer);
  --bx-story-haken: var(--farbe-mint);
  --bx-story-haken-zeichen: var(--farbe-navy);
  --bx-story-link: var(--farbe-weiss);
  --bx-story-link-hover: var(--farbe-mint);
  --bx-story-unterstrich: var(--farbe-mint);
  --bx-story-kopf: var(--farbe-navy-text-sekundaer);
  --bx-story-punkt: var(--farbe-navy-rand-mittel);
  --bx-story-punkt-hover: var(--farbe-navy-pille);
  --bx-story-deko: var(--farbe-navy-glas);
  --bx-story-glow-mint: var(--farbe-glow-mint-gruenwelt);
  --bx-story-fenster-rand: var(--farbe-navy-linie-stark);
  --bx-story-fenster-schatten: var(--schatten-story-fenster-navy);
  --bx-story-schluss: var(--farbe-navy-text-lead);
  --bx-story-inaktiv-text: var(--farbe-navy-text-sekundaer);
  --bx-story-inaktiv-klein: var(--farbe-navy-grau);
  /* Eyebrow and check circles stay mint, only muted; contrast ≥ 4.5:1 */
  --bx-story-inaktiv-eyebrow: color-mix(in srgb, var(--farbe-mint) 75%, var(--farbe-navy));
  --bx-story-inaktiv-haken: color-mix(in srgb, var(--farbe-mint) 40%, var(--farbe-navy));
  --bx-story-inaktiv-kicker: var(--bx-story-inaktiv-klein);
  position: relative;
  overflow: clip;
  background: var(--bx-story-flaeche);
  padding: var(--abstand-104) var(--bx-story-rand) 12vh;
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-scrollstory, [class*="bx-scrollstory__"]) {
  --_story-titel-gewicht: var(--schriftskala-gewicht-800);
  --_story-titel-groesse: clamp(24px, 2.3vw, 32px);
  --_story-titel-zeile: var(--schriftskala-zeile-1-18);
  --_story-titel-laufweite: var(--schriftskala-laufweite-minus-1);
  --_story-kopf-gewicht: var(--schriftskala-gewicht-500);
  --_story-kopf-groesse: var(--schriftskala-groesse-12);
  --_story-kopf-zeile: normal;
  --_story-kopf-laufweite: var(--schriftskala-laufweite-0-4);
}

.bx-scrollstory[data-bx-variante="hell"] {
  --bx-story-flaeche: var(--farbe-weiss);
  --bx-story-titel: var(--farbe-navy);
  --bx-story-text: var(--farbe-text-sekundaer);
  --bx-story-kicker: var(--farbe-orange-text);
  --bx-story-frage: var(--farbe-mikrotext);
  --bx-story-haken: var(--farbe-gruen);
  --bx-story-haken-zeichen: var(--farbe-weiss);
  --bx-story-link: var(--farbe-navy);
  --bx-story-link-hover: var(--farbe-orange-text);
  --bx-story-unterstrich: var(--farbe-orange-flaeche);
  --bx-story-kopf: var(--farbe-mikrotext);
  --bx-story-punkt: var(--farbe-linie);
  --bx-story-punkt-hover: var(--farbe-flaeche-toggle);
  --bx-story-deko: var(--farbe-flaeche-band);
  --bx-story-glow-mint: var(--farbe-mint-flaeche);
  --bx-story-fenster-rand: var(--farbe-linie);
  --bx-story-fenster-schatten: var(--schatten-story-fenster);
  --bx-story-schluss: var(--farbe-mikrotext);
  --bx-story-inaktiv-text: var(--farbe-mikrotext);
  --bx-story-inaktiv-klein: var(--farbe-mikrotext);
  --bx-story-inaktiv-eyebrow: var(--bx-story-inaktiv-klein);
  --bx-story-inaktiv-haken: var(--farbe-story-haken-gedaempft);
  --bx-story-inaktiv-kicker: var(--farbe-story-kicker-gedaempft);
}

.bx-scrollstory::before {
  content: '';
  position: absolute;
  left: -200px; /* Design */
  bottom: -300px; /* Design */
  width: 800px;
  height: 700px;
  background: radial-gradient(closest-side, var(--farbe-glow-mint-hero), var(--farbe-glow-mint-aus));
  pointer-events: none;
}

/* the light section has no glow */
.bx-scrollstory[data-bx-variante="hell"]::before {
  content: none;
}

.bx-scrollstory__kopf {
  position: relative;
  max-width: 760px;
}

/* the head lies above the decor surface of the window (jump bar) */
.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__kopf {
  z-index: 1;
}

.bx-scrollstory__kopf-eyebrow {
  margin: 0 0 var(--abstand-16);
  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);
  color: var(--farbe-mint);
}

.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__kopf-eyebrow {
  color: var(--bx-story-kicker);
}

/* all eyebrows uppercase */
.bx-scrollstory[data-bx-variante="hell"] :is(.bx-scrollstory__kopf-eyebrow, .bx-scrollstory__eyebrow) {
  text-transform: uppercase;
}

.bx-scrollstory__ueberschrift {
  margin: 0 0 var(--abstand-14);
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schrift-h2-start-zeile);
  letter-spacing: var(--schrift-h2-start-laufweite);
  color: var(--bx-story-titel);
  text-wrap: balance;
}

.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__ueberschrift {
  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-scrollstory__zweitton {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__zweitton {
  color: var(--farbe-titel-zweitton);
}

.bx-scrollstory__lead {
  margin: 0 0 var(--abstand-26);
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
  color: var(--bx-story-frage);
  text-wrap: pretty;
}

.bx-scrollstory__pille {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-10);
  height: 36px;
  margin: 0;
  padding: 0 var(--abstand-16) 0 var(--abstand-6);
  box-sizing: border-box;
  border: 1px solid var(--farbe-navy-glas-rand);
  border-radius: var(--radius-pille);
  background: var(--farbe-navy-pille);
}

.bx-scrollstory__pille-text {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--abstand-10);
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss);
  color: var(--farbe-navy);
  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-scrollstory__pille-zusatz {
  font-weight: var(--schrift-trust-pille-gewicht);
  font-size: var(--schrift-trust-pille-groesse);
  line-height: var(--schrift-trust-pille-zeile);
  letter-spacing: var(--schrift-trust-pille-laufweite);
  color: var(--farbe-navy-text-sekundaer);
}

/* Grid: desktop grid .8fr/1.2fr, on mobile one flex column with the window first */
.bx-scrollstory__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--abstand-32), 4.5vw, var(--abstand-64));
  align-items: start;
  position: relative;
  margin-top: var(--abstand-24);
}

/* columns .9fr/1.1fr with gap 72 from "eng", below 1fr/1fr with gap 32; text at most 560 px */
@media (width >= 768px) and (width < 1024px) {
  .bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--abstand-32);
  }
}

@media (width >= 1024px) {
  .bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__raster {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--abstand-72);
  }
}

.bx-scrollstory[data-bx-variante="hell"] :is(.bx-scrollstory__text, .bx-scrollstory__punkte) {
  max-width: var(--breite-story-text-max);
}

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

/* Step lengths (value table for schritt_hoehe), effective even without JavaScript */
[data-bx-schritt-hoehe="140"] .bx-scrollstory__schritt {
  min-height: 140vh;
}

.bx-scrollstory__schritt-inhalt {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--abstand-64);
}

.bx-scrollstory__eyebrow {
  margin: 0 0 var(--abstand-8);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-story-kicker-gewicht);
  font-size: var(--schrift-story-kicker-groesse);
  line-height: var(--schrift-story-kicker-zeile);
  letter-spacing: var(--schrift-story-kicker-laufweite);
  color: var(--bx-story-kicker);
}

.bx-scrollstory__leitfrage {
  margin: 0 0 var(--abstand-10);
  font-weight: var(--schrift-story-frage-gewicht);
  font-size: var(--schrift-story-frage-groesse);
  line-height: var(--schrift-story-frage-zeile);
  letter-spacing: var(--schrift-story-frage-laufweite);
  color: var(--bx-story-frage);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-scrollstory__titel {
  margin: 0 0 var(--abstand-14);
  font-weight: var(--_story-titel-gewicht);
  font-size: var(--_story-titel-groesse);
  line-height: var(--_story-titel-zeile);
  letter-spacing: var(--_story-titel-laufweite);
  color: var(--bx-story-titel);
  text-wrap: balance;
}

.bx-scrollstory__text {
  max-width: 540px;
  margin: 0 0 var(--abstand-20);
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
  color: var(--bx-story-text);
  text-wrap: pretty;
}

.bx-scrollstory__punkte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-10);
  max-width: 540px;
  margin: 0 0 var(--abstand-22);
  padding: 0;
  list-style: none;
}

.bx-scrollstory__punkte li {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-11);
  font-weight: var(--schrift-liste-gewicht);
  font-size: var(--schrift-liste-groesse);
  line-height: var(--schrift-liste-zeile);
  letter-spacing: var(--schrift-liste-laufweite);
  color: var(--bx-story-text);
}

.bx-scrollstory__haken {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px; /* Design */
  border-radius: var(--radius-rund);
  background: var(--bx-story-haken);
  color: var(--bx-story-haken-zeichen);
}

.bx-scrollstory__haken svg {
  display: block;
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bx-scrollstory__link {
  align-self: flex-start;
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
  letter-spacing: var(--schrift-textlink-laufweite);
  color: var(--bx-story-link);
  text-decoration: underline;
  text-decoration-color: var(--bx-story-unterstrich);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.bx-scrollstory__link:hover {
  color: var(--bx-story-link-hover);
}

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

/* in the light variant a text link with 22 px spacing */
.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__cta {
  margin-top: var(--abstand-22);
}

/* Still image of the main view without JavaScript or after a load error */
.bx-scrollstory__standbild {
  margin: var(--abstand-24) 0 0;
  overflow: hidden;
  border-radius: var(--radius-rahmen);
  box-shadow: var(--bx-story-fenster-schatten);
}

.bx-scrollstory__standbild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Window: decor surface, two glows, header row, app window, chip rows */
/* own stacking context (z-index 0): decor surface and glows lie behind the window, above the section */
.bx-scrollstory__fenster {
  position: relative;
  z-index: 0;
  min-width: 0;
}

/* Decor surface as child of the aria-hidden decor div: below the glows (z-index -2), positioned on the window */
.bx-scrollstory__deko-flaeche {
  position: absolute;
  left: calc(-1 * var(--abstand-16));
  right: -10%;
  top: -14%;
  bottom: -18%;
  z-index: -2;
  border-radius: var(--radius-story-deko);
  background: var(--bx-story-deko);
  clip-path: polygon(18% 0, 100% 0, 100% 86%, 0 100%, 0 22%);
  pointer-events: none;
}

.bx-scrollstory__deko::before,
.bx-scrollstory__deko::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.bx-scrollstory__deko::before {
  right: -180px; /* Design */
  top: -200px; /* Design */
  width: 760px;
  height: 620px;
  background: radial-gradient(closest-side, var(--bx-story-glow-mint), var(--farbe-glow-mint-aus));
}

.bx-scrollstory__deko::after {
  left: 10%;
  bottom: -260px; /* Design */
  width: 620px;
  height: 520px;
  background: radial-gradient(closest-side, var(--farbe-glow-orange-story), var(--farbe-glow-orange-aus));
}

.bx-scrollstory__fensterkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-16);
  height: 42px;
}

.bx-scrollstory__stand {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--schrift-familie-mono);
  font-weight: var(--_story-kopf-gewicht);
  font-size: var(--_story-kopf-groesse);
  line-height: var(--_story-kopf-zeile);
  letter-spacing: var(--_story-kopf-laufweite);
  color: var(--bx-story-kopf);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bx-scrollstory__stand b {
  color: var(--bx-story-titel);
}

.bx-scrollstory__navigation {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px; /* Design */
}

.bx-scrollstory__punkt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pille);
  background: transparent;
  cursor: pointer;
}

.bx-scrollstory__punkt:hover {
  background: var(--bx-story-punkt-hover);
}

.bx-scrollstory__punkt:disabled {
  cursor: default;
}

.bx-scrollstory__punkt span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pille);
  background: var(--bx-story-punkt);
  transition: width var(--bewegung-story-punkt) ease, background-color var(--bewegung-story-punkt) ease,
    box-shadow var(--bewegung-story-punkt) ease;
}

.bx-scrollstory__punkt[aria-current="step"] span {
  width: 26px;
  background: var(--farbe-mint);
}

/* open with ring, visited navy, active 22 px orange */
.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__punkt span {
  background: transparent;
  box-shadow: var(--schatten-story-punkt-leer);
}

.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__punkt[data-bx-besucht] span {
  background: var(--farbe-navy);
  box-shadow: var(--schatten-story-punkt-besucht);
}

.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__punkt[aria-current="step"] span {
  width: 22px;
  background: var(--farbe-orange-flaeche);
  box-shadow: var(--schatten-story-punkt-aktiv);
}

.bx-story-fenster {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bx-story-fenster-rand);
  border-radius: var(--radius-panel);
  background: var(--farbe-weiss);
  box-shadow: var(--bx-story-fenster-schatten);
}

/* chip rows stacked in one grid cell: the longest sets the height, the window stays equally high */
.bx-scrollstory__chipzeilen {
  display: grid;
  margin-top: var(--abstand-14);
}

.bx-scrollstory__chips {
  display: flex;
  flex-wrap: wrap;
  grid-area: 1 / 1;
  gap: var(--abstand-8);
  min-height: 30px;
}

.bx-scrollstory__chips[hidden] {
  display: flex;
  visibility: hidden;
}

.bx-scrollstory__chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--abstand-13);
  border-radius: var(--radius-pille);
  background: var(--farbe-navy-pille);
  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);
}

.bx-scrollstory__chip:first-child {
  background: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-scrollstory[data-bx-variante="hell"] .bx-scrollstory__chip {
  background: var(--farbe-flaeche-toggle);
  color: var(--farbe-navy);
}

/* Closing sentence: link at sentence size, only weight, color and underline */
.bx-scrollstory__schluss {
  position: relative;
  max-width: 760px;
  margin: var(--abstand-72) 0 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);
  color: var(--bx-story-schluss);
  text-wrap: pretty;
}

.bx-scrollstory__schluss a {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: var(--schrift-textlink-gewicht);
}

/* With module state (not standbild, not fehler): text and window stick, inactive steps in color */
bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt-inhalt {
  position: sticky;
  top: max(82px, calc(50vh - 234px)); /* Design */
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__fenster {
  position: sticky;
  top: max(var(--abstand-96), calc(50vh - 220px)); /* Design */
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt :is(.bx-scrollstory__titel, .bx-scrollstory__text, .bx-scrollstory__punkte li, .bx-scrollstory__link, .bx-scrollstory__eyebrow, .bx-scrollstory__leitfrage, .bx-scrollstory__haken) {
  transition: color var(--bewegung-story-schritt) ease, background-color var(--bewegung-story-schritt) ease;
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] :is(.bx-scrollstory__titel, .bx-scrollstory__text, .bx-scrollstory__punkte li, .bx-scrollstory__link) {
  color: var(--bx-story-inaktiv-text);
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] .bx-scrollstory__eyebrow {
  color: var(--bx-story-inaktiv-kicker);
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] .bx-scrollstory__leitfrage {
  color: var(--bx-story-inaktiv-klein);
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] .bx-scrollstory__eyebrow {
  color: var(--bx-story-inaktiv-eyebrow, var(--bx-story-inaktiv-klein));
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] .bx-scrollstory__haken {
  background: var(--bx-story-inaktiv-haken);
}

@media (width < 768px) {
  .bx-scrollstory__raster {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  [data-bx-schritt-hoehe-mobil="86"] .bx-scrollstory__schritt {
    min-height: 86vh;
  }

  [data-bx-schritt-hoehe-mobil="96"] .bx-scrollstory__schritt {
    min-height: 96vh;
  }

  [data-bx-schritt-hoehe-mobil="112"] .bx-scrollstory__schritt {
    min-height: 112vh;
  }

  .bx-scrollstory__schritt {
    padding-bottom: var(--abstand-32);
  }

  .bx-scrollstory__schritt-inhalt {
    padding-bottom: 0;
  }

  .bx-scrollstory__fenster {
    order: -1;
    z-index: 3;
    margin: 0 calc(-1 * var(--bx-story-rand));
    padding: var(--abstand-6) var(--bx-story-rand) var(--abstand-14);
    background: var(--bx-story-flaeche);
  }

  .bx-scrollstory__fensterkopf {
    height: 34px;
  }

  .bx-story-fenster {
    max-width: min(100%, calc((36svh - 72px) * 1.7778));
    margin-inline: auto;
  }

  .bx-scrollstory__chipzeilen {
    display: none;
  }

  .bx-scrollstory__schluss {
    margin-top: calc(var(--abstand-40) + var(--abstand-5));
  }

  bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt-inhalt {
    position: static;
  }

  bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__fenster {
    top: var(--kopf-hoehe-kompakt);
  }
}

/*
 * Jump bar in the head, source line, two-line link card, switch buttons top right above the stage, note below the
 * window (not on mobile).
 */
.bx-scrollstory__sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-8);
  margin-top: var(--abstand-22);
}

.bx-scrollstory__sprung {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-8);
  min-height: 30px;
  padding: var(--abstand-4) var(--abstand-14);
  box-sizing: border-box;
  border: 1px solid var(--bx-story-fenster-rand);
  border-radius: var(--radius-pille);
  background: var(--bx-story-deko);
  color: var(--bx-story-titel);
  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;
}

.bx-scrollstory__sprung:hover {
  border-color: var(--bx-story-titel);
  background: var(--bx-story-flaeche);
}

.bx-scrollstory__sprung-nummer {
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-widget-achse-gewicht);
  font-size: var(--schrift-widget-achse-groesse);
  line-height: var(--schrift-widget-achse-zeile);
  letter-spacing: var(--schrift-widget-achse-laufweite);
  color: var(--bx-story-kopf);
}

.bx-scrollstory__quelle {
  margin: var(--abstand-12) 0 0;
  font-weight: var(--schrift-fussnote-gewicht);
  font-size: var(--schrift-fussnote-groesse);
  line-height: var(--schrift-fussnote-zeile);
  letter-spacing: var(--schrift-fussnote-laufweite);
  color: var(--bx-story-kopf);
}

.bx-scrollstory__karte {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Design */
  max-width: 560px;
  margin: var(--abstand-20) 0 0;
  padding: var(--abstand-14) var(--abstand-16);
  border: 1px solid var(--farbe-ergebnis-gruen-rand);
  border-radius: var(--radius-promo);
  background: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
  text-decoration: none;
}

.bx-scrollstory__karte:hover {
  background: var(--farbe-gruen-flaeche-hover);
}

.bx-scrollstory__karte-titel {
  font-weight: var(--schrift-person-name-klein-gewicht);
  font-size: var(--schrift-person-name-klein-groesse);
  line-height: var(--schrift-person-name-klein-zeile);
  letter-spacing: var(--schrift-person-name-klein-laufweite);
}

.bx-scrollstory__karte-text {
  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-scrollstory__umschalter {
  position: absolute;
  top: calc(var(--abstand-40) + var(--abstand-12));
  right: var(--abstand-12);
  z-index: 5;
  display: flex;
  gap: 3px; /* Design */
  padding: 3px; /* Design */
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-story-umschalter);
}

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

.bx-scrollstory__wahl {
  height: 28px;
  padding: 0 var(--abstand-13);
  border: 0;
  border-radius: var(--radius-pille);
  background: transparent;
  color: var(--farbe-text-sekundaer);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-widget-tooltip-titel-gewicht);
  font-size: var(--schrift-widget-tooltip-titel-groesse);
  line-height: var(--schrift-widget-tooltip-titel-zeile);
  letter-spacing: var(--schrift-widget-tooltip-titel-laufweite);
  cursor: pointer;
}

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

.bx-scrollstory__wahl:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: 1px;
}

.bx-scrollstory__notiz {
  height: 54px;
  box-sizing: border-box;
  margin: 0;
  padding-top: var(--abstand-12);
  overflow: hidden;
  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);
  color: var(--bx-story-kopf);
  text-wrap: pretty;
}

@media (width < 768px) {
  .bx-scrollstory__sprung {
    min-height: 44px;
  }

  .bx-scrollstory__umschalter {
    top: calc(var(--abstand-32) + var(--abstand-12));
  }

  .bx-scrollstory__notiz {
    display: none;
  }
}

/*
 * Step field `vergleich`: `<dl>` brainX/competitor with status dot and text, delimiting sentence. Inactive steps mute
 * these elements too only via color (`--bx-story-inaktiv-text`/`-klein`, dots via `--farbe-gedaempft-*`, no opacity).
 */
.bx-scrollstory__vergleich {
  display: grid;
  gap: var(--abstand-12);
  max-width: 540px;
  margin: 0 0 var(--abstand-20);
}

.bx-scrollstory__vergleich > div {
  display: grid;
  gap: var(--abstand-4);
}

.bx-scrollstory__vergleich dt {
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-text-groesse);
  color: var(--bx-story-text);
}

.bx-scrollstory__vergleich dt.bx-markenfarbe {
  color: var(--bx-markenfarbe, var(--bx-story-text));
}

.bx-scrollstory__vergleich dd {
  display: flex;
  gap: var(--abstand-8);
  align-items: baseline;
  margin: 0;
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  color: var(--bx-story-text);
}

/* The text child of the flex element may shrink below the longest word */
.bx-scrollstory__vergleich-text {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.bx-scrollstory__abgrenzung {
  max-width: 540px;
  margin: 0 0 var(--abstand-20);
  font-size: var(--schrift-menue-link-groesse);
  line-height: var(--schrift-text-zeile);
  color: var(--bx-story-text);
}

/* Row "brainX CRM · …" under the comparison */
.bx-scrollstory__crm {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-6) var(--abstand-8);
  max-width: var(--breite-story-text-max);
  margin: var(--abstand-14) 0 0;
  font-weight: var(--schrift-etikett-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
  color: var(--bx-story-text);
}

.bx-scrollstory__crm-name {
  flex: none;
  padding: var(--abstand-4) var(--abstand-8);
  border: 1px solid var(--farbe-navy-text-dezent);
  border-radius: var(--radius-pille);
  background: var(--farbe-weiss);
  color: var(--bx-story-titel);
  font-weight: var(--schrift-pille-gewicht);
  font-size: var(--schrift-etikett-groesse);
  line-height: var(--schrift-etikett-zeile);
}

.bx-scrollstory__crm a {
  color: inherit;
  text-decoration: underline;
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] .bx-scrollstory__crm {
  color: var(--bx-story-inaktiv-text);
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] :is(.bx-scrollstory__vergleich dt, .bx-scrollstory__vergleich dt.bx-markenfarbe, .bx-scrollstory__vergleich dd, .bx-scrollstory__abgrenzung) {
  color: var(--bx-story-inaktiv-text);
}

bx-scrollstory[data-bx-zustand]:not([data-bx-zustand="standbild"], [data-bx-zustand="fehler"]) .bx-scrollstory__schritt[aria-current="false"] .bx-scrollstory__vergleich [data-bx-status] {
  background: var(--farbe-gedaempft-punkt);
  border-color: var(--farbe-gedaempft-punkt);
}

/* 2K and larger: the page margin of the story grows with the extra width (basis.css), the content stays as at 1440 px */
@media (width > 1440px) {
  .bx-scrollstory {
    --bx-story-rand: calc(var(--abstand-64) + var(--bx-rand-extra));
  }
}

/* In the comparison page the story sits in a wrapper with its own page margin; there its margin stays as at 1440 px */
@media (width > 1440px) {
  .bx-vergleichsseite__abschnitt .bx-scrollstory {
    --bx-story-rand: var(--abstand-64);
  }
}

/*
 * App window of the scrollstory: title bar, sidebar, stage with the view layers, camera, pointer with click
 * ring and press, effects layer of fixed image pixels. Colours, font families, shadows and radii only as tokens;
 * the FX colours of the effects are story data (CSSOM). Position, opacity and transforms are set by
 * js/elemente/scrollstory/ via CSSOM.
 */
.bx-story-fenster__leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--farbe-app-kopf);
}

.bx-story-fenster__logo img {
  display: block;
  width: auto;
  height: 15px;
}

.bx-story-fenster__label {
  font-family: var(--schrift-familie-app);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--farbe-weiss);
}

.bx-story-fenster__trenner {
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--farbe-app-kopf-linie);
}

.bx-story-fenster__kruemel {
  min-width: 0;
  overflow: hidden;
  font-family: var(--schrift-familie-app);
  font-size: 12.5px;
  color: var(--farbe-app-kopf-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bx-story-fenster__inhalt {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
}

/* Window without sidebar (comparison stories): single column, the stage fills the window */
.bx-story-fenster__inhalt[data-bx-ohne-leiste] {
  grid-template-columns: minmax(0, 1fr);
}

.bx-story-fenster__seitenleiste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  background: var(--farbe-app-kopf);
}

.bx-story-fenster__seitenleiste span {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  overflow: hidden;
  font-family: var(--schrift-familie-app);
  font-size: 12px;
  color: var(--farbe-app-kopf-text);
  white-space: nowrap;
  transition: color var(--bewegung-story-punkt) ease, background-color var(--bewegung-story-punkt) ease;
}

.bx-story-fenster__seitenleiste span[data-bx-aktiv] {
  font-weight: 700;
  color: var(--farbe-orange-navy-text);
  background: var(--farbe-app-dunkel);
}

.bx-story-fenster__seitenleiste span[data-bx-aktiv]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--farbe-orange-flaeche);
}

/* Stage: the first frame (still of the first view) reserves 16:9 and the layers sit on top; it stays 16:9
   even if the sidebar is taller (camera percentages refer to this height) */
.bx-story-fenster__buehne {
  align-self: start;
  position: relative;
  overflow: hidden;
  background: var(--farbe-flaeche-band);
}

.bx-story-fenster__buehne > picture,
.bx-story-fenster__ansicht > picture,
.bx-story-fenster__bild picture {
  display: block;
}

.bx-story-fenster__buehne > picture img,
.bx-story-fenster__ansicht > picture img {
  display: block;
  width: 100%;
  height: auto;
}

.bx-story-fenster__ansicht {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0);
  transition: opacity var(--bewegung-story-wechsel) ease, transform var(--bewegung-story-wechsel) var(--bewegung-kurve-heraus);
}

.bx-story-fenster__ansicht[data-bx-lage="aktiv"] {
  z-index: 2;
  opacity: 1;
}

.bx-story-fenster__ansicht[data-bx-lage="fremd"] {
  transform: translateY(10px);
}

.bx-story-fenster__ansicht[data-bx-wartet] {
  opacity: 0;
}

bx-scrollstory[data-bx-pruefung] .bx-story-fenster__ansicht {
  transition: none;
}

/* Skeleton "Ansicht lädt …" until the image is decoded */
.bx-story-fenster__laedt {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--farbe-weiss);
}

.bx-story-fenster__ansicht[data-bx-geladen] .bx-story-fenster__laedt {
  display: none;
}

.bx-story-fenster__laedt span {
  height: 10px;
  border-radius: var(--radius-app);
  background: var(--farbe-app-linie);
}

.bx-story-fenster__laedt span:first-child {
  width: 38%;
  height: 14px;
}

.bx-story-fenster__laedt span:nth-child(2) {
  height: 28px;
  background: var(--farbe-app-kopf);
  opacity: 0.12;
}

.bx-story-fenster__laedt span:nth-child(4) {
  width: 92%;
}

.bx-story-fenster__laedt .bx-story-fenster__laedt-text {
  height: auto;
  margin-top: auto;
  background: none;
  font-family: var(--schrift-familie-mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--farbe-mikrotext);
}

/* Camera (zoom and pan via CSSOM), image frame with crop, highlighter, effects layer */
.bx-story-fenster__kamera {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  transform-origin: 0 0;
  will-change: transform;
}

.bx-story-fenster__bild {
  position: absolute;
}

.bx-story-fenster__bild img {
  display: block;
  width: 100%;
  height: auto;
}

.bx-story-fenster__aufheller {
  position: absolute;
  inset: 0;
  mix-blend-mode: color-dodge;
  opacity: 0;
  pointer-events: none;
}

.bx-story-fenster__fx {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: calc(var(--bx-breite) * 1px);
  height: calc(var(--bx-hoehe) * 1px);
  transform: scale(var(--bx-skala, 0));
  transform-origin: 0 0;
  pointer-events: none;
}

.bx-story-fenster__wirkung {
  position: absolute;
  inset: 0;
}

.bx-story-fenster__teil {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border: 0 solid transparent;
  background-repeat: no-repeat;
  font-family: var(--schrift-familie-app);
  font-size: 14px;
  color: var(--farbe-app-text);
  white-space: nowrap;
}

.bx-story-fenster__teil[data-bx-ausrichtung="mitte"] {
  justify-content: center;
}

.bx-story-fenster__teil[data-bx-ausrichtung="ende"] {
  justify-content: flex-end;
}

.bx-story-fenster__teil[data-bx-form="pfeil"] {
  border-width: 0 var(--bx-rand) var(--bx-rand) 0;
}

/* Pointer inside the camera, counter-scaled; ring and arrow with a px minimum */
.bx-story-fenster__zeiger {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.bx-story-fenster__gegen {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.bx-story-fenster__ring {
  position: absolute;
  left: min(-11px, -1.95cqw);
  top: min(-11px, -1.95cqw);
  width: max(22px, 3.9cqw);
  height: max(22px, 3.9cqw);
  box-sizing: border-box;
  border: max(2px, 0.3cqw) solid var(--farbe-orange-flaeche);
  border-radius: var(--radius-rund);
  opacity: 0;
}

.bx-story-fenster__druck {
  position: absolute;
  left: -0.6px;
  top: -0.6px;
  transform-origin: 1px 1px;
}

.bx-story-fenster__pfeil {
  display: block;
  width: auto;
  height: max(13px, 2.3cqw);
  overflow: visible;
  filter: drop-shadow(var(--schatten-zeiger));
}

.bx-story-fenster__pfeil path {
  fill: var(--farbe-story-zeiger);
  stroke: var(--farbe-weiss);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

/* Check mode: still without pointer; natively the stage is fixed top left at the size of the image area */
bx-scrollstory[data-bx-standbild] .bx-story-fenster__zeiger {
  visibility: hidden;
}

bx-scrollstory[data-bx-nativ] .bx-story-fenster__buehne {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: calc(var(--bx-bildbreite) * 1px);
}

@media (width < 768px) {
  .bx-story-fenster__leiste {
    height: 32px;
  }

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

  .bx-story-fenster__seitenleiste {
    display: none;
  }
}

/*
 * Scene view: the scene host (`produkt-animation`, `rahmen: ohne`) fills the stage or layer; the stage keeps 16:9
 * even when szene.js moves the initial host into the first layer.
 */
.bx-story-fenster__buehne:has(.bx-produkt-animation) {
  aspect-ratio: 16 / 9;
}

.bx-story-fenster__ansicht > .bx-produkt-animation {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/*
  Shared CSS of the stages: live layer above the still image, visibility per state, scaling of the surface, pointer,
  click ring and veil of family A, still capture of the check function, play button symbol and the pause rule. The host
  box and the still-image shell live only in css/bausteine/produkt-animation.css; the live layer requires the
  positioned host. Reduced motion acts only via the state `reduziert`, no media query.
*/

/* Live layer: sits above the still-image shell, visible only in the running states (visibility instead of 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;
}

/* Surface of fixed geometry, scaled as a whole (skaliere.js, transform: scale(), never 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;
}

/* Pointer, click ring, veil; zeiger.js sets position, opacity and the ring size (RING in zeiger.js, as
   --bx-ring-durchmesser and --bx-ring-rand) via 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;
}

/* Still capture of the check function (zeig with standbild: true): without pointer, ring, chapter chip and controls */
[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;
}

/* Check function native: live layer fixed at the top left in design size, scale 1 (capture) */
[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;
}

/* Play button symbol (a with correction): running and paused => pause, all other states => play */
[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;
}

/* Pause rule: continuous CSS animations stop when out of view, when paused and with reduced motion */
[data-bx-zustand="pausiert"] *,
[data-bx-zustand="angehalten"] *,
[data-bx-zustand="reduziert"] * {
  animation-play-state: paused;
}

/* Home page: text, founder image and chronicle. */
.bx-entstehung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--abstand-40) var(--abstand-56);
  padding: var(--abstand-104) var(--seitenrand) var(--abstand-100);
  align-items: center;
  border-block-start: 1px solid var(--farbe-linie-sektion);
}
.bx-entstehung .bx-sektionskopf__titel {
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schrift-h2-start-zeile);
  letter-spacing: var(--schrift-h2-start-laufweite);
}
.bx-entstehung__zweitton { color: var(--farbe-titel-zweitton); }
.bx-entstehung__lead { color: var(--farbe-navy); margin-block-start: var(--abstand-28); font-weight: var(--schrift-text-gross-gewicht); font-size: var(--schrift-text-gross-groesse); line-height: var(--schrift-text-gross-zeile); letter-spacing: var(--schrift-text-gross-laufweite); }
.bx-entstehung__text > p:not(.bx-entstehung__lead) { color: var(--farbe-text-sekundaer); }
.bx-entstehung__figur {
  position: relative;
  min-inline-size: 0;
  min-block-size: 500px; /* Minimum height. */
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--farbe-navy);
}
.bx-entstehung__figur picture { display: contents; }
.bx-entstehung__figur img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.bx-entstehung__figur[data-bx-fokus="oben-drittel"] img { object-position: center 32%; }
/* Gradient from the existing colour token; the signature ensures at least 92 % coverage. */
.bx-entstehung__figur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--farbe-navy-tief) 92%, transparent) 0%, color-mix(in srgb, var(--farbe-navy-tief) 55%, transparent) 42%, transparent 72%);
  pointer-events: none;
}
.bx-entstehung__figur figcaption {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: var(--abstand-30) var(--abstand-32);
  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-feld-label-mono-laufweite);
  color: var(--farbe-navy-text-hell);
}
.bx-entstehung__chronik { grid-column: 1 / -1; margin-block-start: var(--abstand-32); }
@media (width < 1080px) {
  .bx-entstehung { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 768px) {
  .bx-entstehung { padding-block: var(--abstand-56); gap: var(--abstand-28); }
}

/*
 * Block "zeitachse": chapter bar on navy (with pulse at the current item) and list with diamond. The chapter bar
 * carries page margin, top spacing and lines itself (usable nested in the hero). Motion only without reduced
 * motion; keyframes with `from` (base shape = end state).
 */
.bx-zeitachse {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-familie-text);
}

/* == chapter bar == */
.bx-zeitachse--kapitelleiste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: var(--abstand-36);
  margin-block-start: var(--abstand-68);
  padding-inline: var(--seitenrand);
}

.bx-zeitachse__kapitel {
  position: relative;
  min-inline-size: 0;
  border-top: 2px solid var(--farbe-navy-linie-stark);
}

.bx-zeitachse__marke {
  position: absolute;
  inset-block-start: calc(var(--abstand-6) * -1);
  left: 1px; /* Design */
  width: 10px;
  height: 10px;
  background-color: var(--farbe-weiss);
  rotate: 45deg;
}

.bx-zeitachse__link {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-9);
  padding: var(--abstand-26) var(--abstand-20) 0 0;
  color: var(--farbe-weiss);
  transition: translate var(--bewegung-dauer-kurz);
}

.bx-zeitachse__link:hover,
.bx-zeitachse__link:focus-visible {
  translate: 0 var(--bewegung-lift);
}

.bx-zeitachse__kapitel .bx-zeitachse__jahr {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-kapitel-jahr-gewicht);
  font-size: var(--schrift-kapitel-jahr-groesse);
  line-height: var(--schrift-kapitel-jahr-zeile);
  letter-spacing: var(--schrift-kapitel-jahr-laufweite);
}

.bx-zeitachse__kurz {
  color: var(--farbe-navy-text-hell);
  font-weight: var(--schrift-kapitel-titel-gewicht);
  font-size: var(--schrift-kapitel-titel-groesse);
  line-height: var(--schrift-kapitel-titel-zeile);
  letter-spacing: var(--schrift-kapitel-titel-laufweite);
}

.bx-zeitachse__kapitel--aktuell .bx-zeitachse__marke {
  inset-block-start: calc(var(--abstand-8) * -1);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-rund);
  background-color: var(--farbe-orange-flaeche);
  box-shadow: var(--schatten-puls-orange-aus);
  rotate: 0deg;
}

.bx-zeitachse__kapitel--aktuell .bx-zeitachse__jahr {
  color: var(--farbe-orange-navy-text);
}

/* == list == */
.bx-zeitachse--liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--abstand-28) var(--abstand-32);
  margin-block-start: var(--abstand-72);
  border-top: 2px solid var(--farbe-navy);
}

.bx-zeitachse__eintrag {
  position: relative;
  min-inline-size: 0;
  padding-block-start: var(--abstand-22);
}

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

.bx-zeitachse__eintrag--aktuell .bx-zeitachse__marke {
  background-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__eintrag .bx-zeitachse__jahr {
  margin: 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-zahl-gewicht);
  font-size: var(--schrift-zahl-groesse);
  line-height: var(--schrift-zahl-zeile);
  letter-spacing: var(--schrift-zahl-laufweite);
}

.bx-zeitachse__eintrag--aktuell .bx-zeitachse__jahr {
  color: var(--farbe-orange-text);
}

.bx-zeitachse__satz {
  margin: var(--abstand-10) 0 0;
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-liste-gewicht);
  font-size: var(--schrift-liste-groesse);
  line-height: var(--schrift-liste-zeile);
  letter-spacing: var(--schrift-liste-laufweite);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bx-zeitachse-steig {
    from {
      opacity: 0;
      translate: 0 10px;
    }
  }

  @keyframes bx-zeitachse-puls {
    from {
      box-shadow: var(--schatten-puls-orange-an);
    }
  }

  .bx-zeitachse__kapitel {
    animation: bx-zeitachse-steig var(--bewegung-einstieg-dauer) both;
  }

  .bx-zeitachse__kapitel:nth-child(2) {
    animation-delay: calc(.16s + var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(3) {
    animation-delay: calc(.16s + 2 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(4) {
    animation-delay: calc(.16s + 3 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(5) {
    animation-delay: calc(.16s + 4 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel:nth-child(6) {
    animation-delay: calc(.16s + 5 * var(--bewegung-einstieg-staffel));
  }

  .bx-zeitachse__kapitel--aktuell .bx-zeitachse__marke {
    animation: bx-zeitachse-puls 2.4s infinite;
  }

  /* chapter bar: .7 s, first chapter only after .16 s, pulse with 70 % stage and ease-out */
  @keyframes bx-zeitachse-puls-leiste {
    0% {
      box-shadow: var(--schatten-puls-orange-an);
    }

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

  .bx-zeitachse--kapitelleiste .bx-zeitachse__kapitel {
    animation-duration: var(--bewegung-einstieg-kurz);
  }

  .bx-zeitachse--kapitelleiste .bx-zeitachse__kapitel:nth-child(1) {
    animation-delay: .16s;
  }

  .bx-zeitachse--kapitelleiste .bx-zeitachse__kapitel--aktuell .bx-zeitachse__marke {
    animation: bx-zeitachse-puls-leiste 2.4s ease-out infinite;
  }

  .bx-zeitachse--kapitelleiste .bx-zeitachse__link {
    transition-duration: var(--bewegung-kapitelleiste-lift-dauer);
    transition-timing-function: var(--bewegung-kurve-heraus);
  }
}

.bx-zeitachse--kapitelleiste .bx-zeitachse__link:hover,
.bx-zeitachse--kapitelleiste .bx-zeitachse__link:focus-visible {
  translate: 0 var(--bewegung-lift-gross);
}

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

@media (width < 768px) {
  .bx-zeitachse--kapitelleiste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--abstand-20);
    margin-block-start: var(--abstand-42);
  }

  .bx-zeitachse--liste {
    gap: var(--abstand-20) var(--abstand-20);
    margin-block-start: 45px; /* Design */
  }
}

/*
 * == Variant `fristen` ==
 * Three stages as grid year | node | card, a dashed line between the nodes, the status per stage from the build
 * cut-off date (`data-bx-stufe`). The today mark sits before the next stage, its progress via `data-bx-prozent`
 * (prozent.css). With `liste` the navy list sits beside it, below 1080px underneath. Without the modifier
 * `--fristen` none of these rules apply.
 */
.bx-zeitachse--fristen {
  display: block;
}

/*
 * The own section with navy list sits in the page grid on the light band (padding 50 / 56, surface #F4F6FA).
 * Without a list the timeline sits in a card and stays without padding.
 */
.bx-zeitachse--fristen.bx-zeitachse--mit-liste {
  padding: var(--abstand-50) var(--seitenrand);
  background-color: var(--farbe-flaeche-band);
}

.bx-zeitachse--fristen .bx-zeitachse__kopf {
  max-inline-size: 780px;
  margin-block-end: var(--abstand-30);
}

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

.bx-zeitachse--mit-liste .bx-zeitachse__fristen-raster {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.bx-zeitachse__fristen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-zeitachse__stufe,
.bx-zeitachse__heute {
  position: relative;
  display: grid;
  grid-template-columns: 78px 36px minmax(0, 1fr);
  gap: 0 var(--abstand-18);
  padding-block-end: var(--abstand-18);
}

/* Line from node to node (dashed; solid before the reached one) */
.bx-zeitachse__stufe::before,
.bx-zeitachse__heute::before {
  content: '';
  position: absolute;
  inset-block: var(--abstand-36) 0;
  inset-inline-start: calc(78px + var(--abstand-18) + var(--abstand-17)); /* Design: centre of the node */
  inline-size: 2px;
  background: repeating-linear-gradient(180deg, var(--farbe-linie-mittel) 0 6px, transparent 6px 12px);
}

.bx-zeitachse__stufe:last-child::before {
  content: none;
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"]::before {
  background: var(--farbe-navy);
}

.bx-zeitachse__stufe-jahr {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-block-start: var(--abstand-6);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-kachel-zahl-gewicht);
  font-size: var(--schrift-kachel-zahl-groesse);
  line-height: var(--schrift-kachel-zahl-zeile);
  letter-spacing: var(--schrift-kachel-zahl-laufweite);
  text-align: end;
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-jahr {
  color: var(--farbe-navy);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-jahr {
  color: var(--farbe-orange-text);
}

.bx-zeitachse__stufe-datum {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: var(--abstand-5) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-meta-mono-gewicht);
  font-size: var(--schrift-label-groesse);
  line-height: var(--schrift-meta-mono-zeile);
  letter-spacing: var(--schrift-meta-mono-laufweite);
  text-align: end;
}

.bx-zeitachse__stufe-knoten {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie-mittel);
  box-sizing: border-box;
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-h3-gewicht);
  font-size: var(--schrift-textlink-groesse);
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-knoten {
  border-color: var(--farbe-navy);
  background-color: var(--farbe-navy);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-knoten {
  border-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__stufe-karte {
  grid-column: 3;
  grid-row: 1 / span 2;
  padding: var(--abstand-14) var(--abstand-18);
  border-radius: var(--radius-rahmen);
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-weiss);
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-karte {
  border-color: var(--farbe-flaeche-karte);
  background-color: var(--farbe-flaeche-karte);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-karte {
  border-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__stufe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-8) var(--abstand-16);
  margin: 0;
}

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

.bx-zeitachse__stufe-pille {
  flex: none;
  padding: var(--abstand-6) var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
  line-height: var(--schrift-label-zeile);
  letter-spacing: var(--schrift-chip-mono-laufweite);
}

.bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

.bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-orange-karte);
  color: var(--farbe-orange-text);
}

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

.bx-zeitachse__stufe-zusatz {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-10);
  margin: var(--abstand-10) 0 0;
  color: var(--farbe-gruen-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

.bx-zeitachse__stufe-haken {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen);
}

/* Today mark: small node, date, progress to the next stage and transition line */
.bx-zeitachse__heute-knoten {
  position: relative;
  z-index: 1;
  grid-column: 2;
  justify-self: center;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: var(--abstand-10);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-orange-flaeche);
}

.bx-zeitachse__heute-inhalt {
  grid-column: 3;
  padding-block: var(--abstand-6) var(--abstand-4);
}

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

.bx-zeitachse__heute-fortschritt {
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
  margin: 0;
}

.bx-zeitachse__heute-balken {
  position: relative;
  flex: 1;
  block-size: 6px;
  overflow: hidden;
  border-radius: var(--radius-mini);
  background-color: var(--farbe-linie);
}

.bx-zeitachse__heute-fuellung {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--bx-prozent, 0%);
  border-radius: var(--radius-mini);
  background: linear-gradient(90deg, var(--farbe-navy), var(--farbe-orange-flaeche));
}

.bx-zeitachse__heute-prozent {
  flex: none;
  color: var(--farbe-navy);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-label-gewicht);
  font-size: var(--schrift-eyebrow-groesse);
}

.bx-zeitachse__heute-text {
  margin: var(--abstand-10) 0 0;
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
}

/* Navy list beside the stages */
.bx-zeitachse__fristen-liste {
  padding: var(--abstand-28) var(--abstand-30);
  border-radius: var(--radius-karte);
  background-color: var(--farbe-navy);
}

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

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

.bx-zeitachse__liste-punkt-titel {
  margin: 0 0 var(--abstand-6);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-trust-titel-gewicht);
  font-size: var(--schrift-trust-titel-groesse);
  line-height: var(--schrift-trust-titel-zeile);
}

.bx-zeitachse__liste-punkt-text {
  margin: 0;
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-karte-text-gewicht);
  font-size: var(--schrift-karte-text-groesse);
  line-height: var(--schrift-karte-text-zeile);
}

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

.bx-zeitachse__fristen-link {
  margin: var(--abstand-18) 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-karte {
    transition: transform var(--bewegung-dauer-kurz);
  }

  .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-karte:hover {
    transform: translateX(var(--abstand-4));
  }
}

@media (width < 768px) {
  .bx-zeitachse__stufe,
  .bx-zeitachse__heute {
    grid-template-columns: 56px 28px minmax(0, 1fr);
    gap: 0 var(--abstand-12);
  }

  .bx-zeitachse__stufe::before,
  .bx-zeitachse__heute::before {
    inset-block-start: var(--abstand-28);
    inset-inline-start: calc(var(--abstand-56) + var(--abstand-12) + var(--abstand-13));
  }

  .bx-zeitachse__stufe-knoten {
    inline-size: 28px;
    block-size: 28px;
  }

  .bx-zeitachse__stufe-jahr {
    font-size: var(--schrift-h3-groesse);
  }
}

/*
 * == Stages as white cards beside the navy list ==
 * With a list (finance only) each stage is a card (radius 14, border, padding 16 / 20) of a 46 px year tile and text;
 * node, line and date are omitted. The card column is as tall as the navy card (grid stretch, equal-height cards,
 * content centred); the link sits in the header row right of the intro.
 */
.bx-zeitachse__fristen-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-16) var(--abstand-40);
  margin-block-end: var(--abstand-28);
}

.bx-zeitachse__fristen-kopfzeile > .bx-zeitachse__kopf {
  max-inline-size: 760px;
  min-inline-size: 0;
  margin-block-end: 0;
}

.bx-zeitachse__fristen-kopflink {
  margin: 0;
  white-space: nowrap;
}

.bx-zeitachse--mit-liste .bx-zeitachse__fristen-raster {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--abstand-24);
  align-items: stretch;
}

/* after the design rules, otherwise overridden */
@media (width < 1080px) {
  .bx-zeitachse--mit-liste .bx-zeitachse__fristen-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bx-zeitachse--mit-liste .bx-zeitachse__fristen {
  gap: var(--abstand-10);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe {
  flex: 1 1 0;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--abstand-16);
  align-items: center;
  align-content: center;
  padding: var(--abstand-16) var(--abstand-20);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-weiss);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe::before,
.bx-zeitachse--mit-liste .bx-zeitachse__stufe-datum,
.bx-zeitachse--mit-liste .bx-zeitachse__stufe-knoten {
  display: none;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-jahr {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  padding: 0;
  border-radius: var(--radius-promo);
  background-color: var(--farbe-flaeche-kachel);
  color: var(--farbe-navy);
  font-size: 14px;
  line-height: var(--schriftskala-zeile-1);
  letter-spacing: var(--schriftskala-laufweite-minus-0-3);
  text-align: center;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe] .bx-zeitachse__stufe-jahr {
  color: var(--farbe-navy);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-jahr {
  background-color: var(--farbe-orange-karte);
  color: var(--farbe-orange-text);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-karte {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe] .bx-zeitachse__stufe-karte {
  border: 0;
  background-color: transparent;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-kopf {
  justify-content: flex-start;
  gap: var(--abstand-10);
  margin-block-end: var(--abstand-4);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-titel {
  font-size: 15.5px;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-pille {
  padding: 3px var(--abstand-10); /* Design */
  background-color: var(--farbe-linie-sektion);
  color: var(--farbe-app-chip-grau-text);
  font-family: var(--schrift-familie-text);
  font-size: 11px;
  letter-spacing: 0;
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe="vorbei"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-gruen-flaeche);
  color: var(--farbe-gruen-text);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe[data-bx-stufe="naechste"] .bx-zeitachse__stufe-pille {
  background-color: var(--farbe-orange-text);
  color: var(--farbe-weiss);
}

.bx-zeitachse--mit-liste .bx-zeitachse__stufe-text {
  margin: 0;
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schriftskala-zeile-1-55);
}

.bx-zeitachse--mit-liste .bx-zeitachse__fristen-liste {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-26) var(--abstand-28) var(--abstand-10);
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-titel {
  margin-block-end: var(--abstand-14);
  letter-spacing: var(--schriftskala-laufweite-1-3);
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkte {
  flex: 1 0 auto;
  gap: 0;
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkte > li {
  display: grid;
  flex: 1 0 auto;
  align-content: center;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--abstand-12);
  padding-block: var(--abstand-16);
  border-block-start: 1px solid var(--farbe-navy-linie);
}

.bx-zeitachse__liste-haken {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--radius-pille);
  background-color: var(--farbe-mint-pille);
  color: var(--farbe-mint);
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkt-titel {
  margin-block-end: 3px; /* Design */
  font-size: 15.5px;
}

.bx-zeitachse--mit-liste .bx-zeitachse__liste-punkt-text {
  color: var(--farbe-navy-text-lead);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schriftskala-zeile-1-55);
}

/*
 * Block "logo-laufband": track and copy run through the module `laufband` (laufband.css); here area, spacing, logos
 * and the value table of the heights.
 */
.bx-logo-laufband {
  padding: var(--abstand-30) 0 var(--abstand-34);
  border-block: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-weiss);
  text-align: center;
}

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

.bx-logo-laufband__maske {
  overflow: clip;
  mask-image: linear-gradient(90deg, transparent, var(--farbe-maske) 12%, var(--farbe-maske) 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--farbe-maske) 12%, var(--farbe-maske) 88%, transparent);
}

/* higher specificity than the module (laufband.css) */
.bx-logo-laufband [data-bx-laufband-spur] > ul {
  align-items: center;
  gap: var(--abstand-72);
  padding-inline-end: var(--abstand-72);
}

.bx-logo-laufband--einfarbig [data-bx-laufband-spur] {
  animation-duration: var(--bewegung-laufband-dauer-einfarbig);
}

.bx-logo-laufband--einfarbig [data-bx-laufband-spur] > ul {
  gap: var(--abstand-60);
  padding-inline-end: var(--abstand-60);
}

/* Logo: height from the value table block, grey levels via filter (not single-coloured) */
.bx-logo-laufband__logo img {
  display: block;
  inline-size: auto;
  block-size: var(--bx-logo-hoehe);
  max-inline-size: none;
  filter: brightness(0) saturate(0);
  opacity: .5;
  transition: opacity var(--bewegung-dauer-kurz);
}

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

.bx-logo-laufband--einfarbig .bx-logo-laufband__logo img {
  filter: none;
  opacity: .72;
}

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

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

.bx-logo-laufband--einfarbig .bx-logo-laufband__titel {
  color: var(--farbe-navy-text-sekundaer);
}

.bx-logo-laufband--einfarbig .bx-logo-laufband__titel a:hover {
  color: var(--farbe-weiss);
}

@media (width < 768px) {
  .bx-logo-laufband [data-bx-laufband-spur] > ul {
    gap: var(--abstand-24);
    padding-inline-end: var(--abstand-24);
  }

  .bx-logo-laufband--einfarbig [data-bx-laufband-spur] > ul {
    gap: var(--abstand-20);
    padding-inline-end: var(--abstand-20);
  }
}

/*
 * `hero: true` in the navy hero. Line in the page margin, visible title, run time 38 s, logos with opacity .8.
 */
.bx-logo-laufband--hero {
  margin-inline: var(--seitenrand);
  padding: var(--abstand-18) 0 var(--abstand-26);
  border-block-start: 1px solid var(--farbe-navy-glas-rand);
  background-color: transparent;
}

.bx-logo-laufband--hero .bx-logo-laufband__titel {
  margin-block-end: var(--abstand-16);
}

.bx-logo-laufband--hero [data-bx-laufband-spur] {
  animation-duration: var(--bewegung-laufband-dauer);
}

.bx-logo-laufband--hero [data-bx-laufband-spur] > ul {
  gap: var(--abstand-72);
  padding-inline-end: var(--abstand-72);
}

.bx-logo-laufband--hero.bx-logo-laufband--einfarbig .bx-logo-laufband__logo img {
  opacity: .8;
}

/* Top spacing of the single-coloured band (mobile 40 px); not in the hero */
.bx-logo-laufband--einfarbig:not(.bx-logo-laufband--hero) {
  margin-block-start: var(--abstand-64);
}

@media (width < 768px) {
  .bx-logo-laufband--einfarbig:not(.bx-logo-laufband--hero) {
    margin-block-start: var(--abstand-40);
  }
}

/* Value table (CSP-safe): logo height 8 to 64 px from data-bx-hoehe */
[data-bx-hoehe="8"] {
  --bx-logo-hoehe: 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 2K and larger: the band runs over the full width, the title stays in the content area (box width, centred) */
@media (width > 1440px) {
  .bx-logo-laufband:not(.bx-logo-laufband--hero) .bx-logo-laufband__titel {
    margin-inline: var(--bx-rand-extra);
  }
}

/*
 * Marquee: the track of list and copy moves left by half its width and then restarts seamlessly. It pauses on
 * hover, focus and outside the viewport (data-pausiert, laufband.js). With reduced motion it is a bar without the
 * copy and wraps (the global rule in basis.css only sets 0.01 ms and would let the track jump to -50 %). The rules
 * in the block must match the base rules in specificity. The track deliberately overflows the root, which clips it.
 */
@keyframes bx-laufband {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

[data-bx-modul~="laufband"] {
  overflow: clip;
}

[data-bx-laufband-spur] {
  display: flex;
  inline-size: max-content;
  animation: bx-laufband var(--bewegung-laufband-dauer) linear infinite;
}

[data-bx-laufband-spur] > ul {
  display: flex;
  flex: none;
  gap: var(--abstand-24);
  margin: 0;
  padding: 0 var(--abstand-24) 0 0;
  list-style: none;
}

[data-bx-modul~="laufband"]:is(:hover, :focus-within, [data-pausiert]) [data-bx-laufband-spur] {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  [data-bx-laufband-spur] {
    inline-size: auto;
    animation: none;
  }

  [data-bx-laufband-spur] > ul {
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-inline-size: 0;
  }

  /*
   * Same nesting as the base rule of the list (display: flex), otherwise the copy loses on specificity.
   * `!important` as in basis.css: a later rule with two classes (e.g. a future marquee block with its own display
   * on the tiles) must not bring the copy back under reduced motion.
   */
  [data-bx-laufband-spur] > [data-bx-laufband-kopie] {
    display: none !important;
  }
}

/*
 * Block "team": founder cards, navy tiles, centered row and grid with role tiles and LinkedIn mark. The monogram
 * always stands in the avatar, the photo lies over it; the photo position comes from the value table at the end (CSP).
 */
.bx-team {
  font-family: var(--schrift-familie-text);
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-team, [class*="bx-team__"]) {
  --_team-fuss-gewicht: var(--schriftskala-gewicht-500);
  --_team-fuss-groesse: var(--schriftskala-groesse-14);
  --_team-fuss-zeile: var(--schriftskala-zeile-1-5);
  --_team-fuss-laufweite: 0;
}

.bx-team__avatar,
.bx-team__bild {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bx-team__avatar {
  border-radius: var(--radius-rund);
}

.bx-team__avatar img,
.bx-team__bild img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--bx-foto-x, 50%) var(--bx-foto-y, 0%);
}

.bx-team__name,
.bx-team__rolle {
  display: block;
  /* page has lang="de": hyphenate by syllables first (limits in basis.css), mid-word only as a fallback */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* == gruender-karte == */
.bx-team--gruender-karte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--abstand-12);
  margin: var(--abstand-10) 0 0;
  padding: 0;
  list-style: none;
}

.bx-team--gruender-karte .bx-team__karte {
  display: flex;
  align-items: center;
  gap: var(--abstand-16);
  padding: var(--abstand-14) var(--abstand-18) var(--abstand-14) var(--abstand-14);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-panel);
  background-color: var(--farbe-weiss);
}

.bx-team--gruender-karte .bx-team__avatar {
  width: 64px;
  height: 64px;
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
  font-weight: var(--schrift-monogramm-mittel-gewicht);
  font-size: var(--schrift-monogramm-mittel-groesse);
  line-height: var(--schrift-monogramm-mittel-zeile);
  letter-spacing: var(--schrift-monogramm-mittel-laufweite);
}

.bx-team__text {
  margin: 0;
}

.bx-team--gruender-karte .bx-team__name {
  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-team--gruender-karte .bx-team__rolle {
  margin-block-start: 3px; /* Design */
  hyphens: manual; /* the design does not hyphenate short roles ("Projektma-nagement") */
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-person-rolle-gewicht);
  font-size: var(--schrift-person-rolle-groesse);
  line-height: var(--schrift-person-rolle-zeile);
  letter-spacing: var(--schrift-person-rolle-laufweite);
}

/* == navy-kacheln == */
.bx-team--navy-kacheln {
  position: relative;
  overflow: hidden;
  padding: var(--abstand-76) var(--seitenrand) var(--abstand-80);
  background-color: var(--farbe-navy-tief);
  color: var(--farbe-weiss);
}

.bx-team--navy-kacheln::before {
  content: '';
  position: absolute;
  right: -240px; /* Design */
  bottom: -380px; /* Design */
  width: 880px;
  height: 760px;
  background: radial-gradient(closest-side, var(--farbe-glow-mint-gruenwelt), var(--farbe-glow-mint-aus));
  pointer-events: none;
}

.bx-team__innen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: var(--abstand-72);
  align-items: center;
  max-width: var(--breite-inhalt-mittel-max);
  margin-inline: auto;
}

.bx-team--navy-kacheln .bx-sektionskopf__eyebrow {
  color: var(--farbe-mint);
}

.bx-team--navy-kacheln .bx-sektionskopf__eyebrow::before {
  content: none;
}

.bx-team--navy-kacheln .bx-sektionskopf__titel {
  font-weight: var(--schrift-titel-gewicht);
  font-size: var(--schrift-titel-groesse);
  line-height: var(--schrift-titel-zeile);
  letter-spacing: var(--schrift-titel-laufweite);
}

.bx-team--navy-kacheln .bx-sektionskopf__lead {
  color: var(--farbe-navy-text-hell);
}

.bx-team--navy-kacheln .bx-team__kopf {
  margin-block-end: 0; /* column gap alone, no extra margin (mobile, section "Menschen") */
}

/* Outline button "Alle 20 kennenlernen" with 2 px border, 15/28 px, 16 px */
.bx-team--navy-kacheln .bx-button--sekundaer-navy {
  padding: var(--abstand-15) var(--abstand-28);
  border-width: 2px; /* value as in the design */
  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);
}

.bx-team__kopf-aktion {
  margin: 0;
}

.bx-team--navy-kacheln .bx-team__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-team--navy-kacheln .bx-team__kachel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-12);
  min-inline-size: 0;
  padding: var(--abstand-16) var(--abstand-16) var(--abstand-15);
  border: 1px solid var(--farbe-navy-linie);
  border-radius: var(--radius-panel);
  background-color: var(--farbe-navy-glas);
}

.bx-team--navy-kacheln .bx-team__avatar {
  width: 52px;
  height: 52px;
  border: 1px solid var(--farbe-navy-glas-rand);
  background-color: var(--farbe-navy-innenfeld);
  color: var(--farbe-weiss);
  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);
}

.bx-team--navy-kacheln .bx-team__name {
  color: var(--farbe-weiss);
  font-weight: var(--schrift-person-name-klein-gewicht);
  font-size: var(--schrift-person-name-klein-groesse);
  line-height: var(--schrift-person-name-klein-zeile);
  letter-spacing: var(--schrift-person-name-klein-laufweite);
}

.bx-team--navy-kacheln .bx-team__rolle {
  margin-block-start: calc(3px - var(--abstand-12)); /* Design: 3 px below the name, the flex gap is 12 px */
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--schrift-person-rolle-klein-gewicht);
  font-size: var(--schrift-person-rolle-klein-groesse);
  line-height: var(--schrift-person-rolle-klein-zeile);
  letter-spacing: var(--schrift-person-rolle-klein-laufweite);
}

.bx-team__fuss {
  margin: var(--abstand-14) 0 0;
  color: var(--farbe-navy-text-sekundaer);
  font-weight: var(--_team-fuss-gewicht);
  font-size: var(--_team-fuss-groesse);
  line-height: var(--_team-fuss-zeile);
  letter-spacing: var(--_team-fuss-laufweite);
}

/* == zentriert == */
.bx-team--zentriert {
  padding: var(--abstand-sektion-kapitel) var(--seitenrand) 92px; /* Design */
  border-top: 1px solid var(--farbe-linie-sektion);
  background-color: var(--farbe-weiss);
}

.bx-team--zentriert .bx-team__kopf {
  max-width: 720px;
  margin: 0 auto var(--abstand-44);
  text-align: center;
}

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

.bx-team--zentriert .bx-team__liste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--abstand-28) var(--abstand-18);
  max-width: 1100px;
  margin: 0 auto var(--abstand-38);
  padding: 0;
  list-style: none;
}

.bx-team--zentriert .bx-team__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-6);
  min-inline-size: 0;
  text-align: center;
}

.bx-team--zentriert .bx-team__avatar {
  width: 88px;
  height: 88px;
  margin-block-end: var(--abstand-6);
  border: 1px solid var(--farbe-linie);
  background-color: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
  font-weight: var(--schrift-monogramm-mittel-gewicht);
  font-size: var(--schrift-monogramm-mittel-groesse);
  line-height: var(--schrift-monogramm-mittel-zeile);
  letter-spacing: var(--schrift-monogramm-mittel-laufweite);
}

.bx-team--zentriert .bx-team__name {
  color: var(--farbe-navy);
  font-weight: var(--schrift-person-name-klein-gewicht);
  font-size: var(--schrift-person-name-klein-groesse);
  line-height: var(--schrift-person-name-klein-zeile);
  letter-spacing: var(--schrift-person-name-klein-laufweite);
}

.bx-team--zentriert .bx-team__rolle {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-person-rolle-klein-gewicht);
  font-size: var(--schrift-person-rolle-klein-groesse);
  line-height: var(--schrift-person-rolle-klein-zeile);
  letter-spacing: var(--schrift-person-rolle-klein-laufweite);
}

.bx-team__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-24);
  margin: 0;
}

/* == raster == */
.bx-team--raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--abstand-20);
  margin: 0;
  padding: var(--abstand-36) var(--seitenrand) var(--abstand-20);
  list-style: none;
}

.bx-team--raster .bx-team__zelle {
  min-inline-size: 0;
}

.bx-team--raster .bx-team__bild {
  aspect-ratio: 1;
  margin-block-end: var(--abstand-12);
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-flaeche-toggle);
  color: var(--farbe-navy);
  font-weight: var(--schrift-monogramm-gewicht);
  font-size: var(--schrift-monogramm-groesse);
  line-height: var(--schrift-monogramm-zeile);
  letter-spacing: var(--schrift-monogramm-laufweite);
}

.bx-team__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  margin: 0;
}

.bx-team--raster .bx-team__name {
  color: var(--farbe-navy);
  font-weight: var(--schrift-person-name-klein-gewicht);
  font-size: var(--schrift-person-name-klein-groesse);
  line-height: var(--schrift-person-name-klein-zeile);
  letter-spacing: var(--schrift-person-name-klein-laufweite);
}

.bx-team__linkedin {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-app);
  background-color: var(--farbe-marke-linkedin);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-linkedin-marke-gewicht);
  font-size: var(--schrift-linkedin-marke-groesse);
  line-height: var(--schrift-linkedin-marke-zeile);
  letter-spacing: var(--schrift-linkedin-marke-laufweite);
  transition: background-color var(--bewegung-dauer-kurz), color var(--bewegung-dauer-kurz);
}

.bx-team__linkedin:hover,
.bx-team__linkedin:focus-visible {
  background-color: color-mix(in srgb, var(--farbe-marke-linkedin) 70%, var(--farbe-navy));
  color: var(--farbe-weiss);
}

.bx-team--raster .bx-team__rolle {
  margin-block-start: 3px; /* Design */
  margin-block-end: 0; /* the p of the role would otherwise inherit the UA margin, the design has a div */
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-person-rolle-klein-gewicht);
  font-size: var(--schrift-person-rolle-klein-groesse);
  line-height: var(--schrift-person-rolle-klein-zeile);
  letter-spacing: var(--schrift-person-rolle-klein-laufweite);
}

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

  .bx-team--zentriert .bx-team__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 768px) {
  .bx-team--navy-kacheln {
    padding: var(--abstand-47) var(--seitenrand) var(--abstand-50);
  }

  .bx-team--navy-kacheln .bx-button--sekundaer-navy {
    padding-inline: var(--abstand-20);
  }

  .bx-team--navy-kacheln .bx-team__liste,
  .bx-team--zentriert .bx-team__liste,
  .bx-team--raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-team--zentriert {
    padding-block-end: var(--abstand-sektion-kapitel);
  }

  .bx-team--zentriert .bx-team__liste {
    row-gap: var(--abstand-20);
  }
}

/* Value table (CSP): photo position horizontal, 0 to 100 % in steps of five */
[data-bx-fx="0"] {
  --bx-foto-x: 0%;
}

[data-bx-fx="5"] {
  --bx-foto-x: 5%;
}

[data-bx-fx="10"] {
  --bx-foto-x: 10%;
}

[data-bx-fx="15"] {
  --bx-foto-x: 15%;
}

[data-bx-fx="20"] {
  --bx-foto-x: 20%;
}

[data-bx-fx="25"] {
  --bx-foto-x: 25%;
}

[data-bx-fx="30"] {
  --bx-foto-x: 30%;
}

[data-bx-fx="35"] {
  --bx-foto-x: 35%;
}

[data-bx-fx="40"] {
  --bx-foto-x: 40%;
}

[data-bx-fx="45"] {
  --bx-foto-x: 45%;
}

[data-bx-fx="50"] {
  --bx-foto-x: 50%;
}

[data-bx-fx="55"] {
  --bx-foto-x: 55%;
}

[data-bx-fx="60"] {
  --bx-foto-x: 60%;
}

[data-bx-fx="65"] {
  --bx-foto-x: 65%;
}

[data-bx-fx="70"] {
  --bx-foto-x: 70%;
}

[data-bx-fx="75"] {
  --bx-foto-x: 75%;
}

[data-bx-fx="80"] {
  --bx-foto-x: 80%;
}

[data-bx-fx="85"] {
  --bx-foto-x: 85%;
}

[data-bx-fx="90"] {
  --bx-foto-x: 90%;
}

[data-bx-fx="95"] {
  --bx-foto-x: 95%;
}

[data-bx-fx="100"] {
  --bx-foto-x: 100%;
}

/* Value table (CSP): photo position vertical, 0 to 100 % in steps of five */
[data-bx-fy="0"] {
  --bx-foto-y: 0%;
}

[data-bx-fy="5"] {
  --bx-foto-y: 5%;
}

[data-bx-fy="10"] {
  --bx-foto-y: 10%;
}

[data-bx-fy="15"] {
  --bx-foto-y: 15%;
}

[data-bx-fy="20"] {
  --bx-foto-y: 20%;
}

[data-bx-fy="25"] {
  --bx-foto-y: 25%;
}

[data-bx-fy="30"] {
  --bx-foto-y: 30%;
}

[data-bx-fy="35"] {
  --bx-foto-y: 35%;
}

[data-bx-fy="40"] {
  --bx-foto-y: 40%;
}

[data-bx-fy="45"] {
  --bx-foto-y: 45%;
}

[data-bx-fy="50"] {
  --bx-foto-y: 50%;
}

[data-bx-fy="55"] {
  --bx-foto-y: 55%;
}

[data-bx-fy="60"] {
  --bx-foto-y: 60%;
}

[data-bx-fy="65"] {
  --bx-foto-y: 65%;
}

[data-bx-fy="70"] {
  --bx-foto-y: 70%;
}

[data-bx-fy="75"] {
  --bx-foto-y: 75%;
}

[data-bx-fy="80"] {
  --bx-foto-y: 80%;
}

[data-bx-fy="85"] {
  --bx-foto-y: 85%;
}

[data-bx-fy="90"] {
  --bx-foto-y: 90%;
}

[data-bx-fy="95"] {
  --bx-foto-y: 95%;
}

[data-bx-fy="100"] {
  --bx-foto-y: 100%;
}

/* Tabs and cards in the height stack. */
.bx-loesungen-tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--abstand-24); padding: var(--abstand-100) var(--seitenrand) var(--abstand-96); }
.bx-loesungen-tabs .bx-sektionskopf__titel {
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schrift-h2-start-zeile);
  letter-spacing: var(--schrift-h2-start-laufweite);
}
.bx-loesungen-tabs__zweitton { color: var(--farbe-titel-zweitton); }
.bx-loesungen-tabs [role="tablist"] { display: flex; flex-wrap: wrap; gap: var(--abstand-4); inline-size: fit-content; margin-block: var(--abstand-28); padding: var(--abstand-4); border-radius: var(--radius-pille); background: var(--farbe-flaeche-toggle); }
.bx-loesungen-tabs [role="tab"] { padding: var(--abstand-10) var(--abstand-18); border: 0; border-radius: var(--radius-pille); background: transparent; 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-tab-zeile); letter-spacing: 0; cursor: pointer; }
.bx-loesungen-tabs [aria-selected="true"] { background: var(--farbe-navy); color: var(--farbe-weiss); box-shadow: none; }
.bx-loesungen-tabs__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--abstand-16); margin: 0; padding: 0; list-style: none; }
.bx-loesungen-tabs__karte { border: 1px solid var(--farbe-linie-karte); border-radius: var(--radius-karte); }
.bx-loesungen-tabs__karte a { display: flex; flex-direction: column; align-items: start; gap: 0; block-size: 100%; padding: var(--abstand-24) var(--abstand-24) var(--abstand-22); color: var(--farbe-navy); text-decoration: none; }
.bx-loesungen-tabs .bx-tabs { display: contents; }
.bx-loesungen-tabs > .bx-sektionskopf { max-inline-size: 700px; }
.bx-loesungen-tabs__stapel, .bx-loesungen-tabs__free, .bx-loesungen-tabs__vergleich { grid-column: 1 / -1; }
.bx-loesungen-tabs__karte-kopf { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; gap: var(--abstand-12); margin-block-end: var(--abstand-22); }
.bx-loesungen-tabs__icon { display: grid; place-items: center; inline-size: var(--abstand-48); block-size: var(--abstand-48); border-radius: var(--radius-rahmen); background: var(--farbe-vorschau-blau-flaeche); }
.bx-loesungen-tabs__zeichen { display: block; inline-size: var(--abstand-22); block-size: var(--abstand-22); background: var(--farbe-blau); mask: var(--bx-icon) center / contain no-repeat; }
.bx-loesungen-tabs__etikett { display: inline-flex; align-items: center; block-size: 24px; padding: 0 var(--abstand-10); border-radius: var(--radius-pille); background: var(--farbe-flaeche-toggle); font-weight: var(--schriftskala-gewicht-700); font-size: 11px; line-height: var(--schriftskala-zeile-1); letter-spacing: var(--schriftskala-laufweite-0-6); }
.bx-loesungen-tabs__etikett[data-bx-etikett="rolle"] { background: var(--farbe-vorschau-blau-flaeche); color: var(--farbe-blau); }
.bx-loesungen-tabs__etikett[data-bx-etikett="branche"] { background: var(--farbe-orange-karte); color: var(--farbe-orange-text); }
.bx-loesungen-tabs [data-bx-loesungen-tab="aufgabe"] .bx-loesungen-tabs__icon { background: var(--farbe-flaeche-toggle); }
.bx-loesungen-tabs [data-bx-loesungen-tab="aufgabe"] .bx-loesungen-tabs__zeichen { background: var(--farbe-navy); }
.bx-loesungen-tabs [data-bx-loesungen-tab="branche"] .bx-loesungen-tabs__icon { background: var(--farbe-orange-karte); }
.bx-loesungen-tabs [data-bx-loesungen-tab="branche"] .bx-loesungen-tabs__zeichen { background: var(--farbe-orange-text); }
.bx-loesungen-tabs__titel { font-weight: var(--schrift-karte-titel-klein-gewicht); font-size: var(--schrift-karte-titel-klein-groesse); line-height: var(--schrift-karte-titel-klein-zeile); letter-spacing: var(--schrift-karte-titel-klein-laufweite); }
.bx-loesungen-tabs__satz { margin-block-start: var(--abstand-8); color: var(--farbe-mikrotext); font-size: 14.5px; line-height: var(--schriftskala-zeile-1-5); }
.bx-loesungen-tabs__mehr { margin-block-start: auto; padding-block-start: var(--abstand-22); color: var(--farbe-navy); font-weight: var(--schrift-textlink-gewicht); font-size: var(--schrift-textlink-groesse); text-decoration: underline; text-decoration-color: var(--farbe-orange-flaeche); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.bx-loesungen-tabs__free { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-24); margin-block-start: 0; padding: var(--abstand-20) var(--abstand-24); border-radius: var(--radius-karte-klein); background: var(--farbe-gruen-flaeche); }
.bx-loesungen-tabs__free h3, .bx-loesungen-tabs__free p { margin: 0; color: var(--farbe-gruen-text); }
.bx-loesungen-tabs__free h3 { font-weight: var(--schriftskala-gewicht-700); font-size: 16px; line-height: var(--schriftskala-zeile-1-4); }
.bx-loesungen-tabs__free p { margin-block-start: 2px; font-size: 14px; line-height: var(--schriftskala-zeile-1-5); } /* Design */
.bx-loesungen-tabs__free .bx-button { padding: var(--abstand-12) var(--abstand-22); border-color: var(--farbe-gruen); background: var(--farbe-gruen); color: var(--farbe-weiss); font-size: 14.5px; }
.bx-loesungen-tabs__vergleich { margin-block: var(--abstand-24) 0; }
.bx-loesungen-tabs__vergleich .bx-textlink { font-size: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .bx-loesungen-tabs__karte { transition: transform var(--bewegung-dauer-kurz); }
  .bx-loesungen-tabs__karte:has(a:hover), .bx-loesungen-tabs__karte:has(a:focus-visible) { transform: translateY(var(--bewegung-lift)); }
}
@media (width < 1080px) {
  .bx-loesungen-tabs { grid-template-columns: minmax(0, 1fr); }
  .bx-loesungen-tabs__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 768px) {
  .bx-loesungen-tabs { padding-block: var(--abstand-56); }
  .bx-loesungen-tabs__raster { grid-template-columns: minmax(0, 1fr); }
}
.bx-loesungen-tabs [data-bx-icon="trend"] { --bx-icon: url("/assets/bilder/icons/loesungen/trend.5337361f74.svg"); }
.bx-loesungen-tabs [data-bx-icon="headset"] { --bx-icon: url("/assets/bilder/icons/loesungen/headset.c4d6f1939e.svg"); }
.bx-loesungen-tabs [data-bx-icon="pie"] { --bx-icon: url("/assets/bilder/icons/loesungen/pie.52ebec50ed.svg"); }
.bx-loesungen-tabs [data-bx-icon="slider"] { --bx-icon: url("/assets/bilder/icons/loesungen/slider.59f20810e3.svg"); }
.bx-loesungen-tabs [data-bx-icon="bars"] { --bx-icon: url("/assets/bilder/icons/loesungen/bars.1f97efb7d2.svg"); }
.bx-loesungen-tabs [data-bx-icon="user-plus"] { --bx-icon: url("/assets/bilder/icons/loesungen/user-plus.3408ed1f86.svg"); }
.bx-loesungen-tabs [data-bx-icon="file-check"] { --bx-icon: url("/assets/bilder/icons/loesungen/file-check.a309db417a.svg"); }
.bx-loesungen-tabs [data-bx-icon="repeat"] { --bx-icon: url("/assets/bilder/icons/loesungen/repeat.34dd2dcdf4.svg"); }
.bx-loesungen-tabs [data-bx-icon="table"] { --bx-icon: url("/assets/bilder/icons/loesungen/table.c2090e7e94.svg"); }
.bx-loesungen-tabs [data-bx-icon="cloud"] { --bx-icon: url("/assets/bilder/icons/loesungen/cloud.86b156e9af.svg"); }
.bx-loesungen-tabs [data-bx-icon="server"] { --bx-icon: url("/assets/bilder/icons/loesungen/server.0dfb852943.svg"); }
.bx-loesungen-tabs [data-bx-icon="cap"] { --bx-icon: url("/assets/bilder/icons/loesungen/cap.ab1b01be20.svg"); }

/*
 * Tabs: state effect. Outside a height stack (data-bx-hoehe-zustand) an inactive panel is hidden; inside the stack it
 * stays in the grid cell and is only invisible (hoehe.css). Without JavaScript it stays that way: the first panel is
 * visible, the others are in the HTML.
 */
[data-bx-tabs-panel][aria-hidden="true"]:not([data-bx-hoehe-zustand]) {
  display: none;
}

/* Price cards of the home page. */
.bx-preis-karten { padding: var(--abstand-100) var(--seitenrand) var(--abstand-96); }
.bx-preis-karten .bx-sektionskopf__titel {
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schrift-h2-start-zeile);
  letter-spacing: var(--schrift-h2-start-laufweite);
}
.bx-preis-karten__zweitton { color: var(--farbe-titel-zweitton); }
.bx-preis-karten__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--abstand-18);
  margin-block-start: var(--abstand-36);
}
.bx-preis-karten__karte { display: flex; flex-direction: column; background: var(--farbe-flaeche-karte); min-inline-size: 0; padding: var(--abstand-32) var(--abstand-34); border: 1px solid var(--farbe-linie-karte); border-radius: var(--radius-box); }
.bx-preis-karten__karte[data-bx-produkt-karte="app"] {
  border: 2px solid var(--farbe-orange-flaeche);
  background: var(--farbe-flaeche-karte);
  box-shadow: var(--schatten-preis-aktiv);
}
.bx-preis-karten__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-12); }
.bx-preis-karten__kopf .bx-pille { block-size: auto; padding: var(--abstand-5) var(--abstand-11); background: var(--farbe-navy); color: var(--farbe-weiss); font-size: 12px; font-weight: var(--schriftskala-gewicht-700); }
.bx-preis-karten__kopf h3 { margin: 0; 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-preis-karten__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--abstand-14); margin: var(--abstand-24) 0 var(--abstand-26); }
.bx-preis-karten__felder > div { padding: var(--abstand-20) var(--abstand-20) var(--abstand-18); border-radius: var(--radius-panel); background: var(--farbe-weiss); }
.bx-preis-karten__felder dt { font-weight: var(--schriftskala-gewicht-700); font-size: 14px; }
.bx-preis-karten__felder [data-bx-feld="free"] dt, .bx-preis-karten__felder [data-bx-feld="free"] dd:not(.bx-preis-karten__preis) { color: var(--farbe-gruen-text); }
.bx-preis-karten__felder [data-bx-feld="free"] { background: var(--farbe-gruen-flaeche); }
.bx-preis-karten__felder dd { margin: var(--abstand-8) 0 0; }
.bx-preis-karten__felder dd:not(.bx-preis-karten__preis) { margin-block-start: 0; color: var(--farbe-mikrotext); font-size: 13.5px; line-height: var(--schriftskala-zeile-1-5); }
.bx-preis-karten__preis {
  color: var(--farbe-navy);
  font-weight: var(--schrift-h2-start-gewicht);
  font-size: var(--schrift-h2-start-groesse);
  line-height: var(--schriftskala-zeile-1);
  letter-spacing: var(--schrift-h2-start-laufweite);
}
.bx-preis-karten__felder .bx-preis-karten__preis { margin: var(--abstand-8) 0; }
/* brainX CRM: price row with 24 px on top and 8 px below, sentence with 26 px below */
.bx-preis-karten__karte[data-bx-produkt-karte="crm"] .bx-preis-karten__preis { margin: var(--abstand-24) 0 var(--abstand-8); }
.bx-preis-karten__karte[data-bx-produkt-karte="crm"] .bx-preis-karten__preis > span:first-child { font-weight: var(--schriftskala-gewicht-600); font-size: 15px; color: var(--farbe-mikrotext); }
.bx-preis-karten__karte[data-bx-produkt-karte="crm"] .bx-preis-karten__preis + p { margin: 0 0 var(--abstand-26); color: var(--farbe-mikrotext); font-size: 14.5px; line-height: var(--schriftskala-zeile-1-55); }
.bx-preis-karten__preis span:not(.bx-unsichtbar) { color: var(--farbe-mikrotext); font-size: 14px; font-weight: var(--schriftskala-gewicht-600); letter-spacing: normal; }
.bx-preis-karten__aktionen { margin-block-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-16); }
.bx-preis-karten__alle { text-align: start; margin-block: var(--abstand-28); }
.bx-preis-karten__satz { max-inline-size: 760px; color: var(--farbe-mikrotext); line-height: var(--schriftskala-zeile-1-6); }
.bx-preis-karten__satz .bx-textlink { font-size: inherit; }
@media (width < 1080px) {
  .bx-preis-karten__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 768px) {
  .bx-preis-karten { padding-block: var(--abstand-56); }
  .bx-preis-karten__felder { grid-template-columns: minmax(0, 1fr); }
  .bx-preis-karten__karte { padding: var(--abstand-20); }
}

.bx-preis-karten__felder [data-bx-feld="free"] .bx-preis-karten__preis { color: var(--farbe-gruen); }

/*
 * Section type `faq`: single-column FAQ, variant B without height reserve for the CRM packages. Tokens only;
 * width steps only 768px. The separator line is an `::after` of the entry without frame height, because the `akkordeon` module
 * only measures headings and answers (no height jumps). The "+" is drawn by an SVG with a stroke on an orange surface
 * (never as text colour); it turns when opening and is invisible without JavaScript. Reduced motion is handled by
 * basis.css (end state without transition).
 */

.bx-faq {
  padding: var(--abstand-100) var(--seitenrand) var(--abstand-96); /* also the mobile reference */
}

.bx-faq__innen {
  max-inline-size: 880px; /* Width of the list */
}

.bx-faq .bx-sektionskopf {
  margin-block-end: var(--abstand-24); /* Gap from H2 or lead to the first question, at every width */
}

/* Variant B: cancels the height reserve of the module (the height deliberately changes on opening) */
.bx-faq--ohne-reserve .bx-faq__liste {
  min-block-size: auto;
}

.bx-faq__eintrag {
  position: relative;
}

/* Line without influence on the measurement of the module */
.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; /* Height of the "+": glyph 28 px with line height 1, row 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;
}

/* Link line without a line break inside a link (data: links_nicht_umbrechen) */
.bx-faq__links--nowrap .bx-textlink {
  white-space: nowrap;
}

/* Without JavaScript: all answers open (module CSS), the "+" without function */
@media (scripting: none) {
  .bx-faq__plus {
    visibility: hidden;
  }

  .bx-faq__knopf {
    cursor: default;
  }
}

/*
 * Head left, list right. The modifier `bx-faq--zwei` (grid 1fr 1.4fr) or `bx-faq--zwei-breit` (1fr 1.6fr) makes head and
 * list the two grid children; from 1080px the head stands above the list. The padding replaces that of the base
 * rule only here.
 */
.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);
  }
}


/*
 * Grid `zwei-weit`, links in the head text, actions and "Weiterführend". Without the `zwei-weit` grid none of these
 * rules apply.
 */
.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;
}

/* Head text with links or actions: without max width */
.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);
}

/* Primary button in navy (contrast white on 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);
  }
}

/*
 * == Head column `verweise` and `darstellung: offen` ==
 * `verweise` left: head with cross links in the 320px column, list beside it; right: head and list left, cards in the
 * 360px column; below 1080px one below the other. `offen`: numbered questions with visible answer, without
 * accordion. Without the modifiers or `ol.bx-faq__offen` none of these rules apply.
 */
.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;
}

/* Position right (industries): head and list left, cards right across both rows */
.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);
}

/* Display `offen`: number | question | answer */
.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);
  }
}

/*
 * == `logos` below an answer of `offen` ==
 * Single-colour logos in one row, inverted and muted on the light surface; without 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);
}

/* Text link below the logo row, text-link orange, navy on hover. */
.bx-faq__logolink {
  margin: var(--abstand-14) 0 0;
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  line-height: var(--schrift-textlink-zeile);
}

.bx-faq__logolink a {
  color: var(--farbe-orange-text);
  transition: color var(--bewegung-dauer-kurz);
}

.bx-faq__logolink a:hover,
.bx-faq__logolink a:focus-visible {
  color: var(--farbe-navy);
}

/*
 * FAQ of the integration pages: head left (.78fr), list right (1.4fr), gap 56 px, padding 84/88 px. The sentence in the
 * head stands without max width, the manual link below it in its own row (`display: table` keeps the width at the
 * content).
 */
.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);
  }
}

/* Head left (.8fr), list right (1.2fr), gap 56 px, padding only at the bottom */
.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);
  }
}

/*
 * Top line above the first question (border-top 1px #E2E6EE), as a pseudo-element so it does not change the height
 * reserve of the list; with cards on the right the head row no longer stretches with the cross-link column.
 */
.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;
}

/*
 * Accordion: state effect. The answer directly follows its heading; the state is in aria-expanded of the question.
 * Closed, the answer has no height, is transparent and invisible, but never display: none (search engines and
 * screen readers read it; height measurement). Open, it may grow up to the measured longest answer
 * (--bx-akkordeon-max, set by akkordeon.js); without a measurement there is no limit. The root reserves the height
 * of the headings plus the longest answer (--bx-akkordeon-reserve). Headings and answers carry no vertical outer
 * margins that the measurement does not know (it reads them anyway).
 */
[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;
}

/* Without JavaScript all answers are visible one below the other; with JavaScript the rule never applies */
@media (scripting: none) {
  [data-bx-akkordeon-antwort] {
    max-block-size: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }
}

/*
 * Block `abschluss-cta`: location (map with pin, address), navy with appointment card, light band and tile band. The pin
 * position runs through the value tables at the end (CSP; percent, no px). The pulse only without reduced motion
 * (keyframes with `from`).
 */
.bx-abschluss-cta {
  font-family: var(--schrift-familie-text);
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-abschluss-cta, [class*="bx-abschluss-cta__"]) {
  --_standort-koordinaten-gewicht: var(--schriftskala-gewicht-500);
  --_standort-koordinaten-groesse: var(--schriftskala-groesse-10-5);
  --_standort-koordinaten-zeile: var(--schriftskala-zeile-1);
  --_standort-koordinaten-laufweite: var(--schriftskala-laufweite-0-6);
  --_cta-titel-gross-gewicht: var(--schriftskala-gewicht-800);
  --_cta-titel-gross-groesse: clamp(36px, 4vw, 56px);
  --_cta-titel-gross-zeile: var(--schriftskala-zeile-1-05);
  --_cta-titel-gross-laufweite: var(--schriftskala-laufweite-minus-2);
  --_cta-branche-gewicht: var(--schriftskala-gewicht-800);
  --_cta-branche-groesse: clamp(34px, 3.8vw, 52px);
  --_cta-branche-zeile: var(--schriftskala-zeile-1-05);
  --_cta-branche-laufweite: var(--schriftskala-laufweite-minus-2-2);
  --_button-termin-gewicht: var(--schriftskala-gewicht-700);
  --_button-termin-groesse: var(--schriftskala-groesse-16);
  --_button-termin-zeile: normal;
  --_button-termin-laufweite: 0;
}

.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; /* full width between the page margins, no max width */
}

.bx-abschluss-cta--standort .bx-abschluss-cta__titel {
  max-width: 24ch;
  font-weight: var(--schrift-aussage-gross-gewicht);
  font-size: var(--schrift-aussage-gross-groesse);
  line-height: var(--schrift-aussage-gross-zeile);
  letter-spacing: var(--schrift-aussage-gross-laufweite);
}

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

/* "Gespräch vereinbaren" smaller in the location closing (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(--_standort-koordinaten-gewicht);
  font-size: var(--_standort-koordinaten-groesse);
  line-height: var(--_standort-koordinaten-zeile);
  letter-spacing: var(--_standort-koordinaten-laufweite);
}

.bx-abschluss-cta__adresse {
  display: flex;
  flex-direction: column;
  justify-content: center; /* address vertically centred beside the map */
  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; /* percent of the width, upper limit `--abstand-96`; the 2K rule below uses the same value */
  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(--_cta-titel-gross-gewicht);
  font-size: var(--_cta-titel-gross-groesse);
  line-height: var(--_cta-titel-gross-zeile);
  letter-spacing: var(--_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; /* full width between the page margins, no max width */
}

.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;
}

/*
 * Text left, actions as right column, vertically centred on one row. Pattern `band-navy`. Sentence without max width for
 * `band-hell`. Below 768px one column with 20 px gap, the extra link before the actions, a single button full
 * width.
 */
.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 areas on mobile (`data-mobil-stapel`): buttons stacked, full width, label centred */
@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);
  }
}

/* Value table (CSP): pin and label horizontal, 0 to 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%;
}

/* Value table (CSP): pin and label vertical, 0 to 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%;
}

/* == result-dependent head: eyebrow and title as height stack == */
.bx-abschluss-cta__eyebrow[data-bx-modul~="hoehe"],
.bx-abschluss-cta__titel[data-bx-modul~="hoehe"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/*
 * == `unten` ==
 * Trust line below the box of `navy-termin`: a line on top, below it the nested row `trust-pillen navy-zeile` flush with
 * the text, without its own line and padding. Plus the action type `textlink`.
 * Placed before the `navy-termin` band block so that block keeps the last word at equal specificity.
 */
.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);
}

/* company behind the seal on the same line in brackets ("ISO 9001 (brainX GmbH)") */
.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);
  }
}

/*
 * == `navy-termin` without appointment card as wide band ==
 * Text left up to 700 px, action bottom right, page H2 instead of `cta-titel-gross`. Every rule only applies without
 * appointment card; the existing variant with `schritte` on top stays unchanged.
 */
.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; /* full width between the page margins, action at the right edge */
}

.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;
  }
}

/*
 * == `band-navy`, `ausrichtung: mitte` and `stand` ==
 * Own block near the end of the file, after the `navy-termin` band block; every rule carries the prefix of its variant
 * or attribute.
 */
.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);
  }
}

/*
 * == `navy-termin` with `ausrichtung: mitte` ==
 * Indented navy box within the content width, title, sentence and buttons centred one below the other. After the band
 * block, so the rules of the band without appointment card (equal specificity) end here; without the attribute nothing
 * changes.
 */
.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);
  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);
  }
}

/*
 * == `band-kachel` without max width ==
 * Like `standort` and `band-hell` full width between the page margins; also applies to the cost-benefit closing.
 */
.bx-abschluss-cta--band-kachel .bx-abschluss-cta__innen {
  max-width: none;
}

/* titel_stufe: closing title of the integration pages; the mobile value comes from mobil.css */
.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);
}

/* mailto line „Vergleich weiterleiten“ below the actions of `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);
}

/*
 * == `navy-termin` without max width ==
 * The centred box (`ausrichtung: mitte`) keeps the content width.
 */
.bx-abschluss-cta--navy-termin:not([data-bx-ausrichtung="mitte"]) .bx-abschluss-cta__innen {
  max-width: none;
}

/*
 * == Variant `navy-karte` ==
 * Navy card with side margin and radius 24, surface top right and two glows; `raster`: text | action column 420px,
 * stacked below 1080px; `mitte` (data-bx-ausrichtung): everything centred, large H2. Secondary action as outline
 * pill (mint in the grid, white centred). The left decoration surface of the draft is dropped (near duplicate of the
 * navy surface).
 */
.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;
}

/* Secondary action: outline pill in mint; on hover border and text white without fill (no background) */
.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 of the navy card at the design size; the outline subtracts its border from the padding */
.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);
}

/* Centred (industries, 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(--_cta-branche-gewicht);
  font-size: var(--_cta-branche-groesse);
  line-height: var(--_cta-branche-zeile);
  letter-spacing: var(--_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: border and text in orange; the navy hover orange (contrast) instead of #FF3C00 */
.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); /* 5.53:1 on navy, 4.73:1 on the inner panel */
  color: var(--farbe-orange-navy-hover);
}

/* Grid with two buttons: text across the full width, below it both buttons left-aligned in one row */
.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);
  }

  /*
   * Both buttons equal width side by side or wrapped (flex 1 1 0, at least content width, at most 320 px, only for a
   * pair); the outline subtracts its border from the padding so it is as wide as the filled 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));
  }

  /* Centred: group as wide as the content, centred */
  .bx-abschluss-cta--navy-karte[data-bx-ausrichtung="mitte"] .bx-abschluss-cta__aktionen {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
  }
}

/*
 * == Closing of the home page ==
 * `navy-termin` with appointment card and outline button: primary button 16 px 32 px, outline 14.5 px 28 px, both 16 px
 * font, border .4. Other pages with `navy-termin` have no appointment card beside an outline button and stay untouched.
 * On mobile the horizontal padding stays 20 px from the 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(--_button-termin-gewicht);
  font-size: var(--_button-termin-groesse);
  line-height: var(--_button-termin-zeile);
  letter-spacing: var(--_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);
  }
}

/*
 * == `band-hell` with `als_karte` (tutorials) ==
 * White card with border and radius 18 px on the light surface, title 17 px, text 14 px, navy button at the right of the
 * row.
 */
.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;
  }
}

/* `dicht` on the band "Lieber direkt sprechen?" with padding 48 px and a line on top. Only with the 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 and larger: navy closing across the full width, text and card stay in the content area (basis.css) */
@media (width > 1440px) {
  .bx-abschluss-cta--navy-termin {
    padding-inline: calc(var(--abstand-64) + var(--bx-rand-extra));
  }

  /* The column gap (6 vw, at most 96 px) stays at the 1440 px value: the same 6 % of the box width */
  .bx-abschluss-cta--navy-termin .bx-abschluss-cta__innen {
    gap: calc(var(--kasten-breite) * var(--bx-cta-spaltenabstand-anteil) / 100);
  }
}

/* Fixed bar: free space only by width, never by scroll state. */
.bx-demo-leiste { display: none; }
@media (width < 768px) {
  .bx-demo-leiste {
    position: fixed;
    z-index: 30; /* Below the page head (40), above the page content. */
    inset: auto 0 0;
    display: flex;
    justify-content: center;
    --bx-leistenpolster: calc(var(--abstand-10) + env(safe-area-inset-bottom));
    padding: var(--abstand-10) var(--abstand-16) var(--bx-leistenpolster);
    border-block-start: 1px solid var(--farbe-linie);
    background: var(--farbe-weiss);
    box-shadow: var(--schatten-leiste-unten);
    transform: translateY(100%);
    visibility: hidden;
  }
  .bx-demo-leiste .bx-button { inline-size: 100%; min-block-size: var(--abstand-48); }
  .bx-demo-leiste[data-bx-zustand="an"] { transform: translateY(0); visibility: visible; }
  body:has([data-bx-demo-leiste]) .bx-seitenfuss::after {
    content: '';
    display: block;
    block-size: calc(var(--hoehe-demo-leiste) + env(safe-area-inset-bottom));
    background: var(--farbe-navy);
  }
  html:has([data-bx-demo-leiste]) {
    scroll-padding-bottom: calc(var(--hoehe-demo-leiste) + env(safe-area-inset-bottom));
  }
  @media (scripting: none) {
    .bx-demo-leiste { transform: translateY(0); visibility: visible; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .bx-demo-leiste { transition: transform var(--bewegung-dauer-kurz), visibility var(--bewegung-dauer-kurz); }
  }
}

/*
 * Frame part "seitenfuss": navy surface with brand, social, newsletter (look only), three link columns and bottom
 * row. Page margin via --seitenrand (never via local steps); colors, fonts and every spacing equal to a scale token
 * --abstand-<n> stand as tokens; single measures of the design without a token remain literals.
 */
.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; /* Wrap of the newsletter column by content width */
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-seitenfuss, [class*="bx-seitenfuss__"]) {
  --_fuss-absenden-gewicht: var(--schriftskala-gewicht-600);
  --_fuss-absenden-groesse: var(--schriftskala-groesse-13-5);
  --_fuss-absenden-zeile: normal;
  --_fuss-absenden-laufweite: 0;
}

/* Row 1: brand left, newsletter column right; the link columns are their own row */
.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);
}

/* Small headings of the groups social and 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 in the footer, an own form with native POST to Brevo (variant "fuss", exception): root with title and
 * form, without form core, captcha slot and no-JS notice – without JS the form stays visible. The footer does not
 * load formular.css (it is on every page): honeypot, error line and the "sendet" state from newsletter.js are styled
 * here, only via attributes; the error line reserves one line (no height jump).
 */
.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: heading level with the first claim line */
}

.bx-seitenfuss__newsletter-wurzel .bx-seitenfuss__label {
  margin-block-end: 2px; /* Design */
}

/* Field and button on one line, check and message below across the full width (order via `order`, the DOM stays
   field, check, message, button) */
.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: like .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(--_fuss-absenden-gewicht);
  text-decoration: underline;
}

/* one line for the messages at field and check, no :empty rule: no height jump on a one-line message */
.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(--_fuss-absenden-gewicht);
  font-size: var(--_fuss-absenden-groesse);
  line-height: var(--_fuss-absenden-zeile);
  letter-spacing: var(--_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;
}

/* Link columns: row 2 across the full width */
.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: list line = line of the role "fuss-link", not that of body text */
  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);
}

.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: list line = line of the links, `normal` in the design (font shorthand); the token fuss-recht-zeile
   (1.5) is for the copyright, not the links */
  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);
}

/* if brand (260) + gap (40) + newsletter (360) do not fit the content width, the column wraps below the brand */
@container (inline-size < 660px) {
  .bx-seitenfuss__oben {
    row-gap: var(--abstand-48);
  }

  .bx-seitenfuss__newsletter-wurzel {
    margin-block-start: 0;
  }
}

/* local step seitenfuss: two link columns, brand and newsletter stacked (field, check, button one under the other) */
@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);
  }
}