/* ============================================================
   PAGE-V2 · Verkauf (Fundus-Assembly-Variante)
   Struktur aus components-v2, Skin aus Schneider Art Bible.
   Lädt NACH tokens → base → page. Nur Neues/Overrides dieser Seite.
   Werte ausschließlich aus tokens.css. UI = Sans, Serife nur Display,
   Hairlines, Sand-Panels, ein Bordeaux-Akzent, Gold nur ★.
   ============================================================ */

/* Nav: aktiver Menüpunkt (page-verkauf.css nicht geladen → hier erneut) */
.nav__menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Sektions-Anker unter der Sticky-Nav sauber anspringen */
.pi, .vp1, .pt2, .rc, .fq, .cm, .sc, .vw, .cf { scroll-margin-top: 88px; }

/* Reine Layout-Wrapper (Grid-Kinder ohne eigenes Styling) — definiert für Vollständigkeit */
.cf, .fq__col, .vw__lead { min-width: 0; }

/* Häkchen-Kreis (Sand-Kreis, Bordeaux-Check) — Basis (page-verkauf.css nicht geladen) */
.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 · Sub-Hero (.h06) — 1:1 aus v1/page-verkauf.css übernommen,
   da page-verkauf.css in v2 nicht geladen wird. Freigegebener Hero.
   ============================================================ */
.h06 { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-light); }
.h06__media { position: absolute; inset: 0 0 0 auto; width: 44%; z-index: 0; clip-path: polygon(9% 0, 100% 0, 100% 100%, 20% 100%); }
.h06__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h06__inner { position: relative; z-index: 1; padding-block: clamp(2.25rem, 4vw, 3.4rem); }
.h06__text { max-width: 47rem; }
.h06 .hero__gbadge { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: var(--sp-4); font-size: .9rem; }
.h06 .hero__gbadge .g-logo { width: 20px; height: 20px; display: inline-flex; flex: none; }
.h06 .hero__gbadge .g-logo svg { width: 20px; height: 20px; display: block; }
.h06 .hero__gbadge .g-stars { color: var(--accent-2); letter-spacing: 1px; }
.h06 .hero__gbadge .g-rate { color: var(--text-on-light-dim); }
.h06 .hero__gbadge .g-rate strong { color: var(--text-on-light); font-weight: 700; }
.h06__h1 { font-size: clamp(2rem, 3.3vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; max-width: 20ch; }
.h06__h1 em { font-style: italic; color: var(--brand); }
.h06__lead { margin-top: var(--sp-3); color: var(--text-on-light-dim); font-size: 1.02rem; max-width: 52ch; line-height: 1.6; }
.h06__usps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: 47rem; display: flex; flex-direction: column; gap: var(--sp-3); }
.h06__usps li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.h06__usps strong { font-weight: 700; color: var(--text-on-light); }
.h06__usps li div span { display: block; color: var(--text-on-light-dim); font-size: .88rem; margin-top: .1rem; }
.h06 .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-sand); color: var(--brand); display: grid; place-items: center; margin-top: .1rem; }
.h06 .ck svg { width: 14px; height: 14px; }
.h06__cta { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.h06__cta .cta-note { margin: 0; color: var(--text-on-light-dim); font-size: .82rem; }

/* ============================================================
   2 · pain-intro — REDESIGN v4: VERTIKALE RUHE-SEKTION (kein Seitenbild)
   Zentrierter editorialer Atempunkt; bricht die Split-Kette. Große Bodoni-
   Headline, Prosa in ruhiger Messe-Breite, Gedanken-Liste als 2-Spalten-
   Hairline-Raster, Bordeaux-Kanten-Zitat als Abschluss. Text 1:1.
   ============================================================ */
.pi--calm { text-align: center; }
.pi__lede { max-width: 46rem; margin-inline: auto; }
.pi__title { font-family: var(--font-display); font-weight: 560; letter-spacing: .005em; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
.pi__title em { font-style: italic; color: var(--brand); }
.pi__text { margin-top: var(--sp-3); color: var(--text-on-light-dim); text-align: left; }
.pi__lede .pi__text:first-of-type { margin-top: var(--sp-4); }
.pi__thoughts { list-style: none; max-width: 52rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 4vw, 3rem); text-align: left; }
.pi__thoughts li { display: flex; align-items: flex-start; gap: .65rem; padding-block: .85rem; border-top: 1px solid var(--border-light); font-weight: 600; font-size: .98rem; }
.pi__thoughts li:nth-child(1), .pi__thoughts li:nth-child(2) { border-top: 0; }
.pi__thoughts li:last-child { grid-column: 1 / -1; max-width: calc(50% - clamp(.75rem, 2vw, 1.5rem)); }
.pi__thoughts .ic { flex: none; width: 20px; height: 20px; color: var(--brand); margin-top: 2px; }
.pi__thoughts .ic svg { width: 100%; height: 100%; stroke-width: 1.8; }
.pi__trust { max-width: 44rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; border-left: 3px solid var(--brand); padding-left: var(--sp-3); text-align: left; font-family: var(--font-display); font-weight: 560; font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.4; color: var(--text-on-light); }

/* ============================================================
   3 · stat-bar — Fundus proof-stats-03 (Card + vertikale Hairline-Divider)
   Skin-Move: Fast-Weiß-Card, Bordeaux-Line-Icons, Bodoni-Zahlen? →
   Regel §2/§9.3: Stat-Zahlen SANS. Vertikale Hairlines zwischen Zellen.
   ============================================================ */
.ps { padding-block: var(--sy); }
.ps__card { background: var(--surface-light-2); border: 1px solid var(--border-light); border-radius: var(--radius); display: grid; grid-template-columns: repeat(3, 1fr); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.ps__stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.ps__stat + .ps__stat { border-left: 1px solid var(--border-light); }
.ps__stat .ic { width: 28px; height: 28px; color: var(--brand); }
.ps__stat b { font-family: var(--font-text); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--text-on-light); line-height: 1; letter-spacing: -.01em; }
.ps__stat span:last-child { display: block; font-size: var(--fs-small); color: var(--text-on-light-dim); }

/* ============================================================
   4 · usp — Fundus value-prop-01 (Featured-Karte + 4er-Grid) · HELL geskinnt
   Skin-Move: Sand-Featured-Karte (stärkste USP) mit Bodoni-Titel + echter
   EPF-Zahl (30) rechts; darunter 3 Fast-Weiß-Hairline-Karten mit Sand-Kreis-
   Line-Icons (Bordeaux). Ein Bordeaux-Akzent, Hairlines, kein Dunkel-Block.
   ============================================================ */
/* Featured-Karte (Sand) */
.vp1__featured { margin-top: var(--sp-5); background: var(--surface-sand); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3.25rem); display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.vp1__featured-body { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 56ch; }
.vp1__featured-ic { width: 34px; height: 34px; color: var(--brand); }
.vp1__featured-ic svg { width: 100%; height: 100%; }
.vp1__featured-title { font-family: var(--font-display); font-weight: 560; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.12; color: var(--text-on-light); }
.vp1__featured-text { color: var(--text-on-light-dim); font-size: .98rem; }
.vp1__featured-text a { color: var(--brand); }
.vp1__featured-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; border-left: 1px solid var(--border-light); padding-left: clamp(1.5rem, 4vw, 3rem); }
.vp1__featured-num { font-family: var(--font-display); font-weight: 560; font-size: clamp(3.4rem, 6vw, 5rem); line-height: .92; letter-spacing: -.01em; color: var(--brand); }
.vp1__featured-sub { font-family: var(--font-text); font-weight: 600; font-size: 1.05rem; color: var(--text-on-light); margin-top: var(--sp-1); }
.vp1__featured-meta { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-light-dim); margin-top: .35rem; text-align: right; }

