/* ==========================================================================
   Peoplemore — DACH Nearshoring Intelligence Hub
   Custom palette: cool, near-white, ascetic. Single petrol/ink-blue accent.
   Fonts: Archivo (display) + Inter (body), self-hosted, SIL OFL 1.1 — siehe
   assets/vendor/fonts/. Ersetzt Fontshare Switzer/Satoshi (Entscheidung
   2026-08-11: Fontshare-Lizenz erlaubt kein eigenes Font-Serving, §02 FF EULA).
   ========================================================================== */

/* ---------- Type scale ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.375rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 160ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 640px;
  --content-default: 920px;
  --content-wide: 1240px;
  --content-full: 100%;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
}

/* ---------- Color: light (default) — cool ascetic near-white ---------- */
:root,
[data-theme='light'] {
  --color-bg: #f6f8f9;
  --color-surface: #ffffff;
  --color-surface-2: #fbfcfd;
  --color-surface-offset: #eef1f4;
  --color-surface-offset-2: #e6eaee;
  --color-surface-dynamic: #dde3e8;
  --color-divider: #e3e8ec;
  --color-border: #d3dade;

  --color-text: #10161c;
  --color-text-muted: #57626c;
  --color-text-faint: #66717b; /* A1: 2,41:1 → jetzt ≥4,5:1 auf --color-surface/--color-bg */
  --color-text-inverse: #f6f8f9;

  --color-primary: #0b4f6c;
  --color-primary-hover: #083c53;
  --color-primary-active: #062a3a;
  --color-primary-highlight: #dbe7ec;

  --color-warning: #9a5b1f;
  --color-warning-hover: #7a481a;
  --color-warning-highlight: #ecdfcd;

  --color-error: #a5334a;
  --color-error-hover: #82273a;
  --color-error-highlight: #ecd6dc;

  --color-success: #2e6b47;
  --color-success-hover: #235536;
  --color-success-highlight: #d6e6dc;

  --color-notification: #a5334a;
  --color-notification-highlight: #ecd6dc;

  /* Data-viz categorical palette (countries / series) */
  --dv-1: #0b4f6c; /* Poland — primary petrol */
  --dv-2: #2f86a8; /* Czechia — mid blue */
  --dv-3: #6a8b98; /* Romania — slate */
  --dv-4: #9fb4bd; /* Portugal — pale blue-gray */
  --dv-5: #171b20; /* Germany — near-black baseline */
  --dv-6: #b9812f; /* India — warm amber (offshore) */
  --dv-7: #47707d; /* Austria */
  --dv-8: #7d98a1; /* Switzerland */
  --dv-accent: #0b4f6c;
  --dv-accent-2: #b9812f;

  --shadow-sm: 0 1px 2px oklch(0.15 0.02 235 / 0.06);
  --shadow-md: 0 6px 20px oklch(0.15 0.02 235 / 0.08);
  --shadow-lg: 0 16px 40px oklch(0.15 0.02 235 / 0.12);
}

