/* ==========================================================================
   AUTOMAT–1 — medienautomatisierung.com
   Oryzo-Prinzip: ein Produkt, eine Kamerafahrt, liebevolle Übertreibung.
   Farben: Grund #140D07 · Fläche #3A2517 · Creme #F5EADB (gedämpft = 50 % Deckkraft,
   NIE ein zweites Grau) · Akzent #E56910 (sparsam) · Bühnen-Rot #8E1B12 (eine Fläche).
   Modul-Töne (NUR Konfigurator-HUD/Spec, via --khud): Motion #E0604A · Versand #E8B04B
   — beide AA-tauglich (≥ 4,5:1) auf #140D07.
   Zustand --zst #8FB08A (Salbei) sagt «läuft» und steht ausschliesslich an den
   [ ECHT ]-Marken. Die Farbe ist auf dieser Domain schon im Logbuch in Gebrauch (Kategorie
   ERKLÄRT) und erscheint darum auch im Teaser auf dieser Seite. Kontrast auf #140D07 ≈ 8:1.
   Rahmen, Knoten, Icon und das Wort «gewählt» an der Modul-Kette folgen dagegen --khud,
   also dem Ton des gewählten Moduls — nicht --zst.
   Gewichte: ausschliesslich 400 / 500.
   Bewegung: Design-System 2026-07-26, Teil B. Dauer --t1 bis --t4, Kurven --ea/--ea-fest/--ea-ab,
   Eintritt nur über .auf / Strichzeichnung, ausgelöst vom Beobachter für [data-an].
   ========================================================================== */

:root {
  --bg: #140D07;
  --surface: #3A2517;
  --cream: #F5EADB;
  --accent: #E56910;
  --red: #8E1B12;
  --ink: #140D07;
  --hud: rgba(245, 234, 219, 0.55);
  --zst: #8FB08A;

  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, serif;
  --mono: "DM Mono", Consolas, "Courier New", monospace;

  --pad: clamp(20px, 4vw, 64px);
  --nav-h: 72px;

  /* Bewegung (farbunabhängig, darum ohne Gegenstück) */
  --ea: cubic-bezier(.22, .7, .24, 1);
  --ea-fest: cubic-bezier(.2, .9, .3, 1);
  --ea-ab: cubic-bezier(.4, 0, .9, .35);
  --t1: 140ms;
  --t2: 240ms;
  --t3: 420ms;
  --t4: 640ms;
  --stag: 60ms;
  --an-v: 0ms;

  /* Abstands-Rhythmus für neue Blöcke — keine Zwischenwerte */
  --r1: 8px;
  --r2: 14px;
  --r3: 22px;
  --r4: 34px;
  --r5: 54px;

  /* Fortschritt 0 bis 1, vom Skript am Seitenende gesetzt */
  --fortschritt: 0;
}

/* --- Reset / Grund --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sprungziele frei halten: die Kopfzeile klebt oben und wuerde jede
   angesprungene Ueberschrift verdecken. */
section[id], header[id], div[id] { scroll-margin-top: 92px; }

html { scroll-behavior: auto; }
html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--accent); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Typo-System ------------------------------------------------------------
   Mikro-Label 14/500/VERSALIEN · Fliesstext 21/400 · Stufen 26–60/500 ·
   Riesen-Display bis 144/500. Gedämpft ausschliesslich über Deckkraft. */

