/* AGORA-Website Design-Tokens – EINZIGE Quelle für Farbe, Abstand, Radius, Schrift, Schatten, Bewegung.
   Werte aus dem OS-Projekt übernommen (frontend/design-tokens/tokens.css), Website-Größen ergänzt. */
:root {
  --w-grund: #ffffff;
  --w-flaeche: #f7f7f8;
  --w-flaeche-2: #efeff1;
  --w-flaeche-3: #e4e4e7;
  --w-linie: #e2e2e6;
  --w-text: #0d0d0f;
  --w-text-leise: #6b6b73;
  --w-text-auf-akzent: #ffffff;
  --w-akzent: #1d6fd1;
  --w-akzent-weich: #e3eefb;
  --w-gut: #23804a;
  --w-gut-weich: #e0f2e6;
  --w-warn: #a8661a;
  --w-warn-weich: #fbf0dc;
  --w-fehler: #c4352b;
  --w-lila: #6050c1;
  --w-glas: rgba(255, 255, 255, 0.72);
  --w-glanz: radial-gradient(60% 50% at 50% 0%, rgba(29, 111, 209, 0.16), transparent 70%);
  --w-schatten-1: 0 1px 2px rgba(15, 18, 21, 0.06), 0 1px 1px rgba(15, 18, 21, 0.04);
  --w-schatten-2: 0 12px 32px rgba(15, 18, 21, 0.12), 0 2px 6px rgba(15, 18, 21, 0.06);
  --w-schatten-3: 0 40px 80px rgba(15, 18, 21, 0.18), 0 8px 20px rgba(15, 18, 21, 0.08);

  --w-schrift: "Segoe UI Variable Text", "Segoe UI", -apple-system, "SF Pro Text", "Helvetica Neue", Roboto, sans-serif;
  --w-schrift-anzeige: "Segoe UI Variable Display", "Segoe UI", -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  --w-schrift-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --w-groesse-0: 11px;
  --w-groesse-1: 12px;
  --w-groesse-2: 13px;
  --w-groesse-3: 15px;
  --w-groesse-4: 17px;
  --w-groesse-5: 22px;
  --w-groesse-6: 30px;
  --w-groesse-7: clamp(32px, 5vw, 48px);
  --w-groesse-8: clamp(40px, 8vw, 80px);
  --w-zeile: 1.55;
  --w-zeile-eng: 1.05;
  --w-sperrung-gross: -0.025em;
  --w-gewicht-normal: 400;
  --w-gewicht-mittel: 500;
  --w-gewicht-fett: 600;

  --w-abstand-1: 4px;
  --w-abstand-2: 8px;
  --w-abstand-3: 12px;
  --w-abstand-4: 16px;
  --w-abstand-5: 24px;
  --w-abstand-6: 32px;
  --w-abstand-7: 48px;
  --w-abstand-8: 72px;
  --w-abstand-9: 120px;

  --w-seite-breite: 1120px;
  --w-text-breite: 640px;
  --w-kopf-hoehe: 56px;
  --w-titel-hoehe: 32px;
  --w-leiste-breite: 220px;
  --w-vorschau-hoehe: 520px;
  --w-punkt: 8px;
  --w-linie-dicke: 1px;
  --w-fokus-dicke: 2px;
  --w-balken: 6px;

  --w-radius-s: 6px;
  --w-radius-m: 10px;
  --w-radius-l: 20px;
  --w-radius-xl: 28px;
  --w-radius-rund: 999px;

  --w-dauer-kurz: 140ms;
  --w-dauer-mittel: 240ms;
  --w-dauer-lang: 700ms;
  --w-kurve: cubic-bezier(0.23, 1, 0.32, 1);
  --w-kurve-weich: cubic-bezier(0.77, 0, 0.175, 1);
  --w-versatz: 16px;
  --w-druck: 0.97;
  --w-unschaerfe: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --w-grund: #0c0c0d;
    --w-flaeche: #151517;
    --w-flaeche-2: #1f1f22;
    --w-flaeche-3: #2b2b2f;
    --w-linie: #2a2a2e;
    --w-text: #f4f4f5;
    --w-text-leise: #9d9da5;
    --w-text-auf-akzent: #0c0c0d;
    --w-akzent: #7ab8ff;
    --w-akzent-weich: #16243a;
    --w-gut: #6cc58f;
    --w-gut-weich: #16301f;
    --w-warn: #e0a75a;
    --w-warn-weich: #3a2c14;
    --w-fehler: #f0857c;
    --w-lila: #a99cff;
    --w-glas: rgba(12, 12, 13, 0.7);
    --w-glanz: radial-gradient(60% 50% at 50% 0%, rgba(122, 184, 255, 0.18), transparent 70%);
    --w-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --w-schatten-2: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --w-schatten-3: 0 40px 100px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dunkel"] {
  --w-grund: #0c0c0d;
  --w-flaeche: #151517;
  --w-flaeche-2: #1f1f22;
  --w-flaeche-3: #2b2b2f;
  --w-linie: #2a2a2e;
  --w-text: #f4f4f5;
  --w-text-leise: #9d9da5;
  --w-text-auf-akzent: #0c0c0d;
  --w-akzent: #7ab8ff;
  --w-akzent-weich: #16243a;
  --w-gut: #6cc58f;
  --w-gut-weich: #16301f;
  --w-warn: #e0a75a;
  --w-warn-weich: #3a2c14;
  --w-fehler: #f0857c;
  --w-lila: #a99cff;
  --w-glas: rgba(12, 12, 13, 0.7);
  --w-glanz: radial-gradient(60% 50% at 50% 0%, rgba(122, 184, 255, 0.18), transparent 70%);
  --w-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --w-schatten-2: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --w-schatten-3: 0 40px 100px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Monogramme in der Vergleichstabelle (Projektfarben aus den OS-Diagrammreihen, keine Firmenfarben) */
:root { --w-reihe-1: #1d6fd1; --w-reihe-2: #af3b85; --w-reihe-3: #737400; --w-reihe-4: #6050c1; --w-reihe-5: #0b9d9d; --w-mono: 24px; --w-spalte-fest: 168px; }
/* Monogramm-Kreise: weiße Schrift, Flächen dunkel genug für WCAG AA (≥ 4,5:1) in hell UND dunkel */
:root { --w-mono-schrift: #ffffff; --w-mono-1: #0a6f6f; --w-mono-2: #9c2f74; --w-mono-3: #5c5d00; --w-mono-4: #5546b0; --w-mono-a: #1a5fb4; }