diff --git a/RollkofferSimulator/AppDelegate.swift b/RollkofferSimulator/AppDelegate.swift
index 5a9cbe4..85a1aea 100644
--- a/RollkofferSimulator/AppDelegate.swift
+++ b/RollkofferSimulator/AppDelegate.swift
@@ -14,6 +14,10 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
     func application(_ application: UIApplication,
                      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        #if targetEnvironment(macCatalyst)
+        // Configure for macOS
+        configureMacOS()
+        #endif
         return true
     }
 
@@ -33,10 +37,60 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     func applicationDidBecomeActive(_ application: UIApplication) {
         // Resume game if needed
     }
+
+    #if targetEnvironment(macCatalyst)
+    // MARK: - macOS Configuration
+    private func configureMacOS() {
+        // Set minimum window size for macOS
+        UIApplication.shared.connectedScenes.compactMap { $0 as? UIWindowScene }.forEach { windowScene in
+            windowScene.sizeRestrictions?.minimumSize = CGSize(width: 400, height: 600)
+            windowScene.sizeRestrictions?.maximumSize = CGSize(width: 600, height: 900)
+        }
+    }
+
+    override func buildMenu(with builder: UIMenuBuilder) {
+        super.buildMenu(with: builder)
+
+        // Remove unnecessary menus for a game
+        builder.remove(menu: .format)
+        builder.remove(menu: .edit)
+
+        // Add Game menu
+        let pauseCommand = UIKeyCommand(
+            title: "Pause",
+            action: #selector(handlePauseCommand),
+            input: "p",
+            modifierFlags: .command
+        )
+
+        let restartCommand = UIKeyCommand(
+            title: "Neustart",
+            action: #selector(handleRestartCommand),
+            input: "r",
+            modifierFlags: .command
+        )
+
+        let gameMenu = UIMenu(
+            title: "Spiel",
+            children: [pauseCommand, restartCommand]
+        )
+
+        builder.insertSibling(gameMenu, afterMenu: .file)
+    }
+
+    @objc private func handlePauseCommand() {
+        NotificationCenter.default.post(name: .pauseGame, object: nil)
+    }
+
+    @objc private func handleRestartCommand() {
+        NotificationCenter.default.post(name: .restartGame, object: nil)
+    }
+    #endif
 }
 
 // MARK: - Notification Names
 extension Notification.Name {
     static let pauseGame = Notification.Name("pauseGame")
     static let resumeGame = Notification.Name("resumeGame")
+    static let restartGame = Notification.Name("restartGame")
 }
diff --git a/RollkofferSimulator/GameViewController.swift b/RollkofferSimulator/GameViewController.swift
index 9d0e5a3..f755f34 100644
--- a/RollkofferSimulator/GameViewController.swift
+++ b/RollkofferSimulator/GameViewController.swift
@@ -36,6 +36,10 @@ class GameViewController: UIViewController {
 
         // Setup notification observers
         setupNotificationObservers()
+
+        #if targetEnvironment(macCatalyst)
+        setupMacCatalyst()
+        #endif
     }
 
     private func setupNotificationObservers() {
@@ -45,6 +49,13 @@ class GameViewController: UIViewController {
             name: .pauseGame,
             object: nil
         )
+
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(handleRestartNotification),
+            name: .restartGame,
+            object: nil
+        )
     }
 
     @objc private func handlePauseNotification() {
@@ -57,12 +68,46 @@ class GameViewController: UIViewController {
         // This is just a notification that the app is going to background
     }
 
+    @objc private func handleRestartNotification() {
+        guard let skView = self.view as? SKView else { return }
+
+        let menuScene = MenuScene(size: skView.bounds.size)
+        menuScene.scaleMode = .aspectFill
+
+        let transition = SKTransition.fade(withDuration: 0.5)
+        skView.presentScene(menuScene, transition: transition)
+    }
+
+    #if targetEnvironment(macCatalyst)
+    private func setupMacCatalyst() {
+        // Configure window appearance for macOS
+        if let windowScene = view.window?.windowScene {
+            windowScene.title = "Rollkoffer Simulator"
+
+            // Set window style
+            if let titlebar = windowScene.titlebar {
+                titlebar.titleVisibility = .visible
+                titlebar.toolbarStyle = .unified
+            }
+        }
+    }
+
+    // Enable keyboard input
+    override var canBecomeFirstResponder: Bool {
+        return true
+    }
+    #endif
+
     override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
+        #if targetEnvironment(macCatalyst)
+        return .all
+        #else
         if UIDevice.current.userInterfaceIdiom == .phone {
             return .portrait
         } else {
             return .all
         }
+        #endif
     }
 
     override var prefersStatusBarHidden: Bool {
diff --git a/RollkofferSimulator/Info.plist b/RollkofferSimulator/Info.plist
index c05f1e7..8f5d56d 100644
--- a/RollkofferSimulator/Info.plist
+++ b/RollkofferSimulator/Info.plist
@@ -50,5 +50,9 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
+	<key>LSMinimumSystemVersion</key>
+	<string>13.0</string>
+	<key>NSHumanReadableCopyright</key>
+	<string>Copyright 2024 Ingo K. All rights reserved.</string>
 </dict>
 </plist>
diff --git a/RollkofferSimulator/RollkofferSimulator.xcodeproj/project.pbxproj b/RollkofferSimulator/RollkofferSimulator.xcodeproj/project.pbxproj
index 0531fdd..2069378 100644
--- a/RollkofferSimulator/RollkofferSimulator.xcodeproj/project.pbxproj
+++ b/RollkofferSimulator/RollkofferSimulator.xcodeproj/project.pbxproj
@@ -381,6 +381,7 @@
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DERIVE_MACCATALYST_PRODUCT_BUNDLE_IDENTIFIER = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = Info.plist;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
@@ -393,9 +394,12 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
+				MACOSX_DEPLOYMENT_TARGET = 13.0;
 				MARKETING_VERSION = 1.0;
 				PRODUCT_BUNDLE_IDENTIFIER = com.ingok.RollkofferSimulator;
 				PRODUCT_NAME = "$(TARGET_NAME)";
+				SUPPORTS_MACCATALYST = YES;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_EMIT_LOC_STRINGS = YES;
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
@@ -409,6 +413,7 @@
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DERIVE_MACCATALYST_PRODUCT_BUNDLE_IDENTIFIER = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = Info.plist;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
@@ -421,9 +426,12 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
+				MACOSX_DEPLOYMENT_TARGET = 13.0;
 				MARKETING_VERSION = 1.0;
 				PRODUCT_BUNDLE_IDENTIFIER = com.ingok.RollkofferSimulator;
 				PRODUCT_NAME = "$(TARGET_NAME)";
+				SUPPORTS_MACCATALYST = YES;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_EMIT_LOC_STRINGS = YES;
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
diff --git a/RollkofferSimulator/Scenes/GameOverScene.swift b/RollkofferSimulator/Scenes/GameOverScene.swift
index 6d66b8f..4d8b0c6 100644
--- a/RollkofferSimulator/Scenes/GameOverScene.swift
+++ b/RollkofferSimulator/Scenes/GameOverScene.swift
@@ -223,6 +223,27 @@ class GameOverScene: SKScene {
         }
     }
 
+    // MARK: - Keyboard Handling (macOS)
+    #if targetEnvironment(macCatalyst)
+    override var canBecomeFirstResponder: Bool { true }
+
+    override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
+        guard let key = presses.first?.key else {
+            super.pressesBegan(presses, with: event)
+            return
+        }
+
+        switch key.keyCode {
+        case .keyboardSpacebar, .keyboardReturnOrEnter:
+            retryGame()
+        case .keyboardEscape:
+            returnToMenu()
+        default:
+            super.pressesBegan(presses, with: event)
+        }
+    }
+    #endif
+
     private func retryGame() {
         let pressDown = SKAction.scale(to: 0.9, duration: 0.1)
         let pressUp = SKAction.scale(to: 1.0, duration: 0.1)
diff --git a/RollkofferSimulator/Scenes/GameScene.swift b/RollkofferSimulator/Scenes/GameScene.swift
index 1df64d7..7db94cf 100644
--- a/RollkofferSimulator/Scenes/GameScene.swift
+++ b/RollkofferSimulator/Scenes/GameScene.swift
@@ -318,6 +318,29 @@ class GameScene: SKScene {
         isDragging = false
     }
 
+    // MARK: - Keyboard Handling (macOS)
+    #if targetEnvironment(macCatalyst)
+    override var canBecomeFirstResponder: Bool { true }
+
+    override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
+        guard let key = presses.first?.key else {
+            super.pressesBegan(presses, with: event)
+            return
+        }
+
+        switch key.keyCode {
+        case .keyboardEscape:
+            togglePause()
+        case .keyboardSpacebar:
+            if gameState.currentState == .paused {
+                resumeGame()
+            }
+        default:
+            super.pressesBegan(presses, with: event)
+        }
+    }
+    #endif
+
     // MARK: - Pause Handling
     private func togglePause() {
         if gameState.currentState == .playing {
diff --git a/RollkofferSimulator/Scenes/MenuScene.swift b/RollkofferSimulator/Scenes/MenuScene.swift
index 7a650ce..074984e 100644
--- a/RollkofferSimulator/Scenes/MenuScene.swift
+++ b/RollkofferSimulator/Scenes/MenuScene.swift
@@ -245,6 +245,25 @@ class MenuScene: SKScene {
         }
     }
 
+    // MARK: - Keyboard Handling (macOS)
+    #if targetEnvironment(macCatalyst)
+    override var canBecomeFirstResponder: Bool { true }
+
+    override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
+        guard let key = presses.first?.key else {
+            super.pressesBegan(presses, with: event)
+            return
+        }
+
+        switch key.keyCode {
+        case .keyboardSpacebar, .keyboardReturnOrEnter:
+            startGame()
+        default:
+            super.pressesBegan(presses, with: event)
+        }
+    }
+    #endif
+
     private func startGame() {
         // Button press effect
         let pressDown = SKAction.scale(to: 0.9, duration: 0.1)
diff --git a/RollkofferSimulator/Scenes/VictoryScene.swift b/RollkofferSimulator/Scenes/VictoryScene.swift
index c6f4fa4..82910d9 100644
--- a/RollkofferSimulator/Scenes/VictoryScene.swift
+++ b/RollkofferSimulator/Scenes/VictoryScene.swift
@@ -280,6 +280,27 @@ class VictoryScene: SKScene {
         }
     }
 
