/* PCFOX 2.1 — Startseite als EIN Film (Reel).
   Film-Modus (.reel.is-film): eine gepinnte Bühne, alle Texte/Oberflächen als feste Ebenen,
   ein- und ausgeschaltet über den Fortschritt (is-on). Ohne JS / bei reduzierter Bewegung:
   Kapitel stehen untereinander als Standbild + Text (.reel:not(.is-film)). */

/* Alte V30-Regel [data-at]{opacity:0} gilt im Film nicht: hier steuern die Oberflächen ihre Zustände selbst */
:where(.reel) [data-at]{opacity:1;transform:none}

/* ═══ Bühne ═══ */
.reel{position:relative;z-index:1;opacity:1;transition:opacity var(--d-base) var(--ease-out,ease)}
/* V6: gegen das Aufblitzen beim Laden – bis reel.js fertig eingerichtet hat (is-film ODER is-static gesetzt),
   war kurz die JS-lose Ersatzansicht sichtbar (alle Kapitel als Liste, aller Text auf einmal, unpositioniert),
   die dann in die Film-Ansicht umgeklappt ist. Nur ausblenden, wenn JS läuft (.js, ganz früh synchron gesetzt) –
   ohne JS bleibt die Ersatzansicht wie vorher sofort sichtbar. */
html.js .reel:not(.is-film):not(.is-static){opacity:0}
.reel__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:1;background-color:#050507;background-position:center;background-size:cover;background-repeat:no-repeat}
.reel__stage canvas{position:absolute;inset:0;width:100%;height:100%;transition:filter var(--d-slow) var(--e-smooth),opacity var(--d-slow) var(--e-smooth)}
.reel__stage.is-live{background-image:none!important}
/* V15: kein falsches Platzhalterbild mehr – die Bühne bleibt dunkel, das erste echte Bild blendet weich ein (is-live nach dem ersten Zeichnen) */
.reel__stage:not(.is-live) canvas{opacity:0}
/* V15: kein Einrasten mehr (scroll-snap). Es kämpfte am Handy gegen den Schwung der Wischgeste und blieb zwischen Abschnitten hängen;
   der Film folgt dem Scroll jetzt an jeder Stelle (reel.js), der Text hat seine eigenen Zeitfenster. */
/* Bild konnte nicht rechtzeitig geladen werden (Netz): Bühne abdunkeln, statt ein falsches Bild zu zeigen */
.reel__stage[data-stall="1"] canvas{opacity:.3}
/* 2.2: Videoelemente der Clips (unsichtbar; gezeichnet wird in die Canvas) */
.reel__media{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.reel__media video{width:2px;height:2px}
.reel__veil{position:absolute;inset:0;pointer-events:none;transition:opacity var(--d-slow) var(--e-smooth);
  background:linear-gradient(90deg,rgba(5,5,7,.74),rgba(5,5,7,.34) 38%,rgba(5,5,7,0) 60%),linear-gradient(0deg,rgba(5,5,7,.78),rgba(5,5,7,0) 44%),linear-gradient(180deg,rgba(5,5,7,.5),rgba(5,5,7,0) 18%)}
/* Bildschirm-Oberfläche aktiv: der Film tritt in die Tiefe zurück */
.reel__stage[data-desk="screen"] canvas,.reel__stage[data-desk="intune"] canvas{filter:blur(7px) brightness(.62) saturate(.9)}
.reel__track{margin-top:-100vh;margin-top:-100svh;position:relative}
.chap{position:relative;height:calc(var(--len) * 100vh);height:calc(var(--len) * 100svh)}
.chap__at{position:absolute;left:0;top:calc(var(--at,0) * var(--len) * 100svh);width:1px;height:1px}
.chap__still{display:none}
.chap-end{height:100vh;height:100svh}

/* ═══ Ebenen im Film-Modus ═══ */
.reel.is-film .beat,.reel.is-film .win,.reel.is-film .panel,.reel.is-film .readon,.reel.is-film .imgbox,.reel.is-film .scanmini{
  position:fixed;z-index:7;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--d-quick) var(--e-smooth),transform var(--d-base) var(--e-smooth),border-color var(--d-fast) ease,visibility 0s linear var(--d-quick)}
.reel.is-film .is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--d-fast) var(--e-smooth),transform var(--d-base) var(--e-smooth),border-color var(--d-fast) ease,visibility 0s}
.reel.is-film .beat{transform:translate3d(0,12px,0)}
.reel.is-film .beat.is-on{transform:none}

/* Text-Takte: links unten, eine Aussage pro Bild */
.beat{left:var(--gutter);bottom:clamp(56px,11vh,124px);width:min(600px,40vw)}
.beat h2{font-size:clamp(40px,4.7vw,92px)}
.beat .lede{max-width:27em}
.beat--desk{width:min(470px,31vw)}
.beat--desk h2{font-size:clamp(34px,3.3vw,62px)}
.beat--compact h2{font-size:clamp(34px,3.4vw,62px)}
.beat--compact .points{margin-top:22px}
.beat .points li{font-size:14.5px;color:var(--fg-2);display:block;padding:11px 0}
.beat .points strong{color:var(--fg);font-weight:620}

