feat: animiertes Knoten-Mesh im Hero (v1.5.0)

Greift das Logo-Motiv (vernetzte Knotenpunkte) als ganzflaechiges Hero-
Hintergrundelement auf — transportiert visuell die Netzwerk-/MSP-Kompetenz.

- 12 Knoten in CI-Sonith-Gelb mit asynchroner Pulse-Animation
  (skaliert zwischen 1.0 und 1.6, drop-shadow-Glow)
- 17 Verbindungslinien in CI-Petrol mit stroke-dasharray-Datenfluss
  (drei Geschwindigkeiten und Phasen, zufaellig wirkend)
- mix-blend-mode: screen fuer weiches Aufblenden auf den Orbs
- prefers-reduced-motion respektiert (Animation aus, Mesh bleibt sichtbar)
- Orb-Opazitaeten reduziert, damit das Mesh den primaeren Akzent setzt

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.4.0 (Adresse Würzburg, Fernwartung, lebendigere Optik)*
+*Zuletzt aktualisiert: Mai 2026 — v1.5.0 (animiertes Knoten-Mesh im Hero)*

css/style.css

@@ -88,6 +88,48 @@ html {
                 0 0 48px rgba(6, 115, 145, 0.06);
 }
 
+/* ---- Hero Mesh: animiertes Knoten-Netz im Logo-Stil ---- */
+.hero-mesh {
+    opacity: 0.55;
+    mix-blend-mode: screen;
+}
+
+.mesh-lines line {
+    stroke-opacity: 0.25;
+    stroke-dasharray: 4 8;
+    animation: line-flow 6s linear infinite;
+}
+
+.mesh-lines line:nth-child(3n)   { animation-duration: 9s;  stroke-opacity: 0.18; }
+.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; }
+}
+
+.node {
+    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; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .mesh-lines line,
+    .node { animation: none !important; }
+}
+
 /* ---- Floating Orbs (Hero) ---- */
 .orb {
     filter: blur(64px);

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.4.0</span>
+                    <span class="text-ci-gray/60 text-xs">v1.5.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>

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.4.0</span>
+                    <span class="text-ci-gray/60 text-xs">v1.5.0</span>
                 </div>
                 <div class="flex items-center gap-6">
                     <a href="impressum.html" class="text-sonith text-sm">Impressum</a>

index.html

@@ -128,9 +128,51 @@
         <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-40"></div>
+        <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-25"></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-30"></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
+             und transportiert visuell die MSP-/Netzwerk-Kompetenz.
+             Linien pulsieren mit Datenfluss-Effekt, Knoten leuchten zyklisch auf. -->
+        <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">
+                <line x1="180"  y1="140" x2="380"  y2="90"/>
+                <line x1="180"  y1="140" x2="140"  y2="380"/>
+                <line x1="180"  y1="140" x2="300"  y2="540"/>
+                <line x1="380"  y1="90"  x2="620"  y2="180"/>
+                <line x1="620"  y1="180" x2="880"  y2="110"/>
+                <line x1="620"  y1="180" x2="520"  y2="460"/>
+                <line x1="880"  y1="110" x2="1080" y2="280"/>
+                <line x1="1080" y1="280" x2="980"  y2="480"/>
+                <line x1="980"  y1="480" x2="740"  y2="540"/>
+                <line x1="740"  y1="540" x2="520"  y2="460"/>
+                <line x1="740"  y1="540" x2="860"  y2="720"/>
+                <line x1="520"  y1="460" x2="300"  y2="540"/>
+                <line x1="520"  y1="460" x2="560"  y2="700"/>
+                <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 -->
+            <g class="mesh-nodes" fill="#DEDC1E">
+                <circle class="node" cx="180"  cy="140" r="4"/>
+                <circle class="node" cx="380"  cy="90"  r="3"/>
+                <circle class="node" cx="620"  cy="180" r="5"/>
+                <circle class="node" cx="880"  cy="110" r="3.5"/>
+                <circle class="node" cx="1080" cy="280" r="4"/>
+                <circle class="node" cx="980"  cy="480" r="3"/>
+                <circle class="node" cx="740"  cy="540" r="4.5"/>
+                <circle class="node" cx="520"  cy="460" r="3.5"/>
+                <circle class="node" cx="300"  cy="540" r="3"/>
+                <circle class="node" cx="140"  cy="380" r="4"/>
+                <circle class="node" cx="560"  cy="700" r="3"/>
+                <circle class="node" cx="860"  cy="720" r="3.5"/>
+            </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>
@@ -470,7 +512,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.4.0</span>
+                    <span class="text-ci-gray/60 text-xs">v1.5.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>