/* ==========================================================================
   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);
}

/* "KZN Grotesk" ist noch nicht als Datei vorhanden – bis dahin greift die
   System-Grotesk aus --font-sans. Die @font-face-Regeln sind auskommentiert,
   weil sie auf jeder Seite zwei 404-Anfragen auslösten. Sobald
   kzn-grotesk-400/600.woff2 unter /assets/fonts/ liegen, wieder aktivieren.
@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;
}
/* Handschrift für die Skizzen-Animation auf der Vorgehen-Seite (variable Schrift, OFL) */
@font-face {
  font-family: "KZN Hand";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700; 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: #b6c8db; }
.section--deep { background: var(--ink); color: #fff; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep a { color: #9dc4f5; }
.section--deep a.btn--primary, .section--deep a.btn--primary:hover { color: #fff; }
/* Zwei dunkle Sektionen hintereinander (z. B. Angebotsseite → FAQ) */
.section--deep + .section--deep { border-top: 1px solid rgba(255,255,255,.12); }
.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; }
/* Ohne min-width:0 wächst eine Spalte auf die Breite ihres breitesten Inhalts */
.split > * { min-width: 0; }
@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);
}

.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; }

/* Header-CTA: Pille mit Verlauf, Pfeil und einem Lichtreflex beim Überfahren */
.header__cta-btn {
  position: relative; overflow: hidden; isolation: isolate; white-space: nowrap;
  border-radius: 999px; padding: .8rem 1.1rem .8rem 1.4rem; gap: .6rem;
  background: linear-gradient(135deg, var(--accent) 0%, #2f86f0 100%);
  box-shadow: 0 6px 18px rgba(11,99,214,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: box-shadow .25s ease, transform .25s var(--ease-out), background-color .15s ease;
}
.header__cta-btn::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease-out);
}
.header__cta-btn:hover {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  box-shadow: 0 10px 26px rgba(11,99,214,.38), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.header__cta-btn:hover::after { left: 115%; }
.header__cta-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.header__cta-arrow {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: rgba(255,255,255,.18); transition: transform .25s var(--ease-out), background .25s ease;
}
.header__cta-arrow svg { width: .85rem; height: .85rem; }
.header__cta-btn:hover .header__cta-arrow { transform: translateX(3px); background: rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce) {
  .header__cta-btn, .header__cta-btn:hover, .header__cta-btn:hover .header__cta-arrow { transform: none; }
  .header__cta-btn::after { display: none; }
}
/* Kurzform früher als die übrigen Header-Anpassungen (460px): Mit Pfeil
   braucht die Pille mehr Platz, und ohne Umbruch liefe die Zeile sonst über. */
@media (max-width: 640px) {
  .header__cta-btn .header__cta-full { display: none; }
  .header__cta-btn .header__cta-short { display: inline; }
  /* Logo, Markenname, Menü-Knopf und Pille teilen sich eine Zeile – der
     rein dekorative Pfeil muss hier weichen, sonst läuft die Zeile über. */
  .header__cta-btn .header__cta-arrow { 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; }
/* Der Überblick steht über den Angebotsbereichen und ist eine andere Art von
   Ziel (Einstieg statt Einzelthema) - die Trennlinie macht das sichtbar. */
.nav__panel-lead { margin-bottom: .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }

.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; flex: 0 0 auto; }
  .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, visibility 0s linear .22s;
    box-shadow: var(--shadow-md);
    /* Geschlossen unsichtbar: Das Panel neben dem Viewport machte die Seite
       sonst doppelt so breit (auf iOS seitlich wischbar) und blieb per Tab
       erreichbar. */
    visibility: hidden;
    /* Über der Header-Pille, die im DOM nach dem Panel kommt und sonst den
       Schließen-Knopf verdeckte. */
    z-index: 10;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  .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__cta .header__cta-btn { padding: .6rem .7rem .6rem 1.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; }
  /* Das geschlossene Panel hängt (wegen backdrop-filter) am Header und
     ragte rechts daneben in den Seitenrand – clip schneidet es ab, ohne wie
     overflow:hidden das sticky-Verhalten zu brechen. */
  .header { overflow-x: clip; }
}
@media (max-width: 1080px) { .nav__close { display: block; } }
/* Ohne Pfeil (≤640px) symmetrischer Innenabstand – muss nach dem
   1080px-Block stehen, der sonst den Pfeil-Abstand erzwingen würde. */
@media (max-width: 640px) {
  .header__cta .header__cta-btn { padding: .6rem 1rem; }
  /* Burger nur als Symbol – sonst reicht die Zeile für Logo und Pille nicht. */
  .nav__burger-label { display: none; }
  .nav__burger { padding: .6rem; gap: 0; }
}
@media (min-width: 1081px) { .nav__close, .nav__contact { display: none; } }
/* Logo auf schmalen Viewports: Bildmarke kleiner, Name zweizeilig
   ("KI-Zentrum / NRW"), damit Logo, Burger und Pille in eine Zeile passen.
   Unter 360px bleibt nur die Bildmarke sichtbar, der Name bleibt für
   Screenreader als Linktext erhalten. */
.logo { min-width: 0; }
@media (max-width: 640px) {
  .logo { flex: 0 1 auto; }
  .logo__glyph { width: 44px; height: 44px; }
  .logo__mark { font-size: 1rem; }
  .logo__name { max-width: 6.5em; line-height: 1.15; }
}
@media (max-width: 359px) {
  .logo__name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 460px) {
  .header__cta .btn { font-size: .8125rem; padding: .65rem .8rem; }
  .header__cta .header__cta-btn { padding: .55rem .85rem; }
  .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;
}

/* Homepage: Bild als Hintergrund hinter den Farbverläufen. */
.hero--home {
  /* Komprimierte JPG-Fassung des Originals (KI Website Background.png, 1,2 MB);
     das Bild ist das LCP-Element und wird in layout.php vorgeladen. */
  background-image: url('/assets/img/hero-bg.jpg'), var(--grad-hero);
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-position: right center, 0 0;
}
@media (max-width: 800px) {
  .hero--home { background-image: url('/assets/img/hero-bg-mobile.jpg'), var(--grad-hero); }
}
@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); }
}

/* Deko-Illustration: in eine Karte im selben Stil wie .hero__process gefasst
   statt lose zu schweben - dritte, gleich gerahmte Fläche neben Förder- und
   Prozess-Karte, statt eines bunten "Aufklebers" ohne Kontext. flex:1 lässt
   sie den restlichen Platz der rechten Spalte einnehmen, damit die Spalte
   insgesamt auf Höhe der linken Förder-Karte kommt (siehe .hero__col). */
.hero__fund-decor-card {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}
@media (max-width: 760px) {
.hero__fund-decor-card {
    flex: 1 1 auto;
    padding-top: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}
}

.hero__fund-decor {
    margin-bottom: 120px;
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    max-width: 520px;
    height: auto;
    opacity: .95;
}



/* 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; }
/* Grid-Items dürfen sonst nicht unter ihre Inhaltsbreite schrumpfen (Default
   min-width:auto) - ein einzelnes zu breites Kind irgendwo in einer Hero-
   Spalte würde sonst die ganze Spalte und den Viewport aufsprengen. */
.hero__grid > * { min-width: 0; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }

/* Startseite: beide Spalten strecken sich auf gleiche Höhe statt vertikal
   zentriert zu werden - bei center-Ausrichtung verschiebt die zusätzliche
   Bild-Karte rechts sonst den ganzen Block nach oben und die Kartenkanten
   laufen auseinander. flex:1 auf der Bild-Karte (unten) füllt die Differenz
   zur linken Förder-Karte, damit beide Spalten unten wie oben bündig sind. */
.hero--home .hero__grid { align-items: stretch; }
.hero__col { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.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; }

/* Countdown im Hero (Eventseite, Messe FMB) */
.countdown { margin-top: 1.5rem; }
.countdown__label { display: block; font-size: var(--fs-small); color: #d7e6fb; margin-bottom: .75rem; }
.countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; max-width: 26rem; }
.countdown__units[hidden] { display: none; }
.countdown__unit {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .75rem .4rem;
  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);
}
.countdown__unit strong {
  font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.countdown__unit small { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #a7bdd3; }

/* Bild neben dem Hero-Text (z. B. Eventseite) */
.hero__media { margin: 0; }
.hero__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow-md);
}

/* --- 7a. Hero-Förderkampagne: NRW.BANK.Impuls KI ----------------------
   Die Startseite führt vorübergehend mit dem Förderprogramm statt mit dem
   Kernversprechen (siehe home.php). Die Förder-Karte trägt jetzt allein die
   linke Spalte (Headline, Beschreibung, Fakten, CTA) - deshalb farbige
   Verlaufsfläche statt Glas-Card, das helle NRW.BANK-Logo funktioniert nur
   auf dunklem/farbigem Grund, nie auf Weiß. */
.hero__fund-card {
  flex: 1 1 auto;
  position: relative; overflow: hidden;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--grad-panel);
  box-shadow: var(--shadow-md);
  color: #fff;
}
.hero__fund-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.16), transparent 55%);
}
.hero__fund-card > * { position: relative; z-index: 1; }
.hero__fund-card-logo { height: 34px; width: auto; display: block; }
.hero__fund-card-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.hero__fund-card-brand-label {
  font-size: var(--fs-small); color: #d7e6fb;
  padding-left: .85rem; border-left: 1px solid rgba(255,255,255,.3);
}
.hero__fund-card-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  color: #d7e6fb; margin-bottom: .6rem;
}
.hero__fund-card-h1 {
  /* max-width kommt von der globalen ".hero h1"-Regel (18ch, per Tag- statt
     Klassenselektor spezifischer) - hier nicht erneut setzen, sonst zwei
     widersprüchliche Werte im selben Element. */
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.12;
  margin: 0 0 1rem;
}
.hero__fund-card-desc { color: #e3edfb; max-width: 46ch; margin: 0 0 1.5rem; }
.hero__fund-card-list {
  list-style: none; margin: 0; padding: 1.25rem 0; display: grid; gap: .65rem;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
  font-size: var(--fs-small); color: #e3edfb;
}
.hero__fund-card-list strong { color: #fff; }
.hero__fund-card .btn-row { margin-top: 1.5rem; }
.hero__fund-card-note {
  margin: 1.5rem 0 0; font-size: .78rem; line-height: 1.5; color: #c7dbf3;
}

/* Prozess-Visualisierung rechts: wie die Förderung durchlaufen wird, im
   selben Baukasten wie die Prozesslinie (Glas-Card, Icon-Kreise), aber als
   einfache vertikale Schrittfolge statt SVG - eigenständig für vier feste,
   textlastige Schritte statt für die generische Workflow-Grafik. */
.hero__process {
  height: 100%;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-md);
}
.hero__process-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  color: #7fb2f2; margin-bottom: 1.5rem;
}
.hero__process-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.hero__process-steps li {
  position: relative; display: flex; gap: 1rem; padding-bottom: 1.75rem;
}
.hero__process-steps li:last-child { padding-bottom: 0; }
/* Verbindungslinie hinter den Icon-Kreisen - suggeriert den automatisierten
   Ablauf von Schritt zu Schritt, ohne eine eigene SVG-Grafik zu brauchen. */
.hero__process-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 0;
  width: 1.5px; background: rgba(255,255,255,.2);
}
.hero__process-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  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);
}
.hero__process-icon svg { width: 20px; height: 20px; }
.hero__process-steps strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  color: #fff; font-size: 1.0625rem; margin-bottom: .3rem;
}
.hero__process-steps p { margin: 0; color: #b9cbe0; font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 1000px) { .hero__process { margin-top: 0; } }

/* Leuchtender Ablauf: Linie und Icon-Kreise pulsieren nacheinander, um die
   Förderung "wie eine Animation" wirken zu lassen - automatisierter
   Durchlauf statt statischer Liste. --accent-2 ist laut Tokens nur für
   sparsame Mikro-Akzente gedacht (siehe :root); ein Glow-Ring ist genau das
   (gleiches Muster wie der Mati-Ring in Abschnitt 26), keine Fläche. Der
   globale prefers-reduced-motion-Killer (Abschnitt 2) deckt beide
   Keyframes automatisch mit ab. */
.hero__process-steps li:not(:last-child)::before {
  background: linear-gradient(to bottom, var(--accent-2), rgba(255,255,255,.15));
}
@media (prefers-reduced-motion: no-preference) {
  .hero__process-steps li:not(:last-child)::before { animation: process-line-glow 4.8s ease-in-out infinite; }
  .hero__process-icon { animation: process-icon-glow 4.8s ease-in-out infinite; }
  .hero__process-steps li:nth-child(1) .hero__process-icon { animation-delay: 0s; }
  .hero__process-steps li:nth-child(2) .hero__process-icon { animation-delay: 1.2s; }
  .hero__process-steps li:nth-child(3) .hero__process-icon { animation-delay: 2.4s; }
  .hero__process-steps li:nth-child(4) .hero__process-icon { animation-delay: 3.6s; }
  .hero__process-steps li:nth-child(1)::before { animation-delay: 0s; }
  .hero__process-steps li:nth-child(2)::before { animation-delay: 1.2s; }
  .hero__process-steps li:nth-child(3)::before { animation-delay: 2.4s; }
}
@keyframes process-line-glow {
  0%, 74%, 100% { box-shadow: none; opacity: .5; }
  8%  { box-shadow: 0 0 10px 1px rgba(147,195,62,.7); opacity: 1; }
}
@keyframes process-icon-glow {
  0%, 74%, 100% {
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(4,18,41,.25);
  }
  8% {
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(4,18,41,.25),
      0 0 0 6px rgba(147,195,62,.32), 0 0 24px 4px rgba(147,195,62,.6);
  }
}

/* Primärer CTA: dezenter Leucht-Puls statt eines Dauer-Effekts, damit der
   wichtigste Klick auf der Karte auffällt, ohne unruhig zu wirken. */
@media (prefers-reduced-motion: no-preference) {
  .hero__fund-card .btn--primary,
  .hero__fund-card .btn--light {
    animation: cta-glow 3.2s ease-in-out infinite;
  }
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,.22), 0 6px 20px rgba(4,18,41,.3); }
}

/* --- 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; }
/* FAQ auf dunklem Grund (partials/faq.php) */
.section--deep .faq, .section--deep .faq__item { border-color: rgba(255,255,255,.16); }
.section--deep .faq__q { color: #fff; }
.section--deep .faq__q:hover { color: #9dc4f5; }
.section--deep .faq__icon::before, .section--deep .faq__icon::after { background: #7fb2f2; }
.section--deep .faq__a { color: #c8d8e8; }

/* --- 14. CTA-Band ------------------------------------------------------ */
/* Weiß wie die normalen Inhaltssektionen; die feine Linie oben trennt es
   von einer weißen Sektion davor, der dunkle Footer darunter grenzt sich
   von selbst ab. */
.cta-band {
  background: var(--surface); border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { max-width: 20ch; }
.cta-band p { color: var(--ink-500); 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: var(--ink-500);
  display: flex; align-items: center; gap: .5rem;
}
.cta-band__promise svg { flex: 0 0 auto; }
/* Kreis im Grün der Bildmarke, Haken bleibt in Textfarbe */
.cta-band__ring { stroke: var(--accent-2); }

/* --- 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 -------------------------------------------------------- */
/* Eine Stufe dunkler als die dunklen Sektionen (--ink) und mit feiner Linie
   oben: trennt den Footer auch dort, wo direkt davor eine dunkle Sektion
   steht (z. B. die FAQ auf /prozess-check/). */
.footer {
  background: var(--ink-950); color: #b6c8db; font-size: var(--fs-small);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer a { color: #d5e3f1; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
/* Handy: Marke über volle Breite, Linkgruppen zweispaltig.
   Tablet: Marke oben, drei Linkgruppen darunter. Desktop: vier Spalten. */
.footer__grid { display: grid; gap: 2.25rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}
.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__contact { margin-top: 1.25rem; line-height: 1.8; }
.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: 999px) {
  /* Marke als eigener Block, durch eine Linie von den Links getrennt */
  .footer__brand { padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.14); }
  .footer__brand p { max-width: 60ch; }
}
@media (max-width: 699px) {
  .footer { padding-block: 2.75rem 1.75rem; }
  .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__grid > div:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  /* Größere Tippflächen */
  .footer ul { gap: 0; }
  .footer ul a { display: block; padding-block: .45rem; }
  .footer h2 { margin-bottom: .5rem; }
  .footer__legal { margin-top: 2.25rem; justify-content: center; text-align: center; gap: .5rem 1.25rem; }
  .footer__operator { margin-left: 0; flex-basis: 100%; font-size: .8125rem; }
}

/* --- 21. Cookie-Banner ------------------------------------------------- */
/* Mobil: Sheet über die volle Breite. Ab 640px: Karte unten links, damit
   der Mati-Button unten rechts frei bleibt. */
.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 150;
  max-height: calc(100dvh - 1.5rem); overflow-y: auto;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(10,30,53,.14);
  padding: 1.25rem var(--gutter) 1.1rem;
}
@media (min-width: 640px) {
  .consent-banner {
    inset: auto auto 1.25rem 1.25rem; width: 430px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem 1.5rem 1.15rem;
  }
}
.consent-banner[hidden] { display: none; }

/* Sperre bis zur Entscheidung – nur mit JavaScript, sonst wären die Buttons
   wirkungslos und die Seite dauerhaft blockiert. */
.consent-scrim { display: none; }
html.js .consent-scrim {
  display: block; position: fixed; inset: 0; z-index: 149;
  background: rgba(10,30,53,.5); backdrop-filter: blur(2px);
}
html.js .consent-scrim[hidden] { display: none; }
html.consent-locked { overflow: hidden; }
@media (min-width: 640px) {
  html.js .consent-banner--modal {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: 460px; max-height: calc(100dvh - 2rem);
    box-shadow: 0 24px 64px rgba(4,18,41,.35);
  }
}
.consent-banner__kicker {
  margin: 0 0 .35rem; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500);
}
.consent-banner h2 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.consent-banner p { margin: 0; font-size: var(--fs-small); line-height: 1.55; }
.consent-banner__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.1rem;
}
.consent-banner__actions .btn { justify-content: center; padding: .75rem 1rem; }
.consent-banner__actions [data-consent-save] { grid-column: 1 / -1; }
@media (max-width: 359px) { .consent-banner__actions { grid-template-columns: 1fr; } }
.consent-banner__actions [hidden] { display: none; }
.consent-banner__more {
  grid-column: 1 / -1; justify-self: center;
  padding: .35rem .5rem; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.consent-banner__more:hover { color: var(--accent); }
.consent-banner__links {
  display: flex; justify-content: center; gap: 1.25rem;
  margin-top: .65rem !important; padding-top: .65rem; border-top: 1px solid var(--line);
  font-size: .8125rem !important;
}
.consent-banner__links a { color: var(--ink-500); text-decoration: none; }
.consent-banner__links a:hover { color: var(--ink); text-decoration: underline; }

/* Kategorien mit Schalter – im Banner und auf /cookie-einstellungen/ */
.consent-details { display: grid; gap: .5rem; margin-top: 1rem; }
.consent-details[hidden] { display: none; }
.consent-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-soft); font-size: var(--fs-small); line-height: 1.45;
}
label.consent-row { cursor: pointer; }
.consent-row__text { display: grid; gap: .15rem; min-width: 0; }
.consent-row__text span { color: var(--ink-500); }
.consent-row__fixed { flex: 0 0 auto; font-size: .8125rem; font-weight: 600; color: var(--ok); }

.switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0;
  position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px;
  background: var(--line-strong); cursor: pointer;
  transition: background-color .15s ease;
}
.switch::before {
  content: ""; position: absolute; top: .1875rem; left: .1875rem;
  width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(10,30,53,.25);
  transition: transform .15s ease;
}
.switch:checked { background: var(--accent); }
.switch:checked::before { transform: translateX(1.1rem); }
.switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Seite /cookie-einstellungen/ */
.cookie-prefs { display: grid; gap: .75rem; margin-top: 2rem; }
.cookie-prefs .consent-row { background: #fff; padding: 1.1rem 1.25rem; }
.cookie-prefs .consent-row__text strong { font-size: 1rem; }
.cookie-prefs__status { margin-top: .75rem; font-size: var(--fs-small); color: var(--ok); min-height: 1.4em; }

/* --- 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; }

/* Bild unter dem Briefing: noch als Platzhalter markiert (kein finales
   Fotoshooting), deshalb optisch bewusst nah an .placeholder - gleicher
   Radius, gleicher Abstand, damit beide als zusammengehöriges Paar wirken. */
.definition-image {
  display: block; width: 100%; height: auto;
  margin-top: 1.25rem; border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
/* Auf dunklem Grund (Standortmodul) steht das Bild allein in seiner Spalte:
   kein Briefing darüber, also kein Abstand nach oben, und die helle Linie
   würde als harter Rand wirken. */
.section--deep .definition-image {
  margin-top: 0; border-color: rgba(255, 255, 255, .14);
}

@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; }

/* --- 23b. E-Mail-Ablauf (Lösungsseite) ---------------------------------
   Ausführlichere Schwester von "Prozesslinie" (23): eigener Klassen-
   namensraum (.email-flow / .ef-*), damit nichts mit .flow-svg kollidiert.
   Ohne JS voll sichtbar; JS ergänzt nur die reduzierte-Bewegung-Behandlung
   der SMIL-Animationen (siehe site.js, "E-Mail-Ablauf"). */
.email-flow { margin: 0; }
.email-flow__svg { display: block; width: 100%; height: auto; }
.email-flow__vert { display: none; list-style: none; margin: 0; padding: 0; }

/* Kompakte Variante als Bildersatz im Hero (partials/flow-email.php mit
   $mode = 'diagram'): weiße Karte statt der dunklen Sektionsfläche, damit
   das Diagramm wie das bisherige Bildplatz-Panel auf dem Hero sitzt. */
.email-flow--hero {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 1.5rem; overflow: hidden;
}
.email-flow--hero .email-flow__vert { padding: .25rem .25rem 0; }

.email-flow__svg .ef-lane { font: 700 13px var(--font-sans); fill: var(--ink-500); }
.email-flow__svg .ef-track { stroke: var(--line-strong); stroke-width: 1.2; fill: none; }
.email-flow__svg .ef-dash { stroke-dasharray: 3 3; }
.email-flow__svg .ef-dash-warn { stroke: var(--ask); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.email-flow__svg .ef-arrow { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.email-flow__svg .ef-arrow-warn { fill: none; stroke: var(--ask); stroke-width: 1.6; }

.email-flow__svg .ef-node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.email-flow__svg .ef-node--example { fill: var(--accent-soft); stroke: var(--accent); }
.email-flow__svg .ef-node--focus { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6; }
.email-flow__svg .ef-node-bar { fill: var(--accent); }
.email-flow__svg .ef-node--exception { fill: var(--ask-soft); stroke: var(--ask); }
.email-flow__svg .ef-node--target { fill: var(--ok-soft); stroke: var(--ok); }

.email-flow__svg .ef-icon { fill: none; stroke: var(--ink-300); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.email-flow__svg .ef-icon-warn { fill: none; stroke: var(--ask); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.email-flow__svg .ef-icon-target { fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.email-flow__svg .ef-icon-mail { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.email-flow__svg .ef-pulse { fill: var(--accent); }

.email-flow__svg .ef-label { font: 700 14px var(--font-sans); fill: var(--ink); }
.email-flow__svg .ef-label--warn { fill: var(--ask); }
.email-flow__svg .ef-label--target { fill: var(--ok); }
.email-flow__svg .ef-tag { font: 600 11px var(--font-sans); fill: var(--accent); }
.email-flow__svg .ef-num { font: 700 12px var(--font-mono); fill: var(--accent); }
.email-flow__svg .ef-sub { font: 400 12px var(--font-sans); fill: var(--ink-500); }
.email-flow__svg .ef-sub--body { font-size: 14px; font-weight: 500; fill: var(--ink); }
.email-flow__svg .ef-sub--warn { fill: var(--ask); }

.email-flow__caption {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  color: var(--ink-500); font-size: var(--fs-small); line-height: 1.6; max-width: 60ch;
}

@media (max-width: 759px) {
  .email-flow__svg { display: none; }
  .email-flow__vert { display: block; }
}
.ef-vblock { margin-bottom: 1.5rem; }
.ef-vlabel {
  display: block; font: 700 .6875rem var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem;
}
.ef-vchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ef-vchip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5rem .75rem; font-size: var(--fs-small); color: var(--ink); font-weight: 500;
}
.ef-vchip svg { width: 16px; height: 16px; flex: none; }
.ef-vchip--example { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.ef-vsteps { position: relative; padding-left: 1.9rem; margin-top: .25rem; }
.ef-vsteps::before {
  content: ""; position: absolute; left: .75rem; top: .4rem; bottom: .4rem;
  width: 2px; background: var(--line-strong);
}
.ef-vstep { position: relative; margin-bottom: 1.1rem; }
.ef-vstep::before {
  content: ""; position: absolute; left: -1.9rem; top: .1rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface-soft);
}
.ef-vstep--focus::before { box-shadow: 0 0 0 3px var(--accent-soft); }
.ef-vstep-title { display: block; font-weight: 700; color: var(--ink); font-size: .9rem; }
.ef-vstep-sub { display: block; color: var(--ink-500); font-size: var(--fs-small); margin-top: .1rem; }

.ef-vexception {
  background: var(--ask-soft); border: 1px solid var(--ask); border-radius: var(--radius);
  padding: .75rem .9rem; margin: .25rem 0 1rem; font-size: var(--fs-small); color: var(--ink); line-height: 1.5;
}
.ef-vexception strong { color: var(--ask); }

.email-flow__walkthrough { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.email-flow__walkthrough h3 { margin-bottom: .35rem; }
.email-flow__walkthrough > p { max-width: 60ch; margin-bottom: 1.5rem; }

.email-flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.email-flow__step-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.1rem 1.25rem;
}
.email-flow__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent); font: 700 .8125rem var(--font-mono);
  margin-bottom: .75rem;
}
.email-flow__step-card h4 { font-size: var(--fs-body); margin: 0 0 .35rem; }
.email-flow__step-card p { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-500); margin: 0; }

.email-flow__exception {
  margin-top: 1.1rem; display: flex; gap: .9rem; align-items: flex-start;
  background: var(--ask-soft); border: 1px solid var(--ask); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}
.email-flow__exception svg { flex: none; margin-top: .1rem; width: 20px; height: 20px; color: var(--ask); }
.email-flow__exception p { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.email-flow__exception strong { color: var(--ask); }

@media (max-width: 900px) { .email-flow__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .email-flow__steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   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;
  /* Schatten im Grün der Bildmarke (--accent-2) */
  box-shadow: 0 2px 6px rgba(147,195,62,.25), 0 12px 32px rgba(147,195,62,.35);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.mati__toggle:hover, .mati__toggle:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(147,195,62,.35), 0 16px 40px rgba(147,195,62,.5);
}
/* Offener Chat liegt über dem Sticky-Header (100), aber unter dem
   Cookie-Banner (150) – sonst verdeckt der Header bei niedrigen Fenstern
   den Kopf des Panels. */
.mati.is-chat-open { z-index: 120; }
.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;
}
/* display:flex oben würde das hidden-Attribut aushebeln: Das geschlossene
   Panel läge dann unsichtbar (opacity 0) über der Seite und finge alle Klicks
   ab – mobil fast den ganzen unteren Bildschirm. */
.mati__panel[hidden] { display: none; }
html.js .mati__panel:not(.is-open) { pointer-events: none; }
/* 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;
}
/* Einträge nie stauchen: Sobald der Verlauf überläuft, würde Flexbox sie
   sonst in der Höhe zusammendrücken (und Karten mit overflow: hidden
   schneiden dann den Text ab). Gescrollt wird stattdessen. */
.mati__log > * { flex-shrink: 0; }

.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); }

/* Seitenvorschläge und Einstiegsfragen als Chips unter der Nachricht */
.mati__links { align-self: flex-start; max-width: 92%; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: -.15rem; }
.mati__chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .75rem;
  font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--accent-dark);
  background: #fff; border: 1px solid var(--accent); border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
a.mati__chip::after { content: "→"; }
.mati__chip:hover, .mati__chip:focus-visible { background: var(--accent); color: #fff; }

/* Ankündigung einer Weiterleitung: Ziel, Abbruch, Fortschrittsbalken */
.mati__nav {
  position: relative; overflow: hidden; align-self: stretch;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin: .15rem 0; padding: .7rem .9rem; border-radius: 12px; font-size: .82rem; line-height: 1.4;
  background: var(--accent-soft); border: 1px solid var(--line); color: var(--ink);
}
/* Erledigte Weiterleitung im Verlauf: nur noch ein dezenter Hinweis */
.mati__nav:not(.is-pending):not(.is-cancelled) {
  align-self: center; gap: .45rem; margin: .1rem 0; padding: .35rem .8rem;
  border-radius: 999px; font-size: .76rem; color: var(--ink-500); background: #fff;
}
.mati__nav:not(.is-pending):not(.is-cancelled)::before { width: 6px; height: 6px; }
.mati__nav:not(.is-pending):not(.is-cancelled) .mati__nav-text { font-weight: 500; }
.mati__nav::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto;
}
.mati__nav-text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.mati__nav-actions { display: flex; gap: .35rem; }
.mati__nav-actions button {
  font: inherit; font-size: .76rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px;
  cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
.mati__nav-actions [data-mati-nav-cancel] { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.mati__nav-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.mati__nav.is-pending .mati__nav-bar { animation: mati-nav var(--mati-nav-dur, 1800ms) linear forwards; }
.mati__nav:not(.is-pending) .mati__nav-bar { display: none; }
.mati__nav.is-cancelled { background: #fff; }
.mati__nav.is-cancelled::before { background: var(--ink-300); }
@keyframes mati-nav { to { transform: scaleX(1); } }

.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 {
  /* min-height zurücksetzen: die globale textarea-Regel (8rem) ließe das
     einzeilige Feld sonst dreimal so hoch starten. Wachsen übernimmt
     autoresize() in site.js bis max-height. */
  flex: 1 1 auto; resize: none; min-height: 0; max-height: 110px; font: inherit; font-size: .9rem; line-height: 1.4;
  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) {
  /* Bottom-Sheet über die volle Breite. Wichtig: .mati trägt für den
     Auftritt ein transform (Abschnitt 26) – solange das gesetzt ist, bezieht
     sich position: fixed auf die kleine Mati-Box statt auf den Viewport und
     das Panel schrumpft auf Badge-Breite. Bei offenem Chat (.is-chat-open,
     site.js) wird das transform deshalb aufgehoben. */
  html.js .mati.is-chat-open, html.js .mati.is-visible.is-chat-open { transform: none; transition: none; }
  .mati.is-chat-open::before {
    content: ""; position: fixed; inset: 0; background: rgba(4,18,41,.45);
  }
  .mati__panel {
    position: fixed; inset: auto 0 0 0; z-index: 1; width: 100%;
    height: min(88vh, 640px); height: min(88dvh, 640px);
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.js .mati__panel { transform: translateY(24px); transform-origin: bottom center; }
  html.js .mati__panel.is-open { transform: none; }
  /* Der Avatar würde sonst über Eingabefeld und Hinweistext liegen. */
  .mati.is-chat-open .mati__toggle { visibility: hidden; }
  .mati__head { padding: .8rem 1rem; }
  .mati__msg { max-width: 90%; }
  .mati__links { max-width: 100%; }
  /* 16px verhindert das automatische Hineinzoomen in iOS beim Fokussieren. */
  .mati__form textarea { font-size: 16px; }
  .mati__foot { padding: .45rem 1rem .55rem; font-size: .66rem; }
  .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: none;
  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)); }
  }
}

/* ---------------------------------------------------------------------------
   26 · Video (Startseite)
   Reiner Hintergrund-Clip ohne Text und ohne Play/Pause: läuft automatisch,
   stumm, in Schleife. Einzige Interaktion ist Stummschaltung an/aus - der
   Button sitzt mittig im Video und erscheint nur, solange sich die Maus
   bewegt (Klasse "is-active", siehe site.js), nicht schon bei bloßem Hover.
   --------------------------------------------------------------------------- */
.video-block { position: relative; overflow: hidden; line-height: 0; cursor: default; }
.video-block__el { display: block; width: 100%; height: auto; object-fit: cover; }

.video-block__mute {
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 30, 53, .55); color: #fff;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.video-block.is-active .video-block__mute,
.video-block__mute:focus-visible {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.video-block__mute:hover, .video-block__mute:focus-visible { background: rgba(10, 30, 53, .8); }
.video-block__icon { width: 24px; height: 24px; }

/* Video-Rückblick auf /events/: Hochformat neben dem Text. Breite begrenzt,
   weil das Material nur 406 px breit ist und größer unscharf würde. */
.ev-recap { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 860px) { .ev-recap { grid-template-columns: minmax(0, 1fr) 340px; } }
.ev-recap__text > * { max-width: 56ch; }
.ev-recap__text .ticks { margin-top: 1.5rem; }
.ev-recap__player {
  position: relative; margin: 0 auto; width: 100%; max-width: 340px;
  aspect-ratio: 406 / 720; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink-950);
  box-shadow: 0 24px 60px rgba(4,18,41,.55), 0 0 0 1px rgba(255,255,255,.12);
}
.ev-recap__player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-recap__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  box-shadow: 0 8px 28px rgba(4,18,41,.45);
  transition: background-color .15s ease, transform .15s ease;
}
.ev-recap__play[hidden] { display: none; }
.ev-recap__play:hover { background: var(--accent-dark); transform: translate(-50%, -50%) scale(1.06); }
.ev-recap__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Touch-Geräte: Button erscheint beim ersten Hineinscrollen und per Antippen
   des Videos (site.js). Ohne JavaScript bleibt er dort dauerhaft sichtbar. */
