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

/* Page background; pseudo-elements stay as fallback without JavaScript. */

/*
 * Shape values as numbers (percent of the shape width or pixels), each in one place: the base rules insert them with
 * `calc(<number> * 1%)` or `calc(-1 * <pixels>)`, the 2K rules below calculate with the same values.
 */
:root {
  --bx-form-rechts-breite: 56;
  --bx-form-rechts-schraege: 14;
  --bx-form-links-breite: 48;
  --bx-form-klassisch-1-breite: 58;
  --bx-form-klassisch-1-schraege: 10;
  --bx-form-klassisch-2-breite: 46;
  --bx-form-klassisch-4-spitze: 74;
  --bx-form-klassisch-5-breite: 50;
  --bx-glow-links-versatz: 380px;
  --bx-glow-klassisch-2-versatz: 380px;
  --bx-glow-klassisch-3-rechts-versatz: 380px;
  --bx-glow-klassisch-3-links-versatz: 400px;
  --bx-glow-klassisch-4-versatz: 420px;
  --bx-glow-klassisch-5-versatz: 320px;
}

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

/* Right: shape top right, glow alternating orange and navy; colour scheme green turns the first glow mint */
.bx-abschnitt[data-deko="rechts"]::before {
  right: 0;
  width: calc(var(--bx-form-rechts-breite) * 1%);
  clip-path: polygon(calc(var(--bx-form-rechts-schraege) * 1%) 0, 100% 0, 100% 90%);
  background:
    radial-gradient(closest-side, var(--farbe-glow-orange), var(--farbe-glow-orange-aus)) 160px -140px / 960px 800px no-repeat,
    var(--farbe-flaeche-kachel);
}

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

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

/* Left: triangle, glow mint; the position 30 % + 240 px puts the glow at 30 % of the section height */
.bx-abschnitt[data-deko="links"]::before {
  left: 0;
  width: calc(var(--bx-form-links-breite) * 1%);
  clip-path: polygon(0 0, 100% 58%, 0 100%);
  background:
    radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus)) calc(-1 * var(--bx-glow-links-versatz)) calc(30% + 240px) / 960px 800px no-repeat,
    var(--farbe-flaeche-zart);
}

