feat: Standorte Würzburg/Rüdenau & dynamischer Header (v1.3.0)

- Header wächst beim ersten Eindruck auf 7rem (Logo h-18) und schrumpft beim Scrollen auf 5rem (Logo h-10) — Logo gewinnt oben mehr Praesenz, bleibt beim Lesen aber kompakt - Kontakt-Sektion umstrukturiert: - Direktkontakt (Telefon, E-Mail, Helpdesk) als 3er-Grid - Neue Untersektion „Unsere Standorte" mit zwei Karten - Standorte: Würzburg (Niederlassung, Adresse als TODO-Platzhalter) und Rüdenau (Hauptsitz lt. Handelsregister) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 23:30:35 +02:00
parent 380924ffdb
commit f879f1cda6
5 changed files with 77 additions and 19 deletions
@@ -70,10 +70,10 @@
         ============================================================ -->
    <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex items-center justify-between h-16 lg:h-20">
+            <div class="nav-row flex items-center justify-between">
                <!-- Logo -->
                <a href="#hero" class="flex items-center shrink-0" aria-label="sonith Startseite">
-                    <img src="img/logo-light.svg" alt="sonith" class="h-9 lg:h-10 w-auto">
+                    <img src="img/logo-light.svg" alt="sonith" class="nav-logo w-auto">
                </a>

                <!-- Desktop Menu -->
@@ -357,7 +357,8 @@
                <p class="mt-4 text-ci-gray text-lg">Wir freuen uns auf Ihre Anfrage.</p>
            </div>

-            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+            <!-- Direktkontakt -->
+            <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
                <!-- Telefon -->
                <a href="tel:+4993130699090" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
                    <div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
@@ -380,18 +381,6 @@
                    <p class="text-ci-gray text-sm">mail@sonith.de</p>
                </a>

-                <!-- Adresse -->
-                <div class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30">
-                    <div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
-                        </svg>
-                    </div>
-                    <h3 class="text-sm font-semibold text-white mb-1">Adresse</h3>
-                    <p class="text-ci-gray text-sm">Kleinheubacher Str. 7<br>63924 Rüdenau</p>
-                </div>
-
                <!-- Remote-Support -->
                <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
                    <div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
@@ -403,6 +392,55 @@
                    <p class="text-ci-gray text-sm">Support-Ticket erstellen</p>
                </a>
            </div>
+
+            <!-- Standorte: zweimal in Franken -->
+            <div class="text-center max-w-3xl mx-auto mt-20 mb-10 fade-in">
+                <p class="text-petrol-light font-semibold text-sm tracking-widest uppercase mb-3">Vor Ort</p>
+                <h3 class="text-2xl sm:text-3xl font-bold text-white">Unsere Standorte</h3>
+                <p class="mt-3 text-ci-gray">Zweimal in Franken — kurze Wege zu unseren Kunden.</p>
+            </div>
+
+            <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+                <!-- Standort Wuerzburg -->
+                <div class="contact-card group bg-dark-light rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/60 transition-all duration-300">
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center shrink-0 group-hover:bg-petrol/25 transition-colors">
+                            <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
+                            </svg>
+                        </div>
+                        <div class="text-left">
+                            <p class="text-petrol-light text-xs font-semibold tracking-widest uppercase mb-1">Niederlassung</p>
+                            <h4 class="text-xl font-bold text-white mb-2">Würzburg</h4>
+                            <!-- TODO: Adresse Wuerzburg eintragen -->
+                            <p class="text-ci-gray-light text-sm leading-relaxed">
+                                <span class="italic text-ci-gray">[Straße &amp; Hausnummer]<br>[PLZ Würzburg]</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Standort Ruedenau (Hauptsitz lt. Handelsregister) -->
+                <div class="contact-card group bg-dark-light rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/60 transition-all duration-300">
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center shrink-0 group-hover:bg-petrol/25 transition-colors">
+                            <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
+                            </svg>
+                        </div>
+                        <div class="text-left">
+                            <p class="text-petrol-light text-xs font-semibold tracking-widest uppercase mb-1">Hauptsitz</p>
+                            <h4 class="text-xl font-bold text-white mb-2">Rüdenau</h4>
+                            <p class="text-ci-gray-light text-sm leading-relaxed">
+                                Kleinheubacher Str. 7<br>
+                                63924 Rüdenau
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
        </div>
    </section>

@@ -414,7 +452,7 @@
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
-                    <span class="text-ci-gray/60 text-xs">v1.2.0</span>
+                    <span class="text-ci-gray/60 text-xs">v1.3.0</span>
                </div>
                <div class="flex items-center gap-6">
                    <a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>