/* PCFOX V15 — Orientierung, Handy-Komposition, ruhigere Typografie. Wird nach v11.css geladen.
   · Kapitel-Punkte: zeigt, wie viele Aussagen ein Kapitel hat und wo man steht (Grund weiterzuscrollen)
   · „Weiter“-Hinweis am Kapitelende: nennt das nächste Kapitel (Grund weiterzuscrollen), nur Desktop
   · Handy: Bild oben, Text beginnt direkt darunter (gleiche Einsatzhöhe in jedem Abschnitt) – kein schwarzes Loch dazwischen
   · Nur transform/opacity werden animiert; keine neuen backdrop-filter */

/* ═══ Leistung: Unsichtbares kostet nichts ═══
   · Die Aurora ist im Film verdeckt (opacity/visibility), ihre drei Animationen liefen trotzdem im Hauptthread weiter (180 Stil-Läufe/s im Stand).
   · Kapitel, die mehr als einen Kapitel-Schritt entfernt sind, werden nicht gerendert (content-visibility): Stil, Layout, Paint und Treffertest
     überspringen ~85 % der Seite. reel.js setzt is-far rechtzeitig VOR dem Betreten, damit Texte und Oberflächen ihre Einblend-Übergänge behalten. */
.film-on .aurora i{animation:none!important}
.reel.is-film .chap.is-far,.reel__layer .onimg.is-far{content-visibility:hidden}

/* ═══ Kapitel-Punkte im Sektionstitel ═══ */
.reel__label .dots{display:flex;align-items:center;gap:5px;margin-left:6px}
.reel__label .dots s{display:block;width:12px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);transition:background .5s ease,transform .5s var(--e-out,cubic-bezier(.16,1,.3,1));transform-origin:0 50%}
.reel__label .dots s.is-done{background:rgba(195,178,255,.5)}
.reel__label .dots s.is-on{background:var(--lavender);transform:scaleX(2.1)}
.reel__label .dots:empty{display:none}
.reel__mdots{display:none}

/* ═══ „Weiter“-Hinweis am Ende eines Kapitels ═══ */
.reel__next{position:fixed;z-index:7;left:50%;bottom:clamp(18px,3.2vh,34px);translate:-50% 0;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 20px;border-radius:999px;
  font-size:11.5px;font-weight:620;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,245,247,.9);background:rgba(12,12,18,.62);border:1px solid rgba(255,255,255,.14);
  opacity:0;visibility:hidden;transform:translate3d(0,10px,0);pointer-events:none;
  transition:opacity .5s ease,transform .7s var(--e-out,cubic-bezier(.16,1,.3,1)),border-color .3s ease,visibility 0s linear .7s}
.reel__next.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .6s ease .15s,transform .8s var(--e-out,cubic-bezier(.16,1,.3,1)) .15s,border-color .3s ease,visibility 0s}
.reel__next small{font:inherit;color:rgba(245,245,247,.5);letter-spacing:.16em}
.reel__next b{font-weight:640;letter-spacing:.12em;color:#fff}
.reel__next i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(138,92,255,.28)}
.reel__next i svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reel__next.is-on i svg{animation:nxt 2s ease-in-out infinite}
@keyframes nxt{0%,60%,100%{transform:translate3d(0,0,0)}30%{transform:translate3d(0,3px,0)}}
.reel__next:hover{border-color:rgba(195,178,255,.5)}
.reel__next:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}
.reel:not(.is-film) .reel__next{display:none}
@media (prefers-reduced-motion:reduce){.reel__next.is-on i svg{animation:none}}

