/* ==========================================================================
   bausteine.css -- die Grundbausteine des Verwaltungs-Systems
   ==========================================================================
   WOZU. Jede Seite hatte ihre eigenen Knoepfe, Karten und Tabellen, mit
   eigenen Werten (admin.css, projekte.css, profil.css, auth.css,
   werkstatt.css ...). Seit dem 16.09.2026 tragen alle Seiten dieselben
   Werte aus static/tokens.css (--ds-*). Diese Datei ist die Referenz, wie ein
   Baustein aus diesen Werten gebaut wird.

   ZWEI WEGE, EIN ERGEBNIS.
   1. Neues Markup nimmt die Klassen hier (`ds-knopf`, `ds-karte` ...).
   2. Bestehende Klassen, an denen JS oder Tests haengen (`.wk-btn`, `.btn`),
      bleiben stehen und lesen in ihrer eigenen Datei dieselben --ds-* Werte.
   Keine Farbe, kein Radius und kein Schatten steht hier als Zahl; alles
   kommt aus tokens.css. Wer einen Wert aendert, aendert ihn dort.

   Eigener Code. Stil und Masse sind einer verbreiteten Verwaltungsoberflaeche
   nachempfunden, Quelltext ist nicht uebernommen (docs/polaris-redesign-
   2026-09-16.md, Abschnitt "Grenze").

   Laedt NACH tokens.css und VOR der seiteneigenen Datei.
   ========================================================================== */

/* --- Grundschrift ------------------------------------------------------- */
.ds-seite{
  margin:0;
  background:var(--ds-grund);
  color:var(--ds-text);
  font-family:var(--ds-schrift);
  font-size:var(--ds-t-md);
  line-height:var(--ds-zh-md);
  font-weight:var(--ds-gew-normal);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11" 1;
}