+    // MARK: - Keyboard Handling (macOS)
+    #if targetEnvironment(macCatalyst)
+    override var canBecomeFirstResponder: Bool { true }
+
+    override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
+        guard let key = presses.first?.key else {
+            super.pressesBegan(presses, with: event)
+            return
+        }
+
+        switch key.keyCode {
+        case .keyboardSpacebar, .keyboardReturnOrEnter:
+            playAgain()
+        case .keyboardEscape:
+            returnToMenu()
+        default:
+            super.pressesBegan(presses, with: event)
+        }
+    }
+    #endif
+
     private func playAgain() {
         let pressDown = SKAction.scale(to: 0.9, duration: 0.1)
         let pressUp = SKAction.scale(to: 1.0, duration: 0.1)
diff --git a/aurora-livecam/SettingsManager.php b/aurora-livecam/SettingsManager.php
index 6c8b7a6..3dc0415 100644
--- a/aurora-livecam/SettingsManager.php
+++ b/aurora-livecam/SettingsManager.php
@@ -26,7 +26,8 @@ class SettingsManager {
         return [
             'viewer_display' => [
                 'enabled' => true,
-                'min_viewers' => 1
+                'min_viewers' => 1,
+                'update_interval' => 5 // Sekunden
             ],
             'video_mode' => [
                 'play_in_player' => true,
@@ -36,6 +37,52 @@ class SettingsManager {
                 'default_speed' => 1,
                 'available_speeds' => [1, 10, 100]
             ],
+            // Punkt 2: UI-Anzeige Features
+            'ui_display' => [
+                'show_recommendation_banner' => true,
+                'show_qr_code' => true,
+                'show_social_media' => true,
+                'show_patrouille_suisse' => true
+            ],
+            // Punkt 3: Zoom & Timelapse
+            'zoom_timelapse' => [
+                'show_zoom_controls' => true,
+                'max_zoom_level' => 4.0,
+                'timelapse_reverse_enabled' => true
+            ],
+            // Punkt 5: Content Management
+            'content' => [
+                'guestbook_enabled' => true,
+                'gallery_enabled' => true,
+                'ai_events_enabled' => true,
+                'max_guestbook_entries' => 50
+            ],
+            // Punkt 6: Technische Settings
+            'technical' => [
+                'viewer_update_interval' => 5, // Sekunden
+                'session_timeout' => 30 // Sekunden
+            ],
+            // Punkt 7: Theme & Design
+            'theme' => [
+                'default_theme' => 'theme-legacy',
+                'show_theme_switcher' => false
+            ],
+            // Punkt 8: SEO & Meta
+            'seo' => [
+                'custom_title' => '',
+                'meta_description' => '',
+                'meta_keywords' => ''
+            ],
+            // Weather Widget
+            'weather' => [
+                'enabled' => true,
+                'api_key' => '',
+                'location' => 'Oberdürnten,CH',
+                'lat' => '47.2833',
+                'lon' => '8.7167',
+                'update_interval' => 5, // Minuten
+                'units' => 'metric' // metric (Celsius) oder imperial (Fahrenheit)
+            ],
             'last_updated' => null,
             'updated_by' => null
         ];
@@ -123,4 +170,111 @@ class SettingsManager {
     public function shouldAllowDownload() {
         return $this->get('video_mode.allow_download') === true;
     }
+
+    // UI Display Helper
+    public function shouldShowRecommendationBanner() {
+        return $this->get('ui_display.show_recommendation_banner') === true;
+    }
+
+    public function shouldShowQRCode() {
+        return $this->get('ui_display.show_qr_code') === true;
+    }
+
+    public function shouldShowSocialMedia() {
+        return $this->get('ui_display.show_social_media') === true;
+    }
+
+    public function shouldShowPatrouillesuisse() {
+        return $this->get('ui_display.show_patrouille_suisse') === true;
+    }
+
+    // Content Management Helper
+    public function isGuestbookEnabled() {
+        return $this->get('content.guestbook_enabled') === true;
+    }
+
+    public function isGalleryEnabled() {
+        return $this->get('content.gallery_enabled') === true;
+    }
+
+    public function isAIEventsEnabled() {
+        return $this->get('content.ai_events_enabled') === true;
+    }
+
+    public function getMaxGuestbookEntries() {
+        return $this->get('content.max_guestbook_entries') ?? 50;
+    }
+
+    // Theme Helper
+    public function getDefaultTheme() {
+        return $this->get('theme.default_theme') ?? 'theme-legacy';
+    }
+
+    public function shouldShowThemeSwitcher() {
+        return $this->get('theme.show_theme_switcher') === true;
+    }
+
+    // Technical Helper
+    public function getViewerUpdateInterval() {
+        return $this->get('technical.viewer_update_interval') ?? 5;
+    }
+
+    public function getSessionTimeout() {
+        return $this->get('technical.session_timeout') ?? 30;
+    }
+
+    // Zoom & Timelapse Helper
+    public function shouldShowZoomControls() {
+        return $this->get('zoom_timelapse.show_zoom_controls') === true;
+    }
+
+    public function getMaxZoomLevel() {
+        return $this->get('zoom_timelapse.max_zoom_level') ?? 4.0;
+    }
+
+    public function isTimelapseReverseEnabled() {
+        return $this->get('zoom_timelapse.timelapse_reverse_enabled') === true;
+    }
+
+    // SEO Helper
+    public function getCustomTitle() {
+        $title = $this->get('seo.custom_title');
+        return !empty($title) ? $title : null;
+    }
+
+    public function getMetaDescription() {
+        return $this->get('seo.meta_description') ?? '';
+    }
+
+    public function getMetaKeywords() {
+        return $this->get('seo.meta_keywords') ?? '';
+    }
+
+    // Weather Helper
+    public function isWeatherEnabled() {
+        return $this->get('weather.enabled') === true;
+    }
+
+    public function getWeatherApiKey() {
+        return $this->get('weather.api_key') ?? '';
+    }
+
+    public function getWeatherLocation() {
+        return $this->get('weather.location') ?? 'Oberdürnten,CH';
+    }
+
+    public function getWeatherCoords() {
+        return [
+            'lat' => $this->get('weather.lat') ?? '47.2833',
+            'lon' => $this->get('weather.lon') ?? '8.7167'
+        ];
+    }
+
+    public function getWeatherUpdateInterval() {
+        return $this->get('weather.update_interval') ?? 5;
+    }
+
+    public function getWeatherUnits() {
+        return $this->get('weather.units') ?? 'metric';
+    }
 }
diff --git a/aurora-livecam/WeatherManager.php b/aurora-livecam/WeatherManager.php
new file mode 100644
index 0000000..4bc6dd0
--- /dev/null
+++ b/aurora-livecam/WeatherManager.php
@@ -0,0 +1,160 @@
+<?php
+/**
+ * WeatherManager - Holt und cached Wetterdaten von OpenWeatherMap
+ */
+class WeatherManager {
+    private $settingsManager;
+    private $cacheFile = 'weather_cache.json';
+    private $cacheTime = 300; // 5 Minuten in Sekunden
+
+    public function __construct($settingsManager) {
+        $this->settingsManager = $settingsManager;
+    }
+
+    /**
+     * Holt aktuelle Wetterdaten (cached)
+     */
+    public function getCurrentWeather() {
+        // Prüfe ob Weather aktiviert ist
+        if (!$this->settingsManager->isWeatherEnabled()) {
+            return null;
+        }
+
+        // Prüfe API Key
+        $apiKey = $this->settingsManager->getWeatherApiKey();
+        if (empty($apiKey)) {
+            return ['error' => 'API Key fehlt'];
+        }
+
+        // Prüfe Cache
+        $cached = $this->getCache();
+        if ($cached !== null) {
+            return $cached;
+        }
+
+        // Hole frische Daten von API
+        $coords = $this->settingsManager->getWeatherCoords();
+        $units = $this->settingsManager->getWeatherUnits();
+
+        $url = "https://api.openweathermap.org/data/2.5/weather?lat={$coords['lat']}&lon={$coords['lon']}&units={$units}&appid={$apiKey}&lang=de";
+
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_URL, $url);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($ch, CURLOPT_TIMEOUT, 5);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
+
+        $response = curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        if ($httpCode !== 200 || !$response) {
+            return ['error' => 'API Fehler'];
+        }
+
+        $data = json_decode($response, true);
+        if (!$data || !isset($data['main'])) {
+            return ['error' => 'Ungültige API Antwort'];
+        }
+
+        // Formatiere Daten
+        $weather = [
+            'temp' => round($data['main']['temp'], 1),
+            'feels_like' => round($data['main']['feels_like'], 1),
+            'humidity' => $data['main']['humidity'],
+            'pressure' => $data['main']['pressure'],
+            'wind_speed' => round($data['wind']['speed'] * 3.6, 1), // m/s -> km/h
+            'wind_deg' => $data['wind']['deg'] ?? 0,
+            'wind_direction' => $this->getWindDirection($data['wind']['deg'] ?? 0),
+            'clouds' => $data['clouds']['all'] ?? 0,
+            'description' => ucfirst($data['weather'][0]['description'] ?? 'Unbekannt'),
+            'icon' => $data['weather'][0]['icon'] ?? '01d',
+            'rain_1h' => $data['rain']['1h'] ?? 0,
+            'snow_1h' => $data['snow']['1h'] ?? 0,
+            'location' => $data['name'] ?? $this->settingsManager->getWeatherLocation(),
+            'timestamp' => time()
+        ];
+
+        // Cache speichern
+        $this->saveCache($weather);
+
+        return $weather;
+    }
+
+    /**
+     * Wandelt Windrichtung (Grad) in Kompassrichtung um
+     */
+    private function getWindDirection($deg) {
+        $directions = ['N', 'NNO', 'NO', 'ONO', 'O', 'OSO', 'SO', 'SSO', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
+        $index = round($deg / 22.5) % 16;
+        return $directions[$index];
+    }
+
+    /**
+     * Holt Daten aus Cache (wenn noch gültig)
+     */
+    private function getCache() {
+        if (!file_exists($this->cacheFile)) {
+            return null;
+        }
+
+        $content = file_get_contents($this->cacheFile);
+        $data = json_decode($content, true);
+
+        if (!$data || !isset($data['timestamp'])) {
+            return null;
+        }
+
+        // Update-Intervall aus Settings holen (in Minuten)
+        $updateInterval = $this->settingsManager->getWeatherUpdateInterval() * 60; // Minuten -> Sekunden
+
+        // Prüfe ob Cache noch gültig
+        if (time() - $data['timestamp'] < $updateInterval) {
+            return $data;
+        }
+
+        return null;
+    }
+
+    /**
+     * Speichert Daten im Cache
+     */
+    private function saveCache($data) {
+        $json = json_encode($data, JSON_PRETTY_PRINT);
+        file_put_contents($this->cacheFile, $json, LOCK_EX);
+    }
+
+    /**
+     * Gibt Wetter-Icon-Emoji zurück
+     */
+    public function getWeatherEmoji($iconCode) {
+        $map = [
+            '01d' => '☀️', '01n' => '🌙',
+            '02d' => '⛅', '02n' => '☁️',
+            '03d' => '☁️', '03n' => '☁️',
+            '04d' => '☁️', '04n' => '☁️',
+            '09d' => '🌧️', '09n' => '🌧️',
+            '10d' => '🌦️', '10n' => '🌧️',
+            '11d' => '⛈️', '11n' => '⛈️',
+            '13d' => '❄️', '13n' => '❄️',
+            '50d' => '🌫️', '50n' => '🌫️'
+        ];
+        return $map[$iconCode] ?? '🌤️';
+    }
+
+    /**
+     * AJAX Handler für Wetter-Updates
+     */
+    public function handleAjax() {
+        if ($_SERVER['REQUEST_METHOD'] !== 'GET') return;
+        if (!isset($_GET['weather_action'])) return;
+
+        header('Content-Type: application/json');
+
+        if ($_GET['weather_action'] === 'get') {
+            $weather = $this->getCurrentWeather();
+            echo json_encode(['success' => true, 'data' => $weather]);
+            exit;
+        }
+    }
+}
diff --git a/aurora-livecam/clear-cache.php b/aurora-livecam/clear-cache.php
new file mode 100644
index 0000000..b1363fa
--- /dev/null
+++ b/aurora-livecam/clear-cache.php
@@ -0,0 +1,15 @@
+<?php
+// Clear PHP OPcache
+if (function_exists('opcache_reset')) {
+    opcache_reset();
+    echo "OPcache cleared successfully!\n";
+} else {
+    echo "OPcache not available\n";
+}
+
+// Clear realpath cache
+clearstatcache(true);
+echo "Realpath cache cleared!\n";
+
+echo "\nNow reload the page with CTRL+F5 (hard refresh)\n";
+?>
diff --git a/aurora-livecam/index.php b/aurora-livecam/index.php
index 975c3b3..d1ee8ad 100644
--- a/aurora-livecam/index.php
+++ b/aurora-livecam/index.php
@@ -4,12 +4,17 @@ use PHPMailer\PHPMailer\Exception;
 
 require __DIR__ . '/vendor/autoload.php';
 require_once 'SettingsManager.php';
+require_once 'WeatherManager.php';
 
 // SettingsManager initialisieren
 $settingsManager = new SettingsManager();
 
-// AJAX-Handler für Settings (VOR anderen Ausgaben!)
+// WeatherManager initialisieren
+$weatherManager = new WeatherManager($settingsManager);
+
+// AJAX-Handler für Settings und Weather (VOR anderen Ausgaben!)
 $settingsManager->handleAjax();
+$weatherManager->handleAjax();
 
 if (isset($_GET['download_video'])) {
     $videoDir = './videos/';
@@ -78,7 +83,48 @@ if (in_array($_SERVER['HTTP_HOST'], $oldDomains)) {
     exit();
 }
 
+// Site-Konfiguration basierend auf Domain
+$isSeecam = ($_SERVER['HTTP_HOST'] === 'www.seecam.ch' || $_SERVER['HTTP_HOST'] === 'seecam.ch');
 
+if ($isSeecam) {
+    $siteConfig = [
+        'domain' => 'www.seecam.ch',
+        'domainUrl' => 'https://www.seecam.ch',
+        'logo' => 'seecam.jpg',
+        'siteName' => 'Seecam',
+        'siteNameFull' => 'Seecam Wetter Livecam',
+        'siteNameFullEn' => 'Seecam Weather Livecam',
+        'siteTitle' => 'Zürich Oberland Webcam Live - Zürichsee & Patrouille Suisse | Seecam 24/7',
+        'author' => 'Seecam Wetter Livecam',
+        'alternateName' => 'Seecam Webcam Schweiz',
+        'welcomeDe' => 'Willkommen bei Seecam Wetter Livecam',
+        'welcomeEn' => 'Welcome to Seecam Weather Livecam',
+        'aboutDe' => 'Seecam Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.',
+        'aboutEn' => 'Seecam Weather Livecam is a passion project...',
+        'blogTitle' => 'Seecam Wetter Blog',
+        'footerName' => 'Seecam Wetter Livecam',
+        'copyright' => '© 2024 Seecam Wetter Livecam - Webcam Zürich Oberland'
+    ];
+} else {
+    $siteConfig = [
+        'domain' => 'www.aurora-weather-livecam.com',
+        'domainUrl' => 'https://www.aurora-weather-livecam.com',
+        'logo' => 'logo.png',
+        'siteName' => 'Aurora',
+        'siteNameFull' => 'Aurora Wetter Livecam',
+        'siteNameFullEn' => 'Aurora Weather Livecam',
+        'siteTitle' => 'Zürich Oberland Webcam Live - Zürichsee & Patrouille Suisse | Aurora Livecam 24/7',
+        'author' => 'Aurora Wetter Livecam',
+        'alternateName' => 'Aurora Webcam Schweiz',
+        'welcomeDe' => 'Willkommen bei Aurora Wetter Livecam',
+        'welcomeEn' => 'Welcome to Aurora Weather Livecam',
+        'aboutDe' => 'Aurora Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.',
+        'aboutEn' => 'Aurora Weather Livecam is a passion project...',
+        'blogTitle' => 'Aurora Wetter Blog',
+        'footerName' => 'Aurora Wetter Livecam',
+        'copyright' => '© 2024 Aurora Wetter Lifecam - Webcam Zürich Oberland'
+    ];
+}
 
 
 
@@ -152,16 +198,18 @@ class WebcamManager {
     // Zeigt NUR das Video ohne Schnickschnack
     public function displayWebcam() {
         return '
-        <video id="webcam-player"
-            autoplay
-            muted
-            playsinline
-            webkit-playsinline
-            x-webkit-airplay="allow"
-            x5-video-player-type="h5"
-            x5-video-player-fullscreen="true"
-            style="width: 100%; height: 100%; object-fit: contain;">
-        </video>';
+        <div id="live-video-wrapper" class="video-zoom-wrapper">
+            <video id="webcam-player"
+                autoplay
+                muted
+                playsinline
+                webkit-playsinline
+                x-webkit-airplay="allow"
+                x5-video-player-type="h5"
+                x5-video-player-fullscreen="true"
+                style="width: 100%; height: 100%; object-fit: contain;">
+            </video>
+        </div>';
     }
 
     // Das ist die neue Anzeige für unten links
@@ -516,7 +564,7 @@ class VisualCalendarManager {
             }
 
             // === AI-EREIGNISSE ===
-            if (!empty($aiEvents)) {
+            if (!empty($aiEvents) && (!$this->settingsManager || $this->settingsManager->isAIEventsEnabled())) {
                 $output .= '<div class="ai-events-section">';
                 $output .= '<h5>🤖 AI-erkannte Ereignisse</h5>';
                 $output .= '<div class="ai-events-grid">';
@@ -691,8 +739,9 @@ class GuestbookManager {
           <label for="guest-name"
        data-en="Name:"
        data-de="Name:"
-       data-it="Nome:"   data-zh="姓名：
-       data-fr="Nom:">
+       data-it="Nome:"
+       data-fr="Nom:"
+       data-zh="姓名：">
     Name:
 </label>
 <input type="text" id="guest-name" name="guest-name" required>
@@ -700,7 +749,8 @@ class GuestbookManager {
        data-en="Message:"
        data-de="Nachricht:"
        data-it="Messaggio:"
-       data-fr="Message:">
+       data-fr="Message :"
+       data-zh="留言：">
     Nachricht:
 </label>
 <textarea id="guest-message" name="guest-message" required></textarea>
@@ -708,7 +758,8 @@ class GuestbookManager {
         data-en="Add Entry"
         data-de="Eintrag hinzufügen"
         data-it="Aggiungi Voce"
-        data-fr="Ajouter une entrée">
+        data-fr="Ajouter une entrée"
+        data-zh="添加留言">
     Eintrag hinzufügen
 </button>
 
@@ -1027,6 +1078,258 @@ class AdminManager {
         $output .= '</div>';
         $output .= '</div>'; // settings-group
 
+        // UI Display Settings (Punkt 2)
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>🖼️ UI Anzeige</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Empfehlungs-Banner anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-show-banner" ' . ($settingsManager->get('ui_display.show_recommendation_banner') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">QR-Code Section anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-show-qr" ' . ($settingsManager->get('ui_display.show_qr_code') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Social Media Links anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-show-social" ' . ($settingsManager->get('ui_display.show_social_media') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Patrouille Suisse Section anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-show-patrouille" ' . ($settingsManager->get('ui_display.show_patrouille_suisse') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        // Zoom & Timelapse Settings (Punkt 3)
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>🔍 Zoom & Timelapse</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Zoom-Controls anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-show-zoom" ' . ($settingsManager->get('zoom_timelapse.show_zoom_controls') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Max Zoom-Level</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="number" id="setting-max-zoom" class="number-input" min="1.5" max="4.0" step="0.5" value="' . $settingsManager->get('zoom_timelapse.max_zoom_level') . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Timelapse Rückwärts-Modus</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-timelapse-reverse" ' . ($settingsManager->get('zoom_timelapse.timelapse_reverse_enabled') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        // Content Management Settings (Punkt 5)
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>📝 Content Management</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Gästebuch aktivieren</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-guestbook-enabled" ' . ($settingsManager->get('content.guestbook_enabled') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Galerie aktivieren</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-gallery-enabled" ' . ($settingsManager->get('content.gallery_enabled') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">KI-Events anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-ai-events-enabled" ' . ($settingsManager->get('content.ai_events_enabled') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Max Gästebuch-Einträge</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="number" id="setting-max-guestbook" class="number-input" min="10" max="200" step="10" value="' . $settingsManager->get('content.max_guestbook_entries') . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        // Technical Settings (Punkt 6)
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>⚙️ Technische Einstellungen</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Viewer Update-Intervall (Sekunden)</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="number" id="setting-viewer-interval" class="number-input" min="1" max="60" value="' . $settingsManager->get('technical.viewer_update_interval') . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Session Timeout (Sekunden)</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="number" id="setting-session-timeout" class="number-input" min="10" max="300" value="' . $settingsManager->get('technical.session_timeout') . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        // Theme Settings (Punkt 7)
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>🎨 Theme & Design</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Standard-Theme</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<select id="setting-default-theme" class="select-input">';
+        $currentTheme = $settingsManager->get('theme.default_theme');
+        $output .= '<option value="theme-legacy" ' . ($currentTheme === 'theme-legacy' ? 'selected' : '') . '>Klassisch</option>';
+        $output .= '<option value="theme-alpine" ' . ($currentTheme === 'theme-alpine' ? 'selected' : '') . '>Alpin</option>';
+        $output .= '<option value="theme-neo" ' . ($currentTheme === 'theme-neo' ? 'selected' : '') . '>Modern</option>';
+        $output .= '</select>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Theme-Switcher anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-show-theme-switcher" ' . ($settingsManager->get('theme.show_theme_switcher') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        // SEO Settings (Punkt 8)
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>🔍 SEO & Meta</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Custom Title (leer = Standard)</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="text" id="setting-custom-title" class="text-input" placeholder="' . $siteConfig['siteTitle'] . '" value="' . htmlspecialchars($settingsManager->get('seo.custom_title')) . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Meta Description</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<textarea id="setting-meta-description" class="textarea-input" rows="2" placeholder="SEO Beschreibung für Google...">' . htmlspecialchars($settingsManager->get('seo.meta_description')) . '</textarea>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Meta Keywords</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="text" id="setting-meta-keywords" class="text-input" placeholder="webcam, zürich, wetter..." value="' . htmlspecialchars($settingsManager->get('seo.meta_keywords')) . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        // Weather Settings
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>🌤️ Wetter-Widget</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Wetter-Widget anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-weather-enabled" ' . ($settingsManager->get('weather.enabled') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">OpenWeatherMap API Key <a href="https://openweathermap.org/api" target="_blank" style="font-size:11px;">(kostenlos registrieren)</a></span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="text" id="setting-weather-api-key" class="text-input" placeholder="Dein API Key hier einfügen..." value="' . htmlspecialchars($settingsManager->get('weather.api_key')) . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Standort (Stadt,Land)</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="text" id="setting-weather-location" class="text-input" placeholder="Oberdürnten,CH" value="' . htmlspecialchars($settingsManager->get('weather.location')) . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Latitude (Breitengrad)</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="text" id="setting-weather-lat" class="text-input" placeholder="47.2833" value="' . htmlspecialchars($settingsManager->get('weather.lat')) . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Longitude (Längengrad)</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="text" id="setting-weather-lon" class="text-input" placeholder="8.7167" value="' . htmlspecialchars($settingsManager->get('weather.lon')) . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Update-Intervall (Minuten)</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="number" id="setting-weather-interval" class="number-input" min="5" max="60" value="' . $settingsManager->get('weather.update_interval') . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Einheit</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<select id="setting-weather-units" class="select-input">';
+        $currentUnits = $settingsManager->get('weather.units');
+        $output .= '<option value="metric" ' . ($currentUnits === 'metric' ? 'selected' : '') . '>Metrisch (°C, km/h)</option>';
+        $output .= '<option value="imperial" ' . ($currentUnits === 'imperial' ? 'selected' : '') . '>Imperial (°F, mph)</option>';
+        $output .= '</select>';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
         $output .= '</div>'; // admin-settings-panel
 
         // Bestehender Admin-Content
@@ -1336,28 +1639,104 @@ $minViewersToShow = $settingsManager->get('viewer_display.min_viewers');
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Aurora Livecam Zürich Oberland | Live Wetter Webcam Schweiz 24/7</title>
-    <meta name="description" content="Live Webcam aus dem Zürcher Oberland. Echtzeit-Wetter, Tagesvideos, Timelapse und einzigartige Einblicke auf die Schweizer Alpen. Kostenlos 24/7.">
-    <meta name="keywords" content="Webcam Zürich, Live Wetter Schweiz, Zürcher Oberland, Livecam Alpen, Wetter Webcam, Aurora Webcam, Schweiz Livestream, Patrouille Suisse, Wetter heute">
-    <meta name="author" content="Aurora Wetter Livecam">
-    <meta name="robots" content="index, follow">
-    <link rel="canonical" href="https://www.aurora-weather-livecam.com/">
+    <!-- SEO-optimierter Title -->
+    <title><?php echo $settingsManager->getCustomTitle() ?: $siteConfig['siteTitle']; ?></title>
 
+    <!-- SEO Meta-Tags -->
+    <meta name="description" content="<?php echo !empty($settingsManager->getMetaDescription()) ? htmlspecialchars($settingsManager->getMetaDescription()) : 'Live Webcam Zürich Oberland mit Blick auf Zürichsee. 24/7 Livestream, Tagesvideos, AI-Wettererkennung. Patrouille Suisse Trainingsflüge jeden Montag live verfolgen. Webcam Dürnten auf 616m.'; ?>">
+    <meta name="keywords" content="<?php echo !empty($settingsManager->getMetaKeywords()) ? htmlspecialchars($settingsManager->getMetaKeywords()) : 'Webcam Zürich, Zürichsee Webcam, Zürich Oberland Webcam, Live Webcam Schweiz, Patrouille Suisse Livestream, Wetter Zürich live, Webcam Dürnten, Rapperswil Webcam, Schweizer Alpen Webcam, Wetter Zürich Oberland, ' . $siteConfig['siteName'] . ' Webcam, Timelapse Zürich'; ?>">
+    <meta name="author" content="<?php echo $siteConfig['author']; ?>">
+    <meta name="robots" content="index, follow, max-image-preview:large">
+    <link rel="canonical" href="<?php echo $siteConfig['domainUrl']; ?>/">
+
+    <!-- Lokales SEO -->
+    <meta name="geo.region" content="CH-ZH">
+    <meta name="geo.placename" content="Dürnten, Zürich Oberland">
+    <meta name="geo.position" content="47.278;8.870">
+    <meta name="ICBM" content="47.278, 8.870">
+
+    <!-- Open Graph für Social Media -->
     <meta property="og:type" content="website">
-    <meta property="og:title" content="Aurora Livecam | Live Wetter Webcam Zürich Oberland">
-    <meta property="og:description" content="Erleben Sie das Wetter im Zürcher Oberland live! 24/7 Webcam auf 616m Höhe mit Blick auf die Schweizer Alpen.">
-    <meta property="og:image" content="https://www.aurora-weather-livecam.com/og-image.jpg">
-    <meta property="og:url" content="https://www.aurora-weather-livecam.com/">
-    <meta property="og:site_name" content="Aurora Wetter Livecam">
+    <meta property="og:title" content="Zürich Oberland Webcam Live - Zürichsee & Patrouille Suisse">
+    <meta property="og:description" content="24/7 Live-Webcam aus dem Zürcher Oberland auf 616m Höhe. Patrouille Suisse Trainings jeden Montag. AI-Wettererkennung für Sonnenaufgänge, Regenbögen und mehr.">
+    <meta property="og:image" content="<?php echo $siteConfig['domainUrl']; ?>/og-image.jpg">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:url" content="<?php echo $siteConfig['domainUrl']; ?>/">
+    <meta property="og:site_name" content="<?php echo $siteConfig['siteNameFull']; ?> Zürich">
+    <meta property="og:locale" content="de_CH">
 
+    <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Aurora Livecam | Live Wetter Webcam Schweiz">
-    <meta name="twitter:description" content="24/7 Live-Webcam aus dem Zürcher Oberland. Wetter, Timelapse & mehr.">
+    <meta name="twitter:title" content="Zürich Oberland Webcam Live | Patrouille Suisse & Zürichsee">
+    <meta name="twitter:description" content="24/7 Live-Webcam mit AI-Wettererkennung. Jeden Montag Patrouille Suisse Trainingsflüge live!">
+    <meta name="twitter:image" content="<?php echo $siteConfig['domainUrl']; ?>/og-image.jpg">
 
     <meta name="google-site-verification" content="gzs2HE9hbMKbHYKSf2hZjXvDd7iDUeA4Jb2zngzNIZM" />
-    <meta name="geo.region" content="CH-ZH">
-    <meta name="geo.placename" content="Zürich Oberland">
-    <meta name="geo.position" content="47.278;8.870">
+
+    <!-- Schema.org JSON-LD für Webcam -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "<?php echo $siteConfig['siteNameFull']; ?> Zürich Oberland",
+        "alternateName": "<?php echo $siteConfig['alternateName']; ?>",
+        "url": "<?php echo $siteConfig['domainUrl']; ?>",
+        "description": "24/7 Live Webcam aus dem Zürcher Oberland mit Blick auf den Zürichsee. AI-gestützte Wettererkennung und Patrouille Suisse Trainingsflüge.",
+        "inLanguage": "de-CH"
+    }
+    </script>
+
+    <!-- Schema.org für Lokales Business -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "name": "<?php echo $siteConfig['siteNameFull']; ?>",
+        "description": "Live Webcam Service aus dem Zürcher Oberland mit 24/7 Livestream, Tagesvideos und AI-Wettererkennung",
+        "url": "<?php echo $siteConfig['domainUrl']; ?>",
+        "address": {
+            "@type": "PostalAddress",
+            "addressLocality": "Dürnten",
+            "addressRegion": "Zürich",
+            "addressCountry": "CH"
+        },
+        "geo": {
+            "@type": "GeoCoordinates",
+            "latitude": "47.278",
+            "longitude": "8.870",
+            "elevation": "616"
+        },
+        "areaServed": {
+            "@type": "GeoCircle",
+            "geoMidpoint": {
+                "@type": "GeoCoordinates",
+                "latitude": "47.278",
+                "longitude": "8.870"
+            },
+            "geoRadius": "50000"
+        }
+    }
+    </script>
+
+    <!-- Schema.org für Video/Livestream -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "VideoObject",
+        "name": "Zürich Oberland Live Webcam Stream",
+        "description": "24/7 Live-Webcam aus dem Zürcher Oberland mit Blick auf Zürichsee und Schweizer Alpen",
+        "thumbnailUrl": "<?php echo $siteConfig['domainUrl']; ?>/og-image.jpg",
+        "uploadDate": "2024-01-01",
+        "contentUrl": "<?php echo $siteConfig['domainUrl']; ?>/test_video.m3u8",
+        "embedUrl": "<?php echo $siteConfig['domainUrl']; ?>/",
+        "publication": {
+            "@type": "BroadcastEvent",
+            "isLiveBroadcast": true,
+            "startDate": "2024-01-01"
+        }
+    }
+    </script>
 
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -1382,6 +1761,19 @@ body {
     background-attachment: fixed;
 }
 
+/* Screen-reader only (Accessibility) */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
 .section { padding: 80px 0; background-color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; position: relative; z-index: 10; }
 .section h2 { font-size: 36px; margin-bottom: 40px; text-align: center; color: #333; }
@@ -1397,9 +1789,10 @@ header {
 header .container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
+    padding-right: 120px; /* Platz für Sprachauswahl */
 }
 
 .logo img { height: 50px; }
@@ -1433,7 +1826,7 @@ header .container {
     border-radius: 2px;
 }
 
-nav ul { list-style: none; padding: 0; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0; }
+nav ul { list-style: none; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; margin: 0; }
 nav ul li { margin: 5px 10px; }
 nav ul li a { text-decoration: none; color: #333; font-weight: bold; padding: 5px 10px; transition: color 0.3s; }
 nav ul li a:hover { color: #4CAF50; }
@@ -1495,13 +1888,30 @@ nav ul li a:hover { color: #4CAF50; }
     z-index: 30;
 }
 
-#webcam-player, #timelapse-viewer, #daily-video-player {
+#live-video-wrapper, #timelapse-viewer, #daily-video-player {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 8px;
+    overflow: hidden;
+}
+
+.video-zoom-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+    transform-origin: center center;
+}
+
+#webcam-player, #timelapse-image, #daily-video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
 }
 
 .video-info-bar {
@@ -1721,6 +2131,90 @@ button[type="submit"]:hover { background-color: #45a049; }
 
 .delete-btn { background-color: #ff4136; color: white; border: none; padding: 5px 10px; cursor: pointer; font-size: 0.8em; margin-left: 10px; border-radius: 3px; }
 
+/* Weather Widget */
+.weather-widget {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 20px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+    animation: weatherFadeIn 0.5s ease;
+}
+.weather-widget.weather-error {
+    background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
+    color: white;
+    font-weight: bold;
+    justify-content: center;
+}
+.weather-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    padding: 10px 15px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+    min-width: 120px;
+    transition: transform 0.3s ease, background 0.3s ease;
+}
+.weather-item:hover {
+    transform: translateY(-3px);
+    background: rgba(255, 255, 255, 0.25);
+}
+.weather-icon {
+    font-size: 32px;
+    line-height: 1;
+}
+.weather-value {
+    font-size: 18px;
+    font-weight: bold;
+    color: white;
+    white-space: nowrap;
+}
+.weather-label {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.9);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.weather-description {
+    flex: 1 1 auto;
+    min-width: 180px;
+}
+.weather-description .weather-value {
+    font-size: 16px;
+    text-align: center;
+}
+@keyframes weatherFadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@media (max-width: 768px) {
+    .weather-widget {
+        gap: 10px;
+        padding: 15px 10px;
+    }
+    .weather-item {
+        min-width: 90px;
+        padding: 8px 10px;
+    }
+    .weather-icon {
+        font-size: 24px;
+    }
+    .weather-value {
+        font-size: 14px;
+    }
+    .weather-label {
+        font-size: 10px;
+    }
+}
+
 /* Guestbook */
 .guestbook-entry { background-color: #f9f9f9; border-left: 5px solid #4CAF50; margin-bottom: 20px; padding: 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
 
@@ -1743,6 +2237,119 @@ button[type="submit"]:hover { background-color: #45a049; }
 .modal-next { right: 0; }
 .modal-prev { left: 0; }
 
+/* Admin Settings Panel */
+#admin-settings-panel {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 30px;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+}
+#admin-settings-panel h3 {
+    color: white;
+    margin: 0 0 25px 0;
+    font-size: 24px;
+    text-align: center;
+}
+.settings-group {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+}
+.settings-group h4 {
+    margin: 0 0 15px 0;
+    color: #667eea;
+    font-size: 18px;
+    border-bottom: 2px solid #667eea;
+    padding-bottom: 8px;
+}
+.setting-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+.setting-row:last-child {
+    border-bottom: none;
+}
+.setting-label {
+    font-weight: 500;
+    color: #333;
+    flex: 1;
+}
+.setting-input {
+    display: flex;
+    align-items: center;
+    min-width: 200px;
+}
+.number-input, .text-input, .select-input {
+    width: 100%;
+    padding: 8px 12px;
+    border: 2px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    transition: border-color 0.3s;
+}
+.number-input:focus, .text-input:focus, .select-input:focus {
+    outline: none;
+    border-color: #667eea;
+}
+.textarea-input {
+    width: 100%;
+    padding: 8px 12px;
+    border: 2px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    font-family: Arial, sans-serif;
+    resize: vertical;
+    transition: border-color 0.3s;
+}
+.textarea-input:focus {
+    outline: none;
+    border-color: #667eea;
+}
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.3s;
+    border-radius: 24px;
+}
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.3s;
+    border-radius: 50%;
+}
+.toggle-switch input:checked + .toggle-slider {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+}
+.toggle-switch input:checked + .toggle-slider:before {
+    transform: translateX(26px);
+}
+
 /* Language Switch */
 #language-switch { position: fixed; top: 10px; right: 10px; z-index: 1000; background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; padding: 5px; }
 .lang-button { background: none; border: none; cursor: pointer; padding: 5px; opacity: 0.7; transition: opacity 0.3s; margin: 0 2px; }
@@ -1952,7 +2559,7 @@ body.theme-neo footer {
 
     <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
 </head>
-<body class="theme-legacy">
+<body class="<?php echo $settingsManager->getDefaultTheme(); ?>">
 
 <div class="sun-overlay" aria-hidden="true"></div>
 
@@ -1978,27 +2585,27 @@ body.theme-neo footer {
     <div class="container">
         <div class="logo-wrapper">
             <div class="logo">
-                <img src="logo.png" alt="Aurora Wetter Livecam">
+                <img src="<?php echo $siteConfig['logo']; ?>" alt="<?php echo $siteConfig['siteNameFull']; ?> - 24/7 Zürich Oberland Webcam Logo">
             </div>
             <div class="swiss-cross" aria-hidden="true"></div>
         </div>
         <nav>
             <ul>
-                <li><a href="#webcams" data-en="Webcam" data-de="Webcam">Webcam</a></li>
-                <li><a href="#guestbook" data-en="Guestbook" data-de="Gästebuch">Gästebuch</a></li>
-                <li><a href="#kontakt" data-en="Contact" data-de="Kontakt">Kontakt</a></li>
-                <li><a href="#gallery" data-en="Gallery" data-de="Galerie">Galerie</a></li>
-                <li><a href="#archive" data-en="Video Archive" data-de="Videoarchiv">Videoarchiv</a></li>
+                <li><a href="#webcams" data-en="Webcam" data-de="Webcam" data-it="Webcam" data-fr="Webcam" data-zh="摄像头">Webcam</a></li>
+                <li><a href="#guestbook" data-en="Guestbook" data-de="Gästebuch" data-it="Libro degli ospiti" data-fr="Livre d'or" data-zh="留言簿">Gästebuch</a></li>
+                <li><a href="#kontakt" data-en="Contact" data-de="Kontakt" data-it="Contatto" data-fr="Contact" data-zh="联系">Kontakt</a></li>
+                <li><a href="#gallery" data-en="Gallery" data-de="Galerie" data-it="Galleria" data-fr="Galerie" data-zh="图库">Galerie</a></li>
+                <li><a href="#archive" data-en="Video Archive" data-de="Videoarchiv" data-it="Archivio video" data-fr="Archive vidéo" data-zh="视频档案">Videoarchiv</a></li>
                 <?php if ($adminManager->isAdmin()): ?>
-                <li><a href="#admin">Admin</a></li>
+                <li><a href="#admin" data-en="Admin" data-de="Admin" data-it="Admin" data-fr="Admin" data-zh="管理员">Admin</a></li>
                 <?php endif; ?>
             </ul>
         </nav>
-        <div class="theme-switcher" aria-label="Design wechseln">
-            <span>Design</span>
-            <button class="theme-button active" data-theme="theme-legacy" type="button">Klassisch</button>
-            <button class="theme-button" data-theme="theme-alpine" type="button">Alpin</button>
-            <button class="theme-button" data-theme="theme-neo" type="button">Modern</button>
+        <div class="theme-switcher" aria-label="Design wechseln" style="display: <?php echo $settingsManager->shouldShowThemeSwitcher() ? 'flex' : 'none'; ?>;">
+            <span data-en="Design" data-de="Design" data-it="Design" data-fr="Design" data-zh="设计">Design</span>
+            <button class="theme-button active" data-theme="theme-legacy" type="button" data-en="Classic" data-de="Klassisch" data-it="Classico" data-fr="Classique" data-zh="经典">Klassisch</button>
+            <button class="theme-button" data-theme="theme-alpine" type="button" data-en="Alpine" data-de="Alpin" data-it="Alpino" data-fr="Alpin" data-zh="高山">Alpin</button>
+            <button class="theme-button" data-theme="theme-neo" type="button" data-en="Modern" data-de="Modern" data-it="Moderno" data-fr="Moderne" data-zh="现代">Modern</button>
         </div>
     </div>
 </header>
@@ -2008,19 +2615,22 @@ body.theme-neo footer {
         <div class="container">
             <div class="flag-title-container">
                 <img src="images/swiss.jpg" alt="Schweizer Flagge" class="flag-image">
-                <h1 data-en="Welcome to Aurora Weather Livecam" data-de="Willkommen bei Aurora Wetter Livecam">
-                    Willkommen bei Aurora Wetter Livecam
+                <h1 data-en="<?php echo $siteConfig['welcomeEn']; ?>" data-de="<?php echo $siteConfig['welcomeDe']; ?>" data-it="Benvenuti su <?php echo $siteConfig['siteNameFullEn']; ?>" data-fr="Bienvenue sur <?php echo $siteConfig['siteNameFullEn']; ?>" data-zh="欢迎来到<?php echo $siteConfig['siteNameFullEn']; ?>">
+                    <?php echo $siteConfig['welcomeDe']; ?>
                 </h1>
                 <img src="local-flag.jpg" alt="Ortsflagge" class="flag-image">
             </div>
             <p data-en="Experience fascinating views of the Zurich region - in real time!"
-               data-de="Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!">
+               data-de="Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!"
+               data-it="Vivi affascinanti panorami della regione di Zurigo in tempo reale!"
+               data-fr="Découvrez des panoramas fascinants de la région de Zurich en temps réel !"
+               data-zh="实时欣赏苏黎世地区的迷人景色！">
                 Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!
             </p>
         </div>
     </section>
 
-    <div class="banner-container">
+    <div class="banner-container" style="display: <?php echo $settingsManager->shouldShowRecommendationBanner() ? 'block' : 'none'; ?>;">
         <div class="recommendation-banner">
             <h2>Unsere Empfehlungen</h2>
             <div class="sponsor-logos">
@@ -2038,21 +2648,72 @@ body.theme-neo footer {
 <!-- WEBCAM SECTION -->
 <section id="webcams" class="section">
     <div class="container">
+        <!-- WEATHER WIDGET -->
+        <?php if ($settingsManager->isWeatherEnabled()): ?>
+        <?php
+            $weather = $weatherManager->getCurrentWeather();
+            if ($weather && !isset($weather['error'])):
+        ?>
+        <div id="weather-widget" class="weather-widget">
+            <div class="weather-item weather-temp">
+                <span class="weather-icon">🌡️</span>
+                <span class="weather-value"><?php echo $weather['temp']; ?>°C</span>
+                <span class="weather-label">Temperatur</span>
+            </div>
+            <div class="weather-item weather-wind">
+                <span class="weather-icon">💨</span>
+                <span class="weather-value"><?php echo $weather['wind_speed']; ?> km/h <?php echo $weather['wind_direction']; ?></span>
+                <span class="weather-label">Wind</span>
+            </div>
+            <div class="weather-item weather-pressure">
+                <span class="weather-icon">🔽</span>
+                <span class="weather-value"><?php echo $weather['pressure']; ?> hPa</span>
+                <span class="weather-label">Luftdruck</span>
+            </div>
+            <div class="weather-item weather-humidity">
+                <span class="weather-icon">💧</span>
+                <span class="weather-value"><?php echo $weather['humidity']; ?>%</span>
+                <span class="weather-label">Luftfeuchtigkeit</span>
+            </div>
+            <div class="weather-item weather-description">
+                <span class="weather-icon"><?php echo $weatherManager->getWeatherEmoji($weather['icon']); ?></span>
+                <span class="weather-value"><?php echo $weather['description']; ?></span>
+                <span class="weather-label"><?php echo $weather['location']; ?></span>
+            </div>
+            <?php if ($weather['rain_1h'] > 0 || $weather['snow_1h'] > 0): ?>
+            <div class="weather-item weather-precipitation">
+                <span class="weather-icon"><?php echo $weather['rain_1h'] > 0 ? '🌧️' : '❄️'; ?></span>
+                <span class="weather-value"><?php echo $weather['rain_1h'] > 0 ? $weather['rain_1h'] : $weather['snow_1h']; ?> mm</span>
+                <span class="weather-label">Niederschlag</span>
+            </div>
+            <?php endif; ?>
+        </div>
+        <?php elseif ($weather && isset($weather['error'])): ?>
+        <div class="weather-widget weather-error">
+            <span>⚠️ Wetterdaten nicht verfügbar: <?php echo $weather['error']; ?></span>
+        </div>
+        <?php endif; ?>
+        <?php endif; ?>
+
         <!-- VIDEO PLAYER -->
         <div class="video-container" style="border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
             <?php echo $webcamManager->displayWebcam(); ?>
 
             <!-- Timelapse Overlay -->
             <div id="timelapse-viewer" style="display: none;">
-                <img id="timelapse-image" src="" alt="Timelapse Image" style="width: 100%; height: 100%; object-fit: cover;">
+                <div id="timelapse-wrapper" class="video-zoom-wrapper">
+                    <img id="timelapse-image" src="" alt="Zeitraffer Wetter Zürich Oberland - Aktuelle Aufnahme" style="width: 100%; height: 100%; object-fit: cover;">
+                </div>
                 <div id="timelapse-time-overlay"></div>
             </div>
 
             <!-- Daily Video Player (für Tagesvideos) -->
             <div id="daily-video-player" style="display: none;">
-                <video id="daily-video" controls playsinline style="width: 100%; height: 100%; object-fit: contain;">
-                    <source src="" type="video/mp4">
-                </video>
+                <div id="daily-video-wrapper" class="video-zoom-wrapper">
+                    <video id="daily-video" controls playsinline style="width: 100%; height: 100%; object-fit: contain;">
+                        <source src="" type="video/mp4">
+                    </video>
+                </div>
             </div>
         </div>
 
@@ -2061,7 +2722,7 @@ body.theme-neo footer {
 
         <!-- 
  CONTROLS -->
-        <div id="zoom-controls" class="zoom-controls" aria-label="Zoom Steuerung">
+        <div id="zoom-controls" class="zoom-controls" aria-label="Zoom Steuerung" style="display: <?php echo $settingsManager->shouldShowZoomControls() ? 'flex' : 'none'; ?>;">
             <button type="button" onclick="adjustZoom(-0.5)" class="zoom-btn" title="Zoom out">−</button>
             <input type="range" id="zoom-range" class="zoom-slider" min="1" max="4" value="1" step="0.5">
             <span id="zoom-value" class="zoom-value">1.0x</span>
@@ -2087,7 +2748,7 @@ body.theme-neo footer {
             <div class="info-badge viewer-stat" id="viewer-stat-container">
                 <span class="live-dot"></span>
                 <strong id="viewer-count-display"><?php echo $viewerCount; ?></strong>
-                <span data-en="Watching" data-de="Zuschauer">Zuschauer</span>
+                <span data-en="Watching" data-de="Zuschauer" data-it="Spettatori" data-fr="Spectateurs" data-zh="观看人数">Zuschauer</span>
             </div>
             <?php endif; ?>
 
@@ -2096,16 +2757,16 @@ body.theme-neo footer {
 
         <!-- STEUERUNG BUTTONS -->
         <div class="webcam-controls" style="text-align: center;">
-            <a href="?action=snapshot" class="button" data-en="Save Snapshot" data-de="Snapshot speichern">
+            <a href="?action=snapshot" class="button" data-en="Save Snapshot" data-de="Snapshot speichern" data-it="Salva istantanea" data-fr="Enregistrer l'instantané" data-zh="保存截图">
                 Snapshot speichern
             </a>
-            <a href="#" class="button" id="timelapse-button" data-en="Week Timelapse" data-de="Wochenzeitraffer">
+            <a href="#" class="button" id="timelapse-button" data-en="Week Timelapse" data-de="Wochenzeitraffer" data-it="Timelapse settimanale" data-fr="Timelapse hebdomadaire" data-zh="一周延时">
                 Wochenzeitraffer
             </a>
-            <a href="?action=sequence" class="button" data-en="Save Video Clip" data-de="Videoclip speichern">
+            <a href="?action=sequence" class="button" data-en="Save Video Clip" data-de="Videoclip speichern" data-it="Salva clip video" data-fr="Enregistrer le clip vidéo" data-zh="保存视频片段">
                 Videoclip speichern
             </a>
-            <a href="?download_video=1" class="button" data-en="Download Latest Video" data-de="Tagesvideo downloaden">
+            <a href="?download_video=1" class="button" data-en="Download Latest Video" data-de="Tagesvideo downloaden" data-it="Scarica l'ultimo video" data-fr="Télécharger la dernière vidéo" data-zh="下载最新视频">
                 Tagesvideo downloaden
             </a>
         </div>
@@ -2115,7 +2776,7 @@ body.theme-neo footer {
 <!-- ARCHIVE SECTION -->
 <section id="archive" class="section">
     <div class="container">
-        <h2 data-en="Video Archive" data-de="Videoarchiv Tagesvideos">Videoarchiv Tagesvideos</h2>
+        <h2 data-en="Video Archive" data-de="Videoarchiv Tagesvideos" data-it="Archivio video giornalieri" data-fr="Archive des vidéos quotidiennes" data-zh="每日视频档案">Videoarchiv Tagesvideos</h2>
         <?php
         $visualCalendar = new VisualCalendarManager('./videos/', './ai/', $settingsManager);
         echo $visualCalendar->displayVisualCalendar();
@@ -2126,10 +2787,10 @@ body.theme-neo footer {
 <!-- STANDORT -->
 <section id="standort" class="section" style="padding: 40px 0;">
     <div class="container" style="text-align: center;">
-        <h2 data-en="Camera Direction" data-de="Kamera-Blickrichtung">Kamera-Blickrichtung</h2>
+        <h2 data-en="Camera Direction" data-de="Kamera-Blickrichtung" data-it="Direzione della camera" data-fr="Direction de la caméra" data-zh="摄像头方向">Kamera-Blickrichtung</h2>
         <div style="display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 30px;">
             <div style="max-width: 350px;">
-                <img src="kompass1.png" alt="Kompass" style="width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
+                <img src="kompass1.png" alt="Kompass zeigt Blickrichtung der Webcam Richtung Zürichsee und Schweizer Alpen" style="width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
             </div>
             <div style="background: rgba(255,255,255,0.95); padding: 25px 35px; border-radius: 12px; text-align: left;">
                 <h3 style="margin-bottom: 20px; color: #667eea;">📍 Ungefährer Standort</h3>
@@ -2142,24 +2803,24 @@ body.theme-neo footer {
 </section>
 
 <!-- QR CODE -->
-<section id="qr-code" class="section">
+<section id="qr-code" class="section" style="display: <?php echo $settingsManager->shouldShowQRCode() ? 'block' : 'none'; ?>;">
     <div class="container" style="text-align: center;">
         <h1>
-            <p data-en="Follow us and share with friends" data-de="Folge uns und teile mit Freunden">
+            <p data-en="Follow us and share with friends" data-de="Folge uns und teile mit Freunden" data-it="Seguici e condividi con gli amici" data-fr="Suivez-nous et partagez avec vos amis" data-zh="关注我们并分享给朋友">
                 Folge uns und kopiere den Code und sende es deinen Freunden
             </p>
         </h1>
-        <div id="qrcode" data-url="https://www.aurora-weather-livecam.com/"></div>
-        <p data-en="Click QR code to copy URL" data-de="Klicke auf den QR-Code um die URL zu kopieren">
+        <div id="qrcode" data-url="<?php echo $siteConfig['domainUrl']; ?>/"></div>
+        <p data-en="Click QR code to copy URL" data-de="Klicke auf den QR-Code um die URL zu kopieren" data-it="Fai clic sul codice QR per copiare l'URL" data-fr="Cliquez sur le code QR pour copier l'URL" data-zh="点击二维码复制网址">
             Klicke auf den QR-Code, um die URL zu kopieren
         </p>
     </div>
 </section>
 
 <!-- GUESTBOOK -->
-<section id="guestbook" class="section">
+<section id="guestbook" class="section" style="display: <?php echo $settingsManager->isGuestbookEnabled() ? 'block' : 'none'; ?>;">
     <div class="container">
-        <h2 data-en="Guestbook" data-de="Gästebuch">Gästebuch</h2>
+        <h2 data-en="Guestbook" data-de="Gästebuch" data-it="Libro degli ospiti" data-fr="Livre d'or" data-zh="留言簿">Gästebuch</h2>
         <?php
         echo $guestbookManager->displayForm();
         echo $guestbookManager->displayEntries($adminManager->isAdmin());
@@ -2170,9 +2831,12 @@ body.theme-neo footer {
 <!-- CONTACT -->
 <section id="kontakt" class="section">
     <div class="container">
-        <h2 data-en="Contact" data-de="Kontakt">Kontakt</h2>
+        <h2 data-en="Contact" data-de="Kontakt" data-it="Contatto" data-fr="Contact" data-zh="联系">Kontakt</h2>
         <p data-en="Questions or suggestions? We look forward to hearing from you!"
-           data-de="Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!">
+           data-de="Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!"
+           data-it="Domande o suggerimenti? Saremo felici di sentirti!"
+           data-fr="Des questions ou des suggestions ? Nous serions ravis d'avoir de vos nouvelles !"
+           data-zh="有问题或建议吗？期待您的来信！">
             Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!
         </p>
         <?php echo $contactManager->displayForm(); ?>
@@ -2180,9 +2844,9 @@ body.theme-neo footer {
 </section>
 
 <!-- GALLERY -->
-<section id="gallery" class="section">
+<section id="gallery" class="section" style="display: <?php echo $settingsManager->isGalleryEnabled() ? 'block' : 'none'; ?>;">
     <div class="container">
-        <h2 data-en="Image Gallery" data-de="Bildergalerie">Bildergalerie</h2>
+        <h2 data-en="Image Gallery" data-de="Bildergalerie" data-it="Galleria immagini" data-fr="Galerie d'images" data-zh="图片库">Bildergalerie</h2>
         <div class="gallery-wrapper">
             <button class="gallery-nav-btn left" onclick="scrollGallery('left')"><i class="fas fa-chevron-left"></i></button>
             <?php echo $adminManager->displayGalleryImages(); ?>
@@ -2194,14 +2858,23 @@ body.theme-neo footer {
 <!-- ABOUT -->
 <section id="ueber-uns" class="section">
     <div class="container">
-        <h2 data-en="About Our Project" data-de="Über unser Projekt">Über unser Projekt</h2>
+        <h2 data-en="About Our Project" data-de="Über unser Projekt" data-it="Il nostro progetto" data-fr="À propos de notre projet" data-zh="关于我们的项目">Über unser Projekt</h2>
         <div class="about-grid">
             <div class="about-item">
-                <p data-en="Aurora Weather Livecam is a passion project..."
-                   data-de="Aurora Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten...">
-                    Aurora Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.
+                <p data-en="<?php echo $siteConfig['aboutEn']; ?>"
+                   data-de="<?php echo $siteConfig['aboutDe']; ?>"
+                   data-it="Aurora Weather Livecam è un progetto del cuore di appassionati di meteorologia. Vogliamo avvicinarvi alla bellezza della natura e al fascino del tempo."
+                   data-fr="Aurora Weather Livecam est un projet de passionnés de météo. Nous souhaitons vous faire découvrir la beauté de la nature et la fascination du temps."
+                   data-zh="Aurora Weather Livecam 是天气爱好者的热情项目。我们希望让您更贴近自然之美与天气的魅力。">
+                    <?php echo $siteConfig['aboutDe']; ?>
+                </p>
+                <p data-en="We have been operating high-resolution webcams around the clock since 2010. We are particularly proud of unique insights, such as the Patrouille Suisse training flights every Monday morning."
+                   data-de="Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen."
+                   data-it="Dal 2010 gestiamo webcam ad alta risoluzione 24 ore su 24. Siamo particolarmente orgogliosi di scorci unici, come i voli di addestramento della Patrouille Suisse ogni lunedì mattina."
+                   data-fr="Depuis 2010, nous exploitons des webcams haute résolution 24h/24. Nous sommes particulièrement fiers d'aperçus uniques, comme les vols d'entraînement de la Patrouille Suisse chaque lundi matin."
+                   data-zh="自2010年以来，我们全天候运行高分辨率摄像头。我们尤其自豪于独特的视角，例如每周一早上的瑞士巡逻兵训练飞行。">
+                    Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen.
                 </p>
-                <p>Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen.</p>
             </div>
         </div>
     </div>
@@ -2211,27 +2884,140 @@ body.theme-neo footer {
 <?php if ($adminManager->isAdmin()): ?>
 <section id="admin" class="section">
     <div class="container">
-        <h2>Admin-Bereich</h2>
+        <h2 data-en="Admin Area" data-de="Admin-Bereich" data-it="Area admin" data-fr="Espace admin" data-zh="管理员区域">Admin-Bereich</h2>
         <?php echo $adminManager->displayAdminContent(); ?>
     </div>
 </section>
 <?php else: ?>
 <section id="admin-login" class="section">
     <div class="container">
-        <h2>Admin Login</h2>
+        <h2 data-en="Admin Login" data-de="Admin Login" data-it="Accesso admin" data-fr="Connexion admin" data-zh="管理员登录">Admin Login</h2>
         <?php echo $adminManager->displayLoginForm(); ?>
     </div>
 </section>
 <?php endif; ?>
 
+<!-- PATROUILLE SUISSE SEKTION -->
+<section id="patrouille-suisse" class="section" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); display: <?php echo $settingsManager->shouldShowPatrouillesuisse() ? 'block' : 'none'; ?>;">
+    <div class="container">
+        <h2 style="color: #fff; text-align: center;" data-en="Patrouille Suisse Live - Watch Training Flights" data-de="Patrouille Suisse Live - Trainingsflüge Beobachten" data-it="Patrouille Suisse Live - Guarda i voli di addestramento" data-fr="Patrouille Suisse en direct - Regardez les vols d'entraînement" data-zh="瑞士巡逻兵直播 - 观看训练飞行">Patrouille Suisse Live - Trainingsflüge Beobachten</h2>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px;">
+            <div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; backdrop-filter: blur(10px);">
+                <h3 style="color: #ff6b6b; margin-bottom: 15px;" data-en="Every Monday Live!" data-de="Jeden Montag Live!" data-it="Ogni lunedì in diretta!" data-fr="Tous les lundis en direct !" data-zh="每周一直播！">Jeden Montag Live!</h3>
+                <p style="color: #ddd; line-height: 1.8;" data-en="The Patrouille Suisse, the official aerobatic team of the Swiss Air Force, trains every Monday morning in the Zurich Oberland region. Our webcam offers a unique view of the spectacular flight maneuvers of the six F-5E Tiger II jets." data-de="Die Patrouille Suisse, das offizielle Kunstflugteam der Schweizer Luftwaffe, trainiert jeden Montagmorgen in der Region Zürich Oberland. Unsere Webcam bietet einen einzigartigen Blick auf die spektakulären Flugmanöver der sechs F-5E Tiger II Jets." data-it="La Patrouille Suisse, il team acrobatico ufficiale dell'Aeronautica militare svizzera, si addestra ogni lunedì mattina nella regione dell'Oberland di Zurigo. La nostra webcam offre una vista unica delle spettacolari manovre di volo dei sei F-5E Tiger II." data-fr="La Patrouille Suisse, l'équipe officielle de voltige des Forces aériennes suisses, s'entraîne chaque lundi matin dans la région de l'Oberland zurichois. Notre webcam offre une vue unique des spectaculaires manœuvres de vol des six F-5E Tiger II." data-zh="瑞士巡逻兵是瑞士空军的官方特技飞行队，每周一早上在苏黎世高地地区训练。我们的摄像头提供了观赏六架 F-5E Tiger II 喷气机精彩机动的独特视角。">
+                    Die Patrouille Suisse, das offizielle Kunstflugteam der Schweizer Luftwaffe, trainiert jeden <strong style="color: #fff;">Montagmorgen</strong> in der Region Zürich Oberland. Unsere Webcam bietet einen einzigartigen Blick auf die spektakulären Flugmanöver der sechs F-5E Tiger II Jets.
+                </p>
+                <ul style="color: #ccc; margin-top: 15px; padding-left: 20px;">
+                    <li data-en="Training time: approx. 09:00 - 11:00" data-de="Trainingszeit: ca. 09:00 - 11:00 Uhr" data-it="Orario di addestramento: circa 09:00 - 11:00" data-fr="Heure d'entraînement : env. 09:00 - 11:00" data-zh="训练时间：约 09:00 - 11:00">Trainingszeit: ca. 09:00 - 11:00 Uhr</li>
+                    <li data-en="Visible in good weather" data-de="Bei gutem Wetter sichtbar" data-it="Visibile con bel tempo" data-fr="Visible par beau temps" data-zh="天气良好时可见">Bei gutem Wetter sichtbar</li>
+                    <li data-en="Unique perspective from Zurich Oberland" data-de="Einzigartige Perspektive aus dem Zürcher Oberland" data-it="Prospettiva unica dall'Oberland di Zurigo" data-fr="Perspective unique depuis l'Oberland zurichois" data-zh="来自苏黎世高地的独特视角">Einzigartige Perspektive aus dem Zürcher Oberland</li>
+                </ul>
+            </div>
+            <div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; backdrop-filter: blur(10px);">
+                <h3 style="color: #4ecdc4; margin-bottom: 15px;" data-en="History of Patrouille Suisse" data-de="Geschichte der Patrouille Suisse" data-it="Storia della Patrouille Suisse" data-fr="Histoire de la Patrouille Suisse" data-zh="瑞士巡逻兵历史">Geschichte der Patrouille Suisse</h3>
+                <p style="color: #ddd; line-height: 1.8;" data-en="Founded in 1964, the Patrouille Suisse is one of Europe's most renowned aerobatic teams. The team has been flying the Northrop F-5E Tiger II since 1995 and delights audiences at shows throughout Switzerland and internationally." data-de="Gegründet 1964, ist die Patrouille Suisse eines der renommiertesten Kunstflugteams Europas. Das Team fliegt seit 1995 die Northrop F-5E Tiger II und begeistert bei Shows in der ganzen Schweiz und international." data-it="Fondata nel 1964, la Patrouille Suisse è uno dei team acrobatici più rinomati d'Europa. Dal 1995 il team vola con i Northrop F-5E Tiger II e entusiasma il pubblico in Svizzera e all'estero." data-fr="Fondée en 1964, la Patrouille Suisse est l'une des équipes de voltige les plus renommées d'Europe. L'équipe vole sur Northrop F-5E Tiger II depuis 1995 et séduit le public en Suisse et à l'international." data-zh="瑞士巡逻兵成立于1964年，是欧洲最著名的特技飞行队之一。该队自1995年以来驾驶 Northrop F-5E Tiger II，在瑞士及国际航展上深受观众喜爱。">
+                    Gegründet 1964, ist die Patrouille Suisse eines der renommiertesten Kunstflugteams Europas. Das Team fliegt seit 1995 die Northrop F-5E Tiger II und begeistert bei Shows in der ganzen Schweiz und international.
+                </p>
+                <p style="color: #ddd; margin-top: 15px;" data-en="Home base: Payerne (VD) | Aircraft: 6x F-5E Tiger II | Team size: 6 pilots + crew" data-de="Heimatbasis: Payerne (VD) | Flugzeuge: 6x F-5E Tiger II | Teamgrösse: 6 Piloten + Crew" data-it="Base: Payerne (VD) | Aeromobili: 6x F-5E Tiger II | Team: 6 piloti + personale" data-fr="Base : Payerne (VD) | Avions : 6x F-5E Tiger II | Équipe : 6 pilotes + équipe" data-zh="基地：Payerne (VD) | 飞机：6 架 F-5E Tiger II | 团队规模：6 名飞行员 + 机组">
+                    <strong style="color: #fff;" data-en="Home base:" data-de="Heimatbasis:" data-it="Base:" data-fr="Base :" data-zh="基地：">Heimatbasis:</strong> Payerne (VD)<br>
+                    <strong style="color: #fff;" data-en="Aircraft:" data-de="Flugzeuge:" data-it="Aeromobili:" data-fr="Avions :" data-zh="飞机：">Flugzeuge:</strong> 6x F-5E Tiger II<br>
+                    <strong style="color: #fff;" data-en="Team size:" data-de="Teamgrösse:" data-it="Team:" data-fr="Équipe :" data-zh="团队规模：">Teamgrösse:</strong> 6 <span data-en="pilots + crew" data-de="Piloten + Crew" data-it="piloti + personale" data-fr="pilotes + équipe" data-zh="飞行员 + 机组">Piloten + Crew</span>
+                </p>
+            </div>
+            <div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; backdrop-filter: blur(10px);">
+                <h3 style="color: #ffd93d; margin-bottom: 15px;" data-en="Best Viewing Tips" data-de="Beste Beobachtungstipps" data-it="Consigli per la migliore visione" data-fr="Conseils pour une meilleure observation" data-zh="最佳观看提示">Beste Beobachtungstipps</h3>
+                <p style="color: #ddd; line-height: 1.8;" data-en="For the best view of the training flights, we recommend:" data-de="Für die beste Sicht auf die Trainingsflüge empfehlen wir:" data-it="Per la migliore visione dei voli di addestramento, consigliamo:" data-fr="Pour la meilleure vue des vols d'entraînement, nous recommandons :" data-zh="为获得最佳的训练飞行观赏效果，我们建议：">
+                    Für die beste Sicht auf die Trainingsflüge empfehlen wir:
+                </p>
+                <ul style="color: #ccc; margin-top: 15px; padding-left: 20px;">
+                    <li data-en="Use the zoom function of our webcam" data-de="Nutzen Sie die Zoom-Funktion unserer Webcam" data-it="Usa la funzione zoom della nostra webcam" data-fr="Utilisez la fonction zoom de notre webcam" data-zh="使用我们摄像头的缩放功能">Nutzen Sie die Zoom-Funktion unserer Webcam</li>
+                    <li data-en="Timelapse mode for accelerated view" data-de="Timelapse-Modus für beschleunigte Ansicht" data-it="Modalità timelapse per una vista accelerata" data-fr="Mode timelapse pour une vue accélérée" data-zh="使用延时模式加速观看">Timelapse-Modus für beschleunigte Ansicht</li>
+                    <li data-en="Daily videos to watch later" data-de="Tagesvideos zum Nachschauen" data-it="Video giornalieri da rivedere" data-fr="Vidéos quotidiennes à revoir" data-zh="每日视频可供回看">Tagesvideos zum Nachschauen</li>
+                    <li data-en="AI detection marks aircraft sightings" data-de="AI-Erkennung markiert Flugzeug-Sichtungen" data-it="Il rilevamento AI segnala gli avvistamenti di aerei" data-fr="La détection IA signale les observations d'avions" data-zh="AI 检测会标记飞机出现">AI-Erkennung markiert Flugzeug-Sichtungen</li>
+                </ul>
+                <p style="color: #aaa; margin-top: 15px; font-size: 14px;" data-en="Note: Trainings may be cancelled in bad weather." data-de="Hinweis: Bei schlechtem Wetter können Trainings abgesagt werden." data-it="Nota: gli addestramenti possono essere annullati in caso di maltempo." data-fr="Remarque : les entraînements peuvent être annulés en cas de mauvais temps." data-zh="注意：恶劣天气时训练可能会取消。">
+                    <em>Hinweis: Bei schlechtem Wetter können Trainings abgesagt werden.</em>
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- BLOG SEKTION -->
+<section id="blog" class="section" style="background: #f8f9fa;">
+    <div class="container">
+        <h2 style="text-align: center; margin-bottom: 10px;"><?php echo $siteConfig['blogTitle']; ?></h2>
+        <p style="text-align: center; color: #666; margin-bottom: 40px;" data-en="Latest weather news, webcam updates and nature observations from Zurich Oberland" data-de="Aktuelle Wetter-News, Webcam-Updates und Naturbeobachtungen aus dem Zürcher Oberland" data-it="Ultime notizie meteo, aggiornamenti della webcam e osservazioni naturalistiche dall'Oberland di Zurigo" data-fr="Dernières actualités météo, mises à jour de la webcam et observations de la nature depuis l'Oberland zurichois" data-zh="来自苏黎世高地的最新天气资讯、摄像头更新和自然观察">Aktuelle Wetter-News, Webcam-Updates und Naturbeobachtungen aus dem Zürcher Oberland</p>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;">
+            <!-- Blog Artikel 1 -->
+            <article style="background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
+                <div style="height: 180px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
+                    <span style="font-size: 60px;">🌅</span>
+                </div>
+                <div style="padding: 25px;">
+                    <h3 style="margin-bottom: 10px; color: #333;" data-en="Sunrises over Lake Zurich" data-de="Sonnenaufgänge über dem Zürichsee" data-it="Albe sul Lago di Zurigo" data-fr="Levers de soleil sur le lac de Zurich" data-zh="苏黎世湖日出">Sonnenaufgänge über dem Zürichsee</h3>
+                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="January 2024" data-de="Januar 2024" data-it="Gennaio 2024" data-fr="Janvier 2024" data-zh="2024年1月">Januar 2024</p>
+                    <p style="color: #555; line-height: 1.7;" data-en="The winter months offer spectacular sunrises over Lake Zurich. Our AI detection automatically identifies the most beautiful moments and saves them in the gallery." data-de="Die Wintermonate bieten spektakuläre Sonnenaufgänge über dem Zürichsee. Unsere AI-Erkennung identifiziert automatisch die schönsten Momente und speichert sie in der Galerie." data-it="I mesi invernali offrono spettacolari albe sul Lago di Zurigo. Il nostro rilevamento AI identifica automaticamente i momenti più belli e li salva nella galleria." data-fr="Les mois d'hiver offrent des levers de soleil spectaculaires sur le lac de Zurich. Notre détection IA identifie automatiquement les plus beaux moments et les enregistre dans la galerie." data-zh="冬季在苏黎世湖上空可见壮观的日出。我们的 AI 检测会自动识别最美瞬间并保存到图库。">
+                        Die Wintermonate bieten spektakuläre Sonnenaufgänge über dem Zürichsee. Unsere AI-Erkennung identifiziert automatisch die schönsten Momente und speichert sie in der Galerie.
+                    </p>
+                    <p style="color: #555; line-height: 1.7; margin-top: 10px;" data-en="Especially with high fog, impressive lighting moods are created when the sun breaks through the cloud cover." data-de="Besonders bei Hochnebel entstehen eindrucksvolle Lichtstimmungen, wenn die Sonne durch die Wolkendecke bricht." data-it="Soprattutto con la nebbia alta si creano suggestive atmosfere di luce quando il sole rompe la coltre di nubi." data-fr="Surtout en cas de brouillard élevé, des ambiances lumineuses impressionnantes se créent lorsque le soleil perce la couverture nuageuse." data-zh="尤其在高雾天气，当太阳穿透云层时会形成迷人的光影氛围。">
+                        Besonders bei Hochnebel entstehen eindrucksvolle Lichtstimmungen, wenn die Sonne durch die Wolkendecke bricht.
+                    </p>
+                </div>
+            </article>
+
+            <!-- Blog Artikel 2 -->
+            <article style="background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
+                <div style="height: 180px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); display: flex; align-items: center; justify-content: center;">
+                    <span style="font-size: 60px;">🏔️</span>
+                </div>
+                <div style="padding: 25px;">
+                    <h3 style="margin-bottom: 10px; color: #333;" data-en="Alpine Panorama in Winter" data-de="Alpenpanorama im Winter" data-it="Panorama alpino in inverno" data-fr="Panorama alpin en hiver" data-zh="冬季阿尔卑斯全景">Alpenpanorama im Winter</h3>
+                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="December 2023" data-de="Dezember 2023" data-it="Dicembre 2023" data-fr="Décembre 2023" data-zh="2023年12月">Dezember 2023</p>
+                    <p style="color: #555; line-height: 1.7;" data-en="On clear winter days, the view from our webcam at 616m altitude extends to the snow-covered peaks of the Glarus Alps. Säntis, Glärnisch and other mountain peaks are visible." data-de="An klaren Wintertagen reicht die Sicht von unserer Webcam auf 616m Höhe bis zu den schneebedeckten Gipfeln der Glarner Alpen. Säntis, Glärnisch und weitere Bergspitzen sind sichtbar." data-it="Nelle limpide giornate invernali, la vista dalla nostra webcam a 616 m di altitudine si estende alle vette innevate delle Alpi di Glarona. Si vedono Säntis, Glärnisch e altre cime." data-fr="Par temps clair en hiver, la vue depuis notre webcam à 616 m d'altitude s'étend jusqu'aux sommets enneigés des Alpes glaronnaises. Le Säntis, le Glärnisch et d'autres sommets sont visibles." data-zh="在晴朗的冬日，从我们海拔616米的摄像头可远眺格拉鲁斯阿尔卑斯的雪峰，可见 Säntis、Glärnisch 等山峰。">
+                        An klaren Wintertagen reicht die Sicht von unserer Webcam auf 616m Höhe bis zu den schneebedeckten Gipfeln der Glarner Alpen. Säntis, Glärnisch und weitere Bergspitzen sind sichtbar.
+                    </p>
+                    <p style="color: #555; line-height: 1.7; margin-top: 10px;" data-en="Use the zoom function for detailed views of the mountain landscape." data-de="Nutzen Sie die Zoom-Funktion für detaillierte Ansichten der Berglandschaft." data-it="Usa la funzione zoom per viste dettagliate del paesaggio montano." data-fr="Utilisez la fonction zoom pour des vues détaillées du paysage montagneux." data-zh="使用缩放功能可查看更细致的山景。">
+                        Nutzen Sie die Zoom-Funktion für detaillierte Ansichten der Berglandschaft.
+                    </p>
+                </div>
+            </article>
+
+            <!-- Blog Artikel 3 -->
+            <article style="background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
+                <div style="height: 180px; background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%); display: flex; align-items: center; justify-content: center;">
+                    <span style="font-size: 60px;">✈️</span>
+                </div>
+                <div style="padding: 25px;">
+                    <h3 style="margin-bottom: 10px; color: #333;" data-en="Patrouille Suisse Season 2024" data-de="Patrouille Suisse Saison 2024" data-it="Stagione 2024 della Patrouille Suisse" data-fr="Saison 2024 de la Patrouille Suisse" data-zh="2024年瑞士巡逻兵季">Patrouille Suisse Saison 2024</h3>
+                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="March 2024" data-de="März 2024" data-it="Marzo 2024" data-fr="Mars 2024" data-zh="2024年3月">März 2024</p>
+                    <p style="color: #555; line-height: 1.7;" data-en="The new flight season of Patrouille Suisse has begun! Every Monday the aerobatic team trains over Zurich Oberland - our webcam captures the flight maneuvers live." data-de="Die neue Flugsaison der Patrouille Suisse hat begonnen! Jeden Montag trainiert das Kunstflugteam über dem Zürcher Oberland - unsere Webcam fängt die Flugmanöver live ein." data-it="È iniziata la nuova stagione di volo della Patrouille Suisse! Ogni lunedì il team acrobatico si addestra sopra l'Oberland di Zurigo: la nostra webcam cattura le manovre in diretta." data-fr="La nouvelle saison de vol de la Patrouille Suisse a commencé ! Chaque lundi, l'équipe de voltige s'entraîne au-dessus de l'Oberland zurichois : notre webcam capture les manœuvres en direct." data-zh="瑞士巡逻兵新一季飞行已开始！每周一特技飞行队在苏黎世高地训练，我们的摄像头会实时捕捉飞行动作。">
+                        Die neue Flugsaison der Patrouille Suisse hat begonnen! Jeden Montag trainiert das Kunstflugteam über dem Zürcher Oberland - unsere Webcam fängt die Flugmanöver live ein.
+                    </p>
+                    <p style="color: #555; line-height: 1.7; margin-top: 10px;" data-en="AI detection automatically marks aircraft sightings in our gallery." data-de="Die AI-Erkennung markiert Flugzeug-Sichtungen automatisch in unserer Galerie." data-it="Il rilevamento AI contrassegna automaticamente gli avvistamenti di aerei nella nostra galleria." data-fr="La détection IA marque automatiquement les observations d'avions dans notre galerie." data-zh="AI 检测会在我们的图库中自动标记飞机出现。">
+                        Die AI-Erkennung markiert Flugzeug-Sichtungen automatisch in unserer Galerie.
+                    </p>
+                </div>
+            </article>
+        </div>
+
+        <div style="text-align: center; margin-top: 40px;">
+            <p style="color: #888; font-size: 14px;" data-en="More weather updates and observations can be found on our social media channels." data-de="Weitere Wetter-Updates und Beobachtungen finden Sie auf unseren Social Media Kanälen." data-it="Altri aggiornamenti meteo e osservazioni sono disponibili sui nostri canali social." data-fr="D'autres mises à jour météo et observations sont disponibles sur nos réseaux sociaux." data-zh="更多天气更新和观测内容请关注我们的社交媒体渠道。">
+                Weitere Wetter-Updates und Beobachtungen finden Sie auf unseren Social Media Kanälen.
+            </p>
+        </div>
+    </div>
+</section>
+
 <!-- IMPRESSUM -->
 <section id="impressum" class="section">
     <div class="container">
-        <h2 data-en="Imprint" data-de="Impressum">Impressum</h2>
-        <p>Aurora Wetter Livecam</p>
+        <h2 data-en="Imprint" data-de="Impressum" data-it="Note legali" data-fr="Mentions légales" data-zh="法律声明">Impressum</h2>
+        <p><?php echo $siteConfig['footerName']; ?></p>
         <p>M. Kessler</p>
         <p>Dürnten, Schweiz</p>
-        <p data-en="Inquiries via contact form" data-de="Anfragen per Kontaktformular">Anfragen per Kontaktformular</p>
+        <p data-en="Inquiries via contact form" data-de="Anfragen per Kontaktformular" data-it="Richieste tramite modulo di contatto" data-fr="Demandes via le formulaire de contact" data-zh="通过联系表单咨询">Anfragen per Kontaktformular</p>
     </div>
 </section>
 
@@ -2239,15 +3025,37 @@ body.theme-neo footer {
 
 <footer>
     <div class="container">
+        <!-- Social Media Icons -->
+        <div class="footer-social social-media-container" style="text-align: center; margin-bottom: 20px; display: <?php echo $settingsManager->shouldShowSocialMedia() ? 'block' : 'none'; ?>;">
+            <a href="https://www.instagram.com/auroraweatherlivecam" target="_blank" class="social-link" rel="noopener noreferrer" title="Folge uns auf Instagram" style="display: inline-block; margin: 0 10px; color: #E1306C; font-size: 24px;">
+                <i class="fab fa-instagram" aria-hidden="true"></i>
+                <span class="sr-only">Instagram</span>
+            </a>
+            <a href="https://www.facebook.com/auroraweatherlivecam" target="_blank" class="social-link" rel="noopener noreferrer" title="Folge uns auf Facebook" style="display: inline-block; margin: 0 10px; color: #1877F2; font-size: 24px;">
+                <i class="fab fa-facebook" aria-hidden="true"></i>
+                <span class="sr-only">Facebook</span>
+            </a>
+            <a href="https://www.youtube.com/@auroraweatherlivecam" target="_blank" class="social-link" rel="noopener noreferrer" title="Abonniere unseren YouTube Kanal" style="display: inline-block; margin: 0 10px; color: #FF0000; font-size: 24px;">
+                <i class="fab fa-youtube" aria-hidden="true"></i>
+                <span class="sr-only">YouTube</span>
+            </a>
+            <a href="https://www.tiktok.com/@auroraweatherlivecam" target="_blank" class="social-link" rel="noopener noreferrer" title="Folge uns auf TikTok" style="display: inline-block; margin: 0 10px; color: #000000; font-size: 24px;">
+                <i class="fab fa-tiktok" aria-hidden="true"></i>
+                <span class="sr-only">TikTok</span>
+            </a>
+        </div>
         <div class="footer-links">
             <a href="#webcams">Webcam</a>
             <a href="#guestbook">Gästebuch</a>
             <a href="#kontakt">Kontakt</a>
             <a href="#gallery">Galerie</a>
+            <a href="#patrouille-suisse">Patrouille Suisse</a>
+            <a href="#blog">Blog</a>
             <a href="#impressum">Impressum</a>
         </div>
         <div class="footer-bottom">
-            <p>&copy; 2024 Aurora Wetter Lifecam</p>
+            <p><?php echo $siteConfig['copyright']; ?></p>
+            <p style="font-size: 12px; color: #999; margin-top: 5px;">Live Webcam Schweiz | Zürichsee Blick | Patrouille Suisse Trainings</p>
         </div>
     </div>
 </footer>
@@ -2310,6 +3118,7 @@ const TimelapseController = {
     availableSpeeds: [1, 10, 100],
     intervalId: null,
     baseInterval: 200,
+    reverseEnabled: <?php echo $settingsManager->isTimelapseReverseEnabled() ? 'true' : 'false'; ?>,
 
     init: function() {
         this.setupControls();
@@ -2325,7 +3134,7 @@ const TimelapseController = {
                 <button id="tl-play-pause" class="tl-btn" title="Play/Pause">
                     <i class="fas fa-play"></i>
                 </button>
-                <button id="tl-reverse" class="tl-btn" title="Rückwärts">
+                <button id="tl-reverse" class="tl-btn" title="Rückwärts" style="display: ${this.reverseEnabled ? 'inline-block' : 'none'};">
                     <i class="fas fa-backward"></i>
                 </button>
                 <div class="tl-slider-container">
@@ -2560,16 +3369,115 @@ const AdminSettings = {
     },
 
     applySettingImmediately: function(key, value) {
+        const boolValue = (value === true || value === 'true');
+
         switch(key) {
             case 'viewer_display.enabled':
                 const viewerEl = document.getElementById('viewer-stat-container');
                 if (viewerEl) {
-                    viewerEl.style.display = (value === true || value === 'true') ? 'inline-flex' : 'none';
+                    viewerEl.style.display = boolValue ? 'inline-flex' : 'none';
                 }
                 break;
             case 'viewer_display.min_viewers':
                 window.minViewersToShow = parseInt(value);
                 break;
+
+            // UI Display (Punkt 2)
+            case 'ui_display.show_recommendation_banner':
+                const bannerEl = document.querySelector('.banner-container');
+                if (bannerEl) bannerEl.style.display = boolValue ? 'block' : 'none';
+                break;
+            case 'ui_display.show_qr_code':
+                const qrSection = document.getElementById('qr-code');
+                if (qrSection) qrSection.style.display = boolValue ? 'block' : 'none';
+                break;
+            case 'ui_display.show_social_media':
+                const socialEls = document.querySelectorAll('.social-link, .social-media-container');
+                socialEls.forEach(el => el.style.display = boolValue ? '' : 'none');
+                break;
+            case 'ui_display.show_patrouille_suisse':
+                const patrouilleSection = document.getElementById('patrouille-suisse');
+                if (patrouilleSection) patrouilleSection.style.display = boolValue ? 'block' : 'none';
+                break;
+
+            // Zoom & Timelapse (Punkt 3)
+            case 'zoom_timelapse.show_zoom_controls':
+                const zoomControls = document.getElementById('zoom-controls');
+                if (zoomControls) zoomControls.style.display = boolValue ? 'flex' : 'none';
+                break;
+            case 'zoom_timelapse.max_zoom_level':
+                window.maxZoomLevel = parseFloat(value);
+                this.showNotification('Max Zoom: ' + value + 'x (Reload empfohlen)', 'success');
+                break;
+            case 'zoom_timelapse.timelapse_reverse_enabled':
+                const reverseBtn = document.getElementById('tl-reverse');
+                if (reverseBtn) reverseBtn.style.display = boolValue ? 'inline-block' : 'none';
+                break;
+
+            // Content Management (Punkt 5)
+            case 'content.guestbook_enabled':
+                const guestbookSection = document.getElementById('guestbook');
+                if (guestbookSection) guestbookSection.style.display = boolValue ? 'block' : 'none';
+                break;
+            case 'content.gallery_enabled':
+                const gallerySection = document.getElementById('gallery');
+                if (gallerySection) gallerySection.style.display = boolValue ? 'block' : 'none';
+                break;
+            case 'content.ai_events_enabled':
+                const aiSections = document.querySelectorAll('.ai-events-section');
+                aiSections.forEach(section => section.style.display = boolValue ? 'block' : 'none');
+                this.showNotification('AI-Events ' + (boolValue ? 'aktiviert' : 'deaktiviert') + ' (Reload empfohlen)', 'success');
+                break;
+            case 'content.max_guestbook_entries':
+                this.showNotification('Max Einträge: ' + value + ' (Reload empfohlen)', 'success');
+                break;
+
+            // Technical (Punkt 6)
+            case 'technical.viewer_update_interval':
+                this.showNotification('Update-Intervall: ' + value + 's (Reload empfohlen)', 'success');
+                break;
+            case 'technical.session_timeout':
+                this.showNotification('Session Timeout: ' + value + 's (Reload empfohlen)', 'success');
+                break;
+
+            // Theme (Punkt 7)
+            case 'theme.default_theme':
+                document.body.className = value;
+                this.showNotification('Theme geändert: ' + value, 'success');
+                break;
+            case 'theme.show_theme_switcher':
+                const themeSwitcher = document.querySelector('.theme-switcher');
+                if (themeSwitcher) themeSwitcher.style.display = boolValue ? 'flex' : 'none';
+                break;
+
+            // SEO (Punkt 8)
+            case 'seo.custom_title':
+                document.title = value || document.title;
+                this.showNotification('Title aktualisiert (Meta bei Reload)', 'success');
+                break;
+            case 'seo.meta_description':
+            case 'seo.meta_keywords':
+                this.showNotification('SEO Meta gespeichert (wirksam bei Reload)', 'success');
+                break;
+
+            // Weather Settings
+            case 'weather.enabled':
+                const weatherWidget = document.getElementById('weather-widget');
+                if (weatherWidget) {
+                    weatherWidget.style.display = boolValue ? 'flex' : 'none';
+                }
+                this.showNotification('Wetter-Widget ' + (boolValue ? 'aktiviert' : 'deaktiviert'), 'success');
+                break;
+            case 'weather.api_key':
+            case 'weather.location':
+            case 'weather.lat':
+            case 'weather.lon':
+            case 'weather.units':
+                this.showNotification('Wetter-Einstellung gespeichert (Reload empfohlen)', 'success');
+                break;
+            case 'weather.update_interval':
+                this.showNotification('Update-Intervall: ' + value + ' Minuten (Reload empfohlen)', 'success');
+                break;
         }
     },
 
@@ -2589,6 +3497,113 @@ const AdminSettings = {
         document.getElementById('setting-allow-download')?.addEventListener('change', (e) => {
             this.updateSetting('video_mode.allow_download', e.target.checked);
         });
+
+        // UI Display Settings (Punkt 2)
+        document.getElementById('setting-show-banner')?.addEventListener('change', (e) => {
+            this.updateSetting('ui_display.show_recommendation_banner', e.target.checked);
+        });
+
+        document.getElementById('setting-show-qr')?.addEventListener('change', (e) => {
+            this.updateSetting('ui_display.show_qr_code', e.target.checked);
+        });
+
+        document.getElementById('setting-show-social')?.addEventListener('change', (e) => {
+            this.updateSetting('ui_display.show_social_media', e.target.checked);
+        });
+
+        document.getElementById('setting-show-patrouille')?.addEventListener('change', (e) => {
+            this.updateSetting('ui_display.show_patrouille_suisse', e.target.checked);
+        });
+
+        // Zoom & Timelapse Settings (Punkt 3)
+        document.getElementById('setting-show-zoom')?.addEventListener('change', (e) => {
+            this.updateSetting('zoom_timelapse.show_zoom_controls', e.target.checked);
+        });
+
+        document.getElementById('setting-max-zoom')?.addEventListener('change', (e) => {
+            this.updateSetting('zoom_timelapse.max_zoom_level', parseFloat(e.target.value));
+        });
+
+        document.getElementById('setting-timelapse-reverse')?.addEventListener('change', (e) => {
+            this.updateSetting('zoom_timelapse.timelapse_reverse_enabled', e.target.checked);
+        });
+
+        // Content Management Settings (Punkt 5)
+        document.getElementById('setting-guestbook-enabled')?.addEventListener('change', (e) => {
+            this.updateSetting('content.guestbook_enabled', e.target.checked);
+        });
+
+        document.getElementById('setting-gallery-enabled')?.addEventListener('change', (e) => {
+            this.updateSetting('content.gallery_enabled', e.target.checked);
+        });
+
+        document.getElementById('setting-ai-events-enabled')?.addEventListener('change', (e) => {
+            this.updateSetting('content.ai_events_enabled', e.target.checked);
+        });
+
+        document.getElementById('setting-max-guestbook')?.addEventListener('change', (e) => {
+            this.updateSetting('content.max_guestbook_entries', parseInt(e.target.value));
+        });
+
+        // Technical Settings (Punkt 6)
+        document.getElementById('setting-viewer-interval')?.addEventListener('change', (e) => {
+            this.updateSetting('technical.viewer_update_interval', parseInt(e.target.value));
+        });
+
+        document.getElementById('setting-session-timeout')?.addEventListener('change', (e) => {
+            this.updateSetting('technical.session_timeout', parseInt(e.target.value));
+        });
+
+        // Theme Settings (Punkt 7)
+        document.getElementById('setting-default-theme')?.addEventListener('change', (e) => {
+            this.updateSetting('theme.default_theme', e.target.value);
+        });
+
+        document.getElementById('setting-show-theme-switcher')?.addEventListener('change', (e) => {
+            this.updateSetting('theme.show_theme_switcher', e.target.checked);
+        });
+
+        // SEO Settings (Punkt 8)
+        document.getElementById('setting-custom-title')?.addEventListener('change', (e) => {
+            this.updateSetting('seo.custom_title', e.target.value);
+        });
+
+        document.getElementById('setting-meta-description')?.addEventListener('change', (e) => {
+            this.updateSetting('seo.meta_description', e.target.value);
+        });
+
+        document.getElementById('setting-meta-keywords')?.addEventListener('change', (e) => {
+            this.updateSetting('seo.meta_keywords', e.target.value);
+        });
+
+        // Weather Settings
+        document.getElementById('setting-weather-enabled')?.addEventListener('change', (e) => {
+            this.updateSetting('weather.enabled', e.target.checked);
+        });
+
+        document.getElementById('setting-weather-api-key')?.addEventListener('change', (e) => {
+            this.updateSetting('weather.api_key', e.target.value);
+        });
+
+        document.getElementById('setting-weather-location')?.addEventListener('change', (e) => {
+            this.updateSetting('weather.location', e.target.value);
+        });
+
+        document.getElementById('setting-weather-lat')?.addEventListener('change', (e) => {
+            this.updateSetting('weather.lat', e.target.value);
+        });
+
+        document.getElementById('setting-weather-lon')?.addEventListener('change', (e) => {
+            this.updateSetting('weather.lon', e.target.value);
+        });
+
+        document.getElementById('setting-weather-interval')?.addEventListener('change', (e) => {
+            this.updateSetting('weather.update_interval', parseInt(e.target.value));
+        });
+
+        document.getElementById('setting-weather-units')?.addEventListener('change', (e) => {
+            this.updateSetting('weather.units', e.target.value);
+        });
     },
 
     showNotification: function(message, type) {
@@ -2827,7 +3842,97 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 });
 </script>
- 
+
+<!-- WEATHER AUTO-UPDATE -->
+<script>
+const WeatherUpdater = {
+    updateInterval: <?php echo $settingsManager->getWeatherUpdateInterval() * 60 * 1000; ?>, // Minuten -> Millisekunden
+
+    init: function() {
+        if (!document.getElementById('weather-widget')) return;
+
+        // Update alle X Minuten
+        setInterval(() => this.updateWeather(), this.updateInterval);
+    },
+
+    updateWeather: function() {
+        fetch(window.location.href + '?weather_action=get')
+            .then(r => r.json())
+            .then(data => {
+                if (data.success && data.data && !data.data.error) {
+                    this.renderWeather(data.data);
+                }
+            })
+            .catch(err => console.error('Weather update error:', err));
+    },
+
+    renderWeather: function(weather) {
+        const widget = document.getElementById('weather-widget');
+        if (!widget) return;
+
+        const rainSnow = weather.rain_1h > 0 || weather.snow_1h > 0;
+        const precipIcon = weather.rain_1h > 0 ? '🌧️' : '❄️';
+        const precipValue = weather.rain_1h > 0 ? weather.rain_1h : weather.snow_1h;
+
+        widget.innerHTML = `
+            <div class="weather-item weather-temp">
+                <span class="weather-icon">🌡️</span>
+                <span class="weather-value">${weather.temp}°C</span>
+                <span class="weather-label">Temperatur</span>
+            </div>
+            <div class="weather-item weather-wind">
+                <span class="weather-icon">💨</span>
+                <span class="weather-value">${weather.wind_speed} km/h ${weather.wind_direction}</span>
+                <span class="weather-label">Wind</span>
+            </div>
+            <div class="weather-item weather-pressure">
+                <span class="weather-icon">🔽</span>
+                <span class="weather-value">${weather.pressure} hPa</span>
+                <span class="weather-label">Luftdruck</span>
+            </div>
+            <div class="weather-item weather-humidity">
+                <span class="weather-icon">💧</span>
+                <span class="weather-value">${weather.humidity}%</span>
+                <span class="weather-label">Luftfeuchtigkeit</span>
+            </div>
+            <div class="weather-item weather-description">
+                <span class="weather-icon">${this.getWeatherEmoji(weather.icon)}</span>
+                <span class="weather-value">${weather.description}</span>
+                <span class="weather-label">${weather.location}</span>
+            </div>
+            ${rainSnow ? `
+            <div class="weather-item weather-precipitation">
+                <span class="weather-icon">${precipIcon}</span>
+                <span class="weather-value">${precipValue} mm</span>
+                <span class="weather-label">Niederschlag</span>
+            </div>
+            ` : ''}
+        `;
+
+        // Fade-in Animation
+        widget.style.animation = 'weatherFadeIn 0.5s ease';
+    },
+
+    getWeatherEmoji: function(iconCode) {
+        const map = {
+            '01d': '☀️', '01n': '🌙',
+            '02d': '⛅', '02n': '☁️',
+            '03d': '☁️', '03n': '☁️',
+            '04d': '☁️', '04n': '☁️',
+            '09d': '🌧️', '09n': '🌧️',
+            '10d': '🌦️', '10n': '🌧️',
+            '11d': '⛈️', '11n': '⛈️',
+            '13d': '❄️', '13n': '❄️',
+            '50d': '🌫️', '50n': '🌫️'
+        };
+        return map[iconCode] || '🌤️';
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+    WeatherUpdater.init();
+});
+</script>
 
 </body>
 </html>
diff --git a/aurora-livecam/index2.php b/aurora-livecam/index2.php
new file mode 100644
index 0000000..ac9efef
--- /dev/null
+++ b/aurora-livecam/index2.php
@@ -0,0 +1,3139 @@
+<?php
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+
+require __DIR__ . '/vendor/autoload.php';
+require_once 'SettingsManager.php';
+
+// SettingsManager initialisieren
+$settingsManager = new SettingsManager();
+
+// AJAX-Handler für Settings (VOR anderen Ausgaben!)
+$settingsManager->handleAjax();
+
+if (isset($_GET['download_video'])) {
+    $videoDir = './videos/';
+    $latestVideo = null;
+    $latestTime = 0;
+
+    // Finde das neueste Video
+    foreach (glob($videoDir . '*.mp4') as $video) {
+        $mtime = filemtime($video);
+        if ($mtime > $latestTime) {
+            $latestTime = $mtime;
+            $latestVideo = $video;
+        }
+    }
+
+    if ($latestVideo) {
+        header('Content-Description: File Transfer');
+        header('Content-Type: application/octet-stream');
+        header('Content-Disposition: attachment; filename="'.basename($latestVideo).'"');
+        header('Expires: 0');
+        header('Cache-Control: must-revalidate');
+        header('Pragma: public');
+        header('Content-Length: ' . filesize($latestVideo));
+        readfile($latestVideo);
+        exit;
+    } else {
+        echo "Kein Video zum Herunterladen gefunden.";
+        exit;
+    }
+}
+
+
+
+
+// Funktion zur sicheren Umleitung
+function safeRedirect($url) {
+    if (!headers_sent()) {
+        header("HTTP/1.1 301 Moved Permanently");
+        header("Location: " . $url);
+    } else {
+        echo '<script>window.location.href="' . $url . '";</script>';
+    }
+    exit();
+}
+
+// Hauptlogik
+$oldDomains = [
+    'www.aurora-wetter-lifecam.ch',
+    'www.aurora-wetter-livecam.ch'
+];
+$newDomain = 'www.aurora-weather-livecam.com';
+
+if (in_array($_SERVER['HTTP_HOST'], $oldDomains)) {
+    $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
+    $newUrl = $protocol . '://' . $newDomain . $_SERVER['REQUEST_URI'];
+
+    // Logging für Debugging
+    error_log("Umleitung von {$_SERVER['HTTP_HOST']} nach $newUrl");
+
+    if (!headers_sent()) {
+        header("HTTP/1.1 301 Moved Permanently");
+        header("Location: " . $newUrl);
+    } else {
+        echo '<script>window.location.href="' . $newUrl . '";</script>';
+    }
+    exit();
+}
+
+// Site-Konfiguration basierend auf Domain
+$isSeecam = ($_SERVER['HTTP_HOST'] === 'www.seecam.ch' || $_SERVER['HTTP_HOST'] === 'seecam.ch');
+
+if ($isSeecam) {
+    $siteConfig = [
+        'domain' => 'www.seecam.ch',
+        'domainUrl' => 'https://www.seecam.ch',
+        'logo' => 'seecam.jpg',
+        'siteName' => 'Seecam',
+        'siteNameFull' => 'Seecam Wetter Livecam',
+        'siteNameFullEn' => 'Seecam Weather Livecam',
+        'siteTitle' => 'Zürich Oberland Webcam Live - Zürichsee & Patrouille Suisse | Seecam 24/7',
+        'author' => 'Seecam Wetter Livecam',
+        'alternateName' => 'Seecam Webcam Schweiz',
+        'welcomeDe' => 'Willkommen bei Seecam Wetter Livecam',
+        'welcomeEn' => 'Welcome to Seecam Weather Livecam',
+        'aboutDe' => 'Seecam Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.',
+        'aboutEn' => 'Seecam Weather Livecam is a passion project...',
+        'blogTitle' => 'Seecam Wetter Blog',
+        'footerName' => 'Seecam Wetter Livecam',
+        'copyright' => '© 2024 Seecam Wetter Livecam - Webcam Zürich Oberland'
+    ];
+} else {
+    $siteConfig = [
+        'domain' => 'www.aurora-weather-livecam.com',
+        'domainUrl' => 'https://www.aurora-weather-livecam.com',
+        'logo' => 'logo.png',
+        'siteName' => 'Aurora',
+        'siteNameFull' => 'Aurora Wetter Livecam',
+        'siteNameFullEn' => 'Aurora Weather Livecam',
+        'siteTitle' => 'Zürich Oberland Webcam Live - Zürichsee & Patrouille Suisse | Aurora Livecam 24/7',
+        'author' => 'Aurora Wetter Livecam',
+        'alternateName' => 'Aurora Webcam Schweiz',
+        'welcomeDe' => 'Willkommen bei Aurora Wetter Livecam',
+        'welcomeEn' => 'Welcome to Aurora Weather Livecam',
+        'aboutDe' => 'Aurora Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.',
+        'aboutEn' => 'Aurora Weather Livecam is a passion project...',
+        'blogTitle' => 'Aurora Wetter Blog',
+        'footerName' => 'Aurora Wetter Livecam',
+        'copyright' => '© 2024 Aurora Wetter Lifecam - Webcam Zürich Oberland'
+    ];
+}
+
+
+
+session_start();
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+$imageDir = "./image"; // Angepasst an das Ausgabeverzeichnis des Bash-Skripts
+$imageFiles = glob("$imageDir/screenshot_*.jpg");
+rsort($imageFiles); // Sortiert die Dateien in umgekehrter Reihenfolge (neueste zuerst)
+$imageFilesJson = json_encode($imageFiles);
+
+
+class ViewerCounter {
+    private $file = 'active_viewers.json';
+    private $timeout = 30; // Zeit in Sekunden, bis ein User als "offline" gilt
+
+    public function handleHeartbeat() {
+        $ip = md5($_SERVER['REMOTE_ADDR'] . $_SERVER['HTTP_USER_AGENT']); // Anonymisierte ID
+        $now = time();
+
+        $viewers = [];
+
+        // 1. Datei lesen (mit Lock für Sicherheit bei vielen Zugriffen)
+        if (file_exists($this->file)) {
+            $content = file_get_contents($this->file);
+            $viewers = json_decode($content, true) ?? [];
+        }
+
+        // 2. Aktuellen User updaten
+        $viewers[$ip] = $now;
+
+        // 3. Alte User entfernen & Zählen
+        $activeCount = 0;
+        $newViewers = [];
+
+        foreach ($viewers as $userIp => $lastSeen) {
+            if ($now - $lastSeen < $this->timeout) {
+                $newViewers[$userIp] = $lastSeen;
+                $activeCount++;
+            }
+        }
+
+        // 4. Speichern
+        file_put_contents($this->file, json_encode($newViewers));
+
+        // 5. Ergebnis zurückgeben
+        header('Content-Type: application/json');
+        echo json_encode(['count' => $activeCount]);
+        exit;
+    }
+
+    public function getInitialCount() {
+        if (file_exists($this->file)) {
+            $viewers = json_decode(file_get_contents($this->file), true) ?? [];
+            // Nur grob zählen, genaues Update macht das JS sofort nach Laden
+            return count($viewers);
+        }
+        return 1; // Zumindest man selbst ist da
+    }
+}
+
+// Instanz erstellen
+$viewerCounter = new ViewerCounter();
+
+
+
+class WebcamManager {
+    private $videoSrc = 'test_video.m3u8';
+    private $logoPath = 'logo.png';
+
+    // Zeigt NUR das Video ohne Schnickschnack
+    public function displayWebcam() {
+        return '
+        <div id="live-video-wrapper" class="video-zoom-wrapper">
+            <video id="webcam-player"
+                autoplay
+                muted
+                playsinline
+                webkit-playsinline
+                x-webkit-airplay="allow"
+                x5-video-player-type="h5"
+                x5-video-player-fullscreen="true"
+                style="width: 100%; height: 100%; object-fit: contain;">
+            </video>
+        </div>';
+    }
+
+    // Das ist die neue Anzeige für unten links
+    public function displayStreamStats() {
+        return '
+        <div class="info-badge tech-stat" id="bitrate-display" style="display:none;">
+            <i class="fas fa-tachometer-alt bitrate-icon"></i>
+            <span>Stream: <span id="bitrate-value">0.00</span> MBit/s</span>
+        </div>';
+    }
+
+    public function captureSnapshot() {
+        $outputFile = 'snapshot_' . date('YmdHis') . '.jpg';
+        $src = escapeshellarg($this->videoSrc);
+        $logo = escapeshellarg($this->logoPath);
+        $command = "ffmpeg -i {$src} -i {$logo} -filter_complex 'overlay=main_w-overlay_w-10:10' -vframes 1 -q:v 2 {$outputFile}";
+        exec($command, $output, $returnVar);
+        if ($returnVar !== 0) return "Fehler";
+
+        $uploadDir = "uploads/";
+        if (!file_exists($uploadDir)) mkdir($uploadDir, 0777, true);
+        $uploadFile = $uploadDir . $outputFile;
+        copy($outputFile, $uploadFile);
+
+        header('Content-Type: application/octet-stream');
+        header('Content-Disposition: attachment; filename="' . $outputFile . '"');
+        readfile($outputFile);
+        unlink($outputFile);
+        exit;
+    }
+
+    public function getImageFiles() {
+        $imageFiles = glob("image/screenshot_*.jpg");
+        if ($imageFiles) rsort($imageFiles); else $imageFiles = [];
+        return json_encode($imageFiles);
+    }
+
+    public function captureVideoSequence($duration = 10) {
+        $outputFile = 'sequence_' . date('YmdHis') . '.mp4';
+        $src = escapeshellarg($this->videoSrc);
+        $logo = escapeshellarg($this->logoPath);
+        $dur = intval($duration);
+        $command = "ffmpeg -i {$src} -i {$logo} -filter_complex 'overlay=10:10' -t {$dur} -c:v libx264 -preset fast -crf 23 {$outputFile}";
+        exec($command, $output, $returnVar);
+        if ($returnVar !== 0) return "Fehler";
+
+        $uploadDir = "uploads/";
+        if (!file_exists($uploadDir)) mkdir($uploadDir, 0777, true);
+        $uploadFile = $uploadDir . $outputFile;
+        copy($outputFile, $uploadFile);
+
+        header('Content-Type: video/mp4');
+        header('Content-Disposition: attachment; filename="' . $outputFile . '"');
+        readfile($outputFile);
+        unlink($outputFile);
+        exit;
+    }
+
+    public function getJavaScript() {
+        return "
+        document.addEventListener('DOMContentLoaded', function () {
+            var video = document.getElementById('webcam-player');
+            var videoSrc = '{$this->videoSrc}';
+            var bitrateBadge = document.getElementById('bitrate-display');
+            var bitrateValue = document.getElementById('bitrate-value');
+            var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+            var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+
+            if(video) {
+                video.controls = false;
+                if (isIOS) {
+                    video.src = videoSrc;
+                    video.setAttribute('playsinline', '');
+                    video.setAttribute('webkit-playsinline', '');
+                    video.muted = true;
+                    if(bitrateBadge) bitrateBadge.style.display = 'none';
+                    video.addEventListener('loadedmetadata', function() { video.play().catch(console.log); });
+                } else if (Hls.isSupported()) {
+                    var hls = new Hls({ enableWorker: !isMobile, lowLatencyMode: false });
+                    hls.loadSource(videoSrc);
+                    hls.attachMedia(video);
+                    hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                        if (isMobile) video.muted = true;
+                        video.play().catch(console.log);
+                        if(bitrateBadge) bitrateBadge.style.display = 'inline-flex';
+                    });
+                    hls.on(Hls.Events.FRAG_LOADED, function(event, data) {
+                        var bandwidth = hls.bandwidthEstimate;
+                        if (bandwidth && !isNaN(bandwidth) && bitrateValue) {
+                            var mbs = bandwidth / 8 / 1024 / 1024;
+                            if (mbs > 0) bitrateValue.textContent = mbs.toFixed(2);
+                        }
+                    });
+                }
+            }
+        });
+        ";
+    }
+
+    public function setVideoSrc($src) { $this->videoSrc = $src; }
+}
+
+
+
+class VisualCalendarManager {
+    private $videoDir;
+    private $aiDir;
+    private $monthNames;
+    private $settingsManager;
+
+    // AI-Kategorien mit Icons und Farben
+    private $aiCategories = [
+        'sunny'   => ['icon' => '☀️', 'name' => 'Sonnig', 'color' => '#FFD700'],
+        'rainy'   => ['icon' => '🌧️', 'name' => 'Regen', 'color' => '#4682B4'],
+        'snowy'   => ['icon' => '❄️', 'name' => 'Schnee', 'color' => '#E0FFFF'],
+        'planes'  => ['icon' => '✈️', 'name' => 'Flugzeuge', 'color' => '#87CEEB'],
+        'birds'   => ['icon' => '🐦', 'name' => 'Vögel', 'color' => '#98FB98'],
+        'sunset'  => ['icon' => '🌅', 'name' => 'Sonnenuntergang', 'color' => '#FF6347'],
+        'sunrise' => ['icon' => '🌄', 'name' => 'Sonnenaufgang', 'color' => '#FFA07A'],
+        'rainbow' => ['icon' => '🌈', 'name' => 'Regenbogen', 'color' => '#FF69B4'],
+    ];
+
+    public function __construct($videoDir = './videos/', $aiDir = './ai/', $settingsManager = null) {
+        $this->videoDir = $videoDir;
+        $this->aiDir = $aiDir;
+        $this->settingsManager = $settingsManager;
+        $this->monthNames = [
+            1 => ['de' => 'Januar', 'en' => 'January', 'it' => 'Gennaio', 'fr' => 'Janvier', 'zh' => '一月'],
+            2 => ['de' => 'Februar', 'en' => 'February', 'it' => 'Febbraio', 'fr' => 'Février', 'zh' => '二月'],
+            3 => ['de' => 'März', 'en' => 'March', 'it' => 'Marzo', 'fr' => 'Mars', 'zh' => '三月'],
+            4 => ['de' => 'April', 'en' => 'April', 'it' => 'Aprile', 'fr' => 'Avril', 'zh' => '四月'],
+            5 => ['de' => 'Mai', 'en' => 'May', 'it' => 'Maggio', 'fr' => 'Mai', 'zh' => '五月'],
+            6 => ['de' => 'Juni', 'en' => 'June', 'it' => 'Giugno', 'fr' => 'Juin', 'zh' => '六月'],
+            7 => ['de' => 'Juli', 'en' => 'July', 'it' => 'Luglio', 'fr' => 'Juillet', 'zh' => '七月'],
+            8 => ['de' => 'August', 'en' => 'August', 'it' => 'Agosto', 'fr' => 'Août', 'zh' => '八月'],
+            9 => ['de' => 'September', 'en' => 'September', 'it' => 'Settembre', 'fr' => 'Septembre', 'zh' => '九月'],
+            10 => ['de' => 'Oktober', 'en' => 'October', 'it' => 'Ottobre', 'fr' => 'Octobre', 'zh' => '十月'],
+            11 => ['de' => 'November', 'en' => 'November', 'it' => 'Novembre', 'fr' => 'Novembre', 'zh' => '十一月'],
+            12 => ['de' => 'Dezember', 'en' => 'December', 'it' => 'Dicembre', 'fr' => 'Décembre', 'zh' => '十二月']
+        ];
+    }
+
+    /**
+     * Holt AI-Events für ein bestimmtes Datum
+     */
+    public function getAiEventsForDate($year, $month, $day) {
+        $events = [];
+        $dateStr = sprintf('%04d%02d%02d', $year, $month, $day);
+
+        foreach ($this->aiCategories as $category => $info) {
+            $categoryDir = $this->aiDir . $category . '/';
+            if (!is_dir($categoryDir)) continue;
+
+            // Suche nach Videos für dieses Datum
+            $pattern = $categoryDir . "{$category}_{$dateStr}*.mp4";
+            $videos = glob($pattern);
+
+            if (!empty($videos)) {
+                $events[$category] = [
+                    'icon' => $info['icon'],
+                    'name' => $info['name'],
+                    'color' => $info['color'],
+                    'videos' => $videos,
+                    'count' => count($videos)
+                ];
+            }
+        }
+
+        return $events;
+    }
+
+    /**
+     * Prüft ob AI-Events für ein Datum existieren
+     */
+    public function hasAiEventsForDate($year, $month, $day) {
+        $dateStr = sprintf('%04d%02d%02d', $year, $month, $day);
+
+        foreach (array_keys($this->aiCategories) as $category) {
+            $pattern = $this->aiDir . $category . "/{$category}_{$dateStr}*.mp4";
+            if (count(glob($pattern)) > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Holt kurze Icon-Liste für Kalender-Anzeige
+     */
+    public function getAiIconsForDate($year, $month, $day) {
+        $icons = [];
+        $events = $this->getAiEventsForDate($year, $month, $day);
+
+        foreach ($events as $category => $info) {
+            $icons[] = $info['icon'];
+        }
+
+        return $icons;
+    }
+
+    public function getVideosForDate($year, $month, $day) {
+        $videos = [];
+        $dateStr = sprintf('%04d%02d%02d', $year, $month, $day);
+
+        foreach (glob($this->videoDir . "daily_video_{$dateStr}_*.mp4") as $video) {
+            $videos[] = [
+                'path' => $video,
+                'filename' => basename($video),
+                'filesize' => filesize($video),
+                'time' => date('H:i', filemtime($video))
+            ];
+        }
+
+        return $videos;
+    }
+
+    public function hasVideosForDate($year, $month, $day) {
+        $dateStr = sprintf('%04d%02d%02d', $year, $month, $day);
+        $pattern = $this->videoDir . "daily_video_{$dateStr}_*.mp4";
+        return count(glob($pattern)) > 0;
+    }
+
+    public function displayVisualCalendar() {
+        $currentYear = isset($_GET['cal_year']) ? intval($_GET['cal_year']) : date('Y');
+        $currentMonth = isset($_GET['cal_month']) ? intval($_GET['cal_month']) : date('n');
+        $selectedDay = isset($_GET['cal_day']) ? intval($_GET['cal_day']) : null;
+
+        // Settings für Video-Modus holen
+        $playInPlayer = $this->settingsManager ? $this->settingsManager->get('video_mode.play_in_player') : true;
+        $allowDownload = $this->settingsManager ? $this->settingsManager->get('video_mode.allow_download') : true;
+
+        $output = '<div class="visual-calendar-container">';
+
+        // Navigation
+        $output .= '<div class="calendar-navigation">';
+        $output .= '<button onclick="changeMonth(' . $currentYear . ',' . ($currentMonth - 1) . ')" class="cal-nav-btn">◀</button>';
+        $output .= '<h3>' . $this->monthNames[$currentMonth]['de'] . ' ' . $currentYear . '</h3>';
+        $output .= '<button onclick="changeMonth(' . $currentYear . ',' . ($currentMonth + 1) . ')" class="cal-nav-btn">▶</button>';
+        $output .= '</div>';
+
+        // AI-Legende
+        $output .= '<div class="ai-legend">';
+        $output .= '<span class="legend-title">🤖 AI-Erkennung:</span>';
+        foreach ($this->aiCategories as $cat => $info) {
+            $output .= '<span class="legend-item" title="' . $info['name'] . '">' . $info['icon'] . '</span>';
+        }
+        $output .= '</div>';
+
+        // Kalender-Grid
+        $output .= '<div class="calendar-grid">';
+
+        // Wochentage Header
+        $weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+        foreach ($weekdays as $day) {
+            $output .= '<div class="calendar-weekday">' . $day . '</div>';
+        }
+
+        // Tage des Monats
+        $firstDay = mktime(0, 0, 0, $currentMonth, 1, $currentYear);
+        $daysInMonth = date('t', $firstDay);
+        $dayOfWeek = date('N', $firstDay) - 1;
+
+        // Leere Zellen vor dem ersten Tag
+        for ($i = 0; $i < $dayOfWeek; $i++) {
+            $output .= '<div class="calendar-day empty"></div>';
+        }
+
+        // Tage mit Videos/AI-Events markieren
+        for ($day = 1; $day <= $daysInMonth; $day++) {
+            $hasVideos = $this->hasVideosForDate($currentYear, $currentMonth, $day);
+            $hasAiEvents = $this->hasAiEventsForDate($currentYear, $currentMonth, $day);
+            $aiIcons = $this->getAiIconsForDate($currentYear, $currentMonth, $day);
+            $isSelected = ($selectedDay == $day);
+            $isToday = ($currentYear == date('Y') && $currentMonth == date('n') && $day == date('j'));
+
+            $classes = 'calendar-day';
+            if ($hasVideos) $classes .= ' has-video';
+            if ($hasAiEvents) $classes .= ' has-ai-events';
+            if ($isSelected) $classes .= ' selected';
+            if ($isToday) $classes .= ' today';
+
+            $output .= '<div class="' . $classes . '" onclick="selectDay(' . $currentYear . ',' . $currentMonth . ',' . $day . ')">';
+            $output .= '<span class="day-number">' . $day . '</span>';
+
+            // Video-Indikator
+            if ($hasVideos) {
+                $output .= '<span class="video-indicator">📹</span>';
+            }
+
+            // AI-Event-Icons (max 3 anzeigen)
+            if (!empty($aiIcons)) {
+                $output .= '<div class="ai-icons">';
+                $displayIcons = array_slice($aiIcons, 0, 3);
+                foreach ($displayIcons as $icon) {
+                    $output .= '<span class="ai-icon">' . $icon . '</span>';
+                }
+                if (count($aiIcons) > 3) {
+                    $output .= '<span class="ai-more">+' . (count($aiIcons) - 3) . '</span>';
+                }
+                $output .= '</div>';
+            }
+
+            $output .= '</div>';
+        }
+
+        $output .= '</div>'; // calendar-grid
+
+        // Video-Liste + AI-Events für ausgewählten Tag
+        if ($selectedDay) {
+            $videos = $this->getVideosForDate($currentYear, $currentMonth, $selectedDay);
+            $aiEvents = $this->getAiEventsForDate($currentYear, $currentMonth, $selectedDay);
+
+            $output .= '<div class="day-details">';
+            $output .= '<h4>📅 ' . sprintf('%02d.%02d.%04d', $selectedDay, $currentMonth, $currentYear) . '</h4>';
+
+            // === TAGESVIDEOS ===
+            if (!empty($videos)) {
+                $output .= '<div class="day-videos">';
+                $output .= '<h5>📹 Tagesvideos</h5>';
+                $output .= '<ul class="video-download-list">';
+
+                foreach ($videos as $video) {
+                    $sizeInMb = round($video['filesize'] / (1024 * 1024), 2);
+                    $token = hash_hmac('sha256', $video['path'], session_id());
+                    $videoUrl = '?download_specific_video=' . urlencode($video['path']) . '&token=' . $token;
+
+                    $output .= '<li>';
+                    $output .= '<span class="video-time">🕐 ' . $video['time'] . ' Uhr</span>';
+                    $output .= '<span class="video-size">' . $sizeInMb . ' MB</span>';
+                    $output .= '<div class="video-actions">';
+
+                    // Play Button (wenn aktiviert)
+                    if ($playInPlayer) {
+                        $output .= '<a href="#" onclick="DailyVideoPlayer.playVideo(\'' . htmlspecialchars($video['path']) . '\', ' . ($allowDownload ? 'true' : 'false') . '); return false;" class="play-link">';
+                        $output .= '▶️ Abspielen';
+                        $output .= '</a>';
+                    }
+
+                    // Download Button (wenn aktiviert)
+                    if ($allowDownload) {
+                        $output .= '<a href="' . $videoUrl . '" class="download-link">';
+                        $output .= '⬇️ Download';
+                        $output .= '</a>';
+                    }
+
+                    $output .= '</div>';
+                    $output .= '</li>';
+                }
+
+                $output .= '</ul>';
+                $output .= '</div>';
+            }
+
+            // === AI-EREIGNISSE ===
+            if (!empty($aiEvents)) {
+                $output .= '<div class="ai-events-section">';
+                $output .= '<h5>🤖 AI-erkannte Ereignisse</h5>';
+                $output .= '<div class="ai-events-grid">';
+
+                foreach ($aiEvents as $category => $event) {
+                    $output .= '<div class="ai-event-card" style="border-left: 4px solid ' . $event['color'] . ';">';
+                    $output .= '<div class="ai-event-header">';
+                    $output .= '<span class="ai-event-icon">' . $event['icon'] . '</span>';
+                    $output .= '<span class="ai-event-name">' . $event['name'] . '</span>';
+                    $output .= '</div>';
+
+                    // Videos für dieses Event
+                    $output .= '<div class="ai-event-videos">';
+                    foreach ($event['videos'] as $video) {
+                        $filename = basename($video);
+                        $sizeInMb = round(filesize($video) / (1024 * 1024), 2);
+                        $token = hash_hmac('sha256', $video, session_id());
+
+                        // Play Button
+                        if ($playInPlayer) {
+                            $output .= '<a href="#" onclick="DailyVideoPlayer.playVideo(\'' . htmlspecialchars($video) . '\', ' . ($allowDownload ? 'true' : 'false') . '); return false;" class="ai-video-link">';
+                            $output .= '▶️ Abspielen (' . $sizeInMb . ' MB)';
+                            $output .= '</a>';
+                        }
+
+                        // Download Button
+                        if ($allowDownload) {
+                            $output .= '<a href="?download_ai_video=' . urlencode($video) . '&token=' . $token . '" class="ai-video-link" style="background: #4CAF50;">';
+                            $output .= '⬇️ Download';
+                            $output .= '</a>';
+                        }
+                    }
+                    $output .= '</div>';
+
+                    $output .= '</div>'; // ai-event-card
+                }
+
+                $output .= '</div>'; // ai-events-grid
+                $output .= '</div>'; // ai-events-section
+            }
+
+            // Keine Inhalte
+            if (empty($videos) && empty($aiEvents)) {
+                $output .= '<div class="no-content">';
+                $output .= '<p>📭 Keine Videos oder AI-Ereignisse für diesen Tag verfügbar.</p>';
+                $output .= '</div>';
+            }
+
+            $output .= '</div>'; // day-details
+        }
+
+        $output .= '</div>'; // visual-calendar-container
+
+        return $output;
+    }
+
+    /**
+     * Handler für AI-Video Downloads
+     */
+    public function handleAiVideoDownload() {
+        if (isset($_GET['download_ai_video']) && isset($_GET['token'])) {
+            $videoPath = $_GET['download_ai_video'];
+            $token = $_GET['token'];
+
+            // Token-Validierung
+            $expectedToken = hash_hmac('sha256', $videoPath, session_id());
+            if (!hash_equals($expectedToken, $token)) {
+                echo "Ungültiger Token. Zugriff verweigert.";
+                exit;
+            }
+
+            // Sicherheitsüberprüfung
+            $aiDir = realpath($this->aiDir);
+            $requestedPath = realpath($videoPath);
+
+            if ($requestedPath && strpos($requestedPath, $aiDir) === 0 && file_exists($requestedPath)) {
+                $extension = pathinfo($requestedPath, PATHINFO_EXTENSION);
+                if (strtolower($extension) !== 'mp4') {
+                    echo "Nur MP4-Dateien können heruntergeladen werden.";
+                    exit;
+                }
+
+                header('Content-Description: File Transfer');
+                header('Content-Type: video/mp4');
+                header('Content-Disposition: attachment; filename="'.basename($requestedPath).'"');
+                header('Expires: 0');
+                header('Cache-Control: must-revalidate');
+                header('Pragma: public');
+                header('Content-Length: ' . filesize($requestedPath));
+                readfile($requestedPath);
+                exit;
+            } else {
+                echo "Datei nicht gefunden oder ungültiger Dateipfad.";
+                exit;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+class GuestbookManager {
+    private $entries = [];
+    private $dbFile = 'guestbook.json';
+
+    public function __construct() {
+        if (file_exists($this->dbFile)) {
+            $this->entries = json_decode(file_get_contents($this->dbFile), true);
+        }
+    }
+
+    public function handleFormSubmission() {
+        if (isset($_POST['guestbook'], $_POST['guest-name'], $_POST['guest-message'])) {
+            $this->addEntry($_POST['guest-name'], $_POST['guest-message']);
+            $this->saveEntries();
+        }
+    }
+
+    private function addEntry($name, $message) {
+        $this->entries[] = [
+            'name' => $name,
+            'message' => $message,
+            'date' => date('Y-m-d H:i:s')
+        ];
+    }
+
+    public function deleteEntry($index) {
+        if (isset($this->entries[$index])) {
+            unset($this->entries[$index]);
+            $this->entries = array_values($this->entries); // Re-indizieren des Arrays
+            $this->saveEntries();
+            return true;
+        }
+        return false;
+    }
+
+
+
+    private function saveEntries() {
+        file_put_contents($this->dbFile, json_encode($this->entries));
+    }
+
+    public function displayForm() {
+        return '
+        <form method="post">
+            <input type="hidden" name="guestbook" value="1">
+
+          <label for="guest-name"
+       data-en="Name:"
+       data-de="Name:"
+       data-it="Nome:"
+       data-fr="Nom:"
+       data-zh="姓名：">
+    Name:
+</label>
+<input type="text" id="guest-name" name="guest-name" required>
+<label for="guest-message"
+       data-en="Message:"
+       data-de="Nachricht:"
+       data-it="Messaggio:"
+       data-fr="Message :"
+       data-zh="留言：">
+    Nachricht:
+</label>
+<textarea id="guest-message" name="guest-message" required></textarea>
+<button type="submit"
+        data-en="Add Entry"
+        data-de="Eintrag hinzufügen"
+        data-it="Aggiungi Voce"
+        data-fr="Ajouter une entrée"
+        data-zh="添加留言">
+    Eintrag hinzufügen
+</button>
+
+        </form>';
+    }
+public function displayEntries($isAdmin = false) {
+    $output = '<div id="guestbook-entries">';
+    foreach ($this->entries as $index => $entry) {
+        $output .= "
+        <div class='guestbook-entry'>
+            <h4><i class='fas fa-user'></i> {$entry['name']}</h4>
+            <p><i class='fas fa-comment'></i> {$entry['message']}</p>
+            <small><i class='fas fa-clock'></i> {$entry['date']}</small>";
+            if ($isAdmin) {
+                $output .= "<form method='post' style='display:inline;'>
+                    <input type='hidden' name='action' value='delete_guestbook'>
+                    <input type='hidden' name='delete_entry' value='{$index}'>
+                    <button type='submit' class='delete-btn'>Löschen</button>
+                </form>";
+            }
+
+    }
+    $output .= '</div>';
+    return $output;
+}
+
+
+}
+
+
+class ContactManager {
+    private $adminEmail = 'metacube@gmail.com';
+    private $feedbackFile = 'feedbacks.json';
+    private $gmailUser = 'metacube@gmail.com';
+    private $gmailAppPassword = 'qggk hsxz fdkq jgxa';
+
+    public function displayForm() {
+        return '
+        <form method="post" id="contact-form">
+            <input type="hidden" name="contact" value="1">
+            <label for="name"
+                   data-en="Name:"
+                   data-de="Name:"
+                   data-it="Nome:"
+                   data-fr="Nom:"
+                   data-zh="姓名：">
+                Name:
+            </label>
+            <input type="text" id="name" name="name" required minlength="2">
+
+            <label for="email"
+                   data-en="E-Mail:"
+                   data-de="E-Mail:"
+                   data-it="Email:"
+                   data-fr="E-mail:"
+                   data-zh="电子邮件：">
+                E-Mail:
+            </label>
+            <input type="email" id="email" name="email" required>
+
+            <label for="message"
+                   data-en="Message:"
+                   data-de="Nachricht:"
+                   data-it="Messaggio:"
+                   data-fr="Message:"
+                   data-zh="消息：">
+                Nachricht:
+            </label>
+            <textarea id="message" name="message" required minlength="10"></textarea>
+
+            <button type="submit"
+                    data-en="Send Message"
+                    data-de="Nachricht senden"
+                    data-it="Invia Messaggio"
+                    data-fr="Envoyer le message"
+                    data-zh="发送消息">
+                Nachricht senden
+            </button>
+        </form>
+        <div id="contact-feedback" style="margin-top: 15px;"></div>';
+    }
+
+    public function handleSubmission($name, $email, $message) {
+        if (empty($name) || empty($email) || empty($message)) {
+            return ['success' => false, 'message' => 'Alle Felder sind erforderlich'];
+        }
+
+        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+            return ['success' => false, 'message' => 'Ungültige E-Mail-Adresse'];
+        }
+
+        if (strlen($message) < 10) {
+            return ['success' => false, 'message' => 'Nachricht zu kurz (mindestens 10 Zeichen)'];
+        }
+
+        $name = htmlspecialchars(trim($name), ENT_QUOTES, 'UTF-8');
+        $email = filter_var(trim($email), FILTER_SANITIZE_EMAIL);
+        $message = htmlspecialchars(trim($message), ENT_QUOTES, 'UTF-8');
+
+        $feedback = [
+            'name' => $name,
+            'email' => $email,
+            'message' => $message,
+            'date' => date('Y-m-d H:i:s'),
+            'ip' => $_SERVER['REMOTE_ADDR'] ?? 'unknown',
+            'user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? 'unknown'
+        ];
+
+        $feedbacks = file_exists($this->feedbackFile)
+            ? json_decode(file_get_contents($this->feedbackFile), true)
+            : [];
+
+        if (!is_array($feedbacks)) $feedbacks = [];
+
+        $feedbacks[] = $feedback;
+        file_put_contents($this->feedbackFile, json_encode($feedbacks, JSON_PRETTY_PRINT));
+
+        $mailSent = $this->sendEmailViaGmail($name, $email, $message, $feedback['date'], $feedback['ip']);
+
+        if ($mailSent) {
+            return ['success' => true, 'message' => 'Vielen Dank! Ihre Nachricht wurde gesendet.'];
+        } else {
+            error_log("Mail-Fehler: Nachricht von {$email} konnte nicht gesendet werden");
+            return ['success' => false, 'message' => 'Nachricht wurde gespeichert, aber E-Mail konnte nicht gesendet werden.'];
+        }
+    }
+
+    private function sendEmailViaGmail($name, $email, $message, $date, $ip) {
+        $mail = new PHPMailer(true);
+
+        try {
+            $mail->SMTPDebug = 2;
+            $mail->Debugoutput = function($str, $level) {
+                error_log("PHPMailer Debug: $str");
+            };
+
+            $mail->isSMTP();
+            $mail->Host = 'smtp.gmail.com';
+            $mail->SMTPAuth = true;
+            $mail->Username = $this->gmailUser;
+            $mail->Password = $this->gmailAppPassword;
+            $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
+            $mail->Port = 587;
+
+            $mail->setFrom($this->gmailUser, 'Aurora Livecam');
+            $mail->addAddress($this->adminEmail);
+            $mail->addReplyTo($email, $name);
+
+            $mail->isHTML(true);
+            $mail->CharSet = 'UTF-8';
+            $mail->Subject = '🔔 Neue Kontaktanfrage von ' . $name;
+            $mail->Body = $this->getEmailTemplate($name, $email, $message, $date, $ip);
+
+            $mail->send();
+            return true;
+        } catch (Exception $e) {
+            error_log("PHPMailer Error: {$mail->ErrorInfo}");
+            return false;
+        }
+    }
+
+    public function deleteFeedback($index) {
+        if (!file_exists($this->feedbackFile)) return false;
+
+        $feedbacks = json_decode(file_get_contents($this->feedbackFile), true);
+        if (isset($feedbacks[$index])) {
+            unset($feedbacks[$index]);
+            $feedbacks = array_values($feedbacks);
+            file_put_contents($this->feedbackFile, json_encode($feedbacks, JSON_PRETTY_PRINT));
+            return true;
+        }
+        return false;
+    }
+
+    private function getEmailTemplate($name, $email, $message, $date, $ip) {
+        return "
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <meta charset='UTF-8'>
+            <style>
+                body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; margin: 0; padding: 0; }
+                .container { max-width: 600px; margin: 20px auto; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
+                .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px 20px; text-align: center; }
+                .header h2 { margin: 0; font-size: 24px; }
+                .content { padding: 30px 20px; }
+                .info-box { background: #f9f9f9; border-left: 4px solid #667eea; padding: 15px; margin: 15px 0; border-radius: 5px; }
+                .info-box strong { color: #667eea; display: block; margin-bottom: 5px; }
+                .message-box { background: white; border: 1px solid #e0e0e0; padding: 20px; margin: 20px 0; border-radius: 5px; line-height: 1.8; }
+                .footer { background: #f9f9f9; padding: 20px; text-align: center; font-size: 12px; color: #999; border-top: 1px solid #e0e0e0; }
+                .button { display: inline-block; padding: 12px 30px; background: #4CAF50; color: white; text-decoration: none; border-radius: 5px; margin: 15px 0; font-weight: bold; }
+            </style>
+        </head>
+        <body>
+            <div class='container'>
+                <div class='header'><h2>📧 Neue Kontaktanfrage</h2><p style='margin: 10px 0 0 0; opacity: 0.9;'>Aurora Weather Livecam</p></div>
+                <div class='content'>
+                    <div class='info-box'><strong>👤 Name:</strong>{$name}</div>
+                    <div class='info-box'><strong>📧 E-Mail:</strong><a href='mailto:{$email}' style='color: #667eea;'>{$email}</a></div>
+                    <div class='info-box'><strong>💬 Nachricht:</strong></div>
+                    <div class='message-box'>" . nl2br($message) . "</div>
+                    <div style='text-align: center; margin: 30px 0;'><a href='mailto:{$email}' class='button'>↩️ Direkt antworten</a></div>
+                </div>
+                <div class='footer'>
+                    <p><strong>📅 Gesendet am:</strong> {$date}</p>
+                    <p><strong>🌐 IP-Adresse:</strong> {$ip}</p>
+                    <p style='margin-top: 15px;'>Diese E-Mail wurde automatisch vom Kontaktformular auf<br><a href='https://www.aurora-live-weathercam.com' style='color: #667eea;'>www.aurora-live-weathercam.com</a> generiert.</p>
+                </div>
+            </div>
+        </body>
+        </html>";
+    }
+}
+
+
+class AdminManager {
+    public function isAdmin() {
+        return isset($_SESSION['admin']) && $_SESSION['admin'] === true;
+    }
+
+    public function handleLogin($username, $password) {
+        if ($username === 'admin' && $password === 'sonne4000$$$$Q') {
+            $_SESSION['admin'] = true;
+            return true;
+        }
+        return false;
+    }
+
+    public function handleImageUpload($file) {
+        if (!$this->isAdmin()) return false;
+        if (!isset($file['tmp_name']) || empty($file['tmp_name'])) { echo "Keine Datei."; return false; }
+
+        $target_dir = "uploads/";
+        if (!file_exists($target_dir)) mkdir($target_dir, 0777, true);
+
+        $target_file = $target_dir . basename($file["name"]);
+        $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
+
+        $check = @getimagesize($file["tmp_name"]);
+        if($check === false) { echo "Kein Bild."; return false; }
+        if ($file["size"] > 5000000) { echo "Zu groß (>5MB)."; return false; }
+        if(!in_array($imageFileType, ['jpg','png','jpeg','gif'])) { echo "Falsches Format."; return false; }
+
+        if (move_uploaded_file($file["tmp_name"], $target_file)) {
+            echo "<p style='color:green; font-weight:bold;'>✅ Bild erfolgreich hochgeladen.</p>";
+            return true;
+        } else {
+            echo "Upload Fehler.";
+            return false;
+        }
+    }
+
+    public function displayLoginForm() {
+        return '
+        <form id="login-form" method="post">
+            <input type="hidden" name="admin-login" value="1">
+            <label>Benutzername:</label><input type="text" name="username" required>
+            <label>Passwort:</label><input type="password" name="password" required>
+            <button type="submit">Einloggen</button>
+        </form>';
+    }
+
+    public function displayAdminContent() {
+        global $settingsManager;
+
+        $feedbacks = json_decode(file_get_contents('feedbacks.json') ?: '[]', true);
+
+        // NEUES SETTINGS PANEL
+        $output = '<div id="admin-settings-panel">';
+        $output .= '<h3>⚙️ Anzeige-Einstellungen</h3>';
+
+        // Zuschauer-Anzeige Settings
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>👥 Zuschauer-Anzeige</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Zuschauer-Anzahl anzeigen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-viewer-enabled" ' . ($settingsManager->get('viewer_display.enabled') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Mindestanzahl für Anzeige</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<input type="number" id="setting-min-viewers" class="number-input" min="1" max="100" value="' . $settingsManager->get('viewer_display.min_viewers') . '">';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        // Video-Modus Settings
+        $output .= '<div class="settings-group">';
+        $output .= '<h4>🎬 Video-Modus</h4>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Videos im Player abspielen</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-play-in-player" ' . ($settingsManager->get('video_mode.play_in_player') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+
+        $output .= '<div class="setting-row">';
+        $output .= '<span class="setting-label">Download erlauben</span>';
+        $output .= '<div class="setting-input">';
+        $output .= '<label class="toggle-switch">';
+        $output .= '<input type="checkbox" id="setting-allow-download" ' . ($settingsManager->get('video_mode.allow_download') ? 'checked' : '') . '>';
+        $output .= '<span class="toggle-slider"></span>';
+        $output .= '</label>';
+        $output .= '</div>';
+        $output .= '</div>';
+        $output .= '</div>'; // settings-group
+
+        $output .= '</div>'; // admin-settings-panel
+
+        // Bestehender Admin-Content
+        $output .= '<div style="background:white; padding:20px; border-radius:10px; margin-bottom:30px;">';
+        $output .= '<h3 style="border-bottom:2px solid #667eea; padding-bottom:10px;">📩 Posteingang (Kontaktformular)</h3>';
+
+        if (empty($feedbacks)) {
+            $output .= '<p>Keine Nachrichten vorhanden.</p>';
+        } else {
+            $output .= '<div id="message-list" style="display:grid; gap:15px; max-height:500px; overflow-y:auto;">';
+            foreach ($feedbacks as $index => $feedback) {
+                $ip = isset($feedback['ip']) ? $feedback['ip'] : 'Unbekannt';
+
+                $output .= "<div style='background:#f9f9f9; padding:15px; border-left:4px solid #667eea; border-radius:5px;'>";
+                $output .= "<div style='display:flex; justify-content:space-between; align-items:flex-start;'>";
+                $output .= "<div><strong>{$feedback['name']}</strong> (<a href='mailto:{$feedback['email']}'>{$feedback['email']}</a>)</div>";
+
+                $output .= "<form method='post' onsubmit='return confirm(\"Nachricht wirklich löschen?\");' style='margin:0;'>
+                                <input type='hidden' name='action' value='delete_feedback'>
+                                <input type='hidden' name='delete_index' value='{$index}'>
+                                <button type='submit' class='delete-btn' style='padding:5px 10px; font-size:12px;'>🗑️ Löschen</button>
+                            </form>";
+                $output .= "</div>";
+
+                $output .= "<p style='margin:10px 0; white-space:pre-wrap;'>{$feedback['message']}</p>";
+                $output .= "<small style='color:#888;'>📅 {$feedback['date']} | IP: {$ip}</small>";
+                $output .= "</div>";
+            }
+            $output .= '</div>';
+        }
+        $output .= '</div>';
+
+        $output .= '<div style="background:white; padding:20px; border-radius:10px; margin-bottom:30px;">';
+        $output .= '<h3 style="border-bottom:2px solid #4CAF50; padding-bottom:10px;">🖼️ Bildergalerie verwalten</h3>';
+
+        $output .= $this->displayGalleryImages(true);
+
+        $output .= '<h4 style="margin-top:20px;">⬆️ Neues Bild hochladen</h4>
+        <form action="" method="post" enctype="multipart/form-data" style="background:#f0f0f0; padding:15px; border-radius:5px;">
+            <input type="file" name="fileToUpload" id="fileToUpload" required>
+            <input type="submit" value="Hochladen" name="submit" class="button" style="margin-top:10px;">
+        </form>';
+        $output .= '</div>';
+
+        $output .= '<div style="background:white; padding:20px; border-radius:10px;">';
+        $output .= '<h3>📲 Social Media Links</h3>
+        <form id="social-media-form" method="post">
+            <input type="hidden" name="update-social-media" value="1">
+            <select name="social-platform" required style="padding:8px; margin-right:10px;">
+                <option value="facebook">Facebook</option>
+                <option value="instagram">Instagram</option>
+                <option value="tiktok">TikTok</option>
+            </select>
+            <input type="url" name="social-url" placeholder="Profil URL" required style="padding:8px; width:200px;">
+            <button type="submit" class="button">Link aktualisieren</button>
+        </form>';
+        $output .= '</div>';
+
+        return $output;
+    }
+
+    public function displayGalleryImages($isAdmin = false) {
+        $output = '<div id="gallery-images" style="display:flex; flex-wrap:wrap; gap:10px;">';
+        $files = glob("uploads/*.{jpg,jpeg,png,gif}", GLOB_BRACE);
+
+        if ($files) {
+            foreach($files as $file) {
+                $filename = basename($file);
+                $output .= '<div style="position:relative; display:inline-block;">';
+                $output .= '<img src="'.$file.'" alt="'.$filename.'" style="width:150px; height:100px; object-fit:cover; border-radius:5px; border:1px solid #ddd;">';
+
+                if ($isAdmin) {
+                    $output .= '
+                    <form method="post" onsubmit="return confirm(\'Bild wirklich löschen?\');" style="position:absolute; top:-5px; right:-5px; margin:0;">
+                        <input type="hidden" name="action" value="delete_image">
+                        <input type="hidden" name="image_name" value="'.$filename.'">
+                        <button type="submit" style="background:red; color:white; border:2px solid white; border-radius:50%; width:24px; height:24px; cursor:pointer; font-weight:bold; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 2px 4px rgba(0,0,0,0.3);">X</button>
+                    </form>';
+                }
+
+                $output .= '</div>';
+            }
+        } else {
+            $output .= '<p>Keine Bilder in der Galerie.</p>';
+        }
+        $output .= '</div>';
+        return $output;
+    }
+
+    public function handleSocialMediaUpdate($platform, $url) {
+        $socialLinks = json_decode(file_get_contents('social_links.json') ?: '{}', true);
+        $socialLinks[$platform] = $url;
+        file_put_contents('social_links.json', json_encode($socialLinks));
+    }
+}
+
+
+class VideoArchiveManager {
+    private $videoDir;
+    private $monthNames;
+
+    public function __construct($videoDir = './videos/') {
+        $this->videoDir = $videoDir;
+        $this->monthNames = [
+            '01' => 'Januar', '02' => 'Februar', '03' => 'März', '04' => 'April',
+            '05' => 'Mai', '06' => 'Juni', '07' => 'Juli', '08' => 'August',
+            '09' => 'September', '10' => 'Oktober', '11' => 'November', '12' => 'Dezember'
+        ];
+    }
+
+    public function getVideosGroupedByDate() {
+        $videos = [];
+
+        foreach (glob($this->videoDir . 'daily_video_*.mp4') as $video) {
+            if (preg_match('/daily_video_(\d{8})_\d{6}\.mp4/', basename($video), $matches)) {
+                $dateStr = $matches[1];
+                $year = substr($dateStr, 0, 4);
+                $month = substr($dateStr, 4, 2);
+                $day = substr($dateStr, 6, 2);
+
+                $videos[$year][$month][] = [
+                    'path' => $video,
+                    'filename' => basename($video),
+                    'day' => $day,
+                    'filesize' => filesize($video),
+                    'modified' => filemtime($video)
+                ];
+            }
+        }
+
+        foreach ($videos as $year => $months) {
+            foreach ($months as $month => $days) {
+                usort($videos[$year][$month], function($a, $b) {
+                    return $b['day'] - $a['day'];
+                });
+            }
+        }
+
+        return $videos;
+    }
+
+    public function handleSpecificVideoDownload() {
+        if (isset($_GET['download_specific_video']) && isset($_GET['token'])) {
+            $videoPath = $_GET['download_specific_video'];
+            $token = $_GET['token'];
+
+            $expectedToken = hash_hmac('sha256', $videoPath, session_id());
+            if (!hash_equals($expectedToken, $token)) {
+                echo "Ungültiger Token. Zugriff verweigert.";
+                exit;
+            }
+
+            $videoDir = realpath($this->videoDir);
+            $requestedPath = realpath($videoPath);
+
+            if ($requestedPath && strpos($requestedPath, $videoDir) === 0 && file_exists($requestedPath)) {
+                $extension = pathinfo($requestedPath, PATHINFO_EXTENSION);
+                if (strtolower($extension) !== 'mp4') {
+                    echo "Nur MP4-Dateien können heruntergeladen werden.";
+                    exit;
+                }
+
+                header('Content-Description: File Transfer');
+                header('Content-Type: video/mp4');
+                header('Content-Disposition: attachment; filename="'.basename($requestedPath).'"');
+                header('Expires: 0');
+                header('Cache-Control: must-revalidate');
+                header('Pragma: public');
+                header('Content-Length: ' . filesize($requestedPath));
+                readfile($requestedPath);
+                exit;
+            } else {
+                echo "Datei nicht gefunden oder ungültiger Dateipfad.";
+                exit;
+            }
+        }
+    }
+}
+
+
+$webcamManager = new WebcamManager();
+$imageFilesJson = $webcamManager->getImageFiles();
+$guestbookManager = new GuestbookManager();
+$contactManager = new ContactManager();
+$adminManager = new AdminManager();
+
+$videoArchiveManager = new VideoArchiveManager('./videos/');
+$videoArchiveManager->handleSpecificVideoDownload();
+
+// AI-Video Download Handler
+if (isset($_GET['download_ai_video']) && isset($_GET['token'])) {
+    $videoPath = $_GET['download_ai_video'];
+    $token = $_GET['token'];
+
+    $expectedToken = hash_hmac('sha256', $videoPath, session_id());
+    if (hash_equals($expectedToken, $token)) {
+        $aiDir = realpath('./ai/');
+        $requestedPath = realpath($videoPath);
+
+        if ($requestedPath && strpos($requestedPath, $aiDir) === 0 && file_exists($requestedPath)) {
+            header('Content-Description: File Transfer');
+            header('Content-Type: video/mp4');
+            header('Content-Disposition: attachment; filename="'.basename($requestedPath).'"');
+            header('Expires: 0');
+            header('Cache-Control: must-revalidate');
+            header('Pragma: public');
+            header('Content-Length: ' . filesize($requestedPath));
+            readfile($requestedPath);
+            exit;
+        }
+    }
+    echo "Download fehlgeschlagen.";
+    exit;
+}
+
+if (isset($_GET['action'])) {
+    switch ($_GET['action']) {
+        case 'snapshot':
+            $webcamManager->captureSnapshot();
+            break;
+        case 'sequence':
+            $webcamManager->captureVideoSequence();
+            break;
+    }
+}
+
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    // Viewer Heartbeat
+    if (isset($_POST['action']) && $_POST['action'] === 'viewer_heartbeat') {
+        $viewerCounter->handleHeartbeat();
+    }
+
+    // GÄSTEBUCH
+    if (isset($_POST['guestbook'])) {
+        $guestbookManager->handleFormSubmission();
+        header("Location: " . $_SERVER['PHP_SELF'] . "#guestbook");
+        exit;
+    }
+
+    // KONTAKTFORMULAR
+    elseif (isset($_POST['contact'])) {
+        $result = $contactManager->handleSubmission($_POST['name'], $_POST['email'], $_POST['message']);
+
+        if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
+            header('Content-Type: application/json');
+            echo json_encode($result);
+            exit;
+        }
+        $_SESSION['contact_result'] = $result;
+        header('Location: ' . $_SERVER['PHP_SELF'] . '#kontakt');
+        exit;
+    }
+
+    // ADMIN LOGIN
+    elseif (isset($_POST['admin-login'])) {
+        $adminManager->handleLogin($_POST['username'], $_POST['password']);
+        header('Location: ' . $_SERVER['PHP_SELF'] . '#admin');
+        exit;
+    }
+
+    // ADMIN AKTIONEN
+    elseif ($adminManager->isAdmin()) {
+        if (isset($_POST['action']) && $_POST['action'] === 'delete_guestbook' && isset($_POST['delete_entry'])) {
+            $guestbookManager->deleteEntry(intval($_POST['delete_entry']));
+            header("Location: " . $_SERVER['PHP_SELF'] . "#guestbook");
+            exit;
+        }
+
+        if (isset($_POST['action']) && $_POST['action'] === 'delete_feedback' && isset($_POST['delete_index'])) {
+            $contactManager->deleteFeedback(intval($_POST['delete_index']));
+            header("Location: " . $_SERVER['PHP_SELF'] . "#admin");
+            exit;
+        }
+
+        if (isset($_POST['action']) && $_POST['action'] === 'delete_image' && isset($_POST['image_name'])) {
+            $filename = basename($_POST['image_name']);
+            $filepath = "uploads/" . $filename;
+            if (file_exists($filepath)) { unlink($filepath); }
+            header("Location: " . $_SERVER['PHP_SELF'] . "#admin");
+            exit;
+        }
+
+        if (isset($_POST['update-social-media'])) {
+            $adminManager->handleSocialMediaUpdate($_POST['social-platform'], $_POST['social-url']);
+            header("Location: " . $_SERVER['PHP_SELF'] . "#admin");
+            exit;
+        }
+
+        if (isset($_FILES["fileToUpload"])) {
+            $adminManager->handleImageUpload($_FILES["fileToUpload"]);
+        }
+    }
+}
+
+// Viewer-Anzeige Einstellungen für JavaScript
+$viewerCount = $viewerCounter->getInitialCount();
+$showViewers = $settingsManager->shouldShowViewers($viewerCount);
+$minViewersToShow = $settingsManager->get('viewer_display.min_viewers');
+?>
+
+
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- SEO-optimierter Title -->
+    <title><?php echo $siteConfig['siteTitle']; ?></title>
+
+    <!-- SEO Meta-Tags -->
+    <meta name="description" content="Live Webcam Zürich Oberland mit Blick auf Zürichsee. 24/7 Livestream, Tagesvideos, AI-Wettererkennung. Patrouille Suisse Trainingsflüge jeden Montag live verfolgen. Webcam Dürnten auf 616m.">
+    <meta name="keywords" content="Webcam Zürich, Zürichsee Webcam, Zürich Oberland Webcam, Live Webcam Schweiz, Patrouille Suisse Livestream, Wetter Zürich live, Webcam Dürnten, Rapperswil Webcam, Schweizer Alpen Webcam, Wetter Zürich Oberland, <?php echo $siteConfig['siteName']; ?> Webcam, Timelapse Zürich">
+    <meta name="author" content="<?php echo $siteConfig['author']; ?>">
+    <meta name="robots" content="index, follow, max-image-preview:large">
+    <link rel="canonical" href="<?php echo $siteConfig['domainUrl']; ?>/">
+
+    <!-- Lokales SEO -->
+    <meta name="geo.region" content="CH-ZH">
+    <meta name="geo.placename" content="Dürnten, Zürich Oberland">
+    <meta name="geo.position" content="47.278;8.870">
+    <meta name="ICBM" content="47.278, 8.870">
+
+    <!-- Open Graph für Social Media -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Zürich Oberland Webcam Live - Zürichsee & Patrouille Suisse">
+    <meta property="og:description" content="24/7 Live-Webcam aus dem Zürcher Oberland auf 616m Höhe. Patrouille Suisse Trainings jeden Montag. AI-Wettererkennung für Sonnenaufgänge, Regenbögen und mehr.">
+    <meta property="og:image" content="<?php echo $siteConfig['domainUrl']; ?>/og-image.jpg">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:url" content="<?php echo $siteConfig['domainUrl']; ?>/">
+    <meta property="og:site_name" content="<?php echo $siteConfig['siteNameFull']; ?> Zürich">
+    <meta property="og:locale" content="de_CH">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Zürich Oberland Webcam Live | Patrouille Suisse & Zürichsee">
+    <meta name="twitter:description" content="24/7 Live-Webcam mit AI-Wettererkennung. Jeden Montag Patrouille Suisse Trainingsflüge live!">
+    <meta name="twitter:image" content="<?php echo $siteConfig['domainUrl']; ?>/og-image.jpg">
+
+    <meta name="google-site-verification" content="gzs2HE9hbMKbHYKSf2hZjXvDd7iDUeA4Jb2zngzNIZM" />
+
+    <!-- Schema.org JSON-LD für Webcam -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "<?php echo $siteConfig['siteNameFull']; ?> Zürich Oberland",
+        "alternateName": "<?php echo $siteConfig['alternateName']; ?>",
+        "url": "<?php echo $siteConfig['domainUrl']; ?>",
+        "description": "24/7 Live Webcam aus dem Zürcher Oberland mit Blick auf den Zürichsee. AI-gestützte Wettererkennung und Patrouille Suisse Trainingsflüge.",
+        "inLanguage": "de-CH"
+    }
+    </script>
+
+    <!-- Schema.org für Lokales Business -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "name": "<?php echo $siteConfig['siteNameFull']; ?>",
+        "description": "Live Webcam Service aus dem Zürcher Oberland mit 24/7 Livestream, Tagesvideos und AI-Wettererkennung",
+        "url": "<?php echo $siteConfig['domainUrl']; ?>",
+        "address": {
+            "@type": "PostalAddress",
+            "addressLocality": "Dürnten",
+            "addressRegion": "Zürich",
+            "addressCountry": "CH"
+        },
+        "geo": {
+            "@type": "GeoCoordinates",
+            "latitude": "47.278",
+            "longitude": "8.870",
+            "elevation": "616"
+        },
+        "areaServed": {
+            "@type": "GeoCircle",
+            "geoMidpoint": {
+                "@type": "GeoCoordinates",
+                "latitude": "47.278",
+                "longitude": "8.870"
+            },
+            "geoRadius": "50000"
+        }
+    }
+    </script>
+
+    <!-- Schema.org für Video/Livestream -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "VideoObject",
+        "name": "Zürich Oberland Live Webcam Stream",
+        "description": "24/7 Live-Webcam aus dem Zürcher Oberland mit Blick auf Zürichsee und Schweizer Alpen",
+        "thumbnailUrl": "<?php echo $siteConfig['domainUrl']; ?>/og-image.jpg",
+        "uploadDate": "2024-01-01",
+        "contentUrl": "<?php echo $siteConfig['domainUrl']; ?>/test_video.m3u8",
+        "embedUrl": "<?php echo $siteConfig['domainUrl']; ?>/",
+        "publication": {
+            "@type": "BroadcastEvent",
+            "isLiveBroadcast": true,
+            "startDate": "2024-01-01"
+        }
+    }
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <meta name="theme-color" content="#667eea">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <link rel="stylesheet" href="css/player-controls.css">
+
+<style>
+/* ========== HAUPTSTYLES (gekürzt für Übersicht) ========== */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #333;
+    line-height: 1.6;
+    background-image: url('main.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* Screen-reader only (Accessibility) */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
+.section { padding: 80px 0; background-color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; position: relative; z-index: 10; }
+.section h2 { font-size: 36px; margin-bottom: 40px; text-align: center; color: #333; }
+
+header {
+    background-color: rgba(255, 255, 255, 0.95);
+    padding: 10px 0;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+header .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.logo img { height: 50px; }
+.logo-wrapper { display: flex; align-items: center; gap: 15px; }
+.swiss-cross {
+    width: 28px;
+    height: 28px;
+    background: #d52b1e;
+    border-radius: 6px;
+    position: relative;
+    box-shadow: 0 4px 10px rgba(213, 43, 30, 0.4);
+}
+.swiss-cross::before,
+.swiss-cross::after {
+    content: "";
+    position: absolute;
+    background: #fff;
+}
+.swiss-cross::before {
+    width: 16px;
+    height: 4px;
+    top: 12px;
+    left: 6px;
+    border-radius: 2px;
+}
+.swiss-cross::after {
+    width: 4px;
+    height: 16px;
+    top: 6px;
+    left: 12px;
+    border-radius: 2px;
+}
+
+nav ul { list-style: none; padding: 0; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0; }
+nav ul li { margin: 5px 10px; }
+nav ul li a { text-decoration: none; color: #333; font-weight: bold; padding: 5px 10px; transition: color 0.3s; }
+nav ul li a:hover { color: #4CAF50; }
+.theme-switcher {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.85);
+    padding: 6px 10px;
+    border-radius: 999px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+.theme-switcher span {
+    font-size: 12px;
+    font-weight: 700;
+    color: #333;
+    letter-spacing: 0.4px;
+}
+.theme-button {
+    border: none;
+    background: transparent;
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-weight: 600;
+    cursor: pointer;
+    color: #333;
+    transition: all 0.2s ease;
+}
+.theme-button.active {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: #fff;
+    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.35);
+}
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin: 10px;
+    background-color: #4CAF50;
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+    font-weight: bold;
+    text-align: center;
+    border: none;
+    cursor: pointer;
+}
+.button:hover { background-color: #45a049; }
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+    margin-bottom: 20px;
+    background-color: #000;
+    border-radius: 8px;
+    z-index: 30;
+}
+
+#live-video-wrapper, #timelapse-viewer, #daily-video-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.video-zoom-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+    transform-origin: center center;
+}
+
+#webcam-player, #timelapse-image, #daily-video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.video-info-bar {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    margin-top: 15px;
+    margin-bottom: 25px;
+    padding: 0 10px;
+    gap: 15px;
+}
+
+.info-badge {
+    background: #ffffff;
+    padding: 8px 20px;
+    border-radius: 50px;
+    color: #333;
+    font-family: 'Arial', sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    border: 1px solid #e0e0e0;
+    height: 40px;
+    white-space: nowrap;
+}
+.zoom-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: center;
+    margin: 15px 0 5px;
+    padding: 10px 16px;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 999px;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+}
+.zoom-controls label {
+    font-weight: 700;
+    font-size: 14px;
+    color: #333;
+    margin: 0;
+}
+.zoom-slider {
+    width: 220px;
+}
+.zoom-value {
+    font-weight: 700;
+    min-width: 50px;
+    text-align: center;
+    color: #333;
+}
+.zoom-btn {
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.zoom-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+.zoom-btn:active {
+    transform: scale(0.95);
+}
+.video-container {
+    cursor: default;
+}
+.video-container.zoomed {
+    cursor: grab;
+}
+.video-container.zoomed:active {
+    cursor: grabbing;
+}
+
+.tech-stat { justify-self: start; font-family: monospace; color: #555; }
+.bitrate-icon { color: #4CAF50; }
+.viewer-stat { justify-self: center; background: #fff5f5; border-color: #ffcccc; color: #d32f2f; }
+
+.live-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #ff4136;
+    border-radius: 50%;
+    display: inline-block;
+    animation: pulse-red 2s infinite;
+}
+
+@keyframes pulse-red {
+    0% { box-shadow: 0 0 0 0 rgba(255, 65, 54, 0.7); }
+    70% { box-shadow: 0 0 0 6px rgba(255, 65, 54, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(255, 65, 54, 0); }
+}
+
+.title-section {
+    text-align: center;
+    padding: 50px 0;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
+    position: relative;
+    z-index: 20;
+}
+
+.flag-title-container { display: flex; justify-content: center; align-items: center; gap: 20px; }
+.flag-image { width: 50px; height: auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 3px; }
+.title-section h1 { font-size: 2.5em; margin-bottom: 10px; }
+.title-section p { font-size: 1.2em; }
+
+/* Kalender Styles */
+.visual-calendar-container {
+    max-width: 800px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+}
+
+.calendar-navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 10px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 8px;
+    color: white;
+}
+
+.cal-nav-btn {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 24px;
+    padding: 5px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 20px; }
+.calendar-weekday { text-align: center; font-weight: bold; padding: 10px; background: #f0f0f0; border-radius: 5px; color: #666; }
+
+.calendar-day {
+    aspect-ratio: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+    min-height: 60px;
+}
+
+.calendar-day:hover:not(.empty) { transform: scale(1.05); box-shadow: 0 3px 10px rgba(0,0,0,0.15); border-color: #667eea; }
+.calendar-day.empty { background: transparent; border: none; cursor: default; }
+.calendar-day.has-video { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-color: #2196F3; font-weight: bold; }
+.calendar-day.selected { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-color: #764ba2; transform: scale(1.1); }
+.calendar-day.today { border: 3px solid #4CAF50; }
+
+.day-number { font-size: 18px; font-weight: 600; }
+.video-indicator { position: absolute; bottom: 2px; right: 2px; font-size: 12px; }
+
+.day-details { background: #f9f9f9; border-radius: 8px; padding: 20px; margin-top: 20px; }
+.day-details h4 { color: #333; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #667eea; }
+
+.video-download-list { list-style: none; padding: 0; }
+.video-download-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px; margin-bottom: 10px; background: white; border-radius: 6px; flex-wrap: wrap; gap: 10px; }
+.video-actions { display: flex; gap: 10px; }
+
+.play-link {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: all 0.3s;
+}
+.play-link:hover { transform: scale(1.05); }
+
+.download-link {
+    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: all 0.3s;
+}
+.download-link:hover { transform: scale(1.05); }
+
+/* Forms */
+form { display: grid; gap: 20px; background-color: rgba(255, 255, 255, 0.7); padding: 25px; border-radius: 8px; max-width: 600px; margin: 0 auto; }
+input, textarea, select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; background-color: white; }
+textarea { min-height: 120px; resize: vertical; }
+label { font-weight: bold; margin-bottom: 5px; display: block; }
+
+button[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }
+button[type="submit"]:hover { background-color: #45a049; }
+
+.delete-btn { background-color: #ff4136; color: white; border: none; padding: 5px 10px; cursor: pointer; font-size: 0.8em; margin-left: 10px; border-radius: 3px; }
+
+/* Guestbook */
+.guestbook-entry { background-color: #f9f9f9; border-left: 5px solid #4CAF50; margin-bottom: 20px; padding: 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+
+/* Gallery */
+.gallery-wrapper { position: relative; max-width: 100%; margin: 0 auto; padding: 0 50px; }
+#gallery-images { display: flex; flex-wrap: nowrap !important; overflow-x: auto; gap: 15px; scroll-behavior: smooth; padding: 10px 0; scrollbar-width: none; }
+#gallery-images::-webkit-scrollbar { display: none; }
+#gallery-images img { flex: 0 0 auto; width: 250px !important; height: 180px !important; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform 0.3s; }
+#gallery-images img:hover { transform: scale(1.05); }
+
+.gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; }
+.gallery-nav-btn.left { left: 0; }
+.gallery-nav-btn.right { right: 0; }
+
+/* Modal */
+.modal { display: none; position: fixed; z-index: 1000; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
+.modal-content { margin: auto; display: block; width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 5px; }
+.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 1010; }
+.modal-prev, .modal-next { cursor: pointer; position: absolute; top: 50%; padding: 16px; color: white; font-weight: bold; font-size: 40px; z-index: 1010; background-color: rgba(0, 0, 0, 0.3); }
+.modal-next { right: 0; }
+.modal-prev { left: 0; }
+
+/* Language Switch */
+#language-switch { position: fixed; top: 10px; right: 10px; z-index: 1000; background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; padding: 5px; }
+.lang-button { background: none; border: none; cursor: pointer; padding: 5px; opacity: 0.7; transition: opacity 0.3s; margin: 0 2px; }
+.lang-button:hover, .lang-button.active { opacity: 1; }
+.flag-icon { width: 30px; height: 20px; object-fit: cover; border-radius: 2px; }
+
+/* Footer */
+footer { background-color: rgba(51, 51, 51, 0.9); color: #fff; padding: 40px 0; text-align: center; margin-top: 40px; }
+.footer-links { margin-bottom: 20px; }
+.footer-links a { color: #fff; text-decoration: none; margin: 0 15px; transition: color 0.3s; }
+.footer-links a:hover { color: #4CAF50; }
+
+/* QR Code */
+#qrcode { display: flex; justify-content: center; margin-top: 20px; cursor: pointer; }
+#qrcode img { border: 10px solid white; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
+
+/* AI Events */
+.ai-legend { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 15px; background: #f8f9fa; border-radius: 8px; margin-bottom: 15px; flex-wrap: wrap; }
+.ai-legend .legend-title { font-weight: bold; color: #667eea; }
+.ai-icons { display: flex; gap: 2px; justify-content: center; margin-top: 2px; }
+.ai-icon { font-size: 10px; }
+
+.ai-events-section { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #ddd; }
+.ai-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 10px; }
+.ai-event-card { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+.ai-event-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.ai-event-icon { font-size: 28px; }
+.ai-event-name { font-weight: bold; color: #333; }
+.ai-event-videos { display: flex; flex-direction: column; gap: 5px; }
+.ai-video-link { display: inline-block; padding: 8px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 5px; font-size: 13px; }
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container { padding: 0 15px; }
+    .section { padding: 40px 0; }
+    nav ul { flex-direction: column; align-items: center; }
+    header .container { justify-content: center; }
+    .theme-switcher { width: 100%; justify-content: center; }
+    .flag-title-container { flex-direction: column; }
+    .title-section h1 { font-size: 1.8em; }
+    .video-info-bar { display: flex; flex-direction: column-reverse; gap: 10px; }
+    .info-badge { width: 100%; }
+    .calendar-grid { gap: 2px; }
+    .calendar-day { min-height: 45px; }
+    .day-number { font-size: 14px; }
+}
+
+@media (max-width: 480px) {
+    .section h2 { font-size: 28px; }
+    .button { width: 100%; margin: 5px 0; }
+}
+
+/* WERBEBANNER STYLES */
+.recommendation-banner {
+    text-align: center;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.recommendation-banner h2 {
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.sponsor-logos {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ad-row {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.ad-item {
+    margin: 0 10px 10px;
+    text-align: center;
+}
+
+.ad-item img {
+    max-height: 40px;  /* <-- DAS IST DIE WICHTIGE ZEILE */
+    width: auto;
+    transition: transform 0.3s;
+}
+
+.ad-item img:hover {
+    transform: scale(1.1);
+}
+
+/* ========== DESIGN SWITCH THEMES ========== */
+.sun-overlay {
+    position: fixed;
+    inset: -20% auto auto -10%;
+    width: 320px;
+    height: 320px;
+    background: radial-gradient(circle at center, rgba(255, 214, 98, 0.95), rgba(255, 185, 64, 0.65) 45%, rgba(255, 185, 64, 0) 70%);
+    filter: blur(2px);
+    border-radius: 50%;
+    z-index: 1;
+    pointer-events: none;
+    animation: sunFloat 12s ease-in-out infinite;
+}
+@keyframes sunFloat {
+    0% { transform: translate(0, 0) scale(1); opacity: 0.9; }
+    50% { transform: translate(40px, 10px) scale(1.08); opacity: 1; }
+    100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
+}
+
+body.theme-legacy .sun-overlay { display: none; }
+
+body.theme-alpine {
+    background-image: linear-gradient(135deg, rgba(221, 234, 255, 0.8), rgba(196, 223, 255, 0.9)), url('main.jpg');
+    color: #102a43;
+}
+body.theme-alpine header {
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(8px);
+}
+body.theme-alpine .section {
+    background: rgba(255, 255, 255, 0.88);
+    border: 1px solid rgba(180, 205, 230, 0.6);
+}
+body.theme-alpine .button {
+    background: linear-gradient(135deg, #2f80ed, #56ccf2);
+}
+body.theme-alpine nav ul li a:hover { color: #2f80ed; }
+body.theme-alpine .info-badge { border-color: #d2e3f9; }
+
+body.theme-neo {
+    background-image: radial-gradient(circle at top, rgba(40, 90, 140, 0.7), rgba(7, 16, 34, 0.95) 55%), url('main.jpg');
+    color: #e6f1ff;
+}
+body.theme-neo header {
+    background: rgba(7, 16, 34, 0.9);
+    border-bottom: 1px solid rgba(96, 165, 250, 0.3);
+}
+body.theme-neo nav ul li a { color: #e6f1ff; }
+body.theme-neo nav ul li a:hover { color: #60a5fa; }
+body.theme-neo .section {
+    background: rgba(7, 16, 34, 0.75);
+    border: 1px solid rgba(96, 165, 250, 0.2);
+}
+body.theme-neo .button {
+    background: linear-gradient(135deg, #00c6ff, #0072ff);
+}
+body.theme-neo .info-badge {
+    background: rgba(15, 30, 60, 0.9);
+    color: #e6f1ff;
+    border-color: rgba(96, 165, 250, 0.4);
+}
+body.theme-neo footer {
+    background: rgba(7, 16, 34, 0.95);
+}
+/* WERBEBANNER STYLES */
+.recommendation-banner {
+    text-align: center;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.recommendation-banner h2 {
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.sponsor-logos {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ad-row {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.ad-item {
+    margin: 0 10px 10px;
+    text-align: center;
+}
+
+.ad-item img {
+    max-height: 40px;  /* <-- DAS IST DIE WICHTIGE ZEILE */
+    width: auto;
+    transition: transform 0.3s;
+}
+
+.ad-item img:hover {
+    transform: scale(1.1);
+}
+
+
+</style>
+
+    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
+</head>
+<body class="theme-legacy">
+
+<div class="sun-overlay" aria-hidden="true"></div>
+
+<div id="language-switch">
+    <button id="lang-de" class="lang-button" aria-label="Deutsch">
+        <img src="images/swiss-flag-new.ico" alt="Schweizer Flagge" class="flag-icon">
+    </button>
+    <button id="lang-en" class="lang-button" aria-label="English">
+        <img src="images/uk-flag.ico" alt="UK Flagge" class="flag-icon">
+    </button>
+    <button id="lang-it" class="lang-button" aria-label="Italiano">
+        <img src="images/italian-flag.ico" alt="Flagge Italien" class="flag-icon">
+    </button>
+    <button id="lang-fr" class="lang-button" aria-label="Français">
+        <img src="images/french-flag.ico" alt="Flagge Frankreich" class="flag-icon">
+    </button>
+    <button id="lang-zh" class="lang-button" aria-label="中文">
+        <img src="images/chinese-flag.ico" alt="中国国旗" class="flag-icon">
+    </button>
+</div>
+
+<header>
+    <div class="container">
+        <div class="logo-wrapper">
+            <div class="logo">
+                <img src="<?php echo $siteConfig['logo']; ?>" alt="<?php echo $siteConfig['siteNameFull']; ?> - 24/7 Zürich Oberland Webcam Logo">
+            </div>
+            <div class="swiss-cross" aria-hidden="true"></div>
+        </div>
+        <nav>
+            <ul>
+                <li><a href="#webcams" data-en="Webcam" data-de="Webcam" data-it="Webcam" data-fr="Webcam" data-zh="摄像头">Webcam</a></li>
+                <li><a href="#guestbook" data-en="Guestbook" data-de="Gästebuch" data-it="Libro degli ospiti" data-fr="Livre d'or" data-zh="留言簿">Gästebuch</a></li>
+                <li><a href="#kontakt" data-en="Contact" data-de="Kontakt" data-it="Contatto" data-fr="Contact" data-zh="联系">Kontakt</a></li>
+                <li><a href="#gallery" data-en="Gallery" data-de="Galerie" data-it="Galleria" data-fr="Galerie" data-zh="图库">Galerie</a></li>
+                <li><a href="#archive" data-en="Video Archive" data-de="Videoarchiv" data-it="Archivio video" data-fr="Archive vidéo" data-zh="视频档案">Videoarchiv</a></li>
+                <?php if ($adminManager->isAdmin()): ?>
+                <li><a href="#admin" data-en="Admin" data-de="Admin" data-it="Admin" data-fr="Admin" data-zh="管理员">Admin</a></li>
+                <?php endif; ?>
+            </ul>
+        </nav>
+        <div class="theme-switcher" aria-label="Design wechseln">
+            <span data-en="Design" data-de="Design" data-it="Design" data-fr="Design" data-zh="设计">Design</span>
+            <button class="theme-button active" data-theme="theme-legacy" type="button" data-en="Classic" data-de="Klassisch" data-it="Classico" data-fr="Classique" data-zh="经典">Klassisch</button>
+            <button class="theme-button" data-theme="theme-alpine" type="button" data-en="Alpine" data-de="Alpin" data-it="Alpino" data-fr="Alpin" data-zh="高山">Alpin</button>
+            <button class="theme-button" data-theme="theme-neo" type="button" data-en="Modern" data-de="Modern" data-it="Moderno" data-fr="Moderne" data-zh="现代">Modern</button>
+        </div>
+    </div>
+</header>
+
+<div class="main-content">
+    <section class="title-section">
+        <div class="container">
+            <div class="flag-title-container">
+                <img src="images/swiss.jpg" alt="Schweizer Flagge" class="flag-image">
+                <h1 data-en="<?php echo $siteConfig['welcomeEn']; ?>" data-de="<?php echo $siteConfig['welcomeDe']; ?>" data-it="Benvenuti su <?php echo $siteConfig['siteNameFullEn']; ?>" data-fr="Bienvenue sur <?php echo $siteConfig['siteNameFullEn']; ?>" data-zh="欢迎来到<?php echo $siteConfig['siteNameFullEn']; ?>">
+                    <?php echo $siteConfig['welcomeDe']; ?>
+                </h1>
+                <img src="local-flag.jpg" alt="Ortsflagge" class="flag-image">
+            </div>
+            <p data-en="Experience fascinating views of the Zurich region - in real time!"
+               data-de="Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!"
+               data-it="Vivi affascinanti panorami della regione di Zurigo in tempo reale!"
+               data-fr="Découvrez des panoramas fascinants de la région de Zurich en temps réel !"
+               data-zh="实时欣赏苏黎世地区的迷人景色！">
+                Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!
+            </p>
+        </div>
+    </section>
+
+    <div class="banner-container">
+        <div class="recommendation-banner">
+            <h2>Unsere Empfehlungen</h2>
+            <div class="sponsor-logos">
+                <div class="ad-row">
+                    <div class="ad-item"><a href="https://pizzaforyou.ch/" target="_blank"><img src="pizza.png" alt="Pizza for You"></a></div>
+                    <div class="ad-item"><a href="#"><img src="werbung.png" alt="Werbung"></a></div>
+                    <div class="ad-item"><a href="#"><img src="werbung.png" alt="Werbung"></a></div>
+                    <div class="ad-item"><a href="#"><img src="werbung.png" alt="Werbung"></a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- WEBCAM SECTION -->
+<section id="webcams" class="section">
+    <div class="container">
+        <!-- VIDEO PLAYER -->
+        <div class="video-container" style="border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
+            <?php echo $webcamManager->displayWebcam(); ?>
+
+            <!-- Timelapse Overlay -->
+            <div id="timelapse-viewer" style="display: none;">
+                <div id="timelapse-wrapper" class="video-zoom-wrapper">
+                    <img id="timelapse-image" src="" alt="Zeitraffer Wetter Zürich Oberland - Aktuelle Aufnahme" style="width: 100%; height: 100%; object-fit: cover;">
+                </div>
+                <div id="timelapse-time-overlay"></div>
+            </div>
+
+            <!-- Daily Video Player (für Tagesvideos) -->
+            <div id="daily-video-player" style="display: none;">
+                <div id="daily-video-wrapper" class="video-zoom-wrapper">
+                    <video id="daily-video" controls playsinline style="width: 100%; height: 100%; object-fit: contain;">
+                        <source src="" type="video/mp4">
+                    </video>
+                </div>
+            </div>
+        </div>
+
+        <!-- TIMELAPSE CONTROLS (NEU!) -->
+        <div id="timelapse-controls"></div>
+
+        <!-- 
+ CONTROLS -->
+        <div id="zoom-controls" class="zoom-controls" aria-label="Zoom Steuerung">
+            <button type="button" onclick="adjustZoom(-0.5)" class="zoom-btn" title="Zoom out">−</button>
+            <input type="range" id="zoom-range" class="zoom-slider" min="1" max="4" value="1" step="0.5">
+            <span id="zoom-value" class="zoom-value">1.0x</span>
+            <button type="button" onclick="adjustZoom(0.5)" class="zoom-btn" title="Zoom in">+</button>
+            <button type="button" onclick="resetZoom()" class="zoom-btn" title="Reset">⟲</button>
+        </div>
+
+        <!-- VIDEO PLAYER CONTROLS (für Tagesvideos) -->
+        <div id="daily-video-controls" style="display: none; text-align: center; margin-top: 15px;">
+            <button id="dvp-back-live" class="button" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                <i class="fas fa-video"></i> Zurück zu Live
+            </button>
+            <a id="dvp-download" class="button" style="display: none;">
+                <i class="fas fa-download"></i> Download
+            </a>
+        </div>
+
+        <!-- INFO LEISTE -->
+        <div class="video-info-bar">
+            <?php echo $webcamManager->displayStreamStats(); ?>
+
+            <?php if ($showViewers): ?>
+            <div class="info-badge viewer-stat" id="viewer-stat-container">
+                <span class="live-dot"></span>
+                <strong id="viewer-count-display"><?php echo $viewerCount; ?></strong>
+                <span data-en="Watching" data-de="Zuschauer" data-it="Spettatori" data-fr="Spectateurs" data-zh="观看人数">Zuschauer</span>
+            </div>
+            <?php endif; ?>
+
+            <div style="justify-self: end;"></div>
+        </div>
+
+        <!-- STEUERUNG BUTTONS -->
+        <div class="webcam-controls" style="text-align: center;">
+            <a href="?action=snapshot" class="button" data-en="Save Snapshot" data-de="Snapshot speichern" data-it="Salva istantanea" data-fr="Enregistrer l'instantané" data-zh="保存截图">
+                Snapshot speichern
+            </a>
+            <a href="#" class="button" id="timelapse-button" data-en="Week Timelapse" data-de="Wochenzeitraffer" data-it="Timelapse settimanale" data-fr="Timelapse hebdomadaire" data-zh="一周延时">
+                Wochenzeitraffer
+            </a>
+            <a href="?action=sequence" class="button" data-en="Save Video Clip" data-de="Videoclip speichern" data-it="Salva clip video" data-fr="Enregistrer le clip vidéo" data-zh="保存视频片段">
+                Videoclip speichern
+            </a>
+            <a href="?download_video=1" class="button" data-en="Download Latest Video" data-de="Tagesvideo downloaden" data-it="Scarica l'ultimo video" data-fr="Télécharger la dernière vidéo" data-zh="下载最新视频">
+                Tagesvideo downloaden
+            </a>
+        </div>
+    </div>
+</section>
+
+<!-- ARCHIVE SECTION -->
+<section id="archive" class="section">
+    <div class="container">
+        <h2 data-en="Video Archive" data-de="Videoarchiv Tagesvideos" data-it="Archivio video giornalieri" data-fr="Archive des vidéos quotidiennes" data-zh="每日视频档案">Videoarchiv Tagesvideos</h2>
+        <?php
+        $visualCalendar = new VisualCalendarManager('./videos/', './ai/', $settingsManager);
+        echo $visualCalendar->displayVisualCalendar();
+        ?>
+    </div>
+</section>
+
+<!-- STANDORT -->
+<section id="standort" class="section" style="padding: 40px 0;">
+    <div class="container" style="text-align: center;">
+        <h2 data-en="Camera Direction" data-de="Kamera-Blickrichtung" data-it="Direzione della camera" data-fr="Direction de la caméra" data-zh="摄像头方向">Kamera-Blickrichtung</h2>
+        <div style="display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 30px;">
+            <div style="max-width: 350px;">
+                <img src="kompass1.png" alt="Kompass zeigt Blickrichtung der Webcam Richtung Zürichsee und Schweizer Alpen" style="width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
+            </div>
+            <div style="background: rgba(255,255,255,0.95); padding: 25px 35px; border-radius: 12px; text-align: left;">
+                <h3 style="margin-bottom: 20px; color: #667eea;">📍 Ungefährer Standort</h3>
+                <p><strong>⛰️ Höhe:</strong> ca. 616 m ü.M.</p>
+                <p><strong>🧭 Blickrichtung:</strong> Südwest (SW)</p>
+                <p><strong>📍 Region:</strong> Zürich Oberland</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- QR CODE -->
+<section id="qr-code" class="section">
+    <div class="container" style="text-align: center;">
+        <h1>
+            <p data-en="Follow us and share with friends" data-de="Folge uns und teile mit Freunden" data-it="Seguici e condividi con gli amici" data-fr="Suivez-nous et partagez avec vos amis" data-zh="关注我们并分享给朋友">
+                Folge uns und kopiere den Code und sende es deinen Freunden
+            </p>
+        </h1>
+        <div id="qrcode" data-url="<?php echo $siteConfig['domainUrl']; ?>/"></div>
+        <p data-en="Click QR code to copy URL" data-de="Klicke auf den QR-Code um die URL zu kopieren" data-it="Fai clic sul codice QR per copiare l'URL" data-fr="Cliquez sur le code QR pour copier l'URL" data-zh="点击二维码复制网址">
+            Klicke auf den QR-Code, um die URL zu kopieren
+        </p>
+    </div>
+</section>
+
+<!-- GUESTBOOK -->
+<section id="guestbook" class="section">
+    <div class="container">
+        <h2 data-en="Guestbook" data-de="Gästebuch" data-it="Libro degli ospiti" data-fr="Livre d'or" data-zh="留言簿">Gästebuch</h2>
+        <?php
+        echo $guestbookManager->displayForm();
+        echo $guestbookManager->displayEntries($adminManager->isAdmin());
+        ?>
+    </div>
+</section>
+
+<!-- CONTACT -->
+<section id="kontakt" class="section">
+    <div class="container">
+        <h2 data-en="Contact" data-de="Kontakt" data-it="Contatto" data-fr="Contact" data-zh="联系">Kontakt</h2>
+        <p data-en="Questions or suggestions? We look forward to hearing from you!"
+           data-de="Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!"
+           data-it="Domande o suggerimenti? Saremo felici di sentirti!"
+           data-fr="Des questions ou des suggestions ? Nous serions ravis d'avoir de vos nouvelles !"
+           data-zh="有问题或建议吗？期待您的来信！">
+            Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!
+        </p>
+        <?php echo $contactManager->displayForm(); ?>
+    </div>
+</section>
+
+<!-- GALLERY -->
+<section id="gallery" class="section">
+    <div class="container">
+        <h2 data-en="Image Gallery" data-de="Bildergalerie" data-it="Galleria immagini" data-fr="Galerie d'images" data-zh="图片库">Bildergalerie</h2>
+        <div class="gallery-wrapper">
+            <button class="gallery-nav-btn left" onclick="scrollGallery('left')"><i class="fas fa-chevron-left"></i></button>
+            <?php echo $adminManager->displayGalleryImages(); ?>
+            <button class="gallery-nav-btn right" onclick="scrollGallery('right')"><i class="fas fa-chevron-right"></i></button>
+        </div>
+    </div>
+</section>
+
+<!-- ABOUT -->
+<section id="ueber-uns" class="section">
+    <div class="container">
+        <h2 data-en="About Our Project" data-de="Über unser Projekt" data-it="Il nostro progetto" data-fr="À propos de notre projet" data-zh="关于我们的项目">Über unser Projekt</h2>
+        <div class="about-grid">
+            <div class="about-item">
+                <p data-en="<?php echo $siteConfig['aboutEn']; ?>"
+                   data-de="<?php echo $siteConfig['aboutDe']; ?>"
+                   data-it="Aurora Weather Livecam è un progetto del cuore di appassionati di meteorologia. Vogliamo avvicinarvi alla bellezza della natura e al fascino del tempo."
+                   data-fr="Aurora Weather Livecam est un projet de passionnés de météo. Nous souhaitons vous faire découvrir la beauté de la nature et la fascination du temps."
+                   data-zh="Aurora Weather Livecam 是天气爱好者的热情项目。我们希望让您更贴近自然之美与天气的魅力。">
+                    <?php echo $siteConfig['aboutDe']; ?>
+                </p>
+                <p data-en="We have been operating high-resolution webcams around the clock since 2010. We are particularly proud of unique insights, such as the Patrouille Suisse training flights every Monday morning."
+                   data-de="Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen."
+                   data-it="Dal 2010 gestiamo webcam ad alta risoluzione 24 ore su 24. Siamo particolarmente orgogliosi di scorci unici, come i voli di addestramento della Patrouille Suisse ogni lunedì mattina."
+                   data-fr="Depuis 2010, nous exploitons des webcams haute résolution 24h/24. Nous sommes particulièrement fiers d'aperçus uniques, comme les vols d'entraînement de la Patrouille Suisse chaque lundi matin."
+                   data-zh="自2010年以来，我们全天候运行高分辨率摄像头。我们尤其自豪于独特的视角，例如每周一早上的瑞士巡逻兵训练飞行。">
+                    Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ADMIN SECTION -->
+<?php if ($adminManager->isAdmin()): ?>
+<section id="admin" class="section">
+    <div class="container">
+        <h2 data-en="Admin Area" data-de="Admin-Bereich" data-it="Area admin" data-fr="Espace admin" data-zh="管理员区域">Admin-Bereich</h2>
+        <?php echo $adminManager->displayAdminContent(); ?>
+    </div>
+</section>
+<?php else: ?>
+<section id="admin-login" class="section">
+    <div class="container">
+        <h2 data-en="Admin Login" data-de="Admin Login" data-it="Accesso admin" data-fr="Connexion admin" data-zh="管理员登录">Admin Login</h2>
+        <?php echo $adminManager->displayLoginForm(); ?>
+    </div>
+</section>
+<?php endif; ?>
+
+<!-- PATROUILLE SUISSE SEKTION -->
+<section id="patrouille-suisse" class="section" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);">
+    <div class="container">
+        <h2 style="color: #fff; text-align: center;" data-en="Patrouille Suisse Live - Watch Training Flights" data-de="Patrouille Suisse Live - Trainingsflüge Beobachten" data-it="Patrouille Suisse Live - Guarda i voli di addestramento" data-fr="Patrouille Suisse en direct - Regardez les vols d'entraînement" data-zh="瑞士巡逻兵直播 - 观看训练飞行">Patrouille Suisse Live - Trainingsflüge Beobachten</h2>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px;">
+            <div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; backdrop-filter: blur(10px);">
+                <h3 style="color: #ff6b6b; margin-bottom: 15px;" data-en="Every Monday Live!" data-de="Jeden Montag Live!" data-it="Ogni lunedì in diretta!" data-fr="Tous les lundis en direct !" data-zh="每周一直播！">Jeden Montag Live!</h3>
+                <p style="color: #ddd; line-height: 1.8;" data-en="The Patrouille Suisse, the official aerobatic team of the Swiss Air Force, trains every Monday morning in the Zurich Oberland region. Our webcam offers a unique view of the spectacular flight maneuvers of the six F-5E Tiger II jets." data-de="Die Patrouille Suisse, das offizielle Kunstflugteam der Schweizer Luftwaffe, trainiert jeden Montagmorgen in der Region Zürich Oberland. Unsere Webcam bietet einen einzigartigen Blick auf die spektakulären Flugmanöver der sechs F-5E Tiger II Jets." data-it="La Patrouille Suisse, il team acrobatico ufficiale dell'Aeronautica militare svizzera, si addestra ogni lunedì mattina nella regione dell'Oberland di Zurigo. La nostra webcam offre una vista unica delle spettacolari manovre di volo dei sei F-5E Tiger II." data-fr="La Patrouille Suisse, l'équipe officielle de voltige des Forces aériennes suisses, s'entraîne chaque lundi matin dans la région de l'Oberland zurichois. Notre webcam offre une vue unique des spectaculaires manœuvres de vol des six F-5E Tiger II." data-zh="瑞士巡逻兵是瑞士空军的官方特技飞行队，每周一早上在苏黎世高地地区训练。我们的摄像头提供了观赏六架 F-5E Tiger II 喷气机精彩机动的独特视角。">
+                    Die Patrouille Suisse, das offizielle Kunstflugteam der Schweizer Luftwaffe, trainiert jeden <strong style="color: #fff;">Montagmorgen</strong> in der Region Zürich Oberland. Unsere Webcam bietet einen einzigartigen Blick auf die spektakulären Flugmanöver der sechs F-5E Tiger II Jets.
+                </p>
+                <ul style="color: #ccc; margin-top: 15px; padding-left: 20px;">
+                    <li data-en="Training time: approx. 09:00 - 11:00" data-de="Trainingszeit: ca. 09:00 - 11:00 Uhr" data-it="Orario di addestramento: circa 09:00 - 11:00" data-fr="Heure d'entraînement : env. 09:00 - 11:00" data-zh="训练时间：约 09:00 - 11:00">Trainingszeit: ca. 09:00 - 11:00 Uhr</li>
+                    <li data-en="Visible in good weather" data-de="Bei gutem Wetter sichtbar" data-it="Visibile con bel tempo" data-fr="Visible par beau temps" data-zh="天气良好时可见">Bei gutem Wetter sichtbar</li>
+                    <li data-en="Unique perspective from Zurich Oberland" data-de="Einzigartige Perspektive aus dem Zürcher Oberland" data-it="Prospettiva unica dall'Oberland di Zurigo" data-fr="Perspective unique depuis l'Oberland zurichois" data-zh="来自苏黎世高地的独特视角">Einzigartige Perspektive aus dem Zürcher Oberland</li>
+                </ul>
+            </div>
+            <div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; backdrop-filter: blur(10px);">
+                <h3 style="color: #4ecdc4; margin-bottom: 15px;" data-en="History of Patrouille Suisse" data-de="Geschichte der Patrouille Suisse" data-it="Storia della Patrouille Suisse" data-fr="Histoire de la Patrouille Suisse" data-zh="瑞士巡逻兵历史">Geschichte der Patrouille Suisse</h3>
+                <p style="color: #ddd; line-height: 1.8;" data-en="Founded in 1964, the Patrouille Suisse is one of Europe's most renowned aerobatic teams. The team has been flying the Northrop F-5E Tiger II since 1995 and delights audiences at shows throughout Switzerland and internationally." data-de="Gegründet 1964, ist die Patrouille Suisse eines der renommiertesten Kunstflugteams Europas. Das Team fliegt seit 1995 die Northrop F-5E Tiger II und begeistert bei Shows in der ganzen Schweiz und international." data-it="Fondata nel 1964, la Patrouille Suisse è uno dei team acrobatici più rinomati d'Europa. Dal 1995 il team vola con i Northrop F-5E Tiger II e entusiasma il pubblico in Svizzera e all'estero." data-fr="Fondée en 1964, la Patrouille Suisse est l'une des équipes de voltige les plus renommées d'Europe. L'équipe vole sur Northrop F-5E Tiger II depuis 1995 et séduit le public en Suisse et à l'international." data-zh="瑞士巡逻兵成立于1964年，是欧洲最著名的特技飞行队之一。该队自1995年以来驾驶 Northrop F-5E Tiger II，在瑞士及国际航展上深受观众喜爱。">
+                    Gegründet 1964, ist die Patrouille Suisse eines der renommiertesten Kunstflugteams Europas. Das Team fliegt seit 1995 die Northrop F-5E Tiger II und begeistert bei Shows in der ganzen Schweiz und international.
+                </p>
+                <p style="color: #ddd; margin-top: 15px;" data-en="Home base: Payerne (VD) | Aircraft: 6x F-5E Tiger II | Team size: 6 pilots + crew" data-de="Heimatbasis: Payerne (VD) | Flugzeuge: 6x F-5E Tiger II | Teamgrösse: 6 Piloten + Crew" data-it="Base: Payerne (VD) | Aeromobili: 6x F-5E Tiger II | Team: 6 piloti + personale" data-fr="Base : Payerne (VD) | Avions : 6x F-5E Tiger II | Équipe : 6 pilotes + équipe" data-zh="基地：Payerne (VD) | 飞机：6 架 F-5E Tiger II | 团队规模：6 名飞行员 + 机组">
+                    <strong style="color: #fff;" data-en="Home base:" data-de="Heimatbasis:" data-it="Base:" data-fr="Base :" data-zh="基地：">Heimatbasis:</strong> Payerne (VD)<br>
+                    <strong style="color: #fff;" data-en="Aircraft:" data-de="Flugzeuge:" data-it="Aeromobili:" data-fr="Avions :" data-zh="飞机：">Flugzeuge:</strong> 6x F-5E Tiger II<br>
+                    <strong style="color: #fff;" data-en="Team size:" data-de="Teamgrösse:" data-it="Team:" data-fr="Équipe :" data-zh="团队规模：">Teamgrösse:</strong> 6 <span data-en="pilots + crew" data-de="Piloten + Crew" data-it="piloti + personale" data-fr="pilotes + équipe" data-zh="飞行员 + 机组">Piloten + Crew</span>
+                </p>
+            </div>
+            <div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; backdrop-filter: blur(10px);">
+                <h3 style="color: #ffd93d; margin-bottom: 15px;" data-en="Best Viewing Tips" data-de="Beste Beobachtungstipps" data-it="Consigli per la migliore visione" data-fr="Conseils pour une meilleure observation" data-zh="最佳观看提示">Beste Beobachtungstipps</h3>
+                <p style="color: #ddd; line-height: 1.8;" data-en="For the best view of the training flights, we recommend:" data-de="Für die beste Sicht auf die Trainingsflüge empfehlen wir:" data-it="Per la migliore visione dei voli di addestramento, consigliamo:" data-fr="Pour la meilleure vue des vols d'entraînement, nous recommandons :" data-zh="为获得最佳的训练飞行观赏效果，我们建议：">
+                    Für die beste Sicht auf die Trainingsflüge empfehlen wir:
+                </p>
+                <ul style="color: #ccc; margin-top: 15px; padding-left: 20px;">
+                    <li data-en="Use the zoom function of our webcam" data-de="Nutzen Sie die Zoom-Funktion unserer Webcam" data-it="Usa la funzione zoom della nostra webcam" data-fr="Utilisez la fonction zoom de notre webcam" data-zh="使用我们摄像头的缩放功能">Nutzen Sie die Zoom-Funktion unserer Webcam</li>
+                    <li data-en="Timelapse mode for accelerated view" data-de="Timelapse-Modus für beschleunigte Ansicht" data-it="Modalità timelapse per una vista accelerata" data-fr="Mode timelapse pour une vue accélérée" data-zh="使用延时模式加速观看">Timelapse-Modus für beschleunigte Ansicht</li>
+                    <li data-en="Daily videos to watch later" data-de="Tagesvideos zum Nachschauen" data-it="Video giornalieri da rivedere" data-fr="Vidéos quotidiennes à revoir" data-zh="每日视频可供回看">Tagesvideos zum Nachschauen</li>
+                    <li data-en="AI detection marks aircraft sightings" data-de="AI-Erkennung markiert Flugzeug-Sichtungen" data-it="Il rilevamento AI segnala gli avvistamenti di aerei" data-fr="La détection IA signale les observations d'avions" data-zh="AI 检测会标记飞机出现">AI-Erkennung markiert Flugzeug-Sichtungen</li>
+                </ul>
+                <p style="color: #aaa; margin-top: 15px; font-size: 14px;" data-en="Note: Trainings may be cancelled in bad weather." data-de="Hinweis: Bei schlechtem Wetter können Trainings abgesagt werden." data-it="Nota: gli addestramenti possono essere annullati in caso di maltempo." data-fr="Remarque : les entraînements peuvent être annulés en cas de mauvais temps." data-zh="注意：恶劣天气时训练可能会取消。">
+                    <em>Hinweis: Bei schlechtem Wetter können Trainings abgesagt werden.</em>
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- BLOG SEKTION -->
+<section id="blog" class="section" style="background: #f8f9fa;">
+    <div class="container">
+        <h2 style="text-align: center; margin-bottom: 10px;"><?php echo $siteConfig['blogTitle']; ?></h2>
+        <p style="text-align: center; color: #666; margin-bottom: 40px;" data-en="Latest weather news, webcam updates and nature observations from Zurich Oberland" data-de="Aktuelle Wetter-News, Webcam-Updates und Naturbeobachtungen aus dem Zürcher Oberland" data-it="Ultime notizie meteo, aggiornamenti della webcam e osservazioni naturalistiche dall'Oberland di Zurigo" data-fr="Dernières actualités météo, mises à jour de la webcam et observations de la nature depuis l'Oberland zurichois" data-zh="来自苏黎世高地的最新天气资讯、摄像头更新和自然观察">Aktuelle Wetter-News, Webcam-Updates und Naturbeobachtungen aus dem Zürcher Oberland</p>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;">
+            <!-- Blog Artikel 1 -->
+            <article style="background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
+                <div style="height: 180px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
+                    <span style="font-size: 60px;">🌅</span>
+                </div>
+                <div style="padding: 25px;">
+                    <h3 style="margin-bottom: 10px; color: #333;" data-en="Sunrises over Lake Zurich" data-de="Sonnenaufgänge über dem Zürichsee" data-it="Albe sul Lago di Zurigo" data-fr="Levers de soleil sur le lac de Zurich" data-zh="苏黎世湖日出">Sonnenaufgänge über dem Zürichsee</h3>
+                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="January 2024" data-de="Januar 2024" data-it="Gennaio 2024" data-fr="Janvier 2024" data-zh="2024年1月">Januar 2024</p>
+                    <p style="color: #555; line-height: 1.7;" data-en="The winter months offer spectacular sunrises over Lake Zurich. Our AI detection automatically identifies the most beautiful moments and saves them in the gallery." data-de="Die Wintermonate bieten spektakuläre Sonnenaufgänge über dem Zürichsee. Unsere AI-Erkennung identifiziert automatisch die schönsten Momente und speichert sie in der Galerie." data-it="I mesi invernali offrono spettacolari albe sul Lago di Zurigo. Il nostro rilevamento AI identifica automaticamente i momenti più belli e li salva nella galleria." data-fr="Les mois d'hiver offrent des levers de soleil spectaculaires sur le lac de Zurich. Notre détection IA identifie automatiquement les plus beaux moments et les enregistre dans la galerie." data-zh="冬季在苏黎世湖上空可见壮观的日出。我们的 AI 检测会自动识别最美瞬间并保存到图库。">
+                        Die Wintermonate bieten spektakuläre Sonnenaufgänge über dem Zürichsee. Unsere AI-Erkennung identifiziert automatisch die schönsten Momente und speichert sie in der Galerie.
+                    </p>
+                    <p style="color: #555; line-height: 1.7; margin-top: 10px;" data-en="Especially with high fog, impressive lighting moods are created when the sun breaks through the cloud cover." data-de="Besonders bei Hochnebel entstehen eindrucksvolle Lichtstimmungen, wenn die Sonne durch die Wolkendecke bricht." data-it="Soprattutto con la nebbia alta si creano suggestive atmosfere di luce quando il sole rompe la coltre di nubi." data-fr="Surtout en cas de brouillard élevé, des ambiances lumineuses impressionnantes se créent lorsque le soleil perce la couverture nuageuse." data-zh="尤其在高雾天气，当太阳穿透云层时会形成迷人的光影氛围。">
+                        Besonders bei Hochnebel entstehen eindrucksvolle Lichtstimmungen, wenn die Sonne durch die Wolkendecke bricht.
+                    </p>
+                </div>
+            </article>
+
+            <!-- Blog Artikel 2 -->
+            <article style="background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
+                <div style="height: 180px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); display: flex; align-items: center; justify-content: center;">
+                    <span style="font-size: 60px;">🏔️</span>
+                </div>
+                <div style="padding: 25px;">
+                    <h3 style="margin-bottom: 10px; color: #333;" data-en="Alpine Panorama in Winter" data-de="Alpenpanorama im Winter" data-it="Panorama alpino in inverno" data-fr="Panorama alpin en hiver" data-zh="冬季阿尔卑斯全景">Alpenpanorama im Winter</h3>
+                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="December 2023" data-de="Dezember 2023" data-it="Dicembre 2023" data-fr="Décembre 2023" data-zh="2023年12月">Dezember 2023</p>
+                    <p style="color: #555; line-height: 1.7;" data-en="On clear winter days, the view from our webcam at 616m altitude extends to the snow-covered peaks of the Glarus Alps. Säntis, Glärnisch and other mountain peaks are visible." data-de="An klaren Wintertagen reicht die Sicht von unserer Webcam auf 616m Höhe bis zu den schneebedeckten Gipfeln der Glarner Alpen. Säntis, Glärnisch und weitere Bergspitzen sind sichtbar." data-it="Nelle limpide giornate invernali, la vista dalla nostra webcam a 616 m di altitudine si estende alle vette innevate delle Alpi di Glarona. Si vedono Säntis, Glärnisch e altre cime." data-fr="Par temps clair en hiver, la vue depuis notre webcam à 616 m d'altitude s'étend jusqu'aux sommets enneigés des Alpes glaronnaises. Le Säntis, le Glärnisch et d'autres sommets sont visibles." data-zh="在晴朗的冬日，从我们海拔616米的摄像头可远眺格拉鲁斯阿尔卑斯的雪峰，可见 Säntis、Glärnisch 等山峰。">
+                        An klaren Wintertagen reicht die Sicht von unserer Webcam auf 616m Höhe bis zu den schneebedeckten Gipfeln der Glarner Alpen. Säntis, Glärnisch und weitere Bergspitzen sind sichtbar.
+                    </p>
+                    <p style="color: #555; line-height: 1.7; margin-top: 10px;" data-en="Use the zoom function for detailed views of the mountain landscape." data-de="Nutzen Sie die Zoom-Funktion für detaillierte Ansichten der Berglandschaft." data-it="Usa la funzione zoom per viste dettagliate del paesaggio montano." data-fr="Utilisez la fonction zoom pour des vues détaillées du paysage montagneux." data-zh="使用缩放功能可查看更细致的山景。">
+                        Nutzen Sie die Zoom-Funktion für detaillierte Ansichten der Berglandschaft.
+                    </p>
+                </div>
+            </article>
+
+            <!-- Blog Artikel 3 -->
+            <article style="background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
+                <div style="height: 180px; background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%); display: flex; align-items: center; justify-content: center;">
+                    <span style="font-size: 60px;">✈️</span>
+                </div>
+                <div style="padding: 25px;">
+                    <h3 style="margin-bottom: 10px; color: #333;" data-en="Patrouille Suisse Season 2024" data-de="Patrouille Suisse Saison 2024" data-it="Stagione 2024 della Patrouille Suisse" data-fr="Saison 2024 de la Patrouille Suisse" data-zh="2024年瑞士巡逻兵季">Patrouille Suisse Saison 2024</h3>
+                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="March 2024" data-de="März 2024" data-it="Marzo 2024" data-fr="Mars 2024" data-zh="2024年3月">März 2024</p>
+                    <p style="color: #555; line-height: 1.7;" data-en="The new flight season of Patrouille Suisse has begun! Every Monday the aerobatic team trains over Zurich Oberland - our webcam captures the flight maneuvers live." data-de="Die neue Flugsaison der Patrouille Suisse hat begonnen! Jeden Montag trainiert das Kunstflugteam über dem Zürcher Oberland - unsere Webcam fängt die Flugmanöver live ein." data-it="È iniziata la nuova stagione di volo della Patrouille Suisse! Ogni lunedì il team acrobatico si addestra sopra l'Oberland di Zurigo: la nostra webcam cattura le manovre in diretta." data-fr="La nouvelle saison de vol de la Patrouille Suisse a commencé ! Chaque lundi, l'équipe de voltige s'entraîne au-dessus de l'Oberland zurichois : notre webcam capture les manœuvres en direct." data-zh="瑞士巡逻兵新一季飞行已开始！每周一特技飞行队在苏黎世高地训练，我们的摄像头会实时捕捉飞行动作。">
+                        Die neue Flugsaison der Patrouille Suisse hat begonnen! Jeden Montag trainiert das Kunstflugteam über dem Zürcher Oberland - unsere Webcam fängt die Flugmanöver live ein.
+                    </p>
+                    <p style="color: #555; line-height: 1.7; margin-top: 10px;" data-en="AI detection automatically marks aircraft sightings in our gallery." data-de="Die AI-Erkennung markiert Flugzeug-Sichtungen automatisch in unserer Galerie." data-it="Il rilevamento AI contrassegna automaticamente gli avvistamenti di aerei nella nostra galleria." data-fr="La détection IA marque automatiquement les observations d'avions dans notre galerie." data-zh="AI 检测会在我们的图库中自动标记飞机出现。">
+                        Die AI-Erkennung markiert Flugzeug-Sichtungen automatisch in unserer Galerie.
+                    </p>
+                </div>
+            </article>
+        </div>
+
+        <div style="text-align: center; margin-top: 40px;">
+            <p style="color: #888; font-size: 14px;" data-en="More weather updates and observations can be found on our social media channels." data-de="Weitere Wetter-Updates und Beobachtungen finden Sie auf unseren Social Media Kanälen." data-it="Altri aggiornamenti meteo e osservazioni sono disponibili sui nostri canali social." data-fr="D'autres mises à jour météo et observations sont disponibles sur nos réseaux sociaux." data-zh="更多天气更新和观测内容请关注我们的社交媒体渠道。">
+                Weitere Wetter-Updates und Beobachtungen finden Sie auf unseren Social Media Kanälen.
+            </p>
+        </div>
+    </div>
+</section>
+
+<!-- IMPRESSUM -->
+<section id="impressum" class="section">
+    <div class="container">
+        <h2 data-en="Imprint" data-de="Impressum" data-it="Note legali" data-fr="Mentions légales" data-zh="法律声明">Impressum</h2>
+        <p><?php echo $siteConfig['footerName']; ?></p>
+        <p>M. Kessler</p>
+        <p>Dürnten, Schweiz</p>
+        <p data-en="Inquiries via contact form" data-de="Anfragen per Kontaktformular" data-it="Richieste tramite modulo di contatto" data-fr="Demandes via le formulaire de contact" data-zh="通过联系表单咨询">Anfragen per Kontaktformular</p>
+    </div>
+</section>
+
+</main>
+
+<footer>
+    <div class="container">
+        <!-- Social Media Icons -->
+        <div class="footer-social" style="text-align: center; margin-bottom: 20px;">
+            <a href="https://www.instagram.com/auroraweatherlivecam" target="_blank" rel="noopener noreferrer" title="Folge uns auf Instagram" style="display: inline-block; margin: 0 10px; color: #E1306C; font-size: 24px;">
+                <i class="fab fa-instagram" aria-hidden="true"></i>
+                <span class="sr-only">Instagram</span>
+            </a>
+            <a href="https://www.facebook.com/auroraweatherlivecam" target="_blank" rel="noopener noreferrer" title="Folge uns auf Facebook" style="display: inline-block; margin: 0 10px; color: #1877F2; font-size: 24px;">
+                <i class="fab fa-facebook" aria-hidden="true"></i>
+                <span class="sr-only">Facebook</span>
+            </a>
+            <a href="https://www.youtube.com/@auroraweatherlivecam" target="_blank" rel="noopener noreferrer" title="Abonniere unseren YouTube Kanal" style="display: inline-block; margin: 0 10px; color: #FF0000; font-size: 24px;">
+                <i class="fab fa-youtube" aria-hidden="true"></i>
+                <span class="sr-only">YouTube</span>
+            </a>
+            <a href="https://www.tiktok.com/@auroraweatherlivecam" target="_blank" rel="noopener noreferrer" title="Folge uns auf TikTok" style="display: inline-block; margin: 0 10px; color: #000000; font-size: 24px;">
+                <i class="fab fa-tiktok" aria-hidden="true"></i>
+                <span class="sr-only">TikTok</span>
+            </a>
+        </div>
+        <div class="footer-links">
+            <a href="#webcams">Webcam</a>
+            <a href="#guestbook">Gästebuch</a>
+            <a href="#kontakt">Kontakt</a>
+            <a href="#gallery">Galerie</a>
+            <a href="#patrouille-suisse">Patrouille Suisse</a>
+            <a href="#blog">Blog</a>
+            <a href="#impressum">Impressum</a>
+        </div>
+        <div class="footer-bottom">
+            <p><?php echo $siteConfig['copyright']; ?></p>
+            <p style="font-size: 12px; color: #999; margin-top: 5px;">Live Webcam Schweiz | Zürichsee Blick | Patrouille Suisse Trainings</p>
+        </div>
+    </div>
+</footer>
+
+<!-- MODAL -->
+<div id="imageModal" class="modal">
+    <span class="close">&times;</span>
+    <a class="modal-prev" onclick="changeModalImage(-1)">&#10094;</a>
+    <a class="modal-next" onclick="changeModalImage(1)">&#10095;</a>
+    <img class="modal-content" id="modalImage">
+    <div id="caption"></div>
+    <a id="downloadLink" href="#" download class="button" style="display: block; width: 200px; margin: 20px auto;">Download</a>
+</div>
+
+<!-- JAVASCRIPT -->
+<script src="https://www.youtube.com/iframe_api"></script>
+<script>
+// Webcam-Player-Logik
+<?php echo $webcamManager->getJavaScript(); ?>
+
+// QR-Code Generator
+function generateQRCode() {
+    var qr = qrcode(0, 'M');
+    qr.addData(window.location.href);
+    qr.make();
+    document.getElementById('qrcode').innerHTML = qr.createImgTag(5);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    generateQRCode();
+});
+
+// QR-Code Klick zum Kopieren
+document.getElementById('qrcode')?.addEventListener('click', function() {
+    var url = this.getAttribute('data-url') || window.location.href;
+    navigator.clipboard.writeText(url).then(function() {
+        alert('URL wurde in die Zwischenablage kopiert!');
+    });
+});
+</script>
+
+<script>
+    window.zoomConfig = {
+        enabled: true,
+        minZoom: 1,
+        maxZoom: 4,
+        defaultZoom: 1
+    };
+</script>
+<script src="js/video-zoom.js"></script>
+
+<!-- TIMELAPSE CONTROLLER -->
+<script>
+const TimelapseController = {
+    imageFiles: <?php echo $imageFilesJson; ?>,
+    currentIndex: 0,
+    isPlaying: false,
+    isReverse: false,
+    speed: 1,
+    availableSpeeds: [1, 10, 100],
+    intervalId: null,
+    baseInterval: 200,
+
+    init: function() {
+        this.setupControls();
+        this.updateSlider();
+    },
+
+    setupControls: function() {
+        const container = document.getElementById('timelapse-controls');
+        if (!container) return;
+
+        container.innerHTML = `
+            <div class="timelapse-control-bar">
+                <button id="tl-play-pause" class="tl-btn" title="Play/Pause">
+                    <i class="fas fa-play"></i>
+                </button>
+                <button id="tl-reverse" class="tl-btn" title="Rückwärts">
+                    <i class="fas fa-backward"></i>
+                </button>
+                <div class="tl-slider-container">
+                    <input type="range" id="tl-slider" min="0" max="${this.imageFiles.length - 1}" value="0">
+                    <span id="tl-time-display">00:00:00</span>
+                </div>
+                <div class="tl-speed-container">
+                    <button id="tl-speed" class="tl-btn tl-speed-btn">1x</button>
+                </div>
+                <button id="tl-back-live" class="tl-btn tl-back-btn" title="Zurück zu Live">
+                    <i class="fas fa-video"></i> Live
+                </button>
+            </div>
+        `;
+
+        document.getElementById('tl-play-pause').onclick = () => this.togglePlay();
+        document.getElementById('tl-reverse').onclick = () => this.toggleReverse();
+        document.getElementById('tl-speed').onclick = () => this.cycleSpeed();
+        document.getElementById('tl-back-live').onclick = () => this.backToLive();
+
+        const slider = document.getElementById('tl-slider');
+        slider.oninput = (e) => this.seekTo(parseInt(e.target.value));
+    },
+
+    togglePlay: function() {
+        this.isPlaying = !this.isPlaying;
+        const btn = document.getElementById('tl-play-pause');
+        btn.innerHTML = this.isPlaying ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
+
+        if (this.isPlaying) {
+            this.startPlayback();
+        } else {
+            this.stopPlayback();
+        }
+    },
+
+    toggleReverse: function() {
+        this.isReverse = !this.isReverse;
+        const btn = document.getElementById('tl-reverse');
+        btn.classList.toggle('active', this.isReverse);
+        btn.innerHTML = this.isReverse ? '<i class="fas fa-forward"></i>' : '<i class="fas fa-backward"></i>';
+    },
+
+    cycleSpeed: function() {
+        const idx = this.availableSpeeds.indexOf(this.speed);
+        this.speed = this.availableSpeeds[(idx + 1) % this.availableSpeeds.length];
+        document.getElementById('tl-speed').textContent = this.speed + 'x';
+
+        if (this.isPlaying) {
+            this.stopPlayback();
+            this.startPlayback();
+        }
+    },
+
+    startPlayback: function() {
+        const interval = this.baseInterval / this.speed;
+        this.intervalId = setInterval(() => this.nextFrame(), interval);
+    },
+
+    stopPlayback: function() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    },
+
+    nextFrame: function() {
+        if (this.isReverse) {
+            this.currentIndex--;
+            if (this.currentIndex < 0) this.currentIndex = this.imageFiles.length - 1;
+        } else {
+            this.currentIndex++;
+            if (this.currentIndex >= this.imageFiles.length) this.currentIndex = 0;
+        }
+        this.showFrame(this.currentIndex);
+    },
+
+    seekTo: function(index) {
+        this.currentIndex = index;
+        this.showFrame(index);
+    },
+
+    showFrame: function(index) {
+        const img = document.getElementById('timelapse-image');
+        if (img && this.imageFiles[index]) {
+            img.src = this.imageFiles[index];
+        }
+        this.updateSlider();
+        this.updateTimeDisplay();
+    },
+
+    updateSlider: function() {
+        const slider = document.getElementById('tl-slider');
+        if (slider) slider.value = this.currentIndex;
+    },
+
+    updateTimeDisplay: function() {
+        const display = document.getElementById('tl-time-display');
+        const overlay = document.getElementById('timelapse-time-overlay');
+        if (!this.imageFiles[this.currentIndex]) return;
+
+        const filename = this.imageFiles[this.currentIndex];
+        const match = filename.match(/(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})(\d{2})/);
+        if (match) {
+            const [_, y, m, d, h, min, s] = match;
+            const timeStr = `${d}.${m}.${y} ${h}:${min}:${s}`;
+            if (display) display.textContent = timeStr;
+            if (overlay) overlay.textContent = timeStr;
+        }
+    },
+
+    backToLive: function() {
+        this.stopPlayback();
+        this.isPlaying = false;
+
+        document.getElementById('timelapse-viewer').style.display = 'none';
+        document.getElementById('webcam-player').style.display = 'block';
+        document.getElementById('timelapse-controls').style.display = 'none';
+        document.getElementById('timelapse-button').textContent = 'Wochenzeitraffer';
+    },
+
+    show: function() {
+        document.getElementById('timelapse-viewer').style.display = 'block';
+        document.getElementById('webcam-player').style.display = 'none';
+        document.getElementById('daily-video-player').style.display = 'none';
+        document.getElementById('daily-video-controls').style.display = 'none';
+        document.getElementById('timelapse-controls').style.display = 'block';
+
+        this.currentIndex = 0;
+        this.showFrame(0);
+    }
+};
+
+// Timelapse Button Event
+document.getElementById('timelapse-button')?.addEventListener('click', function(e) {
+    e.preventDefault();
+
+    if (document.getElementById('timelapse-viewer').style.display === 'none' ||
+        document.getElementById('timelapse-viewer').style.display === '') {
+        TimelapseController.init();
+        TimelapseController.show();
+        this.textContent = 'Zurück zur Live-Webcam';
+    } else {
+        TimelapseController.backToLive();
+    }
+});
+</script>
+
+<!-- DAILY VIDEO PLAYER -->
+<script>
+const DailyVideoPlayer = {
+    videoElement: null,
+
+    init: function() {
+        this.videoElement = document.getElementById('daily-video');
+        document.getElementById('dvp-back-live')?.addEventListener('click', () => this.backToLive());
+    },
+
+    playVideo: function(videoPath, allowDownload = true) {
+        // Andere Player verstecken
+        document.getElementById('webcam-player').style.display = 'none';
+        document.getElementById('timelapse-viewer').style.display = 'none';
+        document.getElementById('timelapse-controls').style.display = 'none';
+
+        // Video Player anzeigen
+        document.getElementById('daily-video-player').style.display = 'block';
+        document.getElementById('daily-video-controls').style.display = 'block';
+
+        // Video laden
+        this.videoElement.src = videoPath;
+        this.videoElement.load();
+        this.videoElement.play();
+
+        // Download Button
+        const downloadBtn = document.getElementById('dvp-download');
+        if (allowDownload && downloadBtn) {
+            downloadBtn.style.display = 'inline-block';
+            downloadBtn.href = videoPath;
+            downloadBtn.download = videoPath.split('/').pop();
+        } else if (downloadBtn) {
+            downloadBtn.style.display = 'none';
+        }
+
+        // Scroll zum Video
+        document.getElementById('webcams').scrollIntoView({ behavior: 'smooth' });
+    },
+
+    backToLive: function() {
+        if (this.videoElement) {
+            this.videoElement.pause();
+            this.videoElement.src = '';
+        }
+
+        document.getElementById('daily-video-player').style.display = 'none';
+        document.getElementById('daily-video-controls').style.display = 'none';
+        document.getElementById('webcam-player').style.display = 'block';
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+    DailyVideoPlayer.init();
+});
+</script>
+
+<!-- ADMIN SETTINGS (AJAX) -->
+<?php if ($adminManager->isAdmin()): ?>
+<script>
+const AdminSettings = {
+    init: function() {
+        this.setupEventListeners();
+    },
+
+    updateSetting: function(key, value) {
+        fetch(window.location.href, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+            body: `settings_action=update&key=${encodeURIComponent(key)}&value=${encodeURIComponent(value)}`
+        })
+        .then(r => r.json())
+        .then(data => {
+            if (data.success) {
+                this.showNotification('✓ Einstellung gespeichert', 'success');
+                this.applySettingImmediately(key, value);
+            } else {
+                this.showNotification('✗ Fehler beim Speichern', 'error');
+            }
+        })
+        .catch(err => {
+            console.error('Settings update error:', err);
+            this.showNotification('✗ Netzwerkfehler', 'error');
+        });
+    },
+
+    applySettingImmediately: function(key, value) {
+        switch(key) {
+            case 'viewer_display.enabled':
+                const viewerEl = document.getElementById('viewer-stat-container');
+                if (viewerEl) {
+                    viewerEl.style.display = (value === true || value === 'true') ? 'inline-flex' : 'none';
+                }
+                break;
+            case 'viewer_display.min_viewers':
+                window.minViewersToShow = parseInt(value);
+                break;
+        }
+    },
+
+    setupEventListeners: function() {
+        document.getElementById('setting-viewer-enabled')?.addEventListener('change', (e) => {
+            this.updateSetting('viewer_display.enabled', e.target.checked);
+        });
+
+        document.getElementById('setting-min-viewers')?.addEventListener('change', (e) => {
+            this.updateSetting('viewer_display.min_viewers', e.target.value);
+        });
+
+        document.getElementById('setting-play-in-player')?.addEventListener('change', (e) => {
+            this.updateSetting('video_mode.play_in_player', e.target.checked);
+        });
+
+        document.getElementById('setting-allow-download')?.addEventListener('change', (e) => {
+            this.updateSetting('video_mode.allow_download', e.target.checked);
+        });
+    },
+
+    showNotification: function(message, type) {
+        const notification = document.createElement('div');
+        notification.textContent = message;
+        notification.style.cssText = `
+            position: fixed; top: 20px; right: 20px; padding: 15px 25px; border-radius: 8px;
+            background: ${type === 'success' ? '#4CAF50' : '#f44336'}; color: white;
+            font-weight: bold; z-index: 10000; animation: slideIn 0.3s ease;
+        `;
+        document.body.appendChild(notification);
+        setTimeout(() => notification.remove(), 3000);
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+    AdminSettings.init();
+});
+</script>
+<?php endif; ?>
+
+<!-- VIEWER COUNTER -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const viewerDisplay = document.getElementById('viewer-count-display');
+    const viewerContainer = document.getElementById('viewer-stat-container');
+    const minViewers = <?php echo $minViewersToShow; ?>;
+
+    function updateViewerCount() {
+        const formData = new FormData();
+        formData.append('action', 'viewer_heartbeat');
+
+        fetch(window.location.href, {
+            method: 'POST',
+            body: formData
+        })
+        .then(r => r.json())
+        .then(data => {
+            if (data.count && viewerDisplay) {
+                viewerDisplay.textContent = data.count;
+
+                // Mindestanzahl prüfen
+                const currentMin = window.minViewersToShow || minViewers;
+                if (viewerContainer) {
+                    viewerContainer.style.display = data.count >= currentMin ? 'inline-flex' : 'none';
+                }
+            }
+        })
+        .catch(err => console.error('Viewer update failed', err));
+    }
+
+    setTimeout(updateViewerCount, 2000);
+    setInterval(updateViewerCount, 10000);
+});
+</script>
+
+<!-- DESIGN SWITCHER -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const buttons = document.querySelectorAll('.theme-button');
+    const body = document.body;
+    const themeMeta = document.querySelector('meta[name="theme-color"]');
+    const themeColors = {
+        'theme-legacy': '#667eea',
+        'theme-alpine': '#2f80ed',
+        'theme-neo': '#0b1220'
+    };
+
+    const applyTheme = (theme) => {
+        body.classList.remove('theme-legacy', 'theme-alpine', 'theme-neo');
+        body.classList.add(theme);
+        buttons.forEach((button) => {
+            button.classList.toggle('active', button.dataset.theme === theme);
+        });
+        if (themeMeta) {
+            themeMeta.setAttribute('content', themeColors[theme] || '#667eea');
+        }
+        localStorage.setItem('aurora-theme', theme);
+    };
+
+    const savedTheme = localStorage.getItem('aurora-theme');
+    if (savedTheme && ['theme-legacy', 'theme-alpine', 'theme-neo'].includes(savedTheme)) {
+        applyTheme(savedTheme);
+    }
+
+    buttons.forEach((button) => {
+        button.addEventListener('click', () => {
+            applyTheme(button.dataset.theme);
+        });
+    });
+});
+</script>
+
+<!-- GALLERY & MODAL -->
+<script>
+function scrollGallery(direction) {
+    const container = document.getElementById('gallery-images');
+    const scrollAmount = 300;
+    container.scrollBy({ left: direction === 'left' ? -scrollAmount : scrollAmount, behavior: 'smooth' });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const modal = document.getElementById('imageModal');
+    const modalImg = document.getElementById("modalImage");
+    const captionText = document.getElementById("caption");
+    const downloadLink = document.getElementById("downloadLink");
+    const closeBtn = document.getElementsByClassName("close")[0];
+
+    let galleryImages = [];
+    let currentModalIndex = 0;
+
+    function initGallery() {
+        galleryImages = Array.from(document.querySelectorAll('#gallery-images img'));
+        galleryImages.forEach((img, index) => {
+            img.style.cursor = "pointer";
+            img.onclick = () => openModal(index);
+        });
+    }
+
+    window.openModal = function(index) {
+        currentModalIndex = index;
+        updateModalContent();
+        modal.style.display = "block";
+        document.body.style.overflow = "hidden";
+    };
+
+    function updateModalContent() {
+        if (currentModalIndex < 0) currentModalIndex = galleryImages.length - 1;
+        if (currentModalIndex >= galleryImages.length) currentModalIndex = 0;
+
+        const currentImg = galleryImages[currentModalIndex];
+        modalImg.src = currentImg.src;
+        captionText.innerHTML = currentImg.alt || `Bild ${currentModalIndex + 1}`;
+        downloadLink.href = currentImg.src;
+        downloadLink.download = currentImg.alt || `image_${currentModalIndex + 1}.jpg`;
+    }
+
+    window.changeModalImage = function(n) {
+        currentModalIndex += n;
+        modalImg.style.opacity = 0;
+        setTimeout(() => {
+            updateModalContent();
+            modalImg.style.opacity = 1;
+        }, 150);
+    };
+
+    closeBtn.onclick = () => { modal.style.display = "none"; document.body.style.overflow = "auto"; };
+    modal.onclick = (e) => { if (e.target === modal) { modal.style.display = "none"; document.body.style.overflow = "auto"; } };
+
+    document.addEventListener('keydown', (e) => {
+        if (modal.style.display === 'block') {
+            if (e.key === 'ArrowLeft') changeModalImage(-1);
+            if (e.key === 'ArrowRight') changeModalImage(1);
+            if (e.key === 'Escape') { modal.style.display = "none"; document.body.style.overflow = "auto"; }
+        }
+    });
+
+    initGallery();
+});
+</script>
+
+<!-- LANGUAGE SWITCH -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const langButtons = document.querySelectorAll('.lang-button');
+
+    langButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const lang = this.id.split('-')[1];
+            setLanguage(lang);
+            langButtons.forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+});
+
+function setLanguage(lang) {
+    document.querySelectorAll('[data-en], [data-de], [data-it], [data-fr], [data-zh]').forEach(elem => {
+        const text = elem.getAttribute(`data-${lang}`);
+        if (text) elem.textContent = text;
+    });
+}
+</script>
+
+<!-- CALENDAR NAVIGATION -->
+<script>
+function changeMonth(year, month) {
+    if (month < 1) { month = 12; year--; }
+    else if (month > 12) { month = 1; year++; }
+    window.location.href = '?cal_year=' + year + '&cal_month=' + month + '#archive';
+}
+
+function selectDay(year, month, day) {
+    window.location.href = '?cal_year=' + year + '&cal_month=' + month + '&cal_day=' + day + '#archive';
+}
+</script>
+
+<!-- CONTACT FORM AJAX -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const contactForm = document.getElementById('contact-form');
+    if (contactForm) {
+        contactForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const formData = new FormData(this);
+            const feedback = document.getElementById('contact-feedback');
+            const submitBtn = this.querySelector('button[type="submit"]');
+
+            submitBtn.disabled = true;
+            submitBtn.textContent = '⏳ Wird gesendet...';
+            feedback.innerHTML = '<p style="color: #666;">⏳ Nachricht wird gesendet...</p>';
+
+            fetch(window.location.href, {
+                method: 'POST',
+                body: formData,
+                headers: { 'X-Requested-With': 'XMLHttpRequest' }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    feedback.innerHTML = `<p style="color: #4CAF50; padding: 15px; background: #e8f5e9; border-radius: 5px;">✓ ${data.message}</p>`;
+                    contactForm.reset();
+                } else {
+                    feedback.innerHTML = `<p style="color: #f44336; padding: 15px; background: #ffebee; border-radius: 5px;">✗ ${data.message}</p>`;
+                }
+            })
+            .catch(error => {
+                feedback.innerHTML = '<p style="color: #f44336;">✗ Fehler beim Senden.</p>';
+            })
+            .finally(() => {
+                submitBtn.disabled = false;
+                submitBtn.textContent = 'Nachricht senden';
+            });
+        });
+    }
+});
+</script>
+ 
+
+</body>
+</html>
diff --git a/aurora-livecam/js/video-zoom.js b/aurora-livecam/js/video-zoom.js
index 1994c98..61be429 100644
--- a/aurora-livecam/js/video-zoom.js
+++ b/aurora-livecam/js/video-zoom.js
@@ -1,7 +1,6 @@
 /**
  * Video Zoom & Pan Controller
- * - Zoom für alle Video-Modi (Live, Timelapse, Tagesvideo)
- * - Pan-Funktion: Mit Maus den gezoomten Bereich verschieben
+ * Zoomt auf Wrapper-Layer statt direkt auf Video-Elemente
  */
 (() => {
     const config = window.zoomConfig || {};
@@ -11,60 +10,75 @@
     let panX = 0;
     let panY = 0;
     let isDragging = false;
-    let startX = 0;
-    let startY = 0;
+    let lastX = 0;
+    let lastY = 0;
 
     const minZoom = Number(config.minZoom || 1);
     const maxZoom = Number(config.maxZoom || 4);
-    const defaultZoom = Number(config.defaultZoom || 1);
 
     const slider = document.getElementById('zoom-range');
     const valueEl = document.getElementById('zoom-value');
 
-    // Finde das aktuell aktive Video-Element
-    function getActiveTarget() {
-        const webcam = document.getElementById('webcam-player');
-        const timelapse = document.getElementById('timelapse-image');
-        const daily = document.getElementById('daily-video');
-        const timelapseViewer = document.getElementById('timelapse-viewer');
-        const dailyPlayer = document.getElementById('daily-video-player');
+    // Wrapper-IDs für jeden Modus
+    const wrapperIds = ['live-video-wrapper', 'timelapse-wrapper', 'daily-video-wrapper'];
 
-        // Prüfe welches Element sichtbar ist
-        if (dailyPlayer && dailyPlayer.style.display !== 'none' && daily) {
-            return daily;
+    // Finde den aktuell sichtbaren Wrapper
+    function getActiveWrapper() {
+        // Prüfe daily-video-player
+        const dailyPlayer = document.getElementById('daily-video-player');
+        if (dailyPlayer && dailyPlayer.style.display !== 'none') {
+            return document.getElementById('daily-video-wrapper');
         }
-        if (timelapseViewer && timelapseViewer.style.display !== 'none' && timelapse) {
-            return timelapse;
+
+        // Prüfe timelapse-viewer
+        const timelapseViewer = document.getElementById('timelapse-viewer');
+        if (timelapseViewer && timelapseViewer.style.display !== 'none') {
+            return document.getElementById('timelapse-wrapper');
         }
-        if (webcam) {
-            return webcam;
-        }
-        return null;
+
+        // Fallback: Live-Video
+        return document.getElementById('live-video-wrapper');
     }
 
-    // Wende Zoom und Pan auf das aktive Element an
+    // Wende Transform auf ALLE Wrapper an (damit beim Wechsel der Zoom erhalten bleibt)
     function applyTransform() {
-        const target = getActiveTarget();
-        if (!target) return;
-
-        // Bei Zoom 1x: Kein Pan erlaubt
+        // Bei Zoom 1x: Kein Pan
         if (currentZoom <= 1) {
             panX = 0;
             panY = 0;
         }
 
-        // Begrenzen der Pan-Werte basierend auf Zoom
-        const maxPan = (currentZoom - 1) * 50; // Prozent
+        // Pan begrenzen basierend auf Zoom
+        const maxPan = (currentZoom - 1) * 50;
         panX = Math.max(-maxPan, Math.min(maxPan, panX));
         panY = Math.max(-maxPan, Math.min(maxPan, panY));
 
-        target.style.transform = `scale(${currentZoom}) translate(${panX}%, ${panY}%)`;
-        target.style.transformOrigin = 'center center';
-        target.style.transition = isDragging ? 'none' : 'transform 0.2s ease';
+        // Transform auf alle Wrapper anwenden
+        wrapperIds.forEach(id => {
+            const wrapper = document.getElementById(id);
+            if (wrapper) {
+                wrapper.style.transform = `scale(${currentZoom}) translate(${panX}%, ${panY}%)`;
+                wrapper.style.transition = isDragging ? 'none' : 'transform 0.15s ease-out';
+            }
+        });
 
-        // Update UI
+        // UI Update
         if (valueEl) valueEl.textContent = `${currentZoom.toFixed(1)}x`;
         if (slider) slider.value = currentZoom;
+
+        // Cursor Update
+        updateCursor();
+    }
+
+    function updateCursor() {
+        const container = document.querySelector('.video-container');
+        if (container) {
+            if (currentZoom > 1) {
+                container.classList.add('zoomed');
+            } else {
+                container.classList.remove('zoomed');
+            }
+        }
     }
 
     // Zoom setzen
@@ -91,57 +105,68 @@
         const container = document.querySelector('.video-container');
         if (!container) return;
 
+        // Mousedown - Start dragging
         container.addEventListener('mousedown', (e) => {
             if (currentZoom <= 1) return;
+            // Ignoriere Klicks auf Controls
+            if (e.target.closest('.zoom-controls, button, a')) return;
+
             isDragging = true;
-            startX = e.clientX;
-            startY = e.clientY;
-            container.style.cursor = 'grabbing';
+            lastX = e.clientX;
+            lastY = e.clientY;
             e.preventDefault();
         });
 
+        // Mousemove - Dragging
         document.addEventListener('mousemove', (e) => {
             if (!isDragging) return;
 
-            const dx = (e.clientX - startX) / 5; // Sensitivität anpassen
-            const dy = (e.clientY - startY) / 5;
+            const deltaX = e.clientX - lastX;
+            const deltaY = e.clientY - lastY;
 
-            panX += dx / currentZoom;
-            panY += dy / currentZoom;
+            // Sensitivität basierend auf Zoom
+            const sensitivity = 0.15 / currentZoom;
+            panX += deltaX * sensitivity;
+            panY += deltaY * sensitivity;
 
-            startX = e.clientX;
-            startY = e.clientY;
+            lastX = e.clientX;
+            lastY = e.clientY;
 
             applyTransform();
         });
 
+        // Mouseup - Stop dragging
         document.addEventListener('mouseup', () => {
-            if (isDragging) {
-                isDragging = false;
-                const container = document.querySelector('.video-container');
-                if (container) container.style.cursor = currentZoom > 1 ? 'grab' : 'default';
-            }
+            isDragging = false;
+        });
+
+        // Mouse leave
+        document.addEventListener('mouseleave', () => {
+            isDragging = false;
         });
 
         // Touch Events für Mobile
         container.addEventListener('touchstart', (e) => {
             if (currentZoom <= 1 || e.touches.length !== 1) return;
+            if (e.target.closest('.zoom-controls, button, a')) return;
+
             isDragging = true;
-            startX = e.touches[0].clientX;
-            startY = e.touches[0].clientY;
+            lastX = e.touches[0].clientX;
+            lastY = e.touches[0].clientY;
         }, { passive: true });
 
         container.addEventListener('touchmove', (e) => {
             if (!isDragging || e.touches.length !== 1) return;
 
-            const dx = (e.touches[0].clientX - startX) / 5;
-            const dy = (e.touches[0].clientY - startY) / 5;
+            const deltaX = e.touches[0].clientX - lastX;
+            const deltaY = e.touches[0].clientY - lastY;
 
-            panX += dx / currentZoom;
-            panY += dy / currentZoom;
+            const sensitivity = 0.15 / currentZoom;
+            panX += deltaX * sensitivity;
+            panY += deltaY * sensitivity;
 
-            startX = e.touches[0].clientX;
-            startY = e.touches[0].clientY;
+            lastX = e.touches[0].clientX;
+            lastY = e.touches[0].clientY;
 
             applyTransform();
         }, { passive: true });
@@ -150,25 +175,28 @@
             isDragging = false;
         });
 
-        // Cursor anpassen bei Zoom
-        container.style.cursor = 'default';
+        // Doppelklick zum Zurücksetzen
+        container.addEventListener('dblclick', (e) => {
+            if (e.target.closest('.zoom-controls, button, a')) return;
+            resetZoom();
+        });
     }
 
-    // Slider Events
+    // Slider Setup
     function setupSlider() {
         if (!slider) return;
 
         slider.min = minZoom;
         slider.max = maxZoom;
         slider.step = 0.5;
-        slider.value = defaultZoom;
+        slider.value = 1;
 
         slider.addEventListener('input', (e) => {
             setZoom(Number(e.target.value));
         });
     }
 
-    // Globale Funktionen für Buttons
+    // Globale Funktionen
     window.adjustZoom = adjustZoom;
     window.resetZoom = resetZoom;
     window.setZoom = setZoom;
@@ -177,31 +205,11 @@
     document.addEventListener('DOMContentLoaded', () => {
         setupSlider();
         setupPanEvents();
-        currentZoom = defaultZoom;
 
-        // Warte kurz, damit Video-Elemente geladen sind
-        setTimeout(() => {
-            applyTransform();
-        }, 500);
+        // Initial State
+        currentZoom = 1;
+        applyTransform();
 
-        // Update Cursor bei Zoom-Änderung
-        const container = document.querySelector('.video-container');
-        if (container) {
-            const observer = new MutationObserver(() => {
-                container.style.cursor = currentZoom > 1 ? 'grab' : 'default';
-            });
-        }
-    });
-
-    // Bei Moduswechsel Pan zurücksetzen
-    window.addEventListener('click', (e) => {
-        if (e.target.id === 'timelapse-button' ||
-            e.target.closest('#timelapse-button') ||
-            e.target.id === 'dvp-back-live' ||
-            e.target.closest('.play-link')) {
-            panX = 0;
-            panY = 0;
-            setTimeout(applyTransform, 100);
-        }
+        console.log('Video Zoom & Pan initialized');
     });
 })();
diff --git a/aurora-livecam/settings.json b/aurora-livecam/settings.json
index f11b81b..d731a77 100644
--- a/aurora-livecam/settings.json
+++ b/aurora-livecam/settings.json
@@ -1,7 +1,8 @@
 {
     "viewer_display": {
         "enabled": true,
-        "min_viewers": 1
+        "min_viewers": 1,
+        "update_interval": 5
     },
     "video_mode": {
         "play_in_player": true,
@@ -9,7 +10,50 @@
     },
     "timelapse": {
         "default_speed": 1,
-        "available_speeds": [1, 10, 100]
+        "available_speeds": [
+            1,
+            10,
+            100
+        ]
+    },
+    "ui_display": {
+        "show_recommendation_banner": true,
+        "show_qr_code": true,
+        "show_social_media": true,
+        "show_patrouille_suisse": true
+    },
+    "zoom_timelapse": {
+        "show_zoom_controls": true,
+        "max_zoom_level": 4.0,
+        "timelapse_reverse_enabled": true
+    },
+    "content": {
+        "guestbook_enabled": true,
+        "gallery_enabled": true,
+        "ai_events_enabled": true,
+        "max_guestbook_entries": 50
+    },
+    "technical": {
+        "viewer_update_interval": 5,
+        "session_timeout": 30
+    },
+    "theme": {
+        "default_theme": "theme-legacy",
+        "show_theme_switcher": false
+    },
+    "seo": {
+        "custom_title": "",
+        "meta_description": "",
+        "meta_keywords": ""
+    },
+    "weather": {
+        "enabled": true,
+        "api_key": "",
+        "location": "Oberdürnten,CH",
+        "lat": "47.2833",
+        "lon": "8.7167",
+        "update_interval": 5,
+        "units": "metric"
     },
     "last_updated": null,
     "updated_by": null
diff --git a/powerbi.md b/powerbi.md
new file mode 100644
index 0000000..c3baa04
--- /dev/null
+++ b/powerbi.md
@@ -0,0 +1,225 @@
+Erstelle ein Word-Dokument: "Power BI Schulungshandbuch für HR" mit Schritt-für-Schritt-Anleitungen.
+
+ZIELGRUPPE:
+- 3-4 HR-Mitarbeiterinnen, Schweiz
+- Excel-Kenntnisse: Basis + SVERWEIS
+- Technikaffinität: 5-6/10
+- Keine Power BI Vorkenntnisse
+
+DATENQUELLEN DER TEILNEHMER:
+- SAP HCM/HRM (alle Infotypen, besonders PA0001, PA0002, PA0008, PA2001)
+- Rexx HR-System (Stellenplan, Pulsumfrage, MA-Zufriedenheit)
+- Excel/CSV (Kununu-Score, Refline/Time-to-hire)
+
+KPIs DIE ABGEBILDET WERDEN SOLLEN:
+- Headcount/FTE (monatlich)
+- Fluktuation (monatlich)
+- Krankenquote gesamt + ohne Langzeitkrankheiten >30 Tage (Quartal)
+- Überstunden (Quartal)
+- Produktivstunden (wöchentlich)
+- Ferientage/GLZ-Saldi (jährlich)
+- Stellenplan Soll vs Ist (monatlich, aus Rexx)
+- Lohnkosten (monatlich)
+- Time to hire (Quartal)
+- Kununu Score (monatlich)
+- Pulsumfrage (Quartal, aus Rexx)
+- MA-Zufriedenheitsumfrage (jährlich, aus Rexx)
+
+ZIELGRUPPEN DER REPORTS:
+- Geschäftsleitung
+- Verwaltungsrat
+- Finanzbuchhaltung
+- Abteilungsleiter
+
+STRUKTUR DES DOKUMENTS:
+
+1. MODUL 1: GRUNDLAGEN & DATENIMPORT
+1.1 Power BI Desktop installieren und starten
+- Wo herunterladen, Installation, erster Start
+1.2 Oberfläche kennenlernen
+- Berichtsansicht, Datenansicht, Modellansicht erklären
+- Wo findet man was (Menüband, Felder-Bereich, Visualisierungen)
+1.3 Excel-Datei importieren
+- Schritt-für-Schritt: Daten abrufen → Excel → Datei wählen → Navigator → Laden
+- Häufige Probleme und Lösungen
+1.4 CSV importieren
+- Unterschiede zu Excel, Encoding-Probleme Schweiz (Umlaute)
+1.5 SAP-Export importieren
+- Typische SAP-Exportformate verarbeiten
+- Spaltenüberschriften aus erster Zeile
+
+2. MODUL 2: POWER QUERY EDITOR
+2.1 Power Query öffnen
+- Daten transformieren → Button finden
+2.2 Erste Zeile als Header verwenden
+- Schritt-für-Schritt mit Menüpfad
+2.3 Datentypen ändern
+- Datum, Zahl, Text erkennen und korrigieren
+- Schweizer Datumsformat beachten
+2.4 Spalten entfernen/behalten
+- Nur relevante Spalten behalten
+2.5 Zeilen filtern
+- Beispiel: Nur aktive Mitarbeiter, nur bestimmter Zeitraum
+2.6 Werte ersetzen
+- null durch 0 ersetzen, Codes durch Klartext
+2.7 Spalten teilen/zusammenführen
+2.8 Berechnete Spalte hinzufügen
+2.9 Schliessen und Laden
+- Unterschied: Laden vs. Laden in
+
+3. MODUL 3: DATENMODELL
+3.1 Zur Modellansicht wechseln
+3.2 Beziehungen verstehen
+- 1:n, 1:1 erklären
+- Warum Beziehungen wichtig sind
+3.3 Beziehung erstellen
+- Drag & Drop zwischen Tabellen
+- Beziehung bearbeiten (Kardinalität, Kreuzfilterrichtung)
+3.4 Datumstabelle erstellen
+- Warum eigene Datumstabelle nötig
+- DAX-Formel zum Erstellen:
+  Datum = ADDCOLUMNS(CALENDAR(DATE(2020,1,1), TODAY()), "Jahr", YEAR([Date]), "Monat", MONTH([Date]), "MonatName", FORMAT([Date],"MMMM"), "Quartal", "Q" & QUARTER([Date]), "KW", WEEKNUM([Date]))
+- Als Datumstabelle markieren (Menüpfad)
+3.5 PERNR als Schlüssel
+- Personalnummer verbindet alle SAP-Tabellen
+
+4. MODUL 4: DAX MEASURES
+4.1 Was ist ein Measure vs. berechnete Spalte
+4.2 Neues Measure erstellen
+- Menüpfad: Modellierung → Neues Measure
+4.3 Basis-Measures für HR:
+
+Headcount:
+Headcount = COUNTROWS(Mitarbeiter)
+
+FTE:
+FTE = SUMX(Mitarbeiter, Mitarbeiter[Beschäftigungsgrad]/100)
+
+Krankheitstage:
+Krankheitstage = SUM(Abwesenheiten[Kalendertage])
+
+Sollarbeitstage:
+Sollarbeitstage = [Headcount] * 21
+
+Krankenquote:
+Krankenquote = DIVIDE([Krankheitstage], [Sollarbeitstage], 0)
+
+Krankenquote ohne Langzeit (>30 Tage):
+Krankenquote_ohne_LZ = 
+VAR KrankheitstageKurz = CALCULATE([Krankheitstage], FILTER(Abwesenheiten, Abwesenheiten[Kalendertage] <= 30))
+RETURN DIVIDE(KrankheitstageKurz, [Sollarbeitstage], 0)
+
+Austritte:
+Austritte = CALCULATE(COUNTROWS(Mitarbeiter), Mitarbeiter[Austritt] <> BLANK())
+
+Durchschnittlicher Headcount:
+Avg_Headcount = AVERAGEX(VALUES(Datum[Monat]), [Headcount])
+
+Fluktuation:
+Fluktuation = DIVIDE([Austritte], [Avg_Headcount], 0) * 100
+
+4.4 Zeitintelligenz-Measures:
+
+Vorjahreswert:
+Headcount_VJ = CALCULATE([Headcount], SAMEPERIODLASTYEAR(Datum[Date]))
+
+Vormonat:
+Headcount_VM = CALCULATE([Headcount], PREVIOUSMONTH(Datum[Date]))
+
+Year-to-Date:
+Headcount_YTD = TOTALYTD([Headcount], Datum[Date])
+
+Delta zum Vorjahr:
+Delta_VJ = [Headcount] - [Headcount_VJ]
+
+Delta Prozent:
+Delta_VJ_Proz = DIVIDE([Delta_VJ], [Headcount_VJ], 0)
+
+4.5 Measures formatieren
+- Prozent, Dezimalstellen, Währung einstellen
+
+5. MODUL 5: VISUALISIERUNGEN
+5.1 Visualisierungstypen und wann verwenden:
+- Karte/Card: Einzelne KPI-Zahl (Headcount, Krankenquote)
+- Balkendiagramm: Vergleiche (Abteilungen, Monate)
+- Liniendiagramm: Zeitverläufe (Headcount über 12 Monate)
+- Ringdiagramm: Anteile (Absenzen nach Typ)
+- Tachometer: Ziel vs Ist (Stellenplan-Erfüllung)
+- Tabelle/Matrix: Details mit Drill-down
+
+5.2 Erste Visualisierung erstellen
+- Schritt-für-Schritt: Visualisierung wählen → Felder reinziehen
+5.3 Visualisierung formatieren
+- Titel, Farben, Schriftgrössen
+5.4 Filter hinzufügen
+- Visualfilter, Seitenfilter, Berichtsfilter
+5.5 Slicer erstellen
+- Zeitraum-Auswahl, Abteilungs-Auswahl
+5.6 Bedingte Formatierung
+- Rot/Grün je nach Wert (Ampel-Logik)
+
+6. MODUL 6: DASHBOARD BAUEN
+6.1 Dashboard-Layout planen
+- F-Muster: Wichtigstes oben links
+- Max 6-8 Visualisierungen pro Seite
+6.2 Seite 1: Management-Übersicht erstellen
+- KPI-Karten oben: Headcount, Krankenquote, Fluktuation, Stellenplan
+- Trendlinie Headcount
+- Absenzquote nach Typ
+6.3 Seite 2: Detailanalyse erstellen
+- Matrix mit Drill-down nach Abteilung
+- Filter für Zeitraum und Kostenstelle
+6.4 Interaktionen zwischen Visualisierungen
+- Klick auf Balken filtert andere Visuals
+- Interaktionen bearbeiten (Menüpfad)
+6.5 Design-Tipps
+- Konsistente Farben (Firmen-CI)
+- Genügend Weissraum
+- Beschriftungen lesbar
+
+7. MODUL 7: VERÖFFENTLICHEN & TEILEN
+7.1 Power BI Service (app.powerbi.com)
+- Konto erstellen/anmelden
+- Unterschied Desktop vs Service
+7.2 Bericht veröffentlichen
+- Menüpfad: Datei → Veröffentlichen → Arbeitsbereich wählen
+7.3 Arbeitsbereich einrichten
+7.4 Dashboard erstellen (aus Bericht)
+- Visualisierung anheften
+7.5 Bericht teilen
+- Link teilen, Zugriff verwalten
+7.6 Automatische Aktualisierung einrichten
+- Geplante Aktualisierung (täglich, wöchentlich)
+- Gateway für lokale Daten (IT einbeziehen)
+7.7 Row-Level Security (RLS)
+- Abteilungsleiter sehen nur eigene Daten
+- Rolle erstellen, DAX-Filter: [Abteilung] = USERPRINCIPALNAME()
+
+8. TROUBLESHOOTING
+8.1 Häufige Fehler beim Import
+- Encoding-Probleme (UTF-8)
+- Falsches Dezimaltrennzeichen (Punkt vs Komma)
+- Datum wird als Text erkannt
+8.2 Häufige DAX-Fehler
+- Zirkelbezug
+- Division durch Null (DIVIDE verwenden)
+- Falscher Filterkontext
+8.3 Beziehungsprobleme
+- Mehrdeutige Beziehungen
+- Fehlende Beziehung
+8.4 Performance-Probleme
+- Zu viele Spalten importiert
+- Berechnete Spalten vs Measures
+
+9. ANHANG
+9.1 DAX Cheat Sheet (alle HR-Formeln auf einer Seite)
+9.2 Checkliste: Neuen Report erstellen
+9.3 Glossar (Power Query, DAX, Measure, etc.)
+
+FORMAT-ANWEISUNGEN:
+- Jeder Schritt nummeriert
+- Menüpfade in Format: Reiter → Gruppe → Button
+- DAX-Formeln in Codeblock/Monospace
+- Tipps und Warnungen hervorheben
+- Screenshots beschreiben wo sinnvoll: [Screenshot: Beschreibung was zu sehen sein sollte]
+- Sprache: Deutsch (Schweiz), Du-Form
diff --git a/training/Power BI Schulungshandbuch fuer HR.html b/training/Power BI Schulungshandbuch fuer HR.html
new file mode 100644
index 0000000..8e588ce
--- /dev/null
+++ b/training/Power BI Schulungshandbuch fuer HR.html	
@@ -0,0 +1,556 @@
+<!DOCTYPE html>
+<html lang="de-CH">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Power BI Schulungshandbuch für HR</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --accent: #1f6feb;
+      --accent-soft: #e0f2fe;
+      --text: #0f172a;
+      --muted: #475569;
+      --bg: #f8fafc;
+      --card: #ffffff;
+      --border: #e2e8f0;
+      --warning: #f97316;
+      --success: #16a34a;
+      --code: #0b1020;
+    }
+    body {
+      margin: 0;
+      font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+      color: var(--text);
+      background: var(--bg);
+      line-height: 1.7;
+    }
+    header {
+      background: linear-gradient(120deg, #e0f2fe 0%, #eef2ff 100%);
+      padding: 40px 24px 24px;
+      border-bottom: 1px solid var(--border);
+    }
+    header h1 {
+      margin: 0 0 8px 0;
+      font-size: 2.2rem;
+    }
+    header p {
+      margin: 6px 0;
+      color: var(--muted);
+    }
+    main {
+      max-width: 1050px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+    section {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 26px;
+      margin-bottom: 22px;
+      box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+    }
+    h2 {
+      margin-top: 0;
+      color: #111827;
+      border-bottom: 2px solid var(--border);
+      padding-bottom: 6px;
+    }
+    h3 {
+      margin-bottom: 6px;
+      color: #1e293b;
+    }
+    h4 {
+      margin: 14px 0 6px;
+      color: #1f2937;
+    }
+    .badge {
+      display: inline-block;
+      padding: 2px 10px;
+      border-radius: 999px;
+      font-size: 0.85rem;
+      background: var(--accent-soft);
+      color: #0369a1;
+      margin-left: 8px;
+    }
+    ul, ol {
+      margin: 8px 0 16px 24px;
+    }
+    .callout {
+      border-left: 4px solid var(--accent);
+      background: #eef2ff;
+      padding: 12px 16px;
+      border-radius: 8px;
+      margin: 12px 0;
+      color: #1e293b;
+    }
+    .warning {
+      border-left-color: var(--warning);
+      background: #fff7ed;
+    }
+    .success {
+      border-left-color: var(--success);
+      background: #ecfdf3;
+    }
+    pre {
+      background: var(--code);
+      color: #e2e8f0;
+      padding: 16px;
+      border-radius: 10px;
+      overflow-x: auto;
+    }
+    code {
+      font-family: "Consolas", "Courier New", monospace;
+    }
+    figure {
+      margin: 0;
+      padding: 0;
+    }
+    figcaption {
+      color: var(--muted);
+      font-size: 0.9rem;
+      margin-top: 8px;
+    }
+    .grid-two {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 16px;
+    }
+    .grid-three {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+      gap: 16px;
+    }
+    .kpi-list li {
+      margin-bottom: 4px;
+    }
+    .checklist li {
+      margin-bottom: 6px;
+    }
+    .small {
+      font-size: 0.92rem;
+      color: var(--muted);
+    }
+    .flow-box {
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 12px;
+      background: #f1f5f9;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Power BI Schulungshandbuch für HR</h1>
+    <p>Für 3–4 HR-Mitarbeiterinnen (Schweiz) mit wenig IT-Kenntnissen und Excel-Basis.</p>
+    <p class="small">Hinweis: Eine Word-Version ist nicht im Repo enthalten (Binary-Dateien werden beim PR-Erstellen nicht unterstützt).</p>
+  </header>
+
+  <main>
+    <section>
+      <h2>Überblick</h2>
+      <div class="grid-two">
+        <div>
+          <h3>Zielgruppe</h3>
+          <ul>
+            <li>3–4 HR-Mitarbeiterinnen (Schweiz)</li>
+            <li>Excel: Basis + SVERWEIS</li>
+            <li>Technikaffinität: 5–6/10</li>
+            <li>Keine Power BI Vorkenntnisse</li>
+          </ul>
+        </div>
+        <div>
+          <h3>Zielgruppen der Reports</h3>
+          <ul>
+            <li>Geschäftsleitung</li>
+            <li>Verwaltungsrat</li>
+            <li>Finanzbuchhaltung</li>
+            <li>Abteilungsleiter</li>
+          </ul>
+        </div>
+      </div>
+
+      <h3>Datenquellen</h3>
+      <ul>
+        <li>SAP HCM/HRM (Infotypen PA0001, PA0002, PA0008, PA2001)</li>
+        <li>Rexx HR-System (Stellenplan, Pulsumfrage, MA-Zufriedenheit)</li>
+        <li>Excel/CSV (Kununu-Score, Refline/Time-to-hire)</li>
+      </ul>
+
+      <h3>KPIs (mit Periodizität)</h3>
+      <ul class="kpi-list">
+        <li>Headcount/FTE (monatlich)</li>
+        <li>Fluktuation (monatlich)</li>
+        <li>Krankenquote gesamt + ohne Langzeitkrankheiten &gt;30 Tage (Quartal)</li>
+        <li>Überstunden (Quartal)</li>
+        <li>Produktivstunden (wöchentlich)</li>
+        <li>Ferientage/GLZ-Saldi (jährlich)</li>
+        <li>Stellenplan Soll vs Ist (monatlich, Rexx)</li>
+        <li>Lohnkosten (monatlich)</li>
+        <li>Time to hire (Quartal)</li>
+        <li>Kununu Score (monatlich)</li>
+        <li>Pulsumfrage (Quartal, Rexx)</li>
+        <li>MA-Zufriedenheitsumfrage (jährlich, Rexx)</li>
+      </ul>
+
+      <figure>
+        <svg width="100%" height="260" viewBox="0 0 980 260" role="img" aria-label="Datenfluss von Quellen zu Power BI und Reports">
+          <defs>
+            <linearGradient id="box" x1="0" x2="1">
+              <stop offset="0%" stop-color="#e0f2fe"/>
+              <stop offset="100%" stop-color="#eef2ff"/>
+            </linearGradient>
+            <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+              <path d="M0,0 L9,3 L0,6 Z" fill="#64748b" />
+            </marker>
+          </defs>
+          <rect x="20" y="30" width="240" height="60" rx="12" fill="url(#box)" stroke="#94a3b8" />
+          <text x="140" y="65" text-anchor="middle" font-size="14" fill="#0f172a">SAP HCM/HRM</text>
+
+          <rect x="20" y="120" width="240" height="60" rx="12" fill="url(#box)" stroke="#94a3b8" />
+          <text x="140" y="155" text-anchor="middle" font-size="14" fill="#0f172a">Rexx HR-System</text>
+
+          <rect x="20" y="210" width="240" height="60" rx="12" fill="url(#box)" stroke="#94a3b8" />
+          <text x="140" y="245" text-anchor="middle" font-size="14" fill="#0f172a">Excel/CSV</text>
+
+          <rect x="350" y="100" width="260" height="80" rx="14" fill="#1f6feb" opacity="0.12" stroke="#1f6feb" />
+          <text x="480" y="145" text-anchor="middle" font-size="16" fill="#1f6feb">Power BI Desktop</text>
+
+          <rect x="700" y="70" width="260" height="120" rx="14" fill="#ecfeff" stroke="#0ea5e9" />
+          <text x="830" y="120" text-anchor="middle" font-size="14" fill="#0f172a">Berichte &amp; Dashboards</text>
+          <text x="830" y="145" text-anchor="middle" font-size="12" fill="#475569">GL · VR · Finanzen · Abteilungen</text>
+
+          <line x1="260" y1="60" x2="350" y2="120" stroke="#64748b" stroke-width="2" marker-end="url(#arrow)" />
+          <line x1="260" y1="150" x2="350" y2="140" stroke="#64748b" stroke-width="2" />
+          <line x1="260" y1="240" x2="350" y2="160" stroke="#64748b" stroke-width="2" />
+          <line x1="610" y1="140" x2="700" y2="130" stroke="#64748b" stroke-width="2" marker-end="url(#arrow)" />
+        </svg>
+        <figcaption>Grafik: Datenfluss von HR-Quellen in Power BI bis zu den Zielgruppen-Reports.</figcaption>
+      </figure>
+    </section>
+
+    <section>
+      <h2>Vorbereitung: Arbeitsordner &amp; Dateien <span class="badge">Start</span></h2>
+      <ol>
+        <li>Lege einen Ordner <strong>HR-Power-BI</strong> an.</li>
+        <li>Erstelle Unterordner: <code>01_Rohdaten</code>, <code>02_Transformiert</code>, <code>03_Berichte</code>.</li>
+        <li>Speichere Exporte aus SAP/Rexx/Excel immer in <code>01_Rohdaten</code>.</li>
+        <li>Benutze klare Dateinamen mit Datum, z. B. <code>SAP_PA0001_2025-01.csv</code>.</li>
+      </ol>
+      <div class="callout success">Ziel: Alle Teammitglieder finden Dateien sofort wieder und arbeiten mit den gleichen Daten.</div>
+    </section>
+
+    <section>
+      <h2>1. Grundlagen &amp; Datenimport <span class="badge">Modul 1</span></h2>
+      <h3>1.1 Installation &amp; erster Start</h3>
+      <ol>
+        <li>Gehe auf <strong>https://powerbi.microsoft.com/de-de/desktop/</strong> und lade Power BI Desktop herunter.</li>
+        <li>Installiere mit Standardoptionen (Weiter → Installieren → Fertigstellen).</li>
+        <li>Starte Power BI Desktop und wähle <strong>Leerer Bericht</strong>.</li>
+        <li>Speichere die Datei als <code>HR-Reporting.pbix</code> in <code>03_Berichte</code>.</li>
+      </ol>
+      <div class="callout">Tipp: Speichere früh und oft – Power BI Desktop hat keine Auto-Speicherung.</div>
+
+      <h3>1.2 Oberfläche kennenlernen</h3>
+      <ol>
+        <li>Links: Berichtsansicht (Diagramme), Datenansicht (Tabellen), Modellansicht (Beziehungen).</li>
+        <li>Rechts: Visualisierungen (Diagramm-Typ), Felder (Spalten), Filter.</li>
+        <li>Oben: Menüband mit allen Funktionen.</li>
+      </ol>
+      <div class="callout">Merksatz: <strong>Felder</strong> sind die Daten, <strong>Visualisierungen</strong> sind die Diagramme.</div>
+
+      <h3>1.3 Excel importieren (Kununu, Refline)</h3>
+      <ol>
+        <li><strong>Start → Daten abrufen → Excel</strong>.</li>
+        <li>Datei auswählen → <strong>Öffnen</strong>.</li>
+        <li>Im Navigator das richtige Blatt wählen (z. B. <code>Kununu_Score</code>).</li>
+        <li>Klicke <strong>Laden</strong>.</li>
+      </ol>
+      <div class="callout warning">Warnung: Excel-Tabellen ohne Überschrift führen zu „Spalte1/Spalte2“. Nutze in Power Query „Erste Zeile als Überschrift“.</div>
+
+      <h3>1.4 CSV importieren (Time-to-hire)</h3>
+      <ol>
+        <li><strong>Start → Daten abrufen → Text/CSV</strong>.</li>
+        <li>Datei auswählen → <strong>Öffnen</strong>.</li>
+        <li>Prüfe <strong>Trennzeichen</strong> (meist Semikolon).</li>
+        <li>Setze <strong>Dateiursprung</strong> auf UTF-8.</li>
+      </ol>
+      <div class="callout">Tipp: Umlaute (ä, ö, ü) sind das beste Zeichen, ob die Kodierung stimmt.</div>
+
+      <h3>1.5 SAP-Exporte importieren</h3>
+      <ol>
+        <li>SAP-Export lokal speichern (z. B. PA0001, PA0002, PA0008, PA2001).</li>
+        <li>Jeden Infotyp als eigene Tabelle laden.</li>
+        <li>Tabellen sofort umbenennen: <code>Mitarbeiter_Org</code>, <code>Mitarbeiter_Personal</code>, <code>Mitarbeiter_Lohn</code>, <code>Absenzen</code>.</li>
+      </ol>
+      <div class="callout warning">Warnung: SAP-Daten enthalten oft führende Nullen bei Personalnummern (PERNR). Nicht löschen!</div>
+    </section>
+
+    <section>
+      <h2>2. Power Query Editor <span class="badge">Modul 2</span></h2>
+      <h3>2.1 Power Query öffnen</h3>
+      <ol>
+        <li><strong>Start → Daten transformieren</strong>.</li>
+        <li>Du siehst eine Vorschau-Tabelle pro Datenquelle.</li>
+      </ol>
+
+      <h3>2.2 Erste Zeile als Überschrift</h3>
+      <ol>
+        <li><strong>Transformieren → Erste Zeile als Überschriften</strong>.</li>
+        <li>Kontrolliere, ob Spaltennamen sinnvoll sind.</li>
+      </ol>
+
+      <h3>2.3 Datentypen richtig setzen</h3>
+      <ol>
+        <li>Datumsspalten: <strong>Datum</strong> auswählen.</li>
+        <li>Zahlen: <strong>Ganze Zahl</strong> oder <strong>Dezimalzahl</strong>.</li>
+        <li>Text: <strong>Text</strong>.</li>
+      </ol>
+      <div class="callout warning">Warnung: Schweizer Datumsformat (TT.MM.JJJJ) braucht oft „Datentyp mit Gebietsschema (Deutsch – Schweiz)“.</div>
+
+      <h3>2.4 Spalten entfernen / behalten</h3>
+      <ol>
+        <li>Unnötige Spalten markieren → <strong>Spalten entfernen</strong>.</li>
+        <li>Wenn nur 6–8 Spalten relevant sind: <strong>Andere Spalten entfernen</strong>.</li>
+      </ol>
+
+      <h3>2.5 Zeilen filtern</h3>
+      <ol>
+        <li>Filterpfeil in der Spalte <strong>Status</strong>.</li>
+        <li>Nur aktive Mitarbeitende wählen.</li>
+        <li>Zeitraum (z. B. letztes Jahr) filtern.</li>
+      </ol>
+
+      <h3>2.6 Werte ersetzen</h3>
+      <ol>
+        <li><strong>Transformieren → Werte ersetzen</strong>.</li>
+        <li><code>null</code> durch <code>0</code> ersetzen.</li>
+        <li>Codes wie <code>A</code> in Klartext (<code>Aktiv</code>) umwandeln.</li>
+      </ol>
+
+      <h3>2.7 Spalten teilen / zusammenführen</h3>
+      <ol>
+        <li>Spalte auswählen → <strong>Spalte teilen</strong> (z. B. Vorname/Nachname).</li>
+        <li>Mehrere Spalten zusammenführen (z. B. Vorname + Nachname).</li>
+      </ol>
+
+      <h3>2.8 Berechnete Spalte</h3>
+      <ol>
+        <li><strong>Spalte hinzufügen → Benutzerdefinierte Spalte</strong>.</li>
+        <li>Beispiel: FTE = Beschäftigungsgrad / 100.</li>
+      </ol>
+
+      <h3>2.9 Schliessen &amp; Laden</h3>
+      <ol>
+        <li><strong>Start → Schliessen &amp; Laden</strong>.</li>
+        <li>„Laden in“ nutzen, wenn du nur eine Verbindung brauchst.</li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>3. Datenmodell <span class="badge">Modul 3</span></h2>
+      <h3>3.1 Beziehungen verstehen</h3>
+      <div class="grid-three">
+        <div class="flow-box">
+          <strong>1:n Beziehung</strong>
+          <p class="small">Eine Personalnummer in der Mitarbeitertabelle kann viele Abwesenheitszeilen haben.</p>
+        </div>
+        <div class="flow-box">
+          <strong>1:1 Beziehung</strong>
+          <p class="small">Eine Personalnummer hat genau eine Detailzeile (z. B. Stammdaten).</p>
+        </div>
+        <div class="flow-box">
+          <strong>Filterfluss</strong>
+          <p class="small">Filter sollen meistens nur in eine Richtung laufen (Einweg).</p>
+        </div>
+      </div>
+
+      <h3>3.2 Beziehung erstellen</h3>
+      <ol>
+        <li>Modellansicht öffnen (Beziehungs-Icon links).</li>
+        <li>Spalte <strong>PERNR</strong> von Tabelle A auf Tabelle B ziehen.</li>
+        <li>Kardinalität prüfen (1:n) und Kreuzfilterrichtung auf Einweg setzen.</li>
+      </ol>
+
+      <h3>3.3 Datumstabelle erstellen</h3>
+      <ol>
+        <li><strong>Modellierung → Neue Tabelle</strong>.</li>
+        <li>DAX-Formel eingeben:</li>
+      </ol>
+      <pre><code>Datum = ADDCOLUMNS(
+    CALENDAR(DATE(2020,1,1), TODAY()),
+    "Jahr", YEAR([Date]),
+    "Monat", MONTH([Date]),
+    "MonatName", FORMAT([Date],"MMMM"),
+    "Quartal", "Q" &amp; QUARTER([Date]),
+    "KW", WEEKNUM([Date])
+)</code></pre>
+      <ol start="3">
+        <li><strong>Tabellen-Tools → Als Datumstabelle markieren → Datum[Date]</strong>.</li>
+      </ol>
+
+      <h3>3.4 PERNR als Schlüssel</h3>
+      <ol>
+        <li>PERNR in allen SAP-Tabellen verwenden.</li>
+        <li>In Rexx/Excel dieselbe Spalte sicherstellen.</li>
+        <li>Bei führenden Nullen: Datentyp Text setzen (nicht Zahl).</li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>4. DAX Measures <span class="badge">Modul 4</span></h2>
+      <h3>4.1 Measure vs. berechnete Spalte</h3>
+      <ul>
+        <li><strong>Measure:</strong> wird im Bericht berechnet, schneller und flexibler.</li>
+        <li><strong>Berechnete Spalte:</strong> wird in jeder Zeile gespeichert (macht Modell grösser).</li>
+      </ul>
+
+      <h3>4.2 Neues Measure erstellen</h3>
+      <ol>
+        <li><strong>Modellierung → Neues Measure</strong>.</li>
+        <li>Formel eingeben und Enter drücken.</li>
+        <li>Measure klar benennen (z. B. <code>Headcount</code>, <code>Fluktuation</code>).</li>
+      </ol>
+
+      <h3>4.3 Basis-Measures für HR</h3>
+      <pre><code>Headcount = COUNTROWS(Mitarbeiter)
+FTE = SUMX(Mitarbeiter, Mitarbeiter[Beschäftigungsgrad]/100)
+Krankheitstage = SUM(Abwesenheiten[Kalendertage])
+Sollarbeitstage = [Headcount] * 21
+Krankenquote = DIVIDE([Krankheitstage], [Sollarbeitstage], 0)
+Krankenquote_ohne_LZ =
+VAR KrankheitstageKurz = CALCULATE([Krankheitstage], FILTER(Abwesenheiten, Abwesenheiten[Kalendertage] <= 30))
+RETURN DIVIDE(KrankheitstageKurz, [Sollarbeitstage], 0)
+Austritte = CALCULATE(COUNTROWS(Mitarbeiter), Mitarbeiter[Austritt] <> BLANK())
+Avg_Headcount = AVERAGEX(VALUES(Datum[Monat]), [Headcount])
+Fluktuation = DIVIDE([Austritte], [Avg_Headcount], 0) * 100</code></pre>
+
+      <h3>4.4 Zeitintelligenz</h3>
+      <pre><code>Headcount_VJ = CALCULATE([Headcount], SAMEPERIODLASTYEAR(Datum[Date]))
+Headcount_VM = CALCULATE([Headcount], PREVIOUSMONTH(Datum[Date]))
+Headcount_YTD = TOTALYTD([Headcount], Datum[Date])
+Delta_VJ = [Headcount] - [Headcount_VJ]
+Delta_VJ_Proz = DIVIDE([Delta_VJ], [Headcount_VJ], 0)</code></pre>
+
+      <h3>4.5 Measures formatieren</h3>
+      <ol>
+        <li>Measure auswählen.</li>
+        <li><strong>Measure-Tools → Format</strong> (Prozent, Währung, Dezimalstellen).</li>
+      </ol>
+      <div class="callout">Tipp: Für Krankenquote Prozentformat mit 1 Dezimalstelle verwenden.</div>
+    </section>
+
+    <section>
+      <h2>5. Visualisierungen <span class="badge">Modul 5</span></h2>
+      <h3>5.1 Welche Visualisierung wofür?</h3>
+      <ul>
+        <li><strong>Karte/Card:</strong> Einzelne KPI-Zahl (Headcount, Fluktuation).</li>
+        <li><strong>Balken:</strong> Vergleich von Abteilungen/Monaten.</li>
+        <li><strong>Linie:</strong> Trendverlauf (Headcount über 12 Monate).</li>
+        <li><strong>Ring:</strong> Anteil Absenzen nach Typ.</li>
+        <li><strong>Tachometer:</strong> Ziel vs Ist (Stellenplan).</li>
+        <li><strong>Matrix:</strong> Detailansicht mit Drill-down.</li>
+      </ul>
+
+      <h3>5.2 Erste Visualisierung erstellen</h3>
+      <ol>
+        <li>Visualisierung auswählen (z. B. Karte).</li>
+        <li>Feld <code>Headcount</code> in Werte ziehen.</li>
+        <li>Visual rechts auf der Seite platzieren.</li>
+      </ol>
+
+      <h3>5.3 Visualisierung formatieren</h3>
+      <ol>
+        <li>Visual auswählen → <strong>Format</strong> (Pinsel).</li>
+        <li>Titel hinzufügen: „Headcount aktuell“.</li>
+        <li>Farben gemäss Firmen-CI setzen.</li>
+      </ol>
+
+      <h3>5.4 Filter &amp; Slicer</h3>
+      <ol>
+        <li>Filterbereich öffnen.</li>
+        <li>Feld <code>Abteilung</code> als Seitenfilter setzen.</li>
+        <li>Slicer für Zeitraum hinzufügen.</li>
+      </ol>
+
+      <div class="callout warning">Warnung: Zu viele Filter verwirren. Maximal 2–3 Slicer pro Seite.</div>
+    </section>
+
+    <section>
+      <h2>6. Dashboard bauen <span class="badge">Modul 6</span></h2>
+      <h3>6.1 Layout planen</h3>
+      <ol>
+        <li>Wichtigste KPIs oben links platzieren (F-Muster).</li>
+        <li>Maximal 6–8 Visuals pro Seite.</li>
+        <li>Genug Weissraum für bessere Lesbarkeit.</li>
+      </ol>
+
+      <h3>6.2 Management-Übersicht (Seite 1)</h3>
+      <ol>
+        <li>KPI-Karten: Headcount, Krankenquote, Fluktuation, Stellenplan.</li>
+        <li>Trendlinie Headcount (12 Monate).</li>
+        <li>Absenzquote nach Typ als Ringdiagramm.</li>
+      </ol>
+
+      <h3>6.3 Detailanalyse (Seite 2)</h3>
+      <ol>
+        <li>Matrix mit Drill-down nach Abteilung.</li>
+        <li>Slicer: Zeitraum und Kostenstelle.</li>
+      </ol>
+
+      <h3>6.4 Interaktionen</h3>
+      <ol>
+        <li><strong>Format → Interaktionen bearbeiten</strong>.</li>
+        <li>Prüfen, ob Klick auf Balken andere Visuals filtert.</li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>7. Veröffentlichen &amp; Teilen <span class="badge">Modul 7</span></h2>
+      <ol>
+        <li><strong>Datei → Veröffentlichen → Arbeitsbereich wählen</strong>.</li>
+        <li>Im Service Visuals anheften → Dashboard erstellen.</li>
+        <li>Teilen-Link an Geschäftsleitung/Finanzen senden.</li>
+        <li>Geplante Aktualisierung einrichten (Gateway für lokale Daten).</li>
+      </ol>
+      <div class="callout">Tipp: Teste RLS im Service immer mit „Als Rolle anzeigen“.</div>
+    </section>
+
+    <section>
+      <h2>8. Troubleshooting <span class="badge">Modul 8</span></h2>
+      <h3>8.1 Häufige Import-Fehler</h3>
+      <ul>
+        <li>Umlaute falsch → Encoding auf UTF-8 stellen.</li>
+        <li>Datum als Text → Datentyp mit Gebietsschema Schweiz.</li>
+        <li>Dezimaltrennzeichen falsch → Gebietsschema prüfen.</li>
+      </ul>
+
+      <h3>8.2 DAX-Fehler</h3>
+      <ul>
+        <li>Zirkelbezug → berechnete Spalten vermeiden.</li>
+        <li>Division durch Null → <code>DIVIDE()</code> verwenden.</li>
+        <li>Filterkontext falsch → <code>CALCULATE()</code> prüfen.</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>9. Anhang: Cheat Sheet &amp; Checkliste <span class="badge">Modul 9</span></h2>
+      <h3>9.1 DAX Cheat Sheet</h3>
+      <pre><code>Headcount = COUNTROWS(Mitarbeiter)
+FTE = SUMX(Mitarbeiter, Mitarbeiter[Beschäftigungsgrad]/100)
+Krankenquote = DIVIDE([Krankheitstage], [Sollarbeitstage], 0)
+Fluktuation = DIVIDE([Austritte], [Avg_Headcount], 0) * 100</code></pre>
+
+      <h3>9.2 Checkliste: Neuer Report</h3>
+      <ul class="checklist">
+        <li>Datenquellen klären (SAP, Rexx, Excel/CSV).</li>
+        <li>Daten importieren und bereinigen (Power Query).</li>
+        <li>Beziehungen und Datumstabelle erstellen.</li>
+        <li>Measures bauen und formatieren.</li>
+        <li>Dashboard layouten, testen, veröffentlichen.</li>
+      </ul>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/training/Power BI Schulungshandbuch fuer HR.md b/training/Power BI Schulungshandbuch fuer HR.md
new file mode 100644
index 0000000..16bc1d8
--- /dev/null
+++ b/training/Power BI Schulungshandbuch fuer HR.md	
@@ -0,0 +1,320 @@
+# Power BI Schulungshandbuch für HR
+Word-Version: Nicht im Repo enthalten (Binary-Dateien werden beim PR-Erstellen nicht unterstützt).
+
+Zielgruppe: 3–4 HR-Mitarbeiterinnen (Schweiz), Excel-Basis + SVERWEIS, Technikaffinität 5–6/10, keine Power BI Vorkenntnisse.
+
+Datenquellen: SAP HCM/HRM (PA0001, PA0002, PA0008, PA2001), Rexx HR-System (Stellenplan, Pulsumfrage, MA-Zufriedenheit), Excel/CSV (Kununu-Score, Refline/Time-to-hire).
+
+KPIs: Headcount/FTE (monatlich), Fluktuation (monatlich), Krankenquote gesamt & ohne Langzeit >30 Tage (Quartal), Überstunden (Quartal), Produktivstunden (wöchentlich), Ferientage/GLZ-Saldi (jährlich), Stellenplan Soll vs Ist (monatlich), Lohnkosten (monatlich), Time to hire (Quartal), Kununu Score (monatlich), Pulsumfrage (Quartal), MA-Zufriedenheitsumfrage (jährlich).
+
+Zielgruppen der Reports: Geschäftsleitung, Verwaltungsrat, Finanzbuchhaltung, Abteilungsleiter.
+
+## 1. MODUL 1: GRUNDLAGEN & DATENIMPORT
+
+### 1.1 Power BI Desktop installieren und starten
+1. Schritt: Gehe auf https://powerbi.microsoft.com/de-de/desktop/ und lade Power BI Desktop herunter.
+2. Schritt: Installiere die Anwendung mit den Standardoptionen (Weiter → Installieren → Fertigstellen).
+3. Schritt: Starte Power BI Desktop über das Startmenü.
+
+[Screenshot: Startfenster von Power BI Desktop mit leeren Berichtsvorlagen].
+
+Tipp: Wenn der Download blockiert ist, wende Dich an die IT (Admin-Rechte erforderlich).
+
+### 1.2 Oberfläche kennenlernen
+1. Schritt: Wechsle links zwischen Berichtsansicht, Datenansicht und Modellansicht.
+2. Schritt: Erkenne die Bereiche: Menüband oben, Visualisierungen rechts, Felder-Bereich rechts, Seiten-Navigation links.
+3. Schritt: Klicke auf eine leere Seite, damit Visualisierungen verfügbar werden.
+
+[Screenshot: Power BI Desktop mit markierter Berichtsansicht, Visualisierungen und Felder-Bereich].
+
+### 1.3 Excel-Datei importieren
+1. Schritt: Reiter → Start → Daten abrufen → Excel.
+2. Schritt: Datei auswählen → Öffnen.
+3. Schritt: Im Navigator Tabelle oder Blatt auswählen → Laden.
+
+Warnung: Wenn Du im Navigator mehrere Tabellen auswählst, kann die Ladezeit steigen.
+
+Häufige Probleme und Lösungen:
+1. Problem: Falsche Spaltennamen → Lösung: Erste Zeile als Header setzen (siehe Modul 2).
+2. Problem: Zahlen als Text → Lösung: Datentyp korrigieren (siehe Modul 2).
+
+### 1.4 CSV importieren
+1. Schritt: Reiter → Start → Daten abrufen → Text/CSV.
+2. Schritt: Datei auswählen → Öffnen.
+3. Schritt: Im Vorschaufenster Trennzeichen und Kodierung prüfen.
+
+Warnung: In der Schweiz sind Umlaute oft nur mit UTF-8 korrekt. Stelle Kodierung auf UTF-8, falls nötig.
+
+Hinweis: CSV hat keine Formeln oder Formatierungen – nur Rohdaten.
+
+### 1.5 SAP-Export importieren
+1. Schritt: SAP-Export (z. B. TXT/CSV/XLSX) in einen lokalen Ordner speichern.
+2. Schritt: Reiter → Start → Daten abrufen → Text/CSV oder Excel wählen.
+3. Schritt: Im Navigator prüfen, ob die erste Zeile die Spaltenüberschriften enthält.
+
+Tipp: Wenn die Überschriften fehlen, nutze Power Query → Erste Zeile als Überschriften.
+
+## 2. MODUL 2: POWER QUERY EDITOR
+
+### 2.1 Power Query öffnen
+1. Schritt: Reiter → Start → Daten transformieren.
+
+[Screenshot: Button 'Daten transformieren' im Menüband].
+
+### 2.2 Erste Zeile als Header verwenden
+1. Schritt: Reiter → Transformieren → Erste Zeile als Überschriften.
+2. Schritt: Prüfe, ob die Spaltennamen korrekt sind.
+
+### 2.3 Datentypen ändern
+1. Schritt: Spalte auswählen (z. B. Eintrittsdatum).
+2. Schritt: Reiter → Transformieren → Datentyp → Datum.
+3. Schritt: Bei Zahlen Datentyp → Dezimalzahl oder Ganze Zahl.
+
+Warnung: Schweizer Datumsformat (TT.MM.JJJJ) wird manchmal als Text erkannt. In diesem Fall zuerst Datentyp Text, dann Datum mit Gebietsschema Schweiz (Deutsch).
+
+### 2.4 Spalten entfernen/behalten
+1. Schritt: Unnötige Spalten markieren.
+2. Schritt: Reiter → Start → Spalten entfernen.
+
+Tipp: Nutze "Andere Spalten entfernen", um nur relevante Spalten zu behalten.
+
+### 2.5 Zeilen filtern
+1. Schritt: Filterpfeil in der Spalte Status.
+2. Schritt: Nur aktive Mitarbeitende auswählen.
+3. Schritt: Zeitraumfilter z. B. letztes Jahr.
+
+### 2.6 Werte ersetzen
+1. Schritt: Reiter → Transformieren → Werte ersetzen.
+2. Schritt: null durch 0 ersetzen.
+3. Schritt: Codes (z. B. 'A') durch Klartext (z. B. 'Aktiv') ersetzen.
+
+### 2.7 Spalten teilen/zusammenführen
+1. Schritt: Spalte auswählen.
+2. Schritt: Reiter → Transformieren → Spalte teilen (nach Trennzeichen).
+3. Schritt: Für Zusammenführen: Reiter → Transformieren → Spalten zusammenführen.
+
+### 2.8 Berechnete Spalte hinzufügen
+1. Schritt: Reiter → Spalte hinzufügen → Benutzerdefinierte Spalte.
+2. Schritt: Formel eingeben (z. B. Beschäftigungsgrad/100).
+
+### 2.9 Schliessen und Laden
+1. Schritt: Reiter → Start → Schliessen & laden.
+2. Schritt: Unterschied: "Laden" speichert in Modell, "Laden in" erlaubt gezielte Ziele (z. B. nur Verbindung).
+
+## 3. MODUL 3: DATENMODELL
+
+### 3.1 Zur Modellansicht wechseln
+1. Schritt: Links auf die Modellansicht (Beziehungs-Icon) klicken.
+
+### 3.2 Beziehungen verstehen
+1. Schritt: 1:n = Eine Zeile in Tabelle A passt zu vielen Zeilen in Tabelle B.
+2. Schritt: 1:1 = Jede Zeile passt genau zu einer anderen Zeile.
+
+Warum wichtig: Beziehungen steuern, wie Filter zwischen Tabellen fliessen.
+
+### 3.3 Beziehung erstellen
+1. Schritt: Spalte in Tabelle A auf passende Spalte in Tabelle B ziehen (Drag & Drop).
+2. Schritt: Beziehung prüfen → Kardinalität und Kreuzfilterrichtung einstellen.
+
+Tipp: Nutze meistens Einweg-Filterrichtung, um Mehrdeutigkeiten zu vermeiden.
+
+### 3.4 Datumstabelle erstellen
+1. Schritt: Reiter → Modellierung → Neue Tabelle.
+2. Schritt: DAX-Formel einfügen:
+
+```
+Datum = ADDCOLUMNS(CALENDAR(DATE(2020,1,1), TODAY()), "Jahr", YEAR([Date]), "Monat", MONTH([Date]), "MonatName", FORMAT([Date],"MMMM"), "Quartal", "Q" & QUARTER([Date]), "KW", WEEKNUM([Date]))
+```
+
+3. Schritt: Reiter → Tabellen-Tools → Als Datumstabelle markieren → Datum[Date] auswählen.
+
+### 3.5 PERNR als Schlüssel
+1. Schritt: Verwende die Personalnummer (PERNR) als Schlüssel zwischen allen SAP-Tabellen (PA0001, PA0002, PA0008, PA2001).
+
+## 4. MODUL 4: DAX MEASURES
+
+### 4.1 Was ist ein Measure vs. berechnete Spalte
+1. Schritt: Measure berechnet sich dynamisch im Berichtskontext.
+2. Schritt: Berechnete Spalte wird pro Zeile gespeichert und erhöht Modellgrösse.
+
+### 4.2 Neues Measure erstellen
+1. Schritt: Reiter → Modellierung → Neues Measure.
+2. Schritt: Formel eingeben und mit Enter bestätigen.
+
+### 4.3 Basis-Measures für HR
+```
+Headcount = COUNTROWS(Mitarbeiter)
+FTE = SUMX(Mitarbeiter, Mitarbeiter[Beschäftigungsgrad]/100)
+Krankheitstage = SUM(Abwesenheiten[Kalendertage])
+Sollarbeitstage = [Headcount] * 21
+Krankenquote = DIVIDE([Krankheitstage], [Sollarbeitstage], 0)
+Krankenquote_ohne_LZ =
+VAR KrankheitstageKurz = CALCULATE([Krankheitstage], FILTER(Abwesenheiten, Abwesenheiten[Kalendertage] <= 30))
+RETURN DIVIDE(KrankheitstageKurz, [Sollarbeitstage], 0)
+Austritte = CALCULATE(COUNTROWS(Mitarbeiter), Mitarbeiter[Austritt] <> BLANK())
+Avg_Headcount = AVERAGEX(VALUES(Datum[Monat]), [Headcount])
+Fluktuation = DIVIDE([Austritte], [Avg_Headcount], 0) * 100
+```
+
+### 4.4 Zeitintelligenz-Measures
+```
+Headcount_VJ = CALCULATE([Headcount], SAMEPERIODLASTYEAR(Datum[Date]))
+Headcount_VM = CALCULATE([Headcount], PREVIOUSMONTH(Datum[Date]))
+Headcount_YTD = TOTALYTD([Headcount], Datum[Date])
+Delta_VJ = [Headcount] - [Headcount_VJ]
+Delta_VJ_Proz = DIVIDE([Delta_VJ], [Headcount_VJ], 0)
+```
+
+### 4.5 Measures formatieren
+1. Schritt: Measure auswählen.
+2. Schritt: Reiter → Measure-Tools → Format → Prozent, Dezimalstellen, Währung einstellen.
+
+## 5. MODUL 5: VISUALISIERUNGEN
+
+### 5.1 Visualisierungstypen und wann verwenden
+1. Karte/Card: Einzelne KPI-Zahl (Headcount, Krankenquote).
+2. Balkendiagramm: Vergleiche (Abteilungen, Monate).
+3. Liniendiagramm: Zeitverläufe (Headcount über 12 Monate).
+4. Ringdiagramm: Anteile (Absenzen nach Typ).
+5. Tachometer: Ziel vs Ist (Stellenplan-Erfüllung).
+6. Tabelle/Matrix: Details mit Drill-down.
+
+### 5.2 Erste Visualisierung erstellen
+1. Schritt: Visualisierung im Bereich Visualisierungen auswählen.
+2. Schritt: Felder per Drag & Drop in Achse/Werte ziehen.
+3. Schritt: Visualisierung auf der Seite positionieren.
+
+### 5.3 Visualisierung formatieren
+1. Schritt: Visual auswählen → Reiter Visual → Format (Pinsel).
+2. Schritt: Titel, Farben, Schriftgrössen anpassen.
+
+### 5.4 Filter hinzufügen
+1. Schritt: Filterbereich öffnen.
+2. Schritt: Felder in Visualfilter, Seitenfilter oder Berichtsfilter ziehen.
+
+### 5.5 Slicer erstellen
+1. Schritt: Visualisierung → Datenschnitt (Slicer) wählen.
+2. Schritt: Feld (z. B. Zeitraum, Abteilung) hinzufügen.
+
+### 5.6 Bedingte Formatierung
+1. Schritt: In Tabelle/Matrix auf Wertefeld klicken → Bedingte Formatierung.
+2. Schritt: Regeln definieren (z. B. Rot/Grün je nach Wert).
+
+Tipp: Ampel-Logik funktioniert gut für Krankenquote und Fluktuation.
+
+## 6. MODUL 6: DASHBOARD BAUEN
+
+### 6.1 Dashboard-Layout planen
+1. Schritt: F-Muster beachten – Wichtigstes oben links.
+2. Schritt: Maximal 6–8 Visualisierungen pro Seite.
+
+### 6.2 Seite 1: Management-Übersicht erstellen
+1. Schritt: KPI-Karten oben: Headcount, Krankenquote, Fluktuation, Stellenplan.
+2. Schritt: Trendlinie Headcount über 12 Monate.
+3. Schritt: Absenzquote nach Typ als Ringdiagramm.
+
+### 6.3 Seite 2: Detailanalyse erstellen
+1. Schritt: Matrix mit Drill-down nach Abteilung.
+2. Schritt: Filter für Zeitraum und Kostenstelle (Slicer).
+
+### 6.4 Interaktionen zwischen Visualisierungen
+1. Schritt: Reiter → Format → Interaktionen bearbeiten.
+2. Schritt: Prüfen, ob Klick auf Balken andere Visuals filtert oder hervorhebt.
+
+### 6.5 Design-Tipps
+1. Schritt: Konsistente Farben (Firmen-CI).
+2. Schritt: Genügend Weissraum.
+3. Schritt: Beschriftungen gut lesbar.
+
+## 7. MODUL 7: VERÖFFENTLICHEN & TEILEN
+
+### 7.1 Power BI Service (app.powerbi.com)
+1. Schritt: Konto erstellen/anmelden.
+2. Schritt: Unterschied Desktop vs Service: Desktop = Modell/Bericht, Service = Teilen/Dashboard.
+
+### 7.2 Bericht veröffentlichen
+1. Schritt: Reiter → Datei → Veröffentlichen → Arbeitsbereich wählen.
+
+### 7.3 Arbeitsbereich einrichten
+1. Schritt: Im Service → Arbeitsbereich erstellen.
+2. Schritt: Zugriffsrechte für Geschäftsleitung/Finanzbuchhaltung setzen.
+
+### 7.4 Dashboard erstellen (aus Bericht)
+1. Schritt: Im Service Visualisierung auswählen → Anheften.
+2. Schritt: Neues Dashboard erstellen oder bestehendes wählen.
+
+### 7.5 Bericht teilen
+1. Schritt: Teilen → Link generieren.
+2. Schritt: Zugriff verwalten (Rollen/Personen).
+
+### 7.6 Automatische Aktualisierung einrichten
+1. Schritt: Datensatz → Geplante Aktualisierung (täglich/wöchentlich).
+2. Schritt: Für lokale Daten Gateway einrichten (IT einbeziehen).
+
+### 7.7 Row-Level Security (RLS)
+1. Schritt: Reiter → Modellierung → Rollen verwalten.
+2. Schritt: Rolle erstellen, Filter setzen: [Abteilung] = USERPRINCIPALNAME().
+
+Warnung: RLS muss im Service getestet werden (Als Rolle anzeigen).
+
+## 8. TROUBLESHOOTING
+
+### 8.1 Häufige Fehler beim Import
+1. Problem: Encoding-Probleme (UTF-8) → Lösung: Kodierung im CSV-Import anpassen.
+2. Problem: Dezimaltrennzeichen (Punkt vs Komma) → Lösung: Datentyp mit Gebietsschema Schweiz setzen.
+3. Problem: Datum als Text → Lösung: Datentyp Datum und richtiges Gebietsschema.
+
+### 8.2 Häufige DAX-Fehler
+1. Problem: Zirkelbezug → Lösung: Berechnete Spalten vermeiden, Measures nutzen.
+2. Problem: Division durch Null → Lösung: DIVIDE() verwenden.
+3. Problem: Falscher Filterkontext → Lösung: Filter mit CALCULATE prüfen.
+
+### 8.3 Beziehungsprobleme
+1. Problem: Mehrdeutige Beziehungen → Lösung: Eine Beziehung aktiv, andere inaktiv setzen.
+2. Problem: Fehlende Beziehung → Lösung: Schlüsselspalten prüfen (PERNR, Datum).
+
+### 8.4 Performance-Probleme
+1. Problem: Zu viele Spalten importiert → Lösung: Spalten reduzieren.
+2. Problem: Zu viele berechnete Spalten → Lösung: Measures bevorzugen.
+
+## 9. ANHANG
+
+### 9.1 DAX Cheat Sheet (alle HR-Formeln)
+```
+Headcount = COUNTROWS(Mitarbeiter)
+FTE = SUMX(Mitarbeiter, Mitarbeiter[Beschäftigungsgrad]/100)
+Krankheitstage = SUM(Abwesenheiten[Kalendertage])
+Sollarbeitstage = [Headcount] * 21
+Krankenquote = DIVIDE([Krankheitstage], [Sollarbeitstage], 0)
+Krankenquote_ohne_LZ = VAR KrankheitstageKurz = CALCULATE([Krankheitstage], FILTER(Abwesenheiten, Abwesenheiten[Kalendertage] <= 30))
+RETURN DIVIDE(KrankheitstageKurz, [Sollarbeitstage], 0)
+Austritte = CALCULATE(COUNTROWS(Mitarbeiter), Mitarbeiter[Austritt] <> BLANK())
+Avg_Headcount = AVERAGEX(VALUES(Datum[Monat]), [Headcount])
+Fluktuation = DIVIDE([Austritte], [Avg_Headcount], 0) * 100
+Headcount_VJ = CALCULATE([Headcount], SAMEPERIODLASTYEAR(Datum[Date]))
+Headcount_VM = CALCULATE([Headcount], PREVIOUSMONTH(Datum[Date]))
+Headcount_YTD = TOTALYTD([Headcount], Datum[Date])
+Delta_VJ = [Headcount] - [Headcount_VJ]
+Delta_VJ_Proz = DIVIDE([Delta_VJ], [Headcount_VJ], 0)
+```
+
+### 9.2 Checkliste: Neuen Report erstellen
+1. Schritt: Datenquellen klären (SAP, Rexx, Excel/CSV).
+2. Schritt: Daten importieren (Modul 1).
+3. Schritt: Daten bereinigen in Power Query (Modul 2).
+4. Schritt: Beziehungen und Datumstabelle erstellen (Modul 3).
+5. Schritt: Measures erstellen (Modul 4).
+6. Schritt: Visuals bauen und formatieren (Modul 5).
+7. Schritt: Dashboard layouten (Modul 6).
+8. Schritt: Veröffentlichen und teilen (Modul 7).
+
+### 9.3 Glossar
+Power Query: Datenaufbereitungstool in Power BI.
+
+DAX: Formelsprache für Berechnungen in Power BI.
+
+Measure: Dynamische Kennzahl, abhängig vom Filterkontext.
+
+Berechnete Spalte: Feste Berechnung pro Zeile.
+
+RLS: Row-Level Security für zeilenbasierte Zugriffssteuerung.
diff --git a/training/Power BI Schulungsleitfaden fuer Trainer (ABAP, Daten-Webservices).html b/training/Power BI Schulungsleitfaden fuer Trainer (ABAP, Daten-Webservices).html
new file mode 100644
index 0000000..5cffb1d
--- /dev/null
+++ b/training/Power BI Schulungsleitfaden fuer Trainer (ABAP, Daten-Webservices).html	
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="de-CH">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Power BI Schulungsleitfaden für Trainer (ABAP/Webservices)</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --accent: #1f6feb;
+      --accent-soft: #e0f2fe;
+      --text: #0f172a;
+      --muted: #475569;
+      --bg: #f8fafc;
+      --card: #ffffff;
+      --border: #e2e8f0;
+      --warning: #f97316;
+      --success: #16a34a;
+      --code: #0b1020;
+    }
+    body {
+      margin: 0;
+      font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+      color: var(--text);
+      background: var(--bg);
+      line-height: 1.7;
+    }
+    header {
+      background: linear-gradient(120deg, #e0f2fe 0%, #eef2ff 100%);
+      padding: 40px 24px 24px;
+      border-bottom: 1px solid var(--border);
+    }
+    header h1 {
+      margin: 0 0 8px 0;
+      font-size: 2.1rem;
+    }
+    header p {
+      margin: 6px 0;
+      color: var(--muted);
+    }
+    main {
+      max-width: 1050px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+    section {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 26px;
+      margin-bottom: 22px;
+      box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+    }
+    h2 {
+      margin-top: 0;
+      color: #111827;
+      border-bottom: 2px solid var(--border);
+      padding-bottom: 6px;
+    }
+    h3 {
+      margin-bottom: 6px;
+      color: #1e293b;
+    }
+    h4 {
+      margin: 14px 0 6px;
+      color: #1f2937;
+    }
+    ul, ol {
+      margin: 8px 0 16px 24px;
+    }
+    .callout {
+      border-left: 4px solid var(--accent);
+      background: #eef2ff;
+      padding: 12px 16px;
+      border-radius: 8px;
+      margin: 12px 0;
+      color: #1e293b;
+    }
+    .warning {
+      border-left-color: var(--warning);
+      background: #fff7ed;
+    }
+    .success {
+      border-left-color: var(--success);
+      background: #ecfdf3;
+    }
+    pre {
+      background: var(--code);
+      color: #e2e8f0;
+      padding: 16px;
+      border-radius: 10px;
+      overflow-x: auto;
+    }
+    code {
+      font-family: "Consolas", "Courier New", monospace;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 12px;
+    }
+    th, td {
+      border: 1px solid var(--border);
+      padding: 10px 12px;
+      text-align: left;
+    }
+    th {
+      background: #f1f5f9;
+      font-weight: 600;
+    }
+    .small {
+      font-size: 0.92rem;
+      color: var(--muted);
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Power BI Schulungsleitfaden für Trainer (ABAP &amp; Daten-Webservices)</h1>
+    <p>Rolle: Trainer/IT/BI (ABAP-Expertise). Fokus auf Datenbereitstellung, Webservices und Betriebsübergabe.</p>
+    <p class="small">Zielgruppe der Schulung: HR-Konsumentinnen (Power BI Service, Filtern, Export).</p>
+  </header>
+
+  <main>
+    <section>
+      <h2>Zielbild</h2>
+      <ul>
+        <li>HR konsumiert fertige Dashboards im Power BI Service.</li>
+        <li>IT/BI stellt Datenquellen bereit, pflegt Modell, DAX, Refresh, Rechte.</li>
+        <li>Stabiler, dokumentierter Datenfluss (SAP → Webservice → Power BI).</li>
+      </ul>
+      <div class="callout success">Ergebnis: HR arbeitet schneller, IT/BI bleibt Owner von Datenqualität und Logik.</div>
+    </section>
+
+    <section>
+      <h2>Best Practice Rollenverteilung</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Aufgabe</th>
+            <th>HR</th>
+            <th>IT/BI-Team</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>KPIs definieren</td><td>✓</td><td></td></tr>
+          <tr><td>Daten interpretieren</td><td>✓</td><td></td></tr>
+          <tr><td>Reports anfordern</td><td>✓</td><td></td></tr>
+          <tr><td>Dashboards bauen</td><td></td><td>✓</td></tr>
+          <tr><td>DAX/Measures schreiben</td><td></td><td>✓</td></tr>
+          <tr><td>Datenmodell pflegen</td><td></td><td>✓</td></tr>
+          <tr><td>Fertige Dashboards nutzen</td><td>✓</td><td></td></tr>
+          <tr><td>Filter setzen, Drill-down</td><td>✓</td><td></td></tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h2>Datenquellen &amp; Webservices: Architektur</h2>
+      <p>Empfohlen für SAP-HR: OData/REST-Webservices aus SAP bereitstellen, dann in Power BI Service via Gateway anbinden.</p>
+      <ol>
+        <li>SAP HCM/HRM (PA0001/PA0002/PA0008/PA2001) → ABAP CDS/OData.</li>
+        <li>Rexx HR-System → REST/CSV-Exports oder DB-View.</li>
+        <li>Excel/CSV (Kununu, Refline) → SharePoint/OneDrive Ordner.</li>
+        <li>Power BI Dataset → Bericht → Dashboard.</li>
+      </ol>
+      <div class="callout">Ziel: Quellen entkoppeln, standardisierte Schnittstellen, minimale manuelle Exporte.</div>
+    </section>
+
+    <section>
+      <h2>SAP → Webservice: Vorgehen (ABAP)</h2>
+      <h3>1) CDS View mit sauberem Datenmodell</h3>
+      <ul>
+        <li>Erstelle CDS Views je Fachthema (z. B. Personalstamm, Absenzen, Lohn).</li>
+        <li>PERNR als Schlüssel, Datum als ISO-Format (YYYY-MM-DD).</li>
+        <li>Sprache und Mandant berücksichtigen.</li>
+      </ul>
+
+      <h3>2) OData Service veröffentlichen</h3>
+      <ul>
+        <li>Expose CDS als OData (Fiori Elements oder Gateway).</li>
+        <li>Aktiviere in /IWFND/MAINT_SERVICE.</li>
+        <li>Setze Authentifizierung (SAML/OAuth/Basic nach IT-Policy).</li>
+      </ul>
+
+      <h3>3) Performance &amp; Paging</h3>
+      <ul>
+        <li>Paging aktivieren, Delta-Logik prüfen.</li>
+        <li>Nur benötigte Felder liefern (Thin Views).</li>
+        <li>Filter serverseitig ermöglichen (Datum, Mandant, Status).</li>
+      </ul>
+
+      <div class="callout warning">Warnung: Zu viele Felder oder fehlende Filter führen zu langsamen Refreshs.</div>
+    </section>
+
+    <section>
+      <h2>Power BI Service: Datenanbindung</h2>
+      <h3>Gateway &amp; Authentifizierung</h3>
+      <ol>
+        <li>On-Premise Data Gateway installieren (IT/BI-Team).</li>
+        <li>Datenquelle registrieren (SAP OData/REST URL).</li>
+        <li>Zugangsdaten hinterlegen (Servicekonto).</li>
+      </ol>
+
+      <h3>Dataset Konfiguration</h3>
+      <ol>
+        <li>Power BI Desktop: Web/OData Connector nutzen.</li>
+        <li>Query-Parameter für Zeitraum/Delta definieren.</li>
+        <li>Dataset veröffentlichen → Service → geplante Aktualisierung.</li>
+      </ol>
+
+      <div class="callout success">Tipp: Einmalige Parameter (z. B. Startdatum) reduzieren Datenvolumen.</div>
+    </section>
+
+    <section>
+      <h2>Refresh-Strategie</h2>
+      <ul>
+        <li>Monatliche KPIs: Refresh täglich oder wöchentlich.</li>
+        <li>Wöchentliche KPIs: Refresh täglich (Mo–Fr).</li>
+        <li>Jährliche KPIs: Refresh monatlich.</li>
+      </ul>
+      <div class="callout">Empfehlung: Einen fixen Refresh-Zeitpunkt kommunizieren (z. B. 06:00 Uhr).</div>
+    </section>
+
+    <section>
+      <h2>Security &amp; Datenschutz</h2>
+      <ul>
+        <li>Row-Level Security für Abteilungen (wenn nötig).</li>
+        <li>HR-Reports in separatem Workspace (Zugriffsgruppen).</li>
+        <li>Keine sensiblen Felder im Dataset (z. B. AHV-Nummern).</li>
+      </ul>
+      <div class="callout warning">Warnung: Personalnummern als Text behandeln (führende Nullen behalten).</div>
+    </section>
+
+    <section>
+      <h2>Trainer-Checkliste vor dem Kurs</h2>
+      <ul>
+        <li>Power BI Service Zugriff für HR geprüft.</li>
+        <li>Mindestens 1 Testbericht bereitgestellt.</li>
+        <li>Refresh läuft &amp; Daten aktuell.</li>
+        <li>Kurzanleitung für Filter/Export vorbereitet.</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>FAQ aus Sicht HR (Trainer-Antworten)</h2>
+      <h3>„Warum stimmen Zahlen nicht?“</h3>
+      <p>Meist ist ein Filter aktiv. Bitte Filter zurücksetzen und Zeitraum prüfen.</p>
+
+      <h3>„Warum sehe ich keine Daten?“</h3>
+      <p>Entweder fehlen Berechtigungen oder der Zeitraum ist zu eng gesetzt.</p>
+
+      <h3>„Kann ich Daten ändern?“</h3>
+      <p>Nein. HR konsumiert, Datenpflege erfolgt in SAP/Rexx/IT.</p>
+    </section>
+  </main>
+</body>
+</html>