/* ═══════════════════════════════════════════════════════════════════════
   tada.ae — gemeinsames Stylesheet.
   Reihenfolge ist Absicht: Tokens → Basis → Nav → Bausteine → Szenen →
   Breakpoints → Nutzersignale → Druckfeedback. Die :active-Regeln stehen
   GANZ UNTEN, siehe Kommentar dort.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* Marke — unverändert. Der Verlauf ist die Palette des Maskottchens:
     Panda mit Zauberstab im Zylinder, rote Krempe, schwarze Funken. */
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --ink:#1D1D1F;
  --ink2:#6E6E73;
  --line:rgba(0,0,0,.08);
  --accent:#B3272C;
  --accent2:#6E6E73;
  --magic:linear-gradient(120deg,#2C2C2E 0%,#6E6E73 50%,#D6272E 100%);
  --green:#30D158;
  --orange:#FF9500;
  --red:#FF3B30;
  --pillbg:rgba(0,0,0,.05);
  --gh-filter:none;

  /* Farbe auf getönter Fläche braucht dunklere Schrift als auf Weiß. */
  --ok-ink:#0F7029;

  /* Radien — vier Stufen. Pillen 999px, Punkte 50%. */
  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;

  /* Schatten — Kontakt, Körper, Umfeld. --shadow-amb ist rot getönt und
     nur für Schwebendes. --shadow-3 ist die tiefste Stufe: sie trägt die
     Panels und die Telefone. */
  --shadow-1:0 1px 2px rgba(20,18,24,.04),0 4px 12px rgba(20,18,24,.05),0 16px 40px rgba(20,18,24,.06);
  --shadow-2:0 2px 4px rgba(20,18,24,.05),0 10px 28px rgba(20,18,24,.08),0 32px 72px rgba(20,18,24,.10);
  --shadow-amb:0 30px 80px -20px rgba(179,39,44,.28);
  --shadow-3:0 18px 24px rgba(20,18,24,.10),0 44px 70px rgba(20,18,24,.16);

  /* Glas. Die Blur-Stufe folgt der Fläche: große Flächen lesen dicker.
     Die Nav ist die dichtere Struktur-Ebene — sie schwebt über allem,
     auch über hellen Bildern, und muss dort lesbar bleiben. */
  --glass:rgba(255,255,255,.62);
  --nav-glass:rgba(245,245,247,.80);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 58%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.75);
  --blur-sm:blur(16px) saturate(160%);
  --blur:blur(24px) saturate(180%);
  --blur-lg:blur(30px) saturate(190%);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-mat:cubic-bezier(.2,.8,.2,1);

  /* Sheets für Panels */
  --tile-border:linear-gradient(120deg,rgba(44,44,46,.35) 0%,rgba(110,110,115,.25) 45%,rgba(214,39,46,.30) 100%);
  --pf-border:linear-gradient(120deg,rgba(62,125,176,.35),rgba(99,161,176,.30) 60%,rgba(18,58,94,.35));
  --sheet-bg:radial-gradient(130% 140% at 80% 0%,#FFFFFF 0%,#F3F2F8 55%,#ECEBF2 100%);
  --pf-bg:radial-gradient(130% 140% at 15% 0%,#E9F1F7 0%,#F3F7FA 55%,#EDF2F6 100%);
  --sheet-ink:#1D1D1F;
  --sheet-sub:#5F5F66;
  --pf-sub:#41566B;
  --pf-chip-ink:#2E4A66;
  --pf-chip-bg:rgba(62,125,176,.08);
  --pf-chip-line:rgba(62,125,176,.20);

  /* Terminal */
  --term-win:#FFFFFF;
  --term-bar:#F0F0F3;
  --term-ink:#3A3A42;
  --term-dim:#6A6A72;
  --term-line:rgba(0,0,0,.08);
  --code-bg:#F0F0F3;
  --code-ink:#3A3A42;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,Segoe UI,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
  --font-mono:"SF Mono",ui-monospace,Menlo,monospace;
}

html[data-theme="dark"]{
  --bg:#0A0A0C;
  --surface:#161618;
  --ink:#F5F5F7;
  --ink2:#98989D;
  --line:rgba(255,255,255,.12);
  --accent:#FF6A61;
  --accent2:#AEAEB2;
  --green:#30D158;
  --orange:#FF9F0A;
  --red:#FF453A;
  --pillbg:rgba(255,255,255,.09);
  --gh-filter:invert(1);

  --ok-ink:#30D158;

  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.40),0 16px 40px rgba(0,0,0,.45);
  --shadow-2:0 2px 4px rgba(0,0,0,.40),0 10px 28px rgba(0,0,0,.50),0 32px 72px rgba(0,0,0,.60);
  --shadow-amb:0 30px 80px -20px rgba(255,106,97,.30);
  --shadow-3:0 18px 24px rgba(0,0,0,.45),0 44px 70px rgba(0,0,0,.55);

  --glass:rgba(28,28,32,.58);
  --nav-glass:rgba(10,10,12,.80);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 58%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.09);

  --tile-border:linear-gradient(120deg,rgba(180,180,185,.40) 0%,rgba(140,140,145,.35) 45%,rgba(255,90,80,.45) 100%);
  --pf-border:linear-gradient(120deg,rgba(99,161,176,.50),rgba(62,125,176,.45) 60%,rgba(99,161,176,.50));
  --sheet-bg:radial-gradient(130% 130% at 80% 0%,#171226 0%,#0C0B12 55%,#09090D 100%);
  --pf-bg:radial-gradient(130% 140% at 15% 0%,#0D2740 0%,#0A1626 55%,#081019 100%);
  --sheet-ink:#F5F5F7;
  --sheet-sub:#AEAEB8;
  --pf-sub:#A9BCCC;
  --pf-chip-ink:#C4D9EA;
  --pf-chip-bg:rgba(255,255,255,.07);
  --pf-chip-line:rgba(255,255,255,.10);

  --term-win:#101014;
  --term-bar:#17171C;
  --term-ink:#C9C9D2;
  --term-dim:#8A8A93;
  --term-line:rgba(255,255,255,.08);
  --code-bg:#101014;
  --code-ink:#C9C9D2;
}

/* ── Basis ────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font);
  font-size:1.0625rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  transition:background .35s ease,color .35s ease;
}

/* Grundwäsche. Sie ist tragend, nicht Dekor: ohne sie hat backdrop-filter
   nichts aufzunehmen und jede Glasfläche liest sich grau und flach.
   Alphas unter 10 % sind dabei keine Gestaltung, sondern Messwerte. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 42% at 14% 8%,color-mix(in srgb,#2C2C2E 11%,transparent),transparent 70%),
    radial-gradient(55% 40% at 88% 58%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
    radial-gradient(70% 50% at 50% 108%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 72%);
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(60% 42% at 14% 8%,color-mix(in srgb,#AEAEB2 13%,transparent),transparent 70%),
    radial-gradient(55% 40% at 88% 58%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
    radial-gradient(70% 50% at 50% 108%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 72%);
}

a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
::selection{background:rgba(214,39,46,.22)}

/* Jedes Bedienelement trägt alle drei Zustände: :hover, :active,
   :focus-visible. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.btn:focus-visible,.ios-switch:focus-visible,.list-more:focus-visible,.logo:focus-visible{border-radius:999px}
a,button,summary{touch-action:manipulation}

/* Skip-Link. z-index eins über der Nav (60), sonst schiebt sich die Pille
   darüber. tabindex="-1" am <main> ist Pflicht — ohne es bleibt der Fokus
   hier hängen und die nächste Tab-Taste landet wieder in der Nav. */
.skip{
  position:fixed;left:12px;top:-100px;z-index:61;
  padding:10px 18px;border-radius:999px;
  background:var(--surface);color:var(--accent);
  font-weight:600;font-size:.875rem;
  box-shadow:var(--shadow-2);
  transition:top .2s var(--ease);
}
.skip:focus{top:12px}
main:focus{outline:none}

/* ── Nav: schwebende Pille ────────────────────────────────────────────── */
/* sticky statt fixed: das Element bleibt im Fluss und braucht keinen
   Platzhalter, der bei jeder Höhenänderung nachgeführt werden müsste.
   Eine Pille hat keine Kante zum Ausblenden — der Scrollzustand
   verstärkt stattdessen den Schatten. */
nav.site{
  position:sticky;top:12px;z-index:60;
  width:min(1080px,calc(100% - 24px));margin:12px auto 0;
  border-radius:999px;background:var(--nav-glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1),var(--glass-edge);
  transition:box-shadow .3s ease;
}
nav.site.scrolled{box-shadow:var(--shadow-2),var(--glass-edge)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 10px 0 18px}

.logo{display:flex;align-items:center;gap:10px;color:var(--ink);transform-origin:left center;will-change:transform}
.logo-mark{height:38px;width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}
html[data-theme="dark"] .logo-mark{filter:drop-shadow(0 0 6px rgba(255,106,97,.45)) drop-shadow(0 0 14px rgba(174,174,178,.3))}
.logo-word{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.025em}

.nav-right{display:flex;align-items:center;gap:12px}
.nav-links{display:flex;gap:20px;margin-right:4px}
/* Vibrancy: Text auf Glas braucht mehr Gewicht als auf deckender Fläche. */
.nav-links a{color:var(--ink2);font-size:.875rem;font-weight:600;letter-spacing:.005em;transition:color .2s}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.logo:hover{opacity:.82}

.ios-switch{
  position:relative;width:44px;height:26px;border-radius:999px;
  cursor:pointer;background:rgba(120,120,128,.32);
  transition:background .25s ease;flex-shrink:0;
}
html[data-theme="dark"] .ios-switch{background:var(--accent)}
.ios-switch::after{
  content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.12);
  transition:transform .25s var(--ease-mat),background-image .1s;
}
html[data-theme="dark"] .ios-switch::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  transform:translateX(18px);
}

