/* Quelle: WEB_STYLEGUIDE 1.1, Version 1.3 (C:\dev\skills\design\WEB_STYLEGUIDE.md, Stand 2026-10-06)
   Kanonischer Token-Block, unveraendert uebernommen. Die Kunden-Haut (haut.css, erzeugt aus
   site.yaml) ueberschreibt nur Farb- und Schriftrollen. Skala, Radien, Schatten und Breakpoints
   bleiben fuer alle Kundenseiten gleich. Einzige Token-Quelle der Musterseite (WSG-01). */
:root {
  /* --- Schrift -------------------------------------------------------- */
  --font-text:    "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Source Serif 4 var", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* --- Typo-Skala: neun Stufen, mehr gibt es nicht -------------------- */
  --type-micro:           .6875rem;  /* 11px — Marken, Kartenbeschriftung, Meta-Kuerzel */
  --type-meta:            .75rem;    /* 12px — Tabellenkopf, Statusmarke, Kleingedrucktes */
  --type-label:           .8125rem;  /* 13px — Formularlabel, Sekundaertext */
  --type-body:            .9375rem;  /* 15px — Fliesstext dichte Arbeitsflaeche */
  --type-control:         1rem;      /* 16px — Eingabefelder (verhindert iOS-Zoom) */
  --type-subheading:      1.125rem;  /* 18px */
  --type-section-heading: 1.375rem;  /* 22px */
  --type-stat:            1.75rem;   /* 28px — Kennzahl */
  --type-page-heading:    clamp(2rem, 3vw, 2.5rem);
  /* Nur fuer marketingnahe Gastseiten, hoechstens zwei Display-Stufen: */
  --type-display-page:    clamp(2.2rem, 5vw, 3.5rem);
  --type-display-hero:    clamp(3.3rem, 6vw, 5.3rem);

  /* --- Abstaende: acht Stufen, keine Zwischenwerte -------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Radien: drei Stufen plus Pille -------------------------------- */
  --radius-sm:   11px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* --- Schatten: hoechstens zwei Stufen ------------------------------- */
  --shadow-card:  0 12px 33px rgba(24, 49, 38, .045);
  --shadow-float: 0 22px 60px rgba(25, 42, 34, .10);

  /* --- Bedienelemente ------------------------------------------------- */
  --control-height: 44px;

  /* --- Farbrollen (Werte projektspezifisch, Namen nicht) -------------- */
  --page:            #f7f5ef;  /* Seitenhintergrund */
  --surface:         #fffefb;  /* Karte, Panel */
  --surface-subtle:  #f7f6f1;  /* eingelassene Flaeche, Tabellenkopf */
  --surface-raised:  #fbfaf6;
  --line:            #ddd9cf;  /* Rahmen */
  --line-soft:       #eeebe3;  /* Trennlinie in Listen */
  --ink:             #202820;  /* Fliesstext */
  --muted:           #59635b;  /* Sekundaertext — MUSS >= 4.5:1 auf --page */
  --accent:          #163b31;  /* Primaeraktion */
  --accent-strong:   #102c25;  /* Hover der Primaeraktion */
  --accent-soft:     #deece3;  /* Hintergrund einer Akzentflaeche */
  --success:         #163b31;
  --warning:         #9b6a25;
  --danger:          #a64d48;
  --info:            #4a7185;
  --focus-ring:      0 0 0 3px rgba(63, 110, 88, .16);

  /* --- Statusfarben: immer als Paar bg + ink ------------------------- */
  --status-ok-bg:      #dcece2;  --status-ok-ink:      #347153;
  --status-wait-bg:    #f4ead0;  --status-wait-ink:    #8b6222;
  --status-danger-bg:  #f1dfdc;  --status-danger-ink:  #934a43;
  --status-neutral-bg: #dce8ee;  --status-neutral-ink: #3c6678;

  /* --- Breakpoints (nur zur Dokumentation; @media kann keine Custom
         Properties lesen — der Wert steht ausserdem im Kopf der
         Responsive-Schicht am Dateiende) ------------------------------- */
  --bp-phone:   650px;
  --bp-tablet:  920px;
  --bp-laptop: 1080px;
  --bp-wide:   1180px;

  /* --- Zusatzrollen SiteKit (nicht im Kanon 1.1) --------------------- */
  --accent-ink:       #ffffff;          /* Schrift auf --accent */
  --band-line:        var(--line);      /* Rahmen ober- und unterhalb des Startbilds */
  --muster-bild:      none;             /* Flaechenmuster im Startbild, nur per Haut */
  --display-weight:   700;              /* Schriftrolle der Ueberschriften */
  --display-style:    normal;
  --display-tracking: 0;
  /* Rueckband der Demo: feste ProzessPilot-Farben, keine Haut ueberschreibt sie. */
  --rueckband-bg:     #202820;
  --rueckband-ink:    #f7f5ef;
  --rueckband-wahl:   #3a4339;          /* aktive Variante im Umschalter */
}