/* PCFOX V26 — Design-System: Tokens, Typografie, Komponenten.
   Zwei Lichtwelten: tone-dark (Graphit) und tone-light (Studio). */

@font-face{
  font-family:"Inter V26";
  src:url("../../assets/fonts/inter-var-ext.woff2") format("woff2-variations"),url("../../assets/fonts/inter-var-ext.woff2") format("woff2");   /* V26: Inter 4.1 mit Latin Extended (Serbisch č ć š ž đ, Französisch) */
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --black:#050507;--ink:#08080c;--graphite:#0d0d12;
  --white:#ffffff;--paper:#f5f5f7;
  --violet:#8a5cff;--violet-2:#9f7cff;--violet-3:#6d45e8;--lavender:#c3b2ff;
  --ok:#35c97a;--ok-text:#7fe3ac;--tv:#0e8ee9;

  --font:"Inter V26","Inter","SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"SF Mono","Cascadia Mono",ui-monospace,Menlo,Consolas,monospace;

  --gutter:clamp(20px,4.4vw,80px);
  --maxw:1560px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Typo-Skala: wenige, klare Stufen */
  --t-display:clamp(64px,9.4vw,188px);
  --t-h2:clamp(42px,5.6vw,108px);
  --t-h3:clamp(18px,1.25vw,21px);
  --t-lede:clamp(17px,1.2vw,20px);
  --t-body:15.5px;
  --t-label:11.5px;
}

/* Lichtwelten */
.tone-dark{--fg:#fff;--fg-2:rgba(245,245,247,.66);--fg-3:rgba(245,245,247,.5);--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16);--surface:rgba(255,255,255,.05);--accent:var(--lavender);color:var(--fg)}
.tone-light{--fg:#0b0b10;--fg-2:rgba(11,11,16,.64);--fg-3:rgba(11,11,16,.44);--line:rgba(11,11,16,.1);--line-2:rgba(11,11,16,.16);--surface:rgba(255,255,255,.62);--accent:var(--violet-3);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--black);color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;min-width:320px;overflow-x:clip;background:var(--black);color:#fff;
  font-family:var(--font);font-size:var(--t-body);line-height:1.5;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lavender);outline-offset:3px;border-radius:8px}
.tone-light :focus-visible{outline-color:var(--violet-3)}
::selection{background:rgba(138,92,255,.35);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:400;padding:12px 16px;border-radius:12px;background:#fff;color:#000;font-weight:650}
.skip:focus{top:16px}
.wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}

/* V11: Seitenwechsel Start ↔ Themenseite als kurze Überblendung (View Transitions, Chromium/Safari; Firefox: normaler Wechsel).
   Die Navigation bleibt stehen, nur der Inhalt blendet. */
@view-transition{navigation:auto}
.v163-nav{view-transition-name:v163-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-fast);animation-timing-function:var(--e-smooth)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* ── Typografie ── */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:var(--t-label);font-weight:620;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.eyebrow b{font-weight:620;color:var(--fg);letter-spacing:.06em}
.eyebrow b::after{content:"";display:inline-block;width:26px;height:1px;margin-left:14px;vertical-align:middle;background:currentColor;opacity:.35}
h2{margin-top:20px;font-size:var(--t-h2);line-height:.94;font-weight:640;letter-spacing:-.045em;color:var(--fg);text-wrap:balance}
h2 span{color:var(--fg-3)}
h3{font-size:var(--t-h3);font-weight:620;letter-spacing:-.015em;color:var(--fg)}
.lede{margin-top:24px;max-width:30em;font-size:var(--t-lede);line-height:1.55;color:var(--fg-2)}
.label{font-size:var(--t-label);font-weight:620;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.fine{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--fg-3)}

/* ── Buttons & Links ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;white-space:nowrap;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:background var(--d-fast) var(--e-smooth),border-color var(--d-fast) var(--e-smooth);
}
.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.btn--solid{background:var(--paper);color:#0a0a0e;border-color:transparent;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.btn--solid:hover{background:#fff}
.link-quiet{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--fg);padding-bottom:4px;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);transition:border-color var(--d-fast) var(--e-smooth)}
.link-quiet:hover{border-color:var(--accent)}

/* ── Status: Grün nur für echte Betriebszustände ── */
.state{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px;font-weight:680;letter-spacing:.15em;text-transform:uppercase;color:var(--ok-text)}
.tone-light .state{color:#138a4d}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(53,201,122,.16)}
.chip{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--fg)}
.chip img{width:16px;height:16px;border-radius:4px}
.chip--neutral{color:var(--fg-2)}
.chip--neutral::before{content:"";width:7px;height:7px;border-radius:50%;background:#e0a13a}

/* ── Panel (ruhiges Rauchglas, nur wo Information gruppiert wird) ── */
.panel{
  padding:22px 24px 10px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 70px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
}
.panel__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;font-size:11px;font-weight:680;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.panel__head small{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--fg-3)}
.panel li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;color:var(--fg)}
.with-logo{display:inline-flex;align-items:center;gap:10px}

/* ── Aurora: gedämpfter violetter Lichtschleier (nur auf Graphit sichtbar) ── */
.aurora{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;mix-blend-mode:screen;will-change:opacity,transform}
.aurora i{position:absolute;width:72vmax;height:72vmax;border-radius:50%;will-change:transform;background:radial-gradient(circle,rgba(138,92,255,.2) 0%,rgba(109,69,232,.08) 36%,transparent 66%)}
.aurora i:nth-child(1){left:-26vmax;top:-30vmax;animation:drift-a 30s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-30vmax;top:8vh;width:62vmax;height:62vmax;background:radial-gradient(circle,rgba(195,178,255,.11) 0%,rgba(159,124,255,.05) 38%,transparent 66%);animation:drift-b 36s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:12vw;bottom:-46vmax;background:radial-gradient(circle,rgba(159,124,255,.16) 0%,rgba(109,69,232,.06) 36%,transparent 66%);animation:drift-c 42s ease-in-out infinite alternate}
@keyframes drift-a{50%{transform:translate3d(22vw,14vh,0) scale(1.14)}100%{transform:translate3d(8vw,30vh,0) scale(.94)}}
@keyframes drift-b{50%{transform:translate3d(-18vw,22vh,0) scale(.92)}100%{transform:translate3d(-6vw,-10vh,0) scale(1.12)}}
@keyframes drift-c{50%{transform:translate3d(26vw,-18vh,0) scale(1.1)}100%{transform:translate3d(-10vw,-8vh,0) scale(1)}}

/* ── Reveals: einmalig, maskiert von unten ── */
.js [data-reveal]{opacity:0;transform:translate3d(0,16px,0);transition:opacity var(--d-base) var(--e-smooth) var(--d,0ms),transform var(--d-slow) var(--e-smooth) var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.link-quiet{transition:none}
}

/* V25 (David 16.10.): kleines violettes Licht folgt dem Mauszeiger (src/motion/glow.js, nur Unterseiten, nur Maus). Hellt auf wie die
   Aurora (screen), liegt unter der Navigation. Kern zügig, Hof und Punkteraster fahren langsamer nach. Nur transform/opacity. */
.v25-cursor{position:fixed;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .7s ease}
.v25-cursor.is-on{opacity:1}
.v25-cursor i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.v25-cursor__halo{width:380px;height:380px;margin:-190px 0 0 -190px;
  background:radial-gradient(circle,rgba(150,108,255,.16) 0%,rgba(124,82,240,.08) 34%,rgba(109,69,232,.03) 56%,rgba(109,69,232,0) 70%)}
.v25-cursor__core{width:120px;height:120px;margin:-60px 0 0 -60px;
  background:radial-gradient(circle,rgba(196,170,255,.24) 0%,rgba(160,120,255,.12) 38%,rgba(138,92,255,0) 70%)}
.v25-cursor__grid{width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:0;
  background-image:radial-gradient(circle,rgba(205,186,255,.5) 0 1px,rgba(205,186,255,0) 1.6px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%);opacity:.75}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.v25-cursor{display:none}}

/* PCFOX V11 — Motion-Tokens. Zwei Tempi: die Kamera sehr langsam (im Film), Akzente kurz (hier).
   Eintritt: --d-fast/--d-base mit --e-smooth; Austritt immer --d-quick; nie Unschärfe auf Text.
   Die transitions.dev-Skala liegt als Alias daneben, damit Rezepte unverändert laufen. */
:root{
  --d-quick:150ms;--d-fast:240ms;--d-base:480ms;--d-slow:800ms;
  --e-smooth:cubic-bezier(.22,1,.36,1);--e-in:cubic-bezier(.2,0,0,1);
  --duration-stagger:40ms;--duration-micro:80ms;--duration-quick:150ms;--duration-fast:250ms;--duration-medium:350ms;--duration-slow:400ms;--duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(.22,1,.36,1);--ease-in-out:ease-in-out;--ease-out:ease-out;--ease-linear:linear;
  --distance-micro:4px;--distance-small:6px;--distance-base:8px;--distance-medium:12px;--distance-large:30px;
  --scale-large:.96;--scale-medium:.97;--scale-small:.98;--scale-tiny:.99;
  --blur-small:2px;--blur-medium:3px;--blur-large:8px;
}
@media (prefers-reduced-motion:reduce){
  :root{--d-quick:0ms;--d-fast:0ms;--d-base:0ms;--d-slow:0ms}
}

/* PCFOX V16.3 — completely isolated navigation component.
   No legacy .header/.island styles are used here. */
:root{
  --v163-bg-a:rgba(11,10,16,.92);
  --v163-bg-b:rgba(28,21,38,.88);
  --v163-line:rgba(223,214,255,.3);
  --v163-text:#fbfaff;
  --v163-muted:rgba(231,225,242,.55);
  --v163-purple:#a77cff;
  --v163-purple-soft:#d5c3ff;
}

.v163-nav{
  position:fixed;
  z-index:260;
  top:14px;
  left:50%;
  transform:translate3d(-50%,0,0);
  width:min(1260px,calc(100vw - 28px));               /* V6: 10 Register + CTA brauchen mehr Platz als 1010px (sonst umbrochener/überlappender Text) */
  height:62px;
  pointer-events:none;
  isolation:isolate;
  font-family:Inter,"SF Pro Display","Segoe UI Variable Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.v163-nav__compact,
.v163-nav__expanded{
  position:absolute;
  top:0;
  left:50%;
  border:1.5px solid var(--v163-line);                 /* V6: sichtbarer gegen helle wie dunkle Videoszenen */
  border-radius:999px;
  overflow:hidden;
  color:var(--v163-text);
  background:
    linear-gradient(118deg,var(--v163-bg-a),var(--v163-bg-b) 52%,rgba(10,9,15,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(169,124,255,.05),
    0 14px 40px rgba(0,0,0,.4),
    0 2px 10px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.2),
    0 0 44px rgba(150,105,235,.14);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  backface-visibility:hidden;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

.v163-nav__compact::before,
.v163-nav__expanded::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.06),transparent 28%,rgba(161,112,255,.05) 67%,transparent);
  mix-blend-mode:screen;
}

/* V6: „Liquid Glass“ – ein kleiner, unscharfer Lichtfleck aus Glas, der dem Zeiger in der Kapsel folgt
   (x UND y, vorher nur x), mit einem helleren Kern und einem feinen Rand-Glanz wie eine echte Glaslinse. */
.v163-nav__compact::after,
.v163-nav__expanded::after{
  content:"";
  position:absolute;
  z-index:1;
  left:var(--v163-x,50%);
  top:var(--v163-y,50%);
  width:190px;
  height:190px;
  margin:-95px 0 0 -95px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.5),rgba(210,190,255,.22) 34%,rgba(170,125,255,.08) 58%,transparent 75%);
  mix-blend-mode:screen;
  opacity:0;
  filter:blur(2px);
  transition:opacity var(--d-base) ease;
}
.v163-nav.is-hovering .v163-nav__compact::after,
.v163-nav.is-hovering .v163-nav__expanded::after{opacity:1}

.v163-nav__compact{
  width:370px;
  height:58px;
  padding:0 9px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center;
  transform:translate3d(-50%,0,0) scale(1);
  opacity:1;
  pointer-events:auto;
  transition:opacity var(--d-fast) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1);
}

.v163-nav__expanded{
  width:min(1230px,100%);
  height:60px;
  padding:0 11px 0 14px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:18px;
  transform:translate3d(-50%,0,0) scale(.965);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1);
}

.v163-nav.is-open .v163-nav__compact{opacity:0;transform:translate3d(-50%,0,0) scale(.955);pointer-events:none}
.v163-nav.is-open .v163-nav__expanded{opacity:1;transform:translate3d(-50%,0,0) scale(1);pointer-events:auto}

.v163-nav__mark,
.v163-nav__remote-orb{
  display:grid;
  place-items:center;
}

