/* ARX LUMINA — Webtoon-Stylesheet
   Design-Tokens aus stil/stilguide.md */

:root{
  --bg:#0a0a0f;
  --crystal:#5fe7c8;
  --umbra:#8b6fd6;
  --gold:#c9a15a;
  --text:#e9e6df;
  --panel-max:880px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Crimson Pro',Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ── Kristalladern-Spine: Signature-Element ─────────────────── */
.spine{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:2px; height:100vh; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent, rgba(95,231,200,.18) 12%, rgba(95,231,200,.30) 50%,
    rgba(139,111,214,.22) 82%, transparent);
  animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.spine{animation:none}}

/* Die Spine läuft hinter allem durch — schön zwischen den Blöcken,
   aber sie zieht sich sichtbar durch dünne Fließtext-Buchstaben und
   macht sie schwer lesbar. Fix: Textblöcke bekommen einen eigenen,
   weich ausgefransten Hintergrund (box-shadow als Federung statt
   harter Kante), der die Linie lokal abdeckt, ohne sie in den
   Zwischenräumen zu verdecken. */
.scene .einleitung, .scene .ortzeit,
.narr,
.logline, .byline,
.rueckblick p,
.mitmach h3{
  position:relative; background:var(--bg);
  box-shadow:0 0 22px 18px var(--bg);
}

.wrap{position:relative; z-index:1; max-width:var(--panel-max); margin:0 auto; padding:0 16px 120px}

/* ── Kopfleiste ─────────────────────────────────────────────── */
.topbar{
  position:relative; z-index:2; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; max-width:var(--panel-max);
  margin:0 auto; padding:1.1rem 16px 0;
  font-family:'Inter',system-ui,sans-serif; font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.topbar a{color:rgba(233,230,223,.5); text-decoration:none; transition:color .2s}
.topbar a:hover{color:var(--crystal)}
.topbar .home{letter-spacing:.34em; color:rgba(95,231,200,.6)}

/* ── Titel ──────────────────────────────────────────────────── */
header{padding:18vh 0 14vh; text-align:center}
.kicker{
  font-family:'Inter',system-ui,sans-serif; font-size:.72rem;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--crystal); opacity:.75; margin-bottom:2.4rem;
}
h1{
  font-family:'Cinzel',Georgia,serif; font-weight:600;
  font-size:clamp(2.1rem,7vw,4.1rem); line-height:1.06;
  margin:0 0 1.6rem; letter-spacing:.03em;
}
h1 .ep{
  display:block; font-size:.3em; letter-spacing:.34em;
  color:var(--gold); font-weight:400; margin-bottom:1.5rem;
}
.byline{
  font-family:'Marcellus',Georgia,serif; font-style:italic;
  color:rgba(233,230,223,.5); font-size:1rem; letter-spacing:.06em;
}
.logline{
  font-family:'Marcellus',Georgia,serif; font-style:italic;
  max-width:38ch; margin:2.6rem auto 0; color:rgba(233,230,223,.62);
  font-size:1.02rem; line-height:1.7;
}
.quelle{
  font-family:'Inter',system-ui,sans-serif; font-size:.62rem;
  letter-spacing:.1em; line-height:1.9; margin-top:1.5rem;
  color:rgba(233,230,223,.32);
}
.quelle i{color:rgba(95,231,200,.45); font-style:italic}

/* ── Panels ─────────────────────────────────────────────────── */
/* overflow:hidden ist eine Sicherung: Sprechblasen sind absolut
   positioniert und zählen nicht zur Panelhöhe. Ohne Deckelung
   würde eine zu tief sitzende oder zu lange Blase über den
   Panelrand hinaus ins nächste Panel bluten. Die eigentliche
   Regel bleibt: Blasen so setzen, dass sie nicht abgeschnitten
   werden — diese Zeile fängt nur den Fehlerfall ab. */
.panel{position:relative; margin:0 auto 4px; line-height:0; overflow:hidden}
.panel img{width:100%; height:auto; display:block}

/* ── Crop-Panel: ein Render, mehrere Beats ─────────────────── */
.cropbox{
  position:relative; overflow:hidden; width:100%;
  background:#0a0a0f;
}
.cropbox[data-ar="2:3"]{aspect-ratio:2/3}
.cropbox[data-ar="16:9"]{aspect-ratio:16/9}
.cropbox[data-ar="21:9"]{aspect-ratio:21/9}
.cropbox[data-ar="1:1"]{aspect-ratio:1/1}
.cropbox[data-ar="4:5"]{aspect-ratio:4/5}
/* Der Punkt (--fx, --fy) des QUELLBILDS landet exakt in der
   Panelmitte. translate rechnet in Prozent der Bildgröße, nicht
   der Box — deshalb stimmen die Koordinaten mit dem PNG überein. */
