/* PCFOX V21 – Finale (David 12.10.): Titel in hellem, transparentem Lila · Kinomodus-Knopf · ruhigeres Text-Timing im Kinomodus.
   Wird auf allen Seiten zuletzt geladen. Nur transform/opacity animiert, keine Unschärfe-, Schatten- oder backdrop-Effekte (Leistung, V19-Regel). */
:root{--v21-title:rgba(228,217,255,.97);--v21-title2:rgba(196,174,255,.56);--v21-line:rgba(201,184,255,.55)}

/* Titel: erste Zeile helles Lila, zweite Zeile transparentes Lila (gleiche Transparenz wie bisher das Grau) */
.reel .beat h2,.reel .beat:not(.beat--hero) h2,.reel.is-film h2.say,main h1,main h2,.topic__head h2{color:var(--v21-title)}
.reel .beat:not(.beat--hero) h2 > span:not(.w),main h1 span:not(.w):not(.wi),main h2 span:not(.w):not(.wi){color:var(--v21-title2)}
.reel .beat h2 .w,.reel .beat h2 .wi{color:inherit}
/* ältere Regeln mit eigener Titelfarbe (Unterseiten, Web-Kapitel, Rechtsseiten-Titel, Film-Zeilen, Kontakt, Team) – gleich stark überschreiben */
.page-hero h1,.web__head h1,.page h1,.legal-page h1,.contact2.tc .contact2__head h2,.contact2.tc .contact2__head h1,.crew h2,
.reel.is-film .t-say h2.say,.reel.is-film .t-line h2.say,.reel.is-film .t-swap h2.say,.reel.is-film .t-mark h2.say{color:var(--v21-title)}
.page-hero h1 span,.web__head h1 span,.page h1 span,.legal-page h1 span,.beat h2 span:not(.w):not(.wi),.chap--v11 h2 span:not(.w):not(.wi),
.contact2.tc .contact2__head h2 > span:not(.w),.contact2.tc .contact2__head h1 > span:not(.w){color:var(--v21-title2)}

/* Kinomodus-Knopf: unten rechts, ruhig; feine Linie füllt sich über die Lesezeit */
.reel__auto{position:fixed;z-index:8;right:clamp(16px,2.4vw,36px);bottom:clamp(18px,3.2vh,34px);display:flex;align-items:center;gap:10px;
  height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(201,184,255,.22);background:rgba(10,10,16,.58);color:rgba(245,245,247,.88);
  font:600 12px/1 inherit;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;overflow:hidden;
  opacity:0;visibility:hidden;transform:translate3d(0,8px,0);pointer-events:none;
  transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),border-color .3s ease,visibility 0s linear .7s}
.reel__auto.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .6s ease .2s,transform .8s cubic-bezier(.16,1,.3,1) .2s,border-color .3s ease,visibility 0s}
.reel__auto:hover{border-color:rgba(201,184,255,.5)}
.reel__auto:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.reel__auto i{position:relative;width:18px;height:18px;border-radius:50%;background:rgba(138,92,255,.3);flex:none}
.reel__auto i::before,.reel__auto i::after{content:"";position:absolute;top:5px;width:2px;height:8px;border-radius:1px;background:#e4dcff}
.reel__auto i::before{left:6px} .reel__auto i::after{left:10px}
.reel__auto[data-state="paused"] i::before,.reel__auto[data-state="end"] i::before{left:7px;top:5px;width:0;height:0;border-radius:0;background:none;
  border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #e4dcff}
.reel__auto[data-state="paused"] i::after,.reel__auto[data-state="end"] i::after{display:none}
.reel__auto b{position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:rgba(255,255,255,.08);overflow:hidden}
.reel__auto s{display:block;height:100%;background:var(--v21-line);transform:scaleX(0);transform-origin:0 50%}
/* im Kinomodus übernimmt der Film den Weg – der «Weiter»-Hinweis wird nicht gebraucht */
.reel.is-auto .reel__next{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Kinomodus: Text erscheint nach der Fahrt – ruhiger, edler Ablauf (Bereichsname → Titel Wort für Wort aus der Maske → Absatz) */
.reel.is-auto.is-film .beat.is-on .wi{transition:opacity .7s ease,transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 55ms + 80ms)}
.reel.is-auto.is-film .beat.is-on .w--eb .wi{transition-delay:calc(var(--i) * 35ms)}
.reel.is-auto.is-film .beat.is-on .w--l .wi{transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 12ms + 520ms)}
.reel.is-auto.is-film .beat.is-on .lede.t-block{transition:opacity .9s ease .5s,transform 1.1s cubic-bezier(.16,1,.3,1) .5s}

@media (max-width:860px){
  /* Handy: runder Knopf ohne Text rechts auf Höhe der Kapitel-Striche (Lücke zwischen Bild und Text) – unten lag er über der «Weiterlesen»-Karte */
  .reel__auto{right:16px;bottom:auto;top:calc(62svh - 66px);width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}
  .reel__auto span,.reel__auto b{display:none}
}
@media (prefers-reduced-motion:reduce){.reel__auto{display:none}}

/* Lesbarkeit über hellen Szenen (Werkstatt, heller Raum): weiche Kino-Vignette unten links hinter dem Text – fest, nicht animiert */
@media (min-width:861px){
  .reel__veil::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(115% 95% at 0% 100%,rgba(5,5,7,.68) 0%,rgba(5,5,7,.46) 30%,rgba(5,5,7,.16) 54%,rgba(5,5,7,0) 72%)}
}

/* Kinomodus: der Film läuft von selbst – kein «Scrollen»-Hinweis */
.reel.is-auto .hero__hint{opacity:0!important;visibility:hidden}

/* V23 (David 14.10.: «Titel besser lesbar»): Abdunklung hinter dem Textblock je Szene (reel.js setzt die Deckkraft aus STORY.scrim, gemessen an der
   Helligkeit dort). Fest, nur die Deckkraft blendet beim Szenenwechsel über – keine Unschärfe, kein Schatten. Handy: Text steht unter dem Bild. */
.reel__scrim{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(78% 92% at 10% 68%,rgba(5,5,7,.74) 0%,rgba(5,5,7,.58) 36%,rgba(5,5,7,.26) 60%,rgba(5,5,7,0) 80%)}
@media (max-width:860px){.reel__scrim{display:none}}