/* ============================================================
   nur.gruppe — Design-System
   DNA: Brand-Icon-Sheet (Punkt als Lichtquelle, Weight-Kontrast,
   gesperrte Labels, Papierweiß ↔ Near-Black, Bronze-Gold)
   Typo: Outfit (variabel 100–900, Display) + DM Sans (Lesetext)
   ============================================================ */

/* ---------- Fonts (self-hosted, DSGVO-sauber) ---------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display — die Schwester von DM Sans (gleiche Foundry-DNA, designed to
   pair): die Serif spricht Sätze (Statements mit Punkt), Outfit zeigt Marken und
   Namen, DM Sans arbeitet im Fließtext. Nur ein Schnitt (400) — Hierarchie läuft
   über Größe; nie unter --fs-2, nie für Namen/UI. */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Flächen */
  --void:    #0a0a0c;
  --panel:   #141417;
  --paper:   #f5f3ee;
  --paper-2: #edeae3;

  /* Das Licht (Bronze-Gold aus dem Sheet, kein Neon) */
  --gold:      #d9a441;
  --gold-hot:  #ffe9c2;
  --gold-ink:  #8a6212; /* Gold auf hellem Grund, AA-fest für Labels */
  /* Das LICHT ist weiß-heiß (nur = Licht, Reinheit) — Gold bleibt dem ZEICHEN
     (Punkt-Discs, Akzente) vorbehalten. Physik: weißer Kern, warmer Saum. */
  --light-hot: #fdf8ef;

  /* Text auf Dunkel */
  --td:      rgba(247, 245, 240, 0.95);
  --td-mut:  rgba(247, 245, 240, 0.56);
  --td-line: rgba(247, 245, 240, 0.14);

  /* Text auf Licht */
  --tl:      #17161a;
  --tl-mut:  #6b675e;
  --tl-line: rgba(23, 22, 26, 0.12);

  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Gewicht-Skala — EINE Handschrift, jeder Wert hat genau einen Job.
     Regel: Display-strong = --w-bold, Body-strong = --w-semi.
     Das Marken-Duett (--w-wm-*) ist die bewusste Ausnahme außerhalb der Skala. */
  --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;
  --w-wm-b: 800; --w-wm-l: 250;
  /* Tracking-Merkregel: Geometric Sans braucht Minus, Display-Serif fast keins,
     Caps brauchen Plus. */
  --ls-caps: 0.14em;

  /* Fluid Scale — bewusst große Sprünge gegen Monotonie */
  --fs--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.89rem);
  --fs-0:  clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
  --fs-1:  clamp(1.18rem, 1.06rem + 0.6vw, 1.5rem);
  --fs-2:  clamp(1.7rem, 1.3rem + 2vw, 2.9rem);
  --fs-3:  clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem);
  --fs-wm-stage: clamp(2.7rem, 1.5rem + 6.5vw, 6.6rem);
  --fs-wm-hero:  clamp(4.6rem, 1.8rem + 19vw, 16rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--void);
  color: var(--td);
  line-height: 1.65;
  font-weight: var(--w-reg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: #1c1303; }

/* Korn / Atmosphäre — rein dekorativ, unter reduced-motion egal (statisch) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
}

/* ---------- A11y-Grundlagen ---------- */
.skip {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--gold); color: #1c1303; padding: 12px 18px; border-radius: 8px;
  font-weight: var(--w-semi); font-size: var(--fs--1); transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }
.zone-light :focus-visible, header.on-light :focus-visible { outline-color: var(--gold-ink); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Zonen ---------- */
.zone-dark  { background: var(--void); color: var(--td); }
.zone-light { background: var(--paper); color: var(--tl); }

/* ---------- Typo-Bausteine ---------- */
.label {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.66rem, 0.62rem + 0.2vw, 0.78rem);
  font-weight: var(--w-med);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--td-mut);
}
.zone-light .label { color: var(--tl-mut); }
.label .p { color: var(--gold); letter-spacing: 0; }
.zone-light .label .p { color: var(--gold-ink); }
/* Marke bleibt kleingeschrieben — auch im Label */
.label.lower { text-transform: none; letter-spacing: 0.24em; }

/* Wortmarke: fettes „nur" + dünner Suffix + Punkt-Disc */
.wm { font-family: "Outfit", sans-serif; line-height: 0.95; letter-spacing: -0.015em; display: inline-flex; align-items: baseline; white-space: nowrap; }
.wm-b { font-weight: var(--w-wm-b); }
.wm-l { font-weight: var(--w-wm-l); letter-spacing: 0.01em; }

/* Der Punkt — als kontrollierte Disc statt Font-Glyphe (Anker für den Wanderpunkt) */
.dot {
  display: inline-block; width: 0.17em; height: 0.17em; border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle at 38% 32%, var(--gold-hot) 0%, var(--gold) 48%, #a1721d 100%);
  margin: 0 0.055em; position: relative;
  box-shadow: 0 0 0.06em rgba(217, 164, 65, 0.5);
}
/* vertikaler Lens-Flare (Sheet-Signature) — dezent, per Andocken aktiv */
.dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1px; height: 2.4em; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(253, 248, 239, 0.9), transparent);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
/* Auf hellen Bühnen braucht der Flare dunkleres Gold, sonst ist er unsichtbar */
.zone-light .dot::after {
  background: linear-gradient(180deg, transparent, rgba(161, 114, 29, 0.7), transparent);
}
.dot { transition: box-shadow 0.5s var(--ease); }

/* Heading-Grammatik: Serif = Headline, die ein SATZ ist (Statements) —
   Outfit = Headline, die ein NAME ist (Marken, Produkte, UI). Basis ist die
   Sans-Stimme; die Statement-Selektoren überschreiben auf Serif 400. */
h1, h2, h3 { font-family: "Outfit", sans-serif; font-weight: var(--w-bold); letter-spacing: -0.01em; line-height: 1.08; font-synthesis: none; }

/* Divider: Hairline mit Goldkern + Mittelpunkt (Sheet-Detail) */
.divider {
  position: relative; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--tl-line) 18%, rgba(217, 164, 65, 0.55) 50%, var(--tl-line) 82%, transparent);
}
.zone-dark .divider { background: linear-gradient(90deg, transparent, var(--td-line) 18%, rgba(217, 164, 65, 0.5) 50%, var(--td-line) 82%, transparent); }
.divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold);
}

/* Windows-Kontrastmodus: forced-colors strippt alle background-Gradienten →
   Punkt-Discs (DAS Marken-Zeichen) und Divider würden verschwinden. Die Discs
   als gefüllte CanvasText-Kreise erhalten (sichtbar UND an die gewählte Palette
   angepasst), den Divider als sichtbare Linie. Das Zeichen bleibt, die Farbe
   gehört dem Nutzer. */
@media (forced-colors: active) {
  .dot, .divider::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .divider { forced-color-adjust: none; background: CanvasText; height: 1px; }
}

/* ---------- Header ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
  color: var(--td);
}
header .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
/* Ohne JS gibt es keinen Zonen-Wechsel: Header bleibt dann über dem dunklen
   Hero verankert und scrollt mit weg, statt unlesbar über hellen Zonen zu kleben. */
html:not(.js) header { position: absolute; }
header.scrolled {
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-color: var(--td-line);
}
header.on-light { color: var(--tl); }
header.on-light.scrolled { background: rgba(245, 243, 238, 0.78); border-color: var(--tl-line); }
.brand { font-size: 1.3rem; }
.brand .wm-b { font-weight: var(--w-wm-b); }
nav.main { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
nav.main a { font-family: "Outfit", sans-serif; font-size: var(--fs--1); font-weight: var(--w-med); opacity: 0.72; transition: opacity 0.25s var(--ease); min-height: 44px; display: inline-flex; align-items: center; }
nav.main a:hover { opacity: 1; }
nav.main .cta {
  opacity: 1; border: 1px solid currentColor; border-radius: 100px;
  padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
nav.main .cta:hover { background: var(--gold); border-color: var(--gold); color: #1c1303; }
@media (max-width: 640px) {
  /* In-Page-Anker ausblenden, aber den Cross-Link (.nav-keep: Dach→Studio,
     Studio→Arbeiten) sichtbar halten — der Header hatte <640px faktisch keine
     Navigation außer der CTA. */
  nav.main a.link:not(.nav-keep) { display: none; }
  /* Lichtstimme mobil anheben: 300 wird auf kleinen Paper-Flächen zu dünn —
     die variable Achse liefert 330 kostenlos. */
  :root { --w-light: 330; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-block: 120px 100px; overflow: clip;
}
.hero .label { margin-bottom: clamp(26px, 4vh, 44px); }
.hero-wm { font-size: var(--fs-wm-hero); font-weight: var(--w-wm-b); color: #fbfaf7; position: relative; z-index: 2; }
.hero-wm .l { display: inline-block; }
.hero-wm .dot { box-shadow: 0 0 0.5em rgba(217, 164, 65, 0.45); }

/* Lichtquelle: eng, warm, kontrolliert — kein Neben-Glow */
.hero-light-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* --dot-x/--dot-y = Position des Wortmarken-Punkts (per JS gesetzt):
   Licht und Video sitzen AM Punkt — der Punkt ist die Quelle. */
.hero-light {
  position: absolute; z-index: 1;
  left: var(--dot-x, 50%); top: var(--dot-y, 48%);
  width: min(88vw, 780px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(253, 248, 239, 0.15) 0%, rgba(224, 194, 134, 0.05) 42%, transparent 66%);
}
/* Der Abschied: beim ersten Scroll dimmt das Licht, die Bühne weicht zurück
   (--exit wird per JS gesetzt; ohne JS bleibt alles statisch) */
html.js .hero-light-wrap { opacity: calc(1 - var(--exit, 0) * 0.85); }
.hero > .wrap { position: relative; z-index: 2; } /* Inhalt immer über dem Licht-/Video-Layer */
html.js .hero > .wrap { transform: translateY(calc(var(--exit, 0) * -7vh)); }

/* Hero-Video: die lebendige Lichtquelle, HINTER der Wortmarke.
   Sichtbar erst ab 'playing' — statisches Licht bleibt Poster/Fallback.
   Ohne JS, bei reduced-motion oder Autoplay-Block: bleibt unsichtbar. */
.hero-media {
  position: absolute; z-index: 2;
  left: var(--dot-x, 50%); top: var(--dot-y, 48%);
  width: min(72vmin, 760px); height: min(72vmin, 760px);
  transform: translate(-50%, -50%);
  opacity: 0;
  /* weiche Lichtinsel: der Videokern sitzt exakt auf dem Punkt, keine Kanten */
  -webkit-mask-image: radial-gradient(circle, #000 24%, transparent 60%);
  mask-image: radial-gradient(circle, #000 24%, transparent 60%);
}
.hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Clip ist warm-orange graded → Richtung weißes Licht entsättigen */
  filter: saturate(0.55) brightness(1.04);
}
/* Die Geburt des Lichts: im Puls-Peak blitzt es weiß-heiß auf (~260 ms voll da)
   und wächst aus dem Punktradius heraus — kein Crossfade zweier fremder Dinge. */
.hero-media.playing { opacity: 1; animation: lightBirth 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes lightBirth {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); filter: brightness(1.9); }
  20%  { opacity: 1; }
  60%  { filter: brightness(1.15); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { .hero-media { display: none !important; } }

/* Licht trifft Typografie: die Glyphen fangen den Schein des Punkts (Sheet-DNA).
   WICHTIG: erst im settled-Zustand nach der Ignition — laufende Animationen geben
   den Buchstaben eigene Layer und brechen background-clip:text (unsichtbarer Text). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.js .hero.settled .hero-wm > span[aria-hidden],
  html:not(.js) .hero-wm > span[aria-hidden] {
    background: radial-gradient(circle at 101% 62%, #fcf3e2 0%, #fcf7ec 15%, #fbfaf7 38%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* Staub im Lichtkegel — Atmosphäre, bewusst kaum sichtbar */
.dust { position: absolute; inset: 0; }
.dust i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--light-hot); opacity: 0; filter: blur(0.5px);
}
.dust i:nth-child(1) { left: 45%; top: 60%; --d: 12s; --dl: 0.6s; --dx: 20px; --o: 0.32; }
.dust i:nth-child(2) { left: 52%; top: 52%; --d: 15s; --dl: 3.2s; --dx: -16px; --o: 0.24; width: 2px; height: 2px; }
.dust i:nth-child(3) { left: 58%; top: 64%; --d: 10s; --dl: 1.4s; --dx: 12px; --o: 0.3; }
.dust i:nth-child(4) { left: 48%; top: 44%; --d: 17s; --dl: 5.5s; --dx: -22px; --o: 0.2; width: 2px; height: 2px; }
.dust i:nth-child(5) { left: 62%; top: 50%; --d: 13s; --dl: 2.1s; --dx: 15px; --o: 0.26; }
.dust i:nth-child(6) { left: 55%; top: 68%; --d: 16s; --dl: 7s; --dx: -10px; --o: 0.22; width: 2px; height: 2px; }
.dust i:nth-child(7) { left: 50%; top: 36%; --d: 14s; --dl: 4.4s; --dx: 24px; --o: 0.18; }
.hero h1 {
  /* Die These unter der Marke: Serif spricht, die Outfit-800-Wortmarke zeigt. */
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: var(--fs-2); font-weight: var(--w-reg); letter-spacing: 0; line-height: 1.2;
  color: var(--td); max-width: 22ch; margin-top: clamp(30px, 5vh, 54px);
  position: relative; z-index: 2;
}
.hero .sub {
  font-size: var(--fs-1); font-weight: var(--w-reg); color: var(--td-mut);
  max-width: 52ch; margin-top: 20px; line-height: 1.55; position: relative; z-index: 2;
}
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); }

/* Cursor-Licht (nur Desktop, nur ohne reduced motion — via JS erzeugt) */
.cursor-light {
  position: absolute; z-index: 1; width: 340px; height: 340px; border-radius: 50%;
  pointer-events: none; left: 0; top: 0; will-change: transform; opacity: 0;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.09), transparent 65%);
  transition: opacity 0.6s var(--ease);
}

/* ---------- Manifest ---------- */
.manifest { padding-block: clamp(110px, 16vh, 200px); }
.manifest .label { display: block; margin-bottom: clamp(34px, 5vh, 56px); }
.litany { list-style: none; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 20px); }
.litany li {
  font-family: "Outfit", sans-serif;
  font-size: var(--fs-2); font-weight: var(--w-light); letter-spacing: -0.02em; line-height: 1.22;
  color: var(--td-mut);
}
.litany li strong { font-weight: var(--w-bold); color: #fbfaf7; transition: color 0.5s var(--ease), text-shadow 0.5s var(--ease); }
.litany li:last-child strong { color: var(--gold); }
/* Der Lesestrahl: die Zeile, an welcher der Wanderpunkt vorbeizieht, leuchtet */
.litany li.lit-near { color: var(--td); }
.litany li.lit-near strong { color: var(--light-hot); text-shadow: 0 0 22px rgba(250, 242, 226, 0.4); }

/* ---------- Schwelle (Creed): Dunkel → Licht ---------- */
.creed {
  position: relative; overflow: clip;
  background: linear-gradient(180deg, var(--void) 0%, var(--void) 30%, #191713 62%, var(--paper-2) 92%, var(--paper) 100%);
  padding-block: clamp(110px, 18vh, 220px) clamp(170px, 30vh, 340px);
  text-align: center;
}
/* Schwellen-Bloom: das Licht blüht scroll-getrieben aus der Punktbahn auf.
   Rein additiv — ohne JS/Motion bleibt scale(0) und der statische Verlauf trägt. */
.creed .bloom {
  position: absolute; left: 50%; top: 64%; width: 170vmax; height: 170vmax;
  margin: -85vmax 0 0 -85vmax; border-radius: 50%; z-index: 1; pointer-events: none;
  /* warmer Lichtsaum an der Kante: das Licht kommt warm an, dann wird es Papier */
  background: radial-gradient(circle, var(--paper) 47%, var(--paper-2) 63%, rgba(235, 219, 188, 0.15) 72%, rgba(237, 234, 227, 0) 100%);
  transform: scale(var(--bloom, 0)); will-change: transform;
}
.creed .wrap { position: relative; z-index: 2; }
.creed .big, .creed .big strong, .creed .big .gold, .creed .note { transition: color 0.7s var(--ease); }
.creed.lit .big { color: var(--tl-mut); }
.creed.lit .big strong { color: #0d0c0a; }
.creed.lit .big .gold { color: var(--gold-ink); }
.creed.lit .note { color: var(--tl-mut); }
.creed .big {
  font-family: "Outfit", sans-serif;
  font-size: var(--fs-3); font-weight: var(--w-light); letter-spacing: -0.02em; line-height: 1.16;
  max-width: 21ch; margin-inline: auto; color: var(--td);
}
.creed .big strong { font-weight: var(--w-bold); color: #fbfaf7; }
.creed .big .gold { color: var(--gold); font-weight: var(--w-bold); }
.creed .note { margin-top: 30px; color: var(--td-mut); font-size: var(--fs-0); max-width: 46ch; margin-inline: auto; }

/* ---------- System / Der Punkt ---------- */
.system { padding-block: clamp(90px, 13vh, 170px) clamp(60px, 8vh, 100px); }
.system > .wrap > .label { display: block; }
.system .punchline {
  font-size: var(--fs-3); font-weight: var(--w-med); letter-spacing: -0.02em; line-height: 1.14;
  max-width: 21ch; margin: 18px 0 clamp(40px, 6vh, 72px);
}
/* Der Schlusspunkt des Claims IST der Punkt — und der Anker, an dem der
   Wanderpunkt andockt. Die Marke handelt, statt sich zu erklären. */
.system .punchline .dot { margin-right: 0.1em; }
.system .copy { max-width: 46ch; }
.system .copy p { font-size: var(--fs-1); line-height: 1.6; color: var(--tl); }
.system .copy p em { font-style: normal; color: var(--gold-ink); font-weight: var(--w-med); }
@media (min-width: 821px) {
  /* ruhige Asymmetrie statt Zweispalter */
  .system .copy { margin-left: auto; }
}

/* ---------- Marken-Bühnen (keine Kartenwand) ---------- */
.stage { padding-block: clamp(84px, 13vh, 170px); }
.stage .inner { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 30px); }
.stage[data-align="right"] .inner { align-items: flex-end; text-align: right; }
.stage .wm { font-size: var(--fs-wm-stage); color: var(--tl); }
.stage .role { margin-top: 4px; }
.stage p.line { font-size: var(--fs-1); color: var(--tl-mut); max-width: 44ch; line-height: 1.55; }
.stage .go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: "Outfit", sans-serif; font-weight: var(--w-semi); font-size: var(--fs-0); color: var(--tl);
  border-bottom: 1px solid rgba(138, 98, 18, 0.45); padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.stage .go .arr { color: var(--gold-ink); transition: transform 0.3s var(--ease); }
.stage .go:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.stage .go:hover .arr { transform: translateX(5px); }

/* Andocken des Wanderpunkts: Flare + Aufleuchten — generisch für alle Anker-Bühnen.
   Der Hero ist ausgenommen: dort hat die Ignition das letzte Wort. */
[data-stage].docked:not(.hero) [data-dot]::after { opacity: 0.9; height: 3.4em; }
[data-stage].docked:not(.hero) [data-dot] { box-shadow: 0 0 0.5em rgba(217, 164, 65, 0.55); }

/* Beleuchtete Letterformen: wo der Punkt andockt, fängt die Typo sein Licht
   (--lx/--ly = Lichtposition, per JS aus der Anker-Geometrie gesetzt) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* Feste Lichtradien: der warme Fleck skaliert NICHT mit der Wortmarken-Breite,
     sonst stanzt er bei langen Marken die Glyphen aus. Nur eine warme Tönung. */
  html.js .zone-light .lit-wm {
    background: radial-gradient(circle 120px at var(--lx, 50%) var(--ly, 50%), #6f4f12 0%, #2c251b 55%, var(--tl) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  /* energyo: der Punkt sitzt am WORT-ENDE — jeder kräftige warme Kern frisst
     dort das Wortende an („abgeschnitten"). Darum nur ein HAUCH Wärme:
     alle Glyphen bleiben satt dunkel und lesbar, am Punkt glimmt es —
     die Quelle des Lichts bleibt der Punkt selbst (tdot-Snap-Glow). */
  html.js .zone-light #wm-energyo.lit-wm {
    /* background-IMAGE, nicht die background-Kurzform: die Shorthand würde
       background-clip auf border-box zurücksetzen (und schlägt per #id-Spezifität
       das text-Clipping der Basis-Regel) → dunkler Verlauf füllt die Box als
       schwarzes Banner. So bleibt das text-Clipping der Basis erhalten. */
    background-image: radial-gradient(circle 120px at var(--lx, 50%) var(--ly, 50%), #33281a 0%, var(--tl) 75%);
  }
  html.js footer .lit-wm {
    background: radial-gradient(circle 130px at var(--lx, 50%) var(--ly, 50%), #f3e8d2 0%, #faf6ee 45%, #fbfaf7 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* stille Status-Zeile (nur.care) */
.quiet-line {
  padding-block: clamp(40px, 6vh, 70px);
  text-align: center; font-size: var(--fs-0); color: var(--tl-mut);
}
.quiet-line .wm { font-size: 1.15em; color: var(--tl); }

/* ---------- Kontakt ---------- */
.contact { padding-block: clamp(100px, 15vh, 190px); }
.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: start;
}
.contact-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact h2 { font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-size: var(--fs-3); font-weight: var(--w-reg); line-height: 1.12; letter-spacing: -0.005em; max-width: 18ch; }
.contact .sub { font-size: var(--fs-1); color: var(--tl-mut); max-width: 46ch; }
.contact-note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 42ch;
  color: var(--tl-mut);
  font-size: var(--fs--1);
}
.contact-note > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(217, 164, 65, 0.45);
}
.contact-quiz {
  position: relative;
  min-height: 520px;
  padding: clamp(24px, 3.4vw, 42px);
  border: 1px solid var(--tl-line);
  background: rgba(255, 255, 255, 0.2);
}
.quiz-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.quiz-progress {
  display: none;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 44px);
  color: var(--gold-ink);
  font-family: "Outfit", sans-serif;
  font-size: 0.7rem;
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
html.js .quiz-progress { display: grid; }
.quiz-progress-track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--tl-line);
}
.quiz-progress-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: var(--gold);
  transition: width 0.45s var(--ease);
}
.quiz-step {
  min-width: 0;
  margin: 0 0 42px;
  padding: 34px 0 0;
  border: 0;
  border-top: 1px solid var(--tl-line);
}
html.js .quiz-step { margin: 0; padding: 0; border-top: 0; }
.quiz-step[hidden] { display: none; }
.quiz-step > legend {
  width: 100%;
  margin-bottom: 24px;
  padding: 0;
  color: var(--tl);
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  font-weight: var(--w-semi);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  position: relative;
  display: flex;
  min-height: 66px;
  cursor: pointer;
}
.quiz-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.quiz-option > span {
  position: relative;
  display: grid;
  width: 100%;
  gap: 2px;
  align-content: center;
  padding: 13px 50px 13px 18px;
  border: 1px solid var(--tl-line);
  background: rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.quiz-option > span::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(23, 22, 26, 0.35);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 3px var(--paper);
  transition: background 0.2s, border-color 0.2s;
}
.quiz-option strong {
  font-family: "Outfit", sans-serif;
  font-size: 0.98rem;
  font-weight: var(--w-semi);
  line-height: 1.3;
}
.quiz-option small { color: var(--tl-mut); font-size: 0.78rem; line-height: 1.35; }
.quiz-option:hover > span { transform: translateX(3px); border-color: rgba(138, 98, 18, 0.38); }
.quiz-option input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.quiz-option input:checked + span { border-color: var(--gold-ink); background: rgba(217, 164, 65, 0.08); }
.quiz-option input:checked + span::after { border-color: var(--gold-ink); background: var(--gold); }
.quiz-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: clamp(26px, 4vw, 38px);
}
.quiz-button,
.quiz-back {
  min-height: 48px;
  border: 0;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: 0.92rem;
  font-weight: var(--w-semi);
}
.quiz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 22px;
  background: var(--tl);
  color: var(--paper);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.quiz-button:hover { background: #000; transform: translateY(-2px); }
.quiz-button:disabled { cursor: wait; opacity: 0.6; transform: none; }
.quiz-button span { color: var(--gold); }
.quiz-back { padding: 10px 0; background: transparent; color: var(--tl-mut); }
.quiz-back:hover { color: var(--tl); }
.quiz-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quiz-fields > label { display: grid; gap: 7px; color: var(--tl-mut); font-size: 0.78rem; }
.quiz-fields input,
.quiz-fields textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--tl-line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.28);
  color: var(--tl);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.quiz-fields input:focus,
.quiz-fields textarea:focus { border-color: var(--gold-ink); outline: 0; box-shadow: 0 0 0 1px var(--gold-ink); }
.quiz-fields input:user-invalid,
.quiz-fields textarea:user-invalid { border-color: #a83d32; }
.quiz-message,
.quiz-reply { grid-column: 1 / -1; }
.quiz-reply {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.quiz-reply legend {
  width: 100%;
  margin-bottom: 7px;
  color: var(--tl-mut);
  font-size: 0.78rem;
}
.quiz-reply label { position: relative; cursor: pointer; }
.quiz-reply input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.quiz-reply label span {
  display: block;
  min-width: 104px;
  padding: 9px 14px;
  border: 1px solid var(--tl-line);
  color: var(--tl-mut);
  text-align: center;
}
.quiz-reply input:checked + span { border-color: var(--gold-ink); background: rgba(217, 164, 65, 0.08); color: var(--tl); }
.quiz-reply input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.quiz-privacy,
.contact-direct { color: var(--tl-mut); font-size: 0.76rem; }
.quiz-privacy { margin-top: 18px; }
.quiz-privacy a,
.contact-direct a { color: var(--tl); border-bottom: 1px solid var(--tl-line); }
.contact-direct { margin-top: 18px; text-align: right; }
.quiz-errors {
  margin-bottom: 20px;
  padding: 11px 13px;
  border-left: 3px solid #a83d32;
  background: rgba(168, 61, 50, 0.07);
  color: #7a2c24;
  font-size: 0.84rem;
}
.quiz-errors a {
  color: inherit;
  font-weight: var(--w-bold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.quiz-success {
  min-height: 430px;
  align-content: center;
  gap: 14px;
  text-align: left;
}
.quiz-success:not([hidden]) { display: grid; }
.quiz-success-mark {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1c1303;
  font-family: "Outfit", sans-serif;
  font-weight: var(--w-bold);
}
.quiz-success h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--w-reg);
  line-height: 1.1;
}
.quiz-success > p:last-child { max-width: 44ch; color: var(--tl-mut); }
.contact-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--tl-line);
  color: var(--tl-mut);
  font-size: var(--fs--1);
}
.contact-switch a {
  color: var(--tl);
  font-family: "Outfit", sans-serif;
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.contact-switch a span { color: var(--gold-ink); margin-left: 6px; transition: transform 0.25s var(--ease); display: inline-block; }
.contact-switch a:hover span { transform: translateX(4px); }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 14px 30px; border-radius: 100px;
  background: var(--tl); color: var(--paper);
  font-family: "Outfit", sans-serif; font-weight: var(--w-semi); font-size: var(--fs-0);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}
.btn .bdot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.btn:hover { background: #000; transform: translateY(-2px); }

@media (max-width: 900px) {
  .contact-shell { grid-template-columns: 1fr; }
  .contact-quiz { width: 100%; }
}
@media (max-width: 560px) {
  .contact-quiz { min-height: 0; padding: 22px 18px; }
  .quiz-fields { grid-template-columns: 1fr; }
  .quiz-message,
  .quiz-reply { grid-column: auto; }
  .quiz-option > span { padding-left: 14px; }
  .quiz-actions { align-items: stretch; }
  .quiz-button { padding-inline: 16px; }
  .quiz-submit { flex: 1; }
  .contact-direct { text-align: left; line-height: 1.9; }
  .contact-switch { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* ---------- nur.studio Portfolio ---------- */
.studio-page .hero-wm .dot {
  isolation: isolate;
}
.studio-page .hero-wm .dot::before {
  content: "";
  position: absolute;
  inset: -0.62em;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 233, 194, 0.22), rgba(217, 164, 65, 0.08) 38%, transparent 70%);
}
.studio-page .hero-wm .dot::after {
  height: 1.2em;
  opacity: 0.35;
  background: linear-gradient(180deg, transparent, rgba(255, 233, 194, 0.78), transparent);
}

.studio-hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  padding-block: clamp(112px, 15vh, 170px) clamp(38px, 6vh, 72px);
}
.studio-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.86fr);
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
}
.studio-hero-copy h1 {
  margin-top: clamp(24px, 4vh, 42px);
  max-width: 16ch;
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.2vw, 4.9rem);
  font-weight: var(--w-reg);
  line-height: 1.06; /* Serif-Ober-/Unterlängen brauchen mehr Luft als 1.02 */
  letter-spacing: -0.01em;
}
.studio-hero-copy .sub {
  margin-top: clamp(24px, 4vh, 34px);
  max-width: 48ch;
  color: var(--td-mut);
  font-size: var(--fs-1);
  line-height: 1.55;
}
.studio-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: clamp(30px, 5vh, 46px);
}
.studio-btn { background: var(--paper); color: var(--tl); }
.studio-btn:hover { background: #fff; color: var(--tl); }
.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--td-mut);
  border-bottom: 1px solid var(--td-line);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.text-link:hover { color: var(--td); border-color: var(--gold); }
