/*
 * Design-Tokens, uebertragen aus legacy/tailwind.config.js + legacy/app/globals.css
 * sowie per getComputedStyle() gegen die Live-Seite (https://www.starkregen.de)
 * verifiziert (Schriftgroessen/-gewichte der Hero-H1, Body-Font-Stack).
 * Keine Tailwind-Klassen, keine CDN-Referenzen -- reine Custom Properties.
 */
:root {
  /* Marken-/Akzentfarbe (Tailwind red-Skala, wie im Original verwendet) */
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;

  /* "storm" - dunkle Flaechen (Header, Hero-Overlays, dunkle Karten) */
  --color-storm-950: #080808;
  --color-storm-900: #101010;
  --color-storm-800: #181818;
  --color-storm-700: #232323;
  --color-storm-600: #333333;

  /* Neutral-Skala (Tailwind neutral, fuer Fliesstext auf hellem Grund) */
  --color-neutral-900: #171717;
  --color-neutral-700: #404040;
  --color-neutral-600: #525252;
  --color-neutral-500: #737373;
  --color-neutral-400: #a3a3a3;
  --color-neutral-300: #d4d4d4;
  --color-neutral-200: #e5e5e5;
  --color-neutral-100: #f5f5f5;
  --color-neutral-50: #fafafa;

  /* Warn-/Erfolgsfarben (Ueberflutungsrisiko-Icons, Formular-Status) */
  --color-amber-500: #f59e0b;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;

  /* Tailwind "gray"-Skala (bewusst getrennt von "neutral"): der Changelog
     verwendet im Original woertlich text-gray-*, nicht die neutral-Skala
     des restlichen Rebuilds - andere Werte, daher eigene Tokens. */
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-900: #111827;
  /* Badge-Farben Changelog. Original nutzt Tailwind blue-500/green-500 mit
     weisser Schrift, was WCAG-Kontrast AA fuer die kleine Badge-Schrift
     verfehlt (blue-500/weiss 3.68:1, green-500/weiss 2.28:1, gefordert
     4.5:1). Wie bei den anderen in dieser Session gefundenen Kontrast-Bugs
     (siehe QA.md) auf den naechstdunkleren Tailwind-Ton angehoben - visuell
     weiterhin eindeutig blau/gruen, jetzt AA-konform (5.17:1 / 5.02:1). */
  --color-blue-600: #2563eb;
  --color-green-700: #15803d;

  --color-white: #ffffff;
  --color-black: #000000;

  /* Telekom-Pink (Use-Case-Button, exakter Markenwert des Partners) */
  --color-telekom-pink: #e20074;
  --color-telekom-pink-hover: #c50065;

  /* Radien (aus den rounded-[Npx]-Arbitrary-Values des Originals) */
  --radius-sm: 8px;
  --radius: 9px;      /* Buttons, Inputs, kleine Chips */
  --radius-md: 11px;
  --radius-lg: 12px;  /* Karten, Bilder, glass-subtle */
  --radius-xl: 18px;  /* .glass Panels */

  /* Typografie */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --container-max: 1152px; /* max-w-6xl */
  --container-padding: 1rem;

  /* Schatten (aus globals.css .glass / .glass-dark uebernommen) */
  --shadow-glass:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 24px 48px -16px rgba(10, 10, 10, 0.1);
  --shadow-glass-strong:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    0 28px 56px -16px rgba(10, 10, 10, 0.14);
  --shadow-glass-subtle: 0 8px 24px -12px rgba(10, 10, 10, 0.08);
  --shadow-glass-dark:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    0 24px 48px -12px rgba(0, 0, 0, 0.5);

  /* Uebergaenge: gegen das Original gemessen (getComputedStyle im Hover-Zustand).
     Tailwind nutzt fuer JEDE transition-Utility die Kurve cubic-bezier(0.4,0,0.2,1)
     und als Default-Dauer 150ms; nur die Karten/Chips des Originals setzen
     zusaetzlich duration-300. Der Rebuild hatte stattdessen ueberall eine eigene
     Kurve (0.22,1,0.36,1) und 300ms - sichtbar traeger und anders gewichtet. */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-standard: all 0.3s var(--ease-std);
  --transition-fast: all 0.15s var(--ease-std);
  --transition-colors:
    color 0.15s var(--ease-std), background-color 0.15s var(--ease-std),
    border-color 0.15s var(--ease-std), text-decoration-color 0.15s var(--ease-std),
    fill 0.15s var(--ease-std), stroke 0.15s var(--ease-std);
}
/* starkregen.de -- Basisstile. Ports der in legacy/app/globals.css und den
   Tailwind-Utility-Klassen der Komponenten verwendeten visuellen Regeln,
   uebersetzt in handgeschriebenes, klassenbasiertes CSS. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-neutral-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  position: relative;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(220, 38, 38, 0.2); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* Feines Filmkorn ueber der gesamten Seite (grain::before im Original) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
@media (min-width: 768px) { .container { padding-inline: 1.5rem; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--color-red-600); color: #fff; padding: 0.6rem 1rem;
  border-radius: var(--radius); transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* Sichtbarer Tastatur-Fokus fuer alle interaktiven Elemente. Komponenten mit
   eigenem, praeziser abgestimmtem Fokusring (yt-facade, cl-trigger, cl-shot,
   Formularfelder) behalten ihre spezifischeren Regeln weiter unten im File -
   diese hier ist der Sicherheitsnetz-Standardfall (Nav, Footer, Karten,
   Chips, Buttons, Zusammenfassungen etc.). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- Eyebrow */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-red-600);
  margin: 0;
}
.eyebrow.on-dark { color: var(--color-red-400); }

.text-gradient-brand {
  background: linear-gradient(to right, var(--color-red-500), var(--color-red-600), var(--color-red-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.link-underline {
  text-decoration: underline;
  text-decoration-color: rgba(220,38,38,0.4);
  text-underline-offset: 4px;
  transition: var(--transition-colors);
}
.link-underline:hover { color: var(--color-red-600); text-decoration-color: var(--color-red-600); }

/* ------------------------------------------------------------- Glass UI */
.glass {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.07);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-glass);
}
.glass-strong {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-glass-strong);
}
.glass-subtle {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-glass-subtle);
}
.glass-dark {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-glass-dark);
}
.glass-hover:hover { border-color: rgba(239,68,68,0.3); background: rgba(0,0,0,0.04); }

/* ------------------------------------------------------------ Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border: none;
  transition: var(--transition-fast);
  white-space: nowrap;
}
/* Original: shadow-lg shadow-red-600/20 -> hover:shadow-xl shadow-red-600/25.
   Nur zwei Buttons (FWS-Teaser, Formular-Absenden) nutzen stattdessen einen
   arbitraeren Glow - dafuer die Variante .btn-glow. */
.btn-primary {
  background: var(--color-red-600);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(220,38,38,0.2), 0 4px 6px -4px rgba(220,38,38,0.2);
}
.btn-primary:hover { background: var(--color-red-500); }
/* Nur der Workshops-Button hebt den Schatten beim Hover an (hover:shadow-xl). */
.btn-lift:hover { box-shadow: 0 20px 25px -5px rgba(220,38,38,0.25), 0 8px 10px -6px rgba(220,38,38,0.25); }
/* Drei Buttons nutzen im Original einen arbitraeren Glow statt shadow-lg -
   jeweils mit eigenen Werten, einzeln am Original gemessen. */
.btn-glow-nav { box-shadow: 0 0 24px rgba(220,38,38,0.4); }
.btn-glow-nav:hover { box-shadow: 0 0 32px rgba(220,38,38,0.55); }
.btn-glow { box-shadow: 0 0 28px rgba(220,38,38,0.35); }
.btn-glow:hover { box-shadow: 0 0 36px rgba(220,38,38,0.5); }
.btn-glow-soft, .btn-glow-soft:hover { box-shadow: 0 0 28px rgba(220,38,38,0.3); }
.btn-outline {
  background: rgba(0,0,0,0.03);
  color: var(--color-neutral-900);
  border: 1px solid rgba(0,0,0,0.15);
}
.btn-outline:hover { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.06); }
.btn-white { background: #fff; color: var(--color-storm-950); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4); }
.btn-white:hover { background: var(--color-neutral-100); }
.btn-telekom { background: var(--color-telekom-pink); color: #fff; box-shadow: 0 10px 15px -3px rgba(226,0,116,0.2), 0 4px 6px -4px rgba(226,0,116,0.2); }
.btn-telekom:hover { background: var(--color-telekom-pink-hover); box-shadow: 0 20px 25px -5px rgba(226,0,116,0.25), 0 8px 10px -6px rgba(226,0,116,0.25); }
.btn-block { width: 100%; justify-content: center; height: 3rem; }
/* px-6 py-3.5 (48px hoch) statt des ueblichen px-5 py-3 (44px). Im Original
   auf drei Buttons: FWS-Teaser, Innovation-Day-Anmeldung ("Jetzt anmelden",
   legacy page.js InnovationDaySection) und Telekom-Use-Case. */
.btn-lg { padding: 0.875rem 1.5rem; }
.btn[disabled] { cursor: wait; opacity: 0.7; }
/* Below ~380px kann ein langes Button-Label (z.B. "Mehr Informationen zum
   FWS") breiter werden als der verfuegbare Platz in gepolsterten Sektionen -
   das erzwingt horizontales Ueberlaufen der Seite statt eines zweizeiligen
   Buttons. Nur unterhalb dieser Breite Umbruch erlauben, alle groesseren
   Breakpoints (also das gesamte sichtbare Originaldesign) bleiben unveraendert
   einzeilig. */
@media (max-width: 380px) { .btn { white-space: normal; text-align: center; } }
.btn .icon { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.15s var(--ease-std); }
/* inline-flex statt inline: als Inline-Element bekam der Span die Zeilenbox-
   Strut dazu (21px statt 16px Hoehe) und machte z.B. den FWS-Teaser-Button
   49px statt 48px hoch - im Original ist der Pfeil ein block-SVG. */
.icon-shift { display: inline-flex; transition: transform 0.15s var(--ease-std); }
.btn:hover .icon-shift,
.help-card:hover .icon-shift,
.access-link:hover .icon-shift { transform: translateX(4px); }

/* --------------------------------------------------------------- Header */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
}
.site-nav {
  margin: 0.75rem auto 0;
  max-width: var(--container-max);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(8,8,8,0.85);
  padding: 0.75rem 1rem;
  backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 12px 32px -12px rgba(10,10,10,0.35);
  margin-inline: 0.75rem;
}
@media (min-width: 768px) { .site-nav { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .site-nav { margin-inline: auto; } }

.site-logo img { height: 2.25rem; width: auto; }

.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-neutral-300);
  transition: var(--transition-colors);
}
.nav-links a:hover { color: #fff; }
/* Der Nav-CTA ist im Original h-10 px-5 text-sm font-bold (Navigation.js Z.38) -
   .nav-links a (0,1,1) schlug hier die .btn-Basiswerte: Gewicht 500 statt 700
   und 44px statt 40px Hoehe (die ganze Nav-Pille war dadurch 70 statt 66px). */
.nav-links a.btn { height: 2.5rem; padding-block: 0; font-weight: 700; color: #fff; }
.nav-links a.btn:hover { color: #fff; }

.nav-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05);
  color: var(--color-neutral-200);
}
.nav-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
}
.nav-mobile.is-open { display: block; }
.nav-mobile-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.nav-mobile-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(20rem, 85vw);
  background: rgba(16,16,16,0.97); backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.nav-mobile-title { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; }
