techadmin/sonith-website
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: Würzburg-Adresse, Fernwartung & lebendigere Optik (v1.4.0)

Browse Source 
- Würzburger Niederlassung: Am Schlossgarten 1, 97076 Würzburg
- Helpdesk-URL korrigiert: helpdesk.sonith.de → hilfe.sonith.de
- Fernwartungs-Link (ISL Light Client) als 4. Direktkontakt-Karte und
  zusätzlich im Mobile-Menü
- Hero: drei animierte Floating-Orbs (Petrol & Sonith) für mehr Lebendigkeit,
  prefers-reduced-motion respektiert
- Service-Cards: Akzentfarbe alterniert zwischen Sonith-Gelb und Petrol —
  bricht den monotonen Eindruck, beide CI-Farben kommen zur Geltung
- USP-Cards: subtile Pulse-Aura beim Hover über den Icon-Kreisen

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dominik Höfling
2026-05-04 23:43:51 +02:00
parent f879f1cda6
commit 8e729905f7
5 changed files with 105 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+1 -1
View File
@@ -73,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.
---
*Zuletzt aktualisiert: Mai 2026 — v1.3.0 (Standorte Würzburg/Rüdenau, dynamischer Header)*
*Zuletzt aktualisiert: Mai 2026 — v1.4.0 (Adresse Würzburg, Fernwartung, lebendigere Optik)*
css/style.css
+60 -1
View File
@@ -88,7 +88,41 @@ html {
0 0 48px rgba(6, 115, 145, 0.06);
}
/* ---- USP Cards ---- */
/* ---- Floating Orbs (Hero) ---- */
.orb {
filter: blur(64px);
pointer-events: none;
will-change: transform;
}
.orb-petrol {
background: radial-gradient(circle, #067391 0%, transparent 70%);
animation: drift 14s ease-in-out infinite;
}
.orb-petrol-2 {
background: radial-gradient(circle, #045066 0%, transparent 70%);
animation: drift 18s ease-in-out infinite reverse;
}
.orb-sonith {
background: radial-gradient(circle, #DEDC1E 0%, transparent 70%);
animation: drift 20s ease-in-out infinite;
animation-delay: -6s;
}
@keyframes drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.08); }
66% { transform: translate(-30px, 25px) scale(0.95); }
}
/* Auf reduzierten Bewegungswunsch achten (a11y) */
@media (prefers-reduced-motion: reduce) {
.orb { animation: none !important; }
}
/* ---- USP Cards (mit subtiler Pulse-Aura auf Icon-Kreisen) ---- */
.usp-card {
transition: transform 0.3s ease;
}
@@ -97,6 +131,31 @@ html {
transform: translateY(-4px);
}
.usp-card > div:first-child {
position: relative;
}
.usp-card > div:first-child::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 9999px;
background: radial-gradient(circle, rgba(222, 220, 30, 0.18) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.usp-card:hover > div:first-child::before {
opacity: 1;
animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.18); opacity: 1; }
}
/* ---- Team Cards ---- */
.team-card {
transition: transform 0.3s ease;
datenschutz.html
+1 -1
View File
@@ -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.3.0</span>
<span class="text-ci-gray/60 text-xs">v1.4.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>
impressum.html
+1 -1
View File
@@ -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.3.0</span>
<span class="text-ci-gray/60 text-xs">v1.4.0</span>
</div>
<div class="flex items-center gap-6">
<a href="impressum.html" class="text-sonith text-sm">Impressum</a>
index.html
+42 -24
View File
@@ -82,7 +82,7 @@
<a href="#warum-sonith" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Warum sonith</a>
<a href="#team" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Team</a>
<a href="#kontakt" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Kontakt</a>
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
<a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
class="inline-flex items-center gap-2 px-5 py-2.5 bg-sonith text-dark font-semibold text-sm rounded-lg hover:bg-sonith-light transition-colors">
<!-- External Link Icon -->
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -111,8 +111,10 @@
<a href="#warum-sonith" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Warum sonith</a>
<a href="#team" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Team</a>
<a href="#kontakt" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Kontakt</a>
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
<a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
class="block px-4 py-3 text-sonith font-semibold hover:bg-dark/50 rounded-lg transition-colors">Helpdesk</a>
<a href="https://fernwartung.sonith.de/start/ISLLightClient" target="_blank" rel="noopener"
class="block px-4 py-3 text-petrol-light font-semibold hover:bg-dark/50 rounded-lg transition-colors">Fernwartung</a>
</div>
</div>
</nav>
@@ -121,9 +123,14 @@
HERO
============================================================ -->
<section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
<!-- Background Pattern: Sonith-Gelb oben rechts, Petrol (CI-Stoererfarbe) unten links -->
<!-- Background: Petrol/Sonith-Gradients + animierte 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.18)_0%,_transparent_55%)]"></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-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>
<!-- 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>
@@ -144,7 +151,7 @@
class="inline-flex items-center justify-center px-8 py-4 bg-sonith text-dark font-bold rounded-lg hover:bg-sonith-light transition-all hover:shadow-lg hover:shadow-sonith/20 text-center">
Kontakt aufnehmen
</a>
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
<a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
class="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-petrol text-petrol-light font-semibold rounded-lg hover:bg-petrol/10 hover:border-petrol-light hover:text-white transition-all text-center">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
@@ -188,9 +195,9 @@
</div>
<!-- Managed Backup -->
<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 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">
<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 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"/>
</svg>
</div>
@@ -210,9 +217,9 @@
</div>
<!-- Nextcloud -->
<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 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">
<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 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"/>
</svg>
</div>
@@ -232,9 +239,9 @@
</div>
<!-- ERP-Systeme -->
<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 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">
<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 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"/>
</svg>
</div>
@@ -358,9 +365,9 @@
</div>
<!-- Direktkontakt -->
<div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Telefon -->
<a href="tel:+4993130699090" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
<a href="tel:+4993130699090" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/40 transition-all duration-300">
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 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="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
@@ -371,7 +378,7 @@
</a>
<!-- E-Mail -->
<a href="mailto:mail@sonith.de" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
<a href="mailto:mail@sonith.de" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/40 transition-all duration-300">
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 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="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
@@ -381,16 +388,27 @@
<p class="text-ci-gray text-sm">mail@sonith.de</p>
</a>
<!-- Remote-Support -->
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 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">
<!-- Helpdesk / Ticket-System -->
<a href="https://hilfe.sonith.de" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
<div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center mx-auto mb-4 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="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"/>
</svg>
</div>
<h3 class="text-sm font-semibold text-white mb-1">Helpdesk</h3>
<p class="text-ci-gray text-sm">Support-Ticket erstellen</p>
</a>
<!-- Fernwartung (ISL Light) -->
<a href="https://fernwartung.sonith.de/start/ISLLightClient" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
<div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center mx-auto mb-4 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="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m0-3.75V12a2.25 2.25 0 00-2.25-2.25h-4.5A2.25 2.25 0 006 12v1.5m9 0H6m9 0v.75A2.25 2.25 0 0112.75 16.5h-1.5A2.25 2.25 0 019 14.25v-.75M12 7.5V4.5m-3 3h6"/>
</svg>
</div>
<h3 class="text-sm font-semibold text-white mb-1">Fernwartung</h3>
<p class="text-ci-gray text-sm">ISL Light starten</p>
</a>
</div>
<!-- Standorte: zweimal in Franken -->
@@ -413,9 +431,9 @@
<div class="text-left">
<p class="text-petrol-light text-xs font-semibold tracking-widest uppercase mb-1">Niederlassung</p>
<h4 class="text-xl font-bold text-white mb-2">Würzburg</h4>
<!-- TODO: Adresse Wuerzburg eintragen -->
<p class="text-ci-gray-light text-sm leading-relaxed">
<span class="italic text-ci-gray">[Straße &amp; Hausnummer]<br>[PLZ Würzburg]</span>
Am Schlossgarten 1<br>
97076 Würzburg
</p>
</div>
</div>
@@ -452,7 +470,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.3.0</span>
<span class="text-ci-gray/60 text-xs">v1.4.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>