/* ════════════════════════════════════════════════════════════
   Cibo · Parallax-Schicht  (ergänzt style.css)
   ════════════════════════════════════════════════════════════ */

/* 5 · Interaktiver Vision Pro – Greif-Cursor (Discoverability) */
#heroCanvas{cursor:grab}
#heroCanvas:active{cursor:grabbing}

/* 1+2 · Schwebende Zutaten im Hero */
.hero-parallax{position:absolute!important;inset:0;z-index:1!important;pointer-events:none;overflow:hidden}
.pfloat{position:absolute;display:block;will-change:transform;backface-visibility:hidden;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.pfloat svg{width:100%;height:100%;display:block;overflow:visible}

/* 4 · Spotlight-Glow, folgt dem Cursor (Lichtstimmung) */
.hero-spot{position:absolute!important;inset:0;z-index:1!important;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(440px 440px at var(--sx,50%) var(--sy,40%),
    rgba(10,132,255,.16),rgba(10,132,255,.05) 42%,transparent 70%)}

/* 3 · Messer-Schnitt-Übergänge (Blade-Sweep beim Reinscrollen) */
.blade-cut{position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;z-index:3;overflow:visible}
.blade-cut::before{content:"";position:absolute;top:0;left:0;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,rgba(64,156,255,.55),transparent);
  transform:scaleX(0);transform-origin:left center;opacity:0}
.blade-cut::after{content:"";position:absolute;top:-3.5px;left:0;width:64px;height:8px;border-radius:8px;
  background:radial-gradient(closest-side,rgba(190,225,255,.95),rgba(64,156,255,.4),transparent);opacity:0}
.blade-cut.sweep::before{animation:bladeLine .72s cubic-bezier(.5,0,.1,1) forwards}
.blade-cut.sweep::after{animation:bladeGlint .72s cubic-bezier(.5,0,.1,1) forwards}
@keyframes bladeLine{0%{transform:scaleX(0);opacity:0}14%{opacity:1}100%{transform:scaleX(1);opacity:.5}}
@keyframes bladeGlint{0%{left:-8%;opacity:0}10%{opacity:1}100%{left:100%;opacity:0}}

/* 12 · Reduced Motion → keine zusätzliche Bewegung */
@media (prefers-reduced-motion: reduce){
  .hero-spot{display:none}
  .blade-cut::before,.blade-cut::after{animation:none;opacity:.4;transform:scaleX(1)}
}
/* 13 · Mobile dezenter */
@media (max-width:760px){
  .hero-spot{opacity:.65}
  .pfloat{filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
}

/* 7 · 3D-Zwiebel-Slice-Sektion */
.onion-section{position:relative;background:#06060a}
.onion-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#onionCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
.onion-copy{position:absolute;top:11vh;left:0;right:0;text-align:center;padding:0 24px;z-index:2;pointer-events:none}
.onion-eyebrow{color:var(--accent-2);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.onion-title{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1.02;margin-top:10px;color:var(--text)}
.onion-sub{margin:14px auto 0;color:var(--muted);font-size:1.05rem;max-width:520px}
.onion-spacer{height:220vh}
@media (max-width:760px){ .onion-sub{font-size:.95rem} }

/* ═══ Evolution-Sektion: AR-Tracking-HUD ═══ */
.sticky-text{padding-left:clamp(28px,8vw,180px)}   /* Text nicht mehr am linken Rand kleben */
.sticky-visual{perspective:1200px}
.sticky-visual-inner{overflow:hidden;will-change:transform}
.sticky-img{animation:arKen 24s ease-in-out infinite alternate}
@keyframes arKen{from{transform:scale(1.02)}to{transform:scale(1.1)}}

.ar-hud{position:absolute;inset:0;pointer-events:none;z-index:3}
.ar-bracket{position:absolute;width:32px;height:32px;border:2px solid rgba(64,156,255,.85);filter:drop-shadow(0 0 6px rgba(10,132,255,.55))}
.ar-bracket.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.ar-bracket.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.ar-bracket.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.ar-bracket.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.ar-scan{position:absolute;left:0;right:0;height:2px;top:6%;
  background:linear-gradient(90deg,transparent,rgba(120,200,255,.9),transparent);
  box-shadow:0 0 16px 2px rgba(10,132,255,.5);animation:arScan 3.6s ease-in-out infinite}
@keyframes arScan{0%{top:6%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:92%;opacity:0}}
.ar-label{position:absolute;top:18px;left:56px;font-size:.66rem;font-weight:700;letter-spacing:.12em;
  color:#cfe6ff;text-transform:uppercase;display:flex;align-items:center;gap:7px;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.ar-label .ar-dot{width:7px;height:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 8px #39d98a;animation:arBlink 1.3s ease-in-out infinite}
@keyframes arBlink{0%,100%{opacity:1}50%{opacity:.25}}
/* Step-Nummern + aktives Panel */
.sticky-panels{counter-reset:arstep}
.sticky-panel{counter-increment:arstep}
.sticky-panel::before{content:"0" counter(arstep);display:block;font-size:.9rem;font-weight:800;
  letter-spacing:.28em;color:var(--accent-2);margin-bottom:16px;opacity:0;transform:translateY(8px);
  transition:opacity .55s,transform .55s}
.sticky-panel.active::before{opacity:.95;transform:none}

@media (prefers-reduced-motion: reduce){
  .sticky-img,.ar-scan,.ar-label .ar-dot{animation:none}
}
@media (max-width:760px){
  .ar-bracket{width:22px;height:22px}
  .ar-label{font-size:.58rem;left:44px}
}

/* ═══════════ MOBILE-OPTIMIERUNG ═══════════ */
/* Kein Maus-Cursor auf Touch → Custom-Cursor abschalten */
@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none!important}
  .has-custom-cursor,.has-custom-cursor *{cursor:auto!important}
}
@media (max-width:760px){
  /* Kürzere Scroll-Jacks auf dem Handy (sonst endloses Pinnen) */
  .journey-spacer{height:560vh}
  .onion-spacer{height:150vh}
  /* Evolution: 1-Spalte, kein extra Text-Einzug */
  .sticky-text{padding-left:0}
  .sticky-panel h2{font-size:clamp(1.9rem,8vw,2.5rem)}
  .sticky-panel p{font-size:1rem}
  .sticky-panel::before{margin-bottom:10px}
  /* Zwiebel-Sektion */
  .onion-copy{top:8vh}
  .onion-title{font-size:clamp(1.8rem,7vw,2.5rem)}
}
@media (max-width:600px){
  /* Hero: Abstände + Buttons über volle Breite */
  .hero{padding:84px 18px 92px}
  .hero-ctas{width:100%;gap:10px}
  .hero-pill,.hero-pill-ghost{flex:1 1 0;justify-content:center;text-align:center}
  .hero-stats{flex-wrap:wrap;gap:14px 20px}
  /* Kein horizontales Scrollen durch überstehende Elemente */
  body{overflow-x:hidden}
}