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.5.0 (animiertes Knoten-Mesh im Hero)*
+*Zuletzt aktualisiert: Mai 2026 — v1.5.1 (Mesh als Logo-Cluster überarbeitet)*

css/style.css

@@ -88,45 +88,80 @@ html {
                 0 0 48px rgba(6, 115, 145, 0.06);
 }
 
-/* ---- Hero Mesh: animiertes Knoten-Netz im Logo-Stil ---- */
+/* ---- 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;
 }
 
-.mesh-lines line {
+.logo-cluster line {
-    stroke-opacity: 0.25;
+    stroke: #067391;
-    stroke-dasharray: 4 8;
+    stroke-width: 1.6;
-    animation: line-flow 6s linear infinite;
+    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; }
-.mesh-lines line:nth-child(3n)   { animation-duration: 9s;  stroke-opacity: 0.18; }
+.cluster-c line { stroke-width: 1.0; stroke-opacity: 0.35; animation-duration: 10s;  animation-delay: -4s; }
-.mesh-lines line:nth-child(3n+1) { animation-duration: 7s;  animation-delay: -2s; }
-.mesh-lines line:nth-child(3n+2) { animation-duration: 11s; animation-delay: -4s; stroke-opacity: 0.30; }
 
 @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;
-    filter: drop-shadow(0 0 4px rgba(222, 220, 30, 0.6));
 }
 
-.node:nth-child(2n)   { animation-delay: -0.8s; animation-duration: 4.2s; }
-.node:nth-child(3n)   { animation-delay: -1.6s; animation-duration: 5.0s; }
-.node:nth-child(4n+1) { animation-delay: -2.4s; }
-.node:nth-child(5n+2) { animation-delay: -3.0s; animation-duration: 4.8s; }
-
 @keyframes node-pulse {
     0%, 100% { transform: scale(1);   opacity: 0.55; }
-    50%      { transform: scale(1.6); opacity: 1; }
+    50%      { transform: scale(1.5); opacity: 1;    }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .mesh-lines line,
+    .logo-cluster line,
+    .cluster-core,
+    .cluster-ring,
     .node { animation: none !important; }
 }
 

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.5.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.5.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

@@ -132,45 +132,58 @@
         <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>
 
-        <!-- Animiertes Knoten-Mesh: greift das Logo-Motiv (Netzwerk-Knoten) auf
+        <!-- Logo-Cluster-Mesh: drei wiederholte Sonith-Logo-Sterne (zentraler Knoten +
-             und transportiert visuell die MSP-/Netzwerk-Kompetenz.
+             pulsierender Ring + 5 strahlenfoermige Linien zu Aussenknoten in exakter
-             Linien pulsieren mit Datenfluss-Effekt, Knoten leuchten zyklisch auf. -->
+             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">
-            <!-- Verbindungslinien (CI-Petrol) -->
+
-            <g class="mesh-lines" stroke="#067391" stroke-width="0.9" stroke-linecap="round" fill="none">
+            <!-- Cluster A — Hauptmotiv links-mitte (Skala 6) -->
-                <line x1="180"  y1="140" x2="380"  y2="90"/>
+            <g class="logo-cluster cluster-a">
-                <line x1="180"  y1="140" x2="140"  y2="380"/>
+                <line x1="300" y1="400" x2="216" y2="292"/>
-                <line x1="180"  y1="140" x2="300"  y2="540"/>
+                <line x1="300" y1="400" x2="417" y2="296"/>
-                <line x1="380"  y1="90"  x2="620"  y2="180"/>
+                <line x1="300" y1="400" x2="574" y2="396"/>
-                <line x1="620"  y1="180" x2="880"  y2="110"/>
+                <line x1="300" y1="400" x2="178" y2="401"/>
-                <line x1="620"  y1="180" x2="520"  y2="460"/>
+                <line x1="300" y1="400" x2="308" y2="489"/>
-                <line x1="880"  y1="110" x2="1080" y2="280"/>
+                <circle class="cluster-ring" cx="300" cy="400" r="32"/>
-                <line x1="1080" y1="280" x2="980"  y2="480"/>
+                <circle class="cluster-core" cx="300" cy="400" r="18"/>
-                <line x1="980"  y1="480" x2="740"  y2="540"/>
+                <circle class="node" cx="216" cy="292" r="8" style="animation-delay: -0.4s"/>
-                <line x1="740"  y1="540" x2="520"  y2="460"/>
+                <circle class="node" cx="417" cy="296" r="8" style="animation-delay: -1.2s"/>
-                <line x1="740"  y1="540" x2="860"  y2="720"/>
+                <circle class="node" cx="574" cy="396" r="8" style="animation-delay: -2.0s"/>
-                <line x1="520"  y1="460" x2="300"  y2="540"/>
+                <circle class="node" cx="178" cy="401" r="8" style="animation-delay: -2.8s"/>
-                <line x1="520"  y1="460" x2="560"  y2="700"/>
+                <circle class="node" cx="308" cy="489" r="8" style="animation-delay: -1.6s"/>
-                <line x1="300"  y1="540" x2="140"  y2="380"/>
-                <line x1="300"  y1="540" x2="560"  y2="700"/>
-                <line x1="560"  y1="700" x2="860"  y2="720"/>
-                <line x1="1080" y1="280" x2="740"  y2="540"/>
             </g>
 
-            <!-- Knoten (CI-Sonith-Gelb) mit asynchroner Pulse-Animation -->
+            <!-- Cluster B — Echo rechts oben (Skala 3.5) -->
-            <g class="mesh-nodes" fill="#DEDC1E">
+            <g class="logo-cluster cluster-b">
-                <circle class="node" cx="180"  cy="140" r="4"/>
+                <line x1="900" y1="220" x2="851" y2="157"/>
-                <circle class="node" cx="380"  cy="90"  r="3"/>
+                <line x1="900" y1="220" x2="968" y2="160"/>
-                <circle class="node" cx="620"  cy="180" r="5"/>
+                <line x1="900" y1="220" x2="1060" y2="218"/>
-                <circle class="node" cx="880"  cy="110" r="3.5"/>
+                <line x1="900" y1="220" x2="829" y2="221"/>
-                <circle class="node" cx="1080" cy="280" r="4"/>
+                <line x1="900" y1="220" x2="905" y2="272"/>
-                <circle class="node" cx="980"  cy="480" r="3"/>
+                <circle class="cluster-ring" cx="900" cy="220" r="18.5"/>
-                <circle class="node" cx="740"  cy="540" r="4.5"/>
+                <circle class="cluster-core" cx="900" cy="220" r="10.5"/>
-                <circle class="node" cx="520"  cy="460" r="3.5"/>
+                <circle class="node" cx="851"  cy="157" r="5" style="animation-delay: -0.8s"/>
-                <circle class="node" cx="300"  cy="540" r="3"/>
+                <circle class="node" cx="968"  cy="160" r="5" style="animation-delay: -2.4s"/>
-                <circle class="node" cx="140"  cy="380" r="4"/>
+                <circle class="node" cx="1060" cy="218" r="5" style="animation-delay: -1.0s"/>
-                <circle class="node" cx="560"  cy="700" r="3"/>
+                <circle class="node" cx="829"  cy="221" r="5" style="animation-delay: -3.0s"/>
-                <circle class="node" cx="860"  cy="720" r="3.5"/>
+                <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>
 
@@ -512,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.5.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>