/* taPOLINO — Layout: helle, kühle Bühne; die echten Schilder (Schwarz/Weiß) tragen die Bildsprache, Blau nur für Handlungen, Gold nur für Sterne. */
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/mono.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#f3f4f6;        /* kühles Papier */
  --paper:#ffffff;
  --ink:#0c0d10;
  --mu:#5f636d;
  --ln:rgba(12,13,16,.1);
  --field:#f4f5f8;
  --blue:#2346ff;      /* Aktion */
  --blue-ink:#1631d6;
  --blue-soft:#e6ebff;
  --gold:#ffb400;      /* Sterne */
  --night:#0b0c0f;
  --night-2:#16171c;
  --on-night:#f4f5f7;
  --mu-night:#9a9ca6;
  --f-sans:"Schibsted Grotesk","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --navh:68px;
  --r-lg:28px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + env(safe-area-inset-top,0px))}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:8px}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px));top:calc(10px + env(safe-area-inset-top,0px))}

.wrap{max-width:1220px;margin-inline:auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
section{position:relative}

/* Typografie */
h1,h2,h3{font-weight:650;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem)}
h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.2}
h1 em,h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--blue);font-size:1.08em;line-height:.9}
.eyebrow{display:inline-block;font:500 .72rem/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mu);margin-bottom:1.1rem}
.eyebrow--light{color:var(--mu-night)}
.lead{color:var(--mu);font-size:1.08rem;max-width:52ch}
.fine{font-size:.82rem;color:var(--mu)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:999px;font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .25s;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em;transition:transform .25s}
.btn:hover{transform:translateY(-1px)}
.btn:hover svg{transform:translateX(3px)}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(35,70,255,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--blue:hover{background:var(--blue-ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ghost{border-color:var(--ln);background:rgba(255,255,255,.6);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--white{background:#fff;color:var(--ink)}
.link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.link svg{width:1em;height:1em}

.dot{display:inline-block;width:.85em;height:.85em;border-radius:50%;flex:none}
.dot--black{background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.dot--white{background:#fff;box-shadow:inset 0 0 0 1px rgba(12,13,16,.25)}
.dot--both{background:linear-gradient(90deg,#111 50%,#fff 50%);box-shadow:inset 0 0 0 1px rgba(12,13,16,.25)}

/* ========== Phone ========== */
.phone{--pw:170px;width:var(--pw);aspect-ratio:9/19;border-radius:calc(var(--pw)*.17);background:linear-gradient(145deg,#2b2c31,#0b0b0d);padding:calc(var(--pw)*.04);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 30px 50px -18px rgba(5,6,10,.5),0 10px 18px -10px rgba(5,6,10,.35);position:relative;font-size:calc(var(--pw)/14)}
.phone::before{content:"";position:absolute;top:calc(var(--pw)*.07);left:50%;width:30%;height:calc(var(--pw)*.065);background:#000;border-radius:99px;transform:translateX(-50%);z-index:3}
.phone__screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.135);overflow:hidden;background:#fff}
.scr{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;opacity:0;transition:opacity .45s,transform .45s;transform:scale(.98);padding:3.1em 1.05em 1.2em}
.scr.is-on{opacity:1;transform:none}
.scr__biz{font-weight:700;font-size:1.1em;letter-spacing:-.02em;color:var(--ink)}
.scr__sub{font-size:.78em;color:var(--mu);margin-top:.15em}
.stars--big{font-size:1.65em;margin-top:.8em;gap:.08em}
.stars--fill svg{fill:#dadce2;transition:fill .25s,transform .25s}
.stars--fill svg.on{fill:var(--gold);transform:scale(1.08)}
.scr__text{margin-top:.9em;font-size:.76em;line-height:1.4;color:var(--ink);border:1px solid var(--ln);border-radius:.7em;padding:.7em .75em;min-height:5.2em}
.scr__btn{margin-top:auto;align-self:flex-end;background:var(--blue);color:#fff;font-weight:600;font-size:.78em;padding:.55em 1.1em;border-radius:99px}
.scr--lock{background:radial-gradient(120% 80% at 20% 0%,#3b55ff 0%,#14195a 55%,#07081c 100%);color:#fff;align-items:center;padding-top:3.8em}
.scr__time{font-size:3.2em;font-weight:300;letter-spacing:-.04em;line-height:1}
.scr__date{font-size:.72em;opacity:.8;margin-top:.3em}
.scr__note{margin-top:auto;display:flex;align-items:center;gap:.5em;font-size:.68em;line-height:1.3;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border-radius:1em;padding:.8em .9em;text-align:left}
.scr__note svg{width:1.8em;height:1.8em;fill:#fff;flex:none}
.scr--done{align-items:center;justify-content:center;text-align:center;gap:.2em}
.done__ic{width:3.4em;height:3.4em;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin-bottom:.6em}
.done__ic svg{width:55%;height:55%}
.btn--wide{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;pointer-events:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Logo (Original-Wortmarke) */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo img{display:block;height:30px;width:auto}
.logo--sm img{height:26px}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .3s,box-shadow .3s}
.nav.is-s{background:rgba(243,244,246,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--ln)}
.nav__in{height:var(--navh);display:flex;align-items:center;gap:2rem}
.nav__links{display:flex;gap:1.7rem;margin-left:auto}
.nav__links a{font-size:.88rem;text-decoration:none;color:var(--mu);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{padding:.6rem 1.1rem;font-size:.84rem}
.nav__burger{display:none;margin-left:auto;background:none;border:1px solid var(--ln);border-radius:999px;padding:.5rem 1rem;font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.menu{position:fixed;inset:0;z-index:55;background:rgba(243,244,246,.97);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;gap:1.1rem;padding:calc(var(--navh) + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(28px,env(safe-area-inset-left,0px))}
.menu a:not(.btn){font-size:2.2rem;font-weight:650;letter-spacing:-.03em;text-decoration:none}
.menu .btn{align-self:flex-start;margin-top:1rem}

/* ========== Produktbild (echte Schilder) ========== */
.stars{display:inline-flex;gap:.12em;margin-top:.35em;color:var(--gold)}
.stars svg{width:.92em;height:.92em;fill:currentColor}
.pcard{--w:clamp(240px,26vw,340px);position:relative;width:var(--w);max-width:100%;aspect-ratio:880/1100;flex:none}
.pcard__img,.shop__stage .pcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s ease,transform .45s ease;filter:drop-shadow(0 34px 34px rgba(12,14,24,.28)) drop-shadow(0 8px 10px rgba(12,14,24,.16))}
[data-color="black"]>.pcard__img--white,[data-color="white"]>.pcard__img--black{opacity:0;transform:scale(.97)}

/* ========== Hero ========== */
.hero{padding-block:calc(var(--navh) + env(safe-area-inset-top,0px) + clamp(2.5rem,7vh,5rem)) clamp(3rem,8vh,6rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero__copy{min-width:0}
.hero__h{font-size:clamp(2.9rem,6.2vw,5.4rem);letter-spacing:-.05em;line-height:.96}
.hero__h .ln{display:block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero__h .ln+.ln{animation-delay:.12s}
.hero .lead{margin-top:1.6rem;font-size:1.15rem}
.price-chip{display:inline-flex;align-items:baseline;gap:.5rem;margin-top:1.4rem;padding:.45rem .9rem;border-radius:999px;background:var(--paper);border:1px solid var(--ln);font-size:.9rem;color:var(--mu)}
.price-chip b{color:var(--ink);font-size:1.05rem;letter-spacing:-.02em}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.ticks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2rem;font-size:.88rem;color:var(--mu)}
.ticks li{display:inline-flex;align-items:center;gap:.4rem}
.ticks svg{width:1.05em;height:1.05em;color:var(--blue)}
@keyframes rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.hero__stage{position:relative;min-height:clamp(480px,44vw,620px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem}
.stage__glow{position:absolute;inset:6% 4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(35,70,255,.18),rgba(35,70,255,.05) 55%,transparent 75%);filter:blur(10px);pointer-events:none}
.tilt{position:relative;perspective:1200px;display:grid;place-items:center;padding-right:clamp(40px,6vw,90px)}
.tilt .pcard{transform:rotateY(var(--ry,-12deg)) rotateX(var(--rx,4deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:float 7s ease-in-out infinite}
.phone--hero{--pw:clamp(118px,11vw,152px);position:absolute;right:0;bottom:-4%;transform:rotate(8deg);animation:float 7s ease-in-out -3.5s infinite}
@keyframes float{50%{translate:0 -10px}}
.swatch{position:relative;display:inline-flex;gap:.25rem;padding:.3rem;background:rgba(255,255,255,.75);border:1px solid var(--ln);border-radius:999px;backdrop-filter:blur(10px)}
.swatch__b{display:inline-flex;align-items:center;gap:.5rem;border:0;background:none;padding:.5rem 1rem;border-radius:999px;font-size:.86rem;font-weight:600;color:var(--mu);transition:background .25s,color .25s}
.swatch__b.is-on{background:var(--ink);color:#fff}

/* ========== Tap-Story ========== */
.tap{height:260vh;background:linear-gradient(var(--bg),var(--paper) 30%)}
.tap__stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.tap__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.tap__copy{min-width:0}
.steps{list-style:none;padding:0;margin-top:2.2rem;display:grid;gap:1.4rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:2.2rem 1fr;gap:.2rem 1rem;opacity:.38;transition:opacity .4s;counter-increment:s}
.steps li::before{content:counter(s);grid-row:span 2;width:2.2rem;height:2.2rem;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font:500 .8rem var(--f-mono);transition:background .3s,color .3s,border-color .3s}
.steps li.is-on{opacity:1}
.steps li.is-on::before{background:var(--blue);border-color:var(--blue);color:#fff}
.steps b{font-size:1.15rem;letter-spacing:-.02em}
.steps span{color:var(--mu);font-size:.98rem;max-width:42ch}
.tap__bar{margin-top:2.2rem;height:3px;background:var(--ln);border-radius:9px;max-width:360px;overflow:hidden}
.tap__bar i{display:block;height:100%;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0))}
.tap__vis{--t:0;position:relative;height:min(78svh,640px);display:grid;place-items:center}
.tap__sign{width:clamp(220px,24vw,320px);height:auto;transform:rotate(-3deg) translateX(-18%);filter:drop-shadow(0 30px 30px rgba(12,14,24,.22))}
.phone--tap{--pw:clamp(130px,13vw,180px);position:absolute;left:50%;top:50%;transform:translate(calc(-50% + 72% - var(--t)*40%),calc(-50% + 42% - var(--t)*50%)) rotate(calc(18deg - var(--t)*24deg));transition:transform .15s linear;z-index:2}
.rings{position:absolute;left:52%;top:30%;width:0;height:0;z-index:1;opacity:0;transition:opacity .3s}
.tap__vis.is-ping .rings{opacity:1}
.rings i{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border:2px solid var(--blue);border-radius:50%;opacity:0}
.tap__vis.is-ping .rings i{animation:ping 1.8s cubic-bezier(.2,.7,.3,1) infinite}
.tap__vis.is-ping .rings i:nth-child(2){animation-delay:.6s}
.tap__vis.is-ping .rings i:nth-child(3){animation-delay:1.2s}
@keyframes ping{0%{transform:scale(.25);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* ========== Schwarz / Weiß ========== */
.duo{background:var(--paper);padding-top:clamp(4rem,10vh,7rem)}
.duo__head{display:grid;gap:.4rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.duo__head .lead{margin-top:1rem}
.duo__grid{display:grid;grid-template-columns:1fr 1fr}
.duo__half{padding-block:clamp(3.5rem,9vh,6rem);padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px));overflow:hidden}
.duo__half--dark{background:radial-gradient(90% 70% at 50% 35%,#24252c,var(--night) 70%);color:var(--on-night)}
.duo__half--light{background:radial-gradient(90% 70% at 50% 35%,#ffffff,#eceef2 75%)}
.duo__in{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:440px;margin-inline:auto}
.duo__img{width:clamp(220px,22vw,300px);height:auto;transform:rotate(-2deg);filter:drop-shadow(0 30px 30px rgba(0,0,0,.35))}
.duo__half--light .duo__img{transform:rotate(2deg);filter:drop-shadow(0 30px 30px rgba(12,14,24,.2))}
.duo__txt{text-align:center;display:grid;gap:.7rem;justify-items:center}
.duo__txt h3{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:2.6rem;letter-spacing:-.01em}
.duo__txt p{max-width:34ch}
.duo__half--dark .duo__txt p{color:var(--mu-night)}
.duo__half--light .duo__txt p{color:var(--mu)}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-block:clamp(3rem,7vh,4.5rem) 0;padding-bottom:clamp(4rem,9vh,6rem)}
.specs>div{padding:1.2rem 1.2rem 0 0;border-top:1px solid var(--ln);min-width:0}
.specs dt{font:500 .7rem var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mu)}
.specs dd{margin-top:.45rem;font-weight:600;font-size:1rem;letter-spacing:-.01em}

/* ========== Formularfelder ========== */
.field{display:grid;gap:.4rem;min-width:0;border:0;padding:0;margin:0}
.field--full{grid-column:1/-1}
.field>span,.field legend{font-size:.82rem;font-weight:600;padding:0}
.field legend{margin-bottom:.4rem}
.field i{font-style:normal;font-weight:400;color:var(--mu)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--field);border:1px solid var(--ln);border-radius:12px;padding:.78rem .9rem;transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--mu) 50%),linear-gradient(135deg,var(--mu) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.field textarea{resize:vertical;min-height:5.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(35,70,255,.14)}
.is-bad{border-color:#d93a3a!important;box-shadow:0 0 0 4px rgba(217,58,58,.12)!important}
.seg{display:grid;gap:.3rem;padding:.3rem;background:var(--field);border:1px solid var(--ln);border-radius:16px}
.seg--2{grid-template-columns:repeat(2,1fr)}
.seg--3{grid-template-columns:repeat(3,1fr)}
.pick{position:relative;display:block}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick span{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem .5rem;border-radius:12px;font-weight:600;font-size:.88rem;color:var(--mu);transition:background .2s,color .2s;text-align:center}
.pick input:checked+span{background:var(--ink);color:#fff}
.pick input:focus-visible+span{outline:2.5px solid var(--blue);outline-offset:2px}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;color:var(--mu);grid-column:1/-1}
.consent input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--blue);flex:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.stepper{display:inline-grid;grid-template-columns:2.4rem 3rem 2.4rem;align-items:center;background:var(--field);border:1px solid var(--ln);border-radius:999px;overflow:hidden}
.stepper button{height:2.4rem;border:0;background:none;font-size:1.2rem;font-weight:600;color:var(--ink);transition:background .2s}
.stepper button:hover{background:rgba(12,13,16,.06)}
.stepper input{width:100%;height:2.4rem;border:0;background:none;text-align:center;font:600 1rem var(--f-sans);color:var(--ink);-moz-appearance:textfield;appearance:textfield;padding:0}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper--lg{grid-template-columns:2.8rem 1fr 2.8rem;width:100%;border-radius:12px}
.stepper--lg button,.stepper--lg input{height:2.95rem}
.status{font-size:.92rem;color:var(--mu);min-height:1.2em}
.is-ok{color:#14804a!important;font-weight:600}
.is-err{color:#c22f2f!important}

/* ========== Branchen ========== */
.br{padding-block:clamp(4.5rem,10vh,7rem)}
.sec-head{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,6vh,4rem)}
.sec-head>*{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.chip{border:1px solid var(--ln);background:var(--paper);border-radius:999px;padding:.55rem 1.05rem;font-size:.88rem;font-weight:600;color:var(--mu);transition:all .2s}
.chip:hover{color:var(--ink);border-color:rgba(12,13,16,.3)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.br__panel{display:grid;grid-template-columns:1.45fr .55fr;background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 0 var(--ln),0 30px 60px -40px rgba(20,24,40,.25)}
.br__photo{position:relative;margin:0;min-height:340px;background:#e9e6e1}
.br__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.br__photo figcaption{position:absolute;left:1rem;bottom:1rem;font:500 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(12,13,16,.45);backdrop-filter:blur(6px);padding:.35rem .6rem;border-radius:99px}
.br__txt{padding:clamp(1.8rem,3.4vw,3rem);display:grid;align-content:center;gap:.5rem;min-width:0}
.br__k{font:500 .7rem var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mu)}
.br__where{font:italic 400 clamp(1.7rem,2.8vw,2.5rem)/1.05 var(--f-serif);letter-spacing:-.01em;margin-bottom:1.4rem;text-wrap:balance}
.br__why{color:var(--mu);max-width:48ch}
.br__txt>*{transition:opacity .3s,transform .3s}
.br__panel.is-swap .br__txt>*{opacity:0;transform:translateY(6px)}
.br__panel.is-swap .br__photo img{opacity:.2}

/* ========== Ablauf ========== */
.proc{padding-block:clamp(4.5rem,10vh,7rem);background:var(--paper)}
.proc__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.proc__list li{border-top:1px solid var(--ln);padding-top:1.4rem;display:grid;gap:.6rem;align-content:start;min-width:0}
.proc__n{font:500 .8rem var(--f-mono);color:var(--blue);width:2rem;height:2rem;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;margin-bottom:.4rem}
.proc__list p{color:var(--mu);font-size:.95rem}

/* ========== Preise ========== */
.ways{padding-block:clamp(4.5rem,10vh,7rem)}
.ways__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.way{background:var(--paper);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:.9rem;box-shadow:0 1px 0 var(--ln),0 30px 60px -45px rgba(20,24,40,.3);min-width:0}
.way--dark{background:radial-gradient(120% 90% at 100% 0%,#23253a,var(--night) 60%);color:var(--on-night)}
.way__k{display:inline-flex;align-items:center;gap:.5rem;font:500 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.way--dark .way__k{color:var(--mu-night)}
.way__k svg{width:1.4em;height:1.4em}
.way h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em}
.way h3 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--blue)}
.way--dark h3 em{color:#9aabff}
.way__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;margin-top:.4rem}
.way__price b{font-size:clamp(2.4rem,4.2vw,3.4rem);letter-spacing:-.045em;line-height:1}
.way__price span{color:var(--mu);font-size:.9rem}
.way--dark .way__price span,.way--dark .way__sub{color:var(--mu-night)}
.way__sub{color:var(--mu);font-size:.92rem}
.way__list{list-style:none;padding:0;display:grid;gap:.55rem;margin:.6rem 0 1rem;font-size:.95rem}
.way__list li{display:flex;gap:.55rem;align-items:flex-start}
.way__list svg{width:1.1em;height:1.1em;flex:none;margin-top:.2em;color:var(--blue)}
.way--dark .way__list svg{color:#9aabff}
.way .btn{margin-top:auto;align-self:flex-start}
.calc{margin-top:1.4rem;background:var(--paper);border-radius:var(--r-lg);padding:1.3rem clamp(1.3rem,3vw,2.2rem);display:grid;grid-template-columns:auto auto 1fr;gap:1rem 2rem;align-items:center;box-shadow:0 1px 0 var(--ln)}
.calc h3{font-size:1.05rem}
.calc__qty{display:flex;gap:.3rem;padding:.3rem;background:var(--field);border:1px solid var(--ln);border-radius:999px;justify-self:start}
.calc__b{border:0;background:none;min-width:2.6rem;padding:.45rem .7rem;border-radius:999px;font-weight:600;color:var(--mu);font-variant-numeric:tabular-nums}
.calc__b.is-on{background:var(--ink);color:#fff}
.calc__out{display:flex;gap:2rem;justify-content:flex-end;flex-wrap:wrap}
.calc__out dt{font:500 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.calc__out dd{margin:.2rem 0 0;font-size:1.5rem;font-weight:650;letter-spacing:-.03em}
.ways__note{margin-top:1rem}

/* ========== Shop ========== */
.shop{padding-block:clamp(4.5rem,10vh,7rem);background:var(--paper)}
.shop__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.shop__vis{position:sticky;top:calc(var(--navh) + env(safe-area-inset-top,0px) + 1.5rem);display:grid;gap:1.2rem;min-width:0}
.shop__stage{position:relative;aspect-ratio:1/1.05;border-radius:var(--r-lg);background:radial-gradient(70% 60% at 50% 40%,#ffffff,#e6e8ed 85%);overflow:hidden;box-shadow:inset 0 0 0 1px var(--ln)}
.shop__stage .pcard__img{inset:9% 16% 9% 16%;width:68%;height:82%}
.linkcheck{display:grid;margin-top:-.2rem;grid-template-columns:96px 1fr;gap:1rem;align-items:center;background:var(--bg);border-radius:18px;padding:.9rem}
.linkcheck__qr{width:96px;height:96px;background:#fff;border-radius:10px;padding:6px}
.linkcheck__qr svg{display:block;width:100%;height:100%}
.linkcheck__qr rect{fill:var(--ink)}
.linkcheck p{font-size:.86rem;color:var(--mu)}
.linkcheck b{display:block;color:var(--ink);margin-bottom:.15rem}
.shop__form{display:grid;gap:1.1rem;min-width:0}
.shop__form h2{margin-bottom:.6rem}
.qty{display:grid;gap:.6rem}
.qty__row{display:grid;grid-template-columns:56px 1fr auto;gap:1rem;align-items:center;padding:.7rem .9rem .7rem .7rem;border:1px solid var(--ln);border-radius:18px;transition:border-color .2s,background .2s}
.qty__row.is-on{border-color:var(--ink);background:var(--bg)}
.qty__row img{width:56px;height:70px;object-fit:contain}
.qty__name{display:grid}
.qty__name b{font-size:1.05rem}
.qty__name span{color:var(--mu);font-size:.88rem}
.sum{display:grid;gap:.45rem;padding:1rem 1.1rem;border-radius:18px;background:var(--bg)}
.sum div{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;color:var(--mu)}
.sum dd{margin:0;color:var(--ink);font-weight:600}
.sum .sum__total{border-top:1px solid var(--ln);padding-top:.6rem;margin-top:.2rem;font-size:1.15rem;color:var(--ink);font-weight:650}
.sum__total dd{font-size:1.3rem;letter-spacing:-.02em}
.btn svg:first-child:not(:last-child){width:1.1em;height:1.1em}
.shop__status,.visit__status{font-size:.92rem;color:var(--mu)}
.shop__status:empty,.visit__status:empty{display:none}

/* ========== Vor Ort ========== */
.local{background:var(--night);color:var(--on-night);padding-block:clamp(5rem,12vh,8rem);overflow:hidden}
.local__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.local__copy{min-width:0}
.local h2 em{color:#9aabff}
.local .lead{color:var(--mu-night);margin-top:1.2rem}
.radar{margin-top:2.2rem;display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:1.6rem;align-items:center}
.radar__svg{width:100%;height:auto;overflow:visible}
.radar__r{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5}
.radar__r--30{fill:rgba(154,171,255,.1);stroke:rgba(154,171,255,.55);stroke-dasharray:4 5}
.radar__r--50{fill:rgba(154,171,255,.04)}
.radar__ax{stroke:rgba(255,255,255,.07)}
.radar__t{fill:var(--mu-night);font:500 11px var(--f-mono);text-anchor:middle;letter-spacing:.05em}
.radar__t--home{text-anchor:start;fill:var(--on-night)}
.radar__home{fill:#fff}
.radar__dot{fill:var(--gold);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.radar__dot.is-far{fill:#ff6b6b}
.radar__pulse{opacity:.35;animation:pulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.6);opacity:0}}
.radar__form{display:grid;gap:.8rem;min-width:0}
.field--dark>span{color:var(--on-night)}
.plz{display:flex;gap:.5rem}
.plz input{flex:1;min-width:0;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;font:600 1.1rem var(--f-mono)!important;letter-spacing:.1em}
.plz input::placeholder{color:rgba(255,255,255,.35);letter-spacing:.04em}
.plz .btn{padding:.7rem 1.1rem}
.radar__res{font-size:.95rem;color:var(--mu-night)}
.radar__res b{color:#fff}
.radar__res.r-ok b{color:#7ee2a8}
.radar__res.r-mid b{color:var(--gold)}
.radar__res.r-far b{color:#ff8b8b}
.visit{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:1.1rem;min-width:0}
.visit__h{font-size:1.4rem;letter-spacing:-.03em}
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.visit__price{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.1rem 1rem;padding:1rem 1.1rem;border-radius:18px;background:var(--blue-soft)}
.visit__price span{font-weight:600}
.visit__price b{font-size:1.7rem;letter-spacing:-.03em;grid-row:span 2}
.visit__price small{color:var(--mu);font-size:.84rem}
.visit .fine{margin-top:-.3rem}

/* ========== Warum ========== */
.why{background:var(--bg);padding-block:clamp(5rem,12vh,8rem)}
.why__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem 5rem;align-items:start}
.why__list{list-style:none;padding:0;display:grid;gap:0}
.why__list li{border-top:1px solid var(--ln);padding-block:1.4rem;display:grid;gap:.4rem}
.why__list li:last-child{border-bottom:1px solid var(--ln)}
.why__list p{color:var(--mu);max-width:46ch}

/* ========== FAQ ========== */
.faq{padding-block:clamp(4.5rem,10vh,7rem);background:var(--paper)}
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem 5rem}
.faq__grid>*{min-width:0}
.faq .lead{margin-top:1rem}
.mail{font-weight:600;word-break:break-all}
.faq__list details{border-bottom:1px solid var(--ln)}
.faq__list details:first-child{border-top:1px solid var(--ln)}
.faq__list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding-block:1.25rem;font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"";flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230c0d10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform .3s}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list p{color:var(--mu);padding-bottom:1.3rem;max-width:62ch}

/* ========== Abschluss ========== */
.end{background:var(--blue);color:#fff;padding-block:clamp(4rem,10vh,6.5rem);overflow:hidden}
.end__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem}
.end h2{font-size:clamp(2.3rem,5.6vw,4.8rem);letter-spacing:-.045em}
.end h2 em{color:#fff;opacity:.9}
.foot{padding-block:3rem calc(3rem + env(safe-area-inset-bottom,0px));background:var(--bg)}
.foot__in{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 2rem;align-items:center}
.foot p{color:var(--mu);font-size:.9rem}
.foot nav{display:flex;gap:1.4rem;font-size:.88rem;flex-wrap:wrap}
.foot nav a{text-decoration:none;color:var(--mu)}
.foot nav a:hover{color:var(--ink)}
.foot small{grid-column:1/-1;color:var(--mu);font-size:.76rem;border-top:1px solid var(--ln);padding-top:1.2rem}
.mcta{display:none}

/* ========== Danke-Seite & Rechtliches ========== */
.legal{padding-block:calc(var(--navh) + env(safe-area-inset-top,0px) + 3rem) 5rem;min-height:70vh}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.045em;margin-bottom:2rem}
.legal h2{font-size:1.3rem;letter-spacing:-.02em;margin:2.2rem 0 .6rem}
.legal p,.legal li{color:var(--mu);max-width:65ch}
.legal p+p{margin-top:.7rem}
.legal ul,.legal ol{padding-left:1.2rem;display:grid;gap:.3rem}
.legal .todo{background:#fff4d6;color:#7a5200;border-radius:6px;padding:0 .3em}
.legal .todo--block{display:block;padding:.6rem .8rem;margin-bottom:1.4rem}
.legal .back{display:inline-flex;margin-bottom:2rem}
.thanks__card{background:var(--paper);border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,3rem);display:grid;gap:1rem;box-shadow:0 1px 0 var(--ln),0 30px 60px -45px rgba(20,24,40,.3)}
.thanks__ic{width:3.4rem;height:3.4rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.thanks__ic svg{width:55%;height:55%}
.thanks__ic.is-wait{background:var(--field);color:var(--mu)}

/* ========== Responsive ========== */
@media (max-width:1020px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .proc__list{grid-template-columns:1fr 1fr}
  .specs{grid-template-columns:1fr 1fr}
  .specs>div{padding-bottom:1.2rem}
  .calc{grid-template-columns:1fr}
  .calc__out{justify-content:flex-start}
  .radar{grid-template-columns:1fr}
  .radar__svg{max-width:260px}
}
@media (max-width:860px){
  :root{--navh:60px}
  body{font-size:16px}
  .nav__cta{display:none}
  .nav__burger{display:inline-block}
  .logo img{height:26px}
  .hero__grid,.faq__grid,.why__grid,.sec-head,.ways__grid,.shop__grid,.local__grid{grid-template-columns:1fr}
  .hero__stage{min-height:auto;padding-block:1.5rem 0}
  .hero__h{font-size:clamp(2.7rem,12vw,4.2rem)}
  .tilt{padding-right:56px}
  .pcard{--w:min(64vw,290px)}
  .phone--hero{--pw:min(30vw,128px)}
  .tap{height:230vh}
  .tap__grid{grid-template-columns:1fr;gap:0;align-content:center;height:100%;padding-block:calc(var(--navh) + env(safe-area-inset-top,0px) + .5rem) 1rem}
  .tap__copy h2{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  .tap__copy .eyebrow{margin-bottom:.6rem}
  .steps{margin-top:1rem;gap:.55rem}
  .steps li span{display:none}
  .steps li.is-on span{display:block}
  .tap__bar{margin-top:1rem}
  .tap__vis{order:2;height:44svh}
  .tap__sign{width:min(42vw,200px)}
  .phone--tap{--pw:min(26vw,124px)}
  .duo__grid{grid-template-columns:1fr}
  .br__panel{grid-template-columns:1fr}
  .br__photo{min-height:0;aspect-ratio:3/2}
  .shop__vis{display:none}
  .foot__in{grid-template-columns:1fr}
  .mcta{display:inline-flex;position:fixed;z-index:50;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .mcta.is-on{transform:translate(-50%,0)}
}
@media (max-width:520px){
  .visit__grid{grid-template-columns:1fr}
  .proc__list{grid-template-columns:1fr}
  .seg--3 .pick span{font-size:.8rem;gap:.3rem}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .specs{grid-template-columns:1fr}
  .qty__row{grid-template-columns:44px 1fr auto;gap:.7rem}
  .qty__row img{width:44px;height:55px}
  .calc__out{gap:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tap{height:auto}
  .tap__stick{position:static;height:auto;padding-block:5rem}
  .steps li{opacity:1}
  .steps li span{display:block!important}
}

/* ========== E-Mail-Anfrage ========== */
.visit .qty{gap:.5rem}
.mailout{display:grid;gap:.8rem;padding:1rem 1.1rem;border-radius:18px;background:var(--bg)}
.mailout p{font-size:.9rem;color:var(--mu)}
.mailout b{color:var(--ink);user-select:all}
.mailout textarea{font:400 .82rem/1.5 var(--f-mono)!important;background:#fff!important}
.mailout .btn{justify-self:start}