.nav-mobile-panel a {
  display: block; padding: 0.75rem 0.5rem; border-radius: var(--radius);
  color: var(--color-neutral-300); font-size: 1rem; font-weight: 500;
}
.nav-mobile-panel a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-mobile-panel .btn { margin-top: 1rem; }
.nav-mobile-close {
  position: absolute; top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem;
  border: none; background: rgba(255,255,255,0.06); border-radius: var(--radius);
  color: var(--color-neutral-200); display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------- Hero */
.hero {
  /* Viewport-basierte Hoehe wie im Original (min-h-screen): nur so streckt
     sich der Weiss-Verlauf auf hohen Bildschirmen ueber die halbe
     Bildschirmhoehe, statt als kurze harte Rampe zu enden. Der fruehere
     Workaround mit festen Breakpoint-Hoehen (Chromium zaehlt ein absolut
     positioniertes <img> in vh-hohen Vorfahren nicht als LCP-Kandidat)
     brachte laut docs/FINAL_REPORT.md 2.2 ohnehin keinen messbaren
     Score-Gewinn (84 vorher wie nachher, realer LCP ~200ms) und wurde
     deshalb zugunsten der Optik zurueckgenommen. */
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  /* Original-Stops (from-black/70 via-black/30 to-white): funktioniert nur
     zusammen mit min-height:100vh am Hero - bei fixer Hero-Hoehe wird die
     Weiss-Rampe auf hohen Viewports zu kurz und wirkt hart. */
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3), #fff);
}
.hero-inner {
  margin-inline: auto; max-width: var(--container-max);
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  gap: 3.5rem; padding: 8rem 1rem 4rem;
}
@media (min-width: 768px) { .hero-inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .hero-inner { padding-top: 9rem; } }

.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }
/* Grid items default to min-width:auto (their content's min-content size).
   Below 1024px .hero-grid has a single implicit column, and store-badges'
   two fixed-size badge images would otherwise force the column wider than
   the viewport instead of wrapping (classic grid/flexbox min-width bug). */
.hero-grid > * { min-width: 0; }

.hero-copy { display: flex; flex-direction: column; gap: 1.5rem; }
/* Gemessen per getComputedStyle gegen das Original (alle Breakpoints):
   tracking-tight ist -0.025em, nicht -0.01em (Tailwinds Default-Wert fuer
   `tracking-tight`) - betraf systematisch jede h1/h2 dieser Art im Rebuild.
   line-height: Tailwinds `leading-[1.05]` (Original-Klasse) gilt nur fuer
   die Basisgroesse (text-4xl); `sm:text-5xl`/`xl:text-6xl` bringen ihre
   eigene Default-line-height (1) mit und ueberschreiben sie ab 640px. */
.hero-title {
  font-size: 2.25rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em;
  color: #fff;
}
@media (min-width: 640px) { .hero-title { font-size: 3rem; line-height: 1; } }
@media (min-width: 1280px) { .hero-title { font-size: 3.75rem; } }
.hero-lede { max-width: 36rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-neutral-300); }

.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: 0.5rem; }
.store-badges img { height: 46px; width: auto; }
/* Im Hero sind die Badges h-[46px], in der App-Sektion h-[48px] (legacy
   page.js App-Abschnitt) - die 2px fehlten der ganzen Sektion. */
.app-section .store-badges img { height: 48px; }
.store-badges a { transition: transform 0.2s; }
.store-badges a:hover { transform: translateY(-2px); }

.access-panel { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; }
/* Original: p-5 sm:p-6 (Hero.js Z.87) - die sm-Stufe fehlte, alles im Panel
   sass dadurch 4px zu weit aussen. */
@media (min-width: 640px) { .access-panel { padding: 1.5rem; } }
.access-panel .eyebrow { padding: 0 0.25rem 0.25rem; }
.access-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03); padding: 1rem; transition: var(--transition-standard);
}
.access-link:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.07); }
.access-link.highlight { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.1); }
.access-link.highlight:hover { border-color: rgba(248,113,113,0.5); background: rgba(239,68,68,0.2); }
.access-link .title { font-family: var(--font-display); font-weight: 600; color: #fff; margin: 0; }
.access-link .desc { margin-top: 2px; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-400); }
.access-link .icon-shift { display: inline-flex; flex-shrink: 0; }
.access-link .icon { width: 1.25rem; height: 1.25rem; color: var(--color-neutral-500); flex-shrink: 0; }
.access-link.highlight .icon { color: var(--color-red-400); }

/* Unter 640px einspaltig: in der 2-Spalten-Variante ragte das laengste Wort
   ("Hydrodynamische") bei 320-390px bis zu 60px ueber den Chip-Rand hinaus
   (per Playwright vermessen, docs/qa) - einzeilig gestapelt passt jeder Chip. */
.trust-strip { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-chip {
  display: flex; align-items: center; gap: 0.75rem;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.5); padding: 0.875rem 1rem; backdrop-filter: blur(16px);
}
.trust-chip .icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-red-400); }
.trust-chip span { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-neutral-300); }

/* ------------------------------------------------------------ Sections */
.page-sections {
  display: flex; flex-direction: column; align-items: center; gap: 5rem;
  padding: 2rem 1rem 6rem;
}
@media (min-width: 768px) { .page-sections { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .page-sections { gap: 7rem; } }

.section-heading { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; }
.section-heading.align-left { align-items: flex-start; text-align: left; }
/* .align-left swaps align-items from the default "stretch" to "flex-start",
   so the h2 (a flex item without an explicit width) sizes to its own
   max-content instead of the container's width - on narrow viewports a long
   heading then overflows past its own section instead of wrapping. */
/* Zeilenhoehe fehlte komplett (fiel auf body-line-height 1.5 zurueck) -
   Original nutzt Tailwinds Default-line-height fuer text-3xl/lg:text-4xl
   (2.25rem/2.5rem), gemessen per getComputedStyle. tracking-tight = -0.025em. */
.section-heading h2 { max-width: 100%; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.025em; color: var(--color-neutral-900); }
@media (min-width: 1024px) { .section-heading h2 { font-size: 2.25rem; line-height: 2.5rem; } }

.section-block { width: 100%; max-width: var(--container-max); padding: 2rem; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .section-block { padding: 3.5rem; } }
.section-narrow { max-width: 48rem; margin-inline: auto; }
.prose { display: flex; flex-direction: column; gap: 1.25rem; font-size: 15px; line-height: 1.625; color: var(--color-neutral-600); }
.prose strong { color: var(--color-neutral-900); }
/* .prose ist ein Flex-CONTAINER - auf einen einzelnen <p> angewendet macht es
   jede Textzeile und jeden inline-Link zu einem eigenen Flex-Item (Link auf
   eigener, volle Breite fuellender Zeile, Absatz 44px zu hoch). Fuer solche
   Einzelabsaetze nur die Textwerte: */
.prose-text { font-size: 15px; line-height: 1.625; color: var(--color-neutral-600); }
/* Der glass-subtle-Kasten neben dem FAS-Video nutzt im Original space-y-4
   (16px) statt der space-y-5 (20px) der uebrigen Prosa-Bloecke. */
.prose-tight { gap: 1rem; }

.two-col { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.video-frame {
  aspect-ratio: 16/9; width: 100%; border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.1);
}
.video-frame.on-dark { border: none; border-radius: 0; }

/* YouTube-Facade: laedt Thumbnail statt Player/Werbe-Skripten, Klick startet erst den echten iframe (Performance). */
.yt-facade {
  position: relative; display: flex; align-items: center; justify-content: center;
  background-color: #000; cursor: pointer;
  overflow: hidden;
  /* Die Player-Leisten setzt YouTube in Roboto - lokal nicht eingebettet,
     Arial/Liberation Sans ist der naechstliegende metrische Ersatz. */
  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
}
/* Thumbnail als natives lazy <img> statt background-image: identisches
   Rendering (cover), aber unterhalb des Viewports erst bei Bedarf geladen -
   background-image wuerde sofort laden und den LCP des Hero-Bilds wuergen. */
.yt-facade .yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Nachbau des gecuten YouTube-Embeds (am Original per Screenshot vermessen):
   oben Verlauf mit Kanal-Avatar (40px), Videotitel 18px/24 und Kanalname,
   mittig der rote 62x44-Play-Button (#ff0033, Radius 10px), unten rechts
   "Ansehen auf YouTube". Kein Dim-Overlay und kein Hover-Effekt - das
   Original-Embed veraendert sich beim Hovern nicht. */
.yt-chrome { position: absolute; left: 0; right: 0; pointer-events: none; }
.yt-top {
  top: 0; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem;
  height: 6rem; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.3) 45%, transparent);
}
.yt-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.yt-meta { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; text-align: left; }
.yt-video-title { color: #fff; font-size: 18px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.yt-channel { color: rgba(255,255,255,0.75); font-size: 12px; line-height: 16px; margin-top: 2px; }
.yt-facade .yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 44px; border-radius: 10px; background: #ff0033; color: #fff;
}
.yt-facade .yt-play svg { width: 1.5rem; height: 1.5rem; margin-left: 2px; }
.yt-bottom {
  bottom: 0; height: 3.5rem; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 2.75rem 0 1rem; background: linear-gradient(transparent, rgba(0,0,0,0.55));
}
.yt-watch { display: inline-flex; align-items: center; gap: 0.5rem; color: #eee; font-size: 16px; }
.yt-watch .yt-logo { width: 28px; height: 20px; }
.yt-watch b { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.5px; }
.yt-facade:focus-visible { outline: 2px solid var(--color-red-500); outline-offset: 2px; }
/* Schmale Facades (z.B. Referenzkarten bei 390px: ~246px Innenbreite): die
   fuer breite Embeds vermessene Chrome passte nicht mehr - "Ansehen auf
   YouTube" brach zweizeilig um und ueberlagerte das Thumbnail. Das echte
   YouTube-Embed verkleinert bei solchen Breiten Avatar/Titel/Play-Button und
   laesst das "Ansehen auf"-Label weg; per Container-Query nachgebildet,
   breite Facades bleiben pixelidentisch. */
.yt-facade { container-type: inline-size; }
@container (max-width: 380px) {
  .yt-avatar { width: 32px; height: 32px; }
  .yt-video-title { font-size: 15px; line-height: 20px; }
  .yt-top { height: 4.5rem; padding: 0.6rem; gap: 0.6rem; }
  .yt-watch { font-size: 14px; }
  .yt-watch b { font-size: 15px; }
  .yt-watch .yt-logo { width: 24px; height: 17px; }
  .yt-bottom { height: 3rem; padding: 0 1rem; }
}
@container (max-width: 290px) {
  .yt-watch-label { display: none; }
  .yt-facade .yt-play { width: 48px; height: 34px; }
  .yt-facade .yt-play svg { width: 1.25rem; height: 1.25rem; }
}

.ref-grid { display: grid; gap: 1.5rem; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 2.5rem; }
@media (min-width: 1024px) { .ref-grid { grid-template-columns: 1fr 1fr; } }
.ref-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; }

