/* Bewegungsmuster aus der mitgelieferten Framer-Vorlage.
   Die Seite bleibt ohne JavaScript vollständig sichtbar und bedienbar. */

@keyframes idg-spring-in{
  0%{opacity:0;transform:translate3d(0,34px,0) scale(.94)}
  65%{opacity:1;transform:translate3d(0,-3px,0) scale(1.012)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@keyframes idg-badge-in{
  0%{opacity:0;transform:translate3d(0,16px,0) scale(.78)}
  72%{opacity:1;transform:translate3d(0,-2px,0) scale(1.04)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@keyframes idg-pulse-ring{
  0%{opacity:.34;transform:scale(.72)}
  80%,100%{opacity:0;transform:scale(1.38)}
}

.motion-ready [data-hero-reveal]{opacity:0}
.motion-ready.motion-started [data-hero-reveal]{
  animation:idg-spring-in .72s cubic-bezier(.22,.8,.24,1) both;
  animation-delay:var(--motion-delay,0ms)
}
.motion-ready.motion-started .hero-head .badge{
  animation-name:idg-badge-in;
  animation-duration:.62s
}

.motion-ready [data-reveal]{
  opacity:0;
  transform:translate3d(0,30px,0) scale(.985);
  transition:opacity .62s ease,transform .78s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms)
}
.motion-ready [data-reveal].is-in{
  opacity:1;
  transform:translate3d(0,0,0) scale(1)
}

.nav{
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease
}
.nav.is-scrolled{
  background:rgba(255,255,255,.9);
  border-bottom-color:rgba(31,31,31,.08);
  box-shadow:0 10px 30px rgba(31,31,31,.04)
}

.stage{
  perspective:1100px;
  transform-style:preserve-3d
}
.stage .phone{
  transform-origin:50% 12%;
  will-change:transform
}
.stage .float{
  will-change:transform;
  backface-visibility:hidden
}

.hero-head .btn,.nav .btn,.final .btn{
  will-change:transform;
  transform:translate3d(var(--magnet-x,0),var(--magnet-y,0),0)
}
.hero-head .btn:hover,.nav .btn:hover,.final .btn:hover{
  transform:translate3d(var(--magnet-x,0),calc(var(--magnet-y,0px) - 1px),0)
}

.orbit .item{
  opacity:0;
  --enter-y:22px;
  transform:translate(-50%,calc(-50% + var(--enter-y))) rotate(var(--rot,0deg)) scale(var(--s,1));
  transition:opacity .5s ease,transform .72s cubic-bezier(.16,1,.3,1)
}
.orbit.is-in .item{opacity:1;--enter-y:0px}
.orbit.is-in .item:nth-child(1){transition-delay:0ms}
.orbit.is-in .item:nth-child(2){transition-delay:60ms}
.orbit.is-in .item:nth-child(3){transition-delay:120ms}
.orbit.is-in .item:nth-child(4){transition-delay:180ms}
.orbit.is-in .item:nth-child(5){transition-delay:240ms}
.orbit.is-in .item:nth-child(6){transition-delay:300ms}
.orbit.is-in .item:nth-child(7){transition-delay:360ms}
.orbit .item:hover{--s:1.07}

.exp-stage{
  perspective:900px;
  transform-style:preserve-3d
}
.exp-stage > img{
  transform-origin:50% 50%;
  will-change:transform;
}
.exp-stage .lbl{
  opacity:0;
  will-change:transform,opacity
}
.exp-stage .lbl .line{
  transform:scaleX(0);
  transition:transform .34s cubic-bezier(.16,1,.3,1)
}
.exp-stage .lbl.left .line{transform-origin:right center}
.exp-stage .lbl.right .line{transform-origin:left center}
.exp-stage .lbl.is-in .line{transform:scaleX(1)}
.exp-stage .chip{
  box-shadow:0 8px 24px rgba(14,159,110,.08)
}

.step,.feat,.dcard,.plan,.food{
  --card-x:50%;
  --card-y:50%;
  position:relative;
  isolation:isolate;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background-color .3s ease
}
.step::after,.feat::after,.dcard::after,.plan::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(340px circle at var(--card-x) var(--card-y),rgba(255,255,255,.8),transparent 62%);
  transition:opacity .28s ease
}
.step:hover::after,.feat:hover::after,.dcard:hover::after,.plan:hover::after{opacity:.72}
.step:hover,.feat:hover,.dcard:hover,.plan:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.28)
}
.motion-ready .step[data-reveal].is-in:hover,
.motion-ready .feat[data-reveal].is-in:hover,
.motion-ready .dcard[data-reveal].is-in:hover,
.motion-ready .plan[data-reveal].is-in:hover{
  transform:translateY(-4px)
}
.step-shot .mini,.feat-vis img{
  will-change:transform;
  transition:transform .38s cubic-bezier(.16,1,.3,1)
}
.step:hover .mini{transform:translateY(-6px) scale(1.018)}
.feat:hover .feat-vis img{transform:translateY(-5px) scale(1.018)}

.stepno{
  position:relative;
  overflow:visible
}
.step.is-in .stepno::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid var(--green);
  border-radius:50%;
  animation:idg-pulse-ring 1.4s .28s ease-out both
}

.food img{
  transition:transform .35s cubic-bezier(.16,1,.3,1),filter .35s ease
}
.food:hover img{
  transform:translateY(-3px) rotate(-3deg) scale(1.08);
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.12))
}
.motion-ready .food[data-reveal].is-in:hover{transform:translateY(-2px)}
.plan.hero-plan.is-in{
  animation:idg-badge-in .68s .12s cubic-bezier(.16,1,.3,1) both
}

.appicon img{will-change:transform}
.final.is-in .appicon img{animation:idg-badge-in .72s cubic-bezier(.16,1,.3,1) both}

@media (max-width:809px){
  .orbit .item{opacity:0;transform:none!important}
  .orbit.is-in .item{opacity:1}
  .step:hover,.feat:hover,.dcard:hover,.plan:hover{transform:none;box-shadow:none}
  .motion-ready .step[data-reveal].is-in:hover,
  .motion-ready .feat[data-reveal].is-in:hover,
  .motion-ready .dcard[data-reveal].is-in:hover,
  .motion-ready .plan[data-reveal].is-in:hover,
  .motion-ready .food[data-reveal].is-in:hover{transform:none}
  .step::after,.feat::after,.dcard::after,.plan::after{display:none}
}

@media (hover:none){
  .step:hover,.feat:hover,.dcard:hover,.plan:hover{transform:none;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .motion-ready [data-hero-reveal],
  .motion-ready [data-reveal],
  .motion-ready .exp-stage .lbl{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    transition:none!important
  }
  .motion-ready .orbit .item{
    opacity:1!important;
    transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)!important;
    animation:none!important;
    transition:none!important
  }
  .exp-stage .lbl .line{transform:scaleX(1)!important}
  .stage .phone,.stage .float,.step-shot .mini,.feat-vis img,.appicon img{transform:none!important}
}

@media (max-width:809px) and (prefers-reduced-motion:reduce){
  .motion-ready .orbit .item{transform:none!important}
}


@keyframes idg-analysis-spin{to{transform:rotate(360deg)}}

@keyframes idg-analysis-fly{
  0%{opacity:0;transform:translate3d(var(--fly-start-x),var(--fly-start-y),0) scale(.72)}
  10%{opacity:1}
  56%{opacity:1;transform:translate3d(var(--fly-arc-x),var(--fly-arc-y),0) scale(1.5)}
  100%{opacity:0;transform:translate3d(var(--fly-end-x),var(--fly-end-y),0) scale(.72)}
}

