/* ============================================================
   Schadensanalyse-Assistent (mehrstufig, klickbar)
   Passt zum Concept-Bau Dark-Design (Blau/Gold).
   ============================================================ */
.cb-wizard {
    background: linear-gradient(180deg, #0a0e27 0%, #111827 100%);
    padding: 55px 0;
    position: relative;
    overflow: hidden;
}
.cb-wizard-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}
.cb-wizard-head { text-align: center; margin-bottom: 30px; }

/* Kompakt-Modus (letzter Schritt): Kopftext ausblenden + Padding reduzieren,
   damit das Kontaktformular vollstaendig sichtbar ist. */
.cb-wizard.cb-compact { padding-top: 24px; padding-bottom: 30px; }
.cb-wizard.cb-compact .cb-wizard-head { display: none; }
.cb-wizard.cb-compact .cb-progress { margin-bottom: 22px; }

/* Ergebnis-/Danke-Ansicht: Kopf + Fortschritt weg, Inhalt mittig zentriert */
.cb-wizard.cb-done .cb-wizard-head,
.cb-wizard.cb-done .cb-progress,
.cb-wizard.cb-done .cb-trust { display: none; }
.cb-wizard.cb-done #cbWizardBody {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-wizard-kicker {
    font-size: 12px; color: #c9a876; text-transform: uppercase;
    letter-spacing: 3px; font-weight: 700; margin: 0 0 8px;
}
.cb-wizard-title {
    color: #fff; font-size: 1.9rem; font-weight: 800; margin: 0 0 10px; line-height: 1.2;
}
.cb-wizard-title span { color: #c9a876; }
.cb-wizard-sub { color: rgba(255,255,255,0.65); font-size: 15px; margin: 0; }

/* Fortschrittsbalken */
.cb-progress {
    height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px;
    overflow: hidden; margin: 0 auto 34px; max-width: 620px;
}
.cb-progress-bar {
    height: 100%; width: 20%;
    background: linear-gradient(90deg, #2c5aa0, #c9a876);
    border-radius: 10px; transition: width 0.4s ease;
}

/* Schritt-Frage */
.cb-step { display: none; }
.cb-step.active { display: block; animation: cbFade 0.35s ease; }
@keyframes cbFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cb-step-legend {
    color: #fff; font-size: 1.2rem; font-weight: 700; text-align: center;
    margin: 0 0 20px;
}

/* Auswahl-Karten (Bild/Icon + Label) */
.cb-choices {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    max-width: 720px; margin: 0 auto;
}
.cb-choice {
    background: linear-gradient(145deg, #141a30, #1a2444);
    border: 2px solid rgba(201,168,118,0.25);
    border-radius: 14px; padding: 18px 12px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    text-align: center;
}
.cb-choice:hover {
    transform: translateY(-4px);
    border-color: #c9a876;
    background: linear-gradient(145deg, #1a2444, #22345c);
}
.cb-choice svg { width: 36px; height: 36px; color: #c9a876; transition: transform 0.2s ease; }
.cb-choice:hover svg { transform: scale(1.1); }
.cb-choice-label { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; }

/* PLZ + Kontakt-Eingaben */
.cb-field {
    width: 100%; max-width: 420px; margin: 0 auto 14px; display: block;
    padding: 14px 16px; font-size: 16px; border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.15); background: #161b27; color: #fff;
}
.cb-field::placeholder { color: #8896b3; }
.cb-field:focus { outline: none; border-color: #c9a876; box-shadow: 0 0 0 2px rgba(201,168,118,0.2); }
.cb-textarea { resize: vertical; min-height: 52px; font-family: inherit; line-height: 1.5; }
.cb-contact-grid { max-width: 520px; margin: 0 auto; }

/* Buttons */
.cb-actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.cb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px; border-radius: 50px; font-size: 15px; font-weight: 700;
    cursor: pointer; border: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cb-btn-primary {
    background: linear-gradient(135deg, #f5e6d3, #d4b896); color: #1a1a2e;
    box-shadow: 0 6px 18px rgba(245,230,211,0.35);
}
.cb-btn-primary:hover { transform: translateY(-2px); }
.cb-btn-ghost {
    background: transparent; color: #c9a876; border: 2px solid rgba(201,168,118,0.4);
}
.cb-btn-ghost:hover { background: rgba(201,168,118,0.12); }

/* Datenschutz / Hinweis */
.cb-privacy { color: rgba(255,255,255,0.6); font-size: 13px; text-align: center; margin: 16px auto 0; max-width: 480px; line-height: 1.6; }
.cb-privacy a { color: #c9a876; }
.cb-privacy input { margin-right: 8px; width: 18px; height: 18px; vertical-align: middle; }

/* Trust-Zeile */
.cb-trust { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.cb-trust span { color: rgba(255,255,255,0.7); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cb-trust svg { width: 16px; height: 16px; color: #c9a876; }

/* Empfehlungs-Screen */
.cb-rec {
    max-width: 620px; margin: 0 auto; text-align: center;
    background: linear-gradient(145deg, #141a30, #1a2444);
    border: 2px solid rgba(201,168,118,0.3); border-radius: 18px;
    padding: 30px 24px;
}
.cb-rec-badge {
    display: inline-block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: #0a0e27; font-weight: 800; background: linear-gradient(135deg, #f5e6d3, #d4b896);
    padding: 5px 14px; border-radius: 50px; margin-bottom: 14px;
}
.cb-rec-title { color: #fff; font-size: 1.4rem; font-weight: 800; margin: 0 0 12px; line-height: 1.25; }
.cb-rec-title span { color: #c9a876; font-size: 1.7rem; }
.cb-rec-desc { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.cb-rec-link {
    display: inline-block; color: #c9a876; font-weight: 700; font-size: 15px;
    text-decoration: none; border-bottom: 1px solid rgba(201,168,118,0.5); padding-bottom: 2px;
}
.cb-rec-link:hover { color: #d4b896; }
.cb-rec-hint { color: rgba(255,255,255,0.55); font-size: 13px; margin: 20px 0 0; }

/* Zusammenfassung im Kontaktschritt */
.cb-summary {
    text-align: center; color: #c9a876; font-size: 13px; font-weight: 700;
    letter-spacing: 0.5px; margin: 0 auto 18px; padding: 8px 16px;
    background: rgba(201,168,118,0.1); border-radius: 50px; display: table;
}

/* Anruf-Hinweis */
.cb-callnote { text-align: center; color: rgba(255,255,255,0.6); font-size: 14px; margin: 18px 0 0; }
.cb-callnote a { color: #c9a876; font-weight: 700; text-decoration: none; }
.cb-callnote a:hover { text-decoration: underline; }

/* Erfolg / Fehler */
.cb-result { text-align: center; padding: 20px; }
.cb-result-icon { width: 70px; height: 70px; margin: 0 auto 16px; color: #28cc6b; }
.cb-result h3 { color: #fff; font-size: 1.5rem; margin: 0 0 10px; }
.cb-result p { color: rgba(255,255,255,0.7); font-size: 15px; margin: 0; }

@media (max-width: 480px) {
    .cb-wizard-title { font-size: 1.5rem; }
    .cb-choices { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cb-choice { padding: 15px 8px; gap: 8px; }
    .cb-choice svg { width: 32px; height: 32px; }
    .cb-choice-label { font-size: 13px; }
}