/* lp.css */
/* ImmoGroup · lp.css · Landingpages für Anzeigen-Traffic
   Gleiche Designsprache wie die Website (DESIGN.md: Tinte, Papier, Champagner; Plus Jakarta Sans + Red Hat Text),
   aber eigenständig und leicht: kein Menü, kein Scroll-Framework, zuerst fürs Handy gebaut (rund 90 % der Besucher).
   Reihenfolge: Tokens, Grundlagen, Bausteine (Button, Anfrage), dann die Abschnitte in Seitenreihenfolge.
   Seit 02.10.2026 folgen die Seiten dem Aufbau der bisherigen Anzeigen-Zielseiten: Bild im ersten Bildschirm,
   die Anfrage öffnet sich über die Buttons. Die erste Fassung liegt in _backup_2026-10-02_lp-v1. */

@font-face { font-family: "Plus Jakarta Sans"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/plusjakarta-latin.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/plusjakarta-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Red Hat Text"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/redhattext-latin.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Text"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/redhattext-latin-ext.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --navy: #0c1a2c;
  --navy-2: #13243a;
  --navy-deep: #07111d;
  --paper: #f6f2eb;
  --paper-2: #efe8dc;
  --stone: #e6dccb;
  --card: #fcfaf6;
  --champ: #c9a96e;
  --champ-hi: #e6d2a8;
  --gold-grad: linear-gradient(172deg, #f3e3bd 0%, #d8bb84 38%, #b8935a 72%, #9c7a45 100%);
  --bronze: #7a5c2c;
  --oxblood: #a3473b;
  --rose: #eab3a7;
  --ok: #2f6b4f;
  --ink-dark: #111e30;
  --ink-dark-soft: #4b5667;
  --ink-light: #f6f2eb;
  --ink-light-soft: #b3bcc9;
  --line-light: rgba(244, 239, 230, 0.14);
  --line-dark: rgba(19, 32, 51, 0.14);
  --shade: rgba(7, 17, 29, 0.6);

  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-text: "Red Hat Text", system-ui, -apple-system, sans-serif;

  --t-h1: clamp(1.72rem, 1.05rem + 3vw, 3.5rem);
  --t-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
  --t-h3: clamp(1.12rem, 1.05rem + 0.3vw, 1.3rem);
  --t-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.15rem);
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  --gutter: clamp(1.125rem, 4.5vw, 2.75rem);
  --sec: clamp(3.75rem, 2.4rem + 6vw, 7.5rem);
  --radius: 3px;
  --gable: clamp(22px, 3.4vw, 56px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* je Grund umgeschaltet */
  --ink: var(--ink-light);
  --ink-soft: var(--ink-light-soft);
  --accent: var(--champ);
  --line: var(--line-light);
}

/* -------------------------------------------------------------- basics -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 1rem; }
body { margin: 0; overflow-x: clip; background: var(--navy-deep); color: var(--ink-light); font: 400 var(--t-body)/1.6 var(--font-text); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.7rem 1rem; background: var(--champ); color: var(--navy); border-radius: var(--radius); transform: translateY(-200%); text-decoration: none; font-weight: 600; }
.skip:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--champ-hi); outline-offset: 3px; border-radius: var(--radius); }

.display { font: 600 var(--t-h2)/1.12 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
.lede { font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); }
h3 { font: 600 var(--t-h3)/1.3 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.kicker { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; font: 600 0.75rem/1.2 var(--font-text); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.kicker::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.7; }
.fn { color: var(--accent); text-decoration: none; padding: 0 0.1em; }

/* Abschnitte und Gründe: hell und dunkel wechseln hart, dunkle schieben sich mit Giebelkante über den vorigen */
.sec { position: relative; padding-block: var(--sec); color: var(--ink); }
.g-paper, .g-stone { --ink: var(--ink-dark); --ink-soft: var(--ink-dark-soft); --accent: var(--bronze); --line: var(--line-dark); }
.g-paper { background: var(--paper) url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-paper.png); }
.g-stone { background: var(--stone) url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-stone.png); }
.g-navy { background-color: var(--navy); background-image: radial-gradient(70% 60% at 12% 0%, rgba(201, 169, 110, 0.10), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(46, 78, 122, 0.28), transparent 70%), linear-gradient(rgba(244, 239, 230, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 239, 230, 0.026) 1px, transparent 1px); background-size: auto, auto, 96px 96px, 96px 96px; }
.g-deep { background-color: var(--navy-deep); background-image: radial-gradient(80% 50% at 50% 0%, rgba(205, 176, 122, 0.07), transparent 70%), radial-gradient(50% 40% at 0% 60%, rgba(40, 70, 110, 0.25), transparent 70%); }
.gable { z-index: 2; padding-top: calc(var(--sec) - var(--gable) * 0.4); }
.gable::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--gable); clip-path: polygon(0 100%, 50% 0, 100% 100%); pointer-events: none; }
.g-navy.gable::before { background: var(--navy); }
.g-deep.gable::before { background: var(--navy-deep); }

/* Einblenden, sobald ein Block ins Bild kommt (nur mit JS, einmalig, ohne Layoutverschiebung) */
.js [data-in] { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease), transform 620ms var(--ease); }
.js [data-in].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ buttons -- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 54px; padding: 0.85rem 1.4rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--champ); color: var(--navy); font: 600 1rem/1.2 var(--font-text); text-decoration: none; text-align: center; text-wrap: balance; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -12px rgba(0, 0, 0, 0.45); transition: background-color 160ms var(--ease), transform 120ms var(--ease); }
.btn::after { content: ""; flex: none; width: 0.9em; height: 0.9em; background: currentColor; clip-path: polygon(0 45%, 70% 45%, 45% 18%, 55% 8%, 100% 50%, 55% 92%, 45% 82%, 70% 55%, 0 55%); transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--champ-hi); } .btn:hover::after { transform: translateX(3px); } }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn--full { width: 100%; }
.g-paper .btn, .g-stone .btn, .quiz .btn { background: var(--navy); color: var(--paper); box-shadow: 0 10px 24px -14px rgba(13, 27, 46, 0.6); }
@media (hover: hover) and (pointer: fine) { .g-paper .btn:hover, .g-stone .btn:hover, .quiz .btn:hover { background: var(--navy-2); } }
.g-paper :focus-visible, .g-stone :focus-visible, .quiz :focus-visible { outline-color: var(--bronze); }
.textbtn { display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; padding: 0.3rem 0; background: none; border: 0; cursor: pointer; font: 600 1rem/1.2 var(--font-text); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.textbtn::after { content: ""; width: 0.8em; height: 0.8em; background: currentColor; clip-path: polygon(0 45%, 70% 45%, 45% 18%, 55% 8%, 100% 50%, 55% 92%, 45% 82%, 70% 55%, 0 55%); }
.textbtn:hover { text-decoration-color: currentColor; }
.logo { display: block; width: 150px; height: auto; }
.tp { display: block; width: 84px; height: auto; flex: none; }

/* Listen mit Haken und Kreuz */
.list { display: grid; gap: 0.85rem; }
.list li { position: relative; padding-left: 2rem; line-height: 1.5; }
.list li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; }
.list li::after { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; background: var(--navy); }
.list--do li::before { background: var(--champ); }
.list--do li::after { clip-path: polygon(24% 52%, 32% 44%, 44% 56%, 68% 32%, 76% 40%, 44% 72%); }
.list--not li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rose); }
.list--not li::after { background: var(--rose); clip-path: polygon(30% 36%, 36% 30%, 50% 44%, 64% 30%, 70% 36%, 56% 50%, 70% 64%, 64% 70%, 50% 56%, 36% 70%, 30% 64%, 44% 50%); }

/* ---------------------------------------------------- Anfrage (Quiz) -- */
.quiz { --ink: var(--ink-dark); --ink-soft: var(--ink-dark-soft); --accent: var(--bronze); --line: var(--line-dark); position: relative; padding: clamp(1.15rem, 4.5vw, 1.75rem); background: var(--card); color: var(--ink-dark); border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.quiz::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gold-grad); border-radius: var(--radius) var(--radius) 0 0; }
.quiz__title { font: 650 clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem)/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.quiz__sub { margin-top: 0.35rem; font-size: var(--t-small); line-height: 1.45; color: var(--ink-dark-soft); }
.quiz__progress { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.9rem; }
.quiz__count { flex: none; font: 600 0.72rem/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); }
.quiz__bar { flex: 1; height: 3px; background: rgba(19, 32, 51, 0.1); border-radius: 2px; overflow: hidden; }
.quiz__bar i { display: block; height: 100%; width: 100%; background: var(--bronze); transform: scaleX(0.25); transform-origin: left; transition: transform 420ms var(--ease); }
.quiz legend { width: 100%; font: 600 1.0625rem/1.35 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.quiz__why { margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.45; color: var(--ink-dark-soft); }
.js .quiz__step:not(.is-on) { display: none; }
.js .quiz__step.is-on { animation: stepin 320ms var(--ease) both; }
@keyframes stepin { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.opts { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; z-index: 1; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 52px; padding: 0.7rem 0.95rem; border: 1px solid rgba(19, 32, 51, 0.22); border-radius: var(--radius); background: #fff; font-weight: 600; line-height: 1.25; transition: border-color 140ms var(--ease), background-color 140ms var(--ease), transform 120ms var(--ease); }
.opt span::after { content: ""; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(19, 32, 51, 0.3); transition: box-shadow 140ms var(--ease), background-color 140ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .opt:hover span { border-color: var(--bronze); background: #fffdf8; } }
.opt:active span { transform: scale(0.99); }
.opt input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.opt input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.opt input:checked + span::after { background: var(--champ); box-shadow: inset 0 0 0 4px var(--navy), 0 0 0 1px var(--champ); }
.quiz__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.quiz__row--salut { display: flex; margin-top: 0.8rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; z-index: 1; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: grid; place-items: center; min-width: 4.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(19, 32, 51, 0.22); border-radius: var(--radius); background: #fff; font-weight: 600; font-size: var(--t-small); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.field { margin-top: 0.6rem; min-width: 0; }
.field label { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-dark-soft); }
.field input { display: block; width: 100%; min-height: 50px; padding: 0.6rem 0.8rem; border: 1px solid rgba(19, 32, 51, 0.28); border-radius: var(--radius); background: #fff; color: var(--ink-dark); font: 500 1rem/1.3 var(--font-text); }
.field input:focus { outline: 2px solid var(--bronze); outline-offset: 1px; border-color: var(--bronze); }
.field__err { display: none; margin-top: 0.3rem; font-size: 0.8125rem; color: var(--oxblood); }
.field.is-warn input, .field.is-invalid input { border-color: var(--oxblood); }
.field.is-invalid .field__err { display: block; }
.field--salut.is-invalid .chip span { border-color: var(--oxblood); }
.tick { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.9rem; font-size: var(--t-small); line-height: 1.4; cursor: pointer; }
.tick input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--navy); }
.quiz__send { margin-top: 1rem; }
.quiz__quote { margin: 1rem 0 0; padding: 0.8rem 0.9rem; background: rgba(201, 169, 110, 0.10); border-left: 2px solid var(--champ); border-radius: 0 var(--radius) var(--radius) 0; }
.quiz__quote blockquote { margin: 0; font: 500 0.92rem/1.45 var(--font-display); color: var(--ink-dark); }
.quiz__quote figcaption { margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.4; color: var(--ink-dark-soft); }
.quiz__stars { margin-right: 0.3rem; color: #00b67a; letter-spacing: 0.08em; }
.quiz__legal { margin-top: 0.7rem; font-size: 0.78rem; line-height: 1.45; color: var(--ink-dark-soft); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.quiz__back, .quiz__next { min-height: 44px; margin-top: 0.5rem; padding: 0.4rem 0; background: none; border: 0; cursor: pointer; font: 600 0.875rem/1 var(--font-text); color: var(--ink-dark-soft); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: rgba(19, 32, 51, 0.3); }
.quiz__next { margin-left: auto; color: var(--ink-dark); }
.quiz.is-done .quiz__head, .quiz.is-done .quiz__progress, .quiz.is-done .quiz__nav { display: none; }
.quiz__ok { outline: none; }
.quiz__ok-title { font: 650 1.3rem/1.25 var(--font-display); letter-spacing: -0.015em; }

/* --------------------------------------------------------------- hero -- */
/* Bild füllt den ersten Bildschirm, der Text liegt darauf. Am Handy sitzt das Bild oben und läuft nach unten in Tinte aus. */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; background: var(--navy-deep); overflow: clip; }
.hero__bg { position: absolute; z-index: -1; inset: 0 0 auto 0; height: min(64svh, 30rem); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 17, 29, 0.66) 0%, rgba(7, 17, 29, 0.14) 20%, rgba(7, 17, 29, 0.1) 34%, rgba(7, 17, 29, 0.72) 62%, rgba(7, 17, 29, 0.95) 84%, var(--navy-deep) 100%); }
.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(0.8rem + env(safe-area-inset-top)) var(--gutter) 0.8rem; }
.top__logo { display: block; padding: 4px 0; }
.top__tel { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.2rem; font-weight: 600; font-size: var(--t-small); text-decoration: none; text-shadow: 0 1px 12px rgba(7, 17, 29, 0.8); }
.top__tel svg { flex: none; width: 20px; height: 20px; color: var(--champ-hi); }
.top__tel span { white-space: nowrap; }
@media (max-width: 359px) { .logo { width: 126px; } .top__tel { font-size: 0.875rem; gap: 0.35rem; } }
.hero__in { margin-top: auto; padding: clamp(5.5rem, 17svh, 11rem) var(--gutter) clamp(1.5rem, 5vw, 2.75rem); }
.hero__copy { max-width: 40rem; }
.hero__place { display: flex; align-items: center; gap: 0.7rem; font: 600 0.75rem/1.3 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--champ-hi); }
.hero__place::before { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.7; }
.hero__h { margin-top: 0.7rem; font: 650 var(--t-h1)/1.1 var(--font-display); letter-spacing: -0.022em; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 28px rgba(7, 17, 29, 0.55); }
.hero__lede { margin-top: 0.8rem; max-width: 36rem; font-size: 1rem; line-height: 1.5; color: rgba(246, 242, 235, 0.88); }
.hero__checks { display: grid; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-light); font-weight: 600; line-height: 1.35; }
.hero__checks li { position: relative; padding-left: 1.9rem; }
.hero__checks li::before { content: ""; position: absolute; left: 0; top: 0.08em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--champ); }
.hero__checks li::after { content: ""; position: absolute; left: 0; top: 0.08em; width: 1.25rem; height: 1.25rem; background: var(--navy); clip-path: polygon(24% 52%, 32% 44%, 44% 56%, 68% 32%, 76% 40%, 44% 72%); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.3rem; }
.hero__cta .btn { flex: 1 1 100%; min-height: 58px; font-size: 1.0625rem; }
.hero__cta .tp { width: 104px; }
.hero__cap { position: absolute; z-index: 2; right: var(--gutter); top: calc(4.4rem + env(safe-area-inset-top)); padding: 0.3rem 0.55rem; background: rgba(7, 17, 29, 0.6); border-radius: var(--radius); font: 600 0.625rem/1 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246, 242, 235, 0.85); }

@media (min-width: 700px) {
  .hero { min-height: min(100svh, 58rem); }
  .hero__bg { inset: 0; height: 100%; }
  .hero__bg img { object-position: 60% 50%; }
  .hero__bg::after { background: linear-gradient(90deg, rgba(7, 17, 29, 0.94) 0%, rgba(7, 17, 29, 0.84) 34%, rgba(7, 17, 29, 0.36) 62%, rgba(7, 17, 29, 0.08) 100%), linear-gradient(180deg, rgba(7, 17, 29, 0.6) 0%, transparent 22%, transparent 70%, rgba(7, 17, 29, 0.55) 100%); }
  .top { width: 100%; max-width: 78rem; margin-inline: auto; padding-top: 1.4rem; }
  .logo { width: 172px; }
  .top__tel { font-size: 1rem; }
  .hero__in { width: 100%; max-width: 78rem; margin-block: auto; margin-inline: auto; padding-block: clamp(2rem, 6svh, 4rem) clamp(3.5rem, 10svh, 6.5rem); }
  .hero__lede { margin-top: 1.3rem; font-size: 1.2rem; }
  .hero__place { font-size: 0.8125rem; }
  .hero__h { margin-top: 1rem; }
  .hero__lede { margin-top: 1.3rem; font-size: 1.2rem; }
  .hero__checks { margin-top: 1.75rem; padding-top: 1.5rem; max-width: 34rem; font-size: 1.125rem; gap: 0.7rem; }
  .hero__cta { margin-top: 2.25rem; }
  .hero__cta .btn { flex: none; padding-inline: 2rem; }
  .hero__cta .tp { width: 118px; }
  .hero__cap { top: auto; bottom: 1.25rem; }
}

/* ---------------------------------------------------------------- film -- */
/* Objektfilm direkt unter dem ersten Bildschirm: Standbild mit Startknopf, der Film läuft an Ort und Stelle */
.film { position: relative; background: var(--navy-deep); padding-block: clamp(1.75rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem); color: var(--ink-light); border-top: 1px solid var(--line-light); }
.film__in { max-width: 70rem; }
.film__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; margin-bottom: 1rem; }
.film__head .kicker { margin-bottom: 0; }
.film__len { font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--ink-light-soft); }
.film__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #050a13; box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.45), 0 40px 90px -40px #000; }
.film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #050a13; }
.film__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: linear-gradient(0deg, rgba(7, 17, 29, 0.5), rgba(7, 17, 29, 0.08) 55%); cursor: pointer; color: var(--ink-light); }
.film__play span { display: grid; place-items: center; width: clamp(64px, 12vw, 96px); height: clamp(64px, 12vw, 96px); border-radius: 50%; background: var(--champ); box-shadow: 0 0 0 10px rgba(201, 169, 110, 0.22), 0 18px 40px -12px rgba(0, 0, 0, 0.7); transition: transform 200ms var(--ease), background-color 160ms var(--ease); }
.film__play span::before { content: ""; width: 26%; height: 30%; margin-left: 6%; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (hover: hover) and (pointer: fine) { .film__play:hover span { transform: scale(1.06); background: var(--champ-hi); } }
.film__frame.is-playing .film__play { display: none; }
.film__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.25rem; }
.film__cta .btn { flex: 1 1 100%; }
.film__cta p { font-size: var(--t-small); color: var(--ink-light-soft); }
@media (min-width: 700px) { .film__cta .btn { flex: none; padding-inline: 2rem; } }

/* --------------------------------------------------------------- suits -- */
.suits__grid { display: grid; gap: 1.75rem; }
.suits__list { display: grid; border-top: 1px solid var(--ink-dark); }
.suits__list li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line-dark); font: 600 clamp(1.0625rem, 1rem + 0.35vw, 1.25rem)/1.35 var(--font-display); letter-spacing: -0.01em; }
.suits__list svg { width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: 50%; background: var(--navy); fill: none; stroke: var(--champ-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 980px) {
  .suits__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .suits__grid > h2 { position: sticky; top: 5.5rem; }
  .suits__list li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.4rem; padding: 1.5rem 0; }
  .suits__list svg { width: 3.25rem; height: 3.25rem; padding: 0.75rem; }
}

/* -------------------------------------------------------------- visit -- */
.visit__grid { display: grid; gap: 1.75rem; }
.visit__photo { position: relative; max-width: 26rem; overflow: hidden; border-radius: 2px; }
.visit__photo img { width: 100%; aspect-ratio: 9 / 8; object-fit: cover; object-position: 50% 12%; }
.visit__photo figcaption { position: absolute; left: 0; bottom: 0; padding: 0.4rem 0.7rem; background: rgba(7, 17, 29, 0.78); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-light); }
.visit__quote { display: grid; gap: 1rem; }
.visit__quote p { color: rgba(246, 242, 235, 0.82); }
.visit__quote .visit__lead { margin-bottom: 0.3rem; font: 600 clamp(1.45rem, 1.15rem + 1.5vw, 2.3rem)/1.18 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; color: var(--ink-light); }
.visit__by { margin-top: 1.5rem; padding-left: 1.1rem; border-left: 2px solid var(--champ); max-width: 30rem; font-size: var(--t-small); line-height: 1.45; color: var(--ink-light-soft); }
.visit__by strong { display: block; margin-bottom: 0.15rem; font: 600 1.125rem/1.3 var(--font-display); color: var(--ink-light); }
.visit__text .btn { width: 100%; margin-top: 1.75rem; }
@media (min-width: 980px) {
  .visit__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; }
  .visit__photo { max-width: none; }
  .visit__photo img { aspect-ratio: 4 / 4.4; }
  .visit__photo { position: sticky; top: 5.5rem; align-self: start; }
  .visit__grid { align-items: start; }
  .visit__text .btn { width: auto; }
}

/* -------------------------------------------------------------- house -- */
.house__grid { display: grid; gap: 2.25rem; }
.house__text p { margin-top: 1.1rem; color: var(--ink-soft); }
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.mosaic figure { overflow: hidden; border-radius: 2px; background: var(--paper-2); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__a { grid-column: 1 / -1; aspect-ratio: 36 / 24; }
.mosaic__b, .mosaic__c { grid-column: span 3; aspect-ratio: 3 / 2; }
.mosaic__d, .mosaic__e { grid-column: span 3; aspect-ratio: 5 / 4; }
.mosaic__cap { grid-column: 1 / -1; margin-top: 0.25rem; font-size: var(--t-micro); line-height: 1.45; color: var(--ink-soft); }
@media (min-width: 980px) {
  .house__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .house__text { position: sticky; top: 5.5rem; }
  .mosaic { gap: 0.75rem; }
  .mosaic__a { grid-column: 1 / 5; grid-row: 1 / 3; aspect-ratio: auto; }
  .mosaic__b { grid-column: 5 / 7; grid-row: 1; aspect-ratio: 1; }
  .mosaic__c { grid-column: 5 / 7; grid-row: 2; aspect-ratio: 1; }
  .mosaic__d { grid-column: 1 / 4; }
  .mosaic__e { grid-column: 4 / 7; }
}

/* ---------------------------------------------------------------- data -- */
.data__grid { display: grid; gap: 1.75rem; }
.data__note { margin-top: 1rem; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-soft); }
.data__btn { width: 100%; margin-top: 1.5rem; }
.dossier { border-top: 1px solid rgba(201, 169, 110, 0.6); }
.dossier div { display: grid; gap: 0.2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.dossier dt { font: 600 0.72rem/1.4 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.dossier dd { font: 600 1.0625rem/1.35 var(--font-display); letter-spacing: -0.005em; }
@media (max-width: 979px) { .data__head { display: contents; } .data__head > h2 { order: -1; } .data__btn { margin-top: 0.25rem; } .data__note { margin-top: 0; } .dossier { order: -1; } }
@media (min-width: 980px) {
  .data__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .data__head { position: sticky; top: 5.5rem; }
  .data__btn { width: auto; }
  .dossier div { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; padding: 1rem 0; align-items: baseline; }
  .dossier dd { font-size: 1.125rem; }
}

/* --------------------------------------------------------------- place -- */
.place__grid { display: grid; gap: 2rem; }
.place__photo { position: relative; overflow: hidden; border-radius: 2px; }
.place__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.place__photo figcaption { position: absolute; left: 0; bottom: 0; padding: 0.4rem 0.7rem; background: rgba(7, 17, 29, 0.78); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-light); }
.place__text article { padding-top: 1.25rem; border-top: 1px solid var(--ink-dark); }
.place__text article + article { margin-top: 2rem; }
.place__h { font: 600 clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem)/1.15 var(--font-display); letter-spacing: -0.018em; }
.place__text p { margin-top: 0.75rem; color: var(--ink-soft); }
.place__text .btn { width: 100%; margin-top: 2rem; }
@media (min-width: 980px) {
  .place__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .place__photo { position: sticky; top: 5.5rem; }
  .place__photo img { aspect-ratio: 4 / 3.6; }
  .place__text .btn { width: auto; }
}

/* --------------------------------------------------------------- path -- */
.path__steps { display: grid; gap: 0; margin-top: 2rem; }
.path__steps li { position: relative; padding: 0 0 1.75rem 3.25rem; }
.path__steps li::before { content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: 0.2rem; width: 1px; background: rgba(201, 169, 110, 0.4); }
.path__steps li:last-child { padding-bottom: 0; }
.path__steps li:last-child::before { display: none; }
.path__n { position: absolute; left: 0; top: -0.55rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--champ); font: 700 0.95rem/1 var(--font-display); color: var(--champ-hi); }
.path__head { max-width: 50rem; }
.path__steps h3 { margin-bottom: 0.4rem; font: 600 0.75rem/1.2 var(--font-text); letter-spacing: 0.15em; text-transform: uppercase; color: var(--champ); }
.path__steps p { color: rgba(246, 242, 235, 0.86); font-size: 1.0625rem; line-height: 1.55; }
.path__cta { margin-top: 2.25rem; }
.path__cta .btn { width: 100%; }
@media (min-width: 980px) {
  .path__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 3.25rem; }
  .path__steps li { padding: 3.4rem 0 0; }
  .path__steps li::before { left: 3rem; right: -1.6rem; top: 1.1rem; bottom: auto; width: auto; height: 1px; }
  .path__n { top: 0; }
  .path__cta { margin-top: 3.25rem; }
  .path__cta .btn { width: auto; }
}

/* ------------------------------------------------------------- voices -- */
.voices__grid { display: grid; gap: 1.75rem; margin-top: 1.75rem; }
.voice__media { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--navy); cursor: pointer; }
.voice__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 500ms var(--ease); }
.voice__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 17, 29, 0.5), transparent 55%); }
.voice__play { position: absolute; z-index: 2; left: 0.9rem; bottom: 0.9rem; width: 46px; height: 46px; border-radius: 50%; background: var(--champ); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6); display: grid; place-items: center; }
.voice__play::before { content: ""; width: 12px; height: 14px; margin-left: 3px; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (hover: hover) and (pointer: fine) { .voice__media:hover img { transform: scale(1.03); } }
.voices__head { max-width: 46rem; }
.voice__by { margin-top: 0.85rem; padding-left: 0.9rem; border-left: 2px solid var(--bronze); font-size: var(--t-small); color: var(--ink-dark-soft); }
.voice__by strong { display: block; font: 600 1.125rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink-dark); }
.voices__note { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line-dark); font-size: var(--t-micro); color: var(--ink-dark-soft); }
@media (min-width: 760px) { .voices__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2.75rem; } }

/* ---------------------------------------------------------------- faq -- */
/* Fragen und Anfrage teilen sich das letzte Kapitel: am Desktop nebeneinander, die Anfrage bleibt beim Lesen stehen */
.faq { overflow: clip; padding-bottom: calc(var(--sec) + 1rem); }
.close__mark { position: absolute; right: -6%; bottom: -12%; width: min(60vw, 520px); opacity: 0.05; color: var(--ink-light); pointer-events: none; }
.close__mark .mark { width: 100%; height: auto; display: block; }
.faq__grid { position: relative; display: grid; gap: 2.5rem; }
.faq__list { margin-top: 1.75rem; border-top: 1px solid rgba(201, 169, 110, 0.6); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 1.05rem 2.5rem 1.05rem 0; cursor: pointer; list-style: none; font: 600 var(--t-h3)/1.35 var(--font-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 0.35rem; top: 50%; width: 14px; height: 1.5px; background: var(--accent); transition: transform 220ms var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 2rem 1.3rem 0; color: var(--ink-soft); max-width: 44rem; }
.faq__card { scroll-margin-top: 1rem; }
.faq__tel { margin-top: 1rem; font-size: var(--t-small); color: var(--ink-light-soft); text-align: center; }
.faq__tel a { color: var(--champ-hi); font-weight: 600; white-space: nowrap; text-underline-offset: 0.25em; }
@media (min-width: 980px) {
  .faq__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .faq__list { margin-top: 2.5rem; }
  .faq__card { position: sticky; top: 5.5rem; }
}

/* --------------------------------------------------------------- foot -- */
.foot { background: var(--navy-deep); color: var(--ink-light-soft); padding: 2.5rem 0 calc(6.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-light); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; color: var(--ink-light); }
.foot__contact { font-size: var(--t-small); }
.foot__tel { display: block; font: 600 1.2rem/1.3 var(--font-display); text-decoration: none; color: var(--ink-light); }
.foot address { font-style: normal; color: var(--ink-light-soft); }
.foot__legal { display: grid; gap: 0.8rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-light); font-size: var(--t-micro); line-height: 1.55; max-width: 64rem; }
.foot__legal strong { color: var(--ink-light); font-weight: 600; }
.foot__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; }
.foot__copy a { text-underline-offset: 0.25em; padding: 0.6rem 0; white-space: nowrap; }
@media (min-width: 980px) { .foot { padding-bottom: 3rem; } }

/* --------------------------------------------------------------- dock -- */
.dock { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(7, 17, 29, 0.96); border-top: 1px solid rgba(201, 169, 110, 0.35); transform: translateY(110%); transition: transform 360ms var(--ease); }
.dock.is-on { transform: none; }
.dock__in { display: flex; align-items: stretch; gap: 0.5rem; max-width: 78rem; margin-inline: auto; }
.dock__what { display: none; }
.dock__btn { flex: 1; min-width: 0; min-height: 52px; padding-inline: 0.75rem; font-size: clamp(0.875rem, 4vw, 1rem); white-space: nowrap; background: var(--champ); color: var(--navy); }
.dock__long { display: none; }
@media (max-width: 349px) { .dock__btn::after { display: none; } }
.dock__tel { flex: none; display: grid; place-items: center; width: 52px; border: 1px solid rgba(244, 239, 230, 0.3); border-radius: var(--radius); color: var(--ink-light); text-decoration: none; }
.dock__tel svg { width: 22px; height: 22px; }
.dock__tel span { display: none; }
@media (min-width: 980px) {
  .dock { top: 0; bottom: auto; padding: 0.55rem var(--gutter); border-top: 0; border-bottom: 1px solid rgba(201, 169, 110, 0.3); transform: translateY(-110%); }
  .dock__in { align-items: center; gap: 1.5rem; }
  .dock__what { display: flex; align-items: baseline; gap: 0.9rem; margin-right: auto; font-size: var(--t-small); color: var(--ink-light-soft); }
  .dock__what strong { font: 600 1rem/1.2 var(--font-display); color: var(--ink-light); }
  .dock__tel { width: auto; display: inline-flex; gap: 0.5rem; padding: 0 0.3rem; border: 0; font-weight: 600; font-size: var(--t-small); }
  .dock__tel svg { width: 18px; height: 18px; color: var(--champ-hi); }
  .dock__tel span { display: inline; }
  .dock__btn { flex: none; min-height: 44px; font-size: 0.9375rem; padding-inline: 1.1rem; }
  .dock__long { display: inline; }
  .dock__short { display: none; }
}

/* ------------------------------------------------------------- dialog -- */
dialog { border: 0; padding: 0; color: inherit; background: none; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(4, 10, 18, 0.78); }
.js dialog[open] { animation: sheetin 300ms var(--ease) both; }
@keyframes sheetin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- vmodal -- */
.vmodal { width: min(100% - 1.5rem, 60rem); margin: auto; overflow: visible; }
.vmodal__frame { background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 100px -30px #000; }
.vmodal__video { width: 100%; max-height: 78vh; background: #000; }
.vmodal__cap { padding: 0.7rem 1rem; background: var(--navy-deep); font-size: var(--t-small); color: var(--ink-light-soft); }
.vmodal__close { display: block; min-height: 48px; margin: 0.6rem auto 0; padding: 0.5rem 1.2rem; background: none; border: 1px solid rgba(244, 239, 230, 0.35); border-radius: var(--radius); color: var(--ink-light); font-weight: 600; cursor: pointer; }

/* ------------------------------------------------------ weniger Bewegung -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-in] { opacity: 1; transform: none; }
}

/* Link „Cookie-Einstellungen“ im Fuß: öffnet den HubSpot-Cookie-Banner erneut */
.cookie-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* lp-fragebogen.css */
/* ImmoGroup · lp-fragebogen.css · Fragebogen-Seite (fragebogen.html). Baut auf lp.css auf (.quiz, .opt, .field, .chip, .tick).
   27.10.2026 (Kundenwunsch): Aufbau wie der Onepage-Fragebogen immogroup.de/kontakt – heller Grund, oben ein Ladebalken
   über die ganze Breite, je Schritt nur die Frage (groß, mittig) und die Antworten als breite Flächen mit Bild oder Symbol.
   Bei den Kontaktdaten am Desktop links das Formular, rechts die Kundenstimme. */

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.fb-page { display: flex; flex-direction: column; min-height: 100svh; background: var(--paper) url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-paper.png); color: var(--ink-dark); }
.fb { flex: 1; padding: calc(clamp(2.75rem, 2rem + 4vw, 5rem) + env(safe-area-inset-top)) var(--gutter) clamp(2.5rem, 2rem + 3vw, 4rem); }

/* Fragebogen ohne Karte: steht frei auf dem Papiergrund */
.fb .quiz { max-width: 36rem; margin-inline: auto; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.fb .quiz::before { content: none; }

/* Ladebalken oben über die ganze Breite, bleibt beim Scrollen stehen */
.fb .quiz__progress { position: fixed; z-index: 20; inset: 0 0 auto 0; margin: 0; }
.fb .quiz__bar { display: block; height: 6px; border-radius: 0; background: rgba(12, 26, 44, 0.1); }
.fb .quiz__bar i { background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 70%, #8a6a38 100%); transform: scaleX(0.2); transition: transform 520ms var(--ease); }

/* Frage */
.fb .quiz legend { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem); font: 650 clamp(1.55rem, 1.2rem + 1.6vw, 2.2rem)/1.2 var(--font-display); letter-spacing: -0.022em; text-align: center; text-wrap: balance; color: var(--navy); }

/* Antworten: breite Flächen, links Bild (Beruf) oder Symbol (Beträge, Telefon) */
.fb .opts { gap: 0.85rem; margin-top: 0; }
.fb .opt span { justify-content: flex-start; gap: 1rem; min-height: 72px; padding: 0.75rem 1.1rem 0.75rem 0.75rem; border: 1px solid rgba(19, 32, 51, 0.12); background: #fff; font: 500 1.0625rem/1.3 var(--font-text); color: var(--ink-dark); box-shadow: 0 1px 2px rgba(12, 26, 44, 0.04), 0 14px 26px -22px rgba(12, 26, 44, 0.45); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease), transform 120ms var(--ease); }
.fb .opt span::after { content: none; }
.opt__img { flex: none; width: 54px; height: 54px; object-fit: cover; border-radius: 2px; }
.opt__ico { flex: none; width: 54px; height: 30px; fill: none; stroke: var(--bronze); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .fb .opt:hover span { border-color: var(--champ); background: #fff; box-shadow: 0 0 0 1px var(--champ), 0 18px 30px -22px rgba(12, 26, 44, 0.5); }
}
.fb .opt input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.fb .opt input:checked + span .opt__ico { stroke: var(--champ-hi); }

/* Zurück und Weiter klein unter den Antworten */
.fb .quiz__nav { margin-top: 0.75rem; }

/* Kontaktdaten: weiße Karte, daneben (Desktop) bzw. darunter (Handy) die Kundenstimme */
.fb .quiz.is-contact { max-width: 62rem; }
.quiz__contact { display: grid; gap: 1.25rem; }
.quiz__card { padding: clamp(1.5rem, 1rem + 2.5vw, 2.25rem); background: #fff; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.35), 0 34px 60px -40px rgba(12, 26, 44, 0.5); }
.quiz__ctitle { font: 650 clamp(1.6rem, 1.25rem + 1.5vw, 2.15rem)/1.15 var(--font-display); letter-spacing: -0.022em; text-wrap: balance; color: var(--navy); }
.fb .quiz__why { margin-top: 0.8rem; font-size: 1rem; line-height: 1.55; color: var(--ink-dark-soft); }
.fb .quiz__row--salut { margin-top: 1.4rem; gap: 0.6rem; }
.fb .field { margin-top: 0.75rem; }
.fb .field input { min-height: 54px; padding-inline: 1rem; border-color: rgba(19, 32, 51, 0.18); }
.fb .field input::placeholder { color: #8a93a1; }
.field--ico { position: relative; }
.field--ico svg { position: absolute; left: 1rem; top: 27px; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); fill: none; stroke: var(--ink-dark-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.fb .field--ico input { padding-left: 2.9rem; }
.fb .quiz__send { min-height: 58px; margin-top: 1.25rem; font-size: 1.0625rem; }

.quiz__proof { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.25rem; min-height: 24rem; margin: 0; padding: clamp(1.5rem, 1rem + 2.5vw, 2.25rem); overflow: hidden; border-radius: var(--radius); background: var(--navy); color: var(--ink-light); box-shadow: 0 34px 60px -40px rgba(12, 26, 44, 0.6); }
.quiz__proof-bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quiz__proof::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(7, 17, 29, 0.55) 0%, rgba(7, 17, 29, 0) 22%, rgba(7, 17, 29, 0) 42%, rgba(7, 17, 29, 0.82) 70%, rgba(7, 17, 29, 0.95) 100%); }
.quiz__proof-tp { position: absolute; top: clamp(1.5rem, 1rem + 2.5vw, 2.25rem); left: clamp(1.5rem, 1rem + 2.5vw, 2.25rem); width: 112px; height: auto; }
.quiz__proof blockquote { margin: 0; font: 650 clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem)/1.2 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.quiz__proof figcaption { display: flex; align-items: center; gap: 0.9rem; padding-top: 1.1rem; border-top: 1px solid var(--line-light); }
.quiz__proof figcaption img { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.7); }
.quiz__proof figcaption span { display: grid; font-size: var(--t-small); line-height: 1.4; color: var(--ink-light-soft); }
.quiz__proof figcaption strong { font: 600 1.0625rem/1.3 var(--font-display); color: var(--ink-light); }
@media (min-width: 860px) {
  .quiz__contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
  .quiz__proof { min-height: 0; }
}
/* Handy: Karte hoch genug, dass das Haus oben frei steht und das Zitat unten auf dunklem Grund liegt */
@media (max-width: 859px) {
  .quiz__proof { min-height: 36rem; }
  .quiz__proof::before { background: linear-gradient(180deg, rgba(7, 17, 29, 0.55) 0%, rgba(7, 17, 29, 0) 20%, rgba(7, 17, 29, 0) 32%, rgba(7, 17, 29, 0.85) 55%, rgba(7, 17, 29, 0.96) 100%); }
  .quiz__proof-bg { object-position: 50% 20%; }
}

/* Fuß: nur die Pflichtangaben */
.fb-foot { display: flex; justify-content: center; gap: 1.5rem; padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); font-size: var(--t-micro); }
.fb-foot a { color: var(--ink-dark-soft); text-decoration: none; }
.fb-foot a:hover, .fb-foot a:focus-visible { color: var(--ink-dark); text-decoration: underline; }