/* 106% statt 100%: kleiner Spielraum, damit der Parallax-Versatz
   keine Kanten freilegt. */
.cropbox img{
  position:absolute; left:50%; top:50%; display:block;
  width:calc(var(--zoom,1) * 106%); height:auto;
  transform:
    translate(calc(-1 * var(--fx,50%)), calc(-1 * var(--fy,50%)))
    translateY(var(--par,0px));
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .cropbox img{transform:translate(calc(-1 * var(--fx,50%)), calc(-1 * var(--fy,50%)))}
}

/* ── Split-Panel: Collage aus zwei Renders in einem Frame ────
   Für dramatische Highlight-Panels (siehe splitBox() in webtoon.js).
   Jede Hälfte ist ein normales .cropbox-Element, per Flex nebenein-
   ander (oder gestapelt bei .col), getrennt durch eine dünne
   goldene Linie im Stil der Eckverzierungen. */
.panel-split{
  position:relative; overflow:hidden; width:100%;
  display:flex; background:#0a0a0f;
}
.panel-split.col{ flex-direction:column; }
.panel-split[data-ar="2:3"]{aspect-ratio:2/3}
.panel-split[data-ar="16:9"]{aspect-ratio:16/9}
.panel-split[data-ar="21:9"]{aspect-ratio:21/9}
.panel-split[data-ar="1:1"]{aspect-ratio:1/1}
.panel-split[data-ar="4:5"]{aspect-ratio:4/5}
.panel-split > .cropbox{
  flex:1 1 0; min-width:0; min-height:0; height:100%;
}
.panel-split > .cropbox + .cropbox{
  border-left:1px solid rgba(201,161,90,.35);
}
.panel-split.col > .cropbox + .cropbox{
  border-left:none; border-top:1px solid rgba(201,161,90,.35);
}
.split-ph{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  font-family:'Inter',sans-serif; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(233,230,223,.3);
  background:
    repeating-linear-gradient(45deg, rgba(233,230,223,.014) 0 12px, transparent 12px 24px),
    #101017;
}
/* Optionale Vignette, damit Ausschnitte nicht flach wirken */
.cropbox.vignette::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(10,10,15,.55) 100%);
}

.ph{
  position:relative; line-height:1.5;
  display:flex; flex-direction:column; justify-content:center;
  padding:2.6rem 2rem; text-align:center;
  border:1px solid rgba(233,230,223,.10);
  background:
    repeating-linear-gradient(45deg,
      rgba(233,230,223,.014) 0 12px, transparent 12px 24px),
    #101017;
}
.ph[data-ar="2:3"]{aspect-ratio:2/3}
.ph[data-ar="16:9"]{aspect-ratio:16/9}
.ph[data-ar="1:1"]{aspect-ratio:1/1}
.ph .no{
  font-family:'Cinzel',serif; font-size:2.4rem;
  color:rgba(233,230,223,.16); letter-spacing:.1em;
}
.ph .shot{
  font-family:'Inter',sans-serif; font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--crystal); opacity:.55; margin:.9rem 0 1.1rem;
}
.ph .desc{
  font-size:.95rem; opacity:.42; max-width:34ch;
  margin:0 auto; font-style:italic;
}
.ph .prio{
  position:absolute; top:.85rem; right:1rem;
  font-family:'Inter',sans-serif; font-size:.6rem;
  letter-spacing:.18em; padding:.24rem .55rem;
  border:1px solid rgba(201,161,90,.35); color:var(--gold); opacity:.7;
}

/* ── Sprechblasen ───────────────────────────────────────────── */
.bubble{
  position:absolute; max-width:min(46%,320px);
  background:rgba(9,9,14,.90);
  border:1px solid var(--who,var(--crystal));
  border-radius:14px; padding:.68rem .9rem;
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(.72rem,1.55vw,.87rem); line-height:1.42;
  box-shadow:0 0 22px rgba(0,0,0,.75);
  backdrop-filter:blur(3px);
}
.bubble b{
  display:block; color:var(--who,var(--crystal));
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:.34rem; font-weight:600;
}
.bubble p{margin:0}
.bubble p + p{margin-top:.5rem}
/* Gedankenblase: gestrichelt */
.bubble.denk{border-style:dashed}