.lbl {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.dim   { opacity: 0.5; }
.dim72 { opacity: 0.72; }

.h-mid {
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.h-big {
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.h-display {
  font-weight: 500;
  font-size: clamp(52px, 9.6vw, 144px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.mono { font-family: var(--mono); font-weight: 400; }
.serif { font-family: var(--serif); }

.bracket { white-space: nowrap; }
.nb { white-space: nowrap; }

/* --- Marken in eckigen Klammern -------------------------------------------
   Eine Konvention, zwei Bedeutungen: [ ECHT ] steht bei Schritten, die täglich
   laufen, [ INSZENIERT ] bei gestellten Bildern. Die Erklärung dazu steht als
   erste Leiste unter dem Hero. Farbe ist nie der einzige Träger — das Wort
   selbst sagt es. */
.tag {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-echt { color: var(--zst); }
.tag-insz { color: rgba(245, 234, 219, 0.55); }

/* --- Erklärende Sätze -------------------------------------------------------
   Ein Mikro-Label ist kurz: eine Marke, eine Bezeichnung, eine Zeit. Sobald
   ein ganzer Satz etwas erklärt, wird er lesbar gesetzt — gemischte Schreibung,
   normale Laufweite, 15,5 px. Der Grund ist inhaltlich: die ehrlichen Stellen
   dieser Seite (was täglich läuft, was gestellt ist, wer da spricht) standen
   vorher in Versalien mit 14 px und 50 % Deckkraft, also im am schwersten
   lesbaren Stil der ganzen Seite. Genau diese Sätze tragen aber die Aussage.
   Gedämpft wird über die Creme-Farbe mit Alpha, nicht über opacity, damit die
   Marken in eckigen Klammern darin ihre volle Farbe behalten. */
.satz {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(245, 234, 219, 0.72);
}
.satz .tag { font-size: 11px; }

/* --- Icon-System (Design-System Teil A) -----------------------------------
   viewBox 24, Nutzfläche 2–22, Strich 1.6, runde Kappen, pathLength 100.
   .ik-b wird gezeichnet (höchstens 5 Elemente), .ik-m ist genau EIN bewegtes
   Teil. Startzustand nur über mv-*, nie als style-Attribut. */
.ik { width: 24px; height: 24px; display: block; flex: none; color: inherit; overflow: visible; }
.ik-32 { width: 32px; height: 32px; }
.ik-40 { width: 40px; height: 40px; stroke-width: 1.4; }
.ik-b > * { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ik-m { transform-box: fill-box; transform-origin: 50% 50%; }
.ik-m.ik-akz { fill: var(--accent); stroke: var(--accent); }
.ik-m.ik-zst { fill: var(--zst); stroke: var(--zst); }
/* Ein bewegter Teil, der eine Linie ist und kein Punkt, bleibt ungefüllt: sonst
   wird aus dem Häkchen am Versand-Icon ein Klecks (bei 6-facher Vergrösserung
   gesehen). Das Attribut fill="none" im SVG genügt dafür nicht — jede CSS-Regel
   schlägt ein Präsentations-Attribut. */
.ik-m.ik-strich { fill: none; }

/* Eintritt nur mit JavaScript; ohne JS ist das Icon fertig gezeichnet. */
html.js .ik-an:not(.an) .ik-b > * { stroke-dashoffset: 100; }
html.js .ik-an:not(.an) .ik-m { opacity: 0; }
html.js .ik-an:not(.an) .ik-m.mv-links { transform: translateX(-3px); }
html.js .ik-an:not(.an) .ik-m.mv-rechts { transform: translateX(3px); }
html.js .ik-an:not(.an) .ik-m.mv-hoch { transform: translateY(-3px); }
html.js .ik-an:not(.an) .ik-m.mv-eck { transform: translate(-2px, -2px); }
html.js .ik-an:not(.an) .ik-m.mv-klein { transform: scale(0.4); }
html.js .ik-an .ik-b > * { transition: stroke-dashoffset var(--t3) var(--ea) var(--an-v); }
html.js .ik-an .ik-b > *:nth-child(2) { transition-delay: calc(var(--an-v) + 70ms); }
html.js .ik-an .ik-b > *:nth-child(3) { transition-delay: calc(var(--an-v) + 140ms); }
html.js .ik-an .ik-b > *:nth-child(4) { transition-delay: calc(var(--an-v) + 210ms); }
html.js .ik-an .ik-b > *:nth-child(5) { transition-delay: calc(var(--an-v) + 280ms); }
html.js .ik-an .ik-m {
  transition: opacity var(--t2) var(--ea) calc(var(--an-v) + 260ms),
              transform var(--t2) var(--ea-fest) calc(var(--an-v) + 260ms);
}
/* Hover: der bewegte Teil rückt 2 px vor, sonst nichts. Der Tastaturweg zeigt
   dasselbe — Hover ist nie der einzige Zugang zu einem Zustand. */
.kbtn:hover .ik-m,
.kbtn:focus-visible .ik-m {
  transform: translateX(2px);
  transition: transform var(--t2) var(--ea-fest);
}

/* --- Eintrittsmuster (Design-System Teil B) -------------------------------
   Auf dieser Fläche gibt es genau ein Muster: .auf für Blöcke. Es hängt an
   html.js — ohne JavaScript ist alles sichtbar. */
html.js .auf {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t4) var(--ea) var(--an-v),
              transform var(--t4) var(--ea) var(--an-v);
}
html.js .auf.an { opacity: 1; transform: none; }

/* --- Bild-Bühnen mit Gradient-Fallback -------------------------------------
   Mehrschichtige Hintergründe: fehlt das WebP, bleibt der warme Verlauf. */
.ph {
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ph-hero {
  background-image:
    url("img/hero-desk.webp"),
    radial-gradient(120% 90% at 50% 10%, #4A2F1B 0%, #2A1810 55%, #140D07 100%);
}
.ph-hand {
  background-image:
    url("img/hand-klappe.webp"),
    radial-gradient(110% 100% at 30% 80%, #5A3A20 0%, #33200F 50%, #140D07 100%);
}
.ph-produkt {
  background-image:
    url("img/produkt-klappe.webp"),
    radial-gradient(90% 90% at 50% 42%, #55371E 0%, #2E1C0E 62%, #1A100A 100%);
}
.ph-mesh {
  background-image:
    url("img/macro-mesh.webp"),
    radial-gradient(130% 110% at 60% 40%, #46301C 0%, #241609 55%, #120B06 100%);
}
.ph-nacht-server {
  background-image:
    url("img/nacht-server.webp"),
    linear-gradient(200deg, #33251C 0%, #17100B 70%);
}
.ph-nacht-0630 {
  background-image:
    url("img/nacht-0630.webp"),
    linear-gradient(160deg, #4A3016 0%, #1C1108 70%);
}
.ph-nacht-studio {
  background-image:
    url("img/nacht-studio.webp"),
    linear-gradient(180deg, #2C1F16 0%, #140D07 75%);
}
.ph-roboter {
  background-image:
    url("img/roboter-klappe.webp"),
    radial-gradient(100% 100% at 50% 30%, #4E331C 0%, #221408 65%);
}

/* --- Nav -------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(20, 13, 7, 0.82) 0%, rgba(20, 13, 7, 0) 100%);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* Fortschritt unter der Kopfzeile — die Fassung für schmale Schirme, wo die
   Schiene rechts nicht steht. Träger und Balken, beide ohne Übergang: das ist
   eine Anzeige, keine Bewegung. */
.nav::before,
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  display: none;
}
.nav::before { background: rgba(245, 234, 219, 0.16); }
.nav::after {
  background: var(--accent);
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: 0 50%;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-brand span { color: var(--accent); }

.nav-act { display: flex; align-items: center; gap: 10px; flex: none; }

/* Menü-Knopf — erscheint erst, wenn die Zeile nicht mehr trägt. Gleiches
   Muster wie die Kopfzeile im Logbuch (.bnav-burger), damit beide Ebenen der
   Site sich gleich bedienen. */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(245, 234, 219, 0.24);
  border-radius: 2px;
  color: var(--cream);
  transition: border-color var(--t1) var(--ea), transform 90ms var(--ea-fest);
}
.nav-burger:hover,
.nav-burger:focus-visible { border-color: var(--accent); }
.nav-burger:active { transform: scale(0.96); }
.nav-burger i { display: block; position: relative; width: 18px; height: 11px; }
.nav-burger i::before, .nav-burger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--t3) var(--ea), width var(--t3) var(--ea);
}
.nav-burger i::before { top: 0; }
.nav-burger i::after { bottom: 0; width: 12px; }
.nav-burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i::after { width: 18px; transform: translateY(-5px) rotate(-45deg); }

.nav-menu { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); list-style: none; }
.nav-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.nav-menu a:hover, .nav-menu a:focus-visible { opacity: 1; }
.nav-menu a.is-active {
  opacity: 1;
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
}

/* --- Fortschritts-Schiene rechts --------------------------------------------
   Die Figur «Der Takt» stehend: Sprossen im Abstand von 8 px als Träger, der
   zurückgelegte Teil wird durchgezogen. Nur transform, kein height je Bild.
   Die Schiene liegt über der Kopfzeile (61 > 60), damit die cremefarbene Marke
   am Anfang nicht hinter dem Verlauf der Kopfzeile liegt — gemessen: Marke
   0 bis 107 px, Kopfzeile 0 bis 72 px. Die Linie selbst setzt dafür erst unter
   der Kopfzeile ein: Träger und zurückgelegter Teil stehen als Pseudo-Elemente
   und werden oben ausmaskiert, die Marke als echtes Kind bleibt unmaskiert.
   Ab 861 px ist der Menü-Knopf weg, unter 901 px die Schiene — die beiden
   treffen sich also nie in derselben Ecke. */
.progress-rail {
  position: fixed;
  top: 0;
  right: 18px;
  bottom: 0;
  z-index: 61;
  width: 1px;
  pointer-events: none;
}
.progress-rail::after { /* Träger: Sprossen im Abstand von 8 px, oben ausmaskiert */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    rgba(245, 234, 219, 0.26) 0 6px, rgba(245, 234, 219, 0) 6px 14px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0,
    transparent calc(var(--nav-h) - 10px), #000 calc(var(--nav-h) + 14px));
  mask-image: linear-gradient(180deg, transparent 0,
    transparent calc(var(--nav-h) - 10px), #000 calc(var(--nav-h) + 14px));
}
/* Der zurückgelegte Teil beginnt unter der Kopfzeile und wird von dort
   gestreckt. Keine Maske: sie würde mit dem scaleY mitskalieren und den
   Schnitt nach oben wandern lassen. */
.progress-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nav-h) + 6px);
  bottom: 0;
  background: var(--cream);
  opacity: 0.42;
  transform: scaleY(var(--fortschritt, 0));
  transform-origin: 50% 0;
}
.progress-tab {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 14px 0;
  background: var(--cream);
  color: var(--ink);
  border-radius: 13px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* --- Szenen-Grundlayout ------------------------------------------------------ */
.scene { position: relative; }
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stage-media {
  position: absolute;
  inset: -6%;
  z-index: 0;
  will-change: transform;
}
.stage-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 13, 7, 0.45) 0%, rgba(20, 13, 7, 0.05) 38%, rgba(20, 13, 7, 0.62) 100%);
}
.hero .stage-shade {
  background: linear-gradient(180deg, rgba(20, 13, 7, 0.55) 0%, rgba(20, 13, 7, 0.22) 34%, rgba(20, 13, 7, 0.78) 100%);
}
.stage-content { position: relative; z-index: 2; }

/* --- Szene 1 · Hero ---------------------------------------------------------- */
.hero .stage-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 24px) var(--pad) 30px;
}
.hero-claim { margin-bottom: 10px; }
.hero-wordmark {
  font-weight: 500;
  font-size: clamp(64px, 16.4vw, 300px);
  line-height: 0.9;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin-left: -0.04em;
}
.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(22px, 4vh, 48px);
}
.glass-card {
  max-width: 400px;
  padding: 22px 24px 24px;
  border: 1px solid rgba(245, 234, 219, 0.16);
  border-radius: 14px;
  background: rgba(245, 234, 219, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card { background: rgba(20, 13, 7, 0.72); }
}
.glass-card .dotline { margin: var(--r2) 0; }
.glass-card p { font-size: 21px; line-height: 1.45; }

/* Weg von der Übertreibung zur Belegleiste. Die Seite spielt ein Produkt, das
   es nicht zu kaufen gibt — wer im ersten Bild wissen will, was daran täglich
   läuft, soll dafür einen Weg im ersten Bild finden und nicht scrollen müssen. */
.hero-mehr {
  display: inline-flex;
  align-items: center;
  gap: var(--r1);
  min-height: 44px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  color: var(--accent);
  transition: color var(--t1) var(--ea);
}
.hero-mehr .pf { display: inline-block; transition: transform var(--t2) var(--ea-fest); }
.hero-mehr:hover, .hero-mehr:focus-visible { color: var(--cream); }
.hero-mehr:hover .pf, .hero-mehr:focus-visible .pf { transform: translateY(2px); }

.dotline {
  height: 1px;
  background-image: linear-gradient(90deg, rgba(245, 234, 219, 0.55) 22%, transparent 0);
  background-size: 7px 1px;
  background-repeat: repeat-x;
}

.hero-meta { text-align: right; }
.hero-meta .lbl { display: block; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  transition: opacity 0.4s ease;
}
.scroll-cue .chev { display: inline-block; margin-right: 10px; }
.is-scrolled .scroll-cue { opacity: 0; }

/* --- Leiste · Die Regeln dieser Seite ----------------------------------------
   Steht bewusst direkt hinter dem Hero: wer die Übertreibung sieht, soll drei
   Zeilen später wissen, was daran läuft und was gestellt ist. */
.beleg {
  position: relative;
  padding: clamp(30px, 5.5vh, 58px) var(--pad);
  border-top: 1px solid rgba(245, 234, 219, 0.14);
  border-bottom: 1px solid rgba(245, 234, 219, 0.14);
  background: var(--bg);
}
/* Sprungziel für den Weg aus dem ersten Bild. Es liegt eine Kopfzeilenhöhe plus
   20 px über der Sektion, weil Lenis auf die Oberkante des Ziels springt und
   scroll-margin-top dabei nicht mitrechnet: ohne diesen Vorlauf landet die
   Überschrift «Die Regeln dieser Seite» hinter der Kopfzeile (gemessen 57 px
   bei 72 px Kopfzeile). Ohne JavaScript springt der Browser auf dasselbe
   Element, der Vorlauf stimmt dort genauso. */
.ankerziel {
  position: absolute;
  left: 0;
  top: calc(-1 * (var(--nav-h) + 20px));
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.beleg-in {
  width: min(1040px, 100%);
  margin-inline: auto;
  display: grid;
  gap: var(--r3);
}
.beleg-k { color: var(--accent); }
.beleg-l {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--r2) var(--r3);
  align-items: baseline;
  margin: 0;
}
.beleg-l dt { flex: none; }
.beleg-l dd { margin: 0; font-size: 17px; line-height: 1.5; }
.beleg-p { max-width: 68ch; font-size: 17px; }
@media (max-width: 640px) {
  /* Untereinander gilt: eng innerhalb eines Paars (4 px zwischen Marke und
     Erklärung), weit zwischen den Paaren (--r2). Vorher waren es 4 gegen 6 px,
     damit standen die beiden Paare als ein Block da. */
  .beleg-l { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .beleg-l dd { margin-bottom: var(--r2); }
  .beleg-l dd:last-child { margin-bottom: 0; }
}

/* --- Szene 2 · Läuft mit KI* -------------------------------------------------- */
.ki .stage-content {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 24px) var(--pad) 46px;
}
.ki-head { align-self: center; }
.ki-label { color: var(--accent); margin-bottom: 18px; }
.ki-title {
  font-weight: 500;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.ki-title sup { font-size: 0.45em; vertical-align: 0.7em; color: var(--accent); }
.ki-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 26px;
}
.ki-three { max-width: 460px; text-align: left; }
.ki-three .lbl { line-height: 1.7; }
/* Die Fussnote sagt, welches Werkzeug den Witz darüber möglich macht. Sie ist
   die Aussage der Szene und bekommt darum eine lesbare Zeilenlänge, statt über
   die ganze Bühne zu laufen. */
.ki-star { max-width: 62ch; }

/* --- Szene 3 · arbeitet nachts ------------------------------------------------ */
.nachts { padding: clamp(90px, 14vh, 160px) 0 0; }

.zstack {
  position: relative;
  padding: 0 var(--pad);
  text-align: center;
}
.ztext .zline1 {
  display: block;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1.6vw, 22px);
}
.ztext .zline2 {
  display: block;
  font-weight: 500;
  font-size: clamp(56px, 10.4vw, 176px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.ztext-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  padding: 0 var(--pad);
  clip-path: inset(52% 0 0 0);
  pointer-events: none;
}
.zimg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: clamp(180px, 24vw, 360px);
  aspect-ratio: 1;
  z-index: 1;
  will-change: transform;
}
.zimg .ph { position: absolute; inset: 10%; border-radius: 10px; }
.zstack { min-height: clamp(340px, 44vw, 660px); display: grid; align-content: center; }

/* HUD-Fokus-Rahmen */
.hud-frame {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--hud);
  transition: border-color 0.35s ease;
}
.hud-frame .hud-c {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--hud);
  border-style: solid;
  border-width: 0;
  transition: border-color 0.35s ease;
}
.hud-frame .hud-c.tl { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; }
.hud-frame .hud-c.tr { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.hud-frame .hud-c.bl { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; }
.hud-frame .hud-c.br { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }
.hud-frame .hud-tag {
  position: absolute;
  top: -26px;
  left: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hud);
  transition: color 0.35s ease;
}

/* Horizontale Galerie */
.gal-pin { position: relative; overflow: clip; margin-top: clamp(70px, 10vh, 130px); }
.gal-track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  padding: 40px var(--pad) 64px;
  width: max-content;
  will-change: transform;
}
/* Die Breite sitzt am Eintrag, nicht am Bild: sonst zieht eine lange
   Bildunterschrift die Spalte auf (bei 375 px lief sie über den Rand hinaus). */
.gal-item { flex: 0 0 auto; width: clamp(220px, 26vw, 380px); }
.gal-item.gal-wide { width: clamp(260px, 32vw, 470px); }
.gal-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: clip;
}
.gal-photo.wide { aspect-ratio: 4 / 3; }
.gal-cap { margin-top: 12px; }

