From 57039e188b352b4dca199cb0cf6a669d0aa1871c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20H=C3=B6fling?= <d.hoefling@sonith.de>
Date: Tue, 5 May 2026 00:16:05 +0200
Subject: [PATCH] feat: Hero im Goldenen Schnitt, Cluster als interaktiver
 Service-Picker (v1.6.0)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 CLAUDE.md        |   2 +-
 css/style.css    | 114 ++++++++++++++++++++++++++-------------
 datenschutz.html |   2 +-
 impressum.html   |   2 +-
 index.html       | 137 ++++++++++++++++++++++++-----------------------
 5 files changed, 150 insertions(+), 107 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 75f027f..5e7fe98 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -73,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.
 
 ---
 
-*Zuletzt aktualisiert: Mai 2026 — v1.5.1 (Mesh als Logo-Cluster überarbeitet)*
+*Zuletzt aktualisiert: Mai 2026 — v1.6.0 (Hero im Goldenen Schnitt, Cluster als Service-Picker)*
diff --git a/css/style.css b/css/style.css
index 974dfcb..c228917 100644
--- a/css/style.css
+++ b/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; }
 }
diff --git a/datenschutz.html b/datenschutz.html
index f044a16..10cdb61 100644
--- a/datenschutz.html
+++ b/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.1</span>
+                    <span class="text-ci-gray/60 text-xs">v1.6.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>
diff --git a/impressum.html b/impressum.html
index 18c8cfb..23a2e4d 100644
--- a/impressum.html
+++ b/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.1</span>
+                    <span class="text-ci-gray/60 text-xs">v1.6.0</span>
                 </div>
                 <div class="flex items-center gap-6">
                     <a href="impressum.html" class="text-sonith text-sm">Impressum</a>
diff --git a/index.html b/index.html
index 1d82e27..d480231 100644
--- a/index.html
+++ b/index.html
@@ -120,78 +120,22 @@
     </nav>
 
     <!-- ============================================================
-         HERO
+         HERO  —  Goldener-Schnitt-Grid (Content 1.618 : Cluster 1)
          ============================================================ -->
     <section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
-        <!-- Background: Petrol/Sonith-Gradients + animierte Floating-Orbs -->
+        <!-- Background: Petrol/Sonith-Gradients + 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.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>
 
-        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
-            <div class="max-w-3xl">
+        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 w-full">
+            <div class="hero-grid">
+                <!-- Content-Spalte (1.618 fr) -->
                 <div class="fade-in">
                     <p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-4">Managed Service Provider</p>
                     <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight">
@@ -215,6 +159,63 @@
                         </a>
                     </div>
                 </div>
+
+                <!-- Cluster-Spalte (1 fr) — Sonith-Logo-Stern als interaktiver Service-Picker.
+                     Jeder Knoten ist ein Anker zu seiner Leistungs-Karte. -->
+                <div class="cluster-wrapper relative">
+                    <svg class="hero-cluster w-full h-auto" viewBox="0 0 700 550" aria-label="Leistungsuebersicht: klicken Sie einen Knoten, um zur entsprechenden Leistung zu springen">
+                        <!-- Strahlenfoermige Linien vom Center -->
+                        <g class="logo-cluster">
+                            <line x1="250" y1="280" x2="138" y2="136"/>
+                            <line x1="250" y1="280" x2="406" y2="142"/>
+                            <line x1="250" y1="280" x2="616" y2="275"/>
+                            <line x1="250" y1="280" x2="88"  y2="282"/>
+                            <line x1="250" y1="280" x2="261" y2="399"/>
+
+                            <!-- Pulsierender Ring (Logo-Markenzeichen) -->
+                            <circle class="cluster-ring" cx="250" cy="280" r="44"/>
+
+                            <!-- Center-Knoten = Managed Services (Hauptleistung) -->
+                            <a href="#service-managed-services" class="cluster-link">
+                                <title>Managed Services</title>
+                                <circle class="node node-center" cx="250" cy="280" r="24"/>
+                                <circle class="node-hit" cx="250" cy="280" r="38"/>
+                            </a>
+
+                            <!-- Außenknoten — jeder verlinkt eine Leistungs-Karte -->
+                            <a href="#service-erp" class="cluster-link">
+                                <title>ERP-Systeme</title>
+                                <circle class="node" cx="138" cy="136" r="14"/>
+                                <circle class="node-hit" cx="138" cy="136" r="26"/>
+                            </a>
+
+                            <a href="#service-backup" class="cluster-link">
+                                <title>Managed Backup</title>
+                                <circle class="node" cx="406" cy="142" r="14"/>
+                                <circle class="node-hit" cx="406" cy="142" r="26"/>
+                            </a>
+
+                            <a href="#service-hosting" class="cluster-link">
+                                <title>Hosting</title>
+                                <circle class="node" cx="616" cy="275" r="14"/>
+                                <circle class="node-hit" cx="616" cy="275" r="26"/>
+                            </a>
+
+                            <a href="#service-network" class="cluster-link">
+                                <title>Netzwerk &amp; Infrastruktur</title>
+                                <circle class="node" cx="88" cy="282" r="14"/>
+                                <circle class="node-hit" cx="88" cy="282" r="26"/>
+                            </a>
+
+                            <a href="#service-nextcloud" class="cluster-link">
+                                <title>Nextcloud</title>
+                                <circle class="node" cx="261" cy="399" r="14"/>
+                                <circle class="node-hit" cx="261" cy="399" r="26"/>
+                            </a>
+                        </g>
+                    </svg>
+                    <p class="cluster-hint text-center text-xs text-ci-gray/80 tracking-widest uppercase mt-4">Knoten klicken &mdash; direkt zur Leistung</p>
+                </div>
             </div>
         </div>
 
@@ -239,7 +240,7 @@
 
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
                 <!-- Managed Services -->
-                <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 id="service-managed-services" class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300 scroll-mt-32">
                     <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">
                             <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"/>
@@ -250,7 +251,7 @@
                 </div>
 
                 <!-- Managed Backup -->
-                <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 id="service-backup" class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300 scroll-mt-32">
                     <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"/>
@@ -261,7 +262,7 @@
                 </div>
 
                 <!-- Hosting -->
-                <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 id="service-hosting" class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300 scroll-mt-32">
                     <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">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"/>
@@ -272,7 +273,7 @@
                 </div>
 
                 <!-- Nextcloud -->
-                <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 id="service-nextcloud" class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300 scroll-mt-32">
                     <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"/>
@@ -283,7 +284,7 @@
                 </div>
 
                 <!-- Netzwerk & Infrastruktur -->
-                <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 id="service-network" class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300 scroll-mt-32">
                     <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">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z"/>
@@ -294,7 +295,7 @@
                 </div>
 
                 <!-- ERP-Systeme -->
-                <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 id="service-erp" class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300 scroll-mt-32">
                     <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"/>
@@ -525,7 +526,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.1</span>
+                    <span class="text-ci-gray/60 text-xs">v1.6.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>