/* st-legacy.css — Brücke: bildet die bestehenden App-Klassen auf die neuen
   Design-Tokens (st-*) ab. So sehen alle Screens, die noch nicht einzeln auf
   das neue Markup umgebaut sind, sofort stimmig aus und funktionieren weiter.
   Wird NACH styles.css geladen und überschreibt deren Farb-/Schrift-Variablen.
   Muss NACH st-components.css stehen, damit die neue Basis (body) gewinnt. */

:root {
  /* Flächen */
  --bg:        var(--st-bg);
  --bg-2:      var(--st-surface-raised);
  --surface:   var(--st-surface);
  --surface-2: var(--st-surface-dial);
  --line:      var(--st-border);
  --line-2:    var(--st-border-strong);
  /* Text */
  --text:  var(--st-text);
  --muted: var(--st-text-dim);
  --faint: var(--st-text-faint);
  /* Marke / Status */
  --accent:   var(--st-accent);
  --accent-2: var(--st-accent-text);
  --accent-3: var(--st-accent-link);
  --ok:       var(--st-success);
  /* Form */
  --radius:    var(--st-r-lg);
  --radius-sm: var(--st-r-sm);
  --shadow:    var(--st-shadow-card);
  --shadow-sm: 0 10px 30px -14px rgba(0,0,0,.55);
  /* Schrift: durchgängig Archivo + JetBrains-Mono-Ziffern wie im neuen Design */
  --ff-head: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* #app ist jetzt der Scrollbereich der festen Shell. styles.css stylt #app noch
   mit Rahmenbreite/Polsterung — mit #app.st-scroll (höhere Spezifität als die
   alte #app-Regel) setzen wir das Layout der Shell durch.
   Voll-Bleed für die neuen st-Screens (self-padding), unten Platz für den Puck. */
#app.st-scroll { max-width: none; margin: 0; padding: 0 0 var(--st-scroll-bottom); }
#app.st-scroll--flush { padding-bottom: var(--st-sp-9); }
/* Legacy-Modus: seitlicher Rand wie im neuen Design (Alt-Markup self-padet nicht). */
#app.st-scroll.has-legacy {
  padding-left: var(--st-gutter);
  padding-right: var(--st-gutter);
  padding-top: 18px;
}

/* Zahlen/Zeiten monospaced wie im neuen Design (tabellarisch, springt nicht). */
.stat-wert, .bisher-wert, .zt-zeiten, .zt-arbeit, .zt-verr, .zt-saldo,
.mb-wert, .b-nr, .n-zeit, .prot-tag { font-family: var(--st-font-mono); }

/* Knöpfe etwas ruhiger an die neue Formsprache angleichen (weniger Pill). */
.btn-primary, .btn-nav { border-radius: var(--st-r-md); }
.mini, .chip, .artbtn, .link, .back { border-radius: var(--st-r-md); }

/* Die alte rote Unterstreichung der Sektionslabels entfällt — das neue Design
   nutzt schlichte Mono-Labels. */
.eyebrow::after, .block h3::after { display: none; }
.eyebrow, .block h3 {
  font-family: var(--st-font-mono);
  font-weight: 400;
  letter-spacing: var(--st-ls-section);
  color: var(--st-text-faint);
}
.eyebrow { margin-bottom: 14px; }

/* Timeline-Eintrag als <button> (nicht <a>): Karte füllt ihre Rasterzelle. */
.st-tl > .st-card { display: block; height: 100%; }

/* Fotovorschau füllt die quadratische Kachel. */
.st-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Puck: Viereck statt Schild (Wunsch Christian) — abgerundetes Quadrat mit
   schlichtem Vierecksymbol. */
.st-puck { border-radius: var(--st-r-2xl); }
.st-puck__sq {
  display: block; width: 19px; height: 19px;
  border: 2.5px solid currentColor; border-radius: 5px;
}