/* ========================================================================
   e.Ray · v2 — image-forward, brand-true (blue + amber, no beige)
   ====================================================================== */

:root {
  /* Brand colors — e.Ray CI */
  --c-blue:      #005796;  /* e.Ray Blau — Primär */
  --c-blue-water:#4E7EB8;  /* Wasserblau — Piktogramme */
  --c-blue-lt:   #80ABCB;  /* Hellblau — Sekundärfond */
  --c-blue-50:   #E8F0F7;  /* abgeleitet aus Hellblau, sehr hell */
  --c-navy-900:  #00304F;  /* abgedunkeltes Blau für Tiefe */
  --c-navy-800:  #003E6B;

  --c-green:     #8EC728;  /* Limegrün – sparsam */
  --c-red:       #AF2018;  /* Blutrot – sparsam */

  --c-ink:       #000000;  /* Tiefschwarz */
  --c-text:      #525557;  /* Anthrazit */
  --c-white:     #FFFFFF;
  --c-bg:        #FFFFFF;
  --c-bg-tint:   #F3F3F3;  /* Lichtgrau */
  --c-ice:       #E8F0F7;

  --c-gold:      #FFBA49;  /* Accent: Honig/Amber (vormals #FFC801 Gold). Bei Farbwechsel HIER aendern. */

  --c-blue-700:  var(--c-blue);
  --c-blue-500:  var(--c-blue-water);
  --c-blue-300:  var(--c-blue-lt);
  --c-blue-100:  #CFE0EE;

  /* --- Layer 2 - Semantik (was die Farbe TUT) -----------------------------
     Templates referenzieren ausschliesslich diese Tokens. Aenderungen an
     Layer 1 (Brand-Palette oben) wirken automatisch auf alle Komponenten. */
  --c-primary:        var(--c-blue);          /* Headlines, Links, Primary-CTA */
  --c-primary-strong: var(--c-navy-900);      /* Hero-Tiefe, Wasser-Boden */
  --c-primary-soft:   var(--c-blue-lt);       /* Hellblau-Sekundaerfond */
  --c-surface-tint:   var(--c-blue-50);       /* Soft Section-BG */

  --c-accent:         var(--c-gold);          /* Hover, Kicker-Strich, Glints, Gold-CTA */
  --c-accent-on:      var(--c-ink);           /* Text auf Akzent-Flaeche */

  --c-success:        var(--c-green);         /* sparsam, Status-Pills */
  --c-danger:         var(--c-red);           /* sparsam, Alarm-Pills */

  --c-g-900: #1A1A1A;
  --c-g-700: #3F4244;
  --c-g-500: #525557;
  /* --c-g-400: Meta-/Sekundärtext auf hellem Grund (4,95:1 auf Weiß).
     --c-g-300 ist mit 2,65:1 NUR für Rahmen, Trenner und Disabled-States. */
  --c-g-400: #6B7175;
  --c-g-300: #9AA0A3;
  --c-g-200: #DDDDDD;
  --c-g-100: #F3F3F3;
  --c-g-50:  #FAFAFA;
  --c-line:  #DDE3E8;  /* Hairline für Panels, Cards, Slider-Dots (Graft v2.1) */

  /* Type */
  --f-display: "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --f-sans:    "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Roboto Mono", ui-monospace, Menlo, monospace;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:56px; --sp-16:80px; --sp-20:120px; --sp-24:180px;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --shadow-sm: 0 1px 2px rgba(10,37,64,.06);
  --shadow-md: 0 20px 40px -20px rgba(10,37,64,.25);
  --shadow-lg: 0 40px 80px -40px rgba(0,62,107,.45);

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-flow: cubic-bezier(.45,.05,.25,1);
  --wrap: 1240px;
  --wrap-wide: 1480px;
  /* Höhe des Sticky-Headers (14px Padding + 56px Logo + 14px + 1px Border ≈ 85px).
     Referenz für Sticky-Offsets (Glossar-A–Z), Scrolly-Bühne, Hero-Padding. */
  --header-h: 84px;
}

/* ========================================================================
   FLOW · Wave & Water motion system
   ====================================================================== */

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease-flow), transform 1.1s var(--ease-flow); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
/* d1–d3: Delay-Kurzform der v2.1-Graft-Templates (G1–G4) */
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
/* Härtung: ohne aktives Scripting dürfen Inhalte nie versteckt bleiben.
   Die Kreis-Diagramme starten ihren Startzustand über
   `.kreis[data-reveal]:not(.is-revealed) …` (weiter unten, höhere Spezifität) —
   deshalb hier !important, analog zum Reduced-Motion-Bypass. */
@media (scripting: none) {
  .reveal, .fade-up { opacity: 1; transform: none; }
  .kreis[data-reveal] .kreis__connector-path { stroke-dashoffset: 0 !important; }
  .kreis[data-reveal] .kreis__center         { opacity: 1 !important; transform: translate(-53%, -50%) !important; }
  .kreis[data-reveal] .kreis__center--photo  { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .kreis[data-reveal] .kreis__item           { opacity: 1 !important; }
  .kreis[data-reveal] .kreis__cluster        { opacity: 1 !important; transform: none !important; }
}


*,*::before,*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-g-500);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display:block; max-width:100%; height:auto; }
a { color: var(--c-blue-700); text-underline-offset:3px; }

h1,h2,h3,h4 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--c-blue);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 300; letter-spacing: -.035em; }
h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; letter-spacing: -.028em; }
h3 { font-size: 22px; font-weight: 500; }
h4 { font-size: 18px; font-weight: 500; }
em { font-style: italic; color: var(--c-blue); font-weight:500; }
p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
.lead, .hero__lede { font-size: clamp(18px, 1.5vw, 22px); color: var(--c-g-500); line-height: 1.6; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.wrap--wide { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
/* position/isolation: dekorative Layer (.databits-layer mit z-index:-1, Badges)
   brauchen die Section als Containing Block UND als eigenen Stacking Context —
   sonst ankert der Canvas am Seitenanfang statt in der Sektion.
   Gleiches Muster wie bei .section--water* weiter unten. */
.section { padding-block: clamp(72px, 10vw, 144px); position: relative; isolation: isolate; }
.section--white { background: var(--c-white); }
.section--tint  { background: var(--c-blue-50); }
/* Farbige Flächen tragen immer Bewegung (Entscheidung 2026-08-07): Tiefenverlauf +
   driftende Lichtschächte, damit kein Abschnitt als flaches Blau steht.
   isolation:isolate hier fest verankert – die Datenbits-Layer der Sektionen
   liegen auf z-index -1 und brauchen den eigenen Stacking Context. */
.section--navy  {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(168deg, #00609F 0%, var(--c-blue) 46%, #004E86 100%);
  color: var(--c-ice);
}
.section--navy::before {
  content: ""; position: absolute; inset: 0 -20%;
  z-index: -2; pointer-events: none;
  background:
    linear-gradient(102deg, transparent 26%, rgba(255,255,255,.05)  31%, rgba(255,255,255,.015) 38%, transparent 42%),
    linear-gradient( 97deg, transparent 62%, rgba(255,255,255,.04)  67%, transparent 75%);
  animation: hub-shafts calc(30s / var(--motion, 1)) ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) { .section--navy::before { animation: none; opacity: .8; } }
.section--navy h1,.section--navy h2,.section--navy h3 { color: var(--c-white); }
.section--navy p { color: var(--c-ice); opacity:.9; }
/* em ist global blau (s.o. `em {}`). In Ueberschriften auf dunklem Grund ergibt das
   Blau auf Blau – dort gilt Gold, wie schon bei .hero__title em und .bleed__title em.
   Bewusst nur auf Ueberschriften: weisse Karten innerhalb dunkler Sektionen
   (Massnahmen-Karten, Filterpanel) sollen ihr Blau behalten. */
.section--navy h1 em,.section--navy h2 em,.section--navy h3 em,
.section--deep h1 em,.section--deep h2 em,.section--deep h3 em,
.section--water h1 em,.section--water h2 em,.section--water h3 em,
.section--water--mid h1 em,.section--water--mid h2 em,.section--water--mid h3 em,
.section--water--deep h1 em,.section--water--deep h2 em,.section--water--deep h3 em,
.cta-band h1 em,.cta-band h2 em,.cta-band h3 em { color: var(--c-gold); }
/* position/isolation fest verankert wie bei .section--navy: der Databits-Canvas
   liegt auf z-index -1 und braucht den eigenen Stacking Context, sonst rutscht er
   aus seiner Sektion heraus ueber den Seitenanfang. */
.section--deep  { background: linear-gradient(180deg, var(--c-navy-800), var(--c-navy-900)); color: var(--c-ice); position: relative; isolation: isolate; }
.section--deep h1,.section--deep h2,.section--deep h3 { color: var(--c-white); }

.grid { display:grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 5 Spalten nur bei voller wrap--wide-Breite (1384px Inhalt = ~257px/Karte). Darunter auf 3
   zurueck: eine 3+2-Reihe liest sich als Absicht, eine 4+1-Reihe als fehlende Karten.
   Breakpoint bei 1380px statt 1200px, weil bei 1200px nur ~154px Textbreite bleiben und
   lange Komposita wie »Sauerstoffversorgung« dort nicht mehr umbrechen koennen. */
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--5 > * { overflow-wrap: break-word; hyphens: auto; }
.grid--split { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
/* Benannte Varianten statt Inline-grid-template-columns in den Templates –
   Inline-Styles kollabieren auf Mobil nicht.
   --mosaic: Dashboard-Mosaik /produkte/swim/ · --split-15: Info-Panel about.php.
   Beide funktionieren auch ohne die Basisklasse .grid (about.php-Panel ist kein .grid). */
.grid--mosaic   { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4); }
.grid--split-15 { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 1379px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid--2,.grid--3,.grid--4,.grid--5,.grid--split,.grid--mosaic,.grid--split-15 { grid-template-columns: 1fr; }
}

.kicker {
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-blue-700);
}
.kicker::before { content:""; width:28px; height:1px; background: var(--c-blue-500); }
.kicker--gold { color: var(--c-blue); }
.kicker--gold::before { background: var(--c-gold); }
.kicker--light { color: var(--c-ice); }
.kicker--light::before { background: var(--c-gold); }

.pill { display:inline-flex; align-items:center; gap:var(--sp-2); padding: 6px 12px; border-radius: 999px; background: var(--c-blue-50); border:1px solid var(--c-blue-100); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-navy-800); }
.pill--ok    { background:#E6F3EC; color:#1B6A3A; border-color:#BFE0CC; }
.pill--warn  { background:#FFF4D1; color:#7A5A00; border-color:#F2DD95; }
.pill--dark  { background: rgba(255,255,255,.08); color: var(--c-ice); border-color: rgba(255,255,255,.14); }

.btn {
  display: inline-flex; align-items:center; gap: var(--sp-2);
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--f-sans); font-weight: 500; font-size: 15px;
  border: 1px solid transparent; text-decoration: none;
  transition: all .2s var(--ease);
  cursor: pointer;
}
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--c-blue-700); color: var(--c-white); }
.btn--primary:hover { background: var(--c-blue-500); }
.btn--gold { background: var(--c-gold); color: var(--c-ink); }
.btn--gold:hover { background: var(--c-blue); color: var(--c-white); }
.btn--outline { background: transparent; color: var(--c-blue); border-color: var(--c-g-200); }
.btn--outline:hover { border-color: var(--c-blue-700); color: var(--c-blue-700); }
/* In dunklen Section-Kontexten kippt .btn--outline automatisch ins helle Schema (sonst dunkelblauer Text auf Wasser-/Navy-BG = unleserlich). */
.section--water .btn--outline,
.section--water--deep .btn--outline,
.section--water--mid .btn--outline,
.section--navy .btn--outline,
.section--deep .btn--outline,
.hero--split .btn--outline { color: var(--c-ice); border-color: rgba(255,255,255,.35); }
.section--water .btn--outline:hover,
.section--water--deep .btn--outline:hover,
.section--water--mid .btn--outline:hover,
.section--navy .btn--outline:hover,
.section--deep .btn--outline:hover,
.hero--split .btn--outline:hover { background: rgba(255,255,255,.1); border-color: var(--c-gold); color: var(--c-white); }
.btn--ghost-light { background: transparent; color: var(--c-ice); border-color: rgba(255,255,255,.3); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: var(--c-gold); color: var(--c-white); }
.btn--link { background:transparent; padding:0; color: var(--c-blue-700); border-bottom:1px solid currentColor; border-radius:0; }
/* Größenstufe für Haupt-CTAs (Handlungsfeld-/Zielgruppen-Heroes, Produkte-Hub, Demo) */
.btn--lg { padding: 17px 30px; font-size: 17px; }

.icon { width: 36px; height: 36px; margin-bottom: var(--sp-4); opacity:.85; }

/* ---- Utilities -------------------------------------------------------- */
/* Hausregel: mehrzeiliger Fließtext bleibt linksbündig und lesbar begrenzt. */
.text-flow { text-align: left; max-width: 64ch; }

/* Skip-Link · visuell versteckt, bei Tastatur-Fokus über dem Sticky-Header.
   Markup: <a class="skip-link" href="#inhalt"> in includes/header.php. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
  z-index: 200;
}
.skip-link:focus,
.skip-link:focus-visible {
  /* fixed statt absolute: bleibt auch nach Scrollen (Shift-Tab) im Viewport */
  position: fixed; left: var(--sp-4); top: var(--sp-2);
  width: auto; height: auto; overflow: visible;
  padding: 10px 18px; border-radius: var(--r-sm);
  background: var(--c-blue); color: var(--c-white);
  font-family: var(--f-sans); font-size: 15px; font-weight: 500;
  text-decoration: none;
  outline: 2px solid var(--c-gold); outline-offset: 2px;
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-g-200); }
.site-header__inner { display:flex; align-items:center; gap: var(--sp-8); padding: 14px clamp(20px, 4vw, 48px); max-width: var(--wrap-wide); margin-inline:auto; }
.site-header__logo img { height: 48px; transition: height .25s var(--ease); }
@media (min-width: 900px){ .site-header__logo img { height: 56px; } }
.site-nav { display:flex; align-items:center; gap: var(--sp-6); margin-left:auto; }
/* :not(.btn) — der Demo-CTA in der Nav ist ein .btn--gold und behält Button-Farben
   (sonst übersteuert diese Regel den Button-Text → blau auf blauem Hover-BG). */
.site-nav a[data-nav]:not(.btn) { color: var(--c-blue); text-decoration:none; font-size: 15px; font-weight: 500; position:relative; }
.site-nav a[data-nav]:not(.btn).is-active::after,
.site-nav a[data-nav]:not(.btn)[aria-current="page"]::after,
.site-nav a[data-nav]:not(.btn):hover::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--c-gold); }
.site-nav .lang { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-g-500); display:flex; gap:8px; align-items:center; padding-left: var(--sp-4); border-left: 1px solid var(--c-g-200); }
.site-nav .lang strong { color: var(--c-blue); }
/* Sprachkuerzel ohne Unterstreichung: der Underline sass bei 11px direkt am
   unteren E-Balken, dadurch war »ES« kaum von »IT« zu unterscheiden. */
.site-nav .lang a { color: var(--c-blue); text-decoration: none; }
.site-nav .lang a:hover,
.site-nav .lang a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.nav-toggle { display: none; background:none; border:0; font-size: 26px; color: var(--c-blue); cursor:pointer; }
/* Nav-Breakpoint 1140px: die Desktop-Nav (Logo + 5 Punkte + Mega-Trigger + CTA +
   Sprachschalter) braucht rund 1130px, darunter brach die Zeile um.
   Die zweite Mobil-Regel für .site-nav__trigger/.mega-panel muss identisch bleiben. */
@media (max-width: 1140px) {
  .site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--c-white); padding: var(--sp-6); border-top:1px solid var(--c-g-200); flex-direction:column; align-items:flex-start; }
  .site-nav.is-open { display:flex; }
  .nav-toggle { display:block; margin-left:auto; }
  /* Im Drawer traegt der Desktop-Trenner (border-left) nichts, er haengt frei
     in der Spalte. Stattdessen Trennlinie nach oben, groessere Schrift und
     44px-Touchziele. */
  .site-nav .lang { width:100%; font-size: 14px; letter-spacing: .08em; gap: 2px; padding-left: 0; border-left: 0; padding-top: var(--sp-3); border-top: 1px solid var(--c-g-200); }
  .site-nav .lang a,
  .site-nav .lang strong { display:inline-flex; align-items:center; min-height: 44px; padding: 0 12px; }
  .site-nav .lang > :first-child { padding-left: 0; }
}

/* ─────────────────────────────────────────
   Mega-Menu (3 Trigger-Panels: WAMO, SWIM, Lösungen)
   Wird von .site-header verwendet. JS in assets/js/header.js
   ───────────────────────────────────────── */
.site-header__inner { position: relative; }

.site-nav__trigger {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-blue); font-size: 15px; font-weight: 500;
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
  position: relative; text-decoration: none;
}
.site-nav__trigger .chev {
  width: 10px; height: 10px;
  transition: transform .2s var(--ease);
  display: inline-block;
}
.site-nav__trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.site-nav__trigger[aria-expanded="true"],
.site-nav__trigger.is-active { color: var(--c-blue); }
.site-nav__trigger:hover::after,
.site-nav__trigger.is-active::after,
.site-nav__trigger[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--c-gold);
}

.mega-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  /* Kuehles Grauweiss (Weiss mit einem Hauch --c-blue-50) statt reinem Weiss:
     das Panel liegt fast immer ueber hellen Seitenflaechen und braucht eine
     eigene Ebene. Kante unten + kraeftigerer Schatten tragen den Rest. */
  background: #F4F7FA;
  border-top: 1px solid var(--c-g-200);
  border-bottom: 1px solid #DCE4EC;
  box-shadow: 0 28px 44px -20px rgba(0,48,79,.28);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s var(--ease), opacity .2s var(--ease);
  z-index: 59;
}
.mega-panel.is-open { max-height: 560px; opacity: 1; }
.mega-panel__grid {
  display: grid; gap: 48px;
  grid-template-columns: 1fr 1fr 1.2fr;
  max-width: var(--wrap-wide); margin-inline: auto;
  padding: 40px clamp(20px, 4vw, 48px);
}
.mega-panel__col h4,
.mega-panel__col .mega-col__h {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-blue); margin: 0 0 var(--sp-4); line-height: 1.1;
}
.mega-panel__col h5 {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-g-500); margin: var(--sp-6) 0 var(--sp-4);
}
.mega-panel__col ul { list-style: none; margin: 0; padding: 0; }
.mega-panel__col li + li { margin-top: 10px; }
.mega-panel__col a {
  color: var(--c-blue); font-size: 15px; font-weight: 500;
  text-decoration: none; display: inline-block; padding: 2px 0;
}
.mega-panel__col a:hover { color: var(--c-blue); }
.mega-panel__col a.mega-panel__link--cta {
  color: var(--c-blue); margin-top: 6px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.mega-panel__col a.mega-panel__link--cta .arrow {
  display: inline-block; transition: transform .2s var(--ease);
}
.mega-panel__col a.mega-panel__link--cta:hover { color: var(--c-blue); }
.mega-panel__col a.mega-panel__link--cta:hover .arrow { transform: translateX(3px); }

.mega-panel__feature {
  display: block; border-radius: 6px; overflow: hidden;
  /* Weiss auf dem Grauweiss-Grund - die Karte muss sich weiterhin abheben */
  background: var(--c-white); border: 1px solid #E4EBF2; position: relative;
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease);
}
.mega-panel__feature:hover { transform: translateY(-2px); }
.mega-panel__feature img,
.mega-panel__feature video {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
}
.mega-panel__feature-body { padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.mega-panel__feature-kicker {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold);
  background: var(--c-navy-900); padding: 4px 8px; border-radius: 3px;
  display: inline-block; margin-bottom: var(--sp-2);
}
.mega-panel__feature h6,
.mega-panel__feature .mega-feature__h {
  font-family: var(--f-display); font-size: 18px; font-weight: 500;
  color: var(--c-blue); margin: 0; line-height: 1.3;
}

/* Muss mit dem Nav-Breakpoint oben übereinstimmen (1140px). */
@media (max-width: 1140px) {
  .site-nav__trigger { width: 100%; justify-content: space-between; padding: 8px 0; }
  .mega-panel {
    position: static; width: 100%; max-height: 0; opacity: 1;
    background: transparent; border-top: 0; border-bottom: 0; box-shadow: none;
    padding-left: var(--sp-4); margin-bottom: var(--sp-2);
  }
  .mega-panel.is-open { max-height: 1200px; }
  .mega-panel__grid { display: block; padding: 0; gap: 0; }
  .mega-panel__grid > .mega-panel__col + .mega-panel__col { margin-top: var(--sp-6); }
  .mega-panel__feature { display: none; }
}

