/* RAZ Compass — Designsystem (Auftrag-Oberflaeche-Professionell, Teil A2)
 * =========================================================================
 * Richtung C „Seitenleiste“ (Ruben, 20.10.2026): Inter, Graphit als einzige Akzentfarbe, Grauskala, Statusfarben NUR fuer Status. Die Linie der
 * Vorbilder (Stripe, Klarna, Shopify) sind die PRINZIPIEN, keine Farben und keine Bildsprache: eine Schrift, ein Akzent, Raster aus 4/8 px, drei Radien,
 * Linien statt Schatten, keine Verlaeufe, kein Emoji, ein Satz Linien-Icons (`ds-icons.svg`).
 *
 * DIESE DATEI IST DER EINZIGE ORT FUER FARBEN. Rohe Farbwerte (#hex, rgb()) stehen nur in den zwei Token-Bloecken ganz oben; alles darunter benutzt `var(--ds-*)`.
 * Neue Seiten laden diese Datei und bauen aus den `ds-*`-Klassen; sie schreiben kein eigenes Farb-CSS (`test_ui_designregeln.py` zaehlt das je umgestellter Seite).
 * Der Rand eines Eingabefelds ist `--ds-feldrand` (mindestens 3:1 gegen den Grund, WCAG 1.4.11); `--ds-linie-stark` bleibt fuer Trennlinien und Knopfraender.
 * Hell und Dunkel sind zwei Fassungen derselben Tafel (`data-theme`, wie `dashboard.css`); die Kontraste beider Fassungen rechnet `test_ui_designsystem.py` aus DIESER Datei.
 *
 * Eine bestehende Seite wird NICHT hierauf umgestellt, solange sie nicht in `test_ui_designregeln.py` unter UMGESTELLT steht (Pilot 26.10.: die Kundenseite
 * bleibt, wie sie ist, bis Teil B).
 */
@font-face { font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Grauskala + Akzent + Status (Hell) */
  --ds-bg: #F6F6F7;
  --ds-flaeche: #FFFFFF;
  --ds-flaeche-2: #EDEDEF;
  --ds-linie: #E4E4E7;
  --ds-linie-stark: #CFCFD4;
  --ds-feldrand: #8A8A93;
  --ds-text: #18181B;
  --ds-text2: #52525B;
  --ds-leise: #6B6B76;
  --ds-akzent: #4075CC;   /* Rubens Blau 23.10. im Hellen (#4177D0 gibt mit Weiss nur 4,4:1; dies ist dasselbe Blau mit 4,5:1) */
  --ds-akzent-text: #FFFFFF;
  --ds-gut: #17784A;
  --ds-gut-hinter: #E7F4EC;
  --ds-warn: #95560A;
  --ds-warn-hinter: #FBF1DE;
  --ds-kritisch: #B42318;
  --ds-kritisch-hinter: #FCEBE9;
  --ds-ueberlagerung: rgba(24, 24, 27, 0.45);
  /* Schrift */
  --ds-font: 'Inter', system-ui, sans-serif;
  --ds-font-mono: 'Plex Mono', ui-monospace, monospace;
  /* Raster aus 4/8 px */
  --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px; --ds-s5: 24px; --ds-s6: 32px; --ds-s7: 48px; --ds-s8: 64px;
  /* hoechstens drei Radien */
  --ds-r1: 4px; --ds-r2: 8px; --ds-r3: 999px;
  /* Schriftgroessen (Zeilenhoehe auf dem Raster) */
  --ds-t-klein: 12px; --ds-t-text: 14px; --ds-t-gross: 16px; --ds-t-titel: 24px;
  --ds-hoehe: 36px;
}

