commit dc51be2da14ba023903bfdf394e766225a908f89 Author: Dominik Höfling Date: Wed Mar 18 07:45:25 2026 +0100 feat: Statischer One-Pager für sonith.de Kompletter Relaunch als statische Website: - index.html: One-Pager mit Hero, Leistungen, USPs, Team, Kontakt - impressum.html + datenschutz.html: Separate Unterseiten - TailwindCSS via CDN, Custom Styles, Scroll-Animationen - Mobile Menu, Scroll-Spy, Fade-in Animationen - Farbschema: Dunkel-modern mit Sonith-Gelb (#DEDC1B) Co-Authored-By: Claude Opus 4.6 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6fab0b1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,13 @@ +# OS +.DS_Store +Thumbs.db + +# Editor +*.swp +*.swo +*~ +.vscode/ +.idea/ + +# Misc +*.log diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..85572dc --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,56 @@ +# CLAUDE.md — sonith.de Website + +> Projektspezifische Anweisungen für Claude Code. + +## Projekt + +**sonith.de** — Statischer One-Pager für die Sonith GmbH (MSP / Managed Service Provider). + +- **Repository**: https://gitea.sonith.de/techadmin/sonith-website +- **Stack**: Pures HTML + CSS + JS, TailwindCSS via CDN +- **Deployment**: Statische Dateien auf eigenem Server (Nginx) + +## Projektstruktur + +``` +sonith-website/ +├── CLAUDE.md # Diese Datei +├── index.html # One-Pager Hauptseite +├── impressum.html # Impressum (separate Seite) +├── datenschutz.html # Datenschutzerklärung (separate Seite) +├── css/ +│ └── style.css # Custom Styles (Animationen, Feintuning) +├── js/ +│ └── main.js # Mobile Menu, Smooth Scroll, Scroll-Spy +├── img/ +│ ├── logo.png # Sonith Logo (wird später ersetzt) +│ └── team/ # Team-Fotos (Platzhalter SVGs) +├── .gitignore +└── README.md +``` + +## Farbschema + +- **Primär/Akzent**: #DEDC1B (Sonith Gelb-Grün) +- **Dunkel**: #0f172a / #1e293b (Hintergründe) +- **Text hell**: #f1f5f9 +- **Text dunkel**: #1e293b +- **Grau**: #64748b (Subtexte) + +Grundstimmung: Dunkel-modern mit Sonith-Gelb als Akzent. + +## Konventionen + +- Keine Build-Tools, kein Node.js — alles statisch +- TailwindCSS ausschließlich via CDN +- Inhalte auf Deutsch +- SVG-Icons inline im HTML +- Responsive, Mobile-first + +## Deployment + +Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig. + +--- + +*Zuletzt aktualisiert: März 2026 — v1.0.0* diff --git a/README.md b/README.md new file mode 100644 index 0000000..ae23700 --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# sonith.de — Website + +Statischer One-Pager für [sonith.de](https://sonith.de). + +## Stack + +- HTML + CSS + JavaScript +- TailwindCSS (CDN) +- Kein Build-Step notwendig + +## Lokal testen + +`index.html` im Browser öffnen — fertig. + +Oder mit einem lokalen Server: + +```bash +python3 -m http.server 8080 +``` + +Dann [http://localhost:8080](http://localhost:8080) aufrufen. + +## Deployment + +Statische Dateien auf den Webserver kopieren (Nginx/Apache). + +## Struktur + +| Datei | Beschreibung | +|---|---| +| `index.html` | Hauptseite (One-Pager) | +| `impressum.html` | Impressum | +| `datenschutz.html` | Datenschutzerklärung | +| `css/style.css` | Custom Styles | +| `js/main.js` | Mobile Menu, Scroll-Spy, Animationen | +| `img/` | Bilder und Platzhalter | + +## Lizenz + +Proprietär — sonith UG (haftungsbeschränkt) diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..5f7e168 --- /dev/null +++ b/css/style.css @@ -0,0 +1,125 @@ +/* ============================================================ + sonith.de — Custom Styles + ============================================================ */ + +/* Smooth scrolling offset for fixed nav */ +html { + scroll-padding-top: 5rem; +} + +/* ---- Navbar ---- */ +#navbar { + background: rgba(15, 23, 42, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +#navbar.scrolled { + background: rgba(15, 23, 42, 0.95); + box-shadow: 0 1px 0 rgba(100, 116, 139, 0.1); +} + +/* Active nav link */ +.nav-link.active { + color: #DEDC1B; +} + +/* ---- Fade-in Animation ---- */ +.fade-in { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +/* Staggered children */ +.fade-in:nth-child(2) { transition-delay: 0.1s; } +.fade-in:nth-child(3) { transition-delay: 0.2s; } +.fade-in:nth-child(4) { transition-delay: 0.3s; } + +/* ---- Service Cards ---- */ +.service-card { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.5s ease-out, transform 0.5s ease-out, + border-color 0.3s, box-shadow 0.3s; +} + +.service-card.visible { + opacity: 1; + transform: translateY(0); +} + +.service-card:nth-child(1) { transition-delay: 0.0s; } +.service-card:nth-child(2) { transition-delay: 0.08s; } +.service-card:nth-child(3) { transition-delay: 0.16s; } +.service-card:nth-child(4) { transition-delay: 0.24s; } +.service-card:nth-child(5) { transition-delay: 0.32s; } +.service-card:nth-child(6) { transition-delay: 0.40s; } + +.service-card:hover { + box-shadow: 0 0 24px rgba(222, 220, 27, 0.06); +} + +/* ---- USP Cards ---- */ +.usp-card { + transition: transform 0.3s ease; +} + +.usp-card:hover { + transform: translateY(-4px); +} + +/* ---- Team Cards ---- */ +.team-card { + transition: transform 0.3s ease; +} + +.team-card:hover { + transform: translateY(-4px); +} + +/* ---- Contact Cards ---- */ +.contact-card { + transition: all 0.3s ease; +} + +.contact-card:hover { + transform: translateY(-2px); +} + +/* ---- Selection Color ---- */ +::selection { + background: rgba(222, 220, 27, 0.3); + color: #fff; +} + +/* ---- Scrollbar ---- */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: #0f172a; +} + +::-webkit-scrollbar-thumb { + background: #334155; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #475569; +} + +/* ---- Focus Styles ---- */ +a:focus-visible, +button:focus-visible { + outline: 2px solid #DEDC1B; + outline-offset: 2px; + border-radius: 4px; +} diff --git a/datenschutz.html b/datenschutz.html new file mode 100644 index 0000000..26137e0 --- /dev/null +++ b/datenschutz.html @@ -0,0 +1,183 @@ + + + + + + Datenschutz — sonith + + + + + + + + + + + + + + + +
+
+

Datenschutzerklärung

+ +
+ +

1. Datenschutz auf einen Blick

+ +

Allgemeine Hinweise

+

+ Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können. +

+ +

Datenerfassung auf dieser Website

+

+ Wer ist verantwortlich für die Datenerfassung auf dieser Website?
+ Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Abschnitt „Hinweis zur verantwortlichen Stelle" in dieser Datenschutzerklärung entnehmen. +

+

+ Wie erfassen wir Ihre Daten?
+ Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen (z. B. per E-Mail oder Telefon). Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs). +

