:root {
  /* ── Brand Colors ───────────────────────────────────────────────── */
  --at-blue:       #0073CF;
  --at-dark-blue:  #00609D;
  --at-red:        #A70240;
  --at-dark-red:   #970939;
  --at-petrol:     #00B588;
  --at-yellow:     #EDA71C;

  /* ── Neutrals ───────────────────────────────────────────────────── */
  --at-black-90:   #37383A;
  --at-black-60:   #696A6B; /* war #7A7B7C — Kontrast auf Weiß ~3.9:1 (WCAG-Fehler); jetzt ~4.7:1 */
  --at-black-30:   #BDBDBD;
  --at-black-15:   #EBEBEB;
  --at-black-05:   #F5F5F5;
  --at-white:      #FFFFFF;

  /* ── Semantic Tokens (Light Mode) ───────────────────────────────── */
  --bg-page:       var(--at-white);
  --bg-surface:    var(--at-black-05);
  --bg-card:       var(--at-white);
  --border:        var(--at-black-15);
  --border-strong: var(--at-black-30);
  --text-primary:  var(--at-black-90);
  --text-secondary:var(--at-black-60);
  --text-muted:    var(--at-black-30);
  --link:          var(--at-red);
  --link-hover:    var(--at-dark-red);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-heading: 'Blinker', 'IBM Plex Sans';
  --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size:  15px;

  /* ── Spacing ────────────────────────────────────────────────────── */
  --max-width:  1360px;
  --px:         32px;       /* horizontal page padding */
  --px-sm:      20px;       /* mobile horizontal padding */

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease:       cubic-bezier(.2,.8,.2,1);
  --dur:        150ms;
}