From 69f69cf172b6ad16e9721f1d47e648b117e1edd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=B6rdle=20Bot?= <bot@hoerdle.local>
Date: Mon, 1 Dec 2025 17:31:55 +0100
Subject: [PATCH] Fix: Zentriere Genre-Navigation in der oberen Navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Vereinfache Flexbox-Struktur für bessere Zentrierung
- LanguageSwitcher bleibt absolut positioniert rechts oben
- Entferne verschachtelte Container die Zentrierung störten
---
 app/[locale]/page.tsx | 111 +++++++++++++++++++++---------------------
 1 file changed, 55 insertions(+), 56 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index fba6928..b0d671d 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -46,65 +46,69 @@ export default async function Home({
     return (
         <>
             <div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6', position: 'relative' }}>
-                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '0.5rem', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
-                    <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
-                        <div className="tooltip">
-                            <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link>
-                            <span className="tooltip-text">{t('globalTooltip')}</span>
-                        </div>
+                {/* Language Switcher - rechts oben */}
+                <div style={{ position: 'absolute', top: '1rem', right: '1rem', zIndex: 10 }}>
+                    <LanguageSwitcher />
+                </div>
+                
+                {/* Zentrierte Navigation */}
+                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center', marginBottom: '0.5rem' }}>
+                    <div className="tooltip">
+                        <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link>
+                        <span className="tooltip-text">{t('globalTooltip')}</span>
+                    </div>
 
-                        {/* Genres */}
-                        {genres.map(g => {
-                            const name = getLocalizedValue(g.name, locale);
-                            const subtitle = getLocalizedValue(g.subtitle, locale);
-                            return (
-                                <div key={g.id} className="tooltip">
-                                    <Link href={`/${name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
-                                        {name}
+                    {/* Genres */}
+                    {genres.map(g => {
+                        const name = getLocalizedValue(g.name, locale);
+                        const subtitle = getLocalizedValue(g.subtitle, locale);
+                        return (
+                            <div key={g.id} className="tooltip">
+                                <Link href={`/${name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
+                                    {name}
+                                </Link>
+                                {subtitle && <span className="tooltip-text">{subtitle}</span>}
+                            </div>
+                        );
+                    })}
+
+                    {/* Separator if both exist */}
+                    {genres.length > 0 && activeSpecials.length > 0 && (
+                        <span style={{ color: '#d1d5db' }}>|</span>
+                    )}
+
+                    {/* Active Specials */}
+                    {activeSpecials.map(s => {
+                        const name = getLocalizedValue(s.name, locale);
+                        const subtitle = getLocalizedValue(s.subtitle, locale);
+                        return (
+                            <div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                                <div className="tooltip">
+                                    <Link
+                                        href={`/special/${name}`}
+                                        style={{
+                                            color: '#be185d', // Pink-700
+                                            textDecoration: 'none',
+                                            fontWeight: '500'
+                                        }}
+                                    >
+                                        ★ {name}
                                     </Link>
                                     {subtitle && <span className="tooltip-text">{subtitle}</span>}
                                 </div>
-                            );
-                        })}
-
-                        {/* Separator if both exist */}
-                        {genres.length > 0 && activeSpecials.length > 0 && (
-                            <span style={{ color: '#d1d5db' }}>|</span>
-                        )}
-
-                        {/* Active Specials */}
-                        {activeSpecials.map(s => {
-                            const name = getLocalizedValue(s.name, locale);
-                            const subtitle = getLocalizedValue(s.subtitle, locale);
-                            return (
-                                <div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                                    <div className="tooltip">
-                                        <Link
-                                            href={`/special/${name}`}
-                                            style={{
-                                                color: '#be185d', // Pink-700
-                                                textDecoration: 'none',
-                                                fontWeight: '500'
-                                            }}
-                                        >
-                                            ★ {name}
-                                        </Link>
-                                        {subtitle && <span className="tooltip-text">{subtitle}</span>}
-                                    </div>
-                                    {s.curator && (
-                                        <span style={{ fontSize: '0.75rem', color: '#666' }}>
-                                            {t('curatedBy')} {s.curator}
-                                        </span>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </div>
+                                {s.curator && (
+                                    <span style={{ fontSize: '0.75rem', color: '#666' }}>
+                                        {t('curatedBy')} {s.curator}
+                                    </span>
+                                )}
+                            </div>
+                        );
+                    })}
                 </div>
                 
                 {/* Upcoming Specials */}
                 {upcomingSpecials.length > 0 && (
-                    <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
+                    <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666', textAlign: 'center' }}>
                         {t('comingSoon')}: {upcomingSpecials.map(s => {
                             const name = getLocalizedValue(s.name, locale);
                             return (
@@ -121,11 +125,6 @@ export default async function Home({
                         })}
                     </div>
                 )}
-                
-                {/* Language Switcher - rechts oben */}
-                <div style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
-                    <LanguageSwitcher />
-                </div>
             </div>
 
             <div id="tour-news">