/* Hero */
.hero {
  position: relative;
  min-height: min(88vh, 820px);
  background: var(--c-navy-900);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--c-ice);
  isolation: isolate;
}
.hero__bg { position:absolute; inset:0; z-index:-1; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }
.hero__bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,26,46,.25) 0%, rgba(6,26,46,.55) 55%, rgba(6,26,46,.9) 100%); }
.hero__inner { width:100%; padding: clamp(120px, 14vw, 200px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 80px); max-width: var(--wrap-wide); margin-inline:auto; display:grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items:end; }
.hero__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(32px, 5vw, 64px); line-height: 1.04; letter-spacing: -.035em; color: var(--c-white); margin:0; text-wrap: balance; }
.hero__title em { color: var(--c-gold); font-weight:500; }
.hero__meta { border-left:1px solid rgba(255,255,255,.2); padding-left: var(--sp-6); }
.hero__lede { color: var(--c-ice); opacity:.9; font-size: clamp(16px, 1.3vw, 20px); }
/* Dreiklang-Subline unter dem Hero-Claim (Home, Entscheidung 2026-08-06):
   grösser und ruhiger als .hero__lede, Display-Schnitt statt Fliesstext,
   Gold-Hairline als Auftakt (gleiche Sprache wie .hero__eyebrow::before). */
.hero__lede--claim {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(23px, 2.45vw, 35px);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--c-white);
  opacity: 1;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  position: relative;
  max-width: 30ch;
}
.hero__lede--claim::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 64px; height: 2px; background: var(--c-gold);
}
.hero__eyebrow { display:flex; gap:var(--sp-4); align-items:center; font-family: var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--c-ice); opacity:.7; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.hero__eyebrow::before { content:""; width:28px; height:1px; background: var(--c-gold); flex:none; }
.hero__cta { margin-top: var(--sp-8); display:flex; gap: var(--sp-3); flex-wrap: wrap; }
/* Button-Reihe der Graft-Heroes (includes/_problemwelt.php, _zielgruppe.php) */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__ticker { position: relative; width:100%; margin-top: var(--sp-10); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__meta { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding-top: var(--sp-6); }
}
@media (max-width: 640px) {
  .hero { min-height: auto; align-items: stretch; }
  .hero__inner {
    padding: calc(var(--header-h, 64px) + 56px) 20px 40px;
    gap: var(--sp-6);
  }
  .hero__title { font-size: clamp(28px, 7.5vw, 44px); letter-spacing: -.025em; line-height: 1.1; }
  /* Umbruch dem Browser überlassen – aber als Leerzeichen, nicht als display:none.
     Sonst kleben die Wörter zusammen ("Messpunktzur"), weil die Strings den
     Wortabstand im <br> tragen. */
  .hero__title br { content: " "; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .14em; gap: var(--sp-2); }
  .hero__eyebrow::before { width: 20px; }
  .hero__lede { font-size: 15px; line-height: 1.55; }
  .hero__lede--claim { font-size: clamp(20px, 5.8vw, 26px); line-height: 1.38; margin-top: var(--sp-5); padding-top: var(--sp-4); }
  .hero__lede--claim::before { width: 44px; }
  .hero__cta { margin-top: var(--sp-5); gap: var(--sp-2); }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; padding: 14px 18px; font-size: 14px; }
  .hero__ticker { margin-top: var(--sp-6); }
}

/* Split product hero */
.hero--split { background: var(--c-navy-900); color: var(--c-ice); padding-top: var(--sp-16); padding-bottom: 0; overflow: hidden; }
.hero--split .hero__grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-12); align-items: stretch; max-width: var(--wrap-wide); margin-inline:auto; padding: var(--sp-16) clamp(20px, 4vw, 48px) 0; }
.hero--split .hero__copy { padding-bottom: var(--sp-16); }
.hero--split h1 { color: var(--c-white); font-size: clamp(34px, 4.5vw, 64px); }
.hero--split h1 em { color: var(--c-gold); font-weight: 500; }
.hero--split .hero__image { position:relative; margin-right: calc( -1 * clamp(20px, 4vw, 48px) ); align-self: stretch; min-height: 540px; }
.hero--split .hero__image img { width:100%; height:100%; object-fit: cover; border-top-left-radius: var(--r-lg); }
@media (max-width: 900px) { .hero--split .hero__grid { grid-template-columns: 1fr; padding-top: var(--sp-10); } .hero--split .hero__image { min-height: 340px; margin-right: 0; } .hero--split .hero__image img { border-radius: var(--r-md); } }

/* Full-bleed hero (Homepage / WAMO / SWIM) — Background-Video oder -Image, 100vh */
.hero--full-bleed { min-height: 100vh; min-height: 100svh; align-items: flex-end; }
.hero--full-bleed__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero--full-bleed__bg .hero--full-bleed__poster,
.hero--full-bleed__bg .hero--full-bleed__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero--full-bleed__bg .hero--full-bleed__video { z-index: 1; }
.hero--full-bleed__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(6,26,46,.10) 0%, rgba(6,26,46,.20) 55%, rgba(6,26,46,.45) 100%);
}
/* Weicher weißer Lichteinfall von oben rechts — nur auf SWIM,
   hebt ESA/EUSPA-Plaketten gegen dunkles Hero-Video ab */
.hero--swim-light .hero--full-bleed__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 95% 25%,
              rgba(255,255,255,.42) 0%,
              rgba(255,255,255,.22) 38%,
              rgba(255,255,255,.08) 68%,
              rgba(255,255,255,0)   100%);
}
/* Lokaler Schatten direkt hinter dem Text — folgt dem Inner-Container, egal ob centered oder end-aligned */
.hero--full-bleed .hero__inner { position: relative; isolation: isolate; }
.hero--full-bleed .hero__inner::before {
  content: ""; position: absolute; inset: -25% -20%;
  background: radial-gradient(ellipse 55% 65% at 28% 58%,
    rgba(6,26,46,.38) 0%,
    rgba(6,26,46,.30) 18%,
    rgba(6,26,46,.20) 38%,
    rgba(6,26,46,.10) 60%,
    rgba(6,26,46,.03) 82%,
    rgba(6,26,46,0)   100%);
  filter: blur(40px);
  z-index: 0; pointer-events: none;
}
.hero--full-bleed .hero__inner > * { position: relative; z-index: 1; }
.hero--full-bleed .hero__title,
.hero--full-bleed .hero__lede,
.hero--full-bleed .hero__eyebrow { text-shadow: 0 2px 18px rgba(6,26,46,.55), 0 1px 3px rgba(6,26,46,.45); }
@media (prefers-reduced-motion: reduce) {
  .hero--full-bleed__bg .hero--full-bleed__video { display: none; }
}
@media (max-width: 640px) {
  .hero--full-bleed { min-height: 88vh; min-height: 88svh; }
  /* Video bleibt auf Mobil sichtbar: footer.php lädt adaptiv den kleinen
     *-mobile-Loop (<1 MB) statt des Desktop-Loops. */
}

/* Pause/Play für das autoplayende Hero-Loop-Video (WCAG 2.2.2 „Pause, Stop,
   Hide“: alles, was länger als 5 s automatisch läuft, braucht eine Bedienung).
   Klassenname im .vhero__*-Namespace laut Handover-Vertrag; Markup + Logik
   liefert der Template-/JS-Batch. Sitzt als direktes Kind der Hero-Section
   (nicht im .hero--full-bleed__bg, der liegt auf z-index:-1).
   Stacking: .hero hat isolation:isolate, der Toggle bleibt damit lokal im
   Hero und kann den sticky .site-header (z-index:60) nie überlagern.
   Kontrast: eigener Navy-Grund mit .62 Alpha. Selbst über einem komplett
   weißen Videobild ergibt das #64707D, weißes Icon darauf = 5,06:1. */
.vhero__playtoggle {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vw, 40px);
  z-index: 4;
  appearance: none;
  width: 44px; height: 44px;      /* Touch-Target ≥ 44×44 (WCAG 2.5.8/2.5.5) */
  min-width: 44px; min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(6,26,46,.62);
  color: var(--c-white);
  cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.vhero__playtoggle svg { width: 16px; height: 16px; fill: currentColor; pointer-events: none; }
.vhero__playtoggle:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy-900); }
/* Weißer Ring mit dunklem Halo: liegt gegen helle wie dunkle Videobilder
   sicher über 3:1, ohne sich auf das Videobild zu verlassen. */
.vhero__playtoggle:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(6,26,46,.65);
}
@media (prefers-reduced-motion: reduce) {
  .vhero__playtoggle { transition: none; }
  /* Das Video ist hier bereits per display:none abgeschaltet (Regel oben),
     die Bedienung dafür wird damit gegenstandslos. */
  .hero--full-bleed .vhero__playtoggle { display: none; }
}

/* Centered hero variant — Single-Column ohne Eyebrow/Lede (Homepage / WAMO / SWIM)
   Content vertikal mittig, horizontal links angeschlagen (kein wrap-Zentrum). */
.hero--centered { align-items: center; }
.hero--centered .hero__inner {
  grid-template-columns: 1fr;
  max-width: var(--wrap-wide);
  gap: 0;
  padding-block: clamp(96px, 12vw, 160px);
}
.hero--centered .hero__title { max-width: 16ch; }

/* Bleed images */
.bleed { position: relative; margin-block: clamp(40px, 6vw, 80px); }
.bleed img { width:100%; max-height: 82vh; object-fit: cover; }
.bleed figcaption { position:absolute; left: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 48px); color: var(--c-white); font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; background: rgba(6,26,46,.55); padding: 8px 14px; backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.14); }

/* Bleed-Link · klickbarer Solutions-Anker (Full-Bleed mit Hero-Overlay) */
.bleed-link { display: block; text-decoration: none; color: inherit; }
.bleed--hero { overflow: hidden; }
.bleed--hero img { min-height: 60vh; max-height: 85vh; }

/* ====================================================================
   HERO-BANNER · Bild + gestaffelt einfahrende Caption-Tabs (Handoff D8)
   Full-bleed-Bild mit zwei Banner-Tabs (Titel + Untertitel), die beim
   Scroll-In von der Seite einfahren. Reveal über motion-loader (is-in
   auf dem [data-reveal]-Element) — kein zusätzliches JS. Nur transform +
   opacity animiert (In-App-safe). Optionen: data-side (right|left),
   data-from (right|left|bottom), data-style (solid|glass|outline|center),
   Seitenverhältnis via --ar.
   ==================================================================== */
.hero-banner {
  position: relative;
  width: 100%;
  margin-block: clamp(40px, 6vw, 80px);
  aspect-ratio: var(--ar, 1920 / 640);
  max-height: 82vh;
  overflow: hidden;
  background: var(--c-navy-900);
  isolation: isolate;
}
.hero-banner__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Caption-Stack — eine Spalte mit zwei Banner-Tabs */
.hero-banner__caption {
  position: absolute;
  bottom: 16%;
  display: flex; flex-direction: column;
  gap: clamp(5px, .7vw, 9px);
  z-index: 3;
  pointer-events: none;
}
.hero-banner[data-side="right"] .hero-banner__caption { right: 0; align-items: flex-end; }
.hero-banner[data-side="left"]  .hero-banner__caption { left: 0;  align-items: flex-start; }

/* Banner-Tab: [flag-cap (schräg)] [main (brand-blau, Text)] */
.hero-banner__tab {
  position: relative;
  display: inline-flex; align-items: stretch;
  transform: translateX(80%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero-banner__tab--title { --d: 200ms; }
.hero-banner__tab--sub   { --d: 380ms; }

.hero-banner[data-from="right"]  .hero-banner__tab { transform: translateX(80%); }
.hero-banner[data-from="left"]   .hero-banner__tab { transform: translateX(-80%); }
.hero-banner[data-from="bottom"] .hero-banner__tab { transform: translateY(40px); }

/* Reveal-Zielzustand (motion-loader setzt is-in beim Scroll-In) */
.hero-banner.is-in .hero-banner__tab {
  transform: translate(0, 0);
  opacity: 1;
  transition:
    transform calc(700ms * var(--motion, 1)) var(--ease-flow) var(--d, 200ms),
    opacity   calc(420ms * var(--motion, 1)) var(--ease-flow) var(--d, 200ms);
}

/* Flag-Cap (gleiche Farbe wie Main, schräger Schnitt) */
.hero-banner__cap {
  flex: 0 0 auto;
  width: clamp(18px, 2vw, 36px);
  background: var(--c-blue);
  clip-path: polygon(75% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-banner[data-side="left"] .hero-banner__cap {
  clip-path: polygon(0 0, 25% 0, 100% 100%, 0 100%);
  order: 2;
}
/* Main-Banner (brand-blau, Text drin) */
.hero-banner__main {
  background: var(--c-blue);
  color: #fff;
  padding: clamp(5px, .7vw, 10px) clamp(14px, 1.6vw, 26px);
  display: flex; align-items: center;
  pointer-events: auto;
}
.hero-banner__tab--title .hero-banner__main { padding-block: clamp(6px, .9vw, 12px); }
.hero-banner__tab--title .hero-banner__main .hero-banner__t {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(15px, 1.6vw, 26px);
  line-height: 1.15; letter-spacing: -.01em; color: #fff;
}
.hero-banner__tab--sub .hero-banner__main { padding-block: clamp(4px, .55vw, 8px); }
.hero-banner[data-side="right"] .hero-banner__tab--sub .hero-banner__main { padding-left:  clamp(34px, 4.2vw, 80px); }
.hero-banner[data-side="left"]  .hero-banner__tab--sub .hero-banner__main { padding-right: clamp(34px, 4.2vw, 80px); }
.hero-banner__tab--sub .hero-banner__main .hero-banner__t {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(13px, 1.2vw, 20px);
  line-height: 1.25; letter-spacing: -.005em; color: rgba(255,255,255,.95);
}

/* Variante: Glas-Banner (data-style="glass") */
.hero-banner[data-style="glass"] .hero-banner__cap  { background: rgba(0,87,150,.78); }
.hero-banner[data-style="glass"] .hero-banner__main { background: rgba(0,87,150,.78); }
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .hero-banner[data-style="glass"] .hero-banner__cap  { background: rgba(0,87,150,.55); }
  .hero-banner[data-style="glass"] .hero-banner__main {
    background: rgba(0,87,150,.55);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
}

/* Variante: Outline-Banner (data-style="outline") */
.hero-banner[data-style="outline"] .hero-banner__cap  { background: var(--c-gold); width: 0; }
.hero-banner[data-style="outline"] .hero-banner__main {
  background: transparent;
  border-left: 3px solid var(--c-gold);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* Variante: Centered-Headline (data-style="center") */
.hero-banner[data-style="center"] .hero-banner__caption {
  left: 50%; right: auto; bottom: auto; top: 50%;
  transform: translate(-50%, -50%);
  align-items: center; text-align: center;
}
.hero-banner[data-style="center"] .hero-banner__cap  { display: none; }
.hero-banner[data-style="center"] .hero-banner__main { background: transparent; text-align: center; padding-inline: 0; }
.hero-banner[data-style="center"] .hero-banner__tab--title .hero-banner__main .hero-banner__t {
  font-size: clamp(22px, 2.6vw, 40px);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.hero-banner[data-style="center"] .hero-banner__tab--sub .hero-banner__main .hero-banner__t {
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* Reduced-Motion: Banner stehen sofort, kein Slide-in */
@media (prefers-reduced-motion: reduce) {
  .hero-banner__tab { transform: none !important; opacity: 1 !important; transition: none !important; }
}
/* Schmale Viewports: Banner sitzen tiefer */
@media (max-width: 640px) {
  .hero-banner { aspect-ratio: 16 / 9; }
  .hero-banner__caption { bottom: 8%; }
}

/* ====================================================================
   VHERO · Scripted Video-Hero mit getimten Cues (Handoff D7)
   Hintergrund-Video + zeitgesteuerte Annotationen (Headline/Bullets/
   Callout), Fortschritt + Pause, End-State-CTA, Reduced-Motion-Poster.
   Engine: assets/js/video-hero.js · Cue-Daten: inertes JSON-Island.
   Eigener .vhero/.vcue-Namespace (kollidiert NICHT mit .hero/.cue).
   ==================================================================== */
.vhero {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-navy-900);
  isolation: isolate;
}
.vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.vhero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(0,48,79,0) 0%, rgba(0,48,79,0) 55%, rgba(0,48,79,.35) 100%);
}
.vhero__tag {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.78); background: rgba(0,48,79,.62);
  padding: 5px 10px; border-radius: 999px;
}

/* Bottom-Chrome: Pause + Fortschritt + Zeit */
.vhero__foot {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
}
.vhero__btn {
  appearance: none; border: 0; width: 32px; height: 32px;
  background: rgba(0,48,79,.62); color: #fff; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: background 180ms var(--ease);
}
.vhero__btn:hover { background: var(--c-gold); color: var(--c-navy-900); }
.vhero__btn svg { width: 12px; height: 12px; fill: currentColor; }
.vhero__progress { position: relative; height: 3px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; cursor: pointer; }
.vhero__progress::before {
  content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(to right, #fff, var(--c-gold)); border-radius: 999px; transform-origin: left;
}
.vhero__dots { position: absolute; inset: 0; pointer-events: none; }
.vhero__dots i {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.vhero__dots i.is-past { background: var(--c-gold); }
.vhero__dots i.is-active { background: var(--c-gold); transform: translate(-50%,-50%) scale(1.6); }
.vhero__time {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: #fff;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ---- Cue-Basis ---- */
.vcue { position: absolute; z-index: 3; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.vcue.is-in { opacity: 1; }
.vcue { transition: opacity var(--enter-dur, 420ms) var(--ease-flow), transform var(--enter-dur, 420ms) var(--ease-flow); }

/* SLOT: Headline (links, Akzent-Balken) */
.vcue--headline { left: clamp(20px, 4%, 60px); top: 32%; max-width: min(54%, 720px); padding-left: 18px; border-left: 3px solid var(--c-white); color: #fff; }
.vcue-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); margin: 0 0 10px; }
.vcue-text { font-family: var(--f-display); font-weight: 300; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.vcue-text em { font-style: normal; font-weight: 500; color: var(--c-gold); }
.vcue-sub { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 44ch; }

/* SLOT: Bullets (Navy-Band unten) */
.vcue--bullets { left: 0; right: 0; bottom: 64px; padding: 18px clamp(24px, 5%, 80px); background: rgba(0,48,79,.86); border-left: 3px solid var(--c-gold); color: #fff; }
.vcue-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 6px; }
.vcue--bullets ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 28px; }
.vcue--bullets li { position: relative; padding-left: 18px; font: 500 16px/1.5 var(--f-sans); color: rgba(255,255,255,.94); opacity: 0; transform: translateX(-6px); }
.vcue--bullets.is-in li { opacity: 1; transform: none; transition: opacity 380ms var(--ease-flow) var(--li-d, 0ms), transform 380ms var(--ease-flow) var(--li-d, 0ms); }
.vcue--bullets li::before { content: ""; position: absolute; left: 0; top: .68em; width: 8px; height: 8px; background: var(--c-gold); border-radius: 50%; }

/* SLOT: Callout (Ring auf Koordinate) */
.vcue--callout { left: calc(var(--x, .5) * 100%); top: calc(var(--y, .5) * 100%); transform: translate(-50%, -50%); width: 130px; height: 130px; }
.vcue-ring { position: absolute; inset: 0; border: 2.5px solid var(--c-gold); border-radius: 50%; }
.vcue-ring--ghost { border-color: rgba(255,186,73,.5); animation: vcueRing 2.4s var(--ease-flow) infinite; animation-delay: 600ms; }
@keyframes vcueRing { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: 0; } }
.vcue-pin { position: absolute; left: 100%; top: 50%; transform: translate(8px, -50%); padding: 8px 12px; background: rgba(0,48,79,.92); color: #fff; border-left: 2px solid var(--c-gold); border-radius: 4px; font: 500 13px/1.3 var(--f-sans); max-width: 240px; min-width: 140px; white-space: normal; }
.vcue-pin-k { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 3px; }

/* ---- Enter-Animationen (data-enter) ---- */
.vcue[data-enter="fade"] { transform: translate(0,0) scale(1); }
.vcue[data-enter="fade"]:not(.is-in) { opacity: 0; }
.vcue[data-enter="slide-up"]:not(.is-in) { transform: translateY(20px); }
.vcue--callout[data-enter="slide-up"]:not(.is-in) { transform: translate(-50%, calc(-50% + 20px)); }
.vcue[data-enter="slide-left"]:not(.is-in) { transform: translateX(-30px); }
.vcue--callout[data-enter="slide-left"]:not(.is-in) { transform: translate(calc(-50% - 30px), -50%); }
.vcue[data-enter="slide-right"]:not(.is-in) { transform: translateX(30px); }
.vcue--callout[data-enter="slide-right"]:not(.is-in) { transform: translate(calc(-50% + 30px), -50%); }
.vcue[data-enter="accent-grow"].vcue--headline:not(.is-in) { opacity: 0; transform: translateY(8px); border-left-color: var(--c-gold); }
.vcue[data-enter="accent-grow"].vcue--headline { transition: opacity 480ms var(--ease-flow), transform 480ms var(--ease-flow); }
.vcue[data-enter="accent-grow"].vcue--headline .vcue-text,
.vcue[data-enter="accent-grow"].vcue--headline .vcue-sub,
.vcue[data-enter="accent-grow"].vcue--headline .vcue-eyebrow { opacity: 0; transform: translateX(-8px); transition: opacity 360ms var(--ease-flow) 220ms, transform 360ms var(--ease-flow) 220ms; }
.vcue[data-enter="accent-grow"].vcue--headline.is-in .vcue-text,
.vcue[data-enter="accent-grow"].vcue--headline.is-in .vcue-sub,
.vcue[data-enter="accent-grow"].vcue--headline.is-in .vcue-eyebrow { opacity: 1; transform: none; }
.vcue[data-enter="accent-grow"].vcue--headline.is-in .vcue-sub { transition-delay: 360ms; }
.vcue[data-enter="zoom"]:not(.is-in) { transform: scale(.86); }
.vcue--callout[data-enter="zoom"]:not(.is-in) { transform: translate(-50%, -50%) scale(.6); }
.vcue--callout[data-enter="zoom"] { transform: translate(-50%, -50%) scale(1); }
.vcue[data-enter="type"].vcue--headline { opacity: 1; }
.vcue[data-enter="type"].vcue--headline:not(.is-in) .vcue-text { clip-path: inset(0 100% 0 0); }
.vcue[data-enter="type"].vcue--headline .vcue-text { clip-path: inset(0 0 0 0); transition: clip-path 900ms steps(40, end); }
.vcue[data-enter="type"].vcue--headline:not(.is-in) .vcue-eyebrow,
.vcue[data-enter="type"].vcue--headline:not(.is-in) .vcue-sub { opacity: 0; }
.vcue[data-enter="type"].vcue--headline .vcue-eyebrow,
.vcue[data-enter="type"].vcue--headline .vcue-sub { transition: opacity 340ms var(--ease-flow) 700ms; }
.vcue[data-enter="type"].vcue--headline.is-in .vcue-eyebrow,
.vcue[data-enter="type"].vcue--headline.is-in .vcue-sub { opacity: 1; }

/* ---- Exit-Animationen (data-exit, via .is-out) ---- */
.vcue.is-out { opacity: 0; transition: opacity var(--exit-dur, 320ms) var(--ease), transform var(--exit-dur, 320ms) var(--ease); }
.vcue.is-out[data-exit="slide-down"] { transform: translateY(20px); }
.vcue--callout.is-out[data-exit="slide-down"] { transform: translate(-50%, calc(-50% + 20px)); }
.vcue.is-out[data-exit="slide-left"] { transform: translateX(-30px); }
.vcue--callout.is-out[data-exit="slide-left"] { transform: translate(calc(-50% - 30px), -50%); }
.vcue.is-out[data-exit="slide-right"] { transform: translateX(30px); }
.vcue--callout.is-out[data-exit="slide-right"] { transform: translate(calc(-50% + 30px), -50%); }
.vcue.is-out[data-exit="zoom-out"] { transform: scale(1.08); }
.vcue--callout.is-out[data-exit="zoom-out"] { transform: translate(-50%, -50%) scale(1.18); }
.vcue.is-out[data-exit="accent-shrink"].vcue--headline { transform: translateY(-6px); }

/* ---- End-State · CTA-Karte ---- */
.vhero__end { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; background: rgba(0,48,79,.55); opacity: 0; pointer-events: none; transition: opacity 460ms var(--ease-flow); }
.vhero__end.is-shown { opacity: 1; pointer-events: auto; }
.vhero__card { width: min(560px, 86%); background: #fff; border-radius: var(--r-md); padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px) clamp(24px, 3.4vw, 36px); box-shadow: 0 20px 60px rgba(0,48,79,.32); transform: translateY(20px) scale(.96); transition: transform 540ms var(--ease-flow) 100ms; border-top: 4px solid var(--c-gold); }
.vhero__end.is-shown .vhero__card { transform: none; }
.vhero__card .vhero__kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-blue); margin: 0 0 var(--sp-3); }
.vhero__card h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); color: var(--c-blue); letter-spacing: -.02em; margin: 0 0 var(--sp-3); line-height: 1.12; }
.vhero__card h3 em { color: var(--c-blue); font-weight: 500; font-style: normal; }
.vhero__card p { color: var(--c-g-500); font-size: 15px; line-height: 1.55; margin: 0 0 var(--sp-6); }
.vhero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---- Reveal des Stage-Containers (motion-loader → is-in) ---- */
.vhero[data-reveal] { transform: translateY(14px); }
.vhero[data-reveal].is-in { transform: none; transition: transform 700ms var(--ease-flow); }

/* ---- Reduced-Motion · statischer Hero (Poster statt Video) ---- */
.vhero.is-reduced .vhero__video,
.vhero.is-reduced .vhero__foot { display: none; }
.vhero.is-reduced::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--poster-url, url("/assets/videos/home-loop.webp"));
  background-size: cover; background-position: center;
}
.vhero.is-reduced .vcue.is-static,
.vhero.is-reduced .vcue.is-static .vcue-eyebrow,
.vhero.is-reduced .vcue.is-static .vcue-text,
.vhero.is-reduced .vcue.is-static .vcue-sub { opacity: 1; transform: none; transition: none; clip-path: none; }
.vhero.is-reduced .vhero__end { background: transparent; opacity: 1; pointer-events: auto; align-items: end; padding: 0 0 24px; transition: none; }
.vhero.is-reduced .vhero__card { transform: none; transition: none; box-shadow: 0 12px 32px rgba(0,48,79,.18); }

/* ---- Schmale Viewports ---- */
@media (max-width: 640px) {
  /* Infographic-Video FULL-HEIGHT auf Smartphone → max. vertikaler Raum für die
     Cue-Text-Boxen (eine Cue hat 6 Bullets); Querformat-Footage via object-fit:cover
     portrait-beschnitten. svh = sichtbare Viewport-Höhe (URL-Leiste berücksichtigt). */
  .vhero { aspect-ratio: auto; height: 100vh; height: 100svh; }
  .vcue--headline { top: 14%; max-width: 86%; }
  .vcue--bullets { bottom: 72px; }
  .vcue--bullets ul { grid-template-columns: 1fr; }
}
.bleed--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,26,46,.25) 0%, rgba(6,26,46,.45) 55%, rgba(6,26,46,.78) 100%); pointer-events: none; }
.bleed__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(32px, 6vw, 96px); gap: var(--sp-5); color: var(--c-white); }
.bleed__kicker { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold); }
.bleed__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(40px, 6vw, 84px); letter-spacing: -.02em; line-height: 1.05; color: var(--c-white); margin: 0; text-wrap: balance; }
.bleed__title em { font-style: normal; color: var(--c-gold); }
.bleed-link__cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-white); padding: 14px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(6,26,46,.25); backdrop-filter: blur(6px); transition: background .25s ease, color .25s ease, border-color .25s ease; margin-top: var(--sp-2); }
.bleed-link__cta .arrow { transition: transform .25s ease; }
.bleed-link:hover .bleed-link__cta,
.bleed-link:focus-visible .bleed-link__cta { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy-900); }
.bleed-link:hover .bleed-link__cta .arrow,
.bleed-link:focus-visible .bleed-link__cta .arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .bleed--hero img { min-height: 70vh; }
  .bleed__overlay { gap: var(--sp-4); }
}

