/* ============================================================
   Nachbauten der GHL-Seiten (/guide, /guide-danke, /onboarding), Stand 21.10.2026.
   Baut auf vsl.css auf; Struktur + Texte 1:1, Design kommt mit dem Redesign.
   ============================================================ */

/* ---- Hero mit Foto ---- */
.g-hero { background-size: cover; background-position: center; color: var(--white); padding: clamp(2.5rem, 6vw, 5rem) 0 !important; }
.g-hero h1 { font: var(--display-lg); color: var(--white); max-width: 18ch; margin: 1.5rem 0 1rem; }
.g-hero--center h1 { margin-left: auto; margin-right: auto; }
.g-hero__inner { max-width: 68rem; }
.g-hero__sub { font: var(--text-lg); max-width: 34rem; margin-bottom: 1.5rem; color: var(--teal-200); }
.g-hero--center .g-hero__sub { margin-left: auto; margin-right: auto; }
.g-hero__note { font: var(--text-sm); color: var(--teal-200); margin-top: 1rem; }
.g-hero p { color: var(--teal-200); }
.g-hl { color: var(--teal-300); text-decoration: underline; text-underline-offset: .2em; }
.g-logo { width: 220px; height: auto; }
.g-hero--center .g-logo { margin: 0 auto; }
.g-mockup { width: min(300px, 70vw); height: auto; margin: 0 0 1.5rem; }

/* ---- Buttons mit Unterzeile ---- */
.g-btn { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; }
.g-btn small { font: var(--text-xs); opacity: .8; }
.g-btn--wide { width: min(100%, 40rem); }

/* ---- "Stell dir vor" ---- */
.g-rings { background: var(--white) center / min(1200px, 120vw) no-repeat; }
.g-pairs { display: grid; gap: 1rem 1.5rem; grid-template-columns: 1fr 1fr; align-items: center; max-width: 52rem; margin: 0 auto 3rem; }
@media (min-width: 860px) { .g-pairs { grid-template-columns: repeat(4, 1fr); } }
.g-box { background: var(--teal-300); color: var(--ink-900); border-radius: var(--radius-lg); padding: 1rem 1.1rem; }
.g-box--rose { background: #d8c3c0; }
.g-card { max-width: 46rem; margin: 0 auto 2rem; background: var(--cream-100); border-radius: var(--radius-lg); padding: 1.6rem; text-align: center; }
.g-card p + p { margin-top: 1rem; }
.g-eyebrow { font: var(--eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; margin-bottom: .6rem; }

/* ---- dunkle Abschnitte ---- */
.g-dark { background: var(--teal-950); color: var(--teal-200); }
.g-dark h2, .g-dark .vsl-title { color: var(--teal-300); }
.g-portrait { width: 100%; max-height: 42rem; object-fit: cover; border-radius: var(--radius-lg); margin: 1.5rem 0 2rem; }
.g-final { background-size: cover; background-position: center; color: var(--white); }
.g-final .vsl-title { color: var(--white); }
.g-final p { margin-bottom: 1.2rem; }

/* ---- Danke-Seite ---- */
.g-thanks { margin-top: 2rem; }
.g-thanks h2 { font: var(--display-sm); color: var(--white); margin-bottom: 1rem; }
.g-thanks p { margin-bottom: 1rem; }

/* ---- Formulare ---- */
.g-modal__sub { font: var(--text-sm); margin: -1rem 0 1.2rem; }
.g-step { display: grid; gap: 1rem; }
.g-step[hidden] { display: none; }
.g-check { display: flex !important; flex-direction: row; gap: .6rem; align-items: flex-start; font: var(--text-sm) !important; color: var(--ink-700) !important; }
.g-check input { margin-top: .2rem; accent-color: var(--teal-700); }
.g-onb { max-width: 40rem; margin: 2rem auto 0; }
.g-onb fieldset { border: 0; display: grid; gap: .5rem; }
.g-onb legend { font: var(--label); color: var(--ink-900); margin-bottom: .5rem; }
.vsl-form textarea { font: var(--text-base); padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink-900); resize: vertical; }
.g-done { font: var(--text-lg); text-align: center; color: var(--teal-700); padding: 2rem 0; }