/* MPE Drift, Produktseite.
   Angelegt am 2026-08-29, Huelle am selben Tag an die MPE-Insight-Seite
   angeglichen.

   ── Was hier absichtlich GLEICH ist ────────────────────────────────────────
   Auftrag des PO: "so dass man wenn man hin und her switcht das Gefuehl hat,
   dass es zusammengehoert". Die beiden Seiten teilen sich deshalb die Huelle,
   Wert fuer Wert aus _Website/MPEInsight/css/site.css und css/craft.css
   uebernommen, weil eine Familie an den MASSEN erkennbar wird und nicht an
   der Absicht:

     Kopfzeile      fest, 72 px hoch, Innenbreite 1560, erst beim Scrollen
                    Hintergrund und Unschaerfe   (site.css:179 folgende)
     Wortmarke      Inter 600, 14 px, Laufweite 0,12em, Bild mit 5 px Radius
                    ⚠ NICHT die Serifenschrift  (site.css:201)
     Knoepfe        Radius 8, Inter 600 / 14 px, und die Fuellung steigt beim
                    Ueberfahren von unten auf   (site.css:137, craft.css:319)
     Radien         genau drei Stufen: 8 Bedienelement, 12 Karte, 16 Tafel
     Spalte         1240 px                     (site.css --max)
     Kurven         --e-soft fuer Ankuenfte, --e-swift fuer Zeiger
     Korn           dieselbe fractalNoise-Flaeche, 9 s in 6 Stufen
     Schiene        linke Haarlinie mit Stationen, unter 1240 px weg
     Ankunft        ein [data-rv] mit denselben Spielarten und Zeiten
     Auswahl/Fokus  gleiche Mechanik, eigene Farbe

   ── Was hier absichtlich ANDERS ist ────────────────────────────────────────
   Die Farben. MPE Insight fuehrt Gruen als Ereignis und Cyan als Signalweg;
   MPE Drift fuehrt sein eigenes Rot und das Blau der App. Gleiche Grammatik,
   eigene Stimme. Und die Seite ist klein, deshalb EINE Datei statt der
   Trennung in site.css und craft.css drueben.

   ── Woher die Farben kommen ────────────────────────────────────────────────
   1. Die Grundleiter ist die des Plugins, Wert fuer Wert aus
      plugin/mpe-drift/src/skin.rs (Zeile 68 folgende), dort am 2026-08-29 aus
      dem Mockup nachgemessen: Farbton 227 Grad, Saettigung 80 Prozent unten,
      linear fallend auf 25 Prozent bei L 23 Prozent. Deshalb liest sich dieses
      Schwarz blau und nicht grau. Wer hier per Auge nachbessert, bricht die
      Messung.
   2. Die vier Signalfarben sind die Parameterfarben von DRIFT, festgelegt in
      notes/plan-drift-2.8.md Abschnitt 2.1. Die Akte sagt: keine Deko, sondern
      die Legende, jede Farbe bedeutet ein Modulationsziel.
   3. Die Markenfarbe --brand kommt aus dem Logo, nachgemessen; die Rechnung
      steht unten an der Variablen.

   Rollenteilung, drei Faecher: --brand traegt jede Handlung, --accent jede
   Auskunft, und die vier Parameterfarben sind ausschliesslich Legende. Die
   ersten beiden Rollen sind die aus skin.rs:102 und skin.rs:104.

   Schriften wie drueben, lokal gehostet: Fraunces fuer Ueberschriften, Inter
   fuer Text und Bedienelemente, IBM Plex Mono fuer Etiketten und Zahlen. */