/* Der Panda-Moment: ein Feder-Impuls beim Theme-Wechsel, sonst bleibt er
   Logo. Schreibt auf transform — deshalb prüft die Nav-Feder in app.js auf
   die Klasse, bevor sie ihrerseits transform setzt. */
@keyframes tada{
  0%{transform:scale(var(--logo-s,1)) rotate(0)}
  35%{transform:scale(calc(var(--logo-s,1) * 1.14)) rotate(-7deg)}
  65%{transform:scale(calc(var(--logo-s,1) * .97)) rotate(4deg)}
  100%{transform:scale(var(--logo-s,1)) rotate(0)}
}
.logo-mark.tada{animation:tada .62s var(--ease-mat)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--bg);
  font-weight:600;font-size:1rem;letter-spacing:-.005em;
  padding:13px 26px;border-radius:999px;cursor:pointer;
  transition:transform .2s var(--ease),filter .2s,background .2s;
}
.btn:hover{transform:scale(1.03)}
.btn.magic{background:var(--magic);color:#fff;box-shadow:0 8px 24px rgba(214,39,46,.3)}
.btn.ghost{background:var(--pillbg);color:var(--ink)}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.btn.small{font-size:.875rem;padding:8px 16px;white-space:nowrap}

/* ── Typografie ───────────────────────────────────────────────────────── */
h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.5rem,6vw,4.25rem);
  line-height:1.04;letter-spacing:-.035em;
  max-width:18ch;text-wrap:balance;
}
h1 .magic-text{background:var(--magic);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.875rem,4vw,3rem);
  line-height:1.06;letter-spacing:-.032em;text-wrap:balance;
}
h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.022em}
.sec-lead{
  margin-top:18px;color:var(--ink2);
  font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.55;
  max-width:62ch;text-wrap:pretty;
}
.kicker{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent);margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:statuspulse 2.4s ease infinite}
@keyframes statuspulse{50%{opacity:.35}}

/* ── Kapitel-Marker ───────────────────────────────────────────────────── */
.chapter{padding:104px 0 0;scroll-margin-top:88px}
.chapter-inner{display:flex;align-items:center;gap:18px;max-width:760px;margin:0 auto}
.chapter-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line) 35%,var(--line) 65%,transparent)}
.chapter-name{font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}

/* ── Szenen: eine Aussage, eine Bühne ─────────────────────────────────── */
.scene{padding:132px 0;scroll-margin-top:88px}
section[id]{scroll-margin-top:88px}
.scene-copy{min-width:0}
.scene-head{text-align:center;max-width:740px;margin:0 auto}
.scene-head .sec-lead{margin-left:auto;margin-right:auto}
.scene-fig{position:relative;margin:56px auto 0;max-width:900px;min-width:0}
.scene-fig.wide{max-width:none}

/* Zweispaltig: Aussage links, Bühne rechts. .rev dreht die Seiten —
   abwechselnd, damit nicht mehrere Szenen dasselbe Muster zeigen. */
.scene.split .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.scene.split .scene-head{text-align:left;max-width:none;margin:0}
.scene.split .scene-head .kicker{justify-content:flex-start}
.scene.split .scene-head .sec-lead{margin-left:0}
.scene.split .scene-fig{margin:0;max-width:none}
.scene.split.rev .wrap{direction:rtl}
.scene.split.rev .wrap>*{direction:ltr}

/* ── Das Panel ────────────────────────────────────────────────────────── */
/* Träger der Live-Daten. Es war einmal ein Gerät — gebänderter
   Metallverlauf, schwarzer Blendenring, Glasreflex. Auf einer sonst flachen,
   typografischen Seite war dieser Ring das dunkelste Objekt überhaupt, und
   achtmal wiederholt war er kein Signaturobjekt mehr, sondern Tapete.
   Jetzt trägt die Kante, was vorher das Metall trug.
   Bewusst ohne aspect-ratio: der Inhalt bestimmt die Höhe. */
.sheet{position:relative}
.sheet-in{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);color:var(--sheet-ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow-3);
}
.sheet-bar{
  position:relative;z-index:2;
  display:flex;align-items:center;
  padding:13px 20px;background:var(--term-bar);
  border-bottom:1px solid var(--term-line);
}
/* min-width:0 ist Pflicht: ohne es schrumpft die nowrap-Zeile nicht und der
   Titel drückt das Panel über seine Rasterspalte hinaus. */
.sheet-bar span{min-width:0;flex:1;font-size:.71875rem;color:var(--term-dim);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Markenstreifen an der Oberkante — das einzige Zeichen am Panel. */
.sheet-bar::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--magic)}
.sheet-body{position:relative;z-index:1}

/* Konsolen-Kleid: eigener, leicht getönter Grund, damit das Terminal nicht
   dasselbe Blatt ist wie die Datenpanels daneben. */
.sheet.term .sheet-in{background:var(--code-bg)}
.sheet.term .sheet-body{padding:16px 18px 22px;font-family:var(--font-mono);font-size:.78125rem;line-height:1.75;color:var(--term-ink)}
.sheet.term .p{color:#C0392F}
html[data-theme="dark"] .sheet.term .p{color:#FF6A61}
.sheet.term .g{color:var(--ok-ink)}
.sheet.term .y{color:#8A5200}
html[data-theme="dark"] .sheet.term .y{color:#FFD60A}
.sheet.term .d{color:var(--term-dim)}
.sheet.term .cursor{display:inline-block;width:7px;height:14px;background:var(--term-ink);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* Aussage mittig, Bühne darunter: das Panel steht nicht mehr NEBEN dem Text
   in einer zweiten Spalte, sondern als flacher Streifen über die volle
   Spaltenbreite DARUNTER und läuft unten aus dem Rahmen.
   overflow:hidden ist dabei tragend, nicht vorsichtshalber — ohne das
   Clipping ragt der Streifen in den Kapitel-Marker.
   Die Zweispaltigkeit ist absichtlich weg: sie war die generischste Form,
   die der Hero haben konnte, und machte die Live-Zahlen zum Beiwerk neben
   der Aussage statt zur Bühne unter ihr. */
.hero{position:relative;padding:138px 0 0;overflow:hidden;text-align:center}
.hero-copy{min-width:0}
.hero h1{max-width:none;margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  padding:7px 16px;border-radius:999px;margin-bottom:20px;
}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:statuspulse 2.4s ease infinite}
.hero p.lead{margin:22px auto 0;font-size:1.25rem;color:var(--ink2);max-width:56ch;line-height:1.5;text-wrap:pretty}
.hero p.lead a{font-weight:600}
.hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
/* Nur im Hero zentriert — .hero-cta steht auch in Szene 1 und soll dort
   linksbündig bleiben. */
.hero .hero-cta{justify-content:center}

/* Die Bühne: volle Spaltenbreite, 48 px unter den Hero geschoben. Der
   Anschnitt ist konstant, weil .hero unten kein Polster mehr hat — 48 minus
   0. Der Träger bewegt sich per Parallaxe (data-par im Markup), deshalb
   muss das Polster im Streifen den Anschnitt PLUS den Weg abdecken. */
.hero-stage{position:relative;z-index:1;margin:138px 0 -16px;text-align:left}

/* Der Panda hinter dem Streifen. --panda-h ist die Bildhöhe bei --panda-w,
   --panda-peek wieviel davon am Ende oben steht. Daraus rechnet sich der
   Versatz: alles darunter liegt unter der Schnittkante und wird von
   .hero{overflow:hidden} abgeschnitten. Er bewegt sich NICHT — freigelegt
   wird er allein dadurch, dass der Streifen über ihn hinweg nach oben
   wandert (120 px Weg − 16 px Anschnitt = 104 px Band, der Panda braucht 96).
   Das Band muss das ganze Maskottchen fassen: der Panda steckt im Zylinder,
   und ein Band von 66 px schnitt ihn mitten durch die Hutkrempe. Die
   restlichen 14 px stehen unter der Schnittkante, damit er in der Kante
   sitzt statt auf ihr zu schweben. */
.hero-panda{
  --panda-w:93px; --panda-h:110px; --panda-peek:96px;
  position:absolute;z-index:0;left:50%;
  bottom:calc(var(--panda-peek) - var(--panda-h));
  width:var(--panda-w);height:auto;
  transform:translateX(-50%);pointer-events:none;
}
/* Dunkel versinkt das Maskottchen im Grund — schwarzer Zylinder auf fast
   schwarzer Fläche. Derselbe Glow, den die Nav ihrem Logo gibt. */
html[data-theme="dark"] .hero-panda{
  filter:drop-shadow(0 0 6px rgba(255,106,97,.45)) drop-shadow(0 0 14px rgba(174,174,178,.3));
}
/* Exakt die Schwelle aus app.js: darunter läuft keine Parallaxe, der
   Streifen hebt sich nie und der Panda bliebe für immer verdeckt. */
@media (max-width:899px){ .hero-panda{display:none} }

/* ── Status-Zeilen (im Fenster) ───────────────────────────────────────── */
.st-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  width:100%;padding:14px 20px;cursor:pointer;text-align:left;color:inherit;
  transition:background .15s,transform .2s var(--ease);
}
.st-row+.st-row{border-top:1px solid var(--term-line)}
.st-row:hover{background:color-mix(in srgb,var(--sheet-ink) 5%,transparent)}
.st-dot{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--sheet-sub) 30%,transparent);transition:background .4s,box-shadow .4s}
.st-dot.ok{background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 18%,transparent)}
.st-dot.warn{background:var(--orange)}
.st-dot.down{background:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 18%,transparent)}
.st-main{display:flex;flex-direction:column;min-width:0}
.st-name{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.st-sub{font-size:.78125rem;color:var(--sheet-sub)}
.st-state{font-size:.78125rem;font-weight:600;white-space:nowrap}
.st-state.ok{color:var(--ok-ink)}
.st-state.down{color:var(--red)}
.st-state.warn{color:var(--sheet-sub)}
.st-ms{font-size:.75rem;color:var(--sheet-sub);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.st-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;border-top:1px solid var(--term-line);
  font-size:.78125rem;color:var(--sheet-sub);font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--sheet-ink) 3%,transparent);
}
.st-foot button{color:var(--accent);font-weight:600;cursor:pointer;transition:opacity .2s}

