/* ==========================================================================
   Landingpage Pflegedienst – Stylesheet
   Mobile first: Grundlayout fürs Handy, ab 760 px Tablet/Desktop (ganz unten).
   Alle Farben, Schriften und Größen stehen als Variablen in :root.
   ========================================================================== */

/* Schrift: DM Sans, selbst gehostet (keine Verbindung zu Google) */
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/dm-sans-400.woff2") format("woff2"); }
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/dm-sans-500.woff2") format("woff2"); }
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/dm-sans-600.woff2") format("woff2"); }
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/dm-sans-700.woff2") format("woff2"); }

:root{
  /* Schrift */
  --font:"DM Sans",system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-2xs:12.5px; --fs-xs:13px; --fs-sm:14px; --fs-md:15px; --fs-base:16.5px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:22px; --fs-3xl:24px;
  --fs-lede:clamp(17px,4.4vw,20px);
  --fs-h2:clamp(29px,7.4vw,46px);
  --fs-h1:clamp(34px,9vw,60px);
  --fs-result:clamp(44px,13vw,64px);

  /* Farben */
  --bg:#f3f7fb; --paper:#ffffff; --sand:#e5eef7; --ink:#14202e; --muted:#5a6878; --line:#dbe4ee;
  --blue:#1c5a96; --blue-2:#236aa8; --blue-soft:#e3eef9; --blue-deep:#103c66;
  --sky:#9ccdf5; --sky-soft:#e8f3fd; --on-blue:#d3e5f5; --on-blue-muted:#b9d3ea; --on-deep:#a9c3dc;
  --red:#d2322d; --red-soft:#fbe9e8;
  --green:#1e8a4c; --green-soft:#e5f4ea; --green-line:#c4e6cf; --green-ink:#17402a;
  --wa:#1fa855; --star:#f2b01e; --strike:#9aa6b3;
  --white:#fff; --phone:#111; --phone-edge:#2b2b2b; --screen:#f7f9fc;
  --header-bg:rgba(243,247,251,.94); --sticky-bg:rgba(243,247,251,.97);
  --glass:rgba(255,255,255,.07); --glass-line:rgba(255,255,255,.16); --glass-line-2:rgba(255,255,255,.12); --track:rgba(255,255,255,.2);

  /* Formen und Schatten */
  --r-xs:6px; --r-sm:12px; --r-md:14px; --r-lg:16px; --r:18px; --r-xl:22px; --r-2xl:24px; --r-pill:999px;
  --shadow:0 18px 44px -22px rgba(20,32,46,.38);
  --shadow-btn:0 12px 26px -14px rgba(28,90,150,.9);
  --shadow-pop:0 24px 50px -24px rgba(0,0,0,.5);
  --shadow-form:0 30px 60px -30px rgba(0,0,0,.6);
  --shadow-chip:0 10px 24px -12px rgba(0,0,0,.5);
  --shadow-thumb:0 4px 12px rgba(0,0,0,.3);
  --shadow-card:0 3px 12px -8px rgba(0,0,0,.3);

  --wrap:1080px; --gutter:18px; --section:64px;
}