/* Frames */
.frame { position:relative; margin:0; border-radius: var(--r-md); overflow:hidden; background: var(--c-blue-50); }
.frame img,
.frame video { width:100%; height:100%; object-fit: cover; display:block; }
.frame figcaption { position:absolute; left: var(--sp-4); bottom: var(--sp-4); font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-white); text-transform: uppercase; background: rgba(6,26,46,.55); padding: 6px 10px; backdrop-filter: blur(6px); }
.frame--tall { aspect-ratio: 3/4; }
.frame--wide { aspect-ratio: 16/9; }
.frame--hero { aspect-ratio: 4/5; min-height: 520px; }

/* Ticker */
.ticker { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--c-white); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--c-g-200); }
.ticker__cell { padding: var(--sp-6); border-right: 1px solid var(--c-g-200); display:flex; flex-direction: column; gap: 6px; }
.ticker__cell:last-child { border-right: 0; }
.ticker__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-g-400); }
.ticker__val   { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3vw, 40px); color: var(--c-blue); letter-spacing: -.02em; }
.ticker__val small { font-family: var(--f-mono); font-size: 13px; color: var(--c-g-400); margin-left: 6px; }
.ticker__trend { font-family: var(--f-mono); font-size: 11px; color: var(--c-blue-700); }
@media (max-width: 900px) { .ticker { grid-template-columns: repeat(2,1fr); } .ticker__cell:nth-child(2) { border-right:0; } }
@media (max-width: 640px) {
  .ticker { grid-template-columns: 1fr; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .ticker__cell { padding: var(--sp-4) var(--sp-5); border-right: 0; border-bottom: 1px solid var(--c-g-200); flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .ticker__cell:last-child { border-bottom: 0; }
  .ticker__label { flex: 1 1 auto; font-size: 10px; letter-spacing: .1em; }
  .ticker__val { font-size: 22px; order: 3; flex: none; }
  .ticker__val small { font-size: 11px; }
  .ticker__trend { display: none; }
}

/* Card */
.card { background: var(--c-white); border: 1px solid var(--c-g-200); border-radius: var(--r-md); padding: var(--sp-8); transition: all .25s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-blue-100); }
.card h3 { margin-bottom: var(--sp-3); color: var(--c-blue); }
.card p { margin: 0; color: var(--c-g-500); }

/* Measure */
.measure { background: var(--c-white); border-radius: var(--r-md); padding: var(--sp-8); border-top: 3px solid var(--c-gold); transition: all .2s var(--ease); border-left:1px solid var(--c-g-200); border-right:1px solid var(--c-g-200); border-bottom:1px solid var(--c-g-200); }
.measure:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.measure__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue-700); display:block; margin-bottom: var(--sp-3); }
.measure h3 { font-size: 22px; margin-bottom: var(--sp-3); font-weight: 500; }
.measure p { margin: 0; color: var(--c-g-500); font-size: 15px; }

/* Intro */
.s-intro { max-width: 60ch; margin-bottom: var(--sp-12); }
.s-intro h2 { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
.s-intro p { color: var(--c-g-500); font-size: 18px; }
/* Zweispaltiger Section-Kopf (H2 links, Lede rechts) — stapelt unter 768px,
   ersetzt frühere Inline-Flex-Styles ohne Mobile-Fallback (Critique 2026-06-10) */
.s-intro--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-8); max-width: none; }
@media (max-width: 768px) { .s-intro--row { flex-direction: column; align-items: flex-start; gap: var(--sp-5); } }

/* Forms */
.field { display:flex; flex-direction:column; gap: 6px; margin-bottom: var(--sp-5); }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-g-500); }
.field input, .field select, .field textarea { font-family: var(--f-sans); font-size: 15px; padding: 12px 14px; background: var(--c-white); border: 1px solid var(--c-g-200); border-radius: var(--r-sm); color: var(--c-blue); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--c-blue-500); outline-offset: 1px; border-color: var(--c-blue-500); }

/* People mosaic · eine Kachelgroesse fuer alle Tiers.
   Entscheidung 2026-08-14: C-Level nicht mehr groesser als der Rest, alle Bilder +5 %.
   Feste Track-Breite statt 8x 1fr — Bestand waren ~170px in .wrap--wide,
   +5 % = 179px. auto-fill legt so viele Kacheln pro Reihe wie passen, der
   Rest der Reihe bleibt leer (Tiers haben 2/6/4 Personen). */
.people-mosaic { --person-tile: 179px; display: grid; grid-template-columns: repeat(auto-fill, var(--person-tile)); gap: 3px; }
.people-mosaic + .people-tier { margin-top: var(--sp-12); }
.people-tier { margin-top: var(--sp-8); }
.people-tier__label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--sp-4); }

/* Kleine Stimmungsbilder: visuelles Element neben dem Text, bewusst nicht
   bildschirmfuellend (Entscheidung 2026-08-13). Gleiche Groessenordnung wie die
   Beleg-Bilder in der Fertigungs-Sektion. */
.photo-sm { max-width: 420px; aspect-ratio: 4/3; }

/* Story auf /about/: langer Fliesstext links, Foto rechts daneben. */
.about-story-split { display: grid; grid-template-columns: minmax(0, 64ch) 340px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.about-story-split .photo-sm { max-width: none; }
/* Klein: eine Spalte, Foto nach oben — sonst landet es erst nach ~1400px Text. */
@media (max-width: 900px) { .about-story-split { grid-template-columns: 1fr; } .about-story-split .frame { order: -1; max-width: 340px; } }

/* C-Level hat keine Sonder-Groesse mehr (Entscheidung 2026-08-14): gleiche Kachel,
   gleiches Seitenverhaeltnis, gleiche Namens-Typo wie alle uebrigen Tiers.
   Die Hierarchie traegt allein das Tier-Label darueber. */

.people-mosaic .person { position: relative; display:block; overflow:hidden; aspect-ratio: 1/1; background: transparent; }
.people-mosaic img { width:100%; height:100%; object-fit: cover; }
.people-mosaic .name { position:absolute; inset: auto 0 0 0; padding: var(--sp-3) var(--sp-3) calc(var(--sp-2) + 2px); background: linear-gradient(180deg, rgba(6,26,46,0), rgba(6,26,46,.88) 60%); color: var(--c-white); font-family: var(--f-display); font-size: 13px; font-weight: 500; line-height: 1.2; }
.people-mosaic .name small { display:block; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; font-weight: 400; margin-top: 2px; }
/* Unter 600px reicht die Breite fuer 3 feste Kacheln nicht mehr — dort auf
   fluide Spalten zurueck, sonst faellt die Reihe abrupt auf zwei Kacheln. */
@media (max-width: 600px) { .people-mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .people-mosaic { grid-template-columns: repeat(2, 1fr); } }

/* Trust — continuous marquee, full color */
.trust-row { padding-block: var(--sp-12); border-top:1px solid var(--c-g-200); border-bottom:1px solid var(--c-g-200); background: var(--c-blue-50); overflow: hidden; }
.trust-row .kicker { justify-content:center; display:flex; margin-bottom: var(--sp-8); }
.trust-marquee {
  position: relative; width: 100%; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  width: max-content;
  animation: trust-scroll 45s linear infinite;
  will-change: transform;
}
.trust-track:hover { animation-play-state: paused; }
.trust-track img {
  height: clamp(72px, 9vw, 110px);
  width: auto;
  flex-shrink: 0;
  opacity: 1;
  filter: none;
  display: block;
}
.trust-track img.is-seal { height: clamp(92px, 11vw, 140px); }
@keyframes trust-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .trust-track { animation: none; } }

/* Feature rows */
.feature-stack { display:grid; gap: var(--sp-6); }
.feature-row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items:center; }
.feature-row:nth-child(even) .feature-row__copy { order: -1; }
.feature-row__img { aspect-ratio: 5/4; border-radius: var(--r-md); overflow: hidden; }
.feature-row__img img { width:100%; height:100%; object-fit: cover; }
.feature-row__copy h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.02em; margin-bottom: var(--sp-4); color: var(--c-blue); }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } .feature-row:nth-child(even) .feature-row__copy { order: 0; } }

/* Stats */
/* auto-fit: 3er- und 4er-Sets verteilen sich gleichmässig, keine leere Spalte */
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-8); }
.stat b { display:block; font-family: var(--f-display); font-size: clamp(38px, 4.2vw, 60px); color: var(--c-blue-700); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
/* Label in --c-g-400 (4,95:1) statt --c-g-300 (2,65:1) – Meta-Text muss den
   AA-Kontrast auf hellem Grund halten. */
.stat span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-g-400); display:block; margin-top: var(--sp-3); }

/* Quote band */
.quote { padding: clamp(80px, 10vw, 144px) 0; background: var(--c-navy-900); color: var(--c-ice); text-align: center; }
.quote blockquote { max-width: 28ch; margin: 0 auto; font-family: var(--f-display); font-weight: 300; font-style: italic; font-size: clamp(24px, 3.2vw, 42px); line-height: 1.2; color: var(--c-white); letter-spacing: -.02em; }
.quote cite { display:block; margin-top: var(--sp-8); font-style: normal; font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--c-gold); text-transform: uppercase; }

/* Timeline (About-Page Zeitstrahl) */
.timeline { list-style: none; padding: 0; margin: 0; max-width: 760px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 1px; background: var(--c-blue-100); }
.timeline__item { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-6); padding: var(--sp-5) 0; position: relative; }
.timeline__item + .timeline__item { border-top: 1px dashed var(--c-blue-100); }
/* Jahreszahl UND Punkt in Blau statt Gold: der Zeitstrahl steht auf
   .section--tint (#E8F0F7). Gold (#FFBA49) kommt dort nur auf 1,47:1 und
   reißt damit auch die 3:1-Schwelle für Grafikelemente; Signature-Blau
   (#005796) erreicht 6,51:1.
   Der weiße Ring bleibt: box-shadow ohne `inset` liegt komplett außerhalb
   der Border-Box, hellt die Punktfläche also nicht auf, und setzt den Punkt
   weiterhin vom Zeitstrahl-Strich (--c-blue-100) ab. */
.timeline__year { font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; color: var(--c-blue); padding-top: 4px; text-align: right; font-weight: 500; }
.timeline__body { padding-left: var(--sp-6); position: relative; }
.timeline__body::before { content: ""; position: absolute; left: -5px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-blue); box-shadow: 0 0 0 3px var(--c-white); }
.timeline__h3 { font-size: 18px; font-weight: 500; color: var(--c-blue); margin: 0 0 var(--sp-2); }
.timeline__text { color: var(--c-text); margin: 0; font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) {
  .timeline::before { left: 28px; }
  .timeline__item { grid-template-columns: 60px 1fr; gap: var(--sp-3); }
  .timeline__year { text-align: left; padding-left: 0; }
  .timeline__body { padding-left: var(--sp-4); }
}

/* Footer */
.site-footer { background: linear-gradient(180deg, var(--c-navy-800), var(--c-navy-900)); color: var(--c-ice); padding: var(--sp-16) 0 var(--sp-8); border-top: 3px solid var(--c-gold); position: relative; overflow: hidden; isolation: isolate; }
.site-footer > .wrap { position: relative; z-index: 1; }
/* Footer-Inhaltsstyles greifen auch im neuen Wasser-Tief-Footer (.section--water--deep) */
.site-footer h5,
.site-footer .footer__h,
.section--water--deep h5,
.section--water--deep .footer__h { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); margin: 1.67em 0 var(--sp-4); font-weight: 500; }
.site-footer ul,
.section--water--deep ul { list-style: none; padding:0; margin:0; display:flex; flex-direction: column; gap: var(--sp-2); }
.site-footer a,
.section--water--deep .site-footer__top a,
.section--water--deep .site-footer__bottom a { color: var(--c-ice); text-decoration: none; }
.site-footer a:hover,
.section--water--deep .site-footer__top a:hover,
.section--water--deep .site-footer__bottom a:hover { color: var(--c-gold); }
.site-footer__top { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-12); }
.site-footer__brand img { height: 32px; filter: brightness(0) invert(1); margin-bottom: var(--sp-4); }
.site-footer__brand p,
.section--water--deep .site-footer__brand p { color: var(--c-ice); opacity:.75; max-width: 34ch; }
.section--water--deep .site-footer__brand img { height: 104px; filter: brightness(0) invert(1); margin-bottom: var(--sp-4); }
/* Social-Block unter dem Logo (BACKLOG #5b). Die Brand-Spalte dimmt <p> generell auf Ice/.75 –
   die Folgen-Überschrift muss deshalb explizit zurück auf den Gold-Kicker. */
