/* PCFOX V5 — erwachsener, ruhiger, abwechslungsreicher.
   1) Textformen: t-say (Label + kompakter Satz), t-words (Begriffe nacheinander), t-spec (technische Annotation),
      t-line (ein Satz als Übergang), t-swap (wechselndes Schlüsselwort), t-mark (Begriffe leuchten nacheinander),
      t-tick (Produkte einzeln). Positionen at-*. Nur opacity/transform/filter animiert, keine Sprünge, kein Bounce.
   2) Oberflächen auf Bildschirmen: Outlook Classic + PowerShell + TeamViewer-Leiste, Arbeitsplatz-Einrichtung,
      Admin Center, Microsoft-Anmeldung + Authenticator, Raumpanel, Präsentation, SharePoint-Bühne. */

:root{--v5-ease:cubic-bezier(.16,1,.3,1)}

/* ═══ 1. Textformen ═══ */
.reel.is-film .t-say h2.say,.reel.is-film .t-line h2.say,.reel.is-film .t-swap h2.say,.reel.is-film .t-mark h2.say{font-size:clamp(26px,2.3vw,42px);font-weight:560;line-height:1.14;letter-spacing:-.024em;max-width:17em;margin-top:12px}
.t-say .lede,.t-line .lede,.t-swap .lede{margin-top:14px;font-size:15px;line-height:1.6;max-width:29em;color:rgba(245,245,247,.66)}
.t-say--calm h2.say{font-weight:500!important;font-size:clamp(22px,1.85vw,32px)!important;max-width:19em!important}
.reel.is-film .t-line h2.say{font-size:clamp(28px,2.7vw,50px);font-weight:520;max-width:15em}
.t-say .eyebrow .auth-logo{width:22px;height:22px;margin:-4px 10px 0 0;vertical-align:middle;border-radius:5px}

/* Positionen (Desktop). Grundposition .beat: unten links */
.reel.is-film .at-tl{top:clamp(150px,21vh,210px);bottom:auto;width:min(460px,32vw)}
.reel.is-film .at-ml{top:30vh;bottom:auto;width:min(470px,34vw)}
.reel.is-film .at-r{left:auto;right:calc(var(--gutter) + 52px);width:min(420px,30vw)}
.reel.is-film .at-tr{left:auto;right:calc(var(--gutter) + 52px);top:clamp(140px,18vh,196px);bottom:auto;width:min(430px,31vw)}
.reel.is-film .at-b{right:calc(var(--gutter) + 52px);width:auto;bottom:clamp(40px,7vh,84px)}
.reel.is-film .at-bl-narrow{width:min(420px,30vw)}
.reel.is-film .at-r.t-spec--parts{top:26vh;bottom:auto;width:min(330px,24vw)}

/* Begriffe nacheinander */
.t-words span{display:inline-block;opacity:0;transform:translate3d(0,12px,0);transition:opacity var(--d-fast) ease,transform var(--d-base) var(--e-smooth)}
.t-words span.is-on{opacity:1;transform:none;filter:none}
.t-words--big{display:flex;flex-direction:column;gap:.04em;margin:14px 0 0;font-size:clamp(36px,3.6vw,64px);font-weight:300;line-height:1.04;letter-spacing:-.035em;color:#fff}
.t-words--big span:nth-child(2){color:rgba(245,245,247,.74)}
.t-words--big span:nth-child(3){color:#cdbfff}
.t-say .t-words--big + .lede,.t-say .t-words + .lede{margin-top:18px}
.t-words--flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:16px 0 0;font-size:15px;font-weight:560;letter-spacing:.005em;color:rgba(245,245,247,.86)}
.t-words--flow span:not(:first-child)::before{content:"";display:inline-block;width:16px;height:1px;margin:0 12px 4px;background:rgba(195,178,255,.55);vertical-align:middle}
.t-soft .t-words--flow{font-size:clamp(17px,1.35vw,22px);font-weight:500;gap:12px 0;max-width:24em}

/* Technische Annotation (CPU · RAM · Akku · SSD; Marken im Meetingraum) */
.t-spec .eyebrow{margin-bottom:18px}
.t-spec ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.t-spec li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:15px 0;border-top:1px solid rgba(255,255,255,.1);opacity:0;transform:translate3d(16px,0,0);filter:blur(6px);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease),filter var(--d-slow) ease}
.t-spec li:first-child{border-top:0}
.t-spec li.is-on{opacity:1;transform:none;filter:none}
.t-spec li i{grid-row:1/3;padding-top:5px;font:500 11px/1 var(--mono);letter-spacing:.06em;font-style:normal;color:rgba(195,178,255,.72)}
.t-spec li b{font-size:21px;font-weight:620;letter-spacing:.01em;color:#fff}
.t-spec li span{margin-top:4px;font-size:14px;line-height:1.5;color:rgba(245,245,247,.62)}
.t-spec--row ol{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.4vw,40px)}
.t-spec--row li{border-top:1px solid rgba(255,255,255,.14)!important;transform:translate3d(0,12px,0)}
.t-spec--row li b{font-size:clamp(17px,1.4vw,22px)}