:root[data-theme="dark"] {
  --ds-bg: #111113;
  --ds-flaeche: #18181B;
  --ds-flaeche-2: #27272A;
  --ds-linie: #2E2E33;
  --ds-linie-stark: #3F3F46;
  --ds-feldrand: #71717A;
  --ds-text: #F4F4F5;
  --ds-text2: #A1A1AA;
  --ds-leise: #8E8E99;
  --ds-akzent: #B297F8;   /* Rubens Lila 23.10.: im Dunkeln Lila mit dunkler Schrift (7,3:1; Weiss darauf nur 2,4:1) */
  --ds-akzent-text: #18181B;
  --ds-gut: #4CC38A;
  --ds-gut-hinter: #14281E;
  --ds-warn: #E8A33D;
  --ds-warn-hinter: #2B2210;
  --ds-kritisch: #F2766B;
  --ds-kritisch-hinter: #301614;
  --ds-ueberlagerung: rgba(0, 0, 0, 0.6);
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
.ds { box-sizing: border-box; margin: 0; background: var(--ds-bg); color: var(--ds-text); font: 400 var(--ds-t-text)/1.5 var(--ds-font); font-variant-numeric: tabular-nums; }
.ds *, .ds *::before, .ds *::after { box-sizing: inherit; }
.ds h1 { margin: 0; font-size: var(--ds-t-titel); line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.ds h2 { margin: 0; font-size: var(--ds-t-gross); line-height: 24px; font-weight: 600; }
.ds h3 { margin: 0; font-size: var(--ds-t-text); line-height: 20px; font-weight: 600; }
.ds p { margin: 0; }
.ds a { color: var(--ds-text); text-decoration: underline; text-underline-offset: 3px; }
/* Ein Knopf, der ein <a> ist (Sprung in eine andere Seite): `.ds a` (0,1,1) schlug `.ds-btn--primaer` (0,1,0), und der primaere Link stand schwarz auf schwarz da
   (gefunden an der Team-Startseite, 23.10.2026, am Bild; die Pruefung las nur den Text). Hier wird die Knopffarbe zurueckgeholt, Unterstreichung weg. */
.ds a.ds-btn { text-decoration: none; }
.ds a.ds-btn--primaer { color: var(--ds-akzent-text); }
.ds a.ds-btn--leise { color: var(--ds-text2); }
.ds a.ds-btn--leise:hover { color: var(--ds-text); }
.ds code, .ds .ds-kennung { font-family: var(--ds-font-mono); font-size: 13px; }
.ds-text2 { color: var(--ds-text2); }
.ds-leise { color: var(--ds-leise); font-size: var(--ds-t-klein); }
.ds-nur-screenreader { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ds :focus-visible { outline: 2px solid var(--ds-text); outline-offset: 2px; }

/* ── Icons (ein Satz Linien-Icons, `ds-icons.svg`) ──────────────────────── */
.ds-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Bedienelemente: Knopf (3 Arten), Eingabe, Auswahl ──────────────────── */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s2); height: var(--ds-hoehe); padding: 0 var(--ds-s4); border: 1px solid var(--ds-linie-stark); border-radius: var(--ds-r1); background: var(--ds-flaeche); color: var(--ds-text); font: 500 var(--ds-t-text)/1 var(--ds-font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.ds-btn:hover { background: var(--ds-flaeche-2); }
.ds-btn--primaer { background: var(--ds-akzent); border-color: var(--ds-akzent); color: var(--ds-akzent-text); }
.ds-btn--primaer:hover { background: var(--ds-akzent); opacity: 0.88; }
.ds-btn--leise { border-color: transparent; background: transparent; color: var(--ds-text2); }
.ds-btn--leise:hover { background: var(--ds-flaeche-2); color: var(--ds-text); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ds-feld { display: flex; flex-direction: column; gap: var(--ds-s1); }
.ds-feld label { font-weight: 500; }
.ds-feld .ds-hilfe { color: var(--ds-leise); font-size: var(--ds-t-klein); }
.ds-feld .ds-fehler { display: flex; align-items: center; gap: var(--ds-s1); color: var(--ds-kritisch); font-size: var(--ds-t-klein); }
.ds-input, .ds-select { width: 100%; height: var(--ds-hoehe); padding: 0 var(--ds-s3); border: 1px solid var(--ds-feldrand); border-radius: var(--ds-r1); background: var(--ds-flaeche); color: var(--ds-text); font: 400 var(--ds-t-text)/1 var(--ds-font); }
.ds-input::placeholder { color: var(--ds-leise); opacity: 1; }
.ds-input[aria-invalid="true"] { border-color: var(--ds-kritisch); }
.ds-input:disabled, .ds-select:disabled { background: var(--ds-flaeche-2); color: var(--ds-leise); cursor: not-allowed; }
.ds-auswahl { position: relative; display: block; }
.ds-select { appearance: none; padding-right: var(--ds-s6); }
.ds-auswahl .ds-icon { position: absolute; right: var(--ds-s3); top: 10px; pointer-events: none; color: var(--ds-text2); }

/* ── Darstellung: Tabelle, Status-Plakette, Reiter ──────────────────────── */
.ds-karte { background: var(--ds-flaeche); border: 1px solid var(--ds-linie); border-radius: var(--ds-r2); overflow: hidden; }
.ds-karte > h2, .ds-karte > .ds-karte-kopf { padding: var(--ds-s3) var(--ds-s4); border-bottom: 1px solid var(--ds-linie); font-size: 13px; line-height: 20px; color: var(--ds-text2); }
.ds-tabelle { width: 100%; border-collapse: collapse; }
.ds-tabelle th { padding: var(--ds-s3) var(--ds-s4); background: var(--ds-bg); border-bottom: 1px solid var(--ds-linie); color: var(--ds-leise); font-size: var(--ds-t-klein); font-weight: 500; text-align: left; }
.ds-tabelle td { padding: var(--ds-s3) var(--ds-s4); border-bottom: 1px solid var(--ds-linie); vertical-align: top; }
.ds-tabelle tr:last-child td { border-bottom: 0; }
.ds-tabelle th.ds-num, .ds-tabelle td.ds-num { width: 1%; text-align: right; white-space: nowrap; }
.ds-tabelle .ds-wert { font-weight: 600; font-size: var(--ds-t-gross); }
.ds-tabelle .ds-name { font-weight: 500; }
.ds-tabelle .ds-neben { display: block; color: var(--ds-leise); font-size: var(--ds-t-klein); font-weight: 400; }
.ds-plakette { display: inline-flex; align-items: center; gap: var(--ds-s1); padding: 0 var(--ds-s2); border-radius: var(--ds-r3); background: var(--ds-flaeche-2); color: var(--ds-text2); font-size: var(--ds-t-klein); font-weight: 500; line-height: 20px; white-space: nowrap; }
.ds-plakette .ds-icon { width: 12px; height: 12px; }
.ds-plakette--gut { background: var(--ds-gut-hinter); color: var(--ds-gut); }
.ds-plakette--warnung { background: var(--ds-warn-hinter); color: var(--ds-warn); }
.ds-plakette--kritisch { background: var(--ds-kritisch-hinter); color: var(--ds-kritisch); }
.ds-aend { display: inline-flex; align-items: center; gap: var(--ds-s1); color: var(--ds-text2); font-size: var(--ds-t-klein); font-weight: 500; }
.ds-aend--gut { color: var(--ds-gut); }
.ds-reiter { display: flex; gap: var(--ds-s5); border-bottom: 1px solid var(--ds-linie); }
.ds-reiter a, .ds-reiter button { padding: var(--ds-s2) 0 var(--ds-s3); margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ds-text2); font: 500 var(--ds-t-text)/20px var(--ds-font); text-decoration: none; cursor: pointer; }
.ds-reiter [aria-current="page"], .ds-reiter [aria-selected="true"] { color: var(--ds-text); border-bottom-color: var(--ds-text); }
.ds-hinweis { display: flex; gap: var(--ds-s3); padding: var(--ds-s3) var(--ds-s4); border: 1px solid var(--ds-linie); border-radius: var(--ds-r1); background: var(--ds-flaeche); color: var(--ds-text2); }
.ds-hinweis .ds-icon { margin-top: 2px; color: var(--ds-text); }
.ds-hinweis--warnung { border-color: var(--ds-warn); background: var(--ds-warn-hinter); color: var(--ds-text); }
.ds-hinweis--warnung .ds-icon { color: var(--ds-warn); }

/* ── Rahmen: Seitenkopf, Seitenleiste, Dialog ───────────────────────────── */
.ds-rahmen { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.ds-leiste { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: var(--ds-s5); padding: var(--ds-s4); background: var(--ds-flaeche); border-right: 1px solid var(--ds-linie); }
.ds-marke { display: flex; align-items: center; gap: var(--ds-s3); padding: var(--ds-s1) var(--ds-s2); font-weight: 600; font-size: var(--ds-t-gross); }
.ds-logo-platz { width: 28px; height: 28px; border: 1px dashed var(--ds-linie-stark); border-radius: var(--ds-r1); }
.ds-nav { display: flex; flex-direction: column; gap: var(--ds-s1); }
.ds-nav a { padding: var(--ds-s2) var(--ds-s3); border-radius: var(--ds-r1); color: var(--ds-text2); font-weight: 500; text-decoration: none; }
.ds-nav a:hover { background: var(--ds-flaeche-2); color: var(--ds-text); }
.ds-nav a[aria-current="page"] { background: var(--ds-flaeche-2); color: var(--ds-text); }
.ds-konto { margin-top: auto; padding: var(--ds-s3) var(--ds-s2) 0; border-top: 1px solid var(--ds-linie); color: var(--ds-text2); }
.ds-konto strong { display: block; color: var(--ds-text); font-weight: 600; }
.ds-inhalt { width: 100%; max-width: 1120px; padding: var(--ds-s6) var(--ds-s6) var(--ds-s7); }
.ds-seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-s4); margin-bottom: var(--ds-s5); }
.ds-seitenkopf .ds-kontext { margin-top: var(--ds-s1); color: var(--ds-text2); }
.ds-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--ds-linie-stark); border-radius: var(--ds-r2); background: var(--ds-flaeche); color: var(--ds-text); }
.ds-dialog::backdrop { background: var(--ds-ueberlagerung); }
.ds-dialog-kopf { padding: var(--ds-s4) var(--ds-s5); border-bottom: 1px solid var(--ds-linie); }
.ds-dialog-inhalt { padding: var(--ds-s4) var(--ds-s5); color: var(--ds-text2); }
.ds-dialog-fuss { display: flex; justify-content: flex-end; gap: var(--ds-s2); padding: var(--ds-s3) var(--ds-s5); border-top: 1px solid var(--ds-linie); }

/* ── Zustaende: leer, laedt, Fehler, keine Berechtigung ─────────────────── */
/* Jeder Zustand sagt, was als Naechstes zu tun ist (`.ds-zustand-aktion`). */
.ds-zustand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-s2); padding: var(--ds-s5); background: var(--ds-flaeche); border: 1px solid var(--ds-linie); border-radius: var(--ds-r2); }
.ds-zustand .ds-icon { width: 20px; height: 20px; color: var(--ds-text2); }
.ds-zustand--fehler .ds-icon { color: var(--ds-kritisch); }
.ds-zustand--gesperrt .ds-icon { color: var(--ds-warn); }
.ds-zustand p { color: var(--ds-text2); max-width: 56ch; }
.ds-zustand-aktion { margin-top: var(--ds-s2); }
.ds-skelett { display: flex; flex-direction: column; gap: var(--ds-s3); width: 100%; }
.ds-skelett span { display: block; height: 12px; border-radius: var(--ds-r1); background: var(--ds-flaeche-2); animation: ds-puls 1.4s ease-in-out infinite; }
.ds-skelett span:nth-child(1) { width: 40%; }
.ds-skelett span:nth-child(2) { width: 90%; }
.ds-skelett span:nth-child(3) { width: 70%; }
@keyframes ds-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ds-skelett span { animation: none; } }

