web7sys/shot-2/shot-2.md

ich möchte ein space-theme black-grey, und die möglichkeit für den user ein dark & white theme+

SHOT-2

Erstelle eine moderne, futuristische One-Page Webseite als digitale Visitenkarte für das IT-Unternehmen 7SYS mit Space-Theme und Theme-Switcher. Die Seite soll responsive sein und folgende Elemente enthalten:

1. Theme-Switcher:

• Toggle-Button für Dark/Light Mode
• Smooth Transition zwischen den Themes
• Persistentes Theme (speichern in localStorage)

2. Header:

• Futuristisches Logo "7SYS"
• Ein Theme-Toggle-Button in der Navigation
• Subtile Weltraum-Animationen (z.B. floating particles oder twinkling stars im Hintergrund)

3. Hero-Section:

• Space-inspiriertes Layout mit subtilen Sternen/Galaxien im Hintergrund
• Futuristischer Slogan
• Leuchtender "Kontakt" Call-to-Action Button im Neon-Stil

4. Hauptbereich:

• 3-4 Icons mit Space/Tech-Design für die wichtigsten Dienstleistungen
• Holographischer oder Neon-Effekt für Hover-States
• Moderne Grid-Layout mit schwebenden Elementen

5. Kontaktbereich:

• Futuristisches Kontaktformular
• Pulsierende Social Media Icons
• Minimalistischer Footer mit Impressum-Link

Technische Anforderungen:

• HTML, CSS und minimales JavaScript für Theme-Switching
• CSS Custom Properties für Theme-Farben
• Moderne CSS-Features (Flexbox/Grid, Animations)
• Mobile-First Ansatz
• Optimierte Performance
• Semantic HTML

Design-Richtlinien:

Dark Theme (Standard):

• Hauptfarbe: Tiefschwarz (#030303)
• Akzentfarbe: Neon Blau (#00f3ff)
• Text: Hellgrau bis Weiß (#f0f0f0)
• Subtile Blautöne für Tiefenwirkung
• Sternenfeld-Hintergrund

Light Theme:

• Hauptfarbe: Reines Weiß (#ffffff)
• Akzentfarbe: Space Blau (#1a365d)
• Text: Dunkelgrau (#333333)
• Subtile graue Abstufungen
• Dezenter Grid-Hintergrund

Allgemein:

• Futuristische Sans-serif Schriftart (z.B. 'Space Grotesk' oder 'Orbitron' für Überschriften)
• Großzügiger Whitespace
• Smooth Transitions (0.3s) für alle Hover und Theme-Wechsel
• Subtile Parallax-Effekte
• Glassmorphism-Elemente

JavaScript-Funktionen:

// Theme-Switching Logik
// Local Storage Verwaltung
// Optionale Partikel-Animation

CSS-Variablen Struktur:

:root {
  /* Light Theme Variablen */
  --light-bg: #ffffff;
  --light-text: #333333;
  --light-accent: #1a365d;
  
  /* Dark Theme Variablen */
  --dark-bg: #030303;
  --dark-text: #f0f0f0;
  --dark-accent: #00f3ff;
}

Bitte erstelle den kompletten Code in drei separaten Blöcken:

1. HTML
2. CSS (mit Theme-Variationen)
3. JavaScript (Theme-Switching)

Besondere Anforderungen:

• Smooth Theme Transitions
• Zugängliche Kontrasteverhältnisse in beiden Themes
• Performante Animationen
• Responsive Design für alle Bildschirmgrößen
• SEO-optimierte Struktur
• Barrierefreiheit (ARIA-Labels für Theme-Switcher)