/* ============================================================
   SG Empor Waldersee – Design-Tokens  (v1, 2026-07-19)
   Farbquellen: gemessen aus logo-webseite.jpg
   ============================================================ */

:root {
  /* ---- Farbrollen ------------------------------------------------ */
  /* Primär: Petrol der Wortmarke (gemessen #005070) */
  --sge-petrol:        #005070;  /* Primärflächen, Headlines auf hell   */
  --sge-petrol-dunkel: #003D56;  /* Hover auf Primär, Verläufe          */
  --sge-nacht:         #0B2833;  /* Footer, dunkelste Fläche            */

  /* Sekundär: Schild-Cyan des Logos (gemessen #0090D0) */
  --sge-cyan:          #0090D0;  /* Links, aktive Zustände, Grafik      */
  --sge-cyan-tief:     #0071A6;  /* Link-Hover, Cyan auf Weiß (Text AA) */

  /* Neutral */
  --sge-tinte:         #16303B;  /* Fließtext                           */
  --sge-grau:          #52707D;  /* Sekundärtext, Captions              */
  --sge-linie:         #C9DCE5;  /* Hairlines, Kartenränder             */
  --sge-wasser:        #EAF3F8;  /* helle Wechselflächen (kühl, blau)   */
  --sge-papier:        #FFFFFF;

  /* Akzent: Wappen-Gold – NUR Anstoß-Marker + Demo-Badges */
  --sge-gold:          #F0B429;
  --sge-gold-tinte:    #4A3406;  /* Text auf Gold                       */

  /* ---- Typografie ------------------------------------------------ */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Skala mobil zuerst; Desktop-Werte via Media Query unten */
  --fs-display: 2.125rem;  /* 34px – Hero-Claim            */
  --fs-h1:      1.75rem;   /* 28px – Seitentitel           */
  --fs-h2:      1.5rem;    /* 24px – Abschnittstitel       */
  --fs-h3:      1.1875rem; /* 19px – Kartentitel           */
  --fs-body:    1.0625rem; /* 17px – Fließtext             */
  --fs-klein:   0.9375rem; /* 15px – Sekundär, Terminzeile */
  --fs-meta:    0.8125rem; /* 13px – Eyebrow, Caption      */

  --lh-display: 1.12;
  --lh-heading: 1.2;
  --lh-body:    1.55;

  --ls-eyebrow: 0.09em;    /* Versal-Eyebrows */

  /* ---- Spacing (4px-Basis) --------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;   /* Abschnittsabstand mobil   */
  --sp-9: 6.5rem;   /* Abschnittsabstand Desktop */

  /* ---- Layout ---------------------------------------------------- */
  --container: 71.25rem;   /* 1140px */
  --gutter: 1.25rem;       /* mobil; Desktop 2rem */

  /* ---- Radius / Schatten / Linien -------------------------------- */
  --radius-s: 0.375rem;    /* Chips, Badges     */
  --radius-m: 0.625rem;    /* Karten, Buttons   */
  --radius-l: 1rem;        /* große Bildkarten  */
  --shadow-karte: 0 1px 2px rgba(11, 40, 51, 0.06), 0 6px 18px rgba(11, 40, 51, 0.07);
  --shadow-hoch:  0 2px 4px rgba(11, 40, 51, 0.08), 0 16px 40px rgba(11, 40, 51, 0.16);

  /* „Bande“: Doppel-Linie wie die weiße Platzbarriere */
  --bande: linear-gradient(
      to bottom,
      currentColor 0 2px, transparent 2px 6px,
      currentColor 6px 8px, transparent 8px);

  /* ---- Motion ---------------------------------------------------- */
  --t-schnell: 140ms ease;
  --t-ruhig:   260ms ease;
}

@media (min-width: 56.25em) { /* 900px */
  :root {
    --fs-display: 3.375rem;  /* 54px */
    --fs-h1:      2.5rem;    /* 40px */
    --fs-h2:      2rem;      /* 32px */
    --fs-h3:      1.3125rem; /* 21px */
    --gutter: 2rem;
  }
}