/* ── Bauteile ── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:15px;line-height:1.2;padding:13px 22px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.ds-btn:hover{transform:translateY(-1px)}
.ds-btn:active{transform:translateY(0)}
.ds-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.ds-btn--sm{font-size:13px;padding:9px 15px;gap:6px}
.ds-btn--lg{font-size:17px;padding:16px 28px}
.ds-btn--primary{background:var(--action-primary);color:var(--action-primary-fg);box-shadow:0 6px 18px -8px rgba(29,77,255,.8)}
.ds-btn--primary:hover{background:var(--action-primary-hover);box-shadow:0 10px 22px -8px rgba(29,77,255,.9)}
.ds-btn--primary:active{background:var(--action-primary-active)}
.ds-btn--secondary{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-default);box-shadow:var(--elev-1)}
.ds-btn--secondary:hover{border-color:var(--border-strong)}
.ds-btn--secondary:active{background:var(--surface-sunken)}
.ds-btn--ghost{background:transparent;color:var(--text-primary)}
.ds-btn--ghost:hover{background:var(--surface-sunken)}
.ds-btn--ghost:active{background:var(--border-subtle)}
.ds-btn--accent{background:var(--koralle-basis);color:var(--n-900);font-weight:var(--fw-bold)}
.ds-btn--accent:hover{background:var(--koralle-tief);color:var(--n-0)}
.ds-btn--block{width:100%}
.ds-btn__spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:ds-spin .7s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ds-btn__spin{animation-duration:2.4s}}

.ds-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;color:inherit}
.ds-icon svg{width:100%;height:100%;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.ds-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:12px;line-height:1;padding:7px 11px;border-radius:var(--radius-sm);border:1px solid transparent}
.ds-badge--solid{border-radius:var(--radius-pill);font-weight:var(--fw-bold);padding:8px 13px;color:var(--n-900)}
.ds-badge--solid.is-azur{background:var(--azur-500);color:var(--n-0)}
.ds-badge--solid.is-aqua{background:var(--aqua-basis)}
.ds-badge--solid.is-gruen{background:var(--gruen-basis)}
.ds-badge--solid.is-amber{background:var(--amber-basis)}
.ds-badge--solid.is-koralle{background:var(--koralle-basis)}
.ds-badge--solid.is-magenta{background:var(--magenta-basis)}
.ds-badge--soft.is-success{background:var(--success-surface);color:var(--success-text);border-color:color-mix(in srgb,var(--success-basis) 34%,transparent)}
.ds-badge--soft.is-warning{background:var(--warning-surface);color:var(--warning-text);border-color:color-mix(in srgb,var(--warning-basis) 40%,transparent)}
.ds-badge--soft.is-error{background:var(--error-surface);color:var(--error-text);border-color:color-mix(in srgb,var(--error-basis) 34%,transparent)}
.ds-badge--soft.is-info{background:var(--info-surface);color:var(--info-text);border-color:var(--azur-200)}
.ds-badge--soft.is-neutral{background:var(--surface-sunken);color:var(--text-secondary);border-color:var(--border-default)}
.ds-badge__dot{width:8px;height:8px;border-radius:3px;flex:none}

.ds-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.ds-card--raised{box-shadow:var(--elev-2)}
.ds-card--interactive{cursor:pointer}
.ds-card--interactive:hover{border-color:var(--border-strong);box-shadow:var(--elev-3)}
.ds-card--interactive:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ds-card--accent{border-top:3px solid var(--azur-500)}
.ds-card__head{padding:20px 24px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:16px}
.ds-card__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:20px;letter-spacing:-.03em;line-height:1.15;margin:0}
.ds-card__body{padding:24px}
.ds-card__foot{padding:16px 24px;border-top:1px solid var(--border-subtle);background:var(--surface-sunken);display:flex;gap:10px;align-items:center}

.ds-field{display:flex;flex-direction:column;gap:7px}
.ds-field__label{font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:12px;color:var(--text-secondary)}
.ds-field__hint{font-size:12.5px;color:var(--text-secondary);line-height:1.45}
.ds-field__error{font-size:12.5px;color:var(--error-text);font-weight:var(--fw-medium);line-height:1.45}
.ds-input,.ds-select{font-family:var(--font-text);font-size:14px;line-height:1.3;color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:11px 13px;box-shadow:var(--elev-1);width:100%;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.ds-input::placeholder{color:var(--n-400)}
.ds-input:hover,.ds-select:hover{border-color:var(--border-strong)}
.ds-input:focus,.ds-select:focus,.ds-input.is-focus,.ds-select.is-focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.ds-input[disabled],.ds-select[disabled]{background:var(--surface-sunken);color:var(--text-secondary);cursor:not-allowed;box-shadow:none}
.ds-input.is-error,.ds-select.is-error{border-color:var(--error-basis);box-shadow:0 0 0 3px color-mix(in srgb,var(--error-basis) 22%,transparent)}
.ds-select{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ds-input--prefixed{display:flex;align-items:center;gap:9px}
.ds-input--prefixed .ds-icon{color:var(--text-secondary)}

.ds-table{width:100%;border-collapse:collapse;font-family:var(--font-text)}
.ds-table th{text-align:left;font-weight:var(--fw-bold);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary);padding:0 0 11px;border-bottom:1px solid var(--border-default)}
.ds-table td{font-weight:var(--fw-medium);font-size:13.5px;line-height:1.4;color:var(--text-primary);padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table--hover tbody tr{transition:background var(--dur-fast) var(--ease-out)}
.ds-table--hover tbody tr:hover{background:var(--surface-sunken)}
.ds-table th:not(:first-child),.ds-table td:not(:first-child){padding-left:14px}
.ds-table__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--text-secondary);white-space:nowrap}
.ds-table--inset th{padding-left:20px}.ds-table--inset th:first-child,.ds-table--inset td:first-child{padding-left:24px}
.ds-table__dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:9px;vertical-align:-1px}

.ds-code{background:var(--n-900);color:#E6E9EE;border-radius:var(--radius-lg);overflow:hidden;font-family:var(--font-mono);font-size:13px;line-height:1.65}
.ds-code__head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9BA3B0;font-family:var(--font-text);font-weight:var(--fw-bold)}
.ds-code__body{padding:16px 18px;overflow-x:auto;margin:0;white-space:pre}
.ds-code .tok-key{color:#94AEFF}.ds-code .tok-str{color:#4BE79A}.ds-code .tok-num{color:#FFCF52}.ds-code .tok-com{color:#69717F}

.ds-nav{display:flex;align-items:center;gap:6px;padding:18px 0;border-bottom:1px solid var(--border-default)}
.ds-nav__brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:var(--fw-black);letter-spacing:-.045em;font-size:21px;color:var(--text-primary);margin-right:26px;text-decoration:none}
.ds-nav__brand img{height:22px;width:auto;display:block}
.ds-nav__link{font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:14.5px;color:var(--text-secondary);padding:9px 13px;border-radius:var(--radius-sm);text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ds-nav__link:hover{background:var(--surface-sunken);color:var(--text-primary)}
.ds-nav__link.is-active{color:var(--text-primary);background:var(--surface-sunken)}
.ds-nav__link:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ds-nav__spacer{flex:1}
.ds-band{display:flex;height:6px}.ds-band i{flex:1}

.ds-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-default)}
.ds-tab{font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:14px;color:var(--text-secondary);padding:12px 16px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ds-tab:hover{color:var(--text-primary)}
.ds-tab.is-active{color:var(--text-primary);border-bottom-color:var(--azur-500)}
.ds-tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.ds-tab[disabled]{opacity:.4;cursor:not-allowed}

.ds-dialog__scrim{position:fixed;inset:0;background:rgba(11,13,18,.44);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:200;overflow-y:auto}
.ds-dialog{background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--elev-4);width:100%;max-width:460px;overflow:hidden}
.ds-dialog__head{padding:24px 26px 0}
.ds-dialog__kicker{font-family:var(--font-text);font-weight:var(--fw-bold);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}
.ds-dialog__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:23px;letter-spacing:-.035em;line-height:1.12;margin:0 0 9px}
.ds-dialog__body{padding:0 26px 22px;font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.ds-dialog__foot{padding:16px 26px;border-top:1px solid var(--border-subtle);background:var(--surface-sunken);display:flex;gap:10px;justify-content:flex-end}

.ds-toast{display:flex;align-items:flex-start;gap:12px;background:var(--surface-raised);border:1px solid var(--border-default);border-left-width:3px;border-radius:var(--radius-md);box-shadow:var(--elev-3);padding:14px 16px;max-width:420px}
.ds-toast.is-success{border-left-color:var(--gruen-basis)}
.ds-toast.is-warning{border-left-color:var(--amber-basis)}
.ds-toast.is-error{border-left-color:var(--koralle-basis)}
.ds-toast.is-info{border-left-color:var(--azur-500)}
.ds-toast__title{font-family:var(--font-text);font-weight:var(--fw-bold);font-size:14px;color:var(--text-primary);line-height:1.35}
.ds-toast__msg{font-size:13px;line-height:1.5;color:var(--text-secondary);margin-top:3px}
.ds-toast__close{background:none;border:0;color:var(--text-secondary);cursor:pointer;padding:2px;border-radius:var(--radius-xs);margin-left:auto;flex:none}
.ds-toast__close:hover{color:var(--text-primary);background:var(--surface-sunken)}

/* Farbmarke — der einzige Ort, an dem Spektrumfarbe als Fläche auftritt.
   Farbiger Text existiert im System nicht: Farbe sitzt in der Marke, Schrift bleibt Tinte. */
