/* ═══ Schwarzglas · Eine Anthologie in sechs Episoden ═══
   Konzept: Der Viewport ist ein schwarzes Glas (Spiegel/iPad), das aufwacht
   und eine Anthologie-Mediathek zeigt. Episoden = Akte der Fallgeschichte. */
:root{
  --black: oklch(0.1 0.004 250);
  --pane: oklch(0.155 0.008 245);
  --pane-hi: oklch(0.2 0.01 242);
  --ink: oklch(0.94 0.006 240);
  --mut: oklch(0.66 0.01 240);
  --faint: oklch(0.47 0.01 240);
  --line: oklch(0.3 0.012 240);
  --accent: oklch(0.78 0.1 200);
  --f-sans: "Archivo", sans-serif;
  --f-serif: "Literata", Georgia, "Times New Roman", serif;
  --f-read: var(--f-serif); /* erzählende Passagen — per Tweak umschaltbar */
  --f-mono: "IBM Plex Mono", monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{
  background:
    radial-gradient(1100px 680px at 50% -16%, oklch(0.135 0.006 250), transparent 60%),
    oklch(0.045 0.003 250);
  color:var(--ink);
  font-family:var(--f-sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
  padding:clamp(12px, 3vmin, 44px);
}
body.sans-read{ --f-read: var(--f-sans); }
::selection{ background:oklch(0.42 0.08 210); color:#fff; }
button{ font-family:inherit; }
img{ max-width:100%; }

/* ───── Ikonografie: Linienfamilie durchg. 1.9/24, runde Kappen, currentColor; einzige Ausnahme: das gefüllte play (Solid-Primäraktion) ───── */
.ic{ width:1em; height:1em; flex:none; vertical-align:-.12em; }
.btn .ic{ font-size:.8em; }
.chrome .back .ic{ font-size:.9em; margin-left:-.25em; }
#off .off-hint .ic{ font-size:1.2em; }
.co-cue .ic{ font-size:1.25em; }
.cmp .handle .ic{ font-size:1.1em; }
h3 .ic{ font-size:.6em; vertical-align:.02em; color:oklch(0.72 0.09 var(--th, 210)); margin:0 .14em; }
.tag-t .ic{ font-size:1.5em; vertical-align:-.32em; margin:0 .14em; }
.e-num .ic, .tc-num .ic{ display:block; width:.52em; height:.52em; margin-top:.4em; }
.reflect .saved .ic{ font-size:1.6em; }
details.sources summary .ic{ font-size:1.7em; color:var(--faint); transition:transform .35s ease; }
details.sources[open] summary .ic{ transform:rotate(45deg); }

/* ───── Der Tablet-Körper ───── */
.device{
  position:relative; width:100%; height:100%;
  --rimw: clamp(3px, .55vmin, 6px);   /* Aluminium-Rand */
  --bezw: clamp(12px, 2.1vmin, 24px); /* Glas-Blende */
  --rad: clamp(26px, 4vmin, 50px);
  --thick: clamp(7px, 1.15vmin, 15px); /* sichtbare Gehäusedicke — die Seitenwand des Slabs */
  --srad: max(10px, calc(var(--rad) - var(--rimw) - var(--bezw))); /* konzentrischer Display-Radius */
}
.dev-rim{
  position:absolute; inset:0; border-radius:var(--rad);
  /* Eloxiertes Aluminium: umlaufendes Kantenlicht (conic) + diagonaler Schliff
     — bewusst achromatisch mit kaltem Hauch, damit nichts warm/golden kippt */
  background:
    linear-gradient(160deg, oklch(0.98 0.005 235 / .05), transparent 28%, transparent 72%, oklch(0.98 0.005 235 / .035)),
    conic-gradient(from 140deg at 50% 50%,
      oklch(0.46 0.004 235) 0%, oklch(0.24 0.003 235) 11%, oklch(0.39 0.004 235) 26%,
      oklch(0.19 0.003 235) 41%, oklch(0.43 0.004 235) 55%, oklch(0.22 0.003 235) 68%,
      oklch(0.49 0.005 235) 82%, oklch(0.27 0.003 235) 92%, oklch(0.46 0.004 235) 100%);
  box-shadow:
    /* ── Gehäusedicke: extrudierte Aluminium-Seitenwand, leicht von oben gesehen ── */
    0 calc(var(--thick) * .10) 0 oklch(0.64 0.005 235),  /* obere Schliffkante der Seite — fängt Raumlicht */
    0 calc(var(--thick) * .26) 0 oklch(0.43 0.004 235),
    0 calc(var(--thick) * .46) 0 oklch(0.29 0.003 235),
    0 calc(var(--thick) * .66) 0 oklch(0.19 0.003 235),  /* Seite krümmt sich weg, wird dunkler */
    0 calc(var(--thick) * .85) 0 oklch(0.12 0.003 235),
    0 var(--thick) 0 oklch(0.075 0.003 235),
    /* ── Schatten in die Bettdecke: straffer Kontakt + breite Umgebung ── */
    0 calc(var(--thick) + 110px) 190px -58px oklch(0 0 0 / .82),
    0 calc(var(--thick) + 50px) 92px -34px oklch(0 0 0 / .64),
    0 calc(var(--thick) + 16px) 34px -12px oklch(0 0 0 / .6),
    0 calc(var(--thick) + 7px) 15px -5px oklch(0 0 0 / .85),  /* straffer Kontaktschatten am Fuß */
    0 0 0 0.5px oklch(0 0 0 / .55),
    inset 0 1px 1px oklch(0.95 0.008 235 / .25),
    inset 0 -1px 1px oklch(0 0 0 / .7);
}
.dev-rim::before{ /* Doppelte Fase: heller Schliff außen, dunkle Fuge innen */
  content:""; position:absolute; inset:calc(var(--rimw) * .42);
  border-radius:calc(var(--rad) - var(--rimw) * .42); pointer-events:none;
  box-shadow:
    inset 0 0 0 0.5px oklch(0.68 0.005 235 / .45),
    inset 0 0 0 1px oklch(0.06 0.002 235 / .55);
}
.dev-rim::after{ /* Glanzpunkte, wo das Raumlicht die Kante trifft — kühles Licht, ohne Blend-Modus */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(140px 16px at 17% 0%, oklch(0.93 0.01 235 / .12), transparent 70%),
    radial-gradient(90px 12px at 96% 22%, oklch(0.93 0.01 235 / .07), transparent 70%),
    radial-gradient(120px 14px at 80% 100%, oklch(0.93 0.01 235 / .055), transparent 70%);
}
.dev-bezel{
  position:absolute; inset:var(--rimw); border-radius:calc(var(--rad) - var(--rimw));
  background:
    linear-gradient(118deg, oklch(0.135 0.004 250) 0%, oklch(0.085 0.003 250) 30%, oklch(0.065 0.003 250) 65%, oklch(0.115 0.004 250) 100%);
  box-shadow:
    inset 0 0 0 1px oklch(0.32 0.008 240 / .4),          /* Glaskante am Metall */
    inset 0 1.5px 1px -1px oklch(0.8 0.01 240 / .2),     /* Lichtbrechung oben im Glas */
    inset 0 2px 10px oklch(0 0 0 / .85);
}
.dev-bezel::after{ /* Streulicht des eingeschalteten Displays auf der Blende */
  content:""; position:absolute; inset:var(--bezw); border-radius:var(--srad);
  box-shadow:0 0 calc(var(--bezw) * .9) oklch(0.75 0.05 220 / .15);
  opacity:0; transition:opacity 1.4s ease; pointer-events:none;
}
body.lit .dev-bezel::after{ opacity:1; }
.dev-cam{
  position:absolute; left:50%; top:calc(var(--rimw) + var(--bezw) / 2);
  transform:translate(-50%,-50%); z-index:3;
  width:clamp(7px, 1.05vmin, 10px); aspect-ratio:1; border-radius:50%;
  /* Saphirlinse: violette Iris, dunkler Tubus, Fassungsring — dezent, wie echt */
  background:radial-gradient(circle at 50% 50%,
    oklch(0.34 0.1 264) 0%, oklch(0.18 0.07 258) 34%, oklch(0.07 0.015 252) 58%, oklch(0.045 0.005 250) 100%);
  box-shadow:
    0 0 0 1px oklch(0.03 0 0),
    0 0 0 1.75px oklch(0.3 0.006 250 / .8),
    0 0 0 2.5px oklch(0.08 0.004 250),
    0 0 8px oklch(0.55 0.08 250 / .14),
    inset 0 -1px 1.5px oklch(0.5 0.1 255 / .3),
    inset 0 1px 1px oklch(0 0 0 / .6);
}
.dev-cam::after{ /* Glanzpunkt auf der Linse */
  content:""; position:absolute; left:24%; top:20%;
  width:26%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, oklch(0.92 0.02 240 / .8), transparent 70%);
}
.dev-sensor{ /* Umgebungslichtsensor neben der Kamera — kaum sichtbar, wie echt */
  position:absolute; left:calc(50% + clamp(16px, 2.6vmin, 28px)); top:calc(var(--rimw) + var(--bezw) / 2);
  transform:translate(-50%,-50%); z-index:3;
  width:clamp(3px, .42vmin, 4.5px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, oklch(0.2 0.02 250), oklch(0.05 0.005 250) 70%);
  box-shadow:0 0 0 1px oklch(0.11 0.004 250 / .9), inset 0 0 1px oklch(1 0 0 / .2);
}
.dev-mic{ /* Mikrofon-Pinhole, gegenüber dem Sensor — winziges, tiefes Loch */
  position:absolute; left:calc(50% - clamp(13px, 2.1vmin, 22px)); top:calc(var(--rimw) + var(--bezw) / 2);
  transform:translate(-50%,-50%); z-index:3;
  width:clamp(2px, .3vmin, 3px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 45% 38%, oklch(0.15 0.008 250), oklch(0.02 0.003 250) 76%);
  box-shadow:0 0 0 .5px oklch(0.1 0.004 250 / .85), inset 0 .5px .5px oklch(0 0 0 / .9), inset 0 -.5px .5px oklch(0.7 0.01 250 / .12);
}
.dev-btn{
  position:absolute; top:calc(-1 * clamp(2px, .35vmin, 3.5px));
  height:clamp(3.5px, .55vmin, 5.5px); border-radius:2.5px 2.5px 0 0;
  background:linear-gradient(180deg, oklch(0.58 0.004 235), oklch(0.34 0.003 235) 55%, oklch(0.21 0.003 235));
  box-shadow:
    inset 0 1px 0.5px oklch(0.95 0.008 235 / .4),
    inset 1px 0 0.5px oklch(0.95 0.008 235 / .12),
    inset -1px 0 0.5px oklch(0 0 0 / .4),
    0 0 0 0.5px oklch(0 0 0 / .35);
  transition:transform .12s ease, filter .12s ease;
}
.dev-btn.power{ right:6%; width:clamp(42px, 6vmin, 72px); border:none; cursor:pointer; padding:0; }
.dev-btn.power::after{ content:""; position:absolute; inset:-16px; }
.dev-btn.power:hover{ filter:brightness(1.45); }
.dev-btn.power:active{ transform:translateY(1px); filter:brightness(.8); }
.dev-btn.power:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; }
.dev-btn.vol-up{ right:calc(6% + clamp(56px, 8vmin, 96px)); width:clamp(26px, 4vmin, 46px); }
.dev-btn.vol-down{ right:calc(6% + clamp(92px, 13vmin, 154px)); width:clamp(26px, 4vmin, 46px); }
.dev-screen{
  position:absolute; inset:calc(var(--rimw) + var(--bezw));
  border-radius:var(--srad);
  overflow:hidden; background:var(--black);
  box-shadow:
    0 0 0 1px oklch(0.40 0.014 235 / .55),        /* polierte Glaskante am Bezel */
    0 1px 0 oklch(0.85 0.012 230 / .10),          /* Lichtbrechung an der Glaskante */
    inset 0 0 0 1px oklch(0 0 0 / .55),           /* schwarze Maske unter dem Deckglas */
    inset 0 2px 5px oklch(0 0 0 / .6),            /* Glasschatten oben: Pixel liegen tiefer als das Glas */
    inset 0 1px 0 oklch(0.85 0.01 230 / .08),     /* Glanzsaum am oberen Glasrand */
    inset 0 0 46px oklch(0 0 0 / .58);            /* Tiefen-Vignette des Displays */
}
/* Ausgeschaltetes Glas spiegelt den Raum stärker */
body:not(.lit) .glare{ opacity:calc(var(--glare, .55) * 1.3); }
/* Rahmen ausblendbar (Tweak) */
body.no-frame{ padding:0; }
body.no-frame .device{ --rimw:0px; --bezw:0px; --rad:0px; }
body.no-frame .dev-rim{ background:none; box-shadow:none; }
body.no-frame .dev-rim::before{ display:none; }
body.no-frame .dev-bezel{ background:none; box-shadow:none; }
body.no-frame .dev-screen{ border-radius:0; box-shadow:none; }
body.no-frame .dev-cam, body.no-frame .dev-btn, body.no-frame .dev-sensor, body.no-frame .dev-mic{ display:none; }
body.no-frame .dev-rim::after, body.no-frame .dev-bezel::after{ display:none; }

/* ───── Bühne: heimlich im Bett — Bettdecke & Kissen, nur vom Display beleuchtet ───── */
.stage-bed{
  position:fixed; inset:0; width:100%; height:100%; pointer-events:none; display:block;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 24%) center / 100% 100% no-repeat,
    url("antho/stage-bed.jpg?v=3") center 64% / cover no-repeat,
    #000;
  opacity:calc(var(--bed, 1) * .35); transition:opacity 1.6s ease;
  -webkit-mask:radial-gradient(150% 130% at 50% 54%, #000 40%, oklch(0 0 0 / .5) 74%, transparent 100%);
          mask:radial-gradient(150% 130% at 50% 54%, #000 40%, oklch(0 0 0 / .5) 74%, transparent 100%);
}
body.lit .stage-bed{ opacity:var(--bed, 1); }
body.no-frame .stage-bed{ display:none; }
body.no-bed .stage-bed{ display:none; }

/* ───── Screen-Spill: das eingeschaltete Display wirft kühles Licht auf die Bühne ───── */
.stage-glow{
  position:absolute; inset:0; border-radius:var(--rad);
  pointer-events:none; opacity:0; transition:opacity 1.4s ease;
  box-shadow:
    0 0 58px 2px oklch(0.72 0.06 220 / .2),     /* enger Saum auf dem Stoff direkt am Glas */
    0 0 132px 28px oklch(0.64 0.052 224 / .13), /* weiches Licht über die Falten */
    0 40px 160px 34px oklch(0.52 0.046 230 / .12); /* Licht sammelt sich in der Mulde der Decke */
}
body.lit .stage-glow{ opacity:var(--spill, 1); }
body.no-frame .stage-glow{ display:none; }

/* ───── Glas-Spiegelung auf dem Display ───── */
.glare{
  position:absolute; inset:-12%; z-index:88; pointer-events:none;
  opacity:var(--glare, .55);
  mix-blend-mode:screen;
  background:
    /* feine Staubpartikel, die das Raumlicht fangen — nur ein paar, wie echt */
    radial-gradient(1.6px 1.6px at 31% 22%, oklch(0.92 0.01 230 / .4), transparent 62%),
    radial-gradient(1.3px 1.3px at 64% 73%, oklch(0.9 0.01 230 / .32), transparent 62%),
    radial-gradient(1.1px 1.1px at 47% 41%, oklch(0.9 0.01 230 / .26), transparent 62%),
    /* dichroitischer Schimmer der Antireflex-Beschichtung am Glanzstreifen (magenta→türkis) */
    linear-gradient(115deg, transparent 43%, oklch(0.6 0.14 305 / .05) 45.5%, transparent 48.5%, oklch(0.68 0.12 185 / .045) 52.5%, transparent 55.5%),
    linear-gradient(115deg, transparent 26%, oklch(0.85 0.012 230 / .13) 38%, oklch(0.92 0.012 230 / .2) 45%, oklch(0.85 0.012 230 / .09) 51%, transparent 61%),
    linear-gradient(115deg, transparent 63%, oklch(0.85 0.012 230 / .1) 70%, transparent 77%),
    radial-gradient(46% 32% at 76% 4%, oklch(0.9 0.012 230 / .13), transparent 70%),
    radial-gradient(30% 22% at 12% 90%, oklch(0.85 0.015 235 / .07), transparent 75%);
  transition:transform .3s cubic-bezier(.2,.6,.3,1);
  will-change:transform;
}

/* ───── Das Glas (Glanz über dem Screen) ───── */
.bezel{
  position:absolute; inset:0; pointer-events:none; z-index:90; border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px oklch(0.32 0.015 230 / .5),
    inset 0 0 60px oklch(0 0 0 / .55);
}
.bezel::before{ /* Glanzschräge über dem ganzen Glas */
  content:""; position:absolute; inset:0;
  background:linear-gradient(118deg, oklch(0.95 0.01 230 / .045) 0%, transparent 22%, transparent 78%, oklch(0.95 0.01 230 / .025) 100%);
}

/* ───── Oleophobe Fettschlieren: Spuren tippender, wischender Finger ───── */
.smudge{
  position:absolute; inset:0; z-index:89; pointer-events:none; border-radius:inherit;
  opacity:0; transition:opacity 1.8s ease;
  mix-blend-mode:soft-light;
  background:
    /* breiter Handballen-/Daumen-Rest unten Mitte */
    radial-gradient(40% 26% at 53% 71%, oklch(0.86 0.008 230 / .15), transparent 72%),
    /* zwei Tipp-Flecken */
    radial-gradient(15% 19% at 38% 57%, oklch(0.84 0.008 235 / .11), transparent 74%),
    radial-gradient(13% 16% at 66% 45%, oklch(0.85 0.008 230 / .1), transparent 73%),
    /* horizontaler Wisch beim Scrollen */
    radial-gradient(34% 6% at 49% 50%, oklch(0.84 0.008 232 / .085), transparent 78%),
    /* diagonaler Wisch quer übers Glas */
    linear-gradient(26deg, transparent 40%, oklch(0.85 0.008 230 / .05) 49%, transparent 58%),
    /* leichter Schleier am unteren Rand */
    radial-gradient(60% 12% at 50% 88%, oklch(0.83 0.008 232 / .07), transparent 80%);
}
body.lit .smudge{ opacity:1; }
body.no-smudge .smudge{ display:none; }
body.no-frame .smudge{ display:none; }

/* ───── Screens ───── */
.screen{ position:absolute; inset:0; display:none; background:var(--black); }
.screen.on{ display:block; }

/* ───── AUS-Zustand: das tote Glas ───── */
#off{ background:#000; cursor:default; }
#off .off-hint{
  position:absolute; top:1.15rem; right:5%; display:flex; align-items:flex-start; gap:.6em;
  text-align:right; color:oklch(0.5 0.012 235);
  animation:offpulse 3.4s ease-in-out infinite;
}
#off .off-hint .oh-arr{ font-size:1.05rem; line-height:1; padding-top:.05em; color:oklch(0.62 0.07 220); }
#off .off-hint .oh-txt{ display:flex; flex-direction:column; gap:.35em; }
#off .off-hint b{
  font-family:var(--f-mono); font-weight:500; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:oklch(0.78 0.05 220);
}
#off .off-hint em{
  font-family:var(--f-mono); font-style:normal; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:oklch(0.46 0.01 240);
}
@keyframes offpulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
#off.nudge .off-hint{ animation:nudge .55s ease; }
#off.nudge .off-hint b{ color:oklch(0.85 0.07 220); }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-7px); } 55%{ transform:translateX(5px); } 80%{ transform:translateX(-3px); } }
@media (prefers-reduced-motion: reduce){ #off .off-hint{ animation:none; } }

/* Die Power-Taste am Rahmen atmet, solange das Glas tot ist — sie zieht den Blick. */
body:not(.lit) .dev-btn.power::after{
  background:radial-gradient(ellipse at 50% 0%, oklch(0.7 0.09 220 / .85) 0%, transparent 62%);
  border-radius:6px; opacity:0; animation:powerglow 3s ease-in-out infinite;
}
@keyframes powerglow{ 0%,100%{ opacity:0; } 50%{ opacity:.55; } }
body:not(.lit) .dev-btn.power{ animation:powernub 3s ease-in-out infinite; }
@keyframes powernub{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.6); } }
@media (prefers-reduced-motion: reduce){
  body:not(.lit) .dev-btn.power::after{ animation:none; opacity:.4; }
  body:not(.lit) .dev-btn.power{ animation:none; filter:brightness(1.4); }
}

