/* Zaster-Radar: eine Token-Familie fuer alle Seiten.
   Phase 2 des Design-Umbaus (06.09.2026, audit/design-kritik.md Teil 3).
   Einzige Quelle fuer Farben, Schrift, Abstaende, Radien, Bewegung und
   Ebenen. Wird vom Build vor assets/rahmen.css in jede Seite eingesetzt.

   Regeln:
   - --zr2-action nur fuer Handlungen, --zr2-critical nur fuer Mehrkosten.
   - Vier Radien: 4, 12, 20 und 999 px.
   - Schrift: zehn Stufen, keine Groesse unter 12 px.
   - Abstaende im 4-pt-Raster; Hauptstufen 8, 16, 24, 32, 48, 64, 80.
   - Monospace (--zr2-font-data) nur fuer Zahlen.
   - Alte Namen (--zr-*, die pages.css-Familie, --zr-rahmen-*) stehen am
     Ende als Aliase, damit Skripte und generierte Seiten weiterlaufen.
     Neue Regeln nutzen ausschliesslich --zr2-*. */

:root,
html[data-zr-theme="dark"] {
  color-scheme: dark;

  /* Flaechen */
  --zr2-canvas: #0f1112;
  --zr2-surface: #171a1b;
  --zr2-surface-raised: #1f2325;
  --zr2-surface-sunken: #131617;
  --zr2-surface-inset: #181b1c;
  --zr2-surface-ghost: #1d2122;
  --zr2-surface-tint: rgba(255, 255, 255, .035);
  --zr2-nav: rgba(15, 17, 18, .88);

  /* Text */
  --zr2-ink: #eef0ef;
  --zr2-body: #bcc2c1;
  --zr2-muted: #949b99;
  --zr2-faint: #7f8684;

  /* Linien */
  --zr2-line: rgba(238, 240, 239, .11);
  --zr2-line-strong: rgba(238, 240, 239, .20);
  --zr2-line-solid: #292d2e;
  --zr2-line-soft: #1f2324;
  --zr2-line-bold: #3f4a46;
  --zr2-control-border: #767d7b;

  /* Handlung: nur fuer Knoepfe und Aktionen */
  --zr2-action: #4aa37a;
  --zr2-action-ink: #06120c;
  --zr2-action-hover: #5cb489;
  --zr2-action-tint: rgba(74, 163, 122, .06);
  --zr2-glow: rgba(74, 163, 122, .1);
  --zr2-action-tint-strong: rgba(74, 163, 122, .22);

  /* Vertrauen: Akzenttext, Links, Zusagen */
  --zr2-trust: #7fc4a2;
  --zr2-trust-hover: #a5d9bf;
  --zr2-trust-tint: rgba(127, 196, 162, .12);
  --zr2-trust-tint-strong: rgba(127, 196, 162, .3);

  /* Warnung und Werbung (gekennzeichnete Affiliate-Karten) */
  --zr2-warning: #e0b070;
  --zr2-warning-ink: #241c08;
  --zr2-warning-hover: #eec084;
  --zr2-werbung-flaeche: #2b2617;
  --zr2-werbung-rand: #9a7c2b;
  --zr2-werbung-text: #d7caa3;
  --zr2-werbung-label: #f4d77d;

  /* Mehrkosten: nur dafuer */
  --zr2-critical: #d9776a;
  --zr2-critical-ink: #1a0c09;
  --zr2-critical-surface: #2a1a17;
  --zr2-critical-line: #55352e;
  --zr2-critical-muted: #d0a096;

  /* Weitere Rollen */
  --zr2-selection: #aaddc5;
  --zr2-selection-ink: #16241c;
  --zr2-marke-linkedin: #70b5f9;
  --zr2-licht: #ffffff;
  --zr2-shadow-color: rgba(0, 0, 0, .3);

  /* Panels, die in beiden Themen dunkel bleiben: Haus-Buehne, Abschluss,
     Fusszeile. Das helle Thema ueberschreibt sie deshalb nicht. */
  --zr2-haus-panel: #08140e;
  --zr2-haus-ink: #eef0ef;
  --zr2-haus-body: #c2c3c3;
  --zr2-haus-muted: #a8adab;
  --zr2-haus-label-ink: #f7f9f6;
  --zr2-haus-halo: rgba(6, 14, 10, .78);
  --zr2-panel-gruen: #0c1f16;
  --zr2-panel-gruen-ink: #e9f5ee;
  --zr2-panel-gruen-text: #c2d6c9;
  --zr2-panel-gruen-leise: #8fb09c;
  --zr2-panel-gruen-rolle: #a9c4b5;
  --zr2-panel-gruen-rand: #244b37;
  --zr2-panel-gruen-akzent: #7fc4a2;

  /* Druck */
  --zr2-print-paper: #ffffff;
  --zr2-print-ink: #000000;

  /* Radien: vier Werte */
  --zr2-radius-small: 4px;
  --zr2-radius-control: 12px;
  --zr2-radius-card: 20px;
  --zr2-radius-pill: 999px;
  --zr2-radius-product: var(--zr2-radius-card);

  /* Schrift: Archivo allein der Wortmarke, Serife fuer Ueberschriften,
     Instrument Sans fuer Text, Spline Sans Mono nur fuer Zahlen. */
  --zr2-font-display: 'Archivo', system-ui, sans-serif;
  --zr2-font-display-serif: 'Instrument Serif', Georgia, serif;
  --zr2-font-body: 'Instrument Sans', system-ui, sans-serif;
  --zr2-font-data: 'Spline Sans Mono', ui-monospace, monospace;

  /* Zehn Stufen. Die Display-Stufen sind fluessig: die Sektionsstufe misst
     30 px bei 390 px und 40 px ab 1000 px; die Hero-Stufe ist die Groesse,
     die der Hero-Titel im Zweispalter neben dem Haus traegt (Betreiberwunsch
     28.08.2026): 37 px bei 390 px, 43 px ab 1000 px; die Ziffern-Stufe fuer
     grosse Zahlen und Sektionsziffern reicht von 40 px bis 84 px. */
  --zr2-type-label: 12px;
  --zr2-type-caption: 13px;
  --zr2-type-small: 14px;
  --zr2-type-body: 16px;
  --zr2-type-title: 18px;
  --zr2-type-lead: 21px;
  --zr2-type-heading: 26px;
  --zr2-type-display-section: clamp(1.875rem, 1.25rem + 2vw, 2.5rem);
  --zr2-type-display-hero: clamp(2.3rem, 1.8rem + 1.5vw, 2.7rem);
  --zr2-type-display-zahl: clamp(2.5rem, 1.5rem + 3.5vw, 5.25rem);
  --zr2-leading-reading: 1.75;

  /* Abstand: 4-pt-Raster */
  --zr2-space-1: 4px;
  --zr2-space-2: 8px;
  --zr2-space-3: 12px;
  --zr2-space-4: 16px;
  --zr2-space-5: 20px;
  --zr2-space-6: 24px;
  --zr2-space-7: 32px;
  --zr2-space-8: 48px;
  --zr2-space-9: 64px;
  --zr2-space-10: 80px;
  --zr2-space-11: 100px;
  --zr2-space-12: 120px;

  /* Breite */
  --zr2-content: 1160px;

  /* Schatten */
  --zr2-shadow-action: 0 1px 2px rgba(8, 16, 12, .3);
  --zr2-shadow-action-hover: 0 2px 6px rgba(8, 16, 12, .36);
  --zr2-shadow-surface: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .2);

  /* Bewegung: zurueckhaltend, unten vollstaendig abschaltbar */
  --zr2-duration-fast: 180ms;
  --zr2-duration-micro: 200ms;
  --zr2-duration-state: 280ms;
  --zr2-duration-reveal: 480ms;
  --zr2-duration-signature: 1100ms;
  --zr2-duration-orbit: 3900ms;
  --zr2-stagger-step: 48ms;
  --zr2-distance-reveal: 12px;
  --zr2-ease-standard: cubic-bezier(.2, .72, .24, 1);
  --zr2-ease-reveal: cubic-bezier(.22, .68, .24, 1);
  --zr2-ease-orbit: cubic-bezier(.2, .72, .2, 1);

  /* Ebenen */
  --zr2-z-underlay: -1;
  --zr2-z-base: 0;
  --zr2-z-content: 1;
  --zr2-z-control: 2;
  --zr2-z-overlay: 3;
  --zr2-z-skip-link: 1000;

  /* Umbruchpunkte (native @media-Regeln koennen var() nicht lesen):
     breit 1040px; Stapel/Orbit 900px/901px; kompakt 760px; schmal 390px. */
}

