/* ============================================================
   MALEXERA DESIGN-SYSTEM · v0.1 · MIU24® KG
   Philosophie: HTML+CSS zuerst, JS nur wo nötig, null Abhängigkeiten.
   ============================================================ */

/* ---------- Lokale Schrift: Barlow (DSGVO-konform, kein CDN) ---------- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/barlow-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:italic;font-weight:600;font-display:swap;
  src:url('../fonts/barlow-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2')}

/* ---------- Design-Tokens ---------- */
/* v0.5 · Farben von malexera.de: Logo-Schwarz auf Weiß, monochrom-elegant.
   Farbe erscheint nur als kleine Akzente (Icon-Kacheln, Dreiklang). */
:root{
  --bg:#f7f6f4;--panel:#ffffff;--panel2:#efeeea;
  --ink:#171614;--muted:#57544e;--faint:#8a8780;
  --brass:#171614;--brass-soft:rgba(23,22,20,.07);
  --green:#1f8a76;--blue:#2f6bd8;--warm:#d96f2e;
  --line:rgba(23,22,20,.14);
  --r:18px;--shadow:0 20px 50px rgba(23,22,20,.08);
}
:root[data-theme="dark"]{
  --bg:#141312;--panel:#1d1c1a;--panel2:#242220;
  --ink:#f2f0ec;--muted:#a8a49c;--faint:#6d6a63;
  --brass:#f2f0ec;--brass-soft:rgba(242,240,236,.09);
  --green:#3fb59a;--blue:#6d9ff2;--warm:#f08a45;
  --line:rgba(242,240,236,.13);
  --shadow:0 20px 50px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#141312;--panel:#1d1c1a;--panel2:#242220;
    --ink:#f2f0ec;--muted:#a8a49c;--faint:#6d6a63;
    --brass:#f2f0ec;--brass-soft:rgba(242,240,236,.09);
    --green:#3fb59a;--blue:#6d9ff2;--warm:#f08a45;
    --line:rgba(242,240,236,.13);
    --shadow:0 20px 50px rgba(0,0,0,.4);
  }
}

/* ---------- Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Barlow',system-ui,sans-serif;
  line-height:1.7;font-size:16.5px;overflow-x:hidden;transition:background .4s,color .4s}
::selection{background:var(--brass);color:var(--bg)}
img,svg{max-width:100%}
a{color:var(--brass)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
section{padding:88px 0}
main{display:block}

/* Barrierefreiheit */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--brass);color:var(--bg);
  padding:10px 20px;border-radius:100px;font-weight:600;text-decoration:none}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Typografie ---------- */
h1,h2,h3,.serif{font-family:'Barlow',system-ui,sans-serif;font-weight:450;line-height:1.15;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,5.6vw,4rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-bottom:18px}
h3{font-size:1.25rem;margin-bottom:10px}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:var(--brass)}
.label{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:18px}
.lead{color:var(--muted);max-width:640px;font-size:1.06rem}

/* Handgezeichneter Unterstrich (reine CSS-Animation) */
.u{position:relative;white-space:nowrap}
.u svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.5em;overflow:visible}
.u path{fill:none;stroke:var(--brass);stroke-width:5;stroke-linecap:round;opacity:.85;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.2s .4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Header / Nav ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:60;background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:'Barlow',sans-serif;font-size:1.25rem;font-weight:500;color:var(--ink);text-decoration:none}
.brand i{font-style:normal;color:var(--brass)}
.navlinks{display:flex;gap:2px;align-items:center}
.navlinks a{color:var(--muted);text-decoration:none;font-size:.9rem;padding:8px 13px;border-radius:100px;transition:.25s}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--brass);background:var(--brass-soft)}
.navlinks a.book{color:var(--bg);background:var(--brass);font-weight:600;padding:9px 18px;margin-left:6px}
.theme-btn{background:none;border:1px solid var(--line);color:var(--muted);width:38px;height:38px;
  border-radius:50%;cursor:pointer;font-size:1rem;margin-left:8px;transition:.25s}
.theme-btn:hover{border-color:var(--brass);color:var(--brass)}
@media(max-width:920px){.navlinks a:not(.book){display:none}}