/* ── Narration ──────────────────────────────────────────────── */
.narr{
  font-family:'Marcellus',Georgia,serif; font-style:italic;
  font-size:clamp(1rem,2.1vw,1.24rem); line-height:1.72;
  text-align:center; max-width:34ch;
  margin:3.6rem auto; color:rgba(233,230,223,.82);
}
.narr::before,.narr::after{
  content:''; display:block; width:34px; height:1px;
  background:linear-gradient(90deg,transparent,var(--crystal),transparent);
  margin:1.5rem auto; opacity:.4;
}

/* ── Würfelwurf (Fate Core, 4dF) ───────────────────────────── */
.wurf{
  max-width:420px; margin:2.6rem auto; padding:1.1rem 1.3rem;
  border:1px solid rgba(201,161,90,.28); background:rgba(15,13,10,.72);
  font-family:'Inter',system-ui,sans-serif;
}
.wurf .kopf{
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin-bottom:.9rem;
}
.wurf .zeile{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:.55rem 0}
.wurf .wer{font-size:.78rem; min-width:8.5em; color:rgba(233,230,223,.8)}
.wurf .wer b{display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--crystal); opacity:.75; font-weight:600}
.wurf .dice{display:flex; gap:.28rem}
.wurf .d{
  width:1.35rem; height:1.35rem; display:grid; place-items:center;
  border:1px solid rgba(233,230,223,.22); border-radius:3px;
  font-size:.8rem; line-height:1; color:rgba(233,230,223,.5);
  background:rgba(233,230,223,.03);
}
.wurf .d.plus{color:var(--crystal); border-color:rgba(95,231,200,.5)}
.wurf .d.minus{color:#d98b8b; border-color:rgba(217,139,139,.45)}
.wurf .summe{font-size:.76rem; color:rgba(233,230,223,.55); margin-left:auto; white-space:nowrap}
.wurf .summe s{text-decoration:none; color:var(--text); font-weight:600}
.wurf .ergebnis{
  margin-top:.9rem; padding-top:.8rem; border-top:1px solid rgba(233,230,223,.1);
  font-size:.72rem; letter-spacing:.06em; color:rgba(233,230,223,.75);
}
.wurf .ergebnis b{color:var(--gold)}
/* Aspekt-Einsatz und Fate-Punkte — der Pen-and-Paper-Beleg */
.wurf .aspekt{
  margin-top:.7rem; padding:.5rem .7rem;
  border-left:2px solid rgba(139,111,214,.55);
  background:rgba(139,111,214,.07);
  font-size:.7rem; line-height:1.6; color:rgba(233,230,223,.72);
}
.wurf .aspekt em{color:var(--umbra); font-style:italic}
.wurf .fp{
  display:flex; align-items:center; gap:.4rem; margin-top:.6rem;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(233,230,223,.45);
}
.wurf .fp i{
  width:.55rem; height:.55rem; border-radius:50%;
  border:1px solid rgba(201,161,90,.6);
}
.wurf .fp i.voll{background:var(--gold)}

/* ── Fertigkeits-Badge am Panel ────────────────────────────── */
.skill{
  position:absolute; top:.85rem; left:1rem; z-index:2;
  font-family:'Inter',sans-serif; font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.24rem .55rem; border:1px solid rgba(95,231,200,.35);
  color:var(--crystal); background:rgba(9,9,14,.75); opacity:.85;
}

/* ── Entscheidungspunkt ────────────────────────────────────── */
.wahl{
  max-width:520px; margin:3.2rem auto; padding:1.5rem;
  border:1px solid rgba(139,111,214,.35); background:rgba(14,11,20,.7);
  text-align:center;
}
.wahl .kopf{
  font-family:'Inter',sans-serif; font-size:.58rem;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--umbra); margin-bottom:1rem;
}
.wahl .frage{
  font-family:'Marcellus',Georgia,serif; font-style:italic;
  font-size:1.05rem; line-height:1.6; margin-bottom:1.5rem; opacity:.9;
}
.wahl .opts{display:flex; flex-direction:column; gap:.7rem}
@media(min-width:560px){.wahl .opts{flex-direction:row}}
.wahl button{
  flex:1; cursor:pointer; padding:.85rem 1rem;
  font-family:'Inter',sans-serif; font-size:.76rem; line-height:1.45;
  color:var(--text); background:transparent;
  border:1px solid rgba(233,230,223,.22); transition:all .2s;
}
.wahl button:hover{border-color:var(--umbra); background:rgba(139,111,214,.12)}
.wahl button[disabled]{cursor:default; opacity:.35}
.wahl button.aktiv{border-color:var(--umbra); background:rgba(139,111,214,.18)}
.wahl .hinweis{
  margin-top:1.2rem; font-family:'Inter',sans-serif; font-size:.64rem;
  letter-spacing:.1em; line-height:1.7; color:rgba(233,230,223,.5); display:none;
}
.wahl .hinweis.an{display:block}
.wahl .hinweis .gespielt{color:var(--crystal)}
.wahl .hinweis .nicht{color:rgba(217,139,139,.85)}
.wahl .sperrhinweis{
  margin-top:1.4rem; font-family:'Inter',sans-serif; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--umbra); opacity:.7;
}
.wahl .sperrhinweis.aus{display:none}
.wahl .andere{
  margin-top:1.1rem; background:none; border:none; padding:.3rem;
  font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(233,230,223,.45);
  text-decoration:underline; text-underline-offset:4px; cursor:pointer; display:none;
}
.wahl .andere.an{display:inline-block}
.wahl .andere:hover{color:var(--crystal)}

