/* CREO 3a-Landing – Layout-Mockup (statisch, nicht live). Mobil zuerst. */
@font-face{font-family:"Newsreader";src:local("Newsreader"),local("Newsreader 16pt");}
:root{
  --beige:#F3EEE5; --beige-deep:#E9E1D3; --weiss:#FFFFFF;
  --tanne:#11352E; --tanne-2:#00483C; --gruen:#559F58; --gruen-text:#2F6F3A;
  --ink:#1C2421; --muted:#5B6661; --rule:rgba(17,53,46,.16);
  --serif:"Newsreader","Source Serif Pro",Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --measure:36rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--beige);color:var(--ink);font:400 17px/1.6 var(--sans)}
a{color:var(--tanne)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.mock-flag{background:var(--tanne);color:#E9E1D3;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:7px 10px}

/* Kopf */
.top{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.top img{height:20px;width:auto;display:block}
.top .tel{font-size:14px;font-weight:600;text-decoration:none;color:var(--tanne)}
.top .tel span{color:var(--muted);font-weight:500}

/* Hero */
.hero{padding:26px 0 48px}
.eyebrow{font:600 12.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-text);margin:0 0 18px}
h1{font:500 40px/1.08 var(--serif);letter-spacing:-.01em;color:var(--tanne);margin:0 0 20px;max-width:15ch}
h1 em{font-style:italic;color:var(--tanne-2)}
.sub{font-size:18px;line-height:1.55;color:var(--ink);max-width:var(--measure);margin:0 0 30px}
.sub strong{font-weight:650;color:var(--tanne)}

/* Erste Frage direkt im Hero – Zeilen statt Kacheln */
.q-label{font:600 13px/1.3 var(--sans);color:var(--muted);margin:0 0 6px}
.q-title{font:500 23px/1.25 var(--serif);color:var(--tanne);margin:0 0 8px}
.opts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);max-width:34rem}
.opts li{border-bottom:1px solid var(--rule)}
.opts a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 2px;text-decoration:none;color:var(--ink);font-size:17px;font-weight:550;min-height:58px}
.opts a small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}
.opts a .arr{color:var(--tanne);font-size:20px;transition:transform .15s}
.opts a:hover .arr{transform:translateX(4px)}
.micro{font-size:14px;color:var(--muted);margin:16px 0 0}
.micro b{color:var(--tanne);font-weight:600}

/* Fakten-Zeile: Typografie statt Kästen */
.facts{background:var(--weiss);padding:44px 0}
.facts ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.facts li{padding:22px 0;border-top:1px solid var(--rule)}
.facts li:first-child{border-top:0;padding-top:0}
.big{display:block;font:500 46px/1 var(--serif);color:var(--tanne);letter-spacing:-.015em;margin-bottom:10px}
.facts h3{font:650 16px/1.35 var(--sans);margin:0 0 4px;color:var(--ink)}
.facts p{margin:0;color:var(--muted);font-size:15.5px;max-width:30rem}
.src{font-size:12.5px;color:var(--muted)}
.src a{color:var(--muted)}

/* Fliesstext-Abschnitte */
.sec{padding:56px 0}
.sec h2{font:500 31px/1.15 var(--serif);color:var(--tanne);margin:0 0 18px;max-width:20ch}
.sec p{max-width:var(--measure)}
.steps{list-style:none;counter-reset:s;margin:26px 0 0;padding:0;max-width:40rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:16px 0;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s);font:500 30px/1 var(--serif);color:var(--gruen-text)}
.steps b{display:block;font-weight:650;color:var(--ink)}
.steps span{color:var(--muted);font-size:15.5px}