/* Scroll-Fortschritt (reines CSS via animation-timeline, Fallback: JS) */
#scrollBar{position:fixed;top:0;left:0;height:3px;z-index:100;width:100%;
  background:linear-gradient(90deg,var(--brass),var(--green));transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  #scrollBar{animation:grow linear;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:14px 28px;border-radius:100px;text-decoration:none;font-weight:600;
  font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:.25s;font-family:inherit}
.btn.p{background:var(--brass);color:var(--bg)}
.btn.p:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn.s{border-color:var(--line);color:var(--ink);background:transparent}
.btn.s:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- Karten & Grids ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.card:hover{border-color:color-mix(in srgb,var(--brass) 40%,transparent);transform:translateY(-5px);box-shadow:var(--shadow)}
.card p{color:var(--muted);font-size:.94rem}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Piktogramme: zeichnen sich bei Hover (reine CSS-Animation) */
.pic{width:52px;height:52px;margin-bottom:18px}
.pic svg{width:100%;height:100%;stroke:var(--brass);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card:hover .pic .anim{stroke-dasharray:130;stroke-dashoffset:130;animation:draw .9s ease forwards}

/* ---------- Scroll-Reveal: CSS-first (animation-timeline), JS-Fallback ---------- */
.rv{opacity:0;transform:translateY(24px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s,transform .7s}
@supports (animation-timeline: view()){
  .rv{animation:reveal both;animation-timeline:view();animation-range:entry 0% entry 45%;transition:none}
  @keyframes reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}

/* ---------- Marquee (reines CSS) ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;white-space:nowrap}
.marquee .inner{display:inline-block;animation:scrollX 26s linear infinite}
.marquee:hover .inner{animation-play-state:paused}
.marquee span{font-family:'Barlow',sans-serif;font-size:1.5rem;color:var(--faint);margin-right:60px}
.marquee b{color:var(--brass);font-weight:500}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---------- Hero-Illustration ---------- */
.hero{padding:158px 0 70px}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr}}
.illu .node{animation:pulse 3s ease-in-out infinite}
.illu .node.d{animation-delay:1.5s}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.illu .link{stroke-dasharray:8 6;animation:dashmove 1.6s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-14}}
.trust-line{display:flex;flex-wrap:wrap;gap:20px;margin-top:44px;padding-top:24px;
  border-top:1px solid var(--line);color:var(--muted);font-size:.87rem}
.trust-line b{color:var(--green)}

/* ---------- 3D-Würfel: das Formel-Widget (reines CSS 3D) ---------- */
.cube-stage{perspective:900px;width:180px;height:180px;margin:30px auto}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:spin 14s linear infinite}
.cube-stage:hover .cube{animation-play-state:paused}
.cube .face{position:absolute;inset:0;display:grid;place-items:center;border:1px solid var(--brass);
  background:color-mix(in srgb,var(--brass) 10%,var(--panel));border-radius:14px;
  font-family:'Barlow',sans-serif;font-size:3rem;color:var(--brass);backface-visibility:visible}
.cube .face small{position:absolute;bottom:12px;font-family:'Barlow';font-size:.66rem;
  letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.cube .f1{transform:translateZ(90px)}
.cube .f2{transform:rotateY(90deg) translateZ(90px)}
.cube .f3{transform:rotateY(180deg) translateZ(90px)}
.cube .f4{transform:rotateY(-90deg) translateZ(90px)}
.cube .f5{transform:rotateX(90deg) translateZ(90px)}
.cube .f6{transform:rotateX(-90deg) translateZ(90px)}
@keyframes spin{from{transform:rotateX(-15deg) rotateY(0)}to{transform:rotateX(-15deg) rotateY(360deg)}}

/* ---------- Formel ---------- */
.formel{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,20px);flex-wrap:wrap;margin:44px 0 28px}
.f-el{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 28px;
  text-align:center;cursor:pointer;transition:.3s;min-width:126px;font-family:inherit;color:inherit}
.f-el:hover,.f-el.on,.f-el:focus-visible{border-color:var(--brass);transform:translateY(-6px) rotate(-1deg);background:var(--brass-soft)}
.f-el .sym{font-family:'Barlow',sans-serif;font-size:2rem;color:var(--brass)}
.f-el .nm{font-size:.82rem;color:var(--muted);margin-top:4px}
.f-op{font-family:'Barlow',sans-serif;font-size:2.2rem;color:var(--faint)}
.f-result{background:linear-gradient(150deg,var(--brass-soft),var(--panel));border-color:color-mix(in srgb,var(--brass) 50%,transparent)}
.f-detail{max-width:640px;margin:0 auto;text-align:center;color:var(--muted);min-height:76px;font-size:.98rem;transition:opacity .3s}
.f-detail b{color:var(--brass)}