/* Alles nach einer Entscheidung bleibt gesperrt, bis gewählt wurde */
.gesperrt{display:none !important}
/* Der Hinweis war vorher blass und kursiv — man hat ihn beim Scrollen
   überlesen und dann Inhalt verpasst, ohne es zu merken. Jetzt ist er
   eine sichtbare Schranke: gerahmt, in Umbra-Farbe, mit einem Pfeil,
   der zurück zur Entscheidung zeigt. */
.sperre{
  max-width:420px; margin:2.5rem auto 7rem; text-align:center;
  font-family:'Inter',system-ui,sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--umbra);
  padding:1.1rem 1.4rem;
  border:1px solid rgba(139,111,214,.45); border-radius:3px;
  background:rgba(139,111,214,.07);
  animation:sperrePuls 2.6s ease-in-out infinite;
}
.sperre::before{
  content:'↑'; display:block; margin-bottom:.5rem;
  font-size:1.15rem; letter-spacing:0; line-height:1;
}
.sperre::after{
  content:'Ohne Entscheidung geht die Episode hier zu Ende.';
  display:block; margin-top:.55rem;
  font-family:'Crimson Pro',Georgia,serif; font-weight:400;
  font-size:1rem; letter-spacing:normal; text-transform:none;
  color:rgba(233,230,223,.62);
}
@keyframes sperrePuls{
  0%,100%{border-color:rgba(139,111,214,.45)}
  50%    {border-color:rgba(139,111,214,.85)}
}
@media (prefers-reduced-motion:reduce){.sperre{animation:none}}

/* ── Szenentrenner mit Ornament ────────────────────────────── */
/* Farbe statt element-opacity: ein transparentes Element würde
   auch seinen eigenen (gleich weiter unten ergänzten) Hintergrund
   mit-abschwächen und die Spine-Linie weiter durchscheinen lassen. */
.scene{
  text-align:center; padding:6.5rem 0 4.5rem;
  font-family:'Inter',sans-serif; font-size:.66rem;
  letter-spacing:.4em; text-transform:uppercase; color:rgba(201,161,90,.6);
}
/* Szene mit Einleitung: Ort, Zeit und ein kurzer Absatz,
   damit man weiß, wo man ist und was inzwischen passiert ist. */
.scene.mitText{padding-bottom:3.2rem}
.scene .ortzeit{
  display:block; margin-top:1.4rem;
  font-size:.6rem; letter-spacing:.24em;
  color:rgba(95,231,200,.7);
}
.scene .einleitung{
  display:block; max-width:42ch; margin:1.5rem auto 0;
  font-family:'Crimson Pro',Georgia,serif; font-size:1.02rem;
  line-height:1.8; letter-spacing:normal; text-transform:none;
  color:rgba(233,230,223,.72);
}
.scene .einleitung + .einleitung{margin-top:1.1rem}