/* The layer is a sibling of the page content; dark bands sit entirely in front of it. */
.bx-kasten { position: relative; }
.bx-hintergrund {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  --bx-glow-akzent: var(--farbe-glow-orange);
  --bx-glow-akzent-aus: var(--farbe-glow-orange-aus);
  --bx-glow-zweit: var(--farbe-glow-orange-hintergrund);
}
.bx-hintergrund[data-farbwelt="gruen"] {
  --bx-glow-akzent: var(--farbe-glow-mint-gruenwelt);
  --bx-glow-akzent-aus: var(--farbe-glow-mint-aus);
  --bx-glow-zweit: var(--farbe-glow-mint-hintergrund);
}
.bx-hintergrund[data-aktiv="true"] ~ .bx-ebene .bx-abschnitt::before { content: none; }
.bx-hintergrund__form { position: absolute; }
.bx-hintergrund__glow {
  position: absolute;
  width: 960px;
  height: 800px;
  background: radial-gradient(closest-side, var(--bx-glow-akzent), var(--bx-glow-akzent-aus));
  /* Strength of the page (hintergrund_glowstaerke, at most 1): opacity instead of relative colour syntax so all
 current browsers including Safari show the glows */
  opacity: var(--bx-glowstaerke, 1);
}
.bx-hintergrund__form--rechts {
  right: 0;
  width: calc(var(--bx-form-rechts-breite) * 1%);
  clip-path: polygon(calc(var(--bx-form-rechts-schraege) * 1%) 0, 100% 0, 100% 90%);
  background: var(--farbe-flaeche-kachel);
}
.bx-hintergrund__form--rechts .bx-hintergrund__glow { left: 160px; top: -140px; } /* Design */
.bx-hintergrund__form--rechts[data-glow="navy"] .bx-hintergrund__glow {
  background: radial-gradient(closest-side, var(--farbe-glow-navy), var(--farbe-glow-navy-aus));
}
.bx-hintergrund__form--links {
  left: 0;
  width: calc(var(--bx-form-links-breite) * 1%);
  clip-path: polygon(0 0, 100% 58%, 0 100%);
  background: var(--farbe-flaeche-zart);
}
.bx-hintergrund__form--links .bx-hintergrund__glow {
  left: calc(-1 * var(--bx-glow-links-versatz));
  top: 30%;
  background: radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus));
}
.bx-hintergrund__form--klassisch-1 {
  top: 0; right: 0; width: calc(var(--bx-form-klassisch-1-breite) * 1%); height: clamp(520px, 32%, 1500px);
  background: var(--farbe-flaeche-kachel); clip-path: polygon(calc(var(--bx-form-klassisch-1-schraege) * 1%) 0, 100% 0, 100% 92%);
}
.bx-hintergrund__form--klassisch-1 .bx-hintergrund__glow { left: 180px; top: -140px; width: 1000px; height: 840px; } /* Design */
.bx-hintergrund__form--klassisch-2 {
  top: 9%; left: 0; width: calc(var(--bx-form-klassisch-2-breite) * 1%); height: clamp(520px, 32%, 1500px);
  background: var(--farbe-flaeche-zart); clip-path: polygon(0 0, 100% 60%, 0 100%);
}
.bx-hintergrund__form--klassisch-2 .bx-hintergrund__glow {
  left: calc(-1 * var(--bx-glow-klassisch-2-versatz)); top: 380px; width: 1020px; height: 860px; /* Design */
  background: radial-gradient(closest-side, var(--farbe-glow-mint), var(--farbe-glow-mint-aus));
}
.bx-hintergrund__form--klassisch-3 {
  top: 58%; left: 0; width: 100%; height: clamp(560px, 34%, 1600px);
  background: var(--farbe-flaeche-hintergrund-diagonal); clip-path: polygon(100% 0, 100% 48%, 0 100%, 0 64%);
}
.bx-hintergrund__form--klassisch-3 .bx-hintergrund__glow:first-child {
  right: calc(-1 * var(--bx-glow-klassisch-3-rechts-versatz)); top: calc(-1 * var(--abstand-90)); width: 1000px; height: 860px;
  background: radial-gradient(closest-side, var(--bx-glow-zweit), var(--bx-glow-akzent-aus));
}
.bx-hintergrund__form--klassisch-3 .bx-hintergrund__glow:last-child {
  left: calc(-1 * var(--bx-glow-klassisch-3-links-versatz)); top: 880px; width: 1040px; height: 860px; /* Design */
  background: radial-gradient(closest-side, var(--farbe-glow-navy-hintergrund), var(--farbe-glow-navy-aus));
}
.bx-hintergrund__form--klassisch-4 {
  bottom: 7%; left: 0; width: 100%; height: clamp(600px, 38%, 1800px);
  background: var(--farbe-flaeche-kachel); clip-path: polygon(0 26%, calc(var(--bx-form-klassisch-4-spitze) * 1%) 100%, 0 100%);
}
.bx-hintergrund__form--klassisch-4 .bx-hintergrund__glow {
  left: calc(-1 * var(--bx-glow-klassisch-4-versatz)); top: 850px; width: 1060px; height: 900px; /* Design */
  background: radial-gradient(closest-side, var(--bx-glow-zweit), var(--bx-glow-akzent-aus));
}
.bx-hintergrund__form--klassisch-5 {
  bottom: 6%; right: 0; width: calc(var(--bx-form-klassisch-5-breite) * 1%); height: clamp(420px, 24%, 1100px);
  background: var(--farbe-flaeche-hintergrund-ende); clip-path: polygon(100% 4%, 100% 100%, 0 100%);
}
.bx-hintergrund__form--klassisch-5 .bx-hintergrund__glow {
  right: calc(-1 * var(--bx-glow-klassisch-5-versatz)); top: 380px; width: 960px; height: 820px; /* Design */
  background: radial-gradient(closest-side, var(--farbe-glow-navy), var(--farbe-glow-navy-aus));
}
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-1 { height: 1500px; }
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-2 { top: 420px; height: 1500px; } /* Design */
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-3 { top: 2900px; height: 1600px; } /* Design */
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-4 { bottom: 360px; height: 1800px; } /* Design */
.bx-hintergrund[data-geometrie="lang"] .bx-hintergrund__form--klassisch-5 { bottom: 300px; height: 1100px; } /* Design */

/*
 * 2K and larger (frame wider than the box width): every shape keeps its form as at 1440 px and is only extended to the
 * window edge, not scaled up. The middle area of 1440 px stays identical point by point; outside, each shape continues
 * its edge horizontally (pentagon instead of triangle). --bx-rand-extra is half the extra width (basis.css);
 * --bx-form-b is the shape width at 1440 px. The rules apply only at the page layer (background as child of the box,
 * sections directly under `main`), not in the styleguide sample stages, where --bx-rand-extra would be inherited from
 * outside. Glows keep size and position relative to the shape; edge-bound glows move with the extra width.
 */
