slight css changes

Konsistentes Spacing-System:
Mathematische Skala basierend auf --space-unit (0.25rem)
Logische Abstufungen von xxs bis xxxl
Responsive Anpassungen über Container-Padding und Section-Spacing
Erweiterte Typografie-Kontrolle:
Skalierbare Schriftgrößen basierend auf --font-size-base
Definierte Schriftgewichte und Zeilenhöhen
Responsive Anpassungen der Basis-Schriftgröße
Verbesserte Responsive-Struktur:
Breakpoint-Referenzen in Variablen
Automatische Anpassungen durch CSS-Variablen
Safe-Area-Insets für moderne Geräte
Layout-System:
Definierte Content-Breiten
Z-Index-Skala
Einheitliche Border-Radius-Werte
Performance-Optimierungen:
Hardware-beschleunigte Transitionen
Optimierte Animation-Timings
Konsistente Transition-Eigenschaften
Die Migration wurde schrittweise durchgeführt:

variables.css: Neue Basis-Variablen definiert
base.css: Grundlegende Typografie und Layout angepasst
header.css & header-line.css: Navigation und Header-Elemente optimiert
components.css: Alle Komponenten auf neue Variablen umgestellt
responsive.css: Breakpoint-spezifische Anpassungen implementiert
animations.css: Animationen vereinheitlicht
footer.css: Footer-Styles optimiert
Das neue System bietet:

Bessere Wartbarkeit durch zentrale Steuerung
Konsistente Skalierung über alle Breakpoints
Flexibilität für zukünftige Anpassungen
Volle Kompatibilität mit dem Theme-System

public/PROMPT.md

@@ -0,0 +1,61 @@
+Multilingual Enhancement Assistant for Existing Website
+
+<context>
+Current setup:
+- Single-page website (index.html)
+- Modular CSS theming system with separate CSS files
+- Functional JavaScript implementation
+- Stable production environment requiring careful modifications
+
+Target:
+- Add multilingual support starting with German (base) and English
+- Maintain existing theming system
+- Ensure scalability for additional languages
+- Preserve current functionality
+
+<instructions>
+Provide solutions that:
+- Minimize changes to existing structure
+- Maintain current CSS theming capabilities
+- Follow progressive enhancement principles
+- Preserve site performance
+- Consider SEO implications
+- Keep code maintainable
+
+<output_format>
+Structure responses as follows:
+1. Impact assessment on existing system
+2. Step-by-step implementation plan
+3. Code modifications with detailed comments
+4. Testing guidelines
+5. Documentation requirements
+
+<technical_constraints>
+- Must work with separate CSS files
+- Avoid breaking existing theming system
+- Maintain current performance levels
+- Support offline functionality
+- Allow easy addition of future languages
+- Ensure backward compatibility
+
+<implementation_requirements>
+Code solutions must:
+- Clearly separate content from functionality
+- Maintain existing CSS variable system
+- Include fallback mechanisms
+- Be SEO-friendly
+- Support browser compatibility
+
+---
+
+Verbesserungen:
+ich denke du solltest zu erst alle css dateien ansehen und dann die änderung nocheinmal überdenken.
+- Die Buttons für die Sprache sind visuell für den nutzer nicht zu sehen da der header verdeckt.
+- Bitte gleich auch den Header korrigieren. Der Header sollte beim Scrollen stehen bleiben und nicht verschwinden.
+- In der Mobileansicht wird die Sprachauswahl nicht angezeigt.
+
+
+---
+
+
+Die Translation Buttons sind

public/README.md

@@ -1,99 +1,84 @@
-Der Default-Theme-Modus wird durch zwei Faktoren bestimmt:
+# 7SYS Website
 
-Wenn ein Theme bereits im localStorage gespeichert wurde (unter dem Key 'theme'), wird dieses verwendet
+Eine professionelle Website für IT-Lösungen und digitale Souveränität.
-Ansonsten wird das System-Theme des Betriebssystems verwendet:
-Wenn das System auf "Dark Mode" eingestellt ist, wird Dark Mode aktiviert
-Wenn das System auf "Light Mode" eingestellt ist, wird Light Mode aktiviert
-Um den Default-Modus zu ändern, gibt es zwei Möglichkeiten:
 
-Direkt im Code: In der Konstante DEFAULT_THEME in theme.js kann der Wert von 'light' auf 'dark' geändert werden
+## Projektbeschreibung
-Im Browser: Den localStorage-Eintrag 'theme' auf 'dark' oder 'light' setzen
-Das Theme wird beim Laden der Seite sofort initialisiert (durch initThemeEarly()), um ein Flackern zu vermeiden. Danach wird ein Event-Listener eingerichtet, der auf Systemänderungen reagiert und das Theme automatisch anpasst, falls kein benutzerdefiniertes Theme gesetzt wurde.
 
----
+Diese Website dient als digitale Präsenz von 7SYS, einem spezialisierten IT-Dienstleister mit Fokus auf maßgeschneiderte IT-Lösungen und digitale Souveränität. Die Plattform präsentiert das Leistungsportfolio und die Expertise im Bereich IT-Infrastruktur, Systemadministration und Automatisierung.
 
-Successfully implemented the following improvements:
+## Hauptfunktionen
 
-Mobile Menu Optimization ✓
+- Responsive Single-Page Design
-Fixed duplicate script loading issue
+- Dynamisches Theme-System (Hell/Dunkel)
-Improved menu closing behavior after item selection
+- Interaktive Service-Cards mit detaillierten Informationen
-Added smooth scroll for anchor links
+- Modulare Komponenten-Architektur
-Enhanced touch targets for better mobile usability
+- Optimierte Performance durch CSS-Animationen
-Added proper ARIA attributes for accessibility
+- Barrierefreie Benutzeroberfläche
-Implemented fade animation for menu transitions
-Responsive Design Improvements ✓
-Adjusted menu height to use viewport units
-Added proper padding for notched phones
-Improved touch target sizes
-Enhanced menu item spacing and interaction feedback
-Fixed menu scrolling on long content
-Performance & Accessibility Enhancements ✓
-Added meta description for SEO
-Implemented proper aria-expanded states
-Added smooth animations with performance considerations
-Improved event listener efficiency
-Added empty favicon to prevent 404 errors
-Code Quality Improvements ✓
-Removed duplicate code
-Improved event handling
-Enhanced error handling
-Better organization of CSS media queries
-Added proper touch device detection
-All changes maintain existing functionality while improving user experience, accessibility, and performance. The mobile menu now behaves more naturally, with proper closing behavior and smooth transitions.
 
----
+## Technologien
 
-Current Implementation Analysis:
+- **Frontend:**
+  - HTML5
+  - CSS3 (modulare Struktur mit separaten Dateien für bessere Wartbarkeit)
+  - Vanilla JavaScript (components.js, theme.js)
+  - Font Awesome Icons
+  - Google Fonts (Montserrat, Open Sans)
 
-Theme System Architecture
+- **Architektur:**
-CSS Variables (variables.css): ✓ Well-structured light/dark theme variables ✓ Logical separation of common tokens ✓ Clear naming conventions ✓ Efficient use of CSS custom properties
+  - Komponenten-basierte Struktur
-Theme Switching (theme.js):
+  - Modulares CSS-System
-Robust Implementation: ✓ IIFE for encapsulation ✓ Early initialization prevents FOUC ✓ System theme preference detection ✓ Local storage persistence ✓ Comprehensive error handling
+  - Responsive Design mit CSS Variables
-CSS Structure:
+  - Progressive Enhancement
-Modular Organization: ✓ Separate files for different concerns ✓ Clean inheritance patterns ✓ Proper cascade management ✓ Efficient variable usage
-Integration:
-Clean Component Integration: ✓ Theme toggle properly placed in header ✓ Smooth transitions between themes ✓ Proper script/style loading order
-Strengths to Preserve:
 
-The modular CSS architecture
+## Setup/Installation
-The CSS variables-based theming approach
-The early theme initialization
-The system preference detection
-Minor Optimization Suggestions:
 
-Theme Switching Performance:
+1. Repository klonen:
+```bash
+git clone [repository-url]
+```
 
-/* Add to variables.css */
+2. Projektverzeichnis öffnen:
-:root {
+```bash
-  /* Add GPU acceleration for theme transitions */
+cd web7syspub
-  --theme-transition: color var(--transition-speed) ease,
+```
-                     background-color var(--transition-speed) ease;
-  --gpu-accelerated: translate3d(0, 0, 0);
-}
-Theme Toggle Accessibility:
 
-/* Add to header.css */
+3. Einen lokalen Webserver starten, zum Beispiel mit Python:
-.theme-toggle:focus-visible {
+```bash
-  outline: 2px solid var(--primary);
+# Python 3
-  outline-offset: 2px;
+python -m http.server 8000
-  border-radius: var(--border-radius);
+```
-}
-Theme Persistence Enhancement:
 
-// Add to theme.js persistTheme function
+4. Website im Browser öffnen:
-function persistTheme() {
+```
-  try {
+http://localhost:8000/public
-      const currentTheme = getCurrentTheme();
+```
-      localStorage.setItem(THEME_STORAGE_KEY, currentTheme);
-      // Add theme to body for better SSR support
-      document.body.dataset.theme = currentTheme;
-  } catch (error) {
-      console.warn('Theme persistence error:', error);
-  }
-}
-These suggestions maintain the existing architecture while adding:
 
-Improved performance through GPU acceleration
+## Projektstruktur
-Enhanced accessibility
+
-Better server-side rendering support
+```
-The current implementation is well-structured and follows best practices. The suggested optimizations are minimal and non-invasive, preserving the existing functionality while making subtle improvements to performance and accessibility.
+public/
+├── components/         # Wiederverwendbare HTML-Komponenten
+├── css/               # Modulare CSS-Dateien
+│   ├── animations.css
+│   ├── base.css
+│   ├── components.css
+│   ├── layout.css
+│   └── variables.css
+├── js/                # JavaScript-Module
+│   ├── components.js
+│   └── theme.js
+└── index.html         # Hauptseite
+```
+
+## Features im Detail
+
+- **Responsive Design:** Optimierte Darstellung auf allen Geräten
+- **Themensystem:** Automatische Anpassung an Systemeinstellungen
+- **Modulare CSS-Struktur:** Verbesserte Wartbarkeit und Performance
+- **Barrierefreiheit:** Semantische HTML-Struktur und ARIA-Attribute
+- **Performance:** Optimierte Ladezeiten durch modulare Ressourcen
+
+## Kontakt
+
+- E-Mail: info@7sys.de
+- Signal: Verfügbar über Website-Link

public/components/footer.html

@@ -8,7 +8,7 @@
             <svg class="signal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24">
                 <path fill="currentColor" d="M128 26.6C71.9 26.6 26.6 71.9 26.6 128c0 56.1 45.3 101.4 101.4 101.4c56.1 0 101.4-45.3 101.4-101.4C229.4 71.9 184.1 26.6 128 26.6zM128 220c-50.7 0-92-41.3-92-92s41.3-92 92-92s92 41.3 92 92S178.7 220 128 220z M128 76.5c-28.4 0-51.5 23.1-51.5 51.5s23.1 51.5 51.5 51.5s51.5-23.1 51.5-51.5S156.4 76.5 128 76.5z M128 170c-23.1 0-42-18.9-42-42s18.9-42 42-42s42 18.9 42 42S151.1 170 128 170z M128 98.5c-16.3 0-29.5 13.2-29.5 29.5s13.2 29.5 29.5 29.5s29.5-13.2 29.5-29.5S144.3 98.5 128 98.5z"/>
             </svg>
-            <a href="signal://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">Signal</a>
+            <a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR" data-i18n="footer.signal">Signal</a>
         </div>
     </div>
     <div class="social-links">
@@ -23,7 +23,7 @@
         </a>
     </div>
     <div class="legal-links">
-        <a href="impressum.html">Impressum</a>
+        <a href="impressum.html" data-i18n="footer.imprint">Impressum</a>
-        <a href="datenschutz.html">Datenschutz</a>
+        <a href="datenschutz.html" data-i18n="footer.privacy">Datenschutz</a>
     </div>
 </footer>

public/components/header.html

@@ -10,21 +10,21 @@
             <a href="index.html" id="start-link">Home</a>
             <a href="#services" id="expertise-link">Expertise</a>
             <a href="#contact" id="contact-link">Kontakt</a>
-            <button class="theme-toggle" aria-label="Theme Toggle">
+            <div class="nav-controls">
-                <i class="fas fa-sun"></i>
+                <div class="language-switcher">
-                <i class="fas fa-moon"></i>
+                    <button class="lang-btn" data-lang="de">DE</button>
-            </button>
+                    <button class="lang-btn" data-lang="en">EN</button>
+                </div>
+                <button class="theme-toggle" aria-label="Theme Toggle">
+                    <i class="fas fa-sun"></i>
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
         </nav>
         
         <button class="mobile-menu-toggle" aria-label="Toggle Menu">
             <i class="fas fa-bars"></i>
         </button>
     </div>
-    <script>
+    <div class="header-horizontal-line"></div>
-        // Hide expertise and contact links on non-index pages
-        if (window.location.pathname !== '/' && window.location.pathname !== '/index.html') {
-            document.getElementById('expertise-link').style.display = 'none';
-            document.getElementById('contact-link').style.display = 'none';
-        }
-    </script>
 </header>

public/components/language-switcher.html

@@ -0,0 +1,4 @@
+<div class="language-switcher">
+    <button class="lang-btn" data-lang="de">DE</button>
+    <button class="lang-btn" data-lang="en">EN</button>
+</div>

public/css/animations.css

@@ -1,4 +1,8 @@
 @keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(var(--space-md));