/* ── Rückblick am Episodenanfang ───────────────────────────── */
.rueckblick{
  position:relative; max-width:560px; margin:0 auto 2rem;
  padding:1.6rem 1.8rem;
  border-left:2px solid rgba(201,161,90,.4);
  background:linear-gradient(90deg, rgba(201,161,90,.06), transparent 70%);
}
.rueckblick .kopf{
  font-family:'Inter',sans-serif; font-size:.58rem;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(201,161,90,.85); margin-bottom:.9rem;
}
.rueckblick p{
  margin:0 0 .8rem; font-size:1rem; line-height:1.8; color:rgba(233,230,223,.72);
}
.rueckblick p:last-child{margin-bottom:0}
.rueckblick b{color:var(--crystal); font-weight:400}
.scene::before{
  content:''; display:block; width:160px; height:22px; margin:0 auto 1.6rem;
  opacity:.55;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cg fill='none' stroke='%23c9a15a' stroke-width='1'%3E%3Cpath d='M4 11h52M104 11h52'/%3E%3Cpath d='M60 11l10-6 10 6-10 6z'/%3E%3Cpath d='M80 11l10-6 10 6-10 6z'/%3E%3Ccircle cx='80' cy='11' r='2.4' fill='%23c9a15a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* Eckverzierungen für hervorgehobene Blöcke */
.wurf, .wahl, .cta{position:relative}
.wurf::before, .wurf::after,
.wahl::before, .wahl::after,
.cta::before,  .cta::after{
  content:''; position:absolute; width:18px; height:18px; pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M1 8V1h7' fill='none' stroke='%23c9a15a' stroke-width='1.2'/%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23c9a15a'/%3E%3C/svg%3E");
  opacity:.5;
}
.wurf::before, .wahl::before, .cta::before{top:-1px; left:-1px}
.wurf::after,  .wahl::after,  .cta::after{bottom:-1px; right:-1px; transform:rotate(180deg)}
.wahl::before, .wahl::after{filter:hue-rotate(35deg)}

/* ── Endkarte ──────────────────────────────────────────────── */
.endcard{text-align:center; padding:8rem 0 4rem}
.endcard .next{
  font-family:'Inter',sans-serif; font-size:.66rem;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--umbra); opacity:.8; margin-bottom:1.4rem;
}
.endcard h2{
  font-family:'Cinzel',serif; font-weight:400;
  font-size:clamp(1.5rem,4.6vw,2.5rem); margin:0 0 2.2rem; letter-spacing:.05em;
}
.endcard .go{
  display:inline-block; font-family:'Inter',sans-serif;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  padding:.8rem 1.8rem; border:1px solid rgba(139,111,214,.45);
  color:var(--umbra); text-decoration:none; transition:all .2s;
}
.endcard .go:hover{background:rgba(139,111,214,.12); border-color:var(--umbra)}
.endcard .ende{
  font-family:'Marcellus',serif; font-style:italic;
  opacity:.4; font-size:.95rem;
}

/* ── Offene Fäden ──────────────────────────────────────────── */
.faeden{
  position:relative; max-width:560px; margin:5rem auto 0; padding:1.8rem 1.8rem 1.5rem;
  border:1px solid rgba(139,111,214,.28); background:rgba(14,11,20,.55);
}
.faeden .kopf{
  font-family:'Inter',sans-serif; font-size:.6rem;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--umbra); margin-bottom:1.2rem;
}
.faeden ul{list-style:none; margin:0; padding:0}
.faeden li{
  position:relative; padding:.65rem 0 .65rem 1.6rem;
  font-size:.94rem; line-height:1.65; opacity:.72;
  border-top:1px solid rgba(233,230,223,.07);
}
.faeden li:first-child{border-top:none}
.faeden li::before{
  content:''; position:absolute; left:.1rem; top:1.15rem;
  width:6px; height:6px; border:1px solid var(--umbra); transform:rotate(45deg); opacity:.7;
}
.faeden li b{
  display:block; font-family:'Inter',sans-serif; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--umbra); opacity:.9; margin-bottom:.25rem; font-weight:600;
}
.faeden li.geloest{opacity:.38}
.faeden li.geloest::before{background:var(--crystal); border-color:var(--crystal)}
.faeden li.geloest b{color:var(--crystal)}

/* ── Mitmach-Karte: eigene Entscheidung + Nachricht an Miker ── */

