fix: Mesh als Logo-Cluster (v1.5.1)

Das alte Random-Network-Mesh wirkte unbestimmt — neu als drei wiederholte
Sonith-Logo-Sterne in unterschiedlichen Skalen, sodass die Marken-DNA klar
durchscheint.

- Jeder Cluster: zentraler gefuellter Knoten + pulsierender Ring + 5
  strahlenfoermige Linien zu Aussenknoten in der originalen Logo-Anordnung
  (asymmetrisch nach rechts verlaengert wie im CI-Logo)
- Cluster A links-mitte (Skala 6, dominant), Cluster B rechts oben (3.5),
  Cluster C rechts unten (2.5) — gestaffelte Tiefe
- Ring atmet (scale + opacity), Core pulsiert mit Glow, Aussenknoten
  asynchron via inline animation-delay
- Linien als gestrichelte Petrol-Bahnen mit stroke-dashoffset-Datenfluss

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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.5.1 (Mesh als Logo-Cluster überarbeitet)*

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;
@@ -68,7 +88,118 @@ html {
                 0 0 48px rgba(6, 115, 145, 0.06);
 }
 
-/* ---- USP Cards ---- */
+/* ---- Hero Mesh: Logo-Cluster (Sonith-Stern wiederholt) ----
+   Greift das exakte Logo-Motiv auf: zentraler Knoten mit Ring + 5 strahlenfoermige
+   Linien zu Aussenknoten in der Original-Logo-Anordnung (asymmetrisch nach rechts
+   verlaengert). Drei Cluster mit unterschiedlicher Skala fuer Tiefe. */
+.hero-mesh {
+    opacity: 0.55;
+    mix-blend-mode: screen;
+}
+
+.logo-cluster line {
+    stroke: #067391;
+    stroke-width: 1.6;
+    stroke-linecap: round;
+    stroke-opacity: 0.45;
+    fill: none;
+    stroke-dasharray: 6 10;
+    animation: line-flow 8s linear infinite;
+}
+.cluster-b line { stroke-width: 1.2; stroke-opacity: 0.4;  animation-duration: 6.5s; animation-delay: -2s; }
+.cluster-c line { stroke-width: 1.0; stroke-opacity: 0.35; animation-duration: 10s;  animation-delay: -4s; }
+
+@keyframes line-flow {
+    to { stroke-dashoffset: -48; }
+}
+
+.cluster-core {
+    fill: #DEDC1E;
+    filter: drop-shadow(0 0 10px rgba(222, 220, 30, 0.7));
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: core-pulse 3.2s ease-in-out infinite;
+}
+.cluster-b .cluster-core { animation-delay: -1s; }
+.cluster-c .cluster-core { animation-delay: -2s; }
+
+@keyframes core-pulse {
+    0%, 100% { transform: scale(1);    opacity: 0.85; }
+    50%      { transform: scale(1.15); opacity: 1;    }
+}
+
+.cluster-ring {
+    fill: none;
+    stroke: #DEDC1E;
+    stroke-width: 1.6;
+    stroke-opacity: 0.55;
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: ring-pulse 4s ease-in-out infinite;
+}
+.cluster-b .cluster-ring { animation-delay: -1.5s; }
+.cluster-c .cluster-ring { animation-delay: -2.5s; }
+
+@keyframes ring-pulse {
+    0%, 100% { transform: scale(1);    stroke-opacity: 0.55; }
+    50%      { transform: scale(1.18); stroke-opacity: 0.20; }
+}
+
+.node {
+    fill: #DEDC1E;
+    filter: drop-shadow(0 0 5px rgba(222, 220, 30, 0.5));
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: node-pulse 3.6s ease-in-out infinite;
+}
+
+@keyframes node-pulse {
+    0%, 100% { transform: scale(1);   opacity: 0.55; }
+    50%      { transform: scale(1.5); opacity: 1;    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .logo-cluster line,
+    .cluster-core,
+    .cluster-ring,
+    .node { animation: none !important; }
+}
+
+/* ---- Floating Orbs (Hero) ---- */
+.orb {
+    filter: blur(64px);
+    pointer-events: none;
+    will-change: transform;
+}
+
+.orb-petrol {
+    background: radial-gradient(circle, #067391 0%, transparent 70%);
+    animation: drift 14s ease-in-out infinite;
+}
+
+.orb-petrol-2 {
+    background: radial-gradient(circle, #045066 0%, transparent 70%);
+    animation: drift 18s ease-in-out infinite reverse;
+}
+
+.orb-sonith {
+    background: radial-gradient(circle, #DEDC1E 0%, transparent 70%);
+    animation: drift 20s ease-in-out infinite;
+    animation-delay: -6s;
+}
+
+@keyframes drift {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33%      { transform: translate(40px, -30px) scale(1.08); }
+    66%      { transform: translate(-30px, 25px) scale(0.95); }
+}
+
+/* Auf reduzierten Bewegungswunsch achten (a11y) */
+@media (prefers-reduced-motion: reduce) {
+    .orb { animation: none !important; }
+}
+
+/* ---- USP Cards (mit subtiler Pulse-Aura auf Icon-Kreisen) ---- */
 .usp-card {
     transition: transform 0.3s ease;
 }
@@ -77,6 +208,31 @@ html {
     transform: translateY(-4px);
 }
 
+.usp-card > div:first-child {
+    position: relative;
+}
+
+.usp-card > div:first-child::before {
+    content: "";
+    position: absolute;
+    inset: -6px;
+    border-radius: 9999px;
+    background: radial-gradient(circle, rgba(222, 220, 30, 0.18) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    z-index: -1;
+}
+
+.usp-card:hover > div:first-child::before {
+    opacity: 1;
+    animation: pulse-soft 2.4s ease-in-out infinite;
+}
+
+@keyframes pulse-soft {
+    0%, 100% { transform: scale(1);    opacity: 0.6; }
+    50%      { transform: scale(1.18); opacity: 1; }
+}
+
 /* ---- Team Cards ---- */
 .team-card {
     transition: transform 0.3s ease;

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.5.1</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>

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.5.1</span>
                 </div>
                 <div class="flex items-center gap-6">
                     <a href="impressum.html" class="text-sonith text-sm">Impressum</a>

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 -->
@@ -82,7 +82,7 @@
                     <a href="#warum-sonith" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Warum sonith</a>
                     <a href="#team" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Team</a>
                     <a href="#kontakt" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Kontakt</a>
-                    <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
+                    <a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-sonith text-dark font-semibold text-sm rounded-lg hover:bg-sonith-light transition-colors">
                         <!-- External Link Icon -->
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -111,8 +111,10 @@
                 <a href="#warum-sonith" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Warum sonith</a>
                 <a href="#team" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Team</a>
                 <a href="#kontakt" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Kontakt</a>
-                <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
+                <a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
                    class="block px-4 py-3 text-sonith font-semibold hover:bg-dark/50 rounded-lg transition-colors">Helpdesk</a>
+                <a href="https://fernwartung.sonith.de/start/ISLLightClient" target="_blank" rel="noopener"
+                   class="block px-4 py-3 text-petrol-light font-semibold hover:bg-dark/50 rounded-lg transition-colors">Fernwartung</a>
             </div>
         </div>
     </nav>
@@ -121,9 +123,69 @@
          HERO
          ============================================================ -->
     <section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
-        <!-- Background Pattern: Sonith-Gelb oben rechts, Petrol (CI-Stoererfarbe) unten links -->
+        <!-- Background: Petrol/Sonith-Gradients + animierte Floating-Orbs -->
         <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(222,220,30,0.09)_0%,_transparent_60%)]"></div>
-        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(6,115,145,0.18)_0%,_transparent_55%)]"></div>
+        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(6,115,145,0.20)_0%,_transparent_55%)]"></div>
+
+        <!-- Floating Orbs: lebendige unscharfe Lichtpunkte in CI-Farben -->
+        <div class="orb orb-petrol absolute top-[15%] left-[8%] w-72 h-72 rounded-full opacity-30"></div>
+        <div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-20"></div>
+        <div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-25"></div>
+
+        <!-- Logo-Cluster-Mesh: drei wiederholte Sonith-Logo-Sterne (zentraler Knoten +
+             pulsierender Ring + 5 strahlenfoermige Linien zu Aussenknoten in exakter
+             Logo-Anordnung, asymmetrisch nach rechts verlaengert). Vermittelt visuell
+             die Marken-DNA als Netzwerk-Cluster. -->
+        <svg class="hero-mesh absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+
+            <!-- Cluster A — Hauptmotiv links-mitte (Skala 6) -->
+            <g class="logo-cluster cluster-a">
+                <line x1="300" y1="400" x2="216" y2="292"/>
+                <line x1="300" y1="400" x2="417" y2="296"/>
+                <line x1="300" y1="400" x2="574" y2="396"/>
+                <line x1="300" y1="400" x2="178" y2="401"/>
+                <line x1="300" y1="400" x2="308" y2="489"/>
+                <circle class="cluster-ring" cx="300" cy="400" r="32"/>
+                <circle class="cluster-core" cx="300" cy="400" r="18"/>
+                <circle class="node" cx="216" cy="292" r="8" style="animation-delay: -0.4s"/>
+                <circle class="node" cx="417" cy="296" r="8" style="animation-delay: -1.2s"/>
+                <circle class="node" cx="574" cy="396" r="8" style="animation-delay: -2.0s"/>
+                <circle class="node" cx="178" cy="401" r="8" style="animation-delay: -2.8s"/>
+                <circle class="node" cx="308" cy="489" r="8" style="animation-delay: -1.6s"/>
+            </g>
+
+            <!-- Cluster B — Echo rechts oben (Skala 3.5) -->
+            <g class="logo-cluster cluster-b">
+                <line x1="900" y1="220" x2="851" y2="157"/>
+                <line x1="900" y1="220" x2="968" y2="160"/>
+                <line x1="900" y1="220" x2="1060" y2="218"/>
+                <line x1="900" y1="220" x2="829" y2="221"/>
+                <line x1="900" y1="220" x2="905" y2="272"/>
+                <circle class="cluster-ring" cx="900" cy="220" r="18.5"/>
+                <circle class="cluster-core" cx="900" cy="220" r="10.5"/>
+                <circle class="node" cx="851"  cy="157" r="5" style="animation-delay: -0.8s"/>
+                <circle class="node" cx="968"  cy="160" r="5" style="animation-delay: -2.4s"/>
+                <circle class="node" cx="1060" cy="218" r="5" style="animation-delay: -1.0s"/>
+                <circle class="node" cx="829"  cy="221" r="5" style="animation-delay: -3.0s"/>
+                <circle class="node" cx="905"  cy="272" r="5" style="animation-delay: -1.8s"/>
+            </g>
+
+            <!-- Cluster C — Echo rechts unten (Skala 2.5) -->
+            <g class="logo-cluster cluster-c">
+                <line x1="980" y1="620" x2="945"  y2="575"/>
+                <line x1="980" y1="620" x2="1029" y2="577"/>
+                <line x1="980" y1="620" x2="1094" y2="619"/>
+                <line x1="980" y1="620" x2="929"  y2="621"/>
+                <line x1="980" y1="620" x2="984"  y2="657"/>
+                <circle class="cluster-ring" cx="980" cy="620" r="13"/>
+                <circle class="cluster-core" cx="980" cy="620" r="7.5"/>
+                <circle class="node" cx="945"  cy="575" r="3.5" style="animation-delay: -2.2s"/>
+                <circle class="node" cx="1029" cy="577" r="3.5" style="animation-delay: -0.6s"/>
+                <circle class="node" cx="1094" cy="619" r="3.5" style="animation-delay: -1.4s"/>
+                <circle class="node" cx="929"  cy="621" r="3.5" style="animation-delay: -2.6s"/>
+                <circle class="node" cx="984"  cy="657" r="3.5" style="animation-delay: -3.2s"/>
+            </g>
+        </svg>
 
         <!-- Grid Pattern Overlay -->
         <div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;1&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
@@ -144,7 +206,7 @@
                            class="inline-flex items-center justify-center px-8 py-4 bg-sonith text-dark font-bold rounded-lg hover:bg-sonith-light transition-all hover:shadow-lg hover:shadow-sonith/20 text-center">
                             Kontakt aufnehmen
                         </a>
-                        <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
+                        <a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
                            class="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-petrol text-petrol-light font-semibold rounded-lg hover:bg-petrol/10 hover:border-petrol-light hover:text-white transition-all text-center">
                             <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
@@ -188,9 +250,9 @@
                 </div>
 
                 <!-- Managed Backup -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
-                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-petrol/15 flex items-center justify-center mb-6 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="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/>
                         </svg>
                     </div>
@@ -210,9 +272,9 @@
                 </div>
 
                 <!-- Nextcloud -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
-                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-petrol/15 flex items-center justify-center mb-6 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="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"/>
                         </svg>
                     </div>
@@ -232,9 +294,9 @@
                 </div>
 
                 <!-- ERP-Systeme -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
-                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-petrol/15 flex items-center justify-center mb-6 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="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/>
                         </svg>
                     </div>
@@ -357,9 +419,10 @@
                 <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 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl 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">
+                <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/40 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">
                         <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="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
@@ -370,7 +433,7 @@
                 </a>
 
                 <!-- E-Mail -->