/* Hero (Kapitel Willkommen) */
.beat--hero{left:0;right:0;top:0;bottom:0;width:auto;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gutter) clamp(40px,8vh,90px)}
.reel.is-film .beat--hero{transform:translate3d(0,-3vh,0);filter:none}
.reel.is-film .beat--hero.is-on{transform:none}
.hero__hint{position:absolute;left:50%;bottom:28px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;font-weight:620;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);animation:rise 1s 1.3s both}
.hero__hint i{position:relative;width:1px;height:42px;overflow:hidden;background:rgba(255,255,255,.14)}
.hero__hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--lavender);animation:cue 2.2s var(--ease) 3}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;max-width:34em}
.chips a{height:36px;display:inline-flex;align-items:center;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:580;color:var(--fg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background var(--d-quick) ease,border-color var(--d-quick) ease,transform var(--d-fast) var(--ease-out)}
.chips a:hover{background:rgba(255,255,255,.12);border-color:rgba(195,178,255,.45);transform:translateY(-2px)}

/* ═══ Kapitel-Leiste ═══ */
.reel__rail{position:fixed;z-index:8;right:clamp(12px,1.6vw,26px);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity var(--d-base) ease,visibility 0s linear .5s}
.reel.in-film .reel__rail{opacity:1;visibility:visible;transition:opacity var(--d-base) ease}
.reel__rail a{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:12px;height:26px;padding-left:12px}
.reel__rail a::before{content:"";position:absolute;inset:-7px -6px}   /* Trefferfläche 40 px, Strich bleibt fein */
.reel__rail i{width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.3);transform:scaleX(.385);transform-origin:100% 50%;transition:transform var(--d-fast) var(--e-smooth),background var(--d-fast) ease}
.reel__rail span{position:absolute;right:26px;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff;padding:5px 10px;border-radius:999px;background:rgba(14,14,19,.9);border:1px solid rgba(255,255,255,.1);opacity:0;translate:6px 0;transition:opacity var(--d-quick) ease,translate var(--d-fast) var(--e-smooth);pointer-events:none}
.reel__rail a:hover i,.reel__rail a:focus-visible i{transform:scaleX(.85);background:#fff}
.reel__rail a:hover span,.reel__rail a:focus-visible span{opacity:1;translate:0 0}
.reel__rail a.is-active i{transform:scaleX(1);background:var(--lavender)}

/* ═══ Beschriftungen am Bild (Knolling, Technikschrank) ═══ */
.imgbox{left:var(--ix,0);top:var(--iy,0);width:var(--iw,100vw);height:var(--ih,56vw)}
.part{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:0;padding:0;border:0;background:none;cursor:default;-webkit-tap-highlight-color:transparent}
.part i{position:relative;flex:none;width:12px;height:12px;margin:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(195,178,255,.28),0 2px 10px rgba(0,0,0,.35);transition:box-shadow var(--d-fast) ease}
.part i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(195,178,255,.35)}
.part span{position:absolute;top:50%;display:grid;gap:2px;width:max-content;max-width:230px;padding:10px 14px;border-radius:14px;text-align:left;background:rgba(12,12,17,.86);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.4);
  transform:translate3d(var(--tx,22px),-50%,0) scale(var(--s,1));transform-origin:var(--to,0% 50%);transition:transform var(--d-base) var(--ease-out),border-color var(--d-fast) ease,background var(--d-fast) ease}
.part strong{font-size:14px;font-weight:640;letter-spacing:-.01em;color:#fff}
.part small{font-size:12px;line-height:1.4;color:var(--fg-2)}
.part--l span{right:0;--tx:-22px;--to:100% 50%}
.part--t span{left:50%;top:auto;bottom:16px;--tx:-50%;transform:translate3d(-50%,0,0) scale(var(--s,1));--to:50% 100%}
.part.is-hot span{border-color:rgba(195,178,255,.55);background:rgba(20,18,30,.94)}
.part.is-hot i{box-shadow:0 0 0 6px rgba(195,178,255,.35),0 0 30px rgba(195,178,255,.8)}
.part::before{content:"";position:absolute;top:0;height:1px;width:22px;background:rgba(255,255,255,.45)}
.part--r::before{left:0}.part--l::before{right:0}.part--t::before{display:none}
.part.is-out,.tag.is-out{visibility:hidden}
.part--r span{left:0;right:auto;--tx:22px;--to:0% 50%}
.tag{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center}
.tag i{width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--lavender);box-shadow:0 0 0 3px rgba(195,178,255,.25)}
.tag b{position:absolute;top:50%;translate:0 -50%;white-space:nowrap;padding:6px 11px;border-radius:10px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(12,12,17,.86);border:1px solid rgba(255,255,255,.12)}
.tag--r b{left:22px}.tag--l b{right:22px}
.tag::before{content:"";position:absolute;top:0;width:16px;height:1px;background:rgba(195,178,255,.6)}
.tag--r::before{left:4px}.tag--l::before{right:4px}
.symbol{position:absolute;right:3%;bottom:3%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ═══ Panels im Film (dicht statt Unschärfe: kein backdrop-filter über laufendem Film) ═══ */
.reel.is-film .panel{right:calc(var(--gutter) + 34px);bottom:clamp(56px,11vh,124px);width:min(460px,34vw);background:linear-gradient(160deg,rgba(24,23,31,.93),rgba(12,12,17,.93));-webkit-backdrop-filter:none;backdrop-filter:none;transform:translate3d(0,20px,0)}
.reel.is-film .panel.is-on{transform:none}
.status li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:12px 0}
.status li > span:nth-child(2){display:grid;font-size:15px;font-weight:560}
.status small{font-size:12px;font-weight:500;color:var(--fg-3)}
.ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.ico svg,.glyph svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico img{width:19px;height:19px;object-fit:contain}
.glyph{display:inline-grid;place-items:center}
.panel [data-at],.win [data-at]:not(li){transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out)}
.panel li[data-at]{opacity:.18;transform:translateX(-6px);transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out)}
.panel li[data-at].is-on{opacity:1;transform:none}

