/* =====================================================================
   css/base.css — Gemeinsame Basis-Typografie, Polish & A11y
   Lädt NACH tokens.css, VOR den seiten-spezifischen <style>-Blöcken.
   `html body`-Spezifität (2 Elemente) übersteuert die inline `body{}`-
   Regeln der Seiten, ohne dass jede Seite einzeln angefasst werden muss.
   ===================================================================== */

/* ── Typografie ────────────────────────────────────────────── */
html body{
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hero- und Sektionsüberschriften in der Display-Grotesk (serifenlos) */
.headline,
main h2,
.sect-title,
.section-title{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Kontrast-sicheres Gold (--gold-text) ist in tokens.css definiert.
   Reines --gold (#b59b52 ~2.4:1) nur für große Deko/Headlines/Flächen. */

/* ── Barrierefreiheit ──────────────────────────────────────── */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:2000;
  background:var(--text); color:#fff; padding:10px 16px; border-radius:0 0 10px 10px;
  font-weight:600; text-decoration:none; transition:top .18s ease;
}
.skip-link:focus{ top:0; outline:3px solid var(--gold); outline-offset:2px; }

/* Sichtbarer Fokus für Tastaturnutzer (überall, ohne Maus-Klicks zu stören) */
:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Sanfte Scroll-Einblendungen (Progressive Enhancement) ────
   Der Ausgangszustand (opacity:0) greift NUR, wenn JS die Klasse
   .js-reveal am <html> gesetzt hat — ohne JS bleibt alles sichtbar.
   Respektiert prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .reveal-up{
    opacity:0; transform:translateY(18px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  }
  .js-reveal .reveal-up.is-in{ opacity:1; transform:none; }
}