/* ── 1 · Marken und Masse ─────────────────────────────────────────────────── */
:root {
  --bg-app:      #020612;
  --bg-panel:    #02040e;
  --bg-card:     #060b1f;
  --bg-raised:   #0e1530;
  --bg-hover:    #19213d;
  --bg-active:   #282f48;

  --border:      #2c334a;
  --border-soft: #222944;
  --border-faint:#171f3b;
  --grid:        #101733;

  --text:        #ccccdd;
  --text-dim:    #888aa0;
  --text-faint:  #4a5170;
  --field-text:  #cdd6f4;

  --accent:      #88aaff;
  --accent-rgb:  136, 170, 255;
  --press:       #ff5577;
  --pitch:       #6688ff;
  --timbre:      #ffcc44;
  --pan:         #3fe0a0;

  /* Die Markenfarbe, aus dem Logo nachgemessen.

     Quelle: Visuals/IconSet/MPE Drift Logo angehoben quadratisch.png, Fassung
     vom 2026-08-29 08:36.

     WIE gemessen, denn der naheliegende Weg fuehrt in die Irre. Der Faecher hat
     einen Verlauf entlang jedes Strahls, also zaehlen nur die Spitzen. Und von
     den Spitzen darf man den Farbton nicht MITTELN: die warme Seite reicht von
     Magenta bis Rot, das Mittel landet bei H 344,4 auf einem Ton, den das Logo
     nirgends flaechig zeigt. Genommen ist der haeufigste Ton des breitesten
     Fachs:

       #ff0037   37215 von 88852 deckenden Pixeln, also 42 Prozent

     UND DAS IST DIE POINTE: #ff0037 ist H 347,1 / S 100 / L 50. Die
     Parameterfarbe --press ist #ff5577, also H 348,0 / S 100 / L 67. Gleicher
     Farbton, gleiche Saettigung, nur siebzehn Punkte heller. Marke und
     Druckbahn sind EIN Ton in zwei Stufen und nicht zwei Rot.

     ⚠ Der Unterschied ist die HELLIGKEIT, nicht die Saettigung. #ff5577 ist
       bereits voll gesaettigt, da laesst sich nichts hochdrehen. Wer das
       verwechselt und an der Saettigung schraubt, aendert nichts und sucht den
       Fehler danach an der falschen Stelle.

     Kontrast auf --bg-app, nachgerechnet, alles besteht WCAG AA:
       #ff0037 als Text       5,12 zu 1
       #17030a auf #ff0037    5,04 zu 1   (Knopfschrift)
       #ff335f als Text       5,68 zu 1   (--brand-lift, L 60)
     Weiss auf #ff0037 waere 3,96 zu 1 und damit nur fuer Grosstext zulaessig,
     deshalb bleibt die Knopfschrift dunkel.

     Die kuehle Seite wird NICHT mitgezogen und kann es nicht: sie liegt im
     Logo bei #3b18b3 bis #2d1ed8, das ergibt auf dem Seitengrund 1,90 bis
     2,21 zu 1. --accent bleibt deshalb bei #88aaff. Gerechnet, nicht
     Geschmack. */
  --brand:       #ff0037;
  --brand-lift:  #ff335f;
  --brand-rgb:   255, 0, 55;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Genau drei Radien, wie drueben: Bedienelement, Karte, Tafel. Eine vierte
     Stufe faellt sofort als Fremdkoerper auf. */
  --r-ctl:   8px;
  --r-card:  12px;
  --r-panel: 16px;

  --max: 1240px;
  --gap: 24px;

  --e-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-swift: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Lenis fuehrt beim sanften Rollen selbst Buch und braucht das eigene
   Scrollverhalten des Browsers nicht. Gleiche Zeile wie drueben. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(var(--accent-rgb), .25); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── 2 · Korn ─────────────────────────────────────────────────────────────
   Eine Rauschflaeche ueber allem, die in sechs Stufen wandert. Sie nimmt dem
   grossen schwarzen Feld das Digitale. Gleiche Frequenz und gleiche Taktung
   wie auf der MPE-Insight-Seite, sonst faellt der Wechsel zwischen beiden
   Seiten sofort auf. */
.grain {
  position: fixed;
  inset: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  z-index: 2000;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation: grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Das Raster des Stroemungsfelds, weit heruntergezogen. Es liegt fest hinter
   der Seite, damit der Grund Tiefe hat, ohne dass Text darauf flimmert. Das
   ist die eine Flaeche, die es drueben nicht gibt: sie zitiert das Feld des
   Plugins. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
}

main, header, footer { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: #a9c2ff; }

img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ── 3 · Schrift ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 7vw, 76px); letter-spacing: -.02em; line-height: 1.02; }
h2 { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -.01em; line-height: 1.05; }
h3 { font-size: 19px; letter-spacing: -.005em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
.eyebrow.warm { color: var(--brand); }

/* Der Punkt vor dem Etikett pulst, wie der Ereignispunkt der Schwesterseite:
   die Seite zeigt damit, dass sie an einem laufenden Signal haengt. */
.eyebrow.live { position: relative; padding-left: 16px; }
.eyebrow.live::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  animation: kick-pulse 2.6s ease-in-out infinite;
}
@keyframes kick-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .eyebrow.live::before { animation: none; } }