.pdf-link {
  display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content;
  border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.02); padding: 0.75rem 1.25rem; transition: var(--transition-standard);
}
.pdf-link:hover { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.1); }
.pdf-link .icon { width: 1.25rem; height: 1.25rem; color: var(--color-neutral-500); }
.pdf-link:hover .icon { color: var(--color-red-600); }
/* line-height fehlte: Poppins-Default (~21px) statt text-sm 20px - der ganze
   Kasten wurde 47 statt 46px hoch und schob die Referenzkarte um 1px. */
.pdf-link span { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--color-neutral-600); }
.pdf-link:hover span { color: var(--color-neutral-900); }

.img-pair { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(0,0,0,0.1); }
@media (min-width: 1024px) { .img-pair { flex-direction: row; } }
.img-pair img { width: 100%; height: auto; }
@media (min-width: 1024px) { .img-pair img { width: 50%; } }

.two-video-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .two-video-grid { grid-template-columns: 1fr 1fr; } }

.app-section { display: grid; align-items: center; gap: 2.5rem; }
@media (min-width: 1024px) { .app-section { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

/* --------------------------------------------------------- Feature-Image (Workshops-Teaser) */
/* Die FeatureImage-Karte hat im Original selbst KEIN Padding: der Textteil
   bringt p-8/lg:p-12 mit, der Bildteil p-4/md:p-6. Vorher lag hier das
   generische .section-block-Padding (2rem/3.5rem) auf beiden Haelften -
   das Bild bekam dadurch mehr als das Doppelte des Original-Randes. */
.feature-image-section { width: 100%; max-width: var(--container-max); }
.feature-image { display: flex; flex-direction: column; }
/* Original (legacy/app/components/FeatureImage.js): h2 = text-3xl lg:text-4xl
   font-bold tracking-tight; Fliesstext = text-base leading-relaxed neutral-500.
   Der Rebuild hatte fuer beide gar keine Regel (h2 fiel auf den Browser-Default
   1.5em/24px zurueck, der Absatz uebernahm faelschlich die .prose-Werte). */
.feature-image-body h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-neutral-900); }
@media (min-width: 1024px) { .feature-image-body h2 { font-size: 2.25rem; line-height: 2.5rem; } }
.feature-image-text { font-size: 1rem; line-height: 1.625; color: var(--color-neutral-500); }
@media (min-width: 768px) { .feature-image { flex-direction: row; } }
.feature-image-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: 2rem; }
@media (min-width: 1024px) { .feature-image-body { padding: 3rem; } }
/* Wie im Original: kein absolut positioniertes Bild, sondern h-full/w-full in
   einem gepolsterten, relativen Rahmen. Die Bildhoehe ergibt sich (mangels
   definiter Elternhoehe) aus dem eigenen Seitenverhaeltnis 696x782 und
   bestimmt damit - genau wie im Original - die Hoehe der Sektion. */
.feature-image-media { position: relative; flex: 1; padding: 1rem; }
@media (min-width: 768px) { .feature-image-media { padding: 1.5rem; } }
.feature-image-media img {
  width: 100%; height: 100%;
  border-radius: var(--radius-lg); border: 1px solid rgba(0,0,0,0.1); object-fit: cover;
}
/* Original: max-w-md = 28rem (448px), nicht 26rem - der Mockup-Rahmen war
   32px zu schmal und jede Kante lag daneben. */
.app-mockup { width: 100%; height: auto; max-width: 28rem; margin-inline: auto; }

/* ----------------------------------------------------------- Innovation Day */
.innovation-section {
  position: relative; width: 100%; max-width: var(--container-max);
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  overflow: hidden; border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,0.1);
  padding: 4rem 1.5rem;
  color: #fff;
}
@media (min-width: 1024px) { .innovation-section { padding: 5rem 6rem; } }
.innovation-section .bg-img { position: absolute; inset: 0; z-index: -3; }
.innovation-section .bg-img img { width: 100%; height: 100%; object-fit: cover; }
.innovation-section .bg-tint { position: absolute; inset: 0; z-index: -2; background: rgba(8,8,8,0.6); backdrop-filter: blur(40px); }
.innovation-section .bg-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(220,38,38,0.1), transparent 65%); }
.innovation-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.innovation-copy h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; }
@media (min-width: 1024px) { .innovation-copy h2 { font-size: 2.25rem; line-height: 2.5rem; } }
.innovation-copy p { max-width: 42rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--color-neutral-200); }
/* Gleicher Spezifitaetsbug wie beim FWS-Teaser: .innovation-copy p (0,1,1)
   schlug .eyebrow (0,1,0) - das Eyebrow "Event" stand mit 18px/28px statt
   12px/18px da und schob die ganze Sektion 10px auseinander (Original:
   .eyebrow text-[12px], Zeilenhoehe 18px, gemessen per getComputedStyle). */
.innovation-copy p.eyebrow { font-size: 12px; line-height: 1.5; }
.innovation-video { position: relative; width: 100%; max-width: 48rem; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.innovation-partners { position: relative; display: flex; height: 18px; align-items: center; gap: 1.25rem; opacity: 0.8; }
.innovation-partners img, .innovation-partners svg { height: 100%; width: auto; filter: brightness(0) invert(1); }
.innovation-partners .sep { width: 1px; height: 100%; background: rgba(255,255,255,0.25); }

/* ----------------------------------------------------------- Ort-Grid (pSEO) */
.place-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .place-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .place-grid { grid-template-columns: repeat(3, 1fr); } }
/* Flaggschiff-Grid auf der Hub-Seite (/starkregen): bleibt bei 2 Spalten, kein 3-Spalten-Sprung ab 1024px. */
.flagship-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .flagship-grid { grid-template-columns: 1fr 1fr; } }
.place-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; transition: var(--transition-standard); }
.place-card:hover { border-color: rgba(239,68,68,0.3); background: rgba(0,0,0,0.04); }
.place-card .row-top { display: flex; align-items: center; justify-content: space-between; }
.place-card .pin {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius); display: flex; align-items: center;
  justify-content: center; border: 1px solid rgba(239,68,68,0.25); background: rgba(239,68,68,0.1);
}
.place-card .pin .icon { width: 1.25rem; height: 1.25rem; color: var(--color-red-600); }
/* Startseiten-Karten zeigen im Original nur das blanke MapPin-Icon
   (h-5 w-5 text-red-600/90) ohne die gerahmte Box der Hub-Flaggschiffkarten. */
.place-card .pin-plain { display: inline-flex; }
.place-card .pin-plain .icon { width: 1.25rem; height: 1.25rem; color: rgba(220,38,38,0.9); }
/* Hub-Flaggschiffkarten: p-7 / gap-5 / Pfeil h-5 (Startseite: p-6 / gap-3 / h-4). */
.flagship-grid .place-card { padding: 1.75rem; gap: 1.25rem; }
.flagship-grid .place-card .row-top { align-items: flex-start; }
.flagship-grid .place-card .arrow { width: 1.25rem; height: 1.25rem; }
.place-card .arrow { width: 1rem; height: 1rem; color: var(--color-neutral-500); transition: var(--transition-fast); }
.place-card:hover .arrow { transform: translateX(4px); color: var(--color-red-600); }
.place-card h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--color-neutral-900); }
.place-card .sub { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-500); }
/* Hub-Flaggschiffkarten nutzen im Original text-sm leading-relaxed ohne mt. */
.flagship-grid .place-card .sub { margin-top: 0; line-height: 1.625; }
.flagship-grid .place-card h2 { line-height: 1.75rem; }
.place-card .meta {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--color-neutral-500);
}
.place-card-dashed {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius-lg); border: 1px dashed rgba(0,0,0,0.15); padding: 1.5rem; text-align: center;
  transition: var(--transition-standard);
}
.place-card-dashed:hover { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.05); }
.place-card-dashed .cta { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--color-neutral-600); }
.place-card-dashed:hover .cta { color: var(--color-neutral-900); }
.place-card-dashed .sub { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-500); }

.stat-row { display: flex; gap: 1.5rem; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 1rem; }
.stat-row .value { font-family: var(--font-mono); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--color-red-600); font-variant-numeric: tabular-nums; }
.stat-row .label { margin-top: 2px; font-size: 0.75rem; line-height: 1rem; color: var(--color-neutral-500); }

/* -------------------------------------------------------- FWS-Teaser */
.fws-teaser {
  position: relative; isolation: isolate; width: 100%; max-width: var(--container-max); overflow: hidden;
  border-radius: var(--radius-xl); border: 1px solid rgba(0,0,0,0.1); background: var(--color-storm-950);
  padding: 3.5rem 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
}
@media (min-width: 640px) { .fws-teaser { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .fws-teaser { padding: 4rem 3.5rem; } }
.fws-teaser .bg-img { position: absolute; inset: 0; z-index: -3; }
.fws-teaser .bg-img img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px); transform: scale(1.05); }
.fws-teaser .bg-tint { position: absolute; inset: 0; z-index: -2; background: linear-gradient(to right, var(--color-storm-950), rgba(8,8,8,0.9), rgba(8,8,8,0.5)); }
.fws-teaser .bg-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 20%, rgba(220,38,38,0.18), transparent 38%); }
.fws-teaser-body { max-width: 44rem; }
.fws-teaser-body h2 { margin-top: 1rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 640px) { .fws-teaser-body h2 { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 1024px) { .fws-teaser-body h2 { font-size: 3rem; line-height: 1; } }
.fws-teaser-body p { margin-top: 1.25rem; max-width: 42rem; font-size: 1rem; line-height: 1.625; color: var(--color-neutral-300); }
@media (min-width: 640px) { .fws-teaser-body p { font-size: 1.125rem; line-height: 1.75rem; } }
/* Der Eyebrow im Teaser ist ebenfalls ein <p>: die zwei-Klassen-Regel
   .fws-teaser-body p ueberschrieb sonst font-size/margin der .eyebrow-Regel
   (12px -> 18px, mt 0 -> 20px). Spezifitaetsbug, gegen das Original gemessen. */
.fws-teaser-body p.eyebrow { margin-top: 0; font-size: 12px; line-height: 1.5; }
@media (min-width: 640px) { .fws-teaser-body p.eyebrow { font-size: 12px; line-height: 1.5; } }
.benefit-chips { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.benefit-chip {
  display: flex; align-items: center; gap: 0.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.3); padding: 0.5rem 0.9rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--color-neutral-200);
  backdrop-filter: blur(16px);
}
@media (min-width: 640px) { .benefit-chip { font-size: 0.875rem; line-height: 1.25rem; } }
.benefit-chip .icon { width: 1rem; height: 1rem; color: var(--color-red-400); }
.fws-teaser-body .btn { margin-top: 2rem; }

/* --------------------------------------------------------------- Footer */
.site-footer { position: relative; border-top: 1px solid rgba(0,0,0,0.06); background: var(--color-neutral-50); }
/* Original: <div class="mx-auto max-w-6xl px-4 py-16 md:px-6"> umschliesst
   Spaltenraster UND Fusszeile. Ohne max-width lief der Footer als einziger
   Seitenbereich ueber die volle Fensterbreite (Spalten 312px statt 240px). */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; max-width: var(--container-max); margin-inline: auto; padding: 4rem 1rem 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand { display: flex; align-items: center; gap: 0.65rem; }
.footer-brand .icon { width: 1.5rem; height: 1.5rem; color: var(--color-red-600); }
.footer-brand span { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.025em; color: var(--color-neutral-900); }
.footer-col p.desc { margin-top: 1rem; font-size: 0.875rem; line-height: 1.625; color: var(--color-neutral-500); }
.footer-col a.footer-service-link {
  margin-top: 1.25rem; display: inline-flex; align-items: center; border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); padding: 0.5rem 1rem;
  /* line-height 20px wie text-sm im Original: die 24px-Zeilenhoehe der
     gestapelten Footer-Links (Touch-Regel unten) machte den Kasten 42
     statt 38px hoch - der ganze Footer war dadurch 4px zu hoch. */
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--color-neutral-700);
}
/* Der Service-Link wechselt im Original NICHT die Textfarbe (nur Rahmen/Flaeche);
   die generische .footer-col a:hover-Regel hat sie bisher trotzdem gesetzt. */
.footer-col a.footer-service-link { transition: var(--transition-colors); }
.footer-col a.footer-service-link:hover { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.06); color: var(--color-neutral-700); }
.footer-col a.footer-all:hover { color: var(--color-red-600); }
.footer-col h2, .footer-col h3 { margin: 0; }
.footer-col ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-500); transition: var(--transition-colors); }
.footer-col a:hover { color: var(--color-neutral-900); }
.footer-col a.footer-all { font-weight: 600; color: var(--color-red-600); }
.footer-bottom {
  margin-top: 3.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
  justify-content: space-between; border-top: 1px solid rgba(0,0,0,0.06);
  max-width: var(--container-max); margin-inline: auto; padding: 2rem 1rem 4rem;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; } }
@media (min-width: 768px) { .footer-bottom { padding-inline: 1.5rem; } }
.footer-bottom p { font-size: 0.75rem; line-height: 1rem; color: var(--color-neutral-500); }
.footer-bottom .tagline { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-neutral-600); }

/* --------------------------------------------------------------- FAQ-Teaser (Problem) */
.help-banner {
  margin-inline: auto; width: 100%; max-width: var(--container-max); padding: 0 1rem 6rem;
  display: block;
}
@media (min-width: 768px) { .help-banner { padding-inline: 1.5rem; } }
.help-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 2rem; transition: var(--transition-standard);
}
@media (min-width: 640px) { .help-card { flex-direction: row; align-items: center; } }
@media (min-width: 1024px) { .help-card { padding: 3rem; } }
.help-card:hover { border-color: rgba(239,68,68,0.3); background: rgba(0,0,0,0.04); }
.help-card-left { display: flex; align-items: flex-start; gap: 1.25rem; }
.help-icon {
  display: flex; height: 3rem; width: 3rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.1);
}
.help-icon .icon { width: 1.5rem; height: 1.5rem; color: var(--color-red-600); }
.help-card h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-neutral-900); }
@media (min-width: 1024px) { .help-card h2 { font-size: 1.875rem; line-height: 2.25rem; } }
.help-card p { margin-top: 0.5rem; max-width: 36rem; font-size: 1rem; color: var(--color-neutral-500); }

/* --------------------------------------------------------- Breadcrumb / Page header */
.breadcrumb {
  margin-bottom: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--color-neutral-500);
}
.breadcrumb a { transition: var(--transition-colors); }
.breadcrumb a:hover { color: var(--color-neutral-600); }
.breadcrumb .current { color: var(--color-red-600); }

.page-main { margin-inline: auto; max-width: var(--container-max); padding: 9rem 1rem 6rem; }
@media (min-width: 768px) { .page-main { padding-inline: 1.5rem; } }

.page-hero { display: flex; flex-direction: column; gap: 1rem; }
/* Original (kein explizites leading-* im Quellcode) nutzt Tailwinds
   Default-line-height fuer text-4xl/lg:text-5xl (2.5rem/1) - gemessen. */
.page-hero h1 { max-width: 48rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--color-neutral-900); }
@media (min-width: 1024px) { .page-hero h1 { font-size: 3rem; line-height: 1; } }
.page-hero .lede { max-width: 42rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-neutral-600); }

.hub-section { margin-top: 3.5rem; }
.hub-section + .hub-section { margin-top: 3rem; }
.hub-section > .eyebrow { display: block; }
.hub-section .lede { margin-top: 0.75rem; max-width: 42rem; font-size: 1rem; line-height: 1.625; color: var(--color-neutral-600); }

.state-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .state-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .state-grid { grid-template-columns: repeat(4, 1fr); } }
.state-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.25rem; transition: var(--transition-standard); }
.state-card:hover { border-color: rgba(239,68,68,0.3); background: rgba(0,0,0,0.04); }
.state-card .left { display: flex; align-items: center; gap: 0.75rem; }
/* Nur das linke Orts-/Landes-Icon ist rot (text-red-600/80); der Pfeil rechts
   ist ein eigenes Element (.arrow, neutral-400 -> Hover rot + 4px Shift). Die
   vorherige unscoped Regel faerbte auch den Pfeil dauerhaft rot und liess die
   .state-card:hover .arrow-Regel ins Leere laufen (Template lieferte das
   blanke svg.icon ohne .arrow-Wrapper) - am Original gemessen. */
.state-card .left .icon { width: 1rem; height: 1rem; flex-shrink: 0; color: rgba(220,38,38,0.8); }
.state-card .name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-neutral-900); }
.state-card .count { font-size: 0.75rem; line-height: 1rem; color: var(--color-neutral-500); }
.state-card .arrow { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-neutral-400); transition: var(--transition-fast); }
.state-card:hover .arrow { transform: translateX(4px); color: var(--color-red-600); }

.footnote { margin-top: 3rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-500); }
/* Ortsseiten-Fussnote unter der KOSTRA-Tabelle: text-xs leading-relaxed. */
.footnote-xs { font-size: 0.75rem; line-height: 1.625; }

/* ------------------------------------------------------------- Ortsseite */
.place-hero { display: flex; flex-direction: column; gap: 1.5rem; }
.place-hero .row-top { display: flex; align-items: center; gap: 0.75rem; }
.place-hero .row-top .pin {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(239,68,68,0.25); background: rgba(239,68,68,0.1);
}
.place-hero .row-top .pin .icon { width: 1.25rem; height: 1.25rem; color: var(--color-red-600); }
/* Original: `leading-[1.08]` bis lg, danach text-5xl-Default (line-height:1). */
.place-hero h1 { max-width: 56rem; font-size: 2.25rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--color-neutral-900); }
@media (min-width: 1024px) { .place-hero h1 { font-size: 3rem; line-height: 1; } }
.place-hero .lede { max-width: 48rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-neutral-600); }