@media (hover: none) {
  html:not(.js) .video-block__mute { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
}

/* ======================================================================
   Übersichtsseite KI-Prozessautomatisierung (views/pages/solutions.php)
   Präfix sx-. Interaktion aus assets/js/solutions.js; ohne JS stehen alle
   Inhalte untereinander (Bedienelemente erst mit .is-enhanced sichtbar).
   ====================================================================== */
.sx-section { scroll-margin-top: 5.5rem; }
/* Klassen mit eigenem display würden das hidden-Attribut sonst überstimmen. */
.sx-stepper__panel[hidden], .sx-explorer__panel[hidden] { display: none; }

/* Methodenfarben: ein System für Balken, Punkte und Filter */
.sx-kind--ki          { --sx-c: var(--accent); }
.sx-kind--regel       { --sx-c: #5b9bd8; }
.sx-kind--integration { --sx-c: #17334f; }
.sx-kind--mensch      { --sx-c: var(--accent-2-dark); }

/* --- Sprungleiste im Hero ------------------------------------------- */
.sx-jump {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sx-jump a {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem .5rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: #dbe7f5; font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}
.sx-jump a span {
  font: 600 .6875rem var(--font-mono); color: #7fb2f2;
  background: rgba(127,178,242,.14); border-radius: 999px; padding: .2rem .45rem;
}
.sx-jump a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; transform: translateY(-1px); }

/* --- Abschnittsköpfe ------------------------------------------------ */
.sx-head { max-width: 120ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sx-head h2 { margin-bottom: .85rem; }
.sx-head p { color: var(--ink-500); font-size: var(--fs-lead); line-height: 1.6; }
.section--deep .sx-head p { color: #b6c8db; }
.sx-kicker {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .85rem;
  font: 600 .75rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.sx-kicker::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: currentColor; }
.section--deep .sx-kicker { color: #7fb2f2; }

/* --- Workflow-Stepper ----------------------------------------------- */
.sx-stepper__rail { display: none; }
.sx-stepper.is-enhanced .sx-stepper__rail {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: 1.5rem;
}
.sx-stepper__tab {
  position: relative; display: grid; gap: .3rem; text-align: left; cursor: pointer;
  padding: .9rem 1rem 1.15rem; border-radius: var(--radius-lg);
  background: transparent; border: 1px solid var(--line); color: var(--ink-500); font: inherit;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.sx-stepper__tab:hover { border-color: var(--line-strong); color: var(--ink); }
.sx-stepper__num { font: 600 .75rem var(--font-mono); color: var(--ink-300); }
.sx-stepper__label { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.sx-stepper__bar {
  position: absolute; left: 1rem; right: 1rem; bottom: .55rem; height: 3px;
  border-radius: 3px; background: var(--line); overflow: hidden;
}
.sx-stepper__bar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
.sx-stepper__tab.is-done .sx-stepper__bar::after { transform: scaleX(1); opacity: .45; }
.sx-stepper__tab.is-active {
  background: #fff; border-color: var(--accent); color: var(--ink); box-shadow: var(--shadow-md);
}
.sx-stepper__tab.is-active .sx-stepper__num { color: var(--accent); }
.sx-stepper__tab.is-active .sx-stepper__bar::after { transform: scaleX(1); }
.sx-stepper.is-running .sx-stepper__tab.is-active .sx-stepper__bar::after {
  animation: sx-fill var(--sx-dur, 6s) linear forwards;
}
@keyframes sx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sx-stepper__panel {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 14px;
  background: linear-gradient(135deg, var(--surface-soft), #fff 60%);
  border: 1px solid var(--line);
}
.sx-stepper__panel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sx-stepper:not(.is-enhanced) .sx-stepper__panel + .sx-stepper__panel { margin-top: 1rem; }
.sx-stepper__q { display: block; font: 600 .8125rem var(--font-mono); color: var(--accent); margin-bottom: .6rem; }
.sx-stepper__copy h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-bottom: .75rem; }
.sx-stepper__copy p { color: var(--ink-700); line-height: 1.65; }

/* Beispielfenster */
.sx-demo {
  border-radius: 12px; overflow: hidden; color: #dbe7f5;
  background: var(--grad-hero); box-shadow: 0 18px 50px rgba(5,18,41,.28), 0 2px 6px rgba(5,18,41,.2);
  border: 1px solid rgba(255,255,255,.08);
}
.sx-demo__bar {
  display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.sx-demo__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.sx-demo__bar span { margin-left: auto; font: 500 .6875rem var(--font-mono); letter-spacing: .04em; color: #7b93ab; }
.sx-demo__rows { list-style: none; margin: 0; padding: .6rem; display: grid; gap: .4rem; }
.sx-demo__rows li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: center;
  padding: .7rem .85rem; border-radius: 8px; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06); font-size: var(--fs-small);
}
.sx-demo__k { font: 600 .6875rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #7fb2f2; }
.sx-demo__v { color: #fff; overflow-wrap: anywhere; }
.sx-demo--fields .sx-demo__v { font-family: var(--font-mono); font-size: .8125rem; }
.sx-demo--actions .sx-demo__k {
  justify-self: start; padding: .2rem .5rem; border-radius: 4px;
  background: rgba(127,178,242,.14); color: #bcd6f5;
}
.sx-demo li.sx-demo__check { grid-template-columns: 1.5rem minmax(0, 1fr); }
.sx-demo__status {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 .75rem/1 var(--font-sans);
}
.sx-demo__check--ok .sx-demo__status  { background: rgba(20,120,74,.25); color: #6fd39f; }
.sx-demo__check--ok .sx-demo__status::before  { content: "\2713"; }
.sx-demo__check--ask .sx-demo__status { background: rgba(181,97,10,.28); color: #f3b56e; }
.sx-demo__check--ask .sx-demo__status::before { content: "!"; }
.sx-demo li.sx-demo__check--ask { border-color: rgba(243,181,110,.35); background: rgba(181,97,10,.1); }
.sx-demo--handover .sx-demo__rows { border-left: 3px solid #f3b56e; margin: .6rem; padding: .2rem 0 .2rem .6rem; }
.sx-demo--handover li:last-child .sx-demo__v { color: #f3b56e; font-weight: 600; }

/* Einblendung beim Wechsel */
.sx-stepper__panel.is-entering .sx-demo__rows li,
.sx-explorer__panel.is-entering > * {
  animation: sx-rise .5s var(--ease-out) both;
}
.sx-stepper__panel.is-entering .sx-demo__rows li:nth-child(2) { animation-delay: .07s; }
.sx-stepper__panel.is-entering .sx-demo__rows li:nth-child(3) { animation-delay: .14s; }
.sx-stepper__panel.is-entering .sx-demo__rows li:nth-child(4) { animation-delay: .21s; }
.sx-explorer__panel.is-entering > *:nth-child(2) { animation-delay: .06s; }
.sx-explorer__panel.is-entering > *:nth-child(3) { animation-delay: .12s; }
.sx-explorer__panel.is-entering > *:nth-child(4) { animation-delay: .18s; }
@keyframes sx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Methoden --------------------------------------------------------- */
.sx-mix { display: flex; gap: 4px; height: 10px; border-radius: 10px; overflow: hidden; max-width: 560px; }
.sx-mix__seg { background: var(--sx-c); flex-basis: 0; }
.sx-mix__caption { margin: .75rem 0 1.5rem; color: var(--ink-500); font-size: var(--fs-small); }
.sx-mix__caption strong { color: var(--ink); }

.sx-chips { display: none; }
.sx-methods.is-enhanced .sx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.sx-chip {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .5rem 1rem; border-radius: 999px; font: 600 var(--fs-small) var(--font-sans);
  background: #fff; color: var(--ink-700); border: 1px solid var(--line-strong);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sx-chip:hover { border-color: var(--ink); }
.sx-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sx-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--sx-c); flex: 0 0 auto; display: inline-block; }

.sx-method-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sx-method {
  display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; border-radius: 10px; background: #fff; border: 1px solid var(--line);
  transition: opacity .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.sx-method__task { font-weight: 600; color: var(--ink); }
.sx-method__arrow { color: var(--ink-300); font-size: 1.1rem; }
.sx-method__how { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; color: var(--ink-700); }
.sx-method__kind {
  margin-left: auto; font: 600 .6875rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-500); background: var(--surface-soft); border-radius: 4px; padding: .2rem .45rem;
}
.sx-method.is-dim { opacity: .32; }
.sx-method.is-match { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateX(4px); }

/* --- Lösungsfeld-Explorer -------------------------------------------- */
.sx-explorer { display: grid; gap: 1.5rem; }
.sx-explorer__list { display: none; }
.sx-explorer.is-enhanced { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); align-items: start; }
.sx-explorer.is-enhanced .sx-explorer__list { display: grid; gap: .4rem; position: sticky; top: 6rem; }
.sx-explorer__tab {
  position: relative; display: flex; gap: .85rem; align-items: center; text-align: left; cursor: pointer;
  padding: .85rem 1rem; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--ink-700); font: inherit; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sx-explorer__tab strong { display: block; font-size: .9375rem; color: var(--ink); }
.sx-explorer__tab small { display: block; font-size: .8125rem; color: var(--ink-500); line-height: 1.35; margin-top: .1rem; }
.sx-explorer__tab:hover { background: var(--surface-soft); }
.sx-explorer__tab.is-active { background: #fff; border-color: var(--line); box-shadow: var(--shadow-md); }
.sx-explorer__tab.is-active::before {
  content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--accent);
}
.sx-explorer__icon {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.sx-explorer__icon svg { width: 1.2rem; height: 1.2rem; }
.sx-explorer__tab.is-active .sx-explorer__icon { background: var(--accent); color: #fff; }
.sx-explorer__icon--lg { width: 3.25rem; height: 3.25rem; border-radius: 12px; background: var(--grad-panel); color: #fff; }
.sx-explorer__icon--lg svg { width: 1.6rem; height: 1.6rem; }

.sx-explorer__panel {
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 14px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.sx-explorer__panel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sx-explorer:not(.is-enhanced) .sx-explorer__panel + .sx-explorer__panel { margin-top: 1.25rem; }
.sx-explorer__head { display: flex; gap: 1.1rem; align-items: flex-start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.sx-explorer__head h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); margin-bottom: .4rem; }
.sx-explorer__head p { color: var(--ink-700); margin: 0; }
.sx-explorer__block { padding-block: 1.5rem; }
.sx-explorer__block + .sx-explorer__block { padding-top: 0; }
.sx-explorer__block h4 {
  font: 600 .75rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 1rem;
}

.sx-track { list-style: none; counter-reset: sxt; margin: 0; padding: 0; position: relative; }
.sx-track::before { content: ""; position: absolute; left: .9rem; top: .9rem; bottom: .9rem; width: 2px; background: linear-gradient(var(--accent), var(--line)); border-radius: 2px; }
.sx-track li { counter-increment: sxt; position: relative; padding: .35rem 0 .35rem 2.75rem; color: var(--ink-700); line-height: 1.55; }
.sx-track li + li { margin-top: .3rem; }
.sx-track li::before {
  content: counter(sxt); position: absolute; left: 0; top: .25rem;
  width: 1.85rem; height: 1.85rem; border-radius: 50%; display: grid; place-items: center;
  font: 600 .75rem var(--font-mono); color: var(--accent); background: #fff; border: 2px solid var(--accent);
}
.sx-track li:last-child::before { background: var(--accent); color: #fff; }

.sx-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .6rem; }
.sx-kpis li {
  padding: .8rem .95rem; border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--line);
  transition: border-color .2s ease, background .2s ease;
}
.sx-kpis li:hover { border-color: var(--accent); background: var(--accent-soft); }
.sx-kpis strong { display: block; font-size: .9375rem; color: var(--ink); margin-bottom: .2rem; }
.sx-kpis span { display: block; font-size: .8125rem; line-height: 1.45; color: var(--ink-500); }

/* --- Integrationswege (dunkel) ---------------------------------------- */
.sx-integration { background: var(--grad-hero); position: relative; overflow: hidden; }
.sx-routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-route {
  position: relative; padding: 1.5rem; border-radius: 12px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  transition: background .25s ease, border-color .25s ease, transform .3s var(--ease-out);
}
.sx-route:hover { background: rgba(255,255,255,.08); border-color: rgba(127,178,242,.45); transform: translateY(-3px); }
.sx-route__num { font: 600 .75rem var(--font-mono); color: #7fb2f2; }
.sx-route h3 { font-size: 1.125rem; margin: .6rem 0 .5rem; }
.sx-route__tag {
  display: inline-block; font: 600 .6875rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 999px; background: rgba(127,178,242,.14); color: #bcd6f5; margin-bottom: .85rem;
}
.sx-route p { color: #b6c8db; font-size: var(--fs-small); line-height: 1.6; margin: 0; }
.sx-route--last { border-style: dashed; background: transparent; }
.sx-route--last .sx-route__tag { background: rgba(243,181,110,.14); color: #f3c48e; }

/* --- Pilot-Check und Fahrplan ----------------------------------------- */
.sx-duo { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.sx-check, .sx-roadmap { min-width: 0; }
.sx-check h2, .sx-roadmap h2 { margin-bottom: .75rem; }
.sx-check__intro { color: var(--ink-500); margin-bottom: 1.5rem; }
.sx-check__body {
  display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 13rem; align-items: start;
  padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.sx-check__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sx-check__item {
  position: relative; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .75rem; align-items: start; cursor: pointer;
  padding: .6rem .7rem; border-radius: 8px; color: var(--ink-700); font-size: .9375rem; line-height: 1.45;
  transition: background .2s ease, color .2s ease;
}
.sx-check__item:hover { background: var(--surface-soft); }
.sx-check__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-check__box {
  width: 1.3rem; height: 1.3rem; margin-top: .05rem; border-radius: 5px; border: 2px solid var(--line-strong); background: #fff;
  display: grid; place-items: center; transition: background .2s ease, border-color .2s ease, transform .25s var(--ease-spring);
}
.sx-check__box::after { content: ""; width: .35rem; height: .65rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); margin-top: -.15rem; transition: transform .25s var(--ease-spring); }
.sx-check__item input:checked + .sx-check__box { background: var(--accent); border-color: var(--accent); transform: scale(1.05); }
.sx-check__item input:checked + .sx-check__box::after { transform: rotate(45deg) scale(1); }
.sx-check__item input:checked ~ span:last-child { color: var(--ink); }
.sx-check__item input:focus-visible + .sx-check__box { outline: 3px solid var(--accent); outline-offset: 2px; }

.sx-check__result { text-align: center; position: relative; display: grid; justify-items: center; gap: .9rem; }
.sx-ring, .sx-ring__label { display: none; }
.sx-check.is-enhanced .sx-ring { display: block; width: 9.5rem; height: 9.5rem; transform: rotate(-90deg); }
.sx-check.is-enhanced .sx-ring__label {
  display: grid; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 9.5rem; height: 9.5rem; place-content: center; line-height: 1.1;
}
.sx-ring__track { fill: none; stroke: var(--surface-deep); stroke-width: 10; }
.sx-ring__value { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease-out), stroke .3s ease; }
.sx-check.is-complete .sx-ring__value { stroke: var(--ok); }
.sx-ring__label strong { font: 700 2.25rem var(--font-display); color: var(--ink); }
.sx-ring__label span { font-size: .8125rem; color: var(--ink-500); }
.sx-check__msg { font-size: var(--fs-small); color: var(--ink-700); margin: 0; min-height: 4.5em; }
.sx-check__result .btn { width: 100%; justify-content: center; }

.sx-timeline { list-style: none; margin: 1.5rem 0 0; padding: 0; position: relative; }
.sx-timeline::before, .sx-timeline::after {
  content: ""; position: absolute; left: 1.05rem; top: 1.1rem; bottom: 1.1rem; width: 2px; border-radius: 2px;
}
.sx-timeline::before { background: var(--line); }
.sx-timeline::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--sx-progress, 1)); transition: transform .15s linear; }
.sx-timeline li { position: relative; z-index: 1; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .55rem 0; color: var(--ink-500); transition: color .3s ease; }
.sx-timeline__num {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  font: 600 .8125rem var(--font-mono); background: #fff; border: 2px solid var(--line-strong); color: var(--ink-500);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .35s var(--ease-spring);
}
.sx-timeline:not(.is-enhanced) li, .sx-timeline li.is-passed { color: var(--ink); }
.sx-timeline:not(.is-enhanced) .sx-timeline__num,
.sx-timeline li.is-passed .sx-timeline__num { background: var(--accent); border-color: var(--accent); color: #fff; }
.sx-timeline li.is-passed .sx-timeline__num { transform: scale(1.06); }

/* --- Responsiv -------------------------------------------------------- */
@media (max-width: 1000px) {
  .sx-duo { grid-template-columns: 1fr; }
  .sx-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, …) statt 1fr: sonst drückt die scrollbare Tab-Leiste ihre
     volle Breite (5 × 230px) in die Spalte und sprengt das Layout. */
  .sx-explorer.is-enhanced { grid-template-columns: minmax(0, 1fr); }
  .sx-explorer.is-enhanced .sx-explorer__list {
    position: static; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
    overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory;
  }
  .sx-explorer__tab { scroll-snap-align: start; border-color: var(--line); background: #fff; }
}
@media (max-width: 800px) {
  .sx-stepper__panel { grid-template-columns: minmax(0, 1fr); }
  .sx-stepper.is-enhanced .sx-stepper__rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x mandatory;
  }
  .sx-stepper__tab { scroll-snap-align: start; }
  .sx-method { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .sx-method__arrow { display: none; }
  .sx-check__body { grid-template-columns: 1fr; }
  .sx-routes { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sx-demo__rows li { grid-template-columns: 1fr; gap: .2rem; }
  .sx-demo li.sx-demo__check { grid-template-columns: 1.5rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-stepper__panel.is-entering .sx-demo__rows li,
  .sx-explorer__panel.is-entering > * { animation: none; }
  .sx-method.is-match, .sx-route:hover, .sx-jump a:hover { transform: none; }
}

/* --- Lösungsseiten im sx-Design (partials/solution-sx.php) ------------- */
.sx-subhead { font-size: var(--fs-h3); margin: 0 0 1.1rem; }

/* Status "fehlt" im Beispielfenster */
.sx-demo__check--miss .sx-demo__status { background: rgba(179,45,36,.3); color: #ff9a9a; }
.sx-demo__check--miss .sx-demo__status::before { content: "\00d7"; }
.sx-demo li.sx-demo__check--miss { border-color: rgba(255,154,154,.3); background: rgba(179,45,36,.12); }
.sx-stepper__panel--solo { grid-template-columns: minmax(0, 1fr); }

/* Dokumenttypen */
.sx-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-doc {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.35rem 1.4rem; border-radius: 12px; background: #fff; border: 1px solid var(--line);
  transition: border-color .25s ease, box-shadow .25s ease, transform .3s var(--ease-out);
}
.sx-doc:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sx-doc__num { font: 600 .75rem var(--font-mono); color: var(--accent); }
.sx-doc h3 { font-size: 1.125rem; margin: 0; }
.sx-doc__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.sx-doc__chips li {
  font-size: .8125rem; line-height: 1.3; padding: .25rem .55rem; border-radius: 999px;
  background: var(--surface-soft); border: 1px solid var(--line); color: var(--ink-700);
}
.sx-doc__target {
  margin: auto 0 0; padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
}
.sx-doc__target span { color: var(--accent); }

/* Datenmodell: Text + Schema-Fenster nebeneinander */
.sx-split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.sx-head--flush { margin-bottom: 0; }
.sx-demo--schema .sx-demo__rows li { grid-template-columns: 10.5rem minmax(0, 1fr); }

/* Kontrolle: nummerierte Karten ohne Überschrift */
.sx-route--plain p { color: #dbe7f5; font-size: .9375rem; line-height: 1.6; margin-top: .6rem; }

.sx-check__note {
  margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 10px;
  background: var(--accent-soft); border-left: 4px solid var(--accent);
  font-size: var(--fs-small); color: var(--ink-700); line-height: 1.55;
}
.sx-kpis--stack { margin-top: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .sx-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sx-docs, .sx-kpis--stack { grid-template-columns: minmax(0, 1fr); }
  .sx-demo--schema .sx-demo__rows li { grid-template-columns: 1fr; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-doc:hover { transform: none; }
}

/* ======================================================================
   Startseite (views/pages/home.php) – Präfix hm-.
   Abschnittsköpfe nutzen sx-head/sx-kicker der Übersichtsseite.
   ====================================================================== */
.hm-icon {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 12px;
  display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(145deg, var(--accent-soft), #fff);
  border: 1px solid rgba(11,99,214,.12);
}
.hm-icon svg { width: 1.35rem; height: 1.35rem; }

/* Grundlagen: Bild + Definition, darunter vier Merkmale */
.hm-intro { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.hm-intro__media { margin: 0; }
.hm-intro__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.hm-pillars { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-pillar {
  padding: 1.5rem; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  transition: border-color .25s ease, box-shadow .25s ease, transform .3s var(--ease-out);
}
.hm-pillar:hover { border-color: rgba(11,99,214,.35); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.hm-pillar h3 { font-size: 1.0625rem; margin: 1rem 0 .4rem; }
.hm-pillar p { font-size: var(--fs-small); color: var(--ink-700); line-height: 1.55; margin: 0; }

/* Lösungsfelder: 5 Karten + Überblick-Kachel im 3er-Raster */
.hm-fields { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-field {
  display: flex; flex-direction: column; padding: 1.6rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .3s var(--ease-out);
}
a.hm-field:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-4px); color: var(--ink); }
.hm-field__top { display: flex; justify-content: space-between; align-items: flex-start; }
.hm-field__num { font: 600 .75rem var(--font-mono); color: var(--ink-300); }
.hm-field h3 { font-size: 1.2rem; margin: 1.1rem 0 .5rem; transition: color .2s ease; }
a.hm-field:hover h3 { color: var(--accent); }
.hm-field p { font-size: var(--fs-small); color: var(--ink-700); line-height: 1.6; margin: 0 0 1.25rem; flex: 1; }
.hm-field__cta { font-size: var(--fs-small); font-weight: 700; color: var(--accent); }
.hm-field__cta span { display: inline-block; transition: transform .25s var(--ease-out); }
a.hm-field:hover .hm-field__cta span { transform: translateX(4px); }
.hm-field--cta { background: var(--grad-hero); border-color: transparent; color: #dbe7f5; }
.hm-field--cta .sx-kicker { color: #7fb2f2; margin-bottom: .25rem; }
.hm-field--cta h3 { color: #fff; margin-top: .4rem; }
.hm-field--cta p { color: #b6c8db; }
.hm-field__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; }
.hm-link-light { color: #fff; font-size: var(--fs-small); font-weight: 700; text-decoration: none; }
.hm-link-light:hover { color: #bcd6f5; }

/* Workflow: horizontale Prozesskette */
.hm-rail { --n: 5; list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.25rem; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.hm-rail::before {
  /* Endet genau in der Mitte der letzten Station: Spaltenbreite =
     (100% - (n-1) × Lücke) / n; davon den Knotenradius (28px) abziehen. */
  content: ""; position: absolute; top: 28px; left: 28px;
  right: calc((100% - (var(--n) - 1) * 1.25rem) / var(--n) - 28px); height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(11,99,214,.15));
}
.hm-step { position: relative; }
.hm-step__node {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--grad-panel);
  box-shadow: 0 0 0 6px #fff, var(--shadow-md);
}
.hm-step__node svg { width: 1.45rem; height: 1.45rem; }
.hm-step__num { display: block; margin-top: 1.1rem; font: 600 .75rem var(--font-mono); color: var(--accent); }
.hm-step h3 { font-size: 1.1rem; margin: .3rem 0 .45rem; }
.hm-step p { font-size: var(--fs-small); color: var(--ink-700); line-height: 1.55; margin: 0; }

.hm-callout {
  display: flex; gap: 1.25rem; align-items: flex-start; margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem); border-radius: 16px; background: var(--grad-panel); color: #fff;
  box-shadow: var(--shadow-md);
}
.hm-callout__icon { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.hm-callout__icon svg { width: 1.4rem; height: 1.4rem; }
.hm-callout strong { display: block; font-size: 1.125rem; }
.hm-callout p { margin: .4rem 0 0; color: rgba(255,255,255,.9); max-width: 75ch; line-height: 1.6; }

/* Einstieg: Vergleichskarten */
.hm-compare { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-compare__card { padding: clamp(1.4rem, 3vw, 2rem); border-radius: 16px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--ok); box-shadow: var(--shadow-sm); }
.hm-compare__card--no { border-top-color: var(--ink-300); }
.hm-compare__card h3 { display: flex; align-items: center; gap: .75rem; font-size: 1.1rem; margin-bottom: 1.1rem; }
.hm-mark { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font: 700 1rem/1 var(--font-sans); background: var(--ok-soft); color: var(--ok); }
.hm-compare__card--no .hm-mark { background: var(--surface-deep); color: var(--ink-500); }
.hm-compare__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hm-compare__card li { position: relative; padding-left: 1.6rem; color: var(--ink-700); font-size: .9375rem; line-height: 1.55; }
.hm-compare__card li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--ok); }
.hm-compare__card--no li::before { content: "\2013"; color: var(--ink-300); }

/* Kennzahlen */
.hm-kpis { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-kpi {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem; border-radius: 14px;
  background: var(--surface-soft); border: 1px solid var(--line); transition: border-color .25s ease, background .25s ease;
}
.hm-kpi:hover { border-color: rgba(11,99,214,.35); background: #fff; }
.hm-kpi h3 { font-size: 1rem; margin: .15rem 0 .3rem; }
.hm-kpi p { font-size: var(--fs-small); color: var(--ink-500); line-height: 1.5; margin: 0; }
.hm-kpi .hm-kpi__result { margin-top: .6rem; font-weight: 700; color: var(--ok); }
.hm-quote { margin: 2rem 0 0; padding-left: 1.25rem; border-left: 4px solid var(--accent); font-size: var(--fs-lead); font-style: italic; color: var(--ink-700); }

/* Standort: Foto mit Adress-Plakette */
.hm-place { position: relative; margin: 0; }
.hm-place img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.hm-place__badge {
  position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; color: #fff;
  background: rgba(5,18,41,.72); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hm-place__badge svg { width: 1rem; height: 1rem; color: #7fb2f2; }

/* Passung: Gegenüberstellung */
.hm-match { border-radius: 16px; background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm); }
.hm-match__head, .hm-match__row { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem 1.5rem; }
.hm-match__head { background: var(--ink); color: #fff; font: 600 .75rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hm-match__head span:last-child { grid-column: 3; }
.hm-match ul { list-style: none; margin: 0; padding: 0; }
.hm-match__row { border-top: 1px solid var(--line); transition: background .2s ease; }
.hm-match__row:first-child { border-top: 0; }
.hm-match__row:hover { background: var(--surface-soft); }
.hm-match__yes { position: relative; padding-left: 1.6rem; font-weight: 600; color: var(--ink); }
.hm-match__yes::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.hm-match__arrow { color: var(--accent); text-align: center; font-size: 1.1rem; }
.hm-match__ask { color: var(--ink-700); font-size: .9375rem; }

@media (max-width: 1000px) {
  .hm-intro { grid-template-columns: minmax(0, 1fr); }
  .hm-pillars, .hm-fields, .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* Prozesskette senkrecht: Linie links durch die Stationen */
  .hm-rail { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .hm-rail::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), rgba(11,99,214,.15)); }
  .hm-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1.1rem; }
  .hm-step__node { grid-row: span 3; }
  .hm-step__num { margin-top: .2rem; }
  .hm-compare { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hm-pillars, .hm-fields, .hm-kpis { grid-template-columns: minmax(0, 1fr); }
  .hm-match__head { display: none; }
  .hm-match__row { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .35rem .5rem; padding: 1rem 1.25rem; }
  .hm-match__yes { grid-column: 1 / -1; }
  .hm-match__arrow { text-align: left; }
  .hm-callout { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-pillar:hover, a.hm-field:hover { transform: none; }
}

/* ======================================================================
   KI-Lösungen: Einstiegsseite (ki-loesungen.php) und Angebotsseiten
   (offer.php) – nutzen sx-/hm-Bausteine, hier nur die Ergänzungen.
   ====================================================================== */
.hm-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-pillars--flush { margin-top: 0; }
/* Lösungsseiten (solution-sx.php): zwei große Varianten-Karten nebeneinander */
@media (min-width: 641px) { .sx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1001px) { .sx-cards--3, .sx-cards--5, .sx-cards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-cards .hm-pillar h3 { font-size: 1.25rem; }
.sx-cards .hm-pillar p { font-size: .9375rem; }
.sx-doc p { margin: 0; font-size: var(--fs-small); color: var(--ink-700); line-height: 1.6; }

/* Prozesskette mit Nummer statt Icon im Knoten */
.hm-rail--numbered .hm-step__node { font: 700 .95rem var(--font-mono); }
.hm-rail--numbered .hm-step h3 { margin-top: 1.1rem; }

/* Direktlinks auf die fünf Lösungsfelder der Prozessautomatisierung */
.kl-fields { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: var(--fs-small); }
.kl-fields > span { color: var(--ink-500); margin-right: .25rem; }
.kl-fields a {
  padding: .35rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  color: var(--ink-700); text-decoration: none; font-weight: 600; transition: border-color .2s ease, color .2s ease;
}
.kl-fields a:hover { border-color: var(--accent); color: var(--accent); }

/* Hero-Visual der Angebotsseiten: großes Icon + Schritte als Glaskarte */
.of-visual {
  justify-self: end; width: min(100%, 420px); padding: 1.75rem; border-radius: 18px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.of-visual__icon {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 18px;
  background: var(--grad-panel); color: #fff; box-shadow: 0 12px 30px rgba(11,99,214,.35);
}
.of-visual__icon svg { width: 2.2rem; height: 2.2rem; }
.of-visual__steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.of-visual__steps li {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #dbe7f5; font-size: var(--fs-small); font-weight: 600;
}
.of-visual__steps li span { font: 600 .75rem var(--font-mono); color: #7fb2f2; }

@media (max-width: 1000px) {
  .of-visual { justify-self: stretch; width: 100%; }
}
@media (max-width: 640px) {
  .hm-fields--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Kontaktseite (views/pages/kontakt.php) – Präfix kf-.
   Interaktion aus assets/js/contact.js; ohne JS normales Formular.
   ====================================================================== */
.kf-form[hidden], .kf-success[hidden], .kf-alert[hidden], .kf-success__ref[hidden], .kf-success__confirm[hidden] { display: none; }

.kf-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }

.kf-card {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.kf-progress { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--surface-deep); }
.kf-progress span {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out), background .3s ease;
}
.kf-card.is-complete .kf-progress span, .kf-card.is-sent .kf-progress span { background: var(--ok); }
.kf-card.is-sent .kf-progress span { transform: scaleX(1) !important; }
.kf-card:not(.is-enhanced) .kf-progress { display: none; }

.kf-head { margin-bottom: 1.75rem; }
.kf-head h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-bottom: .3rem; }
.kf-head p { color: var(--ink-500); font-size: var(--fs-small); margin: 0; }

.kf-alert {
  display: grid; gap: .25rem; margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-radius: 10px;
  background: var(--err-soft); border-left: 4px solid var(--err); color: var(--ink-700); font-size: var(--fs-small);
}
.kf-alert strong { color: var(--err); }

.kf-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kf-field--email { grid-column: 1 / -1; }

/* Schwebende Labels über :placeholder-shown (placeholder=" ") */
.kf-field { position: relative; }
.kf-field input {
  width: 100%; height: 3.6rem; padding: 1.35rem 2.75rem .45rem 1rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface-soft); border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.kf-field input:hover { border-color: var(--line-strong); }
.kf-field input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(11,99,214,.14); }
.kf-field label {
  position: absolute; left: 1rem; top: 1.15rem; pointer-events: none; transform-origin: left top;
  color: var(--ink-500); font-size: 1rem; transition: transform .2s var(--ease-out), color .2s ease;
}
.kf-field input:focus + label,
.kf-field input:not(:placeholder-shown) + label { transform: translateY(-.62rem) scale(.78); color: var(--accent); font-weight: 600; }
.kf-field input:not(:focus):not(:placeholder-shown) + label { color: var(--ink-500); }

.kf-field__state {
  position: absolute; right: .95rem; top: 1.8rem; transform: translateY(-50%) scale(.4); opacity: 0;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 .75rem/1 var(--font-sans); color: #fff; transition: opacity .2s ease, transform .3s var(--ease-spring);
}
.kf-field.is-valid .kf-field__state { opacity: 1; transform: translateY(-50%) scale(1); background: var(--ok); }
.kf-field.is-valid .kf-field__state::before { content: "\2713"; }
.kf-field.is-invalid .kf-field__state { opacity: 1; transform: translateY(-50%) scale(1); background: var(--err); }
.kf-field.is-invalid .kf-field__state::before { content: "!"; }
.kf-field.is-invalid input { border-color: var(--err); background: #fff; }
.kf-field.is-invalid input:focus { box-shadow: 0 0 0 4px rgba(179,45,36,.12); }
.kf-field.is-invalid input + label { color: var(--err); }

.kf-field__error { display: block; min-height: 1.25rem; margin-top: .35rem; font-size: .8125rem; font-weight: 600; color: var(--err); }
.kf-field__error:empty { min-height: 0; margin-top: 0; }

.kf-consent { margin: 1.5rem 0 1.25rem; }
.kf-consent__label {
  position: relative; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .8rem; align-items: start; cursor: pointer;
  padding: .9rem 1rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-soft);
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-700); transition: border-color .2s ease, background .2s ease;
}
.kf-consent__label:hover { border-color: var(--line-strong); }
.kf-consent__label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kf-consent__box {
  width: 1.3rem; height: 1.3rem; margin-top: .1rem; border-radius: 5px; border: 2px solid var(--line-strong); background: #fff;
  display: grid; place-items: center; transition: background .2s ease, border-color .2s ease, transform .25s var(--ease-spring);
}
.kf-consent__box::after { content: ""; width: .35rem; height: .65rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); margin-top: -.15rem; transition: transform .25s var(--ease-spring); }
.kf-consent__label input:checked + .kf-consent__box { background: var(--accent); border-color: var(--accent); transform: scale(1.05); }
.kf-consent__label input:checked + .kf-consent__box::after { transform: rotate(45deg) scale(1); }
.kf-consent__label input:focus-visible + .kf-consent__box { outline: 3px solid var(--accent); outline-offset: 2px; }
.kf-consent.is-valid .kf-consent__label { border-color: rgba(20,120,74,.45); background: var(--ok-soft); }
.kf-consent.is-invalid .kf-consent__label { border-color: var(--err); background: #fff; }

.kf-submit { position: relative; width: 100%; justify-content: center; min-height: 3.35rem; font-size: 1rem; }
.kf-submit__spinner {
  display: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: kf-spin .7s linear infinite;
}
.kf-form.is-busy .kf-submit { cursor: progress; opacity: .9; }
.kf-form.is-busy .kf-submit__label { opacity: .75; }
.kf-form.is-busy .kf-submit__spinner { display: inline-block; margin-left: .7rem; }
@keyframes kf-spin { to { transform: rotate(360deg); } }

.kf-form.is-shake { animation: kf-shake .4s var(--ease-out); }
@keyframes kf-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Erfolgszustand */
.kf-success { text-align: center; padding: clamp(1rem, 3vw, 2rem) 0; outline: none; }
.kf-success__icon { width: 5rem; height: 5rem; margin: 0 auto 1.25rem; display: block; }
.kf-success__icon circle { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: kf-draw .7s var(--ease-out) forwards; }
.kf-success__icon path { fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: kf-draw .45s .45s var(--ease-out) forwards; }
@keyframes kf-draw { to { stroke-dashoffset: 0; } }
.kf-success h2 { margin-bottom: .6rem; }
.kf-success p { color: var(--ink-700); max-width: 44ch; margin-inline: auto; }
.kf-success__ref {
  display: inline-block; margin-top: .5rem !important; padding: .45rem .9rem; border-radius: 999px;
  background: var(--surface-soft); border: 1px solid var(--line); font-size: var(--fs-small);
}
.kf-success__ref strong { font-family: var(--font-mono); color: var(--ink); }
.kf-success__confirm { font-size: var(--fs-small); }
.kf-success__confirm strong { color: var(--ink); overflow-wrap: anywhere; }

/* Seitenleiste */
.kf-aside {
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 16px; color: #dbe7f5;
  background: var(--grad-hero); box-shadow: var(--shadow-md);
}
.kf-aside h2 { color: #fff; font-size: 1.35rem; margin-bottom: 1.25rem; }
.kf-aside h3 { color: #fff; font-size: 1rem; margin: 2rem 0 1rem; }
.kf-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kf-channels li {
  display: flex; gap: .9rem; align-items: center; padding: .8rem .9rem; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  transition: background .2s ease, border-color .2s ease;
}
.kf-channels li:hover { background: rgba(255,255,255,.09); border-color: rgba(127,178,242,.4); }
.kf-channels__icon {
  flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 9px; display: grid; place-items: center;
  background: rgba(127,178,242,.16); color: #9dc4f5;
}
.kf-channels__icon svg { width: 1.15rem; height: 1.15rem; }
.kf-channels small { display: block; font: 600 .6875rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #7b93ab; }
.kf-channels a { color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; }
.kf-channels a:hover { text-decoration: underline; }

.kf-next { list-style: none; counter-reset: kfn; margin: 0; padding: 0; display: grid; gap: .9rem; }
.kf-next li { counter-increment: kfn; position: relative; padding-left: 2.6rem; font-size: var(--fs-small); line-height: 1.5; }
.kf-next li::before {
  content: counter(kfn); position: absolute; left: 0; top: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  font: 600 .75rem var(--font-mono); background: rgba(127,178,242,.18); color: #bcd6f5;
}
.kf-next strong { display: block; color: #fff; }
.kf-next span { color: #b6c8db; }

@media (max-width: 900px) {
  .kf-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kf-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .kf-form.is-shake { animation: none; }
  .kf-success__icon circle, .kf-success__icon path { animation: none; stroke-dashoffset: 0; }
}

/* ======================================================================
   Hero-Animation "Dokumente & Daten" (partials/flow-docs.php) – Präfix dd-.
   Stufen s1–s4 setzt assets/js/docs-flow.js.
   ====================================================================== */
.dd-flow {
    --dd-blue: #3b8cff5c;
    --dd-ok: #4be0a8;
    --dd-warn: #ffbf5a;
    --dd-miss: #ff7d8b;
    --dd-line: rgba(255, 255, 255, .14);
    --dd-muted: rgba(226, 235, 255, .62);
    margin: 0;
    position: relative;
    container-type: inline-size;
    box-sizing: border-box;
    /* Fließend bis 700px; feste 700 × 540 erst ab 1540px (siehe unten). Die
       Höhe ergibt sich hier aus dem Inhalt – bei schmaler Breite stapelt die
       Figur Beleg und Daten untereinander und wird deutlich höher. */
    width: 100%;
    max-width: 700px;
    height: auto;
    padding: 16px;
    color: #eaf1ff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(160deg, #145c6a 0%, #7fb2f2 55%, #071433 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
    overflow: hidden;
}
.dd-flow *,.dd-flow *::before,.dd-flow *::after{box-sizing:border-box}
.dd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Fade beim Neustart der Schleife */
.dd-body{transition:opacity .45s ease}
.dd-flow.dd-fade .dd-body{opacity:0}
.dd-flow.dd-reset *,.dd-flow.dd-reset *::before,.dd-flow.dd-reset *::after{transition:none!important;animation:none!important}

/* Statuszeile */
.dd-status{display:flex;align-items:center;gap:10px;min-height:22px;font-size:13px;color:#fff}
.dd-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--dd-blue);box-shadow:0 0 0 0 rgba(59,140,255,.6);animation:dd-pulse 1.6s ease-out infinite;transition:background .3s}
.dd-flow.s4 .dd-dot{background:var(--dd-ok);animation:none}
.dd-status-text{animation:dd-in .4s ease both}
@keyframes dd-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes dd-pulse{70%{box-shadow:0 0 0 8px rgba(59,140,255,0)}100%{box-shadow:0 0 0 0 rgba(59,140,255,0)}}

/* Hauptbereich */
.dd-main{display:grid;grid-template-columns:.92fr 1.08fr;gap:14px;margin:12px 0 14px;align-items:stretch}

/* Beleg (leicht schief gescannt) */
.dd-paper{
  position:relative;aspect-ratio:5/6.2;
  font-size:clamp(6px,1.45cqi,9px);
  background:#f3f6fb;color:#26375c;border-radius:5px;
  transform:rotate(-1.6deg);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  overflow:hidden;
}
.dd-paper .abs{position:absolute}
.dd-paper b{font-weight:700}
.dd-bar{display:block;height:.55em;border-radius:99px;background:#cfd8e8;margin-top:.55em}
.dd-p-sup{top:6.5%;left:7%;width:40%}
.dd-p-meta{top:6.5%;right:7%;width:34%;text-align:right;line-height:1.6}
.dd-p-meta .t{letter-spacing:.12em;font-weight:700;color:#0b3a8a}
.dd-p-po{top:24.2%;left:7%;color:#7a879f}
.dd-p-blank{display:inline-block;width:8em;border-bottom:1px solid #b9c4d8}
.dd-p-tbl{top:36.5%;left:6%;width:88%}
.dd-p-tbl .hd{height:1.9em;background:#dfe7f4;border-radius:2px;margin-bottom:.5em}
.dd-p-tbl .r{display:flex;justify-content:space-between;padding:.45em .5em;border-bottom:1px solid #dbe3f0}
.dd-p-tbl .r span:first-child{flex:1}
.dd-p-tbl .r span:nth-child(2){width:22%;text-align:right;color:#7a879f}
.dd-p-tbl .r span:last-child{width:22%;text-align:right}
.dd-p-sum{top:76.5%;right:7%;text-align:right}

/* Erkannte Bereiche */
.dd-box{
  position:absolute;border:1.5px solid var(--dd-blue);background:rgba(59,140,255,.13);
  border-radius:3px;opacity:0;transform:scale(.97);
  transition:opacity .35s ease,transform .35s ease,border-color .4s,background .4s;
  transition-delay:calc(var(--d,0)*1s);
}
.dd-flow.s1 .dd-box:not(.dd-late){opacity:1;transform:none}
.dd-flow.s3 .dd-box{transition-delay:.15s}
.dd-flow.s3 .dd-box[data-k="ok"]{border-color:var(--dd-ok);background:rgba(75,224,168,.16)}
.dd-flow.s3 .dd-box[data-k="warn"]{border-color:var(--dd-warn);background:rgba(255,191,90,.2)}
.dd-flow.s3 .dd-late{opacity:1;transform:none;border-color:var(--dd-miss);border-style:dashed;background:rgba(255,125,139,.14)}

/* Scanlinie */
.dd-scan{position:absolute;left:0;right:0;top:0;height:2px;background:#5aaeff;box-shadow:0 0 14px 4px rgba(90,174,255,.65);opacity:0;pointer-events:none}
.dd-scan::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:46px;background:linear-gradient(to top,rgba(90,174,255,.22),transparent)}
.dd-flow.s1 .dd-scan{animation:dd-scan 1.9s ease-in-out forwards}
@keyframes dd-scan{0%{top:0;opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* Dokumenttyp-Marke */
.dd-tag{
  position:absolute;left:7%;bottom:4.5%;
  padding:.5em 1em;border-radius:99px;background:#0b3a8a;color:#fff;font-weight:700;font-size:1.15em;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease 1.7s,transform .4s ease 1.7s;
}
.dd-flow.s1 .dd-tag{opacity:1;transform:none}

/* Strukturierte Daten */
.dd-data {
    background: rgb(12 48 137 / 58%);
    border: 1px solid var(--dd-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    min-width: 0;
}
.dd-row{display:grid;grid-template-columns:6.4em 1fr auto;align-items:center;gap:8px;height:30px;border-bottom:1px solid rgba(255,255,255,.07)}
.dd-k{color:var(--dd-muted);white-space:nowrap}
.dd-v{position:relative;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-v b{font-weight:600;opacity:0;transition:opacity .4s ease;display:block;overflow:hidden;text-overflow:ellipsis}
.dd-v::after{content:"";position:absolute;left:0;top:50%;height:8px;width:70%;margin-top:-4px;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.2),rgba(255,255,255,.08));background-size:200% 100%;animation:dd-shimmer 1.6s linear infinite;transition:opacity .3s}
@keyframes dd-shimmer{to{background-position:-200% 0}}
.dd-flow.s2 .dd-v::after{opacity:0;animation:none}
.dd-flow.s2 .dd-v b{opacity:1;transition-delay:calc(var(--i)*.18s + .1s)}
.dd-v.na b{font-weight:400;color:var(--dd-muted)}

.dd-chip{
  display:inline-flex;align-items:center;gap:.4em;font-size:11px;padding:.18em .65em;border-radius:99px;
  opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .35s ease;transition-delay:calc(var(--i)*.16s);white-space:nowrap
}
.dd-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dd-flow.s3 .dd-chip{opacity:1;transform:none}
.dd-row[data-k="ok"] .dd-chip{color:var(--dd-ok);background:rgba(75,224,168,.14)}
.dd-row[data-k="warn"] .dd-chip{color:var(--dd-warn);background:rgba(255,191,90,.15)}
.dd-row[data-k="miss"] .dd-chip{color:var(--dd-miss);background:rgba(255,125,139,.15)}

.dd-tbl{margin-top:9px}
.dd-tbl-h{display:flex;justify-content:space-between;color:var(--dd-muted);font-size:11px;margin-bottom:2px}
.dd-tr{display:grid;grid-template-columns:1fr 3.6em 4.6em;gap:8px;height:22px;align-items:center;opacity:0;transform:translateX(8px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i)*.2s + 1s)}
.dd-tr span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-tr span:not(:first-child){text-align:right;color:var(--dd-muted)}
.dd-tr span:last-child{color:#eaf1ff}
.dd-flow.s2 .dd-tr{opacity:1;transform:none}
.dd-sum{margin-top:4px;text-align:right;font-size:11px;color:var(--dd-warn);opacity:0;transition:opacity .4s ease .5s}
.dd-flow.s3 .dd-sum{opacity:1}

/* Schritte */
.dd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px;padding:0;list-style:none}
.dd-step{font-size:12px;color:var(--dd-muted);transition:color .3s}
.dd-track{display:block;height:3px;border-radius:99px;background:var(--dd-line);overflow:hidden;margin-bottom:7px}
.dd-fill{display:block;height:100%;width:0;background:var(--dd-blue);border-radius:99px}
.dd-step.is-active{color:#fff}
.dd-step.is-active .dd-fill{animation:dd-fill var(--dur,3s) linear forwards}
.dd-step.is-done{color:#cfe0ff}
.dd-step.is-done .dd-fill{width:100%;background:#2b6fd0}
.dd-step em{font-style:normal;opacity:.6;margin-right:.4em}
@keyframes dd-fill{to{width:100%}}

/* Übergabe */
.dd-out{position:relative}
.dd-rail{position:relative;height:2px;background:var(--dd-line);border-radius:99px;margin:0 0 12px;overflow:hidden}
.dd-rail::after{content:"";position:absolute;top:0;left:0;height:100%;width:38%;background:linear-gradient(90deg,transparent,var(--dd-blue),transparent);transform:translateX(-100%);opacity:0}
.dd-flow.s4 .dd-rail::after{animation:dd-rail 1.7s ease-in-out forwards}
@keyframes dd-rail{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(280%);opacity:1}}
.dd-targets{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.dd-targets li{
  position:relative;flex:1;min-width:0;text-align:center;font-size:12px;font-weight:600;
  padding:.55em .3em;border-radius:8px;border:1px solid var(--dd-line);color:var(--dd-muted);
  transition:color .35s,border-color .35s,background .35s;transition-delay:0s;
}
.dd-flow.s4 .dd-targets li{color:#fff;border-color:var(--dd-blue);background:rgba(59,140,255,.2);transition-delay:calc(var(--i)*.28s + .3s)}
.dd-flow.s4 .dd-targets li.dd-review{border-color:var(--dd-warn);background:rgba(255,191,90,.16)}
.dd-badge{
  position:absolute;top:-7px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--dd-warn);color:#2b1c00;font-size:10.5px;font-weight:700;line-height:17px;
  transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.6,1) 1.7s
}
.dd-flow.s4 .dd-badge{transform:scale(1)}

/* Feste Größe nur, wo sie auf den Bildschirm passt: Die rechte Hero-Spalte
   ist schmaler als 700px, die Figur ragt also in den Seitenrand. Unter
   ~1540px Fensterbreite liefe sie über den Bildschirmrand hinaus und würde
   vom Hero (overflow: hidden) abgeschnitten. */
@media (min-width: 1540px) {
  .dd-flow { width: 700px; height: 540px; }
}

/* Schmale Container */
@container (max-width:440px){
  .dd-main{grid-template-columns:1fr}
  .dd-paper{aspect-ratio:auto;height:190px;font-size:7px}
  .dd-steps{gap:4px}
  .dd-step{font-size:11px}
  .dd-targets{flex-wrap:wrap}
  .dd-targets li{flex:1 1 30%}
}

/* Weniger Bewegung: Endzustand statisch */
@media (prefers-reduced-motion:reduce){
  .dd-flow *,.dd-flow *::before,.dd-flow *::after{transition:none!important;animation:none!important}
  .dd-scan{display:none}
  .dd-fill{width:100%}
}

/* --- Vorgehen: Skizzen-Animation "Automatisierung in sieben Schritten" ---
   Stepper und Steuerung stehen auf dem dunklen Hero, die Szene liegt auf
   einem hellen Skizzenblatt. Die Szenen (.vg-svg) werden zusätzlich in der
   Phasenliste unter dem Hero wiederverwendet. */
.vg, .phase__scene {
  --vg-paper: #fbfcfd;
  --vg-ink: var(--ink);
  --vg-muted: var(--ink-500);
  --vg-line: var(--line-strong);
  --vg-accent: var(--accent);
  --vg-accent-soft: var(--accent-soft);
  --vg-warn: var(--err);
  --vg-warn-soft: var(--err-soft);
  --vg-note: #f3e08a;
  --vg-note-ink: #3a3418;
  --vg-hand: "KZN Hand", "Segoe Print", "Bradley Hand", cursive;
}
.vg { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Szene je Phase in der Liste: unter dem Text, ab 1000px rechts daneben */
.phase__scene {
  margin: 0; max-width: 30rem;
  background: var(--vg-paper); border: 1.5px solid var(--line); border-radius: 5px 9px 6px 10px;
  padding: .75rem;
}
.phase__scene .vg-svg { display: block; width: 100%; height: auto; }
/* Vorgehen: Rollen-Karten dreispaltig, Torkarten mit hervorgehobener Entscheidung */
@media (min-width: 1001px) { .hm-pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vg-gate__label { display: block; color: #fff; font-weight: 600; margin-bottom: .15rem; }

/* Platz halten, bis die Szene beim Hineinscrollen startet */
.phase__scene .scene { display: block; }
.phase__scene .scene:not(.on) { visibility: hidden; }
@media (min-width: 800px) { .phase--scene .phase__scene { grid-column: 2; } }
@media (min-width: 1000px) {
  .phase--scene { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 26rem); align-items: start; }
  .phase--scene .phase__scene { grid-column: 3; }
}

/* Stepper */
.vg-stepper { position: relative; }
.vg-track { position: absolute; top: 15px; left: calc(100% / 14); width: calc(100% - 100% / 7); height: 8px; display: block; overflow: visible; }
.vg-track path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke: rgba(255,255,255,.28); stroke-width: 2.5px; }
.vg-track--fill path { stroke: var(--accent-2); stroke-width: 4px; }
.vg-track--fill { clip-path: inset(0 100% 0 0); }
.vg-stepper ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.vg-stepper li { display: flex; justify-content: center; min-width: 0; margin: 0; }
.vg-node { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.vg-dot {
  width: 38px; height: 38px; display: grid; place-items: center;
  font-family: var(--vg-hand); font-weight: 700; font-size: 24px; line-height: 1; color: #a7bdd3;
  background: var(--ink-950); border: 2px solid #a7bdd3;
  border-radius: 54% 46% 52% 48% / 48% 55% 45% 52%;
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.vg-stepper li:nth-child(2n) .vg-dot { border-radius: 46% 54% 48% 52% / 55% 45% 55% 45%; transform: rotate(5deg); }
.vg-stepper li:nth-child(3n) .vg-dot { border-radius: 50% 50% 44% 56% / 52% 46% 54% 48%; transform: rotate(-6deg); }
.vg-lbl { font-family: var(--vg-hand); font-weight: 500; font-size: 21px; line-height: 1.05; color: #a7bdd3; transition: color .3s; }
.vg-node.is-done .vg-dot { border-color: var(--accent-2); color: var(--accent-2); }
.vg-node.is-on .vg-dot { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink-950); transform: scale(1.15) rotate(-3deg); }
.vg-node.is-on .vg-lbl { color: #fff; font-weight: 700; }
.vg-node:hover .vg-dot { border-color: #fff; }
.vg-node:focus-visible .vg-dot { outline: 3px solid #fff; outline-offset: 3px; }

/* Skizzenblatt */
.vg-panel {
  position: relative; color: var(--vg-ink);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: center;
  background: var(--vg-paper); padding: 30px 28px 28px;
  border: 1.5px solid var(--vg-line); border-radius: 5px 9px 6px 10px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
  transform: rotate(-.25deg);
}
.vg-panel::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 120px; height: 28px;
  background: rgba(147, 195, 62, .45); transform: translateX(-50%) rotate(-2.5deg);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 100% 0, 96% 50%, 100% 92%, 94% 100%, 0 90%, 3% 45%);
}
.vg-stage { min-width: 0; }
.vg-stage svg { display: block; width: 100%; height: auto; max-width: 100%; }
.vg-copy { min-width: 0; display: grid; gap: 14px; align-content: start; animation: vg-rise .5s both; }
.vg-copy[hidden] { display: none; }
.vg-kicker { font-family: var(--vg-hand); font-weight: 700; font-size: 26px; line-height: 1; color: var(--vg-accent); transform: rotate(-1.5deg); transform-origin: left; }
.vg-copy h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin: 0; color: var(--vg-ink); text-wrap: balance; }
.vg-copy p { margin: 0; max-width: 50ch; color: var(--ink-700); }
.vg-result {
  background: var(--vg-note); color: var(--vg-note-ink); max-width: 46ch; margin-top: 6px;
  padding: 12px 18px 16px; transform: rotate(-1.2deg);
  border-radius: 2px 3px 16px 3px / 3px 2px 12px 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 14px -10px rgba(0, 0, 0, .55);
  display: grid;
}
.vg-result b { font-family: var(--vg-hand); font-weight: 700; font-size: 26px; line-height: 1.1; }
.vg-result span { font-size: .95rem; line-height: 1.45; }

/* Steuerung (auf dem dunklen Hero) */
.vg-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vg-controls[hidden] { display: none; }
.vg-btn {
  all: unset; cursor: pointer; padding: 5px 20px 8px; min-height: 42px; box-sizing: border-box; display: grid; place-items: center;
  font-family: var(--vg-hand); font-weight: 700; font-size: 24px; line-height: 1;
  color: #fff; border: 2px solid rgba(255,255,255,.7);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transition: transform .15s, background .2s;
}
.vg-btn:hover { transform: rotate(-1.5deg); background: rgba(255,255,255,.1); }
.vg-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vg-btn--main { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink-950); min-width: 118px; }
.vg-btn--main:hover { background: var(--accent-2); }
.vg-timer { flex: 1; min-width: 110px; height: 8px; border-radius: 6px 3px 7px 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.vg-timer i { display: block; height: 100%; width: 0; background: var(--accent-2); }
.vg-count { font-family: var(--vg-hand); font-weight: 500; font-size: 24px; line-height: 1; color: #a7bdd3; }

/* SVG-Bausteine */
.vg-svg .scene { display: none; }
.vg-svg .scene.on { display: block; animation: vg-fadein .35s both; }
.vg-svg text { font-family: var(--vg-hand); }
.vg-svg .h  { fill: var(--vg-ink); font-size: 20px; font-weight: 500; }
.vg-svg .hx { fill: var(--vg-ink); font-size: 16.5px; font-weight: 500; }
.vg-svg .hs { fill: var(--vg-muted); font-size: 18px; font-weight: 500; }
.vg-svg .ha { fill: var(--vg-accent); font-size: 21px; font-weight: 700; }
.vg-svg .hw { fill: var(--vg-warn); font-size: 19px; font-weight: 700; }
.vg-svg .tn { fill: var(--vg-note-ink); font-size: 18px; font-weight: 500; }
.vg-svg .box { fill: var(--vg-paper); stroke: var(--vg-ink); stroke-width: 2; stroke-linejoin: round; }
.vg-svg .acc { fill: var(--vg-accent-soft); stroke: var(--vg-accent); stroke-width: 2.2; stroke-linejoin: round; }
.vg-svg .wrn { fill: var(--vg-warn-soft); stroke: var(--vg-warn); stroke-width: 2.2; stroke-linejoin: round; }
.vg-svg .nt { fill: var(--vg-note); }
.vg-svg .ink { fill: none; stroke: var(--vg-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vg-svg .pen { fill: none; stroke: var(--vg-accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vg-svg .red { fill: none; stroke: var(--vg-warn); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.vg-svg .pencil { fill: none; stroke: var(--vg-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vg-svg .dash { stroke-dasharray: 6 6; }
.vg-svg .fa { fill: var(--vg-accent); }

.vg-svg .a, .vg-svg .dr, .vg-svg .fl, .vg-svg .tv, .vg-svg .kn { transform-box: fill-box; }
.vg-svg .a { transform-origin: 50% 50%; }
.vg-svg .fl { transform-origin: 50% 100%; }
.vg-svg .dr { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vg-svg .scene.on .a { animation: vg-pop .55s var(--d, 0s) both cubic-bezier(.2, .8, .2, 1); }
.vg-svg .scene.on .dr { animation: vg-draw .9s var(--d, 0s) both ease-out; }
.vg-svg .scene.on .fl { animation: vg-grow .7s var(--d, 0s) both cubic-bezier(.2, .8, .2, 1); }
.vg-svg .scene.on .tv { animation: vg-travel 1.9s var(--d, 0s) both ease-in-out; }
.vg-svg .scene.on .kn { animation: vg-slide 1.4s var(--d, 0s) both ease-in-out; }
.vg-svg .scene.on .flash { animation: vg-flash 2.2s var(--d, 0s) both; }
.vg-svg .scene.on .dim { animation: vg-dim .6s var(--d, 0s) both; }
/* Ruhezustand ist das fertige Bild; die Keyframes beschreiben nur den Weg dorthin */
.vg-svg .flash { opacity: 0; }
.vg-svg .dim { opacity: .5; }
@keyframes vg-fadein { from { opacity: 0; } }
@keyframes vg-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes vg-pop { from { opacity: 0; transform: scale(.88) translateY(6px); } }
@keyframes vg-draw { from { stroke-dashoffset: 1; } }
@keyframes vg-grow { from { transform: scaleY(0); } }
@keyframes vg-slide { from { transform: translateX(108px); } }
@keyframes vg-travel { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 72% { opacity: 1; transform: translateX(128px); } 100% { opacity: 0; transform: translateX(150px); } }
@keyframes vg-flash { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vg-dim { from { opacity: 1; } }

@media (max-width: 760px) {
  .vg-panel { grid-template-columns: minmax(0, 1fr); padding: 26px 16px 20px; gap: 22px; transform: none; }
  .vg-lbl { display: none; }
  .vg-dot { width: 34px; height: 34px; font-size: 21px; }
  .vg-track { top: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-svg .scene.on, .vg-copy { animation: none !important; }
  .vg-svg .scene.on .a, .vg-svg .scene.on .dr, .vg-svg .scene.on .fl, .vg-svg .scene.on .tv, .vg-svg .scene.on .kn,
  .vg-svg .scene.on .flash, .vg-svg .scene.on .dim { animation: none !important; }
  .vg-svg .tv { opacity: 1; }
  .vg-dot, .vg-lbl, .vg-btn { transition: none; }
}

/* --- Über uns: Team-Animation im Hero + Profilkarten -------------------
   Die drei Karten werden reihum hervorgehoben (6s-Zyklus, je 2s); die
   Schwerpunkt-Zeile darunter wechselt synchron. Reines CSS, die Punkte auf
   den Verbindungslinien sind SMIL (bei reduzierter Bewegung entfernt). */
.tm { --tm-cycle: 6s; position: relative; }
.tm__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1rem); align-items: end; }
.tm__card {
  margin: 0; display: grid; gap: .15rem; text-align: center;
  padding: .5rem .5rem .85rem; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  opacity: .72; transform-origin: 50% 100%;
  animation: tm-focus var(--tm-cycle) ease-in-out infinite both;
}
.tm__card--2 { animation-delay: calc(var(--tm-cycle) / -1.5); margin-bottom: 1.5rem; }
.tm__card--3 { animation-delay: calc(var(--tm-cycle) / -3); }
.tm__card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: calc(var(--radius-lg) - 4px); margin-bottom: .55rem; }
.tm__name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(.85rem, 1.6vw, 1.05rem); line-height: 1.2; }
.tm__role { font-size: clamp(.68rem, 1.2vw, .8rem); color: #a7bdd3; line-height: 1.3; }
@keyframes tm-focus {
  0%, 30% { opacity: 1; transform: translateY(-6px) scale(1.04); border-color: var(--accent-2); box-shadow: 0 18px 36px -18px rgba(147,195,62,.55); }
  38%, 100% { opacity: .72; transform: none; border-color: rgba(255,255,255,.18); box-shadow: none; }
}

.tm__links { display: block; width: 100%; height: auto; overflow: visible; margin-top: .4rem; }
.tm__links path { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.tm__links circle { fill: var(--accent-2); }

.tm__claim {
  display: grid; gap: .35rem; justify-items: center; text-align: center;
  margin-inline: auto; max-width: 30rem; padding: .9rem 1.25rem;
  border-radius: var(--radius-lg); border: 1px solid rgba(147,195,62,.45);
  background: rgba(147,195,62,.1);
}
.tm__claim strong { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.2rem); color: #fff; line-height: 1.25; }
.tm__focus { display: grid; min-height: 1.4em; }
.tm__focus-item {
  grid-area: 1 / 1; font-size: var(--fs-small); color: #c8d8e8;
  opacity: 0; animation: tm-show var(--tm-cycle) ease-in-out infinite both;
}
.tm__focus-item--2 { animation-delay: calc(var(--tm-cycle) / -1.5); }
.tm__focus-item--3 { animation-delay: calc(var(--tm-cycle) / -3); }
@keyframes tm-show { 0%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }

/* Profilkarten */
.tm-profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-profile {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .25s ease, box-shadow .25s ease, transform .3s var(--ease-out);
}
.tm-profile:hover { border-color: rgba(11,99,214,.35); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tm-profile__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 18%; }
.tm-profile__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tm-profile__role { font: 600 .75rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.tm-profile h3 { margin: 0; font-size: 1.35rem; }
.tm-profile p { margin: 0; font-size: var(--fs-small); color: var(--ink-700); line-height: 1.6; }
.tm-profile__tags { list-style: none; margin: auto 0 0; padding: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tm-profile__tags li { margin: 0; font-size: .75rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); }

/* Haltung: vier Karten im 2er-Raster */
.tm-stances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-stances .sx-route h3 { color: #fff; }

@media (max-width: 1000px) {
  .tm-profiles { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .tm-profile { flex-direction: row; }
  .tm-profile__img { width: 38%; aspect-ratio: auto; }
}
@media (max-width: 640px) {
  .tm-profile { flex-direction: column; }
  .tm-profile__img { width: 100%; aspect-ratio: 4 / 3.6; }
  .tm-stances { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tm__card { animation: none; opacity: 1; }
  .tm__focus-item { animation: none; opacity: 0; }
  .tm__focus-item--1 { opacity: 1; }
  .tm__links circle { display: none; }
  .tm-profile:hover { transform: none; }
}

/* --- KI-Prozessautomatisierung: Hero-Slider der fünf Lösungsfelder ------
   Tabs/Autoplay aus solutions.js ([data-sx-tabs]); Fortschrittsbalken im
   aktiven Tab läuft über --sx-dur, solange .is-running gesetzt ist. */
.sx-hs {
  position: relative; display: grid; gap: 1.25rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(341deg, rgb(255 255 255 / 32%), #7fb2f24d);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-md);
  backdrop-filter: blur(6px);
}
.sx-hs__tabs { display: none; }
.sx-hs.is-enhanced .sx-hs__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.sx-hs__tab {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: .35rem; text-align: center;
  padding: .6rem .3rem .75rem; border-radius: 10px;
  color: #a7bdd3; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.sx-hs__tab:hover { color: #fff; border-color: rgba(255,255,255,.28); }
.sx-hs__tab:focus-visible { outline: 3px solid #7fb2f2; outline-offset: 2px; }
.sx-hs__tab.is-active { color: #fff; background: rgba(11,99,214,.28); border-color: rgba(127,178,242,.6); }
.sx-hs__icon svg { display: block; width: 22px; height: 22px; }
.sx-hs__label { font-size: .72rem; font-weight: 600; line-height: 1.2; }
.sx-hs__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.sx-hs__bar::after { content: ""; position: absolute; inset: 0; background: var(--accent-2); transform: scaleX(0); transform-origin: left; }
.sx-hs__tab.is-active .sx-hs__bar::after { transform: scaleX(1); }
.sx-hs.is-running .sx-hs__tab.is-active .sx-hs__bar::after { animation: sx-fill var(--sx-dur, 6s) linear forwards; }

.sx-hs__panel[hidden] { display: none; }
.sx-hs:not(.is-enhanced) .sx-hs__panel ~ .sx-hs__panel { display: none; }
.sx-hs__panel { display: grid; gap: .55rem; min-height: 21rem; align-content: start; }
.sx-hs__panel:focus-visible { outline: 3px solid #7fb2f2; outline-offset: 4px; border-radius: 8px; }
.sx-hs__kicker { font: 600 .6875rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #7fb2f2; }
.sx-hs__title { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0; }
.sx-hs__claim { color: #c8d8e8; font-size: var(--fs-small); margin: 0 0 .4rem; }

.sx-hs__flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; position: relative; }
.sx-hs__flow::before { content: ""; position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 2px; background: linear-gradient(180deg, rgba(127,178,242,.6), rgba(147,195,62,.6)); }
.sx-hs__flow li {
  position: relative; margin: 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; align-items: center;
  padding: .6rem .85rem .6rem 2.1rem; border-radius: 8px;
  background: rgba(5,18,41,.45); border: 1px solid rgba(255,255,255,.08); font-size: var(--fs-small);
}
.sx-hs__flow li::before { content: ""; position: absolute; left: calc(1rem - 4px); top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #7fb2f2; box-shadow: 0 0 0 3px rgba(5,18,41,.9); }
.sx-hs__k { font: 600 .6875rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #7fb2f2; }
.sx-hs__v { color: #fff; overflow-wrap: anywhere; }
.sx-hs__result--ok { border-color: rgba(147,195,62,.5); background: rgba(147,195,62,.12); }
.sx-hs__result--ok::before { background: var(--accent-2); }
.sx-hs__result--ok .sx-hs__k { color: #b9dc7c; }
.sx-hs__result--ask { border-color: rgba(243,181,110,.5); background: rgba(181,97,10,.16); }
.sx-hs__result--ask::before { background: #f3b56e; }
.sx-hs__result--ask .sx-hs__k { color: #f3c48e; }
.sx-hs__link { justify-self: start; margin-top: .35rem; font-size: var(--fs-small); font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.sx-hs__link:hover { color: #fff; border-bottom-color: #fff; }
.sx-hs__note { margin: 0; font-size: .72rem; color: #7b93ab; }

/* Einblendung beim Wechsel: Zeilen nacheinander */
.sx-hs__panel.is-entering > *, .sx-hs__panel.is-entering .sx-hs__flow li { animation: sx-rise .45s var(--ease-out) both; }
.sx-hs__panel.is-entering .sx-hs__flow li:nth-child(1) { animation-delay: .1s; }
.sx-hs__panel.is-entering .sx-hs__flow li:nth-child(2) { animation-delay: .25s; }
.sx-hs__panel.is-entering .sx-hs__flow li:nth-child(3) { animation-delay: .4s; }
.sx-hs__panel.is-entering .sx-hs__flow li:nth-child(4) { animation-delay: .6s; }

@media (max-width: 560px) {
  .sx-hs__label { display: none; }
  .sx-hs__flow li { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .sx-hs__panel { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-hs__panel.is-entering > *, .sx-hs__panel.is-entering .sx-hs__flow li { animation: none; }
}

/* ======================================================================
   Hero-Animation "Auftrag & Einkauf" (partials/flow-order.php) – Präfix of-.
   Stufen s1–s4 setzt assets/js/flow-stages.js: s1 Erkennen, s2 Abgleichen,
   s3 Bewerten, s4 Vorbereiten. Ruhezustand = Eingang.
   ====================================================================== */
.of-flow {
  --of-ok: #4be0a8; --of-warn: #ffbf5a; --of-miss: #ff7d8b;
  --of-line: rgba(255,255,255,.14); --of-muted: rgba(226,235,255,.62);
  margin: 0; position: relative; container-type: inline-size;
  width: 100%; max-width: 700px; padding: 16px; box-sizing: border-box;
  color: #eaf1ff; font-size: 14px; line-height: 1.35;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
}
.of-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.of-body { display: grid; gap: 12px; transition: opacity .45s ease; }
.of-flow.fl-fade .of-body { opacity: 0; }
.of-flow.fl-reset, .of-flow.fl-reset * { transition: none !important; animation: none !important; }

/* Status */
.of-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--of-muted); min-height: 1.4em; }
.of-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--of-ok); box-shadow: 0 0 0 4px rgba(75,224,168,.18); flex: 0 0 auto; animation: of-pulse 1.6s ease-in-out infinite; }
.of-status-text { animation: of-in .4s ease both; }
@keyframes of-pulse { 50% { box-shadow: 0 0 0 7px rgba(75,224,168,0); } }
@keyframes of-in { from { opacity: 0; transform: translateY(4px); } }

.of-main { display: grid; gap: 12px; }
@container (min-width: 500px) { .of-main { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }

/* Bestell-PDF */
.of-paper {
  position: relative; overflow: hidden; border-radius: 8px; padding: 12px;
  background: #f7f9fc; color: #23324a; font-size: 11px; box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.of-p-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #23324a; padding-bottom: 6px; margin-bottom: 6px; }
.of-p-head b { font-size: 12px; letter-spacing: .08em; }
.of-p-head span { font-family: var(--font-mono); font-size: 10.5px; }
.of-p-meta { display: grid; gap: 2px; margin-bottom: 8px; color: #4a5b74; font-size: 10.5px; }
.of-p-tbl { display: grid; gap: 2px; }
.of-p-row { position: relative; display: grid; grid-template-columns: 1.2fr .9fr .8fr; gap: 6px; padding: 4px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; }
.of-p-row span:last-child { text-align: right; }
.of-p-row--h { font-family: inherit; font-weight: 700; color: #6a7a92; border-bottom: 1px solid #d6dde8; border-radius: 0; }
.of-hl { position: absolute; inset: 0; border-radius: 4px; border: 1.5px solid #3b8cff; background: rgba(59,140,255,.1); opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i) * .3s + .3s); }
.of-flow.s1 .of-hl { opacity: 1; transform: none; }
.of-flow.s2 .of-hl { opacity: .35; transition-delay: 0s; }
.of-tag { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: #3b8cff; color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .3s ease 1.6s, transform .3s ease 1.6s; }
.of-flow.s1 .of-tag { opacity: 1; transform: none; }
.of-scan { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, transparent, rgba(59,140,255,.35), transparent); opacity: 0; pointer-events: none; }
.of-flow.s1:not(.s2) .of-scan { opacity: 1; animation: of-scan 1.8s ease-in-out both; }
@keyframes of-scan { from { transform: translateY(-30px); } to { transform: translateY(190px); } }

/* Abgleich */
.of-cmp { display: grid; gap: 5px; align-content: start; }
.of-cmp-h, .of-cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 2.6rem); gap: 6px; align-items: center; }
.of-cmp-h { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--of-muted); padding: 0 8px; }
.of-cmp-h span:not(:first-child) { text-align: center; }
.of-cmp-row {
  padding: 7px 8px; border-radius: 8px; background: rgba(5,18,41,.45); border: 1px solid rgba(255,255,255,.08);
  opacity: 0; transform: translateX(8px);
  transition: opacity .35s ease, transform .35s ease, background .4s ease, border-color .4s ease;
  transition-delay: calc(var(--i) * .3s + .5s);
}
.of-flow.s1 .of-cmp-row { opacity: 1; transform: none; }
.of-cmp-pos { display: grid; min-width: 0; }
.of-cmp-pos b { font-family: var(--font-mono); font-size: 12px; }
.of-cmp-pos small { font-size: 11px; color: var(--of-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.of-c { justify-self: center; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; opacity: 0; transform: scale(.5); transition: opacity .25s ease, transform .3s var(--ease-spring); transition-delay: calc(var(--j) * .18s + .2s); }
.of-flow.s2 .of-c { opacity: 1; transform: none; }
.of-c[data-k="ok"]   { background: rgba(75,224,168,.18); color: var(--of-ok); }
.of-c[data-k="ok"]::before   { content: "\2713"; }
.of-c[data-k="warn"] { background: rgba(255,191,90,.2); color: var(--of-warn); }
.of-c[data-k="warn"]::before { content: "!"; }
.of-c[data-k="miss"] { background: rgba(255,125,139,.2); color: var(--of-miss); }
.of-c[data-k="miss"]::before { content: "?"; }
.of-c[data-k="na"]   { color: var(--of-muted); }
.of-c[data-k="na"]::before   { content: "\2013"; }

.of-chip { justify-self: start; margin-top: 4px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; max-height: 0; opacity: 0; overflow: hidden; transition: opacity .3s ease, max-height .3s ease; transition-delay: calc(var(--i) * .2s); }
.of-flow.s3 .of-chip { max-height: 2em; opacity: 1; }
.of-cmp-row[data-k="ok"] .of-chip   { background: rgba(75,224,168,.18); color: var(--of-ok); }
.of-cmp-row[data-k="warn"] .of-chip { background: rgba(255,191,90,.2); color: var(--of-warn); }
.of-cmp-row[data-k="miss"] .of-chip { background: rgba(255,125,139,.2); color: var(--of-miss); }
.of-flow.s3 .of-cmp-row[data-k="warn"] { background: rgba(255,191,90,.1); border-color: rgba(255,191,90,.5); }
.of-flow.s3 .of-cmp-row[data-k="miss"] { background: rgba(255,125,139,.1); border-color: rgba(255,125,139,.5); }

/* Schritte */
.of-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.of-step { margin: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--of-muted); }
.of-step em { font-style: normal; font-family: var(--font-mono); margin-right: 4px; color: rgba(226,235,255,.4); }
.of-track { display: block; height: 3px; border-radius: 3px; background: var(--of-line); overflow: hidden; }
.of-fill { display: block; height: 100%; width: 0; background: #7fb2f2; }
.of-step.is-active { color: #fff; }
.of-step.is-active .of-fill { animation: of-fill var(--dur, 3s) linear forwards; }
.of-step.is-done { color: #eaf1ff; }
.of-step.is-done .of-fill { width: 100%; background: var(--of-ok); }
@keyframes of-fill { to { width: 100%; } }

/* ERP-Übergabe */
.of-out { border-radius: 10px; border: 1px dashed rgba(255,255,255,.22); padding: 10px 12px; transition: border-color .4s ease, background .4s ease; }
.of-flow.s4 .of-out { border-style: solid; border-color: rgba(127,178,242,.55); background: rgba(5,18,41,.45); }
.of-out-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-weight: 700; font-size: 13px; }
.of-out-meta { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--of-muted); }
.of-out ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* Zeilen behalten ihren Platz und werden nur eingeblendet - so springt die
   Figur beim Wechsel in Stufe 4 nicht in der Höhe. */
.of-out li {
  margin: 6px 0 0; position: relative; padding-left: 18px; font-size: 12.5px; color: #dbe7f5;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i) * .5s + .3s);
}
.of-flow.s4 .of-out li { opacity: 1; transform: none; }
.of-out li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 8px; height: 8px; border-radius: 50%; }
.of-out li[data-k="ok"]::before   { background: var(--of-ok); }
.of-out li[data-k="warn"]::before { background: var(--of-warn); }
.of-out li[data-k="miss"]::before { background: var(--of-miss); }
.of-out li b { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .of-flow *, .of-flow *::before { transition: none !important; animation: none !important; }
  .of-scan { display: none; }
}

/* ======================================================================
   Hero-Animation "Service & Telefon" (partials/flow-service.php) – Präfix sv-.
   Stufen aus assets/js/flow-stages.js: s1 Aufnehmen (Gespräch läuft mit),
   s2 Zusammenfassen (Felder füllen sich, Schlüsselwörter leuchten),
   s3 Zuordnen (CRM-Treffer), s4 Übergeben (Ticket, Rückruf, Eskalation).
   ====================================================================== */
.sv-flow {
  --sv-ok: #4be0a8; --sv-warn: #ffbf5a; --sv-ask: #ff9fb0; --sv-blue: #7fb2f2;
  --sv-muted: rgba(226,235,255,.62);
  margin: 0; position: relative; container-type: inline-size;
  width: 100%; max-width: 700px; padding: 16px; box-sizing: border-box;
  color: #eaf1ff; font-size: 14px; line-height: 1.35;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
}
.sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-body { display: grid; gap: 12px; transition: opacity .45s ease; }
.sv-flow.fl-fade .sv-body { opacity: 0; }
.sv-flow.fl-reset, .sv-flow.fl-reset * { transition: none !important; animation: none !important; }

.sv-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sv-muted); min-height: 1.4em; }
.sv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-ok); box-shadow: 0 0 0 4px rgba(75,224,168,.18); flex: 0 0 auto; animation: of-pulse 1.6s ease-in-out infinite; }
.sv-status-text { animation: of-in .4s ease both; }

.sv-main { display: grid; gap: 12px; }
@container (min-width: 460px) { .sv-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }

/* Gespräch */
.sv-call { border-radius: 10px; padding: 12px; background: rgba(5,18,41,.5); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 10px; }
.sv-call-h { display: flex; align-items: center; gap: 10px; }
.sv-phone { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: rgba(75,224,168,.16); color: var(--sv-ok); }
.sv-phone svg { width: 18px; height: 18px; }
.sv-flow:not(.s1) .sv-phone { animation: sv-ring 1.4s ease-in-out infinite; }
@keyframes sv-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(75,224,168,.45); } 60% { box-shadow: 0 0 0 10px rgba(75,224,168,0); } }
.sv-call-t { display: grid; flex: 1; min-width: 0; }
.sv-call-t b { font-size: 13px; }
.sv-call-t small { font-size: 11px; color: var(--sv-muted); }
.sv-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.sv-wave i { width: 3px; height: 6px; border-radius: 2px; background: var(--sv-blue); opacity: .4; }
.sv-flow.s1:not(.s2) .sv-wave i { opacity: 1; animation: sv-wave .9s ease-in-out infinite; }
.sv-wave i:nth-child(2) { animation-delay: -.2s !important; }
.sv-wave i:nth-child(3) { animation-delay: -.5s !important; }
.sv-wave i:nth-child(4) { animation-delay: -.1s !important; }
.sv-wave i:nth-child(5) { animation-delay: -.65s !important; }
@keyframes sv-wave { 50% { height: 20px; } }

.sv-lines { display: grid; gap: 6px; min-height: 9.5em; align-content: start; }
.sv-line {
  margin: 0; padding: 7px 10px; border-radius: 10px 10px 10px 3px; font-size: 12.5px; line-height: 1.45;
  background: rgba(255,255,255,.07); color: #dbe7f5;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i) * 1s + .3s);
}
.sv-flow.s1 .sv-line { opacity: 1; transform: none; }
.sv-line mark { background: transparent; color: inherit; padding: 0 2px; margin: 0 -2px; border-radius: 3px; transition: background .4s ease, color .4s ease; }
.sv-flow.s2 .sv-line mark { background: rgba(59,140,255,.35); color: #fff; }
.sv-flow.s2 .sv-line mark.w { background: rgba(255,191,90,.35); }

/* Zusammenfassung */
.sv-sum { border-radius: 10px; padding: 10px 12px; background: #f7f9fc; color: #23324a; display: grid; gap: 2px; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.sv-sum-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 2px solid #23324a; }
.sv-ai { font-size: 10px; letter-spacing: .02em; text-transform: none; padding: 2px 7px; border-radius: 999px; background: #e8f0fc; color: #0a4fac; }
.sv-row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 6px; border-radius: 6px; font-size: 12px; transition: background .4s ease; }
.sv-k { color: #6a7a92; font-weight: 600; }
.sv-v { position: relative; display: grid; gap: 3px; min-height: 1.4em; }
.sv-v b { font-weight: 600; opacity: 0; transform: translateX(-4px); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i) * .3s + .2s); }
.sv-v::after { content: ""; position: absolute; left: 0; top: .45em; height: 8px; width: 70%; border-radius: 4px; background: #e3e9f2; transition: opacity .3s ease; transition-delay: calc(var(--i) * .3s + .2s); }
.sv-flow.s2 .sv-v b { opacity: 1; transform: none; }
.sv-flow.s2 .sv-v::after { opacity: 0; }
.sv-flow.s2 .sv-row[data-k="warn"] { background: #fff4df; }
.sv-flow.s2 .sv-row[data-k="warn"] .sv-v b { color: #9a5a00; }
.sv-flow.s2 .sv-row[data-k="ask"] { background: #fdeef1; }
.sv-flow.s2 .sv-row[data-k="ask"] .sv-v b { color: #a3324a; }
.sv-chip { justify-self: start; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; background: #e4f3ea; color: #14784a; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s ease, max-height .3s ease; transition-delay: calc(var(--i) * .5s + .2s); }
.sv-chip::before { content: "\2713  "; }
.sv-flow.s3 .sv-chip { opacity: 1; max-height: 3em; }

/* Schritte (wie Auftrag & Einkauf) */
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv-step { margin: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--sv-muted); }
.sv-step em { font-style: normal; font-family: var(--font-mono); margin-right: 4px; color: rgba(226,235,255,.4); }
.sv-track { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.sv-fill { display: block; height: 100%; width: 0; background: var(--sv-blue); }
.sv-step.is-active { color: #fff; }
.sv-step.is-active .sv-fill { animation: of-fill var(--dur, 3s) linear forwards; }
.sv-step.is-done { color: #eaf1ff; }
.sv-step.is-done .sv-fill { width: 100%; background: var(--sv-ok); }

/* Übergabe: drei Karten */
.sv-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-card {
  display: grid; gap: 1px; padding: 9px 10px; border-radius: 10px; min-width: 0;
  border: 1px dashed rgba(255,255,255,.2); color: var(--sv-muted);
  transition: border-color .4s ease, background .4s ease, color .4s ease, transform .4s ease;
  transition-delay: calc(var(--i) * .45s + .2s);
}
.sv-card-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sv-card b { font-size: 12.5px; }
.sv-card small { font-size: 11px; opacity: .8; }
.sv-card b, .sv-card small { opacity: .25; transition: opacity .4s ease; transition-delay: inherit; }
.sv-flow.s4 .sv-card { border-style: solid; color: #eaf1ff; transform: translateY(-2px); }
.sv-flow.s4 .sv-card b, .sv-flow.s4 .sv-card small { opacity: 1; }
.sv-flow.s4 .sv-card[data-k="ok"] { border-color: rgba(75,224,168,.55); background: rgba(75,224,168,.1); }
.sv-flow.s4 .sv-card[data-k="ok"] .sv-card-k { color: var(--sv-ok); }
.sv-flow.s4 .sv-card[data-k="warn"] { border-color: rgba(255,191,90,.6); background: rgba(255,191,90,.12); }
.sv-flow.s4 .sv-card[data-k="warn"] .sv-card-k { color: var(--sv-warn); }
@container (max-width: 420px) { .sv-out { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .sv-flow *, .sv-flow *::before, .sv-flow *::after { transition: none !important; animation: none !important; }
}

/* ======================================================================
   Hero-Animation "Produktion & Technik" (partials/flow-tech.php) – Präfix pt-.
   Stufen aus assets/js/flow-stages.js: s1 Erkennen (Bereiche markiert),
   s2 Extrahieren (Merkmale füllen sich), s3 Abgleichen (PDM-Ergebnis,
   Revision weicht ab), s4 Fachprüfung (Übergabe an AV und Konstruktion).
   ====================================================================== */
.pt-flow {
  --pt-ok: #4be0a8; --pt-warn: #ffbf5a; --pt-blue: #7fb2f2;
  --pt-muted: rgba(226,235,255,.62);
  margin: 0; position: relative; container-type: inline-size;
  width: 100%; max-width: 700px; padding: 16px; box-sizing: border-box;
  color: #eaf1ff; font-size: 14px; line-height: 1.35;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
}
.pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-body { display: grid; gap: 12px; transition: opacity .45s ease; }
.pt-flow.fl-fade .pt-body { opacity: 0; }
.pt-flow.fl-reset, .pt-flow.fl-reset * { transition: none !important; animation: none !important; }

.pt-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pt-muted); min-height: 1.4em; }
.pt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-ok); box-shadow: 0 0 0 4px rgba(75,224,168,.18); flex: 0 0 auto; animation: of-pulse 1.6s ease-in-out infinite; }
.pt-status-text { animation: of-in .4s ease both; }

.pt-main { display: grid; gap: 12px; }
@container (min-width: 460px) { .pt-main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; } }

/* Zeichnung */
.pt-sheet { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; border-radius: 8px; background: #f4f8fd; box-shadow: 0 10px 24px rgba(0,0,0,.3);
  background-image: linear-gradient(rgba(11,99,214,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,99,214,.06) 1px, transparent 1px);
  background-size: 12px 12px; }
.pt-draw { display: block; width: 100%; height: auto; }
.pt-frame { fill: none; stroke: #23324a; stroke-width: 1.2; }
.pt-part { fill: rgba(11,99,214,.06); stroke: #23324a; stroke-width: 1.6; stroke-linejoin: round; }
.pt-center { fill: none; stroke: #6a7a92; stroke-width: .8; stroke-dasharray: 6 2 1 2; }
.pt-dim { fill: #23324a; stroke: #23324a; stroke-width: .8; }
.pt-txt { fill: #23324a; font-size: 9px; font-family: var(--font-mono); }
.pt-note { font-family: inherit; font-size: 9.5px; }
.pt-title rect, .pt-title path { fill: #fff; stroke: #23324a; stroke-width: 1; }
.pt-title path { fill: none; }
.pt-title text { fill: #6a7a92; font-size: 7.5px; }
.pt-title text.v { fill: #23324a; font-size: 9px; font-weight: 700; font-family: var(--font-mono); }
.pt-mk {
  fill: rgba(59,140,255,.12); stroke: #3b8cff; stroke-width: 1.5; rx: 2;
  opacity: 0; transition: opacity .35s ease, fill .4s ease, stroke .4s ease; transition-delay: calc(var(--i) * .35s + .3s);
}
.pt-flow.s1 .pt-mk { opacity: 1; }
.pt-flow.s3 .pt-mk--rev { fill: rgba(255,170,40,.22); stroke: #e08a00; transition-delay: .2s; }
.pt-flow.s3 .pt-mk:not(.pt-mk--rev) { fill: rgba(75,224,168,.14); stroke: #2bb57f; transition-delay: 0s; }
.pt-scan { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: linear-gradient(180deg, transparent, rgba(59,140,255,.3), transparent); opacity: 0; pointer-events: none; }
.pt-flow.s1:not(.s2) .pt-scan { opacity: 1; animation: pt-scan 2s ease-in-out both; }
@keyframes pt-scan { from { transform: translateY(-30px); } to { transform: translateY(260px); } }
.pt-tag { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: #3b8cff; color: #fff; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease 1.9s, transform .3s ease 1.9s; }
.pt-flow.s1 .pt-tag { opacity: 1; transform: none; }

/* Merkmale */
.pt-feat { border-radius: 10px; padding: 10px 12px; background: rgba(5,18,41,.5); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 4px; }
.pt-feat-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.14); }
.pt-src { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--pt-muted); }
.pt-row { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 7px; border-radius: 7px; font-size: 12px; border: 1px solid transparent; transition: background .4s ease, border-color .4s ease; }
.pt-k { color: var(--pt-muted); font-weight: 600; }
.pt-v { position: relative; display: grid; gap: 3px; min-height: 1.4em; }
.pt-v b { font-family: var(--font-mono); font-weight: 600; color: #fff; opacity: 0; transform: translateX(-4px); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i) * .35s + .2s); }
.pt-v::after { content: ""; position: absolute; left: 0; top: .45em; height: 8px; width: 55%; border-radius: 4px; background: rgba(255,255,255,.1); transition: opacity .3s ease; transition-delay: calc(var(--i) * .35s + .2s); }
.pt-flow.s2 .pt-v b { opacity: 1; transform: none; }
.pt-flow.s2 .pt-v::after { opacity: 0; }
.pt-chip { justify-self: start; white-space: nowrap; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s ease, max-height .3s ease; transition-delay: calc(var(--i) * .3s + .2s); }
.pt-flow.s3 .pt-chip { opacity: 1; max-height: 3em; }
.pt-row[data-k="ok"] .pt-chip { background: rgba(75,224,168,.16); color: var(--pt-ok); }
.pt-row[data-k="ok"] .pt-chip::before { content: "\2713  "; }
.pt-row[data-k="warn"] .pt-chip { background: rgba(255,191,90,.2); color: var(--pt-warn); }
.pt-row[data-k="warn"] .pt-chip::before { content: "!  "; }
.pt-flow.s3 .pt-row[data-k="warn"] { background: rgba(255,191,90,.1); border-color: rgba(255,191,90,.5); }

/* Schritte */
.pt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pt-step { margin: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--pt-muted); }
.pt-step em { font-style: normal; font-family: var(--font-mono); margin-right: 4px; color: rgba(226,235,255,.4); }
.pt-track { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.pt-fill { display: block; height: 100%; width: 0; background: var(--pt-blue); }
.pt-step.is-active { color: #fff; }
.pt-step.is-active .pt-fill { animation: of-fill var(--dur, 3s) linear forwards; }
.pt-step.is-done { color: #eaf1ff; }
.pt-step.is-done .pt-fill { width: 100%; background: var(--pt-ok); }

/* Übergabe */
.pt-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pt-card {
  position: relative; display: grid; gap: 1px; padding: 9px 10px; border-radius: 10px; min-width: 0;
  border: 1px dashed rgba(255,255,255,.2); color: var(--pt-muted);
  transition: border-color .4s ease, background .4s ease, color .4s ease, transform .4s ease;
  transition-delay: calc(var(--i) * .5s + .2s);
}
.pt-card-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pt-card b { font-size: 12.5px; }
.pt-card small { font-size: 11px; opacity: .8; }
.pt-card b, .pt-card small { opacity: .25; transition: opacity .4s ease; transition-delay: inherit; }
.pt-person { position: absolute; right: 10px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,191,90,.18); color: var(--pt-warn); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .35s var(--ease-spring); transition-delay: 1s; }
.pt-person svg { width: 17px; height: 17px; }
.pt-card[data-k="warn"] { padding-right: 48px; }
.pt-flow.s4 .pt-card { border-style: solid; color: #eaf1ff; transform: translateY(-2px); }
.pt-flow.s4 .pt-card b, .pt-flow.s4 .pt-card small { opacity: 1; }
.pt-flow.s4 .pt-card[data-k="ok"] { border-color: rgba(75,224,168,.55); background: rgba(75,224,168,.1); }
.pt-flow.s4 .pt-card[data-k="ok"] .pt-card-k { color: var(--pt-ok); }
.pt-flow.s4 .pt-card[data-k="warn"] { border-color: rgba(255,191,90,.6); background: rgba(255,191,90,.12); }
.pt-flow.s4 .pt-card[data-k="warn"] .pt-card-k { color: var(--pt-warn); }
.pt-flow.s4 .pt-person { opacity: 1; transform: none; }
@container (max-width: 400px) { .pt-out { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .pt-flow *, .pt-flow *::before, .pt-flow *::after { transition: none !important; animation: none !important; }
  .pt-scan { display: none; }
}

/* ======================================================================
   Event-Detailseite (views/pages/event.php) – Präfix ev-, nutzt sonst die
   sx-/hm-/tm-Bausteine der Lösungs- und Über-uns-Seite.
   ====================================================================== */
/* Agenda-Karte im Hero (Events ohne eigene Animation). Der aktuelle
   Programmpunkt wechselt per site.js ([data-ev-agenda] → .is-now). */
.ev-board {
  margin: 0; padding: 18px; border-radius: 14px; color: #eaf1ff;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 24px 60px rgba(0,0,0,.4); backdrop-filter: blur(6px);
  display: grid; gap: 14px;
}
.ev-board__head { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ev-board__date { flex: 0 0 auto; width: 62px; height: 66px; border-radius: 12px; display: grid; place-content: center; text-align: center; background: var(--accent-2); color: var(--ink-950); }
.ev-board__date b { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.ev-board__date span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ev-board__title { display: grid; gap: 2px; min-width: 0; }
.ev-board__k { font: 600 .6875rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #7fb2f2; }
.ev-board__title b { font-size: 1rem; line-height: 1.3; }
.ev-board__title small { font-size: .8rem; color: #a7bdd3; }
.ev-board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; }
.ev-board__list li {
  position: relative; overflow: hidden; margin: 0; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 9px; font-size: .875rem; color: #c8d8e8;
  background: rgba(5,18,41,.45); border: 1px solid rgba(255,255,255,.07);
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s var(--ease-out);
}
.ev-board__list time { font: 600 .8125rem var(--font-mono); color: #7fb2f2; }
.ev-board__list i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent-2); }
.ev-board__list li.is-now { color: #fff; background: rgba(11,99,214,.3); border-color: rgba(127,178,242,.55); transform: translateX(4px); }
.ev-board__list li.is-now time { color: #b9dc7c; }
.ev-board__list li.is-now i { animation: of-fill var(--ev-dur, 2600ms) linear forwards; }
.ev-board__list li.is-past { color: #8fa6bf; }
.ev-board__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: .8125rem; color: #a7bdd3; }

/* Zielgruppe neben dem Einleitungstext */
.ev-audience { padding: 1.75rem; border-radius: var(--radius-lg); background: var(--surface-soft); border: 1px solid var(--line); }
.ev-audience h3 { margin: 1rem 0 .5rem; font-size: 1.15rem; }
.ev-audience p { margin: 0; color: var(--ink-700); line-height: 1.6; }

/* Ablauf als Datenfenster: Uhrzeit schmaler */
.ev-agenda .sx-demo__rows li { grid-template-columns: 4rem minmax(0, 1fr); }

/* Referenten: Profilkarten quer */
.tm-profiles--list { grid-template-columns: minmax(0, 1fr); }
.tm-profile--row { flex-direction: row; }
.tm-profile--row .tm-profile__img { width: 34%; max-width: 13rem; aspect-ratio: auto; }
.ev-facts { grid-template-columns: minmax(0, 1fr); }
.ev-facts li { background: var(--surface); }
@media (max-width: 640px) {
  .tm-profile--row { flex-direction: column; }
  .tm-profile--row .tm-profile__img { width: 100%; max-width: none; aspect-ratio: 4 / 3.6; }
}
@media (max-width: 1000px) {
  .sx-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-board__list li { transition: none; transform: none !important; }
  .ev-board__list i { display: none; }
}


/* ======================================================================
   Förderseite (views/pages/foerderung.php) – Präfix fz-, nutzt sonst die
   sx-/hm-/ev-Bausteine. Rechner im Hero: site.js ("Forschungszulage-Rechner").
   ====================================================================== */
.fz-calc {
  margin: 0; padding: 18px; border-radius: 14px; color: #eaf1ff;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 24px 60px rgba(0,0,0,.4); backdrop-filter: blur(6px);
  display: grid; gap: 14px;
}
.fz-calc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fz-calc__k { font: 600 .6875rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #7fb2f2; }
.fz-calc__size { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(5,18,41,.5); border: 1px solid rgba(255,255,255,.1); }
.fz-calc__size input { position: absolute; opacity: 0; pointer-events: none; }
.fz-calc__size span { display: block; padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #a7bdd3; cursor: pointer; transition: background .2s ease, color .2s ease; }
.fz-calc__size input:checked + span { background: var(--accent-2); color: var(--ink-950); }
.fz-calc__size input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.fz-calc__inputs { display: grid; gap: 12px; }
.fz-calc__field { display: grid; gap: 4px; }
.fz-calc__label { display: flex; justify-content: space-between; gap: 10px; font-size: .875rem; font-weight: 600; }
.fz-calc__label output { font: 600 .875rem var(--font-mono); color: #fff; white-space: nowrap; }
.fz-calc__field small { font-size: .75rem; color: #8fa6bf; line-height: 1.35; }
.fz-calc__field input[type=range] { width: 100%; margin: 2px 0; accent-color: var(--accent-2); cursor: pointer; }

.fz-calc__bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(5,18,41,.5); }
.fz-seg { display: block; height: 100%; width: 0; transition: width .5s var(--ease-out); }
.fz-calc__legend { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .72rem; color: #a7bdd3; }
.fz-calc__legend li { display: flex; align-items: center; gap: 6px; background: none; }
.fz-calc__legend li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--seg); }
.fz-seg--personal { --seg: #3d8bf0; background: var(--seg); }
.fz-seg--auftrag { --seg: #7fb2f2; background: var(--seg); }
.fz-seg--wg { --seg: #bcd6f5; background: var(--seg); }
.fz-seg--pauschale { --seg: var(--accent-2); background: var(--seg); }

.fz-calc__rows { margin: 0; display: grid; gap: 4px; }
.fz-calc__rows div { display: flex; justify-content: space-between; gap: 10px; font-size: .8125rem; color: #a7bdd3; }
.fz-calc__rows dd { margin: 0; font-family: var(--font-mono); color: #dbe7f5; }

.fz-calc__result {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px; background: rgba(11,99,214,.3); border: 1px solid rgba(127,178,242,.55);
}
.fz-calc__result span { font-size: .875rem; font-weight: 600; }
.fz-calc__result strong { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1; color: #fff; }
.fz-calc__result.is-bump strong { animation: fz-bump .45s var(--ease-out); }
@keyframes fz-bump { 40% { color: #b9dc7c; transform: scale(1.04); } }
.fz-calc__note { margin: 0; font-size: .72rem; color: #8fa6bf; line-height: 1.4; }

/* Kennzahlen-Leiste unter dem Hero */
.fz-figures { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fz-figures li { padding: 1.25rem 1.35rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.fz-figures strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; color: var(--accent); }
.fz-figures span { display: block; margin-top: .35rem; font-size: var(--fs-small); color: var(--ink-700); line-height: 1.45; }

/* Kostenarten: Anteil groß neben dem Icon */
.fz-costs__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.fz-costs__share { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--accent); }

/* Abgrenzung FuE: zwei Spalten gleich breit */
.fz-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fz-fit__col { padding: 1.75rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; }
.fz-fit__col--muted { background: var(--surface-soft); }
.fz-fit__col h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.fz-fit__note { margin: 1.25rem 0 0; font-size: var(--fs-small); color: var(--ink-500); line-height: 1.5; }

/* Ablauf: vier Schritte in einer Reihe, Zuständigkeit unten */
.fz-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fz-steps .sx-route { display: flex; flex-direction: column; }
.fz-steps .sx-route p { flex: 1 1 auto; }
.fz-steps .sx-route__tag { align-self: flex-start; margin: 1rem 0 0; }

.fz-history { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2rem; }
.fz-history .sx-head { max-width: 72ch; }
.fz-figures-sec { padding-bottom: 0; }
.fz-history .data { font-size: .875rem; }
.fz-history .data th, .fz-history .data td { white-space: nowrap; }
.fz-history .data tbody tr:last-child { background: var(--accent-soft); font-weight: 600; }
.fz-source { font-size: var(--fs-small); color: var(--ink-500); }

.fz-limits { padding: 1.75rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.fz-limits h3 { margin: .5rem 0 1rem; font-size: 1.15rem; }

.fz-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .fz-figures, .fz-steps, .fz-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 640px) {
  .fz-figures, .fz-steps, .fz-ways, .fz-fit { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fz-seg { transition: none; }
  .fz-calc__result.is-bump strong { animation: none; }
}


/* ======================================================================
   Zentrumsseite (views/pages/zentrum.php) – Präfix zt-, nutzt sonst die
   sx-/hm-/ev-Bausteine.
   ====================================================================== */
.zt-hero-img { margin: 0; }

/* In drei Schritten zum Besuch */
.zt-visit { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zt-visit li { padding: 1.5rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.zt-visit__num { font: 600 .75rem var(--font-mono); color: var(--accent); }
.zt-visit h3 { font-size: 1.0625rem; margin: .6rem 0 .4rem; }
.zt-visit p { margin: 0; font-size: var(--fs-small); color: var(--ink-700); line-height: 1.55; }

/* Bild rechts statt links */
.zt-intro--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.zt-intro--rev .ticks { margin-top: 1.5rem; }

.zt-formats .sx-route { display: flex; flex-direction: column; }
.zt-formats .sx-route p { flex: 1 1 auto; }
.zt-formats .sx-route__tag { align-self: flex-start; margin: 1rem 0 0; }

/* Anfahrt: Hochformat-Foto neben Tabelle */
.zt-arrival { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; }
.zt-arrival__media { margin: 0; position: sticky; top: 6rem; }
.zt-arrival__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.zt-arrival__media figcaption { margin-top: .75rem; font-size: var(--fs-small); color: var(--ink-500); }

@media (max-width: 1000px) {
  .zt-intro--rev { grid-template-columns: minmax(0, 1fr); }
  .zt-arrival { grid-template-columns: minmax(0, 1fr); }
  .zt-arrival__media { position: static; max-width: 28rem; }
}
@media (max-width: 640px) {
  .zt-visit { grid-template-columns: minmax(0, 1fr); }
}

/* Vertrauenspunkte unter den Hero-Buttons */
.zt-trust { list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.zt-trust li { position: relative; padding-left: 1.4rem; font-size: var(--fs-small); font-weight: 600; color: #c8d8e8; }
.zt-trust li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: .8rem; height: .45rem;
  border-left: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2); transform: rotate(-45deg);
}

/* Gastgeber: drei Personen mit rundem Porträt */
.zt-team { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zt-host { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.zt-host__img { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 3px solid var(--accent-soft); }
.zt-host h3 { margin: .2rem 0 0; font-size: 1.0625rem; }
.zt-host__role { display: block; margin-top: .15rem; font: 600 .6875rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.zt-host p { margin: .6rem 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-700); }
.zt-team__more { margin: 1.5rem 0 0; }
@media (max-width: 1000px) {
  .zt-team { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
}

/* Kontaktdaten statt Tabelle */
.zt-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zt-contact li { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.zt-contact small { display: block; margin-bottom: .2rem; font: 600 .6875rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.zt-contact span:last-child { font-size: .9375rem; line-height: 1.5; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.zt-contact a { color: var(--accent); font-weight: 600; text-decoration: none; }
.zt-contact a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .zt-contact { grid-template-columns: minmax(0, 1fr); }
}


/* Schmale Desktops: Mit "Standort" hat die Navigation einen Punkt mehr –
   zwischen 1081 und 1279px Abstände, Logo und Pille etwas verdichten. */
@media (min-width: 1081px) and (max-width: 1279px) {
  .header__inner { gap: 1rem; }
  .nav__list { gap: 0; }
  .nav__link { padding-inline: .5rem; font-size: .9rem; }
  .logo__glyph { width: 72px; height: 72px; }
  .header__cta-btn { padding: .75rem 1.1rem; }
  .header__cta-btn .header__cta-arrow { display: none; }
}