/* Martha Volkova · Thermomix® Repräsentantin
   Gestaltung in der Thermomix-Markensprache: helle Fläche, Vorwerk-Grün als einziger Akzent,
   leichte geometrische Schrift (Outfit als freie Entsprechung der VorwerkFont), Pill-Knöpfe,
   dunkler Foto-Hero. Radius-System: Knöpfe Pille, Kacheln 24px, Eingabefelder 12px. */

@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/Outfit-Variable.woff2") format("woff2")}

:root{
  --green:#00AC46;
  --green-600:#009A3B;
  --green-050:#E6F5EB;
  --green-900:#0B3B22;
  --green-glow:#2FD170;
  --bg:#FCFCFB;
  --bg-2:#F2F4F2;
  --ink:#23282A;
  --ink-2:#4F575B;
  --mute:#6C7175;
  --line:#E2E6E3;
  --card:#FFFFFF;
  --radius-card:24px;
  --radius-field:12px;
  --nav-h:72px;
  --wrap:1280px;
  --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#131617;
    --bg-2:#1B1F21;
    --ink:#F1F3F2;
    --ink-2:#C3C8C6;
    --mute:#9AA19E;
    --line:#2A3033;
    --card:#1F2426;
    --green-050:#12301E;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.05rem;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
.ic{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:#fff;padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:16px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,140px)}
.h2{font-weight:300;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-.02em}
.lead{font-weight:300;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.45;color:var(--ink-2);max-width:60ch;margin-top:20px}
h3{font-weight:500;font-size:1.2rem;line-height:1.3}

/* Knöpfe */
.btn{
  display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  padding:.85em 1.6em;border-radius:999px;border:1px solid transparent;
  font-weight:500;font-size:1rem;line-height:1;white-space:nowrap;cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s,border-color .25s,color .25s,box-shadow .25s;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn--lg{padding:1.05em 1.9em;font-size:1.05rem}
.btn--primary{background:var(--green);color:#fff;box-shadow:0 10px 30px -12px rgba(0,172,70,.55)}
.btn--primary:hover{background:var(--green-600)}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:rgba(127,127,127,.12)}
.btn--light{background:#fff;color:var(--green-900)}
.btn--light:hover{background:#E6F5EB}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* Navigation */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;color:#fff;transition:background-color .35s,color .35s,box-shadow .35s}
.nav__inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);height:100%;display:flex;align-items:center;gap:32px}
.brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}
.brand__name{font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.brand__role{font-size:.78rem;opacity:.8;font-weight:400}
.nav__links{display:flex;align-items:center;gap:28px;font-weight:500;font-size:.98rem}
.nav__links a{opacity:.9;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__ig{display:inline-flex}
.nav__ig .ic{width:1.4em;height:1.4em}
.nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav__burger .ic{width:1.8em;height:1.8em}
.nav__burger .ic--close,.nav__burger[aria-expanded="true"] .ic--open{display:none}
.nav__burger[aria-expanded="true"] .ic--close{display:block}
.nav.is-solid{background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--ink);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 1px 0 var(--line)}
.nav.is-solid .brand__role{opacity:.7}
.nav.is-menu{background:var(--bg);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}

.menu{position:fixed;inset:0;z-index:45;background:var(--bg);color:var(--ink);padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;display:flex;flex-direction:column;justify-content:space-between}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:8px}
.menu nav a{font-size:2rem;font-weight:300;padding:10px 0;border-bottom:1px solid var(--line)}
.menu .btn{align-self:stretch}

/* Hero */
.hero-wrap{height:100svh;position:relative;z-index:0}
.hero{position:sticky;top:0;height:100svh;display:grid;align-items:center;color:#fff;isolation:isolate;overflow:clip;transform:scale(calc(1 - var(--hp,0)*.06));transform-origin:50% 40%;will-change:transform;border-radius:calc(var(--hp,0)*32px)}
.hero__dim{position:absolute;inset:0;background:#090c0c;opacity:calc(var(--hp,0)*.65);pointer-events:none}
.hero__spot{position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,70%) var(--my,45%),rgba(0,172,70,.22),transparent 60%);opacity:0;transition:opacity .6s;pointer-events:none}
.hero:hover .hero__spot{opacity:1}
.sheet{position:relative;z-index:2;background:var(--bg);border-radius:32px 32px 0 0;box-shadow:0 -30px 80px -30px rgba(0,0,0,.55)}
.marquee{border-radius:32px 32px 0 0}
.hero__media{position:absolute;inset:-3%;z-index:-1;will-change:transform}
.hero__bg{width:100%;height:100%;object-fit:cover;object-position:0% 50%;transform-origin:center}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(9,12,12,.88) 0%,rgba(9,12,12,.66) 38%,rgba(9,12,12,.22) 70%,rgba(9,12,12,.10) 100%),
  linear-gradient(0deg,rgba(9,12,12,.75) 0%,rgba(9,12,12,0) 40%),
  linear-gradient(180deg,rgba(9,12,12,.45) 0%,rgba(9,12,12,0) 25%)}
