/* Werkzeugkasten · Stil „LuvOn“ (aus der LuvOn-CI: Entwürfe Website und Karriere, Design-Tokens „exact CI hex values“)
   Ruhig und verlässlich mit Signal: viel Weiß, Überschriften in DeepBlue (Outfit 700), Fließtext Mattschwarz,
   Vibrant Orange für Handlung (Pillen-Knöpfe, Schrift darauf immer DeepBlue, nie Weiß), ein Wort im Titel in
   Spectral kursiv und Orange. Signatur-Ecke: drei Ecken weich, eine hart (24/24/24/3 px) – „harte LUV, weiches on“.
   Bewegung ruhig, ohne Federn. Die CI hat keinen Dunkelmodus: dunkel = Vorschlag des Werkzeugkastens (*).
   Braucht tokens.css (design-grundlagen ≥ 0.2) und schriften.css (Outfit, Spectral).
   Werte mit (*) sind vom Werkzeugkasten ergänzt oder angepasst. */
[data-stil="luvon"] {
  --wk-grund-h: #FFFFFF;                --wk-grund-d: #022C44;   /* Weiß / DeepBlue-900 (*) */
  --wk-flaeche-h: #FFFFFF;              --wk-flaeche-d: #033B5D;   /* / DeepBlue-800 (*) */
  --wk-flaeche-2-h: #F2F2F2;            --wk-flaeche-2-d: #0A4A70;   /* Hellgrau / (*) */
  --wk-auswahl-h: #EAF3F9;              --wk-auswahl-d: #0A5F90;   /* DeepBlue-050 / -600 */
  --wk-text-h: #333333;                 --wk-text-d: #F2F2F2;   /* Mattschwarz / Hellgrau */
  --wk-text-2-h: #044F7A;               --wk-text-2-d: #D3E6F1;   /* DeepBlue / DeepBlue-100 */
  --wk-text-leise-h: #5C5C5C;           --wk-text-leise-d: #A9C9DC;   /* Neutral-700 (Neutral-500 erreicht nur 3,5:1) / (*) */
  --wk-linie-h: #E2E2E2;                --wk-linie-d: #0F5A85;   /* Neutral-200 / (*) */
  --wk-linie-stark-h: #8A8A8A;          --wk-linie-stark-d: #7FB4D1;   /* Neutral-500 / DeepBlue-300 */
  --wk-akzent-h: #FAB028;               --wk-akzent-d: #FAB028;   /* Vibrant Orange */
  --wk-auf-akzent-h: #044F7A;           --wk-auf-akzent-d: #022C44;   /* nie Weiß auf Orange */
  --wk-haupt-h: #FAB028;                --wk-haupt-d: #FAB028;   /* Hauptknopf = Orange */
  --wk-auf-haupt-h: #044F7A;            --wk-auf-haupt-d: #022C44;
  --wk-fokus-h: #1A76AB;                --wk-fokus-d: #7FB4D1;   /* DeepBlue-500 / -300 */
  --wk-gut-h: #1F8A5B;                  --wk-gut-d: #5CC28F;
  --wk-gut-flaeche-h: #E6F4EE;          --wk-gut-flaeche-d: #0F3A2C;
  --wk-gut-text-h: #176B47;             --wk-gut-text-d: #9AD9B8;   /* (*) */
  --wk-gut-rand-h: #A8D5BF;             --wk-gut-rand-d: #2C6A50;   /* (*) */
  --wk-achtung-h: #E79A1B;              --wk-achtung-d: #FCC95F;   /* Orange-600 / -300 */
  --wk-achtung-flaeche-h: #FEF6E6;      --wk-achtung-flaeche-d: #3A2D10;   /* Orange-050 / (*) */
  --wk-achtung-text-h: #6E4A05;         --wk-achtung-text-d: #FDEAC1;   /* (*) */
  --wk-achtung-rand-h: #FCC95F;         --wk-achtung-rand-d: #7A5A1E;
  --wk-fehler-h: #C0392B;               --wk-fehler-d: #FF8A7A;
  --wk-fehler-flaeche-h: #FBEAE7;       --wk-fehler-flaeche-d: #3A1C1A;
  --wk-fehler-text-h: #8E2A1F;          --wk-fehler-text-d: #FFB3A8;   /* (*) */
  --wk-schleier-h: rgba(2,44,68,.45);   --wk-schleier-d: rgba(0,0,0,.6);
  --wk-schatten-1-h: 0 1px 2px rgba(4,79,122,.06);--wk-schatten-1-d: 0 1px 2px rgba(0,0,0,.35);
  --wk-schatten-2-h: 0 6px 18px rgba(4,79,122,.10);--wk-schatten-2-d: 0 6px 18px rgba(0,0,0,.4);
  --wk-schatten-3-h: 0 14px 40px rgba(4,79,122,.12);--wk-schatten-3-d: 0 14px 40px rgba(0,0,0,.5);

  --wk-radius-s: 6px; --wk-radius-m: 10px; --wk-radius-l: 16px; --wk-radius-xl: 24px; --wk-radius-rund: 999px;
  --wk-schrift: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-schrift-anzeige: var(--wk-schrift);
  --wk-schrift-lesen: "Spectral", Georgia, "Times New Roman", serif;
  --wk-groesse-titel: 36px; --wk-groesse-abschnitt: 28px; --wk-groesse-gross: 18px;
  --wk-groesse-text: 16px; --wk-groesse-klein: 13px;
  --wk-gewicht-titel: 700; --wk-gewicht-abschnitt: 700; --wk-gewicht-stark: 600;
  --wk-laufweite-titel: -.02em; --wk-zeilenhoehe: 1.5;
  --wk-dauer-kurz: 120ms; --wk-dauer-mittel: 200ms;
  --luvon-ecke: 24px 24px 24px 3px;   /* Signatur-Ecke */
}
/* LuvOn: Überschriften in DeepBlue, Hervorhebung Spectral kursiv Orange (Befund: unter 3:1, siehe README),
   Marke mit orangem Strich und DeepBlue-Schrift, Pillen-Knöpfe, Zweitknopf DeepBlue-Umriss, Karten mit Signatur-Ecke */
[data-stil="luvon"] .wk-h1, [data-stil="luvon"] .wk-h2, [data-stil="luvon"] .wk-h3 { color: var(--wk-text-2); }
[data-stil="luvon"] .wk-h1 em, [data-stil="luvon"] .wk-h2 em { font: italic 500 1.02em/1 var(--wk-schrift-lesen); color: var(--wk-akzent); letter-spacing: 0; }
[data-stil="luvon"] .wk-marke { display: flex; align-items: center; gap: 10px; color: var(--wk-text-2); font-weight: 600; letter-spacing: .08em; }
[data-stil="luvon"] .wk-marke::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--wk-akzent); }
[data-stil="luvon"] .wk-btn { border-radius: var(--wk-radius-rund); padding: 11px 22px; font-weight: 600; border-color: var(--wk-text-2); color: var(--wk-text-2); }
[data-stil="luvon"] .wk-btn.haupt { border-color: var(--wk-haupt); color: var(--wk-auf-haupt); }
[data-stil="luvon"] .wk-chip { background: var(--wk-flaeche-2); color: var(--wk-text-2); font-weight: 600; }
[data-stil="luvon"] .wk-karte, [data-stil="luvon"] .luvon-ecke { border-radius: var(--luvon-ecke); }
[data-stil="luvon"] .wk-btn.akzent { border-color: var(--wk-akzent); color: var(--wk-auf-akzent); }