/* design.css — Baukasten Basis (S3/T3.2+T3.3). NUR var(--ds-*), keine #hex, keine freien px.
   Zustaende per data-zustand="vorher|laedt|erfolg|fehler|leer" an der Komponente.
   Umbruchpunkte stehen in tokens.css (var() geht in @media nicht). */

.ds-wurzel{background:var(--ds-farbe-grund);color:var(--ds-farbe-text);font-family:var(--ds-schrift-familie);font-size:var(--ds-schrift-m);line-height:var(--ds-zeile-normal);color-scheme:light dark}
:root[data-theme="hell"]{color-scheme:light}
:root:not([data-theme="hell"]){color-scheme:dark}
.ds-wurzel *:focus-visible{outline:none;box-shadow:var(--ds-fokus-ring)}
.ds-ueberschrift{font-size:var(--ds-schrift-xl);font-weight:var(--ds-gewicht-halbfett);line-height:var(--ds-zeile-eng);margin:0 0 var(--ds-abstand-5)}
.ds-klein{font-size:var(--ds-schrift-xs);color:var(--ds-farbe-text-3);letter-spacing:var(--ds-laufweite-normal)}
.ds-raster{display:grid;gap:var(--ds-abstand-6);grid-template-columns:var(--ds-raster-spalten)}

/* ---------- Karte ---------- */
.ds-karte{background:var(--ds-farbe-flaeche);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);border-radius:var(--ds-radius-l);box-shadow:var(--ds-schatten-s);padding:var(--ds-abstand-6);transition:box-shadow var(--ds-dauer-normal) var(--ds-kurve-standard),border-color var(--ds-dauer-normal) var(--ds-kurve-standard)}
.ds-karte[data-klickbar]:hover{box-shadow:var(--ds-schatten-m);border-color:var(--ds-farbe-rahmen-stark);cursor:pointer}
.ds-karte[data-zustand="laedt"]{border-color:var(--ds-farbe-arbeit)}
.ds-karte[data-zustand="erfolg"]{border-color:var(--ds-farbe-gut)}
.ds-karte[data-zustand="fehler"]{border-color:var(--ds-farbe-fehler)}
.ds-karte[data-zustand="leer"]{background:var(--ds-farbe-flaeche-2);border-style:dashed}
.ds-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-abstand-4);margin:0 0 var(--ds-abstand-5)}
.ds-karte-titel{font-size:var(--ds-schrift-l);font-weight:var(--ds-gewicht-halbfett);margin:0}
.ds-karte-kopf>.ds-chip{flex:0 0 auto;white-space:nowrap}

/* ---------- Kennzahl ---------- */
.ds-kennzahl{display:flex;flex-direction:column;gap:var(--ds-abstand-2);background:var(--ds-farbe-flaeche);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);border-radius:var(--ds-radius-l);padding:var(--ds-abstand-6)}
.ds-kennzahl-wert{font-size:var(--ds-schrift-3xl);font-weight:var(--ds-gewicht-fett);line-height:var(--ds-zeile-eng)}
.ds-kennzahl-name{font-size:var(--ds-schrift-xs);text-transform:uppercase;letter-spacing:var(--ds-laufweite-kapital);color:var(--ds-farbe-text-3)}
.ds-kennzahl-trend{font-size:var(--ds-schrift-s);color:var(--ds-farbe-text-2)}
.ds-kennzahl[data-zustand="erfolg"] .ds-kennzahl-wert{color:var(--ds-farbe-gut)}
.ds-kennzahl[data-zustand="fehler"] .ds-kennzahl-wert{color:var(--ds-farbe-fehler)}
.ds-kennzahl[data-zustand="laedt"] .ds-kennzahl-wert{color:transparent;background:var(--ds-farbe-flaeche-3);border-radius:var(--ds-radius-s);width:60%;animation:ds-puls var(--ds-dauer-puls) var(--ds-kurve-standard) infinite}
.ds-kennzahl[data-zustand="leer"] .ds-kennzahl-wert{color:var(--ds-farbe-text-3)}

