// Home — immersive, Baroque-led homepage. Real imagery; all copy via `t`. // Kantor leads; an authentic portrait+quote replaces the old floating text; // the Orgelsommer recurs; newsletter + social invite people in; a scripture // verse threads through (Roy is a cantor). const homeNS = window.RoyHeyneDesignSystem_df1161; function Hero({ onNav, t }) { const { Button } = homeNS; const I = window.RH_IMG; const roles = t('hero.roles'); // [Kantor, Organist, Cembalist] return (

{(() => { const s = window.RH_slot ? window.RH_slot('home-hero', { src: I.shepherds, imgPosition: 'center 38%' }) : null; const src = s ? s.src : I.shepherds; const op = s && s.imgPosition ? s.imgPosition : 'center 38%'; const zoom = s && s.zoom ? s.zoom : 1; return ( // Das Kopfbild ist das erste, was ein Besucher sieht — hier wäre // `lazy` ein Fehler: der Browser würde mit dem Laden warten, bis er // weiss, dass es sichtbar ist. Vorrang statt Aufschub. ); })()}

{/* Mobil: Text spannt über die volle Breite in die helle Bildzone — der 96°-Scrim verdunkelt nur links. Dieser Layer greift NUR ≤768px und legt die Textzone gleichmäßig dunkel, ohne das Gemälde am Desktop anzutasten (AA bei 390px). */}

{t('hero.eyebrow')}

{/* Name dominates. Padding-bottom contains the descender of "y" so it can never touch the role line, whatever the wrap; margin sets the calm gap. */}

Roy Heyne

{/* Roles — (b) Kantorat quietly first. ONE mean only: warm brass on "Kantor". Uniform separators: identical mid-dots and identical gap around every item, so the zeile reads as composed, not as two mixed systems. Rank is carried solely by brass on the Kantorat; "Organist · Cembalist" stay equal activities. */}

{roles[0]} {roles[1]} {roles[2]}

{/* hero.lead ist eine LISTE von Zeilen — jede Auskunft eine Zeile. Der Umbruch steht damit im Text und nicht in der Komponente; jede Sprache bricht an ihrer eigenen richtigen Stelle, und alle drei haben gleich viele Knoten (Sprach-Parität). */} {(Array.isArray(t('hero.lead')) ? t('hero.lead') : [t('hero.lead')]).map((zeile, i) => ( {i > 0 &&
}{zeile} ))}

{t('hero.caption')}

); } // An authentic portrait + first-person quote, anchored by a scripture verse. function Portrait({ t }) { const { ImagePlate } = homeNS; return (

{/* alignItems:center ist hier paritaetssicher: Zitat (leere Reserve) und Bild (festes Ratio) sind in DE/EN/CZ exakt gleich hoch — kein Springen. */}

{window.RH_ParityText({ as: 'p', lang: t.lang, all: window.RH_ALL('manifest.quote'), style: { marginBottom: 28 }, textStyle: { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 'clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem)', lineHeight: 1.26, color: 'var(--text-strong)', textWrap: 'balance' } })}

); } function UpcomingConcerts({ onNav, t }) { const { ConcertCard, SectionHeading, Button, Badge } = homeNS; const osAll = window.RH_DATA.all.filter(window.RH_istOeffentlich).find((x) => x.id === 'geising-0603'); // Flaggschiff nur zeigen, solange die Saison nicht vorbei ist (sonst rutscht es // automatisch ins Archiv — wie jedes andere Konzert auch). const os = (osAll && window.RH_DATA.concerts.filter(window.RH_istOeffentlich).some((c) => c.id === 'geising-0603')) ? osAll : null; const concerts = window.RH_DATA.concerts.filter(window.RH_istOeffentlich).filter((c) => c.id !== 'geising-0603').slice(0, 3); const nextYear = new Date().getFullYear() + 1; // Eine laufende Saison soll auch als laufend lesen — Zustand aus RH_orgelsommerState(). const osState = window.RH_orgelsommerState ? window.RH_orgelsommerState() : null; const osRunning = !!(osState && osState.phase === 'laeuft'); const osCur = window.RH_ORGELSOMMER_CURRENT; const osWeeks = (window.RH_ORGELSOMMER || []).length; const osLive = osRunning && osCur && osWeeks ? t.f({ de: 'Läuft jetzt · Woche ' + osCur.week + ' von ' + osWeeks, en: 'Running now · week ' + osCur.week + ' of ' + osWeeks, cs: 'Právě probíhá · ' + osCur.week + '. z ' + osWeeks + ' týdnů' }) : ''; const isEmpty = !os && concerts.length === 0; const tick = (pos) => ( ); return (

{/* Flaggschiff — der Geisinger Orgelsommer, aus der eigenen Vollsektion in die Konzerte gefaltet, aber sichtbar erhöht über den Einzelterminen: der echte Stich, das Pressezitat und die Fakten-Chips bleiben. */} {os && (

{/* Das Plakat füllt seinen Rahmen randlos: kein Passepartout, keine Luft ringsum — der Stich reicht bis an die Messing-Kontur. Das Plakat ist fast quadratisch, die Textspalte daneben höher; der Rest der Tafel trägt darum EXAKT das Plakatgelb (#FFF2CD, am Bildrand gemessen). So ist die Tafel gefüllt, ohne den Schriftzug „Orgelsommer“ zu beschneiden — ein Plakat ohne Titel ist keins. */}

Geisinger Orgelsommer — Stich der Ranft-Orgel von 1757

{t('feature.eyebrow')} {osLive && ( )}

{t.f(os.series)}.

{/* Blocksatz in der rechten Spalte: Meta-Zeile und Pressezitat laufen über zwei bis drei Zeilen und franzten rechts stark aus. Mit Silbentrennung (⁠hyphens⁠) statt ohne — Blocksatz ohne Trennung reißt Flüsse in den Satz. Kurze Einzeiler bleiben linksbündig. */}

{t.f(os.recurring)}

{os.press && (

„{t.f(os.press)}“

Roy Heyne · {t.f(os.pressSource)}

)}

{t.f({ de: 'Eintritt frei · Spenden für den Orgelerhalt', en: 'Free admission · donations for the organ’s upkeep', cs: 'Vstup volný · dary na údržbu varhan' })}

)} {/* Weitere Einzeltermine — nur wenn welche da sind */} {concerts.length > 0 && ( {/* Kein vages „Weitere Termine": es sind immer genau die nächsten n — also sagt die Zeile das auch, und zwar zählend aus den echten Daten. */}

{(() => { const n = concerts.length; const w = { de: ['', '', 'zwei', 'drei', 'vier', 'fünf'], en: ['', '', 'two', 'three', 'four', 'five'], cs: ['', '', 'dva', 'tři', 'čtyři', 'pět'] }; if (n === 1) return t.f({ de: 'Der nächste Termin', en: 'The next date', cs: 'Nejbližší termín' }); const z = (l) => w[l][n] || String(n); return t.f({ de: 'Die nächsten ' + z('de') + ' Termine', en: 'The next ' + z('en') + ' dates', cs: 'Nejbližší ' + z('cs') + ' termíny' }); })()}

{concerts.map((c) => (

{ e.preventDefault(); onNav('detail', c.id); }}> String(w[0]).split(' ').pop()).join(' · ') : undefined} instrument={t.f(c.instrument)} status={c.status} statusLabel={t('status.' + c.status)} image={c.image} porthole={c.porthole} portholeZoom={c.portholeZoom} portholePos={c.portholePos} imgPosition={c.imgPosition} zoom={c.zoom} lit={(window.RH_LITURGY && (window.RH_LITURGY.colorForConcert(c) || {}).hex) || undefined} href="#" />

))}

)} {/* Leerzustand: keine kommenden Termine — nie eine leere Sektion, sondern ein ruhiger Verweis ins Archiv und auf die kommende Saison. */} {isEmpty && (

{t.f({ de: 'Die Konzertsaison ' + nextYear + ' wird vorbereitet.', en: 'The ' + nextYear + ' concert season is being prepared.', cs: 'Koncertní sezóna ' + nextYear + ' se připravuje.' })}

{t.f({ de: 'Neue Termine erscheinen hier, sobald sie feststehen. Bis dahin lohnt ein Blick ins Konzertarchiv — mit Aufzeichnungen vergangener Konzerte.', en: 'New dates will appear here as soon as they are confirmed. In the meantime, explore the concert archive — with recordings of past concerts.', cs: 'Nové termíny se zde objeví, jakmile budou potvrzeny. Do té doby nahlédněte do archivu koncertů — se záznamy minulých koncertů.' })}

)} {!isEmpty && (

)}

); } function Teasers({ onNav, t }) { const { Ornament, ImagePlate, Button, SectionHeading } = homeNS; const I = window.RH_IMG; // Triptychon (bewusste, freigegebene Änderung an B1): drei gleichwertige // Bogen-Tafeln — umgesetzt INNERHALB des Marken-Bildtreatments: ImagePlate mit // Passepartout, barockem Rundbogen (arch), Tafel-Nummer und Bildunterschrift; // Button-Komponente als CTA, barocker Schlusspunkt. Randlos = Apple-Ruhe + Luft. const ways = [ { key: 'vita', no: 'I', label: t('teaser.vita_label'), title: t('teaser.vita_title'), text: t('teaser.vita_text'), textKey: 'teaser.vita_text', cta: t('teaser.vita_cta'), img: I.kings, caption: t.f({ de: 'Jessica Zappe · Die Heiligen Drei Könige', en: 'Jessica Zappe · The Three Kings', cs: 'Jessica Zappe · Tři králové' }) }, { key: 'instrumente', no: 'II', label: t('teaser.instr_label'), title: t('teaser.instr_title'), text: t('teaser.instr_text'), textKey: 'teaser.instr_text', cta: t('teaser.instr_cta'), img: I.cembaloFull, caption: t.f({ de: 'Cembalo nach Christian Vater, 1738', en: 'Harpsichord after Christian Vater, 1738', cs: 'Cembalo podle Christiana Vatera, 1738' }) }, { key: 'edition', no: 'III', label: t('interlude.eyebrow'), title: t('interlude.title'), text: t('interlude.text'), textKey: 'interlude.text', cta: t('interlude.cta'), img: I.editionCover, caption: t.f({ de: 'Böhmische Pastorellen · Kamprad, 2023', en: 'Bohemian pastorellas · Kamprad, 2023', cs: 'České pastorely · Kamprad, 2023' }) }, ]; return (

{ways.map((w) => (

{/* Caption website-seitig gerendert (laedt live, unabh. vom ds-Bundle): feste 2-Zeilen-Reserve → alle drei Eyebrows exakt auf einer Hoehe, zugleich sprachparitaetisch (DE/EN/CZ gleich hoch). */}

{w.caption}

{w.no}. {w.label}

{w.title}.

{window.RH_ParityText({ as: 'p', lang: t.lang, all: window.RH_ALL(w.textKey), style: { flex: 1, marginBottom: 24 }, textStyle: { fontSize: 'var(--fs-17)', lineHeight: 1.72, color: 'var(--text-body)' } })}

))}

); } function Newsletter({ t, onNav }) { // Schlanke Anmelde-Zeile im Fußbereich — die frühere Vollsektion mit Bildplatte // wurde reduziert, damit die geistliche Coda (VerseBreak) den Bogen schließt. // Einzeilige Einladung, Double-Opt-in bleibt erhalten. const [email, setEmail] = React.useState(''); const [consent, setConsent] = React.useState(false); const [sent, setSent] = React.useState(false); const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim()); return (

{t('news.eyebrow')}

{t('news.title')}.

{sent ? (

{/* wax-seal check */}

{t('news.sent_title')}

{t('news.sent_body')}

) : (

{ e.preventDefault(); if (emailOk && consent) setSent(true); }}>

setEmail(e.target.value)} placeholder={t('news.placeholder')} style={{ flex: '1 1 240px', minWidth: 0, fontFamily: 'var(--font-ui)', fontSize: 'var(--fs-15)', padding: '12px 16px', background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-sm)', color: 'var(--text-strong)' }} />

{email.trim() && !emailOk && (

{t('news.invalid')}

)} {/* Das Kästchen bleibt 15 px gross — die TREFFERFLÄCHE ist das ganze Label (44 px hoch, Innenabstand statt Aussenabstand), damit der Daumen den Satz trifft, nicht das Quadrat. */} setConsent(e.target.checked)} required style={{ marginTop: 2, accentColor: 'var(--messing)', width: 15, height: 15, flex: 'none' }} /> {t('news.consent')}{' '} { e.preventDefault(); onNav && onNav('datenschutz'); }} style={{ color: 'var(--link)' }}>{t('news.privacy_more')}

)}

); } function VerseBreak({ t }) { return (

); } // Gentle placeholder pad — a soft, slowly-swelling organ-like chord (root, fifth, // octave, tenth) so the "Klang" moment actually SOUNDS before real MP3s exist. // Returns { stop() }. Replaced automatically once a track carries a real `src`. function rhMakePad(root) { try { const AC = window.AudioContext || window.webkitAudioContext; if (!AC) return { stop() {} }; const ctx = new AC(); const master = ctx.createGain(); master.gain.setValueAtTime(0.0001, ctx.currentTime); master.gain.exponentialRampToValueAtTime(0.075, ctx.currentTime + 1.4); const filter = ctx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.value = 1700; filter.connect(master); master.connect(ctx.destination); const freqs = [root, root * 1.5, root * 2, root * 2.5]; const oscs = freqs.map((f, i) => { const o = ctx.createOscillator(); o.type = i % 2 ? 'sine' : 'triangle'; o.frequency.value = f; const g = ctx.createGain(); g.gain.value = 0.9 / (i + 1.5); o.connect(g); g.connect(filter); o.start(); return o; }); return { stop() { try { master.gain.cancelScheduledValues(ctx.currentTime); master.gain.setValueAtTime(master.gain.value, ctx.currentTime); master.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.6); setTimeout(() => { oscs.forEach((o) => { try { o.stop(); } catch (e) {} }); try { ctx.close(); } catch (e) {} }, 700); } catch (e) {} } }; } catch (e) { return { stop() {} }; } } function AudioListen({ t }) { const { SectionHeading } = homeNS; const tracks = (window.RH_AUDIO || []).filter((x) => !x.parked); const [active, setActive] = React.useState(-1); const [prog, setProg] = React.useState(0); const engineRef = React.useRef(null); const rafRef = React.useRef(0); // Für das Springen: der synthetische Antrieb rechnet die Position aus einem // Startzeitpunkt — der muss verschiebbar sein, sonst kann man nicht springen. const startRef = React.useRef(0); const audioRef = React.useRef(null); const totalRef = React.useRef(1); const parseLen = (s) => { const p = String(s || '0:0').split(':').map(Number); return (p[0] * 60) + (p[1] || 0); }; const fmt = (sec) => { sec = Math.max(0, Math.floor(sec)); return Math.floor(sec / 60) + ':' + String(sec % 60).padStart(2, '0'); }; const stopAll = React.useCallback(() => { if (engineRef.current) { try { engineRef.current.stop(); } catch (e) {} engineRef.current = null; } audioRef.current = null; cancelAnimationFrame(rafRef.current); }, []); React.useEffect(() => () => stopAll(), [stopAll]); const play = (i, abPosition) => { if (active === i && abPosition == null) { stopAll(); setActive(-1); setProg(0); return; } stopAll(); const tr = tracks[i]; const total = parseLen(tr.len) || 1; totalRef.current = total; const ab = Math.max(0, Math.min(0.999, abPosition || 0)); startRef.current = performance.now() - ab * total * 1000; setActive(i); setProg(ab); if (tr.src) { const a = new Audio(tr.src); a.currentTime = ab * total; a.play().catch(() => {}); audioRef.current = a; engineRef.current = { stop() { try { a.pause(); } catch (e) {} } }; const tick = () => { const d = a.duration || total; totalRef.current = d; setProg(Math.min(1, (a.currentTime || 0) / d)); if (a.ended) { setActive(-1); setProg(0); return; } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); } else { audioRef.current = null; engineRef.current = rhMakePad(tr.root || 220); const tick = () => { const p = Math.min(1, ((performance.now() - startRef.current) / 1000) / totalRef.current); setProg(p); if (p >= 1) { stopAll(); setActive(-1); setProg(0); return; } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); } }; // Springen. Läuft gerade nichts, beginnt die Wiedergabe an der Stelle — das // ist, was ein Hörer erwartet, wenn er in eine Laufleiste klickt. const springen = (i, p) => { const ziel = Math.max(0, Math.min(1, p)); if (active !== i) { play(i, ziel); return; } if (audioRef.current) { try { audioRef.current.currentTime = ziel * (audioRef.current.duration || totalRef.current); } catch (e) {} } else { startRef.current = performance.now() - ziel * totalRef.current * 1000; } setProg(ziel); }; const feat = tracks[0]; const rest = tracks.slice(1); const featTotal = feat ? parseLen(feat.len) : 0; const featActive = active === 0; // Laufleiste: klicken springt, ziehen schrubbt, Pfeiltasten für die Feinarbeit. const leisteRef = React.useRef(null); const [schrubbt, setSchrubbt] = React.useState(false); const ausPunkt = (e) => { const el = leisteRef.current; if (!el) return; const k = el.getBoundingClientRect(); springen(0, (e.clientX - k.left) / (k.width || 1)); }; const tastenSprung = (e) => { const jetzt = featActive ? prog : 0; const schritt = (e.shiftKey ? 30 : 5) / (featTotal || 1); // 5 s, mit Shift 30 s const ziel = { ArrowLeft: jetzt - schritt, ArrowRight: jetzt + schritt, Home: 0, End: 0.999 }[e.key]; if (ziel == null) { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); play(0); } return; } e.preventDefault(); springen(0, ziel); }; const R = 78, C = 2 * Math.PI * R; // progress ring geometry // Hörproben-Zeilen: der Knopf IST die Uhr. Kein waagerechter Balken, der Platz // frisst — der Ring um den Kreis läuft ab wie ein Zeiger. Gleiche Idee wie beim // Feature-Player oben, nur klein. Geometrie: r so, dass die 1,5-px-Linie innen // liegt (44 px Kreis). const rR = 21.25, rC = 2 * Math.PI * rR; return (

{t('audio.spotify')}

{/* Signature recording — the moment the site sounds. Organ medallion with a progress ring; a real player choreography that works on placeholder audio. */} {feat && (

{t.f({ de: 'Höreindruck', en: 'Listen', cs: 'Poslech' })}

{t.f(feat.title)}

{feat.composer} · {t.f(feat.meta)}

{fmt(featActive ? prog * featTotal : 0)}

{ e.currentTarget.setPointerCapture(e.pointerId); setSchrubbt(true); ausPunkt(e); }} onPointerMove={(e) => { if (schrubbt) ausPunkt(e); }} onPointerUp={(e) => { setSchrubbt(false); try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (x) {} }} onKeyDown={tastenSprung} role="slider" tabIndex={0} aria-label={t.f({ de: 'Abspielposition', en: 'Playback position', cs: 'Pozice přehrávání' })} aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round((featActive ? prog : 0) * 100)} aria-valuetext={fmt((featActive ? prog : 0) * featTotal) + ' / ' + feat.len} style={{ flex: 1, minWidth: 0, position: 'relative', height: 24, display: 'flex', alignItems: 'center', cursor: schrubbt ? 'grabbing' : 'pointer', touchAction: 'none' }}> {/* Die Spur bleibt eine 3-px-Haarlinie wie im übrigen System, die Trefferfläche ist 24 px hoch. Ein 3-px-Ziel wäre auf dem Telefon nicht bedienbar. */}

{feat.len}

{!feat.src && (

{t.f({ de: 'Klangprobe · die vollständige Aufnahme folgt.', en: 'Sound sample · the full recording will follow.', cs: 'Zvuková ukázka · plná nahrávka bude následovat.' })}

)}

)} {rest.length > 0 && (

{rest.map((tr, k) => { const i = k + 1; const isOn = active === i; const total = parseLen(tr.len); return (

{t.f(tr.title)}

{tr.composer} · {t.f(tr.meta)}

{/* Feste Breite: die Zeit wechselt zwischen Länge und Restlauf, ohne die Spalte zu bewegen — in jeder Sprache dieselbe Geometrie. */} {isOn ? fmt(prog * total) : tr.len}

); })}

)}

); } function Kantorat({ t, onNav }) { const { Button, ImagePlate, SectionHeading } = homeNS; return (

{(() => { const s = window.RH_slot ? window.RH_slot('home-atelier', { src: window.RH_IMG.positivRoom, imgPosition: 'center 42%' }) : null; const src = s ? s.src : window.RH_IMG.positivRoom; const op = s && s.imgPosition ? s.imgPosition : 'center 42%'; const zoom = s && s.zoom ? s.zoom : 1; return ( ); })()}

{window.RH_ParityText({ as: 'p', lang: t.lang, style: { marginTop: 22 }, textStyle: { fontFamily: 'var(--font-body)', fontSize: 'clamp(1.05rem, 1rem + 0.4vw, 1.3rem)', lineHeight: 1.75, color: 'rgba(236,230,216,0.88)' }, all: { de: 'In seiner Dresdner Wohnung stehen Cembalo und Orgelpositiv — der Ort täglicher Übung. Hier entstehen die Programme, die er an den historischen Orgeln des Osterzgebirges und Böhmens spielt.', en: 'In his Dresden flat stand the harpsichord and the positive organ — the place of daily practice. Here the programmes take shape that he plays on the historic organs of the Ore Mountains and Bohemia.', cs: 'V jeho drážďanském bytě stojí cembalo a varhanní pozitiv — místo každodenního cvičení. Zde vznikají programy, které pak hraje na historických varhanách Krušnohoří a Čech.' } })}

{t.f({ de: 'Im Dienst der Gemeinde', en: 'In service of the parish', cs: 'Ve službě farnosti' })}

{t.f({ de: 'Als Kantor im Ev.-Luth. Kirchspiel Osterzgebirge - Region Altenberg gestaltet Roy Heyne die Orgel, Chor- und Instrumentalmusik im Gottesdienst und zu musikalischen Veranstaltungen — mit den musikalischen Gruppen der Kantorei Altenberg.', en: 'As cantor of the Ev. Lutheran Parish of Osterzgebirge - Region Altenberg, Roy Heyne shapes the organ, choral and instrumental music in worship and at musical events — with the ensembles of the Kantorei Altenberg.', cs: 'Jako kantor ev.-luter. farnosti Osterzgebirge - Region Altenberg utváří Roy Heyne varhanní, sborovou a instrumentální hudbu při bohoslužbách a hudebních akcích — s hudebními skupinami sboru Kantorei Altenberg.' })}

); } function Home({ onNav, t }) { // Erzählbogen (nach der zweiten Apple-Runde — verdichtet auf acht Sektionen): // Ehrfurcht (Hero) → wann/wo + Flaggschiff-Band Orgelsommer (Konzerte) → JETZT // HÖREN (Klang, Position 3) → den Menschen treffen (Porträt) → das Dresdner // Atelier (Kantorat) → Wegweiser (Vita / Instrumente / Edition) → geistliche Coda // (Vers) → schlanke Newsletter-Anmeldung im Fußbereich. // Der Orgelsommer ist aus der eigenen Vollsektion in die Konzerte gefaltet // (Flaggschiff-Band über den Einzelterminen), der Newsletter auf eine Zeile // reduziert. Reale Tonfolge: D·L·D·L·D·L·D·L — saubere Alternation, kein Klumpen. return (

); } Object.assign(window, { Home, rhMakePad });