.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-dim); max-width: 62ch; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }

/* ── 4 · Knoepfe ──────────────────────────────────────────────────────────
   Die Fuellung steigt beim Ueberfahren von UNTEN auf, nicht als Farbwechsel.
   Drueben ist das als Druckanzeige begruendet, und genau daran erkennt man
   die beiden Seiten als eine: background-position links unten,
   background-size von 100% 0% auf 100% 100%. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  padding: 12px 24px;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0%;
  transition: border-color .25s, background-color .25s,
              background-size .3s var(--e-swift), color .25s;
}
.btn:hover { background-size: 100% 100%; }
.btn-lg { padding: 15px 30px; font-size: 15px; }

.btn-primary {
  background-color: var(--brand);
  background-image: linear-gradient(var(--brand-lift), var(--brand-lift));
  color: #17030a;
}
.btn-ghost {
  background-color: rgba(255, 255, 255, .02);
  background-image: linear-gradient(rgba(var(--accent-rgb), .09), rgba(var(--accent-rgb), .09));
  border-color: var(--border-soft);
  border-left: 2px solid rgba(var(--accent-rgb), .65);
  color: var(--text);
}

/* ── 5 · Kopfzeile ────────────────────────────────────────────────────────
   Fest und zunaechst durchsichtig; Hintergrund und Unschaerfe kommen erst,
   wenn gescrollt wurde. js/site.js setzt dafuer .scrolled. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}
.nav.scrolled {
  background: rgba(2, 4, 14, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--border-faint);
}
.nav-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ⚠ Die Wortmarke laeuft in der LAUFSCHRIFT, nicht in der Serifenschrift.
   Das ist drueben so (site.css:201) und es ist der auffaelligste einzelne
   Unterschied, wenn man ihn falsch macht: eine Serifen-Wortmarke neben einer
   Inter-Wortmarke liest sich sofort als zwei verschiedene Haeuser. */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--text);
}
.wordmark:hover { color: var(--text); }
.wordmark img { border-radius: 5px; }
.wordmark-tag {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border-faint);
  border-radius: 4px;
  padding: 2px 8px;
}

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 13.5px;
  color: var(--text-dim);
  padding: 8px 13px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta { padding: 10px 20px; font-size: 13px; }

.nav-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border-faint);
  border-radius: var(--r-ctl);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 950;
}
.nav-burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--text);
  transition: transform .3s var(--e-swift), opacity .3s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: rgba(2, 4, 14, .96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 96px 36px 48px;
  gap: 36px;
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font-family: var(--serif);
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 600;
  color: var(--text-dim);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-faint);
  transition: color .2s, padding-left .25s var(--e-swift);
}
.mobile-menu nav a:hover { color: var(--text); padding-left: 10px; }