/* 3er-Grid (Fast-Weiß-Karten) */
.vp1__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.vp1__card { background: var(--surface-light-2); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .vp1__card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(43, 35, 32, .09); }
}
.vp1__card-ic { flex: none; width: 46px; height: 46px; border-radius: 999px; background: var(--surface-sand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.vp1__card-ic svg { width: 22px; height: 22px; }
.vp1__card-title { font-size: 1.08rem; }
.vp1__card-text { font-size: .93rem; color: var(--text-on-light-dim); }

/* ============================================================
   5 · verkaufsablauf — Fundus process-timeline-02 (editorial große Ziffern in Spalten)
   Fundus DUNKEL → hier HELL (Papier). Header-Reihe (Eyebrow+H2 links, Sub rechts).
   4 Spalten: große Bodoni-Ziffer (Bordeaux) · Bordeaux-Hairline · Titel (Hanken 600)
   · Beleg. Mobil stapeln. Ein Bordeaux-Akzent, kein Dunkel-Block.
   ============================================================ */
.pt2__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(1.25rem, 4vw, 3rem); align-items: end; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.pt2__head h2 { margin-top: var(--sp-2); }
.pt2__sub { color: var(--text-on-light-dim); font-size: 1.02rem; align-self: end; }
.pt2__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.pt2__step { display: flex; flex-direction: column; }
.pt2__num { font-family: var(--font-display); font-weight: 560; font-size: clamp(3rem, 4.5vw, 4.25rem); line-height: .9; letter-spacing: -.01em; color: var(--brand); font-variant-numeric: lining-nums tabular-nums; }
.pt2__rule { width: 36px; height: 1px; border: 0; background: var(--brand); margin: var(--sp-2) 0 var(--sp-3); }
.pt2__title { font-size: 1.08rem; line-height: 1.3; }
.pt2__text { margin-top: .5rem; font-size: .93rem; color: var(--text-on-light-dim); }

/* ============================================================
   6 · bewertungs-widget — Fundus valuation-widget-01 (Kontrast-Band: Lead links + Karten-Panel rechts)
   EPF-ehrlich: kein Sofort-Ergebnis, kein Sprengnetter, kein erfundener Count.
   Skin-Move: dunkelbraune Section (Hell/Dunkel-Rhythmus), Panel = Fast-Weiß,
   Typ-Zeilen mit Hairlines + translateX-Hover.
   ============================================================ */
.vw__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.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__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 { color: var(--text-on-dark); background: var(--glass); border-color: var(--glass-bd); }
.vw .bwt__gbadge .stars { color: var(--accent-2); }
.vw .bwt__gbadge .val strong { color: var(--text-on-dark); }
.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%; }

/* ============================================================
   7 · lokaler-markt — REDESIGN v5: BILD-DOMINANTES BAND (Startseiten-.geo__band-DNA)
   Panorama füllt die VOLLE Sektionsbreite als Hintergrund (100vw-Technik über
   left/right:50%/-50vw, kein Negativ-Margin-Bleed → kein Mobile-H-Overflow).
   Bild bleibt dominant (rechts frei sichtbar); Text sitzt links auf einem
   Papier-Scrim-Verlauf DARÜBER (Kontrast ≥4.5:1).
   ============================================================ */
/* ---- Markt (regional-content-02: Foto-Split + sticky) ---- */
.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); }

/* ============================================================
   8 · faq — Fundus faq-02 (zweispaltig: Header+Akkordeon links, Foto rechts)
   Native <details>/<summary>, Hairline-Zeilen, Plus→× rotiert.
   Skin-Move: Foto rechts sticky auf ruhiger Fläche.
   ============================================================ */
.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__photo { margin: 0; border-radius: var(--radius); overflow: hidden; position: sticky; top: 96px; }
.fq__photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 4; }

/* ============================================================
   9 · mit-oder-ohne-makler — Fundus comparison-01 (zwei Karten nebeneinander, dunkle Section)
   Skin-Move: dunkelbraune Section; Mit-Makler-Karte = Sand-Panel mit
   Bordeaux-Checks (der laute Akteur), Ohne-Makler = dezente Glass-Karte
   mit dünnen ×; Aspekt als Bold-Lead-in.
   ============================================================ */
