/* ============================================================================
 *  BASE  ·  Reset · Fonts · Ambient-Hintergrund · Typografie · A11y
 * ========================================================================== */

/* Inter — lokal gehostet, KEINE externe Verbindung (Datenschutz-Versprechen) */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:local(''), url('../fonts/inter-v20-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:local(''), url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:local(''), url('../fonts/inter-v20-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:local(''), url('../fonts/inter-v20-latin-600.woff2') format('woff2'); }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html { -webkit-text-size-adjust:100%; overscroll-behavior-y:contain; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: contain;   /* verhindert versehentliches Pull-to-Refresh am Handy */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ── AMBIENT: tiefer Nacht-Verlauf + sanfte Glows + Sternenfeld ──────────── */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(125% 80% at 50% -15%, var(--bg-glow), transparent 60%),
    radial-gradient(90% 60% at 12% 112%, var(--accent-soft), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  transition: background var(--dur-slow) var(--ease);
}
/* langsam atmende Aurora hinter dem Inhalt */
.ambient::after {
  content:''; position:absolute; left:50%; top:-12%; width:120%; height:72%;
  transform:translateX(-50%);
  background: radial-gradient(closest-side, var(--bg-glow), transparent 72%);
  filter: blur(34px); opacity:.7;
  animation: auroraDrift 40s ease-in-out infinite;
}
.ambient__stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.6px 1.6px at 76% 16%, var(--accent), transparent 60%),
    radial-gradient(1.1px 1.1px at 42% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 62% 30%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.7px 1.7px at 88% 40%, var(--accent), transparent 60%),
    radial-gradient(1.1px 1.1px at 8% 44%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 30% 58%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 64%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 52% 78%, var(--accent), transparent 60%),
    radial-gradient(1.1px 1.1px at 14% 82%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.3px 1.3px at 90% 80%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 36% 92%, rgba(255,255,255,.3), transparent 60%);
  background-repeat:no-repeat;
  transition: opacity var(--dur-slow) var(--ease);
  animation: starDrift 150s linear infinite alternate, starTwinkle 8s ease-in-out infinite;
  will-change: transform, opacity;
}
/* zweite, fernere Sternenebene → Parallax-Tiefe */
.ambient__stars--far {
  opacity:.3; background-position:60px 44px;
  animation: starDriftFar 230s linear infinite alternate, starTwinkleFar 13s ease-in-out infinite;
}
/* einzelne, leuchtende „Hero"-Sterne (glühen & schweben sanft) */
.ambient__glints { position:fixed; inset:0; z-index:-1; pointer-events:none; }
.glint {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff; opacity:.85;
  box-shadow:0 0 6px 1px rgba(255,255,255,.7), 0 0 16px 4px var(--glow);
  animation: glintPulse 7s ease-in-out infinite, glintFloat 17s ease-in-out infinite;
}
.glint--gold { background:var(--accent); box-shadow:0 0 6px 1px var(--accent), 0 0 18px 5px var(--glow); }

/* ── Typografie-Grundlagen ──────────────────────────────────────────────── */
h1, h2, h3 { line-height: 1.18; letter-spacing: -.02em; font-weight: 600; color: var(--text); }
a { color: var(--accent-2); text-decoration: none; }
b, strong { font-weight: 600; color: var(--text); }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── Fokus-Sichtbarkeit (Tastatur) ──────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }

/* ── Scrollbar (dezent) ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
::selection { background: var(--accent-soft); color: var(--text); }

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

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