/* ── Produktwechsler ──────────────────────────────────────────────────────
   Die Pille in der Kopfzeile, die auf das jeweils ANDERE Produkt zeigt, mit
   dessen Logo. Sie steht auf beiden Seiten an derselben Stelle und sieht auf
   beiden gleich aus; nur Ziel, Logo und Name drehen sich um. Das ist der
   Sinn: der Wechsel soll sich anfuehlen wie ein Reiter innerhalb EINES
   Hauses und nicht wie ein Link nach draussen.

   Radius ist bewusst --r-ctl und keine Pille: die Seite kennt genau drei
   Radien, eine vierte Stufe faellt als Fremdkoerper auf.

   Unter 880px verschwindet sie aus der Kopfzeile, weil dort der Platz dem
   Menueknopf gehoert. Sie taucht dafuer im Klappmenue wieder auf, in der
   breiten Fassung.
   ───────────────────────────────────────────────────────────────────────── */
.prod-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px 6px 7px;
  border: 1px solid var(--border-faint);
  border-radius: var(--r-ctl);
  background: var(--bg-card);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .22s, border-color .22s, background .22s;
}
.prod-switch img { border-radius: 5px; display: block; }
.prod-switch svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .45;
  transition: transform .25s var(--e-swift), opacity .22s;
}
.prod-switch:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-raised);
}
.prod-switch:hover svg { transform: translateX(2px); opacity: 1; }

/* Die breite Fassung fuers Klappmenue: gleiche Teile, volle Zeile. */
.prod-switch.is-wide {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
  font-size: 15px;
}
.prod-switch.is-wide svg { margin-left: auto; width: 16px; height: 16px; }

@media (max-width: 880px) {
  .nav-right .prod-switch { display: none; }
}
/* ── 6 · Die Schiene ──────────────────────────────────────────────────────
   Eine feste Haarlinie am linken Rand, die sich beim Scrollen mit dem
   Verlauf fuellt; jeder Abschnitt ist eine Station darauf. Aufbau, Masse und
   die Sichtlinie 0,34 sind die der Schwesterseite (craft.css:157, craft.js
   SIGHT). Nur der Verlauf ist ein anderer, und er ist nachgemessen: die
   Rampe des Logos, nach Winkel um die Nabe sortiert, je haeufigster Ton
     #191cb2 (blau)  #740085 (violett)  #fb008b (magenta)  #ff0037 (rot)
   Auf schmalen Fenstern ist das Deko, also verschwindet sie ganz. */
.rail {
  position: fixed;
  left: clamp(16px, 2vw, 30px);
  top: 0; bottom: 0;
  width: 12px;
  z-index: 860;
  pointer-events: none;
}
.rail-track, .rail-fill {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  margin-left: -.5px;
}
.rail-track {
  background: linear-gradient(180deg,
    transparent 0%, rgba(140, 160, 220, .13) 9%,
    rgba(140, 160, 220, .13) 91%, transparent 100%);
}
.rail-fill {
  background: linear-gradient(180deg, #191cb2 0%, #740085 38%, #fb008b 70%, #ff0037 100%);
  box-shadow: 0 0 12px rgba(var(--brand-rgb), .45);
  transform-origin: top;
  transform: scaleY(var(--sp, 0));
  opacity: .85;
}
.rail-node {
  position: absolute;
  left: 0;
  width: 12px; height: 12px;
  margin-top: -6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.rail-node::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background .4s ease, box-shadow .4s ease, transform .4s var(--e-swift);
}
.rail-node.is-past::before {
  background: var(--brand);
  box-shadow: 0 0 9px rgba(var(--brand-rgb), .75);
}
.rail-node.is-here::before {
  transform: scale(2);
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .9);
}
.rail-node span {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease, transform .4s var(--e-swift);
}
/* Die Beschriftung ist nur ein Angebot beim Ueberfahren. Dauerhaft offen an
   der aktuellen Station liest sie sich als Text, der im Rand herumsteht. */
.rail-node:hover span,
.rail-node:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-node:focus-visible { outline: none; }
.rail-node:focus-visible::before { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .4); }

