/* ============================================================
   FORM-WIZARD-STYLES – nur für die Kontakt-Seite (kontakt.html)
   Diese Datei ergänzt assets/styles.css um alles, was für das
   mehrstufige Anfrageformular zusätzlich gebraucht wird. Getrennt
   von styles.css, damit die restlichen, rein statischen Seiten
   nicht unnötig mit Formular-CSS aufgebläht werden.
   ============================================================ */

/* ===================== 1) WIZARD-RAHMEN ===================== */
.wizard{ /* äußerer weißer Karten-Rahmen, in dem der gesamte Assistent liegt */
  background:#ffffff; /* weiße Fläche, damit Formular-Text in dunklem Grau/Schwarz gut lesbar ist */
  border-radius:20px; /* abgerundete Ecken passend zum restlichen Kartendesign */
  padding:40px; /* großzügiger Innenabstand */
  color:#182420; /* dunkle Standard-Textfarbe innerhalb des weißen Wizards (überschreibt das globale Weiß) */
  max-width:720px; /* begrenzte Breite, damit der Assistent nicht zu breit und unübersichtlich wird */
  margin:0 auto; /* horizontal zentriert innerhalb der Sektion */
}
.wizard h2{ color:#0c3a30; text-align:center; font-size:22px; margin-bottom:28px; } /* Überschrift je Schritt, dunkelgrün und zentriert */
.wizard .step-eyebrow{ text-align:center; color:#5c6b64; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; } /* kleine graue Kennzeichnung "Anfrageformular" über der Schritt-Überschrift */

/* ===================== 2) EINZELNE SCHRITTE ===================== */
.wizard-step{ display:none; } /* jeder Schritt ist standardmäßig unsichtbar */
.wizard-step.is-active{ display:block; animation:stepFade .25s ease; } /* nur der aktive Schritt wird angezeigt, mit sanftem Einblenden */
@keyframes stepFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } /* kleine Einblend-Animation beim Schrittwechsel */

/* ===================== 3) AUSWAHL-KARTEN (Haustyp / Leistungen / Anlass) ===================== */
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; margin-bottom:8px; } /* responsives Raster für die Auswahl-Kacheln */
.choice-card{ /* eine einzelne klickbare Auswahl-Kachel */
  display:flex; flex-direction:column; align-items:center; gap:10px; /* Icon über dem Text, zentriert */
  padding:22px 14px; border:1.5px solid #dde6e1; border-radius:14px; /* dezenter Rahmen, abgerundete Ecken */
  background:#ffffff; cursor:pointer; text-align:center; font-size:14px; font-weight:600; color:#182420; /* Basis-Erscheinungsbild */
  transition:border-color .15s ease, background .15s ease, transform .1s ease; /* weicher Übergang beim Auswählen/Hover */
}
.choice-card:hover{ border-color:#1f7a63; transform:translateY(-2px); } /* leichtes Anheben + grüner Rahmen beim Hover */
.choice-card.is-selected{ border-color:#155c4c; background:#e8f2ee; box-shadow:0 0 0 2px #155c4c inset; } /* deutliche grüne Markierung, wenn ausgewählt */
.choice-card svg{ width:34px; height:34px; stroke:#155c4c; } /* einheitliche Icon-Größe und Markenfarbe */

/* ===================== 4) TEXTFELDER INNERHALB DES WEISSEN WIZARDS ===================== */
.wizard textarea, .wizard input[type="text"], .wizard input[type="email"], .wizard input[type="tel"]{ /* helle Formularfelder, da der Wizard selbst weiß ist */
  width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid #dde6e1; /* dezenter grauer Rahmen */
  background:#f7faf9; color:#182420; font-family:inherit; font-size:14.5px; margin-bottom:16px; /* leicht getönter Hintergrund für Eingabefelder */
}
.wizard textarea:focus, .wizard input:focus{ outline:none; border-color:#155c4c; } /* grüner Rahmen als Fokus-Indikator statt Browser-Standard */
.wizard textarea{ min-height:130px; resize:vertical; } /* Nachrichtenfeld etwas höher als einzeilige Felder */
.wizard label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; color:#0c3a30; } /* Feldbeschriftung über jedem Eingabefeld */
.wizard .field{ margin-bottom:4px; } /* kleiner Wrapper um Label + Feld, für gleichmäßigen Abstand */

/* ---- Datenschutz-Checkbox ---- */
.consent-row{ display:flex; align-items:flex-start; gap:10px; margin:6px 0 26px; font-size:13.5px; color:#182420; } /* Checkbox + Text nebeneinander */
.consent-row input[type="checkbox"]{ width:18px; height:18px; margin-top:2px; accent-color:#155c4c; flex-shrink:0; } /* Checkbox in Markenfarbe, schrumpft nicht */

/* ---- Ehrlichkeits-Feld gegen Spam-Bots (Honeypot) ---- */
.hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; } /* für Menschen unsichtbar, Bots füllen es oft trotzdem aus */

/* ===================== 5) FORTSCHRITTSBALKEN + NAVIGATIONS-PFEILE ===================== */
.wizard-nav{ display:flex; align-items:center; gap:16px; margin-top:24px; } /* Zurück-Pfeil, Balken, Weiter-Pfeil in einer Zeile */
.wizard-progress-track{ flex:1; height:6px; background:#e8f2ee; border-radius:999px; overflow:hidden; } /* graue Schiene des Fortschrittsbalkens */
.wizard-progress-fill{ height:100%; background:#155c4c; border-radius:999px; width:20%; transition:width .25s ease; } /* grüner, wachsender Fortschrittsbalken, Breite wird per JS gesetzt */
.wizard-arrow{ /* runde Zurück-/Weiter-Buttons */
  width:44px; height:44px; border-radius:12px; border:1.5px solid #FF8C29; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:#e8f2ee; color:#0c3a30; transition:background .15s ease, color .15s ease; /* dezenter Grundzustand, Rahmen in Markenorange wie alle anderen Buttons */
}
.wizard-arrow.is-primary{ background:#155c4c; color:#ffffff; } /* aktiver "Weiter"-Pfeil, deutlich in Markengrün */
.wizard-arrow.is-primary:hover{ background:#1f7a63; } /* etwas heller beim Hover */
.wizard-arrow:disabled{ opacity:.4; cursor:not-allowed; } /* ausgegrauter Zurück-Pfeil auf dem ersten Schritt */

/* ===================== 6) HINWEIS-/ERFOLGS-/FEHLERMELDUNGEN ===================== */
.wizard-hint{ text-align:center; font-size:13px; color:#5c6b64; margin-top:10px; min-height:16px; } /* z. B. "Bitte eine Option auswählen" */
.wizard-result{ /* großer Statusblock nach dem Absenden, ersetzt den Wizard-Inhalt */
  text-align:center; padding:20px 0;
}
.wizard-result.is-success h2{ color:#155c4c; } /* grüne Überschrift bei Erfolg */
.wizard-result.is-error h2{ color:#b3261e; } /* rote Überschrift bei einem Fehler */
.wizard-result p{ color:#5c6b64; font-size:15px; }

/* ===================== 7) RESPONSIVE FEINSCHLIFF ===================== */
@media (max-width:600px){ /* Anpassungen für schmale Smartphone-Bildschirme */
  .wizard{ padding:26px 20px; border-radius:16px; } /* weniger Innenabstand auf kleinen Screens */
  .choice-grid{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; } /* engere Kacheln auf schmalen Screens */
  .choice-card{ padding:16px 10px; }
}