+    }
     to {
         opacity: 1;
         transform: translateY(0);

public/css/base.css

@@ -6,61 +6,69 @@
 
 html {
     height: 100%;
-    transition: color var(--transition-speed) ease,
+    font-size: var(--font-size-base);
-    background-color var(--transition-speed) ease;
+    transition: var(--theme-transition);
 }
 
 body {
     font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
     background: var(--bg-main);
     color: var(--text);
-    line-height: 1.6;
+    line-height: var(--line-height-base);
     min-height: 100vh;
     transition: var(--theme-transition);
     will-change: background-color, color;
 }
 
+h1, h2, h3 {
+    scroll-margin-top: var(--header-height);
+}
+
 h1 {
-    font-size: 2rem;
+    font-size: var(--font-size-xxl);
-    margin-bottom: var(--spacing-lg);
+    margin-bottom: var(--space-lg);
     color: var(--text);
     opacity: 0.85;
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold);
     transition: var(--theme-transition);
 }
 
 h2 {
-    font-size: 2rem;
+    font-size: var(--font-size-xl);
-    margin-bottom: var(--spacing-lg);
+    margin-bottom: var(--space-lg);
     color: var(--text);
+    font-weight: var(--font-weight-medium);
     transition: var(--theme-transition);
 }
 
 h3 {
+    font-size: var(--font-size-lg);
     color: var(--text);
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-weight: var(--font-weight-medium);
     transition: var(--theme-transition);
 }
 
 h1.h1-hero {
-    font-size: 2.5rem;
+    font-size: var(--font-size-xxxl);
-    margin: var(--spacing-xl);
+    margin: var(--space-xl);
-    padding: var(--spacing-xl);
+    padding: var(--space-xl);
     color: var(--text);
     opacity: 0.85;
-    font-weight: 100;
+    font-weight: var(--font-weight-light);
     text-align: center;
 }
 
 p {
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--font-size-md);
     transition: var(--theme-transition);
 }
 
 a {
     color: var(--primary);
     text-decoration: none;
-    transition: var(--theme-transition), opacity var(--transition-speed) ease;
+    transition: var(--theme-transition), opacity var(--transition-speed) var(--transition-timing);
 }
 
 a:hover {
@@ -72,13 +80,13 @@ main {
 }
 
 .container {
-    max-width: 1200px;
+    max-width: var(--content-width-xl);
     margin: 0 auto;
-    padding: 0 var(--spacing-md);
+    padding: 0 var(--container-padding);
 }
 
 section {
-    padding: var(--spacing-xl) 0;
+    padding: var(--section-spacing);
 }
 
 /* Utility classes */
@@ -86,12 +94,12 @@ section {
     text-align: center;
 }
 
-.mb-1 { margin-bottom: var(--spacing-sm); }
+.mb-1 { margin-bottom: var(--space-xs); }
-.mb-2 { margin-bottom: var(--spacing-md); }
+.mb-2 { margin-bottom: var(--space-md); }
-.mb-3 { margin-bottom: var(--spacing-lg); }
+.mb-3 { margin-bottom: var(--space-lg); }
-.mb-4 { margin-bottom: var(--spacing-xl); }
+.mb-4 { margin-bottom: var(--space-xl); }
 
-.mt-1 { margin-top: var(--spacing-sm); }
+.mt-1 { margin-top: var(--space-xs); }
-.mt-2 { margin-top: var(--spacing-md); }
+.mt-2 { margin-top: var(--space-md); }
-.mt-3 { margin-top: var(--spacing-lg); }
+.mt-3 { margin-top: var(--space-lg); }
-.mt-4 { margin-top: var(--spacing-xl); }
+.mt-4 { margin-top: var(--space-xl); }

public/css/components.css

@@ -1,137 +1,143 @@
 /* Card Base Styles */
 .card-base {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
+    padding: var(--space-xl);
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
-    transition: transform var(--transition-speed) ease, 
+    transition: transform var(--transition-speed) var(--transition-timing), 
-                border-color var(--transition-speed) ease;
+                border-color var(--transition-speed) var(--transition-timing);
-}
-
-.card-base:hover {
-    border-color: var(--primary);
 }
 
 /* Mission Vision Cards */
 .mission-vision {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
-    margin: var(--spacing-xl) 0;
+    margin: var(--space-xl) 0;
 }
 
-.mission-vision .tooltip-container {
+.tooltip-container {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
+    padding: var(--space-xl);
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
-    text-align: center;
-    position: relative;
     cursor: pointer;
-    transition: transform var(--transition-speed) ease, 
+    transition: border-color var(--transition-speed) var(--transition-timing);
-                border-color var(--transition-speed) ease;
 }
 
-.mission-vision .tooltip-container:hover {
+.tooltip-container:hover {
-    transform: translateY(-5px);
     border-color: var(--primary);
 }
 
-.mission-vision h3 {
+.tooltip-container h3 {
     color: var(--primary);
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
 }
 
-/* Tooltip Styles */
+.tooltip-header {
-.tooltip-container {
     position: relative;
+    padding-right: var(--space-xl);
 }
 
-.tooltip {
+.tooltip-header::after {
-    visibility: hidden;
+    content: '▼';
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: var(--primary);
+    transition: transform var(--transition-speed) var(--transition-timing);
+}
+
+.tooltip-container.active .tooltip-header::after {
+    transform: rotate(180deg);
+}
+
+.tooltip-content {
+    max-height: 0;
+    overflow: hidden;
     opacity: 0;
-    position: absolute;
+    transition: max-height var(--transition-speed) var(--transition-timing),
-    bottom: 120%;
+                opacity var(--transition-speed) var(--transition-timing),
-    left: 50%;
+                margin var(--transition-speed) var(--transition-timing);
-    transform: translateX(-50%);
+    margin-top: 0;
-    background: var(--bg-card);
+    font-size: var(--font-size-md);
-    color: var(--text);
+    line-height: var(--line-height-base);
-    padding: var(--spacing-lg);
-    border-radius: var(--border-radius);
-    width: 300px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--border-color);
-    font-size: 0.9rem;
-    line-height: 1.5;
-    text-align: left;
-    z-index: 100;
-    transition: opacity var(--transition-speed) ease,
-                visibility var(--transition-speed) ease;
 }
 
-.tooltip::after {
+.tooltip-container.active .tooltip-content {
-    content: '';
+    max-height: 500px;
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 10px 10px 0;
-    border-style: solid;
-    border-color: var(--bg-card) transparent transparent transparent;
-}
-
-.tooltip-container:hover .tooltip {
-    visibility: visible;
     opacity: 1;
+    margin-top: var(--space-lg);
+    padding-top: var(--space-lg);
+    border-top: 1px solid var(--border-color);
 }
 
 /* Service Cards */
 .service-card {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
+    padding: var(--space-xl);
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
-    margin: var(--spacing-lg) 0;
+    margin: var(--space-lg) 0;
-    transition: transform var(--transition-speed) ease, 
+    transition: border-color var(--transition-speed) var(--transition-timing);
-                border-color var(--transition-speed) ease;
 }
 
 .service-card:hover {
     border-color: var(--primary);
-    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
 }
 
 .service-card h3 {
     color: var(--primary);
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
+}
+
+.service-card li {
+    list-style: none;
+    margin-bottom: var(--space-sm);
+    position: relative;
+    padding-left: var(--space-lg);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-base);
+}
+
+.service-card li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--primary);
 }
 
 /* Contact Info Card */
 .contact-info {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
+    padding: var(--space-xl);
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
-    margin: var(--spacing-xl) 0;
+    margin: var(--space-xl) 0;
     text-align: center;
+    transition: border-color var(--transition-speed) var(--transition-timing);
 }
 
 .contact-info:hover {
     border-color: var(--primary);
-    transition: all 0.3s ease;
 }
 
 .contact-info p {
-    margin-bottom: var(--spacing-lg);
+    margin-bottom: var(--space-lg);
     color: var(--text);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-base);
 }
 
 .contact-links {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--spacing-md);
+    gap: var(--space-md);
 }
 
 .contact-link {
@@ -139,94 +145,62 @@
     text-decoration: none;
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
+    gap: var(--space-sm);
-    padding: var(--spacing-sm) var(--spacing-md);
+    padding: var(--space-sm) var(--space-md);
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
-    transition: all 0.3s ease;
+    transition: all var(--transition-speed) var(--transition-timing);
     border: 1px solid transparent;
+    font-size: var(--font-size-md);
 }
 
 .contact-link:hover {
     color: var(--primary) !important;
     border-color: var(--primary);
-    opacity: 1;
 }
 
 .contact-link i {
-    font-size: 1.2em;
+    font-size: var(--font-size-lg);
     color: var(--primary);
 }
 
 /* Signal Icon Styles */
 .signal-icon {
     color: var(--primary);
-    width: 1.2em;
+    width: var(--font-size-lg);
-    height: 1.2em;
+    height: var(--font-size-lg);
-}
-
-.contact-link:hover .signal-icon {
-    color: var(--primary);
 }
 
 /* Quote Styles */
-.quote {
-    font-size: 1.2rem;
-    line-height: 1.6;
-    padding: var(--spacing-xl);
-    margin: var(--spacing-xl) 0;
-    background: var(--bg-card);
-    border-left: 4px solid var(--primary);
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    color: var(--text);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.hero-quote {
-    font-size: 1.3rem;
-    line-height: 1.7;
-    color: var(--text);
-    max-width: 900px;
-    margin: var(--spacing-xl) auto;
-    padding: var(--spacing-md) 0;
-    position: relative;
-    font-weight: 300;
-    opacity: 0.9;
-}
-
-.hero-quote::before {
-    content: '"';
-    position: absolute;
-    top: -30px;
-    left: -10px;
-    font-size: 3rem;
-    color: var(--primary);
-    opacity: 0.3;
-}
-
 .welcome-quote {
-    font-size: 1.1rem;
+    font-size: var(--font-size-lg);
     text-align: center;
-    padding: var(--spacing-xl);
+    padding: var(--space-xl);
+    line-height: var(--line-height-relaxed);
 }
 
-.welcome-quote:before {
-    content: '°';
-    position: absolute;
-    top: -10px;
-    left: 0;
-    font-size: 1rem;
-    color: var(--primary);
-    opacity: 0.2;
-}
-
-/* Logo Sub Text */
 .logo-sub {
     display: block;
     text-align: center;
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
     color: var(--text-muted);
-    margin: var(--spacing-xl) auto;
+    margin: var(--space-xl) auto;
-    max-width: 800px;
+    max-width: var(--content-width-md);
-    line-height: 1.4;
+    line-height: var(--line-height-relaxed);
     font-style: italic;
 }
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+    .tooltip-container {
+        padding: var(--space-lg);
+    }
+
+    .tooltip-content {
+        font-size: var(--font-size-md);
+        line-height: var(--line-height-base);
+    }
+
+    .service-card {
+        padding: var(--space-lg);
+    }
+}

public/css/footer.css

@@ -1,47 +1,53 @@
 footer {
     background: var(--bg-card);
-    padding: var(--spacing-xl) var(--spacing-md);
+    padding: var(--space-xl) var(--container-padding);
-    margin-top: calc(2 * var(--spacing-xl));
+    margin-top: var(--space-xxl);
     border-top: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
 }
 
 .contact-block {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
-    margin-bottom: var(--spacing-sm);
+    margin-bottom: var(--space-sm);
 }
 
 .contact-item {
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
+    gap: var(--space-sm);
 }
 
 .contact-item i {
     color: var(--primary);
-    font-size: 1.2rem;
+    font-size: var(--font-size-lg);
 }
 
 .contact-item .signal-icon {
     color: var(--primary);
-    width: 1.2rem;
+    width: var(--font-size-lg);
-    height: 1.2rem;
+    height: var(--font-size-lg);
 }
 
 .contact-item a {
-    color: var(--text-muted);
+    color: var(--text);
     text-decoration: none;
-    transition: color var(--transition-speed) ease;
+    transition: all var(--transition-speed) var(--transition-timing);
+    padding: var(--space-xxs) var(--space-xs);
+    border-radius: var(--radius-sm);
+    background-color: rgba(var(--bg-hover-rgb), 0.4);
+    font-size: var(--font-size-md);
 }
 
 .contact-item a:hover {
     color: var(--primary);
+    background-color: var(--bg-card);
+    transform: translateY(-1px);
 }
 
 .contact-item:hover .signal-icon {
@@ -50,34 +56,65 @@ footer {
 
 .social-links {
     display: flex;
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
     justify-content: center;
 }
 
 .social-links a {
-    color: var(--text-muted);
+    color: var(--text);
     text-decoration: none;
-    transition: color var(--transition-speed) ease;
+    transition: all var(--transition-speed) var(--transition-timing);
-    font-size: 1.5rem;
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xl);
+    background-color: rgba(var(--bg-hover-rgb), 0.4);
 }
 
 .social-links a:hover {
     color: var(--primary);
+    background-color: var(--bg-card);
+    transform: translateY(-2px);
 }
 
 .legal-links {
     text-align: center;
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
     color: var(--text-muted);
+    padding-top: var(--space-md);
 }
 
 .legal-links a {
-    color: var(--text-muted);
+    color: var(--text);
     text-decoration: none;
-    margin: 0 var(--spacing-sm);
+    margin: 0 var(--space-sm);
-    transition: color var(--transition-speed) ease;
+    transition: all var(--transition-speed) var(--transition-timing);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-sm);
+    position: relative;
+    background-color: rgba(var(--bg-hover-rgb), 0.4);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: 0.2px;
+}
+
+.legal-links a::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 50%;
+    background-color: var(--primary);
+    transition: all var(--transition-speed) var(--transition-timing);
+    transform: translateX(-50%);
 }
 
 .legal-links a:hover {
     color: var(--primary);
+    background-color: var(--bg-card);
+    transform: translateY(-1px);
 }
+
+.legal-links a:hover::after {
+    width: calc(100% - var(--space-xl));
+}
+

public/css/header-line.css

@@ -0,0 +1,16 @@
+.header-horizontal-line {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    z-index: var(--z-above);
+    transition: opacity var(--transition-speed) var(--transition-timing);
+    background: linear-gradient(
+        90deg,
+        var(--primary-gradient-1),
+        var(--primary-gradient-2),
+        var(--primary-gradient-3),
+        var(--primary-gradient-4)
+    );
+}

public/css/header.css

@@ -2,39 +2,41 @@ header {
     position: fixed;
     top: 0;
     width: 100%;
-    background: linear-gradient(350deg, var(--header-gradient-1), var(--header-gradient-2));
+    background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2));
     backdrop-filter: blur(10px);
