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>
feat: animiertes Knoten-Mesh im Hero (v1.5.0)
2026-05-05 00:04:59 +02:00 · 2026-05-04 23:50:14 +02:00
5 changed files with 139 additions and 7 deletions
@@ -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.1 (Mesh als Logo-Cluster überarbeitet)*
@@ -88,6 +88,83 @@ html {
                0 0 48px rgba(6, 115, 145, 0.06);
 }

+/* ---- 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);
@@ -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.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>
@@ -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.1</span>
                </div>
                <div class="flex items-center gap-6">
                    <a href="impressum.html" class="text-sonith text-sm">Impressum</a>
@@ -128,9 +128,64 @@
        <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-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-25"></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 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>
@@ -470,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.4.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>