/* ---------- Basis ---------- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:70px; }
body{ margin:0; background:var(--bg); color:var(--ink); font:var(--fw-regular) var(--fs-base)/1.6 var(--font); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ display:block; max-width:100%; height:auto; }
[hidden]{ display:none !important; }
h1,h2,h3,.big-num{ font-family:var(--font); font-weight:var(--fw-bold); letter-spacing:-.025em; line-height:1.12; margin:0; }
h1{ font-size:var(--fs-h1); letter-spacing:-.035em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-xl); }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.skip-link{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--blue); color:var(--white); padding:10px 16px; border-radius:var(--r-sm); font-weight:var(--fw-bold); text-decoration:none; }
.skip-link:focus{ top:12px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
section{ padding:var(--section) 0; }
section.tight{ padding-top:8px; }
.kicker{ display:inline-block; font-weight:var(--fw-bold); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--blue-2); }
.kicker + h1, .kicker + h2{ margin-top:12px; }
.lede{ font-size:var(--fs-lede); color:var(--muted); margin-top:14px; max-width:640px; }
.center{ text-align:center; }
.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; font:var(--fw-bold) var(--fs-lg)/1.15 var(--font); text-decoration:none; padding:18px 22px; min-height:58px; border-radius:var(--r-md); border:0; cursor:pointer; transition:transform .12s ease,background .15s ease; text-align:center; }
.btn:active{ transform:scale(.98); }
.btn svg{ width:20px; height:20px; flex:none; }
.btn[disabled]{ opacity:.6; cursor:progress; }
.btn-main{ background:var(--blue); color:var(--white); box-shadow:var(--shadow-btn); }
.btn-main:hover{ background:var(--blue-2); }
.btn-light{ background:var(--white); color:var(--blue); }
.btn-light:hover{ background:var(--sky-soft); }
.btn-soft{ background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }
.btn-wa{ background:var(--wa); color:var(--white); }
.btn-stack{ display:grid; gap:10px; margin-top:24px; }
.btn-stack.narrow{ max-width:460px; margin-left:auto; margin-right:auto; }
.reassure{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; font-size:var(--fs-sm); color:var(--muted); }
.reassure span{ display:inline-flex; align-items:center; gap:6px; }
.reassure svg{ width:15px; height:15px; color:var(--blue); }

/* ---------- Header ---------- */
header.top{ position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
header.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:62px; gap:12px; }
header.top img{ height:30px; width:auto; }
.h-actions{ display:flex; gap:8px; align-items:center; }
.h-wa{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm); background:var(--blue-soft); color:var(--blue); }
.h-wa svg{ width:22px; height:22px; }
.h-cta{ display:none; }

/* ---------- Hero ---------- */
.hero{ padding:30px 0 44px; }
.hero .grid{ display:grid; gap:28px; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero .lede b{ color:var(--ink); }
.foerder{ display:flex; gap:10px; align-items:center; background:var(--green); color:var(--white); border-radius:var(--r-md); padding:11px 14px; margin-top:18px; font-size:var(--fs-sm); line-height:1.35; max-width:480px; }
.foerder svg{ flex:none; width:26px; height:26px; padding:5px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--white); }
.foerder b{ font-weight:var(--fw-bold); }
.pain{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow); }
.pain .t{ font-weight:var(--fw-bold); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pain ul{ list-style:none; margin:0; padding:0; }
.pain li{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-weight:var(--fw-medium); }
.pain li:last-child{ border:0; padding-bottom:4px; }
.pain li i{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--red-soft); color:var(--red); display:grid; place-items:center; margin-top:1px; }
.pain li i svg{ width:13px; height:13px; }
.pain .end{ margin-top:12px; background:var(--blue); color:var(--white); border-radius:var(--r-sm); padding:14px 16px; font-weight:var(--fw-semibold); display:flex; gap:10px; align-items:center; }
.pain .end svg{ width:20px; height:20px; flex:none; color:var(--sky); }

