/* ==========================================================================
   base.css — Reset, Grundtypografie, Hintergrundebene, Fokus.
   ========================================================================== */

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

/* `hidden` muss jede eigene display-Regel schlagen. Die Regel des Browsers
   ([hidden] { display: none }) hat die niedrigste Herkunft und verliert gegen
   jedes .field { display: flex } — ein verstecktes Feld bliebe sonst stehen. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--void);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;                 /* Desktop: kein Scrollen */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1000px) {
  body { overflow-y: auto; }
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* --- Fokus ---------------------------------------------------------------
   Sichtbar, aber nur bei Tastaturbedienung. Immer 2px, immer --link.        */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--link);
  border-radius: var(--radius-control);
}

/* --- Hintergrundebene ---------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--void);
}

.bg__img {
  position: absolute;
  /* Überstand, damit Ken Burns + Parallaxe nie eine Kante zeigen */
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--ease-soft);
  will-change: transform, opacity;
}
.bg__img.is-visible { opacity: 1; }

/* Verlauf: oben-links dunkler als unten-rechts.
   Die Werte liegen bewusst über der ursprünglichen Planung (0.75 → 0.45).
   Nachgerechnet über einer weißen Bildstelle ergab 0.45 an der hellen Ecke
   nur 3.85:1 für --ink-3 und 4.29:1 für --link — beides unter der Grenze von
   4.5:1. Mit 0.62 sind es 5.18:1 und 5.76:1. Richtung und Charakter des
   Verlaufs bleiben unverändert, er wird nur tief genug. */
.bg__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(6, 7, 13, 0.82) 0%,
    rgba(6, 7, 13, 0.72) 45%,
    rgba(6, 7, 13, 0.62) 100%
  );
  pointer-events: none;
}

/* Zusätzliche Randabdunklung: hält Ecktexte (Bildnachweis, Zitat) lesbar,
   ohne die Bildmitte zu trüben. */
.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 50% 42%,
    rgba(6, 7, 13, 0) 40%,
    rgba(6, 7, 13, 0.55) 100%
  );
  pointer-events: none;
}

/* --- Sternenebenen -------------------------------------------------------- */
.bg__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bg__stars span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff;
}

/* --- Hilfsklassen --------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Rubrikzeile — die einzige Stelle mit Versalien.
   Trägt --ink-3, nicht --ink-4: auf Glas kommt --ink-4 nur auf rund 3:1 und
   fällt damit unter die Grenze für Text. --ink-4 bleibt den rein
   schmückenden Zeichen vorbehalten. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Ruhiger Platzhalter: gedämpfte Fläche, kein Kringel, kein Pulsieren. */
.placeholder {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 6px;
  display: block;
}

/* Zeitzeichen für veraltete Werte */
.stale-mark {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Scrollbars innerhalb von Karten */
.scroll-y {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 3px;
}