/* PCFOX 2.3 — Film-Oberflächen: Typografie in Bewegung, Szenen-Ebene, echte Bildschirm-Oberflächen, Statements statt Boxen.
   Nur transform/opacity/filter animieren; alles hängt an .is-on (Abschnitt) bzw. --sp (zeitbasierter Fortschritt). */

:root{--e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1);--hl:rgba(138,92,255,.34)}

/* ═══ Texte Wort für Wort: Maske + Blur-to-Sharp, Keywords mit Marker ═══ */
.reel.is-film .beat{transform:none!important;filter:none!important;transition:opacity var(--d-quick) var(--e-smooth),visibility 0s linear var(--d-quick)}
.reel.is-film .beat.is-on{transition:opacity var(--d-quick) var(--e-smooth),visibility 0s}
.beat .w{display:inline-block;vertical-align:top}
.beat .w--h{overflow:hidden;padding:.08em .03em .12em;margin:-.08em -.03em -.12em}
.beat .wi{display:inline-block}
/* V23e (David 14.10.: «luxuriöser, professioneller, 2030»): der neue Text wartet, bis das Bild gewechselt hat (kein Übereinander von altem und
   neuem Titel); Titelwörter steigen langsamer und weicher aus der Maske (Expo-Out, kurzer Fokus-Zug 6 px -> 0, nur Titel = wenige Elemente);
   der alte Text blendet nur aus und rutscht nicht mehr sichtbar zurück (ruhiger Abgang: Rücksetzen erst nach dem Ausblenden). */
.reel.is-film .beat .wi{opacity:0;transform:translate3d(0,12px,0);transition:opacity 180ms ease,transform 0s linear 220ms}
.reel.is-film .beat .w--h .wi{transform:translate3d(0,105%,0);filter:blur(6px);transition:opacity 180ms ease,transform 0s linear 220ms,filter 0s linear 220ms}
.reel.is-film .beat.is-on .wi{opacity:1;transform:none;transition:opacity 520ms ease,transform 900ms var(--e-out);transition-delay:calc(var(--i) * 45ms + 240ms)}
.reel.is-film .beat.is-on .w--h .wi{filter:none;transition:opacity 560ms ease,transform 1050ms var(--e-out),filter 760ms var(--e-out);transition-delay:calc(var(--i) * 55ms + 260ms)}
.reel.is-film .beat.is-on .w--l .wi{transition-delay:calc(var(--i) * 8ms + 620ms)}
.reel.is-film .beat.is-on .w--eb .wi{transition-delay:calc(var(--i) * 40ms + 140ms)}
/* V15: Handy/Tablet: Eyebrow und Lede als ein Block (reel.js setzt .t-block statt Wort-Elemente zu bilden) – gleiche Reihenfolge wie am Desktop, ein animiertes Element statt 20–60 */
.reel.is-film .beat .t-block{opacity:0;transform:translate3d(0,10px,0);transition:opacity 180ms ease,transform 0s linear 220ms}
.reel.is-film .beat.is-on .t-block{opacity:1;transform:none;transition:opacity 520ms ease,transform 900ms var(--e-out);transition-delay:220ms}
.reel.is-film .beat.is-on .lede.t-block{transition-delay:.5s}
.beat em{font-style:normal;color:#fff;background:linear-gradient(transparent 60%,var(--hl) 60%,var(--hl) 92%,transparent 92%) no-repeat;background-size:0% 100%;transition:background-size var(--d-slow) var(--e-out)}
.reel.is-film .beat.is-on em{background-size:100% 100%;transition-delay:1.1s}
.reel:not(.is-film) .beat em{background-size:100% 100%}
.beat h2 span{color:rgba(245,245,247,.72)}

/* ═══ Sektionstitel oben links (bleibt über den Übergang stehen) ═══ */
.reel__label{position:absolute;left:var(--gutter);top:clamp(92px,12vh,120px);z-index:8;display:flex;align-items:center;gap:12px;margin:0;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,245,247,.72);opacity:0;transform:translate3d(-8px,0,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-out);pointer-events:none}
.reel__label.is-on{opacity:1;transform:none}
.reel__label b{font-weight:600;color:var(--lavender);font-variant-numeric:tabular-nums}
.reel__label b::after{content:"";display:inline-block;width:26px;height:1px;margin-left:12px;vertical-align:middle;background:rgba(195,178,255,.5)}
.reel__label.is-swap span{animation:lbl .9s var(--e-out) .08s both}
.reel__label.is-swap b{display:inline-block;animation:lbn .7s var(--e-out) both}   /* V23e: Kapitelnummer rollt mit */
@keyframes lbl{from{opacity:0;transform:translate3d(0,8px,0);filter:blur(4px)}}
@keyframes lbn{from{opacity:0;transform:translate3d(0,60%,0)}}

