/* ==========================================================================
   WIZARD — multi-step quote-request funnel (angebot.html). Reuses the
   .dh-form/.dh-field/.dh-pill primitives from forms.css/secondary.css;
   this file only adds step-visibility, progress bar and larger touch-target
   pill styling for the one-question-per-screen flow.
   ========================================================================== */
.wizard-section { padding: calc(var(--nav-h) + 56px) 0 110px; }

.wizard-progress { margin-bottom: 40px; }
.wizard-progress__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(168, 170, 172, 0.14);
  overflow: hidden;
}
.wizard-progress__fill {
  height: 100%;
  width: 20%;
  background: var(--metallic-gradient);
  border-radius: 999px;
  transition: width var(--transition-med);
}
.wizard-progress__label {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-gray-dim);
  text-align: right;
}

.wizard-step { display: none; }
.wizard-step.is-active { display: block; animation: wizardFadeIn var(--transition-med); }
@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-step.is-active { animation: none; }
}

.wizard-step__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--gold-champagne);
  line-height: 1.25;
  margin: 0 0 26px;
}

.dh-pill-group--wizard { gap: 12px; }
.dh-pill--wizard {
  height: 52px;
  padding: 0 26px;
  font-size: 15px;
  flex: 1 1 auto;
  justify-content: center;
}
@media (max-width: 560px) {
  .dh-pill-group--wizard { flex-direction: column; }
  .dh-pill--wizard { width: 100%; }
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.wizard-nav .wizard-back { visibility: hidden; }
.wizard-nav .wizard-back.is-visible { visibility: visible; }
.wizard-nav .wizard-next,
.wizard-nav .dh-form__submit { margin-left: auto; }

/* .btn sets display:inline-flex, which (being an author rule) beats the
   browser's default [hidden] { display: none }, so a plain [hidden]
   attribute alone does nothing on these buttons — force it explicitly. */
.wizard-nav [hidden] { display: none !important; }

@media (max-width: 560px) {
  .wizard-nav { flex-wrap: wrap; }
  .wizard-nav .wizard-back,
  .wizard-nav .wizard-next,
  .wizard-nav .dh-form__submit {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
  }
}

.dh-pill-group--needs-selection { animation: wizardShake 0.4s var(--ease); }
@keyframes wizardShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-pill-group--needs-selection { animation: none; }
}