/* --- Text --------------------------------------------------------------- */
.ds-titel{font-size:var(--ds-t-h-lg);line-height:var(--ds-zh-h-lg);font-weight:var(--ds-gew-fett);letter-spacing:var(--ds-sperr-dicht);margin:0;color:var(--ds-text)}
.ds-titel-gross{font-size:var(--ds-t-h-xl);line-height:var(--ds-zh-h-xl);font-weight:var(--ds-gew-fett);letter-spacing:var(--ds-sperr-dichter);margin:0}
.ds-kopf{font-size:var(--ds-t-lg);line-height:var(--ds-zh-lg);font-weight:var(--ds-gew-halbfett);margin:0;color:var(--ds-text)}
.ds-kopf-klein{font-size:var(--ds-t-md);line-height:var(--ds-zh-md);font-weight:var(--ds-gew-halbfett);margin:0}
.ds-text-2{color:var(--ds-text-2)}
.ds-text-klein{font-size:var(--ds-t-sm);line-height:var(--ds-zh-sm)}
.ds-link{color:var(--ds-link);text-decoration:none;cursor:pointer}
.ds-link:hover{color:var(--ds-link-hover);text-decoration:underline}
.ds-ziffern{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* --- Knopf -------------------------------------------------------------- */
.ds-knopf{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  box-sizing:border-box;
  min-height:var(--ds-knopf-hoehe);
  padding:6px 12px;
  border:0;border-radius:var(--ds-r-2);
  background:var(--ds-fuell);
  box-shadow:var(--ds-schatten-knopf);
  color:var(--ds-text);
  font:var(--ds-gew-mittel) var(--ds-t-sm)/var(--ds-zh-sm) var(--ds-schrift);
  text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;
  transition:background-color var(--ds-zeit-kurz) var(--ds-kurve);
}
.ds-knopf:hover{background:var(--ds-fuell-hover);box-shadow:var(--ds-schatten-knopf-hover)}
.ds-knopf:active{background:var(--ds-fuell-aktiv);box-shadow:var(--ds-schatten-knopf-aktiv)}
.ds-knopf:focus-visible{outline:2px solid var(--ds-rand-fokus);outline-offset:1px}
.ds-knopf:disabled,.ds-knopf[aria-disabled="true"]{
  background:var(--ds-fuell-aus);box-shadow:none;color:var(--ds-text-aus);cursor:default;pointer-events:none}
.ds-knopf svg{width:20px;height:20px;fill:currentColor}

.ds-knopf--primaer{
  background:var(--ds-glanz-primaer),var(--ds-fuell-primaer);
  box-shadow:var(--ds-schatten-primaer);
  color:var(--ds-text-auf-primaer);
}
.ds-knopf--primaer:hover{background:var(--ds-glanz-primaer),var(--ds-fuell-primaer-hover);box-shadow:var(--ds-schatten-primaer-hover)}
.ds-knopf--primaer:active{background:var(--ds-glanz-primaer),var(--ds-fuell-primaer-aktiv);box-shadow:var(--ds-schatten-primaer-aktiv)}
.ds-knopf--primaer:disabled{background:var(--ds-fuell-primaer-aus);color:var(--ds-text-auf-primaer)}

.ds-knopf--krit{background:var(--ds-krit-fuell);box-shadow:var(--ds-schatten-krit);color:var(--ds-text-auf-krit)}
.ds-knopf--krit:hover{background:var(--ds-krit-fuell-hover);box-shadow:var(--ds-schatten-krit)}
.ds-knopf--krit-schlicht{color:var(--ds-krit-text)}

.ds-knopf--tertiaer{background:transparent;box-shadow:none}
.ds-knopf--tertiaer:hover{background:var(--ds-fuell-transparent-hover);box-shadow:none}
.ds-knopf--tertiaer:active{background:var(--ds-fuell-transparent-aktiv);box-shadow:none}

.ds-knopf--schlicht{background:transparent;box-shadow:none;color:var(--ds-link);padding:0;min-height:0}
.ds-knopf--schlicht:hover{background:transparent;box-shadow:none;color:var(--ds-link-hover);text-decoration:underline}

.ds-knopf--gross{min-height:var(--ds-knopf-hoehe-gross);font-size:var(--ds-t-md);line-height:var(--ds-zh-md)}
.ds-knopf--klein{min-height:var(--ds-knopf-hoehe-klein);padding:4px 8px}
.ds-knopf--symbol{padding:4px;min-width:var(--ds-knopf-hoehe)}
.ds-knopf--voll{display:flex;width:100%}
.ds-knopfgruppe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* --- Karte -------------------------------------------------------------- */
.ds-karte{
  background:var(--ds-flaeche);
  border-radius:var(--ds-r-3);
  box-shadow:var(--ds-schatten-karte);
  color:var(--ds-text);
  overflow:clip;
}
.ds-karte__innen{padding:var(--ds-karte-innen)}
.ds-karte__kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 0}
.ds-karte__abschnitt{padding:var(--ds-karte-innen)}
.ds-karte__abschnitt + .ds-karte__abschnitt{border-top:1px solid var(--ds-rand)}
.ds-karte__fuss{padding:12px 16px;background:var(--ds-flaeche-2);border-top:1px solid var(--ds-rand)}
.ds-stapel{display:flex;flex-direction:column;gap:var(--ds-karte-luecke)}
@media (max-width:489px){.ds-karte{border-radius:0}}
/* Eine Karte in einer Karte wird ein Abschnitt: keine Flaeche, kein
   Schatten, keine Rundung, eine Linie oben (Regel "hoechstens eine Ebene"). */
.ds-karte .ds-karte{background:transparent;box-shadow:none;border-radius:0;border-top:1px solid var(--ds-rand)}

/* --- Flach: ohne Karte auf der Seite (17.09.2026) --------------------------
   WOZU. Bis zum 16.09. lag jede Liste, jede Kennzahl und jeder Leerzustand
   in einer eigenen weissen Karte; jede Seite sah aus wie ein Dashboard aus
   Widgets. Seit dem 17.09. gilt (DESIGN.md, "Karten: hoechstens eine
   Ebene"): Titel, Kennzahlen, Filter, Listen und Leerzustaende liegen frei
   auf dem Grau. Karten bleiben fuer Bereiche, die wirklich zusammengehoeren
   (ein Formularblock, eine Detailspalte, ein Dialog).

   `.ds-flach` setzt die Linien- und Zustandswerte eines Bereichs auf das
   Grau um (--ds-rand ist fuer Weiss gerechnet und verschwindet auf dem
   Grau). Was darin --ds-rand, --ds-rand-2 oder die Hoverflaeche liest,
   stimmt dann von selbst. */
.ds-flach{
  --ds-rand:var(--ds-linie-grund);
  --ds-rand-2:var(--ds-linie-grund-2);
  --ds-flaeche-hover:var(--ds-fuell-transparent-hover);
  --ds-flaeche-gewaehlt:var(--ds-fuell-transparent-aktiv);
}
/* Abschnitt: Ueberschrift als Textzeile mit Linie darunter, kein Kasten. */
.ds-abschnitt{margin:24px 0 0}
.ds-abschnitt:first-child{margin-top:0}
.ds-abschnitt__kopf{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;
  padding:0 0 8px;border-bottom:1px solid var(--ds-linie-grund)}
.ds-abschnitt__titel{font:var(--ds-gew-halbfett) var(--ds-t-lg)/var(--ds-zh-lg) var(--ds-schrift);color:var(--ds-text);margin:0}
.ds-abschnitt__neben{font-size:var(--ds-t-sm);line-height:var(--ds-zh-sm);color:var(--ds-text-2)}
/* Kennzahlen als Leiste: nebeneinander, durch eine senkrechte Linie
   getrennt, ohne Karte je Zahl. */
.ds-kennzahlen{display:flex;flex-wrap:wrap;row-gap:16px;margin:0;padding:0;list-style:none}
.ds-kennzahlen > *{flex:1 1 160px;min-width:0;padding:0 16px;border-left:1px solid var(--ds-linie-grund)}
.ds-kennzahlen > :first-child{padding-left:0;border-left:0}

/* --- Seitenkopf ----------------------------------------------------------- */
.ds-seitenkopf{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  padding:16px 0;
}
.ds-seitenkopf__links{display:flex;align-items:center;gap:8px;min-width:0}
.ds-seitenkopf__zurueck{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--ds-r-2);color:var(--ds-icon);text-decoration:none}
.ds-seitenkopf__zurueck:hover{background:var(--ds-fuell-transparent-hover)}
.ds-seitenkopf__unterzeile{margin:2px 0 0;color:var(--ds-text-2);font-size:var(--ds-t-md);line-height:var(--ds-zh-md)}
.ds-seitenkopf__aktionen{display:flex;align-items:center;gap:8px}
.ds-inhalt{max-width:var(--ds-seite-breite);margin:0 auto;padding:0 24px 32px}
.ds-inhalt--weit{max-width:var(--ds-seite-breite-weit)}

/* --- Abzeichen ---------------------------------------------------------- */
.ds-abzeichen{
  display:inline-flex;align-items:center;gap:2px;
  padding:2px 8px;border-radius:var(--ds-r-2);
  background:var(--ds-fuell-neutral);color:var(--ds-text-2);
  font:var(--ds-gew-mittel) var(--ds-t-sm)/var(--ds-zh-sm) var(--ds-schrift);
  white-space:nowrap;
}
.ds-abzeichen--info{background:var(--ds-info-abz);color:var(--ds-info-text)}
.ds-abzeichen--erfolg{background:var(--ds-erfolg-abz);color:var(--ds-erfolg-text)}
.ds-abzeichen--achtung{background:var(--ds-achtung-abz);color:var(--ds-achtung-text)}
.ds-abzeichen--warn{background:var(--ds-warn-abz);color:var(--ds-warn-text)}
.ds-abzeichen--krit{background:var(--ds-krit-abz);color:var(--ds-krit-text)}
.ds-abzeichen--neu{background:var(--ds-betont-flaeche);color:var(--ds-betont-text)}
.ds-zaehler{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:var(--ds-r-2);box-sizing:border-box;
  background:var(--ds-fuell-neutral);color:var(--ds-text);
  font:var(--ds-gew-mittel) var(--ds-t-sm)/1 var(--ds-schrift);font-variant-numeric:tabular-nums}

