/*!
 * sebyOS – Oberfläche
 * Farben: Rollen aus den globalen Elementor-Farben (--sx-brand, --sx-bright, --sx-signal, --sx-dark,
 * --sx-light, --sx-blue, --sx-violet, --sx-green). Sie stehen inline am Body, siehe SebyOS_Colors::css().
 * Alle weiteren Töne für Hell und Dunkel leiten sich daraus ab.
 */

/* ---------- Rollen: Rückfallwerte, falls Elementor fehlt ---------- */
body.sx, body.sx-preview {
  --sx-brand: #11A796; --sx-bright: #00F0D4; --sx-signal: #FF0054; --sx-dark: #1F1C21; --sx-light: #F3F1F5;
  --sx-blue: #43B5FF; --sx-violet: #6C2BD9; --sx-green: #0E8A5F;
  --font-display: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Abgeleitete Töne, Hellmodus ---------- */
body.sx, body.sx-preview {
  --sx-brand-lo: color-mix(in oklab, var(--sx-brand) 72%, #000);
  --sx-brand-hi: color-mix(in oklab, var(--sx-brand) 80%, #fff);
  --sx-signal-hi: color-mix(in oklab, var(--sx-signal) 82%, #fff);
  --sx-green-hi: color-mix(in oklab, var(--sx-green) 60%, #fff);
  --sx-blue-lo: color-mix(in oklab, var(--sx-blue) 55%, #000);
  --sx-deep: color-mix(in oklab, var(--sx-dark) 45%, #000);

  --wall-1: color-mix(in oklab, var(--sx-brand) 8%, #fff);
  --wall-2: color-mix(in oklab, var(--sx-brand) 17%, #f3f4f4);
  --wall-glow: color-mix(in srgb, var(--sx-brand) 22%, transparent);
  --wall-glow-2: color-mix(in srgb, var(--sx-signal) 10%, transparent);
  --contour: color-mix(in srgb, var(--sx-brand-lo) 26%, transparent);
  --contour-strong: color-mix(in srgb, var(--sx-brand-lo) 50%, transparent);

  --glass: rgba(255, 255, 255, .64);
  --glass-strong: rgba(252, 253, 253, .9);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-hi: rgba(255, 255, 255, .9);
  --hair: color-mix(in srgb, var(--sx-dark) 11%, transparent);
  --hair-strong: color-mix(in srgb, var(--sx-dark) 20%, transparent);
  --fill: color-mix(in srgb, var(--sx-dark) 4.5%, transparent);
  --fill-2: color-mix(in srgb, var(--sx-dark) 8%, transparent);

  --ink: var(--sx-dark);
  --ink-2: color-mix(in oklab, var(--sx-dark) 80%, #fff);
  --ink-3: color-mix(in oklab, var(--sx-dark) 62%, #fff);
  --teal: var(--sx-brand-lo);
  --teal-bright: var(--sx-brand);
  --cyan: color-mix(in oklab, var(--sx-bright) 78%, #000);
  --magenta: color-mix(in oklab, var(--sx-signal) 88%, #000);
  --magenta-soft: color-mix(in srgb, var(--magenta) 10%, transparent);
  --teal-soft: color-mix(in srgb, var(--sx-brand) 12%, transparent);
  --on-accent: #ffffff;
  --good: var(--sx-green);
  --warn: #b76e00;
  --shadow: rgba(18, 32, 30, .2);
  --shadow-soft: rgba(18, 32, 30, .1);
  --menubar: rgba(255, 255, 255, .5);
  --logo-accent: var(--sx-brand);
  --term-bg: color-mix(in oklab, var(--sx-dark) 62%, #000);
  --term-ink: color-mix(in oklab, var(--sx-bright) 14%, #fff);
  --film-bg: var(--sx-deep);
  --ph-line: color-mix(in srgb, var(--magenta) 55%, transparent);
  --focus: color-mix(in oklab, var(--sx-brand) 90%, #000);

  --page: color-mix(in oklab, var(--sx-brand) 4%, #f4f5f5);
  --surface: #ffffff;
  --sidebar: color-mix(in srgb, var(--sx-dark) 3.5%, transparent);
  --grp: color-mix(in srgb, var(--sx-dark) 4.5%, transparent);
  --sep: color-mix(in srgb, var(--sx-dark) 9%, transparent);

  --r-win: 18px;
  --r-card: 14px;
  --r-icon: 23%;
  --menubar-h: 34px;
  --dock-h: 78px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.35, .45, 1);
  color-scheme: light;
}

/* ---------- Dunkelmodus ---------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.sx, html:not([data-theme="light"]) body.sx-preview {
    --wall-1: var(--sx-deep); --wall-2: color-mix(in oklab, var(--sx-dark) 62%, #000);
    --wall-glow: color-mix(in srgb, var(--sx-bright) 16%, transparent); --wall-glow-2: color-mix(in srgb, var(--sx-signal) 12%, transparent);
    --contour: color-mix(in srgb, var(--sx-bright) 16%, transparent); --contour-strong: color-mix(in srgb, var(--sx-bright) 42%, transparent);
    --glass: color-mix(in srgb, var(--sx-dark) 60%, transparent); --glass-strong: color-mix(in srgb, color-mix(in oklab, var(--sx-dark) 80%, #000) 90%, transparent);
    --glass-edge: rgba(255, 255, 255, .1); --glass-hi: rgba(255, 255, 255, .14);
    --hair: color-mix(in srgb, var(--sx-light) 9%, transparent); --hair-strong: color-mix(in srgb, var(--sx-light) 18%, transparent);
    --fill: color-mix(in srgb, var(--sx-light) 5%, transparent); --fill-2: color-mix(in srgb, var(--sx-light) 9%, transparent);
    --ink: var(--sx-light); --ink-2: color-mix(in oklab, var(--sx-light) 80%, var(--sx-dark)); --ink-3: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark));
    --teal: color-mix(in oklab, var(--sx-brand) 45%, var(--sx-bright)); --teal-bright: color-mix(in oklab, var(--sx-brand) 92%, #fff);
    --cyan: var(--sx-bright); --magenta: var(--sx-signal-hi);
    --magenta-soft: color-mix(in srgb, var(--sx-signal-hi) 14%, transparent); --teal-soft: color-mix(in srgb, var(--sx-bright) 10%, transparent);
    --good: var(--sx-green-hi); --warn: #ffb547; --shadow: rgba(0, 0, 0, .55); --shadow-soft: rgba(0, 0, 0, .3);
    --menubar: color-mix(in srgb, var(--sx-deep) 45%, transparent); --logo-accent: var(--sx-brand-hi);
    --ph-line: color-mix(in srgb, var(--sx-signal-hi) 60%, transparent); --focus: var(--sx-bright);
    --page: color-mix(in oklab, var(--sx-dark) 55%, #000); --surface: color-mix(in oklab, var(--sx-dark) 78%, #000);
    --sidebar: color-mix(in srgb, var(--sx-light) 3%, transparent); --grp: color-mix(in srgb, var(--sx-light) 5.5%, transparent); --sep: color-mix(in srgb, var(--sx-light) 8%, transparent);
    color-scheme: dark;
  }
}
html[data-theme="dark"] body.sx, html[data-theme="dark"] body.sx-preview {
  --wall-1: var(--sx-deep); --wall-2: color-mix(in oklab, var(--sx-dark) 62%, #000);
  --wall-glow: color-mix(in srgb, var(--sx-bright) 16%, transparent); --wall-glow-2: color-mix(in srgb, var(--sx-signal) 12%, transparent);
  --contour: color-mix(in srgb, var(--sx-bright) 16%, transparent); --contour-strong: color-mix(in srgb, var(--sx-bright) 42%, transparent);
  --glass: color-mix(in srgb, var(--sx-dark) 60%, transparent); --glass-strong: color-mix(in srgb, color-mix(in oklab, var(--sx-dark) 80%, #000) 90%, transparent);
  --glass-edge: rgba(255, 255, 255, .1); --glass-hi: rgba(255, 255, 255, .14);
  --hair: color-mix(in srgb, var(--sx-light) 9%, transparent); --hair-strong: color-mix(in srgb, var(--sx-light) 18%, transparent);
  --fill: color-mix(in srgb, var(--sx-light) 5%, transparent); --fill-2: color-mix(in srgb, var(--sx-light) 9%, transparent);
  --ink: var(--sx-light); --ink-2: color-mix(in oklab, var(--sx-light) 80%, var(--sx-dark)); --ink-3: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark));
  --teal: color-mix(in oklab, var(--sx-brand) 45%, var(--sx-bright)); --teal-bright: color-mix(in oklab, var(--sx-brand) 92%, #fff);
  --cyan: var(--sx-bright); --magenta: var(--sx-signal-hi);
  --magenta-soft: color-mix(in srgb, var(--sx-signal-hi) 14%, transparent); --teal-soft: color-mix(in srgb, var(--sx-bright) 10%, transparent);
  --good: var(--sx-green-hi); --warn: #ffb547; --shadow: rgba(0, 0, 0, .55); --shadow-soft: rgba(0, 0, 0, .3);
  --menubar: color-mix(in srgb, var(--sx-deep) 45%, transparent); --logo-accent: var(--sx-brand-hi);
  --ph-line: color-mix(in srgb, var(--sx-signal-hi) 60%, transparent); --focus: var(--sx-bright);
  --page: color-mix(in oklab, var(--sx-dark) 55%, #000); --surface: color-mix(in oklab, var(--sx-dark) 78%, #000);
  --sidebar: color-mix(in srgb, var(--sx-light) 3%, transparent); --grp: color-mix(in srgb, var(--sx-light) 5.5%, transparent); --sep: color-mix(in srgb, var(--sx-light) 8%, transparent);
  color-scheme: dark;
}

/* ================= Oberfläche (aus dem Prototyp) ================= */

html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--wall-1); color: var(--ink);
  font: 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
/* Elementor-Kit: Seine Website-Einstellungen (Schrift, Links, Buttons, Überschriften, Felder, Bilder) gelten
   nicht für sebyOS. Das Kit lädt in der Ebene „sx-elementor“ (SebyOS_Elementor), und diese Grundwerte ohne
   Spezifität verwerfen zusätzlich, was sebyOS nicht selbst festlegt. Globale Farben und Schriften bleiben nutzbar. */
body.sx, body.sx-preview { letter-spacing: normal; word-spacing: normal; text-transform: none; }
:where(body.sx, body.sx-preview) :where(a, button, input, textarea, select, h1, h2, h3, h4, h5, h6) {
  font-family: revert; font-size: revert; font-weight: revert; font-style: revert; line-height: revert;
  letter-spacing: revert; word-spacing: revert; text-transform: revert; text-decoration: revert;
  color: revert; background-color: revert; border: revert; border-radius: revert; padding: revert; box-shadow: revert;
}
:where(body.sx, body.sx-preview) :where(img) { border: revert; border-radius: revert; opacity: revert; box-shadow: revert; filter: revert; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.tabnum { font-variant-numeric: tabular-nums; }
/* Platzhalter: Werte, die noch mit echten Zahlen gefüllt werden */
.ph { text-decoration: underline dashed var(--ph-line); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* ---------- Wallpaper ---------- */
.wallpaper { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(60% 55% at 78% 18%, var(--wall-glow), transparent 70%),
  radial-gradient(45% 50% at 12% 88%, var(--wall-glow-2), transparent 70%),
  linear-gradient(160deg, var(--wall-1), var(--wall-2)); }

/* ---------- Menüleiste ---------- */
.menubar { position: absolute; top: 0; left: 0; right: 0; height: var(--menubar-h); z-index: 600; display: flex; align-items: center; gap: 2px; padding: 0 10px;
  background: var(--menubar); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.mb-item { position: relative; height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.mb-item:hover, .mb-item[aria-expanded="true"] { background: var(--fill-2); }
.mb-logo svg { width: 30px; height: 12px; color: var(--ink); }
.mb-app { font-weight: 700; }
.menubar .spacer { flex: 1; }
.mb-status { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.menubar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.mb-cta { background: var(--magenta); color: var(--on-accent); font-weight: 600; padding: 0 12px; margin-left: 6px; }
.mb-cta:hover { background: color-mix(in srgb, var(--magenta) 86%, #000); }
.mb-icon svg { width: 16px; height: 16px; }
.mb-xray[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal); }
.menu { position: absolute; top: calc(var(--menubar-h) - 2px); min-width: 260px; padding: 6px; border-radius: 12px; z-index: 650;
  background: var(--glass-strong); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: 0 18px 50px var(--shadow); }
.menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--ink); text-decoration: none; font-size: 13.5px; text-align: left; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--teal-bright); color: #fff; outline: none; }
.menu hr { border: 0; border-top: 1px solid var(--hair); margin: 5px 6px; }
.menu .kbd { margin-left: auto; font: 12px var(--font-mono); opacity: .65; }
.menu .appicon { width: 20px; height: 20px; border-radius: 5px; box-shadow: none; }

/* ---------- Desktop-Hero ---------- */
.desk { position: absolute; top: var(--menubar-h); left: 0; right: 0; bottom: 0; z-index: 1; }
.hero { position: absolute; left: clamp(28px, 4vw, 64px); top: clamp(26px, 6vh, 72px); width: min(580px, 46%); display: grid; gap: 18px; }
.hero .eyebrow { font: 600 12.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 10px; }
.hero .eyebrow svg { width: 38px; height: 10px; color: var(--teal); }
.hero .hero-title { font-size: clamp(38px, 4.4vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -.028em; }
.hero .hero-title .kicker { display: block; font: 600 clamp(15px, 1.2vw, 18px)/1.35 var(--font-body); letter-spacing: 0; color: var(--ink-2); margin-bottom: 14px; }
.hero .hero-title em { font-style: normal; background: linear-gradient(95deg, var(--teal-bright), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .hint { font: 13px var(--font-mono); color: var(--ink-3); }
kbd, .kbdk { font: 600 12px var(--font-mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--hair-strong); background: var(--glass); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s; }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--magenta); color: var(--on-accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--magenta) 28%, transparent); }
.btn-primary:hover { background: color-mix(in srgb, var(--magenta) 86%, #000); }
.btn-glass { background: var(--glass); color: var(--ink); border-color: var(--glass-edge); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.btn-glass:hover { background: var(--glass-strong); }
.btn-ghost { background: var(--fill); color: var(--ink); border-color: var(--hair); }
.btn-ghost:hover { background: var(--fill-2); }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13.5px; border-radius: 10px; }

/* ---------- Widgets ---------- */
.widgets { position: absolute; left: clamp(28px, 4vw, 64px); bottom: calc(var(--dock-h) + 30px); display: flex; gap: 14px; }
/* Widgets wachsen mit ihrem Text (alle in einer Reihe gleich hoch). Wird es zur Überschrift hin eng,
   schaltet fitDesk() in sebyos.js sie kompakt und blendet sie notfalls aus. */
.widgets.is-compact .widget { min-height: 0; }
.widgets.is-compact :is(.w-foot, .spark, .slots) { display: none; }
.widgets.is-compact .w-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widgets.is-off { display: none; }
.widget { width: 178px; min-height: 178px; padding: 15px 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 5px; text-align: left; color: var(--ink);
  background: var(--glass); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 40px var(--shadow-soft); }
.widget:is(a, button):hover { background: var(--glass-strong); }
.w-label { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.w-big { font: 800 34px/1.02 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.w-big.tick { animation: wtick .6s ease-out; }
@keyframes wtick { 30% { color: var(--teal-bright); transform: translateY(-1px); } }
.w-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.w-foot { margin-top: auto; font-size: 11.5px; color: var(--ink-3); }
.widget svg.spark { flex: none; width: 100%; height: 38px; margin-top: auto; display: block; }
.slots { display: flex; gap: 6px; margin: 6px 0 2px; }
.slots i { flex: 1; height: 8px; border-radius: 4px; background: var(--teal-bright); }
.slots i.taken { background: var(--fill-2); }
/* Solange ein Bild lädt (oder fehlt), keinen Alt-Text oder Dateinamen zeigen. Screenreader lesen den Alt-Text weiter. */
body.sx img { color: transparent; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Desktop-Icons ---------- */
/* Raster wie am Mac: Spalten von rechts, jede von oben nach unten; reicht die Höhe nicht, beginnt links
   daneben die nächste Spalte. Ohne Skript legt das CSS-Raster sie so ab. Desk in sebyos.js setzt sie dann
   frei in die Zellen (is-free), hält Überschrift und Widgets frei und macht sie per Maus verschiebbar. */
.desk-icons { --cell-w: 100px; --cell-h: 108px; position: absolute; top: 18px; right: 16px; bottom: calc(var(--dock-h) + 22px); left: 16px; pointer-events: none;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, var(--cell-h)); grid-auto-columns: var(--cell-w); justify-content: start; justify-items: center; align-items: start; direction: rtl; }
.desk-icons > * { direction: ltr; pointer-events: auto; }
.desk-icons.is-free { display: block; }
.desk-icons.is-free .dicon { position: absolute; left: 0; top: 0; }
.desk-icons.is-anim .dicon:not(.is-drag) { transition: transform .32s var(--ease-out); }
.dicon.is-out { visibility: hidden; }
/* Beim Ziehen: Symbol hebt sich an, die Zielzelle leuchtet im Akzent. */
.dicon.is-drag { z-index: 2; cursor: grabbing; }
.dicon.is-drag .appicon { box-shadow: 0 18px 34px rgba(0, 0, 0, .34); }
.desk-icons.is-dragging .dicon:hover { background: none; }
.desk-slot { position: absolute; left: 0; top: 0; width: 96px; height: calc(var(--cell-h) - 8px); border-radius: 14px; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--teal-bright) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--teal-bright) 55%, transparent);
  transition: transform .18s var(--ease-out), opacity .18s; }
.desk-slot.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .desk-icons.is-anim .dicon, .desk-slot { transition: none !important; } }
/* Feste Spalte: Ein langes Wort wie „Bewertungen“ steht gleichmäßig über, statt das Symbol zu verschieben. */
.dicon { width: 96px; padding: 8px 4px 6px; border: 0; border-radius: 12px; background: none; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: 12.5px; font-weight: 500; text-align: center; line-height: 1.25;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; touch-action: none; }
.dicon:hover { background: var(--fill-2); }
.dicon .appicon { width: 56px; height: 56px; }
.dicon .lbl { padding: 1px 6px; border-radius: 5px; }

/* ---------- App-Icons ---------- */
.appicon { position: relative; width: 52px; height: 52px; border-radius: var(--r-icon); display: grid; place-items: center; flex: none; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .2); color: #fff; }
.appicon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 46%); pointer-events: none; }
.appicon svg { width: 56%; height: 56%; position: relative; z-index: 1; }
.appicon[data-tone="teal"] { background: linear-gradient(145deg, color-mix(in oklab, var(--sx-brand) 70%, var(--sx-bright)), var(--sx-brand-lo)); }
.appicon[data-tone="cloud"] { background: linear-gradient(150deg, var(--sx-blue), var(--sx-blue-lo) 58%, var(--sx-brand-lo)); }
.appicon[data-tone="ink"] { background: linear-gradient(145deg, color-mix(in oklab, var(--sx-dark) 85%, #fff), color-mix(in oklab, var(--sx-dark) 70%, #000)); color: var(--sx-bright); }
.appicon[data-tone="violet"] { background: linear-gradient(145deg, var(--sx-signal-hi), var(--sx-violet)); }
.appicon[data-tone="magenta"] { background: linear-gradient(145deg, color-mix(in oklab, var(--sx-signal) 75%, #fff), color-mix(in oklab, var(--sx-signal) 78%, #000)); }
.appicon[data-tone="paper"] { background: linear-gradient(160deg, #fffdf6, #e9e2d0); color: var(--sx-dark); }
.appicon[data-tone="glass"] { background: linear-gradient(160deg, #f6f9f9, #c5d4d1); color: var(--sx-dark); }
.appicon[data-tone="term"] { background: linear-gradient(160deg, color-mix(in oklab, var(--sx-dark) 90%, #fff), color-mix(in oklab, var(--sx-dark) 35%, #000)); color: var(--sx-bright); }
.appicon[data-tone="film"] { background: linear-gradient(145deg, color-mix(in oklab, var(--sx-dark) 92%, #fff), color-mix(in oklab, var(--sx-dark) 35%, #000)); color: var(--sx-signal-hi); }
.appicon[data-tone="eye"] { background: linear-gradient(145deg, color-mix(in oklab, var(--sx-bright) 70%, #fff), var(--sx-brand-lo)); color: color-mix(in oklab, var(--sx-brand) 20%, #000); }
.appicon[data-tone="phone"] { background: linear-gradient(145deg, var(--sx-green-hi), var(--sx-green)); }
.appicon[data-tone="file"] { background: linear-gradient(160deg, #ffffff, #dfe6e5); color: var(--sx-brand-lo); }
.appicon[data-tone="game"] { background: linear-gradient(145deg, color-mix(in oklab, var(--sx-bright) 80%, var(--sx-blue)), var(--sx-violet) 62%, var(--sx-signal)); }
.appicon .mono-sb { font: 800 20px var(--font-display); letter-spacing: -.03em; color: #fff; position: relative; z-index: 1; }

/* ---------- App-Logos (Symbole lg-* im Sprite) ----------
   Die Kachel ist ein Verlauf hier, das Motiv kommt aus dem Sprite und steht eingebettet in der Seite.
   --lg-play schaltet die Bewegung: immer (body.lg-always), beim Darüberfahren (lg-hover) oder nie (lg-off).
   Angehalten ruht jedes Logo in seiner Ausgangslage. */
.appicon.is-logo svg { width: 100%; height: 100%; }
.appicon[data-logo="flow"] { background: linear-gradient(150deg,#22CDB8,#0B7067); }
.appicon[data-logo="cloud"] { background: linear-gradient(150deg,#62C8FF,#1A6FB8); }
.appicon[data-logo="apps"] { background: linear-gradient(150deg,#9A6BFF,#4C1DB0); }
.appicon[data-logo="web"] { background: linear-gradient(150deg,#FFB547,#F2416B); }
.appicon[data-logo="work"] { background: linear-gradient(160deg,#F6FAFA,#CFDEDB); }
.appicon[data-logo="know"] { background: linear-gradient(150deg,#26A9DB,#0B5A85); }
.appicon[data-logo="me"] { background: linear-gradient(150deg,#3E3944,#18151B); }
.appicon[data-logo="film"] { background: linear-gradient(150deg,#FF5C8E,#C3003D); }
.appicon[data-logo="game"] { background: linear-gradient(150deg,#A15CF6,#E0115F); }
.appicon[data-logo="term"] { background: linear-gradient(150deg,#3E3944,#121014); }
.appicon[data-logo="chat"] { background: linear-gradient(150deg,#FF6A97,#D6004A); }
.appicon[data-logo="trash"] { background: linear-gradient(160deg,#F7FAFA,#C9D6D4); }
.appicon[data-logo="call"] { background: linear-gradient(150deg,#45DFA5,#0C7A54); }
.appicon[data-logo="llms"] { background: linear-gradient(160deg,#FFFFFF,#DCE6E4); }
.appicon[data-logo="sitemap"] { background: linear-gradient(150deg,#2EC4B6,#0E5E86); }
.appicon[data-logo="ai"] { background: linear-gradient(150deg,#8F6BFF,#14A99A); }
.appicon[data-logo="motion"] { background: linear-gradient(150deg,#FF9A5A,#6D3BEF); }
.appicon[data-logo="reviews"] { background: linear-gradient(150deg,#FFCF5A,#E8840F); }
.appicon[data-logo="all"] { background: linear-gradient(150deg,#3E3944,#18151B); }
.appicon[data-logo="search"] { background: linear-gradient(150deg,#62C8FF,#1A6FB8); }
.appicon[data-logo="xray"] { background: linear-gradient(150deg,#16B3A2,#065750); }
.appicon[data-logo="theme"] { background: linear-gradient(135deg,#FFE9A8 0 50%,#26222B 50% 100%); }
.appicon[data-logo="power"] { background: linear-gradient(150deg,#3E3944,#121014); }
body.lg-always { --lg-play: running; }
:is(a, button, .dicon, .m-app, .aa-app, .s-item):is(:hover, :focus-visible, :active) .appicon, .appicon:hover { --lg-play: running; }
body.lg-off .appicon { --lg-play: paused !important; }
@media (prefers-reduced-motion: reduce) { .appicon { --lg-play: paused !important; } }
.lg * { transform-box: fill-box; transform-origin: center; }
.lg .lg-vb { transform-box: view-box; }
.lg .lg-clap { transform: rotate(-16deg); }
.lg :is(.lg-flipp, .lg-ball) { opacity: 0; }
.lg .lg-spin, .lg .lg-rays { animation-name: lg-spin; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite; }
.lg .lg-spinr { animation: lg-spinr 7.2s linear infinite; }
.lg .lg-flick { animation: lg-flick 1.6s ease-in-out infinite; }
.lg :is(.lg-led, .lg-blink) { animation: lg-blink 1.2s steps(2) infinite; }
.lg .lg-led + .lg-led { animation-delay: .6s; }
.lg .lg-up { animation: lg-up 1.6s ease-in-out infinite; }
.lg .lg-pop { animation: lg-pop 2.4s ease-in-out infinite; }
.lg .lg-cur { animation: lg-cur 2.6s ease-in-out infinite; }
.lg .lg-press { animation: lg-press 2.6s ease-in-out infinite; }
.lg .lg-paper { animation: lg-paper 2.4s ease-in-out infinite; }
.lg .lg-flipp { animation: lg-flip 3s ease-in-out infinite; }
.lg :is(.lg-hi, .lg-moon) { animation: lg-wave 2.2s ease-in-out infinite; }
.lg .lg-clap { animation: lg-clap 1.8s ease-in-out infinite; }
.lg .lg-btn { animation: lg-btn 1.6s ease-in-out infinite; }
.lg .lg-dot { animation: lg-bounce 1.2s ease-in-out infinite; }
.lg .lg-lid { animation: lg-lid 2.6s ease-in-out infinite; }
.lg .lg-ball { animation: lg-drop 2.6s ease-in infinite; }
.lg .lg-ring { animation: lg-ring 2s ease-in-out infinite; }
.lg .lg-wv { animation: lg-wv 1s ease-in-out infinite; }
.lg .lg-tw { animation: lg-tw 2.4s ease-in-out infinite; }
.lg .lg-node { animation: lg-flick 2.4s ease-in-out infinite; }
.lg .lg-sq { animation: lg-sq 2.4s ease-in-out infinite; }
.lg .lg-seek { animation: lg-seek 2.6s ease-in-out infinite; }
.lg .lg-scan { animation: lg-scan 2.4s ease-in-out infinite; }
.lg .lg-glow { animation: lg-glow 2s ease-in-out infinite; }
.lg .lg-arc { animation: lg-arc 2.8s linear infinite; }
.lg .lg-ph { animation: lg-ph 2.8s linear infinite; }
.lg .lg-rate { animation: lg-rate 2.4s ease-in-out infinite; }
.lg .lg-rays { animation-duration: 10s; }
/* Nach den animation-Kurzschreibweisen, die den Zustand sonst auf „läuft“ zurücksetzen. */
.lg [class*="lg-"] { animation-play-state: var(--lg-play, paused); }
/* Die Vorlagen im Sprite selbst sind unsichtbar und brauchen keine Bewegung. */
symbol.lg [class*="lg-"] { animation: none; }
@keyframes lg-spin { to { transform: rotate(360deg); } }
@keyframes lg-spinr { to { transform: rotate(-360deg); } }
@keyframes lg-flick { 50% { opacity: .55; } }
@keyframes lg-blink { 50% { opacity: .2; } }
@keyframes lg-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes lg-pop { 0%, 30%, 100% { transform: scale(1); } 15% { transform: scale(.55); } }
@keyframes lg-cur { 0%, 55%, 100% { transform: translate(0, 0); } 20% { transform: translate(6px, 7px); } }
@keyframes lg-press { 0%, 52% { opacity: 1; } 60% { opacity: .35; } 70%, 100% { opacity: 1; } }
@keyframes lg-paper { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes lg-flip { 0%, 8% { transform: scaleX(1); opacity: 0; } 10% { opacity: 1; } 55% { transform: scaleX(-1); opacity: 1; } 62%, 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes lg-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(7deg); } }
@keyframes lg-clap { 0%, 35%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(0); } 62% { transform: rotate(-16deg); } }
@keyframes lg-btn { 0%, 30%, 100% { transform: scale(1); } 15% { transform: scale(.5); } }
@keyframes lg-bounce { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px); } }
@keyframes lg-lid { 0%, 12% { transform: rotate(0); } 28%, 58% { transform: rotate(-30deg); } 74%, 100% { transform: rotate(0); } }
@keyframes lg-drop { 0%, 24% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 56% { transform: translateY(15px); opacity: 1; } 62%, 100% { transform: translateY(17px); opacity: 0; } }
@keyframes lg-ring { 0%, 50%, 100% { transform: rotate(0); } 6%, 18%, 30%, 42% { transform: rotate(-9deg); } 12%, 24%, 36% { transform: rotate(9deg); } }
@keyframes lg-wv { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes lg-tw { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.72) rotate(45deg); } }
@keyframes lg-sq { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(.6); } }
@keyframes lg-seek { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2.5px, -2px); } 50% { transform: translate(0, -3.5px); } 75% { transform: translate(-2.5px, -1px); } }
@keyframes lg-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }
/* Motion Design: Ball folgt der Bahn (Parabel 26 breit, 13 hoch), Abspielkopf läuft mit. Steht die Bewegung, liegt der Ball am Start. */
@keyframes lg-arc { 0% { transform: translate(0, 0); opacity: 1; } 11% { transform: translate(5.2px, -8.3px); } 22% { transform: translate(10.4px, -12.5px); } 27.5% { transform: translate(13px, -13px); } 33% { transform: translate(15.6px, -12.5px); } 44% { transform: translate(20.8px, -8.3px); } 55% { transform: translate(26px, 0) scale(1); } 59% { transform: translate(26px, .8px) scale(1.25, .72); } 64%, 86% { transform: translate(26px, 0) scale(1); opacity: 1; } 92%, 100% { transform: translate(26px, 0); opacity: 0; } }
@keyframes lg-ph { 0% { transform: translateX(0); opacity: 1; } 55%, 86% { transform: translateX(26px); opacity: 1; } 92%, 100% { transform: translateX(26px); opacity: 0; } }
/* Bewertungen: die Sterne leuchten nacheinander auf. */
@keyframes lg-rate { 0%, 36%, 100% { transform: scale(1) rotate(0); } 12% { transform: scale(1.32) rotate(14deg); } 24% { transform: scale(.94) rotate(0); } }
@keyframes lg-glow { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.06); } }

/* ---------- Dock ---------- */
.dock-wrap { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 500; display: flex; justify-content: center; pointer-events: none; }
.dock { pointer-events: auto; display: flex; align-items: flex-end; gap: 7px; height: 72px; padding: 9px 11px; border-radius: 26px;
  background: var(--glass); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 50px var(--shadow); }
.dock .sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--hair-strong); }
.dock a { position: relative; display: block; width: 52px; height: 52px; flex: none; text-decoration: none; }
.dock a .appicon { width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .14s ease-out; }
.dock .tip { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  background: var(--glass-strong); color: var(--ink); border: 1px solid var(--glass-edge); box-shadow: 0 6px 20px var(--shadow-soft); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 2; }
.dock a:hover .tip, .dock a:focus-visible .tip { opacity: 1; }
.dock a.running::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink-2); }
.dock a.bounce .appicon { animation: bounce .45s var(--ease-out) 2; }
@keyframes bounce { 50% { transform: translateY(-14px); } }

/* ---------- Mitteilungen ---------- */
.toasts { position: absolute; top: calc(var(--menubar-h) + 12px); right: 14px; z-index: 700; display: grid; gap: 10px; width: 340px; }
.toast { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 14px; border-radius: 18px; cursor: pointer; text-align: left; border: 1px solid var(--glass-edge); color: var(--ink);
  background: var(--glass-strong); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 16px 44px var(--shadow);
  animation: toastIn .45s var(--ease-spring); }
.toast.out { animation: toastOut .3s ease-in forwards; }
.toast .appicon { width: 38px; height: 38px; border-radius: 10px; }
.t-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); }
.t-title { font-weight: 700; font-size: 14px; }
.t-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
/* ---------- Fenster ---------- */
.windows { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.win { position: absolute; display: flex; flex-direction: column; pointer-events: auto; min-width: 360px; min-height: 260px; border-radius: var(--r-win); overflow: hidden;
  background: var(--glass-strong); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 30px 80px var(--shadow), 0 2px 8px var(--shadow-soft);
  transition: box-shadow .2s; }
.win.inactive { box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 40px var(--shadow-soft); }
.win.inactive .win-bar { opacity: .72; }
.win.anim { transition: left .38s var(--ease-out), top .38s var(--ease-out), width .38s var(--ease-out), height .38s var(--ease-out), transform .38s var(--ease-out), opacity .3s; }
.win-bar { flex: none; height: 46px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 8px 0 14px; cursor: grab; user-select: none; border-bottom: 1px solid var(--hair); }
.win-bar:active { cursor: grabbing; }
.win-name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; min-width: 0; }
.win-name .appicon { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.win-url { justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px var(--font-mono); color: var(--ink-3); padding: 3px 10px; border-radius: 8px; background: var(--fill); display: inline-flex; align-items: center; gap: 6px; }
.win-url svg { width: 12px; height: 12px; color: var(--good); }
.win-url b { color: var(--ink); font-weight: 600; }
/* Immer in der rechten Spalte, auch wenn die Adresszeile fehlt (Browser-Fenster). */
.win-ctl { display: flex; gap: 2px; grid-column: 3; justify-self: end; }
.win-ctl button { width: 34px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); display: grid; place-items: center; }
.win-ctl button svg { width: 15px; height: 11px; }
.win-ctl button:hover { background: var(--fill-2); color: var(--ink); }
.win-ctl button[data-act="close"]:hover { background: var(--magenta); color: #fff; }
.win-body { flex: 1; overflow: auto; container-type: inline-size; overscroll-behavior: contain; }
.win-body::-webkit-scrollbar { width: 10px; }
.win-body::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* ---------- App-Inhalte (gemeinsam) ---------- */
.app { padding: 28px 32px 34px; display: grid; gap: 28px; }
.app-head { display: grid; gap: 12px; max-width: 70ch; }
.eyebrow { font: 600 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.app h1 { font-size: clamp(27px, 3.4cqi, 38px); line-height: 1.08; font-weight: 800; letter-spacing: -.022em; }
.app h2 { font-size: 20px; line-height: 1.2; font-weight: 700; }
.app h3 { font-size: 16px; line-height: 1.3; font-weight: 700; }
.lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.55; max-width: 62ch; }
.muted { color: var(--ink-3); font-size: 13.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.split > * { min-width: 0; }
@container (max-width: 700px) { .split { grid-template-columns: minmax(0, 1fr); } .app { padding: 22px 20px 28px; } }
.card { border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--fill); padding: 18px; }
.section { display: grid; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font: 500 12.5px var(--font-mono); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hair-strong); color: var(--ink-2); background: var(--glass); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; line-height: 1.45; }
.checks li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--teal); }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--hair); border-radius: 12px; background: var(--fill); }
.faq summary { cursor: pointer; list-style: none; padding: 13px 16px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 18px/1 var(--font-mono); color: var(--teal); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 16px 14px; color: var(--ink-2); line-height: 1.55; }
.kurz { border-radius: 14px; padding: 14px 16px; background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); display: grid; gap: 6px; }
.kurz .k-label { font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; background: var(--fill); display: grid; gap: 2px; }
.stat b { font: 800 26px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--ink-3); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--teal-bright); padding: 10px 2px 0; display: grid; gap: 3px; font-size: 13.5px; color: var(--ink-2); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 700 12px var(--font-mono); color: var(--teal); }
.steps li b { color: var(--ink); font-size: 14.5px; }

/* Automatisierung: Flow */
.flow { position: relative; border-radius: 16px; border: 1px solid var(--hair); background: var(--fill); padding: 14px; display: grid; gap: 10px; }
.flow svg { width: 100%; height: auto; display: block; overflow: visible; }
.flow .node rect { fill: var(--glass-strong); stroke: var(--hair-strong); }
.flow .node.hot rect { stroke: var(--teal-bright); }
.flow .node text { fill: var(--ink); font: 600 14px var(--font-body); }
.flow .node text.sub { fill: var(--ink-3); font: 500 11.5px var(--font-mono); }
.flow .edge { stroke: var(--hair-strong); stroke-width: 2; fill: none; stroke-dasharray: 4 5; }
.flow .packet { fill: var(--teal-bright); filter: drop-shadow(0 0 6px var(--cyan)); }
.flow-log { font: 12.5px/1.6 var(--font-mono); color: var(--ink-2); height: 84px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.flow-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-log .ok { color: var(--good); }

/* KI: nächstes Wort */
.pd-text { margin: 0; min-height: 2.9em; font: 600 clamp(17px, 2.2vw, 21px)/1.45 var(--font-display); color: var(--ink); }
.pd-next { display: inline-block; color: var(--teal-bright); }
.pd-next.in { animation: pd-in .35s ease-out; }
.pd-cur { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--teal-bright); animation: pd-blink 1s steps(2) infinite; }
.pd-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-bars li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 3.4em; align-items: center; gap: 12px; font: 500 13px/1.3 var(--font-mono); color: var(--ink-2); }
.pd-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-bar { height: 10px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.pd-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink-3); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.pd-p { text-align: right; opacity: 0; transition: opacity .4s .6s; }
.pd-bars.grown .pd-p { opacity: 1; }
.pd-bars li.on { color: var(--ink); }
.pd-bars li.on .pd-bar i { background: var(--teal-bright); box-shadow: 0 0 10px var(--cyan); }
@keyframes pd-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes pd-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pd-cur, .pd-next.in { animation: none; } .pd-bar i, .pd-p { transition: none; } }

/* Motion Design: Videobild und Zeitleiste */
.stage.motion { gap: 12px; }
.mo-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; container-type: inline-size; color: #fff; background: radial-gradient(120% 95% at 18% 8%, color-mix(in srgb, var(--sx-violet) 38%, #120e18), #0c0a10 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mo-shape { position: absolute; left: 75%; top: 47%; width: 30cqi; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(150deg, #FF9A5A, #6D3BEF); box-shadow: 0 0 9cqi rgba(255, 138, 90, .32); transform: translate(-50%, -50%); }
.mo-shape::after { content: ""; position: absolute; inset: 22%; border-radius: inherit; border: .7cqi solid rgba(255, 255, 255, .55); }
.mo-copy { position: absolute; left: 7cqi; top: 27%; display: grid; gap: 1.8cqi; max-width: 56cqi; }
.mo-h { font: 800 6.6cqi/1.04 var(--font-display); letter-spacing: -.02em; }
.mo-s { font: 500 3.2cqi/1.3 var(--font-body); color: rgba(255, 255, 255, .78); }
.mo-logo { position: absolute; left: 7cqi; bottom: 9cqi; width: 14cqi; height: auto; color: #fff; transform-origin: left center; }
.mo-tc { position: absolute; right: 3cqi; top: 3cqi; font: 500 2.4cqi/1 var(--font-mono); color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
.mo-tl { --lbw: 58px; position: relative; display: grid; gap: 6px; font: 500 11.5px/1 var(--font-mono); color: var(--ink-3); }
.mo-ruler { position: relative; height: 13px; margin-left: var(--lbw); }
.mo-ruler span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mo-ruler span:first-child { transform: none; }
.mo-ruler span:last-child { transform: translateX(-100%); }
.mo-track { display: grid; grid-template-columns: var(--lbw) minmax(0, 1fr); align-items: center; }
.mo-lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; color: var(--ink-2); }
.mo-lane { position: relative; height: 20px; border-radius: 6px; background: var(--hair); }
.mo-seg { position: absolute; top: 7px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--teal-bright) 42%, transparent); }
.mo-seg.out { background: color-mix(in srgb, var(--sx-signal-hi, #ff6a97) 38%, transparent); }
.mo-key { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 2px; background: var(--ink-3); transform: translate(-50%, -50%) rotate(45deg); transition: background .2s, box-shadow .2s; }
.mo-key.hit { background: var(--teal-bright); box-shadow: 0 0 8px var(--cyan); }
.mo-head { position: absolute; top: 0; bottom: 0; left: calc(var(--lbw) + (100% - var(--lbw)) * var(--p, 0)); width: 2px; margin-left: -1px; border-radius: 1px; background: #FFD45C; pointer-events: none; }
.mo-head::before { content: ""; position: absolute; top: -3px; left: 50%; width: 10px; height: 8px; transform: translateX(-50%); background: #FFD45C; clip-path: polygon(0 0, 100% 0, 50% 100%); }
@container (max-width: 520px) { .mo-tl { --lbw: 44px; font-size: 10.5px; } .mo-lane { height: 18px; } .mo-seg { top: 6px; } }
@media (prefers-reduced-motion: reduce) { .mo-key { transition: none; } }
.calc { display: grid; gap: 14px; }
.calc label { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.calc .row { display: flex; justify-content: space-between; gap: 10px; }
.calc output { font: 700 14px var(--font-mono); color: var(--ink); }
.calc input[type=range] { width: 100%; accent-color: var(--teal-bright); }
.calc .result { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--hair); }
.calc .result b { font: 800 30px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--teal); font-variant-numeric: tabular-nums; }

/* Cloud */
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--hair); border-radius: 14px; padding: 13px 14px; background: var(--fill); display: grid; gap: 4px; min-width: 0; }
.tile .t-lab { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.tile .t-val { font: 800 22px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.tile svg { width: 100%; height: 34px; display: block; }
.tile.wide { grid-column: 1 / -1; }
.deploy { font: 12.5px/1.65 var(--font-mono); background: var(--term-bg); color: var(--term-ink); border-radius: 12px; padding: 12px 14px; height: 132px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.deploy .ok { color: var(--sx-green-hi); } .deploy .dim { color: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark)); } .deploy .acc { color: var(--sx-bright); }
.map-de { width: 100%; height: auto; display: block; }
.map-de path { fill: var(--fill-2); stroke: var(--hair-strong); }
.map-de circle.dc { fill: var(--teal-bright); }
.map-de circle.ring { fill: none; stroke: var(--teal-bright); animation: ring 2.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
/* Europakarte: EU-Länder hervorgehoben, Länder mit Rechenzentrum oder Standort in der Markenfarbe */
.map-eu { -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 5%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 5%, #000 93%, transparent); mask-composite: intersect; }
.map-eu path { stroke-width: 1.2; stroke-linejoin: round; }
.map-eu path.eu { fill: color-mix(in srgb, var(--ink) 13%, transparent); stroke: color-mix(in srgb, var(--ink) 30%, transparent); }
.map-eu path.nb { fill: color-mix(in srgb, var(--fill) 50%, transparent); stroke: var(--hair); }
.map-eu path.on { fill: color-mix(in srgb, var(--teal-bright) 26%, transparent); stroke: color-mix(in srgb, var(--teal-bright) 70%, transparent); }

/* App-Entwicklung: Phone */
.phone-stage { display: grid; place-items: center; padding: 8px 0; }
.phone { width: 236px; height: 480px; border-radius: 40px; padding: 10px; background: #111014; box-shadow: 0 0 0 2px color-mix(in oklab, var(--sx-dark) 85%, #fff), 0 26px 60px var(--shadow); position: relative; }
.phone .scr { width: 100%; height: 100%; border-radius: 31px; overflow: hidden; background: #f6f8f8; color: var(--sx-dark); display: flex; flex-direction: column; position: relative; }
.phone .island { position: absolute; top: 9px; left: 50%; width: 78px; height: 22px; margin-left: -39px; border-radius: 12px; background: #000; z-index: 3; }
.phone .p-top { padding: 40px 16px 10px; display: grid; gap: 2px; }
.phone .p-top small { font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sx-brand-lo); }
.phone .p-top b { font: 800 19px var(--font-display); }
.phone .p-grid { padding: 6px 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.phone .shot { aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(140deg, #d9ece8, #b8d6d0); display: grid; place-items: end start; padding: 6px 7px; font: 600 9.5px var(--font-body); color: #0b3d37; position: relative; overflow: hidden; }
.phone .shot.empty { background: repeating-linear-gradient(45deg, #eef2f2 0 6px, #e4eaea 6px 12px); color: #6c6672; border: 1.5px dashed #b9c6c4; }
.phone .shot.flash::before { content: ""; position: absolute; inset: 0; background: #fff; animation: flash .6s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.phone .p-btn { margin: auto 12px 14px; height: 40px; border-radius: 12px; background: var(--sx-brand-lo); color: #fff; font: 700 13px var(--font-body); display: grid; place-items: center; }
.phone .p-tag { position: absolute; bottom: 64px; left: 12px; right: 12px; padding: 7px 10px; border-radius: 10px; background: var(--sx-dark); color: #fff; font: 600 11px var(--font-body); display: flex; gap: 6px; align-items: center; opacity: 0; transform: translateY(6px); transition: .3s; }
.phone .p-tag.show { opacity: 1; transform: none; }

/* Webseiten: Browser + Lighthouse */
.browser { border-radius: 14px; overflow: hidden; border: 1px solid var(--hair-strong); background: var(--glass-strong); box-shadow: 0 16px 40px var(--shadow-soft); }
.browser .b-bar { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--hair); }
.browser .b-bar svg { width: 34px; height: 9px; color: var(--ink-3); }
.browser .b-url { flex: 1; font: 12px var(--font-mono); color: var(--ink-3); background: var(--fill); border-radius: 6px; padding: 3px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser .b-page { padding: 18px; display: grid; gap: 10px; min-height: 180px; background: linear-gradient(160deg, color-mix(in srgb, var(--teal-bright) 10%, transparent), transparent 60%); }
.browser .sk { height: 10px; border-radius: 6px; background: var(--fill-2); }
.browser .sk.h { height: 22px; width: 70%; background: var(--hair-strong); }
.browser .sk.btn { width: 110px; height: 26px; background: var(--magenta); opacity: .85; }
.lh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lh .g { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--ink-2); }
.lh svg { width: 64px; height: 64px; }
.lh .track { fill: none; stroke: var(--fill-2); stroke-width: 6; }
.lh .val { fill: none; stroke: var(--good); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.4s var(--ease-out); }
.lh text { fill: var(--ink); font: 800 17px var(--font-display); }
@container (max-width: 460px) { .lh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.refs { display: grid; gap: 8px; }
.ref { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--fill); text-decoration: none; color: var(--ink); }
.ref:hover { border-color: var(--teal-bright); }
.ref small { color: var(--ink-3); }
/* Projekte (Finder-artig) */
.finder { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 100%; }
.finder aside { border-right: 1px solid var(--hair); padding: 16px 10px; display: grid; align-content: start; gap: 2px; background: var(--fill); }
.finder aside .f-h { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 4px 10px 8px; }
.finder aside button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); }
.finder aside button[aria-pressed="true"] { background: var(--fill-2); font-weight: 600; }
.finder .f-main { padding: 20px 22px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.proj { border: 1px solid var(--hair); border-radius: 14px; background: var(--glass-strong); padding: 12px; display: grid; gap: 8px; text-align: left; color: var(--ink); }
.proj:hover, .proj[aria-pressed="true"] { border-color: var(--teal-bright); box-shadow: 0 0 0 3px var(--teal-soft); }
.proj .thumb { aspect-ratio: 16 / 10; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 800 15px var(--font-display); letter-spacing: -.01em; }
.proj b { font-size: 14px; } .proj small { color: var(--ink-3); font-size: 12px; }
.proj.new .thumb { background: repeating-linear-gradient(45deg, var(--fill) 0 8px, var(--fill-2) 8px 16px); color: var(--ink-3); border: 1.5px dashed var(--hair-strong); font-size: 26px; }
.quicklook { border-radius: 14px; border: 1px solid var(--hair); background: var(--fill); padding: 16px 18px; display: grid; gap: 8px; }
@container (max-width: 560px) { .finder { grid-template-columns: minmax(0, 1fr); } .finder aside { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--hair); } .finder aside .f-h { display: none; } }

/* Über mich */
.about { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; align-items: start; }
.about .portrait { width: 200px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, var(--sx-bright), var(--sx-brand-lo) 55%, var(--sx-dark)); color: #fff; font: 800 64px var(--font-display); letter-spacing: -.04em; box-shadow: 0 20px 50px var(--shadow); }
.about .portrait small { position: absolute; bottom: 26px; font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: 14px; }
.specs dt { color: var(--ink-3); text-align: right; font-weight: 500; }
.specs dd { margin: 0; }
.name-story { font: 700 13px var(--font-mono); letter-spacing: .06em; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.name-story span { padding: 2px 6px; border-radius: 6px; background: var(--fill-2); }
.name-story span.hl { background: var(--teal-soft); color: var(--teal); }
@container (max-width: 620px) { .about { grid-template-columns: minmax(0, 1fr); justify-items: start; } .about .portrait { width: 140px; font-size: 46px; } .specs dt { text-align: left; } }

/* Wissen (Notizen) */
.notes { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100%; }
.notes .n-list { border-right: 1px solid var(--hair); background: var(--fill); padding: 10px; display: grid; align-content: start; gap: 4px; }
.notes .n-list button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 10px; display: grid; gap: 2px; color: var(--ink); }
.notes .n-list button[aria-pressed="true"] { background: color-mix(in srgb, var(--teal-bright) 18%, transparent); }
.notes .n-list b { font-size: 13.5px; line-height: 1.3; } .notes .n-list small { font-size: 11.5px; color: var(--ink-3); }
.notes article { padding: 26px 30px 34px; display: grid; gap: 16px; align-content: start; max-width: 74ch; min-width: 0; }
.notes article .meta { font: 12.5px var(--font-mono); color: var(--ink-3); }
.notes article p { line-height: 1.65; color: var(--ink-2); }
.notes table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.notes th, .notes td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.notes th { font: 600 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.table-wrap { overflow-x: auto; }
@container (max-width: 640px) { .notes { grid-template-columns: minmax(0, 1fr); } .notes .n-list { border-right: 0; border-bottom: 1px solid var(--hair); } .notes article { padding: 20px; } }

/* Terminal */
.term { background: var(--term-bg); color: var(--term-ink); font: 14px/1.55 var(--font-mono); padding: 14px 16px; min-height: 100%; cursor: text; }
.term .out { white-space: pre-wrap; word-break: break-word; }
.term .line { display: flex; gap: 8px; align-items: baseline; }
.term .ps { color: var(--sx-bright); white-space: nowrap; }
.term input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: inherit; caret-color: var(--sx-bright); padding: 0; }
.term .c-acc { color: var(--sx-bright); } .term .c-mag { color: var(--sx-signal-hi); } .term .c-dim { color: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark)); } .term .c-ok { color: var(--sx-green-hi); } .term .c-b { color: #fff; font-weight: 700; }

/* Kontakt (Chat) */
.chat { display: flex; flex-direction: column; min-height: 100%; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.chat-head .av { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--sx-bright), var(--sx-brand-lo) 60%, var(--sx-dark)); color: #fff; display: grid; place-items: center; font: 800 15px var(--font-display); flex: none; }
.chat-head b { display: block; font-size: 14.5px; } .chat-head small { color: var(--ink-3); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.chat-log { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 18px; font-size: 14.5px; line-height: 1.42; animation: msgIn .3s var(--ease-spring); }
.msg.in { align-self: flex-start; background: var(--fill-2); border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: var(--teal-bright); color: #fff; border-bottom-right-radius: 6px; }
.msg.sys { align-self: center; background: none; color: var(--ink-3); font-size: 12.5px; text-align: center; max-width: 92%; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--fill-2); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dots 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes msgIn { from { transform: translateY(8px) scale(.96); opacity: 0; } }
.qr { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; padding: 0 18px 12px; }
.qr button { border: 1.5px solid var(--teal-bright); color: var(--teal); background: transparent; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; }
.qr button:hover { background: var(--teal-bright); color: #fff; }
.chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hair); }
.chat-input input { flex: 1; min-width: 0; height: 40px; border-radius: 20px; border: 1px solid var(--hair-strong); background: var(--glass); padding: 0 16px; outline: none; }
.chat-input input:focus { border-color: var(--teal-bright); }
.chat-input button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--magenta); color: #fff; display: grid; place-items: center; }
.chat-input button svg { width: 17px; height: 17px; }
.direct { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 18px 16px; font-size: 13px; color: var(--ink-3); }
.direct .mono { color: var(--ink); user-select: all; }

/* Film */
.film-app { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 100%; }
.film-main { padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--film-bg); }
.player .fs { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; color: var(--sx-light); font-family: var(--font-body); }
.f-ctl { display: flex; align-items: center; gap: 10px; }
.f-ctl button { height: 34px; min-width: 34px; border-radius: 10px; border: 1px solid var(--hair); background: var(--fill); display: grid; place-items: center; padding: 0 10px; }
.f-ctl button svg { width: 15px; height: 15px; }
.f-ctl .f-time { font: 600 12.5px var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 86px; text-align: right; }
.scrub { position: relative; flex: 1; height: 26px; cursor: pointer; }
.scrub .rail { position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--fill-2); }
.scrub .prog { position: absolute; top: 11px; left: 0; height: 4px; border-radius: 2px; background: var(--magenta); }
.scrub .tick { position: absolute; top: 7px; width: 2px; height: 12px; border-radius: 1px; background: var(--hair-strong); }
.film-side { border-left: 1px solid var(--hair); padding: 14px 10px; display: grid; align-content: start; gap: 4px; background: var(--fill); }
.film-side .f-h { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 2px 8px 6px; }
.film-side button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 10px; display: grid; gap: 1px; color: var(--ink); }
.film-side button.on { background: var(--magenta-soft); }
.film-side b { font-size: 13.5px; } .film-side small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.film-side .t { font: 600 11.5px var(--font-mono); color: var(--magenta); }
@container (max-width: 720px) { .film-app { grid-template-columns: minmax(0, 1fr); } .film-side { border-left: 0; border-top: 1px solid var(--hair); } }
.saver { position: absolute; inset: 0; z-index: 950; background: #000; display: grid; place-items: center; cursor: none; }
.saver .player { width: min(100%, calc(100vh * 16 / 9)); border-radius: 0; }
.saver .saver-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font: 12px var(--font-mono); letter-spacing: .08em; color: rgba(255, 255, 255, .4); text-transform: uppercase; }

/* Papierkorb + Textdatei */
.trash-list { display: grid; gap: 8px; }
.trash-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--fill); transition: .4s var(--ease-out); }
.trash-item .ficon { width: 36px; height: 44px; border-radius: 6px; display: grid; place-items: end center; padding-bottom: 5px; color: #fff; font: 700 9px var(--font-mono); }
.trash-item.gone { opacity: 0; transform: scale(.8) translateY(20px); }
pre.txt { margin: 0; padding: 20px 22px; font: 13.5px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-word; color: var(--ink); }
pre.txt .h { color: var(--teal); font-weight: 700; } pre.txt .q { color: var(--ink-3); } pre.txt a { color: var(--teal); }

/* Sitemap */
.sm { padding: 22px 24px 28px; }
.sm-head h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.sm-head .muted { margin: 0; }
.sm-meta { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; font: 13px var(--font-mono); color: var(--ink-3); }
.sm-grp h2 { margin: 20px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sm-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: 12px; background: var(--fill); overflow: hidden; }
.sm-list li { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--hair); }
.sm-list li:first-child { border-top: 0; }
.sm-list a { flex: 1; min-width: 0; display: grid; gap: 1px; color: var(--ink); text-decoration: none; }
.sm-list a b { font-size: 14px; font-weight: 600; }
.sm-list a small { font: 12px var(--font-mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-list a:hover b { color: var(--teal); }
.sm-list time { font: 12px var(--font-mono); color: var(--ink-3); white-space: nowrap; }

/* ---------- Suche (⌘K) ---------- */
.search-ov { position: absolute; inset: 0; z-index: 800; background: color-mix(in srgb, var(--wall-1) 30%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; justify-items: center; align-items: start; padding-top: 14vh; }
.search { width: min(640px, calc(100% - 32px)); border-radius: 20px; overflow: hidden; background: var(--glass-strong); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: 0 30px 90px var(--shadow); animation: pop .22s var(--ease-spring); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.search .s-in { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--hair); }
.search .s-in svg { width: 20px; height: 20px; color: var(--ink-3); }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 19px; }
.search .s-res { max-height: 50vh; overflow: auto; padding: 8px; display: grid; gap: 2px; }
.search .s-grp { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 4px; }
.search .s-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 0; background: none; text-align: left; color: var(--ink); }
.search .s-item .appicon { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
.search .s-item b { font-size: 14px; font-weight: 600; display: block; } .search .s-item small { color: var(--ink-3); font-size: 12.5px; display: block; line-height: 1.35; }
.search .s-item.act { background: var(--teal-bright); color: #fff; } .search .s-item.act small { color: rgba(255, 255, 255, .85); }
.search .s-foot { padding: 8px 16px; border-top: 1px solid var(--hair); font: 12px var(--font-mono); color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Crawler-Ansicht (Röntgen) ---------- */
.xray-panel { position: absolute; top: calc(var(--menubar-h) + 10px); right: 10px; bottom: 96px; width: 360px; z-index: 550; border-radius: 18px; overflow: auto;
  background: var(--glass-strong); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); border: 1px solid var(--glass-edge); box-shadow: 0 24px 70px var(--shadow);
  padding: 16px 18px; display: grid; gap: 14px; align-content: start; font-size: 13.5px; animation: slideIn .35s var(--ease-out); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }
/* Kopf mit Schließen-Knopf; bleibt beim Scrollen im Panel stehen. */
.xray-panel .x-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -16px -18px 0; padding: 14px 12px 10px 18px; background: var(--glass-strong); border-radius: 18px 18px 0 0; }
.xray-panel .x-close { flex: none; width: 32px; height: 30px; border: 0; border-radius: 8px; background: var(--fill); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.xray-panel .x-close:hover { background: var(--magenta); color: #fff; }
.xray-panel .x-close svg { width: 14px; height: 11px; }
.xray-inline .x-head { position: static; margin: 0; padding: 0; background: none; }
.menu button[data-action="xray"][aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--teal); font-weight: 700; }
.dicon.is-on .appicon { box-shadow: 0 0 0 3px var(--teal-bright), 0 6px 16px rgba(0, 0, 0, .2); }
.xray-panel h2 { font-size: 17px; }
.xray-panel .x-sec { display: grid; gap: 6px; }
.xray-panel .x-lab { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.xray-panel code, .xray-panel pre { font: 12.5px/1.5 var(--font-mono); }
.xray-panel pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--term-bg); color: var(--term-ink); overflow-x: auto; }
.x-serp { border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; background: var(--glass); display: grid; gap: 2px; }
.x-serp .u { font: 12px var(--font-mono); color: var(--good); } .x-serp .t { color: #3a6fd8; font-size: 16px; line-height: 1.3; } .x-serp .d { color: var(--ink-2); font-size: 12.5px; }
.x-outline { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font: 12.5px/1.4 var(--font-mono); }
.x-outline li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; }
.x-outline li b { color: var(--magenta); } .x-outline li.l3 { padding-left: 14px; }
.x-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.x-checks li { display: flex; gap: 8px; align-items: start; } .x-checks li svg { width: 16px; height: 16px; color: var(--good); flex: none; margin-top: 2px; }
body.xray .win-body :is(h1, h2, h3) { outline: 1.5px dashed var(--magenta); outline-offset: 3px; position: relative; }
body.xray .win-body :is(h1, h2, h3)::before { content: attr(data-tag); position: absolute; left: -2px; top: -18px; font: 700 10px var(--font-mono); color: #fff; background: var(--magenta); padding: 1px 5px; border-radius: 4px; }
body.xray .win-body p { outline: 1px dotted color-mix(in srgb, var(--teal) 55%, transparent); outline-offset: 2px; }
body.xray .windows::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--cyan) 6%, transparent) 3px 4px); }

/* ---------- Film-Bühne (immer dunkel, 1280 × 720, skaliert per --k) ---------- */
.fs { background: var(--sx-deep); --logo-accent: var(--sx-brand-hi); user-select: none; -webkit-user-select: none; }
.fs .f-bg { position: absolute; inset: 0; background: radial-gradient(50% 60% at 72% 28%, color-mix(in srgb, var(--sx-bright) 13%, transparent), transparent 70%), radial-gradient(40% 50% at 18% 86%, color-mix(in srgb, var(--sx-signal-hi) 13%, transparent), transparent 70%), var(--sx-deep); }
.fs .f-wall { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; pointer-events: none; }
.fs .f-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.fs .sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform-origin: 50% 50%; }
.fs .sc > *, .fs .f-cam > .f-pill, .fs .f-cam > .f-hero { position: absolute; }
.fs .f-flash, .fs .f-vig, .fs .f-black { position: absolute; inset: 0; pointer-events: none; }
.fs .f-flash { background: radial-gradient(42% 48% at 50% 50%, color-mix(in srgb, var(--sx-bright) 22%, transparent), transparent 72%); opacity: 0; }
.fs .f-vig { background: radial-gradient(125% 100% at 50% 45%, transparent 58%, rgba(0, 0, 0, .5)); }
.fs .f-black { background: #000; opacity: 0; }
.fs .f-glyphs, .fs .f-word { color: var(--sx-light); overflow: visible; }
.fs .f-glow { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--sx-bright) 24%, transparent), transparent 70%); opacity: 0; }
.fs .f-chap { left: 80px; top: 58px; overflow: hidden; padding: 4px 6px 10px 0; }
.fs .f-chap div { font: 800 66px/1 var(--font-display); letter-spacing: -.035em; white-space: nowrap; color: var(--sx-light); }
.fs .f-chap span { color: var(--sx-signal-hi); }
.fs .f-pill { border-radius: 16px; background: rgba(36, 32, 42, .94); border: 1.5px solid color-mix(in srgb, var(--sx-bright) 50%, transparent); opacity: 0; }
.fs .f-hero { opacity: 0; box-sizing: border-box; }
/* Schmuck fängt keine Klicks ab: Rahmen, Dock, Leuchten, Kapitel, Text */
.fs .f-hero, .fs .f-pill, .fs .f-glow, .fs .f-chap, .fs .f-note, .fs .f-metric, .fs .f-tag, .fs .f-cta, .fs .f-glyphs, .fs .f-word { pointer-events: none; }
.fs .fw { min-width: 180px; padding-bottom: 12px; border-radius: 12px; background: rgba(40, 36, 46, .95); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); color: var(--sx-light); font: 600 14px/1.3 var(--font-body); display: grid; gap: 2px; transform-origin: 50% 50%; transition: border-color .2s; }
.fs .fw-bar { height: 24px; display: flex; justify-content: flex-end; align-items: center; gap: 7px; padding: 0 9px; background: rgba(255, 255, 255, .06); margin-bottom: 8px; color: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark)); border-radius: 12px 12px 0 0; }
.fs .fw-bar svg { width: 12px; height: 9px; overflow: visible; }
.fs .fw-min { display: grid; place-items: center; border-radius: 4px; }
.fs .fw b { padding: 0 12px; font-weight: 600; white-space: nowrap; }
.fs .fw small { padding: 0 12px; color: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark)); font: 500 12.5px var(--font-mono); white-space: nowrap; }
.fs .f-open { min-width: 230px; }
.fs .f-open .xx { border: 0; padding: 0; background: none; color: inherit; display: grid; place-items: center; width: 14px; height: 11px; border-radius: 3px; cursor: pointer; }
.fs .f-open .xx.hot { color: #fff; background: var(--sx-signal-hi); }
.fs .f-open .xx { position: relative; }
.fs .f-open .xx::after { content: ""; position: absolute; inset: -16px -12px; }
.fs .f-lines { left: 0; top: 0; width: 1280px; height: 720px; overflow: visible; pointer-events: none; }
.fs .f-lines [data-l] { fill: none; stroke: color-mix(in srgb, var(--sx-bright) 60%, transparent); stroke-width: 3; stroke-linecap: round; }
.fs .f-lines [data-pk] { fill: var(--sx-bright); filter: drop-shadow(0 0 10px var(--sx-bright)); }
.fs .f-node { width: 160px; height: 76px; border-radius: 16px; background: rgba(36, 32, 42, .96); border: 1.5px solid color-mix(in srgb, var(--sx-bright) 40%, transparent); color: var(--sx-light); display: grid; align-content: center; gap: 2px; padding: 0 16px; font: 700 18px var(--font-body); white-space: nowrap; }
.fs .f-node small { font: 500 13px var(--font-mono); color: color-mix(in oklab, var(--sx-bright) 45%, #fff); }
.fs .f-node.f-small { width: 150px; height: 52px; text-align: center; justify-content: center; font-size: 16px; }
.fs .f-note { left: 0; right: 0; text-align: center; font: 600 17px var(--font-mono); color: var(--sx-bright); letter-spacing: .06em; }
.fs .f-panel { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); transform-origin: 50% 100%; }
.fs .f-phone { background: #111014; padding: 8px; border-radius: 32px; }
.fs .fp-scr { width: 100%; height: 100%; border-radius: 25px; background: #f6f8f8; padding: 34px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: start; }
.fs .fp-scr b { grid-column: 1 / -1; font: 800 17px var(--font-display); color: var(--sx-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs .fp-scr i { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(140deg, #d9ece8, #8fcdc1); }
.fs .fp-scr em { grid-column: 1 / -1; margin-top: 10px; height: 34px; border-radius: 10px; background: var(--sx-brand-lo); }
.fs .f-browser { background: #f6f8f8; }
.fs .fb-bar { height: 30px; background: #e3ebe9; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #6c6672; font: 12px var(--font-mono); white-space: nowrap; }
.fs .fb-bar svg { width: 30px; height: 8px; flex: none; }
.fs .fb-page { padding: 24px; display: grid; gap: 12px; }
.fs .fb-page i { display: block; height: 10px; border-radius: 6px; background: #d3dcd9; }
.fs .fb-page i.h { height: 28px; width: 80%; background: var(--sx-dark); }
.fs .fb-page i.s { width: 58%; }
.fs .fb-page b { display: block; width: 124px; height: 32px; border-radius: 9px; background: var(--sx-signal-hi); margin-top: 6px; }
.fs .f-dash { background: #17141b; border: 1px solid rgba(255, 255, 255, .1); padding: 18px; display: grid; gap: 12px; align-content: start; color: var(--sx-light); }
.fs .fd-row { display: flex; justify-content: space-between; font: 500 14px var(--font-mono); color: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark)); }
.fs .fd-row b { color: var(--sx-bright); }
.fs .fd-bars { display: flex; align-items: flex-end; gap: 6px; height: 104px; margin-top: 8px; }
.fs .fd-bars i { flex: 1; background: linear-gradient(var(--sx-bright), var(--sx-brand-lo)); border-radius: 3px; }
.fs .f-metric { text-align: center; font: 800 36px/1.1 var(--font-display); color: var(--sx-light); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs .f-metric small { display: block; margin-top: 4px; font: 500 14px var(--font-mono); letter-spacing: .08em; color: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark)); text-transform: uppercase; }
.fs .f-net line { stroke-width: 2.5; }
.fs .f-net .dash-l { stroke: var(--sx-signal-hi); stroke-dasharray: 7 9; }
.fs .f-net .solid-l { stroke: var(--sx-bright); stroke-linecap: round; }
.fs .f-net [data-ck] circle { fill: var(--sx-deep); stroke: var(--sx-bright); stroke-width: 2.5; }
.fs .f-net [data-ck] path { fill: none; stroke: var(--sx-bright); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fs .f-ring { border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sx-bright) 80%, transparent); opacity: 0; pointer-events: none; }
.fs .f-hub { border-radius: 999px; background: var(--sx-light); color: var(--sx-deep); font: 800 18px var(--font-display); display: grid; place-items: center; white-space: nowrap; opacity: 0; }
.fs .f-cursor { width: 26px; height: 34px; transform-origin: 0 0; pointer-events: none; opacity: 0; }
.fs .f-cursor svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
/* Imagefilm am Handy (lite): gleiche Optik mit kleineren Schatten und ohne Leucht-Filter, damit das Handy flüssig rendert. */
.player.is-lite .fs .fw { box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.player.is-lite .fs .f-panel { box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }
.player.is-lite .fs .f-lines [data-pk], .player.is-lite .fs .f-cursor svg { filter: none; }
.player.is-lite .f-line .w > span { will-change: auto; }
.fs .f-tag, .fs .f-cta { left: 0; right: 0; text-align: center; }
.fs .f-tag { font: 600 17px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--sx-bright) 45%, #fff); }
.fs .f-cta { font: 800 42px var(--font-display); letter-spacing: -.025em; color: var(--sx-light); }
.fs .f-cta span { color: var(--sx-signal-hi); }
.fs [data-hs][data-app] { outline: none; }
.fs [data-hs][data-app]:focus-visible { box-shadow: 0 0 0 3px var(--sx-bright) !important; }

/* Ebene über dem Film: nicht skaliert, damit Text und Knöpfe auch im kleinen Fenster lesbar bleiben */
.f-ov { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
.f-say { position: absolute; left: calc(84px * var(--k, 1)); right: calc(84px * var(--k, 1)); top: calc(146px * var(--k, 1)); }
.f-line { position: absolute; left: 0; top: 0; margin: 0; max-width: 100%; font: 600 max(12px, calc(30px * var(--k, 1)))/1.25 var(--font-body); color: color-mix(in oklab, var(--sx-light) 82%, var(--sx-dark)); letter-spacing: -.005em; text-wrap: balance; }
.f-line .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.f-line .w > span { display: inline-block; will-change: transform; }
.f-line .ac { color: var(--sx-bright); }
.f-line.mag .ac { color: var(--sx-signal-hi); }
.player.is-narrow .f-say { left: 10px; right: 10px; top: calc(146px * var(--k, 1) - 2px); }
/* Lesbarkeit am Handy über einen weichen Textschatten statt eines dunklen Streifens hinter dem Text: Der Streifen lief
   fast den ganzen Film mit und zog eine harte Kante quer durchs Bild. */
.player.is-narrow .f-line { text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .6); }
.f-tip { position: absolute; left: 0; top: 0; padding: 6px 11px; border-radius: 9px; background: color-mix(in srgb, var(--sx-deep) 88%, transparent); border: 1px solid color-mix(in srgb, var(--sx-bright) 45%, transparent); color: var(--sx-light); font: 600 13px var(--font-body); white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.f-end { position: absolute; left: 0; right: 0; top: calc(540px * var(--k, 1)); display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 12px; pointer-events: auto; }
.f-btn { height: max(34px, calc(50px * var(--k, 1))); padding: 0 max(14px, calc(24px * var(--k, 1))); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sx-light) 30%, transparent); background: color-mix(in srgb, var(--sx-deep) 60%, transparent); color: var(--sx-light); font: 700 max(13px, calc(19px * var(--k, 1))) var(--font-body); cursor: pointer; white-space: nowrap; transition: transform .2s, background .2s; }
.f-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--sx-light) 12%, var(--sx-deep)); }
.f-btn.pri { background: var(--sx-signal-hi); border-color: transparent; color: #fff; }
.f-btn.pri:hover { background: color-mix(in oklab, var(--sx-signal-hi) 85%, #fff); }
.f-btn.ico { width: max(34px, calc(50px * var(--k, 1))); padding: 0; display: grid; place-items: center; }
.f-btn svg { width: 16px; height: 16px; }
.f-btn:focus-visible, .f-snd:focus-visible { outline: 2px solid var(--sx-bright); outline-offset: 2px; }
.f-snd { position: absolute; right: 10px; top: 10px; height: 32px; padding: 0 12px 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(12, 10, 15, .55); color: var(--sx-light); font: 600 12.5px var(--font-body); cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.f-snd svg { width: 16px; height: 16px; }
.f-snd[aria-pressed="true"] { border-color: color-mix(in srgb, var(--sx-bright) 60%, transparent); }
.f-snd.is-loading { opacity: .6; }
/* Eigener Cursor im Film: Ring mit Punkt; über Verknüpfungen groß mit Pfeil und Ziel, am X rot */
.player.has-cur .fs, .player.has-cur .fs * { cursor: none !important; }
.f-cur { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
.f-cur .ring, .f-cur .dot, .f-cur .ic { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.f-cur .ring { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--sx-bright); background: color-mix(in srgb, var(--sx-bright) 8%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--sx-bright) 35%, transparent); transition: width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), background .22s, border-color .22s; animation: f-cur-breathe 1.8s ease-in-out infinite; }
.f-cur .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sx-signal-hi); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-signal-hi) 60%, transparent); transition: opacity .15s; }
.f-cur .ic { width: 16px; height: 16px; color: var(--sx-deep); opacity: 0; transition: opacity .15s; }
.f-cur .lb { position: absolute; left: 22px; top: 14px; padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--sx-deep) 88%, transparent); border: 1px solid color-mix(in srgb, var(--sx-bright) 40%, transparent); color: var(--sx-light); font: 600 12.5px var(--font-body); white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.f-cur.is-link .ring, .f-cur.is-close .ring { width: 46px; height: 46px; background: var(--sx-bright); animation: none; }
.f-cur.is-link .lb, .f-cur.is-close .lb { left: 30px; top: 18px; }
.f-cur.is-link .dot, .f-cur.is-close .dot { opacity: 0; }
.f-cur.is-link .ic { opacity: 1; rotate: -45deg; }
.f-cur.is-close .ring { background: var(--sx-signal-hi); border-color: var(--sx-signal-hi); box-shadow: 0 0 16px color-mix(in srgb, var(--sx-signal-hi) 45%, transparent); }
.f-cur.is-close .ic { opacity: 1; color: #fff; width: 14px; height: 11px; }
.f-cur.flip-x .lb { left: auto; right: 22px; }
.f-cur.flip-x.is-link .lb, .f-cur.flip-x.is-close .lb { right: 30px; }
.f-cur.flip-y .lb { top: auto; bottom: 14px; }
.f-cur.flip-y.is-link .lb, .f-cur.flip-y.is-close .lb { bottom: 18px; }
@keyframes f-cur-breathe { 50% { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .f-cur .ring { animation: none; } }
.player.is-narrow .f-snd { top: 6px; right: 6px; height: 28px; width: 28px; padding: 0; justify-content: center; }
.player.is-narrow .f-snd span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

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



/* ================= v2: Seite mit Schreibtisch als Bühne ================= */

body { background: var(--wall-1); }
html.sheet-open:not(.sheet-flow), html.sheet-open:not(.sheet-flow) body { overflow: hidden; }
html.is-mobile .d-only { display: none !important; }
html:not(.is-mobile) .m-only { display: none !important; }
.page { position: relative; height: 100%; display: flex; flex-direction: column; }

/* ---------- Menüleiste ---------- */
.menubar { position: relative; top: auto; left: auto; right: auto; flex: none; }
.menu { top: calc(100% - 2px); }

/* ---------- Schreibtisch (Bühne) ---------- */
.os { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; }
.wallpaper { background-image: radial-gradient(60% 55% at 78% 18%, var(--wall-glow), transparent 70%), radial-gradient(45% 50% at 12% 88%, var(--wall-glow-2), transparent 70%), linear-gradient(160deg, var(--wall-1), var(--wall-2)); background-size: 100% 100%; background-repeat: no-repeat; background-color: var(--wall-2); }
/* Höhenlinien: ruhendes Bild (auch für die Spiegelung im Gerät), darüber die Animation im Shader. */
.wallpaper::before { content: ""; position: absolute; inset: 0; background: var(--contours, none) 0 0 / 100% 130% no-repeat; transition: opacity 1.2s ease; }
.wall-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.wallpaper.gl-on::before { opacity: 0; }
.wallpaper.gl-on .wall-gl { opacity: 1; }
/* Spiegelung im Gerät (Intro): genau so hoch wie das Browserfenster, damit sie am Ende
   deckungsgleich auf der echten Seite liegt. Ist der Gerätebildschirm höher, läuft die Tapete darunter weiter. */
.page.sxi-clone { height: var(--seby-vh, 100vh); }
body.admin-bar .page.sxi-clone { top: var(--wp-admin--admin-bar--height, 32px); height: calc(var(--seby-vh, 100vh) - var(--wp-admin--admin-bar--height, 32px)); }
.sxi-clone .os, .sxi-clone .home { overflow: visible; }
.sxi-clone .os > .wallpaper { --wh: calc(var(--seby-vh, 100vh) - var(--menubar-h)); }
.sxi-clone .home > .wallpaper { --wh: var(--seby-vh, 100vh); }
/* Verläufe mit festen Maßen: oben identisch zur Seite, darunter laufen sie weich aus statt abzubrechen. */
.sxi-clone .wallpaper { bottom: auto; height: calc(var(--wh) * 1.3);
  background-image: radial-gradient(60% calc(var(--wh) * .55) at 78% calc(var(--wh) * .18), var(--wall-glow), transparent 70%), radial-gradient(45% calc(var(--wh) * .5) at 12% calc(var(--wh) * .88), var(--wall-glow-2), transparent 70%), linear-gradient(160deg, var(--wall-1), var(--wall-2));
  background-size: 100% 100%, 100% 100%, 100% calc(100% / 1.3); }
.sxi-clone .wallpaper::before { bottom: auto; height: 100%; background-size: 100% 100%; }
.desk { top: 0; }
.toasts { top: 12px; }
@media (max-width: 1080px) { .widgets .widget:nth-child(3) { display: none; } }

/* ---------- Rechtliches ohne Footer ---------- */
.legal { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.legal a { color: var(--ink-3); text-decoration: none; }
.legal a:hover { color: var(--ink); text-decoration: underline; }
.d-legal { position: absolute; right: 18px; bottom: 12px; z-index: 2; }
.m-legal { justify-content: center; padding-top: 10px; }

/* ---------- Über mich: Belege ---------- */
.a-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.stars { color: #f5a623; letter-spacing: 2px; }
.quote-ph { margin: 0; border: 1.5px dashed var(--hair-strong); border-radius: 16px; padding: 18px; color: var(--ink-3); display: grid; gap: 6px; }
.quote-ph blockquote { margin: 0; font-size: 16px; line-height: 1.5; }
.quote-ph figcaption { font: 500 12.5px var(--font-mono); }

/* ---------- Ruhezustand: das Gerät klappt zu (Intro) ---------- */
.sleep-cta { position: fixed; inset: 0; z-index: 2147483000; display: grid; align-items: end; cursor: pointer; }
.sleep-panel { transform: translateY(100%); transition: transform .6s var(--ease-out); cursor: default; }
.sleep-cta.show .sleep-panel { transform: none; }
.outro-cta { padding: 30px 24px 32px; background: color-mix(in srgb, var(--sx-deep) 88%, transparent); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); color: var(--sx-light); border-top: 1px solid rgba(255, 255, 255, .1); }
.oc-inner { max-width: 1160px; margin: 0 auto; display: grid; justify-items: center; gap: 12px; text-align: center; }
.oc-logo { width: 64px; height: 15px; color: var(--sx-brand-hi); }
.oc-title { font: 800 clamp(28px, 4vw, 44px)/1.05 var(--font-display); letter-spacing: -.025em; }
.oc-sub { color: color-mix(in oklab, var(--sx-light) 80%, var(--sx-dark)); }
.outro-cta .cta-row { justify-content: center; }
.outro-cta .mono { color: var(--sx-light); user-select: all; }
.oc-legal { display: flex; gap: 16px; font-size: 13px; }
.oc-legal a { color: color-mix(in oklab, var(--sx-light) 58%, var(--sx-dark)); text-decoration: none; }
.oc-legal a:hover { color: var(--sx-light); }
.outro-cta .btn svg { width: 15px; height: 15px; }
@media (max-width: 759px) {
  .outro-cta { padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .oc-inner { gap: 10px; }
  .oc-title { font-size: 25px; }
  .oc-sub { display: none; }
  .outro-cta .cta-row { gap: 8px; }
  .outro-cta .cta-row .mono { font-size: 13px; }
  .oc-legal { font-size: 12px; }
}
/* Ohne Gerät (reduzierte Bewegung, Vorschau): die Seite dunkelt ab, die Tafel fährt ein. */
.sleep-cta.plain { background: color-mix(in srgb, var(--sx-deep) 0%, transparent); transition: background .45s ease; }
.sleep-cta.plain.show { background: color-mix(in srgb, var(--sx-deep) 82%, transparent); }

/* ---------- Ausschalt-Knopf ---------- */
.mb-power svg { width: 15px; height: 15px; }
.mb-power:hover { color: var(--magenta); }
.m-status { gap: 10px; }
.m-status .ind { margin-left: auto; }
.m-power { width: 30px; height: 30px; margin: -4px -10px 0 2px; border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink); display: grid; place-items: center; padding: 0;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.m-power svg { width: 15px; height: 15px; }
.m-power:active { transform: scale(.94); }

/* ---------- Intro: Gerät klappt auf (assets/js/sebyos-intro.js) ---------- */
/* Solange das Intro läuft, steht die Seite still und ist abgedeckt. Sobald die Bühne steht
   (sx-intro-staged), trägt sie denselben Hintergrund selbst und die Abdeckung geht weg. */
html.sx-intro, html.sx-intro body { overflow: hidden !important; overscroll-behavior: none; }
html.sx-intro::before { content: ""; position: fixed; inset: 0; z-index: 2147481000; background: #0c0b0f; background-image: radial-gradient(115% 88% at 50% 6%, #1c2629, #141319 46%, #0c0b0f 78%, #060508); }
html.sx-intro.sx-intro-staged::before { display: none; }
.sxi-stage { position: fixed; inset: 0; z-index: 2147482000; overflow: hidden; pointer-events: none; perspective: 2600px; perspective-origin: 50% 50%;
  background: #0c0b0f; background-image: radial-gradient(115% 88% at 50% 6%, #1c2629, #141319 46%, #0c0b0f 78%, #060508); }
.sxi-stage[data-done="1"] { display: none; }
.sxi-stage { --sxi-accent: var(--sx-brand, #11a796); }
.sxi-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Foldable: Graphit matt, Akzentlinie in der Markenfarbe. Alles fest gezeichnet; je Bild ändern sich nur transform und opacity. */
.sxi-matte { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(120% 90% at 30% 0%, #3b3e46, #2a2c32 52%, #1d1f23); }
.sxi-ov { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), transparent 40%, rgba(0, 0, 0, .22));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sxi-accent) 80%, transparent), inset 0 0 16px color-mix(in srgb, var(--sxi-accent) 16%, transparent); }
.sxi-sheen-box { overflow: hidden; pointer-events: none; }
.sxi-sheen { position: absolute; top: -30%; bottom: -30%; left: -70%; width: 70%; will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .05) 65%, transparent); }
.sxi-logo { background: rgba(255, 255, 255, .24); -webkit-mask: var(--sxi-mark) center / contain no-repeat; mask: var(--sxi-mark) center / contain no-repeat; }
.sxi-pill-top { background:
    linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .09) 50%, transparent 80%),
    linear-gradient(170deg, #23262c, #0e0f12 60%, #17191d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.sxi-pshadow { background: rgba(0, 0, 0, .6); }
.sxi-barrel, .sxi-inner, .sxi-ringtop, .sxi-glass { border-radius: 50%; }
.sxi-barrel { background: #040507; }
.sxi-inner { background:
  radial-gradient(circle, #020205 0 22%, transparent 23%),
  repeating-radial-gradient(circle, rgba(140, 150, 255, .18) 0 1px, transparent 1px 3px),
  radial-gradient(circle at 40% 35%, #3d3f96, #1a1b3c 45%, #07070c 75%); }
.sxi-ringtop { background: radial-gradient(circle, transparent 0 calc(50% - 13%), #4f525a calc(50% - 13%), #d5d8df calc(50% - 6%), #868991 calc(50% - 1.5%), transparent 50%); }
.sxi-glass { background:
  radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .42) 0 4%, rgba(255, 255, 255, 0) 17%),
  conic-gradient(from 210deg, rgba(120, 90, 255, .32), rgba(40, 170, 255, .18), transparent 35%, rgba(255, 80, 160, .22) 60%, transparent 80%, rgba(120, 90, 255, .32)),
  radial-gradient(circle, rgba(10, 12, 20, .12) 0 38%, rgba(5, 6, 10, .72) 78%); }
.sxi-flash { background: linear-gradient(#fffaf0, #e7d9ae); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 2px rgba(255, 255, 255, .08); }
/* Einschalten: Schwarz mit leuchtendem Logo über der Spiegelung, blendet dann aus. Leuchten als Verlauf statt Filter. */
.sxi-boot { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; background: #000; will-change: opacity; }
.sxi-boot-glow { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); opacity: 0; will-change: opacity; }
.sxi-boot-glow::before { content: ""; position: absolute; left: -80%; right: -80%; top: -260%; bottom: -260%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sxi-accent) 34%, transparent), color-mix(in srgb, var(--sxi-accent) 10%, transparent) 55%, transparent); }
.sxi-boot-glow > div { position: relative; width: 100%; height: 100%; background: color-mix(in srgb, var(--sxi-accent) 70%, #fff); -webkit-mask: var(--sxi-mark) center / contain no-repeat; mask: var(--sxi-mark) center / contain no-repeat; }
/* Glas in der Spiegelung ohne Weichzeichner (der wird im bewegten Gerät sonst je Bild neu berechnet, am Handy der
   teuerste Teil), dafür etwas dichter, damit es fast gleich aussieht. Bei der Übergabe blendet die echte Seite weich ein. */
.sxi-clone { --glass: color-mix(in srgb, var(--glass-strong) 70%, var(--glass)); }
.sxi-clone, .sxi-clone * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Animierte App-Symbole stehen während des Intros still, in der Spiegelung wie auf der Seite darunter.
   So springen sie bei der Übergabe nicht (kein Blinken), und die Spiegelung muss nicht je Bild neu gezeichnet werden. */
.sxi-clone *, .sxi-clone *::before, .sxi-clone *::after,
html.sx-intro #sx-page *, html.sx-intro #sx-page *::before, html.sx-intro #sx-page *::after { animation-play-state: paused !important; }
/* Overlays anderer Plugins (Cookie-Banner von seby-consent) erst nach dem Intro: Sie liegen über der Bühne und zeichnen
   mit backdrop-filter in jedem Bild die laufende 3D-Szene neu weich. Das ließ das Intro am Handy beim ersten Besuch ruckeln.
   Endet das Intro, gleitet der Banner mit seiner eigenen Animation herein. */
html.sx-intro #sbc-banner, html.sx-intro #sbc-revoke, html.sx-intro #sbc-prefs { display: none !important; }
.sxi-key { flex: 1 1 0; border-radius: 4px; background: linear-gradient(180deg, #3a3733, #262421); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 1px rgba(0, 0, 0, .5); }
.sxi-screen { position: absolute; overflow: hidden; background: var(--wall-2); }
.sxi-clone { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; pointer-events: none; user-select: none; }
.sxi-skip { position: fixed; z-index: 2147482500; top: 16px; right: 16px; cursor: pointer; pointer-events: auto;
  font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #f5f1ea;
  border: 1px solid rgba(245, 241, 234, .22); background: rgba(245, 241, 234, .08); border-radius: 99px; padding: 10px 16px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sxi-skip:hover { background: rgba(245, 241, 234, .16); }
@media (prefers-reduced-motion: reduce) { .sxi-stage { display: none; } }

/* ---------- Mobil: Homescreen ---------- */
.home { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; }
.home > .wallpaper { position: absolute; inset: 0; z-index: 0; }
.home-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 52px 16px 124px; display: flex; flex-direction: column; gap: 14px; }
.m-status { position: absolute !important; top: 0; left: 0; right: 0; height: 48px; padding: 14px 26px 0; display: flex; justify-content: space-between; align-items: center; font: 600 15px var(--font-body); font-variant-numeric: tabular-nums; }
.m-status .ind { display: flex; gap: 6px; align-items: center; }
.m-status svg { width: 17px; height: 12px; }
.m-hero { border-radius: 26px; padding: 16px 18px; display: grid; gap: 10px; background: var(--glass); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi); }
.m-hero .m-title { font-size: 26px; line-height: 1.06; font-weight: 800; letter-spacing: -.025em; }
.m-hero .m-title .kicker { display: block; font: 600 12.5px/1.3 var(--font-body); color: var(--teal); letter-spacing: .02em; margin-bottom: 8px; }
.m-hero p { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.m-wrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m-wrow .widget { width: auto; min-height: 132px; border-radius: 22px; padding: 12px 14px; gap: 3px; }
.m-wrow .w-big { font-size: 28px; }
.m-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; padding: 2px 2px 0; }
.m-app { display: grid; justify-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--ink); text-decoration: none; font-size: 11.5px; font-weight: 500; letter-spacing: -.01em; text-align: center; }
.m-app .appicon { width: 62px; height: 62px; border-radius: 16px; }
.m-app .lbl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 84px; border-radius: 30px; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center;
  background: var(--glass); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 30px var(--shadow-soft); }
.m-dock .m-app .lbl { display: none; }

/* Mobil-Vorschau auf großen Bildschirmen */

/* ---------- Mobil: App-Sheets ---------- */
.m-sheet { position: fixed; inset: 0; z-index: 700; display: flex; flex-direction: column; overflow: hidden; transform-origin: 0 0; will-change: transform;
  background: var(--glass-strong); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); }
.m-sheet.anim { transition: transform .42s var(--ease-out), border-radius .42s var(--ease-out), opacity .3s; }
.ms-bar { flex: none; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; display: grid; grid-template-columns: 74px minmax(0, 1fr) 74px; align-items: center; gap: 8px; border-bottom: 1px solid var(--sep); }
.ms-bar button { border: 0; background: none; color: var(--teal); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 2px; padding: 6px 4px; }
.ms-bar button svg { width: 18px; height: 18px; }
.ms-title { text-align: center; display: grid; min-width: 0; }
.ms-title b { font-size: 15.5px; }
.ms-title small { font: 11.5px var(--font-mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-body { flex: 1; overflow-y: auto; overflow-x: hidden; container-type: inline-size; overscroll-behavior: contain; }

/* ---------- Überlagerungen, die jetzt am Fenster hängen ---------- */
.search-ov { position: fixed; z-index: 800; }
.xray-panel { position: fixed; top: calc(var(--menubar-h) + 10px); bottom: 12px; right: 12px; z-index: 560; }
.xray-panel.xray-inline { position: static; animation: none; box-shadow: none; border: 0; border-radius: 0; background: transparent; width: auto; overflow: visible; }
body.xray .content :is(h1, h2, h3), body.xray .hero .hero-title, body.xray .m-hero .m-title { outline: 1.5px dashed var(--magenta); outline-offset: 3px; position: relative; }
body.xray .content :is(h1, h2, h3)::before, body.xray .hero .hero-title::before, body.xray .m-hero .m-title::before { content: attr(data-tag); position: absolute; left: -2px; top: -18px; font: 700 10px var(--font-mono); color: #fff; background: var(--magenta); padding: 1px 5px; border-radius: 4px; letter-spacing: 0; }
.saver { position: fixed; }

/* ================= Aufgeräumte Apps ================= */
.win-bar { height: 44px; }
.appx { display: grid; grid-template-columns: 212px minmax(0, 1fr); height: 100%; }
.appx-side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--sep); background: var(--sidebar); overflow-y: auto; min-height: 0; }
.side-title { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 6px 12px 8px; }
.side-nav { display: grid; gap: 2px; }
.side-nav button { border: 0; background: none; text-align: left; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.side-nav button:hover { background: var(--fill); color: var(--ink); }
.side-nav button.on, .side-nav button[aria-pressed="true"] { background: var(--fill-2); color: var(--ink); font-weight: 600; }
.side-cta { margin-top: auto; padding: 14px; border-radius: 14px; background: var(--grp); display: grid; gap: 3px; }
.side-cta b { font-size: 14px; }
.side-cta span { font-size: 12.5px; color: var(--ink-3); }
.side-cta .btn { margin-top: 8px; justify-content: center; }
.appx-main { overflow-y: auto; min-height: 0; padding: 40px 48px 56px; }
.appx-main > * { max-width: 680px; }
.blk { display: grid; gap: 16px; padding-top: 48px; }
.blk:first-child { padding-top: 0; }
.blk h2 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.blk-hero { gap: 14px; }
.blk-hero h1 { font-size: clamp(28px, 3.6cqi, 38px); line-height: 1.07; font-weight: 800; letter-spacing: -.025em; }
.blk-hero .lead { font-size: 17px; }
.facts { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-2); }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-bright); }
.stage { border-radius: 18px; padding: 20px; display: grid; gap: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--teal-bright) 9%, transparent), var(--grp) 62%); }
.stage.flow { border: 0; }
.note { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.group { border-radius: 14px; background: var(--grp); overflow: hidden; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li, .rows > a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 16px; position: relative; color: var(--ink); text-decoration: none; }
.rows > li + li::before, .rows > a + a::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--sep); }
.rows > a:hover { background: var(--fill); }
.rows .appicon { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; }
.rows .appicon svg { width: 60%; height: 60%; }
.rows b { display: block; font-size: 14.5px; font-weight: 600; }
.rows small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.4; margin-top: 1px; }
.rows .num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-mono); color: var(--teal); background: var(--teal-soft); }
.rows .chev { width: 14px; height: 14px; color: var(--ink-3); }
.terms { margin: 0; }
.terms dt { padding: 13px 16px 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.terms dd { margin: 0; padding: 2px 16px 13px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.terms dt:not(:first-of-type) { border-top: 1px solid var(--sep); }
.blk-text strong { color: var(--ink); font-weight: 600; }
.group.faq { display: block; }
.group.faq details { border: 0; border-radius: 0; background: none; }
.group.faq details + details { border-top: 1px solid var(--sep); }
.group.faq summary { padding: 14px 16px; font-size: 14.5px; font-weight: 600; align-items: center; }
.group.faq summary::after { content: ""; width: 8px; height: 8px; flex: none; margin-right: 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.group.faq details[open] summary::after { content: ""; transform: rotate(-135deg); }
.group.faq details p { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.6; }
.calc.group { display: block; padding: 2px 0; }
.calc.group label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 12px 16px; font-size: 14px; color: var(--ink-2); }
.calc.group label + label { border-top: 1px solid var(--sep); }
.calc.group input[type=range] { grid-column: 1 / -1; }
.result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.result b { font: 800 34px/1 var(--font-display); color: var(--teal); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.result span { color: var(--ink-2); font-size: 14px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metric { display: grid; gap: 3px; min-width: 0; }
.metric > span { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.metric b { font: 800 24px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.metric svg { width: 100%; height: 30px; display: block; }
.stage.duo { grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 22px; }
.stage.phone-duo { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 26px; }
.stage .phone { width: 212px; height: 432px; border-radius: 36px; }
.stage .phone .scr { border-radius: 28px; }
.stage .map-de { max-width: 170px; }
.stage.duo-eu { grid-template-columns: 250px minmax(0, 1fr); }
.stage .map-eu { max-width: 250px; }
.blk-cta { display: none; }
@container (max-width: 640px) {
  .appx { display: block; height: auto; }
  .appx-side { display: none; }
  .appx-main { overflow: visible; padding: 24px 20px 36px; }
  .blk { padding-top: 36px; }
  .blk-cta { display: grid; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage.duo, .stage.phone-duo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .stage .map-eu { max-width: 320px; }
}

/* Projekte: drei Spalten wie im Finder */
.finder2 { display: grid; grid-template-columns: 170px 290px minmax(0, 1fr); height: 100%; }
.f-list { border-right: 1px solid var(--sep); overflow-y: auto; min-height: 0; padding: 18px 12px; display: grid; align-content: start; gap: 2px; }
.f-title { font-size: 22px; font-weight: 800; padding: 0 10px 10px; }
.f-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; color: var(--ink); }
.f-row:hover { background: var(--fill); }
.f-row[aria-pressed="true"] { background: var(--fill-2); }
.f-row .th, .f-hero { background: linear-gradient(140deg, var(--c1), var(--c2)); color: #fff; font-family: var(--font-display); font-weight: 800; display: grid; place-items: center; }
.f-row .th { width: 40px; height: 40px; border-radius: 10px; font-size: 15px; }
.f-row b { display: block; font-size: 14px; }
.f-row small { display: block; font-size: 12.5px; color: var(--ink-3); }
.f-detail { overflow-y: auto; min-height: 0; padding: 32px 36px 40px; display: grid; gap: 16px; align-content: start; }
.f-hero { height: 180px; border-radius: 16px; font-size: 32px; letter-spacing: -.02em; }
.f-detail h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.kv dt, .kv dd { margin: 0; padding: 11px 16px; }
.kv dt { color: var(--ink-3); font-size: 13.5px; }
.kv dd { font-size: 14px; text-align: right; }
.kv dt:not(:first-of-type), .kv dd:not(:first-of-type) { border-top: 1px solid var(--sep); }
@container (max-width: 760px) {
  .finder2 { grid-template-columns: minmax(0, 1fr); height: auto; }
  .finder2 .appx-side { display: none; }
  .f-list { border-right: 0; border-bottom: 1px solid var(--sep); overflow: visible; }
  .f-detail { overflow: visible; padding: 24px 20px; }
}

/* Über mich */
.about2 { max-width: 620px; margin: 0 auto; padding: 40px 32px 48px; display: grid; gap: 28px; }
.a-head { display: grid; justify-items: center; text-align: center; gap: 10px; }
.a-head .portrait { width: 132px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; overflow: hidden; color: #fff; font: 800 44px var(--font-display); letter-spacing: -.04em;
  background: radial-gradient(circle at 30% 25%, var(--sx-bright), var(--sx-brand-lo) 55%, var(--sx-dark)); box-shadow: 0 18px 44px var(--shadow-soft); }
.a-head .portrait small { position: absolute; bottom: 18px; font: 600 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.a-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; }
.about2 .blk { padding-top: 0; }
.about2 .blk p { color: var(--ink-2); line-height: 1.65; }
.cta-row.center { justify-content: center; }

/* Wissen */
.notes2 { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: 100%; }
.n-list2 { display: grid; gap: 2px; }
.n-list2 button { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; text-align: left; border: 0; background: none; color: var(--ink); }
.n-list2 button:hover { background: var(--fill); }
.n-list2 button[aria-pressed="true"] { background: var(--fill-2); }
.n-list2 b { font-size: 14px; line-height: 1.3; }
.n-list2 small { font-size: 12px; color: var(--ink-3); }
.n-article { overflow-y: auto; min-height: 0; padding: 40px 48px 56px; display: grid; gap: 16px; align-content: start; }
.n-article > * { max-width: 660px; }
.n-article h1 { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.n-article h2 { font-size: 20px; font-weight: 700; margin-top: 12px; }
.n-article p { color: var(--ink-2); line-height: 1.7; font-size: 15.5px; }
.n-article .meta { font: 12.5px var(--font-mono); color: var(--ink-3); }
.n-article table { border-collapse: collapse; width: 100%; font-size: 14px; }
.n-article th, .n-article td { text-align: left; padding: 10px 14px; vertical-align: top; }
.n-article th { font: 600 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.n-article tbody tr { border-top: 1px solid var(--sep); }
@container (max-width: 700px) {
  .notes2 { display: block; height: auto; }
  .notes2 .appx-side { border-right: 0; border-bottom: 1px solid var(--sep); }
  .n-article { overflow: visible; padding: 24px 20px 36px; }
}
.appx-main { position: relative; }

/* ================= Version 4: ruhigere Oberfläche ================= */
.win-url { background: none; padding: 0; font-size: 12px; }
.menubar { gap: 4px; }
.hero { gap: 16px; }
.hero .lead { max-width: 40ch; }
.direct a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.direct a:hover { color: var(--teal); }
.direct svg { width: 14px; height: 14px; }

/* Projekte: Galerie mit Vorschau und Logo */
.gallery { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: 100%; }
.g-main { overflow-y: auto; min-height: 0; padding: 28px 32px 36px; }
.g-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.g-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.p-card { display: grid; gap: 12px; align-content: start; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); text-decoration: none; border-radius: 16px; }
.p-shot { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--sep); aspect-ratio: 16 / 10; transition: transform .2s var(--ease-out), box-shadow .2s; }
.p-card:hover .p-shot, .p-bigshot:hover .p-shot { transform: translateY(-2px); box-shadow: 0 16px 36px var(--shadow-soft); }
.p-shot img { position: absolute; left: 0; top: 22px; width: 100%; height: auto; display: block; }
.p-chrome { position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 0 9px; background: var(--glass-strong); border-bottom: 1px solid var(--sep); font: 500 10.5px var(--font-mono); color: var(--ink-3); }
.p-chrome svg { width: 22px; height: 6px; flex: none; }
.p-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.p-meta b { display: block; font-size: 14px; }
.p-meta small { display: block; font-size: 12.5px; color: var(--ink-3); }
.p-logo { display: grid; place-items: center; flex: none; border-radius: 10px; overflow: hidden; background: var(--lb); border: 1px solid var(--sep); font: 800 15px var(--font-display); color: var(--ink); }
.p-logo img { max-width: 84%; max-height: 72%; object-fit: contain; display: block; }
.p-new .p-plus { aspect-ratio: 16 / 10; border-radius: 14px; border: 1.5px dashed var(--hair-strong); display: grid; place-items: center; font: 300 40px var(--font-display); color: var(--ink-3); }
.p-new .p-meta { grid-template-columns: minmax(0, 1fr); }
.g-detail { display: grid; gap: 18px; max-width: 720px; }
.p-back { justify-self: start; border: 0; background: none; color: var(--teal); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }
.p-back svg { width: 16px; height: 16px; }
.p-dhead { display: flex; align-items: center; gap: 14px; }
.p-dhead h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.p-bigshot { position: relative; display: block; border-radius: 16px; text-decoration: none; }
.p-shot.big { aspect-ratio: 16 / 9; }
.p-play { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--wall-1); font-weight: 600; font-size: 13px; box-shadow: 0 8px 20px var(--shadow-soft); }
@container (max-width: 640px) {
  .gallery { display: block; height: auto; }
  .gallery .appx-side { display: none; }
  .g-main { overflow: visible; padding: 20px; }
  .g-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Browser-Fenster für Referenzen */
.bw { display: flex; flex-direction: column; height: 100%; }
.bw-bar { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--sep); background: var(--sidebar); }
.bw-nav { display: flex; gap: 2px; }
.bw-nav button { width: 30px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); display: grid; place-items: center; }
.bw-nav button:disabled { opacity: .35; cursor: default; }
.bw-nav button:not(:disabled):hover { background: var(--fill-2); }
.bw-nav svg { width: 15px; height: 15px; }
.bw-url { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--fill); font: 500 13px var(--font-mono); color: var(--ink-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.bw-url svg { width: 12px; height: 12px; color: var(--good); flex: none; }
.bw-view { flex: 1; min-height: 0; overflow-y: auto; position: relative; background: var(--surface); }
.bw-view iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Rechtliche Seiten im Browser-Fenster: die WordPress-Seite steht wie eine Webseite im Fenster. */
.bw-doc .bw-view { background: var(--surface); }
html.is-mobile .bw-doc { height: auto; }
html.is-mobile .bw-doc .bw-bar { display: none; }
html.is-mobile .bw-doc .bw-view { overflow: visible; background: transparent; }
.bw-shot { width: 100%; height: auto; display: block; }
.bw-note { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 9px 14px; font-size: 12.5px; color: var(--ink-2); background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sep); }
.bw-note a { color: var(--teal); font-weight: 600; text-decoration: none; }

/* ================= sebyOS als Plugin ================= */

/* Adminleiste: die Seite wird um ihre Höhe kürzer. */
body.sx.admin-bar #sx-page { height: calc(100% - var(--wp-admin--admin-bar--height, 32px)); }
html.is-mobile body.sx.admin-bar #sx-page { height: 100%; }
/* Platzhalter nur für angemeldete Redakteure markieren. */
body.sx:not(.logged-in) .ph { text-decoration: none; }
.sx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Überschriften des Schreibtischs: auf Unterseiten keine H1, gleiche Gestaltung. */
.hero .hero-title { font-size: clamp(38px, 4.4vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -.028em; font-family: var(--font-display); margin: 0; text-wrap: balance; }
.hero .hero-title .kicker { display: block; font: 600 clamp(15px, 1.2vw, 18px)/1.35 var(--font-body); letter-spacing: 0; color: var(--ink-2); margin-bottom: 14px; }
.hero .hero-title em { font-style: normal; background: linear-gradient(95deg, var(--teal-bright), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-hero .m-title { font: 800 26px/1.06 var(--font-display); letter-spacing: -.025em; margin: 0; }
.m-hero .m-title .kicker { display: block; font: 600 12.5px/1.3 var(--font-body); color: var(--teal); letter-spacing: .02em; margin-bottom: 8px; }
a.widget { text-decoration: none; }
a.widget:hover { background: var(--glass-strong); }
.widget.w-text .w-big { font-size: 26px; }

/* ---------- Fenster, auch ohne JavaScript ---------- */
.win-ctl a { width: 34px; height: 30px; border-radius: 8px; color: var(--ink-2); display: grid; place-items: center; }
.win-ctl a svg { width: 15px; height: 11px; }
.win-ctl a:hover { background: var(--magenta); color: #fff; }
.win .ms-bar { display: none; }
.ms-back { border: 0; background: none; color: var(--teal); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 2px; padding: 6px 4px; text-decoration: none; }
.ms-back svg { width: 18px; height: 18px; }
/* Das Fenster aus dem Server steht vor dem Skript schon dort, wo das Skript es hinsetzt. */
html:not(.is-mobile) .sx-initial { position: absolute; z-index: 450;
  --ww: min(var(--w), 100% - 150px); --hh: min(var(--h), 100% - var(--menubar-h) - 112px);
  width: var(--ww); height: var(--hh);
  left: max(12px, calc((100% - var(--ww)) / 2 - 20px));
  top: calc(var(--menubar-h) + max(10px, (100% - var(--menubar-h) - 96px - var(--hh)) / 2 - 10px)); }
html.is-mobile .win.sx-initial, html.is-mobile .win.m-sheet { position: fixed; inset: 0; z-index: 700; width: auto; height: auto; min-width: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
html.is-mobile .win .win-bar { display: none; }
html.is-mobile .win .ms-bar { display: grid; }
html.is-mobile .win .win-body { flex: 1; overflow-y: auto; overflow-x: hidden; container-type: inline-size; overscroll-behavior: contain; }
.win-body.is-loading { display: grid; place-items: center; }
.win-body.is-loading::before { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--hair-strong); border-top-color: var(--teal-bright); animation: sxspin .8s linear infinite; }
@keyframes sxspin { to { transform: rotate(360deg); } }
.win-error { padding: 32px; display: grid; gap: 12px; justify-items: start; }

/* ---------- Inhalte aus Elementor und dem Block-Editor ---------- */
.appx-main .elementor, .sx-centered .elementor, .sx-full .elementor { width: 100%; }
.appx-main .e-con, .sx-centered .e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.blk-text p, .sx-doc-body p, .n-body p, .p-content p, .faq-a p { margin: 0 0 12px; }
.blk-text p:last-child, .faq-a p:last-child, .n-body p:last-child { margin-bottom: 0; }
.blk-text { color: var(--ink-2); line-height: 1.65; }
.group.faq .faq-a { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.phone-side { display: grid; gap: 12px; }
.phone-text { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.phone-side .btn { justify-self: start; }
.map-de circle.home { fill: var(--magenta); }
.name-story .t { background: none; padding: 0; }
.quote { margin: 0; display: grid; gap: 8px; }
.quote blockquote { margin: 0; font: 600 18px/1.5 var(--font-body); color: var(--ink); }
.quote figcaption { font: 500 12.5px var(--font-mono); color: var(--ink-3); }
.a-head .portrait.has-img { background: var(--fill-2); }
.a-head .portrait img { width: 100%; height: 100%; object-fit: cover; }
.a-sub { font-size: 16px; }
.sx-cta { margin-top: 8px; max-width: 360px; }
.sx-centered { max-width: 640px; margin: 0 auto; padding: 40px 32px 48px; display: grid; gap: 28px; }
.sx-centered > .elementor > .e-con { gap: 28px; }
.sx-centered .blk { padding-top: 0; }
.sx-centered .blk p { color: var(--ink-2); line-height: 1.65; }
.sx-full { min-height: 100%; }
.appicon.has-img:not(.img-on-tone) { background: var(--surface); }
.appicon img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
/* Eigenes Bild auf dem Farbton: Logos mit transparentem Hintergrund behalten Rand und Farbe. */
.appicon.img-on-tone img { width: 64%; height: 64%; object-fit: contain; }
.film-video { width: 100%; border-radius: 12px; background: #000; display: block; aspect-ratio: 16 / 9; }

/* ---------- Projekte und Wissen: Links statt Knöpfe ---------- */
.g-intro { margin: -6px 0 18px; color: var(--ink-2); max-width: 70ch; }
.p-content { color: var(--ink-2); line-height: 1.6; }
.p-card[hidden] { display: none; }
.p-bigshot .p-shot img { width: 100%; }
.n-list2 > a { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.n-list2 > a:hover { background: var(--fill); }
.n-list2 > a[aria-current] { background: var(--fill-2); }
.n-list2 b { font-size: 14px; line-height: 1.3; }
.n-list2 small { font-size: 12px; color: var(--ink-3); }
.n-cards { display: grid; gap: 10px; }
.n-card { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--grp); text-decoration: none; color: var(--ink); }
.n-card:hover { background: var(--fill-2); }
.n-card b { font-size: 15px; }
.n-card span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.n-card small { font: 12px var(--font-mono); color: var(--ink-3); }
.k-text p { margin: 0; }
.n-body { display: grid; gap: 14px; color: var(--ink-2); line-height: 1.7; font-size: 15.5px; }
.n-body h2 { font-size: 20px; font-weight: 700; margin-top: 12px; color: var(--ink); }
.n-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.n-body th, .n-body td { text-align: left; padding: 10px 14px; vertical-align: top; border-top: 1px solid var(--sep); }
.n-body thead th { border-top: 0; font: 600 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.n-body figure.wp-block-table { margin: 0; border-radius: 14px; background: var(--grp); overflow-x: auto; }

/* ---------- Dokumente (Impressum, Datenschutz) und 404 ---------- */
/* article.sx-doc: Der body heißt auf diesen Seiten ebenfalls „sx-doc“ (Klasse sx-{Art}). */
article.sx-doc { max-width: 720px; margin: 0 auto; padding: 36px 36px 48px; display: grid; gap: 18px; }
article.sx-doc h1 { font-size: clamp(26px, 3.4cqi, 34px); font-weight: 800; letter-spacing: -.02em; }
.sx-doc-body { color: var(--ink-2); line-height: 1.7; font-size: 15px; }
.sx-doc-body h2, .sx-doc-body h3 { color: var(--ink); margin: 22px 0 8px; }
.sx-doc-body a { color: var(--teal); }
.sx-doc-body ul, .sx-doc-body ol { padding-left: 20px; }
/* ---------- Bewertungen (Kundenstimmen) ---------- */
.rv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 16px; }
.rv-sum b { font-size: 15px; font-weight: 700; }
.rv-sum > span:last-child { font-size: 13.5px; color: var(--ink-3); }
.rv-sum .rv-stars svg { width: 20px; height: 20px; }
.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars svg { width: 16px; height: 16px; fill: var(--hair-strong); }
.rv-stars svg.on { fill: #F5A300; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; align-items: start; }
.rv { margin: 0; padding: 18px 18px 16px; border-radius: 16px; background: var(--grp); display: grid; gap: 12px; }
.rv-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.rv-text p { margin: 0; }
.rv-text p::before { content: "„"; }
.rv-text p::after { content: "“"; }
.rv-by { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--teal-bright) 18%, var(--fill)); color: var(--ink); font: 700 13px var(--font-display); }
.rv-who { display: grid; min-width: 0; }
.rv-who b { font-size: 14px; font-weight: 600; }
.rv-who small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-src { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 999px; background: var(--fill); font-size: 11.5px; color: var(--ink-3); text-decoration: none; }
a.rv-src:hover { color: var(--ink); }
.rv-proj { display: flex; align-items: center; gap: 9px; margin: 2px -6px -4px; padding: 7px 8px; border-radius: 10px; border-top: 1px solid var(--sep); color: var(--ink-2); font-size: 13px; text-decoration: none; }
.rv-proj:hover, .rv-proj:focus-visible { background: var(--fill); color: var(--ink); }
.rv-proj > span:not(.p-logo) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-proj .p-logo { flex: none; border-radius: 6px; font-size: 11px; }
.rv-proj .chev { width: 13px; height: 13px; color: var(--ink-3); }
.rv-empty { margin: 0; padding: 22px; border-radius: 16px; border: 1px dashed var(--hair-strong); color: var(--ink-3); text-align: center; }
.p-reviews { display: grid; gap: 12px; }
.p-reviews h2 { font-size: 17px; font-weight: 700; }

/* ---------- 404: schlichtes Fenster „4□4“. Eigene Klasse .nf, denn body trägt sx-404. ---------- */
.win[data-type="notfound"] .win-body { display: grid; }
/* Am Handy fließt das Fenster als Seite; das 404 füllt trotzdem den Bildschirm, damit es mittig steht. */
html.is-mobile .win[data-type="notfound"] .win-body { flex: 1 0 auto; }
.nf { min-height: 100%; padding: 28px 32px 32px; display: grid; gap: 10px; justify-items: center; align-content: center; text-align: center; }
.nf-art { width: min(220px, 70%); height: auto; margin-bottom: 8px; overflow: visible; color: var(--ink); }
.nf-d { font: 800 118px/1 var(--font-display); fill: currentColor; opacity: 0; animation: nf-up .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.nf-d2 { animation-delay: .22s; }
.nf-sq { fill: none; stroke: var(--teal-bright); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nf-draw .9s .45s cubic-bezier(.6, 0, .3, 1) forwards; }
.nf-lens { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; opacity: 0; animation: nf-in .35s 1.25s forwards, nf-seek 4s 1.4s ease-in-out infinite; }
.nf h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.nf .lead { margin: 0; max-width: 34ch; font-size: 14px; color: var(--ink-3); }
.nf .cta-row { justify-content: center; margin-top: 8px; }
@keyframes nf-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nf-draw { to { stroke-dashoffset: 0; } }
@keyframes nf-in { to { opacity: 1; } }
/* Die Lupe sucht das Innere des □ ab und findet nichts. */
@keyframes nf-seek { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-13px, -11px) rotate(-8deg); } 50% { transform: translate(12px, -8px) rotate(6deg); } 75% { transform: translate(6px, 11px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  .nf-d, .nf-lens { opacity: 1; animation: none; }
  .nf-sq { stroke-dashoffset: 0; animation: none; }
}

/* ---------- Kontakt: Formular ohne JavaScript ---------- */
html.sx-js .chat .classic { display: none; }
html:not(.sx-js) .chat-log, html:not(.sx-js) .chat .qr, html:not(.sx-js) .chat-input { display: none; }
.classic { padding: 18px; display: grid; gap: 12px; }
.classic h2 { font-size: 18px; }
.classic label { display: grid; gap: 5px; font-size: 13.5px; color: var(--ink-2); }
.classic input, .classic select, .classic textarea { width: 100%; min-height: 40px; border-radius: 12px; border: 1px solid var(--hair-strong); background: var(--glass); padding: 8px 12px; color: var(--ink); }
.classic .cl-check label { display: flex; gap: 10px; align-items: flex-start; }
.classic .cl-check input { width: auto; min-height: 0; margin-top: 3px; }
.chat-head .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.msg.summary { max-width: 88%; }
.msg.summary table { border-collapse: collapse; margin-top: 6px; font-size: 13.5px; }
.msg.summary td { padding: 2px 10px 2px 0; vertical-align: top; }
.msg.summary td:first-child { color: var(--ink-3); white-space: nowrap; }
.qr button.qr-secondary { border-color: var(--hair-strong); color: var(--ink-2); }

/* ---------- Vorschau im Elementor-Editor ---------- */
body.sx-preview { margin: 0; min-height: 100vh; background: linear-gradient(160deg, var(--wall-1), var(--wall-2)); color: var(--ink); font: 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
.sx-preview-wrap { padding: 28px 16px 60px; }
.sx-preview-win { max-width: var(--pw, 760px); margin: 0 auto; border-radius: var(--r-win); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: 0 30px 80px var(--shadow); container-type: inline-size; overflow: visible; min-height: 70vh; }
.sx-preview-main.appx-main { overflow: visible; }
body.sx-preview * { box-sizing: border-box; }
body.sx-preview h1, body.sx-preview h2, body.sx-preview h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0; }
body.sx-preview p { margin: 0; }

/* ---------- Kleine Bildschirme ---------- */
@container (max-width: 640px) {
  article.sx-doc { padding: 24px 20px 36px; }
  .sx-centered { padding: 24px 20px 36px; }
}
/* Die Vorschau im Editor scrollt normal, anders als der Schreibtisch. */
html:has(body.sx-preview) { height: auto; }
body.sx-preview { height: auto; overflow: visible; }
/* Abstände der Bausteine: Elementor packt jeden Baustein einzeln ein, deshalb nicht über :first-child.
   Ohne Abstand bleibt nur der allererste Baustein. Container tragen selbst die Klasse elementor-element,
   deshalb hier nur Widgets (elementor-widget) zählen. blk-first setzt das Skript zusätzlich. */
.appx-main .blk:first-child { padding-top: 48px; }
.appx-main .blk.blk-cta { padding-top: 36px; }
@container (max-width: 640px) { .appx-main .blk:first-child { padding-top: 36px; } }
.appx-main .blk.blk-hero, .appx-main .blk.blk.blk-first, .appx-main > .blk:first-child,
.appx-main > .elementor > .elementor-widget:first-child .blk,
.appx-main > .elementor > :is(.e-con, .e-flexbox, .e-div-block):first-child > .elementor-widget:first-child .blk,
.appx-main > .elementor > :is(.e-con, .e-flexbox, .e-div-block):first-child > :is(.e-con, .e-flexbox, .e-div-block):first-child > .elementor-widget:first-child .blk { padding-top: 0; }

/* ---------- Mobil: Startbildschirm fest, Inhalts-Apps scrollen als Seite ----------
   Der Startbildschirm ist genau so hoch wie der sichtbare Bereich (100dvh: mit oder ohne Browserleiste)
   und scrollt nicht. Passt sein Inhalt nicht, macht fitHome() in sebyos.js ihn stufenweise kompakter.
   Inhalts-Apps (.m-flow) scrollen als Dokument: Nur dann blenden mobile Browser ihre Leisten aus.
   Chat, Terminal und Spiele bleiben feste Vollbild-Blätter. Die Tapete steht als fester Hintergrund. */
html.is-mobile, html.is-mobile body { height: auto; min-height: 100%; }
html.is-mobile body { overflow: visible; }
html.is-mobile:not(.sheet-flow), html.is-mobile:not(.sheet-flow) body { overflow: hidden; overscroll-behavior: none; }
html.is-mobile body.sx #sx-page, html.is-mobile body.sx.admin-bar #sx-page { height: auto; min-height: 0; }
html.is-mobile.sheet-flow body.sx #sx-page { min-height: 100vh; min-height: 100svh; }
/* .page > .home: WordPress gibt dem body auf der Startseite ebenfalls die Klasse „home“. */
html.is-mobile .page > .home { flex: none; overflow: hidden; height: var(--seby-vh, 100vh); height: 100dvh; min-height: 0; }
html.is-mobile body.admin-bar .page > .home { height: calc(var(--seby-vh, 100vh) - var(--wp-admin--admin-bar--height, 46px)); height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px)); }
html.is-mobile .page > .home > .wallpaper { position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; }
html.is-mobile .home-scroll { position: relative; inset: auto; height: 100%; overflow: hidden; padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
html.is-mobile .page:has(#m-all) .home-scroll { padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }
/* Stufen, falls der Startbildschirm nicht passt (fitHome in sebyos.js). Sie gelten aufsteigend; was den
   Nutzen erklärt (Überschrift, Knöpfe, Zahl mit Unterzeile), bleibt am längsten. */
.home.fit-1 .home-scroll { gap: 10px; padding-top: 46px; }
.home.fit-1 .m-hero { padding: 13px 16px; gap: 8px; }
.home.fit-1 .m-hero .m-title { font-size: 23px; }
.home.fit-1 .m-wrow .widget { min-height: 112px; }
.home.fit-1 .m-grid { row-gap: 10px; }
.home.fit-2 .m-hero .m-title .kicker { display: none; }
.home.fit-3 .m-wrow .widget { min-height: 0; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 8px; }
.home.fit-3 .m-wrow .w-label { grid-column: 1 / -1; }
.home.fit-3 .m-wrow .w-big { font-size: 24px; }
.home.fit-3 .m-wrow .w-sub { font-size: 11.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home.fit-3 .m-wrow :is(.spark, .slots) { display: none; }
.home.fit-4 .m-hero p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home.fit-5 .m-hero p { display: none; }
.home.fit-6 .m-grid .appicon { width: 54px; height: 54px; border-radius: 14px; }
.home.fit-7 .m-wrow { display: none; }
.home.fit-8 .m-status { display: none; }
.home.fit-8 .home-scroll { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.page:has(> .home.fit-9) .m-dock { height: 70px; border-radius: 24px; }
.page:has(> .home.fit-9) .m-dock .appicon { width: 50px; height: 50px; border-radius: 13px; }
.page:has(> .home.fit-9) .m-all { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
html.is-mobile .page:has(> .home.fit-9) .home-scroll { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
html.is-mobile .page:has(#m-all):has(> .home.fit-9) .home-scroll { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
.home.fit-10 .home-scroll { overflow-y: auto; overscroll-behavior: contain; }
/* Knopf über dem Dock: zeigt alle Apps. */
.m-all { position: fixed; z-index: 50; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 13px 0 9px;
  border: 1px solid var(--glass-edge); border-radius: 99px; background: var(--glass); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  color: var(--ink); font: 600 12.5px/1 var(--font-body); white-space: nowrap; }
.m-all:active { background: var(--glass-strong); }
.m-all svg { width: 13px; height: 13px; }
html.is-mobile.sheet-flow .m-all { display: none; }
html.is-mobile.sheet-flow .page > .home, html.is-mobile.sheet-flow .m-dock { display: none; }
html.is-mobile .win.m-sheet.m-flow { position: relative; inset: auto; z-index: 1; min-height: 100vh; min-height: 100svh; overflow: visible; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.is-mobile .m-flow .ms-bar { position: sticky; top: 0; z-index: 20; background: var(--glass-strong); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); touch-action: none; }
html.is-mobile .m-flow .win-body { flex: none; overflow: visible; overflow-x: clip; }
html.is-mobile .m-flow .win-body.is-loading { min-height: 60vh; }
html.is-mobile .m-flow :is([data-sec], [id]) { scroll-margin-top: 76px; }

/* ---------- Alle Apps ----------
   Ein <dialog> über allem. Am Desktop eine Übersicht mit Suche, am Handy ein Blatt von unten, das sich
   nach unten wegziehen lässt (--p: 0 zu, 1 offen). */
dialog.all-apps { position: fixed; inset: 0; z-index: 900; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
dialog.all-apps:not([open]) { display: none; }
dialog.all-apps::backdrop { background: transparent; }
.aa-panel { display: flex; flex-direction: column; }
.aa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aa-head h2 { font: 800 22px/1.1 var(--font-display); letter-spacing: -.02em; }
.aa-close { flex: none; width: 34px; height: 32px; border: 0; border-radius: 10px; background: var(--fill); color: var(--ink-2); display: grid; place-items: center; }
.aa-close:hover { background: var(--fill-2, var(--fill)); color: var(--ink); }
.aa-close svg { width: 14px; height: 11px; }
.aa-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--fill); border: 1px solid var(--hair); }
.aa-search:focus-within { border-color: var(--teal); }
.aa-search svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.aa-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; -webkit-appearance: none; appearance: none; }
.aa-grid { display: grid; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.aa-app { display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; padding: 6px 2px; border-radius: 16px; color: var(--ink); text-decoration: none; font-weight: 500; text-align: center; }
.aa-app[hidden], .aa-none[hidden] { display: none; }
.aa-app .lbl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-none { display: grid; justify-items: center; gap: 12px; padding: 24px 16px; color: var(--ink-2); text-align: center; }
.aa-none p { margin: 0; }
html:not(.is-mobile) dialog.all-apps { background: color-mix(in srgb, var(--wall-2) 45%, transparent); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); opacity: 0; transition: opacity .22s ease; }
html:not(.is-mobile) dialog.all-apps.is-in { opacity: 1; }
html:not(.is-mobile) .aa-panel { width: min(960px, calc(100% - 64px)); height: 100%; margin: 0 auto; padding: 48px 0 28px; gap: 22px; transform: scale(1.04); transition: transform .26s var(--ease-out); }
html:not(.is-mobile) dialog.all-apps.is-in .aa-panel { transform: none; }
html:not(.is-mobile) .aa-grip { display: none; }
html:not(.is-mobile) .aa-head { position: relative; justify-content: center; }
html:not(.is-mobile) .aa-head h2 { font: 600 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
html:not(.is-mobile) .aa-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
html:not(.is-mobile) .aa-search { align-self: center; width: min(340px, 100%); height: 40px; border-radius: 99px; background: var(--glass); border-color: var(--glass-edge); }
html:not(.is-mobile) .aa-grid { flex: 1; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 26px 12px; padding: 4px 4px 12px; }
html:not(.is-mobile) .aa-app { padding: 10px 4px 8px; font-size: 13px; transition: background .15s; }
html:not(.is-mobile) .aa-app:hover { background: var(--fill); }
html:not(.is-mobile) .aa-app .appicon { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 10px 24px var(--shadow-soft); }
html.is-mobile dialog.all-apps { background: rgba(0, 0, 0, calc(var(--p, 0) * .32)); transition: background-color .38s var(--ease-out); }
html.is-mobile .aa-panel { position: absolute; left: 0; right: 0; bottom: 0; top: calc(12px + env(safe-area-inset-top, 0px)); border-radius: 26px 26px 0 0; border-top: 1px solid var(--glass-edge);
  background: var(--glass-strong); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: 0 -12px 40px var(--shadow-soft);
  transform: translateY(calc((1 - var(--p, 0)) * 100%)); transition: transform .38s var(--ease-out); will-change: transform; }
html.is-mobile dialog.all-apps.dragging, html.is-mobile dialog.all-apps.dragging .aa-panel { transition: none; }
.aa-grip { flex: none; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--ink-3); opacity: .45; }
html.is-mobile .aa-head { padding: 10px 16px 10px 20px; }
html.is-mobile .aa-search { margin: 0 16px 6px; }
html.is-mobile .aa-grid { flex: 1; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; padding: 12px 12px calc(28px + env(safe-area-inset-bottom, 0px)); }
html.is-mobile .aa-app { font-size: 11.5px; letter-spacing: -.01em; }
html.is-mobile .aa-app .appicon { width: 60px; height: 60px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { dialog.all-apps, dialog.all-apps .aa-panel { transition: none !important; } }

/* ---------- Apps aus Elementor: Projekte, Wissen, Imagefilm, Papierkorb ----------
   Enthält die App ihr sebyOS-Widget, ist die Elementor-Seite die Übersicht. */
.sx-el .elementor { width: 100%; }
.sx-el .e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.sx-el.gx-archive, .sx-el-detail, .sx-el-reviews { padding: 28px 32px 40px; }
.sx-el .blk:first-child, .sx-el .blk.blk-hero, .sx-el .blk.blk-first { padding-top: 0; }
.sx-el .blk.gx, .sx-el .blk.kb-blk { padding-top: 22px; }
.sx-el .blk.gx:first-child, .sx-el .elementor-widget:first-child .blk.gx { padding-top: 0; }
.gx .gallery { height: auto; }
.gx .g-main { overflow: visible; padding: 0; }
.gx-top .gallery, .gx-none .gallery { display: block; }
.gx-side .gallery { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.gx-side .appx-side { position: sticky; top: 0; border: 1px solid var(--sep); border-radius: 14px; }
.gx-chips { margin: -4px 0 18px; }
.kb-hub.kb-el { display: block; }
.kb-el .kb-blk { display: grid; gap: 18px; }
.kb-el .kb-tools { margin-top: 0; }
.film-app.no-side { grid-template-columns: minmax(0, 1fr); }
.sx-el-film .film-app, .sx-el-trash .app { min-height: 0; }
@container (max-width: 640px) {
  .sx-el.gx-archive, .sx-el-detail, .sx-el-reviews { padding: 20px 16px 32px; }
  .gx-side .gallery { display: block; }
  .gx-side .appx-side { display: none; }
  .gx-chips { flex-wrap: nowrap; overflow-x: auto; margin: -4px -16px 16px; padding: 0 16px 2px; scrollbar-width: none; }
}

/* ---------- Wissen: Fragen-Hub ---------- */
.kb { min-height: 100%; }
.kb-hub { padding: 36px 44px 48px; display: grid; gap: 18px; align-content: start; max-width: 820px; margin: 0 auto; }
.kb-head { display: grid; gap: 8px; }
.kb-head h1, .kb-head h2 { font: 800 32px/1.08 var(--font-display); letter-spacing: -.02em; margin: 0; }
.kb-tools { display: grid; gap: 12px; position: sticky; top: 0; z-index: 2; padding: 10px 0 6px; margin-top: -4px; background: linear-gradient(var(--glass-strong) 78%, transparent); }
.kb-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 14px; background: var(--fill); border: 1px solid var(--hair); transition: border-color .15s, box-shadow .15s; }
.kb-search:focus-within { border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: 0 0 0 4px var(--teal-soft); }
.kb-search svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.kb-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: 500 15.5px var(--font-body); }
.kb-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.kb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.kb-chips button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--hair); background: var(--fill); color: var(--ink-2); font: 600 13px var(--font-body); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.kb-chips button:first-child { padding-left: 12px; }
.kb-chips button:hover { background: var(--fill-2); color: var(--ink); }
.kb-chips button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.kb-chips .appicon { width: 20px; height: 20px; border-radius: 6px; box-shadow: none; }
.kb-n { font: 600 11px var(--font-mono); opacity: .6; }
.kb-list { display: grid; gap: 10px; }
.kb-q { border-radius: 16px; background: var(--grp); border: 1px solid transparent; transition: background .2s, border-color .2s, box-shadow .2s; }
.kb-q[open] { background: var(--surface); border-color: var(--hair); box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 35%, transparent); }
.kb-q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 16px 18px; }
.kb-q summary::-webkit-details-marker { display: none; }
.kb-q summary .kb-topic { grid-column: 1; }
.kb-title { grid-column: 1; margin: 0; font: 700 17px/1.3 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.kb-chev { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--ink-3); transform: rotate(90deg); transition: transform .2s var(--ease-out, ease); }
.kb-q[open] .kb-chev { transform: rotate(-90deg); color: var(--teal); }
.kb-q summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 16px; }
.kb-topic { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kb-topic .appicon { width: 20px; height: 20px; border-radius: 6px; box-shadow: none; }
.kb-a { padding: 0 18px 18px; display: grid; gap: 12px; }
.kb-q[open] .kb-a { animation: kbIn .25s var(--ease-out, ease); }
@keyframes kbIn { from { opacity: 0; transform: translateY(-4px); } }
.kb-benefit { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.kb-benefit svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--teal); }
.kb-benefit b { color: var(--teal); }
.kb-benefit-lg { font-size: 16px; padding: 14px 16px; }
.kb-kurz { color: var(--ink-2); line-height: 1.65; font-size: 15px; }
.kb-kurz p { margin: 0 0 10px; } .kb-kurz p:last-child { margin: 0; }
.kb-more { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--teal); text-decoration: none; }
.kb-more svg { width: 15px; height: 15px; transition: transform .15s; }
.kb-more:hover svg { transform: translateX(3px); }
.kb-none { text-align: center; padding: 18px; }
.kb-ask { margin-top: 6px; padding: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.kb-ask b { grid-column: 1; font-size: 15px; } .kb-ask span { grid-column: 1; font-size: 13.5px; }
.kb-ask .btn { grid-column: 2; grid-row: 1 / span 2; }
.kb-read { max-width: 820px; margin: 0 auto; }
.kb-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink-2); text-decoration: none; justify-self: start; }
.kb-back:hover { color: var(--teal); }
.kb-back svg { width: 16px; height: 16px; }
.kb-rhead { display: grid; gap: 10px; }
.kb-rhead h1 { margin: 0; }
.kb-related h2 { font-size: 15px; font-weight: 700; margin: 8px 0 8px; color: var(--ink); }
.kb-related ul { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--grp); overflow: hidden; }
.kb-related li + li { border-top: 1px solid var(--sep); }
.kb-related a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.kb-related a:hover { background: var(--fill-2); }
.kb-related svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
@container (max-width: 640px) {
  .kb-hub { padding: 22px 16px 32px; }
  .kb-head h1, .kb-head h2 { font-size: 26px; }
  .kb-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .kb-chips::-webkit-scrollbar { display: none; }
  .kb-q summary { padding: 14px; } .kb-a { padding: 0 14px 14px; }
  .kb-ask { grid-template-columns: 1fr; } .kb-ask .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .kb-q[open] .kb-a { animation: none; } .kb-chev { transition: none; } }

/* ---------- Spiele ---------- */
.games { min-height: 100%; display: grid; }
.gm-hub { padding: 36px 40px 44px; display: grid; gap: 22px; align-content: start; }
.gm-head { display: grid; gap: 8px; max-width: 62ch; }
.gm-head h1 { font: 800 32px/1.08 var(--font-display); letter-spacing: -.02em; margin: 0; }
.gm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.gm-card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; padding: 16px; border-radius: 18px; background: var(--grp); border: 1px solid var(--hair); }
.gm-card h2 { font: 800 19px/1.2 var(--font-display); margin: 4px 0 0; }
.gm-card > p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.gm-art { height: 104px; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--teal-soft), transparent 60%), var(--fill); }
.gm-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--hair-strong) 1.2px, transparent 1.3px); background-size: 14px 14px; opacity: .7; }
.gm-art .appicon { width: 56px; height: 56px; position: relative; }
.gm-art-snake { background: radial-gradient(circle at 75% 70%, var(--magenta-soft), transparent 55%), var(--fill); }
.gm-art-inbox { background: radial-gradient(circle at 70% 30%, var(--magenta-soft), transparent 60%), var(--fill); }
.gm-benefit { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); align-self: end; }
.gm-benefit b { display: block; font: 700 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 2px; }
.gm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.gm-foot .btn[disabled] { opacity: .55; }
.gm-best { font: 600 12px var(--font-mono); color: var(--ink-3); }
.gm-stage { display: grid; min-height: 100%; }
.gm-play { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 14px 18px 16px; min-height: 100%; outline: none; }
/* Über den Tafeln, damit „Alle Spiele“ immer erreichbar bleibt. */
.gm-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; position: relative; z-index: 6; }
.gm-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--fill); color: var(--ink-2); font: 600 13px var(--font-body); height: 32px; padding: 0 12px 0 8px; border-radius: 9px; cursor: pointer; }
.gm-back:hover { background: var(--fill-2); color: var(--ink); }
.gm-back svg { width: 15px; height: 15px; }
.gm-name { font: 800 16px var(--font-display); text-align: center; }
.gm-score { font: 600 13px var(--font-mono); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-score b { color: var(--ink); font-size: 15px; }
.gm-field { position: relative; display: grid; place-items: center; min-height: 260px; }
.gm-hint { margin: 0; text-align: center; font: 12px var(--font-mono); color: var(--ink-3); }
.gm-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 5; background: color-mix(in srgb, var(--glass-strong) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 0 0 var(--r-win) var(--r-win); }
.gm-panel { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 440px; animation: pop .3s var(--ease-out); }
.gm-panel .muted { margin: 0; font-size: 13px; }
.gm-end { padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 20px 50px var(--shadow); }
.gm-result { margin: 0; font: 800 22px/1.25 var(--font-display); }
.gm-newbest { margin: 0; font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.gm-why { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--teal-soft); text-align: left; }
.gm-why b { font: 700 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.gm-why p { margin: 0; color: var(--ink); line-height: 1.5; font-size: 14.5px; }
.gm-end .cta-row { justify-content: center; }
.gm-crash { animation: gmShake .4s; }
@keyframes gmShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* Snake */
.gm-canvas { display: block; border-radius: 14px; background: var(--grp); border: 1px solid var(--hair); touch-action: none; max-width: 100%; }
.gm-play.is-snake .gm-field { align-content: center; gap: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
/* Lücken schließen */
/* touch-action: schnelles Tippen dreht zweimal, statt als Doppeltipp zu zoomen. */
.gm-pipes { --t: min(64px, calc((100cqi - 220px) / var(--c)), calc(60vh / var(--r))); display: grid; grid-template-columns: auto auto auto; align-items: start; gap: 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.gm-grid { display: grid; grid-template-columns: repeat(var(--c), var(--t)); grid-auto-rows: var(--t); border-radius: 12px; overflow: hidden; background: var(--grp); border: 1px solid var(--hair); }
/* Route: welche Systeme verbunden werden müssen; jede Station leuchtet, sobald sie angeschlossen ist. */
.gm-route { grid-column: 1 / -1; justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; margin: 0 0 2px; font: 600 11.5px var(--font-mono); color: var(--ink-3); }
.gm-route span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; background: var(--fill); transition: background .2s, color .2s; }
.gm-route span.on { background: var(--teal-soft); color: var(--ink); }
.gm-route b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; background: var(--ink-3); color: var(--surface); }
.gm-route span.on b { background: var(--teal-bright); color: #fff; }
.gm-route i { font-style: normal; opacity: .6; }
.gm-tile { position: relative; border: 0; padding: 0; background: none; cursor: pointer; color: var(--ink-3); outline-offset: -3px; }
@media (hover: hover) { .gm-tile:hover { background: var(--fill); } }
.gm-tile:active { background: var(--fill-2); }
.gm-tile:active .gm-rot { scale: .92; }
.gm-tile:focus-visible { outline: 2px solid var(--teal); }
.gm-rot { position: absolute; inset: 0; display: block; transition: transform .18s var(--ease-out), scale .12s; }
.gm-rot svg { width: 100%; height: 100%; display: block; }
.gm-rot path { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: butt; opacity: .55; }
.gm-rot circle { fill: currentColor; opacity: .55; }
.gm-tile.on { color: var(--teal-bright); }
.gm-tile.on path, .gm-tile.on circle { opacity: 1; }
/* Station: nur eine Nummer in der Mitte, damit die Leitung sichtbar bleibt; der Name steht in der Route. */
.gm-st { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 700 11px/1 var(--font-mono); font-style: normal; background: var(--surface); color: var(--ink); border: 2px solid var(--ink-3); pointer-events: none; z-index: 1; }
.gm-tile.on .gm-st { background: var(--teal-bright); color: #fff; border-color: var(--teal-bright); }
/* Ein- und Ausgang am Rand des Rasters: hier kommen die Daten herein und gehen hinaus. */
.gm-tile.is-src::before, .gm-tile.is-dst::after { content: ""; position: absolute; top: 50%; width: 5px; height: 40%; transform: translateY(-50%); background: var(--ink-3); z-index: 1; }
.gm-tile.is-src::before { left: 0; border-radius: 0 4px 4px 0; } .gm-tile.is-dst::after { right: 0; border-radius: 4px 0 0 4px; }
.gm-tile.is-src.on::before { background: var(--teal-bright); } .gm-pipes:has(.gm-dst.on) .gm-tile.is-dst::after { background: var(--magenta); }
.gm-node { height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9px; font: 700 12px var(--font-mono); background: var(--fill-2); color: var(--ink-2); border: 1px solid var(--hair); white-space: nowrap; transition: background .2s, color .2s; }
.gm-src { margin-top: calc(var(--sy) * var(--t) + var(--t) / 2 - 15px); }
.gm-dst { margin-top: calc(var(--dy) * var(--t) + var(--t) / 2 - 15px); }
.gm-node.on { background: var(--teal-bright); color: #fff; border-color: transparent; }
.gm-dst.on { background: var(--magenta); }
/* Hochkant (Handy): Eingang oben, Ausgang unten, die Beschriftung steht genau über bzw. unter ihrer Spalte. */
.gm-pipes.is-v { --t: min(68px, calc((100cqi - 30px) / var(--c)), calc((100svh - 330px) / var(--r))); grid-template-columns: auto; justify-items: start; gap: 6px; }
.gm-pipes.is-v .gm-route { width: calc(var(--c) * var(--t) + 2px); }
.gm-pipes.is-v .gm-node { margin: 0 0 0 calc(var(--sx) * var(--t) + 1px); }
.gm-pipes.is-v .gm-dst { margin-left: calc(var(--dx) * var(--t) + 1px); }
.gm-pipes.is-v .gm-node.al-r { justify-self: end; margin: 0 calc((var(--c) - var(--sx) - 1) * var(--t) + 1px) 0 0; }
.gm-pipes.is-v .gm-dst.al-r { margin-right: calc((var(--c) - var(--dx) - 1) * var(--t) + 1px); }
.gm-pipes.is-v .gm-node { gap: 5px; }
.gm-pipes.is-v .gm-node::before { content: "↓"; }
.gm-pipes.is-v .gm-tile.is-src::before, .gm-pipes.is-v .gm-tile.is-dst::after { left: 50%; right: auto; width: 40%; height: 5px; transform: translateX(-50%); }
.gm-pipes.is-v .gm-tile.is-src::before { top: 0; border-radius: 0 0 4px 4px; }
.gm-pipes.is-v .gm-tile.is-dst::after { top: auto; bottom: 0; border-radius: 4px 4px 0 0; }
.gm-win .gm-tile.on path { animation: gmFlow .9s ease-in-out; }
@keyframes gmFlow { 50% { stroke-width: 13; filter: drop-shadow(0 0 6px var(--teal-bright)); } }
/* Posteingang */
.gm-inbox { width: min(520px, 100%); display: grid; gap: 14px; }
.gm-timer { height: 6px; border-radius: 6px; background: var(--fill-2); overflow: hidden; }
.gm-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--teal-bright)); transform-origin: left; }
.gm-stack { position: relative; height: 190px; touch-action: none; }
.gm-mail { position: absolute; inset: 0; margin: 0 auto; max-width: 420px; display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 14px 34px var(--shadow-soft, rgba(0,0,0,.15)); transform: translateY(calc(var(--d) * 9px)) scale(calc(1 - var(--d) * .04)); opacity: calc(1 - var(--d) * .28); z-index: calc(3 - var(--d)); transition: transform .2s var(--ease-out); }
.gm-mail small { font: 600 12px var(--font-mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mail b { font: 800 20px/1.25 var(--font-display); }
.gm-lines { display: grid; gap: 6px; margin-top: 6px; } .gm-lines i { height: 8px; border-radius: 4px; background: var(--fill-2); } .gm-lines i + i { width: 62%; }
.gm-mail.fly { z-index: 4; transition: transform .38s var(--ease-out), opacity .38s; opacity: 0; }
.gm-mail.fly-left { transform: translate(-70%, 10px) rotate(-12deg); } .gm-mail.fly-right { transform: translate(70%, 10px) rotate(12deg); } .gm-mail.fly-down { transform: translateY(70%) scale(.8); }
.gm-mail.is-ok { border-color: var(--good); } .gm-mail.is-no { border-color: var(--magenta); }
.gm-queue { position: absolute; right: 0; top: -10px; z-index: 5; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 13px; display: grid; place-items: center; font: 700 12px var(--font-mono); background: var(--ink); color: var(--surface); }
.gm-queue.hot { background: var(--magenta); color: #fff; animation: pulse 1.2s infinite; }
.gm-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gm-folder { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--hair); background: var(--fill); color: var(--ink); font: 700 13.5px var(--font-body); cursor: pointer; }
.gm-folder:hover { background: var(--fill-2); }
.gm-folder svg { width: 22px; height: 22px; color: var(--teal); }
.gm-folder kbd { font: 600 11px var(--font-mono); color: var(--ink-3); }
.gm-folder.ok { animation: gmOk .45s; } .gm-folder.no { animation: gmNo .45s; } .gm-folder.hint { animation: gmHint .7s; }
@keyframes gmOk { 30% { background: color-mix(in srgb, var(--good) 22%, transparent); border-color: var(--good); } }
@keyframes gmNo { 30% { background: var(--magenta-soft); border-color: var(--magenta); transform: translateX(-3px); } 60% { transform: translateX(3px); } }
@keyframes gmHint { 40% { border-color: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 30%, transparent); } }
@container (max-width: 640px) {
  .gm-hub { padding: 22px 16px 30px; }
  .gm-head h1 { font-size: 26px; }
  .gm-play { padding: 10px 12px 14px; }
  .gm-name { display: none; }
  .gm-bar { grid-template-columns: auto 1fr; } .gm-score { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .gm-rot, .gm-mail { transition: none; } .gm-crash, .gm-win .gm-tile.on path, .gm-queue.hot { animation: none; } }

/* Versteckt heißt versteckt: Viele Teile (Ausschalt-Tafel, Menüs, minimierte Fenster) haben eine
   eigene display-Regel, die das hidden-Attribut sonst aushebelt. */
body.sx [hidden]:not([hidden="until-found"]), body.sx-preview [hidden]:not([hidden="until-found"]) { display: none !important; }