@media (width > 1440px) {
  .bx-ebene > main > .bx-abschnitt[data-deko="rechts"]::before {
    --bx-form-b: calc(var(--kasten-breite) * var(--bx-form-rechts-breite) / 100);
    width: calc(var(--bx-form-b) + var(--bx-rand-extra));
    clip-path: polygon(calc(var(--bx-form-b) * var(--bx-form-rechts-schraege) / 100) 0, 100% 0, 100% 90%, var(--bx-form-b) 90%);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * Block "hero-navy": navy area with mint glow; variants `kompakt` and `zweispaltig`.
 * Headings are styled through classes only (the styleguide rebuilds the H1 of the examples).
 */
.bx-hero-navy {
  position: relative;
  overflow: hidden;
  background-color: var(--farbe-navy);
}

/* Type values of this block from the type scale; set on the root and on every element of the block */
:where(.bx-hero-navy, [class*="bx-hero-navy__"]) {
  --_hero-punkt-gewicht: var(--schriftskala-gewicht-500);
  --_hero-punkt-groesse: var(--schriftskala-groesse-13-5);
  --_hero-punkt-zeile: var(--schriftskala-zeile-1-4);
  --_hero-punkt-laufweite: 0;
  --_hero-weiche-gewicht: var(--schriftskala-gewicht-800);
  --_hero-weiche-groesse: clamp(38px, 4vw, 54px);
  --_hero-weiche-zeile: var(--schriftskala-zeile-1-06);
  --_hero-weiche-laufweite: var(--schriftskala-laufweite-minus-2);
}

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

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

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

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

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

.bx-hero-navy__titel,
.bx-hero-navy__kicker,
.bx-hero-navy__aussage,
.bx-hero-navy__lead {
  margin: 0;
  /* The hero clips overflow (overflow: hidden): long words must wrap */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Compact: large H1, lead at text size, action bottom right */
.bx-hero-navy--kompakt {
  padding: var(--abstand-hero-oben) var(--seitenrand) var(--abstand-hero-unten);
}

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

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

.bx-hero-navy--kompakt .bx-hero-navy__titel {
  margin-bottom: var(--abstand-10);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-titel-gewicht);
  font-size: var(--schrift-titel-groesse);
  line-height: var(--schrift-titel-zeile);
  letter-spacing: var(--schrift-titel-laufweite);
}

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

.bx-hero-navy--kompakt .bx-hero-navy__rechts {
  flex: none;
}

/* Two-column: kicker, statement, lead on the left, graphic or action on the right; one column below `stapeln` */
.bx-hero-navy--zweispaltig .bx-hero-navy__brotkrumen {
  padding: var(--abstand-32) var(--seitenrand) 0;
}

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

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

.bx-hero-navy__kicker {
  margin-bottom: var(--abstand-20);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-kicker-gewicht);
  font-size: var(--schrift-kicker-groesse);
  line-height: var(--schrift-kicker-zeile);
  letter-spacing: var(--schrift-kicker-laufweite);
}

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

.bx-hero-navy__aussage {
  margin-bottom: var(--abstand-20);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-hero-gewicht);
  font-size: var(--schrift-hero-groesse);
  line-height: var(--schrift-hero-zeile);
  letter-spacing: var(--schrift-hero-laufweite);
  text-wrap: pretty;
}

.bx-hero-navy--zweispaltig .bx-hero-navy__lead {
  max-width: 560px;
  margin-bottom: var(--abstand-32);
  color: var(--farbe-navy-text-sekundaer);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-lead-gewicht);
  font-size: var(--schrift-lead-groesse);
  line-height: var(--schrift-lead-zeile);
  letter-spacing: var(--schrift-lead-laufweite);
  text-wrap: pretty;
}

/*
 * Light area, centred alignment, accent, actions, points, eyebrow, bottom, type sizes, emphasised title part and
 * width of the right column. Without the new parameters no rule of this block applies except the H1 without a
 * statement in "zweispaltig".
 */

/* H1 without a statement in "zweispaltig": hero size */
.bx-hero-navy--zweispaltig .bx-hero-navy__titel {
  margin-bottom: var(--abstand-20);
  color: var(--farbe-weiss);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-hero-gewicht);
  font-size: var(--schrift-hero-groesse);
  line-height: var(--schrift-hero-zeile);
  letter-spacing: var(--schrift-hero-laufweite);
  text-wrap: pretty;
}

/* Eyebrow above the H1 (= kicker style), dash via CSS */
.bx-hero-navy__eyebrow {
  margin: 0 0 var(--abstand-20);
  color: var(--farbe-mint);
  font-family: var(--schrift-familie-mono);
  font-weight: var(--schrift-kicker-gewicht);
  font-size: var(--schrift-kicker-groesse);
  line-height: var(--schrift-kicker-zeile);
  letter-spacing: var(--schrift-kicker-laufweite);
}

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

/* accent on navy: orange = --farbe-orange-navy-hell; green like mint */
.bx-hero-navy[data-bx-akzent="orange"] .bx-hero-navy__kicker,
.bx-hero-navy[data-bx-akzent="orange"] .bx-hero-navy__eyebrow {
  color: var(--farbe-orange-navy-hell);
}

/* Actions: spacing like the CTA pair, text link on navy is white */
.bx-hero-navy__aktionen {
  align-items: center;
}

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

/* Points: check-mark list under the actions (icon circle SVG) */
.bx-hero-navy__punkte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-12) var(--abstand-24);
  margin: var(--abstand-24) 0 0;
  padding: 0;
  list-style: none;
}

.bx-hero-navy__punkt {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  color: var(--farbe-navy-text-hell);
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-text-gewicht);
  font-size: var(--schrift-text-groesse);
  line-height: var(--schrift-text-zeile);
  letter-spacing: var(--schrift-text-laufweite);
}

.bx-hero-navy__punkt .bx-icon-kreis {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--farbe-weiss); /* white check mark on the green circle */
}

/* bottom: nested sections under the hero row */
.bx-hero-navy__unten {
  position: relative;
}

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

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

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

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

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

/* Light area: transparent over the page background, line at the bottom, navy text, no glow of its own */
.bx-hero-navy--hell {
  border-bottom: 1px solid var(--farbe-linie);
  background-color: transparent;
}

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

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

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

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

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

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

/* emphasised title part (hell only): second colour per the old-value rule */
.bx-hero-navy__betont {
  color: var(--farbe-mikrotext);
}

/* Centred alignment: centred, no right column */
.bx-hero-navy--mitte .bx-hero-navy__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding-top: 118px; /* Design */
  padding-bottom: var(--abstand-54);
  text-align: center;
}

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

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

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

/* width of the right column: package profile, image of the CRM overview */
.bx-hero-navy--rechts-steckbrief .bx-hero-navy__inhalt {
  grid-template-columns: minmax(0, 1fr) 420px;
}

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

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

/*
 * Only the named pages with page breakpoints. Migration and GDPR pages have no right hero column. CRM and ISO stack
 * below "weit", CRM areas, security and hosting below "eng". After the rules for rechts-steckbrief/rechts-bild so
 * their fixed column width does not win.
 */
:is([data-breiten="migration"], [data-breiten="dsgvo"]) .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
  grid-template-columns: minmax(0, 1fr);
}

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

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

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

  [data-breiten="hosting"] .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    gap: var(--abstand-32); /* hosting hero: 32 px, deviates from the general gap scale */
  }
}

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

/* Hero mock: 580 px in the intermediate range, at most the available width, centred; full width on mobile. */
@media (width >= 768px) and (width < 1180px) {
  [data-breiten="crm"] .bx-hero-navy--zweispaltig .bx-hero-navy__rechts {
    inline-size: var(--breite-hero-bild);
    max-inline-size: 100%;
    justify-self: center;
  }
}

/* Mobile files: CRM product page 20 px (abstand-gruppe), CRM areas and security/ISO/hosting 24 px each. */
@media (width < 768px) {
  :is([data-breiten="crm-bereich"], [data-breiten="sicherheit"], [data-breiten="iso"], [data-breiten="hosting"]) .bx-hero-navy--zweispaltig .bx-hero-navy__inhalt {
    gap: var(--abstand-24);
  }
}

/*
 * == `rahmen: karte` and type sizes `rolle`, `startups` ==
 * Card: navy area with page margin and radius 24 on a light page, padding 40/72/76 (narrower on mobile). The type sizes
 * apply to the H1 (`__titel`) like xl/gross/titel. Without the values none of these rules applies.
 */
.bx-hero-navy--karte {
  margin: var(--abstand-16) var(--seitenrand) 0;
  padding: var(--abstand-40) var(--abstand-72) var(--abstand-76);
  border-radius: var(--radius-box);
}

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

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

/* Navy card: no dash before the eyebrow; other heroes keep it */
.bx-hero-navy--karte .bx-hero-navy__eyebrow::before {
  content: none;
}

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

/*
 * == Hero of the role pages ==
 * Chips and logos sit in one row under a divider directly on navy (margin-top 34, padding-top 26, border-top, gap 34;
 * logos with a line on the left, gap 30, opacity .62; hero ends 50 px below). Glow top right (right -120, top -160,
 * 660 × 560). Applies only to `schrift: rolle` (five role pages).
 */
.bx-hero-navy[data-bx-schrift="rolle"]::before {
  top: -160px; /* Design */
  right: -120px; /* Design */
  bottom: auto;
  left: auto;
  width: 660px;
  height: 560px;
}

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

/* Steps card column: 400 px, gap 52 px (finance with glass card 440 px, gap 48 px) */
@media (width >= 1080px) {
  .bx-hero-navy[data-bx-schrift="rolle"].bx-hero-navy--rechts-steckbrief .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--abstand-52);
  }

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

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

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

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

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

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

/* Eyebrow Archivo 600 14px instead of mono */
.bx-hero-navy[data-bx-schrift="startups"] .bx-hero-navy__eyebrow {
  font-family: var(--schrift-familie-text);
  font-weight: var(--schrift-menue-teaser-titel-gewicht);
  font-size: var(--schrift-menue-teaser-titel-groesse);
  line-height: var(--schrift-menue-teaser-titel-zeile);
  letter-spacing: var(--schrift-menue-teaser-titel-laufweite);
}

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

/*
 * == Tutorials ==
 * `glow: oben-rechts`: mint glow top right like `kompakt`. `meta`: uppercase mono meta line under the actions.
 */
.bx-hero-navy--glow-aus::before {
  display: none; /* `glow: aus`: flat navy hero */
}

.bx-hero-navy--glow-oben-rechts::before {
  top: -180px; /* Design */
  right: -140px; /* Design */
  bottom: auto;
  left: auto;
  width: 760px;
  height: 640px;
}

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