/* ---------- Slider ---------- */
.slider{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.track{display:flex;transition:transform .6s cubic-bezier(.25,.8,.25,1)}
.slide{min-width:100%;padding:54px clamp(28px,7vw,80px)}
.slide h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px;max-width:640px}
.slide p{color:var(--muted);max-width:600px}
.slider-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.dots{display:flex;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint);border:0;cursor:pointer;transition:.3s;padding:0}
.dot.on{background:var(--brass);width:26px;border-radius:100px}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--ink);font-size:1.1rem;cursor:pointer;transition:.25s;margin-left:10px}
.arrow:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- Quiz ---------- */
.quiz{background:var(--panel2);border:1px solid var(--line);border-radius:26px;
  padding:clamp(28px,5vw,54px);text-align:center;position:relative;overflow:hidden}
.q-step{display:none;animation:stepIn .4s ease}
.q-step.on{display:block}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.q-step h3{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:14px auto 30px;max-width:560px}
.q-opts{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:0 auto}
.q-opt{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 22px;
  cursor:pointer;color:var(--ink);font:inherit;font-size:.95rem;transition:.25s;text-align:left}
.q-opt:hover{border-color:var(--brass);transform:translateX(6px)}
.q-bar{height:5px;background:var(--line);border-radius:5px;overflow:hidden;max-width:300px;margin:0 auto}
.q-bar i{display:block;height:100%;background:var(--brass);transition:width .4s}
.badge{width:110px;height:110px;margin:10px auto 20px;border-radius:50%;display:grid;place-items:center;
  font-size:3rem;background:var(--brass-soft);border:2px solid var(--brass);animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- Statistiken ---------- */
.stat-card{text-align:center;padding:40px 24px}
.stat-num{font-family:'Barlow',sans-serif;font-size:clamp(2.6rem,5vw,3.6rem);color:var(--brass);font-weight:500;line-height:1}
.stat-num small{font-size:.45em}
.stat-src{font-size:.74rem;color:var(--faint);margin-top:12px;display:block}
.stat-card p{margin-top:10px}
.mixbar{display:flex;border-radius:14px;overflow:hidden;height:64px;margin:30px 0 14px;border:1px solid var(--line)}
.mixbar div{display:grid;place-items:center;font-size:.85rem;font-weight:600;color:#171310;
  transition:flex 1s ease;white-space:nowrap;overflow:hidden}
.mix-legend{display:flex;gap:24px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.mix-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.mix-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* ---------- Person / About ---------- */
.person{display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:40px}
@media(max-width:680px){.person{grid-template-columns:1fr;text-align:center}.person .avatar{margin:0 auto}}
.avatar{width:170px;height:170px;border-radius:50%;background:linear-gradient(150deg,var(--brass-soft),var(--panel2));
  border:2px solid var(--brass);display:grid;place-items:center;font-family:'Barlow',sans-serif;font-size:3.2rem;color:var(--brass)}
.miu{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;
  padding:12px 20px;font-size:.88rem;color:var(--muted);margin-top:24px}
.miu b{color:var(--ink)}

/* ---------- Preise ---------- */
.price-card{position:relative;display:flex;flex-direction:column}
.price-card .tag{position:absolute;top:-13px;left:24px;background:var(--green);color:var(--bg);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:4px 14px;border-radius:100px;text-transform:uppercase}
.price-card .val{font-family:'Barlow',sans-serif;font-size:2.1rem;color:var(--ink);margin:12px 0 4px}
.price-card .val small{font-size:.45em;color:var(--faint)}
.price-card ul{list-style:none;margin:18px 0 24px;display:grid;gap:10px;flex:1}
.price-card li{font-size:.88rem;color:var(--muted);padding-left:24px;position:relative}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--green)}
.price-card.hero-p{background:linear-gradient(160deg,var(--brass-soft),var(--panel));
  border-color:color-mix(in srgb,var(--brass) 45%,transparent)}