.hero__inner{position:relative;max-width:var(--wrap);width:100%;margin-inline:auto;padding:calc(var(--nav-h) + 40px) var(--gutter) 130px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:center}
.hero__copy{max-width:720px}
.hero__title{font-weight:300;font-size:clamp(2.5rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.025em}
.hero__title em{font-style:normal;font-weight:600;color:var(--green-glow)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line > span{display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.hero__title .line:nth-child(2) > span{animation-delay:.12s}
.hero__sub{margin-top:24px;font-weight:300;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.45;max-width:46ch;color:rgba(255,255,255,.88);opacity:0;animation:fadeup .8s var(--ease) .35s forwards}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;opacity:0;animation:fadeup .8s var(--ease) .5s forwards}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.12)}


.hero__card{position:absolute;left:var(--gutter);bottom:36px;display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 20px 50px -20px rgba(0,0,0,.6);opacity:0;animation:fadeup .8s var(--ease) .7s forwards;transition:transform .3s var(--ease)}
.hero__card:hover{transform:translateY(-2px)}
.hero__card img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.hero__card-text{display:flex;flex-direction:column;line-height:1.2}
.hero__card-text strong{font-weight:500}
.hero__card-text span{font-size:.85rem;opacity:.8}
.hero__card .ic{opacity:.8;margin-left:6px}