/* Wischhinweis — nur dort, wo die Galerie von Hand gescrollt wird. Am Schirm
   ab 901 px zieht die Bühne selbst durch, dann wäre der Satz falsch. */
.gal-hinweis { display: none; }
.gal-pfeil { display: inline-block; margin-left: 6px; }

/* Rotes Poster mit Fake-Chat */
.poster {
  width: clamp(280px, 32vw, 460px);
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 14px;
  background: var(--red);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.poster-klappe { aspect-ratio: 1; border-radius: 10px; }
.poster .lbl { text-align: center; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-answer {
  align-self: flex-end;
  max-width: 85%;
  padding: 10px 16px;
  border-radius: 14px 14px 4px 14px;
  background: var(--cream);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  visibility: hidden;
}
.chat.answered .chat-answer { opacity: 1; transform: none; visibility: visible; }
.chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 234, 219, 0.35);
  border-radius: 999px;
}
.chat-q {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.chat-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform var(--t2) var(--ea-fest);
}
.chat-send:hover,
.chat-send:focus-visible:enabled { transform: translateY(-2px); }
.chat-send:active { transform: translateY(0) scale(0.99); transition-duration: 90ms; }
.chat-send:disabled { opacity: 0.62; transform: none; cursor: default; }

/* --- Szene 4 · Funktionen A ---------------------------------------------------- */
.schnitt {
  position: relative;
  padding: clamp(100px, 16vh, 190px) var(--pad);
  background:
    radial-gradient(90% 70% at 70% 30%, rgba(58, 37, 23, 0.55) 0%, rgba(20, 13, 7, 0) 70%),
    var(--bg);
  overflow: clip;
}
.schnitt-grid {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}
/* Pflicht: ohne min-width:0 hebt ein einziges langes Wort (die Formel) die
   Spur über die Fläche, und overflow:clip schneidet dann die ganze Szene ab.
   Bei 375 px fehlten so 81 px an jeder Zeile. */
.schnitt-grid > * { min-width: 0; }
.schnitt-copy .lbl { color: var(--accent); margin-bottom: 20px; }
.schnitt-copy h2 { margin-bottom: 22px; }
.schnitt-copy p { max-width: 42ch; }

.wave-stage { position: relative; }
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: clamp(150px, 22vw, 260px);
}
.wave i {
  flex: 1 1 auto;
  min-width: 2px;
  height: calc(var(--h, 40) * 1%);
  background: var(--cream);
  opacity: 0.62;
  border-radius: 2px;
  transform-origin: center;
}
.wave i.cut { background: var(--accent); opacity: 0.95; }
.path-overlay {
  position: absolute;
  inset: -12% -2%;
  width: 104%;
  height: 124%;
  pointer-events: none;
  overflow: visible;
}
.path-overlay .bez {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.path-overlay .handle { stroke: rgba(245, 234, 219, 0.45); stroke-width: 1; }
.path-overlay .anchor { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.path-overlay .handle-dot { fill: none; stroke: rgba(245, 234, 219, 0.6); stroke-width: 1; }

.schnitt-specs {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 7vh, 90px);
  padding-top: 34px;
  border-top: 1px solid rgba(245, 234, 219, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px 40px;
}
.formel {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.2;
  overflow-wrap: break-word;
}
.schnitt-foot { flex-basis: 100%; }

/* --- Szene 5 · Versprecher-Radar ------------------------------------------------ */
.radar .stage-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(28px, 5vh, 56px);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 30px) var(--pad) 60px;
}
.radar h2 .blur-word { display: inline-block; will-change: filter; }
.radar-sub { max-width: 52ch; }
.radar-panel {
  max-width: 560px;
  padding: 24px 26px 28px;
  border: 1px solid rgba(245, 234, 219, 0.2);
  border-radius: 14px;
  background: rgba(20, 13, 7, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.radar-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.radar-readout output { color: var(--accent); font-size: 24px; }
.rs-slider {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 44px; /* Klickziel 44 px hoch, die Spur bleibt 2 px dünn */
  background: transparent;
  cursor: ew-resize;
}
.rs-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--accent) calc(var(--fill, 50) * 1%), rgba(245, 234, 219, 0.25) 0);
  border-radius: 1px;
}
.rs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--cream);
  border: 6px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(245, 234, 219, 0.5);
}
.rs-slider::-moz-range-track {
  height: 2px;
  background: rgba(245, 234, 219, 0.25);
  border-radius: 1px;
}
.rs-slider::-moz-range-progress { height: 2px; background: var(--accent); }
.rs-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 0;
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(245, 234, 219, 0.5);
}
.rs-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.5;
}
.rs-note { margin-top: 16px; min-height: 1.5em; }