@media (max-width: 1240px) { .rail { display: none; } }

/* ── 7 · Ankunft ──────────────────────────────────────────────────────────
   Ein Attribut, ein paar Spielarten, ein Verzoegerungs-Token. Jede Ankunft
   auf der Seite laeuft hierdurch, damit das ganze Dokument EIN Tempo hat.
   Die Eigenschaften sind einzeln notiert (translate, scale, clip-path statt
   transform), damit sie sich ueberlagern statt sich zu ueberschreiben. */
@media (prefers-reduced-motion: no-preference) {
  [data-rv] {
    opacity: 0;
    transition:
      opacity .85s var(--e-soft) var(--rvd, 0s),
      translate 1.05s var(--e-soft) var(--rvd, 0s),
      scale 1.05s var(--e-soft) var(--rvd, 0s),
      clip-path 1.15s var(--e-soft) var(--rvd, 0s),
      filter .9s var(--e-soft) var(--rvd, 0s);
  }
  [data-rv="up"]    { translate: 0 30px; }
  [data-rv="rise"]  { translate: 0 68px; }
  [data-rv="left"]  { translate: -26px 0; }
  [data-rv="right"] { translate: 26px 0; }
  [data-rv="scale"] { translate: 0 30px; scale: .955; }
  [data-rv="mask"]  { clip-path: inset(0 0 101% 0); translate: 0 12px; }
  [data-rv="soft"]  { filter: blur(16px); scale: 1.03; }

  [data-rv].rv-in {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}

/* ── 8 · Abschnitte ───────────────────────────────────────────────────────── */
section { padding: clamp(72px, 10vw, 128px) 0; border-top: 1px solid var(--border-faint); }
section:first-of-type { border-top: none; }
.sec-head { max-width: 68ch; margin-bottom: 48px; }

/* ── 9 · Aufmacher ────────────────────────────────────────────────────────
   Volle Fensterhoehe und mittig, wie drueben; svh statt vh, damit die
   Adressleiste auf dem Telefon nicht hineinragt. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 0 96px;
  overflow: hidden;
}
.hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 4, 14, .5) 0%, transparent 26%, transparent 62%, var(--bg-app) 100%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(var(--brand-rgb), .08), transparent 55%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero .lead { margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { margin-top: 22px; color: var(--text-dim); }

/* Die vier Farben einmal als Legende unter dem Aufmacher, damit die Seite
   ihre Zeichenerklaerung mitbringt, bevor sie die Farben benutzt. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border-faint);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); }

/* ── 9b · Die Idee ────────────────────────────────────────────────────────
   Der Abschnitt zwischen Aufmacher und den vier Spuren. Er hat eine einzige
   Aufgabe: den Kerngedanken aussprechen, nicht erklaeren. Deshalb ist hier
   alles groesser und ruhiger als sonst auf der Seite, und deshalb steht die
   Signalkette ganz oben statt als Schmuck am Rand. */

/* Die Kette. Mono und in Kaesten, weil sie eine Leitung zeigt und keinen
   Satz. Der mittlere Kasten ist das Produkt und traegt als einziger Farbe. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 44px;
}
.chain-step {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-ctl);
  padding: 9px 14px;
  background: var(--bg-card);
}
.chain-step.is-mid {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), .45);
  box-shadow: 0 0 22px rgba(var(--brand-rgb), .13);
}
.chain-arrow { color: var(--text-faint); font-size: 15px; line-height: 1; }

/* Der eine Satz, den der Besucher mitnehmen soll. Er darf groesser sein als
   die uebrigen Ueberschriften, sonst ist er nur eine weitere davon. */
.claim { font-size: clamp(32px, 5vw, 58px); max-width: 16ch; margin-bottom: 20px; }

/* Die Bruecke unter den vier Spuren: was sie zusammen ergeben. Die
   Markenkante links macht sie zur Folgerung und nicht zu noch einem Absatz. */
.bridge {
  margin-top: 40px;
  padding-left: 20px;
  border-left: 2px solid var(--brand);
  max-width: 56ch;
}

/* Der leise Nachsatz. Technik, die der versierte Kaeufer sucht und die dem
   allen anderen den Blick nicht wegziehen soll. */
.aside {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border-faint);
  color: var(--text-faint);
  max-width: 74ch;
  line-height: 1.9;
}

