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

feat: Standorte Würzburg/Rüdenau & dynamischer Header (v1.3.0)

Browse Source 
- Header wächst beim ersten Eindruck auf 7rem (Logo h-18) und schrumpft
  beim Scrollen auf 5rem (Logo h-10) — Logo gewinnt oben mehr Praesenz,
  bleibt beim Lesen aber kompakt
- Kontakt-Sektion umstrukturiert:
  - Direktkontakt (Telefon, E-Mail, Helpdesk) als 3er-Grid
  - Neue Untersektion „Unsere Standorte" mit zwei Karten
- Standorte: Würzburg (Niederlassung, Adresse als TODO-Platzhalter) und
  Rüdenau (Hauptsitz lt. Handelsregister)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dominik Höfling
2026-05-04 23:30:35 +02:00
parent 380924ffdb
commit f879f1cda6
5 changed files with 77 additions and 19 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.2.0 (echtes Logo + Team-Mitglieder)* *Zuletzt aktualisiert: Mai 2026 — v1.3.0 (Standorte Würzburg/Rüdenau, dynamischer Header)*
css/style.css
+20
View File
@@ -21,6 +21,26 @@ html {
box-shadow: 0 1px 0 rgba(6, 115, 145, 0.2); box-shadow: 0 1px 0 rgba(6, 115, 145, 0.2);
} }
/* Header schrumpft beim Scrollen: gross & einladend oben, kompakt waehrend des Lesens */
.nav-row {
height: 6rem;
transition: height 0.3s ease;
}
.nav-logo {
height: 3.5rem;
transition: height 0.3s ease;
}
@media (min-width: 1024px) {
.nav-row { height: 7rem; }
.nav-logo { height: 4.5rem; }
}
#navbar.scrolled .nav-row { height: 4rem; }
#navbar.scrolled .nav-logo { height: 2.25rem; }
@media (min-width: 1024px) {
#navbar.scrolled .nav-row { height: 5rem; }
#navbar.scrolled .nav-logo { height: 2.5rem; }
}
/* Active nav link */ /* Active nav link */
.nav-link.active { .nav-link.active {
color: #DEDC1E; color: #DEDC1E;
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 flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p> <p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-ci-gray/60 text-xs">v1.2.0</span> <span class="text-ci-gray/60 text-xs">v1.3.0</span>
</div> </div>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a> <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 flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p> <p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-ci-gray/60 text-xs">v1.2.0</span> <span class="text-ci-gray/60 text-xs">v1.3.0</span>
</div> </div>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<a href="impressum.html" class="text-sonith text-sm">Impressum</a> <a href="impressum.html" class="text-sonith text-sm">Impressum</a>
index.html
+54 -16
View File
@@ -70,10 +70,10 @@
============================================================ --> ============================================================ -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"> <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-20"> <div class="nav-row flex items-center justify-between">
<!-- Logo --> <!-- Logo -->
<a href="#hero" class="flex items-center shrink-0" aria-label="sonith Startseite"> <a href="#hero" class="flex items-center shrink-0" aria-label="sonith Startseite">
<img src="img/logo-light.svg" alt="sonith" class="h-9 lg:h-10 w-auto"> <img src="img/logo-light.svg" alt="sonith" class="nav-logo w-auto">
</a> </a>
<!-- Desktop Menu --> <!-- Desktop Menu -->
@@ -357,7 +357,8 @@
<p class="mt-4 text-ci-gray text-lg">Wir freuen uns auf Ihre Anfrage.</p> <p class="mt-4 text-ci-gray text-lg">Wir freuen uns auf Ihre Anfrage.</p>
</div> </div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto"> <!-- Direktkontakt -->
<div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
<!-- Telefon --> <!-- 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/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"> <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">
@@ -380,18 +381,6 @@
<p class="text-ci-gray text-sm">mail@sonith.de</p> <p class="text-ci-gray text-sm">mail@sonith.de</p>
</a> </a>
<!-- Adresse -->
<div class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30">
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4">
<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="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
</svg>
</div>
<h3 class="text-sm font-semibold text-white mb-1">Adresse</h3>
<p class="text-ci-gray text-sm">Kleinheubacher Str. 7<br>63924 Rüdenau</p>
</div>
<!-- Remote-Support --> <!-- 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"> <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"> <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">
@@ -403,6 +392,55 @@
<p class="text-ci-gray text-sm">Support-Ticket erstellen</p> <p class="text-ci-gray text-sm">Support-Ticket erstellen</p>
</a> </a>
</div> </div>
<!-- Standorte: zweimal in Franken -->
<div class="text-center max-w-3xl mx-auto mt-20 mb-10 fade-in">
<p class="text-petrol-light font-semibold text-sm tracking-widest uppercase mb-3">Vor Ort</p>
<h3 class="text-2xl sm:text-3xl font-bold text-white">Unsere Standorte</h3>
<p class="mt-3 text-ci-gray">Zweimal in Franken — kurze Wege zu unseren Kunden.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- Standort Wuerzburg -->
<div class="contact-card group bg-dark-light rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/60 transition-all duration-300">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center shrink-0 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="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
</svg>
</div>
<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>
</p>
</div>
</div>
</div>
<!-- Standort Ruedenau (Hauptsitz lt. Handelsregister) -->
<div class="contact-card group bg-dark-light rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/60 transition-all duration-300">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center shrink-0 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="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
</svg>
</div>
<div class="text-left">
<p class="text-petrol-light text-xs font-semibold tracking-widest uppercase mb-1">Hauptsitz</p>
<h4 class="text-xl font-bold text-white mb-2">Rüdenau</h4>
<p class="text-ci-gray-light text-sm leading-relaxed">
Kleinheubacher Str. 7<br>
63924 Rüdenau
</p>
</div>
</div>
</div>
</div>
</div> </div>
</section> </section>
@@ -414,7 +452,7 @@
<div class="flex flex-col sm:flex-row items-center justify-between gap-4"> <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p> <p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-ci-gray/60 text-xs">v1.2.0</span> <span class="text-ci-gray/60 text-xs">v1.3.0</span>
</div> </div>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a> <a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>