.ds-marke{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0;border-radius:var(--radius-sm)}
.ds-marke--sm{width:22px;height:22px;border-radius:var(--radius-xs)}
.ds-marke--md{width:30px;height:30px;border-radius:var(--radius-sm)}
.ds-marke--lg{width:40px;height:40px;border-radius:var(--radius-md)}
.ds-marke--xl{width:52px;height:52px;border-radius:var(--radius-lg)}
.ds-marke--rund{border-radius:50%}
.ds-marke--plakette{border-radius:var(--radius-pill);width:auto;min-width:30px;padding:0 11px}
.ds-marke__z{font:700 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ds-marke--sm .ds-marke__z{font-size:10.5px}
.ds-marke--lg .ds-marke__z{font-size:15px}
.ds-marke--xl .ds-marke__z{font-size:19px}
/* Nur Azur trägt Weiß (5,90:1). Alle übrigen Basistöne tragen Tinte:
   Aqua 9,26 · Grün 9,65 · Amber 11,21 · Koralle 5,72 · Magenta 5,23. */
.ds-marke.is-azur{background:var(--azur-500);color:var(--n-0)}
.ds-marke.is-aqua{background:var(--aqua-basis);color:var(--n-900)}
.ds-marke.is-gruen{background:var(--gruen-basis);color:var(--n-900)}
.ds-marke.is-amber{background:var(--amber-basis);color:var(--n-900)}
.ds-marke.is-koralle{background:var(--koralle-basis);color:var(--n-900)}
.ds-marke.is-magenta{background:var(--magenta-basis);color:var(--n-900)}

/* Lucide direkt in einer Marke (statisches HTML ohne React-Wrapper) */
.ds-marke > svg{width:58%;height:58%;stroke-width:1.5}