/* ═══ Willkommen: Premium-Typografie, eigenständig lebendig ═══ */
.reel.is-film .beat--hero{transform:none!important}
.beat--hero .hero__title{margin-top:18px}
.beat--hero .hero__title .w{display:block;overflow:hidden;padding:.02em .04em .08em;margin:-.02em -.04em -.08em}
.reel.is-film .beat--hero .hero__title .ch{animation:none;opacity:0;transform:translate3d(0,100%,0);transform-origin:0 100%;transition:opacity var(--d-quick) ease,transform var(--d-fast) var(--e-smooth)}
.reel.is-film .beat--hero.is-on .hero__title .ch{opacity:1;transform:none;transition:opacity var(--d-fast) ease,transform var(--d-slow) var(--e-smooth);transition-delay:calc(var(--i) * 40ms + 120ms)}
.hero__eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--lavender)}
.hero__claim .hw{display:inline-block}
.reel.is-film .beat--hero .hero__eyebrow,.reel.is-film .beat--hero .hero__claim .hw,.reel.is-film .beat--hero .hero__meta,.reel.is-film .beat--hero .hero__foot,.reel.is-film .beat--hero .hero__hint{animation:none;opacity:0;transform:translate3d(0,12px,0);transition:opacity var(--d-quick) ease,transform var(--d-fast) var(--e-smooth)}
.reel.is-film .beat--hero.is-on .hero__eyebrow{opacity:1;transform:none;transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-smooth)}
.reel.is-film .beat--hero.is-on .hero__claim .hw{opacity:1;transform:none;transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-smooth);transition-delay:calc(var(--i) * 40ms + 480ms)}
.reel.is-film .beat--hero.is-on .hero__meta{opacity:1;transform:none;transition:opacity var(--d-base) ease 700ms,transform var(--d-slow) var(--e-smooth) 700ms}
.reel.is-film .beat--hero.is-on .hero__foot{opacity:1;transform:none;transition:opacity var(--d-base) ease 800ms,transform var(--d-slow) var(--e-smooth) 800ms}
.reel.is-film .beat--hero.is-on .hero__hint{opacity:1;transform:none;transition:opacity var(--d-base) ease 1200ms,transform var(--d-slow) var(--e-smooth) 1200ms}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px;font-size:13px;font-weight:560;letter-spacing:.06em;color:rgba(245,245,247,.62)}
.hero__meta i{width:4px;height:4px;border-radius:50%;background:rgba(195,178,255,.6)}
.hero__hint{animation:none}

/* ═══ Szenen-Ebene (klebt am Bild) ═══ */
.reel__layer{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;pointer-events:none;z-index:1;contain:layout style;will-change:transform}
.reel__layer .onimg{position:absolute;left:0;top:0;opacity:0;visibility:hidden;transition:opacity var(--d-fast) ease,visibility 0s linear var(--d-fast)}
.reel__layer .onimg.is-on{opacity:1;visibility:visible;transition:opacity var(--d-base) ease 100ms,visibility 0s}
.reel__layer .pins{width:1920px;height:1080px}
.reel__stage[data-desk="soft"] canvas{filter:blur(10px) brightness(.5) saturate(.9)}
.reel__stage[data-desk="soft"] .reel__layer{opacity:.25;filter:blur(6px);transition:opacity var(--d-slow) ease,filter var(--d-slow) ease}
.reel__layer{transition:opacity var(--d-slow) ease,filter var(--d-slow) ease}
.reel:not(.is-film) .reel__layer{display:none}

/* Bildschirm-Oberflächen: echtes HTML, perspektivisch (matrix3d) auf den Bildschirm gelegt */
.scr{transform-origin:0 0;overflow:hidden;backface-visibility:hidden;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.22));mix-blend-mode:screen}
.scr--phone{border-radius:34px}
.scr--small,.scr--touch{border-radius:6px}
.ui{position:absolute;inset:0;overflow:hidden;color:#11131a;background:#f4f5f8}
.ui [data-at]{transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-out)}

