/* ================================================================
   CRS Public Site — Basis-Reset
   Seiten-Design kommt vollständig aus dem content_css jeder Seite
   (siehe views/page.ejs). Diese Datei liefert nur noch die
   Bausteine für Systemseiten (404/500), die keine eigene
   Seiten-DB-Zeile haben.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base:      #0a0b0f;
  --gold:         #d4a017;
  --gold-light:   #f0c040;
  --text-primary: #e8eaf0;
  --text-muted:   #8a8fa0;
  --text-dark:    #4a4f63;
}

html { scroll-behavior: smooth; }

/* ── Live-Ticker-Links (News/Events) ──────────────────────────────
   Die eigentliche Optik (Größe/Abstand/Farbe/Responsive-Anpassung) kommt
   bewusst NICHT von hier, sondern von der Seiten-eigenen Regel
   ".ticker-track span" — live-data.js verschachtelt bei Links deshalb immer
   ein <span> INNERHALB des <a> (siehe wireTicker()). ".ticker-track a" selbst
   bleibt rein "unsichtbar": kein eigener Font/Farbe (ein direktes "color:
   inherit"/"font: inherit" auf <a> würde vom DIREKTEN Elternelement
   .ticker-track erben, NICHT vom Geschwister-<span> — genau das führte zu
   sichtbar größerem/anders gefärbtem Link-Text, siehe LEARNINGS.md). */
.ticker-track a {
  text-decoration: none;
}
.ticker-track a:hover span {
  text-decoration: underline;
  color: var(--gold, #d4a017);
}

/* ── Seitenübergänge (View Transitions) ──────────────────────────
   Lässt eine interne Navigation wie einen Wechsel innerhalb derselben
   Seite wirken statt wie ein harter Neu-Laden — ohne SPA-Umbau, per
   nativer Browser-API. Unterstützende Browser (Chromium/Edge, Stand
   2026 auch Firefox/Safari) blenden alt→neu über; nicht unterstützende
   Browser ignorieren die Regel und laden ganz normal (progressive
   enhancement, kein Risiko). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root) { animation-name: crs-page-out; }
::view-transition-new(root) { animation-name: crs-page-in; }

@keyframes crs-page-out {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to   { opacity: 0; transform: translateY(-10px) scale(.99); filter: blur(3px); }
}
@keyframes crs-page-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Leere Seite Placeholder ─────────────────────────────────── */
.page-empty-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh; text-align: center;
  padding: 80px 40px;
}
.page-empty-placeholder .empty-icon { font-size: 4rem; margin-bottom: 24px; }
.page-empty-placeholder h2 { color: var(--text-primary); margin-bottom: 12px; }
.page-empty-placeholder p { color: var(--text-muted); }

/* ── Error Page (404/500) ────────────────────────────────────── */
.error-page {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 70vh; text-align: center; padding: 80px 40px;
}
.error-code {
  font-size: 8rem; font-weight: 700;
  color: var(--gold); opacity: 0.3;
  line-height: 1; margin-bottom: 16px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none;
  transition: all .2s; white-space: nowrap;
}
.btn-primary { background: var(--gold); color: var(--bg-base); }
.btn-primary:hover { background: var(--gold-light); color: var(--bg-base); }