.mitmach{
  position:relative; max-width:640px; margin:6rem auto 0; padding:2.2rem 2rem;
  border:1px solid rgba(201,161,90,.3); background:rgba(15,13,10,.6);
}
.mitmach .kopf{
  font-family:'Inter',sans-serif; font-size:.6rem;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.1rem; text-align:center;
}
.mitmach h3{
  font-family:'Cinzel',serif; font-weight:400; letter-spacing:.03em;
  font-size:clamp(1.2rem,3.2vw,1.6rem); margin:0 0 1rem; text-align:center;
}
.mitmach .lage{
  font-size:.98rem; line-height:1.75; opacity:.7;
  max-width:48ch; margin:0 auto 1.8rem; text-align:center;
}
.mitmach .opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  margin-bottom:.7rem; padding:.9rem 1.1rem;
  background:transparent; border:1px solid rgba(233,230,223,.18);
  font-family:'Inter',sans-serif; font-size:.8rem; line-height:1.5;
  color:var(--text); transition:all .2s;
}
.mitmach .opt:hover{border-color:var(--gold); background:rgba(201,161,90,.08)}
.mitmach .opt.aktiv{border-color:var(--gold); background:rgba(201,161,90,.14)}
.mitmach .opt b{display:block; color:var(--gold); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:.35rem}
.mitmach .opt .regel{
  display:block; margin-top:.45rem; font-size:.7rem;
  color:rgba(95,231,200,.7); letter-spacing:.04em;
}
.mitmach .entwurf{display:none; margin-top:1.8rem}
.mitmach .entwurf.an{display:block}
.mitmach .entwurf label{
  display:block; font-family:'Inter',sans-serif; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--crystal); opacity:.75; margin-bottom:.7rem;
}
.mitmach textarea{
  width:100%; min-height:150px; resize:vertical;
  background:#0a0a0f; color:var(--text);
  border:1px solid rgba(233,230,223,.18); padding:1rem;
  font-family:'Crimson Pro',Georgia,serif; font-size:.92rem; line-height:1.7;
}
.mitmach textarea:focus{outline:none; border-color:rgba(95,231,200,.5)}
.mitmach .aktionen{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.2rem}
.mitmach .aktionen button, .mitmach .aktionen a{
  font-family:'Inter',sans-serif; font-size:.66rem; cursor:pointer;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  padding:.8rem 1.6rem; background:transparent;
  border:1px solid rgba(95,231,200,.4); color:var(--crystal); transition:all .2s;
}
.mitmach .aktionen button:hover, .mitmach .aktionen a:hover{background:rgba(95,231,200,.12)}
.mitmach .aktionen .sekundaer{border-color:rgba(233,230,223,.22); color:rgba(233,230,223,.7)}

/* ── Call to Action: Sourcebook ────────────────────────────── */
.cta{
  max-width:640px; margin:7rem auto 3rem; padding:2.4rem 2rem;
  border:1px solid rgba(95,231,200,.25);
  background:linear-gradient(180deg, rgba(95,231,200,.05), transparent 60%), #0d0d13;
  text-align:center;
}
.cta .kopf{
  font-family:'Inter',sans-serif; font-size:.6rem;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--crystal); opacity:.85; margin-bottom:1.3rem;
}
.cta h3{
  font-family:'Cinzel',serif; font-weight:400; letter-spacing:.04em;
  font-size:clamp(1.3rem,3.6vw,1.9rem); margin:0 0 .6rem;
}
.cta .autor{
  font-family:'Marcellus',serif; font-style:italic;
  color:var(--gold); opacity:.85; margin-bottom:1.6rem; font-size:1rem;
}
.cta p{
  max-width:46ch; margin:0 auto 1.1rem;
  font-size:.98rem; line-height:1.75; opacity:.7;
}
.cta .lizenz{
  font-family:'Inter',sans-serif; font-size:.64rem; letter-spacing:.08em;
  line-height:1.8; opacity:.45; margin-top:1.8rem;
}
.cta .aktionen{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.8rem}
.cta .aktionen a{
  font-family:'Inter',sans-serif; font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  padding:.8rem 1.6rem; border:1px solid rgba(95,231,200,.4);
  color:var(--crystal); transition:all .2s;
}
.cta .aktionen a:hover{background:rgba(95,231,200,.12); border-color:var(--crystal)}
.cta .aktionen a.sekundaer{border-color:rgba(233,230,223,.22); color:rgba(233,230,223,.7)}
.cta .aktionen a.sekundaer:hover{background:rgba(233,230,223,.06)}

/* ── Fortschrittsleiste ────────────────────────────────────── */
.status{
  position:fixed; bottom:0; left:0; right:0; z-index:5;
  font-family:'Inter',sans-serif; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:rgba(9,9,14,.92); border-top:1px solid rgba(95,231,200,.16);
  padding:.55rem 1rem; display:flex; gap:1.4rem;
  justify-content:center; align-items:center; color:rgba(233,230,223,.55);
  backdrop-filter:blur(6px);
}
.status b{color:var(--crystal); font-weight:600}
.bar{width:120px; height:3px; background:rgba(233,230,223,.12); border-radius:2px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--crystal); width:0}

/* ── Übersichtsseite ───────────────────────────────────────── */
.grid{display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:3rem}
@media(min-width:680px){.grid{grid-template-columns:1fr 1fr}}
.card{
  display:block; text-decoration:none; padding:1.8rem;
  border:1px solid rgba(233,230,223,.12); background:#101017;
  transition:border-color .2s, transform .2s;
}
.card:hover{border-color:rgba(95,231,200,.45); transform:translateY(-2px)}
.card .cnr{
  font-family:'Inter',sans-serif; font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold); opacity:.8;
}
.card h3{
  font-family:'Cinzel',serif; font-weight:400; letter-spacing:.03em;
  font-size:1.5rem; margin:.7rem 0 .9rem;
}
.card p{margin:0 0 1.2rem; font-size:.95rem; opacity:.55; line-height:1.6}
.card .meta{
  font-family:'Inter',sans-serif; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.45;
  display:flex; align-items:center; gap:.7rem;
}
.card .meta .bar{width:64px}
.card.leer{opacity:.45}
.card.leer:hover{transform:none; border-color:rgba(233,230,223,.12)}

