/* ==========================================================================
   variables.css — Design-Tokens
   Zentrale Stellschrauben für Farben, Schrift, Abstände und Radien.
   Anpassungen am Erscheinungsbild möglichst NUR hier vornehmen.
   ========================================================================== */

:root {
  /* ---- Farbschema: Weiß & Orange ---- */
  --color-primary: #e8823a;        /* Haupt-Orange (Buttons, Akzente) */
  --color-primary-dark: #c96a26;   /* Hover-/Aktivzustände */
  --color-primary-soft: #fdf1e7;   /* sehr helles Orange für Flächen */
  --color-primary-tint: #fae3d0;   /* dezente Verläufe, Karten-Hover */

  --color-bg: #ffffff;             /* Seitenhintergrund */
  --color-bg-alt: #fdf9f5;         /* abwechselnde Sektionen (warmes Weiß) */
  --color-surface: #ffffff;        /* Karten, Boxen */

  --color-text: #3d3630;           /* Fließtext — warmes Dunkelbraun statt Schwarz */
  --color-text-soft: #7a6f64;      /* Nebentexte, Untertitel */
  --color-heading: #2e2925;        /* Überschriften */
  --color-on-primary: #ffffff;     /* Text auf orangen Flächen */

  --color-border: #f0e4d8;         /* zarte Trennlinien */
  --color-footer-bg: #2e2925;      /* dunkler Footer */
  --color-footer-text: #d9d2ca;

  /* ---- Typografie ----
     Systemschriften: schnell & DSGVO-unkritisch (kein externes Nachladen).
     Für eine eigene Schrift: Fontdateien lokal ablegen und hier eintragen. */
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  --text-base: 1.0625rem;          /* 17px Grundschrift — ruhig, gut lesbar */
  --leading-base: 1.7;

  /* ---- Abstände ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* ---- Layout ---- */
  --content-width: 1080px;
  --content-narrow: 760px;         /* Textseiten (Impressum, Datenschutz) */

  /* ---- Sonstiges ---- */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 6px 24px rgba(61, 54, 48, 0.08);
  --shadow-card-hover: 0 10px 32px rgba(200, 106, 38, 0.16);
  --transition: 0.25s ease;
}