.cm__head { max-width: 720px; margin-inline: auto; text-align: center; }
.cm__head h2 { color: var(--text-on-dark); }
.cm__head h2 em { font-style: italic; color: var(--brand-glow); }
.cm__head .sub { color: var(--text-on-dark-dim); }
.cm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); align-items: start; }
.cm__card { border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.cm__card--pro { background: var(--surface-sand); color: var(--text-on-light); }
.cm__card--con { background: var(--surface-dark-2); color: var(--text-on-dark); border: 1px solid var(--glass-bd); }
.cm__card-head { padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--border-light); }
.cm__card--con .cm__card-head { border-bottom-color: var(--glass-bd); }
.cm__card-head h3 { font-size: 1.15rem; font-weight: 700; }
.cm__card--pro .cm__card-head h3 { color: var(--brand); }
.cm__card--con .cm__card-head h3 { color: var(--text-on-dark-dim); }
.cm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm__list li { display: flex; align-items: flex-start; gap: .7rem; padding-block: var(--sp-2); font-size: .95rem; }
.cm__list li + li { border-top: 1px solid var(--border-light); }
.cm__card--con .cm__list li + li { border-top-color: var(--glass-bd); }
.cm__card--pro .cm__list { color: var(--text-on-light-dim); }
.cm__card--con .cm__list { color: var(--text-on-dark-dim); }
.cm__list b { display: block; font-weight: 700; }
.cm__card--pro .cm__list b { color: var(--text-on-light); }
.cm__card--con .cm__list b { color: var(--text-on-dark); }
.cm__ic { flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; margin-top: 1px; }
.cm__ic svg { width: 13px; height: 13px; }
.cm__ic--pro { background: var(--surface-light-2); color: var(--brand); }
.cm__ic--con { color: var(--text-on-dark-dim); }

/* ============================================================
   10 · situations-block — Fundus special-cases-01 (Lebenslagen-Grid, 4 Karten)
   Skin-Move: Sand-Icon-Kreise (kein Rosa), Bordeaux-Line-Icons, Hairline-Karten,
   zentrierte Trustline mit Bordeaux-Hairlines (aus page.css .trustline).
   ============================================================ */
.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__foot { margin-top: var(--sp-4); }

/* ============================================================
   11 · finaler-cta — Fundus cta-banner-01 (cta-final-02: Dark-Card mit diagonal geclipptem Foto)
   Skin-Move: dunkelbraune Card auf Papier-Section, Foto rechts diagonal
   per clip-path eingeschnitten, brauner Verlauf drüber (kontinuierlich);
   Bordeaux-Glow-Kursiv, Dach-Motiv, Sans-CTA.
   ============================================================ */
.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; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.cf__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface-dark) 0%, rgba(43,35,32,.75) 42%, rgba(43,35,32,.25) 100%); }
.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); }

/* --- REDESIGN v4: finaler CTA als DRAMATISCHER Vollbild-Abschluss
   (Startseiten-.final-DNA statt braver Card): Section full-bleed dunkel,
   Foto blutet zur echten rechten Kante, brauner Verlauf drüber, XL-Headline. --- */
.cf--full { position: relative; overflow: hidden; }
.cf--full .cf__media { position: absolute; inset: 0 0 0 auto; width: 78%; z-index: 0; clip-path: none; }
.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-Overrides für neue Slot-Klassen (Mechanik = main.js .reveal→.in)
   page.css definiert html.js .reveal / .reveal.in bereits global.
   ============================================================ */
html.js .ps__stat:nth-child(2) { transition-delay: 60ms; }
html.js .ps__stat:nth-child(3) { transition-delay: 120ms; }

/* ============================================================
   Mobile-Pass
   ============================================================ */