/* ---------- Color: dark ---------- */
[data-theme='dark'] {
  --color-bg: #0b0f13;
  --color-surface: #10151b;
  --color-surface-2: #141a21;
  --color-surface-offset: #171d24;
  --color-surface-offset-2: #1c232b;
  --color-surface-dynamic: #232b33;
  --color-divider: #232a31;
  --color-border: #2c343c;

  --color-text: #e6ebef;
  --color-text-muted: #9aa6b0;
  --color-text-faint: #7c8892; /* A1: 3,63:1 → jetzt ≥4,5:1 auf --color-surface/--color-bg */
  --color-text-inverse: #10151b;

  --color-primary: #5db3d3;
  --color-primary-hover: #7cc3de;
  --color-primary-active: #99cfe6;
  --color-primary-highlight: #1c3946;

  --color-warning: #d99a52;
  --color-warning-hover: #e2ac6d;
  --color-warning-highlight: #3a2f20;

  --color-error: #dc7f95;
  --color-error-hover: #e397a8;
  --color-error-highlight: #3a2530;

  --color-success: #74bb90;
  --color-success-hover: #8fc9a6;
  --color-success-highlight: #1f3327;

  --color-notification: #dc7f95;
  --color-notification-highlight: #3a2530;

  --dv-1: #5db3d3;
  --dv-2: #7fc3dd;
  --dv-3: #9fb0bb;
  --dv-4: #c3cfd6;
  --dv-5: #eef1f4;
  --dv-6: #dba75c;
  --dv-7: #8fb4c2;
  --dv-8: #b7c9cf;
  --dv-accent: #5db3d3;
  --dv-accent-2: #dba75c;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.wrap--narrow {
  max-width: var(--content-default);
}
section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
.section-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 640px) {
  .wrap,
  .section-inner {
    padding-inline: var(--space-4);
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-block;
}

h1,
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h2,
.h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h3,
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}
h4,
.h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}
p,
li {
  color: var(--color-text-muted);
  max-width: 68ch;
}
.lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 46ch;
  line-height: 1.5;
}
strong {
  color: var(--color-text);
  font-weight: 600;
}
.text-tight {
  max-width: none;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 210; /* > .mobile-nav (200) / .mobile-nav-scrim (190): keeps #nav-toggle clickable
                   to CLOSE the drawer — it previously sat under the open drawer panel, a dead
                   click found during mobile verification (pre-existing, not new). */
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .wrap {
  max-width: 1480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}
.brand svg {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}
.brand-sub {
  color: var(--color-text-faint);
  font-weight: 400;
  font-size: var(--text-xs);
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-3);
  margin-left: var(--space-1);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Bugfix (2026-08-11, horizontal overflow 390/360px): war vorher flex-shrink:0.
     Auf schmalen Phones ist das CTA-Label je nach Sprache länger als der Restplatz
     (en "Find your sourcing model" > de/pl) — mit flex-shrink:0 konnte diese
     Gruppe NICHT schrumpfen und drückte den Hamburger (.nav-toggle) über den
     rechten Viewport-Rand hinaus, was #site-header .wrap in den horizontalen
     Scroll zog. Jetzt darf die Gruppe als Ganzes schrumpfen; theme-toggle und
     nav-toggle bleiben über eigenes flex-shrink:0 quadratisch fix, nur der
     CTA-Text darf umbrechen (.wrap hat dafür min-height statt height). */
  min-width: 0;
}
.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
/* L4: Sonne/Mond wechseln mit [data-theme] statt eines statischen Sonnen-Icons. */
.theme-icon-moon {
  display: none;
}
[data-theme='dark'] .theme-icon-sun {
  display: none;
}
[data-theme='dark'] .theme-icon-moon {
  display: block;
}