.stat-tiles { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 1024px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
/* min-width:auto-Bug wie bei .hero-grid: unbrechbare Woerter ("KOSTRA-DWD-2020",
   "Bemessungswerten") weiteten sonst die Grid-Spur und schoben die Kacheln bei
   320px 24px aus dem Viewport (Hub-Scan). Unter 360px einspaltig, damit die
   Labels gar nicht erst notumbrechen muessen. */
.stat-tiles > * { min-width: 0; }
@media (max-width: 359px) { .stat-tiles { grid-template-columns: 1fr; } }
.stat-tile { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem; }
.stat-tile .value { font-family: var(--font-mono); font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--color-red-600); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .stat-tile .value { font-size: 1.875rem; line-height: 2.25rem; } }
.stat-tile .label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--color-neutral-700); }
.stat-tile .sub { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-neutral-500); }
.stat-note { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--color-neutral-500); }

.content-grid { margin-top: 4rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .content-grid { grid-template-columns: 1fr 1fr; } }
/* Same min-width:auto fix as .hero-grid: a single long compound word (e.g.
   "Ueberflutungsrisiko") in .content-card .head h2 would otherwise force
   the card wider than the viewport on narrow screens. */
.content-grid > * { min-width: 0; }
.content-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; }
@media (min-width: 1024px) { .content-card { padding: 2.5rem; } }
.content-card .head { display: flex; align-items: center; gap: 0.75rem; }
.content-card .head .icon { width: 1.5rem; height: 1.5rem; color: var(--color-red-600); }
.content-card .head .icon.warn { color: var(--color-amber-500); }
.content-card h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-neutral-900); }
.content-card p { font-size: 15px; line-height: 1.625; color: var(--color-neutral-600); }

.kostra-section { margin-top: 4rem; }
.kostra-section .head { display: flex; flex-direction: column; gap: 0.75rem; }
.kostra-section h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-neutral-900); }
.kostra-section .lede { max-width: 48rem; font-size: 1rem; line-height: 1.625; color: var(--color-neutral-500); }
.kostra-wrap { margin-top: 2rem; overflow-x: auto; }
/* Unter der Tabellen-Mindestbreite (560px + Rand) ist die hervorgehobene
   100-Jahre-Spalte anfangs unsichtbar und nichts deutet auf den internen
   Scrollbereich hin - die Einheiten-Notiz bekommt deshalb einen knappen
   Wisch-Hinweis. */
@media (max-width: 639px) {
  .kostra-unit-note::after { content: " · seitlich wischen für alle Spalten"; }
}
/* Einheit direkt am Tisch sichtbar statt nur in der sr-only-Caption und dem
   Fliesstext davor - das Original zeigt die Einheit nirgends direkt an der
   Tabelle selbst (siehe DECISIONS.md, "wo es besser geht, besser machen"). */
.kostra-unit-note { margin: 0; padding: 0.85rem 1rem 0; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-neutral-500); }
/* Hinweisblock, wenn fuer einen Ort keine KOSTRA-Werte vorliegen: ehrlicher
   Text statt einer Tabelle aus 35 Gedankenstrichen (siehe DECISIONS.md 11.3). */
.kostra-empty { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--color-neutral-600); }
@media (min-width: 1024px) { .kostra-empty { padding: 2rem; } }
.kostra-empty strong { color: var(--color-neutral-900); }
.kostra-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.875rem; }
.kostra-table th {
  padding: 0.9rem 1rem; text-align: right; font-family: var(--font-mono); font-size: 11px; line-height: 1.25rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-neutral-500);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.kostra-table th:first-child { text-align: left; }
.kostra-table th.highlight { color: var(--color-red-600); }
.kostra-table td {
  padding: 0.75rem 1rem; text-align: right; font-family: var(--font-mono); font-size: 13px; line-height: 1.25rem;
  font-variant-numeric: tabular-nums; color: var(--color-neutral-600);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.kostra-table tr:last-child td { border-bottom: none; }
/* Original: hover:bg-black/[0.02] + transition-colors auf der <tr> selbst
   (150ms, Tailwind-Kurve) - vorher lag das Hover-Grau ohne Uebergang auf den
   <td> und schaltete hart um. */
.kostra-table tbody tr { transition: var(--transition-colors); }
.kostra-table tbody tr:hover { background: rgba(0,0,0,0.02); }
.kostra-table td:first-child { text-align: left; font-weight: 500; }
.kostra-table td.highlight { font-weight: 600; color: var(--color-red-600); }

/* Schmaler Zwischen-CTA der Ortsseiten (nach der KOSTRA-Tabelle) */
.cta-inline {
  margin-top: 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 1.25rem 1.5rem;
}
.cta-inline p { font-size: 0.9375rem; line-height: 1.6; color: var(--color-neutral-600); max-width: 40rem; }
.cta-inline p strong { color: var(--color-neutral-900); }
.cta-inline .btn { flex-shrink: 0; }
@media (max-width: 767px) { .cta-inline { flex-direction: column; align-items: flex-start; } }

.events-grid { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .events-grid { grid-template-columns: 1fr 1fr; } }
.event-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; }
.event-card .year { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-red-600); }
.event-card h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--color-neutral-900); }
.event-card p { font-size: 0.875rem; line-height: 1.625; color: var(--color-neutral-500); }

.faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.faq-item { padding: 1.5rem; }
.faq-item[open] { background: rgba(0,0,0,0.03); }
.faq-item summary {
  display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between;
  gap: 1rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-neutral-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .toggle-icon { flex-shrink: 0; font-family: var(--font-mono); font-size: 1.125rem; color: var(--color-red-600); transition: transform 0.3s var(--ease-std); }
.faq-item[open] .toggle-icon { transform: rotate(45deg); }
.faq-item .answer { margin-top: 1rem; font-size: 15px; line-height: 1.625; color: var(--color-neutral-600); }

.place-cta { position: relative; margin-top: 4rem; overflow: hidden; padding: 2rem; }
@media (min-width: 1024px) { .place-cta { padding: 3rem; } }
.place-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(220,38,38,0.14), transparent 60%);
}
.place-cta-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2rem; }
@media (min-width: 1024px) { .place-cta-inner { flex-direction: row; align-items: center; } }
.place-cta-left { display: flex; align-items: flex-start; gap: 1.25rem; }
.place-cta h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-neutral-900); }
@media (min-width: 1024px) { .place-cta h2 { font-size: 1.875rem; line-height: 2.25rem; } }
.place-cta p { margin-top: 0.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.625; color: var(--color-neutral-600); }
.place-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.related-section { margin-top: 4rem; }
.related-section h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--color-neutral-900); }
.related-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.related-links { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.related-links a {
  border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.02);
  padding: 0.6rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-neutral-600);
  transition: var(--transition-fast);
}
.related-links a:hover { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.1); color: var(--color-neutral-900); }

.az-groups { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
.az-letter { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--color-red-600); }
.az-links { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.az-links a {
  border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.02);
  padding: 0.5rem 0.9rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-neutral-600);
  transition: var(--transition-fast);
}
.az-links a:hover { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.1); color: var(--color-neutral-900); }

.chip-inline {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius);
  border: 1px solid rgba(239,68,68,0.25); background: rgba(239,68,68,0.1); padding: 0.6rem 1rem;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--color-neutral-900); transition: var(--transition-fast);
}
.chip-inline:hover { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.15); }
.chip-inline .icon { width: 0.875rem; height: 0.875rem; color: var(--color-red-600); }
.chip-row { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------- FWS-Formular */
.fws-page-hero {
  position: relative; isolation: isolate; background: var(--color-storm-950);
  /* clip statt hidden: Der Anker #fws-lead-form liegt IN diesem Hero - die
     Fragment-Navigation scrollt auch overflow:hidden-Vorfahren intern
     (scrollTop 38px) und schob damit die geblurte Hintergrund-Ebene nach
     oben, sodass ihr Blur-Saum an der Unterkante sichtbar wurde. clip macht
     die Box unscrollbar; hidden bleibt als Fallback fuer alte Browser. */
  overflow: hidden; overflow: clip;
  padding: 8rem 1rem 5rem;
}
@media (min-width: 768px) { .fws-page-hero { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .fws-page-hero { padding: 10rem 1.5rem 7rem; } }
.fws-page-hero .bg-img { position: absolute; inset: 0; z-index: -30; }
.fws-page-hero .bg-img img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px); transform: scale(1.05); }
.fws-page-hero .bg-tint { position: absolute; inset: 0; z-index: -20; background: rgba(8,8,8,0.75); }
.fws-page-hero .bg-glow {
  position: absolute; inset: 0; z-index: -10;
  background: radial-gradient(circle at 20% 20%, rgba(14,165,233,0.18), transparent 38%),
              radial-gradient(circle at 80% 70%, rgba(220,38,38,0.2), transparent 42%);
}
.fws-hero-grid { margin-inline: auto; max-width: var(--container-max); display: grid; align-items: center; gap: 3rem; }
@media (min-width: 1024px) { .fws-hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 4rem; } }
.fws-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.3); padding: 0.5rem 0.9rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  line-height: 1rem; letter-spacing: 0.14em; color: var(--color-neutral-200); backdrop-filter: blur(16px);
}
.fws-badge .icon { width: 1rem; height: 1rem; color: var(--color-red-400); }
.fws-page-hero h1 { margin-top: 1.5rem; font-size: 2.25rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 640px) { .fws-page-hero h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1280px) { .fws-page-hero h1 { font-size: 3.75rem; } }
.fws-page-hero .lede { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-neutral-300); }
.fws-page-hero .lede-small { margin-top: 1.25rem; max-width: 42rem; font-size: 0.875rem; line-height: 1.625; color: var(--color-neutral-400); }

.fws-capabilities { padding: 5rem 1rem; }
@media (min-width: 768px) { .fws-capabilities { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .fws-capabilities { padding-block: 7rem; } }
.fws-capabilities-inner { margin-inline: auto; max-width: var(--container-max); }
.fws-capabilities .section-heading .lede { margin-top: 0.5rem; font-size: 1rem; line-height: 1.625; color: var(--color-neutral-600); }
.cap-grid { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
.cap-card { padding: 1.5rem; }
@media (min-width: 1024px) { .cap-card { padding: 1.75rem; } }
.cap-card .row-top { display: flex; align-items: center; justify-content: space-between; }
.cap-card .icon-box {
  display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center;
  border-radius: var(--radius); background: rgba(220,38,38,0.1); color: var(--color-red-600);
}
.cap-card .icon-box .icon { width: 1.25rem; height: 1.25rem; }
.cap-card .index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-neutral-600); }
.cap-card h3 { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--color-neutral-900); }
.cap-card p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--color-neutral-600); }

.lead-form {
  border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.55);
  padding: 1.25rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); backdrop-filter: blur(24px);
  /* Anker-Ziel der SEO-Seiten-CTAs (/flutwarnsystem#fws-lead-form): ohne
     scroll-margin laege die Formular-Oberkante unter dem fixen Header. */
  scroll-margin-top: 7rem;
}
@media (min-width: 640px) { .lead-form { padding: 1.75rem; } }
.lead-form h2 { margin-top: 0.5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #fff; }
.lead-form .intro-text { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--color-neutral-400); }

.contact-toggle {
  margin-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); padding: 0.25rem; gap: 0.25rem;
}
.contact-toggle button {
  display: flex; height: 2.5rem; align-items: center; justify-content: center; gap: 0.5rem;
  border: none; border-radius: var(--radius-sm); background: transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  color: var(--color-neutral-400); transition: var(--transition-fast);
}
.contact-toggle button .icon { width: 1rem; height: 1rem; }
.contact-toggle button:hover { color: #fff; }
.contact-toggle button[aria-pressed="true"] { background: #fff; color: var(--color-neutral-900); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }

.form-fields { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.form-field { display: block; position: relative; }
.form-field .field-label { margin-bottom: 0.5rem; display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--color-neutral-200); }
.form-field .field-label .req { color: var(--color-red-400); }
.field-input-wrap { position: relative; display: block; }
.field-input-wrap .icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem;
  color: var(--color-neutral-500); pointer-events: none;
}
.field-input-wrap input {
  height: 3rem; width: 100%; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07); padding: 0 1rem 0 2.75rem; font-size: 0.875rem; color: #fff; outline: none;
  /* Original: Tailwind-Utility `transition` (150ms, Kurve 0.4/0/0.2/1, inkl.
     box-shadow - der Fokus-Ring blendet ein). Vorher 200ms/ease ohne Ring. */
  transition: border-color 0.15s var(--ease-std), background-color 0.15s var(--ease-std), box-shadow 0.15s var(--ease-std);
}
.field-input-wrap input::placeholder { color: var(--color-neutral-500); }
.field-input-wrap input:focus { border-color: rgba(248,113,113,0.7); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 4px rgba(239,68,68,0.1); }

.municipality-suggestions {
  position: absolute; z-index: 20; margin-top: 0.5rem; max-height: 15rem; width: 100%; overflow: auto;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.15); background: var(--color-storm-800);
  padding: 0.35rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); list-style: none; margin-left: 0; margin-bottom: 0;
}
.municipality-suggestions li { margin: 0; }
.municipality-suggestions button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; border: none; background: transparent;
  border-radius: 7px; padding: 0.6rem 0.75rem; text-align: left; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-200);
  /* Original: Tailwind-Utility `transition` (150ms) - Hover-Grau blendet ein. */
  transition: var(--transition-fast);
}
.municipality-suggestions button:hover, .municipality-suggestions button.is-active { background: rgba(255,255,255,0.1); }
.municipality-suggestions .state { margin-left: 1rem; font-size: 0.75rem; color: var(--color-neutral-500); }
/* "Kein Treffer"-Zustand: eigene Verbesserung ueber das Original hinaus, das
   die Liste bei 0 Treffern kommentarlos verschwinden laesst (siehe
   DECISIONS.md Abschnitt 11). Kein Button/keine Interaktion, daher eigener,
   ruhigerer Stil statt der Vorschlags-Zeilen. */
.municipality-empty { padding: 0.75rem 0.85rem; font-size: 0.8125rem; line-height: 1.5; color: var(--color-neutral-400); }

.field-checkbox { display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 0.25rem; font-size: 0.75rem; line-height: 1.625; color: var(--color-neutral-400); }
.field-checkbox input { margin-top: 0.15rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--color-red-600); }
.field-checkbox a { color: var(--color-neutral-200); text-decoration: underline; text-underline-offset: 2px; }
.field-checkbox a:hover { color: #fff; }
.field-hp { position: absolute; left: -9999px; top: -9999px; }

.form-error { margin-top: 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(248,113,113,0.25); background: rgba(248,113,113,0.1); padding: 0.65rem 0.75rem; font-size: 0.875rem; color: #fecaca; }
.form-submit { margin-top: 1.5rem; }
.form-hint { margin-top: 0.75rem; text-align: center; font-size: 11px; color: var(--color-neutral-400); }

.form-success {
  display: flex; min-height: 420px; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-xl); border: 1px solid rgba(52,211,153,0.25); background: rgba(52,211,153,0.08);
  padding: 2rem; text-align: center; backdrop-filter: blur(24px);
}
.form-success .icon-badge { display: flex; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center; border-radius: 999px; background: rgba(52,211,153,0.15); }
.form-success .icon-badge .icon { width: 1.75rem; height: 1.75rem; color: var(--color-emerald-300); }
.form-success h2 { margin-top: 1.5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #fff; }
.form-success p { margin-top: 0.75rem; max-width: 22rem; font-size: 0.875rem; line-height: 1.625; color: var(--color-neutral-300); }

/* -------------------------------------------------------------- Legal/Text-Seiten */
/* Original nutzt Tailwinds "container"-Komponente (center:true, padding:2rem,
   screens nur 2xl:1400px angepasst, sonst Tailwind-Standardbreakpoints) plus
   die expliziten Utilities px-4/md:px-6, die die Container-Padding ueberschreiben.
   Das ergibt eine breakpoint-abhaengige max-width, die NICHT mit dem sonst
   verwendeten --container-max (max-w-6xl, 1152px) uebereinstimmt. */
.legal-page { margin-inline: auto; width: 100%; padding: 8rem 1rem 7rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-900); }
@media (min-width: 640px) { .legal-page { max-width: 640px; } }
@media (min-width: 768px) { .legal-page { max-width: 768px; padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .legal-page { max-width: 1024px; } }
@media (min-width: 1280px) { .legal-page { max-width: 1280px; } }
@media (min-width: 1400px) { .legal-page { max-width: 1400px; } }
.legal-page h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 400; padding-bottom: 1rem; }
/* Der Datenschutztext des Originals nutzt fuer ALLE Zwischenueberschriften
   <h4> - direkt nach dem <h1>, also mit uebersprungenen Ebenen (WCAG
   heading-order, Lighthouse-Accessibility 98 statt 100). Im Rebuild sind die
   nummerierten Abschnitte jetzt <h2> und die Unterpunkte a)-k) <h3>; das
   Schriftbild bleibt exakt identisch (siehe DECISIONS.md 11.5). */
.legal-page h2, .legal-page h3, .legal-page h4 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; padding-block: 1rem; color: var(--color-neutral-900); }
.legal-page p { margin-bottom: 0; }
.legal-page ul { margin: 0; padding: 0; list-style: none; }
.legal-page li { margin-bottom: 0; }
/* Der Content-Dump enthaelt (wie im Original-DOM) den Seitentitel doppelt:
   einmal als eigenes <h1> (von uns fuer korrekte Dokument-Semantik ergaenzt)
   und einmal als der erste, unstylisierte div-Textknoten des 1:1 uebernommenen
   Bodys (entspricht der Original-Komponente <div className="text-2xl pb-4">,
   die visuell die einzige Ueberschrift ist). Damit die Ueberschrift wie im
   Original nur einmal sichtbar ist, wird dieser redundante erste Textknoten
   ausgeblendet - der Textinhalt selbst bleibt unveraendert im DOM. */
.legal-page > div > div > div:first-child { display: none; }

/* -------------------------------------------------------------- Changelog (/changelog/) */
/* Eigene Seite ohne Site-Header (siehe changelog.html). Nutzt wie imprint/
   data Tailwinds "container"-Komponente (center:true, 2xl:1400px), aber MIT
   konstantem px-4 (1rem) auf allen Breakpoints -- kein md:px-6 im Original. */
.changelog-page { margin-inline: auto; width: 100%; padding: 8rem 1rem 4rem; }
@media (min-width: 640px) { .changelog-page { max-width: 640px; } }
@media (min-width: 768px) { .changelog-page { max-width: 768px; } }
@media (min-width: 1024px) { .changelog-page { max-width: 1024px; } }
@media (min-width: 1280px) { .changelog-page { max-width: 1280px; } }
@media (min-width: 1400px) { .changelog-page { max-width: 1400px; } }

.changelog-back { margin-bottom: 1.5rem; }
@media (min-width: 640px) { .changelog-back { margin-bottom: 2rem; } }
.changelog-back a { display: inline-flex; align-items: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-gray-600); transition: var(--transition-colors); }
@media (min-width: 640px) { .changelog-back a { font-size: 1rem; line-height: 1.5rem; } }
.changelog-back a:hover { color: var(--color-gray-900); }
.changelog-back .icon { width: 1rem; height: 1rem; margin-right: 0.5rem; flex-shrink: 0; }
@media (min-width: 640px) { .changelog-back .icon { width: 1.25rem; height: 1.25rem; } }

.changelog-page h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .changelog-page h1 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 2rem; } }

.changelog-list { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .changelog-list { gap: 3rem; } }

/* Radius: shadcn-Card = rounded-lg = var(--radius) 9px (am Original gemessen),
   nicht die 12px unserer --radius-lg. */