/* Beschriftete Punkte am Motiv (Label behält Pixelgrösse über --ls) */
.pin{position:absolute;display:block;width:0;height:0}
.pin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--lavender);box-shadow:0 0 0 5px rgba(138,92,255,.25),0 2px 10px rgba(0,0,0,.35)}
.pin i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(195,178,255,.35)}
.pin b{position:absolute;top:0;left:18px;white-space:nowrap;padding:8px 14px;border-radius:99px;font-size:14px;font-weight:600;color:#fff;background:rgba(12,12,18,.82);border:1px solid rgba(255,255,255,.14);translate:0 -50%;scale:var(--ls,1);transform-origin:0 50%}
.pin--l b{left:auto;right:18px;transform-origin:100% 50%}
.pins .pin{opacity:0;transform:scale(.6);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-out)}
.pins .pin.is-on{opacity:1;transform:none}
.pins--stack .pin i{display:none}
.pins--stack .pin b{left:0;font-size:15px;padding:9px 16px 9px 34px;background:rgba(10,10,16,.78)}
.pins--stack .pin b::before{content:"";position:absolute;left:14px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#43d17a;box-shadow:0 0 12px rgba(67,209,122,.8)}

/* LEDs im Rack (blinken unabhängig vom Scroll) */
@keyframes led{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}

/* ═══ Statements & kinetische Listen statt Tabellen ═══ */
.reel.is-film .hud{position:fixed;z-index:7;right:calc(var(--gutter) + 34px);top:50%;width:min(380px,30vw);opacity:0;visibility:hidden;transform:translate3d(0,-46%,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-out),visibility 0s linear .6s;pointer-events:none}
.reel.is-film .hud.is-on{opacity:1;visibility:visible;transform:translate3d(0,-50%,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-out),visibility 0s}
.reel.is-film .hud--low{top:auto;bottom:clamp(56px,11vh,124px);transform:translate3d(0,14px,0)}
.reel.is-film .hud--low.is-on{transform:none}
/* Liste direkt im Text (kompakte Zeile mit Häkchen) */
.reel .hud--inline{position:relative!important;right:auto;top:auto;width:auto;margin-top:22px;transform:none!important;opacity:1;visibility:inherit;z-index:auto}
.hud--inline ul{display:flex;flex-wrap:wrap;gap:8px}
.hud--inline li{gap:8px;padding:8px 14px 8px 10px;border:1px solid rgba(255,255,255,.12)!important;border-radius:99px;background:rgba(10,10,16,.55)}
.hud--inline .hud__ico{width:24px;height:24px;border-radius:8px;background:none;border:0}
.hud--inline .hud__ico svg{width:16px;height:16px}
.hud--inline .hud__t b{font-size:14px}.hud--inline .hud__t small{display:none}
/* Text oben links (wenn unten das Motiv liegt) */
.reel.is-film .beat--top{top:clamp(150px,21vh,210px);bottom:auto}
/* Text-Schleier liegt über Video UND Bildschirm-Oberflächen (gleiche Abdunklung, Text bleibt lesbar) */
.reel__veil{z-index:2}
.hud__head{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lavender)}
.hud ul{margin:0;padding:0;list-style:none}
.hud li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);opacity:0;transform:translate3d(18px,0,0);filter:blur(6px);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--e-out),filter var(--d-base) ease}
.hud li:first-child{border-top:0}
.hud li.is-on{opacity:1;transform:none;filter:none}
.hud__ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.hud__ico svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hud__ico img{width:22px;height:22px;object-fit:contain}
.hud__t{display:grid;gap:2px}
.hud__t b{font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em}
.hud__t small{font-size:12.5px;color:rgba(245,245,247,.55)}
.hud--list li::after{content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:#43d17a;box-shadow:0 0 10px rgba(67,209,122,.7);opacity:0;transform:scale(.3);transition:opacity var(--d-base) ease .35s,transform var(--d-base) var(--e-out) .35s}
.hud--list li.is-on::after{opacity:1;transform:none}
.hud--apps .hud__ico{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.92);border:0}
.hud--apps .hud__ico img{width:26px;height:26px}
.hud--apps .hud__ico .glyph svg{stroke:#2b2f3a}

/* ═══ Website & Hosting: Beispiel-Website eines Kaffeesalons, scrollt von selbst ═══ */
.ui-cafe{background:#f6f1ea;color:#221d19;font-family:Inter,system-ui,sans-serif}
.cf-page{position:absolute;left:0;top:0;right:0;animation:cafe 26s var(--e-io) infinite alternate}
.scr:not(.is-on) .cf-page{animation-play-state:paused}
@keyframes cafe{0%,10%{transform:translate3d(0,0,0)}22%,32%{transform:translate3d(0,-560px,0)}44%,54%{transform:translate3d(0,-1080px,0)}66%,76%{transform:translate3d(0,-1500px,0)}88%,100%{transform:translate3d(0,-1710px,0)}}
.cf-nav{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:30px;height:72px;padding:0 54px;color:#fff;font-size:18px;letter-spacing:.04em}
.cf-nav b{margin-right:auto;font-size:24px;letter-spacing:.32em;font-weight:600}
.cf-nav em{font-style:normal;padding:10px 20px;border:1px solid rgba(255,255,255,.7);border-radius:99px}
.cf-hero{position:relative;height:600px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:0 64px 70px}
.cf-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 40%,rgba(0,0,0,.55))}
.cf-hero div{position:relative;color:#fff}
.cf-hero small{font-size:16px;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.cf-hero h3{margin:14px 0 26px;font-family:Georgia,"Times New Roman",serif;font-size:74px;font-weight:400;line-height:1.02;letter-spacing:-.015em}
.cf-hero em{font-style:normal;display:inline-block;padding:14px 26px;border-radius:99px;background:#f6f1ea;color:#221d19;font-size:18px;font-weight:600}
.cf-menu,.cf-res{padding:60px 64px}
.ui-cafe small{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#9a7a55}
.ui-cafe h4{margin:10px 0 28px;font-family:Georgia,"Times New Roman",serif;font-size:46px;font-weight:400;letter-spacing:-.01em}
.cf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cf-cards figure{margin:0}.cf-cards img{display:block;width:100%;height:250px;object-fit:cover;border-radius:14px}
.cf-cards b{display:block;margin-top:14px;font-size:22px}.cf-cards span{font-size:16px;color:#6d625a}
.cf-mood{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:44px;height:440px;padding:0 64px;background:#231e1a;color:#f6f1ea}
.cf-mood__img{height:330px;border-radius:16px;background-size:cover;background-position:60% 50%}
.cf-mood p{font-size:20px;line-height:1.5;color:rgba(246,241,234,.72)}
.cf-loc{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:44px;height:380px;padding:0 64px}
.cf-map{position:relative;height:280px;border-radius:16px;background:repeating-linear-gradient(35deg,#e8e0d5 0 2px,transparent 2px 46px),repeating-linear-gradient(-55deg,#e8e0d5 0 2px,transparent 2px 60px),#f0e9df}
.cf-map i{position:absolute;left:52%;top:44%;width:24px;height:24px;border-radius:50% 50% 50% 0;background:#9a5a2e;transform:rotate(-45deg);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.cf-loc p{font-size:20px;color:#6d625a}
.cf-form{display:flex;gap:14px}.cf-form span{flex:1;padding:18px 20px;border-radius:12px;border:1px solid #d9cdbd;font-size:18px;color:#8b7f74}
.cf-form em{font-style:normal;padding:18px 28px;border-radius:12px;background:#231e1a;color:#f6f1ea;font-size:18px}
.cf-foot{padding:30px 64px;font-size:15px;color:#8b7f74;border-top:1px solid #e3d8cb}
.cf--m .cf-page{animation-name:cafem;animation-duration:24s}
@keyframes cafem{0%,10%{transform:translate3d(0,0,0)}22%,32%{transform:translate3d(0,-480px,0)}44%,54%{transform:translate3d(0,-1340px,0)}66%,76%{transform:translate3d(0,-1780px,0)}88%,100%{transform:translate3d(0,-2016px,0)}}
.cf--m .cf-nav{height:64px;padding:0 24px;gap:0}.cf--m .cf-nav span,.cf--m .cf-nav em{display:none}.cf--m .cf-nav b{font-size:20px}
.cf--m .cf-hero{height:520px;padding:0 26px 46px}.cf--m .cf-hero h3{font-size:46px}
.cf--m .cf-menu,.cf--m .cf-res{padding:40px 26px}.cf--m h4{font-size:34px}
.cf--m .cf-cards{grid-template-columns:1fr;gap:18px}.cf--m .cf-cards img{height:180px}
.cf--m .cf-mood{grid-template-columns:1fr;height:520px;padding:30px 26px;gap:20px}.cf--m .cf-mood__img{height:240px}
.cf--m .cf-loc{grid-template-columns:1fr;height:420px;padding:30px 26px;gap:16px}.cf--m .cf-map{height:200px}
.cf--m .cf-form{flex-wrap:wrap}.cf--m .cf-form span{flex:1 1 100%}.cf--m .cf-foot{padding:24px 26px}

/* ═══ Teams-Raum ═══ */
.ui-meet{background:#1b1a22;color:#fff;padding:26px}
.um-top{display:flex;justify-content:space-between;font-size:24px}.um-top span{color:rgba(255,255,255,.55)}
.um-grid{display:grid;grid-template-columns:1fr 1fr 2.2fr;grid-template-rows:1fr 1fr;gap:14px;height:520px;margin-top:20px}
.um-tile{display:grid;place-items:center;border-radius:14px;background:#2a2934;position:relative}
.um-tile i{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--c);color:#1b1a22;font-style:normal;font-size:36px;font-weight:650}
.um-tile--room small{position:absolute;bottom:12px;font-size:17px;color:rgba(255,255,255,.6)}
.um-grid .um-tile:nth-child(3){grid-column:1/3}
.um-share{grid-column:3;grid-row:1/3;padding:28px;border-radius:14px;background:#f4f5f8;color:#1b1a22}
.um-share b{font-size:30px}
.um-bars,.ui-slide .um-bars{display:flex;align-items:flex-end;gap:14px;height:62%;margin-top:30px;padding:0 6px;border-bottom:2px solid #d6d9e2}
.um-bars i{flex:1;height:calc(var(--h) * 100%);border-radius:8px 8px 0 0;background:linear-gradient(#8a5cff,#6b3ff0)}
.um-bar{display:flex;justify-content:center;gap:18px;margin-top:18px}
.um-bar span{width:58px;height:58px;border-radius:50%;background:#34333f;position:relative}
.um-bar .mute::before{content:"";position:absolute;inset:17px 22px;border-radius:8px;border:3px solid #fff;border-bottom:0}
.um-bar .mute.is-on{background:#d9453b}
.um-bar .mute.is-on::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:3px;background:#fff;transform:rotate(-40deg)}
.um-bar .leave{width:96px;border-radius:29px;background:#c4314b}
.ui-touch{background:#15151b;color:#fff;padding:18px 22px}.ui-touch b{font-size:26px}
.ui-touch div{display:flex;gap:12px;margin-top:22px}.ui-touch span{flex:1;padding:20px 0;border-radius:12px;background:#2c2c36;text-align:center;font-size:20px}
.ui-touch .t-mute.is-on{background:#d9453b}.ui-touch .t-end{background:#c4314b}
.ui-slide{background:#f4f5f8;padding:30px 34px;color:#1b1a22}.ui-slide b{font-size:34px}

/* ═══ SharePoint-Struktur 2.3 (V5: ersetzt durch .spstage in v5.css) ═══ */
.reel.is-film .spmap{position:fixed;z-index:7;right:calc(var(--gutter) + 20px);top:40%;width:min(620px,46vw);transform:translate3d(0,-50%,0);opacity:0;visibility:hidden;transition:opacity var(--d-slow) ease,visibility 0s linear .7s}
.reel.is-film .spmap.is-on{opacity:1;visibility:visible;transition:opacity var(--d-slow) ease,visibility 0s}
.sp-root{display:flex;align-items:center;gap:14px;padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translate3d(0,12px,0)}
.sp-root.is-on{opacity:1;transform:none}
.sp-root .glyph{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(138,92,255,.25)}
.sp-root .glyph svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6}
.sp-root b{font-size:22px;color:#fff}.sp-root small{margin-left:auto;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lavender)}
.sp-branches{display:grid;gap:4px}
.sp-b{display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:16px;padding:14px 0 14px 26px;position:relative;opacity:0;transform:translate3d(20px,0,0)}
.sp-b.is-on{opacity:1;transform:none}
.sp-b::before{content:"";position:absolute;left:6px;top:-6px;bottom:50%;width:14px;border-left:1.5px solid rgba(195,178,255,.45);border-bottom:1.5px solid rgba(195,178,255,.45);border-radius:0 0 0 8px}
.sp-b b{font-size:17px;color:#fff}
.sp-libs{display:flex;gap:8px;flex-wrap:wrap}.sp-libs span{padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(245,245,247,.8)}
.sp-perm{font-style:normal;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;background:rgba(67,209,122,.14);color:#8ff0b3;opacity:clamp(0,(var(--sp,0) - .66) * 6,1)}
.sp-teams{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;border-radius:99px;background:rgba(255,255,255,.08);font-size:14px;color:#fff;opacity:0}
.sp-teams.is-on{opacity:1}

/* ═══ Intune: Geräteverwaltung (abstrahiert) + Unternehmensportal ═══ */
.ui-mgmt{display:grid;grid-template-columns:250px 1fr;background:#f3f4f7}
.ui-mgmt aside{display:flex;flex-direction:column;gap:6px;padding:32px 22px;background:#1b1d26;color:rgba(255,255,255,.7);font-size:20px}
.ui-mgmt aside b{margin-bottom:18px;color:#fff;font-size:24px}.ui-mgmt aside span{padding:10px 14px;border-radius:10px}.ui-mgmt aside .on{background:rgba(138,92,255,.3);color:#fff}
.ui-mgmt main{padding:34px 38px}
.mg-head{display:flex;justify-content:space-between;align-items:center}.mg-head b{font-size:32px;letter-spacing:-.015em}
.mg-ok{padding:8px 16px;border-radius:99px;background:#dff5e8;color:#157a3e;font-size:18px;font-weight:600;opacity:0}.mg-ok.is-on{opacity:1}
.mg-list{margin:24px 0 0;padding:0;list-style:none}
.mg-list li{display:grid;grid-template-columns:40px 190px 1fr auto;align-items:center;gap:14px;padding:15px 18px;margin-bottom:10px;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(20,24,40,.06);font-size:19px;opacity:0;transform:translate3d(0,14px,0)}
.mg-list li.is-on{opacity:1;transform:none}
.mg-list b{font-size:20px}.mg-list span{color:#6a7185}
.os{width:32px;height:32px;border-radius:8px;background:#e5e8f0}.os--win{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.os--ios{background:#1f2430}.os--and{background:#3ddc84}
.st{font-style:normal;padding:7px 14px;border-radius:99px;background:#dff5e8;color:#157a3e;font-size:16px;font-weight:600;opacity:0}.st.is-on{opacity:1}
.st--warn{background:#fff1d6;color:#9a5b00}.st--warn.is-on{opacity:1}
.mg-list li:has(.st--fix.is-on) .st--warn{display:none}
.st--fix{display:none}.st--fix.is-on{display:inline-block}
.mg-pol{display:flex;gap:12px;margin-top:20px}
.mg-pol span{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:#fff;border:1px solid #e3e6ee;font-size:17px;opacity:0;transform:scale(.94)}
.mg-pol span.is-on{opacity:1;transform:none}
.mg-pol svg{width:20px;height:20px;fill:none;stroke:#6b3ff0;stroke-width:1.8}
.mg-app{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;margin-top:20px;padding:18px 20px;border-radius:14px;background:#fff;opacity:0}.mg-app.is-on{opacity:1}
.mg-app b{font-size:20px}.mg-app span{font-size:17px;color:#6a7185}
.mg-app i{grid-column:1/3;height:10px;border-radius:5px;background:#e8eaf1;overflow:hidden}
.mg-app i em{display:block;height:100%;width:calc(clamp(0,(var(--sp,0) - .42) / .38,1) * 100%);background:linear-gradient(90deg,#8a5cff,#43d17a);border-radius:5px}
.ui-portal{background:#f3f4f7;padding:70px 30px}
.ui-portal small{font-size:18px;color:#6a7185;letter-spacing:.06em}
.pt-dev{margin-top:26px;padding:26px;border-radius:22px;background:#fff}.pt-dev b{display:block;font-size:30px}.pt-dev span{font-size:20px;color:#6a7185}
.pt-ok{display:grid;justify-items:center;gap:10px;margin-top:26px;padding:34px 20px;border-radius:22px;background:#dff5e8;text-align:center;opacity:0;transform:scale(.94)}.pt-ok.is-on{opacity:1;transform:none}
.pt-ok i{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:#22b35e;color:#fff;font-style:normal;font-size:40px}
.pt-ok b{font-size:28px;color:#135f33}.pt-ok span{font-size:19px;color:#2e6b46}
.pt-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}.pt-apps span{aspect-ratio:1;border-radius:18px;background:#fff}

/* ═══ Antivirus: Scan-Oberfläche (hell, nach Vorlage; Beispielansicht) ═══ */
.ui-av{display:grid;grid-template-columns:270px 1fr;background:#fff}
.ui-av aside{display:flex;flex-direction:column;gap:4px;padding:30px 20px;background:#f2f3f5;font-size:19px;color:#3a3f4b}
.ui-av aside b{margin-bottom:22px;font-size:19px;color:#11131a;line-height:1.25}.ui-av aside span{padding:11px 14px;border-radius:9px}
.ui-av aside .on{background:#fff;color:#0a7d6b;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.ui-av aside small{margin-top:auto;font-size:14px;color:#8a909c}
.ui-av main{padding:40px 44px}.ui-av h5{margin:0 0 26px;font-size:34px;font-weight:600}
.av-card{padding:28px 30px;border-radius:12px;border:1px solid #e4e6ea}
.av-row{display:flex;justify-content:space-between;font-size:24px}.av-state{font-size:18px;color:#0a7d6b}
.av-state .s-done{display:none}.av-state .s-done.is-on{display:inline}.av-state:has(.s-done.is-on) .s-run{display:none}
.av-card p{margin:14px 0;font-size:19px;color:#50566a}.av-card p b{color:#11131a}
.av-path{height:34px;overflow:hidden;font-family:Consolas,monospace;font-size:16px;color:#6a7185}
.av-path ul{margin:0;padding:0;list-style:none;animation:paths 7s steps(10) infinite}.av-path li{height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes paths{to{transform:translate3d(0,-340px,0)}}
.av-prog{height:10px;margin-top:10px;border-radius:5px;background:#e8eaee;overflow:hidden}
.av-prog i{display:block;height:100%;width:calc(clamp(0,var(--sp,0) / .9,1) * 100%);background:#0a9d86;border-radius:5px}
.av-ok{display:flex;align-items:center;gap:18px;margin-top:22px;padding:22px 26px;border-radius:12px;background:#e7f7f2;opacity:0;transform:translate3d(0,12px,0)}.av-ok.is-on{opacity:1;transform:none}
.av-ok i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0a9d86;color:#fff;font-style:normal;font-size:28px}
.av-ok b{display:block;font-size:24px}.av-ok small{font-size:17px;color:#3f6e62}

/* ═══ Security-Monitoring (Assetnote, abstrahiert) ═══ */
.ui-asm{background:#0e1117;color:#e8ebf2;padding:34px 40px}
.as-top{display:flex;justify-content:space-between;align-items:baseline}.as-top b{font-size:32px}.as-top span{font-size:17px;color:#7c8497}
.as-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.as-kpi div{padding:18px 22px;border-radius:14px;background:#171b25;border:1px solid #232938}
.as-kpi small{font-size:16px;color:#7c8497}.as-kpi b{display:block;margin-top:4px;font-size:44px;font-weight:650;font-variant-numeric:tabular-nums}
.as-risk .r2,.as-risk .r3{display:none}.as-risk .r2.is-on{display:inline;color:#ffb547}.as-risk .r1:has(~ .r2.is-on){display:none}
.as-risk b:has(.r3.is-on) .r2{display:none}.as-risk .r3.is-on{display:inline;color:#43d17a}
.as-list{margin:0;padding:0;list-style:none}
.as-list li{display:grid;grid-template-columns:18px 330px 1fr auto;align-items:center;gap:14px;padding:13px 18px;margin-bottom:8px;border-radius:12px;background:#151922;font-size:19px;opacity:0;transform:translate3d(-14px,0,0)}
.as-list li.is-on{opacity:1;transform:none}
.as-list i{width:12px;height:12px;border-radius:50%;background:#43d17a}
.as-list b{font-family:Consolas,monospace;font-size:19px;font-weight:500}.as-list span{color:#7c8497}
.as-st{font-style:normal;font-size:15px;padding:5px 12px;border-radius:99px;background:rgba(67,209,122,.14);color:#7fe0a5}
.as-risk-row{}
.as-list .as-risk i{background:#ffb547;box-shadow:0 0 12px rgba(255,181,71,.7)}
.as-list .as-risk{background:#241c10;border:1px solid rgba(255,181,71,.35)}
.as-list .as-risk .as-st{background:rgba(255,181,71,.16);color:#ffc977}
.as-list .as-risk:has(.as-fix.is-on){background:#151922;border-color:transparent}
.as-list .as-risk:has(.as-fix.is-on) i{background:#43d17a;box-shadow:none}
.as-list .as-risk:has(.as-fix.is-on) .as-st:not(.as-fix){display:none}
.as-fix{display:none}.as-fix.is-on{display:inline-block}
.as-alert{position:absolute;right:40px;top:110px;display:flex;gap:16px;align-items:center;width:470px;padding:20px 22px;border-radius:14px;background:#2a1e0c;border:1px solid rgba(255,181,71,.45);box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;transform:translate3d(20px,0,0)}
.as-alert.is-on{opacity:1;transform:none}
.ui-asm:has(.as-okbar.is-on) .as-alert{opacity:0}
.as-alert i svg{width:34px;height:34px;fill:none;stroke:#ffb547;stroke-width:1.8}.as-alert b{display:block;font-size:22px;color:#ffc977}.as-alert small{font-size:16px;color:#d9c29a}
.as-okbar{position:absolute;left:40px;right:40px;bottom:26px;display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;background:rgba(67,209,122,.12);color:#8ff0b3;font-size:20px;font-weight:600;opacity:0}
.as-okbar.is-on{opacity:1}.as-okbar i{font-style:normal}

/* ═══ Netzwerk-Topologie: schrittweise, ohne Tabelle (oben links in der freien Fläche neben dem Rack) ═══ */
.reel.is-film .topo2{position:fixed;z-index:7;left:var(--gutter);top:clamp(150px,20vh,200px);width:min(470px,32vw);height:300px;opacity:0;visibility:hidden;transition:opacity var(--d-base) ease,visibility 0s linear .6s}
.reel.is-film .topo2.is-on{opacity:1;visibility:visible;transition:opacity var(--d-base) ease,visibility 0s}
.topo2 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.topo2 .tl{fill:none;stroke:rgba(195,178,255,.55);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--sp,0));vector-effect:non-scaling-stroke}
.tn{position:absolute;left:var(--x);top:var(--y);z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;background:rgba(12,12,18,.86);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:560;color:#fff;white-space:nowrap;transform:translate(-50%,-50%) scale(.9);opacity:0}
.tn.is-on{opacity:1;transform:translate(-50%,-50%)}
.tn .glyph svg{width:15px;height:15px;fill:none;stroke:var(--lavender);stroke-width:1.7}

/* Kameraplan: Access Points */
.kap circle{fill:#fff;stroke:rgba(195,178,255,.9);stroke-width:1.2}.kap path{fill:none;stroke:rgba(195,178,255,.8);stroke-width:1.3}
.kplan__legend i.ap{background:#fff;box-shadow:0 0 0 2px rgba(195,178,255,.8)}

/* ═══ Handy ═══ */
@media (max-width:860px){
  .reel__label{display:none}
  .reel.is-film .beat--top{top:auto;bottom:calc(20px + env(safe-area-inset-bottom))}
  .reel.is-film .hud,.reel.is-film .spmap,.reel.is-film .topo2{left:12px;right:12px;top:76px;bottom:auto;width:auto;transform:none!important}
  .reel.is-film .hud{padding:14px 16px;border-radius:18px;background:rgba(10,10,15,.86)}
  .hud li{padding:8px 0}.hud__t b{font-size:14.5px}.hud__t small{display:none}.hud__ico{width:32px;height:32px}
  .reel.is-film .spmap{padding:14px 16px;border-radius:18px;background:rgba(10,10,15,.86)}
  .sp-b{grid-template-columns:1fr auto;padding-left:22px}.sp-libs{display:none}
  .reel.is-film .topo2{height:250px}
  .pin b{font-size:12px;padding:6px 10px}
  .pins--stack{display:none}
  .hero__meta{font-size:11.5px}
}
/* ═══ Ohne Film (reduzierte Bewegung / ohne JS) ═══ */
.reel:not(.is-film) .hud,.reel:not(.is-film) .spmap,.reel:not(.is-film) .topo2{position:relative;max-width:560px}
.reel:not(.is-film) .topo2{height:300px}
@media (prefers-reduced-motion:reduce){
  .cf-page,.av-path ul,.pin i::after,.si-wait i,.beat--hero .hero__title .w:first-child .ch{animation:none!important}
}

/* V23e: Bewegung reduzieren – Texte ohne Zug und ohne Verzögerung */
@media (prefers-reduced-motion:reduce){
  .reel.is-film .beat .wi,.reel.is-film .beat.is-on .wi,.reel.is-film .beat .t-block,.reel.is-film .beat.is-on .t-block{transform:none!important;filter:none!important;transition:opacity 200ms ease!important;transition-delay:0s!important}
  .reel__label.is-swap span,.reel__label.is-swap b{animation:none}
}

/* V27d (David 17.10., Kamera «360° Schutz»: «not that visible»): die Liste bekommt am Desktop eine dunkle Glasfläche wie am Handy, damit sie
   vor hellem Material (Transporter, Laderampe) lesbar bleibt; Beschreibungen etwas heller. */
@media (min-width:861px){
  .reel.is-film .hud:not(.hud--inline){padding:14px 18px;border-radius:20px;background:rgba(10,10,15,.74);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.35)}
  .reel.is-film .hud:not(.hud--inline) li{border-top-color:rgba(255,255,255,.1)}
  .reel.is-film .hud:not(.hud--inline) .hud__t small{color:rgba(245,245,247,.78)}
}
/* V27d: kompakter und etwas höher, damit die Liste nicht unter die «Weiterlesen»-Karte läuft (1440x900) */
@media (min-width:861px){
  .reel.is-film .hud:not(.hud--inline){padding:12px 16px}   /* hud--sky steht oben (top clamp 100–150 px), keine Mitte */
  .reel.is-film .hud:not(.hud--inline) li{padding:8px 0;gap:12px}
  .reel.is-film .hud:not(.hud--inline) .hud__ico{width:34px;height:34px}
  .reel.is-film .hud:not(.hud--inline) .hud__t b{font-size:14px}
  .reel.is-film .hud:not(.hud--inline) .hud__t small{font-size:12px;line-height:1.3}
}
@media (min-width:861px) and (max-height:800px){
  .reel.is-film .hud:not(.hud--inline) li{padding:6px 0;gap:10px}
  .reel.is-film .hud:not(.hud--inline) .hud__ico{width:30px;height:30px}
  .reel.is-film .hud:not(.hud--inline) .hud__t b{font-size:13.5px}
  .reel.is-film .hud:not(.hud--inline) .hud__t small{font-size:11.5px;line-height:1.25}
}
/* V27d: die 360°-Liste wird per --fit (reel.js fitPanes) verkleinert, wenn sie sonst in die «Weiterlesen»-Karte liefe */
@media (min-width:861px){.reel.is-film .hud--sky{transform-origin:0 0;scale:var(--fit,1)}}