/* Sprachumschalter (Pass 3, i18n) — dezent, an theme-toggle angelehnt: eine
   Pille pro Locale, aktiv hervorgehoben. URL-basiert (?lang=), kein State. */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 3px;
}
.lang-switcher a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  line-height: 1.4;
}
.lang-switcher a:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.lang-switcher a[aria-current="true"] {
  color: var(--color-text-inverse);
  background: var(--color-primary);
}
.lang-switcher-mobile {
  align-self: flex-start;
  margin-top: var(--space-4);
  border-color: var(--color-divider);
}
@media (max-width: 480px) {
  .lang-switcher a {
    padding: var(--space-1) var(--space-2);
  }
}
@media (min-width: 901px) and (max-width: 1140px) {
  /* Header enthält seit der main-nav-Entfernung nur noch Marke + theme-toggle +
     lang-switcher + CTA — bei schmalen Desktop-/Tab-Fenstern (z. B. 1024px)
     trotzdem etwas Luft schaffen: Marke/Sprachschalter/CTA/Wrap-Innenabstand
     verengen. */
  .site-header .wrap {
    padding-inline: var(--space-4);
    gap: var(--space-2);
  }
  .brand-sub {
    display: none;
  }
  .lang-switcher a {
    padding: var(--space-1) 6px;
  }
  .header-actions {
    gap: var(--space-1);
  }
  .theme-toggle {
    width: 32px;
    height: 32px;
  }
  .header-actions .btn-sm {
    padding: var(--space-2) var(--space-2);
    font-size: 0.625rem;
  }
}
@media (max-width: 900px) {
  /* Sprachumschalter lebt ab hier nur noch im mobilen Drawer (.lang-switcher-mobile) —
     im Header wäre er das dritte Element neben Theme-Toggle/CTA/Burger und drängt. */
  .header-actions > .lang-switcher {
    display: none;
  }
  /* M1: CTA im sticky Header brach auf ≤900px in zwei Zeilen — lebt ab hier nur noch
     als hervorgehobene .drawer-cta am Ende des Drawers. */
  .header-actions > .btn-primary {
    display: none;
  }
  /* Bugfix (24px+ horizontaler Overflow auf 320/390px, Regression aus der
     main-nav-Entfernung): .brand-sub ("DACH Nearshoring Intelligence Hub")
     ist white-space:nowrap und flex-shrink:0 — ohne main-nav als Platzhalter
     dazwischen zieht das die gesamte .site-header .wrap in den horizontalen
     Scroll, sobald der Header auf schmale Phones schrumpft. */
  .brand-sub {
    display: none;
  }
}

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
}
.nav-toggle:hover { color: var(--color-text); background: var(--color-surface-offset); }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(300px, 82vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: calc(var(--space-6) + 56px) var(--space-5) var(--space-6);
  transform: translateX(100%);
  visibility: hidden;
  /* A3: visibility bleibt beim ÖFFNEN sofort auf "visible" (delay 0) — vorher lief
     visibility mit derselben 220ms wie transform, wodurch der Drawer-Inhalt für den
     Browser noch bis zu einem Frame lang "nicht gerendert" (nicht fokussierbar) war,
     obwohl das Panel bereits sichtbar hereinschob. Beim SCHLIESSEN bleibt visibility
     dagegen bis zum Ende der Slide-out-Animation auf "visible" (delay 220ms), damit
     der Inhalt während der Animation nicht abrupt aus dem Fokus-/A11y-Baum fällt. */
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms ease, visibility 0s linear 0s;
}
.mobile-nav a {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.mobile-nav a:hover,
.mobile-nav a.active {
  color: var(--color-primary);
}
/* M1: hervorgehobene CTA am Ende des Drawers — ersetzt die aus dem Header (≤900px)
   entfernte Sourcing-Modell-CTA. margin-top:auto schiebt sie ans Ende der Flex-Spalte. */
.drawer-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.mobile-nav-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, black 45%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  z-index: 190;
}
.mobile-nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}
@media (min-width: 901px) {
  .mobile-nav, .mobile-nav-scrim { display: none; }
}
@media (max-width: 480px) {
  .site-header .wrap {
    padding-inline: var(--space-3);
  }
  .header-actions {
    gap: var(--space-2);
  }
  .header-actions .btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: 0.6875rem;
  }
  .brand {
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.2;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
}
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-text-faint);
}
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: clamp(var(--space-16), 10vw, var(--space-24));
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-divider);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: start; /* H1: KPI-Karten (2×2) sitzen jetzt in der rechten Spalte statt darunter */
}
.hero h1 {
  margin-bottom: var(--space-5);
  max-width: 16ch;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.hero-meta-item {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.hero-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ==========================================================================
   KPI cards (Executive Overview)
   ========================================================================== */
.kpi-grid {
  /* H1: 2×2-Raster in der rechten Hero-Spalte statt vierspaltig unter dem gesamten Hero. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.kpi-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.kpi-delta {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.kpi-delta.up {
  color: var(--color-error);
}
.kpi-delta.down {
  color: var(--color-success);
}
@media (max-width: 560px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Source citation chip — used everywhere a number appears
   ========================================================================== */
.src {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-text-faint);
}
.src:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.src::before {
  content: '↗';
  font-size: 0.85em;
}
.src-line {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.card-src {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

/* ==========================================================================
   Sticky chapter TOC
   ========================================================================== */
.toc-bar {
  position: sticky;
  top: 72px;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
@media (max-width: 900px) {
  /* Fix (Pass 3): EIN Navigationssystem pro Breakpoint. Unter 900px
     übernimmt ausschließlich Hamburger/Drawer (.mobile-nav) dieselbe
     Kapitelliste — der sticky Kapitel-Streifen entfällt, sonst zeigt das
     Gerät zwei Navigationen mit identischen Zielen gleichzeitig. */
  .toc-bar {
    display: none;
  }
}
.toc-bar .wrap {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-3);
}
.toc-bar .wrap::-webkit-scrollbar {
  display: none;
}
.toc-item {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.toc-item .num {
  color: var(--color-text-faint);
}
.toc-item:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.toc-item.active {
  color: var(--color-text-inverse);
  background: var(--color-primary);
}
.toc-item.active .num {
  color: var(--color-text-inverse);
  opacity: 0.7;
}

/* ==========================================================================
   Chapter sections
   ========================================================================== */
.chapter {
  border-bottom: 1px solid var(--color-divider);
}
.chapter,
.hero {
  /* N2-UX: Anker-Sprung aus TOC/Drawer landete unter dem sticky Header + toc-bar. */
  scroll-margin-top: 140px;
}
@media (max-width: 900px) {
  .chapter,
  .hero {
    scroll-margin-top: 80px;
  }
}
.chapter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}
.chapter-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.chapter-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-12);
}
.chapter-grid > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .chapter-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
.chapter-sidebar .lede {
  margin-bottom: var(--space-6);
}
.stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.stat-list-item {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-3);
}
.stat-list-item .num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  display: block;
}
.stat-list-item .lbl {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Cards / panels
   ========================================================================== */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.panel + .panel {
  margin-top: var(--space-6);
}
.chart-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.chart-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.chart-canvas-wrap {
  position: relative;
  height: 280px;
  width: 100%;
  min-width: 0;
}
.chart-canvas-wrap canvas {
  max-width: 100%;
}
.chart-canvas-wrap.tall {
  height: 380px;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}
@media (max-width: 800px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 800px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.mini-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.mini-card .eyebrow { display: block; margin-bottom: var(--space-2); }

/* ==========================================================================
   Tables
   ========================================================================== */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 0;
  position: relative;
}
/* T1/T2: erste Spalte (Kennzahl/Modell) bleibt beim horizontalen Scrollen sichtbar,
   Gradient-Maske am rechten Rand signalisiert weiteren Inhalt. Sticky statt Selektor
   (Entscheidung: Tabelle zeigt weiterhin alle Standorte gleichzeitig, keine Bramka). */
.data-table-wrap.has-sticky-col table.data-table th:first-child,
.data-table-wrap.has-sticky-col table.data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
}
.data-table-wrap.has-sticky-col table.data-table th:first-child {
  z-index: 3;
  background: var(--color-surface-offset);
}
.data-table-wrap.has-sticky-col::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to left, var(--color-surface), transparent);
  pointer-events: none;
}
.table-scroll-hint {
  margin-bottom: var(--space-2);
}
table.data-table {
  font-size: var(--text-sm);
}
table.data-table th,
table.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
table.data-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  background: var(--color-surface-offset);
  position: sticky;
  top: 0;
}
table.data-table td {
  color: var(--color-text);
}
table.data-table tr:last-child td {
  border-bottom: none;
}
table.data-table .muted {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

/* ==========================================================================
   Comparator (country picker)
   ========================================================================== */
.country-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.country-picker-msg {
  font-size: var(--text-xs);
  color: var(--color-warning);
  min-height: 1.4em;
  margin-bottom: var(--space-4);
  opacity: 0;
  transition: opacity 150ms ease;
}
.country-picker-msg.show {
  opacity: 1;
}
.country-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.country-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.country-chip.selected {
  border-color: var(--color-text);
  color: var(--color-text);
  background: var(--color-surface-offset);
  font-weight: 600;
}
.country-chip[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   Regulation cards
   ========================================================================== */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 800px) {
  .reg-grid {
    grid-template-columns: 1fr;
  }
}
.reg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.reg-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.reg-card-head .tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.reg-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.reg-point {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  position: relative;
}
.reg-point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}
.reg-point .src {
  margin-left: var(--space-2);
}