-    padding: var(--spacing-lg) var(--spacing-md);
+    height: var(--header-height);
-    z-index: 1000;
+    z-index: var(--z-header);
     border-bottom: 1px solid var(--border-color);
     left: 0;
     right: 0;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: var(--theme-transition), transform 0.7s ease, box-shadow 0.7s ease;
+    transition: var(--theme-transition);
-    max-height: var(--header-height);
     transform: var(--gpu-accelerated);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
 }
 
 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 1200px;
+    max-width: var(--content-width-lg);
     margin: 0 auto;
-    padding: 0 var(--spacing-md);
+    padding: 0 var(--container-padding);
+    height: 100%;
 }
 
 .logo-container {
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
+    gap: var(--space-sm);
 }
 
 .logo-text {
-    font-size: 2.2rem;
+    font-size: var(--font-size-xl);
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
     text-align: center;
-    line-height: 1;
+    line-height: var(--line-height-tight);
 }
 
 .logo-text span:nth-child(1) { color: var(--primary-gradient-1); }
@@ -44,20 +46,51 @@ header {
 
 .nav-menu {
     display: flex;
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
     align-items: center;
-    padding-top: 16px;
+    padding-top: var(--space-md);
+}
+
+.nav-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-left: var(--space-lg);
 }
 
 .nav-menu a {
     color: var(--text);
     text-decoration: none;
-    font-size: 1rem;
+    font-size: var(--font-size-md);
-    transition: var(--theme-transition);
+    font-weight: var(--font-weight-medium);
+    transition: all var(--transition-speed) var(--transition-timing);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-md);
+    position: relative;
+    background-color: rgba(var(--header-gradient-1));
+    letter-spacing: 0.3px;
+}
+
+.nav-menu a::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 50%;
+    background-color: var(--primary);
+    transition: all var(--transition-speed) var(--transition-timing);
+    transform: translateX(-50%);
 }
 
 .nav-menu a:hover {
     color: var(--primary);
+    background-color: var(--bg-card);
+    transform: translateY(-1px);
+}
+
+.nav-menu a:hover::after {
+    width: calc(100% - var(--space-xl));
 }
 
 .theme-toggle {
@@ -65,16 +98,15 @@ header {
     border: none;
     color: var(--text);
     cursor: pointer;
-    padding: var(--spacing-sm);
+    padding: var(--space-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--theme-transition);
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
     position: relative;
-    width: 40px;
+    width: calc(var(--space-xl) * 1.25);
-    height: 40px;
+    height: calc(var(--space-xl) * 1.25);
-    margin-left: var(--spacing-sm);
 }
 
 .theme-toggle:hover {
@@ -85,14 +117,14 @@ header {
 .theme-toggle:focus-visible {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
 }
 
 .theme-toggle i {
-    font-size: 1.2rem;
+    font-size: var(--font-size-lg);
     position: absolute;
-    transition: opacity var(--transition-speed) ease,
+    transition: opacity var(--transition-speed) var(--transition-timing),
-                transform var(--transition-speed) ease;
+                transform var(--transition-speed) var(--transition-timing);
     transform: var(--gpu-accelerated);
 }
 
@@ -129,5 +161,42 @@ header {
     border: none;
     color: var(--text);
     cursor: pointer;
-    padding: var(--spacing-sm);
+    padding: var(--space-sm);
+}
+
+/* Mobile Menu Adjustments */
+@media (max-width: 768px) {
+    .mobile-menu-toggle {
+        display: block;
+    }
+
+    .nav-menu {
+        display: none;
+        position: fixed;
+        top: var(--header-height);
+        left: 0;
+        right: 0;
+        background: var(--bg-card);
+        padding: var(--space-xl) var(--space-md);
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-lg);
+    }
+
+    .nav-menu.active {
+        display: flex;
+    }
+
+    .nav-controls {
+        flex-direction: row;
+        gap: var(--space-md);
+        margin: var(--space-md) 0;
+        padding-top: var(--space-md);
+        border-top: 1px solid var(--border-color);
+    }
+
+    .nav-menu a {
+        width: 100%;
+        text-align: center;
+    }
 }

public/css/language-switcher.css

@@ -0,0 +1,98 @@
+.language-switcher {
+    display: flex;
+    gap: var(--space-xs);
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+    transition: var(--theme-transition);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.lang-btn {
+    background: none;
+    border: 2px solid var(--lang-switcher-border);
+    color: var(--lang-switcher-text);
+    padding: var(--space-xxs) var(--space-xs);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    transition: all var(--transition-speed) var(--transition-timing);
+    min-width: 40px;
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.lang-btn:hover {
+    background-color: var(--lang-switcher-active-bg);
+    color: var(--lang-switcher-active-text);
+    opacity: var(--lang-switcher-hover-opacity);
+}
+
+.lang-btn.active {
+    background-color: var(--lang-switcher-active-bg);
+    color: var(--lang-switcher-active-text);
+}
+
+/* Tablet Devices */
+@media (max-width: 768px) {
+    .lang-btn {
+        font-size: var(--font-size-xs);
+        min-width: 36px;
+        min-height: 28px;
+    }
+}
+
+/* Mobile Devices */
+@media (max-width: 480px) {
+    .language-switcher {
+        padding: var(--space-xxs);
+    }
+}
+
+/* Small Mobile Devices */
+@media (max-width: 320px) {
+    .language-switcher {
+        padding: var(--space-xxs);
+    }
+}
+
+/* Ensure touch targets are large enough on mobile */
+@media (hover: none) {
+    .lang-btn {
+        min-width: 44px;
+        min-height: 44px;
+        padding: var(--space-xs);
+    }
+}
+
+/* Animations */
+.lang-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.lang-btn::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background: var(--lang-switcher-active-bg);
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform var(--transition-speed) var(--transition-timing),
+                opacity var(--transition-speed) var(--transition-timing);
+    border-radius: var(--radius-sm);
+    pointer-events: none;
+}
+
+.lang-btn:active::after {
+    opacity: 0.1;
+    transform: translate(-50%, -50%) scale(1);
+}

public/css/layout.css

@@ -1,24 +1,35 @@
 .container {
-    max-width: 800px;
+    max-width: var(--content-width-lg);
     margin: 0 auto;
-    padding: 0 1rem;
+    padding: 0 var(--container-padding);
 }
 
 main {
-    margin-top: 2rem;
+    margin-top: var(--space-xl);
-    padding: 2rem 0;
+    padding: var(--space-xl) 0;
 }
 
 section {
-    margin: 4rem 0;
+    margin: var(--space-xxl) 0;
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(var(--space-lg));
-    animation: fadeIn 0.6s ease forwards;
+    animation: fadeIn var(--transition-speed) var(--transition-timing) forwards;
 }
 
 .mission-vision {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 2rem;
+    gap: var(--space-xl);
-    margin: 2rem 0;
+    margin: var(--space-xl) 0;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(var(--space-lg));
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

public/css/responsive.css

@@ -1,55 +1,55 @@
 /* Tablet Devices */
 @media (max-width: 768px) {
     .container {
-        padding: 0 1.5rem;
+        padding: 0 var(--container-padding);
     }
 
     header {
-        padding: 1rem;
+        height: var(--header-height);
     }
 
     .logo-text {
-        font-size: 1.8rem;
+        font-size: var(--font-size-lg);
     }
 
     h1 {
-        font-size: 2rem;
+        font-size: var(--font-size-xl);
     }
 
     h2 {
-        font-size: 1.5rem;
+        font-size: var(--font-size-lg);
     }
 
     .h1-hero {
-        font-size: 2rem !important;
+        font-size: var(--font-size-xxl) !important;
-        margin: 1rem !important;
+        margin: var(--space-md) !important;
-        padding: 1rem !important;
+        padding: var(--space-md) !important;
     }
 
     .mission-vision {
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: var(--space-md);
     }
 
     .service-card {
-        padding: 1.5rem;
+        padding: var(--space-lg);
     }
 
     .welcome-quote {
-        font-size: 1rem;
+        font-size: var(--font-size-md);
-        padding: 1rem;
+        padding: var(--space-md);
     }
 
     .logo-sub {
-        font-size: 0.85rem;
+        font-size: var(--font-size-sm);
-        padding: 1.5rem;
+        padding: var(--space-lg);
         margin: 0;
     }
 
     .mobile-menu-toggle {
         display: block;
-        padding: 0.5rem;
+        padding: var(--space-xs);
-        transition: opacity 0.3s ease;
+        transition: opacity var(--transition-speed) var(--transition-timing);
     }
 
     .mobile-menu-toggle:active {
@@ -59,141 +59,179 @@
     .nav-menu {
         display: none;
         position: fixed;
-        top: 55px;
+        top: var(--header-height);
         left: 0;
         right: 0;
         background: var(--bg-card);
-        min-height: calc(100vh - 55px);
+        min-height: calc(100vh - var(--header-height));
         flex-direction: column;
         align-items: center;
         border-bottom: 1px solid var(--border-color);
-        padding: 2rem 1rem;
+        padding: var(--space-xl) var(--space-md);
-        gap: 1.5rem;
+        gap: var(--space-lg);
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
+        z-index: var(--z-header);
     }
 
     .nav-menu.active {
         display: flex;
-        animation: fadeIn 0.3s ease-in-out;
+        animation: fadeIn var(--transition-speed) var(--transition-timing);
     }
 
     .nav-menu a {
-        padding: 0.75rem 1.5rem;
+        padding: var(--space-sm) var(--space-lg);
         width: 100%;
         text-align: center;
-        border-radius: 0.25rem;
+        border-radius: var(--radius-sm);
-        transition: background-color 0.3s ease;
+        transition: background-color var(--transition-speed) var(--transition-timing);
     }
 
     .nav-menu a:hover {
-        background-color: var(--hover-color);
+        background-color: var(--bg-hover-rgb);
+    }
+
+    .nav-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-md);
+        width: 100%;
+        padding: var(--space-md) 0;
+        border-top: 1px solid var(--border-color);
+        margin-top: var(--space-md);
+    }
+
+    .language-switcher {
+        margin: 0;
+        padding: 0;
     }
 
     .contact-block {
         flex-direction: column;
         align-items: center;
     }
+
+    footer {
+        padding: var(--space-lg) var(--container-padding);
+        gap: var(--space-md);
+    }
+
+    .contact-block {
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    .social-links {
+        gap: var(--space-md);
+    }
+
+    .legal-links a {
+        display: block;
+        margin: var(--space-xs) 0;
+    }
 }
 
 /* Mobile Devices */
 @media (max-width: 480px) {
     .container {
-        padding: 0 1rem;
+        padding: 0 var(--container-padding);
     }
 
     header {
-        padding: 0.75rem;
+        height: var(--header-height);
-        max-height: 120px;
     }
 
     .logo-text {
-        font-size: 1.6rem;
+        font-size: var(--font-size-lg);
     }
 
     main {
-        margin-top: 1rem;
+        margin-top: var(--space-md);
-        padding: 1rem 0;
+        padding: var(--space-md) 0;
     }
 
     section {
-        margin: 2rem 0;
+        margin: var(--space-xl) 0;
     }
 
     h1.h1-hero {
-        font-size: 1.75rem !important;
+        font-size: var(--font-size-xl) !important;
-        margin: 0.5rem !important;
+        margin: var(--space-xs) !important;
-        padding: 0.5rem !important;
+        padding: var(--space-xs) !important;
     }
 
     .welcome-quote {
-        font-size: 0.95rem;
+        font-size: var(--font-size-sm);
-        padding: 0.5rem;
+        padding: var(--space-xs);
-        line-height: 1.5;
+        line-height: var(--line-height-base);
     }
 
     .service-card {
-        padding: 1.25rem;
+        padding: var(--space-md);
-        margin: 1rem 0;
+        margin: var(--space-md) 0;
     }
 
     .service-card h3 {
-        font-size: 1.2rem;
+        font-size: var(--font-size-lg);
     }
 
     .contact-info {
-        padding: 1.5rem;
+        padding: var(--space-lg);
-        margin: 1rem 0;
+        margin: var(--space-md) 0;
     }
 
     .contact-info a {
-        padding: 0.5rem 0;
+        padding: var(--space-xs) 0;
-        font-size: 0.95rem;
+        font-size: var(--font-size-sm);
     }
 
     .logo-sub {
-        font-size: 0.8rem;
+        font-size: var(--font-size-xs);
-        line-height: 1.4;
+        line-height: var(--line-height-base);
-        padding: 1.5rem;
+        padding: var(--space-lg);
         margin: 0;
     }
 
-    .nav-menu {
+    .nav-controls {
-        top: 50px;
+        padding: var(--space-sm) 0;
-        min-height: calc(100vh - 50px);
     }
 }
 
 /* Small Mobile Devices */
 @media (max-width: 320px) {
     header {
-        padding: 0.5rem;
+        height: var(--header-height);
-        max-height: 100px;
     }
 
     .logo-text {
-        font-size: 1.4rem;
+        font-size: var(--font-size-md);
     }
 
     h1.h1-hero {
-        font-size: 1.5rem !important;
+        font-size: var(--font-size-lg) !important;
     }
 
     .service-card {
-        padding: 1rem;
+        padding: var(--space-md);
     }
 
     .contact-info {
-        padding: 1rem;
+        padding: var(--space-md);
     }
 
     .welcome-quote {
-        font-size: 0.9rem;
+        font-size: var(--font-size-xs);
     }
 
     .logo-sub {
-        font-size: 0.75rem;
+        font-size: var(--font-size-xs);
-        padding: 0.75rem;
+        padding: var(--space-sm);
+    }
+
+    .nav-controls {
+        gap: var(--space-sm);
     }
 }
 
@@ -201,7 +239,7 @@
 @media (hover: none) {
     .contact-info a,
     .nav-menu a {
-        padding: 0.75rem;
+        padding: var(--space-sm);
         min-height: 44px;
         display: flex;
         align-items: center;
@@ -215,26 +253,37 @@
     .service-card:hover {
         transform: none;
     }
-
-    header:hover {
-        transform: none;
-    }
 }
 
 /* Fix for notched phones */
 @supports (padding: max(0px)) {
     header {
-        padding-left: max(1rem, env(safe-area-inset-left));
+        padding-left: var(--safe-area-inset-left);
-        padding-right: max(1rem, env(safe-area-inset-right));
+        padding-right: var(--safe-area-inset-right);
     }
 
     .nav-menu {
-        padding-left: max(1rem, env(safe-area-inset-left));
+        padding-left: var(--safe-area-inset-left);
-        padding-right: max(1rem, env(safe-area-inset-right));
+        padding-right: var(--safe-area-inset-right);
-        padding-bottom: max(1rem, env(safe-area-inset-bottom));
+        padding-bottom: var(--safe-area-inset-bottom);
     }
 }
 
+/* Ensure consistent nav-controls across all pages */
+.nav-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-left: var(--space-lg);
+}
+
+.language-switcher {
+    display: flex;
+    gap: var(--space-xs);
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+}
+
 @keyframes fadeIn {
     from {
         opacity: 0;

public/css/variables.css

@@ -1,41 +1,154 @@
+/* Base Theme Variables */
 :root {
-    /* Light theme (default) */
+    /* Breakpoints - for reference only, not used as variables */
+    --breakpoint-mobile-sm: 320px;
+    --breakpoint-mobile: 480px;
+    --breakpoint-tablet: 768px;
+    --breakpoint-desktop: 1200px;
+
+    /* Spacing Scale */
+    --space-unit: 0.25rem;
+    --space-xxs: calc(var(--space-unit) * 1);    /* 0.25rem */
+    --space-xs: calc(var(--space-unit) * 2);     /* 0.5rem */
+    --space-sm: calc(var(--space-unit) * 3);     /* 0.75rem */
+    --space-md: calc(var(--space-unit) * 4);     /* 1rem */
+    --space-lg: calc(var(--space-unit) * 6);     /* 1.5rem */
+    --space-xl: calc(var(--space-unit) * 8);     /* 2rem */
+    --space-xxl: calc(var(--space-unit) * 12);   /* 3rem */
+    --space-xxxl: calc(var(--space-unit) * 16);  /* 4rem */
+    --space-xxxxl: calc(var(--space-unit) * 32);  /* 4rem */
+
+    /* Typography Scale */
+    --font-size-base: 1rem;
+    --font-size-xs: calc(var(--font-size-base) * 0.75);    /* 12px */
+    --font-size-sm: calc(var(--font-size-base) * 0.875);   /* 14px */
+    --font-size-md: var(--font-size-base);                 /* 16px */
+    --font-size-lg: calc(var(--font-size-base) * 1.25);    /* 20px */
+    --font-size-xl: calc(var(--font-size-base) * 1.5);     /* 24px */
+    --font-size-xxl: calc(var(--font-size-base) * 2);      /* 32px */
+    --font-size-xxxl: calc(var(--font-size-base) * 2.5);   /* 40px */
+
+    /* Line Heights */
+    --line-height-tight: 1.2;
+    --line-height-base: 1.6;
+    --line-height-relaxed: 1.8;
+
+    /* Font Weights */
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    /* Layout */
+    --container-padding: var(--space-md);
+    --section-spacing: var(--space-xxxxl);
+    --header-height: 100px;
+    --content-width-sm: 640px;
+    --content-width-md: 768px;
+    --content-width-lg: 1024px;
+    --content-width-xl: 1200px;
+
+    /* Border Radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --radius-pill: 9999px;
+
+    /* Transitions */
+    --transition-speed: 0.3s;
+    --transition-timing: ease;
+    --theme-transition: color var(--transition-speed) var(--transition-timing),
+                       background-color var(--transition-speed) var(--transition-timing);
+
+    /* Light Theme Colors (default) */
     --primary: #3a7be0;
-    --primary-gradient-1: #112fcf;
+    --primary-gradient-1: rgba(17,47, 237); /* #112fed; */
-    --primary-gradient-2: #3b3bc8;
+    --primary-gradient-2: rgba(59, 59, 237); /* #3b3bed; */
-    --primary-gradient-3: #5743ed;
+    --primary-gradient-3: rgba(87, 67, 237); /* #5743ed; */
-    --primary-gradient-4: #784dd9;
+    --primary-gradient-4: rgba(120, 77, 237); /* #784ded; */
     
-    --bg-main: #ffffff;
+    --bg-main: rgba(242, 242, 242, 1);         /* #f2f2f2 */
-    --bg-card: #f5f5f5;
+    --bg-card: rgba(232, 232, 232, 1);         /* #e8e8e8 */
-    --text: #333333;
+    --text: rgba(43, 43, 43, 1);               /* #2b2b2b */
-    --text-muted: #666666;
+    --text-muted: rgba(89, 89, 89, 1);         /* #595959 */
-    --header-gradient-1: rgba(245, 245, 245, 0.9);
+    --header-gradient-1: rgba(242, 242, 242, 0.9);
-    --header-gradient-2: rgba(235, 235, 235, 0.9);
+    --header-gradient-2: rgba(232, 232, 232, 0.9);
-    --border-color: rgba(58, 123, 224, 0.1);
+    --border-color: rgba(58, 123, 224, 0.15);
+    --bg-hover-rgb: rgba(242, 242, 242, 1);
+    --bg-hover-nav: rgba(232, 232, 232, 1);
+
+    /* Language Switcher Specific */
+    --lang-switcher-bg: var(--bg-card);
+    --lang-switcher-text: var(--text);
+    --lang-switcher-border: var(--primary);
+    --lang-switcher-active-bg: var(--primary);
+    --lang-switcher-active-text: var(--bg-main);
+    --lang-switcher-shadow: rgba(0, 0, 0, 0.1);
+    --lang-switcher-hover-opacity: 0.9;
+
+    /* Z-index Scale */
+    --z-below: -1;
+    --z-normal: 1;
+    --z-above: 10;
+    --z-header: 100;
+    --z-modal: 1000;
+    --z-language-switcher: 1001;
 }
 
+/* Dark Theme */
 [data-theme="dark"] {
-    --bg-main: #0a0a0a;
+    --bg-main: rgba(10, 10, 10, 1);            /* #0a0a0a */
-    --bg-card: #141414;
+    --bg-card: rgba(20, 20, 20, 1);            /* #141414 */
-    --text: #e0e0e0;
+    --text: rgba(224, 224, 224, 1);            /* #e0e0e0 */
-    --text-muted: #888888;
+    --text-muted: rgba(136, 136, 136, 1);      /* #888888 */
     --header-gradient-1: rgba(14, 14, 14, 0.9);
     --header-gradient-2: rgba(41, 41, 41, 0.9);
+    --bg-hover-rgb: rgba(17, 17, 17, 1);
+    --bg-hover-nav: rgba(20, 20, 20, 1);
+
+    /* Language Switcher Dark Theme */
+    --lang-switcher-bg: var(--bg-card);
+    --lang-switcher-shadow: rgba(0, 0, 0, 0.2);
 }
 
-/* Common tokens */
+/* Responsive Adjustments */
-:root {
+@media (max-width: 768px) {
-    --spacing-sm: 0.5rem;
+    :root {
-    --spacing-md: 1rem;
+        /* Tablet Adjustments */
-    --spacing-lg: 1.5rem;
+        --font-size-base: 0.9375rem;
-    --spacing-xl: 2rem;
+        --header-height: 80px;
-    --border-radius: 8px;
+        --container-padding: var(--space-lg);
-    --transition-speed: 0.3s;
+        --section-spacing: var(--space-xl);
-    --header-height: 140px;
+    }
-    
+}
-    /* Theme transition with GPU acceleration */
+
-    --theme-transition: color var(--transition-speed) ease,
+@media (max-width: 480px) {
-                       background-color var(--transition-speed) ease;
+    :root {
-    --gpu-accelerated: translate3d(0, 0, 0);
+        /* Mobile Adjustments */
+        --font-size-base: 0.875rem;
+        --header-height: 70px;
+        --container-padding: var(--space-md);
+        --section-spacing: var(--space-lg);
+    }
+}
+
+@media (max-width: 320px) {
+    :root {
+        /* Small Mobile Adjustments */
+        --font-size-base: 0.8125rem;
+        --header-height: 60px;
+        --container-padding: var(--space-sm);
+        --section-spacing: var(--space-md);
+    }
+}
+
+/* Safe Area Insets for Notched Devices */
+@supports (padding: max(0px)) {
+    :root {
+        --safe-area-inset-top: max(0px, env(safe-area-inset-top));
+        --safe-area-inset-right: max(0px, env(safe-area-inset-right));
+        --safe-area-inset-bottom: max(0px, env(safe-area-inset-bottom));
+        --safe-area-inset-left: max(0px, env(safe-area-inset-left));
+    }
 }

public/datenschutz.html

@@ -8,22 +8,26 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-    <link rel="stylesheet" href="css/variables.css">
-    <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/header.css">
-    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/header-line.css">
+    <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/language-switcher.css">
     <script src="js/components.js" defer></script>
+    <script src="js/translations.js" defer></script>
+    <script src="js/language.js" defer></script>
     <script src="js/theme.js" defer></script>
 </head>
 <body>
     <main>
         <div class="container">
             <section>
-                <h1>Datenschutzerklärung</h1>
+                <h1 data-i18n="footer.privacy">Datenschutzerklärung</h1>
                 <div class="card-base">
                     <h2>1. Datenschutz auf einen Blick</h2>
                     <h3>Allgemeine Hinweise</h3>

public/impressum.html

@@ -8,31 +8,35 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-    <link rel="stylesheet" href="css/variables.css">
-    <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/header.css">
-    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/header-line.css">
+    <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/language-switcher.css">
     <script src="js/components.js" defer></script>
+    <script src="js/translations.js" defer></script>
+    <script src="js/language.js" defer></script>
     <script src="js/theme.js" defer></script>
 </head>
 <body>
     <main>
         <div class="container">
             <section>
-                <h1>Impressum</h1>
+                <h1 data-i18n="footer.imprint">Impressum</h1>
                 <div class="card-base">
                     <h2>Angaben gemäß § 5 TMG</h2>
                     <p>7SYS<br>
                     <p>Benjamin Bader<br>
-                    [hidden]<br>
+                    Baden-Württemberg<br>
-                    [hidden]</p>
+                    Germany</p>
 
                     <h3>Kontakt</h3>
-                    <p>Telefon: [hidden]<br>
+                    <p>Signal Messenger<br>
                     E-Mail: info@7sys.de</p>
 
                     <h3>Umsatzsteuer-ID</h3>
@@ -40,9 +44,7 @@
                     DE[hidden]</p>
 
                     <h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
-                    <p>Benjamin Bader<br>
+                    <p>Benjamin Bader<br></p>
-                    [hidden]<br>
-                    [hidden]</p>
                 </div>
             </section>
         </div>

public/index.html

@@ -3,22 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="7SYS - Ihr Partner für maßgeschneiderte IT-Lösungen, Systemarchitekturen und digitale Souveränität. Persönliche Betreuung für nachhaltige IT-Infrastruktur.">
+    <meta name="description" data-i18n="meta.description" content="7SYS - Ihr Partner für maßgeschneiderte IT-Lösungen, Systemarchitekturen und digitale Souveränität. Persönliche Betreuung für nachhaltige IT-Infrastruktur.">
-    <title>7SYS - Persönliche IT-Lösungen</title>
+    <title data-i18n="meta.title">7SYS - Persönliche IT-Lösungen</title>
     <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel="stylesheet" href="css/variables.css">
-    <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/header.css">
-    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/header-line.css">
+    <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/language-switcher.css">
+    <script src="js/translations.js" defer></script>
+    <script src="js/language.js" defer></script>
     <script src="js/components.js" defer></script>
     <script src="js/theme.js" defer></script>
 </head>
@@ -26,62 +30,86 @@
     <main>
         <div class="container">
             <section id="intro">
-                <h1 class="h1-hero">Ihr Partner für Digitale Souveränität</h1>
+                <h1 class="h1-hero" data-i18n="intro.hero">Ihr Partner für Digitale Souveränität</h1>
-                <p class="welcome-quote">Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.</p>
+                <p class="welcome-quote" data-i18n="intro.welcome">Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.</p>
-                <span class="logo-sub">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)</span>
+                <span class="logo-sub" data-i18n="intro.quote">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)</span>
                 <div class="mission-vision">
                     <div class="tooltip-container">
-                        <h3>Meine Vision</h3>
+                        <div class="tooltip-header">
-                        <p>Digitale Souveränität</p>
+                            <h3 data-i18n="vision.title">Meine Vision</h3>
-                        <div class="tooltip">
+                            <p data-i18n="vision.subtitle">Digitale Souveränität</p>
-                            Wir streben eine Zukunft an, in der Unternehmen die volle Kontrolle über ihre digitalen Ressourcen haben. Digitale Souveränität bedeutet für uns, dass Sie selbstbestimmt und unabhängig über Ihre IT-Infrastruktur entscheiden können, während Sie gleichzeitig von modernsten Technologien profitieren.
+                        </div>
+                        <div class="tooltip-content" data-i18n="vision.content">
+                            Ich strebe eine Zukunft an, in der jedes Individuum die volle Kontrolle über ihre digitalen Ressourcen hat. Digitale Souveränität bedeutet für mich, eine sichere, unabhängige und datenschutzkonforme Nutzung moderner Technologien zu ermöglichen, bei der jede Person die Kontrolle über ihre Daten, Zugriffe und IT-Systeme behält, ohne von externen Anbietern oder unsicheren Lösungen abhängig zu sein.
                         </div>
                     </div>
                     <div class="tooltip-container">
-                        <h3>Meine Mission</h3>
+                        <div class="tooltip-header">
-                        <p>Sichere und nachhaltige IT-Lösungen</p>
+                            <h3 data-i18n="mission.title">Meine Mission</h3>
-                        <div class="tooltip">
+                            <p data-i18n="mission.subtitle">Sichere und nachhaltige IT-Lösungen</p>
-                            Durch maßgeschneiderte IT-Lösungen ermöglichen wir es unseren Kunden, ihre digitale Infrastruktur sicher und zukunftsfähig zu gestalten. Wir setzen dabei auf nachhaltige Technologien, die sowohl ressourceneffizient als auch langfristig wartbar sind. Unser Ziel ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
+                        </div>
+                        <div class="tooltip-content" data-i18n="mission.content">
+                            Meine Mission ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
                         </div>
                     </div>
                 </div>
             </section>
 
             <section id="services">
-                <h2>Meine Expertise</h2>
+                <h2 data-i18n="services.title">Meine Expertise</h2>
                 
                 <div class="service-card">
-                    <h3>IT-Beratung</h3>
+                    <h3 data-i18n="services.consulting.title">Strategische IT-Beratung</h3>
-                    <p>Strategische IT-Beratung für Ihren Erfolg: Von der Analyse Ihrer bestehenden Systeme bis zur Entwicklung zukunftssicherer IT-Strategien. Ich begleite Sie persönlich bei jedem Schritt.</p>
+                    <p data-i18n="services.consulting.intro">Ich begleite Sie persönlich bei der Entwicklung und Umsetzung Ihrer IT-Strategien</p>
+                    <li data-i18n="services.consulting.items.0">Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft</li>
+                    <li data-i18n="services.consulting.items.1">Individuelle Lösungen für Ihre Bedürfnisse</li>
+                    <li data-i18n="services.consulting.items.2">Zukunftsorientierte Technologieberatung</li>
                 </div>
 
                 <div class="service-card">
-                    <h3>Systemadministration</h3>
+                    <h3 data-i18n="services.administration.title">Systemadministration</h3>
-                    <p>Professionelle Verwaltung und Wartung Ihrer IT-Systeme: Server-Management, Netzwerkadministration, Backup-Konzepte und Security-Lösungen für einen reibungslosen Betrieb.</p>
+                    <p data-i18n="services.administration.intro">Professionelle Verwaltung und Wartung Ihrer IT-Systeme</p>
+                    <li data-i18n="services.administration.items.0">Server-Management</li>
+                    <li data-i18n="services.administration.items.1">Netzwerkadministration</li>
+                    <li data-i18n="services.administration.items.2">Backup-Konzepte</li>
+                    <li data-i18n="services.administration.items.3">Security-Lösungen</li>
                 </div>
 
                 <div class="service-card">
-                    <h3>Automatisierung</h3>
+                    <h3 data-i18n="services.automation.title">Automatisierung</h3>
-                    <p>Clevere automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.</p>
+                    <p data-i18n="services.automation.intro">Automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.</p>
+                    <li data-i18n="services.automation.items.0">Ansible, PowerShell, Bash</li>
+                    <li data-i18n="services.automation.items.1">N8N Workflows, Microsoft Power Automate</li>
                 </div>
 
                 <div class="service-card">
-                    <h3>Cloud Services</h3>
+                    <h3 data-i18n="services.cloud.title">Self-Hosted & Cloud Solutions</h3>
-                    <p>Maßgeschneiderte Cloud-Lösungen: Migration, Implementierung und Management Ihrer Cloud-Infrastruktur. Skalierbar, sicher und kosteneffizient – optimal auf Ihre Bedürfnisse abgestimmt.</p>
+                    <li data-i18n="services.cloud.items.0">Wartung von Cloud- oder Self-Hosted-Infrastrukturen</li>
+                    <li data-i18n="services.cloud.items.1">Planung, Migration und Administration</li>
+                </div>
+                
+                <div class="service-card">
+                    <h3 data-i18n="services.core.title">Kernkompetenzen</h3>
+                    <li data-i18n="services.core.items.0">Microsoft Infrastrukturen (M365, Azure, AD, Windows Server, DNS, DHCP)</li>
+                    <li data-i18n="services.core.items.1">Linux-Server (RedHat or Debian based distributions)</li>
+                    <li data-i18n="services.core.items.2">Virtualisierung (Proxmox, vSphere, Xen Server)</li>
+                    <li data-i18n="services.core.items.3">Netzwerktechnik (Secure Point, Cisco, Mikrotik)</li>
+                    <li data-i18n="services.core.items.4">Sicherheit (Firewalls, VPN, Antivirus, Backup)</li>
+                    <li data-i18n="services.core.items.5">Automatisierung (Ansible, PowerShell, Bash).</li>
                 </div>
             </section>
 
             <section id="contact">
-                <h2>Kontakt</h2>
+                <h2 data-i18n="contact.title">Kontakt</h2>
                 <div class="contact-info">
-                    <p>Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam, <br>
+                    <p data-i18n="contact.message">Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam, <br>
-                         an Ihrer digitalen Zukunft zu arbeiten.</p>
+                         an Ihrer digitalen Souveränität zu arbeiten.</p>
                     <div class="contact-links">
                         <a href="mailto:info@7sys.de" class="contact-link">
                             <i class="fas fa-envelope"></i>
                             info@7sys.de
                         </a>
-                        <a href="signal://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR" class="contact-link">
+                        <a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR" class="contact-link">
                             <svg class="signal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24">
                                 <path fill="currentColor" d="M128 26.6C71.9 26.6 26.6 71.9 26.6 128c0 56.1 45.3 101.4 101.4 101.4c56.1 0 101.4-45.3 101.4-101.4C229.4 71.9 184.1 26.6 128 26.6zM128 220c-50.7 0-92-41.3-92-92s41.3-92 92-92s92 41.3 92 92S178.7 220 128 220z M128 76.5c-28.4 0-51.5 23.1-51.5 51.5s23.1 51.5 51.5 51.5s51.5-23.1 51.5-51.5S156.4 76.5 128 76.5z M128 170c-23.1 0-42-18.9-42-42s18.9-42 42-42s42 18.9 42 42S151.1 170 128 170z M128 98.5c-16.3 0-29.5 13.2-29.5 29.5s13.2 29.5 29.5 29.5s29.5-13.2 29.5-29.5S144.3 98.5 128 98.5z"/>
                             </svg>

public/js/components.js

@@ -24,14 +24,58 @@ document.addEventListener('DOMContentLoaded', function() {
         loadComponent('components/footer.html', 'beforeend')
     ]).then(results => {
         if (results.every(Boolean)) {
-            // Dispatch custom event when all components are loaded
             document.dispatchEvent(new Event('componentsLoaded'));
+            initializeTooltips();
         }
     }).catch(error => {
         console.warn('Error loading components:', error);
     });
 
-    // Initialize header functionality after it's loaded
+    // Initialize tooltip functionality
+    function initializeTooltips() {
+        const tooltipContainers = document.querySelectorAll('.tooltip-container');
+        
+        tooltipContainers.forEach(container => {
+            container.addEventListener('click', function(e) {
+                // Prevent click from propagating if clicking inside the content when expanded
+                if (this.classList.contains('active') && 
+                    e.target.closest('.tooltip-content') && 
+                    !e.target.closest('.tooltip-header')) {
+                    return;
+                }
+                
+                // Toggle current container
+                this.classList.toggle('active');
+                
+                // Close other containers
+                tooltipContainers.forEach(otherContainer => {
+                    if (otherContainer !== this && otherContainer.classList.contains('active')) {
+                        otherContainer.classList.remove('active');
+                    }
+                });
+            });
+        });
+
+        // Close tooltips when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.tooltip-container')) {
+                tooltipContainers.forEach(container => {
+                    container.classList.remove('active');
+                });
+            }
+        });
+
+        // Handle escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                tooltipContainers.forEach(container => {
+                    container.classList.remove('active');
+                });
+            }
+        });
+    }
+
+    // Initialize header functionality
     function initializeHeader() {
         const header = document.querySelector('header');
         if (!header) return;
@@ -101,36 +145,5 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             });
         }
