// devonNEXT — Extra Sections (Reality-Check, Artefakte, KI-Haltung, Newsletter, Zukunftsbild-Generator, Devon-Narrativ) (function(){ const {useState,useEffect,useRef} = React; const C = window.dnContent; // ──────────────── REALITY-CHECK — Horizontaler Before/After Comparison-Slider // Links: Herausforderungen (Pains, "Alltag"). Rechts: NEXT-Akronym (devonNEXT-Modus). // Drag-Handle in der Mitte. Beim Wischen nach rechts wird der NEXT-Bereich freigelegt; // ganz rechts vollständig sichtbar, ganz links wieder die Herausforderungen. window.DevonRealityCheck = function RealityCheck(){ const R = C.reality; const pains = C.pains || []; const wrapRef = useRef(null); const [pos,setPos] = useState(5); // Startposition: Handle ganz links, Alltag voll sichtbar const dragging = useRef(false); const setFromClientX = (clientX)=>{ const el = wrapRef.current; if(!el) return; const r = el.getBoundingClientRect(); const p = ((clientX - r.left) / r.width) * 100; setPos(Math.max(0, Math.min(100, p))); }; const touchStart = useRef(null); // {x,y} bis Richtung feststeht const onDown = (e)=>{ if(e.touches){ // Touch: Richtung erst bei erster Bewegung entscheiden (vertikales Scrollen zulassen) touchStart.current = {x:e.touches[0].clientX, y:e.touches[0].clientY}; return; } dragging.current = true; e.preventDefault(); setFromClientX(e.clientX); }; const onMove = (e)=>{ if(e.touches){ if(!dragging.current){ if(!touchStart.current) return; const dx = e.touches[0].clientX - touchStart.current.x; const dy = e.touches[0].clientY - touchStart.current.y; if(Math.abs(dx) < 8 && Math.abs(dy) < 8) return; // noch unklar if(Math.abs(dx) > Math.abs(dy)){ dragging.current = true; } // horizontal → Slider else { touchStart.current = null; return; } // vertikal → Seite scrollen } e.preventDefault(); setFromClientX(e.touches[0].clientX); return; } if(!dragging.current) return; setFromClientX(e.clientX); }; const onUp = ()=>{ dragging.current = false; touchStart.current = null; }; useEffect(()=>{ window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); window.addEventListener('touchmove', onMove, {passive:false}); window.addEventListener('touchend', onUp); return ()=>{ window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); window.removeEventListener('touchmove', onMove); window.removeEventListener('touchend', onUp); }; },[]); const onKey = (e)=>{ if(e.key==='ArrowLeft') setPos(p=>Math.max(0,p-5)); if(e.key==='ArrowRight') setPos(p=>Math.min(100,p+5)); if(e.key==='Home') setPos(0); if(e.key==='End') setPos(100); }; return (
{R.eyebrow}

{R.title}

{R.sub.split('Nachher:').map((part,i)=> i===0 ? part.trim() :
Nachher:{part})}

