/* =====================================================================
   ASOSmobil – Interaktiver Einsatz- & Produktberater
   Styles. Setzt asosmobil-modern.css (Design-Tokens) voraus.
   Alle Regeln liegen innerhalb von .amb-berater (Kapselung).
   ===================================================================== */

.amb-berater {
    background: var(--amb-bg);
    border: 1px solid var(--amb-line);
    border-radius: var(--amb-r-lg);
    box-shadow: var(--amb-shadow-lg);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

/* Kopf mit Fortschritt – dunkle Flaeche wie die Original-Sektionen ---- */
.amb-berater__head {
    padding: var(--amb-space-5) var(--amb-space-6) var(--amb-space-4);
    border-bottom: 3px solid var(--amb-amber);
    background: var(--amb-dark);
}
.amb-berater__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--amb-space-3);
    flex-wrap: wrap;
}
.amb-berater__step-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amb-amber);
}
.amb-berater__title {
    font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.45rem);
    margin: var(--amb-space-2) 0 0;
    color: #fff;
    text-transform: uppercase;
}
.amb-berater__head .amb-linkbtn { color: #cfd2d6; }
.amb-berater__head .amb-linkbtn:hover { color: #fff; }
.amb-progress {
    margin-top: var(--amb-space-4);
    height: 8px;
    border-radius: var(--amb-r-pill);
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}
.amb-progress__bar {
    height: 100%;
    width: 0%;
    border-radius: var(--amb-r-pill);
    background: linear-gradient(90deg, var(--amb-amber) 0%, #f2d40c 100%);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* Body ---------------------------------------------------------------- */
.amb-berater__body { padding: var(--amb-space-6); }

/* Antwort-Optionen (Kacheln) ----------------------------------------- */
.amb-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--amb-space-3);
}
.amb-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--amb-space-3);
    text-align: left;
    padding: var(--amb-space-4);
    border: 2px solid var(--amb-line);
    border-radius: var(--amb-r);
    background: var(--amb-bg);
    cursor: pointer;
    font-family: var(--amb-font);
    font-size: 1rem;
    color: var(--amb-ink);
    transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.amb-option:hover {
    border-color: var(--amb-amber);
    background: var(--amb-amber-soft);
    transform: translateY(-1px);
}
.amb-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--amb-amber-ring);
    border-color: var(--amb-amber);
}
.amb-option.is-selected {
    border-color: var(--amb-amber);
    background: var(--amb-amber-soft);
    box-shadow: inset 0 0 0 1px var(--amb-amber);
}
.amb-option__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--amb-bg-tint);
    color: var(--amb-amber-dark);
}
.amb-option.is-selected .amb-option__icon { background: #fff; }
.amb-option__icon svg { width: 24px; height: 24px; }
.amb-option__text { display: flex; flex-direction: column; gap: 2px; }
.amb-option__label { font-weight: 700; line-height: 1.25; }
.amb-option__hint { font-size: 0.82rem; color: var(--amb-slate); }
.amb-option__check {
    position: absolute;
    top: 10px; right: 10px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--amb-amber);
    color: #1c1a12;
    display: none;
    place-items: center;
}
.amb-option.is-selected .amb-option__check { display: grid; }

/* Fusszeile mit Navigation ------------------------------------------- */
.amb-berater__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--amb-space-3);
    padding: var(--amb-space-4) var(--amb-space-6);
    border-top: 1px solid var(--amb-line);
    background: var(--amb-bg-soft);
    flex-wrap: wrap;
}
.amb-berater__foot-hint { font-size: 0.85rem; color: var(--amb-muted); }
.amb-linkbtn {
    background: none; border: none; padding: 8px 4px;
    font-family: var(--amb-font); font-size: 0.95rem; font-weight: 600;
    color: var(--amb-slate); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.amb-linkbtn:hover { color: var(--amb-ink); }
.amb-linkbtn[disabled] { opacity: 0.4; cursor: default; }

/* =====================================================================
   Ergebnis / Empfehlung
   ===================================================================== */
.amb-result__hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--amb-space-6);
    align-items: center;
}
.amb-result__media {
    background: radial-gradient(120% 120% at 50% 20%, #ffffff 0%, var(--amb-bg-soft) 70%);
    border: 1px solid var(--amb-line);
    border-radius: var(--amb-r);
    padding: var(--amb-space-4);
    text-align: center;
}
.amb-result__media img { max-height: 260px; width: auto; margin: 0 auto; }
.amb-result__eyebrow {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--amb-amber-dark);
}
.amb-result__name {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    margin: 6px 0 4px;
    text-transform: uppercase;       /* wie die Original-Headlines */
}
.amb-result__name span { color: var(--amb-amber); }
.amb-result__tag { color: var(--amb-slate); margin-bottom: var(--amb-space-3); }
.amb-result__reason {
    background: var(--amb-amber-soft);
    border: 1px solid var(--amb-amber-ring);
    border-radius: var(--amb-r);
    padding: var(--amb-space-4);
    color: var(--amb-ink);
    margin-bottom: var(--amb-space-4);
}
.amb-result__reason strong { color: var(--amb-amber-dark); }

/* Spezifikations-Grid ------------------------------------------------- */
.amb-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--amb-space-3);
    margin-top: var(--amb-space-5);
}
.amb-spec {
    border: 1px solid var(--amb-line);
    border-radius: var(--amb-r-sm);
    padding: var(--amb-space-3) var(--amb-space-4);
    background: var(--amb-bg);
}
.amb-spec__k {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--amb-muted);
    display: block; margin-bottom: 2px;
}
.amb-spec__v { font-weight: 600; color: var(--amb-ink); }

/* Hinweise / Klaerung ------------------------------------------------- */
.amb-notes { margin-top: var(--amb-space-5); display: grid; gap: var(--amb-space-2); }
.amb-note {
    display: flex; gap: 10px; align-items: flex-start;
    padding: var(--amb-space-3) var(--amb-space-4);
    border-radius: var(--amb-r-sm);
    background: var(--amb-bg-soft);
    border: 1px solid var(--amb-line);
    font-size: 0.92rem; color: var(--amb-slate);
}
/* WICHTIG: Inline-SVGs ohne width-Attribut wuerden sonst auf 100% Breite
   aufblasen – daher hier hart begrenzen. */
.amb-note svg {
    flex: 0 0 auto; margin-top: 2px;
    width: 18px; height: 18px;
    color: var(--amb-amber-dark);
}
.amb-note--check svg { color: var(--amb-green); }
.amb-option__check svg { width: 12px; height: 12px; }

/* Zubehoer-Empfehlung ------------------------------------------------- */
.amb-accessory {
    margin-top: var(--amb-space-5);
}
.amb-accessory h4 { font-size: 1rem; margin-bottom: var(--amb-space-2); }
.amb-accessory__list { display: flex; flex-wrap: wrap; gap: var(--amb-space-2); }

/* Anfragetext --------------------------------------------------------- */
.amb-request {
    margin-top: var(--amb-space-6);
    border: 1px solid var(--amb-line);
    border-radius: var(--amb-r);
    overflow: hidden;
}
.amb-request__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--amb-space-3); flex-wrap: wrap;
    padding: var(--amb-space-3) var(--amb-space-4);
    background: var(--amb-bg-soft);
    border-bottom: 1px solid var(--amb-line);
}
.amb-request__head h4 { margin: 0; font-size: 0.98rem; }
.amb-request textarea {
    width: 100%;
    border: none;
    padding: var(--amb-space-4);
    font-family: var(--amb-font);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--amb-ink);
    resize: vertical;
    min-height: 150px;
    background: var(--amb-bg);
}
.amb-request textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--amb-amber-ring); }

/* CTA-Reihe ----------------------------------------------------------- */
.amb-result__cta {
    margin-top: var(--amb-space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--amb-space-3);
}
.amb-copy-status {
    font-size: 0.85rem; font-weight: 600; color: #2aa737;
    align-self: center;
    opacity: 0; transition: opacity .2s ease;
}
.amb-copy-status.is-visible { opacity: 1; }

/* Steps-Fade ---------------------------------------------------------- */
.amb-step { animation: amb-fade .35s ease; }
@keyframes amb-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* =====================================================================
   Miete-Schritt (Mietstart / Mietdauer) & Anfrage-Formular
   ===================================================================== */
.amb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--amb-space-4); }
.amb-field label {
    display: block;
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--amb-slate);
    margin-bottom: 6px;
}
.amb-field input,
.amb-field select,
.amb-field textarea {
    width: 100%;
    font-family: var(--amb-font);
    font-size: 1rem;
    color: var(--amb-ink);
    padding: 12px 14px;
    border: 2px solid var(--amb-line-strong);
    border-radius: var(--amb-r-sm);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.amb-field input:focus,
.amb-field select:focus,
.amb-field textarea:focus {
    outline: none;
    border-color: var(--amb-amber);
    box-shadow: 0 0 0 3px var(--amb-amber-ring);
}
.amb-field--error input,
.amb-field--error select { border-color: #d64545; }
.amb-step__continue { margin-top: var(--amb-space-5); display: flex; justify-content: flex-end; }

/* Anfrage-Formular unter dem Ergebnis --------------------------------- */
.amb-anfrage { margin-top: var(--amb-space-7); }
.amb-anfrage.amb-hide { display: none; }
.amb-anfrage__card {
    max-width: 900px; margin: 0 auto;
    background: var(--amb-bg);
    border: 1px solid var(--amb-line);
    border-radius: var(--amb-r-lg);
    box-shadow: var(--amb-shadow-lg);
    overflow: hidden;
}
.amb-anfrage__head {
    background: var(--amb-dark);
    border-bottom: 3px solid var(--amb-amber);
    padding: var(--amb-space-5) var(--amb-space-6);
}
.amb-anfrage__head h2 {
    color: #fff; text-transform: uppercase;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin: 0;
}
.amb-anfrage__head h2 span { color: var(--amb-amber); }
.amb-anfrage__head p { color: #cfd2d6; margin: 8px 0 0; font-size: 0.95rem; }
.amb-anfrage__body { padding: var(--amb-space-6); }
.amb-anfrage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--amb-space-4); }
.amb-anfrage__grid .amb-field--full { grid-column: 1 / -1; }
.amb-anfrage__consent {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: var(--amb-space-4);
    font-size: 0.9rem; color: var(--amb-slate);
}
.amb-anfrage__consent input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--amb-amber); }
.amb-anfrage__submit { margin-top: var(--amb-space-5); }
.amb-anfrage__success {
    background: #d4edda; border: 1px solid #c3e6cb; color: #155724;
    border-radius: var(--amb-r); padding: 28px 24px; text-align: center;
}
.amb-anfrage__success h3 { color: #155724; text-transform: uppercase; }
.amb-anfrage__error {
    background: #fdecea; border: 1px solid #f5c6cb; color: #721c24;
    border-radius: var(--amb-r-sm); padding: 12px 16px; margin-bottom: var(--amb-space-4);
    font-weight: 600; font-size: 0.95rem;
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 680px) {
    .amb-fields, .amb-anfrage__grid { grid-template-columns: 1fr; }
    .amb-anfrage__body { padding: var(--amb-space-5) var(--amb-space-4); }
    .amb-anfrage__head { padding: var(--amb-space-4); }
}
@media (max-width: 680px) {
    .amb-berater__body { padding: var(--amb-space-5) var(--amb-space-4); }
    .amb-berater__head { padding: var(--amb-space-4) var(--amb-space-4) var(--amb-space-3); }
    .amb-berater__foot { padding: var(--amb-space-3) var(--amb-space-4); }
    .amb-result__hero { grid-template-columns: 1fr; text-align: center; }
    .amb-result__media img { max-height: 220px; }
    .amb-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .amb-step, .amb-progress__bar { animation: none; transition: none; }
}

/* =====================================================================
   Layout der Produktberater-SEITE (produktberater.php + Vorschau)
   ===================================================================== */
.amb-page { background: linear-gradient(180deg, var(--amb-bg) 0%, var(--amb-bg-soft) 100%); padding: 40px 0 72px; }
.amb-page__intro { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.amb-page__intro .amb-section-lead { margin: 0 auto; }
.amb-page__intro h1 { text-transform: uppercase; }
.amb-page__intro h1 span { color: var(--amb-amber); }
.amb-page__trust { margin-top: 44px; }
.amb-steps-hint {
    display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
    margin: 22px auto 0; max-width: 760px; color: var(--amb-slate); font-size: .92rem; font-weight: 600;
}
.amb-steps-hint span { display: inline-flex; align-items: center; gap: 8px; }
.amb-steps-hint b {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--amb-amber-soft); color: var(--amb-amber-dark); font-size: .8rem;
    border: 1px solid var(--amb-amber-ring);
}

/* Inhalts-/SEO-Bereich unter dem Berater */
.amb-content { margin-top: 72px; }
.amb-content__head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.amb-content__head h2 { text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
.amb-content__head h2 span { color: var(--amb-amber); }

/* Modellueberblick */
.amb-modelle {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px; margin-bottom: 20px;
}
.amb-modell {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--amb-line);
    border-radius: var(--amb-r); overflow: hidden; text-decoration: none;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.amb-modell:hover { transform: translateY(-3px); box-shadow: var(--amb-shadow); border-color: var(--amb-line-strong); text-decoration: none; }
.amb-modell__media { background: linear-gradient(180deg,#fff,var(--amb-bg-soft)); padding: 16px; text-align: center; }
.amb-modell__media img { height: 150px; width: auto; max-width: 100%; }
.amb-modell__body { padding: 14px 16px 18px; border-top: 1px solid var(--amb-line); }
.amb-modell__name { font-weight: 700; text-transform: uppercase; color: var(--amb-ink); font-size: 1rem; }
.amb-modell__name b { color: var(--amb-amber-dark); }
.amb-modell__meta { color: var(--amb-slate); font-size: .85rem; margin: 4px 0 10px; line-height: 1.5; }
.amb-modell__link { color: var(--amb-amber-dark); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.amb-content__cta { text-align: center; margin: 8px 0 8px; }

/* Entscheidungshilfe */
.amb-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 40px 0; }
.amb-guide__col { background: var(--amb-bg-soft); border: 1px solid var(--amb-line); border-radius: var(--amb-r); padding: 22px 24px; }
.amb-guide__col h3 { text-transform: uppercase; font-size: 1.05rem; }
.amb-guide__col h3 span { color: var(--amb-amber-dark); }
.amb-guide__col ul { margin: 10px 0 0; padding: 0; list-style: none; }
.amb-guide__col li { position: relative; padding-left: 24px; margin-bottom: 8px; color: var(--amb-slate); font-size: .95rem; }
.amb-guide__col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--amb-amber); border-radius: 2px; }
.amb-guide__col li b { color: var(--amb-ink); }

/* Sichtbare FAQ (native details/summary, SEO-konform) */
.amb-faq { max-width: 820px; margin: 40px auto 0; }
.amb-faq__item { border: 1px solid var(--amb-line); border-radius: var(--amb-r-sm); margin-bottom: 10px; background: #fff; overflow: hidden; }
.amb-faq__item summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    font-weight: 700; color: var(--amb-ink); display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.amb-faq__item summary::-webkit-details-marker { display: none; }
.amb-faq__item summary::after { content: "+"; color: var(--amb-amber-dark); font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.amb-faq__item[open] summary::after { content: "\2013"; }
.amb-faq__item[open] summary { border-bottom: 1px solid var(--amb-line); }
.amb-faq__answer { padding: 16px 20px; color: var(--amb-slate); font-size: .95rem; line-height: 1.65; }

@media (max-width: 680px) {
    .amb-guide { grid-template-columns: 1fr; }
    .amb-content { margin-top: 52px; }
}