/* ============================================================
   SZENE EINS · Atelier Nord - ein Lichtobjekt als Inszenierung
   Konzept Nr. 04 "Die Bühne" von Berezka Web (berezka.dev)
   Architektur: sticky Bühnen + Scroll-Fortschritt als CSS-Var --p
   Motion: nur transform/opacity (Compositor), rAF-gesteuert
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/Literata-normal-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/Literata-normal-400-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/Literata-normal-400-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Literata';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/Literata-italic-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/Literata-italic-400-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/Literata-italic-400-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/IBMPlexSans-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/IBMPlexSans-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/IBMPlexSans-normal-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/IBMPlexSans-normal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/IBMPlexSans-normal-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/IBMPlexSans-normal-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/IBMPlexMono-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/IBMPlexMono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/IBMPlexMono-normal-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/IBMPlexMono-normal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/IBMPlexMono-normal-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/IBMPlexMono-normal-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- Bühne (Tokens) ---------- */
:root{
  --stage:#080604;          /* Blackout, warm */
  --stage-2:#0D0A07;
  --ink:#F2ECDF;            /* warmes Elfenbein */
  --ink-dim:#8F877A;
  --ink-faint:#575147;
  --line:rgba(242,236,223,.13);
  --menu-bg:#141009;
  --head-bg:rgba(8,6,4,.88);
  --tungsten:#FFB45C;       /* 2700 K */
  --ember:#E2664A;          /* Glut */
  --cool:#CFE2EE;           /* 5300 K */
  --leaf:#697E4A;
  --font-display:'Literata', Georgia, serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --wrap:1180px;
  --ease:cubic-bezier(.33,.01,.2,1);
}
/* Farbwelten: die Lichtfarbe der Inszenierung */
:root[data-palette="gezeiten"]{--tungsten:#7FB3DE; --ember:#4EC2AE; --cool:#E7F0F7}
:root[data-palette="forst"]{--tungsten:#6FC094; --ember:#D9A54E; --cool:#E2EFE7}
:root[data-palette="graphit"]{--tungsten:#E8A83E; --ember:#D97E4A; --cool:#CBD9E9}
/* Saallicht an: helle Bühne, dunkle Schrift, kräftigere Akzente */
:root[data-theme="light"]{
  --stage:#F2EDE3; --stage-2:#EAE4D7;
  --ink:#241F18; --ink-dim:#665D4D; --ink-faint:#948A77;
  --line:rgba(36,31,24,.15);
  --menu-bg:#FBF8F1; --head-bg:rgba(242,237,227,.92);
  --tungsten:#C97F2E; --ember:#BC4A31; --cool:#4E7A96;
}
:root[data-theme="light"][data-palette="gezeiten"]{--tungsten:#3E7CAE; --ember:#2E8E7E; --cool:#6C93AC}
:root[data-theme="light"][data-palette="forst"]{--tungsten:#3E8E62; --ember:#A87A2E; --cool:#5E8E7E}
:root[data-theme="light"][data-palette="graphit"]{--tungsten:#B07A1E; --ember:#A85A2E; --cool:#5E7A9E}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--stage)}
body{
  font-family:var(--font-body); color:var(--ink);
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--tungsten); color:#211405}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,4vw,48px)}
.mono{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim)}
.mono b{color:var(--tungsten); font-weight:500}
em{font-style:italic}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--tungsten);color:#211405;padding:10px 18px;z-index:99}
.skip:focus{left:0}

/* Körnung über allem - Kino, nicht Bildschirm */
.grain{position:fixed; inset:-40px; z-index:60; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Kopf ---------- */
.head{position:fixed; inset-inline:0; top:0; z-index:50;
  background:linear-gradient(to bottom, var(--head-bg), transparent);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.head-in{display:flex; align-items:center; gap:18px; padding-block:16px}
@media (max-width:640px){
  .head-in{gap:8px; padding-block:12px}
  .brand{font-size:.98rem}
  .tgl,.lang-btn{width:30px; height:30px}
  .flag-ic{width:15px; height:11px}
  .head-cta{padding:7px 11px; font-size:.6rem; letter-spacing:.07em}
}
.brand{font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:.01em; text-decoration:none; color:var(--ink)}
.brand em{color:var(--tungsten)}
.act-now{margin-right:auto; margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:640px){.act-now{visibility:hidden}}
.head-cta{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  transition:border-color .25s ease, color .25s ease, background .25s ease; white-space:nowrap}
.head-cta:hover{border-color:var(--tungsten); color:var(--tungsten)}
/* Sprachen */
.langs{position:relative; display:flex}
.lang-btn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:none; cursor:pointer}
.flag-ic{width:17px; height:13px; border-radius:2px; display:block}
.lang-dropdown{position:absolute; top:calc(100% + 8px); right:0; list-style:none; display:none;
  background:var(--menu-bg); border:1px solid var(--line); border-radius:12px; padding:6px; z-index:70}
/* Saallicht- und Farbwelt-Schalter */
.tgl{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:none; cursor:pointer; color:var(--ink); flex:none;
  transition:border-color .25s ease}
.tgl:hover{border-color:var(--tungsten)}
.pal-chip{width:14px; height:14px; border-radius:50%; display:block;
  background:conic-gradient(var(--tungsten), var(--ember), var(--cool), var(--tungsten))}
.tgl .ic-sun{display:none}
.tgl .ic-moon{display:block}
:root[data-theme="light"] .tgl .ic-sun{display:block}
:root[data-theme="light"] .tgl .ic-moon{display:none}
.langs.open .lang-dropdown{display:block}
.lang-dropdown li a{display:flex; align-items:center; justify-content:center; width:38px; height:32px; border-radius:8px}
.lang-dropdown li a:hover{background:color-mix(in srgb, var(--ink) 7%, transparent)}
.lang-dropdown li.lang-active a{background:color-mix(in srgb, var(--ink) 10%, transparent)}

/* Akt-Leiste rechts */
.rail{position:fixed; right:clamp(10px,2vw,26px); top:50%; translate:0 -50%; z-index:50;
  display:flex; flex-direction:column; gap:10px}
.rail a{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--ink-faint);
  text-decoration:none; width:30px; height:30px; border:1px solid transparent; border-radius:50%;
  display:grid; place-items:center; transition:color .25s ease, border-color .25s ease}
.rail a.on{color:var(--tungsten); border-color:color-mix(in srgb, var(--tungsten) 40%, transparent)}
@media (max-width:820px){.rail{display:none}}

/* ---------- Bühnen-Grundgerüst ----------
   .pin = hohe Spur, .stage = klebende Bühne (100dvh) */
.pin{position:relative}
.akt12{height:620vh}
.pin-anchor{position:absolute; top:34%; left:0; width:1px; height:1px}
.stage{position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; display:grid; align-content:center}
.act-frame{position:absolute; top:76px; left:0; right:0; z-index:5}
.act-frame .wrap{display:flex; justify-content:space-between; gap:12px}

/* ============================================================
   PROLOG - Blackout. Der Zeiger ist der Scheinwerfer.
   ============================================================ */
.prolog{position:relative; height:100vh; height:100dvh; overflow:hidden; display:grid; align-content:center;
  cursor:crosshair}
.prolog-type{position:relative; z-index:2}
.prolog h1{font-family:var(--font-display); font-weight:700; font-style:italic;
  font-size:clamp(3rem,11vw,9.2rem); line-height:1.02; letter-spacing:-.015em; color:var(--ink)}
.prolog h1 span{display:block}
.prolog h1 .l2{margin-left:.9em}
/* die Schrift liegt im Dunkeln: sichtbar nur unter dem Lichtkegel */
.spot-reveal{
  -webkit-mask-image:radial-gradient(circle 12rem at var(--mx,50%) var(--my,45%), #000 0 35%, transparent 72%);
          mask-image:radial-gradient(circle 12rem at var(--mx,50%) var(--my,45%), #000 0 35%, transparent 72%);
  color:transparent;
  background:linear-gradient(115deg, var(--ink) 30%, color-mix(in srgb, var(--tungsten) 45%, #FFF) 55%, var(--ink) 75%);
  -webkit-background-clip:text; background-clip:text;
}
/* Geist- und Lichtschrift liegen in derselben Zelle - deckungsgleich */
.h1-stack{display:grid}
.h1-stack h1{grid-area:1/1}
.prolog .ghost-h1{color:color-mix(in srgb, var(--ink) 5%, transparent)}
.prolog .spot-reveal{color:transparent}
/* weicher Lichtfleck, der dem Zeiger folgt */
.torch{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle 16rem at var(--mx,50%) var(--my,45%),
    color-mix(in srgb, var(--tungsten) 14%, transparent),
    color-mix(in srgb, var(--tungsten) 5%, transparent) 45%, transparent 70%)}
/* Saallicht an: das Spiel kehrt sich um - der Zeiger wirft SCHATTEN,
   und die Schrift wird im Schatten lesbar */
:root[data-theme="light"] .torch{
  background:radial-gradient(circle 16rem at var(--mx,50%) var(--my,45%),
    color-mix(in srgb, #2A2114 24%, transparent),
    color-mix(in srgb, #2A2114 9%, transparent) 45%, transparent 70%)}
:root[data-theme="light"] .spot-reveal{
  background:linear-gradient(115deg, var(--ink) 30%, #120E08 55%, var(--ink) 75%);
  -webkit-background-clip:text; background-clip:text}
:root[data-theme="light"] .prolog .ghost-h1{color:color-mix(in srgb, var(--ink) 10%, transparent)}
:root[data-theme="light"] .grain{opacity:.25}
/* Im Saallicht wirft die Leuchte Schatten statt Licht */
:root[data-theme="light"] .s-warm-a{stop-color:color-mix(in srgb, #3A2E1C 42%, transparent)}
:root[data-theme="light"] .s-warm-b{stop-color:color-mix(in srgb, #3A2E1C 4%, transparent)}
:root[data-theme="light"] .s-dim-a{stop-color:color-mix(in srgb, #4A2418 40%, transparent)}
:root[data-theme="light"] .s-dim-b{stop-color:color-mix(in srgb, #4A2418 3%, transparent)}
:root[data-theme="light"] .s-cool-a{stop-color:color-mix(in srgb, #26333E 42%, transparent)}
:root[data-theme="light"] .s-cool-b{stop-color:color-mix(in srgb, #26333E 4%, transparent)}
:root[data-theme="light"] .s-pool-a{stop-color:color-mix(in srgb, #2A2114 34%, transparent)}
:root[data-theme="light"] .s-bulb-a{stop-color:color-mix(in srgb, #2A2114 50%, transparent)}
:root[data-theme="light"] .bulb-core{fill:#211B12}
:root[data-theme="light"] .akt12 .halo{background:radial-gradient(circle, color-mix(in srgb, #2A2114 12%, transparent), transparent 65%)}
:root[data-theme="light"] .akt12 .stage::before{background:radial-gradient(130% 100% at 56% 106%, color-mix(in srgb, #3A2E1C 12%, transparent), transparent 62%)}
:root[data-theme="light"] .akt12 .stage::after{background:radial-gradient(130% 100% at 56% 106%, color-mix(in srgb, #4A2418 11%, transparent), transparent 62%)}
:root[data-theme="light"] .akt12 .glow-cool{background:radial-gradient(130% 100% at 56% 106%, color-mix(in srgb, #26333E 12%, transparent), transparent 62%)}
.prolog-eyebrow{margin-bottom:26px}
.prolog-eyebrow .dot{color:var(--tungsten)}
.prolog-foot{position:absolute; bottom:30px; left:0; right:0; z-index:3}
.prolog-foot .wrap{display:flex; align-items:center; gap:14px}
.prolog-foot .line{flex:0 0 44px; height:1px; background:var(--tungsten); opacity:.7}
.prolog-badge{position:absolute; top:50%; right:clamp(64px,7.5vw,120px); translate:0 -50%; z-index:2;
  text-align:right; display:grid; gap:6px; justify-items:end}
@media (max-width:820px){.prolog-badge{display:none}}

/* ============================================================
   AKT I + II - EINE Lampe, eine Bühne. Erst erwacht das Licht
   (--p1 0..1), dann wechseln die Szenen; nur der Text zieht um.
   data-stage: an | szenen · data-phase: lesen | kino | fest
   ============================================================ */
/* drei Leucht-Schichten, stufenlos per Scroll gemischt (--gw/--gd/--gc) */
.akt12 .stage::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(130% 100% at 56% 106%, color-mix(in srgb, var(--tungsten) 16%, transparent), transparent 62%);
  opacity:var(--gw,0)}
.akt12 .stage::after{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(130% 100% at 56% 106%, color-mix(in srgb, var(--ember) 13%, transparent), transparent 62%);
  opacity:var(--gd,0)}
.akt12 .glow-cool{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 100% at 56% 106%, color-mix(in srgb, var(--cool) 15%, transparent), transparent 62%);
  opacity:var(--gc,0)}
.duo-core{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:4vw; align-items:center}
/* zwei Textblöcke am selben Ort - nur sie wechseln, nie die Lampe */
.duo-copy{display:grid}
.duo-copy>div{grid-area:1/1; transition:opacity .6s var(--ease), translate .6s var(--ease)}
.copyB{opacity:0; translate:0 30px; pointer-events:none}
.akt12[data-stage="szenen"] .copyA{opacity:0; translate:0 -30px; pointer-events:none}
.akt12[data-stage="szenen"] .copyB{opacity:1; translate:0 0; pointer-events:auto}
/* Kopfzeile des Aktes blendet mit um */
.act-frame .fr-cell{position:relative}
.act-frame .fr{transition:opacity .5s ease; white-space:nowrap}
.act-frame .fr-b{position:absolute; left:0; top:0; opacity:0}
.act-frame .fr-cell.r .fr-b{left:auto; right:0}
.akt12[data-stage="szenen"] .fr-a{opacity:0}
.akt12[data-stage="szenen"] .fr-b{opacity:1}
/* Akt-I-Texte */
.copyA{max-width:30rem}
.copyA .kicker{margin-bottom:22px}
.copyA h2{font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,4.6vw,3.9rem);
  line-height:1.06; letter-spacing:-.01em; margin-bottom:22px}
.copyA h2 em{color:var(--tungsten)}
.copyA p{color:var(--ink-dim); max-width:26rem}
.akt12 .lit{opacity:calc((var(--p1,0) - .3)*2.4); translate:0 calc((1 - min(var(--p1,0)*1.8,1))*18px)}
.akt1-price{display:inline-flex; align-items:baseline; gap:12px; margin-top:30px;
  border:1px solid var(--line); border-radius:999px; padding:10px 20px}
.akt1-price .sum{font-family:var(--font-display); font-size:1.3rem; color:var(--ink)}
/* Beleg früh: eine Stimme, keine Behauptung */
.proof-quote{margin-top:26px; color:var(--ink-dim); font-size:.98rem; font-style:italic; max-width:24rem}
.proof-quote b{font-style:normal; font-weight:400; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-top:8px}
/* Die Lampe */
.lamp-scene{position:relative; min-height:72vh}
.lamp-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.lamp-line{stroke:#4A4238}
.akt12 .halo{position:absolute; left:50%; top:24%; width:46vmin; height:46vmin; translate:-50% -50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tungsten) 16%, transparent), transparent 65%);
  opacity:var(--p1,0); pointer-events:none}
/* Kegel- und Lichtfarben folgen der Farbwelt */
.s-warm-a{stop-color:color-mix(in srgb, var(--tungsten) 55%, transparent)}
.s-warm-b{stop-color:color-mix(in srgb, var(--tungsten) 4%, transparent)}
.s-dim-a{stop-color:color-mix(in srgb, var(--ember) 42%, transparent)}
.s-dim-b{stop-color:color-mix(in srgb, var(--ember) 3%, transparent)}
.s-cool-a{stop-color:color-mix(in srgb, var(--cool) 50%, transparent)}
.s-cool-b{stop-color:color-mix(in srgb, var(--cool) 4%, transparent)}
.s-pool-a{stop-color:color-mix(in srgb, var(--tungsten) 42%, transparent)}
.s-pool-b{stop-color:transparent}
.s-bulb-a{stop-color:color-mix(in srgb, var(--tungsten) 55%, #FFF)}
.s-bulb-b{stop-color:transparent}
.bulb-core{fill:color-mix(in srgb, var(--tungsten) 50%, #FFF)}
/* Kegel: warm wächst mit --p1; die Lichtfarbe fließt stufenlos (--cw/--cd/--cc) */
.akt12 .cone-warm{transform-origin:262px 154px; opacity:var(--cw,0);
  transform:scaleY(calc(.25 + var(--p1,0)*.75))}
.akt12 .pool{transform-origin:262px 566px; opacity:var(--poolo,0);
  transform:scaleX(calc(.3 + var(--p1,0)*.7))}
.akt12 .bulb-dot{opacity:calc(var(--p1,0)*1.4)}
@media (max-width:820px){
  .duo-core{grid-template-columns:1fr; gap:0; align-content:end}
  .lamp-scene{min-height:36vh; order:-1}
  .duo-copy{padding-bottom:5vh}
  .copyA h2{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .copyA p{font-size:.98rem}
  .proof-quote{font-size:.9rem; margin-top:18px}
  .akt1-price{margin-top:20px}
  .kelvin{font-size:clamp(2.8rem,15vw,3.6rem)}
  .szene-desc{min-height:0}
}
.kelvin{font-family:var(--font-mono); font-weight:500; font-size:clamp(3.4rem,9vw,7.4rem); letter-spacing:-.02em;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.kelvin small{font-size:.35em; color:var(--ink-dim); letter-spacing:.06em}
.szene-tag{margin-bottom:18px}
.szene-name{font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.05; min-height:1.2em}
.szene-desc{color:var(--ink-dim); max-width:24rem; margin-top:14px; min-height:4.6em}
.szene-list{display:flex; gap:10px; margin-top:30px}
.szene-list span{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; color:var(--ink-faint);
  transition:color .4s ease, border-color .4s ease}
.szene-list span.on{color:var(--tungsten); border-color:color-mix(in srgb, var(--tungsten) 50%, transparent)}
.akt12[data-phase="fest"] .szene-list span.on{color:var(--cool); border-color:color-mix(in srgb, var(--cool) 50%, transparent)}
/* kino/fest fließen über den warmen Kegel - rein scrollgetrieben */
.cone-dim{transform-origin:262px 154px; opacity:var(--cd,0)}
.cone-cool{transform-origin:262px 154px; opacity:var(--cc,0)}
.akt12 .crossfade{transition:opacity .45s ease, translate .45s var(--ease)}
.akt12 .crossfade.out{opacity:0; translate:0 10px}

/* ============================================================
   AKT III - Das Handwerk. Ruhige, redaktionelle Beats.
   ============================================================ */
.akt3{position:relative; padding-block:16vh 10vh; content-visibility:auto; contain-intrinsic-size: auto 1400px;
  background:linear-gradient(to bottom, var(--stage), var(--stage-2) 30%, var(--stage))}
.akt3-head{max-width:46rem; margin-bottom:9vh}
.akt3-head h2{font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem,4.4vw,3.6rem);
  line-height:1.08; margin-top:18px}
.akt3-head h2 em{color:var(--tungsten)}
.beats{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,26px)}
.beat{border:1px solid var(--line); border-radius:18px; padding:clamp(22px,2.6vw,34px);
  background:linear-gradient(160deg, color-mix(in srgb, var(--ink) 3.5%, transparent), color-mix(in srgb, var(--ink) 1%, transparent));
  position:relative; overflow:hidden}
.beat::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 50% -20%, color-mix(in srgb, var(--tungsten) 9%, transparent), transparent 60%);
  opacity:0; transition:opacity .5s ease}
.beat:hover::after{opacity:1}
.beat .b-num{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; color:var(--tungsten)}
.beat h3{font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,2.5vw,2.4rem); line-height:1.12; margin:16px 0 12px}
.beat p{color:var(--ink-dim); font-size:1.13rem; line-height:1.62; max-width:34rem}
.beat .b-big{font-family:var(--font-mono); font-weight:500; font-size:clamp(2.3rem,3.7vw,3.5rem);
  color:var(--ink); letter-spacing:-.02em; margin:12px 0 8px; font-variant-numeric:tabular-nums; white-space:nowrap}
.beat .b-big small{font-size:.36em; color:var(--ink-dim)}
.b1{grid-column:span 7}
.b2{grid-column:span 5}
.b3{grid-column:span 5}
.b4{grid-column:span 7}
@media (max-width:820px){.b1,.b2,.b3,.b4{grid-column:span 12}}
/* Spezifikationen */
.specs{margin-top:9vh; border-top:1px solid var(--line)}
.spec{display:flex; align-items:baseline; gap:18px; padding:16px 0; border-bottom:1px solid var(--line)}
.spec .k{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); flex:0 0 12.5rem}
.spec .v{color:var(--ink); font-size:1.18rem}
.spec .v small{color:var(--ink-dim)}
@media (max-width:640px){.spec{flex-wrap:wrap; gap:4px} .spec .k{flex-basis:100%}}

/* Auftritt beim Scrollen */
[data-reveal]{opacity:0; translate:0 26px; transition:opacity .8s var(--ease), translate .8s var(--ease)}
[data-reveal].in{opacity:1; translate:0 0}

/* ============================================================
   ZWISCHENAKT - Die Lichtprobe (interaktiv)
   ============================================================ */
.probe{padding-block:12vh; background:var(--stage)}
.probe-head{display:flex; justify-content:space-between; gap:14px; margin-bottom:26px}
.probe-stage{position:relative; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:#050507}
.probe-stage canvas{display:block; width:100%; height:min(58vh,540px); touch-action:none; cursor:crosshair}
.probe-hint{display:flex; align-items:center; gap:10px; margin-top:16px}
.pulse{width:7px; height:7px; border-radius:50%; background:var(--tungsten); animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ============================================================
   FINALE - ruhig, klar, Kaufabschluss
   ============================================================ */
.finale{position:relative; padding-block:16vh 8vh; overflow:hidden}
.finale::before{content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--tungsten) 10%, transparent), transparent 55%)}
.finale .wrap{position:relative}
.finale h2{font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(2.6rem,6.4vw,5.2rem); line-height:1.04; margin-bottom:18px}
.finale-sub{color:var(--ink-dim); max-width:30rem}
.finale-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,64px); margin-top:7vh; align-items:start}
@media (max-width:820px){.finale-grid{grid-template-columns:1fr}}
.order{border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3vw,40px);
  background:linear-gradient(160deg, color-mix(in srgb, var(--ink) 4%, transparent), color-mix(in srgb, var(--ink) 1%, transparent))}
.order .o-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
.order .o-row:first-child{padding-top:0}
.order .o-k{color:var(--ink-dim); font-size:.95rem}
.order .o-v{font-family:var(--font-mono); font-size:.85rem; color:var(--ink); text-align:right}
.order .o-sum{font-family:var(--font-display); font-size:2rem; color:var(--ink)}
.btn{display:inline-block; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border-radius:999px; padding:16px 28px; transition:transform .2s var(--ease), background .25s ease, color .25s ease}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--tungsten); color:color-mix(in srgb, var(--stage) 85%, #000)}
:root[data-theme="light"] .btn-solid{color:#FFF}
.btn-solid:hover{background:color-mix(in srgb, var(--tungsten) 82%, #FFF)}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--tungsten); color:var(--tungsten)}
.order .o-sum .o-strike{color:var(--ink-faint); text-decoration:line-through; font-size:.5em;
  margin-left:10px; font-family:var(--font-mono)}
.o-scarce{display:flex; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tungsten)}
.o-scarce .pulse{flex:none}
.order .btn{width:100%; text-align:center; margin-top:14px}
.order .o-note{margin-top:14px; text-align:center}
.agent{border:1px solid var(--line); border-radius:18px; overflow:hidden}
.agent-hd{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-dim); padding:14px 18px; border-bottom:1px solid var(--line)}
.agent pre{font-family:var(--font-mono); font-size:.78rem; line-height:1.7; color:var(--ink-dim);
  padding:16px 18px; overflow-x:auto}
.agent pre b{color:var(--tungsten); font-weight:500}
.agent-ft{font-size:.85rem; color:var(--ink-faint); padding:0 18px 16px}
.agent-ft code{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim)}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line); padding-block:40px}
.foot-in{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.foot .bw-seal{width:44px; height:44px; color:var(--ink-dim); flex:none}
.foot .credit{font-size:.88rem; color:var(--ink-dim); margin-right:auto}
.foot .credit b{color:var(--ink)}
.foot-legal{display:flex; gap:18px}
.foot-legal a{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none}
.foot-legal a:hover{color:var(--tungsten)}

/* ============================================================
   Reduzierte Bewegung: gleicher Inhalt, ohne Kino
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; translate:0; transition:none}
  .pin{height:auto !important}
  .stage{position:relative; height:auto; min-height:100vh}
  .akt12{--p1:1; --gw:1; --cw:1; --poolo:.9}
  .akt12 .lit{opacity:1; translate:0}
  .duo-copy{display:block}
  .duo-copy>div{opacity:1 !important; translate:0 !important; position:static}
  .copyB{margin-top:4rem}
  .act-frame .fr-b{display:none}
  .cone-warm{opacity:1 !important; transform:none !important}
  .akt12 .pool{opacity:.9; transform:none}
  .akt12 .bulb-dot{opacity:1}
  .spot-reveal{opacity:1; -webkit-mask-image:none; mask-image:none; background:none; color:var(--ink)}
  .torch{display:none}
  .pulse{animation:none}
  .grain{display:none}
}