/* ---------- Rechner ---------- */
.calc-sec{ background:var(--blue); color:var(--white); border-radius:28px 28px 0 0; }
.calc-sec .lede{ color:var(--on-blue); }
.calc-sec .kicker{ color:var(--sky); }
.calc{ margin-top:26px; display:grid; gap:16px; }
.result{ background:var(--white); color:var(--ink); border-radius:var(--r-xl); padding:22px; box-shadow:var(--shadow-pop); }
.result .lab{ font-size:var(--fs-sm); color:var(--muted); font-weight:var(--fw-medium); }
.result .big{ font:var(--fw-bold) var(--fs-result)/1 var(--font); color:var(--blue); margin-top:6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.result .split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.result .split div{ background:var(--bg); border-radius:var(--r-sm); padding:12px; }
.result .split b{ display:block; font:var(--fw-bold) var(--fs-2xl)/1.1 var(--font); color:var(--ink); font-variant-numeric:tabular-nums; }
.result .split span{ font-size:var(--fs-xs); color:var(--muted); }
.result .win{ margin-top:14px; background:var(--blue-soft); border-radius:var(--r-md); padding:16px; }
.result .win .lab{ color:var(--blue); }
.result .win b{ display:block; font:var(--fw-bold) 30px/1.1 var(--font); color:var(--blue); margin-top:4px; font-variant-numeric:tabular-nums; }
.result .win small{ display:block; color:var(--muted); font-size:var(--fs-xs); margin-top:4px; }
.sliders{ background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-xl); padding:20px; }
.live{ position:sticky; top:70px; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--white); color:var(--ink); border-radius:var(--r-sm); padding:10px 14px; margin:-4px -4px 10px; box-shadow:var(--shadow-chip); font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.live b{ font:var(--fw-bold) var(--fs-2xl)/1 var(--font); color:var(--blue); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sl{ padding:8px 0 14px; }
.sl + .sl{ border-top:1px solid var(--glass-line-2); padding-top:16px; }
.sl label{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-weight:var(--fw-semibold); font-size:15.5px; }
.sl output{ font:var(--fw-bold) var(--fs-2xl)/1 var(--font); color:var(--sky); white-space:nowrap; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:36px; background:transparent; margin-top:6px; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:8px; background:linear-gradient(90deg,var(--sky) var(--p,50%),var(--track) var(--p,50%)); }
input[type=range]::-moz-range-track{ height:8px; border-radius:8px; background:var(--track); }
input[type=range]::-moz-range-progress{ height:8px; border-radius:8px; background:var(--sky); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:var(--white); border:3px solid var(--sky); margin-top:-11px; box-shadow:var(--shadow-thumb); }
input[type=range]::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:var(--white); border:3px solid var(--sky); box-shadow:var(--shadow-thumb); }
input[type=range]:focus-visible{ outline:2px solid var(--sky); outline-offset:4px; border-radius:8px; }
.sl .hint, .calc-note{ font-size:var(--fs-xs); color:var(--on-blue-muted); margin-top:2px; }
.calc-note{ margin-top:4px; }

