/* =============================================================================
   ellenberger-service — Design-System Foundation (Epic #408 / W1, Issue #410)
   Dark-Mode-first. Tokens + reset + type scale + 8px-Baseline + 12-Spalten-Grid.
   Der UI-Shell-Layer (authenticated /app) lebt weiter in app.css, die Marketing-
   Flaeche in site.css — beide konsumieren die Variablen hier.

   Farb-Gewichtung (bewusst, siehe #410): Orange (--accent) NUR fuer CTA/Signal,
   entsaettigtes Blau (--accent-2) NUR fuer Datenlinien. Das Webflow-Orange/Blau-
   Duo bleibt als Logo-Bezug erhalten (Logo-Punkt), aber nicht flaechig nebeneinander.
   ============================================================================= */
:root {
  /* ---- surfaces (dark-mode-first) ---- */
  --bg: #0E0E10;
  --bg-elev: #141417;
  --surface: #161616;
  --surface-2: #1E1E22;
  --border: #26262B;
  --border-strong: #34343C;
  /* ---- text tiers ---- */
  --text: #F5F5F4;
  --muted: #A6A6AD;
  --faint: #6E6E77;
  /* ---- brand: reserved accents ---- */
  --accent: #F24D1D;        /* Orange — CTA / Signal ONLY */
  --accent-ink: #FFFFFF;    /* readable text on --accent */
  --accent-soft: rgba(242, 77, 29, .14);
  --accent-2: #3E8FB8;      /* entsaettigtes Blau — Datenlinien ONLY */
  /* back-compat aliases (site.css / app.css still reference --primary*) so the
     existing CTA styling adopts the brand accent without a wholesale rename */
  --primary: var(--accent);
  --primary-ink: var(--accent-ink);
  --primary-soft: var(--accent-soft);
  /* ---- status ---- */
  --ok: #3FB98A;
  --warn: #E0A23C;
  --danger: #E0556B;
  --ok-soft: #12241C;
  --warn-soft: #241E10;
  --danger-soft: #241318;
  /* ---- shape + motion ---- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  /* ---- 8px baseline spacing scale ---- */
  --space-1: .5rem;   /*  8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */
  --space-5: 2.5rem;  /* 40px */
  --space-6: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */
  --grid-gap: 1.5rem; /* 24px — 12-col gutter */
  /* ---- layout ---- */
  --container: 75rem; /* ~1200px content max-width @16px */
  --measure: 68ch;    /* comfortable line length for body copy */
  /* ---- type stacks ---- */
  /* Bricolage Grotesque = Display, Inter = Text, Geist Mono = Zahlen/Tech-Labels.
     Self-hosted variable WOFF2 (Latin) sind ueber die @font-face-Bloecke unten
     angebunden (Dateien in public/fonts/, im Docker-Build aus den
     @fontsource-variable/*-Paketen kopiert). KEIN Google-Fonts-CDN, kein Fremd-Host. */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: 16px; /* zoom anchor (M) — 8px baseline = .5rem */
}
:root[data-zoom="s"] { font-size: 14px; }
:root[data-zoom="m"] { font-size: 16px; }
:root[data-zoom="l"] { font-size: 18px; }

/* -----------------------------------------------------------------------------
   Self-hosted fonts (W1 #410) — variable WOFF2 (Latin-Subset), same-origin,
   0 Fremd-Host. Die Dateien liegen in public/fonts/ (im Docker-Build aus den
   @fontsource-variable/*-Paketen kopiert) und werden ueber die expliziten
   /assets/fonts/*.woff2-Routen (src/web/app.ts) ausgeliefert. KEIN Google-Fonts-CDN.
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}

/* ---- reset ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, samp { font-family: var(--mono); font-size: .85em; background: #0006; padding: .1em .4em; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 650; line-height: 1.15; letter-spacing: -.01em; }
input, select, textarea, button { font: inherit; color: inherit; }
::placeholder { color: var(--faint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- layout utilities: 12-col grid, container, measure (8px-based gutters) ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.measure { max-width: var(--measure); }
@media (max-width: 820px) { .grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }