/* Werkzeugkasten · Stil „Rudel“ (aus rudel, site/app.css)
   Warm, freundlich, rund. Tannengrün trägt, Sonnengelb („Claim“) markiert, was jemand übernehmen kann.
   Große, gut lesbare Schrift (Text 17 px), Pillen und weiche Karten, Schatten lang und leise.
   Braucht tokens.css (design-grundlagen ≥ 0.2) und schriften.css aus diesem Baustein.
   Werte mit (*) sind vom Werkzeugkasten ergänzt, rudel hat dafür keinen eigenen Namen. */
[data-stil="rudel"] {
  --wk-grund-h: #F1F4F2;          --wk-grund-d: #0F1A18;
  --wk-flaeche-h: #FFFFFF;        --wk-flaeche-d: #172522;
  --wk-flaeche-2-h: #E3ECE8;      --wk-flaeche-2-d: #1D302C;   /* pine-soft */
  --wk-auswahl-h: #E3ECE8;        --wk-auswahl-d: #1D302C;
  --wk-text-h: #16302C;           --wk-text-d: #E4EEEA;        /* ink */
  --wk-text-2-h: #2F4A45;         --wk-text-2-d: #C3D4CF;      /* (*) */
  --wk-text-leise-h: #5B6F6A;     --wk-text-leise-d: #9DB2AC;  /* muted */
  --wk-linie-h: #D6DFDB;          --wk-linie-d: #2A3D39;
  --wk-linie-stark-h: #7F948E;    --wk-linie-stark-d: #5F7A73; /* (*) Bedienrahmen, 3:1 */
  --wk-akzent-h: #F2B01E;         --wk-akzent-d: #F5BE45;      /* claim */
  --wk-auf-akzent-h: #3A2A00;     --wk-auf-akzent-d: #2A1E00;  /* claim-ink */
  --wk-haupt-h: #1F4A43;          --wk-haupt-d: #7FC4B4;       /* pine */
  --wk-auf-haupt-h: #F1F4F2;      --wk-auf-haupt-d: #0F1A18;   /* on-pine */
  --wk-fokus-h: #1F4A43;          --wk-fokus-d: #7FC4B4;
  --wk-gut-h: #1F4A43;            --wk-gut-d: #7FC4B4;
  --wk-gut-flaeche-h: #E3ECE8;    --wk-gut-flaeche-d: #1D302C;
  --wk-gut-text-h: #1F4A43;       --wk-gut-text-d: #A9DCCF;
  --wk-gut-rand-h: #A9C4BC;       --wk-gut-rand-d: #3A5C55;    /* (*) */
  --wk-achtung-h: #F2B01E;        --wk-achtung-d: #F5BE45;
  --wk-achtung-flaeche-h: #FCEFC7; --wk-achtung-flaeche-d: #33290F; /* (*) */
  --wk-achtung-text-h: #3A2A00;   --wk-achtung-text-d: #F5D489;
  --wk-achtung-rand-h: #E3B341;   --wk-achtung-rand-d: #7A6020;
  --wk-fehler-h: #B4471F;         --wk-fehler-d: #F08A64;      /* warn */
  --wk-fehler-flaeche-h: #F8E4DB; --wk-fehler-flaeche-d: #3A2016; /* (*) */
  --wk-fehler-text-h: #8C3517;    --wk-fehler-text-d: #F6AE92;
  --wk-schleier-h: rgba(22,48,44,.4); --wk-schleier-d: rgba(0,0,0,.6);
  --wk-schatten-1-h: 0 1px 2px rgba(22,48,44,.08), 0 0 0 1px rgba(22,48,44,.06);
  --wk-schatten-1-d: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
  --wk-schatten-2-h: 0 14px 28px -18px rgba(22,48,44,.4), 0 0 0 1px rgba(22,48,44,.06);
  --wk-schatten-2-d: 0 14px 28px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  --wk-schatten-3-h: 0 18px 40px -28px rgba(22,48,44,.45), 0 0 0 1px rgba(22,48,44,.06);
  --wk-schatten-3-d: 0 18px 40px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);

  --wk-radius-s: 8px; --wk-radius-m: 12px; --wk-radius-l: 16px; --wk-radius-xl: 20px; --wk-radius-rund: 999px;
  --wk-strich: 1px; --wk-strich-aktiv: 2px;
  --wk-schrift: "Figtree", "Segoe UI", system-ui, sans-serif;
  --wk-schrift-anzeige: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --wk-schrift-lesen: var(--wk-schrift);
  --wk-schrift-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --wk-groesse-titel: 34px; --wk-groesse-abschnitt: 22px; --wk-groesse-gross: 18px;
  --wk-groesse-text: 17px; --wk-groesse-klein: 14.5px;
  --wk-gewicht-titel: 800; --wk-gewicht-abschnitt: 700; --wk-gewicht-stark: 700;
  --wk-laufweite-titel: -.03em;
  --wk-zeilenhoehe: 1.55;
  --wk-dauer-kurz: 150ms; --wk-dauer-mittel: 250ms;
}
/* Bausteine in Rudel: Pillen-Knöpfe, Überschriften in der Anzeigeschrift, Marken in Mono */
[data-stil="rudel"] .wk-btn { border-radius: var(--wk-radius-rund); padding: 10px 20px; min-height: 44px; }
[data-stil="rudel"] .wk-btn.klein { padding: 5px 12px; min-height: 32px; }
[data-stil="rudel"] .wk-h3 { font-family: var(--wk-schrift-anzeige); }
[data-stil="rudel"] .wk-marke { font-family: var(--wk-schrift-mono); font-weight: 500; }
[data-stil="rudel"] :focus-visible { outline-offset: 3px; }