-                <a href="mailto:mail@sonith.de" 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">
+                <a href="mailto:mail@sonith.de" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/40 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">
                         <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="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
@@ -380,28 +443,76 @@
                     <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">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <!-- Helpdesk / Ticket-System -->
+                <a href="https://hilfe.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-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center mx-auto mb-4 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="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"/>
                         </svg>
                     </div>
                     <h3 class="text-sm font-semibold text-white mb-1">Helpdesk</h3>
                     <p class="text-ci-gray text-sm">Support-Ticket erstellen</p>
                 </a>
+
+                <!-- Fernwartung (ISL Light) -->
+                <a href="https://fernwartung.sonith.de/start/ISLLightClient" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center mx-auto mb-4 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="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m0-3.75V12a2.25 2.25 0 00-2.25-2.25h-4.5A2.25 2.25 0 006 12v1.5m9 0H6m9 0v.75A2.25 2.25 0 0112.75 16.5h-1.5A2.25 2.25 0 019 14.25v-.75M12 7.5V4.5m-3 3h6"/>
+                        </svg>
+                    </div>
+                    <h3 class="text-sm font-semibold text-white mb-1">Fernwartung</h3>
+                    <p class="text-ci-gray text-sm">ISL Light starten</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>
+                            <p class="text-ci-gray-light text-sm leading-relaxed">
+                                Am Schlossgarten 1<br>
+                                97076 Würzburg
+                            </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 +525,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.5.1</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>