/* kavedo-components.css — wiederverwendbare .kv-*-Komponenten aus dem Styleguide
   (styleguide/kavedo-style/kavedo-theme.css). Async geladen. Tokens: kavedo-tokens.css. */

/* Layout-Primitive */
.kv-grid { display: grid; gap: var(--kv-space-5); }
.kv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .kv-grid--2, .kv-grid--3 { grid-template-columns: 1fr; } }

.kv-section-title {
  display: flex; align-items: center; gap: var(--kv-space-3);
  font-family: var(--kv-font-display); font-weight: var(--kv-fw-bold);
  font-size: var(--kv-fs-h2); color: var(--kv-ink); margin: 0 0 var(--kv-space-5);
}
.kv-section-title::before {
  content: ""; width: 4px; align-self: stretch; min-height: 1.4em;
  background: var(--kv-primary); border-radius: var(--kv-radius-pill);
}
.kv-lead { font-size: var(--kv-fs-lead); color: var(--kv-muted); max-width: 68ch; }

/* Card */
.kv-card {
  background: var(--kv-surface); border: 1px solid var(--kv-line);
  border-radius: var(--kv-radius-lg); padding: var(--kv-space-5); box-shadow: var(--kv-shadow-md);
  transition: box-shadow var(--kv-dur) var(--kv-ease), transform var(--kv-dur) var(--kv-ease);
}
.kv-card--hover:hover,
.kv-card--hover:focus-within { box-shadow: var(--kv-shadow-lg); transform: translateY(-4px); border-color: var(--kv-blue-300); }
@media (prefers-reduced-motion: reduce) { .kv-card { transition: none; } .kv-card--hover:hover, .kv-card--hover:focus-within { transform: none; } }
.kv-card--large { padding: var(--kv-space-6); }
.kv-card--large .kv-card__title { font-size: var(--kv-fs-h2); margin-bottom: var(--kv-space-3); }
.kv-card--large .kv-card__body { font-size: var(--kv-fs-lead); line-height: var(--kv-lh-relaxed); }
.kv-card__title {
  display: flex; align-items: center; gap: var(--kv-space-3);
  font-family: var(--kv-font-display); font-weight: var(--kv-fw-semibold);
  font-size: var(--kv-fs-h3); color: var(--kv-ink); margin: 0 0 var(--kv-space-2);
}
.kv-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--kv-radius-md);
  background: var(--kv-blue-50); color: var(--kv-primary); flex: none; font-size: 1.2rem;
}
.kv-card__icon--accent { background: var(--kv-red-50); color: var(--kv-accent); }
.kv-card__body { color: var(--kv-text); }

/* Badge */
.kv-badge {
  display: inline-flex; align-items: center; gap: var(--kv-space-1);
  padding: 0.2rem 0.7rem; font-size: var(--kv-fs-xs); font-weight: var(--kv-fw-semibold);
  letter-spacing: 0.02em; text-transform: uppercase; border-radius: var(--kv-radius-pill);
  background: var(--kv-blue-50); color: var(--kv-primary);
}
.kv-badge--accent  { background: var(--kv-red-50); color: var(--kv-red-700); }
.kv-badge--teal    { background: var(--kv-teal-50); color: var(--kv-teal-700); }
.kv-badge--success { background: #e3f5ec; color: var(--kv-success); }
.kv-badge--neutral { background: var(--kv-line-2); color: var(--kv-muted); }

/* Callout */
.kv-callout {
  display: flex; gap: var(--kv-space-3); padding: var(--kv-space-4);
  border-radius: var(--kv-radius-md); border: 1px solid var(--kv-line);
  border-left: 4px solid var(--kv-blue-500); background: var(--kv-blue-50); color: var(--kv-text);
}
.kv-callout__title { font-weight: var(--kv-fw-semibold); color: var(--kv-primary); }
.kv-callout--warning { border-left-color: var(--kv-warning); background: #fdf6e9; }
.kv-callout--warning .kv-callout__title { color: var(--kv-warning); }
.kv-callout--success { border-left-color: var(--kv-success); background: #e9f7f0; }
.kv-callout--success .kv-callout__title { color: var(--kv-success); }

/* Divider */
.kv-divider { height: 1px; background: var(--kv-line); border: 0; margin: var(--kv-space-6) 0; }
.kv-rule-accent { border: 0; height: 4px; width: 64px; border-radius: var(--kv-radius-pill); background: var(--kv-gradient-brand); }

/* Forms */
.kv-form { display: flex; flex-direction: column; gap: var(--kv-space-5); }
.kv-form__row { display: grid; gap: var(--kv-space-4); }
.kv-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .kv-form__row--2 { grid-template-columns: 1fr; } }
.kv-field { display: flex; flex-direction: column; gap: var(--kv-space-2); }
.kv-label { font-weight: var(--kv-fw-semibold); color: var(--kv-ink); font-size: var(--kv-fs-sm); }
.kv-label .kv-req { color: var(--kv-accent); margin-left: 2px; }
.kv-help { font-size: var(--kv-fs-xs); color: var(--kv-muted); }
.kv-error-text { font-size: var(--kv-fs-xs); color: var(--kv-accent); }
/* ⚠️ A11y: font-size ≥16px verhindert iOS-Auto-Zoom OHNE user-scalable=no */
.kv-input, .kv-select, .kv-textarea {
  width: 100%; font-family: var(--kv-font-body); font-size: 1rem; color: var(--kv-ink);
  background: var(--kv-surface); border: 1px solid var(--kv-line);
  border-radius: var(--kv-radius-md); padding: 0.6rem 0.8rem;
  transition: border-color var(--kv-dur) var(--kv-ease), box-shadow var(--kv-dur) var(--kv-ease);
}
.kv-textarea { min-height: 6rem; resize: vertical; }
.kv-input::placeholder, .kv-textarea::placeholder { color: var(--kv-muted); }
.kv-input:focus, .kv-select:focus, .kv-textarea:focus { outline: none; border-color: var(--kv-primary); box-shadow: var(--kv-shadow-focus); }
.kv-input.is-invalid { border-color: var(--kv-accent); }
.kv-check { display: inline-flex; align-items: flex-start; gap: var(--kv-space-2); cursor: pointer; color: var(--kv-text); }
.kv-form__actions { display: flex; gap: var(--kv-space-3); justify-content: flex-end; flex-wrap: wrap; }

/* Prose (Rechtstexte) */
.kv-prose { max-width: var(--kv-content-max); color: var(--kv-text); }
.kv-prose > * + * { margin-top: var(--kv-space-4); }
.kv-prose h2 { font-size: var(--kv-fs-h2); color: var(--kv-ink); margin-top: var(--kv-space-6); padding-bottom: var(--kv-space-2); border-bottom: 1px solid var(--kv-line); }
.kv-prose h3 { font-size: var(--kv-fs-h3); color: var(--kv-ink); margin-top: var(--kv-space-5); }
.kv-prose ul { padding-left: 1.4rem; }
.kv-prose li + li { margin-top: var(--kv-space-2); }

/* Utilities */
.kv-text-primary { color: var(--kv-primary); }
.kv-text-accent  { color: var(--kv-accent); }
.kv-text-muted   { color: var(--kv-muted); }
.kv-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .kv *, .kv *::before, .kv *::after { transition: none !important; animation: none !important; }
}