/* ═══════════════════════════════════════════════════════════════════════════
   0. SCHRIFTEN — selbst gehostet, K21 §3.1–3.3
   ───────────────────────────────────────────────────────────────────────────
   Zwei Familien, vier Schnitte — das Font-Budget aus K21:

     Exo 2 700           Ueberschriften und grosse Zahlen
     Exo 2 700 Italic    Betonung INNERHALB einer Ueberschrift, hoechstens
                         einmal je Ueberschrift, nie im Fliesstext
     Inter 400 / 600     Fliesstext, Bedienoberflaeche, Tabellen, Labels

   Bitter ist mit K21 v1.3 zurueckgezogen; die Betonung traegt seither die
   Kursive von Exo 2 — dieselbe Familie, damit es keine dritte gibt. Die
   Projektanweisung nennt an dieser Stelle noch Bitter; der Widerspruch ist
   als OP-01 gefuehrt, und nach der Vorrangregel gewinnt der Kern (K21).

   Ausgeliefert von der eigenen Domain. Von Google wird nichts geladen.
   Lizenz SIL Open Font License 1.1, Dateien aus @fontsource.
   ═══════════════════════════════════════════════════════════════════════════ */


@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/exo-2-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/exo-2-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/exo-2-latin-700-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/exo-2-latin-ext-700-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/*
 * ═══════════════════════════════════════════════════════════════════════════
 * SWOBBEE DESIGN SYSTEM v2.0
 * Premium Infrastructure Brand · Urban Mobility Safety
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * TABLE OF CONTENTS
 * ─────────────────────────────────────────────────────────────────────────── 
 *  1. Design Tokens & Reset
 *  2. Typography System
 *  3. Layout & Containers
 *  4. Navigation
 *  5. Hero Systems
 *  6. Content Sections
 *  7. Component Library
 *     7.1 Cards
 *     7.2 Feature Lists
 *     7.3 Statistics
 *     7.4 Safety Matrix
 *     7.5 Steps & Process
 *     7.6 Partner Logos
 *     7.7 News & Press
 *     7.8 FAQ Accordion
 *     7.9 Forms & Contact
 *  8. Buttons & Links
 *  9. Utilities
 * 10. Animations
 * 11. Responsive Design
 * 12. Footer
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS & RESET
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove iOS tap flash and prevent 300ms delay on all interactive elements */
a, button, [role="button"], input, select, textarea,
.btn, .nav-link, .hamburger, .region-option, .subnav-link, .faq-q, .team-card, .card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:root {
  /* ── Brand Colors ────────────────────────────────────────── */
  --black: #1A1A1A;
  --charcoal: #464646;
  --mid: #717171;          /* K21 v1.1: #7A7A7A fiel mit 4,29:1 durch WCAG AA */
  --border: #E8E3DE;
  --warm: #FAF7F4;
  --cream: #FFF5F0;
  --orange: #FF5A00;
  --orange-light: #FF7A33;
  --orange-dim: rgba(255, 90, 0, 0.10);
  --orange-glow: rgba(255, 90, 0, 0.20);
  --white: #FFFFFF;

  /* ── Dunkles System · K21 v1.5 §2.6/§2.9 ─────────────────── */
  /* Flaechen. --black ist zugleich --dark-0. */
  --dark-1: #242426;
  --dark-2: #2E2E31;
  --dark-3: #3A3A3E;
  /* Textstufen auf dunklem Grund. Weiss mit Alpha ergab je nach Flaeche
     3,2:1 bis 4,5:1 und faellt durch AA; diese beiden Werte sind gesetzt.
     --text-d2 auf --black = 11,0:1, --text-d3 = 7,32:1. */
  --text-d2: #C9C9C9;      /* Sekundaertext im dunklen System */
  --text-d3: #A8A8A8;      /* Bildunterschrift, Quelle, Label */

  /* ── Status · je System ein Satz, K21 v1.5 §2.3 ──────────── */
  --status-ready-l: #1A864D;
  --status-warning-l: #996E00;
  --status-fault-l: #B3261E;
  --status-ready-d: #1FA05C;
  --status-warning-d: #FFB800;
  --status-fault-d: #E1524A;


  /* ── Typography ──────────────────────────────────────────── */
  /* K21 §3.3, Stacks woertlich. Display traegt Ueberschriften und grosse
     Zahlen, Text alles andere. Die Betonung nutzt den Display-Stack kursiv. */
  --font-display: 'Exo 2', 'Exo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* --font bleibt als Alias, damit vorhandene Regeln weiterlaufen; es zeigt
     auf den Textstack. --serif ist am 18.09.2026 entfernt: seit der
     Ruecknahme von Bitter war der Token nur noch ein Alias auf
     --font-display und damit eine Einladung, eine Serifenschrift zu
     erwarten, die es nicht gibt. */
  --font: var(--font-text);
  
  /* ── Spacing Scale ───────────────────────────────────────── */
  
  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 100px;
  
  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.10);
  /* K21 §2.7 verbietet farbige Glows. Der fruehere orange Glow ist durch
     einen neutralen Schatten ersetzt; der Token heisst deshalb --shadow-lift
     und nicht mehr nach einer Farbe. Einen Token --focus-ring gibt es nicht mehr: er ist
     mit K21 v1.7 am 10.09.2026 ersatzlos zurueckgezogen, weil kein einzelner
     Wert auf allen fuenf Flaechen 3:1 erreicht. Die Fokusmarkierung folgt
     stattdessen R8 (deckender Umriss, Farbe nach Flaeche) — siehe unten. */
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.14);
  
  /* ── Transitions ─────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.35s;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Reserve space for fixed nav when jumping to anchors */
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1b. VERTIKALER RHYTHMUS  (Paket 6)
   ───────────────────────────────────────────────────────────────────────────
   Der Reset oben setzt `margin: 0` auf JEDES Element, auch auf h1-h6, p, ul.
   Danach stellt nichts einen Grundrhythmus wieder her, und jeder Abschnitt
   erfindet seinen eigenen Abstand. Sichtbar wurde das dort, wo keiner
   nachgetragen wurde: die orange Unterstreichung einer H2 beruehrte fast den
   Fliesstext, und die H2 „Management" sass buendig am orangen Band.

   Diese Regeln stehen absichtlich in :where() und haben damit die
   Spezifitaet 0 — genau wie der Reset, aber spaeter im Stylesheet. Sie
   greifen also nur, wo sonst nichts steht; jede Komponentenregel gewinnt
   weiterhin. Es wird nur ein Abstand NACH oben ergaenzt, nie nach unten:
   so kann nichts kollabieren und kein bestehender Abstand verdoppelt sich.  */

:where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol, dl, blockquote, table) {
  margin-top: 0.6em;
}

:where(p, ul, ol, dl, blockquote, table) + :where(p, ul, ol, dl, blockquote) {
  margin-top: 0.85em;
}

:where(p, ul, ol, table, blockquote) + :where(h2, h3, h4, h5, h6) {
  margin-top: 1.4em;
}

:where(li) + :where(li) {
  margin-top: 0.3em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1c. K23 INHALTSIKONEN  (Paket 6)
   ───────────────────────────────────────────────────────────────────────────
   Ersetzen die bisherigen Emoji. Emoji rendern je Betriebssystem anders,
   bringen eigene Farben mit und stehen in keinem Register.
   Farbe nach K21 R4: die Ikone erbt die Textfarbe ihrer Umgebung, damit sie
   auf hellen und dunklen Flaechen automatisch im richtigen System steht.
   Groesse aus der K23-Reihe 16/20/24/32/48.                                  */

.k23 {
  display: inline-block;
  vertical-align: -0.16em;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
}

/* Groessenstufen der K23-Reihe. 20 px ist der Standard und steht oben; diese
   drei sind die uebrigen Stufen aus K21 §8. Sie stehen nach .k23, damit sie bei
   gleicher Spezifitaet gewinnen. Die Strichstaerke steht am Element: 1,5 px bis
   24 px, 2 px ab 32 px — sonst wird eine grosse Ikone duenn und eine kleine dick.
   Ohne diese Stufen erzwingt .k23 20 px und ueberschreibt jede width-Angabe im
   HTML — genau das liess die `drone` als Gekritzel erscheinen.                */
.k23-s16 { width: 16px; height: 16px; }
.k23-s24 { width: 24px; height: 24px; }
.k23-s32 { width: 32px; height: 32px; }

/* Steht die Ikone vor Text, traegt sie einen halben Wortabstand. */
.k23 + * { margin-left: 0.15em; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal);  /* K21 R1/R4: Orange traegt unter 24 px keinen Text (3,13:1 auf Weiss, 2,93:1 auf Warm) */
  display: block;
  margin-bottom: 0.9rem;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--black);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--black);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
}

/* K21 R3: Weiss auf Orange ergibt 3,13:1 und faellt durch AA. Die ganze
   orange Leiste traegt deshalb --black. */
.proof-strip-orange,
.proof-strip-orange * {
  color: var(--black);
}

/* ── Italic Emphasis (Serif) ───────────────────────────── */
h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--orange);
}

/* K21 R2: Auf --warm (2,93:1) und --cream (2,91:1) traegt Orange in keiner
   Groesse Text. R5 nennt den Ersatz: --black plus orange Unterstreichung.
   Auf reinem Weiss und auf dunklem Grund bleibt die orange Glyphe. */
.sp-warm h1 em,  .sp-warm h2 em,  .sp-warm h3 em,
.sp-warm .h1 em, .sp-warm .h2 em, .sp-warm .h3 em,
.sp-cream h1 em,  .sp-cream h2 em,  .sp-cream h3 em,
.sp-cream .h1 em, .sp-cream .h2 em, .sp-cream .h3 em,
.subhero h1 em,  .subhero h2 em,  .subhero h3 em,
.subhero .h1 em, .subhero .h2 em, .subhero .h3 em,
[style*="background:#FAF7F4"] h1 em, [style*="background:#FAF7F4"] h2 em,
[style*="background:var(--warm)"] h1 em, [style*="background:var(--warm)"] h2 em,
[style*="background:#FFF5F0"] h1 em, [style*="background:#FFF5F0"] h2 em,
[style*="background:var(--cream)"] h1 em, [style*="background:var(--cream)"] h2 em {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

/* ── Bildunterschrift ──────────────────────────────────────
   K21 §3.4 fuehrt Caption mit 13 px und Small mit 14 px. Beide sind
   zulaessig — aber nur fuer Beschriftungen, nicht fuer Fliesstext. Die
   Klasse gibt der Unterscheidung einen Namen: was `caption` heisst, darf
   unter 16 px stehen; was keinen Namen hat, ist Fliesstext und faellt in
   der Pruefung auf. Vorher trugen diese Stellen ihre Groesse inline und
   waren damit von Fliesstext nicht zu unterscheiden. */
.caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mid);
}
.caption--sm { font-size: 0.875rem; line-height: 1.6; }
.caption--dark { color: var(--text-d3); }

/* ── Body Text ─────────────────────────────────────────── */
.body-lg {
  font-size: 1.05rem;
  color: var(--charcoal);
  line-height: 1.75;
  font-weight: 400;
}

.body, p {
  font-size: 1rem;
  color: var(--charcoal);
  line-height: 1.75;
  font-weight: 400;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--mid);
}

.text-xs {
  font-size: 0.75rem;
}

/* ── Utility Classes ───────────────────────────────────── */
.mb-3 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2.5rem; }
.block { display: block; }
.w-full { width: 100%; }
.btn.w-full { display: flex; }

/* Special text effect for hero */
.u-word {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. LAYOUT & CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  width: 100%;
}

/* ── Section Spacing ───────────────────────────────────── */
.sp {
  padding: clamp(4rem, 10vw, 7rem) 0;
}

.sp-warm {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: var(--warm);
}

.sp-cream {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: var(--cream);
}

/* ── Split Layout ──────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* Verliert ein .split seine Bildhaelfte, bleibt ein Kind in einem
   zweispaltigen Raster stehen — und eine leere Haelfte liest sich als
   Ladefehler, nicht als Gestaltung. Das allein verbliebene Kind nimmt
   beide Spalten und behaelt eine Lesebreite. */
.split:has(> :only-child) {
  grid-template-columns: 1fr;
}
.split > :only-child {
  grid-column: 1 / -1;
  max-width: 62rem;
}

.split-img img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.split-img img:hover {
  transform: scale(1.02);
}

/* ── Split Layout (Full Height Image) ──────────────── */
.split-full-height {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 600px;
}

.split-full-height-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.split-full-height-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-full-height-content {
  padding: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-full-height.reverse .split-full-height-img {
  order: 2;
}

.split-full-height.reverse .split-full-height-content {
  order: 1;
}

/* ── Section Headers ───────────────────────────────────── */
.section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.section-head .eyebrow {
  margin: 0 auto 0.9rem;
}

.section-head .h2 {
  margin-bottom: 1rem;
}

.section-head p {
  font-size: 1.05rem;
  color: var(--charcoal);
  line-height: 1.75;
}

/* ── Evidence Divider ──────────────────────────────────── */
.evidence-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 20%,
    var(--border) 80%,
    transparent 100%
  );
  margin: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
}

.evidence-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 66px;
  display: flex;
  align-items: center;
  background: rgba(251, 251, 253, 0.94);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration-base), background var(--duration-base);
}

.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.98);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  width: 100%;
  display: flex;
  align-items: center;
}

.nav-logo { color: transparent; text-decoration: none; }

.nav-logo img {
  height: 32px;  /* K22: Mindestgroesse 160 px; 32 x 5,123 = 164 px */
  display: block;
  transition: opacity var(--duration-fast);
}

.nav-logo:hover img,
.nav-logo:hover svg {
  opacity: 0.75;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
}

.nav-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast);
  position: relative;
}

.nav-link:hover {
  color: var(--black);
  background: rgba(0, 0, 0, 0.05);
}

.nav-active {
  color: var(--black) !important;  /* K21 R1 — aktiv markiert der orange Punkt in ::after, nicht die Schrift */
  font-weight: 700;
}

.nav-active::after {
  content: '';
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--orange);
  border-radius: 50%;
}

/* ── Dropdown Menu ─────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-link-drop {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.nav-caret {
  font-size: 0.75rem;
  /* 0,7 Deckkraft ergab 4,03:1; das Zeichen ist zwar aria-hidden und rein
     dekorativ, kostet bei voller Deckkraft aber nichts. */
  opacity: 1;
  margin-left: 0.25rem;
  transition: transform var(--duration-fast);
}

.nav-dropdown:hover .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: white;
  border: 1px solid var(--border);
  border-radius: 1rem;
  min-width: 210px;
  padding: 0.7rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow), transform var(--duration-slow);
  box-shadow: var(--shadow-lg);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Company dropdown — right-align to prevent viewport overflow */
.dropdown-right .dropdown-menu {
  left: auto;
  right: 0;
  transform: translateY(-6px);
}
.dropdown-right:hover .dropdown-menu,
.dropdown-right.open .dropdown-menu {
  transform: translateY(0);
}

.drop-link {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.drop-link:hover {
  background: var(--cream);
  color: var(--orange);
}

.drop-sub {
  color: var(--mid);
  font-weight: 500;
  font-size: 0.75rem;
  padding-left: 1rem;
}

.drop-sub::before {
  content: "→ ";
  color: var(--orange);
  margin-right: 0.3rem;
}

.drop-divider {
  height: 1px;
  background: var(--border);
  margin: 0.4rem 0;
}

.drop-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid);
  padding: 0.2rem 0.75rem;
}

.nav-cta {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--black);  /* K21 R3: Schrift auf Orange ist #1A1A1A, nie Weiss (5,56:1 statt 3,13:1) */
  background: var(--orange);
  text-decoration: none;
  padding: 0.55rem 1.25rem;
  border-radius: 10px;
  margin-left: 0.75rem;
  transition: opacity var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-cta:hover {
  opacity: 0.88;
  transform: scale(1.02);
  box-shadow: var(--shadow-lift);
}

/* ── Mobile Menu ───────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 10px;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all 0.3s ease;
}
/* Hamburger → X animation when open */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 999;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity var(--duration-base), transform var(--duration-base);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--duration-fast);
}

.mobile-menu a:hover {
  color: var(--orange);
}

.mobile-cta {
  color: var(--black) !important;  /* K21 R1 — Orange traegt unter 24 px keinen Text */
  font-weight: 700;
}

/* Mobile region toggle */
.mobile-region-toggle {
  display: inline-flex;        /* shrink-wrap to content, not full width */
  align-items: center;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2rem;
  padding: 4px;
  gap: 4px;
  margin-top: 1rem;
}

.mobile-region-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 4rem;           /* bigger flags */
  text-decoration: none;
  transition: all 0.2s ease;
  opacity: 0.35;
}

.mobile-region-option.mobile-region-active {
  background: white;
  opacity: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. HERO SYSTEMS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Subpage Hero ──────────────────────────────────────── */
.subhero {
  padding: clamp(7rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.subhero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 20%,
    var(--border) 80%,
    transparent 100%
  );
}

/* Zwei Spalten nur, wenn es auch zwei Bloecke gibt.
   Bisher stand hier fest 1.1fr / 0.9fr. Auf allen drei Seiten mit diesem
   Bauteil liegt aber nur ein Block darin — die zweite Spalte blieb leer und
   der Text stand in 572 statt 736 px. Die uebrigen Unterseiten setzen ihre
   Ueberschrift auf min(800px, 100%); 46rem liegt bewusst nah daran. */
.subhero-inner {
  display: grid;
  grid-template-columns: minmax(0, 46rem);
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
.subhero-inner:has(> * + *) {
  grid-template-columns: 1.1fr 0.9fr;
}
/* Rasterkinder haben eine automatische Mindestbreite: Sie werden nie
   schmaler als ihr eigener Mindestinhalt. Die Markenzeile darunter laeuft mit
   overflow-x: auto und flex-wrap: nowrap — ihr Mindestinhalt ist die Summe
   beider Marken, gemessen 403 px. Bei 320 px Bildschirmbreite schob das den
   ganzen Block 99 px ueber den Kasten hinaus, und weil der Kasten
   overflow: hidden traegt, verschwand der Text dort einfach. */
.subhero-inner > * {
  min-width: 0;
}

.subhero h1 {
  margin-bottom: 1.5rem;
}

.subhero-body {
  font-size: 1.05rem;
  color: var(--charcoal);
  line-height: 1.75;
  max-width: 540px;
  margin-bottom: 1.75rem;
}

.subhero-img img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

/* ── Breadcrumb ────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb a {
  color: var(--mid);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.breadcrumb a:hover {
  color: var(--orange);
}

.breadcrumb-sep {
  color: var(--mid);  /* K21 R6: --border ist Flaechenfarbe, nie Text (1,19:1) */
}

/* ── Sticky Subnav ─────────────────────────────────────── */
/* ── Subnav — single canonical definition (merged from 3 duplicates) ── */
.subnav {
  position: sticky;
  top: 66px;
  z-index: 100;
  background: white;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  /* Scroll-hint fade on right edge (mobile only) */
  position: relative;
}

/* Fade hint on right edge to signal horizontal scroll on mobile */
.subnav::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  background: linear-gradient(to right, transparent, white);
  pointer-events: none;
}
@media (min-width: 769px) {
  .subnav::after { display: none; }
}

.subnav-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.subnav-inner::-webkit-scrollbar {
  display: none;
}

.subnav-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mid);
  text-decoration: none;
  padding: 1rem 1.25rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  position: relative;
}

.subnav-link:hover {
  color: var(--black);
}

.subnav-active {
  color: var(--black) !important;
  border-bottom-color: var(--orange) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. CONTENT SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tag Pills ─────────────────────────────────────────── */
.tag-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--orange-dim);
  color: var(--black);  /* K21 R1/§2.3: die Flaeche traegt Orange, die Glyphe nicht */
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
  transition: background var(--duration-fast), transform var(--duration-fast);
}

.tag-pill:hover {
  background: var(--orange-glow);
  transform: scale(1.05);
}

/* ── Certification Pills ───────────────────────────────── */
.cert-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.75rem 0;
}

.cert-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--black);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}

.cert-pill:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cert-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. COMPONENT LIBRARY
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   7.1 CARDS
   ─────────────────────────────────────────────────────────────────────────── */

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: white;
  transition: box-shadow var(--duration-base), transform var(--duration-base), border-color var(--duration-base);
  position: relative;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--orange);
}

.card-orange-top {
  border-top: 3px solid var(--orange);
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
  line-height: 1;
}

.card h3 {
  font-size: 1.125rem;   /* K21 §3.4: H3 18–24 px. 0,95rem = 15,2 px lag unter dem Absatz darunter. */
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.5rem;
}

.card p {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.75;
}

.card-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--orange-dim);
  color: var(--black);  /* K21 R1/§2.3 */
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-top: 0.75rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   7.2 FEATURE LISTS
   ─────────────────────────────────────────────────────────────────────────── */

.feat-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.feat {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feat-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--orange-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--duration-fast), transform var(--duration-fast);
}

.feat:hover .feat-icon {
  background: var(--orange-glow);
  transform: scale(1.1);
}

.feat strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.15rem;
}

.feat span {
  font-size: 0.8125rem;
  color: var(--mid);
  line-height: 1.55;
}

/* ───────────────────────────────────────────────────────────────────────────
   7.3 STATISTICS
   ─────────────────────────────────────────────────────────────────────────── */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 3.5rem;
}

.stat-cell {
  background: white;
  padding: 2rem;
  text-align: center;
  transition: background var(--duration-fast);
}

.stat-cell:hover {
  background: var(--warm);
}

.stat-big {
  font-family: var(--font-display);
  /* clamp() loest der Pruefer statisch nicht auf; er meldet dafuer WARN
     CONTRAST. Der kleinste Wert ist 2rem = 32 px und liegt ueber der
     24-px-Schwelle aus R1 — im Browser gemessen bei 320/768/1440 px. */
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--orange);
  line-height: 1;
  display: block;
  margin-bottom: 0.3rem;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--mid);
}

/* ── Grid Stats ────────────────────────────────────────── */
.grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.grid-4col-mt {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

/* ── Timeline Grid ───────────────────────────────────── */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.timeline-item {
  background: white;
  padding: 2rem;
  text-align: left;
}

.timeline-year {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal);  /* K21 R1 */
  margin-bottom: 1rem;
}

.timeline-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.75rem;
}

.timeline-desc {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.6;
}

/* ── Fire Safety Numbers ───────────────────────────────── */
.fire-strip {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fire-card {
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--border);
  background: white;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: box-shadow var(--duration-base), transform var(--duration-fast);
}

.fire-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Statustoene aus den K21-Statusfarben des hellen Systems abgeleitet
   (§2.3). Die fruehere Palette (#FEF2F2 / #FECACA / #BBF7D0 / #FDE68A)
   stand in keinem Register. Die Karte traegt --charcoal, damit auch der
   kleinste Text ueber 4,5:1 bleibt. */
.fire-card-red {
  background: rgba(179, 38, 30, 0.05);
  border-color: rgba(179, 38, 30, 0.28);
}

.fire-card-green {
  background: rgba(26, 134, 77, 0.05);
  border-color: rgba(26, 134, 77, 0.28);
}

.fire-card-amber {
  background: rgba(153, 110, 0, 0.05);
  border-color: rgba(153, 110, 0, 0.28);
}


.fire-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.fire-num-red {
  color: #B3261E;
}

.fire-num-green {
  color: #1A864D;
}

.fire-num-charcoal {
  color: var(--charcoal);
}

.fire-card strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.35rem;
}

.fire-card span {
  font-size: 0.8125rem;
  color: var(--charcoal);
  line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────────────
   7.4 SAFETY MATRIX
   ─────────────────────────────────────────────────────────────────────────── */

.safety-matrix {
  display: grid;
  /* auto-fit statt vier festen Spalten: Die Matrix traegt seit dem
     18.09.2026 drei Karten statt vier, weil eine ohne Beleg war. Mit einer
     festen Spaltenzahl bliebe die vierte Spalte leer und saehe aus, als
     fehle etwas. Mit auto-fit fuellt sich die Reihe unabhaengig davon, wie
     viele Karten kuenftig dazukommen oder wegfallen. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.safety-matrix__item {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all var(--duration-base) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.safety-matrix__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-light) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.safety-matrix__item:hover::before {
  transform: scaleX(1);
}

.safety-matrix__item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--orange);
}

.safety-matrix__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  /* Ohne min-width:0 haelt die Ueberschrift ihre Mindestinhaltsbreite und
     schob bei 320 px 28 px ueber den Rand (WCAG 1.4.10). */
  flex-wrap: wrap;
}

.safety-matrix__head > * {
  min-width: 0;
  overflow-wrap: break-word;
}

.safety-matrix__icon {
  font-size: 1.75rem;
  line-height: 1;
}

.safety-matrix__item h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
}

.safety-matrix__item p {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.6;
}

.safety-system-head {
  margin-top: 4rem;
  margin-bottom: 2.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   7.5 STEPS & PROCESS
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Genehmigungsabschnitt auf us-safety-compliance.html ──────────────────
   .step-n ist orange. Das ist auf weissem Grund ab 24 px zulaessig (K21 R1),
   auf Warmweiss aber in KEINER Groesse (K21 R2: 2,93:1). Der Abschnitt liegt
   auf sp-warm, also traegt die Ziffer hier Schwarz. Gemessen, nicht geschaetzt:
   der Pruefer meldete 25,6 px Orange auf #FAF7F4 bei 1440/768/375 px.
   Die Lesebreite ist begrenzt, weil eine Aufzaehlung ueber 1.270 px Breite
   nicht mehr gelesen, sondern ueberflogen wird. */
#approval .step-n { color: var(--black); }
#approval .step-list { max-width: 62rem; }

.step-list {
  display: flex;
  flex-direction: column;
}

.step {
  display: flex;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  transition: background var(--duration-fast);
}

.step:last-child {
  border-bottom: none;
}

.step:hover {
  background: linear-gradient(to right, transparent 0%, var(--warm) 100%);
  padding-left: 1rem;
  margin-left: -1rem;
}

.step-n {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--orange);  /* K21 R1: ueber 24 px auf Weiss zulaessig; 22 % Deckung ergaben 1,30:1 */
  line-height: 1;
  flex-shrink: 0;
  width: 42px;
  padding-top: 0.1rem;
  transition: color var(--duration-fast);
}

.step:hover .step-n {
  color: var(--orange);
}

.step h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.2rem;
}

.step p {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────────────
   7.6 PARTNER LOGOS
   ─────────────────────────────────────────────────────────────────────────── */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.logo-pill {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast);
}

.logo-pill:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--orange);
}

.logo-pill img {
  height: 24px;
  max-width: 90px;
  object-fit: contain;
  filter: grayscale(0.2);
  opacity: 0.85;
  transition: all var(--duration-fast);
}

.logo-pill:hover img {
  filter: none;
  opacity: 1;
}

/* ── Partner Categories ────────────────────────────────── */
.partner-cat {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.partner-cat:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.partner-cat-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mid);
  margin-bottom: 1.25rem;
}

.partner-cat .logo-strip {
  justify-content: flex-start;
}

/* ───────────────────────────────────────────────────────────────────────────
   7.7 NEWS & PRESS
   ─────────────────────────────────────────────────────────────────────────── */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.news-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base);
  position: relative;
}

.news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.news-card:hover::before {
  transform: scaleX(1);
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.news-card-dark {
  background: linear-gradient(135deg, #242426 0%, #1A1A1A 100%);
  border-color: #242426;
}

.news-card-dark .news-meta,
.news-card-dark h3,
.news-card-dark p,
.news-card-dark .news-read {
  color: white !important;
}

.news-card-dark .news-date {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.news-card-dark .news-source {
  color: rgba(255, 255, 255, 0.6);
}

.news-card-dark .news-source-highlight {
  background: var(--orange);
  color: var(--black);  /* K21 R3: Schrift auf Orange ist #1A1A1A, nie Weiss (5,56:1 statt 3,13:1) */
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

.news-card-dark:hover {
  background: var(--dark-2);  /* K21 §2.6 — #333333/#222222 stehen in keinem Register */
}

.news-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.news-date {
  color: var(--charcoal);  /* K21 R1 */
}

.news-source {
  color: var(--mid);
}

.news-source-dark {
  color: rgba(255, 255, 255, 0.6);
}

.news-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.news-card p {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: auto;
}

.news-read {
  display: inline-flex;
  /* .news-body ist ein Flex-Container; ohne align-self dehnt sich das Element
     auf die volle Kartenbreite und die orange Linie lief 294 statt 94 px. */
  align-self: flex-start;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--black);  /* K21 R1/R5 */
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1rem;
  gap: 0.3rem;
}

.news-read::after {
  content: '→';
  transition: transform var(--duration-fast);
}

.news-card:hover .news-read::after {
  transform: translateX(4px);
}

/* ───────────────────────────────────────────────────────────────────────────
   7.8 FAQ ACCORDION
   ─────────────────────────────────────────────────────────────────────────── */

.faq-list {
  max-width: 800px;
  margin: 2rem auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast);
}

.faq-item:hover {
  background: var(--warm);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.5rem 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: color var(--duration-fast);
}

.faq-q:hover {
  color: var(--orange);
}

.faq-icon {
  font-size: 1.25rem;
  color: var(--black);  /* K21 R1 — 20 px liegt unter der 24-px-Schwelle */
  flex-shrink: 0;
  transition: transform var(--duration-base);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.75;
  transition: max-height var(--duration-slow) var(--ease-smooth), padding var(--duration-slow);
  padding: 0;
}

.faq-item.open .faq-a {
  max-height: 500px;
  padding-bottom: 1.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   7.9 FORMS & CONTACT
   ─────────────────────────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  margin-top: 3rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  color: var(--black);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* Der Umriss bleibt stehen: outline:none plus oranger Glow (--orange-dim,
   1,1:1 auf Weiss) war keine erkennbare Fokusmarkierung (K21 R8, SC 1.4.11). */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-color: var(--black);
  box-shadow: none;
}

.form-group input:focus:not(:focus-visible),
.form-group select:focus:not(:focus-visible),
.form-group textarea:focus:not(:focus-visible) {
  border-color: var(--charcoal);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form button {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 1rem 2rem;
  background: var(--orange);
  color: var(--black);  /* K21 R3: Schrift auf Orange ist #1A1A1A, nie Weiss (5,56:1 statt 3,13:1) */
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: opacity var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}

.form button:hover {
  opacity: 0.88;
  transform: scale(1.02);
  box-shadow: var(--shadow-lift);
}

.form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.contact-details {
  background: var(--warm);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.contact-details h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.contact-details p {
  font-size: 1rem;
  color: var(--charcoal);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.contact-item-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.contact-item strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.2rem;
}

.contact-item span {
  font-size: 0.8125rem;
  color: var(--mid);
}

/* ── Monitor Grid (Dashboard) ──────────────────────────── */
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.monitor-cell {
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.monitor-cell:hover {
  background: white;
  border-color: var(--orange);
}

.monitor-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal);  /* K21 R1 */
  margin-bottom: 0.5rem;
}

.monitor-cell strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.35rem;
}

.monitor-cell span {
  font-size: 0.8125rem;
  color: var(--mid);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. BUTTONS & LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  /* K21 §4.6: 56 px ist die grosse Stufe. Vorher ergab sich die Hoehe aus
     Polster und Zeilenhoehe und landete je nach Rahmen bei 54 oder 55 px. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-weight: 800;
  font-size: 0.8125rem;
  text-decoration: none;
  padding: 1rem 2rem;
  /* K21 §4.6 kennt 40 / 48 / 56 px. Ohne feste Zeilenhoehe ergab sich 55 px
     — eine Stufe, die es im System nicht gibt. */
  line-height: 22px;
  border-radius: 16px;
  transition: opacity var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
  /* P6: 1 px durchsichtiger Rahmen. Bei box-sizing:border-box verschiebt der
     Rahmen der Umriss-Varianten den Inhalt sonst um genau 1 px nach unten. */
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
}

.btn:hover {
  opacity: 0.88;
  transform: scale(1.02);
}

.btn-orange {
  background: var(--orange);
  color: var(--black);  /* K21 R3: Schrift auf Orange ist #1A1A1A, nie Weiss (5,56:1 statt 3,13:1) */
}

.btn-orange:hover {
  box-shadow: var(--shadow-lift);
}

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--border);
  border-radius: 16px;   /* P6: war 12px — jetzt gleich wie .btn */
}

.btn-outline:hover {
  border-color: var(--charcoal);
}

.btn-white {
  background: white;
  color: var(--black);
}

.btn-outline-light {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;   /* P6: war 12px */
}

.btn-outline-light:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}

.link-arrow {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--black);  /* K21 R1 — der Akzent wandert in die Linie darunter (R5) */
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: gap var(--duration-fast);
}

.link-arrow::after {
  content: '→';
  transition: transform var(--duration-fast);
}

.link-arrow:hover {
  gap: 0.5rem;
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ── App Badges ────────────────────────────────────────── */
.app-badges {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--black);
  color: white;
  text-decoration: none;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.app-badge:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.app-badge-sm {
  font-size: 0.75rem;
  opacity: 0.5;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-banner {
  background: linear-gradient(135deg, #1A1A1A 0%, #242426 100%);
  color: white;
  padding: clamp(4rem, 8vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="1" cy="1" r="1" fill="rgba(255,90,0,0.1)"/></svg>');
  opacity: 0.3;
}

.cta-banner .container {
  position: relative;
  z-index: 1;
}

.cta-banner h2 {
  color: white;
  margin-bottom: 1rem;
  text-align: center;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reveal Animations ─────────────────────────────────── */
/* Die Deckkraft laeuft in 0,25 s durch, die Bewegung weiter in 0,7 s.
   Grund: Waehrend einer langen Deckkraft-Blende liegt jeder Text kurz unter
   seinem Zielkontrast — axe und Lighthouse messen genau dort und melden
   Kontrastfehler, die im ausgelaufenen Zustand nicht bestehen. Die kuerzere
   Blende nimmt der Messung die Angriffsflaeche, ohne die Bewegung zu
   aendern. Bei prefers-reduced-motion entfaellt ohnehin beides. */
/* P6: Die Ausblendung gilt nur, wenn JavaScript laeuft. Ohne .js bleibt der
   Inhalt sichtbar — vorher stand er auf opacity 0 und 28 px Versatz, bis
   main.js (defer) .visible setzte. Das war das Ladefenster und zugleich der
   Grund, warum Knoepfe waehrend des Ladens ueber Text zu stehen schienen. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.25s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.22s; }
.d3 { transition-delay: 0.34s; }
.d4 { transition-delay: 0.46s; }
.d5 { transition-delay: 0.58s; }

/* ── Hero Animations ───────────────────────────────────── */

/* ── GPU compositing hints for animated hero elements ───────────────────── */
[style*="animation:fadeUp"],
[style*="animation: fadeUp"] {
  will-change: opacity, transform;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .split-full-height {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  
  .split-full-height-img {
    min-height: 400px;
    border-radius: var(--radius-xl);
  }
  
  .split-full-height.reverse .split-full-height-img {
    order: 1;
  }
  
  .split-full-height.reverse .split-full-height-content {
    order: 2;
  }
  
  .subhero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .news-card-featured {
    grid-column: span 1;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .monitor-grid {
    grid-template-columns: 1fr;
  }
  
  .safety-matrix {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .card-grid-3 {
    grid-template-columns: 1fr;
  }
  
  .hamburger {
    display: flex;
  }
  
  .container {
    padding: 0 1.5rem;
  }
  
  .nav-inner {
    padding: 0 1.5rem;
  }
  
  .card-grid-2,
  .card-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .stat-strip,
  .grid-4col,
  .timeline-grid {
    grid-template-columns: 1fr;
  }
  
  .logo-strip {
    justify-content: flex-start;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  h1, .h1 {
    font-size: 2.25rem;
  }
  
  h2, .h2 {
    font-size: 1.9rem;
  }

  /* ── Tag pill rows: horizontal scroll, no wrap (cert pills etc) ─────── */
  .tag-pill-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0.5rem !important;
    padding-bottom: 0.25rem !important;
  }
  .tag-pill-row::-webkit-scrollbar { display: none; }

  /* ── Partnership process steps: tighter gap ──────────────────────────── */
  [style*="display:grid"][style*="gap:2rem"] {
    gap: 1.1rem !important;
  }

  /* ── Stats grids: 2x2 on mobile ─────────────────────────────────────── */
  .about-stats-grid,
  .team-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem 1.5rem !important;
    justify-items: center !important;
  }

  /* ── Subnav hero: fix white gap (align-items:center conflict) ────────── */
  .hero-section.has-subnav {
    align-items: stretch !important;
  }
  .hero-section.has-subnav .hero-content {
    align-items: flex-start !important;
    width: 100% !important;
  }

  /* ── Content images in subhero sections: cap height ─────────────────── */
  .subhero-img img {
    max-height: 55vw !important;
    object-fit: cover !important;
  }
  /* Die Hoehenbegrenzung gilt dem Bild, nicht dem Block: der Block traegt
     auch die Bildunterschrift. Mit der Kappung am Block wurde die
     Unterschrift unter 769 px vollstaendig abgeschnitten (WCAG 1.4.4). */
  .subhero-img {
    overflow: hidden !important;
  }

  /* ── Non-subnav hero: minimal spacer, content near top ───────────────── */
  .hero-section:not(.has-subnav) .hero-content::before {
    height: 3vh !important;
    min-height: 20px !important;
  }

  /* ── eu.html market pills: left-aligned single row ───────────────────── */
  .hero-market-pills > span:first-child {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── Team member cards: fix stacking layout ─────────────────────────── */
  .team-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.85rem !important;
  }
  .team-card .team-avatar {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 0.875rem !important;
  }

  /* ── Hero section first content section: ensure breathing room ───────── */
  .hero-section + section,
  .hero-section + .sp,
  .hero-section + .sp-warm,
  .hero-section + .proof-strip-orange {
    padding-top: 2rem !important;
  }

  /* ── Fliesstext im Hero: kompakter, aber nie unter der Mindestgroesse ──
     K21 §11 setzt 16 px als Untergrenze fuer Webtext. Der Hero-Absatz ist
     der meistgelesene Absatz der Seite; 0.875rem lag darunter.            */
  .hero-section .hero-text-block p,
  .hero-section p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }


  /* ── Team member cards: clean single-column stacked layout ─────────────── */
  .team-card {
    display: block !important;
    padding: 1rem !important;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem !important;
    background: var(--white);
  }
  .team-card .team-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  .team-card .avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.8125rem !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    color: var(--black) !important;  /* K21 R3 — weiss auf Orange ergibt 3,13:1 */
  }
  .team-card .member-name {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--black) !important;
  }
  .team-card .member-title {
    font-size: 0.75rem !important;
    color: var(--mid) !important;
    margin: 0 !important;
  }
  .team-card .member-role {
    font-size: 0.75rem !important;
    color: var(--charcoal) !important;  /* K21 R1 */
    font-weight: 600 !important;
    margin-top: 0.4rem !important;
  }
  .team-card p[style*="font-size:0.75rem"] {
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
    margin-top: 0.4rem !important;
  }
  /* Team grid: single column on mobile */
  .team-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* ── About traction 5-col grid → 2-col on mobile ───────────────────────── */
  .traction-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* ── Large flex gaps: reduce on mobile ─────────────────────────────────── */
  [style*="gap:4rem"] { gap: 1.5rem !important; }
  [style*="gap:3rem"] { gap: 1.25rem !important; }

  /* ── Press-kit: 4-col grid → 2-col ─────────────────────────────────────── */
  .press-kit-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  /* ── eu-infrastructure: high min-height sections ────────────────────────── */
  [style*="min-height:90vh"], [style*="min-height: 90vh"],
  [style*="min-height:75vh"], [style*="min-height: 75vh"],
  [style*="min-height:85vh"], [style*="min-height: 85vh"] {
    min-height: auto !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 3rem;
}

/* Die Spaltenueberschriften sind mit Paket 5 von h4 auf h3 gehoben, damit
   die Gliederung keine Ebene ueberspringt (WCAG 1.3.1). Beide Selektoren
   stehen hier, falls irgendwo noch ein h4 verbleibt. */
.footer-col h3,
.footer-col h4 {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.875rem;
  margin-bottom: 0.65rem;
  transition: color var(--duration-fast);
}

.footer-col a:hover {
  color: var(--orange);
}

.footer-bottom {
  background: white;
  border-top: 1px solid var(--border);
  padding: 2rem clamp(1.5rem, 4vw, 3rem);
}

.footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom img {
  height: 25px;
}

.footer-bottom span {
  font-size: 0.75rem;
  color: var(--mid);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}






/* ═══════════════════════════════════════════════════════════════════════════
   END OF STYLESHEET
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   REGION TOGGLE (EU / US Switcher)
   ══════════════════════════════════════════════════════════════ */

.region-toggle {
  /* Groesse und Abstand stehen hier einmal. Der weisse Schieber unten leitet
     seinen Weg daraus ab — vorher war er mit 36 px fest eingetragen, waehrend
     die Flaggen 38,4 px auseinanderstanden. Der Kreis sass dann 2,4 px links
     neben der US-Flagge. */
  --region-size: 32px;
  --region-gap: 0.4rem;
  display: flex;
  align-items: center;
  gap: var(--region-gap);
  padding: 0.35rem 0.5rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2rem;
  position: relative;
}

.region-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--region-size);
  height: var(--region-size);
  position: relative;
  z-index: 2;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.region-option:hover {
  transform: scale(1.1);
}

.region-flag {
  font-size: 1.25rem;
  line-height: 1;
  filter: grayscale(0.3) opacity(0.7);
  transition: filter 0.3s ease;
}

.region-option:hover .region-flag {
  filter: grayscale(0) opacity(1);
}

.toggle-slider {
  position: absolute;
  left: 0.5rem;
  width: var(--region-size);
  height: var(--region-size);
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.toggle-slider.active-eu {
  transform: translateX(0);
}

.toggle-slider.active-us {
  /* Ein Schritt ist genau eine Flaggenbreite plus ein Abstand. */
  transform: translateX(calc(var(--region-size) + var(--region-gap)));
}

/* Active state - make flag more vibrant */
.region-toggle[data-active="eu"] .region-option[data-region="eu"] .region-flag,
.region-toggle[data-active="us"] .region-option[data-region="us"] .region-flag {
  filter: grayscale(0) opacity(1);
}

/* Region toggle visible on all screen sizes — mobile toggle in menu */





/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FIXES — Added March 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Missing utility class (was referenced in HTML but undefined) ──────── */
.mb-4 { margin-bottom: 1.25rem; }

/* ── Skip to main content (accessibility) ─────────────────────────────── */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: var(--orange);
  color: var(--black);  /* K21 R3: Schrift auf Orange ist #1A1A1A, nie Weiss (5,56:1 statt 3,13:1) */
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-main:focus {
  top: 1rem;
}

/* ── Teamkarten ───────────────────────────────────────────────────────────
   Befund aus Paket 4: saemtliche .team-card-Regeln standen ausschliesslich in
   @media (max-width: …). Ab 769 px war die Seite damit ohne Layout — die
   Initialen-Kachel lief als 1104 px breiter oranger Balken durch die Zeile.
   Diese Grundregeln liefern das Desktop-Layout; die vorhandenen mobilen
   Regeln ueberschreiben sie unveraendert. Werte aus K21: --radius-md,
   8-px-Raster, Textrollen nach R4, Schrift auf Orange nach R3. */

.team-grid,
.team-grid-wide {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .team-grid,
  .team-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}

.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.team-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--black);      /* K21 R3: Schrift auf Orange ist --black */
  margin-bottom: 0.9rem;
  overflow: hidden;
}

/* Foto statt Initialen: fuellt den Kreis, statt ihn zu sprengen. */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.member-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
}

.member-title {
  font-size: 0.8125rem;
  color: var(--charcoal);
  margin: 0;
}

.member-tag {
  display: inline-block;
  align-self: flex-start;
  /* P6: auto statt 0.9rem — die Pille sitzt am Kartenfuss, sonst wandert sie
     mit der Textlaenge (Audit C-07, gemessen bis 23 px Versatz). */
  margin-top: auto;
  padding-top: 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.member-role {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--charcoal);   /* K21 R1 */
  margin-top: 0.4rem;
}

/* ── Formularfehler · WCAG 1.4.1, 3.3.1, 3.3.3, 4.1.3 ─────────────────────
   Der Fehler steht als Text am Feld, nicht nur als Rahmenfarbe. Farbe und
   Form kommen dazu, tragen die Information aber nicht allein. */
.form-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--status-fault-l);   /* 6,54:1 auf Weiss, 6,13:1 auf --warm */
}

