/* Dreamlife.now · Funnel KI-Businessplan · nur Zusätze zu /analyse/assets/css/site.css (lädt danach).
   Wiederverwendet: Tokens aus site.css, Bausteine .bs-stage .bs-card .bs-pill .bs-check .bs-note .btn .btn-ghost .card .faq-list .steps.
   Präfixe: kp- Landingpage, kq- Quiz, kd- Danke-Seite. Keine neuen Farben. */

/* ---------- Hilfen ---------- */
.kq-err:empty{display:none}

/* ---------- Hero: Plan-Karte ---------- */
.phero .tag{margin-bottom:1rem}
.kp-chkline{margin:-.2rem 0 1.1rem;line-height:1}
.phero .lead{text-wrap:pretty}
.kp-cta .cta-main{align-items:flex-start}
.kp-cta .hand{margin:.9rem 0 0 .3rem;font-size:1.5rem;transform:rotate(-2deg);color:var(--green-d)}
.kp-art{max-width:460px}
.kp-fig{position:relative;margin:0;padding:22px 14px 40px;isolation:isolate}
.kp-glow{position:absolute;inset:-6% -16% -8%;z-index:-2;pointer-events:none;background:
  radial-gradient(42% 40% at 22% 24%,rgba(127,220,227,.5),transparent 70%),
  radial-gradient(38% 38% at 84% 20%,rgba(198,240,222,.65),transparent 70%),
  radial-gradient(40% 44% at 80% 86%,rgba(255,221,200,.5),transparent 70%),
  radial-gradient(36% 40% at 16% 84%,rgba(176,222,255,.45),transparent 70%);
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.kp-card{position:relative;padding:1.15rem 1.2rem 1.3rem;transform:rotate(-1.2deg)}
.kp-card--back{position:absolute;inset:34px 2px 14px 26px;z-index:-1;transform:rotate(3.2deg);opacity:.75;padding:0}
.kp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.kp-badge{font:650 .72rem/1 var(--f-sans);letter-spacing:.04em;color:var(--green-d);background:var(--lime);padding:.42rem .65rem;border-radius:999px}
.kp-dots{display:flex;gap:5px}
.kp-dots i{width:8px;height:8px;border-radius:50%;background:rgba(21,48,45,.14)}
.kp-flow{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.kp-flow li{position:relative;display:grid;gap:.45rem;justify-items:start;padding-left:1.6rem}
.kp-flow li::before{content:"";position:absolute;left:0;top:.14rem;width:11px;height:11px;border-radius:50%;background:var(--bs-grad);box-shadow:0 0 0 4px var(--lime)}
.kp-flow li:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:1.25rem;bottom:-1.05rem;width:2px;border-radius:2px;background:linear-gradient(var(--sun),var(--lime))}
.kp-k{font:650 .68rem/1 var(--f-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kp-pos{font:700 1.1rem/1.2 var(--f-sans);letter-spacing:-.02em;color:var(--bs-ink)}
.kp-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.kp-av{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bs-grad);color:#fff;font:800 .68rem/1 var(--f-sans)}
.kp-weeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;width:100%}
.kp-weeks>span{display:grid;justify-items:center;gap:.4rem;padding:.55rem .2rem .6rem;border-radius:14px;background:#F1F8F8;box-shadow:inset 0 0 0 1px var(--bs-line)}
.kp-weeks em{font:650 .66rem/1 var(--f-sans);font-style:normal;color:var(--bs-ink);white-space:nowrap}
.kp-float{position:absolute;right:-2px;bottom:6px;gap:.5rem;padding:.55rem .85rem .55rem .55rem;font-size:.8rem;transform:rotate(2deg)}
.kp-float .bs-check{width:20px;height:20px}
.kp-float .bs-check::after{width:10px;height:10px}
.kp-weeks .bs-check{width:22px;height:22px}
/* Hero-Aufbau: Beruf, Linie, Positionierung (tippt sich ein), Modelle, Häkchen. Nur opacity/transform.
   Ohne JS, ohne Bewegung (html.kp-m fehlt) oder bei reduced-motion steht sofort der Endzustand. */
html.kp-m .kp-card:not(.kp-card--back){animation:kpCardIn .9s var(--out-expo) both}
html.kp-m .kp-card--back{animation:kpBackIn 1.1s var(--out-expo) .1s both}
html.kp-m .kp-fig .kp-top{animation:kpUp .6s var(--out-expo) .2s both}
html.kp-m .kp-flow:not(.kp-flow--p)>li:nth-child(1){--dot:.3s;--line:.7s}
html.kp-m .kp-flow:not(.kp-flow--p)>li:nth-child(2){--dot:.9s;--line:1.75s}
html.kp-m .kp-flow:not(.kp-flow--p)>li:nth-child(3){--dot:2s;--line:2.6s}
html.kp-m .kp-flow:not(.kp-flow--p)>li:nth-child(4){--dot:2.85s}
html.kp-m .kp-flow:not(.kp-flow--p)>li::before{animation:kpPop .5s var(--out-back) var(--dot) both}
html.kp-m .kp-flow:not(.kp-flow--p)>li:not(:last-child)::after{transform-origin:top;animation:kpLine .55s var(--out-expo) var(--line) both}
html.kp-m .kp-flow:not(.kp-flow--p) .kp-k{animation:kpUp .5s var(--out-expo) calc(var(--dot) + .05s) both}
html.kp-m .kp-flow:not(.kp-flow--p)>li:nth-child(1) .bs-pill{animation:kpPop .55s var(--out-back) calc(var(--dot) + .15s) both}
html.kp-m .kp-pos[data-kp-type]:not(.is-typed){animation:kpUp .5s var(--out-expo) calc(var(--dot) + .15s) both}
html.kp-m .kp-pos[data-kp-type] .kp-ch{animation:kpOn .01s linear var(--cd,1.1s) both}
html.kp-m .kp-fig .kp-pills>.bs-pill:nth-child(1){animation:kpPop .5s var(--out-back) 2.15s both}
html.kp-m .kp-fig .kp-pills>.bs-pill:nth-child(2){animation:kpPop .5s var(--out-back) 2.3s both}
html.kp-m .kp-weeks>span{animation:kpUp .5s var(--out-expo) both}
html.kp-m .kp-weeks>span:nth-child(1){animation-delay:2.95s}
html.kp-m .kp-weeks>span:nth-child(2){animation-delay:3.03s}
html.kp-m .kp-weeks>span:nth-child(3){animation-delay:3.11s}
html.kp-m .kp-weeks>span:nth-child(4){animation-delay:3.19s}
html.kp-m .kp-weeks .bs-check{animation:kpPop .55s var(--out-back) both}
html.kp-m .kp-weeks>span:nth-child(1) .bs-check{animation-delay:3.35s}
html.kp-m .kp-weeks>span:nth-child(2) .bs-check{animation-delay:3.55s}
html.kp-m .kp-weeks>span:nth-child(3) .bs-check{animation-delay:3.75s}
html.kp-m .kp-weeks>span:nth-child(4) .bs-check{animation-delay:3.95s}
html.kp-m .kp-float{animation:kpFloatIn .7s var(--out-back) 4.3s both}
@keyframes kpCardIn{from{opacity:0;transform:translateY(22px) rotate(-2.4deg)}to{opacity:1;transform:rotate(-1.2deg)}}
@keyframes kpBackIn{from{opacity:0;transform:translateX(-14px) rotate(0)}to{opacity:.75;transform:rotate(3.2deg)}}
@keyframes kpFloatIn{from{opacity:0;transform:translateY(10px) scale(.7) rotate(2deg)}to{opacity:1;transform:rotate(2deg)}}
@keyframes kpUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kpLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes kpOn{from{opacity:0}to{opacity:1}}
@keyframes kpPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@media (max-width:420px){.kp-fig{padding-inline:6px}.kp-card{padding:1rem}.kp-pos{font-size:1rem}}

/* ---------- Was du bekommst ---------- */
.kp-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--lime);color:var(--green-d);margin-bottom:1.1rem}
.kp-ic svg{width:24px;height:24px}
.kp-cards .card p{color:var(--muted);margin:0}
.kp-cards{margin-top:clamp(1.6rem,3vw,2.4rem)}
.kp-honest{margin:clamp(2rem,4vw,3.4rem) 0 0;font-size:clamp(1.9rem,1.2rem + 3vw,3.6rem)}

/* ---------- So läuft es (Fahrplan-Karten, drei statt vier) ---------- */
@media (min-width:960px){
  .sec--deep .kp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.kp-flowsec .steps li{min-height:0}

/* ---------- Quiz ---------- */
.kq-sec{padding-top:clamp(3.5rem,2.5rem + 5vw,7rem)}
.kq-stage{padding:clamp(.6rem,3vw,3rem);border-radius:clamp(22px,4vw,32px)}
.kq-card{max-width:780px;margin-inline:auto;padding:clamp(1.15rem,3.6vw,2.4rem)}
.kq{position:relative}
.kq-js-only{display:none}
html.kq-js .kq-js-only{display:block}

.kq-top{margin-bottom:clamp(1.2rem,3vw,1.8rem)}
.kq-count{display:flex;align-items:center;gap:.55rem;margin:0 0 .7rem;font:650 .9rem/1.2 var(--f-sans);color:var(--green-d)}
.kq-count::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.kq-bar{height:6px;border-radius:99px;background:rgba(21,48,45,.1);overflow:hidden}
.kq-bar i{display:block;height:100%;border-radius:inherit;background:var(--bs-grad);transition:width .5s var(--ease)}

/* Schritte: ohne JS alle untereinander */
.kq-step{min-width:0;margin:0;padding:0;border:0}
.kq-step+.kq-step{margin-top:clamp(2rem,5vw,3rem);padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--line)}
html.kq-js .kq-step+.kq-step{margin-top:0;padding-top:0;border-top:0}
html.kq-js .kq-step:not(.is-current){display:none}
.kq-step legend{float:left;width:100%;margin:0 0 1.1rem;padding:0;font:700 clamp(1.4rem,1.08rem + 1.5vw,2.05rem)/1.12 var(--f-display);letter-spacing:-.034em;color:var(--forest);text-wrap:balance}
.kq-step legend+*{clear:both}
.kq-step legend:focus{outline:none}
.kq-step legend:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:6px}
.kq-hint{margin:-.5rem 0 1.2rem;font-size:.98rem;line-height:1.5;color:var(--muted)}
.kq-sub{margin:.5rem 0 0;font-size:.84rem;line-height:1.45;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  html.anim .kq-step.is-enter{animation:kqIn .5s var(--ease) both}
  html.anim .kq-step.is-enter.is-back{animation-name:kqInBack}
}
@keyframes kqIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes kqInBack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* Antwortkarten (Radio und Checkbox) */
.kq-opts{display:grid;gap:.65rem}
@media (min-width:640px){.kq-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kq-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:center;min-height:62px;padding:.95rem 1.1rem;border-radius:18px;background:#fff;box-shadow:0 0 0 1.5px var(--line-2);cursor:pointer;transition:box-shadow .3s var(--ease),background-color .3s,transform .3s var(--ease);-webkit-tap-highlight-color:transparent}
.kq-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.kq-body{display:grid;gap:.15rem;min-width:0}
.kq-t{font:600 1.04rem/1.35 var(--f-sans);color:var(--forest);letter-spacing:-.01em;overflow-wrap:anywhere}
.kq-t--s{font-weight:500;font-size:.95rem;line-height:1.5;color:var(--text)}
.kq-s{font-size:.9rem;line-height:1.4;color:var(--muted)}
.kq-mark{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--quiet);transition:background .3s,box-shadow .3s}
.kq-mark--box{border-radius:8px}
.kq-mark::after{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s var(--out-back)}
.kq-opt input:checked~.kq-mark{background:var(--bs-grad);box-shadow:none}
.kq-opt input:checked~.kq-mark::after{opacity:1;transform:none}
.kq-opt:has(input:checked){background:var(--lime);box-shadow:0 0 0 2px var(--green)}
.kq-opt:has(input:focus-visible){outline:3px solid var(--green);outline-offset:3px}
@media (hover:hover){
  .kq-opt:hover{box-shadow:0 0 0 2px var(--green),0 14px 26px -20px rgba(15,106,113,.55);transform:translateY(-1px)}
  .kq-opt:has(input:checked):hover{transform:none}
}
.kq-opt--consent{min-height:0;align-items:start;padding:.9rem 1rem;background:transparent;box-shadow:0 0 0 1.5px var(--line-2)}
.kq-opt--consent .kq-mark{margin-top:.1rem}
.kq-opt--consent:hover{transform:none}
.kq-opt--consent a{position:relative;z-index:1;color:var(--green-d);font-weight:600}

/* Felder */
.kq-fields{display:grid;gap:1.15rem}
.kq-field label{display:block;margin:0 0 .45rem;font:650 .92rem/1.3 var(--f-sans);color:var(--forest)}
.kq-in{display:block;width:100%;min-height:58px;padding:.8rem 1rem;border:0;border-radius:16px;background:#fff;color:var(--forest);font:500 1.0625rem/1.4 var(--f-sans);box-shadow:0 0 0 1.5px var(--quiet);appearance:none;-webkit-appearance:none;transition:box-shadow .25s}
.kq-in::placeholder{color:var(--quiet);opacity:1}
.kq-in:hover{box-shadow:0 0 0 1.5px var(--forest)}
.kq-in:focus{outline:none;box-shadow:0 0 0 2px var(--green)}
.kq-in:focus-visible{outline:3px solid var(--green);outline-offset:2px;box-shadow:0 0 0 1.5px var(--green)}
textarea.kq-in{min-height:170px;resize:vertical;line-height:1.5}
.kq-field--area{margin-top:1rem}
.kq-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem;font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.kq-phone{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:.6rem}
.kq-sel{padding-right:2.6rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%2315302D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .85rem center/18px no-repeat;text-overflow:ellipsis;cursor:pointer}
@media (max-width:479px){.kq-phone{grid-template-columns:minmax(0,1fr)}}
.kq-consent{margin-top:1.3rem}
.kq-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Fehler (vorhandene Warnfarben der Website) */
.kq-err{display:flex;gap:.55rem;align-items:flex-start;margin-top:.7rem;padding:.65rem .85rem;border-radius:12px;background:#F6E3DC;color:#7A2E12;font:600 .9rem/1.4 var(--f-sans)}
.kq-err::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#7A2E12;color:#F6E3DC;font:800 .78rem/1 var(--f-sans)}
.kq-in[aria-invalid="true"]{box-shadow:0 0 0 2px #C2621E}
.kq-step.is-invalid .kq-opt{box-shadow:0 0 0 1.5px #C2621E}
.kq-step.is-invalid .kq-opt:has(input:checked){box-shadow:0 0 0 2px var(--green)}
.kq-formerr:empty{display:none}
.kq-formerr{display:flex;gap:.55rem;margin-top:1.1rem;padding:.8rem 1rem;border-radius:14px;background:#F6E3DC;color:#7A2E12;font:600 .95rem/1.45 var(--f-sans)}

/* Navigation */
.kq-nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:clamp(1.4rem,3vw,2rem)}
.kq-nav .btn,.kq-nav .btn-ghost{cursor:pointer;font-family:var(--f-sans)}
.kq-nav .btn-ghost{background:transparent;border:0;font-size:1rem;color:var(--forest)}
.kq-back,.kq-next{display:none}
html.kq-js .kq-back,html.kq-js .kq-next{display:inline-flex}
html.kq-js .kq-next{margin-left:auto}
html.kq-js .kq.is-first .kq-back{visibility:hidden}
html.kq-js .kq.is-last .kq-next{display:none}
html.kq-js .kq:not(.is-last) .kq-submit{display:none}
html.kq-js .kq:not(.is-last) .kq-after{display:none}
.kq-submit{margin-left:auto}
.kq-submit[disabled]{opacity:.75;cursor:progress;transform:none;box-shadow:none}
.kq-after{margin:1rem 0 0;font-size:.88rem;color:var(--muted);text-align:right}
@media (max-width:520px){
  .kq-nav .btn{padding-left:1.15rem}
  html.kq-js .kq.is-last .kq-nav{flex-direction:column-reverse;align-items:stretch}
  html.kq-js .kq.is-last .kq-submit{margin-left:0;justify-content:space-between}
  html.kq-js .kq.is-last .kq-back{justify-content:center}
  .kq-after{text-align:center}
}
.kq-nav .btn:focus-visible,.kq-nav .btn-ghost:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:999px}

/* ---------- FAQ ---------- */
.faq-list .a a{color:var(--green-d)}

/* ---------- Sticky-CTA: weg, solange das Quiz im Bild ist ---------- */
.sticky.hide{visibility:hidden;transition:transform .45s var(--ease),opacity .3s,visibility 0s .45s}
html.kq-view .sticky{transform:translateY(140%);opacity:0;pointer-events:none;visibility:hidden}

/* ---------- Danke-Seite ---------- */
.kd-hero{padding-bottom:clamp(1rem,3vw,2rem)}
.kd-ok{width:72px;height:72px;margin-bottom:1.4rem;box-shadow:0 0 0 10px var(--lime)}
.kd-ok::after{width:34px;height:34px}
@media (prefers-reduced-motion:no-preference){html.anim .kd-ok{animation:kpPop .8s var(--out-back) .1s both}}
.kd-hero .stage .sub p:first-child{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)}
.kd-cards{margin-top:clamp(1.6rem,3vw,2.4rem);counter-reset:none}
.kd-cards .card p{color:var(--muted);margin:0}
.kd-n{display:grid;place-items:center;width:40px;height:40px;margin-bottom:1.1rem;border-radius:50%;background:var(--sun);color:var(--forest);font:700 1rem/1 var(--f-display)}
.bs-note.kd-note{margin-top:1.4rem;max-width:40rem}
.kd-note p{margin:0}

/* ======================================================================
   Landingpage 2: neue Sektionen (Beruf-Umschalter, Plan-Vorschau, sechs Wege,
   Beispielwoche, Team, Für wen). Reveals über ki-businessplan-lp.js (.kp-in).
   Ohne JS (kein html.kp-js / html.kp-m) ist alles sichtbar. Nur opacity/transform.
   ====================================================================== */

/* ---------- Reveal-Grundlage ---------- */
html.kp-m [data-kp]:not([data-kp="draw"]):not([data-kp="doc"]){opacity:0;transform:translateY(24px);transition:opacity .8s var(--out-expo) calc(var(--i,0)*.1s),transform .9s var(--out-expo) calc(var(--i,0)*.1s)}
html.kp-m [data-kp="fade"]{transform:none}
html.kp-m [data-kp].kp-in:not([data-kp="draw"]):not([data-kp="doc"]){opacity:1;transform:none}
/* Icons zeichnen sich */
html.kp-m [data-kp="draw"] :is(path,circle,rect){opacity:0;stroke-dasharray:1 2;stroke-dashoffset:1}
html.kp-m [data-kp="draw"].kp-in :is(path,circle,rect){opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--out-expo) calc(var(--i,0)*.1s + var(--p,0)*.12s),opacity .01s calc(var(--i,0)*.1s + var(--p,0)*.12s)}
html.kp-m [data-kp="draw"] :is(path,circle,rect):nth-child(2){--p:1}
html.kp-m [data-kp="draw"] :is(path,circle,rect):nth-child(3){--p:2}
html.kp-m [data-kp="draw"] :is(path,circle,rect):nth-child(4){--p:3}

/* kleine Bausteine */
.kp-k{display:block}
.kp-note-pad{margin:0}
.kp-bridge{margin:clamp(1.4rem,3vw,2.2rem) 0 0 .2rem;font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);line-height:1.1;color:var(--green-d);display:flex;align-items:flex-start;gap:.6rem;transform:rotate(-1.5deg)}
.kp-bridge svg{flex:none;width:38px;height:38px;margin-top:.2rem;transform:rotate(100deg)}
.kp-bridge span{display:block}
.sec-head .lead{margin-inline:auto;max-width:44rem}
.sec-head .lead .chk{margin-left:.3em}