/* Scan-Karte (klein, links unter dem Text) */
.scanmini{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:8px 14px;margin-top:26px;padding:14px 16px;border-radius:16px;background:rgba(14,14,19,.86);border:1px solid rgba(255,255,255,.1);max-width:360px}
.reel.is-film .beat .scanmini{position:relative;opacity:1;visibility:inherit;z-index:auto;transform:none;filter:none;transition:none}
.scanmini__ring{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:conic-gradient(var(--lavender) calc(var(--sp,0) * 360deg),rgba(255,255,255,.1) 0);-webkit-mask:radial-gradient(circle,transparent 55%,#000 57%);mask:radial-gradient(circle,transparent 55%,#000 57%)}
.scanmini strong{display:block;font-size:14px;font-weight:640}
.scanmini small{font-size:12.5px;color:var(--fg-2)}
.scanmini__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.scanmini__bar i{display:block;height:100%;width:calc(var(--sp,0) * 100%);background:linear-gradient(90deg,var(--violet),var(--lavender))}

/* Microsoft 365: Konto + App-Kranz */
.reel.is-film .panel--m365{width:min(520px,38vw)}
.acct{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:4px 0 18px;border-bottom:1px solid var(--line)}
.acct__av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:14px;font-weight:700;background:linear-gradient(135deg,#6d45e8,#9f7cff)}
.acct strong{display:block;font-size:15.5px;font-weight:640}
.acct small{font-size:13px;color:var(--fg-2)}
.m365apps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:18px 0 6px}
.m365apps li{display:grid;justify-items:center;gap:8px;padding:12px 4px;border:0;border-radius:14px;background:rgba(255,255,255,.04);font-size:11.5px;font-weight:560;color:var(--fg-2);
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity var(--d-base) var(--ease-out) calc(var(--k) * 45ms),transform var(--d-base) var(--ease-out) calc(var(--k) * 45ms)}
.panel--m365.is-on .m365apps li{opacity:1;transform:none}
.m365apps img,.m365apps .glyph svg{width:30px;height:30px}
.m365apps .glyph svg{stroke:#9fc5ff}

/* Netzwerkplan */
.reel.is-film .panel--topo{width:min(560px,40vw)}
.topo{position:relative;height:300px;margin:4px 0 12px}
.topo__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.topo__lines path{fill:none;stroke:rgba(195,178,255,.55);stroke-width:.5;vector-effect:non-scaling-stroke;stroke-width:1.2;stroke-dasharray:400;stroke-dashoffset:calc(400 - var(--sp,0) * 400)}
.node{position:absolute;z-index:1;translate:-50% -50%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;white-space:nowrap;font-size:12.5px;font-weight:600;background:rgba(20,19,27,.96);border:1px solid rgba(255,255,255,.12)}
.node .glyph svg{width:16px;height:16px}
.n-inet{left:50%;top:6%}.n-gw{left:50%;top:34%}.n-sw{left:50%;top:56%}
.n-wifi{left:12%;top:88%}.n-cam{left:37%;top:88%}.n-nas{left:62%;top:88%}.n-srv{left:88%;top:88%}.n-pc{left:86%;top:56%;opacity:.85}

/* Veeam-Dashboard */
.reel.is-film .panel--veeam{width:min(540px,40vw)}
.panel__head .glyph{margin-right:8px;vertical-align:-4px}
.jobs li{display:grid;grid-template-columns:1fr 90px auto;gap:14px}
.jobs strong{display:block;font-size:14.5px;font-weight:620}
.jobs small{font-size:12px;color:var(--fg-3)}
.bar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--ok);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-slow) var(--ease-out) .15s}
.jobs li.is-on .bar i{transform:scaleX(1)}
.m365b{margin:6px 0 14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);opacity:.2;transition:opacity var(--d-base) ease}
.m365b.is-on{opacity:1}
.m365b p{display:flex;align-items:center;gap:10px;font-size:14px}
.m365b p .state{margin-left:auto}
.m365b ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.panel .m365b li{display:flex;align-items:center;gap:7px;padding:6px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.06);font-size:12.5px;color:var(--fg-2)}
.m365b img{width:16px;height:16px;object-fit:contain}
.beat--321 h2{font-size:clamp(46px,5vw,96px)}
.p321{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.p321 div{display:grid;gap:4px;padding:16px;border-radius:16px;background:rgba(14,14,19,.8);border:1px solid rgba(255,255,255,.1)}
.p321 b{font-size:34px;font-weight:300;line-height:1;color:var(--lavender)}
.p321 span{font-size:13px;color:var(--fg-2)}

/* LIVE-Kacheln */
.reel.is-film .feeds{width:min(560px,40vw);padding:18px}

/* Kameraplan Lagerhalle (2.1c): Kameras mit Blickfeld erscheinen nacheinander */
.kplan{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.kplan__hall{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.26);stroke-width:1.2}
.kplan__rack{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.15);stroke-width:1}
.kplan__door{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round}
.kplan text{font-size:9px;letter-spacing:.08em;fill:rgba(255,255,255,.46);font-family:inherit}
.kcam circle{fill:var(--lavender);stroke:#fff;stroke-width:1.2}
.kcam__cone{fill:rgba(195,178,255,.14);stroke:rgba(195,178,255,.42);stroke-width:.8}
.kplan [data-at]{opacity:0;transition:opacity var(--d-base) var(--ease-out)}
.kplan [data-at].is-on{opacity:1}
.kplan__legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12px;color:var(--fg-3)}
.kplan__legend li{display:flex;align-items:center}
.kplan__legend i{width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--lavender)}

