/* ============================================================
   PAGE-V5 · Bewertung (Immobilienbewertung) · Funnel/Lead-Seite
   Selbst-tragend: reused v5-Blöcke (.vw/.sc/.rv/.ab2/.rc/.fq/.cf) 1:1 aus
   der Milan-freigegebenen Linie + neue Blöcke (value-prop-Split, comparison,
   gutachten, mid-cta, feature-grid). Lädt NACH tokens → base → page.
   UI = Sans, Serife nur Display, Hairlines, Sand-Panels, EIN Bordeaux-Akzent,
   Gold nur ★. §11.3: Funnel/Lead = Form-Hero (Text links + Widget rechts).
   ============================================================ */

.nav__menu a[aria-current="page"]::after { transform: scaleX(1); }
.vw, .sc, .wb, .rv, .ov, .gu, .mc, .wf, .ab2, .rc, .fq, .cf { scroll-margin-top: 88px; }
.vw__lead, .fq__col { min-width: 0; }
.ck { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--surface-sand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.ck svg { width: 13px; height: 13px; }

/* ============================================================
   1 · hero = Form-Hero (Fundus form-hero, §11.3) — .vw-Widget als HERO.
   Dunkel: Text links (H1, Sub, 4 Trust-Chips, Google-Badge) + Panel rechts
   (3 Typ-Karten Haus/Wohnung/Grundstück + CTA). EPF-ehrlich: Lead für die
   Vor-Ort-Bewertung, kein Sofort-Ergebnis.
   ============================================================ */
.vw__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vw--hero { padding-top: clamp(3rem, 6vw, 5rem); }
.vw__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-glow); }
.vw__title { font-family: var(--font-display); font-weight: 560; font-size: var(--fs-h2); line-height: 1.1; color: var(--text-on-dark); margin-top: var(--sp-1); }
.vw--hero .vw__title { font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -.005em; }
.vw__title em { font-style: italic; color: var(--brand-glow); }
.vw__text { margin-top: var(--sp-2); color: var(--text-on-dark-dim); }
.vw__chips { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.vw__chips li { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-on-dark); }
.vw__chips svg { width: 16px; height: 16px; color: var(--brand-glow); flex: none; }
.vw__proof { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.vw .bwt__gbadge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; color: var(--text-on-dark); background: var(--glass); border: 1px solid var(--glass-bd); font-size: .9rem; }
.vw .bwt__gbadge .g-logo { width: 20px; height: 20px; display: inline-flex; flex: none; }
.vw .bwt__gbadge .g-logo svg { width: 20px; height: 20px; display: block; }
.vw .bwt__gbadge .stars { color: var(--accent-2); letter-spacing: 1px; }
.vw .bwt__gbadge .val strong { color: var(--text-on-dark); font-weight: 700; }
.vw__proof-note { font-size: var(--fs-small); color: var(--text-on-dark-dim); max-width: 34ch; }
.vw__panel { background: var(--surface-light-2); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); color: var(--text-on-light); }
.vw__panel-q { font-weight: 700; font-size: 1.02rem; color: var(--text-on-light); }
.vw__types { margin-top: var(--sp-3); display: flex; flex-direction: column; }
.vw__type { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--border-light); text-decoration: none; color: var(--text-on-light); transition: transform var(--dur) var(--ease); }
.vw__type:first-child { border-top: 0; }
.vw__type-ic { flex: none; width: 42px; height: 42px; border-radius: 999px; background: var(--surface-sand); color: var(--brand); display: grid; place-items: center; }
.vw__type-ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.vw__type-label { font-weight: 600; }
.vw__type-arr { margin-left: auto; color: var(--brand); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .vw__type:hover { transform: translateX(4px); } }
.vw__cta { margin-top: var(--sp-4); width: 100%; }

/* ============================================================
   2 · anlaesse = special-cases (.sc) — 4 Lebenslagen-Karten, 1:1 aus v5.
   Sand-Icon-Kreise (kein Rosa), Bordeaux-Line-Icons, Hairline-Karten.
   ============================================================ */
.sc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.sc__card { background: var(--surface-light-2); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--sp-4); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .sc__card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(43, 35, 32, .09); } }
.sc__card .ic { width: 46px; height: 46px; border-radius: 999px; background: var(--surface-sand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-2); }
.sc__card .ic svg { width: 22px; height: 22px; stroke-width: 1.5; }
.sc__card h3 { font-size: 1.12rem; }
.sc__card p { margin-top: .45rem; font-size: .93rem; color: var(--text-on-light-dim); }
.sc__card p a { color: var(--brand); }

/* ============================================================
   3 · warum-bewertung = value-prop (Fundus vorteile-02): Foto links +
   4-Item-Liste rechts (Icon-Square + Titel + Text). Hell.
   ============================================================ */
.wb__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: var(--sp-5); }
.wb__photo { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-sand); }
.wb__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.wb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wb__item { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--border-light); align-items: flex-start; }
.wb__item:first-child { border-top: 0; padding-top: 0; }
.wb__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-sand); color: var(--brand); display: grid; place-items: center; }
.wb__ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.wb__item > div { min-width: 0; }
.wb__it-title { font-weight: 700; color: var(--text-on-light); font-size: 1.06rem; }
.wb__it-text { margin-top: .35rem; font-size: .93rem; color: var(--text-on-light-dim); line-height: 1.6; }

/* ============================================================
   4 · kundenstimmen = testimonial (.rv) — dunkles Trust-Band + Google-Badge
   + Experten-Karte (Cornelia-Statement) + Elfsight-Live-Slot.
   ============================================================ */
.rv__head { max-width: 760px; margin-inline: auto; text-align: center; }
.rv__head h2 { color: var(--text-on-dark); }
.rv__head h2 em { font-style: italic; color: var(--brand-glow); }
.rv__proof { margin-top: var(--sp-3); display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.rv__gbadge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-bd); font-size: .9rem; color: var(--text-on-dark); }
.rv__gbadge .g-logo { width: 20px; height: 20px; display: inline-flex; flex: none; }
.rv__gbadge .g-logo svg { width: 20px; height: 20px; display: block; }
.rv__gbadge .stars { color: var(--accent-2); letter-spacing: 1px; }
.rv__gbadge .val strong { color: var(--text-on-dark); font-weight: 700; }
.rv__all { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-on-dark); text-decoration: none; }
.rv__all::after { content: "→"; color: var(--brand-glow); }
.rv__all:hover { color: var(--brand-glow); }
/* Experten-Karte (Cornelia) */
.ez .rv__expert { margin-top: 0; }
.rv__expert { margin: var(--sp-5) auto 0; max-width: 880px; background: var(--surface-dark-2); border: 1px solid var(--glass-bd); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem); display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
.rv__expert-photo { width: 132px; height: 132px; border-radius: 999px; overflow: hidden; flex: none; background: var(--surface-sand); }
.rv__expert-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.rv__expert-body { min-width: 0; }
.rv__expert-quote { font-family: var(--font-display); font-weight: 560; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.4; color: var(--text-on-dark); }
.rv__expert-name { margin-top: var(--sp-3); font-weight: 700; color: var(--text-on-dark); }
.rv__expert-cred { font-size: var(--fs-small); color: var(--text-on-dark-dim); }
.rv__widget { margin: var(--sp-4) auto 0; max-width: 1000px; }
.rv__slot { border: 1px dashed var(--glass-bd); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; color: var(--text-on-dark-dim); background: var(--glass); }
.rv__slot-ic { width: 34px; height: 34px; margin: 0 auto var(--sp-2); color: var(--brand-glow); }
.rv__slot-ic svg { width: 100%; height: 100%; }
.rv__slot b { display: block; color: var(--text-on-dark); font-weight: 600; font-size: 1.02rem; }
.rv__slot span { display: block; margin-top: .4rem; font-size: var(--fs-small); }

/* ============================================================
   5 · online-vs-persoenlich = comparison (hell, 2 Karten) — Online =
   dezente Karte, Persönlich = Sand-Favorit-Karte. Fazit-Zeile je Karte.
   ============================================================ */