/* ---------- Chips ---------- */
.ds-chip{display:inline-flex;align-items:center;gap:var(--ds-abstand-2);padding:var(--ds-abstand-1) var(--ds-abstand-4);border-radius:var(--ds-radius-voll);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);background:var(--ds-farbe-flaeche-2);color:var(--ds-farbe-text-2);font-size:var(--ds-schrift-xs);font-weight:var(--ds-gewicht-mittel);line-height:var(--ds-zeile-normal)}
.ds-chip[data-zustand="erfolg"]{background:var(--ds-farbe-gut-hauch);border-color:var(--ds-farbe-gut);color:var(--ds-farbe-gut)}
.ds-chip[data-zustand="laedt"]{background:var(--ds-farbe-arbeit-hauch);border-color:var(--ds-farbe-arbeit);color:var(--ds-farbe-arbeit)}
.ds-chip[data-zustand="fehler"]{background:var(--ds-farbe-fehler-hauch);border-color:var(--ds-farbe-fehler);color:var(--ds-farbe-fehler)}
.ds-chip[data-zustand="leer"]{background:var(--ds-farbe-wartend-hauch);border-color:var(--ds-farbe-wartend);color:var(--ds-farbe-wartend)}
.ds-chip[data-aktiv]{background:var(--ds-farbe-akzent-hauch);border-color:var(--ds-farbe-akzent-rahmen);color:var(--ds-farbe-akzent)}
.ds-chip[data-anbieter="claude"]{background:var(--ds-farbe-anbieter-claude-hauch);color:var(--ds-farbe-anbieter-claude);border-color:var(--ds-farbe-anbieter-claude)}
.ds-chip[data-anbieter="xai"]{background:var(--ds-farbe-anbieter-xai-hauch);color:var(--ds-farbe-anbieter-xai);border-color:var(--ds-farbe-anbieter-xai)}
.ds-chip[data-anbieter="openrouter"]{background:var(--ds-farbe-anbieter-openrouter-hauch);color:var(--ds-farbe-anbieter-openrouter);border-color:var(--ds-farbe-anbieter-openrouter)}
button.ds-chip{cursor:pointer;font-family:inherit}

/* ---------- Knopf ---------- */
.ds-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-abstand-3);min-height:var(--ds-groesse-knopf-m);padding:0 var(--ds-abstand-6);border-radius:var(--ds-radius-m);border:var(--ds-linie-duenn) solid var(--ds-farbe-akzent);background:var(--ds-farbe-akzent);color:var(--ds-farbe-akzent-text);font-family:inherit;font-size:var(--ds-schrift-m);font-weight:var(--ds-gewicht-halbfett);cursor:pointer;transition:background var(--ds-dauer-schnell) var(--ds-kurve-standard),transform var(--ds-dauer-schnell) var(--ds-kurve-standard)}
.ds-knopf:hover{background:var(--ds-farbe-akzent-hover);border-color:var(--ds-farbe-akzent-hover)}
.ds-knopf:active{transform:scale(0.98)}
.ds-knopf[data-art="zweit"]{background:var(--ds-farbe-flaeche);color:var(--ds-farbe-text);border-color:var(--ds-farbe-rahmen-stark)}
.ds-knopf[data-art="zweit"]:hover{background:var(--ds-farbe-flaeche-2)}
.ds-knopf[data-art="still"]{background:transparent;color:var(--ds-farbe-akzent);border-color:transparent}
.ds-knopf[data-art="still"]:hover{background:var(--ds-farbe-akzent-hauch)}
.ds-knopf[data-art="gefahr"]{background:var(--ds-farbe-fehler);border-color:var(--ds-farbe-fehler);color:var(--ds-farbe-text-invers)}
.ds-knopf[data-gross]{min-height:var(--ds-groesse-knopf-l)}
.ds-knopf:disabled,.ds-knopf[aria-disabled="true"]{opacity:var(--ds-deckkraft-aus);cursor:not-allowed;transform:none}
.ds-knopf[data-zustand="laedt"]{pointer-events:none;opacity:var(--ds-deckkraft-leise)}
.ds-knopf[data-zustand="laedt"]::before{content:"";width:var(--ds-groesse-icon-s);height:var(--ds-groesse-icon-s);border:var(--ds-linie-dick) solid currentColor;border-right-color:transparent;border-radius:var(--ds-radius-voll);animation:ds-dreh var(--ds-dauer-puls) linear infinite}
.ds-knopf[data-zustand="erfolg"]{background:var(--ds-farbe-gut);border-color:var(--ds-farbe-gut);color:var(--ds-farbe-text-invers)}
.ds-knopf[data-zustand="erfolg"]::before{content:"\2713"}
.ds-knopf[data-zustand="fehler"]{background:var(--ds-farbe-fehler);border-color:var(--ds-farbe-fehler);color:var(--ds-farbe-text-invers)}
.ds-knopf[data-zustand="fehler"]::before{content:"!"}