.section--water--deep .site-footer__brand .footer__h { color: var(--c-gold); opacity: 1; max-width: none; }
.site-footer__social a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.site-footer__social .icon--social { width: 20px; height: 20px; margin: 0; opacity: 1; flex: none; }
.site-footer__bottom { display:flex; justify-content: space-between; padding-top: var(--sp-6); font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-ice); opacity:.7; text-transform: uppercase; gap: var(--sp-4); flex-wrap:wrap;}
.section--water--deep .site-footer__bottom { color: var(--c-ice); opacity: .7; }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 480px) { .site-footer__top { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* Post · Artikel-Fließtext (Blog-Bodies aus strings/de.php, Wrapper .post)
   Ohne max-width lief die Zeile über die volle .wrap-Breite (~110 Zeichen).
   64ch + 17px/1.7 = komfortable Lesezeile. */
.post { max-width: 64ch; margin-inline: auto; font-size: 17px; line-height: 1.7; color: var(--c-text); }
.post h2 { margin: var(--sp-12) 0 var(--sp-4); }
.post h3 { margin: var(--sp-8) 0 var(--sp-3); }
.post ul, .post ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-4); }
.post li { margin-bottom: var(--sp-2); }
.post blockquote { margin: var(--sp-8) 0; padding-left: var(--sp-6); border-left: 3px solid var(--c-gold); font-family: var(--f-display); font-weight: 300; font-size: 20px; line-height: 1.45; color: var(--c-blue); }
.post figure { margin: var(--sp-8) 0; }
.post figcaption { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-g-400); margin-top: var(--sp-2); }
/* Lede · Anreißer über dem ersten Absatz */
.post__lede { font-size: 20px; line-height: 1.55; color: var(--c-g-700); margin-bottom: var(--sp-6); }
/* Byline · Autor/Credit-Zeile am Fuß des Artikels */
.post__byline { font-size: 14px; color: var(--c-g-400); border-top: 1px solid var(--c-g-200); padding-top: var(--sp-4); }
.post__byline strong { color: var(--c-g-700); font-weight: 500; }
/* Quellenverzeichnis */
.post__sources { font-size: 14px; line-height: 1.6; color: var(--c-g-400); padding-left: var(--sp-5); }
.post__sources li { margin-bottom: var(--sp-2); }
.post__sources a { color: var(--c-blue); overflow-wrap: anywhere; }
/* Eingebettetes Video · darf über die Lesespalte hinausragen */
.post__video { width: min(100%, 860px); margin-inline: auto; }
.post__video iframe, .post__video video { width: 100%; height: 100%; border: 0; display: block; }

/* Post-Card */
.post-card { background: var(--c-white); border: 1px solid var(--c-g-200); border-radius: var(--r-md); overflow: hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition: all .25s var(--ease); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-blue-100); }
.post-card__img { aspect-ratio: 11/4; overflow:hidden; background: var(--c-g-50); }
.post-card__img img { width:100%; height:100%; object-fit: cover; }
.post-card__body { padding: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-3); flex:1; }
.post-card__body h3 { font-size: 22px; font-weight: 500; margin: 0; color: var(--c-blue); }
.post-card__body p { margin: 0; color: var(--c-g-500); font-size: 15px; }
.post-card__foot { margin-top: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-g-400); text-transform: uppercase; }

/* Journal als Content-Hub (2026-09-04) · Card v2 + Typ-Filter.
   Presse/Publikationen haben kein Bild: die »Platte« hält das 11/4-Format der
   Teaser-Bilder und trägt stattdessen den Verlag – das Raster bleibt ruhig. */
.post-card[hidden] { display: none; }
.post-card--static { cursor: default; }
.post-card--static:hover { transform: none; box-shadow: none; border-color: var(--c-g-200); }
.post-card__plate { aspect-ratio: 11/4; background: var(--c-blue-50); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: var(--sp-5) var(--sp-6); }
.post-card__plate b { font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em; color: var(--c-blue); }
.post-card__plate span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-g-500); }
.post-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.post-card__date { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-g-400); }
.hub-filter { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.hub-filter label { position: relative; cursor: pointer; }
.hub-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hub-filter span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c-g-200); background: var(--c-white); color: var(--c-text); font-size: 14px; line-height: 1.2; transition: all .2s var(--ease); }
.hub-filter label:hover span { border-color: var(--c-blue); color: var(--c-blue); }
.hub-filter input:checked + span { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }
.hub-filter input:focus-visible + span { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* ========================================================================
   Splash / Themen-Entry (/)
   ====================================================================== */
.splash-body { height: 100%; margin:0; background: var(--c-navy-800); color: var(--c-white); overflow-x: hidden; perspective: 1400px; }
.splash-body html, .splash-body { height: 100%; }

.splash { position: relative; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 72px); isolation: isolate; transform-style: preserve-3d; }

.splash .brand-row { display:flex; align-items:center; gap: var(--sp-4); z-index:3; }
.splash .brand-row img { height: 34px; filter: brightness(0) invert(1); }
.splash .brand-row .tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-white); opacity:.8; border-left: 1px solid rgba(255,255,255,.25); padding-left: var(--sp-4); }

.splash .center { display:grid; place-items: center; position: relative; z-index: 3; padding: clamp(40px, 8vw, 120px) 0; }
.splash .center__inner { text-align: center; max-width: 1100px; width: 100%; }
.splash .center h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(54px, 9vw, 132px); line-height: .95; letter-spacing: -.035em; color: var(--c-white); margin: 0 0 var(--sp-8); }
.splash .center h1 .line { display:block; }
.splash .center h1 em { font-weight:400; }
.splash .center .lede { font-size: clamp(17px, 1.5vw, 22px); color: var(--c-white); opacity:.9; max-width: 62ch; margin: 0 auto var(--sp-12); line-height: 1.55; }

/* Themen-Entry · 3 Buttons (Monitoring · Fernüberwachung · Lösungen) */
.splash .theme-row { display: inline-flex; align-items: stretch; gap: 8px; border-radius: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); padding: 10px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); }
.splash .theme-row a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 28px; min-width: 200px; font-family: var(--f-sans); color: var(--c-white); text-decoration: none; border-radius: 16px; transition: background .25s var(--ease-flow), transform .25s var(--ease-flow); position: relative; }
.splash .theme-row a .code { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; color: var(--c-gold); text-transform: uppercase; }
.splash .theme-row a .label { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.splash .theme-row a .sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-white); opacity: .55; }
.splash .theme-row a::after { content: "→"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--c-gold); opacity: 0; transition: opacity .25s var(--ease-flow), transform .25s var(--ease-flow); }
.splash .theme-row a:hover { background: rgba(255,255,255,.10); }
.splash .theme-row a:hover::after { opacity: 1; transform: translate(4px, -50%); }
.splash .theme-row a:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

.splash .meta { display:flex; justify-content: space-between; align-items: center; gap: var(--sp-4); font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-white); opacity:.65; z-index:3; flex-wrap: wrap; }
.splash .meta .dot { width:6px; height:6px; background: var(--c-gold); border-radius:50%; display:inline-block; margin-right: 8px; vertical-align: middle; animation: splash-pulse 2.4s ease-in-out infinite; }
@keyframes splash-pulse { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.4); } }

.splash .hl { position: relative; display: inline-block; padding: 0 .12em; z-index: 0; }
.splash .hl::before { content: ""; position: absolute; left: 0; right: 0; top: .08em; bottom: .12em; background: var(--c-gold); z-index: -1; border-radius: 4px; }

/* 3D-Shift · Page-Transition beim Klick auf einen Themen-Button.
   Foreground (Logo, Headline, Buttons, Meta) zoomt in Richtung Viewer und blendet aus,
   Background (Shader-Canvas) wird leicht herangezoomt + unscharf — Eindruck:
   man springt in den Background hinein. */
.splash .brand-row,
.splash .center__inner,
.splash .meta { transition: transform 1.05s cubic-bezier(.55, 0, .15, 1), opacity .9s ease-in; will-change: transform, opacity; }
.splash .shader-bg { transition: transform 1.05s cubic-bezier(.55, 0, .15, 1), filter 1.0s ease-in; will-change: transform, filter; }

.splash.is-exiting .center__inner { transform: translateZ(640px) scale(1.75); opacity: 0; }
.splash.is-exiting .brand-row    { transform: translateZ(240px); opacity: 0; }
.splash.is-exiting .meta         { transform: translateZ(240px); opacity: 0; }
.splash.is-exiting .shader-bg    { transform: scale(1.28); filter: blur(3px) brightness(1.15); }

@media (max-width: 680px) {
  .splash .theme-row { flex-direction: column; border-radius: 20px; padding: 8px; gap: 4px; }
  .splash .theme-row a { min-width: 0; flex-direction: row; align-items: center; gap: var(--sp-3); padding: 14px 18px; border-radius: 14px; }
  .splash .theme-row a .code { min-width: 24px; }
  .splash .theme-row a .sub { margin-left: auto; }
  .splash .theme-row a::after { display: none; }
  .splash .center h1 { font-size: clamp(40px, 12vw, 64px); }
}
@media (prefers-reduced-motion: reduce){
  .splash .meta .dot { animation: none !important; }
  .splash .brand-row,
  .splash .center__inner,
  .splash .meta,
  .splash .shader-bg { transition: none !important; }
}

/* ========================================================================
   v8 · Wasser-Modus + Diagramme (Design-Handoffs · 2026-04-25)
   Alle Tokens leben unter :root. Defaults = Mittag, normale Biosphäre.
   ====================================================================== */

:root {
  --c-sky-top:    #9BC7E4;
  --c-sky-mid:    #4E95C8;
  --c-sky-deep:   #005796;
  --c-sky-floor:  #003E6B;
  --c-glint:      var(--c-gold);
  --glint-alpha:  1;
  --caustic-alpha:1;
  --motion:       1;
  --wave-amp:     1;
  --sway-amp:     1;
  --glint-period: 7s;
  --algae-opacity:1;
  --algae-mid:    1;
  --algae-hi:     1;
  --fish-opacity: 0;
  --c-mud:        #3a3528;
  --c-mud-2:      #2a2a1e;
  --star-alpha:   0;
}

/* ---- Diagramme · Variante A/B/C-Overlays ----------------------------- */
.diagram        { position: relative; margin: 0; width: 100%; max-width: 1160px; margin-inline: auto; color: var(--c-blue); font-family: var(--f-sans); }
.diagram__svg   { display: block; width: 100%; height: auto; }
.diagram__caption { margin-top: var(--sp-3, 12px); font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text); }
.diagram__callout {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--c-white);
  border: 1px solid var(--c-blue-100);
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 1px 2px rgba(10,37,64,.06);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-blue); white-space: nowrap; pointer-events: none;
}
.diagram__callout--right { transform: translate(0, -50%); }
.diagram__callout--left  { transform: translate(-100%, -50%); }
.diagram__callout b {
  font-family: var(--f-display); font-weight: 500;
  text-transform: none; letter-spacing: -.005em;
  color: var(--c-blue); font-size: 13px;
}
.diagram__callout-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); flex: 0 0 6px; }
.diagram__label       { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--c-navy-900); }
.diagram__label--title{ font-family: var(--f-display); font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-transform: none; fill: var(--c-blue); }

/* ---- Section-Typen · Wasser-Modus ----------------------------------- */
/* overflow-x:clip statt overflow:hidden — `hidden` macht die Section zum
   Scrollport und setzt damit jedes `position:sticky` darin außer Kraft
   (Filter-Sidebar auf /loesungen/). `clip` klemmt die Fisch-/Wellen-Animationen
   genauso ab, erzeugt aber keinen Scrollport. Gleiches Muster: footer.php. */
.section--water,
.section--water--deep,
.section--water--mid {
  position: relative; overflow-x: clip; overflow-y: visible; isolation: isolate;
  transition: background .8s ease;
}
.section--water         { background: var(--c-sky-floor); color: var(--c-ice); padding-top: 96px; }
.section--water--deep   { background: linear-gradient(180deg, var(--c-sky-floor) 0%, var(--c-navy-900) 100%); color: var(--c-ice); padding-top: 96px; padding-bottom: 220px; }
.section--water--mid    { background: linear-gradient(180deg, var(--c-sky-floor) 0%, var(--c-sky-deep) 55%, var(--c-sky-floor) 100%); color: var(--c-ice); padding-block: var(--sp-16); }
.section--water h2,
.section--water--deep h2,
.section--water--mid h2 { color: var(--c-white); }
.section--water p,
.section--water--deep p,
.section--water--mid p  { color: var(--c-ice); opacity: .9; }

/* Folge-Sektionen unterdrücken die Oberfläche automatisch */
.section--water + .section--water > .water-surface,
.section--water + .section--water--deep > .water-surface,
.section--water--mid + .section--water > .water-surface,
.section--water--mid + .section--water--deep > .water-surface,
.section--water--deep + .section--water > .water-surface,
.section--water--continued > .water-surface { display: none; }
.section--water + .section--water,
.section--water + .section--water--deep,
.section--water--mid + .section--water,
.section--water--mid + .section--water--deep,
.section--water--deep + .section--water,
.section--water--continued.section--water,
.section--water--continued.section--water--deep { padding-top: var(--sp-16); }

/* ---- Wasseroberfläche (in Section-Types) ---------------------------- */
.water-surface {
  --x: 0;
  position: absolute; top: 0; left: 0; right: 0;
  height: 96px; z-index: 1;
  pointer-events: none; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg,
    var(--c-sky-top)   0%,
    var(--c-sky-mid)  18%,
    var(--c-sky-deep) 50%,
    var(--c-sky-floor) 85%,
    transparent       100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
  transition: background .8s ease;
}
.water-surface::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50px;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 75% 40%, rgba(232,240,247,.25), transparent 60%);
  mix-blend-mode: screen; opacity: var(--caustic-alpha);
  animation: ws-shimmer calc(14s / var(--motion)) ease-in-out infinite;
}
@keyframes ws-shimmer {
  0%,100% { transform: translate3d(0,0,0); opacity: calc(var(--caustic-alpha) * 0.7); }
  50%     { transform: translate3d(3%,0,0); opacity: var(--caustic-alpha); }
}
.water-surface__wave { position: absolute; left: 0; right: 0; width: 200%; height: 100%; }
.water-surface__wave svg { width: 100%; height: 100%; display: block; fill: none; stroke-linecap: round; }
.water-surface__wave--back  { top: 16px; height: 14px; opacity: .55; animation: ws-drift-back  calc(26s / var(--motion)) linear infinite; will-change: transform; }
.water-surface__wave--front { top: 30px; height: 14px; opacity: .85; animation: ws-drift-front calc(16s / var(--motion)) linear infinite; will-change: transform; }
.water-surface__wave--back  svg path { stroke: rgba(232,240,247,.6); stroke-width: 1.3; }
.water-surface__wave--front svg path { stroke: rgba(255,255,255,.85); stroke-width: 1.5; }
.water-surface__wave--back  svg,
.water-surface__wave--front svg { transform: scaleY(var(--wave-amp)); }
@keyframes ws-drift-back  { from { transform: translate3d(calc(var(--x) *  6px), 0, 0); } to { transform: translate3d(calc(var(--x) *  6px - 50%), 0, 0); } }
@keyframes ws-drift-front { from { transform: translate3d(calc(var(--x) * 14px - 50%), 0, 0); } to { transform: translate3d(calc(var(--x) * 14px), 0, 0); } }

.water-surface__glint {
  position: absolute; top: 26px; width: 3px; height: 3px;
  border-radius: 50%; background: var(--c-glint);
  box-shadow: 0 0 5px var(--c-glint); opacity: var(--glint-alpha);
  transform: translate(-50%,-50%) scale(0);
  animation: ws-glint var(--glint-period) ease-in-out infinite;
}
.water-surface__glint--1 { left: 18%; animation-delay: 0s; }
.water-surface__glint--2 { left: 54%; animation-delay: calc(var(--glint-period) * -0.33); }
.water-surface__glint--3 { left: 82%; animation-delay: calc(var(--glint-period) * -0.67); }
@keyframes ws-glint {
  0%, 35%, 100% { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  42%           { transform: translate(-50%,-50%) scale(1);   opacity: var(--glint-alpha); }
  55%           { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
}

/* ---- Seeboden + Algen (im Footer und in --water--deep) -------------- */
.site-footer .seabed { z-index: 0; }
.seabed {
  position: absolute; inset: auto 0 0 0; height: 220px;
  z-index: 1; pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
.seabed__algae { position: absolute; bottom: 0; transform-origin: 50% 100%; will-change: transform; opacity: var(--algae-opacity); }
.seabed__algae svg { display: block; height: 100%; width: auto; overflow: visible; }
@keyframes sway-1 { 0%,100% { transform: rotate(calc(-4deg * var(--sway-amp))) skewX(calc(-2deg * var(--sway-amp))); } 50% { transform: rotate(calc(5deg * var(--sway-amp)))  skewX(calc(3deg  * var(--sway-amp))); } }
@keyframes sway-2 { 0%,100% { transform: rotate(calc(6deg  * var(--sway-amp))) skewX(calc(2deg  * var(--sway-amp))); } 50% { transform: rotate(calc(-3deg * var(--sway-amp))) skewX(calc(-2deg * var(--sway-amp))); } }
@keyframes sway-3 { 0%,100% { transform: rotate(calc(-2deg * var(--sway-amp))) skewX(calc(-1deg * var(--sway-amp))); } 50% { transform: rotate(calc(3deg  * var(--sway-amp))) skewX(calc(2deg  * var(--sway-amp))); } }
.seabed__algae--a { left:  4%; height: 110px; color: rgba(14,60,66,  .65); animation: sway-1 calc(11s / var(--motion)) ease-in-out infinite; }
.seabed__algae--b { left: 14%; height:  88px; color: rgba(18,72,78,  .55); animation: sway-2 calc(13s / var(--motion)) ease-in-out infinite; animation-delay: -2s; }
.seabed__algae--c { left: 26%; height: 150px; color: rgba(40,96,82,  .52); animation: sway-3 calc( 9s / var(--motion)) ease-in-out infinite; animation-delay: -4s; }
.seabed__algae--d { left: 42%; height:  96px; color: rgba(52,102,82, .48); animation: sway-1 calc(14s / var(--motion)) ease-in-out infinite; animation-delay: -1s; }
.seabed__algae--e { left: 55%; height: 170px; color: rgba(26,84,80,  .55); animation: sway-2 calc(10s / var(--motion)) ease-in-out infinite; animation-delay: -3s; }
.seabed__algae--f { left: 70%; height: 120px; color: rgba(64,120,98, .42); animation: sway-3 calc(12s / var(--motion)) ease-in-out infinite; animation-delay: -5s; }
.seabed__algae--g { left: 82%; height:  82px; color: rgba(22,76,76,  .50); animation: sway-1 calc( 9s / var(--motion)) ease-in-out infinite; animation-delay: -2s; }
.seabed__algae--h { left: 92%; height: 135px; color: rgba(80,136,108,.40); animation: sway-2 calc(12s / var(--motion)) ease-in-out infinite; animation-delay: -6s; }
.seabed__algae--b, .seabed__algae--d, .seabed__algae--g { opacity: var(--algae-mid); }
.seabed__algae--f, .seabed__algae--h                    { opacity: var(--algae-hi); }

/* ---- Datenbits-Layer (.section--water--mid) ------------------------- */
/* z-index: -1 → dekorative Bits bleiben HINTER Content, Fischen, Wellen, Boot.
   Funktioniert nur, weil .section--water* `isolation: isolate` hat (eigener
   Stacking Context) — sonst würde -1 hinter den Seiten-Hintergrund verschwinden.
   Informative Bits (.knowledge-callouts) liegen weiterhin auf z:2 vorne. */
.databits-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Canvas absolut positioniert mit inset:0 — umgeht den klassischen
   "percentage-height needs explicit parent height"-Bug, der bei Defer-loaded
   Canvas-Init zu 0×0 measurement führt. */
.databits-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- Fische ---------------------------------------------------------- */
.fish { position: absolute; pointer-events: none; opacity: var(--fish-opacity, 0); transition: opacity .8s ease; will-change: transform; }
.fish svg { display: block; width: 100%; height: 100%; }
.fish--school-1 { top: 45%; left: -10%; width: 120px; height: 40px; animation: fish-swim-1 calc(22s / var(--motion)) linear infinite; }
.fish--school-2 { top: 62%; left: -10%; width:  80px; height: 28px; animation: fish-swim-2 calc(28s / var(--motion)) linear infinite; animation-delay: -8s; }
.fish--school-3 { top: 72%; left: -10%; width:  60px; height: 20px; animation: fish-swim-3 calc(18s / var(--motion)) linear infinite; animation-delay: -14s; }
/* Fish-SVGs zeigen nach links (Kopf links, Flosse rechts).
   Daher: nach rechts schwimmen → scaleX(-1) (Flip). Nach links → scaleX(1). */
@keyframes fish-swim-1 { 0% { transform: translate(0,0) scaleX(-1); } 48% { transform: translate(60vw,-12px) scaleX(-1); } 50% { transform: translate(60vw,-12px) scaleX(1); } 98% { transform: translate(0vw,8px) scaleX(1); } 100% { transform: translate(0,0) scaleX(-1); } }
@keyframes fish-swim-2 { from { transform: translate(0,0) scaleX(-1); } to { transform: translate(120vw,20px) scaleX(-1); } }
@keyframes fish-swim-3 { from { transform: translate(120vw,0) scaleX(1); } to { transform: translate(-10vw,-16px) scaleX(1); } }

/* ---- Page-Header · Wrapper für Trockene-Zone-Lead + Wasser-Zone Navy -
   Sitzt zwischen <header class="site-header"> und der Hauptsektion.
   Kapselt: weiße „Himmel"-Zone (mit Satellit) → Wasser-Zone (mit Boot).
   Downlink-Linie und Satellit anchor auf den Wrapper, sodass sie über
   die Sektionsgrenze hinweg funktionieren. */
.page-header {
  position: relative;
  isolation: isolate;
}

/* ---- Satellit · always-on-top, fliegt am oberen Bildschirmrand quer durch
   alle Sektionen inkl. Sticky-Header. Position: fixed = haftet am Viewport. */
.satellite {
  position: fixed;
  top: 8px;
  left: 0;
  width: 64px; height: 42px;
  z-index: 100;           /* über allem — Sticky-Header, Section-Badges, Content */
  pointer-events: none;
  opacity: .9;
  animation: sat-orbit calc(80s / var(--motion, 1)) linear infinite;
  will-change: transform;
}
.satellite svg { width: 100%; height: 100%; display: block; }
@keyframes sat-orbit {
  0%   { transform: translateX(-80px) rotate(-2deg); }
  50%  { transform: translateX(50vw) rotate(2deg); }
  100% { transform: translateX(calc(100vw + 80px)) rotate(-2deg); }
}
.satellite::after { content:""; position: absolute; top: 22px; left: 30px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-gold); opacity: 0; animation: sat-ping 3s ease-out infinite; }
@keyframes sat-ping { 0% { transform: scale(.3); opacity: 0; } 10% { opacity: .8; } 70% { transform: scale(4); opacity: 0; } 100% { opacity: 0; } }

/* WAMO ist per Anker fixiert — Boot bleibt ortsfest. Nur sanftes Wellen-Wanken (bob), keine Querfahrt. */
.wamo-boat { position: absolute; bottom: -18px; left: var(--wamo-boat-x, 8%); width: 180px; height: 108px; z-index: 3; pointer-events: none; animation: wamo-bob calc(3.2s / var(--motion)) ease-in-out infinite; will-change: transform; }
.wamo-boat svg,
.wamo-boat img { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes wamo-bob    { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }

.downlink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.downlink line { stroke: var(--c-gold); stroke-width: 1.2; stroke-dasharray: 2 5; opacity: .7; animation: downlink-pulse 2s linear infinite; }
@keyframes downlink-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -14; } }

/* ---- Databit-Stream Satellit ↔ WAMO --------------------------------- *
   Container deckt den Viewport ab (fixed), Bits sind goldene Punkte,
   Position via JS-Transform. Z-Index 95 = über Header (60), unter Satellit (100). */
.downlink-bits {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 95;
}
.downlink-bits__bit {
  position: absolute; top: 0; left: 0;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 6px rgba(255,200,1,.95), 0 0 14px rgba(255,200,1,.55);
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(-100px,-100px);
}
@media (prefers-reduced-motion: reduce) {
  .downlink-bits { display: none; }
}

/* ---- Mudbed (Boden von --water--deep) ------------------------------- */
.mudbed {
  position: absolute; inset: auto 0 0 0; height: 14px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 100%),
    repeating-linear-gradient(90deg,
      var(--c-mud) 0 7px,
      var(--c-mud-2) 7px 13px,
      var(--c-mud) 13px 18px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
}
.mudbed::before {
  content: ""; position: absolute; inset: -4px 0 auto 0; height: 6px;
  background:
    radial-gradient(circle at 8% 80%,  var(--c-mud-2) 2px, transparent 3px),
    radial-gradient(circle at 22% 60%, var(--c-mud) 1.5px, transparent 2.5px),
    radial-gradient(circle at 37% 80%, var(--c-mud-2) 2.5px, transparent 3.5px),
    radial-gradient(circle at 55% 70%, var(--c-mud) 1.8px, transparent 2.8px),
    radial-gradient(circle at 71% 80%, var(--c-mud-2) 2px, transparent 3px),
    radial-gradient(circle at 86% 65%, var(--c-mud) 2.2px, transparent 3.2px);
}

/* ---- Sterne (Nacht-Mode, vorerst inaktiv) ---------------------------- */
.space-stars { position: absolute; inset: 0 0 auto 0; height: 24px; z-index: 1; pointer-events: none; opacity: var(--star-alpha); transition: opacity .8s ease; }
.space-stars span { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; box-shadow: 0 0 3px #fff; animation: star-twinkle 4s ease-in-out infinite; }
@keyframes star-twinkle { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ---- Shader-Splash (Task 3) ----------------------------------------- */
.shader-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--c-navy-900); }
.shader-bg canvas { display: block; width: 100%; height: 100%; }
.shader-bg--fallback { display: none; }
.no-webgl .shader-bg--fallback { display: block; position: absolute; inset: 0; }
.no-webgl .shader-bg canvas { display: none; }
.flow-bg-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(78,126,184,.55), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(0,87,150,.75), transparent 60%),
    linear-gradient(180deg, var(--c-blue) 0%, var(--c-navy-900) 100%);
}

