/* Landingpage /familie – ergänzt site.css (Schriften, @font-face) */
.lp{
  --green:#588965; --green-d:#40704d; --green-l:#eaf2ec;
  --sand:#E4E4E3; --sand-d:#c8c8c7; --ink:#1a1a18; --ink-s:#3d3d3b; --muted:#6b6b69;
  --orange:#D2461E; --white:#fff;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --wrap:1180px; --pad:clamp(20px,5vw,48px);
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.lp *, .lp *::before, .lp *::after{box-sizing:border-box}
.lp img{max-width:100%; height:auto; display:block}
.lp a{color:var(--green-d)}
.lp h1,.lp h2,.lp h3{font-family:var(--serif); font-weight:500; letter-spacing:-0.015em; margin:0; color:var(--ink)}
.lp em{font-style:italic; color:var(--green)}
.lp :focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 18px/1.2 var(--sans);
  color:var(--white); background:var(--green-d); border:0; border-radius:999px; padding:16px 30px; text-decoration:none; cursor:pointer;
  transition:background .15s ease, transform .15s ease}
.lp a.btn{color:var(--white)}
.btn:hover{background:#355e40}
.btn:active{transform:translateY(1px)}
.btn-big{font-size:20px; padding:20px 34px; width:100%}
.btn-light{background:var(--white); color:var(--green-d)}
.lp a.btn-light{color:var(--green-d)}
.btn-light:hover{background:var(--green-l)}

/* Header */
.lp-head{display:flex; justify-content:space-between; align-items:center; max-width:var(--wrap); margin:0 auto; padding:18px var(--pad)}
.lp-logo img{width:154px}
.lp-phone{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:16px; text-decoration:none; color:var(--ink)}
.lp a.lp-phone{color:var(--ink)}

/* Hero */
.hero{position:relative; overflow:hidden; background:var(--green-l); padding:32px 0 0}
.hero-check{position:absolute; width:min(1100px,110vw); right:-34vw; bottom:-10%; fill:var(--green); opacity:.16; pointer-events:none}
.hero-inner{position:relative; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) 48px; display:grid; gap:36px}
.hero-kicker{display:inline-flex; align-items:center; gap:12px; margin:0 0 18px; font-weight:600; font-size:16px; color:var(--green-d)}
.hero-kicker::before{content:""; width:6px; height:22px; background:var(--orange)}
.hero h1{font-size:clamp(40px,6.4vw,72px); line-height:1.02; letter-spacing:-0.025em; max-width:15ch}
.hero-lead{font-size:clamp(18px,1.6vw,21px); color:var(--ink-s); margin:22px 0 0; max-width:34em}
.hero-points{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px}
.hero-points li{position:relative; padding-left:36px; font-size:18px}
.hero-points li::before{content:""; position:absolute; left:0; top:3px; width:24px; height:24px; border-radius:50%;
  background:var(--green-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

.hero-form-wrap{position:relative; scroll-margin-top:16px}
.lp .hero-preview{display:none}
.lp-form{position:relative; background:var(--white); border-radius:22px; padding:28px 24px 22px;
  box-shadow:0 1px 0 rgba(26,26,24,.06), 0 24px 60px -24px rgba(64,112,77,.45)}
.lp-form-title{font-size:30px; line-height:1.1}
.lp-form-sub{margin:6px 0 18px; color:var(--ink-s); font-size:16px}
.f-field{display:block; margin-bottom:14px}
.f-label{display:block; font-size:15px; font-weight:600; margin-bottom:6px}
.f-field input{width:100%; font:400 18px/1.3 var(--sans); color:var(--ink); padding:14px 16px; border:1.5px solid var(--sand-d); border-radius:12px; background:var(--white)}
.f-field input:focus{border-color:var(--green-d); outline:none; box-shadow:0 0 0 3px rgba(64,112,77,.2)}
.f-field input[aria-invalid="true"]{border-color:var(--orange)}
.f-hidden{display:none}
.f-hidden.is-open{display:block}
.f-check{display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; font-size:14.5px; line-height:1.45; color:var(--ink-s); margin:0 0 14px; cursor:pointer}
.f-check input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--green-d)}
.f-check-strong{background:var(--green-l); border-radius:12px; padding:14px; color:var(--ink); font-size:15px}
.f-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lp-form .btn-big{margin-top:6px}
.f-micro{margin:12px 0 0; font-size:14px; color:var(--muted); text-align:center}
.f-error{margin:12px 0 0; color:#a8331a; font-weight:600; font-size:15px}

.trust{position:relative; list-style:none; margin:0; padding:18px var(--pad); background:var(--white);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; font-size:15px; font-weight:500; color:var(--ink-s)}
.trust li{display:inline-flex; align-items:center; gap:8px}
.trust li::before{content:""; width:16px; height:16px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,12.5 Q6,13.5 9,16 Q14,9 22,4 Q16,10 9.5,20 Q6.5,15.5 3,12.5 Z' fill='%23588965'/%3E%3C/svg%3E") center/contain no-repeat}

/* Quick check */
.quick{background:var(--white); padding:clamp(56px,8vw,96px) var(--pad)}
.quick-inner{max-width:880px; margin:0 auto}
.quick-intro h2{font-size:clamp(30px,4vw,44px); line-height:1.08}
.quick-intro p{color:var(--ink-s); margin:14px 0 0; max-width:36em}
.quick-list{list-style:none; padding:0; margin:32px 0 0; display:grid; gap:14px; counter-reset:q}
.quick-q{border:1.5px solid var(--sand); border-radius:18px; padding:20px; transition:border-color .2s ease, background .2s ease}
.quick-q p{margin:0 0 14px; font-weight:500; font-size:18px}
.quick-a{display:flex; flex-wrap:wrap; gap:8px}
.quick-a button{font:600 16px/1 var(--sans); padding:12px 18px; border-radius:999px; border:1.5px solid var(--sand-d); background:var(--white); color:var(--ink); cursor:pointer}
.quick-a button:hover{border-color:var(--green-d)}
.quick-a button[aria-pressed="true"]{background:var(--green-d); border-color:var(--green-d); color:var(--white)}
.quick-a button[data-a="weiss"][aria-pressed="true"]{background:var(--orange); border-color:var(--orange)}
.quick-q.is-done{border-color:var(--green-l); background:#fafcfa}
.quick-result{margin-top:22px; border-radius:18px; background:var(--ink); color:var(--white); padding:24px; display:grid; gap:18px}
.quick-result-text{margin:0; font-family:var(--serif); font-size:clamp(22px,2.4vw,28px); line-height:1.25}
.quick-result .btn{justify-self:start; background:var(--white); color:var(--ink)}
.lp .quick-result a.btn{color:var(--ink)}

/* Mistakes */
.mistakes{background:var(--green-d); color:var(--white); padding:clamp(56px,8vw,96px) var(--pad)}
.mistakes-inner{max-width:var(--wrap); margin:0 auto}
.mistakes h2{color:var(--white); font-size:clamp(30px,4vw,46px); line-height:1.08; max-width:20ch}
.mistakes-grid{display:grid; gap:28px; margin-top:40px}
.mistakes article{border-top:2px solid rgba(255,255,255,.28); padding-top:20px}
.mistakes h3{color:var(--white); font-size:26px; line-height:1.15}
.mistakes p{margin:10px 0 0; color:#dfeae2; font-size:17px}

/* Steps */
.steps{padding:clamp(56px,8vw,96px) var(--pad); background:var(--white)}
.steps-inner{max-width:var(--wrap); margin:0 auto}
.steps h2{font-size:clamp(30px,4vw,44px)}
.steps-list{list-style:none; padding:0; margin:36px 0 36px; display:grid; gap:28px}
.steps-list li{display:grid; grid-template-columns:56px 1fr; column-gap:18px; align-items:start}
.steps-n{grid-row:span 2; width:56px; height:56px; border-radius:50%; background:var(--green-l); color:var(--green-d);
  font:500 28px/56px var(--serif); text-align:center}
.steps-list h3{font-size:24px; line-height:1.2; padding-top:6px}
.steps-list p{margin:6px 0 0; color:var(--ink-s)}

/* Me */
.me{background:var(--sand); padding:clamp(56px,8vw,96px) var(--pad)}
.me-inner{max-width:var(--wrap); margin:0 auto; display:grid; gap:36px; align-items:center}
.me-photo img{border-radius:22px; width:100%; max-width:440px; aspect-ratio:4/5; object-fit:cover}
.me h2{font-size:clamp(32px,4vw,48px)}
.me-text p{color:var(--ink-s); margin:16px 0 0; max-width:34em}
.lp .me-text .me-sign{font-family:var(--serif); font-style:italic; font-size:26px; color:var(--green-d); margin-top:20px}
.me-facts{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:8px; font-size:15px; color:var(--ink-s)}
.me-facts li{padding-left:22px; position:relative}
.me-facts li::before{content:""; position:absolute; left:0; top:9px; width:10px; height:2px; background:var(--orange)}

/* Offer */
.offer{background:var(--white); padding:clamp(56px,8vw,96px) var(--pad)}
.offer-inner{max-width:var(--wrap); margin:0 auto; display:grid; gap:24px;
  background:var(--green-l); border-radius:28px; padding:clamp(28px,4vw,56px)}
.offer h2{font-size:clamp(30px,4vw,44px); line-height:1.08; max-width:18ch}
.offer-main > p{color:var(--ink-s); margin:16px 0 0; max-width:34em}
.offer-list{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.offer-list li{position:relative; padding-left:34px}
.offer-list li::before{content:""; position:absolute; left:0; top:2px; width:22px; height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,12.5 Q6,13.5 9,16 Q14,9 22,4 Q16,10 9.5,20 Q6.5,15.5 3,12.5 Z' fill='%2340704d'/%3E%3C/svg%3E") center/contain no-repeat}
.offer-price{background:var(--green-d); color:var(--white); border-radius:22px; padding:28px; display:grid; gap:12px; align-content:start}
.offer-amount{margin:0; font:500 72px/1 var(--serif); color:var(--white)}
.offer-note{margin:0; color:#dfeae2; font-size:16px}
.offer-price .btn{margin-top:8px}
.perks{max-width:var(--wrap); margin:40px auto 0}
.perks h3{font-size:26px}
.perks-grid{display:grid; gap:18px; margin-top:20px}
.perks-grid p{margin:0; color:var(--ink-s); padding-top:16px; border-top:2px solid var(--green-l)}
.perks-grid strong{color:var(--ink)}

/* FAQ */
.faq{background:var(--white); padding:0 var(--pad) clamp(56px,8vw,96px)}
.faq-inner{max-width:820px; margin:0 auto}
.faq h2{font-size:clamp(30px,4vw,44px); margin-bottom:20px}
.faq details{border-bottom:1.5px solid var(--sand)}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-weight:600; font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-10px;
  border-right:2.5px solid var(--green-d); border-bottom:2.5px solid var(--green-d); transform:rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq details p{margin:0 0 20px; color:var(--ink-s); max-width:40em}

/* Final */
.final{position:relative; overflow:hidden; background:var(--green-d); padding:clamp(64px,10vw,120px) var(--pad); text-align:left}
.final-check{position:absolute; width:760px; right:-120px; bottom:-110px; fill:var(--green); opacity:.55; pointer-events:none}
.final-inner{position:relative; max-width:var(--wrap); margin:0 auto}
.final h2{color:var(--white); font-size:clamp(34px,5vw,60px); line-height:1.04; max-width:20ch}
.final .btn{margin-top:32px; width:auto}

/* Footer */
.lp-foot{max-width:var(--wrap); margin:0 auto; padding:28px var(--pad) 110px; display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; font-size:14px; color:var(--muted)}
.lp-foot p{margin:0}
.lp-foot nav{display:flex; gap:20px}

/* Sticky CTA (mobil) */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:20; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); border-top:1px solid var(--sand); transform:translateY(0); transition:transform .25s ease}
.sticky-cta .btn{width:100%}
.sticky-cta.is-hidden{transform:translateY(110%)}

/* Desktop */
@media (min-width:900px){
  .hero{padding-top:48px}
  .hero-inner{grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; padding-bottom:72px}
  .hero-check{width:760px; right:-170px; bottom:-150px; opacity:.2}
  .hero-copy{padding-top:24px}
  .lp .hero-preview{display:block; position:absolute; width:270px; right:-60px; top:-36px; transform:rotate(5deg);
    border-radius:6px; box-shadow:0 24px 50px -20px rgba(26,26,24,.35)}
  .lp-form{margin-top:96px; padding:32px 32px 26px}
  .mistakes-grid{grid-template-columns:repeat(3,1fr); gap:40px}
  .steps-list{grid-template-columns:repeat(3,1fr); gap:40px}
  .me-inner{grid-template-columns:420px 1fr; gap:64px}
  .offer-inner{grid-template-columns:1.4fr 1fr; gap:48px; align-items:center}
  .perks-grid{grid-template-columns:repeat(3,1fr); gap:32px}
  .sticky-cta{display:none}
  .lp-foot{padding-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  .lp *{transition:none !important; scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}