/* ---------- Was du bekommst: Icon-Kreis ---------- */
.kp-cards .kp-ic{transition:transform .5s var(--out-back)}
@media (hover:hover){.kp-cards .card:hover .kp-ic,.kp-way:hover .kp-ic{transform:rotate(-6deg) scale(1.06)}}

/* ---------- Beruf-Umschalter ---------- */
.kp-pick{padding:clamp(.6rem,3vw,3rem);border-radius:clamp(22px,4vw,32px)}
.kp-tabrow{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:.7rem;max-width:960px;margin-inline:auto}
.kp-tabs{display:none}
html.kp-js .kp-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;padding:.35rem;border-radius:26px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px var(--bs-line),0 14px 34px -22px rgba(14,60,66,.4)}
.kp-tab{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;min-height:84px;padding:.7rem .5rem .85rem;border-radius:20px;overflow:hidden;color:var(--forest);transition:background .45s var(--out-expo),color .3s,box-shadow .4s}
.kp-tab:last-of-type{grid-column:1/-1}
.kp-tab:hover{background:rgba(21,127,135,.08)}
.kp-tab[aria-selected="true"]{background:var(--forest);color:#fff;box-shadow:0 10px 24px -12px rgba(16,39,43,.6)}
.kp-tab:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.kp-tic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--green-d);transition:background .4s,color .4s}
.kp-tic .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kp-tab[aria-selected="true"] .kp-tic{background:rgba(127,220,227,.18);color:var(--sun)}
.kp-tn{font:650 .95rem/1.2 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.kp-bar{position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;overflow:hidden;visibility:hidden}
.kp-bar i{display:block;height:100%;background:var(--sun);transform:scaleX(0);transform-origin:left}
html.kp-m .kp-pick.is-live:not(.is-off) .kp-tab[aria-selected="true"] .kp-bar{visibility:visible}
html.kp-m .kp-pick.is-live .kp-tab[aria-selected="true"] .kp-bar i{animation:kpBar var(--kp-dur,6s) linear both}
html.kp-m .kp-pick.is-live.is-paused .kp-tab[aria-selected="true"] .kp-bar i{animation-play-state:paused}
@keyframes kpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:560px){
  html.kp-js .kp-tabs{display:flex;flex-wrap:wrap;justify-content:center}
  .kp-tab{flex:0 1 calc((100% - .6rem) / 3 - .3rem);min-width:130px}
  .kp-tab:last-of-type{grid-column:auto}
}
@media (min-width:880px){
  html.kp-js .kp-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .kp-tab{min-width:0}
}
.kp-pause{display:none}
html.kp-m .kp-pause{display:inline-flex;align-self:flex-end;align-items:center;gap:.5rem;min-height:40px;padding:0 .9rem 0 .75rem;border:0;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px var(--bs-line);color:var(--forest);font:600 .82rem/1 var(--f-sans);cursor:pointer;transition:box-shadow .3s,background-color .3s}
html.kp-m .kp-pause:hover{box-shadow:0 0 0 1.5px var(--green)}
.kp-pause:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.kp-pause-i{display:flex;gap:3px}
.kp-pause-i i{width:3px;height:11px;border-radius:2px;background:currentColor}
.kp-pause.is-off .kp-pause-i{gap:0}
.kp-pause.is-off .kp-pause-i i:first-child{width:0;height:0;border-radius:0;background:none;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.kp-pause.is-off .kp-pause-i i:last-child{display:none}

.kp-panels{max-width:960px;margin:clamp(.9rem,2.4vw,1.5rem) auto 0}
html.kp-js .kp-panels{display:grid}
.kp-panel{min-width:0}
.kp-panel+.kp-panel{margin-top:1rem}
html.kp-js .kp-panel{grid-area:1/1;margin-top:0;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s var(--out-expo),visibility 0s .3s}
html.kp-js .kp-panel.is-active{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .35s var(--out-expo) .05s,visibility 0s}
.kp-panel:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:26px}
.kp-pc{display:grid;gap:.4rem;padding:clamp(1.15rem,3.6vw,2.2rem);min-height:100%}
.kp-pc .kp-flow{align-content:start}
.kp-pc .kp-pos{font-size:clamp(1.12rem,1rem + .5vw,1.3rem)}
.kp-join{justify-self:center;width:22px;height:38px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.kp-join--h{display:none}
.kp-wk{padding:1.15rem 1.2rem 1.25rem;border-radius:20px;background:#F1F8F8;box-shadow:inset 0 0 0 1px var(--bs-line);display:grid;gap:.6rem;align-content:start}
.kp-wkh{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem .8rem}
.kp-wkh .kp-badge{white-space:nowrap}
.kp-tasks{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.7rem}
.kp-tasks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.75rem;align-items:start;font-size:1rem;line-height:1.5;color:var(--text)}
.kp-tasks .bs-check{width:24px;height:24px;margin-top:.1rem}
.kp-tasks .bs-check::after{width:12px;height:12px}
@media (min-width:880px){
  .kp-pc{grid-template-columns:minmax(0,1.05fr) 56px minmax(0,.95fr);align-items:center;gap:0}
  .kp-join--v{display:none}
  .kp-join--h{display:block;width:56px;height:24px}
}
.kp-pick-note{max-width:960px;margin:clamp(.9rem,2vw,1.3rem) auto 0}

/* Panel-Aufbau beim Wechsel (is-play wird per JS gesetzt) */
html.kp-m .kp-panel .kp-a{opacity:0;transform:translateY(14px)}
html.kp-m .kp-panel.is-play .kp-a{animation:kpUp .7s var(--out-expo) calc(var(--n)*.2s + .05s) both}
html.kp-m .kp-panel .kp-flow--p>li::before{opacity:0}
html.kp-m .kp-panel.is-play .kp-flow--p>li::before{animation:kpPop .5s var(--out-back) calc(var(--n)*.2s + .1s) both}
html.kp-m .kp-panel .kp-flow--p>li:not(:last-child)::after{transform:scaleY(0);transform-origin:top}
html.kp-m .kp-panel.is-play .kp-flow--p>li:not(:last-child)::after{animation:kpLine .5s var(--out-expo) calc(var(--n)*.2s + .3s) both}
html.kp-m .kp-panel .kp-pop,html.kp-m .kp-panel .kp-chk{opacity:0}
html.kp-m .kp-panel.is-play .kp-pop{animation:kpPop .5s var(--out-back) calc(var(--n)*.2s + .3s + var(--m)*.12s) both}
html.kp-m .kp-panel.is-play .kp-tasks .kp-chk{animation:kpPop .55s var(--out-back) calc(.95s + var(--m)*.32s) both}
html.kp-m .kp-panel .kp-join path{stroke-dasharray:1 2;stroke-dashoffset:1}
html.kp-m .kp-panel.is-play .kp-join path{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--out-expo) .65s}
.kp-join path{}