/* ---------- Tabellen ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;color:var(--faint);font-weight:500;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.tbl td b{color:var(--ink)}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line)}
details summary{cursor:pointer;list-style:none;padding:24px 0;font-family:'Barlow',sans-serif;
  font-size:1.15rem;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brass);font-size:1.4rem;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details>p,details>div{color:var(--muted);padding:0 0 26px;max-width:720px;font-size:.96rem}

/* ---------- Anamnese ---------- */
.ana{background:var(--panel2);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.ana-head{padding:40px clamp(24px,5vw,56px) 0}
.progress{height:4px;background:var(--line);border-radius:4px;margin:28px 0 0;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brass);width:20%;transition:width .5s ease;border-radius:4px}
.step{display:none;padding:40px clamp(24px,5vw,56px) 48px;animation:stepIn .45s ease}
.step.on{display:block}
.step h3{font-size:clamp(1.35rem,2.6vw,1.8rem);margin-bottom:8px}
.step .hint{color:var(--muted);font-size:.92rem;margin-bottom:28px}
.field{margin-bottom:20px}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:8px}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--ink);
  padding:14px 16px;font-family:inherit;font-size:.96rem;transition:border-color .25s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brass)}
textarea{min-height:110px;resize:vertical}
.chipset{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:11px 20px;border-radius:100px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;font-size:.9rem;font-family:inherit;transition:.25s}
.chip.on{background:var(--brass);border-color:var(--brass);color:var(--bg);font-weight:600}
.step-nav{display:flex;justify-content:space-between;gap:12px;padding:0 clamp(24px,5vw,56px) 44px}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:18px;font-size:.87rem;color:var(--muted)}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--brass);flex-shrink:0}
.why-box{border-left:3px solid var(--green);background:color-mix(in srgb,var(--green) 8%,transparent);
  padding:16px 20px;border-radius:0 12px 12px 0;font-size:.88rem;color:var(--muted);margin-bottom:26px}
.why-box b{color:var(--green)}
.summary{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:22px;font-size:.92rem}
.summary dt{color:var(--faint);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}
.summary dt:first-child{margin-top:0}
.summary dd{color:var(--ink);margin-left:0}
.done{text-align:center;padding:70px clamp(24px,5vw,56px)}
.done h3{font-size:1.8rem;margin-bottom:12px}
.done p{color:var(--muted);max-width:480px;margin:0 auto 28px}

/* ---------- Hinweise / Notices ---------- */
.notice{background:var(--brass-soft);border:1px solid color-mix(in srgb,var(--brass) 35%,transparent);
  border-radius:12px;padding:14px 18px;font-size:.84rem;color:var(--brass);margin:18px 0}

/* ---------- CTA-Band ---------- */
.cta-band{text-align:center;border:1px solid color-mix(in srgb,var(--brass) 30%,transparent);
  border-radius:26px;padding:70px 30px;background:linear-gradient(170deg,var(--brass-soft),transparent 60%)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0;color:var(--muted);font-size:.87rem}
footer .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .legal{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--brass)}

/* ---------- Rechtsseiten ---------- */
.legal-page{max-width:760px;margin:0 auto;padding:160px 24px 80px}
.legal-page h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:24px}
.legal-page h2{font-size:1.3rem;margin:34px 0 10px}
.legal-page p,.legal-page li{color:var(--muted);font-size:.95rem;margin-bottom:12px}
.legal-page ul{padding-left:22px}

/* ---------- Konfetti-Canvas ---------- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:200}

/* ---------- Reduced Motion & Print ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .u path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}
@media print{
  .top,#scrollBar,.marquee,.quiz,footer .legal{display:none}
  body{background:#fff;color:#111}
}

/* ---------- v0.2: Headline-Gewichte für Barlow ---------- */
h1,h2,h3,.serif{font-weight:650;letter-spacing:-.015em}
h1 em,h2 em,h3 em{font-weight:650}
.f-el .sym,.stat-num,.cube .face,.price-card .val,.avatar{font-weight:700;letter-spacing:-.02em}

/* ---------- v0.2: Bild-Platzhalter ---------- */
.ph{position:relative;border:2px dashed color-mix(in srgb,var(--brass) 45%,transparent);
  border-radius:var(--r);background:var(--brass-soft);display:grid;place-items:center;
  overflow:hidden;min-height:240px}