html[data-zr-theme="light"] {
  color-scheme: light;
  --zr2-canvas: #eceae4;
  --zr2-surface: #f5f4f0;
  --zr2-surface-raised: #ffffff;
  --zr2-surface-sunken: #f2f1ec;
  --zr2-surface-inset: #f3f2ed;
  --zr2-surface-ghost: #eae8e1;
  --zr2-surface-tint: rgba(22, 25, 26, .035);
  --zr2-nav: rgba(236, 234, 228, .9);
  --zr2-ink: #16191a;
  --zr2-body: #3d4344;
  --zr2-muted: #5c6362;
  --zr2-faint: #616866;
  --zr2-line: rgba(22, 25, 26, .13);
  --zr2-line-strong: rgba(22, 25, 26, .22);
  --zr2-line-solid: #dcdad3;
  --zr2-line-soft: #e6e4dd;
  --zr2-line-bold: #c8c6be;
  --zr2-control-border: #757c7b;
  --zr2-action: #1d6b4c;
  --zr2-action-ink: #ffffff;
  --zr2-action-hover: #175540;
  --zr2-action-tint: rgba(29, 107, 76, .06);
  --zr2-glow: rgba(29, 107, 76, .12);
  --zr2-action-tint-strong: rgba(29, 107, 76, .2);
  --zr2-trust: #1d6b4c;
  --zr2-trust-hover: #16452f;
  --zr2-trust-tint: rgba(29, 107, 76, .1);
  --zr2-trust-tint-strong: rgba(29, 107, 76, .24);
  --zr2-warning: #8a6320;
  --zr2-warning-ink: #ffffff;
  --zr2-warning-hover: #6f4f17;
  --zr2-werbung-flaeche: #fffaf0;
  --zr2-werbung-rand: #d4b96c;
  --zr2-werbung-text: #3d4344;
  --zr2-werbung-label: #755b12;
  --zr2-critical: #a63a2b;
  --zr2-critical-ink: #ffffff;
  --zr2-critical-surface: #fdf1ee;
  --zr2-critical-line: #ecccc3;
  --zr2-critical-muted: #8c5a4c;
  --zr2-marke-linkedin: #0a66c2;
  --zr2-shadow-color: rgba(20, 40, 30, .13);
  --zr2-haus-label-ink: #14181a;
  --zr2-haus-halo: rgba(255, 255, 255, .85);
}

