/* ==========================================================================
   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)}

/* --- Zustandswort und Zaehler (19.09.2026) --------------------------------
   Das Abzeichen des Hauses hatte sechs Pastellflaechen. Sie sind weg, und
   zwar hier an der Wurzel: jede Seite, die .ds-abzeichen benutzt, erbt die
   neue Regel.

       Farbe nie als Flaeche. Nur im Wort. Und nur, wo etwas blockiert.

   Also traegt allein --krit einen Ton. Achtung und Warnung tragen Gewicht,
   Erfolg und Info bleiben still: "alles in Ordnung" braucht keine Farbe,
   sonst faerbt sich der Normalfall und die Ausnahme geht darin unter.
   Der Zaehler ist eine Zahl im Text, kein Kreis -- tabellarische Ziffern,
   damit Spalten untereinander fluchten. */
.ds-abzeichen{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--ds-text-2);
  font:var(--ds-gew-mittel) var(--ds-t-sm)/var(--ds-zh-sm) var(--ds-schrift);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.ds-abzeichen--info{color:var(--ds-text-2)}
.ds-abzeichen--erfolg{color:var(--ds-text-2);font-weight:var(--ds-gew-normal)}
.ds-abzeichen--achtung{color:var(--ds-text)}
.ds-abzeichen--warn{color:var(--ds-text)}
.ds-abzeichen--krit{color:var(--ds-krit-text)}
.ds-abzeichen--neu{color:var(--ds-text);font-weight:var(--ds-gew-halbfett)}
.ds-zaehler{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ds-text-2);
  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)}

/* Der Rueckweg in der Kopfleiste: links, vor dem Logo, auf jeder Seite
   ausserhalb einer Uebernahme (Profil, Postfach, Drive, casavi, Admin).
   Er stand bis zum 18.09.2026 nur in admin.css und fehlte damit genau den
   Seiten, die ohne Browser-Zurueck keinen Weg zurueck hatten. Die Regel
   `.zurueck + .topbar-brand` haelt das Logo links neben dem Rueckweg,
   obwohl die Leiste ihre Kinder sonst auseinanderzieht.

   Alles haengt an `.ds-kopfleiste`, weil templates/login.html dieselbe
   Klasse fuer einen Verweis auf heller Flaeche benutzt: die helle Schrift
   der dunklen Leiste waere dort unlesbar. */
.ds-kopfleiste .zurueck{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;flex:none;
  border-radius:var(--ds-r-2);color:var(--ds-kopfleiste-text);
  font:var(--ds-gew-mittel) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);
  text-decoration:none;white-space:nowrap}
.ds-kopfleiste .zurueck:hover{background:var(--ds-kopfleiste-hover);color:var(--ds-kopfleiste-text);text-decoration:none}
.ds-kopfleiste .zurueck:focus-visible{outline:2px solid var(--ds-rand-fokus);outline-offset:1px}
.ds-kopfleiste .zurueck + .topbar-brand{margin-right:auto;margin-left:0}
/* Schmale Bildschirme: der Pfeil bleibt, sein Wort weicht -- die Breite
   gehoert der Navigation rechts. */
@media (max-width:700px){
  .ds-kopfleiste .zurueck-text{display:none}
  .ds-kopfleiste .zurueck{padding:0 8px}
}

/* --- 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}}

/* Gehirn-Lader: das Gehirn aus dem Logo als Gefaess, das sich mit Wasser
   fuellt, fuer laengere Vorgaenge (Hochladen, Pruefen, Export).
   Drei Schichten, alle vom Pegel --lader-pegel (0 bis 1) gesteuert:
   - .ds-lader selbst ist auf den Umriss maskiert (icons/gehirn-umriss.svg);
   - ::before ist das Wasser im Umriss, getoent, mit laufender Welle oben;
   - ::after sind die Linien des Gehirns (icons/gehirn.svg), unter dem
     Pegel in Markenblau, darueber in der Spur.
   Linien und Spur sind die Werte des Fortschritts (--ds-marke-leiste auf
   --ds-fuell-leiste: 4,1:1 hell, 3,5:1 dunkel); das Wasser ist nur Toenung
   derselben Farbe und traegt keine Aussage allein.
   Ohne Zahl steigt der Pegel bis oben und sinkt wieder; mit Zahl (Klasse
   --wert, Variable --wert 0 bis 100) steht er dort, die Welle laeuft weiter.
   Bewegungsarm steht alles; der Lauf ohne Zahl wird Schraffur, nicht ein
   volles Gehirn, das wie "fertig" aussaehe. Skript dazu: static/lader.js. */
@property --lader-pegel{syntax:"<number>";inherits:true;initial-value:0}
.ds-lader{
  --lader-welle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q10 0 20 4T40 4V8H0Z'/%3E%3C/svg%3E");
  --lader-hoehe:calc(var(--lader-pegel) * 100%);
  position:relative;display:inline-block;flex:none;vertical-align:middle;overflow:hidden;
  width:40px;aspect-ratio:93.1/100;
  -webkit-mask:url("icons/gehirn-umriss.svg") center/contain no-repeat;mask:url("icons/gehirn-umriss.svg") center/contain no-repeat;
  animation:ds-lader-pegel 3.2s ease-in-out infinite}
.ds-lader::before{
  content:"";position:absolute;left:0;width:100%;height:112%;
  top:calc(100% - var(--lader-hoehe) - 6%);
  background:var(--ds-marke-leiste);opacity:.28;
  -webkit-mask:var(--lader-welle) 0 0/40% 12% repeat-x,linear-gradient(#000 0 0) 0 100%/100% 94% no-repeat;
  mask:var(--lader-welle) 0 0/40% 12% repeat-x,linear-gradient(#000 0 0) 0 100%/100% 94% no-repeat;
  animation:ds-lader-welle 1.4s linear infinite}
.ds-lader::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--ds-marke-leiste) var(--lader-hoehe),var(--ds-fuell-leiste) var(--lader-hoehe));
  -webkit-mask:url("icons/gehirn.svg") center/contain no-repeat;mask:url("icons/gehirn.svg") center/contain no-repeat}
@keyframes ds-lader-welle{
  from{-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%}
  to{-webkit-mask-position:100% 0,0 100%;mask-position:100% 0,0 100%}}
@keyframes ds-lader-pegel{
  0%{--lader-pegel:0}
  45%,55%{--lader-pegel:1.06}
  100%{--lader-pegel:0}}
.ds-lader--wert{
  animation:none;transition:--lader-pegel var(--ds-zeit-lang) ease-out;
  --lader-pegel:calc(clamp(0, var(--wert, 0), 100) / 100)}
.ds-lader--klein{width:20px}
.ds-lader--gross{width:96px}
.ds-lader-feld{display:inline-flex;align-items:center;gap:8px;color:var(--ds-text-2);
  font:var(--ds-gew-normal) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift)}
.ds-lader-feld--mittig{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:40px 16px;text-align:center}
@media (prefers-reduced-motion:reduce){
  .ds-lader,.ds-lader::before{animation:none;transition:none}
  .ds-lader:not(.ds-lader--wert)::before{content:none}
  .ds-lader:not(.ds-lader--wert)::after{
    background:repeating-linear-gradient(135deg,var(--ds-marke-leiste) 0 2px,var(--ds-fuell-leiste) 2px 5px)}}
@media (forced-colors:active){
  .ds-lader{forced-color-adjust:none}
  .ds-lader::before{content:none}
  .ds-lader::after{background:linear-gradient(to top,CanvasText var(--lader-hoehe),GrayText var(--lader-hoehe))}}

/* --- 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}