@media (max-width: 900px) {
  .h06__media { position: relative; width: 100%; height: 220px; inset: auto; clip-path: none; }
  .h06__media img { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%); }
  .h06__text { max-width: none; }

  .vw__inner, .fq__grid, .cm__grid { grid-template-columns: 1fr; }
  .fq__photo { position: static; }
  .fq__photo img { aspect-ratio: 16 / 10; }
  /* usp (value-prop-01): Featured stapelt, Stat-Trenner wird Oben-Hairline; 3er-Grid stapelt */
  .vp1__featured { grid-template-columns: 1fr; gap: var(--sp-3); }
  .vp1__featured-stat { align-items: flex-start; text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--border-light); padding-top: var(--sp-3); }
  .vp1__featured-meta { text-align: left; }
  .vp1__grid { grid-template-columns: 1fr; }
  /* ablauf (process-timeline-02): Header stapelt, Spalten → 2 (Tablet) */
  .pt2__head { grid-template-columns: 1fr; align-items: start; }
  .pt2__sub { align-self: start; }
  .pt2__grid { grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  /* pain-intro (calm): Gedanken-Liste einspaltig, Zitat volle Breite */
  .pi__thoughts { grid-template-columns: 1fr; }
  .pi__thoughts li:nth-child(2) { border-top: 1px solid var(--border-light); }
  .pi__thoughts li:last-child { max-width: none; }
  /* lokaler-markt (img-band): Bild bleibt Vollflächen-Hintergrund; Scrim deckt
     die volle Breite (Text-Kontrast), Bild oben/unten weiter sichtbar. */
  .rc--imgband { padding-block: clamp(3.5rem, 10vw, 5.5rem); }
  .rc--imgband .rc__bg::after { background:
      linear-gradient(180deg, rgba(250,248,245,.35) 0%, rgba(250,248,245,.86) 30%, rgba(250,248,245,.95) 60%, rgba(250,248,245,.86) 100%); }
  .rc__scrim { max-width: none; }
  .ps__card { grid-template-columns: 1fr; }
  .ps__stat + .ps__stat { border-left: 0; border-top: 1px solid var(--border-light); margin-top: 0; padding-top: var(--sp-3); }
  .sc__grid { grid-template-columns: 1fr 1fr; }
  .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; }
}
@media (max-width: 560px) {
  .sc__grid { grid-template-columns: 1fr; }
  .pt2__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V3 · SIGNATURE-PASS (§11 „Signature-Moments")
   Startseiten-DNA auf die geskinnten Fundus-Components graften.
   Reiner Visual-/Kompositions-Pass — keine Textänderung.
   Bausteine 1:1 aus build/schneider/page.css:
   · Cutout-auf-Sand-Panel  (.team__photo)
   · Bordeaux-Kanten-Pull-Quote (.team__statement)
   · Diagonal-Foto-Band full-height (Art-Bible „Diagonale Foto-Bänder")
   · sky-ic Skyline-Divider / roof-ic Akzent (Fidelity-Pass 2)
   ============================================================ */

/* --- P1-Fix FAQ: freigestellter Cutout auf Sand-Panel (Startseiten-.team__photo-DNA)
   ersetzt das kalte Studio-Foto (cornelia-schwarz). Warme Welt gewahrt,
   markanteste Startseiten-Komponente als Person-Signature. --- */
.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; aspect-ratio: auto;
  object-fit: contain; border-radius: 0;
  filter: drop-shadow(0 18px 28px rgba(43,35,32,.22));
}

/* --- Move: Signature-Pull-Quote (Bordeaux-Kante, Bodoni) als Ruhepunkt +
   Kirchheim-Skyline-Divider vor dem finalen CTA. Text 1:1 (vormals .trustline). --- */
.sc__foot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.sig-quote {
  max-width: 46ch; margin: 0;
  border-left: 3px solid var(--brand); padding-left: var(--sp-3);
  text-align: left;
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.35;
  color: var(--text-on-light);
}
.sc__sky { color: var(--brand); opacity: .9; }
.sc__sky .sky-ic { width: clamp(120px, 22vw, 180px); height: auto; }

@media (max-width: 900px) {
  /* FAQ-Cutout mobil: nicht sticky, ruhige Sand-Kachel mit definiter Höhe
     (absolut positioniertes Cutout-img braucht eine feste Panel-Höhe, sonst
     rechnet height:98% eine Über-Breite → H-Overflow). */
  .fq__photo--cutout { position: relative; top: auto; aspect-ratio: auto; height: 420px; max-width: 340px; margin: var(--sp-4) auto 0; }
}

/* ---- 2 · pain-intro (v1-Split: Empathie links, Gedanken-Panel rechts) — Milan-Wunsch ---- */
.vp__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: var(--sp-4); }
.vp__text p { color: var(--text-on-light-dim); }
.vp__text p + p { margin-top: var(--sp-3); }
.vp__trust { margin-top: var(--sp-4); border-left: 3px solid var(--brand); padding-left: var(--sp-3); font-family: var(--font-display); font-weight: 560; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; color: var(--text-on-light); }
.vp__panel { background: var(--surface-sand); border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 2rem); }
.vp__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.vp__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.vp__list li { display: flex; align-items: flex-start; gap: .65rem; padding-block: .75rem; border-top: 1px solid var(--border-light); font-weight: 600; font-size: .98rem; }
.vp__list li:first-child { border-top: 0; }
.vp__list .ic { flex: none; width: 20px; height: 20px; color: var(--brand); margin-top: 2px; }
.vp__list .ic svg { width: 100%; height: 100%; stroke-width: 1.8; }
@media (max-width: 860px){ .vp__grid { grid-template-columns: 1fr; } }

@media (max-width: 860px){ .rc__grid { grid-template-columns: 1fr; } .rc__media { position: static; } }

/* ---- Ablauf = ablauf-02 (heller Stage-Stepper) ---- */
/* ─────────────────────────────────────────────────────────────────
     ABLAUF-ALTERNATIVE A — DB-Spec, Schneider-geskinnt (HELL / Papier).
     Section mit Sand-Stage. Oben Indicator-Bar (4 klickbare Ticks).
     Darunter Viewport, in dem immer GENAU EIN Schritt sichtbar ist
     (display-Toggle, per JS gesetzt). Pro Schritt: links großer H2-Titel
     + Body + Footer mit großem Bodoni-Counter (01 / 04) + Prev/Next-Pfeilen;
     rechts ein 4:3-Foto. Skin: Bodoni Display/Zahlen, Hanken Body,
     Bordeaux-Akzent, Sand-Panel, Hairlines. Ein Radius-System.
     Ohne JS: alle Schritte linear sichtbar (kein Content-Gating).
     Reduced-motion safe.
     ───────────────────────────────────────────────────────────────── */

  .ab2 { padding-block: var(--sy); background: var(--surface-light); }

  /* ── Kopf ─────────────────────────────────────────────────────────── */
  .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; }

  /* ── Stage (Sand-Panel) ───────────────────────────────────────────── */
  .ab2__stage { background: var(--surface-sand); border: 1px solid var(--border-light); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); }

  /* ── Indicator-Bar (Ticks) ────────────────────────────────────────── */
  .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); }
  }

  /* ── Viewport / Schritte ──────────────────────────────────────────── */
  .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; }
  /* [hidden] muss display:grid überstimmen → hartes Override */
  .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); }

  /* ── Foto (4:3) ───────────────────────────────────────────────────── */
  .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; }
  /* Sand-Platzhalter (kein Stock/Personen-Neubau) */
  .ab2__media--ph { display: flex; align-items: center; justify-content: center; background: var(--surface-sand); box-shadow: none; }
  .ab2__ph-label { font-family: var(--font-text); font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-light-dim); }

  /* ── Preview-Hinweis ──────────────────────────────────────────────── */
  .ab2__note { max-width: var(--max); margin: 0 auto var(--sp-2); padding: var(--sp-2) var(--gutter) 0; font-size: .85rem; color: var(--text-on-light-dim); }
  .ab2__note b { color: var(--brand); }

  /* ── Responsive ───────────────────────────────────────────────────── */
  @media (max-width: 860px) {
    .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: 480px) {
    .ab2__footer { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .ab2__nav { justify-content: space-between; }
  }