/* =========================================================================
   szenen.css — Motion Graphics der Sprechfolien.

   Regeln, die für alle Szenen gelten:
   · Ein Teil ist unsichtbar (data-an="nein"), bis sein Wort gesprochen wird.
   · Der Eintritt ist kurz und gerichtet (ease-enter), nie federnd.
   · Rot bleibt das Signal für Angriff, Fehler und das Aktuelle. Grün nur
     für „richtig / erlaubt".
   · Endlosbewegungen (Pakete, Radar, Cursor) halten mit dem Ton an.
   ========================================================================= */

.szene {
  --sz-ink: var(--fg-strong);
  --sz-leise: var(--fg-muted);
  --sz-flaeche: var(--bg-canvas);
  --sz-senke: var(--bg-sunken);
  --sz-linie: var(--line-default);
  --sz-rot: var(--brand);
  --sz-gut: var(--ok);
  --sz-rein: 520ms;
  position: relative; inline-size: 100%; block-size: 100%; min-block-size: 0;
  display: grid; place-items: center; container-type: size;
  font-family: var(--font-ui); color: var(--sz-ink);
}
.szene svg { display: block; }
.szene b, .szene strong { color: inherit; }
.folie[data-pause="ja"] .szene *, .folie[data-pause="ja"] .szene *::before, .folie[data-pause="ja"] .szene *::after { animation-play-state: paused !important; }

/* Gemeinsame Eintritte */
.szene [data-an] { transition: opacity var(--sz-rein) var(--ease-enter), transform var(--sz-rein) var(--ease-enter), background var(--mo-normal) var(--ease-move), color var(--mo-normal) var(--ease-move), border-color var(--mo-normal) var(--ease-move), box-shadow var(--mo-normal) var(--ease-move); }

/* Stempel gut / schlecht / warn */
.sz-stempel { position: absolute; inset-block-start: -.55rem; inset-inline-end: -.55rem; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; transform: scale(0) rotate(-30deg); opacity: 0;
  transition: transform 420ms cubic-bezier(.3, 1.6, .5, 1) 260ms, opacity 200ms linear 260ms; box-shadow: 0 0 0 3px var(--sz-flaeche); }
.sz-stempel svg { inline-size: 1rem; block-size: 1rem; stroke-width: 2.6; }
.sz-stempel--gut { background: var(--sz-gut); }
.sz-stempel--schlecht { background: var(--sz-rot); }
.sz-stempel--warn { background: var(--warn); }
[data-an="ja"] > .sz-stempel { transform: none; opacity: 1; }

.sz-hinweis { position: absolute; inset-inline: 8% 8%; inset-block-end: 6%; z-index: 3; padding: .7rem 1rem; border-radius: var(--r-md);
  background: var(--bg-inverse); color: #fff; font: var(--fw-bold) clamp(.8rem, 2.6cqi, 1rem)/1.3 var(--font-ui); text-align: center;
  box-shadow: var(--sh-3); opacity: 0; transform: translateY(12px); }
.sz-hinweis[data-an="ja"] { opacity: 1; transform: none; }
.sz-hinweis::before { content: ""; position: absolute; inset-block-start: -6px; inset-inline-start: 50%; inline-size: 12px; block-size: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }

/* Fensterrahmen für Browser, Mail, Chat, WLAN, Datei, Login */
.sz-fenster { position: relative; inline-size: min(100%, 34rem); border-radius: var(--r-lg); background: var(--sz-flaeche);
  box-shadow: 0 1px 0 var(--sz-linie), 0 18px 50px rgba(22, 24, 27, .14); border: 1px solid var(--sz-linie); overflow: visible; }
.sz-fenster__leiste { display: flex; align-items: center; gap: .35rem; padding: .6rem .8rem; border-block-end: 1px solid var(--sz-linie);
  background: var(--sz-senke); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sz-fenster__leiste > i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--line-strong); }
.sz-fenster__leiste > i:first-child { background: var(--c-rot-300); }
.sz-fenster__titel { margin-inline-start: .5rem; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-subtle); }

/* ============================================================ Knoten --- */
.sz-knoten { position: relative; inline-size: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: start; gap: .25rem; padding-block: 1rem; }
.sz-knoten[data-layout="spalte"] { grid-template-columns: 1fr; gap: .9rem; max-inline-size: 22rem; }
.sz-knoten__st { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; opacity: 0; transform: translateY(14px) scale(.9); }
.sz-knoten__st[data-an="ja"] { opacity: 1; transform: none; }
.sz-knoten__kreis { position: relative; z-index: 1; display: grid; place-items: center; inline-size: clamp(3rem, 13cqi, 4.6rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--sz-flaeche); border: 2px solid var(--sz-linie); color: var(--sz-ink); transition: inherit; box-shadow: var(--sh-2); }
.sz-knoten__kreis svg { inline-size: 48%; block-size: 48%; }
.sz-knoten__st[data-aktuell="ja"] .sz-knoten__kreis { border-color: var(--sz-rot); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sz-rot) 16%, transparent), var(--sh-3); color: var(--sz-rot); }
.sz-knoten__label { font: var(--fw-bold) clamp(.72rem, 2.3cqi, .95rem)/1.2 var(--font-ui); color: var(--sz-ink); text-wrap: balance; }
.sz-knoten__unter { font: var(--fw-medium) clamp(.65rem, 1.9cqi, .8rem)/1.25 var(--font-ui); color: var(--sz-leise); text-wrap: balance; }
.sz-knoten__linie { position: absolute; z-index: 0; inset-block-start: calc(clamp(3rem, 13cqi, 4.6rem) / 2); inset-inline-end: 50%; inline-size: 100%; block-size: 2px;
  background: var(--sz-linie); transform-origin: 100% 50%; overflow: visible; }