/* ───── Boot-Sequenz ───── */
#boot{ background:#000; }
#boot .boot-in{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  opacity:0;
}
#boot.run .boot-in{ animation:bootin 2.3s ease forwards; }
@keyframes bootin{ 0%{ opacity:0; filter:brightness(.3); } 28%{ opacity:1; filter:brightness(1.25); } 45%{ filter:brightness(1); } 100%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ #boot.run .boot-in{ animation:none; opacity:1; } }
#boot .boot-mark{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.6em; text-transform:uppercase;
  color:oklch(0.78 0.02 230); padding-left:.6em;
  text-shadow:0 0 30px oklch(0.6 0.07 215 / .6);
}
#boot .boot-refl{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.6em; text-transform:uppercase;
  color:oklch(0.4 0.02 230); padding-left:.6em; transform:scaleY(-1); margin-top:-1rem;
  -webkit-mask-image:linear-gradient(0deg, transparent 30%, #000); mask-image:linear-gradient(0deg, transparent 30%, #000);
}
#boot .boot-bar{
  width:min(220px, 42%); height:2px; border-radius:2px; overflow:hidden;
  background:oklch(0.24 0.01 240);
}
#boot .boot-bar i{ display:block; height:100%; width:0%; background:var(--accent); box-shadow:0 0 12px var(--accent); transition:width .2s ease-out; }
#boot .boot-stat{
  display:flex; align-items:baseline; gap:.35em; margin-top:-.4rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  color:oklch(0.58 0.02 230);
}
#boot .boot-stat b{ font-weight:500; font-variant-numeric:tabular-nums; color:oklch(0.82 0.03 215); min-width:1.6em; text-align:right; }
#boot .boot-stat span{ color:oklch(0.5 0.02 230); margin-right:.5em; }
#boot .boot-stat em{ font-style:normal; text-transform:uppercase; letter-spacing:.28em; font-size:.92em; color:oklch(0.5 0.015 235); }
#boot .boot-stat em.done{ color:oklch(0.78 0.08 150); }

/* ───── HOME: Mediathek ───── */
#home{ overflow-y:auto; overscroll-behavior:contain; }
.status{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3.2rem);
  background:linear-gradient(180deg, oklch(0.1 0.004 250 / .92), transparent);
  pointer-events:none;
}
.status .mark{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.5em; text-transform:uppercase; color:var(--mut); padding-left:.5em; }
.status .mark em{ font-style:normal; color:var(--faint); }
.status .clock{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--faint); font-variant-numeric:tabular-nums; }

/* Billboard */
.billboard .bb-art{
  position:absolute; top:0; left:0; z-index:0; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 99%);
  mask-image:linear-gradient(180deg, #000 50%, transparent 99%);
}
.billboard{
  position:relative; min-height:max(560px, 74vh); overflow:hidden; display:flex; align-items:flex-end;
  padding:0 clamp(1.2rem,4vw,3.2rem) clamp(2rem,6vh,4rem);
  margin-top:-3.4rem;
  background:
    radial-gradient(1100px 600px at 78% 10%, oklch(0.36 0.07 210 / .5), transparent 65%),
    radial-gradient(900px 500px at 30% 100%, oklch(0.24 0.05 275 / .4), transparent 70%),
    linear-gradient(180deg, oklch(0.14 0.012 240), var(--black) 90%);
}
.billboard::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 16%, oklch(0.06 0.012 250 / .34) 42%, oklch(0.05 0.01 250 / .82) 78%, var(--black) 100%),
    radial-gradient(140% 100% at 14% 116%, oklch(0.04 0.008 250 / .8), transparent 60%); }
.bb-in{ position:relative; z-index:2; max-width:880px; display:flex; flex-direction:column; gap:1.2rem; }
.bb-kick{ display:inline-flex; align-items:center; gap:.95em; font-family:var(--f-mono); font-weight:500; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink); text-shadow:0 1px 12px oklch(0.04 0.01 250 / .85); }
.bb-kick::before{ content:""; width:28px; height:1px; flex:none; background:linear-gradient(90deg, var(--accent), oklch(0.78 0.1 200 / 0)); }
.bb-title{ position:relative; margin-top:-.35rem; margin-left:-.03em; }
.bb-title h1{
  font-weight:840; font-stretch:118%; letter-spacing:-.02em; line-height:.92; text-transform:uppercase;
  font-size:clamp(2.5rem, 1.55rem + 5.4vw, 5.8rem);
  text-shadow:0 2px 24px oklch(0.04 0.01 250 / .85), 0 0 64px oklch(0.55 0.08 210 / .24);
}
.bb-title .refl{
  display:block; transform:scaleY(-1); opacity:.13; pointer-events:none; user-select:none;
  font-weight:840; font-stretch:118%; letter-spacing:-.02em; line-height:.92; text-transform:uppercase;
  font-size:clamp(2.5rem, 1.55rem + 5.4vw, 5.8rem); color:var(--accent);
  -webkit-mask-image:linear-gradient(0deg, transparent 45%, #000 98%); mask-image:linear-gradient(0deg, transparent 45%, #000 98%);
  margin-top:.04em;
}
.bb-sub{ font-family:var(--f-read); font-style:italic; font-size:clamp(1.05rem, .98rem + .5vw, 1.42rem); line-height:1.32; color:var(--mut); letter-spacing:.01em; max-width:40ch; text-wrap:pretty; text-shadow:0 1px 14px oklch(0.04 0.01 250 / .85); margin-top:-.4rem; }
.bb-meta{ display:flex; align-items:center; gap:.85em; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); flex-wrap:wrap; font-variant-numeric:tabular-nums; text-shadow:0 1px 12px oklch(0.04 0.01 250 / .8); }
.bb-meta span{ display:inline-flex; align-items:center; gap:.85em; }
.bb-meta span:not(:first-child)::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--faint); flex:none; }
.bb-fsk{ padding:.36em .72em; border:1px solid oklch(0.7 0.02 240 / .34); border-radius:4px; color:var(--ink); letter-spacing:.13em; font-size:.58rem; }
.bb-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:-.25rem; }
.bb-tags span{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); padding:.46em .9em; border:1px solid oklch(0.72 0.02 240 / .26); border-radius:999px; background:oklch(0.95 0.01 240 / .06); backdrop-filter:blur(6px); }
.bb-syn{ font-family:var(--f-read); font-size:clamp(1.02rem, .97rem + .4vw, 1.22rem); line-height:1.64; color:var(--mut); max-width:54ch; font-variant-numeric:oldstyle-nums; text-wrap:pretty; text-shadow:0 1px 16px oklch(0.04 0.01 250 / .8); }
.bb-actions{ display:flex; gap:.8rem; margin-top:.4rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.7em; border:none; cursor:pointer; border-radius:12px;
  font-weight:700; font-size:1rem; padding:.9em 1.6em; transition:transform .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn.play{ background:var(--ink); color:oklch(0.14 0.006 250); }
.btn.ghost{ background:oklch(0.95 0.01 240 / .12); color:var(--ink); backdrop-filter:blur(8px); }
/* Hero-CTAs: etwas straffer, Premium-Streaming */
.bb-actions .btn{ border-radius:8px; font-weight:650; padding:.95em 1.75em; letter-spacing:.005em; }
.bb-actions .btn.play{ box-shadow:0 10px 34px -12px oklch(0 0 0 / .7); }
.bb-actions .btn.play:hover{ background:#fff; }
.bb-actions .btn.ghost{ border:1px solid oklch(0.9 0.01 240 / .18); }

/* Billboard — Variante: Diptychon (gerichtetes Scrim, tiefere Ausblendung) */
/* Tieferer Bildschnitt: Buch + leuchtendes Tablet bleiben sichtbar */
body[data-bb="diptychon"] .billboard{ min-height:max(600px, 80vh); }
body[data-bb="diptychon"] .bb-art{
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
}
/* Scrim: nur unten + untere linke Ecke abdunkeln (für den Titel) — die Familie oben links bleibt im Licht */
body[data-bb="diptychon"] .billboard::after{
  background:
    linear-gradient(180deg, transparent 32%, oklch(0.05 0.012 250 / .42) 58%, oklch(0.05 0.01 250 / .85) 82%, var(--black) 100%),
    radial-gradient(125% 96% at 12% 120%, oklch(0.04 0.008 250 / .82), transparent 56%);
}
body[data-bb="diptychon"] .bb-sub,
body[data-bb="diptychon"] .bb-syn{ max-width:48ch; }

/* Billboard — Variante: Im Spalt (Netflix-Hero, links verankert; gerichtetes Scrim) */
/* Text links auf dunklem Bett, der leuchtende Junge rechts bleibt das Key-Subjekt. */
body[data-bb="im spalt"] .billboard{
  min-height:max(600px, 82vh);
}
body[data-bb="im spalt"] .bb-art{
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
}
/* Gerichtetes Scrim: links dunkel (Textbett) → rechts klar (Junge im Licht) + Boden */
body[data-bb="im spalt"] .billboard::after{
  background:
    linear-gradient(96deg, oklch(0.05 0.012 250 / .9) 0%, oklch(0.05 0.011 250 / .62) 26%, oklch(0.05 0.01 250 / .2) 48%, transparent 62%),
    linear-gradient(180deg, transparent 34%, oklch(0.05 0.01 250 / .5) 72%, var(--black) 100%);
}
body[data-bb="im spalt"] .bb-in{ max-width:600px; }
body[data-bb="im spalt"] .bb-sub,
body[data-bb="im spalt"] .bb-syn{ max-width:46ch; }

/* Reihen */
.rows{ padding:0 clamp(1.2rem,4vw,3.2rem) 5rem; display:flex; flex-direction:column; gap:2.6rem; position:relative; z-index:2; }
.row .r-head{ display:flex; align-items:baseline; gap:1em; margin-bottom:1rem; }
.row .r-t{ font-weight:740; font-stretch:106%; font-size:1.12rem; letter-spacing:-.008em; }
.row .r-n{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.r-scroll{
  display:flex; gap:1rem; overflow-x:auto; padding:6px 6px 14px; margin:-6px -6px 0;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.r-scroll::-webkit-scrollbar{ height:8px; }
.r-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

/* Episodenkarte */
.epcard{
  position:relative; flex:0 0 min(420px, 78vw); aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:none; cursor:pointer; text-align:left; color:var(--ink); padding:0; scroll-snap-align:start;
  background:
    radial-gradient(420px 260px at 82% -10%, oklch(0.42 0.08 var(--th) / .8), transparent 70%),
    linear-gradient(165deg, oklch(0.24 0.04 var(--th)), oklch(0.13 0.018 var(--th)) 80%);
  box-shadow:inset 0 0 0 1px oklch(0.5 0.05 var(--th) / .35), 0 18px 40px -20px oklch(0 0 0 / .9);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.epcard .e-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.epcard:hover{ transform:scale(1.03);
  box-shadow:inset 0 0 0 1px oklch(0.68 0.07 var(--th) / .6), 0 26px 56px -22px oklch(0 0 0 / .95), 0 0 50px oklch(0.45 0.08 var(--th) / .25); }
.epcard::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, oklch(0.95 0.01 230 / .08), transparent 35%); }
.epcard .e-num{
  position:absolute; right:6px; top:-32px; font-weight:850; font-stretch:125%; font-size:128px; line-height:1; letter-spacing:-.05em;
  color:oklch(0.95 0.03 var(--th) / .14); pointer-events:none;
}
.epcard .e-ph{
  position:absolute; left:20px; right:110px; top:18px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.06em; line-height:1.8; color:oklch(0.9 0.03 var(--th) / .65);
}
.epcard .e-ph b{ display:block; letter-spacing:.22em; text-transform:uppercase; color:oklch(0.93 0.05 var(--th)); font-weight:500; margin-bottom:.3em; }
.epcard .e-foot{
  position:absolute; left:0; right:0; bottom:0; padding:42px 20px 16px;
  background:linear-gradient(180deg, transparent, oklch(0.08 0.006 250 / .95) 60%);
}
.epcard .e-tag{ display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:oklch(0.8 0.07 var(--th)); }
.epcard .e-t{ display:block; font-weight:830; font-stretch:114%; font-size:1.42rem; letter-spacing:-.006em; line-height:1.05; margin-top:.3em; text-transform:uppercase; }
.epcard .e-scenes{ display:block; font-family:var(--f-read); font-style:italic; font-size:.8rem; color:var(--mut); margin-top:.45em; line-height:1.5; text-wrap:pretty; }
.epcard .e-pb{ position:absolute; left:0; right:0; bottom:0; height:4px; background:oklch(0.3 0.01 240 / .6); }
.epcard .e-pb i{ display:block; height:100%; width:0%; background:oklch(0.72 0.09 var(--th)); }
.epcard.small{ flex-basis:min(320px, 64vw); }
.epcard.small .e-t{ font-size:1.2rem; }
.epcard.small .e-num{ font-size:96px; top:-22px; }

/* Home-Fußzeile */
.home-foot{
  padding:0 clamp(1.2rem,4vw,3.2rem) 6rem; position:relative; z-index:2;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; line-height:2.2; color:var(--faint); text-transform:uppercase;
}

/* ───── Cold Open (vor dem Titel) ───── */
.coldopen{
  position:relative; min-height:78vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem; padding:4rem clamp(1.2rem,5vw,4rem); text-align:center; background:#000;
}
.coldopen .co-time{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.5em; text-transform:uppercase;
  color:oklch(0.72 0.08 var(--th)); padding-left:.5em;
}
.coldopen .co-text{
  max-width:46ch; font-family:var(--f-read); font-size:clamp(1.1rem, 1rem + .7vw, 1.42rem); line-height:1.85; font-weight:400;
  color:oklch(0.8 0.008 245); font-variant-numeric:oldstyle-nums; text-wrap:pretty;
}
/* Cinematischer Lead-in: die erste Zeile jedes Cold-Opens in gespationierten Kapitälchen */
.coldopen .co-text::first-line{
  font-variant-caps:small-caps; font-variant-numeric:lining-nums;
  letter-spacing:.07em; font-weight:470;
  color:oklch(0.91 0.012 230);
}
.coldopen .co-refrain{
  display:block; margin-top:1.3em; font-weight:640; color:var(--ink); letter-spacing:0;
  font-size:1.06em;
}
/* Wahlmoment im Cold Open — Setup (E1) & Payoff (E6) */
.co-choice{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.8rem 1rem; }
.co-choice .cho{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mut); background:none; border:1px solid var(--line); border-radius:99px;
  padding:.9em 1.7em; cursor:pointer; transition:all .25s ease;
}
.co-choice .cho:hover{ color:var(--ink); border-color:oklch(0.6 0.06 var(--th,215)); }
.co-choice .cho.gone{ opacity:0; pointer-events:none; transition:opacity .8s ease; }
.co-choice .cho-out{
  width:100%; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:oklch(0.74 0.08 var(--th,215)); opacity:0; transition:opacity 1.2s ease .4s;
}
.co-choice .cho-out.show{ opacity:1; }
/* E6 · die Lampe geht an */
.coldopen.lamp{ background:radial-gradient(62% 54% at 50% 62%, oklch(0.21 0.035 60 / .95), #000 72%); transition:background 1.6s ease; }
.coldopen.lamp .co-refrain{ color:oklch(0.9 0.06 70); transition:color 1.6s ease; }
.coldopen .co-cue{
  position:absolute; bottom:3.2vh; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--faint);
}

/* ───── Zwischenspiel: Der vierte Blick ───── */
.mirrormoment{
  margin:1.4rem 0 0; border-radius:18px; padding:clamp(2.6rem,7vh,4.5rem) clamp(1.4rem,4vw,3rem);
  background:#000; text-align:center;
  box-shadow:inset 0 0 0 1px oklch(0.26 0.014 235 / .7), inset 0 0 70px oklch(0 0 0);
}
.mirrormoment .mm-k{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.36em; text-transform:uppercase;
  color:oklch(0.55 0.05 var(--th)); margin-bottom:1.6em;
}
.mirrormoment p{ max-width:42ch; margin:0 auto; font-family:var(--f-read); font-size:1.06rem; line-height:1.9; color:oklch(0.7 0.008 245); text-wrap:pretty; }
.mirrormoment .mm-q{ margin-top:1.4em; font-weight:650; color:var(--ink); font-size:1.15rem; text-wrap:balance; }

/* ───── Tagline am Episodenende ───── */
.tagline{
  text-align:center; margin:3rem 0 0; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
  line-height:2.1; text-transform:uppercase; color:oklch(0.6 0.05 var(--th));
}

/* ───── Szene nach dem Abspann ───── */
.postcredits{
  margin:3.5rem 0 2rem; padding:clamp(2.4rem,6vh,4rem) clamp(1.4rem,4vw,3rem); border-radius:18px;
  background:radial-gradient(80% 100% at 50% 0%, oklch(0.2 0.03 65 / .55), transparent 75%), #000;
  box-shadow:inset 0 0 0 1px oklch(0.32 0.04 65 / .5);
  text-align:center;
}
.postcredits .pc-k{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.36em; text-transform:uppercase;
  color:oklch(0.72 0.09 70); margin-bottom:1.8em;
}
.postcredits p{ max-width:44ch; margin:0 auto; font-family:var(--f-read); font-size:1.09rem; line-height:1.9; color:oklch(0.8 0.015 80); text-wrap:pretty; }
.postcredits .pc-fin{ margin-top:1.5em; font-weight:650; color:oklch(0.93 0.03 80); }

/* ───── Reader-Chrome ───── */
.chrome{
  position:absolute; top:0; left:0; right:0; z-index:50; display:none; align-items:center; gap:1rem;
  padding:.8rem clamp(1rem,3vw,2rem) .9rem;
  background:linear-gradient(180deg, oklch(0.1 0.004 250 / .94), oklch(0.1 0.004 250 / .65) 70%, transparent);
}
.chrome.on{ display:flex; }
.chrome .back{
  border:none; cursor:pointer; color:var(--ink); background:oklch(0.95 0.01 240 / .1); backdrop-filter:blur(8px);
  border-radius:99px; padding:.6em 1.2em; font-weight:600; font-size:.86rem; display:inline-flex; gap:.6em; align-items:center;
}
.chrome .back:hover{ background:oklch(0.95 0.01 240 / .18); }
.chrome .c-label{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mut); }
.chrome .c-clock{ margin-left:auto; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; color:oklch(0.72 0.07 var(--cth, 200)); font-variant-numeric:tabular-nums; }
/* Sprachregister-Hinweis im Reader: dezent, aber dauerhaft sichtbar und antippbar */
.chrome .c-reg{
  margin-left:1.1rem; display:inline-flex; align-items:center; gap:.55em; cursor:pointer; border:none;
  background:oklch(0.95 0.01 240 / .08); backdrop-filter:blur(8px);
  border-radius:99px; padding:.5em .9em;
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mut); transition:background .18s ease, color .18s ease;
}
.chrome .c-reg:hover{ background:oklch(0.95 0.01 240 / .17); color:var(--ink); }
.chrome .c-reg:active{ transform:translateY(.5px); }
.chrome .c-reg:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.chrome .c-reg .cr-chev{ font-size:1.05em; opacity:.7; }
.chrome .c-reg .cr-k{ color:var(--faint); }
.chrome .c-reg .cr-val{ color:oklch(0.74 0.07 var(--cth, 200)); }
@media (max-width:540px){ .chrome .c-reg .cr-k{ display:none; } }
.chrome .c-track{ position:absolute; left:0; right:0; bottom:0; height:3px; background:oklch(0.3 0.01 240 / .5); }
.chrome .c-track i{ display:block; height:100%; width:0%; background:var(--accent); box-shadow:0 0 12px var(--accent); }

/* ───── Sprachregister sichtbarer: ruhender „Schein" + einmaliger Puls ─────
   Der Register-Umschalter ist das Herzstück, war aber kaum auffindbar. Chip im
   Reader und die Tasten am Rahmen tragen einen dezenten Schein; bis zur ersten
   Nutzung pulsieren sie sanft (einmalig, in localStorage gemerkt → body.reg-unseen).
   prefers-reduced-motion: nur der ruhende Schein, kein Puls. */
.chrome .c-reg{
  box-shadow:
    0 0 0 1px oklch(0.74 0.09 var(--cth, 200) / .55),
    0 0 16px -3px oklch(0.74 0.1 var(--cth, 200) / .5);
}
.dev-btn.vol-up, .dev-btn.vol-down{
  box-shadow:
    inset 0 1px 0.5px oklch(0.95 0.008 235 / .4),
    inset 1px 0 0.5px oklch(0.95 0.008 235 / .12),
    inset -1px 0 0.5px oklch(0 0 0 / .4),
    0 0 0 0.5px oklch(0 0 0 / .35),
    0 0 7px 0 oklch(0.78 0.1 200 / .5);
}
@keyframes regChipBreathe{
  0%, 100%{ box-shadow: 0 0 0 1px oklch(0.74 0.09 var(--cth,200) / .5), 0 0 14px -3px oklch(0.74 0.1 var(--cth,200) / .45); }
  50%{ box-shadow: 0 0 0 1px oklch(0.84 0.13 var(--cth,200) / .95), 0 0 26px 0 oklch(0.84 0.13 var(--cth,200) / .72); }
}
@keyframes regBtnBreathe{
  0%, 100%{ box-shadow:
    inset 0 1px 0.5px oklch(0.95 0.008 235 / .4), inset 1px 0 0.5px oklch(0.95 0.008 235 / .12),
    inset -1px 0 0.5px oklch(0 0 0 / .4), 0 0 0 0.5px oklch(0 0 0 / .35), 0 0 6px 0 oklch(0.78 0.1 200 / .45); }
  50%{ box-shadow:
    inset 0 1px 0.5px oklch(0.95 0.008 235 / .4), inset 1px 0 0.5px oklch(0.95 0.008 235 / .12),
    inset -1px 0 0.5px oklch(0 0 0 / .4), 0 0 0 0.5px oklch(0 0 0 / .35), 0 0 13px 1px oklch(0.85 0.12 200 / .85); }
}
body.reg-unseen .chrome .c-reg{ animation: regChipBreathe 2.6s ease-in-out infinite; }
body.reg-unseen .dev-btn.vol-up,
body.reg-unseen .dev-btn.vol-down{ animation: regBtnBreathe 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  body.reg-unseen .chrome .c-reg,
  body.reg-unseen .dev-btn.vol-up,
  body.reg-unseen .dev-btn.vol-down{ animation: none; }
}

/* ───── Episoden-Reader ───── */
.reader{ overflow-y:auto; overscroll-behavior:contain; }
.titlecard{
  position:relative; min-height:64vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(1.2rem,5vw,4rem) clamp(2rem,6vh,3.6rem);
  background:
    radial-gradient(1000px 540px at 80% 0%, oklch(0.4 0.08 var(--th) / .6), transparent 68%),
    linear-gradient(180deg, oklch(0.17 0.02 var(--th)), var(--black) 96%);
}
.titlecard .tc-art{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.6;
  -webkit-mask-image:linear-gradient(180deg, #000 35%, transparent 97%);
  mask-image:linear-gradient(180deg, #000 35%, transparent 97%);
  pointer-events:none;
}
.titlecard > :not(.tc-art){ position:relative; z-index:2; }
.titlecard .tc-num{
  position:absolute; right:2vw; top:-4vh; font-weight:850; font-stretch:125%; font-size:clamp(10rem, 26vw, 24rem); line-height:1;
  letter-spacing:-.06em; color:oklch(0.95 0.03 var(--th) / .1); pointer-events:none;
}
.titlecard .tc-kick{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:oklch(0.8 0.08 var(--th)); margin-bottom:1rem; }
.titlecard h1{
  font-weight:840; font-stretch:118%; letter-spacing:-.012em; line-height:.94; text-transform:uppercase;
  font-size:clamp(2.5rem, 1.75rem + 4.8vw, 5.4rem);
  text-wrap:balance;
}
.titlecard .tc-refl{
  display:block; transform:scaleY(-1); opacity:.12; pointer-events:none; user-select:none;
  font-weight:840; font-stretch:118%; letter-spacing:-.012em; line-height:.94; text-transform:uppercase;
  font-size:clamp(2.5rem, 1.75rem + 4.8vw, 5.4rem); color:oklch(0.8 0.09 var(--th));
  -webkit-mask-image:linear-gradient(0deg, transparent 50%, #000); mask-image:linear-gradient(0deg, transparent 50%, #000);
}
.titlecard .tc-meta{ display:flex; gap:1.6em; flex-wrap:wrap; margin-top:1.2rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); }
.titlecard .tc-ph{
  margin-top:1.4rem; max-width:560px; border:1px dashed oklch(0.42 0.04 var(--th)); border-radius:14px; padding:.9rem 1.1rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; line-height:1.9; color:var(--mut);
  background:oklch(0.13 0.01 var(--th) / .5);
}
.titlecard .tc-ph b{ color:oklch(0.85 0.08 var(--th)); letter-spacing:.22em; text-transform:uppercase; }

/* Szenen */
.scenes{ max-width:760px; margin:0 auto; padding:clamp(2.4rem,6vh,4rem) clamp(1.2rem,4vw,2rem) 3rem; }
.scene{ padding:2.2rem 0; }
/* Szenen-Trenner: Glanzkante mit Blendenmarke statt nackter Linie */
.scene + .scene{ position:relative; }
.scene + .scene::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(360px, 70%); height:1px;
  background:linear-gradient(90deg, transparent, oklch(0.42 0.04 var(--th) / .9) 35%, oklch(0.62 0.08 var(--th)) 50%, oklch(0.42 0.04 var(--th) / .9) 65%, transparent);
}
.scene + .scene::after{
  content:""; position:absolute; top:-2.5px; left:50%; margin-left:-2.5px;
  width:5px; height:5px; transform:rotate(45deg);
  background:oklch(0.62 0.08 var(--th));
}
.slug{
  display:flex; align-items:center; gap:1em; margin-bottom:1.3rem;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:oklch(0.72 0.08 var(--th));
}
.slug::before{
  content:""; width:.62em; height:.62em; flex:none; transform:translateY(-18%);
  border-top:1px solid currentColor; border-left:1px solid currentColor; opacity:.85;
}
.slug::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg, oklch(0.32 0.03 var(--th)), transparent); }
.scene h3{ font-weight:790; font-stretch:110%; letter-spacing:-.018em; font-size:clamp(1.45rem, 1.27rem + 1.1vw, 2rem); line-height:1.1; margin-bottom:1rem; text-wrap:balance; }
.scene .s-text{ font-family:var(--f-read); font-size:1.05rem; line-height:1.76; color:oklch(0.86 0.008 245); font-variant-numeric:oldstyle-nums; hanging-punctuation:first last; }
.scene .s-text p{ text-wrap:pretty; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:10 5 4; }
.scene .s-text p + p{ margin-top:1em; }
/* Versalie / Initiale: eröffnet das Werk — nur der erste Erzählabsatz trägt sie */
.scene .s-text p.op::first-letter{
  float:left; font-family:var(--f-serif); font-weight:760;
  font-size:3.5em; line-height:.66; margin:.02em .1em -.04em 0;
  color:oklch(0.93 0.035 var(--th, 230));
  text-shadow:0 2px 20px oklch(0.5 0.08 var(--th, 215) / .28);
}
.scene .s-text p.op::first-line{ font-variant-caps:small-caps; letter-spacing:.012em; color:oklch(0.92 0.008 245); }
.scene .s-text strong{ font-weight:660; color:var(--ink); }
/* Komponenten-Überschriften bleiben in der UI-Stimme (Archivo) */
.s-text h4, .s-text h5, .cmp .ttl, .caps .cv, .tier .th, .fnode .ft, .sinus-desc .sd-t, .reflect .q{ font-family:var(--f-sans); }
.scene .s-text cite{ font-family:var(--f-mono); font-style:normal; font-size:.62rem; letter-spacing:.06em; color:var(--faint); }
/* Pull-Quote als filmischer Zwischentitel */
.pull{
  font-family:var(--f-read); font-style:italic; font-weight:520;
  font-size:clamp(1.3rem, 1.13rem + 1.05vw, 1.68rem); line-height:1.5; letter-spacing:0;
  margin:2.4rem auto; padding:0; border:none; max-width:32ch; text-align:center;
  color:oklch(0.93 0.012 var(--th));
  text-wrap:balance; -webkit-hyphens:none; hyphens:none;
}
.pull::before{
  content:""; display:block; width:2.6em; height:1px; margin:0 auto 1.15em;
  background:linear-gradient(90deg, transparent, oklch(0.62 0.09 var(--th)), transparent);
}
.src{ display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:.8em; font-weight:400; }
.label{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:oklch(0.72 0.08 var(--th)); margin:1.5rem 0 .7rem; }
/* Theorie als „Einblendung“: das Glas rahmt den Begriff — Sucher-Eckmarken statt Karte */
.theory{
  position:relative; margin:1.5rem 0; border-radius:0; padding:1.25rem 1.4rem 1.35rem;
  background:linear-gradient(165deg, oklch(0.16 0.014 var(--th) / .8), oklch(0.125 0.008 var(--th) / .45));
  box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .25);
}
.theory::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  --ck: oklch(0.66 0.09 var(--th) / .9);
  background-image:
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck));
  background-position:0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size:16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-repeat:no-repeat;
}
.theory .tag-t::before{
  content:""; display:inline-block; width:.55em; height:.55em; margin-right:.95em;
  background:currentColor; vertical-align:.02em;
}
.theory .tag-t{ display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:oklch(0.75 0.08 var(--th)); margin-bottom:.8em; }
.theory h4{ font-weight:700; font-size:1.08rem; margin-bottom:.5em; }
.theory p{ font-size:.97rem; color:var(--mut); line-height:1.72; }
/* Zitate aus den Notizen: Halbrahmen (Eckmarken oben links / unten rechts) */
.testimony{
  position:relative; margin:1.3rem 0; padding:1.15rem 1.4rem; border-radius:0; font-style:italic; color:var(--mut);
  background:oklch(0.14 0.008 var(--th) / .45);
  hanging-punctuation:first allow-end;
}
.testimony::before, .testimony::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border:0 solid oklch(0.58 0.08 var(--th) / .85);
}
.testimony::before{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.testimony::after{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.chips{ display:flex; flex-wrap:wrap; gap:.55em; margin:.4rem 0 0; }
.chips span{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.6em 1em; border-radius:99px; color:oklch(0.82 0.06 var(--th));
  background:oklch(0.28 0.04 var(--th) / .3); box-shadow:inset 0 0 0 1px oklch(0.48 0.06 var(--th) / .4);
}
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-radius:14px; overflow:hidden; margin:1.4rem 0; }
.caps .c{ background:var(--pane); padding:1.1rem 1.1rem 1.2rem; }
.caps .cv{ font-weight:700; font-size:1.02rem; }
.caps .cl{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-top:.7em; line-height:1.9; }
@media (max-width:620px){ .caps{ grid-template-columns:1fr; } }
.tiers{ margin:1.4rem 0; border-radius:14px; overflow:hidden; background:var(--line); display:grid; gap:1px; }
.tier{ display:grid; grid-template-columns:60px 140px 1fr; gap:1rem; padding:1.05rem 1.2rem; background:var(--pane); align-items:baseline; }
.tier .tn{ font-weight:800; font-size:1.8rem; letter-spacing:-.03em; color:oklch(0.7 0.09 var(--th)); line-height:1; }
.tier .th{ font-weight:700; }
.tier .td{ color:var(--mut); font-size:.92rem; }
@media (max-width:560px){ .tier{ grid-template-columns:44px 1fr; } .tier .td{ grid-column:2; } }
.steps{ display:grid; gap:1px; background:var(--line); border-radius:14px; overflow:hidden; margin:1.4rem 0; counter-reset:step; }
.step{ display:grid; grid-template-columns:50px 1fr; gap:1rem; padding:1.05rem 1.2rem; background:var(--pane); }
.step::before{ counter-increment:step; content:counter(step, decimal-leading-zero);
  font-family:var(--f-mono); font-size:.78rem; color:oklch(0.7 0.09 var(--th)); padding-top:.25em; }
.step h5{ font-weight:700; font-size:1rem; margin-bottom:.3em; }
.step p{ color:var(--mut); font-size:.92rem; }
.flow{ display:flex; align-items:stretch; gap:.7rem; margin:1.4rem 0; flex-wrap:wrap; }
.fnode{ flex:1; min-width:140px; border-radius:0; padding:1rem 1.1rem;
  background:linear-gradient(165deg, oklch(0.16 0.014 var(--th) / .8), oklch(0.125 0.008 var(--th) / .45));
  box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .3); }
