/* Werkzeugkasten · Stil „Editorial“ (hlsbrg, Entwurf B2 „Editorial warm“, Variante von Richtung B, Stand 02.10.2026)
   Warm und redaktionell: Fraunces als Anzeigeschrift in leichtem Schnitt, ein Wort im Titel kursiv in Rost,
   Mono-Labels, weiche Karten (22 px) und Pillen-Knöpfe, Punktraster im Hintergrund (.editorial-punkte).
   Braucht tokens.css (design-grundlagen ≥ 0.2), Inter (Baustein schriften) und schriften.css (Fraunces, JetBrains Mono).
   Werte mit (*) sind vom Werkzeugkasten ergänzt oder angepasst. */
[data-stil="editorial"] {
  --wk-grund-h: #F1EBDF;                --wk-grund-d: #17130F;
  --wk-flaeche-h: #F8F4EC;              --wk-flaeche-d: #1F1A14;
  --wk-flaeche-2-h: #EAE2D3;            --wk-flaeche-2-d: #2A231B;   /* (*) */
  --wk-auswahl-h: #F5DDD2;              --wk-auswahl-d: #3A2418;   /* (*) */
  --wk-text-h: #1D1A16;                 --wk-text-d: #F1EBDF;
  --wk-text-2-h: #3A342C;               --wk-text-2-d: #D9D0C0;   /* (*) */
  --wk-text-leise-h: #6B6256;           --wk-text-leise-d: #A79B88;
  --wk-linie-h: #D9CFBD;                --wk-linie-d: #332B22;
  --wk-linie-stark-h: #8E8370;          --wk-linie-stark-d: #75685A;   /* (*) */
  --wk-akzent-h: #C8481F;               --wk-akzent-d: #F0764A;   /* Rost */
  --wk-auf-akzent-h: #FFFFFF;           --wk-auf-akzent-d: #17130F;
  --wk-haupt-h: #C8481F;                --wk-haupt-d: #F0764A;
  --wk-auf-haupt-h: #FFFFFF;            --wk-auf-haupt-d: #17130F;
  --wk-fokus-h: #C8481F;                --wk-fokus-d: #F0764A;
  --wk-gut-h: #3E6B3A;                  --wk-gut-d: #93C58C;   /* (*) */
  --wk-gut-flaeche-h: #E3EAD8;          --wk-gut-flaeche-d: #1E2A1A;
  --wk-gut-text-h: #2E5229;             --wk-gut-text-d: #B5DDAE;
  --wk-gut-rand-h: #B4C6A2;             --wk-gut-rand-d: #3B5235;
  --wk-achtung-h: #B8860B;              --wk-achtung-d: #E9C065;   /* (*) */
  --wk-achtung-flaeche-h: #F6EACB;      --wk-achtung-flaeche-d: #30260F;
  --wk-achtung-text-h: #5E4405;         --wk-achtung-text-d: #F1D99A;
  --wk-achtung-rand-h: #D9BC75;         --wk-achtung-rand-d: #6B5A2A;
  --wk-fehler-h: #A8321D;               --wk-fehler-d: #F28B73;   /* (*) */
  --wk-fehler-flaeche-h: #F6DDD3;       --wk-fehler-flaeche-d: #3A1E15;
  --wk-fehler-text-h: #7F2514;          --wk-fehler-text-d: #F7B7A4;
  --wk-schleier-h: rgba(29,26,22,.4);   --wk-schleier-d: rgba(0,0,0,.6);
  --wk-schatten-1-h: 0 1px 2px rgba(60,40,20,.06);--wk-schatten-1-d: 0 1px 2px rgba(0,0,0,.4);
  --wk-schatten-2-h: 0 10px 30px -14px rgba(60,40,20,.25);--wk-schatten-2-d: 0 10px 30px -14px rgba(0,0,0,.7);
  --wk-schatten-3-h: 0 24px 60px -24px rgba(60,40,20,.35);--wk-schatten-3-d: 0 24px 60px -24px rgba(0,0,0,.8);

  --wk-radius-s: 10px; --wk-radius-m: 14px; --wk-radius-l: 22px; --wk-radius-xl: 28px; --wk-radius-rund: 999px;
  --wk-schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-schrift-anzeige: "Fraunces", Georgia, "Times New Roman", serif;
  --wk-schrift-lesen: "Fraunces", Georgia, serif;
  --wk-schrift-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --wk-groesse-titel: 44px; --wk-groesse-abschnitt: 30px; --wk-groesse-gross: 21px;
  --wk-groesse-text: 16px; --wk-groesse-klein: 13.5px;
  --wk-gewicht-titel: 350; --wk-gewicht-abschnitt: 400; --wk-gewicht-stark: 600;
  --wk-laufweite-titel: -.03em; --wk-zeilenhoehe: 1.6;
}
/* Editorial: kursives Akzentwort (<em>) im Titel, Karten-Titel in Fraunces, Pillen-Knöpfe, Marken in Mono und Rost */
[data-stil="editorial"] .wk-h1 em, [data-stil="editorial"] .wk-h2 em { font-style: italic; color: var(--wk-akzent); font-weight: 400; }
[data-stil="editorial"] .wk-h3 { font-family: var(--wk-schrift-anzeige); font-weight: 500; font-size: calc(var(--wk-groesse-gross) - 1px); letter-spacing: -.01em; }
[data-stil="editorial"] .wk-btn { border-radius: var(--wk-radius-rund); padding: 11px 20px; }
[data-stil="editorial"] .wk-karte { border: var(--wk-strich) solid var(--wk-linie); }
[data-stil="editorial"] .wk-marke { font: 600 12px/1.2 var(--wk-schrift-mono); letter-spacing: .08em; color: var(--wk-akzent); }
[data-stil="editorial"] .editorial-punkte { background-image: radial-gradient(var(--wk-linie) 1px, transparent 1px); background-size: 22px 22px; }