/* Lange Zeilen brauchen mehr Zeilenabstand; auf schmalen Bildschirmen
   sind die Zeilen kurz. */
@media (max-width: 720px) {
  :root {
    --zr2-leading-reading: 1.6;
  }
}

/* Druck: Papier ist weiss, unabhaengig vom gewaehlten Thema. */
@media print {
  :root,
  html[data-zr-theme="dark"],
  html[data-zr-theme="light"] {
    color-scheme: light;
    --zr2-canvas: #ffffff;
    --zr2-surface: #ffffff;
    --zr2-surface-raised: #ffffff;
    --zr2-surface-sunken: #ffffff;
    --zr2-surface-inset: #f6faf7;
    --zr2-surface-ghost: #eef7f1;
    --zr2-surface-tint: transparent;
    --zr2-nav: #ffffff;
    --zr2-ink: #16191a;
    --zr2-body: #4f5050;
    --zr2-muted: #686969;
    --zr2-faint: #6e6f6f;
    --zr2-line: rgba(22, 25, 26, .13);
    --zr2-line-strong: rgba(22, 25, 26, .22);
    --zr2-line-solid: #d8d9d9;
    --zr2-line-soft: #e4e5e5;
    --zr2-line-bold: #c8c6be;
    --zr2-action: #1d6b4c;
    --zr2-action-ink: #ffffff;
    --zr2-action-hover: #175540;
    --zr2-trust: #1d6b4c;
    --zr2-trust-hover: #16452f;
    --zr2-warning: #8a6320;
    --zr2-warning-ink: #ffffff;
    --zr2-werbung-flaeche: #fffaf0;
    --zr2-werbung-rand: #d4b96c;
    --zr2-werbung-text: #3d4344;
    --zr2-werbung-label: #755b12;
    --zr2-critical: #a63a2b;
    --zr2-critical-ink: #ffffff;
    --zr2-critical-surface: #fdf1ee;
    --zr2-critical-line: #ecccc3;
    --zr2-critical-muted: #8c5a4c;
    --zr2-shadow-color: transparent;
  }
}

