/* ==========================================================================
   KI-Zentrum NRW – Design System
   Farben, Typografie und Komponenten nach Kapitel 11 des Website-Konzepts.
   Reihenfolge: Tokens → Basis → Layout → Komponenten → Seiten → Utilities.
   ========================================================================== */

/* --- 1. Tokens --------------------------------------------------------- */
:root {
  /* Farbe: tiefes Dunkelblau als Grundfarbe, klares Blau als Interaktion */
  --ink:          #0a1e35;
  --ink-950:      #050f22;
  --ink-700:      #17334f;
  --ink-500:      #40607f;
  --ink-300:      #7b93ab;
  --accent:       #0b63d6;
  --accent-dark:  #0a4fac;
  --accent-soft:  #e8f0fc;
  /* Zweitakzent aus der Bildmarke: nur für die Bildmarke selbst und sehr
     sparsame Mikro-Akzente – niemals als Fläche für Text oder Buttons. */
  --accent-2:      #93c33e;
  --accent-2-dark: #6f9e28;
  --surface:      #ffffff;
  --surface-soft: #f3f6fa;
  --surface-deep: #eaf0f7;
  --line:         #d7e0ea;
  --line-strong:  #b9c8d8;

  /* Premium-Easings für Scroll-Reveals, Magnet-Buttons und die Prozesslinie */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Verlaufsflächen für Hero und Signature-Panels (Bildmarken-Vorlage) */
  --grad-hero:  radial-gradient(120% 140% at 82% -10%, #143a72 0%, #0a2454 38%, #051229 78%),
                linear-gradient(160deg, #051229 0%, #0a2454 100%);
  --grad-panel: linear-gradient(115deg, #0c2c5c 0%, #1b5aa8 48%, #4fa8dd 100%);

  /* Status – ausschließlich für Prozesszustände, nie dekorativ */
  --ok:      #14784a;
  --ok-soft: #e4f3ea;
  --ask:     #b5610a;
  --ask-soft:#fdf0e2;
  --err:     #b32d24;
  --err-soft:#fbeae9;

  /* Typografie: sachliche Groteske, lokal gehostet (assets/fonts/) mit
     robustem System-Fallback. Maximal zwei Familien. */
  --font-sans: "KZN Grotesk", "Inter", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "KZN Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               "Roboto Mono", Menlo, Consolas, monospace;
  /* Zweite, rund gezeichnete Auszeichnungsschrift aus der Bildmarken-Vorlage.
     Bewusst begrenzt auf Schlagzeilen, Eyebrows und Buttons – Fließtext
     bleibt bei der sachlichen Groteske, damit lange Inhalte lesbar bleiben. */
  --font-display: "KZN Display", "Baloo 2", var(--font-sans);

  /* Type-Skala (Kapitel 8: Textlängen als Designrahmen) */
  --fs-eyebrow: 0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.1875rem;
  --fs-h3:      1.25rem;
  --fs-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  --fs-h1:      clamp(2rem, 1.35rem + 2.9vw, 3.4rem);

  /* Raster */
  --wrap:    1180px;
  --wrap-nr: 760px;          /* Lesebreite für Fließtext */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --sp-sect: clamp(3.5rem, 7vw, 6.5rem);
  --radius:  4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(10, 30, 53, .06), 0 2px 8px rgba(10, 30, 53, .05);
  --shadow-md: 0 2px 6px rgba(10, 30, 53, .07), 0 12px 32px rgba(10, 30, 53, .09);
}

/* Selbst gehostete Schrift: WOFF2 unter /assets/fonts/ ablegen, dann greifen
   diese Deklarationen. Ohne Dateien wird sauber auf System-Grotesk gefallen –
   keine externen Requests, keine Einwilligung nötig. */
@font-face {
  font-family: "KZN Grotesk";
  src: url("../fonts/kzn-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KZN Grotesk";
  src: url("../fonts/kzn-grotesk-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KZN Display";
  src: url("../fonts/baloo2-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KZN Display";
  src: url("../fonts/baloo2-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KZN Display";
  src: url("../fonts/baloo2-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KZN Display";
  src: url("../fonts/baloo2-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --- 2. Basis ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Sicherheitsnetz: ein einzelnes zu breites Element (z. B. ein langes,
   unteilbares Wort in einem Flex-/Grid-Kind, siehe .choice span) soll lokal
   überlaufen statt die ganze Seite horizontal verschiebbar zu machen. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: balance;
}
/* h1/h2 in der rund gezeichneten Auszeichnungsschrift der Bildmarken-Vorlage;
   h3 bleibt in der Grotesk, damit Karten und Listen ruhig lesbar bleiben. */
h1, h2 { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-dark); }

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

img, svg, video { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* --- 3. Layout --------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-nr)); margin-inline: auto; }

.section { padding-block: var(--sp-sect); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--soft { background: var(--surface-soft); }
.section--deep { background: var(--ink); color: #fff; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep a { color: #9dc4f5; }
.section--line { border-top: 1px solid var(--line); }

.section > .wrap > .section-head { max-width: 46ch; margin-bottom: 2.5rem; }
.section-head p { color: var(--ink-500); font-size: var(--fs-lead); }
.section--deep .section-head p { color: #b6c8db; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.25fr 1fr; } }

/* --- 4. Typo-Komponenten ---------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  display: block;
}
.section--deep .eyebrow, .hero .eyebrow { color: #7fb2f2; }

/* Eyebrow mit Mittelpunkt-Trenner, wie in der Bildmarken-Vorlage
   ("KI-ZENTRUM NRW · BAD OEYNHAUSEN"). Zwei <span> statt Freitext-Punkt,
   damit Screenreader nicht "Punkt" vorlesen. */
.eyebrow--split { text-align: center; }
.eyebrow--split .sep { margin: 0 .5em; opacity: .55; }
@media (min-width: 760px) { .hero .eyebrow--split { text-align: left; } }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 62ch;
}
.section--deep .lead, .hero .lead { color: #c8d8e8; }

.prose { max-width: 68ch; }
.prose > * + h2 { margin-top: 2.5em; }
.prose > * + h3 { margin-top: 2em; }

/* --- 5. Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem;
  font: inherit; font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .01em;
  border: 1.5px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-soft); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--surface-deep); color: var(--ink); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Pill-Variante aus der Bildmarken-Vorlage: vollrund, Auszeichnungsschrift,
   etwas großzügiger. Kombinierbar mit den bestehenden Farbvarianten,
   z. B. class="btn btn--primary btn--pill". */
.btn--pill {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body);
  padding: 1rem 1.85rem; border-radius: 999px;
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: var(--fs-small); text-decoration: none;
}
.arrow-link::after { content: "→"; transition: transform .15s ease; }
.arrow-link:hover::after { transform: translateX(3px); }

/* --- 6. Header --------------------------------------------------------- */
.utility {
  background: var(--ink); color: #b6c8db;
  font-size: var(--fs-small); padding: .5rem 0;
}
.utility .wrap { display: flex; gap: 1.5rem; justify-content: flex-end; flex-wrap: wrap; }
.utility a { color: #d5e3f1; text-decoration: none; }
.utility a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 780px) { .utility { display: none; } }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 76px; padding-block: .75rem;
  transition: min-height .2s ease;
}
.header.is-compact .header__inner { min-height: 62px; }
.header.is-compact .logo__descriptor { display: none; }

.logo { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.logo__mark { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; }
.logo__glyph { flex: 0 0 auto; }
.logo__descriptor { font-size: .6875rem; color: var(--ink-500); letter-spacing: .04em; margin-top: .15rem; }
@media (max-width: 520px) { .logo__descriptor { display: none; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .6rem .7rem; border-radius: var(--radius);
  font-size: .9375rem; font-weight: 500; color: var(--ink-700); text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { background: var(--surface-soft); color: var(--ink); }
.nav__link[aria-current="page"], .nav__item.is-active > .nav__link {
  color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent);
}
.header__cta { flex: 0 0 auto; }
.header__cta-short { display: none; }

/* Dropdown – maximal eine Ebene */
.nav__item { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; font: inherit; cursor: pointer;
}
.nav__toggle::after {
  content: ""; width: .4rem; height: .4rem; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.nav__item.is-open .nav__toggle::after { transform: rotate(-135deg); margin-top: 2px; }
.nav__panel {
  position: absolute; top: calc(100% + .5rem); left: -.5rem; z-index: 30;
  min-width: 380px; padding: .5rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  list-style: none; margin: 0; display: none;
}
.nav__item.is-open .nav__panel { display: block; }
.nav__panel a {
  display: block; padding: .7rem .8rem; border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
}
.nav__panel a:hover { background: var(--accent-soft); }
.nav__panel strong { display: block; font-size: .9375rem; }
.nav__panel span { display: block; font-size: var(--fs-small); color: var(--ink-500); line-height: 1.4; }

.nav__burger { display: none; }

@media (max-width: 1080px) {
  /* Logo, Burger und Header-CTA teilen sich auf schmalen Viewports eine Zeile –
     ohne Schrumpf-Erlaubnis für die CTA lief die Zeile über die Viewportbreite
     hinaus (Vollbreite von .header__cta erzwang flex-shrink:0 vorher immer). */
  .header__inner { gap: .75rem; }
  .header__cta { flex: 0 1 auto; min-width: 0; }
  .nav__burger {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    background: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    padding: .6rem .8rem; font: inherit; font-size: var(--fs-small); font-weight: 600;
    color: var(--ink); cursor: pointer; flex: 0 1 auto;
  }
  .nav__burger svg { width: 18px; height: 18px; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(420px, 100%);
    background: #fff; border-left: 1px solid var(--line);
    padding: 5.5rem var(--gutter) 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .22s ease;
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link, .nav__toggle { width: 100%; padding: .95rem .25rem; font-size: 1.05rem; }
  .nav__toggle { justify-content: space-between; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__panel {
    position: static; min-width: 0; box-shadow: none; border: 0;
    padding: 0 0 .75rem; border-radius: 0; background: var(--surface-soft);
  }
  .nav__close {
    position: absolute; top: 1.25rem; right: var(--gutter);
    background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--ink); padding: .5rem;
  }
  .nav__contact { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--line); font-size: var(--fs-small); }
  .nav__contact a { display: block; padding: .45rem 0; font-weight: 600; }
  .header__cta .btn { padding: .7rem 1rem; }

  /* .header setzt backdrop-filter – das erzeugt spezkonform (wie transform
     oder filter) einen Containing Block für position:fixed-Nachfahren. .nav
     wurde dadurch auf die ~120px hohe Header-Zeile zusammengestaucht statt
     den Viewport zu füllen. position:sticky bleibt unangetastet – nur der
     Blur-Effekt fällt kurz weg, während das Panel den Header ohnehin
     komplett verdeckt. z-index geht über das Cookie-Banner (150) hinaus,
     sonst schiebt sich dessen höherer Stacking-Kontext vors offene Menü. */
  html.nav-open .header { backdrop-filter: none; z-index: 200; }
}
@media (max-width: 1080px) { .nav__close { display: block; } }
@media (min-width: 1081px) { .nav__close, .nav__contact { display: none; } }
@media (max-width: 460px) {
  .header__cta .btn { font-size: .8125rem; padding: .65rem .8rem; }
  .header__cta-full { display: none; }
  .header__cta-short { display: inline; }
  .nav__burger-label { display: none; }
  .nav__burger { padding: .6rem; gap: 0; }
}

.scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(10,30,53,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.scrim.is-visible { opacity: 1; pointer-events: auto; }

/* --- Reifegrad-Plus specific styles ---------------------------------- */
.reife__header { margin-bottom: 1rem; }
.reife__steps { display:flex; flex-direction:column; gap:.6rem; }
.reife__step-indicator { font-weight:700; color:var(--ink-700); font-size: .95rem; }
.reife__bar { background:var(--surface-deep); height:10px; border-radius:999px; overflow:hidden; }
.reife__bar span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); width:0%; transition:width .45s var(--ease-out); }

.reife__step { background: #fff; padding: 1.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.reife__thanks {
  background: linear-gradient(160deg, var(--accent-soft), #fff); border: 1px solid var(--line);
  padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center;
}
.reife__thanks h2 { margin-bottom: .5rem; }
.reife__thanks:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.reife__step h2 { margin-bottom: .5rem; }
.reife .grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }

.reife-q { padding: .75rem 0; border-bottom: 1px dashed var(--line); }
.reife-q p { margin: 0 0 .5rem; font-weight:600; }
.reife-q .choices { display:flex; gap:.5rem; flex-wrap:wrap; }
.reife-q label { display:inline-flex; align-items:center; gap:.6rem; padding:.6rem .85rem; border-radius:8px; background:var(--surface-soft); border:1px solid transparent; cursor:pointer; user-select:none; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.reife-q input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.reife-q label span { display:inline-block; color:var(--ink); }
.reife-q label:hover { background: var(--surface-deep); }
.reife-q input[type="radio"]:checked + span { background: linear-gradient(90deg,var(--accent),var(--accent-dark)); color: #fff; padding: .25rem .45rem; border-radius:6px; }
.reife-q input[type="radio"]:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

.field__error { color: var(--err); margin-top: .5rem; font-size: .9rem; }

@media (max-width: 760px) {
  .reife__bar { height:8px; }
  .reife-q .choices { gap:.35rem; }
  .reife__step { padding: .85rem; }
}

/* --- 7. Hero ----------------------------------------------------------- */
.hero {
  background: var(--grad-hero);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  position: relative; overflow: hidden;
}

@media (min-width: 761px) {
  .hero {
    padding-right: 240px;
  }
}

/* Homepage: Bild als Hintergrund hinter den Farbverläufen. */
.hero--home {
  background-image: url('/assets/img/KI%20Website%20Background.png'), var(--grad-hero);
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-position: right center, 0 0;
}
@media (max-width: 760px) {
  .hero--home {
    background-position: center 20%;
  }
}
/* Feines technisches Raster plus weiche Lichtpunkte, wie im Vorlagen-Hintergrund */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 80% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2.5px 2.5px at 85% 18%, rgba(147,195,62,.9), transparent 60%),
    radial-gradient(2px 2px at 92% 38%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(3px 3px at 75% 62%, rgba(63,169,245,.85), transparent 60%),
    radial-gradient(2px 2px at 96% 72%, rgba(255,255,255,.6), transparent 60%);
}
.hero .wrap { position: relative; z-index: 1; }

/* Weich driftende Farbflächen hinter dem Hero-Inhalt ("Aura"). Per JS um
   wenige Pixel gegenläufig zur Maus verschoben (Tiefenwirkung); die
   Grunddrift läuft unabhängig davon als reines CSS-Keyframe. */
.hero__aura { position: absolute; inset: -10%; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__aura span {
  position: absolute; width: min(46vw, 620px); height: min(46vw, 620px);
  border-radius: 50%; filter: blur(64px);
  background: radial-gradient(circle, var(--c1) 0%, transparent 68%);
  will-change: transform;
}
.hero__aura span:nth-child(1) { --c1: rgba(27,100,181,.55); top: -8%; right: -4%; }
.hero__aura span:nth-child(2) { --c1: rgba(147,195,62,.28); bottom: -14%; left: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .hero__aura span { animation: aura-drift 24s var(--ease-out) infinite alternate; }
  .hero__aura span:nth-child(2) { animation-duration: 30s; animation-delay: -8s; }
}
@keyframes aura-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-3%, 3%) scale(1.08); }
  100% { transform: translate(3%, -2%) scale(.96); }
}

/* Zeilenweiser Aufbau der Schlagzeile. Ohne JavaScript steht der Text sofort
   normal da (kein .word-Markup wird erzeugt); mit JavaScript wird jedes Wort
   in ein zweifach verschachteltes span gesetzt (außen overflow:hidden, innen
   verschoben) und beim Laden nach oben eingeblendet. */
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .word__inner { display: inline-block; }
html.js .hero h1 .word__inner {
  transform: translateY(112%);
  transition: transform .85s var(--ease-out);
}
html.js .hero.is-ready h1 .word__inner { transform: translateY(0); }

/* Scroll-Hinweis unten im Hero */
.hero__scroll-cue {
  position: absolute; left: 53%; bottom: 1.5rem; z-index: 1;
  transform: translateX(-50%); color: rgba(255,255,255,.55);
  display: none; opacity: 1; transition: opacity .3s ease;
}
.hero__scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .hero__scroll-cue { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-cue svg { animation: cue-bounce 2s ease-in-out infinite; }
}
@keyframes cue-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }
.hero__single { max-width: 44rem; }
.hero__note {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--fs-small); color: #a7bdd3; max-width: 52ch;
}
.hero--page { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.hero--page h1 { max-width: 22ch; }

/* Glass-Card für den Lead-Text im Hero, aus der Bildmarken-Vorlage
   übernommen: dezente Transparenz statt harter Kontrastkante. */
.hero__card {
  margin: 1.75rem 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.4rem, 3.5vw, 2rem);
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, var(--shadow-md);
}
.hero__card .lead { color: #dde8f7; margin: 0; max-width: none; }

/* --- 7b. Signature-Panel: helle Verlaufsfläche mit Icon-Kacheln -------- */
.panel-tiles .tile-list {
  list-style: none; margin: 0; padding: clamp(1.75rem, 4vw, 2.5rem);
  display: grid; gap: 1.5rem;
  background: var(--grad-panel); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.tile-list__item { display: flex; align-items: center; gap: 1rem; color: #fff; font-weight: 600; }
.tile-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  color: var(--accent-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(4,18,41,.25);
}
.tile-icon svg { width: 26px; height: 26px; }
.mt-3 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --- 8. Signature: Prozesslinie --------------------------------------- */
/* Der Workflow ist das Kernversprechen – er ist das einzige Element, das
   gestalterisch laut sein darf. Alles andere bleibt ruhig. */
.flow {
  /* <figure> trägt im User-Agent-Stylesheet standardmäßig "margin: 1em 40px"
     – ungesetzt schob das den ganzen Block 40px nach rechts aus der Mitte
     und ließ ihn auf schmalen Viewports rechts überstehen. */
  margin: 0;
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
}
.flow::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 100% at 100% 0%, rgba(11,99,214,.06), transparent 60%);
}
.flow > * { position: relative; z-index: 1; }
/* Im dunklen Hero als Glas-Panel statt als Kontrastkante – passt zur
   .hero__card-Optik statt sich als eigener Block dagegen abzusetzen. */
.flow--onDark {
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 20px 48px rgba(3,10,25,.5);
}
.flow--onDark::before {
  background: radial-gradient(120% 100% at 100% 0%, rgba(94,160,240,.16), transparent 60%);
}
.flow__caption {
  font-size: var(--fs-small); color: var(--ink-500);
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.flow--onDark .flow__caption { color: white; border-top-color: rgba(255,255,255,.14); }

.flow-svg { width: 100%; height: auto; }
.flow-svg .fl-track { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.flow--onDark .flow-svg .fl-track { stroke: rgba(255,255,255,.25); }
.flow-svg .fl-node { fill: var(--surface-soft); stroke: var(--line-strong); stroke-width: 1.5; }
.flow--onDark .flow-svg .fl-node { fill: #16324f; stroke: rgba(255,255,255,.22); }
.flow-svg .fl-accent-stop-a { stop-color: #fff; stop-opacity: .95; }
.flow-svg .fl-accent-stop-b { stop-color: var(--accent-soft); stop-opacity: 1; }
.flow--onDark .flow-svg .fl-accent-stop-a { stop-color: #1c4d8c; stop-opacity: 1; }
.flow--onDark .flow-svg .fl-accent-stop-b { stop-color: #123a6b; stop-opacity: 1; }
.flow-svg .fl-node--accent { fill: url(#flAccentGrad); stroke: var(--accent); }
.flow--onDark .flow-svg .fl-node--accent { stroke: #4d92e8; }
.flow-svg .fl-node--exception { fill: var(--ask-soft); width: 280px; stroke: var(--ask); }
.flow--onDark .flow-svg .fl-node--exception { fill: #4a3313; stroke: #d78f3d; }
.flow-svg .fl-label { font: 600 12px var(--font-sans); fill: var(--ink); }
.flow--onDark .flow-svg .fl-label { fill: #eaf1f8; }
.flow-svg .fl-label--warn { fill: var(--ask); font-variant-emoji: text; }
.flow--onDark .flow-svg .fl-label--warn { fill: #f0b169; }
.flow-svg .fl-sub { font: 400 10.5px var(--font-sans); fill: var(--ink-500); }
.flow--onDark .flow-svg .fl-sub { fill: white; }
.flow-svg .fl-step { font: 600 10px var(--font-mono); fill: var(--accent); letter-spacing: .08em; }
.flow--onDark .flow-svg .fl-step { fill: #7fb2f2; }
.flow-svg .fl-dash { stroke-dasharray: 5 4; }
.flow-svg .fl-arrow-fill { fill: var(--accent); }
.flow--onDark .flow-svg .fl-arrow-fill { fill: #7fb2f2; }

/* Dezente Laufanimation auf der Prozesslinie: ein Lichtpunkt mit Farbverlauf
   statt eines flachen Farbsegments. Standardmäßig unsichtbar, damit sie bei
   reduzierter Bewegung gar nicht erst erscheint. */
.flow-svg .fl-pulse { stroke: none; fill: none; }
.flow-svg .fl-pulse-stop-a { stop-color: var(--accent); stop-opacity: 0; }
.flow-svg .fl-pulse-stop-b { stop-color: var(--accent); stop-opacity: 1; }
.flow--onDark .flow-svg .fl-pulse-stop-a { stop-color: #5ea0f0; stop-opacity: 0; }
.flow--onDark .flow-svg .fl-pulse-stop-b { stop-color: #5ea0f0; stop-opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .flow-svg .fl-pulse {
    stroke: url(#flPulseGrad); stroke-width: 3;
    stroke-dasharray: 90 474; stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(11,99,214,.5));
    animation: flow-run 5.5s ease-in-out infinite;
  }
  .flow--onDark .flow-svg .fl-pulse { filter: drop-shadow(0 0 5px rgba(94,160,240,.6)); }
  @keyframes flow-run { from { stroke-dashoffset: 564; } to { stroke-dashoffset: 0; } }

  /* Der Rückweg bekommt eine eigene, langsame Wanderanimation, damit sichtbar
     wird, dass er ein aktiver Rücklauf ist und keine statische Randlinie. */
  .flow-svg .fl-track--return { animation: fl-dash-flow 1.8s linear infinite; }
  @keyframes fl-dash-flow { to { stroke-dashoffset: -18; } }
}

/* --- 9. Karten --------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-700); font-size: var(--fs-small); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: 1.25rem; }
a.card, .card--link:hover { text-decoration: none; }
.card--link:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card--link:hover h3 { color: var(--accent); }
.section--soft .card { background: #fff; }

.card__index {
  font: 600 .75rem var(--font-mono); color: var(--accent);
  letter-spacing: .1em; margin-bottom: .75rem; display: block;
}
.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.tag {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 2px;
  background: var(--surface-deep); color: var(--ink-700);
}
.tag--accent { background: var(--accent-soft); color: var(--accent-dark); }

/* --- 10. Listen und Schritte ------------------------------------------ */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-width: 68ch; }
.ticks li { position: relative; padding-left: 1.85rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 6px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.ticks--muted li::before { border-color: var(--ink-300); }
.section--deep .ticks li::before { border-color: #5ea0f0; }

/* Nummerierte Schritte: nur dort einsetzen, wo die Reihenfolge Information ist */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 72ch; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font: 600 .8125rem var(--font-mono); color: var(--accent);
  background: var(--accent-soft); border-radius: 3px;
  width: 2.1rem; height: 1.7rem; display: grid; place-items: center;
}
.section--deep .steps li::before { background: #123a6b; color: #7fb2f2; }

.phases { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: phase; }
.phase { counter-increment: phase; border-top: 1px solid var(--line); padding: 2rem 0; display: grid; gap: 1rem; }
.phase:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .phase { grid-template-columns: 5rem 1fr; gap: 2rem; } }
.phase__num { font: 600 1.5rem var(--font-mono); color: var(--accent); line-height: 1; }
.phase h3 { margin-bottom: .35rem; }
.phase__result {
  margin-top: 1rem; padding: .9rem 1.1rem; background: var(--surface-soft);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
}
.phase__result strong { display: block; margin-bottom: .15rem; }

/* --- 11. Tabellen ------------------------------------------------------ */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: var(--fs-small);
  min-width: 480px;
}
table.data th, table.data td {
  text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data thead th {
  background: var(--ink); color: #fff; font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 0; position: sticky; top: 0;
}
table.data tbody tr:nth-child(even) { background: var(--surface-soft); }
table.data td:first-child { font-weight: 600; }
table.data--plain td:first-child { width: 34%; color: var(--ink-700); }
table.data--plain thead th { position: static; }

/* --- 12. Hinweisboxen -------------------------------------------------- */
.note {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  background: var(--surface-soft); border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.1rem, 2.5vw, 1.6rem); margin: 2rem 0; max-width: 72ch;
  color: var(--ink); /* unabhängig vom umgebenden Kontext lesbar (z. B. im dunklen Hero) */
}
.note h3, .note strong.note__title {
  display: block; font-size: 1rem; margin-bottom: .5rem; letter-spacing: 0; color: var(--ink);
}
.note p:last-child { margin-bottom: 0; }
.note--ask { border-left-color: var(--ask); background: var(--ask-soft); }
.note--ok  { border-left-color: var(--ok);  background: var(--ok-soft); }
.note--err { border-left-color: var(--err); background: var(--err-soft); }
.note--brief {
  border-left-color: var(--ink-300); background: #fff;
  font-size: var(--fs-small); color: var(--ink-700);
}
.note--brief ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.note--brief li { margin-bottom: .35rem; }

/* --- 13. FAQ ----------------------------------------------------------- */
.faq { max-width: 72ch; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  background: none; border: 0; padding: 1.35rem .25rem;
  font: inherit; font-size: 1.0625rem; font-weight: 600; color: var(--ink);
  text-align: left; cursor: pointer;
}
.faq__q:hover { color: var(--accent); }
.faq__icon { flex: 0 0 auto; position: relative; width: 16px; height: 16px; margin-top: .3rem; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform .2s ease, opacity .2s ease;
}
.faq__icon::before { inset: 7px 0 7px 0; height: 2px; }
.faq__icon::after  { inset: 0 7px 0 7px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 .25rem 1.5rem; max-width: 66ch; color: var(--ink-700); }
.faq__a[hidden] { display: none; }

/* --- 14. CTA-Band ------------------------------------------------------ */
.cta-band { background: var(--ink); color: #fff; padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: #c8d8e8; max-width: 56ch; }
.cta-band__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } }
.cta-band .btn-row { margin-top: 0; }
.cta-band__promise {
  margin-top: 1.25rem; font-size: var(--fs-small); color: #9fb6cc;
  display: flex; align-items: center; gap: .5rem;
}

/* --- 15. Formulare ----------------------------------------------------- */
.form { max-width: 44rem; }
.fieldset { border: 0; padding: 0; margin: 0 0 2.75rem; }
.fieldset > legend {
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em;
  padding: 0; margin-bottom: .4rem; display: flex; align-items: baseline; gap: .75rem;
}
.fieldset__num { font: 600 .875rem var(--font-mono); color: var(--accent); }
.fieldset__hint { color: var(--ink-500); font-size: var(--fs-small); margin-bottom: 1.5rem; max-width: 60ch; }

.field { margin-bottom: 1.5rem; }
.field > label, .field__label {
  display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: .4rem;
}
.field__req { color: var(--err); font-weight: 400; }
.field__help { font-size: var(--fs-small); color: var(--ink-500); margin-top: .4rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="file"],
select, textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .8rem .9rem; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2340607f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--err); background: var(--err-soft);
}
.field__error { display: block; color: var(--err); font-size: var(--fs-small); font-weight: 600; margin-top: .4rem; }

.choices { display: grid; gap: .5rem; }
.choices--cols { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.choice {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .85rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font-size: var(--fs-small); background: #fff;
  transition: border-color .12s ease, background-color .12s ease;
}
.choice:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.choice input { flex: 0 0 auto; margin: .18rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
/* Ohne min-width:0 zwingt ein langes, unteilbares Wort (z. B. "Reichweiten-
   messung") den Flex-Child laut Spezifikation auf seine min-content-Breite –
   das reißt auf schmalen Viewports die ganze Zeile (und mit ihr oft die
   Seite) breiter als der Viewport. break-word erlaubt den Notfall-Umbruch. */
.choice span { min-width: 0; overflow-wrap: break-word; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.consent {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1.1rem; background: var(--surface-soft); border-radius: var(--radius);
  border: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.55;
}
.consent input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--accent); flex: 0 0 auto; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error-summary {
  border: 1.5px solid var(--err); background: var(--err-soft);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 2rem;
}
.form-error-summary h2 { font-size: 1.0625rem; color: var(--err); margin-bottom: .5rem; }
.form-error-summary ul { margin: 0; padding-left: 1.2rem; font-size: var(--fs-small); }
.form-error-summary a { color: var(--err); font-weight: 600; }

.form-aside {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--fs-small); position: sticky; top: 100px;
}
.form-aside h2 { font-size: 1.0625rem; }
.form-aside dl { margin: 0; }
.form-aside dt { font-weight: 600; margin-top: .9rem; }
.form-aside dd { margin: 0; color: var(--ink-700); }

/* --- 16. Reifegradcheck ------------------------------------------------ */
.check { max-width: 46rem; }
.check__progress { position: sticky; top: 88px; background: #fff; padding: 1rem 0; z-index: 20; border-bottom: 1px solid var(--line); }
.check__bar { height: 5px; background: var(--surface-deep); border-radius: 3px; overflow: hidden; }
.check__bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.check__meta { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-500); margin-bottom: .5rem; }
.check__q { margin-bottom: 2rem; }
.check__q > p { font-weight: 600; font-size: 1.0625rem; margin-bottom: .9rem; }
.check__dim { font: 600 .6875rem var(--font-mono); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; }
.check__result { display: none; }
.check__result.is-visible { display: block; }
.score-row { display: grid; gap: .5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .score-row { grid-template-columns: 12rem 1fr; align-items: center; } }
.score-bar { height: 8px; background: var(--surface-deep); border-radius: 4px; overflow: hidden; }
.score-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.score-bar--low span { background: var(--err); }
.score-bar--mid span { background: var(--ask); }
.score-bar--high span { background: var(--ok); }

/* --- 17. Filter -------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filter {
  background: #fff; border: 1.5px solid var(--line); border-radius: 100px;
  padding: .5rem 1rem; font: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--ink-700); cursor: pointer;
}
.filter:hover { border-color: var(--line-strong); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- 18. Event --------------------------------------------------------- */
.event-card { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 720px) { .event-card { grid-template-columns: 8.5rem 1fr auto; } }
.event-date {
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: .9rem; text-align: center; line-height: 1.1;
}
.event-date__day { display: block; font-size: 2rem; font-weight: 600; }
.event-date__mon { display: block; font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: #9fb6cc; margin-top: .2rem; }
.event-date__year { display: block; font-size: var(--fs-small); color: #9fb6cc; }
.event-meta { font-size: var(--fs-small); color: var(--ink-500); display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .75rem; }
.event-meta--onDark { color: #c3d6ea; }
.state { font-weight: 600; }
.state--offen { color: var(--ok); }
.state--wenige { color: var(--ask); }
.state--ausgebucht { color: var(--err); }
.state--vergangen { color: var(--ink-300); }
.event-meta--onDark .state--offen { color: #6fd9a4; }
.event-meta--onDark .state--wenige { color: #f3b56b; }
.event-meta--onDark .state--ausgebucht { color: #f19086; }
.event-meta--onDark .state--vergangen { color: #9fb6cc; }

.agenda { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.agenda li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.agenda time { font: 600 .9375rem var(--font-mono); color: var(--accent); }

/* --- 19. Case ---------------------------------------------------------- */
.case-hero { background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.beforeafter { display: grid; gap: 2rem; }
@media (min-width: 860px) { .beforeafter { grid-template-columns: 1fr 1fr; } }
.beforeafter__col { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; background: #fff; }
.beforeafter__col--after { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.beforeafter h3 { font-size: 1.0625rem; }
.beforeafter__label { font: 600 .6875rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); display: block; margin-bottom: .4rem; }
.beforeafter__col--after .beforeafter__label { color: var(--accent); }

.kpi-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 2rem 0; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; background: #fff; }
.kpi__val { font-size: 1.75rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.kpi__lbl { font-size: var(--fs-small); color: var(--ink-500); margin-top: .3rem; }

/* --- 20. Footer -------------------------------------------------------- */
.footer { background: var(--ink); color: #b6c8db; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: var(--fs-small); }
.footer a { color: #d5e3f1; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h2 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__brand p { color: #9fb6cc; max-width: 34ch; }
.footer__legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center;
  color: #8ba4bd;
}
.footer__legal a { color: #b6c8db; }
.footer__operator { margin-left: auto; }
@media (max-width: 700px) { .footer__operator { margin-left: 0; } }

/* --- 21. Cookie-Banner ------------------------------------------------- */
.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 150;
  background: #fff; border-top: 2px solid var(--ink);
  box-shadow: 0 -8px 32px rgba(10,30,53,.16);
  padding: 1.5rem 0;
}
.consent-banner[hidden] { display: none; }
.consent-banner__inner { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .consent-banner__inner { grid-template-columns: 1fr auto; } }
.consent-banner p { font-size: var(--fs-small); max-width: 68ch; }
.consent-banner h2 { font-size: 1.0625rem; }
.consent-banner .btn-row { margin-top: 0; }
.consent-options { display: grid; gap: .5rem; margin: 1rem 0 0; }

/* --- 22. Utilities ----------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-500); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.text-small { font-size: var(--fs-small); }

.breadcrumb { font-size: var(--fs-small); color: var(--ink-500); padding-block: 1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--line-strong); }
.breadcrumb a { color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* Variante für dunkle Hero-Flächen: Breadcrumb sitzt dann innerhalb des
   Hero, nicht mehr auf weißem Grund davor (kein Farbbruch am Seitenanfang). */
.breadcrumb--onDark { padding-block: 0 1.25rem; color: #9fb6cc; }
.breadcrumb--onDark a { color: #c3d6ea; }
.breadcrumb--onDark a:hover { color: #fff; }
.breadcrumb--onDark li + li::before { color: rgba(255,255,255,.3); }

/* Bildplatzhalter bis die Fotoproduktion abgeschlossen ist (Kapitel 22) */
.placeholder {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface-soft) ; padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--ink-500); font-size: var(--fs-small);
}
.placeholder strong { display: block; color: var(--ink); margin-bottom: .35rem; font-size: var(--fs-body); }
.placeholder ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.placeholder li { margin-bottom: .3rem; }

@media print {
  .header, .footer, .cta-band, .consent-banner, .utility, .nav { display: none !important; }
  body { font-size: 11pt; }
}

/* --- 23. Prozesslinie: vertikale Variante für schmale Viewports -------- */
.flow-vert { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 759px) {
  .flow-svg--wide { display: none; }
  .flow-vert { display: grid; gap: 0; }
  /* Die Startseite zieht die breite SVG-Fassung per Inline-Style auf 150%
     (siehe flow.php), damit sie über die Grid-Spalte hinausragt. Auf
     schmalen Viewports gilt dieselbe Breite aber für die vertikale
     Kettenlisten-Fassung – dort reißt sie Chips und Text am rechten Rand ab.
     !important ist hier die gezielte Ausnahme, um genau dieses Inline-Style
     zu überschreiben. */
  .flow { width: 100% !important; }
}
.flow-vert > li { position: relative; padding: .85rem 0 .85rem 2.75rem; }
.flow-vert > li::before {
  content: ""; position: absolute; left: .85rem; top: 0; bottom: 0;
  width: 2px; background: var(--line-strong);
}
.flow-vert > li:first-child::before { top: 50%; }
.flow-vert > li:last-child::before { bottom: 50%; }
.flow--onDark .flow-vert > li::before { background: rgba(255,255,255,.25); }

.flow-vert__cap {
  display: block; font: 600 .6875rem var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .45rem;
}
.flow--onDark .flow-vert__cap { color: #7fb2f2; }
.flow-vert__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.flow-vert__chips span {
  font-size: .75rem; padding: .2rem .5rem; border-radius: 3px;
  background: var(--surface-soft); border: 1px solid var(--line); color: var(--ink-700);
}
.flow--onDark .flow-vert__chips span { background: #16324f; border-color: rgba(255,255,255,.18); color: #d5e3f1; }

.flow-vert__step > span { display: block; }
.flow-vert__step strong { display: block; font-size: 1rem; }
.flow-vert__step em, .flow-vert__exception em {
  display: block; font-style: normal; font-size: var(--fs-small); color: var(--ink-500);
}
.flow--onDark .flow-vert__step em, .flow--onDark .flow-vert__exception em { color: #9fb6cc; }
.flow-vert__n {
  position: absolute; left: 0; top: .9rem; z-index: 1;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  font: 600 .6875rem var(--font-mono); color: var(--accent);
  background: var(--accent-soft); border: 1.5px solid var(--accent); border-radius: 3px;
}
.flow--onDark .flow-vert__n { background: #123a6b; border-color: #4d92e8; color: #7fb2f2; }
.flow-vert__exception {
  margin-left: 0.85rem; border-left: 3px solid var(--ask);
  background: var(--ask-soft); border-radius: 0 var(--radius) var(--radius) 0;
  padding: .85rem 1rem !important;
}
.flow-vert__exception::before { display: none; }
.flow--onDark .flow-vert__exception { background: #3d2c14; border-left-color: #d78f3d; }
.flow-vert__exception strong { display: block; font-size: .9375rem; }

/* ---------------------------------------------------------------------------
   24 · Ergänzungen für JS-gesteuerte Zustände
   Die Basisdarstellung bleibt ohne JavaScript nutzbar; hier stehen nur
   Zustände, die durch Bedienung entstehen.
   --------------------------------------------------------------------------- */
html.nav-open { overflow: hidden; }
.score-row__label { display: block; font-size: var(--fs-small); color: var(--ink-500); }
.score-total { font-size: 1.125rem; margin: 0 0 1rem; }

/* ---------------------------------------------------------------------------
   25 · Mati-Widget
   Kleiner, dezenter Einstieg unten rechts. Ohne JavaScript bleibt die
   Sprechblase dauerhaft sichtbar statt verborgen – kein Inhalt geht verloren.
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.mati {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}
.mati__toggle {
  /* Skaliert mit dem Viewport statt fest 160px: auf schmalen Handys nimmt
     die Kachel sonst fast die halbe Breite ein und drängt sich neben den
     rechten Rand statt als kleiner Badge zu wirken. Der Mindestwert bleibt
     deutlich unter der Desktop-Größe (siehe zusätzliche Verkleinerung unten
     bei <= 480px), damit Mati mobil klar als kleiner Badge wirkt. */
  width: clamp(72px, 22vw, 160px); height: clamp(72px, 22vw, 160px);
  border-radius: 50%; padding: 10px;
  background: transparent;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-md); text-decoration: none;
  transition: transform .15s ease;
}
.mati__toggle:hover, .mati__toggle:focus-visible { transform: translateY(-2px); }
.mati__toggle img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

/* --- Chat-Panel ---------------------------------------------------------
   Ohne JS bleibt "hidden" bestehen (siehe mati.php) – der Avatar ist dann
   ein normaler Link zum Prozess-Check, das Panel existiert im Markup, wird
   aber nie sichtbar geschaltet. */
.mati__panel {
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 7rem));
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(4,18,41,.28), 0 2px 8px rgba(4,18,41,.12);
  display: flex; flex-direction: column;
  transform-origin: bottom right;
}
/* JS steuert die Sichtbarkeit über das "hidden"-Attribut (entfernt Fokus/
   Screenreader-Zugriff vollständig, sobald das Panel zu ist) UND über die
   Klasse "is-open" (für den weichen Übergang). Reihenfolge beim Öffnen:
   hidden entfernen, einen Frame später is-open setzen. Beim Schließen:
   is-open entfernen, nach Ablauf der Transition hidden wieder setzen. */
html.js .mati__panel {
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
html.js .mati__panel.is-open { opacity: 1; transform: none; }

.mati__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem; background: var(--ink); color: #fff;
}
.mati__head-avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.mati__head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mati__head-text strong { font-family: var(--font-display); font-size: 1.0625rem; }
.mati__head-text span { font-size: .78rem; color: #b9cbe0; }
.mati__icon-btn {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff;
  cursor: pointer; transition: background-color .15s ease;
}
.mati__icon-btn:hover, .mati__icon-btn:focus-visible { background: rgba(255,255,255,.24); }

.mati__log {
  flex: 1 1 auto; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .65rem;
  background: var(--surface-soft);
  scroll-behavior: smooth;
}

.mati__msg { max-width: 86%; padding: .6rem .85rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; }
.mati__msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mati__msg--assistant { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.mati__msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.mati__msg--system { align-self: center; background: var(--ask-soft); color: #7a4c14; border: 1px solid var(--ask); font-size: .82rem; text-align: center; }
.mati__msg--welcome { align-self: stretch; max-width: 100%; background: linear-gradient(160deg, var(--accent-soft), #fff); border: 1px solid var(--line); }

.mati__typing { align-self: flex-start; display: flex; gap: 4px; padding: .75rem .9rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 4px; }
.mati__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); }
@media (prefers-reduced-motion: no-preference) {
  .mati__typing span { animation: mati-typing 1.1s ease-in-out infinite; }
  .mati__typing span:nth-child(2) { animation-delay: .15s; }
  .mati__typing span:nth-child(3) { animation-delay: .3s; }
}
@keyframes mati-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.mati__form {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: .5rem;
  padding: .7rem; border-top: 1px solid var(--line); background: #fff;
}
.mati__form textarea {
  flex: 1 1 auto; resize: none; max-height: 110px; font: inherit; font-size: .9rem;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-soft); color: var(--ink);
}
.mati__form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mati__send {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.mati__send:hover, .mati__send:focus-visible { background: var(--accent-dark); }
.mati__send:disabled { background: var(--line-strong); cursor: not-allowed; }

.mati__foot {
  flex: 0 0 auto; margin: 0; padding: .55rem .9rem .7rem; font-size: .68rem;
  line-height: 1.4; color: var(--ink-500); background: #fff; border-top: 1px solid var(--line);
}
.mati__foot a { color: inherit; }

@media (max-width: 480px) {
  .mati__panel { position: fixed; inset: auto 0 0 0; width: 100%; height: min(84vh, 620px); border-radius: 18px 18px 0 0; }
  .mati { right: .75rem; bottom: .75rem; }
  /* Fester, kleinerer Wert statt vw-Skalierung: auf sehr schmalen Handys
     bleibt der Badge damit sicher klein statt sich an 22vw zu orientieren. */
  .mati__toggle { width: 112px; height: 112px; padding: 7px; }
}

/* ---------------------------------------------------------------------------
   26 · Premium-Interaktionen
   Alles hier ist reine Zusatzschicht: Ohne "html.js" (siehe FOUC-Hinweis in
   layout.php) bleibt jeder Inhalt normal sichtbar. Der globale
   prefers-reduced-motion-Killer aus Abschnitt 2 deckt alle Transitions/
   Keyframes hier automatisch mit ab; JS-getriebene Bewegung (Parallax,
   Magnet-Buttons, Flow-Spotlight) wird zusätzlich in site.js geprüft.
   --------------------------------------------------------------------------- */

/* Scroll-Fortschrittsleiste */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 200; pointer-events: none;
}
html.js .scroll-progress { transition: width .12s linear; }

/* Scroll-Reveal: einzelne Elemente */
html.js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
html.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Scroll-Reveal: Gruppen mit gestaffelten Kindern (Karten, Kacheln, Listen) */
html.js [data-reveal-group] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
html.js [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
html.js [data-reveal-group] > *:nth-child(1) { transition-delay: .00s; }
html.js [data-reveal-group] > *:nth-child(2) { transition-delay: .08s; }
html.js [data-reveal-group] > *:nth-child(3) { transition-delay: .16s; }
html.js [data-reveal-group] > *:nth-child(4) { transition-delay: .24s; }
html.js [data-reveal-group] > *:nth-child(5) { transition-delay: .32s; }
html.js [data-reveal-group] > *:nth-child(6) { transition-delay: .40s; }
html.js [data-reveal-group] > *:nth-child(n+7) { transition-delay: .46s; }

/* Barrierefreiheit: reduzierte Bewegung heißt "Inhalt sofort da", nicht
   "Inhalt hängt an einer Scroll-Position fest". Betrifft auch Tastatur-Fokus,
   der sonst auf einem noch unsichtbaren (opacity:0) Element landen könnte. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-group] > * {
    opacity: 1 !important; transform: none !important;
  }
}
html.js [data-reveal]:focus-within,
html.js [data-reveal-group] > *:focus-within {
  opacity: 1; transform: none;
}

/* Magnet-Buttons: JS setzt transform beim Mousemove, hier nur die
   Rückfeder-Transition. Betrifft ausschließlich Zeigegeräte (siehe JS). */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .25s var(--ease-out); }

/* Karten: dezentes Spotlight, das dem Cursor folgt */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(11,99,214,.09), transparent 72%);
  transition: opacity .35s ease; pointer-events: none;
}
.card:hover::after, .card:focus-within::after { opacity: 1; }
.section--deep .card::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 72%); }

/* Header: weicherer Kompakt-Übergang mit Schattentiefe */
.header { transition: box-shadow .3s ease; }
.header.is-compact { box-shadow: 0 6px 24px rgba(4,18,41,.10); }
.header__inner { transition: min-height .3s var(--ease-out); }
.logo__descriptor { transition: opacity .2s ease, max-height .3s ease; }

/* Mati: Auftritt mit kurzer Verzögerung, statt beim Seitenaufbau schon da zu
   stehen. Ohne JS (kein "is-visible" nötig) bleibt der Link sofort normal
   sichtbar – siehe Basis-Regel in Abschnitt 25. */
html.js .mati { opacity: 0; transform: translateY(18px) scale(.92); }
html.js .mati.is-visible {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .55s var(--ease-out), transform .6s var(--ease-spring);
}
.mati__toggle { position: relative; }
.mati__toggle::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--accent-2); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .mati.is-visible .mati__toggle::before {
    animation: mati-ring 1.6s var(--ease-out) .3s 2;
  }
}
@keyframes mati-ring {
  0%   { opacity: .6; transform: scale(.82); }
  100% { opacity: 0;  transform: scale(1.4); }
}

/* --- Prozesslinie: Entrance-Choreografie und Live-Spotlight ------------ */
/* .fl-item-Gruppen (Eingänge, Schritte, Ziel, Ausnahme) starten dezent
   verschoben/unsichtbar und blenden gestaffelt ein, sobald die Grafik in den
   Viewport scrollt (Klasse "is-drawn" von IntersectionObserver gesetzt).
   Die Verbindungslinien selbst zeichnet site.js per stroke-dashoffset. */
.flow-svg .fl-item {
  opacity: 0; transform: translateY(5px) scale(.97);
  transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--ease-out), transform .55s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.flow.is-drawn .flow-svg .fl-item { opacity: 1; transform: translateY(0) scale(1); }

/* Nach dem Eintritt soll der gestaffelte Delay nicht mehr auf spätere
   Zustandswechsel (z. B. den Live-Spotlight) durchschlagen. */
.flow.is-drawn .flow-svg .fl-item--step { transition-delay: 0s; }

.flow-svg .fl-dash { opacity: 0; transition: opacity .6s ease; transition-delay: .55s; }
.flow.is-drawn .flow-svg .fl-dash { opacity: 1; }

.flow-svg .fl-track:not(.fl-dash) { transition: stroke-dashoffset 1.1s var(--ease-out); }

/* Aktiver Schritt im Live-Umlauf: leichtes Anheben plus atmendes Leuchten
   statt eines reinen Farbwechsels, damit die Kontrastwerte der Vorlage
   erhalten bleiben. */
.flow-svg .fl-item--step.is-active { transform: translateY(-3px) scale(1); }
.flow-svg .fl-item--step.is-active .fl-node--accent {
  stroke-width: 2.25;
  filter: drop-shadow(0 0 5px rgba(11,99,214,.45));
}
.flow--onDark .flow-svg .fl-item--step.is-active .fl-node--accent {
  filter: drop-shadow(0 0 6px rgba(94,160,240,.55));
}
@media (prefers-reduced-motion: no-preference) {
  .flow-svg .fl-item--step.is-active .fl-node--accent { animation: fl-breathe 2.2s ease-in-out infinite; }
  @keyframes fl-breathe {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(11,99,214,.4)); }
    50%      { filter: drop-shadow(0 0 9px rgba(11,99,214,.65)); }
  }
  .flow--onDark .flow-svg .fl-item--step.is-active .fl-node--accent { animation-name: fl-breathe-dark; }
  @keyframes fl-breathe-dark {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(94,160,240,.45)); }
    50%      { filter: drop-shadow(0 0 10px rgba(94,160,240,.75)); }
  }
}