/* ============================================================================
   DATEI: css/grundlagen.css  –  Farben, Schrift und Grundregeln für ALLE Seiten
   ============================================================================
   WIE CSS FUNKTIONIERT (in 30 Sekunden):
     selektor { eigenschaft: wert; }
       body        { … }  gilt für das <body>-Element
       .button     { … }  gilt für alle Elemente mit class="button"
       #jahr       { … }  gilt für das Element mit id="jahr"
       .karte img  { … }  gilt für <img>, die IN einem .karte-Element stehen
       a:hover     { … }  gilt, wenn die Maus über einem Link ist

   EINHEITEN:
     px   feste Pixel
     rem  relativ zur Grundschrift (1rem = meist 16px)
     %    Anteil am umgebenden Element
     vw   Anteil an der Fensterbreite (10vw = 10 % der Breite)
     clamp(MIN, WUNSCH, MAX)  wächst mit dem Fenster, bleibt aber zwischen MIN und MAX

   REIHENFOLGE: Diese Datei wird ZUERST geladen. Spätere Dateien (layout.css,
   komponenten.css …) dürfen ihre Regeln überschreiben.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   FARBEN UND MASSE ALS VARIABLEN
   Variablen beginnen mit --. Sie werden überall mit var(--name) benutzt.
   EINE Änderung hier wirkt sofort auf ALLEN Seiten.

   BEISPIELE:
     --farbe-rot: #0a7d3b;      -> alle roten Knöpfe werden grün
     --farbe-gold: #ffffff;     -> Preise, Rahmen, Akzente werden weiß
     --breite-inhalt: 1100px;   -> Inhalt wird auf großen Bildschirmen schmaler
     --radius-karte: 0;         -> Karten bekommen eckige statt runde Ecken

   HEX-FARBEN: #RRGGBB (Rot, Grün, Blau, je 00 bis ff).
     #000000 = schwarz, #ffffff = weiß, #ff0000 = rot.
     rgba(233,183,109,0.35) = Farbe mit 35 % Deckkraft (durchscheinend).
   --------------------------------------------------------------------------- */
:root {
  --farbe-hintergrund: #090a0b;   /* Seitenhintergrund (fast schwarz) */
  --farbe-flaeche: #121416;       /* Karten und Kästen (etwas heller) */
  --farbe-flaeche-hell: #1b1d20;  /* Flächen beim Darüberfahren */
  --farbe-text: #f8f8f6;          /* normale Schrift */
  --farbe-gedimmt: #b6b6b5;       /* weniger wichtige Schrift (Untertitel) */
  --farbe-gold: #e9b76d;          /* Preise, Rahmen, Akzente */
  --farbe-rot: #d60827;           /* Hauptknöpfe, aktive Kategorie */
  --farbe-linie: rgba(233, 183, 109, 0.35);  /* dezente goldene Linien */

  --breite-inhalt: 1320px;        /* maximale Breite des Inhalts */
  --radius-karte: 16px;           /* Rundung der Kartenecken */
  --radius-button: 999px;         /* 999px = "Pillenform" (komplett rund an den Seiten) */
  --abstand-seite: clamp(18px, 4vw, 56px);  /* Rand links/rechts: Handy 18px, Desktop bis 56px */
}

/* box-sizing: border-box = Innenabstand und Rahmen zählen zur Breite dazu.
   Ohne diese Regel wäre ein "width: 100%"-Element mit Padding breiter als 100 %. */
*, *::before, *::after { box-sizing: border-box; }

/* Weiches Scrollen bei Links wie #hauptinhalt.
   scroll-padding-top: Platz für die festklebende Kopfzeile, damit sie die
   Überschrift nicht verdeckt. WENN die Kopfzeile höher wird, Wert erhöhen. */
html { scroll-behavior: smooth; scroll-padding-top: 105px; }

body {
  margin: 0;                       /* Browser-Standardrand entfernen */
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  /* Schriftliste: die erste verfügbare wird benutzt. system-ui = Systemschrift
     (auf dem iPhone San Francisco). Es werden KEINE Google-Fonts geladen –
     das ist gut für Datenschutz und Ladezeit.
     WENN DU eine eigene Schrift willst: Datei in einen Ordner fonts/ legen und
     per @font-face einbinden (nicht von Google-Servern laden!). */
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;               /* Zeilenabstand: 1.55 × Schriftgröße */
  -webkit-font-smoothing: antialiased;
}

/* Bilder nie breiter als ihr Platz – verhindert seitliches Scrollen auf dem Handy. */
img { display: block; max-width: 100%; }

/* Links: keine Unterstreichung, gleiche Farbe wie der Text drumherum. */
a { color: inherit; text-decoration: none; }

/* Formularelemente übernehmen die Seitenschrift (Browser nehmen sonst eine eigene). */
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }   /* Hand-Zeiger über Knöpfen */

/* Sichtbarer Rahmen, wenn man mit der Tab-Taste navigiert (Barrierefreiheit).
   Bitte NICHT entfernen – sonst wissen Tastatur-Nutzer nicht, wo sie sind. */
:focus-visible { outline: 3px solid var(--farbe-gold); outline-offset: 4px; }

/* .container hält den Inhalt mittig und begrenzt seine Breite.
   min(A, B) nimmt den kleineren Wert: auf dem Handy volle Breite minus Rand,
   auf großen Bildschirmen höchstens --breite-inhalt. */
.container { width: min(calc(100% - 2 * var(--abstand-seite)), var(--breite-inhalt)); margin-inline: auto; }

/* Nur für Screenreader sichtbar (z. B. "Zum Inhalt springen"). */
.nur-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}