/* ---- Mobile / Reduced-Motion ---------------------------------------- */
@media (max-width: 720px) {
  .water-surface { height: 72px; }
  .water-surface::before { height: 38px; }
  .water-surface__wave--back  { top: 12px; }
  .water-surface__wave--front { top: 22px; }
  .water-surface__glint { top: 18px; }
  .seabed { height: 160px; }
  .seabed__algae--b, .seabed__algae--d, .seabed__algae--g { display: none; }
}
@media (hover: none), (pointer: coarse) { .water-surface { --x: 0; } }
@media (prefers-reduced-motion: reduce) {
  .water-surface::before,
  .water-surface__wave--back,
  .water-surface__wave--front,
  .water-surface__glint,
  .seabed__algae,
  .fish,
  .satellite,
  .satellite::after,
  .wamo-boat,
  .downlink line,
  .space-stars span { animation: none !important; }
}

/* ---- Mid-Water-Spezifika · Fische (Durchzugsgebiet) ----------------- */
.section--water--mid .mid-fish {
  position: absolute; width: 50px; height: 18px; opacity: .6;
  pointer-events: none;
  animation: mid-fish-swim 28s linear infinite; will-change: transform;
}
.section--water--mid .mid-fish svg { width: 100%; height: 100%; display: block; }
.section--water--mid .mid-fish--a { top: 30%; animation-delay: 0s; }
.section--water--mid .mid-fish--b { top: 55%; animation-delay: -9s; animation-duration: 36s; }
.section--water--mid .mid-fish--c { top: 70%; animation-delay: -18s; animation-duration: 22s; }
/* Fish zeigt nach links → bei nach-rechts-Bewegung scaleX(-1) flippen, bei Rückweg scaleX(1) */
@keyframes mid-fish-swim {
  0%   { transform: translate(-60px, 0) scaleX(-1); }
  49%  { transform: translate(50vw, -10px) scaleX(-1); }
  50%  { transform: translate(50vw, -10px) scaleX(1); }
  99%  { transform: translate(-60px, 6px) scaleX(1); }
  100% { transform: translate(-60px, 0) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  .section--water--mid .mid-fish { animation: none !important; }
}

/* ---- Section-Badge · hängende Auszeichnungs-Plakette ---------------- */
.section-badge {
  position: absolute;
  top: -56px;            /* deutlicher Überlapp in die Section darüber */
  right: clamp(32px, 7vw, 120px);
  width: clamp(160px, 16vw, 240px);
  height: auto;
  aspect-ratio: 800 / 450;  /* matches wide PNG */
  z-index: 30;           /* über Content, unter dem Satelliten (z-100) */
  display: block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
  animation: badge-sway 6s ease-in-out infinite;
  transform-origin: 50% -22px;
  transition: transform .25s var(--ease);
}
.section-badge:hover { animation-play-state: paused; transform: rotate(0) scale(1.04); }
.section-badge::before {
  /* dünne Aufhänge-Linie nach oben */
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  width: 1px;
  height: 22px;
  background: rgba(255, 200, 1, .55);
  transform: translateX(-50%);
}
.section-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@keyframes badge-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .section-badge { animation: none; transform: rotate(0); }
}
@media (max-width: 720px) {
  .section-badge { width: clamp(120px, 30vw, 160px); top: -42px; }
}
/* Linksvariante */
.section-badge--left { right: auto; left: clamp(32px, 7vw, 120px); }
/* Mittig-Variante */
.section-badge--center { right: auto; left: 50%; transform: translateX(-50%); transform-origin: 50% -22px; }
.section-badge--center:hover { transform: translateX(-50%) scale(1.04); }
/* Hero-Variante · sitzt unter dem sticky Site-Header im .page-header,
   ohne Aufhänge-Linie (nichts visuell darüber zum Andocken). */
.section-badge--in-hero {
  top: clamp(96px, 12vh, 132px);
  right: clamp(20px, 4vw, 56px);
  width: clamp(192px, 19vw, 272px);
  z-index: 5;
  filter: drop-shadow(0 6px 18px rgba(6, 26, 46, .35));
}
.section-badge--in-hero::before { display: none; }
@media (max-width: 720px) {
  .section-badge--in-hero { top: 84px; right: 16px; width: clamp(140px, 38vw, 200px); }
}

/* ---- Vision-Slide · Claim unten rechts im Homepage-Hero (Entscheidung 2026-07-22).
   Text linksbündig, Panel rechts; slidet nach Load von rechts ein. Prominent,
   aber unterhalb der H1-Skala (Heading-Regel: lesefreundlich statt Bühne).
   Unter 900px ausgeblendet, damit er nicht mit den Hero-CTAs kollidiert. */
.hero-vision {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(32px, 7vh, 72px);
  z-index: 5;
  max-width: min(560px, 46vw);
  padding: var(--sp-5) var(--sp-7);
  border-left: 3px solid var(--c-gold);
  background: rgba(6, 26, 46, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(6, 26, 46, .30);
  opacity: 0;
  transform: translateX(40px);
  animation: hero-vision-in .8s cubic-bezier(.22, .8, .32, 1) 1s forwards;
}
.hero-vision__kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.hero-vision__claim {
  margin: 0;
  color: var(--c-white);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 2px 18px rgba(6, 26, 46, .55);
}
.hero-vision__claim em {
  font-style: normal;
  color: var(--c-ice);
  opacity: .92;
}
.hero-vision__cta { margin-top: var(--sp-5); }
@keyframes hero-vision-in {
  to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .hero-vision { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-vision { animation: none; opacity: 1; transform: none; }
}

/* ---- "Sky"-Variante des Wasser-Modus · viel weißer Himmel oben -------
   Opt-in via zusätzlicher Klasse `.section--water--sky` (z.B. Solutions-Hero).
   Wasseroberfläche wird zur Sky-Zone hochgezogen, Wellen wandern nach unten,
   Section-Padding wächst, damit der Hero-Text sicher in der dunklen Wasser-
   Zone unter der Oberfläche landet. */
.section--water--sky { padding-top: clamp(280px, 36vh, 380px); }
.section--water--sky > .water-surface {
  height: clamp(220px, 30vh, 320px);
  background: linear-gradient(180deg,
    #FFFFFF            0%,
    #FFFFFF           62%,
    var(--c-sky-top)  84%,
    var(--c-sky-floor) 100%);
  box-shadow: none;
}
/* Radiale Highlight-Ellipsen oben deaktivieren (würden auf Weiß als Grau-Schimmer wirken). */
.section--water--sky > .water-surface::before { display: none; }
.section--water--sky > .water-surface .water-surface__wave--back  { top: auto; bottom: 32px; }
.section--water--sky > .water-surface .water-surface__wave--front { top: auto; bottom: 16px; }
.section--water--sky > .water-surface .water-surface__glint       { top: auto; bottom: 24px; }

/* ---- Hub-Hero · kanonischer Seitenkopf (Entscheidung 2026-08-07) -------------
   Ein Aufbau für das ganze erste Level und die Detailseiten darunter.
   Löst die früheren flachen `section--navy`-Header mit zentriertem Text ab:
   eine farbige Hero-Fläche trägt immer Bewegung — Wasseroberfläche,
   Datenbits und Lichtschächte — und der Inhalt steht durchgehend links.
   Markup: includes/_page-hero.php */
.hero--hub {
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-h, min(58vh, 520px));
  padding-top: 0;
  padding-bottom: 0;
  /* Tiefenverlauf statt Einheitsblau: Oberflächennähe → Grund */
  background: linear-gradient(180deg,
    var(--c-sky-floor)   0%,
    #00456F             52%,
    var(--c-navy-900)  100%);
}
/* Sky-Variante bringt ihr eigenes Padding mit (weisser Himmel oben). */
.hero--hub.section--water--sky { padding-top: clamp(280px, 36vh, 380px); }

/* Lichtschächte · z-index -2 hält sie HINTER den Datenbits (-1), damit die
   Messwerte scharf bleiben. Trägt, weil .section--water isolation:isolate
   setzt und damit einen eigenen Stacking Context aufmacht. */
.hero--hub::before {
  content: "";
  position: absolute; inset: 0 -18%;
  z-index: -2; pointer-events: none;
  background:
    linear-gradient(101deg, transparent 30%, rgba(255,255,255,.075) 35%, rgba(255,255,255,.02)  42%, transparent 46%),
    linear-gradient( 96deg, transparent 54%, rgba(255,255,255,.055) 59%, rgba(255,255,255,.015) 66%, transparent 70%),
    linear-gradient(108deg, transparent 74%, rgba(255,255,255,.05)  79%, transparent 86%);
  animation: hub-shafts calc(26s / var(--motion)) ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes hub-shafts {
  from { transform: translateX(-1.5%) skewX(.6deg);  opacity: .6; }
  to   { transform: translateX(2%)    skewX(-.8deg); opacity: 1; }
}
/* Grund-Vignette · nimmt der Fläche unten die Härte */
.hero--hub::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 42%;
  z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0,32,52,.5) 100%);
}
/* Content über Wellen (1) und Boot (3) */
.hero--hub .hero__inner { position: relative; z-index: 4; }
/* Ohne Meta-Spalte (nur Eyebrow + H1) läuft der Kopf einspaltig links */
.hero--hub--solo .hero__inner { grid-template-columns: 1fr; }
.hero--hub--solo .hero__title { max-width: 20ch; }
/* Gold-Mono-Subline direkt unter der H1 (Produkt-/Projekt-Detailseiten) */
.hero--hub .hero__subtitle {
  margin: var(--sp-4) 0 0;
  font-family: var(--f-mono);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6;
  color: var(--c-gold); opacity: 1; max-width: 62ch;
}
/* Zusatz-Fliesstext unter der Lede (Hubs mit längerem Vorspann) */
.hero--hub .hero__intro {
  margin: var(--sp-5) 0 0;
  font-size: 15.5px; line-height: 1.7;
  color: var(--c-ice); opacity: .72;
}
/* Merksatz an der Gold-Hairline (z.B. Monitoring/MRV) */
.hero--hub .hero__claim {
  margin: var(--sp-6) 0 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--c-gold);
  font-size: 18px; line-height: 1.5; max-width: 46ch;
  color: var(--c-white); opacity: 1;
}
@media (max-width: 900px) {
  .hero--hub { min-height: 0; }
  .hero--hub.section--water--sky { padding-top: clamp(200px, 28vh, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--hub::before { animation: none; opacity: .8; }
}

/* ---- Hero-Badges-Cluster · zwei Plaketten gestapelt oben rechts ----- */
.hero-badges {
  position: absolute;
  top: clamp(96px, 12vh, 132px);
  right: clamp(20px, 4vw, 56px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(16px, 2vw, 32px);
}
.hero-badges__item {
  display: block;
  width: clamp(192px, 20vw, 288px);
  transition: transform .25s var(--ease);
}
.hero-badges__item:hover { transform: scale(1.05); }
.hero-badges__item img { width: 100%; height: auto; display: block; object-fit: contain; }
@media (max-width: 720px) {
  .hero-badges { top: 84px; right: 16px; gap: 12px; }
  .hero-badges__item { width: clamp(140px, 38vw, 200px); }
}

/* ---- Knowledge-Callouts · interaktive Messwert-Erklärungen ---------- */
.knowledge-callouts {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* Knowledge-Callouts sehen aus wie Canvas-Databits — nur klickbar, Schrift voll
   Gold, und das Quadrat blinkt blau↔gold mit Radar-Ring beim Blau-Switch.
   Drift langsam (canvas-tempo), nicht-linear, von links nach rechts. */
.knowledge-callout {
  position: absolute;
  top: var(--y, 50%);
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--c-gold);
  background: transparent;
  border: 0;
  padding: 10px 14px;     /* großzügiger Hit-Bereich, ohne sichtbares Pill */
  margin: -10px -14px;    /* visuell wieder einrasten */
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
  animation: callout-drift var(--duration, 240s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transition: color .2s ease, text-shadow .2s ease, scale .2s ease;
  will-change: transform;
}
/* Databit-Quadrat — blinkt gold↔blau (Canvas-Pixel-Größe) */
.knowledge-callout::before {
  content: "";
  display: inline-block;
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  background: var(--c-gold);
  animation: callout-blink 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
/* Radar-Welle — synchron mit dem Grün-Switch des Quadrats */
.knowledge-callout::after {
  content: "";
  position: absolute;
  left: 16px;         /* Quadrat-Mitte: padding-left 14 + width/2 = 16 */
  top: 50%;
  width: 10px; height: 10px;
  border: 2px solid var(--c-green);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: callout-radar 3s ease-out infinite;
  animation-delay: var(--delay, 0s);
}
.knowledge-callout:hover,
.knowledge-callout:focus-visible,
.knowledge-callout.is-open {
  /* Kein scale/transform — würde die Box bewegen und Hover wegspringen lassen.
     Visuelles Feedback rein über Farbe, Glow, und das pulsierende Quadrat. */
  color: #FFE58A;
  text-shadow: 0 0 14px rgba(255, 200, 1, .65);
  outline: none;
  animation-play-state: paused;
  z-index: 11;
}
.knowledge-callout:hover::before,
.knowledge-callout:focus-visible::before,
.knowledge-callout.is-open::before {
  animation-play-state: paused;
  background: var(--c-gold);
  box-shadow: 0 0 8px rgba(255, 200, 1, .9);
}
/* Drift links → rechts, langsam und nicht-linear */
@keyframes callout-drift {
  0%   { transform: translate(-220px, 0); }
  12%  { transform: translate(8vw, -4px); }
  25%  { transform: translate(22vw, 2px); }
  38%  { transform: translate(36vw, -3px); }
  50%  { transform: translate(50vw, 4px); }
  62%  { transform: translate(64vw, -2px); }
  75%  { transform: translate(78vw, 3px); }
  88%  { transform: translate(92vw, -3px); }
  100% { transform: translate(calc(100vw + 100px), 0); }
}
@keyframes callout-blink {
  0%, 45%, 100% { background: var(--c-gold); }
  50%, 95%      { background: var(--c-green); }
}
/* Radar-Welle aus dem Quadrat — synchron mit dem Blau-Switch */
@keyframes callout-radar {
  0%, 45% { width: 10px; height: 10px; opacity: 0; }
  50%     { width: 10px; height: 10px; opacity: 1; }
  72%     { width: 38px; height: 38px; opacity: 0; }
  100%    { opacity: 0; }
}
/* Source-Tooltip — nur Daten-Träger, visuell verborgen.
   Der sichtbare Tooltip wird via JS in einen Body-Portal gerendert,
   damit er section overflow:hidden überschreibt. */
.knowledge-callout__tip {
  position: absolute;
  visibility: hidden;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Portal-Tooltip · sitzt auf Body-Level, always-on-top */
.knowledge-tip-portal {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: var(--c-white);
  color: var(--c-text);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.45);
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .2s ease, transform .2s ease;
}
.knowledge-tip-portal.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.knowledge-tip-portal strong {
  display: block;
  font-family: var(--f-display);
  color: var(--c-blue);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-callout { animation: none !important; }
}
@media (max-width: 640px) {
  .knowledge-callout { font-size: 10px; padding: 4px 9px; }
  .knowledge-callout__tip { width: 240px; max-width: calc(100vw - 32px); }
}

/* ==========================================================================
   Solutions-Katalog (Filter-Sidebar + Maßnahmen-Cards)
   Vorher als inline <style>-Block in solutions.html — jetzt zentral, damit das
   PHP-Template ohne Page-spezifisches CSS auskommt.
   ========================================================================== */
.catalog-shell    { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-10); margin-top: var(--sp-10); align-items: start; }
.catalog-filters  { position: sticky; top: 96px; background: var(--c-white); border: 1px solid var(--c-g-200); border-radius: var(--r-md); padding: var(--sp-6); }
.catalog-filters h3,
.catalog-filters h2 { margin: 0 0 var(--sp-5); font-size: 18px; font-weight: 500; color: var(--c-blue); }
.catalog-filters .filter-group { margin-bottom: var(--sp-6); }
.catalog-filters .filter-group .kicker { margin-bottom: var(--sp-3); }
.catalog-filters label { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 14px; color: var(--c-text); cursor: pointer; line-height: 1.3; }
.catalog-filters label:hover { color: var(--c-blue); }
.catalog-filters input[type="checkbox"],
.catalog-filters input[type="radio"] { accent-color: var(--c-blue); width: 16px; height: 16px; flex: none; }
/* Kostenhinweis ueber dem Raster – ersetzt die frueheren Preisspannen auf den Karten. */
.catalog-note     { margin: var(--sp-3) 0 0; max-width: 62ch; font-size: 14px; line-height: 1.6; color: var(--c-g-500); }
#reset-filters { font-size: 12px; font-family: var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 0; margin-top: var(--sp-2); background: none; border: 0; color: var(--c-blue); cursor: pointer; }
#reset-filters:hover { color: var(--c-gold); }

#result-count { margin-bottom: var(--sp-5); color: var(--c-ice); opacity: .85; }

.m-card        { background: var(--c-white); border: 1px solid var(--c-g-200); border-top: 3px solid var(--c-gold); border-radius: var(--r-md); padding: var(--sp-6); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.m-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-blue-100); border-top-color: var(--c-blue); }
.m-card__num   { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--c-g-500); text-transform: uppercase; }
.m-card__icon  { width: 48px; height: 48px; margin: var(--sp-3) 0 var(--sp-4); opacity: .9; }
.m-card h3     { font-family: var(--f-display); font-size: 20px; font-weight: 500; margin: 0 0 var(--sp-4); color: var(--c-blue); line-height: 1.25; }
.m-card__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.m-card__pill  { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.m-card__pill--high   { background: var(--c-blue);     color: var(--c-white); }
.m-card__pill--medium { background: var(--c-blue-100); color: var(--c-blue); border-color: var(--c-blue-100); }
.m-card__pill--low    { background: var(--c-blue-50);  color: var(--c-blue); border-color: var(--c-blue-50); }
.m-card__pill--none   { background: var(--c-g-100);    color: var(--c-g-500);    border-color: var(--c-g-200); }
.m-card__pill--note   { background: var(--c-gold);     color: var(--c-ink); }
.m-card__meta     { margin-top: auto; padding-top: var(--sp-4); border-top: 1px dashed var(--c-g-200); font-size: 13px; color: var(--c-g-500); }
.m-card__timeline { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue); }
.m-card__timeline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); }
.m-card__timeline[data-tl="quick"]::before  { background: #8EC728; }
.m-card__timeline[data-tl="stable"]::before { background: var(--c-gold); }
.m-card__timeline[data-tl="long"]::before   { background: var(--c-blue); }
/* Deep-Link auf eine Vertiefungsseite; nur wenige Massnahmen haben eine. */
.m-card__link     { margin-top: var(--sp-4); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.m-card__link:hover { color: var(--c-gold); }
.m-card__link .arrow { transition: transform .2s var(--ease); }
.m-card__link:hover .arrow { transform: translateX(3px); }

#measures-grid          { gap: var(--sp-5); }
#measures-grid .empty   { grid-column: 1 / -1; text-align: center; padding: var(--sp-16) var(--sp-6); background: var(--c-white); border: 1px dashed var(--c-g-200); border-radius: var(--r-md); color: var(--c-g-500); }
#measures-grid .empty h3 { color: var(--c-blue); margin-bottom: var(--sp-3); }

@media (max-width: 960px) {
  .catalog-shell { grid-template-columns: 1fr; }
  .catalog-filters { position: static; }
  #measures-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #measures-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Glossar · /{lang}/glossar/
   PHP-rendered Term-Cards (kein JS für Render — nur Filter via data-cat).
   Nutzt die catalog-shell von Solutions wieder (Sidebar-Layout teilen).
   ========================================================================== */

/* A–Z-Quicknav · sticky unter dem Hero, scrollt zu Letter-Headers.
   top muss unter dem Sticky-Header liegen (--header-h), sonst verschwindet
   die Leiste dauerhaft dahinter. */
.glossar-az {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 5;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-g-200);
  padding-block: var(--sp-4);
}
.glossar-az__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.glossar-az__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: var(--r-sm, 4px);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.glossar-az__letter--on {
  color: var(--c-blue);
  background: var(--c-blue-50, rgba(0, 87, 150, .06));
}
.glossar-az__letter--on:hover {
  background: var(--c-blue);
  color: var(--c-white);
}
.glossar-az__letter--off {
  color: var(--c-g-300, #cbd1d4);
  background: transparent;
  cursor: default;
}

/* Term-Liste · single column, generösse Lese-Breite */
.glossar-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 760px;
}
.glossar-letter {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 500;
  color: var(--c-blue);
  margin: var(--sp-12) 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-gold);
  scroll-margin-top: 140px;
}
.glossar-letter:first-child { margin-top: var(--sp-3); }

/* Term-Card · Text-only, kein Bild
   Goldakzent oben (konsistent mit .m-card auf Solutions). Borders rundum
   einheitlich, damit die Card als eine Fläche wirkt — nicht als asymmetrisch
   eingerahmtes Tab. */
.glossar-card {
  background: var(--c-white);
  border: 1px solid var(--c-g-200);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--r-md);
  padding: var(--sp-10) var(--sp-12);
  scroll-margin-top: 140px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.glossar-card:hover {
  border-color: var(--c-blue-100);
  border-top-color: var(--c-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.glossar-card:target {
  border-top-color: var(--c-blue);
  background: var(--c-blue-50, rgba(0, 87, 150, .04));
}
.glossar-card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "term cat"
    "kurz cat";
  gap: 6px var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-5);
}
.glossar-card__term {
  grid-area: term;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--c-blue);
  margin: 0;
  line-height: 1.2;
}
.glossar-card__anchor {
  color: inherit;
  text-decoration: none;
}
.glossar-card__anchor:hover {
  color: var(--c-blue);
}
.glossar-card__kurz {
  grid-area: kurz;
  margin: 0;
  font-size: 14px;
  color: var(--c-g-500);
  font-style: italic;
  line-height: 1.5;
}
.glossar-card__cat {
  grid-area: cat;
  align-self: start;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-g-100);
  color: var(--c-g-500);
  white-space: nowrap;
}
.glossar-card__cat[data-cat="fernerkundung"] { background: var(--c-blue-50, rgba(0,87,150,.08));   color: var(--c-blue); }
.glossar-card__cat[data-cat="limnologie"]    { background: rgba(46, 125, 50, .08);                  color: #2e7d32; }
.glossar-card__cat[data-cat="sensorik"]      { background: rgba(0, 87, 150, .12);                   color: var(--c-blue); }
.glossar-card__cat[data-cat="plattform"]     { background: var(--c-gold);                           color: var(--c-ink); }
.glossar-card__cat[data-cat="regulatorik"]   { background: rgba(82, 85, 87, .1);                    color: var(--c-g-500); }
.glossar-card__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
}
.glossar-card__related {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--c-g-200);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 13px;
}
.glossar-card__related-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-g-500);
}
.glossar-card__related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-3);
}
.glossar-card__related-list a {
  color: var(--c-blue);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-blue-100);
}
.glossar-card__related-list a:hover {
  color: var(--c-gold);
  border-bottom-color: var(--c-gold);
}

