/**
 * konfigurator.css
 *
 * Technik-Welle WT-4 — Interaktiver Verfahrensfinder (Machbarkeits-
 * Konfigurator). Design v3: schwarz-monochrom, Inter, radius 0 (systemweit).
 * Die Akzentfarbe --feb-accent (#006ABC) erscheint AUSSCHLIESSLICH auf dem
 * Weiter-/CTA-Button und im aktiven Auswahlzustand. Keine Gradients.
 *
 * Laedt in global-styling (site-weit), greift aber nur, wo das Markup mit
 * .feb-vf im Seiten-Body steht. Ohne JavaScript ist .feb-vf__fallback
 * sichtbar; das Skript setzt .feb-vf--enhanced und blendet den Fallback aus.
 */

/* Seiten-H1 — erbt die Guton-Titelschrift aus base.css (h1). Guton bleibt
   damit auf die Seiten-H1 beschraenkt; alle Unter-Ueberschriften laufen in
   Inter (siehe font-family: var(--feb-font-sans) weiter unten). */
.feb-vf-page-title {
  margin-top: 0;
}

/* Intro-Lead ---------------------------------------------------------- */
.feb-vf-intro {
  font-size: var(--feb-fs-lead);
  line-height: var(--feb-lh-body);
  color: var(--feb-text-secondary);
  max-width: var(--feb-measure-lead, 60ch);
  margin: 0 0 var(--feb-space-6);
}

/* Wrapper ------------------------------------------------------------- */
.feb-vf {
  margin-block: var(--feb-space-7);
  max-width: var(--feb-content-max);
}

/* Fallback (ohne JS): Technologie-Uebersicht + Links + CTA ------------- */
.feb-vf__fallback {
  border: var(--feb-hairline-width, 1px) solid var(--feb-border);
  padding: var(--feb-space-6);
  background: var(--feb-surface);
}
.feb-vf__fallback-title {
  font-family: var(--feb-font-sans); /* Guton bleibt der Seiten-H1 vorbehalten */
  font-size: var(--feb-fs-h3);
  line-height: var(--feb-lh-heading);
  margin: 0 0 var(--feb-space-2);
  color: var(--feb-text);
}
.feb-vf__fallback-lead {
  color: var(--feb-text-secondary);
  margin: 0 0 var(--feb-space-5);
  max-width: var(--feb-measure, 70ch);
}
.feb-vf__fallback-list {
  list-style: none;
  margin: 0 0 var(--feb-space-6);
  padding: 0;
  display: grid;
  gap: var(--feb-space-4);
}
.feb-vf__fallback-item {
  border-top: var(--feb-hairline-width, 1px) solid var(--feb-border);
  padding-top: var(--feb-space-4);
}
.feb-vf__fallback-item a {
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.feb-vf__fallback-item a:hover,
.feb-vf__fallback-item a:focus-visible {
  color: var(--feb-accent);
}
.feb-vf__fallback-item p {
  margin: var(--feb-space-1) 0 0;
  color: var(--feb-text-secondary);
  font-size: var(--feb-fs-sm);
}

/* App (mit JS) -------------------------------------------------------- */
.feb-vf__app {
  border: var(--feb-hairline-width, 1px) solid var(--feb-border-strong);
  background: var(--feb-surface);
  padding: var(--feb-space-6);
}

/* Fortschritt */
.feb-vf__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feb-space-4);
  margin-bottom: var(--feb-space-6);
  padding-bottom: var(--feb-space-4);
  border-bottom: var(--feb-hairline-width, 1px) solid var(--feb-border);
}
.feb-vf__count {
  margin: 0;
  font-size: var(--feb-fs-eyebrow);
  letter-spacing: var(--feb-ls-eyebrow, 0.08em);
  text-transform: uppercase;
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text-secondary);
}
.feb-vf__dots {
  display: flex;
  gap: var(--feb-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.feb-vf__dot {
  width: 1.5rem;
  height: 4px;
  background: var(--feb-border-strong);
}
.feb-vf__dot.is-active { background: var(--feb-accent); }
.feb-vf__dot.is-done { background: var(--feb-text); }

/* Schritt (fieldset) */
.feb-vf__step {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* fieldset-Default aufheben */
}
.feb-vf__step:focus { outline: none; } /* Ansage per Fokus, kein Rahmen noetig */
.feb-vf__step[hidden] { display: none; }
.feb-vf__legend {
  font-size: var(--feb-fs-h3);
  line-height: var(--feb-lh-heading);
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text);
  padding: 0;
  margin: 0 0 var(--feb-space-2);
}
.feb-vf__hint {
  margin: 0 0 var(--feb-space-5);
  color: var(--feb-text-secondary);
  font-size: var(--feb-fs-sm);
}

/* Auswahloptionen: eckige Bedienflaechen (radius 0) */
.feb-vf__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--feb-space-3);
}
.feb-vf__option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--feb-space-3);
  padding: var(--feb-space-4);
  border: 2px solid var(--feb-border-strong);
  background: var(--feb-surface);
  cursor: pointer;
  transition: border-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease),
              background-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease);
}
.feb-vf__option:hover { border-color: var(--feb-text); }
/* Sichtbarer Tastaturfokus liegt auf der Auswahlflaeche (Input ist versteckt) */
.feb-vf__option:focus-within {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset, 2px);
}
/* Aktiver Auswahlzustand — hier darf der Akzent erscheinen */
.feb-vf__option.is-selected {
  border-color: var(--feb-accent);
  background: var(--feb-accent-soft);
}

