/* PCFOX V11 — Kapitel Willkommen → Sicherheit: Komposition statt Schleier, ein Element pro Bild, Opener-Wort, Takt.
   Positionen wechseln je Beat (links unten / Mitte / rechts oben); Texte kommen in 240–480 ms ohne Unschärfe, wenn die Kamera steht. */

/* Kein Dreifach-Schleier über den neuen Kapiteln: die Welt ist dunkel, die Bildschirme hell; Text liegt auf der dunklen Bildseite.
   Helle Nahaufnahmen bekommen nur den lokalen Scrim links unten (deskflag, siehe v6.css). */
.reel[data-chapter="home"] .reel__veil,.reel[data-chapter="praezision"] .reel__veil,.reel[data-chapter="cloud"] .reel__veil,
.reel[data-chapter="intune"] .reel__veil,.reel[data-chapter="sicherheit"] .reel__veil,.reel[data-chapter="endpoint"] .reel__veil{background:none}

/* V12: helles Büro – der Titel braucht links einen lokalen Scrim (≤ 56 % Breite, weich), die Fahrt bleibt rechts frei. */
.reel__stage[data-desk="hero"] .reel__veil::after{opacity:1;background:linear-gradient(90deg,rgba(5,5,7,.82),rgba(5,5,7,.56) 22%,rgba(5,5,7,.2) 42%,rgba(5,5,7,0) 58%)}