-
-        // Scroll behavior - only enable on index page
-        if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
-            let lastScrollTop = 0;
-            let scrollTimeout;
-
-            window.addEventListener('scroll', () => {
-                if (scrollTimeout) {
-                    window.cancelAnimationFrame(scrollTimeout);
-                }
-
-                scrollTimeout = window.requestAnimationFrame(() => {
-                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                    
-                    // Don't hide header when near top of page
-                    if (scrollTop < 100) {
-                        header.style.transform = 'translateY(0)';
-                        return;
-                    }
-                    
-                    // Hide header on scroll down, show on scroll up
-                    if (scrollTop > lastScrollTop) {
-                        header.style.transform = 'translateY(-100%)';
-                    } else {
-                        header.style.transform = 'translateY(0)';
-                    }
-                    
-                    lastScrollTop = scrollTop;
-                });
-            }, { passive: true });
-        }
     }
 });

public/js/language.js

@@ -0,0 +1,80 @@
+document.addEventListener('componentsLoaded', function() {
+    // Initialize language system
+    const defaultLang = 'de';
+    let currentLang = localStorage.getItem('preferredLanguage') || defaultLang;
+
+    // Initialize language switcher
+    initializeLanguageSwitcher();
+    updateContent();
+    updateHTMLLang(); // Ensure HTML lang attribute is set initially
+
+    function initializeLanguageSwitcher() {
+        const switcher = document.querySelector('.language-switcher');
+        if (!switcher) return;
+
+        // Set initial active state
+        updateButtonStates();
+
+        // Add click handlers
+        switcher.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const newLang = btn.dataset.lang;
+                if (newLang !== currentLang) {
+                    currentLang = newLang;
+                    localStorage.setItem('preferredLanguage', currentLang);
+                    updateButtonStates();
+                    updateContent();
+                    updateHTMLLang();
+                }
+            });
+        });
+    }
+
+    function updateButtonStates() {
+        document.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.lang === currentLang);
+        });
+    }
+
+    function updateHTMLLang() {
+        document.documentElement.setAttribute('lang', currentLang);
+    }
+
+    function updateContent() {
+        const elements = document.querySelectorAll('[data-i18n]');
+        elements.forEach(element => {
+            const key = element.dataset.i18n; // Fixed: using dataset.i18n instead of i18n
+            const translation = getTranslation(key);
+            if (translation !== undefined) {
+                if (element.tagName === 'META') {
+                    element.setAttribute('content', translation);
+                } else {
+                    element.innerHTML = translation;
+                }
+            }
+        });
+
+        // Update meta tags
+        updateMetaTags();
+    }
+
+    function updateMetaTags() {
+        document.title = translations[currentLang].meta.title;
+        const metaDescription = document.querySelector('meta[name="description"]');
+        if (metaDescription) {
+            metaDescription.setAttribute('content', translations[currentLang].meta.description);
+        }
+    }
+
+    function getTranslation(key) {
+        const keys = key.split('.');
+        let value = translations[currentLang];
+        
+        for (const k of keys) {
+            if (value === undefined) return undefined;
+            value = value[k];
+        }
+        
+        return value;
+    }
+});

