:root {
  --ds-color-bg-page: #ffffff;
  --ds-color-bg-surface: #fafafa;
  --ds-color-bg-elevated: #ffffff;
  --ds-color-bg-inverse: #18181b;
  --ds-color-bg-overlay: rgba(24, 24, 27, 0.55);
  --ds-color-text-primary: #18181b;
  --ds-color-text-secondary: #52525b;
  --ds-color-text-muted: #a1a1aa;
  --ds-color-text-inverse: #ffffff;
  --ds-color-text-on-primary: #ffffff;
  --ds-color-text-link: #1e56d6;
  --ds-color-border-subtle: #e4e4e7;
  --ds-color-border-default: #d4d4d8;
  --ds-color-border-strong: #a1a1aa;
  --ds-color-border-focus: #2f6fed;
  --ds-color-primary-500: #2f6fed;
  --ds-color-primary-600: #1e56d6;
  --ds-color-primary-700: #1743a8;
  --ds-color-secondary-500: #10b981;
  --ds-color-secondary-600: #059669;
  --ds-color-secondary-700: #047857;
  --ds-color-success: #16a34a;
  --ds-color-warning: #d97706;
  --ds-color-danger: #dc2626;
  --ds-color-info: #0ea5e9;

  --ds-font-heading: "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --ds-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ds-radius-sm: 0.25rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 1rem;
  --ds-radius-full: 9999px;

  --ds-shadow-sm: 0 2px 6px rgba(24, 24, 27, 0.08);
  --ds-shadow-md: 0 8px 24px -12px rgba(24, 24, 27, 0.18);
  --ds-shadow-lg: 0 16px 40px -12px rgba(24, 24, 27, 0.22);
  --ds-shadow-focus-ring: 0 0 0 3px rgba(47, 111, 237, 0.35);

  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;

  --ds-transition-colors: color 120ms cubic-bezier(0.4, 0, 0.2, 1), background-color 120ms cubic-bezier(0.4, 0, 0.2, 1), border-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-transform: transform 200ms cubic-bezier(0.2, 0, 0, 1);
  --ds-transition-shadow: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1100;
  --ds-z-modal: 1300;

  --ds-icon-size-md: 1.25rem;
  --ds-grid-gap: 1.5rem;
  --ds-grid-min-col: 16rem;
}

/* Barrierearmer, sichtbarer Focus-Ring für alle interaktiven ds-Elemente */
.ds-button:focus-visible,
.ds-input:focus-visible,
.ds-textarea:focus-visible,
.ds-select:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus-ring);
  border-color: var(--ds-color-border-focus);
}

/* Container */
.ds-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ds-space-4);
  box-sizing: border-box;
}
.ds-container--sm { max-width: 100%; }
.ds-container--md { max-width: 720px; }
.ds-container--lg { max-width: 960px; }
.ds-container--xl { max-width: 1140px; }

/* Grid */
.ds-grid {
  display: grid;
  gap: var(--ds-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--ds-grid-min-col), 1fr));
}
.ds-grid--fixed-2 { grid-template-columns: repeat(1, 1fr); }
.ds-grid--fixed-3 { grid-template-columns: repeat(1, 1fr); }
.ds-grid--fixed-4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
  .ds-grid--fixed-2 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid--fixed-3 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid--fixed-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ds-grid--fixed-3 { grid-template-columns: repeat(3, 1fr); }
  .ds-grid--fixed-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Button */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-weight: 600;
  border-radius: var(--ds-radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--ds-transition-colors), var(--ds-transition-transform), var(--ds-transition-shadow);
}
.ds-button:active { transform: scale(0.98); }
.ds-button:disabled,
.ds-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; transform: none; }

.ds-button--sm { padding: var(--ds-space-2) var(--ds-space-4); font-size: 0.875rem; }
.ds-button--md { padding: var(--ds-space-3) var(--ds-space-6); font-size: 1rem; }
.ds-button--lg { padding: var(--ds-space-4) var(--ds-space-8); font-size: 1.125rem; }

.ds-button--primary { background: var(--ds-color-primary-600); color: var(--ds-color-text-on-primary); }
.ds-button--primary:hover:not(:disabled) { background: var(--ds-color-primary-700); box-shadow: var(--ds-shadow-md); }

.ds-button--secondary { background: var(--ds-color-secondary-600); color: var(--ds-color-text-on-primary); }
.ds-button--secondary:hover:not(:disabled) { background: var(--ds-color-secondary-700); box-shadow: var(--ds-shadow-md); }

.ds-button--outline { background: transparent; color: var(--ds-color-primary-600); border-color: var(--ds-color-border-default); }
.ds-button--outline:hover:not(:disabled) { border-color: var(--ds-color-primary-600); background: var(--ds-color-bg-surface); }

.ds-button--ghost { background: transparent; color: var(--ds-color-text-primary); }
.ds-button--ghost:hover:not(:disabled) { background: var(--ds-color-bg-surface); }

/* Card */
.ds-card {
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: var(--ds-transition-shadow), var(--ds-transition-transform);
}
.ds-card--padding-sm { padding: var(--ds-space-4); }
.ds-card--padding-md { padding: var(--ds-space-6); }
.ds-card--padding-lg { padding: var(--ds-space-8); }
.ds-card--hoverable:hover { box-shadow: var(--ds-shadow-lg); transform: translateY(-2px); }

/* Formularelemente */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-label { font-family: var(--ds-font-body); font-size: 0.875rem; font-weight: 600; color: var(--ds-color-text-primary); }
.ds-field-hint { font-size: 0.8125rem; color: var(--ds-color-text-muted); }
.ds-field-error { font-size: 0.8125rem; color: var(--ds-color-danger); }

.ds-input,
.ds-textarea,
.ds-select {
  font-family: var(--ds-font-body);
  font-size: 1rem;
  color: var(--ds-color-text-primary);
  background: var(--ds-color-bg-page);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  transition: var(--ds-transition-colors), var(--ds-transition-shadow);
}
.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover { border-color: var(--ds-color-border-strong); }
.ds-input--invalid,
.ds-textarea--invalid,
.ds-select--invalid { border-color: var(--ds-color-danger); }

/* Badge */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  font-weight: 600;
  line-height: 1;
}
.ds-badge--sm { padding: 0.25rem 0.625rem; font-size: 0.75rem; }
.ds-badge--md { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.ds-badge--neutral { background: var(--ds-color-bg-surface); color: var(--ds-color-text-secondary); }
.ds-badge--primary { background: color-mix(in srgb, var(--ds-color-primary-500) 15%, white); color: var(--ds-color-primary-700); }
.ds-badge--success { background: color-mix(in srgb, var(--ds-color-success) 15%, white); color: var(--ds-color-success); }
.ds-badge--warning { background: color-mix(in srgb, var(--ds-color-warning) 15%, white); color: var(--ds-color-warning); }
.ds-badge--danger { background: color-mix(in srgb, var(--ds-color-danger) 15%, white); color: var(--ds-color-danger); }

/* Call-to-Action */
.ds-cta {
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-8);
  background: var(--ds-color-bg-inverse);
  color: var(--ds-color-text-inverse);
}

/* Icon */
.ds-icon { display: inline-flex; color: currentColor; }
.ds-icon--sm { width: 1rem; height: 1rem; }
.ds-icon--md { width: 1.25rem; height: 1.25rem; }
.ds-icon--lg { width: 1.5rem; height: 1.5rem; }
.ds-icon--xl { width: 2rem; height: 2rem; }

/* Animation */
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ds-animate-fade-in { animation: ds-fade-in var(--ds-transition-transform); }

@media (prefers-reduced-motion: reduce) {
  .ds-button, .ds-card, .ds-input, .ds-textarea, .ds-select, .ds-animate-fade-in {
    transition: none;
    animation: none;
  }
}