/* KASKADE 1.2–1.4: Design-Tokens. Varianten: [data-theme="gelb|kupfer|wald|rot"], [data-fonts="1|inter|2"] auf <html>. */

@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Neutrale Basis (für alle Varianten gleich) */
  --graphit: #16171A;
  --graphit-2: #1F2125;
  --papier: #F3F0EA;
  --papier-2: #E9E5DC;
  --linie-dunkel: #2E3036;
  --linie-hell: #D6D1C6;
  --text-hell: #F3F0EA;
  --text-dunkel: #16171A;
  --muted: #8C8A84;
  --muted-dunkel: #5F5D58;   /* Muted auf Papier, 5,9:1 */
  --error: #C0392B;
  --success: #2F7D4F;

  /* Akzent: CI-Gelb aus dem Logo (Default). Auf Gelb nur dunkler Text (Weiß 2,3:1 reicht nicht). */
  --akzent: #F3AB19;          /* auf Graphit 9,3:1 */
  --akzent-strong: #8A5C00;   /* Akzent-Text/Linien auf Papier 5,1:1, Weiß darauf 5,8:1 */
  --akzent-fill: #F3AB19;     /* Flächen von Buttons, Badges, aktiven Chips */
  --akzent-on: #16171A;       /* Text auf --akzent-fill */

  /* Typografie: Montserrat (CI), Labels/Daten IBM Plex Mono */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --display-weight: 700;

  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --fs-price: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --fs-stat: clamp(3rem, 2rem + 4vw, 6rem);

  /* Abstände (Basis 8) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* Raster (mobil) */
  --cols: 4;
  --gutter: 16px;
  --rand: 16px;
  --container: 1360px;
  --section-pad: 80px;
  --head-gap: 32px;
  --block-pad: 20px;

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  --header-h: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 220ms;
}

@media (min-width: 768px) {
  :root { --cols: 8; --gutter: 20px; --rand: 32px; --section-pad: 112px; --head-gap: 48px; --block-pad: 32px; --header-h: 64px; }
}
@media (min-width: 1024px) {
  :root { --cols: 12; --gutter: 24px; --rand: 48px; --section-pad: 144px; --head-gap: 56px; --block-pad: 40px; --header-h: 72px; }
}

/* Akzent-Varianten (Preview-Schalter ?theme=) */
[data-theme="kupfer"] { --akzent: #C27A45; --akzent-strong: #9A5A2E; --akzent-fill: #9A5A2E; --akzent-on: #fff; }
[data-theme="wald"] { --akzent: #5E9E72; --akzent-strong: #2F5E43; --akzent-fill: #2F5E43; --akzent-on: #fff; }
[data-theme="rot"]  { --akzent: #E4472F; --akzent-strong: #C23A25; --akzent-fill: #C23A25; --akzent-on: #fff; }

/* Schriftpaar 2 (?fonts=2): Serif-Display, wärmer */
[data-fonts="inter"] { --font-display: "Inter Tight", "Inter", system-ui, sans-serif; --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
[data-fonts="2"] { --font-display: "Source Serif 4", Georgia, serif; --display-weight: 600; }