/* ============================================================
   DRESDEN 1900 — Design-Tokens (einzige Quelle für Farbe/Größe/Font)
   ============================================================ */
:root {
  /* --- Braun-Skala --- */
  --brown-900: #241608;   /* tiefstes Braun: Footer, Schatten */
  --brown-800: #34220F;   /* dunkle Überschrift auf hell */
  --brown-700: #48331F;   /* dunkle Sektionsbühnen / Header-Topbar */
  --brown-600: #5C4433;   /* mittleres Braun */
  --brown-500: #7A6142;   /* gedämpfter Text auf hell (muted) */
  --brown-400: #9A805C;   /* feine Linien auf dunkel, dezente Zier */

  /* --- Creme-Skala --- */
  --cream-100: #FBF4E6;   /* Karten-Ivory (hellste Fläche) */
  --cream-200: #F3E4C7;   /* Seitengrund / Navigationsleiste */
  --cream-300: #E9D6B4;   /* Inset / getönte Fläche */

  /* --- Akzente --- */
  --brick:     #9E3A2A;   /* primärer Button auf hell */
  --brick-700: #85301F;   /* Button-Hover */
  --red:       #C0201E;   /* Emaille-Badge (Logo) */
  --red-700:   #97110F;
  --gold:      #C9962F;   /* Sterne / feine Zier */
  --gold-soft: #E0BE7E;   /* Gold auf dunklem Grund */
  --ok:        #4E7A46;   /* Häkchen / Bestätigung */

  /* --- Semantische Rollen (heller Default-Kontext) --- */
  --bg:            var(--cream-200);
  --surface:       var(--cream-100);   /* Karten */
  --surface-media: #D9C4A2;            /* Bild-Platzhalter (warmer Tan) */
  --surface-inset: var(--cream-300);   /* Inset in Karten */
  --heading:       #573B22;   /* warmes Braun für Überschriften (etwas dunkler) */
  --text:          var(--brown-700);
  --text-muted:    var(--brown-500);
  --border:        #E0CBA3;
  --border-strong: #C9AE7F;
  --accent-text:   var(--brick);

  /* --- Zeichnungs-/RGB-Helfer für alpha-Mischungen --- */
  --rgb-white: 255 255 255;
  --rgb-cream: 251 244 230;
  --rgb-brown: 36 22 8;

  /* --- Form --- */
  --radius:    6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow:    0 2px 6px rgb(36 22 8 / .10);
  --shadow-md: 0 8px 24px rgb(36 22 8 / .14);

  /* --- Typografie --- */
  /* Display bleibt Serife (Design), Text wird serifenlos (Lesbarkeit) */
  --font-display: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui:      "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display: clamp(2.1rem, 1.35rem + 3.4vw, 3.4rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.08rem + 0.8vw, 1.5rem);
  --fs-h4:      1.15rem;
  --fs-lead:    clamp(1.06rem, 1.0rem + 0.35vw, 1.2rem);
  --fs-body:    1.0625rem;    /* 17px — serifenlos läuft grösser */
  --fs-small:   0.95rem;
  --fs-micro:   0.82rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.14;
  --lh-head:  1.2;
  --lh-body:  1.5;
  --ls-eyebrow: 0.16em;
  --ls-caps:    0.09em;

  /* --- Layout --- */
  --wrap:       1120px;
  --wrap-narrow: 780px;
  --measure:    62ch;
  --header-h:   72px;
  --section-py: clamp(3rem, 1.6rem + 6vw, 6rem);

  /* --- Spacing-Skala --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  .2s;
}

/* Dunkler Kontext: Überschrift/Text/Muted hell, Rahmen warm-transparent */
.on-dark {
  --heading:    var(--cream-100);
  --text:       #F1E5D0;
  --text-muted: #DcC7A4;
  --border:     rgb(255 255 255 / .18);
  --border-strong: rgb(255 255 255 / .30);
  --surface:    rgb(255 255 255 / .06);
  --surface-inset: rgb(255 255 255 / .08);
  --accent-text: var(--gold-soft);
  color: var(--text);
}
.on-dark a:not(.btn) { color: var(--gold-soft); }