From 4b95cd1c588c88c391c5c7fb3fa48e67697b9b90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20H=C3=B6fling?= Date: Tue, 5 May 2026 00:24:34 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Cluster=20gr=C3=B6=C3=9Fer=20+=20Hover-R?= =?UTF-8?q?ing=20an=20Au=C3=9Fenknoten=20(v1.6.1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- CLAUDE.md | 2 +- css/style.css | 25 ++++++++++++++++++++++ datenschutz.html | 2 +- impressum.html | 2 +- index.html | 55 ++++++++++++++++++++++++++---------------------- 5 files changed, 58 insertions(+), 28 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 5e7fe98..ac35b86 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.6.0 (Hero im Goldenen Schnitt, Cluster als Service-Picker)* +*Zuletzt aktualisiert: Mai 2026 — v1.6.1 (Cluster vergrößert, Hover-Ring an Außenknoten)* diff --git a/css/style.css b/css/style.css index c228917..d2ed994 100644 --- a/css/style.css +++ b/css/style.css @@ -168,6 +168,30 @@ html { 50% { transform: scale(1.18); opacity: 1; } } +/* Hover-Ring um Aussenknoten — analog zum Center-Ring, aber nur waehrend Hover/Focus. + Initial unsichtbar; beim Hover wird er sichtbar und pulsiert. */ +.hover-ring { + fill: none; + stroke: #DEDC1E; + stroke-width: 1.8; + stroke-opacity: 0; + transform-box: fill-box; + transform-origin: center; + transition: stroke-opacity 0.2s ease; + pointer-events: none; +} + +.cluster-link:hover .hover-ring, +.cluster-link:focus-visible .hover-ring { + stroke-opacity: 0.7; + animation: hover-ring-pulse 1.6s ease-in-out infinite; +} + +@keyframes hover-ring-pulse { + 0%, 100% { transform: scale(1); stroke-opacity: 0.7; } + 50% { transform: scale(1.35); stroke-opacity: 0.15; } +} + /* Klickflaeche: unsichtbarer groesserer Kreis (bessere Mausziel-Groesse) */ .node-hit { fill: transparent; @@ -204,6 +228,7 @@ html { @media (prefers-reduced-motion: reduce) { .logo-cluster line, .cluster-ring, + .hover-ring, .node { animation: none !important; } } diff --git a/datenschutz.html b/datenschutz.html index 10cdb61..b0bfde0 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -208,7 +208,7 @@

© 2026 sonith UG (haftungsbeschränkt)

- v1.6.0 + v1.6.1
Impressum diff --git a/impressum.html b/impressum.html index 23a2e4d..64788cb 100644 --- a/impressum.html +++ b/impressum.html @@ -91,7 +91,7 @@

© 2026 sonith UG (haftungsbeschränkt)

- v1.6.0 + v1.6.1
Impressum diff --git a/index.html b/index.html index d480231..31fa500 100644 --- a/index.html +++ b/index.html @@ -161,60 +161,65 @@
+ Jeder Knoten ist ein Anker zu seiner Leistungs-Karte; jeder Aussenknoten + erhaelt beim Hover einen pulsierenden Ring analog zum Center. -->
- - + - - - - - + + + + + + - - + + Managed Services - - + + - + ERP-Systeme - - + + + Managed Backup - - + + + Hosting - - + + + Netzwerk & Infrastruktur - - + + + Nextcloud - - + + + -

Knoten klicken — direkt zur Leistung

@@ -526,7 +531,7 @@

© 2026 sonith UG (haftungsbeschränkt)

- v1.6.0 + v1.6.1
Impressum