/* ---------- Eingabe ---------- */
.ds-feld{display:flex;flex-direction:column;gap:var(--ds-abstand-2)}
.ds-feld-label{font-size:var(--ds-schrift-s);font-weight:var(--ds-gewicht-mittel);color:var(--ds-farbe-text-2)}
.ds-eingabe{width:100%;min-height:var(--ds-hoehe-eingabe-min);padding:var(--ds-abstand-4) var(--ds-abstand-5);background:var(--ds-farbe-flaeche);color:var(--ds-farbe-text);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen-stark);border-radius:var(--ds-radius-m);font-family:inherit;font-size:var(--ds-schrift-m);box-sizing:border-box;transition:border-color var(--ds-dauer-schnell) var(--ds-kurve-standard)}
.ds-eingabe::placeholder{color:var(--ds-farbe-text-3)}
.ds-eingabe:focus{outline:none;border-color:var(--ds-farbe-akzent);box-shadow:var(--ds-fokus-ring)}
.ds-eingabe:disabled{opacity:var(--ds-deckkraft-aus);background:var(--ds-farbe-flaeche-2)}
.ds-eingabe[data-zustand="laedt"]{border-color:var(--ds-farbe-arbeit);background:var(--ds-farbe-arbeit-hauch)}
.ds-eingabe[data-zustand="erfolg"]{border-color:var(--ds-farbe-gut);background:var(--ds-farbe-gut-hauch)}
.ds-eingabe[data-zustand="fehler"],.ds-eingabe[aria-invalid="true"]{border-color:var(--ds-farbe-fehler);background:var(--ds-farbe-fehler-hauch)}
.ds-feld-hinweis{font-size:var(--ds-schrift-xs);color:var(--ds-farbe-text-3)}
.ds-feld[data-zustand="fehler"] .ds-feld-hinweis{color:var(--ds-farbe-fehler)}
.ds-feld[data-zustand="erfolg"] .ds-feld-hinweis{color:var(--ds-farbe-gut)}

/* ---------- Tabelle ---------- */
.ds-tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen-stark);border-radius:var(--ds-radius-l);background:var(--ds-farbe-flaeche);box-shadow:var(--ds-schatten-s)}
.ds-tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ds-schrift-s);line-height:var(--ds-zeile-normal)}
.ds-tabelle th,.ds-tabelle td{padding:var(--ds-abstand-5) var(--ds-abstand-6);text-align:left;vertical-align:top;border-bottom:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen)}
.ds-tabelle th{background:var(--ds-farbe-akzent-hauch);font-size:var(--ds-schrift-xs);font-weight:var(--ds-gewicht-fett);text-transform:uppercase;letter-spacing:var(--ds-laufweite-kapital);border-bottom:var(--ds-linie-dick) solid var(--ds-farbe-akzent);position:sticky;top:0}
.ds-tabelle tbody tr:nth-child(even) td{background:var(--ds-farbe-flaeche-2)}
.ds-tabelle tbody tr:hover td{background:var(--ds-farbe-akzent-hauch)}
.ds-tabelle tbody tr:last-child td{border-bottom:0}
.ds-tabelle td[data-stand="gut"]{color:var(--ds-farbe-gut)}
.ds-tabelle td[data-stand="arbeit"]{color:var(--ds-farbe-arbeit)}
.ds-tabelle td[data-stand="fehler"]{color:var(--ds-farbe-fehler)}
.ds-tabelle td[data-stand="wartend"]{color:var(--ds-farbe-wartend)}
.ds-tabelle-huelle[data-zustand="fehler"]{border-color:var(--ds-farbe-fehler)}
.ds-tabelle-huelle[data-zustand="erfolg"]{border-color:var(--ds-farbe-gut)}

