/* Werkzeugkasten · Stil „Raster“ (hlsbrg, Entwurf B1 „Raster hell“, Konzept Richtung B, Stand 02.10.2026)
   Editorial in der Tradition der Schweizer Gestaltung: 12-Spalten-Raster, sehr große Grotesk, ein Signalblau,
   Labels und Zahlen in Mono, Nummerierung (01–03) als Struktur. Keine Schatten, fast keine Rundung (2 px).
   Konzept-Empfehlung: Raster als Basis, mit gezielten Momenten aus Signal (stil-signal).
   Braucht tokens.css (design-grundlagen ≥ 0.2), Inter (Baustein schriften) und schriften.css (Inter Tight, JetBrains Mono).
   Werte mit (*) sind vom Werkzeugkasten ergänzt oder angepasst. */
[data-stil="raster"] {
  --wk-grund-h: #F4F2EE;                --wk-grund-d: #0E1116;   /* Papier / Tinte */
  --wk-flaeche-h: #FFFFFF;              --wk-flaeche-d: #151A21;
  --wk-flaeche-2-h: #EAE7E0;            --wk-flaeche-2-d: #1C222B;   /* (*) */
  --wk-auswahl-h: #E3E7FF;              --wk-auswahl-d: #1D2547;   /* (*) */
  --wk-text-h: #0E1116;                 --wk-text-d: #F2F0EA;
  --wk-text-2-h: #2A2F37;               --wk-text-2-d: #D5D3CC;   /* (*) */
  --wk-text-leise-h: #5B616B;           --wk-text-leise-d: #9AA1AC;
  --wk-linie-h: #D6D2C8;                --wk-linie-d: #2A3038;
  --wk-linie-stark-h: #7D828B;          --wk-linie-stark-d: #666E7A;   /* Steingrau, für 3:1 abgedunkelt (*) */
  --wk-akzent-h: #2B4BFF;               --wk-akzent-d: #7389FF;   /* Signalblau */
  --wk-auf-akzent-h: #FFFFFF;           --wk-auf-akzent-d: #0E1116;
  --wk-haupt-h: #2B4BFF;                --wk-haupt-d: #7389FF;   /* Hauptknopf = Signalblau */
  --wk-auf-haupt-h: #FFFFFF;            --wk-auf-haupt-d: #0E1116;
  --wk-fokus-h: #2B4BFF;                --wk-fokus-d: #7389FF;
  --wk-gut-h: #1F7A4D;                  --wk-gut-d: #5CC28F;   /* (*) */
  --wk-gut-flaeche-h: #E1F0E7;          --wk-gut-flaeche-d: #14271D;
  --wk-gut-text-h: #175E3B;             --wk-gut-text-d: #9AD9B8;
  --wk-gut-rand-h: #9CCBB0;             --wk-gut-rand-d: #2C5A47;
  --wk-achtung-h: #B7791F;              --wk-achtung-d: #E7B65A;   /* (*) */
  --wk-achtung-flaeche-h: #FBEFD9;      --wk-achtung-flaeche-d: #2E2412;
  --wk-achtung-text-h: #6B4A06;         --wk-achtung-text-d: #F2D598;
  --wk-achtung-rand-h: #D9B26A;         --wk-achtung-rand-d: #6B5A1E;
  --wk-fehler-h: #C2362B;               --wk-fehler-d: #FF8A7A;   /* (*) */
  --wk-fehler-flaeche-h: #FBE4E1;       --wk-fehler-flaeche-d: #3A1C1A;
  --wk-fehler-text-h: #8E241C;          --wk-fehler-text-d: #FFB3A8;
  --wk-schleier-h: rgba(14,17,22,.45);  --wk-schleier-d: rgba(0,0,0,.65);
  --wk-schatten-1-h: none;              --wk-schatten-1-d: none;
  --wk-schatten-2-h: none;              --wk-schatten-2-d: none;
  --wk-schatten-3-h: 0 0 0 1px #0E1116; --wk-schatten-3-d: 0 0 0 1px #F2F0EA;   /* Dialoge: Rahmen statt Schatten */

  --wk-radius-s: 2px; --wk-radius-m: 2px; --wk-radius-l: 2px; --wk-radius-xl: 2px; --wk-radius-rund: 2px;
  --wk-schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-schrift-anzeige: "Inter Tight", "Inter", system-ui, sans-serif;
  --wk-schrift-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --wk-groesse-titel: 40px; --wk-groesse-abschnitt: 26px; --wk-groesse-gross: 21px;
  --wk-groesse-text: 16px; --wk-groesse-klein: 13px;
  --wk-gewicht-titel: 700; --wk-gewicht-abschnitt: 700; --wk-gewicht-stark: 600;
  --wk-laufweite-titel: -.045em; --wk-zeilenhoehe: 1.55;
  --wk-dauer-kurz: 180ms; --wk-dauer-mittel: 260ms;
}
/* Raster: Marken (Eyebrow) in Mono und Signalblau, Titel eng, Karten mit Linie statt Schatten,
   Hover = Rand in Akzent, Hintergrund wahlweise mit 12-Spalten-Linien (.raster-gitter), Nummern im Kreis */
[data-stil="raster"] .wk-marke { font: 600 12px/1.2 var(--wk-schrift-mono); letter-spacing: .08em; color: var(--wk-akzent); }
[data-stil="raster"] .wk-h1 { line-height: .98; }
[data-stil="raster"] .wk-h2 { letter-spacing: -.02em; }
[data-stil="raster"] .wk-karte { border: var(--wk-strich) solid var(--wk-linie); }
[data-stil="raster"] .wk-karte:hover { border-color: var(--wk-akzent); }
[data-stil="raster"] .wk-btn { padding: 11px 18px; }
[data-stil="raster"] .wk-chip, [data-stil="raster"] .wk-pill { font-family: var(--wk-schrift-mono); }
[data-stil="raster"] .raster-gitter { background-image: repeating-linear-gradient(90deg, var(--wk-linie) 0 1px, transparent 1px calc(100% / 12)); }
[data-stil="raster"] .raster-nummer { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--wk-text); font: 600 12px var(--wk-schrift-mono); }
[data-stil="raster"] .raster-nummer.aktiv { background: var(--wk-akzent); border-color: var(--wk-akzent); color: var(--wk-auf-akzent); }