.fnode .ft{ display:block; font-weight:700; }
.fnode .fs{ display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-top:.6em; line-height:1.8; }
.fnode.gate{ position:relative; box-shadow:inset 0 0 0 1px oklch(0.6 0.09 var(--th) / .35); }
.fnode.gate::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  --ck: oklch(0.66 0.09 var(--th) / .9);
  background-image:
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck));
  background-position:0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size:12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-repeat:no-repeat;
}
.flow .arr{ align-self:center; color:oklch(0.68 0.08 var(--th)); font-size:1.2rem; }

/* Messbilder des Glases: Sucher-Eckmarken wie bei den Theorie-Einblendungen */
.cmp::after, .blend::after, .sinus::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  --ck: oklch(0.66 0.09 var(--th) / .9);
  background-image:
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck)),
    linear-gradient(var(--ck), var(--ck)), linear-gradient(var(--ck), var(--ck));
  background-position:0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size:16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-repeat:no-repeat;
}

/* Licht-Komparator */
.cmp{
  position:relative; border-radius:0; overflow:hidden; user-select:none; margin:1.4rem 0 0;
  box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .3); --cut:50%; touch-action:pan-y;
}
.cmp .pane-c{ padding:1.5rem 1.5rem 1.6rem; min-height:320px; display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.cmp .ttl{ font-weight:700; font-size:1.2rem; }
.cmp .q{ font-style:italic; font-size:.97rem; line-height:1.62; hanging-punctuation:first allow-end; }
.cmp .base{ background:linear-gradient(180deg, oklch(0.15 0.008 248), oklch(0.12 0.006 250)); color:var(--mut); }
.cmp .lit{
  position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--cut)) 0 0);
  background:radial-gradient(90% 130% at 18% 50%, oklch(0.3 0.06 var(--th)), oklch(0.16 0.02 var(--th)) 78%);
  color:oklch(0.92 0.012 var(--th));
}
.cmp .seam{ position:absolute; top:0; bottom:0; left:var(--cut); width:1px; pointer-events:none;
  background:linear-gradient(180deg, transparent, oklch(0.72 0.1 var(--th)), transparent); box-shadow:0 0 16px oklch(0.55 0.08 var(--th) / .6); }