.ov__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); align-items: start; }
.ov__card { border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--border-light); }
.ov__card--online { background: var(--surface-light-2); }
.ov__card--vor { background: var(--surface-sand); }
.ov__card-head { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border-light); }
.ov__card-ic { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; }
.ov__card--online .ov__card-ic { background: var(--surface-sand); color: var(--text-on-light-dim); }
.ov__card--vor .ov__card-ic { background: var(--surface-light-2); color: var(--brand); }
.ov__card-head h3 { font-size: 1.15rem; font-weight: 700; }
.ov__card p { color: var(--text-on-light-dim); font-size: .95rem; }
.ov__card p + p { margin-top: var(--sp-2); }
.ov__verdict { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-light); font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.ov__card--online .ov__verdict { color: var(--text-on-light); }
.ov__card--vor .ov__verdict { color: var(--brand); }
.ov__verdict svg { width: 18px; height: 18px; flex: none; }
.ov__cta { margin-top: var(--sp-4); text-align: center; }

/* ============================================================
   6 · gutachten-abgrenzung = comparison (hell) — oben 3 Verfahren-Karten
   (Vergleichs-/Ertrags-/Sachwert), darunter 2-Karten-Vergleich
   (Markteinschätzung = Favorit vs. Verkehrswertgutachten).
   ============================================================ */
.gu__methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.gu__method { background: var(--surface-light-2); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--sp-4); }
.gu__method h3 { font-size: 1.05rem; }
.gu__method h3::before { content: ""; display: block; width: 28px; height: 2px; background: var(--brand); margin-bottom: var(--sp-2); }
.gu__method p { margin-top: .5rem; font-size: .92rem; color: var(--text-on-light-dim); }
.gu__compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); align-items: start; }
.gu__cc { border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.gu__cc--ours { background: var(--surface-sand); border: 1px solid var(--border-light); }
.gu__cc--other { background: var(--surface-light-2); border: 1px solid var(--border-light); }
.gu__cc-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; margin-bottom: var(--sp-2); }
.gu__cc--ours .gu__cc-tag { background: var(--brand); color: var(--surface-light-2); }
.gu__cc--other .gu__cc-tag { background: var(--surface-sand); color: var(--text-on-light-dim); }
.gu__cc h3 { font-size: 1.15rem; }
.gu__cc p { margin-top: var(--sp-2); color: var(--text-on-light-dim); font-size: .95rem; }

/* ============================================================
   7 · mid-cta = cta-banner (dunkles Kontrast-Band) — H2 + Sub + CTA zentriert.
   ============================================================ */
.mc__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.mc__inner h2 { color: var(--text-on-dark); }
.mc__inner h2 em { font-style: italic; color: var(--brand-glow); }
.mc__sub { margin-top: var(--sp-2); color: var(--text-on-dark-dim); }
.mc__cta { margin-top: var(--sp-4); }

/* ============================================================
   8 · wertfaktoren = feature-grid (hell, 3×2 Icon-Kacheln).
   ============================================================ */
.wf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.wf__card { background: var(--surface-light-2); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--sp-4); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .wf__card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(43, 35, 32, .09); } }
.wf__ic { width: 46px; height: 46px; border-radius: 999px; background: var(--surface-sand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-2); }
.wf__ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.wf__card h3 { font-size: 1.08rem; }
.wf__card p { margin-top: .45rem; font-size: .92rem; color: var(--text-on-light-dim); }

/* ============================================================
   9 · ablauf = process-timeline (.ab2 Stage-Stepper), 1:1 aus v5, 4 Schritte.
   ============================================================ */
