/* ==========================================================================
   base.css — Reset & Grundtypografie
   Normalisiert Browser-Defaults und legt die Basisdarstellung von
   HTML-Elementen fest. Enthält keine Komponenten- oder Layoutregeln.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-muted);

  /* Einfarbiger Grund, dazu acht weiche goldene Lichtpunkte, verstreut an
     den Bildschirmrändern über die ganze Seitenlänge — dieselbe Rezeptur
     wie --gradient-glow hinter dem Hero-Titel, nur an anderen Stellen und
     mit fester Kreisgröße (px), damit sie auf der sehr langen Seite nicht
     riesig würden. Größen bewusst breit gestreut, 300–546 px. Positionen
     unregelmäßig statt im Raster. Reine Hintergrundebene, unbewegt und
     günstig beim Scrollen — kein background-attachment: fixed. */
  background-color: var(--bg);
  background-image:
    radial-gradient(430px circle at 6% 3%,   rgba(224, 192, 99, .22) 0%, rgba(224, 192, 99, .09) 45%, rgba(224, 192, 99, .03) 70%, rgba(224, 192, 99, 0) 88%),
    radial-gradient(340px circle at 93% 14%, rgba(224, 192, 99, .19) 0%, rgba(224, 192, 99, .08) 45%, rgba(224, 192, 99, .03) 70%, rgba(224, 192, 99, 0) 88%),
    radial-gradient(520px circle at 4% 27%,  rgba(224, 192, 99, .17) 0%, rgba(224, 192, 99, .07) 45%, rgba(224, 192, 99, .02) 70%, rgba(224, 192, 99, 0) 88%),
    radial-gradient(310px circle at 96% 40%, rgba(224, 192, 99, .20) 0%, rgba(224, 192, 99, .08) 45%, rgba(224, 192, 99, .03) 70%, rgba(224, 192, 99, 0) 88%),
    radial-gradient(460px circle at 3% 53%,  rgba(224, 192, 99, .18) 0%, rgba(224, 192, 99, .07) 45%, rgba(224, 192, 99, .02) 70%, rgba(224, 192, 99, 0) 88%),
    radial-gradient(300px circle at 95% 66%, rgba(224, 192, 99, .21) 0%, rgba(224, 192, 99, .09) 45%, rgba(224, 192, 99, .03) 70%, rgba(224, 192, 99, 0) 88%),
    radial-gradient(546px circle at 8% 80%,  rgba(224, 192, 99, .16) 0%, rgba(224, 192, 99, .06) 45%, rgba(224, 192, 99, .02) 70%, rgba(224, 192, 99, 0) 88%),
    radial-gradient(380px circle at 90% 93%, rgba(224, 192, 99, .20) 0%, rgba(224, 192, 99, .08) 45%, rgba(224, 192, 99, .03) 70%, rgba(224, 192, 99, 0) 88%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Body-Scroll sperren, solange das Mobilmenü offen ist */
body.is-locked { overflow: hidden; }

/* --- Überschriften ------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { text-wrap: pretty; }

/* --- Links -------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover { color: var(--accent); }

/* --- Listen ------------------------------------------------------------- */

ul, ol {
  padding: 0;
  list-style: none;
}

/* --- Medien ------------------------------------------------------------- */

img, svg, video {
  display: block;
  max-width: 100%;
}

svg { height: auto; }

/* Geldbeträge im Fließtext: eigene Display-Schrift, kursiv — dieselbe
   Auszeichnung wie in der Beispielrechnung, nur als Inline-Utility für
   einzelne Summen innerhalb eines Satzes. */
.geldbetrag {
  font-family: var(--font-display);
  font-style: italic;
}

/* --- Formularelemente --------------------------------------------------- */

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

textarea { resize: vertical; }

/* --- Fokus & Auswahl ---------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  /* Neutrale, helle Markierung statt Gold — der Akzent bleibt Buttons und
     Überschriften vorbehalten, markierter Text bleibt weiß lesbar. */
  background: rgba(255, 255, 255, .25);
  color: #ffffff;
}

:root[data-theme="light"] ::selection {
  background: rgba(12, 12, 14, .14);
  color: #0c0c0e;
}

/* --- Sprunglink für Tastaturnutzer -------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-3);
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--text-inverse);
  border-radius: var(--radius);
  font-weight: var(--fw-semibold);
}

.skip-link:focus {
  left: var(--space-3);
  color: var(--text-inverse);
}

/* --- Hilfsklassen ------------------------------------------------------- */

.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Reduzierte Bewegung respektieren ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}