/* ─── Bredo Form Wizard + Refresh ────────────────────────────────────────
   Visuelle Verfeinerung + Multi-Step-Layout für die Kontakt-/Service-/
   Home-Intro-Forms. Server-API unverändert; JS in site-runtime.js schaltet
   zwischen Step 1 und Step 2. Eckige Boxen gemäß Design-Konvention
   (border-radius: 0 überall). */

:root {
  --bredo-form-accent: #004f9f;
  --bredo-form-dark-bg: #101418;
  --bredo-form-dark-input-bg: rgba(255, 255, 255, 0.08);
  --bredo-form-dark-input-border: rgba(255, 255, 255, 0.28);
  --bredo-form-dark-input-border-focus: #ffffff;
}

/* ─── Form-Container ──────────────────────────────────────────────────── */

form.bredo-wizard {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

/* ─── Wizard-Head (Step-Indicator) ────────────────────────────────────── */

.bredo-wizard-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 14px;
  min-height: 18px;
}

.bredo-wizard-progress {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.bredo-wizard-progress [data-step-label] {
  font-weight: 700;
  opacity: 0.9;
}

/* ─── Step-Container ──────────────────────────────────────────────────── */

.bredo-wizard-step {
  display: grid;
  gap: 12px;
}

.bredo-wizard-step[hidden] {
  display: none;
}

/* No-JS-Fallback: ohne JS bleibt `.js-enabled` ungesetzt → beide Steps
   sichtbar, Next/Back-Buttons werden versteckt. So funktioniert die Form
   weiter als klassischer Single-Step (User klickt direkt Submit). */
form.bredo-wizard:not(.js-enabled) .bredo-wizard-step[hidden] {
  display: grid;
}

form.bredo-wizard:not(.js-enabled) .bredo-wizard-next,
form.bredo-wizard:not(.js-enabled) .bredo-wizard-back,
form.bredo-wizard:not(.js-enabled) .bredo-wizard-head {
  display: none;
}

/* Step-Wechsel-Animation (nur mit JS aktiv). Subtil — 200ms Slide-Fade. */
@media (prefers-reduced-motion: no-preference) {
  form.bredo-wizard.js-enabled .bredo-wizard-step--active {
    animation: bredoWizardStepIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@keyframes bredoWizardStepIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Field-Refresh (gilt für Wizard-Forms) ───────────────────────────── */

form.bredo-wizard .bw-input,
form.bredo-wizard .bw-select {
  height: 44px;
  padding: 10px 14px;
  font-size: 14.5px;
  line-height: 1.4;
  border-radius: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

form.bredo-wizard textarea.bw-input,
form.bredo-wizard .message-text-area {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
  resize: vertical;
  border-radius: 0;
}

form.bredo-wizard .bw-input::placeholder,
form.bredo-wizard textarea.bw-input::placeholder {
  opacity: 0.62;
}

form.bredo-wizard .bw-input:focus,
form.bredo-wizard .bw-select:focus {
  border-color: var(--bredo-form-accent);
  box-shadow: 0 0 0 2px rgba(0, 79, 159, 0.22);
  outline: 0;
}

/* Invalid-Visual nach Step-1-Validation (gesetzt vom JS) */
form.bredo-wizard .bredo-input-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18);
}

/* ─── Dark-Variante: Service-Detail-Sidebar ──────────────────────────── */

/* Service-Form-Block (`.service-single-form-block` auf /leistungen/*/) ist
   immer dunkel. Kontakt- und Home-Intro-Forms bleiben hell und nehmen die
   Default-Light-Styles oben. */

.service-single-form-block form.bredo-wizard {
  color: #ffffff;
}

.service-single-form-block form.bredo-wizard .bw-input,
.service-single-form-block form.bredo-wizard .service-single-text-field {
  color: #ffffff;
  background-color: var(--bredo-form-dark-input-bg);
  border: 1px solid var(--bredo-form-dark-input-border);
}

.service-single-form-block form.bredo-wizard .bw-input::placeholder,
.service-single-form-block form.bredo-wizard .service-single-text-field::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.service-single-form-block form.bredo-wizard .bw-input:focus,
.service-single-form-block form.bredo-wizard .bw-input:focus {
  border-color: var(--bredo-form-dark-input-border-focus);
  background-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

/* Labels im Dark-Kontext leicht ausblenden (visuelles Refresh — Placeholder
   ersetzt das Label in der Wahrnehmung). Bleiben für Screen-Reader sichtbar. */
.service-single-form-block form.bredo-wizard .cta-field-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.72;
  margin-bottom: 4px;
}

/* ─── Buttons: Weiter / Zurück / Submit ───────────────────────────────── */

.bredo-wizard-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.bredo-wizard-actions--step1 {
  justify-content: flex-end;
}

.bredo-wizard-actions--step2 {
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Submit-Button-Wrapper innerhalb der Step-2-Actions wirkt als
   rechts-bündiges Block-Element. */
.bredo-wizard-actions .contact-form-button-wrap,
.bredo-wizard-actions .service-single-button-wrap,
.bredo-wizard-actions .home-intro-button-wrap {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

form.bredo-wizard .bredo-wizard-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
}

/* Heller Hintergrund (Home-Intro) → blauer Next-Button */
form.bredo-wizard .bredo-wizard-next {
  background-color: var(--bredo-form-accent);
  color: #ffffff;
}

form.bredo-wizard .bredo-wizard-next:hover {
  background-color: #003d7a;
}

/* Dark-Kontext → weißer Next-Button auf dunklem Sidebar-Hintergrund */
.service-single-form-block form.bredo-wizard .bredo-wizard-next,
.service-single-form-block form.bredo-wizard .bredo-wizard-next {
  background-color: #ffffff;
  color: var(--bredo-form-dark-bg);
}

.service-single-form-block form.bredo-wizard .bredo-wizard-next:hover,
.service-single-form-block form.bredo-wizard .bredo-wizard-next:hover {
  background-color: #f2f2f2;
}

@media (prefers-reduced-motion: no-preference) {
  form.bredo-wizard .bredo-wizard-next:hover,
  form.bredo-wizard .bredo-wizard-back:hover {
    transform: translateY(-1px);
  }
}

/* Zurück-Button: Tertiary, dezent, kein Fill */
form.bredo-wizard .bredo-wizard-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  border-radius: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}

form.bredo-wizard .bredo-wizard-back:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Submit-Button-Refresh innerhalb Wizard */
form.bredo-wizard .bw-button[type="submit"],
form.bredo-wizard input[type="submit"].bw-button,
form.bredo-wizard button[type="submit"].bw-button {
  min-height: 44px;
  padding: 12px 22px;
  letter-spacing: 0.02em;
  border-radius: 0;
  transition: transform 140ms ease, background-color 140ms ease;
}

/* ─── Consent-Label-Refresh ───────────────────────────────────────────── */

form.bredo-wizard .bredo-form-consent {
  border-radius: 0 !important;
  padding: 10px 12px !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  margin: 4px 0 6px !important;
}

/* ─── Mobile-Optimierung (kleine Sidebar / Stacked-Layout) ────────────── */

@media (max-width: 640px) {
  .bredo-wizard-head {
    margin-bottom: 10px;
  }
  .bredo-wizard-actions--step2 {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .bredo-wizard-actions--step2 .bredo-wizard-back {
    align-self: flex-start;
  }
  .bredo-wizard-actions .contact-form-button-wrap,
  .bredo-wizard-actions .service-single-button-wrap,
  .bredo-wizard-actions .home-intro-button-wrap {
    width: 100%;
    justify-content: stretch;
  }
  .bredo-wizard-actions .bw-button[type="submit"] {
    width: 100%;
  }
  form.bredo-wizard .bredo-wizard-next {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Newsletter-Forms (kein Wizard, nur Refresh) ─────────────────────── */

/* Auch Newsletter-Eingaben profitieren vom Refresh, damit das Gesamtbild
   konsistent wirkt. */
form[id*="newsletter" i] .bw-input,
form[id*="subscribe" i] .bw-input {
  height: 44px;
  border-radius: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

form[id*="newsletter" i] .bw-input:focus,
form[id*="subscribe" i] .bw-input:focus {
  border-color: var(--bredo-form-accent);
  box-shadow: 0 0 0 2px rgba(0, 79, 159, 0.22);
  outline: 0;
}