.glossar-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  background: var(--c-white);
  border: 1px dashed var(--c-g-200);
  border-radius: var(--r-md);
  color: var(--c-g-500);
}
.glossar-empty h3 {
  color: var(--c-blue);
  margin: 0 0 var(--sp-3);
}

@media (max-width: 640px) {
  /* Header ist mobil flacher (48px-Logo ≈ 77px gesamt) — 80px reichen. */
  .glossar-az { top: calc(var(--header-h) - 4px); }
  .glossar-card { padding: var(--sp-5); }
  .glossar-card__head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cat"
      "term"
      "kurz";
  }
  .glossar-card__cat { justify-self: start; }
  .glossar-letter { font-size: 28px; }
}

/* =============================================================================
 * LOGO-GRID — Partner-Page · Presse-Page · Trust-Strip
 * Einheitliche Logo-Höhe, Logos immer farbig. Hover faerbt nur den Rahmen blau.
 * Verwendet auf /de/partner/ und /de/presse/.
 * ============================================================================= */
.logo-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-6) var(--sp-8);
  align-items: stretch;
}
.logo-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-g-200);
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.logo-grid__item:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 87, 150, .08);
}
.logo-grid__item img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.logo-grid__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--c-g-500);
  line-height: 1.3;
}

/* Press-Variante: leicht andere Logo-Höhe (Presse-Logos sind oft breit, niedrig) */
.logo-grid--press .logo-grid__item img { max-height: 44px; }

/* Partnertypen (/partner/) · gestapelte Liste statt Kartenraster: fuenf textreiche
   Eintraege erzeugen in jedem Grid eine Waisenzeile, und die Fliesstexte waeren in
   Drittelbreite unlesbar. Kopf links, Text rechts – ab 860px einspaltig. */
.partner-typen { list-style: none; margin: var(--sp-12) 0 0; padding: 0; display: grid; gap: 0; }
.partner-typ {
  display: grid; grid-template-columns: minmax(220px, 1fr) 2.1fr; gap: var(--sp-10);
  padding: var(--sp-8) 0; border-top: 1px solid var(--c-g-200);
}
.partner-typ:last-child { border-bottom: 1px solid var(--c-g-200); }
.partner-typ__head { display: flex; flex-direction: column; gap: var(--sp-4); }
.partner-typ__head .icon { width: 40px; height: 40px; opacity: .9; }
.partner-typ__head h3 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: var(--c-blue); line-height: 1.3; }
.partner-typ__body p { margin: 0; color: var(--c-text); line-height: 1.75; }
.partner-typ__wen {
  margin-top: var(--sp-4) !important; padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-g-200);
  font-size: 14px; color: var(--c-g-500) !important;
}
@media (max-width: 860px) {
  .partner-typ { grid-template-columns: 1fr; gap: var(--sp-5); }
}

@media (max-width: 640px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .logo-grid__item { padding: var(--sp-4) var(--sp-3); }
  .logo-grid__item img { max-height: 40px; }
}

/* Verlinkte Logos (Partner-Page): <a> füllt die Karte, Karten-Hover bleibt am Item */
.logo-grid__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Awards-Strip Homepage — 3 zentrierte, verlinkte Auszeichnungen in Farbe.
   Logos bewusst GROSS (Siegel-Text muss lesbar sein, Entscheidung 2026-06-11). */
.logo-grid--awards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1160px;
  margin-inline: auto;
}
.logo-grid--awards a.logo-grid__item { text-decoration: none; padding: var(--sp-8) var(--sp-6); gap: var(--sp-5); }
.logo-grid--awards .logo-grid__item img { max-height: 180px; }
/* Awards-Labels in Roboto statt Mono (Entscheidung 2026-08-06): Auszeichnungsnamen sind
   Eigennamen, keine Datenpunkte – Mono + Letterspacing wirkte hier wie ein Messwert. */
.logo-grid--awards .logo-grid__label {
  font-family: var(--f-sans);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--c-g-500);
}
.logo-grid--awards .logo-grid__label strong {
  display: block;
  color: var(--c-blue);
  font-weight: 500;
  margin-bottom: 3px;
  font-size: 16px;
  letter-spacing: -.005em;
}
@media (max-width: 640px) {
  .logo-grid--awards { grid-template-columns: 1fr; max-width: 420px; }
  .logo-grid--awards .logo-grid__item img { max-height: 140px; }
}

/* Trust-Strip — kompakte Zeile aus Trust-Badges (Hero-Below + Footer-Variante) */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8) var(--sp-10);
  padding: var(--sp-6) var(--sp-4);
}
.trust-strip img {
  max-height: 40px;
  width: auto;
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .2s ease, opacity .2s ease;
}
.trust-strip img:hover { filter: grayscale(0%); opacity: 1; }

/* =============================================================================
 * FAQ — Akkordeon-Style auf WAMO/SWIM/Solutions
 * Native <details>/<summary> für No-JS-Robustheit + Schema.org-Match.
 * ============================================================================= */
.faq-list { margin: 0; padding: 0; }
.faq-item {
  border-top: 1px solid var(--c-g-200);
  padding: var(--sp-4) 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--c-g-200); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display, inherit);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-blue);
  padding: var(--sp-2) 0;
  position: relative;
  padding-right: var(--sp-8);
  transition: color .15s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: var(--sp-2);
  font-size: 24px;
  font-weight: 300;
  color: var(--c-blue);
  line-height: 1;
  transition: transform .2s ease;
}
.faq-item[open] > summary::after { content: "−"; }
.faq-item > summary:hover { color: var(--c-blue); }
.faq-item > p {
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--c-text);
  line-height: 1.6;
  max-width: 64ch;
}

/* ---- Pythagoras-Pegel · WAMO Lab Demo (wamo.php) ---------------------- */
.pyth-stage { margin: 0; width: 100%; max-width: 1160px; margin-inline: auto; }
.pyth-stage__wrap {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 14px;
  align-items: stretch;
}
.pyth-stage__frame {
  position: relative;
  background: linear-gradient(180deg, #E2EBF1 0%, #D2DEE6 60%, #C3D2DC 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 32px 60px -28px rgba(0, 48, 79, .55);
}
.pyth-stage svg { display: block; width: 100%; height: auto; }

.pyth-hud {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  background: rgba(0, 28, 48, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 200, 1, 0.32);
  border-radius: 10px;
  padding: 12px 16px 14px;
  color: var(--c-ice);
  font-family: var(--f-mono);
  min-width: 192px;
  display: flex; flex-direction: column;
}
.pyth-hud__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
.pyth-hud__value {
  font-size: 30px;
  font-weight: 500;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 8px;
}
.pyth-hud__distances {
  border-top: 1px solid rgba(232, 240, 247, 0.15);
  padding-top: 8px;
  display: grid;
  gap: 4px;
}
.pyth-hud__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
  color: var(--c-ice);
}
.pyth-hud__row span:first-child {
  opacity: 0.7;
  letter-spacing: 0.08em;
}
.pyth-hud__row span:last-child {
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.pyth-hud__row--d2 span:last-child { color: var(--c-gold); }

.pyth-hud__hint {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 4px;
}

/* Eingriffshinweis oben links */
.pyth-hint {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 48, 79, 0.65);
  background: rgba(255, 255, 255, 0.6);
  padding: 6px 10px;
  border-radius: 4px;
  transition: opacity 400ms ease;
}
.pyth-hint--hidden { opacity: 0; pointer-events: none; }

/* Vertikaler Pegel-Schieber */
.pyth-slider {
  position: relative;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(0, 48, 79, 0.1);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pyth-slider__label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-blue);
  text-align: center;
}
.pyth-slider__track-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
  position: relative;
  display: flex;
  justify-content: center;
}
.pyth-slider__track {
  position: relative;
  width: 6px;
  background: linear-gradient(
    to bottom,
    rgba(0, 87, 150, 0.08) 0%,
    rgba(0, 87, 150, 0.18) 50%,
    rgba(0, 87, 150, 0.08) 100%
  );
  border-radius: 3px;
  height: 100%;
}
.pyth-slider__track::before {
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  top: 50%;
  height: 1px;
  background: var(--c-blue);
  opacity: 0.45;
}
.pyth-slider__input {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: ns-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 100%;
  height: 100%;
}
.pyth-slider__input::-webkit-slider-runnable-track {
  background: transparent;
  height: 32px;
}
.pyth-slider__input::-moz-range-track {
  background: transparent;
  height: 32px;
}
.pyth-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-gold);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(0, 48, 79, 0.25);
  cursor: ns-resize;
  margin-top: 3px;
}
.pyth-slider__input::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-gold);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(0, 48, 79, 0.25);
  cursor: ns-resize;
}
.pyth-slider__scale {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 4px;
}
.pyth-slider__tick {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-text);
  opacity: 0.65;
  transform: translateX(28px);
  font-variant-numeric: tabular-nums;
}
.pyth-slider__tick::before {
  content: "";
  width: 8px; height: 1px;
  background: var(--c-text);
  opacity: 0.5;
}
.pyth-slider__tick--zero { opacity: 0.95; color: var(--c-blue); }
.pyth-slider__tick--zero::before { background: var(--c-blue); width: 12px; height: 1.5px; opacity: 1; }

@media (max-width: 720px) {
  .pyth-stage__wrap { grid-template-columns: 1fr; }
  .pyth-slider {
    flex-direction: row;
    padding: 12px 16px;
    min-height: 64px;
  }
  .pyth-slider__track-wrap { width: auto; flex: 1; min-height: 0; }
  .pyth-slider__track { width: 100%; height: 6px; }
  .pyth-slider__input {
    transform: none;
    writing-mode: horizontal-tb;
    direction: ltr;
    width: 100%; height: 36px;
  }
  .pyth-slider__scale { flex-direction: row; padding: 0; }
  .pyth-slider__tick { flex-direction: column; transform: translateY(20px); }
  .pyth-slider__tick::before { width: 1px; height: 8px; }
}