.ab2 { padding-block: var(--sy); background: var(--surface-light); }
.ab2__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; margin-bottom: var(--sp-4); }
.ab2__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--sp-2); }
.ab2__h2 { font-family: var(--font-display); font-weight: 560; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: .005em; color: var(--text-on-light); margin: 0; }
.ab2__h2 em { font-style: italic; color: var(--brand); }
.ab2__sub { font-size: 1.02rem; line-height: 1.6; color: var(--text-on-light-dim); margin: 0; max-width: 46ch; }
.ab2__stage { background: var(--surface-sand); border: 1px solid var(--border-light); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); }
.ab2__ticks { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.25rem); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); list-style: none; padding: 0; }
.ab2__tick { flex: 1 1 0; min-width: 0; }
.ab2__tick-btn { display: flex; flex-direction: column; gap: .55rem; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--text-on-light-dim); }
.ab2__tick-bar { height: 4px; width: 100%; border-radius: 999px; background: var(--border-light); transition: background-color var(--dur) var(--ease); }
.ab2__tick-label { font-family: var(--font-text); font-size: .8rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab2__tick-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.ab2__tick.is-active .ab2__tick-bar { background: var(--brand); }
.ab2__tick.is-active .ab2__tick-label { color: var(--text-on-light); }
@media (hover: hover) and (pointer: fine) { .ab2__tick-btn:hover .ab2__tick-bar { background: var(--brand-deep); } }
.ab2__viewport { position: relative; }
.ab2__panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ab2__panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .ab2__panel:not([hidden]) { animation: ab2-fade var(--dur) var(--ease) both; } }
@keyframes ab2-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ab2__copy { display: flex; flex-direction: column; }
.ab2__step-title { font-family: var(--font-display); font-weight: 560; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.14; letter-spacing: .005em; color: var(--text-on-light); margin: 0 0 var(--sp-3); }
.ab2__step-text { font-size: var(--fs-body); line-height: 1.62; color: var(--text-on-light-dim); margin: 0; max-width: 52ch; }
.ab2__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-light); }
.ab2__counter { font-family: var(--font-display); font-weight: 560; letter-spacing: .01em; line-height: 1; color: var(--text-on-light); font-size: clamp(2.4rem, 5vw, 3.4rem); }
.ab2__counter em { font-style: normal; color: var(--brand); }
.ab2__counter .ab2__counter-total { color: var(--text-on-light-dim); font-size: .55em; }
.ab2__nav { display: flex; align-items: center; gap: var(--sp-2); }
.ab2__arrow { width: 52px; height: 52px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border-light); background: var(--surface-light-2); color: var(--text-on-light); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ab2__arrow svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .ab2__arrow:hover { border-color: var(--brand); color: var(--brand); } }
.ab2__arrow:active { transform: scale(.94); transition-duration: 100ms; }
.ab2__arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ab2__arrow[disabled] { opacity: .4; cursor: not-allowed; }
.ab2__arrow[disabled]:hover { border-color: var(--border-light); color: var(--text-on-light); }
.ab2__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface-light-2); border: 1px solid var(--border-light); box-shadow: 0 18px 44px rgba(43,35,32,.12); }
.ab2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   10 · lokaler-markt = regional-content (.rc Foto-Split), 1:1 aus v5.
   ============================================================ */
.rc__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.rc__media { position: sticky; top: 96px; }
.rc__photo { margin: 0; border-radius: var(--radius); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); }
.rc__photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.rc__caption { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--text-on-light-dim); }
.rc__caption svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.rc__body .eyebrow { margin-bottom: var(--sp-2); }
.rc__title { font-family: var(--font-display); font-weight: 560; letter-spacing: .005em; font-size: var(--fs-h2); line-height: 1.1; }
.rc__title em { font-style: italic; color: var(--brand); }
.rc__sub { margin-top: var(--sp-2); color: var(--text-on-light-dim); }
.rc__prosa { margin-top: var(--sp-3); }
.rc__prosa p { color: var(--text-on-light-dim); }
.rc__prosa p + p { margin-top: var(--sp-3); }
.rc__prosa a { color: var(--brand); }
.rc__cta { margin-top: var(--sp-4); }

/* ============================================================
   11 · faq = faq (.fq faq-02: Akkordeon links + Cutout rechts), 1:1 aus v5.
   ============================================================ */
.fq__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.fq__list { margin-top: var(--sp-4); }
.fq__item { border-bottom: 1px solid var(--border-light); }
.fq__item:first-of-type { border-top: 1px solid var(--border-light); }
.fq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: 1.05rem; min-height: 44px; cursor: pointer; font-family: var(--font-text); font-weight: 600; font-size: 1.05rem; list-style: none; }
.fq__item summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .fq__item summary:hover { color: var(--brand); } }
.fq__plus { flex: none; width: 22px; height: 22px; color: var(--brand); display: inline-flex; transition: transform var(--dur) var(--ease); }
.fq__plus svg { width: 100%; height: 100%; }
.fq__item[open] .fq__plus { transform: rotate(45deg); }
.fq__a { padding-bottom: var(--sp-3); color: var(--text-on-light-dim); max-width: 60ch; }
.fq__a p + p { margin-top: var(--sp-2); }
.fq__photo--cutout { position: sticky; top: 96px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #f2ebe0, var(--surface-sand)); border: 1px solid var(--border-light); }
.fq__photo--cutout img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; height: 98%; max-width: none; object-fit: contain; border-radius: 0; filter: drop-shadow(0 18px 28px rgba(43,35,32,.22)); }

/* ============================================================
   12 · finaler-cta = cta-banner (.cf--full Vollbild-Dunkel), 1:1 aus v5.
   ============================================================ */
.cf__card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface-dark); color: var(--text-on-dark); }
.cf__media { position: absolute; inset: 0 0 0 auto; width: 46%; z-index: 0; }
.cf__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf__inner { position: relative; z-index: 1; max-width: 40rem; padding: clamp(2rem, 5vw, 3.5rem); }
.cf__title { font-family: var(--font-display); font-weight: 560; font-size: var(--fs-h2); line-height: 1.1; color: var(--text-on-dark); }
.cf__title em { font-style: italic; color: var(--brand-glow); }
.cf__lead { margin-top: var(--sp-3); color: var(--text-on-dark-dim); max-width: 46ch; }
.cf__claim { margin-top: var(--sp-3); font-family: var(--font-display); font-weight: 560; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.4; color: var(--text-on-dark); }
.cf__roof { margin-top: var(--sp-3); color: var(--brand-glow); }
.cf__roof .roof-ic { width: 34px; height: 16px; }
.cf__cta { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cf__tel { color: var(--text-on-dark-dim); text-decoration: none; font-size: var(--fs-small); }
.cf__tel:hover { color: var(--text-on-dark); }
.cf--full { position: relative; overflow: hidden; }
.cf--full .cf__media { position: absolute; inset: 0 0 0 auto; width: 78%; z-index: 0; }
.cf--full .cf__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.cf--full .cf__media::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, var(--surface-dark) 0%, var(--surface-dark) 22%, rgba(43,35,32,.96) 38%, rgba(43,35,32,.82) 56%, rgba(43,35,32,.55) 78%, rgba(43,35,32,.4) 100%),
    linear-gradient(0deg, var(--surface-dark) 0%, rgba(43,35,32,0) 22%, rgba(43,35,32,0) 82%, var(--surface-dark) 100%); }
.cf--full .container { position: relative; z-index: 1; }
.cf--full .cf__card { background: transparent; border-radius: 0; overflow: visible; }
.cf--full .cf__inner { max-width: 42rem; padding: 0; }
.cf--full .cf__title { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.05; }

/* ============================================================
   Reveal-Delays
   ============================================================ */
html.js .sc__card:nth-child(2){transition-delay:60ms} html.js .sc__card:nth-child(3){transition-delay:120ms} html.js .sc__card:nth-child(4){transition-delay:180ms}
html.js .wf__card:nth-child(2){transition-delay:60ms} html.js .wf__card:nth-child(3){transition-delay:120ms}

/* ============================================================
   Mobile-Pass
   ============================================================ */
@media (max-width: 900px) {
  .vw__inner, .ov__grid, .gu__compare, .rv__expert { grid-template-columns: 1fr; }
  .rv__expert { text-align: center; justify-items: center; }
  .rv__expert-photo { width: 108px; height: 108px; }
  .fq__grid { grid-template-columns: 1fr; }
  .fq__photo--cutout { position: relative; top: auto; aspect-ratio: auto; height: 420px; max-width: 340px; margin: var(--sp-4) auto 0; }
  .cf--full .cf__media { position: absolute; width: 100%; inset: 0; }
  .cf--full .cf__media::after { background: linear-gradient(180deg, rgba(43,35,32,.55) 0%, rgba(43,35,32,.82) 40%, var(--surface-dark) 78%); }
  .cf--full .cf__inner { max-width: none; }
  .sc__grid, .wf__grid, .gu__methods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .wb__grid { grid-template-columns: 1fr; }
  .wb__photo { max-width: 420px; aspect-ratio: 4 / 3; }
  .rc__grid { grid-template-columns: 1fr; }
  .rc__media { position: static; }
  .ab2__head { grid-template-columns: 1fr; align-items: start; gap: var(--sp-2); }
  .ab2__panel { grid-template-columns: 1fr; gap: clamp(1.5rem, 6vw, 2.5rem); }
  .ab2__media { order: -1; }
  .ab2__tick-label { display: none; }
  .ab2__ticks { gap: .6rem; }
}
@media (max-width: 560px) {
  .sc__grid, .wf__grid, .gu__methods { grid-template-columns: 1fr; }
  .ab2__footer { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .ab2__nav { justify-content: space-between; }
}