.cl-card { border: 1px solid var(--color-gray-200); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 1rem; }
/* Kein flex-gap: das Original (shadcn CardHeader space-y-1.5 + mb-2 der
   Titelzeile + mt-1.5 der Beschreibung) kommt auf 14px Abstand - der
   zusaetzliche gap machte jeden Karten-Kopf 6px hoeher und schob alle
   folgenden Karten kumulativ nach unten (6/12/18px). */
.cl-card-header { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1rem; }
.cl-card-toprow { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .cl-card-toprow { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; } }
.cl-card-title { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -0.025em; margin: 0; }
@media (min-width: 640px) { .cl-card-title { font-size: 1.5rem; line-height: 2rem; } }
.cl-date-badge { display: inline-block; width: fit-content; border-radius: 9999px; padding: 0.25rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: #BD2734; border: 1px solid #E0A899; }
@media (min-width: 640px) { .cl-date-badge { padding: 0.5rem 1.5rem; } }
.cl-card-desc { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-neutral-500); margin: 0.375rem 0 0; }
@media (min-width: 640px) { .cl-card-desc { font-size: 1rem; line-height: 1.5rem; } }

.changelog-entries > .changelog-entry { border-top: 1px solid var(--color-gray-200); padding-top: 1rem; }
.changelog-entries > .changelog-entry + .changelog-entry { margin-top: 1rem; }
@media (min-width: 640px) { .changelog-entries > .changelog-entry + .changelog-entry { margin-top: 1.5rem; } }

/* Kein gap: der Radix/shadcn-AccordionTrigger stellt Inhalt und Chevron ohne
   Zwischenraum nebeneinander (justify-between) - unsere 16px verengten die
   Titelspalte und liessen z.B. "Login für Rettungskräfte & Verwaltung" bei
   390px anders umbrechen als im Original. */
.cl-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: center; cursor: pointer; }
.cl-trigger:focus-visible { outline: 2px solid var(--color-red-600); outline-offset: 3px; border-radius: 4px; }
.cl-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; min-width: 0; }
@media (min-width: 640px) { .cl-row { flex-direction: row; align-items: center; gap: 1rem; } }

/* border transparent (shadcn-Badge hat immer 1px Rand) - ohne ihn war der
   Chip 2px schmaler und der Zeilentitel rueckte 2px nach links; line-height
   1rem wie text-xs im Original. Farbabweichung blue-600/green-700 statt
   blue-500/green-500 bleibt bewusst (Kontrast, DECISIONS.md 11.2). */
.cl-badge { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; min-width: 100px; border: 1px solid transparent; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #fff; white-space: nowrap; }
.cl-badge .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.cl-badge-neuerung { background: var(--color-blue-600); }
.cl-badge-optimierung { background: var(--color-green-700); }

/* Kein text-align hier: im Original ist der Accordion-Kopf ein nativer
   <button>, dessen UA-Default (center) den umgebrochenen Titel auf Mobile
   ZENTRIERT - statische Zeilen (div) bleiben links. Wir bilden das ueber
   text-align:center am .cl-trigger nach; .cl-title erbt jeweils. */
.cl-title { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.5rem; }
@media (min-width: 640px) { .cl-title { font-size: 1.125rem; line-height: 1.75rem; } }

/* font-medium erbt der Original-Span vom Radix-AccordionTrigger; line-height
   1.25rem = text-sm (vorher Poppins-Default ~21px, Label 1px zu hoch). */
.cl-details-label { display: none; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-gray-500); flex-shrink: 0; }
@media (min-width: 640px) { .cl-details-label { display: flex; } }
.cl-trigger[aria-expanded="true"] .cl-label-more { display: none; }
.cl-trigger[aria-expanded="false"] .cl-label-less { display: none; }

.cl-trigger > svg.icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-gray-500); transition: transform 0.2s; }
.cl-trigger[aria-expanded="true"] > svg.icon { transform: rotate(180deg); }

.cl-row-static { padding-right: 0; }
.cl-desc-inline { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-gray-600); }
@media (min-width: 640px) { .cl-desc-inline { font-size: 1rem; line-height: 1.5rem; } }

.cl-panel-inner { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; }
.cl-panel-desc { margin: 0; font-size: 0.875rem; color: var(--color-gray-600); }
@media (min-width: 640px) { .cl-panel-desc { font-size: 1rem; } }
.cl-block h4 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; color: var(--color-neutral-900); }
.cl-block p { margin: 0; font-size: 0.875rem; color: var(--color-gray-600); }
@media (min-width: 640px) { .cl-block p { font-size: 1rem; } }
.cl-block ul { margin: 0; padding: 0; list-style: disc; list-style-position: inside; display: flex; flex-direction: column; gap: 0.25rem; }
.cl-block li { font-size: 0.875rem; color: var(--color-gray-600); }
@media (min-width: 640px) { .cl-block li { font-size: 1rem; } }

.cl-shots { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .cl-shots { grid-template-columns: 1fr 1fr; } }
.cl-shot { margin: 0; cursor: pointer; }
.cl-shot-frame { position: relative; height: 400px; width: 100%; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-gray-200); background: var(--color-neutral-50); transition: opacity 0.2s; }
.cl-shot:hover .cl-shot-frame, .cl-shot:focus-visible .cl-shot-frame { opacity: 0.9; }
.cl-shot:focus-visible { outline: 2px solid var(--color-red-600); outline-offset: 3px; border-radius: var(--radius-lg); }
.cl-shot-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cl-shot-caption { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--color-gray-600); text-align: center; }