+

+ Wofür nutzen wir Ihre Daten?
+ Die Daten werden erhoben, um eine fehlerfreie Bereitstellung der Website zu gewährleisten. +

+

+ Welche Rechte haben Sie bezüglich Ihrer Daten?
+ Sie haben jederzeit das Recht, unentgeltlich Auskunft über Herkunft, Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben außerdem ein Recht, die Berichtigung oder Löschung dieser Daten zu verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt haben, können Sie diese jederzeit für die Zukunft widerrufen. Hierzu sowie zu weiteren Fragen zum Thema Datenschutz können Sie sich jederzeit an uns wenden. +

+ +

2. Hosting

+

+ Wir hosten die Inhalte unserer Website auf eigenen Servern in Deutschland. Beim Besuch unserer Website erfasst der Webserver automatisch Logdateien (Server-Logfiles). Diese enthalten: +

+
    +
  • Browsertyp und Browserversion
    • +
  • Verwendetes Betriebssystem
    • +
  • Referrer URL
    • +
  • Hostname des zugreifenden Rechners
    • +
  • Uhrzeit der Serveranfrage
    • +
  • IP-Adresse
    • +
+

+ Diese Daten werden nicht mit anderen Datenquellen zusammengeführt. Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. +

+ +

3. Allgemeine Hinweise und Pflichtinformationen