/* Das native Input visuell verbergen, aber bedienbar lassen */
.feb-vf__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* Eigenes, eckiges Auswahlkaestchen */
.feb-vf__opt-label { color: var(--feb-text); line-height: var(--feb-lh-snug, 1.35); }
.feb-vf__opt-label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.1rem; height: 1.1rem;
  margin-right: var(--feb-space-2);
  border: 2px solid var(--feb-border-strong);
  background: var(--feb-surface);
}
.feb-vf__option.is-selected .feb-vf__opt-label::before {
  border-color: var(--feb-accent);
  background: var(--feb-accent);
  box-shadow: inset 0 0 0 3px var(--feb-surface);
}

/* Validierung */
.feb-vf__error {
  margin: var(--feb-space-4) 0 0;
  padding: var(--feb-space-3) var(--feb-space-4);
  border-left: 3px solid var(--feb-danger, #b00020);
  background: var(--feb-danger-bg, #fdecef);
  color: var(--feb-text);
  font-size: var(--feb-fs-sm);
}
.feb-vf__error[hidden] { display: none; }

/* Navigation */
.feb-vf__nav {
  display: flex;
  gap: var(--feb-space-3);
  margin-top: var(--feb-space-6);
  padding-top: var(--feb-space-5);
  border-top: var(--feb-hairline-width, 1px) solid var(--feb-border);
}
.feb-vf__nav .feb-vf__btn--primary { margin-left: auto; }

/* Buttons — eckig (radius 0). Primary traegt den Akzent. */
.feb-vf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--feb-control-h, 3rem);
  padding: 0 var(--feb-space-5);
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-btn, 1rem);
  font-weight: var(--feb-fw-semibold);
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease),
              border-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease),
              color var(--feb-dur-fast, 120ms) var(--feb-ease, ease);
}
.feb-vf__btn:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset, 2px);
}
.feb-vf__btn--primary {
  background: var(--feb-accent);
  color: var(--feb-on-accent);
  border-color: var(--feb-accent);
}
.feb-vf__btn--primary:hover { background: var(--feb-accent-hover); border-color: var(--feb-accent-hover); }
.feb-vf__btn--primary:active { background: var(--feb-accent-active); border-color: var(--feb-accent-active); }
.feb-vf__btn--ghost {
  background: transparent;
  color: var(--feb-text);
  border-color: var(--feb-border-ink);
}
.feb-vf__btn--ghost:hover { background: var(--feb-surface-sunken); }
.feb-vf__btn[hidden] { display: none; }

/* Ergebnis ------------------------------------------------------------ */
.feb-vf__result:focus { outline: none; }
.feb-vf__result[hidden] { display: none; }
.feb-vf__result-title {
  font-family: var(--feb-font-sans); /* Guton bleibt der Seiten-H1 vorbehalten */
  font-size: var(--feb-fs-h2);
  line-height: var(--feb-lh-heading);
  margin: 0 0 var(--feb-space-2);
  color: var(--feb-text);
}
.feb-vf__result-title:focus { outline: none; }
.feb-vf__result-lead {
  margin: 0 0 var(--feb-space-6);
  color: var(--feb-text-secondary);
  max-width: var(--feb-measure, 70ch);
}
.feb-vf__cards {
  list-style: none;
  margin: 0 0 var(--feb-space-6);
  padding: 0;
  display: grid;
  gap: var(--feb-space-4);
}
.feb-vf__card {
  border: var(--feb-hairline-width, 1px) solid var(--feb-border-strong);
  border-left: 4px solid var(--feb-accent);
  padding: var(--feb-space-5);
  background: var(--feb-surface);
}
.feb-vf__card-head {
  display: flex;
  align-items: baseline;
  gap: var(--feb-space-3);
  margin-bottom: var(--feb-space-2);
}
.feb-vf__rank {
  flex: 0 0 auto;
  font-size: var(--feb-fs-sm);
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text-secondary);
  font-variant-numeric: tabular-nums;
}
.feb-vf__card-title {
  font-family: var(--feb-font-sans); /* Guton bleibt der Seiten-H1 vorbehalten */
  font-size: var(--feb-fs-h3);
  line-height: var(--feb-lh-heading);
  margin: 0;
  color: var(--feb-text);
}
.feb-vf__card-text {
  margin: 0 0 var(--feb-space-4);
  color: var(--feb-text-secondary);
}

/* Begruendungs-Tags: reine Text-Tags — als Pills gefuehrt (radius-full,
   systemweit derzeit 0), monochrom, KEIN Akzent. */
.feb-vf__tags-label {
  margin: 0 0 var(--feb-space-2);
  font-size: var(--feb-fs-xs);
  letter-spacing: var(--feb-ls-eyebrow, 0.06em);
  text-transform: uppercase;
  color: var(--feb-text-muted);
}
.feb-vf__tags {
  list-style: none;
  margin: 0 0 var(--feb-space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--feb-space-2);
}
.feb-vf__tag {
  display: inline-block;
  padding: 0.25rem var(--feb-space-3);
  border: var(--feb-hairline-width, 1px) solid var(--feb-border-strong);
  border-radius: var(--feb-radius-full);
  background: var(--feb-surface-muted);
  color: var(--feb-text-secondary);
  font-size: var(--feb-fs-xs);
}
.feb-vf__link {
  display: inline-block;
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.feb-vf__link:hover,
.feb-vf__link:focus-visible { color: var(--feb-accent); }

.feb-vf__note {
  margin: 0 0 var(--feb-space-6);
  padding: var(--feb-space-4);
  background: var(--feb-surface-muted);
  border-left: 3px solid var(--feb-border-strong);
  color: var(--feb-text-secondary);
  font-size: var(--feb-fs-sm);
}
.feb-vf__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--feb-space-3);
  align-items: center;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .feb-vf__option,
  .feb-vf__btn { transition: none; }
}