.studio-mark {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 4vh, 34px);
}
.studio-signal {
  position: relative;
  width: min(100%, 660px);
  padding-block: clamp(18px, 3vh, 34px);
  isolation: isolate;
}
.studio-mark .hero-wm {
  font-size: clamp(3.2rem, 8vw, 7.8rem);
  max-width: 100%;
  color: #fbfaf7;
  position: relative;
  z-index: 2;
}
.studio-mark .hero-wm > span {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
}
.studio-mark .wm-l { font-weight: var(--w-wm-l); }
.studio-proofline {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--td-line);
  border-bottom: 1px solid var(--td-line);
}
.studio-proofline span {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--td-line);
  color: var(--td-mut);
  font-family: "Outfit", sans-serif;
  font-size: var(--fs--1);
  font-weight: var(--w-med);
}
.studio-proofline span:last-child { border-right: 0; }
.studio-strip {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1320px);
  margin: clamp(36px, 6vh, 72px) auto 0;
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1.05fr;
  gap: 10px;
}
.studio-strip figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(247, 245, 240, 0.12);
  background: #111;
}
.studio-strip img {
  width: 100%;
  height: clamp(116px, 18vw, 230px);
  object-fit: cover;
  filter: saturate(0.86) contrast(1.02);
  display: block;
}
.studio-strip .strip-logo {
  display: grid;
  place-items: center;
  background: #f4f6f8;
}
.studio-strip .strip-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: none;
}
.strip-process {
  min-height: clamp(116px, 18vw, 230px);
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(91, 169, 245, 0.16), transparent 46%),
    linear-gradient(180deg, #101217, #08090b);
}
.mini-process {
  position: absolute;
  inset: 20px 14px 68px;
  display: grid;
  grid-template-columns: 1fr 30px 1fr 30px 1fr;
  align-items: center;
  gap: 8px;
}
.mini-process span {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(247, 245, 240, 0.14);
  background: rgba(247, 245, 240, 0.06);
  color: rgba(247, 245, 240, 0.78);
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  line-height: 1.1;
  text-align: center;
}
.mini-process i {
  height: 1px;
  background: rgba(247, 245, 240, 0.18);
  position: relative;
}
.mini-process i::after {
  content: "";
  position: absolute;
  inset: -4px auto auto calc(var(--process, 0) * 100% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(217, 164, 65, 0.58);
}
.studio-strip figcaption {
  position: absolute;
  inset: auto 0 0;
  min-height: 62px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.74));
  color: rgba(247, 245, 240, 0.78);
  font-family: "Outfit", sans-serif;
}
.studio-strip figcaption b {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.1;
}
.studio-strip figcaption span {
  margin-top: 3px;
  color: rgba(247, 245, 240, 0.56);
  font-size: 0.76rem;
  line-height: 1.2;
}

.studio-thesis { padding-block: clamp(82px, 12vh, 150px); }
.studio-thesis-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 84px);
}
.studio-thesis h2,
.section-head h2,
.method-grid h2 {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: var(--fs-3);
  font-weight: var(--w-reg);
  line-height: 1.12;
  letter-spacing: -0.005em;
  max-width: 16ch;
}
.studio-thesis p:not(.label) {
  max-width: 52ch;
  margin-top: 24px;
  color: var(--tl-mut);
  font-size: var(--fs-1);
  line-height: 1.58;
}

.studio-work { padding-block: clamp(88px, 12vh, 160px); }
.section-head {
  display: grid;
  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: start;
  margin-bottom: clamp(42px, 7vh, 86px);
}
.case-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(28px, 5vw, 66px);
  align-items: end;
  padding-bottom: clamp(58px, 9vh, 98px);
  border-bottom: 1px solid var(--tl-line);
}
.case-media,
.case-thumb {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #111;
}
.case-media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--tl-line);
}
.case-media img,
.case-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}
.case-media:hover img,
.case-thumb:hover img {
  transform: scale(1.025);
  filter: saturate(1.04);
}
.case-process {
  --process: 0;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  background:
    radial-gradient(circle at calc(30% + var(--process) * 34%) 42%, rgba(217, 164, 65, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(23, 22, 26, 0.06), transparent 48%),
    #101116;
  color: var(--td);
  padding: clamp(18px, 3vw, 32px);
  position: relative;
}
.case-process::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 48%;
  height: 1px;
  background: rgba(247, 245, 240, 0.14);
}
.case-process::after {
  content: "";
  position: absolute;
  left: 11%;
  top: 48%;
  width: calc(78% * var(--process));
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 164, 65, 0.18), rgba(217, 164, 65, 0.84), rgba(247, 245, 240, 0.42));
}
.process-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.process-head span,
.salesengine-rack span {
  color: var(--gold);
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.process-head b {
  max-width: 36ch;
  color: rgba(247, 245, 240, 0.72);
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.86rem, 1.15vw, 1.04rem);
  font-weight: var(--w-med);
  line-height: 1.22;
  text-align: right;
}
.process-map {
  position: relative;
  z-index: 2;
  min-height: 51%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(76px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  margin-block: 8px;
}
.process-column {
  display: grid;
  gap: 10px;
}
.process-column article {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(247, 245, 240, 0.12);
  background: rgba(247, 245, 240, 0.045);
}
.process-column small,
.voice-system small {
  display: block;
  color: rgba(247, 245, 240, 0.48);
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
}
.process-column b,
.voice-system b {
  display: block;
  margin-top: 2px;
  color: rgba(247, 245, 240, 0.9);
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 1.05;
}
.process-in article {
  transform: translateX(calc(var(--process) * -8px));
  opacity: calc(0.86 - var(--process) * 0.22);
}
.process-out article {
  transform: translateX(calc((1 - var(--process)) * 12px));
  opacity: calc(0.42 + var(--process) * 0.55);
}
.process-core {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--td);
  text-align: center;
}
.process-dot {
  width: clamp(28px, 3.4vw, 42px);
  height: clamp(28px, 3.4vw, 42px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--gold-hot), var(--gold) 48%, #916518);
  box-shadow: 0 0 18px rgba(217, 164, 65, 0.28);
  transform: scale(calc(0.94 + var(--process) * 0.12));
}
.process-core strong {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  line-height: 1;
}
.process-core small {
  color: rgba(247, 245, 240, 0.48);
  font-size: 0.72rem;
}
.salesengine-rack {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  align-items: center;
}
.salesengine-rack span {
  grid-column: 1 / -1;
  min-width: 0;
  letter-spacing: 0.12em;
}
.salesengine-rack i {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(247, 245, 240, 0.12);
  background: rgba(247, 245, 240, 0.045);
  color: rgba(247, 245, 240, 0.66);
  font-style: normal;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-system {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 18px;
  background:
    radial-gradient(circle at calc(20% + var(--process) * 60%) 35%, rgba(217, 164, 65, 0.09), transparent 34%),
    linear-gradient(135deg, #0d1118, #111);
}
.voice-system div {
  position: relative;
  z-index: 2;
  padding: 12px;
  border: 1px solid rgba(247, 245, 240, 0.12);
  background: rgba(247, 245, 240, 0.06);
}
.voice-wave {
  position: absolute;
  left: 18px;
  right: 18px;
  top: calc(22% + var(--process) * 44%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 245, 240, 0.24), rgba(217, 164, 65, 0.74), transparent);
}
/* ---------- Flaggschiff „Der Schnitt" (energyo) ----------
   Zwei Platten in einem 3D-Kontext: oben der Browser-Frame mit der
   echten energyo.de (Ebene A, der Kanal), darunter die salesengine-
   Szene (Ebene B, das System). Der Scroll hebt den Deckel, eine
   goldene Lot-Linie fällt vom CTA in den Systemkern.
   Treiber: das geerbte --process des Artikels (JS), zerlegt in
   Phasen-Variablen. Fallback 1 = Endzustand (no-JS/reduced-motion
   zeigen die fertige Explosionszeichnung). */
.case-flagship {
  align-items: center;
  /* Phasen: Chrome klappt auf → Bild entwickelt sich → der Schnitt */
  --pch: clamp(0, calc(var(--process, 1) / 0.15), 1);
  --pd:  clamp(0, calc((var(--process, 1) - 0.05) / 0.25), 1);
  --pc:  clamp(0, calc((var(--process, 1) - 0.3) / 0.35), 1);
}
.case-sektion {
  position: relative;
  isolation: isolate;
  perspective: 1200px;
  border-radius: 6px;
  border: 1px solid var(--tl-line);
  background:
    radial-gradient(circle at 78% 18%, rgba(217, 164, 65, 0.05), transparent 42%),
    #101116;
  padding: clamp(18px, 2.6vw, 30px);
}
.sektion-scene {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
}
.sektion-plate { position: relative; }
.sektion-surface {
  transform-origin: 50% 100%;
  transform:
    translateY(calc(var(--pc) * -2.5%))
    rotateX(calc(var(--pc) * 5deg))
    translateZ(40px)
    scale(calc(0.97 + var(--pd) * 0.03));
}
.sektion-system {
  margin-top: clamp(14px, 2vw, 22px);
  transform: translateZ(-24px) translateY(calc((1 - var(--pc)) * -9%));
  opacity: calc(0.12 + var(--pc) * 0.88);
}
.case-sektion.is-live .sektion-plate,
.case-sektion.is-live .surface-sheen { will-change: transform; }

.browser-frame {
  position: relative;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(247, 245, 240, 0.1);
  background: #17171b;
  box-shadow: 0 22px 54px rgba(0, 0, 0, calc(0.4 + var(--pc) * 0.22));
}
.browser-chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  overflow: hidden;
  background: #141417;
  border-bottom: 1px solid rgba(247, 245, 240, 0.08);
  clip-path: inset(0 0 calc((1 - var(--pch)) * 96%) 0);
}
.chrome-dots { display: inline-flex; gap: 6px; }
.chrome-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(247, 245, 240, 0.16);
}
.browser-url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 16px;
  border-radius: 100px;
  background: rgba(247, 245, 240, 0.07);
  border: 1px solid rgba(247, 245, 240, 0.1);
  color: rgba(247, 245, 240, 0.85);
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: clamp(0, calc((var(--pch) - 0.55) / 0.45), 1);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.browser-url:hover { border-color: rgba(217, 164, 65, 0.5); background: rgba(247, 245, 240, 0.11); }
.browser-url:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.url-lock { width: 10px; height: 12px; color: rgba(217, 164, 65, 0.9); }
.chrome-glare {
  position: absolute;
  inset: 0 auto 0 0;
  width: 90px;
  background: linear-gradient(90deg, transparent, rgba(253, 248, 239, 0.05), transparent);
  transform: translateX(var(--glx, -120px));
  pointer-events: none;
}
.frame-body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.frame-body img { display: block; width: 100%; height: auto; }
/* Der Live-Capture enthielt unten links noch ein kleines Entwickler-Overlay.
   Die Ecke wird im Portfolio deterministisch mit dem umgebenden dunklen
   Seitenhintergrund abgedeckt, ohne den Screenshot neu zu generieren. */
.frame-body::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 9.2%;
  height: 8.6%;
  pointer-events: none;
  background: linear-gradient(105deg, #05070c 0%, #070a10 64%, rgba(7, 10, 16, 0.94) 78%, transparent 100%);
}
/* Die Entwicklung: Void-Schleier fällt, eine warmweiße Lichtkante
   fährt einmal über die Fläche — das Bild wird belichtet, nicht geladen. */
.frame-develop {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: var(--void);
  opacity: calc(1 - var(--pd));
  pointer-events: none;
}
.frame-sweep {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(253, 248, 239, 0.14) 45%, rgba(217, 164, 65, 0.05) 55%, transparent);
  transform: translateY(calc(-110% + var(--pd) * 330%));
  opacity: calc(clamp(0, calc(var(--pd) * 6), 1) * (1 - var(--pd)));
  pointer-events: none;
}
/* Cursor-Licht auf der Oberfläche (JS-erzeugt) — dimmt mit dem Schnitt:
   das Licht wechselt wahrnehmbar von der Oberfläche ins System. */
.surface-sheen {
  position: absolute;
  left: -170px;
  top: -170px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 248, 239, 0.15), rgba(217, 164, 65, 0.04) 45%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.surface-sheen.on { opacity: calc(1 - var(--pc) * 0.85); }
/* Die Lot-Linie: fällt vom CTA der echten Website in den Systemkern.
   Geometrie setzt JS exakt (Layout-Koordinaten); die %-Werte sind
   der No-JS-Näherungsfallback. */
.sektion-lot {
  position: absolute;
  z-index: 2;
  left: var(--lot-x, 73%);
  top: var(--lot-t, 42%);
  height: var(--lot-h, 23%);
  width: 2px;
  margin-left: -1px;
  /* Vor der Surface-Platte (3D-Sortierung): die Linie beginnt sichtbar
     AM CTA der echten Website und fällt von dort ins System. */
  transform: translateZ(48px);
  pointer-events: none;
}
.sektion-lot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--gold-hot), var(--gold) 30%, rgba(217, 164, 65, 0.65));
  transform: scaleY(var(--pc));
  transform-origin: 50% 0;
}
.lot-node {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  /* Weißer Kern, warmer Saum — dasselbe Licht wie Reader und Lichtschnitt. */
  background: radial-gradient(circle at 40% 34%, var(--light-hot), var(--gold-hot) 42%, var(--gold) 72%, #916518);
  box-shadow: 0 0 12px rgba(217, 164, 65, 0.55);
  transform: scale(clamp(0, calc(var(--pc) * 4), 1));
}
/* Die Schwelle: die Kopfzeile des Systems erscheint, wenn es erwacht
   (inneres --process der salesengine-Szene). */
.case-flagship .process-head b { opacity: clamp(0, calc(var(--process, 1) * 2.6), 1); }

/* ---------- salesengine, originalgetreu inszeniert ----------
   Ein Gerät, drei echte Momente der App (Live-Call → KI-Protokoll →
   Money Queue), geschaltet über data-step der Scroll-Mechanik. Das
   App-Chrome (Bottom-Nav + eo-FAB) steht durch — wie im Produkt.
   Tokens 1:1 aus energyo-app/src/components/eo/energyo-system.css. */
.se-stage {
  aspect-ratio: auto;
  --se-bg: #eef1f5;
  --se-surface: #fff;
  --se-line: #d1d9e6;
  --se-text: #111827;
  --se-soft: #5f6b7a;
  --se-primary: #059669;
  --se-danger: #dc2626;
  --se-warning: #ea580c;
  --se-success: #16a34a;
  --se-info: #2563eb;
  --se-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.se-stage::before,
.se-stage::after { display: none; }
.se-scene {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  margin-top: 16px;
}
/* Das Gerät — die App in echt */
.se-device {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(247, 245, 240, 0.14);
  background: var(--se-bg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  font-family: var(--se-font);
  color: var(--se-text);
}
.se-screens { position: relative; height: clamp(330px, 27vw, 376px); }
.se-screen {
  position: absolute;
  inset: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.24s cubic-bezier(0.2, 0, 0, 1), transform 0.24s cubic-bezier(0.2, 0, 0, 1);
}
/* Enthüllung der echten Screens läuft jetzt über clip-path/Lichtschnitt
   (siehe .se-shot-Block weiter unten), nicht mehr über data-step-Opacity. */
.se-callhead,
.se-today { display: grid; gap: 3px; }
.se-callrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.se-callhead b, .se-today b { font-size: 0.88rem; font-weight: var(--w-bold); }
.se-callhead small, .se-today small, .se-hint { color: var(--se-soft); font-size: 0.68rem; }
.se-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.se-chip--info { background: rgba(37, 99, 235, 0.12); color: var(--se-info); }
.se-chip--success { background: rgba(22, 163, 74, 0.12); color: var(--se-success); }
.se-stagebar { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.se-stagebar i { width: 14px; height: 3px; border-radius: 2px; background: var(--se-line); }
.se-stagebar i.on { background: var(--se-primary); }
.se-stagebar em { margin-left: 6px; font-style: normal; font-size: 0.66rem; color: var(--se-soft); }
.se-script {
  background: var(--se-surface);
  border: 1px solid var(--se-line);
  border-radius: 12px;
  padding: 10px;
  font-size: 0.72rem;
  line-height: 1.45;
}
.se-script b { color: var(--se-primary); font-weight: var(--w-bold); }
.se-hook {
  border-radius: 8px;
  border-left: 3px solid var(--se-info);
  background: rgba(37, 99, 235, 0.08);
  padding: 8px 10px;
  font-size: 0.7rem;
  line-height: 1.4;
}
.se-hook small {
  display: block;
  margin-bottom: 2px;
  color: var(--se-info);
  font-size: 0.6rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.se-hook--ki { border-left-color: var(--se-primary); background: rgba(5, 150, 105, 0.08); }
.se-hook--ki small { color: var(--se-primary); }
.se-note {
  background: var(--se-surface);
  border: 1px solid var(--se-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.7rem;
  color: var(--se-soft);
}
.se-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #b8c4d4;
  background: var(--se-surface);
  font-size: 0.7rem;
  font-weight: var(--w-semi);
  color: var(--se-text);
}
.se-btn--danger { background: var(--se-danger); border-color: var(--se-danger); color: #fff; min-height: 36px; }
.se-btn--ok { border-color: var(--se-success); color: var(--se-success); background: rgba(22, 163, 74, 0.08); }
.se-btn--go { background: var(--se-primary); border-color: var(--se-primary); color: #fff; width: 100%; margin-top: 6px; }
.se-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.se-today {
  margin: -12px -12px 2px;
  padding: 10px 12px;
  background: linear-gradient(165deg, #16304a 0%, #0d1b2a 55%, #091320 100%);
  color: #fff;
}
.se-today b { font-size: 0.95rem; }
.se-today small { color: rgba(255, 255, 255, 0.6); }
.se-today .se-callrow { justify-content: flex-start; margin-top: 5px; }
.se-today .se-chip--info { background: rgba(96, 165, 250, 0.22); color: #bfdbfe; }
.se-today .se-chip--success { background: rgba(74, 222, 128, 0.2); color: #bbf7d0; }
.se-queuelabel {
  color: var(--se-soft);
  font-size: 0.62rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.se-lead {
  border: 1px solid var(--se-line);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--se-surface);
  padding: 6px 10px;
  display: grid;
  gap: 1px;
}
.se-lead div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.se-lead b { font-size: 0.76rem; font-weight: var(--w-bold); }
.se-lead em { font-style: normal; font-size: 0.72rem; font-weight: var(--w-bold); color: var(--se-success); }
.se-lead small { color: var(--se-soft); font-size: 0.66rem; }
.se-lead--danger { border-left-color: var(--se-danger); background: rgba(220, 38, 38, 0.05); }
.se-lead--warning { border-left-color: var(--se-warning); background: rgba(234, 88, 12, 0.05); }
.se-lead--success { border-left-color: var(--se-success); }
/* Bottom-Nav + eo-FAB: das Chrome der App steht durch alle Momente */
.se-nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  justify-items: center;
  padding: 8px 6px 9px;
  background: linear-gradient(165deg, #16304a 0%, #0d1b2a 55%, #091320 100%);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
  font-weight: var(--w-semi);
}
.se-nav .on { color: #34d399; }
.se-fab {
  position: relative;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #24386a, #15233f);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
}
.se-fabring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(rgba(16, 185, 129, 0.3), #059669, #16a34a, #1d5fd1, #0ea5d8, rgba(16, 185, 129, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
html.js .se-fabring { animation: seRingSpin 3.5s linear infinite; }
@keyframes seRingSpin { to { transform: rotate(360deg); } }
.se-sig {
  font-family: var(--se-font);
  font-size: 1rem;
  font-weight: var(--w-bold);
  background: linear-gradient(180deg, #fff, #eef4fc 55%, #d7e5f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.se-sig i {
  width: 0.52em;
  height: 0.52em;
  border-radius: 50%;
  border: 0.11em solid #0ea5d8;
  box-shadow: 0 0 6px rgba(91, 219, 255, 0.85);
}
/* Die Studio-Leiste daneben: ruhige Erzählung in der nur-Stimme */
.se-rail {
  list-style: none;
  display: grid;
  gap: clamp(14px, 2.4vh, 24px);
}
.se-rail li {
  position: relative;
  padding-left: 22px;
  opacity: 0.38;
  transition: opacity 0.4s var(--ease);
}
.se-rail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(247, 245, 240, 0.25);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.se-rail b {
  display: block;
  color: var(--td);
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: var(--w-semi);
}
.se-rail span {
  display: block;
  margin-top: 3px;
  color: var(--td-mut);
  font-size: var(--fs--1);
  line-height: 1.45;
}
.se-stage[data-step="input"] .se-rail li[data-beat="input"],
.se-stage[data-step="route"] .se-rail li[data-beat="route"],
.se-stage[data-step="output"] .se-rail li[data-beat="output"] { opacity: 1; }
.se-stage[data-step="input"] .se-rail li[data-beat="input"]::before,
.se-stage[data-step="route"] .se-rail li[data-beat="route"]::before,
.se-stage[data-step="output"] .se-rail li[data-beat="output"]::before {
  background: radial-gradient(circle at 38% 32%, var(--gold-hot), var(--gold) 55%, #916518);
  box-shadow: 0 0 12px rgba(217, 164, 65, 0.55);
}
/* Ohne JS/Zeitachse: Endzustand = Money Queue steht, alle Beats gelesen */
html:not(.js) .se-s3 { opacity: 1; transform: none; }
html:not(.js) .se-rail li { opacity: 1; }
/* Erstlicht: der Punkt des Studios zündet den Punkt des Kunden —
   der eo-FAB pulst genau einmal (JS-Latch .lit, nie zurückgenommen). */
.case-flagship.lit .se-fab {
  animation: seFabPulse 0.9s ease-out;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 18px rgba(5, 150, 105, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@keyframes seFabPulse {
  0%, 100% { transform: scale(1); }
  38% { transform: scale(1.14); filter: drop-shadow(0 0 14px #059669); }
}

/* ---------- Lebende Site-Frames (Referenzen) ----------
   Leichter als das Flaggschiff (kein Zwei-Platten-Schnitt): echte
   Website in echtem Browser-Chrome, baut sich beim Scrollen auf,
   je Projekt EIN Signatur-Move (--process aus initStudioProcessMotion).
   Cursor-Licht via --mx/--my (initSiteFrames, kein rAF). */
.site-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(23, 22, 26, 0.14);
  background: #17171b;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  --pch: clamp(0, calc(var(--process, 1) / 0.16), 1);
  --pdev: clamp(0, calc((var(--process, 1) - 0.08) / 0.34), 1);
  --psig: clamp(0, calc((var(--process, 1) - 0.24) / 0.52), 1);
}
.site-frame:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.24); }
.sf-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #141417;
  border-bottom: 1px solid rgba(247, 245, 240, 0.08);
  clip-path: inset(0 0 calc((1 - var(--pch)) * 94%) 0);
}
.sf-dots { display: inline-flex; gap: 5px; }
.sf-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(247, 245, 240, 0.16); }
.sf-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 12px;
  border-radius: 100px;
  background: rgba(247, 245, 240, 0.07);
  border: 1px solid rgba(247, 245, 240, 0.1);
  color: rgba(247, 245, 240, 0.82);
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: clamp(0, calc((var(--pch) - 0.5) / 0.5), 1);
  transition: border-color 0.3s var(--ease);
}
.sf-url:hover { border-color: rgba(217, 164, 65, 0.5); }
.sf-url:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sf-url .url-lock { width: 9px; height: 11px; color: rgba(217, 164, 65, 0.9); }
.sf-body {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
}
.sf-body img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Belichtung: der Void-Schleier fällt beim Reinscrollen */
.sf-develop {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--void);
  opacity: calc(1 - var(--pdev));
  pointer-events: none;
}
/* Cursor-Licht (warmweiß) — nur bei Hover, Position aus JS-Vars */
.sf-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 42%), rgba(253, 248, 239, 0.16), transparent 60%);
  mix-blend-mode: screen;
  transition: opacity 0.4s var(--ease);
}
.site-frame:hover .sf-body::after { opacity: 1; }
.sf-sig { position: absolute; z-index: 2; pointer-events: none; }
/* DomClean — die streifenfreie Bahn: ein heller Wisch fährt einmal durch */
.site-frame[data-sig="wipe"] .sf-sig {
  left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18) 50%, transparent);
  transform: translateY(calc(-120% + var(--psig) * 340%));
  opacity: calc(clamp(0, calc(var(--psig) * 5), 1) * (1 - var(--psig)));
  mix-blend-mode: screen;
}
/* Qopti — keine zweite Grafik über dem vorhandenen Blitz. Stattdessen wird die
   echte Strecke im Screenshot gelesen: Analyse-CTA → laufende Tarifprüfung. */
.site-frame[data-sig="line"] .sf-sig {
  inset: 0;
  overflow: hidden;
}
.qopti-cta-focus {
  --cta-in: clamp(0, calc((var(--psig) - 0.04) * 6), 1);
  --cta-out: clamp(0, calc((0.72 - var(--psig)) * 5), 1);
  position: absolute;
  left: 79.9%;
  top: 1.9%;
  width: 18.45%;
  height: 6.45%;
  border: 1px solid rgba(47, 109, 168, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.68), 0 0 15px rgba(91, 155, 213, 0.22);
  opacity: min(var(--cta-in), var(--cta-out));
  transform: scale(calc(0.985 + var(--cta-in) * 0.015));
  transform-origin: center;
}
.qopti-status-pulse {
  --status: clamp(0, calc((var(--psig) - 0.48) * 6), 1);
  position: absolute;
  left: 3.15%;
  top: 96.15%;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(47, 109, 168, calc(0.2 + var(--status) * 0.8));
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #76a9d8 28% 48%, rgba(118, 169, 216, 0.08) 54% 100%);
  opacity: var(--status);
  transform: translate(-50%, -50%) scale(calc(0.58 + var(--status) * 0.42));
  box-shadow: 0 0 calc(5px + var(--status) * 9px) rgba(47, 109, 168, calc(var(--status) * 0.58));
}
.qopti-status-pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(91, 155, 213, calc(var(--status) * 0.44));
  border-radius: 50%;
  transform: scale(calc(0.7 + var(--status) * 0.45));
}

/* Laufendes Projekt — die vier realen Konfigurator-Stationen im Screenshot
   werden nacheinander verbunden, statt einen losgelösten Ladebalken zu zeigen. */
.site-frame[data-sig="config"] .sf-sig {
  inset: 0;
}
.site-frame[data-sig="config"] .sf-sig::before {
  content: "";
  position: absolute;
  left: 52.1%;
  top: 90.15%;
  width: 26.25%;
  height: 1px;
  background: linear-gradient(90deg, #d2f05a, rgba(210, 240, 90, 0.68));
  transform: scaleX(var(--psig));
  transform-origin: 0 50%;
  box-shadow: 0 0 9px rgba(210, 240, 90, 0.62);
}
.site-frame[data-sig="config"] .sf-sig i {
  --node: clamp(0, calc((var(--psig) - var(--at)) * 7), 1);
  position: absolute;
  top: 90.15%;
  left: var(--x);
  width: 9px;
  height: 9px;
  border: 1px solid rgba(210, 240, 90, calc(0.28 + var(--node) * 0.72));
  border-radius: 50%;
  background: radial-gradient(circle, #f5ffd2 0 22%, #d2f05a 28% 46%, rgba(210, 240, 90, 0.08) 52% 100%);
  opacity: calc(0.18 + var(--node) * 0.82);
  transform: translate(-50%, -50%) scale(calc(0.65 + var(--node) * 0.35));
  box-shadow: 0 0 calc(4px + var(--node) * 8px) rgba(210, 240, 90, calc(var(--node) * 0.72));
}
.site-frame[data-sig="config"] .sf-sig i:nth-child(1) { --x: 52.1%; --at: 0.02; }
.site-frame[data-sig="config"] .sf-sig i:nth-child(2) { --x: 60.8%; --at: 0.27; }
.site-frame[data-sig="config"] .sf-sig i:nth-child(3) { --x: 69.6%; --at: 0.52; }
.site-frame[data-sig="config"] .sf-sig i:nth-child(4) { --x: 78.35%; --at: 0.77; }
.case-kicker {
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: var(--w-semi);
  color: var(--gold-ink);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps); /* Funktions-Caps: gesperrt statt cramped */
}
.case-copy h3,
.case-card h3,
.system-case h3 {
  margin-top: 12px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.02;
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}
.case-copy p:not(.case-kicker),
.case-card-copy p:not(.case-kicker) {
  margin-top: 20px;
  color: var(--tl-mut);
  font-size: var(--fs-1);
  line-height: 1.55;
}
.case-tags {
  margin-top: 28px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.case-tags li {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--tl-line);
  border-radius: 100px;
  color: var(--tl-mut);
  font-family: "Outfit", sans-serif;
  font-size: var(--fs--1);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
  margin-top: clamp(34px, 6vh, 64px);
}
.case-card {
  min-width: 0;
  border-bottom: 1px solid var(--tl-line);
  padding-bottom: 28px;
}
.case-thumb {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--tl-line);
}
.case-card-copy {
  min-width: 0;
  padding-top: 22px;
}
.case-card h3 {
  max-width: 100%;
  font-size: clamp(1.75rem, 1.7vw, 2.15rem);
  line-height: 1.04;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
.case-card-copy p:not(.case-kicker) {
  font-size: var(--fs-0);
  line-height: 1.6;
  max-width: 34ch;
}

.studio-system { padding-block: clamp(92px, 14vh, 180px); }
.studio-system .section-head h2 { color: var(--td); }
.studio-system .label { color: var(--td-mut); }
.system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}
.system-case {
  min-width: 0;
  border-top: 1px solid var(--td-line);
  padding-top: 24px;
}
.system-case .case-kicker { color: var(--gold); }
.system-case h3 {
  color: var(--td);
  font-size: clamp(1.55rem, 2.25vw, 2.35rem);
  overflow-wrap: anywhere;
}
.system-case p:not(.case-kicker) {
  margin-top: 18px;
  color: var(--td-mut);
  font-size: var(--fs-0);
  line-height: 1.62;
}
.system-case-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 22px;
  color: var(--gold);
  font-size: var(--fs-0);
  font-weight: 700;
  text-decoration: none;
}
.system-case-link:hover,
.system-case-link:focus-visible { color: var(--td); }
.system-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 26px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--td-line);
  background:
    linear-gradient(135deg, rgba(217, 164, 65, 0.08), transparent 38%),
    #101012;
}
.system-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.02);
}
.system-visual.ops-stack img {
  object-position: top center;
}
.system-visual.app-system-preview img {
  object-position: center;
}
/* ---------- Anonymisierte Konzeptstudie als System-Visual ----------
   Kein Browser-Frame (nicht deployed → keine Fake-Domain).
   Ästhetik: Near-Black + Elektroblau, Signatur = der Puls. Eine
   EKG-Linie zeichnet sich scrollend durch Signal→Bedarf→Termin→Übergabe,
   die Orbs zünden der Reihe nach. Endzustand (no-JS/reduced) = alles da. */
.system-visual.cp-stage {
  display: block;
  aspect-ratio: 4 / 3;
  padding: clamp(14px, 1.7vw, 22px);
  overflow: hidden;
  background:
    radial-gradient(120% 82% at 50% 0%, rgba(47, 108, 255, 0.14), transparent 62%),
    #080808;
}
.cp-head { display: flex; align-items: center; justify-content: space-between; }
.cp-mark {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: var(--w-semi);
  letter-spacing: -0.01em;
  color: #f7f7f2;
}
.cp-mark b { color: #76a2ff; font-weight: var(--w-bold); }
.cp-tag {
  font-family: "Outfit", sans-serif;
  font-size: 0.6rem;
  font-weight: var(--w-semi);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #76a2ff;
  border: 1px solid rgba(118, 162, 255, 0.4);
  border-radius: 100px;
  padding: 3px 9px;
}
.cp-ekg {
  display: block;
  width: 100%;
  height: clamp(34px, 5.5vw, 54px);
  margin: clamp(12px, 2.2vw, 24px) 0;
  overflow: visible;
}
.cp-trace {
  fill: none;
  stroke: url(#cpStroke);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(47, 108, 255, 0.7));
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - var(--process, 1)) * 100);
}
.cp-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cp-flow li {
  --lit: clamp(0, calc((var(--process, 1) - var(--at)) * 9), 1);
  position: relative;
  padding-top: 17px;
}
.cp-orb {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d7e6ff, #2f6cff 60%, #133a8f);
  opacity: calc(0.35 + var(--lit) * 0.65);
}
.cp-orb::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 12px #2f6cff;
  opacity: var(--lit);
}
.cp-flow small {
  display: block;
  color: #76a2ff;
  font-family: "Outfit", sans-serif;
  font-size: 0.6rem;
  font-weight: var(--w-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: calc(0.5 + var(--lit) * 0.5);
}
.cp-flow b {
  display: block;
  margin-top: 3px;
  color: rgba(247, 247, 242, calc(0.55 + var(--lit) * 0.45));
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  line-height: 1.15;
  font-weight: var(--w-med);
}
.section-sub {
  margin-top: 14px;
  max-width: 46ch;
  color: var(--td-mut);
  font-size: var(--fs-0);
  line-height: 1.55;
}

/* nur.operations: echter Capture des deutschen WEG-Playbooks. Der Scroll
   verschiebt nur den Bildausschnitt von Fallwahl/Eingabe zu Ergebnis/Review;
   keine erfundene Oberfläche und kein inszenierter Demo-Zustand. */
.system-visual.ops-desk { background: #f6f5f1; }
.system-visual.ops-desk .ops-playbook {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(18% + var(--process, 1) * 64%) center;
  filter: saturate(0.9) contrast(1.035);
  transform: scale(1.015);
}

/* echtes salesengine-Cockpit (Live-Capture, Demo-Daten): belichtet sich beim
   Passieren des Lichts (Void-Schleier fällt), Rand zündet gold via ::after. */
.system-visual.sd-shot { background: #eef1f5; }
.system-visual.sd-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.sd-shot .sd-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--void);
  opacity: calc(1 - clamp(0, calc((var(--process, 1) - 0.05) / 0.4), 1));
  pointer-events: none;
}

/* Flaggschiff-Mobil: echte salesengine-Screenshots (Money Queue / Lead /
   Pipeline) im Phone-Frame, Cross-Fade über data-step — statt Nachbau. */
.se-device.se-real { padding: 0; overflow: hidden; }
.se-real .se-screens { position: relative; overflow: hidden; border-radius: inherit; }

/* ---------- salesengine-Story „Ein Lead, den ganzen Weg" ----------
   Kein Opacity-Crossfade mehr. Drei echte App-Screens, gestapelt; ein
   warmweißer Lichtschnitt (.se-edge) wischt den nächsten Screen von oben
   herein (clip-path), während jeder Screen per translateY zur echten
   Müller- / Blocker- / Rang-Zeile geführt wird. Ein Treiber: --cut → --r1/
   --r2/--p1..3/--edge aus updateProcessMotion. Ohne JS/Motion: Endzustand =
   Pipeline (clip voll offen), alle Rail-Zeilen gelesen. */
.se-shot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 1;
  will-change: transform, clip-path;
  backface-visibility: hidden;
}
.se-s1 { z-index: 1; transform: translateY(calc(var(--p1, 0px) + var(--se-drift, 0px))); }
.se-s2 {
  z-index: 2;
  transform: translateY(calc(var(--p2, 0px) + var(--se-drift, 0px)));
  clip-path: inset(0 0 calc((1 - var(--r1, 1)) * 100%) 0);
}
.se-s3 {
  z-index: 3;
  transform: translateY(calc(var(--p3, 0px) + var(--se-drift, 0px)));
  clip-path: inset(0 0 calc((1 - var(--r2, 1)) * 100%) 0);
}
/* Der Lichtschnitt: eine warmweiße Kante, die die Enthüllung anführt. Sitzt
   auf der aktiven clip-Grenze (--edgeY), hell nur während des Wischs (--edge,
   in JS gebumpt), nur wenn die Sektion armiert ist. Feder per Gradient —
   KEIN filter/blur im Scroll. */
.se-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--edgeY, 0) * 100%);
  height: 46px;
  margin-top: -23px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(253, 248, 239, 0) 0%,
    rgba(253, 248, 239, 0.5) 46%,
    rgba(253, 248, 239, 0.75) 50%,
    rgba(253, 248, 239, 0.5) 54%,
    rgba(253, 248, 239, 0) 100%);
  mix-blend-mode: screen;
}
.se-armed .se-edge { opacity: var(--edge, 0); }
/* Armierung durch die Lichtankunft: ein leiser warmer Schein wächst in den
   oberen Rand, wenn die Sektion ins Bild kommt (additiv, fallback-neutral —
   ohne JS/reduced-motion nie gesetzt). */
.se-armed .se-real .se-screens::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(120% 62% at 50% -8%, rgba(253, 248, 239, 0.16), transparent 60%);
  opacity: var(--process, 0);
}

/* Kontrollraum: der Rand jeder System-Kachel zündet gold, wenn das Licht
   sie erreicht (--process kreuzt die Schwelle) — die Instrumente gehen online. */
.system-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  --ignite: clamp(0, calc((var(--process, 1) - 0.34) * 2.6), 1);
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, calc(var(--ignite) * 0.6)),
    inset 0 0 22px rgba(217, 164, 65, calc(var(--ignite) * 0.14));
}

/* ---------- Das eine Licht: der Reader (Lichtfaden, Motion) ----------
   Ein gedimmter Faden (Rail) läuft die linke Gutter hinab; ein warmweißes
   Licht (Kopf) reitet ihn und leuchtet ihn lokal aus, ein Kometenschweif
   trailt beim schnellen Scrollen, an jeder Station pulst ein Andock-Ring.
   Position gehört dem Scroll; --flare (gelerpt) der Sektionsnähe. Läuft
   Desktop UND mobil; nur an Motion gekoppelt. */
#studio-rail {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 58;
  width: 1.5px;
  height: 100vh;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(217, 164, 65, 0.16) 12%, rgba(217, 164, 65, 0.16) 88%, transparent);
  opacity: 0;
  transition: opacity 1s var(--ease);
  will-change: opacity;
}
#studio-rail.on { opacity: 1; }

#studio-comet {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 59;
  width: 2.5px;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  filter: blur(0.4px);
  will-change: transform, height, opacity;
}

#studio-dock {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 59;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: 1.5px solid var(--light-hot);
  box-shadow: 0 0 10px rgba(253, 248, 239, 0.5);
}
#studio-dock.ping { animation: reader-dock 0.85s var(--ease) forwards; }
@keyframes reader-dock {
  0%   { opacity: 0.9; transform: scale(0.35); }
  70%  { opacity: 0.24; }
  100% { opacity: 0; transform: scale(1.5); }
}