/* SVG-Internals (descendant-scoped) */
.pyth-stage .pyth-clouds ellipse { fill: #FFFFFF; opacity: 0.55; }
.pyth-stage .pyth-land { fill: #DCDFE3; }
.pyth-stage .pyth-land__shore {
  fill: none;
  stroke: rgba(0, 48, 79, 0.35);
  stroke-width: 1.2;
}
.pyth-stage .pyth-land__grain {
  fill: none;
  stroke: rgba(82, 85, 87, 0.22);
  stroke-width: 0.8;
}
.pyth-stage .pyth-water-deep { fill: url(#pyth-waterGradient); }
.pyth-stage svg { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pyth-stage svg { cursor: default; } }

.pyth-stage .pyth-base__pole { fill: #6f7375; }
.pyth-stage .pyth-base__platform { fill: #cfd2d4; }
.pyth-stage .pyth-base__panel { fill: var(--c-blue); }
.pyth-stage .pyth-base__panel-grid { stroke: rgba(232, 240, 247, 0.4); stroke-width: 0.6; }
.pyth-stage .pyth-base__antenna { fill: none; stroke: #cfd2d4; stroke-width: 1.6; stroke-linecap: round; }
.pyth-stage .pyth-base__light { fill: var(--c-gold); }
.pyth-stage .pyth-base__shadow { fill: rgba(0, 0, 0, 0.18); }

.pyth-stage .pyth-sat-halo {
  fill: var(--c-gold);
  opacity: 0.18;
  animation: pyth-halo-pulse 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pyth-halo-pulse {
  0%, 100% { opacity: 0.12; transform: scale(0.92); }
  50%      { opacity: 0.34; transform: scale(1.08); }
}

.pyth-stage .pyth-dist {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 7 6;
}
.pyth-stage .pyth-dist--base { stroke: var(--c-blue); opacity: 0.85; }
.pyth-stage .pyth-dist--sat  { stroke: var(--c-gold); opacity: 0.95; }
.pyth-stage .pyth-dist--ref  { stroke: var(--c-navy-800); opacity: 0.5; stroke-dasharray: 3 5; }

.pyth-stage .pyth-dist-label {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  fill: var(--c-ice);
}
.pyth-stage .pyth-dist-label--sat { fill: var(--c-gold); }
.pyth-stage .pyth-dist-label--ref { fill: var(--c-ice); }
.pyth-stage .pyth-dist-label__bg {
  fill: rgba(0, 28, 48, 0.7);
  stroke: rgba(232, 240, 247, 0.18);
  stroke-width: 0.8;
}

.pyth-stage .pyth-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: rgba(0, 48, 79, 0.78);
}
.pyth-stage .pyth-label--accent { fill: var(--c-blue); }
.pyth-stage .pyth-label--light  { fill: rgba(255, 255, 255, 0.92); }

/* Lede + Bullets unter der Stage */
.pyth-meta { max-width: 1160px; margin: var(--sp-8) auto 0; }
.pyth-meta__lede {
  max-width: 64ch;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 var(--sp-5);
  color: var(--c-text);
}
.pyth-meta__lede b { color: var(--c-blue); font-weight: 500; }
.pyth-meta__bullets {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4) var(--sp-7);
}
.pyth-meta__bullets li {
  padding-left: 26px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
}
.pyth-meta__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 2px;
  background: var(--c-gold);
}
.pyth-meta__bullets b {
  color: var(--c-blue);
  font-weight: 500;
}

@media (max-width: 600px) {
  .pyth-hud {
    top: 10px; right: 10px;
    padding: 8px 12px 10px;
    min-width: 124px;
  }
  .pyth-hud__value { font-size: 22px; }
  .pyth-hud__hint { display: none; }
  .pyth-meta__lede { font-size: 16px; }
  .pyth-stage .pyth-dist-label { font-size: 16px; }
  .pyth-stage .pyth-label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pyth-stage .pyth-sat-halo { animation: none !important; }
}

/* ========================================================================
   WAMO-Anwendungskreis  (Spike: /de/spike/wamo-anwendungen/)
   Foto in der Mitte, 9 Pills auf einer Ellipse, 4 Cluster-Headlines.
   Layout via container-query units + CSS sin/cos. Pills bleiben aufrecht.
   ======================================================================== */
.kreis {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 0 auto var(--sp-8);
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}

.kreis__connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.kreis__connector-path {
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 2;
  stroke-opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.kreis__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  max-width: 300px;
  height: auto;
  transform: translate(-53%, -50%);
  z-index: 2;
  user-select: none;
  pointer-events: none;
}

.kreis__cluster {
  position: absolute;
  margin: 0;
  font: 700 clamp(20px, 2.8cqi, 32px) / 1.2 'Ubuntu', sans-serif;
  color: var(--c-blue);
  letter-spacing: 0.01em;
  white-space: nowrap;
  z-index: 3;
  transition: color 200ms;
}

.kreis__cluster[data-cluster="foerdern"]   { top: 12%;    left: 15%;  }
.kreis__cluster[data-cluster="messen"]     { top: 12%;    right: 15%; }
.kreis__cluster[data-cluster="regulieren"] { bottom: 12%; right: 15%; }
.kreis__cluster[data-cluster="forschen"]   { bottom: 12%; left: 15%;  }

/* SWIM-Datenquellen (swim.php) */
.kreis__cluster[data-cluster="insitu"]     { top: 12%;    left: 15%;  }
.kreis__cluster[data-cluster="satellit"]   { top: 12%;    right: 15%; }
.kreis__cluster[data-cluster="modell"]     { bottom: 12%; right: 15%; }
.kreis__cluster[data-cluster="manuell"]    { bottom: 12%; left: 15%;  }

/* WAMO-220-Sensorik (wamo/220.php) */
.kreis__cluster[data-cluster="guete"]      { top: 12%;    left: 15%;  }
.kreis__cluster[data-cluster="hydro"]      { top: 12%;    right: 15%; }
.kreis__cluster[data-cluster="wetter"]     { bottom: 12%; right: 15%; }
.kreis__cluster[data-cluster="bio"]        { bottom: 12%; left: 15%;  }

/* MRV-Pfad (solutions/monitoring-mrv.php) — nur 2 Cluster */
.kreis__cluster[data-cluster="science"]    { top: 14%;    right: 15%; }
.kreis__cluster[data-cluster="market"]     { bottom: 14%; left: 15%;  }

.kreis__cluster.is-active,
.kreis__cluster.is-peer {
  color: var(--c-gold);
}

.kreis__item {
  --a: 0deg;
  --r: 32cqi;
  /* Distanz vom äußeren Pill-Rand zum Avatar-Mittelpunkt
     (Padding + halber Avatar). Anker für die Positionierung,
     damit alle Avatare exakt auf der Connector-Linie liegen — egal wie
     lang das Label ist. Avatar sitzt jeweils auf der Innenseite des Pills
     (Richtung Bildmitte), Label kragt nach AUSSEN weg. */
  --_anchor: calc(0.35rem + clamp(22px, 2.75cqi, 32px));

  position: absolute;
  top: 50%;
  left: 50%;
  /* Default = data-side="left" (linke Kreishälfte): Avatar rechts (innen),
     Label links (außen) → Pill-Rechtskante hängt am Avatar-Anker */
  flex-direction: row-reverse;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  transform:
    translate(calc(var(--r) * sin(var(--a))), calc(-1 * var(--r) * cos(var(--a))))
    translate(calc(-100% + var(--_anchor)), -50%);

  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1cqi, 14px);
  background: #fff;
  border: 1.5px solid var(--c-blue);
  border-radius: 999px;
  color: var(--c-blue);
  font: 500 clamp(13px, 1.4cqi, 16px) / 1.2 'Roboto', sans-serif;
  text-align: left;
  cursor: pointer;
  z-index: 4;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    background 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.kreis__item[data-side="right"] {
  /* Rechte Kreishälfte: Avatar links (innen), Label rechts (außen) */
  flex-direction: row;
  padding: 0.35rem 1rem 0.35rem 0.35rem;
  transform:
    translate(calc(var(--r) * sin(var(--a))), calc(-1 * var(--r) * cos(var(--a))))
    translate(calc(-1 * var(--_anchor)), -50%);
}

.kreis__avatar {
  flex: 0 0 auto;
  width: clamp(44px, 5.5cqi, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--c-blue);
  background: var(--c-ice);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color 200ms, background 200ms;
}

.kreis__avatar img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.kreis__label {
  white-space: nowrap;
}

.kreis__item:hover,
.kreis__item:focus-visible {
  outline: none;
  transform:
    translate(calc(var(--r) * sin(var(--a))), calc(-1 * var(--r) * cos(var(--a))))
    translate(calc(-100% + var(--_anchor)), -50%)
    scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 87, 150, 0.18);
}

.kreis__item[data-side="right"]:hover,
.kreis__item[data-side="right"]:focus-visible {
  transform:
    translate(calc(var(--r) * sin(var(--a))), calc(-1 * var(--r) * cos(var(--a))))
    translate(calc(-1 * var(--_anchor)), -50%)
    scale(1.06);
}

.kreis__item:hover .kreis__avatar,
.kreis__item:focus-visible .kreis__avatar {
  border-color: var(--c-gold);
}

.kreis__item.is-cluster-peer .kreis__avatar {
  border-color: var(--c-gold);
}

.kreis.is-hovering .kreis__item:not(:hover):not(.is-cluster-peer):not(.is-active) {
  opacity: 0.55;
}

.kreis__item.is-active {
  background: var(--c-blue);
  color: #fff;
  z-index: 10; /* aktive Pill + Detail über inaktive Nachbarn legen */
}

.kreis__item.is-active .kreis__avatar {
  background: #fff;
  border-color: var(--c-gold);
}

/* Per-Pill Detail-Box — erscheint bei aktivem Pill SEITLICH neben dem Pill
   in Außen-Richtung (linke Pills → links daneben, rechte Pills → rechts daneben).
   Selbe Schriftgröße wie das Pill, Box ~50 % breiter → max. 3 Zeilen. */
.kreis__detail {
  position: absolute;
  display: none;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 390px;
  padding: 0.55rem 0.85rem;
  background: var(--c-blue);
  color: #fff;
  border-radius: 8px;
  font-size: clamp(13px, 1.4cqi, 16px);
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 87, 150, 0.18);
  pointer-events: none;
}

/* Default = data-side="left": Detail nach AUSSEN (links) vom Pill */
.kreis__item .kreis__detail {
  right: calc(100% + 0.5rem);
  left: auto;
}
/* data-side="right": Detail nach AUSSEN (rechts) vom Pill */
.kreis__item[data-side="right"] .kreis__detail {
  left: calc(100% + 0.5rem);
  right: auto;
}

.kreis__item.is-active .kreis__detail {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kreis-detail {
  max-width: 720px;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-g-100);
  border-left: 4px solid var(--c-blue);
  border-radius: 6px;
}

/* Per-Pill-Detail ersetzt das alte globale Panel auf allen Viewports →
   das alte .kreis-detail wird komplett ausgeblendet (Bestandteil bleibt im DOM
   als Fallback für JS, das es noch befüllt — visuell ist es weg). */
.kreis-detail { display: none; }

.kreis-detail__hint {
  margin: 0;
  color: var(--c-g-500);
  font-style: italic;
  font-size: 0.95rem;
}

.kreis-detail__title {
  margin: 0 0 0.5rem;
  font: 700 1.4rem / 1.2 'Ubuntu', sans-serif;
  color: var(--c-blue);
}

.kreis-detail__desc {
  margin: 0;
  color: var(--c-g-500);
  font-size: 1.05rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  /* .kreis wird zur Flex-Spalte, damit wir per `order` die Reihenfolge
     wiederherstellen können — im Markup stehen erst alle Cluster-Headlines,
     dann alle Pills, was auf Mobile sonst unsortiert wirkt. */
  .kreis {
    aspect-ratio: auto;
    height: auto;
    container-type: normal;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .kreis__connector { display: none; }
  .kreis__center {
    position: static;
    display: block;
    transform: none;
    width: min(360px, 80%);
    margin: 0 auto var(--sp-6);
    order: 0;
  }
  .kreis__cluster {
    position: static;
    margin: var(--sp-6) 0 var(--sp-2);
    width: 100%;
    max-width: 480px;
  }
  .kreis__item {
    position: static;
    transform: none !important;
    margin: 0.4rem 0;
    width: 100%;
    max-width: 480px;
    /* Detail-Box wrappt im aktiven Zustand auf eine eigene Zeile unter Avatar+Label */
    flex-wrap: wrap;
  }

  /* Cluster-Seite (links/rechts der Spalte) analog zum Desktop-Layout —
     Headline + Pills derselben Cluster-Hälfte stehen seitenbündig. */
  .kreis__cluster[data-cluster="foerdern"],
  .kreis__cluster[data-cluster="forschen"],
  .kreis__cluster[data-cluster="insitu"],
  .kreis__cluster[data-cluster="manuell"],
  .kreis__cluster[data-cluster="guete"],
  .kreis__cluster[data-cluster="bio"],
  .kreis__cluster[data-cluster="market"],
  .kreis__item[data-side="left"]  { margin-right: auto; margin-left: 0; text-align: left; }

  .kreis__cluster[data-cluster="messen"],
  .kreis__cluster[data-cluster="regulieren"],
  .kreis__cluster[data-cluster="satellit"],
  .kreis__cluster[data-cluster="modell"],
  .kreis__cluster[data-cluster="hydro"],
  .kreis__cluster[data-cluster="wetter"],
  .kreis__cluster[data-cluster="science"],
  .kreis__item[data-side="right"] { margin-left: auto; margin-right: 0; text-align: right; }

  /* Cluster-Gruppierung via CSS-`order`: Headline → ihre Pills → nächste Headline.
     Reihenfolge folgt dem Desktop-Layout (oben-links → oben-rechts → unten-rechts → unten-links). */
  /* WAMO Anwendungen + WAMO main */
  .kreis__cluster[data-cluster="foerdern"]    { order: 10; }
  .kreis__item[data-cluster="foerdern"]       { order: 11; }
  .kreis__cluster[data-cluster="messen"]      { order: 20; }
  .kreis__item[data-cluster="messen"]         { order: 21; }
  .kreis__cluster[data-cluster="regulieren"]  { order: 30; }
  .kreis__item[data-cluster="regulieren"]     { order: 31; }
  .kreis__cluster[data-cluster="forschen"]    { order: 40; }
  .kreis__item[data-cluster="forschen"]       { order: 41; }
  /* SWIM Datenquellen */
  .kreis__cluster[data-cluster="insitu"]      { order: 10; }
  .kreis__item[data-cluster="insitu"]         { order: 11; }
  .kreis__cluster[data-cluster="satellit"]    { order: 20; }
  .kreis__item[data-cluster="satellit"]       { order: 21; }
  .kreis__cluster[data-cluster="modell"]      { order: 30; }
  .kreis__item[data-cluster="modell"]         { order: 31; }
  .kreis__cluster[data-cluster="manuell"]     { order: 40; }
  .kreis__item[data-cluster="manuell"]        { order: 41; }
  /* WAMO 220 Sensorik */
  .kreis__cluster[data-cluster="guete"]       { order: 10; }
  .kreis__item[data-cluster="guete"]          { order: 11; }
  .kreis__cluster[data-cluster="hydro"]       { order: 20; }
  .kreis__item[data-cluster="hydro"]          { order: 21; }
  .kreis__cluster[data-cluster="wetter"]      { order: 30; }
  .kreis__item[data-cluster="wetter"]         { order: 31; }
  .kreis__cluster[data-cluster="bio"]         { order: 40; }
  .kreis__item[data-cluster="bio"]            { order: 41; }
  /* MRV-Pfad (2 Cluster) */
  .kreis__cluster[data-cluster="science"]     { order: 10; }
  .kreis__item[data-cluster="science"]        { order: 11; }
  .kreis__cluster[data-cluster="market"]      { order: 20; }
  .kreis__item[data-cluster="market"]         { order: 21; }

  /* Per-Pill Detail im Stack-Layout: aus dem Tooltip-Modus zurück in den Flow,
     volle Pill-Breite, unter dem Label. Side-Positioning vom Desktop überschreiben. */
  .kreis__detail {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    flex-basis: 100%;
    margin-top: 0.4rem;
    box-shadow: none;
    right: auto;
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kreis__item,
  .kreis__cluster,
  .kreis__avatar { transition: none; }
}

/* ====================================================================
   KREIS · Aufladung — Reveal-Choreografie + zentrales Glas-Sheet
   (Handoff A-Familie, 2026-05-29). Additiv auf der .kreis-Basis oben.
   JS: motion-loader.js (Reveal) + kreis-sheet.js (Glas-Sheet, Klick,
   Hover-Peer). Opt-in pro Kreis über das Attribut [data-reveal].
   ==================================================================== */

/* — Eintritts-Choreografie (opt-in via [data-reveal]) —
   Connector zeichnet sich → Center fade+scale → Pills (Stagger) →
   Cluster-Headlines zuletzt. --d wird per JS (motion-loader) pro Element gesetzt. */
.kreis[data-reveal]:not(.is-revealed) .kreis__connector-path {
  stroke-dasharray: 201;
  stroke-dashoffset: 201;
}
.kreis[data-reveal]:not(.is-revealed) .kreis__center {
  opacity: 0;
  transform: translate(-53%, -50%) scale(0.88);
}
.kreis[data-reveal]:not(.is-revealed) .kreis__item    { opacity: 0; }
.kreis[data-reveal]:not(.is-revealed) .kreis__cluster { opacity: 0; transform: translateY(8px); }

.kreis[data-reveal] .kreis__connector-path {
  transition: stroke-dashoffset calc(900ms * var(--motion, 1)) var(--ease-flow);
}
.kreis[data-reveal] .kreis__center {
  transition:
    opacity    calc(620ms * var(--motion, 1)) var(--ease-flow) 250ms,
    transform  calc(620ms * var(--motion, 1)) var(--ease-flow) 250ms;
}
.kreis[data-reveal] .kreis__item {
  transition:
    transform   200ms ease,
    box-shadow  200ms ease,
    background  150ms ease,
    color       150ms ease,
    opacity     calc(520ms * var(--motion, 1)) var(--ease-flow) var(--d, 700ms);
}
.kreis[data-reveal] .kreis__cluster {
  transition:
    opacity    calc(500ms * var(--motion, 1)) var(--ease-flow) var(--d, 1500ms),
    transform  calc(500ms * var(--motion, 1)) var(--ease-flow) var(--d, 1500ms),
    color      200ms ease;
}

.kreis[data-reveal].is-revealed .kreis__connector-path { stroke-dashoffset: 0; }
.kreis[data-reveal].is-revealed .kreis__center         { opacity: 1; transform: translate(-53%, -50%) scale(1); }
.kreis[data-reveal].is-revealed .kreis__item           { opacity: 1; }
.kreis[data-reveal].is-revealed .kreis__cluster        { opacity: 1; transform: none; }


/* — Glas-Sheet · zentrale Detail-Karte (Desktop). DOM von kreis-sheet.js erzeugt. */
.kreis__sheet {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: min(58cqi, 460px);
  max-width: 88%;
  padding: clamp(20px, 3cqi, 32px) clamp(22px, 3.4cqi, 34px);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-md);
  box-shadow: 0 18px 48px rgba(0, 48, 79, 0.18);
  color: var(--c-blue);
  opacity: 0; pointer-events: none;
  z-index: 20;
  will-change: opacity, transform;
  transition:
    opacity 280ms var(--ease-flow),
    transform 320ms var(--ease-flow);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .kreis__sheet {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}
.kreis.has-active .kreis__sheet {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.kreis__sheet-close {
  position: absolute; top: 10px; right: 10px;
  appearance: none; border: 0;
  background: rgba(0, 48, 79, 0.08);
  color: var(--c-blue);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 18px/1 var(--f-sans);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.kreis__sheet-close:hover {
  background: var(--c-gold); color: var(--c-navy-900);
  transform: rotate(90deg);
}
.kreis__sheet-eyebrow {
  display: block;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 8px;
}
.kreis__sheet-title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(18px, 2.4cqi, 24px);
  letter-spacing: -.01em; line-height: 1.2;
  color: var(--c-blue);
  margin: 0 0 10px;
  padding-right: 32px;
}
.kreis__sheet-text {
  font-size: clamp(13px, 1.5cqi, 15.5px);
  line-height: 1.55;
  margin: 0;
  color: var(--c-g-700);
}

/* Desktop: alte per-Pill-Tooltip-Bauchbinde verstecken (Glas-Sheet übernimmt) */
@media (min-width: 901px) {
  .kreis__item .kreis__detail { display: none !important; }
}
/* Mobile: Glas-Sheet verstecken — die Inline-Bauchbinde (.kreis__detail) übernimmt */
@media (max-width: 900px) {
  .kreis__sheet { display: none !important; }
}

/* Alte JS-Bauchbinde (.kreis-detail) ist abgelöst — global ausblenden. */
.kreis-detail { display: none; }


/* — MRV-Pfeil · ambiente Rotation im Zentrum-Badge (nur MRV-Kreise) —
   Ein ambienter Loop pro Template (P6); startet nach der Eintritts-Choreografie,
   aus bei reduced-motion; kreis-sheet.js pausiert bei verstecktem Tab. */
@keyframes mrvArrow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
.mrv-arrow-group {
  transform-origin: 100px 100px;
  transform-box: fill-box;
}
.kreis.is-revealed .mrv-arrow-group {
  animation: mrvArrow 22s linear infinite;
  animation-delay: 2200ms;
}


/* — A4 · Vollbild-Foto-Center (optionaler Center-Modus) —
   class="kreis__center kreis__center--photo" am zentralen <img>; Foto 1:1
   über src austauschbar. Füllt exakt den r=32-Connector-Ring als runde Scheibe. */
.kreis__center--photo {
  width: 64%;
  max-width: 530px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: 54% 56%;
  border-radius: 50%;
  z-index: 0;
  box-shadow: 0 22px 50px -26px rgba(0,48,79,.45);
}
.kreis[data-reveal]:not(.is-revealed) .kreis__center--photo {
  opacity: 0; transform: translate(-50%, -50%) scale(0.9);
}
.kreis[data-reveal].is-revealed .kreis__center--photo {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.kreis.is-revealed .kreis__center--photo {
  animation: a4Breathe 9s var(--ease-flow) 1400ms infinite;
}
@keyframes a4Breathe {
  0%, 100% { box-shadow: 0 24px 54px -22px rgba(0,48,79,.5); }
  50%      { box-shadow: 0 24px 58px -20px rgba(0,48,79,.42); }
}
@media (max-width: 900px) {
  .kreis__center--photo { width: min(320px, 74%); }
}


/* — Reduced-Motion: harter Bypass für Reveal + Glas-Sheet + Foto-Center — */
@media (prefers-reduced-motion: reduce) {
  .kreis[data-reveal] .kreis__connector-path { stroke-dashoffset: 0 !important; transition: none !important; }
  .kreis[data-reveal] .kreis__center         { opacity: 1 !important; transform: translate(-53%, -50%) !important; transition: none !important; }
  .kreis[data-reveal] .kreis__item           { opacity: 1 !important; transition: transform 200ms ease, box-shadow 200ms ease, background 150ms ease, color 150ms ease !important; }
  .kreis[data-reveal] .kreis__cluster        { opacity: 1 !important; transform: none !important; transition: color 200ms ease !important; }

  .kreis__sheet {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
    transition: opacity 120ms ease !important;
    transform: translate(-50%, -50%) !important;
  }
  .kreis.has-active .kreis__sheet { transform: translate(-50%, -50%) !important; }
  .kreis__sheet-close { transition: background 100ms ease; }
  .kreis__sheet-close:hover { transform: none; }

  .kreis.is-revealed .mrv-arrow-group { animation: none; }
  .kreis[data-reveal] .kreis__center--photo { opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none !important; animation: none !important; }
}

/* ====================================================================
   IMG-SLIDER · Bild-Carousel für Blog-Posts (scroll-snap, kein JS-Lib)
   Pattern: nativer horizontaler Scroll mit snap-points, JS hängt nur
   Pfeile + Dots + Tastatur dazu. Funktioniert auch ohne JS (Fallback).
   ==================================================================== */
.img-slider { position: relative; }
.img-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  scrollbar-width: none;
  border-radius: var(--r-md);
  background: var(--c-ink);
}
.img-slider__track::-webkit-scrollbar { display: none; }
.img-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--c-ink);
}
.img-slider__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.img-slider__cap {
  position: absolute;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  color: var(--c-white);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(6,26,46,.55);
  padding: 8px 14px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  max-width: calc(100% - clamp(32px, 6vw, 56px));
}

/* Pfeil-Buttons */
.img-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(6,26,46,.45);
  color: var(--c-white);
  cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
  z-index: 3;
}
.img-slider__btn:hover,
.img-slider__btn:focus-visible {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-blue);
}
.img-slider__btn[disabled] { opacity: .35; cursor: default; }
.img-slider__btn--prev { left: clamp(12px, 2vw, 20px); }
.img-slider__btn--next { right: clamp(12px, 2vw, 20px); }
.img-slider__btn svg { width: 18px; height: 18px; }

/* Dot-Indikatoren */
.img-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.img-slider__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  background: var(--c-line);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.img-slider__dot[aria-current="true"] {
  background: var(--c-blue);
  transform: scale(1.4);
}
.img-slider__dot:hover,
.img-slider__dot:focus-visible { background: var(--c-blue-500); }

/* Counter (Pos / Total) */
.img-slider__counter {
  position: absolute;
  top: clamp(12px, 2vw, 18px);
  right: clamp(12px, 2vw, 20px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-white);
  background: rgba(6,26,46,.55);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.14);
  z-index: 3;
}

@media (max-width: 640px) {
  .img-slider__btn { width: 40px; height: 40px; }
  .img-slider__slide { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .img-slider__track { scroll-behavior: auto; }
  .img-slider__dot { transition: none; }
}

/* ==========================================================================
   Graft v2.1 → v2 · Komponenten für Handlungsfelder/Zielgruppen (G1)
   Aus site-v2.1/assets/css/site.css portiert. Tokens 1:1 kompatibel.
   ========================================================================== */
.section--paper { background: var(--c-g-50); }
.s-head { max-width: 62ch; }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head .lead { margin-top: var(--sp-4); color: inherit; opacity: .92; }
.hero--page { min-height: min(52vh, 440px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero--page .hero__title { font-size: clamp(32px, 4.6vw, 56px); }
/* Zielgruppen-Split-Hero (v2.1-Graft G1, includes/_zielgruppe.php):
   __text + __media als Grid — ohne diese Regel kollabiert der Bild-Slot auf 0px. */
.hero--split--zg { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; padding-top: 0; min-height: min(56vh, 540px); }
.hero--split__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 72px); color: var(--c-ice); }
.hero--split__text h1 { color: #fff; }
.hero--split__media { position: relative; background: var(--c-navy-800); }
.hero--split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crumbs { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-ice); opacity: .8; margin-bottom: var(--sp-3); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--c-gold); }
.panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-sm); }
.assure { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.assure__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.assure__ic { flex: 0 0 26px; width: 26px; height: 26px; color: var(--c-success); margin-top: 2px; }
.assure__item b { display: block; color: #fff; font-size: 15px; }
.assure__item span { font-size: 13px; color: rgba(255,255,255,.72); }
.case-card__num { font-family: var(--f-display); font-weight: 300; font-size: 34px; color: var(--c-primary); letter-spacing: -.03em; line-height: 1; }
.case-card__num small { font-size: 14px; color: var(--c-g-500); font-family: var(--f-sans); font-weight: 400; display: block; letter-spacing: 0; }
.case-card__meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-g-400); }
.case-card__media { aspect-ratio: 16/10; background: var(--c-blue-50); overflow: hidden; }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* CTA-Band · linksbündig wie der Rest der Seite (Entscheidung 2026-08-07). Vorher
   zentriert, während .lead per .text-flow links stand — genau die gemischte
   Achse, die unaufgeräumt wirkt. Lichtschächte geben der Farbfläche Bewegung. */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, var(--c-navy-800), var(--c-navy-900));
  color: #fff; border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 64px);
  text-align: left;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0 -20%;
  z-index: -1; pointer-events: none;
  background:
    linear-gradient(103deg, transparent 24%, rgba(255,255,255,.06)  29%, rgba(255,255,255,.015) 36%, transparent 40%),
    linear-gradient( 97deg, transparent 58%, rgba(255,255,255,.045) 63%, transparent 71%);
  animation: hub-shafts calc(30s / var(--motion, 1)) ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; max-width: 24ch; }