.form-error::before {
  content: "";
  width: 3px;
  align-self: stretch;
  background: var(--status-fault-l);
  border-radius: 2px;
  flex-shrink: 0;
}

.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: var(--status-fault-l);
  border-width: 2px;
}

/* ── Reflow bei schmalen Flaechen · WCAG 1.4.10 ───────────────────────────
   Befund aus dem Audit vom 16.09.: Auf sieben Seiten lief Inhalt bei 320 px
   ueber den Viewport und wurde von einem Vorfahren mit overflow:hidden
   abgeschnitten — ohne Scrollbalken, also unerreichbar. Ursache sind inline
   gesetzte Raster mit fester Spaltenzahl, die keine mobile Fassung haben.

   Inline gesetzte Regeln lassen sich nur mit !important ueberschreiben. Das
   ist hier der Grund dafuer und kein Versehen: Die Alternative waere, 53
   Inline-Stile in 25 Dateien einzeln zu aendern. Wandern die Raster
   irgendwann in Klassen, faellt dieser Block ersatzlos weg. */

@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Inline gesetzte Flex-Zeilen ohne Umbruch schieben genauso quer. */
  [style*="display:flex"]:not([style*="flex-wrap"]),
  [style*="display: flex"]:not([style*="flex-wrap"]) {
    flex-wrap: wrap;
  }
}

/* Rasterelemente duerfen schrumpfen. Ohne min-width:0 haelt ein Kind seine
   Mindestinhaltsbreite und sprengt die Spalte — das war der eigentliche
   Grund fuer den Beschnitt, nicht die Spaltenzahl allein. */
[style*="grid-template-columns"] > *,
[style*="display:grid"] > *,
[style*="display: grid"] > * {
  min-width: 0;
}

/* ── Fokus · K21 R8 ───────────────────────────────────────────────────────
   Deckender Umriss 3 px, Abstand 3 px. Orange erreichte auf --warm, --cream
   und auf einer orangen Flaeche keine 3:1 (SC 1.4.11) und ist deshalb kein
   Fokusmittel. Die Farbe folgt der Flaeche: --black im hellen System,
   --white im dunklen. Einen flaechenunabhaengigen Wert gibt es nicht — das
   ist Konstruktion, kein Mangel (K21 v1.7 vom 10.09.2026). */
:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Dunkles System: Umriss in --white. Die dunklen Flaechen dieser Website
   sind --black und --dark-1, teils als Klasse, teils inline gesetzt. */
footer :focus-visible,
.footer-bottom :focus-visible,
.news-card-dark :focus-visible,
[style*="background:#1A1A1A"] :focus-visible,
[style*="background:#242426"] :focus-visible,
[style*="background:var(--black)"] :focus-visible,
[style*="background:var(--dark-1)"] :focus-visible,
[style*="background:#1a1a1a"] :focus-visible {
  outline-color: var(--white);
}

/* Auf einer orangen Flaeche, die selbst auf hellem Grund steht, bleibt der
   Umriss --black — 5,56:1 gegen Orange (K21 R8). */
.btn-orange:focus-visible,
.proof-strip-orange :focus-visible,
[style*="background:var(--orange)"] :focus-visible {
  outline-color: var(--black);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Nav dropdown: button reset + focus-within keyboard support ────────── */
button.nav-link {
  background: none;
  border: none;
  cursor: pointer;
  /* Explicitly match .nav-link — inherit alone doesn't override browser UA */
  font-family: var(--font), sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--charcoal);
  padding: 0.45rem 0.85rem;
  margin: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  text-align: left;
  transition: color var(--duration-fast), background var(--duration-fast);
  -webkit-appearance: none;
  appearance: none;
}
button.nav-link:hover {
  color: var(--black);
  background: rgba(0, 0, 0, 0.05);
}
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Escape setzte bisher nur aria-expanded auf false, waehrend focus-within
   das Menue sichtbar liess: Der ausgelesene Zustand widersprach dem Bild
   (WCAG 4.1.2, und 1.4.13 verlangt, dass sich Eingeblendetes schliessen
   laesst). Diese Klasse sticht focus-within aus, bis der Fokus die Gruppe
   verlaesst oder erneut geoeffnet wird. */
.nav-dropdown.is-dismissed .dropdown-menu,
.nav-dropdown.is-dismissed:focus-within .dropdown-menu,
.nav-dropdown.is-dismissed:hover .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Auf --warm erreicht --mid nur 4,32:1. Der fruehere Ersatz #666666 ist in
   K21 --chart-d4 und gehoert zum dunklen System (R7 verbietet den Wechsel
   ueber die Systemgrenze). --charcoal traegt hier mit 8,16:1. */
.sp-warm .text-muted,
.sp-warm .body,
.sp-warm p {
  color: var(--charcoal);
}

/* ── Prefers-reduced-motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.d1,
  .reveal.d2,
  .reveal.d3,
  .reveal.d4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Form wrapper (Formspree integration) ─────────────────────────────── */
.form-wrapper {
  display: contents; /* transparent wrapper — form behaves like a div */
}