/* Persönlich */
.person{background:var(--weiss)}
.quote{font:400 25px/1.35 var(--serif);font-style:italic;color:var(--tanne);margin:0 0 22px;max-width:30ch}
.sig{display:flex;align-items:center;gap:14px}
.mono{width:52px;height:52px;border-radius:50%;background:var(--beige-deep);display:flex;align-items:center;justify-content:center;font:500 18px var(--serif);color:var(--tanne)}
.sig b{display:block;color:var(--ink)}
.sig span{font-size:14px;color:var(--muted)}
.trust{list-style:none;margin:30px 0 0;padding:0;max-width:40rem}
.trust li{padding:12px 0 12px 26px;border-top:1px solid var(--rule);position:relative;font-size:16px}
.trust li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:2px;background:var(--gruen)}
.tbd{font-size:12px;color:#8a6d3b;font-weight:600}

/* FAQ */
.faq details{border-top:1px solid var(--rule);max-width:44rem}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 24px var(--serif);color:var(--tanne)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--muted);font-size:15.5px}

/* Schluss */
.final{background:var(--tanne);color:#F3EEE5;padding:60px 0}
.final h2{font:500 32px/1.15 var(--serif);margin:0 0 14px;color:#fff;max-width:18ch}
.final p{color:#D8E3DC;max-width:var(--measure);margin:0 0 26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:10px;background:var(--tanne);color:#fff;font:650 17px var(--sans);text-decoration:none;border:0}
.btn.light{background:var(--beige);color:var(--tanne)}
.final .alt{display:block;margin-top:16px;font-size:15px;color:#D8E3DC}
.final .alt a{color:#fff}

footer{padding:34px 0 46px;font-size:13px;color:var(--muted)}
footer p{max-width:46rem;margin:0 0 10px}

/* Funnel-Vorschau */
.prog{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin:0 0 22px}
.prog i{flex:1;height:3px;background:var(--rule);position:relative;max-width:220px}
.prog i::after{content:"";position:absolute;inset:0;width:var(--p,50%);background:var(--tanne)}
.step-tag{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-text);margin:0 0 14px}
.result-num{font:500 56px/1 var(--serif);color:var(--tanne);margin:6px 0 8px;letter-spacing:-.02em}
.result-cap{color:var(--muted);margin:0 0 22px}
.line-list{list-style:none;padding:0;margin:0 0 26px;max-width:34rem}
.line-list li{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--rule);font-size:16px}
.line-list li b{font-weight:650;color:var(--tanne)}
form .f{display:block;margin:0 0 18px;max-width:30rem}
form label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px}
form label span{font-weight:400;color:var(--muted)}
form input[type=text],form input[type=email],form input[type=tel]{width:100%;height:52px;border:0;border-bottom:1.5px solid rgba(17,53,46,.35);background:transparent;font:400 18px var(--sans);color:var(--ink);padding:0 2px;border-radius:0}
form input:focus{outline:none;border-bottom-color:var(--tanne)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);max-width:30rem;margin:6px 0 22px}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--tanne)}
.after{font-size:14px;color:var(--muted);max-width:30rem;margin:14px 0 0}
.divider{height:1px;background:var(--rule);margin:0}

@media (min-width:900px){
  body{font-size:18px}
  .wrap{padding:0 48px}
  .top{padding:28px 0}
  .top img{height:24px}
  .hero{padding:56px 0 84px}
  .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:end}
  h1{font-size:64px;max-width:14ch}
  .sub{font-size:20px}
  .q-title{font-size:26px}
  .facts{padding:64px 0}
  .facts ol{grid-template-columns:repeat(3,1fr)}
  .facts li{border-top:0;border-left:1px solid var(--rule);padding:0 36px}
  .facts li:first-child{border-left:0;padding-left:0}
  .big{font-size:60px}
  .sec{padding:96px 0}
  .sec h2{font-size:44px}
  .two{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px}
  .quote{font-size:34px}
  .final{padding:88px 0}
  .final h2{font-size:46px}
  .fun .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}
}

.nw{white-space:nowrap}
@media (max-width:899px){h1 .nw{white-space:normal}}
.line-list li{gap:16px}
.line-list li b{white-space:nowrap;text-align:right}
.opts a small{display:block}