/* ---------- Lösung ---------- */
.solution{ background:var(--blue); color:var(--white); padding-top:8px; }
.sol-card{ background:var(--bg); color:var(--ink); border-radius:26px; padding:30px 20px; }
.sol-card h2 em{ font-style:normal; color:var(--blue); }
.benefits{ display:grid; gap:12px; margin-top:24px; }
.bf{ display:flex; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; }
.bf .ic{ flex:none; width:44px; height:44px; border-radius:var(--r-sm); background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.bf .ic svg{ width:22px; height:22px; }
.bf b{ display:block; font-size:var(--fs-base); }
.bf span{ display:block; color:var(--muted); font-size:var(--fs-md); margin-top:2px; }

/* ---------- App-Beispiel ---------- */
.preview{ padding-top:56px; }
.screens{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:26px var(--gutter) 12px; margin:0 calc(var(--gutter) * -1); scrollbar-width:none; }
.screens::-webkit-scrollbar{ display:none; }
.shot{ flex:0 0 auto; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; width:250px; }
.shot > p{ text-align:center; font-size:14.5px; color:var(--muted); max-width:240px; }
.shot > p b{ display:block; color:var(--ink); font-size:16px; }
.phone{ width:240px; aspect-ratio:9/19; background:var(--phone); border-radius:40px; padding:9px; box-shadow:var(--shadow),inset 0 0 0 2px var(--phone-edge); position:relative; }
.scr{ width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--screen); display:flex; flex-direction:column; font-size:11px; line-height:1.35; position:relative; }
.notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:74px; height:20px; border-radius:20px; background:var(--phone); z-index:3; }
.s-hero{ height:150px; position:relative; flex:none; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(10,30,55,.6) 100%),radial-gradient(circle at 78% 30%,rgba(255,255,255,.55) 0 18px,rgba(255,255,255,0) 52px),linear-gradient(160deg,#5fa3dc 0%,#2f74b5 55%,var(--blue) 100%); }
.s-hero .heart{ position:absolute; right:16px; top:40px; width:40px; height:40px; color:rgba(255,255,255,.9); }
.s-hero .nm{ position:absolute; left:12px; bottom:10px; right:12px; z-index:2; color:var(--white); font:var(--fw-semibold) 17px/1.1 var(--font); text-shadow:0 2px 8px rgba(0,0,0,.35); }
.s-hero .nm small{ display:block; font:var(--fw-medium) 10px/1.3 var(--font); opacity:.95; }
.s-top{ background:var(--blue); color:var(--white); padding:36px 14px 14px; flex:none; }
.s-top.has-push{ padding-top:96px; }
.s-top small{ opacity:.8; font-size:10px; }
.s-top .nm{ font:var(--fw-semibold) 16px/1.1 var(--font); margin-top:2px; }
.s-body{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.s-btn{ background:var(--blue); color:var(--white); border-radius:10px; padding:10px; text-align:center; font-weight:var(--fw-bold); font-size:12px; }
.s-btn.red{ background:var(--red); }
.s-card{ background:var(--white); border-radius:var(--r-sm); padding:10px; box-shadow:var(--shadow-card); }
.s-card .t{ font-weight:var(--fw-bold); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stars{ display:flex; align-items:center; gap:2px; margin-top:4px; color:var(--star); }
.stars svg{ width:12px; height:12px; }
.stars span{ color:var(--ink); font-weight:var(--fw-bold); margin-left:5px; font-size:11px; }
.s-row{ display:flex; align-items:center; gap:8px; background:var(--white); border-radius:10px; padding:8px 9px; box-shadow:var(--shadow-card); }
.s-row .i{ flex:none; width:26px; height:26px; border-radius:8px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.s-row .i svg{ width:14px; height:14px; }
.s-row b{ display:block; font-size:11px; }
.s-row span{ color:var(--muted); font-size:10px; }
.s-row .tag{ margin-left:auto; background:var(--red-soft); color:var(--red); font-weight:var(--fw-bold); font-size:9px; padding:3px 6px; border-radius:var(--r-xs); white-space:nowrap; }
.s-row .tag.blue{ background:var(--blue-soft); color:var(--blue); }
.s-push{ position:absolute; left:8px; right:8px; top:30px; background:rgba(255,255,255,.97); border-radius:var(--r-md); padding:9px 10px; box-shadow:0 10px 24px -10px rgba(0,0,0,.45); display:flex; gap:8px; z-index:4; font-size:10.5px; }
.s-push .i{ flex:none; width:24px; height:24px; border-radius:7px; background:var(--blue); color:var(--white); display:grid; place-items:center; }
.s-push .i svg{ width:13px; height:13px; }
.s-push b{ display:block; font-size:9.5px; color:var(--muted); font-weight:var(--fw-semibold); }
.swipe-hint{ display:flex; justify-content:center; gap:6px; margin-top:6px; }
.swipe-hint i{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s,width .2s; }
.swipe-hint i.on{ background:var(--blue); width:20px; border-radius:7px; }

/* ---------- Vergleich ---------- */
.vs{ margin-top:26px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); }
.vs-head,.vs-row{ display:grid; grid-template-columns:1fr 86px 86px; align-items:center; }
.vs-head{ background:var(--sand); font-weight:var(--fw-bold); font-size:var(--fs-xs); letter-spacing:.04em; }
.vs-head div{ padding:12px 8px; text-align:center; }
.vs-head div:first-child{ text-align:left; padding-left:16px; }
.vs-head .app{ background:var(--blue); color:var(--white); }
.vs-row{ border-top:1px solid var(--line); font-size:var(--fs-md); }
.vs-row > div{ padding:13px 8px; text-align:center; }
.vs-row > div:first-child{ text-align:left; padding-left:16px; font-weight:var(--fw-medium); }
.vs-row > div:first-child small{ display:block; color:var(--muted); font-weight:var(--fw-regular); font-size:13.5px; margin-top:1px; }
.vs-row .app{ background:rgba(28,90,150,.05); height:100%; display:grid; place-items:center; }
.yes,.no{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; }
.yes{ background:var(--blue); color:var(--white); }
.no{ background:var(--red-soft); color:var(--red); }
.yes svg,.no svg{ width:13px; height:13px; }
.part{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semibold); }

/* ---------- Schritte ---------- */
.steps{ list-style:none; padding:0; display:grid; gap:0; margin:26px 0 0; position:relative; }
.step{ display:flex; gap:16px; padding:0 0 24px; position:relative; }
.step:not(:last-child)::before{ content:""; position:absolute; left:19px; top:42px; bottom:4px; width:2px; background:var(--line); }
.step .n{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--blue); color:var(--white); display:grid; place-items:center; font:var(--fw-semibold) 18px/1 var(--font); }
.step b{ display:block; font-size:var(--fs-lg); margin-top:7px; }
.step span{ display:block; color:var(--muted); font-size:var(--fs-md); margin-top:2px; }

/* ---------- Angebot ---------- */
.offer{ background:var(--sand); }
.price{ background:var(--paper); border-radius:var(--r-2xl); padding:30px 20px 24px; box-shadow:var(--shadow); margin-top:30px; position:relative; border:1px solid var(--line); }
.price .rib{ position:absolute; top:-14px; left:20px; right:20px; width:max-content; max-width:calc(100% - 40px); background:var(--red); color:var(--white); font-weight:var(--fw-bold); font-size:var(--fs-2xs); padding:7px 12px; border-radius:var(--r-pill); line-height:1.3; }
.p-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.p-row .v{ white-space:nowrap; }
.p-row s{ color:var(--strike); margin-right:8px; font-size:var(--fs-md); }
.p-row b{ font:var(--fw-bold) var(--fs-3xl)/1 var(--font); }
.p-big{ text-align:center; padding:20px 0 4px; }
.p-big .big-num{ font-size:50px; color:var(--blue); }
.p-big small{ color:var(--muted); }
.p-list{ list-style:none; padding:0; margin:16px 0 20px; display:grid; gap:10px; }
.p-list li{ display:flex; gap:10px; font-size:var(--fs-md); }
.p-list svg{ flex:none; width:20px; height:20px; color:var(--blue); margin-top:1px; }
.be{ margin-top:14px; background:var(--blue-soft); color:var(--blue); border-radius:var(--r-md); padding:14px 16px; font-size:var(--fs-md); }
.be b{ font-weight:var(--fw-bold); }
.be.be-green{ background:var(--green-soft); border:1px solid var(--green-line); color:var(--green-ink); }
.be.be-green b{ color:var(--green); }

/* ---------- FAQ ---------- */
.faq{ margin-top:24px; }
details{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:10px; }
summary{ list-style:none; cursor:pointer; padding:18px 52px 18px 18px; font-weight:var(--fw-bold); font-size:16px; position:relative; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:""; position:absolute; right:20px; top:50%; width:10px; height:10px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:translateY(-70%) rotate(45deg); transition:transform .2s; }
details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
details p{ padding:0 18px 18px; color:var(--muted); font-size:15.5px; }

/* ---------- Kontakt / Formular ---------- */
.final{ background:var(--blue); color:var(--white); }
.final .lede{ color:var(--on-blue); }
.final .kicker{ color:var(--sky); }
.final ul{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.final li{ display:flex; gap:10px; }
.final li svg{ flex:none; width:22px; height:22px; color:var(--sky); }
form.lead{ background:var(--paper); color:var(--ink); border-radius:var(--r-2xl); padding:22px 18px; margin-top:26px; display:grid; gap:14px; box-shadow:var(--shadow-form); }
form.lead h3{ font-size:23px; }
.f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.f label{ font-weight:var(--fw-semibold); font-size:var(--fs-sm); }
.f input,.f select{ font:inherit; font-size:16px; padding:15px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); width:100%; min-height:54px; }
.f input:focus,.f select:focus{ outline:none; border-color:var(--blue); background:var(--white); box-shadow:0 0 0 4px var(--blue-soft); }
.f.bad input{ border-color:var(--red); }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.consent{ display:flex; gap:10px; font-size:var(--fs-xs); color:var(--muted); align-items:flex-start; }
.consent.bad{ color:var(--red); }
.consent input{ margin-top:2px; width:20px; height:20px; accent-color:var(--blue); flex:none; }
.form-ok{ background:var(--blue-soft); color:var(--blue); border-radius:var(--r-sm); padding:16px; font-weight:var(--fw-semibold); }
.form-err{ background:var(--red-soft); color:var(--red); border-radius:var(--r-sm); padding:12px 14px; font-weight:var(--fw-semibold); font-size:var(--fs-md); }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.alt{ margin-top:22px; display:grid; gap:10px; }
.alt .mail{ color:var(--white); text-align:center; font-weight:var(--fw-semibold); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--blue-deep); color:var(--on-deep); padding:28px 0 120px; font-size:var(--fs-sm); }
.site-footer .wrap{ display:flex; flex-direction:column; gap:14px; }
.site-footer img{ height:28px; width:auto; }
.site-footer nav{ display:flex; gap:20px; }
.site-footer a{ color:var(--white); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.f-brand{ display:flex; align-items:center; gap:12px; }

/* ---------- Sticky-Leiste (Handy) ---------- */
.sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--sticky-bg); backdrop-filter:blur(10px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .3s ease; }
.sticky.show{ transform:none; }
.sticky .btn{ min-height:52px; padding:14px 12px; font-size:16px; }
.sticky .btn-wa{ flex:0 0 56px; width:56px; padding:0; }

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ==========================================================================
   Tablet / Desktop
   ========================================================================== */