/* ==========================================================================
   Sourcing model cards
   ========================================================================== */
.model-grid {
  display: grid;
  /* minmax(0, 1fr) statt bare 1fr (Bugfix, 24px horizontaler Overflow bei 1440px):
     ein bare `1fr`-Track hat als implizite Mindestgröße den min-content der
     Karte — bei sechs Karten mit unterschiedlich langem DE-Fließtext (u. a.
     model-legal-note) summierten sich die Track-Mindestbreiten auf mehr als
     die verfügbare .model-grid-Breite, die dritte Spalte lief dadurch über
     den Container hinaus. minmax(0, 1fr) erzwingt eine Mindestbreite von 0 und
     lässt den Text stattdessen normal umbrechen. Kein `align-items: start`
     mehr: die Karten sollen die volle Zeilenhöhe ausfüllen (card-src hat
     bereits margin-top:auto), statt bei kürzerem Inhalt eine "Lücke" unterhalb
     der Karte offenzulassen. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .model-grid {
    grid-template-columns: 1fr;
  }
}
.model-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
}
.model-card:hover,
.model-card.highlighted {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.model-card dt {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  text-transform: uppercase;
}
.model-card dd {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  hyphens: auto; /* N-9: lange DE-Komposita brachen mitten im Wort in der schmalen Spalte */
}

/* ==========================================================================
   Persona-Segmentierung (Kapitel 01)
   ========================================================================== */
.persona-section {
  margin-bottom: var(--space-8);
}
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .persona-grid {
    grid-template-columns: 1fr;
  }
}
.persona-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.persona-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.persona-card .eyebrow {
  margin-bottom: 0;
}
.persona-pain {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.persona-topics {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.persona-cta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
}

/* ==========================================================================
   Skalierbarkeits-Checkliste (Kapitel 06)
   ========================================================================== */
.scale-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.scale-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.scale-item:hover {
  border-color: var(--color-primary);
}
.scale-item.is-checked {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.scale-item input[type='checkbox'] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}
.scale-item-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.scale-item-detail {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.scale-score {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.scale-score-num {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 3.5ch;
}
.scale-score-tier {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 52ch;
}
.scale-score.tier-low { border-color: var(--color-error); background: var(--color-error-highlight); }
.scale-score.tier-low .scale-score-num { color: var(--color-error); }
.scale-score.tier-mid { border-color: var(--color-warning); background: var(--color-warning-highlight); }
.scale-score.tier-mid .scale-score-num { color: var(--color-warning); }
.scale-score.tier-high { border-color: var(--color-success); background: var(--color-success-highlight); }
.scale-score.tier-high .scale-score-num { color: var(--color-success); }
@media (max-width: 600px) {
  .scale-score { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ==========================================================================
   TCO Calculator
   ========================================================================== */
.preset-btn-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.preset-btn {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.preset-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.preset-btn.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.calc-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--space-8);
}
.calc-grid > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
}
.calc-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.field-group label {
  display: block;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
select,
input[type='number'],
input[type='email'],
input[type='text'] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}
select:focus,
input:focus {
  border-color: var(--color-primary);
}
.role-row {
  display: grid;
  grid-template-columns: 1fr 72px 28px;
  gap: var(--space-2);
  align-items: center;
}
.role-row .remove-role {
  color: var(--color-text-faint);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
}
.role-row .remove-role:hover {
  color: var(--color-error);
  background: var(--color-error-highlight);
}
.add-role-btn {
  align-self: flex-start;
}

.calc-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.result-headline {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.result-headline .metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}
.result-headline .metric span {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.assumption-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.assumption-list li {
  padding-left: var(--space-4);
  position: relative;
  color: var(--color-text-muted);
}
.assumption-list li::before {
  content: '·';
  position: absolute;
  left: var(--space-1);
  color: var(--color-text-faint);
}
.risk-callout {
  background: var(--color-warning-highlight);
  border: 1px solid color-mix(in oklab, var(--color-warning) 35%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: flex;
  gap: var(--space-3);
}
.risk-callout .icon {
  flex-shrink: 0;
  color: var(--color-warning);
  margin-top: 2px;
}

/* ==========================================================================
   Selector quiz
   ========================================================================== */
.quiz-progress {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
}
.quiz-progress span {
  flex: 1;
  height: 3px;
  background: var(--color-divider);
  border-radius: var(--radius-full);
}
.quiz-progress span.done {
  background: var(--color-primary);
}
.quiz-question {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-6);
  max-width: 40ch;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-option {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
}
.quiz-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.quiz-result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

/* ==========================================================================
   Soft email gate (UI mock)
   ========================================================================== */
.gate-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--color-bg) 40%, black 25%);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-4);
}
.gate-overlay.open {
  display: flex;
}
.gate-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 460px;
  width: 100%;
  max-height: min(88vh, 820px);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.gate-modal .close-gate {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-faint);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
}
.gate-modal .close-gate:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}
.gate-modal h3 {
  margin-bottom: var(--space-2);
}
.gate-modal p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.gate-modal form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gate-badge {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-4);
  text-align: center;
}
.gate-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 300;
}
.gate-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-block: var(--space-16);
  background: var(--color-surface-offset);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-10);
}
@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}
.footer-col h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  margin-bottom: var(--space-4);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer-col a:hover {
  color: var(--color-primary);
}
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ==========================================================================
   Roadmap / phase 2 note
   ========================================================================== */
.roadmap-strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.roadmap-item {
  flex: 0 0 220px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--color-text-faint);
}
.roadmap-item .tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  display: block;
  margin-bottom: var(--space-2);
}
.roadmap-item h4 {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.roadmap-item p {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ==========================================================================
   Kapitel 07 — Risiko, Governance & Exit
   ========================================================================== */

/* R1 "Wann nicht" / R3 Lock-in — geteilte Karten-Optik mit dt/dd wie .model-card */
.notfit-grid,
.lockin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 800px) {
  .notfit-grid,
  .lockin-grid {
    grid-template-columns: 1fr;
  }
}
.notfit-case {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.notfit-case h4 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.notfit-case dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.notfit-case dt {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  text-transform: uppercase;
  margin-top: var(--space-2);
}
.notfit-case dd {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* R2 "Sieben Positionen" — nummerierte Liste */
.numbered-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.numbered-item {
  display: flex;
  gap: var(--space-4);
}
.numbered-item-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.numbered-item h4 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.numbered-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* R4 Governance — drei Ebenen als mini-card-Grid */
.governance-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 800px) {
  .governance-levels {
    grid-template-columns: 1fr;
  }
}

/* R5 RACI-Tabelle — Legende, dann Karten statt breiter Tabelle ab 640px
   (responsiv — auf Mobile Karten statt breiter Tabelle).
   data-label auf jedem <td> (aus app.js) liefert die Kartenbeschriftung.
   Bugfix (2026-08-11, horizontal overflow 390/360px): die Selektoren hier
   MÜSSEN mindestens Spezifität (0,2,1) haben, sonst gewinnt die Basisregel
   `table.data-table th, table.data-table td { white-space: nowrap; }`
   (Spezifität 0,1,2 > 0,1,1 von `.raci-table td`) unabhängig von der
   Reihenfolge im Stylesheet — die 5. Spalte („dispute“, seit Ergänzung der
   4. Spalte „anchor“) bleibt dann einzeilig, sprengt die Card-Breite mit
   overflow:visible (Zeile oben) nach außen und zieht document.body in den
   horizontalen Scroll. Deshalb hier IMMER auf `.raci-table-wrap .raci-table …`
   scopen, nicht nur `.raci-table …`. */
@media (max-width: 640px) {
  .raci-table-wrap {
    border: none;
    overflow: visible;
  }
  .raci-table-wrap .raci-table,
  .raci-table-wrap .raci-table thead,
  .raci-table-wrap .raci-table tbody,
  .raci-table-wrap .raci-table tr,
  .raci-table-wrap .raci-table td {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .raci-table-wrap .raci-table thead {
    display: none;
  }
  .raci-table-wrap .raci-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .raci-table-wrap .raci-table td {
    border-bottom: none;
    padding: var(--space-2) 0;
  }
  .raci-table-wrap .raci-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-faint);
    margin-bottom: 2px;
  }
  /* T1: unter 640px wird die RACI-Tabelle zur Kartenliste (oben) — die sticky-erste-
     Spalte-Behandlung von .has-sticky-col ist hier ohne Wirkung/Sinn und wird zurückgesetzt. */
  .raci-table-wrap.has-sticky-col table.data-table th:first-child,
  .raci-table-wrap.has-sticky-col table.data-table td:first-child {
    position: static;
    background: transparent;
    box-shadow: none;
  }
  .raci-table-wrap.has-sticky-col::after {
    display: none;
  }
}

/* R7 Exit-Readiness-Check */
.exitcheck-panel {
  background: var(--color-primary-highlight);
  border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
}
.exit-dimension + .exit-dimension {
  margin-top: var(--space-6);
}
.exit-dimension h4 {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.exit-question + .exit-question {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.exit-question-text {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  max-width: 62ch;
}
.exit-answer-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.exit-answer-btn {
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.exit-answer-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.exit-answer-btn.is-active.tone-yes {
  border-color: var(--color-success);
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.exit-answer-btn.is-active.tone-partial {
  border-color: var(--color-warning);
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.exit-answer-btn.is-active.tone-no {
  border-color: var(--color-error);
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.exit-gaps h4 {
  font-size: var(--text-sm);
}
/* E1: Zähler + Fortschrittsbalken für den "pusty"/"częściowy"-Zustand des Exit-Checks */
.exitcheck-counter {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.exitcheck-progress-track {
  margin-top: var(--space-3);
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-divider);
  overflow: hidden;
  max-width: 320px;
}
.exitcheck-progress-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 200ms ease;
}

/* R8 Risiken */
.gaps-status-badge {
  margin-inline-start: var(--space-2);
}

/* Methodik-Block — Änderungsprotokoll */
.changelog-entry {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.changelog-entry:first-child {
  border-top: none;
}
.changelog-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
@media (max-width: 560px) {
  .changelog-entry {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* Utility */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.text-faint { color: var(--color-text-faint); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
.badge.onshore { color: var(--dv-5); border: 1px solid var(--color-border); }
.badge.nearshore { color: var(--color-primary); background: var(--color-primary-highlight); }
.badge.offshore { color: var(--dv-6); background: color-mix(in oklab, var(--dv-6) 15%, var(--color-surface-offset)); }

/* ==========================================================================
   Europa-Karte (Kapitel 03)
   ========================================================================== */
.map-metric-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  padding: 3px;
}
.map-metric-toggle button {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: var(--transition-interactive);
  white-space: nowrap;
}
.map-metric-toggle button:hover { color: var(--color-text); }
.map-metric-toggle button.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.map-canvas-wrap {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
#europe-map { width: 100%; height: auto; display: block; }
#europe-map .country-bg {
  fill: var(--color-surface-offset-2);
  stroke: var(--color-surface-2);
  stroke-width: 0.6;
}
#europe-map .country-active {
  stroke: var(--color-surface);
  stroke-width: 1.1;
  cursor: pointer;
  opacity: 1;
  transition: filter 120ms ease, opacity 120ms ease, stroke 120ms ease, stroke-width 120ms ease;
}
#europe-map .country-active:hover {
  filter: brightness(1.12);
}
/* Zwei-Wege-Sync mit den Vergleichs-Chips: ausgewählt = voll sichtbar + Kontur,
   nicht ausgewählt = gedimmt, aber weiterhin anklickbar (siehe toggleCountrySelection). */
#europe-map .country-active.is-in-comparison {
  opacity: 1;
  stroke: var(--color-text);
  stroke-width: 1.6;
}
#europe-map .country-active.is-muted {
  opacity: 0.38;
}
#europe-map .country-active.is-muted:hover {
  opacity: 0.62;
}
/* .picked = zuletzt für das Detail-Panel angeklicktes Land (unabhängig vom
   Vergleichs-Status) — eigener Akzentring, damit beide Zustände unterscheidbar bleiben. */
#europe-map .country-active.picked {
  stroke: var(--color-primary);
  stroke-width: 2.4;
}
[data-theme='dark'] #europe-map .country-active.is-muted {
  opacity: 0.3;
}
#europe-map .country-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--color-text-inverse);
  pointer-events: none;
  text-anchor: middle;
}
.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 100ms ease;
  z-index: 20;
  white-space: nowrap;
}
.map-tooltip.show { opacity: 1; }
.map-tooltip strong { color: var(--color-text-inverse); display: block; margin-bottom: 2px; }
.map-legend {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-divider);
}
.map-legend .legend-bar {
  width: 90px;
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary-highlight), var(--color-primary));
}
.map-detail {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-height: 280px;
}
.map-detail-empty {
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 240px;
}
.map-detail h4 { margin-bottom: var(--space-1); }
.map-detail .map-detail-type { margin-bottom: var(--space-4); }
.map-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}
.map-detail dt { color: var(--color-text-faint); }
.map-detail dd { color: var(--color-text); margin: 0; }
@media (max-width: 800px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-metric-toggle { width: 100%; overflow-x: auto; }
}

