shot1 and shot2 added

shot-2/shot-2.md

@@ -0,0 +1,95 @@
+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:
+```javascript
+// Theme-Switching Logik
+// Local Storage Verwaltung
+// Optionale Partikel-Animation
+```
+
+CSS-Variablen Struktur:
+```css
+: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)