@font-face{font-family:Figtree;src:url(fonts/figtree-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-extrabold.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --papier:#ffffff;
  --tinte:#141414;
  --text:#2b3238;
  --leise:#56616b;
  --linie:#d7e2e8;
  --nacht:#0a4a60;
  --b1:#0d6584;
  --b2:#1083aa;
  --b3:#18bcf2;
  --b4:#74d6f7;
  --b5:#a3e3fa;
  --gelb:#f5c400;
  --gelb-dunkel:#dcae00;
  --rot:#d4311e;
  --flaeche:#f1f8fb;
  --mass:68ch;
  --rand:clamp(16px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--text);font:400 1.0625rem/1.6 Figtree,system-ui,sans-serif;font-feature-settings:"ss01"}
img{max-width:100%;height:auto;display:block}
a{color:var(--b1);text-underline-offset:.18em}
a:hover{color:var(--b2)}
:focus-visible{outline:3px solid var(--b2);outline-offset:3px;border-radius:4px}
h1,h2,h3{color:var(--tinte);line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1em;max-width:var(--mass)}
.huelle{max-width:1180px;margin:0 auto;padding:0 var(--rand)}
.sprung{position:absolute;left:-999px}
.sprung:focus{left:16px;top:16px;background:var(--papier);padding:8px 12px;z-index:20}

/* Kopf */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.marke{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--tinte);text-decoration:none;font-size:1.05rem}
.marke svg{width:30px;height:30px}
.kopf nav{display:flex;gap:22px;align-items:center;font-weight:600;font-size:.95rem}
.kopf nav a{color:var(--tinte);text-decoration:none}
.kopf nav a:hover{color:var(--b2)}
.sprache{border:1.5px solid var(--linie);border-radius:999px;padding:4px 12px}
@media (max-width:760px){.kopf nav .nur-breit{display:none}}

/* Knoepfe */
.knopf{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem;text-decoration:none;border-radius:999px;padding:14px 26px;transition:background-color .15s,transform .15s}
.knopf-kauf{background:var(--gelb);color:var(--tinte)}
.knopf-kauf:hover{background:var(--gelb-dunkel);color:var(--tinte)}
.knopf-kauf:active{transform:translateY(1px)}
.knopf-zweit{color:var(--tinte);border:2px solid var(--tinte);padding:12px 24px}
.knopf-zweit:hover{background:var(--tinte);color:var(--papier)}
.knopf small{font-weight:600;opacity:.8}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(24px,5vw,56px) 0 clamp(48px,7vw,96px)}
.hero h1{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:800;line-height:.98;letter-spacing:-.025em;margin-bottom:.3em}
.hero h1{border-top:10px solid var(--tinte);padding-top:.28em;text-transform:none}
.hero h1 span{display:block;font-size:.46em;font-weight:800;letter-spacing:-.01em;color:var(--rot);margin-top:.3em}
.unterzeile{font-size:clamp(1.15rem,1.8vw,1.35rem);color:var(--tinte);font-weight:600;max-width:34ch;margin-bottom:1.1em}
.hero p.lead{font-size:1.1rem;max-width:46ch}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}
.hinweis{font-size:.9rem;color:var(--leise)}
.buehne{position:relative;aspect-ratio:1/1.05;max-width:520px;width:100%;justify-self:end}
.buehne .haus{position:absolute;inset:0;width:100%;height:100%}
.buehne .cover{position:absolute;width:64%;left:18%;top:12%;box-shadow:0 30px 60px -20px rgba(10,61,98,.55),0 2px 6px rgba(10,61,98,.25);border-radius:3px;transform:rotate(-3deg)}
.kachel{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .kachel{opacity:0;animation:setzen .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 45ms)}
  .buehne .cover{opacity:0;animation:auflegen .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:1.15s}
}
@keyframes setzen{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes auflegen{from{opacity:0;transform:translateY(24px) rotate(-3deg)}to{opacity:1;transform:rotate(-3deg)}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .buehne{justify-self:center;max-width:400px;order:-1}
}

/* Abschnitte */
.abschnitt{padding:clamp(56px,8vw,112px) 0}
.abschnitt.flaeche{background:var(--flaeche)}
.kopfzeile{max-width:var(--mass);margin-bottom:clamp(28px,4vw,48px)}
.kopfzeile p{font-size:1.12rem}

/* Merkmale */
.merkmale{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px) clamp(28px,5vw,72px);list-style:none;padding:0;margin:0}
.merkmale li{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start}
.merkmale svg{width:48px;height:48px}
.merkmale h3{margin-top:4px}
.merkmale p{margin:0}
@media (max-width:760px){.merkmale{grid-template-columns:1fr}}

/* Teile des Buchs: echte Reihenfolge */
.weg{list-style:none;padding:0;margin:0;counter-reset:teil;border-left:3px solid var(--b5)}
.weg li{position:relative;padding:0 0 30px 34px}
.weg li:last-child{padding-bottom:0}
.weg li::before{content:"";position:absolute;left:-10px;top:6px;width:17px;height:17px;border-radius:50%;background:var(--papier);border:3px solid var(--b2)}

.weg .nr{font-weight:800;color:var(--b2);margin-right:.4em}
.weg h3{margin-bottom:.25em}
.weg p{margin:0;color:var(--text)}
.zweispaltig{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.zweispaltig{grid-template-columns:1fr}}