/* Wechselndes Schlüsselwort */
.swap{display:inline-grid;vertical-align:bottom;color:#cdbfff}
.swap>span{grid-area:1/1;opacity:0;white-space:nowrap}
.reel.is-film .t-swap.is-on .swap>span{animation:v5swap calc(var(--n,4) * 2.1s) var(--v5-ease) infinite;animation-delay:calc(var(--k) * 2.1s + .6s)}
.reel:not(.is-film) .swap>span:first-child,.t-swap:not(.is-on) .swap>span:first-child{opacity:1}
@keyframes v5swap{0%{opacity:0;transform:translate3d(0,.32em,0);filter:blur(8px)}5%,21%{opacity:1;transform:none;filter:none}26%,100%{opacity:0;transform:translate3d(0,-.26em,0);filter:blur(8px)}}

/* Begriffe leuchten nacheinander auf */
.marks{margin:18px 0 0;max-width:30em;font-size:16px;line-height:1.8;color:rgba(245,245,247,.5)}
.marks mark{color:inherit;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(--v5-ease),color var(--d-base) ease}
.marks mark.is-on{color:#fff;background-size:100% 100%}
.t-mark--list .marks{font-size:15.5px}

/* Produkte einzeln (Microsoft 365) */
.reel.is-film .t-m365{top:clamp(150px,21vh,210px);bottom:auto;width:min(360px,24vw)}
.reel.is-film .t-tick{width:min(420px,30vw);bottom:clamp(44px,8vh,96px)}
.tick{position:relative;list-style:none;margin:0;padding:0;height:88px}
.tick li{position:absolute;inset:0;display:grid;grid-template-columns:58px 1fr;column-gap:18px;align-items:center;opacity:0;transform:translate3d(0,16px,0);filter:blur(8px);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease),filter var(--d-base) ease}
.tick li.is-on{opacity:1;transform:none;filter:none}
.tick li.is-on:has(~ li.is-on){opacity:0;transform:translate3d(0,-16px,0);filter:blur(8px)}
.tk-ico{grid-row:1/3;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tk-ico img{width:32px;height:32px;object-fit:contain}.tk-ico svg{width:28px;height:28px;fill:none;stroke:#2b2f3a;stroke-width:1.6}
.tick b{align-self:end;font-size:clamp(26px,2.4vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.05;color:#fff}
.tick li>span:last-child{align-self:start;margin-top:4px;font-size:14.5px;color:rgba(245,245,247,.66)}
.tick__row{display:flex;gap:12px;margin:22px 0 0}
.tick__row span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.9);opacity:.16;filter:grayscale(1);transition:opacity var(--d-base) ease,filter var(--d-base) ease}
.tick__row span.is-on{opacity:1;filter:none}
.tick__row img{width:19px;height:19px;object-fit:contain}.tick__row svg{width:17px;height:17px;fill:none;stroke:#2b2f3a;stroke-width:1.7}

/* Website: Hosting-Zeile (bewusst keine Buttons) */
.hostline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:20px 0 0;font-size:14.5px;font-weight:560;color:rgba(245,245,247,.86);cursor:default}
.hostline span{opacity:0;transform:translate3d(0,6px,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease)}
.hostline span.is-on{opacity:1;transform:none}
.hostline span:not(:first-child)::before{content:"";display:inline-block;width:18px;height:1px;margin:0 12px 4px;background:rgba(195,178,255,.55);vertical-align:middle}
.reel .hud--inline{display:none}

/* Hinweis auf die Punkte */
.pinhint{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;color:rgba(245,245,247,.5)}
.pinhint i{width:9px;height:9px;border-radius:50%;background:var(--lavender);box-shadow:0 0 0 4px rgba(138,92,255,.2)}

/* ═══ Punkte am Bild: nur ein kleiner violetter Punkt – Beschriftung beim Darüberfahren ═══ */
.pins--hover .pin i{left:-6px;top:-6px;width:12px;height:12px;box-shadow:0 0 0 4px rgba(138,92,255,.22),0 2px 8px rgba(0,0,0,.35);transition:transform var(--d-fast) var(--e-smooth),box-shadow var(--d-fast) ease}
.pins--hover .pin i::after{inset:-7px;border-width:1px;animation-duration:3.4s;opacity:.7}
.pins--hover .pin b{opacity:0;translate:-6px -50%;scale:var(--ls,1);transition:opacity var(--d-fast) ease,translate var(--d-base) var(--v5-ease);pointer-events:none;font-size:13.5px;font-weight:580;padding:7px 13px;background:rgba(10,10,15,.86)}
.pins--hover .pin--l b{translate:6px -50%}
.pins--hover .pin.is-hot b{opacity:1;translate:0 -50%}
.pins--hover .pin.is-hot i{transform:scale(1.3);box-shadow:0 0 0 6px rgba(138,92,255,.3),0 0 22px rgba(195,178,255,.9)}
.pins--hover .pin.is-hot{z-index:2}

/* LEDs: Link ruhig an, Aktivität unregelmässig, gelegentlich orange (keine Disco) */
@keyframes ledAct{0%{opacity:1}7%{opacity:.2}12%{opacity:1}31%{opacity:.25}34%{opacity:1}58%{opacity:.15}61%{opacity:1}63%{opacity:.3}66%{opacity:1}100%{opacity:1}}
@keyframes ledAct2{0%{opacity:.95}18%{opacity:.2}21%{opacity:.95}44%{opacity:.3}46%{opacity:.95}81%{opacity:.18}85%{opacity:.95}100%{opacity:.95}}
@keyframes ledSlow{0%,100%{opacity:.95}50%{opacity:.55}}
@keyframes ledLink{0%{opacity:.95;background:#7dffab}88%{opacity:.95;background:#7dffab}90%{opacity:.9;background:#ffbf5c;box-shadow:0 0 5px 1.5px rgba(255,180,80,.7)}94%{opacity:.95;background:#7dffab}100%{opacity:.95;background:#7dffab}}

/* Technische Annotation am Bild (Fernwartung) */
.anno{width:1920px;height:1080px}
.anno ul{position:absolute;width:340px;margin:0;padding:2px 0 2px 14px;list-style:none;border-left:1px solid rgba(195,178,255,.4);transform:scale(var(--ls,1));transform-origin:0 0}
.anno li{padding:5px 0;font:500 12.5px/1.45 var(--mono);color:rgba(245,245,247,.8);text-shadow:0 1px 10px rgba(0,0,0,.75);opacity:0;transform:translate3d(-6px,0,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease)}
.anno li.is-on{opacity:1;transform:none}
.anno li.is-on:has(~ li.is-on){opacity:.42}
.anno li.err{color:#ffb4a9}.anno li.ok{color:#9ff2bf}

/* ═══ 2. Oberflächen ═══ */
.ui-ol,.ui-setup,.ui-admin,.ui-signin,.ui-panel,.ui-present,.sp-page,.sp-map,.sp-flow,.sp-access{font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif}

/* ── Outlook Classic (Windows), neutral nachgebaut ── */
.ui-ol{display:grid;grid-template-rows:42px 36px 106px 1fr 30px;background:#fff;color:#242424;font-size:15px;--c1:clamp(0,(var(--sp,0) - .06) / .04,1);--c2:clamp(0,(var(--sp,0) - .13) / .04,1);--c3:clamp(0,(var(--sp,0) - .45) / .05,1);--c4:clamp(0,(var(--sp,0) - .79) / .04,1);--c5:clamp(0,(var(--sp,0) - .88) / .05,1)}
.ui-ol .k,.ui-panel .k{position:absolute;width:0;height:0;opacity:0}
.ol-title{display:flex;align-items:center;gap:16px;padding:0 0 0 14px;background:#0f6cbd;color:#fff;font-size:14px}
.ol-qa{display:flex;gap:10px}.ol-qa i{width:16px;height:16px;border-radius:3px;background:rgba(255,255,255,.55)}
.ol-t{flex:1;text-align:center;white-space:nowrap}
.ol-search{display:flex;align-items:center;gap:8px;width:300px;height:28px;padding:0 10px;border-radius:5px;background:rgba(255,255,255,.2);font-size:13.5px;color:rgba(255,255,255,.9)}
.ol-search svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2}
.ol-win{display:flex;height:100%}.ol-win i{width:46px;position:relative}
.ol-win i::after{content:"";position:absolute;left:18px;right:18px;top:50%;height:1.5px;background:currentColor;opacity:.9}
.ol-win i:nth-child(2)::after{height:9px;top:calc(50% - 5px);background:none;border:1.5px solid currentColor}
.ol-win i:nth-child(3)::after{left:18px;right:18px;height:1.5px;transform:rotate(45deg);box-shadow:0 0 0 0 currentColor}
.ol-tabs{display:flex;align-items:flex-end;gap:2px;padding:0 10px;background:#f3f2f1;border-bottom:1px solid #e1dfdd}
.ol-tabs span{padding:8px 14px 9px;font-size:14px;color:#323130;border-bottom:3px solid transparent}
.ol-tabs .t-start{color:#0f6cbd;font-weight:600;border-bottom-color:#0f6cbd}
.ui-ol:has(.k-se.is-on) .t-start{color:#323130;font-weight:400;border-bottom-color:transparent}
.ui-ol:has(.k-se.is-on) .t-se{color:#0f6cbd;font-weight:600;border-bottom-color:#0f6cbd}
.ol-ribbon{position:relative;background:#faf9f8;border-bottom:1px solid #e1dfdd}
.rb{position:absolute;inset:0;display:flex;align-items:stretch;gap:4px;padding:8px 12px}
.rb-se{display:none}
.ui-ol:has(.k-se.is-on) .rb-se{display:flex}.ui-ol:has(.k-se.is-on) .rb-start{display:none}
.rb .big{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:84px;padding:6px 8px;border-radius:4px;text-align:center}
.rb .big svg{width:32px;height:32px;fill:none;stroke:#0f6cbd;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rb .big b{font-size:12.5px;font-weight:400;line-height:1.25;color:#323130}
.rb .dim{opacity:.4}
.rb .col{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 6px;font-size:12.5px;color:#323130}
.rb .col span{display:flex;align-items:center;gap:6px}.rb .col svg{width:16px;height:16px;fill:none;stroke:#0f6cbd;stroke-width:1.7}
.rb .sep{width:1px;margin:4px 6px;background:#e1dfdd}
.ui-ol:has(.k-send.is-on) .sr-all{background:#e1dfdd}
.ui-ol:has(.k-fail.is-on) .sr-all{background:transparent}
.ui-ol:has(.k-retry.is-on) .sr-all{background:#e1dfdd}
.ui-ol:has(.k-ok.is-on) .sr-all{background:transparent}
.ol-body{display:grid;grid-template-columns:220px 390px 1fr;min-height:0;overflow:hidden}
.ol-fold{padding:12px 10px;border-right:1px solid #edebe9;font-size:14px}
.ol-fold .acc{margin:2px 6px 8px;font-size:13px;font-weight:600;color:#323130}
.ol-fold ul{margin:0;padding:0;list-style:none}
.ol-fold li{display:flex;justify-content:space-between;padding:7px 10px 7px 22px;border-radius:4px;color:#323130}
.ol-fold li b{color:#0f6cbd;font-weight:600}
.ol-fold li.sel{background:#cfe4fa;font-weight:600}
.ui-ol:has(.k-ok.is-on) .ol-fold .out b{visibility:hidden}
.ui-ol:has(.k-ok.is-on) .ol-fold li.sel b::after{content:""}
.ol-list{border-right:1px solid #edebe9;overflow:hidden}
.ol-lh{display:flex;gap:16px;align-items:center;padding:10px 16px;border-bottom:1px solid #edebe9;font-size:13.5px;color:#605e5c}
.ol-lh .on{color:#0f6cbd;font-weight:600;border-bottom:2px solid #0f6cbd}.ol-lh em{margin-left:auto;font-style:normal}
.ol-list ul{margin:0;padding:0;list-style:none}
.ol-list li{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:9px 16px 10px 20px;border-bottom:1px solid #f3f2f1;font-size:13px}
.ol-list li b{font-size:14.5px;font-weight:600;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-list li .t{font-size:12.5px;color:#605e5c}
.ol-list li em{grid-column:1/-1;font-style:normal;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-list li small{grid-column:1/-1;font-size:12.5px;color:#605e5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-list li.sel{background:#cfe4fa}
.ol-list li.grp{display:block;padding:8px 16px 5px;font-size:12.5px;font-weight:600;color:#605e5c;background:#fff;border-bottom:0}
.ol-list li.new,.ol-list li.g-new{display:none}
.ol-list li.new{position:relative;border-left:3px solid #0f6cbd;padding-left:17px}.ol-list li.new em{color:#0f6cbd;font-weight:600}
.ui-ol:has(.k-ok.is-on) .ol-list li.new{display:grid;animation:olnew .7s var(--v5-ease) both}
.ui-ol:has(.k-ok.is-on) .ol-list li.g-new{display:block}
.ui-ol:has(.k-ok.is-on) .ol-list li.g-heute{display:none}
@keyframes olnew{from{opacity:0;transform:translate3d(0,-8px,0)}}
.ol-read{padding:22px 30px;font-size:14.5px;line-height:1.55;color:#242424;overflow:hidden}
.ol-read h6{margin:0 0 16px;font-size:21px;font-weight:600}
.ol-from{display:grid;grid-template-columns:42px 1fr auto;gap:0 12px;align-items:center;margin-bottom:22px}
.ol-from i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#8764b8;color:#fff;font-style:normal;font-size:14px;font-weight:600}
.ol-from b{display:block;font-size:14.5px}.ol-from small{font-size:12.5px;color:#605e5c}.ol-from em{font-style:normal;font-size:12.5px;color:#605e5c}
.ol-read p{margin:0 0 12px}
.ol-status{display:flex;align-items:center;gap:22px;padding:0 14px;background:#f3f2f1;border-top:1px solid #e1dfdd;font-size:12.5px;color:#605e5c}
.ol-status em{font-style:normal;display:none}
.ol-status .st-con{margin-left:0}
.ui-ol:has(.k-fail.is-on):not(:has(.k-ok.is-on)) .st-err{display:inline;color:#c50f1f;font-weight:600}
.ui-ol:has(.k-ok.is-on) .st-ok,.ui-ol:has(.k-ok.is-on) .st-con{display:inline}
.ol-status .st-err,.ol-status .st-ok{margin-left:auto}
/* Übermittlungsdialog */
.ol-dlg{position:absolute;left:50%;top:52%;width:620px;transform:translate(-50%,-50%);background:#fff;border:1px solid #c8c6c4;box-shadow:0 22px 60px rgba(0,0,0,.28);display:none;z-index:3;font-size:13.5px}
.ui-ol:has(.k-send.is-on):not(:has(.k-ps.is-on)) .ol-dlg,.ui-ol:has(.k-retry.is-on):not(:has(.k-ok.is-on)) .ol-dlg{display:block;animation:dlgin .25s ease both}
@keyframes dlgin{from{opacity:0;transform:translate(-50%,-48%)}}
.dl-t{display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 0 0 14px;font-size:13px;color:#323130;border-bottom:1px solid #edebe9}
.dl-t i{width:46px;text-align:center;font-style:normal;color:#605e5c}
.dl-b{padding:16px 18px 14px;display:grid;grid-template-columns:1fr auto;gap:10px 18px}
.dl-b>p{grid-column:1;margin:0;font-size:14px;color:#242424}
.dl-res,.dl-res2{display:none}
.ui-ol:has(.k-fail.is-on):not(:has(.k-retry.is-on)) .dl-run{display:none}
.ui-ol:has(.k-fail.is-on):not(:has(.k-retry.is-on)) .dl-res{display:block;font-weight:600}
.dl-prog{grid-column:1;height:14px;border:1px solid #c8c6c4;background:#f3f2f1;overflow:hidden}
.dl-prog i{display:block;height:100%;width:40%;background:#06b025;animation:dlrun 1.3s linear infinite}
.ui-ol:has(.k-fail.is-on):not(:has(.k-retry.is-on)) .dl-prog i{animation:none;width:100%;background:#d13438}
@keyframes dlrun{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.dl-btn{grid-column:2;grid-row:1/3;display:grid;gap:8px;align-content:start}
.dl-btn span{padding:5px 18px;border:1px solid #8a8886;border-radius:2px;font-size:13px;text-align:center;background:#fff}
.dl-tabs{grid-column:1/-1;display:flex;gap:2px;margin-top:4px;border-bottom:1px solid #c8c6c4}
.dl-tabs span{padding:5px 14px;font-size:13px;border:1px solid transparent;border-bottom:0}
.dl-tabs .a{background:#fff;border-color:#c8c6c4;margin-bottom:-1px}
.ui-ol:has(.k-fail.is-on):not(:has(.k-retry.is-on)) .dl-tabs .a{background:transparent;border-color:transparent}
.ui-ol:has(.k-fail.is-on):not(:has(.k-retry.is-on)) .dl-tabs .e{background:#fff;border-color:#c8c6c4;margin-bottom:-1px}
.dl-pane{grid-column:1/-1;min-height:96px;padding:10px 12px;border:1px solid #c8c6c4;border-top:0;font-size:13px}
.dl-tasks p{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;margin:0}
.dl-tasks i{width:14px;height:14px;border-radius:50%;border:2px solid #0f6cbd;border-top-color:transparent;animation:spin 1s linear infinite}
.dl-tasks em{font-style:normal;color:#605e5c}.dl-tasks .s-err,.dl-tasks .s-ok{display:none}
.dl-err{display:none}
.dl-err p{display:grid;grid-template-columns:20px 1fr;gap:10px;margin:0;line-height:1.45;color:#242424}
.dl-err p i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#d13438;color:#fff;font-style:normal;font-size:11px}
.ui-ol:has(.k-fail.is-on):not(:has(.k-retry.is-on)) .dl-tasks{display:none}
.ui-ol:has(.k-fail.is-on):not(:has(.k-retry.is-on)) .dl-err{display:block}
.dl-chk{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#323130}
.dl-chk i{width:14px;height:14px;border:1px solid #605e5c;border-radius:2px}
@keyframes spin{to{transform:rotate(360deg)}}
/* PowerShell */
.ps{position:absolute;left:40%;top:30%;width:56%;height:58%;display:none;flex-direction:column;background:#0c0c0c;border:1px solid #3a3a3a;box-shadow:0 26px 70px rgba(0,0,0,.45);z-index:3}
.ui-ol:has(.k-ps.is-on):not(:has(.k-retry.is-on)) .ps{display:flex;animation:psin .35s var(--v5-ease) both}
@keyframes psin{from{opacity:0;transform:translate3d(0,14px,0)}}
.ps-t{display:flex;justify-content:space-between;align-items:center;height:34px;padding-left:14px;background:#1f1f1f;color:#fff;font-size:13px}
.ps-b{flex:1;padding:12px 16px;overflow:hidden;font:14px/1.5 "Cascadia Mono",Consolas,monospace;color:#cccccc}
.ps-b p{margin:0;white-space:pre;opacity:0}
.ps-b p.is-on{opacity:1}
.ps-b p.cmd{margin-top:6px}.ps-b b{color:#f9f1a5;font-weight:400}.ps-b i{font-style:normal;color:#9a9a9a}
.ps-b .warn{color:#f9f1a5}
.ps-b s{text-decoration:none;color:#e74856}.ps-b u{text-decoration:none;color:#16c60c}
.ps-cur i{display:inline-block;width:9px;height:17px;vertical-align:-3px;background:#ccc;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* TeamViewer-Leiste: dezent, oben mittig */
.tv{position:absolute;left:50%;top:0;display:flex;align-items:center;gap:18px;height:40px;padding:0 10px 0 18px;border-radius:0 0 12px 12px;background:#1c1c1f;color:#fff;font-size:14px;box-shadow:0 8px 26px rgba(0,0,0,.35);transform:translate(-50%,-100%);transition:transform var(--d-slow) var(--v5-ease) .4s;z-index:4;white-space:nowrap}
.scr.is-on .tv{transform:translate(-50%,0)}
.tv b{font-size:13px;letter-spacing:.12em;font-weight:600}
.tv-on{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85)}.tv-on i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.tv-on time{font-variant-numeric:tabular-nums}
.tv-lock{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.75)}.tv-lock svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.tv-end{padding:5px 12px;border-radius:6px;border:1px solid rgba(255,110,110,.55);color:#ff9d9d;font-size:13px}
.tv-ok{position:absolute;left:50%;top:50px;display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:10px;background:#1c1c1f;color:#fff;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.35);transform:translate(-50%,-8px);opacity:0;transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease);z-index:4;white-space:nowrap}
.ui-ol:has(.k-ok.is-on) .tv-ok{opacity:1;transform:translate(-50%,0);transition-delay:.9s}
.tv-ok i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#16a34a;font-style:normal;font-size:13px}
.tv-ok span{color:rgba(255,255,255,.7)}
.ol-cur{position:absolute;z-index:5;left:calc(72% - 55% * var(--c1) - 12% * var(--c2) + 50% * var(--c3) - 50% * var(--c4) + 38% * var(--c5));top:calc(64% - 56% * var(--c1) + 7% * var(--c2) + 52% * var(--c3) - 52% * var(--c4) + 35% * var(--c5));transition:none}
.ol-cur svg{width:26px;height:26px;fill:#fff;stroke:#111;stroke-width:1.3}

/* ── Arbeitsplatz-Einrichtung (Software) ── */
.ui-setup{padding:44px 56px;color:#fff;background:radial-gradient(120% 90% at 18% 0%,#25223c,#0d0d13 72%)}
.sw-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1)}
.sw-dev b{display:block;font-size:34px;font-weight:600;letter-spacing:-.01em}.sw-dev small{font-size:18px;color:rgba(255,255,255,.55)}
.sw-tag{padding:8px 16px;border-radius:99px;background:rgba(138,92,255,.22);color:#e3dbff;font-size:17px}
.sw-list{margin:8px 0 0;padding:0;list-style:none}
.sw-list li{display:grid;grid-template-columns:52px 1fr 40px;gap:18px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);opacity:.28;transition:opacity var(--d-base) ease}
.sw-list li.is-on{opacity:1}
.sw-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.08)}
.sw-ico img{width:30px;height:30px}.sw-ico svg{width:26px;height:26px;fill:none;stroke:#e6ddff;stroke-width:1.6}
.sw-t b{display:block;font-size:22px;font-weight:560}.sw-t small{font-size:16.5px;color:rgba(255,255,255,.55)}
.sw-st i{display:block;width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(255,255,255,.18)}
.sw-list li.is-on .sw-st i{border-color:transparent;background:#22b35e;position:relative;animation:swok .5s var(--v5-ease) both}
.sw-list li.is-on .sw-st i::after{content:"";position:absolute;left:10px;top:6px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
@keyframes swok{from{transform:scale(.4);opacity:0}}
.sw-foot{display:flex;align-items:center;gap:22px;margin-top:22px}
.sw-bar{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.sw-bar i{display:block;height:100%;width:calc(clamp(0,var(--sp,0) / .86,1) * 100%);background:linear-gradient(90deg,#8a5cff,#43d17a);border-radius:5px}
.sw-done{font-size:18px;color:#8ff0b3;opacity:0}.sw-done.is-on{opacity:1}
.sw-note{position:absolute;right:20px;bottom:14px;font-size:13px;color:rgba(255,255,255,.35)}

/* ── Microsoft 365 Admin Center (neutral nachgebaut) ── */
.ui-admin{display:grid;grid-template-rows:48px 1fr;background:#faf9f8;color:#242424;font-size:15px}
.ad-top{display:flex;align-items:center;gap:14px;padding:0 18px;background:#1b1a19;color:#fff}
.ad-waffle svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6}
.ad-top b{font-size:16px;font-weight:600}.ad-q{margin-left:auto;width:320px;height:30px;padding:5px 12px;border-radius:4px;background:#fff;color:#605e5c;font-size:13.5px}
.ad-top i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#8764b8;font-style:normal;font-size:13px}
.ad-body{display:grid;grid-template-columns:230px 1fr;min-height:0}
.ad-body aside{display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:#fff;border-right:1px solid #edebe9;font-size:14.5px}
.ad-body aside span{padding:8px 12px;border-radius:4px;color:#323130}.ad-body aside .on{background:#edebe9;font-weight:600}
.ad-body aside small{margin:12px 12px 4px;font-size:12px;font-weight:600;color:#605e5c}
.ad-body main{padding:26px 34px;overflow:hidden}
.ad-body h6{margin:0 0 14px;font-size:26px;font-weight:600}
.ad-tool{display:flex;gap:20px;align-items:center;padding:8px 0 14px;font-size:14px;color:#0f6cbd}.ad-tool em{margin-left:auto;font-style:normal;color:#605e5c}
.ad-th,.ad-body li{display:grid;grid-template-columns:40px 190px 1fr 1fr;gap:12px;align-items:center}
.ad-th{padding:8px 10px;border-bottom:1px solid #e1dfdd;font-size:13px;font-weight:600;color:#605e5c}.ad-th span:first-child{grid-column:2}
.ad-body ul{margin:0;padding:0;list-style:none}
.ad-body li{padding:10px;border-bottom:1px solid #f3f2f1;font-size:14px;opacity:0;transform:translate3d(0,8px,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease)}
.ad-body li.is-on{opacity:1;transform:none}
.ad-body li i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8e2f8;color:#5b3fb5;font-style:normal;font-size:12px;font-weight:600}
.ad-body li b{font-weight:600}.ad-body li span{color:#0f6cbd}.ad-body li em{font-style:normal;color:#605e5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Microsoft-Anmeldung mit Nummernabgleich ── */
.ui-signin{display:grid;place-items:center;background:linear-gradient(160deg,#e9eef7,#f6f7fb)}
.ui-signin .si-card{position:relative;width:560px;min-height:470px;padding:46px 50px;border-radius:4px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.si-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.ms-logo{display:grid;grid-template-columns:11px 11px;gap:2px}.ms-logo i{width:11px;height:11px}
.ms-logo i:nth-child(1){background:#f25022}.ms-logo i:nth-child(2){background:#7fba00}.ms-logo i:nth-child(3){background:#00a4ef}.ms-logo i:nth-child(4){background:#ffb900}
.si-brand b{font-size:21px;font-weight:600;color:#737373}
.si-s small{display:block;font-size:16px;color:#1b1b1b}
.si-s>b{display:block;margin:10px 0 18px;font-size:26px;font-weight:600;color:#1b1b1b}
.si-in{display:flex;gap:9px;height:40px;align-items:center;border-bottom:1px solid #666;margin-bottom:34px}
.si-in i{width:10px;height:10px;border-radius:50%;background:#1b1b1b;opacity:0}.si-in i.is-on{opacity:1}
.si-btn{display:inline-block;float:right;padding:10px 34px;background:#0067b8;color:#fff;font-style:normal;font-size:16px}
.si-mfa,.si-done{display:none}
.si-card:has(.si-mfa.is-on) .si-pw{display:none}.si-card:has(.si-mfa.is-on) .si-mfa{display:block;animation:dlgin0 .4s ease both}
.si-card:has(.si-done.is-on) .si-mfa{display:none}.si-card:has(.si-done.is-on) .si-done{display:block;animation:dlgin0 .4s ease both}
@keyframes dlgin0{from{opacity:0;transform:translate3d(16px,0,0)}}
.si-mfa p{margin:0 0 12px;font-size:16px;line-height:1.45;color:#1b1b1b}
.ui-signin .si-num{margin:18px 0 20px;font-size:64px;font-weight:600;line-height:1;letter-spacing:0;color:#1b1b1b}
.si-hint{font-size:14px!important;color:#605e5c!important}.si-link{display:block;margin-top:18px;font-size:14.5px;color:#0067b8}
.si-done i{display:grid;place-items:center;width:64px;height:64px;margin:24px 0 16px;border-radius:50%;background:#107c10;color:#fff;font-style:normal;font-size:34px}
.si-done p{font-size:16px;color:#605e5c}
.si-note{position:absolute;right:18px;bottom:12px;font-size:13px;color:#8a8886}
/* ── Authenticator auf dem Handy ── */
.ui-auth{background:linear-gradient(170deg,#1d2b4a,#0b1020 70%);color:#fff;font-family:-apple-system,"SF Pro Text","Segoe UI",Inter,sans-serif}
.au-lock{position:absolute;inset:0;padding:120px 22px 0;text-align:center}
.au-lock time{display:block;font-size:84px;font-weight:300;letter-spacing:-.02em}
.ui-auth .au-note{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;margin-top:60px;padding:16px;border-radius:22px;background:rgba(245,245,250,.86);color:#111;text-align:left;opacity:0;transform:translate3d(0,-20px,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease)}
.ui-auth .au-note.is-on{opacity:1;transform:none}
.au-note img{width:44px;height:44px;border-radius:10px;background:#fff}
.au-note small{font-size:13px;color:#555}.au-note b{display:block;margin:2px 0;font-size:18px}.au-note em{font-style:normal;font-size:14px;color:#444}
.au-app{position:absolute;inset:0;padding:76px 26px 40px;background:#f3f3f6;color:#111;opacity:0;transform:translate3d(0,30px,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease)}
.au-app.is-on{opacity:1;transform:none}
.au-h{display:flex;align-items:center;gap:12px;margin-bottom:26px}.au-h img{width:36px;height:36px}.au-h b{font-size:24px}
.ui-auth .au-card{position:relative;inset:auto;padding:26px 22px 24px;border-radius:18px;background:#fff;opacity:1;transform:none;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.ui-auth .au-card b{display:block;margin:0 0 10px;font-size:26px;letter-spacing:-.01em}
.ui-auth .au-card>span{display:block;font-size:16px;color:#555}
.ui-auth .au-card p{margin:22px 0 16px;font-size:17px;line-height:1.4;color:#222}
.ui-auth .au-in{display:flex;gap:12px}
.ui-auth .au-in span{display:grid;place-items:center;width:74px;height:84px;border-radius:14px;border:2px solid #d0d3db;background:#fff;font-size:46px;font-weight:600;color:transparent}
.ui-auth .au-in span.is-on{color:#111;border-color:#0078d4}
.ui-auth .au-btn{position:static;display:grid;gap:12px;margin-top:26px}
.ui-auth .au-btn span{padding:16px;border-radius:12px;text-align:center;font-size:18px;background:#eceef3;color:#111}
.ui-auth .au-btn .yes{background:#0078d4;color:#fff;font-weight:600}
.ui-auth .au-tap{position:absolute;left:50%;bottom:34px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:rgba(0,120,212,.35);opacity:0}
.ui-auth .au-tap.is-on{animation:tap .8s ease-out forwards}
.ui-auth .au-ok{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:#f3f3f6;color:#111;opacity:0;transition:opacity var(--d-base) ease}
.ui-auth .au-ok.is-on{opacity:1}
.ui-auth .au-ok i{display:grid;place-items:center;width:110px;height:110px;border-radius:50%;background:#107c10;color:#fff;font-style:normal;font-size:58px}
.ui-auth .au-ok b{font-size:30px}.ui-auth .au-ok span{font-size:17px;color:#555}

/* ── Raumpanel + LED-Leisten ── */
.ui-panel{display:grid;grid-template-columns:1.25fr 1fr;background:#101114;color:#fff;font-family:"Segoe UI",Inter,sans-serif}
.rp-state{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 40px;background:#138a4a;transition:background var(--d-slow) ease}
.rp-state small{font-size:22px;opacity:.85}.rp-state b{font-size:60px;font-weight:600;letter-spacing:-.02em;line-height:1.05}.rp-state span{font-size:22px;opacity:.9}
.rp-side{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 34px}
.rp-side time{font-size:44px;font-weight:300}.rp-side p{margin:0;display:grid;gap:4px}.rp-side small{font-size:16px;color:rgba(255,255,255,.55)}.rp-side b{font-size:22px}.rp-side span{font-size:18px;color:rgba(255,255,255,.75)}
.rp-side em{align-self:flex-start;padding:12px 22px;border-radius:10px;background:rgba(255,255,255,.12);font-style:normal;font-size:18px}
.ui-panel .rp-busy{display:none}
.ui-panel:has(.k-busy.is-on) .rp-free{display:none}.ui-panel:has(.k-busy.is-on) .rp-busy{display:revert}
.ui-panel:has(.k-busy.is-on) .rp-state{background:#b3263a}

/* ── Präsentation auf dem Raum-Display ── */
.ui-present{background:#f7f7fa;color:#1b1a22;padding:44px 56px}
.pr-slide small{font-size:20px;color:#6a6f80}.pr-slide>b{display:block;margin:8px 0 26px;font-size:46px;letter-spacing:-.02em}
.pr-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.ui-present .um-bars{height:360px;margin:0}
.pr-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:22px}
.pr-cols li b{display:block;font-size:40px;color:#6b3ff0}.pr-cols li span{font-size:19px;color:#555a6b}
.scr--panel{border-radius:4px}

/* ── Microsoft 365 Backup: eigene, klare Erklärung ── */
.reel.is-film .m365b{position:fixed;z-index:7;right:calc(var(--gutter) + 52px);top:clamp(130px,19vh,190px);width:min(440px,32vw);opacity:0;visibility:hidden;transition:opacity var(--d-slow) ease,visibility 0s linear .7s}
.reel.is-film .m365b.is-on{opacity:1;visibility:visible;transition:opacity var(--d-slow) ease,visibility 0s}
.mb-src{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mb-src span{display:grid;justify-items:center;gap:8px;padding:14px 4px 12px;border-radius:14px;background:rgba(12,12,18,.72);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translate3d(0,10px,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease)}
.mb-src span.is-on{opacity:1;transform:none}
.mb-src img{width:28px;height:28px;object-fit:contain}.mb-src b{font-size:12.5px;font-weight:600;color:#fff}
.mb-flow{position:relative;height:44px}
.mb-flow i{position:absolute;left:50%;top:6px;bottom:8px;width:1.5px;background:linear-gradient(rgba(195,178,255,.1),rgba(195,178,255,.9));transform:scaleY(0);transform-origin:top;transition:transform var(--d-slow) var(--v5-ease)}
.mb-flow i::after{content:"";position:absolute;left:-4px;bottom:-2px;width:9px;height:9px;border-right:1.5px solid rgba(195,178,255,.9);border-bottom:1.5px solid rgba(195,178,255,.9);transform:rotate(45deg)}
.mb-flow.is-on i{transform:none}
.mb-dst{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:rgba(22,18,38,.86);border:1px solid rgba(195,178,255,.32);opacity:0;transition:opacity var(--d-base) ease}
.mb-dst.is-on{opacity:1}
.mb-dst .glyph{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(138,92,255,.25)}
.mb-dst .glyph svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6}
.mb-dst b{font-size:17px;color:#fff}.mb-dst small{font-size:13px;color:rgba(245,245,247,.6)}
.mb-restore{margin:14px 0 0;font-size:13px;color:rgba(245,245,247,.62);opacity:0;transition:opacity var(--d-base) ease}
.mb-restore::before{content:"↺";margin-right:8px;color:var(--lavender)}
.mb-restore.is-on{opacity:1}

/* IT-Monitoring-Liste oben rechts (Karte unten rechts hat Platz) */
.reel.is-film .hud--top{top:clamp(130px,18vh,190px);transform:translate3d(0,10px,0)}
.reel.is-film .hud--top.is-on{transform:none}

/* ═══ SharePoint-Bühne: echte Oberflächen als Produktbild (leicht gedreht, keine Glas-Boxen) ═══ */
.reel.is-film .spstage{position:fixed;z-index:6;right:calc(var(--gutter) + 40px);top:50%;width:min(880px,57vw);aspect-ratio:1280/800;margin-top:calc(min(880px,57vw) * -.3125 - 10px);perspective:1800px;opacity:0;visibility:hidden;transition:opacity var(--d-slow) ease,visibility 0s linear .8s;pointer-events:none}
.reel.is-film .spstage.is-on{opacity:1;visibility:visible;transition:opacity var(--d-slow) ease,visibility 0s}
.spstage .sp-pane{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;transform:scale(var(--k,.6)) rotateY(-7deg) translate3d(0,14px,0);border-radius:12px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);opacity:0;visibility:hidden;transition:opacity var(--d-slow) ease,transform var(--d-slow) var(--v5-ease),visibility 0s linear .7s}
.reel.is-film .spstage .sp-pane.is-on{opacity:1;visibility:visible;transform:scale(var(--k,.6)) rotateY(-7deg);transition:opacity var(--d-slow) ease .15s,transform var(--d-slow) var(--v5-ease),visibility 0s}
.spstage [data-at]{opacity:0;transform:translate3d(0,10px,0);transition:opacity var(--d-base) ease,transform var(--d-slow) var(--v5-ease)}
.spstage [data-at].is-on{opacity:1;transform:none}
/* Intranet-Startseite */
.sp-page{position:absolute;inset:0;background:#fff;color:#242424;font-size:14px}
.sp-browser{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;background:#f3f3f3;border-bottom:1px solid #e1e1e1}
.sp-browser i{width:11px;height:11px;border-radius:50%;background:#d5d5d5}
.sp-browser span{margin-left:14px;padding:4px 14px;border-radius:14px;background:#fff;font-size:12.5px;color:#555}
.sp-suite{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;background:#03787c;color:#fff}
.sp-suite svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6}.sp-suite b{font-size:15px}
.sp-q{margin:0 auto;width:360px;padding:6px 12px;border-radius:4px;background:rgba(255,255,255,.95);color:#605e5c;font-size:13px}
.sp-suite i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e8d9f7;color:#5b3fb5;font-style:normal;font-size:12px;font-weight:600}
.sp-head{display:flex;align-items:center;gap:16px;padding:14px 30px;border-bottom:1px solid #edebe9}
.sp-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:#03787c;color:#fff;font-weight:700;font-size:20px}
.sp-head b{font-size:21px;font-weight:600}.sp-head nav{display:flex;gap:18px;margin-top:5px;font-size:14px;color:#323130}
.sp-head nav .on{color:#03787c;font-weight:600;border-bottom:2px solid #03787c;padding-bottom:3px}.sp-head em{margin-left:auto;font-style:normal;color:#03787c;font-size:13.5px}
.sp-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto auto;gap:18px 26px;padding:20px 30px}
.sp-hero{grid-column:1;grid-row:1/3;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:330px}
.sp-hero figure{position:relative;margin:0;overflow:hidden;border-radius:4px}
.sp-hero figure.n0{grid-row:1/3}
.sp-hero img{width:100%;height:100%;object-fit:cover;display:block}
.sp-hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:14.5px;font-weight:600;line-height:1.3}
.sp-hero .n0 figcaption{font-size:20px;padding:40px 18px 16px}
.sp-hero figcaption small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.sp-hero figure.n3{display:none}
.sp-grid h6{margin:0 0 10px;font-size:16px;font-weight:600}
.sp-links{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;align-content:start}.sp-links h6{grid-column:1/-1}
.sp-links span{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:4px;background:#f3f9f9;font-size:13.5px;color:#03565a}
.sp-links svg{width:16px;height:16px;fill:none;stroke:#03787c;stroke-width:1.7}
.sp-docs{grid-column:2;grid-row:2/4}
.sp-docs ul{margin:0;padding:0;list-style:none}
.sp-docs li{display:grid;grid-template-columns:22px 1fr;gap:2px 10px;padding:8px 0;border-bottom:1px solid #f3f2f1}
.sp-docs img{grid-row:1/3;width:20px;height:20px}.sp-docs b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-docs span,.sp-docs em{font-size:12px;color:#605e5c;font-style:normal}
.sp-docs em{display:none}
.sp-dept{grid-column:1;grid-row:3}
.sp-dept div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sp-dept span{padding:14px 12px;border-radius:4px;border:1px solid #e1dfdd;font-size:14px;font-weight:600;color:#323130;border-top:3px solid #03787c}
.sp-events{display:none}
/* Struktur */
.sp-map{position:absolute;inset:0;background:#fbfbfa;color:#242424;padding:40px 48px}
.spm-root{display:flex;align-items:center;gap:16px;padding-bottom:24px;border-bottom:1px solid #e1dfdd}
.spm-root b{font-size:26px;font-weight:600}.spm-root small{margin-left:auto;padding:6px 12px;border-radius:99px;background:#e6f3f3;color:#03565a;font-size:14px}
.spm-sites{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.spm-b{padding:20px 22px;border-radius:8px;background:#fff;border:1px solid #e1dfdd;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.spm-b b{display:block;font-size:20px;font-weight:600}
.spm-b div{display:flex;gap:8px;margin:12px 0}
.spm-b div span{padding:6px 12px;border-radius:4px;background:#f3f2f1;font-size:14px;color:#323130}
.spm-b em{font-style:normal;display:inline-block;padding:5px 10px;border-radius:4px;background:#e7f6ec;color:#0e6b35;font-size:13.5px;font-weight:600}
.spm-note{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:15px;color:#605e5c}
.spm-note svg{width:18px;height:18px;fill:none;stroke:#03787c;stroke-width:1.7}
/* Power Automate + PowerShell */
.sp-flow{position:absolute;inset:0;background:#f5f5f5;color:#242424}
.fl-head{display:flex;align-items:center;gap:18px;height:50px;padding:0 22px;background:#fff;border-bottom:1px solid #e1dfdd}
.fl-head b{font-size:16px;color:#0066ff}.fl-head span{font-size:15px;font-weight:600}.fl-head em{margin-left:auto;font-style:normal;font-size:13px;color:#107c10}
.fl-canvas{display:flex;flex-direction:column;align-items:center;gap:0;padding:26px 0 0;background-image:radial-gradient(#dcdcdc 1px,transparent 1px);background-size:18px 18px;height:calc(100% - 50px)}
.fl-step{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;width:470px;padding:12px 16px;border-radius:6px;background:#fff;border:1px solid #d6d6d6;box-shadow:0 1px 4px rgba(0,0,0,.06);position:relative;margin-bottom:26px}
.fl-canvas>.fl-step:not(:last-of-type)::after{content:"";position:absolute;left:50%;bottom:-27px;width:1.5px;height:26px;background:#8a8886}
.fl-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;background:#f0f4ff}
.fl-ico img{width:22px;height:22px}.fl-ico svg{width:20px;height:20px;fill:none;stroke:#0066ff;stroke-width:1.7}
.fl-step b{display:block;font-size:14px;font-weight:600;line-height:1.3}.fl-step small{font-size:12.5px;color:#605e5c}
.fl-split{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fl-split>div{display:grid;justify-items:center;gap:8px}.fl-split small{font-size:12.5px;font-weight:600;color:#107c10}.fl-no small{color:#a4262c}
.fl-split .fl-step{width:360px;margin:0}
.fl-ps{position:absolute;right:22px;bottom:20px;width:560px;padding:14px 16px;border-radius:6px;background:#0c0c0c;color:#ccc;font:12.5px/1.55 "Cascadia Mono",Consolas,monospace;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.fl-ps p{margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fl-ps .h{color:#9a9a9a;margin-bottom:8px}.fl-ps b{color:#f9f1a5;font-weight:400}
/* Teams + Explorer */
.sp-access{position:absolute;inset:0;background:linear-gradient(160deg,#dfe6ef,#eef1f6)}
.sa-teams{position:absolute;left:34px;top:34px;width:720px;height:560px;display:grid;grid-template-columns:64px 1fr;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.st-rail{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:20px;background:#ebebeb}.st-rail i{width:26px;height:26px;border-radius:6px;background:#c8c8c8}.st-rail .on{background:#5b5fc7}
.st-main{padding:18px 22px;color:#242424}
.st-h{display:flex;align-items:center;gap:10px;font-size:18px}.st-h img{width:24px;height:24px}.st-h b{font-weight:600}.st-h span{color:#616161}
.st-tabs{display:flex;gap:22px;margin:14px 0 10px;border-bottom:1px solid #e0e0e0;font-size:14.5px;color:#424242}.st-tabs span{padding-bottom:8px}.st-tabs .on{color:#5b5fc7;font-weight:600;border-bottom:2.5px solid #5b5fc7}
.st-main ul{margin:0;padding:0;list-style:none}.st-main li{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid #f0f0f0;font-size:14.5px}
.st-main li img{width:20px;height:20px}.st-main li em{font-style:normal;color:#616161;font-size:13px}
.st-note{margin-top:14px;font-size:13px;color:#616161}
.sa-exp{position:absolute;right:34px;bottom:74px;width:640px;height:420px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 26px 70px rgba(0,0,0,.24);color:#1b1b1b}
.ex-t{display:flex;justify-content:space-between;align-items:center;height:40px;padding-left:16px;background:#f3f3f3;font-size:13.5px}
.ex-b{display:grid;grid-template-columns:230px 1fr;height:calc(100% - 40px)}
.ex-b aside{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-right:1px solid #eee;font-size:13.5px}
.ex-b aside span{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:4px}.ex-b aside .on{background:#e5f1fb}.ex-b aside .sub{padding-left:26px}
.ex-b svg{width:16px;height:16px;fill:none;stroke:#c19c00;stroke-width:1.7}
.ex-b aside span:first-child svg{stroke:#0f6cbd}.ex-b aside .on svg{stroke:#0f6cbd}
.ex-b main{padding:8px 12px;font-size:13.5px}
.ex-h,.ex-b main p{display:grid;grid-template-columns:1fr 60px 80px;gap:8px;align-items:center;margin:0;padding:8px 6px}
.ex-h{font-size:12.5px;color:#666;border-bottom:1px solid #eee}
.ex-b main p span{display:flex;align-items:center;gap:8px}
.ex-b main em{width:16px;height:16px;border-radius:50%;position:relative}
.ex-b main em.ok{background:#107c10}.ex-b main em.ok::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ex-b main em.cloud{border-radius:0;background:none;border:0}.ex-b main em.cloud::after{content:"";position:absolute;left:0;top:3px;width:16px;height:10px;border:1.5px solid #0f6cbd;border-radius:6px}
.ex-b main small{color:#666}
.sa-apps{position:absolute;left:34px;bottom:26px;display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:#323130}
.sa-apps small{margin-right:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#605e5c}
.sa-apps img{width:20px;height:20px}.sa-apps span{padding-left:10px;border-left:1px solid #c8c6c4}


/* ═══ V5a Feinschliff nach Sichtprüfung ═══ */
/* Schmale Spalte links (Motiv in der Mitte bleibt frei) */
.reel.is-film .at-side{width:min(300px,21vw)}
.reel.is-film .at-side.at-ml{top:26vh}
.reel.is-film .t-swap.at-side{top:clamp(150px,21vh,210px);bottom:auto}
.reel.is-film .at-side h2.say{font-size:clamp(22px,1.75vw,30px)!important}
.reel.is-film .at-side .t-words--big{font-size:clamp(30px,2.9vw,50px)}
.reel.is-film .t-soft.at-side .t-words--flow{flex-direction:column;align-items:flex-start;gap:6px}
.reel.is-film .t-soft.at-side .t-words--flow span::before{display:none}
/* Tischstreifen unter dem Monitor (Microsoft 365) */
.reel.is-film .at-strip{bottom:clamp(22px,4vh,40px);width:min(620px,46vw)}
.reel.is-film .at-strip h2.say{font-size:clamp(20px,1.7vw,28px)!important;max-width:none}
/* Kompakte Karte (verdeckt keine Geräte) */
.reel.is-film .readon--slim{width:min(340px,25vw);bottom:clamp(18px,3.4vh,34px);padding:14px 18px 12px;gap:6px 14px;border-radius:20px}
.readon--slim .readon__body em{display:none}
.readon--slim .readon__body strong{font-size:clamp(17px,1.3vw,21px)}
.readon--slim .readon__go{margin-top:2px;padding-top:10px}
.readon--slim .readon__go i{width:38px;height:38px}
/* IT-Monitoring im Nachthimmel */
.reel.is-film .hud--sky{right:auto;left:48vw;top:clamp(100px,13vh,150px);width:min(340px,26vw);transform:translate3d(0,10px,0)}
.reel.is-film .hud--sky.is-on{transform:none}
/* Marken im Meetingraum tiefer und kompakter */
.reel.is-film .at-b.t-spec--row{bottom:clamp(16px,2.6vh,30px)}
.t-spec--row .eyebrow{margin-bottom:8px}
.t-spec--row li{padding:10px 0 0}.t-spec--row li span{font-size:13px}
/* Weisse Oberflächen dem Raumlicht anpassen */
.scr--monitor .ui-admin{filter:brightness(.86) saturate(.96)}
.scr--monitor .ui-ol{filter:brightness(.94)}
/* SharePoint-Ansichten: grössere Schrift (Entwurf 1280 px, sichtbar ~0,6-fach) */
.sp-page{font-size:17px}
.sp-browser{height:40px}.sp-browser span{font-size:15px}
.sp-suite{height:52px}.sp-suite b{font-size:18px}.sp-q{font-size:15px;width:400px}
.sp-head{padding:16px 30px}.sp-head b{font-size:27px}.sp-head nav{font-size:17px;gap:22px}.sp-head em{font-size:16px}
.sp-grid{gap:20px 28px;padding:22px 30px}
.sp-hero{height:380px}.sp-hero figcaption{font-size:17px}.sp-hero .n0 figcaption{font-size:24px}.sp-hero figcaption small{font-size:13px}
.sp-grid h6{font-size:20px}
.sp-links span{font-size:16px;padding:10px 12px}.sp-links svg{width:19px;height:19px}
.sp-docs b{font-size:16px}.sp-docs span{font-size:14px}.sp-docs img{width:24px;height:24px}.sp-docs li{grid-template-columns:26px 1fr}
.sp-dept span{font-size:17px;padding:16px 14px}
.sp-map{padding:48px 56px}.spm-root b{font-size:34px}.spm-root small{font-size:17px}.spm-root .sp-logo{width:54px;height:54px;font-size:26px}
.spm-sites{gap:22px;margin-top:32px}.spm-b{padding:26px 28px}.spm-b b{font-size:26px}.spm-b div span{font-size:17px;padding:8px 14px}.spm-b em{font-size:16px;padding:6px 12px}
.spm-note{font-size:19px}.spm-note svg{width:22px;height:22px}
.fl-head{height:60px}.fl-head b{font-size:20px}.fl-head span{font-size:19px}.fl-head em{font-size:16px}
.fl-canvas{padding-top:30px}
.fl-step{width:640px;padding:16px 20px;grid-template-columns:48px 1fr;margin-bottom:30px}
.fl-canvas>.fl-step:not(:last-of-type)::after{bottom:-31px;height:30px}
.fl-ico{width:44px;height:44px}.fl-ico img{width:28px;height:28px}.fl-ico svg{width:24px;height:24px}
.fl-step b{font-size:18px}.fl-step small{font-size:15px}
.fl-split .fl-step{width:470px}.fl-split small{font-size:15px}
.fl-ps{width:720px;font-size:15px;padding:16px 18px}
.st-h{font-size:22px}.st-h img{width:30px;height:30px}.st-tabs{font-size:17px}.st-main li{font-size:17px}.st-main li img{width:24px;height:24px}.st-main li em{font-size:15px}.st-note{font-size:15px}
.ex-t{font-size:16px;height:44px}.ex-b aside{font-size:16px}.ex-b main{font-size:16px}.ex-h{font-size:14px}.ex-b svg{width:18px;height:18px}
.sa-exp{width:680px;height:450px}.sa-apps{font-size:17px}.sa-apps img{width:24px;height:24px}.sa-apps small{font-size:14px}
@media (max-width:860px){
  .reel.is-film .at-side,.reel.is-film .at-strip{left:16px;right:16px;top:auto;bottom:calc(20px + env(safe-area-inset-bottom));width:auto}
  .reel.is-film .readon--slim{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
  .reel.is-film .hud--sky{left:12px;right:12px;width:auto;top:76px}
}

/* ═══ Handy ═══ */
@media (max-width:860px){
  .reel.is-film .at-tl,.reel.is-film .at-ml,.reel.is-film .at-r,.reel.is-film .at-tr,.reel.is-film .at-b,.reel.is-film .at-bl-narrow,.reel.is-film .t-m365{left:16px;right:16px;top:auto;bottom:calc(20px + env(safe-area-inset-bottom));width:auto}
  .reel.is-film .at-r.t-spec--parts{top:76px;bottom:auto;padding:12px 16px;border-radius:16px;background:rgba(10,10,15,.82)}
  .t-spec--parts li{padding:7px 0;grid-template-columns:28px 1fr}.t-spec--parts li span{font-size:12.5px}.t-spec--parts li b{font-size:16px}
  .t-spec--row ol{grid-template-columns:1fr 1fr;row-gap:4px}.t-spec--row li span{display:none}
  .reel.is-film .t-say h2.say,.reel.is-film .t-line h2.say,.reel.is-film .t-swap h2.say,.reel.is-film .t-mark h2.say{font-size:clamp(22px,6.4vw,30px)}
  .t-words--big{font-size:clamp(30px,9vw,44px)}
  .marks{font-size:14px;line-height:1.65}
  .reel[data-card="1"] .t-say .lede,.reel[data-card="1"] .marks,.reel[data-card="1"] .t-words--flow{display:none}
  .reel.is-film .t-tick{left:16px;right:16px;width:auto;top:76px;bottom:auto}
  .tick{height:72px}.tk-ico{width:48px;height:48px}.tick b{font-size:24px}
  .reel.is-film .t-m365{display:none}
  .reel.is-film .spstage{left:12px;right:12px;width:auto;top:74px;margin-top:0}
  .reel.is-film .m365b{left:16px;right:16px;width:auto;top:76px}
  .anno{display:none}
  .pins--hover .pin b{font-size:12px}
  .reel.is-film .hud--top{top:76px}
  /* V5a: Desktop-Positionen mit höherer Spezifität zurücksetzen – am Handy liegt Text unten im freien Bereich */
  .reel.is-film .at-side.at-ml,.reel.is-film .t-swap.at-side,.reel.is-film .at-r.t-spec--parts{top:auto;bottom:calc(20px + env(safe-area-inset-bottom));left:16px;right:16px;width:auto}
  .reel.is-film .at-r.t-spec--parts{bottom:calc(196px + env(safe-area-inset-bottom));padding:0;border-radius:0;background:none}
  .t-spec--parts ol{grid-template-columns:1fr 1fr;column-gap:18px}
  .t-spec--parts li{border-top:1px solid rgba(255,255,255,.12)!important;padding:8px 0}.t-spec--parts li:first-child{border-top:1px solid rgba(255,255,255,.12)}
  .t-spec--parts li i{display:none}.t-spec--parts li{grid-template-columns:1fr}
  .reel.is-film .t-tick{top:auto;bottom:calc(24px + env(safe-area-inset-bottom))}
  .reel[data-card="1"] .t-soft .t-words--flow{display:flex}
  .reel.is-film .t-soft.at-side .t-words--flow{flex-direction:row;flex-wrap:wrap;gap:4px 14px;font-size:15px}
}
/* ═══ Ohne Film ═══ */
.reel:not(.is-film) .t-words span,.reel:not(.is-film) .t-spec li,.reel:not(.is-film) .hostline span,.reel:not(.is-film) .tick li:last-child,.reel:not(.is-film) .tick__row span{opacity:1;transform:none;filter:none}
.reel:not(.is-film) .tick{height:auto}.reel:not(.is-film) .tick li{position:relative;display:none}.reel:not(.is-film) .tick li:last-child{display:grid}
.reel:not(.is-film) .marks mark{color:#fff;background-size:100% 100%}
.reel:not(.is-film) .spstage,.reel:not(.is-film) .m365b{position:relative;max-width:560px}
.reel:not(.is-film) .spstage{display:none}
@media (prefers-reduced-motion:reduce){
  .swap>span,.dl-prog i,.ps-cur i,.pins--hover .pin i::after{animation:none!important}
  .swap>span:first-child{opacity:1}
}