/* KDP Pro — UI Kit v2 (Komponenten-Bibliothek)
 * Geladen nach kdp.css. Nutzt ausschließlich Tokens aus tokens.css.
 * Additive, neue Klassen (kdp-*) — kollidiert nicht mit Legacy-Klassen.
 */

/* ── Reduced motion (global, additiv) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Button ───────────────────────────────────────────────────── */
.kdp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  font: 600 var(--text-base)/1 'Inter', system-ui, sans-serif;
  border: 1px solid transparent; border-radius: var(--radius-round);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
}
.kdp-btn:active { transform: translateY(1px); }
.kdp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--state-focus-ring); }
.kdp-btn[disabled], .kdp-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.kdp-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.kdp-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: kdp-spin .7s linear infinite; color: var(--neutral-0);
}
.kdp-btn__label, .kdp-btn__icon { position: relative; z-index: 1; }
.kdp-btn--primary {
  position: relative; overflow: hidden;
  background: linear-gradient(177deg, var(--accent-300) 0%, var(--accent-500) 52%, var(--accent-600) 100%);
  color: #fff; border-color: rgba(160,123,45,0.55);
  text-shadow: 0 1px 1px rgba(120,90,20,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),
              inset 0 -1px 0 rgba(120,90,20,0.25),
              var(--elev-1),
              0 2px 10px rgba(201,162,77,0.28);
}
/* Specular sheen — dezenter Licht-Sweep beim Hover */
.kdp-btn--primary::before {
  content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(-170%) skewX(-18deg); pointer-events: none; z-index: 0;
  transition: transform 0.7s var(--ease-emphasized);
}
.kdp-btn--primary:hover {
  background: linear-gradient(177deg, var(--accent-200) 0%, var(--accent-400) 52%, var(--accent-500) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -1px 0 rgba(120,90,20,0.22),
              var(--elev-2),
              0 6px 18px rgba(201,162,77,0.45);
}
.kdp-btn--primary:hover::before { transform: translateX(330%) skewX(-18deg); }
.kdp-btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.kdp-btn--ghost:hover { background: var(--state-hover); color: var(--text-primary); }
.kdp-btn--subtle { background: var(--surface-sunken); color: var(--text-primary); border-color: var(--border-soft); }
.kdp-btn--subtle:hover { background: var(--state-hover); }
.kdp-btn--danger { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }
.kdp-btn--danger:hover { background: rgba(220,38,38,0.14); }
.kdp-btn--sm { min-height: 36px; padding: 7px 13px; font-size: var(--text-sm); }
.kdp-btn--lg { min-height: 52px; padding: 14px 28px; font-size: var(--text-md); }
.kdp-btn--full { width: 100%; }
.kdp-btn__icon { display: inline-flex; }
@keyframes kdp-spin { to { transform: rotate(360deg); } }

/* ── Badge ────────────────────────────────────────────────────── */
.kdp-badge {
  display: inline-flex; align-items: center; padding: 2px 10px;
  font: 600 var(--text-xs)/1.6 'Inter', system-ui, sans-serif;
  border-radius: var(--radius-round); border: 1px solid transparent;
}
.kdp-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); border-color: var(--border-soft); }
.kdp-badge--gold { background: var(--accent-tint); color: var(--accent-600); border-color: rgba(201,162,77,0.22); }
.kdp-badge--ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.kdp-badge--warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.kdp-badge--err { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }

/* ── Card ─────────────────────────────────────────────────────── */
.kdp-card { background: var(--surface-2); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.kdp-card--elev-1 { box-shadow: var(--elev-1); }
.kdp-card--elev-2 { box-shadow: var(--elev-2); }
.kdp-card--elev-3 { box-shadow: var(--elev-3); }
.kdp-card--elev-4 { box-shadow: var(--elev-4); }
.kdp-card--soft { background: var(--surface-sunken); }
.kdp-card--accent { background: linear-gradient(180deg, var(--accent-50), var(--surface-2)); border-color: rgba(201,162,77,0.22); }
.kdp-card__header { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); }
.kdp-card__body { padding: 18px; }
.kdp-card__footer { padding: 14px 18px; border-top: 1px solid var(--border-soft); background: var(--surface-sunken); }

/* ── Field (input/textarea/select) ────────────────────────────── */
.kdp-field { display: flex; flex-direction: column; gap: 6px; }
.kdp-field__label { font: 600 var(--text-sm)/1.4 'Inter', system-ui, sans-serif; color: var(--text-primary); }
.kdp-input {
  min-height: 44px; padding: 11px 14px; width: 100%;
  font: 400 var(--text-base)/1.4 'Inter', system-ui, sans-serif;
  color: var(--text-primary); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.kdp-input::placeholder { color: var(--text-secondary); opacity: .7; }
.kdp-input:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--state-focus-ring); }
.kdp-textarea { min-height: 96px; resize: vertical; line-height: var(--leading-normal); }
.kdp-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.kdp-field.is-error .kdp-input { border-color: var(--err-border); }
.kdp-field__hint { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.kdp-field__error { font-size: var(--text-sm); color: var(--err-text); margin: 0; }

/* ── Stepper ──────────────────────────────────────────────────── */
.kdp-stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kdp-stepper__step { display: inline-flex; align-items: center; gap: 8px; }
.kdp-stepper__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  font: 600 var(--text-sm)/1 'Inter', system-ui, sans-serif; color: var(--text-secondary);
  background: var(--surface-2);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.kdp-stepper__lbl { font-size: var(--text-sm); color: var(--text-secondary); }
.kdp-stepper__step.is-done .kdp-stepper__dot { background: var(--ok-text); border-color: var(--ok-text); color: #fff; }
.kdp-stepper__step.is-active .kdp-stepper__dot { background: var(--accent-500); border-color: var(--accent-500); color: #fff; transform: scale(1.08); }
.kdp-stepper__step.is-active .kdp-stepper__lbl { color: var(--text-primary); font-weight: 600; }

/* ── Empty state ──────────────────────────────────────────────── */
.kdp-empty { text-align: center; padding: 48px 24px; max-width: 420px; margin: 0 auto; }
.kdp-empty__icon { color: var(--accent-500); margin-bottom: 14px; }
.kdp-empty__title { font: 600 var(--text-xl)/1.3 'Inter', system-ui, sans-serif; color: var(--text-primary); margin-bottom: 8px; }
.kdp-empty__body { color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: 20px; }

/* ── Skeleton ─────────────────────────────────────────────────── */
.kdp-skeleton__line, .kdp-skeleton--card, .kdp-skeleton--image {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--neutral-150) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%; animation: kdp-shimmer 1.4s ease infinite; border-radius: var(--radius-sm);
}
.kdp-skeleton--text .kdp-skeleton__line, .kdp-skeleton--lines .kdp-skeleton__line { display: block; height: 12px; margin-bottom: 10px; }
.kdp-skeleton--text .kdp-skeleton__line:last-child { width: 70%; }
.kdp-skeleton--card { height: 140px; }
.kdp-skeleton--image { height: 200px; }
@keyframes kdp-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Toast root ───────────────────────────────────────────────── */
.kdp-toast-root { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }