/* MS Fußbodenheizung · Anzeigen-Landingpage · mobile first
   Farben und Schriften wie ms-fussbodenheizung.de (css/main.css der Website). */
:root {
  --red: #CC1F1F;
  --red-dark: #A81818;
  --red-light: #FF4A3D;
  --ink: #1A1A1A;
  --muted: #5E5953;            /* AA auf --page und weiß */
  --page: #F5F3EF;
  --surface: #EDEAE4;
  --line: #D9D4CC;
  --white: #FFFFFF;
  --dark: #151413;
  --d: 'Anton', 'Arial Black', sans-serif;
  --b: 'DM Sans', system-ui, -apple-system, sans-serif;
  --r: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 220ms;
  --gut: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
body { margin: 0; font-family: var(--b); font-size: 17px; line-height: 1.5; color: var(--ink); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, li, blockquote { text-wrap: pretty; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 6px; }

/* ---------- Varianten (?v=) ---------- */
.hv { display: none; }
html:not(.js) .hv[data-hv="standard"],
html[data-v="standard"] .hv[data-hv="standard"],
html[data-v="beweis"] .hv[data-hv="beweis"],
html[data-v="baustelle"] .hv[data-hv="baustelle"],
html[data-v="ablauf"] .hv[data-hv="ablauf"] { display: block; }
h1 .hv { display: none; }
html:not(.js) h1 .hv[data-hv="standard"],
html[data-v="standard"] h1 .hv[data-hv="standard"],
html[data-v="beweis"] h1 .hv[data-hv="beweis"],
html[data-v="baustelle"] h1 .hv[data-hv="baustelle"],
html[data-v="ablauf"] h1 .hv[data-hv="ablauf"] { display: inline; }

/* ---------- Kopfleiste ---------- */
.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gut); }
.bar-logo { width: 124px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--dark); color: var(--white); padding: 80px var(--gut) 84px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: var(--dark) center 60% / cover no-repeat; background-image: url(../img/hero-raum-720.webp); }
html[data-v="baustelle"] .hero-bg { background-image: url(../img/hero-spachtel-720.webp); background-position: center 55%; }
html[data-v="ablauf"] .hero-bg { background-image: url(../img/hero-fraese-720.webp); background-position: 35% 40%; }
@media (min-width: 721px) {
  .hero-bg { background-image: url(../img/hero-raum-1080.webp); }
  html[data-v="baustelle"] .hero-bg { background-image: url(../img/hero-spachtel-1080.webp); }
  html[data-v="ablauf"] .hero-bg { background-image: url(../img/hero-fraese-1080.webp); }
}
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,19,.92) 0%, rgba(21,20,19,.85) 15%, rgba(21,20,19,.85) 50%, rgba(21,20,19,.95) 100%); }
.hero-in { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
h1 { font-family: var(--d); font-weight: 400; font-size: clamp(34px, 9.6vw, 52px); line-height: 1.02; text-transform: uppercase; letter-spacing: .005em; }
h1 em { font-style: normal; color: var(--red-light); display: block; text-shadow: 0 2px 18px rgba(21,20,19,.7); }
.pv-bew { display: none; }
html[data-v="beweis"] .pv-std { display: none; }
html[data-v="beweis"] .pv-bew { display: inline; }
.stars { color: #FBBC05; letter-spacing: 1px; }
.sub { margin-top: 12px; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.9); }
.proof { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 15px; color: rgba(255,255,255,.9); }
.proof b { color: var(--white); }

/* ---------- Fragebogen ---------- */
.funnel-wrap { position: relative; z-index: 2; margin: -64px auto 0; padding: 0 var(--gut) 8px; max-width: 592px; }
.funnel { background: var(--white); border-radius: 20px; padding: 18px 16px 12px; box-shadow: 0 18px 50px rgba(21,20,19,.22); }
.fx-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); font-weight: 600; }
.fx-free { color: #1E7B34; }
.fx-progress { height: 6px; background: var(--surface); border-radius: 99px; margin: 8px 0 16px; overflow: hidden; }
.fx-progress-fill { display: block; height: 100%; width: 11%; background: var(--red); border-radius: 99px; transition: width var(--t) var(--ease); }
.fx-q { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.fx-q:focus { outline: none; }
.fx-sub { font-size: 15px; color: var(--muted); margin-top: 6px; }
.fx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.fx-tile { min-height: 60px; padding: 12px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); font: 600 17px/1.2 var(--b); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform 120ms var(--ease); }
.fx-tile.fx-wide { grid-column: 1 / -1; }
.fx-tile:active { transform: scale(.98); }
.fx-tile[aria-pressed="true"] { border-color: var(--red); background: #FDF0EF; }
@media (hover: hover) { .fx-tile:hover { border-color: var(--red); } }
.fx-step.is-in { animation: stepIn var(--t) var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.fx-field { display: block; margin-top: 12px; }
.fx-field > span { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.fx-field i { font-style: normal; font-weight: 400; color: var(--muted); }
.fx-field input, .fx-field textarea { width: 100%; font: 17px/1.3 var(--b); padding: 13px 14px; border: 2px solid #8C857C; border-radius: 12px; background: var(--white); color: var(--ink); }
.fx-field input:focus-visible, .fx-field textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-color: var(--ink); }
.fx-field .is-invalid, .is-invalid { border-color: var(--red) !important; }
.fx-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.fx-consent input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--red); }
.fx-consent.is-invalid { color: var(--red); }
.fx-hp { position: absolute; left: -9999px; }
.fx-err { min-height: 0; color: var(--red-dark); font-size: 15px; font-weight: 600; margin-top: 8px; }
.fx-next, .fx-submit, .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 14px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--red); color: var(--white); font: 700 17px/1 var(--b); text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px rgba(204,31,31,.35); }
.fx-next::after, .fx-submit::after, .btn::after { content: "→"; font-size: 20px; }
.fx-next:active, .fx-submit:active, .btn:active { background: var(--red-dark); }
.fx-submit[disabled] { opacity: .7; }
.fx-note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 10px; }
.fx-thanks h2 { font-size: 22px; line-height: 1.25; }
.fx-thanks h2:focus { outline: none; }
.fx-thanks p { margin-top: 10px; color: var(--muted); font-size: 17px; }
.btn-wa { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 14px 0 6px; border-radius: 999px; background: #1E7B34; color: var(--white); font-weight: 700; text-decoration: none; }

/* ---------- Google-Karten ---------- */
.gcard { background: var(--white); border-radius: var(--r); padding: 16px 16px 18px; box-shadow: 0 6px 20px rgba(21,20,19,.08); border: 1px solid #ECE8E2; }
.gcard-rot { margin-top: 12px; transition: opacity var(--t) var(--ease); }
.gcard-rot.is-swap { opacity: 0; }
.gc-head { display: flex; align-items: center; gap: 12px; }
.gc-head b { display: block; font-size: 15px; }
.gc-head small { display: block; font-size: 13px; color: var(--muted); }
.gc-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; flex: none; }
.gc-g { margin-left: auto; font: 700 24px Arial, sans-serif; color: #4285F4; }
.gc-stars { color: #B07800; letter-spacing: 2px; margin: 8px 0 4px; font-size: 17px; }
.gcard blockquote { font-size: 17px; line-height: 1.45; }
.gcard mark { background: #FFF1B8; color: inherit; padding: 0 2px; border-radius: 3px; }

.nextsteps { margin-top: 12px; background: var(--white); border-radius: var(--r); padding: 18px 16px; border: 1px solid #ECE8E2; }
.nextsteps h3 { font-size: 17px; }
.nextsteps ol { counter-reset: s; margin-top: 10px; }
.nextsteps ol li { counter-increment: s; position: relative; padding: 8px 0 8px 40px; font-size: 15px; }
.nextsteps ol li::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.trust { margin-top: 12px; border-top: 1px solid var(--surface); padding-top: 12px; display: grid; gap: 6px; }
.trust li { position: relative; padding-left: 26px; font-size: 15px; }
.trust li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800; }

/* ---------- Sections ---------- */
.sec { padding: 48px var(--gut); max-width: 592px; margin: 0 auto; }
.h2 { font-family: var(--d); font-weight: 400; font-size: clamp(30px, 8vw, 42px); line-height: 1.04; text-transform: uppercase; }
.lead { margin-top: 8px; color: var(--muted); font-size: 17px; }
.gstack { display: grid; gap: 12px; margin-top: 18px; }
.gsum { margin-top: 14px; text-align: center; font-size: 15px; color: var(--muted); }
.gsum b { color: var(--ink); }

.sec-dark { max-width: none; background: var(--dark); color: var(--white); }
.sec-dark > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.sec-dark .lead { color: rgba(255,255,255,.8); }
.steps { display: grid; gap: 14px; margin-top: 20px; }
.steps li { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; background: #221F1D; border-radius: var(--r); padding: 10px; }
.steps img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; }
.steps .no { position: absolute; left: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font: 400 17px var(--d); }
.steps b { font-size: 17px; }
.steps p { font-size: 15px; color: rgba(255,255,255,.82); margin-top: 3px; line-height: 1.4; }

.vgl { width: 100%; margin-top: 18px; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 20px rgba(21,20,19,.07); font-size: 15px; }
.vgl th, .vgl td { padding: 11px 10px; text-align: left; border-top: 1px solid var(--surface); }
.vgl thead th { border-top: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface); }
.vgl thead th.ms { background: var(--red); color: var(--white); }
.vgl tbody th { font-weight: 600; color: var(--muted); font-size: 15px; }
.vgl td { font-weight: 700; }
.vgl td.old { font-weight: 500; color: var(--muted); }
.vgl td.old::before { content: "✕ "; color: #9A948C; }
.vgl tbody td:last-child::before { content: "✓ "; color: var(--red); }
.sec .btn { margin-top: 20px; }

.sec-soft { max-width: none; background: var(--surface); }
.sec-soft > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.faq { margin-top: 16px; display: grid; gap: 10px; }
.faq details { background: var(--white); border-radius: 14px; padding: 0 16px; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 30px 16px 0; font-weight: 700; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 24px; font-weight: 400; color: var(--red); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 16px; font-size: 15px; color: #3A3632; }

.sec-cta { text-align: center; }

.foot { padding: 24px var(--gut) 96px; text-align: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.foot p + p { margin-top: 6px; }

/* ---------- Sticky-Button ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: transparent; transform: translateY(0); transition: transform var(--t) var(--ease); }
.sticky .btn { margin: 0 auto; max-width: 560px; }
.sticky.is-off { transform: translateY(120%); }

/* ---------- ab Tablet ---------- */
@media (min-width: 721px) {
  .hero { padding: 110px 24px 120px; }
  .bar { padding: 16px 24px; }
  .bar-logo { width: 150px; }
  .steps li { grid-template-columns: 150px 1fr; }
  .steps img { width: 150px; height: 150px; }
}

/* ---------- niedrige Handy-Höhen (Instagram-In-App-Browser, iPhone SE): Frage 1 muss sichtbar sein ---------- */
@media (max-width: 720px) and (max-height: 780px) {
  .hero { padding: 72px var(--gut) 76px; }
    h1 { font-size: clamp(29px, 8.2vw, 36px); }
  .sub { font-size: 15px; margin-top: 8px; }
  .proof { margin-top: 10px; font-size: 13px; gap: 4px 12px; }
  .fx-q { font-size: 20px; }
  .fx-tiles { margin-top: 10px; gap: 8px; }
  .fx-tile { min-height: 54px; }
}

/* ---------- Problem / Beweis ---------- */
.h2 .red { color: var(--red); }
.lead-strong { color: var(--ink); font-weight: 600; margin-top: 12px; }

/* ---------- Fragebogen-Modus (nach der ersten Antwort) ---------- */
html.fx-mode { scroll-behavior: auto; }
html.fx-mode main > section:not(.funnel-wrap):not(.hero),
html.fx-mode .sticky { display: none !important; }
html.fx-mode body { background: var(--page); }
html.fx-mode .bar { position: static; background: var(--dark); justify-content: center; padding: 10px var(--gut); }
html.fx-mode .bar-logo { width: 112px; }
html.fx-mode .funnel-wrap { margin-top: 14px; }
html.fx-mode .foot { padding-bottom: 32px; border-top: 0; }
html.fx-mode .foot p:first-child { display: none; }

/* ---------- Cookie-Hinweis ---------- */
.cc { position: fixed; left: 8px; right: 8px; bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 50; max-width: 560px; margin: 0 auto; background: var(--dark); color: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.cc p { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.9); }
.cc a { color: #fff; }
.cc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cc-btns button { min-height: 42px; border-radius: 999px; font: 700 15px var(--b); cursor: pointer; border: 2px solid #fff; background: transparent; color: #fff; }

/* ---------- Rechtstexte ---------- */
body.legal { background: var(--page); }
.legal-bar { background: var(--dark); padding: 12px var(--gut); }
.legal-bar img { width: 120px; height: auto; }
.legal-main { max-width: 680px; margin: 0 auto; padding: 28px var(--gut) 64px; }
.legal-main h1 { font-family: var(--d); font-weight: 400; font-size: 34px; text-transform: uppercase; line-height: 1.05; }
.legal-main h2 { font-size: 19px; margin: 28px 0 8px; }
.legal-main p, .legal-main li { font-size: 15px; color: #3A3632; margin-top: 8px; }
.legal-main ul { list-style: disc; padding-left: 20px; }
.legal-back { margin-top: 32px !important; }

/* ---------- Avatar-Farben (statt inline style, CSP) ---------- */
.av-00897b { background: #00897B; } .av-c2185b { background: #C2185B; } .av-2e7d32 { background: #2E7D32; }
.av-1565c0 { background: #1565C0; } .av-4527a0 { background: #4527A0; } .av-5d4037 { background: #5D4037; }
.av-e65100 { background: #E65100; } .av-6a1b9a { background: #6A1B9A; }

/* ---------- Feldfehler + Footer-Links ---------- */
.fx-err-f { margin-top: 4px; font-size: 13px; }
.fx-err-f:empty, .fx-err:empty { display: none; }
.fx-err a { color: inherit; }
.foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { display: inline-block; padding: 8px 2px; }

/* ---------- sehr niedrige Handy-Höhen (Instagram-Browser): Frage 1 vollständig sichtbar ---------- */
@media (max-width: 720px) and (max-height: 620px) {
  .hero { padding: 60px var(--gut) 70px; }
  .bar { padding: 8px var(--gut); }
  .bar-logo { width: 104px; }
  h1 { font-size: clamp(26px, 7.4vw, 32px); }
  .sub { display: none; }
  .fx-step[data-step="1"] .fx-sub { display: none; }
  .fx-tile { min-height: 48px; padding: 8px; }
  .funnel { padding-top: 14px; }
  .fx-progress { margin: 6px 0 12px; }
}

/* Fokus-Modus: Hero nur visuell ausblenden, die h1 bleibt für Screenreader im Baum */
html.fx-mode .hero { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gsum .stars { color: #B07800; }