.cmp .handle{
  position:absolute; top:50%; left:var(--cut); transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; cursor:ew-resize; z-index:4; border:1px solid oklch(0.55 0.07 var(--th) / .7);
  background:oklch(0.14 0.008 245 / .85); backdrop-filter:blur(4px);
  display:grid; place-items:center; color:oklch(0.78 0.09 var(--th)); font-family:var(--f-mono);
}
.cmp-tags{ display:flex; justify-content:space-between; margin-top:.9rem; }
.cmp-tags span{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; }
.cmp-tags .a{ color:oklch(0.78 0.09 var(--th)); }
.cmp-tags .b{ color:var(--faint); }

/* Sinus-Karte */
.sinus{
  position:relative; height:350px; margin:2.6rem .6rem 3rem 3.4rem; border-radius:0;
  background:
    linear-gradient(oklch(0.28 0.012 240 / .5) 1px, transparent 1px) 0 0 / 100% 33.4%,
    linear-gradient(90deg, oklch(0.28 0.012 240 / .5) 1px, transparent 1px) 0 0 / 33.4% 100%,
    var(--pane);
  box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .3);
}
.sinus .ax{ position:absolute; font-family:var(--f-mono); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.sinus .ax.y{ left:-.6em; transform:translate(-100%,-50%); }
.sinus .ax.x{ bottom:-2.2em; transform:translateX(-50%); }
.sinus .axis-title{ position:absolute; font-family:var(--f-mono); font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
.milieu{
  position:absolute; transform:translate(-50%,-50%); cursor:pointer; border:none; text-align:center;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:oklch(0.9 0.04 var(--mc, 210));
  background:oklch(0.32 0.05 var(--mc,210) / .26); padding:.8em 1.1em;
  border-radius:48% 52% 55% 45% / 52% 48% 56% 44%;
  box-shadow:inset 0 0 0 1px oklch(0.52 0.07 var(--mc,210) / .38);
  transition:all .25s ease;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.milieu:hover{ background:oklch(0.38 0.06 var(--mc,210) / .4); z-index:3; }
.milieu.on{ background:oklch(0.44 0.07 var(--mc,210) / .5); box-shadow:inset 0 0 0 1px oklch(0.7 0.09 var(--mc,210)), 0 0 30px oklch(0.5 0.08 var(--mc,210) / .35); z-index:2; }
.milieu .mtag{ display:block; font-size:.44rem; letter-spacing:.22em; color:oklch(0.82 0.1 70); margin-bottom:.4em; }
.sinus .sub{
  position:absolute; transform:translate(-50%,-50%); pointer-events:none;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:.4em;
  font-family:var(--f-mono); font-size:.44rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
  background:oklch(0.5 0.01 240 / .1);
  box-shadow:inset 0 0 0 1px oklch(0.5 0.01 240 / .25);
  border-radius:50% 50% 46% 54% / 54% 46% 52% 48%;
}
.sinus-desc{
  position:relative; border-radius:0; padding:1.1rem 1.3rem; background:oklch(0.14 0.008 var(--th) / .45);
  box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .25); min-height:5.2em;
}
.sinus-desc::before, .sinus-desc::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border:0 solid oklch(0.58 0.08 var(--th) / .85);
}
.sinus-desc::before{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.sinus-desc::after{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.sinus-desc .sd-t{ font-weight:700; margin-bottom:.3em; }
.sinus-desc p{ color:var(--mut); font-size:.92rem; }

/* Reflexionsraum */
.reflect{ margin:1.3rem 0; }
.reflect .q{ font-weight:600; font-size:1rem; margin-bottom:.7em; }
.reflect textarea{
  width:100%; min-height:110px; resize:vertical; border-radius:12px; padding:.9em 1em;
  background:oklch(0.13 0.006 248); color:var(--ink); font-family:inherit; font-size:.94rem; line-height:1.6;
  border:1px solid var(--line); outline:none; transition:border-color .25s ease, box-shadow .25s ease;
}
.reflect textarea:focus{ border-color:oklch(0.55 0.08 210); box-shadow:0 0 0 3px oklch(0.45 0.07 210 / .25); }
.reflect .meta{ display:flex; justify-content:space-between; margin-top:.5em;
  font-family:var(--f-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.reflect .saved{ display:inline-flex; align-items:center; gap:.5em; color:oklch(0.72 0.1 150); opacity:0; transition:opacity .4s ease; }
.reflect .saved.show{ opacity:1; }

/* Verortung — interaktive Kartoffelgrafik der Digitalen Sinus-Milieus® */
.refl-lead{ color:var(--mut); font-size:.92rem; margin-bottom:1.4rem; }
.kgraf{
  position:relative; height:26rem; margin:2.8rem .6rem 3.4rem 3.4rem;
  background:
    linear-gradient(oklch(0.28 0.012 240 / .5) 1px, transparent 1px) 0 0 / 100% 33.4%,
    linear-gradient(90deg, oklch(0.28 0.012 240 / .5) 1px, transparent 1px) 0 0 / 33.4% 100%,
    var(--pane);
  box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .3);
}
.kgraf .kax{ position:absolute; font-family:var(--f-mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); pointer-events:none; }
.kgraf .kax.y{ left:-.6em; transform:translate(-100%,-50%); }
.kgraf .kax.x{ bottom:-2em; transform:translateX(-50%); }
.kgraf .kax-t{ position:absolute; font-family:var(--f-mono); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); pointer-events:none; }
.kgraf .kx-status{ top:-1.9em; left:-2.6em; }
.kgraf .kx-orient{ bottom:-3.4em; right:0; }
.kgraf .kworld{
  position:absolute; z-index:2; pointer-events:none; max-width:38%; line-height:1.25;
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.13em; text-transform:uppercase;
  color:oklch(0.6 0.018 var(--th) / .85);
}
.kgraf .ksub{
  position:absolute; z-index:0; transform:translate(-50%,-50%); pointer-events:none;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:.35em;
  font-family:var(--f-mono); font-size:.42rem; letter-spacing:.1em; text-transform:uppercase;
  color:oklch(0.6 0.008 240 / .8);
  background:oklch(0.5 0.01 240 / .09);
  box-shadow:inset 0 0 0 1px oklch(0.5 0.01 240 / .22);
  border-radius:50% 50% 46% 54% / 54% 46% 52% 48%;
}
.kblob{
  position:absolute; transform:translate(-50%,-50%); cursor:pointer; border:none; padding:.5em; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.12em; text-align:center;
  background:oklch(0.33 0.05 var(--mc,210) / .26);
  box-shadow:inset 0 0 0 1px oklch(0.52 0.07 var(--mc,210) / .42);
  transition:background .25s ease, box-shadow .25s ease;
}
.kblob .kb-n{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:oklch(0.93 0.04 var(--mc,210)); text-shadow:0 1px 6px oklch(0.1 0.01 240 / .75); }
.kblob .kb-p{ font-family:var(--f-mono); font-size:.5rem; letter-spacing:.06em; color:oklch(0.83 0.06 var(--mc,210) / .92); text-shadow:0 1px 5px oklch(0.1 0.01 240 / .75); }
.kblob .kb-key{ font-family:var(--f-mono); font-size:.4rem; letter-spacing:.18em; text-transform:uppercase; color:oklch(0.85 0.1 70); margin-bottom:.05em; max-width:8em; line-height:1.1; }
.kblob:hover{ background:oklch(0.4 0.06 var(--mc,210) / .42); z-index:5; }
.kblob.sel{ background:oklch(0.46 0.08 var(--mc,210) / .55); box-shadow:inset 0 0 0 1px oklch(0.72 0.1 var(--mc,210)), 0 0 34px oklch(0.5 0.08 var(--mc,210) / .4); z-index:6; }
.kblob.target{ z-index:4; animation:kblob-pulse 1.9s ease-in-out infinite; }
@keyframes kblob-pulse{
  0%,100%{ box-shadow:inset 0 0 0 1px oklch(0.6 0.08 var(--mc,210) / .55), 0 0 0 oklch(0.6 0.09 var(--mc,210) / 0); }
  50%{ box-shadow:inset 0 0 0 1px oklch(0.74 0.1 var(--mc,210) / .85), 0 0 26px oklch(0.55 0.09 var(--mc,210) / .45); }
}
.verort .vout{
  margin-top:1.1rem; padding:1rem 1.2rem; border-radius:12px;
  background:oklch(0.14 0.008 210 / .5); box-shadow:inset 0 0 0 1px oklch(0.32 0.025 210 / .3);
  font-size:.92rem; line-height:1.62; color:var(--mut); animation:vout-in .5s ease both;
}
.verort .vout .vo-h{ font-family:var(--f-sans); font-weight:660; color:var(--ink); margin-bottom:.15em; }
.verort .vout .vo-d{ color:var(--faint); margin-bottom:.7em; }
.verort .vout b{ color:var(--ink); font-weight:660; }
.verort .vmodel-cap{ margin-top:.95rem; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.07em; line-height:1.55; color:var(--faint); }
/* Milieu-Umfrage: aggregierte Ergebnis-Balken + Sinus-Link */
.verort .vpoll{ margin-top:1.2rem; animation:vout-in .5s ease both; }
.verort .vpoll .vp-lead{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 .85rem; }
.verort .vp-row{ display:grid; grid-template-columns:7.4em 1fr 2.6em; align-items:center; gap:.6em; margin:.4em 0; font-size:.82rem; }
.verort .vp-n{ color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.verort .vp-bar{ height:8px; border-radius:99px; background:oklch(0.3 0.012 240 / .55); overflow:hidden; }
.verort .vp-bar i{ display:block; height:100%; width:0; border-radius:99px; background:oklch(0.6 0.06 210); transition:width .7s cubic-bezier(.23,1,.32,1); }
.verort .vp-p{ font-variant-numeric:tabular-nums; color:var(--faint); text-align:right; }
.verort .vp-row.is-me .vp-n{ color:var(--ink); font-weight:660; }
.verort .vp-row.is-me .vp-bar i{ background:var(--accent); box-shadow:0 0 12px oklch(0.78 0.1 200 / .5); }
.verort .vp-link{ margin:1rem 0 0; font-size:.8rem; }
.verort .vp-link a{ color:var(--accent); text-decoration:none; border-bottom:1px solid oklch(0.78 0.1 200 / .45); padding-bottom:1px; transition:border-color .2s ease; }
.verort .vp-link a:hover{ border-bottom-color:var(--accent); }
@keyframes vout-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .kblob.target{ animation:none; box-shadow:inset 0 0 0 1px oklch(0.74 0.1 var(--mc,210) / .85), 0 0 20px oklch(0.55 0.09 var(--mc,210) / .4); }
  .verort .vout, .verort .vpoll{ animation:none; }
  .verort .vp-bar i{ transition:none; }
}
details.sources{ margin-top:1.6rem; border-radius:14px; background:var(--pane); box-shadow:inset 0 0 0 1px var(--line); }
details.sources summary{
  cursor:pointer; list-style:none; padding:1rem 1.3rem;
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut);
}
details.sources summary::-webkit-details-marker{ display:none; }
details.sources .reflist{ padding:0 1.3rem 1.2rem; }
details.sources .reflist p{ font-size:.84rem; color:var(--mut); line-height:1.55; padding:.5em 0 .5em 1.4em; text-indent:-1.4em; border-top:1px solid oklch(0.24 0.01 240); font-variant-numeric:oldstyle-nums; }

/* Abspann */
.credits{
  text-align:center; padding:3rem 0 1rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; line-height:2.4; color:var(--faint); text-transform:uppercase;
}
.credits b{ color:var(--mut); font-weight:500; }

/* Nächste Episode */
.nextcard{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:1.4rem; margin:2.6rem 0 4rem; padding:1.3rem 1.5rem;
  border-radius:18px; border:none; cursor:pointer; width:100%; text-align:left; color:var(--ink);
  background:
    radial-gradient(400px 200px at 90% 0%, oklch(0.38 0.07 var(--nth,215) / .6), transparent 70%),
    linear-gradient(120deg, var(--pane), oklch(0.18 0.025 var(--nth,215)));
  box-shadow:inset 0 0 0 1px oklch(0.42 0.05 var(--nth,215) / .45);
  transition:transform .25s ease;
}
.nextcard:hover{ transform:translateY(-3px); }
.nextcard .nx-art{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  opacity:.2; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 28%, #000 78%);
  mask-image:linear-gradient(90deg, transparent 28%, #000 78%);
  transition:opacity .25s ease;
}
.nextcard:hover .nx-art{ opacity:.3; }
.nextcard > span{ position:relative; z-index:1; }
.nextcard .nx-k{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:oklch(0.78 0.08 var(--nth,215)); }
.nextcard .nx-t{ display:block; font-weight:830; font-stretch:114%; font-size:1.35rem; letter-spacing:-.006em; text-transform:uppercase; margin-top:.3em; }
.nextcard .nx-tease{ display:block; margin-top:.5em; font-family:var(--f-read); font-size:.82rem; font-weight:400; font-style:italic; letter-spacing:0; text-transform:none; color:var(--mut); text-wrap:pretty; }
.nextcard .nx-play{ margin-left:auto; font-size:1.5rem; color:oklch(0.8 0.09 var(--nth,215)); }

/* Theorietiefe */
body[data-depth="knapp"] .deep{ display:none; }

/* Spiegelungen aus */
body.no-refl .refl,
body.no-refl .tc-refl,
body.no-refl .boot-refl{ visibility:hidden; }

/* ───── Sprachliche Register: Tasten am Rahmen ───── */
.dev-btn.vol-up, .dev-btn.vol-down{ border:none; cursor:pointer; padding:0; }
.dev-btn.vol-up::after, .dev-btn.vol-down::after{ content:""; position:absolute; inset:-14px; }
.dev-btn.vol-up:hover, .dev-btn.vol-down:hover{ filter:brightness(1.45); }
.dev-btn.vol-up:active, .dev-btn.vol-down:active{ transform:translateY(1px); filter:brightness(.8); }
.dev-btn.vol-up:focus-visible, .dev-btn.vol-down:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; }

/* Registervarianten: b = Bildungssprache, a = Alltagssprache, e = Einfache Sprache */
[data-reg]{ display:none; }
body[data-register="bildung"] [data-reg~="b"],
body[data-register="alltag"] [data-reg~="a"],
body[data-register="einfach"] [data-reg~="e"]{ display:revert; }
body[data-depth="knapp"] .deep[data-reg]{ display:none; }

/* HUD: erscheint beim Tastendruck wie eine Lautstärkeanzeige */
.reg-hud{
  position:absolute; top:clamp(10px, 1.8vmin, 20px); right:clamp(10px, 1.8vmin, 20px);
  z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:.45em;
  padding:.75em .95em .8em;
  border-radius:11px;
  background:oklch(0.135 0.006 248 / .94);
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px oklch(1 0 0 / .09), 0 14px 34px oklch(0 0 0 / .55);
  opacity:0; transform:translateY(-7px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.reg-hud.show{ opacity:1; transform:none; }
.reg-hud .rh-k{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.reg-hud .rh-v{ font-weight:740; font-stretch:110%; font-size:.95rem; letter-spacing:.01em; color:var(--ink); }
.reg-hud .rh-bars{ display:flex; gap:4px; margin-top:.1em; }
.reg-hud .rh-bars i{ width:20px; height:3px; border-radius:2px; background:oklch(1 0 0 / .14); transition:background .2s ease; }
.reg-hud[data-lvl="1"] .rh-bars i:nth-child(-n+1),
.reg-hud[data-lvl="2"] .rh-bars i:nth-child(-n+2),
.reg-hud[data-lvl="3"] .rh-bars i:nth-child(-n+3){ background:var(--accent); }
.reg-hud .rh-hint{ display:none; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.reg-hud.hint .rh-hint{ display:block; }
body.no-frame .reg-hud{ display:none; }

/* Hinweis in Akt IV auf die Register-Tasten */
.regnote{
  display:flex; gap:.7em; align-items:baseline;
  margin-top:1.2em; padding:.85em 1em;
  border-radius:9px;
  background:oklch(0.17 0.012 var(--th, 215) / .55);
  box-shadow:inset 0 0 0 1px oklch(0.34 0.03 var(--th, 215) / .5);
  font-size:.86rem; color:var(--mut); text-wrap:pretty;
}
.regnote::before{ content:"▲▼"; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; color:oklch(0.78 0.09 var(--th, 215)); flex:none; }
.regnote[data-reg]{ display:none; }
body[data-register="bildung"] .regnote[data-reg~="b"],
body[data-register="alltag"] .regnote[data-reg~="a"],
body[data-register="einfach"] .regnote[data-reg~="e"]{ display:flex; }
body.no-frame .regnote,
body.no-frame .regnote[data-reg]{ display:none; }

/* ───── Schaubilder: Nacht-Zeitleiste · Methoden-Kreislauf · Entgrenzungs-Saum · Nähe-Distanz-Kontinuum ───── */

/* Gemeinsame Bildunterschrift — mit Lichtkanten wie die Zwischentitel */
.viz-cap{
  display:flex; align-items:center; justify-content:center; gap:1.2em;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); text-align:center; margin:1rem 0 0;
  counter-increment:viz;
}
.viz-cap::before, .viz-cap::after{
  content:""; width:2.4em; height:1px; flex:none;
  background:linear-gradient(90deg, transparent, oklch(0.5 0.06 var(--th, 215) / .8));
}
.viz-cap::after{ transform:scaleX(-1); }
/* Abbildungs-Apparat: durchnummeriert wie im Studientext */
body{ counter-reset:viz; }
.viz-cap .vno{ flex:none; font-weight:500; color:oklch(0.76 0.08 var(--th, 215)); }
.viz-cap .vno::before{ content:"Abb. " counter(viz, decimal-leading-zero); }

/* Zeitleiste der Nacht (E1): Soll gegen Ist */
.night{ margin:1.7rem 0 .4rem; }
.n-frame{ position:relative; padding:3.6em 0 4em; }
.n-track{ position:relative; height:10px; border-radius:99px; background:oklch(0.19 0.012 var(--th)); box-shadow:inset 0 0 0 1px oklch(0.3 0.02 var(--th) / .55); }
/* Stundenraster unter der Zeitleiste — das Instrument bekommt eine Skala */
.n-track::after{
  content:""; position:absolute; top:calc(100% + 6px); left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg, oklch(0.52 0.04 var(--th) / .45) 0 1px, transparent 1px 16.6667%);
}
.n-should{ position:absolute; top:1px; bottom:1px; left:16.7%; right:1px; border-radius:0 99px 99px 0;
  background:repeating-linear-gradient(135deg, oklch(0.36 0.02 var(--th) / .5) 0 3px, transparent 3px 8px); }
.n-glow{ position:absolute; top:0; bottom:0; left:0; width:84.2%; border-radius:99px;
  background:linear-gradient(90deg, oklch(0.3 0.035 var(--th) / .55), oklch(0.62 0.1 var(--th)));
  box-shadow:0 0 16px oklch(0.6 0.1 var(--th) / .4); }
.n-glow::after{ content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:oklch(0.88 0.07 var(--th));
  box-shadow:0 0 12px oklch(0.8 0.1 var(--th)), 0 0 32px oklch(0.7 0.1 var(--th) / .55); }
.n-mark{ position:absolute; left:var(--x); top:-5px; bottom:-5px; width:1px; background:oklch(0.62 0.04 var(--th) / .55); }
.n-lbl{ position:absolute; left:0; transform:translateX(-50%); width:max-content; max-width:9.5em; text-align:center;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.75; color:var(--mut); }
.n-mark.up .n-lbl{ bottom:calc(100% + .7em); }
.n-mark.dn .n-lbl{ top:calc(100% + .7em); }
.n-mark.start .n-lbl{ transform:translateX(-14%); text-align:left; }
.n-mark.end .n-lbl{ transform:translateX(-86%); text-align:right; }
.n-lbl b{ display:block; font-weight:500; font-size:.7rem; letter-spacing:.14em; color:var(--ink); margin-bottom:.15em; }
.n-mark.lit .n-lbl b{ color:oklch(0.85 0.08 var(--th)); }
.n-tags{ display:flex; justify-content:space-between; gap:1em; }
.n-tags span{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; }
.n-tags .a{ color:oklch(0.78 0.09 var(--th)); }
.n-tags .b{ color:var(--faint); }

/* Methoden-Kreislauf (E1): Autoethnografie als Schleife */
.loopdia{ position:relative; width:min(100%, 34rem); height:16.5rem; margin:1.8rem auto 0; }
.ld-ring{ position:absolute; inset:9% 8%; border:1.5px dashed oklch(0.4 0.03 var(--th) / .8); border-radius:50%; }
.ld-dir{ position:absolute; left:74.7%; top:16.8%; transform:translate(-50%,-50%) rotate(36deg);
  color:oklch(0.66 0.08 var(--th)); font-size:.85rem; display:grid; place-items:center; }
.ld-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.ld-core b{ display:block; font-weight:400; font-size:1.35rem; color:oklch(0.72 0.09 var(--th)); margin-top:.35em; }
.ld-n{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; align-items:baseline; gap:.55em; white-space:nowrap;
  background:linear-gradient(165deg, oklch(0.17 0.014 var(--th) / .92), oklch(0.135 0.008 var(--th) / .85)); border-radius:0; padding:.55em .85em .6em;
  box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .6), 0 6px 18px -10px oklch(0 0 0 / .8);
  font-family:var(--f-sans); font-weight:700; font-size:.92rem; }
.ld-n b{ font-family:var(--f-mono); font-weight:500; font-size:.58rem; letter-spacing:.08em; color:oklch(0.75 0.08 var(--th)); }
/* Der Ring steht still — ein Lichtpunkt wandert die Schleife entlang (eine Ellipse darf nie selbst rotieren: sie taumelt) */
.ld-orbit{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .ld-orbit{
    display:block; position:absolute; left:0; top:0; width:7px; height:7px; border-radius:50%;
    background:oklch(0.88 0.08 var(--th));
    box-shadow:0 0 8px oklch(0.8 0.1 var(--th)), 0 0 22px oklch(0.7 0.1 var(--th) / .5);
    offset-path:ellipse(42% 41% at 50% 50%);
    animation:ld-orbit 16s linear infinite;
  }
  @keyframes ld-orbit{ to{ offset-distance:100%; } }
}
@media (max-width:560px){ .loopdia{ height:13.5rem; } .ld-n{ font-size:.76rem; padding:.45em .65em .5em; } }

/* Entgrenzungs-Saum (E2): zwei Sphären, eine sich auflösende Grenze */
.blend{ position:relative; display:grid; grid-template-columns:1fr 1.3fr 1fr; margin:1.5rem 0 0;
  border-radius:0; overflow:hidden; box-shadow:inset 0 0 0 1px oklch(0.32 0.025 var(--th) / .3); background:oklch(0.14 0.008 var(--th)); }
.bl-col{ position:relative; display:grid; grid-template-rows:auto 1fr; gap:1em; padding:1.15rem 1rem 1.25rem; min-height:13.5rem; }
.bl-col.l{ background:linear-gradient(100deg, oklch(0.21 0.04 calc(var(--th) - 48) / .85), transparent 145%); }
.bl-col.r{ background:linear-gradient(260deg, oklch(0.21 0.04 calc(var(--th) + 48) / .85), transparent 145%); }
.bl-col.m{ background:linear-gradient(90deg, oklch(0.21 0.04 calc(var(--th) - 48) / .3), oklch(0.16 0.01 var(--th) / .15) 50%, oklch(0.21 0.04 calc(var(--th) + 48) / .3)); }
.bl-k{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); text-align:center; }
.bl-set{ display:flex; flex-direction:column; gap:.6em; align-items:center; justify-content:center; }
.bl-i{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:.6em 1em; border-radius:99px; white-space:nowrap; }
.bl-col.l .bl-i{ color:oklch(0.84 0.05 calc(var(--th) - 48)); background:oklch(0.3 0.05 calc(var(--th) - 48) / .3); box-shadow:inset 0 0 0 1px oklch(0.5 0.06 calc(var(--th) - 48) / .4); }
.bl-col.r .bl-i{ color:oklch(0.84 0.05 calc(var(--th) + 48)); background:oklch(0.3 0.05 calc(var(--th) + 48) / .3); box-shadow:inset 0 0 0 1px oklch(0.5 0.06 calc(var(--th) + 48) / .4); }
.bl-col.m .bl-i{ color:var(--ink); background:linear-gradient(90deg, oklch(0.3 0.05 calc(var(--th) - 48) / .42), oklch(0.3 0.05 calc(var(--th) + 48) / .42)); box-shadow:inset 0 0 0 1px oklch(0.5 0.03 var(--th) / .45); }
.bl-line{ position:absolute; left:50%; top:0; bottom:0; width:1px; pointer-events:none;
  background:repeating-linear-gradient(180deg, oklch(0.6 0.04 var(--th) / .8) 0 7px, transparent 7px 14px);
  -webkit-mask:linear-gradient(180deg, #000 12%, transparent 38% 62%, #000 88%);
  mask:linear-gradient(180deg, #000 12%, transparent 38% 62%, #000 88%); }
@media (max-width:620px){
  .blend{ grid-template-columns:1fr; }
  .bl-col{ min-height:0; }
  .bl-line{ display:none; }
  .bl-i{ white-space:normal; text-align:center; }
}

/* Nähe-Distanz-Kontinuum (E4): der helle Punkt folgt dem Register */
.kont{ margin:1.7rem 0 .4rem; }
.k-regs{ position:relative; height:3.2em; }
.k-stem{ position:absolute; left:var(--x); bottom:0; width:1px; height:.75em; background:oklch(0.6 0.05 var(--th) / .7); }
.k-reg{ position:absolute; left:var(--x); bottom:1.1em; transform:translateX(-50%);
  font-family:var(--f-sans); font-weight:700; font-size:.82rem; white-space:nowrap;
  opacity:.4; transition:opacity .5s ease; }
.k-reg.edge{ transform:translateX(-88%); }
.k-track{ position:relative; height:8px; border-radius:99px; margin:0 0 .9em;
  background:linear-gradient(90deg, oklch(0.2 0.01 var(--th)), oklch(0.5 0.08 var(--th)));
  box-shadow:inset 0 0 0 1px oklch(0.34 0.02 var(--th) / .5); }
.k-dot{ position:absolute; left:var(--x); top:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:oklch(0.42 0.03 var(--th));
  box-shadow:0 0 0 1px oklch(0.2 0.01 var(--th)); transition:all .5s ease; }
body[data-register="alltag"] .k-reg[data-r="a"],
body[data-register="einfach"] .k-reg[data-r="e"],
body[data-register="bildung"] .k-reg[data-r="b"]{ opacity:1; }
body[data-register="alltag"] .k-dot[data-r="a"],
body[data-register="einfach"] .k-dot[data-r="e"],
body[data-register="bildung"] .k-dot[data-r="b"]{
  background:oklch(0.88 0.07 var(--th));
  box-shadow:0 0 10px oklch(0.8 0.1 var(--th)), 0 0 26px oklch(0.7 0.12 var(--th) / .6);
  transform:translate(-50%,-50%) scale(1.3); }
.k-ex{ position:relative; height:1.6em; }
.k-ex span{ position:absolute; left:var(--x); top:.4em; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.k-ex span::before{ content:""; position:absolute; left:50%; bottom:calc(100% + .25em); width:1px; height:.55em; background:oklch(0.45 0.02 var(--th) / .7); }
.k-ex span.s{ transform:translateX(-10%); } .k-ex span.s::before{ left:10%; }
.k-ex span.e{ transform:translateX(-90%); } .k-ex span.e::before{ left:90%; }
.k-poles{ display:flex; justify-content:space-between; margin-top:1.2em; }
.k-poles b{ display:block; font-size:.88rem; font-weight:700; }
.k-poles small{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.k-poles .r{ text-align:right; }
.k-hint{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:oklch(0.72 0.08 var(--th)); margin-top:1.1rem; }
body.no-frame .k-hint{ display:none; }
@media (max-width:520px){ .k-reg{ font-size:.68rem; } .k-ex span{ font-size:.48rem; } }

/* ───── Sanfte Eintritte beim Scrollen (JS setzt .viz-will, Observer .viz-in) ───── */
@media (prefers-reduced-motion: no-preference){
  .viz-will{ opacity:0; transform:translateY(14px); transition:opacity .65s ease, transform .65s ease; }
  .viz-will.viz-in{ opacity:1; transform:none; }

  /* Schaubild-Choreografie: die Instrumente fahren hoch, sobald sie ins Bild kommen */
  @keyframes viz-fade{ from{ opacity:0; } }
  @keyframes viz-pop{ from{ opacity:0; transform:translateY(6px); } }

  /* Zeitleiste: das Ist-Leuchten wächst in die Nacht hinein */
  .night.viz-will .n-glow{ width:16.7%; opacity:.35; }
  .night.viz-in .n-glow{ width:84.2%; opacity:1; transition:width 1.5s cubic-bezier(.25,.8,.25,1) .35s, opacity .6s ease .35s; }

  /* Kreislauf: die Stationen erscheinen der Reihe nach */
  .loopdia.viz-in .ld-n{ animation:viz-fade .55s ease both; animation-delay:var(--vd, 0s); }

  /* Saum: die Items beider Sphären zuerst, die Mischformen zuletzt */
  .blend.viz-in .bl-i{ animation:viz-pop .5s ease both; }
  .blend.viz-in .bl-set .bl-i:nth-child(1){ animation-delay:.15s; }
  .blend.viz-in .bl-set .bl-i:nth-child(2){ animation-delay:.3s; }
  .blend.viz-in .bl-set .bl-i:nth-child(3){ animation-delay:.45s; }
  .blend.viz-in .bl-col.m .bl-i{ animation-name:viz-fade; animation-duration:.7s; }
  .blend.viz-in .bl-col.m .bl-i:nth-child(1){ animation-delay:.55s; }
  .blend.viz-in .bl-col.m .bl-i:nth-child(2){ animation-delay:.7s; }
  .blend.viz-in .bl-col.m .bl-i:nth-child(3){ animation-delay:.85s; }

  /* Licht-Komparator: der Griff meldet sich kurz */
  @keyframes cmp-ping{ from{ box-shadow:0 0 0 0 oklch(0.7 0.1 var(--th) / .5); } to{ box-shadow:0 0 0 16px oklch(0.7 0.1 var(--th) / 0); } }
  .cmp.viz-in .handle{ animation:cmp-ping 1.5s ease-out 2; animation-delay:.9s; }

  /* Kontinuum: Marker und Punkte blenden gestaffelt ein */
  .kont.viz-in .k-stem, .kont.viz-in .k-dot{ animation:viz-fade .5s ease both; }
  .kont.viz-in .k-dot[data-r="a"], .kont.viz-in .k-stem:nth-child(1){ animation-delay:.2s; }
  .kont.viz-in .k-dot[data-r="e"], .kont.viz-in .k-stem:nth-child(2){ animation-delay:.4s; }
  .kont.viz-in .k-dot[data-r="b"], .kont.viz-in .k-stem:nth-child(3){ animation-delay:.6s; }

  /* Milieu-Karte: die Cluster legen sich nacheinander über die Landschaft */
  .sinus.viz-in .milieu{ animation:viz-pop .55s ease both; }
  .sinus.viz-in button.milieu:nth-of-type(1){ animation-delay:.15s; }
  .sinus.viz-in button.milieu:nth-of-type(2){ animation-delay:.3s; }
  .sinus.viz-in button.milieu:nth-of-type(3){ animation-delay:.45s; }
  .sinus.viz-in button.milieu:nth-of-type(4){ animation-delay:.6s; }
  .sinus.viz-in button.milieu:nth-of-type(5){ animation-delay:.75s; }
  .sinus.viz-in button.milieu:nth-of-type(6){ animation-delay:.9s; }
}