/* =========================================================================
   lyvor.io/demo — „Digitaler Sachbearbeiter zum Anfassen"
   Task 1: Bühne (dunkel) + Mail-Fenster (hell) + No-JS-Fundament.
   Tokens aus der Bestandsseite (index.html:45–49) + Paper-Ableitung fürs Fenster.
   Signature der Demo (Chaos → Ordnung) folgt in Task 4; hier nur das Gerüst.
   ========================================================================= */

:root{
  /* Bühne — identisch zur Live-Site */
  --ink:#05060b; --ink2:#0a0c14; --glass:rgba(18,22,34,.55);
  --line:rgba(226,234,255,.1); --hair:rgba(226,234,255,.05);
  --txt:#f1f3f9; --dim:#a6acbe; --lab:#9298ab;
  --blue:#5fa8ff; --cyan:#9fe0ff; --core:#eaf4ff; --done:#3bd694;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Mail-Fenster — eigenständige Paper-Ableitung (kein MS-Klon) */
  --paper:#f7f8fb; --paper-2:#eceff5; --paper-3:#e2e6ef;
  --paper-ink:#1a1d26; --paper-dim:#5a6072; --paper-lab:#676d80;
  --paper-line:rgba(20,24,40,.10); --paper-hair:rgba(20,24,40,.05);

  /* Status-Akzente (auf hellem Papier lesbar) — Textfarben abgedunkelt:
     ≥4.5:1 in ALLEN Zuständen (Liste normal/hover/is-active + Detail #fff/paper),
     komposit über den realen Tint-Ketten nachgerechnet (QS-Gate-Welle). */
  --st-entwurf:#255cbb;  --st-entwurf-bg:rgba(95,168,255,.14);  --st-entwurf-bd:rgba(95,168,255,.34);
  --st-dringend:#a82a3e; --st-dringend-bg:rgba(224,64,86,.12);  --st-dringend-bd:rgba(224,64,86,.34);
  --st-still:#177049;    --st-still-bg:rgba(59,214,148,.14);    --st-still-bd:rgba(59,214,148,.32);
  --st-pruef:#795a10;    --st-pruef-bg:rgba(240,185,98,.18);    --st-pruef-bd:rgba(240,185,98,.42);

  /* Task 4 — Vollmacht-Puls (Outlook-Preset9-nah) */
  --cranberry:#d64550;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink);color:var(--txt)}
body{font-family:var(--sans);font-size:17px;line-height:1.6;min-height:100vh;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:rgba(95,168,255,.3)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip-Link (Tastatur) */
.skip-link{position:absolute;left:16px;top:-48px;z-index:60;background:var(--core);color:#0a0c14;
  font-weight:650;font-size:14px;padding:10px 18px;border-radius:999px;transition:top .2s}
.skip-link:focus{top:16px}

/* Sichtbarer Fokus überall (A11y-Boden) */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.mail-detail :where(a,button,[tabindex]):focus-visible{outline:2px solid #1a49b8;outline-offset:3px}

/* ── Ambient-Glow der Bühne (CSS-only, kein WebGL) ── */
.stage-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 50% 16%,rgba(52,84,180,.30),transparent 58%),
    radial-gradient(760px 520px at 80% 72%,rgba(95,168,255,.10),transparent 62%),
    var(--ink)}

.topbar,main{position:relative;z-index:1}
.shell{max-width:1080px;margin:0 auto;padding:0 24px}

/* ── Topbar / Logo ── */
.topbar{padding:22px 0 6px}
.topbar .shell{display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;opacity:.9;transition:opacity .3s}
.brand:hover{opacity:1}
/* Fix 6: Text-Wordmark wie die Startseite (index.html .mark) — dezenter Marken-Anker
   auf Dunkel; kein dunkles Lockup-PNG, das als schwarzer Kasten verschwindet. */
.brand .wordmark{font-size:17px;font-weight:700;letter-spacing:.42em;padding-left:.42em;
  background:linear-gradient(180deg,#fff,#96a0b8);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* =========================================================================
   AKT 1 — Schmerz / Bühne
   ========================================================================= */
.buehne{text-align:center;padding:clamp(52px,10vh,120px) 0 clamp(30px,5vh,58px)}
/* Fix 11: Eyebrow über der H1 — 5-Sekunden-Klarheit (was ist das?) */
/* S1: max-width 40ch + .14em brach bei 1440 auf 3 Zeilen um → weiter fassen und Tracking
   leicht straffen, damit die Eyebrow in 1–2 Zeilen steht (Kontrast unverändert, AA). */
.buehne .eyebrow{display:block;font-size:12.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--lab);margin:0 auto 16px;max-width:64ch;line-height:1.4}
.buehne h1{font-size:clamp(30px,5.6vw,54px);font-weight:640;line-height:1.08;letter-spacing:-.02em;
  max-width:16ch;margin:0 auto}
.buehne h1 .n{color:var(--core)}
.buehne h1 .clock{font-variant-numeric:tabular-nums;color:var(--dim);font-weight:560}
.buehne .sub{color:var(--dim);font-size:clamp(16px,2.2vw,19px);max-width:46ch;margin:18px auto 0;line-height:1.5}

/* Start-Button — nur mit JS sichtbar */
#start-demo{display:none}
html.js #start-demo{display:inline-flex;align-items:center;gap:.55em;margin-top:30px;
  background:var(--core);color:#0a0c14;font-weight:650;font-size:16px;padding:15px 30px;
  border:0;border-radius:999px;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 14px 40px -14px rgba(140,195,255,.5);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
html.js #start-demo:hover{transform:translateY(-2px);box-shadow:0 20px 54px -14px rgba(140,195,255,.6)}
#start-demo .play{font-size:.82em;transform:translateY(.5px)}
#start-demo::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(95,168,255,.45),transparent);transition:transform .7s}
html.js #start-demo:hover::after{transform:translateX(120%) skewX(-18deg)}

/* =========================================================================
   POSTFACH — helles Mail-Fenster auf dunkler Bühne
   ========================================================================= */
#postfach{padding:0 0 clamp(40px,7vh,80px)}
.mailfenster{position:relative;max-width:1000px;margin:0 auto;background:var(--paper);
  color:var(--paper-ink);border-radius:18px;overflow:hidden;perspective:1200px;
  scroll-margin-top:104px;   /* P1-2: beim Start-Scroll bleibt die Status-Zeile darüber sichtbar */
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,
             0 50px 120px -42px rgba(0,0,0,.86),
             0 0 0 1px rgba(226,234,255,.06),
             0 0 90px -24px rgba(95,168,255,.20)}
/* ohne JS: kein leeres, unbedienbares Fenster — stattdessen die gestapelte Fassung */
.mailfenster{display:none}
html.js .mailfenster{display:block}

/* Fensterleiste */
.chrome{display:flex;align-items:center;gap:14px;height:46px;padding:0 18px;
  background:linear-gradient(180deg,#f2f4f9,var(--paper-2));border-bottom:1px solid var(--paper-line)}
.chrome-dots{display:inline-flex;gap:7px;flex:0 0 auto}
.chrome-dots i{width:11px;height:11px;border-radius:50%;background:#c5cad7;display:block;
  box-shadow:inset 0 0 0 1px rgba(20,24,40,.06)}
.chrome-title{font-size:13px;font-weight:600;color:var(--paper-dim);letter-spacing:.01em}
/* inline-block, damit der Chaos-Puls (Task 4, transform) greift */
.chrome-title .ungelesen{display:inline-block;color:var(--st-entwurf);font-variant-numeric:tabular-nums}

/* Körper: Liste 38% / Detail 62% */
.mailbody{display:flex;min-height:470px}
/* Fix 4 (CRO P1-1): echtes „App-Fenster" — Liste bekommt eine Deckelung und scrollt
   intern. So läuft der Zeitraffer sichtbar im Fenster, die vorhandene scrollTop-Welle
   (demo.js) wird wirksam, und Bilanz/CTA rücken nah an den Fold. */
.mail-liste{flex:0 0 38%;max-width:38%;border-right:1px solid var(--paper-line);
  padding:8px;max-height:clamp(440px,62vh,640px);overflow-x:hidden;overflow-y:auto;
  scroll-padding-bottom:64px;background:var(--paper)}
.mail-detail{flex:1 1 62%;min-width:0;padding:26px 30px;background:#fff}

/* Skeleton — Liste ist leer bis Task 3 sie rendert */
.skel-row{display:flex;flex-direction:column;gap:7px;padding:13px 12px;border-radius:11px;margin-bottom:2px}
.skel-row .dotline{display:flex;align-items:center;gap:9px}
.skel-dot{width:8px;height:8px;border-radius:50%;background:var(--paper-3);flex:0 0 auto}
.skel-line{height:9px;border-radius:5px;flex:1;
  background:linear-gradient(90deg,#e7eaf1 25%,#f1f3f8 37%,#e7eaf1 50%);
  background-size:280% 100%;animation:skel 1.5s ease-in-out infinite}
.skel-line.w40{max-width:40%}.skel-line.w60{max-width:60%}.skel-line.w80{max-width:80%}
@keyframes skel{0%{background-position:180% 0}100%{background-position:-120% 0}}

/* Detail-Leerzustand — zeigt die Zwei-Spalten-Idee vor dem ersten Klick */
.detail-empty{height:100%;min-height:380px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:12px;color:var(--paper-dim)}
.detail-empty svg{width:46px;height:46px;stroke:var(--paper-lab);opacity:.8}
.detail-empty b{color:var(--paper-ink);font-weight:620;font-size:16px}
.detail-empty span{font-size:14px;max-width:34ch;line-height:1.5}

/* Zurück-Button des Slide-Overs (mobil) — Struktur jetzt, Verhalten Task 3 */
.detail-back{display:none;align-items:center;gap:8px;background:var(--paper-2);color:var(--paper-ink);
  border:1px solid var(--paper-line);border-radius:999px;font-size:14px;font-weight:600;
  padding:9px 18px;min-height:44px;margin-bottom:16px;cursor:pointer}

/* Kennzeichnung unter dem Fenster */
.kennzeichnung{text-align:center;color:var(--lab);font-size:13px;line-height:1.5;
  max-width:52ch;margin:20px auto 0}

/* Fix 3 (CRO P0-1): IMMER sichtbare, dezente Kontaktzeile — fängt jeden Nicht-Klicker/
   Scroller ab, auch in Phase 'start'. Kein Konkurrenz-CTA zur Bilanz (nur Text + Links). */
.postfach-kontakt{text-align:center;color:var(--dim);font-size:14px;line-height:1.6;
  max-width:52ch;margin:14px auto 0}
.postfach-kontakt a{color:var(--cyan);font-weight:600;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.postfach-kontakt a:hover{color:var(--core);border-color:var(--cyan)}
.postfach-kontakt .sep{color:var(--lab);margin:0 .5em}
/* Fix 12: stiller Existenz-Trust-Satz (wahr, ohne Namen/Zahlen) */
.postfach-trust{text-align:center;color:var(--lab);font-size:12.5px;line-height:1.5;
  max-width:52ch;margin:8px auto 0}

/* =========================================================================
   BADGES — vier Sorten Entlastung (Task 3/4 setzen sie live)
   ========================================================================= */
.badge{display:inline-flex;align-items:center;gap:.5em;font-size:12px;font-weight:640;
  line-height:1;padding:5px 11px 5px 9px;border-radius:999px;border:1px solid transparent;
  letter-spacing:.005em;white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge--entwurf {color:var(--st-entwurf); background:var(--st-entwurf-bg); border-color:var(--st-entwurf-bd)}
.badge--dringend{color:var(--st-dringend);background:var(--st-dringend-bg);border-color:var(--st-dringend-bd)}
.badge--still   {color:var(--st-still);   background:var(--st-still-bg);   border-color:var(--st-still-bd)}
.badge--pruefliste{color:var(--st-pruef); background:var(--st-pruef-bg);   border-color:var(--st-pruef-bd)}

/* =========================================================================
   NO-JS-FUNDAMENT — 8 Fälle gestapelt (Original + Ergebnis pro Fall)
   Sichtbar ohne JS; per html.js ausgeblendet. Copy = Kurz-Platzhalter (TASK2:SYNC).
   ========================================================================= */
.nojs-faelle{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
html.js .nojs-faelle{display:none}

.fall{border-top:1px solid var(--hair);padding-top:24px}
.fall:first-child{border-top:0;padding-top:0}
.fall-titel{display:flex;align-items:baseline;gap:12px;font-size:18px;font-weight:600;
  color:var(--txt);margin-bottom:14px;letter-spacing:-.01em}
.fall-nr{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lab);font-weight:500}

.fall-paar{display:grid;gap:14px}
.fkarte{background:var(--paper);color:var(--paper-ink);border-radius:14px;padding:18px 20px;
  border:1px solid var(--paper-line);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.7),0 0 0 1px rgba(226,234,255,.04)}
.fkarte-label{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-lab);margin-bottom:10px}
.fkarte--ergebnis .fkarte-label{display:none}
.fkarte-meta{font-size:13.5px;color:var(--paper-dim);margin-bottom:4px}
.fkarte-meta b{color:var(--paper-ink);font-weight:600}
.fkarte-betreff{font-size:15.5px;font-weight:600;color:var(--paper-ink);margin:6px 0 8px}
.fkarte-text{font-size:14.5px;color:var(--paper-ink);line-height:1.55}
/* No-JS Fall 2: zweiter (Weiterleitungs-)Entwurf sichtbar abgesetzt */
.fkarte-wl-kopf{margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-line)}
.fkarte--ergebnis{background:#fff;border-color:var(--st-entwurf-bd)}
.fkarte--ergebnis .badge{margin-bottom:12px}
.fkarte-chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.fkarte-chips li{font-size:12px;color:var(--paper-dim);background:var(--paper-2);
  border:1px solid var(--paper-line);border-radius:999px;padding:5px 11px;line-height:1.3}
.fkarte-chips li::before{content:"✓ ";color:var(--st-still);font-weight:700}

/* =========================================================================
   INTERAKTIVE LISTE — Zeilen-Buttons (Task 3 ersetzt die Skeletons)
   ========================================================================= */
.mail-item{position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;font:inherit;
  background:transparent;border:0;border-radius:11px;padding:11px 12px;margin-bottom:2px;
  cursor:pointer;color:var(--paper-ink);line-height:1.4;transition:background .15s}
.mail-item:hover{background:var(--paper-2)}
/* S3: in Phase 'start'/'zeitraffer' sind die Zeilen inert (tabindex=-1) und Klicks tun
   nichts → kein Klick-Cursor, der Bedienbarkeit verspricht. Ab 'erkunden' (tabindex=0)
   greift wieder der pointer der Basis-Regel. */
.mail-item[tabindex="-1"]{cursor:default}
.mail-item.is-active{background:var(--st-entwurf-bg);box-shadow:inset 3px 0 0 var(--st-entwurf)}
/* Fix 18: dunkler Fokusring im hellen Papier-Kontext (Cyan war ~1.3:1) */
.mail-item:focus-visible{outline:2px solid var(--st-entwurf);outline-offset:-2px;border-radius:11px}
.mail-unread{width:8px;height:8px;border-radius:50%;background:var(--st-entwurf);flex:0 0 auto;margin-top:6px}
/* S2: nach dem Lauf (Phase 'erkunden', Klasse zr-erledigt) sind ALLE Mails abgearbeitet →
   Ungelesen-Punkte gedimmt lassen, konsistent zur Kopfzeile „0 ungelesen". */
.mailfenster.zr-erledigt .mail-unread{opacity:.14;transform:scale(.6)}
.mail-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mail-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mail-absender{position:relative;font-size:14px;font-weight:650;color:var(--paper-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* eigene, dunklere Zeit-Farbe: ≥4.5:1 auch auf Hover-/Active-Tint (QS-Gate P1/Fix 13) */
.mail-zeit{font-size:11.5px;color:#5c6274;flex:0 0 auto;font-variant-numeric:tabular-nums}
.mail-betreff{font-size:13px;font-weight:600;color:var(--paper-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-vorschau{font-size:12.5px;color:var(--paper-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Badge-Slot — leer (Phase 'start') nimmt keinen Platz; Task 4 füllt ihn pro Zeile */
.mail-badge{margin-top:6px}
.mail-badge:empty{display:none}
.mail-badge .badge{font-size:10.5px;padding:3px 8px 3px 7px}
.mail-badge .badge::before{width:5px;height:5px}

/* =========================================================================
   DETAIL — Original (links) / Ergebnis (rechts)
   ========================================================================= */
.detail-inhalt{min-width:0}
.detail-paar{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:16px;align-items:start}
.detail-karte{border-radius:14px;padding:16px 18px;min-width:0}
.detail-karte--original{background:var(--paper);border:1px solid var(--paper-line)}
.detail-karte--ergebnis{background:#fff;border:1px solid var(--st-entwurf-bd);
  box-shadow:0 18px 50px -34px rgba(0,0,0,.5)}
.detail-klabel{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-lab);margin-bottom:10px}
.detail-karte .badge{margin-bottom:12px}
.detail-meta{font-size:13px;color:var(--paper-dim);margin-bottom:4px;line-height:1.5}
.detail-meta b{color:var(--paper-ink);font-weight:600}
.detail-objekt{color:var(--paper-ink);font-weight:500}
.detail-betreff{font-size:15px;font-weight:600;color:var(--paper-ink);margin:6px 0 8px}
.detail-text{font-size:14px;color:var(--paper-ink);line-height:1.55}

/* Entwurfs-Karte (Antwort + optional Weiterleitung) */
.detail-entwurf{margin-top:14px;background:var(--st-entwurf-bg);border:1px solid var(--st-entwurf-bd);
  border-radius:11px;padding:13px 15px}
.detail-entwurf--wl{margin-top:12px;background:var(--paper-2);border-color:var(--paper-line)}
.detail-entwurf-kopf{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--st-entwurf);margin-bottom:8px}
.detail-entwurf--wl .detail-entwurf-kopf{color:var(--paper-dim)}
.detail-wl-betreff{font-size:13px;font-weight:600;color:var(--paper-ink);margin-bottom:6px}
.detail-entwurf-text{font-size:14px;color:var(--paper-ink);line-height:1.6}
.detail-entwurf-text.is-typing::after{content:"▍";color:var(--st-entwurf);margin-left:1px;
  animation:tw-blink 1s step-end infinite}
@keyframes tw-blink{50%{opacity:0}}

/* Markierungs-Karte (Fälle 3/4/7/8 — kein Entwurf) */
.detail-markierung{margin-top:6px;border-radius:11px;padding:14px 15px;
  background:var(--st-dringend-bg);border:1px solid var(--st-dringend-bd)}
.detail-markierung--still{background:var(--st-still-bg);border-color:var(--st-still-bd)}
.detail-markierung--dringend{background:var(--st-dringend-bg);border-color:var(--st-dringend-bd)}
.detail-markierung-text{font-size:14px;font-weight:600;color:var(--paper-ink);line-height:1.5}

.detail-chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding:0}
.detail-chips li{font-size:11.5px;color:var(--paper-dim);background:var(--paper-2);
  border:1px solid var(--paper-line);border-radius:999px;padding:4px 10px;line-height:1.3}
.detail-chips li::before{content:"✓ ";color:var(--st-still);font-weight:700}

/* Listen-Mail: Kurz-Erklärung des Badges */
.detail-hinweis{max-width:520px}
.detail-hinweis-kopf{margin-bottom:16px}
.detail-hinweis-betreff{display:block;font-size:16px;font-weight:640;color:var(--paper-ink);line-height:1.35}
.detail-hinweis-von{display:block;font-size:13px;color:var(--paper-dim);margin-top:3px}
.detail-hinweis-karte{border-radius:12px;padding:16px 18px;background:var(--paper);border:1px solid var(--paper-line)}
.detail-hinweis-karte .badge{margin-bottom:10px}
.detail-hinweis-text{font-size:14.5px;color:var(--paper-ink);line-height:1.55}

/* =========================================================================
   TASK 4 — ZEITRAFFER-CHOREOGRAFIE (Steuerung, Moment-Overlays, Toast)
   Elemente werden per JS erzeugt; ohne JS existiert nichts davon (No-JS bleibt clean).
   ========================================================================= */

/* Mitlaufender Zähler in der Bühnen-Kopfzeile (Entscheid 4) */
.zr-status{display:none;margin-top:30px;min-height:1.4em;color:var(--cyan);
  font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.zr-status.on{display:block}

/* Dauerhaft sichtbare Steuerung während des Laufs (fixiert, überlagert nichts Wichtiges) */
.zr-controls{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:56;
  display:none;flex-direction:column;align-items:center;gap:6px}
.zr-controls.on{display:flex}
/* Fix 1: SOLIDE, kontraststarke Pille statt durchscheinendem Glas (kein Text-Durchschein
   mehr über der Liste), Touch-Ziel ≥44px. */
.zr-skip{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(8,10,16,.94);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  color:var(--core);border:1px solid rgba(159,224,255,.55);border-radius:999px;
  font:inherit;font-size:14px;font-weight:650;letter-spacing:.01em;
  padding:0 24px;min-height:44px;cursor:pointer;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9),0 0 0 4px rgba(5,6,11,.55)}
.zr-skip:hover{border-color:var(--cyan);color:#fff;background:rgba(12,16,26,.96)}
.zr-hint{font-size:12px;color:var(--dim);letter-spacing:.01em;
  background:rgba(5,6,11,.6);padding:2px 10px;border-radius:999px}

/* Pseudonymisierungs-Moment (Fall 1): Redaktions-Balken über dem Namen + Mikro-Label */
.zr-redakt{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;
  width:0;overflow:hidden;white-space:nowrap;background:var(--paper);color:var(--paper-ink);
  font-weight:650;letter-spacing:1px;pointer-events:none}
.mail-item.is-active .zr-redakt{background:var(--st-entwurf-bg)}
.zr-schutz{position:absolute;right:10px;bottom:8px;z-index:4;display:inline-flex;align-items:center;
  gap:4px;width:max-content;font-size:10px;font-weight:600;color:var(--st-still);
  background:var(--st-still-bg);border:1px solid var(--st-still-bd);border-radius:999px;
  padding:1px 8px;letter-spacing:.01em;pointer-events:none}
.zr-schutz::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* Vollmacht-Toast (nur Fall 3) — cranberry, fixiert über der Skip-Steuerung.
   Am body verankert: .mailfenster hat perspective → wäre Containing-Block für fixed. */
.zr-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:55;
  max-width:min(92vw,420px);text-align:center;background:var(--cranberry);color:#fff;
  font-size:13.5px;font-weight:600;line-height:1.4;padding:11px 20px;border-radius:12px;
  box-shadow:0 20px 48px -16px rgba(214,69,80,.8);pointer-events:none}

/* =========================================================================
   TASK 5 — AKT 4: BILANZ + CTA
   No-JS: sofort sichtbar, statisch (verdient den Schluss-Arg auch ohne Skript).
   Mit JS: verborgen bis 'demo:fertig', dann sanftes Fade/Slide via .is-revealed
   (kein Scroll-Zwang, kein Layout-Sprung — Sektionen haben vorher Höhe 0).
   ========================================================================= */
#bilanz,#demo-cta{padding:clamp(38px,7vh,80px) 0}
html.js #bilanz,html.js #demo-cta{display:none}
html.js #bilanz.is-revealed,html.js #demo-cta.is-revealed{
  display:block;animation:bilanz-ein .7s cubic-bezier(.2,.7,.2,1) both}

@keyframes bilanz-ein{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ── Zahlenband ── */
.bilanz-band{max-width:640px;margin:0 auto;text-align:center}
.bilanz-zeile{font-size:clamp(16px,2.4vw,19px);color:var(--dim);line-height:1.8}
.bilanz-zahl{font-variant-numeric:tabular-nums;color:var(--core);font-weight:650}
.bilanz-null{margin-top:20px;font-size:clamp(21px,3.6vw,29px);font-weight:680;
  letter-spacing:-.012em;color:var(--dim);line-height:1.35}
.bilanz-null b{color:var(--done);font-weight:inherit}
.bilanz-null .bilanz-zahl{color:var(--done)}
.bilanz-ersparnis{margin:18px auto 0;max-width:52ch;color:var(--dim);font-size:15px;line-height:1.6}

/* ── CTA ── */
.cta-band{max-width:560px;margin:0 auto;text-align:center}
.cta-lead{font-size:clamp(19px,3vw,25px);font-weight:620;letter-spacing:-.012em;
  color:var(--txt);max-width:22ch;margin:0 auto}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn-demo{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:650;font-size:16px;line-height:1;padding:15px 30px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s,color .25s}
.btn-demo:hover{transform:translateY(-2px)}
.btn-demo--primary{background:var(--core);color:#0a0c14;box-shadow:0 14px 40px -16px rgba(140,195,255,.5)}
.btn-demo--primary:hover{box-shadow:0 18px 48px -16px rgba(140,195,255,.6)}
/* Fix 19: Ghost-Rand ≥3:1 non-text gegen die dunkle Bühne (war ~1.2:1) */
.btn-demo--ghost{background:transparent;color:var(--txt);border-color:rgba(226,234,255,.42)}
.btn-demo--ghost:hover{border-color:var(--cyan);color:var(--core)}
/* Fix 7: stiller mailto-Drittlink */
.cta-mail{margin-top:16px;font-size:13.5px;color:var(--lab)}
.cta-mail a{color:var(--dim);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.cta-mail a:hover{color:var(--core);border-color:var(--cyan)}
.cta-secondary{display:inline-block;margin-top:24px;color:var(--dim);font-size:14.5px;font-weight:560;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.cta-secondary:hover{color:var(--core);border-color:var(--cyan)}

/* =========================================================================
   P1-4 — SLIM-FOOTER (Impressum/Datenschutz), dunkel/dezent wie die Bühne.
   Immer sichtbar (auch ohne JS) — nicht an den Demo-Ablauf gekoppelt.
   ========================================================================= */
.demo-footer{position:relative;z-index:1;border-top:1px solid var(--hair);
  padding:46px 0 58px;color:var(--lab);font-size:13px;line-height:1.7}
/* Footer-Navigation: drei Gruppen (Produkt / Kontakt / Rechtliches) — sitewide-Muster */
.demo-footer .foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;
  max-width:680px;margin:0 auto;text-align:left}
@media (max-width:640px){.demo-footer .foot-nav{grid-template-columns:1fr;gap:24px}}
.demo-footer .foot-col{display:flex;flex-direction:column;gap:2px}
.demo-footer .foot-h{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lab);margin-bottom:8px}
.demo-footer .foot-nav a{display:inline-flex;align-items:center;min-height:38px;font-size:14px;
  color:var(--dim);align-self:flex-start;transition:color .2s}
.demo-footer .foot-nav a:hover{color:var(--core)}
.demo-footer .foot-imp{max-width:660px;margin:30px auto 0;text-align:left;color:var(--lab);
  border-top:1px solid var(--hair);padding-top:28px;line-height:1.8}
.demo-footer .foot-imp h4{color:var(--dim);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;margin:20px 0 6px;font-weight:600}

/* =========================================================================
   RESPONSIVE — ab 760px einspaltig, Detail als Slide-Over (Struktur; Verhalten Task 3)
   ========================================================================= */
/* Fix 1: während des Zeitraffers bekommt die (intern scrollende) Liste unten Luft,
   damit die fixierte Skip-Pille nie die gerade aufgedeckte Zeile verdeckt — die
   scrollTop-Welle rechnet mit dieser Polsterung und hält aktive Zeilen über der Pille. */
/* I1: während des Laufs Nutzer-Scroll auf der Liste sperren (Interaktion ist ohnehin
   gesperrt) — die programmatische scrollTop-Welle läuft mit overflow:hidden weiter,
   Nutzer-Wheel/Touch geht sauber an die Seite statt gegen den Tween. Restauriert sich,
   sobald 'erkunden'/Skip die Klasse zr-running entfernt. */
body.zr-running .mail-liste{padding-bottom:64px;overflow-y:hidden}

@media (max-width:760px){
  body{font-size:16px}
  .mailbody{display:block;position:relative;min-height:auto}
  .mail-liste{flex:none;max-width:none;width:100%;border-right:0;border-bottom:1px solid var(--paper-line);
    max-height:clamp(320px,48vh,430px)}
  .mail-detail{position:absolute;inset:0;transform:translateX(100%);
    transition:transform .35s cubic-bezier(.2,.7,.2,1);
    box-shadow:-24px 0 60px -30px rgba(0,0,0,.5);overflow-y:auto}
  .mailfenster.detail-open .mail-detail{transform:none}
  .detail-back{display:inline-flex}
  .fall-paar{gap:12px}
  /* Detail einspaltig: Original über Ergebnis (schmaler Slide-Over) */
  .detail-paar{grid-template-columns:1fr}
  /* P1-5: Toast oben andocken statt am Fenster-/Pillen-Bereich unten — so verdeckt der
     Vollmacht-Toast nie die falsche (darunterliegende) Mail-Zeile. */
  .zr-toast{top:14px;bottom:auto}
}

/* Fix 21: Der „Leertaste: Pause"-Hinweis ist auf Touch-Geräten sinnlos → ausblenden. */
@media (hover:none){
  .zr-hint{display:none}
}

/* Reduced-Motion — kein Shimmer, keine Übergänge (A11y-Boden) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .skel-line{background:#e7eaf1}
}