.ph figcaption{text-align:center;color:var(--muted);font-size:.85rem;padding:20px;max-width:260px}
.ph figcaption b{display:block;font-size:2rem;margin-bottom:8px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.round{border-radius:50%;width:170px;height:170px;min-height:0}
.ph.round figcaption{font-size:.72rem;padding:10px}
.ph.round figcaption b{font-size:1.4rem;margin-bottom:2px}

/* ---------- v0.2: Erlebnis-Dreiklang ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar{border-top:4px solid var(--pc,var(--brass));cursor:default}
.pillar .label{color:var(--pc,var(--brass));margin-bottom:10px}
.pillar.mensch{--pc:var(--warm)}
.pillar.wissen{--pc:var(--green)}
.pillar.vertrauen{--pc:var(--brass)}
.pillar:hover{box-shadow:0 14px 40px color-mix(in srgb,var(--pc) 22%,transparent)}
.pillar .big{font-size:2rem;margin-bottom:10px}

/* ============ v0.3: Mehr Leben ============ */
/* Sanft wandernde Farb-Blobs im Hintergrund (reines CSS) */
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.55}
.blobs i{position:absolute;width:44vmax;height:44vmax;border-radius:50%;filter:blur(90px)}
.blobs i:nth-child(1){background:var(--brass-soft);top:-18vmax;left:-10vmax;animation:drift1 26s ease-in-out infinite alternate}
.blobs i:nth-child(2){background:color-mix(in srgb,var(--green) 10%,transparent);bottom:-20vmax;right:-12vmax;animation:drift2 32s ease-in-out infinite alternate}
.blobs i:nth-child(3){background:color-mix(in srgb,var(--blue) 8%,transparent);top:40%;left:55%;animation:drift1 38s 4s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vmax,6vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-8vmax,-7vmax) scale(.9)}}

/* Glanz-Lauf über Primär-Buttons */
.btn.p{position:relative;overflow:hidden}
.btn.p::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-70%}75%,100%{left:130%}}

/* Schwebende Emojis in den Säulen */
.pillar .icf.big{animation:floaty 4s ease-in-out infinite}
.pillar.wissen .icf.big{animation-delay:1.3s}
.pillar.vertrauen .icf.big{animation-delay:2.6s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(3deg)}}

/* Praxis-Ablauf (Arzt-Metapher) */
.praxis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;counter-reset:pr}
@media(max-width:820px){.praxis{grid-template-columns:1fr}}
.praxis .card{position:relative;padding-top:56px;counter-increment:pr}
.praxis .card::before{content:counter(pr,decimal-leading-zero);position:absolute;top:18px;left:26px;
  font-weight:700;font-size:.85rem;letter-spacing:.14em;color:var(--brass);
  border:1px solid var(--brass);border-radius:100px;padding:3px 12px}
.praxis .card:hover::before{background:var(--brass);color:var(--bg);transition:.3s}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
@media(max-width:760px){.blog-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;gap:10px;cursor:pointer}
.post-meta{display:flex;gap:12px;font-size:.78rem;color:var(--faint);flex-wrap:wrap;align-items:center}
.post-cat{border:1px solid var(--brass);color:var(--brass);border-radius:100px;padding:2px 12px;font-weight:600}
.post-body{display:none;color:var(--muted);font-size:.95rem}
.post-card.open .post-body{display:block;animation:stepIn .35s ease}
.post-card.open .post-teaser{display:none}
.post-body p{margin-bottom:12px}
.filter-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* ============ v0.4: Wow-Einstieg, Flat-Icons, Logo-Schwarz ============ */
/* CTA-Buttons in Logo-Schwarz (invertiert automatisch im Darkmode) */
.btn.p{background:var(--ink);color:var(--bg)}
.btn.p::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent)}
.navlinks a.book{background:var(--ink);color:var(--bg)}

/* Flat-Icons: Kachel + gefüllte Form */
.icf{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--c,var(--brass)) 14%,transparent);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.icf svg{width:30px;height:30px;fill:var(--c,var(--brass))}
.card:hover .icf{transform:scale(1.12) rotate(-6deg)}

