feat: Hero im Goldenen Schnitt, Cluster als interaktiver Service-Picker (v1.6.0)

- Hero-Layout: zweispaltiges Grid 1.618 : 1 (Goldener Schnitt) — Content
  links, Logo-Cluster rechts; auf Mobile (<lg) gestackt, Cluster ausgeblendet
- Nur noch ein Cluster (statt drei) — groesser, dominanter, das exakte Logo-
  Motiv: Center-Knoten + pulsierender Ring + 5 strahlenfoermige Linien zu
  Aussenknoten in originaler Logo-Anordnung
- Jeder Knoten ist Anker-Link zu einer Leistungs-Karte:
    Center  → Managed Services    (Hauptleistung)
    TR      → Managed Backup
    R       → Hosting
    TL      → ERP-Systeme
    L       → Netzwerk & Infrastruktur
    B       → Nextcloud
- Hover/Focus-Verstaerkung: Knoten skalieren auf 1.7x (Center 1.35x), kraeftiger
  Doppel-Glow, Animation pausiert bei Hover
- Vergroesserte unsichtbare Klickflaeche (.node-hit) fuer komfortable Trefferquote
- Native SVG-Tooltips per <title>; smooth-scroll dank scroll-mt-32 an Karten
- a11y: aria-label am SVG, focus-visible Hervorhebung, prefers-reduced-motion

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

css/style.css

@@ -88,79 +88,121 @@ 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;
+/* ---- Hero-Grid (Goldener Schnitt) ---- */
+.hero-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+@media (min-width: 1024px) {
+    .hero-grid {
+        grid-template-columns: 1.618fr 1fr;  /* Goldener Schnitt: Content : Cluster */
+        gap: 4rem;
+    }
+}
+
+/* Cluster-Wrapper: auf Mobile ausgeblendet (Knoten sind Touch-empfindlich,
+   das gehoert in eine ruhige Desktop-Praesentation; Mobile-User nutzen das Menue). */
+.cluster-wrapper { display: none; }
+@media (min-width: 1024px) {
+    .cluster-wrapper { display: block; }
+}
+
+/* ---- Hero-Cluster: Sonith-Logo-Stern als interaktiver Service-Picker ----
+   Greift das exakte Logo-Motiv auf — zentraler Knoten mit pulsierendem Ring +
+   5 strahlenfoermige Linien zu Aussenknoten in der originalen Logo-Anordnung
+   (asymmetrisch nach rechts verlaengert). Jeder Knoten ist Anker-Link. */
+.hero-cluster {
+    overflow: visible;
+    filter: drop-shadow(0 0 60px rgba(6, 115, 145, 0.18));
 }
 
 .logo-cluster line {
     stroke: #067391;
-    stroke-width: 1.6;
+    stroke-width: 2;
     stroke-linecap: round;
-    stroke-opacity: 0.45;
+    stroke-opacity: 0.55;
     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;
+    stroke-width: 1.8;
+    stroke-opacity: 0.6;
     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; }
+    0%, 100% { transform: scale(1);    stroke-opacity: 0.6;  }
+    50%      { transform: scale(1.22); stroke-opacity: 0.18; }
 }
 
+/* Knoten — gefuellte Kreise mit Glow + asynchroner Pulse */
 .node {
     fill: #DEDC1E;
-    filter: drop-shadow(0 0 5px rgba(222, 220, 30, 0.5));
+    filter: drop-shadow(0 0 6px rgba(222, 220, 30, 0.55));
     transform-box: fill-box;
     transform-origin: center;
     animation: node-pulse 3.6s ease-in-out infinite;
+    transition: transform 0.25s ease, filter 0.25s ease;
+}
+
+.node-center {
+    animation-duration: 3.0s;
+    filter: drop-shadow(0 0 14px rgba(222, 220, 30, 0.75));
 }
 
 @keyframes node-pulse {
-    0%, 100% { transform: scale(1);   opacity: 0.55; }
-    50%      { transform: scale(1.5); opacity: 1;    }
+    0%, 100% { transform: scale(1);    opacity: 0.7; }
+    50%      { transform: scale(1.18); opacity: 1;   }
+}
+
+/* Klickflaeche: unsichtbarer groesserer Kreis (bessere Mausziel-Groesse) */
+.node-hit {
+    fill: transparent;
+    cursor: pointer;
+    pointer-events: all;
+}
+
+/* Hover-Verstaerkung: der zugehoerige sichtbare Knoten reagiert kraeftig */
+.cluster-link { cursor: pointer; }
+
+.cluster-link:hover .node,
+.cluster-link:focus-visible .node {
+    transform: scale(1.7);
+    filter: drop-shadow(0 0 16px rgba(222, 220, 30, 1))
+            drop-shadow(0 0 30px rgba(222, 220, 30, 0.6));
+    animation-play-state: paused;
+}
+
+.cluster-link:hover .node-center,
+.cluster-link:focus-visible .node-center {
+    transform: scale(1.35);
+    filter: drop-shadow(0 0 24px rgba(222, 220, 30, 1))
+            drop-shadow(0 0 50px rgba(222, 220, 30, 0.7));
+}
+
+.cluster-link:focus-visible {
+    outline: none;
+}
+.cluster-link:focus-visible .node {
+    stroke: #DEDC1E;
+    stroke-width: 2;
 }
 
 @media (prefers-reduced-motion: reduce) {
     .logo-cluster line,
-    .cluster-core,
     .cluster-ring,
     .node { animation: none !important; }
 }