#studio-reader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  background: radial-gradient(circle at 42% 38%, var(--light-hot), var(--gold) 52%, rgba(217, 164, 65, 0) 72%);
  box-shadow: 0 0 12px 3px rgba(253, 248, 239, 0.4), 0 0 34px 8px rgba(217, 164, 65, 0.18);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
#studio-reader.on { opacity: calc(0.5 + var(--flare, 0) * 0.5); }

/* Andock-Puls greift in die Sektions-Überschrift über — warmes Aufglühen,
   zonen-bewusst (dunkel: warmweißer Halo, hell: goldener Halo). */
.reader-lit { transition: text-shadow 0.5s var(--ease), color 0.5s var(--ease); }
.zone-dark .reader-lit { text-shadow: 0 0 26px rgba(253, 248, 239, 0.4), 0 0 8px rgba(217, 164, 65, 0.3); }
.zone-light .reader-lit { text-shadow: 0 0 22px rgba(217, 164, 65, 0.35); }

@media (prefers-reduced-motion: reduce) {
  #studio-rail, #studio-comet, #studio-dock, #studio-reader { display: none !important; }
}

/* ---------- energyo.salesengine — Desktop-Cockpit (Attio-Rekonstruktion) ----------
   Keine login-freie Preview existiert → originalgetreu nachgebaut aus dem
   echten Design-System (DesktopShell.tokens.css): 56px-Navy-Sidebar +
   3-Pane-Cockpit (Queue · Workspace · Pass) auf Weiß, 0.5px-Haarlinien,
   Emerald als einziges Aktions-Signal, Verdict-Pills als Bloomberg-Band,
   schwebender Glas-Composer. Fixtures aus den echten Test-Daten. */