/* ── 9c · Ohne und mit ────────────────────────────────────────────────────
   Die Vergleichsgrafik. Links drei gerade Linien, rechts dieselben drei Noten
   auf je eigener Bahn.

   Die rechten Kurven LAUFEN, und das ist kein Zierat: der ganze Abschnitt
   behauptet Bewegung, und eine stehende Zeichnung behauptet sie nur. Jede
   Bahn ist ueber die doppelte Breite gezeichnet und wandert um genau EINE
   eigene Periode nach links, dann springt sie zurueck. Weil der Sprung auf
   einen deckungsgleichen Punkt faellt, sieht man ihn nicht.

     1,6 Zyklen  ->  173,75 px  in 6,2 s
     2,3 Zyklen  ->  120,87 px  in 4,3 s
     1,1 Zyklen  ->  252,73 px  in 8,7 s

   ⚠ Weg und Frequenz gehoeren zusammen. Wer eine Frequenz in rebuild-main.py
     aendert und den Weg hier stehen laesst, bekommt bei jedem Durchlauf einen
     sichtbaren Ruck. Die Zeiten dagegen sind frei und absichtlich in keinem
     ganzzahligen Verhaeltnis: die drei Stimmen sollen nie gemeinsam
     zurueckspringen. */
.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.compare-half { background: var(--bg-card); margin: 0; padding: 24px 24px 26px; }
.compare-half.is-ours { background: #070d24; }
.compare-half figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 18px;
}
.compare-half.is-ours figcaption { color: var(--brand); }
.compare-half svg { display: block; width: 100%; height: auto; }
.compare-half p { margin: 16px 0 0; font-size: 14.5px; color: var(--text-dim); }
.compare-half.is-ours p { color: var(--text); }

.tr-label text {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--text-faint);
}
.tr-flat path {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.5;
}
.tr-live path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tr-live path:nth-child(1) { animation: tr-run-1 6.2s linear infinite; }
.tr-live path:nth-child(2) { animation: tr-run-2 4.3s linear infinite; opacity: .78; }
.tr-live path:nth-child(3) { animation: tr-run-3 8.7s linear infinite; opacity: .62; }
@keyframes tr-run-1 { to { transform: translateX(-173.75px); } }
@keyframes tr-run-2 { to { transform: translateX(-120.87px); } }
@keyframes tr-run-3 { to { transform: translateX(-252.73px); } }
@media (prefers-reduced-motion: reduce) {
  .tr-live path { animation: none; }
}
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ── 9d · Die Aussagebahn ─────────────────────────────────────────────────
   Ein Abschnitt, der nur einen Satz traegt. Er bekommt einen eigenen Grund,
   damit er beim Durchscrollen als Zaesur wirkt und nicht als weitere
   Ueberschrift. */
.band { background: var(--bg-panel); }
.statement {
  font-size: clamp(34px, 5.6vw, 66px);
  max-width: 18ch;
  margin-bottom: 24px;
}

/* Die Ueberschrift ueber der Technik. Klein und in Mono, weil ab hier nichts
   mehr verkauft wird, sondern nur noch Auskunft gegeben. */
.aside-label {
  color: var(--text-faint);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin: 0 0 16px;
}

/* Der Satz im Aufmacher, der die groesste Huerde vom Tisch nimmt. Er steht
   zwischen Text und Knoepfen, weil er dort gelesen wird, bevor entschieden
   wird. */
.hero-claim {
  margin-top: 22px;
  color: var(--brand);
  font-size: 14px;
  letter-spacing: .06em;
}