.legende{
  margin:5rem auto 0; max-width:52ch; font-size:.92rem;
  line-height:1.75; opacity:.5;
}
.legende h4{
  font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--crystal); opacity:.8;
  margin:0 0 1rem; font-weight:600;
}

@media(max-width:560px){
  .status{gap:.8rem; font-size:.56rem}
  .bubble{max-width:60%}
  .topbar{font-size:.56rem; letter-spacing:.14em}
}

/* Panel, dessen Render noch aussteht — sichtbar als geplant markiert */
.ph.geplant{border-style:dashed; border-color:rgba(95,231,200,.22)}
.ph.geplant::after{
  content:'Render ausstehend';
  position:absolute; bottom:.85rem; left:50%; transform:translateX(-50%);
  font-family:'Inter',sans-serif; font-size:.55rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(95,231,200,.4);
}

/* ── Outtakes-Karte auf der Uebersicht ───────────────────────
   Steht als einzelne Karte unter dem Episodenraster und soll sich
   als Werkstattbericht klar von den Episoden absetzen: goldene statt
   kristallfarbener Akzente, volle Breite. */
.card.outtakes{
  display:block; margin-top:26px;
  border-color:rgba(201,161,90,.34);
  background:linear-gradient(180deg, rgba(201,161,90,.05), transparent 70%);
}
.card.outtakes .cnr{color:var(--gold)}
.card.outtakes:hover{border-color:rgba(201,161,90,.65)}

/* ── Wahl: Auflösung bei der nicht gespielten Option ─────────
   Es gibt keine Panels für Verläufe, die es nie gab. Wer die andere
   Option wählt, bekommt stattdessen einen Satz dazu, was wirklich
   passiert ist — und liest dann im echten Verlauf weiter. */
.wahl .hinweis .stattdessen{
  display:block; margin-top:.6rem; padding-top:.6rem;
  border-top:1px solid rgba(233,230,223,.12);
  color:var(--text);
}
.wahl .opts button[disabled]{cursor:default}
.wahl .opts button[disabled]:not(.aktiv){opacity:.45}

/* ── Sockel: Dialogleiste unter dem Bild ─────────────────────
   Für Panels, deren Motiv das ganze Bild füllt (Gesichts-Makros,
   Diptychen aus zwei Porträts). Statt die Blase auf Augen oder Mund
   zu legen, bekommt das Panel unten einen ruhigen Streifen. */
.panel .sockel{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px 16px; background:var(--bg); line-height:1.5;
}
.panel .sockel .bubble{
  position:static; max-width:none; flex:1 1 0; margin:0;
}
/* Ein einzelner Sprecher soll nicht über die ganze Breite laufen */
.panel .sockel .bubble:only-child{max-width:min(52ch,72%)}
@media (max-width:640px){
  .panel .sockel{flex-direction:column; gap:8px}
  .panel .sockel .bubble{max-width:none}
}

/* ── Entstehungsgeschichte auf der Startseite ────────────────
   Der Webtoon ist das Ergebnis, nicht das Erlebnis. Das Erlebnis war:
   ein fremdes Regelwerk als PDF, drei Sätze an ein Sprachmodell, eine
   Figur, und dann Monate Spiel. Diese Sektion erzählt genau das, mit
   Belegen statt Behauptungen. */
.entstehung{margin:5.5rem 0 4rem}
.entstehung > h2{
  font-family:'Cinzel',serif; font-weight:600; font-size:1.9rem;
  text-align:center; margin:0 0 .6rem; letter-spacing:.02em;
}
.entstehung > .unter{
  text-align:center; color:var(--dim); font-style:italic;
  max-width:640px; margin:0 auto 3.5rem; font-size:1.05rem;
}
.schritt{
  display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:2.2rem;
  align-items:center; margin:0 0 3.2rem;
}
.schritt:nth-child(even) .bild{order:2}
.schritt .bild{position:relative}
.schritt .bild img{
  width:100%; height:auto; display:block; border-radius:3px;
  box-shadow:0 14px 44px rgba(0,0,0,.6);
}
.schritt .nr{
  font-family:'Inter',sans-serif; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.5rem;
}
.schritt h3{
  font-family:'Marcellus',serif; font-weight:400; font-size:1.45rem;
  margin:0 0 .7rem;
}
.schritt p{margin:0 0 .8rem; color:rgba(233,230,223,.86)}
.schritt p:last-child{margin-bottom:0}