.v163-nav__mark,
.v163-nav__remote-orb{
  position:relative;
  z-index:2;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(220,207,255,.19);
  background:linear-gradient(145deg,rgba(166,123,255,.18),rgba(255,255,255,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 15px rgba(140,91,229,.07);
  color:white;
}
/* V24i (David 15.10.: «Logo auf der ersten Seite entfernen, im Menü etwas anderes»): links ein Menü-Knopf statt des Fuchses –
   öffnet die Navigation wie die Mitte. Zwei feine Linien wie bei Apple. */
.v163-nav__menu{appearance:none;padding:0;cursor:pointer;font:inherit}
.v163-menu-glyph{position:relative;display:block;width:16px;height:7px}
.v163-menu-glyph i{position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:#fbfaff}
.v163-menu-glyph i:first-child{top:0}.v163-menu-glyph i:last-child{bottom:0}

.v163-nav__current{
  position:relative;
  z-index:2;
  border:0;
  background:none;
  color:inherit;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 14px 2px;
  cursor:pointer;
  min-width:0;
}
.v163-nav__current small{
  font-size:7.5px;
  line-height:1;
  letter-spacing:.17em;
  font-weight:700;
  color:var(--v163-muted);
  margin-bottom:5px;
}
.v163-nav__current strong{
  font-size:13.5px;
  line-height:1;
  font-weight:720;
  letter-spacing:-.022em;
  white-space:nowrap;
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.8,.2,1),filter var(--d-quick) ease;
}
.v163-nav__current strong.is-changing{opacity:.18;transform:translate3d(0,4px,0);filter:blur(3px)}

.v163-nav__progress{
  position:absolute;
  z-index:3;
  left:52px;
  right:52px;
  bottom:4px;
  height:1px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.045);
}
.v163-nav__progress i{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#a77cff 0%,#d9c8ff 48%,rgba(255,255,255,.82) 100%);
  box-shadow:0 0 7px rgba(171,126,255,.32);
}

/* V24j (David 16.10.: «den alten TeamViewer, aber verbessern – nicht das originale TeamViewer verwenden»): das bisherige PCFOX-Zeichen
   (Doppelpfeil im Glas-Kreis) bleibt, nur klarer – heller Lavendel-Glas-Kreis wie der Menü-Knopf, feiner Ring, weisser Doppelpfeil als
   scharfes SVG (vorher dünn, unscharf und zum Rand hin dunkelviolett). */
.v163-nav__remote-orb{cursor:pointer;padding:0;border-color:rgba(225,212,255,.3);background:linear-gradient(145deg,rgba(178,140,255,.32),rgba(255,255,255,.07));
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 0 18px rgba(160,120,255,.22);transition:transform var(--d-quick) ease}
.v163-nav__remote-orb:hover{transform:scale(1.05)}
.v163-tv{display:block;width:26px;height:26px;overflow:visible}
.v163-tv circle{fill:none;stroke:rgba(222,208,255,.62);stroke-width:1.2}
.v163-tv path{fill:#fbfaff;stroke:#fbfaff;stroke-width:.5;stroke-linejoin:round;filter:drop-shadow(0 0 2.5px rgba(200,170,255,.75))}

.v163-nav__brand{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  height:42px;
  padding:0 8px 0 2px;
  white-space:nowrap;
  color:var(--v163-text);
}
.v163-nav__brand strong{font-size:13.5px;font-weight:750;letter-spacing:-.03em}

.v163-nav__links{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;                                /* V6: Boden bleibt eine Linie, wenn Links beim Vergrössern nach oben wachsen */
  gap:2px;
}
.v163-nav__links a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  /* V6: 10 Register + Marke + CTA passen nicht immer in eine Reihe. Statt bei einer festen Breite umzubrechen
     (siehe darunter, war der Fehler), schrumpfen Schrift und Polster fliessend zwischen 861px und 1320px Fensterbreite. */
  padding:0 clamp(4px,calc(4px + (100vw - 861px) * .0098),8px);          /* V14: neun Register + Globus + Fernwartung-Symbol */
  border-radius:999px;
  color:rgba(238,233,245,.67);
  font-size:clamp(10.5px,calc(10.5px + (100vw - 861px) * .00436),12.5px);
  font-weight:650;
  letter-spacing:-.012em;
  white-space:nowrap;                                  /* nie umbrechen – lieber schrumpfen/die Kapsel breiter (siehe oben) */
  transform-origin:50% 100%;
  transform:translateY(calc((var(--mag,1) - 1) * -11px)) scale(var(--mag,1));
  transition:color var(--d-quick) ease,background var(--d-fast) ease;
  z-index:1;
}
.v163-nav__links a:hover{color:#fff;background:rgba(255,255,255,.055);z-index:2}
.v163-nav__links a.is-active{color:#fff;background:linear-gradient(110deg,rgba(167,124,255,.12),rgba(255,255,255,.045));box-shadow:inset 0 0 0 1px rgba(204,184,255,.08)}

.v163-nav__remote{
  position:relative;
  z-index:2;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(215,202,255,.16);
  background:linear-gradient(115deg,rgba(168,126,255,.12),rgba(255,255,255,.05));
  color:#fff;
  padding:0 14px 0 9px;
  display:flex;
  align-items:center;
  gap:8px;
  font:inherit;
  font-size:12.5px;
  font-weight:690;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.10);
  transition:transform var(--d-quick) ease,background var(--d-quick) ease,border-color var(--d-quick) ease;
}
.v163-nav__remote:hover{transform:translateY(-1px);background:linear-gradient(115deg,rgba(174,132,255,.19),rgba(255,255,255,.07));border-color:rgba(222,207,255,.24)}
.v163-nav__remote .v163-tv{width:24px;height:24px}

/* V14: Sprachwahl als Globus-Symbol (rund wie die Marke und der Fernwartungs-Orb); die Liste hängt als eigenes Element an der Navigation,
   damit sie nicht von der abgerundeten Kapsel abgeschnitten wird. Position setzt i18n.js unter dem Globus. */
.v163-nav__lang{position:relative;z-index:2;display:flex;align-items:center}
.lang-globe{
  appearance:none;display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid rgba(220,207,255,.19);
  background:linear-gradient(145deg,rgba(166,123,255,.18),rgba(255,255,255,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 15px rgba(140,91,229,.07);
  color:var(--v163-text);
  transition:transform var(--d-quick) ease,background var(--d-quick) ease,border-color var(--d-quick) ease;
}
.lang-globe svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lang-globe:hover,.lang-globe[aria-expanded="true"]{transform:translateY(-1px);background:linear-gradient(145deg,rgba(176,134,255,.34),rgba(255,255,255,.08));border-color:rgba(222,207,255,.38)}
.lang-globe:focus-visible{outline:2px solid rgba(210,190,255,.7);outline-offset:2px}
.lang-menu{
  position:absolute;z-index:3;top:70px;left:0;min-width:184px;padding:6px;display:grid;gap:2px;
  border-radius:20px;border:1.5px solid var(--v163-line);
  background:linear-gradient(118deg,var(--v163-bg-a),var(--v163-bg-b) 52%,rgba(10,9,15,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 46px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35),0 0 38px rgba(150,105,235,.14);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  color:var(--v163-text);pointer-events:none;opacity:0;transform:translate3d(0,-6px,0) scale(.97);transform-origin:90% 0;
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1);
}
.lang-menu[hidden]{display:none}
.lang-menu a{text-decoration:none}   /* V26: Sprachwahl sind Links auf dieselbe Seite in der anderen Sprache */
.lang-menu.is-open{pointer-events:auto;opacity:1;transform:none}
.lang-menu :is(button,a){
  appearance:none;border:0;cursor:pointer;font:inherit;text-align:left;display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:14px;background:transparent;color:var(--v163-muted);font-size:13.5px;font-weight:600;
  transition:background var(--d-fast) ease,color var(--d-quick) ease;
}
.lang-menu :is(button,a) b{width:24px;font-size:10.5px;letter-spacing:.09em;font-weight:760;color:rgba(213,195,255,.78)}
.lang-menu :is(button,a):hover,.lang-menu :is(button,a):focus-visible{color:#fff;background:rgba(255,255,255,.07);outline:0}
.lang-menu :is(button,a).is-active{color:#fff;background:linear-gradient(120deg,rgba(167,124,255,.42),rgba(210,190,255,.2));box-shadow:inset 0 1px rgba(255,255,255,.18)}
.lang-menu :is(button,a).is-active::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:#e4d7ff;box-shadow:0 0 8px rgba(190,160,255,.8)}

/* V6: unter 1320px reicht die Reihe trotz Schrumpfen nicht mehr locker – „GmbH” und die CTA-Beschriftung
   verschwinden, das Kürzel und das reine Icon bleiben (Marke/CTA bleiben erkennbar, nur schmaler). */
/* V14: «GmbH» und die Beschriftung des Fernwartung-Symbols entfallen auf allen Desktop-Breiten (Fernwartung steht auch als Register) – sonst reicht die Kapsel mit neun Registern nicht. */
.v163-nav__gmbh{display:none}
.v163-nav__remote{padding:0 11px;position:relative}
.v163-nav__remote-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}  /* nur visuell weg, bleibt als Name für Screenreader */
.v163-nav__expanded{gap:12px}
@media(max-width:1020px){.v163-nav__brand{display:none}}

/* Mobile: compact capsule; tapping the center opens a floating menu sheet. */
@media(max-width:860px){
  .v163-nav{top:10px;width:calc(100vw - 20px);height:58px}
  .v163-nav__compact{width:min(340px,100%);height:54px}
  .v163-nav__expanded{
    width:min(390px,calc(100vw - 20px));height:auto;min-height:58px;
    padding:12px;grid-template-columns:1fr auto;gap:10px;
    border-radius:28px;
  }
  .v163-nav__brand{display:flex;grid-column:1;grid-row:1;padding-left:8px}.v163-nav__remote{grid-column:2;grid-row:1}
  .v163-nav__brand strong{font-size:15px}.v163-nav__gmbh{display:inline}
  .v163-nav__links{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,1fr);width:100%;gap:5px;padding-top:4px;align-items:stretch}
  .v163-nav__links a{justify-content:flex-start;padding:8px 14px;height:auto;white-space:normal;line-height:1.25;background:rgba(255,255,255,.025);transform:none}
  .v163-nav__lang{grid-column:1/-1;grid-row:3;justify-content:center;margin-top:2px}
  .lang-menu{min-width:min(220px,calc(100vw - 40px))}
}

@media(prefers-reduced-motion:reduce){
  .v163-nav__compact,.v163-nav__expanded,.v163-nav__current strong,.v163-nav__remote-orb{transition:none!important;animation:none!important}
}

/* V25: Orb und Fernwartung sind Links (scrollen zu #remote), Tastaturfokus sichtbar. */
.v163-nav a{text-decoration:none}
.v163-nav__remote{font-family:inherit}

/* V6: Hinweis „Seite bisher nur Deutsch" — erscheint nur bei EN/FR, einmal pro Sitzung wegklickbar. */
.i18n-notice{
  position:fixed;
  z-index:250;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(440px,calc(100vw - 32px));
  padding:10px 10px 10px 16px;
  border-radius:14px;
  border:1px solid rgba(223,214,255,.22);
  background:linear-gradient(118deg,rgba(11,10,16,.92),rgba(28,21,38,.88) 52%,rgba(10,9,15,.94));
  color:var(--v163-text);
  font:500 12.5px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 30px rgba(150,105,235,.12);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  animation:i18n-in .4s cubic-bezier(.2,.85,.2,1);
}
.i18n-notice span{flex:1}
.i18n-notice button{
  appearance:none;border:0;cursor:pointer;flex:none;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--v163-muted);
  background:rgba(255,255,255,.06);
  font-size:15px;line-height:1;
  transition:color var(--d-quick) ease,background var(--d-quick) ease;
}
.i18n-notice button:hover{color:#fff;background:rgba(255,255,255,.12)}
@keyframes i18n-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:860px){.i18n-notice{bottom:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.i18n-notice{animation:none}}
.v163-nav :focus-visible{outline:2px solid #c3b2ff;outline-offset:2px}
.v163-nav__current:focus-visible{outline-offset:-4px;border-radius:999px}


/* V27 (David 17.10.: «Menüleiste auf dem Handy schöner»): schmales Handy – das offene Menü als ruhige Liste statt zweispaltiger Chips:
   eine Zeile je Thema (17 px, feine Trennlinien, Pfeil rechts, aktives Thema in Lavendel), darunter Sprache und Fernwartung nebeneinander. */
@media(max-width:480px){
  .v163-nav{top:8px;width:calc(100vw - 16px)}
  .v163-nav__expanded{width:calc(100vw - 16px);padding:14px 14px 14px;border-radius:26px;max-height:calc(100svh - 20px);overflow:auto;background:rgba(12,11,18,.94)}   /* dichter: der Seitentext scheint nicht durch */
  .v163-nav__brand{padding:6px 0 4px 8px}.v163-nav__brand strong{font-size:17px}
  .v163-nav__links{grid-template-columns:1fr;gap:0;padding:8px 0 4px}
  .v163-nav__links a{position:relative;padding:12px 34px 12px 10px;font-size:16.5px;font-weight:560;letter-spacing:-.01em;border-radius:12px;border-bottom:1px solid rgba(255,255,255,.07);background:none;color:rgba(245,245,247,.86)}
  .v163-nav__links a:last-child{border-bottom:0}
  .v163-nav__links a::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.5px solid rgba(195,178,255,.6);border-bottom:1.5px solid rgba(195,178,255,.6);transform:translateY(-50%) rotate(-45deg)}
  .v163-nav__links a.is-active{color:#fff;background:linear-gradient(90deg,rgba(167,124,255,.16),rgba(167,124,255,0));box-shadow:none}
  .v163-nav__links a.is-active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--lavender,#c3b2ff)}
  .v163-nav__lang{grid-column:1;grid-row:3;justify-content:flex-start;margin-top:6px;padding-left:4px}
  .v163-nav__remote{grid-column:2;grid-row:3;align-self:center;margin-top:6px}
}

/* PCFOX V26 — Szenen. Jede Szene ist eine Bühne (sticky), der Film ist der Hauptinhalt,
   HTML liegt ruhig darüber. Scroll-Fortschritt kommt als --p / --win / --hp aus JS. */

/* ── Grundgerüst ── */
/* V28: kürzere Scroll-Strecken — die Seite lässt sich schnell durchscrollen, die Sequenz läuft mit */
.scene{position:relative;height:var(--len,190vh);background:var(--black)}
.scene.tone-light{background:var(--black)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.scene.tone-light > .stage{background:var(--paper)}

/* Fenster-Übergang: die nächste Welt öffnet sich wie ein Bildschirm, dem die Kamera näherkommt */
.scene[data-window] .stage{clip-path:inset(calc(var(--win,0) * 14%) calc(var(--win,0) * 20%) round calc(var(--win,0) * 36px))}

/* Film-Ebene. Ohne freigegebenen Film: ruhige Lichtstimmung bzw. Poster. */
.film{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(ellipse 40% 46% at 66% 36%,rgba(245,245,247,.07),transparent 70%),radial-gradient(ellipse 26% 70% at 100% 60%,rgba(138,92,255,.12),transparent 72%),linear-gradient(180deg,#0c0c11,#07070a 60%,#0a0a0e)}
.film--studio{background:radial-gradient(ellipse 70% 60% at 50% 38%,#fff,#f2f2f5 60%,#e8e8ec)}
.film.has-poster{background:var(--poster) center/cover no-repeat,var(--ink)}
.film--studio.has-poster{background:var(--poster) center/cover no-repeat,var(--paper)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--d-slow) ease;
  transform:translate3d(0,var(--fy,0px),0) scale(var(--fs,1.04));will-change:transform}
.film.is-live video{opacity:1}
/* V28: Bildsequenz auf Canvas (sequence.js) */
.film canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--d-base) ease}
.film.is-live canvas{opacity:1}
/* Studio-Flächen: Vorschaubild ausblenden, sobald die Sequenz zeichnet (sonst scheint es hinter dem ausgeblendeten Rand durch) */
.film.film--box.is-live{background:none}
/* Graphit-Szenen blenden beim Eintritt aus dem Schwarz auf (--in aus motion.js) */
.scene:not([data-window]) > .stage > .film{opacity:calc(.12 + .88 * var(--in,1))}
/* Studio-Filme in eigener Bühnenfläche: Ränder laufen weich ins Studio-Weiss aus, Typografie behält Raum */
.film--box{inset:var(--box);background:transparent;
  -webkit-mask-image:radial-gradient(ellipse closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 74%,transparent 100%)}
.film--box video{object-fit:contain;transform:none}  /* eigene Fläche: kein Tiefen-Zoom, damit nichts an die Ränder läuft */
.film--box.has-poster{background:var(--poster) center/contain no-repeat}
.scene--anatomy .film--box{--box:8% 0 0 27%}
/* Fernwartung: exakte 16:9-Fläche, weiche Ränder an allen vier Seiten (kein Oval, das die Laptop-Ecken anschneidet) */
.scene--remote .film--box{inset:auto;left:50%;top:54%;width:min(70vw,1110px,calc(56svh * 16 / 9));aspect-ratio:16/9;translate:-50% -50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}
.scene--remote .film--box video{object-fit:cover}
.show-slots .film.is-pending::before{content:"FILM · " attr(data-slot) " · ausstehend";position:absolute;right:var(--gutter);top:92px;z-index:3;padding:7px 12px;border-radius:999px;border:1px dashed rgba(195,178,255,.35);font:500 10.5px/1 var(--mono);color:rgba(195,178,255,.75);background:rgba(5,5,7,.5)}

/* Schleier für Lesbarkeit */
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,7,.78),rgba(5,5,7,.3) 42%,rgba(5,5,7,0) 66%),linear-gradient(0deg,rgba(5,5,7,.82),rgba(5,5,7,0) 48%)}
.scene.tone-dark > .stage::before{content:"";position:absolute;left:0;right:0;top:0;height:22vh;z-index:1;pointer-events:none;background:linear-gradient(var(--black),rgba(5,5,7,0))}
.scene.tone-dark > .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16vh;z-index:1;pointer-events:none;background:linear-gradient(rgba(5,5,7,0),var(--black))}
#home .stage::before{display:none}
.veil--light{background:linear-gradient(180deg,rgba(245,245,247,.9) 0%,rgba(245,245,247,.35) 26%,rgba(245,245,247,0) 42%,rgba(245,245,247,0) 70%,rgba(245,245,247,.92) 100%)}

/* ═══ HERO ═══ */
.scene--hero{--len:180vh}
.veil--hero{background:linear-gradient(90deg,rgba(5,5,7,.72),rgba(5,5,7,.2) 46%,rgba(5,5,7,0) 62%),linear-gradient(0deg,rgba(5,5,7,.7),rgba(5,5,7,0) 36%)}
.hero{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:120px 0 clamp(40px,8vh,90px);
  transform:translate3d(0,calc(var(--hp,0) * -8vh),0);opacity:calc(1 - var(--hp,0) * 1.2)}
.hero__eyebrow{color:var(--lavender)}
.hero__title{margin:22px 0 0 -.05em;font-size:var(--t-display);line-height:.86;font-weight:700;letter-spacing:-.065em;color:#fff}
.hero__title .w{display:block}
.hero__title .w--thin{font-weight:280;color:rgba(245,245,247,.62);letter-spacing:-.055em}
.hero__title .ch::before{content:attr(data-c)}
.hero__title .ch{display:inline-block;animation:ch-in 1.25s var(--ease-out) both;animation-delay:calc(140ms + var(--i) * 50ms)}
.hero__claim{margin-top:clamp(20px,3vh,34px);font-size:clamp(20px,1.9vw,32px);font-weight:500;letter-spacing:-.025em;color:var(--paper)}
.hero__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(30px,6vh,64px)}
.hero__foot .link-quiet{margin-left:12px;color:#fff}
.hero__eyebrow,.hero__claim,.hero__foot{animation:rise 1.2s var(--ease-out) both}
.hero__eyebrow{animation-delay:40ms}.hero__claim{animation-delay:560ms}.hero__foot{animation-delay:720ms}
@keyframes ch-in{from{opacity:0;transform:translate3d(0,.3em,0);filter:blur(12px)}}
@keyframes rise{from{opacity:0;transform:translate3d(0,24px,0)}}
.hero-light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--d-slow) ease;background:radial-gradient(520px circle at var(--mx,62%) var(--my,40%),rgba(195,178,255,.09),transparent 65%)}
.hero-light.is-on{opacity:1}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:26px;translate:-50% 0;width:1px;height:46px;overflow:hidden;background:rgba(255,255,255,.14);animation:rise 1s 1.2s both}
.scroll-cue i{position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--lavender);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* ═══ ANATOMIE ═══ */
.scene--anatomy{--len:240vh}
.anatomy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:none}
.anatomy > *{max-width:26vw}
.anatomy .eyebrow{color:var(--violet-3)}
.anatomy h2{font-size:clamp(40px,4.4vw,86px)}
.anatomy__note{margin-top:26px;font-size:var(--t-lede);line-height:1.5;color:var(--fg-2)}
.anatomy__tags{position:absolute;z-index:2;right:var(--gutter);top:50%;translate:0 -50%;display:grid;gap:18px;text-align:right}
.anatomy__tags li{font-size:clamp(15px,1.1vw,18px);font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.anatomy__tags li::before{content:"";display:inline-block;width:34px;height:1px;margin-right:14px;vertical-align:middle;background:var(--violet-3);opacity:.6}
[data-at]{opacity:.0;transform:translate3d(0,10px,0);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
[data-at].is-on{opacity:1;transform:none}

/* ═══ FERNWARTUNG ═══ */
.scene--remote{--len:230vh}
.remote{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:110px 0 clamp(28px,5vh,56px)}
.remote__head{display:flex;flex-direction:column}
.remote__head h2{font-size:clamp(40px,4.6vw,88px)}
.story{align-self:end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);border-top:1px solid var(--line-2);padding-top:22px}
.story__step{display:grid;gap:10px;align-content:start;opacity:.32;transition:opacity var(--d-base) var(--ease-out)}
.story__step.is-active,.story__step.is-done{opacity:1}
.story__step.is-done:not(.is-active){opacity:.55}
.story__n{font:600 12px/1 var(--mono);color:var(--violet-3)}
.story__step strong{font-size:clamp(20px,1.7vw,28px);font-weight:620;letter-spacing:-.025em}
.story__step .chip{justify-self:start}
.remote__dl{position:absolute;right:0;top:110px;width:min(380px,32vw)}
.downloads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dl{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-radius:16px;background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:0 10px 30px rgba(11,11,16,.06);transition:border-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.dl:hover{border-color:var(--line-2);transform:translate3d(0,-2px,0)}
.dl img{width:18px;height:18px;filter:invert(1) brightness(.2)}
.dl span{flex:1;display:grid;line-height:1.25}
.dl strong{font-size:15px;font-weight:640}
.dl small{font-size:12px;color:var(--fg-3)}
.dl i{font-style:normal;color:var(--violet-3)}

/* ═══ WEBSITE & HOSTING ═══ */
.scene--web{--len:260vh}
.scene--web .stage{background:radial-gradient(ellipse 80% 70% at 62% 50%,#fff,var(--paper) 70%)}
.web{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;opacity:calc(1 - var(--live,0) * 1.6)}
.web > *{max-width:24vw}
.web__head h2{font-size:clamp(40px,4.2vw,84px)}
.web__phases{margin-top:clamp(28px,5vh,52px);display:grid;gap:4px}
.web__phases li{display:flex;align-items:baseline;gap:16px;padding:10px 0;font-size:clamp(17px,1.3vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--fg-3);border-top:1px solid var(--line);transition:color var(--d-base) var(--ease-out)}
.web__phases b{font:600 12px/1 var(--mono);color:var(--violet-3);opacity:.6}
.web__phases li.is-active{color:var(--fg)}
.web__phases li.is-active b{opacity:1}
.web__caption{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(28px,5vh,56px);opacity:calc(1 - var(--live,0) * 2)}
.web__dusk{position:absolute;inset:0;z-index:6;background:var(--black);opacity:var(--dusk,0);pointer-events:none}

.browser{
  --bx:0px;--by:0px;--bs:1;
  position:absolute;z-index:2;right:var(--gutter);top:50%;width:min(66vw,1180px);aspect-ratio:16/10;
  translate:0 -50%;transform-origin:50% 50%;
  transform:translate3d(calc(var(--bx) * var(--live,0)),calc(var(--by) * var(--live,0)),0) scale(calc(1 + (var(--bs) - 1) * var(--live,0)));
  border-radius:calc(18px * (1 - var(--live,0)));overflow:hidden;background:#fff;
  box-shadow:0 60px 120px rgba(11,11,16,calc(.18 * (1 - var(--live,0)))),0 0 0 1px rgba(11,11,16,calc(.08 * (1 - var(--live,0))));
  will-change:transform;
}
.browser__bar{height:44px;display:flex;align-items:center;gap:16px;padding:0 16px;background:#f3f3f5;border-bottom:1px solid rgba(11,11,16,.07);opacity:calc(1 - var(--live,0) * 2)}
.browser__dots{display:flex;gap:7px}.browser__dots i{width:11px;height:11px;border-radius:50%;background:#dcdce0}
.browser__url{flex:1;max-width:420px;margin-inline:auto;height:28px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;background:#fff;border:1px solid rgba(11,11,16,.07);font-size:12.5px;font-weight:550;color:#3c3c44}
.browser__lock{color:#138a4d;opacity:clamp(0,calc((var(--p,0) - .5) * 14),1)}
.browser__tag{font-size:10.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,16,.42)}
.browser__view{position:relative;height:calc(100% - 44px)}

/* 01 Design-System */
.ds{position:absolute;inset:0;padding:6% 7%;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr auto;gap:6%;background:#fbfbfc;
  opacity:clamp(0,calc((.3 - var(--p,0)) * 10),1)}
.ds__grid{position:absolute;inset:0 7%;display:grid;grid-template-columns:repeat(12,1fr);gap:1.6%}
.ds__grid i{background:rgba(138,92,255,.06);border-inline:1px solid rgba(138,92,255,.14);transform-origin:top;transform:scaleY(clamp(0,calc(var(--p,0) * 14),1))}
.ds__type{position:relative;align-self:center;display:grid;gap:8px;opacity:clamp(0,calc((var(--p,0) - .05) * 12),1)}
.ds__aa{font-size:clamp(60px,9vw,150px);font-weight:680;letter-spacing:-.06em;line-height:.9;color:#101014}
.ds__meta{font:500 12px/1.4 var(--mono);color:rgba(11,11,16,.5)}
.ds__swatches{position:relative;align-self:center;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;opacity:clamp(0,calc((var(--p,0) - .09) * 12),1)}
.ds__swatches i{aspect-ratio:1/1.3;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(11,11,16,.08)}
.ds__scale{position:relative;grid-column:1/-1;display:flex;align-items:flex-end;gap:14px;opacity:clamp(0,calc((var(--p,0) - .13) * 12),1)}
.ds__scale i{height:8px;background:#101014;border-radius:2px}
.ds__scale i:nth-child(1){width:8px}.ds__scale i:nth-child(2){width:16px}.ds__scale i:nth-child(3){width:24px}.ds__scale i:nth-child(4){width:40px}.ds__scale i:nth-child(5){width:64px}.ds__scale i:nth-child(6){width:104px}

/* 02 Beispiel-Website (baut sich auf) */
.site{position:absolute;inset:0;background:#f4f1ec;color:#141414;overflow:hidden;opacity:clamp(0,calc((var(--p,0) - .2) * 12),1)}
.site__nav{position:absolute;z-index:2;left:0;right:0;top:0;height:11%;display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:#fff;
  opacity:clamp(0,calc((var(--p,0) - .23) * 14),1);translate:0 calc((1 - clamp(0,calc((var(--p,0) - .23) * 14),1)) * -12px)}
.site__logo{font-size:clamp(10px,1vw,15px);font-weight:700;letter-spacing:.24em}
.site__logo b{font-weight:300;margin-left:.4em}
.site__links{display:flex;gap:2.4em;font-size:clamp(8px,.78vw,12px);font-weight:500;letter-spacing:.06em}
.site__links i{font-style:normal}
.site__hero{position:absolute;left:0;right:0;top:0;height:74%;overflow:hidden;
  clip-path:inset(0 0 calc((1 - clamp(0,calc((var(--p,0) - .26) * 9),1)) * 100%) 0)}
.site__hero img{width:100%;height:100%;object-fit:cover;scale:calc(1.12 - clamp(0,calc((var(--p,0) - .26) * 4),1) * .12)}
.site__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(20deg,rgba(10,12,18,.62) 0%,rgba(10,12,18,.25) 34%,rgba(10,12,18,0) 58%),linear-gradient(180deg,rgba(10,12,18,.32),rgba(10,12,18,0) 22%)}
.site__copy{position:absolute;z-index:1;left:5%;bottom:10%;display:grid;gap:.9em;color:#fff;opacity:clamp(0,calc((var(--p,0) - .33) * 12),1);translate:0 calc((1 - clamp(0,calc((var(--p,0) - .33) * 12),1)) * 16px)}
.site__kicker{font-size:clamp(7px,.72vw,11px);font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.site__h{font-size:clamp(22px,3.4vw,58px);font-weight:600;letter-spacing:-.04em;line-height:.95;font-optical-sizing:auto}
.site__btn{justify-self:start;padding:.8em 1.4em;border-radius:999px;background:#fff;color:#141414;font-size:clamp(7px,.72vw,11px);font-weight:650}
.site__row{position:absolute;left:5%;right:5%;top:79%;height:40%;display:grid;grid-template-columns:1.1fr 1fr;gap:4%;
  opacity:clamp(0,calc((var(--p,0) - .38) * 12),1);translate:0 calc((1 - clamp(0,calc((var(--p,0) - .38) * 12),1)) * 20px)}
.site__row figure{overflow:hidden;border-radius:4px}.site__row img{width:100%;height:100%;object-fit:cover}
.site__text{display:grid;align-content:start;gap:.8em;padding-top:2%}
.site__h2{font-size:clamp(14px,1.8vw,30px);font-weight:600;letter-spacing:-.03em}
.site__p{height:.6em;width:90%;border-radius:2px;background:rgba(20,20,20,.12)}.site__p--s{width:62%}

/* 03 Deployment */
.deploy{position:absolute;z-index:3;left:50%;bottom:6%;translate:-50% 0;display:flex;align-items:center;gap:6px;padding:8px;border-radius:999px;background:rgba(12,12,16,.86);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.25);
  opacity:clamp(0,calc(min((var(--p,0) - .45) * 14,(.74 - var(--p,0)) * 14)),1)}
.deploy__step{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;color:rgba(255,255,255,.45);transition:color var(--d-base) ease,background var(--d-base) ease}
.deploy__step i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:background var(--d-base) ease}
.deploy__step.is-done{color:#fff}.deploy__step.is-done i{background:var(--ok)}
.deploy__step .state{color:rgba(255,255,255,.4)}.deploy__step .state::before{background:rgba(255,255,255,.3);box-shadow:none}
.deploy__step.is-done .state{color:var(--ok-text)}.deploy__step.is-done .state::before{background:var(--ok);box-shadow:0 0 0 3px rgba(53,201,122,.2)}

/* ═══ Graphit-Szenen (Cloud, Infrastruktur, Sicherheit, Monitoring) ═══ */
.copy{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:end;gap:clamp(32px,6vw,120px);padding:120px 0 clamp(52px,10vh,120px)}
.copy--stack{grid-template-columns:1fr;align-content:end;row-gap:0}
.copy > .panel,.copy > .feeds{justify-self:end;width:min(100%,440px)}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(40px,7vh,80px)}
.services li{display:flex;gap:14px;align-items:flex-start;padding-top:20px;border-top:1px solid var(--line-2)}
.services img{width:24px;height:24px;object-fit:contain;flex:none;margin-top:2px}
.services h3{font-size:16px}.services p{margin-top:4px;font-size:13.5px;color:var(--fg-3)}
.apps{display:flex;align-items:center;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.apps img{width:20px;height:20px;object-fit:contain;opacity:.88}
.panel--endpoint .endpoint{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 12px;border-top:1px solid var(--line);font-size:16px}
.chain{position:absolute;z-index:2;left:0;right:0;bottom:clamp(20px,3.4vh,36px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 0}
.chain li{display:flex;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--fg-2)}
.chain li:not(:last-child)::after{content:"";width:clamp(18px,3vw,54px);height:1px;margin:0 14px;background:linear-gradient(90deg,rgba(195,178,255,.5),rgba(195,178,255,.15))}
#security .copy{padding-bottom:clamp(96px,16vh,150px)}
.products{margin-top:30px;max-width:520px}
.products li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.products p{font-size:13px;color:var(--fg-3)}
.feeds{padding:18px;border-radius:24px;background:rgba(10,10,14,.55);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.feeds time{font-family:var(--mono);letter-spacing:.04em;margin-left:8px;color:var(--fg-2)}
.feeds__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feed{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#131318,#0a0a0e)}
.feed canvas{width:100%;height:100%;opacity:0;transition:opacity var(--d-base) ease}
.feeds.is-live canvas{opacity:1}
.feed figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:18px 10px 8px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.62));font-size:10.5px;font-weight:600;letter-spacing:.05em;color:#fff}
.feed .state{font-size:9.5px;gap:6px}.feed .state::before{width:6px;height:6px}

/* ═══ TEAM ═══ */
.team{position:relative;z-index:6;padding:clamp(120px,18vh,200px) 0 clamp(90px,14vh,160px)}
.team__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin-top:clamp(48px,8vh,88px)}
.person__media{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#f1f1f3;border:1px solid var(--line);transition:transform var(--d-slow) var(--ease-out),border-color var(--d-fast) ease}
.person:hover .person__media{transform:translate3d(0,-6px,0);border-color:rgba(195,178,255,.3)}
.person__media img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 30%);transform:scale(var(--zoom,1));transform-origin:var(--focus,50% 30%);filter:brightness(.97)}
.person figcaption{display:grid;gap:3px;padding:18px 4px 0}
.person strong{font-size:17px;font-weight:640;letter-spacing:-.02em}
.person figcaption span{font-size:13.5px;color:var(--fg-3)}
.person--type .person__media{display:grid;place-items:center;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(138,92,255,.15),transparent 70%),linear-gradient(165deg,#16141d,#0b0b10 70%)}
.person--type .person__media span{font-size:clamp(56px,6vw,104px);font-weight:240;letter-spacing:-.05em;color:var(--lavender)}

/* ═══ KONTAKT ═══ */
.contact{position:relative;z-index:6;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.contact__inner{padding:140px 0 110px}
.contact h2{font-size:clamp(42px,6vw,112px)}
.bubbles{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(40px,7vh,72px)}
.bubble-wrap{position:relative}
.bubble{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:26px;min-width:min(360px,calc(100vw - 2*var(--gutter)));padding:24px 26px 24px 32px;border-radius:999px;text-align:left;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);transition:border-color var(--d-fast) var(--ease),background var(--d-fast) var(--ease)}
.bubble:hover,.bubble[aria-expanded="true"]{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.09)}
.bubble small{font-size:11px;font-weight:680;letter-spacing:.2em;text-transform:uppercase;color:var(--lavender)}
.bubble strong{grid-column:1;margin-top:4px;font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.02em}
.bubble i{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-style:normal;font-size:20px;font-weight:300;border:1px solid rgba(255,255,255,.16);transition:transform var(--d-fast) var(--ease)}
.bubble[aria-expanded="true"] i{transform:rotate(45deg)}
.menu{position:absolute;z-index:5;top:calc(100% + 10px);left:0;width:max(100%,260px);padding:8px;border-radius:22px;background:rgba(16,15,22,.92);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.menu[hidden]{display:none}
.menu a{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:15px;font-size:15px;font-weight:560;transition:background var(--d-quick) ease}
.menu a:hover,.menu a:focus-visible{background:rgba(255,255,255,.07)}
.menu a span{color:var(--lavender)}
.contact__form{margin-top:36px}

/* ═══ Footer ═══ */
.footer{position:relative;z-index:6;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding:34px 0 44px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-3)}
.footer__brand img{width:auto;height:34px;opacity:.92}
.footer a:not(.footer__brand){border-bottom:1px solid rgba(195,178,255,.3)}

/* ═══ Tablet ═══ */
@media (max-width:1100px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .copy{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr)}
  .anatomy > *{max-width:34vw}
  .web > *{max-width:30vw}
  .browser{width:62vw}
}

/* ═══ Mobile: eigene Dramaturgie — kaum Pinning, klare Bilder, grosse Touch-Ziele ═══ */
@media (max-width:860px){
  .scene,.scene--hero,.scene--anatomy,.scene--remote,.scene--web{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .scene[data-window] .stage{clip-path:none}
  .film video{transform:none;will-change:auto}
  .veil{background:linear-gradient(0deg,rgba(5,5,7,.95),rgba(5,5,7,.72) 48%,rgba(5,5,7,.2))}
  .scene--hero .stage{display:flex;flex-direction:column;justify-content:flex-end}
  .scene--hero .film{bottom:auto;height:58svh}
  .veil--hero{background:linear-gradient(0deg,var(--black) 38%,rgba(5,5,7,.55) 58%,rgba(5,5,7,0) 80%)}
  .hero{height:auto;justify-content:flex-end;padding:44svh 0 56px;transform:none;opacity:1}
  .film--box{inset:auto;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
  .scene--hero .film video,.scene--hero .film.has-poster{object-position:70% 50%;background-position:70% 50%}
  .hero__title{font-size:clamp(66px,22vw,150px)}
  .hero__foot .btn{flex:1 1 auto;height:54px}
  .hero__foot .link-quiet{margin:8px 0 0}
  .scroll-cue{display:none}

  .anatomy{justify-content:flex-start;padding:110px 0 0}
  .anatomy > *{max-width:none}
  .scene--anatomy .stage{min-height:0;padding-bottom:40px;display:flex;flex-direction:column}
  .scene--anatomy .anatomy{order:1;height:auto}
  .scene--anatomy .anatomy__tags{order:2}
  .scene--anatomy .film{order:3;position:relative;inset:auto;height:auto;aspect-ratio:16/9;margin-top:18px}
  /* Studio-Filme auf dem Handy: an allen vier Seiten weich ins Seiten-Weiss auslaufen */
  .scene--anatomy .film--box,.scene--remote .film--box{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
  .anatomy__tags{position:relative;right:auto;top:auto;translate:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px var(--gutter) 0;text-align:left}
  .anatomy__tags li::before{width:14px;margin-right:8px}
  [data-at]{opacity:1;transform:none}

  .remote{display:flex;flex-direction:column;gap:28px;padding:20px 0 56px;height:auto}
  .scene--remote .stage{min-height:0}
  .scene--remote .film--box{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:16/9;translate:none;margin-top:96px}
  .story{align-self:stretch}
  .scene--remote .stage{display:flex;flex-direction:column}
  .veil--light{display:none}
  .story{grid-template-columns:1fr;gap:18px}
  .story__step,.story__step.is-done:not(.is-active){opacity:1}
  .remote__dl{position:static;width:100%}

  .web{padding:110px 0 30px;opacity:1}
  .web > *{max-width:none}
  .scene--web .stage{min-height:0;padding-bottom:48px}
  .web__phases{display:flex;flex-wrap:wrap;gap:4px 16px}
  .web__phases li{border:0;padding:4px 0;font-size:15px;color:var(--fg)}
  .browser{position:relative;right:auto;top:auto;translate:none;transform:none;width:calc(100% - 2*var(--gutter));margin:26px auto 28px;border-radius:14px}
  .deploy{gap:2px;padding:4px;bottom:5%}
  .deploy__step{height:22px;padding:0 7px;gap:5px;font-size:9.5px}
  .deploy__step .state{font-size:9px;gap:5px}
  .web__caption{position:static;margin:0 var(--gutter)}
  .browser__bar{height:34px;opacity:1}
  .browser__view{height:calc(100% - 34px)}
  .web__caption{opacity:1}
  .web__dusk{display:none}

  .copy{grid-template-columns:1fr;gap:34px;padding:112px 0 64px}
  .copy > .panel,.copy > .feeds{justify-self:stretch;width:100%}
  .chain{position:relative;bottom:auto;padding-bottom:48px}
  #security .copy{padding-bottom:28px}
  .aurora i{width:110vmax;height:110vmax}
}
@media (max-width:560px){
  .services{grid-template-columns:1fr;gap:0}.services li{padding:16px 0}
  .downloads{grid-template-columns:1fr}
  .products li{flex-direction:column;gap:2px}
  .team__grid{gap:12px}.person strong{font-size:15px}.person figcaption span{font-size:12.5px}
  .bubble{padding:20px 20px 20px 26px}
  .chain li:not(:last-child)::after{width:12px;margin:0 8px}
}

/* ═══ Reduzierte Bewegung: keine Pin-Sequenzen, Endzustände sichtbar ═══ */
@media (prefers-reduced-motion:reduce){
  .scene,.scene--hero,.scene--anatomy,.scene--remote,.scene--web{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .scene[data-window] .stage{clip-path:none}
  .film video{transform:none!important;transition:none}
  .hero{transform:none!important;opacity:1!important}
  .hero__title .ch,.hero__eyebrow,.hero__claim,.hero__foot,.scroll-cue,.scroll-cue i{animation:none!important}
  .hero-light{display:none}
  [data-at],.story__step,.story__step.is-done:not(.is-active){opacity:1;transform:none;transition:none}
  .person__media,.dl{transition:none}
}

/* PCFOX V30 — Takt-Szenen (Animation → Text → Animation → Gesamtbild) und Themenseiten. */

/* ═══ Takt-Szenen ═══ */
.scene--beats{--len:340vh}
.beats{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);grid-template-rows:1fr auto;align-items:end;column-gap:clamp(32px,6vw,120px);padding:118px 0 clamp(48px,9vh,110px)}
.beat--lead{grid-column:1;grid-row:1;align-self:end}
.beat--detail{grid-column:2;grid-row:1/3;align-self:end;justify-self:end;width:min(100%,460px)}
.beat--cta{grid-column:1;grid-row:2;margin-top:clamp(22px,3.5vh,36px);display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.beats h2{font-size:clamp(44px,5.4vw,104px)}
.beats .lede{max-width:28em}

/* Zustände: nur Opacity/Transform/Blur, Übergang zeitbasiert — Endzustand hängt nur vom Scroll ab */
.js .scene--beats .beat{opacity:0;transform:translate3d(0,28px,0);filter:blur(8px);pointer-events:none;
  transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out),filter var(--d-slow) var(--ease-out)}
.js .scene--beats .beat--detail{transition-delay:.08s}
.js .scene--beats .beat--cta{transform:translate3d(0,16px,0)}
.scene--beats[data-state="1"] .beat--lead,
.scene--beats[data-state="3"] .beat--lead,
.scene--beats[data-state="4"] .beat--lead,
.scene--beats[data-state="3"] .beat--detail,
.scene--beats[data-state="4"] .beat--detail,
.scene--beats[data-state="4"] .beat--cta{opacity:1!important;transform:none!important;filter:none!important;pointer-events:auto!important}
/* Während der Animationen gehört das Bild dem Film: Schleier zurücknehmen */
.scene--beats .veil{transition:opacity var(--d-slow) var(--ease-out)}
.scene--beats[data-state="0"] .veil,.scene--beats[data-state="2"] .veil{opacity:.35}

/* Takt-Anzeige: vier feine Striche unten, zeigen wo man in der Szene steht */
.beat-ticks{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(18px,3vh,30px);display:flex;gap:6px}
.beat-ticks i{width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.18;transition:opacity var(--d-base) ease,width var(--d-base) var(--ease-out)}
.tone-dark .beat-ticks{color:#fff}.tone-light .beat-ticks{color:#0b0b10}
.scene--beats[data-state="1"] .beat-ticks i:nth-child(1),.scene--beats[data-state="2"] .beat-ticks i:nth-child(-n+2),
.scene--beats[data-state="3"] .beat-ticks i:nth-child(-n+3),.scene--beats[data-state="4"] .beat-ticks i{opacity:.75}
.scene--beats[data-state="0"] .beat-ticks i:nth-child(1),.scene--beats[data-state="1"] .beat-ticks i:nth-child(2),
.scene--beats[data-state="2"] .beat-ticks i:nth-child(3),.scene--beats[data-state="3"] .beat-ticks i:nth-child(4){width:40px;opacity:.9}

/* Studio-Szenen: Film in eigener Fläche rechts, Text links */
.scene--beats.tone-light .film--box{--box:9% 0 5% 36%;transform-origin:78% 0;transition:transform var(--d-slow) var(--ease-out)}
/* Gesamtbild: der Film weicht nach oben rechts aus und macht den Details Platz */
.scene--beats.tone-light[data-state="3"] .film--box,
.scene--beats.tone-light[data-state="4"] .film--box{transform:translate3d(0,-7vh,0) scale(.7)}
.scene--beats.tone-light .veil{display:none}
.scene--beats.tone-light .beats{grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr)}
.scene--beats.tone-light .beat--lead{align-self:center}
.scene--beats.tone-light .beat--detail{align-self:end;width:min(100%,560px)}

/* Detail-Bausteine */
.points{display:grid;gap:0}
.points li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.points li:last-child{border-bottom:1px solid var(--line)}
.points img{width:22px;height:22px;object-fit:contain;grid-row:1/3;margin-top:2px}
.points b{font-size:15.5px;font-weight:620;letter-spacing:-.01em;color:var(--fg)}
.points span{grid-column:2;font-size:13.5px;color:var(--fg-3)}
.points .n{grid-row:1/3;font:600 12px/1.6 var(--mono);color:var(--accent)}
.more{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;color:var(--fg);
  background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid var(--line-2);transition:background var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.more:hover{background:color-mix(in srgb,var(--fg) 12%,transparent);border-color:color-mix(in srgb,var(--fg) 30%,transparent)}
.more i{font-style:normal;color:var(--accent);transition:transform var(--d-fast) var(--ease)}
.more:hover i{transform:translateX(4px)}
.tone-light .more{background:#fff;box-shadow:0 10px 28px rgba(11,11,16,.06)}

/* ═══ Themenseiten ═══ */
.scene--page{--len:230vh}
.page-hero{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 clamp(48px,9vh,100px);
  transform:translate3d(0,calc(var(--hp,0) * -6vh),0);opacity:calc(1 - var(--hp,0) * 1.1)}
.crumbs{display:flex;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.crumbs a{color:var(--fg-2)}.crumbs a:hover{color:var(--fg)}
.page-hero h1{margin-top:18px;max-width:7.6em;font-size:clamp(48px,6vw,116px);line-height:.92;font-weight:660;letter-spacing:-.05em;color:var(--fg)}
.page-hero h1 span{color:var(--fg-3)}
.page-hero .lede{max-width:34em}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.topic{position:relative;z-index:6;padding:clamp(90px,14vh,160px) 0}
.topic + .topic{padding-top:0}
.topic__head{max-width:980px}
.topic__head h2{font-size:clamp(38px,4.4vw,80px)}
.topic__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);margin-top:clamp(28px,5vh,48px)}
.topic__intro p{font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--fg-2)}
.topic__intro p strong{color:var(--fg);font-weight:620}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,6vh,64px)}
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.2vw,32px);border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);
  transition:border-color var(--d-fast) var(--ease),transform var(--d-base) var(--ease-out)}
.card:hover{border-color:rgba(195,178,255,.28);transform:translate3d(0,-4px,0)}
.card__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.card__icon img{width:24px;height:24px;object-fit:contain}
.card__icon b{font:600 13px/1 var(--mono);color:var(--lavender)}
.card h3{font-size:19px}
.card p{font-size:14.5px;line-height:1.55;color:var(--fg-2)}
.card ul{display:grid;gap:7px;margin-top:4px}
.card li{position:relative;padding-left:18px;font-size:13.5px;color:var(--fg-2)}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--lavender)}
.card--wide{grid-column:span 2}

.steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(36px,6vh,64px);counter-reset:st}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line-2)}
.step::before{counter-increment:st;content:"0" counter(st);position:absolute;top:-1px;left:0;padding:10px 0 0;font:600 12px/1 var(--mono);color:var(--lavender)}
.step::after{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--lavender);box-shadow:0 0 0 4px rgba(195,178,255,.15)}
.step h3{margin-top:12px;font-size:18px}
.step p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--fg-2)}

