/* Markentokens v2 (03.09.2026, Sven: „moderner, andere Farben").
   Gilt für Leitstand, Landingpage, Anschreiben, Vorschau-Rahmen.
   Zwei Stimmen: Text/Oberfläche in Manrope, die Maschine (Zahlen, KI-Antworten, Zeiten) in JetBrains Mono.
   Eine Akzentfarbe: Kobalt. Bernstein nur für den Menschen (Freigaben, Sven). Semantik getrennt (ok/warn/crit).
   Token-Namen sind stabil geblieben, damit alle Verbraucher weiterlaufen; --serif ist jetzt ein Alias für --text. */
:root{
  color-scheme:light;
  --ground:#F5F6FA; --panel:#FFFFFF; --panel-2:#EEF0F6; --line:#E1E4EC; --line-soft:#ECEEF4;
  --ink:#0F1424; --ink-2:#3C4257; --dim:#6B7186;
  --accent:#2F5BFF; --accent-ink:#1F45D6; --accent-soft:#E7ECFF; --accent-line:#B7C5FF;
  --human:#D97706; --human-soft:#FEF0D6;
  --ok:#15803D; --warn:#B45309; --crit:#DC2626; --ok-soft:#DCFCE7; --warn-soft:#FEF3C7; --crit-soft:#FEE2E2;
  --shadow:0 1px 2px rgba(15,20,36,.06),0 8px 24px -12px rgba(15,20,36,.12);
  --radius:12px; --radius-s:8px; --radius-xs:5px;
  --display:'Manrope',system-ui,'Helvetica Neue',Arial,sans-serif;
  --text:'Manrope',system-ui,'Helvetica Neue',Arial,sans-serif;
  --serif:var(--text);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0B0E17; --panel:#121627; --panel-2:#181D31; --line:#252B42; --line-soft:#1E2338;
    --ink:#EEF0F7; --ink-2:#B9BED2; --dim:#8A90A8;
    --accent:#6F8CFF; --accent-ink:#8DA3FF; --accent-soft:#1B2450; --accent-line:#33438F;
    --human:#F5A524; --human-soft:#3A2A0F;
    --ok:#4ADE80; --warn:#FBBF24; --crit:#F87171; --ok-soft:#12301E; --warn-soft:#3A2D0E; --crit-soft:#3F1B1B;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0B0E17; --panel:#121627; --panel-2:#181D31; --line:#252B42; --line-soft:#1E2338;
  --ink:#EEF0F7; --ink-2:#B9BED2; --dim:#8A90A8;
  --accent:#6F8CFF; --accent-ink:#8DA3FF; --accent-soft:#1B2450; --accent-line:#33438F;
  --human:#F5A524; --human-soft:#3A2A0F;
  --ok:#4ADE80; --warn:#FBBF24; --crit:#F87171; --ok-soft:#12301E; --warn-soft:#3A2D0E; --crit-soft:#3F1B1B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.02em;font-weight:800}
.eyebrow{font-family:var(--display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);font-weight:700}
.mono{font-family:var(--mono);font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.wordmark i{display:inline-block;width:14px;height:14px;background:var(--accent);border-radius:4px;transform:rotate(45deg)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.02em}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.acc{background:var(--accent-soft);color:var(--accent-ink)} .pill.hum{background:var(--human-soft);color:var(--human)}
.btn{display:inline-block;padding:10px 16px;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:14px;text-decoration:none;border:0;cursor:pointer;border-radius:var(--radius-s);transition:filter .15s ease}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--accent-ink);border:1.5px solid var(--accent-line)}
.btn.hum{background:var(--human);color:#fff}
.btn:focus-visible{outline:3px solid var(--accent-line);outline-offset:2px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}