/* Werkzeugkasten · Stil „Brutal“ (hlsbrg, Entwurf C2 „Signal Brutal“, Variante von Richtung C, Stand 02.10.2026)
   Neobrutalismus: 3 px schwarze Rahmen, harte versetzte Schatten, Versalien-Titel, Gelb als Hauptfarbe,
   Blau und Pink als Zusatz (--brutal-blau, --brutal-pink), schräge Sticker (.brutal-sticker). Laut und direkt.
   Braucht tokens.css (design-grundlagen ≥ 0.2) und schriften.css (Space Grotesk, JetBrains Mono).
   Werte mit (*) sind vom Werkzeugkasten ergänzt oder angepasst. */
[data-stil="brutal"] {
  --wk-grund-h: #F2F0E6;                --wk-grund-d: #121212;
  --wk-flaeche-h: #FFFFFF;              --wk-flaeche-d: #1C1C1C;
  --wk-flaeche-2-h: #E8E5D8;            --wk-flaeche-2-d: #262626;   /* (*) */
  --wk-auswahl-h: #FFF3B0;              --wk-auswahl-d: #3A3410;   /* (*) */
  --wk-text-h: #0A0A0A;                 --wk-text-d: #F2F0E6;
  --wk-text-2-h: #0A0A0A;               --wk-text-2-d: #F2F0E6;
  --wk-text-leise-h: #3B3B3B;           --wk-text-leise-d: #C9C6BB;
  --wk-linie-h: #0A0A0A;                --wk-linie-d: #F2F0E6;   /* Linien in voller Textfarbe */
  --wk-linie-stark-h: #0A0A0A;          --wk-linie-stark-d: #F2F0E6;
  --wk-akzent-h: #FFD60A;               --wk-akzent-d: #FFD60A;   /* Gelb */
  --wk-auf-akzent-h: #0A0A0A;           --wk-auf-akzent-d: #0A0A0A;
  --wk-haupt-h: #FFD60A;                --wk-haupt-d: #FFD60A;
  --wk-auf-haupt-h: #0A0A0A;            --wk-auf-haupt-d: #0A0A0A;
  --wk-fokus-h: #3D5AFE;                --wk-fokus-d: #8C9EFF;   /* Blau / (*) */
  --wk-gut-h: #0A0A0A;                  --wk-gut-d: #F2F0E6;
  --wk-gut-flaeche-h: #B9F6CA;          --wk-gut-flaeche-d: #B9F6CA;   /* (*) */
  --wk-gut-text-h: #0A0A0A;             --wk-gut-text-d: #0A0A0A;
  --wk-gut-rand-h: #0A0A0A;             --wk-gut-rand-d: #F2F0E6;
  --wk-achtung-h: #0A0A0A;              --wk-achtung-d: #F2F0E6;
  --wk-achtung-flaeche-h: #FFD60A;      --wk-achtung-flaeche-d: #FFD60A;
  --wk-achtung-text-h: #0A0A0A;         --wk-achtung-text-d: #0A0A0A;
  --wk-achtung-rand-h: #0A0A0A;         --wk-achtung-rand-d: #F2F0E6;
  --wk-fehler-h: #D6005C;               --wk-fehler-d: #FF6BA8;   /* (*) / Pink */
  --wk-fehler-flaeche-h: #FF6BA8;       --wk-fehler-flaeche-d: #FF6BA8;   /* Pink */
  --wk-fehler-text-h: #0A0A0A;          --wk-fehler-text-d: #0A0A0A;
  --wk-schleier-h: rgba(10,10,10,.55);  --wk-schleier-d: rgba(0,0,0,.75);
  --wk-schatten-1-h: 4px 4px 0 #0A0A0A; --wk-schatten-1-d: 4px 4px 0 #F2F0E6;
  --wk-schatten-2-h: 6px 6px 0 #0A0A0A; --wk-schatten-2-d: 6px 6px 0 #F2F0E6;
  --wk-schatten-3-h: 9px 9px 0 #0A0A0A; --wk-schatten-3-d: 9px 9px 0 #F2F0E6;

  --wk-radius-s: 0px; --wk-radius-m: 0px; --wk-radius-l: 0px; --wk-radius-xl: 0px; --wk-radius-rund: 0px;
  --wk-strich: 3px; --wk-strich-aktiv: 3px;
  --wk-schrift: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-schrift-anzeige: var(--wk-schrift);
  --wk-schrift-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --wk-groesse-titel: 44px; --wk-groesse-abschnitt: 28px; --wk-groesse-gross: 20px;
  --wk-groesse-text: 16px; --wk-groesse-klein: 13.5px;
  --wk-gewicht-titel: 700; --wk-gewicht-abschnitt: 700; --wk-gewicht-stark: 700;
  --wk-laufweite-titel: -.05em;
  --wk-dauer-kurz: 100ms; --wk-dauer-mittel: 160ms;
  --brutal-blau: #3D5AFE; --brutal-pink: #FF6BA8;
}
/* Brutal: Versalien, dicke Rahmen überall, Knöpfe und Karten springen beim Darüberfahren, Markierung im Titel
   (<mark>), schräge Sticker (.brutal-sticker), Karten in Zusatzfarben (.brutal-gelb/-blau/-pink) */