/* Wow-Hero: Dialog-Einstieg */
.hero2{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;padding:120px 0 60px}
.mega{position:absolute;top:50%;left:0;transform:translateY(-50%);white-space:nowrap;
  font-weight:700;font-size:clamp(6rem,22vw,16rem);letter-spacing:-.03em;opacity:.06;
  color:var(--ink);pointer-events:none;animation:megaScroll 40s linear infinite;z-index:0}
@keyframes megaScroll{to{transform:translate(-50%,-50%)}}
.hero2 .inner{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto;padding:0 24px}
.chat{display:flex;flex-direction:column;gap:14px;max-width:440px;margin:0 auto 40px;text-align:left}
.bubble{padding:14px 22px;border-radius:22px;font-size:1.02rem;line-height:1.5;opacity:0;
  transform:translateY(14px) scale(.92);animation:bubbleIn .55s cubic-bezier(.3,1.4,.5,1) forwards;
  box-shadow:var(--shadow);max-width:85%}
.bubble.left{background:var(--panel);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:6px}
.bubble.right{background:var(--ink);color:var(--bg);align-self:flex-end;border-bottom-right-radius:6px}
.bubble.b1{animation-delay:.3s}
.bubble.b2{animation-delay:1.15s}
.bubble.b3{animation-delay:2s;background:var(--brass-soft);border:1px solid color-mix(in srgb,var(--brass) 35%,transparent);align-self:center;font-size:1.5rem;padding:10px 18px}
@keyframes bubbleIn{to{opacity:1;transform:none}}
.hero2 h1,.hero2 .lead,.hero2 .cta-row,.hero2 .trust-line{opacity:0;animation:riseIn .8s ease forwards}
.hero2 h1{animation-delay:2.5s}
.hero2 .lead{animation-delay:2.75s;margin:18px auto 0}
.hero2 .cta-row{animation-delay:3s;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.hero2 .trust-line{animation-delay:3.25s;justify-content:center;border-top:0;padding-top:0}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--faint);
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:riseIn 1s 3.6s ease forwards}
.scroll-hint::after{content:"↓";display:block;text-align:center;font-size:1.2rem;animation:bounceY 1.6s ease-in-out infinite}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.bubble,.hero2 h1,.hero2 .lead,.hero2 .cta-row,.hero2 .trust-line,.scroll-hint{opacity:1;animation:none;transform:none}}

/* v0.5: kleine Farb-Momente im Monochrom */
.u path{stroke:var(--warm)}
.blobs i:nth-child(1){background:color-mix(in srgb,var(--warm) 9%,transparent)}
.bubble.b3{background:color-mix(in srgb,var(--warm) 12%,transparent);border-color:color-mix(in srgb,var(--warm) 35%,transparent)}
.scroll-hint::after{color:var(--warm)}
.price-card .tag{background:var(--ink);color:var(--bg)}
.price-card.hero-p{background:linear-gradient(160deg,color-mix(in srgb,var(--warm) 8%,transparent),var(--panel));border-color:color-mix(in srgb,var(--warm) 40%,transparent)}

/* Preis-Konfigurator-Widget */
.konf{background:var(--panel);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.konf-head{padding:34px clamp(24px,5vw,50px) 0}
.konf-step{display:none;padding:30px clamp(24px,5vw,50px) 44px;animation:stepIn .4s ease}
.konf-step.on{display:block}
.konf-step h3{margin-bottom:22px;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.konf-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.konf-opts{grid-template-columns:1fr}}
.konf-opt{display:flex;gap:14px;align-items:center;text-align:left;background:var(--bg);
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;cursor:pointer;
  font:inherit;color:var(--ink);font-size:.95rem;transition:.25s}
.konf-opt:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.konf-opt .ic{font-size:1.5rem}
.konf-opt small{display:block;color:var(--faint);font-size:.8rem}
.konf-result{text-align:center;padding:44px clamp(24px,5vw,50px) 50px;display:none;animation:stepIn .45s ease}
.konf-result.on{display:block}
.konf-back{background:none;border:0;color:var(--faint);cursor:pointer;font:inherit;font-size:.85rem;text-decoration:underline;text-underline-offset:3px;margin-top:18px}
#konfIcon{font-size:1.9rem;line-height:1}

/* v0.7: Ehrlich-Vertrag */
.v-item{display:flex;gap:14px;align-items:flex-start;padding:16px 6px;border-bottom:1px dashed var(--line);cursor:pointer;transition:background .25s;border-radius:10px}
.v-item:hover{background:var(--brass-soft)}
.v-item input{width:20px;height:20px;margin-top:3px;accent-color:var(--warm);flex-shrink:0;cursor:pointer}
.v-item span{font-size:.95rem;color:var(--muted)}
.v-item span b{color:var(--ink);display:block;margin-bottom:2px}
.v-item:has(input:checked){background:color-mix(in srgb,var(--green) 7%,transparent)}
.v-item:has(input:checked) span b::after{content:" ✓";color:var(--green)}

/* v0.8.1: Spielerischer Finder */
.mb-ava{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--ink);color:var(--bg);font-weight:700;font-size:1.3rem;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.k-bubble{background:var(--panel2);border:1px solid var(--line);border-radius:20px;border-top-left-radius:6px;
  padding:16px 22px;max-width:520px;margin:0 auto 24px;font-size:1.02rem;color:var(--ink);
  animation:bubbleIn .5s cubic-bezier(.3,1.4,.5,1)}
.konf-step[data-k="9"] .k-bubble{border-top-left-radius:20px;border-bottom-right-radius:6px;background:var(--brass-soft)}
.konf-opt:hover .ic{display:inline-block;animation:wiggle .5s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.25)}75%{transform:rotate(10deg) scale(1.15)}}