/* ---------- Das steht in deinem Plan ---------- */
.kp-docwrap{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:960px){.kp-docwrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.kp-doccopy .lead{margin-top:1rem}
.kp-parts{list-style:none;margin:clamp(1.4rem,3vw,2rem) 0 0;padding:0;display:grid;gap:.4rem;counter-reset:kpp}
.kp-parts li{position:relative;counter-increment:kpp;display:grid;gap:.15rem;padding:.7rem 0 .7rem 3.4rem;transition:opacity .5s var(--out-expo)}
.kp-parts li::before{content:counter(kpp);position:absolute;left:0;top:.6rem;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--sun);border:2px solid var(--sun);font:600 1.05rem/1 var(--f-display);color:var(--forest);transition:background-color .4s,border-color .4s,transform .5s var(--out-back)}
.kp-parts b{font:650 1.08rem/1.3 var(--f-display);letter-spacing:-.01em;color:var(--forest)}
.kp-parts span{color:var(--muted);max-width:40ch}
html.kp-m .kp-parts li:not(.on)::before{background:var(--paper);border-color:var(--line-2);color:var(--muted)}
html.kp-m .kp-parts li:not(.on){opacity:.55}
html.kp-m .kp-parts li.on::before{transform:scale(1.06)}

.kp-doc{width:100%;max-width:560px;margin:0 auto;padding:22px clamp(22px,4vw,24px) 0}
.kp-docbox{position:relative;isolation:isolate}
.kp-sheet--main{position:relative;padding:clamp(1.1rem,3.2vw,1.7rem);border-radius:22px}
.kp-sheet:not(.kp-sheet--main){position:absolute;inset:0;z-index:-1;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--bs-line),0 18px 40px -24px rgba(14,60,66,.35);transition:transform 1.1s var(--out-expo),opacity .8s}
.kp-sheet--b1{transform:translate(-6px,8px) rotate(-1.8deg)}
.kp-sheet--b2{transform:translate(6px,14px) rotate(2deg);opacity:.85}
@media (min-width:640px){.kp-sheet--b1{transform:translate(-14px,8px) rotate(-3.6deg)}.kp-sheet--b2{transform:translate(16px,14px) rotate(3.8deg)}}
html.kp-m .kp-doc:not(.kp-in) .kp-sheet:not(.kp-sheet--main){transform:none;opacity:0}
.kp-doc .kp-top{margin-bottom:.9rem}
.kp-doc-h{margin:0 0 .4rem;font:700 clamp(1.08rem,1rem + .5vw,1.28rem)/1.25 var(--f-sans);letter-spacing:-.02em;color:var(--bs-ink);text-wrap:balance}
.kp-blk{display:grid;gap:.55rem;justify-items:start;padding:.95rem 0 .95rem;border-top:1px solid var(--bs-line)}
.kp-blk:last-child{padding-bottom:.1rem}
.kp-blk .kp-k{display:flex;align-items:center;gap:.5rem;margin:0}
.kp-blk .kp-k i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sun);color:var(--forest);font:700 .7rem/1 var(--f-sans);font-style:normal;letter-spacing:0}
.kp-blk .kp-pos{font-size:1.02rem}
.kp-doc .kp-pills{gap:.4rem}
.kp-doc .bs-pill{font-size:.74rem;padding:.4rem .65rem;line-height:1.2}
.kp-doc-p{margin:0;font-size:.92rem;line-height:1.55;color:var(--text)}
.kp-rec{background:var(--lime);box-shadow:0 0 0 1px rgba(15,106,113,.25);padding-left:.4rem}
.kp-rec .bs-check{width:20px;height:20px}
.kp-rec .bs-check::after{width:10px;height:10px}
.kp-wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;width:100%}
.kp-wgrid>span{display:grid;gap:.3rem;align-content:start;padding:.6rem .65rem .65rem;border-radius:12px;background:#F1F8F8;box-shadow:inset 0 0 0 1px var(--bs-line);font:500 .78rem/1.35 var(--f-sans);color:var(--text)}
.kp-wgrid em{font:650 .66rem/1 var(--f-sans);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--green-d)}
@media (min-width:520px){.kp-wgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kp-blk--q .kp-doc-p{padding-left:.9rem;border-left:3px solid var(--sun)}
.kp-doc-cap{margin-top:2rem;text-align:center}
/* Teile erscheinen nacheinander */
html.kp-m .kp-sheet--main>.kp-doc-h,html.kp-m .kp-sheet--main>.kp-blk{opacity:0;transform:translateY(16px);transition:opacity .8s var(--out-expo),transform .9s var(--out-expo)}
html.kp-m .kp-sheet--main>.kp-doc-h.kp-in,html.kp-m .kp-sheet--main>.kp-blk.kp-in{opacity:1;transform:none}
html.kp-m .kp-blk .bs-pill,html.kp-m .kp-wgrid>span{opacity:0;transform:scale(.85);transition:opacity .4s,transform .6s var(--out-back) calc(var(--m,0)*.08s + .25s)}
html.kp-m .kp-blk.kp-in .bs-pill,html.kp-m .kp-blk.kp-in .kp-wgrid>span{opacity:1;transform:none}
html.kp-m .kp-wgrid>span:nth-child(2),html.kp-m .kp-blk .bs-pill:nth-child(2){--m:1}
html.kp-m .kp-wgrid>span:nth-child(3),html.kp-m .kp-blk .bs-pill:nth-child(3){--m:2}
html.kp-m .kp-wgrid>span:nth-child(4){--m:3}

/* ---------- CTA-Band ---------- */
.kp-band{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem;margin-top:clamp(2.2rem,5vw,3.6rem);padding:clamp(1.4rem,4vw,2.2rem);border-radius:28px;background:var(--forest);color:#F1F6F5}
.kp-band::before{content:"";position:absolute;z-index:-1;right:-60px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(127,220,227,.42),rgba(127,220,227,0) 68%)}
.kp-band::after{content:"";position:absolute;z-index:-1;left:-40px;bottom:-110px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(31,163,174,.35),rgba(31,163,174,0) 68%)}
.kp-band-h{margin:0;font:650 clamp(1.3rem,1.1rem + 1vw,1.8rem)/1.2 var(--f-display);letter-spacing:-.025em;color:#fff;text-wrap:balance}
.kp-band-s{margin:.4rem 0 0;color:#C9D8D9}
.kp-band .btn{flex:none;max-width:100%}
@media (min-width:820px){.kp-band{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}}

/* ---------- Sechs Wege ---------- */
.kp-ways{margin-top:0}
.kp-way h3{margin:0 0 .8rem}
.kp-way .kp-w{margin:0 0 .85rem;color:var(--text);font-size:1rem;line-height:1.55}
.kp-way .kp-w:last-child{margin-bottom:0}
.kp-way .kp-k{margin-bottom:.25rem;font:650 .68rem/1 var(--f-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--green-d)}
.kp-way .kp-w+.kp-w{padding-top:.85rem;border-top:1px dashed var(--line-2)}
.kp-ways-note{max-width:34rem;margin:clamp(1.4rem,3vw,2rem) auto 0;justify-content:center;align-items:center;font-size:.95rem;color:var(--forest);font-weight:600}

/* ---------- Beispielwoche ---------- */
.kp-weekchips{margin-top:1.4rem}
.kp-weekchips li{box-shadow:var(--ring)}
.kp-wax{display:flex;justify-content:space-between;margin:.55rem 1.2rem 0 calc(1.4rem + 3rem);font:500 .72rem/1 var(--f-sans);color:var(--muted);font-variant-numeric:tabular-nums}
.kp-weeksec .week{padding:1.4rem 1.4rem .6rem}
@media (max-width:420px){.kp-wax{margin-left:calc(1rem + 3rem)}.kp-weeksec .week{padding:1rem 1rem .4rem}}

/* ---------- Team ---------- */
.kp-team{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.kp-member{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto;column-gap:1.1rem;align-items:center;padding:.8rem;border-radius:var(--r-l);background:var(--paper);box-shadow:var(--ring)}
.kp-member .kp-ph{grid-row:1/3}
.kp-member h3{margin:0;align-self:end}
.kp-member p{margin:.1rem 0 0;color:var(--muted);align-self:start}
.kp-ph{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:1/1;background:var(--lime)}
.kp-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--out-expo)}
.kp-ph--1 img{object-position:30% 25%}
.kp-ph--2 img{object-position:50% 30%}
.kp-ph--3 img{object-position:50% 20%}
html.kp-m .kp-member:not(.kp-in) .kp-ph img{transform:scale(1.16)}
.kp-member.kp-in .kp-ph img,html:not(.kp-m) .kp-ph img{transform:scale(1.03)}
@media (min-width:700px){
  .kp-team{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
  .kp-member{display:block;padding:.8rem .8rem 1.3rem}
  .kp-ph{aspect-ratio:4/4.4;border-radius:18px;margin-bottom:1.1rem}
  .kp-member h3,.kp-member p{padding-inline:.4rem}
  .kp-member p{margin-top:.15rem}
}
.kp-trust{justify-content:center;gap:.5rem .6rem;margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.kp-trust li{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.55rem 1rem .55rem .75rem;font:600 .95rem/1.2 var(--f-sans);letter-spacing:-.005em}
.kp-trust .hc-ic{width:22px;height:22px}
.kp-trust .hc-ic svg{width:13px;height:13px}
.kp-trust .hc-us{display:inline-grid}
.kp-trust .hc-st{width:auto;overflow:visible;font-size:.85rem;letter-spacing:.04em;white-space:nowrap}

/* ---------- Für wen ---------- */
.kp-fitcols{display:grid;gap:clamp(1.4rem,3vw,2rem)}
@media (min-width:860px){.kp-fitcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem)}}
.kp-fitcol h3{margin:0 0 1rem}
.kp-fitcol .fit li{font-size:1.04rem}
.kp-not li::before{background:var(--line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='%235C6967' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.kp-not li{color:var(--text)}

/* ---------- Sicherheitsnetz ---------- */
@media (prefers-reduced-motion:reduce){
  .kp-pick *,.kp-doc *,.kp-member *,.kp-band,.kp-way *{animation:none!important;transition:none!important}
}

/* ---------- Cookie-Hinweis (nur sichtbar, wenn in analyse-config.js eine metaPixelId steht) ---------- */
.kc-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;background:#fff;color:var(--ink,#15302D);border:1px solid rgba(21,48,45,.14);border-radius:16px;box-shadow:0 10px 34px rgba(21,48,45,.18);font-size:.9rem;line-height:1.45}
.kc-bar p{margin:0;flex:1 1 280px}
.kc-bar a{text-decoration:underline;text-underline-offset:2px}
.kc-act{display:flex;gap:.6rem;align-items:center}

/* Unschärfe-Kante der Website (Desktop) soll die Quiz-Knöpfe nicht verwischen, solange das Quiz im Bild ist */
html.kq-view .edge-blur{display:none}