/* ============================================================
   DeenDigitalMedia — Website-Kostenrechner · „Aurora Glass“
   Basis (Tokens, Nav, Buttons, Footer) 1:1 wie Referenzen/Startseite
   ============================================================ */
:root{
  --bg:#04060A; --bg-soft:#070A12; --panel:#080C14;
  --cyan:#04F5FF; --cyan-2:#6CFCFF; --blue:#1863DC; --blue-2:#2E8BFF;
  --white:#F2F8FF; --text:#9DB0C4; --text-2:#C6D4E4; --dim:#5C6B7E;
  --stroke:rgba(255,255,255,.08); --stroke-2:rgba(255,255,255,.14);
  --stroke-cy:rgba(4,245,255,.28);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.08);
  --grad:linear-gradient(135deg,#6CFCFF 0%,#04F5FF 42%,#1863DC 100%);
  --glow-cy:0 0 13px rgba(4,245,255,.28);
  --f-head:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --maxw:1440px; --pad:clamp(1rem,2.2vw,1.9rem);
  --r:22px; --r-lg:30px;
  --e:cubic-bezier(.22,.7,.25,1); --e-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:92px}
html.js{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html.js{scroll-behavior:auto}}
body,body.ddmr{
  margin:0; background:var(--bg)!important; color:var(--text);
  font-family:var(--f-body); font-size:clamp(1rem,.97rem + .2vw,1.12rem);
  line-height:1.6; letter-spacing:.005em; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
a:hover,a:active{color:inherit}
p{margin:0 0 1rem}
figure{margin:0}
::selection{background:var(--cyan);color:#03121a}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
strong{color:var(--white);font-weight:600}
[hidden]{display:none!important}

/* Buttons neutralisieren (Themes färben button:hover gern ein) */
.ddmr button,body button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}

/* ---------- AURORA / GRID / NOISE ---------- */
.aurora{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(60px);mix-blend-mode:screen}
.aurora .b1{width:60vw;height:60vw;left:-10vw;top:-18vw;background:radial-gradient(circle,#04f5ff,transparent 65%);opacity:.3;animation:drift1 22s ease-in-out infinite}
.aurora .b2{width:55vw;height:55vw;right:-14vw;top:2vw;background:radial-gradient(circle,#1863dc,transparent 65%);opacity:.36;animation:drift2 26s ease-in-out infinite}
.aurora .b3{width:50vw;height:50vw;left:24vw;bottom:-22vw;background:radial-gradient(circle,#04f5ff,transparent 60%);opacity:.16;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(14vw,10vh) scale(1.15)}}
@keyframes drift2{50%{transform:translate(-12vw,8vh) scale(1.1)}}
@keyframes drift3{50%{transform:translate(8vw,-10vh) scale(1.18)}}
.grid-lines{position:fixed;inset:-2px;z-index:-3;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(110,205,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(110,205,255,.10) 1px,transparent 1px);
  background-size:62px 62px;-webkit-mask-image:radial-gradient(circle at 50% 12%,#000,transparent 92%);mask-image:radial-gradient(circle at 50% 12%,#000,transparent 92%);animation:gridDrift 45s linear infinite}
@keyframes gridDrift{to{background-position:62px 62px,62px 62px}}
.noise{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6}

.cursor{position:fixed;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px 5px rgba(4,245,255,.55);pointer-events:none;z-index:9999;mix-blend-mode:screen;transition:width .25s,height .25s,opacity .25s,background .25s;opacity:0}
.cursor.big{width:54px;height:54px;background:rgba(4,245,255,.14);box-shadow:0 0 28px 6px rgba(4,245,255,.2)}
.cursor.drag{width:74px;height:74px;background:rgba(4,245,255,.1)}
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:9500;background:var(--grad);box-shadow:0 0 10px rgba(4,245,255,.7)}
.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--cyan);color:#03121a;padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- PRELOADER ---------- */
.pre{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:var(--bg);animation:preOut .7s var(--e) 1.6s forwards}
.pre.done{animation:preOut .6s var(--e) forwards}
@keyframes preOut{to{opacity:0;visibility:hidden}}
.pre img{width:72px;filter:drop-shadow(0 0 24px rgba(4,245,255,.7));animation:pp 1.3s ease-in-out infinite}
@keyframes pp{50%{transform:scale(1.1);opacity:.8}}

/* ---------- NAV ---------- */
.nav{position:fixed;top:clamp(.8rem,2vw,1.5rem);left:50%;transform:translateX(-50%);z-index:200;width:min(1100px,calc(100vw - 1.4rem));transition:transform .5s var(--e-out),opacity .4s var(--e)}
.nav.hidden{transform:translateX(-50%) translateY(-160%);opacity:0}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .65rem .55rem 1.1rem;border-radius:999px;background:rgba(8,12,20,.55);backdrop-filter:blur(13px) saturate(135%);-webkit-backdrop-filter:blur(13px) saturate(135%);border:1px solid var(--stroke-2);box-shadow:0 18px 50px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1)}
.nav__brand img{height:26px;width:auto;filter:drop-shadow(0 0 8px rgba(4,245,255,.4))}
.nav__links{display:flex;gap:.4rem}
.nav__links a{font-family:var(--f-head);font-weight:500;font-size:.9rem;color:var(--text-2);padding:.5rem .9rem;border-radius:999px;transition:color .25s,background .25s}
.nav__links a:hover,.nav__links a.on{color:var(--white);background:rgba(255,255,255,.06)}
.nav__cta{display:flex;align-items:center;gap:.5rem}
.nav__back{font-family:var(--f-head);font-weight:500;font-size:.86rem;color:var(--dim);padding:.5rem .7rem;transition:color .25s}
.nav__back:hover{color:var(--cyan)}
.ddmr .nav__burger,.nav__burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--stroke-2)!important;background:rgba(255,255,255,.05)!important;cursor:pointer;padding:0;place-items:center}
.nav__burger span{display:block;width:18px;height:2px;margin:3px auto;background:var(--white);transition:.3s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:190;background:rgba(4,6,10,.96);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:var(--pad);transform:translateY(-100%);transition:transform .55s var(--e-out)}
.sheet.open{transform:none}
.sheet nav{display:flex;flex-direction:column}
.sheet a:not(.btn){font-family:var(--f-head);font-weight:700;font-size:clamp(1.8rem,9vw,2.6rem);color:var(--white);padding:.55rem 0;border-bottom:1px solid var(--stroke);display:flex;align-items:baseline;gap:1rem}
.sheet a i{font-size:.85rem;color:var(--cyan);font-style:normal;font-family:var(--f-body)}
.sheet .btn{margin-top:1.4rem;justify-content:center}
@media(max-width:900px){.nav__links,.nav__back{display:none}.ddmr .nav__burger,.nav__burger{display:grid}}

/* ---------- BUTTONS ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:999px;font-family:var(--f-head);font-weight:600;font-size:.95rem;line-height:1.2;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-decoration:none;transition:transform .3s var(--e),box-shadow .3s,background .3s,color .3s,border-color .3s;will-change:transform}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ddmr .btn--primary,.btn--primary,.btn--primary:hover,.btn--primary:focus{background:var(--grad);color:#02121b;border-color:transparent;box-shadow:0 10px 30px -8px rgba(4,245,255,.55)}
.btn--primary:hover{box-shadow:0 16px 44px -8px rgba(4,245,255,.8)}
.btn--primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;opacity:.0;transition:opacity .3s}
.btn--primary:hover::before{opacity:1;animation:sheen .9s ease}
@keyframes sheen{from{background-position:120% 0}to{background-position:-20% 0}}
.ddmr .btn--ghost,.btn--ghost,.btn--ghost:focus{background:var(--glass);color:var(--white);border-color:var(--stroke-2);backdrop-filter:blur(10px)}
.ddmr .btn--ghost:hover,.btn--ghost:hover{border-color:var(--cyan);background:rgba(4,245,255,.08);color:var(--white)}
.btn--lg{padding:1.05rem 1.9rem;font-size:1.02rem}
.btn .arr{font-style:normal;transition:transform .3s var(--e)}
.btn:hover .arr{transform:translateX(5px)}
.ddmr .linkbtn,.linkbtn,.linkbtn:hover,.linkbtn:focus{background:none!important;border:0!important;padding:0;color:var(--white);cursor:pointer;border-bottom:1px solid var(--stroke-2)!important;border-radius:0;font-size:inherit}
.linkbtn:hover{border-bottom-color:var(--cyan)!important;color:var(--cyan)}

/* ---------- PRIMITIVES ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-head);font-weight:500;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan);margin:0}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px 2px rgba(4,245,255,.8)}
.num{font-family:var(--f-head);font-weight:600;font-size:.78rem;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--white);margin:0;letter-spacing:-.025em;line-height:1.04;font-weight:700}
.display{font-weight:600;letter-spacing:-.035em;line-height:1}
.h2{font-size:clamp(2.1rem,1.2rem + 4vw,4.6rem);font-weight:700}
.lead{font-size:clamp(1.05rem,1rem + .45vw,1.35rem);color:var(--text-2);line-height:1.6;font-weight:300}
.glow{color:var(--cyan);text-shadow:0 0 15px rgba(4,245,255,.3)}
.acc{font-family:var(--f-head);font-style:italic;font-weight:600;color:var(--cyan);letter-spacing:-.01em;text-shadow:0 0 13px rgba(4,245,255,.25)}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid var(--stroke);border-radius:var(--r)}
.glass-hover{position:relative;overflow:hidden;transition:border-color .4s,transform .35s var(--e)}
.glass-hover::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;left:var(--mx,50%);top:var(--my,0%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(4,245,255,.08),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.glass-hover:hover{border-color:var(--stroke-cy)}
.glass-hover:hover::after{opacity:1}
.section{padding-block:clamp(3.4rem,6.5vw,6rem);position:relative}
.shead{max-width:64ch;margin-bottom:clamp(1.7rem,3.4vw,2.7rem)}
.shead--c{margin-inline:auto;text-align:center}
.shead__top{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.shead--c .shead__top{justify-content:center}
.shead .lead{margin:1.3rem 0 0;max-width:58ch}
.shead--c .lead{margin-inline:auto}
.note{margin-top:1.6rem;font-size:.84rem;color:var(--dim);border-left:2px solid var(--cyan);padding-left:.9rem;max-width:60ch}

/* ---------- REVEALS ---------- */
.js [data-reveal]{opacity:0;filter:blur(10px);will-change:opacity,transform,filter;transition:opacity 1s var(--e-out),transform 1.05s var(--e-out),filter 1s var(--e-out)}
.js [data-reveal="up"]{transform:translateY(34px)}
.js [data-reveal="scale"]{transform:scale(.95)}
.js [data-reveal].in{opacity:1;filter:none;transform:none;will-change:auto}
.js [data-hero]{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out),filter 1s var(--e-out)}
.js .loaded [data-hero],.js body.loaded [data-hero]{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal],.js [data-hero]{opacity:1!important;transform:none!important;filter:none!important}}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center;padding:clamp(2.6rem,7vw,6rem) clamp(1.2rem,4vw,4rem);border-radius:var(--r-lg)}
.cta__glow{position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0%,rgba(4,245,255,.22),transparent 60%);pointer-events:none}
.cta>*{position:relative}
.cta h2{margin-top:1rem;font-size:clamp(2.2rem,1.3rem + 4.4vw,4.8rem);font-weight:800;letter-spacing:-.04em}
.cta .lead{max-width:50ch;margin:1.2rem auto 0}
.cta__row{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta__meta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.7rem;justify-content:center;align-items:center;color:var(--dim);font-size:.92rem}
.cta__meta a{color:var(--white);border-bottom:1px solid var(--stroke-2);transition:border-color .3s,color .3s}
.cta__meta a:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--stroke);padding-block:clamp(3rem,5vw,4.5rem) 2rem;margin-top:clamp(2rem,5vw,4rem)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:2.2rem 1.4rem}
@media(min-width:760px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer__brand img{height:48px;width:auto;margin-bottom:1rem}
.footer__brand p{margin:0 0 .6rem;color:var(--dim);max-width:34ch;font-size:.92rem}
.footer__social a{color:var(--text);transition:color .25s}
.footer__social a:hover{color:var(--cyan)}
.footer h4{font-family:var(--f-head);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 1rem;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.footer li,.footer ul a{color:var(--text);font-size:.93rem;transition:color .25s}
.footer ul a:hover{color:var(--cyan)}
.footer__bot{margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.5rem;border-top:1px solid var(--stroke);display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;color:var(--dim);font-size:.84rem}
.footer__bot .tg{color:var(--cyan)}

/* ---------- FAB ---------- */
.ddm-fab{position:fixed;right:clamp(.7rem,1.6vw,1.3rem);bottom:1.3rem;z-index:185;display:flex;flex-direction:column;gap:.9rem}
.ddm-fab a{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(8,12,20,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--stroke-cy);box-shadow:0 12px 30px -12px rgba(0,0,0,.85);transition:transform .35s var(--e),box-shadow .35s,background .35s}
.ddm-fab a:hover{transform:translateY(-3px) scale(1.07);background:var(--grad);box-shadow:0 0 26px -2px rgba(4,245,255,.85)}
.ddm-fab svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.ddm-fab a:hover svg{stroke:#04141d}
@media(max-width:560px){.ddm-fab a{width:44px;height:44px}.ddm-fab{gap:.6rem}}

/* ---------- TOAST ---------- */
.toast{position:fixed;left:50%;bottom:1.6rem;z-index:9600;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:.8rem 1.3rem;border-radius:999px;background:rgba(8,12,20,.92);border:1px solid var(--stroke-cy);color:var(--white);font-family:var(--f-head);font-weight:600;font-size:.9rem;box-shadow:0 18px 50px -12px rgba(0,0,0,.9),0 0 24px -8px rgba(4,245,255,.6);transition:opacity .35s,transform .45s var(--e-out)}
.toast.on{opacity:1;transform:translate(-50%,0)}
body.in-calc .toast{bottom:6.4rem}

/* =====================================================================
   WEBSITE-KOSTENRECHNER
   ===================================================================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ddmr button{cursor:pointer}
.ddmr button:disabled{cursor:not-allowed;opacity:.35}
svg[aria-hidden]{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- HERO ---------- */
.khero{position:relative;padding:clamp(7rem,15vh,9.5rem) 0 clamp(1.5rem,3vw,2.5rem);overflow:hidden}
.khero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 75% 25%,rgba(24,99,220,.2),transparent 65%),radial-gradient(40% 45% at 15% 5%,rgba(4,245,255,.12),transparent 60%)}
.khero__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:1000px){.khero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.khero__for{display:flex;width:fit-content;align-items:center;gap:.5rem;margin:1.1rem 0 0;padding:.45rem 1rem .45rem .8rem;border-radius:999px;border:1px solid var(--stroke-cy);background:rgba(4,245,255,.07);color:var(--text-2);font-size:.92rem}
.khero__for b{color:var(--white)}
.khero__spark{color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.khero__title{margin:1.2rem 0 0;font-size:clamp(2.6rem,1.2rem + 5.4vw,5.6rem)}
.khero__sub{display:block;margin-top:.9rem;font-size:.42em;font-weight:600;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.khero__lead{margin:1.4rem 0 0;max-width:50ch}
.khero__proof{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.khero__proof li{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--text)}
.khero__proof svg{width:20px;height:20px;color:var(--cyan);flex:none}
.khero__start{padding:clamp(1.2rem,2.4vw,1.8rem);border-radius:var(--r-lg);position:relative}
.khero__start::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(4,245,255,.6),rgba(24,99,220,.2) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.khero__q{font-family:var(--f-head);font-weight:700;color:var(--white);font-size:1.15rem;margin:0 0 1rem}
.qs{display:flex;flex-direction:column;gap:.6rem}
.ddmr .qs__b,.qs__b{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;padding:.85rem 1rem;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--stroke);color:var(--text);transition:border-color .3s,background .3s,transform .3s var(--e)}
.qs__b:hover{border-color:var(--stroke-cy);background:rgba(4,245,255,.06);transform:translateX(3px)}
.qs__b>svg{width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(4,245,255,.08);color:var(--cyan);flex:none}
.qs__b span{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}
.qs__b b{font-family:var(--f-head);font-weight:600;color:var(--white);font-size:.98rem;line-height:1.3}
.qs__b small{font-size:.82rem;color:var(--dim);line-height:1.35}
.qs__b .arr{font-style:normal;color:var(--cyan);transition:transform .3s var(--e)}
.qs__b:hover .arr{transform:translateX(4px)}
.khero__or{margin:1rem 0 0;font-size:.88rem;color:var(--dim);text-align:center}

/* ---------- LAYOUT ---------- */
.calc-sec{padding-top:clamp(1.5rem,3vw,2.5rem)}
.calc{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.6vw,2.6rem);align-items:start}
.calc__main{min-width:0;position:relative}
@media(min-width:1100px){.calc{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}.calc__side{position:sticky;top:84px}}

/* Schritte oben */
.steps{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;padding:.3rem;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--stroke)}
.steps::-webkit-scrollbar{display:none}
.ddmr .st,.st{display:flex;align-items:center;gap:.5rem;flex:none;padding:.42rem .85rem .42rem .45rem;border-radius:999px;border:1px solid transparent;background:none;color:var(--dim);font-family:var(--f-head);font-size:.84rem;font-weight:500;white-space:nowrap;transition:color .25s,background .25s,border-color .25s}
.st i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.75rem;font-weight:700;border:1px solid var(--stroke-2);color:var(--text)}
.st i svg{width:14px;height:14px;stroke-width:2.6}
.st:hover{color:var(--white)}
.st.on{color:var(--white);background:rgba(4,245,255,.08);border-color:var(--stroke-cy)}
.st.on i{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-cy)}
.st.done i{background:var(--grad);border-color:transparent;color:#03121a}
.st span{display:none}.st.on span{display:inline}
@media(min-width:1320px){.st span{display:inline}}
@media(max-width:1099px) and (min-width:720px){.st span{display:inline}}

/* Schritt-Inhalt */
.pane{padding-top:clamp(1.4rem,2.6vw,2.2rem)}
.pane--in{animation:paneIn .55s var(--e-out)}
@keyframes paneIn{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){.pane--in{animation:none}}
.pane__h h2{margin-top:.7rem;font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);letter-spacing:-.035em}
.pane__h .lead{margin:.8rem 0 0;font-size:1rem;max-width:58ch}
.q{margin-top:clamp(1.6rem,2.8vw,2.3rem)}
.q__h{display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem}
.q__n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(4,245,255,.1);border:1px solid rgba(4,245,255,.35);color:var(--cyan);font-family:var(--f-head);font-size:.78rem;font-weight:700}
.q__h h3{margin:0;font-size:1.08rem;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.q__s{margin:-.45rem 0 .9rem;font-size:.84rem;color:var(--dim)}
.sp{height:.8rem}
.nexthint{display:flex;align-items:center;gap:.6rem;margin:clamp(1.8rem,3vw,2.4rem) 0 0;padding:.85rem 1rem;border-radius:14px;border:1px dashed rgba(4,245,255,.3);font-size:.9rem;color:var(--text-2)}
.nexthint svg{width:20px;height:20px;flex:none;color:var(--cyan)}
.nexthint b{color:var(--white)}

/* Hinweis-Banner */
.banner{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .9rem;margin-top:1.3rem;padding:.9rem 1.05rem;border-radius:16px;border:1px solid rgba(4,245,255,.35);background:radial-gradient(120% 160% at 0 0,rgba(4,245,255,.14),transparent 60%),rgba(255,255,255,.02);font-size:.9rem;color:var(--text-2);animation:paneIn .5s var(--e-out)}
.banner>svg{width:22px;height:22px;flex:none;color:var(--cyan)}
.banner span{flex:1 1 220px}
.banner b{color:var(--white)}

/* Große Auswahlkarten */
.cc{display:grid;gap:.65rem;grid-template-columns:1fr}
@media(min-width:360px){.cc--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:520px){.cc--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:519px){.ccb{padding:.9rem .85rem .85rem}.ccb__ic{width:36px;height:36px;border-radius:11px}.ccb__t{font-size:.94rem}.ccb__d{font-size:.78rem}.ccb__g{font-size:.72rem}}
.ddmr .ccb,.ccb{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.28rem;width:100%;text-align:left;padding:1.05rem 1.1rem 1rem;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border:1px solid var(--stroke);color:var(--text);transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--e)}
.ccb:hover{border-color:var(--stroke-2);transform:translateY(-2px)}
.ccb.on{border-color:rgba(4,245,255,.6);background:linear-gradient(180deg,rgba(4,245,255,.1),rgba(4,245,255,.02));box-shadow:0 0 0 1px rgba(4,245,255,.18),0 16px 44px -20px rgba(4,245,255,.55)}
.ccb__ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--text-2);margin-bottom:.35rem;transition:background .3s,color .3s}
.ccb__ic svg{width:22px;height:22px}
.ccb.on .ccb__ic{background:var(--grad);color:#03121a}
.ccb__th{display:block;width:100%;margin-bottom:.55rem}
.ccb__t{font-family:var(--f-head);font-weight:650;color:var(--white);font-size:1rem;line-height:1.25;padding-right:1.7rem}
.ccb__d{font-size:.84rem;line-height:1.45}
.ccb__g{display:flex;align-items:center;gap:.45rem;margin-top:.2rem;font-size:.78rem;color:var(--text-2)}
.ccb__p{margin-top:auto;padding-top:.5rem;font-family:var(--f-head);font-weight:650;font-size:.88rem;color:var(--white)}
.ccb__chk{position:absolute;top:.9rem;right:.9rem;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--stroke-2);display:grid;place-items:center;color:transparent;transition:background .25s,border-color .25s,color .25s}
.ccb__chk svg{width:13px;height:13px;stroke-width:3}
.ccb.on .ccb__chk{background:var(--grad);border-color:transparent;color:#03121a}
.ccb .tag--rec{position:absolute;top:-.6rem;left:1rem;background:#062a33}
.dots{display:inline-block;width:32px;height:6px;flex:none;border-radius:2px;--n:0;background:linear-gradient(90deg,var(--cyan) 0 calc(var(--n) * 33.4%),rgba(255,255,255,.14) 0);-webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 11.5px);mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 11.5px)}
.dots[data-n="1"]{--n:1}.dots[data-n="2"]{--n:2}.dots[data-n="3"]{--n:3}