.cl-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1rem; background: rgba(0,0,0,.7); }
.cl-lightbox[hidden] { display: none; }
.cl-lightbox-img { max-width: min(90vw, 1200px); max-height: 78vh; object-fit: contain; border-radius: var(--radius-lg); background: #fff; }
.cl-lightbox-caption { margin: 0; color: #fff; font-size: 0.875rem; text-align: center; max-width: 90vw; }
.cl-lightbox-close { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: none; background: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cl-lightbox-close .icon { width: 1.25rem; height: 1.25rem; color: var(--color-gray-900); }
.cl-lightbox-close:hover { background: var(--color-neutral-100); }

/* -------------------------------------------------------------- 404 */
.error-page {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; text-align: center; padding: 2rem;
}
.error-page .code { font-family: var(--font-mono); font-size: 4rem; font-weight: 600; color: var(--color-red-600); }
.error-page h1 { font-size: 1.75rem; font-weight: 700; color: var(--color-neutral-900); }
.error-page p { max-width: 32rem; font-size: 1rem; color: var(--color-neutral-600); }

/* ----------------------------------------------------------------- Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
@media (min-width: 640px) { .sm-flex-row { flex-direction: row; } }

/* ------------------------------------------------ Touch-Ziele (Mobile) */
/* Mehrere Steuerelemente sind visuell kleiner als die empfohlenen 44x44px
   Mindestgroesse fuer Touch-Bedienung (Apple HIG / Google Material). Statt
   die sichtbare Groesse zu aendern (das waere Neugestaltung und wuerde jeden
   bisherigen Screenshot-Abgleich mit dem Original entwerten), wird die
   klickbare Flaeche unsichtbar per ::after erweitert - identisches Pixelbild,
   groesserer Trefferbereich. Verifiziert per Playwright elementFromPoint
   (nicht nur getComputedStyle) - siehe docs/qa/design-pass/touch-targets.txt.
   Bei vertikal gestapelten Listen (z.B. Footer-Links) gewinnt bei
   ueberlappenden Erweiterungszonen zweier Nachbarn im Hit-Test immer das
   spaeter im DOM stehende Element; die tatsaechlich garantierte Zugabe pro
   Element ist deshalb nur die Erweiterung nach OBEN (von der Luecke zum
   Vorgaenger), nicht die Summe beider Seiten - die Werte unten sind bewusst
   so gewaehlt, dass Eigenhoehe + diese eine garantierte Seite bereits
   >=44px ergibt. */
.nav-toggle::after,
.nav-mobile-close::after,
.cl-lightbox-close::after {
  content: ""; position: absolute; inset: -8px;
}
.contact-toggle button { position: relative; }
.contact-toggle button::after { content: ""; position: absolute; inset: -3px 0; }
.related-links a, .az-links a, .chip-inline { position: relative; }
.related-links a::after, .az-links a::after, .chip-inline::after {
  content: ""; position: absolute; inset: -3px 0;
}
.footer-col a, .breadcrumb a { position: relative; }
/* display:inline-block ist noetig, damit die ::after-Trefferflaeche unten
   greift. Damit ein UMGEBROCHENER Footer-Link dabei genauso hoch wird wie im
   Original (dort erzeugt der 24px-Strut des <li> zwei 24px-Zeilenboxen, waehrend
   der Link selbst 20px Zeilenhoehe hat), bekommt der Inline-Block hier 1.5
   statt 1.25rem - gerendert pixelgleich (24px bzw. 48px), nur die gemessene
   line-height des <a> weicht bewusst ab. */
.footer-col a { display: inline-block; line-height: 24px; }
/* Breadcrumb hat keine vertikal gestapelten Nachbarn (nur eine Zeile) -
   beide Richtungen wirken garantiert, 17px Eigenhoehe + 2x14px = 45px. */
.breadcrumb a::after { content: ""; position: absolute; inset: -14px 0; }
/* Footer-Spalten: 0.75rem (12px) Zeilenabstand zwischen gestapelten Links.
   Die garantierte Richtung (oben) ergibt 20px Eigenhoehe + 12px = 32px -
   unter 44px. Eine Vergroesserung auf 44px wuerde den Link-Abstand auf ueber
   das Doppelte anheben und den Footer sichtbar hoeher/lueftiger machen als
   im Original (Bruch mit "Grundlayout bleibt erkennbar"). Bewusst als
   Kompromiss dokumentiert: deutlich verbessert (20px -> 32px), aber nicht
   die vollen 44px - siehe docs/DECISIONS.md. */
.footer-col a::after { content: ""; position: absolute; inset: -12px 0; }
.changelog-back a { position: relative; } /* bleibt inline-flex, siehe Regel weiter oben im File */
.changelog-back a::after { content: ""; position: absolute; inset: -12px 0; }

/* ------------------------------------------- Mobile-Feinschliff (<=1023px) */
/* Auf schmalen Viewports brechen die grossen Ueberschriften mehrzeilig um -
   ohne Ausgleich entstehen Waisen ("Die Starkregen- / App") und einsame
   Silben ("Digitaler Echtzeit- / Zwilling"). text-wrap:balance verteilt die
   Zeilen gleichmaessig; bewusst auf <1024px begrenzt, damit die am Original
   vermessenen Desktop-Umbrueche unveraendert bleiben. */
@media (max-width: 1023px) {
  .hero-title, .section-heading h2, .fws-teaser-body h2, .innovation-copy h2,
  .feature-image-body h2, .help-card h2,
  .page-hero h1, .place-hero h1, .fws-page-hero h1,
  .content-card h2, .kostra-section h2, .place-cta h2,
  .hub-section h2, .related-section h2 { text-wrap: balance; }
}
@media (max-width: 639px) {
  /* Deutsche Komposita ("Telekommunikationsinfrastruktur") erzeugen in der
     schmalen Spalte einen starken Flatterrand - Silbentrennung greift dank
     lang="de" am <html>. Nur Fliesstext, keine Ueberschriften/Buttons.
     Ohne Limit trennte der Browser fast jede Zeile ("Basie-rend"); erst ab
     12 Zeichen Wortlaenge wirkt die Trennung nur auf die langen Komposita,
     um die es geht. */
  .prose, .prose-text,
  .content-card p, .place-hero .lede, .page-hero .lede, .hub-section .lede,
  .kostra-section .lede, .kostra-empty, .faq-item .answer, .event-card p,
  .climate-narrative, .kommunen-card p:not(.k-head), .catrare-intro,
  .catrare-method, .footnote, .place-cta p, .warn-bridge,
  .fws-page-hero .lede, .fws-page-hero .lede-small, .cap-card p {
    hyphens: auto; -webkit-hyphens: auto;
    hyphenate-limit-chars: 12 5 4;
    -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4;
  }
  /* FAQ-Karte: Button an der Textspalte ausrichten (Icon 3rem + Luecke
     1.25rem), statt am Kartenrand unter dem Icon zu haengen - eine
     Ausrichtungsachse statt Zickzack. Ab 640px ist die Karte eine Zeile
     mit Button rechts, dort greift die Regel nicht. */
  .help-card > .btn { margin-left: 4.25rem; }
}
/* Gleiche Achse fuer den FWS-Lead-CTA der SEO-Seiten: Buttons unter der
   Textspalte statt am Kartenrand. Erst ab 360px - darunter braeuchten die
   Button-Labels sonst einen fruehen Umbruch. */
@media (min-width: 360px) and (max-width: 639px) {
  .place-cta-actions { margin-left: 4.25rem; }
}
/* Mini-Viewports (<=359px): eine Stufe kleinere Sektions-H2 (26px statt 30px).
   Noetig, damit die nicht mehr trennbaren Komposita ("Starkregen-App",
   "Sensornetzwerk") in die 224px Innenbreite der gepolsterten Karten passen,
   statt per Notumbruch mitten im Wort zu brechen. */
@media (max-width: 359px) {
  .section-heading h2 { font-size: 1.625rem; line-height: 2rem; }
}
/* Store-Badges der App-Sektion: 48px hohe Badges passen bei 390px nicht mehr
   nebeneinander in die gepolsterte Karte (339px noetig, 294px verfuegbar) und
   stapelten sich. Mit 40px (Mindestgroesse der Store-Richtlinien) bleiben sie
   eine Zeile; der Hero (358px Innenbreite) behaelt seine 46px. */
@media (max-width: 479px) { .app-section .store-badges img { height: 40px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

.animate-rise { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-rise-1 { animation-delay: 0.08s; }
.animate-rise-2 { animation-delay: 0.18s; }
.animate-rise-3 { animation-delay: 0.3s; }
.animate-rise-4 { animation-delay: 0.44s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- CatRaRE-Ereigniskatalog (Ortsseiten) ------------------------------
   Signatur-Element: die zwoelfstufige SRI-Skala als Segmentleiste - sie
   kodiert echte Daten (Starkregenindex 1-12), keine Dekoration. Farben
   bleiben in der Markenpalette; Intensitaet steigt mit der Ereignisklasse. */
.catrare-intro { margin-top: 1rem; max-width: 46rem; font-size: 1.05rem; line-height: 1.65; color: var(--color-neutral-600); }
.catrare-intro strong { color: var(--color-neutral-900); font-weight: 600; }
.catrare-list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--color-neutral-200); }
.catrare-event {
  display: grid; grid-template-columns: 10rem 1fr auto; gap: 0.5rem 2rem;
  align-items: center; padding: 1rem 0.75rem; border-bottom: 1px solid var(--color-neutral-200);
}
.catrare-event.sev-extrem { background: rgba(220,38,38,0.04); box-shadow: inset 3px 0 0 var(--color-red-600); }
.catrare-event .ev-date { font-weight: 600; font-size: 0.95rem; color: var(--color-neutral-900); font-variant-numeric: tabular-nums; }
.catrare-event .ev-head { font-size: 1.05rem; font-weight: 700; color: var(--color-neutral-900); }
.catrare-event .ev-head .ev-dur { font-weight: 400; color: var(--color-neutral-600); font-size: 0.95rem; }
.catrare-event .ev-meta { margin-top: 0.15rem; font-size: 0.85rem; color: var(--color-neutral-600); }
.catrare-event .ev-sri { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.sri-cells { display: inline-flex; gap: 2px; }
.sri-cells i { width: 9px; height: 15px; border-radius: 2px; background: var(--color-neutral-200); }
.sev-starkregen .sri-cells i.on { background: var(--color-neutral-400); }
.sev-intensiv .sri-cells i.on { background: #fca5a5; }
.sev-aussergewoehnlich .sri-cells i.on { background: var(--color-red-500); }
.sev-extrem .sri-cells i.on { background: var(--color-red-700); }
.sri-text { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--color-neutral-600); }
.sev-extrem .sri-text { color: var(--color-red-700); font-weight: 600; }
.catrare-method { margin-top: 1.5rem; max-width: 52rem; }
@media (max-width: 767px) {
  .catrare-event { grid-template-columns: 1fr; gap: 0.35rem; padding: 1rem 0.5rem; }
  .catrare-event .ev-sri { align-items: flex-start; }
}

/* --- Inhaltstiefe-Prototyp: Warnbox, Klima, HWK-Link, Kommunen-Block --- */
.warnbox {
  margin-top: 1.5rem; border: 1px solid var(--color-neutral-200); border-radius: 14px;
  padding: 1rem 1.25rem; background: #fff;
}
.warnbox.active { border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.04); }
.warnbox-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.warn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-neutral-300); align-self: center; }
.warn-dot.live { background: var(--color-red-600); animation: warnpulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .warn-dot.live { animation: none; } }
@keyframes warnpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
.warn-title { font-weight: 650; font-size: 0.95rem; color: var(--color-neutral-900); }
.warn-stand { font-size: 0.75rem; color: var(--color-neutral-500); margin-left: auto; }
.warn-line { margin-top: 0.5rem; font-size: 0.95rem; color: var(--color-neutral-700); }
.warn-line strong { color: var(--color-neutral-900); }
.warn-line.severe strong { color: var(--color-red-700); }
.warn-bridge { margin-top: 0.6rem; font-size: 0.82rem; color: var(--color-neutral-500); }

.hwk-link { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; }
.hwk-link .icon, .hwk-link svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--color-red-600); margin-top: 0.15rem; }

.climate-narrative { margin-top: 1.25rem; max-width: 50rem; font-size: 1rem; line-height: 1.7; color: var(--color-neutral-600); }

.kommunen-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .kommunen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kommunen-card { border-radius: 14px; padding: 1.25rem; }
.kommunen-card .k-head {
  font: 600 0.72rem/1 var(--font-sans, inherit); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-red-600); margin-bottom: 0.6rem;
}
.kommunen-card p:not(.k-head) { font-size: 0.92rem; line-height: 1.6; color: var(--color-neutral-600); }
.kommunen-card strong { color: var(--color-neutral-900); }
.kommunen-cta { margin-top: 1.25rem; }
.pegel-line { font-variant-numeric: tabular-nums; }

/* --- YouTube-Viewer (Lightbox mit Blur-Backdrop) ----------------------- */
.yt-viewer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
/* Autorenstile schlagen den UA-Default [hidden]{display:none} - ohne diese
   Regel bliebe der geschlossene Viewer als unsichtbares Overlay liegen und
   wuerde alle Klicks abfangen. */
.yt-viewer[hidden] { display: none; }
.yt-viewer-backdrop {
  position: absolute; inset: 0; background: rgba(10,8,8,0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; transition: opacity 0.26s ease;
}
.yt-viewer-panel {
  position: relative; width: min(1080px, 100%);
  opacity: 0; transform: translateY(14px) scale(0.975);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.yt-viewer.open .yt-viewer-backdrop { opacity: 1; }
.yt-viewer.open .yt-viewer-panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .yt-viewer-backdrop, .yt-viewer-panel { transition: none; }
}
.yt-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.25rem 0.6rem; }
.yt-viewer-title { color: #fff; font-weight: 600; font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-viewer-close {
  flex-shrink: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 999px;
  background: rgba(255,255,255,0.08); color: #fff; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.yt-viewer-close:hover { background: rgba(220,38,38,0.85); border-color: transparent; }
.yt-viewer-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.yt-viewer-close svg { width: 1.1rem; height: 1.1rem; }
.yt-viewer-stage {
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #000; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.yt-viewer-stage iframe { width: 100%; height: 100%; display: block; }
.yt-viewer-foot { margin-top: 0.6rem; text-align: right; font-size: 0.82rem; }
.yt-viewer-foot a { color: rgba(255,255,255,0.75); }
.yt-viewer-foot a:hover { color: #fff; }
body.yt-viewer-lock { overflow: hidden; }
.yt-viewer-stage video { width: 100%; height: 100%; display: block; }