+ +

Datenschutz

+

+ Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung. +

+ +

Hinweis zur verantwortlichen Stelle

+

+ Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist: +

+

+ sonith UG (haftungsbeschränkt)
+ Kleinheubacher Str. 7
+ 63924 Rüdenau

+ Telefon: 0931 30 69 90 90
+ E-Mail: mail@sonith.de +

+ +

Speicherdauer

+

+ Soweit innerhalb dieser Datenschutzerklärung keine speziellere Speicherdauer genannt wurde, verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck für die Datenverarbeitung entfällt. Wenn Sie ein berechtigtes Löschersuchen geltend machen oder eine Einwilligung zur Datenverarbeitung widerrufen, werden Ihre Daten gelöscht, sofern wir keine anderen rechtlich zulässigen Gründe für die Speicherung Ihrer personenbezogenen Daten haben. +

+ +

Widerruf Ihrer Einwilligung zur Datenverarbeitung

+

+ Viele Datenverarbeitungsvorgänge sind nur mit Ihrer ausdrücklichen Einwilligung möglich. Sie können eine bereits erteilte Einwilligung jederzeit widerrufen. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf unberührt. +

+ +

Beschwerderecht bei der zuständigen Aufsichtsbehörde

+

+ Im Falle von Verstößen gegen die DSGVO steht den Betroffenen ein Beschwerderecht bei einer Aufsichtsbehörde zu. Die zuständige Aufsichtsbehörde ist:

+ Bayerisches Landesamt für Datenschutzaufsicht (BayLDA)
+ Promenade 18
+ 91522 Ansbach +

+ +

4. Datenerfassung auf dieser Website

+ +

Server-Log-Dateien

+

+ Der Provider der Seiten erhebt und speichert automatisch Informationen in sogenannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt (siehe Abschnitt „Hosting"). +

+

+ Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen. +

+ +

Anfrage per E-Mail oder Telefon

+

+ Wenn Sie uns per E-Mail oder Telefon kontaktieren, wird Ihre Anfrage inklusive aller daraus hervorgehenden personenbezogenen Daten (Name, Anfrage) zum Zwecke der Bearbeitung Ihres Anliegens bei uns gespeichert und verarbeitet. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter. +

+

+ Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erfüllung eines Vertrags zusammenhängt oder zur Durchführung vorvertraglicher Maßnahmen erforderlich ist. In allen übrigen Fällen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO). +

+ +

5. Externe Dienste

+ +

Google Fonts (CDN)

+

+ Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten sogenannte Google Fonts, die von Google bereitgestellt werden. Beim Aufruf einer Seite lädt Ihr Browser die benötigten Fonts in Ihren Browsercache, um Texte und Schriftarten korrekt anzuzeigen. Zu diesem Zweck muss der von Ihnen verwendete Browser Verbindung zu den Servern von Google aufnehmen. Hierdurch erlangt Google Kenntnis darüber, dass über Ihre IP-Adresse diese Website aufgerufen wurde. +

+

+ Die Nutzung von Google Fonts erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Weitere Informationen zu Google Fonts finden Sie unter + https://developers.google.com/fonts/faq + und in der Datenschutzerklärung von Google: + https://policies.google.com/privacy. +

+ +

Tailwind CSS (CDN)

+

+ Diese Website nutzt das CSS-Framework Tailwind CSS, das über ein Content Delivery Network (CDN) eingebunden wird. Beim Aufruf unserer Seite wird eine Verbindung zu den Servern des CDN-Anbieters hergestellt. Dabei wird Ihre IP-Adresse an den CDN-Anbieter übermittelt. Dies erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. +