/* ── Hilfen fuer Seiten: Abstaende ohne `style="…"` ──────────────────────── */
.ds-stapel { display: flex; flex-direction: column; gap: var(--ds-s4); }
.ds-stapel--eng { gap: var(--ds-s2); }
.ds-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s3); }
.ds-abschnitt { display: flex; flex-direction: column; gap: var(--ds-s4); margin-bottom: var(--ds-s7); scroll-margin-top: var(--ds-s5); }
.ds-abschnitt > .ds-leise { max-width: 72ch; }
.ds-karte-koerper { display: flex; flex-direction: column; gap: var(--ds-s4); padding: var(--ds-s4); }

/* ── Muster: Farbfelder und Abstandsstufen (nur die Musterseite zeigt sie) ── */
.ds-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: var(--ds-s3); }
.ds-farbe { display: flex; flex-direction: column; gap: var(--ds-s1); font-size: var(--ds-t-klein); color: var(--ds-text2); }
.ds-farbe i { display: block; height: 40px; border: 1px solid var(--ds-linie-stark); border-radius: var(--ds-r1); }
.ds-farbe--bg i { background: var(--ds-bg); }
.ds-farbe--flaeche i { background: var(--ds-flaeche); }
.ds-farbe--flaeche-2 i { background: var(--ds-flaeche-2); }
.ds-farbe--linie i { background: var(--ds-linie); }
.ds-farbe--text i { background: var(--ds-text); }
.ds-farbe--text2 i { background: var(--ds-text2); }
.ds-farbe--leise i { background: var(--ds-leise); }
.ds-farbe--akzent i { background: var(--ds-akzent); }
.ds-farbe--gut i { background: var(--ds-gut); }
.ds-farbe--warn i { background: var(--ds-warn); }
.ds-farbe--kritisch i { background: var(--ds-kritisch); }
.ds-stufe { display: flex; align-items: center; gap: var(--ds-s3); font-size: var(--ds-t-klein); color: var(--ds-text2); }
.ds-stufe i { display: block; height: 12px; background: var(--ds-text); border-radius: var(--ds-r1); }
.ds-stufe--s1 i { width: var(--ds-s1); }
.ds-stufe--s2 i { width: var(--ds-s2); }
.ds-stufe--s3 i { width: var(--ds-s3); }
.ds-stufe--s4 i { width: var(--ds-s4); }
.ds-stufe--s5 i { width: var(--ds-s5); }
.ds-stufe--s6 i { width: var(--ds-s6); }
.ds-stufe--s7 i { width: var(--ds-s7); }
.ds-stufe--s8 i { width: var(--ds-s8); }

/* Zwei Spalten, wo der Platz da ist */
.ds-raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s4); align-items: start; }

/* ── Handy: die Leiste wird zur Kopfzeile, Tabellen behalten ihre Spalten ── */
@media (max-width: 900px) {
  .ds-raster-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ds-rahmen { grid-template-columns: minmax(0, 1fr); }
  .ds-leiste { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-s3); padding: var(--ds-s2) var(--ds-s4); border-right: 0; border-bottom: 1px solid var(--ds-linie); }
  .ds-marke { padding: 0; }
  .ds-nav { flex-direction: row; order: 3; width: 100%; gap: var(--ds-s2); padding-bottom: var(--ds-s1); overflow-x: auto; }
  .ds-konto { margin: 0; padding: 0; border: 0; text-align: right; }
  .ds-konto strong { display: inline; margin-right: var(--ds-s3); }
  .ds-inhalt { padding: var(--ds-s5) var(--ds-s4) var(--ds-s6); }
  .ds-seitenkopf { flex-direction: column; align-items: stretch; }
}