/* ═══ Bildschirm-Fenster (HTML statt KI: gestochen scharf) ═══
   Inhalt ist für 760 × 470 gestaltet und wird als Ganzes skaliert (--ws). */
.win{right:calc(var(--gutter) + 34px);top:50%;width:min(58vw,1020px,calc((100svh - 190px) * 760 / 470));aspect-ratio:760/470;border-radius:18px;overflow:hidden;
  background:#101016;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4)}
.reel.is-film .win{transform:translate3d(0,-50%,0) scale(.965)}
.reel.is-film .win.is-on{transform:translate3d(0,-50%,0)}
.win__scale{position:absolute;left:0;top:0;width:760px;height:470px;transform:scale(var(--ws,1));transform-origin:0 0}
.win__bar{display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;font-size:12px;font-weight:600;color:var(--fg-2);background:#17161f;border-bottom:1px solid rgba(255,255,255,.08)}
.win__bar img{width:16px;height:16px}
.win__bar small{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.win__bar .glyph svg{width:15px;height:15px}
.win__dots{display:flex;gap:6px;margin-right:6px}
.win__dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.win__steps{position:absolute;left:0;right:0;bottom:0;display:flex;height:40px;border-top:1px solid rgba(255,255,255,.08);background:#121118}
.win__steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:620;letter-spacing:.04em;color:var(--fg-3);transition:color var(--d-base) ease}
.win__steps li::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);transition:background var(--d-base) ease,box-shadow var(--d-base) ease}
.win__steps li.is-on{color:#fff}
.win__steps li.is-on::before{background:var(--lavender);box-shadow:0 0 0 3px rgba(195,178,255,.2)}

/* Fernwartung */
.rm{display:grid;grid-template-columns:1fr 92px 1fr;gap:0;height:394px;padding:22px 20px 0}
.rm__label{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:640;color:#fff}
.rm__av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:8.5px;font-weight:700;background:#2b2a36;color:var(--fg-2)}
.rm__av--us{background:#fff}
.rm__av img{width:14px;height:auto}
.rm__screen{position:relative;height:300px;border-radius:12px;overflow:hidden;background:radial-gradient(120% 90% at 70% 20%,#34324a,#16151f 60%);border:1px solid rgba(255,255,255,.1)}
.rm__task{position:absolute;left:0;right:0;bottom:0;height:24px;display:flex;justify-content:center;align-items:center;gap:6px;background:rgba(10,10,14,.7)}
.rm__task i{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.22)}
.rm__err{position:absolute;left:12%;right:12%;top:26%;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;padding:12px;border-radius:10px;background:#f4f4f6;color:#1a1a1f;box-shadow:0 16px 40px rgba(0,0,0,.45);transition:opacity var(--d-base) ease,transform var(--d-base) var(--ease-out)}
.rm__err b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e0a13a;color:#fff;font-size:13px}
.rm__err strong{display:block;font-size:12.5px}
.rm__err small{font-size:10.5px;color:#5a5a66}
.rm__err em{grid-column:2;justify-self:start;margin-top:4px;padding:5px 10px;border-radius:6px;font-style:normal;font-size:11px;font-weight:620;background:#1f6feb;color:#fff;transition:box-shadow var(--d-fast) ease}
.rm__err--mini{top:24%;padding:9px;left:9%;right:9%}
.rm__tv{position:absolute;left:10%;right:10%;bottom:34px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;padding:10px 12px;border-radius:10px;background:rgba(14,142,233,.14);border:1px solid rgba(14,142,233,.4);transition:opacity var(--d-base) ease}
.rm__tv small{font-size:10px;color:var(--fg-2)}
.rm__tv strong{font:600 12.5px/1.4 var(--mono);color:#fff;letter-spacing:.04em}
.rm__cursor{position:absolute;z-index:2;left:calc(78% - clamp(0, (var(--sp) - .3) * 3.2, 1) * 30%);top:calc(84% - clamp(0, (var(--sp) - .3) * 3.2, 1) * 36%);display:flex;align-items:flex-start;gap:3px;opacity:0;transition:opacity var(--d-base) ease}
.rm__cursor svg{width:18px;height:18px;fill:#fff;stroke:#16151f;stroke-width:1.2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.rm__cursor span{margin-top:12px;padding:2px 6px;border-radius:5px;font-size:9.5px;font-weight:700;background:var(--violet);color:#fff}
.rm__ok{position:absolute;left:50%;top:40%;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:rgba(14,14,19,.9);border:1px solid rgba(53,201,122,.35);font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;transform:scale(.94);transition:opacity var(--d-base) ease,transform var(--d-base) var(--ease-out)}
.rm__ok--mini{top:36%;padding:7px 10px}
.rm__link{position:relative;display:grid;align-content:center;justify-items:center;gap:12px;padding-top:30px}
.rm__wire{position:relative;width:100%;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.rm__wire i{position:absolute;top:0;left:-12%;width:10px;height:2px;border-radius:2px;background:var(--lavender);opacity:0;animation:wire 1.6s linear infinite;animation-delay:calc(var(--n,0) * -.32s)}
.rm__wire i:nth-child(2){--n:1}.rm__wire i:nth-child(3){--n:2}.rm__wire i:nth-child(4){--n:3}.rm__wire i:nth-child(5){--n:4}
@keyframes wire{to{left:112%}}
.rm__lock{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#1b1a24;border:1px solid rgba(255,255,255,.12);transition:border-color var(--d-base) ease,background var(--d-base) ease}
.rm__lock svg{width:16px;height:16px;fill:none;stroke:var(--fg-2);stroke-width:1.8;stroke-linecap:round}
.rm__state{position:relative;width:120px;height:32px;text-align:center}
.rm__state b{position:absolute;inset:0;font-size:10px;font-weight:620;line-height:1.35;color:var(--fg-2);opacity:0;transition:opacity var(--d-base) ease}
.rm__wait{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--fg-3);transition:opacity var(--d-base) ease}
.rm__mirror{position:absolute;inset:0;opacity:0;transition:opacity var(--d-base) ease}
.rm .s0{opacity:1}
/* Zustände (verschachtelte .st mit data-at) */
.st.is-on .rm__wire i{opacity:1}
.st.is-on .rm__lock{border-color:rgba(53,201,122,.5);background:rgba(53,201,122,.12)}
.st.is-on .rm__lock svg{stroke:var(--ok-text)}
.st.is-on .rm .s0{opacity:0}.st.is-on .rm .s1{opacity:1;color:var(--ok-text)}
.st.is-on .rm__wait{opacity:0}.st.is-on .rm__mirror{opacity:1}
.st.is-on .rm__cursor{opacity:1}
.st.is-on .rm__tv{opacity:.25}
.st--fix.is-on .rm__err{opacity:0;transform:scale(.9)}
.st--fix.is-on .rm__ok{opacity:1;transform:none}
.st--end.is-on .rm__wire i{opacity:0}
.st--end.is-on .rm__cursor{opacity:0}
.st--end.is-on .rm__lock{border-color:rgba(255,255,255,.12);background:#1b1a24}
.st--end.is-on .rm__lock svg{stroke:var(--fg-3)}
.st--end.is-on .rm .s1{opacity:0}.st--end.is-on .rm .s3{opacity:1;color:var(--fg-2)}
.st--end.is-on .rm__screen--us{opacity:.35}
.st--end.is-on .rm__tv{opacity:0}

/* Website & Hosting */
.win__bar--browser .url{display:flex;align-items:center;gap:6px;height:24px;margin-left:8px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);font-size:11.5px;font-weight:560;color:var(--fg-2);width:280px}
.url__lock svg{width:12px;height:12px;fill:none;stroke:var(--fg-3);stroke-width:2;transition:stroke var(--d-base) ease}
.wsite{position:absolute;left:18px;top:54px;width:560px;height:360px;padding:16px;border-radius:10px;background:#fbfbfc;overflow:hidden;transition:background var(--d-base) ease}
.ws-nav{display:flex;align-items:center;gap:12px;height:22px}
.ws-nav b{font-size:12px;font-weight:700;color:transparent;background:#d8d8de;border-radius:4px;transition:color var(--d-base) ease,background var(--d-base) ease}
.ws-nav i{width:36px;height:6px;border-radius:3px;background:#dcdce2}
.ws-nav em{margin-left:auto;font-style:normal;font-size:10px;padding:4px 10px;border-radius:999px;border:1px dashed #c7c7cf;color:transparent;transition:color var(--d-base) ease,border-color var(--d-base) ease,background var(--d-base) ease}
.ws-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:22px}
.ws-copy{display:grid;align-content:start;gap:8px}
.ws-copy strong{font-size:22px;line-height:1.08;letter-spacing:-.03em;color:transparent;background:#e2e2e8;border-radius:6px;transition:color var(--d-base) ease,background var(--d-base) ease}
.ws-copy span,.ws-cards span{height:7px;border-radius:4px;background:#e4e4ea;transform-origin:left;transform:scaleX(.3);opacity:.5;transition:transform var(--d-base) var(--ease-out),opacity var(--d-base) ease}
.ws-copy span:nth-of-type(2){width:80%}
.ws-copy em{justify-self:start;margin-top:8px;font-style:normal;font-size:10px;padding:6px 12px;border-radius:999px;border:1px dashed #c7c7cf;color:transparent;transition:color var(--d-base) ease,border-color var(--d-base) ease,background var(--d-base) ease}
.ws-img{height:140px;border-radius:10px;border:1px dashed #c7c7cf;background:repeating-linear-gradient(45deg,#f1f1f4 0 8px,#fbfbfc 8px 16px);transition:background var(--d-base) ease,border-color var(--d-base) ease}
.ws-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.ws-cards div{display:grid;gap:6px;padding:10px;border-radius:10px;border:1px dashed #d4d4db;transition:border-color var(--d-base) ease,background var(--d-base) ease}
.ws-cards i{width:20px;height:20px;border-radius:6px;background:#e4e4ea;transition:background var(--d-base) ease}
.st--content.is-on .ws-copy span,.st--content.is-on .ws-cards span{transform:none;opacity:1}
.st--content.is-on .ws-copy strong{color:#9a9aa6;background:transparent}
.st--content.is-on .ws-nav b{color:#9a9aa6;background:transparent}
.st--design.is-on .wsite{background:#fff}
.st--design.is-on .ws-nav b,.st--design.is-on .ws-copy strong{color:#101014}
.st--design.is-on .ws-nav em,.st--design.is-on .ws-copy em{border:0;color:#fff;background:#1d4ed8}
.st--design.is-on .ws-img{border:0;background:linear-gradient(140deg,#1e3a8a,#3b82f6 55%,#93c5fd);box-shadow:0 12px 30px rgba(30,58,138,.25)}
.st--design.is-on .ws-cards div{border:1px solid #ececf1;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.st--design.is-on .ws-cards i{background:#dbeafe}
.st--design.is-on .ws-copy span,.st--design.is-on .ws-cards span{background:#d4d4dc}
.phone{position:absolute;right:26px;top:66px;width:130px;height:262px;padding:8px;border-radius:26px;background:#0b0b10;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;transform:translate3d(40px,0,0) rotate(4deg);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--ease-out)}
.phone__in{height:100%;display:grid;align-content:start;gap:7px;padding:10px 9px;border-radius:19px;background:#fff;overflow:hidden}
.phone__in .ws-nav{height:14px}.phone__in .ws-nav b{font-size:9px;color:#101014;background:none}.phone__in .ws-nav i{width:14px;margin-left:auto}
.phone__in .ws-img{height:66px;border:0;background:linear-gradient(140deg,#1e3a8a,#3b82f6 55%,#93c5fd)}
.phone__in strong{font-size:12px;line-height:1.1;letter-spacing:-.02em;color:#101014}
.phone__in span{height:5px;border-radius:3px;background:#d4d4dc}
.phone__in em{justify-self:start;font-style:normal;font-size:8px;padding:4px 8px;border-radius:999px;background:#1d4ed8;color:#fff}
.st--phone.is-on .phone{opacity:1;transform:none}
.st--phone.is-on .wsite{width:540px}
.live{position:absolute;right:18px;bottom:52px;display:grid;gap:5px;width:170px;opacity:0;transform:translateY(10px);transition:opacity var(--d-base) ease,transform var(--d-base) var(--ease-out)}
.live li{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:8px;background:rgba(14,14,19,.92);border:1px solid rgba(255,255,255,.1);font-size:11.5px;font-weight:600}
.live .state{font-size:9px;gap:5px}.live .state::before{width:5px;height:5px}
.st--live.is-on .live{opacity:1;transform:none}
.st--live.is-on .phone{transform:translate3d(-190px,0,0)}
.win--web .st--live.is-on ~ .win__steps,.win--web:has(.st--live.is-on) .url__lock svg{stroke:var(--ok)}

/* Intune */
.it{display:grid;grid-template-columns:130px 1fr;height:394px}
.it__nav{display:grid;align-content:start;gap:2px;padding:14px 10px;background:#14131b;border-right:1px solid rgba(255,255,255,.06)}
.it__nav b{padding:8px 10px;border-radius:8px;font-size:12px;font-weight:560;color:var(--fg-3)}
.it__nav b.on{color:#fff;background:rgba(0,120,212,.22)}
.it__main{padding:16px 22px}
.it__crumb{font-size:11.5px;color:var(--fg-3)}
.it__crumb strong{color:#fff}
.it__head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:14px 0 10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.it__dev{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(0,120,212,.2)}
.it__dev svg{width:22px;height:22px;fill:none;stroke:#9fc5ff;stroke-width:1.6}
.it__head strong{display:block;font-size:15px}
.it__head small{font-size:11.5px;color:var(--fg-3)}
.it__rows li{display:grid;grid-template-columns:150px 1fr 20px;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;opacity:.15;transition:opacity var(--d-base) var(--ease-out)}
.it__rows li.is-on{opacity:1}
.it__rows span{color:var(--fg-3)}
.it__rows b{font-weight:560}
.it__rows i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.08)}
.it__rows li.is-on i{background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* Virenscan */
.scan{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;height:434px;padding:0 30px}
.scan__ring{position:relative;display:grid;place-items:center;width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--lavender) calc(var(--sp,0) * 360deg),rgba(255,255,255,.08) 0)}
.scan__ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#101016}
.scan__ring > span{position:relative;display:grid;justify-items:center}
.scan__pct{font-size:34px;font-weight:300;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.scan__ring small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.scan__title{position:relative;height:26px;font-size:17px;font-weight:640}
.scan__title span{position:absolute;inset:0;transition:opacity var(--d-base) ease}
.s-done{opacity:0}.s-done.is-on{opacity:1}
.scan__info:has(.s-done.is-on) .s-run{opacity:0}
.scan__path{height:22px;margin-top:10px;overflow:hidden;font:500 12px/22px var(--mono);color:var(--fg-2)}
.scan__path ul{transform:translateY(calc(var(--sp,0) * -242px));transform:translateY(calc(round(down, var(--sp,0) * 11.99, 1) * -22px))}
.scan__path li{height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 0}
.scan__stats div{padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.scan__stats dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.scan__stats dd{margin:6px 0 0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.scan__stats dd.state{font-size:11px;margin-top:10px}
.scan__done{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:13.5px;color:var(--fg-2);opacity:0;transition:opacity var(--d-base) ease}
.scan__done.is-on{opacity:1}

/* Downloads */
.downloads{display:grid;gap:10px;margin-top:18px}
.dl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:rgba(14,14,19,.86);border:1px solid rgba(255,255,255,.12);transition:border-color var(--d-fast) ease,transform var(--d-base) var(--ease-out)}
.dl:hover{border-color:rgba(195,178,255,.5);transform:translateY(-2px)}
.dl img{width:20px;height:20px;filter:invert(1)}
.dl strong{display:block;font-size:14.5px;font-weight:620}
.dl small{font-size:12px;color:var(--fg-3)}
.dl i{font-style:normal;color:var(--lavender)}

/* ═══ „Weiterlesen“-Karte ═══ */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.readon{right:calc(var(--gutter) + 34px);bottom:clamp(56px,11vh,124px);width:min(440px,33vw);display:grid;grid-template-columns:auto 1fr;gap:12px 18px;padding:24px 24px 20px;border-radius:26px;color:#fff;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,rgba(30,28,40,.95),rgba(13,13,18,.95));border:1px solid rgba(255,255,255,.11);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.reel.is-film .readon{transform:translate3d(0,12px,0) scale(.98)}
.reel.is-film .readon.is-on{transform:none}
.readon::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;opacity:0;transition:opacity var(--d-base) ease;
  background:conic-gradient(from var(--ang),transparent 0 62%,rgba(195,178,255,.95) 76%,rgba(138,92,255,.6) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.readon::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(380px circle at var(--hx,80%) var(--hy,0%),rgba(138,92,255,.2),transparent 60%);opacity:.6;transition:opacity var(--d-base) ease}
.readon__num{font:600 12px/1.9 var(--mono);color:var(--lavender)}
.readon__body{display:grid;gap:4px}
.readon__body small{font-size:10.5px;font-weight:680;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.readon__body strong{font-size:clamp(20px,1.7vw,26px);font-weight:640;letter-spacing:-.025em;line-height:1.1}
.readon__body em{margin-top:6px;font-style:normal;font-size:14px;line-height:1.5;color:var(--fg-2)}
.readon__go{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.readon__go b{font-size:15px;font-weight:620;background:linear-gradient(var(--lavender),var(--lavender)) 0 100%/0% 1px no-repeat;padding-bottom:3px;transition:background-size var(--d-base) var(--ease-out)}
.readon__go i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform var(--d-base) var(--ease-out),background var(--d-fast) ease,border-color var(--d-fast) ease}
.readon__go svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--d-base) var(--ease-out)}
.readon:hover{border-color:rgba(195,178,255,.28)}
.readon:hover::before{opacity:1;animation:ang 2.6s linear infinite}
.readon:hover::after{opacity:1}
.readon:hover .readon__go b,.readon:focus-visible .readon__go b{background-size:100% 1px}
.readon:hover .readon__go i{background:var(--violet);border-color:transparent}
.readon:hover .readon__go svg{transform:translateX(3px)}
.reel.is-film .readon.is-on:hover{transform:translate3d(0,-4px,0)}
.readon--left{right:auto;left:var(--gutter)}
@keyframes ang{to{--ang:360deg}}

/* ═══ Kontakt (erweitert) ═══ */
.contact2{position:relative;z-index:6;padding:clamp(110px,16vh,180px) 0 clamp(90px,14vh,150px)}
.contact2 h2{font-size:clamp(42px,5.4vw,100px)}
.contact2__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);margin-top:clamp(40px,7vh,72px);align-items:start}
.contact2 .bubbles{margin-top:0}
.contact2 .bubble{min-width:0;width:100%}
.contact2 .bubble-wrap{flex:1 1 280px}
.addr{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:center;margin-top:16px;padding:22px 28px;border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:border-color var(--d-fast) ease}
.addr:hover{border-color:rgba(195,178,255,.4)}
.addr small{font-size:11px;font-weight:680;letter-spacing:.2em;text-transform:uppercase;color:var(--lavender)}
.addr strong{grid-column:1;font-size:18px;font-weight:600}
.addr span{grid-column:2;grid-row:1/3;font-size:13.5px;font-weight:600;color:var(--fg-2)}
.flow{margin-top:30px}
.flow ol{display:grid;gap:0;margin-top:14px}
.flow li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.flow b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:13px;font-weight:650;background:rgba(138,92,255,.16);color:var(--lavender)}
.flow strong{display:block;font-size:15px;font-weight:620}
.flow span{font-size:13.5px;color:var(--fg-2)}
.downloads--quiet{margin-top:22px;grid-template-columns:1fr 1fr}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;border:0}
.topics legend{width:100%;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--fg-2)}
.topics label{position:relative}
.topics input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.topics span{display:inline-flex;align-items:center;height:40px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:560;color:var(--fg-2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:color var(--d-quick) ease,background var(--d-quick) ease,border-color var(--d-quick) ease}
.topics input:checked + span{color:#fff;background:rgba(138,92,255,.22);border-color:rgba(195,178,255,.55)}
.topics input:focus-visible + span{outline:2px solid var(--lavender);outline-offset:2px}

/* ═══ Handy & Tablet hoch: Film oben, Text unten ═══ */
@media (max-width:860px){
  .reel__stage{background-color:#050507}
  .reel__stage canvas{height:60%;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
  .reel__veil{background:linear-gradient(180deg,rgba(5,5,7,.55),rgba(5,5,7,0) 16%)}
  .reel__rail{display:none}
  .beat,.beat--desk{left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));width:auto}
  .beat h2,.beat--desk h2,.beat--compact h2{margin-top:12px;font-size:clamp(30px,8.6vw,42px)}
  .beat .lede{margin-top:14px;font-size:15.5px}
  .reel[data-card="1"] .beat:not(.beat--hero){bottom:calc(150px + env(safe-area-inset-bottom))}
  .reel[data-card="1"] .beat .lede,.reel[data-card="1"] .beat .points{display:none}
  .beat .points li{padding:7px 0;font-size:13.5px}
  .chips{margin-top:16px;gap:6px}.chips a{height:32px;font-size:12.5px;padding:0 12px}
  .scanmini{margin-top:14px}
  .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{left:12px;right:12px;top:72px;bottom:auto;width:auto;max-height:calc(60svh - 84px);overflow:hidden;padding:14px 16px 6px}
  .panel li,.status li{padding:9px 0;font-size:13.5px}
  .reel.is-film .panel--session,.reel.is-film .panel--hosting{display:none}
  .m365apps{grid-template-columns:repeat(5,1fr);gap:5px;padding:12px 0 4px}.m365apps li{padding:8px 2px;font-size:10px}.m365apps img,.m365apps .glyph svg{width:24px;height:24px}
  .topo{height:210px}
  .win{left:12px;right:12px;top:72px;width:auto}
  .reel.is-film .win{transform:scale(.97)}.reel.is-film .win.is-on{transform:none}
  .readon{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;padding:16px 18px 14px;grid-template-columns:auto 1fr}
  .readon__body em{display:none}
  .readon__go{margin-top:0;padding-top:10px}
  .readon__go i{width:38px;height:38px}
  .readon--left{left:12px}
  .part span{max-width:150px;padding:7px 10px}.part small{display:none}.part strong{font-size:12px}
  .part.is-hot small{display:block}
  .beat--hero{justify-content:flex-end;padding:0 16px calc(128px + env(safe-area-inset-bottom))}
  .beat--hero .hero__title{font-size:clamp(56px,17vw,84px)}
  .hero__foot{margin-top:24px}
  .hero__hint{bottom:calc(22px + env(safe-area-inset-bottom))}
  .node{font-size:10px;padding:5px 7px;gap:5px;border-radius:9px}.node .glyph svg{width:12px;height:12px}
  .n-pc{display:none}.n-wifi{left:13%}.n-cam{left:38%}.n-nas{left:63%}.n-srv{left:87%}
  .tag b{font-size:11px;padding:4px 8px}
  .contact2__grid{grid-template-columns:1fr}
  .downloads--quiet{grid-template-columns:1fr}
}

/* ═══ Ohne JS / reduzierte Bewegung: Kapitel als Standbild + Text ═══ */
.reel:not(.is-film) .reel__stage,.reel:not(.is-film) .reel__rail,.reel:not(.is-film) .imgbox{display:none}
.reel:not(.is-film) .reel__track{margin-top:0}
.reel:not(.is-film) .chap{height:auto;display:grid;gap:26px;padding:clamp(64px,10vh,120px) var(--gutter);max-width:var(--maxw);margin:0 auto}
.reel:not(.is-film) .chap__at{position:static}
.reel:not(.is-film) .chap__still{display:block;aspect-ratio:16/9;border-radius:22px;background:#0d0d12 center/cover no-repeat;border:1px solid var(--line)}
.reel:not(.is-film) .beat--hero{position:relative;padding:0;min-height:70vh}
.reel:not(.is-film) .win{position:relative;right:auto;top:auto;max-width:100%}
.reel:not(.is-film) .readon{position:relative;right:auto;bottom:auto;width:min(100%,460px)}
.reel:not(.is-film) .panel{max-width:560px}
@media (prefers-reduced-motion:reduce){
  .readon::before,.part i::after,.hero__hint i::after{animation:none}
  .reel__stage canvas{transition:none}
}

/* Im Film deckt das Bild die Aurora ohnehin ab: ausblenden spart Arbeit pro Bild */
.film-on .aurora{opacity:0!important;visibility:hidden;transition:opacity var(--d-base) ease,visibility 0s linear .6s}

.reel:not(.is-film) .chap__still{aspect-ratio:21/9;max-height:56vh}

/* V14: 16:00–17:45 wird das Licht am Tag allmählich wärmer (tod.js setzt --tod-warm 0…1); nur eine weiche Tönung über dem Film, keine Abdunklung */
.reel__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#ff9a3c;mix-blend-mode:soft-light;opacity:0;transition:opacity var(--d-slow,.8s) ease}
.reel__stage[data-todv="1"]::after{opacity:calc(var(--tod-warm,0) * .42)}   /* nur über Tagesfassungen (Abendfassungen sind schon warm) */