From f879f1cda6b4fa545bbe40ea16cc98980852e02e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20H=C3=B6fling?= <d.hoefling@sonith.de>
Date: Mon, 4 May 2026 23:30:35 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Standorte=20W=C3=BCrzburg/R=C3=BCdenau?=
 =?UTF-8?q?=20&=20dynamischer=20Header=20(v1.3.0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 CLAUDE.md        |  2 +-
 css/style.css    | 20 ++++++++++++++
 datenschutz.html |  2 +-
 impressum.html   |  2 +-
 index.html       | 70 +++++++++++++++++++++++++++++++++++++-----------
 5 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 8aa781e..b87c30a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -73,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.
 
 ---
 
-*Zuletzt aktualisiert: Mai 2026 — v1.2.0 (echtes Logo + Team-Mitglieder)*
+*Zuletzt aktualisiert: Mai 2026 — v1.3.0 (Standorte Würzburg/Rüdenau, dynamischer Header)*
diff --git a/css/style.css b/css/style.css
index ea0c664..dc90862 100644
--- a/css/style.css
+++ b/css/style.css
@@ -21,6 +21,26 @@ html {
     box-shadow: 0 1px 0 rgba(6, 115, 145, 0.2);
 }
 
+/* Header schrumpft beim Scrollen: gross & einladend oben, kompakt waehrend des Lesens */
+.nav-row {
+    height: 6rem;
+    transition: height 0.3s ease;
+}
+.nav-logo {
+    height: 3.5rem;
+    transition: height 0.3s ease;
+}
+@media (min-width: 1024px) {
+    .nav-row { height: 7rem; }
+    .nav-logo { height: 4.5rem; }
+}
+#navbar.scrolled .nav-row { height: 4rem; }
+#navbar.scrolled .nav-logo { height: 2.25rem; }
+@media (min-width: 1024px) {
+    #navbar.scrolled .nav-row { height: 5rem; }
+    #navbar.scrolled .nav-logo { height: 2.5rem; }
+}
+
 /* Active nav link */
 .nav-link.active {
     color: #DEDC1E;
diff --git a/datenschutz.html b/datenschutz.html
index 986e6dd..444dcb5 100644
--- a/datenschutz.html
+++ b/datenschutz.html
@@ -208,7 +208,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>
diff --git a/impressum.html b/impressum.html
index 2247b29..d8551cd 100644
--- a/impressum.html
+++ b/impressum.html
@@ -91,7 +91,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-sonith text-sm">Impressum</a>
diff --git a/index.html b/index.html
index 434b2ab..57dd23d 100644
--- a/index.html
+++ b/index.html
@@ -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>