public/js/theme.js

@@ -11,12 +11,11 @@
     // Initialize theme immediately to prevent flash of wrong theme
     initThemeEarly();
 
-    // Then initialize everything else when DOM is ready
+    // Wait for components to be loaded before initializing the theme system
-    if (document.readyState === 'loading') {
+    document.addEventListener('componentsLoaded', function() {
-        document.addEventListener('DOMContentLoaded', initializeThemeSystem);
+        console.log('Components loaded, initializing theme system...');
-    } else {
         initializeThemeSystem();
-    }
+    });
 
     // Functions
     function initThemeEarly() {
@@ -35,12 +34,16 @@
     }
 
     function initializeThemeSystem() {
+        console.log('Theme system initializing...');
         try {
             // Set up theme toggle button
             const themeToggle = document.querySelector('.theme-toggle');
+            console.log('Theme toggle button found:', themeToggle);
+            
             if (themeToggle) {
                 themeToggle.addEventListener('click', toggleTheme);
                 updateThemeIcon(getCurrentTheme());
+                console.log('Theme toggle event listener added');
             }
 
             // Set up system theme change listener
@@ -67,6 +70,10 @@
         try {
             const currentTheme = getCurrentTheme();
             const newTheme = currentTheme === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
+
+            console.log('Theme Toggle clicked!');
+            console.log('Current theme:', currentTheme);
+            console.log('New theme:', newTheme);
             
             setTheme(newTheme);
             localStorage.setItem(THEME_STORAGE_KEY, newTheme);
@@ -78,11 +85,15 @@
 
     function updateThemeIcon(theme) {
         try {
-            const themeIcon = document.querySelector('.theme-toggle i');
+            const themeToggle = document.querySelector('.theme-toggle');
-            if (themeIcon) {
+            if (themeToggle) {
-                themeIcon.className = theme === THEMES.DARK 
+                // Ensure both icons exist
-                    ? 'fas fa-sun' 
+                if (!themeToggle.querySelector('.fa-sun')) {
-                    : 'fas fa-moon';
+                    themeToggle.innerHTML = `
+                        <i class="fas fa-sun"></i>
+                        <i class="fas fa-moon"></i>
+                    `;
+                }
             }
         } catch (error) {
             console.warn('Theme icon update error:', error);
@@ -111,4 +122,4 @@
             console.warn('Theme persistence error:', error);
         }
     }
-})();
+})();