/* ═══ Handy & Tablet hoch: Bild oben, Text unmittelbar darunter ═══ */
@media (max-width:860px){
  .reel__next{display:none}
  .reel__stage canvas{height:62%;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  /* Text beginnt immer auf derselben Höhe (unter dem auslaufenden Bild) statt unten zu kleben: kein Loch zwischen Bild und Text, ruhiger Rhythmus beim Scrollen */
  .reel.is-film .beat:not(.beat--hero){top:calc(62svh - 34px);bottom:auto;max-height:calc(38svh + 22px - env(safe-area-inset-bottom));overflow:visible}
  .reel.is-film[data-card="1"] .beat:not(.beat--hero){bottom:auto}
  .reel__label{top:clamp(76px,10vh,96px)}
  /* Kapitel-Punkte über dem Text (dort ist der Sektionstitel ausgeblendet) */
  .reel.is-film .reel__mdots{position:fixed;z-index:7;left:16px;top:calc(62svh - 52px);display:flex;gap:5px;opacity:0;pointer-events:none;transition:opacity .5s ease}
  .reel.is-film .reel__mdots.is-on{opacity:1}
  .reel__mdots s{display:block;width:12px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);transition:background .5s ease,transform .5s cubic-bezier(.16,1,.3,1);transform-origin:0 50%}
  .reel__mdots s.is-done{background:rgba(195,178,255,.5)}
  .reel__mdots s.is-on{background:var(--lavender);transform:scaleX(2.1)}
  /* Download-Knöpfe (Fernwartung) kompakt nebeneinander, damit sie nicht unter die Karte laufen */
  .reel.is-film .t-dl .downloads{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .reel.is-film .t-dl .dl{padding:10px 12px;gap:8px}
  .reel.is-film .t-dl .dl small,.reel.is-film .t-dl .dl i{display:none}
  .beat h2,.beat--desk h2,.beat--compact h2{line-height:.98;letter-spacing:-.04em}
  .beat .lede{line-height:1.5;color:rgba(245,245,247,.74);max-width:30em}
}

/* ═══ Handy quer (niedrige Fenster): Bild füllt die Bühne, Text links unten – wie am Desktop, nur kompakter.
   Die Hochformat-Anordnung (Bild oben, Text darunter) passt hier nicht: es blieben ~150 px für den Text. ═══ */
@media (orientation:landscape) and (max-height:520px){
  .reel__stage canvas{height:100%;-webkit-mask-image:none;mask-image:none}
  .reel__veil{background:linear-gradient(90deg,rgba(5,5,7,.78),rgba(5,5,7,.34) 46%,rgba(5,5,7,0) 70%),linear-gradient(0deg,rgba(5,5,7,.7),rgba(5,5,7,0) 42%)}
  .reel.is-film .beat:not(.beat--hero),.reel.is-film[data-card="1"] .beat:not(.beat--hero){top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:calc(18px + env(safe-area-inset-left));right:auto;width:min(48vw,430px);max-height:none}
  .beat h2,.beat--desk h2,.beat--compact h2{margin-top:6px;font-size:clamp(22px,7vh,34px)}
  .beat .eyebrow{font-size:10px}
  .beat .lede{margin-top:8px;font-size:12.5px;line-height:1.45}
  .reel[data-card="1"] .beat .lede{display:block}
  .reel.is-film .readon{left:auto;right:calc(16px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));width:min(300px,36vw);padding:12px 14px 10px}
  .reel.is-film .panel,.reel.is-film .panel--m365,.reel.is-film .panel--topo,.reel.is-film .panel--veeam,.reel.is-film .panel--kplan,.reel.is-film .feeds,.reel.is-film .win,.reel.is-film .hud{display:none}
  .reel.is-film .reel__mdots{display:none}
  .reel__label{display:flex;top:10px;font-size:10px}
  .beat--hero{padding:0 18px calc(18px + env(safe-area-inset-bottom));justify-content:flex-end}
  .beat--hero .hero__title{font-size:clamp(40px,14vh,64px)}
  .hero__foot{margin-top:12px}
  .hero__hint{display:none}
}

/* ═══ Etwas mehr Luft und Kontrast im Text (Desktop) ═══ */
.beat .lede{text-wrap:pretty}
.beat .eyebrow{margin-bottom:2px}
@media (min-width:861px){
  .reel.is-film .beat:not(.beat--hero):not(.beat--opener) .lede{color:rgba(245,245,247,.78)}
}

/* V17n: Bildschirm-Oberflaechen (z. B. Raumpanel) verschwinden beim Verlassen des Abschnitts sofort – kein Nachleuchten ueber dem naechsten Bild */
.reel__layer .scr:not(.is-on){opacity:0!important;visibility:hidden!important;transition:none!important}