fix: Cluster größer + Hover-Ring an Außenknoten (v1.6.1)
- Hint-Text „Knoten klicken — direkt zur Leistung" entfernt - Cluster ~25 % vergroessert (viewBox 880x690 statt 700x550, alle Koordinaten und Radien proportional skaliert; node-Radien 30/18 statt 24/14, ring r 55 statt 44) - Neuer .hover-ring pro Aussenknoten: initial unsichtbar, wird beim Hover oder Tastatur-Focus sichtbar und pulsiert exakt wie der Center-Ring (scale 1.0 → 1.35, stroke-opacity 0.7 → 0.15, 1.6s ease-in-out) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
+30
-25
@@ -161,60 +161,65 @@
|
||||
</div>
|
||||
|
||||
<!-- Cluster-Spalte (1 fr) — Sonith-Logo-Stern als interaktiver Service-Picker.
|
||||
Jeder Knoten ist ein Anker zu seiner Leistungs-Karte. -->
|
||||
Jeder Knoten ist ein Anker zu seiner Leistungs-Karte; jeder Aussenknoten
|
||||
erhaelt beim Hover einen pulsierenden Ring analog zum Center. -->
|
||||
<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 -->
|
||||
<svg class="hero-cluster w-full h-auto" viewBox="0 0 880 690" aria-label="Leistungsuebersicht: klicken Sie einen Knoten, um zur entsprechenden Leistung zu springen">
|
||||
<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"/>
|
||||
<!-- Strahlenfoermige Linien vom Center zu den Aussenknoten -->
|
||||
<line x1="313" y1="350" x2="172" y2="170"/>
|
||||
<line x1="313" y1="350" x2="508" y2="178"/>
|
||||
<line x1="313" y1="350" x2="770" y2="344"/>
|
||||
<line x1="313" y1="350" x2="110" y2="352"/>
|
||||
<line x1="313" y1="350" x2="326" y2="499"/>
|
||||
|
||||
<!-- Pulsierender Ring (Logo-Markenzeichen) -->
|
||||
<circle class="cluster-ring" cx="250" cy="280" r="44"/>
|
||||
<!-- Pulsierender Ring um Center (Logo-Markenzeichen) -->
|
||||
<circle class="cluster-ring" cx="313" cy="350" r="55"/>
|
||||
|
||||
<!-- 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"/>
|
||||
<circle class="node node-center" cx="313" cy="350" r="30"/>
|
||||
<circle class="node-hit" cx="313" cy="350" r="50"/>
|
||||
</a>
|
||||
|
||||
<!-- Außenknoten — jeder verlinkt eine Leistungs-Karte -->
|
||||
<!-- Aussenknoten: hover-ring (versteckt) + node + unsichtbare Hit-Area -->
|
||||
<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"/>
|
||||
<circle class="hover-ring" cx="172" cy="170" r="30"/>
|
||||
<circle class="node" cx="172" cy="170" r="18"/>
|
||||
<circle class="node-hit" cx="172" cy="170" r="32"/>
|
||||
</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"/>
|
||||
<circle class="hover-ring" cx="508" cy="178" r="30"/>
|
||||
<circle class="node" cx="508" cy="178" r="18"/>
|
||||
<circle class="node-hit" cx="508" cy="178" r="32"/>
|
||||
</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"/>
|
||||
<circle class="hover-ring" cx="770" cy="344" r="30"/>
|
||||
<circle class="node" cx="770" cy="344" r="18"/>
|
||||
<circle class="node-hit" cx="770" cy="344" r="32"/>
|
||||
</a>
|
||||
|
||||
<a href="#service-network" class="cluster-link">
|
||||
<title>Netzwerk & Infrastruktur</title>
|
||||
<circle class="node" cx="88" cy="282" r="14"/>
|
||||
<circle class="node-hit" cx="88" cy="282" r="26"/>
|
||||
<circle class="hover-ring" cx="110" cy="352" r="30"/>
|
||||
<circle class="node" cx="110" cy="352" r="18"/>
|
||||
<circle class="node-hit" cx="110" cy="352" r="32"/>
|
||||
</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"/>
|
||||
<circle class="hover-ring" cx="326" cy="499" r="30"/>
|
||||
<circle class="node" cx="326" cy="499" r="18"/>
|
||||
<circle class="node-hit" cx="326" cy="499" r="32"/>
|
||||
</a>
|
||||
</g>
|
||||
</svg>
|
||||
<p class="cluster-hint text-center text-xs text-ci-gray/80 tracking-widest uppercase mt-4">Knoten klicken — direkt zur Leistung</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -526,7 +531,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">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.0</span>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.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>
|
||||
|
||||
Reference in New Issue
Block a user