/* ==========================================================================
   Reformpartnerschaft — Bundeskanzleramt Österreich
   Design system v2 — modern, calm, high-end (Linear/Vercel/Stripe register).
   ALL colors, type, spacing, radii and shadows are tokens in :root below.
   Components must reference tokens only — never raw values.
   ========================================================================== */

/* Source Sans Pro (heute "Source Sans 3") ist laut CD-Manual die
   Open-Source-Webschrift des Bundes und kommt hier durchgängig zum Einsatz. */
/* Source Sans 3 liegt als variable Schrift im Paket (assets/fonts/) und wird
   nicht mehr von Google nachgeladen — die Seite kommt damit ohne Verbindung zu
   Dritten aus. Das Corporate Design des Bundes nennt Source Sans Pro als die
   Open-Source-Schrift der Bundesseiten; Source Sans 3 ist deren Nachfolger.
   Lizenz: SIL Open Font License 1.1, siehe assets/fonts/OFL.txt */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;          /* eine Datei deckt alle Gewichte ab */
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.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: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext.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;
}

:root {
  /* ---- Color tokens ---- */
  /* Kampagnen-Hintergrundtöne (aus dem CD-Paket "Website.zip") */
  --tone-cool-1: #D9E3E8;
  --tone-cool-2: #E4EBF0;
  --tone-cool-3: #EFF4F7;
  --tone-warm-1: #E9E4DF;
  --tone-warm-2: #F0ECE8;
  --tone-warm-3: #F6F4F0;

  --color-bg: var(--tone-cool-3); /* page background */
  --color-bg-warm: var(--tone-warm-3);
  --color-surface: #FFFFFF;       /* cards, alternating sections */
  --color-ink: #0A0A0A;           /* primary text */
  --color-text-secondary: #52525B;/* body copy on light */
  /* Prüfbericht 1.4.3: ein Grau für alles, nicht heller als #52525B (7,26:1 auf Weiß). */
  --color-text-muted: #52525B;
  --color-border: #DCE4EA;        /* hairlines, card borders */
  --color-border-strong: #C9D4DC;

  /* Rot laut CD (Website/Farben/Rot.png). Die CD gibt zwei Werte vor:
     #E1320F erreicht auf Weiß genau AA (4,50:1), #A72702 erreicht AAA (7,16:1). */
  /* Prüfbericht 1.4.3: durchgängig #A72702 (7,16:1 auf Weiß) statt #E1320F. */
  --color-accent: #A72702;
  --color-accent-strong: #A72702;
  --color-accent-hover: #7C1D01;
  --color-accent-tint: #FDEEEC;   /* chip / icon backgrounds — aus dem CD-Rot gemischt */
  --color-accent-ring: #F1A393;   /* focus ring halo */

  --color-inverse: #FFFFFF;
  --color-footer-bg: #196278;   /* laut Feedback 2, RGB 25/98/120 */
  --color-footer-text: #A1A1AA;

  --color-success-bg: #ECFDF5;
  --color-success-text: #047857;
  --color-error-bg: #FEF2F2;
  --color-error-text: #B91C1C;

  /* Semantic aliases used across components */
  --color-text: var(--color-ink);
  --color-primary: var(--color-accent);
  --color-primary-hover: var(--color-accent-hover);
  --color-focus: var(--color-accent);

  /* ---- Typography tokens ---- */
  --font-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tracking-tight: -0.015em; /* kept mild — Jost caps collide below this */
  --tracking-snug: -0.01em;
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.26rem + 0.56vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 3rem);
  --step-4: clamp(2.4rem, 2rem + 2vw, 4rem);
  --step-5: clamp(3rem, 2.4rem + 2.8vw, 5rem);

  /* ---- Spacing scale (8pt) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* ---- Layout tokens ---- */
  --container-max: 1200px;
  /* Eckig laut Feedback: Bilder und Kästen ohne Rundung. Buttons, Chips und
     Kreise nutzen feste Werte (999px bzw. 50%) und bleiben davon unberührt. */
  --radius-sm: 0;
  --radius-btn: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-soft: 0 1px 2px rgba(10, 10, 10, 0.04), 0 4px 12px rgba(10, 10, 10, 0.06);
  --shadow-lift: 0 4px 12px rgba(10, 10, 10, 0.06), 0 16px 40px rgba(10, 10, 10, 0.10);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  /* Hoehe der ueberlagernden Kopfleiste — Bezug fuer Sprungziele und
     die klebende Kapitelleiste. */
  --kopf-hoehe: 96px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
h3, h4 { letter-spacing: var(--tracking-snug); }
p { margin: 0; }
figure { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: hidden until keyboard-focused (WCAG 2.4.1) */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-2);
  z-index: 300;
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  padding: 0.75em 1.2em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-lift);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-5); }
}

/* ---- Eyebrow: numbered section label ---- */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow-num {
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0;
}

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }
.section-head { max-width: 640px; margin-bottom: var(--space-6); }
.section-head h2 { font-size: var(--step-3); margin-top: var(--space-2); }
.section-head p { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--step-1); line-height: 1.6; }
.section-head.center { margin-inline: auto; text-align: center; }
/* Feedback S. 5: mehr Luft ober- und unterhalb, Überschrift einzeilig.
   Die Standardbreite von 640 px zwingt „Meilensteine der Reformpartnerschaft"
   in zwei Zeilen. */
.section-head--meilensteine {
  max-width: none;
  margin-top: var(--space-7);
  margin-bottom: var(--space-6);
}
.section-head--meilensteine h2 { text-wrap: balance; }
@media (min-width: 700px) {
  .section-head--meilensteine h2 { white-space: nowrap; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8em 1.5em;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: var(--color-inverse); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-lift); }
.btn-ghost { background: rgba(255,255,255,0.08); color: var(--color-inverse); border-color: rgba(255,255,255,0.4); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.8); }
.btn-outline { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-ink); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: var(--space-2);
  transition: padding var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled { padding-block: 0.6rem; }

/* Basel-style: one white pill bar holding logo, nav and CTA */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  /* mehr Luft ober- und unterhalb des Logos (Logogröße unverändert) */
  /* rechts wie oben/unten, damit der Button rundum gleich viel Luft hat */
  padding: 0.95rem 0.95rem 0.95rem 1.4rem;
  box-shadow: var(--shadow-soft);
}

/* Feedback S. 1: Logo braucht mehr Platz und rückt etwas nach rechts */
.brand { display: inline-flex; align-items: center; min-width: 0; margin-left: var(--space-2); padding-right: var(--space-3); }
.brand-logo { height: 44px; width: auto; flex-shrink: 0; object-fit: contain; }
@media (max-width: 480px) { .brand-logo { height: 38px; } }

.nav-links { display: none; align-items: center; gap: var(--space-3); }
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 0.65rem 0.5rem; /* comfortable pointer/touch target */
  transition: color var(--duration-base);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a[aria-current="page"] { color: var(--color-ink); font-weight: 600; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-actions .btn-primary { display: none; min-height: 42px; padding-block: 0.6em; }
@media (min-width: 1024px) { .nav-actions .btn-primary { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  border-radius: 999px;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-bg);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-4) var(--space-4);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav .btn { margin-top: var(--space-4); align-self: flex-start; border-bottom: none; font-size: 0.9375rem; }
.mobile-nav .nav-toggle { color: var(--color-ink); }

/* ==========================================================================
   Hero — full-screen video, giant wordmark across the bottom
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--color-inverse);
  overflow: hidden;
  background: var(--color-ink);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video,
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.3) 45%, rgba(10,10,10,0.62) 100%);
}

/* Headline block: centered both axes, hyphenated over two lines (insta post) */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Gruppe aus H1, Unterzeile und Button mittig — die Abstände dazwischen
     sind dadurch gleich groß (siehe Feedback 2, S. 1). */
  margin-block: auto 0;
  padding-top: calc(var(--space-8) + 1rem);
  text-align: center;
  /* Feedback S. 1: Die Wortmarke ist breiter als der 1200-px-Inhaltsrahmen.
     Blieb sie darin, begann sie an dessen linker Kante und lief rechts über
     den Bildschirmrand hinaus — genau das abgeschnittene Bild aus dem Feedback.
     Mit voller Breite zentriert sie sauber und behält Luft zum Rand. */
  max-width: none;
  /* 2 × 48 px Polsterung würden zwischen 768 und 1024 px erneut zum Überlaufen
     führen — hier deshalb schmaler. */
  padding-inline: 16px;
}
.hero-inner .eyebrow { color: rgba(255,255,255,0.8); margin-bottom: var(--space-2); }

.hero-wordmark {
  /* Die längste Zeile braucht rund das 13,8-Fache der Schriftgröße. Bei
     16 px Rand je Seite passt sie mit 6,4vw − 2px auf jeder Breite; die
     Obergrenze liegt bei 5,5rem statt zuvor 6,5rem. */
  font-size: clamp(1.375rem, calc(6.4vw - 2px), 5.5rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-inverse);
  text-align: center;
}
.hero-wordmark .line { display: block; white-space: nowrap; }

/* Kleine Displays (bis 460 px): „Die Reformpartnerschaft" passt dort in keiner
   vertretbaren Größe einzeilig hinein — bei 320 px wären nur 20 px Schrift
   möglich. Deshalb Umbruch erlauben und die Größe am längsten Wort ausrichten
   („Reformpartnerschaft" braucht das 11,6-fache der Schriftgröße). */
@media (max-width: 460px) {
  .hero-inner { padding-inline: 16px; }
  /* umgebrochen: Maß nimmt das längste Wort (Faktor 11,6) */
  .hero-wordmark { font-size: calc(7.5vw - 2.4px); }
  .hero-wordmark .line { white-space: normal; overflow-wrap: break-word; }
}

/* Bottom row: lede left, CTA right (Basel pattern) */
/* Feedback S. 1: Sub-Headline mittig unter der Headline, Button darunter */
.hero-foot {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  margin-bottom: auto;
  padding-bottom: var(--space-4);
}
.hero-lede {
  /* Feedback S. 1: mittig wie die Headline, eine Spur größer und fett */
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  line-height: 1.4;
  color: var(--color-inverse);
  max-width: 46ch;
  text-align: center;
}
.hero-foot .btn-primary { box-shadow: var(--shadow-lift); }

/* Pause/play control for the background video (WCAG 2.2.2) */
.video-toggle {
  position: absolute;
  z-index: 2;
  top: calc(var(--space-8) + 1.5rem);
  right: var(--space-3);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(10,10,10,0.45);
  color: var(--color-inverse);
  backdrop-filter: blur(6px);
  transition: background var(--duration-base), border-color var(--duration-base);
}
.video-toggle:hover { background: rgba(10,10,10,0.7); border-color: rgba(255,255,255,0.9); }

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.fact-row .fact strong {
  display: block;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.fact-row .fact span { font-size: 0.875rem; color: var(--color-text-muted); }

/* ==========================================================================
   Reform topics — clickable orbit (5 nodes on a ring, detail in the center)
   ========================================================================== */
.orbit {
  position: relative;
  width: min(620px, 92vw);
  aspect-ratio: 1;
  margin-inline: auto;
}
/* dashed ring through the node centers (radius 42%) */
.orbit::before {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: clamp(84px, 16vw, 104px);
  height: clamp(84px, 16vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  color: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-base), color var(--duration-base), box-shadow var(--duration-base), border-color var(--duration-base);
}
/* 30 px = native Größe der CD-Icons; darunter fällt die 1er-Kontur
   unter einen Bildpunkt und wirkt ausgewaschen. */
.orbit-node svg { width: 30px; height: 30px; color: var(--color-accent); transition: color var(--duration-base); }
.orbit-node .orbit-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; }
.orbit-node:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: var(--shadow-lift); border-color: var(--color-border-strong); }
.orbit-node[aria-selected="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-inverse);
  box-shadow: var(--shadow-lift);
}
.orbit-node[aria-selected="true"] svg { color: var(--color-inverse); }

.orbit-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9%;
}
.orbit-center h3 { font-size: clamp(1rem, 2.4vw, 1.375rem); }
.orbit-center p { margin-top: 0.6rem; color: var(--color-text-secondary); font-size: clamp(0.8125rem, 1.6vw, 0.9375rem); line-height: 1.5; }
.orbit-center.is-swapping { animation: orbit-swap 260ms var(--ease-out); }
@keyframes orbit-swap {
  from { opacity: 0.2; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-center.is-swapping { animation: none; }
}

/* Small screens: nodes become a wrapped row, detail becomes a card below */
@media (max-width: 700px) {
  .orbit { width: 100%; aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
  .orbit::before { display: none; }
  .orbit-node { position: static; transform: none; }
  .orbit-node:hover { transform: scale(1.04); }
  .orbit-center {
    position: static;
    transform: none;
    width: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-lg);
    margin-top: var(--space-3);
    padding: var(--space-4);
    order: 10;
  }
  .orbit-center.is-swapping { animation: none; }
}

/* ==========================================================================
   Quote banner
   ========================================================================== */
.banner {
  position: relative;
  padding-block: var(--space-8);
  color: var(--color-inverse);
  overflow: hidden;
}
.banner-media { position: absolute; inset: 0; z-index: -2; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; }
.banner-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.6) 100%);
}
.banner-quote {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.banner-quote svg { color: var(--color-accent-ring); width: 36px; height: 36px; margin-bottom: var(--space-3); }
.banner-quote blockquote {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
}
.banner-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* ==========================================================================
   Timeline — numbered stepper. Desktop: 4 equal columns on one line,
   the connector runs exactly through the circle centers (top: 20px,
   inset by half a column = 12.5%). Mobile: vertical rail at x = 20px.
   ========================================================================== */
.steps {
  position: relative;
  display: grid;
  gap: var(--space-5);
  max-width: 1100px;
  margin-inline: auto;
}
.steps::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: var(--color-border-strong);
}
.step { position: relative; padding-left: 60px; }
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  color: var(--color-accent-strong);
  font-weight: 700;
  font-size: 0.9375rem;
}
.step .phase {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  padding-top: 0.35rem;
}
.step h3 { margin-top: 0.4rem; font-size: var(--step-1); }
.step p { margin-top: 0.5rem; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.6; }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .steps::before {
    /* exactly the center of the first/last column: (100% - 3 gaps) / 8 */
    left: calc((100% - 3 * var(--space-4)) / 8);
    right: calc((100% - 3 * var(--space-4)) / 8);
    top: 20px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .step { padding-left: 0; text-align: center; }
  .step-num { position: relative; margin-inline: auto; }
  .step .phase { padding-top: var(--space-2); }
}

/* ==========================================================================
   Contact — single e-mail field (no full form)
   ========================================================================== */
.email-form {
  max-width: 560px;
  margin-inline: auto;
  text-align: left;
}
.email-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-ink);
}
.email-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.email-row input {
  flex: 1 1 240px;
  min-height: 48px;
  padding: 0.7em 1em;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.email-row input::placeholder { color: var(--color-text-muted); }
.email-row input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.form-note {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.form-note a { color: var(--color-accent-strong); text-decoration: underline; }
.contact-alt {
  margin-top: var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}
.contact-alt a { color: var(--color-accent-strong); font-weight: 500; text-decoration: underline; }
.form-msg {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: 0.9rem;
}
.form-msg.is-visible { display: block; }
.form-msg.is-error { background: var(--color-error-bg); color: var(--color-error-text); }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Helle Fußzeile: führt das Flächenmuster der Abschnitte weiter und läuft
   nach unten ins Weiße aus — dieselbe Behandlung wie .section--muster-hell. */
.site-footer {
  background: var(--color-footer-bg);
  color: rgba(255,255,255,0.82);
  padding-block: var(--space-6) var(--space-4);
}
@media (max-width: 700px) {

}
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); } }
/* Logo oben, deutlicher Abstand, dann die Zwischenüberschrift direkt
   über dem Absatz — so verlangt es das Feedback. */
/* Logo oben auf Höhe der Spaltenüberschriften, darunter mit Abstand die
   Markenzeile und der Absatz. */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-bottom: 0.6rem; }
/* Grundlinie des Logos auf die Grundlinie der Spaltenüberschriften rechts
   ziehen (Feedback S. 3). Das Logo ist 22 px hoch, die Überschrift sitzt mit
   ihrer Grundlinie 15 px unter der Spaltenoberkante — daher −9 px. */
.footer-logo { width: 220px; max-width: 100%; height: auto; margin-top: -9px; }
/* wie die übrigen Spaltenüberschriften gesetzt — das bindet die vier Spalten
   typografisch zusammen */
.footer-brand span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.footer-col .footer-titel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: var(--space-2);
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a, .footer-col p { font-size: 0.9375rem; color: rgba(255,255,255,0.82); transition: color var(--duration-base); }
.footer-col a:hover { color: #FFFFFF; }
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.22);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: 0.8125rem;
  /* 0,72 ergäbe auf dem Blau nur 4,47:1 — knapp unter AA */
  color: rgba(255,255,255,0.82);
}

.back-to-top {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--duration-base), transform var(--duration-base), background var(--duration-base);
  z-index: 60;
}
.back-to-top:hover { background: var(--color-accent); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---- Reveal-on-scroll base state (JS adds .is-visible) ---- */
[data-reveal] { opacity: 0; transform: translateY(20px); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Legal pages ---- */
.legal-page { padding-block: calc(var(--space-8) + 2rem) var(--space-7); max-width: 720px; margin-inline: auto; }
.legal-page h1 { font-size: var(--step-4); }
.legal-page h2 { font-size: var(--step-1); margin-top: var(--space-5); }
.legal-page p, .legal-page li { color: var(--color-text-secondary); margin-top: var(--space-2); line-height: 1.65; }
.legal-page ul { list-style: disc; padding-left: 1.4em; }
.legal-page a { color: var(--color-accent-strong); }
.legal-page a:hover { color: var(--color-accent-hover); }
.legal-page .placeholder-note {
  margin-top: var(--space-5);
  padding: var(--space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Orbit center link
   ========================================================================== */
.orbit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.75rem;
  min-height: 44px;
  padding: 0.5em 1em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  border-radius: 999px;
  transition: background var(--duration-base), color var(--duration-base);
}
.orbit-link:hover { background: var(--color-accent-tint); color: var(--color-accent-hover); }

/* ==========================================================================
   Centered CTA row under sections
   ========================================================================== */
.section-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--done { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--pending { background: #FEF3C7; color: #92400E; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Subpage header + table of contents chips
   ========================================================================== */
/* Seitenkopf ohne Foto (Zeitplan): trägt dasselbe Kampagnenmuster wie die
   Titelfelder der übrigen Unterseiten, damit der Verlauf durchgehend bleibt. */
.page-head {
  padding-block: calc(var(--space-8) + 3rem) var(--space-6);
  background: var(--muster-ecke) bottom right / cover no-repeat, #FFFFFF;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 700px) {
  .page-head { background-size: 200% auto, auto; }
}
.page-head h1 { font-size: var(--step-4); margin-top: var(--space-2); }
.page-lede {
  margin-top: var(--space-3);
  max-width: 640px;
  font-size: var(--step-1);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.toc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.toc-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: border-color var(--duration-base), color var(--duration-base), background var(--duration-base);
}
.toc-chips a:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-tint); }

/* ==========================================================================
   Topic blocks (themen.html)
   ========================================================================== */
.topics { padding-block: var(--space-7); max-width: 860px; }
.topic {
  padding: var(--space-5);
  background: var(--color-surface);
  /* obere Kante in Kampagnenrot — gibt der sonst kahlen Fläche Halt */
  border-top: 3px solid var(--color-accent);
  border-inline: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  scroll-margin-top: 110px;
}
.topic-head { display: flex; align-items: center; gap: var(--space-3); }
/* Icon ohne Kästchen, dafür größer — es trägt die Karte optisch. */
.topic-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.topic-icon svg { width: 52px; height: 52px; }
.topic-head h2 { font-size: var(--step-2); margin-top: 0.25rem; }
.topic-lead {
  margin-top: var(--space-3);
  font-size: var(--step-1);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.topic h3 {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.measure-list { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.measure-list li {
  position: relative;
  padding-left: 1.6em;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.measure-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;          /* Feedback S. 2: eine Spur kleiner */
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
/* Feedback S. 2: Unterpunkte mit Gedankenstrich statt Punkt */
.sub-list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sub-list li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--color-accent);
  font-weight: 700;
}
.measure-list strong { color: var(--color-ink); }

/* ==========================================================================
   Vertical stepper variant (zeitplan.html)
   ========================================================================== */
.steps--vertical { max-width: 760px; padding-block: var(--space-3); }
@media (min-width: 900px) {
  .steps--vertical { grid-template-columns: 1fr; gap: var(--space-6); }
  .steps--vertical::before {
    left: 19px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 2px;
    height: auto;
  }
  .steps--vertical .step { padding-left: 60px; text-align: left; }
  .steps--vertical .step-num { position: absolute; left: 0; top: 0; margin-inline: 0; }
  .steps--vertical .step .phase { padding-top: 0.35rem; }
}
.steps--vertical .step h2 { font-size: var(--step-2); margin-top: 0.4rem; letter-spacing: var(--tracking-snug); }
.steps--vertical .step .measure-list { margin-top: var(--space-3); }

/* ==========================================================================
   Kampagnen-Facetten: dezentes Pfeil-/Flächenmuster (CD "Hintergründe")
   ========================================================================== */
:root {
  --muster-flaeche:      url("../img/bg/bg-flaeche.png");
  --muster-flaeche-hell: url("../img/bg/bg-flaeche-hell.png");
  --muster-band:         url("../img/bg/bg-band.png");
  --muster-ecke:         url("../img/bg/bg-ecke.png");
  /* Sujet-Auflage der Agentur: 2560x1680, obere 240 px halbtransparent */
  --muster-hg3:          url("../img/bg/hg3-gesamt.png");
}

/* Flächenmuster für die Startseite.
   Alle vier Muster laufen in eine weiße Kante aus und werden deshalb in ihrer
   Originalproportion auf Sektionsbreite gelegt — nicht „cover". Sonst würde das
   Facettenmotiv bei den langen Abschnitten auf ein Vielfaches vergrößert. */
.section--muster      { background: var(--muster-flaeche)      top    center / 100% auto no-repeat, #FFFFFF; }
.section--muster-hell { background: var(--muster-flaeche-hell) top    center / 100% auto no-repeat, #FFFFFF; }
.section--ecke        { background: var(--muster-ecke)         bottom right  / 100% auto no-repeat, #FFFFFF; }
.section--band        { background: var(--muster-band)         bottom center / 100% auto no-repeat, #FFFFFF; }

@media (max-width: 700px) {
  /* Auf schmalen Displays wäre das Muster in Originalbreite nur ein dünner
     Streifen — hier den Ausschnitt vergrößern statt die Proportion zu brechen. */
  .section--muster,
  .section--muster-hell,
  .section--ecke,
  .section--band { background-size: 200% auto, auto; }
}

/* ==========================================================================
   Waagrechter Zeitstrahl (nur Startseite — die Fassung mit Bildern
   steht auf zeitplan.html und nutzt weiterhin .milestones)
   ========================================================================== */
.timeline-h {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  max-width: 1100px;
  margin-inline: auto;
}
.tl-item { position: relative; padding-top: 42px; }
/* Verbindungslinie: je Eintrag vom eigenen Punkt bis zum nächsten.
   So sitzt sie bei jeder Spaltenbreite exakt, ohne Prozentrechnerei. */
.tl-item::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 16px;
  width: calc(100% + var(--space-3) - 16px);
  height: 2px;
  background: var(--color-border-strong);
}
.tl-item:last-child::after { content: none; }
.tl-item::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--color-accent);
}
.tl-item--future::before { border-color: var(--color-border-strong); background: var(--color-bg); }
.tl-date {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.tl-item--future .tl-date { color: var(--color-text-muted); }
.tl-item h3 { margin-top: 0.3rem; font-size: var(--step-1); }
.tl-item p { margin-top: 0.5rem; color: var(--color-text-secondary); line-height: 1.6; font-size: 0.9375rem; }

/* Schmalere Fenster: auf die senkrechte Darstellung zurückfallen */
@media (max-width: 900px) {
  .timeline-h { grid-template-columns: 1fr; gap: 0; max-width: 640px; }
  .tl-item { padding-top: 0; padding-left: 52px; padding-bottom: var(--space-5); }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-item::before { top: 5px; }
  /* Linie wird senkrecht: vom eigenen Punkt bis zum nächsten */
  .tl-item::after {
    top: 21px;
    left: 7px;
    width: 2px;
    height: calc(100% - 16px);
  }
}

/* Breites Sitzungsfoto auf der Startseite */

.section--warm { background: var(--color-bg-warm); }
.fact-row--center {
  justify-content: center;
  text-align: center;
  border-top: none;
  padding-top: 0;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Kontakt — direkt antippbare Kanäle (Telefon, E-Mail, Post)
   ========================================================================== */
.contact-cards {
  display: grid;
  gap: var(--space-3);
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 820px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-base);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--color-accent-ring); }
.contact-card .cc-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  color: var(--color-accent);
}
.contact-card .cc-icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1.0625rem; }
.contact-card .cc-value {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
a.contact-card:hover .cc-value { color: var(--color-accent); }
.contact-card p { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.55; }

/* ==========================================================================
   Themen-Detailseiten: Kapitel-Rail (Scrollspy) + Inhalt
   ========================================================================== */
.doc-layout {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-7);
}
@media (min-width: 1000px) {
  .doc-layout { grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
}

.chapter-rail { display: none; }
@media (min-width: 1000px) {
  .chapter-rail {
    display: block;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: var(--space-1);
  }
}
.chapter-rail .rail-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.chapter-rail ol { display: flex; flex-direction: column; }
.chapter-rail a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  border-left: 2px solid var(--color-border);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.chapter-rail a:hover { color: var(--color-ink); background: var(--color-surface); }
.chapter-rail a.is-active {
  color: var(--color-ink);
  font-weight: 600;
  border-left-color: var(--color-accent);
  background: var(--color-surface);
}

/* Mobile: horizontale Kapitel-Chips, klebend unter dem Header */
.chapter-chips {
  position: sticky;
  /* Die Kopfleiste ist 96 px hoch; bei 74 px schob sich die Kapitelleiste
     darunter und die Beschriftungen ueberlappten (Prüfbericht, 200 %). */
  top: var(--kopf-hoehe);
  z-index: 50;
  display: flex;
  overflow-x: auto;
  /* Der Innenabstand sitzt jetzt auf der Liste. Vorher zog sich die Leiste mit
     negativen Raendern aus dem Container heraus — sie war dadurch 48 px breiter
     als der Bildschirm und erzeugte einen waagrechten Rollbalken. */
  padding: 0.6rem 0;
  margin-inline: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-block: 1px solid var(--color-border);
  scrollbar-width: none;
}
.chapter-chips::-webkit-scrollbar { display: none; }
.chapter-chips a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface);
}
.chapter-chips a.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-inverse); }
@media (min-width: 1000px) { .chapter-chips { display: none; } }

/* Inhaltliche Bausteine der Detailseiten */
.doc-content { min-width: 0; }
.doc-content .kapitel { scroll-margin-top: 130px; padding-top: var(--space-4); }
.doc-content .kapitel + .kapitel { margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.doc-content h2 { font-size: var(--step-2); }
.doc-content .kapitel > p { margin-top: var(--space-2); color: var(--color-text-secondary); line-height: 1.65; }
.doc-content h3 {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.beispiel-box {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-warm);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.beispiel-box strong { color: var(--color-ink); }

.umsetzung-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-3);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-accent-hover);
  font-size: 0.8125rem;
  font-weight: 600;
}
.umsetzung-chip svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Zahlen-Highlight (z. B. 4,1 Mrd. Euro) */
.zahl-highlight {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em var(--space-2);
}
.zahl-highlight strong {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}
.zahl-highlight span { font-size: 0.9375rem; color: var(--color-text-secondary); }

/* Tabellen (Energie-Maßnahmen) — auf Mobil horizontal scrollbar */
.table-scroll { margin-top: var(--space-3); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.875rem; }
.data-table caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
}
.data-table th {
  text-align: left;
  padding: 0.65rem var(--space-3);
  background: var(--tone-cool-3);
  color: var(--color-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}
.data-table td {
  padding: 0.65rem var(--space-3);
  vertical-align: top;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.5;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-weight: 600; color: var(--color-ink); min-width: 170px; }
.data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table tfoot td { background: var(--color-accent-tint); color: var(--color-ink); font-weight: 700; border-top: 2px solid var(--color-accent-ring); }

/* Mini-Zeitleiste (2026–2040) */
.phase-strip {
  margin-top: var(--space-3);
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2, 1fr);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 700px) { .phase-strip { grid-template-columns: repeat(4, 1fr); } }
.phase-strip div { background: var(--tone-cool-2); padding: 0.75rem var(--space-2); }
.phase-strip strong { display: block; font-size: 0.8125rem; color: var(--color-accent-hover); }
.phase-strip span { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.4; }

/* "Wir machen…"-Statements (Energie) */
.statement-grid { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
@media (min-width: 700px) { .statement-grid { grid-template-columns: repeat(2, 1fr); } }
/* Die Kacheln sind jetzt Listenpunkte (Prüfbericht 1.3.1) */
.statement-grid li {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.statement-grid strong { display: block; color: var(--color-accent); margin-bottom: 0.25rem; }

/* Vor/Zurück zwischen den Themen */
.topic-pager {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 700px) { .topic-pager { grid-template-columns: 1fr 1fr; } }
.topic-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.topic-pager a:hover { border-color: var(--color-accent-ring); box-shadow: var(--shadow-soft); }
.topic-pager .pager-dir { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.topic-pager .pager-title { font-weight: 700; color: var(--color-ink); }
.topic-pager a.pager-next { text-align: right; align-items: flex-end; }
@media (max-width: 699px) { .topic-pager a.pager-next { text-align: left; align-items: flex-start; } }

/* ==========================================================================
   Kontakt: E-Mail-Adresse immer einzeilig (kein Umbruch mitten im Wort)
   ========================================================================== */
.contact-card .cc-value--mail {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
}

/* ==========================================================================
   Meilensteine mit Bildern (Zeitplan auf der Startseite)
   ========================================================================== */
.milestones {
  position: relative;
  max-width: 940px;
  margin-inline: auto;
}
.milestones::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--color-border-strong);
}
.milestone {
  position: relative;
  padding-left: 52px;
  padding-bottom: var(--space-5);
}
.milestone:last-child { padding-bottom: 0; }
.milestone::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-accent);
}
.milestone--future::before {
  border-color: var(--color-border-strong);
  background: var(--color-bg);
}
.milestone .ms-date {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.milestone--future .ms-date { color: var(--color-text-muted); }
.milestone h3 { margin-top: 0.3rem; font-size: var(--step-1); }
.milestone p { margin-top: 0.5rem; color: var(--color-text-secondary); line-height: 1.6; }

.ms-media { margin-top: var(--space-3); }
.ms-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.ms-media figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

@media (min-width: 860px) {
  .milestone--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-4);
    align-items: start;
  }
  .milestone--media .ms-media { margin-top: 0; grid-column: 2; grid-row: 1 / span 4; }
}

/* ==========================================================================
   Zitate mit Portrait (Sektion „Gemeinsam arbeiten")
   ========================================================================== */
.quote-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 940px;
  margin-inline: auto;
}
.quote-row {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 720px) {
  .quote-row { grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-4); }
}
.quote-portrait { margin: 0; }
.quote-portrait img {
  width: 100%;
  max-width: 168px;
  height: auto;          /* schlägt das height-Attribut, damit aspect-ratio greift */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.quote-portrait figcaption {
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.quote-body blockquote {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
  color: var(--color-ink);
}
.quote-body blockquote::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: var(--space-2);
}
.quote-body cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-weight: 700;
  color: var(--color-ink);
}
.quote-body .cite-role {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Letzter Container vor dem Footer braucht Bodenabstand
   (betraf zeitplan.html: CTA-Buttons klebten direkt am Footer) */
main > .container:last-child { padding-bottom: var(--space-7); }

/* ==========================================================================
   Zitat-Karussell — Vanilla-Nachbau des Embla/shadcn-Carousels
   (Scroll-Snap fuer natives Wischen, Buttons + Punkte + Tastatur)
   ========================================================================== */
.quote-carousel {
  position: relative;
  margin-inline: auto;
  margin-top: var(--space-6);
}

.qc-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius-lg);
}
.qc-viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .qc-viewport { scroll-behavior: auto; }
}

.qc-track { display: flex; }

.qc-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: block;
  padding: 0;
  background: none;
  border: none;
}
@media (min-width: 720px) {
  .qc-slide { grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-4); }
}

/* Steuerung */
.qc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.qc-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--duration-base), background var(--duration-base), opacity var(--duration-base);
}
.qc-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.qc-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qc-btn svg { width: 18px; height: 18px; }

/* Ab Desktop: Pfeile links/rechts neben das Karussell */
@media (min-width: 1100px) {
}
@media (max-width: 1099px) {
}

.qc-dots { display: flex; align-items: center; gap: 0.5rem; }
.qc-dot {
  width: 30px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-border-strong);
  transition: background var(--duration-base), width var(--duration-base);
}
.qc-dot[aria-selected="true"] { background: var(--color-accent); width: 44px; }
.qc-dot:hover { background: var(--color-accent-ring); }

.qc-status {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Claim-Banner — Kampagnenslogan über Vollbild-Foto (Festsaal)
   ========================================================================== */
.claim-banner {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 16vw, 12rem);
  color: var(--color-inverse);
}
.claim-banner .cb-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.claim-banner .cb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease-out);
}
.claim-banner.is-visible .cb-media img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .claim-banner .cb-media img { transform: none; transition: none; }
}
.claim-banner .cb-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.3) 100%);
}
.claim-line {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  line-height: 1.06;
  color: var(--color-inverse);
  opacity: 0;
  transform: translateY(24px);
}
.claim-line--2 { margin-left: clamp(0rem, 6vw, 5rem); }
.claim-line--3 {
  margin-left: clamp(0rem, 12vw, 10rem);
  position: relative;
  display: inline-block;
}
.claim-line--3::after {
  content: '';
  position: absolute;
  left: 0.06em;
  right: 0.2em;
  bottom: -0.12em;
  height: 0.09em;
  background: linear-gradient(90deg, rgba(217,54,17,0) 0%, var(--color-accent) 30%, var(--color-accent) 100%);
}
.claim-banner.is-visible .claim-line {
  animation: claim-in 700ms var(--ease-out) forwards;
}
.claim-banner.is-visible .claim-line--2 { animation-delay: 180ms; }
.claim-banner.is-visible .claim-line--3 { animation-delay: 360ms; }
@keyframes claim-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .claim-line { opacity: 1; transform: none; animation: none !important; }
}
.claim-note {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  max-width: 46ch;
}

/* ==========================================================================
   Foto-Mosaik — editoriales Bildraster (Am Ballhausplatz)
   ========================================================================== */
.mosaic {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 230px;
  }
  .mosaic-item--breit { grid-column: span 2; grid-row: span 2; }
  .mosaic-item--hoch { grid-row: span 2; }
}
.mosaic-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
/* Mobil: einheitliche Kachelhöhen statt wild springender Bildformate */
@media (max-width: 759px) {
  .mosaic-item { aspect-ratio: 4 / 3; }
  .mosaic-item--hoch { aspect-ratio: 3 / 4; }
}
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.mosaic-item:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .mosaic-item img { transition: none; }
  .mosaic-item:hover img { transform: none; }
}
.mosaic-item figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.2rem var(--space-3) var(--space-2);
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.72) 100%);
  color: var(--color-inverse);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Meilenstein-Fotos: sanfter Zoom beim Überfahren */
.ms-media { overflow: hidden; border-radius: var(--radius-lg); }
.ms-media img { transition: transform 600ms var(--ease-out); }
.ms-media:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .ms-media img { transition: none; }
  .ms-media:hover img { transform: none; }
}

/* Buttons: Pfeil rückt beim Überfahren nach */
.btn svg { transition: transform var(--duration-fast) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Navigations-Dropdowns — Vanilla-Nachbau des Base-UI/shadcn NavigationMenu
   (Hover + Klick, animiertes Popup mit Pfeil, Chevron-Rotation, Escape)
   ========================================================================== */
.site-header .container { position: relative; }

.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.65rem 0.5rem;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--duration-base);
}
.nav-drop-trigger:hover,
.nav-drop-trigger[aria-expanded="true"] { color: var(--color-ink); }
.nav-drop-trigger.is-current { color: var(--color-ink); font-weight: 600; }
.ndt-chev {
  width: 12px;
  height: 12px;
  transition: transform 300ms var(--ease-out);
}
.nav-drop-trigger[aria-expanded="true"] .ndt-chev { transform: rotate(180deg); }

/* Popup unter der Header-Leiste */
.nav-popup {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: scale(0.92) translateY(-6px);
  transform-origin: top center;
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.nav-popup.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
/* unsichtbare Brücke, damit die Maus vom Trigger zum Popup wandern kann */
.nav-popup::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-popup { transition: opacity 80ms linear; transform: none; }
  .nav-popup.is-open { transform: none; }
}

/* Pfeil zum Trigger */
.nav-popup-arrow {
  position: absolute;
  top: -7px;
  width: 13px;
  height: 13px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
  transition: left 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Panels */
.nav-panel { display: none; padding: var(--space-2); }
.nav-panel.is-active { display: block; }
.nav-panel.slide-right { animation: np-right 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav-panel.slide-left  { animation: np-left 300ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes np-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes np-left  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-panel.slide-right, .nav-panel.slide-left { animation: none; }
}

.np-grid--themen {
  display: grid;
  grid-template-columns: 200px 300px;
  gap: 0.5rem;
  align-items: stretch;
}
.np-feature {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: var(--color-inverse);
  min-height: 200px;
  transition: filter var(--duration-base);
}
.np-feature:hover { filter: brightness(1.07); }
.np-feature-title { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.np-feature-sub { font-size: 0.8125rem; color: rgba(255,255,255,0.85); line-height: 1.4; }

.np-list { display: flex; flex-direction: column; gap: 2px; }
.np-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}
.np-item:hover, .np-item:focus-visible { background: var(--color-accent-tint); }
.np-item > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}
.np-item strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}
.np-item small {
  display: block;
  margin-top: 1px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.np-panel--schmal { width: 300px; }

/* ==========================================================================
   V4 — Kennzahlen prominent, Zitate im Bild, Kopfbilder, Textmenü
   ========================================================================== */

/* ---- Kennzahlen: größer und farbig ---- */
.fact-row .fact strong {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
}
.fact-row .fact span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.fact-row { gap: var(--space-5); }
.fact-row--center { gap: clamp(var(--space-4), 7vw, var(--space-7)); }
/* Auf den Unterseiten-Köpfen: helle Karte hinter den Zahlen */
.page-head .fact-row {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  justify-content: space-around;
}

/* ---- Navigations-Dropdown: reiner Text ---- */
.np-textlist { display: flex; flex-direction: column; gap: 1px; min-width: 260px; }
.np-textlist a {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.np-textlist a:hover, .np-textlist a:focus-visible {
  background: var(--color-accent-tint);
  color: var(--color-accent-hover);
}

/* Hierarchie: Übersichtsseite oben, die vier Reformbereiche eine Ebene darunter */
/* auf .np-textlist a gescopet — sonst gewinnt dessen höhere Spezifität */
.np-textlist a.np-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 1.0625rem;
  font-weight: 700;
}
.np-lead-pfeil { width: 16px; height: 16px; flex: none; opacity: 0.5; transition: opacity var(--duration-fast); }
.np-lead:hover .np-lead-pfeil, .np-lead:focus-visible .np-lead-pfeil { opacity: 1; }
.np-sublabel {
  margin: 0.85rem 0.8rem 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.np-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 0.8rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border-strong);
}
.np-textlist .np-sub a { font-size: 0.9rem; font-weight: 500; color: var(--color-text-secondary); }
.np-textlist .np-sub a:hover, .np-textlist .np-sub a:focus-visible { color: var(--color-accent-hover); }
.nav-popup { min-width: 240px; }

/* ---- Claim-Banner: Logo statt Text, Kampagnenbild ---- */
.claim-banner { padding-block: clamp(5rem, 12vw, 9rem); }
.claim-banner .cb-media::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.78) 100%);
}
.claim-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-7);   /* Abstand zum Logo nochmals vergrößert */
}
.claim-logo {
  width: min(560px, 84vw);
  height: auto;
  opacity: 0;
  transform: translateY(18px);
}
.claim-banner.is-visible .claim-logo {
  animation: claim-in 800ms var(--ease-out) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .claim-logo { opacity: 1; transform: none; animation: none !important; }
}
.claim-banner .claim-note {
  /* Feedback S. 2: linksbündig an der Logokante, 70 % Schwarz.
     Breite = Logobreite, damit die linke Kante exakt zusammenfällt. */
  margin-top: 0;
  margin-left: 0;
  width: min(560px, 84vw);
  text-align: left;
  color: rgba(10,10,10,0.7);
  /* auf Logobreite gesetzt: füllt zwei Zeilen, enger geführt (S. 2) */
  font-size: clamp(1.25rem, 3.3vw, 1.875rem);
  line-height: 1.2;
  font-weight: 600;
  max-width: none;
}

/* ---- Zitate: Text direkt im Bild ---- */
/* ---- Zitate: großes Bild, Text darunter im Kampagnenstil ---- */
.zitat { margin: 0; }
.zitat-bild {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.zitat-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
}
@media (min-width: 720px) { .zitat-bild img { aspect-ratio: 16 / 9; } }
.zitat-credit {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(10,10,10,0.6);
}

/* Textblock unter dem Bild, zentriert. 60rem ergeben beim größten Zitatgrad
   rund 53 Zeichen je Zeile — noch gut lesbar, aber deutlich breiter als das
   Bild es nahelegt. (ch wäre hier irreführend: es bezöge sich auf die 16 px
   dieses Elements, nicht auf die 24 px des Zitats.) */
.zitat-text {
  max-width: 60rem;
  margin-inline: auto;
  padding-top: var(--space-5);
  text-align: center;
}
.zitat blockquote {
  margin: 0;
  font-size: clamp(1.0625rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
}
/* inline-flex wird vom text-align des Elternteils mitzentriert */
.zitat-quelle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-accent);
}
.zitat-funktion,
.zitat-name {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  color: var(--color-ink);
}

/* ---- Kopfbild der Unterseiten ---- */
/* Das Foto steht frei — kein Text darauf, keine flächige Abdunklung.
   Der Titel sitzt auf einem Feld im Kampagnen-Hintergrund, das nur die
   untere Bildkante überlappt. */
.page-hero { position: relative; }
.page-hero-media { position: relative; }
/* Volles 16:9 — nicht beschneiden. Sonst fallen bei manchen Motiven genau die
   Bildteile weg, auf die es ankommt (z. B. die Präsentation bei „Gesundheit"). */
.page-hero-media img {
  display: block;
  width: 100%;
  /* Das volle 16:9 schob den Titel unter die Bildschirmkante — auf 1440x900
     lag er erst bei 730 px. Höhe begrenzt, Ausschnitt leicht nach oben
     versetzt, damit Flaggen bzw. erhobene Hände im Bild bleiben. */
  /* Vorlage bereich.png zeigt einen Streifen von rund 2,45:1;
     bei 110 px Überlappung ergibt 48vw genau das. */
  height: clamp(300px, 48vw, 700px);
  object-fit: cover;
  object-position: center 30%;
}
.page-hero-media { max-width: 1920px; margin-inline: auto; }
/* Keine Abdunklung mehr: Die Kopfleiste ist auf den Unterseiten deckend
   (data-solid), das Bild braucht dahinter keinen Verlauf. */
.page-hero-panel {
  position: relative;
  z-index: 1;
  /* Titel weiter ins Bild ziehen, damit er auf dem Desktop sofort sichtbar ist */
  margin-top: -110px;
  /* waagrecht polstert bereits .container — hier nur senkrecht */
  /* oben knapper, damit Icon, Breadcrumb und Titel trotz des breiten
     Bildstreifens noch in den ersten Bildschirm passen */
  padding-block: var(--space-4) var(--space-5);
  /* Balken unten statt oben, ohne Schatten (S. 3) */
  border-bottom: 3px solid var(--color-accent);
  /* Feedback S. 4 (V1): Sujet raus, Kasten auf Weiß */
  background: #FFFFFF;
}
.page-hero-panel .eyebrow { color: var(--color-text-secondary); }
.page-hero-panel .eyebrow a { color: inherit; text-decoration: underline; }
.page-hero-panel h1 { font-size: var(--step-4); margin-top: var(--space-2); }
.page-hero-panel .page-lede { margin-top: var(--space-3); }
.page-hero-media .foto-credit {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Das Bild beginnt unterhalb der schwebenden Kopfleiste, damit Motive am
   oberen Bildrand — etwa die Fahnen bei Verwaltung & Verfassung — nicht
   dahinter verschwinden. */
.page-hero { padding-top: 104px; }

@media (max-width: 700px) {
  /* Das 16:9-Bild ist hier nur rund 210 px hoch — die feste Kopfleiste würde
     davon 80 px verdecken. Deshalb beginnt das Bild unterhalb der Leiste. */
  .page-hero { padding-top: 96px; }
  .page-hero-panel {
    margin-top: -40px;
    padding-block: var(--space-4);
    border-radius: var(--radius-md);
  }
}
/* Kennzahlen im Bildkopf: dunkle Glaskarte */
.page-hero .fact-row {
  background: rgba(10,10,10,0.42);
  border-color: rgba(255,255,255,0.22);
}
.page-hero .fact-row .fact strong { color: var(--color-inverse); }
.page-hero .fact-row .fact span { color: rgba(255,255,255,0.8); }

/* ---- Inline-Bild in den Detailseiten ---- */
.doc-figure { margin: var(--space-5) 0; }
.doc-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.doc-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---- Fotonachweis im Zeitstrahl: nicht mehr abgeschnitten ---- */
.ms-media { overflow: visible; }
.ms-media img { border-radius: var(--radius-lg); }
.ms-media figcaption {
  margin-top: 0.6rem;
  padding-bottom: 0.2rem;
  overflow-wrap: anywhere;
}
@media (min-width: 860px) {
  .milestone--media .ms-media { grid-row: 1 / span 5; }
}

/* ---- Rechtsseiten: Unterabschnitte ---- */
.legal-page h3 {
  margin-top: var(--space-4);
  font-size: 1rem;
  color: var(--color-ink);
}
.legal-page .legal-block { margin-top: var(--space-5); }
.legal-page address {
  font-style: normal;
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.footer-col ul li a[href^="mailto"], .legal-page a[href^="mailto"] { overflow-wrap: anywhere; }


/* ==========================================================================
   Fotonachweise im Bild (unten rechts) und Themen-Icon im Titelkasten
   ========================================================================== */
.bild-rahmen { position: relative; display: block; }
.bild-rahmen img { display: block; }
/* Nachweise liegen auf dem Foto — teils auf hellen Motiven. Ein Schatten
   allein genügt dort nicht, deshalb eine deckende dunkle Unterlegung:
   rgba(10,10,10,0.7) ergibt selbst über Weiß noch 6,9:1. */
.bild-credit,
.zitat-credit,
.page-hero-media .foto-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.28rem 0.6rem;
  background: rgba(10,10,10,0.7);
  font-size: 0.6875rem;
  line-height: 1.3;
  color: #FFFFFF;
  text-shadow: none;
  pointer-events: none;
}
.ms-media .bild-rahmen,
.doc-figure .bild-rahmen { overflow: hidden; }

/* Icon im Titelkasten der Themen-Unterseiten */
.thema-icon {
  /* eigener Block, sonst ist die Zeilenbox niedriger als das 52-px-Icon und
     die Breadcrumb darunter rutscht hinein */
  display: flex;
  width: 52px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}
.thema-icon svg { width: 52px; height: 52px; }


/* ---- Mobiles Menü: „Themen" aufklappbar ---- */
.mn-gruppe { display: flex; flex-direction: column; }
.mn-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding-block: var(--space-2);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font: inherit;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}
.mn-chev { width: 22px; height: 22px; flex: none; transition: transform var(--duration-base) var(--ease-out); }
.mn-trigger[aria-expanded="true"] .mn-chev { transform: rotate(180deg); }
.mn-unter { display: flex; flex-direction: column; padding-left: var(--space-3); }
/* die Unterpunkte eine Ebene tiefer absetzen */
.mobile-nav .mn-unter a {
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav .mn-unter a:first-child { font-weight: 700; color: var(--color-ink); }


/* ==========================================================================
   Themenseiten: Kampagnenmuster in den Seitenrändern
   Das Muster liegt auf dem Seitenhintergrund; die Inhaltsspalte bekommt eine
   deckende Fläche, damit es nur links und rechts davon sichtbar wird — nicht
   hinter dem Text und nicht auf dem Kopfbild.
   ========================================================================== */
.seite-thema {
  background: var(--muster-flaeche-hell) top center / 100% auto no-repeat fixed,
              var(--color-bg);
}
.seite-thema main > .container,
.seite-thema .page-hero-panel { background: #FFFFFF; }
.seite-thema .chapter-chips { background: #FFFFFF; }
@media (max-width: 700px) {
  .seite-thema { background-size: 200% auto, auto; }
}


/* Markenspalte der Fußzeile: Absatz mit ruhiger Zeilenlänge */
.footer-brand + p {
  max-width: 30ch;
  line-height: 1.6;
}


/* ---- Kopfbereich der Themenseiten: Titel links, Kennzahlen rechts ---- */
.page-hero-panel {
  display: grid;
  gap: var(--space-4);
  align-items: end;
}
@media (min-width: 900px) {
  .page-hero-panel { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); }
}
.ph-text { min-width: 0; }
.ph-text h1 { margin-top: var(--space-2); }

/* Kennzahlen im Kopf: kleiner als in den Abschnitten, rechtsbündig */
/* Die Kennzahlen liegen jetzt im Titelkasten, also innerhalb von .page-hero.
   Dessen Regeln färben sie weiß und legen eine dunkle Fläche dahinter — beides
   muss hier zurückgenommen werden, sonst stehen weiße Ziffern auf Weiß. */
.page-hero .fact-row--kopf {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  align-self: end;
  /* schmale Displays: nebeneinander wie bisher */
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}
.page-hero .fact-row--kopf .fact strong {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1;
  color: var(--color-accent);
}
.page-hero .fact-row--kopf .fact span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}
@media (min-width: 900px) {
  /* rechte Spalte: untereinander, rechtsbündig */
  .page-hero .fact-row--kopf {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-end;
  }
  .page-hero .fact-row--kopf .fact { text-align: right; }
}


/* ==========================================================================
   Sujet-Auflage unter dem Hero (Nachbau-HG3 der Agentur)
   Die Datei ist 2560 x 1680 px: die oberen 240 px sind halbtransparent und
   ragen ins Video hinein, ab Zeile 240 ist sie deckend. 240/2560 = 9,375 %
   der Breite — deshalb wird der Abschnitt um genau 9.375vw hochgezogen und
   die Polsterung um denselben Betrag erhöht, damit der Inhalt stehen bleibt.
   z-index: 0 legt ihn über das Video (gleiche Ebene, später im Dokument),
   aber unter Titel und Button des Heros (z-index 1).
   ========================================================================== */
.hero + .section {
  position: relative;
  z-index: 0;
  margin-top: -9.375vw;
  padding-top: calc(9.375vw + var(--space-8));
  /* Zwei Ebenen: oben die Grafik, darunter die Flächenfarbe #EDF0F4 (die
     gemessene Unterkante der Grafik), damit der Abschnitt ohne Kante
     weiterläuft, wenn er höher ist als die Grafik. Die Fläche beginnt erst
     9.375vw tiefer — sonst würde sie den Überstand hinterlegen und das Video
     verdecken, statt es durch die transparenten Stellen durchscheinen zu lassen. */
  background:
    var(--muster-hg3) top center / 100% auto no-repeat,
    linear-gradient(#EDF0F4, #EDF0F4) 0 9.375vw / 100% calc(100% - 9.375vw) no-repeat;
}


/* ==========================================================================
   Statement-Video auf der Startseite (zwischen Claim-Banner und Zeitplan)
   ========================================================================== */
.section--statement { background: var(--color-bg); }

.video-figur { margin: 0; }

.video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* Ladefläche und Briefkasten-Ränder in Videoschwarz statt Seitenhintergrund */
  background: var(--color-ink);
}
.video-player:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }


/* ==========================================================================
   Umsetzung des WCAG-Prüfberichts vom 15.08.2026
   ========================================================================== */

/* ---- 1.4.3: Textlinks müssen als Links erkennbar sein (Farbe allein reicht
   im Fließtext und im Footer nicht aus) ---- */
.doc-content a:not(.btn):not(.chip),
.topic-body a:not(.btn),
.footer-col a,
.footer-bottom a,
.page-lede a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.footer-col a:hover,
.footer-bottom a:hover { text-decoration-thickness: 2px; }

/* ---- 1.3.1 / 2.4.1: Navigationen sind jetzt Listen. Die Aufzählungspunkte
   entfallen, die bisherige Anordnung bleibt unverändert. ---- */
.nav-links ul,
.mn-liste,
.mn-unter,
.np-sub,
.chapter-chips ul,
.fact-row,
.statement-grid { list-style: none; }

.nav-links ul {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) { .nav-links { display: block; } }

.mn-liste { display: flex; flex-direction: column; margin: 0; padding: 0; }
.mn-liste > li { display: flex; flex-direction: column; }
.mobile-nav .mn-liste a { display: block; }
.mn-unter { margin: 0; }

.np-sub { margin-block: 0; padding-block: 0; }
.np-sub li { display: flex; }
.np-sub li a { flex: 1; }

.chapter-chips ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding-inline: var(--space-3);
}
.chapter-chips li { flex-shrink: 0; display: flex; }

.fact-row { padding-inline: 0; margin-bottom: 0; }
.statement-grid { padding-inline: 0; margin-bottom: 0; }

/* ---- 1.3.2 / 2.1.1 / 4.1.2: Das mobile Menü darf in der Desktop-Ansicht
   überhaupt nicht erreichbar sein, im geschlossenen Zustand ebenso wenig.
   „visibility" nimmt es aus der Tabulator-Reihenfolge und aus dem
   Zugänglichkeitsbaum, erhält aber die Einschub-Animation. ---- */
.mobile-nav {
  visibility: hidden;
  /* Beim Schließen erst nach dem Hinausgleiten unsichtbar schalten, beim
     Öffnen dagegen sofort — sonst kann der Fokus nicht ins Menü gesetzt
     werden, solange es noch unsichtbar ist. */
  transition: transform var(--duration-slow) var(--ease-out),
              visibility 0s linear var(--duration-slow);
}
.mobile-nav.is-open {
  visibility: visible;
  transition: transform var(--duration-slow) var(--ease-out), visibility 0s;
}
@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* ---- 1.3.2 / 2.2.2: Der Videoschalter zeigt seinen Zustand jetzt auch
   gestalterisch an, nicht nur über das Symbol. ---- */
.video-toggle svg[hidden] { display: none; }
/* Auf dem dunklen Video ist das rote Fokusband nicht zu erkennen — hier weiß. */
.video-toggle:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.video-toggle.is-paused {
  background: var(--color-inverse);
  border-color: var(--color-inverse);
  color: var(--color-ink);
}

/* ---- 1.3.2: Reformbereiche als Registerkarten. Die Ringanordnung bleibt,
   der Behälter übernimmt nur die Positionierung. ---- */
.orbit-tablist { position: absolute; inset: 0; }
@media (max-width: 700px) {
  .orbit-tablist {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
  }
}
.orbit-center:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

/* ---- 2.4.6: Die Footer-Überschriften sind jetzt h2 (Ebene 4 hätte Ebenen
   übersprungen). Die Gestaltung bleibt die bisherige, siehe .footer-col
   .footer-titel weiter oben — h2-Grundgröße hier zurücknehmen. ---- */
.footer-col .footer-titel { font-size: 0.75rem; }


/* ==========================================================================
   Transkript zum Statement-Video (Medienalternative, WCAG 1.2.3)
   Eingeklappt bleibt der Abschnitt so ruhig wie bisher; aufgeklappt steht
   der vollständige Text in Lesebreite.
   ========================================================================== */
.transkript { margin-top: var(--space-3); }
.transkript > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
}
.transkript > summary::-webkit-details-marker { display: none; }
.transkript > summary::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-base) var(--ease-out);
}
.transkript[open] > summary::before { transform: rotate(45deg); }
.transkript > summary:hover { color: var(--color-ink); }
.transkript > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.transkript-text {
  max-width: 68ch;
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.transkript-text p + p { margin-top: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .transkript > summary::before { transition: none; }
}


/* Sprecherwechsel im Transkript (Prüfbericht: Namen müssen enthalten sein) */
.transkript-text .transkript-sprecher {
  margin-top: var(--space-4);
  color: var(--color-ink);
  font-weight: 700;
}
.transkript-text .transkript-sprecher:first-child { margin-top: 0; }
.transkript-text .transkript-sprecher + p { margin-top: 0.4rem; }


/* ==========================================================================
   Fokus sichtbar an der richtigen Stelle (Prüfbericht 2.4.7)
   ========================================================================== */

/* Angesprungene Kapitel: der Rahmen umschliesst die Ueberschrift, nicht den
   ganzen Abschnitt — sonst laeuft er ueber die halbe Seite. */
.doc-content .kapitel:focus { outline: none; }
.doc-content .kapitel:focus-visible > h2 {
  outline: 3px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: 2px;
}

/* Die Kopfleiste ist ueberlagernd; angesprungene Ziele brauchen Abstand nach
   oben, sonst steht die Ueberschrift dahinter (Prüfbericht 2.4.11). */
:target,
.doc-content .kapitel,
.qc-slide,
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--space-3)); }

/* Karussell: der Fokusrahmen der Schalter lag teilweise unter dem Nachbarn */
.qc-btn { position: relative; }
.qc-btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; z-index: 2; }
.qc-dot:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }


/* Rechtsseiten: Ebenen 3 und 4 kommen in der Barrierefreiheitserklärung vor */
.legal-page h3 { font-size: 1.0625rem; margin-top: var(--space-4); }
.legal-page h4 { font-size: 1rem; margin-top: var(--space-3); }
.legal-page h3 + p, .legal-page h4 + p { margin-top: var(--space-2); }
/* Verweise auf fremde Seiten im Fließtext deutlich als Links kennzeichnen */
.legal-page a { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 0.18em; }
.legal-page a:hover { text-decoration-thickness: 2px; }