@media (width < 768px) {
  /* Row wraps, the logos sit below the chips without a line */
  .bx-hero-navy[data-bx-schrift="rolle"] .bx-hero-navy__unten > .bx-logoleiste {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

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

  /* actions fill the row (flex 1 1 auto) */
  .bx-hero-navy--aktionen-gefuellt .bx-hero-navy__aktionen > * {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
  }
}

/*
 * == Hero of the APP overview (`schrift: app`) ==
 * Columns .92fr/1.08fr, gap 56, padding 22/30; the record window is scaled to 85 % (stage 800 px scaled to the
 * column width). Points list 500/13.5 px, gap 8/20. `einblenden` (steigAuf).
 */
@media (width >= 1080px) {
  .bx-hero-navy[data-bx-schrift="app"] .bx-hero-navy__inhalt {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: var(--abstand-56);
    padding-block: var(--abstand-22) var(--abstand-30);
  }

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

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

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

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

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

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

/*
 * == Hero of the automation page ==
 * The emphasised title part sits in the second line. The text link of the light area has a grey bottom edge. No line
 * under the centred light hero.
 */
.bx-hero-navy--mitte .bx-hero-navy__betont {
  display: block;
}

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

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

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

/*
 * == Hero of app or CRM (`schrift: weiche`, `rechts_breite: weiche`) ==
 * Lead without hyphenation, brainX CRM and brainX APP bold (white), at most 600 px. H1 clamp(38 px, 4vw, 54 px) with
 * at most 640 px, graphic column 620 px with gap 48.
 */
.bx-hero-navy[data-bx-schrift="weiche"] .bx-hero-navy__titel {
  max-inline-size: 640px;
  font-weight: var(--_hero-weiche-gewicht);
  font-size: var(--_hero-weiche-groesse);
  line-height: var(--_hero-weiche-zeile);
  letter-spacing: var(--_hero-weiche-laufweite);
}

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

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

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

/* Two equal columns, gap 40 px / 60 px */
@media (width >= 1080px) {
  .bx-hero-navy--rechts-haelfte .bx-hero-navy__inhalt {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: var(--abstand-40) var(--abstand-60);
  }
}

/*
 * == H1 of the integrations overview (`schrift: integrationen`) ==
 * Balanced wrapping, at most 760 px; size, line height and letter spacing stay the hero stage.
 */
.bx-hero-navy[data-bx-schrift="integrationen"] .bx-hero-navy__titel {
  max-inline-size: 760px;
  text-wrap: balance;
}

/*
 * == Customer logo above the H1 (reference pages) ==
 * Only the height is fixed, the width follows the aspect ratio of the file; the logo sits white on navy without an
 * area. Two-column 48 px high with 24 px to the H1, stacked 36 px with 20 px.
 */
.bx-hero-navy__logo {
  margin: 0 0 var(--abstand-24);
}

.bx-hero-navy__logo img {
  display: block;
  inline-size: auto;
  block-size: 48px;
  max-inline-size: 100%;
}

@media (width < 1080px) {
  .bx-hero-navy__logo {
    margin-block-end: var(--abstand-20);
  }

  .bx-hero-navy__logo img {
    block-size: 36px;
  }
}

/*
 * 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 "sammelliste": filter row, wide groups, narrow groups, empty state; variants append their blocks.
 * Measures without a token come from the design: search field 300/200 px, intro 640 px, tile grid 190 px, hover −3 px,
 * logo box 40 px with image 72 % (ZUGFeRD 80 %, Inxmail 94 %), narrow tiles single-column below 360 px.
 * The mobile empty state is 45 px in the design, here the scale step 44 px (no token 45).
 */
.bx-sammelliste {
  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-sammelliste, [class*="bx-sammelliste__"]) {
  --_leer-titel-gewicht: var(--schriftskala-gewicht-700);
  --_leer-titel-groesse: var(--schriftskala-groesse-20);
  --_leer-titel-zeile: normal;
  --_leer-titel-laufweite: 0;
  --_fehler-hinweis-gewicht: var(--schriftskala-gewicht-400);
  --_fehler-hinweis-groesse: var(--schriftskala-groesse-15-5);
  --_fehler-hinweis-zeile: var(--schriftskala-zeile-1-55);
  --_fehler-hinweis-laufweite: 0;
}

.bx-sammelliste__inhalt {
  max-width: var(--breite-inhalt-weit-max);
  margin-inline: auto;
}

/* == tiles == */
.bx-sammelliste__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-12) var(--abstand-16);
  padding: var(--abstand-34) var(--seitenrand) 0;
}

.bx-sammelliste__suchfeld {
  position: relative;
  flex: 0 1 300px;
  min-width: 200px;
}

.bx-sammelliste__lupe {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--abstand-15);
  translate: 0 -50%;
  color: var(--farbe-mikrotext);
  pointer-events: none;
}

.bx-sammelliste__suche {
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--abstand-12) var(--abstand-15) var(--abstand-12) var(--abstand-40);
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-promo);
  background-color: var(--farbe-flaeche-hell);
  color: var(--farbe-navy);
  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);
}

.bx-sammelliste__suche:focus-visible {
  outline: none;
  box-shadow: var(--schatten-fokus-feld);
}

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

.bx-sammelliste__chip {
  padding: var(--abstand-10) var(--abstand-16);
  border: 1px solid var(--farbe-linie-eingabe);
  border-radius: var(--radius-pille);
  background-color: var(--farbe-weiss);
  color: var(--farbe-mikrotext);
  font-family: var(--schrift-familie-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);
  cursor: pointer;
}

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

.bx-sammelliste__chip:focus-visible,
.bx-sammelliste__zuruecksetzen:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-sammelliste__zaehler {
  margin: 0 0 0 auto;
  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);
  letter-spacing: var(--schrift-suchpfad-laufweite);
  text-transform: uppercase;
}

.bx-sammelliste__leer {
  padding: var(--abstand-72) var(--seitenrand);
  text-align: center;
}