/* ---------- Skelett (laedt) ---------- */
.ds-skelett{display:block;height:var(--ds-abstand-6);width:100%;border-radius:var(--ds-radius-s);background:var(--ds-farbe-flaeche-3);animation:ds-puls var(--ds-dauer-puls) var(--ds-kurve-standard) infinite}
.ds-skelett[data-form="kurz"]{width:40%}
.ds-skelett[data-form="block"]{height:var(--ds-groesse-avatar-l)}
.ds-skelett[data-form="rund"]{width:var(--ds-groesse-avatar-l);height:var(--ds-groesse-avatar-l);border-radius:var(--ds-radius-voll)}
.ds-skelett-gruppe{display:flex;flex-direction:column;gap:var(--ds-abstand-4)}

/* ---------- Leer ---------- */
.ds-leer{display:flex;flex-direction:column;align-items:center;gap:var(--ds-abstand-4);padding:var(--ds-abstand-10) var(--ds-abstand-6);text-align:center;color:var(--ds-farbe-text-2);background:var(--ds-farbe-flaeche-2);border:var(--ds-linie-duenn) dashed var(--ds-farbe-rahmen-stark);border-radius:var(--ds-radius-l)}
.ds-leer-symbol{font-size:var(--ds-schrift-3xl);line-height:var(--ds-zeile-eng);color:var(--ds-farbe-text-3)}
.ds-leer-titel{font-size:var(--ds-schrift-l);font-weight:var(--ds-gewicht-halbfett);color:var(--ds-farbe-text);margin:0}
.ds-leer-text{font-size:var(--ds-schrift-s);margin:0}

/* ---------- Fehler-Banner / Erfolg ---------- */
.ds-banner{display:flex;align-items:flex-start;gap:var(--ds-abstand-4);padding:var(--ds-abstand-5) var(--ds-abstand-6);border-radius:var(--ds-radius-m);border:var(--ds-linie-duenn) solid var(--ds-farbe-fehler);background:var(--ds-farbe-fehler-hauch);color:var(--ds-farbe-fehler);font-size:var(--ds-schrift-s)}
.ds-banner::before{content:"\2716";font-weight:var(--ds-gewicht-fett)}
.ds-banner-text{flex:1;color:var(--ds-farbe-text)}
.ds-banner[data-art="erfolg"]{border-color:var(--ds-farbe-gut);background:var(--ds-farbe-gut-hauch);color:var(--ds-farbe-gut)}
.ds-banner[data-art="erfolg"]::before{content:"\2714"}
.ds-banner[data-art="arbeit"]{border-color:var(--ds-farbe-arbeit);background:var(--ds-farbe-arbeit-hauch);color:var(--ds-farbe-arbeit)}
.ds-banner[data-art="arbeit"]::before{content:"\21BB"}
.ds-banner[hidden]{display:none}

/* ---------- Untere Leiste (390 px, Handy) ---------- */
.ds-leiste{display:var(--ds-leiste-anzeige);position:fixed;left:0;right:0;bottom:0;z-index:var(--ds-ebene-leiste);height:var(--ds-hoehe-tableiste);background:var(--ds-farbe-leiste);border-top:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen)}
.ds-wurzel[data-leiste]{padding-bottom:var(--ds-wurzel-unten)}
.ds-leiste-punkt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-abstand-1);min-height:var(--ds-groesse-knopf-l);border:0;background:transparent;color:var(--ds-farbe-text-3);font-family:inherit;font-size:var(--ds-schrift-2xs);cursor:pointer}
.ds-leiste-punkt[aria-current="page"]{color:var(--ds-farbe-akzent);font-weight:var(--ds-gewicht-halbfett)}
.ds-leiste-symbol{font-size:var(--ds-schrift-xl);line-height:var(--ds-zeile-eng)}

/* ---------- Overlay: Dialog, Toast, Befehlspalette (T3.4, Klassen setzt design.js) ---------- */
.ds-dialog-back{position:fixed;inset:0;z-index:var(--ds-ebene-dialog);display:flex;align-items:center;justify-content:center;padding:var(--ds-abstand-6);background:var(--ds-farbe-schleier);animation:ds-ein var(--ds-dauer-normal) var(--ds-kurve-raus)}
.ds-dialog{display:flex;flex-direction:column;gap:var(--ds-abstand-5);width:100%;max-width:var(--ds-breite-dialog);max-height:var(--ds-hoehe-sheet-voll);overflow:auto;box-sizing:border-box;padding:var(--ds-abstand-7);background:var(--ds-farbe-flaeche);color:var(--ds-farbe-text);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);border-radius:var(--ds-radius-xl);box-shadow:var(--ds-schatten-l);font-family:var(--ds-schrift-familie);font-size:var(--ds-schrift-m);line-height:var(--ds-zeile-normal)}
.ds-dialog:focus{outline:none}
.ds-dialog-titel{margin:0;font-size:var(--ds-schrift-l);font-weight:var(--ds-gewicht-halbfett);line-height:var(--ds-zeile-eng)}
.ds-dialog-inhalt{color:var(--ds-farbe-text-2)}
.ds-dialog-fuss{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--ds-abstand-4)}
.ds-dialog-fuss:empty{display:none}
.ds-toasts{position:fixed;left:0;right:0;bottom:calc(var(--ds-abstand-8) + var(--ds-wurzel-unten));z-index:var(--ds-ebene-meldung);display:flex;flex-direction:column;align-items:center;gap:var(--ds-abstand-4);padding:0 var(--ds-abstand-6);pointer-events:none}
.ds-toast{display:flex;align-items:center;gap:var(--ds-abstand-4);max-width:var(--ds-breite-popup-l);padding:var(--ds-abstand-5) var(--ds-abstand-6);background:var(--ds-farbe-flaeche);color:var(--ds-farbe-text);border:var(--ds-linie-duenn) solid var(--ds-farbe-akzent-rahmen);border-radius:var(--ds-radius-m);box-shadow:var(--ds-schatten-popup);font-family:var(--ds-schrift-familie);font-size:var(--ds-schrift-s);line-height:var(--ds-zeile-normal);pointer-events:auto;animation:ds-ein var(--ds-dauer-normal) var(--ds-kurve-raus)}
.ds-toast::before{content:"\2139";color:var(--ds-farbe-akzent);font-weight:var(--ds-gewicht-fett)}
.ds-toast[data-ds-toast="ok"],.ds-toast[data-ds-toast="erfolg"]{border-color:var(--ds-farbe-gut)}
.ds-toast[data-ds-toast="ok"]::before,.ds-toast[data-ds-toast="erfolg"]::before{content:"\2714";color:var(--ds-farbe-gut)}
.ds-toast[data-ds-toast="fehler"]{border-color:var(--ds-farbe-fehler)}
.ds-toast[data-ds-toast="fehler"]::before{content:"\2716";color:var(--ds-farbe-fehler)}
.ds-palette{display:flex;flex-direction:column;gap:var(--ds-abstand-4)}
.ds-palette-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-abstand-1)}
.ds-palette-eintrag{padding:var(--ds-abstand-4) var(--ds-abstand-5);border-radius:var(--ds-radius-m);color:var(--ds-farbe-text);cursor:pointer}
.ds-palette-eintrag:hover{background:var(--ds-farbe-flaeche-2)}
.ds-palette-eintrag.ds-aktiv{background:var(--ds-farbe-akzent-hauch);color:var(--ds-farbe-akzent);font-weight:var(--ds-gewicht-mittel)}
.ds-palette-leer{padding:var(--ds-abstand-4) var(--ds-abstand-5);color:var(--ds-farbe-text-3)}
.ds-leiste-mehr{display:flex;flex-direction:column;gap:var(--ds-abstand-1)}
.ds-leiste-mehr .ds-leiste-punkt{flex-direction:row;justify-content:flex-start;padding:0 var(--ds-abstand-5);border-radius:var(--ds-radius-m);color:var(--ds-farbe-text);font-size:var(--ds-schrift-m)}
.ds-leiste-mehr .ds-leiste-punkt:hover{background:var(--ds-farbe-flaeche-2)}