/* ── Hero video facade ────────────────────────────────────────────────── */
.hero-video-facade {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANCHOR OFFSET — accounts for fixed nav (66px) + sticky subnav (~50px)
   Applies to sections with IDs used as anchor targets
   ═══════════════════════════════════════════════════════════════════════════ */
section[id] {
  scroll-margin-top: 130px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive inline grid overrides
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Catch-all: collapse ALL inline multi-column grids ── */
  /* Covers both "repeat(3,1fr)" and "repeat(3, 1fr)" (with/without spaces) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:3fr"],
  [style*="grid-template-columns: 3fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── Exceptions: keep 2-col for small spec/stat boxes ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:0.75rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:1rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap: 0.75rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap: 1rem"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* ── Spec grid 4-col divider strip → 2-col ── */
  [style*="grid-template-columns:repeat(4"][style*="gap:1px"],
  [style*="grid-template-columns: repeat(4"][style*="gap: 1px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Colour swatches → 2-col ── */
  [style*="grid-template-columns:repeat(4"][style*="gap:1.25rem"],
  [style*="grid-template-columns: repeat(4"][style*="gap: 1.25rem"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Photo gallery → 1-col ── */
  [style*="grid-template-columns:repeat(3"][style*="gap:1rem"],
  [style*="grid-template-columns: repeat(3"][style*="gap: 1rem"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Section padding ── */
  .sp, /* removed: sp-warm 3rem override was overriding mobile 1.75rem rule */

  /* ── Stats bar wrapping ── */
  [style*="display:flex"][style*="gap:3rem"][style*="justify-content:center"],
  [style*="display:flex"][style*="gap: 3rem"][style*="justify-content: center"] {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 0 0.5rem !important;
  }

  /* ── Overflow fix ── */
  .container { overflow-x: hidden; }
  img { max-width: 100% !important; }

  /* ── Subnav ── */
  .subnav-inner { padding: 0 1rem !important; gap: 0 !important; }
  .subnav-link { padding: 0.9rem 0.9rem !important; font-size: 0.8125rem !important; }

  /* ── Hero height ── */
  [style*="min-height:85vh"], [style*="min-height:100vh"] { min-height: 60vh !important; }

  /* ── Wide flex rows → wrap ── */
  [style*="display:flex"][style*="gap:4rem"],
  [style*="display:flex"][style*="gap: 4rem"] {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .footer-bottom-inner { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; }

  /* ── Max-width containers → full width ── */
  [style*="max-width:900px"],
  [style*="max-width: 900px"],
  [style*="max-width:800px"],
  [style*="max-width: 800px"],
  [style*="max-width:768px"],
  [style*="max-width: 768px"],
  [style*="max-width:700px"],
  [style*="max-width: 700px"] {
    max-width: 100% !important;
  }

  /* ── Fire card grid → single col on mobile ── */
  .fire-card-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── Fire/stat cards — full word wrap ── */
  .fire-card, .stat-card, .card {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* ── Inline fadeUp animations — disable on mobile ─────────────────────────
     Hero badges/headings use style="animation:fadeUp..." directly, which
     .reveal{animation:none} doesn't catch. Force them visible.           ── */
  [style*="animation:fadeUp"],
  [style*="animation: fadeUp"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem !important; }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:0.75rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:1rem"] {
    grid-template-columns: 1fr 1fr !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE SYSTEM
   All breakpoint overrides consolidated here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── max-width: 768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── REVEAL ANIMATIONS: disable on mobile (elements start invisible) ──── */
  .reveal,
  .reveal.d1, .reveal.d2, .reveal.d3, .reveal.d4, .reveal.d5 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* ── INLINE fadeUp ANIMATIONS: disable (not caught by .reveal rule) ───── */
  [style*="animation:fadeUp"],
  [style*="animation: fadeUp"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── SECTION PADDING ─────────────────────────────────────────────────── */
  .sp-warm, .sp-cream { padding: 1.75rem 0 1.5rem !important; }
  /* Dark sections need more breathing room */
  .sp { padding: 2rem 0 1.5rem !important; }

  /* ── SECTION HEAD ────────────────────────────────────────────────────── */
  .section-head { margin-bottom: 1.25rem !important; }
  .section-head h2 { font-size: clamp(1.875rem, 5vw, 2rem) !important; margin-bottom: 0.4rem !important; }
  .section-head p  { font-size: 1rem !important; line-height: 1.6 !important; }

  /* ── CONTAINER ───────────────────────────────────────────────────────── */
  .container { padding: 0 1rem !important; overflow-x: hidden; }

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  h1, .h1 { font-size: clamp(2.25rem, 7vw, 2.75rem) !important; line-height: 1.05 !important; word-break: break-word; }
  h2, .h2 { font-size: clamp(1.875rem, 5.5vw, 2.25rem) !important; }
  p, li   { font-size: 1rem !important; line-height: 1.75 !important; }

  /* ── HYPHENATION: disable to prevent off-\nline style breaks ─────────── */
  .card, .card p, .card h3, .card h4, p, li, h1, h2, h3, h4, a, span {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ── HERO SECTION: full dynamic viewport height ──────────────────────── */
  .hero-section {
    min-height: 100dvh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
  }
  .hero-section img[data-cms-edit="hero-image"] {
    height: 100% !important;
    min-height: 100dvh !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ── HERO CONTENT: nav-aware padding ────────────────────────────────── */
  .hero-content {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    flex: 1 !important;
    padding-top: 5.75rem !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)) !important;
  }
  /* Spacer: fixed height positions content in lower-middle of hero.
     flex: 0 0 auto + height keeps it fixed (unlike flex:1 which pushes
     content all the way to the absolute bottom).                       */
  .hero-content::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    height: 5vh;
    min-height: 24px;
    pointer-events: none;
  }

  /* ── HERO TEXT BLOCK: badge + h1 + p grouped together ───────────────── */
  .hero-text-block {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    margin-top: auto !important;
    padding-bottom: 0.75rem !important;
    padding-top: 0.75rem !important;
  }
  .hero-text-block h1 { margin-bottom: 0.85rem !important; margin-top: 0.5rem !important; }
  .hero-text-block p  { margin-bottom: 0 !important; }
  .hero-text-block > div:first-child { margin-bottom: 0.6rem !important; align-self: flex-start; }

  /* ── HERO ACTIONS: buttons pinned below text ─────────────────────────── */
  .hero-actions {
    flex-shrink: 0;
    padding-top: 0.75rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hero-actions > div {
    flex-direction: column !important;
    gap: 0.6rem !important;
    display: flex !important;
    width: 100% !important;
  }
  .hero-actions .btn, .hero-actions a.btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── SUBNAV HERO: shorter (55vh) on pages with subnav bar ───────────── */
  .hero-section.has-subnav {
    /* Override any inline min-height (85vh, 60vh etc) — use padding only */
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Subnav hero-content: use padding only, no forced min-height (causes overflow gap) */
  .hero-section.has-subnav .hero-content::before {
    height: 0 !important;
    min-height: 0 !important;
    flex: 0 0 0 !important;
  }
  .hero-section.has-subnav .hero-content {
    padding-top: 5.75rem !important;
    padding-bottom: 1.5rem !important;
    min-height: auto !important;
    max-height: none !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }
  .hero-section.has-subnav .hero-text-block { padding-bottom: 0.75rem !important; }
  .hero-section.has-subnav h1 { font-size: clamp(2.25rem, 5.5vw, 2.5rem) !important; margin-bottom: 0.5rem !important; line-height: 1.05 !important; }
  .hero-section.has-subnav p  { font-size: 1rem !important; line-height: 1.6 !important; margin-bottom: 0 !important; }
  .subhero.has-subnav { padding-top: 5.25rem !important; padding-bottom: 0.75rem !important; min-height: auto !important; }

  /* ── HERO MISC ───────────────────────────────────────────────────────── */

  /* First content section after any hero — guaranteed breathing room */
  .hero-section + section,
  .hero-section + .sp,
  .hero-section + .sp-warm {
    padding-top: 2rem !important;
  }
  /* us.html: padding below hero actions so first content isn't flush */
  .hero-actions {
    padding-bottom: max(1.75rem, env(safe-area-inset-bottom, 1.75rem)) !important;
  }

  /* Scroll indicator: hidden */
  .hero-scroll-indicator { display: none !important; }
  /* Market pills: left-aligned single line — Markets: 🇪🇺 Europe  🇺🇸 United States */
  .hero-market-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
    margin-top: 0.75rem !important;
    overflow: hidden;
  }
  /* "MARKETS:" label */
  .hero-market-pills > span:first-child {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-d3) !important;  /* K21 §2.6 — weiss mit 40 % ergab 3,83:1 */
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Pill links */
  .hero-pill {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.55rem !important;
    white-space: nowrap !important;
    flex-shrink: 0;
    border-radius: 100px !important;
  }
  .hero-section .btn { width: 100% !important; text-align: center !important; justify-content: center !important; }
  [style*="padding-top:8rem"],  [style*="padding-top: 8rem"]  { padding-top: 5.75rem !important; }
  [style*="padding-top:9rem"],  [style*="padding-top: 9rem"]  { padding-top: 5.75rem !important; }
  [style*="padding-top:5rem"],  [style*="padding-top: 5rem"]  { padding-top: 5.75rem !important; }
  [style*="padding-bottom:5rem"],  [style*="padding-bottom: 5rem"]  { padding-bottom: 1rem !important; }
  [style*="padding-bottom:4rem"],  [style*="padding-bottom: 4rem"]  { padding-bottom: 1rem !important; }
  [style*="z-index:1"][style*="padding-top:8rem"],
  [style*="z-index:1"][style*="padding-top:9rem"] { padding-top: 5.75rem !important; }
  .subhero { padding-top: 5rem !important; padding-bottom: 0.75rem !important; }

  /* ── MIN-HEIGHT RESET ────────────────────────────────────────────────── */
  [style*="min-height:100vh"], [style*="min-height: 100vh"],
  [style*="min-height:85vh"],  [style*="min-height: 85vh"],
  [style*="min-height:60vh"],  [style*="min-height: 60vh"] { min-height: auto !important; }

  /* ── SUBNAV ──────────────────────────────────────────────────────────── */
  .subnav { top: 66px !important; }
  .subnav-link { padding: 0.75rem 1rem !important; font-size: 0.8125rem !important; min-height: 44px; display: flex; align-items: center; }

  /* ── FIRST SECTION AFTER SUBNAV ─────────────────────────────────────── */
  .first-after-subnav { padding-top: 2rem !important; scroll-margin-top: 140px !important; }
  .first-after-subnav .section-head { margin-bottom: 1.25rem !important; }
  section[id] { scroll-margin-top: 80px !important; }
  /* Pages with subnav need more offset (nav 66px + subnav ~50px + buffer) */
  .has-subnav ~ section[id],
  .subnav ~ section[id],
  section[id] { scroll-margin-top: 140px !important; }
  /* scroll-padding-top for mobile with subnav */
  html { scroll-padding-top: 130px; }

  /* ── CARDS ───────────────────────────────────────────────────────────── */
  .card { padding: 1rem 1.1rem !important; }
  .card h3 { font-size: 1.125rem !important; margin-bottom: 0.35rem !important; }
  .card p  { font-size: 1rem !important; line-height: 1.55 !important; margin-bottom: 0.4rem !important; }
  .card-grid-2 { gap: 0.65rem !important; }
  .card-grid-3 { gap: 0.65rem !important; grid-template-columns: 1fr !important; }
  .card-grid-4 { gap: 0.6rem !important; grid-template-columns: 1fr 1fr !important; }

  /* ── STATS / PROOF STRIP ───────────────────────────────────────────
     Bis zum 18.09.2026 trug das Band vier kurze Labels und lief hier als
     seitlich scrollbare Leiste. Seit der Umstellung auf drei Kacheln sind
     die Labels laenger — die Leiste schnitt sie mitten im Wort ab und
     verlangte eine Wischgeste, die niemand macht, weil nichts anzeigt,
     dass rechts noch etwas steht. Drei Kacheln nebeneinander haben bei
     768 px je rund 250 px; das reicht fuer ein umbrechendes Label. */
  .proof-strip-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: visible !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .proof-strip-grid > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem 0.85rem !important;
    min-width: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: none !important;
    text-align: center !important;
  }
  .proof-strip-grid > div:last-child { border-right: none !important; }
  .proof-strip-grid [data-cms-edit="stat-number"],
  .proof-strip-grid [style*="font-size:2.25rem"] {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.15rem !important;
    color: var(--orange) !important;
  }
  .proof-strip-grid [data-cms-edit="stat-label"],
  .proof-strip-grid [style*="font-size:0.75rem"] {
    font-size: 0.75rem !important;
    color: var(--text-d3) !important;  /* K21 §2.6 */
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
  section:has(.proof-strip-grid) { padding: 0 !important; }

  /* ── ORANGE STATS STRIP (about/team) ─────────────────────────────────── */
  .proof-strip-orange { padding: 0.85rem 0 !important; }

  /* ── INLINE MARGINS: reduce large desktop values ─────────────────────── */
  [style*="margin-top:3rem"]    { margin-top: 1.5rem !important; }
  [style*="margin-top: 3rem"]   { margin-top: 1.5rem !important; }
  [style*="margin-top:2.5rem"]  { margin-top: 1.25rem !important; }
  [style*="margin-top:2rem"]    { margin-top: 1rem !important; }
  [style*="margin-bottom:3rem"] { margin-bottom: 1.5rem !important; }
  [style*="margin-bottom:2.5rem"] { margin-bottom: 1.25rem !important; }
  [style*="margin-bottom:2rem"] { margin-bottom: 1rem !important; }
  [style*="display:flex"][style*="justify-content:center"][style*="gap:3rem"] {
    gap: 1.5rem !important;
  }

  /* ── TAP TARGETS ─────────────────────────────────────────────────────── */
  .drop-link { padding: 0.9rem 0.75rem !important; }

  /* ── PARTNER LOGOS ───────────────────────────────────────────────────── */
  .logo-strip { gap: 0.5rem !important; }
  .logo-pill  { padding: 0.6rem 1rem !important; }
}

/* ── max-width: 600px ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .proof-strip-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-strip-dark-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Beleg-Streifen unter 481 px ──────────────────────────────────────────
   Der Streifen war als waagerechter Schieber angelegt. Weil die Beschriftungen
   nicht umbrachen, war er 1841 px breit: drei von vier Kennzahlen lagen ausser
   Sicht, ohne dass etwas auf das Wischen hinwies. Ein Beleg, den man nicht
   sieht, belegt nichts. Jetzt zwei Spalten, alles sichtbar, kein Schieber.  */
@media (max-width: 480px) {
  /* Seit dem 18.09.2026 traegt das Band drei Kacheln. Das fruehere
     zweispaltige Raster liess die dritte allein in der zweiten Reihe
     stehen, mit einem Loch daneben. Einspaltig gibt jeder Kachel die
     volle Breite — und damit dem laengsten Label die Zeilen, die es
     braucht. */
  .proof-strip-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
  }
  .proof-strip-grid > div {
    min-width: 0 !important;
    padding: 0.9rem 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .proof-strip-grid > div:last-child { border-bottom: none !important; }
  .proof-strip-grid [data-cms-edit="stat-label"],
  .proof-strip-grid [style*="font-size:0.75rem"] {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* ── max-width: 480px ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Die fruehere Verkleinerung auf 22 px ergab 113 px Breite und lag damit
     unter der Mindestgroesse von 160 px (K22). Sie ist entfernt. */
  .card-grid-4  { grid-template-columns: 1fr !important; }
}

/* ── max-width: 400px ─────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  /* 1,75rem waren 28 px und lagen unter dem Mobilminimum 36 px aus K21 §3.4. */
  h1, .h1 { font-size: 2.25rem !important; }
  .container { padding: 0 1rem !important; }
  /* Bis zum 18.09.2026 standen hier vier Kacheln nebeneinander; damit sie
     auf ein schmales Geraet passten, schrumpfte die Zahl auf 16 px. Seit
     der Umstellung steht unter 480 px je eine Kachel allein in voller
     Breite — die Verkleinerung hat keinen Grund mehr und verstiess gegen
     K21 R1: Orange auf dunklem Grund erst ab 16 pt, also rund 21 px.
     Die Zahl bleibt bei den 24 px aus der 768-px-Regel. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. SICHTBARE PLATZHALTER  (K12 §9 · Projektanweisung „GENAUIGKEIT")
   ───────────────────────────────────────────────────────────────────────────
   Fehlt fuer eine Angabe die Freigabe oder der Beleg, steht an ihrer Stelle
   ein sichtbarer Platzhalter — keine plausible Zahl. Die Komponenten sind
   bewusst zurueckhaltend: sie nehmen den Platz der Angabe ein, ohne Raster,
   Zeilenhoehe oder Kachelhoehe zu veraendern.

   Kontraste geprueft: #464646 auf #E8E3DE = 7,17:1 · #C9C9C9 auf #2E2E31 =
   8,2:1 — beide ueber WCAG AA (4,5:1).

   Verwendung
     <span class="sw-tbd">Zahl in Freigabe</span>      im Fliesstext
     <span class="sw-tbd-num">—</span>                 anstelle einer Kennzahl
     <span class="sw-tbd-tag">Freigabe offen</span>    unter dem Kachel-Label
     <div class="sw-tbd-block">…</div>                 anstelle einer Flaeche
   Auf dunklem Grund zusaetzlich .sw-tbd--dark setzen.
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-tbd.sw-tbd,
.sw-tbd-tag.sw-tbd-tag {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  background: var(--border);
  color: var(--charcoal);
  border-radius: 0.3em;
  padding: 0.1em 0.45em;
  font-family: var(--font);
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.01em;
  vertical-align: baseline;
}

/* Im Fliesstext: nimmt die Groesse des umgebenden Textes an. */
.sw-tbd { font-size: 0.8125rem; }

/* Platzhalter duerfen umbrechen. Mit white-space:nowrap standen lange
   Platzhalter bei 320 px ueber den Kasten hinaus und wurden still abgeschnitten. */
.sw-tbd-tag { font-size: 0.75rem; }

/* Unter einem Kachel-Label: bewusst klein, stoert die Kachelhoehe nicht. */
.sw-tbd-tag {
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.35rem;
}

/* Anstelle einer Kennzahl: erbt Schriftgroesse und -gewicht der Kachel,
   damit die Zeile exakt so hoch bleibt wie mit einer Zahl. */
.sw-tbd-num.sw-tbd-num {
  font: inherit;
  color: var(--charcoal);  /* --mid faellt auf getoenten Flaechen unter 4,5:1 */
  letter-spacing: 0.02em;
}

/* Anstelle einer Flaeche (Bild, Logoleiste, Diagramm). */
.sw-tbd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 5rem;
  padding: 1.25rem;
  background: var(--warm);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 8px);
  color: var(--charcoal);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}

.sw-tbd-block small {
  display: block;
  max-width: 44ch;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mid);
}

/* Dunkle Flaechen — eigener Satz, die Systeme werden nicht gemischt (K21 §2.0). */
.sw-tbd--dark.sw-tbd,
.sw-tbd--dark.sw-tbd-tag {
  background: #2E2E31;
  color: #C9C9C9;
}

.sw-tbd--dark.sw-tbd-num { color: #C9C9C9; }

.sw-tbd--dark.sw-tbd-block {
  background: #242426;
  border-color: #3A3A3E;
  color: #C9C9C9;
}

.sw-tbd--dark.sw-tbd-block small { color: #A8A8A8; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. VIDEO-FASSADE  (Einwilligung vor Drittanbieter)
   ───────────────────────────────────────────────────────────────────────────
   YouTube wird erst auf Klick geladen, dann ueber youtube-nocookie.com. Bis
   dahin geht keine Anfrage an Google und es wird nichts auf dem Endgeraet
   gespeichert (§ 25 TDDDG).
   ═══════════════════════════════════════════════════════════════════════════ */

.yt-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  background: #242426 var(--yt-poster, none) center/cover no-repeat;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  color: #FFFFFF;
  text-align: center;
}

.yt-facade-play {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
  flex-shrink: 0;
}

/* Abspieldreieck in --black — dieselbe Regel wie beim CTA (K21 R3). */
.yt-facade-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem;
  border-color: transparent transparent transparent var(--black);
}

.yt-facade-label {
  font-size: 1rem;
  font-weight: 700;
  max-width: 28ch;
  line-height: 1.35;
}

/* #C9C9C9 auf #242426 = 10,4:1 — dunkles System, K21 §2.6. */
.yt-facade-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: #C9C9C9;
}

.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play { transform: scale(1.06); }

/* ═══════════════════════════════════════════════════════════════════════════
   13. LAYOUTKLASSEN, DIE IM MARKUP STANDEN UND HIER FEHLTEN
   Befund des Audits vom 17.09.2026: 46 Klassen werden im Markup verwendet und
   waren weder hier noch in einem Seiten-<style> definiert — 160 Vorkommen auf
   9 Seiten. Zusammen mit dem Reset (`* { margin: 0; padding: 0 }`) fielen die
   betroffenen Behaelter auf null Abstand zusammen; gemessen standen sieben
   Abschnittsueberschriften auf team.html mit 0 px ueber dem Block darueber.

   Alle Werte hier stammen aus K21: Abstaende vom 8-px-Raster (§4.1), Radien
   aus §4.2, Bedienelementhoehen 40/48/56 aus §4.6, Farben ausschliesslich aus
   der Palette. Es ist kein neuer Wert erfunden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── team.html — Abteilungsabschnitte ──────────────────────────────────── */
.team-section {
  padding: 4rem 0 0;
}
.team-section:last-of-type {
  padding-bottom: 4rem;
}
.dept-header {
  margin-bottom: 2rem;
}
.dept-title {
  margin: 0;
}

/* ── careers.html — Stellenliste ───────────────────────────────────────── */
.region-anchor {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.region-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.25rem;
}
.region-title {
  margin: 0;
}
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.job-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.job-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
  cursor: pointer;
}
.job-card-info {
  min-width: 0;
}
.job-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.2;
}
.job-meta {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 0.75rem;
}
.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.job-card-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.job-toggle-icon {
  color: var(--mid);
  font-size: 0.75rem;
  line-height: 1;
}
.job-card-body {
  padding: 1.5rem;
  border-top: 1px solid var(--border);
}
.job-intro {
  margin-top: 0;
}
.job-role-desc {
  margin-top: 1rem;
}
.job-section {
  margin-top: 1.5rem;
}
.job-apply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.open-role-cta {
  margin-top: 2rem;
}
/* K21 §4.6: 40 px ist die kleine Stufe. 44 px Zielflaeche haelt der Abstand
   im Kopf der Karte. */
.btn-sm {
  min-height: 40px;
  padding: 0 1.25rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ── Zentrierter Fliesstext ab vier Zeilen ────────────────────────────
   Zentrierter Text laesst jede Zeile woanders anfangen. Bei einer Zeile
   ist das ein Vorteil, ab vier ein Hindernis: Das Auge sucht nach jeder
   Zeile den Anfang neu. Faustregel: zentrieren bis drei Zeilen, darueber
   linksbuendig.

   Der Absatz bleibt als Block mittig; nur der Text richtet sich links
   aus. Gesetzt wird die Klasse dort, wo bei 1440 px gemessen mehr als
   drei Zeilen entstehen — kurze Einleitungen bleiben zentriert. */
.lead-left {
  text-align: left !important;
  margin-left: auto;
  margin-right: auto;
}
/* ── Zentrierter Fliesstext, der erst auf dem Telefon zu lang wird ────
   15 Absaetze sind bei 1440 px drei Zeilen lang und bei 375 px vier bis
   sechs. Zentriert laesst jede Zeile das Auge den Anfang neu suchen; ab
   vier Zeilen kostet das spuerbar. Die Klasse haengt deshalb an der
   Breite: auf dem Schreibtisch bleibt der Absatz zentriert. */
@media (max-width: 560px) {
  .lead-left-s { text-align: left !important; }
}


/* ── charging-solutions.html — Merkmalsliste ───────────────────────────── */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.feature-item > h3 {
  margin-bottom: 0.5rem;
}

/* ── partners.html — Zweispalter und Kontaktmarken ─────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
}
.contact-aside {
  margin-top: 2rem;
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--black);
}

/* ── us-our-model.html — Kennzahlen und Bildstrecke ────────────────────── */
.subhero-content {
  padding: 2rem 0;
}
.problem-headline {
  margin-bottom: 1rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
/* K21 §2.3: Statusfarben tragen nur ihre echte Bedeutung. Eine Kennzahl ist
   kein Systemzustand, deshalb stehen alle Kennzahlen in `--black`. Die Klassen
   red/green/orange/normal/dark bleiben im Markup stehen, damit die Stelle
   auffindbar bleibt, wenn der K21-Eigentuemer eine Datenfarbe beschliesst. */
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--black);
  margin-bottom: 0.5rem;
}
.stat-number.red,
.stat-number.green,
.stat-number.orange,
.stat-number.normal,
.stat-number.dark {
  color: var(--black);
}
.stat-sources {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mid);
}
.news-collage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.news-caption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mid);
}

