/* Werkzeugkasten · Stil „Side-Eye“ (hlsbrg, Entwurf D1 „Side-Eye“, Stand 02.10.2026)
   Verspielt und selbstbewusst: Bricolage Grotesque groß und fett, Titel mit versetztem Petrol-Schatten,
   Orange als Akzent, Petrol als Zweitfarbe (Fokus, „gut“), Pluszeichen als Motiv, Pillen-Knöpfe.
   Dunkel = Nachtblau mit Bernstein und Türkis.
   Braucht tokens.css (design-grundlagen ≥ 0.2), Inter (Baustein schriften) und schriften.css (Bricolage Grotesque, JetBrains Mono).
   Werte mit (*) sind vom Werkzeugkasten ergänzt oder angepasst. */
[data-stil="side-eye"] {
  --wk-grund-h: #EFE9DC;                --wk-grund-d: #0B1020;
  --wk-flaeche-h: #F8F4EA;              --wk-flaeche-d: #121936;
  --wk-flaeche-2-h: #E6DECB;            --wk-flaeche-2-d: #1A2246;   /* (*) */
  --wk-auswahl-h: #F7DCCB;              --wk-auswahl-d: #2A2440;   /* (*) */
  --wk-text-h: #0D1326;                 --wk-text-d: #F3ECDD;
  --wk-text-2-h: #2A3047;               --wk-text-2-d: #D6D0C2;   /* (*) */
  --wk-text-leise-h: #4F566B;           --wk-text-leise-d: #A7ABBD;
  --wk-linie-h: #CFC6B2;                --wk-linie-d: #262D47;
  --wk-linie-stark-h: #8A8270;          --wk-linie-stark-d: #6A73A0;   /* (*) */
  --wk-akzent-h: #D2460F;               --wk-akzent-d: #FFB020;   /* Orange; hell von #D9480F minimal abgedunkelt (4,3 → 4,54:1 mit weißer Schrift) (*) / Bernstein */
  --wk-auf-akzent-h: #FFFFFF;           --wk-auf-akzent-d: #0B1020;
  --wk-haupt-h: #D2460F;                --wk-haupt-d: #FFB020;
  --wk-auf-haupt-h: #FFFFFF;            --wk-auf-haupt-d: #0B1020;
  --wk-fokus-h: #0B7A75;                --wk-fokus-d: #3DD6C6;   /* Petrol / Türkis */
  --wk-gut-h: #0B7A75;                  --wk-gut-d: #3DD6C6;
  --wk-gut-flaeche-h: #D6EEEC;          --wk-gut-flaeche-d: #10303A;   /* (*) */
  --wk-gut-text-h: #075652;             --wk-gut-text-d: #8EEDE3;
  --wk-gut-rand-h: #0B7A75;             --wk-gut-rand-d: #3DD6C6;
  --wk-achtung-h: #B7791F;              --wk-achtung-d: #FFB020;   /* (*) */
  --wk-achtung-flaeche-h: #F8E7C4;      --wk-achtung-flaeche-d: #2E2614;
  --wk-achtung-text-h: #5E3E05;         --wk-achtung-text-d: #FFD27A;
  --wk-achtung-rand-h: #D9A84A;         --wk-achtung-rand-d: #7A5A1E;
  --wk-fehler-h: #B3261E;               --wk-fehler-d: #FF7A6B;   /* (*) */
  --wk-fehler-flaeche-h: #F8DED9;       --wk-fehler-flaeche-d: #3A1A22;
  --wk-fehler-text-h: #7E1B15;          --wk-fehler-text-d: #FFB0A6;
  --wk-schleier-h: rgba(13,19,38,.45);  --wk-schleier-d: rgba(0,0,0,.7);
  --wk-schatten-1-h: 0 1px 2px rgba(13,19,38,.08);--wk-schatten-1-d: 0 1px 2px rgba(0,0,0,.4);
  --wk-schatten-2-h: 4px 4px 0 #0B7A75; --wk-schatten-2-d: 4px 4px 0 #3DD6C6;   /* versetzt in Petrol */
  --wk-schatten-3-h: 0 20px 50px -20px rgba(13,19,38,.35);--wk-schatten-3-d: 0 20px 50px -20px rgba(0,0,0,.8);

  --wk-radius-s: 4px; --wk-radius-m: 6px; --wk-radius-l: 10px; --wk-radius-xl: 16px; --wk-radius-rund: 999px;
  --wk-schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-schrift-anzeige: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --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: 800; --wk-gewicht-abschnitt: 700; --wk-gewicht-stark: 700;
  --wk-laufweite-titel: -.03em;
  --side-eye-zweit-h: #0B7A75; --side-eye-zweit-d: #3DD6C6;
}
/* Side-Eye: Titel mit versetztem Petrol-Umriss, Pillen-Knöpfe, Marken in Mono und Akzent, Plus als Aufzählungszeichen (.side-eye-plus) */
[data-stil="side-eye"] { --side-eye-zweit: var(--wk-wenn-hell, var(--side-eye-zweit-d)) var(--wk-wenn-dunkel, var(--side-eye-zweit-h)); }
[data-stil="side-eye"] .wk-h1 { text-shadow: 3px 3px 0 var(--wk-grund), 4px 4px 0 var(--side-eye-zweit); }
[data-stil="side-eye"] .wk-h3 { font-family: var(--wk-schrift-anzeige); }
[data-stil="side-eye"] .wk-btn { border-radius: var(--wk-radius-rund); padding: 11px 20px; }
[data-stil="side-eye"] .wk-karte.entschieden { box-shadow: var(--wk-schatten-2); }
[data-stil="side-eye"] .wk-marke { font: 600 12px/1.2 var(--wk-schrift-mono); letter-spacing: .08em; color: var(--wk-akzent); }
[data-stil="side-eye"] .side-eye-plus::before { content: "+"; color: var(--wk-akzent); font: 800 1.2em/1 var(--wk-schrift-anzeige); margin-right: .3em; }