/* DosenHub Designsystem – wiederverwendbare Komponenten (Phase 1)
 *
 * Alles hier liest ausschließlich Tokens aus tokens.css (keine Rohfarben, keine festen Rundungen). Klassen tragen das Präfix .ds-,
 * damit sie nie mit bestehendem Seiten-CSS kollidieren; bestehende Oberflächen werden in Phase 2 schrittweise darauf umgestellt.
 * Zustände: :hover (nur mit Maus), :active, :focus-visible, :disabled bzw. [aria-disabled="true"].
 * Varianten über Modifier: .ds-btn--primary, .ds-btn--sm … Mehr siehe docs/DESIGN_SYSTEM.md und /design-system/preview.html.
 */

/* ---- Text ---- */
.ds-text { margin: 0; color: var(--ds-text); font: var(--ds-weight-regular) var(--ds-text-md)/var(--ds-leading-normal) var(--ds-font-body); }
.ds-text--secondary { color: var(--ds-text-secondary); }
.ds-text--muted { color: var(--ds-text-muted); }
.ds-text--small { font-size: var(--ds-text-sm); }
.ds-title { margin: 0; color: var(--ds-text); font: var(--ds-weight-bold) var(--ds-text-xl)/var(--ds-leading-tight) var(--ds-font-display); overflow-wrap: anywhere; }
.ds-title--lg { font-size: var(--ds-text-2xl); }
.ds-title--sm { font-size: var(--ds-text-lg); }
.ds-label { margin: 0; color: var(--ds-text-secondary); font: var(--ds-weight-bold) var(--ds-text-2xs)/1.2 var(--ds-font-body); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; }
.ds-link { color: var(--ds-text-link); font-weight: var(--ds-weight-bold); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }
.ds-divider { height: 0; margin: var(--ds-space-3) 0; border: 0; border-top: var(--ds-border-width) solid var(--ds-border); }

/* ---- Buttons ---- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-tap-min); padding: 0 var(--ds-space-4); border: var(--ds-border-width) solid var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface-3); color: var(--ds-text); font: var(--ds-weight-bold) var(--ds-text-md)/1 var(--ds-font-body); text-decoration: none; cursor: pointer; transition: background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), transform var(--ds-duration-fast) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease); -webkit-tap-highlight-color: transparent; }
.ds-btn:active { transform: scale(.97); }
.ds-btn:focus-visible, .ds-icon-btn:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"], .ds-icon-btn:disabled { opacity: .45; cursor: default; transform: none; }
.ds-btn--primary { border-color: var(--ds-border-primary); background: var(--ds-primary-gradient); color: var(--ds-on-primary); box-shadow: var(--ds-shadow-glow); }
.ds-btn--ghost { border-color: transparent; background: transparent; color: var(--ds-text-secondary); }
.ds-btn--danger { border-color: rgb(var(--ds-danger-rgb) / .5); background: rgb(var(--ds-danger-rgb) / .16); color: var(--ds-danger); }
.ds-btn--sm { min-height: 36px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-sm); border-radius: var(--ds-radius-sm); }
.ds-btn--block { display: flex; width: 100%; }
@media (hover: hover) {
  .ds-btn:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--ds-border-primary); background: var(--ds-surface-2); }
  .ds-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ds-primary-gradient); filter: brightness(1.1); }
  .ds-btn--ghost:hover:not(:disabled) { background: rgb(var(--ds-primary-rgb) / .12); color: var(--ds-text); }
  .ds-btn--danger:hover:not(:disabled) { background: rgb(var(--ds-danger-rgb) / .26); }
}
.ds-icon-btn { display: inline-grid; width: var(--ds-tap-min); height: var(--ds-tap-min); place-items: center; border: var(--ds-border-width) solid var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface-3); color: var(--ds-text); font-size: 18px; cursor: pointer; }

/* ---- Karten und Container ---- */
.ds-card { padding: var(--ds-space-4); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface-1); color: var(--ds-text); }
.ds-card--raised { background: var(--ds-surface-2); box-shadow: var(--ds-shadow-md); }
.ds-card--accent { border-color: var(--ds-border-primary); background: linear-gradient(135deg, rgb(var(--ds-primary-rgb) / .16), var(--ds-surface-1) 70%); }
.ds-card--interactive { cursor: pointer; transition: border-color var(--ds-duration) var(--ds-ease), transform var(--ds-duration-fast) var(--ds-ease); }
.ds-card--interactive:active { transform: scale(.985); }
.ds-card--interactive:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
@media (hover: hover) { .ds-card--interactive:hover { border-color: var(--ds-border-primary); } }
.ds-stack { display: grid; gap: var(--ds-space-3); }
.ds-row { display: flex; align-items: center; gap: var(--ds-space-3); }
.ds-list-row { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 56px; padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-2); }

/* ---- Chips und Badges ---- */
.ds-chip { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: 26px; padding: 0 var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border-strong); border-radius: var(--ds-radius-pill); background: rgb(var(--ds-primary-rgb) / .14); color: var(--ds-primary-soft); font: var(--ds-weight-bold) var(--ds-text-xs)/1 var(--ds-font-body); }
.ds-chip--accent { background: rgb(var(--ds-accent-rgb) / .14); color: var(--ds-accent); }
.ds-chip--success { background: rgb(var(--ds-success-rgb) / .14); color: var(--ds-success); }
.ds-chip--warning { background: rgb(var(--ds-warning-rgb) / .14); color: var(--ds-warning); }
.ds-chip--danger { background: rgb(var(--ds-danger-rgb) / .14); color: var(--ds-danger); }
.ds-notice { margin: 0; padding: var(--ds-space-3); border: var(--ds-border-width) solid rgb(var(--ds-info-rgb) / .35); border-radius: var(--ds-radius-md); background: rgb(var(--ds-info-rgb) / .1); color: var(--ds-text); font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); }
.ds-notice--success { border-color: rgb(var(--ds-success-rgb) / .4); background: rgb(var(--ds-success-rgb) / .1); }
.ds-notice--warning { border-color: rgb(var(--ds-warning-rgb) / .4); background: rgb(var(--ds-warning-rgb) / .1); }
.ds-notice--danger { border-color: rgb(var(--ds-danger-rgb) / .45); background: rgb(var(--ds-danger-rgb) / .12); }

/* ---- Eingabefelder und Auswahl ---- */
.ds-field { display: grid; gap: var(--ds-space-1); color: var(--ds-text-secondary); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-bold); }
.ds-input, .ds-select, .ds-textarea { width: 100%; min-height: var(--ds-tap-min); padding: 0 var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface-inset); color: var(--ds-text); font: var(--ds-weight-regular) var(--ds-text-md)/var(--ds-leading-normal) var(--ds-font-body); }
.ds-textarea { min-height: 96px; padding: var(--ds-space-3); resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-muted); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; border-color: var(--ds-border-primary); }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { opacity: .5; }
.ds-input[aria-invalid="true"] { border-color: var(--ds-danger); }
.ds-switch { position: relative; width: 46px; height: 26px; flex: none; margin: 0; appearance: none; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); border: var(--ds-border-width) solid var(--ds-border-strong); cursor: pointer; transition: background var(--ds-duration) var(--ds-ease); }
.ds-switch::after { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; content: ""; border-radius: 50%; background: var(--ds-text); transition: transform var(--ds-duration) var(--ds-ease); }
.ds-switch:checked { background: var(--ds-primary); border-color: transparent; }
.ds-switch:checked::after { transform: translateX(20px); }
.ds-switch:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-switch:disabled { opacity: .45; }
.ds-check { width: 20px; height: 20px; margin: 0; accent-color: var(--ds-primary); }

/* ---- Navigation: Tabs und Segmente ---- */
.ds-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: var(--ds-border-width) solid var(--ds-border); }
.ds-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: var(--ds-space-2) var(--ds-space-1); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ds-text-secondary); font: var(--ds-weight-bold) var(--ds-text-xs)/1.2 var(--ds-font-body); cursor: pointer; }
.ds-tab i { font-size: 19px; }
.ds-tab[aria-selected="true"], .ds-tab.is-active { border-bottom-color: var(--ds-primary); background: rgb(var(--ds-primary-rgb) / .08); color: var(--ds-text); }
.ds-tab:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -3px; }
.ds-segment { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-inset); }
.ds-segment > button { min-height: 36px; padding: 0 var(--ds-space-3); border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-text-secondary); font: var(--ds-weight-bold) var(--ds-text-sm)/1 var(--ds-font-body); cursor: pointer; }
.ds-segment > button[aria-pressed="true"] { background: var(--ds-primary-gradient); color: var(--ds-on-primary); }
.ds-segment > button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; }

/* ---- Dialoge und Sheets ---- */
.ds-dialog { width: min(460px, calc(100vw - 24px)); max-height: min(86dvh, 780px); padding: 0; overflow-y: auto; border: var(--ds-border-width) solid var(--ds-border-primary); border-radius: var(--ds-radius-xl); background: var(--ds-surface-overlay); color: var(--ds-text); box-shadow: var(--ds-shadow-lg); }
.ds-dialog::backdrop { background: var(--ds-overlay-scrim); backdrop-filter: blur(5px); }
.ds-dialog__body { padding: var(--ds-space-5); display: grid; gap: var(--ds-space-3); }
.ds-dialog__foot { display: flex; justify-content: flex-end; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-5) var(--ds-space-5); }
@media (max-width: 640px) { .ds-dialog--sheet { position: fixed; top: auto; bottom: 0; width: 100%; max-width: none; margin: 0; border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0; } }

/* ---- Hilfsklassen ---- */
.ds-surface-page { background-color: var(--ds-page-bg-color); color: var(--ds-text); font-family: var(--ds-font-body); }
.ds-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ds-btn, .ds-card--interactive, .ds-switch, .ds-switch::after { transition: none; } }