/* =====================================================================
   Die 30-Tage-Website · Haldelain
   v13: oben VSL + Grand Slam Offer + Formular in einem Schritt, darunter kompakt.
   Bausteine von haldelain.ch (Heading-Block, Buttons, Pills, Glas-Karten, FAQ,
   Footer, Logo-Laufband, Grain, Rasterlinien) und yannpiccand.ch (Slider-Buttons, Sticky).
   ===================================================================== */

@font-face{font-family:"Roboto";src:url(../fonts/roboto-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url(../fonts/roboto-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url(../fonts/roboto-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --blau:#0061ff;
  --blau2:#2f87ff;
  --schwarz:#050505;
  --bright-black:#181818;
  --a5:rgba(255,255,255,.05);
  --a10:rgba(255,255,255,.1);
  --a15:rgba(255,255,255,.15);
  --a30:rgba(255,255,255,.3);
  --a50:rgba(255,255,255,.5);
  --a60:rgba(255,255,255,.6);
  --a70:rgba(255,255,255,.7);
  --rot:#c71d3c;
  --pad:7.5%;
  --gap:1.25rem;
  --sec:clamp(72px,8vw,128px);
  --font:"Roboto",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-ui:cubic-bezier(.86,0,.07,1);
  --osmo:cubic-bezier(.625,.05,0,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--schwarz);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding:16px 0 96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--schwarz);color:#fff;font:300 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
picture{display:block}
p,h1,h2,h3,ul,ol,figure,blockquote,fieldset,legend{margin:0;padding:0}
h1,h2,h3{font-weight:inherit;font-size:inherit}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
b,strong{font-weight:500}
::selection{background:var(--blau);color:#fff}
:focus-visible{outline:2px solid var(--blau2);outline-offset:3px}
main:focus,.signup:focus{outline:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nb{white-space:nowrap}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.container{padding-inline:var(--pad)}

/* Grain und Rasterlinien wie haldelain.ch */
.grain{position:fixed;inset:0;z-index:2147483646;pointer-events:none;background:url(../img/hd-grain.gif);opacity:.03;filter:contrast(200%)}
.grid-lines{position:fixed;inset:0;z-index:999;pointer-events:none;width:85%;margin:0 auto;border-left:.5px solid var(--a10);border-right:.5px solid var(--a10)}

/* ---------- Bausteine ---------- */
.h2{font:300 48px/1 var(--font);letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.h2__b{display:block;font-weight:500;line-height:1}
.h2--bar .h2__b{display:inline-block;background:var(--blau);padding:4px 16px 4px 13.6px}
.h2__l{display:block}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;height:64px;padding:0 1.5rem 0 2rem;
  border-radius:.25rem;background:var(--blau);color:#fff;text-decoration:none;font:500 13.6px/1.3 var(--font);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
  transition:background-color .5s cubic-bezier(.165,.84,.44,1)}
.btn .ico{width:22px;height:22px;stroke-width:1.3;transition:transform .5s var(--osmo)}
@media (hover:hover){.btn:hover{background:var(--blau2)}.btn:hover .ico{transform:translateX(4px)}}
.btn[disabled]{opacity:.6;pointer-events:none}

.pill{display:inline-flex;align-items:center;height:1.5rem;padding:0 .5rem;border-radius:.25rem;background:var(--a10);
  font:300 .85rem/1 var(--font);text-transform:uppercase;color:var(--a70);white-space:nowrap}
.pill--blue{background:var(--blau);color:#fff}
.micro{display:flex;align-items:center;gap:.5rem;font-size:13.6px;color:rgba(255,255,255,.67)}
.micro .ico{width:1rem;height:1rem;opacity:.75}

.sec{padding-top:var(--sec)}

/* ============ HEADER ============ */
.top{position:absolute;top:0;left:0;right:0;z-index:30;padding:2.25vw 3.75vw;pointer-events:none}
.top__logo{width:28px;height:40px;color:#fff}

/* ============ OBEN: Titel, VSL, Angebot, Formular ============ */
.stage{position:relative;isolation:isolate;padding:clamp(96px,7.5vw,116px) 0 clamp(48px,5vw,72px)}
.stage__bg{position:absolute;inset:0;z-index:-1;background:#050505 url(../img/hd-hero-bg-1920.webp) 0 0/cover;
  background-image:image-set(url(../img/hd-hero-bg-1920.avif) type("image/avif"),url(../img/hd-hero-bg-1920.webp) type("image/webp"))}
.stage__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:1.5rem;align-items:stretch}
.h1{grid-column:1/-1;font:700 clamp(32px,3.3vw,56px)/.92 var(--font);letter-spacing:-.035em;text-transform:uppercase;color:#fff}
.h1__l,.h1__b{display:block}
.h1__b{color:var(--blau2)}

/* VSL 16:9 */
.vsl{grid-column:1/span 7;position:relative}
.vsl__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:.25rem;overflow:hidden;background:#000}
.vsl__poster,.vsl__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vsl__video{opacity:0;background:#000}
.vsl:not([data-state="idle"]) .vsl__video{opacity:1}
.vsl__play{position:absolute;inset:0;display:grid;place-items:center;background:transparent}
.vsl__btn{display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:14rem;background:var(--blau);color:#fff;transition:transform .5s var(--ease)}
.vsl__btn .ico{width:24px;height:24px;margin-left:3px}
.vsl__label{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.5rem;align-items:center}
.vsl__dur{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:4px;background:rgba(5,5,5,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12.5px;color:#fff}
.vsl__dur:empty{display:none}
@media (hover:hover){.vsl__play:hover .vsl__btn{transform:scale(1.15)}}
.vsl:not([data-state="idle"]) .vsl__play{opacity:0;pointer-events:none}
.vsl[data-state="loading"] .vsl__btn{animation:pulse 1s var(--ease) infinite}
@keyframes pulse{50%{transform:scale(.9)}}
.vsl__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--a15);opacity:0;transition:opacity .3s;pointer-events:none}
.vsl__bar i{display:block;height:100%;width:0;background:var(--blau)}
.vsl[data-state="playing"] .vsl__bar,.vsl[data-state="paused"] .vsl__bar{opacity:1}
.vsl[data-state="native"] .vsl__bar{display:none}
.vsl.is-preview .vsl__play{pointer-events:none}

/* Angebot (Grand Slam Offer) in blauer Kontur */
.offer{grid-column:8/-1;display:flex;flex-direction:column;padding:1.25rem 1.5rem 1.25rem;border:1px solid var(--blau);border-radius:.25rem;
  background:rgba(5,5,5,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.offer .pill{align-self:flex-start}
.offer__h{margin-top:.75rem;font:300 clamp(20px,1.65vw,26px)/1.1 var(--font);letter-spacing:-.02em;text-transform:uppercase}
.stack{margin-top:.75rem;border-top:.5px solid var(--a15)}
.stack li{display:flex;justify-content:space-between;gap:1rem;padding:.38rem 0;border-bottom:.5px solid var(--a10);font-size:14px;line-height:1.35;color:var(--a70)}
.stack li>span:last-child{flex:none;color:#fff;font-variant-numeric:tabular-nums}
.stack__bonus>span:first-child{color:#fff}
.stack__bonus>span:last-child{color:var(--blau2)!important}
.stack__sum,.stack__price{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.stack__sum{margin-top:.6rem;font-size:14px;color:var(--a60)}
.stack__sum s{text-decoration-thickness:1px}
.stack__price{margin-top:.15rem;font-size:15px}
.stack__price b{font-size:clamp(18px,1.4vw,22px);color:var(--blau2)}
.offer__g{display:flex;align-items:flex-start;gap:.5rem;margin-top:auto;padding-top:.75rem;font-size:13.6px;line-height:1.4;color:#fff}
.offer__g .ico{width:1rem;height:1rem;margin-top:.1rem;color:var(--blau2);stroke-width:2}

/* ============ SLIDER (GSAP) ============ */
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.slider__nav{display:flex;gap:.5rem;flex:none}
.slider__btn{display:grid;place-items:center;width:48px;height:48px;border-radius:.25rem;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,opacity .3s}
.slider__btn .ico{width:18px;height:18px}
@media (hover:hover){.slider__btn:hover{background:var(--blau)}}
.slider__btn[disabled]{opacity:.35;pointer-events:none}
.slider{margin-top:2.5rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slider::-webkit-scrollbar{display:none}
.slider.is-gsap{overflow:hidden;scroll-snap-type:none}
.slider.is-gsap .slider__track{position:relative;will-change:transform;touch-action:pan-y}
.slider.is-drag{cursor:grab}
.slider.is-drag:active{cursor:grabbing}
.slider__track{display:flex;gap:var(--gap);width:max-content;padding:0 var(--pad)}
.slide{flex:none;scroll-snap-align:start;user-select:none;-webkit-user-select:none}
.slide img{-webkit-user-drag:none;pointer-events:none}
.slide picture{overflow:hidden;border-radius:.25rem;background:#111}
.slide--case{width:clamp(220px,20vw,300px)}
.slide--case img{width:100%;aspect-ratio:2/3;object-fit:cover}
.slide__k{margin-top:.9rem}
.slide__p{margin-top:.5rem;font-size:14px;line-height:1.45;color:var(--a70);max-width:26ch}
.slide--shoot{width:clamp(280px,30vw,460px)}
.slide--shoot img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* ============ KUNDENSTIMMEN ============ */
.voice{display:flex;flex-direction:column;padding:1.75rem 1.75rem 1.75rem;border-radius:4px;background:var(--a5)}
.voice blockquote{font:300 1.1rem/1.45 var(--font);letter-spacing:-.01em;color:#fff}
.who{display:flex;align-items:center;gap:.9rem}
.who img{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;flex:none}
.who picture{flex:none}
.who__txt b{display:block;font-size:.85rem;line-height:1.1}
.who__txt span{display:block;margin-top:.25rem;font-size:.85rem;line-height:1.15;color:var(--a60)}
.vt{grid-column:1/-1}
.vt__frame{position:relative;aspect-ratio:16/9;border-radius:.25rem;overflow:hidden;background:#111}
.vt__poster,.vt__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt__play{position:absolute;inset:0;display:flex;align-items:flex-end;gap:1rem;padding:1.5rem;text-align:left;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 55%)}
.vt__q{max-width:30ch}
.vt.is-playing .vt__play{display:none}

/* ============ FAQ (haldelain.ch), Höhe per GSAP ============ */
.faq{padding-bottom:var(--sec)}
.faq__grid{margin-top:2.5rem;display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:0}
.faq__col{display:flex;flex-direction:column}
.qa{position:relative;border-top:.5px solid var(--a10)}
.qa::before{content:"";position:absolute;inset:0;background:var(--a5);opacity:0;transition:opacity .4s var(--ease-ui);pointer-events:none}
@media (hover:hover){.qa:hover::before{opacity:1}}
.qa.is-open::before{opacity:1}
.qa__q{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;width:100%;padding:1.5rem 2rem;text-align:left;font:300 1.2rem/1.35 var(--font);color:#fff}
.qa__q>span{transition:transform .45s var(--ease-ui)}
@media (hover:hover){.qa:hover .qa__q>span{transform:translateX(.5rem)}}
.qa__q i{position:relative;flex:none;width:.9rem;height:.9rem}
.qa__q i::before,.qa__q i::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;margin-top:-.75px;background:#fff;transition:transform .4s var(--ease-ui)}
.qa__q i::after{transform:rotate(90deg)}
.qa.is-open .qa__q i::after{transform:rotate(90deg) scaleX(0)}
.qa__a{position:relative;overflow:hidden}
.faq-js .qa__a{height:0}
.qa__a>p{padding:0 3.5rem 1.6rem 2rem;font:300 1rem/1.65 var(--font);color:var(--a70);max-width:62ch}

/* ============ FOOTER (haldelain.ch) ============ */
.foot{position:relative;padding-top:var(--sec);background:var(--schwarz);border-top:.5px solid var(--a5)}
.foot__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:3rem;padding-bottom:clamp(56px,6vw,96px)}
.foot__claim{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.foot__claim .h2{font-size:clamp(32px,2.8vw,44px)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.foot__cols div{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.foot__cols .foot__k{margin-bottom:.5rem;color:rgba(255,255,255,.3)}
.foot a:not(.btn),.linklike{color:#fff;text-decoration:none;font:300 1rem/1.6 var(--font)}
.foot__cols p{color:var(--a70)}
@media (hover:hover){.foot a:not(.btn):hover,.linklike:hover{color:var(--blau2)}}

/* ============ STICKY CTA (yannpiccand.ch) ============ */
.sticky{position:fixed;z-index:1000;right:clamp(16px,2.6vw,40px);bottom:calc(clamp(16px,2.6vw,32px) + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;
  border-radius:4px;background:var(--blau);color:#fff;text-decoration:none;font:500 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;
  transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s,background-color .3s}
.sticky .ico{width:14px;height:14px}
.sticky.show{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s,background-color .3s}
@media (hover:hover){.sticky:hover{background:var(--blau2)}}

/* ============ COOKIES (haldelain.ch .hd-cc) ============ */
.cc{position:fixed;z-index:2147483647;left:1.5em;bottom:1.5em;width:min(23em,calc(100vw - 2em));padding:1.25em;border-radius:2px;background:rgba(20,22,28,.78);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);color:#fff;line-height:1.5;
  opacity:0;transform:translateY(.75em);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cc:not(.show){pointer-events:none;visibility:hidden}
.cc.show{opacity:1;transform:none}
.cc__t{font-size:.8em;color:rgba(255,255,255,.8)}
.cc__t a{color:#fff}
.cc__b{display:flex;gap:.5em;margin-top:1em}
.cc__btn{flex:1 1 0;min-height:44px;padding:1.15em 1.2em;border-radius:.25rem;background:var(--a5);font:300 .7em/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.cc__btn--ok{background:var(--blau)}
@media (hover:hover){.cc__btn:hover{background:var(--a10)}.cc__btn--ok:hover{background:var(--blau2)}}

/* ============ REVEAL ============ */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* =====================================================================
   ≤ 991 px
   ===================================================================== */
@media (max-width:991px){
  .vsl,.offer{grid-column:1/-1}
  .foot__in{grid-template-columns:1fr}
  .grain{opacity:.02}
}

/* =====================================================================
   ≤ 767 px
   ===================================================================== */
@media (max-width:767px){
  :root{--pad:5%;--gap:1rem}
  .grid-lines{width:90%}
  .grain{filter:none}
  .top{padding:1.25rem 5%}
  .top__logo{width:24px;height:34px}
  .stage{padding:80px 0 40px}
  .stage__bg{background-image:url(../img/hd-hero-bg-m-800.webp);background-image:image-set(url(../img/hd-hero-bg-m-800.avif) type("image/avif"),url(../img/hd-hero-bg-m-800.webp) type("image/webp"))}
  .stage__grid{row-gap:1rem}
  .h1{font-size:clamp(28px,8.2vw,36px)}
  .h2{font-size:30px}
  .h2--bar .h2__b{line-height:.95;padding:4px 6px}
  .offer{padding:1.1rem 1.1rem 1.1rem}
  .stack li{font-size:13.6px}
  .sec__head{align-items:flex-end}
  .slider{margin-top:1.75rem}
  .slide--case{width:58vw}
  .slide--shoot{width:80vw}
  .faq__grid{grid-template-columns:1fr}
  .qa__q{font-size:1.05rem;padding:1.15rem 1rem;gap:1rem}
  .qa__a>p{padding:0 1rem 1.25rem}
  .voice{padding:1.4rem 1.25rem 1.5rem}
  .voice blockquote{font-size:1.05rem}
  .foot__cols{grid-template-columns:1fr 1fr}
  .cc{left:1em;right:1em;bottom:auto;top:calc(1em + env(safe-area-inset-top));width:auto;display:flex;align-items:center;gap:.75em;padding:.5em .5em .5em .9em}
  .cc__t{flex:1;font-size:.75em;line-height:1.35}
  .cc__b{flex:none;margin-top:0}
  .cc__btn{flex:none;min-width:52px;padding:0 1em}
  body:has(.signup.is-sent) .cc{top:auto;bottom:calc(1em + env(safe-area-inset-bottom))}
}
@media (max-width:479px){
  .foot__cols{grid-template-columns:1fr}
  .slider__btn{width:44px;height:44px}
}

/* ---------- Barrierefreiheit ---------- */
html:not(.js) .vsl__play{display:none}
@media (max-width:767px){html{scroll-padding:24px 0 84px}}
@media (prefers-reduced-motion:reduce){
  .sticky,.sticky.show,.cc,.qa::before,.qa__q>span,.qa__q i::before,.qa__q i::after,.btn .ico{transition:none}
  .vsl[data-state="loading"] .vsl__btn{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
}

/* Angebot so hoch wie das Video */
@media (min-width:992px){
  .stage__grid{align-items:start}
  .offer{align-self:stretch}
  .offer{padding:1rem 1.35rem 1rem}
  .offer__h{margin-top:.55rem;font-size:clamp(18px,1.5vw,24px)}
  .stack{margin-top:.55rem}
  .stack li{padding:.28rem 0;font-size:13.6px}
  .stack__sum{margin-top:.45rem;font-size:13.6px}
  .offer__g{padding-top:.5rem}
}

/* Value Stack ohne Preise + Garantie */
.stack li{display:flex;justify-content:flex-start;align-items:flex-start;gap:.6rem;padding:.42rem 0;font-size:15px;line-height:1.35;color:#fff}
.stack li .ico{width:1rem;height:1rem;margin-top:.15rem;color:var(--blau2);stroke-width:2}
.stack__bonus b{font-weight:500;color:var(--blau2)}
.guarantee{margin-top:auto;padding:.85rem 1rem .9rem;border:1px solid var(--blau);border-radius:.25rem;background:rgba(0,97,255,.1)}
.offer .stack{margin-bottom:1rem}
.guarantee__k{font:500 .8rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--blau2)}
.guarantee__t{margin-top:.45rem;font:500 15px/1.35 var(--font);color:#fff}
.guarantee__s{margin-top:.35rem;font-size:13.6px;line-height:1.4;color:var(--a70)}
@media (min-width:992px){
  .stack li{padding:.36rem 0;font-size:14.5px}
}
@media (max-width:767px){
  .stack li{font-size:14.5px}
}
.stack__bonus>span:last-child{color:#fff!important}
@media (min-width:992px){
  .stack li{padding:.3rem 0}
  .guarantee{padding:.7rem .9rem .75rem}
  .guarantee__t{font-size:14.5px}
}
/* niedrige Laptop-Screens: Formular bleibt im ersten Bild */
@media (min-width:992px) and (max-height:800px){
  .stage{padding-top:84px}
  .h1{font-size:clamp(30px,2.8vw,44px)}
  .stage__grid{row-gap:1.1rem}
  .offer__h{font-size:18px}
  .stack li{padding:.22rem 0;font-size:13.6px}
}

/* ============ KUNDENSTIMMEN als Slider ============ */
.rating{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:14px;color:var(--a70)}
.rating b{font-weight:500;color:#fff}
.stars{letter-spacing:.08em;color:#fff;font-size:14px;line-height:1}
/* r11: alle Karten so hoch wie die höchste (Yann 04.10.), Name und Bild unten bündig. Damit keine grossen Löcher entstehen,
   sind die fünf längsten Stimmen mit «[…]» gekürzt (Vorschlag, README) und die Karten ab 768 px mindestens 340 px breit */
.slider--voices .slider__track{align-items:stretch}
.slide--voice{display:flex;width:clamp(340px,30vw,420px)}
.slide--voice .voice{flex:1 1 auto}
.slide--voice .who{margin-top:auto;padding-top:1.5rem}
.who__ini{display:grid;place-items:center;width:3.25rem;height:3.25rem;flex:none;border-radius:50%;background:var(--a10);font:500 1.1rem/1 var(--font);color:#fff}
#stimmen .vt{margin-top:2rem}
@media (max-width:767px){
  .slide--voice{width:82vw}
  .rating{margin-top:.8rem;font-size:13px}
}

.sec__head{flex-wrap:wrap}
.sec__head>h2,.sec__head>div:not(.slider__nav){flex:1 1 0%}
.sec__head>div:not(.slider__nav){min-width:0}
.sec__head>.slider__nav{flex:none;margin-left:auto}
.rating{flex-wrap:wrap;row-gap:.25rem}

/* =====================================================================
   v16: Hero zentriert (Headline, Angebot, VSL, Benefit-Tags, CTA),
   Formular direkt darunter, Value Stack danach
   ===================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(88px,6.5vw,112px) 0 clamp(56px,6vw,88px)}
.hero__bg{position:absolute;inset:0;z-index:-1;background:#050505 url(../img/hd-hero-bg-1920.webp) 50% 0/cover;
  background-image:image-set(url(../img/hd-hero-bg-1920.avif) type("image/avif"),url(../img/hd-hero-bg-1920.webp) type("image/webp"))}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.55),rgba(5,5,5,.2) 40%,#050505 100%)}
.hero__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__pill{margin-bottom:1.1rem}
.hero .h1{font-size:clamp(34px,3.6vw,60px);line-height:.92;letter-spacing:-.035em;text-wrap:balance}
.hero .h1 span{display:block}
.hero__sub{margin-top:1.25rem;max-width:44em;text-wrap:balance;font:300 clamp(16px,1.25vw,19px)/1.55 var(--font);color:var(--a70)}
.hero .vsl{width:min(100%,clamp(30rem,calc((100svh - 520px) * 1.7778),62rem));margin-top:clamp(1.75rem,2.5vw,2.5rem);position:relative}
.hero .vsl__frame{border-radius:4px}
.hero .vsl__frame::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--a15);border-radius:inherit;pointer-events:none}
.benefits{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.75rem;margin-top:1.25rem}
.benefits li{display:flex;align-items:center;gap:.5rem;font:500 15px/1.3 var(--font);color:#fff}
.benefits .ico{width:1.1rem;height:1.1rem;color:var(--blau2);stroke-width:2.2}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:1.5rem}
.hero__cta .btn{min-width:20rem}

/* Value Stack */

@media (max-width:767px){
  .hero{padding:84px 0 48px}
  .hero__pill{margin-bottom:1rem;height:auto;padding:.35rem .5rem;white-space:normal;line-height:1.2}
  .hero .h1{font-size:clamp(28px,8.4vw,36px)}
  .hero__sub{margin-top:.9rem;font-size:15.5px}
  .hero .vsl{margin-top:1.4rem}
  .benefits{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .75rem;margin-top:1.1rem;text-align:left}
  .benefits li{font-size:13.6px;align-items:flex-start}
  .hero__cta{width:100%;margin-top:1.5rem}
  .hero__cta .btn{width:100%;min-width:0}
}

@media (max-width:767px){
  .hero{padding-top:72px}
  .hero__pill{margin-bottom:.8rem;font-size:.75rem}
  .hero .h1{font-size:clamp(26px,7.8vw,32px)}
  .hero__sub{margin-top:.7rem;font-size:14.5px;line-height:1.5}
  .hero .vsl{margin-top:1.1rem}
  .benefits{margin-top:.9rem;gap:.45rem .75rem}
  .hero__cta{margin-top:1.1rem}
  .hero__cta .btn{height:56px}
}
@media (max-width:600px){
  .vsl__label{left:.6rem;bottom:.6rem;transform:scale(.85);transform-origin:left bottom}
  .vsl__btn{width:3.75rem;height:3.75rem}
}

/* === r10 A: Reduktion (Yann 03.10.: «Headline, Subheadline, Bild, Form – that's it») === */
/* Hero: alles rauf. Der Angebots-Tag steht auf der Höhe des Logos (Kopfzeile), neutral statt blau;
   Blau bleibt dem Button, dem Play-Knopf und der zweiten Titelzeile. */
.hero{padding-top:calc(2.25vw + 8px)}
.hero__pill{height:24px;padding:0 10px;margin-bottom:clamp(28px,2.8vw,44px);font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.87)}
.hero__cta{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:14px 28px;max-width:100%}
.hero__cta .btn{flex:none}
/* r11 Vertrauen (Yann 04.10.: keine Logos, ein Sterne-Symbol): fünf Sterne in Sekundärblau (wie die Haken darüber; Gelb und Weiss verglichen, Blau ist am ruhigsten) über «45+ KMU und Marken vertrauen Haldelain».
   Desktop neben dem Button, Telefon als eine zentrierte Zeile direkt darunter. */
.proof{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left}
.proof__stars{display:flex;gap:2px;color:var(--star,var(--blau2))}
.proof__stars svg{width:15px;height:15px;fill:currentColor}
.proof__t{font:300 14px/1.3 var(--font);color:var(--a70);white-space:nowrap}
.proof__t b{font-weight:500;color:#fff}
@media (max-width:767px){
  .hero{padding-top:calc(1.25rem + 5px)}
  .hero__pill{align-self:flex-end;height:24px;padding:0 8px;margin-bottom:20px;font-size:11px;letter-spacing:.02em;white-space:nowrap;line-height:1}
  .hero__sub{margin-top:.6rem}
  .hero .vsl{margin-top:1rem}
  .benefits{margin-top:.85rem;gap:.4rem .75rem}
  .benefits li{line-height:1.25}
  .hero__cta{margin-top:1rem}
}
@media (min-width:600px) and (max-width:991px){
  .hero__cta{gap:12px 24px}
}
@media (min-width:600px) and (max-width:767px){
  .hero__cta{gap:12px 20px}
  .hero__cta .btn{width:auto;padding:0 20px 0 24px;gap:16px}
  .proof__t{white-space:normal}
}
@media (max-width:599px){
  .hero__cta{flex-direction:column;gap:12px}
  .proof{flex-direction:row;align-items:center;justify-content:center;gap:9px;max-width:100%}
  .proof__stars svg{width:13px;height:13px}
  .proof__t{font-size:13px}
}
@media (max-width:339px){
  .hero{padding-top:62px}
  .hero__pill{align-self:center}
  .proof{flex-direction:column;gap:5px}
}

/* Formular: Halde-Schwarz, eine schmale Spalte. Titel, ein Satz, vier weisse Felder, ein Button. */
.signup-sec{padding:clamp(40px,5vw,72px) 0 0}
.signup{width:min(36rem,calc(100% - 2 * var(--pad)));margin:0 auto;padding-top:24px}
/* r11: Titel «Eure neue Website starten. / Mit einem 30-Minuten-Gespräch.» – Spalte am Desktop breiter, damit beide Zeilen einzeilig stehen;
   am Telefon skaliert der Titel so, dass der blaue Balken einzeilig bleibt */
@media (min-width:768px){.signup{width:min(46rem,calc(100% - 2 * var(--pad)))}.signup__h{font-size:40px}}
@media (min-width:1200px){.signup__h{font-size:44px}}
.sg-sent{display:none}
.signup.is-sent .sg-ask{display:none}
.signup.is-sent .sg-sent{display:block}
.signup__h .sg-ask{display:block}
.signup__lead{margin-top:16px;font:300 18px/1.45 var(--font);color:rgba(255,255,255,.87);text-wrap:pretty}
.signup .lf{margin-top:28px}
.signup .lf__row{display:grid;grid-template-columns:1fr;gap:14px}
.signup .field{display:flex;flex-direction:column;gap:6px}
.signup .field>span{font:500 15px/1.3 var(--font);color:rgba(255,255,255,.87)}
.signup .field input{display:block;width:100%;height:56px;padding:0 16px;border:0;border-radius:4px;background:#fff;color:#050505;
  font:300 17px/1.2 var(--font);caret-color:var(--blau);-webkit-appearance:none;appearance:none;box-shadow:none}
.signup .field input::placeholder{color:rgba(5,5,5,.45);opacity:1}
.signup .field input:focus{outline:2px solid var(--blau);outline-offset:2px}
.signup .field input:-webkit-autofill{-webkit-text-fill-color:#050505;box-shadow:inset 0 0 0 60px #fff}
.signup .field.err input{box-shadow:inset 0 0 0 2px #ff0000}
.signup .field.err input:-webkit-autofill{box-shadow:inset 0 0 0 2px #ff0000,inset 0 0 0 60px #fff}
/* Fehler: Signal-Rot am Feld und als Punkt, Text Weiss 2 */
.signup .field__err{position:relative;display:block;margin:0;padding-left:16px;font:300 13.5px/1.35 var(--font);font-style:normal;color:rgba(255,255,255,.87)}
.signup .field__err:empty{display:none}
.signup .field__err::before,.signup .fs__err.show::before{content:"";position:absolute;left:1px;top:calc(.675em - 4px);width:8px;height:8px;border-radius:50%;background:#ff0000}
.signup .fs__err{display:none;margin-top:14px;font:300 13.5px/1.4 var(--font);color:rgba(255,255,255,.87)}
.signup .fs__err.show{position:relative;display:block;padding-left:16px}
.signup .fs__err a{text-decoration:underline}
.signup .lf__foot{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.signup .lf__foot .btn{width:100%;height:60px}
.lf__legal{display:flex;align-items:flex-start;gap:8px;font:300 13px/1.45 var(--font);color:var(--a60);text-wrap:pretty}
.lf__legal .ico{width:14px;height:14px;margin-top:.2em}
.lf__legal b{font-weight:500;color:rgba(255,255,255,.87)}
.lf__legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Erfolg: gleiche Spalte, Haupt-Tag mit Haken, Schritte ohne Linien */
.signup .done{margin-top:28px;outline:0}
.signup .done__k{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:4px;background:var(--a5);
  font:300 13px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.signup .done__k .ico{width:16px;height:16px;color:var(--blau2)}
.signup .done__list{counter-reset:st;margin-top:22px;display:grid;gap:16px}
.signup .done__list li{counter-increment:st;position:relative;padding-left:36px;font:300 17px/1.45 var(--font);color:#fff;text-wrap:pretty}
.signup .done__list li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:5px;font:300 12px/1 var(--font);letter-spacing:.08em;color:var(--a60)}
@media (min-width:768px){
  .signup .lf__row{grid-template-columns:1fr 1fr;gap:18px 14px}
  .signup .lf__foot{margin-top:26px}
  .signup .lf__foot .btn{height:64px}
}
/* Telefon: nach dem Tap auf den Hero-Button stehen Titel, Felder, Button und Rechtszeile im ersten Bild (390×664, 360×640) */
@media (max-width:767px){
  .signup{padding-top:14px}
  .signup__h{font-size:min(30px,calc(6.4vw - 1px))}
  .signup__lead{margin-top:10px;font-size:16px;line-height:1.4}
  .signup .lf{margin-top:16px}
  .signup .lf__row{gap:8px}
  .signup .field{gap:4px}
  .signup .field>span{line-height:1.2}
  .signup .field input{height:52px}
  .signup .lf__foot{margin-top:14px;gap:10px}
  .signup .lf__foot .btn{padding:0 20px 0 24px;gap:16px}
}
@media (max-width:374px){
  .signup__lead{font-size:16px}
}
/* Kurze Telefone (375×627, 390×600, 320×568): Felder 48 px, Abstände 8 px, damit Titel, Felder, Button und Rechtszeile zusammen ins Bild passen */
@media (max-width:767px) and (max-height:630px){
  .signup{padding-top:10px}
  .signup__lead{margin-top:8px;font-size:15px;line-height:1.35}
  .signup .lf{margin-top:12px}
  .signup .lf__row{gap:8px}
  .signup .field{gap:3px}
  .signup .field input{height:48px}
  .signup .lf__foot{margin-top:12px;gap:8px}
  .signup .lf__foot .btn{height:56px}
}

/* 320×568: Felder 44 px (Tap-Ziel bleibt 44 px), damit Titel bis Rechtszeile ins Bild passen */
@media (max-width:359px) and (max-height:580px){.signup .field input{height:44px}}

/* Value Stack als Liste (CI «Listen»): Icon, Titel Medium, ein Satz in Weiss 3. Keine Karten, keine Linien, Abstand macht die Struktur.
   Desktop drei Spalten (ab 1360 px, darunter zwei), damit kein Titel umbricht. Die Garantie steht als eigene Zeile am Ende:
   blaues Schild, grösserer Titel, Satz, Button. */
.vstack{margin-top:clamp(2rem,3.5vw,3rem);display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem}
.vstack__i h3{display:flex;align-items:flex-start;gap:12px;font:500 18px/1.3 var(--font);letter-spacing:-.005em}
.vstack__i h3 .ico{width:20px;height:20px;margin-top:2px;color:#fff}
.vstack__i p{margin-top:6px;padding-left:32px;max-width:36em;font:300 15.5px/1.5 var(--font);color:var(--a60);text-wrap:pretty}
.vstack__g{margin-top:.75rem}
.vstack__g h3{font-size:24px;line-height:1.2;gap:12px}
.vstack__g h3 .ico{width:24px;height:24px;margin-top:1px;color:var(--blau2)}
.vstack__g p{margin-top:10px;padding-left:36px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.87);max-width:54em;text-wrap:balance}
.vstack__g .btn{margin:22px 0 0 36px}
@media (min-width:768px){
  .vstack{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 3rem}
  .vstack__g{grid-column:1/-1}
}
@media (min-width:1360px){
  .vstack{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:991px){
  .vstack{column-gap:2rem}
  .vstack__i h3{font-size:17px}
}
@media (max-width:767px){
  .vstack__i h3{font-size:17px}
  .vstack__i h3 .ico{width:19px;height:19px}
  .vstack__i p{padding-left:31px;font-size:15px}
  .vstack__g{margin-top:.5rem}
  .vstack__g h3{font-size:21px}
  .vstack__g h3 .ico{width:22px;height:22px}
  .vstack__g p{padding-left:0;font-size:16px}
  .vstack__g .btn{display:flex;width:100%;height:60px;margin:18px 0 0}
}

/* r11 Logo-Wand wie haldelain.ch: Titel «Schweizer KMU & Marken, / die Haldelain vertrauen.» (ohne Balken, der bleibt beim Formular),
   21 Logos weiss, 7 pro Zeile (Telefon 3), Grössen optisch ausgeglichen (Fläche statt Höhe, Datei-Breite = --w in px).
   Grund Halde-Schwarz mit EINEM Halde-Blau-Shine (CI-Fläche «Shine», Näherung ohne filter): Kreis, der mit der Breite wächst
   (Telefon: Ellipse, 120 % der Fensterbreite), Mitte unter der Sektion, die Unterkante schneidet das Licht hart ab = der Break zum Value Stack. Die unteren Ecken bleiben dunkel.
   --sc = Farbe des Lichts (Telefon etwas dunkler als Halde-Blau, damit der blaue Sticky-Button darauf seine Kante behält). */
.lw{--h:clamp(420px,52vw,760px);--rx:min(var(--h),60vw);--sc:0 97 255;position:relative;padding:clamp(80px,8vw,128px) 0 clamp(120px,12vw,184px);
  background:radial-gradient(var(--rx) var(--h) at 50% calc(100% + var(--h) * .1667),
    rgb(var(--sc)/1) 0, rgb(var(--sc)/.977) 35.2%, rgb(var(--sc)/.841) 49.1%, rgb(var(--sc)/.5) 63%, rgb(var(--sc)/.159) 76.9%,
    rgb(var(--sc)/.023) 90.7%, rgb(var(--sc)/0) 100%) #050505}
.lw__grid{--s:1;margin-top:clamp(48px,5vw,80px);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:clamp(28px,3vw,44px)}
.lw__grid li{display:flex;justify-content:center;align-items:center;height:64px}
.lw__grid picture{display:flex;justify-content:center;max-width:88%}
.lw__grid img{width:calc(var(--w) * var(--s) * 1px);height:auto}
@media (max-width:1199px){.lw__grid{--s:.76}}
@media (max-width:991px){.lw__grid{--s:.64}}
@media (max-width:767px){
  .lw{--sc:2 80 214;padding:72px 0 56px}
  .lw__h{font-size:min(30px,calc(7.1vw - 1px))}
  .lw__grid{--s:.66;margin-top:36px;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .lw__grid li{height:52px}
}
@media (max-width:359px){.lw__grid{--s:.6}}

/* r11 Value Stack auf dem Halde-Verlauf (CI «Halde-Gradient Complex», randlos, Ausschnitt aus cover-bg ohne Weisslicht:
   Text und Button stehen auf Dunkelblau und Schwarz). Oben dunkel, damit der abgeschnittene Shine darüber klar absetzt;
   unten läuft der Verlauf in Halde-Schwarz aus, also nur EIN Schnitt. Desktop: Weisslicht am rechten Rand neben der Garantie (dort steht kein Text). */
#angebot{position:relative;isolation:isolate;padding-bottom:clamp(96px,9vw,144px);
  background:#050505 url(../img/halde-verlauf-1920.webp) 100% 0/cover no-repeat;
  background-image:image-set(url(../img/halde-verlauf-1920.avif) type("image/avif"),url(../img/halde-verlauf-1920.webp) type("image/webp"))}
#angebot::after{content:"";position:absolute;inset:auto 0 0;height:clamp(96px,10vw,160px);z-index:-1;background:linear-gradient(rgba(5,5,5,0),#050505);pointer-events:none}
#angebot .vstack__i p{color:rgba(255,255,255,.78)}
#angebot .vstack__g h3 .ico{color:#fff}
/* Tablet und zweispaltig bis 1199 px: derselbe Verlauf, aber von links her (Dunkelblau, Blauband, Schwarz), das Weisslicht bleibt
   ausserhalb; sonst läge die Beschreibung «3 Monate Support» darauf (Kontrast unter 4,5:1).
   Telefon: schmaler Ausschnitt ohne Weisslicht (der Text läuft dort bis an den Rand). */
@media (max-width:1199px){#angebot{background-position:0 0}}
@media (max-width:767px){
  #angebot{background-image:url(../img/halde-verlauf-m-600.webp);
    background-image:image-set(url(../img/halde-verlauf-m-600.avif) type("image/avif"),url(../img/halde-verlauf-m-600.webp) type("image/webp"));background-position:50% 0}
}
@media (max-width:767px){#angebot{padding-bottom:88px}}

/* Kundenstimmen: Halde-Schwarz, flache Karten (Weiss 6) in Inhaltshöhe, eine Bewertungszeile */
#stimmen .rating .stars{font-size:13px}

/* Hero am Desktop: die ganze CTA-Zeile bleibt ab 600 px Fensterhöhe mindestens 24 px über der Falz.
   Das Video behält die bisherige Breite (1280×720: 480 px, 1440×900: 676 px) und schrumpft nur, wenn darunter sonst der Platz fehlt.
   --r = Höhe von allem ausser dem Video (wächst mit der Breite, weil Titel und Abstände mitwachsen) plus Sicherheitsabstand.
   Niedrige Fenster (< 720 px): Abstände und Titel etwas knapper. */
@media (min-width:992px){
  .hero .vsl{--r:calc(251px + 15.4vw);width:min(100%,clamp(20rem,max((100svh - 520px) * 1.7778,min(30rem,(100svh - var(--r)) * 1.7778)),62rem))}
}
@media (min-width:992px) and (max-height:719px){
  .hero__pill{margin-bottom:18px}
  .hero .h1{font-size:min(clamp(34px,3.6vw,60px),6.6svh)}
  .hero__sub{margin-top:.8rem}
  .hero .vsl{--r:calc(316px + 5vw);margin-top:1.1rem}
  .benefits{margin-top:.9rem}
  .hero__cta{margin-top:1rem}
  .hero__cta .btn{height:56px}
}

/* Kurze Telefone im Instagram-Browser (iPhone SE: 375×627): etwas knappere Abstände, damit Button und Vertrauenszeile ins erste Bild passen */
@media (max-width:767px) and (max-height:630px){
  .hero__pill{margin-bottom:14px}
  .hero .vsl{margin-top:.75rem}
  .benefits{margin-top:.7rem}
  .hero__cta{margin-top:.8rem}
}

/* Telefone: Wischen reicht, die Pfeile weichen, damit die Titel die ganze Breite haben */
@media (max-width:767px){.sec__head>.slider__nav{display:none}}

/* Websites: Name schlicht statt blauer Pille */
.slide__k{margin-top:.9rem;font:500 15px/1.3 var(--font);color:#fff}
.slide__p{margin-top:.3rem}
/* Schmale Telefone: Button-Text bleibt einzeilig */
@media (max-width:389px){.btn{padding:0 16px 0 20px;gap:12px;letter-spacing:.6px}.signup .lf__foot .btn,.vstack__g .btn{padding:0 16px 0 20px;gap:12px}}
@media (max-width:339px){.btn,.signup .lf__foot .btn,.vstack__g .btn{padding:0 14px 0 16px;gap:10px;font-size:12.5px;letter-spacing:.4px}}
/* === /r10 A === */

/* === r6 fixes === */
.slider__btn[disabled],.slider__btn[aria-disabled=true]{opacity:.35;cursor:default}
@media (hover:hover){.slider__btn[aria-disabled=true]:hover{background:rgba(255,255,255,.08)}}
/* FAQ-Fix r6: geschlossene Antworten für Screenreader und Seitensuche ausblenden (erst nach dem Zuklappen) */
.faq-js .qa__a{visibility:hidden;transition:visibility 0s .5s}
.faq-js .qa.is-open .qa__a{visibility:visible;transition-delay:0s}
.qa__q{-webkit-tap-highlight-color:transparent}
html:not(.faq-js) .qa__q{cursor:default}
html:not(.faq-js) .qa__q i{display:none}
@media (prefers-reduced-motion:reduce){.faq-js .qa__a{transition:none}}

/* === r7 icons === */
/* Icons nach CI-Manual S. 27: nur Lucide, Strich 1,5 im 24er-Raster (skaliert mit), nie gefuellt, kein Kreis/Kasten dahinter.
   Farbe Weiss 1; Yann 03.10.: blau erlaubt, wo es die Wirkung verbessert (Garantie-Schild, Hero-Haken). */
/* r9: Hero-Symbole (Pfeil, Play, Haken) und ihre Striche bleiben wie vor dem Patch; Formular-Icons stehen im Formular-Block */
.micro .ico{color:#fff;opacity:1}

/* === /r7 icons === */

/* Button B ist länger: Karten und Buttons dürfen schrumpfen */
.vstack>li{min-width:0}
.btn{max-width:100%}
.btn span{min-width:0}
@media (max-width:600px){.btn span{white-space:normal;text-align:left}}
/* === r11 stylescapes === */
/* Stylescapes als neutrale Liste (CI «Listen»: Light, keine Linien, Abstand macht die Struktur). Name in Light Weiss,
   Branche leise in Weiss 3 (mit Maus ab 992 px direkt nach dem Namen, sonst rechtsbündig über dem Board). Titel ohne blauen Balken (der bleibt dem Formular).
   Maus ab 992 px (wie r10): beim Überfahren erscheint das ganze Board rechts neben der Liste, gleitet sanft zur Zeile, die
   übrigen Zeilen treten zurück; das ↗ zeigt sich nur an der aktiven Zeile. Klick, Enter oder Leertaste: Vollbild (Dialog).
   Alles andere – Telefon, Tablet, schmales Fenster (r11, Yann 04.10.: «eher klein darunter zeigen mit Vergrösserungs-Icon»):
   unter jeder Zeile das ganze Board klein in Inhaltsbreite (Radius 4, kein Zuschnitt), unten rechts eine Lupe; Antippen von
   Zeile, Board oder Lupe öffnet das Vollbild. Die kleinen Bilder laden erst kurz bevor sie ins Bild kommen. */
.ssl .ssl__hb{background:none;padding:0}
.ssl__sub{margin-top:1.25rem;max-width:48rem;font:300 18px/1.45 var(--font);color:rgba(255,255,255,.87);text-wrap:pretty}
.ssl__wrap{position:relative;margin-top:clamp(2rem,3.5vw,3rem)}
.ssl__row{display:flex;align-items:baseline;gap:18px;width:100%;padding:12px 0;text-align:left;color:#fff;-webkit-tap-highlight-color:transparent}
.ssl__n{min-width:0;font:300 clamp(22px,calc(1.4vw + 8px),28px)/1.3 var(--font);transition:color .45s var(--ease)}
.ssl__k{flex:none;display:inline-flex;align-items:center;gap:8px;font:300 13px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--a60);transition:opacity .35s var(--ease)}
.ssl__i{width:14px;height:14px;transition:color .35s var(--ease),opacity .35s var(--ease)}
.ssl__row:focus-visible{outline:2px solid var(--blau2);outline-offset:2px;border-radius:2px}
.ssl__list.is-dim .ssl__row:not(.is-on) .ssl__n{color:var(--a30)}
.ssl__list.is-dim .ssl__row:not(.is-on) .ssl__k{opacity:0}
.ssl__row.is-on .ssl__i{color:#fff}
.ssl__pv,.ssl__th{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:992px){
  .js .ssl__i{opacity:0}
  .js .ssl__row.is-on .ssl__i{opacity:1}
  .js .ssl__pv{display:block;position:absolute;top:0;left:50%;right:0;height:0;pointer-events:none;opacity:0;visibility:hidden;
    transition:opacity .45s var(--ease),visibility 0s linear .45s,transform .8s var(--ease)}
  .js .ssl__pv.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s,transform .8s var(--ease)}
  .js .ssl__pv.no-tr{transition:none}
  .ssl__pic{position:absolute;top:0;left:0;width:100%;transform:translateY(-50%);border-radius:4px;overflow:hidden;background:#0c0c0c;opacity:0;transition:opacity .3s var(--ease)}
  .ssl__pic.is-on{opacity:1}
  .ssl__pic img{width:100%;height:100%}
}
/* Telefon, Tablet, schmales Fenster (genau das Gegenstück zur Maus-Vorschau): Board klein unter der Zeile */
@media not all and (hover:hover) and (pointer:fine) and (min-width:992px){
  /* Zeile so breit wie das Board, Branche rechtsbündig (Telefon und Tablet gleich) */
  .ssl__list>li{max-width:736px}
  .ssl__k{margin-left:auto}
  .js .ssl__list{display:flex;flex-direction:column;gap:28px}
  .js .ssl__i{display:none}
  .js .ssl__th{display:block;position:relative;width:100%;max-width:736px;border-radius:4px;overflow:hidden;background:#0c0c0c;text-align:left;-webkit-tap-highlight-color:transparent}
  .ssl__tp{display:block;width:100%}
  .ssl__tp img{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease);-webkit-user-drag:none}
  .ssl__th.is-ld .ssl__tp img{opacity:1}
  .ssl__th:active .ssl__tp img{opacity:.82;transition-duration:.15s}
  .ssl__z{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:4px;background:rgba(5,5,5,.72);color:#fff;pointer-events:none}
  .ssl__z .ico{width:16px;height:16px}
}
/* Vollbild */
.ssl-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--schwarz);color:#fff;overflow:hidden;overscroll-behavior:contain}
.ssl-lb[open]{display:flex;flex-direction:column;animation:sslIn .35s var(--ease)}
@keyframes sslIn{from{opacity:0}}
.ssl-lb::backdrop{background:var(--schwarz)}
.ssl-lb__top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:calc(16px + env(safe-area-inset-top)) var(--pad) 16px}
.ssl-lb__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:300 13px/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.ssl-lb__k{color:var(--a60);margin-right:.5em}
.ssl-lb__x{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:4px;background:var(--a5);transition:background-color .3s}
.ssl-lb__x .ico{width:20px;height:20px}
@media (hover:hover){.ssl-lb__x:hover{background:var(--a15)}}
.ssl-lb__x:focus-visible{outline:2px solid var(--blau2);outline-offset:2px}
.ssl-lb__sc{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-x pinch-zoom;outline:0;user-select:none;-webkit-user-select:none}
.ssl-lb__sc::-webkit-scrollbar{display:none}
.ssl-lb__sc:focus-visible{outline:2px solid var(--blau2);outline-offset:-2px}
.ssl-lb__pic{flex:none;height:100%;padding:0 var(--pad);box-sizing:content-box}
/* Bis die volle Auflösung da ist: dunkle Fläche im Format des Boards bzw. das schon geladene kleinere Bild als Hintergrund */
.ssl-lb__img{width:auto;height:100%;max-width:none;border-radius:4px;background:#0c0c0c no-repeat 0 0/100% 100%;-webkit-user-drag:none}
.ssl-lb__hint{flex:none;padding:16px var(--pad) calc(20px + env(safe-area-inset-bottom));font:300 12.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--a60)}
@media (hover:hover) and (pointer:fine){.ssl-lb__sc{cursor:grab}.ssl-lb__sc.is-grab{cursor:grabbing}}
.ssl-lock,.ssl-lock body{overflow:hidden}
.ssl-lock .cursor,.ssl-lock .sticky{visibility:hidden}
@media (max-width:767px){
  .ssl__sub{margin-top:1rem;font-size:17px;line-height:1.4}
  .ssl__row{padding:10px 0;gap:16px}
}
@media (max-width:359px){.ssl__row{gap:12px}.ssl__k{gap:6px;font-size:12px;letter-spacing:.04em}.ssl__i{width:12px;height:12px}}
@media (max-width:339px){.ssl__kt{display:none}}
@media (prefers-reduced-motion:reduce){
  .ssl__n,.ssl__k,.ssl__i,.js .ssl__pv,.js .ssl__pv.is-on,.ssl__pic,.ssl-lb__x,.ssl__tp img{transition:none}
  .ssl-lb[open]{animation:none}
}
/* === /r11 stylescapes === */

/* === r10b Custom Cursor wieder da (Yann will ihn) === */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:2147483645;pointer-events:none}
.cursor__outer,.cursor__inner{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cursor__outer{width:100px;height:100px;margin:-50px 0 0 -50px;display:grid;place-items:center}
.cursor__outer::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;
  transform:scale(.3);transition:transform .45s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)}
.cursor__inner{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;transition:background-color .3s var(--ease-ui),opacity .2s}
.cursor__label{position:relative;font:500 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transform:scale(.6);
  transition:opacity .25s var(--ease),transform .35s var(--ease),letter-spacing .35s var(--ease)}
.cursor.is-hover .cursor__outer::before{transform:scale(.54)}
.cursor.is-hover .cursor__inner{background:var(--blau)}
.cursor.is-drag .cursor__outer::before{transform:scale(1);background:var(--blau);border-color:var(--blau)}
.cursor.is-drag .cursor__label{opacity:1;transform:none}
.cursor.is-drag .cursor__inner{opacity:0}
.cursor.is-down .cursor__outer::before{transform:scale(.78);background:var(--blau2);border-color:var(--blau2)}
.cursor.is-down .cursor__label{letter-spacing:.3em}
.cursor.is-hidden .cursor__outer,.cursor.is-hidden .cursor__inner{opacity:0}
.has-cursor .slider.is-drag,.has-cursor .slider.is-drag:active{cursor:none}
/* === r11 hero gruppe (Yann 04.10.: Tag, Headline, Sub gehören zusammen) === */
.hero__pill{align-self:center;margin-bottom:16px}
.hero__sub{margin-top:14px}
@media (max-width:767px){
  .hero__pill{align-self:center;margin-bottom:12px}
  .hero__sub{margin-top:8px}
}
/* === /r11 hero gruppe === */

/* === r12 (Yann 04.10.): Shine unten rechts, grösser und weicher; Logos fliessen; kein Schwarz-Fade auf dem Verlauf; Garantie in der Laser-Box === */
.lw{background:radial-gradient(min(95vw,1500px) min(68vw,1050px) at 88% calc(100% + min(16vw,250px)),
    rgb(0 97 255/1) 0, rgb(0 97 255/.9) 12%, rgb(0 97 255/.72) 24%, rgb(0 97 255/.52) 36%, rgb(0 97 255/.34) 48%,
    rgb(0 97 255/.19) 60%, rgb(0 97 255/.08) 72%, rgb(0 97 255/.025) 84%, rgb(0 97 255/0) 100%) #050505}
.lw__rows{--s:1;--g:clamp(56px,5.5vw,96px);margin-top:clamp(48px,5vw,80px);display:grid;row-gap:clamp(20px,2.4vw,36px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.lw__row{display:flex;overflow:hidden}
.lw__track{flex:none;display:flex;align-items:center;gap:var(--g);padding-right:var(--g);animation:lw-l 90s linear infinite}
.lw__row--r .lw__track{animation:lw-r 100s linear infinite}
.lw__track li{flex:none;display:flex;align-items:center;justify-content:center;height:64px}
.lw__track img{width:calc(var(--w) * var(--s) * 1px);height:auto}
@keyframes lw-l{to{transform:translateX(-100%)}}
@keyframes lw-r{from{transform:translateX(-100%)}to{transform:none}}
@media (hover:hover){.lw__rows:hover .lw__track{animation-play-state:paused}}
@media (max-width:1199px){.lw__rows{--s:.8}}
@media (max-width:767px){
  .lw{background:radial-gradient(150vw 110vw at 92% calc(100% + 30vw),
    rgb(2 80 214/.95) 0, rgb(2 80 214/.75) 15%, rgb(2 80 214/.5) 32%, rgb(2 80 214/.28) 48%, rgb(2 80 214/.12) 64%, rgb(2 80 214/.04) 80%, rgb(2 80 214/0) 100%) #050505}
  .lw__rows{--s:.66;--g:40px;margin-top:36px;row-gap:12px}
  .lw__track li{height:52px}
}
@media (prefers-reduced-motion:reduce){
  .lw__track{animation:none}
  .lw__row{flex-wrap:wrap;justify-content:center}
  .lw__track{flex-wrap:wrap;justify-content:center;padding:0 var(--pad)}
  .lw__track[aria-hidden]{display:none}
}
#angebot::after{content:none}
/* Garantie: schwarze Box in der Laserkontur (CI: Kontur 1 px Halde-Blau, Radius 12, 10 px Abstand, Karte Halde-Schwarz Radius 6) */
.vstack__g{grid-column:1/-1;margin-top:.75rem;padding:9px;border:1px solid var(--blau);border-radius:12px}
.vstack__gi{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.6vw,40px);border-radius:6px;background:#050505}
.vstack__gi .vstack__gt p{padding-left:36px}
.vstack__gi .btn{margin:24px 0 0 36px}
#angebot .vstack__g h3 .ico{color:var(--blau2)}
@media (min-width:992px){
  .vstack__gi{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}
  .vstack__gi .btn{flex:none;margin:0}
}
@media (max-width:767px){
  .vstack__gi{padding:22px 20px 20px}
  .vstack__gi .vstack__gt p{padding-left:0}
  .vstack__gi .btn{display:flex;width:100%;margin:18px 0 0}
}
.vstack__g h3{display:flex;align-items:flex-start;gap:12px;font:500 24px/1.2 var(--font);letter-spacing:-.005em}
.vstack__g h3 .ico{flex:none;width:24px;height:24px;margin-top:1px}
.vstack__gi .vstack__gt p{margin-top:10px;font:300 17px/1.5 var(--font);color:rgba(255,255,255,.87);max-width:40em;text-wrap:pretty}
@media (max-width:767px){.vstack__g h3{font-size:21px}.vstack__g h3 .ico{width:22px;height:22px}.vstack__gi .vstack__gt p{font-size:16px}}
/* === /r12 === */

/* === r13 (Yann 04.10.: Value Stack und Team wie auf der Social-Landingpage) === */
.vstack__i{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
.vstack__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:4px;background:var(--a5)}
.vstack__ic .ico{width:16px;height:16px;margin:0;color:#fff}
.vstack__i h3{display:block;font:500 17px/1.3 var(--font);letter-spacing:-.005em}
.vstack__i p{margin-top:4px;padding-left:0;font:300 15px/1.5 var(--font)}
#angebot .vstack__ic{background:rgba(255,255,255,.08)}
.tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:4px;background:var(--a5);font:300 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#fff}
.tag .ico{width:14px;height:14px;flex:none}
.team__head{display:grid;gap:24px;align-items:end}
.team__head .h2{margin-top:22px}
.team__lead{max-width:40em;font:300 clamp(17px,1.35vw,20px)/1.6 var(--font);color:rgba(255,255,255,.87)}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:48px}
.person__img{aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#0a0f1a}
.person__img img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .9s var(--ease)}
@media (hover:hover){.person:hover .person__img img{transform:scale(1.03)}}
.person b{display:block;margin-top:12px;font:500 15px/1.3 var(--font)}
.person span{display:block;font:300 13px/1.4 var(--font);color:var(--a60)}
@media (min-width:768px){.team__head{grid-template-columns:1fr 1fr;gap:64px}.people{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
/* === /r13 === */

/* === r14 Sticky-CTA als blaue Card mit Yann (Wunsch Yann 04.10.) === */
.sticky{position:fixed;z-index:1000;right:clamp(16px,2.6vw,40px);bottom:calc(clamp(16px,2.6vw,32px) + env(safe-area-inset-bottom));display:block;width:auto;height:auto;padding:0;
  background:none;border-radius:0;font:inherit;letter-spacing:normal;text-transform:none;
  transform:translateY(calc(100% + 60px));visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s}
.sticky.show{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s}
@media (hover:hover){.sticky:hover{background:none}}
.sticky__a{position:relative;display:flex;align-items:flex-end;gap:14px;width:356px;min-height:116px;padding:16px 44px 16px 0;border-radius:6px;background:var(--blau);color:#fff;text-decoration:none;
  transition:background-color .3s}
@media (hover:hover){.sticky__a:hover{background:#1a71ff}.sticky__a:hover .sticky__go .ico{transform:translateX(4px)}}
.sticky__pic{flex:none;align-self:flex-end;width:118px;margin:-46px 0 -16px 6px}
.sticky__pic img{display:block;width:118px;height:auto}
.sticky__txt{display:flex;flex-direction:column;gap:3px;min-width:0;padding-bottom:2px}
.sticky__txt b{font:500 16px/1.25 var(--font);letter-spacing:-.005em}
.sticky__sub{font:300 13px/1.35 var(--font);color:rgba(255,255,255,.87)}
.sticky__go{display:inline-flex;align-items:center;gap:8px;margin-top:9px;font:500 11.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.sticky__go .ico{width:13px;height:13px;transition:transform .35s var(--ease)}
.sticky__x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:32px;height:32px;border-radius:4px;color:rgba(255,255,255,.87);background:none;transition:background-color .3s}
.sticky__x::before{content:"";position:absolute;inset:-6px}
.sticky__x .ico{width:16px;height:16px}
@media (hover:hover){.sticky__x:hover{background:rgba(255,255,255,.15);color:#fff}}
.sticky__a:focus-visible,.sticky__x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:767px){
  .sticky{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .sticky__a{width:auto;min-height:76px;gap:10px;padding:10px 44px 10px 0}
  .sticky__pic{width:74px;margin:-30px 0 -10px 4px}
  .sticky__pic img{width:74px}
  .sticky__txt b{font-size:14.5px}
  .sticky__sub{display:none}
  .sticky__go{margin-top:5px;font-size:11px}
  .sticky__x{top:4px;right:4px}
}
@media (prefers-reduced-motion:reduce){.sticky,.sticky.show,.sticky__go .ico{transition:none}}
.sticky__a{display:block;width:400px;min-height:0;padding:20px 48px 20px 150px;overflow:visible}
.sticky__pic{position:absolute;left:10px;bottom:0;width:132px;margin:0;pointer-events:none}
.sticky__pic img{width:132px;height:auto}
.sticky__txt{padding:0}
.sticky__txt b{white-space:nowrap}
.sticky__go{white-space:nowrap}
@media (max-width:767px){
  .sticky__a{width:auto;padding:14px 44px 14px 96px}
  .sticky__pic{left:8px;width:82px}
  .sticky__pic img{width:82px}
  .sticky__txt b{white-space:normal}
}
@media (max-width:359px){.sticky__a{padding-left:84px}.sticky__pic,.sticky__pic img{width:72px}.sticky__go{font-size:10.5px;letter-spacing:.05em}}
/* === /r14 === */

/* === r15 Fotoshooting-Wand: zwei Reihen, gleiten beim Scrollen gegeneinander (Yann 04.10.) === */
.sw{--h:clamp(170px,15vw,260px);--g:12px;margin-top:clamp(32px,4vw,56px);display:grid;gap:var(--g)}
.sw__row{overflow:hidden}
.sw__track{display:flex;gap:var(--g);width:max-content;will-change:transform}
.sw__track li{flex:none}
.sw__track img{display:block;height:var(--h);width:auto;border-radius:4px;object-fit:cover;background:#111;user-select:none;-webkit-user-drag:none}
@media (max-width:767px){.sw{--h:clamp(118px,34vw,150px);--g:8px}}
@media (prefers-reduced-motion:reduce){.sw__row{overflow-x:auto;scrollbar-width:none}.sw__row::-webkit-scrollbar{display:none}.sw__track{will-change:auto}}
/* === /r15 === */

/* === r17 Formular (max. Best Practice) und Logos direkt unter dem Formular === */
.signup .lf__row{grid-template-columns:1fr!important}
.signup{width:min(34rem,calc(100% - 2 * var(--pad)))}
@media (min-width:768px){.signup{width:min(40rem,calc(100% - 2 * var(--pad)));padding-top:0}.signup__h{font-size:34px}.signup .lf{margin-top:24px}.signup .lf__row{gap:12px}}
.field__why{font-weight:300;color:var(--a60);text-transform:none;letter-spacing:0}
.field__tip{display:block;margin-top:8px;font:300 14px/1.4 var(--font);color:rgba(255,255,255,.87)}
.field__tip button{padding:0;font:500 14px/1.4 var(--font);color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.signup-sec{padding-bottom:0}
.lw{padding-top:clamp(36px,3.5vw,56px)}
.lw__k{font:300 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--a60);text-align:center}
.lw__rows{margin-top:clamp(20px,2vw,28px)}
@media (max-width:767px){.lw{padding-top:22px}.lw__rows{margin-top:12px}}
/* === /r17 === */

/* === r18 Team mit Konzept- und Bürobild, Porträts auch mobil in einer Reihe === */
.team__pics{display:grid;grid-template-columns:1fr;gap:10px;margin-top:40px}
.team__pic{margin:0;border-radius:6px;overflow:hidden;background:#0a0f1a}
.team__pic img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.team .people{margin-top:10px}
@media (min-width:768px){.team__pics{grid-template-columns:1.45fr 1fr;gap:16px;margin-top:48px}.team .people{margin-top:16px}}
@media (max-width:767px){
  .team .people{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .team .person b{margin-top:8px;font-size:12px}
  .team .person span{font-size:10.5px;line-height:1.3}
}
@media (min-width:768px){.team__pic--b{position:relative}.team__pic--b img{position:absolute;inset:0;aspect-ratio:auto}}
/* === /r18 === */

/* === r21 Formularfelder: Icon im Feld, Label halb oben eingebaut · Handgezeichnete Notizen (Yann 04.10.) === */
@font-face{font-family:"Caveat";src:url(../fonts/caveat-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
.signup .lf__row{gap:24px}
.signup .field{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.signup .field>input{grid-area:1/1;padding-left:48px}
.signup .field>.field__ico{grid-area:1/1;align-self:center;justify-self:start;margin-left:16px;width:18px;height:18px;color:#9aa1ab;pointer-events:none;z-index:1}
.signup .field>.field__err{grid-row:2}
.signup .field>.field__tip{grid-row:3}
.signup .field>span[id]{position:absolute;z-index:2;top:-10px;left:10px;margin:0;padding:3px 8px 1px;border-radius:4px 4px 0 0;background:#fff;
  font:500 11px/1.2 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#4b5260;white-space:nowrap}
.signup .field>span[id] .field__why{font-weight:300;text-transform:none;letter-spacing:0;color:#7a818c}
.signup .field:focus-within>span[id]{color:var(--blau)}
.signup .field:focus-within>.field__ico{color:var(--blau)}
.signup .field.err>.field__ico{color:#e00}
@media (max-width:767px){.signup .lf__row{gap:22px!important}}

.note{position:absolute;z-index:3;display:flex;align-items:flex-start;gap:6px;color:#fff;pointer-events:none}
.note__t{font:600 clamp(22px,1.75vw,28px)/1.05 "Caveat",var(--font);letter-spacing:.01em;transform:rotate(-6deg);white-space:nowrap}
.note__arr{flex:none;overflow:visible}
.note__arr path{stroke-dasharray:1;stroke-dashoffset:0}
.js .note .note__arr path{stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1) .25s}
.js .note .note__arr path+path{transition-delay:1s;transition-duration:.35s}
.js .note .note__t{opacity:0;transform:rotate(-6deg) translateY(6px);transition:opacity .5s ease,transform .6s var(--ease)}
.js .note.is-in .note__arr path{stroke-dashoffset:0}
.js .note.is-in .note__t{opacity:1;transform:rotate(-6deg)}
@media (prefers-reduced-motion:reduce){.js .note .note__arr path,.js .note .note__t{transition:none}}
/* VSL: links neben dem Video, nie darüber */
.note--vsl{right:calc(100% + 18px);top:22%;flex-direction:column;align-items:flex-end;gap:2px}
.note--vsl .note__t{text-align:right}
.note--vsl .note__arr{width:clamp(90px,8vw,124px);height:auto;margin-right:-14px}
@media (max-width:991px){.note--vsl{display:none}}
/* Formular: Yann rechts neben dem Formular (Desktop), unter der Rechtszeile (Telefon) */
.signup{position:relative}
.note--yann{left:calc(100% + 40px);bottom:24px;flex-direction:column;align-items:flex-start}
.note--yann .note__pic{order:3;width:132px;margin-top:6px}
.note--yann .note__pic img{display:block;width:132px;height:auto}
.note--yann .note__t{order:1;margin-left:28px}
.note--yann .note__a--d{order:2;margin:-4px 0 0 -48px}
.note--yann .note__a--d .note__arr{width:100px;height:auto}
.note--yann .note__a--m{display:none}
.signup.is-sent .note--yann{display:none}
@media (max-width:1199px){
  .note--yann{position:relative;left:auto;bottom:auto;margin:22px 0 0;flex-direction:row;align-items:flex-end;gap:10px}
  .note--yann .note__pic{order:1;width:72px;margin:0}
  .note--yann .note__pic img{width:72px}
  .note--yann .note__t{order:2;margin:0 0 18px;font-size:24px}
  .note--yann .note__a--d{display:none}
  .note--yann .note__a--m{display:block;order:3;margin:0 0 28px}
  .note--yann .note__a--m .note__arr{width:64px;height:auto}
}
/* Team: über dem Bürobild */
.team__pics{position:relative}
.note--team{right:12%;bottom:calc(100% - 2px);align-items:flex-end;gap:4px}
.note--team .note__arr{width:70px;height:auto;margin-bottom:-6px}
@media (max-width:767px){.note--team{display:none}}
/* === /r21 === */

/* === r22 Hero ohne CTA, Button + Vertrauen im Formular, verspielter Pfeil vom VSL zum Formular === */
.lf__go{display:flex;align-items:center;gap:14px 28px}
.lf__go .btn{flex:none}
.lf__proof{flex:0 1 auto}
@media (min-width:768px){.signup .lf__go .btn{width:auto;min-width:19rem}}
@media (max-width:767px){
  .lf__go{flex-direction:column;align-items:stretch;gap:12px}
  .lf__go .btn{width:100%}
  .lf__proof{flex-direction:row;align-items:center;justify-content:center;gap:9px}
  .lf__proof .proof__stars svg{width:13px;height:13px}
  .lf__proof .proof__t{font-size:13px;white-space:normal}
}
.hero{padding-bottom:clamp(40px,4vw,64px)}
.signup-sec{position:relative}
.flow{position:absolute;inset:0 0 auto;height:0;z-index:4;pointer-events:none;color:#fff}
.flow__d{--vw2:min(50vw,clamp(15rem,calc((100svh - 520px) * .8889),31rem));position:absolute;left:calc(50% + var(--vw2) - 40px);top:-420px;width:220px;height:auto;overflow:visible}
.flow__t{position:absolute;font:600 clamp(22px,1.75vw,28px)/1.05 "Caveat",var(--font);transform:rotate(-6deg);white-space:nowrap}
.flow__t--d{--vw2:min(50vw,clamp(15rem,calc((100svh - 520px) * .8889),31rem));left:calc(50% + var(--vw2) + 170px);top:-300px}
.flow__m,.flow__t--m{display:none}
.flow path{stroke-dasharray:1;stroke-dashoffset:0}
.js .flow path{stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) .2s}
.js .flow path+path{transition-delay:1.5s;transition-duration:.35s}
.js .flow .flow__t{opacity:0;transition:opacity .6s ease .8s}
.js .flow.is-in path{stroke-dashoffset:0}
.js .flow.is-in .flow__t{opacity:1}
@media (max-width:1599px){.flow__t--d{display:none}}
@media (max-width:1359px){
  .flow__d{display:none}
  .flow__m{display:block;position:absolute;right:max(16px,calc(50% - 20rem - 10px));top:-44px;width:56px;height:auto;overflow:visible}
  .flow__t--m{display:block;right:calc(max(16px,calc(50% - 20rem - 10px)) + 50px);top:-34px;font-size:24px}
}
@media (max-width:767px){
  .flow__m{right:max(16px,6vw)}
  .flow__t--m{right:calc(max(16px,6vw) + 50px)}
}
@media (prefers-reduced-motion:reduce){.js .flow path,.js .flow .flow__t{transition:none}}
/* === /r22 === */

/* === r23 Conversion-Punkt (Yann-Mockup 04.10.): Janis links, Rojith rechts schauen aufs Formular; Lead leiser; Logo-Label unten === */
.signup__lead{margin-top:10px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.6)}
.signup .lf{margin-top:20px}
.lw__k{margin-top:clamp(18px,2vw,26px);font-size:11px;color:rgba(255,255,255,.45)}
.lw{overflow-x:clip}
.lw__rows{margin-top:0}
.lw{padding-top:clamp(40px,4vw,64px)}
.look{position:absolute;z-index:3;pointer-events:none;display:none}
.look img{display:block;width:100%;height:auto}
@media (min-width:1200px){
  .look{display:block;--gap:clamp(40px,6vw,160px)}
  .signup-sec{overflow-x:clip}
  .look--janis{width:clamp(220px,19vw,320px);left:calc(50% - 20rem - var(--gap) - clamp(220px,19vw,320px));bottom:0;
    -webkit-mask-image:linear-gradient(#000 62%,transparent 98%);mask-image:linear-gradient(#000 62%,transparent 98%)}
  .look--rojith{width:clamp(260px,24vw,400px);left:calc(50% + 20rem + var(--gap));bottom:0}
}
/* === /r23 === */

/* === r24 Hero: mehr Luft, VSL leuchtet (atmende Kontur), Social-Proof-Badge, Glas-Buttons, Pfeil bis unter den Fold === */
.hero{padding-top:clamp(64px,5.6vw,108px)}
@media (max-width:767px){.hero{padding-top:44px}.hero .vsl{margin-top:30px}}
/* -- VSL-Licht: unten ein vorgerechnetes, weichgezeichnetes Licht (nur Rotation auf der GPU), darüber eine scharfe Kontur -- */
.hero .vsl{isolation:isolate;--glow:46px}
.vsl__aura,.vsl__rim{position:absolute;pointer-events:none}
.vsl__aura{z-index:-1;inset:calc(var(--glow) * -1);opacity:.5;will-change:opacity,transform;
  --m1:linear-gradient(90deg,transparent,rgba(0,0,0,.22) calc(var(--glow) * .5),#000 var(--glow),#000 calc(100% - var(--glow)),rgba(0,0,0,.22) calc(100% - var(--glow) * .5),transparent);
  --m2:linear-gradient(transparent,rgba(0,0,0,.22) calc(var(--glow) * .5),#000 var(--glow),#000 calc(100% - var(--glow)),rgba(0,0,0,.22) calc(100% - var(--glow) * .5),transparent);
  -webkit-mask:var(--m1),var(--m2);-webkit-mask-composite:source-in;mask:var(--m1),var(--m2);mask-composite:intersect}
.vsl__rim{z-index:0;inset:-1.5px;border-radius:5.5px;overflow:hidden;background:rgba(255,255,255,.07)}
.vsl__aura i,.vsl__rim i{position:absolute;left:50%;top:50%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(200deg);will-change:transform}
.vsl__aura i{background:url(../img/vsl-aura.webp) center/100% 100% no-repeat}
.vsl__rim i{background:conic-gradient(#fff 0deg,#2f87ff 16deg,rgba(0,97,255,.6) 55deg,rgba(0,97,255,.16) 120deg,rgba(0,97,255,.1) 180deg,rgba(47,135,255,.5) 212deg,rgba(0,97,255,.1) 248deg,rgba(0,97,255,.16) 300deg,#2f87ff 344deg,#fff 360deg)}
.hero .vsl__frame{z-index:1}
.hero .vsl__frame::after{border-color:rgba(255,255,255,.06)}
@media (max-width:767px){.hero .vsl{--glow:28px}}
/* -- Social Proof über dem Video (Trust-Tag: überlappende Kreise, Glas auf dem Bild) -- */
.vsl__proof{position:absolute;z-index:3;left:50%;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 6px;border-radius:6px;
  background:rgba(8,12,24,.62);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.14);white-space:nowrap}
.vsl__faces{display:flex}
.vsl__faces picture{display:block;width:28px;height:28px;margin-left:-8px;border-radius:50%;overflow:hidden;border:2px solid #0a0e18;background:#111}
.vsl__faces picture:first-child{margin-left:0}
.vsl__faces img{display:block;width:100%;height:100%;object-fit:cover}
.stars{position:relative;display:inline-flex}
.stars__bg,.stars__fg{display:flex;gap:2px}
.stars svg{flex:none;width:13px;height:13px;fill:currentColor}
.stars__bg{color:rgba(255,255,255,.22)}
.stars__fg{position:absolute;left:0;top:0;overflow:hidden;color:#fbbc04}
.vsl__pt{font:300 13px/1 var(--font);color:rgba(255,255,255,.75)}
.vsl__pt b{font-weight:500;color:#fff}
@media (max-width:479px){.vsl__proof{height:34px;gap:8px;padding-right:10px}.vsl__faces picture{width:24px;height:24px}.stars svg{width:11px;height:11px}.vsl__pt{font-size:11.5px}}
@media (max-width:359px){.vsl__faces picture:nth-child(n+3){display:none}}
/* -- Notiz links: Pfeil gespiegelt -- */
.note--vsl .note__arr{transform:scaleY(-1)}
/* -- Pfeil vom Video zum ersten Feld: Pfad baut JS; läuft aus dem ersten Bildschirm -- */
main{position:relative}
.trail{position:absolute;left:0;top:0;z-index:4;overflow:visible;pointer-events:none;color:#fff;display:none}
.trail__t{position:absolute;z-index:4;display:none;pointer-events:none;color:#fff;font:600 clamp(22px,1.6vw,28px)/1.05 "Caveat",var(--font);transform:rotate(-6deg);white-space:nowrap}
.has-trail .trail{display:block}
.has-trail .trail__t.is-fit{display:block}
.has-trail .flow__m,.has-trail .flow__t--m{display:none!important}
.trail path{stroke-dasharray:1;stroke-dashoffset:1}
.trail.is-in path{transition:stroke-dashoffset 1.6s cubic-bezier(.55,0,.2,1) .35s;stroke-dashoffset:0}
.trail.is-in .trail__h{transition:stroke-dashoffset .35s ease-out 1.95s}
.trail__t{opacity:0;transition:opacity .6s ease .9s}
.trail__t.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){.trail path{stroke-dashoffset:0}.trail.is-in path,.trail.is-in .trail__h,.trail__t{transition:none}.trail__t{opacity:1}}
/* -- Glas-Button: getönter Glaskörper, Lichtkante, Spiegelung oben, Glanz folgt der Maus, gelegentlicher Lichtstreif -- */
.btn--glass{isolation:isolate;overflow:hidden;color:#fff;border-radius:6px;
  background:linear-gradient(180deg,rgba(76,156,255,.66) 0%,rgba(0,97,255,.56) 52%,rgba(0,74,214,.66) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -12px 22px -12px rgba(0,22,90,.6),0 0 0 1px rgba(110,170,255,.28),0 16px 36px -16px rgba(0,97,255,.85);
  text-shadow:0 1px 1px rgba(0,30,110,.35);transition:box-shadow .4s,transform .25s var(--ease)}
.btn--glass>span:not(.btn__sheen),.btn--glass>.ico{position:relative;z-index:2}
.btn--glass::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(255,255,255,.18) 34%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.btn--glass::after{content:"";position:absolute;left:1px;right:1px;top:1px;height:46%;z-index:0;pointer-events:none;border-radius:5px 5px 50% 50%/5px 5px 14px 14px;
  background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.04))}
.btn__sheen{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden;transition:opacity .45s ease}
.btn--glass.is-hot .btn__sheen{background:radial-gradient(170px 110px at var(--mx,70%) var(--my,30%),rgba(255,255,255,.38),rgba(255,255,255,0) 70%)}
.btn__sheen::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;transform:translateX(-140%) skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));animation:glass-sweep 6.5s cubic-bezier(.6,0,.2,1) 2.2s infinite}
@keyframes glass-sweep{0%{transform:translateX(-140%) skewX(-18deg)}18%,100%{transform:translateX(420%) skewX(-18deg)}}
@media (hover:hover){.btn--glass:hover{background:linear-gradient(180deg,rgba(96,170,255,.74) 0%,rgba(18,112,255,.66) 52%,rgba(0,84,230,.74) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -12px 22px -12px rgba(0,22,90,.6),0 0 0 1px rgba(130,185,255,.4),0 20px 44px -16px rgba(0,97,255,1)}}
.btn--glass:active{transform:scale(.985)}
.btn--glass:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn__sheen::after{animation:none;display:none}.btn--glass{transition:none}}
.vsl__proof>*{flex:none}
.stars__bg{flex:none}
/* Glas kräftiger: Blau bleibt leuchtend, Glas liegt als Lichtkante, Spiegelung und Lichtfang unten darüber */
.btn--glass{background:linear-gradient(180deg,rgba(64,148,255,.94) 0%,rgba(0,97,255,.9) 50%,rgba(0,80,232,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -2px 7px rgba(150,205,255,.42),inset 0 -16px 26px -16px rgba(0,26,110,.55),0 0 0 1px rgba(120,178,255,.34),0 18px 40px -18px rgba(0,97,255,.95)}
.btn--glass::after{height:50%;background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.1) 72%,rgba(255,255,255,.02))}
@media (hover:hover){.btn--glass:hover{background:linear-gradient(180deg,rgba(84,162,255,.96) 0%,rgba(16,110,255,.94) 50%,rgba(0,88,240,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 8px rgba(170,215,255,.5),inset 0 -16px 26px -16px rgba(0,26,110,.5),0 0 0 1px rgba(140,190,255,.45),0 22px 48px -18px rgba(0,97,255,1)}}
/* === /r24 === */

/* === r25 (Yann 04.10.): Licht weicher und zurückhaltender, Play-Button aus Glas, Logo-Shine ohne harte Oberkante, Label links === */
.hero .vsl{--glow:64px}
.vsl__aura{--m1:linear-gradient(90deg,transparent,rgba(0,0,0,.12) calc(var(--glow) * .45),rgba(0,0,0,.6) calc(var(--glow) * .8),#000 var(--glow),#000 calc(100% - var(--glow)),rgba(0,0,0,.6) calc(100% - var(--glow) * .8),rgba(0,0,0,.12) calc(100% - var(--glow) * .45),transparent);
  --m2:linear-gradient(transparent,rgba(0,0,0,.12) calc(var(--glow) * .45),rgba(0,0,0,.6) calc(var(--glow) * .8),#000 var(--glow),#000 calc(100% - var(--glow)),rgba(0,0,0,.6) calc(100% - var(--glow) * .8),rgba(0,0,0,.12) calc(100% - var(--glow) * .45),transparent);opacity:.3}
@media (max-width:767px){.hero .vsl{--glow:34px}}
.vsl__rim{background:rgba(255,255,255,.06);opacity:.85}
.vsl__rim i{background:conic-gradient(rgba(176,208,255,.85) 0deg,rgba(47,135,255,.7) 20deg,rgba(0,97,255,.34) 62deg,rgba(0,97,255,.1) 130deg,rgba(0,97,255,.06) 180deg,rgba(47,135,255,.26) 214deg,rgba(0,97,255,.06) 250deg,rgba(0,97,255,.1) 300deg,rgba(47,135,255,.62) 340deg,rgba(176,208,255,.85) 360deg)}
/* Play-Button: durchsichtiges Glas (Bild scheint durch, weichgezeichnet), Lichtkante, Spiegelung oben */
.hero .vsl__btn{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 55%,rgba(120,175,255,.14));
  -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(1.08);backdrop-filter:blur(14px) saturate(170%) brightness(1.08);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -6px 14px -6px rgba(140,195,255,.35),0 10px 30px -10px rgba(0,0,0,.6);
  transition:transform .5s var(--ease),background .4s ease}
.hero .vsl__btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(255,255,255,.12) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hero .vsl__btn::after{content:"";position:absolute;left:14%;right:14%;top:5%;height:42%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%)}
.hero .vsl__btn .ico{position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
@media (hover:hover){.hero .vsl__play:hover .vsl__btn{background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.12) 55%,rgba(120,175,255,.2))}}
/* Logo-Shine: oben weich in Schwarz, unten bleibt der harte Schnitt */
.lw{background:linear-gradient(#050505,rgba(5,5,5,0) 46%),radial-gradient(min(95vw,1500px) min(68vw,1050px) at 88% calc(100% + min(16vw,250px)),
    rgb(0 97 255/1) 0, rgb(0 97 255/.9) 12%, rgb(0 97 255/.72) 24%, rgb(0 97 255/.52) 36%, rgb(0 97 255/.34) 48%,
    rgb(0 97 255/.19) 60%, rgb(0 97 255/.08) 72%, rgb(0 97 255/.025) 84%, rgb(0 97 255/0) 100%) #050505}
@media (max-width:767px){.lw{background:linear-gradient(#050505,rgba(5,5,5,0) 50%),radial-gradient(150vw 110vw at 92% calc(100% + 30vw),
    rgb(2 80 214/.95) 0, rgb(2 80 214/.75) 15%, rgb(2 80 214/.5) 32%, rgb(2 80 214/.28) 48%, rgb(2 80 214/.12) 64%, rgb(2 80 214/.04) 80%, rgb(2 80 214/0) 100%) #050505}}
.lw{padding-top:clamp(64px,5.5vw,96px)}
@media (max-width:767px){.lw{padding-top:44px}}
.lw__k{text-align:left}
.vsl__proof{width:max-content}
@media (min-width:1200px){.look--rojith{left:auto;right:0}}
/* === /r25 === */

/* === r27 Fotowand ziehbar === */
.sw__row{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.sw__row:active{cursor:grabbing}
.has-cursor .sw__row.is-drag,.has-cursor .sw__row.is-drag:active{cursor:none}
.sw__track img{pointer-events:none}
/* === /r27 === */

/* === r27b Team-Notiz auf dem Konzeptbild: zeigt auf Yann und Rojith bei der Arbeit === */
.team__pic--a{position:relative}
.note--team{right:auto;bottom:auto;left:56%;top:7%;flex-direction:column;align-items:flex-start;gap:0}
.note--team .note__t{text-shadow:0 1px 10px rgba(0,0,0,.55)}
.note--team .note__arr{width:clamp(56px,5vw,84px);height:auto;margin:2px 0 0 -10px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
@media (max-width:767px){.note--team{display:flex;left:54%;top:5%}.note--team .note__t{font-size:19px}.note--team .note__arr{width:44px}}
/* === /r27b === */

/* r28: Abstand unter den Kundenstimmen, bevor der blaue Value Stack beginnt */
#stimmen{padding-bottom:var(--sec)}

/* r29 Notiz links (Yann-Mockup): Text weiter vom Video weg und schräger, Pfeil startet unter dem Textende und zeigt aufs Video */
.note--vsl{top:calc(22% + 24px)}
.note--vsl .note__t{margin:0 72px -24px 0;transform:rotate(-12deg)}
.js .note--vsl .note__t{transform:rotate(-12deg) translateY(6px)}
.js .note--vsl.is-in .note__t{transform:rotate(-12deg)}

/* === r30 (Yann 04.10.): Sticky-Card liegt im Garantie-Kasten und löst sich beim Weiterscrollen; zwei Zeilen; VSL-Hover; Pfeil später === */
/* Platz im Kasten (nur mit JS; ohne JS bleibt der normale Button) */
.vstack__slot{display:none}
.has-dock .vstack__gi>.btn{display:none}
.has-dock .vstack__slot{display:block;flex:none;width:380px;max-width:100%;height:84px;margin-top:26px}
@media (min-width:992px){.has-dock .vstack__slot{margin-top:0}}
@media (max-width:767px){.has-dock .vstack__slot{width:auto;align-self:stretch;margin:44px -20px -20px}}
/* Messpunkt: wo die Karte frei schwebt */
/* Karte: Position setzt JS (transform), sie gleitet aus dem Kasten an ihren Platz */
.has-dock .sticky__a{width:auto}
.sticky__a{padding:20px 44px 20px 140px}
.sticky__pic{width:120px}
.sticky__pic img{width:120px}
.sticky__txt{gap:4px}
.sticky__txt b{display:inline-flex;align-items:center;gap:10px;font:500 16.5px/1.2 var(--font);white-space:nowrap}
.sticky__txt b .ico{flex:none;width:18px;height:18px;stroke-width:1.5;transition:transform .35s var(--ease)}
@media (hover:hover){.sticky__a:hover .sticky__txt b .ico{transform:translateX(4px)}}
.sticky__sub{display:block;font:300 13.5px/1.3 var(--font);color:rgba(255,255,255,.87);white-space:nowrap}
.sticky__x{transition:background-color .3s,opacity .3s}
.has-dock .sticky:not(.is-float) .sticky__x{opacity:0;pointer-events:none}
@media (max-width:767px){
  .sticky__a{padding:14px 40px 14px 86px}
  .sticky__pic,.sticky__pic img{width:74px}
  .sticky__txt b{font-size:15px;gap:8px}
  .sticky__txt b .ico{width:16px;height:16px}
  .sticky__sub{display:block;font-size:12.5px}
}
/* VSL-Hover: Bild zoomt leicht, Kontur wird blau und heller, Licht stärker, Play-Button wächst */
@media (hover:hover){
  .hero .vsl__poster{transition:transform 1.2s var(--ease)}
  .hero .vsl__frame::after{transition:border-color .45s ease}
  .hero .vsl__rim{transition:opacity .45s ease,background-color .45s ease}
  .hero .vsl__aura i{transition:filter .6s ease}
  .hero .vsl[data-state="idle"]:hover .vsl__poster{transform:scale(1.035)}
  .hero .vsl[data-state="idle"]:hover .vsl__frame::after{border-color:rgba(47,135,255,.7)}
  .hero .vsl[data-state="idle"]:hover .vsl__rim{opacity:1;background:rgba(47,135,255,.28)}
  .hero .vsl[data-state="idle"]:hover .vsl__aura i{filter:brightness(1.5) saturate(1.15)}
  .hero .vsl[data-state="idle"]:hover .vsl__btn{transform:scale(1.14);background:linear-gradient(160deg,rgba(255,255,255,.36),rgba(255,255,255,.14) 55%,rgba(120,175,255,.24))}
}
/* Pfeil zum Formular erst, wenn man das Video wahrgenommen hat */
.trail.is-in path{transition-delay:2.6s}
.trail.is-in .trail__h{transition-delay:4.2s}
.trail__t{transition-delay:3.4s}
.js .flow path{transition-delay:2.6s}
.js .flow path+path{transition-delay:4s}
.js .flow .flow__t{transition-delay:3.2s}
/* === /r30 === */

/* === r31 Sticky-Dock ohne Ruckeln: im Kasten liegt die Karte wirklich im Kasten (scrollt nativ mit), frei schwebend ist sie fixed; den Wechsel animiert GSAP === */
.has-dock .sticky,.has-dock .sticky.show{position:relative;left:auto;top:auto;right:auto;bottom:auto;z-index:2;width:100%;transform:none;visibility:visible;opacity:1;transition:none}
.has-dock .sticky.is-float{position:fixed;z-index:900;width:var(--dw,380px);left:auto;top:auto;right:clamp(16px,2.6vw,40px);bottom:calc(clamp(16px,2.6vw,32px) + env(safe-area-inset-bottom))}
@media (max-width:767px){.has-dock .sticky.is-float{right:auto;left:50%;margin-left:calc(var(--dw,351px) / -2);bottom:calc(12px + env(safe-area-inset-bottom))}}
.has-dock .sticky__a{width:auto}
/* === /r31 === */

/* === r32 Abschluss-CTA wie haldelain.ch: Halde-Verlauf, Laser-Karte, Kampagnen-Titel, Team rechts unten angeschnitten === */
.end{position:relative;padding:clamp(72px,8vw,128px) 0;background:#050505 url(../img/cta-fade-1920.webp) 50% 50%/cover no-repeat;
  background-image:image-set(url(../img/cta-fade-1920.avif) type("image/avif"),url(../img/cta-fade-1920.webp) type("image/webp"))}
.end__laser{padding:9px;border:1px solid var(--blau);border-radius:12px}
.end__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(420px,38vw,560px);border-radius:6px;background:#050505}
.end__txt{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(32px,4.5vw,72px)}
.end__h{display:flex;flex-direction:column;font-size:clamp(34px,3.6vw,56px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.end__l{font-weight:300;color:#fff}
.end__b{font-weight:700;color:var(--blau)}
.end__p{margin-top:20px;max-width:30em;font:300 17px/1.55 var(--font);color:rgba(255,255,255,.6)}
.end__txt .btn{margin-top:32px}
.end__m{display:flex;align-items:center;gap:8px;margin-top:14px;font:300 13px/1 var(--font);color:rgba(255,255,255,.5)}
.end__m .ico{width:15px;height:15px}
.end__img{position:absolute;right:-2%;bottom:0;width:58%;pointer-events:none}
.end__img img{display:block;width:100%;height:auto}
@media (max-width:991px){
  .end__card{grid-template-columns:1fr;min-height:0}
  .end__txt{padding:32px 24px 0}
  .end__img{position:relative;right:auto;width:118%;margin:24px -9% 0}
}
@media (max-width:767px){
  .end{background-image:url(../img/cta-fade-m-800.webp);background-image:image-set(url(../img/cta-fade-m-800.avif) type("image/avif"),url(../img/cta-fade-m-800.webp) type("image/webp"))}
  .end__h{font-size:clamp(30px,9vw,40px)}
  .end__p{font-size:16px}
  .end__txt .btn{align-self:stretch;margin-top:26px}
}
.foot__claim{gap:0}
@media (max-width:767px){
  .end .container{width:auto;margin:0 12px;padding:0}
  .end__txt{padding:30px 20px 0}
  .end__txt .btn{padding:0 18px 0 20px;gap:12px;letter-spacing:.6px}
}
/* === /r32 === */

/* === r33 (Yann 04.10.) === */
/* Abstand Stylescapes -> Abschluss */
#stylescapes{padding-bottom:var(--sec)}
/* Abschluss: Yann rechts, unten angeschnitten; darunter die Logos, ganz unten das Rechtliche */
.end{padding-bottom:28px}
.end__img{right:7%;width:auto;top:9%;bottom:0}
.end__img img{height:100%;width:auto}
@media (max-width:991px){
  .end__img{position:relative;right:auto;top:auto;width:auto;margin:20px auto 0;display:flex;justify-content:center}
  .end__img img{height:min(380px,92vw);width:auto}
}
.end__logos{margin-top:clamp(56px,6vw,96px)}
.end__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:clamp(44px,5vw,72px);font:300 12px/1.4 var(--font);color:rgba(255,255,255,.55)}
.end__legal a,.end__legal .linklike{font:inherit;color:rgba(255,255,255,.7);text-decoration:none}
@media (hover:hover){.end__legal a:hover,.end__legal .linklike:hover{color:#fff}}
/* VSL: Glow weicher (nur noch eng um den Rahmen, kein grosser Kasten), Kontur stärker und lebendiger:
   zwei Lichtkometen laufen um den Rahmen, ihr Licht strahlt nur dort, wo sie gerade sind */
.hero .vsl{--glow:30px}
@media (max-width:767px){.hero .vsl{--glow:20px}}
.hero .vsl__frame{box-shadow:0 30px 90px -40px rgba(0,97,255,.55)}
.vsl__aura i{background-image:url(../img/vsl-comet-blau.webp)}
.vsl__aura{--m1:linear-gradient(90deg,transparent,rgba(0,0,0,.35) calc(var(--glow) * .55),#000 var(--glow),#000 calc(100% - var(--glow)),rgba(0,0,0,.35) calc(100% - var(--glow) * .55),transparent);
  --m2:linear-gradient(transparent,rgba(0,0,0,.35) calc(var(--glow) * .55),#000 var(--glow),#000 calc(100% - var(--glow)),rgba(0,0,0,.35) calc(100% - var(--glow) * .55),transparent)}
.vsl__rim{inset:-2px;border-radius:6px;background:rgba(47,135,255,.3);opacity:1}
.vsl__rim i{background:conic-gradient(from 0deg,rgba(255,255,255,1) 0deg,rgba(150,200,255,.9) 4deg,rgba(47,135,255,0) 8deg,rgba(47,135,255,0) 90deg,rgba(47,135,255,.35) 130deg,rgba(120,180,255,.85) 175deg,#fff 180deg,rgba(47,135,255,0) 186deg,rgba(47,135,255,0) 240deg,rgba(47,135,255,.45) 300deg,rgba(130,190,255,.9) 352deg,#fff 360deg)}
@media (hover:hover){.hero .vsl[data-state="idle"]:hover .vsl__rim{background:rgba(47,135,255,.5)}}
/* === /r33 === */
/* r33b: Rechtliches unten gut lesbar (Verlauf wird am Fuss dunkler) */
.end{background-image:linear-gradient(rgba(5,5,5,0) 80%,rgba(5,5,5,.62)),image-set(url(../img/cta-fade-1920.avif) type("image/avif"),url(../img/cta-fade-1920.webp) type("image/webp"))}
@media (max-width:767px){.end{background-image:linear-gradient(rgba(5,5,5,0) 84%,rgba(5,5,5,.7)),image-set(url(../img/cta-fade-m-800.avif) type("image/avif"),url(../img/cta-fade-m-800.webp) type("image/webp"))}}
.end__legal{color:rgba(255,255,255,.7)}
.end__legal a,.end__legal .linklike{color:rgba(255,255,255,.85)}
/* r34: Licht am VSL blauer statt weiss (Kometenköpfe Sekundärblau, Schweif Halde-Blau) */
.vsl__rim{background:rgba(0,97,255,.32)}
.vsl__rim i{background:conic-gradient(from 0deg,#5aa2ff 0deg,#2f87ff 5deg,rgba(0,97,255,0) 10deg,rgba(0,97,255,0) 90deg,rgba(0,97,255,.35) 130deg,#2f87ff 175deg,#5aa2ff 180deg,rgba(0,97,255,0) 186deg,rgba(0,97,255,0) 240deg,rgba(0,97,255,.45) 300deg,#2f87ff 352deg,#5aa2ff 360deg)}

/* === r35 (Yann 04.10.): Blue Shine hinter Yann, Ecke unten rechts (gleiche weiche Kurve wie die Logo-Sektion) === */
.end__card{background:radial-gradient(74% 128% at 91% 124%,
    rgb(0 97 255/1) 0, rgb(0 97 255/.9) 12%, rgb(0 97 255/.72) 24%, rgb(0 97 255/.52) 36%, rgb(0 97 255/.34) 48%,
    rgb(0 97 255/.19) 60%, rgb(0 97 255/.08) 72%, rgb(0 97 255/.025) 84%, rgb(0 97 255/0) 100%) #050505}
@media (max-width:991px){
  .end__card{background:radial-gradient(150% 62% at 84% 114%,
    rgb(0 97 255/1) 0, rgb(0 97 255/.9) 12%, rgb(0 97 255/.72) 24%, rgb(0 97 255/.52) 36%, rgb(0 97 255/.34) 48%,
    rgb(0 97 255/.19) 60%, rgb(0 97 255/.08) 72%, rgb(0 97 255/.025) 84%, rgb(0 97 255/0) 100%) #050505}
}
/* Hero-Notiz links (Yann 04.10.): Pfeil etwas nach links, ein paar Grad im Uhrzeigersinn; Text bleibt, wo er ist */
.note--vsl .note__arr{margin-right:8px;transform:rotate(9deg) scaleY(-1)}
/* Trennlinie FAQ -> Stylescapes (Yann 04.10.): genau in der Mitte des Abstands, so breit wie der Inhalt */
.sec-rule{height:0;border-top:.5px solid var(--a15)}
/* Abschluss (Yann 04.10.): Benefits aus dem Hero statt Fliesstext; «In 30 Tagen live» steht schon im Titel */
.end__ben{display:grid;gap:12px;margin-top:26px}
.end__ben li{display:flex;align-items:center;gap:10px;font:500 17px/1.3 var(--font);color:#fff}
.end__ben .ico{flex:none;width:20px;height:20px;color:var(--blau2);stroke-width:2.2}
@media (max-width:767px){.end__ben{gap:10px;margin-top:22px}.end__ben li{font-size:16px}}
/* Abschluss-Karte schmaler und zentriert (Yann 04.10.): kein Loch zwischen Text und Yann auf breiten Bildschirmen */
.end__laser{max-width:1040px;margin-inline:auto}
/* === /r35 === */

/* === r40 (Yann 04.10.): Fehlermeldungen ohne Layout-Sprung. Sie sitzen als Reiter oben rechts auf dem Feldrand, wie das Label links;
   der E-Mail-Vorschlag nutzt denselben Platz (zeigt nur die Domain). Feld wird rot, nichts darunter verschiebt sich. === */
.signup .field>.field__err,.signup .field>.field__tip{position:absolute;z-index:2;top:-10px;right:10px;left:auto;grid-row:auto;display:block;max-width:calc(100% - 20px);
  margin:0;padding:3px 8px 1px 20px;border-radius:4px 4px 0 0;background:#fff;font:500 11.5px/1.2 var(--font);font-style:normal;letter-spacing:.01em;
  color:#d90000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signup .field>.field__err:empty,.signup .field>.field__tip[hidden],.signup .field.has-tip>.field__err{display:none}
.signup .field>.field__err::before{left:8px;top:calc(50% - 2px);width:6px;height:6px;background:#ff0000}
.signup .field>.field__tip{padding-left:8px;color:#4b5260;font-weight:400}
.signup .field>.field__tip button{padding:0;font:600 11.5px/1.2 var(--font);color:var(--blau);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.signup .field.err>span[id] .field__why{display:none}
/* === /r40 === */

/* === r42 (Yann 04.10.): «Hier entlang!»-Pfeil auf dem Handy aus (Formular folgt direkt unter dem Video) === */
@media (max-width:767px){.flow{display:none}}
/* === /r42 === */

/* === r43 (Yann 04.10.): Notiz «Hier entsteht eure Website!» zeigt aufs Büro (rechtes Bild), nicht aufs Brainstorming === */
.team__pic--b{position:relative}
.team__pic--b .note--team{left:24%;top:6%;right:auto;bottom:auto}
.team__pic--b .note--team .note__arr{transform:scaleX(-1);margin:2px 0 0 46px}
@media (max-width:767px){.team__pic--b .note--team{left:30%;top:6%}.team__pic--b .note--team .note__arr{margin-left:40px}}
/* === /r43 === */

/* === r45 (Yann 05.10.): VSL-Player. Stumm ab Laden, Klick startet von vorne mit Ton; eigene Leiste mit Tempo und Vollbild === */
.vsl[data-state="preview"] .vsl__video{opacity:1}
.vsl[data-state="preview"] .vsl__play{opacity:1;pointer-events:auto}
.vsl[data-state="preview"] .vsl__play::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.28),rgba(0,0,0,0) 62%)}
@media (hover:hover){.hero .vsl[data-state="preview"]:hover .vsl__btn{transform:scale(1.14);background:linear-gradient(160deg,rgba(255,255,255,.36),rgba(255,255,255,.14) 55%,rgba(120,175,255,.24))}}
.vsl__muted{position:absolute;left:12px;top:12px;z-index:3;display:none;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(5,5,5,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:500 12.5px/1 var(--font);color:#fff;pointer-events:none}
.vsl__muted .ico{width:15px;height:15px}
.vsl[data-state="preview"] .vsl__muted{display:inline-flex}
.vsl__ctl{position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;align-items:center;gap:4px;padding:34px 10px 8px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.62));
  opacity:0;transition:opacity .25s;color:#fff}
.vsl[data-state="playing"] .vsl__ctl,.vsl[data-state="paused"] .vsl__ctl,.vsl[data-state="loading"] .vsl__ctl{display:flex}
.vsl.ctl-on .vsl__ctl,.vsl[data-state="paused"] .vsl__ctl{opacity:1}
.vsl__ctl button{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:6px;color:#fff;background:transparent;cursor:pointer}
.vsl__ctl .ico{width:20px;height:20px}
@media (hover:hover){.vsl__ctl button:hover{background:rgba(255,255,255,.12)}}
.vc__prog{position:relative;flex:1;min-width:60px;height:32px;margin:0 6px;cursor:pointer;touch-action:none;outline:none}
.vc__prog::before,.vc__buf,.vc__fill{content:"";position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.vc__prog::before{right:0;background:rgba(255,255,255,.22)}
.vc__buf{width:0;background:rgba(255,255,255,.32)}
.vc__fill{width:0;background:var(--blau)}
.vc__knob{position:absolute;left:0;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .15s}
.vc__prog:focus-visible .vc__knob,.vc__prog.is-drag .vc__knob{transform:scale(1.3)}
.vc__time{flex:none;padding:0 6px;font:500 12.5px/1 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;color:rgba(255,255,255,.92)}
.vsl__ctl .vc__spd{width:auto;min-width:48px;height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font:600 13px/1 var(--font)}
.vsl__ctl .vc__spd.is-fast{background:var(--blau);border-color:var(--blau)}
.vsl.ctl-on .vsl__bar,.vsl[data-state="paused"] .vsl__bar{opacity:0}
.vsl[data-state="loading"] .vsl__video{opacity:1}
.vsl__frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;background:#000}
.vsl__frame:-webkit-full-screen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;background:#000}
.vsl__frame:fullscreen .vsl__video,.vsl__frame:fullscreen .vsl__poster{object-fit:contain}
.vsl__frame:-webkit-full-screen .vsl__video,.vsl__frame:-webkit-full-screen .vsl__poster{object-fit:contain}
.vsl__frame:fullscreen .vsl__ctl{padding:60px 24px 18px}
@media (max-width:520px){.vc__time{font-size:11.5px;padding:0 3px}.vsl__ctl{gap:0;padding:30px 6px 4px}.vsl__ctl button{width:36px;height:36px}.vsl__ctl .vc__spd{min-width:42px;height:28px;padding:0 8px;font-size:12px}}
/* === /r45 === */

/* === r46 (Yann 05.10.): Abschluss-Button zeigt nach oben (führt hoch zum Formular) === */
.end__txt .btn .ico{transform:rotate(-90deg)}
@media (hover:hover){.end__txt .btn:hover .ico{transform:rotate(-90deg) translateX(4px)}}
/* === /r46 === */

/* === r50 (Yann 05.10.): weniger los auf dem Video. Bewertungs-Badge nicht mehr auf dem Videorahmen:
   Desktop schwebt es unten links, Handy/Tablet steht es unter dem Video. Scribbles leichter: kleiner, feinere Linien === */
.gproof--inline,.gproof--float{display:flex;align-items:center;gap:10px;width:max-content;height:40px;padding:0 14px 0 6px;border-radius:999px;background:rgba(10,14,24,.72);
  border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}
.gproof--inline>*,.gproof--float>*{flex:none}
.gproof--inline .vsl__pt,.gproof--float .vsl__pt{font:400 13px/1 var(--font);color:rgba(255,255,255,.75)}
.gproof--inline .vsl__pt b,.gproof--float .vsl__pt b{font-weight:600;color:#fff}
.gproof--inline{margin:16px auto 0}
.gproof--float{position:fixed;z-index:880;left:clamp(16px,2.6vw,40px);bottom:calc(clamp(16px,2.6vw,32px) + env(safe-area-inset-bottom));display:none;
  opacity:0;transition:opacity .5s ease;pointer-events:none}
.gproof--float.is-on{opacity:1}
@media (min-width:992px){.gproof--inline{display:none}.gproof--float{display:flex}}
body:has(.cc:not([hidden])) .gproof--float:not(.is-dock){opacity:0}
@media (max-width:479px){.gproof--inline{height:34px;gap:8px;padding-right:12px}.gproof--inline .vsl__faces picture{width:24px;height:24px}.gproof--inline .stars svg{width:11px;height:11px}.gproof--inline .vsl__pt{font-size:11.5px}}
/* Scribbles: rund 20 % kleiner, Linien feiner, leicht zurückgenommen */
.note__t{font-size:clamp(18px,1.35vw,23px)!important;color:rgba(255,255,255,.86)}
.note__arr{stroke-width:1.7px}
.note--vsl .note__arr{width:clamp(72px,6.2vw,100px)}
.note--team .note__t{font-size:clamp(17px,1.2vw,21px)!important}
.trail{stroke-width:1.7px;color:rgba(255,255,255,.85)}
.trail__t{font-size:clamp(18px,1.3vw,23px);color:rgba(255,255,255,.86)}
.flow__t{font-size:clamp(18px,1.35vw,23px)!important}
.flow svg{stroke-width:1.8px}
/* === /r50 === */

/* === r52 (Yann 05.10.): Kapitel im VSL wie bei YouTube === */
.vc__bars{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(255,255,255,.22)}
.vc__bars .vc__buf,.vc__bars .vc__fill{top:0;margin-top:0;height:100%}
.vc__prog:has(.vc__bars)::before{display:none}
@media (hover:hover){.vc__prog:hover .vc__bars{height:6px;margin-top:-3px}}
.vc__tip{position:absolute;bottom:calc(100% + 6px);left:0;transform:translateX(-50%);padding:6px 9px;border-radius:6px;background:rgba(5,5,5,.86);
  font:500 12.5px/1 var(--font);color:#fff;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.vc__tip.is-on{opacity:1}
.vsl__ctl .vc__chap{width:auto;max-width:230px;gap:6px;padding:0 8px;display:flex;align-items:center;font:500 12.5px/1 var(--font);color:rgba(255,255,255,.92)}
.vc__chap .ico{width:16px;height:16px;flex:none}
.vc__chap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc__list{position:absolute;z-index:6;right:10px;bottom:58px;width:min(300px,calc(100% - 20px));max-height:calc(100% - 76px);overflow:auto;padding:6px;border-radius:10px;
  background:rgba(12,14,20,.94);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.vc__list[hidden]{display:none}
.vc__lh{margin:4px 8px 6px;font:500 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.vc__list button{display:flex;gap:12px;width:100%;padding:9px 8px;border-radius:6px;background:none;color:#fff;font:400 13.5px/1.25 var(--font);text-align:left;cursor:pointer}
.vc__list button span{flex:none;width:36px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.55)}
.vc__list button.is-on{background:rgba(0,97,255,.22)}
@media (hover:hover){.vc__list button:hover{background:rgba(255,255,255,.08)}}
@media (max-width:767px){.vsl__ctl .vc__chap span{display:none}.vsl__ctl .vc__chap{padding:0;width:36px;justify-content:center}.vc__list{bottom:50px;max-height:calc(100% - 60px)}}
.vsl__frame:fullscreen .vc__list{bottom:84px}
/* === /r52 === */

/* === r53 (Yann 05.10.): Bewertungs-Badge landet in den Kundenstimmen === */
.gslot{display:none}
@media (min-width:992px){
  #stimmen .rating{display:none}
  .gslot{display:block;height:40px;margin-top:1.1rem}
  .gproof--float.is-dock{position:relative;left:auto;bottom:auto;z-index:auto;pointer-events:auto;background:rgba(255,255,255,.04)}
}
/* === /r53 === */

/* r54: Abschluss-Titel «In 4–6 Wochen» auf einer Zeile */
.end__l{white-space:nowrap}

/* r55: Pfeil «Nach dem Video hier entlang!» nach dem Absenden weg */
body:has(.signup.is-sent) .trail,body:has(.signup.is-sent) .trail__t{display:none!important}

/* =====================================================================
   r56 Mini-Cases: Website-Karten öffnen einen Dialog (Stripe-artig). Desktop: Karte wächst zum Panel,
   links die Galerie (alle Seiten auf der Fläche, Desktop, Handy; Gerber mit Motion-Video), rechts Text aus dem CMS,
   unten fix der CTA. Telefon/Tablet: Blatt von unten, nach unten wischen schliesst.
   ===================================================================== */
.slide__open{display:none}
.js .slide[data-case]{position:relative}
.js .slide[data-case] picture{overflow:hidden}
.js .slide__open{display:block;position:absolute;inset:0;z-index:2;text-align:left;-webkit-tap-highlight-color:transparent}
.slide__hit{display:block;position:relative;width:100%;aspect-ratio:2/3}
.slide__plus{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(8,8,8,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;
  transition:transform .55s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)}
.slide__plus .ico{width:18px;height:18px}
.slide__open:focus-visible{outline:2px solid var(--blau2);outline-offset:4px}
@media (hover:hover){
  .js .slide[data-case] img{transition:transform .9s var(--ease)}
  .js .slide[data-case]:hover img{transform:scale(1.035)}
  .js .slide[data-case]:hover .slide__plus{transform:rotate(90deg);background:var(--blau);border-color:var(--blau)}
}
.slide.is-lifted picture{visibility:hidden}

/* Dialog */
.mc{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;overscroll-behavior:contain}
.mc:not([open]){display:none}
.mc::backdrop{background:transparent}
.mc-lock,.mc-lock body{overflow:hidden;scrollbar-gutter:stable}
.mc-lock .cursor,.mc-lock .sticky,.mc-lock .gproof--float{visibility:hidden}
.mc__bg{position:absolute;inset:0;background:rgba(5,5,5,.72);-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);touch-action:none}
.mc__morph{position:fixed;left:0;top:0;z-index:2;display:none;overflow:hidden;background:#0b0b0b;pointer-events:none}
.mc__morph img{width:100%;height:100%;object-fit:cover}
.mc__wrap{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:20px;padding:32px 24px;pointer-events:none}
.mc__panel{position:relative;pointer-events:auto;width:min(1240px,calc(100vw - 176px));height:calc(100vh - 64px);height:min(800px,calc(100dvh - 64px));
  border-radius:12px;overflow:hidden;background:#0b0b0b;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.55);outline:0}
.mc__arr{pointer-events:auto;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.07);
  border:1px solid var(--a15);color:#fff;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.mc__arr .ico{width:20px;height:20px}
.mc__arr--p{order:-1}
@media (hover:hover){.mc__arr:hover{background:var(--blau);border-color:var(--blau)}}
.mc__sc{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);height:100%}

/* Galerie */
.mc__media{position:relative;min-height:0;background:var(--bg,#111);transition:background-color .6s var(--ease)}
.mc__stage{position:absolute;inset:0;overflow:hidden}
.mc__it{position:absolute;inset:0;display:grid;place-items:center;container-type:size;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.mc__it.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.mc__fr{position:relative;width:min(100cqw,calc(100cqh * var(--a)));aspect-ratio:var(--a);overflow:hidden;background:var(--ib,transparent)}
.mc__fr picture,.mc__fr img,.mc__fr video{position:absolute;inset:0;width:100%;height:100%}
.mc__fr img,.mc__fr video{object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.mc__fr.is-ld img,.mc__fr video{opacity:1}
.mc__fr img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.mc__it.can-z .mc__fr{cursor:zoom-in}
.mc__it.is-z .mc__fr{cursor:zoom-out}
.mc__zl{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;opacity:0;visibility:hidden;background:var(--zbg) 0 0/100% 100% no-repeat;transition:opacity .25s var(--ease),visibility 0s linear .25s}
.mc__it.is-z .mc__zl{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}
.mc__zl img{opacity:1}
.mc__hint,.mc__tabs{position:absolute;z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(8,8,8,.6);border:1px solid rgba(255,255,255,.12)}
.mc__hint{left:16px;top:16px;display:flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 11px;border-radius:999px;font:500 11.5px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;pointer-events:none;transition:opacity .3s var(--ease)}
.mc__hint .ico{width:15px;height:15px}
.mc__media.is-z .mc__hint,.mc__media.no-z .mc__hint{opacity:0}
.mc__tabs{left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:2px;padding:3px;border-radius:999px;max-width:calc(100% - 24px);transition:opacity .3s var(--ease)}
.mc__media.is-z .mc__tabs{opacity:0;pointer-events:none}
.mc__tab{height:32px;padding:0 14px;border-radius:999px;font:500 12px/1 var(--font);letter-spacing:.04em;white-space:nowrap;color:rgba(255,255,255,.75);transition:background-color .3s var(--ease),color .3s var(--ease)}
.mc__tab[aria-selected="true"]{background:#fff;color:#0b0b0b}
@media (hover:hover){.mc__tab:not([aria-selected="true"]):hover{color:#fff;background:rgba(255,255,255,.1)}}
.mc__tabs.is-one{display:none}
.mc__grab{display:none}

/* Text */
.mc__body{position:relative;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:44px 40px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.mc__in{flex:1 0 auto}
.mc__k{display:flex;flex-wrap:wrap;gap:4px 0;padding-right:44px;font:500 11.5px/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--a60)}
.mc__k b{color:#fff;font-weight:500}
.mc__k span::before{content:"·";margin:0 .6em}
.mc__t{margin-top:16px;font:300 clamp(26px,2.25vw,34px)/1.04 var(--font);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.mc__tb{display:block;font-weight:500}
.mc__tl{display:block}
.mc__lead{margin-top:18px;font:300 16.5px/1.55 var(--font);color:rgba(255,255,255,.88);text-wrap:pretty}
.mc__h{margin-top:28px;font:500 11.5px/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--a60)}
.mc__st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.mc__st li{padding-top:12px;border-top:1px solid var(--a15)}
.mc__st b{display:block;font:500 18px/1.2 var(--font);white-space:nowrap}
.mc__st span{display:block;margin-top:6px;font:300 12.5px/1.35 var(--font);color:var(--a60)}
.mc__nx{display:flex;align-items:center;gap:14px;width:100%;margin-top:30px;padding:18px 0;border-top:1px solid var(--a10);text-align:left}
.mc__nx-k{flex:none;font:500 11.5px/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--a60)}
.mc__nx-n{flex:1;min-width:0;font:300 16px/1.3 var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc__nx .ico{width:18px;height:18px;transition:transform .45s var(--ease)}
@media (hover:hover){.mc__nx:hover .ico{transform:translateX(4px)}}
.mc__cta{position:sticky;bottom:0;z-index:1;margin:8px -40px 0;padding:22px 40px 28px;background:linear-gradient(rgba(11,11,11,0),#0b0b0b 22px)}
.mc__ct{font:300 13.5px/1.45 var(--font);color:var(--a70)}
.mc__ct b{color:#fff;font-weight:500}
.mc__btn{width:100%;margin-top:14px}
.mc__x{position:absolute;right:20px;top:20px;z-index:4;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--a15);color:#fff;transition:background-color .3s var(--ease)}
.mc__x .ico{width:18px;height:18px}
@media (hover:hover){.mc__x:hover{background:rgba(255,255,255,.16)}}
.mc__x:focus-visible,.mc__arr:focus-visible,.mc__tab:focus-visible,.mc__nx:focus-visible{outline:2px solid var(--blau2);outline-offset:2px}

/* Telefon und Tablet: Blatt von unten */
@media (max-width:991px){
  .mc__wrap{align-items:flex-end;padding:0}
  .mc__arr{display:none}
  .mc__panel{width:100%;max-width:760px;height:calc(100vh - 24px);height:calc(100dvh - 24px);border-radius:16px 16px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
  .mc__sc{display:block;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .mc__sc::-webkit-scrollbar{display:none}
  .mc__media{aspect-ratio:4/3}
  .mc__stage{touch-action:pan-y}
  .mc__media.is-z .mc__stage{touch-action:none}
  .mc__hint{left:12px;top:auto;bottom:58px;height:28px;font-size:10.5px}
  .mc__tabs{bottom:12px}
  .mc__tab{height:30px;padding:0 12px;font-size:11.5px}
  .mc__grab{display:block;position:absolute;left:50%;top:8px;z-index:3;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.75);box-shadow:0 1px 6px rgba(0,0,0,.35)}
  .mc__x{right:12px;top:12px;width:36px;height:36px;background:rgba(8,8,8,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .mc__body{display:block;overflow:visible;padding:26px 20px 0}
  .mc__k{padding-right:0}
  .mc__t{font-size:clamp(25px,6.6vw,32px)}
  .mc__lead{font-size:16px}
  .mc__st{gap:12px}
  .mc__st b{font-size:16px}
  .mc__cta{margin:24px -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#0b0b0b;border-top:1px solid var(--a10)}
  .mc__ct{font-size:12.5px;line-height:1.4}
  .mc__btn{margin-top:10px;height:56px}
}
@media (max-width:420px){.mc__st span{font-size:11.5px}.mc__st b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.mc__it,.mc__it.is-on,.mc__fr img,.mc__media,.slide__plus,.js .slide[data-case] img{transition:none}}
/* r56b: Fläche «Alle Seiten» läuft weich in die Randfarbe aus (keine sichtbare Kante oben/unten), Schliessen-Knopf deckend, weicherer Übergang zum CTA */
.mc__it.can-z .mc__fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 4.5%,#000 95.5%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 4.5%,#000 95.5%,transparent);mask-composite:intersect}
.mc__x{background:rgba(11,11,11,.92)}
@media (hover:hover){.mc__x:hover{background:#222}}
.mc__cta{padding-top:44px;background:linear-gradient(rgba(11,11,11,0),#0b0b0b 40px)}
@media (max-width:991px){.mc__x{background:rgba(8,8,8,.55)}.mc__cta{padding-top:12px;background:#0b0b0b}}
/* r56c: Kicker bricht sauber um (Trennpunkt am Zeilenanfang wird weggeschnitten), Video im Fensterrahmen, Ansichten-Leiste scrollt auf sehr schmalen Handys */
.mc__k{margin-left:-1.3em;clip-path:inset(0 0 0 1.3em)}
.mc__k>b::before,.mc__k>span::before{content:"·";display:inline-block;width:1.3em;margin:0;text-align:center;color:var(--a60);font-weight:500}
.mc__it.is-vid .mc__fr{width:min(calc(100cqw - 72px),calc((100cqh - 120px) * var(--a)));border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.mc__tabs{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.mc__tabs::-webkit-scrollbar{display:none}
.mc__tab{flex:none}
@media (max-width:991px){.mc__it.is-vid .mc__fr{width:min(calc(100cqw - 32px),calc((100cqh - 84px) * var(--a)));margin-bottom:28px;border-radius:6px}}
/* r57 Mini-Cases (Yann): kurze Einleitung, dann die Leistungen als Liste mit blauen Haken; keine Kundenzitate */
.mc__ls{margin-top:10px}
.mc__ls li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--a10);font:300 15px/1.45 var(--font);color:rgba(255,255,255,.88)}
.mc__ls li:first-child{border-top:0;padding-top:4px}
.mc__ls .ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--blau2);stroke-width:2.2}
.mc__st+.mc__h{margin-top:30px}
@media (max-width:991px){.mc__ls li{font-size:15.5px}}
/* r57b: alle Bilder (nicht nur «Alle Seiten») laufen weich in die Randfarbe aus, z. B. Hochformat-Handy mit Bändern links und rechts */
.mc__it:not(.is-vid) .mc__fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 4.5%,#000 95.5%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 4.5%,#000 95.5%,transparent);mask-composite:intersect}