/* --- Szene 6 · System / Protokoll-Auszüge ---------------------------------------- */
.system {
  padding: clamp(100px, 16vh, 190px) var(--pad);
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(229, 105, 16, 0.09) 0%, rgba(20, 13, 7, 0) 70%),
    var(--bg);
}
.system-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 26px;
  margin-bottom: clamp(36px, 6vh, 70px);
}
.system-head .stars { color: var(--accent); letter-spacing: 0.3em; }
.system-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.system-glow {
  position: relative;
  margin: 0 auto clamp(36px, 6vh, 64px);
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 1;
}
.system-glow::before {
  content: "";
  position: absolute;
  inset: -34%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(229, 105, 16, 0.28) 0%, rgba(229, 105, 16, 0) 70%);
}
.system-glow .ph { position: absolute; inset: 0; border-radius: 12px; }

.review { padding: 26px 0; border-top: 1px solid rgba(245, 234, 219, 0.14); }
.review:last-child { border-bottom: 1px solid rgba(245, 234, 219, 0.14); }
.review .stars { color: var(--accent); letter-spacing: 0.3em; font-size: 14px; }
.review blockquote {
  margin: 12px 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.35;
}
.einsatz .gal-photo { width: 100%; }
.einsatz .lbl { margin-bottom: 16px; }
.einsatz figcaption { margin-top: 12px; }

/* --- Szene 7 · Konfigurator -------------------------------------------------------- */
.konfig {
  padding: clamp(100px, 16vh, 190px) var(--pad);
  text-align: center;
  overflow: clip;
}
.konfig h2 { margin-bottom: 12px; }
.konfig-sub { max-width: 46ch; margin: 0 auto; }
.konfig-stage {
  position: relative;
  width: clamp(220px, 30vw, 400px);
  aspect-ratio: 1;
  margin: clamp(40px, 7vh, 80px) auto clamp(30px, 5vh, 56px);
}
.konfig-stage .ph { position: absolute; inset: 8%; border-radius: 12px; }
.konfig-hint {
  width: min(1120px, 100%); /* gleiche linke Kante wie die Karten darunter */
  margin: clamp(26px, 4.5vh, 44px) auto 0;
  text-align: left;
}
.konfig-hint p { max-width: 66ch; font-size: 17px; }
/* Ohne JavaScript lässt sich kein Modul wählen. Dann steht die Anleitung dazu
   auch nicht da — der Rest des Satzes bleibt richtig. */
html:not(.js) .konfig-tip { display: none; }
html:not(.js) .kette .chip { cursor: default; }
/* Die Zeile gehört zur Kette und steht darum auf derselben Achse wie die Karten
   darüber, nicht mittig gegen sie. So liest man Karte und Auskunft als ein Paar. */
.konfig-spec {
  width: min(1120px, 100%);
  margin: var(--r4) auto 0;
  min-height: 1.6em;
  text-align: left;
}
/* Die Zeile ist ein ganzer Satz, also lesbar gesetzt — sie behält aber die
   Farbe des gewählten Moduls. Der Satz kommt aus main.js, darum keine Marke
   darin. */
.konfig-spec .satz {
  display: block;
  max-width: 60ch;
  color: var(--khud, var(--cream));
  transition: color var(--t2) var(--ea);
}

/* --- Modul-Kette ------------------------------------------------------------
   Vier Module als Ablauf, nicht als Aufzählung: Knoten auf einer Schiene, und
   zwischen zwei Knoten steht, was weitergegeben wird. Die Schiene ist die
   Figur «Der Takt» (Sprossen im Abstand von 8 px) als CSS-Muster, darum läuft
   sie ohne Überlauf über jede Breite. Am Schirm waagrecht, auf dem Telefon
   senkrecht — dieselbe Aussage, zwei Fassungen.
   Achtung: der Knopf behält die Klasse .chip, weil main.js daran hängt. */
.kette {
  list-style: none;
  width: min(1120px, 100%);
  margin: var(--r3) auto 0;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(12px, 1.6vw, 26px);
}
.kglied {
  display: grid;
  grid-template-rows: 20px 22px auto;
  min-width: 0;
}
/* Mit Subgrid liegen Flusszeile, Schiene und Knopf über alle vier Spalten auf
   derselben Höhe, auch wenn eine Flusszeile zweizeilig wird. Ohne Subgrid
   greift die feste Zeilenhöhe darüber. */
@supports (grid-template-rows: subgrid) {
  .kette { grid-template-rows: auto 22px auto; }
  .kglied { grid-row: span 3; grid-template-rows: subgrid; }
}
.kschiene {
  grid-row: 2;
  position: relative;
  color: rgba(245, 234, 219, 0.34);
}
.kschiene::before { /* Knoten */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 1.6px solid currentColor;
  border-radius: 99px;
  background: var(--bg);
  transition: background-color var(--t1) var(--ea), border-color var(--t1) var(--ea);
}
.kschiene::after { /* Sprossen bis zum nächsten Knoten */
  content: "";
  position: absolute;
  left: 15px;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  background: repeating-linear-gradient(90deg,
    currentColor 0 1.6px, transparent 1.6px 8px);
}
.kglied-end .kschiene::after { display: none; }
.kglied:has(.chip[aria-pressed="true"]) .kschiene::before {
  background: var(--khud, var(--accent));
  border-color: var(--khud, var(--accent));
}

/* Was von einem Modul zum nächsten weitergeht. Steht bewusst über dem Stück
   Schiene und nicht über dem Knoten (Sprossen beginnen bei 15 px): so gehört
   die Zeile sichtbar zum Abschnitt zwischen zwei Modulen, nicht zum Modul. */
.kfluss {
  grid-row: 1;
  justify-self: start;
  align-self: end;
  padding-bottom: 5px;
  padding-left: 22px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 234, 219, 0.55);
}
.kpfeil { display: inline-block; margin-right: 7px; }

.kette .chip {
  grid-row: 3;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 2px clamp(10px, 1vw, 14px);
  width: 100%;
  min-height: 44px;
  margin-top: var(--r2);
  padding: 16px 16px 18px;
  border: 1px solid rgba(245, 234, 219, 0.14);
  border-radius: 10px;
  background: rgba(245, 234, 219, 0.04);
  text-align: left;
  transition: border-color var(--t1) var(--ea), background-color var(--t1) var(--ea),
              transform var(--t2) var(--ea);
}
/* Der Tastaturweg zeigt denselben Zustand wie die Maus — sonst hebt sich unter
   der Maus eine Karte, die beim Durchtabben flach liegen bleibt. */
.kette .chip:hover,
.kette .chip:focus-visible { border-color: rgba(245, 234, 219, 0.42); transform: translateY(-2px); }
.kette .chip:active { transform: translateY(0) scale(0.99); transition-duration: 90ms; }
.kette .chip .ik { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; color: rgba(245, 234, 219, 0.8); }
.knum {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(245, 234, 219, 0.5);
}
.kname {
  grid-column: 2;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* Werkzeugname in Mono, wie alle Maschinen-Angaben auf dieser Seite (Nummer,
   Flusszeile, «gewählt», Zeiten, Marken in Klammern). Vorher war diese eine
   Zeile in der Grotesk gesetzt und fiel im Kartenfuss aus der Reihe. */
.kwerk {
  grid-column: 1 / -1;
  margin-top: var(--r1);
  padding-top: 9px;
  border-top: 1px dashed rgba(245, 234, 219, 0.16);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 234, 219, 0.6);
}
.kwerk .mono { letter-spacing: 0.04em; }
/* Werkzeuglogo vor der Modul-Zeile (27.07.). Originalform aus der
   Simple-Icons-Sammlung, inline und monochrom über currentColor — kein externer
   Abruf, keine KI-Nachbildung. Der Markenhinweis im Fuss deckt die Nennung ab.
   inline-flex am span würde die Zeile aus dem Grid kippen, darum nur das SVG
   ausrichten. */
.kwerk .tlg {
  width: 13px; height: 13px; fill: currentColor;
  display: inline-block; vertical-align: -2px; margin-right: 7px;
}
/* Der Platz bleibt immer reserviert (visibility, nicht display), sonst wächst
   die gewählte Karte und die Kette springt beim Wechseln. */
.kaktiv {
  grid-column: 1 / -1;
  visibility: hidden;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khud, var(--accent));
}
/* Gewählt: Rahmen, Knoten und Wort — Farbe ist nie der einzige Träger */
.kette .chip[aria-pressed="true"] {
  background: rgba(245, 234, 219, 0.07);
  border-color: var(--khud, var(--accent));
  color: var(--cream);
}
.kette .chip[aria-pressed="true"] .ik { color: var(--khud, var(--accent)); }
.kette .chip[aria-pressed="true"] .kaktiv { visibility: visible; }

.konfig .hud-frame { border-color: var(--khud, var(--hud)); }
.konfig .hud-frame .hud-c { border-color: var(--khud, var(--hud)); }
.konfig .hud-frame .hud-tag { color: var(--khud, var(--hud)); }

/* --- Szene 8 · Abspann / Footer ------------------------------------------------------ */
.abspann {
  padding: clamp(110px, 18vh, 210px) var(--pad) 40px;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(58, 37, 23, 0.5) 0%, rgba(20, 13, 7, 0) 70%),
    var(--bg);
}
.abspann-claim { max-width: 15ch; }
.abspann-lead { max-width: 46ch; margin-top: 26px; }

.abspann-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px 40px;
  margin-top: clamp(50px, 8vh, 90px);
}
.abspann-cols .lbl { display: block; margin-bottom: 10px; }
.abspann-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.abspann-cols a:hover,
.abspann-cols a:focus-visible { text-decoration: underline dotted; text-underline-offset: 5px; }
.abspann-cols li { list-style: none; }

.share-box {
  margin: clamp(56px, 9vh, 110px) auto 0;
  max-width: 560px;
  padding: 30px 26px;
  border: 1px dashed rgba(245, 234, 219, 0.4);
  border-radius: 14px;
  text-align: center;
}
.share-box .lbl { line-height: 2; }
.copy-btn {
  margin-top: 18px;
  min-height: 46px;
  padding: 12px 26px;
  border: 1px solid rgba(245, 234, 219, 0.5);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.copy-btn:hover,
.copy-btn:focus-visible { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.copy-btn:active { transform: translateY(0) scale(0.99); transition-duration: 90ms; }
.copy-btn.copied { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* --- Figur «Der Takt» · Trenner über der Fusszeile ---------------------------
   Links fünf ungleiche Striche von Hand, dann zwei Übergangsstriche, rechts das
   exakte Raster. Der Akzentstrich sitzt beim siebten Rasterstrich (48 + 6 × 8),
   genau einmal. Handteil als SVG, Taktteil als CSS-Muster: läuft ohne Überlauf
   über jede Breite. */
.takt {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
  margin-top: clamp(50px, 8vh, 96px);
  overflow: hidden;
}
.takt-hand { width: 48px; height: 24px; flex: none; color: rgba(245, 234, 219, 0.5); }
.takt-raster {
  flex: 1;
  height: 6px;
  min-width: 0;
  color: rgba(245, 234, 219, 0.22);
  background: repeating-linear-gradient(90deg, currentColor 0 1.6px, transparent 1.6px 8px);
}
.takt-akz {
  position: absolute;
  left: 96px;
  top: 4.5px;
  width: 1.6px;
  height: 15px;
  background: var(--accent);
  border-radius: 1px;
}
html.js .takt .takt-hand path { stroke-dasharray: 100; stroke-dashoffset: 100; }
html.js .takt.an .takt-hand path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t3) var(--ea); }
html.js .takt .takt-raster { transform: scaleX(0); transform-origin: 0 50%; }
html.js .takt.an .takt-raster { transform: none; transition: transform var(--t4) var(--ea) 200ms; }
html.js .takt .takt-akz { opacity: 0; }
html.js .takt.an .takt-akz { opacity: 1; transition: opacity var(--t2) var(--ea) 620ms; }

.foot-legal {
  margin-top: var(--r4);
  padding-top: 26px;
  border-top: 1px solid rgba(245, 234, 219, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
}
.foot-legal .links { display: flex; gap: 24px; }
.foot-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.foot-legal a:hover,
.foot-legal a:focus-visible { text-decoration: underline dotted; text-underline-offset: 5px; }
.foot-disclaimer { margin-top: 14px; max-width: 78ch; }

/* Pflicht-Hinweis: unübersehbar, kein Kleingedrucktes. Auf der Startseite oben
   (.satire-karte) und im Footer jeder Seite (.foot-erklaerung). */
.foot-erklaerung {
  margin-top: 30px;
  max-width: 78ch;
  padding: 16px 20px;
  border: 1px solid rgba(229, 105, 16, 0.55);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: rgba(229, 105, 16, 0.08);
  font-size: 16px;
  line-height: 1.6;
}
.foot-erklaerung strong { color: var(--accent); font-weight: 600; }
.satire-karte {
  margin-top: 0;
  max-width: 68ch;
  padding: 16px 20px;
  border: 1px solid rgba(229, 105, 16, 0.55);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: rgba(229, 105, 16, 0.08);
  font-size: 16px;
  line-height: 1.6;
}
.satire-karte strong { color: var(--accent); font-weight: 600; }

/* --- Reveals (JS setzt Startzustände — ohne JS/Motion ist alles sichtbar) ------
   Kein will-change an .reveal: das sind rund zwanzig Elemente, die genau einmal
   eintreten und danach liegen bleiben. Ein dauerhaft gesetztes will-change hält
   für jedes davon eine eigene Ebene fest; Android verwirft die Ebenen dann und
   es flackert (auf der Matthäus-Seite gemessen). Dauerhaft bleibt es nur an den
   drei Flächen, die am Schirm wirklich am Rad hängen: .stage-media, .zimg und
   .gal-track — und auch dort nur oberhalb von 900 px. */

/* --- Responsive ------------------------------------------------------------------ */
@media (max-width: 900px) {
  :root { --nav-h: 60px; }
  body { font-size: 18px; }
  .nav { padding: 0 16px; }
  .nav-menu { gap: 12px; }
  .nav-menu a { letter-spacing: 0.08em; font-size: 12px; }
  /* Die Schiene rechts trägt hier nicht. Der Fortschritt steht darum als
     2-px-Balken unter der Kopfzeile — gleiche Aussage, andere Fassung. */
  .progress-rail { display: none; }
  .nav::before, .nav::after { display: block; }
  /* Dauerhaftes will-change hält Ebenen fest, die mobil niemand bewegt */
  .zimg, .gal-track, .stage-media { will-change: auto; }
  /* Cue (bottom 26px) und hero-meta trennen: Meta-Zeile läuft mobil volle Breite */
  .hero .stage-content { padding-bottom: 84px; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-meta { text-align: left; }

  /* Szene 2 ohne Pin: der Text landet ohne Kamerafahrt mitten im hellen Teil
     des Bildes. Der Verlauf wird darum unten und oben dichter. */
  .ki .stage-shade {
    background: linear-gradient(180deg,
      rgba(20, 13, 7, 0.72) 0%, rgba(20, 13, 7, 0.38) 26%,
      rgba(20, 13, 7, 0.86) 66%, rgba(20, 13, 7, 0.95) 100%);
  }
  .ki-foot { align-items: flex-start; }
  .ki-three { margin-left: 0; }

  /* Szene 3 ohne Parallaxe: die Klappe lag über dem Wort «dass es» und darunter
     blieben 150 px leere Fläche. Mobil steht sie darum im Fluss unter dem Titel,
     die vordere Textebene entfällt (sie funktioniert nur hinter dem Bild). */
  .nachts { padding-top: clamp(60px, 9vh, 110px); }
  .zstack { min-height: 0; }
  .ztext-front { display: none; }
  /* Mobil trägt das Bild die Szene allein: die vordere Textebene und die
     Parallaxe fallen weg, also darf die Klappe nicht als Briefmarke stehen
     bleiben. Gemessen bei 375 px im 360 px breiten Feld: vorher 203 px breit mit
     79 px toter Fläche je Seite, jetzt 293 px mit 34 px — 45 px je Seite gehen
     ans Bild. Also 78 vw, dazu mehr Luft nach dem Titel, damit die
     Marke über dem Rahmen (26 px darüber) nicht am Text klebt. */
  .zimg {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(300px, 78vw);
    margin: var(--r5) auto 0;
  }
  .gal-hinweis { display: block; padding: 0 var(--pad); margin-top: var(--r4); }
  .gal-pin { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin-top: var(--r1); }
  /* Von Hand gescrollt wird die Reihe oben ausgerichtet. Mittig standen die
     Einträge wegen der ungleichen Höhen (Poster 492 px gegen Breitbild 231 px)
     um bis zu 93 px versetzt — und genau diese 93 px lagen als Lücke zwischen
     dem Wischhinweis und dem ersten Bild. Am Schirm bleibt die Reihe mittig:
     dort zieht die Bühne selbst durch, und die Mitte ist die Blickachse. */
  .gal-track { padding-top: 16px; padding-bottom: 40px; align-items: flex-start; }
  .gal-item { scroll-snap-align: center; }

  .schnitt-grid { grid-template-columns: 1fr; }
  .system-grid { grid-template-columns: 1fr; }
  .radar-panel { max-width: none; }
  .glass-card p { font-size: 18px; }

  /* Kette senkrecht: Schiene links, Knoten auf Höhe des Icons, Sprossen laufen
     bis zum nächsten Knoten weiter. */
  .kette { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .kglied { grid-row: auto; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; }
  .kschiene { grid-column: 1; grid-row: 1 / span 2; }
  .kschiene::before { left: 4px; top: 27px; margin-top: 0; }
  .kschiene::after {
    left: 5.5px;
    right: auto;
    top: 41px;
    bottom: -30px;
    width: 6px;
    height: auto;
    margin-top: 0;
    background: repeating-linear-gradient(180deg, currentColor 0 1.6px, transparent 1.6px 8px);
  }
  .kette .chip { grid-column: 2; grid-row: 1; margin-top: 0; }
  .kfluss { grid-column: 2; grid-row: 2; align-self: start; padding: 10px 0 20px; }
  /* Senkrechte Kette, senkrechter Pfeil: die Richtung im Zeichen stimmt mit der
     Richtung der Schiene daneben zusammen. */
  .kpfeil { transform: rotate(90deg); }
  /* Senkrecht steht links eine 26 px breite Schienenspur. Hinweis und Auskunft
     rücken um denselben Betrag ein, sonst stimmt die linke Kante zu den Karten
     nicht (gemessen bei 880 px: Hinweis 35, Karte 61). */
  .konfig-hint, .konfig-spec { padding-left: 26px; }
}

/* Umbruch der Kopfzeile bei 860 px — gleicher Punkt wie im Logbuch */
@media (max-width: 860px) {
  .nav-brand { font-size: 12px; letter-spacing: 0.14em; }

  /* Ohne JavaScript liesse sich ein zugeklapptes Menü nie öffnen. Dann bleibt
     die Zeile darum eine Zeile und darf umbrechen; der Knopf erscheint nicht. */
  html:not(.js) .nav { flex-wrap: wrap; height: auto; padding: 6px 16px 10px; }
  html:not(.js) .nav-menu { width: 100%; flex-wrap: wrap; gap: 0 14px; }
  html:not(.js) .nav-menu a { min-height: 44px; }
  html:not(.js) .chat-send { display: none; }

  html.js .nav-burger { display: inline-flex; }
  /* Aus der Zeile wird ein Blatt unter der Kopfzeile.
     absolute (nicht fixed) — top:100% bezieht sich so auf die Kopfzeile. */
  html.js .nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 30;
    background: var(--surface);
    border-top: 1px solid rgba(245, 234, 219, 0.12);
    border-bottom: 1px solid rgba(245, 234, 219, 0.12);
    padding: 4px var(--pad) 18px;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--t3) var(--ea), opacity var(--t2) var(--ea), visibility var(--t3);
  }
  html.js .nav-menu[data-open="1"] { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  html.js .nav-menu li { border-bottom: 1px solid rgba(245, 234, 219, 0.1); }
  html.js .nav-menu li:last-child { border-bottom: 0; }
  html.js .nav-menu a { display: flex; align-items: center; min-height: 52px; font-size: 13px; opacity: 0.75; }
  html.js .nav-menu a.is-active { opacity: 1; text-decoration: none; }
  html.js .nav-menu a.is-active::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: var(--accent);
    margin-right: 10px;
    flex: none;
  }
  body.mnav-offen { overflow: hidden; }
}

@media (max-width: 480px) {
  .hero-wordmark { font-size: clamp(52px, 17vw, 90px); }
  .h-display { font-size: clamp(38px, 11.5vw, 52px); }
  .chat-row { flex-wrap: wrap; }
}

/* --- prefers-reduced-motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .scroll-cue .chev { animation: none !important; }
  /* Endzustand ohne Weg: alles steht da, nichts bewegt sich */
  html.js .auf { opacity: 1; transform: none; }
  html.js .ik-an:not(.an) .ik-b > * { stroke-dashoffset: 0; }
  html.js .ik-an:not(.an) .ik-m { opacity: 1; transform: none; }
  .kbtn:hover .ik-m, .kbtn:focus-visible .ik-m { transform: none; }
  .kette .chip:hover, .kette .chip:focus-visible,
  .chat-send:hover, .chat-send:focus-visible:enabled,
  .log-card:hover, .log-card:focus-visible,
  .hero-mehr:hover .pf, .hero-mehr:focus-visible .pf { transform: none; }
  html.js .takt .takt-hand path { stroke-dashoffset: 0; }
  html.js .takt .takt-raster { transform: none; }
  html.js .takt .takt-akz { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue .chev { animation: cue-bounce 1.8s ease-in-out infinite; }
  @keyframes cue-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }
}

/* --- Logbuch-Teaser (Footer-Szene) ----------------------------------------- */
.log-block { width: min(1040px, 100%); margin: clamp(28px, 5vh, 54px) auto 0; }
.log-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.log-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  border-bottom: 1px solid rgba(245,234,219,.35);
  transition: color var(--t1) var(--ea), border-color var(--t1) var(--ea);
}
.log-more:hover,
.log-more:focus-visible { color: var(--accent); border-color: var(--accent); }
.log-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r2); }
.log-card {
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(245,234,219,.05); border: 1px solid rgba(245,234,219,.12);
  border-radius: 8px; padding: 16px 18px 18px; text-align: left;
  transition: transform var(--t2) var(--ea), border-color var(--t1) var(--ea);
}
/* 2 px, wie alles Neue auf dieser Seite — die 4 px der Bestandskarten werden
   nicht weiterkopiert. */
.log-card:hover,
.log-card:focus-visible { transform: translateY(-2px); border-color: rgba(245,234,219,.3); }
.log-card:active { transform: translateY(0) scale(.99); transition-duration: 90ms; }
.log-kat, .log-datum { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.log-datum { color: rgba(245,234,219,.62); }
.log-titel { font-size: 17px; font-weight: 500; line-height: 1.3; }
@media (max-width: 860px) { .log-grid { grid-template-columns: 1fr; } }

/* --- Markenhinweis im Fuss (27.07.) ------------------------------------------
   Nominative Nutzung fremder Marken, gleiche Fassung wie auf briggeler.ch. */
.foot-marken{max-width:78ch;margin-top:14px;opacity:.55;font-size:12.5px;line-height:1.55}