/* ==========================================================================
   KPI delta — dritter, neutraler Ton (nicht jede Delta ist
   eindeutig "gut" oder "schlecht")
   ========================================================================== */
.kpi-delta.neutral {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Bitkom mini-stat panel (Kapitel 01) — ersetzt die entfernte
   Lünendonk-Technologie-Nachfrage-Grafik
   ========================================================================== */
.mini-stat-grid {
  display: grid;
  /* minmax(0, 1fr) statt bare 1fr (Bugfix, horizontaler Overflow auf 320px):
     gleiche Ursache wie .model-grid — bare `1fr`-Tracks nehmen den min-content
     des Panels (Zahl + Label) als Mindestbreite, das sprengt bei zwei engen
     Spalten auf 320px den Container. minmax(0, 1fr) lässt den Text normal
     umbrechen statt die Spalte zu sprengen. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.mini-stat {
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.mini-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.mini-stat-lbl {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 700px) {
  .mini-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Perspective callouts (Datenlücken offen ausgewiesen / Bramka SME)
   ========================================================================== */
.perspective-callout {
  background: var(--color-primary-highlight);
  border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);
}
.perspective-callout .eyebrow { color: var(--color-primary); }
.perspective-callout p { font-size: var(--text-sm); }

.sender-note {
  background: var(--color-surface-offset);
}
.sender-note p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ==========================================================================
   Kalkulator v2 — Annahmen-Details, Slider, Ergebnisblöcke A/B
   ========================================================================== */
.calc-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.calc-details summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.calc-details[open] summary { margin-bottom: var(--space-3); }
.calc-details input[type='range'] {
  width: 100%;
  accent-color: var(--color-primary);
}
.chip-assumption,
.chip-derived {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  margin-inline-start: var(--space-1);
}
.chip-derived {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
.metric-row {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.metric-row .metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}
.metric-row .metric span {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.calc-block-unavailable {
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.calc-warning {
  margin-top: var(--space-4);
  background: var(--color-warning-highlight);
  border: 1px solid color-mix(in oklab, var(--color-warning) 35%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.calc-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.calc-note-warning {
  color: var(--color-warning);
}
.calc-qualifier {
  /* K1: "Obergrenze der Differenz"-Hinweis direkt an die Zahl angebunden statt als
     unauffällige Fußnote (text-faint) irgendwo darunter. */
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--color-warning) 35%, transparent);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.checklist-download-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ==========================================================================
   Mateusz-Kontaktblock (×3 im Hub)
   ========================================================================== */
.mateusz-block {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-8);
}
.mateusz-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
}
.mateusz-intro {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.mateusz-identity {
  display: flex;
  flex-direction: column;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.mateusz-identity span { color: var(--color-text-faint); }
.mateusz-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}
.mateusz-contact-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Gate form — Formularfelder, Consent-Checkboxen, Art.-13-Infoblock (L-01/L-03)
   ========================================================================== */
.gate-field-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.gate-consent {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--space-2);
}
.gate-consent input { margin-top: 3px; flex-shrink: 0; }
.gate-consent .text-faint { display: block; margin-top: 2px; }
.gate-legal-info {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-faint);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* ==========================================================================
   Sourcing-Modell-Karten — rechtlicher Zusatzhinweis (AÜG, Staff Augmentation)
   ========================================================================== */
.model-legal-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  line-height: 1.5;
}

/* ==========================================================================
   Kalkulator Block B — Fließtext-Zeilen
   ========================================================================== */
.calc-b-line {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.calc-b-line strong {
  font-family: var(--font-display);
}