/* ============ v0.9: Magische Formel ============ */
.formel{gap:clamp(10px,2.2vw,22px);perspective:700px}
.f-el{--fc:var(--brass);position:relative;min-width:138px;padding:28px 30px 24px;border-radius:22px;
  overflow:visible;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.3,1.4,.5,1),border-color .3s,box-shadow .3s}
.f-el .sym{font-size:2.6rem;transition:transform .35s cubic-bezier(.3,1.6,.5,1);display:inline-block;color:var(--fc)}
.f-el:hover,.f-el:focus-visible{transform:translateY(-10px) rotateX(8deg) scale(1.04);border-color:var(--fc);
  box-shadow:0 18px 44px color-mix(in srgb,var(--fc) 25%,transparent)}
.f-el:hover .sym{transform:scale(1.25) rotate(-6deg)}
/* Magische Aura: rotierender Lichtring bei aktiv */
.f-el::before{content:"";position:absolute;inset:-3px;border-radius:25px;padding:3px;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--fc) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.f-el.on::before{opacity:1;animation:aura 2.2s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes aura{to{--ang:360deg}}
/* Schockwelle beim Antippen */
.f-el .wave{position:absolute;inset:0;border-radius:22px;border:2px solid var(--fc);opacity:0;pointer-events:none}
.f-el.zap .wave{animation:wave .6s ease-out}
@keyframes wave{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
/* Erledigt-Punkt */
.f-el.done::after{content:"✓";position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;
  background:var(--green);color:#fff;font-size:.8rem;display:grid;place-items:center;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
/* Funken */
.spark{position:absolute;left:50%;top:40%;font-size:1rem;color:var(--fc);pointer-events:none;
  animation:sparkfly .75s ease-out forwards}
@keyframes sparkfly{0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.3) rotate(160deg)}}
/* W lädt sich auf */
.w-charge{position:absolute;left:14px;right:14px;bottom:10px;height:5px;border-radius:5px;background:var(--line);overflow:hidden}
.w-charge::after{content:"";display:block;height:100%;width:calc(var(--p,0)*1%);border-radius:5px;
  background:linear-gradient(90deg,var(--warm),var(--green),var(--blue));transition:width .5s ease}
.f-result.charged{background:linear-gradient(120deg,color-mix(in srgb,var(--warm) 18%,var(--panel)),color-mix(in srgb,var(--blue) 14%,var(--panel)),color-mix(in srgb,var(--green) 18%,var(--panel)));
  background-size:250% 250%;border-color:var(--warm);animation:charged 3s ease infinite}
.f-result.charged .sym{animation:floaty 2.2s ease-in-out infinite}
@keyframes charged{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* v0.10: Symbiose Mensch ⇄ KI */
.f-group{position:relative;display:flex;align-items:center;gap:clamp(6px,1.4vw,14px);
  border:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);border-radius:28px;
  padding:20px 16px 14px;margin-top:10px}
.f-group-label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--bg);padding:0 12px;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.f-sym{font-size:1.7rem;color:var(--green);animation:symswap 2.4s ease-in-out infinite;display:inline-block}
@keyframes symswap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.f-group .f-el{min-width:112px;padding:22px 20px 20px}
.f-group .f-el[data-f="k"] .sym{font-size:2rem;letter-spacing:-.03em}