.bx-sammelliste__leer-titel {
  margin: 0 0 var(--abstand-10);
  color: var(--farbe-navy);
  font-weight: var(--_leer-titel-gewicht);
  font-size: var(--_leer-titel-groesse);
  line-height: var(--_leer-titel-zeile);
  letter-spacing: var(--_leer-titel-laufweite);
}

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

.bx-sammelliste__zuruecksetzen {
  padding: 0;
  border: 0;
  background: none;
  color: var(--farbe-orange-text);
  font-family: var(--schrift-familie-text);
  font-weight: var(--_leer-titel-gewicht);
  cursor: pointer;
}

.bx-sammelliste__gruppe[data-bx-form="breit"] {
  padding: var(--abstand-36) var(--seitenrand) var(--abstand-24);
}

.bx-sammelliste__reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-48);
  padding: var(--abstand-36) var(--seitenrand) var(--abstand-60);
}

/* Without a visible group the row is dropped (no JavaScript) */
.bx-sammelliste__reihe:not(:has(> .bx-sammelliste__gruppe:not([hidden]))) {
  display: none;
}

.bx-sammelliste__gruppenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-4) var(--abstand-16);
  margin-block-end: var(--abstand-8);
}

.bx-sammelliste__gruppentitel {
  margin: 0;
  color: var(--farbe-navy);
  font-weight: var(--schrift-sammelliste-gruppe-gewicht);
  font-size: var(--schrift-sammelliste-gruppe-groesse);
  line-height: var(--schrift-sammelliste-gruppe-zeile);
  letter-spacing: var(--schrift-sammelliste-gruppe-laufweite);
}

.bx-sammelliste__gruppenzaehler {
  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);
  letter-spacing: var(--schrift-suchpfad-laufweite);
  text-transform: uppercase;
}

.bx-sammelliste__einleitung {
  max-width: 640px;
  margin: 0 0 var(--abstand-24);
  color: var(--farbe-mikrotext);
  font-weight: var(--_fehler-hinweis-gewicht);
  font-size: var(--_fehler-hinweis-groesse);
  line-height: var(--_fehler-hinweis-zeile);
  letter-spacing: var(--_fehler-hinweis-laufweite);
}

.bx-sammelliste__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--abstand-14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx-sammelliste__gruppe[data-bx-form="schmal"] .bx-sammelliste__kacheln {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bx-sammelliste__kachel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-12);
  block-size: 100%;
  padding: var(--abstand-20);
  border: 1px solid var(--farbe-linie-karte);
  border-radius: var(--radius-rahmen);
  background-color: var(--farbe-weiss);
  color: var(--farbe-navy);
  text-decoration: none;
}

a.bx-sammelliste__kachel:hover,
a.bx-sammelliste__kachel:focus-visible {
  border-color: var(--farbe-orange-rand-hover);
  box-shadow: var(--schatten-kachel-hover);
}

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

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.bx-sammelliste__kachel {
    transition: translate var(--bewegung-dauer-kurz), border-color var(--bewegung-dauer-kurz),
      box-shadow var(--bewegung-dauer-kurz);
  }

  a.bx-sammelliste__kachel:hover {
    translate: 0 -3px;
  }
}

.bx-sammelliste__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-eingabe);
  background-color: var(--farbe-flaeche-kachel);
}

.bx-sammelliste__logo img {
  inline-size: 72%;
  block-size: 72%;
  object-fit: contain;
}

/* Logo exceptions: ZUGFeRD wider, Inxmail wider at 72 % height */
[data-bx-kennung="zugferd"] .bx-sammelliste__logo img {
  inline-size: 80%;
}

[data-bx-kennung="inxmail"] .bx-sammelliste__logo img {
  inline-size: 94%;
  max-block-size: 72%;
}

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

/* "Coming soon" pill under the name, looks like the base element pill */
.bx-sammelliste__status {
  align-self: flex-start;
}

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

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

@media (width < 768px) {
  .bx-sammelliste__reihe {
    padding-block-end: var(--abstand-48);
  }

  .bx-sammelliste__leer {
    padding-block: var(--abstand-44);
  }
}

/* Below 360 px the tiles of narrow groups stand singly */
@media (width < 360px) {
  .bx-sammelliste__gruppe[data-bx-form="schmal"] .bx-sammelliste__kacheln {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Variant `pillen`: mono H2, light pills, "Alle Vergleiche" navy (hover orange).
 */
.bx-sammelliste--pillen {
  padding: 0 var(--seitenrand) var(--abstand-64);
}

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

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

.bx-sammelliste__pille {
  display: inline-block;
  padding: var(--abstand-8) var(--abstand-14);
  border-radius: var(--radius-pille);
  background: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
  font-size: var(--schrift-menue-link-groesse);
  font-weight: var(--schrift-menue-link-gewicht);
  text-decoration: none;
}

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

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

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

/*
 * Variant `schwellen`: bordered box with head on the left and the threshold rows on the right (two columns from
 * `stapeln`), per row a link with name and threshold text.
 */
.bx-sammelliste--schwellen {
  padding: var(--abstand-72) var(--seitenrand) var(--abstand-sektion-gross);
}

.bx-sammelliste--schwellen .bx-sammelliste__rahmen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-40);
  align-items: start;
  max-inline-size: var(--breite-inhalt-weit-max);
  margin-inline: auto;
  padding: var(--abstand-44);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-box);
}

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

.bx-sammelliste__schwelle {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: var(--abstand-4) var(--abstand-20);
  align-items: baseline;
  padding: var(--abstand-14) var(--abstand-18);
  border-radius: var(--radius-promo);
  background: var(--farbe-flaeche-karte);
  color: var(--farbe-navy);
  text-decoration: none;
  transition: transform var(--bewegung-dauer-kurz);
}

.bx-sammelliste__schwelle:hover,
.bx-sammelliste__schwelle:focus-visible {
  transform: translateY(-2px);
}

.bx-sammelliste__schwelle-name {
  color: var(--farbe-navy);
  font-weight: var(--schrift-tabelle-zelle-titel-gewicht);
  font-size: var(--schrift-tabelle-zelle-titel-groesse);
}

.bx-sammelliste__schwelle-text {
  color: var(--farbe-text-sekundaer);
  font-weight: var(--schrift-text-klein-gewicht);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-text-klein-zeile);
  text-wrap: pretty;
}

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

@media (width < 768px) {
  .bx-sammelliste--schwellen {
    padding-block: var(--abstand-48) var(--abstand-sektion-gross);
  }

  .bx-sammelliste--schwellen .bx-sammelliste__rahmen {
    gap: var(--abstand-20);
    padding: var(--abstand-26) var(--abstand-22);
  }

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

@media (prefers-reduced-motion: reduce) {
  .bx-sammelliste__schwelle {
    transition: none;
  }

  .bx-sammelliste__schwelle:hover,
  .bx-sammelliste__schwelle:focus-visible {
    transform: none;
  }
}

/*
 * Tile with cover image, "load more" and footer. The cover image itself (.bx-titelbild) is in whitepaper-kopf.css.
 * Grid of three columns, two below stapeln, one below mobil. Tile border orange on hover (graphic border), transition
 * only without reduced motion; title 16.5/1.32 as token, H2 per the house rule for section heads.
 */
.bx-sammelliste[data-bx-medium="titelbild"] {
  padding-block: var(--abstand-56) var(--abstand-58);
  border-block-end: 1px solid var(--farbe-linie-sektion);
}

.bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-12) var(--abstand-16);
  max-width: var(--breite-inhalt-weit-max);
  margin: 0 auto var(--abstand-28);
  padding-inline: var(--seitenrand);
}

.bx-sammelliste__kopf-link {
  margin: 0;
}

/*
 * "Weitere Whitepaper" of the detail pages (head with link) full width between the page margins, H2 26 px, link
 * without underline on the same line; only with a head link.
 */
.bx-sammelliste[data-bx-medium="titelbild"]:has(.bx-sammelliste__kopf-link) :is(.bx-sammelliste__kopf, .bx-sammelliste__inhalt) {
  max-width: none;
}

.bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kopf:has(.bx-sammelliste__kopf-link) {
  flex-wrap: nowrap;
  align-items: baseline;
  margin-block-end: var(--abstand-24);
}

.bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kopf:has(.bx-sammelliste__kopf-link) .bx-sektionskopf__titel {
  margin: 0;
  font-weight: var(--schrift-station-titel-gewicht);
  font-size: var(--schrift-station-titel-groesse);
  line-height: var(--schrift-station-titel-zeile);
  letter-spacing: var(--schrift-station-titel-laufweite);
}

.bx-sammelliste__kopf-link .bx-textlink {
  border-bottom: 0;
}

/* Topic pill of the cover tile in mixed case as in the design (`{{ w.thema }}`) */
.bx-sammelliste[data-bx-medium="titelbild"] .bx-titelbild__chip {
  text-transform: none;
}

.bx-sammelliste__kopf-link a {
  color: var(--farbe-mikrotext);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
  text-decoration: none;
}

.bx-sammelliste__kopf-link a:hover,
.bx-sammelliste__kopf-link a:focus-visible {
  color: var(--farbe-orange-text);
}

.bx-sammelliste__kopf-link a:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-versatz);
}

.bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__gruppe[data-bx-form="breit"] {
  padding: 0 var(--seitenrand);
}

.bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kacheln {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-22);
}

.bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kachel {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-karte-klein);
}

.bx-sammelliste[data-bx-medium="titelbild"] a.bx-sammelliste__kachel:hover,
.bx-sammelliste[data-bx-medium="titelbild"] a.bx-sammelliste__kachel:focus-visible {
  border-color: var(--farbe-orange-flaeche);
  box-shadow: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bx-sammelliste[data-bx-medium="titelbild"] a.bx-sammelliste__kachel {
    transition: border-color 0.2s ease;
  }

  /* no offset on hover: the design does not lift the tile */
  .bx-sammelliste[data-bx-medium="titelbild"] a.bx-sammelliste__kachel:hover {
    translate: none;
  }
}

.bx-sammelliste__kachel-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--abstand-20) var(--abstand-22) var(--abstand-22);
}

.bx-sammelliste__titel {
  margin-block-end: var(--abstand-8);
  font-weight: var(--schrift-kachel-titel-gewicht);
  font-size: var(--schrift-kachel-titel-groesse);
  line-height: var(--schrift-kachel-titel-zeile);
  letter-spacing: var(--schrift-kachel-titel-laufweite);
  text-wrap: pretty;
}

.bx-sammelliste__kachel-text .bx-sammelliste__text {
  margin-block-end: var(--abstand-14);
  text-wrap: pretty;
}

.bx-sammelliste__kachel-link {
  margin-block-start: auto;
  color: var(--farbe-orange-text);
  font-weight: var(--schrift-textlink-gewicht);
  font-size: var(--schrift-textlink-groesse);
}

.bx-sammelliste__mehr-zeile {
  display: flex;
  justify-content: center;
  padding: var(--abstand-28) var(--seitenrand) 0;
}

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

.bx-sammelliste__mehr {
  padding: var(--abstand-14) var(--abstand-28);
  border: 1.5px solid var(--farbe-navy);
  border-radius: var(--radius-pille);
  background: none;
  color: var(--farbe-navy);
  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);
  cursor: pointer;
}

.bx-sammelliste__mehr:hover {
  border-color: var(--farbe-orange-text);
  background-color: var(--farbe-orange-karte);
  color: var(--farbe-orange-text);
}

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

.bx-sammelliste__fuss {
  max-width: var(--breite-rechtstext-max);
  margin: var(--abstand-24) auto 0;
  padding-inline: var(--seitenrand);
  color: var(--farbe-mikrotext);
  font-size: var(--schrift-text-klein-groesse);
  line-height: var(--schrift-fussnote-zeile);
}

.bx-sammelliste__fuss a {
  color: var(--farbe-navy);
  font-weight: var(--schriftskala-gewicht-600);
  text-decoration: underline;
}

[data-bx-mehr-verborgen] {
  display: none;
}

@media (width < 1080px) {
  .bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 768px) {
  .bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kacheln {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-sammelliste__kachel-text {
    padding-inline: var(--abstand-20);
  }

  .bx-sammelliste__mehr {
    padding-inline: var(--abstand-20);
  }
}

/*
 * 2K and larger: the content sits in a container of at most 1312 px (width as at 1440 px) with its own 64 px margin;
 * the growing page margin of the layer does not apply a second time.
 */
@media (width > 1440px) {
  .bx-sammelliste__inhalt,
  .bx-sammelliste__fuss {
    --seitenrand: var(--abstand-seitenrand-breit);
  }

  .bx-sammelliste[data-bx-medium="titelbild"] .bx-sammelliste__kopf {
    --seitenrand: var(--abstand-seitenrand-breit);
  }

  /* Variant without maximum width (cover with head link): full width between the growing page margins */
  .bx-sammelliste[data-bx-medium="titelbild"]:has(.bx-sammelliste__kopf-link) :is(.bx-sammelliste__kopf, .bx-sammelliste__inhalt) {
    --seitenrand: calc(var(--abstand-seitenrand-breit) + var(--bx-rand-extra));
  }
}

/*
 * Filter: state effect. An author display (e.g. flex on an entry) beats the UA behaviour of hidden; this rule
 * restores it so filtered-out entries and the empty state really disappear.
 */
[data-bx-filter-eintrag][hidden],
[data-bx-filter-leer][hidden] {
  display: none;
}

/*
 * Groups without matches and the filter row without JavaScript also disappear against an author display (groups
 * and controls of the collection list are flex or grid elements).
 */
[data-bx-filter-gruppe][hidden],
[data-bx-filter-bedienung][hidden] {
  display: none;
}

/* "By area" of the integrations overview (desktop and mobile). Eyebrow and H2 come unchanged from the section header of
   the base elements (tokens; mobile 27 px via mobil.css). */
.bx-integrations-bereiche {
  border-top: 1px solid var(--farbe-linie-sektion);
  padding: var(--abstand-sektion-gross) var(--seitenrand);
}

.bx-integrations-bereiche__kopf {
  margin-bottom: var(--abstand-40);
}

.bx-integrations-bereiche .bx-sektionskopf__titel {
  margin: 0;
}

.bx-integrations-bereiche__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: var(--abstand-36) var(--abstand-64);
}

.bx-integrations-bereiche__bereich {
  min-inline-size: 0;
}

.bx-integrations-bereiche__bereich h3 {
  margin: 0 0 var(--abstand-10);
  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);
}

/* Paragraph like the FAQ answer (15.5/1.65; #4B5670 => --farbe-mikrotext as in faq.css) */
.bx-integrations-bereiche__bereich p {
  max-inline-size: 640px;
  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-integrations-bereiche__bereich a {
  color: var(--farbe-navy);
  font-weight: var(--schriftskala-gewicht-600);
  text-decoration: underline;
  text-decoration-color: var(--farbe-orange-flaeche);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.bx-integrations-bereiche__bereich a:hover {
  color: var(--farbe-orange-text);
}

@media (width < 768px) {
  .bx-integrations-bereiche__kopf {
    margin-bottom: var(--abstand-28);
  }

  .bx-integrations-bereiche__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-28);
  }
}

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

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

@media print {
/* Print: neither layer nor fallback shapes (AssetArt::CssDruck; the pipeline wraps the rules in @media print) */
.bx-hintergrund { display: none; }
.bx-abschnitt[data-deko]::before { content: none; }
}