{/* Basisebene: Alltag (immer da, vollflächig) */}
=98}>
Herausforderungen
{pains.slice(0,4).map((p,i)=>(

{p.t}

{p.p}

))}
{/* Overlay: devonNEXT — wird per clip-path von links eingeblendet. Wisch nach rechts → pos steigt → devonNEXT bedeckt mehr Fläche von links. */}
devonNEXT
{(R.axes||[]).slice(0,4).map((a,i)=>(
{a.letter} {a.label}

{a.on.t}

))}
{/* Trennlinie + Handle */}
{/* Handschriftliche Anleitung links neben dem Handle */}
20?" off":"")} aria-hidden="true"> Zieh den Regler
); }; // ──────────────── ARTEFAKTE — 4 neue Kacheln function BackForecastAnim(){ const ref = React.useRef(null); React.useEffect(()=>{ const el = ref.current; if(!el) return; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(reduce) return; // bleibt im sichtbaren Endzustand el.classList.add('arm'); // Startzustand verbergen const io = new IntersectionObserver((es)=>es.forEach(e=>{ if(e.isIntersecting){ el.classList.add('play'); io.disconnect(); } }), {threshold:0.32}); io.observe(el); return ()=>io.disconnect(); },[]); return ( BACKCASTING Vom Ziel zurück. Strategisch geplant. ZIEL Klar definiert. Erfolgreich erreicht. FORECASTING Von heute aus. Unsicher und variabel. ); } function ArtefaktSlider({imgs,name,leadAnim,labels,nextTabs}){ const [i,setI] = useState(0); const ref = React.useRef(null); const hasLead = leadAnim==='backforecast'; const n = imgs.length + (hasLead?1:0); const goTo = (k)=>{ setI((k+n)%n); }; const imgIdx = hasLead ? i-1 : i; const useTabs = labels && labels.length===n; const touch = React.useRef({x:0,active:false}); const onTouchStart = (e)=>{ touch.current={x:e.touches[0].clientX, active:true}; }; const onTouchEnd = (e)=>{ if(!touch.current.active) return; const dx = e.changedTouches[0].clientX - touch.current.x; if(Math.abs(dx)>40){ goTo(i + (dx<0?1:-1)); } touch.current.active=false; }; // Dezenter Tinten-Wisch beim ersten Reinscrollen (nicht bei der Phase-2-Animation) React.useEffect(()=>{ if(hasLead) return; const el = ref.current; if(!el) return; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(reduce) return; el.classList.add('wipe-arm'); const io = new IntersectionObserver((es)=>es.forEach(e=>{ if(e.isIntersecting){ el.classList.add('wipe-go'); io.disconnect(); } }), {threshold:0.4}); io.observe(el); return ()=>io.disconnect(); },[]); return (
{i+1} / {n}
{hasLead && i===0 ?
: {name+'} {!useTabs && !nextTabs && (
{Array.from({length:n}).map((_,k)=>(
)}
{nextTabs ? (
{['N','E','X','T'].map((lab,k)=>( ))}
) : useTabs && (
{labels.map((lab,k)=>( ))}
)}
); } function ArtefaktVisual({kind,img,imgs,anim,name,labels,nextTabs}){ if(imgs && imgs.length) return ; if(anim==='backforecast') return ; if(img) return ; if(kind==='dashboard') return ( OKR 01 72% OKR 02 48% OKR 03 91% ); if(kind==='wertemap') return ( WERTE Mut Fokus Wirkung Respekt ); if(kind==='canvas') return ( 2031 ); return null; } window.DevonArtefakte = function Artefakte(){ const items = C.artefakte || []; return (
Eure Werkzeuge

Was wir mitbringen.
Was bei euch bleibt.

Vier Schlüssel-Ergebnisse, die auf eurer Reise entstehen, vom Zukunftsbild bis zur gelebten Zusammenarbeit. Sie bilden wichtige Stationen unseres Ansatzes ab.

{items.map((a,i)=>(
{a.tag}

{a.t}

{a.p}

))}
); }; // ──────────────── KI-HALTUNG window.DevonKIHaltung = function KIHaltung(){ const K = C.kiHaltung; if(!K) return null; return (
Unsere Haltung

{K.title}

{K.body}

); }; // ──────────────── NEWSLETTER window.DevonNewsletter = function Newsletter(){ const [email,setEmail] = useState(''); const [consent,setConsent] = useState(false); const [done,setDone] = useState(false); const N = C.newsletter || {}; const submit = (e)=>{ e.preventDefault(); if(!email||!consent) return; try { localStorage.setItem('dn_newsletter_v1', JSON.stringify({email, ts:Date.now()})); } catch(e){} setDone(true); }; return (
{N.eyebrow || 'Mini-Kurs · 5 Mails'}

{N.title || 'In fünf Mails zur eigenen Zukunft.'}

{N.sub}

  • 01Warum Menschen ein Bild brauchen, um wirklich zu wollen
  • 02Die Fragen, die eure nächsten fünf Jahre entscheiden
  • 03Euer Tag in der Zukunft, in euren eigenen Worten
  • 04Wie ihr euer Team wirklich mitnehmt
  • 05Vom Zukunftsbild zum ersten Matchplan
{!done ? (
setEmail(e.target.value)} className="nl-input"/>
{N.meta || 'Double-Opt-In · hoher Mehrwert · jederzeit abbestellbar'}
) : (

Bestätigungs-Mail unterwegs.

Wir haben dir eine Bestätigung an {email} geschickt. Klick den Link in der Mail, um zu starten.

)}
); }; // ──────────────── ZUKUNFTSBILD-GENERATOR (4 Fragen, max 150 Wörter, Du-Form) window.DevonFutureVision = function FutureVision({onBook}){ const [form,setForm] = useState({ company:'', // Ausgangspunkt: Wo steht ihr heute? friend:'', // Was ist im vergangenen Jahr passiert? media:'', // Worüber berichten die Medien? feeling:'', // Wie fühlt sich dieser Moment an? email:'', // Kontakt: E-Mail (Pflicht) name:'', // Kontakt: Name (optional) org:'', // Kontakt: Unternehmen (optional) topics:[], // Schwerpunkte (Segment-Chips unter Frage 1) }); const [sent,setSent] = useState(false); const [busy,setBusy] = useState(false); const [err,setErr] = useState(''); const outRef = useRef(null); const btnRef = useRef(null); const stepRef = useRef(null); const firstRef = useRef(true); const [step,setStep] = useState(0); const monthsDE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']; const _now = new Date(); const nowYear = _now.getFullYear(); const futureYear = _now.getFullYear() + 3; const futureLabel = monthsDE[_now.getMonth()] + ' ' + futureYear; const questions = [ {key:'company', n:1, label:'Wer seid ihr, und wo steht ihr heute?', hint:'Was euer Unternehmen ausmacht und was euch gerade beschäftigt.', ph:'z. B. Wir sind ein Familienunternehmen, wachsen stabil, aber das nächste Kapitel ist noch unklar.'}, {key:'friend', n:2, label:'Was könnt ihr jetzt, was '+nowYear+' noch undenkbar war?', hint:'Woran zeigt sich, dass ihr ein anderes Unternehmen geworden seid.', ph:'z. B. Wir beliefern zwei neue Märkte, treffen Entscheidungen in Tagen statt Monaten, und Bewerber kommen von selbst.'}, {key:'media', n:3, label:'Worauf seid ihr besonders stolz?', hint:'Der Moment, die Entscheidung, der Schritt, der alles bewegt hat.', ph:'z. B. Dass wir den Schritt gewagt haben, als alle zur Vorsicht rieten.'}, {key:'feeling', n:4, label:'Wie fühlt sich ein ganz normaler Tag '+futureYear+' an?', hint:'Ihr, euer Team, mitten in dieser Zukunft.', ph:'z. B. Morgens Klarheit statt Hektik, ein Team, das weiß, wohin es will, und Stolz auf das, was wir gebaut haben.'}, ]; const flow = [ {type:'q', qi:0}, {type:'jump'}, {type:'q', qi:1}, {type:'q', qi:2}, {type:'q', qi:3}, {type:'contact'}, ]; const autoGrow = (el)=>{ el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,220)+'px'; }; const TOPICS = ['Wachstum','Nachfolge','KI','Team','Vertrieb']; const toggleTopic = (t)=> setForm(f=>({...f, topics: f.topics.includes(t) ? f.topics.filter(x=>x!==t) : [...f.topics, t]})); const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim()); const canSubmit = form.company.trim() && form.friend.trim() && form.media.trim() && form.feeling.trim() && emailOk; // Fokussiere das Feld bei Schrittwechsel – aber nicht beim ersten Render (kein Auto-Scroll beim Laden) useEffect(()=>{ if(firstRef.current){ firstRef.current=false; return; } const el = stepRef.current && stepRef.current.querySelector('textarea, input'); if(el){ el.focus({preventScroll:true}); if(el.tagName==='TEXTAREA') autoGrow(el); } },[step]); // ── Direktversand-Konfiguration ────────────────────────────────────────── // Trage hier euren kostenlosen Web3Forms Access-Key ein (https://web3forms.com, // „Create Access Key" mit zukunft@devon-next.de). Sobald ein Key hinterlegt ist, // wird das Formular im Hintergrund direkt an euch gesendet – ohne dass sich das // Mailprogramm des Nutzers öffnet. Solange der Key leer ist, greift automatisch // die mailto-Lösung als Fallback. const WEB3FORMS_KEY = ''; const buildSubject = (f)=>'Anfrage Zukunftsbild · '+(f.org.trim()||f.name.trim()||f.email.trim()); const buildPlainBody = (f)=> `Neue Zukunftsbild-Anfrage über die Website 1) WO STEHEN WIR HEUTE? ${f.company.trim()} 2) WAS HAT SICH VERÄNDERT? (Rückblick aus ${futureLabel}) ${f.friend.trim()} 3) WORAUF SIND WIR BESONDERS STOLZ? ${f.media.trim()} 4) WIE FÜHLT SICH DAS AN? ${f.feeling.trim()} — — — — — — — — — — — — — — — — — — — — Kontakt E-Mail: ${f.email.trim()}${f.name.trim()?`\nName: ${f.name.trim()}`:''}${f.org.trim()?`\nUnternehmen: ${f.org.trim()}`:''}${f.topics&&f.topics.length?`\nSchwerpunkte: ${f.topics.join(', ')}`:''}`; const mailtoFallback = (f)=>{ const subj = encodeURIComponent(buildSubject(f)); const body = encodeURIComponent(buildPlainBody(f)); window.location.href = `mailto:zukunft@devon-next.de?subject=${subj}&body=${body}`; }; const finishSent = ()=>{ setSent(true); setTimeout(()=>btnRef.current?.scrollIntoView({behavior:'smooth',block:'center'}),200); }; const submit = async ()=>{ if(!canSubmit || busy) return; const f = form; setErr(''); // Kein Key hinterlegt → mailto-Fallback (öffnet das Mailprogramm) if(!WEB3FORMS_KEY){ mailtoFallback(f); finishSent(); return; } // Direktversand im Hintergrund via Web3Forms 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(f), from_name: f.name.trim() || f.email.trim(), replyto: f.email.trim(), 'E-Mail': f.email.trim(), 'Name': f.name.trim() || '—', 'Unternehmen': f.org.trim() || '—', '1 · Wo steht ihr heute': f.company.trim(), '2 · Was hat sich verändert': f.friend.trim(), '3 · Worauf besonders stolz': f.media.trim(), '4 · Wie fühlt sich das an': f.feeling.trim(), 'Schwerpunkte': (f.topics && f.topics.length) ? f.topics.join(', ') : '—', }), }); const data = await res.json().catch(()=>({})); if(res.ok && data.success){ finishSent(); } else { throw new Error(data.message || 'Senden fehlgeschlagen.'); } } catch(e){ console.error('Zukunftsbild-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); } }; const cur = flow[step]; const total = flow.length; const pct = Math.round((step/(total-1))*100); const plabel = cur.type==='q' ? ('Frage '+questions[cur.qi].n+' von 4') : (cur.type==='jump' ? 'Perspektivwechsel' : 'Fast geschafft'); const canAdv = cur.type==='q' ? !!form[questions[cur.qi].key].trim() : (cur.type==='jump' ? true : emailOk); return (
Zukunftsbild-Demo · Kostenfrei

Euer Zukunftsbild.
Von uns für euch gezeichnet.

Vier Fragen genügen. Wir erstellen daraus eine erste, emotionale Skizze eurer Zukunft und schicken sie euch innerhalb von 24 Stunden persönlich zu.

Denkt größer, als ihr es im Alltag zulasst. Was wäre möglich, wenn nichts scheitern könnte?

Persönlich geprüft, bevor es euch erreicht
Werktags Antwort in 24 Stunden
{plabel} {cur.type==='q' && {questions[cur.qi].n} / 4}
{cur.type==='q' && (
{questions[cur.qi].hint}