/* ═══ Opener: ein Wort in 9–12 vw, darunter höchstens eine Zeile ═══ */
.reel.is-film .beat--opener{left:var(--gutter);right:calc(var(--gutter) + 60px);top:50%;bottom:auto;width:auto;translate:0 -50%}
.beat--opener .opener{margin:0;font-size:clamp(64px,10.5vw,210px);line-height:.9;font-weight:640;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.beat--opener .lede{margin-top:22px;max-width:30em;font-size:clamp(17px,1.3vw,22px)}
/* Variante links unten (über hellen Nahaufnahmen, auf dem lokalen Scrim): kleiner, bündig mit den übrigen Texten */
.reel.is-film .beat--opener.at-bl{top:auto;bottom:clamp(56px,11vh,124px);right:auto;width:min(640px,44vw);translate:none}
.beat--opener.at-bl .opener{font-size:clamp(48px,7vw,140px)}
.beat--opener.at-bl .lede{margin-top:16px;max-width:28em}

/* ═══ Haltepunkt-Teile: genau ein Pin je Bild, Beschriftung sofort sichtbar (kein Darüberfahren nötig) ═══ */
.pins--one .pin b{opacity:1;visibility:visible;translate:0 -50%;scale:var(--ls,1);font-size:14px;font-weight:600;padding:8px 14px}

/* Zweite Zeile im Film heller (Kontrast), Lede höchstens zwei Zeilen */
.chap--v11 h2 span{color:rgba(245,245,247,.72)}
.chap--v11 .beat .lede{max-width:26em}
.chap--v11 .beat--welcome h2{font-size:clamp(44px,5.4vw,104px)}

/* ═══ Handy & Tablet hoch: Opener steht wie die übrigen Texte unter dem Film ═══ */
@media (max-width:860px){
  .reel.is-film .beat--opener,.reel.is-film .beat--opener.at-bl{left:16px;right:16px;top:auto;bottom:calc(20px + env(safe-area-inset-bottom));width:auto;translate:none}
  .beat--opener .opener,.beat--opener.at-bl .opener{font-size:clamp(40px,12vw,64px)}
  .beat--opener .lede,.beat--opener.at-bl .lede{margin-top:12px;font-size:15px}
}

/* ═══ V12 Kapitel 2: schwebender Laptop auf Schwarz – Text klein links unten, Hover-Pins am Bauteil ═══ */
.chap--hw .beat--opener.at-bl{width:min(430px,30vw)}
.chap--hw .beat--opener .opener{font-size:clamp(44px,5.4vw,112px)}
.chap--hw .beat.hw-text{width:min(430px,30vw)}
.chap--hw .beat.hw-text h2.say{font-size:clamp(26px,2.6vw,48px)}
.pins--hw .pin b{font-size:14px;font-weight:600;padding:8px 14px;background:rgba(10,10,15,.9)}
.pins--hw .pin i{box-shadow:0 0 0 5px rgba(195,178,255,.28),0 2px 10px rgba(0,0,0,.4)}

/* ═══ V12 Kapitel 3 im Stil der Infrastruktur-Seite: Text wie überall (kein Glaskasten); Ablauf-Ketten, Kennzahlen und App-Kacheln stehen als schmale Spalte links neben dem Motiv (nicht auf den Bildschirmen im Film) ═══ */
.reel.is-film .topo2.flow3,.reel.is-film .topo2.apps3,.reel.is-film .topo2.kpis3{top:clamp(170px,22vh,220px);left:var(--gutter);width:min(262px,21vw);height:auto}
.flow3{display:grid;gap:15px;justify-items:start;align-content:start}
/* V23e: auf niedrigen Bildschirmen (Laptop 1366x768, 1280x720) traf die 5. Zeile den Titel unten -> Liste höher und kompakter */
/* V27b: Listen/Kennzahlen/Kacheln werden per --fit (reel.js fitPanes) verkleinert, wenn sie sonst in den Text ragen */
@media (min-width:861px){.reel.is-film .topo2.flow3,.reel.is-film .topo2.apps3,.reel.is-film .topo2.kpis3{transform-origin:0 0;scale:var(--fit,1)}}
@media (min-width:861px) and (max-height:860px){
  /* V26 (David 17.10.: «Struktur verbuggt»): die Liste lag in der Kapitelleiste (Leiste 92–128 px, Liste ab 108–115 px) -> unter die Leiste
     (Leiste oben + 52 px) und kompaktere Zeilen, damit die letzte Zeile weiter über dem Titel bleibt */
  .reel.is-film .topo2.flow3,.reel.is-film .topo2.apps3,.reel.is-film .topo2.kpis3{top:calc(clamp(92px,12vh,120px) + 52px)}
  .flow3{gap:5px}
  .flow3 .fn{padding:5px 12px 5px 7px;font-size:12.5px}
  .flow3 .fn .glyph{width:24px;height:24px}
  .kpis3{gap:7px}.kpis3 .kpi{padding:7px 14px}.kpis3 .kpi b{margin-top:2px;font-size:20px}.kpis3 .kpi span{display:none}
  /* Text darunter: tiefer und kompakter, damit die letzte Zeile der Liste (bis 6 Zeilen) nicht in den Titel läuft */
  .reel.is-film .beat:not(.beat--hero):not(.beat--opener):not(.beat--top){bottom:40px}
  .chap--hw .beat.hw-text h2{font-size:min(4.4vw,7vh)}
  .reel.is-film .beat:not(.beat--hero):not(.beat--opener) .lede{margin-top:10px}
}
@media (min-width:861px) and (max-height:760px){
  .flow3 .fn{padding:4px 11px 4px 6px;font-size:12px}
  .flow3 .fn .glyph{width:22px;height:22px}
  .reel.is-film .beat:not(.beat--hero):not(.beat--opener):not(.beat--top){bottom:30px}
}
.fn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:12px;background:rgba(12,12,18,.84);border:1px solid rgba(255,255,255,.13);
  font-size:13px;font-weight:560;color:#fff;white-space:nowrap;opacity:0;transform:translate3d(-8px,0,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-smooth)}
.fn.is-on{opacity:1;transform:none}
.fn .glyph{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:rgba(160,130,255,.16)}
.topo2 .fn .glyph{position:static!important;transform:none!important}
.topo2 .fn .glyph svg{position:static;inset:auto;width:15px;height:15px;overflow:hidden;fill:none;stroke:var(--lavender);stroke-width:1.7}.fn .glyph img{width:18px;height:18px;object-fit:contain}
.topo2.flow3 .fl{position:absolute;inset:18px auto 18px 22px;width:2px;height:auto;overflow:visible;z-index:0;clip-path:inset(0 0 calc((1 - var(--sp,0)) * 100%) 0)}
.flow3 .fl .tl{fill:none;stroke:rgba(195,178,255,.6);stroke-width:1.4;vector-effect:non-scaling-stroke}
.apps3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.app3,.kpi{border-radius:14px;background:rgba(12,12,18,.84);border:1px solid rgba(255,255,255,.12);opacity:0;transform:translate3d(-8px,0,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-smooth)}
.app3.is-on,.kpi.is-on{opacity:1;transform:none}
.app3{display:grid;justify-items:center;gap:7px;padding:12px 4px 10px}
.app3 img{width:28px;height:28px;object-fit:contain}.app3 b{font-size:11.5px;font-weight:600;color:#fff}
.kpis3{display:grid;gap:9px}
.kpi{padding:11px 16px 11px}
.kpi small{display:block;font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:rgba(195,178,255,.85)}
.kpi b{display:block;margin-top:5px;font-size:25px;font-weight:620;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}.kpi b i{font-style:normal}
.kpi span{display:block;margin-top:2px;font-size:11.5px;color:rgba(245,245,247,.6)}
.reel[data-chapter="sicherheit"] .reel__stage[data-desk="screens"] .reel__veil::after,
.reel[data-chapter="intune"] .reel__stage[data-desk="screens"] .reel__veil::after{background:linear-gradient(0deg,rgba(4,5,8,.62),rgba(4,5,8,.3) 20%,rgba(4,5,8,.06) 36%,rgba(4,5,8,0) 46%),
  linear-gradient(90deg,rgba(4,5,8,.4),rgba(4,5,8,.16) 20%,rgba(4,5,8,0) 34%)}   /* Dämmerung ist schon dunkel: nur noch ein leichter Grund unter dem Text */
.reel[data-chapter="praezision"] .reel__label{padding:8px 16px 8px 14px;border-radius:999px;background:rgba(14,12,26,.44);border:1px solid rgba(255,255,255,.16);color:rgba(245,245,247,.92);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}   /* Kapitelzähler liegt im hellen Lagerraum auf Weiss */
@media (max-width:860px){
  .chap--hw .beat.hw-text,.chap--hw .beat--opener.at-bl{width:auto}   /* Handy: volle Textbreite (die 30vw der Desktop-Regeln stauchten den Text) */
  .reel.is-film .topo2.flow3,.reel.is-film .topo2.apps3,.reel.is-film .topo2.kpis3{top:74px;left:12px;right:12px;width:auto;height:auto}   /* Handy: Einblendungen kompakt über dem Film */
  .flow3{display:flex;flex-wrap:wrap;gap:7px}.flow3 .fl{display:none}.fn{font-size:12px;padding:6px 11px 6px 7px}
  .kpis3{grid-template-columns:repeat(3,1fr);gap:6px}.kpi{padding:8px 10px}.kpi b{font-size:18px;margin-top:3px}.kpi small{font-size:9px}.kpi span{display:none}
  .apps3{gap:6px}.app3{padding:8px 2px 7px}.app3 img{width:22px;height:22px}.app3 b{font-size:10.5px}
}

/* ═══ V12 Kapitel 1/2 im Stil der Infrastruktur-Seite ═══ */
.pins--home .pin b{font-size:13px;font-weight:600;padding:7px 13px}
.chap--hw .beat.hw-text{width:min(560px,38vw)}   /* Überschriften wie auf der Infrastruktur-Seite: zwei bis drei Zeilen */
.chap--hw .beat.hw-text h2{font-size:clamp(38px,4.4vw,78px)}
@media (max-width:860px){.chap--hw .beat.hw-text{width:auto}}
.reel.is-film .flow3--hw{width:min(470px,32vw)}
.chap--home .beat .pinhint,.chap--hw .beat .pinhint{margin-top:16px}

/* ═══ V13: Abend-Schreibtisch (ESET, Authenticator) innerhalb von Hardware & Software – leichter Textgrund statt des starken Lagerraum-Verlaufs ═══ */
.reel__stage[data-desk="dusk"] .reel__veil::after{opacity:1;background:linear-gradient(0deg,rgba(4,5,8,.62),rgba(4,5,8,.3) 20%,rgba(4,5,8,.06) 36%,rgba(4,5,8,0) 46%),
  linear-gradient(90deg,rgba(4,5,8,.4),rgba(4,5,8,.16) 20%,rgba(4,5,8,0) 34%)}
@media (max-width:860px){.reel__veil::after{display:none}}

/* ═══ V14e: Raumanzeige (frühere Oberfläche, verbessert) ═══ */
.ui-panel{grid-template-columns:1.18fr 1fr;background:#0e0f12}
.ui-panel .rp-state{position:relative;gap:10px;padding:0 38px;background:linear-gradient(160deg,#17a058,#0f7a44);transition:background 1s cubic-bezier(.4,0,.2,1)}
.ui-panel .rp-state::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 45%);pointer-events:none}
.ui-panel .rp-state small{font-size:26px;letter-spacing:.02em;opacity:.85}
.ui-panel .rp-title{min-height:96px;align-items:center}
.ui-panel .rp-title b{line-height:1.02;font-weight:620;letter-spacing:-.03em}
.ui-panel .rp-title b.rp-free{font-size:92px}
.ui-panel .rp-title b.rp-busy{font-size:56px}
.ui-panel .rp-sub{min-height:34px}
.ui-panel .rp-sub span{font-size:26px;opacity:.94}
.ui-panel .rp-side{gap:22px;padding:0 34px}
.ui-panel .rp-side time{font-size:72px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-height:80px;align-items:center}
.ui-panel .rp-side time span{font-size:inherit;color:inherit}
.ui-panel .rp-side p{gap:6px}
.ui-panel .rp-side p small{font-size:21px;letter-spacing:.03em;color:rgba(255,255,255,.58);min-height:26px}
.ui-panel .rp-side p small span{font-size:inherit;color:inherit}
.ui-panel .rp-side p b{font-size:34px;font-weight:620;letter-spacing:-.01em}
.ui-panel .rp-side p > span{font-size:24px;color:rgba(255,255,255,.8)}
.ui-panel .rp-side em{align-self:flex-start;min-width:220px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-size:24px;font-weight:560;text-align:center;transition:background .8s ease,border-color .8s ease}
.ui-panel .rp-side em span{display:flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;font-size:inherit;color:inherit}
/* Zwei Zustände übereinander, Überblendung statt Sprung */
.ui-panel .rp-stack{display:grid}
.ui-panel .rp-stack > *{grid-area:1/1;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ui-panel .rp-busy{display:revert}
.ui-panel .rp-stack > .rp-busy{opacity:0;transform:translateY(10px)}
.ui-panel .rp-stack > .rp-free{opacity:1;transform:none}
.ui-panel:has(.k-busy.is-on) .rp-free{display:revert}
.ui-panel:has(.k-busy.is-on) .rp-stack > .rp-free{opacity:0;transform:translateY(-10px)}
.ui-panel:has(.k-busy.is-on) .rp-stack > .rp-busy{opacity:1;transform:none}
.ui-panel:has(.k-busy.is-on) .rp-state{background:linear-gradient(160deg,#c42f46,#9a1f36)}
.ui-panel:has(.k-busy.is-on) .rp-side em{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.26)}