/* ============ v0.11: Flip-Spiel „Der große Unterschied" + Marker + Stagger ============ */
.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;perspective:1200px}
@media(max-width:860px){.flip-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flip-grid{grid-template-columns:1fr}}
.flip{background:none;border:0;padding:0;cursor:pointer;min-height:220px;font:inherit;color:inherit;text-align:left}
.flip-inner{position:relative;display:block;width:100%;height:100%;min-height:220px;
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.2,.4,1)}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip:hover:not(.flipped) .flip-inner{transform:rotateY(14deg) translateY(-5px)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;
  padding:26px 24px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.flip-front{background:repeating-linear-gradient(-45deg,var(--panel2),var(--panel2) 14px,var(--panel) 14px,var(--panel) 28px);
  border:2px solid var(--line);font-weight:700;font-size:1.15rem;line-height:1.35;
  transform:rotate(-.8deg);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.flip:nth-child(even) .flip-front{transform:rotate(.9deg)}
.flip-front i{font-style:normal;font-size:.62rem;letter-spacing:.25em;color:var(--faint);
  border:1px solid var(--line);border-radius:4px;padding:2px 8px;align-self:flex-start;font-weight:500}
.flip-back{background:var(--ink);color:var(--bg);transform:rotateY(180deg);font-size:.92rem;line-height:1.55}
.flip-back b{display:inline-block;align-self:flex-start;color:var(--warm);border:2px solid var(--warm);
  border-radius:6px;padding:2px 12px;font-size:.9rem;letter-spacing:.12em;transform:rotate(-6deg);
  margin-bottom:6px;animation:stamp .45s .35s cubic-bezier(.3,1.8,.5,1) backwards}
@keyframes stamp{from{transform:rotate(-6deg) scale(2.4);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}

/* Marker-Highlight für Kernaussagen */
.hl{background:linear-gradient(105deg,color-mix(in srgb,var(--warm) 35%,transparent),color-mix(in srgb,var(--warm) 22%,transparent));
  background-repeat:no-repeat;background-size:0% 88%;background-position:0 60%;
  border-radius:4px;padding:0 3px;transition:background-size .9s cubic-bezier(.3,.9,.3,1)}
.hl.in,.rv.in .hl{background-size:100% 88%}
@supports (animation-timeline: view()){
  .hl{animation:hlgrow both;animation-timeline:view();animation-range:entry 10% entry 60%}
  @keyframes hlgrow{from{background-size:0% 88%}to{background-size:100% 88%}}
}
/* Gestaffeltes Erscheinen in Rastern */
.g3 .rv:nth-child(2),.g4 .rv:nth-child(2),.pillars .rv:nth-child(2),.praxis .rv:nth-child(2){animation-delay:.12s;transition-delay:.12s}
.g3 .rv:nth-child(3),.g4 .rv:nth-child(3),.pillars .rv:nth-child(3),.praxis .rv:nth-child(3){animation-delay:.24s;transition-delay:.24s}
.g4 .rv:nth-child(4){animation-delay:.36s;transition-delay:.36s}

/* v0.12: MwSt-Schalter, Warum-Zeilen, Transparenz-Box */
.vat-switch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
.vat-switch .chip small{display:block;font-size:.68rem;font-weight:400;opacity:.75}
.vat-switch .chip{text-align:left;line-height:1.25;padding:9px 18px}
.k-why{margin-top:18px;font-size:.82rem;color:var(--faint);text-align:center}
.k-why button{background:none;border:0;color:var(--faint);cursor:pointer;font:inherit;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;padding:0}
.k-why button:hover{color:var(--brass)}
.k-why span{display:block;max-width:480px;margin:10px auto 0;color:var(--muted);
  background:var(--brass-soft);border-radius:10px;padding:10px 16px;animation:stepIn .3s ease}
.k-trans{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px 20px}
.k-trans summary{padding:4px 0;font-family:'Barlow';font-weight:600;font-size:.95rem}