/* ===================================================================
   beklaro.css — Design-System-Kern
   ===================================================================
   Einzige Quelle der Wahrheit für Schriften, Design-Tokens und die
   Reset-Regeln, die auf JEDER Seite identisch gelten.

   AUFNAHMEKRITERIUM für diese Datei: eine Regel steht hier nur dann,
   wenn sie in allen bestehenden Seiten byte-identisch vorkam. Belegt
   durch Vergleich am 15.08.2026 über index/preise/kontakt/impressum/
   datenschutz:
     - 19 Design-Tokens, 0 Wertkonflikte
     - *, ::selection, :focus-visible, .eyebrow::before → 5/5 identisch
   Alles andere (body, a, .nav, .footer, .logo, .eyebrow, h1, h2, p)
   existiert in mehreren Varianten und gehört daher bewusst NICHT hier
   hinein, sondern in die Shell-Dateien (legal.css, blog.css).

   WICHTIG — Pfade: url() löst relativ zu DIESER Datei auf, nicht zum
   einbindenden HTML. Daher ../fonts/ und nicht assets/fonts/. Dadurch
   funktioniert die Datei aus jeder Verzeichnistiefe (auch /blog/slug/).

   Eingebunden von: impressum.html, datenschutz.html, /blog/**
   Noch NICHT eingebunden von: index.html, preise.html, kontakt.html
   (bewusst — eigener, separat geprüfter Migrationsschritt).
=================================================================== */

/* ---------- Schriften (self-hosted, keine Drittanbieter-Requests, DSGVO) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-stretch:100%;font-display:swap;src:url(../fonts/bricolage-grotesque-600-800.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk-400-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600.woff2) format('woff2')}

/* ---------- Design-Tokens ----------
   Vollständige Vereinigungsmenge aller fünf Seiten. Die Rechtsseiten
   nutzen nur die obere Hälfte; überzählige Tokens kosten nichts, halten
   aber die Palette an EINER Stelle pflegbar. */
:root{
  /* Flächen & Text */
  --bg:#FBFBFA;
  --ink:#16181D;
  --muted:#6A6E78;
  --hairline:#E5E4DF;

  /* Marke */
  --navy:#1D3557;

  /* Ampel-Farben — ausschließlich für echte Status-/Compliance-Anzeigen.
     Nie dekorativ oder für Marketing-Text verwenden. */
  --green:#2E7D5B;
  --amber:#B5790F;
  --red:#C0392B;

  /* Dunkle Hero-/CTA-Flächen */
  --hero-bg:#0C1219;
  --hero-ink:#EDF0F4;
  --hero-muted:#8B95A3;
  --hero-hairline:rgba(237,240,244,.10);

  /* Formular-Fehlerzustand */
  --error:#9B4A42;

  /* Typografie */
  --font-head:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Bewegung & Maße */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --radius:14px;
  --maxw:1200px;
}

/* ---------- Reset & Basis (in allen fünf Seiten byte-identisch) ---------- */
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}

/* Der Strich vor der Mono-Eyebrow — einzige Komponenten-Regel, die auf
   allen fünf Seiten identisch ist. */
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}