/* ---------- Adress-Karte (Baustein T3: Liste je Zweck, Kopierknopf, Zustaende an .ds-karte) ----------
   Ohne @media: Name, Adresse und Knopf brechen per flex-wrap selbst um (390 px: Name oben, darunter Adresse + Knopf). */
.ds-adress-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-abstand-3)}
.ds-adress-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-abstand-3) var(--ds-abstand-5);padding:var(--ds-abstand-4) var(--ds-abstand-5);background:var(--ds-farbe-flaeche-2);border:var(--ds-linie-duenn) solid transparent;border-radius:var(--ds-radius-m);transition:border-color var(--ds-dauer-normal) var(--ds-kurve-standard),background var(--ds-dauer-normal) var(--ds-kurve-standard)}
.ds-adress-name{flex:0 0 var(--ds-breite-spalte-mittel);display:flex;flex-direction:column;gap:var(--ds-abstand-1);font-size:var(--ds-schrift-s);font-weight:var(--ds-gewicht-mittel);color:var(--ds-farbe-text-2)}
.ds-adress-hinweis{font-size:var(--ds-schrift-xs);font-weight:var(--ds-gewicht-normal);color:var(--ds-farbe-text-3)}
.ds-adress-wert{flex:1 1 var(--ds-breite-spalte-stand);min-width:0;font-family:var(--ds-schrift-mono);font-size:var(--ds-schrift-s);color:var(--ds-farbe-text);overflow-wrap:anywhere;user-select:all}
.ds-adress-zeile .ds-knopf{flex:0 0 auto;min-height:var(--ds-groesse-knopf-s);padding:0 var(--ds-abstand-5);font-size:var(--ds-schrift-s)}
.ds-adress-zeile[data-zustand="erfolg"]{border-color:var(--ds-farbe-gut);background:var(--ds-farbe-gut-hauch)}
.ds-adress-zeile[data-zustand="fehler"]{border-color:var(--ds-farbe-fehler);background:var(--ds-farbe-fehler-hauch)}
.ds-adressen .ds-leer-text{color:var(--ds-farbe-text-2)}

@keyframes ds-puls{0%,100%{opacity:1}50%{opacity:var(--ds-deckkraft-leise)}}
@keyframes ds-dreh{to{transform:rotate(360deg)}}
@keyframes ds-ein{from{opacity:0}to{opacity:1}}

/* Tabellenspalten-Breiten (Tokens) */
.ds-tabelle th[data-breite="schmal"],.ds-tabelle td[data-breite="schmal"]{width:var(--ds-breite-spalte-schmal)}
.ds-tabelle th[data-breite="mittel"],.ds-tabelle td[data-breite="mittel"]{width:var(--ds-breite-spalte-mittel)}
.ds-tabelle th[data-breite="stand"],.ds-tabelle td[data-breite="stand"]{width:var(--ds-breite-spalte-stand)}