/* KI */
.ki-band{background:var(--nacht);color:#dbeef8}
.ki-band h2,.ki-band h3{color:#fff}
.ki-band a{color:var(--b4)}
.ki-liste{list-style:none;padding:0;margin:0 0 28px}
.ki-liste li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid rgba(255,255,255,.12)}
.ki-liste li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:12px;background:var(--b3);clip-path:polygon(0 100%,100% 100%,100% 0)}
.dialog{background:#fff;color:var(--text);border-radius:18px;padding:22px;box-shadow:0 24px 60px -24px rgba(0,0,0,.5);font-size:.98rem}
.dialog .kennung{font-size:.85rem;color:var(--leise);margin-bottom:14px}
.blase{padding:12px 16px;border-radius:16px;margin-bottom:12px;max-width:92%}
.blase.du{background:var(--b5);color:var(--tinte);margin-left:auto;border-bottom-right-radius:4px}
.blase.bot{background:var(--flaeche);border:1px solid var(--linie);border-bottom-left-radius:4px}
.blase p{margin:0 0 .5em}.blase p:last-child{margin:0}
.impact{width:100%;border-collapse:collapse;font-size:.88rem;margin:.4em 0}
.impact th,.impact td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--linie)}
.impact th{color:var(--tinte)}
.chatbots{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px;padding:0;list-style:none}
.chatbots li{border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 16px;font-weight:600;color:#fff}

/* Familie Mustermensch */
.familie{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:12px;list-style:none;padding:0;border-top:3px solid var(--tinte)}
.familie li{padding:18px 18px 0 0}
.familie strong{display:block;color:var(--tinte);font-size:1.05rem}
.familie span{font-size:.95rem;color:var(--leise)}


/* Zielgruppen */
.gruppen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.gruppen > div{border-top:6px solid var(--b2);padding-top:18px}
.gruppen > div:nth-child(2){border-color:var(--b1)}
.gruppen > div:nth-child(3){border-color:var(--gelb)}
@media (max-width:860px){.gruppen{grid-template-columns:1fr}}

/* Ausgaben */
.ausgaben{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--tinte);border-radius:20px;overflow:hidden}
.ausgabe{padding:28px;display:flex;flex-direction:column;gap:8px;border-right:2px solid var(--tinte)}
.ausgabe:last-child{border-right:0}
.ausgabe.empfohlen{background:var(--flaeche)}
.ausgabe .preis{font-size:2rem;font-weight:800;color:var(--tinte);line-height:1.1}
.ausgabe ul{margin:4px 0 16px;padding-left:1.1em;color:var(--text)}
.ausgabe .knopf{margin-top:auto;justify-content:center}
.stand{font-size:.88rem;color:var(--leise);margin-top:14px}
@media (max-width:860px){.ausgaben{grid-template-columns:1fr}.ausgabe{border-right:0;border-bottom:2px solid var(--tinte)}.ausgabe:last-child{border-bottom:0}}

/* Autor */
.autor{display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.autor img{border-radius:50% 50% 50% 6px;width:100%;max-width:280px}
@media (max-width:760px){.autor{grid-template-columns:1fr}.autor img{max-width:200px}}

/* FAQ */
.faq details{border-bottom:1.5px solid var(--linie);padding:16px 0;max-width:820px}
.faq summary{cursor:pointer;font-weight:700;color:var(--tinte);font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1;color:var(--b2)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:12px 0 0}

/* Schluss */
.schluss{text-align:left;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
@media (max-width:760px){.schluss{grid-template-columns:1fr}}

/* Fuss */
.fuss{background:var(--tinte);color:#c9d6e0;padding:40px 0;font-size:.95rem}
.fuss a{color:#fff}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
.fuss nav{display:flex;flex-wrap:wrap;gap:18px}
.fuss button{background:none;border:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* Rechtstexte */
.recht{padding:24px 0 80px}
.recht h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin:.4em 0 .6em}
.recht h2{font-size:1.35rem;margin-top:1.6em}
.recht h3{font-size:1.08rem;margin-top:1.2em}

/* Einwilligung */
.einwilligung{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:#fff;border:2px solid var(--tinte);border-radius:18px;padding:20px;box-shadow:0 20px 50px -20px rgba(10,61,98,.5);z-index:30;font-size:.95rem}
.einwilligung[hidden]{display:none}
.einwilligung p{margin:0 0 14px}
.einwilligung .wahl{display:flex;gap:10px;flex-wrap:wrap}
.einwilligung button{flex:1 1 140px;font:700 1rem Figtree,system-ui,sans-serif;border-radius:999px;padding:12px 18px;cursor:pointer;border:2px solid var(--tinte);background:#fff;color:var(--tinte)}
.einwilligung button:hover{background:var(--flaeche)}

/* Haus der sechs Teile */
.haus-teile{position:sticky;top:24px;width:100%;max-width:380px}
.haus-teile figcaption{font-size:.92rem;color:var(--leise);margin-top:10px}
.weg li[data-teil="1"]::before{border-color:#a3e3fa}
.weg li[data-teil="2"]::before{border-color:#74d6f7}
.weg li[data-teil="3"]::before{border-color:#45c9f5}
.weg li[data-teil="4"]::before{border-color:#18bcf2}
.weg li[data-teil="5"]::before{border-color:#1083aa}
.weg li[data-teil="6"]::before{border-color:#0a4a60;background:var(--gelb)}
@media (max-width:860px){.haus-teile{position:static;max-width:260px}}
.seiten{margin-top:clamp(32px,5vw,56px)}
.seiten img{border-radius:14px;border:1px solid var(--linie)}
.seiten figcaption{font-size:.92rem;color:var(--leise);margin-top:10px}