// devonNEXT — Main App (React)
const {useState,useEffect,useRef,useMemo} = React;
const C = window.dnContent;

// ──────────────── HOOKS
function useReveal(){
  useEffect(()=>{
    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('v');io.unobserve(e.target)}});
    },{threshold:.14,rootMargin:'0px 0px -60px 0px'});
    document.querySelectorAll('.rv').forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  });
}
// Baut für jedes [data-swipe]-Karussell einen Wisch-Indikator (Dots + Hinweis).
// Nur auf Mobile sichtbar (CSS); Dots folgen dem horizontalen Scroll.
function useSwipeRails(){
  useEffect(()=>{
    document.querySelectorAll('[data-swipe]').forEach(rail=>{
      if(rail.dataset.swipeReady) return;
      const n = rail.children.length;
      if(n < 2) return;
      rail.dataset.swipeReady = '1';
      const ind = document.createElement('div'); ind.className='swipe-ind'; ind.setAttribute('aria-hidden','true');
      const dots = document.createElement('div'); dots.className='swipe-dots';
      for(let i=0;i<n;i++){ const s=document.createElement('span'); s.className='swipe-dot'+(i===0?' on':''); dots.appendChild(s); }
      const hint = document.createElement('div'); hint.className='swipe-hint'; hint.textContent='← wischen →';
      ind.appendChild(dots); ind.appendChild(hint);
      rail.parentNode.insertBefore(ind, rail.nextSibling);
      rail.addEventListener('scroll', ()=>{
        const per = rail.scrollWidth / n;
        const a = Math.max(0, Math.min(n-1, Math.round(rail.scrollLeft/per)));
        [...dots.children].forEach((d,i)=>d.classList.toggle('on', i===a));
      }, {passive:true});
    });
  },[]);
}
function useScrollSpy(ids){
  const [active,setActive] = useState(ids[0]);
  useEffect(()=>{
    const onScroll = ()=>{
      const y = window.scrollY + window.innerHeight*0.4;
      let cur = ids[0];
      for(const id of ids){
        const el = document.getElementById(id);
        if(el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll',onScroll,{passive:true});
    return ()=>window.removeEventListener('scroll',onScroll);
  },[ids.join('|')]);
  return active;
}

// ──────────────── THEME TOGGLE (removed — light mode only for go-live)
function ThemeToggle(){ return null; }

// ──────────────── NAV
function TopNav({onBook}){
  const [scrolled,setScrolled] = useState(false);
  const [mobileOpen,setMobileOpen] = useState(false);
  const variant = 'A';
  useEffect(()=>{
    const on = ()=>setScrolled(window.scrollY>30);
    on(); window.addEventListener('scroll',on,{passive:true});
    return ()=>window.removeEventListener('scroll',on);
  },[]);
  useEffect(()=>{
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return ()=>{document.body.style.overflow='';};
  },[mobileOpen]);
  const go = (id)=>{
    setMobileOpen(false);
    setTimeout(()=>document.getElementById(id)?.scrollIntoView({behavior:'smooth',block:'start'}), 50);
  };
  return (
    <>
      <nav className={'top nav-'+variant+(scrolled?' scrolled':'')}>
        <div className="wrap inner">
          <a href="#" className="logo" aria-label="devonNEXT — Startseite">
            <img src="shared/logo-devonnext-header.png?v=2" alt="devonNEXT" className="logo-svg logo-light" decoding="async" fetchpriority="high"/>
            <img src="shared/logo-devonnext-footer.png?v=3" alt="" className="logo-svg logo-dark" decoding="async" aria-hidden="true"/>
          </a>
          <div className="nav-links">
            {C.nav.map(n=><button key={n.id} className={'nav-link'+(n.id==='termin'?' nav-link-cta':'')} onClick={()=>go(n.id)}>{n.label}</button>)}
          </div>
          <div className="nav-actions">
            <button className={'nav-burger'+(mobileOpen?' open':'')} aria-label={mobileOpen?'Menü schließen':'Menü öffnen'} aria-expanded={mobileOpen} onClick={()=>setMobileOpen(o=>!o)}>
              <span/><span/><span/>
            </button>
          </div>
        </div>
      </nav>
      <div className={'mobile-menu'+(mobileOpen?' open':'')} aria-hidden={!mobileOpen}>
        <div className="mobile-menu-inner">
          <div className="mobile-menu-links">
            {C.nav.map(n=><button key={n.id} className="mobile-menu-link" onClick={()=>go(n.id)}>{n.label}<span className="arr">→</span></button>)}
          </div>
          <button className="btn btn-primary btn-lg mobile-menu-cta" onClick={()=>{setMobileOpen(false);setTimeout(onBook,50);}}>Gespräch vereinbaren<span className="arr">→</span></button>
        </div>
      </div>
      <div className={'mobile-menu-scrim'+(mobileOpen?' on':'')} onClick={()=>setMobileOpen(false)} aria-hidden="true"/>
    </>
  );
}

// ──────────────── SIDE RAIL
function SideRail(){
  const ids = C.sections.map(s=>s.id);
  const active = useScrollSpy(ids);
  const [on,setOn] = useState(false);
  useEffect(()=>{
    const h = ()=>setOn(window.scrollY>window.innerHeight*0.6);
    h(); window.addEventListener('scroll',h,{passive:true});
    return ()=>window.removeEventListener('scroll',h);
  },[]);
  return (
    <div className={'rail'+(on?' on':'')}>
      {C.sections.map(s=>(
        <button key={s.id} className={'rail-item'+(active===s.id?' active':'')}
          onClick={()=>document.getElementById(s.id)?.scrollIntoView({behavior:'smooth'})}>
          <span className="dot"/>
          <span className="lbl">{s.label}</span>
        </button>
      ))}
    </div>
  );
}

// ──────────────── PROGRESS (top bar — visible on mobile, also runs on desktop)
function ScrollProgress(){
  const [p,setP] = useState(0);
  useEffect(()=>{
    const on = ()=>{
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max>0 ? (h.scrollTop/max)*100 : 0);
    };
    on(); window.addEventListener('scroll',on,{passive:true});
    return ()=>window.removeEventListener('scroll',on);
  },[]);
  return <div className="prog" aria-hidden="true"><div className="prog-fill" style={{width:p+'%'}}/></div>;
}

// ──────────────── MOBILE SECTION INDICATOR (replaces side-rail on mobile)
function MobileSectionDots(){
  const ids = C.sections.map(s=>s.id);
  const active = useScrollSpy(ids);
  const [on,setOn] = useState(false);
  useEffect(()=>{
    const h = ()=>setOn(window.scrollY>window.innerHeight*0.7);
    h(); window.addEventListener('scroll',h,{passive:true});
    return ()=>window.removeEventListener('scroll',h);
  },[]);
  const i = ids.indexOf(active);
  const label = C.sections[i]?.label || '';
  return (
    <div className={'msec'+(on?' on':'')} aria-hidden="true">
      <span className="msec-i">{String(i+1).padStart(2,'0')}</span>
      <span className="msec-l">{label}</span>
    </div>
  );
}

// ──────────────── HERO — Typewriter-Loop (full sentence types + deletes)
function Typewriter({words, typeSpeed=55, holdSpeed=1800, deleteSpeed=28, holdEmpty=280}){
  // normalize: accept strings or {lead, tail} — keep them separate so we can color the tail
  const norm = words.map(w =>
    typeof w==='string'
      ? {lead:'', tail:w, full:w}
      : {lead:(w.lead||''), tail:(w.tail||''), full:(w.lead||'') + (w.tail||'')}
  );
  const [idx,setIdx] = useState(0);
  const [sub,setSub] = useState('');
  const [mode,setMode] = useState('type');
  useEffect(()=>{
    let t;
    const cur = norm[idx].full;
    if(mode==='type'){
      if(sub.length<cur.length) t=setTimeout(()=>setSub(cur.slice(0,sub.length+1)), typeSpeed);
      else t=setTimeout(()=>setMode('hold'), 30);
    } else if(mode==='hold'){
      t=setTimeout(()=>setMode('delete'), holdSpeed);
    } else {
      if(sub.length>0) t=setTimeout(()=>setSub(cur.slice(0,sub.length-1)), deleteSpeed);
      else t=setTimeout(()=>{ setIdx((idx+1)%norm.length); setMode('type'); }, holdEmpty);
    }
    return ()=>clearTimeout(t);
  },[sub,mode,idx,norm.length,typeSpeed,holdSpeed,deleteSpeed,holdEmpty]);

  // Split current sub into lead-portion and tail-portion based on the current entry's lead length
  const cur = norm[idx];
  const leadShown = sub.slice(0, Math.min(sub.length, cur.lead.length));
  const tailShown = sub.length > cur.lead.length ? sub.slice(cur.lead.length) : '';
  return (
    <>
      <span className="tw-lead">{leadShown}</span>
      <span className="tw-tail">{tailShown}<span className="tw-caret" aria-hidden="true"/></span>
    </>
  );
}

// ──────────────── HERO STAT (staggered reveal + quick count-up)
function HeroStat({raw,label,delay}){
  const m = String(raw).match(/^([\d.]+)(.*)$/);
  const numStr = m ? m[1] : String(raw);
  const suffix = m ? m[2] : '';
  const hasSep = numStr.includes('.');
  const target = parseInt(numStr.replace(/\./g,''),10) || 0;
  const [val,setVal] = useState(0);
  const [shown,setShown] = useState(false);
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current;
    if(!el) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches;
    let done = false;
    const run = ()=>{
      if(done) return; done = true;
      cleanup();
      if(reduce){ setShown(true); setVal(target); return; }
      setTimeout(()=>{
        setShown(true);
        const dur = 900, start = performance.now();
        const tick = (now)=>{
          const t = Math.min(1,(now-start)/dur);
          const eased = 1-Math.pow(1-t,3);
          setVal(target*eased);
          if(t<1) requestAnimationFrame(tick); else setVal(target);
        };
        requestAnimationFrame(tick);
      }, delay);
    };
    const check = ()=>{
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh*0.92 && r.bottom > 0) run();
    };
    const cleanup = ()=>{
      window.removeEventListener('scroll',check);
      window.removeEventListener('resize',check);
    };
    window.addEventListener('scroll',check,{passive:true});
    window.addEventListener('resize',check);
    const raf = requestAnimationFrame(check);
    return ()=>{ cleanup(); cancelAnimationFrame(raf); };
  },[target,delay]);
  const rounded = Math.round(val);
  const display = (hasSep ? rounded.toLocaleString('de-DE') : rounded) + suffix;
  return (
    <div ref={ref} className={'hv2-stat'+(shown?' in':'')}>
      <div className="hv2-n">{display}</div>
      <div className="hv2-l">{label}</div>
    </div>
  );
}

function Hero({onBook}){
  const goMethode = ()=>document.getElementById('methode')?.scrollIntoView({behavior:'smooth'});
  const [slide,setSlide] = React.useState(0);
  React.useEffect(()=>{
    if(window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches) return;
    const id=setInterval(()=>setSlide(s=>s===0?1:0),7000);
    return ()=>clearInterval(id);
  },[]);
  return (
    <>
    <section id="hero" className="hero hero-v3 hero-bleed">
      <div className="hero-bleed-media hero-xfade">
        <picture className={"hero-x hero-x-a"+(slide===0?" on":"")}>
          <source media="(max-width:760px)" srcSet="assets/hero-stephan-mobile-v2.jpg"/>
          <img src="assets/hero-stephan-desktop-v4.jpg" alt="Stephan Westermann von devonNEXT auf der Bühne bei einem Vortrag" className="hero-bleed-img" decoding="async" fetchpriority="high"/>
        </picture>
        <picture className={"hero-x hero-x-b"+(slide===1?" on":"")} aria-hidden="true">
          <source media="(max-width:760px)" srcSet="assets/hero-benjamin-mobile-v3.jpg"/>
          <img src="assets/hero-benjamin-desktop-v5.jpg" alt="" className="hero-bleed-img" decoding="async" loading="lazy"/>
        </picture>
      </div>
      <div className="hero-bleed-scrim" aria-hidden="true"></div>
      <div className="hero-v3-grid hero-bleed-grid">
        <div className="hero-v3-copy">
          <div className="hero-v3-eyebrow">{C.hero.chip}</div>
          {slide===0 ? (
            <React.Fragment key="s0">
              <h1 className="hero-v3-h1 hero-copy-fade">Aus Strategie wird <span className="accent">Zukunftsbild.</span></h1>
              <p className="hero-v3-sub hero-copy-fade">
                Wir übersetzen Strategien in ein emotionales Bild von Zukunft,<br className="sub-br"/> das die Menschen <em>begeistert</em>.
              </p>
            </React.Fragment>
          ) : (
            <React.Fragment key="s1">
              <h1 className="hero-v3-h1 hero-copy-fade">Aus Zukunftsbild wird <span className="accent">Matchplan.</span></h1>
              <p className="hero-v3-sub hero-copy-fade">
                Wir verbinden Strategie mit Umsetzung und<br className="sub-br"/> machen Unternehmen so <em>zukunftsfähig</em>.
              </p>
            </React.Fragment>
          )}
          <div className="hero-v3-cta">
            <button className="btn btn-primary btn-lg" onClick={goMethode}>devonNEXT-Methode entdecken<span className="arr">→</span></button>
          </div>
          <div className="hero-v3-stats">
            {C.hero.stats.map((s,i)=>(
              <HeroStat key={i} raw={s.n} label={s.l} delay={i*220}/>
            ))}
          </div>
        </div>
      </div>
    </section>
    <div className="hero-trust-line">
      <div className="wrap">
        <p>Vertraut von Unternehmen und ihren Führungskräften in Mittelstand, Sport und Industrie.</p>
      </div>
      {(C.clientLogos && C.clientLogos.length>0) && (
        <div className="client-logos" role="group" aria-label="Auswahl unserer Kunden und Partner">
          <div className="client-logos-track">
            {C.clientLogos.concat(C.clientLogos).map((l,i)=>(
              <div className="client-logo-chip" key={i} aria-hidden={i>=C.clientLogos.length ? 'true' : undefined}>
                <img src={l.file} alt={i<C.clientLogos.length ? l.name : ''} loading="eager" decoding="async" style={l.scale ? {'--logo-scale': l.scale} : undefined} className={l.scale ? 'logo-lg' : undefined}/>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
    </>
  );
}

// ──────────────── COUNT-UP
function CountUp({to,suffix='',decimals=0,duration=1400}){
  const [val,setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(()=>{
    const io = new IntersectionObserver(([e])=>{
      if(e.isIntersecting && !started.current){
        started.current = true;
        const start = performance.now();
        const tick = (now)=>{
          const t = Math.min(1,(now-start)/duration);
          const eased = 1-Math.pow(1-t,3);
          setVal(to*eased);
          if(t<1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    },{threshold:.4});
    if(ref.current) io.observe(ref.current);
    return ()=>io.disconnect();
  },[to,duration]);
  const n = decimals ? val.toFixed(decimals) : Math.round(val);
  return <span ref={ref}>{n}{suffix}</span>;
}

// ──────────────── TRUST STRIP
function TrustStrip(){
  return (
    <section className="trust-strip">
      <div className="wrap trust-row">
        <div className="trust-label">Vertraut von Führungsteams in Mittelstand, Sport & Industrie</div>
        <div className="trust-stats">
          <div className="trust-stat"><div className="n"><CountUp to={2387}/></div><div className="l">Jahre Zukunft geschrieben</div></div>
          <div className="trust-stat"><div className="n"><CountUp to={1}/></div><div className="l">devonNEXT<br/>Erfolgs-System</div></div>
          <div className="trust-stat"><div className="n"><CountUp to={500}/>+</div><div className="l">Organisationen beraten</div></div>
        </div>
      </div>
    </section>
  );
}

// ──────────────── METHODE
function Methode(){
  const [idx,setIdx] = useState(0);
  const [switching,setSwitching] = useState(false);
  const [autoOn,setAutoOn] = useState(true);
  const [visible,setVisible] = useState(false);
  const [tabsInView,setTabsInView] = useState(true);
  const DUR = 7000;
  const sectionRef = useRef(null);
  const tabsRef = useRef(null);
  const mphRefs = useRef([]);
  const idxRef = useRef(0);
  const seen = useRef(false);

  // Beim ersten Hineinscrollen: bei Phase 1 starten und Autoplay aktivieren
  useEffect(()=>{
    const el = sectionRef.current; if(!el) return;
    const io = new IntersectionObserver(([e])=>{
      if(e.isIntersecting && !seen.current){ seen.current = true; setIdx(0); setVisible(true); }
    },{threshold:.3});
    io.observe(el);
    return ()=>io.disconnect();
  },[]);

  // Autoplay aussetzen, sobald die Phasen-Leiste nicht mehr im Bild ist
  useEffect(()=>{
    const el = tabsRef.current; if(!el) return;
    const io = new IntersectionObserver(([e])=>{ setTabsInView(e.isIntersecting); },{threshold:.5});
    io.observe(el);
    return ()=>io.disconnect();
  },[]);

  useEffect(()=>{ idxRef.current = idx; },[idx]);

  const go = (n,manual)=>{
    n = (n+4)%4;
    if(n===idx) return;
    if(manual) setAutoOn(false);
    setSwitching(true);
    setTimeout(()=>{setIdx(n);setSwitching(false)},220);
  };

  // Wisch-Geste (mobil): horizontal blättern
  const touchRef = useRef(null);
  const onTouchStart = (e)=>{ touchRef.current = {x:e.touches[0].clientX, y:e.touches[0].clientY}; };
  const onTouchEnd = (e)=>{
    if(!touchRef.current) return;
    const dx = e.changedTouches[0].clientX - touchRef.current.x;
    const dy = e.changedTouches[0].clientY - touchRef.current.y;
    touchRef.current = null;
    if(Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)*1.3){ go(idxRef.current + (dx<0?1:-1), true); }
  };

  // Autoplay: erst nach dem Hineinscrollen, dann alle DUR ms; Klick beendet es; pausiert, wenn Leiste aus dem Bild
  useEffect(()=>{
    if(!autoOn || !visible || !tabsInView) return;
    const id = setInterval(()=>setIdx(i=>(i+1)%4), DUR);
    return ()=>clearInterval(id);
  },[autoOn,visible,tabsInView]);

  const p = C.phases[idx];
  const phaseRamp = ['#0C8079','#0C6463','#134C56','#183E48'];
  const colorVar = phaseRamp[idx] || 'var(--or)';
  return (
    <section id="methode" className="section alt" ref={sectionRef}>
      <div className="wrap">
        <div className="method-head">
          <div className="rv">
            <div className="eye">Die devonNEXT-Methode</div>
            <h2 className="h-lg">Vier Phasen.<br/>Ein System, das wirkt.</h2>
            <p className="lead" style={{marginTop:18,maxWidth:'none'}}>Erst der Nordstern, dann der Plan, dann die Mannschaft, dann das Spielfeld. Wir übertragen die Logik des Spitzensports auf Unternehmen: <strong>ganzheitlich, KI-gestützt und mit dem Menschen im Zentrum</strong>.</p>
          </div>
        </div>
        <div className="phase-flow rv" ref={tabsRef}>
          {[0,1].map(i=>{const ph=C.phases[i];return (
            <React.Fragment key={i}>
            <button className={'phase-tab'+(idx===i?' on':'')+(i<idx?' done':'')+' pi'+i} onClick={()=>go(i,true)}>
              <div className="n">{ph.n}</div>
              <div className="t">{ph.name}</div>
              {idx===i && autoOn && visible && <div key={idx} className="phase-tab-prog"/>}
            </button>
            <span className="phase-chev" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 6 15 12 9 18"/></svg></span>
            </React.Fragment>
          );})}
          <div className="phase-cycle">
            <svg className="phase-cycle-svg" viewBox="0 0 300 150" aria-hidden="true">
              <path className="pc-track" d="M150 75 C 150 18, 58 18, 58 75 C 58 132, 150 132, 150 75 C 150 18, 242 18, 242 75 C 242 132, 150 132, 150 75 Z"/>
              <path className="pc-flow" pathLength="1000" d="M150 75 C 150 18, 58 18, 58 75 C 58 132, 150 132, 150 75 C 150 18, 242 18, 242 75 C 242 132, 150 132, 150 75 Z"/>
            </svg>
            {[2,3].map(i=>{const ph=C.phases[i];return (
              <button key={i} className={'phase-tab phase-cycle-node '+(i===2?'pc-l':'pc-r')+(idx===i?' on':'')+(i<idx?' done':'')+' pi'+i} onClick={()=>go(i,true)}>
                <div className="n">{ph.n}</div>
                <div className="t">{ph.name}</div>
                {idx===i && autoOn && visible && <div key={idx} className="phase-tab-prog"/>}
              </button>
            );})}
          </div>
        </div>
        <div className="phase-panel rv">
          <div className="phase-progress"><div className="phase-progress-fill" style={{width:((idx+1)/4)*100+'%',background:colorVar}}/></div>
          <div className={'phase-body'+(switching?' switching':'')} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
            <div className="phase-left">
              <div className="ph-kicker">{p.tagline}</div>
              <h3>{p.title}</h3>
              {p.body.map((b,i)=><p key={i} className="phase-p-desktop" dangerouslySetInnerHTML={{__html:b}}/>)}
              {p.mobileBody && <p className="phase-p-mobile" dangerouslySetInnerHTML={{__html:p.mobileBody}}/>}
              <div className="phase-meta">
                <span className={'tag tag-'+p.tag.c}>{p.tag.t}</span>
              </div>
            </div>
            <div className="phase-right">
              <div className="lbl">Konkrete Leistungen</div>
              <ul>{p.deliverables.map((d,i)=><li key={i} dangerouslySetInnerHTML={{__html:d}}/>)}</ul>
              <div className="outcome">
                <div className="outcome-lbl">→ Euer Ergebnis</div>
                <p>{p.outcome}</p>
              </div>
            </div>
          </div>
          <div className="phase-nav">
            <button className="phase-btn" disabled={idx===0} onClick={()=>go(Math.max(0,idx-1),true)}>← Zurück</button>
            <div className="phase-dots">
              {C.phases.map((ph,i)=><button key={i} className={'phase-dot'+(idx===i?' on':'')} onClick={()=>go(i,true)} aria-label={'Zu Phase '+(i+1)+' springen: '+ph.name} aria-current={idx===i?'true':undefined}/>)}
            </div>
            <button className="phase-btn" onClick={()=>go(idx+1,true)}>Weiter →</button>
          </div>
        </div>
        <div className="phase-accordion">
          {C.phases.map((ph,i)=>(
            <div key={i} className={'mph pi'+i+(idx===i?' on':'')} ref={el=>{ if(mphRefs.current) mphRefs.current[i]=el; }}>
              <button className="mph-head" onClick={()=>{ const wasOpen=idx===i; go(i,true); if(!wasOpen){ const el=mphRefs.current&&mphRefs.current[i]; if(el){ let ran=false; const doScroll=()=>{ if(ran)return; ran=true; const nav=document.querySelector('nav.top')||document.querySelector('nav'); const navH=nav?nav.getBoundingClientRect().height:90; const y=el.getBoundingClientRect().top+window.scrollY-navH-24; window.scrollTo({top:y,behavior:'smooth'}); }; const panel=el.querySelector('.mph-panel'); if(panel){ panel.addEventListener('transitionend',doScroll,{once:true}); } setTimeout(doScroll,650); } } }} aria-expanded={idx===i}>
                <span className="mph-num">{i+1}</span>
                <span className="mph-lab">
                  <span className="mph-p">{ph.n}</span>
                  <span className="mph-n">{ph.name}</span>
                </span>
                <svg className="mph-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
              </button>
              <div className="mph-panel"><div className="mph-in">
                <div className="mph-tagline">{ph.tagline}</div>
                <p className="mph-body" dangerouslySetInnerHTML={{__html:ph.mobileBody||ph.body[0]}}/>
                <div className="mph-del">
                  <div className="mph-del-h">Konkrete Leistungen</div>
                  <ul>{ph.deliverables.map((d,k)=><li key={k} dangerouslySetInnerHTML={{__html:d}}/>)}</ul>
                </div>
                <div className="mph-out-h">→ Euer Ergebnis</div>
                <div className="mph-out">{ph.outcome}</div>
              </div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────── CASE VIDEO (inline play + overlay expand)
function CaseVideo({src,poster,cues,endAt}){
  const vidRef = React.useRef(null);
  const uidRef = React.useRef('cv'+Math.random().toString(36).slice(2));
  const wrapRef = React.useRef(null);
  const hostRef = React.useRef(null);
  const timeRef = React.useRef(0);
  const resumeRef = React.useRef(false);
  const [playing,setPlaying] = React.useState(false);
  const [started,setStarted] = React.useState(false);
  const [muted,setMuted] = React.useState(false);
  const [progress,setProgress] = React.useState(0);
  const [curTime,setCurTime] = React.useState(0);
  const [expanded,setExpanded] = React.useState(false);
  const expandedRef = React.useRef(false);
  React.useEffect(()=>{ expandedRef.current = expanded; },[expanded]);
  // Nur ein Referenzvideo gleichzeitig: startet ein anderes, pausiert dieses hier.
  React.useEffect(()=>{
    const onOther=(e)=>{
      if(e.detail===uidRef.current) return;
      const v=vidRef.current; if(v && !v.paused){ v.pause(); }
    };
    window.addEventListener('casevid-play', onOther);
    return ()=>window.removeEventListener('casevid-play', onOther);
  },[]);
  React.useEffect(()=>{
    if(!expanded) return;
    const onKey=(e)=>{ if(e.key==='Escape'){ document.body.classList.remove('casevid-zoom'); setExpanded(false); } };
    window.addEventListener('keydown',onKey);
    return ()=>{ window.removeEventListener('keydown',onKey); };
  },[expanded]);
  // Sichtfeld verlassen: pausieren + auf Anfang zurücksetzen (kommt man zurück, startet es von vorne).
  React.useEffect(()=>{
    const el = hostRef.current; if(!el) return;
    const io = new IntersectionObserver(([e])=>{
      if(!e.isIntersecting && !expandedRef.current){
        const v=vidRef.current; if(!v) return;
        v.pause();
        try{ v.currentTime=0; }catch(_){}
        timeRef.current=0; setProgress(0); setCurTime(0); setStarted(false);
      }
    },{threshold:0.25});
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  const togglePlay=()=>{
    const v=vidRef.current; if(!v) return;
    if(v.paused){
      v.muted=false; v.volume=1; setMuted(false); setStarted(true);
      const tryPlay=()=>{ const p=v.play(); if(p&&p.catch) p.catch(()=>{}); };
      tryPlay();
      // preload="none": erster Tap lädt evtl. nur — sobald abspielbar, direkt starten
      if(v.readyState < 3){
        const onReady=()=>{ v.removeEventListener('canplay', onReady); if(v.paused) tryPlay(); };
        v.addEventListener('canplay', onReady, {once:true});
        try{ v.load(); }catch(_){}
      }
    }
    else { v.pause(); }
  };
  const toggleSound=()=>{
    const v=vidRef.current; if(!v) return;
    if(v.muted){ v.muted=false; v.volume=1; setMuted(false); } else { v.muted=true; setMuted(true); }
    if(v.paused){ setStarted(true); const p=v.play(); if(p&&p.catch)p.catch(()=>{}); }
  };
  const expand=()=>{
    const v=vidRef.current; if(!v) return;
    setStarted(true);
    if(expanded){
      document.body.classList.remove('casevid-zoom');
      setExpanded(false); return;
    }
    // Sofortiges In-Page-Vollbild (kein Remount, keine native Fullscreen-Zoom-Animation):
    // faux-full schaltet das Panel direkt auf 100vw/100vh, body-Klasse neutralisiert transformierte Vorfahren.
    document.body.classList.add('casevid-zoom');
    setExpanded(true);
  };
  const cue = (started && muted && cues) ? cues.find(c=>curTime>=c.s && curTime<c.e) : null;
  const player = (
    <div className={'casevid'+(expanded?' faux-full':'')+(started?' started':'')} ref={wrapRef}>
      <video
        ref={vidRef}
        className="casevid-video"
        src={src}
        poster={poster}
        playsInline preload="metadata"
        onClick={togglePlay}
        onPlay={()=>{ setPlaying(true); try{ window.dispatchEvent(new CustomEvent('casevid-play',{detail:uidRef.current})); }catch(_){} }}
        onPause={()=>setPlaying(false)}
        onEnded={(e)=>{ const v=e.currentTarget; try{ v.currentTime=0; }catch(_){} timeRef.current=0; setProgress(0); setCurTime(0); setPlaying(false); }}
        onTimeUpdate={(e)=>{ const v=e.currentTarget; if(endAt && v.currentTime>=endAt){ v.pause(); try{ v.currentTime=0; }catch(_){} timeRef.current=0; setProgress(0); setCurTime(0); setPlaying(false); return; } timeRef.current=v.currentTime; setCurTime(v.currentTime); const dur=endAt||v.duration; if(dur) setProgress(v.currentTime/dur); }}
        onLoadedData={(e)=>{ const v=e.currentTarget; if(timeRef.current>0){ try{ v.currentTime=timeRef.current; }catch(_){} } if(resumeRef.current){ resumeRef.current=false; const p=v.play(); if(p&&p.catch)p.catch(()=>{}); } }}
      ></video>
      {cue && <div className="casevid-cap" role="status" aria-live="polite"><span>{cue.t}</span></div>}
      {!playing && (
        <button type="button" className="casevid-play" onClick={togglePlay} aria-label="Video abspielen">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
        </button>
      )}
      <div className="casevid-ctrls">
        <button type="button" className="casevid-mini" onClick={toggleSound} aria-label={muted?'Ton einschalten':'Ton ausschalten'}>
          {muted
            ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
            : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M19 5a9 9 0 0 1 0 14"/></svg>}
        </button>
        <button type="button" className="casevid-mini" onClick={expand} aria-label={expanded?'Schließen':'Vergrößern'}>
          {expanded
            ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"/></svg>
            : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>}
        </button>
      </div>
      <div className="casevid-progress" aria-hidden="true"><span style={{transform:'scaleX('+progress+')'}}></span></div>
    </div>
  );
  // Kein Portal/Remount: dasselbe <video> bleibt erhalten (läuft beim Vergrößern weiter).
  return <div className="casevid-host" ref={hostRef}>{player}</div>;
}

// ──────────────── CASES
function Cases(){
  return (
    <section id="beweise" className="section">
      <div className="wrap">
        <div className="section-head rv">
          <div className="eye">Referenzen</div>
          <h2 className="h-lg">Aus Plänen wurde Bewegung.</h2>
          <p className="ref-sub">Empfohlen von Unternehmen und ihren Führungskräften in Mittelstand, Sport und Industrie.</p>
        </div>
        <div className="case-grid" data-swipe>
          {C.cases.map((c,i)=>(
            <div key={i} className={'case rv rv-d'+((i%3)||1)}>
              <div className="case-img">
                {c.video
                  ? <CaseVideo src={c.video} poster={c.poster||c.img} cues={c.cues} endAt={c.endAt}/>
                  : <img src={c.img} alt={'Referenz '+(c.industry||'')+': '+(c.name||c.title||'')} loading="lazy"/>}
                <div className="badge">{c.badge}</div>
              </div>
              <div className="case-body">
                <div className="ind">{c.industry}</div>
                <h3>{c.title}</h3>
                <div className="quote">»{c.quote}«</div>
                <div className="case-metrics">
                  {c.metrics.map((m,j)=>(
                    <div key={j} className="case-metric">
                      <div className="mn">{m.n}</div>
                      <div className="ml">{m.l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
        <Testimonials/>
      </div>
    </section>
  );
}

function Testimonials(){
  const items=[
    {img:'assets/testimonials/nicolas-free.png', name:'Nicolas Drössler', role:'Buhck Abfallverwertung und Recycling',
      q:'Schnell ein gemeinsames, klares Zukunftsbild und konkrete Schritte zur Umsetzung.',
      full:'Der Workshop war für uns ein guter Startpunkt, um neue Wege im Vertrieb einzuschlagen. Besonders stark war, wie schnell aus unterschiedlichen Perspektiven ein gemeinsames, klares Zukunftsbild entstanden ist. Durch die Backcasting-Methode sind wir dabei nicht bei Ideen stehen geblieben, sondern haben konkrete Schritte für die Umsetzung entwickelt. Der Prozess hatte eine gute Balance aus Struktur und Offenheit. Es gab klare Leitplanken, gleichzeitig aber genug Raum für eigene Gedanken und Diskussionen. Im Vergleich zu klassischen Workshops war das deutlich praxisnäher und greifbarer. Einige Ansätze konnten wir direkt in erste Maßnahmen überführen, zum Beispiel bei der Priorisierung von Themen und in der Abstimmung zwischen Teams. Insgesamt lohnt sich die Teilnahme vor allem dann, wenn man bereit ist, sich einzubringen und offen für neue Perspektiven ist.'},
    {img:'assets/testimonials/mike-free.png', name:'Mike Doerfling', role:'NIYU Event Production',
      q:'Klarheit, Struktur und ein echtes Commitment des gesamten Teams.',
      full:'Stephan hat uns als Trainer durch einen intensiven und strategisch wichtigen Prozess zur Entwicklung unseres Zukunftsbildes begleitet. Dabei hat er es verstanden, mit den richtigen Fragen und gezieltem, kritischem Nachfragen genau die Themen herauszuarbeiten, die für uns als Unternehmen wirklich relevant sind. Besonders beeindruckt hat mich seine Fähigkeit, individuelle Herausforderungen schnell zu erfassen und seine Erfahrung passgenau einzubringen. Er schafft Klarheit, Struktur und gleichzeitig einen offenen Raum für ehrliche Reflexion und strategische Entscheidungen. Ein entscheidender Mehrwert war für uns der Teamprozess: Stephan hat es geschafft, alle Beteiligten aktiv einzubinden und hinter einer gemeinsamen Vision zu vereinen. Das Ergebnis ist nicht nur ein klar formuliertes Zukunftsbild, sondern ein echtes Commitment des gesamten Teams. Ich kann die Zusammenarbeit mit Stephan uneingeschränkt empfehlen.'},
    {img:'assets/testimonials/david-free.png', name:'David Görges', role:'Beyer Görges',
      q:'Kein Standardprogramm, sondern lebendig und individuell auf uns zugeschnitten.',
      full:'Der Zukunftsbild-Workshop hat uns vor allem durch seine klare Struktur überzeugt. Die aufeinander aufbauenden Module führten zu einem Ergebnis, mit dem wir bis heute aktiv arbeiten. Besonders beeindruckt hat mich die Mischung aus Professionalität und unternehmerischer Energie. Es fühlte sich nicht wie ein Standardprogramm an, sondern lebendig und individuell auf uns zugeschnitten. Der Workshop diente vor allem der Schärfung und Fokussierung unserer gemeinsamen Ausrichtung und hat uns als Team klarer in eine Richtung geführt. Ich würde den Zukunftsbild-Workshop sowohl neuen Teams als auch langjährig zusammenarbeitenden Teams empfehlen – entweder, um gemeinsam eine tragfähige Basis zu schaffen, oder um Bestehendes neu zu ordnen und strategisch sinnvoll auszurichten.'},
  ];
  const [i,setI]=useState(0);
  const [paused,setPaused]=useState(false);
  const [expanded,setExpanded]=useState(false);
  const [dir,setDir]=useState(1);
  const [navd,setNavd]=useState(false);
  const spotRef=React.useRef(null);
  const iRef=React.useRef(0);
  const go=(n)=>{ const nn=(n+items.length)%items.length; setNavd(true); setDir(nn>i || (i===items.length-1 && nn===0) ? 1 : -1); setExpanded(false); setI(nn); };
  const toggleExpand=()=>{
    const willClose = expanded;
    setExpanded(!expanded);
    if(willClose){
      requestAnimationFrame(()=>requestAnimationFrame(()=>{
        const el=spotRef.current; if(!el) return;
        const y=el.getBoundingClientRect().top + window.scrollY - 90;
        window.scrollTo({top:Math.max(0,y)});
      }));
    }
  };
  React.useEffect(()=>{ iRef.current=i; },[i]);
  React.useEffect(()=>{
    const el=spotRef.current; if(!el) return;
    let sx=0, sy=0, active=false;
    const onStart=(e)=>{ const t=e.touches[0]; sx=t.clientX; sy=t.clientY; active=true; setPaused(true); };
    const onEnd=(e)=>{
      if(!active) return; active=false;
      const t=e.changedTouches[0];
      const dx=t.clientX-sx, dy=t.clientY-sy;
      if(Math.abs(dx)>35 && Math.abs(dx)>Math.abs(dy)*1.2){ go(iRef.current + (dx<0?1:-1)); }
    };
    el.addEventListener('touchstart', onStart, {passive:true});
    el.addEventListener('touchend', onEnd, {passive:true});
    return ()=>{ el.removeEventListener('touchstart', onStart); el.removeEventListener('touchend', onEnd); };
  },[items.length]);
  useEffect(()=>{
    if(paused||expanded) return;
    const id=setInterval(()=>{ setNavd(true); setDir(1); setI(v=>(v+1)%items.length); },5500);
    return ()=>clearInterval(id);
  },[paused,expanded,items.length]);
  const t=items[i];
  return (
    <div className="tmons rv" onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}>
      <div className="tmons-eyebrow">Was Kunden über uns sagen</div>
      <div className="tmon-spot" ref={spotRef} data-dir={navd?dir:0}>
        <div className="tmon-stage">
          <div className="tmon-imgwrap">
            {items.map((i2,n)=>(
              <img key={n} src={i2.img} alt={i2.name} className={'tmon-img'+(n===i?' on':'')} loading="lazy" draggable="false"/>
            ))}
          </div>
          <div className="tmon-body">
            {expanded && t.full
              ? <blockquote key={i+'-f'} className="tmon-q tmon-q-full"><span className="tmon-qmark">„</span>{t.full}</blockquote>
              : <blockquote key={i} className="tmon-q"><span className="tmon-qmark">„</span>{t.q}</blockquote>}
            {t.full && (
              <button type="button" className={'tmon-more'+(expanded?' open':'')} onClick={toggleExpand} aria-expanded={expanded}>
                <span className="tmon-more-ic">{expanded?'×':'+'}</span>{expanded?'Weniger anzeigen':'Ganze Stimme lesen'}
              </button>
            )}
            <div className="tmon-name">{t.name}</div>
            <div className="tmon-role">{t.role}</div>
            <div className="tmon-dots">
              {items.map((_,n)=>(
                <button key={n} type="button" className={'tmon-dot'+(n===i?' on':'')} onClick={()=>go(n)} aria-label={'Stimme '+(n+1)}/>
              ))}
            </div>
            <div className="tmon-swipe-hint" aria-hidden="true">‹ wischen ›</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ──────────────── QUOTE BREAK (with parallax)
function QuoteBreak({children,claim,eyebrow,source}){
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current;
    if(!el) return;
    let raf = null;
    const onScroll = ()=>{
      if(raf) return;
      raf = requestAnimationFrame(()=>{
        const r = el.getBoundingClientRect();
        const vh = window.innerHeight;
        // When section is centered in viewport, par=0; offset ±40px at edges
        const progress = (r.top + r.height/2 - vh/2) / vh; // -1..+1
        el.style.setProperty('--par', (progress*40).toFixed(1));
        raf = null;
      });
    };
    onScroll();
    window.addEventListener('scroll',onScroll,{passive:true});
    return ()=>{window.removeEventListener('scroll',onScroll); if(raf) cancelAnimationFrame(raf);};
  },[]);
  return (
    <section className="quote-break rv" ref={ref}>
      <div className="wrap">
        {eyebrow && <div className="qb-eyebrow">{eyebrow}</div>}
        <blockquote>{children}</blockquote>
        {claim && <div className="claim">{claim}</div>}
        {source && <div className="qb-source">{source}</div>}
      </div>
    </section>
  );
}

// ──────────────── VIDEO REVEAL (Kino-Reveal in-page)
function VideoReveal(){
  const secRef = useRef(null);
  const panelRef = useRef(null);
  const vidRef = useRef(null);
  const [muted,setMuted] = useState(true);
  const [revealed,setRevealed] = useState(false);
  const [expanded,setExpanded] = useState(false);
  const [progress,setProgress] = useState(0);
  const [curTime,setCurTime] = useState(0);
  // Untertitel-Cues (nur im Stumm-Modus sichtbar). Zeiten = Schätzung über die 49s-Kürzung,
  // bei Bedarf feinjustieren. Reihenfolge = 5 Segmente aus dem Transkript.
  const cues = [
    {s:6,  e:9,   t:'Ich möchte euch ein Geschenk mitgeben.'},
    {s:9,  e:13,  t:'Ein Zitat, das mir mein Mentor mit auf den Weg gegeben hat:'},
    {s:13, e:18,  t:'„Egal, wie du über die Zukunft denkst – du wirst recht behalten."'},
    {s:20, e:29,  t:'Die Frage ist, wie wir über Unternehmertum, über unsere Möglichkeiten, unsere Energie und unsere Zukunft als Unternehmen denken wollen.'},
    {s:29, e:36,  t:'Und dann überlegen wir uns: Wo würden wir uns hin wünschen, wenn wir sicher sein könnten, dass es nicht scheitert?'},
    {s:37, e:41,  t:'Und dann machen wir einen riesen Sprung. Dann sind wir auf einmal hier.'},
    {s:41, e:46,  t:'„Egal, wie du über die Zukunft denkst – du wirst recht behalten."'},
  ];
  const activeCue = muted ? cues.find(c=>curTime>=c.s && curTime<c.e) : null;
  // Esc schließt den CSS-Vollbild-Fallback
  useEffect(()=>{
    if(!expanded) return;
    const onKey = (e)=>{ if(e.key==='Escape') setExpanded(false); };
    window.addEventListener('keydown', onKey);
    return ()=>window.removeEventListener('keydown', onKey);
  },[expanded]);
  // Beim Hineinscrollen: Panel einblenden + stumm von vorne starten.
  // Beim Verlassen des Sichtfelds: Ton aus, pausieren und auf Anfang zurücksetzen,
  // damit das Video beim erneuten Hineinscrollen wieder von vorne läuft.
  useEffect(()=>{
    const el = secRef.current; if(!el) return;
    const io = new IntersectionObserver(([e])=>{
      const v = vidRef.current;
      if(e.isIntersecting){
        setRevealed(true);
        if(v){
          v.muted = true; setMuted(true);
          try{ v.currentTime = 0; }catch(_){}
          const p = v.play(); if(p&&p.catch) p.catch(()=>{});
        }
      } else {
        if(v){
          v.muted = true; setMuted(true);
          v.pause();
          try{ v.currentTime = 0; }catch(_){}
        }
      }
    },{threshold:0.4});
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  const toggleSound = ()=>{
    const v = vidRef.current; if(!v) return;
    // Version A: Bild läuft immer stumm weiter; Button steuert NUR den Ton.
    if(v.muted){ v.muted=false; v.volume=1; setMuted(false); }
    else { v.muted=true; setMuted(true); }
    const p=v.play(); if(p&&p.catch)p.catch(()=>{});
  };
  const goFull = ()=>{
    const v = vidRef.current; const panel = panelRef.current; if(!v) return;
    // Play-Zustand respektieren: lief das Video, im Vollbild weiterlaufen (+ Ton an);
    // war es pausiert, pausiert lassen (Nutzer startet selbst).
    if(!v.paused){ v.muted=false; v.volume=1; setMuted(false); }
    if(expanded){ setExpanded(false); return; }
    // Echte Fullscreen-API versuchen; bei Blockade (Sandbox/iframe) auf CSS-Vollbild ausweichen.
    const target = panel || v;
    const req = target.requestFullscreen || target.webkitRequestFullscreen || target.msRequestFullscreen;
    if(req){
      try{
        const r = req.call(target);
        if(r && r.catch) r.catch(()=>setExpanded(true));
      }catch(_){ setExpanded(true); }
    } else if(v.webkitEnterFullscreen){
      try{ v.webkitEnterFullscreen(); }catch(_){ setExpanded(true); }
    } else {
      setExpanded(true);
    }
  };
  return (
    <section className="vreveal" ref={secRef} aria-label="Film: Das Zukunftsbild">
      <div className="wrap">
        <div className={"vreveal-panel"+(revealed?" in":"")+(expanded?" faux-full":"")} ref={panelRef}>
          <video
            ref={vidRef}
            className="vreveal-video"
            src="assets/zukunftsbild-film.mp4"
            poster="assets/zukunftsbild-film-poster.png"
            muted loop playsInline preload="metadata"
            onClick={toggleSound}
            onTimeUpdate={(e)=>{ const v=e.currentTarget; setCurTime(v.currentTime); if(v.duration) setProgress(v.currentTime/v.duration); }}
          ></video>
          <div className="vreveal-grad" aria-hidden="true"></div>
          {activeCue && <div className="vreveal-cap" role="status" aria-live="polite"><span>{activeCue.t}</span></div>}
          <button type="button" className="vreveal-state" onClick={toggleSound} aria-label={muted?'Ton einschalten':'Ton ausschalten'}>
            {muted ? (
              <><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg><span>Stumm · läuft</span></>
            ) : (
              <><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M19 5a9 9 0 0 1 0 14"/></svg><span>Ton läuft</span></>
            )}
          </button>
          <div className="vreveal-ctrls">
            <button type="button" className="vreveal-btn" onClick={toggleSound}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/></svg>
              {muted ? 'Ton an' : 'Ton aus'}
            </button>
            <button type="button" className="vreveal-btn" onClick={goFull}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
              {expanded?'Schließen':'Vollbild'}
            </button>
          </div>
          <div className="vreveal-progress" aria-hidden="true"><span style={{transform:'scaleX('+progress+')'}}></span></div>
        </div>
      </div>
    </section>
  );
}

// ──────────────── FOUNDERS
function Founders(){
  return (
    <section id="gruender" className="section alt">
      <div className="wrap">
        <div className="section-head rv">
          <div className="eye">Wer dahintersteht</div>
          <h2 className="h-lg">Jahrzehnte Erfahrung.<br/>Verwurzelt im Sport.<br/>Gebaut für die Wirtschaft.</h2>
          <p>Sport hat uns drei Dinge beigebracht, die wir in jede Begleitung mitbringen: Ergebnisse zählen am Ende der Saison. Ohne Emotion verliert auch die beste Mannschaft. Und Werte sind das, was bleibt, wenn der Druck steigt. Wir-vor-Ich. Sonst gewinnt niemand.</p>
        </div>
        <div className="founders-grid">
          {C.founders.map((f,i)=>(
            <div key={i} className={'founder rv rv-d'+(i+1)}>
              <div className="founder-top">
                <span className={'founder-photo'+(i===1?' is-zoom':'')}><img src={f.photo} alt={'Porträt von '+f.name+', devonNEXT'} loading="lazy"/></span>
                <div>
                  <div className="founder-name">{f.name}
                    <a className="li" href={f.li||'https://linkedin.com'} target="_blank" rel="noopener" aria-label={'LinkedIn-Profil von '+f.name}>
                      <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                    </a>
                  </div>
                  <div className="founder-role">{f.role}</div>
                  <p className="founder-bio">{f.bio}</p>
                </div>
              </div>
              <div className="founder-quote">»{f.quote}«</div>
              <div className="founder-foot">
                {f.stats.map((s,j)=>(
                  <div key={j} className="founder-stat">
                    <div className="k">{s.k}</div>
                    <div className="v">{s.v}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────── KI STANCE
function KiStatements(){
  const items = C.kiStatements;
  const [i,setI] = React.useState(0);
  const [paused,setPaused] = React.useState(false);
  React.useEffect(()=>{
    if(paused) return;
    const id=setInterval(()=>setI(v=>(v+1)%items.length),6000);
    return ()=>clearInterval(id);
  },[paused,items.length]);
  return (
    <div className="ki2-poi" onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}>
      <div className="ki2-poi-row">
        <div className="ki2-poi-num" aria-hidden="true">{String(i+1).padStart(2,'0')}</div>
        <blockquote key={i} className="ki2-poi-q"><span className="ki2-poi-mark">„</span>{items[i]}</blockquote>
      </div>
      <div className="ki2-poi-dots">
        {items.map((_,n)=>(
          <button key={n} type="button" className={'ki2-poi-dot'+(n===i?' on':'')} onClick={()=>setI(n)} aria-label={'Aussage '+(n+1)}/>
        ))}
      </div>
    </div>
  );
}

function Ki(){
  const levelsRef = React.useRef(null);
  React.useEffect(()=>{
    const el=levelsRef.current; if(!el) return;
    const io=new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting){ el.classList.add('run'); io.disconnect(); } });
    },{threshold:0.4});
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  return (
    <section id="ki" className="section dark">
      <div className="wrap ki2">
        <div className="eye ki2-eye">Unsere KI-Haltung</div>
        <h2 className="ki2-claim"><span className="em">KI braucht ein Zielbild.</span><br/>Sonst skaliert man sich nur schneller <span className="ki2-nb">in die falsche Richtung.</span></h2>
        <p className="ki2-lead">Euer Zukunftsbild ist das Fundament. Es macht KI zielgerichtet, in der Strategie wie in der täglichen Umsetzung.</p>

        <div className="ki2-levels rv" ref={levelsRef}>
          {C.kiEbenen.map((e,i)=>(
            <div key={i} className="ki2-level" style={{'--d':(i*0.5)+'s'}}>
              <div className="ki2-level-k">{e.k}</div>
              <div className="ki2-level-t">{e.t}</div>
            </div>
          ))}
        </div>

        <KiStatements/>
        <div className="ki2-slogan">Zukunft bleibt menschlich.</div>
      </div>
    </section>
  );
}

// ──────────────── CONFIG (Angebots-Konfigurator)
function Config({onBook}){
  const phases = C.offer.phases;
  const allItems = useMemo(()=>phases.flatMap(p=>p.items),[]);
  const initialAll = useMemo(()=>{const o={};allItems.forEach(it=>{o[it.id]=true});return o;},[]);
  const [sel,setSel] = useState(initialAll);
  const [openPhase,setOpenPhase] = useState(0);
  const railRef = React.useRef(null);
  const teaserDone = React.useRef(false);
  const userInteract = React.useCallback(()=>{
    teaserDone.current = true;
    if(railRef.current) railRef.current.classList.remove('cfg3-teaser');
  },[]);
  const selectPhase = (pi)=>{ userInteract(); setOpenPhase(pi); };
  React.useEffect(()=>{
    const el = railRef.current; if(!el) return;
    const io = new IntersectionObserver((ents)=>{
      ents.forEach(ent=>{
        if(ent.isIntersecting && !teaserDone.current){
          teaserDone.current = true;
          io.disconnect();
          // Einmaliger schneller Staggered-Aufbau der Phasen (kein Phasenwechsel)
          el.classList.add('cfg3-teaser');
          el.addEventListener('animationend', ()=>{
            el.classList.remove('cfg3-teaser');
          }, {once:true});
        }
      });
    },{threshold:0.5});
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  const toggle = (id)=> { userInteract(); setSel(s=>({...s,[id]:!s[id]})); };
  const allOn = allItems.every(it=>sel[it.id]);
  const noneOn = allItems.every(it=>!sel[it.id]);
  const setAll = (on)=>{ userInteract(); const o={};allItems.forEach(it=>{o[it.id]=on});setSel(o);};

  // ── Auswahl-besprechen-Overlay (E-Mail + Auswahl an devonNEXT) ──
  // Sobald ihr einen Web3Forms-Access-Key hinterlegt, wird die Anfrage inkl. Auswahl
  // direkt im Hintergrund gesendet. Solange der Key leer ist, greift der mailto-Fallback.
  const WEB3FORMS_KEY = '';
  const [showForm,setShowForm] = useState(false);
  const [fEmail,setFEmail] = useState('');
  const [fName,setFName] = useState('');
  const [fOrg,setFOrg] = useState('');
  const [fMsg,setFMsg] = useState('');
  const [fConsent,setFConsent] = useState(false);
  const [busy,setBusy] = useState(false);
  const [sent,setSent] = useState(false);
  const [err,setErr] = useState('');
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(fEmail.trim());
  const canSend = emailOk && fConsent && !busy;

  useEffect(()=>{
    const onKey = (e)=>{ if(e.key==='Escape') setShowForm(false); };
    if(showForm) window.addEventListener('keydown', onKey);
    return ()=>window.removeEventListener('keydown', onKey);
  },[showForm]);

  const selectionLines = ()=>{
    const lines = [];
    phases.forEach(p=>{
      const chosen = p.items.filter(it=>sel[it.id]);
      if(chosen.length){
        lines.push(p.name+':');
        chosen.forEach(it=>lines.push('  • '+it.name+' ('+it.kind+')'));
      }
    });
    return lines;
  };
  const selectionText = ()=>{
    const ls = selectionLines();
    return ls.length ? ls.join('\n') : '(keine Bausteine ausgewählt)';
  };
  const totalSelected = allItems.filter(it=>sel[it.id]).length;

  const buildSubject = ()=>'Angebots-Auswahl · '+(fOrg.trim()||fName.trim()||fEmail.trim());
  const buildBody = ()=>
`Neue Angebots-Auswahl über den Konfigurator

AUSGEWÄHLTE BAUSTEINE (${totalSelected} von ${allItems.length})
${selectionText()}
${fMsg.trim()?`\nNACHRICHT\n${fMsg.trim()}\n`:''}
— — — — — — — — — — — — — — — — — — — —
Kontakt
E-Mail: ${fEmail.trim()}${fName.trim()?`\nName: ${fName.trim()}`:''}${fOrg.trim()?`\nUnternehmen: ${fOrg.trim()}`:''}`;

  const openForm = ()=>{ setSent(false); setErr(''); setShowForm(true); };
  const sendSelection = async ()=>{
    if(!canSend) return;
    setErr('');
    if(!WEB3FORMS_KEY){
      const subj = encodeURIComponent(buildSubject());
      const body = encodeURIComponent(buildBody());
      window.location.href = `mailto:zukunft@devon-next.de?subject=${subj}&body=${body}`;
      setSent(true);
      return;
    }
    setBusy(true);
    try{
      const res = await fetch('https://api.web3forms.com/submit',{
        method:'POST',
        headers:{'Content-Type':'application/json', Accept:'application/json'},
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: buildSubject(),
          from_name: fName.trim() || fEmail.trim(),
          replyto: fEmail.trim(),
          'E-Mail': fEmail.trim(),
          'Name': fName.trim() || '—',
          'Unternehmen': fOrg.trim() || '—',
          'Auswahl': selectionText(),
          'Nachricht': fMsg.trim() || '—',
        }),
      });
      const data = await res.json().catch(()=>({}));
      if(res.ok && data.success){ setSent(true); }
      else { throw new Error(data.message||'Senden fehlgeschlagen.'); }
    }catch(e){
      console.error('Auswahl-Versand:', e);
      setErr('Das Senden hat gerade nicht geklappt. Bitte versuch es noch einmal — oder schreib uns direkt an zukunft@devon-next.de.');
    }finally{ setBusy(false); }
  };
  return (
    <section id="pakete" className="section cfg2-section">
      <div className="wrap">
        <div className="section-head rv">
          <div className="eye">Angebot</div>
          <h2 className="h-lg cfg2-title">Der ganze Weg.<br/>Oder der Schritt, <br className="cfg2-br-desk"/>den ihr jetzt braucht.</h2>
          <p>Stellt eure Auswahl zusammen: Der Gesamtprozess ist vorausgewählt, klappt die Phasen auf und entscheidet, was ihr braucht. Wer den ganzen Weg geht, arbeitet durchgängig KI-gestützt und behält Zugang zu Expertennetzwerk und Academy-Programmen.</p>
        </div>
        <div className="cfg2-bulk rv">
          <button type="button" className={'cfg2-bulk-btn'+(allOn?' is-active':'')} onClick={()=>setAll(true)}>
            <span className="cfg2-bulk-dot" aria-hidden="true"/>Gesamtprozess ausgewählt
          </button>
          <button type="button" className="cfg2-bulk-link" onClick={()=>setAll(false)} disabled={noneOn}>Alles abwählen</button>
        </div>
        <div className="cfg3 rv rv-d2">
          <div className="cfg3-taphint" aria-hidden="true">Phase antippen ↓</div>
          <div className="cfg3-rail" role="tablist" aria-label="Phasen" ref={railRef}>
            {phases.map((p,pi)=>{
              const cnt = p.items.filter(it=>sel[it.id]).length;
              const [phNum, phTerm] = p.name.split(' · ');
              const active = pi===openPhase;
              return (
                <button key={p.id} type="button" role="tab" aria-selected={active}
                  className={'cfg3-node'+(active?' active':'')+(cnt>0?' has-sel':'')}
                  onClick={()=>selectPhase(pi)}>
                  <span className="cfg3-dot">{pi+1}</span>
                  <span className="cfg3-num">{phNum}</span>
                  <span className="cfg3-term">{phTerm}</span>
                  <span className="cfg3-cnt">{cnt}/{p.items.length}</span>
                </button>
              );
            })}
          </div>
          <div className="cfg3-body">
            <div className="cfg3-panel">
              {(()=>{ const p=phases[openPhase]; if(!p) return null;
                return (
                  <>
                    <div className="cfg3-panel-head">
                      <div className="cfg3-panel-name">{p.name}</div>
                      <div className="cfg3-panel-desc" dangerouslySetInnerHTML={{__html:p.desc}}></div>
                    </div>
                    <div className="cfg3-items">
                      {p.items.map(it=>{
                        const on = !!sel[it.id];
                        return (
                          <button key={it.id} type="button" className={'cfg2-item'+(on?' on':'')} onClick={()=>toggle(it.id)} aria-pressed={on}>
                            <span className="cfg2-check" aria-hidden="true">
                              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                            </span>
                            <span className="cfg2-item-body">
                              <span className="cfg2-item-name">{it.name}</span>
                              <span className="cfg2-item-desc">{it.desc}</span>
                            </span>
                            <span className={'cfg2-kind cfg2-kind-'+it.kind}>{it.kind}</span>
                          </button>
                        );
                      })}
                    </div>
                  </>
                );
              })()}
            </div>
            <aside className="cfg3-summary">
              <div className="cfg3-sum-h">Euer Weg</div>
              <div className="cfg3-sum-list">
                {totalSelected===0
                  ? <div className="cfg3-sum-empty">Noch nichts ausgewählt.</div>
                  : phases.map(p=>{
                      const chosen=p.items.filter(it=>sel[it.id]);
                      if(!chosen.length) return null;
                      return (
                        <div key={p.id} className="cfg3-sum-group">
                          <div className="cfg3-sum-ph">{p.name.split(' · ')[0]}</div>
                          {chosen.map(it=><div key={it.id} className="cfg3-sum-item"><span className="d"/>{it.name}</div>)}
                        </div>
                      );
                    })
                }
              </div>
              <button className="btn btn-primary cfg3-sum-cta" onClick={openForm}>Auswahl besprechen<span className="arr">→</span></button>
            </aside>
          </div>
        </div>
      </div>

      {showForm && (
        <div className="wb-overlay" onClick={(e)=>{ if(e.target.classList.contains('wb-overlay')) setShowForm(false); }}>
          <div className="wb-modal cfg2-form-modal" role="dialog" aria-modal="true" aria-label="Auswahl besprechen">
            <button className="wb-close" onClick={()=>setShowForm(false)} aria-label="Schließen">×</button>
            {!sent ? (
              <>
                <div className="wb-badge">Eure Auswahl · {totalSelected} {totalSelected===1?'Baustein':'Bausteine'}</div>
                <h3 className="wb-h">Auswahl besprechen</h3>

                {totalSelected>0 && (
                  <div className="cfg2-form-recap" aria-label="Ausgewählte Bausteine">
                    {phases.map(p=>{
                      const chosen = p.items.filter(it=>sel[it.id]);
                      if(!chosen.length) return null;
                      return (
                        <div key={p.id} className="cfg2-recap-phase">
                          <span className="cfg2-recap-name">{p.name.replace(/^Phase /,'P').replace(' · ',' · ')}</span>
                          <span className="cfg2-recap-items">{chosen.map(it=>it.name).join(' · ')}</span>
                        </div>
                      );
                    })}
                  </div>
                )}

                <form className="wb-form" onSubmit={(e)=>{e.preventDefault(); sendSelection();}}>
                  <label htmlFor="cfg2-email" className="wb-label">E-Mail-Adresse *</label>
                  <input id="cfg2-email" type="email" placeholder="name@unternehmen.de" autoComplete="email" value={fEmail} onChange={(e)=>setFEmail(e.target.value)} autoFocus/>
                  <label htmlFor="cfg2-msg" className="wb-label">Nachricht <span className="cfg2-opt">(optional)</span></label>
                  <textarea id="cfg2-msg" rows="2" placeholder="Name, Unternehmen oder worum es euch konkret geht." value={fMsg} onChange={(e)=>setFMsg(e.target.value)}></textarea>
                  <label className="cfg2-consent">
                    <input type="checkbox" checked={fConsent} onChange={(e)=>setFConsent(e.target.checked)}/>
                    <span>Ich stimme zu, dass devonNEXT meine Angaben zur Bearbeitung der Anfrage verarbeitet. <a href="datenschutz.html" onClick={(e)=>{e.preventDefault();const w=window.open('datenschutz.html','_blank','noopener');if(!w)window.location.href='datenschutz.html';}}>Datenschutz</a> <span className="ds-hint">(neuer Tab)</span></span>
                  </label>
                  {err && <div className="cfg2-form-err">{err}</div>}
                  <button type="submit" className="btn btn-primary" disabled={!canSend} style={{opacity:canSend?1:.45,width:'100%',justifyContent:'center'}}>{busy?'Wird gesendet …':'Auswahl senden'}<span className="arr">→</span></button>
                </form>
                <div className="cfg2-form-alt">
                  Lieber sofort sprechen? <button type="button" className="cfg2-form-altlink" onClick={()=>{ setShowForm(false); onBook && onBook(); }}>Direkt einen Termin buchen →</button>
                </div>
              </>
            ) : (
              <div className="wb-done">
                <span className="wb-done-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
                <h3 className="wb-h">{WEB3FORMS_KEY ? 'Danke, ist angekommen!' : 'Fast geschafft!'}</h3>
                <p className="wb-p">{WEB3FORMS_KEY
                  ? <>Wir schauen uns eure Auswahl an und melden uns innerhalb eines Werktags an <strong>{fEmail.trim()}</strong>.</>
                  : <>Schick die geöffnete E-Mail einfach ab, dann melden wir uns innerhalb eines Werktags an <strong>{fEmail.trim()}</strong>.</>}</p>
                <button className="btn btn-outline" onClick={()=>setShowForm(false)}>Schließen</button>
              </div>
            )}
          </div>
        </div>
      )}
    </section>
  );
}

// ──────────────── BOOKING
function Booking({inline}){
  const BOOKINGS_URL = 'https://bookings.cloud.microsoft/bookwithme/user/e669062a897f4361ab3603593b727895%40devon-sport.de?anonymous&ismsaljsauthenabled=true';
  const [open,setOpen] = useState(false);
  const today = new Date();
  const month = new Date(today.getFullYear(), today.getMonth(), 1);
  const fmtMonth = (d)=>d.toLocaleDateString('de-DE',{month:'long',year:'numeric'});

  // Vorschau-Kalender (rein visuell): aktueller Monat, Mo–So
  const days = (()=>{
    const y=month.getFullYear(), m=month.getMonth();
    const last=new Date(y,m+1,0);
    const startDow=(new Date(y,m,1).getDay()+6)%7;
    const arr=[];
    for(let k=0;k<startDow;k++){ const d=new Date(y,m,-startDow+k+1); arr.push({n:d.getDate(),other:true}); }
    for(let k=1;k<=last.getDate();k++){ const d=new Date(y,m,k); const past=d<new Date(today.getFullYear(),today.getMonth(),today.getDate()); arr.push({n:k,past}); }
    while(arr.length%7){ arr.push({n:arr.length,other:true,fillEnd:true}); }
    return arr;
  })();
  // fillEnd Tage korrekt nummerieren
  let tail=1; days.forEach(d=>{ if(d.fillEnd){ d.n=tail++; } });

  useEffect(()=>{
    const onKey=(e)=>{ if(e.key==='Escape') setOpen(false); };
    if(open){ document.addEventListener('keydown',onKey); document.body.style.overflow='hidden'; }
    return ()=>{ document.removeEventListener('keydown',onKey); document.body.style.overflow=''; };
  },[open]);

  return (
    <section id="termin" className="section alt">
      <div className="wrap">
        <div className="book">
          <div className="book-left">
            <div className="eye">Kennenlernen</div>
            <h2 className="h-lg" style={{marginBottom:16}}>Der erste Schritt ist ein Gespräch.</h2>
            <p>Wir hören zu, stellen die richtigen Fragen und liefern erste Impulse. Am Ende wisst ihr, ob und wie es weitergeht.</p>
            <ul className="book-list">
              <li>Eure Ausgangslage strukturiert verstanden</li>
              <li>Drei konkrete Hebel für die nächsten 90 Tage</li>
              <li>Eine ehrliche Einschätzung, ob wir zusammenpassen</li>
            </ul>
            <a className="book-webinar" href="#" onClick={(e)=>{e.preventDefault();openWebinar();}}>
              <span className="book-webinar-ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 10l4.5-2.5v9L15 14"/><rect x="3" y="6" width="12" height="12" rx="2"/></svg>
              </span>
              <span className="book-webinar-body">
                <span className="book-webinar-k">Oder erst einmal reinhören</span>
                <span className="book-webinar-t">Kostenfreies 60-Min.-Zukunftsbild-Webinar</span>
                <span className="book-webinar-s">Live, in der Gruppe, regelmäßige Termine</span>
              </span>
              <span className="book-webinar-arr" aria-hidden="true">→</span>
            </a>
          </div>
          <div className="book-card book-preview">
            <button type="button" className="bp-cal" onClick={()=>setOpen(true)} aria-label="Termin wählen – Microsoft Bookings öffnen">
              <div className="bp-month">
                <span className="bp-nav" aria-hidden="true">‹</span>
                <span className="bp-m">{fmtMonth(month)}</span>
                <span className="bp-nav" aria-hidden="true">›</span>
              </div>
              <div className="bp-grid">
                {['MO','DI','MI','DO','FR','SA','SO'].map(d=><span key={d} className="bp-dow">{d}</span>)}
                {days.map((x,k)=><span key={k} className={'bp-day'+(x.other?' other':'')+(x.past?' past':'')}>{x.n}</span>)}
              </div>
            </button>
            <button type="button" className="btn btn-primary btn-lg bp-cta" onClick={()=>setOpen(true)}>Termin wählen<span className="arr">→</span></button>
            <div className="bp-foot">Echte Verfügbarkeiten erscheinen im Buchungsfenster.</div>
          </div>
        </div>
      </div>

      {open && (
        <div className="bk-overlay" onClick={()=>setOpen(false)}>
          <div className="bk-modal" onClick={(e)=>e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Termin wählen">
            <div className="bk-modal-head">
              <h3>Termin wählen</h3>
              <button className="bk-close" onClick={()=>setOpen(false)} aria-label="Schließen">×</button>
            </div>
            <p className="bk-sub">Hier öffnet sich Microsoft Bookings mit den echten freien Zeiten.</p>
            <div className="bk-embed">
              <iframe src={BOOKINGS_URL} title="Microsoft Bookings · Termin wählen" loading="lazy"/>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// ──────────────── FAQ
function Faq(){
  const [open,setOpen] = useState(0);
  return (
    <section id="faq" className="section">
      <div className="wrap faq-wrap">
        <div className="section-head rv" style={{textAlign:'center',margin:'0 auto 48px'}}>
          <div className="eye" style={{justifyContent:'center'}}>Häufige Fragen</div>
          <h2 className="h-lg"><span className="faq-h-full">Was Kunden häufig fragen.</span><span className="faq-h-short">Was Kunden fragen.</span></h2>
        </div>
        {C.faqs.map((f,i)=>(
          <div key={i} className={'faq-item'+(open===i?' on':'')}>
            <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
              <span>{f.q}</span>
              <span className="ic">+</span>
            </button>
            <div className="faq-a"><div style={{paddingRight:40}}>{f.a.split('**').map((seg,si)=>si%2===1?<strong key={si}>{seg}</strong>:seg)}</div></div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ──────────────── FINAL CTA
function FinalCta({onBook}){
  return (
    <section className="final">
      <div className="wrap final-in">
        <div className="eye" style={{color:'var(--or)',justifyContent:'center'}}>Jetzt starten</div>
        <h2>Zukunft wird <span className="em">aus Mut</span> gemacht.</h2>
        <div className="cta-row">
          <button className="btn btn-primary btn-lg" onClick={onBook}>Erstgespräch sichern<span className="arr">→</span></button>
          <a href="mailto:zukunft@devon-next.de" className="btn btn-outline btn-lg">Kurz schreiben</a>
        </div>
        <div className="final-re"><a href="mailto:zukunft@devon-next.de">zukunft@devon-next.de</a> · Antwort innerhalb eines Werktags</div>
      </div>
      <div className="final-logo-echo"><img src="shared/logo-devonnext-footer.png?v=3" alt="" aria-hidden="true" decoding="async" loading="lazy"/></div>
    </section>
  );
}

// ──────────────── WEBINAR BAR (dynamisch, erscheint im mittleren Seitenbereich)
// ──────────────── WEBINAR SIGNUP (E-Mail-Erfassung, Overlay)
function openWebinar(){ window.dispatchEvent(new CustomEvent('dn-webinar-open')); }
function WebinarModal(){
  const [open,setOpen] = useState(false);
  const [email,setEmail] = useState('');
  const [sent,setSent] = useState(false);
  // Optional: Hintergrund-Versand (z. B. Web3Forms/Brevo). Leer = mailto-Fallback.
  const SIGNUP_ENDPOINT = '';
  useEffect(()=>{
    const h = ()=>{ setOpen(true); setSent(false); };
    window.addEventListener('dn-webinar-open', h);
    return ()=>window.removeEventListener('dn-webinar-open', h);
  },[]);
  useEffect(()=>{
    const onKey = (e)=>{ if(e.key==='Escape') setOpen(false); };
    if(open) window.addEventListener('keydown', onKey);
    return ()=>window.removeEventListener('keydown', onKey);
  },[open]);
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
  const submit = async (e)=>{
    e.preventDefault();
    if(!emailOk) return;
    if(SIGNUP_ENDPOINT){
      try{ await fetch(SIGNUP_ENDPOINT,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email.trim(),topic:'Zukunftsbild-Webinar'})}); }catch(err){}
    } else {
      const subj = encodeURIComponent('Anmeldung Zukunftsbild-Webinar');
      const body = encodeURIComponent('Bitte informiert mich über den nächsten Termin des kostenfreien Zukunftsbild-Webinars.\n\nE-Mail: '+email.trim());
      window.location.href = `mailto:zukunft@devon-next.de?subject=${subj}&body=${body}`;
    }
    setSent(true);
  };
  if(!open) return null;
  return (
    <div className="wb-overlay" onClick={(e)=>{ if(e.target.classList.contains('wb-overlay')) setOpen(false); }}>
      <div className="wb-modal" role="dialog" aria-modal="true" aria-label="Webinar-Anmeldung">
        <button className="wb-close" onClick={()=>setOpen(false)} aria-label="Schließen">×</button>
        {!sent ? (
          <>
            <div className="wb-badge">60 Min., live, kostenfrei</div>
            <h3 className="wb-h">Zukunftsbild-Webinar</h3>
            <p className="wb-p">Trag deine E-Mail ein, wir informieren dich über den nächsten Termin. Unverbindlich, die Infos kannst du jederzeit abbestellen.</p>
            <form className="wb-form" onSubmit={submit}>
              <label htmlFor="wb-email" className="wb-label">E-Mail-Adresse</label>
              <input id="wb-email" type="email" placeholder="name@unternehmen.de" autoComplete="email" value={email} onChange={(e)=>setEmail(e.target.value)} autoFocus/>
              <button type="submit" className="btn btn-primary wb-submit" disabled={!emailOk} style={{opacity:emailOk?1:.45,width:'100%',justifyContent:'center'}}>Zum Webinar anmelden<span className="arr">→</span></button>
            </form>
            <p className="wb-fine">Mit dem Absenden stimmst du der Verarbeitung deiner E-Mail-Adresse für diesen Zweck zu. <a href="datenschutz.html" onClick={(e)=>{e.preventDefault();const w=window.open('datenschutz.html','_blank','noopener');if(!w)window.location.href='datenschutz.html';}}>Datenschutz</a> <span className="ds-hint">(neuer Tab)</span></p>
          </>
        ) : (
          <div className="wb-done">
            <span className="wb-done-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
            <h3 className="wb-h">Danke!</h3>
            <p className="wb-p">Sobald der nächste Termin steht, schreiben wir dich an, kein Newsletter, nur die Einladung.</p>
            <button className="btn btn-outline" onClick={()=>setOpen(false)}>Schließen</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ──────────────── WEBINAR BAR (dynamisch, erscheint im mittleren Seitenbereich)
function WebinarBar(){
  const [show,setShow] = useState(false);
  const [closed,setClosed] = useState(false);
  useEffect(()=>{
    try{ if(sessionStorage.getItem('dn-webinar-bar')==='closed') { setClosed(true); return; } }catch(e){}
    const start = document.getElementById('zukunftsbild');
    const end = document.getElementById('gruender');
    if(!start) return;
    const onScroll = ()=>{
      const s = start.getBoundingClientRect().top;
      const vh = window.innerHeight;
      // sichtbar, sobald der Demo-/Referenzen-Bereich ins Bild kommt …
      const inStart = s < vh*0.6;
      // … und wieder weg, sobald der Gründer-Abschnitt erreicht ist
      const reachedEnd = end ? end.getBoundingClientRect().top < vh*0.55 : false;
      setShow(inStart && !reachedEnd);
    };
    onScroll();
    window.addEventListener('scroll',onScroll,{passive:true});
    window.addEventListener('resize',onScroll);
    return ()=>{window.removeEventListener('scroll',onScroll);window.removeEventListener('resize',onScroll);};
  },[]);
  const close = ()=>{ setClosed(true); try{sessionStorage.setItem('dn-webinar-bar','closed');}catch(e){} };
  if(closed) return null;
  return (
    <div className={'webinar-bar'+(show?' in':'')} role="complementary" aria-hidden={!show}>
      <span className="webinar-bar-pulse" aria-hidden="true"/>
      <div className="webinar-bar-body">
        <span className="webinar-bar-t"><strong>Zukunftsbild-Webinar</strong> · <span className="hide-mobile">60 Min., live, </span>kostenfrei</span>
      </div>
      <a className="webinar-bar-cta" href="#" onClick={(e)=>{e.preventDefault();openWebinar();}}>Platz sichern<span className="arr">→</span></a>
      <button className="webinar-bar-close" onClick={close} aria-label="Hinweis schließen">×</button>
    </div>
  );
}

// ──────────────── APP
function App(){
  useReveal();
  useSwipeRails();
  const openBook = ()=>document.getElementById('termin')?.scrollIntoView({behavior:'smooth'});
  return (
    <>
      <a href="#methode" className="skip-link">Zum Hauptinhalt springen</a>
      <ScrollProgress/>
      <TopNav onBook={openBook}/>
      <SideRail/>
      <MobileSectionDots/>
      <WebinarBar/>
      <WebinarModal/>
      <Hero onBook={openBook}/>
      {window.DevonRealityCheck && <window.DevonRealityCheck/>}
      <Methode/>
      <QuoteBreak eyebrow="Das Prinzip dahinter" source="Nach Stephen R. Covey · Prinzip der zweimaligen Schöpfung">Alles wird zweimal erschaffen. Zuerst im Kopf als <span className="em">Zukunftsbild</span>, dann in der Realität als <span className="em">Matchplan</span>.</QuoteBreak>
      <VideoReveal/>
      {window.DevonFutureVision && <window.DevonFutureVision onBook={openBook}/>}
      <Cases/>
      {window.DevonArtefakte && <window.DevonArtefakte/>}
      {window.DevonNarrative && <window.DevonNarrative/>}
      <div className="devon-seal-mount" aria-hidden="true">
        <div className="devon-seal-row">
        <div className="devon-seal-badge rv">
          <svg viewBox="0 0 200 200" className="devon-seal-svg">
            <circle cx="100" cy="100" r="100" fill="#0C1C36"></circle>
            <text x="100" y="60" textAnchor="middle" fontFamily="Sora, sans-serif" fontSize="18" fontWeight="600" fill="#ffffff" letterSpacing="0.5">Made with</text>
            <text x="100" y="114" textAnchor="middle" fontFamily="Sora, sans-serif" fontSize="52" fontWeight="800" fill="#0EA396" letterSpacing="-1.5">Mut</text>
            <path d="M26 152 Q63 144 100 151 T174 152" stroke="#0EA396" strokeWidth="2.4" fill="none" opacity="0.9"></path>
            <path d="M26 162 Q63 155 100 161 T174 162" stroke="#1f7d78" strokeWidth="2" fill="none" opacity="0.65"></path>
            <polygon points="92,172 98,172 104,130 98,130" fill="#0EA396"></polygon>
            <polygon points="103,172 109,172 117,118 111,118" fill="#0EA396"></polygon>
            <polygon points="92,172 98,172 103,188 97,188" fill="#0EA396" opacity="0.22"></polygon>
            <polygon points="103,172 109,172 115,188 109,188" fill="#0EA396" opacity="0.22"></polygon>
          </svg>
        </div>
        </div>
      </div>
      <Founders/>
      <Ki/>
      <Config onBook={openBook}/>
      <Booking inline/>
      {window.DevonNewsletter && <window.DevonNewsletter/>}
      <Faq/>
      <FinalCta onBook={openBook}/>
      {window.DevonCookieBanner && <window.DevonCookieBanner/>}
      <footer>
        <div className="wrap footer-grid">
          <div className="footer-brand">
            <div className="footer-logo"><img src="shared/logo-devonnext-footer.png?v=3" alt="devonNEXT" style={{height:'52px',width:'auto'}} loading="lazy" decoding="async"/></div>
            <div className="footer-tagline">Unternehmen zukunftsfähig machen.</div>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <div className="fc-h">Methode</div>
              <a href="#methode">Vier Phasen</a>
              <a href="#pakete">Angebot</a>
              <a href="#beweise">Referenzen</a>
              <a href="#zukunftsbild">Zukunftsbild-Demo</a>
            </div>
            <div className="footer-col">
              <div className="fc-h">Kontakt</div>
              <a href="#termin">Lass uns sprechen</a>
              <a href="mailto:zukunft@devon-next.de">zukunft@devon-next.de</a>
              <a href="https://www.linkedin.com/in/stephan-westermann-devonsport/?isSelfProfile=false" target="_blank" rel="noopener">LinkedIn</a>
            </div>
            <div className="footer-col">
              <div className="fc-h">Rechtliches</div>
              <a href="impressum.html">Impressum</a>
              <a href="datenschutz.html">Datenschutz</a>
            </div>
            <div className="footer-col footer-col-brands">
              <div className="fc-h">Teil der devon Markenwelt</div>
              <a className="fb-item" href="https://devon-sport.de/" target="_blank" rel="noopener">devonSPORT · Beratung für den Sport</a>
              <a className="fb-item" href="#" aria-current="page">devonNEXT · Beratung für die Wirtschaft</a>
              <a className="fb-item" href="https://devon-futuring.de/" target="_blank" rel="noopener">devonFUTURING · Beratung für Privatpersonen</a>
            </div>
          </div>
        </div>
        <div className="wrap footer-bottom">
          <div>© 2026 devonNEXT</div>
          <div className="mwm-mini">
            <svg className="mwm-mini-slash" viewBox="0 0 30 40" aria-hidden="true"><polygon points="4,37 8,37 11,20 7,20"></polygon><polygon points="12,37 16,37 21,4 17,4"></polygon></svg>
            <span>Made with <strong>Mut</strong></span>
          </div>
        </div>
      </footer>
    </>
  );
}

window.DevonApp = App;