.analysis{padding-top:96px;padding-bottom:96px}
.analysis-head{max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.analysis-head .lead{max-width:700px}
.analysis-eyebrow{display:inline-flex;align-items:center;border-radius:100px;padding:8px 13px;background:var(--green-soft);color:var(--green)}
.analysis-demo{position:relative;margin-top:54px}
.analysis-scene{position:relative;max-width:760px;margin:0 auto;text-align:center}
.analysis-photo{position:relative;width:min(616px,88vw);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.analysis-photo::before{content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0 58%,#f6f5f1 78%,rgba(246,245,241,0) 79%);filter:drop-shadow(0 26px 28px rgba(0,0,0,.11))}
.analysis-photo > img:first-child{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 19px rgba(0,0,0,.1));transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.analysis-landed{position:absolute;z-index:4;width:70px;height:70px;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.55);filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));transition:opacity .28s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.analysis-landed-0{left:70%;top:66%}
.analysis-landed-1{left:40%;top:62%}
.analysis-landed-2{left:22%;top:39%}
.analysis-landed-3{left:65%;top:26%}
.analysis-landed-4{left:23%;top:69%}
.analysis-landed-5{left:80%;top:39%}
.analysis-landed-6{left:56%;top:49%}
.analysis-landed-7{left:50%;top:43%}
.analysis-landed-8{left:68%;top:54%}
.analysis-landed.is-landed{opacity:.96;transform:translate(-50%,-50%) scale(.78)}
.analysis-flying{position:absolute;z-index:12;left:0;top:0;width:70px;height:70px;object-fit:contain;opacity:0;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.18));will-change:transform,opacity}
.analysis-flying.is-flying{animation:idg-analysis-fly .72s cubic-bezier(.2,.72,.22,1) both}
.analysis-selection{width:min(440px,100%);height:70px;margin:6px auto 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.analysis-slot-group{height:70px;display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:0;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.analysis-slot{flex:0 0 auto;width:0;height:70px;margin-left:0;display:grid;place-items:center;border-radius:18px;background:#f6f6f6;opacity:0;overflow:hidden;transform:scale(.82);transition:width .48s cubic-bezier(.16,1,.3,1),margin-left .48s cubic-bezier(.16,1,.3,1),opacity .28s ease,transform .48s cubic-bezier(.16,1,.3,1)}
.analysis-slot.is-visible{width:70px;opacity:1;transform:scale(1)}
.analysis-slot.is-visible + .analysis-slot.is-visible{margin-left:10px}
.analysis-slot img{width:62px;height:62px;object-fit:contain;opacity:0;transform:translateY(8px) scale(.72);filter:drop-shadow(0 7px 8px rgba(0,0,0,.1));transition:opacity .28s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.analysis-slot.has-item img{opacity:1;transform:none}
.analysis-demo.is-done .analysis-slot.is-visible{width:42px;height:42px;border-radius:12px}
.analysis-demo.is-done .analysis-slot.is-visible + .analysis-slot.is-visible{margin-left:7px}
.analysis-demo.is-done .analysis-slot img{width:38px;height:38px}
.analysis-progress{min-height:38px;margin-top:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#aaa;font-size:14px;font-weight:700}
.analysis-loader{position:relative;width:16px;height:16px;border:3px solid #ddd;border-top-color:#aaa;border-radius:50%;animation:idg-analysis-spin .76s linear infinite}
.analysis-progress.is-done{color:var(--ink2)}
.analysis-progress.is-done .analysis-loader{display:grid;place-items:center;width:22px;height:22px;border:0;background:var(--green);color:#fff;animation:none}
.analysis-progress.is-done .analysis-loader::after{content:"✓";font-size:13px;line-height:1}
.analysis-query{width:min(800px,100%);min-height:126px;margin:74px auto 0;padding:27px 30px 23px;display:flex;flex-direction:column;justify-content:space-between;gap:23px;border:1.5px solid #ddd;border-radius:38px;background:#fff;box-shadow:0 20px 48px -38px rgba(0,0,0,.3);color:var(--ink2);font-size:21px;line-height:1.35}
.analysis-query-actions{display:flex;align-items:center;justify-content:space-between}
.analysis-query i{display:grid;place-items:center;font-style:normal}
.analysis-query svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.analysis-camera{color:#777}
.analysis-send{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff}
.analysis-demo.is-resetting .analysis-slot,
.analysis-demo.is-resetting .analysis-landed{opacity:0;transform:scale(.72)}
.analysis-demo.is-resetting .analysis-landed{transform:translate(-50%,-50%) scale(.55)}

@media (max-width:809px){
  .analysis{padding-top:68px;padding-bottom:68px}
  .analysis-demo{margin-top:34px}
  .analysis-photo{width:min(430px,100%)}
  .analysis-landed{width:58px;height:58px}
  .analysis-selection{height:64px;margin-top:2px}
  .analysis-slot-group{height:64px;gap:0}
  .analysis-slot{height:64px;border-radius:17px}
  .analysis-slot.is-visible{width:64px}
  .analysis-slot.is-visible + .analysis-slot.is-visible{margin-left:8px}
  .analysis-slot img{width:56px;height:56px}
  .analysis-demo.is-done .analysis-slot.is-visible{width:32px;height:32px;border-radius:10px}
  .analysis-demo.is-done .analysis-slot.is-visible + .analysis-slot.is-visible{margin-left:5px}
  .analysis-demo.is-done .analysis-slot img{width:29px;height:29px}
  .analysis-progress{margin-top:16px;font-size:13px}
  .analysis-query{min-height:112px;margin-top:52px;padding:23px 22px 19px;border-radius:30px;font-size:18px}
  .analysis-send{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .analysis-flying{display:none!important}
  .analysis-landed{opacity:0!important}
  .analysis-landed.is-landed{opacity:.96!important;transform:translate(-50%,-50%) scale(.78)!important}
  .analysis-slot{width:42px!important;height:42px!important;opacity:1!important;transform:none!important}
  .analysis-slot img{width:38px!important;height:38px!important;opacity:1!important;transform:none!important}
  .analysis-loader{animation:none!important}
}


@media (max-width:809px) and (prefers-reduced-motion:reduce){
  .analysis-slot{width:32px!important;height:32px!important}
  .analysis-slot.is-visible + .analysis-slot.is-visible{margin-left:5px}
  .analysis-slot img{width:29px!important;height:29px!important}
}


/* Scrub-Analyse – Hero nach Lazyweb-Mockup */
.hero{padding-top:52px}
.hero-head{gap:16px}
.hero-sub{max-width:570px}
.scrub-demo{
  position:relative;
  left:50%;
  translate:-50% 0;
  width:min(1000px,calc(100vw - 32px));
  height:660px;
  margin-top:18px;
  isolation:isolate
}
.scrub-demo::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:10px -120px 0;
  background-image:linear-gradient(rgba(14,159,110,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(14,159,110,.075) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 78%,transparent 100%)
}
.scrub-bowl-wrap{
  position:absolute;
  left:26px;
  top:0;
  width:640px;
  height:640px
}
.scrub-bowl{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 24px 25px rgba(0,0,0,.13));
  user-select:none;
  pointer-events:none
}
.scrub-focus{
  position:absolute;
  z-index:2;
  inset:0;
  filter:drop-shadow(0 0 2px #35e68d) drop-shadow(0 0 5px rgba(53,230,141,.92));
  pointer-events:none;
  transition:filter .24s ease
}
.scrub-focus img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:clip-path .42s cubic-bezier(.2,.72,.22,1)
}
.scrub-focus[data-step="1"] img{clip-path:polygon(27% 50%,37% 42%,46% 45%,49% 57%,44% 68%,33% 70%,26% 61%)}
.scrub-focus[data-step="2"] img{clip-path:polygon(36% 15%,65% 13%,72% 31%,64% 43%,43% 43%,32% 30%)}
.scrub-focus[data-step="3"] img{clip-path:polygon(12% 20%,38% 17%,45% 39%,34% 51%,14% 48%,7% 33%)}
.scrub-focus[data-step="4"] img{clip-path:polygon(4% 37%,31% 35%,38% 66%,29% 81%,7% 77%,1% 56%)}
.scrub-focus[data-step="5"] img{clip-path:polygon(65% 18%,91% 23%,96% 48%,81% 56%,63% 44%)}
.scrub-focus[data-step="6"] img{clip-path:polygon(48% 45%,93% 43%,97% 76%,75% 86%,47% 73%)}
.scrub-focus[data-step="7"] img{clip-path:polygon(24% 16%,72% 11%,92% 40%,74% 69%,25% 67%,8% 39%)}
.scrub-focus[data-step="8"] img{clip-path:polygon(39% 26%,67% 22%,74% 48%,58% 59%,37% 50%)}
.scrub-focus[data-step="9"] img{clip-path:polygon(41% 37%,83% 35%,89% 72%,61% 82%,37% 63%)}
.scrub-callout{
  position:absolute;
  z-index:5;
  left:112px;
  top:390px;
  display:flex;
  align-items:center;
  gap:12px;
  width:194px;
  min-height:84px;
  padding:13px 16px;
  border:1px solid rgba(31,31,31,.08);
  border-radius:16px;
  background:#fff;
  box-shadow:0 13px 28px rgba(25,31,28,.16);
  transition:left .28s cubic-bezier(.2,.72,.22,1),top .28s cubic-bezier(.2,.72,.22,1),transform .2s ease
}
.scrub-callout:hover{transform:translateY(-2px)}
.scrub-callout > img{width:52px;height:52px;flex:0 0 52px;object-fit:contain}
.scrub-callout > span{display:flex;min-width:0;flex-direction:column;gap:3px}
.scrub-callout b{font-size:17px;line-height:1.2;white-space:nowrap}
.scrub-callout small{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.scrub-control{
  position:absolute;
  z-index:6;
  left:98px;
  bottom:2px;
  width:404px;
  min-height:82px;
  padding:14px 36px 15px;
  border:1px solid rgba(31,31,31,.08);
  border-radius:30px;
  background:#fff;
  box-shadow:0 14px 28px rgba(25,31,28,.16);
  text-align:center
}
.scrub-control strong{display:block;font-size:15px;line-height:1.2}
.scrub-range-wrap{position:relative;height:29px;margin-top:9px}
.scrub-range-wrap input{
  position:absolute;
  z-index:3;
  left:-3px;
  top:0;
  width:calc(100% + 6px);
  height:28px;
  margin:0;
  padding:0;
  cursor:grab;
  appearance:none;
  -webkit-appearance:none;
  background:transparent
}
.scrub-range-wrap input:active{cursor:grabbing}
.scrub-range-wrap input:focus-visible{outline:3px solid rgba(14,159,110,.28);outline-offset:4px;border-radius:16px}
.scrub-range-wrap input::-webkit-slider-runnable-track{height:2px;background:#d8dcda;border-radius:2px}
.scrub-range-wrap input::-moz-range-track{height:2px;background:#d8dcda;border-radius:2px}
.scrub-range-wrap input::-webkit-slider-thumb{
  width:22px;
  height:22px;
  margin-top:-10px;
  border:3px solid #fff;
  border-radius:50%;
  appearance:none;
  -webkit-appearance:none;
  background:var(--green-bright);
  box-shadow:0 1px 2px rgba(0,0,0,.24),0 0 0 1px rgba(14,159,110,.18)
}
.scrub-range-wrap input::-moz-range-thumb{
  width:18px;
  height:18px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--green-bright);
  box-shadow:0 1px 2px rgba(0,0,0,.24),0 0 0 1px rgba(14,159,110,.18)
}
.scrub-ticks{
  position:absolute;
  z-index:1;
  left:6px;
  right:6px;
  top:12px;
  display:grid;
  grid-template-columns:repeat(9,1fr);
  pointer-events:none
}
.scrub-ticks i{width:6px;height:6px;margin:auto;border-radius:50%;background:#d8dcda}
.scrub-summary{
  position:absolute;
  z-index:5;
  top:144px;
  right:14px;
  width:226px;
  min-height:410px;
  padding:30px 27px 26px;
  border:1px solid rgba(31,31,31,.07);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 34px rgba(25,31,28,.14);
  text-align:left
}
.scrub-summary h2{font-size:18px;line-height:1.2;letter-spacing:-.03em}
.scrub-summary ol{display:flex;flex-direction:column;gap:15px;margin:24px 0 0;padding:0;list-style:none}
.scrub-summary li{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:10px;min-width:0}
.scrub-summary li span{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#f5f6f5;color:#9a9f9c;font-size:11px;font-weight:700}
.scrub-summary li b{overflow:hidden;color:#a3a7a5;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;transition:color .2s ease,transform .22s ease}
.scrub-summary li.is-found span{background:var(--green-soft);color:var(--green)}
.scrub-summary li.is-found b{color:var(--ink2);transform:translateX(2px)}
.analysis{padding-top:76px}

@media (max-width:809px){
  .hero{padding-top:42px}
  .hero-head{gap:15px}
  .hero-sub{max-width:500px}
  .scrub-demo{width:calc(100vw - 16px);height:806px;margin-top:20px}
  .scrub-demo::before{inset:8px -20px 330px;background-size:56px 56px}
  .scrub-bowl-wrap{left:50%;top:0;width:min(430px,100vw);height:min(430px,100vw);translate:-50% 0}
  .scrub-callout{left:10%!important;top:61%!important;width:168px;min-height:70px;padding:10px 12px;border-radius:14px;gap:9px}
  .scrub-callout > img{width:42px;height:42px;flex-basis:42px}
  .scrub-callout b{font-size:15px}
  .scrub-callout small{font-size:11px}
  .scrub-control{left:50%;bottom:-2px;width:min(330px,calc(100vw - 42px));min-height:74px;padding:12px 28px 13px;border-radius:26px;translate:-50% 0}
  .scrub-control strong{font-size:14px}
  .scrub-summary{top:444px;right:50%;width:min(330px,calc(100vw - 42px));min-height:324px;padding:22px 24px 20px;border-radius:20px;translate:50% 0}
  .scrub-summary h2{font-size:17px}
  .scrub-summary ol{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:18px}
  .scrub-summary li{grid-template-columns:23px 1fr;gap:7px}
  .scrub-summary li span{width:21px;height:21px;font-size:10px}
  .scrub-summary li b{font-size:11px}
  .analysis{padding-top:62px}
}
@media (max-width:430px){
  .scrub-demo{height:786px}
  .scrub-summary{top:420px}
}
@media (prefers-reduced-motion:reduce){
  .scrub-focus img,.scrub-callout{transition:none!important}
}

.scrub-range-wrap::before{content:"";position:absolute;z-index:2;left:6px;top:12px;width:calc(var(--scrub-progress,0%) - 6px);height:2px;border-radius:2px;background:var(--green-bright);pointer-events:none}


/* Lagekorrektur: Scrub-Analyse ist ein eigener Bereich unter dem Hero. */
.hero{padding:76px var(--pad) 0;overflow:visible}
.hero-head{gap:24px}
.hero-sub{max-width:540px}
.analysis{padding-top:96px;padding-bottom:96px}
.analysis .scrub-demo{margin-top:54px}
@media (max-width:809px){
  .hero{padding-top:52px}
  .analysis{padding-top:68px;padding-bottom:68px}
  .analysis .scrub-demo{margin-top:34px}
}

.analysis{overflow:clip}
@media (max-width:809px){
  .scrub-summary{min-height:280px}
}

.scrub-bowl,.scrub-focus{
  transform:translate(42px,-30px) scale(1.48,1.36);
  transform-origin:center;
  transition:transform .42s cubic-bezier(.2,.72,.22,1)
}
.scrub-control{left:144px;bottom:24px}
.scrub-summary{right:36px;min-height:410px}
.scrub-summary ol{gap:11px;margin-top:22px}
@media (max-width:809px){
  .scrub-bowl,.scrub-focus{transform:translate(42px,-18px) scale(1.28,1.24)}
  .scrub-callout{left:50%!important;top:55%!important;translate:-50% 0}
  .scrub-control{left:50%;bottom:-2px}
  .scrub-summary{right:50%;min-height:280px}
}

.scrub-focus[data-step="1"] img{clip-path:polygon(29% 56%,30% 51%,34% 47%,39% 46%,44% 49%,48% 55%,49% 62%,46% 70%,41% 74%,35% 72%,30% 66%)}


/* Präzise Mehrflächen-Masken für die neun erkannten Bestandteile. */
.scrub-focus img{position:absolute;inset:0}
.scrub-focus img:nth-child(2),.scrub-focus img:nth-child(3){clip-path:polygon(0 0,0 0,0 0)}
.scrub-focus[data-step="1"] img:nth-child(1){clip-path:polygon(25% 57%,27% 51%,31% 47%,35% 46%,39% 50%,42% 59%,40% 68%,35% 73%,29% 70%,25% 64%)}
.scrub-focus[data-step="1"] img:nth-child(2){clip-path:polygon(36% 52%,39% 47%,44% 48%,48% 54%,50% 62%,48% 70%,44% 74%,40% 71%,37% 65%)}
.scrub-focus[data-step="1"] img:nth-child(3){clip-path:polygon(0 0,0 0,0 0)}
.scrub-focus[data-step="2"] img:nth-child(1){clip-path:polygon(35% 22%,38% 17%,48% 15%,56% 18%,60% 25%,58% 33%,51% 38%,42% 36%,36% 30%)}
.scrub-focus[data-step="2"] img:nth-child(2){clip-path:polygon(51% 20%,56% 15%,66% 15%,73% 20%,76% 28%,73% 36%,66% 40%,58% 36%,53% 30%)}
.scrub-focus[data-step="2"] img:nth-child(3){clip-path:polygon(66% 24%,71% 20%,80% 21%,86% 27%,87% 34%,83% 41%,75% 42%,69% 37%)}
.scrub-focus[data-step="3"] img:nth-child(1){clip-path:polygon(8% 34%,10% 27%,18% 24%,25% 27%,28% 34%,25% 42%,17% 45%,10% 41%)}
.scrub-focus[data-step="3"] img:nth-child(2){clip-path:polygon(20% 28%,23% 22%,31% 22%,38% 28%,39% 37%,34% 43%,26% 41%,21% 36%)}
.scrub-focus[data-step="3"] img:nth-child(3){clip-path:polygon(7% 43%,12% 37%,23% 38%,34% 44%,35% 52%,29% 58%,17% 56%,9% 51%)}
.scrub-focus[data-step="4"] img:nth-child(1){clip-path:polygon(3% 50%,8% 44%,20% 43%,28% 49%,29% 59%,23% 70%,11% 73%,4% 66%)}
.scrub-focus[data-step="4"] img:nth-child(2){clip-path:polygon(12% 59%,20% 53%,31% 55%,37% 64%,35% 74%,28% 80%,17% 78%,11% 70%)}
.scrub-focus[data-step="4"] img:nth-child(3){clip-path:polygon(0 0,0 0,0 0)}
.scrub-focus[data-step="5"] img:nth-child(1){clip-path:polygon(68% 31%,73% 26%,82% 27%,86% 34%,83% 42%,75% 44%,69% 39%)}
.scrub-focus[data-step="5"] img:nth-child(2){clip-path:polygon(79% 34%,85% 29%,93% 32%,96% 40%,93% 49%,85% 51%,79% 45%)}
.scrub-focus[data-step="5"] img:nth-child(3){clip-path:polygon(69% 43%,76% 38%,86% 42%,91% 50%,88% 57%,79% 59%,71% 53%)}
.scrub-focus[data-step="6"] img:nth-child(1){clip-path:polygon(49% 49%,55% 43%,68% 44%,78% 49%,80% 56%,73% 61%,60% 60%,51% 56%)}
.scrub-focus[data-step="6"] img:nth-child(2){clip-path:polygon(62% 53%,71% 49%,83% 52%,91% 59%,90% 66%,81% 70%,69% 66%,63% 61%)}
.scrub-focus[data-step="6"] img:nth-child(3){clip-path:polygon(51% 63%,60% 58%,74% 62%,86% 70%,86% 78%,76% 84%,62% 80%,52% 73%)}
.scrub-focus[data-step="7"] img:nth-child(1){clip-path:polygon(30% 58%,33% 54%,39% 55%,43% 60%,42% 66%,36% 68%,31% 64%)}
.scrub-focus[data-step="7"] img:nth-child(2){clip-path:polygon(40% 24%,44% 21%,51% 22%,55% 27%,53% 32%,46% 33%,41% 29%)}
.scrub-focus[data-step="7"] img:nth-child(3){clip-path:polygon(63% 54%,68% 50%,77% 51%,82% 56%,80% 62%,72% 64%,65% 60%)}
.scrub-focus[data-step="8"] img:nth-child(1){clip-path:polygon(34% 38%,38% 31%,47% 30%,53% 36%,52% 45%,44% 49%,37% 45%)}
.scrub-focus[data-step="8"] img:nth-child(2){clip-path:polygon(48% 36%,53% 31%,62% 32%,69% 39%,67% 48%,59% 52%,51% 47%)}
.scrub-focus[data-step="8"] img:nth-child(3){clip-path:polygon(41% 46%,47% 40%,58% 42%,64% 49%,60% 57%,50% 59%,43% 54%)}
.scrub-focus[data-step="9"] img:nth-child(1){clip-path:polygon(57% 49%,63% 45%,73% 47%,79% 52%,77% 58%,68% 61%,60% 57%)}
.scrub-focus[data-step="9"] img:nth-child(2){clip-path:polygon(68% 57%,74% 52%,84% 54%,90% 60%,88% 67%,80% 71%,71% 66%)}
.scrub-focus[data-step="9"] img:nth-child(3){clip-path:polygon(76% 35%,82% 31%,91% 34%,94% 41%,90% 48%,81% 48%,76% 43%)}

.scrub-focus{filter:none}
.scrub-focus img{transition:none;filter:brightness(1.14) saturate(1.3);opacity:1}

.scrub-focus img{filter:sepia(1) saturate(5) hue-rotate(78deg) brightness(1.08);opacity:.38;mix-blend-mode:screen}

/* Die Erkennung liegt als feste Karte auf dem Foto. Jede Form folgt nur der Zutat. */
.scrub-focus{filter:none}
.scrub-focus svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  -webkit-mask:url('/assets/food/bowl-mit-reis-haehnchen-avocado-suesskartoffel-gurke-und-roter-bete.webp') center/contain no-repeat;
  mask:url('/assets/food/bowl-mit-reis-haehnchen-avocado-suesskartoffel-gurke-und-roter-bete.webp') center/contain no-repeat
}
.scrub-focus [data-map]{
  opacity:0;
  fill:rgba(39,224,132,.055);
  stroke:#19d777;
  stroke-width:3.5;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(15,201,111,.72));
  transition:opacity .18s ease
}
.scrub-focus[data-step="1"] [data-map="1"],
.scrub-focus[data-step="2"] [data-map="2"],
.scrub-focus[data-step="3"] [data-map="3"],
.scrub-focus[data-step="4"] [data-map="4"],
.scrub-focus[data-step="5"] [data-map="5"],
.scrub-focus[data-step="6"] [data-map="6"],
.scrub-focus[data-step="7"] [data-map="7"],
.scrub-focus[data-step="8"] [data-map="8"],
.scrub-focus[data-step="9"] [data-map="9"]{opacity:1}
.scrub-focus .scrub-specks{fill:#16d77a;stroke:#fff;stroke-width:1.5}
.scrub-focus .scrub-sauce-map{fill:none;stroke:rgba(14,159,110,.28);stroke-width:18;stroke-linecap:round;filter:none}

/* Das neue BBQ-Beispiel hat eine andere Anordnung. Die alten, handgezeichneten
   Flächen würden falsche Zutaten markieren. Die Text-Erkennung bleibt aktiv. */
.scrub-focus{display:none}