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>
feat: echtes Logo, Team-Mitglieder & CI-Quelldateien (v1.2.0)
2026-05-04 23:30:35 +02:00 · 2026-05-04 23:12:17 +02:00
12 changed files with 2379 additions and 60 deletions
@@ -23,12 +23,19 @@ sonith-website/
 ├── js/
 │   └── main.js         # Mobile Menu, Smooth Scroll, Scroll-Spy
 ├── img/
-│   ├── logo.png        # Sonith Logo (wird später ersetzt)
-│   └── team/           # Team-Fotos (Platzhalter SVGs)
+│   ├── logo.svg        # Original-Logo (CI-konform, fuer hellen BG)
+│   └── logo-light.svg  # Helle Variante fuer dunklen BG (auf der Seite verwendet)
+├── src/                # CI-Quelldateien (nicht oeffentlich serven)
+│   ├── Logo und CI Handbuch.pdf
+│   └── logo.svg        # Original-SVG vom Designer
+├── fonts/              # Inter-Font (lokal gehostet, DSGVO-konform)
 ├── .gitignore
 └── README.md
 ```

+**Hinweis:** `src/` enthält interne CI-Quelldateien und sollte vom Webserver
+ausgeschlossen werden (z. B. via Nginx-`location /src { deny all; }`).
+
 ## Farbschema (CI-konform)

 Quelle: `src/Logo und CI Handbuch.pdf` (Sonith UG, Apr 2019).
@@ -66,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.

 ---

-*Zuletzt aktualisiert: Mai 2026 — v1.1.0 (CI-konformes Farbschema)*
+*Zuletzt aktualisiert: Mai 2026 — v1.3.0 (Standorte Würzburg/Rüdenau, dynamischer Header)*
@@ -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;
@@ -5,7 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datenschutz — sonith</title>
    <meta name="robots" content="noindex">
-    <link rel="icon" type="image/png" href="img/logo.png">
+    <link rel="icon" type="image/svg+xml" href="img/logo.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // CI-Farben (Logo & CI Handbuch, Sonith UG)
@@ -32,8 +32,8 @@
    <nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-petrol-dark/30">
        <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">
-                <a href="index.html" class="flex items-center gap-3">
-                    <span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
+                <a href="index.html" class="flex items-center" aria-label="sonith Startseite">
+                    <img src="img/logo-light.svg" alt="sonith" class="h-9 lg:h-10 w-auto">
                </a>
                <a href="index.html" class="text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
            </div>
@@ -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.1.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>
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Helle Variante fuer dunklen Hintergrund: CI-Logo mit aufgehellten Schrift-Grautoenen.
+     Original: src/logo.svg. Aenderungen nur an den Schrift-Fuellfarben:
+       #828585 (CI Pantone 424 C) -> #C8C9CA (CI Pantone Coolgray 5 C)
+       #c7c7ca                    -> #FFFFFF
+     Logo-Gelb #DEDC1C bleibt unveraendert (Hauptakzent). -->
+<svg version="1.1" viewBox="0 0 71.26 40.215" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-61.706 -57.262)">
+  <path class="svg-elem-1" d="m88.165 77.957c0 1.9485-1.5792 3.5278-3.5278 3.5278s-3.5278-1.5792-3.5278-3.5278 1.5792-3.5278 3.5278-3.5278 3.5278 1.5792 3.5278 3.5278" fill="#dedc1c"/>
+  <g fill="none" stroke="#dedc1c" stroke-width=".70556px">
+   <path class="svg-elem-2" d="m89.928 77.959c0 2.9214-2.3688 5.2917-5.2917 5.2917-2.9228 0-5.2917-2.3702-5.2917-5.2917 0-2.9228 2.3688-5.2917 5.2917-5.2917 2.9228 0 5.2917 2.3688 5.2917 5.2917z"/>
+   <path class="svg-elem-3" d="m87.988 73.783 16.111-12.994"/>
+   <path class="svg-elem-4" d="m89.928 77.959 38.336-0.58842"/>
+   <path class="svg-elem-5" d="m79.345 77.959-12.7 0.23427"/>
+   <path class="svg-elem-6" d="m81.697 73.371-9.6421-11.876"/>
+   <path class="svg-elem-7" d="m85.464 83.055 1.4042 9.2094"/>
+  </g>
+  <g>
+   <path class="svg-elem-8" d="m72.053 80.836c0.5705 0.339 1.5448 0.71934 2.4763 0.71934 1.3326 0 1.9678-0.65595 1.9678-1.5241 0-0.88883-0.52917-1.3546-1.8838-1.8617-1.8617-0.67799-2.7299-1.6729-2.7299-2.8994 0-1.6509 1.3546-3.0055 3.5347-3.0055 1.0363 0 1.9472 0.27423 2.497 0.6339l-0.44373 1.3546c-0.40238-0.25356-1.1438-0.61323-2.096-0.61323-1.1011 0-1.6936 0.63528-1.6936 1.3973 0 0.84611 0.59256 1.2265 1.9265 1.7556 1.757 0.65594 2.6886 1.5462 2.6886 3.0703 0 1.819-1.418 3.0896-3.8103 3.0896-1.1217 0-2.1594-0.29628-2.8787-0.71934z" fill="#C8C9CA"/>
+   <path class="svg-elem-9" d="m91.603 75.248c0-1.079-0.02067-1.9251-0.08406-2.7726h1.6509l0.10473 1.6936h0.04272c0.50849-0.95222 1.6936-1.9044 3.3872-1.9044 1.418 0 3.6187 0.84612 3.6187 4.3587v6.0964h-1.8631v-5.9049c0-1.6509-0.61323-3.0276-2.3702-3.0276-1.2058 0-2.158 0.86816-2.497 1.9058-0.08544 0.23289-0.12678 0.54984-0.12678 0.86679v6.1598h-1.8631z" fill="#C8C9CA"/>
+   <path class="svg-elem-10" d="m102.65 72.476h1.8617v10.244h-1.8617z" fill="#FFFFFF"/>
+   <path class="svg-elem-11" d="m109.49 70.02v2.4557h2.6665v1.418h-2.6665v5.5246c0 1.2706 0.35967 1.9899 1.3973 1.9899 0.50711 0 0.80339-0.04272 1.079-0.12678l0.0841 1.418c-0.35967 0.12678-0.93017 0.25356-1.6509 0.25356-0.86678 0-1.5654-0.29628-2.0106-0.78273-0.50712-0.57189-0.71933-1.4814-0.71933-2.6886v-5.5879h-1.5875v-1.418h1.5875v-1.9044z" fill="#FFFFFF"/>
+   <path class="svg-elem-12" d="m113.55 67.692h1.8631v6.4134h0.0413c0.29627-0.52917 0.76205-1.0156 1.3339-1.3339 0.54983-0.31695 1.2058-0.50712 1.9044-0.50712 1.3767 0 3.5774 0.84612 3.5774 4.3587v6.0964h-1.8631v-5.8842c0-1.6509-0.61323-3.0262-2.3702-3.0262-1.2058 0-2.1373 0.84612-2.497 1.8411-0.10611 0.27561-0.12678 0.54984-0.12678 0.88883v6.1805h-1.8631z" fill="#C8C9CA"/>
+  </g>
+  <g fill="#dedc1c">
+   <path class="svg-elem-13" d="m106.69 60.671c0 1.4607-1.1851 2.6458-2.6458 2.6458s-2.6458-1.1851-2.6458-2.6458c0-1.4607 1.1851-2.6458 2.6458-2.6458s2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-14" d="m73.229 59.908c0 1.4607-1.1837 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1851-2.6458 2.6458-2.6458 1.4621 0 2.6458 1.1837 2.6458 2.6458"/>
+   <path class="svg-elem-15" d="m66.997 78.193c0 1.4607-1.1837 2.6458-2.6445 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6445 1.1837 2.6445 2.6458"/>
+   <path class="svg-elem-16" d="m89.869 94.832c0 1.4621-1.1851 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1837-2.6458-2.6458 0-1.4607 1.1851-2.6458 2.6458-2.6458 1.4607 0 2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-17" d="m132.97 77.311c0 1.4607-1.1837 2.6458-2.6444 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6444 1.1837 2.6444 2.6458"/>
+  </g>
+ </g>
+</svg>
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 71.26 40.215" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-61.706 -57.262)">
+  <path class="svg-elem-1" d="m88.165 77.957c0 1.9485-1.5792 3.5278-3.5278 3.5278s-3.5278-1.5792-3.5278-3.5278 1.5792-3.5278 3.5278-3.5278 3.5278 1.5792 3.5278 3.5278" fill="#dedc1c"/>
+  <g fill="none" stroke="#dedc1c" stroke-width=".70556px">
+   <path class="svg-elem-2" d="m89.928 77.959c0 2.9214-2.3688 5.2917-5.2917 5.2917-2.9228 0-5.2917-2.3702-5.2917-5.2917 0-2.9228 2.3688-5.2917 5.2917-5.2917 2.9228 0 5.2917 2.3688 5.2917 5.2917z"/>
+   <path class="svg-elem-3" d="m87.988 73.783 16.111-12.994"/>
+   <path class="svg-elem-4" d="m89.928 77.959 38.336-0.58842"/>
+   <path class="svg-elem-5" d="m79.345 77.959-12.7 0.23427"/>
+   <path class="svg-elem-6" d="m81.697 73.371-9.6421-11.876"/>
+   <path class="svg-elem-7" d="m85.464 83.055 1.4042 9.2094"/>
+  </g>
+  <g>
+   <path class="svg-elem-8" d="m72.053 80.836c0.5705 0.339 1.5448 0.71934 2.4763 0.71934 1.3326 0 1.9678-0.65595 1.9678-1.5241 0-0.88883-0.52917-1.3546-1.8838-1.8617-1.8617-0.67799-2.7299-1.6729-2.7299-2.8994 0-1.6509 1.3546-3.0055 3.5347-3.0055 1.0363 0 1.9472 0.27423 2.497 0.6339l-0.44373 1.3546c-0.40238-0.25356-1.1438-0.61323-2.096-0.61323-1.1011 0-1.6936 0.63528-1.6936 1.3973 0 0.84611 0.59256 1.2265 1.9265 1.7556 1.757 0.65594 2.6886 1.5462 2.6886 3.0703 0 1.819-1.418 3.0896-3.8103 3.0896-1.1217 0-2.1594-0.29628-2.8787-0.71934z" fill="#828585"/>
+   <path class="svg-elem-9" d="m91.603 75.248c0-1.079-0.02067-1.9251-0.08406-2.7726h1.6509l0.10473 1.6936h0.04272c0.50849-0.95222 1.6936-1.9044 3.3872-1.9044 1.418 0 3.6187 0.84612 3.6187 4.3587v6.0964h-1.8631v-5.9049c0-1.6509-0.61323-3.0276-2.3702-3.0276-1.2058 0-2.158 0.86816-2.497 1.9058-0.08544 0.23289-0.12678 0.54984-0.12678 0.86679v6.1598h-1.8631z" fill="#828585"/>
+   <path class="svg-elem-10" d="m102.65 72.476h1.8617v10.244h-1.8617z" fill="#c7c7ca"/>
+   <path class="svg-elem-11" d="m109.49 70.02v2.4557h2.6665v1.418h-2.6665v5.5246c0 1.2706 0.35967 1.9899 1.3973 1.9899 0.50711 0 0.80339-0.04272 1.079-0.12678l0.0841 1.418c-0.35967 0.12678-0.93017 0.25356-1.6509 0.25356-0.86678 0-1.5654-0.29628-2.0106-0.78273-0.50712-0.57189-0.71933-1.4814-0.71933-2.6886v-5.5879h-1.5875v-1.418h1.5875v-1.9044z" fill="#c7c7ca"/>
+   <path class="svg-elem-12" d="m113.55 67.692h1.8631v6.4134h0.0413c0.29627-0.52917 0.76205-1.0156 1.3339-1.3339 0.54983-0.31695 1.2058-0.50712 1.9044-0.50712 1.3767 0 3.5774 0.84612 3.5774 4.3587v6.0964h-1.8631v-5.8842c0-1.6509-0.61323-3.0262-2.3702-3.0262-1.2058 0-2.1373 0.84612-2.497 1.8411-0.10611 0.27561-0.12678 0.54984-0.12678 0.88883v6.1805h-1.8631z" fill="#828585"/>
+  </g>
+  <g fill="#dedc1c">
+   <path class="svg-elem-13" d="m106.69 60.671c0 1.4607-1.1851 2.6458-2.6458 2.6458s-2.6458-1.1851-2.6458-2.6458c0-1.4607 1.1851-2.6458 2.6458-2.6458s2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-14" d="m73.229 59.908c0 1.4607-1.1837 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1851-2.6458 2.6458-2.6458 1.4621 0 2.6458 1.1837 2.6458 2.6458"/>
+   <path class="svg-elem-15" d="m66.997 78.193c0 1.4607-1.1837 2.6458-2.6445 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6445 1.1837 2.6445 2.6458"/>
+   <path class="svg-elem-16" d="m89.869 94.832c0 1.4621-1.1851 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1837-2.6458-2.6458 0-1.4607 1.1851-2.6458 2.6458-2.6458 1.4607 0 2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-17" d="m132.97 77.311c0 1.4607-1.1837 2.6458-2.6444 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6444 1.1837 2.6444 2.6458"/>
+  </g>
+ </g>
+</svg>
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#334155"/>
-  <circle cx="128" cy="100" r="40" fill="#475569"/>
-  <ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
-</svg>
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#334155"/>
-  <circle cx="128" cy="100" r="40" fill="#475569"/>
-  <ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
-</svg>
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#334155"/>
-  <circle cx="128" cy="100" r="40" fill="#475569"/>
-  <ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
-</svg>
@@ -5,7 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Impressum — sonith</title>
    <meta name="robots" content="noindex">
-    <link rel="icon" type="image/png" href="img/logo.png">
+    <link rel="icon" type="image/svg+xml" href="img/logo.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // CI-Farben (Logo & CI Handbuch, Sonith UG)
@@ -32,8 +32,8 @@
    <nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-petrol-dark/30">
        <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">
-                <a href="index.html" class="flex items-center gap-3">
-                    <span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
+                <a href="index.html" class="flex items-center" aria-label="sonith Startseite">
+                    <img src="img/logo-light.svg" alt="sonith" class="h-9 lg:h-10 w-auto">
                </a>
                <a href="index.html" class="text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
            </div>
@@ -55,8 +55,7 @@

                <h2 class="text-xl font-bold text-white mt-8">Vertreten durch</h2>
                <p>
-                    <!-- Name des Geschäftsführers hier eintragen -->
-                    Geschäftsführer: [Name eintragen]
+                    Geschäftsführer: Dominik Knapp
                </p>

                <h2 class="text-xl font-bold text-white mt-8">Kontakt</h2>
@@ -92,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.1.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>
@@ -16,7 +16,7 @@
    <meta property="og:locale" content="de_DE">

    <!-- Favicon -->
-    <link rel="icon" type="image/png" href="img/logo.png">
+    <link rel="icon" type="image/svg+xml" href="img/logo.svg">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
@@ -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 gap-3 shrink-0">
-                    <span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
+                <a href="#hero" class="flex items-center shrink-0" aria-label="sonith Startseite">
+                    <img src="img/logo-light.svg" alt="sonith" class="nav-logo w-auto">
                </a>

                <!-- Desktop Menu -->
@@ -316,31 +316,31 @@
            </div>

            <div class="grid sm:grid-cols-3 gap-8 max-w-4xl mx-auto">
-                <!-- Team Member 1 -->
+                <!-- Dominik Knapp — Geschaeftsfuehrung -->
                <div class="team-card text-center fade-in">
-                    <div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-petrol/40">
-                        <img src="img/team/placeholder-1.svg" alt="Teammitglied" class="w-full h-full object-cover">
+                    <div class="w-32 h-32 rounded-full bg-petrol mx-auto mb-5 flex items-center justify-center border-2 border-petrol-light/30 shadow-lg shadow-petrol/20">
+                        <span class="text-3xl font-extrabold text-white tracking-wide">DK</span>
                    </div>
-                    <h3 class="text-lg font-bold text-white">Max Mustermann</h3>
+                    <h3 class="text-lg font-bold text-white">Dominik Knapp</h3>
                    <p class="text-sonith text-sm font-medium">Geschäftsführung</p>
                </div>

-                <!-- Team Member 2 -->
+                <!-- Dominik Hoefling — Administration & Entwicklung -->
                <div class="team-card text-center fade-in">
-                    <div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-petrol/40">
-                        <img src="img/team/placeholder-2.svg" alt="Teammitglied" class="w-full h-full object-cover">
+                    <div class="w-32 h-32 rounded-full bg-petrol mx-auto mb-5 flex items-center justify-center border-2 border-petrol-light/30 shadow-lg shadow-petrol/20">
+                        <span class="text-3xl font-extrabold text-white tracking-wide">DH</span>
                    </div>
-                    <h3 class="text-lg font-bold text-white">Erika Musterfrau</h3>
-                    <p class="text-sonith text-sm font-medium">Systemadministration</p>
+                    <h3 class="text-lg font-bold text-white">Dominik Höfling</h3>
+                    <p class="text-sonith text-sm font-medium">Administration &amp; Entwicklung</p>
                </div>

-                <!-- Team Member 3 -->
+                <!-- Stefan Riederer — Support -->
                <div class="team-card text-center fade-in">
-                    <div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-petrol/40">
-                        <img src="img/team/placeholder-3.svg" alt="Teammitglied" class="w-full h-full object-cover">
+                    <div class="w-32 h-32 rounded-full bg-petrol mx-auto mb-5 flex items-center justify-center border-2 border-petrol-light/30 shadow-lg shadow-petrol/20">
+                        <span class="text-3xl font-extrabold text-white tracking-wide">SR</span>
                    </div>
-                    <h3 class="text-lg font-bold text-white">Alex Beispiel</h3>
-                    <p class="text-sonith text-sm font-medium">IT-Support</p>
+                    <h3 class="text-lg font-bold text-white">Stefan Riederer</h3>
+                    <p class="text-sonith text-sm font-medium">Support</p>
                </div>
            </div>
        </div>
@@ -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.1.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>
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 71.26 40.215" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-61.706 -57.262)">
+  <path class="svg-elem-1" d="m88.165 77.957c0 1.9485-1.5792 3.5278-3.5278 3.5278s-3.5278-1.5792-3.5278-3.5278 1.5792-3.5278 3.5278-3.5278 3.5278 1.5792 3.5278 3.5278" fill="#dedc1c"/>
+  <g fill="none" stroke="#dedc1c" stroke-width=".70556px">
+   <path class="svg-elem-2" d="m89.928 77.959c0 2.9214-2.3688 5.2917-5.2917 5.2917-2.9228 0-5.2917-2.3702-5.2917-5.2917 0-2.9228 2.3688-5.2917 5.2917-5.2917 2.9228 0 5.2917 2.3688 5.2917 5.2917z"/>
+   <path class="svg-elem-3" d="m87.988 73.783 16.111-12.994"/>
+   <path class="svg-elem-4" d="m89.928 77.959 38.336-0.58842"/>
+   <path class="svg-elem-5" d="m79.345 77.959-12.7 0.23427"/>
+   <path class="svg-elem-6" d="m81.697 73.371-9.6421-11.876"/>
+   <path class="svg-elem-7" d="m85.464 83.055 1.4042 9.2094"/>
+  </g>
+  <g>
+   <path class="svg-elem-8" d="m72.053 80.836c0.5705 0.339 1.5448 0.71934 2.4763 0.71934 1.3326 0 1.9678-0.65595 1.9678-1.5241 0-0.88883-0.52917-1.3546-1.8838-1.8617-1.8617-0.67799-2.7299-1.6729-2.7299-2.8994 0-1.6509 1.3546-3.0055 3.5347-3.0055 1.0363 0 1.9472 0.27423 2.497 0.6339l-0.44373 1.3546c-0.40238-0.25356-1.1438-0.61323-2.096-0.61323-1.1011 0-1.6936 0.63528-1.6936 1.3973 0 0.84611 0.59256 1.2265 1.9265 1.7556 1.757 0.65594 2.6886 1.5462 2.6886 3.0703 0 1.819-1.418 3.0896-3.8103 3.0896-1.1217 0-2.1594-0.29628-2.8787-0.71934z" fill="#828585"/>
+   <path class="svg-elem-9" d="m91.603 75.248c0-1.079-0.02067-1.9251-0.08406-2.7726h1.6509l0.10473 1.6936h0.04272c0.50849-0.95222 1.6936-1.9044 3.3872-1.9044 1.418 0 3.6187 0.84612 3.6187 4.3587v6.0964h-1.8631v-5.9049c0-1.6509-0.61323-3.0276-2.3702-3.0276-1.2058 0-2.158 0.86816-2.497 1.9058-0.08544 0.23289-0.12678 0.54984-0.12678 0.86679v6.1598h-1.8631z" fill="#828585"/>
+   <path class="svg-elem-10" d="m102.65 72.476h1.8617v10.244h-1.8617z" fill="#c7c7ca"/>
+   <path class="svg-elem-11" d="m109.49 70.02v2.4557h2.6665v1.418h-2.6665v5.5246c0 1.2706 0.35967 1.9899 1.3973 1.9899 0.50711 0 0.80339-0.04272 1.079-0.12678l0.0841 1.418c-0.35967 0.12678-0.93017 0.25356-1.6509 0.25356-0.86678 0-1.5654-0.29628-2.0106-0.78273-0.50712-0.57189-0.71933-1.4814-0.71933-2.6886v-5.5879h-1.5875v-1.418h1.5875v-1.9044z" fill="#c7c7ca"/>
+   <path class="svg-elem-12" d="m113.55 67.692h1.8631v6.4134h0.0413c0.29627-0.52917 0.76205-1.0156 1.3339-1.3339 0.54983-0.31695 1.2058-0.50712 1.9044-0.50712 1.3767 0 3.5774 0.84612 3.5774 4.3587v6.0964h-1.8631v-5.8842c0-1.6509-0.61323-3.0262-2.3702-3.0262-1.2058 0-2.1373 0.84612-2.497 1.8411-0.10611 0.27561-0.12678 0.54984-0.12678 0.88883v6.1805h-1.8631z" fill="#828585"/>
+  </g>
+  <g fill="#dedc1c">
+   <path class="svg-elem-13" d="m106.69 60.671c0 1.4607-1.1851 2.6458-2.6458 2.6458s-2.6458-1.1851-2.6458-2.6458c0-1.4607 1.1851-2.6458 2.6458-2.6458s2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-14" d="m73.229 59.908c0 1.4607-1.1837 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1851-2.6458 2.6458-2.6458 1.4621 0 2.6458 1.1837 2.6458 2.6458"/>
+   <path class="svg-elem-15" d="m66.997 78.193c0 1.4607-1.1837 2.6458-2.6445 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6445 1.1837 2.6445 2.6458"/>
+   <path class="svg-elem-16" d="m89.869 94.832c0 1.4621-1.1851 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1837-2.6458-2.6458 0-1.4607 1.1851-2.6458 2.6458-2.6458 1.4607 0 2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-17" d="m132.97 77.311c0 1.4607-1.1837 2.6458-2.6444 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6444 1.1837 2.6444 2.6458"/>
+  </g>
+ </g>
+</svg>