/* --- Formular ------------------------------------------------------------- */
.ds-feldgruppe{display:flex;flex-direction:column;gap:4px}
.ds-label{font:var(--ds-gew-normal) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);color:var(--ds-text)}
.ds-hilfe{font-size:var(--ds-t-md);line-height:var(--ds-zh-md);color:var(--ds-text-2);margin:0}
.ds-fehlertext{display:flex;gap:4px;font-size:var(--ds-t-md);line-height:var(--ds-zh-md);color:var(--ds-krit-text);margin:0}
.ds-feld{
  box-sizing:border-box;width:100%;min-height:var(--ds-feld-hoehe);
  padding:6px 12px;
  border:1px solid var(--ds-rand-feld);border-top-color:var(--ds-rand-feld-hover);
  border-radius:var(--ds-r-2);
  background:var(--ds-feld-grund);color:var(--ds-text);
  font:var(--ds-gew-normal) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);
}
.ds-feld::placeholder{color:var(--ds-text-2)}
.ds-feld:hover{border-color:var(--ds-rand-feld-hover);background:var(--ds-feld-grund-hover)}
.ds-feld:focus,.ds-feld:focus-visible{
  outline:2px solid var(--ds-rand-fokus);outline-offset:1px;border-color:var(--ds-rand-feld-aktiv);background:var(--ds-flaeche)}
.ds-feld[aria-invalid="true"]{border-color:var(--ds-krit-text);background:var(--ds-krit-flaeche)}
.ds-feld:disabled{background:var(--ds-fuell-aus);border-color:transparent;color:var(--ds-text-aus)}
textarea.ds-feld{min-height:80px;resize:vertical}
select.ds-feld{appearance:none;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ds-icon) 50%),linear-gradient(135deg,var(--ds-icon) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 12px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.ds-auswahl{accent-color:var(--ds-fuell-primaer);width:16px;height:16px}

/* --- Tabelle (Index) ------------------------------------------------------ */
.ds-tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ds-t-md);line-height:var(--ds-zh-md)}
.ds-tabelle th{
  position:sticky;top:0;z-index:1;
  padding:var(--ds-zelle-innen);text-align:left;white-space:nowrap;
  background:var(--ds-flaeche-2);color:var(--ds-text-2);
  font-weight:var(--ds-gew-mittel);font-size:var(--ds-t-sm);line-height:var(--ds-zh-sm);
  border-bottom:1px solid var(--ds-rand);
}
.ds-tabelle td{padding:var(--ds-zelle-innen);border-bottom:1px solid var(--ds-rand-2);vertical-align:middle;color:var(--ds-text)}
.ds-tabelle tbody tr:last-child td{border-bottom:0}
.ds-tabelle tbody tr:hover td{background:var(--ds-flaeche-hover)}
.ds-tabelle tbody tr[aria-selected="true"] td{background:var(--ds-flaeche-gewaehlt)}
.ds-tabelle .ds-zahl{text-align:right;font-variant-numeric:tabular-nums}
/* Die Tabelle ohne Karte: Kopf ohne Flaeche, Linien fuer das Grau. */
.ds-tabelle--flach th{background:var(--ds-grund);border-bottom-color:var(--ds-linie-grund)}
.ds-tabelle--flach td{border-bottom-color:var(--ds-linie-grund-2)}
.ds-tabelle--flach tbody tr:last-child td{border-bottom:1px solid var(--ds-linie-grund-2)}
.ds-tabelle--flach tbody tr:hover td{background:var(--ds-fuell-transparent-hover)}
.ds-tabelle--flach tbody tr[aria-selected="true"] td{background:var(--ds-fuell-transparent-aktiv)}

/* --- Liste (Ressourcen) --------------------------------------------------- */
.ds-liste{list-style:none;margin:0;padding:0}
.ds-liste > li{padding:12px 16px;border-top:1px solid var(--ds-rand-2)}
.ds-liste > li:first-child{border-top:0}
.ds-liste > li:hover{background:var(--ds-flaeche-hover)}

/* --- Reiter --------------------------------------------------------------- */
.ds-reiter{display:flex;flex-wrap:wrap;gap:4px;padding:8px}
.ds-reiter__eintrag{
  display:inline-flex;align-items:center;gap:4px;height:28px;padding:4px 12px;box-sizing:border-box;
  border:0;border-radius:var(--ds-r-2);background:transparent;color:var(--ds-text-2);
  font:var(--ds-gew-mittel) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);text-decoration:none;cursor:pointer}
.ds-reiter__eintrag:hover{background:var(--ds-fuell-transparent-hover);color:var(--ds-text)}
.ds-reiter__eintrag[aria-selected="true"],.ds-reiter__eintrag.ist-aktiv{background:var(--ds-fuell-transparent-aktiv);color:var(--ds-text)}

/* --- Filterleiste ----------------------------------------------------------- */
.ds-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px}
.ds-suche{position:relative;flex:1 1 240px}
.ds-suche .ds-feld{padding-left:32px;min-height:28px;border-color:var(--ds-rand);background:var(--ds-flaeche)}
.ds-chip{
  display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 8px;box-sizing:border-box;
  border:1px dashed var(--ds-rand-hover);border-radius:var(--ds-r-2);background:transparent;
  color:var(--ds-text-2);font:var(--ds-gew-mittel) var(--ds-t-sm)/var(--ds-zh-sm) var(--ds-schrift);cursor:pointer}
.ds-chip:hover{background:var(--ds-fuell-transparent-hover);color:var(--ds-text)}
.ds-chip[aria-pressed="true"]{border-style:solid;border-color:transparent;background:var(--ds-fuell-leiste);color:var(--ds-text)}

/* --- Navigation (links) ------------------------------------------------- */
.ds-nav{background:var(--ds-nav-grund);width:var(--ds-nav-breite);padding:12px 8px;box-sizing:border-box}
.ds-nav__abschnitt{margin:16px 0 4px;padding:0 8px;color:var(--ds-text-2);font:var(--ds-gew-mittel) var(--ds-t-sm)/var(--ds-zh-sm) var(--ds-schrift)}
.ds-nav__eintrag{
  display:flex;align-items:center;gap:8px;min-height:var(--ds-nav-zeile);padding:4px 8px;box-sizing:border-box;
  border-radius:var(--ds-r-2);color:var(--ds-text);text-decoration:none;
  font:var(--ds-gew-halbfett) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift)}
.ds-nav__eintrag:hover{background:var(--ds-nav-hover)}
.ds-nav__eintrag[aria-current="page"],.ds-nav__eintrag.ist-aktiv{background:var(--ds-nav-gewaehlt);box-shadow:var(--ds-schatten-1)}
.ds-nav__zaehler{margin-left:auto;color:var(--ds-text-2);font-weight:var(--ds-gew-mittel);font-size:var(--ds-t-sm)}

/* --- Kopfleiste ----------------------------------------------------------- */
.ds-kopfleiste{
  display:flex;align-items:center;gap:16px;height:var(--ds-kopfleiste-hoehe);padding:0 16px;box-sizing:border-box;
  background:var(--ds-kopfleiste);color:var(--ds-kopfleiste-text)}
.ds-kopfleiste a{color:var(--ds-kopfleiste-text);text-decoration:none}
.ds-kopfleiste__knopf{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--ds-r-2);
  background:transparent;color:var(--ds-kopfleiste-text);font:var(--ds-gew-mittel) var(--ds-t-md)/1 var(--ds-schrift);cursor:pointer}
.ds-kopfleiste__knopf:hover{background:var(--ds-kopfleiste-hover)}

/* --- Banner (Hinweisband) -------------------------------------------------- */
.ds-banner{
  display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:var(--ds-r-3);
  background:var(--ds-flaeche);box-shadow:var(--ds-schatten-karte);color:var(--ds-text)}
.ds-banner--info{background:var(--ds-info-flaeche);color:var(--ds-info-text);box-shadow:inset 0 0 0 1px var(--ds-info-rand)}
.ds-banner--erfolg{background:var(--ds-erfolg-flaeche);color:var(--ds-erfolg-text);box-shadow:inset 0 0 0 1px var(--ds-erfolg-rand)}
.ds-banner--warn{background:var(--ds-warn-flaeche);color:var(--ds-warn-text);box-shadow:inset 0 0 0 1px var(--ds-warn-rand)}
.ds-banner--krit{background:var(--ds-krit-flaeche);color:var(--ds-krit-text);box-shadow:inset 0 0 0 1px var(--ds-krit-rand)}