+ +

+ Stand: März 2026 +

+
+
+
+ + + + + diff --git a/img/team/placeholder-1.svg b/img/team/placeholder-1.svg new file mode 100644 index 0000000..f8b993a --- /dev/null +++ b/img/team/placeholder-1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/team/placeholder-2.svg b/img/team/placeholder-2.svg new file mode 100644 index 0000000..f8b993a --- /dev/null +++ b/img/team/placeholder-2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/team/placeholder-3.svg b/img/team/placeholder-3.svg new file mode 100644 index 0000000..f8b993a --- /dev/null +++ b/img/team/placeholder-3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..0fb9959 --- /dev/null +++ b/impressum.html @@ -0,0 +1,112 @@ + + + + + + Impressum — sonith + + + + + + + + + + + + + + + +
+
+

Impressum

+ +
+

Angaben gemäß § 5 TMG

+

+ sonith UG (haftungsbeschränkt)
+ Kleinheubacher Str. 7
+ 63924 Rüdenau +

+ +

Vertreten durch

+

+ + Geschäftsführer: [Name eintragen] +

+ +

Kontakt

+

+ Telefon: 0931 30 69 90 90
+ E-Mail: mail@sonith.de +

+ +

Registereintrag

+

+ Eintragung im Handelsregister.
+ Registergericht: [Amtsgericht eintragen]
+ Registernummer: [HRB-Nummer eintragen] +

+ +

Umsatzsteuer-ID

+

+ Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:
+ [USt-IdNr. eintragen] +

+ +

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV

+

+ [Name eintragen]
+ Kleinheubacher Str. 7
+ 63924 Rüdenau +

+ +

Streitschlichtung

+

+ Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: + https://ec.europa.eu/consumers/odr/. +

+

+ Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen. +

+
+
+
+ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d2d5de0 --- /dev/null +++ b/index.html @@ -0,0 +1,416 @@ + + + + + + sonith — IT-Lösungen. Sicher verwaltet. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ +
+
+
+

Managed Service Provider

+

+ IT-Lösungen.
+ Sicher verwaltet. +

+

+ Wir sind Ihr Managed Service Provider — proaktive IT-Betreuung, eigene Infrastruktur, persönlicher Ansprechpartner. +

+
+ + Kontakt aufnehmen + + + + + + Zum Helpdesk + +
+
+
+
+ + +
+ + + +
+
+ + +
+
+
+

Was wir tun

+

Unsere Leistungen

+

IT-Infrastruktur aus einer Hand — von der Planung bis zum laufenden Betrieb.

+
+ +
+ +
+
+ + + +
+

Managed Services

+

Proaktive IT-Betreuung: Monitoring, Patch-Management, Wartung — bevor Probleme entstehen.

+
+ + +
+
+ + + +
+

Managed Backup

+

Automatische Datensicherung in unser eigenes Rechenzentrum. Backup as a Service — DSGVO-konform, in Deutschland gehostet.

+
+ + +
+
+ + + +
+

Hosting

+

Webhosting, E-Mail und Applikationen auf unserer eigenen Infrastruktur. Persönlicher Support statt Ticket-Warteschlange.

+
+ + +
+
+ + + +
+

Nextcloud

+

Ihre private Cloud — Dateien, Kalender, Kontakte. Von uns gehostet und gewartet. Die sichere Alternative zu US-Cloud-Diensten.

+
+ + +
+
+ + + +
+

Netzwerk & Infrastruktur

+

Von der Bürovernetzung bis zur standortübergreifenden Infrastruktur. VPN, Firewall, WLAN — sicher und maßgeschneidert.

+
+ + +
+
+ + + +
+

ERP-Systeme

+

Einführung und Betreuung von Open-Source-ERP. Kaufmännische Prozesse digitalisiert und integriert.

+
+
+
+
+ + +
+
+
+

Unsere Stärken

+

Warum sonith?

+

Was uns von anderen IT-Dienstleistern unterscheidet.