@keyframes rise{to{transform:translateY(0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@supports (animation-timeline:scroll()){
  .hero__bg{animation:heroZoom linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.14)}}
}

/* Marquee */
.marquee{background:var(--green);color:#fff;overflow:hidden;padding:16px 0;font-weight:400;font-size:clamp(1rem,1.4vw,1.2rem);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:0;width:max-content;animation:marquee 46s linear infinite}
.marquee__track span{padding:0 28px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.35)}
.marquee__track b{font-weight:700}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* TM7 Bento */
.tm7{background:var(--bg)}
.bento{margin-top:48px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(220px,auto);gap:16px}
.bento__cell{position:relative;border-radius:var(--radius-card);background:var(--bg-2);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.bento__cell:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(35,40,42,.35)}
.bento__cell p{color:var(--ink-2);font-size:.98rem}
.bento__num{font-weight:200;font-size:clamp(2.4rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.03em;margin-bottom:8px;font-variant-numeric:tabular-nums}
.bento__cell--hero{grid-column:span 5;grid-row:span 2;justify-content:space-between;background:var(--bg-2)}
.bento__cell--hero img{width:min(100%,520px);margin:0 auto;object-fit:contain}
.bento__cell--hero figcaption{color:var(--mute);font-size:.9rem;text-align:center}
.bento__cell--img{grid-column:span 4;color:#fff;background:linear-gradient(180deg,rgba(9,12,12,.1),rgba(9,12,12,.78)),var(--img) center/cover no-repeat}
.bento__cell--img p{color:rgba(255,255,255,.85)}
.bento__cell--green{grid-column:span 3;background:var(--green);color:#fff}
.bento__cell--green p{color:rgba(255,255,255,.88)}
.bento__cell:nth-child(4){grid-column:span 3}
.bento__cell--parts{grid-column:span 4;min-height:300px}
.bento__cell--parts img{position:absolute;right:-12%;top:-20%;width:50%;opacity:.95;pointer-events:none}
.bento__cell--parts h3,.bento__cell--parts p{position:relative;max-width:62%}
.bento__cell--parts .bento__num{position:relative;white-space:nowrap;font-size:clamp(2.1rem,2.9vw,2.8rem)}

/* Angebot */
.deal{background:var(--green-900);color:#fff}
.deal .lead{color:rgba(255,255,255,.82)}
.deal__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.deal__price{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 40px;margin-top:36px}
.deal__now{display:flex;flex-direction:column;line-height:1}
.deal__amount{font-weight:200;font-size:clamp(3.4rem,7vw,6rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.deal__was{margin-top:10px;color:rgba(255,255,255,.7);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5)}
.deal__save{display:flex;flex-direction:column;line-height:1.05;padding:14px 20px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.deal__save span{font-size:.9rem;color:rgba(255,255,255,.75)}
.deal__save strong{font-weight:500;font-size:2rem;color:var(--green-glow);font-variant-numeric:tabular-nums}
.countdown{margin-top:36px}
.countdown__label{font-size:.95rem;color:rgba(255,255,255,.75);margin-bottom:10px}
.countdown__cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:460px}
.countdown__cells div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.countdown__cells b{font-weight:300;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.countdown__cells span{font-size:.8rem;color:rgba(255,255,255,.7)}
.deal__free{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:10px;color:rgba(255,255,255,.92)}
.deal__free li{display:flex;align-items:center;gap:12px}
.deal__free .ic{color:var(--green-glow)}
.deal__copy > .btn{margin-top:36px}
.deal__note{margin-top:24px;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.6);max-width:60ch}
.deal__media img{border-radius:var(--radius-card);aspect-ratio:4/5;object-fit:cover;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}

/* Martha */
.martha__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.martha__media img{border-radius:var(--radius-card);width:min(100%,440px);aspect-ratio:3/4;object-fit:cover}
.martha__points{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
.martha__points .ic{width:2rem;height:2rem;color:var(--green);margin-bottom:12px}
.martha__points p{margin-top:6px;color:var(--ink-2);font-size:.98rem}

/* Instagram */
.insta{background:var(--bg-2)}
.insta__inner{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.insta__glyph{width:72px;height:72px;fill:var(--green)}
.insta__handle:not(:empty)::before{content:"·";opacity:.6;margin-right:.6em}

/* Buchen */
.buchen__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.buchen__copy{position:sticky;top:calc(var(--nav-h) + 24px)}
.buchen__direct{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:14px;font-weight:500}
.buchen__direct li{display:flex;align-items:center;gap:12px}
.buchen__direct .ic{color:var(--green);width:1.5em;height:1.5em}
.buchen__direct a:hover{text-decoration:underline}
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(20px,3vw,36px);display:grid;gap:22px}
.form__group{border:0;padding:0;margin:0;display:grid;gap:10px}
.form__group legend{padding:0;font-weight:500;margin-bottom:10px}
.form__group[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.chip span{display:inline-block;padding:.6em 1.1em;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:500;font-size:.95rem;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.chip input:checked + span{background:var(--green);color:#fff;border-color:var(--green)}
.chip input:focus-visible + span{outline:3px solid var(--green);outline-offset:2px}
.chip:active span{transform:scale(.97)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form__row[hidden]{display:none}
.field{display:grid;gap:6px}
.field label{font-weight:500}
.field input,.field textarea{width:100%;padding:.8em 1em;border-radius:var(--radius-field);border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,172,70,.18);outline:0}
.field small{color:var(--mute);font-size:.85rem}
.field__error{display:none;color:#B4231F;font-size:.85rem}
.is-invalid .field__error,.field__error.is-visible{display:block}
.is-invalid input{border-color:#B4231F}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green);flex:none}
.consent a{text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__actions{display:flex;flex-wrap:wrap;gap:12px}
.form__hint{font-size:.85rem;color:var(--mute)}
.form__done{grid-column:2;background:var(--green-050);border-radius:var(--radius-card);padding:36px;display:grid;gap:12px;justify-items:start}
.form__done .ic{width:2.4rem;height:2.4rem;color:var(--green)}
.form__done[hidden]{display:none}

/* Footer */
.footer{border-top:1px solid var(--line);padding:48px 0 calc(32px + env(safe-area-inset-bottom))}
.footer__inner{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:start}
.footer__brand{display:flex;flex-direction:column;line-height:1.3}
.footer__brand strong{font-weight:500}
.footer__brand span{color:var(--mute);font-size:.92rem}
.footer__links{display:flex;gap:24px;font-weight:500}
.footer__links a:hover{text-decoration:underline}
.footer__legal{grid-column:1/-1;font-size:.82rem;color:var(--mute);max-width:80ch;line-height:1.5}

/* Sticky Leiste (mobil) */
.stickybar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:none;gap:10px;padding:8px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 85%,transparent);border:1px solid var(--line);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.4);transform:translateY(120%);transition:transform .45s var(--ease)}
.stickybar.is-on{transform:none}
.stickybar .btn{flex:1}
.stickybar__wa{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--green-050);color:var(--green)}
.stickybar__wa .ic{width:1.6em;height:1.6em}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.steps li.reveal:nth-child(2){transition-delay:.08s}
.steps li.reveal:nth-child(3){transition-delay:.16s}
.bento__cell.reveal:nth-child(2){transition-delay:.06s}
.bento__cell.reveal:nth-child(3){transition-delay:.12s}
.bento__cell.reveal:nth-child(4){transition-delay:.18s}
.bento__cell.reveal:nth-child(5){transition-delay:.24s}
.martha__points > .reveal:nth-child(2){transition-delay:.08s}
.martha__points > .reveal:nth-child(3){transition-delay:.16s}
.martha__points > .reveal:nth-child(4){transition-delay:.24s}

/* Tablet */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:inline-flex}
  .hero__inner{grid-template-columns:1fr;padding-bottom:140px}
  .hero__copy{position:relative;z-index:1}
  .deal__grid,.martha__grid,.buchen__grid{grid-template-columns:1fr}
  .hero__bg{object-position:40% 50%}
  .buchen__copy{position:static}
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento__cell--hero{grid-column:span 6;grid-row:span 1}
  .bento__cell--img,.bento__cell--green,.bento__cell:nth-child(4),.bento__cell--parts{grid-column:span 3}
  .deal__media{order:-1}
  .deal__media img{aspect-ratio:16/10}
  .martha__media img{width:min(100%,360px)}
  .form__done{grid-column:1}
}

/* Handy */
@media (max-width:640px){
  :root{--nav-h:64px}
  body{font-size:1rem}
  body{padding-bottom:84px}
  .hero{min-height:100svh}
  .hero__bg{object-position:50% 45%}
  .hero__scrim{background:linear-gradient(180deg,rgba(9,12,12,.55) 0%,rgba(9,12,12,.35) 35%,rgba(9,12,12,.78) 70%,rgba(9,12,12,.92) 100%)}
  .hero__inner{padding-top:calc(var(--nav-h) + 24px);padding-bottom:110px;align-content:end}
  .hero__card{left:16px;right:16px;bottom:20px;border-radius:24px}
  .hero__card .ic{margin-left:auto}
  .hero__cta .btn{flex:1 1 100%}
  .marquee{font-size:.95rem}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento__cell,.bento__cell--hero,.bento__cell--img,.bento__cell--green,.bento__cell:nth-child(4),.bento__cell--parts{grid-column:span 1;min-height:200px}
  .bento__cell--img{min-height:280px}
  .bento__cell--parts img{width:50%;right:-6%;top:-6%}
  .bento__cell--parts h3,.bento__cell--parts p,.bento__cell--parts .bento__num{max-width:100%}
  .countdown__cells{gap:6px}
  .countdown__cells b{font-size:1.5rem}
  .martha__points{grid-template-columns:1fr;gap:24px}
  .form__row{grid-template-columns:1fr}
  .form__actions .btn{flex:1 1 100%}
  .footer__inner{grid-template-columns:1fr}
  .stickybar{display:flex}
  .section{padding-block:64px}
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__title .line > span{transform:none}
  .hero__sub,.hero__cta,.hero__card{opacity:1}
  .reveal{opacity:1;transform:none}
  .stickybar{transform:none}
  .hero{transform:none;border-radius:0}
  .hero__dim{opacity:0}
  .split .w>span{transform:none}
  .img-reveal img,.stack__media img{clip-path:none!important;transform:none!important}
  .stack__card{transform:none!important}
  .stack__card::after{opacity:0}
  .stack__media img{opacity:1;transform:none}
  .parallax{transform:none!important}
}

/* Rechtsseiten */
.legal-page .nav{position:sticky}
.legal{padding:48px var(--gutter) 96px;max-width:800px}
.legal h2{font-weight:500;font-size:1.25rem;margin-top:36px}
.legal p{margin-top:12px;color:var(--ink-2)}
.legal p strong{color:var(--ink)}


/* ====== Effektschicht ====== */


/* Lesefortschritt in der Navigation */
.nav__progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--green);transform:scaleX(var(--sp,0));transform-origin:left;opacity:0;transition:opacity .3s}
.nav.is-solid .nav__progress{opacity:1}

/* Überschriften Wort für Wort */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.split.in .w>span{transform:none}

/* Bilder enthüllen sich */
.img-reveal img{clip-path:inset(100% 0 0 0 round var(--radius-card));transform:scale(1.18);transition:clip-path 1.1s var(--ease),transform 1.4s var(--ease)}
.img-reveal.in img{clip-path:inset(0 0 0 0 round var(--radius-card));transform:none}

/* Leichter Parallax auf Bildern */
.parallax{will-change:transform}

/* Kartenstapel Erlebniskochen */
.stack{margin-top:48px;display:grid;gap:24px;--top:calc(var(--nav-h) + 20px)}
.stack__card{position:sticky;top:var(--top);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);min-height:min(72svh,640px);border-radius:var(--radius-card);background:var(--bg-2);overflow:hidden;transform:scale(calc(1 - var(--sp,0)*.06)) translateY(calc(var(--sp,0)*-12px));transform-origin:50% 0;will-change:transform;box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
.stack__card::after{content:"";position:absolute;inset:0;background:#090c0c;opacity:calc(var(--sp,0)*.4);pointer-events:none;z-index:2;border-radius:inherit}
.stack__card:nth-child(2){top:calc(var(--top) + 16px)}
.stack__card:nth-child(3){top:calc(var(--top) + 32px)}
.stack__media{position:relative;min-height:320px;background:var(--bg-2)}
.stack__media img{opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.stack__media.in img{opacity:1;transform:none}
.stack__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stack__body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.stack__num{font-weight:200;font-size:clamp(4rem,9vw,8rem);line-height:.9;letter-spacing:-.05em;color:var(--green)}
.stack__body h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:400;letter-spacing:-.01em}
.stack__body p{color:var(--ink-2);font-size:1.05rem;max-width:40ch}
.stack__body .btn{align-self:flex-start;margin-top:16px}
.stack__card--green{background:var(--green);color:#fff}
.stack__card--green .stack__num{color:rgba(255,255,255,.9)}
.stack__card--green p{color:rgba(255,255,255,.88)}

/* Kacheln mit Tiefe und Lichtpunkt (nur mit Maus) */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s}
  .tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
  .tilt:hover::after{opacity:1}
  .tilt.is-tilting{transition:transform .08s linear;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-4px)}
  .bento__float{transition:transform .6s var(--ease)}
  .tilt:hover .bento__float{transform:translateY(-10px) scale(1.03)}
  .btn--primary,.btn--light{position:relative;overflow:hidden;isolation:isolate}
  .btn--primary::before,.btn--light::before{content:"";position:absolute;left:var(--bx,50%);top:var(--by,50%);width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.22);transition:width .5s var(--ease),height .5s var(--ease);z-index:-1}
  .btn--primary:hover::before,.btn--light:hover::before{width:260%;height:900%}
}

/* Rollende Countdown-Ziffern */
.countdown__cells b{overflow:hidden;position:relative;height:2rem}
.countdown__cells b>span{display:block}
.countdown__cells b.roll>span{animation:roll .45s var(--ease)}
@keyframes roll{0%{transform:translateY(0)}40%{transform:translateY(-110%);opacity:0}41%{transform:translateY(110%)}100%{transform:translateY(0);opacity:1}}
.deal{position:relative;overflow:hidden}
.deal__spot{position:absolute;inset:0;background:radial-gradient(640px circle at var(--mx,30%) var(--my,40%),rgba(47,209,112,.18),transparent 60%);opacity:0;transition:opacity .6s;pointer-events:none}
.deal:hover .deal__spot{opacity:1}
.deal__amount{display:inline-block;transform:scale(var(--pop,1));transform-origin:left bottom;transition:transform .9s var(--ease)}

/* Abspann */
.outro{position:relative;min-height:70svh;display:grid;align-items:center;overflow:hidden;background:var(--green-900);color:#fff;border-radius:32px 32px 0 0;margin-top:24px}
.outro__bg{position:absolute;inset:-10% 0;opacity:.28}
.outro__bg img{width:100%;height:100%;object-fit:cover}
.outro__inner{position:relative;padding-block:96px}
.outro__big{font-weight:200;font-size:clamp(3.2rem,12vw,11rem);line-height:.95;letter-spacing:-.05em}
.outro__line{margin-top:20px;font-weight:300;font-size:clamp(1.2rem,2vw,1.6rem);color:rgba(255,255,255,.85)}

@media (max-width:1024px){
  .stack__card{grid-template-columns:1fr;min-height:0}
  .stack__media{min-height:260px;aspect-ratio:16/10}
}
@media (max-width:640px){
  .stack{gap:16px;--top:calc(var(--nav-h) + 12px)}
  .stack__card:nth-child(2){top:calc(var(--top) + 10px)}
  .stack__card:nth-child(3){top:calc(var(--top) + 20px)}
  .stack__media{min-height:200px}
  .stack__num{font-size:3.2rem}
  .sheet,.marquee{border-radius:20px 20px 0 0}
  .outro{min-height:56svh}
}


/* Film: Scroll-gesteuerte Bildfolge */
.film{position:relative;height:var(--film-h,380svh);background:#EFF2EF;color:#23282A}
.film__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.film__canvas,.film__poster{grid-area:1/1;width:100vw;height:auto;aspect-ratio:16/9;max-height:100svh;object-fit:contain}
.film__fade{position:absolute;inset:0;background:var(--bg);opacity:var(--fade,0);pointer-events:none;z-index:3}
.film__caps{z-index:2}
.film__canvas{opacity:0;transition:opacity .4s}
.film.is-ready .film__canvas{opacity:1}
.film.is-ready .film__poster{opacity:0}
.film__caps{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);pointer-events:none}
.film__cap{position:absolute;left:0;top:0;transform:translateY(-50%) translateY(calc((1 - var(--o,0))*16px));white-space:nowrap;font-weight:200;font-size:clamp(2.6rem,7vw,7rem);letter-spacing:-.04em;line-height:1;opacity:var(--o,0);transition:opacity .25s,transform .25s}
.film__note{position:absolute;left:var(--gutter);bottom:20px;font-size:.78rem;color:#6C7175}
@media (max-width:640px){
  .film{height:calc(var(--film-h,380svh)*0.8)}
  .film__stage{align-content:center}
  .film__canvas,.film__poster{width:100vw;height:auto;aspect-ratio:16/9;object-fit:contain}
  .film__caps{top:auto;bottom:128px;transform:none}
  .film__cap{transform:translateY(calc((1 - var(--o,0))*12px));font-size:2.6rem}
  .film__note{bottom:100px;right:var(--gutter);left:auto;text-align:right;max-width:46%}
}
@media (prefers-reduced-motion:reduce){
  .film{height:auto;padding:48px 0}
  .film__stage{position:static;height:auto}
  .film__canvas{display:none}
  .film.is-ready .film__poster{opacity:1}
  .film__caps{display:none}
  .film__note{position:static;text-align:center;margin-top:8px}
}


/* Ladebildschirm: bleibt, bis Hero, Stapelbilder und die ersten Filmbilder da sind */
.loader{position:fixed;inset:0;z-index:80;background:var(--green);color:#fff;display:grid;place-items:center;transition:transform .9s cubic-bezier(.76,0,.24,1);will-change:transform}
.loader.is-done{transform:translateY(-100%);pointer-events:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:22px;animation:loaderIn .6s var(--ease) both}
.loader__spin{width:120px;height:120px;perspective:600px}
.loader__spin img{width:100%;height:100%;object-fit:contain;animation:spinY 1.8s cubic-bezier(.45,0,.2,1) infinite;backface-visibility:visible;will-change:transform}
@keyframes spinY{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-6px)}100%{transform:rotateY(360deg) translateY(0)}}
@keyframes loaderIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.loader__mark{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.loader__mark span{font-weight:300;font-size:clamp(1.8rem,5vw,3.2rem);letter-spacing:-.02em;line-height:1}
.loader__mark small{font-size:.9rem;opacity:.85}
.loader__bar{width:160px;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.loader__bar span{display:block;height:100%;width:100%;background:#fff;transform:scaleX(var(--lp,0));transform-origin:left;transition:transform .3s var(--ease)}
/* Hero-Einspieler warten auf den Loader */
html:not(.is-loaded) .hero__title .line > span,html:not(.is-loaded) .hero__sub,html:not(.is-loaded) .hero__cta,html:not(.is-loaded) .hero__card{animation-play-state:paused}
html.is-loaded .hero__title .line > span{animation-delay:.25s}
html.is-loaded .hero__title .line:nth-child(2) > span{animation-delay:.37s}
html.is-loaded .hero__sub{animation-delay:.6s}
html.is-loaded .hero__cta{animation-delay:.75s}
html.is-loaded .hero__card{animation-delay:.95s}
@media (prefers-reduced-motion:reduce){
  .loader__spin img{animation:none}
  .loader{transition:opacity .3s}
  .loader.is-done{opacity:0;transform:none}
}


/* Einflug-Effekte (nur Transform und Deckkraft) */
.fly{opacity:0;transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*70ms);will-change:transform,opacity}
.fly[data-fly="left"]{transform:translate3d(-72px,0,0) rotate(-1.5deg)}
.fly[data-fly="right"]{transform:translate3d(72px,0,0) rotate(1.5deg)}
.fly[data-fly="up"]{transform:translate3d(0,40px,0)}
.fly[data-fly="pop"]{transform:scale(.6)}
.fly.in{opacity:1;transform:none}
/* Stapelkarten: Einflug nur bis zum Ankleben, danach übernimmt der Scroll-Treiber */
.stack__card.fly{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stack__card.fly.in{transition:none}
.hero__card.fly{animation:none;opacity:0}
.hero__card.fly.in{opacity:1;transform:none;transition-delay:1s}
@media (prefers-reduced-motion:reduce){.fly{opacity:1!important;transform:none!important;transition:none!important}}


/* ===== Signatur-Effekte ===== */

/* 1) Hero-Überschrift setzt sich aus verstreuten Buchstaben zusammen */
.hero__title .line > span{transform:none;animation:none}
.hero__title .wd{display:inline-block;white-space:nowrap}
.hero__title .ch{display:inline-block;opacity:0;transform:translate3d(var(--dx,0),var(--dy,0),0) rotate(var(--rot,0)) scale(.6);transition:transform 1.15s cubic-bezier(.2,.9,.2,1),opacity .6s ease;transition-delay:calc(var(--i,0)*22ms + .15s);will-change:transform}
html.is-loaded .hero__title .ch{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero__title .ch{opacity:1;transform:none;transition:none}}

/* 2) Seite neigt sich mit dem Scrolltempo */
.sheet{transform:skewY(calc(var(--skew,0)*1deg));transform-origin:50% 50%;will-change:transform}

/* 3) Angebot öffnet sich als Blende, Preis mit Druckwelle */
.deal{clip-path:circle(var(--iris,160%) at 50% 30%)}
.deal__save{position:relative}
.deal__save::after{content:"";position:absolute;inset:-6px;border-radius:26px;border:2px solid var(--green-glow);opacity:0;pointer-events:none}
.deal__save.is-hit::after{animation:shock 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes shock{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

/* 4) Abspann-Buchstaben weichen der Maus aus */
.outro__big .ch{display:inline-block;will-change:transform}

/* 5) Funken beim Chip */
.chip{overflow:visible}
.spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--green);pointer-events:none;animation:spark .6s cubic-bezier(.2,.8,.2,1) forwards;--tx:0;--ty:0}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.sheet{transform:none}.deal{clip-path:none}.spark{display:none}}