/* --- Dialog ----------------------------------------------------------------- */
.ds-schleier{position:fixed;inset:0;background:var(--ds-schleier);z-index:500}
.ds-dialog{
  position:relative;width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 64px);overflow:auto;
  background:var(--ds-flaeche);border-radius:var(--ds-r-4);box-shadow:var(--ds-schatten-dialog);color:var(--ds-text)}
.ds-dialog__kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;background:var(--ds-flaeche-2);border-bottom:1px solid var(--ds-rand)}
.ds-dialog__inhalt{padding:16px}
.ds-dialog__fuss{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--ds-rand)}

/* --- Toast ------------------------------------------------------------------- */
.ds-toast{
  display:inline-flex;align-items:center;gap:12px;max-width:500px;padding:8px 12px;border-radius:var(--ds-r-2);
  background:var(--ds-toast-grund);color:var(--ds-toast-text);box-shadow:var(--ds-schatten-5);
  font:var(--ds-gew-mittel) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift)}
.ds-toast--fehler{background:var(--ds-krit-fuell);color:var(--ds-text-auf-krit)}

/* --- Leerzustand -------------------------------------------------------------- */
.ds-leer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 16px;color:var(--ds-text-2)}
.ds-leer__titel{font:var(--ds-gew-halbfett) var(--ds-t-lg)/var(--ds-zh-lg) var(--ds-schrift);color:var(--ds-text);margin:0}
.ds-leer__text{max-width:400px;margin:0}

/* --- Laden ---------------------------------------------------------------------- */
.ds-skelett{display:block;height:8px;border-radius:var(--ds-r-1);background:var(--ds-fuell-leiste);animation:ds-puls 1.6s ease-in-out infinite}
.ds-skelett--titel{height:28px;max-width:120px}
.ds-skelett + .ds-skelett{margin-top:12px}
@keyframes ds-puls{50%{opacity:.5}}
.ds-kreisel{
  width:20px;height:20px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--ds-fuell-leiste);border-top-color:var(--ds-icon);animation:ds-dreh .8s linear infinite}
@keyframes ds-dreh{to{transform:rotate(360deg)}}
.ds-fortschritt{height:8px;border-radius:var(--ds-r-1);background:var(--ds-fuell-leiste);overflow:hidden}
.ds-fortschritt > span{display:block;height:100%;background:var(--ds-fuell-primaer);border-radius:inherit}
@media (prefers-reduced-motion:reduce){.ds-skelett,.ds-kreisel{animation:none}}

/* --- Kennzahl ------------------------------------------------------------------ */
.ds-kennzahl{display:flex;flex-direction:column;gap:4px}
.ds-kennzahl__name{font:var(--ds-gew-halbfett) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);color:var(--ds-text);
  text-decoration:underline dotted var(--ds-rand-hover);text-underline-offset:4px}
.ds-kennzahl__wert{font:var(--ds-gew-fett) var(--ds-t-h-lg)/var(--ds-zh-h-lg) var(--ds-schrift);letter-spacing:var(--ds-sperr-dicht);font-variant-numeric:tabular-nums;color:var(--ds-text)}
.ds-kennzahl__neben{font-size:var(--ds-t-sm);line-height:var(--ds-zh-sm);color:var(--ds-text-2)}

/* --- Tooltip --------------------------------------------------------------------- */
.ds-tooltip{
  max-width:200px;padding:4px 8px;border-radius:var(--ds-r-2);
  background:var(--ds-flaeche);color:var(--ds-text);box-shadow:var(--ds-schatten-ueber);
  font:var(--ds-gew-normal) var(--ds-t-sm)/var(--ds-zh-sm) var(--ds-schrift)}

/* --- Diagramm ---------------------------------------------------------------------- */
.ds-diagramm text{fill:var(--ds-diagramm-beschriftung);font:var(--ds-gew-normal) var(--ds-t-xs)/1 var(--ds-schrift)}
.ds-diagramm .ds-diagramm__gitter{stroke:var(--ds-diagramm-gitter);stroke-width:1}
.ds-diagramm .ds-diagramm__achse{stroke:var(--ds-diagramm-achse);stroke-width:1}
.ds-legende{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--ds-t-sm);line-height:var(--ds-zh-sm);color:var(--ds-text-2)}
.ds-legende__punkt{display:inline-block;width:12px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}