/* Der erste Prompt — bewusst wie ein Chatfenster, nicht wie Prosa */
.prompt{
  border:1px solid rgba(95,231,200,.22); border-radius:4px;
  background:rgba(95,231,200,.04); padding:1.1rem 1.3rem;
  font-family:'Inter',system-ui,sans-serif; font-size:.94rem; line-height:1.65;
}
.prompt .zeile{display:block; color:var(--text)}
.prompt .zeile + .zeile{margin-top:.45rem}
.prompt .datei{
  color:var(--crystal); font-size:.8rem; letter-spacing:.02em;
  display:inline-block; padding:.15rem .5rem; border-radius:2px;
  background:rgba(95,231,200,.1); border:1px solid rgba(95,231,200,.2);
}
.prompt .antwort{
  display:block; margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid rgba(233,230,223,.1);
  color:var(--dim); font-style:italic;
}

/* Fate-Aspekte als Karteikarten */
.aspekte{list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.5rem}
.aspekte li{
  padding:.55rem .8rem; border-left:2px solid rgba(139,111,214,.5);
  background:rgba(139,111,214,.05); font-style:italic;
  font-size:.97rem; color:rgba(233,230,223,.9);
}
.aspekte li b{
  display:block; font-style:normal; font-family:'Inter',sans-serif;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--umbra); margin-bottom:.15rem;
}
@media (max-width:700px){
  .schritt{grid-template-columns:1fr; gap:1.3rem}
  .schritt:nth-child(even) .bild{order:0}
}

/* ── Call-to-Action zwischen Entstehung und Episodenliste ────
   Nach der Entstehungsgeschichte muss klar sein, wo es losgeht.
   Bewusst der einzige gefuellte Button der Seite. */
.losgehts{
  text-align:center; margin:1rem 0 4.5rem;
  position:relative; background:var(--bg);
}
.losgehts a{
  display:inline-block; text-decoration:none;
  font-family:'Inter',system-ui,sans-serif; font-weight:600;
  font-size:.9rem; letter-spacing:.14em; text-transform:uppercase;
  color:#08110f; background:var(--crystal);
  padding:1.05rem 2.6rem; border-radius:3px;
  transition:transform .18s ease, box-shadow .3s ease, background .18s ease;
}
.losgehts a:hover{
  transform:translateY(-2px); background:#7ff0d8;
  box-shadow:0 10px 34px rgba(95,231,200,.28);
}
.losgehts a:focus-visible{outline:2px solid var(--crystal); outline-offset:4px}
.losgehts .dazu{
  display:block; margin-top:.9rem; color:var(--dim);
  font-size:.95rem; font-style:italic;
}

/* Quellenangabe direkt am Bild — das Sourcebook-Cover stammt nicht aus
   diesem Projekt, sondern ist die Vorlage, mit der alles anfing. */
.schritt .quellenangabe{
  margin:.7rem 0 0; font-size:.78rem; line-height:1.5;
  color:var(--dim); font-family:'Inter',system-ui,sans-serif;
}

/* ── Zurück-Button (bottom-left, auf Höhe von Philosophie) ────────── */
.back-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(232, 230, 220, 0.35);
    color: rgba(250, 249, 245, 0.75);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.back-btn::before {
    content: '←';
    font-size: 13px;
    transition: transform 0.18s ease;
}

.back-btn:hover {
    border-color: rgba(250, 249, 245, 0.75);
    color: var(--anthropic-light);
    background: rgba(250, 249, 245, 0.06);
}

.back-btn:hover::before { transform: translateX(-3px); }

.back-btn:focus-visible {
    outline: 2px solid var(--anthropic-light);
    outline-offset: 3px;
}

/* ── Vorwärts-Button (bottom-right) ──────────────────────────── */
.next-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(232, 230, 220, 0.35);
    color: rgba(250, 249, 245, 0.75);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.next-btn::after {
    content: '→';
    font-size: 13px;
    transition: transform 0.18s ease;
}

.next-btn:hover {
    border-color: rgba(250, 249, 245, 0.75);
    color: var(--anthropic-light);
    background: rgba(250, 249, 245, 0.06);
}

.next-btn:hover::after { transform: translateX(3px); }

.next-btn:focus-visible {
    outline: 2px solid var(--anthropic-light);
    outline-offset: 3px;
}