/* ============================================================================
   TRACKER PRO — Produktseite
   ============================================================================

   Baut auf „Nocturne" auf (siehe css/tokens.css) und schärft die Idee für den
   einen Zweck dieser Seite: jemanden davon überzeugen, dass es sich lohnt,
   das selbst zu betreiben.

   Die Seite hat genau drei gestalterische Behauptungen:

     · Papierwarme Schrift auf tiefem, kaltem Grund. Beleuchtetes Gerät im
       dunklen Raum, nicht Terminalfenster.

     · Zwei Register, eine Familie. Archivo läuft eng, wenn sie behauptet,
       und weit, wenn sie misst. Geist Mono beschriftet. Es gibt keine dritte
       Stimme, damit die zwei etwas bedeuten.

     · Bernstein ist Aktion und sonst nichts. Auf der ganzen Seite gibt es
       genau eine Sorte gefüllter Knöpfe.

   Und ein wiederkehrendes Bauteil, die SPUR: ein Streifen aus Strichen, ein
   Strich je Tag. Zeit, Geld und Depot sind im Kern dasselbe — etwas, das über
   Tage läuft. Der Streifen ist die Stelle, an der man das sieht, und er
   taucht überall wieder auf.
   ============================================================================ */

@import url('/css/tokens.css');

/* ─────────────────────────────────────────────────────────── Grundlage ─── */

:root {
  --l-max: 1180px;
  --l-gut: 22px;
  --l-rhythm: clamp(74px, 9.5vw, 122px);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.landing {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
}

/* Sprungmarken nicht unter die Kopfzeile. */
[id] { scroll-margin-top: 90px; }

.wrap {
  width: 100%;
  max-width: var(--l-max);
  margin: 0 auto;
  padding: 0 var(--l-gut);
  box-sizing: border-box;
}

/* ────────────────────────────────────────────────── Die zwei Register ─── */

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'wdth' var(--wdth-tight);
  letter-spacing: var(--track-display);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 5px 11px 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-sunk);
  box-shadow: var(--edge);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  flex: none;
}

.lede {
  font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 22px 0 0;
  text-wrap: pretty;
}

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.num {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'wdth' var(--wdth-wide);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ────────────────────────────────────────────────────────── Kopfzeile ─── */

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-slow) var(--ease-out),
              background var(--t-slow) var(--ease-out);
}
.top.stuck {
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-bottom-color: var(--border);
  box-shadow: var(--edge);
}
.top .wrap { display: flex; align-items: center; gap: 8px; }

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: 15px;
  letter-spacing: var(--track-tight);
  border-radius: var(--radius-xs);
}
.brand svg { width: 26px; height: 26px; flex: none; display: block; }
.brand svg path { stroke-dasharray: 420; }
.landing.enter .brand svg path { animation: draw 1s var(--ease-out) both; }
@keyframes draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }

.top-links { display: none; gap: 2px; margin-right: 10px; }
@media (min-width: 900px) { .top-links { display: flex; } }

.top-link {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.top-link:hover { color: var(--text); background: var(--bg-hover); }

/* ───────────────────────────────────────────────────────────── Knöpfe ─── */

.btn-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: var(--track-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.btn-l:active { transform: translateY(1px) scale(0.99); }

/* Die einzige gefüllte Sorte auf der ganzen Seite. */
.btn-solid {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn-solid:hover { background: var(--accent-hot); box-shadow: 0 8px 30px var(--accent-glow); }

.btn-quiet {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-quiet:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-hover); }

.btn-lg { padding: 13px 22px; font-size: 14.5px; }

.btn-l .arrow { transition: transform var(--t-base) var(--ease-spring); }
.btn-l:hover .arrow { transform: translateX(4px); }

/* Enge Kopfzeile: unter 640px passt nur ein Knopf.
   Die Klasse steht mit .btn-l im Selektor — sonst gewinnt die spätere
   display-Regel von .btn-l und beide Knöpfe bleiben stehen. */
.btn-l.only-wide { display: none; }
.only-wide-i { display: none; }
.only-narrow-i { display: inline; }
@media (min-width: 640px) {
  .btn-l.only-wide { display: inline-flex; }
  .only-wide-i { display: inline; }
  .only-narrow-i { display: none; }
}

/* ─────────────────────────────────────────────────────────────── Hero ─── */

.hero {
  position: relative;
  padding: 132px 0 var(--l-rhythm);
  isolation: isolate;
}

/* Ein einziger Verlauf auf der ganzen Seite: Bernstein oben rechts, kaltes
   Blau links — Licht von zwei Seiten, wie in einem Raum mit einer warmen und
   einer kalten Lampe. Mit Körnung, sonst ringelt es auf 8-Bit-Panels. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -160px -22% auto -22%;
  height: 880px;
  background:
    radial-gradient(42% 44% at 72% 26%, rgba(255, 196, 107, 0.17), transparent 68%),
    radial-gradient(46% 50% at 22% 40%, rgba(123, 156, 255, 0.14), transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -160px 0 auto;
  height: 880px;
  background-image: var(--grain);
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero h1 { font-size: clamp(40px, 7.2vw, 76px); }
.hero h1 .soft { color: var(--text-muted); }

/* Ein Wort trägt die Aussage — es bekommt die Aktionsfarbe und einen feinen
   Unterstrich, der sich beim Laden von links aufzieht. */
.hero h1 .lit {
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}
.hero h1 .lit::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.32;
  transform: scaleX(0);
  transform-origin: left;
}
.landing.enter .hero h1 .lit::after {
  animation: swipe 0.9s var(--ease-out) 0.5s both;
}
@keyframes swipe { to { transform: scaleX(1); } }

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.hero-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 18px 0 0;
}

/* ──────────────────────────────────── Signatur 1: derselbe Tresor ─────── */

/*
   Kein Bildschirmfoto. Die Verschlüsselung selbst ist das Produktbild, und
   sie lässt sich zeigen statt behaupten: links, was du siehst — rechts, was
   auf der Platte liegt.
*/
.vault {
  margin-top: 58px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(178deg, var(--bg-card), var(--bg-elev));
  box-shadow: var(--shadow-lg), var(--edge);
  overflow: hidden;
  position: relative;
}

.vault-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunk);
}

.vault-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 7px 13px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.vault-tab:hover { color: var(--text-muted); }
.vault-tab[aria-selected='true'] {
  color: var(--text);
  background: var(--bg-lift);
  box-shadow: var(--edge);
}

.vault-state {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.vault-state .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  transition: background var(--t-slow) var(--ease-out);
  animation: pulse 2.8s var(--ease-out) infinite;
}
.vault[data-view='cipher'] .vault-state .dot { background: var(--success); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.vault-body { padding: 4px 0 8px; }

.vault-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
}
.vault-row:last-child { border-bottom: 0; }

.vault-row .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  letter-spacing: var(--track-tight);
}
.vault-row .who .tag {
  display: inline-block;
  width: 3px; height: 13px;
  border-radius: 2px;
  margin-right: 11px;
  vertical-align: -2px;
}
.vault-row .amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Im Geheimtext-Zustand wird jede Zeile zu Base64. Gleiche Höhe, gleiche
   Spalten — nur der Inhalt trägt keine Bedeutung mehr. */
.vault[data-view='cipher'] .vault-row .who,
.vault[data-view='cipher'] .vault-row .amt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
.vault[data-view='cipher'] .vault-row .who .tag {
  background: var(--text-ghost) !important;
}

.vault-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunk);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.vault-foot b { color: var(--text-muted); font-weight: 500; }

@media (max-width: 560px) {
  .vault-bar { padding: 8px; }
  .vault-tab { padding: 7px 9px; letter-spacing: 0.08em; white-space: nowrap; }
  .vault-state span:not(.dot) { display: none; }
  .vault-row { padding: 12px 15px; gap: 10px; }
  .vault-foot { padding: 12px 15px; }
}

/* ─────────────────────────────────── Signatur 2: die Spur ─────────────── */

.trace {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
  --tint: var(--accent);
}
.trace i {
  flex: 1 1 0;
  min-width: 2px;
  /* Untergrenze, sonst verschwinden ruhige Tage ganz und der Streifen
     bekommt Löcher, die wie fehlende Daten aussehen. */
  height: max(3px, calc(var(--h, 0.1) * 100%));
  border-radius: 1px;
  background: var(--tint);
  opacity: 0.26;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: opacity var(--t-base) var(--ease-out);
}
.in-view .trace i {
  animation: trace-grow 0.7s var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 16ms);
}
@keyframes trace-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.trace i:nth-last-child(-n+4) { opacity: 0.55; }
.trace i:last-child { opacity: 1; }

/* ───────────────────────────────────────────────────────── Abschnitte ─── */

.sec { padding: var(--l-rhythm) 0; }
.sec + .sec { padding-top: 0; }
.sec-head { max-width: 60ch; margin-bottom: 46px; }
.sec-head h2 { font-size: clamp(28px, 4vw, 42px); }

/* ────────────────────────────────────────────────── Drei Bereiche ─────── */

.domains { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .domains { grid-template-columns: repeat(3, 1fr); } }

.domain {
  position: relative;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--edge);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

/* Bereichsfarbe an der Oberkante, nicht auf der Fläche. */
.domain::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--tint), transparent 78%);
  opacity: 0.7;
}

/* Der Zeiger zieht ein sehr schwaches Licht mit. Zwei Variablen, kein Layout
   im Skript — landing.js setzt nur --mx/--my. */
.domain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--tint) 11%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
  pointer-events: none;
}
.domain:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.domain:hover::before { opacity: 1; }

.domain .ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tint) 13%, transparent);
  color: var(--tint);
  margin-bottom: 20px;
}
.domain .ico svg { width: 17px; height: 17px; }

.domain h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--track-tight);
}
.domain p {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--text-muted);
}

/* Die große Zahl der Karte, weit laufend. */
.domain .figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.domain .figure .v {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'wdth' var(--wdth-wide);
  font-variant-numeric: tabular-nums;
  font-size: 27px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text);
}
.domain .figure .d {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--tint);
}

/* ─────────────────────────────────────────────────────────── Ablauf ───── */

/* Nummern nur hier: das ist tatsächlich eine Reihenfolge — was in welcher
   Reihenfolge mit deinen Daten passiert, bevor sie den Rechner verlassen. */
.flow { counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  align-items: start;
  transition: background var(--t-base) var(--ease-out);
}
.step:last-child { border-bottom: 1px solid var(--border); }

.step .n {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-mono);
  color: var(--text-ghost);
  padding-top: 4px;
  transition: color var(--t-base) var(--ease-out);
}
.step .n::before { content: counter(step, decimal-leading-zero); }
.step:hover .n { color: var(--accent); }

.step h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: var(--track-tight);
}
.step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
}
.step code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

/* ───────────────────────────────────────────────────────── Zwei Spalten ── */

.split { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 68px; } }

.checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.checks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.checks svg { width: 15px; height: 15px; stroke: var(--accent); margin-top: 2px; }

