/* VISORA Marketing · Relaunch 10/2026
   Ruhige Flächen, starke Typografie, Bewegung nur über transform/opacity.
   Ohne JavaScript bleibt alles sichtbar (Animationen hängen an html.motion). */

@font-face{font-family:Manrope;src:url('/assets/manrope-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}

:root{
  --brand:#6265E5;--brand-hover:#5154d4;--brand-ink:#4a4dc4;--brand-soft:#eeeefd;--brand-glow:#6265e533;
  --ink:#16162a;--ink-2:#3a3a52;--muted:#686880;--line:#e6e6f0;--surface:#f5f5fa;--surface-2:#efeff7;--night:#111124;
  --radius-s:12px;--radius:22px;--radius-l:32px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --nav-h:64px;
  --pad:clamp(22px,5vw,64px);
  --section:clamp(96px,12vw,176px);
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.55;letter-spacing:-.006em;font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a,button,summary{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,figure{margin-top:0}
h1,h2,h3{font-weight:750;text-wrap:balance;color:var(--ink)}
p{text-wrap:pretty}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:6px}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:var(--section);padding-bottom:var(--section)}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:700}
.skip-link:focus{top:12px}

/* ---------- Typo ---------- */
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--brand-ink);margin-bottom:18px}
h1{font-size:clamp(46px,7.6vw,116px);line-height:1;letter-spacing:-.05em;margin-bottom:28px}
h1 span,h2 span{color:var(--brand)}
h2{font-size:clamp(38px,5.4vw,76px);line-height:1.04;letter-spacing:-.045em;margin-bottom:24px}
h3{font-size:clamp(21px,1.7vw,26px);line-height:1.22;letter-spacing:-.025em;margin-bottom:12px}
.intro{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--muted);max-width:640px}
.section-heading{max-width:760px;margin-bottom:clamp(48px,6vw,88px)}
.section-heading>p:not(.eyebrow){font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:560px;margin-bottom:0}
.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}
.section-heading.center>p{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:background-color .2s ease,transform .12s ease-out,box-shadow .3s ease;box-shadow:0 8px 24px -10px var(--brand)}
.button:active{transform:scale(.97)}
.button.small{min-height:38px;padding:8px 16px;font-size:14px;box-shadow:none}
.button.light{background:#fff;color:var(--brand-ink);box-shadow:none}
.button[disabled]{opacity:.6;cursor:progress}
.text-button{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:700;color:var(--brand-ink)}
.text-button span{font-size:22px;line-height:1;transition:transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .button:hover{background:var(--brand-hover);box-shadow:0 12px 30px -10px var(--brand)}
  .button.light:hover{background:var(--brand-soft)}
  .text-button:hover span{transform:translateX(4px)}
}

/* ---------- Navigation (Material) ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:#ffffffc7;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s ease,background-color .3s ease}
.nav.is-scrolled{border-bottom-color:#16162a14}
.nav-inner{max-width:1320px;height:100%;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:28px;width:auto}
.nav nav{display:flex;gap:clamp(16px,2.2vw,32px);font-size:14px;font-weight:600;color:var(--ink-2)}
.nav nav a{position:relative;padding:8px 0;transition:color .2s ease}
.nav nav a[aria-current=location]{color:var(--brand-ink)}
.nav nav a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transition:transform .3s var(--ease-out)}
.nav nav a[aria-current=location]:after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.nav nav a:hover{color:var(--brand-ink)}}
@media(max-width:940px){.nav nav{display:none}}
@media(prefers-reduced-transparency:reduce){.nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(56px,9vw,128px);overflow:clip;isolation:isolate}
.hero:before{content:"";position:absolute;z-index:-1;left:50%;top:38%;width:min(1500px,140vw);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(closest-side,#6265e526,#6265e50d 55%,transparent);pointer-events:none}
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-copy .intro{margin-bottom:36px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}
.hero-reassurance{font-size:14px;color:var(--muted);margin:22px 0 0}
.hero-stage{max-width:1480px;margin:clamp(48px,6vw,88px) auto 0;padding:0 clamp(12px,3vw,48px);perspective:2000px}
.hero-device{--p:1;position:relative;margin:0;border-radius:clamp(20px,3vw,44px);overflow:hidden;background:#f3f3fb;transform-origin:50% 0;transform:rotateX(calc((1 - var(--p)) * 18deg)) scale(calc(.86 + var(--p) * .14));box-shadow:0 60px 120px -60px #23236a40}
.hero-device>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-device figcaption{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12px;color:#7a7a92}
.hero-chip{position:absolute;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;background:#ffffffd9;-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid #ffffff;box-shadow:0 24px 48px -20px #1e1e5c40,0 2px 6px #1e1e5c0f;font-size:14px;line-height:1.25;transform:translate3d(0,calc((1 - var(--p)) * var(--lift,40px)),0)}
.hero-chip b{display:block;font-weight:750;color:var(--ink)}
.hero-chip small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.chip-dot{width:12px;height:12px;border-radius:50%;flex:none;background:#2fb36d;box-shadow:0 0 0 5px #2fb36d26}
.chip-dot.brand{background:var(--brand);box-shadow:0 0 0 5px var(--brand-glow)}
.chip-a{left:4%;top:9%;--lift:70px}
.chip-b{right:3%;top:30%;--lift:110px}
.chip-c{left:5%;bottom:14%;flex-direction:column;align-items:flex-start;gap:0;padding:16px 22px;--lift:150px}
.chip-c b{font-size:40px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--brand)}
.chip-c small{margin:0 0 2px}
.benefit-strip{list-style:none;margin:clamp(40px,5vw,72px) auto 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.benefit-strip li{padding:10px 18px;border-radius:999px;background:var(--surface);font-size:15px;font-weight:600;color:var(--ink-2)}
.benefit-strip li:before{content:"✓";color:var(--brand);font-weight:800;margin-right:8px}
.fulfillment-shortcut{display:block;text-align:center;margin-top:28px;font-size:15px;color:var(--muted)}
.fulfillment-shortcut strong{color:var(--brand-ink)}
@media(max-width:760px){
  .hero-device>img{aspect-ratio:4/3;object-position:30% 50%}
  .chip-b{display:none}
  .hero-chip{padding:10px 12px;font-size:12px;border-radius:14px}
  .chip-a{left:3%;top:5%}
  .chip-c{left:4%;bottom:12%;padding:10px 14px}.chip-c b{font-size:28px}
  .hero-device figcaption{font-size:10px;bottom:8px;padding:0 12px}
  .benefit-strip li{font-size:14px}
}

/* ---------- Zahlen ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);padding-top:clamp(80px,10vw,140px)}
.number{border-top:1px solid var(--line);padding-top:24px}
.number b{display:block;font-size:clamp(56px,7vw,104px);line-height:1;font-weight:750;letter-spacing:-.06em;color:var(--brand);font-variant-numeric:tabular-nums;margin-bottom:14px}
.number span{display:block;font-size:16px;color:var(--muted);max-width:240px}
@media(max-width:860px){.numbers{grid-template-columns:repeat(2,1fr)}}

/* ---------- Software-Showcase (Sticky-Scroll) ---------- */
.software{background:linear-gradient(#fff,var(--surface) 30%,var(--surface) 80%,#fff)}
.showcase{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.showcase-device{position:sticky;top:calc(var(--nav-h) + max(24px,(100vh - var(--nav-h) - 520px) / 2))}
.device-frame{padding:clamp(8px,1vw,14px);border-radius:clamp(18px,2vw,28px);background:#16162a;box-shadow:0 50px 100px -40px #23236a59,inset 0 0 0 1px #ffffff1a}
.device-screen{position:relative;aspect-ratio:1790/878;border-radius:clamp(10px,1.2vw,16px);overflow:hidden;background:#f3f4f8}
.device-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.015);transition:opacity .7s var(--ease-out),transform 1.2s var(--ease-out)}
.device-screen img.is-active{opacity:1;transform:none}
.showcase-progress{height:4px;border-radius:4px;background:var(--line);margin:22px auto 0;width:min(320px,60%);overflow:hidden}
.showcase-progress i{display:block;height:100%;width:100%;background:var(--brand);border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--sp,.2));transition:transform .6s var(--ease-out)}
.device-note{text-align:center;font-size:13px;color:var(--muted);margin:14px 0 0}
.showcase-steps{list-style:none;padding:0;margin:0}
.showcase-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;transition:opacity .5s ease}
html.motion .showcase-step:not(.is-active){opacity:.32}
.showcase-step:first-child{min-height:56vh}
.showcase-step:last-child{min-height:64vh}
.step-index{font-size:14px;font-weight:800;color:var(--brand);letter-spacing:.04em;margin-bottom:14px}
.showcase-step h3{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.035em;line-height:1.1;margin-bottom:16px}
.showcase-step p{font-size:clamp(17px,1.35vw,19px);color:var(--muted);max-width:440px;margin:0}
.step-image{display:none}
/* Mobil (Nachtrag 03.10.2026): Bildschirm klebt oben, Texte scrollen darunter durch, der Bildschirm wechselt per IntersectionObserver. */
@media(max-width:980px){
  .showcase{grid-template-columns:1fr;gap:0}
  .showcase-device{top:calc(var(--nav-h) + 8px);z-index:3;margin:0 calc(var(--pad) * -1);padding:8px var(--pad) 18px;background:linear-gradient(var(--surface) 86%,#f5f5fa00)}
  .device-frame{padding:6px;border-radius:16px}
  .device-screen{border-radius:10px;aspect-ratio:16/11}
  .device-screen img{object-position:22% 0}
  .showcase-progress{margin-top:12px}
  .device-note{display:none}
  .showcase-step,.showcase-step:first-child,.showcase-step:last-child{min-height:58vh;min-height:58svh;justify-content:flex-start;padding:32px 0 24px}
  .showcase-step h3{font-size:clamp(26px,7vw,34px)}
  html:not(.motion) .showcase-device{display:none}
  html:not(.motion) .showcase-step{min-height:0;padding:0 0 56px}
  html:not(.motion) .step-image{display:block;margin-top:24px;border-radius:16px;border:6px solid #16162a;box-shadow:0 30px 60px -30px #23236a59}
}

/* ---------- Editorial + Bento ---------- */
.editorial-story{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;margin-bottom:var(--section)}
.editorial-image{position:relative;margin:0;border-radius:var(--radius-l);overflow:hidden;background:var(--surface)}
.editorial-image img{width:100%;aspect-ratio:5/4;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.12)}
.editorial-image figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 16px;background:linear-gradient(transparent,#11112499);color:#fff;font-size:12px}
.editorial-copy p:not(.eyebrow){font-size:19px;color:var(--muted);max-width:420px;margin-bottom:28px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bento-card{background:var(--surface);border-radius:var(--radius);padding:clamp(24px,2.4vw,36px);min-height:260px;display:flex;flex-direction:column;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.bento-card p{color:var(--muted);font-size:16px;margin:0}
.bento-wide{grid-column:span 2;grid-row:span 2;background:var(--night);color:#fff}
.bento-wide h3{color:#fff;font-size:clamp(30px,3vw,46px);letter-spacing:-.04em;line-height:1.05}
.bento-wide p{color:#c4c4dc;font-size:18px;max-width:420px}
.feature-number{font-size:13px;font-weight:700;color:var(--brand-ink);margin-bottom:auto;padding-bottom:28px}
.bento-wide .feature-number{color:#a9abff}
.stock-visual{position:relative;margin-top:auto;padding-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end}
.stock-visual span{text-align:center;padding:10px;border-radius:12px;background:#ffffff12;border:1px solid #ffffff1f;font-size:13px;font-weight:600;color:#dedef5}
.stock-visual i{grid-column:1/-1;height:28px;margin:0 16%;border:2px solid #6265e5aa;border-top:0;border-radius:0 0 18px 18px}
.stock-visual b{grid-column:1/-1;justify-self:center;padding:12px 22px;border-radius:999px;background:var(--brand);font-size:15px}
@media(hover:hover) and (pointer:fine){.bento-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px #23236a33}}
@media(max-width:980px){.bento{grid-template-columns:1fr 1fr}.editorial-story{grid-template-columns:1fr}}
@media(max-width:620px){.bento{grid-template-columns:1fr}.bento-wide{grid-column:auto;grid-row:auto}.bento-card{min-height:0}}

/* ---------- Bestandsgruppen (Nachtrag 03.10.2026) ---------- */
.groups{padding-top:0}
.groups-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.groups-visual{position:relative;margin:0;padding:clamp(20px,3vw,40px);border-radius:var(--radius-l);background:var(--surface);display:grid;gap:16px}
.group-box{position:relative;padding:18px;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 2px var(--brand),0 30px 60px -36px var(--brand)}
.group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.group-tag{padding:6px 12px;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;font-weight:800}
.group-total{font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.group-total b{min-width:44px;text-align:center;padding:4px 10px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);font-size:18px;font-variant-numeric:tabular-nums;transition:transform .35s var(--ease-out)}
.group-shops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shop-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:14px;border-radius:16px;background:var(--surface)}
.shop-card b{font-size:15px;letter-spacing:-.01em;grid-column:2}
.shop-card small{grid-column:2;font-size:12px;color:var(--muted)}
.shop-card strong{grid-column:3;grid-row:1/span 2;font-size:28px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);transition:transform .35s var(--ease-out),color .35s ease}
.shop-icon{grid-row:1/span 2;width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px #d6d6ea;position:relative}
.shop-icon:before{content:"";position:absolute;left:9px;right:9px;top:13px;bottom:8px;border:2px solid var(--brand);border-radius:3px 3px 5px 5px}
.shop-icon:after{content:"";position:absolute;left:13px;right:13px;top:8px;height:8px;border:2px solid var(--brand);border-bottom:0;border-radius:6px 6px 0 0}
.shop-solo{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.shop-sale{position:absolute;right:12px;top:-12px;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-style:normal;font-size:12px;font-weight:700;opacity:0;transform:translate3d(0,6px,0);transition:opacity .3s ease,transform .45s var(--ease-out);pointer-events:none}
.group-link{position:absolute;left:50%;top:58px;bottom:18px;width:2px;transform:translateX(-50%);background:linear-gradient(var(--brand),#6265e500);opacity:.0}
.groups-visual figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:4px}
.groups-points{list-style:none;padding:0;margin:0;display:grid;gap:22px;counter-reset:g}
.groups-points li{counter-increment:g;display:grid;grid-template-columns:36px 1fr;column-gap:16px}
.groups-points li:before{content:counter(g);grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);font-weight:800;font-size:15px}
.groups-points b{font-size:19px;letter-spacing:-.02em}
.groups-points span{color:var(--muted);font-size:16px}
/* Animationszustände (per IntersectionObserver gesetzt) */
.shop-card.is-sale .shop-sale{opacity:1;transform:none}
.is-tick{transform:scale(1.18)}
.shop-card strong.is-tick{color:var(--brand)}
@media(max-width:900px){.groups-layout{grid-template-columns:1fr}}
@media(max-width:480px){.group-shops{grid-template-columns:1fr}.shop-card strong{font-size:24px}}

/* ---------- Große Feature-Sektionen mit Beispielansichten (Nachtrag 03.10.2026) ---------- */
.feature-section.alt{background:var(--surface)}
.feature-section+.feature-section:not(.alt),.groups+.feature-section{padding-top:var(--section)}
.feature-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:center}
.feature-layout.reverse .feature-copy{order:2}
.feature-lead{font-size:clamp(18px,1.5vw,21px);color:var(--muted);margin-bottom:26px}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.check-list li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-2)}
.check-list li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--brand-soft)}
.check-list li:after{content:"";position:absolute;left:6px;top:7px;width:5px;height:8px;border:solid var(--brand);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mock{margin:0;border-radius:var(--radius-l);background:#fff;box-shadow:0 1px 2px #16162a0d,0 40px 80px -40px #23236a40;padding:18px;overflow:hidden}
.feature-section.alt .mock{box-shadow:0 40px 80px -40px #23236a40}
.feature-section:not(.alt) .mock{box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -40px #23236a33}
.mock-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 4px 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mock-bar b{font-size:15px;margin-right:auto}
.mock-chip{padding:5px 10px;border-radius:999px;background:var(--surface);font-size:12px;font-weight:700;color:var(--ink-2)}
.mock figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
/* Bestandsrechner */
.calc-head,.calc-row{display:grid;grid-template-columns:1.4fr .6fr 1.5fr .7fr;gap:12px;align-items:center;padding:10px 6px}
.calc-head{font-size:12px;font-weight:700;color:var(--muted);padding-bottom:4px}
.calc-row{border-radius:14px}
.calc-row+.calc-row{border-top:1px solid var(--line)}
.calc-row span{font-size:14px;font-variant-numeric:tabular-nums}
.calc-row span>b{display:block;font-size:14px}
.calc-row small{display:block;font-size:11px;color:var(--muted)}
.calc-row span:last-child b{font-size:20px;color:var(--brand-ink)}
.reach{position:relative;display:block;height:26px;border-radius:8px;background:var(--surface);overflow:hidden}
.reach i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:8px;transform-origin:0 50%;transform:scaleX(var(--r,1));background:#2fb36d;transition:transform 1.2s var(--ease-out) var(--d,0s)}
.calc-row[data-level=crit] .reach i{background:#e5484d}
.calc-row[data-level=low] .reach i{background:#f5a524}
.reach em{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;font-weight:700;color:var(--ink);mix-blend-mode:multiply}
html.motion [data-mock=calc]:not(.is-live) .reach i{transform:scaleX(0)}
/* Retouren */
.return-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:8px 4px}
.return-qr{display:grid;gap:10px;justify-items:center;text-align:center;font-size:13px;font-weight:700}
.return-qr small{font-weight:500;color:var(--muted)}
.return-qr i{width:116px;height:116px;border-radius:14px;background:conic-gradient(from 90deg at 2px 2px,#0000 90deg,#16162a 0) 0 0/14px 14px,linear-gradient(45deg,#16162a 25%,#0000 0 75%,#16162a 0) 0 0/21px 21px,#fff;box-shadow:inset 0 0 0 10px #fff,inset 0 0 0 11px var(--line);opacity:.9}
.return-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:relative}
.return-steps li{position:relative;padding:10px 12px 10px 40px;border-radius:14px;transition:background-color .5s ease}
.return-steps li:before{content:"";position:absolute;left:12px;top:14px;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px #cfcfe0;background:#fff;transition:background-color .4s ease,box-shadow .4s ease,transform .4s var(--ease-out)}
.return-steps li b{display:block;font-size:15px}
.return-steps li small{font-size:12px;color:var(--muted)}
.return-steps li.done:before{background:var(--brand);box-shadow:inset 0 0 0 2px var(--brand),0 0 0 5px var(--brand-glow)}
.return-steps li.current{background:var(--brand-soft)}
html:not(.motion) .return-steps li:before{background:var(--brand);box-shadow:none}
/* KI-Chat */
.chat{display:grid;gap:12px;padding:4px;min-height:330px;align-content:start}
.bubble{margin:0;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.45;max-width:88%}
.bubble.me{justify-self:end;background:var(--brand);color:#fff;border-bottom-right-radius:6px}
.bubble.ai{background:var(--surface);border-bottom-left-radius:6px}
.bubble.ai p{margin:0 0 8px}.bubble.ai p:last-child{margin:8px 0 0}
.bubble table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:10px;overflow:hidden}
.bubble th,.bubble td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}
.bubble th{font-size:11px;color:var(--muted);font-weight:700}
.bubble tr:last-child td{border-bottom:0}
.tool-chip{margin:0;justify-self:start;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.tool-chip i{width:8px;height:8px;border-radius:50%;background:#2fb36d}
html.motion [data-mock=ai] [data-chat]{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
html.motion [data-mock=ai] [data-chat].is-on{opacity:1;transform:none}
/* Weitere Funktionen */
.more{background:var(--surface)}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.more-grid article{background:#fff;border-radius:var(--radius);padding:clamp(24px,2.4vw,32px);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.more-grid h3{margin:18px 0 8px}
.more-grid p{margin:0;color:var(--muted);font-size:16px}
.more-icon{display:block;width:44px;height:44px;border-radius:14px;background:var(--brand-soft);position:relative}
.more-icon:before,.more-icon:after{content:"";position:absolute;border:2px solid var(--brand)}
.i-b2b:before{left:12px;top:10px;width:20px;height:24px;border-radius:3px}.i-b2b:after{left:17px;top:17px;width:10px;height:0;border-width:2px 0 0;box-shadow:0 5px 0 -0px var(--brand)}
.i-store:before{left:10px;top:18px;width:24px;height:16px;border-radius:2px}.i-store:after{left:8px;top:11px;width:28px;height:8px;border-radius:4px 4px 0 0}
.i-label:before{left:11px;top:9px;width:22px;height:26px;border-radius:3px}.i-label:after{left:15px;top:15px;width:14px;height:8px;border-width:0 0 2px;box-shadow:0 -4px 0 -0px var(--brand)}
.i-send:before{left:9px;top:14px;width:26px;height:18px;border-radius:3px}.i-send:after{left:14px;top:12px;width:16px;height:10px;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.7)}
.i-users:before{left:16px;top:9px;width:12px;height:12px;border-radius:50%}.i-users:after{left:11px;top:23px;width:22px;height:12px;border-radius:12px 12px 3px 3px}
.i-chart:before{left:11px;top:11px;width:22px;height:22px;border-width:0 0 2px 2px}.i-chart:after{left:16px;top:16px;width:4px;height:12px;border-width:0;background:var(--brand);box-shadow:7px -4px 0 var(--brand),14px 3px 0 var(--brand)}
@media(hover:hover) and (pointer:fine){.more-grid article:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px #23236a33}}
@media(max-width:980px){.feature-layout{grid-template-columns:1fr}.feature-layout.reverse .feature-copy{order:0}.more-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.more-grid{grid-template-columns:1fr}.calc-head,.calc-row{grid-template-columns:1.3fr 1.4fr .6fr;gap:8px}.calc-head span:nth-child(2),.calc-row span:nth-child(2){display:none}.return-body{grid-template-columns:1fr}.return-qr{grid-auto-flow:column;justify-content:start;align-items:center;text-align:left}.return-qr i{width:84px;height:84px}.mock{padding:14px}}

/* ---------- Integrationen ---------- */
.integration-section{background:var(--surface)}
/* Logos direkt in den Anbindungs-Karten (Nachtrag 03.10.2026). Shopify: mind. 80 px, Schutzraum = x-Höhe. DHL: rot nur auf Postyellow, Schutzraum >= 1/7 Logobreite, mind. 84 px. */
.brand-title{margin:0;line-height:0}
.brand-mark{display:inline-block;border-radius:10px}
.logo-shopify{width:150px;height:auto;margin:6px 0}
.dhl-field{background:#ffcc00;padding:20px 24px;border-radius:12px}
.logo-dhl{width:120px;height:auto}
.connection-flow{display:grid;grid-template-columns:1fr .45fr 1fr .45fr 1fr;align-items:center;max-width:980px;margin:0 auto clamp(56px,7vw,96px)}
.connection-node{text-align:center;border-radius:20px;padding:26px 14px;background:#fff;box-shadow:0 1px 2px #16162a0d}
.connection-node b{display:block;font-size:24px;letter-spacing:-.03em}
.connection-node span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.connection-core{background:var(--brand);color:#fff;box-shadow:0 20px 40px -18px var(--brand)}
.connection-core b,.connection-core span{color:#fff}
.connection-line{height:2px;background:#d8d8ea;position:relative;overflow:hidden}
.connection-line i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.integration-card{background:#fff;border-radius:var(--radius);padding:clamp(28px,3vw,44px)}
.integration-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:22px;min-height:62px}
.integration-title h3{font-size:30px;margin:0}
.integration-card p,.integration-card li{color:var(--muted);font-size:16px}
.integration-card ul{padding-left:20px;margin:0}.integration-card li{margin-bottom:6px}.integration-card li::marker{color:var(--brand)}
.availability{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:700}
.availability.pilot{background:#efeff4;color:#5c5c70}
.hardware-note,.trademark-note{max-width:760px;margin:28px auto 0;text-align:center;font-size:13px;color:var(--muted)}
.trademark-note{margin-top:10px;font-size:12px;color:#85859a}
@media(max-width:760px){
  .connection-flow{grid-template-columns:1fr;justify-items:stretch}.connection-line{width:2px;height:32px;justify-self:center}.connection-line i{transform-origin:50% 0}
  .integration-grid{grid-template-columns:1fr}
}

/* ---------- Vision ---------- */
.vision-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,7vw,110px);align-items:center}
.vision-copy>p:not(.eyebrow):not(.vision-limit),.vision-copy li{color:var(--muted);font-size:17px}
.vision-copy ul{padding-left:20px;margin-bottom:0}.vision-copy li{margin-bottom:6px}.vision-copy li::marker{color:var(--brand)}
.vision-limit{font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin:26px 0 0;padding-top:18px}
.vision-visual{position:relative;border-radius:var(--radius-l);background:var(--surface);overflow:hidden;padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0}
.vision-visual>img{width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply;transform:translate3d(0,var(--py,0px),0)}
.vision-example{position:relative;margin:-60px 0 clamp(20px,3vw,40px);padding:20px 22px;border-radius:20px;background:#ffffffe6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 48px -24px #23236a40}
.vision-example h3{margin:12px 0 2px;font-size:22px}.vision-example>p{color:var(--muted);font-size:14px;margin-bottom:14px}
.confirmation-example{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;padding-top:12px;border-top:1px solid var(--line)}
.confirmation-example>span:last-child{color:var(--brand-ink);font-weight:700}
@media(max-width:900px){.vision-layout{grid-template-columns:1fr}}

/* ---------- Ablauf (Tabs) ---------- */
.workflow{background:var(--surface)}
.flow-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:stretch}
.flow-steps{display:grid;gap:10px}
.flow-steps button{display:flex;align-items:center;gap:18px;text-align:left;padding:20px 22px;border:0;border-radius:18px;background:#fff;cursor:pointer;transition:background-color .25s ease,box-shadow .25s ease,transform .12s ease-out}
.flow-steps button:active{transform:scale(.985)}
.flow-steps button>span{font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;min-width:28px}
.flow-steps button b{display:block;font-size:18px;letter-spacing:-.02em}
.flow-steps button small{display:block;color:var(--muted);font-size:14px}
.flow-steps button[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--brand),0 18px 36px -24px var(--brand)}
.flow-panel{position:relative;overflow:hidden;border-radius:var(--radius-l);background:var(--brand);color:#fff;padding:clamp(32px,4vw,56px);min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
.flow-panel:before{content:"";position:absolute;right:-20%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#ffffff2e,transparent);pointer-events:none}
.flow-kicker{position:absolute;top:clamp(28px,3vw,44px);left:clamp(32px,4vw,56px);font-size:13px;font-weight:700;color:#e3e3ff}
.flow-symbol{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:#fff;color:var(--brand);font-size:36px;margin-bottom:auto;margin-top:44px;box-shadow:0 20px 40px -18px #0d0d4d66}
.flow-panel h3{color:#fff;font-size:clamp(28px,2.8vw,40px);letter-spacing:-.035em;margin:32px 0 12px}
.flow-panel p{color:#eeeeff;font-size:17px;max-width:520px}
.flow-progress{display:flex;gap:8px;margin-top:18px}
.flow-progress i{height:4px;flex:1;border-radius:4px;background:#ffffff40;transition:background-color .4s ease}
.flow-progress i.active{background:#fff}
@media(hover:hover) and (pointer:fine){.flow-steps button:not([aria-selected=true]):hover{background:var(--brand-soft)}}
@media(max-width:860px){.flow-grid{grid-template-columns:1fr}.flow-panel{min-height:380px}}

/* ---------- Hardware ---------- */
.set-showcase{display:grid;grid-template-columns:1.3fr 1fr;border-radius:var(--radius-l);overflow:hidden;background:var(--surface)}
.set-showcase figure{position:relative;margin:0;overflow:hidden}
.set-showcase figure img{width:100%;height:100%;object-fit:cover;min-height:420px;transform:translate3d(0,var(--py,0px),0) scale(1.1)}
.set-showcase figcaption{position:absolute;left:18px;bottom:14px;font-size:12px;color:#fff;text-shadow:0 1px 6px #0006}
.set-summary{padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;justify-content:center}
.set-tag{font-size:13px;font-weight:700;color:var(--brand-ink);margin-bottom:14px}
.set-summary h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.04em;line-height:1.08;margin-bottom:16px}
.set-summary>p{color:var(--muted)}
.set-summary ul{list-style:none;padding:0;margin:0 0 28px}
.set-summary li{padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}
.set-summary .button{align-self:flex-start}
.set-note{font-size:13px;color:var(--muted);margin:16px 0 0}
.set-products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.set-products article{border-radius:var(--radius);background:var(--surface);padding:12px 12px 28px;transition:transform .5s var(--ease-out)}
.set-products img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:22px;transition:transform .6s var(--ease-out)}
.set-products a{display:block;border-radius:14px;overflow:hidden}
.set-products span{display:block;padding:0 14px;font-size:13px;font-weight:700;color:var(--brand-ink);margin-bottom:8px}
.set-products h3,.set-products p{padding:0 14px}
.set-products p{color:var(--muted);font-size:16px;margin:0}
.set-bottom-note{text-align:center;margin-top:32px;color:var(--muted)}
.set-bottom-note a{color:var(--brand-ink);font-weight:700}
@media(hover:hover) and (pointer:fine){.set-products a:hover img{transform:scale(1.04)}}
@media(max-width:900px){.set-showcase{grid-template-columns:1fr}.set-showcase figure img{min-height:0;aspect-ratio:3/2}.set-products{grid-template-columns:1fr}}

/* ---------- Visora Logistics ---------- */
.logistics{padding-top:0}
.logistics-panel{border-radius:clamp(28px,3.5vw,48px);background:#14142b;color:#fff;padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) clamp(36px,5vw,72px);overflow:hidden}
.fulfillment-image{border-radius:clamp(18px,2.4vw,34px);margin-bottom:clamp(40px,5vw,72px)}
.fulfillment-image img{aspect-ratio:21/9}
.photo-note{position:absolute;top:24px;left:24px;padding:16px 20px;border-radius:16px;background:#ffffffe0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--ink);font-size:clamp(17px,1.6vw,22px);font-weight:750;letter-spacing:-.03em;line-height:1.15}
.logistics-heading,.logistics-steps,.logistics-contact,.logistics-contact-note{margin-left:clamp(14px,3vw,48px);margin-right:clamp(14px,3vw,48px)}
.logistics-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.logistics .eyebrow{color:#e3e3ff}
.logistics h2{color:#fff;margin:0;font-size:clamp(36px,4.2vw,62px)}.logistics h2 span{color:#d4d5ff}
.logistics-heading>p{color:#eeeeff;font-size:18px;margin:0}
.logistics-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.logistics-steps article{border-radius:var(--radius);background:#ffffff14;border:1px solid #ffffff24;padding:28px}
.logistics-steps span{display:block;font-size:13px;font-weight:700;color:#e3e3ff;margin-bottom:28px}
.logistics-steps h3{color:#fff}.logistics-steps p{color:#eeeeff;font-size:16px;margin:0}
.logistics-contact{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:16px;padding:32px;border-radius:var(--radius);background:#16162a}
.logistics-contact h3{color:#fff}.logistics-contact p{color:#c8c8de;margin:0;max-width:620px;font-size:16px}
.logistics-contact .button{flex:none}
.logistics-contact-note{font-size:13px;color:#e3e3ff;margin-top:20px;margin-bottom:0}
.logistics-contact-note a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.logistics-heading,.logistics-steps{grid-template-columns:1fr}.logistics-contact{flex-direction:column;align-items:flex-start}.fulfillment-image img{aspect-ratio:4/3}}

/* ---------- Visora Logistics: eigene Welt + Lkw-Animation (Nachtrag 03.10.2026) ---------- */
.logistics-panel{box-shadow:inset 0 0 0 1px #ffffff14}
.logistics .eyebrow{color:#a9abff}
.logistics h2 span{color:#a9abff}
.logistics-heading>p,.logistics-steps p{color:#c9c9e0}
.logistics-steps article{background:#ffffff0d;border-color:#ffffff1a}
.logistics-steps span{color:#a9abff}
.logistics-contact{background:var(--brand)}
.logistics-contact p{color:#eeeeff}
.logistics-contact-note{color:#a9a9c4}
.logi-stage{margin:0 0 clamp(40px,5vw,72px);padding:clamp(16px,3vw,40px) clamp(10px,3vw,40px) clamp(18px,2.5vw,28px);border-radius:clamp(18px,2.4vw,34px);background:linear-gradient(#f7f7fd,#eeeefd);overflow:hidden}
.logi-scene{display:block;width:100%;height:auto}
.logi-sign{font:800 17px Manrope,Arial,sans-serif;fill:#fff;letter-spacing:.06em}
.logi-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;justify-content:center;gap:clamp(8px,3vw,40px);flex-wrap:wrap}
.logi-steps li{position:relative;padding:8px 16px;border-radius:999px;background:#fff;color:#4a4a66;font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1px #dedef2}
.logi-steps li+li:before{content:"→";position:absolute;left:calc(-1 * clamp(8px,3vw,40px) / 2 - 6px);top:50%;transform:translateY(-50%);color:#9a9ab8;font-weight:700}
.pkg{opacity:0}
.offer-logistics{background:#14142b!important;box-shadow:none!important;color:#fff}
.offer-logistics h3{color:#fff}.offer-logistics p:not(.eyebrow){color:#c9c9e0!important}
.offer-logistics .eyebrow{color:#a9abff}.offer-logistics a{color:#c9caff!important}
.offer-choice{padding-top:var(--section)}
/* Animation nur mit Bewegung; ohne: Standbild (beide Lkw stehen, Lager gefüllt) */
html.motion .logi-scene *{animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1);animation-play-state:paused}
html.motion .logi-stage.is-playing .logi-scene *{animation-play-state:running}
html.motion .truck-in{animation-name:truck-in}
html.motion .truck-out{animation-name:truck-out}
html.motion .pkg-in{animation-name:pkg-in}
html.motion .pkg-out{animation-name:pkg-out}
html.motion .logi-stock{animation-name:stock}
html.motion .b2{animation-delay:.7s}html.motion .b3{animation-delay:1.4s}
html.motion .logi-steps li{animation:step 12s infinite paused}
html.motion .logi-stage.is-playing .logi-steps li{animation-play-state:running}
html.motion .ls-2{animation-name:step2}html.motion .ls-3{animation-name:step3}
@keyframes truck-in{0%{transform:translateX(-640px);opacity:1}16%{transform:none}52%{transform:none;opacity:1}62%{transform:translateX(-140px);opacity:0}100%{transform:translateX(-640px);opacity:0}}
@keyframes truck-out{0%,30%{transform:translateX(-40px);opacity:0}40%{transform:none;opacity:1}80%{transform:none;opacity:1}96%{transform:translateX(560px);opacity:1}100%{transform:translateX(560px);opacity:0}}
@keyframes pkg-in{0%,17%{transform:none;opacity:0}19%{opacity:1}29%{transform:translateX(72px);opacity:1}31%,100%{transform:translateX(72px);opacity:0}}
@keyframes pkg-out{0%,55%{transform:none;opacity:0}57%{opacity:1}67%{transform:translateX(112px);opacity:1}69%,100%{transform:translateX(112px);opacity:0}}
@keyframes stock{0%,24%{opacity:.25}36%,62%{opacity:1}74%,100%{opacity:.25}}
@keyframes step{0%,34%{background:#6265E5;color:#fff;box-shadow:none}38%,100%{background:#fff;color:#4a4a66}}
@keyframes step2{0%,34%{background:#fff;color:#4a4a66}38%,55%{background:#6265E5;color:#fff;box-shadow:none}59%,100%{background:#fff;color:#4a4a66}}
@keyframes step3{0%,55%{background:#fff;color:#4a4a66}59%,96%{background:#6265E5;color:#fff;box-shadow:none}100%{background:#fff;color:#4a4a66}}
html:not(.motion) .logi-stock{opacity:1}
@media(max-width:620px){.logi-steps li{font-size:12px;padding:6px 10px}}
/* Kamera-Schema statt Produktfoto (Vision) */
.cam-view{position:relative;aspect-ratio:4/3;border-radius:20px;background:radial-gradient(circle at 50% 45%,#3a3a5c,#16162a 75%);overflow:hidden}
.cam-label{position:absolute;left:16px;top:14px;font-size:12px;font-weight:700;color:#c9c9e0}
.cam-item{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-52%);border-radius:14px;background:#d9b38c;box-shadow:0 20px 40px -12px #0008}
.cam-item i{position:absolute;left:0;right:0;top:42%;height:14%;background:#c49a6c}
.cam-frame{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-52%);background:linear-gradient(#a9abff,#a9abff) 0 0/22px 3px,linear-gradient(#a9abff,#a9abff) 0 0/3px 22px,linear-gradient(#a9abff,#a9abff) 100% 0/22px 3px,linear-gradient(#a9abff,#a9abff) 100% 0/3px 22px,linear-gradient(#a9abff,#a9abff) 0 100%/22px 3px,linear-gradient(#a9abff,#a9abff) 0 100%/3px 22px,linear-gradient(#a9abff,#a9abff) 100% 100%/22px 3px,linear-gradient(#a9abff,#a9abff) 100% 100%/3px 22px;background-repeat:no-repeat}
html.motion [data-cam] .cam-frame{transform:translate(-50%,-52%) scale(1.25);opacity:0;transition:transform 1s var(--ease-out) .2s,opacity .6s ease .2s}
html.motion [data-cam].is-in .cam-frame{transform:translate(-50%,-52%) scale(1);opacity:1}
.vision-visual{padding-bottom:0}
.vision-example{margin-top:-48px}
/* Hardware ohne Wiederholung der Produktbilder */
.set-text article{padding:28px 14px}

/* ---------- Visora Logistics 3D (scrollgesteuert, Nachtrag 03.10.2026) ---------- */
.logi3d{display:none;position:relative;height:640vh}
html.webgl-ok .logi3d{display:block}
html.webgl-ok .logi-stage{display:none}
.logi3d-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#f6f6fb}
.logi3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.logi3d.is-ready .logi3d-canvas{opacity:1}
.logi3d-panel{position:absolute;left:clamp(20px,5vw,80px);top:50%;transform:translateY(-50%);width:min(400px,calc(100vw - 40px));max-width:42vw;box-sizing:border-box;padding:28px 28px 22px;border-radius:26px;background:#ffffffd6;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 30px 60px -30px #23236a40,inset 0 0 0 1px #ffffffaa;transition:width .6s var(--ease-out)}
.logi3d-brand{margin:0 0 14px;font-size:13px;font-weight:800;color:var(--brand-ink);letter-spacing:.02em}
.logi3d-texts{display:grid}
.logi3d-text{grid-area:1/1;min-width:0;opacity:0;transform:translate3d(0,14px,0);transition:opacity .45s ease,transform .7s var(--ease-out);pointer-events:none}
.logi3d-text.is-active{opacity:1;transform:none;pointer-events:auto}
.logi3d-text span{display:block;overflow-wrap:break-word;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:10px}
.logi3d-text h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;line-height:1.1;margin-bottom:10px;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.logi3d-text p{overflow-wrap:break-word;margin:0;color:var(--muted);font-size:16px}
.logi3d-final h3{font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:-.05em;color:var(--ink);margin-bottom:22px}
.logi3d.is-final .logi3d-panel{width:min(520px,calc(100vw - 40px));max-width:48vw}

.logi3d-dots{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:6px}
.logi3d-dots li{height:4px;flex:1;border-radius:4px;background:#dcdcef;transition:background-color .4s ease}
.logi3d-dots li.is-active{background:var(--brand)}
.logi3d-note{position:absolute;right:16px;bottom:12px;margin:0;font-size:11px;color:#8a8aa3}
html.webgl-ok .logi3d+.logistics{padding-top:clamp(56px,7vw,96px)}
@media(max-width:760px){
  .logi3d{height:600vh}
  .logi3d-panel{left:12px;right:12px;top:auto;bottom:max(14px,env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;padding:18px 18px 14px;border-radius:20px}
  .logi3d.is-final .logi3d-panel{width:auto;max-width:none}
  .logi3d-text h3{font-size:clamp(20px,6vw,24px)}.logi3d-text p{font-size:15px}
  .logi3d-final h3{font-size:clamp(30px,10vw,40px);margin-bottom:16px}
  .logi3d-note{top:calc(var(--nav-h) + 8px);bottom:auto;right:12px}
}

/* ---------- Angebote, FAQ, Warteliste ---------- */
.offer-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:0;padding-bottom:var(--section)}
.offer-choice article{border-radius:var(--radius-l);padding:clamp(32px,4vw,56px);background:var(--surface);display:flex;flex-direction:column}
.offer-choice article:last-child{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.offer-choice h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.035em}
.offer-choice p:not(.eyebrow){color:var(--muted);margin-bottom:28px}
.offer-choice a{margin-top:auto;font-weight:700;color:var(--brand-ink)}
.faq{padding-top:0}
.faq-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,96px);align-items:start}
.faq .section-heading{position:sticky;top:calc(var(--nav-h) + 40px);margin-bottom:0}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--brand),var(--brand)) center/14px 2px no-repeat,linear-gradient(var(--brand),var(--brand)) center/2px 14px no-repeat;transition:transform .35s var(--ease-out)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0;padding:0 40px 26px 0;font-size:17px}
@media(max-width:900px){.offer-choice,.faq-layout{grid-template-columns:1fr}.faq .section-heading{position:static}}

.waitlist{background:var(--surface)}
.waitlist-layout{display:grid;grid-template-columns:1fr minmax(0,520px);gap:clamp(40px,7vw,110px);align-items:center}
.waitlist .intro{font-size:19px;margin-bottom:36px}
.waitlist-journey{list-style:none;counter-reset:j;padding:0;margin:0 0 28px;display:grid;gap:18px}
.waitlist-journey li{counter-increment:j;display:grid;grid-template-columns:40px 1fr;column-gap:16px}
.waitlist-journey li:before{content:counter(j);grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--brand-ink);font-weight:800;box-shadow:inset 0 0 0 1px var(--line)}
.waitlist-journey b{font-size:17px}.waitlist-journey span{color:var(--muted);font-size:15px}
.waitlist-alternative{color:var(--muted);font-size:15px}.waitlist-alternative a{color:var(--brand-ink);font-weight:700}
.waitlist-card{background:#fff;border-radius:var(--radius-l);padding:clamp(28px,3.5vw,48px);box-shadow:0 40px 80px -40px #23236a40}
.waitlist-card h3{font-size:clamp(26px,2.4vw,32px);letter-spacing:-.035em;margin:16px 0 8px}
.form-intro{color:var(--muted);margin-bottom:24px}
.waitlist-card label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.waitlist-card input[type=email]{width:100%;min-height:54px;padding:14px 18px;border-radius:14px;border:1px solid #cfcfe0;background:#fff;font:inherit;font-size:17px;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.waitlist-card input[type=email]:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow)}
.waitlist-card input::placeholder{color:#8a8aa0}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.consent{display:flex!important;gap:12px;align-items:flex-start;font-weight:500!important;font-size:13px!important;color:var(--muted);margin:20px 0 24px}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand);flex:none}
.consent a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.waitlist-card .button{width:100%}
#waitlist-status{min-height:1.2em;margin:16px 0 0;font-size:14px;font-weight:600;color:#1f8a52}
#waitlist-status[data-error=true]{color:#c0392b}
.form-note{font-size:12px;color:var(--muted);margin:12px 0 0}
@media(max-width:900px){.waitlist-layout{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{background:var(--surface);border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;padding-top:40px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.footer .brand img{height:24px}
.footer nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.footer nav a{color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.footer nav a:hover{color:var(--brand-ink)}}

/* ---------- Mobile Feinschliff ---------- */
@media(max-width:620px){
  body{font-size:16px}
  .hero-actions{flex-direction:column;gap:14px;width:100%}
  .hero-actions .button{width:100%}
  .numbers{grid-template-columns:1fr 1fr;gap:28px 16px}
  .number span{font-size:14px}
  .logistics-steps article,.logistics-contact{padding:24px}
  .photo-note{top:14px;left:14px;padding:10px 14px;font-size:15px}
  .flow-steps button{padding:16px}
}

/* ---------- Scan-Effekt (Nachtrag 03.10.2026, per IntersectionObserver, nur transform/opacity) ---------- */
.scan-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.scan-beam{position:absolute;inset:0;transform:translate3d(0,-10%,0);opacity:0}
.scan-beam:before{content:"";position:absolute;left:6%;right:6%;top:0;height:3px;border-radius:3px;background:#ff3b5c;box-shadow:0 0 18px 4px #ff3b5c80,0 0 2px #fff}
.scan-hit{position:absolute;left:50%;top:22px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#ffffffe6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 36px -18px #23236a66;font-size:14px;font-weight:750;color:var(--ink);white-space:nowrap;transform:translate3d(-50%,-8px,0) scale(.96);opacity:0;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.scan-hit i{width:20px;height:20px;border-radius:50%;background:#2fb36d;color:#fff;font-style:normal;font-size:12px;display:grid;place-items:center}
.editorial-image.is-scanning .scan-beam{animation:scan-sweep 1.5s cubic-bezier(.65,0,.35,1) 2 alternate both}
.editorial-image.is-scanned .scan-hit{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
@keyframes scan-sweep{0%{transform:translate3d(0,8%,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate3d(0,88%,0);opacity:.9}}
html:not(.motion) .scan-beam{display:none}
html:not(.motion) .scan-hit{opacity:1;transform:translate3d(-50%,0,0)}

/* ---------- Bewegung (nur mit JS und ohne Bewegungsreduktion) ---------- */
/* Touch-Geräte: Hero richtet sich beim Einscrollen einmal auf (zeitbasiert statt scroll-gekoppelt). */
html.motion.touch .hero-device{transition:transform 1.4s var(--ease-out);will-change:auto}
html.motion.touch .hero-device:not(.is-up){transform:translate3d(0,28px,0) rotateX(16deg) scale(.9)}
html.motion [data-reveal]{opacity:0;transform:translate3d(0,32px,0);transition:opacity .9s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s)}
html.motion [data-reveal=scale]{transform:scale(.94);transform-origin:50% 100%}
html.motion [data-reveal].is-in{opacity:1;transform:none}
html.motion .hero-chip{opacity:0;transition:opacity .8s var(--ease-out)}
html.motion .hero-chip.is-in{opacity:1}
html.motion .connection-flow:not(.is-in) .connection-line i{transform:scaleX(0)}
html.motion .connection-flow:not(.is-in) .connection-node{opacity:.35;transform:translateY(10px)}
.connection-node{transition:opacity .6s ease var(--d,0s),transform .8s var(--ease-out) var(--d,0s)}
.connection-line i{transition:transform .7s var(--ease-in-out) var(--d,0s)}
@media(max-width:760px){html.motion .connection-flow:not(.is-in) .connection-line i{transform:scaleY(0)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .hero-device{transform:none!important}
  .hero-chip,.editorial-image img,.vision-visual>img,.set-showcase figure img{transform:none!important}
  .device-screen img{transition:opacity .2s linear!important}
}

.logi3d-final .button{max-width:100%;white-space:normal;text-align:center}

/* ---------- r5: Logos im Anbindungs-Flow, Leistungen Visora Logistics ---------- */
.anchor-alias{position:relative;top:calc(-1 * var(--nav-h));display:block;height:0}
.node-logo{display:flex;align-items:center;justify-content:center;min-height:56px}
.node-shopify{width:120px;height:auto}
.node-visora{width:128px;height:auto}
.node-dhl-field{display:inline-block;padding:14px 16px;border-radius:10px}
.node-dhl{width:96px;height:auto;display:block}
.connection-node span{margin-top:10px}
.logistics-services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-left:clamp(14px,3vw,48px);margin-right:clamp(14px,3vw,48px)}
.logistics-services article{border-radius:var(--radius);background:#ffffff0d;border:1px solid #ffffff1a;padding:28px}
.logistics-services h3{color:#fff;font-size:clamp(22px,2vw,28px);margin:18px 0 8px}
.logistics-services p{color:#c9c9e0;font-size:16px;margin:0}
.svc-icon{display:block;width:44px;height:44px;border-radius:14px;background:#6265e533;position:relative}
.svc-icon:before,.svc-icon:after{content:"";position:absolute;border:2px solid #a9abff}
.svc-import:before{left:9px;top:16px;width:26px;height:14px;border-radius:3px}.svc-import:after{left:14px;top:10px;width:16px;height:6px;border-width:2px 2px 0;border-radius:4px 4px 0 0}
.svc-fulfillment:before{left:11px;top:13px;width:22px;height:20px;border-radius:3px}.svc-fulfillment:after{left:11px;top:20px;width:22px;height:0;border-width:2px 0 0}
.svc-storage:before{left:10px;top:10px;width:24px;height:24px;border-width:2px 2px 2px 2px;border-radius:3px}.svc-storage:after{left:10px;top:20px;width:24px;height:0;border-width:2px 0 0}
@media(max-width:900px){.logistics-services{grid-template-columns:1fr}}
@media(max-width:760px){.node-logo{min-height:48px}.node-shopify{width:110px}.node-visora{width:116px}.node-dhl{width:88px}}
.connection-node .node-logo{display:flex;align-items:center;justify-content:center}
.connection-node .node-dhl-field{display:inline-block}
.logistics-more{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:20px clamp(14px,3vw,48px) 0}.logistics-more span{color:#a9a9c4;font-size:14px}

/* ---------- r6: Scroll-Performance ---------- */
/* Desktop: leichtere Unschärfe; Touch: keine Live-Unschärfe hinter der Navigation (teuer beim Scrollen), stattdessen fast deckend */
.nav{-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px)}
html.touch .nav{background:#fffffff5;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Textfeld über der 3D-Szene ohne Live-Unschärfe (das Canvas ändert sich jedes Bild) */
.logi3d-panel{background:#fffffff2;-webkit-backdrop-filter:none;backdrop-filter:none}
.logi3d-canvas{contain:strict}
/* Weiter unten liegende Abschnitte erst rendern, wenn sie in die Nähe kommen */
/* content-visibility nur ganz unten: Abschnitte oberhalb von Sprungzielen würden Anker verschieben */
.footer{content-visibility:auto;contain-intrinsic-size:auto 160px}

/* ---------- r7: Visora Logistics als gemeinsame 3D-Welt (world.js, gleiche Datei wie visora-logistics.de) ---------- */
.world{display:none;position:relative;height:760vh}
html.webgl-ok .world{display:block}
html.webgl-ok .world+.logistics{padding-top:clamp(56px,7vw,96px)}
.world-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#dbecf2}
.world-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease;contain:strict}
.world.is-ready .world-canvas{opacity:1}
.world-veil{position:absolute;inset:0 0 auto 0;height:42%;background:linear-gradient(#ffffffd9,#ffffff80 45%,#ffffff00);pointer-events:none;opacity:0;transition:opacity .8s ease}
.world.is-intro .world-veil{opacity:1}
.world-texts{position:absolute;left:clamp(16px,4.5vw,72px);bottom:clamp(84px,11vh,112px);width:min(372px,calc(100vw - 32px));max-width:34vw;box-sizing:border-box;padding:20px 22px 18px;display:grid;border-radius:22px;background:#fffffff0;box-shadow:0 24px 60px -34px #1e3a5f66,inset 0 0 0 1px #ffffffb8;transition:width .6s var(--ease-out)}
.world-text{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translate3d(-10px,10px,0) scale(.985);transition:opacity .5s ease,transform .8s var(--ease-out),visibility 0s .5s;pointer-events:none}
.world-text.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .5s ease,transform .8s var(--ease-out),visibility 0s}
.world:not(.is-intro) .world-hero,.world.is-intro .world-text:not(.world-hero),.world:not(.is-final) .world-final,.world.is-final .world-text:not(.world-final){display:none}
.world-text h3{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em;line-height:1.1;margin:0 0 8px;overflow-wrap:break-word;text-wrap:balance}
.world-text p{margin:0;color:var(--muted);font-size:15px;overflow-wrap:break-word}
.scene-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--brand-ink);margin-bottom:10px}
.scene-tag i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--brand);color:#fff;font-style:normal;font-size:12px}
.world.is-intro .world-texts{left:50%;bottom:auto;top:clamp(84px,13vh,140px);transform:translateX(-50%);width:min(900px,calc(100vw - 32px));max-width:none;background:transparent;box-shadow:none;padding:0;text-align:center}
.world-hero h2{font-size:clamp(36px,5vw,72px);margin:0 0 12px}.world-hero h2 span{color:var(--brand)}
.world-lead{font-size:clamp(16px,1.4vw,19px)!important;color:var(--ink-2)!important}
.world.is-final .world-texts{bottom:auto;top:50%;transform:translateY(-50%);width:min(440px,calc(100vw - 32px));max-width:38vw}
.world-final h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.045em}
.world-slogan{font-size:clamp(18px,1.6vw,22px)!important;font-weight:750;color:var(--brand-ink)!important;margin:-2px 0 10px!important}
.world-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.world-actions .button{max-width:100%;white-space:normal;text-align:center}
.world-steps{display:flex;position:absolute;left:50%;bottom:clamp(18px,3vh,30px);transform:translateX(-50%);gap:4px;padding:6px;margin:0;align-items:center;border-radius:999px;background:#fffffff0;box-shadow:0 14px 34px -18px #1e3a5f59;transition:opacity .5s ease}
.world.is-intro .world-steps,.world.is-final .world-steps{opacity:0;pointer-events:none}
.world-steps button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background-color .3s ease,color .3s ease}
.world-steps button.is-done{color:var(--brand-ink)}.world-steps button.is-active{background:var(--brand);color:#fff}
@media(hover:hover) and (pointer:fine){.world-steps button:not(.is-active):hover{background:var(--brand-soft);color:var(--brand-ink)}}
.world-progress{position:absolute;left:18px;right:18px;top:-9px;height:3px;border-radius:3px;background:#16162a14;overflow:hidden}
.world-progress i{display:block;height:100%;border-radius:3px;background:var(--brand);transform-origin:left;transform:scaleX(var(--wp,0))}
.world-note{position:absolute;right:16px;bottom:8px;margin:0;font-size:11px;color:#6b6b85}
@media(max-width:760px),(max-aspect-ratio:4/5){
  .world{height:700vh}
  .world-texts,.world.is-final .world-texts{left:12px;right:12px;top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 52px);transform:none;width:auto;max-width:none;padding:16px 18px 14px;border-radius:20px}
  .world.is-intro .world-texts{left:16px;right:16px;top:calc(var(--nav-h) + 22px);bottom:auto;transform:none;width:auto}
  .world-text h3{font-size:clamp(20px,5.6vw,26px)}.world-text p{font-size:14px}
  .world-hero h2{font-size:clamp(32px,9.5vw,46px)}
  .world-steps{left:10px;right:10px;transform:none;bottom:max(10px,env(safe-area-inset-bottom));justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .world-steps button{font-size:11.5px;padding:7px 9px}
  .world-note{top:calc(var(--nav-h) + 8px);bottom:auto;right:12px}
}

/* ---------- r8: flüssiger Hero ---------- */
/* Gerät richtet sich per scroll-gesteuerter CSS-Animation auf (läuft ohne Main-Thread); ältere Browser nutzen weiter den JS-Takt */
@supports (animation-timeline: view()) {
  html.motion:not(.touch) .hero-device{animation:visoraHeroUp linear both;animation-timeline:view();animation-range:cover 0% cover 38%;will-change:transform}
  @keyframes visoraHeroUp{from{transform:rotateX(18deg) scale(.86);animation-timing-function:cubic-bezier(.33,1,.68,1)}to{transform:none}}
}
/* keine Live-Unschärfe hinter Statuskarten und Navigation (wird bei jeder Bewegung darunter neu berechnet) */
.hero-chip{background:#fffffff2;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav{background:#fffffff0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- r10: Ablauf als Loop-Video im Geräterahmen, Seite gestrafft ---------- */
.flowvideo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.fv-device{margin:0}
.fv-laptop{position:relative;padding:0 4%}
.fv-frame{border-radius:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 6px 6px;padding:clamp(8px,1vw,14px) clamp(8px,1vw,14px) clamp(10px,1.2vw,16px)}
.fv-screen{position:relative;aspect-ratio:1280/628;background:#f3f4f8}
.fv-video,.fv-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fv-fallback{transition:opacity .45s ease}
.fv-video[hidden],.fv-fallback[hidden]{display:none!important}
/* r10: Software-Abschnitt passt etwa auf eine Bildschirmhöhe */
#software{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px)}
#software .section-heading{margin-bottom:clamp(24px,3vw,40px)}
#software h2{font-size:clamp(32px,3.8vw,54px)}
#software .section-heading>p{font-size:17px}
.fv-laptop{max-width:880px;margin:0 auto}

.fv-base{position:relative;height:clamp(10px,1.3vw,18px);margin:0 -4%;border-radius:0 0 18px 18px;background:linear-gradient(#e4e5ef,#c9cad9 70%,#b9bacb);box-shadow:0 24px 40px -24px #23236a66}
.fv-base:before{content:"";position:absolute;left:50%;top:0;width:14%;height:40%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#cfd0de}
.fv-device figcaption{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}
.fv-pause{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border:0;border-radius:50%;background:#16162a8c;cursor:pointer;opacity:.55;transition:opacity .2s ease;display:grid;place-items:center}
.fv-pause:hover,.fv-pause:focus-visible{opacity:1}
.fv-pause span{width:10px;height:11px;border-left:3px solid #fff;border-right:3px solid #fff}
.fv-pause[aria-pressed=true] span{width:0;height:0;border:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.fv-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:fv}
.fv-steps li{position:relative;counter-increment:fv;display:grid;grid-template-columns:30px 1fr;column-gap:12px;padding:12px 14px;border-radius:16px;overflow:hidden;transition:background-color .35s ease}
.fv-steps li:before{content:counter(fv);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-weight:800;font-size:14px;transition:background-color .35s ease,color .35s ease}
.fv-steps b{font-size:17px;letter-spacing:-.02em}
.fv-steps span{font-size:14px;color:var(--muted)}
.fv-steps i{position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--fvp,0));opacity:0}
.fv-steps li.is-on{background:#fff;box-shadow:0 1px 2px #16162a0d}
.fv-steps li.is-on:before{background:var(--brand);color:#fff}
.fv-steps li.is-on i{opacity:1}
@media(max-width:900px){.flowvideo{grid-template-columns:1fr}.fv-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.fv-steps li{grid-template-columns:1fr;text-align:center;padding:10px 6px}.fv-steps li:before{grid-row:auto;margin:0 auto 6px}.fv-steps span{display:none}.fv-steps b{font-size:13px}}
@media(max-width:420px){.fv-steps b{font-size:11px}}
/* Seite straffen: etwas weniger Abstand, kompaktere Funktionskarten */
:root{--section:clamp(80px,9vw,140px)}
.section-heading{margin-bottom:clamp(36px,4.5vw,64px)}
.bento-card{min-height:220px}
.more-grid{gap:12px}.more-grid article{padding:clamp(20px,2vw,26px)}.more-grid h3{margin:12px 0 6px}.more-grid p{font-size:15px}
.numbers{padding-top:clamp(64px,8vw,110px)}
.faq summary{padding:18px 0}