public/js/translations.js

@@ -0,0 +1,158 @@
+const translations = {
+    de: {
+        meta: {
+            description: "7SYS - Ihr Partner für maßgeschneiderte IT-Lösungen, Systemarchitekturen und digitale Souveränität. Persönliche Betreuung für nachhaltige IT-Infrastruktur.",
+            title: "7SYS - Persönliche IT-Lösungen"
+        },
+        intro: {
+            hero: "Ihr Partner für Digitale Souveränität",
+            welcome: "Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.",
+            quote: "Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)"
+        },
+        vision: {
+            title: "Meine Vision",
+            subtitle: "Digitale Souveränität",
+            content: "Ich strebe eine Zukunft an, in der jedes Individuum die volle Kontrolle über ihre digitalen Ressourcen hat. Digitale Souveränität bedeutet für mich, eine sichere, unabhängige und datenschutzkonforme Nutzung moderner Technologien zu ermöglichen, bei der jede Person die Kontrolle über ihre Daten, Zugriffe und IT-Systeme behält, ohne von externen Anbietern oder unsicheren Lösungen abhängig zu sein."
+        },
+        mission: {
+            title: "Meine Mission",
+            subtitle: "Sichere und nachhaltige IT-Lösungen",
+            content: "Meine Mission ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten."
+        },
+        services: {
+            title: "Meine Expertise",
+            consulting: {
+                title: "Strategische IT-Beratung",
+                intro: "Ich begleite Sie persönlich bei der Entwicklung und Umsetzung Ihrer IT-Strategien",
+                items: [
+                    "Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft",
+                    "Individuelle Lösungen für Ihre Bedürfnisse",
+                    "Zukunftsorientierte Technologieberatung"
+                ]
+            },
+            administration: {
+                title: "Systemadministration",
+                intro: "Professionelle Verwaltung und Wartung Ihrer IT-Systeme",
+                items: [
+                    "Server-Management",
+                    "Netzwerkadministration",
+                    "Backup-Konzepte",
+                    "Security-Lösungen"
+                ]
+            },
+            automation: {
+                title: "Automatisierung",
+                intro: "Automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.",
+                items: [
+                    "Ansible, PowerShell, Bash",
+                    "N8N Workflows, Microsoft Power Automate"
+                ]
+            },
+            cloud: {
+                title: "Self-Hosted & Cloud Solutions",
+                items: [
+                    "Wartung von Cloud- oder Self-Hosted-Infrastrukturen",
+                    "Planung, Migration und Administration"
+                ]
+            },
+            core: {
+                title: "Kernkompetenzen",
+                items: [
+                    "Microsoft Infrastrukturen (M365, Azure, AD, Windows Server, DNS, DHCP)",
+                    "Linux-Server (RedHat or Debian based distributions)",
+                    "Virtualisierung (Proxmox, vSphere, Xen Server)",
+                    "Netzwerktechnik (Secure Point, Cisco, Mikrotik)",
+                    "Sicherheit (Firewalls, VPN, Antivirus, Backup)",
+                    "Automatisierung (Ansible, PowerShell, Bash)."
+                ]
+            }
+        },
+        contact: {
+            title: "Kontakt",
+            message: "Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam, an Ihrer digitalen Souveränität zu arbeiten."
+        },
+        footer: {
+            signal: "Signal",
+            imprint: "Impressum",
+            privacy: "Datenschutz"
+        }
+    },
+    en: {
+        meta: {
+            description: "7SYS - Your partner for customized IT solutions, system architectures, and digital sovereignty. Personal support for sustainable IT infrastructure.",
+            title: "7SYS - Personal IT Solutions"
+        },
+        intro: {
+            hero: "Your Partner for Digital Sovereignty",
+            welcome: "As your personal IT expert, I develop customized and future-proof system architectures. With expertise and passion, I create IT solutions that sustainably strengthen and protect your business.",
+            quote: "Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)"
+        },
+        vision: {
+            title: "My Vision",
+            subtitle: "Digital Sovereignty",
+            content: "I envision a future where every individual has full control over their digital resources. For me, digital sovereignty means enabling secure, independent, and privacy-compliant use of modern technologies, where each person maintains control over their data, access, and IT systems without depending on external providers or insecure solutions."
+        },
+        mission: {
+            title: "My Mission",
+            subtitle: "Secure and Sustainable IT Solutions",
+            content: "My mission is to competently guide you on your path to digital sovereignty."
+        },
+        services: {
+            title: "My Expertise",
+            consulting: {
+                title: "Strategic IT Consulting",
+                intro: "I personally accompany you in developing and implementing your IT strategies",
+                items: [
+                    "Analysis of your existing systems and situation with a view to the future",
+                    "Individual solutions for your needs",
+                    "Future-oriented technology consulting"
+                ]
+            },
+            administration: {
+                title: "System Administration",
+                intro: "Professional management and maintenance of your IT systems",
+                items: [
+                    "Server Management",
+                    "Network Administration",
+                    "Backup Concepts",
+                    "Security Solutions"
+                ]
+            },
+            automation: {
+                title: "Automation",
+                intro: "Automated solutions for selected processes that you can use in your organization to make work secure, efficient, and consistent.",
+                items: [
+                    "Ansible, PowerShell, Bash",
+                    "N8N Workflows, Microsoft Power Automate"
+                ]
+            },
+            cloud: {
+                title: "Self-Hosted & Cloud Solutions",
+                items: [
+                    "Maintenance of cloud or self-hosted infrastructures",
+                    "Planning, migration, and administration"
+                ]
+            },
+            core: {
+                title: "Core Competencies",
+                items: [
+                    "Microsoft Infrastructures (M365, Azure, AD, Windows Server, DNS, DHCP)",
+                    "Linux Servers (RedHat or Debian based distributions)",
+                    "Virtualization (Proxmox, vSphere, Xen Server)",
+                    "Network Technology (Secure Point, Cisco, Mikrotik)",
+                    "Security (Firewalls, VPN, Antivirus, Backup)",
+                    "Automation (Ansible, PowerShell, Bash)."
+                ]
+            }
+        },
+        contact: {
+            title: "Contact",
+            message: "I look forward to learning about your project and working with you together on your digital sovereignty."
+        },
+        footer: {
+            signal: "Signal",
+            imprint: "Legal Notice",
+            privacy: "Privacy Policy"
+        }
+    }
+};