.devices {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--edge);
  padding: 22px;
}
.device {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.device .glyph {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-xs);
  background: var(--bg-input);
  color: var(--text-muted);
}
.device .glyph svg { width: 15px; height: 15px; }
.device .nm { font-size: 13px; font-weight: 550; letter-spacing: var(--track-tight); }
.device .st {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.device.live .st { color: var(--success); }

.wire {
  height: 26px;
  margin: -6px 0 -6px 30px;
  border-left: 1px dashed var(--border-strong);
  position: relative;
}
.wire::after {
  content: '';
  position: absolute;
  left: -3px; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.in-view .wire::after { animation: travel 2.6s var(--ease-in-out) infinite; }
@keyframes travel {
  0%       { opacity: 0; top: 0; }
  15%, 75% { opacity: 1; }
  100%     { opacity: 0; top: 22px; }
}

/* ────────────────────────────────────────────────────────── Fakten ────── */

.facts {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact { background: var(--bg-card); padding: 26px 22px; }
.fact .v {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'wdth' var(--wdth-max);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}
.fact .k {
  display: block;
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ───────────────────────────────────────────────────────── Schluss ────── */

.closer {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  box-shadow: var(--edge);
  text-align: center;
}
.closer::before {
  content: '';
  position: absolute;
  inset: auto 0 -70% 0;
  height: 260px;
  background: radial-gradient(50% 100% at 50% 100%, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.closer > * { position: relative; }
.closer h2 { font-size: clamp(28px, 4.4vw, 44px); }
.closer .lede { margin-left: auto; margin-right: auto; }
.closer .hero-cta { justify-content: center; }

/* ───────────────────────────────────────────────────────── Fußzeile ───── */

.foot {
  border-top: 1px solid var(--border);
  margin-top: var(--l-rhythm);
  padding: 34px 0 48px;
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.foot a { color: var(--text-dim); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot .sep { margin-left: auto; }

/* ──────────────────────────────────────────────── Tastatur und Fokus ──── */

.landing :focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-base) var(--ease-out);
}
.skip:focus { top: 12px; }

/* ────────────────────────────────────────────────────────── Bewegung ──── */

/* Einlauf beim Laden: eine gestaffelte Bewegung, kein Feuerwerk. Die
   Verzögerung steht als --i im Markup, damit die Reihenfolge dort ablesbar
   ist, wo der Inhalt steht. */
.landing.enter [data-enter] {
  animation: rise 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 75ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise 1s linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }
    .reveal.in-view { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .domain:hover { transform: none; }
  .trace i { transform: scaleY(1); }
}

/* ══════════════════════════════ Vorschau der App ══════════════════════════
   Kein Bildschirmfoto, sondern dieselben Bauteile aus demselben Stylesheet.
   Bildschirmfotos veralten in dem Moment, in dem sich die App ändert; das hier
   veraltet nie und wiegt nichts.

   Sie sitzt leicht gekippt im Raum und richtet sich beim Scrollen auf — das
   sagt „hier steht ein Gerät", ohne dass man einen Laptop drumherum zeichnen
   muss.                                                                     */

.peek {
  margin-top: 54px;
  perspective: 2000px;
}

.peek-frame {
  display: grid;
  grid-template-columns: 190px 1fr;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(178deg, var(--bg-elev), var(--bg));
  box-shadow: var(--shadow-lg), var(--edge);
  overflow: hidden;
  transform: rotateX(7deg) scale(0.97);
  transform-origin: 50% 0%;
  transition: transform 1s var(--ease-out);
}
.landing.enter .peek-frame,
.peek.in-view .peek-frame { transform: rotateX(0deg) scale(1); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .peek-frame {
      animation: peek-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }
    @keyframes peek-rise {
      from { transform: rotateX(9deg) scale(0.96); }
      to   { transform: rotateX(0deg) scale(1); }
    }
  }
}

/* ── Seitenschiene ── */
.peek-rail {
  border-right: 1px solid var(--border);
  background: var(--bg-sunk);
  padding: 16px 12px;
  display: none;
}
@media (min-width: 720px) { .peek-rail { display: block; } }
@media (max-width: 719px) { .peek-frame { grid-template-columns: 1fr; } }

.peek-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 0 4px; }
.peek-brand .mk {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-xs);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.peek-brand b { font-size: 12.5px; font-weight: 600; letter-spacing: var(--track-tight); }

.peek-nav { display: grid; gap: 2px; }
.pn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.pn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.pn.on { background: color-mix(in srgb, var(--invest) 14%, var(--bg-hover)); color: var(--invest); }

/* ── Hauptbereich ── */
.peek-main { padding: 18px; min-width: 0; }

.peek-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.peek-h {
  font-family: var(--font-display); font-weight: 600;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: 19px; letter-spacing: var(--track-display);
}
.peek-btn {
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 600;
}

.peek-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--edge);
  padding: 16px 18px;
}
.peek-hero { margin-bottom: 12px; }
.peek-big {
  font-family: var(--font-display); font-weight: 500;
  font-variation-settings: 'wdth' var(--wdth-wide);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.04em; line-height: 1;
  margin: 9px 0 6px;
}
.peek-delta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.02em; color: var(--success);
  display: block; margin-bottom: 16px;
}
/* Höher als in den Bereichskarten: hier ist die Spur der Verlauf des Depots
   und damit der Inhalt, nicht die Randnotiz. */
.peek-hero .trace { height: 58px; gap: 3px; }
.peek-hero .trace i { opacity: 0.4; }
.peek-hero .trace i:nth-last-child(-n+6) { opacity: 0.75; }
.peek-hero .trace i:last-child { opacity: 1; }

.peek-rows { display: grid; gap: 1px; background: var(--border);
             border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.peek-row {
  display: grid; grid-template-columns: 3px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--bg-card);
}
.peek-row .tag { width: 3px; height: 22px; border-radius: 2px; }
.peek-row .nm { font-size: 13px; letter-spacing: var(--track-tight); min-width: 0; }
.peek-row .vl {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; text-align: right;
}
.peek-row em {
  display: block; font-style: normal; margin-top: 3px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.peek-row .vl em.up   { color: var(--success); }
.peek-row .vl em.down { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .peek-frame { transform: none; }
}

/* ══════════════════════════════════ Fenster ═══════════════════════════════
   Die Themen aus der Kopfzeile öffnen sich als eigene Fläche über der Seite,
   statt irgendwohin zu scrollen. Ein Thema, ein Fenster, ein Gedanke — und
   danach ist man wieder da, wo man war, ohne sich zurückscrollen zu müssen.

   Ohne JavaScript greift :target. Die Auslöser sind echte Verweise, also
   funktioniert das auch dann, wenn das Skript nicht lädt.                   */

.panel {
  border: 0;
  padding: 0;
  margin: auto;
  width: min(880px, calc(100vw - 32px));
  max-height: min(86vh, 880px);
  background: transparent;
  overflow: visible;
  color: var(--text);
}
.panel::backdrop {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(10px) saturate(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
}

.panel-inner {
  position: relative;
  max-height: min(86vh, 880px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 4.4vw, 52px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(178deg, var(--bg-elev), var(--bg-sunk));
  box-shadow: var(--shadow-lg), var(--edge);
  scrollbar-width: thin;
}

/* Es steigt kurz auf und wird scharf — nicht mehr. Ein Fenster, das
   hereinfliegt, kostet beim zweiten Mal Geduld. */
.panel[open] { animation: panel-in 0.34s var(--ease-out); }
.panel[open]::backdrop { animation: veil-in 0.34s var(--ease-out); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }

.panel-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.panel-x:hover { color: var(--text); background: var(--bg-hover); }

.panel h2 { font-size: clamp(26px, 3.6vw, 40px); margin: 12px 0 0; }
.panel .lede { margin-top: 14px; }

.panel-grid {
  display: grid;
  gap: 12px;
  margin-top: 34px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .panel-grid { grid-template-columns: repeat(3, 1fr); } }

.panel-card {
  position: relative;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--edge);
}
.panel-card::after {
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--tint, var(--accent)), transparent 76%);
  opacity: 0.65;
}
.panel-card p { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }

.panel-note {
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.panel-note p { margin: 9px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }

.panel-table {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  font-size: 13px;
}
.panel-table th {
  text-align: left;
  padding: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.panel-table td { padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.panel-table td:last-child { text-align: right; color: var(--text); }

/* Rückfallebene ohne JavaScript. */
@supports not selector(dialog:modal) {
  .panel { display: none; position: fixed; inset: 0; z-index: 300; }
  .panel:target { display: grid; place-items: center; }
}
.panel:target:not([open]) {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

/* ═══════════════════════ Leben in der Vorschau ════════════════════════════ */

.peek-frame { position: relative; }

.peek-main { position: relative; }
.peek-screen { display: block; }
.peek-screen[hidden] { display: none; }

/* Der Wechsel zwischen den drei Bildschirmen: der alte sinkt weg, der neue
   kommt von unten. Kurz, damit es nach Umschalten aussieht und nicht nach
   Diashow. */
.peek-screen.go-in  { animation: screen-in 0.42s var(--ease-out) both; }
.peek-screen.go-out { animation: screen-out 0.22s var(--ease-in-out) both; }
@keyframes screen-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes screen-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

.peek-hero-sm .peek-big { font-size: clamp(22px, 2.8vw, 30px); }

/* Die laufende Uhr. Feste Breite pro Ziffer, sonst zappelt die ganze Zeile. */
.peek-clock { font-variant-numeric: tabular-nums; }

/* Der Reiter in der Schiene, der gerade dran ist. */
.pn { transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.pn[data-pn].on { background: color-mix(in srgb, var(--c, var(--invest)) 14%, var(--bg-hover)); color: var(--c, var(--invest)); }
.pn[data-pn="time"]   { --c: var(--primary); }
.pn[data-pn="todo"]   { --c: var(--success); }
.pn[data-pn="invest"] { --c: var(--invest); }

/* Der Hinweis auf die Befehlspalette, unten in der Schiene. */
.peek-keys { display: flex; gap: 4px; margin-top: 20px; padding: 0 10px; }
.kk {
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--bg-input);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* Aufgaben, die sich selbst abhaken. */
.peek-todo { grid-template-columns: 16px 1fr; }
.peek-todo .box {
  width: 15px; height: 15px;
  border: 1.5px solid var(--border-loud);
  border-radius: var(--radius-xs);
  position: relative;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.peek-todo .box::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) scale(0);
  transition: transform var(--t-base) var(--ease-spring);
}
.peek-todo.done .box { background: var(--success); border-color: var(--success); }
.peek-todo.done .box::after { transform: rotate(42deg) scale(1); }
/* Nur der Aufgabentext wird durchgestrichen, nicht das Datum darunter —
   sonst sieht es aus, als wäre der Termin auch erledigt. */
.peek-todo.done .nm { color: var(--text-dim); text-decoration: line-through; }
.peek-todo.done .nm em { text-decoration: none; }
.peek-todo .nm { transition: color var(--t-base) var(--ease-out); }

/* Die drei Punkte unter der Vorschau. */
.peek-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.peek-dot {
  width: 22px; height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--bg-lift);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out);
}
.peek-dot.on { background: var(--accent); width: 34px; }

@media (prefers-reduced-motion: reduce) {
  .peek-screen.go-in, .peek-screen.go-out { animation: none; }
  .panel[open] { animation: none; }
}