(function () { var root = document.documentElement; try { if (window.__dkfx) return; window.__dkfx = 1; var RM = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches; root.setAttribute('data-js', 'on'); if (!RM) root.setAttribute('data-motion', 'on'); var clamp = function (v) { return Math.min(1, Math.max(0, v)); }; var all = function (sel) { return document.querySelectorAll(sel); }; function tick() { var vh = innerHeight; if (!RM) { var due = []; all('[data-dk-reveal]:not([data-dk-shown])').forEach(function (el) { var r = el.getBoundingClientRect(); if ((r.top < vh * 0.9 && r.bottom > 0) || r.bottom <= 0) due.push(el); }); due.forEach(function (el) { var d = parseInt(el.style.getPropertyValue('--dk-delay'), 10) || 0; el.setAttribute('data-dk-shown', 'in'); setTimeout(function () { el.setAttribute('data-dk-shown', 'done'); }, 1250 + d); }); } all('[data-dk-scrub]').forEach(function (el) { var r = el.getBoundingClientRect(), m = el.getAttribute('data-dk-scrub'), p; if (m === 'pin') p = clamp(-r.top / Math.max(1, r.height - vh)); else if (m === 'enter') p = clamp((vh - r.top) / (vh * 0.85)); else if (m === 'top') p = clamp(-r.top / Math.max(1, r.height)); else p = clamp((vh - r.top) / (vh + r.height)); el.style.setProperty('--p', p.toFixed(4)); var n = +el.getAttribute('data-dk-steps'); if (n) { var i = Math.min(n - 1, Math.floor(p * n * 0.9999)); if (el.getAttribute('data-dk-step') !== String(i)) { el.setAttribute('data-dk-step', i); el.style.setProperty('--step', i); el.querySelectorAll('[data-dk-show]').forEach(function (c) { var on = c.getAttribute('data-dk-show').split(',').indexOf(String(i)) > -1; if (on) c.setAttribute('data-dk-on', ''); else c.removeAttribute('data-dk-on'); }); } } var ws = el.querySelectorAll('[data-dk-word]'); if (ws.length && !RM) { ws.forEach(function (w, j) { w.style.opacity = (0.5 + 0.5 * clamp(p * 1.4 * ws.length - j)).toFixed(3); }); } }); if (!RM) all('[data-dk-par]').forEach(function (el) { var r = el.parentElement.getBoundingClientRect(); var c = (r.top + r.height / 2 - vh / 2) / vh; el.style.transform = 'translate3d(0,' + (c * +el.getAttribute('data-dk-par')).toFixed(1) + 'px,0)'; }); all('[data-dk-stack]').forEach(function (el) { var nx = el.nextElementSibling, f = 0; var cs = getComputedStyle(el); /* Erst wenn die Karte klebt, schiebt sich die nächste über sie. Vorher bliebe kurzer Text sonst schon im Ruhezustand abgeblendet. */ if (nx && nx.hasAttribute('data-dk-stack') && cs.position === 'sticky' && el.getBoundingClientRect().top <= parseFloat(cs.top) + 1) { f = clamp(1 - (nx.getBoundingClientRect().top - el.getBoundingClientRect().top) / (vh * 0.7)); } el.style.setProperty('--f', f.toFixed(4)); }); } /* * Hero der Startseite: Datenpunkte, die sich beim Scrollen zum * Kompass-Signet formen (Entwurf: Startseite.dc.html). Bewusst hier und * nicht als React-Effekt — so zeichnet das Feld ab dem ersten Bild und * nicht erst nach der Hydration, die auf Mobilgeräten Sekunden dauert. * Bei reduzierter Bewegung steht das Feld still und folgt nur dem * Scrollen. */ var hero = null; function heroCheck() { var cv = document.querySelector('[data-dk-hero-canvas]'); if (!cv || (hero && hero.cv === cv)) return; if (hero) hero.stop(); hero = heroStart(cv); } function heroStart(cv) { var sec = cv.closest('section'), ctx = cv.getContext('2d'); if (!sec || !ctx) return null; var COL = ['#5A809B', '#AEC4D5', '#88A6BE', '#CBDAE5'], T = 6.283, pts = []; function add(tx, ty, c, s, needle) { pts.push({ tx: tx, ty: ty, c: c, s: s, needle: !!needle, sx: Math.random(), sy: Math.random(), ph: Math.random() * T, sp: 0.25 + Math.random() * 0.5, d: Math.random(), ox: 0, oy: 0 }); } var i, k, a, n, x, y, hw; for (i = 0; i < 168; i++) { a = i / 168 * T; add(Math.cos(a), Math.sin(a), 0, 1.6); } for (i = 0; i < 72; i++) { a = i / 72 * T; n = i % 6 === 0 ? 4 : 2; for (k = 0; k < n; k++) add(Math.cos(a) * (0.9 - k * 0.03), Math.sin(a) * (0.9 - k * 0.03), i % 18 === 0 ? 0 : 2, 1.25); } for (i = 0; i < 120; i++) { a = i / 120 * T; add(Math.cos(a) * 0.7, Math.sin(a) * 0.7, 3, 1.2); } for (y = -0.56; y <= 0.5601; y += 0.024) { hw = 0.13 * (1 - Math.abs(y) / 0.56); for (x = -hw; x <= hw + 1e-6; x += 0.024) add(x, y, y < 0 ? 0 : 1, 1.6, true); } for (i = 0; i < 260; i++) add(null, null, i % 4, 0.8 + Math.random() * 1.2); var W = 0, H = 0, dpr = 1, mx = -9999, my = -9999, id = 0, t0 = performance.now(); function size() { dpr = Math.min(2, devicePixelRatio || 1); W = cv.clientWidth; H = cv.clientHeight; cv.width = W * dpr; cv.height = H * dpr; } function sm(v) { return v * v * (3 - 2 * v); } function frame(now) { id = requestAnimationFrame(frame); if (!cv.isConnected) { stop(); return; } var r = sec.getBoundingClientRect(), vh = innerHeight; if (r.bottom < 0 || r.top > vh) return; if (cv.clientWidth !== W || cv.clientHeight !== H) size(); var t = RM ? 0 : (now - t0) / 1000; var p = clamp(-r.top / Math.max(1, r.height - vh)); var q = sm(clamp((p - 0.03) / 0.4)), out = sm(clamp((p - 0.5) / 0.4)); var R = Math.min(W * 0.4, H * 0.34) * (1 - out * 0.1); var cx = W / 2, cy = H / 2 + 24 - out * H * 0.03; var rot = (1 - q) * -1.1 + p * 0.45, wob = Math.sin(t * 0.7) * 0.05 * q, fade = 1 - out * 0.5; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); for (var j = 0; j < pts.length; j++) { var o = pts[j], al; var px = o.sx * W + Math.sin(t * o.sp + o.ph) * 16, py = o.sy * H + Math.cos(t * o.sp * 0.8 + o.ph) * 16; if (o.tx !== null) { var qi = sm(clamp(q * 1.45 - o.d * 0.45)), ang = rot + (o.needle ? wob : 0); var c = Math.cos(ang), s = Math.sin(ang); px += (cx + (o.tx * c - o.ty * s) * R - px) * qi; py += (cy + (o.tx * s + o.ty * c) * R - py) * qi; al = (0.36 + 0.64 * qi) * fade; } else al = 0.4 * (1 - q * 0.7) * fade; var dx = px - mx, dy = py - my, d2 = dx * dx + dy * dy, fx = 0, fy = 0; if (d2 < 12100) { var d = Math.sqrt(d2) || 1, f = (1 - d / 110) * 28; fx = dx / d * f; fy = dy / d * f; } o.ox += (fx - o.ox) * 0.12; o.oy += (fy - o.oy) * 0.12; ctx.globalAlpha = al; ctx.fillStyle = COL[o.c]; ctx.beginPath(); ctx.arc(px + o.ox, py + o.oy, o.s, 0, T); ctx.fill(); } ctx.globalAlpha = 1; } function move(e) { var b = cv.getBoundingClientRect(); mx = e.clientX - b.left; my = e.clientY - b.top; } function leave() { mx = -9999; my = -9999; } function stop() { cancelAnimationFrame(id); sec.removeEventListener('pointermove', move); sec.removeEventListener('pointerleave', leave); if (hero && hero.cv === cv) hero = null; } sec.addEventListener('pointermove', move, { passive: true }); sec.addEventListener('pointerleave', leave); size(); id = requestAnimationFrame(frame); return { cv: cv, stop: stop }; } var raf = 0; function req() { if (!raf) raf = requestAnimationFrame(function () { raf = 0; heroCheck(); tick(); }); } /* Springt zu Schritt i einer gepinnten Szene (Listenknöpfe im Walk). */ window.dkGoStep = function (el, i) { if (!el) return; var n = +el.getAttribute('data-dk-steps') || 1, r = el.getBoundingClientRect(); scrollTo({ top: scrollY + r.top + (r.height - innerHeight) * ((i + 0.5) / n), behavior: RM ? 'auto' : 'smooth' }); }; /* * Tastaturfokus in der waagrechten Galerie: Die Galerie verschiebt sich * nur über den Scrollfortschritt. Landet der Fokus auf einer Karte * außerhalb des Bildes, wird die Seite so weit gescrollt, dass die * Galerie sie ins Bild schiebt. */ document.addEventListener('focusin', function (e) { var t = e.target; var track = t && t.closest && t.closest('[data-dk-hscroll]'); if (!track) return; var sec = track.closest('[data-dk-scrub="pin"]'); if (!sec) return; var span = track.scrollWidth - innerWidth; if (span <= 0) return; var tr = t.getBoundingClientRect(); var x = tr.left - track.getBoundingClientRect().left; var p = clamp((x + tr.width / 2 - innerWidth / 2) / span); var r = sec.getBoundingClientRect(); scrollTo({ top: scrollY + r.top + (r.height - innerHeight) * p, behavior: 'auto' }); }); /* * Wie im Entwurf: Das DOM wird vom ersten Moment an beobachtet, nicht * erst ab DOMContentLoaded. Sonst warteten die Reveals im Hero, bis die * Next-Chunks durchgelaufen sind — auf gedrosselten Mobilgeräten * Sekunden, in denen der größte Inhalt der Seite unsichtbar bliebe. */ new MutationObserver(req).observe(root, { childList: true, subtree: true }); req(); function boot() { req(); } addEventListener('scroll', req, { passive: true, capture: true }); addEventListener('resize', req); if (document.readyState !== 'loading') boot(); else document.addEventListener('DOMContentLoaded', boot); setInterval(req, 400); } catch (err) { root.removeAttribute('data-motion'); root.removeAttribute('data-js'); } })();

Impressum