.cta-band .lead { color: var(--c-ice); opacity: .92; max-width: 60ch; margin: var(--sp-4) 0 0; }
.cta-band .btn-row { justify-content: flex-start; margin-top: var(--sp-8); }
@media (prefers-reduced-motion: reduce) {
  .cta-band::before { animation: none; opacity: .8; }
}
@media (max-width: 860px) {
  .assure { grid-template-columns: 1fr 1fr; }
  .hero--split--zg { grid-template-columns: 1fr; }
  .hero--split__media { min-height: 240px; }
}

/* --- Graft G2 · Formular-Feedback + Honeypot --- */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { background: var(--c-blue-50); border-left: 3px solid var(--c-success); border-radius: var(--r-md); padding: var(--sp-6); }
.form-success strong { display: block; color: var(--c-blue); font-size: 18px; }
.form-note { background: #fdecea; border-left: 3px solid #c0392b; border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); color: #902418; margin-bottom: var(--sp-4); }
.field__err { display: block; margin-top: 4px; font-size: 13px; color: #c0392b; }

/* --- Graft G3 · Referenzen Case-Grid --- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.case-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--c-g-700); display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.case-card h3 { color: var(--c-blue); font-size: 18px; }
.tag-pill { display: inline-block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--r-pill, 999px); background: var(--c-blue-50); color: var(--c-primary); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } }

/* --- Graft G4 · Demo-Form-Row (Netzwerk-Scrolly nutzt eigene scrolly.css) --- */
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }

/* =============================================================================
 * HOME-TILE — Bild-Kacheln Homepage (Lösungen · Cases · Maßnahmen)
 * Ersetzt die früheren Inline-Styles. Default 3/2, --wide = 5/2 (Maßnahmen).
 * Flow-Modus auf allen Breiten: Bild+Scrim liegen absolut als Hintergrund,
 * Pills+Body stehen im Fluss → aspect-ratio gibt nur noch die Wunsch-Proportion
 * vor. Reicht sie für den Text nicht, wächst die Kachel, statt zu überlappen.
 * (Fix 2026-09-01: __top/__body waren absolut positioniert, in der schmalen
 * 3er-Spalte zwischen 900 und ~1300px lief der Body über die Pill-Zeile.
 * Mobil-Flow ist damit der Normalfall.)
 * ============================================================================= */
.home-tile {
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-ink);
  text-decoration: none;
  color: inherit;
}
.home-tile__media {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 3/2;
  display: flex;
  flex-direction: column;
}
.home-tile--wide .home-tile__media { aspect-ratio: 5/2; }
.home-tile__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  display: block;
}
/* Zwei Lagen: der Scrim traegt die Bild-Tiefe (prozentual), der Body-Verlauf
   sitzt am Textblock selbst — damit bleibt die Headline lesbar, egal wie hoch
   die Kachel gerade ist (helle Motive wie der Sonnenuntergang liefen sonst weg). */
.home-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 26, 46, 0) 35%, rgba(11, 26, 46, .55) 100%);
}
.home-tile__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) 0;
}
.home-tile__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  color: var(--c-white);
  background: linear-gradient(180deg, rgba(11, 26, 46, 0) 0, rgba(11, 26, 46, .62) var(--sp-8), rgba(11, 26, 46, .74) 100%);
}
.home-tile__body h3 {
  color: var(--c-white);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-3);
}
.home-tile__body p {
  color: var(--c-ice);
  opacity: .85;
  max-width: 48ch;
  margin: 0 0 var(--sp-4);
  font-size: 14px;
}
.home-tile--wide .home-tile__body p { max-width: 60ch; }
.home-tile__cta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold);
}

@media (max-width: 768px) {
  .home-tile__media,
  .home-tile--wide .home-tile__media { aspect-ratio: auto; min-height: 300px; }
  .home-tile__scrim {
    background: linear-gradient(180deg, rgba(11, 26, 46, .30) 0%, rgba(11, 26, 46, .80) 65%);
  }
  .home-tile__top { padding: var(--sp-5) var(--sp-5) 0; }
  .home-tile__body { padding: var(--sp-12) var(--sp-5) var(--sp-5); }
}

/* =============================================================================
 * VOICE-CARD — Kundenstimmen-Grid auf Mid-Water-Dunkelgrund (Homepage)
 * Greift erst bei >1 Stimme; eine Stimme nutzt das zentrierte Quote-Layout.
 * ============================================================================= */
.voice-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.voice-card blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--c-white);
  text-wrap: balance;
}
.voice-card figcaption { font-size: 14px; color: var(--c-ice); }
.voice-card figcaption b { display: block; color: var(--c-white); font-weight: 600; }
.voice-card__source {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-decoration: none;
}


/* =============================================================================
 * PTILE — Foto-Kachel des Produkt-Hubs (/produkte/)
 * Flex-Spalte statt absolut positioniertem Text: auf schmalen Viewports waechst
 * die Kachel mit dem Inhalt, statt Kicker und Headline ueberlappen zu lassen.
 * Der Scrim dunkelt oben UND unten ab — Pill und Gold-Kicker standen auf hellen
 * Motiven (Himmel, Dashboard-Screenshot) sonst kontrastlos im Weiss.
 * ============================================================================= */
.ptile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 30vw, 400px);
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--c-ink);
  overflow: hidden;
  isolation: isolate;
  color: var(--c-white);
  text-decoration: none;
}
.ptile--feature { min-height: clamp(420px, 42vw, 540px); }
.ptile__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .85;
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.ptile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,26,46,.62) 0%, rgba(11,26,46,.14) 24%, rgba(11,26,46,0) 40%),
    linear-gradient(180deg, rgba(11,26,46,0) 40%, rgba(11,26,46,.94) 100%);
}
a.ptile:hover .ptile__img { opacity: 1; transform: scale(1.03); }
a.ptile:hover .ptile__cta { color: var(--c-white); }
.ptile__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4); margin-bottom: var(--sp-8);
}
.ptile__body { margin-top: auto; }
.ptile__h {
  color: var(--c-white); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(22px, 2vw, 30px); margin: 0 0 var(--sp-3);
}
.ptile--feature .ptile__h { font-size: clamp(26px, 2.6vw, 38px); }
.ptile__text {
  color: var(--c-ice); opacity: .88;
  font-size: 14px; line-height: 1.55; max-width: 46ch;
  margin: 0 0 var(--sp-4);
}
.ptile--feature .ptile__text {
  font-size: 16px; line-height: 1.6; max-width: 56ch; margin-bottom: var(--sp-5);
}
.ptile__cta {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-gold);
  transition: color .2s var(--ease);
}
.ptile__btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Schmal fuellt der Text fast die ganze Kachel — der weiche Verlauf reicht dann
   nicht mehr, die Headline liegt sonst im transparenten Bereich ueber dem Motiv. */
@media (max-width: 700px) {
  .ptile::before {
    background: linear-gradient(180deg, rgba(11,26,46,.55) 0%, rgba(11,26,46,.74) 45%, rgba(11,26,46,.94) 100%);
  }
}
@media (max-width: 560px) {
  .ptile__top { flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
}

/* ==========================================================================
   FLIESSTEXT NIE ZENTRIERT  ·  Regel 2026-08-06, site-weit
   --------------------------------------------------------------------------
   Zentrierte Bloecke behalten Kicker, Headline, Badges und Buttons mittig.
   Mehrzeilige Absaetze laufen linksbuendig: bei zentriertem Flattersatz muss
   das Auge jeden Zeilenanfang neu suchen, das kostet Lesegeschwindigkeit.

   Anwendung: .text-flow an jeden Fliesstext-Absatz, der in einem zentrierten
   Container steht. Die Klasse schlaegt das geerbte text-align des Eltern-
   Elements, auch wenn dieses per Inline-Style zentriert.
   ========================================================================== */
.text-flow { text-align: left; }
.cta-band .lead { text-align: left; }
/* Label-Zeilen (Mono-Subtitles unter der H1) bleiben auf Desktop mittig, weil
   sie dort einzeilig laufen. Sobald sie umbrechen, gilt dieselbe Regel. */
@media (max-width: 640px) { .text-flow--sm { text-align: left; } }
/* Label-Zeile, die ihre Mitte selbst setzt (Container ist nicht zentriert). */
.label-center { text-align: center; }
@media (max-width: 640px) { .label-center { text-align: left; } }

/* ========================================================================
   CONSENT-BANNER · includes/_consent.php + assets/js/consent.js
   Erscheint nur, wenn in includes/tracking.php ein einwilligungspflichtiger
   Dienst konfiguriert ist. Fixiert unten, deckt nie die ganze Seite ab
   (keine Cookie-Wall), Buttons gleich gross und gleich prominent.
   ====================================================================== */
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; padding: var(--sp-3); pointer-events: none; }
.consent[hidden] { display: none; }
.consent__inner {
  max-width: var(--wrap); margin-inline: auto; pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-white); color: var(--c-g-500);
  border: 1px solid var(--c-g-200); border-top: 3px solid var(--c-blue);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.consent__body { flex: 1 1 340px; }
.consent__title { margin: 0; font-family: var(--f-display); font-size: 18px; font-weight: 500; color: var(--c-blue); }
.consent__title:focus { outline: 2px solid var(--c-blue); outline-offset: 4px; }
.consent__text { margin: var(--sp-2) 0 0; font-size: 15px; line-height: 1.55; max-width: 70ch; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex: 0 0 auto; }
.consent__btn { justify-content: center; min-width: 156px; }
@media (max-width: 700px) {
  .consent__inner { padding: var(--sp-4); gap: var(--sp-4); }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent__inner { animation: consent-in .35s var(--ease) both; }
  @keyframes consent-in { from { opacity: 0; transform: translateY(14px); } }
}

/* Widerruf in der Footer-Rechtszeile – sitzt zwischen Impressum und
   Datenschutz und muss sich exakt wie diese Links lesen. */
.consent-manage {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; text-decoration: none;
}
.consent-manage:hover { color: var(--c-gold); }

/* ==========================================================================
   PRESS-LIST · Presseberichte und Veroeffentlichungen (/presse/)
   Jede Zeile traegt Medium, Datum und Titel. Zweispaltig auf Desktop,
   damit das Medium als Ankerspalte lesbar bleibt; ab 720px gestapelt.
   Eintraege ohne Link (Print, TV ohne Mediathek) rendern als Text — die
   Zeile darf deshalb nie davon ausgehen, dass ein <a> vorhanden ist.
   ========================================================================== */
.press-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-g-200); }
.press-list__item {
  display: grid; grid-template-columns: minmax(200px, 240px) 1fr;
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--c-g-200);
}
.press-list__meta { display: flex; flex-direction: column; gap: var(--sp-2); }
.press-list__outlet {
  font-family: var(--f-display); font-size: 17px; font-weight: 500;
  color: var(--c-blue); line-height: 1.3;
}
.press-list__date {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-g-500);
}
.press-list__body { min-width: 0; }
.press-list__title { font-size: 19px; line-height: 1.45; color: var(--c-text); margin: 0; }
.press-list__title a { color: var(--c-blue); text-decoration: none; border-bottom: 1px solid var(--c-blue-100); }
.press-list__title a:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.press-list__note {
  margin: var(--sp-3) 0 0; font-size: 15px; line-height: 1.6;
  color: var(--c-g-500); max-width: 68ch; text-align: left;
}
@media (max-width: 720px) {
  .press-list__item { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5) 0; }
  .press-list__title { font-size: 17px; }
}

/* ============================================================================
   YOUTUBE-EINBETTUNG · Zwei-Klick-Facade
   Markup: youtube_embed() in includes/helpers.php, Player: assets/js/youtube.js
   Vor dem Klick liegt hier nur lokales Markup – kein Google-Request.
   ========================================================================== */
.yt { margin: 0 0 var(--sp-8); }
/* Steht der Player allein in einer Sektion oder Grid-Zelle, trägt die Sektion
   den Abstand – der Figure-Rand darunter kippt die vertikale Zentrierung. */
.yt--flush { margin-bottom: 0; }

.yt__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; color: var(--c-white); text-align: left;
  /* Fallback-Fläche, wenn kein lokales Poster gesetzt ist. */
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(78,126,184,.55), transparent 62%),
    linear-gradient(150deg, var(--c-navy-800) 0%, var(--c-navy-900) 100%);
  box-shadow: var(--shadow-md);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.yt__frame:hover { box-shadow: var(--shadow-lg); }
.yt__frame:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

.yt__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Abdunkeln, damit Play-Button und Titel auf jedem Poster lesbar bleiben. */
.yt__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,48,79,.15) 0%, rgba(0,48,79,.72) 100%);
  transition: background .4s var(--ease);
}
.yt__frame:hover::after { background: linear-gradient(180deg, rgba(0,48,79,.25) 0%, rgba(0,48,79,.78) 100%); }

.yt__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--c-blue); color: var(--c-white);
  /* Weisser Ring: Der blaue Kreis sitzt auf einem abgedunkelten Poster und
     ginge ohne Trennkante im Overlay unter. */
  box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 12px 32px -8px rgba(0,48,79,.6);
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.yt__play svg { width: 42px; height: 42px; margin-left: 3px; }
.yt__frame:hover .yt__play { transform: translate(-50%, -50%) scale(1.08); }

.yt__title {
  position: absolute; z-index: 1; left: var(--sp-5); right: var(--sp-5);
  bottom: var(--sp-5); font-family: var(--f-display); font-size: 18px;
  font-weight: 500; line-height: 1.4; color: var(--c-white);
  text-shadow: 0 1px 12px rgba(0,48,79,.7);
}

.yt__iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--r-md); background: var(--c-navy-900);
}

.yt__caption {
  margin-top: var(--sp-3); font-size: 13px; line-height: 1.6;
  color: var(--c-g-500); text-align: left;
}
/* Quelle steht auf eigener Zeile, der Datenschutzhinweis kleiner darunter –
   sonst lesen sich beide als ein Satz. */
.yt__source {
  display: block; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-g-500);
  margin-bottom: var(--sp-1);
}
.yt__note {
  display: block; font-size: 14px; line-height: 1.6; color: var(--c-g-500);
  max-width: 68ch; margin-bottom: var(--sp-2);
}
.yt__hint { display: block; font-size: 12px; color: var(--c-g-300); max-width: 60ch; }
.yt__hint a { color: var(--c-g-500); }
.yt__hint a:hover { color: var(--c-blue); }
/* Nach dem Klick ist der Hinweis erledigt – die Quellenangabe bleibt. */
.yt.is-playing .yt__hint { display: none; }

@media (max-width: 640px) {
  /* Titel bricht schmal auf zwei Zeilen – der Button rückt hoch, sonst stoßen
     Kreis und erste Titelzeile aneinander. */
  .yt__play { width: 60px; height: 60px; top: 42%; }
  .yt__play svg { width: 34px; height: 34px; }
  .yt__title { font-size: 16px; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .yt__frame, .yt__play, .yt__frame::after { transition: none; }
  .yt__frame:hover .yt__play { transform: translate(-50%, -50%); }
}

/* ============================================================================
   DOWNLOAD-GATE · Modal + Formular-Fragment
   DOM des <dialog> erzeugt assets/js/download-gate.js, der Inhalt ist
   includes/_download-form.php (gleiches Markup auf der No-JS-Seite in .dl-page).
   Look: .panel mit Gold-Hairline wie .kreis__sheet, Backdrop in Navy.
   ============================================================================ */
dialog.dl-modal {
  width: min(92vw, 520px);
  max-height: min(90vh, 100%);
  padding: 0;                       /* Padding liegt auf .dl-form – so trifft ein Backdrop-Klick das <dialog> selbst */
  border: 0;
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--c-blue);
  box-shadow: 0 24px 64px rgba(0, 48, 79, 0.28);
  overflow: auto;
}
dialog.dl-modal::backdrop { background: rgba(0, 48, 79, 0.55); }
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  dialog.dl-modal::backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
dialog.dl-modal[open] { animation: dl-modal-in 260ms var(--ease-flow) both; }
@keyframes dl-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
body.has-modal { overflow: hidden; }

.dl-form { position: relative; padding: clamp(24px, 3vw, 36px); }
.dl-page .dl-form { padding: 0; }
.dl-form__title { margin-top: var(--sp-3); font-size: clamp(22px, 2.4vw, 28px); }
.dl-form__close {
  position: absolute; top: 12px; right: 12px;
  appearance: none; border: 0;
  background: rgba(0, 48, 79, 0.08);
  color: var(--c-blue);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 20px/1 var(--f-sans);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.dl-form__close:hover, .dl-form__close:focus-visible {
  background: var(--c-gold); color: var(--c-navy-900);
  transform: rotate(90deg);
}
.dl-page .dl-form__close, .dl-modal .dl-form__back { display: none; } /* Fallback-Seite: kein Schließen-Button; Modal: Rücksprung sinnlos */
.dl-form__form { margin-top: var(--sp-6); }
.dl-form__lang { margin-top: var(--sp-3); font-size: 14px; color: var(--c-g-500); }
.dl-form__meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--c-g-500); }
.dl-form__back { margin-top: var(--sp-6); }
.dl-form .form-success { margin-top: var(--sp-6); }
.dl-contents { padding-left: 1.2em; color: var(--c-text); line-height: 1.6; }
.dl-contents li + li { margin-top: var(--sp-2); }
[data-download][aria-busy="true"] { opacity: .7; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  dialog.dl-modal[open] { animation: none; }
  .dl-form__close { transition: none; }
  .dl-form__close:hover, .dl-form__close:focus-visible { transform: none; }
}