/* Aliase fuer alte Namen. Nur fuer Skripte, generierte Seiten und
   Drittcode; Stilblaetter und <style>-Bloecke nutzen --zr2-* direkt. */
:root {
  --zr-bg: var(--zr2-canvas);
  --zr-card: var(--zr2-surface);
  --zr-panel: var(--zr2-surface-sunken);
  --zr-navbg: var(--zr2-nav);
  --zr-ink: var(--zr2-ink);
  --zr-body: var(--zr2-body);
  --zr-body2: var(--zr2-body);
  --zr-mut: var(--zr2-muted);
  --zr-mut2: var(--zr2-muted);
  --zr-faint: var(--zr2-faint);
  --zr-line: var(--zr2-line-solid);
  --zr-line2: var(--zr2-line-soft);
  --zr-tint: var(--zr2-surface-inset);
  --zr-tint2: var(--zr2-surface-ghost);
  --zr-bord: var(--zr2-line-bold);
  --zr-abord: var(--zr2-line-bold);
  --zr-ghost: var(--zr2-surface-ghost);
  --zr-section-number: var(--zr2-faint);
  --zr-acc-text: var(--zr2-trust);
  --zr-acc-hov: var(--zr2-trust-hover);
  --zr-red: var(--zr2-critical);
  --zr-red-bg: var(--zr2-critical-surface);
  --zr-red-bord: var(--zr2-critical-line);
  --zr-red-mut: var(--zr2-critical-muted);
  --zr-pie-sep: var(--zr2-surface);
  --zr-pie-shadow: var(--zr2-shadow-color);
  --zr-control-border: var(--zr2-control-border);

  --bg: var(--zr2-canvas);
  --surface: var(--zr2-surface);
  --surface-2: var(--zr2-surface-raised);
  --inset: var(--zr2-surface-inset);
  --border: var(--zr2-line-solid);
  --border-2: var(--zr2-line-bold);
  --text: var(--zr2-ink);
  --text-2: var(--zr2-body);
  --text-3: var(--zr2-muted);
  --accent: var(--zr2-trust);
  --accent-bg: var(--zr2-action);
  --accent-bg-hover: var(--zr2-action-hover);
  --on-accent: var(--zr2-action-ink);
  --badge-bg: var(--zr2-surface-ghost);
  --badge-border: var(--zr2-line-bold);
  --badge-text: var(--zr2-trust);
  --header-bg: var(--zr2-nav);
  --disp: var(--zr2-font-display);
  --serif: var(--zr2-font-display-serif);
  --sans: var(--zr2-font-body);
  --mono: var(--zr2-font-data);
  --seitenbreite: var(--zr2-content);
  --zeilenabstand: var(--zr2-leading-reading);
}