/* Kennzahlen statt Dienstzeilen: die Einzelwerte mit Antwortzeit stehen in
   Szene 1 — hier steht nur, was daraus folgt. Die Uhr ist das laufende Ding
   auf dem Schirm und steht deshalb im Panel, nicht unter den Buttons. */
.sheet-clock{
  display:flex;flex-direction:column;gap:2px;
  padding:26px 22px 22px;border-bottom:1px solid var(--term-line);
}
.wc-time{font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.wc-sub{font-size:.8125rem;color:var(--sheet-sub);letter-spacing:.01em}

.sheet-kpi{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:26px 18px 48px}
.sheet-kpi>div{display:flex;flex-direction:column-reverse;align-items:center;gap:6px;min-width:0;text-align:center}
.sheet-kpi>div+div{border-left:1px solid var(--term-line)}
.sheet-kpi dd{margin:0;font-size:2.125rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.sheet-kpi dd.bad{color:var(--red)}
.sheet-kpi dt{font-size:.75rem;color:var(--sheet-sub);letter-spacing:.02em}

/* ── .sheet.strip — die Hero-Bühne ────────────────────────────────────── */
/* Dasselbe Panel, eine Zeile statt zwei: Uhr links, drei Kennzahlen rechts.
   Unten offen, weil es dort angeschnitten wird — kein Radius, keine Kante.
   --strip-pad steht oben und unten gleich. Der Anschnitt ist mit 16 px
   kleiner als das Polster, unter den Labels bleiben in Ruhe also 22 px
   stehen. Nach unten bewegt sich nichts (data-par-max), das Polster wird
   nicht angegriffen. Wer es
   kürzt, schneidet die Labels ab — genau das ist hier schon passiert. */
/* Voller Radius und Kante rundum — anders als früher: die Unterkante ist
   nicht mehr dauerhaft angeschnitten, sie kommt beim Scrollen frei. */
/* Oben und unten derselbe Wert — der Streifen kommt beim Scrollen ganz ins
   Bild, dort liest sich jede Ungleichheit sofort als schiefer Kasten.
   Vorher standen 30 px oben gegen 52 px unten. */
.sheet.strip .sheet-body{display:grid;grid-template-columns:auto 1fr;padding:0 26px var(--strip-pad)}
.sheet.strip{--strip-pad:38px}
/* space-between statt flex-start: die Uhr ist niedriger als die Kennzahlen
   (1.75rem gegen 2.125rem), stand deshalb 7 px zu hoch und ihre Ortszeile
   nicht auf einer Linie mit den Labels. So sitzen beide Enden bündig. */
.sheet.strip .sheet-clock{padding:var(--strip-pad) 30px 0 0;border-bottom:0;justify-content:space-between;gap:4px}
.sheet.strip .sheet-kpi{padding:var(--strip-pad) 0 0 30px;border-left:1px solid var(--term-line)}

/* ── Container-Updates (im Fenster) ───────────────────────────────────── */
.upd-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:13px 20px}
.upd-row+.upd-row{border-top:1px solid var(--term-line)}
.upd-dot{width:9px;height:9px;border-radius:50%}
.upd-dot.ok{background:var(--green)}
.upd-dot.update{background:var(--red)}
.upd-dot.pinned{background:var(--sheet-sub)}
.upd-name{font-weight:600;font-size:.9375rem;letter-spacing:-.01em}
.upd-ver{font-size:.78125rem;color:var(--sheet-sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.upd-badge{font-size:.71875rem;font-weight:700;letter-spacing:.05em;padding:4px 12px;border-radius:999px;white-space:nowrap}
.upd-badge.ok{color:var(--ok-ink);background:color-mix(in srgb,var(--green) 16%,transparent)}
.upd-badge.update{color:var(--accent);background:color-mix(in srgb,var(--red) 16%,transparent)}
.upd-badge.pinned{color:color-mix(in srgb,var(--sheet-ink) 70%,transparent);background:color-mix(in srgb,var(--sheet-ink) 8%,transparent)}

/* ── Live-Tiles (Grafana / Uptime Kuma) ───────────────────────────────── */
.live-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.live-tile{
  position:relative;display:block;
  border-radius:var(--r-lg);padding:1.5px;background:var(--tile-border);
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.live-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.live-tile-inner{
  border-radius:calc(var(--r-lg) - 1.5px);
  background:var(--sheet-bg);color:var(--sheet-ink);
  padding:30px 30px 28px;display:flex;flex-direction:column;gap:16px;
  min-height:236px;overflow:hidden;position:relative;
}
.lt-head{display:flex;align-items:center;justify-content:space-between}
.lt-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  color:var(--ok-ink);background:color-mix(in srgb,var(--green) 14%,transparent);
  padding:4px 11px;border-radius:999px;
}
.lt-pill i{width:6px;height:6px;border-radius:50%;background:var(--ok-ink);animation:statuspulse 2.2s ease infinite}
.lt-open{font-size:.8125rem;font-weight:600;color:var(--sheet-sub);transition:color .2s}
.live-tile:hover .lt-open{color:var(--sheet-ink)}
.lt-title{font-family:var(--font-display);font-weight:700;font-size:1.3125rem;letter-spacing:-.022em}
.lt-sub{font-size:.875rem;color:var(--sheet-sub);margin-top:-6px;max-width:30ch;line-height:1.55}
.lt-art{position:absolute;right:24px;bottom:22px;opacity:.9;pointer-events:none}

/* Zeichnen erst beim Reveal, nicht beim Laden. */
.spark path{fill:none;stroke:url(#sparkgrad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220}
.spark .area{fill:url(#sparkfill);stroke:none;opacity:0}
.is-in .spark path{animation:draw 2.4s ease forwards}
.is-in .spark .area{animation:fadein 1s ease forwards 1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.upbars{display:flex;gap:3.5px;align-items:flex-end}
.upbars i{width:6px;height:22px;border-radius:3px;background:var(--green);opacity:0;transform:scaleY(.4);transform-origin:bottom}
.upbars i.warn{background:var(--orange)}
.is-in .upbars i{animation:barin .45s var(--ease-mat) forwards;animation-delay:calc(var(--i,0) * 38ms)}
@keyframes barin{to{opacity:1;transform:scaleY(1)}}

/* ── Glow-Panel ───────────────────────────────────────────────────────── */
/* Das kontrastreichste Element der Seite: dunkles Panel auf hellem Grund.
   Der Rahmen nutzt NICHT --magic — dessen anthrazitfarbenes Ende
   verschwindet auf fast schwarzem Grund. Dieselben Farben, andere Folge. */
.glow-panel{
  position:relative;border-radius:var(--r-xl);padding:2px;
  background:linear-gradient(120deg,var(--accent2),#AEAEB2 55%,#D6272E);
  box-shadow:var(--shadow-2),var(--shadow-amb);
}
.glow-inner{
  position:relative;border-radius:calc(var(--r-xl) - 2px);
  background:radial-gradient(140% 120% at 85% 10%,#2A2A2E 0%,#141418 45%,#0A0A0C 100%);
  color:#F5F5F7;overflow:hidden;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:460px;
}
.glow-copy{padding:56px 24px 56px 56px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.glow-copy h3{font-size:clamp(1.625rem,3.2vw,2.375rem);letter-spacing:-.025em;line-height:1.12}
.glow-copy h3 em{font-style:normal;color:#FF8A80}
.glow-copy p{font-size:1rem;line-height:1.6;color:#B8B8BE;max-width:44ch;text-wrap:pretty}
.glow-visual{position:relative;overflow:visible}

/* Kleine Karte, unten offen — sie läuft aus dem Panel heraus. */
.mini-card{
  position:absolute;right:48px;top:56px;bottom:0;width:min(300px,82%);
  border-radius:14px 14px 0 0;border:1px solid rgba(255,255,255,.10);border-bottom:0;
  background:#141418;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
}
.mc-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#1E1E24;border-bottom:1px solid rgba(255,255,255,.07)}
.mc-bar span{min-width:0;flex:1;font-size:.65rem;color:#9A9AA2;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-body{padding:16px 16px 20px}
.mc-head{font-size:.6875rem;font-weight:600;letter-spacing:.1em;color:#9A9AA2;margin-bottom:5px}
.mc-title{font-weight:700;font-size:1rem;color:#fff;margin-bottom:14px}
.mc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.mc-row .k{font-size:.75rem;color:#9A9AA2}
.mc-row .v{font-size:.875rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.mc-row .v.new{color:#FF8A80}
.mc-row .v.old{color:#9A9AA2;text-decoration:line-through;font-weight:400;font-size:.75rem;margin-right:6px}

.glow-pill{
  position:absolute;left:-32px;top:auto;bottom:56px;z-index:5;
  border-radius:var(--r-md);padding:2px;
  background:linear-gradient(100deg,#D6272E,var(--accent2) 55%,#AEAEB2);
  box-shadow:0 0 40px rgba(214,39,46,.45),0 12px 40px rgba(0,0,0,.5);
  animation:glowpulse 3.2s ease-in-out infinite;
}
@keyframes glowpulse{50%{box-shadow:0 0 64px rgba(214,39,46,.7),0 12px 40px rgba(0,0,0,.5)}}
.glow-pill-in{border-radius:calc(var(--r-md) - 2px);background:rgba(10,10,12,.94);padding:14px 20px;width:max(250px,min(310px,calc(100vw - 72px)))}
.glow-pill-in .t{font-weight:700;font-size:.9375rem;color:#FF8A80;display:flex;gap:8px;align-items:center}
.glow-pill-in .d{font-size:.78125rem;color:#B8B8BE;margin-top:3px}

/* ── PlaneFault-Abschnitt ─────────────────────────────────────────────── */
/* Das einzige Gerät, das geblieben ist. Die Datenpanels haben ihre Rahmen
   abgelegt, die App-Screenshots nicht: ein 620 × 1348 großer Hochkant-Screen
   ohne Telefon drumherum liest als angeschnittenes Bild, nicht als App.
   Die Größe steuert --pw, alle anderen Maße rechnen sich daraus. */
.shot{
  --pw:200px;
  --rail-a:#FBFCFD; --rail-b:#C4CBD3; --rail-c:#6E7883; --rail-d:#525B65;
  --bezel:#08090B; --rail-edge:rgba(20,18,24,.34);
  position:relative;width:var(--pw);
  padding:calc(var(--pw) * .032);
  border-radius:calc(var(--pw) * .173);
  background:linear-gradient(147deg,
    var(--rail-a) 0%, var(--rail-b) 5%, var(--rail-c) 11%, var(--rail-a) 17%,
    var(--rail-b) 29%, var(--rail-d) 45%, var(--rail-c) 58%, var(--rail-a) 68%,
    var(--rail-b) 78%, var(--rail-d) 88%, var(--rail-b) 95%, var(--rail-a) 100%);
  box-shadow:
    0 0 0 .5px var(--rail-edge),
    0 2px 3px rgba(20,18,24,.16),
    var(--shadow-3),
    inset 0 0 0 .5px rgba(255,255,255,.6);
}
html[data-theme="dark"] .shot{
  --rail-a:#AEB6C0; --rail-b:#7A838D; --rail-c:#49515A; --rail-d:#343B43;
  --rail-edge:rgba(255,255,255,.22);
  box-shadow:
    0 0 0 .5px var(--rail-edge),
    0 2px 3px rgba(0,0,0,.55),
    var(--shadow-3),
    inset 0 0 0 .5px rgba(255,255,255,.28);
}
/* Kein aspect-ratio, kein object-fit: das Bild bestimmt die Höhe, sonst
   beschneidet der Rahmen genau das, was er zeigen soll. Der Blendenring
   liegt als box-shadow am Bild und füllt damit das Polster des Rahmens. */
.shot img{
  display:block;width:100%;height:auto;background:#000;
  border-radius:calc(var(--pw) * .145);
  box-shadow:0 0 0 calc(var(--pw) * .017) var(--bezel);
}
/* Glasreflex über dem Schirm. Liegt im Polster-Inset, nimmt keine Klicks. */
.shot::after{
  content:"";position:absolute;inset:calc(var(--pw) * .032);pointer-events:none;
  border-radius:calc(var(--pw) * .145);
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 18%,
    rgba(255,255,255,0) 34%,rgba(255,255,255,0) 100%);
}

.pf-panel{
  position:relative;border-radius:var(--r-xl);padding:1.5px;
  background:var(--pf-border);box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.pf-panel:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.pf-inner{
  border-radius:calc(var(--r-xl) - 1.5px);
  background:var(--pf-bg);color:var(--sheet-ink);
  display:grid;grid-template-columns:1fr 1.1fr;overflow:hidden;position:relative;
}
html[data-theme="dark"] .pf-inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(2px 2px at 15% 30%,rgba(255,255,255,.25) 0,transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 15%,rgba(255,255,255,.18) 0,transparent 100%),
    radial-gradient(2px 2px at 75% 60%,rgba(255,255,255,.14) 0,transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 25%,rgba(255,255,255,.2) 0,transparent 100%);
}
.pf-copy{padding:56px 26px 56px 52px;display:flex;flex-direction:column;justify-content:center;gap:20px;position:relative;z-index:1}
.pf-eyebrow{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pf-chip-ink);background:var(--pf-chip-bg);padding:6px 14px;border-radius:999px;
}
.pf-eyebrow i{width:7px;height:7px;border-radius:50%;background:#3E7DB0;animation:statuspulse 2.2s ease infinite}
.pf-brand{display:flex;align-items:center;gap:12px}
.pf-mark{width:46px;height:46px;border-radius:11px;overflow:hidden;box-shadow:0 6px 20px rgba(18,58,94,.35);flex-shrink:0}
.pf-mark img{width:100%;height:100%;display:block}
.pf-brand b{font-family:var(--font-display);font-size:1.625rem;font-weight:700;letter-spacing:-.022em}
.pf-copy h3{font-size:clamp(1.625rem,3.2vw,2.25rem);line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
.pf-copy h3 em{font-style:normal;background:linear-gradient(120deg,#3E7DB0,#63A1B0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-copy p{font-size:.96875rem;line-height:1.6;color:var(--pf-sub);max-width:44ch;text-wrap:pretty}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{font-size:.75rem;font-weight:600;color:var(--pf-chip-ink);background:var(--pf-chip-bg);border:1px solid var(--pf-chip-line);padding:5px 13px;border-radius:999px}
/* Apples Badge wird nicht umgefärbt und nicht umgebaut — nur der Link darum
   bewegt sich. Schwarz auf hellem Panel, weiß auf dunklem; den Tausch macht
   swapThemedImages() über data-light/data-dark. Kein eigenes :active: das
   Badge liegt im .pf-panel, dessen Druckfeedback beim Kind mitfeuert. */
.pf-store{display:inline-flex;align-self:flex-start;transition:transform .2s var(--ease)}
.pf-store img{display:block;width:140px;height:auto}
.pf-store:hover{transform:scale(1.03)}
/* Ein Gerät im Panel, unten aus dem Rahmen laufend — der Auftakt. Die
   übrigen Ansichten bekommen je eine eigene Szene, statt zu dritt
   nebeneinander zu stehen. */
.pf-visual{position:relative;overflow:hidden;min-height:500px}
/* absolut positioniert — justify-content greift hier nicht, das Zentrieren
   muss über left/translate laufen. */
.shot.hero-shot{
  --pw:258px;position:absolute;left:50%;bottom:-64px;
  transform:translateX(-50%);
  transition:transform .5s var(--ease-mat);
}
.pf-panel:hover .shot.hero-shot{transform:translateX(-50%) translateY(-12px)}

/* Die PlaneFault-Folge: vier Szenen, ein Gerät je Szene, Seiten im
   Wechsel. Sie gehören zusammen und atmen deshalb enger als die
   Hauptszenen der Seite. */
.scene.seq{padding:78px 0}
.scene.seq .scene-head h3{font-size:clamp(1.5rem,2.8vw,2.125rem);line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
.scene.seq .scene-fig{display:flex;justify-content:center}
.scene.seq .shot{--pw:min(258px,72vw)}
/* Derselbe Griff wie am PlaneFault-Kasten: dort hebt sich der Kasten (-4px)
   und der Screenshot darin (-12px). Hier gibt es keinen Kasten — das Gerät
   trägt beide Bewegungen selbst, mit derselben Kurve und Dauer.
   Geschrieben wird auf transform; die Parallaxe dieser Geräte (data-par)
   liegt auf translate und kommt sich damit nicht in die Quere. */
.scene.seq .shot{transition:transform .5s var(--ease-mat),box-shadow .35s ease}
.scene.seq .shot:hover{transform:translateY(-12px)}

/* ── Karten (Bento) ───────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bento .card:first-child{grid-column:span 2}
.card{
  position:relative;display:block;overflow:hidden;color:var(--ink);
  background:var(--glass);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1),var(--glass-edge);
  padding:32px;
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--glass-sheen)}
.card>*{position:relative}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2),var(--glass-edge)}
a.card::after{content:"↗";position:absolute;top:22px;right:24px;font-size:.9375rem;color:var(--ink2);opacity:0;transition:opacity .25s}
a.card:hover::after{opacity:1}
.card h3{font-size:1.3125rem;margin-bottom:6px}
.card p{font-size:.9375rem;color:var(--ink2);line-height:1.5;text-wrap:pretty}
.card .chip{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.more-center{text-align:center;margin-top:36px}

/* ── Listen (Links / Repos) ───────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.list-card{
  position:relative;overflow:hidden;
  background:var(--glass);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1),var(--glass-edge);
}
.list-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--glass-sheen)}
.list-card>*{position:relative}
.list-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px 14px;font-size:.75rem;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.14em}
.list-row{display:flex;flex-direction:column;gap:1px;padding:14px 26px;border-top:1px solid var(--line);color:var(--ink);transition:background .15s,transform .2s var(--ease)}
a.list-row:hover{background:var(--pillbg)}
.list-row b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.list-row span{font-size:.8125rem;color:var(--ink2)}
.list-more{display:block;text-align:center;padding:14px;border-top:1px solid var(--line);font-size:.84375rem;font-weight:600;color:var(--accent);transition:background .15s}
.list-more:hover{background:var(--pillbg)}
.gh-logo{height:17px;width:auto;filter:var(--gh-filter);opacity:.85}

/* Listenseiten: eine einzelne Karte, mittig, luftigere Zeilen. */
.list-card.solo{max-width:720px;margin:0 auto}
.list-card.solo .list-row{padding-top:18px;padding-bottom:18px}
.list-card.solo .list-row b{font-size:1rem}
.flush-top .list-row:first-child{border-top:0}

/* ── Unterseiten-Kopf ─────────────────────────────────────────────────── */
header.page{padding-top:72px;padding-bottom:40px}
header.page .kicker{justify-content:flex-start}
header.page h1{font-size:clamp(2.125rem,5vw,3.25rem);letter-spacing:-.03em;line-height:1.05;max-width:20ch}
header.page .sec-lead{max-width:56ch}
main.page-main{padding-bottom:96px}

/* ── Artikel ──────────────────────────────────────────────────────────── */
.article-wrap{max-width:740px;margin:0 auto;padding:56px 24px 96px}
.article-hero{width:100%;height:300px;object-fit:cover;border-radius:var(--r-lg);display:block;margin-bottom:32px;box-shadow:var(--shadow-2);background:var(--sheet-bg)}
.article-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;font-size:.875rem;color:var(--ink2)}
.article-tag{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--magic);padding:4px 13px;border-radius:999px}
.article-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.875rem,5vw,2.75rem);letter-spacing:-.032em;line-height:1.08;margin-bottom:16px;max-width:none;text-wrap:balance}
.article-lead{font-size:1.1875rem;color:var(--ink2);line-height:1.55;margin-bottom:36px;text-wrap:pretty}
.article-body{font-size:1.03125rem;line-height:1.7}
.article-body p{margin-bottom:22px;max-width:68ch}
.article-body h2{font-size:clamp(1.375rem,3vw,1.75rem);margin:44px 0 14px}
.article-body h3{font-size:1.125rem;margin:32px 0 10px}
.article-body ul,.article-body ol{margin:0 0 22px 24px}
.article-body li{margin-bottom:6px}
.article-body code{font-family:var(--font-mono);font-size:.84375rem;background:var(--pillbg);padding:2px 7px;border-radius:6px}
.article-body pre{background:var(--code-bg);color:var(--code-ink);border-radius:var(--r-md);padding:20px;overflow-x:auto;margin-bottom:22px;border:1px solid var(--line)}
.article-body pre code{background:none;padding:0;font-size:.8125rem;line-height:1.65}
.article-body blockquote{border-left:3px solid var(--accent);padding-left:18px;margin:0 0 22px;color:var(--ink2)}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.cta{padding:132px 0 120px;text-align:center}
.cta .sec-head{margin:0 auto}
.cta-btns{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Footer ───────────────────────────────────────────────────────────── */
/* Bewusst opak: der Footer ist Boden, kein Glas. Eine saubere Kante,
   kein weicher Verlauf — der lässt den Abschluss ausfransen. */
footer.site{
  background:var(--surface);border-top:1px solid var(--line);
  padding:56px 0 36px;color:var(--ink2);font-size:.875rem;
}
.foot-grid{display:grid;grid-template-columns:2fr repeat(3,minmax(0,1fr));gap:40px}
.foot-brand .logo{gap:14px}
.foot-brand .logo-mark{height:46px}
.foot-wordmark{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2.25vw,1.625rem);letter-spacing:-.03em;line-height:1.05;background:var(--magic);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-brand p{margin-top:13px;max-width:32ch;font-size:.84375rem}
.foot-col h4{font-size:.75rem;font-weight:700;color:var(--ink);margin-bottom:13px;text-transform:uppercase;letter-spacing:.14em}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:9px}
.foot-col a{color:var(--ink2);transition:color .2s;font-size:.84375rem}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:.8125rem}
.foot-status{display:inline-flex;align-items:center;gap:8px}
.foot-status i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:statuspulse 2.4s ease infinite}
.foot-status.bad i{background:var(--red)}

/* ── Scroll-Reveal ────────────────────────────────────────────────────── */
/* Der Versatz zählt pro Szene, nicht global — sonst driftet die Verzögerung
   über die Seite hinweg immer weiter auf. Alles hängt an html.js, das
   app.js noch im <head> setzt: ohne JS wird nichts versteckt. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
/* Glas kommt als Material an, statt einzublenden. */
.js .reveal.card,.js .reveal.list-card{
  backdrop-filter:blur(0) saturate(100%);-webkit-backdrop-filter:blur(0) saturate(100%);
  scale:.96;
  transition:opacity .6s ease,transform .6s ease,backdrop-filter .6s ease,scale .6s var(--ease-mat);
}
.js .reveal.card.is-in,.js .reveal.list-card.is-in{
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);scale:1;
}

/* ── Breakpoints ──────────────────────────────────────────────────────── */
/* Der Hero ist auf jeder Breite einspaltig und braucht deshalb keine
   1100er-Stufe mehr. Der Streifen bricht erst, wenn die vier Zellen
   nebeneinander zu eng werden. */
@media (max-width:920px){
  .scene{padding:88px 0}
  .chapter{padding:72px 0 0}
  .cta{padding:88px 0 80px}
  .scene.split .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  /* Einspaltig gibt es keine Seiten mehr zu tauschen. Bleibt rtl stehen,
     rutscht die Szene aus dem linken Bildrand — und scrollWidth meldet das
     nicht, weil es nur Überlauf nach rechts zählt. */
  .scene.split.rev .wrap{direction:ltr}
  .scene.split .scene-head{text-align:center}
  .scene.split .scene-head .kicker{justify-content:center}
  .scene.split .scene-head .sec-lead{margin-left:auto;margin-right:auto}
  .scene.split .scene-fig{max-width:900px;margin:36px 0 0}
  .bento{grid-template-columns:1fr}
  .bento .card:first-child{grid-column:auto}
  .duo{grid-template-columns:1fr}
  .live-duo{grid-template-columns:1fr}
  .lt-art{position:static;margin-top:auto}
  .nav-links{gap:14px;margin-right:0}
  .nav-links a{font-size:.78125rem}
  .nav-inner{height:58px}
  .logo-mark{height:32px}
  .logo-word{font-size:1.0625rem}
  .pf-inner{grid-template-columns:1fr}
  .pf-copy{padding:34px 26px 16px}
  .pf-visual{min-height:420px}
  .shot.hero-shot{--pw:min(228px,60vw);bottom:-52px}
  .scene.seq{padding:56px 0}
  .scene.seq .shot{--pw:min(230px,62vw)}
  .glow-inner{grid-template-columns:minmax(0,1fr);min-height:0}
  .glow-copy{padding:32px 24px 24px;gap:20px}
  .glow-visual{min-height:380px}
  .mini-card{right:50%;transform:translateX(50%);top:64px;width:min(280px,84%)}
  .glow-pill{left:50%;transform:translateX(-50%);top:6px;bottom:auto;animation:none}
  /* Die Karten am Rand der Bühne haben hier keinen Rand mehr. */
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1/-1}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .cta-btns .btn{width:100%;max-width:340px}
  .article-hero{height:200px}
  header.page{padding-top:44px;padding-bottom:28px}
}
@media (max-width:760px){
  /* Uhr über die volle Breite, Kennzahlen darunter zu dritt. Die Trennlinie
     wandert von links nach unten, sonst steht sie quer im Umbruch. */
  .sheet.strip .sheet-body{grid-template-columns:1fr;padding:0 20px 62px}
  .sheet.strip .sheet-clock{
    padding:24px 0 20px;border-bottom:1px solid var(--term-line);
    flex-direction:row;align-items:baseline;gap:10px;
  }
  .sheet.strip .sheet-kpi{padding:24px 0 0;border-left:0}
  /* Weniger Anschnitt auf kleinen Schirmen: der Streifen ist dort ein
     größerer Anteil des Bildes, 48 px säßen wie ein Fehler. */
  .hero-stage{margin:36px 0 -30px}
}
/* Die Pille wird eng, lange bevor 380px erreicht sind. Es weicht zuerst das
   Wortzeichen, dann der Sprungmarken-Link — beide sind anderswo erreichbar.
   Die drei Seitenlinks und der CTA bleiben auf jeder Breite stehen: sie sind
   der einzige Weg zu den übrigen Seiten. */
@media (max-width:700px){
  .logo-word{display:none}
}
@media (max-width:560px){
  /* Führt auf dasselbe Ziel wie der CTA daneben. */
  .nav-links a.nav-anchor{display:none}
  /* Der CTA bleibt — er wird nur kürzer beschriftet. */
  .hide-narrow{display:none}
}
@media (max-width:640px){
  :root{--r-lg:22px;--r-xl:26px}
  .wrap{padding:0 18px}
  nav.site{top:10px;margin-top:10px}
  .nav-inner{height:56px;padding:0 8px 0 14px}
  .logo{gap:8px}
  .logo-mark{height:28px}
  .logo-word{font-size:1rem}
  .nav-right{gap:8px}
  .btn.small{font-size:.8125rem;padding:7px 13px}
  .scene{padding:64px 0}
  .chapter{padding:56px 0 0}
  .chapter-name{letter-spacing:.1em;white-space:normal}
  .scene-fig{margin-top:36px}
  /* Kein Polster unten — es zoege sonst den Anschnitt ab. */
  .hero{padding:40px 0 0}
  .cta{padding:64px 0 72px}
  .card{padding:24px}
  .live-tile-inner{padding:24px 22px 22px;min-height:0}
  .pf-copy{padding:28px 22px 16px}
  .glow-copy{padding:28px 20px 20px}
  .sheet.term .sheet-body{font-size:.6875rem;overflow-x:auto}
  .st-row{grid-template-columns:auto 1fr auto;padding:13px 16px}
  .st-ms{display:none}
  .st-foot{flex-wrap:wrap;gap:6px;padding:11px 16px}
  .upd-row{grid-template-columns:auto 1fr auto;padding:12px 16px}
  .upd-ver{display:none}
  .list-row,.list-head,.list-more{padding-left:18px;padding-right:18px}
  .article-wrap{padding:40px 18px 72px}
}
@media (max-width:360px){
  .wrap{padding:0 14px}
  .nav-inner{padding:0 6px 0 10px}
  .nav-links{gap:9px}
  .nav-links a{font-size:.75rem}
  .nav-right{gap:7px}
  /* Der Schalter schrumpft mit — 44px sind hier ein Viertel der Zeile.
     Die Trefferfläche bleibt über den Innenabstand der Pille erhalten. */
  .ios-switch{width:36px;height:22px}
  .ios-switch::after{width:18px;height:18px}
  html[data-theme="dark"] .ios-switch::after{transform:translateX(14px)}
  .btn.small{font-size:.75rem;padding:6px 10px}
  .upbars{gap:2.5px}
  .upbars i{width:4px}
  .article-wrap{padding-left:14px;padding-right:14px}
}

/* ── Die drei Nutzersignale ───────────────────────────────────────────── */
/* Kein pauschales *{transition:none}. Das trifft auch die Hell/Dunkel-
   Überblendung am body und macht aus dem Theme-Wechsel einen harten
   Helligkeitssprung — genau die Härte, die die Einstellung vermeiden soll.
   Deckkraft und Farbe bleiben, Bewegung geht. */
@media (prefers-reduced-motion:reduce){
  .kicker i,.eyebrow i,.lt-pill i,.pf-eyebrow i,.foot-status i,
  .sheet.term .cursor,.logo-mark.tada,.glow-pill{animation:none!important}
  .is-in .spark path{stroke-dashoffset:0;animation:none!important}
  .is-in .spark .area{opacity:1;animation:none!important}
  .is-in .upbars i{opacity:1;transform:none;animation:none!important}
  .js .reveal{transform:none!important;scale:1!important;transition:opacity .4s ease}
  .js .reveal.card,.js .reveal.list-card{backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg)}
  .btn:hover,a.card:hover,.live-tile:hover,.pf-panel:hover,.pf-store:hover{transform:none}
  .pf-panel:hover .shot.hero-shot{transform:translateX(-50%)}
  .scene.seq .shot:hover{transform:none}
  .btn:active,.ios-switch:active,.logo:active,.st-row:active,
  a.card:active,a.list-row:active,.live-tile:active{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  :root,html[data-theme="dark"]{
    --glass:var(--surface);
    --nav-glass:var(--bg);
    --glass-sheen:none;
    --blur-sm:none;--blur:none;--blur-lg:none;
  }
  body::before{display:none}
  .card::before,.list-card::before{display:none}
}
@media (prefers-contrast:more){
  :root,html[data-theme="dark"]{--glass:var(--surface);--nav-glass:var(--bg);--blur-sm:none;--blur:none;--blur-lg:none}
  .card,.list-card{border-width:1.5px;border-color:var(--ink2)}
  .live-tile,.pf-panel{background:var(--ink2)}
  .upd-badge,.lt-pill,.pf-chip,.card .chip,.eyebrow{outline:1px solid currentColor}
  :focus-visible{outline-width:3px}
}

/* ── Druckfeedback ────────────────────────────────────────────────────── */
/* MUSS am Ende stehen. :hover und :active greifen beide auf transform bei
   gleicher Spezifität — steht :hover später, gewinnt es und das
   Druckfeedback ist mit Maus tot (und auf Touch unsichtbar, also leicht zu
   übersehen). Feedback gehört auf den Druck, nicht auf das Loslassen.
   Das Tap-Highlight darf nur unterdrückt sein, WEIL es das hier ersetzt. */
.btn:active,a.card:active,.live-tile:active,.pf-panel:active{
  transform:scale(.97);transition:transform 100ms ease-out;
}
.ios-switch:active{transform:scale(.92);transition:transform 100ms ease-out}
.logo:active{transform:scale(.98);transition:transform 100ms ease-out}
.st-row:active,a.list-row:active{transform:scale(.99);transition:transform 100ms ease-out}
.nav-links a:active,.foot-col a:active,.list-more:active,
.st-foot button:active{opacity:.6;transition:opacity 80ms ease-out}