.system-visual.se-desk {
  display: flex;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef1f5;
  color: #111827;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sd-primary: #059669;
  --sd-line: #d1d9e6;
  --sd-soft: #5f6b7a;
  --sd-danger: #dc2626;
  --sd-warn: #ea580c;
  --sd-succ: #16a34a;
  --sd-gold: #9a7b1f;
}
.sd-bar {
  flex: 0 0 clamp(24px, 2vw, 30px);
  background: #0d1b2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
}
.sd-brand {
  position: relative;
  width: 16px; height: 16px;
  border-radius: 5px;
  background: linear-gradient(180deg, #24386a, #15233f);
  display: inline-flex; align-items: center; justify-content: center;
  color: #edf3ff; font-size: 0.5rem; font-weight: var(--w-bold);
}
.sd-brand i { width: 3px; height: 3px; border-radius: 50%; border: 1px solid #0ea5d8; margin-left: 1px; }
.sd-nav { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.sd-nav.on { background: rgba(52, 211, 153, 0.32); }
.sd-cockpit {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: 1.02fr 1.24fr 0.86fr;
  background: #fff;
}
.sd-pane { min-width: 0; padding: 7px 8px; border-right: 0.5px solid var(--sd-line); overflow: hidden; }
.sd-pane.sd-pass { border-right: 0; background: #f4f5f7; }
.sd-kick {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.5rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--sd-soft); margin-bottom: 6px;
}
.sd-kick span { color: #111827; }
.sd-lead {
  position: relative;
  display: grid; grid-template-columns: 3px 1fr auto; gap: 5px;
  padding: 5px 0; border-bottom: 0.5px solid var(--sd-line);
}
.sd-rail { grid-row: 1 / span 2; border-radius: 2px; background: var(--sd-line); }
.sd-lead.is-hot .sd-rail { background: var(--sd-succ); }
.sd-lead.is-warm .sd-rail { background: var(--sd-warn); }
.sd-lead.is-cold .sd-rail { background: var(--sd-danger); }
.sd-lead > div { min-width: 0; }
.sd-lead b { display: block; font-size: 0.56rem; font-weight: var(--w-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-lead small, .sd-lead em { display: block; font-size: 0.47rem; font-style: normal; color: var(--sd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-verdict {
  grid-column: 2 / span 2; justify-self: start; margin-top: 2px;
  font-size: 0.45rem; font-weight: var(--w-bold); padding: 1px 5px; border-radius: 999px;
}
.sd-verdict.is-crit { background: rgba(220, 38, 38, 0.12); color: var(--sd-danger); }
.sd-verdict.is-succ { background: rgba(22, 163, 74, 0.12); color: var(--sd-succ); }
.sd-verdict.is-warn { background: rgba(234, 88, 12, 0.12); color: var(--sd-warn); }
.sd-hero { background: #f4f5f7; border-radius: 6px; padding: 6px 7px; }
.sd-hero > small { font-size: 0.46rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sd-soft); }
.sd-hero > b { display: block; font-size: 0.62rem; font-weight: var(--w-bold); margin-top: 1px; }
.sd-band { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; opacity: clamp(0.25, calc(var(--process, 1) * 1.5), 1); }
.sd-band span { font-size: 0.43rem; font-weight: var(--w-semi); padding: 1px 5px; border-radius: 999px; background: #eef1f5; color: var(--sd-soft); }
.sd-band .is-crit { background: rgba(220, 38, 38, 0.12); color: var(--sd-danger); }
.sd-band .is-warn { background: rgba(234, 88, 12, 0.12); color: var(--sd-warn); }
.sd-band .is-succ { background: rgba(22, 163, 74, 0.12); color: var(--sd-succ); }
.sd-money { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.sd-money small { display: block; font-size: 0.42rem; color: var(--sd-soft); }
.sd-money b { font-size: 0.6rem; font-weight: var(--w-bold); color: var(--sd-primary); font-variant-numeric: tabular-nums; }
.sd-money b.is-gold { color: var(--sd-gold); }
.sd-tabs { display: flex; gap: 6px; margin-top: 7px; padding-bottom: 4px; border-bottom: 0.5px solid var(--sd-line); }
.sd-tabs span { font-size: 0.46rem; color: var(--sd-soft); white-space: nowrap; }
.sd-tabs .on { color: #111827; font-weight: var(--w-bold); }
.sd-glass {
  margin-top: 7px; display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 14px rgba(13, 27, 42, 0.1);
  backdrop-filter: blur(6px);
}
.sd-eo {
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(180deg, #24386a, #15233f);
  display: inline-flex; align-items: center; justify-content: center;
  color: #edf3ff; font-size: 0.44rem; font-weight: var(--w-bold);
}
.sd-eo i { width: 2px; height: 2px; border-radius: 50%; border: 1px solid #0ea5d8; margin-left: 0.5px; }
.sd-glass em { font-style: normal; font-size: 0.44rem; color: var(--sd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-pass-id b { font-size: 0.56rem; font-weight: var(--w-bold); }
.sd-pass-id small { font-size: 0.46rem; color: var(--sd-soft); margin-left: 4px; }
.sd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 4px; margin-top: 6px; }
.sd-facts small { display: block; font-size: 0.42rem; color: var(--sd-soft); }
.sd-facts b { font-size: 0.5rem; font-weight: var(--w-bold); }
.sd-close { margin-top: 8px; }
.sd-close small { display: block; font-size: 0.44rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sd-soft); margin-bottom: 3px; }
.sd-close span { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--sd-line); margin-right: 2px; }
.sd-close .is-done { background: var(--sd-succ); }
.sd-close .is-now { background: var(--sd-primary); }
.product-ui span {
  position: absolute;
  display: block;
  border-radius: 5px;
}
.product-ui .rail {
  left: 18px; top: 18px; bottom: 18px; width: 15%;
  background: rgba(247, 245, 240, 0.08);
  border: 1px solid rgba(247, 245, 240, 0.12);
}
.product-ui .pane {
  right: 18px; top: 18px; width: 29%; height: 38%;
  background: rgba(247, 245, 240, 0.1);
  border: 1px solid rgba(247, 245, 240, 0.13);
}
.product-ui .pane.wide {
  left: 22%; top: 18px; width: 43%; height: calc(100% - 36px);
  background: linear-gradient(180deg, rgba(247, 245, 240, 0.12), rgba(247, 245, 240, 0.06));
}
.product-ui .line {
  left: 26%; height: 2px;
  background: rgba(217, 164, 65, 0.72);
}
.product-ui .line.a { top: 34%; width: 26%; }
.product-ui .line.b { top: 47%; width: 34%; background: rgba(247, 245, 240, 0.32); }
.product-ui .line.c { top: 60%; width: 22%; background: rgba(93, 124, 134, 0.8); }

.studio-method { padding-block: clamp(90px, 13vh, 160px); }
.method-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.46fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 92px);
  align-items: start;
}
.method-list {
  list-style: none;
  display: grid;
  gap: 22px;
  counter-reset: method;
}
.method-list li {
  counter-increment: method;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--tl-line);
}
.method-list li::before {
  content: counter(method, decimal-leading-zero);
  color: var(--gold-ink);
  font-family: "Outfit", sans-serif;
  font-weight: var(--w-semi);
}
.method-list strong {
  grid-column: 2;
  display: block;
  color: var(--tl);
  font-family: "Outfit", sans-serif;
  font-size: var(--fs-1);
  font-weight: var(--w-semi);
}
.method-list span {
  grid-column: 2;
  display: block;
  margin-top: 7px;
  color: var(--tl-mut);
  line-height: 1.6;
}
.studio-contact { border-top: 1px solid var(--tl-line); }

/* ---------- Footer (dunkle Klammer, wie das Sheet endet) ---------- */
footer { background: var(--void); color: var(--td); padding-block: clamp(70px, 10vh, 110px) 40px; }
footer .top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 34px; }
footer .fwm { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); color: #fbfaf7; }
footer .claim { color: var(--td-mut); font-size: var(--fs-0); max-width: 34ch; margin-top: 14px; }
footer nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
footer nav a { font-size: var(--fs--1); color: var(--td-mut); min-height: 44px; display: inline-flex; align-items: center; transition: color 0.2s var(--ease); }
footer nav a:hover { color: var(--td); }
footer .formula {
  margin-top: clamp(50px, 8vh, 80px); text-align: center;
  font-family: "Outfit", sans-serif; font-size: clamp(0.7rem, 0.64rem + 0.3vw, 0.85rem);
  font-weight: var(--w-med); letter-spacing: 0.34em; text-transform: uppercase; color: var(--td-mut);
}
footer .formula .p { color: var(--gold); letter-spacing: 0; }
footer .legal {
  border-top: 1px solid var(--td-line); margin-top: clamp(40px, 6vh, 64px); padding-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px;
  font-size: 0.8rem; color: var(--td-mut);
}
footer .legal a { border-bottom: 1px solid var(--td-line); transition: color 0.2s, border-color 0.2s; }
footer .legal a:hover { color: var(--td); border-color: var(--gold); }

/* ---------- Wanderpunkt (Signature) — nur JS + Motion + Desktop ---------- */
.tdot {
  position: fixed; z-index: 90; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 32%, var(--gold-hot) 0%, var(--gold) 48%, #a1721d 100%);
  box-shadow: 0 0 14px rgba(217, 164, 65, 0.5);
  will-change: transform; display: none;
  opacity: 0; transition: opacity 0.8s var(--ease);
}
.tdot.on { opacity: 1; }
/* Das Rasten: Ankunfts-Impuls — feiner Ring blitzt aus, Glow zuckt kurz weiß auf.
   (Der Kugel-Overshoot selbst kommt aus dem JS-Puls im Transform.) */
.tdot::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid transparent; opacity: 0; pointer-events: none;
}
.tdot.snap::before { animation: snapRing 0.5s ease-out; }
.tdot.snap { animation: snapGlow 0.4s ease-out; }
@keyframes snapRing {
  0% { opacity: 0.9; transform: scale(0.5); border-color: rgba(253, 248, 239, 0.9); }
  100% { opacity: 0; transform: scale(2.8); border-color: rgba(217, 164, 65, 0); }
}
@keyframes snapGlow {
  0% { box-shadow: 0 0 14px rgba(217, 164, 65, 0.5); }
  35% { box-shadow: 0 0 26px rgba(253, 248, 239, 0.95); }
  100% { box-shadow: 0 0 14px rgba(217, 164, 65, 0.5); }
}
.tdot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1px; height: 74px; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(255, 233, 194, 0.7), transparent);
  opacity: var(--beam, 0);
}

/* ---------- Rechtsseiten ---------- */
.doc { padding-block: 150px 90px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: var(--fs-3); font-weight: var(--w-semi); margin-bottom: 10px; }
.doc .doc-sub { color: var(--tl-mut); margin-bottom: 50px; }
.doc h2 { font-size: var(--fs-1); font-weight: var(--w-semi); margin: 44px 0 12px; }
.doc h3 { font-size: var(--fs-0); font-weight: var(--w-semi); margin: 26px 0 8px; }
.doc p, .doc li { font-size: var(--fs-0); color: var(--tl); line-height: 1.7; }
.doc ul { padding-left: 22px; margin-block: 10px; }
.doc p + p { margin-top: 10px; }
.doc a { color: var(--gold-ink); border-bottom: 1px solid rgba(138, 98, 18, 0.35); }
.doc .hint {
  margin-top: 54px; padding: 18px 22px; border-left: 2px solid var(--gold);
  background: var(--paper-2); color: var(--tl-mut); font-size: var(--fs--1); line-height: 1.6;
}
.doc address { font-style: normal; line-height: 1.7; }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 24px; }
.nf .code { font-family: "Outfit", sans-serif; font-weight: var(--w-wm-b); font-size: clamp(4rem, 16vw, 9rem); line-height: 1; color: #fbfaf7; }
.nf p { color: var(--td-mut); max-width: 40ch; }
.nf a { color: var(--gold); border-bottom: 1px solid rgba(217, 164, 65, 0.4); min-height: 44px; display: inline-flex; align-items: center; }

/* ============================================================
   Motion — ausschließlich additiv (html.js + Motion erlaubt).
   Ohne JS oder mit reduced-motion: alles sofort sichtbar.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  html.js .reveal.in { opacity: 1; transform: none; }

  html.js .litany li {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), color 0.7s var(--ease);
  }
  html.js .litany li.in { opacity: 1; transform: none; }

  /* Hero-Ignition — der EINE laute Moment */
  html.js .hero .label, html.js .hero h1, html.js .hero .sub, html.js .hero .scroll-hint { opacity: 0; }
  html.js .hero-wm .l { opacity: 0; transform: translateY(0.35em); }
  html.js .hero-wm .dot { opacity: 0; transform: scale(0.2); }
  html.js .hero-light { opacity: 0; }
  html.js .ignite .hero-wm .l {
    animation: rise 0.7s var(--ease) forwards;
    animation-delay: calc(var(--i) * 80ms);
  }
  /* Nach der Ignition: Animation ablegen, damit background-clip:text greifen kann */
  html.js .hero.settled .hero-wm .l { animation: none; opacity: 1; transform: none; }
  /* .settled ist der VOLLE sichtbare Endzustand (nicht nur die Buchstaben) — so
     können Wiederkehrer die 2,9s-Choreo überspringen und trotzdem alles sehen. */
  html.js .hero.settled .label,
  html.js .hero.settled h1,
  html.js .hero.settled .sub,
  html.js .hero.settled .scroll-hint,
  html.js .hero.settled .hero-light { opacity: 1; }
  html.js .hero.settled .hero-wm .dot { opacity: 1; transform: none; animation: none; }
  /* Session-Guard: Wiederkehrer bekommen einen kurzen Fade der Hero-Copy statt
     der vollen Ignition (~0,55s statt ~2,9s). Erstbesucher sind unberührt. */
  html.js .hero.instant > .wrap { animation: heroInstant 0.55s var(--ease) both; }
  @keyframes heroInstant { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  /* Der Puls: pocht aus (1,5×) und fällt in Ruhe zurück — sein Ende (1,45s) IST
     der Handoff-Trigger (animationend im JS). Alles Weitere wird daraus geboren. */
  /* Der Puls in zwei Akten: Aufstieg bis zum Peak (1,0 s) — dort wird das Licht
     geboren (JS hört auf animationend von igniteRise) — dann Beruhigung auf 1. */
  html.js .ignite .hero-wm .dot {
    animation:
      igniteRise 0.4s cubic-bezier(0.3, 0.6, 0.4, 1) 0.6s forwards,
      igniteSettle 0.5s var(--ease) 1s forwards;
  }
  html.js .ignite .hero-wm .dot::after { animation: flare 0.9s var(--ease) 0.94s; }
  html.js .ignite .hero-light { animation: lightup 1.3s var(--ease) 0.7s forwards; }
  html.js .ignite .label { animation: fadein 0.8s var(--ease) 0.15s forwards; }
  html.js .ignite h1 { animation: fadeup 0.8s var(--ease) 1.25s forwards; }
  html.js .ignite .sub { animation: fadeup 0.8s var(--ease) 1.4s forwards; }
  html.js .ignite .scroll-hint { animation: fadein 0.9s var(--ease) 2s forwards; }
  html.js .scroll-hint i { animation: drop 2.6s ease-in-out 2.2s infinite; }
  html.js .ignite .dust i { animation: dustDrift var(--d, 13s) linear var(--dl, 0s) infinite; }
  html.js .studio-page .hero-wm .dot { opacity: 1; transform: scale(1); }
  html.js .studio-page .hero-wm .dot::after { animation: none; opacity: 0.35; }

  @keyframes dustDrift {
    0% { transform: translate(0, 26px); opacity: 0; }
    12% { opacity: var(--o, 0.28); }
    70% { opacity: calc(var(--o, 0.28) * 0.5); }
    100% { transform: translate(var(--dx, 16px), -240px); opacity: 0; }
  }

  .stage .go .arr, .btn, nav.main .cta { transition-duration: 0.3s; }

  @keyframes rise    { to { opacity: 1; transform: none; } }
  @keyframes igniteRise   { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: scale(1.5); } }
  @keyframes igniteSettle { 0% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes flare   { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes lightup { to { opacity: 1; } }
  @keyframes fadein  { to { opacity: 1; } }
  @keyframes fadeup  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes drop    { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tdot, .cursor-light { display: none !important; }
}

/* ---------- Mobile: eigenständig gesetzt, nicht geschrumpft ---------- */
@media (max-width: 767px) {
  /* Wanderpunkt läuft jetzt auch mobil (scroll-getrieben) — nicht mehr display:none.
     Nur reduced-motion (oben) blendet ihn aus. */
  .sf-url { min-height: 44px; } /* Touch-Ziel (Domain-Pille im Site-Frame) */
  .stage[data-align="right"] .inner { align-items: flex-start; text-align: left; }
  .stage .inner { gap: 14px; }
  /* „nur.operations" muss auch bei 320 px in eine Zeile passen */
  .stage .wm { font-size: clamp(1.9rem, 9.4vw, 3rem); }
  .hero { padding-top: 100px; }
  .hero .sub { max-width: 34ch; }
  footer .top { flex-direction: column; align-items: flex-start; }
  footer nav { align-items: flex-start; }
  .contact h2 { max-width: 14ch; }
  .studio-hero { padding-top: 104px; }
  .studio-hero-grid,
  .studio-thesis-grid,
  .section-head,
  .case-feature,
  .case-grid,
  .system-grid,
  .method-grid {
    grid-template-columns: 1fr;
  }
  .studio-hero-copy h1 {
    max-width: 10ch;
    font-size: clamp(2.55rem, 11vw, 3.6rem);
    line-height: 1.04;
  }
  /* #8: Wortmarke NICHT mehr ausblenden — der mobile Einstieg braucht sein
     Marken-Gesicht (Wortzeichen + Gold-Punkt + Proofline unter der Copy),
     nicht nur austauschbare Copy. Lichtkern (hero-light) bleibt am Punkt. */
  .studio-mark {
    width: 100%;
    margin-top: clamp(30px, 6vh, 48px);
    gap: clamp(16px, 3vh, 24px);
  }
  .studio-signal { width: 100%; padding-block: clamp(12px, 2.5vh, 22px); }
  .studio-mark .hero-wm {
    font-size: clamp(2.6rem, 12.5vw, 4.2rem); /* „nur.studio" passt ab 320px */
  }
  .studio-proofline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-proofline span:nth-child(2) { border-right: 0; }
  .studio-proofline span:nth-child(-n + 2) { border-bottom: 1px solid var(--td-line); }
  .studio-strip {
    width: min(100% - 28px, 620px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 42px;
  }
  .studio-strip img {
    height: clamp(104px, 34vw, 170px);
  }
  .studio-thesis,
  .studio-work,
  .studio-system,
  .studio-method {
    padding-block: 72px;
  }
  .section-head { margin-bottom: 34px; }
  .case-feature { padding-bottom: 48px; }
  /* Flaggschiff auf Touch: kein Cursor — der Scroll übernimmt beide
     Rollen. Settle: der Frame legt sich wie ein Objekt auf den Tisch;
     Drift: das warmweiße Licht wandert scrollgetrieben über die Fläche. */
  .case-sektion { padding: 14px; perspective: none; }
  .sektion-scene { transform: none; transform-style: flat; }
  .sektion-lot { transform: none; }
  .sektion-surface {
    transform:
      rotateX(calc((1 - min(var(--process, 1) * 2, 1)) * 5deg))
      translateY(calc((1 - min(var(--process, 1) * 2, 1)) * 12px));
  }
  .sektion-system { transform: translateY(calc((1 - var(--pc)) * -6%)); }
  .frame-body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at calc(15% + var(--process, 1) * 65%) calc(20% + var(--process, 1) * 45%),
      rgba(253, 248, 239, 0.11), transparent 40%);
    pointer-events: none;
  }
  .browser-url { min-height: 44px; }
  /* Ohne 3D-Kontext gilt wieder die DOM-Reihenfolge: die Linie taucht
     an der Oberkante der System-Platte unter die Oberfläche ab
     (statt durch die Schwellen-Zeile zu laufen). */
  .sektion-lot { z-index: auto; }
  .se-scene { grid-template-columns: 1fr; gap: 16px; }
  .se-screens { height: 352px; }
  .case-media,
  .case-thumb,
  .system-visual { border-radius: 5px; }
  .case-copy h3,
  .case-card h3,
  .system-case h3 { overflow-wrap: anywhere; }
  .method-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1040px) {
  .studio-hero-grid,
  .case-feature {
    grid-template-columns: 1fr;
  }
  .case-grid,
  .system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Prozess-Endzustand ohne Zeitachse ----------
   Ohne JS oder mit reduced-motion zeigen alle scrollgetriebenen
   Szenen ihren fertigen Zustand (durchgezogene Linie, geklärte
   Outputs, offener Schnitt) — die würdigste statische Lesart.
   Muss NACH den lokalen --process:0-Deklarationen stehen. */
html:not(.js) [data-process-motion] { --process: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-process-motion] { --process: 1; }
  /* salesengine-Szene ohne Zeitachse: Money Queue steht, alle Beats gelesen */
  .se-s3 { opacity: 1; transform: none; }
  .se-rail li { opacity: 1; }
}