/* ── 10 · Karten ──────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-card);
  padding: 26px 24px;
  transition: border-color .3s var(--e-swift), background .3s var(--e-swift);
}
.card:hover { border-color: var(--border-soft); background: #070d24; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-dim); font-size: 15px; }

/* Vier Karten brauchen 4, 2 oder 1 Spalte und nie 3, sonst steht die vierte
   allein in der zweiten Reihe und die Luecke daneben liest sich als Fehler.
   auto-fit kann das nicht entscheiden: es fuellt nach Platz und nicht nach
   Teilbarkeit, und genau deshalb steht hier eine feste Zahl. */
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px)  { .cards-2 { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-4 { grid-template-columns: 1fr; } }

/* Die Spur traegt ihre Farbe als Kante links, nicht als Flaeche: die Farbe
   bleibt Legende und wird nicht zum Hintergrund. */
.lane { border-left: 2px solid var(--c, var(--accent)); }
/* Der Selektor heisst absichtlich .card p.lane-name und nicht .lane-name:
   .card p oben ist eine Klasse plus ein Element und schlaegt eine Klasse
   allein. Am 2026-08-29 gemessen, der Spurname kam grau statt in seiner
   Parameterfarbe an. Wer das kuerzt, macht die Legende wieder blind. */
.card p.lane-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c, var(--accent));
  margin-bottom: 10px;
}

/* ── 11 · Modusliste ──────────────────────────────────────────────────────── */
.modes { border-top: 1px solid var(--border-faint); margin: 0; }
.mode {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 28px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border-faint);
  transition: background .3s var(--e-swift);
}
.mode:hover { background: rgba(255, 255, 255, .015); }
.mode dt {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.mode dd { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ── 12 · Faktentafel ─────────────────────────────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.fact { background: var(--bg-card); padding: 22px 24px; }
.fact dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.fact dd { margin: 0; font-size: 15.5px; color: var(--field-text); }

/* Dieselbe Teilbarkeitsregel wie bei .cards-4: vier Felder, also 4 oder 2. */
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* ── 13 · Nachricht bei Erscheinen ────────────────────────────────────────── */
.notify { max-width: 560px; }
.notify-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.notify-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .25s;
}
.notify-form input[type="email"]::placeholder { color: #5c6480; }
.notify-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.notify-fine { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.notify-msg { margin-top: 16px; font-size: 14.5px; }
.notify-msg[hidden] { display: none; }
.notify-msg.ok { color: var(--pan); }
.notify-msg.err { color: var(--timbre); }

/* ── 14 · Fusszeile ───────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border-faint); padding: 64px 0 40px; background: var(--bg-panel); }
.footer-row { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.footer-tag { color: var(--text-dim); margin-top: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: var(--text-dim); font-size: 14.5px; }
.footer-links a:hover { color: var(--text); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border-faint);
  color: var(--text-dim);
  font-size: 13px;
}

/* Das Impressum steht in der Fusszeile und nicht in einem Fenster, das erst
   Javascript oeffnet: es muss ohne Skript zu finden sein. */
.imprint { margin-top: 32px; }
.imprint summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.imprint summary:hover { color: var(--text); }
.imprint-body { margin-top: 14px; font-size: 14px; color: var(--text-dim); line-height: 1.8; }

/* ── 15 · Einwilligungsleiste ─────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 2100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}
.cookie-banner[hidden] { display: none; }
.cookie-text { flex: 1 1 320px; margin: 0; font-size: 13.5px; color: var(--text-dim); }
.cookie-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .btn { padding: 9px 18px; font-size: 13px; }

/* ── 16 · Schmale Fenster ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .wrap { padding: 0 24px; }
}
@media (max-width: 720px) {
  .mode { grid-template-columns: 1fr; gap: 4px; }
  .footer-row { flex-direction: column; }
  .nav-cta { display: none; }
}