[data-stil="brutal"] .wk-h1, [data-stil="brutal"] .wk-h2 { text-transform: uppercase; }
[data-stil="brutal"] .wk-h1 mark { background: var(--wk-akzent); color: var(--wk-auf-akzent); padding: 0 .1em; }
[data-stil="brutal"] .wk-btn { border: var(--wk-strich) solid var(--wk-text); box-shadow: var(--wk-schatten-1); font-weight: 700;
  transition: transform var(--wk-dauer-kurz), box-shadow var(--wk-dauer-kurz); }
[data-stil="brutal"] .wk-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--wk-schatten-2); background: var(--wk-flaeche); }
[data-stil="brutal"] .wk-btn.haupt:hover { background: var(--wk-haupt); filter: none; }
[data-stil="brutal"] .wk-karte, [data-stil="brutal"] .wk-karte.entschieden { border: var(--wk-strich) solid var(--wk-text); box-shadow: var(--wk-schatten-2); }
[data-stil="brutal"] .wk-karte.vorschlag, [data-stil="brutal"] .wk-karte.offen { border: var(--wk-strich) dashed var(--wk-text); box-shadow: none; }
[data-stil="brutal"] .wk-pill, [data-stil="brutal"] .wk-chip { border: 2px solid var(--wk-text); }
[data-stil="brutal"] .wk-pill.entschieden, [data-stil="brutal"] .wk-pill.offen, [data-stil="brutal"] .wk-pill.fehler { border-color: #0A0A0A; }
[data-stil="brutal"] .wk-feld { border-width: var(--wk-strich); border-color: var(--wk-text); }
[data-stil="brutal"] .wk-marke { display: inline-block; padding: 6px 10px; border: var(--wk-strich) solid var(--wk-text); background: var(--wk-flaeche); color: var(--wk-text); font-family: var(--wk-schrift-mono); }
[data-stil="brutal"] .brutal-sticker { display: inline-block; padding: 6px 14px; border: var(--wk-strich) solid #0A0A0A; box-shadow: 4px 4px 0 #0A0A0A;
  background: var(--brutal-blau); color: #FFFFFF; font-weight: 700; text-transform: uppercase; transform: rotate(-4deg); }
[data-stil="brutal"] .brutal-gelb { background: var(--wk-akzent); color: #0A0A0A; }
[data-stil="brutal"] .brutal-blau { background: var(--brutal-blau); color: #FFFFFF; }
[data-stil="brutal"] .brutal-pink { background: var(--brutal-pink); color: #0A0A0A; }
@media (prefers-reduced-motion: reduce) { [data-stil="brutal"] .wk-btn:hover { transform: none; } [data-stil="brutal"] .brutal-sticker { transform: none; } }
[data-stil="brutal"] .wk-h1 em, [data-stil="brutal"] .wk-h2 em { background: var(--wk-akzent); color: var(--wk-auf-akzent); padding: 0 .1em; }