:root{
  --green:#10291f; --green2:#183a2c; --green3:#0b1d15; --paper:#f6f4ee; --white:#fff; --ink:#1c2420; --mute:#56625b; --brass:#c2a36b; --brass2:#b08a4a; --line:#dedacd; --ok:#1d7a4a; --warn:#b4761a;
  --serif:"Bodoni 72","Didot","Baskerville","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:2.25rem; --nav:4.25rem;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:auto;scroll-padding-top:var(--nav)}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--brass);color:var(--green)}
a{color:inherit}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.035em;line-height:1.08}
p{max-width:38rem}
:focus-visible{outline:3px solid var(--brass2);outline-offset:3px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-radius:0 0 1.5rem 1.5rem;box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:var(--nav)}
.logo{font:400 1.45rem var(--serif);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--green)}
.right{display:flex;align-items:center;gap:1.5rem}
.nav-r{display:flex;align-items:center;gap:1.5rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.nav-r a.l{display:inline-block;text-decoration:none;color:var(--mute);padding:.3rem 0;border-bottom:2px solid transparent}
.nav-r a.l:hover{color:var(--green)}
.nav-r a.l.on{color:var(--green);border-bottom-color:var(--brass2)}
.menu{display:none;background:none;border:1px solid var(--line);border-radius:.8rem;padding:.55rem .9rem;font:600 .85rem var(--sans);color:var(--green);cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:600 .95rem var(--sans);letter-spacing:-.01em;text-decoration:none;padding:.9rem 1.6rem;border:0;border-radius:.9rem;background:var(--green);color:#fff;cursor:pointer;transition:background .25s,transform .25s}
.btn:hover{background:var(--green2);transform:translateY(-2px)}
.btn.light{background:var(--white);color:var(--ink)}
.btn.light:hover{background:var(--paper)}
.btn.block{width:100%;padding:1rem}
.btn.sm{padding:.65rem 1.2rem;font-size:.88rem}
.link{font-weight:600;text-decoration:none;color:inherit;padding:.9rem .4rem}
.link:hover{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{background:var(--green);color:var(--paper);margin-top:-1.5rem;padding-top:1.5rem;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(48rem 30rem at 78% 55%,rgba(194,163,107,.2),transparent 70%),radial-gradient(40rem 30rem at 0% 0%,rgba(255,255,255,.04),transparent 70%)}
.hero-grid{max-width:72rem;margin:0 auto;padding:1.5rem;display:grid;gap:2rem;align-items:center;min-height:calc(100svh - var(--nav) - 1.5rem)}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.25rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.3rem .8rem;font-size:.82rem;font-weight:600;color:#e8efe9}
.pill i{width:.5rem;height:.5rem;border-radius:50%;background:var(--brass)}
.hero-text{text-align:center}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);margin:0 auto 1rem;max-width:15ch;text-wrap:balance}
.hero p.sub{font-size:1.15rem;color:#c9d6cc;margin:0 auto 1.6rem;max-width:30rem;text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;align-items:center}
.hero-note{font-size:.82rem;color:#93a59a;margin:1.1rem auto 0}

/* ---------- Handy ---------- */
.phone{--pw:17.5rem;width:var(--pw);font-size:calc(var(--pw)/17.5);aspect-ratio:9/18.6;background:#0a1410;border-radius:2.7em;padding:.5em;box-shadow:0 0 0 .08em #2a3b33,0 2.2em 4em -1.2em rgba(0,0,0,.65);position:relative;margin:0 auto}
.phone::before{content:"";position:absolute;top:.95em;left:50%;width:5.2em;height:1.3em;border-radius:1em;background:#05090a;transform:translateX(-50%);z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:2.25em;overflow:hidden;background:#eef2ee;color:#16211b;font-size:1em}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5rem)}}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity .5s;pointer-events:none}
.scr.on{opacity:1}
.bar{display:flex;align-items:center;gap:.6em;padding:2.6em .9em .7em;background:#fff;border-bottom:1px solid #e0e6e1;font-size:.8em}
.bar .av{width:2em;height:2em;border-radius:50%;background:var(--green);color:var(--brass);display:grid;place-items:center;font-weight:700;font-size:.75em;letter-spacing:.04em}
.bar b{font-size:1.05em}
.chat{flex:1;padding:.8em;display:flex;flex-direction:column;gap:.6em;overflow:hidden}
.msg{max-width:86%;padding:.55em .75em;border-radius:1em;font-size:.82em;line-height:1.4}
.msg.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:.3em}
.msg.ai{align-self:flex-start;background:#fff;border:1px solid #e0e6e1;border-bottom-left-radius:.3em}
.typing{align-self:flex-start;display:flex;gap:.3em;background:#fff;border:1px solid #e0e6e1;border-radius:1em;padding:.6em .8em}
.typing i{width:.45em;height:.45em;border-radius:50%;background:#9bb0a3;animation:tdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-.25em)}}
.inp{margin:.6em .8em 1em;padding:.6em .9em;border-radius:999px;background:#fff;border:1px solid #dbe3dd;font-size:.78em;color:#8aa093}
.lcard{background:#fff;border:1px solid #e0e6e1;border-radius:1em;overflow:hidden;align-self:stretch;box-shadow:0 .6em 1.4em -1em rgba(0,0,0,.4)}
.lcard img{width:100%;height:9em;object-fit:cover;display:block}
.lc-b{padding:.75em .85em .85em}
.lc-t{display:inline-block;font-size:.62em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass2);margin-bottom:.35em}
.lcard b.t{display:block;font-size:.95em;line-height:1.25;letter-spacing:-.01em;margin-bottom:.4em}
.lcard .ch{display:flex;flex-wrap:wrap;gap:.3em;margin-bottom:.45em}
.lcard .ch span{background:#e9efea;border-radius:.5em;padding:.1em .5em;font-size:.7em;color:var(--green)}
.lcard p.d{font-size:.74em;color:#4f5f56;line-height:1.4;margin:0 0 .5em;max-width:none}
.lcard .pr{font:400 1.5em var(--serif);color:var(--green)}
.lcard .pr small{font:400 .5em var(--sans);color:#6b7a71;margin-left:.3em}
.lcard.k{border-color:#e6c9a8}
.lcard.k .lc-t{color:#a5601f}
.badge{align-self:flex-start;font-size:.64em;font-weight:600;color:var(--green);background:#dfe9e0;border-radius:999px;padding:.25em .7em}
.checks{list-style:none;padding:0;display:grid;gap:.45em;margin:.2em 0}
.checks li{display:flex;gap:.6em;align-items:flex-start;font-size:.8em;background:#fff;border:1px solid #e0e6e1;border-radius:.8em;padding:.55em .7em;line-height:1.35}
.checks li::before{content:"✓";flex:none;width:1.4em;height:1.4em;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.8em;font-weight:700;margin-top:.05em}
.checks li.todo::before{content:"!";background:var(--warn)}
.pub{margin-top:auto;align-self:stretch;text-align:center;background:var(--green);color:#fff;border-radius:.9em;padding:.7em;font-size:.85em;font-weight:600}

/* ---------- Laufband ---------- */
.ticker{background:var(--brass);color:var(--green);overflow:hidden;white-space:nowrap;border-block:1px solid rgba(16,41,31,.35)}
.ticker .row{display:inline-flex;gap:2.2rem;padding:.8rem 0;animation:tk 38s linear infinite;font-weight:700;letter-spacing:-.01em;font-size:1rem}
.ticker .row span::after{content:"◆";margin-left:2.2rem;font-size:.6em;vertical-align:middle}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
.sec{padding:5rem 0;text-align:center}
.sec h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:0 auto .9rem;color:var(--green);text-wrap:balance;max-width:20ch}
.sec h2::before{content:"";display:block;width:3.5rem;height:3px;border-radius:2px;background:var(--brass2);margin:0 auto 1.2rem}
.sec .lead{color:var(--ink);font-size:1.15rem;margin:0 auto 1.5rem}
.sec p{margin-left:auto;margin-right:auto;color:var(--mute)}
.dark{background:var(--green);color:var(--paper)}
.dark h2{color:#fff}
.dark h2::before{background:#d9bf86}
.dark .lead,.dark p{color:#c9d6cc}

/* ---------- Story (Handy bleibt stehen) ---------- */
.story{background:var(--paper);padding:0}
.story-grid{max-width:72rem;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.story-pin{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:grid;place-items:center;order:2}
.story-text{order:1}
.beat{min-height:calc(100svh - var(--nav));display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:.22;transition:opacity .5s}
.beat.on{opacity:1}
.beat .n{width:2rem;height:2rem;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;margin-bottom:1rem}
.beat h3{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:.8rem;color:var(--green)}
.beat p{font-size:1.1rem;color:var(--mute);max-width:24rem}
.story-head{text-align:center;padding:5rem 0 1rem}

/* ---------- Live-Demo ---------- */
.demo{background:var(--green);color:var(--paper);border-radius:var(--r);padding:clamp(1.5rem,4vw,3rem);margin:0 auto}
.demo-grid{display:grid;gap:2.5rem;align-items:center;text-align:left;margin-top:2rem}
.ctl{display:grid;gap:1.1rem}
.ctl label,.ctl .lbl{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#a9bbaf;margin-bottom:.4rem;font-weight:600}
.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button,.tg button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#e8efe9;border-radius:999px;padding:.5rem .95rem;font:600 .92rem var(--sans);cursor:pointer;transition:background .2s,color .2s}
.seg button.on,.tg button.on{background:var(--paper);color:var(--green);border-color:var(--paper)}
.tg{display:flex;flex-wrap:wrap;gap:.4rem}
.ctl input,.ctl select{width:100%;padding:.7rem .85rem;border:1px solid rgba(255,255,255,.25);border-radius:.8rem;background:rgba(255,255,255,.08);color:#fff;font:1rem var(--sans)}
.ctl select option{color:#16211b}
.ctl input:focus,.ctl select:focus{outline:3px solid var(--brass);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.demo-out{display:grid;gap:1rem;justify-items:center}
.tabs{display:flex;gap:.4rem;background:rgba(255,255,255,.08);border-radius:999px;padding:.25rem}
.tabs button{border:0;background:none;color:#cbd8cf;border-radius:999px;padding:.5rem 1.1rem;font:600 .9rem var(--sans);cursor:pointer}
.tabs button.on{background:var(--paper);color:var(--green)}
.demo-note{font-size:.82rem;color:#a9bbaf;text-align:center;margin:1.5rem auto 0;max-width:34rem}
.demo .screen .scr{opacity:1;transition:none}
.demo .scr[hidden]{display:none}

/* ---------- Karten ---------- */
.trio{display:grid;gap:1rem;margin:2rem auto 0;max-width:62rem}
.card{border:1px solid var(--line);background:var(--white);border-radius:1.5rem;padding:1.8rem 1.4rem;text-align:center}
.card.alt{background:var(--green);border-color:var(--green)}
.card h3{font-size:1.3rem;margin:.9rem 0 .5rem;color:var(--green)}
.card.alt h3{color:#fff}
.card p{margin:0 auto;font-size:1rem}
.card.alt p{color:#cdd7cf}
.ico{width:3rem;height:3rem;border-radius:1rem;background:#ebe8dc;display:grid;place-items:center;margin:0 auto}
.card.alt .ico{background:rgba(255,255,255,.12)}
.ico svg{width:1.6rem;height:1.6rem;stroke:var(--brass2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card.alt .ico svg{stroke:#d9bf86}
.pts{list-style:none;padding:0;margin:1rem auto 0;display:grid;gap:.6rem;max-width:62rem}
.pts li{background:transparent;border:1px solid var(--line);border-radius:1rem;padding:.8rem .8rem;font-size:.95rem;color:var(--ink)}
.pts li::before{content:"";display:block;width:.55rem;height:.55rem;background:var(--brass2);transform:rotate(45deg);margin:0 auto .5rem}

.ph{width:6rem;height:6rem;border:1.5px dashed var(--brass2);border-radius:50%;display:grid;place-items:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 auto 1.1rem}
.rn{font-size:1.5rem;margin-bottom:.4rem;color:var(--ink)}

/* ---------- Preis ---------- */
.buy{background:var(--white);border:1px solid var(--line);border-radius:1.75rem;padding:1.75rem;box-shadow:0 18px 40px -24px rgba(16,41,31,.35);max-width:46rem;margin:0 auto;text-align:center}
.buy .amt{font:400 3.6rem/1 var(--serif);color:var(--green)}
.buy .amt small{font-size:.45em;color:var(--brass2);margin-left:.1em}
.buy .per{font-size:.9rem;color:var(--mute);max-width:none}
.facts{list-style:none;padding:0;margin:1.25rem 0;border-top:1px solid var(--line);text-align:left}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts span:first-child{color:var(--mute)}
.facts b{font-weight:600;text-align:right}
.notify{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);text-align:center}
.notify label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.5rem;color:var(--green)}
.notify .row{display:flex;gap:.5rem}
.notify input{flex:1;min-width:0}
.notify .msg2{font-size:.85rem;margin:.5rem 0 0;max-width:none;display:none}
.notify .msg2.ok{color:var(--ok);display:block}.notify .msg2.bad{color:#a3262c;display:block}
input,select{width:100%;padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:.8rem;font:1rem var(--sans);background:#fff;color:var(--ink)}
input:focus,select:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(194,163,107,.35)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- FAQ ---------- */
.faqs{max-width:42rem;margin:1.5rem auto 0;text-align:left}
details{border-bottom:1px solid var(--line);padding:1.1rem 0}
details:first-child{border-top:1px solid var(--line)}
summary{font-weight:600;font-size:1.08rem;letter-spacing:-.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:.62rem;height:.62rem;background:var(--brass2);transform:rotate(45deg);margin-top:.5rem;transition:transform .3s}
details[open] summary::after{transform:rotate(225deg)}
details p{margin:.7rem 0 0}

/* ---------- Anmeldung ---------- */
#anmeldung{padding:2.5rem 0 4rem}
.formcard{background:var(--white);border:1px solid var(--line);border-radius:1.75rem;padding:1.5rem;max-width:44rem;margin:1rem auto 0;box-shadow:0 18px 40px -24px rgba(16,41,31,.35);text-align:left}
.fgrid{display:grid;gap:.8rem 1.25rem;grid-template-columns:1fr 1fr}
.fgrid .full{grid-column:1/-1}
.formcard label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.3rem;color:var(--green)}
.formcard input,.formcard select{padding:.65rem .8rem}
.sum{font-size:.9rem;color:var(--mute);margin:0;text-align:center;max-width:none}
.sum b{color:var(--green)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;font-weight:400!important;color:var(--mute)!important;margin:0!important}
.check input{width:auto;margin-top:.3rem;accent-color:var(--green)}
.check a{color:var(--green)}
.err{display:none;color:#a3262c;font-size:.9rem;max-width:none;margin:0}
.ok{display:none;text-align:center;padding:2.5rem 0}.ok h3{font-size:1.7rem;color:var(--green);margin-bottom:.5rem}.ok p{margin:0 auto;color:var(--mute)}

footer{background:var(--green);color:#b9c6bc;padding:2.5rem 0 1.75rem;border-radius:var(--r) var(--r) 0 0;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between;align-items:center}
footer .logo{color:var(--paper)}
footer p{flex-basis:100%;max-width:none;font-size:.8rem;color:#8d9e92}
footer a{text-decoration:none;border-bottom:1px solid rgba(194,163,107,.5)}

/* ---------- Einblenden (dezent, nur wenn JS läuft) ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}

/* ---------- Desktop ---------- */
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-text{text-align:left}
  .hero h1,.hero p.sub{margin-left:0}
  .pills,.hero-cta{justify-content:flex-start}
  .hero .phone{--pw:min(19rem,calc((100svh - 8.5rem)/2.07))}
  .trio{grid-template-columns:repeat(3,1fr)}
  .pts{grid-template-columns:repeat(4,1fr)}
  .demo-grid{grid-template-columns:1fr 1fr;gap:3.5rem}
  .story-pin .phone{--pw:min(20rem,calc((100svh - 8.5rem)/2.07))}
  .buy .grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2.25rem;text-align:left}
}
/* ---------- Handy ---------- */
@media(max-width:899px){
  :root{--r:1.75rem}
  .menu{display:inline-flex}
  .nav .wrap{position:relative}
  .nav-r{display:none;position:absolute;top:calc(100% + .4rem);left:1rem;right:1rem;background:var(--paper);border:1px solid var(--line);border-radius:1.25rem;padding:.75rem;flex-direction:column;align-items:stretch;gap:.1rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.45);z-index:60}
  .nav-r.open{display:flex}
  .nav-r a.l{display:block;padding:.85rem 1rem;font-size:.9rem;border-radius:.8rem;border-bottom:0}
  .nav-r a.l.on{background:#ebe8dc}
  .right{gap:.6rem}
  .hero-grid{padding-top:2rem;padding-bottom:3rem;min-height:0}
  .hero .phone{--pw:15rem}
  .sec{padding:3.5rem 0}
  .story-grid{grid-template-columns:1fr;gap:0}
  .story-pin{order:1;height:auto;padding:1rem 0 .5rem;background:var(--paper);z-index:3}
  .story-pin .phone{--pw:12.5rem}
  .story-text{order:2}
  .beat{min-height:62svh;padding:1rem 0}
  .fgrid{grid-template-columns:1fr}
  .notify .row{flex-direction:column}
  .two{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}

/* Feinschliff */
.demo .lead,.demo p{color:#c9d6cc}
.demo .demo-note{color:#a9bbaf}
.demo .demo-out .phone{--pw:16rem}
.demo-grid{align-items:start}
.formcard label.check{display:flex;margin:0}

/* ===== Schulung statt Bot ===== */
.lcard.course img{height:8.2em}
.mini{list-style:none;padding:0;margin:.5em 0 .6em;display:grid;gap:.3em}
.mini li{font-size:.76em;color:#3f5047;display:flex;gap:.5em;align-items:center}
.mini li::before{content:"✓";flex:none;width:1.4em;height:1.4em;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.8em;font-weight:700}
.row2{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.row2 .pr{font-size:1.35em}
.mini-btn{background:var(--green);color:#fff;border-radius:.8em;padding:.5em .9em;font-size:.72em;font-weight:600;white-space:nowrap}
.agenda{list-style:none;padding:0;margin:0;display:grid;gap:.5em;counter-reset:ag}
.agenda li{counter-increment:ag;position:relative;background:#fff;border:1px solid #e0e6e1;border-radius:.9em;padding:.6em .8em .6em 2.6em;display:flex;flex-direction:column;gap:.1em}
.agenda li::before{content:counter(ag);position:absolute;left:.7em;top:.7em;width:1.5em;height:1.5em;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.75em;font-weight:700}
.agenda b{font-size:.82em}
.agenda span{font-size:.68em;color:#6b7a71}
.review{background:#fff;border:1px solid #e0e6e1;border-radius:1em;padding:.8em}
.review p{font-size:.82em;line-height:1.45;margin:0;max-width:none;color:#1f2c25}
.review p.note{font-size:.68em;color:#a33;margin:.1em 0 .6em;font-weight:600}
.review mark{background:#fde2c4;color:#7a3a00;border-radius:.3em;padding:0 .2em;text-decoration:underline wavy #d9822b;text-underline-offset:.15em}
.files{list-style:none;padding:0;margin:0;display:grid;gap:.5em}
.files li{display:flex;gap:.7em;align-items:center;background:#fff;border:1px solid #e0e6e1;border-radius:.9em;padding:.6em .8em}
.files i{font-style:normal;width:2.2em;height:2.2em;border-radius:.6em;background:#ebe8dc;color:var(--brass2);display:grid;place-items:center;font-weight:700;font-size:.8em}
.files b{display:block;font-size:.8em}
.files span{font-size:.66em;color:#6b7a71}
/* Übung */
.ex{display:grid;gap:1.5rem;margin-top:1.75rem;text-align:left}
.lbl{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#a9bbaf;margin-bottom:.6rem;font-weight:600}
.ed{list-style:none;padding:0;margin:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:1.25rem;padding:.4rem 1.1rem}
.ed li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.95rem}
.ed li:last-child{border-bottom:0}
.ed span{color:#a9bbaf}.ed b{color:#fff}
.sents{display:grid;gap:.5rem}
.sents button{text-align:left;font:500 1rem/1.4 var(--sans);color:#16211b;background:var(--paper);border:2px solid transparent;border-radius:1rem;padding:.8rem 1rem;cursor:pointer;transition:border-color .2s,background .2s}
.sents button:hover{border-color:var(--brass)}
.sents button.sel{border-color:var(--brass);background:#fff7e6}
.sents button.good{background:#dff3e6;border-color:#2f9e63}
.sents button.miss{background:#fde2c4;border-color:#d9822b}
.sents button.bad{background:#f3dede;border-color:#b94a4a}
.sents button .why{display:block;font-size:.85rem;color:#5a4a1a;margin-top:.35rem}
.ex-bar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:1rem}
.ex-bar p{margin:0;color:#e8efe9;font-weight:600;max-width:none}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
@media(min-width:900px){.ex{grid-template-columns:.8fr 1.2fr;gap:2.5rem}}

/* ===== Foto-Hero, Fakten-Leiste, Warum, Ablauf (ohne Handy) ===== */
.hero-photo{position:relative;margin:0 auto;border-radius:2rem;overflow:hidden;aspect-ratio:4/3;box-shadow:0 2.2rem 4rem -1.5rem rgba(0,0,0,.6);width:100%;max-width:36rem;background:#0a1f27}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,39,0) 45%,rgba(10,31,39,.55))}
.chips-col{position:absolute;left:1rem;bottom:1rem;display:grid;gap:.5rem;justify-items:start;z-index:2}
.chip-f{background:rgba(246,244,238,.96);color:var(--green);border-radius:999px;padding:.4rem .9rem;font-weight:600;font-size:.86rem;box-shadow:0 .5rem 1.2rem -.5rem rgba(0,0,0,.5)}
.strip{background:var(--paper);border-bottom:1px solid var(--line)}
.strip-in{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem;padding-top:1.5rem;padding-bottom:1.5rem;text-align:center}
.strip-in>div{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.strip-in b{font-size:1rem;color:var(--green)}
.strip-in span{font-size:.85rem;color:var(--mute)}
.sic{width:2.6rem;height:2.6rem;border-radius:.9rem;background:#ebe8dc;display:grid;place-items:center;margin-bottom:.35rem}
.sic svg{width:1.4rem;height:1.4rem;stroke:var(--brass2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.steps4{display:grid;gap:1rem;margin:2rem auto 0;max-width:68rem}
.st{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:1.5rem;padding:1.6rem 1.3rem}
.st .n{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--paper);color:var(--green);display:grid;place-items:center;font-weight:700;margin:0 auto 1rem}
.st h3{font-size:1.2rem;color:#fff;margin-bottom:.5rem}
.st p{font-size:.98rem;margin:0 auto;color:#c9d6cc}
.hero{min-height:0}
@media(min-width:900px){
  .strip-in{grid-template-columns:repeat(4,1fr)}
  .steps4{grid-template-columns:repeat(4,1fr)}
  .hero-grid{grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--nav) - 1.5rem - 7rem)}
  .hero-photo{max-width:none}
}

/* ===== Rechner ===== */
.calc{display:grid;gap:2rem;margin-top:2rem;text-align:left;align-items:center}
.rg label{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:#dbe6de;margin-bottom:.5rem;letter-spacing:0;text-transform:none;font-weight:500}
.rg output{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.rg{margin-bottom:1.1rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:.5rem;border-radius:999px;background:rgba(255,255,255,.2);border:0;padding:0;box-shadow:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--paper);border:3px solid var(--brass);cursor:pointer}
input[type=range]::-moz-range-thumb{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--paper);border:3px solid var(--brass);cursor:pointer}
input[type=range]:focus{outline:3px solid var(--brass);outline-offset:4px;box-shadow:none}
.res{display:grid;gap:.9rem}
.rc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:1.5rem;padding:1.3rem 1.5rem;text-align:center}
.rc span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#a9bbaf;font-weight:600;margin-bottom:.35rem}
.rc b{display:block;font:400 2.4rem/1.1 var(--serif);color:#fff;font-variant-numeric:tabular-nums}
.rc em{display:block;font-style:normal;color:#c9d6cc;font-size:.95rem;margin-top:.2rem}
.rc.hi{background:var(--paper);border-color:var(--paper)}
.rc.hi span{color:var(--brass2)}.rc.hi b{color:var(--green)}.rc.hi em{color:var(--mute)}
@media(min-width:900px){.calc{grid-template-columns:1fr 1fr;gap:3.5rem}}

/* ===== Angebot mit Luft ===== */
#preis{padding-bottom:5.5rem}
.offer{display:grid;max-width:60rem;margin:2.5rem auto 0;background:var(--white);border:1px solid var(--line);border-radius:2rem;overflow:hidden;box-shadow:0 24px 50px -28px rgba(16,41,31,.4);text-align:left}
.of-left{background:var(--green);color:var(--paper);padding:2.75rem 2.5rem;text-align:center}
.of-k{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#d9bf86;font-weight:600}
.of-amt{font:400 clamp(5rem,12vw,7rem)/1 var(--serif);margin:.8rem 0 .4rem}
.of-amt small{font-size:.4em;color:#d9bf86;margin-left:.1em;vertical-align:top;position:relative;top:.4em}
.of-sub{margin:0 auto 2rem;color:#c9d6cc}
.of-list{list-style:none;padding:0;margin:0 auto;display:grid;gap:1rem;text-align:left;max-width:22rem}
.of-list li{position:relative;padding-left:2rem;color:#e8efe9;line-height:1.45}
.of-list li::before{content:"";position:absolute;left:.1rem;top:.5em;width:.7rem;height:.7rem;background:#d9bf86;transform:rotate(45deg)}
.of-right{padding:2.75rem 2.5rem;display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.of-right .facts{margin:0}
.of-right .facts li{padding:1rem 0;font-size:1rem}
.of-right .btn.block{padding:1.1rem;font-size:1.05rem}
.of-right .notify{margin-top:.5rem;padding-top:1.5rem}
@media(min-width:900px){.offer{grid-template-columns:1fr 1fr}}
@media(max-width:899px){.of-left,.of-right{padding:2.25rem 1.5rem}}
.offer .of-left .of-sub{color:#c9d6cc}
.offer .of-left p{color:#c9d6cc}

/* ===== Hausgrafik mit Scan, Erkennungsrahmen und Beispiel-Inserat ===== */
.scene-wrap{width:100%;max-width:38rem;margin:0 auto}
.scene{position:relative;display:grid;gap:1.25rem}
.stage{position:relative;border-radius:1.75rem;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);background:#0a1f27;aspect-ratio:4/3}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 6s cubic-bezier(.2,.6,.2,1)}
.scene.go .ph-img{transform:scale(1)}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,39,.35),rgba(10,31,39,0) 30%,rgba(10,31,39,.15) 70%,rgba(10,31,39,.5))}
.ov{position:absolute;inset:0;width:100%;height:100%}
.bx{fill:rgba(217,191,134,.12);stroke:#d9bf86;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:6 4}
.ld{stroke:#d9bf86;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.js .scene:not(.go) .bx,.js .scene:not(.go) .ld{opacity:0}
.js .scene.go .x1{animation:fadein .3s 1.55s both}.js .scene.go .x2{animation:fadein .3s 1.95s both}
.js .scene.go .l1{animation:fadein .3s 1.6s both}.js .scene.go .l3{animation:fadein .3s 1.55s both}.js .scene.go .l2{animation:fadein .3s 2s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.beam{position:absolute;top:0;bottom:0;left:0;width:14%;background:linear-gradient(90deg,rgba(217,191,134,0),rgba(217,191,134,.28) 80%,rgba(255,242,207,.75));transform:translateX(-100%);opacity:0;mix-blend-mode:screen;pointer-events:none}
.js .scene.go .beam{animation:scan 1s 1.2s linear both}
@keyframes scan{0%{opacity:0;transform:translateX(-100%)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateX(715%)}}
.lb{position:absolute;background:rgba(246,244,238,.96);color:#10291f;font:600 clamp(.62rem,1.7vw,.85rem) var(--sans);padding:.25rem .6rem;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.35);border:1px solid #d9bf86}
.b1{left:56%;top:19%}.b2{left:36%;top:11%}.b3{left:6%;top:43%}
.js .scene:not(.go) .lb{opacity:0}
.js .scene.go .b1{animation:lbin .4s 1.7s both}.js .scene.go .b2{animation:lbin .4s 1.6s both}.js .scene.go .b3{animation:lbin .4s 2.1s both}
@keyframes lbin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.ki-card{position:relative;background:var(--paper);color:var(--ink);border-radius:1.5rem;padding:1.3rem 1.4rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.js .scene:not(.go) .ki-card>*{opacity:0;transform:translateY(10px)}
.js .scene.go .ki-card>*{animation:rise .5s both}
.js .scene.go .ki-card>.kc-top{animation-delay:2.2s}.js .scene.go .ki-card>.kc-t{animation-delay:2.35s}.js .scene.go .ki-card>.kc-m{animation-delay:2.5s}.js .scene.go .ki-card>.kc-p{animation-delay:2.65s}.js .scene.go .ki-card>.kc-pf{animation-delay:2.8s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kc-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.ki{background:var(--brass2);color:var(--green);font:700 .8rem var(--sans);letter-spacing:.06em;padding:.2rem .6rem;border-radius:999px}
.kc-l{font-size:.8rem;color:#56625b;letter-spacing:.08em;text-transform:uppercase}
.kc-t{font-weight:700;font-size:1.15rem;letter-spacing:-.02em;line-height:1.25;margin:0 0 .7rem;color:var(--ink);max-width:none}
.kc-m{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.kc-m span{background:#ebe8dc;border-radius:.5rem;padding:.15rem .6rem;font-size:.85rem;color:var(--green)}
.kc-p{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.9rem}
.kc-p b{font:400 2rem var(--serif);color:var(--green)}
.kc-p span{font-size:.85rem;color:#56625b}
.kc-pf{display:flex;gap:.9rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.8rem;font-size:.82rem;font-weight:600;color:var(--green)}
.sp{position:absolute;width:1.4rem;height:1.4rem;background:#d9bf86;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.js .scene:not(.go) .sp{opacity:0}
.js .scene.go .sp{animation:spark 1.2s 3s ease-out both}
.sp.s1{top:-.7rem;right:-.5rem}.sp.s2{width:.9rem;height:.9rem;top:2.2rem;right:-1.1rem}
.js .scene.go .sp.s2{animation-delay:3.2s}
@keyframes spark{0%{opacity:0;transform:scale(.2) rotate(-30deg)}60%{opacity:1;transform:scale(1.15) rotate(0)}100%{opacity:1;transform:scale(1)}}
.scene-note{text-align:center;font-size:.75rem;color:#93a59a;margin:1rem auto 0;max-width:none}
@media(min-width:900px){
  .scene-wrap{max-width:none}
  .stage{max-height:62vh;width:100%}
  .ki-card{position:absolute;right:.9rem;bottom:.9rem;width:42%;max-width:16rem;padding:.9rem 1rem;z-index:3}
  .kc-m{display:none}.kc-top{margin-bottom:.6rem}.kc-pf{gap:.6rem;font-size:.75rem;padding-top:.6rem}
  .kc-t{font-size:.98rem;margin-bottom:.5rem}.kc-p,.kc-t{margin-bottom:.6rem}.kc-p b{font-size:1.7rem}
}
@media(min-width:900px){.ki-card{width:40%;bottom:.8rem;right:.8rem}.kc-t{font-size:.9rem}.kc-pf{flex-direction:column;gap:.2rem}}

/* Der weiße Kasten ploppt erst auf, wenn der Scan durch ist */
.js .scene:not(.go) .ki-card{opacity:0;transform:scale(.82) translateY(16px);transform-origin:100% 100%}
.js .scene.go .ki-card{animation:popin .55s 2.05s cubic-bezier(.3,1.5,.5,1) both}
@keyframes popin{from{opacity:0;transform:scale(.82) translateY(16px)}to{opacity:1;transform:none}}

/* ===== fertiges Produkt: Gruppenpreise, geschlossene Anmeldung, Kontakt ===== */
.groups{max-width:60rem;margin:3rem auto 0;text-align:center}
.groups h3{font-size:1.6rem;color:var(--green);margin-bottom:.5rem}
.groups>p{margin:0 auto 1.5rem}
.tiers{display:grid;gap:.8rem;margin-bottom:1.75rem}
.tier{background:var(--white);border:1px solid var(--line);border-radius:1.4rem;padding:1.4rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.tier span{font-size:.9rem;color:var(--mute)}
.tier b{font:400 2.2rem/1 var(--serif);color:var(--green)}
.tier.req{background:var(--green);border-color:var(--green)}
.tier.req span{color:#c9d6cc}.tier.req b{color:#fff;font-size:1.8rem}
@media(min-width:700px){.tiers{grid-template-columns:repeat(4,1fr)}}
.formcard.closed{text-align:center;padding:2rem 1.5rem}
.formcard.closed .ico{margin-bottom:.9rem}
.formcard.closed h3{font-size:1.5rem;color:var(--green);margin-bottom:.5rem}
.formcard.closed>p{margin:0 auto 1.5rem}
.formcard.closed form{text-align:left}
.formcard .small{font-size:.9rem;margin:1.25rem auto 0;max-width:none}
.formcard a{color:var(--green)}
textarea{width:100%;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:.8rem;font:1rem var(--sans);background:#fff;color:var(--ink);resize:vertical;min-height:7rem}
textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(194,163,107,.35)}
.msg2{font-size:.9rem;margin:0;max-width:none;display:none}
.msg2.ok{color:var(--ok);display:block;font-weight:600}.msg2.bad{color:#a3262c;display:block}
.nav-r{gap:1.2rem}
@media(min-width:900px) and (max-width:1100px){.nav-r{gap:.9rem;font-size:.72rem;letter-spacing:.08em}}
#kontakt{padding-bottom:5rem}
.formcard label.check{display:flex;gap:.7rem;text-align:left;margin:0}
.formcard label.check input{width:auto;flex:none}

/* ===== Handy-Feinschliff: kürzer, luftiger, wischbar ===== */
@media(max-width:899px){
  /* Kopfzeile */
  .nav .wrap{padding:0 1rem}
  .logo{font-size:1.15rem;letter-spacing:.1em}
  .right{gap:.4rem}
  .nav .btn.sm{padding:.5rem .8rem;font-size:.8rem}
  .menu{padding:.45rem .7rem;font-size:.8rem}
  /* Hero: Haus früher sichtbar */
  .hero-grid{padding:1rem 1.25rem 2rem;gap:1.25rem}
  .pills{margin-bottom:.8rem}
  .pill{font-size:.75rem;padding:.25rem .65rem}
  .hero h1{font-size:1.95rem;margin-bottom:.7rem}
  .hero p.sub{font-size:1rem;margin-bottom:1.1rem}
  .hero-cta{gap:.2rem .6rem}
  .link{padding:.55rem .4rem;font-size:.95rem}
  .hero-note{display:none}
  .scene-note{margin-top:.6rem}
  /* Abschnitte */
  .sec{padding:2.75rem 0}
  .sec h2{font-size:1.75rem;margin-bottom:.6rem}
  .sec h2::before{margin-bottom:.9rem}
  .sec .lead{font-size:1.05rem;margin-bottom:1rem}
  .strip-in{padding-top:1.1rem;padding-bottom:1.1rem;gap:1rem .5rem}
  .strip-in b{font-size:.92rem}.strip-in span{font-size:.78rem}
  .sic{width:2.2rem;height:2.2rem;margin-bottom:.2rem}
  /* Kartenreihen zum Wischen statt endloser Stapel */
  .trio,.steps4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;margin:1.25rem -1.5rem 0;padding:.25rem 1.5rem 1rem;scroll-padding:0 1.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .trio::-webkit-scrollbar,.steps4::-webkit-scrollbar{display:none}
  .trio>*,.steps4>*{flex:0 0 78%;scroll-snap-align:start;min-width:0}
  .card{padding:1.4rem 1.1rem}
  .card h3{font-size:1.15rem;margin:.7rem 0 .4rem}
  .st{padding:1.3rem 1.1rem}
  .who .card{flex-basis:62%}
  .pts{grid-template-columns:1fr 1fr;gap:.5rem}
  .pts li{padding:.65rem .5rem;font-size:.85rem}
  .tiers{grid-template-columns:1fr 1fr;gap:.6rem}
  .tier{padding:1rem .6rem}
  .tier b{font-size:1.8rem}.tier.req b{font-size:1.5rem}
  .tier span{font-size:.8rem}
  /* Rechner und Angebot kompakter */
  .demo{padding:1.5rem 1.1rem}
  .rc{padding:1rem}.rc b{font-size:2rem}
  .of-left,.of-right{padding:1.75rem 1.25rem}
  .of-amt{font-size:4.5rem;margin:.4rem 0}
  .of-sub{margin-bottom:1.25rem}
  .of-list{gap:.7rem}
  .formcard{padding:1.25rem 1rem}
  .ph{width:5rem;height:5rem}
  footer{padding:2rem 0 1.5rem}
}

/* ===== Handy: nichts Interaktives (kein Rechner, kein Wischen), ruhige Karten ===== */
@media(max-width:899px){
  #rechner,.nav-r a[href="#rechner"],.hero-cta .link{display:none}
  .trio,.steps4{display:grid;overflow:visible;scroll-snap-type:none;margin:1.25rem 0 0;padding:0;gap:.7rem}
  .trio>*,.steps4>*{flex:none}
  .trio{grid-template-columns:1fr}
  .trio .card{display:grid;grid-template-columns:auto 1fr;gap:.1rem 1rem;text-align:left;align-items:center;padding:1rem 1.1rem}
  .trio .card .ico{grid-row:1/3;margin:0}
  .trio .card h3{margin:0;font-size:1.05rem}
  .trio .card p{margin:0;font-size:.92rem}
  .who .card{padding:.9rem 1.1rem}
  .who .card p{display:none}
  .who .card h3{grid-row:1/3}
  .steps4{grid-template-columns:1fr 1fr}
  .st{padding:1rem .8rem;text-align:center}
  .st h3{font-size:.98rem}.st p{font-size:.85rem}
  .st .n{width:1.9rem;height:1.9rem;margin-bottom:.6rem}
}

/* Zahlart-Auswahl im Anmeldeformular */
.zart{border:0;padding:0;margin:.25rem 0 0}
.zart legend{font-weight:600;padding:0;margin-bottom:.55rem;color:var(--ink)}
.zopt{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--line);border-radius:.9rem;margin-bottom:.55rem;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}
.zopt:has(input:checked){border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.zart .zopt input[type=radio]{width:1.15rem;height:1.15rem;flex:0 0 auto;padding:0;margin:.2rem 0 0;accent-color:var(--green);box-shadow:none}
.zopt span{flex:1;text-align:left}
.zopt b{display:block;color:var(--ink)}
.zopt small{display:block;color:var(--mute);font-size:.86rem;margin-top:.1rem}
.formcard .zart .zopt{display:flex;flex-direction:row;align-items:flex-start;gap:.75rem;margin:0 0 .55rem;font-weight:400}