.sz-knoten__st:first-child .sz-knoten__linie { display: none; }
.sz-knoten__linie > i { position: absolute; inset-block-start: -3px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sz-rot); opacity: 0; }
.sz-knoten__st[data-an="ja"] .sz-knoten__linie > i { animation: sz-paket 2.4s linear infinite; }
.sz-knoten__st[data-an="ja"] .sz-knoten__linie > i:nth-child(2) { animation-delay: .8s; }
.sz-knoten__st[data-an="ja"] .sz-knoten__linie > i:nth-child(3) { animation-delay: 1.6s; }
@keyframes sz-paket { 0% { inset-inline-start: 0; opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { inset-inline-start: calc(100% - 8px); opacity: 0; } }
.sz-knoten[data-layout="spalte"] .sz-knoten__st { flex-direction: row; text-align: start; gap: .9rem; }
.sz-knoten[data-layout="spalte"] .sz-knoten__st > span:not(.sz-knoten__kreis):not(.sz-knoten__linie) { flex: 1; }
.sz-knoten[data-layout="spalte"] .sz-knoten__linie { inset-inline-start: calc(clamp(3rem, 13cqi, 4.6rem) / 2 - 1px); inset-block-start: auto; inset-block-end: 50%; inline-size: 2px; block-size: 140%; }
.sz-knoten[data-layout="spalte"] .sz-knoten__linie > i { display: none; }
.sz-knoten[data-layout="spalte"] .sz-knoten__label { font-size: clamp(.85rem, 2.8cqi, 1.05rem); }
.sz-knoten[data-layout="spalte"] .sz-knoten__st > .sz-knoten__label, .sz-knoten[data-layout="spalte"] .sz-knoten__st > .sz-knoten__unter { display: block; }
.sz-knoten[data-layout="spalte"] .sz-knoten__st { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; row-gap: .1rem; align-items: center; }
.sz-knoten[data-layout="spalte"] .sz-knoten__kreis { grid-row: 1 / span 2; inline-size: clamp(2.6rem, 10cqi, 3.4rem); }
.sz-knoten[data-layout="spalte"] .sz-knoten__label { align-self: end; }
.sz-knoten[data-layout="spalte"] .sz-knoten__unter { align-self: start; }
.sz-knoten[data-layout="spalte"] .sz-knoten__label:last-child { grid-row: 1 / span 2; align-self: center; }
/* Status: Angriff färbt die Station rot und rüttelt sie kurz */
.sz-knoten__wechsel { display: none; }
.sz-knoten__st[data-status="angriff"] .sz-knoten__kreis, .sz-knoten__st:has(> .sz-knoten__wechsel[data-an="ja"][data-status="angriff"]) .sz-knoten__kreis {
  background: var(--sz-rot); border-color: var(--sz-rot); color: #fff; animation: sz-ruetteln 460ms var(--ease-move) 1; }
.sz-knoten__st:has(> .sz-knoten__wechsel[data-an="ja"][data-status="angriff"]) .sz-knoten__label { color: var(--brand-fg); }
.sz-knoten__st[data-status="gut"] .sz-knoten__kreis, .sz-knoten__st:has(> .sz-knoten__wechsel[data-an="ja"][data-status="gut"]) .sz-knoten__kreis { border-color: var(--sz-gut); color: var(--sz-gut); }
.sz-knoten__st:has(> .sz-knoten__wechsel[data-an="ja"][data-status="aus"]) .sz-knoten__kreis { opacity: .35; filter: grayscale(1); border-style: dashed; }
@keyframes sz-ruetteln { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ============================================================= Orbit --- */
.sz-orbit { position: relative; inline-size: min(100cqi, 100cqb, 30rem); aspect-ratio: 1; }
.sz-orbit__bahn { position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed var(--sz-linie); animation: sz-drehen 60s linear infinite; }
.sz-orbit__bahn--2 { inset: 30%; border-style: solid; border-color: var(--line-subtle); animation-duration: 90s; animation-direction: reverse; }
@keyframes sz-drehen { to { transform: rotate(360deg); } }
.sz-orbit__mitte { position: absolute; inset: 36%; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .25rem; text-align: center;
  background: var(--bg-inverse); color: #fff; box-shadow: var(--sh-3); transition: transform var(--sz-rein) var(--ease-enter), box-shadow var(--mo-slow); }
.sz-orbit__mitte span svg { inline-size: clamp(1.6rem, 7cqi, 2.4rem); block-size: auto; }
.sz-orbit__mitte b { font: var(--fw-bold) clamp(.6rem, 2cqi, .78rem)/1.15 var(--font-ui); letter-spacing: .02em; max-inline-size: 8em; }
.sz-orbit__mitte[data-an="voll"] { box-shadow: 0 0 0 10px color-mix(in srgb, var(--sz-rot) 14%, transparent), var(--sh-3); animation: sz-puls 2.6s ease-in-out infinite; }
@keyframes sz-puls { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--sz-rot) 6%, transparent), var(--sh-3); } }
.sz-orbit__trabant { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  opacity: 0; transform: scale(.4); }
.sz-orbit__trabant[data-an="ja"] { opacity: 1; transform: none; }
.sz-orbit__trabant span { display: grid; place-items: center; inline-size: clamp(2.5rem, 11cqi, 3.6rem); aspect-ratio: 1; border-radius: 50%; background: var(--sz-flaeche); border: 2px solid var(--sz-linie); box-shadow: var(--sh-2); transition: inherit; }
.sz-orbit__trabant span svg { inline-size: 50%; block-size: 50%; }
.sz-orbit__trabant b { font: var(--fw-bold) clamp(.6rem, 2cqi, .8rem)/1.15 var(--font-ui); text-align: center; max-inline-size: 9em; background: color-mix(in srgb, var(--sz-flaeche) 85%, transparent); border-radius: 6px; padding: .1rem .3rem; }
.sz-orbit__trabant[data-aktuell="ja"] span { border-color: var(--sz-rot); color: var(--sz-rot); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sz-rot) 15%, transparent); }
.sz-orbit__trabant[data-status="kritisch"] span { background: var(--bg-inverse); color: #fff; border-color: var(--bg-inverse); }
.sz-orbit__strahl { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 38%; block-size: 1.5px; transform-origin: 0 50%; rotate: var(--w);
  background: linear-gradient(90deg, transparent 30%, var(--sz-rot)); opacity: 0; scale: 0 1; transition: opacity 400ms, scale 600ms var(--ease-enter); }
.sz-orbit__strahl[data-an="ja"] { opacity: .5; scale: 1 1; }

/* =========================================================== Dreieck --- */
.sz-dreieck { position: relative; inline-size: min(100cqi, 120cqb, 32rem); aspect-ratio: 10 / 9; }
.sz-dreieck__linien { position: absolute; inset: 14% 16% 16%; inline-size: 68%; block-size: 70%; overflow: visible; }
.sz-dreieck__linien path { fill: color-mix(in srgb, var(--sz-rot) 5%, transparent); stroke: var(--sz-linie); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-move), stroke .4s; vector-effect: non-scaling-stroke; }
.sz-dreieck[data-stufe]:not([data-stufe="0"]) .sz-dreieck__linien path { stroke-dashoffset: 0; }
.sz-dreieck[data-stufe="3"] .sz-dreieck__linien path { stroke: var(--sz-rot); }
.sz-dreieck__mitte { position: absolute; inset-inline-start: 50%; inset-block-start: 57%; translate: -50% -50%; inline-size: 18%; color: var(--line-strong); transition: color .5s, transform .6s var(--ease-enter); }
.sz-dreieck[data-stufe="3"] .sz-dreieck__mitte { color: var(--sz-rot); transform: scale(1.12); }
.sz-dreieck__ecke { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; inline-size: 38%; opacity: .25; transform: scale(.92); }
.sz-dreieck__ecke--0 { inset-inline-start: 31%; inset-block-start: 0; }
.sz-dreieck__ecke--1 { inset-inline-end: -2%; inset-block-end: 0; }
.sz-dreieck__ecke--2 { inset-inline-start: -2%; inset-block-end: 0; }
.sz-dreieck__ecke[data-an="ja"] { opacity: 1; transform: none; }
.sz-dreieck__ecke > span { display: grid; place-items: center; inline-size: clamp(2.8rem, 12cqi, 4rem); aspect-ratio: 1; border-radius: 50%; background: var(--sz-flaeche); border: 2px solid var(--sz-linie); box-shadow: var(--sh-2); transition: inherit; }
.sz-dreieck__ecke > span svg { inline-size: 50%; block-size: 50%; }
.sz-dreieck__ecke[data-aktuell="ja"] > span { background: var(--sz-rot); border-color: var(--sz-rot); color: #fff; box-shadow: 0 0 0 7px color-mix(in srgb, var(--sz-rot) 16%, transparent); }
.sz-dreieck__ecke b { font: var(--fw-bold) clamp(.8rem, 2.8cqi, 1.1rem)/1.1 var(--font-display); letter-spacing: -.01em; }
.sz-dreieck__ecke small { font: var(--fw-medium) clamp(.62rem, 1.9cqi, .78rem)/1.25 var(--font-ui); color: var(--sz-leise); text-wrap: balance; }

/* ============================================================== Venn --- */
.sz-venn { position: relative; inline-size: min(100cqi, 110cqb, 30rem); aspect-ratio: 1 / .95; }
.sz-venn__kreis { position: absolute; inline-size: 58%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: 14%;
  text-align: center; border: 2px solid var(--sz-linie); background: color-mix(in srgb, var(--fg-strong) 4%, transparent); opacity: 0; transform: scale(.7); mix-blend-mode: multiply; }
:root[data-theme="dark"] .sz-venn__kreis { mix-blend-mode: screen; }
.sz-venn__kreis--0 { inset-inline-start: 0; inset-block-start: 0; }
.sz-venn__kreis--1 { inset-inline-end: 0; inset-block-start: 0; }
.sz-venn__kreis--2 { inset-inline-start: 21%; inset-block-end: 0; }
.sz-venn__kreis[data-an="ja"] { opacity: 1; transform: none; }
.sz-venn__kreis[data-aktuell="ja"] { border-color: var(--sz-rot); background: color-mix(in srgb, var(--sz-rot) 10%, transparent); }
.sz-venn__kreis--0 { justify-content: flex-start; padding-block-start: 22%; padding-inline-end: 30%; }
.sz-venn__kreis--1 { justify-content: flex-start; padding-block-start: 22%; padding-inline-start: 30%; }
.sz-venn__kreis--2 { justify-content: flex-end; padding-block-end: 20%; }
.sz-venn__kreis b { font: var(--fw-bold) clamp(.72rem, 2.5cqi, 1rem)/1.1 var(--font-display); }
.sz-venn__kreis small { font: var(--fw-medium) clamp(.58rem, 1.8cqi, .74rem)/1.25 var(--font-ui); color: var(--sz-leise); }
.sz-venn__mitte { position: absolute; inset-inline-start: 50%; inset-block-start: 52%; translate: -50% -50%; padding: .45rem .7rem; border-radius: var(--r-pill);
  background: var(--sz-rot); color: #fff; font: var(--fw-bold) clamp(.6rem, 2cqi, .8rem)/1 var(--font-ui); white-space: nowrap; opacity: 0; transform: scale(.5); }
.sz-venn__mitte[data-an="ja"] { opacity: 1; transform: none; }

/* =========================================================== Kacheln --- */
.sz-kacheln { inline-size: 100%; display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: clamp(.5rem, 2cqi, .9rem); }
.sz-kachel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: clamp(.7rem, 3cqi, 1.1rem); border-radius: var(--r-lg);
  background: var(--sz-flaeche); border: 1px solid var(--sz-linie); box-shadow: var(--sh-1); opacity: 0; transform: translateY(14px) scale(.96); }
.sz-kachel[data-an="ja"] { opacity: 1; transform: none; }
.sz-kachel[data-aktuell="ja"] { border-color: var(--sz-rot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sz-rot) 12%, transparent), var(--sh-3); }
.sz-kachel__ikone { display: grid; place-items: center; inline-size: 2.4rem; aspect-ratio: 1; border-radius: var(--r-md); background: var(--sz-senke); color: var(--sz-ink); }
.sz-kachel__ikone svg { inline-size: 58%; block-size: 58%; }
.sz-kachel[data-status="schlecht"] .sz-kachel__ikone { background: var(--brand-soft); color: var(--brand-fg); }
.sz-kachel[data-status="gut"] .sz-kachel__ikone { background: var(--ok-soft); color: var(--ok-fg); }
.sz-kachel b { font: var(--fw-bold) clamp(.78rem, 2.5cqi, 1rem)/1.2 var(--font-ui); text-wrap: balance; }
.sz-kachel small { font: var(--fw-medium) clamp(.65rem, 1.9cqi, .8rem)/1.3 var(--font-ui); color: var(--sz-leise); text-wrap: pretty; }

/* ============================================================= Liste --- */
.sz-liste { inline-size: min(100%, 32rem); display: flex; flex-direction: column; gap: clamp(.45rem, 1.6cqb, .8rem); }
.sz-liste__kopf { margin: 0 0 .3rem; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brand-fg); }
.sz-liste__zeile { display: flex; align-items: center; gap: .8rem; padding: clamp(.6rem, 2.2cqi, .95rem) 1rem; border-radius: var(--r-lg); background: var(--sz-flaeche); border: 1px solid var(--sz-linie);
  opacity: 0; transform: translateX(-16px); box-shadow: var(--sh-1); }
.sz-liste__zeile[data-an="ja"] { opacity: 1; transform: none; }
.sz-liste__zeile[data-aktuell="ja"] { border-color: var(--sz-gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sz-gut) 13%, transparent), var(--sh-2); }
.sz-liste__haken { flex: none; display: grid; place-items: center; inline-size: 1.8rem; aspect-ratio: 1; border-radius: 50%; background: var(--sz-gut); }
.sz-liste__zeile[data-status="schlecht"] .sz-liste__haken { background: var(--sz-rot); }
.sz-liste__haken svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sz-liste__haken path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms var(--ease-move) 240ms; }
.sz-liste__zeile[data-an="ja"] .sz-liste__haken path { stroke-dashoffset: 0; }
.sz-liste__text { font: var(--fw-bold) clamp(.8rem, 2.6cqi, 1.05rem)/1.3 var(--font-ui); text-wrap: pretty; }

/* =========================================================== Browser --- */
.sz-browser__adresse { flex: 1; display: flex; align-items: center; gap: .45rem; margin-inline-start: .6rem; padding: .35rem .7rem; border-radius: var(--r-pill);
  background: var(--sz-flaeche); border: 1px solid var(--sz-linie); font: var(--fw-medium) clamp(.7rem, 2.4cqi, .9rem)/1 var(--font-mono); min-inline-size: 0; overflow: hidden; white-space: nowrap; }
.sz-browser__schloss { display: grid; place-items: center; inline-size: 1.1rem; color: var(--fg-subtle); opacity: .3; transition: all .4s var(--ease-enter); }
.sz-browser__schloss[data-an="ja"] { opacity: 1; color: var(--sz-gut); transform: scale(1.25); }
.sz-browser__url { position: relative; min-inline-size: 0; }
.sz-browser__tippen { display: inline-block; overflow: hidden; vertical-align: bottom; max-inline-size: 0; white-space: nowrap; }
.sz-browser__tippen[data-an="ja"] { max-inline-size: calc(var(--zeichen) * 1ch + 1ch); transition: max-inline-size calc(var(--zeichen) * 45ms) steps(30, end); }
.sz-browser__tippen i { font-style: normal; color: var(--fg-subtle); transition: color .3s, background .3s; border-radius: 4px; }
.sz-browser__tippen .d { color: var(--sz-ink); font-weight: 600; }
.sz-browser:has(.sz-browser__domainmarke[data-an="ja"]) .sz-browser__tippen .d { background: var(--brand-soft); color: var(--brand-fg); box-shadow: 0 0 0 2px var(--sz-rot); padding-inline: .15em; }
.sz-browser__domainmarke { display: none; }
.sz-browser__seite { position: relative; display: grid; gap: .55rem; padding: 1.1rem; min-block-size: 11rem; }
.sz-browser__seite > span { block-size: .7rem; border-radius: 4px; background: var(--sz-senke); }
.sz-browser__seite > span:nth-child(1) { inline-size: 60%; block-size: 1.2rem; }
.sz-browser__seite > span:nth-child(3) { inline-size: 80%; }
.sz-browser__seite > span:nth-child(4) { inline-size: 45%; }
.sz-browser__warnung { position: absolute; inset: .6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--r-md);
  background: var(--sz-rot); color: #fff; text-align: center; padding: 1rem; opacity: 0; transform: scale(.94); }
.sz-browser__warnung svg { inline-size: 2rem; }
.sz-browser__warnung b { font: var(--fw-bold) clamp(.8rem, 2.6cqi, 1rem)/1.3 var(--font-ui); }
.sz-browser__warnung[data-an="ja"] { opacity: 1; transform: none; }
.sz-browser__update { position: absolute; inset-inline: 1rem; inset-block-end: 1rem; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: var(--r-md);
  background: var(--bg-inverse); color: #fff; opacity: 0; transform: translateY(10px); }
.sz-browser__update > svg { inline-size: 1.3rem; flex: none; }
.sz-browser__update[data-an="ja"] { opacity: 1; transform: none; }
.sz-browser__update[data-an="ja"] > svg { animation: sz-drehen 1.4s linear infinite; }
.sz-browser__update span { flex: 1; display: grid; gap: .35rem; }
.sz-browser__update b { font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-ui); }
.sz-browser__update i { block-size: 4px; border-radius: 2px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.sz-browser__update i::after { content: ""; position: absolute; inset: 0; background: var(--sz-gut); transform-origin: 0 50%; transform: scaleX(0); }
.sz-browser__update[data-an="ja"] i::after { animation: sz-fuellen 3s var(--ease-move) forwards; }
@keyframes sz-fuellen { to { transform: scaleX(1); } }
.sz-browser__chip { position: relative; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--sz-senke); border: 1px solid var(--sz-linie);
  opacity: 0; transform: translateX(-10px); }
.sz-browser__chip > svg { inline-size: 1.2rem; flex: none; }
.sz-browser__chip b { font: var(--fw-bold) var(--fs-xs)/1.25 var(--font-ui); }
.sz-browser__chip[data-an="ja"] { opacity: 1; transform: none; }
.sz-browser__seite:has(.sz-browser__chip) > span { display: none; }

/* ============================================================== Mail --- */
.sz-mail { padding-block-end: .5rem; transform-origin: 50% 0; }
.sz-mail[data-offen="nein"] { opacity: 0; transform: translateY(18px) scale(.97); }
.sz-mail[data-offen="ja"] { opacity: 1; transform: none; transition: opacity var(--sz-rein) var(--ease-enter), transform var(--sz-rein) var(--ease-enter); }
.sz-mail__kopf { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .9rem 1rem .4rem; }
.sz-mail__avatar { display: grid; place-items: center; inline-size: 2.3rem; aspect-ratio: 1; border-radius: 50%; background: var(--bg-inverse); color: #fff; font: var(--fw-bold) var(--fs-sm)/1 var(--font-ui); }
.sz-mail__kopf div { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.sz-mail__name { font: var(--fw-bold) clamp(.78rem, 2.5cqi, .95rem)/1.2 var(--font-ui); }
.sz-mail__adresse { font: var(--fw-medium) clamp(.66rem, 2cqi, .8rem)/1.2 var(--font-mono); color: var(--sz-leise); overflow-wrap: anywhere; }
.sz-mail__zeit { font: var(--fw-medium) var(--fs-micro)/1 var(--font-ui); color: var(--fg-subtle); }
.sz-mail__betreff { margin: .3rem 1rem .4rem; font: var(--fw-bold) clamp(.9rem, 3cqi, 1.15rem)/1.25 var(--font-display); letter-spacing: -.01em; }
.sz-mail__text { margin: 0 1rem .7rem; font: var(--fw-normal) clamp(.72rem, 2.3cqi, .9rem)/1.5 var(--font-ui); color: var(--fg-default); }
.sz-mail__fuss { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 1rem .6rem; }
.sz-mail__link { position: relative; color: var(--brand-fg); text-decoration: underline; font: var(--fw-bold) clamp(.72rem, 2.3cqi, .9rem)/1.4 var(--font-ui); }
.sz-mail__anhang { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: var(--r-sm); background: var(--sz-senke); font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-ui); }
.sz-mail__anhang svg { inline-size: .95rem; }
.sz-mail__cursor { position: absolute; inset-inline-start: 70%; inset-block-start: 40%; inline-size: 1.5rem; color: var(--sz-ink); opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.sz-mail__cursor svg { fill: var(--sz-flaeche); }
.sz-mail__cursor[data-an="ja"] { opacity: 1; animation: sz-zum-link 1.2s var(--ease-move) forwards; }
@keyframes sz-zum-link { to { inset-inline-start: 18%; inset-block-start: calc(100% - 3.1rem); } }
.sz-mail__ziel { position: absolute; inset-inline-start: 1rem; inset-block-end: -1.6rem; padding: .3rem .6rem; border-radius: var(--r-sm); background: var(--bg-inverse); color: #fff;
  font: var(--fw-medium) var(--fs-micro)/1.2 var(--font-mono); opacity: 0; transform: translateY(-4px); transition: opacity .3s 1.1s, transform .3s 1.1s; white-space: nowrap; }
.sz-mail:has(.sz-mail__cursor[data-an="ja"]) .sz-mail__ziel { opacity: 1; transform: none; }
.sz-mail:has(.sz-mail__cursor[data-an="ja"]) .sz-mail__link { background: var(--brand-soft); border-radius: 4px; }
.sz-mail__spalte { inline-size: min(100%, 34rem); display: grid; gap: .9rem; }
.sz-mail__merkmale { display: flex; flex-wrap: wrap; gap: .4rem; min-block-size: 1.8rem; }
.sz-flag { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem .35rem .45rem; border-radius: var(--r-pill);
  background: var(--sz-rot); color: #fff; font: var(--fw-bold) clamp(.62rem, 2cqi, .8rem)/1.1 var(--font-ui); box-shadow: 0 6px 18px color-mix(in srgb, var(--sz-rot) 30%, transparent);
  opacity: 0; transform: scale(.6) translateY(6px); white-space: nowrap; }
.sz-flag[data-an="nein"] { display: none; }
.sz-flag::before { content: "!"; display: grid; place-items: center; inline-size: 1.05rem; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--sz-rot); font-size: .7rem; }
.sz-flag[data-an="ja"] { opacity: 1; transform: none; animation: sz-flag-rein 420ms cubic-bezier(.3, 1.5, .5, 1); }
@keyframes sz-flag-rein { from { opacity: 0; transform: scale(.6) translateY(6px); } }
.sz-flag[data-aktuell="nein"] { background: var(--brand-soft); color: var(--brand-fg); box-shadow: none; }
.sz-flag[data-aktuell="nein"]::before { background: var(--sz-rot); color: #fff; }
.sz-mail .sz-mail__adresse, .sz-mail .sz-mail__betreff, .sz-mail .sz-mail__text, .sz-mail .sz-mail__link, .sz-mail .sz-mail__anhang { transition: box-shadow .35s, background .35s; border-radius: 4px; }
.sz-mail[data-markabsender="ja"] .sz-mail__adresse, .sz-mail[data-markbetreff="ja"] .sz-mail__betreff, .sz-mail[data-marktext="ja"] .sz-mail__text,
.sz-mail[data-markanrede="ja"] .sz-mail__text, .sz-mail[data-marklink="ja"] .sz-mail__link, .sz-mail[data-markanhang="ja"] .sz-mail__anhang {
  background: var(--brand-soft); box-shadow: 0 0 0 2px var(--sz-rot); }
.sz-mail__melden { position: absolute; inset: auto 1rem -1rem auto; display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: var(--r-pill);
  background: var(--sz-gut); color: #fff; font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui); opacity: 0; transform: translateY(10px); box-shadow: var(--sh-3); }
.sz-mail__melden svg { inline-size: 1.1rem; }
.sz-mail__melden[data-an="ja"] { opacity: 1; transform: none; }

/* ============================================================ Tasten --- */
.sz-tasten { display: grid; justify-items: center; gap: 1.1rem; inline-size: min(100%, 30rem); }
.sz-tasten__monitor { inline-size: 100%; aspect-ratio: 16 / 9.4; border-radius: var(--r-lg); padding: .6rem; background: var(--bg-inverse); box-shadow: var(--sh-3); position: relative; }
.sz-tasten__monitor::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 42%; inline-size: 16%; block-size: .8rem; background: var(--line-strong); border-radius: 0 0 6px 6px; }
.sz-tasten__schirm { position: relative; block-size: 100%; border-radius: var(--r-md); background: var(--sz-flaeche); overflow: hidden; }
.sz-tasten__entwurf { padding: .8rem 1rem; display: grid; gap: .35rem; font: var(--fw-medium) clamp(.66rem, 2.2cqi, .85rem)/1.35 var(--font-ui); opacity: .15; }
.sz-tasten__entwurf[data-an="ja"] { opacity: 1; }
.sz-tasten__entwurf p { margin: 0; padding-block-end: .3rem; border-block-end: 1px solid var(--sz-linie); }
.sz-tasten__entwurf b { color: var(--fg-subtle); }
.sz-tasten__tipp { border: 0 !important; overflow: hidden; white-space: nowrap; max-inline-size: 0; }
.sz-tasten__entwurf[data-an="ja"] .sz-tasten__tipp { animation: sz-tippen 3.4s steps(46, end) .3s forwards; white-space: normal; max-block-size: 1.4em; }
@keyframes sz-tippen { to { max-inline-size: 100%; max-block-size: 6em; } }
.sz-tasten__entwurf[data-an="ja"] .sz-tasten__tipp::after { content: "▍"; color: var(--sz-rot); animation: sz-blinken 1s steps(1) infinite; }
@keyframes sz-blinken { 50% { opacity: 0; } }
.sz-tasten__sperre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .4rem; background: linear-gradient(135deg, #1c1e22, #3b3f45); color: #fff;
  opacity: 0; transform: scale(1.05); }
.sz-tasten__sperre svg { inline-size: 2.6rem; animation: none; }
.sz-tasten__sperre b { font: var(--fw-bold) clamp(.9rem, 3cqi, 1.2rem)/1 var(--font-display); }
.sz-tasten__sperre small { font: var(--fw-medium) var(--fs-micro)/1 var(--font-ui); color: rgba(255,255,255,.6); }
.sz-tasten__sperre[data-an="ja"] { opacity: 1; transform: none; }
.sz-tasten__reihe { display: flex; align-items: center; gap: .8rem; opacity: .35; }
.sz-tasten__reihe[data-an="ja"] { opacity: 1; }
.sz-taste { display: grid; place-items: center; inline-size: clamp(3.2rem, 14cqi, 4.4rem); aspect-ratio: 1; border-radius: var(--r-md);
  background: var(--sz-flaeche); border: 1px solid var(--sz-linie); box-shadow: 0 5px 0 var(--line-strong), var(--sh-2); font: var(--fw-bold) clamp(1.3rem, 5cqi, 1.9rem)/1 var(--font-display); color: var(--sz-ink); }
.sz-taste svg { inline-size: 46%; fill: currentColor; }
.sz-tasten__reihe[data-an="ja"] .sz-taste { animation: sz-druecken 2.6s var(--ease-move) infinite; }
.sz-tasten__reihe[data-an="ja"] .sz-taste--l { animation-delay: .18s; }
@keyframes sz-druecken { 0%, 30%, 100% { transform: none; box-shadow: 0 5px 0 var(--line-strong), var(--sh-2); background: var(--sz-flaeche); color: var(--sz-ink); }
  12%, 22% { transform: translateY(4px); box-shadow: 0 1px 0 var(--line-strong); background: var(--sz-rot); color: #fff; } }
.sz-tasten__plus { font: var(--fw-bold) 1.4rem/1 var(--font-display); color: var(--fg-subtle); }
.sz-tasten__merksatz { margin: 0; padding: .6rem 1.1rem; border-radius: var(--r-pill); background: var(--bg-inverse); color: #fff; font: var(--fw-bold) clamp(.85rem, 3cqi, 1.1rem)/1.2 var(--font-display);
  letter-spacing: -.01em; opacity: 0; transform: translateY(10px) scale(.95); }
.sz-tasten__merksatz[data-an="ja"] { opacity: 1; transform: none; }

/* ============================================================ Balken --- */
.sz-balken { inline-size: min(100%, 32rem); display: grid; gap: .9rem; }
.sz-balken__kopf { margin: 0; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brand-fg); }
.sz-balken__zeile { display: grid; grid-template-columns: minmax(6rem, 35%) 1fr auto; gap: .7rem; align-items: center; opacity: .2; }
.sz-balken__zeile[data-an="ja"] { opacity: 1; }
.sz-balken__label { font: var(--fw-bold) clamp(.72rem, 2.3cqi, .9rem)/1.2 var(--font-mono); overflow-wrap: anywhere; }
.sz-balken__spur { block-size: 12px; border-radius: 6px; background: var(--sz-senke); overflow: hidden; }
.sz-balken__spur i { display: block; block-size: 100%; inline-size: calc(var(--wert) * 100%); border-radius: 6px; background: var(--sz-rot); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease-enter); }
.sz-balken__zeile[data-status="gut"] .sz-balken__spur i { background: var(--sz-gut); }
.sz-balken__zeile[data-an="ja"] .sz-balken__spur i { transform: none; }
.sz-balken__wert { font: var(--fw-bold) clamp(.72rem, 2.3cqi, .9rem)/1.1 var(--font-ui); min-inline-size: 5.5em; text-align: end; }
.sz-balken__zeile[data-status="gut"] .sz-balken__wert { color: var(--ok-fg); }

/* ============================================================ Domino --- */
.sz-domino { inline-size: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 2cqi, .9rem); }
.sz-domino__stein { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: .9rem .6rem; border-radius: var(--r-lg);
  background: var(--sz-flaeche); border: 1px solid var(--sz-linie); box-shadow: var(--sh-1); opacity: 0; transform: rotate(-8deg) translateY(-20px); transform-origin: 50% 100%; }
.sz-domino__stein[data-an="ja"] { opacity: 1; transform: none; transition-timing-function: cubic-bezier(.25, 1.4, .4, 1); }
.sz-domino__stein span { display: grid; place-items: center; inline-size: 2.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--brand-soft); color: var(--brand-fg); }
.sz-domino__stein span svg { inline-size: 55%; }
.sz-domino__stein[data-aktuell="ja"] { background: var(--sz-rot); border-color: var(--sz-rot); color: #fff; box-shadow: var(--sh-3); }
.sz-domino__stein[data-aktuell="ja"] span { background: rgba(255,255,255,.18); color: #fff; }
.sz-domino__stein b { font: var(--fw-bold) clamp(.7rem, 2.3cqi, .9rem)/1.2 var(--font-ui); text-wrap: balance; }

/* ============================================================== Chat --- */
.sz-chat { min-block-size: 16rem; }
.sz-chat__verlauf { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.sz-chat__blase { margin: 0; max-inline-size: 85%; padding: .65rem .9rem; border-radius: 16px; font: var(--fw-medium) clamp(.72rem, 2.3cqi, .9rem)/1.45 var(--font-ui); opacity: 0; transform: translateY(10px); }
.sz-chat__blase--ich { align-self: flex-end; background: var(--bg-inverse); color: #fff; border-end-end-radius: 4px; }
.sz-chat__blase--ki { align-self: flex-start; background: var(--sz-senke); border-end-start-radius: 4px; }
.sz-chat__blase[data-an="ja"] { opacity: 1; transform: none; }
.sz-chat__stopp { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: var(--r-md);
  background: var(--sz-rot); color: #fff; border: 3px solid #fff; box-shadow: var(--sh-3); font: var(--fw-bold) clamp(.8rem, 2.8cqi, 1.05rem)/1.2 var(--font-display);
  translate: -50% -50%; rotate: -6deg; opacity: 0; transform: scale(1.8); white-space: nowrap; }
.sz-chat__stopp svg { inline-size: 1.5rem; }
.sz-chat__stopp[data-an="ja"] { opacity: 1; transform: none; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.sz-chat__speicher { position: absolute; inset-inline-end: -1rem; inset-block-start: -1.4rem; display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: var(--r-pill);
  background: var(--bg-inverse); color: #fff; font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-ui); opacity: 0; transform: translateY(8px); box-shadow: var(--sh-3); }
.sz-chat__speicher svg { inline-size: 1.2rem; }
.sz-chat__speicher[data-an="ja"] { opacity: 1; transform: none; }

/* ============================================================== WLAN --- */
.sz-wlan__liste { display: grid; gap: .1rem; padding: .5rem; }
.sz-wlan__netz { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center; padding: .6rem .8rem; border-radius: var(--r-md); opacity: 0; transform: translateY(8px); }
.sz-wlan__netz > svg { inline-size: 1.3rem; grid-row: 1 / span 2; }
.sz-wlan__netz b { font: var(--fw-bold) clamp(.76rem, 2.4cqi, .92rem)/1.2 var(--font-mono); }
.sz-wlan__netz small { font: var(--fw-medium) var(--fs-micro)/1.3 var(--font-ui); color: var(--sz-leise); }
.sz-wlan__netz[data-an="ja"] { opacity: 1; transform: none; }
.sz-wlan__netz[data-status="falsch"][data-an="ja"] { background: var(--brand-soft); }
.sz-wlan__netz[data-status="falsch"] b { color: var(--brand-fg); }
.sz-wlan__netz[data-status="echt"][data-an="ja"] { background: var(--ok-soft); }
.sz-wlan__netz .sz-stempel { inset-block-start: 50%; translate: 0 -50%; inset-inline-end: .6rem; box-shadow: none; }
.sz-wlan__vpn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; margin: .4rem .8rem .8rem; padding: .7rem .9rem; border-radius: var(--r-md);
  background: var(--bg-inverse); color: #fff; opacity: 0; transform: translateY(10px); }
.sz-wlan__vpn > svg { inline-size: 1.6rem; }
.sz-wlan__vpn b { grid-column: 1 / -1; text-align: center; font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: #9fe0bb; }
.sz-wlan__vpn[data-an="ja"] { opacity: 1; transform: none; }
.sz-wlan__tunnel { position: relative; block-size: 1.2rem; border-radius: var(--r-pill); border: 2px solid #9fe0bb; overflow: hidden; }
.sz-wlan__tunnel i { position: absolute; inset-block-start: 50%; inline-size: 6px; block-size: 6px; margin-block-start: -3px; border-radius: 50%; background: #9fe0bb; animation: sz-paket 1.6s linear infinite; }
.sz-wlan__tunnel i:nth-child(2) { animation-delay: .53s; }
.sz-wlan__tunnel i:nth-child(3) { animation-delay: 1.06s; }

/* ============================================================= Datei --- */
.sz-datei__zeilen { display: grid; padding: .5rem; }
.sz-datei__zeile { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: var(--r-md); transition: background .4s; }
.sz-datei__zeile svg { inline-size: 1.3rem; flex: none; }
.sz-datei__zeile b { font: var(--fw-bold) clamp(.76rem, 2.4cqi, .95rem)/1.2 var(--font-mono); }
.sz-datei__zeile[data-zustand="kaputt"] { background: var(--brand-soft); color: var(--brand-fg); animation: sz-flackern .5s steps(4) 1; }
@keyframes sz-flackern { 25% { filter: blur(1px); transform: translateX(2px); } 50% { filter: none; transform: translateX(-2px); } 75% { filter: blur(.5px); } }
.sz-datei__erpressung { position: absolute; inset: 20% 8% auto; display: grid; justify-items: center; gap: .35rem; padding: 1rem; border-radius: var(--r-md); text-align: center;
  background: #16181b; color: #fff; border: 2px solid var(--sz-rot); box-shadow: 0 20px 60px rgba(200, 0, 0, .35); opacity: 0; transform: scale(.85); }
.sz-datei__erpressung svg { inline-size: 2rem; color: var(--sz-rot); }
.sz-datei__erpressung b { font: var(--fw-bold) clamp(.85rem, 2.8cqi, 1.05rem)/1.25 var(--font-display); }
.sz-datei__erpressung small { font: var(--fw-medium) var(--fs-micro)/1.3 var(--font-ui); color: rgba(255,255,255,.7); }
.sz-datei__erpressung[data-an="ja"] { opacity: 1; transform: none; }
.sz-datei:has(.sz-datei__backup[data-an="ja"]) .sz-datei__erpressung { opacity: 0; transform: scale(.9); }
.sz-datei__backup { position: relative; margin: 0 .8rem .9rem; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; border-radius: var(--r-pill);
  background: var(--sz-gut); color: #fff; font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-ui); opacity: 0; transform: translateY(10px); }
.sz-datei__backup svg { inline-size: 1.2rem; }
.sz-datei__backup[data-an="ja"] { opacity: 1; transform: none; }
.sz-datei__backup[data-an="ja"] svg { animation: sz-drehen 1.2s linear 2; }

/* ============================================================== Tür --- */
.sz-tuer { position: relative; inline-size: min(100%, 30rem); aspect-ratio: 4 / 3; border-radius: var(--r-xl); background: var(--sz-senke); overflow: hidden; }
.sz-tuer__wand { position: absolute; inset: 0 0 18% 0; background: linear-gradient(180deg, var(--sz-flaeche), var(--sz-senke)); border-block-end: 3px solid var(--line-strong); }
.sz-tuer__tuer { position: absolute; inset-inline-start: 50%; inset-block-end: 0; inline-size: 30%; translate: -50% 0; color: var(--fg-default); }
.sz-tuer__tuer svg { inline-size: 100%; block-size: auto; stroke-width: 1.2; }
.sz-tuer__leser { position: absolute; inset-inline-start: 66%; inset-block-end: 34%; inline-size: 4%; aspect-ratio: 1 / 1.6; border-radius: 3px; background: var(--bg-inverse); }
.sz-tuer__leser i { position: absolute; inset: 20% 25% auto; block-size: 20%; border-radius: 2px; background: var(--line-strong); transition: background .3s; }
.sz-tuer[data-schritt="ausweis"] .sz-tuer__leser i { background: var(--sz-gut); box-shadow: 0 0 10px var(--sz-gut); }
.sz-tuer[data-schritt="mitlaufen"] .sz-tuer__leser i { background: var(--sz-rot); box-shadow: 0 0 10px var(--sz-rot); animation: sz-blinken .6s steps(1) infinite; }
.sz-tuer__p { position: absolute; inset-block-end: 12%; inline-size: 15%; color: var(--sz-ink); opacity: 0; transition: all 1.4s var(--ease-move); }
.sz-tuer__p--1 { inset-inline-start: 6%; }
.sz-tuer__p--1 i { position: absolute; inset-inline-end: -10%; inset-block-start: 45%; inline-size: 40%; color: var(--sz-gut); }
.sz-tuer__p--2 { inset-inline-start: -10%; color: var(--brand-fg); }
.sz-tuer__p[data-an="ja"] { opacity: 1; }
.sz-tuer__p--1[data-an="ja"] { inset-inline-start: 42.5%; }
.sz-tuer__p--2[data-an="ja"] { inset-inline-start: 26%; }
.sz-tuer__p--2[data-an="ja"]::after { content: "!"; position: absolute; inset-block-start: -18%; inset-inline-start: 38%; display: grid; place-items: center; inline-size: 1.3rem; aspect-ratio: 1; border-radius: 50%; background: var(--sz-rot); color: #fff; font: 700 .8rem/1 var(--font-ui); }
.sz-tuer__kamera { position: absolute; inset-inline-end: 6%; inset-block-start: 8%; inline-size: 10%; color: var(--sz-ink); transform: scaleX(-1); }
.sz-tuer__kegel { position: absolute; inset-inline-end: 12%; inset-block-start: 15%; inline-size: 55%; block-size: 60%; clip-path: polygon(100% 0, 0 70%, 25% 100%);
  background: linear-gradient(225deg, color-mix(in srgb, var(--sz-gut) 40%, transparent), transparent 85%); opacity: 0; transition: opacity .6s, background .4s; }
.sz-tuer__kegel[data-an="ja"] { opacity: 1; }
.sz-tuer__container { position: absolute; inset-inline-end: 4%; inset-block-end: 18%; inline-size: 22%; color: var(--fg-muted); opacity: 0; transform: translateX(120%); transition: all 1.2s var(--ease-move); }
.sz-tuer__container[data-an="ja"] { opacity: 1; transform: none; color: var(--brand-fg); }
.sz-tuer:has(.sz-tuer__container[data-an="ja"]) .sz-tuer__kegel { background: linear-gradient(225deg, color-mix(in srgb, var(--sz-rot) 45%, transparent), transparent 70%); }
.sz-tuer__zeile { position: absolute; inset-inline: 6%; inset-block-end: 2%; margin: 0; text-align: center; font: var(--fw-bold) clamp(.7rem, 2.3cqi, .88rem)/1.2 var(--font-ui); color: var(--fg-default); }

/* ============================================================= Radar --- */
.sz-radar { position: relative; inline-size: min(100cqi, 100cqb, 30rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sz-gut) 7%, var(--sz-flaeche)) 0 68%, transparent 69%); }
.sz-radar__ring { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px solid var(--sz-linie); }
.sz-radar__ring--2 { inset: 22%; }
.sz-radar__ring--3 { inset: 40%; background: var(--sz-senke); }
.sz-radar__strahl { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--sz-rot) 32%, transparent), transparent 22%); animation: sz-drehen 4s linear infinite; }
.sz-radar__punkt { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); translate: -50% -50%; display: flex; align-items: center; gap: .35rem; opacity: 0; transform: scale(.3); }
.sz-radar__punkt[data-seite="links"] { flex-direction: row-reverse; }
.sz-radar__punkt span { display: grid; place-items: center; inline-size: clamp(2rem, 8cqi, 2.8rem); aspect-ratio: 1; border-radius: 50%; background: var(--sz-flaeche); border: 2px solid var(--sz-rot); color: var(--sz-rot); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sz-rot) 40%, transparent); }
.sz-radar__punkt span svg { inline-size: 52%; }
.sz-radar__punkt[data-an="ja"] { opacity: 1; transform: none; }
.sz-radar__punkt[data-aktuell="ja"] span { background: var(--sz-rot); color: #fff; animation: sz-ping 1.4s ease-out infinite; }
@keyframes sz-ping { to { box-shadow: 0 0 0 14px transparent; } }
.sz-radar__punkt b { padding: .25rem .5rem; border-radius: var(--r-sm); background: var(--sz-flaeche); box-shadow: var(--sh-2); font: var(--fw-bold) clamp(.58rem, 1.9cqi, .76rem)/1.2 var(--font-ui); max-inline-size: 11em; text-wrap: balance; }

/* ========================================================= Vergleich --- */
.sz-vergleich { inline-size: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(.5rem, 2cqi, 1rem); align-items: start; }
.sz-vergleich__spalte { display: grid; gap: .5rem; }
.sz-vergleich__kopf { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .9rem .6rem; border-radius: var(--r-lg); background: var(--bg-inverse); color: #fff; text-align: center; }
.sz-vergleich__spalte--r .sz-vergleich__kopf { background: var(--sz-rot); }
.sz-vergleich__kopf svg { inline-size: 1.8rem; }
.sz-vergleich__kopf b { font: var(--fw-bold) clamp(.78rem, 2.5cqi, 1rem)/1.15 var(--font-display); }
.sz-vergleich__vs { align-self: center; margin-block-start: 1.5rem; display: grid; place-items: center; inline-size: 2.2rem; aspect-ratio: 1; border-radius: 50%; background: var(--sz-senke); font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); color: var(--fg-subtle); text-transform: uppercase; }
.sz-vergleich__punkt { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: var(--r-md); background: var(--sz-flaeche); border: 1px solid var(--sz-linie);
  font: var(--fw-bold) clamp(.68rem, 2.2cqi, .86rem)/1.25 var(--font-ui); opacity: 0; transform: translateY(10px); }
.sz-vergleich__punkt svg { inline-size: 1.1rem; flex: none; }
.sz-vergleich__punkt[data-an="ja"] { opacity: 1; transform: none; }
.sz-vergleich__punkt[data-aktuell="ja"] { border-color: var(--sz-rot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sz-rot) 12%, transparent); }
.sz-vergleich__punkt[data-status="gut"] svg { color: var(--ok); }
.sz-vergleich__punkt[data-status="schlecht"] svg { color: var(--sz-rot); }

/* ============================================================== Zahl --- */
.sz-zahl { display: grid; gap: 1rem; inline-size: min(100%, 28rem); }
.sz-zahl__karte { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: baseline; padding: 1.1rem 1.3rem; border-radius: var(--r-xl); background: var(--sz-flaeche);
  border: 1px solid var(--sz-linie); box-shadow: var(--sh-2); opacity: 0; transform: translateY(14px); }
.sz-zahl__karte[data-an="ja"] { opacity: 1; transform: none; }
.sz-zahl__karte[data-aktuell="ja"] { background: var(--bg-inverse); color: #fff; }
.sz-zahl__wert { font: var(--fw-bold) clamp(2.4rem, 12cqi, 4.2rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--sz-rot); }
.sz-zahl__karte[data-aktuell="ja"] .sz-zahl__wert { color: #ff6a62; }
.sz-zahl__einheit { font: var(--fw-bold) clamp(.9rem, 3cqi, 1.2rem)/1.1 var(--font-display); }
.sz-zahl__text { grid-column: 1 / -1; margin: .4rem 0 0; font: var(--fw-medium) clamp(.72rem, 2.3cqi, .9rem)/1.35 var(--font-ui); color: inherit; opacity: .8; }

/* ============================================================= Angel --- */
.sz-angel { position: relative; inline-size: min(100%, 30rem); aspect-ratio: 1 / .9; }
.sz-angel__schnur { position: absolute; inset-inline-start: 50%; inset-block-start: 0; inline-size: 1.5px; block-size: 0; background: var(--fg-muted); transition: block-size 1.2s var(--ease-move); }
.sz-angel__haken { position: absolute; inset-inline-start: 50%; inset-block-start: 0; inline-size: 3rem; translate: -35% -20%; color: var(--sz-rot); opacity: 0; transition: all 1.2s var(--ease-move); }
.sz-angel__haken[data-an="ja"] { opacity: 1; inset-block-start: 22%; }
.sz-angel:has(.sz-angel__haken[data-an="ja"]) .sz-angel__schnur { block-size: 24%; }
.sz-angel__haken[data-an="ja"] svg { animation: sz-pendeln 3s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes sz-pendeln { 50% { transform: rotate(8deg); } }
.sz-angel__koeder { position: absolute; inset-inline: 18%; inset-block-start: 38%; display: grid; justify-items: center; gap: .3rem; padding: 1rem; border-radius: var(--r-lg); text-align: center;
  background: var(--sz-flaeche); border: 2px solid var(--sz-rot); box-shadow: var(--sh-3); opacity: 0; transform: translateY(20px); }
.sz-angel__koeder svg { inline-size: 2rem; color: var(--sz-rot); }
.sz-angel__koeder b { font: var(--fw-bold) clamp(.85rem, 2.8cqi, 1.05rem)/1.25 var(--font-display); }
.sz-angel__koeder small { font: var(--fw-medium) var(--fs-micro)/1.3 var(--font-ui); color: var(--sz-leise); }
.sz-angel__koeder[data-an="ja"] { opacity: 1; transform: none; }
.sz-angel__kanaele { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.sz-angel__kanal { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: var(--r-pill); background: var(--bg-inverse); color: #fff;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); opacity: 0; transform: translateY(12px) scale(.8); }
.sz-angel__kanal svg { inline-size: 1rem; }
.sz-angel__kanal[data-an="ja"] { opacity: 1; transform: none; }
.sz-angel__kanal[data-aktuell="ja"] { background: var(--sz-rot); }

/* ======================================================= Schreibtisch --- */
.sz-tisch { position: relative; inline-size: min(100%, 30rem); aspect-ratio: 4 / 3; }
.sz-tisch__platte { position: absolute; inset: 6% 16% 20% 0; border-radius: var(--r-xl); background: color-mix(in srgb, #b98a58 22%, var(--sz-flaeche)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #b98a58 30%, transparent); }
:root[data-theme="dark"] .sz-tisch__platte { background: #2a2520; }
.sz-tisch__monitor { position: absolute; inset-inline-start: 30%; inset-block-start: 6%; inline-size: 40%; color: var(--sz-ink); }
.sz-tisch__monitor > svg { inline-size: 100%; }
.sz-tisch__zettel { position: absolute; inset-inline-end: -6%; inset-block-start: 8%; padding: .25rem .35rem; background: #ffe36e; color: #222; font: 700 clamp(.5rem, 1.8cqi, .68rem)/1.1 var(--font-mono); font-style: normal; rotate: 8deg; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: all .6s var(--ease-move); }
.sz-tisch[data-zettel="ja"] .sz-tisch__zettel { background: var(--sz-rot); color: #fff; text-decoration: line-through; transform: translate(40%, -40%) rotate(20deg); opacity: .0; }
.sz-tisch__lock { position: absolute; inset: 12% 14% 38%; display: grid; place-items: center; border-radius: 4px; background: #1c1e22; color: #fff; opacity: 0; transition: opacity .5s; font-style: normal; }
.sz-tisch__lock svg { inline-size: 40%; }
.sz-tisch[data-sperren="ja"] .sz-tisch__lock { opacity: 1; }
.sz-tisch__papier { position: absolute; inline-size: 13%; color: var(--fg-default); transition: all 1.1s var(--ease-move); }
.sz-tisch__papier svg { background: var(--sz-flaeche); border-radius: 3px; }
.sz-tisch__papier--1 { inset-inline-start: 8%; inset-block-start: 50%; rotate: -12deg; }
.sz-tisch__papier--2 { inset-inline-start: 22%; inset-block-start: 58%; rotate: 8deg; }
.sz-tisch__papier--3 { inset-inline-start: 62%; inset-block-start: 55%; rotate: -4deg; }
.sz-tisch[data-besucher="ja"] .sz-tisch__papier { color: var(--brand-fg); }
.sz-tisch[data-wegschliessen="ja"] .sz-tisch__papier--1, .sz-tisch[data-wegschliessen="ja"] .sz-tisch__papier--2 { inset-inline-start: 88%; inset-block-start: 30%; rotate: 0deg; opacity: 0; scale: .5; }
.sz-tisch[data-vernichten="ja"] .sz-tisch__papier--3 { inset-inline-start: 88%; inset-block-start: 72%; opacity: 0; scale: .5; }
.sz-tisch__tasse { position: absolute; inset-inline-start: 72%; inset-block-start: 20%; inline-size: 9%; color: var(--fg-muted); }
.sz-tisch__schrank { position: absolute; inset-inline-end: 0; inset-block-start: 18%; inline-size: 13%; color: var(--sz-ink); transition: color .4s; }
.sz-tisch[data-wegschliessen="ja"] .sz-tisch__schrank { color: var(--ok); }
.sz-tisch__schredder { position: absolute; inset-inline-end: 0; inset-block-start: 60%; inline-size: 13%; color: var(--sz-ink); }
.sz-tisch[data-vernichten="ja"] .sz-tisch__schredder { color: var(--ok); animation: sz-ruetteln .5s 1.1s 2; }
.sz-tisch__zeile { position: absolute; inset-inline: 0; inset-block-end: 0; margin: 0; text-align: center; font: var(--fw-bold) clamp(.72rem, 2.3cqi, .9rem)/1.25 var(--font-ui); }
.sz-tisch__marke, .sz-mfa__marke { display: none; }

/* =============================================================== MFA --- */
.sz-mfa { position: relative; inline-size: min(100%, 30rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: center; }
.sz-mfa__login { inline-size: 100%; }
.sz-mfa__login label { display: grid; gap: .25rem; margin: .7rem .9rem; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: var(--track-label); }
.sz-mfa__login label span { padding: .5rem .6rem; border-radius: var(--r-sm); background: var(--sz-senke); color: var(--sz-ink); font: var(--fw-medium) var(--fs-xs)/1 var(--font-mono); text-transform: none; letter-spacing: .08em; }
.sz-mfa__pw { transition: all .4s; }
.sz-mfa:not([data-passwort="ja"]) .sz-mfa__pw { color: transparent; }
.sz-mfa__code { opacity: .3; transition: opacity .4s; }
.sz-mfa[data-faktor="ja"] .sz-mfa__code { opacity: 1; }
.sz-mfa[data-faktor="ja"] .sz-mfa__code span { box-shadow: 0 0 0 2px var(--sz-rot); }
.sz-mfa__handy { position: relative; display: grid; place-items: center; color: var(--sz-ink); opacity: .25; transform: translateY(10px); transition: all .6s var(--ease-enter); }
.sz-mfa__handy > svg { inline-size: 70%; }
.sz-mfa__ziffern { position: absolute; inset-block-start: 44%; inset-inline: 0; text-align: center; font-size: clamp(.55rem, 1.9cqi, .78rem) !important; font: 700 clamp(.7rem, 2.6cqi, 1rem)/1 var(--font-mono); letter-spacing: .05em; color: var(--sz-rot); opacity: 0; transition: opacity .4s .3s; }
.sz-mfa[data-faktor="ja"] .sz-mfa__handy { opacity: 1; transform: none; }
.sz-mfa[data-faktor="ja"] .sz-mfa__ziffern { opacity: 1; }
.sz-mfa__dieb { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .6rem; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-fg);
  font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui); opacity: 0; transform: translateX(-20px); transition: all .6s var(--ease-enter); }
.sz-mfa__dieb svg { inline-size: 1.4rem; }
.sz-mfa[data-dieb="ja"] .sz-mfa__dieb { opacity: 1; transform: none; }
.sz-mfa__ergebnis { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: var(--r-pill);
  background: var(--sz-gut); color: #fff; font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui); opacity: 0; transform: scale(.8); transition: all .5s cubic-bezier(.3, 1.5, .5, 1); white-space: nowrap; box-shadow: var(--sh-3); }
.sz-mfa__ergebnis svg { inline-size: 1.2rem; }
.sz-mfa[data-ergebnis="ja"] .sz-mfa__ergebnis { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .szene *, .szene *::before, .szene *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* Große Bildschirme: Listen- und Kettenszenen füllen das Szenenfeld sonst nur zur Hälfte. */
@media (min-width: 1200px) and (min-height: 760px) {
  .folie__szene > .szene:is([data-typ="knoten"], [data-typ="liste"], [data-typ="kacheln"], [data-typ="vergleich"], [data-typ="angel"], [data-typ="domino"]) { zoom: 1.18; inline-size: calc(100% / 1.18); block-size: calc(100% / 1.18); }
}
.sz-datei .sz-hinweis { inset-block: -1.4rem auto; }
.sz-datei .sz-hinweis::before { inset-block: auto -6px; }