@media (min-width:760px){
  :root{ --gutter:28px; --section:88px; }
  body{ font-size:17.5px; }
  .btn{ width:auto; }
  .btn-stack{ display:flex; flex-wrap:wrap; gap:12px; }
  .btn-stack.narrow{ justify-content:center; }
  .h-cta{ display:inline-flex; width:auto; min-height:44px; padding:11px 18px; font-size:var(--fs-md); border-radius:var(--r-sm); }
  .hero{ padding:56px 0 72px; }
  .hero .grid{ grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
  .calc-sec{ border-radius:40px 40px 0 0; }
  .calc{ grid-template-columns:1fr 1fr; align-items:start; gap:22px; }
  .calc .result{ position:sticky; top:90px; }
  .live{ display:none; }
  .sol-card{ padding:48px; }
  .benefits{ grid-template-columns:1fr 1fr; }
  .screens{ justify-content:center; overflow:visible; margin:0; padding:30px 0 0; }
  .shot{ width:auto; }
  .phone{ width:250px; }
  .swipe-hint{ display:none; }
  .vs{ max-width:780px; margin:30px auto 0; }
  .vs-head,.vs-row{ grid-template-columns:1fr 150px 150px; }
  .steps{ grid-template-columns:repeat(4,1fr); gap:20px; }
  .step{ flex-direction:column; padding:0; }
  .step::before{ display:none; }
  .offer .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .price{ margin-top:0; padding:32px; }
  .faq{ max-width:780px; margin:30px auto 0; }
  .final .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  form.lead{ margin-top:0; padding:30px; }
  .alt{ max-width:340px; }
  .sticky{ display:none; }
  .site-footer{ padding-bottom:36px; }
  .site-footer .wrap{ flex-direction:row; justify-content:space-between; align-items:center; }
}