/* Design-Vorschaubilder */
.dt{--c:#1863DC;position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dt i{position:absolute;display:block;border-radius:3px}
.dt .h{left:8%;right:8%;top:9%;height:6%;background:#e8ebf0}
.dt .t1{left:8%;top:30%;width:40%;height:10%;background:#1b2330}
.dt .t2{left:8%;top:46%;width:32%;height:6%;background:#cfd5de}
.dt .b{left:8%;top:60%;width:18%;height:10%;border-radius:99px;background:var(--c)}
.dt .im{right:8%;top:25%;width:36%;height:52%;background:color-mix(in srgb,var(--c) 28%,#fff);border-radius:5px}
.dt--individuell{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,#fff),#fff)}
.dt--individuell .im{border-radius:46% 54% 42% 58%/52% 44% 56% 48%;background:color-mix(in srgb,var(--c) 50%,#fff)}
.dt--individuell .t2{background:color-mix(in srgb,var(--c) 35%,#fff)}
.dt--premium{background:radial-gradient(70% 90% at 85% 10%,color-mix(in srgb,var(--c) 70%,transparent),transparent 62%),linear-gradient(140deg,#0b1220,#05070c)}
.dt--premium .h{background:rgba(255,255,255,.14)}
.dt--premium .t1{background:#fff}
.dt--premium .t2{background:rgba(255,255,255,.35)}
.dt--premium .b{background:#fff}
.dt--premium .im{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 65%,#0b1220),color-mix(in srgb,var(--c) 25%,#0b1220));transform:perspective(90px) rotateY(-12deg);box-shadow:0 8px 18px -4px var(--c)}

/* Branchen-Kacheln */
.bt{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){.bt{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ddmr .btb,.btb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:92px;padding:.9rem .5rem .8rem;border-radius:18px;border:1px solid var(--stroke);background:rgba(255,255,255,.025);color:var(--text-2);font-family:var(--f-head);font-size:.84rem;font-weight:600;text-align:center;line-height:1.2;transition:border-color .25s,background .25s,color .25s,transform .25s var(--e)}
.btb svg{width:26px;height:26px;color:var(--dim);transition:color .25s}
.btb:hover{border-color:var(--stroke-2);color:var(--white);transform:translateY(-2px)}
.btb.on{border-color:rgba(4,245,255,.6);background:rgba(4,245,255,.1);color:var(--white);box-shadow:0 12px 30px -18px rgba(4,245,255,.7)}
.btb.on svg{color:var(--cyan)}

/* Mini-Auswahl */
.mn{display:flex;flex-wrap:wrap;gap:.45rem}
.ddmr .mnb,.mnb{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.12rem;flex:1 1 130px;min-width:0;padding:.72rem .9rem;border-radius:14px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.03);color:var(--text-2);text-align:left;transition:border-color .25s,background .25s}
.mnb:hover{border-color:var(--stroke-cy)}
.mnb__t{font-family:var(--f-head);font-weight:600;font-size:.92rem;color:var(--white);line-height:1.25}
.mnb__p{font-size:.78rem;color:var(--dim)}
.mnb.on{border-color:rgba(4,245,255,.65);background:rgba(4,245,255,.1);box-shadow:0 10px 26px -18px rgba(4,245,255,.8)}
.mnb.on .mnb__p{color:var(--cyan)}
.mnb__rec{position:absolute;top:.5rem;right:.55rem;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.mn__d{display:flex;gap:.5rem;align-items:flex-start;margin:.65rem 0 0;font-size:.84rem;color:var(--text);line-height:1.5}
.mn__d svg{width:16px;height:16px;flex:none;margin-top:.15rem;color:var(--cyan)}

/* Seiten */
.fixed{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:.8rem;padding:.7rem .95rem;border-radius:14px;border:1px dashed rgba(61,220,151,.28);background:rgba(61,220,151,.035);font-size:.84rem;color:var(--text-2)}
.fixed svg{width:16px;height:16px;flex:none;margin-top:.15rem;color:#3ddc97;stroke-width:2.6}
.pg{display:flex;flex-wrap:wrap;gap:.45rem}
.ddmr .pgb,.pgb{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .95rem;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.03);color:var(--text-2);font-family:var(--f-head);font-size:.9rem;font-weight:550;transition:border-color .25s,background .25s,color .25s}
.pgb svg{width:15px;height:15px;stroke-width:2.4;color:var(--dim)}
.pgb small{font-family:var(--f-body);font-size:.74rem;color:var(--dim);font-weight:500}
.pgb:hover{border-color:var(--stroke-cy);color:var(--white)}
.pgb.on{border-color:rgba(4,245,255,.6);background:rgba(4,245,255,.1);color:var(--white)}
.pgb.on svg{color:var(--cyan)}
.stps{display:grid;gap:.45rem;margin-top:.75rem}
.quota{display:flex;align-items:center;gap:.8rem;margin-top:.9rem;font-size:.86rem;color:var(--text)}
.quota__bar{flex:0 0 120px;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.quota__bar i{display:block;height:100%;background:var(--grad);transition:width .5s var(--e-out)}
.quota b{color:var(--white)}

/* Funktions-Kacheln */
.incl{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .85rem;margin-top:1.5rem;padding:.8rem 1rem;border-radius:14px;border:1px dashed rgba(61,220,151,.28);background:rgba(61,220,151,.035);font-size:.82rem;color:var(--text-2)}
.incl b{color:#3ddc97;font-weight:650}
.incl span{display:inline-flex;align-items:center;gap:.3rem}
.incl svg{width:13px;height:13px;color:#3ddc97;stroke-width:2.8}
.tls{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:620px){.tls{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tls--more{margin-top:.7rem;animation:paneIn .45s var(--e-out)}
.tl{position:relative;border-radius:16px;border:1px solid var(--stroke);background:rgba(255,255,255,.025);transition:border-color .25s,background .25s,box-shadow .25s}
.tl:hover{border-color:var(--stroke-2)}
.tl.on{border-color:rgba(4,245,255,.55);background:rgba(4,245,255,.075);box-shadow:0 12px 34px -20px rgba(4,245,255,.6)}
.ddmr .tl__b,.tl__b{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:.75rem;align-items:center;width:100%;padding:.78rem .9rem;background:none;border:0;border-radius:inherit;color:var(--text);text-align:left}
.tl__ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--text-2);transition:background .25s,color .25s}
.tl__ic svg{width:19px;height:19px}
.tl.on .tl__ic{background:var(--grad);color:#03121a}
.tl.on .tl__ic svg{stroke-width:2.8}
.tl__tx{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.tl__tx b{font-family:var(--f-head);font-weight:600;color:var(--white);font-size:.92rem;line-height:1.25}
.tl__tx small{font-size:.78rem;line-height:1.4;color:var(--dim)}
.tl__p{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;font-family:var(--f-head);font-weight:650;font-size:.86rem;color:var(--white);white-space:nowrap;text-align:right}
.tl__p small{font-family:var(--f-body);font-weight:500;font-size:.7rem;color:var(--dim)}
.tl__p .inkl,.inkl{color:#3ddc97;font-weight:600}
.tl__g{font-style:normal;font-size:.64rem;font-weight:700;color:#3ddc97;background:rgba(61,220,151,.12);padding:.1rem .42rem;border-radius:999px}
.tl__rec{position:absolute;top:-.55rem;left:.85rem;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.03em;padding:.12rem .45rem;border-radius:999px;background:#062a33;color:var(--cyan);border:1px solid rgba(4,245,255,.35);pointer-events:none}
.ddmr .tl__i,.tl__i{position:absolute;top:-.55rem;right:.6rem;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;padding:0;background:#0b1018;border:1px solid var(--stroke-2);color:var(--dim);transition:color .25s,border-color .25s}
.tl__i svg{width:14px;height:14px}
.tl__i:hover,.tl__i[aria-expanded="true"]{color:var(--cyan);border-color:var(--stroke-cy)}
.tl__more{margin:0 .9rem .85rem;padding:.65rem .75rem;border-radius:10px;background:rgba(4,245,255,.05);border:1px solid rgba(4,245,255,.14);font-size:.8rem;line-height:1.5;color:var(--text-2);animation:paneIn .3s var(--e-out)}
.ddmr .more,.more{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.03);color:var(--text-2);font-family:var(--f-head);font-size:.86rem;font-weight:600;transition:border-color .25s,color .25s}
.more svg{width:15px;height:15px;stroke-width:2.4}
.more:hover{border-color:var(--cyan);color:var(--white)}

/* Schalter-Zeilen */
.tgs{display:flex;flex-direction:column;gap:.5rem}
.ddmr .tg,.tg{display:flex;align-items:center;gap:.85rem;width:100%;padding:.8rem .95rem;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.025);color:var(--text);text-align:left;transition:border-color .25s,background .25s}
.tg:hover{border-color:var(--stroke-2)}
.tg.on{border-color:rgba(4,245,255,.45);background:rgba(4,245,255,.06)}
.tg__sw{position:relative;width:40px;height:23px;flex:none;border-radius:999px;background:rgba(255,255,255,.12);transition:background .25s}
.tg__sw i{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .3s var(--e),background .25s}
.tg.on .tg__sw{background:var(--cyan)}
.tg.on .tg__sw i{transform:translateX(17px);background:#03121a}
.tg__tx{flex:1;display:flex;flex-direction:column;gap:.12rem;min-width:0}
.tg__tx b{font-family:var(--f-head);font-weight:600;color:var(--white);font-size:.92rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.tg__tx small{font-size:.78rem;color:var(--dim);line-height:1.4}
.tg__p{font-family:var(--f-head);font-weight:650;font-size:.86rem;color:var(--white);white-space:nowrap}

/* Google-Leiste */
.gl{display:flex;align-items:center;gap:1rem;margin-top:1.4rem;padding:.95rem 1.1rem;border-radius:18px;border:1px solid rgba(61,220,151,.25);background:radial-gradient(100% 160% at 0 50%,rgba(61,220,151,.1),transparent 60%)}
.gl__t b{display:block;font-family:var(--f-head);font-size:1.1rem;color:var(--white)}
.gl__t p{margin:.15rem 0 0;font-size:.86rem;color:var(--text-2)}

/* Dock (Weiter-Leiste) */
.dock{position:sticky;bottom:max(.8rem,env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:.55rem;margin-top:clamp(1.8rem,3vw,2.4rem);padding:.5rem;border-radius:20px;background:rgba(8,12,20,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--stroke-cy);box-shadow:0 20px 50px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.ddmr .dock__back,.dock__back{display:inline-flex;align-items:center;gap:.4rem;height:48px;padding:0 1rem;border-radius:14px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.04);color:var(--text-2);font-family:var(--f-head);font-weight:600;font-size:.9rem;transition:border-color .25s,color .25s}
.dock__back:hover{border-color:var(--cyan);color:var(--white)}
.dock__back svg{width:18px;height:18px}
.dock__mid{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 .4rem}
.dock__st{font-size:.76rem;color:var(--dim);letter-spacing:.04em}
.dock__dots{display:flex;gap:4px;margin-top:.35rem}
.dock__dots i{width:20px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);transition:background .3s}
.dock__dots i.on{background:var(--grad)}
.dock__pr{display:none}
.ddmr .dock__eye,.dock__eye{display:none}
.dock__next{height:48px;padding:0 1.35rem;border-radius:14px}
.dock__next em{font-style:normal}
.dock__next .m{display:none}
@keyframes nudge{0%,100%{box-shadow:0 10px 30px -8px rgba(4,245,255,.55)}50%{box-shadow:0 10px 40px -2px rgba(4,245,255,.95)}}
.dock__next{animation:nudge 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.dock__next{animation:none}}

/* Vorschau-Werkzeuge */
.side__tools{display:flex;align-items:center;gap:.45rem;margin-left:auto}
.swatch{display:flex;align-items:center;gap:.32rem;padding:.32rem .5rem;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.ddmr .sw,.sw{position:relative;width:18px;height:18px;border-radius:50%;padding:0;border:1.5px solid rgba(255,255,255,.18);background:var(--c);transition:transform .2s var(--e),box-shadow .2s;cursor:pointer}
.sw:hover{transform:scale(1.15)}
.sw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--cyan)}
.sw--pick{display:grid;place-items:center;background:conic-gradient(#ff4d4d,#ffd84d,#4dff88,#4dd8ff,#7a4dff,#ff4dd2,#ff4d4d)}
.sw--pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
.ddmr .tool,.tool{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--text-2);transition:color .25s,border-color .25s}
.tool:hover{color:var(--white);border-color:var(--stroke-cy)}
.tool svg{width:17px;height:17px}
@media(max-width:600px){.side__top{flex-wrap:wrap}.side__tools{order:3;width:100%;justify-content:space-between;margin:0}}

/* Preis-Pillen & Tags */
.pz{display:inline-flex;align-items:baseline;gap:.25rem;font-family:var(--f-head);font-weight:650;font-size:.86rem;color:var(--white);white-space:nowrap}
.pz small{font-weight:500;font-size:.76rem;color:var(--dim)}
.pz--inkl{color:#3ddc97;font-weight:600}
.tag{display:inline-flex;align-items:center;gap:.3rem;font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.02em;padding:.2rem .5rem;border-radius:999px;line-height:1.2;white-space:nowrap}
.tag svg{width:11px;height:11px;stroke-width:2.4}
.tag--rec{background:rgba(4,245,255,.12);color:var(--cyan);border:1px solid rgba(4,245,255,.3)}
.tag--g{background:rgba(61,220,151,.1);color:#3ddc97;border:1px solid rgba(61,220,151,.25)}
.tag--x{background:rgba(255,181,46,.08);color:#ffc966;border:1px solid rgba(255,181,46,.22);font-weight:500}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ddmr .chip,.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.03);color:var(--text-2);font-family:var(--f-head);font-size:.9rem;font-weight:500;transition:border-color .25s,background .25s,color .25s}
.chip svg{width:15px;height:15px;stroke-width:2.2;color:var(--dim)}
.chip:hover{border-color:var(--stroke-cy);color:var(--white)}
.chip.on{border-color:rgba(4,245,255,.6);background:rgba(4,245,255,.1);color:var(--white)}
.chip.on svg{color:var(--cyan)}

/* Stepper */
.stp{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--stroke)}
.stp__l{font-family:var(--f-head);font-weight:550;color:var(--white);font-size:.9rem;line-height:1.3}
.stp__l small{display:block;font-family:var(--f-body);font-weight:400;color:var(--dim);font-size:.76rem}
.stp__c{display:flex;align-items:center;gap:.6rem}
.ddmr .stp__c button,.stp__c button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--stroke-2);background:rgba(255,255,255,.04);color:var(--white);transition:border-color .25s,background .25s}
.stp__c button:not(:disabled):hover{border-color:var(--cyan);background:rgba(4,245,255,.1)}
.stp__c svg{width:16px;height:16px;stroke-width:2.2}
.stp output{min-width:2.2ch;text-align:center;font-family:var(--f-head);font-weight:700;font-size:1.1rem;color:var(--white)}

/* Felder */
.fld{display:flex;flex-direction:column;gap:.4rem}
.fld>span:not(.fld__l):not(.fld__pre):not(.pz){font-size:.8rem;color:var(--dim)}
.fld__l{font-size:.82rem;color:var(--text-2);font-weight:500}
.ddmr .fld input,.ddmr .fld select,.ddmr .fld textarea,.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:1rem;color:var(--white);background:rgba(255,255,255,.04);border:1px solid var(--stroke-2);border-radius:14px;padding:.85rem 1rem;outline:none;transition:border-color .25s,background .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%239DB0C4' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.fld select option{background:#0b1018;color:var(--white)}
.fld textarea{resize:vertical;min-height:90px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:rgba(4,245,255,.6);background:rgba(4,245,255,.04);box-shadow:0 0 0 4px rgba(4,245,255,.08)}
.fld--dom{flex-direction:row;align-items:center;gap:0;border:1px solid var(--stroke-2);border-radius:14px;background:rgba(255,255,255,.04);padding-right:1rem}
.fld--dom:focus-within{border-color:rgba(4,245,255,.6)}
.fld--dom input,.ddmr .fld--dom input{border:0;background:none;padding-left:.2rem;box-shadow:none!important}
.fld__pre{padding-left:1rem;color:var(--dim);font-size:1rem}
.fld__hint{margin:.5rem 0 0;font-size:.8rem;color:var(--dim)}

/* Segment-Schalter */
.seg{display:inline-flex;gap:.2rem;padding:.25rem;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.ddmr .seg__b,.seg__b{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .85rem;border-radius:999px;border:0;background:none;color:var(--dim);font-family:var(--f-head);font-size:.84rem;font-weight:550;transition:background .25s,color .25s}
.seg__b svg{width:16px;height:16px}
.seg__b:hover{color:var(--white)}
.seg__b.on{background:rgba(255,255,255,.1);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.seg--icon .seg__b{padding:.42rem .55rem}
.seg--sm .seg__b{padding:.35rem .75rem;font-size:.8rem}

/* Hinweise */
.hints{display:flex;flex-direction:column;gap:.55rem;margin-top:clamp(1.4rem,2.4vw,2rem)}
.hint{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.4rem .75rem;padding:.85rem 1rem;border-radius:14px;border:1px solid;font-size:.88rem;line-height:1.5}
.hint>svg{width:20px;height:20px;flex:none;margin-top:.05rem}
.hint p{margin:0;flex:1 1 220px;color:var(--text-2)}
.hint--warn{border-color:rgba(255,181,46,.32);background:rgba(255,181,46,.06)}.hint--warn>svg{color:#ffb52e}
.hint--tip{border-color:rgba(4,245,255,.22);background:rgba(4,245,255,.045)}.hint--tip>svg{color:var(--cyan)}
.hint--ok{border-color:rgba(61,220,151,.22);background:rgba(61,220,151,.045)}.hint--ok>svg{color:#3ddc97}
.ddmr .hint__fix,.hint__fix{margin-left:auto;padding:.42rem .85rem;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.05);color:var(--white);font-family:var(--f-head);font-size:.8rem;font-weight:600;white-space:nowrap;transition:border-color .25s,background .25s}
.hint__fix:hover{border-color:var(--cyan);background:rgba(4,245,255,.12)}

.ring{--v:0;position:relative;width:104px;height:104px;flex:none;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(#3ddc97 calc(var(--v) * 1%),rgba(255,255,255,.08) 0);transition:--v .6s}
.ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#070b12}
.ring b,.ring small{position:relative;line-height:1}
.ring b{font-family:var(--f-head);font-size:2rem;color:var(--white);font-weight:750}
.ring small{font-size:.72rem;color:var(--dim);margin-top:.2rem}
.ring--sm{width:56px;height:56px}.ring--sm::before{inset:5px}.ring--sm b{font-size:1.1rem}
/* ---------- SEITE RECHTS: VORSCHAU ---------- */
.side__inner{display:flex;flex-direction:column;gap:.75rem}
.side__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ddmr .side__close,.side__close{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--stroke-2);background:rgba(255,255,255,.05);color:var(--white);font-size:1.5rem;line-height:1;padding:0}
.browser{position:relative;border-radius:18px;border:1px solid var(--stroke-2);background:#0a0e15;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.06);transition:max-width .5s var(--e-out),border-radius .5s,box-shadow .4s}
.browser.flash{animation:flash 1s var(--e-out)}
@keyframes flash{30%{box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(4,245,255,.6),0 0 40px -6px rgba(4,245,255,.5)}}
.browser__bar{display:flex;align-items:center;gap:.8rem;height:38px;padding:0 .9rem;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.03)}
.browser__dots{display:flex;gap:6px}
.browser__dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.browser__dots i:nth-child(2){background:#febc2e}.browser__dots i:nth-child(3){background:#28c840}
.browser__url{flex:1;max-width:340px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:.4rem;height:24px;border-radius:8px;background:rgba(255,255,255,.06);font-size:.76rem;color:var(--text-2);white-space:nowrap;overflow:hidden;padding:0 .7rem}
.browser__url svg{width:12px;height:12px;color:#3ddc97;flex:none}
.browser__url span{overflow:hidden;text-overflow:ellipsis}
.browser__screen{position:relative;height:clamp(320px,calc(100vh - 440px),620px);overflow:hidden;background:#fff}
.pvwrap{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent;scroll-behavior:smooth}
.sitemap{position:absolute;inset:0;overflow:auto;background:#070b12}
.browser[data-dev="mob"]{max-width:300px;margin-inline:auto;border-radius:38px;padding:10px;border:1px solid rgba(255,255,255,.18);background:#05070b}
.browser[data-dev="mob"] .browser__bar{height:26px;border:0;background:none;justify-content:center;padding:0}
.browser[data-dev="mob"] .browser__dots{display:none}
.browser[data-dev="mob"] .browser__url{height:20px;font-size:.68rem;max-width:200px;border-radius:999px}
.browser[data-dev="mob"] .browser__screen{border-radius:28px;height:clamp(400px,calc(100vh - 450px),560px)}

/* Preis-Box */
.sum{padding:1rem 1.15rem 1.1rem;border-radius:20px}
.sum__row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.sum__k{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.sum__k em{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--dim);font-weight:500}
.sum__v{display:block;font-family:var(--f-head);font-size:clamp(1.9rem,1.4rem + 1.3vw,2.5rem);font-weight:750;letter-spacing:-.03em;line-height:1.05;margin-top:.2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.sum__mon{text-align:right}
.sum__mon b{display:block;font-family:var(--f-head);font-size:1.25rem;color:var(--white);margin-top:.2rem;font-variant-numeric:tabular-nums}
.sum__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--stroke);font-size:.82rem}
.gmeter{display:flex;align-items:center;gap:.55rem;color:var(--text-2)}
.gmeter__k{display:inline-flex;align-items:center;gap:.35rem}
.gmeter__k svg,.sum__time svg{width:15px;height:15px;color:#3ddc97}
.gmeter__bar{width:84px;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.gmeter__bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#1863DC,#04F5FF,#3ddc97);transition:width .6s var(--e-out)}
.gmeter b{color:var(--white);font-family:var(--f-head);min-width:2ch}
.sum__time{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-2)}
.sum__time svg{color:var(--cyan)}
.sum__go{width:100%;margin-top:.9rem}

.ddm-fab{transition:opacity .35s,transform .35s var(--e)}
body.in-calc .ddm-fab{opacity:0;pointer-events:none;transform:translateX(24px)}

/* ---------- AUFBAU / SITEMAP ---------- */
.sm{padding:1.1rem 1.1rem 1.4rem;font-size:.84rem;color:var(--text-2)}
.sm__head{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.1rem}
.sm__head>div{padding:.7rem .85rem;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.sm__head b{display:block;font-family:var(--f-head);font-size:1.5rem;color:var(--white);line-height:1.1}
.sm__head span{font-size:.76rem;color:var(--dim)}
.sm__head .g{border-color:rgba(61,220,151,.25);background:rgba(61,220,151,.05)}
.sm__head .g b{color:#3ddc97}
.sm__tree,.sm__tree ul{list-style:none;margin:0;padding:0}
.sm__tree ul{margin-left:.85rem;padding-left:.9rem;border-left:1px dashed rgba(255,255,255,.14)}
.sm__tree li{position:relative;padding:.22rem 0}
.sm__tree ul>li::before{content:"";position:absolute;left:-.9rem;top:.95rem;width:.7rem;border-top:1px dashed rgba(255,255,255,.14)}
.sm__tree li>span{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .65rem;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-2);color:var(--white);font-family:var(--f-head);font-size:.8rem;font-weight:550;animation:paneIn .4s var(--e-out)}
.sm__tree>li>span{background:rgba(4,245,255,.1);border-color:rgba(4,245,255,.35)}
.sm__tree li>span em{font-style:normal;font-size:.7rem;padding:.05rem .4rem;border-radius:999px;background:rgba(4,245,255,.14);color:var(--cyan)}
.sm__tree li.a>span{background:none;border-style:dashed;color:var(--dim);font-weight:500}
.sm__tree li.nr>span{opacity:.55}
.sm__tree li.more>span{font-style:italic;color:var(--text);background:none}
.sm__tip{display:flex;gap:.6rem;margin:1.2rem 0 0;padding:.8rem .9rem;border-radius:12px;background:rgba(4,245,255,.05);border:1px solid rgba(4,245,255,.15);font-size:.82rem;line-height:1.5}
.sm__tip svg{width:18px;height:18px;flex:none;color:var(--cyan)}


/* Mobile: Vorschau als Overlay, Dock mit Preis */
@media(max-width:1099px){
  .calc__side{position:fixed;inset:0;z-index:400;padding:max(.8rem,env(safe-area-inset-top)) .8rem max(.8rem,env(safe-area-inset-bottom));background:rgba(4,6,10,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow-y:auto;transform:translateY(102%);visibility:hidden;transition:transform .5s var(--e-out),visibility 0s .5s}
  .calc__side.open{transform:none;visibility:visible;transition:transform .5s var(--e-out)}
  .side__inner{max-width:560px;margin:0 auto;min-height:100%}
  .ddmr .side__close,.side__close{display:grid;place-items:center}
  .browser__screen{height:calc(100svh - 330px);min-height:300px}
  .browser[data-dev="mob"] .browser__screen{height:calc(100svh - 350px)}
  body.side-open{overflow:hidden}
  .dock__dots{display:none}
  .dock__mid:has(.dock__pr) .dock__st{display:none}
  .dock__pr{display:flex;flex-direction:column;line-height:1.15}
  .dock__pr b{font-family:var(--f-head);font-size:1.15rem;color:var(--white);font-variant-numeric:tabular-nums}
  .dock__pr small{font-size:.7rem;color:var(--dim)}
  .ddmr .dock__eye,.dock__eye{display:grid;place-items:center;width:48px;height:48px;flex:none;padding:0;border-radius:14px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.05);color:var(--white)}
  .dock__eye svg{width:20px;height:20px}
  .dock__back{padding:0 .85rem}
  .dock__back span{display:none}
}
@media(max-width:620px){.dock__next .d{display:none}.dock__next .m{display:inline}.dock__next{padding:0 1.05rem}}

/* ---------- BEISPIEL-WEBSITE (Vorschau) ---------- */
.browser__screen{--acc:#1863DC;background:#fff}
.pv{--ink:#101826;--mut:#5f6b7b;--bgp:#ffffff;--card:#ffffff;--sub:#f4f6fa;--line:#e7eaf0;--acc2:color-mix(in srgb,var(--acc) 11%,var(--bgp));--acc3:color-mix(in srgb,var(--acc) 24%,var(--bgp));--accd:color-mix(in srgb,var(--acc) 70%,#000);position:relative;min-height:100%;background:var(--bgp);color:var(--ink);font:500 10px/1.5 Inter,-apple-system,system-ui,sans-serif;letter-spacing:0;container-type:inline-size;overflow:hidden}
.pv--dark{--ink:#eef3f9;--mut:#94a0b2;--bgp:#0c1016;--card:#151b25;--sub:#11161f;--line:#232b38}
.pv svg[aria-hidden]{width:1em;height:1em}
.pv p{margin:0}
.w-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in srgb,var(--bgp) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.w-logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:11px;letter-spacing:-.01em;white-space:nowrap;min-width:0;max-width:40%}
.w-logo i{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;background:var(--acc);color:#fff;font-style:normal;font-size:11px;font-weight:800;box-shadow:0 4px 10px -3px var(--acc)}
.w-logo span{overflow:hidden;text-overflow:ellipsis}
.w-menu{display:flex;gap:12px;flex:1;justify-content:center;font-size:9px;font-weight:550;color:var(--mut);white-space:nowrap;overflow:hidden}
.w-menu .on{color:var(--ink);position:relative}
.w-menu .on::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--acc)}
.w-tools{display:flex;align-items:center;gap:9px;margin-left:auto}
.w-lang{font-size:8.5px;font-weight:650;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:2px 5px}
.w-icn{position:relative;display:grid;font-size:13px;color:var(--ink)}
.w-icn em{position:absolute;top:-5px;right:-7px;min-width:12px;height:12px;border-radius:6px;background:var(--acc);color:#fff;font:700 7px/12px Inter,sans-serif;text-align:center;font-style:normal}
.w-b1,.w-b2{display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:999px;padding:6px 12px;font-size:9px;font-weight:650;white-space:nowrap}
.w-b1{background:var(--acc);color:#fff;box-shadow:0 6px 14px -6px var(--acc)}
.w-b2{border:1px solid var(--line);color:var(--ink);background:var(--card)}
.w-burger{display:none;flex-direction:column;gap:3px}.w-burger i{width:14px;height:1.8px;border-radius:2px;background:var(--ink)}
/* Hero */
.w-hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;padding:32px 20px 28px;overflow:hidden;isolation:isolate}
.w-hero__t{position:relative;z-index:2}
.w-kick{display:inline-flex;align-items:center;font-size:8px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);background:var(--acc2);padding:4px 9px;border-radius:999px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-hero h5{margin:11px 0 8px;font:800 23px/1.04 Inter,-apple-system,system-ui,sans-serif;letter-spacing:-.04em;color:inherit}
.w-hero p{font-size:10px;line-height:1.55;color:var(--mut);max-width:32ch}
.w-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.w-trust{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:8.5px;color:var(--mut)}
.w-trust b{color:var(--ink)}
.w-stars{font-style:normal;color:#f5b301;letter-spacing:1px}
.w-hero__art{position:relative;z-index:1;aspect-ratio:4/3.1;border-radius:18px;background:radial-gradient(70% 60% at 72% 18%,color-mix(in srgb,var(--acc) 32%,transparent),transparent 70%),linear-gradient(150deg,var(--acc2),var(--acc3))}
.w-hero__art .art{position:absolute;left:4%;top:6%;width:92%;height:94%}
.w-fc{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:10px;background:var(--card);color:var(--ink);font-size:8.5px;font-weight:650;box-shadow:0 12px 26px -10px rgba(10,20,40,.4);white-space:nowrap}
.w-fc svg{font-size:11px;color:var(--acc)}
.w-fc b{font-size:10.5px;font-weight:800}
.w-fc--1{top:9%;left:-7%}
.w-fc--2{bottom:12%;right:-5%}
.w-src{position:absolute;left:10px;bottom:10px;z-index:3;font-style:normal;font-size:7.5px;font-weight:650;color:#fff;background:rgba(10,15,25,.55);backdrop-filter:blur(4px);padding:3px 8px;border-radius:999px}
.w-play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.w-play svg{font-size:15px;fill:var(--acc);stroke:none;margin-left:2px}
.pv--solide .w-hero__art{border-radius:10px}
.pv--individuell .w-hero{background:linear-gradient(180deg,var(--acc2),var(--bgp) 88%)}
.pv--individuell .w-hero__art{border-radius:46% 54% 42% 58% / 52% 44% 56% 48%}
.pv--individuell .w-hero h5 span{background:linear-gradient(transparent 62%,var(--acc3) 62%)}
.pv--premium .w-hero{background:radial-gradient(80% 90% at 85% 10%,color-mix(in srgb,var(--acc) 55%,transparent),transparent 62%),linear-gradient(140deg,#0b1220,#05070c);color:#fff;padding-block:38px 34px}
.pv--premium .w-hero p,.pv--premium .w-trust{color:rgba(255,255,255,.72)}
.pv--premium .w-trust b{color:#fff}
.pv--premium .w-hero h5 span{background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--acc) 45%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.pv--premium .w-kick{background:rgba(255,255,255,.12);color:#fff}
.pv--premium .w-hero .w-b2{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.pv--premium .w-hero .w-b1{background:#fff;color:#0b1220}
.pv--premium .w-hero__art{background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 42%,#0b1220),color-mix(in srgb,var(--acc) 14%,#0b1220));box-shadow:0 30px 60px -20px color-mix(in srgb,var(--acc) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.15);transform:perspective(700px) rotateY(-9deg) rotateX(4deg)}
.pv--premium .w-fc{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22)}
.pv--premium .w-fc svg{color:#fff}
.pv--premium .w-hero .art .fw{fill:rgba(255,255,255,.94)}
.pv--premium .w-hero .art .fc{fill:rgba(255,255,255,.08)}
.pv--premium .w-hero .art .fk{fill:#0b1220}
.w-glow{position:absolute;border-radius:50%;filter:blur(26px);opacity:.6;z-index:0;pointer-events:none;animation:pblob 8s ease-in-out infinite}
.w-glow--1{width:150px;height:150px;left:-40px;bottom:-70px;background:var(--acc)}
.w-glow--2{width:90px;height:90px;right:35%;top:-40px;background:#04F5FF;animation-delay:-4s}
@keyframes pblob{50%{transform:translate(18px,-10px) scale(1.15)}}
.pv--anim .w-fc{animation:wfloat 4s ease-in-out infinite}
.pv--anim .w-fc--2{animation-delay:-2s}
@keyframes wfloat{50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.w-glow,.pv--anim .w-fc{animation:none}}
/* Illustrationen */
.art .fc{fill:rgba(255,255,255,.6)}
.pv--dark .art .fc{fill:rgba(255,255,255,.05)}
.art .fc2{fill:var(--acc3)}
.art .fa{fill:var(--acc)}
.art .f3{fill:var(--acc3)}
.art .fw{fill:var(--card)}
.art .fk{fill:var(--ink)}
.art .fs{fill:#f2c6a0}
.art .sa,.art .sk,.art .sw{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:7}
.art .sa{stroke:var(--acc)}
.art .sk{stroke:var(--ink);stroke-width:6}
.art .sw{stroke:#fff;stroke-width:6}
.art .thin{stroke-width:4}
/* Abschnitte */
.w-s{position:relative;padding:24px 20px}
.w-s--alt{background:var(--sub)}
.w-sh{margin-bottom:13px}
.w-sh small{display:block;margin-bottom:3px;font-size:7.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.w-sh h6{margin:0;font:800 14.5px/1.15 Inter,-apple-system,system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.w-new{animation:wnew 1.9s ease-out}
@keyframes wnew{0%,30%{box-shadow:inset 0 0 0 2px var(--acc);background-color:color-mix(in srgb,var(--acc) 10%,var(--bgp))}}
.w-grid{display:grid;gap:8px}
.w-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.w-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.w-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 8px 18px -14px rgba(10,20,40,.3)}
.w-s--alt .w-card{border-color:transparent}
.w-card b{display:block;margin-bottom:3px;font-size:10px;font-weight:750}
.w-card p{font-size:8.5px;line-height:1.45;color:var(--mut)}
.w-ic{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;margin-bottom:8px;background:var(--acc2);color:var(--acc);font-size:14px}
.w-more{display:inline-block;margin-top:7px;font-size:8px;font-weight:700;color:var(--acc)}
.w-note{margin-top:10px!important;font-size:8.5px;color:var(--mut);text-align:center}
.w-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:16px;align-items:center}
.w-ph{position:relative;aspect-ratio:4/3;border-radius:14px;background:linear-gradient(150deg,var(--acc2),var(--acc3));overflow:hidden}
.w-ph .art{position:absolute;left:4%;top:4%;width:92%;height:96%}
.w-split p{font-size:9px;line-height:1.6;color:var(--mut)}
.w-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}
.w-stats span{display:flex;flex-direction:column;font-size:7.5px;line-height:1.3;color:var(--mut)}
.w-stats b{font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--acc)}
.w-book{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;padding:13px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.w-cal__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:9.5px}
.w-cal__h span{color:var(--mut);letter-spacing:4px}
.w-cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.w-cal__g i{font-style:normal;font-size:8.5px;padding:5px 0;border-radius:7px;color:var(--mut)}
.w-cal__g i.d{font-size:7px;font-weight:700;text-transform:uppercase;padding:2px 0}
.w-cal__g i.f{background:var(--acc2);color:var(--acc);font-weight:700}
.w-cal__g i.s{background:var(--acc);color:#fff;font-weight:700;box-shadow:0 4px 10px -4px var(--acc)}
.w-slots{display:flex;flex-direction:column;gap:5px}
.w-slots small{font-size:8px;font-weight:650;color:var(--mut)}
.w-slots span:not(.w-b1){padding:6px;border-radius:8px;border:1px solid var(--line);font-size:8.5px;font-weight:650;text-align:center}
.w-slots span.on{border-color:var(--acc);background:var(--acc2);color:var(--acc)}
.w-slots .w-b1{margin-top:3px}
.w-wiz{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.w-wiz__s{display:flex;align-items:center;gap:5px}
.w-wiz__s i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:7.5px;font-weight:700;background:var(--sub);color:var(--mut)}
.w-wiz__s i.on{background:var(--acc);color:#fff}
.w-wiz__s span{flex:1;height:2px;border-radius:2px;background:var(--line)}
.w-wiz>b{font-size:11px}
.w-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.w-opts span{padding:9px 4px;border-radius:9px;border:1px solid var(--line);font-size:8.5px;font-weight:650;text-align:center}
.w-opts span.on{border-color:var(--acc);background:var(--acc2);color:var(--acc)}
.w-upl{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px;border:1.5px dashed var(--line);border-radius:9px;font-size:8px;color:var(--mut)}
.w-upl svg{font-size:11px}
.w-wiz .w-b1{align-self:flex-end}
.w-gal{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:64px 64px;gap:6px}
.w-gi{position:relative;margin:0;border-radius:11px;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.92);font-size:20px}
.w-gi:first-child{grid-row:span 2;font-size:30px}
.w-gal .w-gi:nth-child(4){grid-column:span 2}
.w-gi--0{background:radial-gradient(60% 60% at 30% 20%,rgba(255,255,255,.25),transparent 60%),linear-gradient(140deg,var(--acc),var(--accd))}
.w-gi--1{background:radial-gradient(60% 60% at 30% 20%,rgba(255,255,255,.3),transparent 60%),linear-gradient(140deg,#f6b37a,#e2725b)}
.w-gi--2{background:radial-gradient(60% 60% at 30% 20%,rgba(255,255,255,.3),transparent 60%),linear-gradient(140deg,#6fcf97,#2d9d78)}
.w-gi--3{background:radial-gradient(60% 60% at 30% 20%,rgba(255,255,255,.3),transparent 60%),linear-gradient(140deg,#8ea2ff,#5b5bd6)}
.w-gi span{display:grid}
.w-gi figcaption{position:absolute;left:7px;right:7px;bottom:6px;font-size:7px;font-weight:650;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.w-revhead{display:flex;align-items:center;gap:6px;margin:-4px 0 11px;font-size:8.5px;color:var(--mut)}
.w-revhead b{font-size:16px;font-weight:800;color:var(--ink)}
.w-rev p{margin:6px 0 9px!important;font-size:8.5px;line-height:1.5;color:var(--ink)}
.w-who{display:flex;align-items:center;gap:6px;font-size:8px;font-weight:650;color:var(--mut)}
.w-who i{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:800;color:#fff}
.w-team{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.w-team div{display:flex;flex-direction:column;align-items:center;gap:2px}
.w-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:4px;font-style:normal;font-size:15px;font-weight:800;color:#fff;box-shadow:0 8px 16px -8px rgba(10,20,40,.5)}
.w-av--0{background:linear-gradient(140deg,var(--acc),var(--accd))}
.w-av--1{background:linear-gradient(140deg,#f6b37a,#e2725b)}
.w-av--2{background:linear-gradient(140deg,#6fcf97,#2d9d78)}
.w-av--3{background:linear-gradient(140deg,#8ea2ff,#5b5bd6)}
.w-team b{font-size:9.5px}
.w-team small{font-size:7.5px;color:var(--mut)}
.w-tier{position:relative;text-align:center}
.w-tier small{font-size:7.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.w-tier b{font-size:18px!important;font-weight:800;margin:3px 0 6px!important}
.w-tier ul{list-style:none;margin:0 0 10px;padding:0;font-size:8px;line-height:1.85;color:var(--mut)}
.w-tier.hot{border-color:var(--acc)!important;box-shadow:0 12px 26px -14px var(--acc)}
.w-badge{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-style:normal;font-size:7px;font-weight:750;padding:2px 8px;border-radius:999px;background:var(--acc);color:#fff;white-space:nowrap}
.w-karte{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.w-karte>div>b{display:block;margin-bottom:6px;padding-bottom:4px;border-bottom:2px solid var(--acc);font-size:9.5px;font-weight:800}
.w-karte span{display:flex;align-items:baseline;gap:4px;margin:5px 0;font-size:8.5px;font-weight:700}
.w-karte em{font-style:normal;font-weight:500;color:var(--ink)}
.w-karte span i{flex:1;border-bottom:1px dotted var(--mut);opacity:.5;transform:translateY(-2px)}
.w-list{display:flex;flex-direction:column;gap:6px}
.w-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.w-row .w-ic{margin:0}
.w-row__t{flex:1;display:flex;flex-direction:column;min-width:0}
.w-row__t b{font-size:9.5px}
.w-row__t small{font-size:7.5px;color:var(--mut)}
.w-row .w-b2{padding:5px 9px}
.w-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--acc2);color:var(--acc);font-size:6.5px;font-weight:750;line-height:1.05}
.w-date b{font-size:13px}
.w-file{width:27px;height:32px;flex:none;border-radius:6px;background:#e5484d;color:#fff;display:grid;place-items:center;font-size:6.5px;font-weight:800}
.w-post{display:flex;flex-direction:column;gap:4px}
.w-post__img{height:66px;border-radius:11px;display:grid;place-items:center;color:rgba(255,255,255,.92);font-size:18px}
.w-post small{font-size:7.5px;color:var(--mut)}
.w-post b{font-size:9.5px;line-height:1.3}
.w-faq{display:flex;flex-direction:column;gap:6px}
.w-faq>div{padding:10px 12px;border-radius:11px;background:var(--card);border:1px solid var(--line)}
.w-faq b{display:flex;justify-content:space-between;gap:8px;font-size:9.5px}
.w-faq b i{font-style:normal;font-weight:800;color:var(--acc)}
.w-faq p{margin-top:5px!important;font-size:8.5px;color:var(--mut)}
.w-insta{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.w-insta span{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;color:rgba(255,255,255,.9);font-size:16px}
.w-insta span:nth-child(1){background:linear-gradient(140deg,#f58529,#dd2a7b)}
.w-insta span:nth-child(2){background:linear-gradient(140deg,var(--acc),var(--accd))}
.w-insta span:nth-child(3){background:linear-gradient(140deg,#8134af,#dd2a7b)}
.w-insta span:nth-child(4){background:linear-gradient(140deg,#feda75,#f58529)}
.w-news{display:flex;align-items:center;gap:10px;padding:15px;border-radius:14px;background:radial-gradient(80% 120% at 100% 0,rgba(255,255,255,.18),transparent 60%),linear-gradient(120deg,var(--acc),var(--accd));color:#fff}
.w-news div{flex:1}
.w-news b{display:block;font-size:11px}
.w-news small{font-size:8px;opacity:.8}
.w-in{display:flex;align-items:center;height:27px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.95);color:#7a8594;font-size:8px;width:36%}
.w-news .w-b1{background:#0b1220;box-shadow:none}
.w-calc{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.w-calc label{display:flex;justify-content:space-between;font-size:8.5px;color:var(--mut)}
.w-calc label b{color:var(--ink)}
.w-range{position:relative;display:block;height:5px;border-radius:5px;background:var(--line)}
.w-range::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:5px;background:var(--acc)}
.w-range i{position:absolute;top:50%;left:var(--v);width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--acc);transform:translate(-50%,-50%)}
.w-calc__r{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;padding-top:9px;border-top:1px solid var(--line);font-size:8.5px;color:var(--mut)}
.w-calc__r b{font-size:16px;font-weight:800;color:var(--acc)}
.w-login{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.w-login .w-ic{margin:0;width:36px;height:36px;font-size:16px}
.w-login b{display:block;font-size:10.5px}
.w-login small{font-size:8px;color:var(--mut)}
.w-map{position:relative;min-height:130px;border-radius:14px;overflow:hidden;background:linear-gradient(28deg,transparent 46%,#fff 46% 49%,transparent 49%),linear-gradient(-62deg,transparent 58%,#fff 58% 60.5%,transparent 60.5%),linear-gradient(90deg,transparent 30%,rgba(255,255,255,.75) 30% 31.5%,transparent 31.5%),radial-gradient(40% 50% at 78% 28%,#cbe6cf,transparent 70%),linear-gradient(135deg,#e7efe8,#dce6f0)}
.pv--dark .w-map{filter:brightness(.4) saturate(.7)}
.w-map--big{min-height:120px}
.w-map i{position:absolute;width:17px;height:17px;border-radius:50% 50% 50% 0;background:var(--acc);transform:translate(-50%,-100%) rotate(-45deg);box-shadow:0 4px 8px rgba(0,0,0,.3)}
.w-map i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.w-addr{position:absolute;left:8px;right:8px;bottom:8px;padding:7px 10px;border-radius:10px;background:#fff;color:#101826;box-shadow:0 8px 18px -8px rgba(0,0,0,.35);font-size:8px}
.w-addr b{display:block;font-size:9.5px}
.w-addr small{color:#5f6b7b}
.w-locs{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.w-locs span{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:8px;font-weight:650}
.w-locs svg{color:var(--acc)}
.w-form{display:flex;flex-direction:column;gap:7px}
.w-form label{display:flex;flex-direction:column;gap:3px;font-size:8px;font-weight:650;color:var(--mut)}
.w-form label span{display:block;height:25px;border-radius:8px;border:1px solid var(--line);background:var(--card)}
.w-form label span.ta{height:48px}
.w-form .w-b1{align-self:flex-start;margin-top:2px}
.w-promo{margin:-6px 0 12px;padding:8px 10px;border-radius:10px;background:linear-gradient(90deg,var(--acc),var(--accd));color:#fff;font-size:8.5px;font-weight:650;text-align:center}
.w-cats{display:flex;gap:5px;margin-bottom:11px}
.w-cats span{padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:8px;font-weight:650}
.w-cats .on{background:var(--ink);border-color:var(--ink);color:var(--bgp)}
.w-prod{display:flex;flex-direction:column;gap:2px}
.w-prod__img{position:relative;aspect-ratio:1;margin-bottom:6px;border-radius:12px;display:grid;place-items:center;background:var(--sub)}
.w-s--alt .w-prod__img{background:var(--card)}
.w-prod__img .art{width:64%;height:64%}
.w-prod__img .w-badge{top:6px;left:6px;transform:none}
.w-prod b{font-size:9px}
.w-price{font-size:10px;font-weight:800;color:var(--acc)}
.w-vars{display:flex;gap:3px;margin-top:2px}
.w-vars i{width:8px;height:8px;border-radius:50%;background:#101826}
.w-vars i:nth-child(2){background:var(--acc)}
.w-vars i:nth-child(3){background:#e7eaf0;box-shadow:inset 0 0 0 1px #c9ced8}
.w-add{margin-top:6px;padding:6px;border-radius:8px;background:var(--ink);color:var(--bgp);font-size:8px;font-weight:650;text-align:center}
.w-pay{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:15px}
.w-pay span{padding:3px 9px;border-radius:6px;background:var(--card);border:1px solid var(--line);font-size:7.5px;font-weight:800;color:var(--mut)}
.w-foot{padding:22px 20px 14px;background:#0b1220;color:#9aa6b8}
.pv--dark .w-foot{background:#05070b}
.w-foot__g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}
.w-foot .w-logo{max-width:100%;margin-bottom:7px;color:#fff}
.w-foot p{font-size:8px;line-height:1.55}
.w-foot b{display:block;margin-bottom:6px;font-size:8.5px;color:#fff}
.w-foot ul{list-style:none;margin:0;padding:0;font-size:8px;line-height:1.9}
.w-foot__l{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:7.5px}
.w-sync{display:inline-flex;margin-top:8px;padding:2px 8px;border-radius:999px;background:rgba(61,220,151,.15);color:#3ddc97;font-size:7.5px;font-weight:700}
/* Overlays über der Vorschau */
.p-ov{position:absolute;inset:0;z-index:6;pointer-events:none}
.ov-cookie{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:7px;padding:5px 5px 5px 11px;border-radius:999px;background:#fff;color:#101826;font:600 8px/1 Inter,system-ui,sans-serif;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.ov-cookie i{font-style:normal;padding:5px 10px;border-radius:999px;background:var(--acc);color:#fff}
.ov-fabs{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.ov-wa{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#25D366;box-shadow:0 8px 18px rgba(37,211,102,.45)}
.ov-wa svg{width:17px;height:17px;stroke:#fff}
.ov-chat{display:flex;align-items:center;gap:6px;animation:paneIn .5s var(--e-out)}
.ov-chat em{font-style:normal;padding:7px 10px;border-radius:12px 12px 3px 12px;background:#fff;color:#101826;font:600 8.5px/1.3 Inter,system-ui,sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.ov-chat span{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:var(--acc);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.ov-chat svg{width:16px;height:16px;stroke:#fff}
.ov-a11y{position:absolute;left:0;top:46%;width:26px;height:30px;border-radius:0 9px 9px 0;display:grid;place-items:center;background:#1863DC}
.ov-a11y svg{width:15px;height:15px;stroke:#fff}
.ov-toast{position:absolute;left:50%;top:52px;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:#0b1220;color:#fff;font:650 9px/1 Inter,system-ui,sans-serif;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,-10px)}
.ov-toast svg{width:13px;height:13px;stroke:#3ddc97;stroke-width:2.8}
.ov-toast.on{animation:ovt 2.3s var(--e-out)}
@keyframes ovt{0%{opacity:0;transform:translate(-50%,-10px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
@container (max-width:560px){
  .w-menu,.w-navcta{display:none}
  .w-burger{display:flex}
}
@container (max-width:440px){
  .w-hero{grid-template-columns:1fr;padding-top:22px;gap:22px}
  .w-hero h5{font-size:21px}
  .w-fc--1{left:5%}.w-fc--2{right:5%}
  .w-grid--3,.w-grid--4,.w-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-split,.w-book,.w-karte,.w-foot__g{grid-template-columns:1fr}
  .w-hero__art{width:100%;max-width:300px;margin:0 auto}
  .w-ph{width:100%;max-width:300px;margin:0 auto;aspect-ratio:16/10}
  .w-news{flex-wrap:wrap}.w-in{width:100%}
  .w-gal{grid-template-columns:1fr 1fr;grid-template-rows:80px 56px 56px}
  .w-gi:first-child{grid-column:span 2;grid-row:auto}
  .w-gal .w-gi:nth-child(4){grid-column:auto}
}


.sm__legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:1rem 0 0;font-size:.74rem;color:var(--dim)}
.sm__legend span{display:inline-flex;align-items:center;gap:.4rem}
.sm__legend i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.sm__legend i.g{background:#3ddc97;box-shadow:0 0 6px #3ddc97}
.sm__tree li:not(.a):not(.nr)>span::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ddc97;box-shadow:0 0 6px rgba(61,220,151,.8);flex:none}
.rcta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.rcta .btn{flex:1 1 auto}
.rcta .btn svg{width:17px;height:17px}

/* ---------- KALKULATION ---------- */
.res{margin-top:1.4rem}
.res__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.res__meta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.84rem;color:var(--dim)}
.res__meta b{color:var(--white);font-weight:600}
.tots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-top:1rem}
.tot{padding:1rem 1.1rem;border-radius:18px;border:1px solid var(--stroke);background:rgba(255,255,255,.025)}
.tot span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.tot b{display:block;font-family:var(--f-head);font-size:1.45rem;color:var(--white);font-weight:750;letter-spacing:-.02em;margin:.25rem 0 .1rem;font-variant-numeric:tabular-nums}
.tot small{font-size:.76rem;color:var(--dim)}
.tot--main{border-color:rgba(4,245,255,.4);background:radial-gradient(120% 140% at 0% 0%,rgba(4,245,255,.16),transparent 60%),rgba(255,255,255,.02)}
.tot--main b{font-size:2.1rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.res__grid{display:grid;gap:.8rem;margin-top:.8rem}
.res__items{padding:.4rem 1.2rem 1.1rem;border-radius:20px;border:1px solid var(--stroke);background:rgba(255,255,255,.02)}
.rg{padding-top:.9rem}
.rg h4{display:flex;justify-content:space-between;gap:1rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:650;margin:0 0 .4rem}
.rg h4 b{color:var(--text-2);letter-spacing:.02em}
.rg ul,.rcard ul{list-style:none;margin:0;padding:0}
.rg li,.rcard li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--stroke);font-size:.9rem;color:var(--text-2)}
.rg li span{display:flex;flex-direction:column;min-width:0}
.rg li small{font-size:.76rem;color:var(--dim);line-height:1.4}
.rg li b,.rcard li b{color:var(--white);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.rsum{margin-top:.9rem;display:flex;flex-direction:column;gap:.3rem}
.rsum>div{display:flex;justify-content:space-between;font-size:.9rem;color:var(--text)}
.rsum b{color:var(--white);font-variant-numeric:tabular-nums}
.rsum__tot{margin-top:.3rem;padding-top:.6rem;border-top:1px solid var(--stroke-2);font-size:1.05rem!important}
.rsum__tot b{font-size:1.2rem}
.rsum>small{font-size:.76rem;color:var(--dim)}
.res__side{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.rcard{padding:1rem 1.1rem;border-radius:18px;border:1px solid var(--stroke);background:rgba(255,255,255,.02)}
.rcard h4{display:flex;align-items:center;gap:.5rem;font-size:.95rem;margin:0 0 .6rem}
.rcard h4 svg{width:18px;height:18px;color:var(--cyan)}
.rcard li{font-size:.86rem;padding:.4rem 0}
.rcard li:last-child{border-bottom:0}
.rcard .dim li{color:var(--dim)}
.rcard .dim li b{color:var(--text);font-weight:500}
.rcard__k{margin:.6rem 0 .2rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#ffc966}
.rcard .big{margin:0 0 .7rem;color:var(--text-2)}
.rcard .big b{color:var(--white);font-size:1.15rem}
.rcard small{font-size:.75rem;color:var(--dim)}
.phases{display:flex;gap:3px;margin-bottom:.5rem}
.phases span{display:flex;flex-direction:column;gap:.3rem;font-size:.66rem;color:var(--dim);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phases i{display:block;height:6px;border-radius:3px;background:var(--grad);opacity:.85}
.phases span:nth-child(2) i{opacity:.7}.phases span:nth-child(3) i{opacity:.55}.phases span:nth-child(4) i{opacity:.42}.phases span:nth-child(5) i{background:#3ddc97;opacity:1}
.gline{display:flex;align-items:center;gap:.9rem}
.gline p{margin:0;font-size:.84rem;color:var(--text)}
.gline p b{display:block;color:var(--white);font-family:var(--f-head);font-size:1.05rem}
.ticks li{justify-content:flex-start!important;gap:.55rem!important;border:0!important;padding:.22rem 0!important;font-size:.84rem!important}
.ticks svg{width:15px;height:15px;color:#3ddc97;flex:none;stroke-width:2.6;margin-top:.15rem}
.leadf{margin-top:1.2rem;padding:clamp(1.2rem,2.6vw,1.8rem);border-radius:24px;border-color:rgba(4,245,255,.3)!important;background:radial-gradient(100% 120% at 100% 0%,rgba(24,99,220,.18),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.leadf__h h3{margin:.6rem 0 .4rem;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);letter-spacing:-.03em}
.leadf__h p{margin:0;color:var(--text-2);font-size:.92rem;max-width:56ch}
.leadf__g{display:grid;grid-template-columns:1fr;gap:.8rem;margin-top:1.2rem}
@media(min-width:560px){.leadf__g{grid-template-columns:1fr 1fr}.fld--w{grid-column:1 / -1}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.chk{display:flex;gap:.7rem;align-items:flex-start;font-size:.8rem;line-height:1.5;color:var(--text);cursor:pointer}
.chk input{flex:none;width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--cyan);cursor:pointer}
.chk a{color:var(--white);border-bottom:1px solid var(--stroke-2)}
.leadf__f{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:1.2rem}
.leadf__err{font-size:.86rem;color:#ffb52e}
.leadf__err a{color:var(--white);text-decoration:underline}
.btn.busy{opacity:.6;pointer-events:none}
.lead-ok{margin-top:1.2rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:24px;text-align:center;border-color:rgba(61,220,151,.35)!important;background:radial-gradient(80% 120% at 50% 0%,rgba(61,220,151,.14),transparent 60%),rgba(255,255,255,.02)}
.lead-ok__ic{width:56px;height:56px;margin:0 auto .8rem;border-radius:50%;display:grid;place-items:center;background:#3ddc97;color:#03121a}
.lead-ok__ic svg{width:28px;height:28px;stroke-width:2.6}
.lead-ok h3{font-size:1.8rem}
.lead-ok p{margin:.6rem auto 0;max-width:46ch;color:var(--text-2)}
.ract{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.2rem}
.ract .btn{padding:.7rem 1.1rem;font-size:.88rem}
.ract .btn svg{width:17px;height:17px}
.ract .linkbtn{margin-left:auto;font-size:.86rem;color:var(--dim)}
.disc{margin:1rem 0 0;font-size:.78rem;color:var(--dim);max-width:70ch}

/* ---------- GOOGLE-WISSEN ---------- */
.gk{display:grid;gap:1rem}
@media(min-width:860px){.gk{grid-template-columns:1fr 1fr}}
.gk__col{padding:clamp(1.3rem,2.6vw,2rem)}
.gk__col h3{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;margin-bottom:1.1rem}
.gk__col h3 svg{width:30px;height:30px;padding:6px;border-radius:10px}
.gk__col--yes h3 svg{background:rgba(61,220,151,.14);color:#3ddc97;stroke-width:2.4}
.gk__col--no h3 svg{background:rgba(255,181,46,.12);color:#ffb52e}
.gk__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.gk__col li{position:relative;padding-left:1.3rem;font-size:.93rem;line-height:1.55}
.gk__col li::before{content:"";position:absolute;left:0;top:.55rem;width:7px;height:7px;border-radius:50%}
.gk__col--yes li::before{background:#3ddc97;box-shadow:0 0 8px rgba(61,220,151,.7)}
.gk__col--no li::before{background:#ffb52e;box-shadow:0 0 8px rgba(255,181,46,.6)}

/* ---------- VERGLEICH ---------- */
.cmp{overflow-x:auto;padding:.4rem}
.cmp__t{width:100%;min-width:680px;border-collapse:collapse;font-size:.9rem}
.cmp__t th,.cmp__t td{padding:.95rem 1rem;text-align:left;border-bottom:1px solid var(--stroke);vertical-align:top}
.cmp__t tbody th{font-family:var(--f-head);font-weight:600;color:var(--dim);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.cmp__t td{color:var(--text-2)}
.cmp__t td .dots{margin-right:.5rem;vertical-align:middle}
.cmp__t tbody tr:last-child td,.cmp__t tbody tr:last-child th{border-bottom:0}
.cmp__t td[data-from]{font-family:var(--f-head);font-weight:700;color:var(--white);font-size:1rem}
.ddmr .cmp__h,.cmp__h{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.55rem .9rem;border-radius:12px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.04);color:var(--white);font-family:var(--f-head);font-weight:650;font-size:.95rem;transition:border-color .25s,background .25s}
.cmp__h:hover{border-color:var(--cyan);background:rgba(4,245,255,.1)}
.cmp__h small{font-size:.66rem;font-weight:600;color:#03121a;letter-spacing:.06em;text-transform:uppercase}
.ddmr .cmp__h--top,.cmp__h--top,.ddmr .cmp__h--top:hover{background:var(--grad);border-color:transparent;color:#03121a}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.faq__list{display:flex;flex-direction:column;gap:.6rem}
.faq__i{padding:0;border-radius:18px;overflow:hidden}
.faq__i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;font-family:var(--f-head);font-weight:600;color:var(--white);font-size:1.02rem}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stroke-2);color:var(--cyan);font-size:1.2rem;font-weight:400;transition:transform .35s var(--e)}
.faq__i[open] summary::after{transform:rotate(45deg)}
.faq__i[open]{border-color:var(--stroke-cy)}
.faq__i>div{padding:0 1.3rem 1.2rem;font-size:.94rem;color:var(--text-2)}
.faq__i>div p{margin:0}

/* ---------- DRUCK / PDF ---------- */
.printdoc{display:none}
@media print{
  @page{margin:14mm 14mm 16mm}
  html,body,body.ddmr{background:#fff!important;color:#141a24!important}
  body>*:not(.printdoc){display:none!important}
  .printdoc{display:block!important;font:400 10.5pt/1.45 -apple-system,"Inter",system-ui,sans-serif;color:#141a24}
  .pd header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-radius:12px;background:#04060A!important;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pd header img{height:46px;width:auto}
  .pd header div{display:flex;flex-direction:column;align-items:flex-end;font-size:9pt;color:#9DB0C4}
  .pd header b{font-size:15pt;color:#fff}
  .pd__sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 8px}
  .pd__sum div{padding:9px 11px;border:1px solid #dde3ea;border-radius:9px}
  .pd__sum span{display:block;font-size:7.5pt;text-transform:uppercase;letter-spacing:.08em;color:#6b7686}
  .pd__sum b{font-size:13pt}
  .pd table{width:100%;border-collapse:collapse;margin-top:6px}
  .pd td{padding:5px 0;border-bottom:1px solid #e9edf2;vertical-align:top}
  .pd td:last-child{text-align:right;white-space:nowrap;font-weight:600;padding-left:14px}
  .pd td small{display:block;color:#6b7686;font-size:8.5pt}
  .pd tr.g td{padding-top:12px;font-size:8pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1863DC;border-bottom:1.5px solid #1863DC}
  .pd tr.t td{font-weight:700;font-size:11.5pt;border-bottom:0;padding-top:8px}
  .pd tr.dim td{color:#6b7686}
  .pd h3{margin:16px 0 4px;font-size:11pt;color:#141a24}
  .pd p{margin:4px 0}
  .pd__ust{font-size:8.5pt;color:#6b7686;margin-top:6px!important}
  .pd__disc{margin-top:14px!important;font-size:8.5pt;color:#6b7686;word-break:break-all}
  .pd footer{margin-top:18px;padding-top:8px;border-top:1px solid #dde3ea;font-size:8.5pt;color:#6b7686;text-align:center}
}

/* Werte statt Preis in der Seitenleiste */
.sum__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.sum__stats>div{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .7rem;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--stroke)}
.sum__stats b{font-family:var(--f-head);font-size:1.35rem;font-weight:750;color:var(--white);line-height:1.1;font-variant-numeric:tabular-nums}
.sum__stats span{font-size:.72rem;color:var(--dim);line-height:1.3}
.sum .gmeter{margin-top:.75rem;justify-content:space-between}
.sum .gmeter__bar{flex:1;max-width:none}
.sum__price{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--stroke);animation:paneIn .6s var(--e-out)}
.calc__side.priced .sum{border-color:rgba(4,245,255,.35)}
/* Kacheln: Auswahl-Kreis statt Preis */
.tl__tg{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--stroke-2);color:var(--dim);transition:background .25s,border-color .25s,color .25s}
.tl__tg svg{width:15px;height:15px;stroke-width:2.6}
.tl:hover .tl__tg{border-color:var(--cyan);color:var(--cyan)}
.tl.on .tl__tg{background:var(--grad);border-color:transparent;color:#03121a}
/* Kalkulation: Positionen mit X */
.rg li.rr,.rcard li.rr{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;gap:.7rem}
.ddmr .rx,.rx{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--stroke-2);background:rgba(255,255,255,.03);color:var(--dim);transition:color .2s,border-color .2s,background .2s,transform .2s var(--e)}
.rx svg{width:13px;height:13px;stroke-width:2.6}
button.rx:hover{color:#ff6b6b;border-color:rgba(255,107,107,.6);background:rgba(255,107,107,.1);transform:scale(1.08)}
.rx--fix{border-color:transparent;background:none;opacity:.35}
.rx--fix svg{width:12px;height:12px}
.rhint{display:flex;align-items:center;gap:.55rem;margin:1rem 0 0;font-size:.84rem;color:var(--text)}
.rhint svg{width:16px;height:16px;flex:none;color:var(--cyan)}
.rhint b{color:var(--white)}
.undo{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:.9rem;padding:.7rem .9rem;border-radius:14px;border:1px solid rgba(61,220,151,.3);background:rgba(61,220,151,.06);font-size:.88rem;color:var(--text-2);animation:paneIn .35s var(--e-out)}
.undo>svg{width:18px;height:18px;color:#3ddc97;flex:none}
.undo span{flex:1 1 200px}
.res__items .more{margin:1rem 0 .2rem}