/* ============================================================
   PAGE-V5 · Lead-Seiten (Suchagent + Tippgeber) — gemeinsame Stylesheet
   Form-Hero (Text + Formular-Karte) · numerierte Schritte · Kriterien-Checkliste
   · FAQ einspaltig. Lädt NACH tokens → base → page. UI=Sans, Serife nur Display,
   Hairlines, Sand-Panels, EIN Bordeaux-Akzent, Gold nur ★.
   ============================================================ */

.nav__menu a[aria-current="page"]::after { transform: scaleX(1); }
.fh, .st, .kr, .fq { scroll-margin-top: 88px; }
.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; }

/* ============================================================
   Form-Hero = form-hero: Text links + weiße Formular-Karte rechts (Sand-Section).
   ============================================================ */
.fh { background: var(--surface-sand); border-bottom: 1px solid var(--border-light); }
.fh__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.fh__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.fh__h1 { margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 560; font-size: clamp(2rem, 3.3vw, 2.8rem); line-height: 1.12; letter-spacing: -.005em; max-width: 20ch; }
.fh__h1 em { font-style: italic; color: var(--brand); }
.fh__sub { margin-top: var(--sp-3); color: var(--text-on-light-dim); font-size: 1.02rem; line-height: 1.6; max-width: 54ch; }
.fh__sub a { color: var(--brand); }
.fh__trust { margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-on-light); }
.fh__trust svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.fh__card { background: var(--surface-light-2); border: 1px solid var(--border-light); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 18px 44px rgba(43,35,32,.08); }
.fh__card-q { font-weight: 700; font-size: 1.05rem; color: var(--text-on-light); margin-bottom: var(--sp-3); }
.fh__row { display: grid; gap: var(--sp-2); }
.fh__row + .fh__row { margin-top: var(--sp-3); }
.fh__row--split { grid-template-columns: 1fr 1fr; }
.fh__field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.fh__field label { font-size: .82rem; font-weight: 600; color: var(--text-on-light); }
.fh__card .btn { margin-top: var(--sp-4); width: 100%; }
.fh__note { margin-top: var(--sp-3); display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; color: var(--text-on-light-dim); line-height: 1.5; }
.fh__note svg { flex: none; width: 16px; height: 16px; color: var(--brand); margin-top: 2px; }
textarea.input { min-height: 96px; resize: vertical; }

/* ============================================================
   Schritte = process-timeline: numerierte Spalten (statisch, kein JS).
   Große Bodoni-Ziffer + Bordeaux-Hairline + Titel + Text.
   ============================================================ */
.st__grid { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--st-cols, 3), 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.st__step { display: flex; flex-direction: column; }
.st__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; }
.st__rule { width: 36px; height: 1px; border: 0; background: var(--brand); margin: var(--sp-2) 0 var(--sp-3); }
.st__title { font-size: 1.12rem; line-height: 1.3; }
.st__text { margin-top: .5rem; font-size: .93rem; color: var(--text-on-light-dim); line-height: 1.6; }

/* ============================================================
   Kriterien = checklist: 3 Karten (Sand-Häkchen-Kreis + Titel + Text).
   ============================================================ */
.kr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.kr__card { background: var(--surface-light-2); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--sp-4); }
.kr__ic { width: 46px; height: 46px; border-radius: 999px; background: var(--surface-sand); color: var(--brand); display: grid; place-items: center; margin-bottom: var(--sp-2); }
.kr__ic svg { width: 22px; height: 22px; stroke-width: 2.4; }
.kr__card h3 { font-size: 1.08rem; }
.kr__card p { margin-top: .45rem; font-size: .93rem; color: var(--text-on-light-dim); line-height: 1.6; }

/* ============================================================
   FAQ = faq einspaltig, zentriert.
   ============================================================ */
.fq__wrap { max-width: 820px; margin-inline: auto; }
.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: 72ch; }
.fq__a a { color: var(--brand); }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
  .fh__grid { grid-template-columns: 1fr; }
  .st__grid { grid-template-columns: 1fr 1fr; }
  .kr__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fh__row--split { grid-template-columns: 1fr; }
  .st__grid { grid-template-columns: 1fr; }
}