/* =================================================================
   Marcel Gübert · Kinder-Zahnzusatzschutz – Landing Page
   Redesign v2 — warm, vertrauensvoll, editorial, klar strukturiert
   Brand (strikt): Deep Advisory Green #0F5F4A · Fresh Trust Green #4FBF8F
                    Soft Charcoal Green #16211D · Font: Manrope
================================================================= */

/* ---------- Tokens ---------- */
:root {
  --green-900:#16211D; --green-700:#0F5F4A; --green-600:#136b52;
  --green-500:#4FBF8F; --green-tint:#e9f2ec;
  --gradient:linear-gradient(135deg,#0F5F4A 0%,#4FBF8F 100%);

  --paper:#F5F8F6; --sand:#EAF1EC; --surface:#FFFFFF;
  --gold:#136b52; --gold-soft:#e9f2ec;

  --ink:#16211D; --ink-70:#3a4742; --muted:#66716b;
  --line:#E4EBE7; --line-soft:#eef3f0;
  --danger:#b4462f; --danger-soft:#f6e6e0;

  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:34px; --r-pill:999px;

  --sh-xs:0 1px 3px rgba(30,42,37,.05);
  --sh-sm:0 4px 14px rgba(30,42,37,.07);
  --sh-md:0 14px 36px rgba(30,42,37,.10);
  --sh-lg:0 30px 70px rgba(30,42,37,.16);
  --sh-green:0 12px 26px rgba(15,95,74,.24);

  --maxw:1080px; --nav-h:66px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:82px; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{ font-family:var(--font); color:var(--ink); background:var(--paper); line-height:1.62; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
:focus-visible{ outline:3px solid var(--green-500); outline-offset:3px; border-radius:6px; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ line-height:1.1; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
h1{ font-size:clamp(2.15rem,6vw,3.5rem); line-height:1.08; }
h2{ font-size:clamp(1.7rem,4.4vw,2.5rem); }
h3{ font-size:clamp(1.2rem,3vw,1.45rem); font-weight:700; }
p{ color:var(--ink-70); }
.lead{ font-size:clamp(1.05rem,2.2vw,1.22rem); color:var(--muted); line-height:1.55; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section{ padding:var(--s-8) 0; }
@media (min-width:768px){ .section{ padding:var(--s-10) 0; } }
.eyebrow{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-600); margin-bottom:14px; }
.section-head{ max-width:640px; margin:0 auto var(--s-7); text-align:center; }
.section-head h2{ margin-bottom:14px; }
.section-head .lead{ margin:0 auto; }
.accent{ color:var(--green-700); }
.serif-italic{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold); letter-spacing:0; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:1rem; line-height:1; padding:16px 26px; border-radius:var(--r-pill); transition:transform .18s ease, box-shadow .25s ease, background .2s; white-space:nowrap; }
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--gradient); color:#fff; box-shadow:var(--sh-green); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(15,95,74,.30); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:transparent; color:var(--green-700); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--green-500); background:var(--surface); }
.btn-white{ background:#fff; color:var(--green-700); box-shadow:var(--sh-sm); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-lg{ padding:18px 32px; font-size:1.05rem; }
.btn-block{ display:flex; width:100%; }

/* WhatsApp-Sekundärlink (immer beim Haupt-CTA) */
.wa-line{ text-align:center; margin-top:14px; }
.wa-link{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:700; color:var(--green-700); transition:opacity .2s ease; }
.wa-link svg{ width:19px; height:19px; color:#25D366; flex:none; }
.wa-link:hover{ opacity:.72; }
.hero .wa-link, .calc-out .wa-link{ color:#fff; }
.sticky-cta .wa-line{ margin-top:8px; }

/* ---------- Nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); display:flex; align-items:center; background:rgba(245,248,246,.8); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s; }
.nav.scrolled{ border-color:var(--line); box-shadow:var(--sh-xs); background:rgba(245,248,246,.92); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; color:var(--ink); font-size:1.06rem; }
.brand .mono{ width:38px; height:38px; border-radius:50%; overflow:hidden; box-shadow:var(--sh-xs); flex:none; }
.brand .mono img{ width:100%; height:100%; object-fit:cover; }
.brand small{ display:block; font-size:.68rem; font-weight:600; color:var(--muted); }
.brand .brand-loc{ display:flex; align-items:center; gap:3px; margin-top:1px; color:var(--green-600); font-weight:700; }
.brand .brand-loc svg{ width:12px; height:12px; flex:none; }
.nav .btn{ padding:11px 20px; font-size:.9rem; }
.nav-cta-short{ display:none; }
@media (max-width:520px){ .nav-cta-long{display:none;} .nav-cta-short{display:inline;} .brand small{display:none;} }

/* ---------- Hero (Vollbild-Hintergrund, zentriert) ---------- */
.hero{ position:relative; min-height:clamp(560px,88vh,780px); display:grid; place-items:center; text-align:center; overflow:hidden; padding:calc(var(--nav-h) + 48px) 22px var(--s-8); }
.hero::before{ content:""; position:absolute; inset:0; z-index:0; background:url("img/hero-mobile.jpg") center/cover no-repeat; }
.hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(13,22,19,.80) 0%, rgba(13,22,19,.72) 45%, rgba(13,22,19,.88) 100%); }
@media (min-width:768px){ .hero::before{ background-image:url("img/hero-desktop.jpg"); } }
.hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; color:#fff; }
.hero-tag{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); padding:8px 16px; border-radius:var(--r-pill); margin-bottom:22px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.hero-tag svg{ width:15px; height:15px; color:var(--green-500); }
.hero h1{ color:#fff; margin-bottom:20px; text-wrap:balance; }
.hero h1 .em{ font-style:normal; }
.hero h1 .hl{ color:var(--green-500); }
.hero-sub{ margin:0 auto 30px; max-width:560px; color:rgba(255,255,255,.88); }
.hero-cta{ display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; }
.hero-cta .btn{ width:100%; max-width:340px; }
.hero .btn-ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.42); color:#fff; }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.hero-reassure{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:9px; font-size:.9rem; color:rgba(255,255,255,.82); font-weight:600; }
.hero-reassure svg{ width:17px; height:17px; color:var(--green-500); flex:none; }
.hero-benefits{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:26px auto 0; max-width:600px; }
.hero-benefits li{ display:inline-flex; align-items:center; gap:8px; font-size:.94rem; font-weight:600; color:#fff; }
.hero-benefits svg{ width:18px; height:18px; color:var(--green-500); flex:none; }
.hero-fine{ margin-top:14px; font-size:.8rem; color:rgba(255,255,255,.58); }
.hero-seals{ display:flex; align-items:center; justify-content:center; gap:14px; margin:28px auto 0; flex-wrap:wrap; }
.hero-seal{ background:#fff; border-radius:14px; padding:9px 15px; display:inline-flex; align-items:center; box-shadow:var(--sh-sm); }
.hero-seal img{ height:58px; width:auto; display:block; }
@media (max-width:400px){ .hero-seal{ padding:8px 12px; } .hero-seal img{ height:48px; } }
@media (min-width:768px){
  .hero-cta{ flex-direction:row; }
  .hero-cta .btn{ width:auto; }
}

/* ---------- "Was wäre, wenn" – Bild OBEN, Text UNTEN ---------- */
.whatif{ background:var(--paper); }
.wgrid{ display:grid; gap:22px; }
@media (min-width:820px){ .wgrid{ grid-template-columns:repeat(3,1fr); } }
.wcard{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.wcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.wcard-photo{ aspect-ratio:16/11; overflow:hidden; background:var(--sand); }
.wcard-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.wcard:hover .wcard-photo img{ transform:scale(1.04); }
.wcard-photo.p1 img{ object-position:center 62%; }
.wcard-photo.p2 img{ object-position:center 20%; }
.wcard-photo.p3 img{ object-position:center 32%; }
.wcard-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.wcard .q{ font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
.wcard h3{ margin-bottom:10px; }
.wcard p{ font-size:.96rem; margin-bottom:18px; }
.wcard .tag{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:var(--green-tint); color:var(--green-700); border-radius:var(--r-pill); padding:9px 15px; font-size:.85rem; font-weight:700; }
.wcard .tag svg{ width:16px; height:16px; }

/* ---------- Marcel – Steckbrief mit Polaroids + Notiz ---------- */
.note{ background:var(--sand); }
.note-wrap{ position:relative; max-width:900px; margin:0 auto; padding-top:18px; }
.note-tab{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:170px; height:24px; background:var(--green-900); border-radius:0 0 14px 14px; z-index:1; }
.note-card{ position:relative; z-index:2; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:52px 22px 42px; box-shadow:var(--sh-lg); text-align:center; overflow:hidden; background-image:repeating-linear-gradient(180deg, transparent, transparent 37px, #eef3f0 37px, #eef3f0 38px); background-position:0 96px; }
@media (min-width:760px){ .note-card{ padding:62px 72px 52px; } }
.note-menu{ position:absolute; top:20px; right:20px; width:40px; height:40px; border:1.5px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--muted); background:var(--surface); }
.note-menu svg{ width:20px; height:20px; }
.note-kicker{ font-size:.9rem; color:var(--muted); margin-bottom:20px; }
.note h2{ font-size:clamp(1.8rem,4.6vw,2.9rem); line-height:1.12; margin:0 auto 22px; max-width:15ch; }
.note h2 .accent-line{ display:block; color:var(--green-700); font-style:italic; margin-top:4px; }
.note-body{ max-width:56ch; margin:0 auto; }
.note-body p{ font-size:1.05rem; margin-bottom:16px; color:var(--ink-70); }
.note-body strong{ color:var(--ink); font-weight:800; }
.note-author{ display:inline-flex; align-items:center; gap:12px; margin:26px 0 4px; text-align:left; }
.note-author img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.note-author .n{ font-weight:800; font-size:1rem; }
.note-author .r{ font-size:.85rem; color:var(--muted); }
.note-sign{ font-family:"Dancing Script", cursive; font-weight:700; font-size:clamp(2.4rem,7vw,3.1rem); color:var(--green-700); margin:6px 0 22px; line-height:1; }
.polaroid{ position:absolute; z-index:3; background:#fff; padding:10px 10px 26px; border-radius:4px; box-shadow:var(--sh-lg); }
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; }
.polaroid .cap{ position:absolute; left:0; right:0; bottom:9px; text-align:center; font-style:italic; font-weight:600; font-size:.9rem; color:var(--ink-70); }
.polaroid.p-a{ width:150px; top:-16px; left:-12px; transform:rotate(-7deg); }
.polaroid.p-b{ width:158px; bottom:-22px; right:-12px; transform:rotate(6deg); }
@media (max-width:760px){
  .note-photos{ display:flex; justify-content:center; align-items:flex-start; margin:0 0 -26px; position:relative; z-index:4; }
  .polaroid{ position:static; }
  .polaroid.p-a{ width:162px; margin-right:-20px; padding:8px 8px 22px; transform:rotate(-6deg); }
  .polaroid.p-b{ width:168px; margin-top:22px; padding:8px 8px 22px; transform:rotate(6deg); }
  .polaroid .cap{ font-size:.72rem; bottom:6px; }
  .note-card{ padding:48px 18px 38px; }
}

/* ---------- Leistungen ---------- */
.leist{ background:var(--paper); }
.big3{ display:grid; gap:20px; margin-bottom:22px; }
@media (min-width:820px){ .big3{ grid-template-columns:repeat(3,1fr); } }
.lcard{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:0; overflow:hidden; box-shadow:var(--sh-sm); transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.lcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.lcard-illu{ height:210px; border-radius:0; margin:0; border-bottom:1px solid var(--line); display:grid; place-items:center; background:radial-gradient(circle at 50% 42%,#eef5f0 0%,#e2efe7 60%,#d7e9df 100%); overflow:hidden; }
.lcard-illu img{ height:168px; width:auto; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(15,95,74,.16)); transition:transform .4s ease; }
.lcard:hover .lcard-illu img{ transform:scale(1.05); }
.lcard h3{ margin:22px 24px 7px; }
.lcard p{ font-size:.94rem; margin:0 24px 16px; }
.lcard .amount{ margin:auto 24px 24px; font-weight:800; color:var(--green-700); font-size:1.05rem; }
.lcard .amount small{ display:block; font-size:.76rem; color:var(--muted); font-weight:600; margin-top:2px; }
.mini4{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; grid-auto-rows:1fr; }
@media (min-width:820px){ .mini4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mcard h4{ overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
.mcard p{ overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
.mcard{ height:100%; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:22px 20px; box-shadow:var(--sh-xs); transition:transform .2s, border-color .2s; }
.mcard:hover{ transform:translateY(-3px); border-color:var(--green-500); }
.mcard .ic{ width:44px; height:44px; border-radius:12px; background:var(--green-tint); display:grid; place-items:center; margin-bottom:13px; color:var(--green-700); }
.mcard .ic svg{ width:23px; height:23px; }
.mcard h4{ font-size:1rem; font-weight:700; margin-bottom:4px; }
.mcard p{ font-size:.85rem; }
.leist-note{ text-align:center; font-size:.78rem; color:var(--muted); max-width:640px; margin:26px auto 0; line-height:1.55; }

/* ---------- Rechner (EIN Slider) ---------- */
.calc-sec{ background:var(--sand); }
.calc{ max-width:940px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-md); overflow:hidden; }
.calc-grid{ display:grid; }
@media (min-width:820px){ .calc-grid{ grid-template-columns:0.78fr 1.22fr; } }
.calc-in{ padding:30px 26px; display:flex; flex-direction:column; justify-content:center; }
.calc-in h3{ margin-bottom:18px; font-size:1.2rem; }
.calc-in .hint{ font-size:.9rem; color:var(--muted); margin-bottom:26px; }
.age-val{ text-align:center; margin-bottom:8px; }
.age-val .num{ font-size:clamp(2.1rem,7vw,2.7rem); font-weight:800; color:var(--green-700); line-height:1; }
.age-val .unit{ font-size:1rem; font-weight:700; color:var(--green-700); margin-left:6px; }
.age-sub{ text-align:center; font-size:.9rem; color:var(--muted); margin-bottom:22px; }
input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:9px; border-radius:999px; background:var(--sand); }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:32px; height:32px; border-radius:50%; background:var(--gradient); border:4px solid #fff; box-shadow:var(--sh-green); cursor:pointer; }
input[type="range"]::-moz-range-thumb{ width:32px; height:32px; border-radius:50%; background:var(--green-700); border:4px solid #fff; cursor:pointer; }
.range-ticks{ display:flex; justify-content:space-between; font-size:.76rem; color:var(--muted); margin-top:10px; font-weight:600; }

.calc-out{ background:var(--green-900); color:#fff; padding:30px 28px; }
.calc-out h4{ color:#fff; font-size:1rem; margin-bottom:22px; }
.calc-scenario{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--green-500); border-radius:12px; padding:14px 16px; font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.9); margin-bottom:22px; }
.calc-scenario b{ color:var(--green-500); font-weight:800; }
.cover-note{ display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; font-size:.82rem; font-weight:700; color:var(--green-500); background:rgba(79,191,143,.12); border:1px solid rgba(79,191,143,.32); border-radius:10px; padding:10px 12px; margin-top:14px; }
.cover-note svg{ width:16px; height:16px; flex:none; }
.bars{ display:flex; gap:26px; align-items:flex-end; height:200px; }
.bcol{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.btrack{ width:100%; max-width:110px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.bar{ width:100%; border-radius:12px 12px 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:12px; min-height:46px; transition:height 1s cubic-bezier(.2,.7,.2,1); }
.bar .amt{ font-weight:800; font-size:1.02rem; color:#fff; }
.bar.self{ background:linear-gradient(180deg,#9aa39e,#7d8681); }
.bar.plan{ background:var(--gradient); }
.blabel{ margin-top:12px; text-align:center; font-size:.82rem; font-weight:700; }
.blabel span{ display:block; font-size:.72rem; font-weight:500; color:rgba(255,255,255,.6); margin-top:2px; }
.calc-save{ margin-top:20px; background:rgba(79,191,143,.13); border:1px solid rgba(79,191,143,.35); border-radius:var(--r-md); padding:18px; text-align:center; }
.calc-save .lbl{ font-size:.82rem; color:rgba(255,255,255,.75); }
.calc-save .big{ font-size:clamp(1.9rem,6vw,2.5rem); font-weight:800; color:var(--green-500); line-height:1.1; }
.calc-save .sub{ font-size:.8rem; color:rgba(255,255,255,.7); margin-top:3px; }
.calc-out .btn{ margin-top:18px; }
.calc-disc{ font-size:.72rem; color:rgba(255,255,255,.5); margin-top:16px; line-height:1.5; }
.compare{ display:flex; align-items:stretch; gap:12px; margin:6px 0; }
.cmp{ flex:1; border-radius:16px; padding:22px 16px; text-align:center; }
.cmp-without{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.cmp-with{ background:linear-gradient(135deg, rgba(15,95,74,.5), rgba(79,191,143,.28)); border:1px solid rgba(79,191,143,.5); }
.cmp-label{ font-size:.8rem; font-weight:700; color:rgba(255,255,255,.72); margin-bottom:12px; line-height:1.3; }
.cmp-with .cmp-label{ color:#fff; }
.cmp-amount{ font-size:clamp(1.9rem,7vw,2.5rem); font-weight:800; line-height:1; color:#fff; }
.cmp-with .cmp-amount{ color:var(--green-500); }
.cmp-sub{ font-size:.82rem; color:rgba(255,255,255,.6); margin-top:9px; }
.cmp-with .cmp-sub{ color:rgba(255,255,255,.88); }
.cmp-arrow{ align-self:center; flex:none; color:rgba(255,255,255,.4); font-size:1.5rem; }
.calc-premium{ text-align:center; font-size:.82rem; color:rgba(255,255,255,.6); margin-top:16px; }
@media (max-width:520px){ .compare{ flex-direction:column; gap:10px; } .cmp-arrow{ transform:rotate(90deg); } }

/* ---------- Testimonials ---------- */
.testi{ background:var(--paper); overflow:hidden; }
.marquee{ position:relative; width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; -webkit-overflow-scrolling:touch; padding:6px 22px; scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee::-webkit-scrollbar{ display:none; }
.marquee.dragging{ cursor:grabbing; scroll-snap-type:none; }
.marquee-track{ display:flex; gap:18px; width:max-content; }
.tcard{ width:290px; flex:none; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; position:relative; background:var(--sand) center/cover no-repeat; box-shadow:var(--sh-sm); scroll-snap-align:center; user-select:none; display:flex; flex-direction:column; justify-content:space-between; }
@media (min-width:620px){ .tcard{ width:330px; } }
.tcard::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(13,22,19,.55) 0%, rgba(13,22,19,0) 28%, rgba(13,22,19,.08) 48%, rgba(13,22,19,.92) 100%); }
.tcard-top{ position:relative; z-index:2; display:flex; align-items:center; gap:11px; padding:16px 16px 0; }
.tavatar{ width:42px; height:42px; border-radius:50%; background:var(--green-700) center/cover no-repeat; border:2px solid rgba(255,255,255,.85); flex:none; }
.tname b{ display:block; color:#fff; font-size:.96rem; font-weight:800; line-height:1.2; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.tname span{ font-size:.8rem; color:rgba(255,255,255,.82); text-shadow:0 1px 5px rgba(0,0,0,.55); }
.tcard-quote{ position:relative; z-index:2; padding:16px 18px 20px; }
.tcard-quote .qmark{ width:26px; height:26px; color:var(--green-400); margin-bottom:8px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.tcard-quote p{ color:#fff; font-size:1rem; font-weight:600; line-height:1.45; text-shadow:0 1px 8px rgba(0,0,0,.65); }
.testi-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }
.tnav-btn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--green-700); box-shadow:var(--sh-xs); transition:transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.tnav-btn:hover{ border-color:var(--green-500); background:var(--green-tint); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.tnav-btn:active{ transform:translateY(0); }
.tnav-btn svg{ width:22px; height:22px; }

/* ---------- Für wen ---------- */
.forwhom{ background:var(--sand); }
.fw-grid2{ display:grid; gap:16px; max-width:920px; margin:0 auto; }
@media (min-width:680px){ .fw-grid2{ grid-template-columns:1fr 1fr; } }
.fw-item{ display:flex; align-items:flex-start; gap:15px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:22px 22px; box-shadow:var(--sh-xs); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.fw-item:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--green-500); }
.fw-check{ width:36px; height:36px; border-radius:11px; background:var(--gradient); color:#fff; display:grid; place-items:center; flex:none; box-shadow:var(--sh-green); }
.fw-check svg{ width:19px; height:19px; }
.fw-item p{ margin:0; font-size:1rem; line-height:1.5; color:var(--ink-70); }
.fw-item strong{ color:var(--ink); font-weight:700; }
.fw-foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:.95rem; color:var(--muted); text-align:center; }

/* ---------- FAQ ---------- */
.faq{ background:var(--paper); }
.faq-list{ max-width:720px; margin:0 auto; }
.faq-item{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden; }
.faq-item[open]{ box-shadow:var(--sh-xs); border-color:var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; font-size:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .plus{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--sand); display:grid; place-items:center; color:var(--green-700); transition:transform .3s, background .3s, color .3s; }
.faq-item .plus svg{ width:17px; height:17px; }
.faq-item[open] .plus{ transform:rotate(45deg); background:var(--gradient); color:#fff; }
.faq-answer{ padding:0 22px 20px; }
.faq-answer p{ font-size:.95rem; }

/* ---------- Beratung / Formular ---------- */
.beratung{ background:var(--green-900); color:#fff; position:relative; overflow:hidden; }
.beratung::before{ content:""; position:absolute; top:-30%; right:-10%; width:55%; height:120%; background:radial-gradient(closest-side,rgba(79,191,143,.16),transparent); }
.beratung .wrap{ position:relative; z-index:1; }
.lead-grid{ display:grid; gap:var(--s-6); align-items:center; }
@media (min-width:860px){ .lead-grid{ grid-template-columns:1fr 1.04fr; gap:var(--s-8); } }
.lead-copy .eyebrow{ color:var(--green-500); }
.lead-copy h2{ color:#fff; margin-bottom:14px; }
.lead-copy p{ color:rgba(255,255,255,.82); margin-bottom:22px; }
.lead-benefits li{ display:flex; align-items:center; gap:11px; padding:7px 0; color:#fff; font-weight:600; font-size:.98rem; }
.lead-benefits svg{ width:20px; height:20px; flex:none; color:var(--green-500); }
.lead-person{ display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); }
.lead-person img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.35); }
.lead-person .n{ font-weight:800; color:#fff; }
.lead-person .r{ font-size:.82rem; color:rgba(255,255,255,.75); }
.form-card{ background:var(--surface); color:var(--ink); border-radius:var(--r-xl); padding:30px 26px; box-shadow:var(--sh-lg); }
.form-group label{ color:var(--ink); }
.time-opt label{ color:var(--ink); }
@media (min-width:860px){ .form-card{ padding:40px 38px; } }
.form-card h3{ margin-bottom:6px; }
.form-card .fc-sub{ font-size:.9rem; margin-bottom:22px; }
.form-row{ display:grid; gap:14px; margin-bottom:14px; }
@media (min-width:520px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.form-group label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; }
.form-group input{ width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-md); font-family:inherit; font-size:1rem; color:var(--ink); background:var(--paper); transition:border-color .2s, background .2s; }
.form-group input:focus{ border-color:var(--green-500); background:#fff; outline:none; }
.form-group input::placeholder{ color:#a9a595; }
.time-opts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.time-opt{ position:relative; }
.time-opt input{ position:absolute; opacity:0; }
.time-opt label{ display:block; text-align:center; padding:13px 6px; border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer; font-weight:700; font-size:.9rem; margin:0; transition:all .2s; }
.time-opt input:checked + label{ border-color:var(--green-500); background:var(--green-tint); color:var(--green-700); }
.form-legal{ font-size:.75rem; color:var(--muted); margin-top:14px; text-align:center; line-height:1.5; }
.trust-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); }
.trust-row .ti{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); font-weight:600; }
.trust-row svg{ width:15px; height:15px; color:var(--green-600); }
/* Mobile: Formular vollflächig (randlos), löst jedes Zentrierungsproblem */
@media (max-width:640px){
  .beratung .wrap{ padding-left:0; padding-right:0; }
  .beratung .lead-copy{ padding:0 20px; }
  .form-card{ border-radius:0; padding:30px 20px 34px; }
}
.form-card .btn{ margin-top:8px; }

/* ---------- Beratungs-Modal (Vollbild-Popup) ---------- */
.modal{ position:fixed; inset:0; z-index:200; display:none; }
.modal.open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(13,22,19,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-card{ position:relative; z-index:1; background:var(--surface); color:var(--ink); width:100%; max-width:520px; margin:auto; max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:34px 22px 40px; animation:modalIn .32s cubic-bezier(.2,.7,.2,1); }
.modal-card h3{ margin-bottom:6px; }
.modal-card .fc-sub{ font-size:.92rem; color:var(--muted); margin-bottom:22px; }
.modal-close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); z-index:2; transition:background .2s ease, transform .2s ease; }
.modal-close:hover{ background:var(--sand); transform:rotate(90deg); }
.modal-close svg{ width:20px; height:20px; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (min-width:640px){ .modal.open{ padding:5vh 20px; overflow-y:auto; } .modal-card{ border-radius:var(--r-xl); box-shadow:var(--sh-lg); max-height:90vh; padding:40px 38px 36px; } }
@media (max-width:639px){ .modal-card{ min-height:100%; } }
@media (prefers-reduced-motion:reduce){ .modal-card{ animation:none; } }

/* ---------- CTA-Karte (statt Inline-Formular) ---------- */
.lead-cta-card{ text-align:left; }
.lcc-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--green-tint); color:var(--green-700); font-size:.78rem; font-weight:800; letter-spacing:.02em; padding:7px 13px; border-radius:var(--r-pill); margin-bottom:15px; }
.lcc-badge svg{ width:15px; height:15px; flex:none; }
.lead-cta-card h3{ margin-bottom:8px; }
.lead-cta-card .fc-sub{ font-size:.95rem; color:var(--muted); margin-bottom:22px; }
.lead-cta-card .btn{ margin-top:0; }

/* ---------- Multi-Step Quiz (im Modal) ---------- */
.modal-card.quiz-card{ padding:0; }
.quiz-head{ position:sticky; top:0; z-index:3; background:var(--green-900); color:#fff; padding:18px 22px 16px; }
.quiz-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.quiz-brand{ display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.quiz-dot{ width:9px; height:9px; border-radius:50%; background:var(--green-500); box-shadow:0 0 0 4px rgba(79,191,143,.22); flex:none; }
.quiz-close{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; display:grid; place-items:center; transition:background .2s ease; }
.quiz-close:hover{ background:rgba(255,255,255,.2); }
.quiz-close svg{ width:19px; height:19px; }
.quiz-progress-row{ display:flex; align-items:center; justify-content:space-between; font-size:.8rem; font-weight:700; color:rgba(255,255,255,.82); margin-bottom:9px; }
.quiz-bar{ height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); overflow:hidden; }
.quiz-bar span{ display:block; height:100%; border-radius:var(--r-pill); background:var(--gradient); transition:width .45s cubic-bezier(.2,.7,.2,1); }

.quiz-form{ padding:26px 22px 28px; }
@media (min-width:640px){ .quiz-form{ padding:30px 34px 32px; } }
.quiz-step{ display:none; }
.quiz-step.is-active{ display:block; animation:quizIn .32s cubic-bezier(.2,.7,.2,1); }
@keyframes quizIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .quiz-step.is-active{ animation:none; } }
.quiz-q{ font-size:1.28rem; line-height:1.24; font-weight:800; margin-bottom:20px; }
.quiz-sub{ font-size:.9rem; color:var(--muted); margin:-12px 0 20px; }
.quiz-opts{ display:flex; flex-direction:column; gap:12px; }
.quiz-opt{ width:100%; text-align:left; display:flex; align-items:center; gap:13px; padding:16px 18px; border:1.6px solid var(--line); border-radius:var(--r-md); background:var(--surface); font-family:inherit; font-size:1.02rem; font-weight:700; color:var(--ink); transition:border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease; }
.quiz-opt::before{ content:""; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); flex:none; background-repeat:no-repeat; background-position:center; background-size:14px; transition:all .18s ease; }
.quiz-opt:hover{ border-color:var(--green-500); }
.quiz-opt:active{ transform:scale(.99); }
.quiz-opt.selected{ border-color:var(--green-500); background:var(--green-tint); color:var(--green-700); }
.quiz-opt.selected::before{ border-color:var(--green-500); background-color:var(--green-500); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }

.ic-field{ position:relative; margin-bottom:12px; }
.ic-field .ic-lead{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none; transition:color .2s ease; }
.ic-field input{ width:100%; padding:15px 16px 15px 46px; border:1.5px solid var(--line); border-radius:var(--r-md); font-family:inherit; font-size:1rem; color:var(--ink); background:var(--paper); transition:border-color .2s ease, background .2s ease; }
.ic-field input:focus{ border-color:var(--green-500); background:#fff; outline:none; }
.ic-field:focus-within .ic-lead{ color:var(--green-700); }
.ic-field input::placeholder{ color:#a4a99f; }
.ic-badge{ position:absolute; right:11px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green-tint); color:var(--green-700); display:grid; place-items:center; pointer-events:none; }
.ic-badge svg{ width:15px; height:15px; }
.quiz-consent{ display:flex; align-items:flex-start; gap:11px; font-size:.9rem; color:var(--ink-70); margin:6px 0 18px; cursor:pointer; line-height:1.45; }
.quiz-consent input{ width:20px; height:20px; margin-top:1px; flex:none; accent-color:var(--green-700); cursor:pointer; }
.quiz-consent a{ color:var(--green-700); font-weight:700; text-decoration:underline; }
/* Fehler-Markierung (statt Popup) */
.ic-field input.input-error{ border-color:var(--danger); background:var(--danger-soft); }
.ic-field:has(input.input-error) .ic-lead{ color:var(--danger); }
.quiz-consent.consent-error{ color:var(--danger); }
.quiz-consent.consent-error a{ color:var(--danger); }
.quiz-consent.consent-error input{ outline:2px solid var(--danger); outline-offset:2px; border-radius:4px; }
.quiz-nav{ margin-top:18px; }
.quiz-back{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:700; color:var(--muted); padding:6px 2px; transition:color .2s ease; }
.quiz-back:hover{ color:var(--green-700); }
.quiz-back svg{ width:17px; height:17px; }

/* ---------- Footer ---------- */
.footer{ background:#0e1613; color:rgba(255,255,255,.72); padding:var(--s-8) 0 var(--s-5); }
.footer-top{ display:grid; gap:var(--s-6); padding-bottom:var(--s-6); border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:720px){ .footer-top{ grid-template-columns:1.5fr 1fr 1fr; } }
.footer .brand{ color:#fff; margin-bottom:14px; }
.footer .brand small{ color:rgba(255,255,255,.55); }
.footer p{ font-size:.9rem; color:rgba(255,255,255,.62); max-width:320px; }
.footer h5{ color:#fff; font-size:.92rem; margin-bottom:13px; font-weight:700; }
.footer li{ padding:5px 0; font-size:.9rem; }
.footer a:hover{ color:var(--green-500); }
.footer-disc{ font-size:.76rem; color:rgba(255,255,255,.45); line-height:1.6; margin:var(--s-5) 0; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-top:var(--s-5); font-size:.82rem; color:rgba(255,255,255,.5); }
.footer-bottom a{ color:rgba(255,255,255,.68); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{ position:fixed; inset:auto 0 0 0; z-index:90; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(245,248,246,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(22,33,29,.08); transform:translateY(120%); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; }
@media (min-width:860px){ .sticky-cta{ display:none; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal-head{ height:var(--nav-h); display:flex; align-items:center; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.legal-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.btn-sm{ padding:10px 18px; font-size:.88rem; }
.legal{ background:var(--paper); padding:40px 0 72px; }
.wrap-narrow{ max-width:820px; }
.legal-back{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:700; color:var(--green-700); margin-bottom:20px; }
.legal-back svg{ width:17px; height:17px; }
.legal-back:hover{ opacity:.72; }
.legal h1{ font-size:clamp(2rem,5vw,2.7rem); margin-bottom:6px; }
.legal .legal-sub{ color:var(--muted); margin-bottom:30px; font-size:.95rem; }
.legal-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:30px 22px; }
@media (min-width:720px){ .legal-card{ padding:46px 52px; } }
.legal-card h2{ font-size:1.28rem; margin:32px 0 12px; padding-top:24px; border-top:1px solid var(--line-soft); }
.legal-card h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.legal-card h3{ font-size:1.04rem; font-weight:700; margin:22px 0 8px; }
.legal-card p{ font-size:.95rem; line-height:1.72; color:var(--ink-70); margin-bottom:12px; }
.legal-card ul{ list-style:disc; margin:0 0 14px 22px; }
.legal-card li{ font-size:.95rem; line-height:1.72; color:var(--ink-70); margin-bottom:4px; }
.legal-card a{ color:var(--green-700); text-decoration:underline; word-break:break-word; }
.legal-card address{ font-style:normal; line-height:1.75; color:var(--ink-70); font-size:.98rem; margin-bottom:12px; }
.legal-card strong{ color:var(--ink); font-weight:700; }
.legal-note{ background:var(--green-tint); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; font-size:.88rem; line-height:1.6; color:var(--green-700); margin-bottom:26px; }

/* ---------- Danke ---------- */
.thanks{ min-height:100vh; display:grid; place-items:center; padding:40px 20px; text-align:center; background:radial-gradient(closest-side at 50% 0%,var(--sand),var(--paper)); }
.thanks-card{ max-width:540px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:48px 32px; box-shadow:var(--sh-lg); }
.thanks .check{ width:84px; height:84px; border-radius:50%; background:var(--gradient); display:grid; place-items:center; margin:0 auto 24px; box-shadow:var(--sh-green); animation:pop .5s cubic-bezier(.2,1.4,.5,1); }
.thanks .check svg{ width:44px; height:44px; color:#fff; }
@keyframes pop{ 0%{transform:scale(0);} 100%{transform:scale(1);} }
.thanks h1{ font-size:clamp(1.8rem,6vw,2.5rem); margin-bottom:14px; }
.thanks p{ margin-bottom:12px; }
.thanks .steps{ text-align:left; background:var(--paper); border-radius:var(--r-md); padding:20px 22px; margin:24px 0; }
.thanks .steps li{ display:flex; gap:14px; padding:8px 0; align-items:flex-start; }
.thanks .steps .num{ width:27px; height:27px; border-radius:50%; background:var(--gradient); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.82rem; flex:none; }