/* =========================================================================
   Buttons, Badges, Karten, Bildflächen, Listen, Formular
   ========================================================================= */

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .12s var(--ease),
              box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--brand-strong); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn--sm { padding: .7rem 1.15rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--full-bg);
  color: var(--full-fg);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand);
}
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.badge--few  { background: var(--warn-bg); color: var(--warn-fg); }
.badge--full { background: var(--full-bg); color: var(--full-fg); }
.badge--soft { background: var(--green-100); color: var(--green-800); }

/* --- Bildflächen -------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-soft);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* --- Karten ------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease);
}
.card:hover {
  border-color: var(--green-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.card:hover .media img { transform: scale(1.04); }
.card__body { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card__kicker {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.card__text { color: var(--ink-2); font-size: var(--step--1); line-height: 1.62; }
.card__foot { margin-top: auto; padding-top: 1.1rem; }

/* Ganze Karte klickbar, Fokus bleibt am Link */
.card__link::after { content: ""; position: absolute; inset: 0; }
/* Buttons und Links im Kartenfuß bleiben eigenständig klickbar */
.card__foot .link-arrow, .seminar-foot .btn { position: relative; z-index: 1; }

/* --- Feature-Zeile ohne Kasten (USP) ------------------------------------ */
.feature { display: flex; flex-direction: column; gap: .75rem; }
.feature__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  background: var(--green-100);
  color: var(--brand);
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: var(--step-1); }
.feature p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }

/* --- Merkmalslisten ----------------------------------------------------- */
.checklist { list-style: none; padding: 0; display: grid; gap: .9rem; }
.checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .75rem;
  align-items: start;
  color: var(--ink-2);
}
.checklist svg { width: 22px; height: 22px; color: var(--brand-bright); margin-top: .2rem; }

.numbered { list-style: none; padding: 0; display: grid; gap: 0; }
.numbered li { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.numbered li:first-child { border-top: 0; }
.numbered h4 { display: flex; gap: .8rem; align-items: baseline; }
.numbered h4 span {
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  font-weight: 600;
}
.numbered p { margin-top: .45rem; color: var(--ink-2); font-size: var(--step--1); }

/* --- Statistik-Zahlen --------------------------------------------------- */
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat__label { font-size: var(--step--1); color: var(--ink-3); margin-top: .4rem; }

/* --- Formular ----------------------------------------------------------- */
.field { display: grid; gap: .5rem; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
.field .hint { font-size: .875rem; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  padding: .85rem 1rem;
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--green-100);
}
.field textarea { min-height: 148px; resize: vertical; }
.field .error { font-size: .875rem; color: #B3261E; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #B3261E; }
.field[data-invalid="true"] .error { display: block; }

.form-note { font-size: .875rem; color: var(--ink-3); }

.form-status {
  display: none;
  gap: .6rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--r-field);
  background: var(--ok-bg);
  color: var(--ok-fg);
  font-size: var(--step--1);
}
.form-status[data-state="visible"] { display: flex; }
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; }

.btn__spinner { display: none; width: 16px; height: 16px; }
.btn[data-loading="true"] .btn__spinner { display: block; animation: spin 0.9s linear infinite; }
.btn[data-loading="true"] .btn__label { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }