// SiteChrome — top navigation (with DE/EN/CS switcher) + dark footer. // // Kantorszugang: der eine benannte Weg für Roy. Ohne Anmeldung führt er ins // Portal; ist er angemeldet, schaltet derselbe Platz das Bearbeiten der Texte // ein. Bewusst SICHTBAR und benannt — ein versteckter Zugang (früher die // Jahreszahl » 2026 «) war ein Fehler: der Screenreader las » Verwaltung «, // das Auge sah 2026. Und bewusst im Haus-Ton der Fußzeile: Messing-Haarlinie // auf dunklem Grund, dieselbe Schrift, dieselbe Zeilenhöhe wie die // Rechtslinks daneben — ein Knopf, der nicht wie ein Fremdkörper sitzt. // Reads design-system components from the global namespace. const NS = window.RoyHeyneDesignSystem_df1161; // Shared responsive hook — every screen may read it. Mobile = ≤768px. function useIsMobile(bp) { const q = bp || 768; const [m, setM] = React.useState(typeof window !== 'undefined' && window.innerWidth <= q); React.useEffect(() => { const on = () => setM(window.innerWidth <= q); on(); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, [q]); return m; } window.useIsMobile = useIsMobile; function TopNav({ current, onNav, lang, onLang, overDark, t }) { // Apple-schlanke Kopfzeile: DESKTOP zeigt sieben Kernziele — inkl. Mediathek // (trägt den Klang-Moment). Edition lebt im Mobil-Menü und im Footer; nichts // geht verloren. „Meine Claviere“ steht auf ausdrücklichen Wunsch in der Leiste. const all = [ ['start', t('nav.start')], ['konzerte', t('nav.konzerte')], ['orgel', t('nav.orgel')], ['instrumente', t('teaser.instr_label')], ['vita', t('nav.vita')], ['edition', t('nav.edition')], ['media', t('nav.media')], ['kontakt', t('nav.kontakt')], ]; const primaryKeys = ['start', 'konzerte', 'orgel', 'instrumente', 'vita', 'kontakt']; const primary = all.filter(([k]) => primaryKeys.indexOf(k) !== -1); const langs = ['de', 'en', 'cs']; const langName = { de: 'Deutsch', en: 'English', cs: 'Čeština' }; const [scrolled, setScrolled] = React.useState(false); const isMobile = useIsMobile(1000); // sieben schlanke Desktop-Punkte passen ab ~1000 px; darunter Drawer (volle Liste) const [open, setOpen] = React.useState(false); const [hidden, setHidden] = React.useState(false); React.useEffect(() => { let lastY = window.scrollY; const onScroll = () => { const y = window.scrollY; setScrolled(y > 64); // Header fährt beim Runterscrollen weg, beim Hochscrollen (oder oben) zurück // — so verdeckt er den großen Konzert-Titel beim Lesen nie (Apple-Muster). if (y < 80) setHidden(false); else if (y > lastY + 6) setHidden(true); else if (y < lastY - 6) setHidden(false); lastY = y; }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); React.useEffect(() => { setOpen(false); }, [current]); const solid = scrolled || !overDark || (isMobile && open); const linkColor = solid ? 'var(--schiefer)' : 'rgba(236,230,216,0.92)'; const linkActive = solid ? 'var(--tinte)' : 'var(--pergament-text)'; const logoColor = solid ? 'var(--tinte)' : 'var(--pergament-text)'; const go = (key) => { setOpen(false); onNav(key); }; return ( {isMobile && open && (
{langs.map((l) => ( ))}
)} ); } function Kantorszugang({ t }) { const [an, setAn] = React.useState(false); React.useEffect(() => { // Die Textpflege-Schicht sagt, ob Roy angemeldet ist; sie lädt asynchron // (im Netz fragt sie den Server), darum kurz nachfassen statt raten. let tot = 0, laeuft = true; const pruefen = () => { if (!laeuft) return; const T = window.RH_TEXT; const da = !!(T && T.angemeldet && T.angemeldet() && T.bereit && T.bereit()); setAn(da); if (!da && tot++ < 12) setTimeout(pruefen, 400); }; pruefen(); return () => { laeuft = false; }; }, []); // Ein Wort in der Zeile — dieselbe Farbe und Größe wie das Copyright, kein // Rahmen, keine Füllung. Die Trefferfläche bleibt 44 px hoch (Innenabstand, // durch negativen Außenabstand ohne Einfluss auf die Zeilenhöhe). const wort = { color: 'inherit', textDecoration: 'none', cursor: 'pointer', display: 'inline-block', padding: '12px 0', margin: '-12px 0', background: 'none', border: 'none', font: 'inherit', ['--nav-hover']: 'var(--nav-hover-on-dark)' }; if (!an) { return ( {t.f({ de: 'Anmelden', en: 'Sign in', cs: 'Přihlásit se' })} ); } return ( { e.preventDefault(); window.RH_TEXT && window.RH_TEXT.abmelden(); }}> {t.f({ de: 'Abmelden', en: 'Sign out', cs: 'Odhlásit se' })} ); } function SiteFooter({ onNav, t }) { return ( ); } Object.assign(window, { TopNav, SiteFooter });