.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(36px,6vh,64px)}
.benefit strong{display:block;font-size:clamp(22px,1.9vw,30px);font-weight:620;letter-spacing:-.025em;line-height:1.15;color:var(--fg)}
.benefit p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--fg-2)}

.principle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.principle div{padding:22px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.principle b{display:block;font-size:clamp(40px,4vw,64px);font-weight:250;letter-spacing:-.04em;color:var(--lavender);line-height:1}
.principle span{display:block;margin-top:10px;font-size:14px;color:var(--fg-2)}

.faq{margin-top:clamp(30px,5vh,52px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(16px,1.2vw,19px);font-weight:600;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);font-weight:300;font-size:18px;transition:transform var(--d-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;max-width:52em;font-size:15px;line-height:1.65;color:var(--fg-2)}

.cta-band{position:relative;z-index:6;padding:clamp(90px,14vh,150px) 0;text-align:left}
.cta-band__box{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:end;padding:clamp(28px,4vw,56px);border-radius:32px;
  background:radial-gradient(ellipse 70% 90% at 0% 0%,rgba(138,92,255,.18),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1)}
.cta-band h2{margin-top:14px;font-size:clamp(34px,3.6vw,64px)}
.cta-band__actions{display:grid;gap:10px}
.cta-band__actions a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-weight:600;transition:background var(--d-quick) ease,border-color var(--d-quick) ease}
.cta-band__actions a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.cta-band__actions small{display:block;font-size:11px;font-weight:680;letter-spacing:.18em;text-transform:uppercase;color:var(--lavender);margin-bottom:3px}
.cta-band__actions i{font-style:normal;color:var(--lavender)}

.note{margin-top:18px;font-size:12.5px;color:var(--fg-3)}

/* ═══ Tablet ═══ */
@media (max-width:1100px){
  .beats{grid-template-columns:minmax(0,1fr) minmax(280px,.9fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card--wide{grid-column:span 2}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .benefits{grid-template-columns:1fr 1fr}
}

/* ═══ Mobile: kein Pinning, alles sichtbar, Film über dem Text ═══ */
@media (max-width:860px){
  .scene--beats,.scene--page{height:auto}
  .beats{display:flex;flex-direction:column;gap:26px;padding:28px 0 64px;height:auto}
  .beat--detail{width:100%}
  .scene--beats .stage{display:flex;flex-direction:column;min-height:0}
  .scene--beats .film{position:relative;inset:auto;height:auto;aspect-ratio:16/10;margin-top:88px}
  .scene--beats .veil{display:none}
  .scene--beats.tone-dark .film{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .beat-ticks{display:none}
  .scene--beats.tone-light .beats{display:flex}
  .page-hero{padding:22px 0 48px;transform:none;opacity:1}
  .scene--page .stage{display:flex;flex-direction:column;min-height:0}
  .scene--page .film{position:relative;inset:auto;height:auto;aspect-ratio:16/10;margin-top:84px}
  .scene--page .veil{display:none}
  .topic__intro,.benefits,.cta-band__box,.principle{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .card--wide{grid-column:auto}
  .steps{grid-template-columns:1fr}
}

/* ═══ Reduzierte Bewegung: Gesamtbild sofort ═══ */
@media (prefers-reduced-motion:reduce){
  .scene--beats,.scene--page{height:auto}
  .js .scene--beats .beat{opacity:1;transform:none;filter:none;pointer-events:auto;transition:none}
  .scene--beats .veil{opacity:1!important}
  .page-hero{transform:none!important;opacity:1!important}
  .card,.more i{transition:none}
}

/* Kette im Detailbereich (Endpoint-Szene) */
.chain.chain--inline{position:static;margin-top:18px;padding:0}
/* Fusszeile mit Themen-Links */
.footer__links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px}
.footer__links a{border-bottom:0!important;color:var(--fg-2)}
.footer__links a:hover{color:#fff}
/* Themenseite mit Studio-Film */
.scene--page.tone-light .film--box{--box:12% 0 8% 40%}
.scene--page.tone-light .stage{background:var(--paper)}
a.card{color:inherit}
/* Buttons auf hellen Themenseiten: dunkle Schrift statt weiss auf weiss */
.scene.tone-light .btn{color:#0b0b10;background:rgba(11,11,16,.04);border-color:rgba(11,11,16,.16);box-shadow:none}
.scene.tone-light .btn:hover{background:rgba(11,11,16,.08);border-color:rgba(11,11,16,.28)}
.scene.tone-light .btn--solid{color:#fff;background:#0b0b10;border-color:transparent;box-shadow:0 12px 30px rgba(11,11,16,.18)}
.scene.tone-light .btn--solid:hover{background:#23232b}
a.card .more{margin-top:auto;align-self:flex-start}

/* Download-Karten (zwei Spalten, auf dem Handy eine) */
.cards.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* web.html: Überschrift als h1, gleiche Optik wie auf der Startseite */
.web__head h1{margin-top:20px;font-size:clamp(40px,4.2vw,84px);line-height:.94;font-weight:640;letter-spacing:-.045em;color:var(--fg);text-wrap:balance}
.web__head h1 span{color:var(--fg-3)}
@media (max-width:860px){
  .cards.cards--2{grid-template-columns:1fr}
  .scene--beats.tone-light .film--box{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .scene--beats.tone-light .film--box{transform:none!important;transition:none}
}
/* V31 (David 28.10.): Punkte am Bild erst sichtbar, wenn der Mauszeiger in der Nähe ist (interact.js setzt --near 0..1 und .is-near);
   Beschriftung weiterhin nur direkt am Punkt (.is-hot). Ohne Zeiger (Handy) bleiben die Punkte sichtbar. */
@media (hover:hover) and (pointer:fine){
  html .pins .pin.is-on{opacity:var(--near,0);transition:opacity .22s ease,transform var(--d-slow) var(--e-out)}
  html .pins .pin.is-on.is-hot{opacity:1}
}
/* V33 (David 02.11.: «die violetten Punkte erst erscheinen lassen, wenn man mit der Maus in der Nähe ist»): zusätzlich zur Medienabfrage
   gilt die Regel, sobald eine Maus bewegt wurde (interact.js setzt html.has-mouse) – Touch-Laptops melden sonst pointer:coarse und zeigten
   die Punkte dauerhaft. */
html.has-mouse .pins .pin.is-on{opacity:var(--near,0);transition:opacity .22s ease,transform var(--d-slow) var(--e-out)}
html.has-mouse .pins .pin.is-on.is-hot{opacity:1}
/* V31 (David 28.10.): «360° Schutz»-Tafel nicht mitten im Bild über dem Gebäude – wie die anderen Tafeln an den rechten Rand, senkrecht
   mittig (freier Himmel/Hof), Handy-Regel (v24.css) unverändert. */
@media (min-width:861px){
  /* 02.11. (David): oben rechts verdeckte die Tafel die Kamera – jetzt unten rechts, direkt über der Karte «Mehr Informationen · Kamerasystem»
     (Karte 440×227 bei 119 px Abstand vom Rand, 24 px Luft). */
  html .reel.is-film .hud--sky{left:auto;right:calc(var(--gutter) + 34px);top:auto;bottom:370px;width:min(380px,30vw);transform:translate3d(0,8px,0);transform-origin:100% 100%}
  html .reel.is-film .hud--sky.is-on{transform:none}
  html .reel.is-film .hud--sky ul{gap:6px}
  html .reel.is-film .hud--sky li{padding-block:7px}
}
/* ═══ V32 Liquid Glass – EIN Material für alles, was über dem Film schwebt (David 28.10.: «und liquid glass hinzufügen überall?») ═══
   Haltung A (Apple-treu, zurückhaltend) nach dem Liquid-Glass-Skill: Glas nur dort, wo die Torfrage eine Antwort hat – Bedienung, die über
   laufendem Inhalt erreichbar bleiben muss (Kapsel, offene Leiste, Sprachwahl, «Weiterlesen»-Karte, Hero-Knopf «Kontakt», Kontakt-Aufklapp-
   menü). Alles andere – Tafeln, Kameraplan, Kamerabilder, 360°-Liste, Punkt-Beschriftungen, «Weiter», Kinomodus, Kapitelzähler, Tooltip,
   Formular, Kacheln – bekommt dieselbe Kante, Lichtkante und Tinte als DICHTE Variante ohne backdrop-filter (kein Aufwand pro Bild, keine
   Abhängigkeit von Vorfahren). Ersetzt den V31-Block «GLASSY mehr» (die 440-px-Kapsel bleibt; die V31-Regeln darüber bleiben unverändert).
   Regeln: ein Regler je Eigenschaft (alle Werte stehen in :root, nirgends sonst – das Handy und die Ersatz-Einstellungen überschreiben nur
   Tokens); kein Mischmodus und kein filter auf Glanzschichten; nie zwei backdrop-filter ineinander; nie mask/clip-path auf einer Glasfläche;
   nichts in .reel__layer bekommt backdrop-filter; Unschärfe nur in sichtbaren Zuständen (.is-on / .is-open / nicht [hidden]) und beim
   Ausblenden erst NACH dem Opacity-Übergang abgeschaltet (transition «backdrop-filter 0s linear <Dauer>», dasselbe Muster wie «visibility
   0s linear» in reel.css:39) – verdeckte Flächen kosten nichts, und nichts springt.
   Budget, in jedem erreichbaren Zustand gezählt: Desktop höchstens 3 Glasflächen (offene Leiste + Sprachwahl + Karte oder Hero-Knopf),
   Handy höchstens 2 (Karte und Hero-Knopf verlieren die Unschärfe, solange das Menü offen ist). Die Kapsel ist die einzige dauernd
   gefrostete Fläche über dem Film; Rückweg, falls Davids PC ruckelt = eine Zeile: html.film-on .v163-nav__compact{backdrop-filter:none}.
   Kontrast (Schrift über reinem Weiss hinter der Fläche, schlimmster Fall vor der Unschärfe, Glanz eingerechnet): Kapsel .66 → Titel 5.9:1,
   Bereichsname 4.8:1 (unter der Zeigerlinse Titel 4.7:1); dicke Stufe .80 → Karte em 6.5:1, small 5.8:1, Nummer 5.5:1, Sprachliste 5.3:1,
   Leisten-Register 5.4:1; dichte Stufe .88 → Tafelkopf 6.5:1, 360°-Beschreibung ≥ 6:1. Haarlinie über Nacht-Szenen (5,5,7) ≈ 2.7:1. */
:root{
  --lg-ink:18 15 28;                                   /* Marken-Tinte (Graphit mit Violett) als Grund jeder Fläche: rgb(var(--lg-ink) / α) */
  --lg-thin-fill:.50;   --lg-thin-blur:16px;           /* dünn: nur Symbole/grosse Beschriftung – derzeit unbenutzt (reserviert) */
  --lg-regular-fill:.66;--lg-regular-blur:24px;        /* normal: Kapsel mit Text; .66 statt .62, damit der 7,5-px-Bereichsname über Weiss 4.5:1 erreicht */
  --lg-thick-fill:.80;  --lg-thick-blur:28px;          /* dick: offene Leiste, Sprachwahl, «Weiterlesen»-Karte (vier Schriftstile), Aufklappmenü – Lesbarkeit vor Durchsicht */
  --lg-clear-fill:.26;  --lg-clear-blur:14px;          /* klar: nur der Hero-Knopf über dem abgedunkelten Film (Schleier .82 + Vignette darunter, fette weisse Schrift) */
  --lg-clear-fill-hover:.40;                           /* Hero-Knopf unter dem Zeiger */
  --lg-static-fill:.88;                                /* dicht, ohne Unschärfe: Tafeln, Kacheln, 360°-Liste, Punkt-Beschriftungen, «Weiter», Kinomodus, Kapitelzähler (≈ 14:1 weiss) */
  --lg-solid-fill:.96;                                 /* deckend: Tooltip, Handy-Menü ≤ 480 px, Ersatz ohne backdrop-filter, «weniger Transparenz», «mehr Kontrast» */
  --lg-sat:135%;                                       /* Sättigung des Hintergrunds, 110–150 % laut Skill (V31: 140 %) */
  --lg-fill-regular:rgb(var(--lg-ink) / var(--lg-regular-fill));
  --lg-fill-thick:rgb(var(--lg-ink) / var(--lg-thick-fill));
  --lg-fill-clear:rgb(var(--lg-ink) / var(--lg-clear-fill));
  --lg-fill-clear-hover:rgb(var(--lg-ink) / var(--lg-clear-fill-hover));
  --lg-fill-thin:rgb(var(--lg-ink) / var(--lg-thin-fill));
  --lg-fill-static:rgb(var(--lg-ink) / var(--lg-static-fill));
  --lg-fill-solid:rgb(var(--lg-ink) / var(--lg-solid-fill));
  --lg-bf-regular:blur(var(--lg-regular-blur)) saturate(var(--lg-sat));   /* die drei Unschärfen als Token: Handy und Ersatz-Einstellungen drehen sie an EINER Stelle */
  --lg-bf-thick:blur(var(--lg-thick-blur)) saturate(var(--lg-sat));
  --lg-bf-clear:blur(var(--lg-clear-blur)) saturate(var(--lg-sat));
  --lg-edge:rgba(236,230,255,.36);                     /* Haarlinie, Lavendel-Weiss: .36 (V31 .24), damit die Fläche auch über Nacht-Szenen eine Grenze hat (≈ 2.7:1, WCAG 1.4.11) */
  --lg-edge-strong:rgba(236,230,255,.44);              /* Haarlinie der dicken Stufe und bei Hover */
  --lg-highlight:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 -1px 0 rgba(169,124,255,.08);   /* Lichtkante oben, innere Linie, Lavendel unten */
  --lg-shadow:0 10px 34px rgba(8,6,16,.42),0 2px 8px rgba(8,6,16,.30);   /* weich, aus der Tinte, nicht aus Schwarz */
  --lg-shadow-soft:0 8px 24px rgba(8,6,16,.28);        /* kleine Flächen (Knöpfe, Beschriftungen) */
  --lg-halo:0 0 44px rgba(150,105,235,.14);            /* violetter Schein – nur Navigation und Sprachwahl (V31) */
  --lg-elev-nav:var(--lg-highlight),var(--lg-shadow),var(--lg-halo);     /* zusammengesetzte Schatten, damit Ersatz/Einstellungen EIN Token tauschen */
  --lg-elev-card:var(--lg-highlight),var(--lg-shadow);
  --lg-elev-soft:var(--lg-highlight),var(--lg-shadow-soft);
  --lg-elev-flat:var(--lg-highlight);
  --lg-sheen:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 48%,rgba(161,112,255,.04) 76%,rgba(255,255,255,.03));   /* Glanz auf Karte/Knöpfen/Tafeln: höchstens 5 % Weiss – die erste Textzeile sitzt genau in dieser Ecke */
  --lg-sheen-bar:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 38%,rgba(161,112,255,.04));   /* Kapsel/Leiste: Licht nur von oben, kein seitlicher Weiss-Schleier unter Marke, Bereichsname und Registern */
  --lg-r-surface:26px;--lg-r-component:20px;--lg-r-control:14px;--lg-r-icon:12px;--lg-r-pill:999px;   /* Radien-Rollen; Bestand passt schon (Karte 26, Sprachwahl 20/14, Liste 20) – Geometrie hier unverändert */
}

/* ─── Backdrop-Wurzel der Navigation ───
   Gemessen (Chrome headless, Streifen hinter der Kapsel): base.css:60 `.v163-nav{view-transition-name:v163-nav}` macht den Header zur
   Backdrop-Wurzel – Kapsel, Leiste und Sprachwahl sahen nur den leeren Header, die Unschärfe kam nie an (V31 wirkte als 60-%-Tönung).
   Der Name wird deshalb nur noch WÄHREND des Seitenwechsels vergeben (:active-view-transition, Chromium/Safari); in Ruhe ist der Header
   wieder durchlässig. Bekannte Grenze: während des Wechsels (≈ 240 ms) zeichnet der Browser die Navigation aus Schnappschüssen ohne
   Unschärfe – kurzes Ent-/Einfrosten je Seitenwechsel. Noch zu prüfen (Chrome, echter Seitenwechsel Start ↔ Themenseite): steht die
   Navigation still wie bei V11? Falls nicht: die zweite Zeile löschen, dann blendet sie mit dem Inhalt über. Firefox kennt keine
   seitenübergreifenden View Transitions – dort ändert sich nichts. isolation:isolate (nav.css:22) diente nur dem Mischmodus «screen» der
   Glanzschichten; der ist weg, also auch die Isolation (in Safari/Firefox sonst eine mögliche Backdrop-Wurzel; fixed + z-index bilden den
   Stapelkontext ohnehin). */
html .v163-nav{view-transition-name:none;isolation:auto}
html:active-view-transition .v163-nav{view-transition-name:v163-nav}

/* ─── Navigation: Glanz und Zeigerlicht ohne Mischmodus und ohne filter (screen zwang die Kapsel in eine isolierte Gruppe; blur(2px) auf dem
   Zeigerlicht wurde bei jeder Zeigerbewegung neu gerastert). Das Licht ist jetzt eine Linse mit klarer Mitte: der Rand leuchtet, die Schrift
   unter dem Zeiger bleibt dunkel unterlegt (Titel 4.7:1 auch über Weiss; V31-Kern .5 drückte ihn auf 2.8:1). Lage weiter über --v163-x/-y
   aus nav.js (Prozent, darum kein transform). */
html .v163-nav__compact::before,html .v163-nav__expanded::before{mix-blend-mode:normal;background:var(--lg-sheen-bar)}
html .v163-nav__compact::after,html .v163-nav__expanded::after{mix-blend-mode:normal;filter:none;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,0) 0 18%,rgba(255,255,255,.10) 36%,rgba(170,125,255,.05) 58%,transparent 75%)}
html .v163-nav__current strong{text-shadow:0 1px 2px rgba(0,0,0,.45)}
html .v163-nav__current small{color:rgba(243,239,252,.92);text-shadow:0 1px 2px rgba(0,0,0,.45)}   /* Bereichsname 7,5 px: fast weiss + Schatten – auf .66 über Weiss 4.8:1 (.55 lag bei 2.3:1; gedämpfter geht auf dieser Stufe nicht) */
html .lang-menu :is(button,a){color:rgba(231,225,242,.74)}        /* 13,5-px-Liste auf dicker Stufe 5.3:1 auch über Weiss (.55 lag bei 3.8:1); Hover/aktiv bleiben weiss */

/* ─── Navigation: Kapsel = normal, offene Leiste = dick (das Material wird dicker, wenn es grösser wird), Sprachwahl = dick ───
   Werte aus den Tokens (Handy: siehe unten), Geometrie bleibt in nav.css; die 440-px-Kapsel von V31 bleibt. Die Leiste frostet nur offen,
   die verdeckte Kapsel frostet nicht mit; beim Schliessen bleibt die Unschärfe bis zum Ende des Ausblendens (Übergangslisten = nav.css:92/107
   plus backdrop-filter). Sprachwahl: [hidden] = display:none, kostet geschlossen nichts; i18n.js blendet erst aus, dann hidden. */
@media (min-width:861px){
  html .v163-nav__compact{width:440px;height:60px;padding:0 10px;grid-template-columns:42px minmax(0,1fr) 42px}   /* V31 (David): breiter – bleibt */
  html .v163-nav__links a{color:rgba(238,233,245,.78)}   /* Register 10,5–12,5 px auf der dicken Leiste: 5.4:1 über Weiss (.67 lag unter dem Glanz bei 4.4:1); Hover/aktiv bleiben weiss, Handy-Liste (nav.css:388) unberührt */
}
html .v163-nav__compact{background:var(--lg-fill-regular);border-color:var(--lg-edge);box-shadow:var(--lg-elev-nav);
  -webkit-backdrop-filter:var(--lg-bf-regular);backdrop-filter:var(--lg-bf-regular);
  transition:opacity var(--d-fast) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1),-webkit-backdrop-filter 0s,backdrop-filter 0s}
html .v163-nav.is-open .v163-nav__compact{-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:opacity var(--d-fast) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1),-webkit-backdrop-filter 0s linear var(--d-fast),backdrop-filter 0s linear var(--d-fast)}
html .v163-nav__expanded{background:var(--lg-fill-thick);border-color:var(--lg-edge-strong);box-shadow:var(--lg-elev-nav);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1),-webkit-backdrop-filter 0s linear var(--d-quick),backdrop-filter 0s linear var(--d-quick)}
html .v163-nav.is-open .v163-nav__expanded{-webkit-backdrop-filter:var(--lg-bf-thick);backdrop-filter:var(--lg-bf-thick);
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1),-webkit-backdrop-filter 0s,backdrop-filter 0s}
html .lang-menu{background:var(--lg-fill-thick);border-color:var(--lg-edge-strong);box-shadow:var(--lg-elev-nav);
  -webkit-backdrop-filter:var(--lg-bf-thick);backdrop-filter:var(--lg-bf-thick)}

/* ─── Film: schwebende Bedienung = Glas ───
   «Weiterlesen»-Karte: dicke Stufe (vier Schriftstile; sie steht unten rechts ausserhalb aller Schleier – auch über den hellen Nahaufnahmen
   am Ende von Cloud und Web), Unschärfe nur solange sie steht (.is-on; acht weitere Karten sind unsichtbar und kosten nichts) und beim
   Ausblenden bis zum Ende des 150-ms-Übergangs. Übergangslisten = reel.css:39/42 plus backdrop-filter. Der Ring bleibt auf ::before (Maske
   nie auf der Glasfläche). */
html .reel.is-film .readon{background:var(--lg-sheen),var(--lg-fill-thick);border-color:var(--lg-edge-strong);box-shadow:var(--lg-elev-card);
  -webkit-backdrop-filter:none;backdrop-filter: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),-webkit-backdrop-filter 0s linear var(--d-quick),backdrop-filter 0s linear var(--d-quick)}
html .reel.is-film .readon.is-on{-webkit-backdrop-filter:var(--lg-bf-thick);backdrop-filter:var(--lg-bf-thick);
  transition:opacity var(--d-fast) var(--e-smooth),transform var(--d-base) var(--e-smooth),border-color var(--d-fast) ease,visibility 0s,-webkit-backdrop-filter 0s,backdrop-filter 0s}
html .reel.is-film .readon:hover{border-color:rgba(195,178,255,.42)}
html .reel.is-film .readon__body small{color:rgba(245,245,247,.72)}   /* Kapitelname 10,5 px: 5.8:1 über Weiss (--fg-3 .5 lag bei 2.5:1) */
html .reel.is-film .readon__body em{color:rgba(245,245,247,.78)}      /* Untertitel 14 px: 6.5:1 (wie der Absatztext am Desktop) */
/* «Weiter»-Hinweis und Kinomodus-Knopf: dichte Variante OHNE Unschärfe – die V15/V21-Regel «keine neuen backdrop-filter» bleibt in Kraft,
   solange die Bildzeit (rAF-Median/p95 mit und ohne Filter) nicht gemessen ist; sie schalten genau im Clip-Wechsel ein, wenn reel.js am
   meisten zu tun hat. Rückweg zu Glas = je eine Zeile: .is-on → backdrop-filter:var(--lg-bf-regular) und Füllung --lg-fill-regular. */
html .reel__next,html .reel__auto{background:var(--lg-sheen),var(--lg-fill-static);border-color:var(--lg-edge);box-shadow:var(--lg-elev-soft)}
html .reel__next small{color:rgba(245,245,247,.8)}
/* Hero-Knöpfe: der Umriss-Knopf «Kontakt» ist die einzige KLARE Glasfläche – über dem abgedunkelten Film (Schleier .82 + Vignette, v11.css:10)
   mit fetter weisser Schrift; ohne diesen Schleier (STORY.scrim) wäre .26 zu wenig. Unschärfe nur solange der Begrüssungsabschnitt steht.
   Das Einblenden wandert von .hero__foot (film23.css:48/52) auf die beiden Knöpfe selbst: ein Vorfahre mit opacity < 1 ist eine Backdrop-
   Wurzel, die Unschärfe wäre erst nach ~1,3 s «aufgeploppt». Zeiten unverändert (480 ms nach 800 ms). Beim Verlassen blendet der ganze
   Abschnitt in 150 ms aus – solange ist der Knopf eine Tönung (bekannte Grenze, per CSS nicht lösbar).
   Der gefüllte Hauptknopf (.btn--solid) ist deckend: keine Unschärfe dahinter (war reiner Aufwand). Alle anderen .btn (Formular, Themenseiten-
   Hero, «nochmals senden») bleiben Füllungen ohne backdrop-filter – im Formular läge Glas in Glas, auf den Themenseiten über einem fast
   schwarzen Schleier (unsichtbar = nur Aufwand). */
html .btn{-webkit-backdrop-filter:none;backdrop-filter:none}
html .reel.is-film .beat--hero .hero__foot,html .reel.is-film .beat--hero.is-on .hero__foot{opacity:1;transform:none;transition:none}
html .reel.is-film .beat--hero .hero__foot .btn{opacity:0;transform:translate3d(0,12px,0);
  transition:background var(--d-fast) var(--e-smooth),border-color var(--d-fast) var(--e-smooth),opacity var(--d-quick) ease,transform var(--d-fast) var(--e-smooth),-webkit-backdrop-filter 0s linear var(--d-quick),backdrop-filter 0s linear var(--d-quick)}
html .reel.is-film .beat--hero.is-on .hero__foot .btn{opacity:1;transform:none;
  transition:background var(--d-fast) var(--e-smooth),border-color var(--d-fast) var(--e-smooth),opacity var(--d-base) ease 800ms,transform var(--d-slow) var(--e-smooth) 800ms,-webkit-backdrop-filter 0s,backdrop-filter 0s}
html .reel.is-film .beat--hero .btn:not(.btn--solid){background:var(--lg-sheen),var(--lg-fill-clear);border-color:var(--lg-edge);box-shadow:var(--lg-elev-flat)}
html .reel.is-film .beat--hero .btn:not(.btn--solid):hover{background:var(--lg-sheen),var(--lg-fill-clear-hover);border-color:var(--lg-edge-strong)}
html .reel.is-film .beat--hero.is-on .btn:not(.btn--solid){-webkit-backdrop-filter:var(--lg-bf-clear);backdrop-filter:var(--lg-bf-clear)}

/* ─── Film: dichte Variante (kein backdrop-filter) ───
   Tafeln (Backup-Jobs, Kameraplan, Kamerabilder) und die 360°-Liste liegen rechts ausserhalb der Text-Schleier über dem rohen Film (heller
   Hof, weisser Transporter): .88 Tinte hält 12-px-Zeilen lesbar – ohne Unschärfe über dem laufenden 4K-Film (reel.css:104, v6.css:289
   bleiben in Kraft). Lage, Breite, --fit, transform-origin (V31 hud--sky, film23/v24) werden NICHT angefasst. Der Tafelkopf (10,5 px) wird
   wie die Karte auf .72 gehoben (6.5:1; --fg-3 .5 lag unter dem Glanz bei 4.0:1). */
html .reel.is-film .panel,html .reel.is-film .hud:not(.hud--inline){background:var(--lg-sheen),var(--lg-fill-static);border-color:var(--lg-edge);box-shadow:var(--lg-elev-card);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Standbild-Modus (reduzierte Bewegung / Datensparen, reel.js setStatic → .reel.is-static ohne .is-film): dieselbe dichte Tafel – sonst frosten
   base.css:107 (.panel) und scenes.css:205 (.feeds) die drei Tafeln im Seitenfluss wieder (gemessen: 3 × backdrop-filter über flachem Schwarz,
   unsichtbar = reiner Aufwand, ausgerechnet für Nutzer mit weniger Bewegung/Daten). 0,3,1 schlägt base/scenes (0,1,0) und reel.css:460 (0,3,0). */
html .reel:not(.is-film) .panel{background:var(--lg-sheen),var(--lg-fill-static);border-color:var(--lg-edge);box-shadow:var(--lg-elev-card);-webkit-backdrop-filter:none;backdrop-filter:none}
html .reel.is-film .panel__head small{color:rgba(245,245,247,.72)}
/* Kacheln/Ketten/Kennzahlen (v11.css .fn/.app3/.kpi in den festen .topo2-Spalten flow3/apps3/kpis3, nicht in .reel__layer): gleiche Tinte, Kante
   und Lichtkante wie die Tafeln – dicht, ohne Unschärfe. Bisher die einzigen Flächen über dem Film ausserhalb des Materials (V12-Schwarz
   12/12/18 .84, Haarlinie .12 – neben der Lavendel-Kapsel flache schwarze Kästen). Masse, Radien, Ein-/Ausblenden und .fn .glyph bleiben v11. */
html .reel.is-film .topo2 :is(.fn,.app3,.kpi){background:var(--lg-fill-static);border-color:var(--lg-edge);box-shadow:var(--lg-elev-soft)}
/* Punkt-Beschriftungen liegen in .reel__layer (Transform pro Bild, bei [data-desk="soft"] ausgeblendet und unscharf, soft-light-Kind; am Handy
   clip-path): dort nie backdrop-filter – dichte Tinte, gleiche Kante und Lichtkante. Die V31-Regel für die Punkte (--near/.is-hot) bleibt. */
html .pins .pin b{background:var(--lg-fill-static);border-color:var(--lg-edge);box-shadow:var(--lg-elev-soft);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Kapitelzähler: EINE dichte Pille in ALLEN Kapiteln (vorher nur Hardware & Software und Microsoft 365 – beim Wechsel 02→03 verlor der
   Zähler die Pille und der Text sprang ≈15 px nach links und ≈10 px nach oben, gemessen r3 d_s15 (96,133) gegen d_s28 (81,122)). Geometrie
   wie v11.css:89, kein backdrop-filter (12-px-Text, keine Bedienung). Über dunklen Szenen ≈ 14:1, über dem Bürofenster (ms1) 13.4:1 für .92 Weiss.
   [data-chapter] hält 0,3,1 über v11.css:89 (0,3,0 – v30 lädt VOR v11); .is-film braucht es nicht, im Standbild-Modus ist die Bühne samt
   Zähler ohnehin aus (reel.css:452). Handy-Hochformat bleibt display:none (film23.css:301), quer (v15.css:74) trägt die Pille mit. */
html .reel[data-chapter] .reel__label{padding:8px 16px 8px 14px;border-radius:var(--lg-r-pill);border:1px solid var(--lg-edge);color:rgba(245,245,247,.92);
  background:var(--lg-fill-static);box-shadow:var(--lg-elev-flat);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Tooltip der Kapitel-Leiste: deckend (Skill §10: kleine Schrift überlebt Durchsicht selten) */
html .reel__rail span{background:var(--lg-fill-solid);border-color:var(--lg-edge)}

/* ─── Kontakt ───
   Kacheln und Formular stehen im Seitenfluss (kein Glas laut Skill §10): Füllung bleibt, Unschärfe weg (v19tc.css:2-4 wollte das schon,
   scenes.css:234 und form.css:12 setzten sie trotzdem). Das Aufklappmenü ist die einzige Glasfläche: dick, nur solange offen ([hidden] =
   display:none). */
html .bubble,html .form,html .sent{-webkit-backdrop-filter:none;backdrop-filter:none}
html .menu{background:var(--lg-sheen),var(--lg-fill-thick);border-color:var(--lg-edge-strong);box-shadow:var(--lg-elev-card);
  -webkit-backdrop-filter:var(--lg-bf-thick);backdrop-filter:var(--lg-bf-thick)}

/* ─── Handy & Tablet (≤ 860 px): weniger Ebenen, weniger Unschärfe, mehr Füllung – über die Tokens, nicht je Fläche ───
   481–860 px liegt der Film ungedämpft hinter der Kapsel (Stufe normal .72 / 20 px); offene Leiste, Sprachwahl, Karte und Aufklappmenü dick
   .84 / 24 px. Hochformat: die Karte steht unten auf dem schwarzen Auslauf des Schleiers (v24.css:16-20, v15.css:42; gemessen 0.3/255 =
   Rauschen) – ohne Unschärfe; quer (Bild füllt die Bühne, v15.css:64) behält sie das Glas. Kinomodus-Punkt und «Weiter» sind ohnehin dicht.
   Offenes Menü: Karte und Hero-Knopf ohne Unschärfe, damit es bei 2 Glasflächen bleibt (Leiste + Sprachwahl). */
@media (max-width:860px){
  :root{--lg-regular-fill:.72;--lg-regular-blur:20px;--lg-thick-fill:.84;--lg-thick-blur:24px}
  html:has(.v163-nav.is-open) .reel.is-film .readon.is-on,html:has(.v163-nav.is-open) .reel.is-film .beat--hero.is-on .btn:not(.btn--solid){-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Hochformat ≤ 860 px: Karte UND Hero-Knopf «Kontakt» stehen unter calc(var(--cH) + 24px) auf dem schwarzen Auslauf des Schleiers
   (v24.css:22-23; das Bild ist dort per Maske schon durchsichtig) – Unschärfe über flachem Schwarz ist unsichtbar, nur Aufwand. */
@media (max-width:860px) and (orientation:portrait){
  html .reel.is-film .readon.is-on,html .reel.is-film .beat--hero.is-on .btn:not(.btn--solid){-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* ≤ 480 px (V27/V28-Layout, Film beginnt 72 px unter der Navigation): offene Leiste und Sprachwahl deckend wie bisher (nav.css:385, David:
   «dichter: der Seitentext scheint nicht durch»); Kapsel ohne Unschärfe, solange der Film im Bild ist (reel.js setzt film-on am <html>:
   dahinter liegt nur Schwarz + Schleier, gemessen max 5/255) – auf Themenseiten (Hero-Bild hinter der Kapsel) bleibt sie. Hero-Knopf ohne
   Unschärfe: er liegt über .reel__ambient, einer schon per filter:blur(5px) unscharfen Fläche mit Schleier .72–.8 – die reine Unschärfe ist
   dort nicht gemessen (die bisherige Messung enthielt die Sättigung), auf den schwächsten GPUs zuerst sparen. Im Film damit 0 Glasflächen,
   auf Themenseiten 1 (Kapsel). */
@media (max-width:480px){
  html .v163-nav__expanded,html .v163-nav.is-open .v163-nav__expanded,html .lang-menu{background:var(--lg-fill-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.film-on .v163-nav__compact{-webkit-backdrop-filter:none;backdrop-filter:none}
  html .reel.is-film .beat--hero.is-on .btn:not(.btn--solid){-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ─── Ersatz und Einstellungen: ohne backdrop-filter, «weniger Transparenz», «mehr Kontrast», erzwungene Farben – nur Tokens, jede Fläche
   sinkt gemeinsam auf deckend und lesbar ─── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--lg-bf-regular:none;--lg-bf-thick:none;--lg-bf-clear:none;--lg-regular-fill:.96;--lg-thick-fill:.96;--lg-clear-fill:.72;--lg-clear-fill-hover:.84}
}
@media (prefers-reduced-transparency:reduce){
  :root{--lg-bf-regular:none;--lg-bf-thick:none;--lg-bf-clear:none;--lg-regular-fill:.96;--lg-thick-fill:.96;--lg-clear-fill:.96;--lg-clear-fill-hover:.96;--lg-static-fill:.96}
}
@media (prefers-contrast:more){
  :root{--lg-bf-regular:none;--lg-bf-thick:none;--lg-bf-clear:none;--lg-regular-fill:.96;--lg-thick-fill:.96;--lg-clear-fill:.96;--lg-clear-fill-hover:.96;--lg-static-fill:.96;
    --lg-edge:rgba(255,255,255,.62);--lg-edge-strong:rgba(255,255,255,.62);--lg-sheen:none;--lg-sheen-bar:none;
    --lg-elev-nav:inset 0 0 0 1px rgba(255,255,255,.35);--lg-elev-card:inset 0 0 0 1px rgba(255,255,255,.35);--lg-elev-soft:inset 0 0 0 1px rgba(255,255,255,.35);--lg-elev-flat:inset 0 0 0 1px rgba(255,255,255,.35)}
  html .v163-nav__current small,html .v163-nav__links a,html .lang-menu :is(button,a),html .reel__next small,html .reel.is-film .readon__body small,html .reel.is-film .readon__body em,html .reel.is-film .panel__head small{color:#fff}
}
@media (forced-colors:active){
  :root{--lg-bf-regular:none;--lg-bf-thick:none;--lg-bf-clear:none;--lg-fill-regular:Canvas;--lg-fill-thick:Canvas;--lg-fill-clear:Canvas;--lg-fill-clear-hover:Canvas;--lg-fill-static:Canvas;--lg-fill-solid:Canvas;
    --lg-edge:CanvasText;--lg-edge-strong:CanvasText;--lg-sheen:none;--lg-sheen-bar:none;--lg-elev-nav:none;--lg-elev-card:none;--lg-elev-soft:none;--lg-elev-flat:none}
  html .v163-nav__current strong,html .v163-nav__current small{text-shadow:none}
}

/* ─── V33 (David 02.11.): Menüleiste lebendiger – Hover-Animation ───
   Kapsel hebt sich 2 px, wächst 1.8 %, Rand und Glanz werden stärker, die Zeiger-Linse (V6) bleibt; Titel hellt auf, die Menü-Striche
   rücken auseinander, der Fernwartungs-Orb glüht. Offene Leiste: EINE gleitende Glas-Pille wandert unter den Link, über dem der Zeiger
   steht (nav.js setzt --hx/--hw auf .v163-nav__links), statt je Link eine eigene Fläche; der Globus dreht sich leicht. Nur mit Zeiger;
   bei prefers-reduced-motion keine Bewegung. Federkurve cubic-bezier(.2,.85,.2,1) = bestehende Kurve der Kapsel. */
@media (hover:hover){
  html .v163-nav:not(.is-open) .v163-nav__compact{transition:opacity var(--d-fast) ease,transform .28s cubic-bezier(.2,.85,.2,1),box-shadow .28s ease,border-color .28s ease,-webkit-backdrop-filter 0s,backdrop-filter 0s}
  html .v163-nav.is-hovering:not(.is-open) .v163-nav__compact{transform:translate3d(-50%,-2px,0) scale(1.018);border-color:var(--lg-edge-strong);box-shadow:var(--lg-elev-nav),0 0 0 1px rgba(195,178,255,.16),0 22px 48px -20px rgba(150,110,255,.55)}
  html .v163-nav__current strong{transition:text-shadow .28s ease}
  html .v163-nav.is-hovering .v163-nav__current strong{text-shadow:0 0 18px rgba(195,178,255,.55),0 1px 2px rgba(0,0,0,.4)}
  html .v163-menu-glyph i{transition:transform .28s cubic-bezier(.2,.85,.2,1)}
  html .v163-nav__menu:hover .v163-menu-glyph i:first-child{transform:translateY(-1.5px)}
  html .v163-nav__menu:hover .v163-menu-glyph i:last-child{transform:translateY(1.5px)}
  html .v163-nav__remote-orb{transition:transform .28s cubic-bezier(.2,.85,.2,1),box-shadow .28s ease,background .28s ease}
  html .v163-nav__remote-orb:hover{transform:scale(1.1);box-shadow:0 0 0 1px rgba(195,178,255,.4),0 0 26px rgba(170,125,255,.6)}
  html .v163-nav__links{position:relative}
  html .v163-nav__hl{position:absolute;z-index:0;left:0;top:50%;height:36px;width:var(--hw,0px);border-radius:999px;pointer-events:none;opacity:0;
    transform:translate3d(var(--hx,0px),-50%,0);background:linear-gradient(110deg,rgba(195,178,255,.18),rgba(255,255,255,.07));
    box-shadow:inset 0 0 0 1px rgba(204,184,255,.16),0 8px 22px -10px rgba(150,110,255,.6);
    transition:transform .32s cubic-bezier(.2,.85,.2,1),width .32s cubic-bezier(.2,.85,.2,1),opacity .22s ease}
  html .v163-nav__links.is-hl .v163-nav__hl{opacity:1}
  html .v163-nav__links.is-hl a:hover{background:transparent}
  html .v163-nav__links a{transition:color var(--d-quick) ease,background var(--d-fast) ease,text-shadow .28s ease}
  html .v163-nav__links a:hover{text-shadow:0 0 14px rgba(195,178,255,.45)}
  html .lang-globe svg{transition:transform .32s cubic-bezier(.2,.85,.2,1)}
  html .lang-globe:hover svg{transform:rotate(22deg) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  html .v163-nav.is-hovering:not(.is-open) .v163-nav__compact{transform:translate3d(-50%,0,0)}
  html .v163-nav__hl{transition:opacity .2s ease}
  html .v163-nav__remote-orb:hover{transform:none}
}

/* 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) */

/* 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)}}

/* 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}
}

/* PCFOX V6 – neue Szenen und Oberflächen (nur die im V6-Auftrag genannten Bereiche).
   Bildschirm-Oberflächen: echte, nachgebaute Programme (keine Science-Fiction-Oberflächen), neutrale Beispielinhalte.
   Keine CSS-Filter auf 3D-transformierten Oberflächen (Chrome zeichnete das Admin-Fenster sonst leer) – Abdunkeln per Ebene. */

/* ── Bildschirm-Tracking: ohne passenden Clip unsichtbar ── */
.reel__layer .scr.is-lost{opacity:0!important;visibility:hidden!important}
.reel__layer .scr[data-track]{transition:opacity var(--d-base) ease,visibility 0s linear .5s}
.scr--monitor .ui-admin,.scr--monitor .ui-ol{filter:none!important}
.scr--monitor .ui-ol::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.08);pointer-events:none}
.scr--dim::before{content:"";position:absolute;inset:0;z-index:3;background:rgba(10,12,20,.14);pointer-events:none}
.scr--web::after{background:linear-gradient(125deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),radial-gradient(120% 90% at 50% 50%,transparent 62%,rgba(0,0,0,.16))}

/* ═══ Website: mira hair atelier (Monitor) ═══ */
.ui-fash{background:#fff;color:#161412;font-family:"Cormorant Garamond","Times New Roman",Georgia,serif}
.fs-page{position:absolute;inset:0;display:flex;flex-direction:column;animation:fsScroll 26s cubic-bezier(.6,0,.2,1) 5s infinite}
.scr:not(.is-on) .fs-page{animation-play-state:paused}
@keyframes fsScroll{0%,38%{transform:none}50%,80%{transform:translate3d(0,-300px,0)}92%,100%{transform:none}}
.fs-nav{display:flex;align-items:center;gap:30px;height:70px;padding:0 44px;flex:none;font-family:Inter,system-ui,sans-serif;font-size:13px;letter-spacing:.04em;color:#3b3632}
.fs-logo{display:flex;align-items:baseline;gap:9px;margin-right:auto;font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:500;letter-spacing:.02em;color:#161412}
.fs-logo small{font-family:Inter,system-ui,sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8a8079}
.fs-nav em{font-style:normal;padding:10px 18px;border:1px solid #161412;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fs-hero{position:relative;flex:none;height:560px;margin:0 22px;border-radius:6px;overflow:hidden;background:#eeeae6}
.fs-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity var(--d-base) ease}
.fs-vid.is-swap{opacity:0}
.fs-copy{position:absolute;right:48px;bottom:46px;width:360px;text-align:right}
.fs-copy small{display:block;font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#6a625c}
.fs-copy h3{margin:14px 0 20px;font-size:58px;line-height:.98;font-weight:500;letter-spacing:-.01em}
.fs-copy em{display:inline-block;font-style:normal;font-family:Inter,system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;background:#161412;color:#fff;border-radius:999px}
.fs-dots{position:absolute;left:48px;bottom:52px;display:flex;gap:8px}
.fs-dots i{width:26px;height:2px;background:rgba(22,20,18,.25)}
.fs-dots i.on{background:#161412}
.fs-row{padding:40px 44px 10px;flex:none}
.fs-row h4{margin:0 0 22px;font-size:34px;font-weight:500}
.fs-row>div{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fs-row figure{margin:0;font-family:Inter,system-ui,sans-serif}
.fs-row img{display:block;width:100%;height:230px;object-fit:cover;border-radius:4px;background:#eee}
.fs-row b{display:block;margin-top:12px;font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:500}
.fs-row span{font-size:12.5px;color:#6a625c}
.fs-foot{margin-top:auto;padding:16px 44px;font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9a918a}

/* ═══ Website: Muster Logistik (Laptop) ═══ */
.ui-logi{background:#f6f7f9;color:#0f1d2e;font-family:Inter,system-ui,sans-serif}
.lg-page{position:absolute;inset:0;display:flex;flex-direction:column}
.lg-nav{display:flex;align-items:center;gap:26px;height:68px;padding:0 40px;flex:none;background:#fff;font-size:14px;color:#3c4a5c;border-bottom:1px solid #e5e8ee}
.lg-nav b{margin-right:auto;font-size:19px;font-weight:800;letter-spacing:.06em;color:#0f1d2e}
.lg-nav b span{margin-left:6px;font-weight:500;color:#e2702f}
.lg-nav em{font-style:normal;padding:10px 16px;border-radius:8px;background:#e2702f;color:#fff;font-weight:600;font-size:13px}
.lg-hero{position:relative;flex:none;height:430px;background-size:cover;background-position:center 60%}
.lg-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,22,40,.82),rgba(9,22,40,.35) 55%,rgba(9,22,40,0))}
.lg-hero>div{position:relative;padding:74px 50px;color:#fff;max-width:640px}
.lg-hero small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#ffc59e}
.lg-hero h3{margin:16px 0 26px;font-size:54px;line-height:1.02;font-weight:750;letter-spacing:-.02em}
.lg-cta{display:flex;gap:12px}
.lg-cta em,.lg-cta i{font-style:normal;padding:13px 20px;border-radius:9px;font-size:14px;font-weight:600}
.lg-cta em{background:#e2702f}.lg-cta i{border:1px solid rgba(255,255,255,.5)}
.lg-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px 40px 18px;flex:none}
.lg-facts div{padding:18px 20px;border-radius:12px;background:#fff;box-shadow:0 1px 0 #e5e8ee}
.lg-facts b{display:block;font-size:17px;margin-bottom:6px}.lg-facts span{font-size:13.5px;color:#5b6778}
.lg-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 40px;flex:none}
.lg-cards figure{position:relative;margin:0;height:170px;border-radius:12px;background-size:cover;background-position:center;overflow:hidden}
.lg-cards figcaption{position:absolute;left:14px;bottom:12px;padding:7px 12px;border-radius:7px;background:rgba(255,255,255,.92);font-size:13px;font-weight:600}
.lg-foot{margin-top:auto;padding:14px 40px;font-size:12px;color:#8793a4}

/* ═══ Meetingraum: tippende Laptops, ClickShare-LED ═══ */
.ui-type{background:#fff;color:#1f2430;font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif}
.ty-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;background:#2b579a;color:#fff;font-size:14px}
.ty-bar span{opacity:.85}
.ty--teams .ty-bar{background:#4b53bc}
.ty-doc{padding:22px 26px;font-size:17px;line-height:1.55}
.ty-doc p{margin:0 0 6px;opacity:0;transform:translate3d(0,4px,0)}
.ty-doc p.is-on{opacity:1;transform:none}
.ty-cur{display:inline-block;width:2px;height:19px;background:#1f2430;vertical-align:-3px;animation:tyCur 1.05s steps(1) infinite}
@keyframes tyCur{50%{opacity:0}}
/* ClickShare-Leuchtring (V6.3): Ellipse folgt dem echten Lichtring des Buttons; vorn heller (streifender Blick), weicher Schein nach innen und aussen.
   Verbinden: ruhiges Atmen; verbunden: stehendes Weiss – kein Blinken. */

/* ═══ Microsoft 365: Teams (Laptop) ═══ */
.ui-teams{display:grid;grid-template-rows:46px 1fr;background:#f5f5f5;color:#242424;font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif;font-size:15px}
.tm-top{display:flex;align-items:center;gap:16px;padding:0 16px;background:#ebebeb;border-bottom:1px solid #e0e0e0}
.tm-nav{color:#616161;font-size:16px;width:60px}
.tm-q{display:flex;align-items:center;gap:8px;margin:0 auto;width:520px;height:30px;padding:0 12px;border-radius:6px;background:#fff;color:#707070;font-size:14px;border:1px solid #d6d6d6}
.tm-q svg{width:15px;height:15px;fill:none;stroke:#707070;stroke-width:2}
.tm-me i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#5b5fc7;color:#fff;font-style:normal;font-size:12px;font-weight:600}
.tm-body{display:grid;grid-template-columns:68px 300px 1fr;min-height:0}
.tm-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:10px;background:#ebebeb}
.tm-rail span{display:grid;justify-items:center;gap:2px;width:60px;padding:8px 0;border-radius:6px;color:#616161}
.tm-rail span.on{color:#5b5fc7;background:#fff}
.tm-rail svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.tm-rail small{font-size:10.5px}
.tm-list{padding:14px 10px;background:#fafafa;border-right:1px solid #e6e6e6;overflow:hidden}
.tm-list h6{margin:0 0 12px 8px;font-size:19px;font-weight:700}
.tm-list p{display:grid;grid-template-columns:36px 1fr auto;column-gap:10px;align-items:center;margin:0 0 2px;padding:9px 8px;border-radius:6px}
.tm-list p.on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tm-list i,.tm-h i,.tm-m i{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8ebfa;color:#4f52b2;font-style:normal;font-size:12px;font-weight:700}
.tm-list b{font-size:14.5px;font-weight:600}.tm-list span{grid-column:2;font-size:13px;color:#616161;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-list em{grid-row:1;grid-column:3;font-style:normal;font-size:12px;color:#707070}
.tm-chat{display:grid;grid-template-rows:56px 1fr 64px;min-width:0;background:#fff}
.tm-h{display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid #ebebeb}
.tm-h b{font-size:16px}.tm-h span{padding:6px 2px;font-size:14px;color:#424242;border-bottom:2px solid transparent}
.tm-h span:nth-of-type(1){border-color:#5b5fc7;font-weight:600}
.tm-h em{margin-left:auto;display:grid;place-items:center;width:34px;height:30px;border-radius:6px;background:#5b5fc7}
.tm-h em svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8}
.tm-msgs{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:18px 24px;overflow:hidden}
.tm-m{display:flex;gap:10px;max-width:78%;opacity:0;transform:translate3d(0,8px,0)}
.tm-m.is-on{opacity:1;transform:none}
.tm-m.me{align-self:flex-end}.tm-m.me i{display:none}
.tm-m>div{padding:10px 14px;border-radius:8px;background:#f5f5f5}
.tm-m.me>div{background:#e8ebfa}
.tm-m small{display:block;margin-bottom:3px;font-size:12px;color:#616161}.tm-m p{margin:0;font-size:14.5px;line-height:1.45}
.tm-m u{color:#4f52b2;text-decoration:none}
.tm-file{display:flex;align-items:center;gap:12px;width:330px;margin-left:44px;padding:10px 12px;border:1px solid #e0e0e0;border-radius:8px;opacity:0}
.tm-file.is-on{opacity:1}
.tm-file img{width:28px;height:28px}.tm-file b{display:block;font-size:14px}.tm-file small{font-size:12px;color:#616161}
.tm-compose{display:flex;align-items:center;margin:0 24px 14px;padding:0 14px;border:1px solid #d6d6d6;border-bottom:2px solid #5b5fc7;border-radius:6px;color:#707070;font-size:14px}
.tm-compose em{margin-left:auto}.tm-compose svg{width:18px;height:18px;fill:none;stroke:#5b5fc7;stroke-width:1.8}

/* ═══ Microsoft 365: Monitor – Outlook (links), Explorer mit OneDrive (rechts), OneDrive-Status, Taskleiste ═══ */
.ui-desk{background:linear-gradient(135deg,#1c3f7a,#3a6fb3 45%,#9ec0e6);font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif;color:#1f1f1f;font-size:14.5px}
.dk-win{position:absolute;top:14px;bottom:62px;display:grid;grid-template-rows:38px 1fr;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.dk-ol{left:14px;width:calc(50% - 21px)}
.dk-ex{right:14px;width:calc(50% - 21px);grid-template-rows:38px 40px 1fr}
.dk-t{display:flex;align-items:center;gap:10px;padding:0 12px;background:#f3f3f3;font-size:13.5px}
.dk-t img{width:18px;height:18px}.dk-t em{margin-left:auto;display:flex;gap:18px}
.dk-t em i{width:10px;height:10px;border:1.4px solid #555}.dk-t em i:first-child{height:0;border-width:1.4px 0 0}
.dk-exi svg{width:18px;height:18px;fill:#f2c25c;stroke:#c9962c;stroke-width:1}
.dk-olb{display:grid;grid-template-columns:170px 1fr;min-height:0}
.dk-olb aside{padding:12px 10px;background:#fafafa;border-right:1px solid #eee;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.dk-olb aside b{font-size:12px;color:#616161;margin-bottom:4px}
.dk-olb aside span{padding:6px 8px;border-radius:4px}.dk-olb aside span.on{background:#cfe4fa;font-weight:600}
.dk-olb aside em{font-style:normal;color:#0f6cbd;margin-left:6px}
.dk-olb ul{list-style:none;margin:0;padding:0}
.dk-olb li{display:grid;grid-template-columns:1fr auto;padding:10px 14px;border-bottom:1px solid #f0f0f0}
.dk-olb li b{font-weight:500}.dk-olb li.u b{font-weight:700}.dk-olb li.u{box-shadow:inset 3px 0 #0f6cbd}
.dk-olb li span{grid-column:1;font-size:13px;color:#424242}.dk-olb li.u span{color:#0f6cbd}
.dk-olb li em{grid-row:1;grid-column:2;font-style:normal;font-size:12px;color:#616161}
.dk-path{display:flex;align-items:center;gap:8px;padding:0 14px;font-size:13px;color:#424242;border-bottom:1px solid #eee}
.dk-path span{display:flex;align-items:center;gap:6px}
.dk-path svg{width:16px;height:16px;fill:none;stroke:#0f6cbd;stroke-width:1.6}
.dk-exb{display:grid;grid-template-columns:190px 1fr;min-height:0}
.dk-exb aside{display:flex;flex-direction:column;gap:3px;padding:10px 8px;border-right:1px solid #eee;font-size:13px}
.dk-exb aside span{display:flex;align-items:center;gap:7px;padding:6px 6px;border-radius:4px}
.dk-exb aside span.sub{padding-left:22px}.dk-exb aside span.on{background:#e5f1fb}
.dk-exb aside svg,.dk-exb main svg{width:17px;height:17px;flex:none}
.dk-exb aside .od svg{fill:none;stroke:#0f6cbd;stroke-width:1.6}
.dk-exb svg{fill:#f2c25c;stroke:#c9962c;stroke-width:1}
.dk-exb main{padding:6px 12px;font-size:13.5px}
.dk-exb main p{display:grid;grid-template-columns:1fr 60px 110px;align-items:center;margin:0;padding:8px 6px;border-bottom:1px solid #f4f4f4}
.dk-exb main p.h{font-size:12px;color:#616161}
.dk-exb main p span{display:flex;align-items:center;gap:9px}.dk-exb main img{width:18px;height:18px}
.dk-exb main small{font-size:12px;color:#616161}
.dk-exb em.ok::before,.dk-exb em.cloud::before{content:"";display:block;width:14px;height:14px;border-radius:50%}
.dk-exb em.ok::before{background:#107c10;box-shadow:inset 0 0 0 3px #fff,0 0 0 1px #107c10}
.dk-exb em.cloud::before{width:18px;height:11px;border-radius:6px;border:1.6px solid #0f6cbd;background:none}
.dk-od{position:absolute;right:26px;bottom:74px;width:360px;padding:14px 16px;border-radius:10px;background:#2b2b2b;color:#fff;box-shadow:0 14px 36px rgba(0,0,0,.4)}
.od-h{display:flex;align-items:center;gap:10px;font-size:15px}.od-h img{width:24px;height:24px}
.od-ok{display:flex;align-items:center;gap:8px;margin:10px 0 12px;font-size:13.5px;color:#e6e6e6}
.od-ok svg{width:18px;height:18px;fill:#6ccb5f;stroke:#2b2b2b;stroke-width:1.6}
.od-f{display:flex;align-items:center;gap:10px;margin:0}.od-f img{width:26px;height:26px}
.od-f b{display:block;font-size:13.5px;font-weight:500}.od-f small{font-size:12px;color:#bdbdbd}
.dk-task{position:absolute;left:0;right:0;bottom:0;height:48px;display:flex;align-items:center;justify-content:center;gap:14px;background:rgba(238,240,245,.9)}
.dk-task span{display:grid;place-items:center;width:36px;height:36px;border-radius:6px}.dk-task span img{width:22px;height:22px}
.dk-task .st{width:20px;height:20px;border-radius:3px;background:conic-gradient(#0f6cbd 0 25%,#1a86e0 0 50%,#0f6cbd 0 75%,#1a86e0 0);margin-right:6px}
.dk-task em{position:absolute;right:16px;display:flex;align-items:center;gap:10px;font-style:normal;font-size:13px;color:#1f1f1f}.dk-task em img{width:20px;height:20px}

/* ═══ Firmendomäne: Migration Dateiserver -> SharePoint (gestartet -> läuft -> erfolgreich) ═══ */
.ui-migr{display:grid;grid-template-rows:52px 1fr;background:#faf9f8;color:#242424;font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif;font-size:16px}
.mi-top{display:flex;align-items:center;gap:14px;padding:0 20px;background:#1b1a19;color:#fff}
.mi-top b{font-size:17px;font-weight:600}
.mi-dom{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14px;color:#c8e6c9}
.mi-dom svg{width:18px;height:18px;fill:none;stroke:#8bd48b;stroke-width:1.8}
.mi-top>i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#8764b8;font-style:normal;font-size:13px}
.mi-body{display:grid;grid-template-columns:230px 1fr;min-height:0}
.mi-body aside{display:flex;flex-direction:column;gap:2px;padding:16px 10px;background:#f3f2f1;border-right:1px solid #e1dfdd;font-size:15px}
.mi-body aside span{padding:8px 12px;border-radius:4px}.mi-body aside span.on{background:#fff;font-weight:600;box-shadow:inset 3px 0 #0f6cbd}
.mi-body aside small{margin:14px 12px 4px;font-size:12px;color:#605e5c}
.mi-body main{padding:26px 34px;min-width:0}
.mi-body h6{margin:0 0 16px;font-size:22px;font-weight:600}
.ui-migr .k{position:absolute;width:0;height:0;opacity:0}
.mi-state span{display:none;align-items:center;gap:8px;width:max-content;padding:7px 14px;border-radius:999px;font-size:14.5px;font-weight:600}
.mi-state .s1{display:inline-flex;background:#e8f1fb;color:#0f6cbd}
.ui-migr:has(.k-run.is-on) .mi-state .s1{display:none}
.ui-migr:has(.k-run.is-on) .mi-state .s2{display:inline-flex;background:#fff4ce;color:#8a6100}
.ui-migr:has(.k-done.is-on) .mi-state .s2{display:none}
.ui-migr:has(.k-done.is-on) .mi-state .s3{display:inline-flex;background:#dff6dd;color:#107c10}
.mi-state svg{width:17px;height:17px;fill:none;stroke:#107c10;stroke-width:2}
.mi-kpi{display:grid;grid-template-columns:repeat(3,200px);gap:16px;margin:20px 0 18px}
.mi-kpi div{padding:14px 16px;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mi-kpi small{display:block;font-size:13px;color:#605e5c}.mi-kpi b{font-size:28px;font-weight:600}
.mi-list{list-style:none;margin:0;padding:0;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mi-list li{display:grid;grid-template-columns:1fr 280px 150px;align-items:center;gap:20px;padding:14px 18px;border-bottom:1px solid #f0efee}
.mi-list b{display:block;font-family:Consolas,"Cascadia Mono",monospace;font-size:14.5px;font-weight:500}.mi-list small{font-size:13px;color:#605e5c}
.mi-list i{height:8px;border-radius:4px;background:#edebe9;overflow:hidden}
.mi-list i em{display:block;height:100%;border-radius:4px;background:#0f6cbd;width:calc(min(1,max(0,(var(--sp,0) - .1 - var(--d)) / .64)) * 100%)}
.mi-list strong{font-size:14px;font-weight:600}
.mi-list .d{display:none;color:#107c10}.mi-list .w{color:#8a6100}
.ui-migr:has(.k-done.is-on) .mi-list .d{display:block}
.ui-migr:has(.k-done.is-on) .mi-list .w{display:none}
.ui-migr:has(.k-done.is-on) .mi-list i em{background:#107c10}
.ui-migr:not(:has(.k-run.is-on)) .mi-list strong{visibility:hidden}
.mi-flow{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 18px;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);opacity:0;transform:translate3d(0,8px,0)}
.mi-flow.is-on{opacity:1;transform:none}
.mi-flow img{width:30px;height:30px}.mi-flow b{display:block;font-size:15px}.mi-flow small{font-size:13px;color:#605e5c}
.mi-flow em{display:flex;align-items:center;gap:6px;margin-left:auto;font-style:normal;font-weight:600;color:#107c10;font-size:14px}
.mi-flow em svg{width:18px;height:18px;fill:none;stroke:#107c10;stroke-width:2}

/* ═══ Hardware: Bauteile beim Darüberfahren ═══ */
.hwp{width:1920px;height:1080px}
.hwp svg{position:absolute;inset:0;overflow:visible}
.hwp__a{fill:rgba(195,178,255,0);stroke:rgba(195,178,255,0);stroke-width:calc(2px * var(--ls,1));stroke-linejoin:round;transition:fill var(--d-base) ease,stroke var(--d-base) ease}
.hwp__a.is-hot{fill:rgba(170,140,255,.10);stroke:rgba(205,190,255,.85);filter:drop-shadow(0 0 10px rgba(160,120,255,.55))}
.hwp__dot{position:absolute;width:0;height:0}
.hwp__dot::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:rgba(235,228,255,.85);box-shadow:0 0 0 4px rgba(138,92,255,.22),0 0 14px rgba(195,178,255,.65);transform:scale(var(--ls,1));transition:opacity var(--d-fast) ease}
.hwp:has(.hwp__a.is-hot) .hwp__dot::before{opacity:.25}
.hwp__tip{position:absolute;width:0;height:0}
.hwp__box{position:absolute;left:0;bottom:0;width:300px;padding:10px 14px 11px;border-radius:12px;background:rgba(10,10,15,.86);border:1px solid rgba(205,190,255,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.45);text-align:center;transform-origin:50% 100%;transform:translate(-50%,0) scale(var(--ls,1));opacity:0;transition:opacity var(--d-fast) ease;pointer-events:none}
.hwp__tip--below .hwp__box{bottom:auto;top:0;transform-origin:50% 0}
.hwp__box b{display:block;margin-bottom:4px;font:600 15px/1.25 Inter,system-ui,sans-serif;color:#fff}
.hwp__box span{display:block;font:450 13px/1.45 Inter,system-ui,sans-serif;color:rgba(245,245,247,.8)}
.hwp__tip.is-hot .hwp__box{opacity:1}
.hwhint .hw-t{display:none}
@media (pointer:coarse){.hwhint .hw-m{display:none}.hwhint .hw-t{display:inline}}

/* ═══ Infrastruktur: realistische Port-LEDs – ruhig an; Aktivität kommt unregelmässig per Web-Animation (interact.js, data-p) ═══ */

/* ═══ Topologie: klare Hierarchie, gleichmässige Abstände, keine Überlappung ═══ */
.reel.is-film .topo2{width:min(520px,36vw);height:330px}
.topo2 .tn{gap:10px;padding:8px 14px 8px 9px;font-size:13px}
.topo2 .tn .glyph{position:static!important;display:grid;place-items:center;flex:none;width:26px;height:26px;margin:0;border-radius:8px;background:rgba(160,130,255,.15);transform:none!important}
.topo2 .tn .glyph svg{position:static;inset:auto;width:15px;height:15px;overflow:hidden}
.topo2 .tn--leaf{flex-direction:column;gap:7px;min-width:104px;padding:11px 10px 10px;font-size:12.5px;text-align:center}
.topo2 .tl{stroke-linecap:round;stroke-dasharray:none!important;stroke-dashoffset:0!important}
.topo2>svg{clip-path:inset(0 0 calc((1 - var(--sp,0)) * 100%) 0)}

/* ═══ Monitoring: 360° ═══ */
.t-line--360 h2.say{font-size:clamp(30px,3vw,48px)!important}
.hud--360 .hud__ico svg{stroke:#cbbcff}
.reel.is-film .hud--360{top:clamp(96px,13vh,130px)}
.hud--360 li{padding:8px 0;gap:12px}
.hud--360 .hud__t b{font-size:14.5px}
.hud--360 .hud__t small{font-size:12px}

@media (max-width:760px){
  .reel.is-film .topo2{width:auto;height:300px}
  .topo2 .tn--leaf{min-width:0;padding:9px 6px;font-size:11px}
  .hwp__box{width:240px}
}
/* ═══ V6.3 Kameraplan: klare Hierarchie (Technikraum -> Trasse -> Geräte), lesbare Nummern ═══ */
.kplan__run{fill:none;stroke:rgba(195,178,255,.42);stroke-width:1;stroke-dasharray:3 3;stroke-linecap:round;stroke-linejoin:round}
.kplan__tech{fill:rgba(195,178,255,.16);stroke:rgba(195,178,255,.7);stroke-width:1.1}
.kplan text.kplan__tl{font-size:9.5px;font-weight:700;letter-spacing:.1em;fill:#e9e2ff}
.kap circle.kap__cov{fill:rgba(195,178,255,.06);stroke:rgba(195,178,255,.22);stroke-width:.8;stroke-dasharray:2 3}
.kap circle:not(.kap__cov){r:4.2px}.kcam circle{fill:#d9cfff;stroke:none}
.kplan text.kcam__no{font-size:8.5px;font-weight:800;letter-spacing:0;fill:#241a4d}
.kcam__cone{fill:rgba(195,178,255,.13);stroke:rgba(195,178,255,.4)}
.kplan__legend{flex-wrap:nowrap;gap:6px 12px}.kplan__legend i.run{margin-right:7px;width:14px;height:0;border-radius:0;background:none;border-top:1.5px dashed rgba(195,178,255,.75)}
.kplan text{fill:rgba(255,255,255,.55)}

/* ═══ V6.3 Liquid Glass: echtes Blur, feine Kante, weiche Lichtkante oben; nur für kleine Info-Karten/Labels ═══ */
.reel__layer .glcards .gl{position:absolute;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:18px 26px 18px 18px;border-radius:24px;
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,rgba(255,255,255,.08)),rgba(18,14,36,.42);white-space:nowrap;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.26);box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08);
  color:#fff;opacity:0;transform:translate3d(0,14px,0) scale(.97);transition:opacity var(--d-slow) ease,transform var(--d-slow) var(--e-out)}
.reel__layer .glcards.is-on .gl{opacity:1;transform:none}.glcards .gl:nth-child(1){transition-delay:.5s}.glcards .gl:nth-child(2){transition-delay:1s}.glcards .gl:nth-child(3){transition-delay:1.5s}
.gl i{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.gl i svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gl b{font-size:24px;font-weight:650;letter-spacing:-.01em;line-height:1.1}
.gl small{font-size:16px;color:rgba(255,255,255,.78);line-height:1.2}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.reel__layer .glcards .gl{background:rgba(40,36,60,.82)}}
@media (max-width:860px){.reel__layer .glcards .gl{padding:14px 20px 14px 14px}.gl b{font-size:26px}.gl small{font-size:18px}}

/* V6.3 Eckenradius: physische Display-Ecken (in Overlay-Pixeln, wirken per Homographie perspektivisch mit) */
.scr--laptop{border-radius:12px}.scr--monitor{border-radius:8px}.scr--tv{border-radius:7px}

/* V6.3 Lebendige Standbilder (m365b wird getrackt, daher kein Parallax): weiches, langsam wanderndes Fensterlicht + leichtes Atmen */
.reel__layer::before{content:"";position:absolute;inset:-10%;pointer-events:none;opacity:0;transition:opacity var(--d-slow) ease;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 38% 46% at 24% 30%,rgba(255,214,160,.55),transparent 70%),radial-gradient(ellipse 30% 40% at 78% 62%,rgba(190,170,255,.35),transparent 70%)}
[data-chapter="cloud"] .reel__layer::before,[data-chapter="sharepoint"] .reel__layer::before,[data-chapter="web"] .reel__layer::before{opacity:.55;animation:ambDrift 14s ease-in-out infinite alternate}
@keyframes ambDrift{0%{transform:translate3d(-2.5%,-1.5%,0) scale(1)}100%{transform:translate3d(2.5%,1.5%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.reel__layer::before{animation:none!important}}

@media (max-width:860px){.glcards .gl:nth-child(3){display:none}.glcards .gl:nth-child(1){top:330px!important}.glcards .gl:nth-child(2){top:286px!important}}

.panel .kplan__legend li{border-top:0;padding:0;justify-content:flex-start;font-size:12px}

/* ═══ V6.3 Liquid Glass: ein Material für Weiterlesen-Karte, Pin-Labels und Panels ═══
   Karte/Labels: echtes Blur (klein, eins zur Zeit); Panels bleiben dicht (Performance), bekommen aber Glas-Kante und Lichtkante. */
:root{--glass-fill:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 52%,rgba(255,255,255,.08));--glass-edge:rgba(255,255,255,.24);
  --glass-rim:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.07);--glass-drop:0 18px 50px rgba(0,0,0,.32)}
.reel.is-film .readon{background:var(--glass-fill),rgba(20,16,38,.56);border-color:var(--glass-edge);box-shadow:var(--glass-drop),var(--glass-rim);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.reel.is-film .readon__go{border-top-color:rgba(255,255,255,.14)}
.reel.is-film .readon__go i{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.reel__layer .pin b{background:var(--glass-fill),rgba(14,12,26,.5);border-color:var(--glass-edge);box-shadow:0 8px 24px rgba(0,0,0,.28),var(--glass-rim);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
.reel.is-film .panel{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 42%),linear-gradient(160deg,rgba(24,23,31,.93),rgba(12,12,17,.93));
  border-color:rgba(255,255,255,.16);box-shadow:var(--glass-drop),var(--glass-rim)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.reel.is-film .readon{background:rgba(26,22,44,.94)}.reel__layer .pin b{background:rgba(14,12,26,.86)}}


/* V6.3 Liquid Glass: Themen-Chips und Anliegen-Pillen im selben Material wie Karten und Buttons (Verlauf + Lichtkante, ohne Blur) */
.chips a,.topics span{background:var(--glass-fill),rgba(18,16,30,.42);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.05)}
.chips a:hover{background:var(--glass-fill),rgba(70,58,130,.5);border-color:rgba(195,178,255,.55)}

/* ═══ V10 Hauptvideo: helle Bildschirm-Nahaufnahmen (Seedance). Die Texte liegen links unten auf hellen Oberflächen und brauchen einen ruhigen, dunklen Grund.
   Das Flag-Element .deskflag (story_film.py deskflag()) setzt je Abschnitt stage[data-desk="screens"]; der Verlauf blendet weich ein und aus. ═══ */
.deskflag{display:none}
/* V11: lokaler Scrim statt Fläche – nur die Textzone links unten (≤ 40 % Breite, ≤ 46 % Höhe), die Oberfläche bleibt oben rechts frei. */
.reel__veil::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--d-slow) var(--e-smooth);
  background:linear-gradient(0deg,rgba(4,5,8,.84),rgba(4,5,8,.56) 18%,rgba(4,5,8,.2) 34%,rgba(4,5,8,0) 46%),
             linear-gradient(90deg,rgba(4,5,8,.8),rgba(4,5,8,.5) 16%,rgba(4,5,8,.18) 30%,rgba(4,5,8,0) 40%)}
.reel__stage[data-desk="screens"] .reel__veil::after{opacity:1}
@media (max-width:860px){.reel__veil::after{display:none}}   /* Handy: Text steht unter dem Film auf Schwarz, kein Verlauf über der Oberfläche nötig */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* PCFOX V26 — Kontaktseite */
.page{position:relative;z-index:6;min-height:100vh;min-height:100svh;padding:clamp(130px,18vh,190px) 0 clamp(72px,10vh,120px)}
.page__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.page__logo{width:min(250px,60vw);height:auto;margin-bottom:clamp(34px,6vh,60px)}
.page h1{margin-top:20px;font-size:clamp(48px,6vw,108px);line-height:.93;font-weight:640;letter-spacing:-.047em}
.page h1 span{color:var(--fg-3)}
.direct{margin-top:clamp(36px,6vh,60px);border-top:1px solid var(--line)}
.direct li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.direct small{font-size:11px;font-weight:680;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.direct a,.direct span{font-size:16px;font-weight:600}
.direct a:hover{color:var(--lavender)}
.form,.sent{padding:clamp(24px,3vw,40px);border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 70px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:8px;margin-bottom:16px}
.field label{font-size:12px;font-weight:650;letter-spacing:.08em;color:var(--fg-2)}
.field label em{font-style:normal;color:var(--fg-3);font-weight:500;letter-spacing:0}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border-radius:14px;font:inherit;font-size:15.5px;color:#fff;background:rgba(5,5,7,.45);border:1px solid rgba(255,255,255,.12);transition:border-color var(--d-quick) ease,box-shadow var(--d-quick) ease}
.field textarea{min-height:170px;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--lavender) 50%),linear-gradient(135deg,var(--lavender) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.field select option{background:#101016;color:#fff}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,245,247,.56)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet-2);box-shadow:0 0 0 4px rgba(138,92,255,.16)}
.field [aria-invalid="true"]{border-color:#ff8a8a}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px;font-size:13.5px;line-height:1.5;color:var(--fg-2);cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--violet)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.form__foot .btn{min-width:210px}.form__foot .btn[disabled]{opacity:.6;cursor:progress}
.form__hint{font-size:12.5px;color:var(--fg-3)}
.form-status{margin-top:18px;padding:14px 16px;border-radius:14px;font-size:14.5px;line-height:1.5}
.form-status[hidden],.sent[hidden],.form[hidden]{display:none}
.form-status--error{background:rgba(255,120,120,.08);border:1px solid rgba(255,138,138,.3);color:#ffd1d1}
.form-status--info{background:rgba(138,92,255,.1);border:1px solid rgba(195,178,255,.25)}
.form-status a{text-decoration:underline;text-underline-offset:3px}
.sent .state{margin-bottom:18px}
.sent h2{margin-top:0;font-size:clamp(32px,3.4vw,56px)}
.sent p{margin-top:16px;color:var(--fg-2);font-size:16px}
.sent .btn{margin-top:26px}
@media (max-width:1100px){.page__grid{grid-template-columns:1fr}}
@media (max-width:560px){.form__row{grid-template-columns:1fr}.form__foot .btn{width:100%}.direct li{flex-direction:column;gap:4px}}

.consent a{color:#fff;border-bottom:1px solid rgba(195,178,255,.5);transition:color var(--d-quick) ease,border-color var(--d-quick) ease}
.consent a:hover{color:var(--lavender);border-color:var(--lavender)}

/* 03.11.2026 Sichtbarkeit: Abschnitt «Was wir machen» am Seitenende (immer sichtbar, ohne data-reveal) und Etikett über den Beispielzahlen im Film.
   z-index wie .contact2/.footer, sonst liegt .aurora (base.css, Überblendung) über dem Text. */
.wwm{position:relative;z-index:6;padding:clamp(90px,14vh,150px) 0}
.wwm__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px);margin:clamp(40px,7vh,72px) 0 0;padding:0;list-style:none}
.wwm__list li{position:relative;padding-top:18px;border-top:1px solid var(--line-2)}
.wwm__list h3{font-size:clamp(17px,1.25vw,20px);line-height:1.25;font-weight:640}
.wwm__list h3 a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:.2em}
.wwm__list h3 a:hover,.wwm__list h3 a:focus-visible{text-decoration-color:#fff}
.wwm__list h3 a::after{content:"";position:absolute;inset:0}
.wwm__list p{margin-top:8px;font-size:15px;line-height:1.45;color:var(--ap-grey,rgba(245,245,247,.66))}
@media (max-width:1100px){.wwm__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wwm__list{grid-template-columns:1fr}.wwm__list p{font-size:17px}}
/* Der Block wird im Film per --fit verkleinert: Das Etikett liegt darüber, ausserhalb der Messung, und bleibt immer 12 px gross. */
.kpis3__tag{display:block;grid-column:1/-1;white-space:nowrap;font-size:12px;font-weight:540;color:rgba(245,245,247,.72)}
@media (min-width:861px){.reel.is-film .kpis3__tag{position:absolute;left:0;bottom:100%;font-size:calc(12px / var(--fit,1));line-height:1.1;margin-bottom:calc(2px / var(--fit,1))}}
.reel:not(.is-film) .topo2.kpis3{height:auto}
html:not(.js) .kpi{opacity:1;transform:none}

/* ═══ V19 (David 10.10.: Texte wie bei Apple, besonders auf dem Handy) ═══
   Aufbau jedes Abschnitts wie auf Apple-Produktseiten:
   1. Bereichsname – normal geschrieben, halbfett, in einem Farbverlauf (statt Versalien mit Sperrung),
   2. Titel in zwei Zeilen, zweite Zeile grau, enge Laufweite bei grosser Schrift,
   3. ein kurzer Absatz: Kernaussage weiss (<b>), Details grau – keine Unterstreichungen.
   Laufweite und Zeilenabstand passen sich der Grösse an (gross = enger), Fliesstext auf dem Handy 17 px wie bei Apple. */
:root{--ap-white:#f5f5f7;--ap-grey:rgba(245,245,247,.6);--ap-grad:linear-gradient(90deg,#e4dcff 0%,#b9a2ff 45%,#8a5cff 100%)}

/* 1. Bereichsname */
/* V19b: im Film einfarbig (Lavendel) – ein Verlauf per background-clip:text auf animierten Wort-Spans kostete beim Scrollen Bildrate */
.reel .beat:not(.beat--hero) .eyebrow{display:block;text-transform:none;letter-spacing:-.006em;font-size:clamp(16px,1.2vw,20px);font-weight:600;line-height:1.2;color:#c9b8ff;margin-bottom:8px}
.reel .beat:not(.beat--hero) .eyebrow b{color:inherit;letter-spacing:inherit}
.reel .beat:not(.beat--hero) .eyebrow b::after{display:none}
.reel .beat .eyebrow .auth-logo{margin:-3px 9px 0 0;vertical-align:middle}

/* 2. Titel */
.reel .beat:not(.beat--hero) h2{font-weight:650;letter-spacing:-.03em;line-height:1.03;text-wrap:balance;color:var(--ap-white)}
/* reel.js zerlegt Titel in Wort-Spans (.w/.wi) – nur die vom Text vorgegebene zweite Zeile (span ohne .w) wird grau */
.reel .beat:not(.beat--hero) h2 .w,.reel .beat:not(.beat--hero) h2 .wi{color:inherit}
.reel .beat:not(.beat--hero) h2 > span:not(.w){color:rgba(245,245,247,.5)}

/* 3. Absatz: Kernaussage weiss, Rest grau */
.reel .beat .lede{font-weight:540;color:var(--ap-grey);letter-spacing:-.006em;text-wrap:pretty}
.reel .beat .lede b,.reel .beat .lede strong{font-weight:640;color:var(--ap-white)}
.reel .beat em,.reel:not(.is-film) .beat em{color:var(--ap-white);font-weight:inherit;background:none!important;padding:0}
.reel .pinhint{font-size:13px;color:rgba(245,245,247,.45);letter-spacing:0}

@media (min-width:861px){
  .reel .beat:not(.beat--hero) h2{font-size:clamp(44px,4.6vw,86px)}
  .reel.is-film .beat:not(.beat--hero):not(.beat--opener) .lede,.reel .beat .lede{font-size:clamp(18px,1.4vw,23px);line-height:1.38;max-width:23em;margin-top:18px;color:var(--ap-grey)}
}

/* Handy & Tablet hoch: Bild oben frei, Text darunter in Apple-Grössen */
@media (max-width:860px){
  .reel .beat:not(.beat--hero) .eyebrow{font-size:15px;margin-bottom:6px}
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{margin-top:0;font-size:clamp(31px,8.8vw,40px);letter-spacing:-.024em;line-height:1.06}
  .reel .beat .lede{margin-top:12px;font-size:17px;line-height:1.42;max-width:none}
  .t-say .lede,.t-line .lede,.t-swap .lede{font-size:17px;line-height:1.42;color:var(--ap-grey)}
  /* Einblendungen über dem Bild (Ketten, App-Symbole, Kennzahlen) und Hinweise weg – das Bild bleibt ruhig, eine Aussage pro Bild */
  .reel.is-film .topo2.flow3,.reel.is-film .topo2.apps3,.reel.is-film .topo2.kpis3,.reel .pinhint{display:none}
}
/* Handy quer: kompakter */
@media (orientation:landscape) and (max-height:520px){
  .reel .beat:not(.beat--hero) .eyebrow{font-size:12px;margin-bottom:2px}
  .reel .beat:not(.beat--hero) h2{font-size:clamp(22px,7vh,32px)}
  .reel .beat .lede{font-size:13.5px;line-height:1.4;margin-top:8px}
}

/* Kurze Satz-Abschnitte (say) und grosse Wortfolgen (Fernwartung «Schnell. Sicher. Direkt.») im gleichen Schriftschnitt wie die Titel */
.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-weight:640;letter-spacing:-.024em;line-height:1.08;color:var(--ap-white)}
.reel .t-words--big,.reel .t-words--big .tw{font-weight:650;letter-spacing:-.03em}

/* ═══ Themenseiten (Hardware, Microsoft 365 …) im gleichen Apple-Aufbau ═══ */
.topic .eyebrow,.topic__head .eyebrow,.hero .eyebrow,main .eyebrow{text-transform:none;letter-spacing:-.006em;font-size:clamp(16px,1.15vw,19px);font-weight:600;
  color:#c9b8ff;background:var(--ap-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
main .eyebrow b{-webkit-text-fill-color:var(--ap-white);letter-spacing:-.006em}
.topic__head h2,main h1,main h2{letter-spacing:-.028em;line-height:1.04;font-weight:650;text-wrap:balance}
main h1 span,main h2 span{color:rgba(245,245,247,.5)}
main .lede,.topic__intro p{font-weight:540;letter-spacing:-.006em;color:var(--ap-grey);line-height:1.45;text-wrap:pretty}
main .lede strong,main .lede b,.topic__intro p strong{color:var(--ap-white);font-weight:640}
.card h3,.benefit h3{letter-spacing:-.016em;font-weight:640}
.card p,.benefit p{color:rgba(245,245,247,.62);line-height:1.5}
@media (max-width:860px){
  main .eyebrow{font-size:15px}
  .topic__head h2,main h2{font-size:clamp(31px,8.8vw,40px)}
  main .lede,.topic__intro p{font-size:17px;line-height:1.45}
  .card p,.benefit p{font-size:16px}
  .card h3,.benefit h3{font-size:20px}
}
/* Pfad oben auf den Themenseiten («PCFOX / Hardware & Software») wie bei Apple: normal geschrieben, ruhig */
.crumbs{text-transform:none;letter-spacing:-.004em;font-size:14px;font-weight:560;color:rgba(245,245,247,.5)}
.crumbs a{color:rgba(245,245,247,.72)}
.crumbs span:last-child{background:var(--ap-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}

/* ═══ V19c Team (Abspann) & Kontakt (David 10./11.10.: "Team noch geiler, Kontakt mit Motion" → "Seite laggt, Kontakt nicht geil") ═══
   Leistung zuerst (gemessen mit qa/perf_tc.mjs, CPU 4x gebremst): KEINE dauernd laufenden Animationen auf grossen Flächen,
   KEIN filter:blur / backdrop-filter / maskierte Verläufe, die sich jedes Bild neu zeichnen. Bewegt wird nur transform/opacity,
   einmalig beim Einblenden oder auf Zeiger/Fokus. Logik: src/story/tc.js. Wird nach v19.css geladen. */

/* Kontakt: Filmbild (PCFOX-Arbeitsplatz am Abend) als Kulisse – der Film endet wieder am Schreibtisch */
.contact2.tc{position:relative;isolation:isolate;overflow:clip;padding-top:clamp(140px,22vh,240px)}
.tc-stage{position:absolute;inset:0 0 auto;height:min(100vh,940px);z-index:-1;overflow:hidden;pointer-events:none}
.tc-stage img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;opacity:.5;transform:scale(1.08);transition:transform 2.4s cubic-bezier(.16,1,.3,1),opacity 1.6s ease}
.tc-live .tc-stage img{transform:none;opacity:.8}
.tc-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050507 0%,rgba(5,5,7,.22) 20%,rgba(5,5,7,.3) 50%,rgba(5,5,7,.9) 82%,#050507 100%),
  linear-gradient(90deg,rgba(5,5,7,.86) 0%,rgba(5,5,7,.55) 45%,rgba(5,5,7,.12) 85%)}
.contact2.tc .contact2__head h2 > span:not(.w),.contact2.tc .contact2__head h1 > span:not(.w){color:rgba(245,245,247,.66)}
.contact2.tc .contact2__head h2,.contact2.tc .contact2__head h1{font-size:clamp(44px,5.6vw,104px)}
.contact2.tc .contact2__head .lede{max-width:26em}
/* drei Kacheln in einer Reihe */
.tc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,6vh,64px)}
.tc-tiles .bubbles{display:contents}
.tc-tiles .bubble-wrap{min-width:0}
.tc-tiles .bubble,.tc-tiles .addr{width:100%;height:100%;min-height:132px;margin:0;padding:24px 24px 22px;border-radius:24px;align-content:space-between;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03)),rgba(12,9,18,.72);border:1px solid rgba(255,255,255,.12)}
.tc .bubble small,.tc .addr small{text-transform:none;letter-spacing:-.004em;font-size:14px;font-weight:600;color:#c9b8ff}
.tc-tiles .bubble strong,.tc-tiles .addr strong{font-size:clamp(19px,1.55vw,24px);font-weight:620;letter-spacing:-.02em}
.tc-tiles .addr span{grid-column:1;grid-row:auto;font-size:14px;color:rgba(245,245,247,.6)}
.tc-glow{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s ease}
.tc-glow::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(138,92,255,.22),transparent 65%)}
.tc-glow:hover::after,.tc-glow:focus-visible::after{opacity:1}
.tc-glow:hover{transform:translate3d(0,-4px,0);border-color:rgba(195,178,255,.42)}
.tc-glow:active{transform:scale(.985);transition-duration:.12s}
.tc .addr{position:relative}
.tc-pin{position:absolute;right:24px;top:24px;width:10px;height:10px;border-radius:50%;background:#b9a2ff;box-shadow:0 0 12px rgba(185,162,255,.9)}
.tc-pin i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(185,162,255,.8);opacity:0}
.tc-live .tc-pin i{animation:tcPing 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes tcPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.tc-stagger > *{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.tc-tiles.tc-stagger > *,.tc-tiles.tc-stagger .bubbles > *{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.tc-stagger.is-in > *,.tc-tiles.tc-stagger.is-in .bubbles > *{opacity:1;transform:none}
.tc-tiles.tc-stagger.is-in .bubbles > :nth-child(2){transition-delay:.09s}.tc-tiles.tc-stagger.is-in > .addr{transition-delay:.18s}
.contact2__info.tc-stagger.is-in > :nth-child(2){transition-delay:.1s}
.contact2.tc .contact2__grid{margin-top:clamp(40px,7vh,72px)}
/* Ablauf: Linie wächst mit dem Scrollen, Nummern leuchten nacheinander auf */
.tc-steps{position:relative;margin-top:0}
.tc-steps .eyebrow{text-transform:none;letter-spacing:-.004em;font-size:17px;color:#c9b8ff}
.tc-line{position:absolute;left:17px;top:var(--lt,90px);height:var(--lh,120px);width:2px;border-radius:2px;background:rgba(255,255,255,.08);z-index:0}
.tc-line i{display:block;height:100%;border-radius:2px;transform-origin:top;transform:scaleY(0);background:linear-gradient(#e4dcff,#8a5cff)}
.tc-steps li{position:relative;z-index:1;border-top-color:transparent!important;padding:18px 0}
.tc-steps li strong{font-size:18px;transition:color .5s ease}
.tc-steps li span{font-size:15px}
.tc-steps li b{transition:background .5s ease,color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.tc-steps li.is-lit b{background:linear-gradient(135deg,#b9a2ff,#7c5cff);color:#fff;box-shadow:0 0 24px rgba(138,92,255,.55);transform:scale(1.08)}
.tc-steps li:not(.is-lit) strong{color:rgba(245,245,247,.6)}
/* Formular: ruhiges Glas (ohne Unschärfe), Kante leuchtet beim Ausfüllen */
.tc-formwrap .form{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),rgba(12,9,18,.82);border-color:rgba(255,255,255,.12);transition:border-color .5s ease,box-shadow .6s ease}
.tc-formwrap .form:focus-within{border-color:rgba(195,178,255,.5);box-shadow:0 30px 80px -40px rgba(138,92,255,.6)}
.tc-form .field input:focus,.tc-form .field textarea:focus{border-color:rgba(205,190,255,.7);box-shadow:0 0 0 4px rgba(138,92,255,.18)}
.tc-form .field label{transition:color .3s ease}
.tc-form .field:focus-within label{color:#d6c9ff}
.tc .topics span{transition:color .3s ease,background .3s ease,border-color .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.tc .topics input:checked + span{transform:scale(1.05)}
.tc-send{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;transition:transform .2s ease}
.tc-send i{font-style:normal;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.tc-send:hover i{transform:translateX(5px)}
.tc-send::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.tc-send:hover::after{transform:translateX(130%)}
.tc-send:active{transform:scale(.97)}
.tc .sent:not([hidden]){animation:tcPop .7s cubic-bezier(.16,1,.3,1) both}
@keyframes tcPop{from{opacity:0;transform:translate3d(0,24px,0) scale(.97)}to{opacity:1;transform:none}}

/* Tablet/Handy */
@media (max-width:980px){
  .tc-tiles{grid-template-columns:1fr 1fr}
  .tc-tiles .addr{grid-column:1 / -1}
}
@media (max-width:860px){
  .contact2.tc{padding-top:clamp(110px,16vh,150px)}
  .tc-stage{height:78svh}
  .tc-stage img{object-position:58% 40%}
  .tc-stage::after{background:linear-gradient(180deg,#050507 0%,rgba(5,5,7,.4) 18%,rgba(5,5,7,.55) 48%,rgba(5,5,7,.94) 80%,#050507 100%)}
  .contact2.tc .contact2__head h2,.contact2.tc .contact2__head h1{font-size:clamp(36px,10vw,48px)}
  .tc-tiles{grid-template-columns:1fr;gap:12px}
  .tc-tiles .bubble,.tc-tiles .addr{min-height:0;padding:20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .tc-live .tc-pin i{animation:none}
  .tc-stagger > *,.tc-tiles.tc-stagger .bubbles > *{opacity:1;transform:none;transition:none}
  .tc-stage img{transform:none;transition:none}
}

/* ═══ V19d Team als Abspann mit Animation (David 11.10.: "komplett neu", "Originalfarbe", "mit Animation, damit es geiler aussieht") ═══
   Beim Scrollen gehört der Bildschirm je einer Person. Bewegung nur über transform/opacity (+ einmal clip-path beim Bildwechsel):
   – Name: Buchstaben gleiten einzeln aus einer Kante (tc.js zerlegt in .ch), beim Weiterscrollen nach oben weg
   – Porträt: neues Bild wischt von unten über das alte und zoomt dabei aus der Nähe heraus, danach langsames Heranfahren (--lp)
   – Hintergrund: riesiger Vorname als zarter Umriss gleitet seitlich mit; leuchtender Ring dreht sich hinter dem Porträt (nur sichtbar)
   – Maus: Porträt neigt sich mit, Glanzlicht folgt dem Zeiger. Logik: src/story/tc.js (data-crew). */
.crew{position:relative;overflow:clip;background:radial-gradient(55% 45% at 78% 55%,rgba(138,92,255,.14),transparent 70%)}
.crew__intro{padding:clamp(120px,18vh,200px) 0 0}
.crew__intro .lede{max-width:30em}
.crew__track{position:relative;height:calc(var(--n,4) * 92svh + 8svh)}
.crew__stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,90px);
  width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}

/* riesiger Vorname im Hintergrund */
.crew__ghosts{position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;display:grid;align-items:center;overflow:hidden}
.crew__ghost{grid-area:1/1;white-space:nowrap;font-size:clamp(160px,26vw,460px);font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(205,190,255,.09);opacity:0;transform:translate3d(8vw,0,0);transition:opacity .9s ease}
.crew__ghost.is-on{opacity:1}

/* Porträts */
.crew__pics{position:relative;order:2;justify-self:end;height:min(78svh,780px);aspect-ratio:3/4;max-width:100%;perspective:1400px}
.crew__ring{position:absolute;left:50%;top:50%;width:122%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;opacity:.55;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(195,178,255,.0) 40deg,rgba(195,178,255,.55) 80deg,rgba(138,92,255,0) 130deg,transparent 200deg,rgba(110,150,255,.35) 260deg,transparent 320deg);
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 65%,#000 66%,transparent 67%);mask:radial-gradient(circle,transparent 64%,#000 65%,#000 66%,transparent 67%)}
.crew.is-live .crew__ring{animation:crewSpin 14s linear infinite}
@keyframes crewSpin{to{transform:rotate(360deg)}}
.crew__pic{position:absolute;inset:0;z-index:1;margin:0;border-radius:34px;overflow:hidden;background:#0d0a12;box-shadow:0 60px 120px -60px rgba(0,0,0,.9);
  clip-path:inset(100% 0 0 0 round 34px);transition:clip-path 1.05s cubic-bezier(.77,0,.18,1);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.crew__pic.is-on{z-index:3;clip-path:inset(0 0 0 0 round 34px)}
.crew__pic.is-prev{z-index:2;clip-path:inset(0 0 0 0 round 34px);transition:none}
.crew__pics.is-back .crew__pic{clip-path:inset(0 0 100% 0 round 34px)}
.crew__pics.is-back .crew__pic.is-on,.crew__pics.is-back .crew__pic.is-prev{clip-path:inset(0 0 0 0 round 34px)}
.crew__zoom{position:absolute;inset:0;display:block;transform:scale(1.22);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.crew__pic.is-on .crew__zoom,.crew__pic.is-prev .crew__zoom{transform:none}
.crew__zoom img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.07)}
.crew__pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);pointer-events:none}
.crew__glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.16),transparent 48%)}
.crew__pics:hover .crew__glare{opacity:1}
.crew__pic--mono .crew__zoom{display:grid;place-items:center;background:radial-gradient(70% 55% at 50% 38%,rgba(138,92,255,.34),transparent 70%),linear-gradient(180deg,#16111f,#08060c)}
.crew__mono{font-size:clamp(110px,13vw,240px);font-weight:620;letter-spacing:-.06em;color:#d9cfff;text-shadow:0 0 60px rgba(138,92,255,.35)}

/* Text */
.crew__text{order:1;display:grid;gap:clamp(18px,3vh,30px);position:relative;z-index:2}
.crew__count{font-size:15px;font-weight:600;letter-spacing:.02em;color:rgba(245,245,247,.45);font-variant-numeric:tabular-nums;display:flex;gap:2px}
.crew__count b{color:#c9b8ff;font-weight:650;display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.crew__count b.is-flip{transform:translate3d(0,-60%,0);opacity:0;transition:none}
.crew__names{display:grid;margin:0;padding:0;list-style:none}
.crew__name{grid-area:1/1;pointer-events:none;visibility:hidden;transition:visibility 0s linear .9s}
.crew__name.is-on{visibility:visible;pointer-events:auto;transition:none}
.crew__name h3{margin:0;font-size:clamp(58px,7.2vw,136px);font-weight:650;line-height:.98;letter-spacing:-.045em;color:#f5f5f7}
.crew__line{display:block;overflow:hidden;padding:.04em 0 .1em;margin:-.04em 0 -.1em}
.crew__line + .crew__line{color:rgba(245,245,247,.42)}
.crew__line .ch{display:inline-block;transform:translate3d(0,112%,0);transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--c,0) * 24ms + var(--r,0) * 90ms)}
.crew__name.is-on .ch{transform:none}
.crew__name.is-past .ch{transform:translate3d(0,-112%,0);transition-duration:.6s;transition-delay:calc(var(--c,0) * 12ms)}
.crew__name p{margin-top:clamp(14px,2.2vh,24px);font-size:clamp(18px,1.6vw,26px);font-weight:600;letter-spacing:-.012em;color:#c9b8ff;
  opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.crew__name.is-on p{opacity:1;transform:none;transition-delay:.35s}
.crew__bars{display:flex;gap:8px}
.crew__bars i{position:relative;width:56px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.crew__bars b{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e4dcff,#8a5cff);transform-origin:left;transform:scaleX(0)}   /* tc.js setzt transform direkt (keine Variable → keine Stil-Neuberechnung im ganzen Bereich) */

@media (max-width:860px){
  .crew__intro{padding-top:clamp(100px,14vh,140px)}
  .crew__track{height:calc(var(--n,4) * 88svh + 12svh)}
  .crew__stage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:22px;padding-top:72px}
  .crew__pics{order:0;justify-self:center;height:54svh}
  .crew__pic{border-radius:26px}
  .crew__ghost{font-size:46vw;top:-18svh;position:relative}
  .crew__text{gap:14px}
  .crew__name h3{font-size:clamp(42px,12.5vw,60px)}
  .crew__name p{font-size:17px;margin-top:10px}
  .crew__bars i{width:40px}
}
@media (prefers-reduced-motion:reduce){
  .crew__track{height:auto}
  .crew__stage{position:static;height:auto;display:block}
  .crew__ghosts,.crew__ring{display:none}
  .crew__pics,.crew__names{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;height:auto;aspect-ratio:auto;width:100%}
  .crew__pic,.crew__name{position:relative;grid-area:auto;clip-path:none;visibility:visible;aspect-ratio:3/4;transform:none}
  .crew__pic .crew__zoom{transform:none}
  .crew__name{aspect-ratio:auto}.crew__name h3{font-size:22px}.crew__line .ch,.crew__name p{transform:none;opacity:1}
  .crew__count,.crew__bars{display:none}
}

/* V23 Visitenkarte auf der Rückseite der Porträts (David 14.10.) – Drehung nur per transform */
.crew__flip{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:perspective(1800px) rotateY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.crew__pic.is-flipped .crew__flip{transform:perspective(1800px) rotateY(180deg)}
.crew__front,.crew__card{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.crew__front{cursor:pointer}
.crew__card{transform:rotateY(180deg);display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px);padding:clamp(22px,3.2vh,40px) clamp(20px,2.4vw,38px);
  background:radial-gradient(90% 60% at 100% 0%,rgba(138,92,255,.28),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(90,120,255,.14),transparent 60%),linear-gradient(160deg,#17121f,#0a080e);
  color:#f5f5f7;cursor:default;text-align:left}
.crew__card::before{content:"";position:absolute;inset:10px;border-radius:26px;border:1px solid rgba(201,184,255,.18);pointer-events:none}
.crew__cardtop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:auto}
.crew__logo{width:clamp(96px,9vw,140px);height:auto;opacity:.95}
.crew__face{flex:none;width:clamp(74px,8vw,112px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(201,184,255,.55);background:#140f1c;display:grid;place-items:center}
.crew__face img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}   /* V26 (David 16.10.: Avatar wirkte albern): Kopf und Schultern statt angeschnittener Grossaufnahme */
.crew__face span{font-size:clamp(26px,2.6vw,40px);font-weight:650;letter-spacing:-.04em;color:#d9cfff}
.crew__cname{font-size:clamp(28px,2.7vw,44px);font-weight:650;letter-spacing:-.035em;line-height:1.02;color:rgba(245,245,247,.5)}
.crew__cname b{display:block;color:#f5f5f7;font-weight:650}
.crew__crole{font-size:clamp(15px,1.15vw,18px);font-weight:600;color:#c9b8ff;margin-top:-4px}
.crew__clines{display:grid;gap:10px;margin-top:6px;padding-top:clamp(12px,2vh,20px);border-top:1px solid rgba(255,255,255,.1)}
.crew__clines a,.crew__clines span{display:flex;align-items:center;gap:12px;font-size:clamp(14px,1.05vw,17px);color:#e9e6f2;text-decoration:none;word-break:break-all}
.crew__clines span{color:rgba(233,230,242,.6);font-size:clamp(12px,.9vw,14px);word-break:normal}
.crew__clines i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;background:rgba(138,92,255,.22);color:#e4dcff}
.crew__clines a:hover{color:#fff}
.crew__clines a:hover i{background:rgba(138,92,255,.45)}
.crew__cact{display:flex;align-items:center;gap:10px;margin-top:clamp(6px,1.4vh,14px)}
.crew__save{flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:999px;background:#f5f5f7;color:#0b0b10;font-size:14px;font-weight:650;text-decoration:none}
.crew__save:hover{background:#fff}
.crew__back{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#f5f5f7;font-size:18px;cursor:pointer}
.crew__card a:focus-visible,.crew__card button:focus-visible,.crew__vk:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.crew__vk{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(14px,2vh,22px);padding:10px 18px;border-radius:999px;border:1px solid rgba(201,184,255,.35);
  color:#efe9ff;font-size:15px;font-weight:600;text-decoration:none;background:rgba(138,92,255,.12);transition:background .25s ease,border-color .25s ease}
.crew__vk:hover{background:rgba(138,92,255,.26);border-color:rgba(201,184,255,.6)}
.crew__vk i{font-style:normal;font-size:16px}
.crew__name .crew__vk{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),background .25s ease}
.crew__name.is-on .crew__vk{opacity:1;transform:none;transition-delay:.5s,.5s,0s}
@media (max-width:860px){
  .crew__card{padding:20px 18px;gap:8px}
  .crew__card::before{inset:7px;border-radius:20px}
  .crew__cname{font-size:26px}
  .crew__crole{font-size:14px}
  .crew__clines{gap:7px}
  .crew__clines a{font-size:13.5px}
  .crew__clines span{display:none}
  .crew__save,.crew__back{height:40px}
  .crew__back{width:40px}
  .crew__vk{margin-top:10px;padding:9px 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.crew__flip{transition:none}.crew__name .crew__vk{opacity:1;transform:none}}

/* PCFOX V21 – Finale (David 12.10.): Titel in hellem, transparentem Lila · Kinomodus-Knopf · ruhigeres Text-Timing im Kinomodus.
   Wird auf allen Seiten zuletzt geladen. Nur transform/opacity animiert, keine Unschärfe-, Schatten- oder backdrop-Effekte (Leistung, V19-Regel). */
:root{--v21-title:rgba(228,217,255,.97);--v21-title2:rgba(196,174,255,.56);--v21-line:rgba(201,184,255,.55)}

/* Titel: erste Zeile helles Lila, zweite Zeile transparentes Lila (gleiche Transparenz wie bisher das Grau) */
.reel .beat h2,.reel .beat:not(.beat--hero) h2,.reel.is-film h2.say,main h1,main h2,.topic__head h2{color:var(--v21-title)}
.reel .beat:not(.beat--hero) h2 > span:not(.w),main h1 span:not(.w):not(.wi),main h2 span:not(.w):not(.wi){color:var(--v21-title2)}
.reel .beat h2 .w,.reel .beat h2 .wi{color:inherit}
/* ältere Regeln mit eigener Titelfarbe (Unterseiten, Web-Kapitel, Rechtsseiten-Titel, Film-Zeilen, Kontakt, Team) – gleich stark überschreiben */
.page-hero h1,.web__head h1,.page h1,.legal-page h1,.contact2.tc .contact2__head h2,.contact2.tc .contact2__head h1,.crew h2,
.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{color:var(--v21-title)}
.page-hero h1 span,.web__head h1 span,.page h1 span,.legal-page h1 span,.beat h2 span:not(.w):not(.wi),.chap--v11 h2 span:not(.w):not(.wi),
.contact2.tc .contact2__head h2 > span:not(.w),.contact2.tc .contact2__head h1 > span:not(.w){color:var(--v21-title2)}

/* Kinomodus-Knopf: unten rechts, ruhig; feine Linie füllt sich über die Lesezeit */
.reel__auto{position:fixed;z-index:8;right:clamp(16px,2.4vw,36px);bottom:clamp(18px,3.2vh,34px);display:flex;align-items:center;gap:10px;
  height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(201,184,255,.22);background:rgba(10,10,16,.58);color:rgba(245,245,247,.88);
  font:600 12px/1 inherit;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;overflow:hidden;
  opacity:0;visibility:hidden;transform:translate3d(0,8px,0);pointer-events:none;
  transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),border-color .3s ease,visibility 0s linear .7s}
.reel__auto.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .6s ease .2s,transform .8s cubic-bezier(.16,1,.3,1) .2s,border-color .3s ease,visibility 0s}
.reel__auto:hover{border-color:rgba(201,184,255,.5)}
.reel__auto:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.reel__auto i{position:relative;width:18px;height:18px;border-radius:50%;background:rgba(138,92,255,.3);flex:none}
.reel__auto i::before,.reel__auto i::after{content:"";position:absolute;top:5px;width:2px;height:8px;border-radius:1px;background:#e4dcff}
.reel__auto i::before{left:6px} .reel__auto i::after{left:10px}
.reel__auto[data-state="paused"] i::before,.reel__auto[data-state="end"] i::before{left:7px;top:5px;width:0;height:0;border-radius:0;background:none;
  border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #e4dcff}
.reel__auto[data-state="paused"] i::after,.reel__auto[data-state="end"] i::after{display:none}
.reel__auto b{position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:rgba(255,255,255,.08);overflow:hidden}
.reel__auto s{display:block;height:100%;background:var(--v21-line);transform:scaleX(0);transform-origin:0 50%}
/* im Kinomodus übernimmt der Film den Weg – der «Weiter»-Hinweis wird nicht gebraucht */
.reel.is-auto .reel__next{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Kinomodus: Text erscheint nach der Fahrt – ruhiger, edler Ablauf (Bereichsname → Titel Wort für Wort aus der Maske → Absatz) */
.reel.is-auto.is-film .beat.is-on .wi{transition:opacity .7s ease,transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 55ms + 80ms)}
.reel.is-auto.is-film .beat.is-on .w--eb .wi{transition-delay:calc(var(--i) * 35ms)}
.reel.is-auto.is-film .beat.is-on .w--l .wi{transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 12ms + 520ms)}
.reel.is-auto.is-film .beat.is-on .lede.t-block{transition:opacity .9s ease .5s,transform 1.1s cubic-bezier(.16,1,.3,1) .5s}

@media (max-width:860px){
  /* Handy: runder Knopf ohne Text rechts auf Höhe der Kapitel-Striche (Lücke zwischen Bild und Text) – unten lag er über der «Weiterlesen»-Karte */
  .reel__auto{right:16px;bottom:auto;top:calc(62svh - 66px);width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}
  .reel__auto span,.reel__auto b{display:none}
}
@media (prefers-reduced-motion:reduce){.reel__auto{display:none}}

/* Lesbarkeit über hellen Szenen (Werkstatt, heller Raum): weiche Kino-Vignette unten links hinter dem Text – fest, nicht animiert */
@media (min-width:861px){
  .reel__veil::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(115% 95% at 0% 100%,rgba(5,5,7,.68) 0%,rgba(5,5,7,.46) 30%,rgba(5,5,7,.16) 54%,rgba(5,5,7,0) 72%)}
}

/* Kinomodus: der Film läuft von selbst – kein «Scrollen»-Hinweis */
.reel.is-auto .hero__hint{opacity:0!important;visibility:hidden}

/* V23 (David 14.10.: «Titel besser lesbar»): Abdunklung hinter dem Textblock je Szene (reel.js setzt die Deckkraft aus STORY.scrim, gemessen an der
   Helligkeit dort). Fest, nur die Deckkraft blendet beim Szenenwechsel über – keine Unschärfe, kein Schatten. Handy: Text steht unter dem Bild. */
.reel__scrim{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(78% 92% at 10% 68%,rgba(5,5,7,.74) 0%,rgba(5,5,7,.58) 36%,rgba(5,5,7,.26) 60%,rgba(5,5,7,0) 80%)}
@media (max-width:860px){.reel__scrim{display:none}}

/* PCFOX V24 (David 15.10.: «Transition bei allen anders, auch auf dem Handy – Text mehr im Bildschirm, Beispiel apple.com/iphone-duo»).
   Wird auf allen Seiten zuletzt geladen und betrifft nur den Film (.reel).
   · V24b (David: «Transition wie vorher»): die Übergänge sind wieder die aus V23 (Lichtschnitt, Titel Wort für Wort) – hier nur das Layout.
   · V24i (David: «wegen Mobile nochmals anders, so gefällt es mir nicht»): Handy hoch ohne Karte – der Film füllt den Bildschirm randlos
     von oben (auch hinter der Navigation) und läuft unten weich ins Schwarz aus; der Text beginnt im abgedunkelten unteren Teil des Bildes
     (wie ein Filmplakat). Apple-Grössen (Bereichsname 17 px, Titel bis 40 px, Absatz 19 px, 24 px Rand) und die kompakte
     «Weiterlesen»-Zeile bleiben.
   Nur transform/opacity werden animiert; keine Unschärfe, keine Schatten. */

/* Sprung über viele Kapitel (Navigation): Texte, Karten und Einblendungen der überflogenen Abschnitte bleiben unsichtbar (reel.js setzt
   .is-jump über 8 Abschnitte/s) – am Ziel steigen sie wie gewohnt auf */
.reel.is-film.is-jump .beat,.reel.is-film.is-jump .readon,.reel.is-film.is-jump .panel,.reel.is-film.is-jump .feeds,.reel.is-film.is-jump .hud,
.reel.is-film.is-jump .topo2,.reel.is-film.is-jump .m365b,.reel.is-film.is-jump .win{opacity:0!important;transition:none!important}

@media (max-width:860px) and (orientation:portrait){
  /* --cH = Bildhöhe: höchstens 74 % des Fensters und nie schmaler als 1 : 1,42 (das Hochformat-Bild 4:5 verliert seitlich höchstens
     ~12 %). --tT = Oberkante des Textes: im unteren Viertel des Bildes; auf hohen Handys tiefer, damit unten kein leeres Schwarz bleibt. */
  .reel{--cH:min(74svh,142vw);--tT:max(calc(var(--cH) * .74),calc(100svh - 340px - env(safe-area-inset-bottom)))}
  .reel__stage canvas{left:0;top:0;right:0;bottom:auto;width:100%;height:var(--cH);border-radius:0;
    -webkit-mask-image:linear-gradient(#000 52%,rgba(0,0,0,.62) 78%,transparent);mask-image:linear-gradient(#000 52%,rgba(0,0,0,.62) 78%,transparent)}
  /* Schleier: oben leicht (Navigation), die obere Bildhälfte frei, hinter dem Titel dunkel – das Bild bleibt dort noch zu ahnen */
  .reel__veil{background:linear-gradient(180deg,rgba(5,5,7,.5) 0,rgba(5,5,7,0) 96px,rgba(5,5,7,0) calc(var(--cH) * .5),
    rgba(5,5,7,.58) var(--tT),rgba(5,5,7,.84) calc(var(--tT) + 96px),#050507 calc(var(--cH) + 24px))}

  /* Text im unteren Teil des Bildes, in jedem Abschnitt auf derselben Höhe; Kapitel-Striche darüber */
  .reel.is-film .beat:not(.beat--hero),.reel.is-film[data-card="1"] .beat:not(.beat--hero){left:24px;right:24px;top:var(--tT);bottom:auto;width:auto;max-height:none}
  .reel.is-film .reel__mdots{left:24px;top:calc(var(--tT) - 18px)}
  .reel__auto{top:calc(var(--tT) - 54px);right:16px}

  /* Typografie wie apple.com auf dem Handy */
  .reel .beat:not(.beat--hero) .eyebrow{font-size:17px;margin-bottom:8px}
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{font-size:clamp(33px,9.4vw,40px);line-height:1.04;letter-spacing:-.028em}
  .reel .beat .lede{margin-top:14px;font-size:19px;line-height:1.42}
  .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(28px,8vw,34px)}
  .reel .t-say .lede,.reel .t-line .lede,.reel .t-swap .lede{font-size:19px}
  .reel .p321{margin-top:16px;gap:8px}.reel .p321 div{padding:10px 12px;border-radius:14px}.reel .p321 b{font-size:28px}

  /* Begrüssung: «PCFOX GmbH» in einer Zeile über dem unteren Bildrand (wie die Produkttitel bei Apple), beide Knöpfe nebeneinander */
  .reel .beat--hero{left:0;right:0;justify-content:flex-start;padding:calc(var(--tT) + 4px) 24px 0}
  .reel .beat--hero .hero__title{margin-top:12px;font-size:clamp(46px,13.6vw,58px)}
  .reel .beat--hero .hero__title .w{display:inline-block}
  .reel .beat--hero .hero__title .w--thin{margin-left:.2em}
  .reel .hero__foot{align-self:stretch;flex-wrap:nowrap;gap:10px;margin-top:22px}
  .reel .hero__foot .btn{flex:1 1 0;min-width:0;height:50px;padding:0 12px}
  .reel .hero__hint{display:none}

  /* Einblendungen (Listen, Kamerabilder, Pläne) oben unter der Navigation; reel.js verkleinert eine zu hohe über --fit, damit sie über dem
     Text endet (statt abgeschnitten zu werden) */
  .reel.is-film .panel,.reel.is-film .panel--m365,.reel.is-film .panel--topo,.reel.is-film .panel--veeam,.reel.is-film .panel--kplan,.reel.is-film .feeds,
  .reel.is-film .hud,.reel.is-film .hud--sky,.reel.is-film .topo2,.reel.is-film .m365b{left:16px;right:16px;top:calc(env(safe-area-inset-top) + 76px);
    max-height:none;transform-origin:50% 0;scale:var(--fit,1)}
  .reel.is-film .panel--veeam .jobs li{grid-template-columns:1fr 44px auto;gap:10px}   /* Namen in einer Zeile statt «Server-/VMs» */
  .reel.is-film .hud li{padding:5px 0}.reel.is-film .hud__ico{width:28px;height:28px}   /* 360°-Liste: sechs Zeilen kompakter */

  /* «Weiterlesen» als kompakte Zeile unten (Nummer · Thema · Pfeil): lässt dem Text darüber Platz */
  .reel.is-film .readon,.reel.is-film .readon--slim{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));grid-template-columns:auto 1fr auto;align-items:center;gap:0 14px;padding:12px 12px 12px 18px;border-radius:22px}
  .reel.is-film .readon__go{grid-column:auto;margin:0;padding:0;border-top:0}
  .reel.is-film .readon__go b{display:none}
  .reel.is-film .readon__go i{width:40px;height:40px}
}

/* Tablet hoch (iPad): Text und Knöpfe nicht über die ganze Breite (Zeilen ≤ 620 px), Schrift eine Stufe grösser */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .reel.is-film .beat:not(.beat--hero),.reel.is-film[data-card="1"] .beat:not(.beat--hero){right:auto;width:min(620px,calc(100% - 48px))}
  .reel .beat:not(.beat--hero) .eyebrow{font-size:19px}
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{font-size:clamp(40px,5.4vw,46px)}
  .reel .beat .lede,.reel .t-say .lede,.reel .t-line .lede,.reel .t-swap .lede{font-size:21px}
  .reel .beat--hero .hero__title{font-size:clamp(58px,9vw,76px)}
  .reel .hero__foot{max-width:460px}
  .reel.is-film .readon,.reel.is-film .readon--slim{right:auto;width:min(520px,calc(100% - 32px))}
}

/* Kurze Handys (Safari mit Leisten, ~660 px): Schrift eine Stufe ruhiger, damit lange Absätze über «Weiterlesen» bleiben */
@media (max-width:860px) and (orientation:portrait) and (max-height:700px){
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{font-size:clamp(32px,9vw,36px)}
  .reel .beat .lede{margin-top:12px;font-size:18px;line-height:1.4}
  .reel .t-say .lede,.reel .t-line .lede,.reel .t-swap .lede{font-size:18px}
}
/* Sehr kurze Handys (iPhone SE mit Leisten, ~550 px) */
@media (max-width:860px) and (orientation:portrait) and (max-height:620px){
  .reel .beat:not(.beat--hero) .eyebrow{font-size:15px;margin-bottom:6px}
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{font-size:clamp(28px,8.4vw,32px)}
  .reel .beat .lede{font-size:16px;line-height:1.4}
  .reel .t-say .lede,.reel .t-line .lede,.reel .t-swap .lede{font-size:16px}
  .reel .beat--hero .hero__title{margin-top:8px;font-size:clamp(40px,12vw,46px)}
  .reel .hero__foot{margin-top:14px}.reel .hero__foot .btn{height:44px}
  .reel .p321{margin-top:10px}.reel .p321 div{padding:8px 10px}.reel .p321 b{font-size:22px}.reel .p321 span{font-size:12px;line-height:1.25}
  .reel.is-film .readon,.reel.is-film .readon--slim{padding:10px 10px 10px 16px}
  .reel.is-film .readon__body small{display:none}
  .reel.is-film .readon__go i{width:36px;height:36px}
}

/* ═══ V27 (David 17.10.: «iPhone/Android mies – alles mehr rausgezoomt, Position genau, grosser Umbau»): schmales Handy hoch (≤ 480 px).
   Der Film ist nicht mehr ein enger 4:5-Ausschnitt hinter der Navigation, sondern der breite Ausschnitt (Bildstufe w, 1215 : 1080 = 63 % der
   Szenenbreite) in voller Breite direkt UNTER der Navigation; der Text beginnt unmittelbar unter dem Bild (nicht mehr darüber). Tablets
   (> 480 px) behalten die V24i-Anordnung. reel.js zeichnet dafür die Stufe w (tierW) und kann je Szene heranfahren (STORY.phone). ═══ */
@media (max-width:480px) and (orientation:portrait){
  .reel{--fH:calc(100vw / 1.125);--cH:calc(72px + var(--fH));--tT:calc(72px + var(--fH) + 14px)}
  /* V28 (David 18.10.: «für iPhone transparenter und erweiterter Hintergrund, Text besser ersichtlich, keine Tabs/Tabelle»): die Bühne reicht bis
     unten – reel.js zeichnet unter dem scharfen Bild (--fH) eine unscharfe, abgedunkelte Fortsetzung; der Text liegt auf einem Schleier darüber */
  .reel__stage canvas{top:72px;height:var(--fH);-webkit-mask-image:none;mask-image:none;z-index:1}
  /* V28e: Ambient-Ebene (96 px breit, vom Browser weichgezeichnet) hinter dem scharfen Bild über die ganze Bühne – stabil, kein Flackern */
  .reel__stage canvas.reel__ambient{top:72px;height:calc(100svh - 72px);width:100%;z-index:0;filter:blur(5px) brightness(.5) saturate(1.1);
    transform:scale(1.08);transform-origin:50% 50%;image-rendering:auto;pointer-events:none}
  .reel__veil{background:linear-gradient(180deg,rgba(5,5,7,.45) 0,rgba(5,5,7,0) 72px,rgba(5,5,7,0) calc(var(--cH) - 28px),rgba(5,5,7,.5) var(--cH),
    rgba(5,5,7,.72) calc(var(--cH) + 70px),rgba(5,5,7,.8) 100%)}
  .reel.is-film .topo2,.reel.is-film .hud:not(.hud--inline),.reel.is-film .m365b,.reel.is-film .spmap{display:none!important}
  /* Listen im Text («Womit wir Räume ausstatten», «3 · 2 · 1») nicht als Tabelle, sondern als eine Zeile mit Chips */
  .reel.is-film .t-spec ol,.reel.is-film .t-spec--row ol{display:flex;flex-wrap:wrap;gap:8px}
  .reel.is-film .t-spec li,.reel.is-film .t-spec--row li{display:block;padding:7px 12px;border:1px solid rgba(255,255,255,.16)!important;border-radius:99px;background:rgba(12,12,18,.55);transform:none}
  .reel.is-film .t-spec li i,.reel.is-film .t-spec li span{display:none}
  .reel.is-film .t-spec li b{font-size:14.5px;font-weight:600}
  .reel.is-film .p321{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .reel.is-film .p321 > div{display:flex;align-items:baseline;gap:6px;padding:7px 12px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(12,12,18,.55)}
  .reel.is-film .p321 b{font-size:17px}.reel.is-film .p321 span{font-size:13.5px;color:rgba(245,245,247,.78)}
  .reel .beat:not(.beat--hero) .eyebrow{font-size:15px;margin-bottom:6px}
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{font-size:clamp(28px,8vw,34px)}
  .reel .beat .lede{margin-top:10px;font-size:17px;line-height:1.4}
  .reel .beat--hero .hero__title{font-size:clamp(40px,12vw,50px)}
  .reel .hero__foot{margin-top:16px}
  .reel.is-film .reel__mdots{top:calc(var(--tT) - 12px)}
}
/* Hohe Handys (iPhone 14/15: 844–932 px): Bild ~12 % höher (leichter seitlicher Beschnitt), Text etwas tiefer – kein leeres Schwarz unter dem Text */
@media (max-width:480px) and (orientation:portrait) and (min-height:800px){
  .reel{--fH:calc(100vw / 1.125 * 1.14);--tT:calc(72px + var(--fH) + 26px)}
}
@media (max-width:480px) and (orientation:portrait) and (max-height:700px){
  .reel{--fH:calc(100vw / 1.125 * .82)}
  .reel .beat:not(.beat--hero) h2,.reel .beat--desk h2,.reel .beat--compact h2{font-size:clamp(24px,7vw,28px)}
  .reel .beat .lede{font-size:15px;margin-top:8px}
  .reel .beat--hero .hero__title{font-size:clamp(34px,10vw,42px)}
}