/* ── weitere Einzelfaelle ──────────────────────────────────────────────── */
.about-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  align-items: start;
}
.nyc-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.sp-hero {
  padding: 6rem 0 3rem;
}
.form-privacy {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mid);
}
.news-card-meta {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mid);
  margin-bottom: 0.5rem;
}

/* ── Zustand der Regionsauswahl ────────────────────────────────────────── */
/* Bis zum 17.09.2026 setzte das Skript `region-active`, und nichts im
   Stylesheet reagierte darauf: Die gewaehlte Region war nicht erkennbar.
   Nach K21 §2.3 traegt ein Zustand Farbe **und** Form **und** Text — hier
   einen deckenden Umriss und eine Flaeche, dazu aria-current im Markup. */
.region-option.region-active {
  border-radius: var(--radius-pill);
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  background: var(--orange-dim);
}

/* ── Rhythmus: eine Ueberschrift folgt nie unmittelbar auf einen Block ── */
/* Ergaenzt die Regel aus Abschnitt 1b um die Faelle, in denen der Vorgaenger
   kein Textelement, sondern ein Gitter oder eine Karte ist. :where() haelt die
   Spezifitaet bei 0, damit jede vorhandene Angabe gewinnt.                 */
:where(.card-grid-2, .card-grid-3, .card-grid-4, .team-grid, .team-grid-wide,
       .feature-list, .jobs-list, .stats-grid, .news-collage, .two-col)
  + :where(h2, h3, .dept-header, .region-anchor) {
  margin-top: 3rem;
}

