/* Werkzeugkasten · Stil „Kontor“ (hlsbrg, Konzept Richtung A, Codename Kontor, Stand 02.10.2026)
   Vertrauen und Beständigkeit: Serifenschrift für Überschriften, Weißraum, feine Linien, Messing als sparsamer
   Akzent. Wirkt wie ein gutes Beratungshaus. Interaktion zurückhaltend, kaum Bewegung.
   Hell: Farben aus dem Konzept (Marine #14213D, Warmweiß #F7F4EE, Messing #B08D57, Anthrazit #2B2B2B).
   Dunkel und alles mit (*): Vorschlag des Werkzeugkastens; im Konzept gibt es keinen Dunkelmodus.
   Braucht tokens.css (design-grundlagen ≥ 0.2), Source Serif 4 (Baustein schriften) und schriften.css (Source Sans 3).
   Werte mit (*) sind vom Werkzeugkasten ergänzt oder angepasst. */
[data-stil="kontor"] {
  --wk-grund-h: #F7F4EE;                --wk-grund-d: #0F1626;   /* Warmweiß / (*) */
  --wk-flaeche-h: #FFFFFF;              --wk-flaeche-d: #14213D;   /* (*) / Marine */
  --wk-flaeche-2-h: #EFEAE0;            --wk-flaeche-2-d: #1B2A4A;   /* (*) */
  --wk-auswahl-h: #E6E9F0;              --wk-auswahl-d: #22345C;   /* (*) */
  --wk-text-h: #2B2B2B;                 --wk-text-d: #F2EEE6;   /* Anthrazit */
  --wk-text-2-h: #14213D;               --wk-text-2-d: #DCD6CA;   /* Marine */
  --wk-text-leise-h: #5F5A52;           --wk-text-leise-d: #B9B2A5;   /* (*) */
  --wk-linie-h: #E2DCCF;                --wk-linie-d: #26314D;   /* (*) */
  --wk-linie-stark-h: #8F8676;          --wk-linie-stark-d: #6A7390;   /* (*) */
  --wk-akzent-h: #B08D57;               --wk-akzent-d: #C9A56B;   /* Messing */
  --wk-auf-akzent-h: #14213D;           --wk-auf-akzent-d: #14213D;
  --wk-haupt-h: #14213D;                --wk-haupt-d: #F2EEE6;   /* Marine */
  --wk-auf-haupt-h: #F7F4EE;            --wk-auf-haupt-d: #14213D;
  --wk-fokus-h: #14213D;                --wk-fokus-d: #C9A56B;
  --wk-gut-h: #2F6B4F;                  --wk-gut-d: #7CC4A0;   /* (*) */
  --wk-gut-flaeche-h: #E4EFE8;          --wk-gut-flaeche-d: #173328;
  --wk-gut-text-h: #22513B;             --wk-gut-text-d: #A6DBC0;
  --wk-gut-rand-h: #A9CDB8;             --wk-gut-rand-d: #2E5A47;
  --wk-achtung-h: #B08D57;              --wk-achtung-d: #C9A56B;
  --wk-achtung-flaeche-h: #F4ECDD;      --wk-achtung-flaeche-d: #2E2717;
  --wk-achtung-text-h: #5C4520;         --wk-achtung-text-d: #E8D3AA;
  --wk-achtung-rand-h: #CDB389;         --wk-achtung-rand-d: #6B5A3A;
  --wk-fehler-h: #A8322A;               --wk-fehler-d: #F0938A;   /* (*) */
  --wk-fehler-flaeche-h: #F7E4E1;       --wk-fehler-flaeche-d: #3A1F1D;
  --wk-fehler-text-h: #7E231C;          --wk-fehler-text-d: #F6B8B1;
  --wk-schleier-h: rgba(20,33,61,.4);   --wk-schleier-d: rgba(0,0,0,.6);
  --wk-schatten-1-h: 0 1px 2px rgba(20,33,61,.06), 0 0 0 1px rgba(20,33,61,.06);--wk-schatten-1-d: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  --wk-schatten-2-h: 0 6px 18px -8px rgba(20,33,61,.18), 0 0 0 1px rgba(20,33,61,.06);--wk-schatten-2-d: 0 6px 18px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  --wk-schatten-3-h: 0 18px 40px -16px rgba(20,33,61,.25), 0 0 0 1px rgba(20,33,61,.06);--wk-schatten-3-d: 0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);

  --wk-radius-s: 2px; --wk-radius-m: 3px; --wk-radius-l: 6px; --wk-radius-xl: 8px; --wk-radius-rund: 999px;
  --wk-schrift: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --wk-schrift-anzeige: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wk-schrift-lesen: "Source Serif 4", Georgia, serif;
  --wk-groesse-titel: 34px; --wk-groesse-abschnitt: 22px; --wk-groesse-gross: 18px;
  --wk-groesse-text: 16px; --wk-groesse-klein: 13.5px;
  --wk-gewicht-titel: 600; --wk-gewicht-abschnitt: 600; --wk-gewicht-stark: 600;
  --wk-laufweite-titel: -.01em; --wk-zeilenhoehe: 1.6;
  --wk-dauer-kurz: 160ms; --wk-dauer-mittel: 240ms;
}
/* Kontor: feine Messinglinie unter dem Seitentitel, Überschriften in der Serife, ruhige Knöpfe */
[data-stil="kontor"] .wk-h1::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 12px; background: var(--wk-akzent); }
[data-stil="kontor"] .wk-h3 { font-family: var(--wk-schrift-anzeige); }
[data-stil="kontor"] .wk-btn { border-radius: var(--wk-radius-s); letter-spacing: .01em; }
[data-stil="kontor"] .wk-marke { color: var(--wk-akzent); letter-spacing: .12em; }
[data-stil="kontor"] .wk-h1 em, [data-stil="kontor"] .wk-h2 em { font-style: italic; color: var(--wk-text-2); }