+
+ +
+ +
+
+ + + +
+

Eigenes Rechenzentrum

+

Ihre Daten bleiben in Deutschland, auf unserer Hardware.

+
+ + +
+
+ + + +
+

Proaktiv statt reaktiv

+

Wir beheben Probleme, bevor Sie sie bemerken.

+
+ + +
+
+ + + +
+

Persönlicher Ansprechpartner

+

Kein Callcenter. Sie erreichen uns direkt.

+
+ + +
+
+ + + +
+

Sicherheit als Standard

+

Verschlüsselung, Backups, VPN — bei uns selbstverständlich.

+
+
+
+
+ + +
+
+
+

Wer wir sind

+

Unser Team

+

Kurze Wege, direkte Kommunikation — bei uns kennen Sie Ihren Ansprechpartner.

+
+ +
+ +
+
+ Teammitglied +
+

Max Mustermann

+

Geschäftsführung

+
+ + +
+
+ Teammitglied +
+

Erika Musterfrau

+

Systemadministration

+
+ + +
+
+ Teammitglied +
+

Alex Beispiel

+

IT-Support

+
+
+
+
+ + +
+
+
+

Sprechen Sie uns an

+

Kontakt

+

Wir freuen uns auf Ihre Anfrage.

+
+ +
+ + +
+ + + +
+

Telefon

+

0931 30 69 90 90

+ + + + +
+ + + +
+

E-Mail

+

mail@sonith.de

+ + + +
+
+ + + + +
+

Adresse

+

Kleinheubacher Str. 7
63924 Rüdenau

+
+ + + +
+ + + +
+

Helpdesk

+

Support-Ticket erstellen

+ +
+
+
+ + + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..67f73cd --- /dev/null +++ b/js/main.js @@ -0,0 +1,96 @@ +/* ============================================================ + sonith.de — Main JavaScript + ============================================================ */ + +document.addEventListener('DOMContentLoaded', () => { + initMobileMenu(); + initScrollSpy(); + initNavbarScroll(); + initFadeIn(); +}); + +/* ---- Mobile Menu ---- */ +function initMobileMenu() { + const btn = document.getElementById('mobile-menu-btn'); + const menu = document.getElementById('mobile-menu'); + const iconOpen = document.getElementById('menu-icon-open'); + const iconClose = document.getElementById('menu-icon-close'); + + if (!btn || !menu) return; + + btn.addEventListener('click', () => { + const isOpen = !menu.classList.contains('hidden'); + menu.classList.toggle('hidden'); + iconOpen.classList.toggle('hidden'); + iconClose.classList.toggle('hidden'); + btn.setAttribute('aria-label', isOpen ? 'Menü öffnen' : 'Menü schließen'); + }); + + // Menü schließen bei Klick auf Link + menu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + menu.classList.add('hidden'); + iconOpen.classList.remove('hidden'); + iconClose.classList.add('hidden'); + btn.setAttribute('aria-label', 'Menü öffnen'); + }); + }); +} + +/* ---- Scroll Spy (aktiver Menüpunkt) ---- */ +function initScrollSpy() { + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('.nav-link'); + + if (!sections.length || !navLinks.length) return; + + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const id = entry.target.getAttribute('id'); + navLinks.forEach(link => { + link.classList.toggle('active', link.getAttribute('href') === `#${id}`); + }); + } + }); + }, { + rootMargin: '-20% 0px -60% 0px', + threshold: 0 + }); + + sections.forEach(section => observer.observe(section)); +} + +/* ---- Navbar Background on Scroll ---- */ +function initNavbarScroll() { + const navbar = document.getElementById('navbar'); + if (!navbar) return; + + const update = () => { + navbar.classList.toggle('scrolled', window.scrollY > 50); + }; + + window.addEventListener('scroll', update, { passive: true }); + update(); +} + +/* ---- Fade-in on Scroll ---- */ +function initFadeIn() { + const elements = document.querySelectorAll('.fade-in, .service-card'); + + if (!elements.length) return; + + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -40px 0px' + }); + + elements.forEach(el => observer.observe(el)); +}