/* ── Zielflaechen · WCAG 2.1 SC 2.5.8 ──────────────────────────────────── */
/* Ein Verweis, der allein in seinem Block steht, ist ein Bedienelement und
   kein Wort im Satz. Die Ausnahme fuer Verweise im Fliesstext gilt fuer ihn
   nicht; er braucht 24 x 24 px. Gemessen wurden 129 Faelle zwischen 14 und
   22 px Hoehe — Kontaktangaben, Quellenverweise, Brotkrumen und die
   „Learn more"-Zeilen. Umgesetzt ueber die Hoehe, nicht ueber den
   Innenabstand, damit keine Zeile umbricht.                              */
/* Verweise, die in einer Reihe oder im Text stehen: inline. */
a.link-arrow,
.breadcrumb a:not(.btn),
.subnav a:not(.btn),
a[href^="mailto:"]:not(.btn),
a[href^="tel:"]:not(.btn) {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* Verweise, die je eine eigene Zeile bilden — Fusszeilenspalten,
   Kontaktbloecke. Hier waere inline-flex falsch: die Zeilen wuerden
   nebeneinander laufen. `flex` mit `width: fit-content` haelt die eigene
   Zeile und begrenzt die Trefferflaeche auf den Text.                     */
.footer-col a:not(.btn),
.footer-links a:not(.btn),
.contact-block a:not(.btn) {
  min-height: 24px;
  display: flex;
  width: fit-content;
  align-items: center;
}

/* Verweislisten, die untereinander stehen — Inhaltsverzeichnisse. Jede Zeile
   ist ein eigenes Ziel; ohne Abstand beruehren sich die Trefferflaechen. Die
   44 px aus K21 §4.6 entstehen hier aus Hoehe plus Abstand.                */
.ethics-toc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ethics-toc a {
  display: flex;
  width: fit-content;
  align-items: center;
  min-height: 32px;
}

/* Verweise, die fuer sich stehen statt im Satz: Tabellenzellen, Kontakt-
   karten, nackte Adressen in Pflichtangaben. WCAG 2.5.8 nimmt nur Ziele im
   Fliesstext aus — diese hier standen bei 14 bis 20 px. */
td a:not(.btn), th a:not(.btn),
a[href^="https://wa.me/"]:not(.btn),
a[href^="https://www.swobbee"], a[href^="https://swobbee"],
.tag-pill a:not(.btn),
.impressum-block a:not(.btn), .legal-block a:not(.btn) {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* Ein Verweis als einziges Kind seines Absatzes oder seiner Listenzeile. */
p > a:only-child,
li > a:only-child,
div > a:only-child:not(.btn):not(.card):not(.news-card):not(.region-option) {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. FEINSCHLIFF AUS DEM AUDIT VOM 17.09.2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Textmass · K21 §3.8: 55–75 Zeichen je Zeile ──────────────────────────
   Gemessen wurden Absaetze bis 98 Zeichen. 68ch liegt in der Spanne und
   laesst jede vorhandene max-width gewinnen, weil :where() die Spezifitaet
   auf 0 haelt.                                                            */
:where(main p) {
  max-width: 68ch;
}
/* Ausgenommen: Text in Karten, Tabellen und Bedienflaechen bringt seine
   Breite aus dem Behaelter mit. */
:where(.card, .team-card, .job-card, .stat-card, td, th, .tag-pill, .card-tag) :where(p) {
  max-width: none;
}

/* ── Kartenreihen auf gleiche Hoehe ───────────────────────────────────────
   Vier Reihen standen mit bis zu 360 px Hoehenunterschied nebeneinander.
   Gitterkinder dehnen sich nur, wenn nichts anderes gesetzt ist.          */
:where(.card-grid-2, .card-grid-3, .card-grid-4, .team-grid, .team-grid-wide,
       .stats-grid, .nyc-case-grid, .news-collage, .feature-list) {
  align-items: stretch;
}
:where(.card-grid-2, .card-grid-3, .card-grid-4, .team-grid, .team-grid-wide,
       .stats-grid) > * {
  display: flex;
  flex-direction: column;
}
/* Die Marke am Fuss einer Karte wird nach unten geschoben, damit die Karten
   auf einer Linie enden — dasselbe Muster wie auf team.html. */
:where(.card, .stat-card) > :where(.card-tag, .tag-pill:last-child) {
  margin-top: auto;
}

/* ── Lead · neue vierte Textstufe, K21-Ergaenzung v1.8 ────────────────────
   18 px / 1,6 fuer die Einstiegszeile unter einer Ueberschrift. Begruendung
   im Aenderungsblatt: 47 Absaetze standen zwischen 16,8 und 18,4 px und
   hatten in der Skala keine Rolle.                                        */
.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--charcoal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. TEXTMASS, KARTENHOEHEN, AVATARE — zweiter Durchgang des Audits
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Textmass · K21 §3.8 ──────────────────────────────────────────────────
   36em entspricht rund 72 Zeichen je Zeile und liegt damit in der Spanne
   55–75. Gemessen wurden vorher bis zu 92 Zeichen. Die Angabe in em statt in
   ch, weil ch von der tatsaechlich geladenen Schrift abhaengt und bei der
   Ersatzschrift um ein Viertel abweicht.                                   */
main p,
.section-head p,
.hero-text-block p,
.job-intro,
.job-role-desc {
  max-width: 36em;
}
/* Text, der seine Breite aus dem Behaelter bezieht, behaelt sie. */
.card p,
.team-card p,
.job-card p,
.stat-card p,
.news-card p,
td p, th p,
.ethics-section p,
.form-privacy,
.stat-sources,
.news-caption {
  max-width: none;
}

/* ── Textmass, dritter Durchgang ──────────────────────────────────────────
   Die Ausnahme oben gilt, solange eine Karte schmal ist. Sobald das Gitter
   auf eine Spalte faellt, ist der Kartentext so breit wie die Seite und
   erreicht 87 Zeichen je Zeile — dann gilt wieder K21 §3.8.               */
@media (max-width: 900px) {
  .card p, .card li,
  .team-card p,
  .job-card p,
  .news-card p,
  .ethics-section p {
    max-width: 36em;
  }
}
/* Der Datenschutzhinweis unter einem Formular ist Fliesstext, kein
   Kartentext — er lief bis 92 Zeichen. */
.form-privacy,
.stat-sources {
  max-width: 36em;
}

/* Die Einstiegszeile unter einer Abschnittsueberschrift ist die Lead-Stufe. */
.section-head p {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ── Kartenreihen ─────────────────────────────────────────────────────────
   Auch Gitter ohne Klasse, die ihre Spalten inline setzen. */
:where(main [style*="grid-template-columns"]) {
  align-items: stretch;
}
.about-story-grid {
  align-items: stretch;
}

/* ── Avatare ──────────────────────────────────────────────────────────────
   Das Bild lief 17–25 px ueber den 56-px-Kreis hinaus und wurde oben und
   unten unkontrolliert beschnitten. `object-fit: cover` schneidet mittig. */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Spaltentitel der Fusszeile · Eyebrow-Rolle ───────────────────────────
   Die Titel der Fusszeilenspalten sind als <h3> ausgezeichnet und standen auf
   13,6 px. K21 §3.4 bindet die Groesse an die Ebene und verlangt fuer H3
   18–24 px — fuer eine Beschriftung ist das zu viel. K21 kennt fuer diese
   Rolle die Stufe Eyebrow: 12 px, Inter 600, Versalien, +0,08em. Sie gilt
   hier. Die Auszeichnung als <h3> bleibt, weil sie die Gliederung traegt.
   Der Widerspruch zwischen Ebene und Rolle ist im Auditbericht vermerkt und
   gehoert dem K21-Eigentuemer.
   Farbe: die Fusszeile ist eine dunkle Flaeche, also --text-d3 und nicht
   --mid (K21 R7, Systemgrenze).                                           */
.footer-col h3 {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-d3);
}

/* ── Avatare mit Foto ─────────────────────────────────────────────────────
   Das Bild steckt in einem <picture>; die Regel fuer <img> allein griff nicht. */
.avatar picture {
  display: contents;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Textmass, Nachtrag ───────────────────────────────────────────────────
   .job-intro und .ethics-section p wurden von der Ausnahmeliste wieder
   eingefangen; sie sind Fliesstext und kein Kartentext.                    */
.job-card .job-intro,
.job-card .job-role-desc,
.ethics-section > p,
.ethics-postamble p {
  max-width: 36em;
}