Add SSL, MDC database, and custom HANA connection parameters

Fixes 'error while parsing protocol' HanaException by supporting SSL/TLS encryption, Multi-Tenant Database Container (MDC) database name, and arbitrary additional connection parameters. - HanaServer model: added DatabaseName, UseSsl, ValidateCertificate, AdditionalParams fields + BuildConnectionString() helper - HanaQueryService: accepts HanaServer directly, uses BuildConnectionString() for full parameter support - AppDbContext: added EnsureSchema() method that uses PRAGMA table_info + ALTER TABLE ADD COLUMN to add the new fields to existing SQLite databases without losing data (EnsureCreated does not update schema) - Program.cs: calls EnsureSchema on startup before seeding - Standorte.razor: server dialog now exposes DatabaseName, UseSsl, ValidateCertificate, AdditionalParams with helper texts; test connection uses new signature https://claude.ai/code/session_012heAXNMbbyxqYf2S2HrKLj
Fix SAP HANA client reference - use direct DLL reference instead of missing NuGet package
2026-04-13 08:52:10 +00:00 · 2026-04-10 06:23:59 +00:00 · 2026-04-09 14:00:44 +00:00 · 2026-04-09 15:48:14 +02:00 · 2026-04-09 15:47:55 +02:00 · 2026-02-09 10:47:23 +01:00
109 changed files with 29243 additions and 158 deletions
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="de" data-lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PromoMaster - Produkt-Promotion-Tool | Product Promotion Tool</title>
+
+    <!-- SEO Meta Tags -->
+    <meta name="description" content="Erstellen Sie automatisch professionelle Produktwerbung in Deutsch und Englisch. Generate professional product promotions in German and English.">
+    <meta name="keywords" content="Produktwerbung, Product Promotion, Marketing, Werbung, Advertising, Social Media, SEO, Product Launch">
+    <meta name="author" content="PromoMaster">
+    <meta name="robots" content="index, follow">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="PromoMaster - Automatische Produktwerbung">
+    <meta property="og:description" content="Erstellen Sie automatisch professionelle Produktwerbung in Deutsch und Englisch.">
+    <meta property="og:locale" content="de_DE">
+    <meta property="og:locale:alternate" content="en_US">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="PromoMaster - Product Promotion Tool">
+    <meta name="twitter:description" content="Generate professional product promotions in German and English automatically.">
+
+    <!-- JSON-LD Structured Data -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "PromoMaster",
+        "description": "Automatisches Produkt-Promotion-Tool in Deutsch und Englisch",
+        "applicationCategory": "Marketing",
+        "operatingSystem": "Web Browser",
+        "offers": {
+            "@type": "Offer",
+            "price": "0",
+            "priceCurrency": "EUR"
+        }
+    }
+    </script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Language Toggle -->
+    <div class="lang-toggle">
+        <button id="btn-de" class="lang-btn active" onclick="setLanguage('de')">DE</button>
+        <button id="btn-en" class="lang-btn" onclick="setLanguage('en')">EN</button>
+    </div>
+
+    <!-- Hero Section -->
+    <header class="hero">
+        <div class="hero-bg"></div>
+        <div class="container">
+            <h1 class="hero-title">
+                <span class="hero-icon">&#9889;</span>
+                PromoMaster
+            </h1>
+            <p class="hero-subtitle" data-de="Dein Produkt. Weltweit bekannt. Vollautomatisch." data-en="Your Product. Worldwide Fame. Fully Automatic.">Dein Produkt. Weltweit bekannt. Vollautomatisch.</p>
+        </div>
+    </header>
+
+    <!-- Main App -->
+    <main class="container">
+        <!-- Step 1: Product Input -->
+        <section class="card step-card" id="step1">
+            <div class="step-header">
+                <span class="step-number">1</span>
+                <h2 data-de="Produkt-Informationen" data-en="Product Information"></h2>
+            </div>
+            <div class="form-grid">
+                <div class="form-group">
+                    <label for="productName" data-de="Produktname *" data-en="Product Name *"></label>
+                    <input type="text" id="productName" data-de-placeholder="z.B. SuperWidget Pro" data-en-placeholder="e.g. SuperWidget Pro">
+                </div>
+                <div class="form-group">
+                    <label for="productCategory" data-de="Kategorie" data-en="Category"></label>
+                    <select id="productCategory">
+                        <option value="tech" data-de="Technologie" data-en="Technology"></option>
+                        <option value="fashion" data-de="Mode & Bekleidung" data-en="Fashion & Apparel"></option>
+                        <option value="food" data-de="Lebensmittel & Getr&auml;nke" data-en="Food & Beverages"></option>
+                        <option value="health" data-de="Gesundheit & Wellness" data-en="Health & Wellness"></option>
+                        <option value="home" data-de="Haus & Garten" data-en="Home & Garden"></option>
+                        <option value="sport" data-de="Sport & Fitness" data-en="Sports & Fitness"></option>
+                        <option value="beauty" data-de="Sch&ouml;nheit & Pflege" data-en="Beauty & Care"></option>
+                        <option value="education" data-de="Bildung & Kurse" data-en="Education & Courses"></option>
+                        <option value="software" data-de="Software & Apps" data-en="Software & Apps"></option>
+                        <option value="other" data-de="Sonstiges" data-en="Other"></option>
+                    </select>
+                </div>
+                <div class="form-group full-width">
+                    <label for="productDescription" data-de="Kurzbeschreibung *" data-en="Short Description *"></label>
+                    <textarea id="productDescription" rows="3" data-de-placeholder="Was macht dein Produkt besonders? (max. 200 Zeichen)" data-en-placeholder="What makes your product special? (max. 200 characters)" maxlength="200"></textarea>
+                    <span class="char-count"><span id="charCount">0</span>/200</span>
+                </div>
+                <div class="form-group">
+                    <label for="productPrice" data-de="Preis (optional)" data-en="Price (optional)"></label>
+                    <input type="text" id="productPrice" data-de-placeholder="z.B. 29,99 EUR" data-en-placeholder="e.g. $29.99">
+                </div>
+                <div class="form-group">
+                    <label for="productUrl" data-de="Website / Link (optional)" data-en="Website / Link (optional)"></label>
+                    <input type="url" id="productUrl" data-de-placeholder="https://dein-produkt.de" data-en-placeholder="https://your-product.com">
+                </div>
+                <div class="form-group full-width">
+                    <label for="productFeatures" data-de="Top-Features (kommagetrennt)" data-en="Top Features (comma-separated)"></label>
+                    <input type="text" id="productFeatures" data-de-placeholder="z.B. Schnell, Zuverl&auml;ssig, Einfach zu bedienen" data-en-placeholder="e.g. Fast, Reliable, Easy to use">
+                </div>
+                <div class="form-group full-width">
+                    <label for="targetAudience" data-de="Zielgruppe" data-en="Target Audience"></label>
+                    <input type="text" id="targetAudience" data-de-placeholder="z.B. Unternehmer, Studenten, Eltern" data-en-placeholder="e.g. Entrepreneurs, Students, Parents">
+                </div>
+            </div>
+        </section>
+
+        <!-- Step 2: Promotion Style -->
+        <section class="card step-card" id="step2">
+            <div class="step-header">
+                <span class="step-number">2</span>
+                <h2 data-de="Werbestil w&auml;hlen" data-en="Choose Promotion Style"></h2>
+            </div>
+            <div class="style-grid">
+                <div class="style-option selected" data-style="professional" onclick="selectStyle(this)">
+                    <span class="style-icon">&#128188;</span>
+                    <span class="style-label" data-de="Professionell" data-en="Professional"></span>
+                </div>
+                <div class="style-option" data-style="casual" onclick="selectStyle(this)">
+                    <span class="style-icon">&#128075;</span>
+                    <span class="style-label" data-de="Locker & Freundlich" data-en="Casual & Friendly"></span>
+                </div>
+                <div class="style-option" data-style="urgent" onclick="selectStyle(this)">
+                    <span class="style-icon">&#9889;</span>
+                    <span class="style-label" data-de="Dringend & FOMO" data-en="Urgent & FOMO"></span>
+                </div>
+                <div class="style-option" data-style="luxury" onclick="selectStyle(this)">
+                    <span class="style-icon">&#10024;</span>
+                    <span class="style-label" data-de="Premium & Luxus" data-en="Premium & Luxury"></span>
+                </div>
+                <div class="style-option" data-style="fun" onclick="selectStyle(this)">
+                    <span class="style-icon">&#127881;</span>
+                    <span class="style-label" data-de="Spa&szlig;ig & Kreativ" data-en="Fun & Creative"></span>
+                </div>
+                <div class="style-option" data-style="minimal" onclick="selectStyle(this)">
+                    <span class="style-icon">&#9711;</span>
+                    <span class="style-label" data-de="Minimalistisch" data-en="Minimalist"></span>
+                </div>
+            </div>
+        </section>
+
+        <!-- Generate Button -->
+        <div class="generate-section">
+            <button class="btn-generate" onclick="generateAll()" id="generateBtn">
+                <span class="btn-icon">&#9889;</span>
+                <span data-de="Alle Werbematerialien generieren" data-en="Generate All Promotion Materials"></span>
+            </button>
+        </div>
+
+        <!-- Results Section -->
+        <section id="results" class="results-section hidden">
+            <!-- Social Media Posts -->
+            <div class="card result-card">
+                <div class="result-header">
+                    <h3 data-de="&#128241; Social Media Posts" data-en="&#128241; Social Media Posts"></h3>
+                    <button class="btn-copy-all" onclick="copyAll('social')" data-de="Alle kopieren" data-en="Copy All"></button>
+                </div>
+
+                <div class="result-tabs">
+                    <button class="tab-btn active" onclick="switchTab(this, 'twitter')">Twitter/X</button>
+                    <button class="tab-btn" onclick="switchTab(this, 'instagram')">Instagram</button>
+                    <button class="tab-btn" onclick="switchTab(this, 'facebook')">Facebook</button>
+                    <button class="tab-btn" onclick="switchTab(this, 'linkedin')">LinkedIn</button>
+                    <button class="tab-btn" onclick="switchTab(this, 'tiktok')">TikTok</button>
+                </div>
+
+                <div class="tab-content" id="tab-twitter">
+                    <div class="lang-results">
+                        <div class="lang-result">
+                            <span class="lang-badge">DE</span>
+                            <div class="result-text" id="twitter-de"></div>
+                            <button class="btn-copy" onclick="copyText('twitter-de')">&#128203;</button>
+                        </div>
+                        <div class="lang-result">
+                            <span class="lang-badge en">EN</span>
+                            <div class="result-text" id="twitter-en"></div>
+                            <button class="btn-copy" onclick="copyText('twitter-en')">&#128203;</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="tab-content hidden" id="tab-instagram">
+                    <div class="lang-results">
+                        <div class="lang-result">
+                            <span class="lang-badge">DE</span>
+                            <div class="result-text" id="instagram-de"></div>
+                            <button class="btn-copy" onclick="copyText('instagram-de')">&#128203;</button>
+                        </div>
+                        <div class="lang-result">
+                            <span class="lang-badge en">EN</span>
+                            <div class="result-text" id="instagram-en"></div>
+                            <button class="btn-copy" onclick="copyText('instagram-en')">&#128203;</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="tab-content hidden" id="tab-facebook">
+                    <div class="lang-results">
+                        <div class="lang-result">
+                            <span class="lang-badge">DE</span>
+                            <div class="result-text" id="facebook-de"></div>
+                            <button class="btn-copy" onclick="copyText('facebook-de')">&#128203;</button>
+                        </div>
+                        <div class="lang-result">
+                            <span class="lang-badge en">EN</span>
+                            <div class="result-text" id="facebook-en"></div>
+                            <button class="btn-copy" onclick="copyText('facebook-en')">&#128203;</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="tab-content hidden" id="tab-linkedin">
+                    <div class="lang-results">
+                        <div class="lang-result">
+                            <span class="lang-badge">DE</span>
+                            <div class="result-text" id="linkedin-de"></div>
+                            <button class="btn-copy" onclick="copyText('linkedin-de')">&#128203;</button>
+                        </div>
+                        <div class="lang-result">
+                            <span class="lang-badge en">EN</span>
+                            <div class="result-text" id="linkedin-en"></div>
+                            <button class="btn-copy" onclick="copyText('linkedin-en')">&#128203;</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="tab-content hidden" id="tab-tiktok">
+                    <div class="lang-results">
+                        <div class="lang-result">
+                            <span class="lang-badge">DE</span>
+                            <div class="result-text" id="tiktok-de"></div>
+                            <button class="btn-copy" onclick="copyText('tiktok-de')">&#128203;</button>
+                        </div>
+                        <div class="lang-result">
+                            <span class="lang-badge en">EN</span>
+                            <div class="result-text" id="tiktok-en"></div>
+                            <button class="btn-copy" onclick="copyText('tiktok-en')">&#128203;</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Email Marketing -->
+            <div class="card result-card">
+                <div class="result-header">
+                    <h3 data-de="&#9993; E-Mail Marketing" data-en="&#9993; Email Marketing"></h3>
+                    <button class="btn-copy-all" onclick="copyAll('email')" data-de="Alle kopieren" data-en="Copy All"></button>
+                </div>
+                <div class="lang-results">
+                    <div class="lang-result">
+                        <span class="lang-badge">DE</span>
+                        <div class="result-text" id="email-de"></div>
+                        <button class="btn-copy" onclick="copyText('email-de')">&#128203;</button>
+                    </div>
+                    <div class="lang-result">
+                        <span class="lang-badge en">EN</span>
+                        <div class="result-text" id="email-en"></div>
+                        <button class="btn-copy" onclick="copyText('email-en')">&#128203;</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- SEO Texts -->
+            <div class="card result-card">
+                <div class="result-header">
+                    <h3 data-de="&#128270; SEO-Texte & Metadaten" data-en="&#128270; SEO Texts & Metadata"></h3>
+                    <button class="btn-copy-all" onclick="copyAll('seo')" data-de="Alle kopieren" data-en="Copy All"></button>
+                </div>
+                <div class="lang-results">
+                    <div class="lang-result">
+                        <span class="lang-badge">DE</span>
+                        <div class="result-text" id="seo-de"></div>
+                        <button class="btn-copy" onclick="copyText('seo-de')">&#128203;</button>
+                    </div>
+                    <div class="lang-result">
+                        <span class="lang-badge en">EN</span>
+                        <div class="result-text" id="seo-en"></div>
+                        <button class="btn-copy" onclick="copyText('seo-en')">&#128203;</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Press Release -->
+            <div class="card result-card">
+                <div class="result-header">
+                    <h3 data-de="&#128240; Pressemitteilung" data-en="&#128240; Press Release"></h3>
+                    <button class="btn-copy-all" onclick="copyAll('press')" data-de="Alle kopieren" data-en="Copy All"></button>
+                </div>
+                <div class="lang-results">
+                    <div class="lang-result">
+                        <span class="lang-badge">DE</span>
+                        <div class="result-text" id="press-de"></div>
+                        <button class="btn-copy" onclick="copyText('press-de')">&#128203;</button>
+                    </div>
+                    <div class="lang-result">
+                        <span class="lang-badge en">EN</span>
+                        <div class="result-text" id="press-en"></div>
+                        <button class="btn-copy" onclick="copyText('press-en')">&#128203;</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slogan Generator -->
+            <div class="card result-card">
+                <div class="result-header">
+                    <h3 data-de="&#128161; Slogans & Taglines" data-en="&#128161; Slogans & Taglines"></h3>
+                </div>
+                <div class="slogan-grid" id="sloganGrid"></div>
+            </div>
+
+            <!-- Hashtag Cloud -->
+            <div class="card result-card">
+                <div class="result-header">
+                    <h3 data-de="# Hashtag-Wolke" data-en="# Hashtag Cloud"></h3>
+                    <button class="btn-copy-all" onclick="copyHashtags()" data-de="Alle kopieren" data-en="Copy All"></button>
+                </div>
+                <div class="hashtag-cloud" id="hashtagCloud"></div>
+            </div>
+
+            <!-- Landing Page Preview -->
+            <div class="card result-card">
+                <div class="result-header">
+                    <h3 data-de="&#127760; Landing Page HTML" data-en="&#127760; Landing Page HTML"></h3>
+                    <button class="btn-copy-all" onclick="copyText('landing-code')" data-de="HTML kopieren" data-en="Copy HTML"></button>
+                </div>
+                <div class="landing-preview-container">
+                    <div class="preview-toggle">
+                        <button class="preview-btn active" onclick="togglePreview('preview')" data-de="Vorschau" data-en="Preview"></button>
+                        <button class="preview-btn" onclick="togglePreview('code')" data-de="HTML-Code" data-en="HTML Code"></button>
+                    </div>
+                    <div id="landing-preview" class="landing-preview"></div>
+                    <pre id="landing-code" class="landing-code hidden"></pre>
+                </div>
+            </div>
+
+            <!-- Export Section -->
+            <div class="card result-card export-card">
+                <div class="result-header">
+                    <h3 data-de="&#128229; Alles exportieren" data-en="&#128229; Export Everything"></h3>
+                </div>
+                <div class="export-grid">
+                    <button class="btn-export" onclick="exportAs('txt')">
+                        <span class="export-icon">&#128196;</span>
+                        <span>TXT</span>
+                    </button>
+                    <button class="btn-export" onclick="exportAs('html')">
+                        <span class="export-icon">&#127760;</span>
+                        <span>HTML</span>
+                    </button>
+                    <button class="btn-export" onclick="exportAs('json')">
+                        <span class="export-icon">&#128218;</span>
+                        <span>JSON</span>
+                    </button>
+                    <button class="btn-export" onclick="exportAs('csv')">
+                        <span class="export-icon">&#128202;</span>
+                        <span>CSV</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Toast Notification -->
+    <div class="toast hidden" id="toast"></div>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <p data-de="PromoMaster - Vollautomatisches Produkt-Promotion-Tool" data-en="PromoMaster - Fully Automatic Product Promotion Tool"></p>
+    </footer>
+
+    <script src="promo.js"></script>
+</body>
+</html>
@@ -0,0 +1,813 @@
+// === PromoMaster - Product Promotion Tool ===
+// Vollautomatisches Produkt-Promotion-Tool in Deutsch und Englisch
+
+(function () {
+    'use strict';
+
+    // --- State ---
+    let currentLang = 'de';
+    let selectedStyle = 'professional';
+    let generatedData = null;
+
+    // --- Language System ---
+    function setLanguage(lang) {
+        currentLang = lang;
+        document.documentElement.setAttribute('data-lang', lang);
+        document.getElementById('btn-de').classList.toggle('active', lang === 'de');
+        document.getElementById('btn-en').classList.toggle('active', lang === 'en');
+
+        document.querySelectorAll('[data-de]').forEach(function (el) {
+            el.textContent = el.getAttribute('data-' + lang);
+        });
+
+        document.querySelectorAll('[data-de-placeholder]').forEach(function (el) {
+            el.placeholder = el.getAttribute('data-' + lang + '-placeholder');
+        });
+
+        document.querySelectorAll('select option').forEach(function (opt) {
+            var val = opt.getAttribute('data-' + lang);
+            if (val) opt.textContent = val;
+        });
+    }
+
+    window.setLanguage = setLanguage;
+
+    // --- Style Selection ---
+    function selectStyle(el) {
+        document.querySelectorAll('.style-option').forEach(function (s) {
+            s.classList.remove('selected');
+        });
+        el.classList.add('selected');
+        selectedStyle = el.getAttribute('data-style');
+    }
+
+    window.selectStyle = selectStyle;
+
+    // --- Character Counter ---
+    var descInput = document.getElementById('productDescription');
+    var charCount = document.getElementById('charCount');
+    if (descInput && charCount) {
+        descInput.addEventListener('input', function () {
+            charCount.textContent = descInput.value.length;
+        });
+    }
+
+    // --- Text Templates ---
+    var templates = {
+        professional: {
+            twitter: {
+                de: function (p) {
+                    return 'Entdecken Sie ' + p.name + ' \u2013 ' + p.desc + (p.features.length ? '\n\n\u2705 ' + p.features.slice(0, 3).join('\n\u2705 ') : '') + (p.url ? '\n\n\ud83d\udc49 ' + p.url : '') + (p.price ? '\n\ud83d\udcb0 ' + p.price : '') + '\n\n' + p.hashtags.slice(0, 4).join(' ');
+                },
+                en: function (p) {
+                    return 'Discover ' + p.name + ' \u2013 ' + p.descEn + (p.features.length ? '\n\n\u2705 ' + p.featuresEn.slice(0, 3).join('\n\u2705 ') : '') + (p.url ? '\n\n\ud83d\udc49 ' + p.url : '') + (p.price ? '\n\ud83d\udcb0 ' + p.price : '') + '\n\n' + p.hashtagsEn.slice(0, 4).join(' ');
+                }
+            },
+            instagram: {
+                de: function (p) {
+                    return '\u2728 ' + p.name + ' \u2013 Die Zukunft beginnt jetzt!\n\n' + p.desc + '\n\n' + (p.features.length ? 'Was ' + p.name + ' besonders macht:\n' + p.features.map(function (f) { return '\ud83d\udd39 ' + f; }).join('\n') + '\n\n' : '') + (p.audience ? '\ud83c\udfaf Perfekt f\u00fcr: ' + p.audience + '\n\n' : '') + (p.price ? '\ud83d\udcb0 Jetzt f\u00fcr nur ' + p.price + '\n\n' : '') + (p.url ? '\ud83d\udd17 Link in Bio \u2b06\ufe0f\n\n' : '') + p.hashtags.join(' ');
+                },
+                en: function (p) {
+                    return '\u2728 ' + p.name + ' \u2013 The future starts now!\n\n' + p.descEn + '\n\n' + (p.features.length ? 'What makes ' + p.name + ' special:\n' + p.featuresEn.map(function (f) { return '\ud83d\udd39 ' + f; }).join('\n') + '\n\n' : '') + (p.audience ? '\ud83c\udfaf Perfect for: ' + p.audienceEn + '\n\n' : '') + (p.price ? '\ud83d\udcb0 Now only ' + p.price + '\n\n' : '') + (p.url ? '\ud83d\udd17 Link in bio \u2b06\ufe0f\n\n' : '') + p.hashtagsEn.join(' ');
+                }
+            },
+            facebook: {
+                de: function (p) {
+                    return '\ud83d\ude80 Neu: ' + p.name + '!\n\n' + p.desc + '\n\n' + (p.features.length ? '\ud83d\udc47 Das sind die Highlights:\n\n' + p.features.map(function (f) { return '\u2714\ufe0f ' + f; }).join('\n') + '\n\n' : '') + (p.audience ? 'Perfekt f\u00fcr alle, die ' + p.audience + ' sind.\n\n' : '') + (p.price ? '\ud83d\udcb5 Preis: ' + p.price + '\n\n' : '') + (p.url ? '\ud83c\udf10 Mehr erfahren: ' + p.url + '\n\n' : '') + 'Was denkt ihr? Lasst es uns in den Kommentaren wissen! \ud83d\udc47\n\n' + p.hashtags.slice(0, 5).join(' ');
+                },
+                en: function (p) {
+                    return '\ud83d\ude80 New: ' + p.name + '!\n\n' + p.descEn + '\n\n' + (p.features.length ? '\ud83d\udc47 Here are the highlights:\n\n' + p.featuresEn.map(function (f) { return '\u2714\ufe0f ' + f; }).join('\n') + '\n\n' : '') + (p.audience ? 'Perfect for everyone who is ' + p.audienceEn + '.\n\n' : '') + (p.price ? '\ud83d\udcb5 Price: ' + p.price + '\n\n' : '') + (p.url ? '\ud83c\udf10 Learn more: ' + p.url + '\n\n' : '') + 'What do you think? Let us know in the comments! \ud83d\udc47\n\n' + p.hashtagsEn.slice(0, 5).join(' ');
+                }
+            },
+            linkedin: {
+                de: function (p) {
+                    return '\ud83d\udca1 ' + p.name + ' \u2013 Innovation trifft Effizienz\n\nIch freue mich, Ihnen ' + p.name + ' vorzustellen.\n\n' + p.desc + '\n\n' + (p.features.length ? 'Die wichtigsten Vorteile:\n\n' + p.features.map(function (f) { return '\u2192 ' + f; }).join('\n') + '\n\n' : '') + (p.audience ? 'Zielgruppe: ' + p.audience + '\n\n' : '') + (p.price ? 'Investition: ' + p.price + '\n\n' : '') + (p.url ? 'Erfahren Sie mehr: ' + p.url + '\n\n' : '') + '#Innovation #Business ' + p.hashtags.slice(0, 3).join(' ');
+                },
+                en: function (p) {
+                    return '\ud83d\udca1 ' + p.name + ' \u2013 Innovation meets Efficiency\n\nI\'m excited to introduce ' + p.name + ' to you.\n\n' + p.descEn + '\n\n' + (p.features.length ? 'Key benefits:\n\n' + p.featuresEn.map(function (f) { return '\u2192 ' + f; }).join('\n') + '\n\n' : '') + (p.audience ? 'Target audience: ' + p.audienceEn + '\n\n' : '') + (p.price ? 'Investment: ' + p.price + '\n\n' : '') + (p.url ? 'Learn more: ' + p.url + '\n\n' : '') + '#Innovation #Business ' + p.hashtagsEn.slice(0, 3).join(' ');
+                }
+            },
+            tiktok: {
+                de: function (p) {
+                    return '\ud83d\udd25 POV: Du entdeckst gerade ' + p.name + '!\n\n' + p.desc + '\n\n' + (p.features.length ? p.features.slice(0, 3).map(function (f) { return '\u2728 ' + f; }).join('\n') + '\n\n' : '') + (p.price ? '\ud83d\udcb0 ' + p.price + '\n\n' : '') + (p.url ? '\ud83d\udd17 Link in Bio!\n\n' : '') + p.hashtags.join(' ') + ' #fyp #viral #musthave';
+                },
+                en: function (p) {
+                    return '\ud83d\udd25 POV: You just discovered ' + p.name + '!\n\n' + p.descEn + '\n\n' + (p.features.length ? p.featuresEn.slice(0, 3).map(function (f) { return '\u2728 ' + f; }).join('\n') + '\n\n' : '') + (p.price ? '\ud83d\udcb0 ' + p.price + '\n\n' : '') + (p.url ? '\ud83d\udd17 Link in bio!\n\n' : '') + p.hashtagsEn.join(' ') + ' #fyp #viral #musthave';
+                }
+            }
+        },
+        casual: {
+            twitter: {
+                de: function (p) { return 'Hey Leute! \ud83d\udc4b Kennt ihr schon ' + p.name + '? ' + p.desc + (p.features.length ? '\n\nDas Beste daran:\n' + p.features.slice(0, 3).map(function (f) { return '\ud83d\udc4d ' + f; }).join('\n') : '') + (p.url ? '\n\nSchaut mal vorbei: ' + p.url : '') + '\n\n' + p.hashtags.slice(0, 4).join(' '); },
+                en: function (p) { return 'Hey everyone! \ud83d\udc4b Have you heard of ' + p.name + '? ' + p.descEn + (p.features.length ? '\n\nBest thing about it:\n' + p.featuresEn.slice(0, 3).map(function (f) { return '\ud83d\udc4d ' + f; }).join('\n') : '') + (p.url ? '\n\nCheck it out: ' + p.url : '') + '\n\n' + p.hashtagsEn.slice(0, 4).join(' '); }
+            },
+            instagram: {
+                de: function (p) { return 'Schaut mal was ich gefunden habe! \ud83e\udd29\n\n' + p.name + ' \u2013 ' + p.desc + '\n\n' + (p.features.length ? 'Warum ich es liebe:\n' + p.features.map(function (f) { return '\u2764\ufe0f ' + f; }).join('\n') + '\n\n' : '') + 'Wer will es auch haben? \ud83d\ude4b\u200d\u2640\ufe0f\n\n' + p.hashtags.join(' '); },
+                en: function (p) { return 'Look what I found! \ud83e\udd29\n\n' + p.name + ' \u2013 ' + p.descEn + '\n\n' + (p.features.length ? 'Why I love it:\n' + p.featuresEn.map(function (f) { return '\u2764\ufe0f ' + f; }).join('\n') + '\n\n' : '') + 'Who else wants this? \ud83d\ude4b\u200d\u2640\ufe0f\n\n' + p.hashtagsEn.join(' '); }
+            },
+            facebook: {
+                de: function (p) { return 'Hey Freunde! \ud83d\udc4b\n\nIch muss euch unbedingt von ' + p.name + ' erz\u00e4hlen!\n\n' + p.desc + '\n\n' + (p.features.length ? 'Was mich \u00fcberzeugt hat:\n' + p.features.map(function (f) { return '\ud83d\udc49 ' + f; }).join('\n') + '\n\n' : '') + (p.price ? 'Und das f\u00fcr ' + p.price + ' \u2013 richtig fair!\n\n' : '') + (p.url ? 'Hier gehts lang: ' + p.url + '\n\n' : '') + 'Kennt ihr das schon? \ud83d\ude0d'; },
+                en: function (p) { return 'Hey friends! \ud83d\udc4b\n\nI have to tell you about ' + p.name + '!\n\n' + p.descEn + '\n\n' + (p.features.length ? 'What convinced me:\n' + p.featuresEn.map(function (f) { return '\ud83d\udc49 ' + f; }).join('\n') + '\n\n' : '') + (p.price ? 'And all that for ' + p.price + ' \u2013 such a great deal!\n\n' : '') + (p.url ? 'Check it here: ' + p.url + '\n\n' : '') + 'Have you heard of this? \ud83d\ude0d'; }
+            },
+            linkedin: {
+                de: function (p) { return 'Moin zusammen! \ud83d\ude4c\n\nDarf ich vorstellen: ' + p.name + '!\n\n' + p.desc + '\n\n' + (p.features.length ? 'Das macht es so cool:\n' + p.features.map(function (f) { return '\u2022 ' + f; }).join('\n') + '\n\n' : '') + 'Wer hat Lust, das mal auszuprobieren?\n\n' + p.hashtags.slice(0, 3).join(' '); },
+                en: function (p) { return 'Hey everyone! \ud83d\ude4c\n\nLet me introduce: ' + p.name + '!\n\n' + p.descEn + '\n\n' + (p.features.length ? 'What makes it awesome:\n' + p.featuresEn.map(function (f) { return '\u2022 ' + f; }).join('\n') + '\n\n' : '') + 'Who wants to give it a try?\n\n' + p.hashtagsEn.slice(0, 3).join(' '); }
+            },
+            tiktok: {
+                de: function (p) { return 'OK das m\u00fcsst ihr sehen!! \ud83d\ude31\n\n' + p.name + ' ist einfach WILD!\n' + p.desc + '\n\n' + (p.features.length ? p.features.slice(0, 2).map(function (f) { return '\ud83e\udd2f ' + f; }).join('\n') + '\n\n' : '') + 'Kommentiert wenn ihrs auch braucht! \ud83d\udc47\n\n' + p.hashtags.join(' ') + ' #fyp #musthave'; },
+                en: function (p) { return 'OK you NEED to see this!! \ud83d\ude31\n\n' + p.name + ' is absolutely WILD!\n' + p.descEn + '\n\n' + (p.features.length ? p.featuresEn.slice(0, 2).map(function (f) { return '\ud83e\udd2f ' + f; }).join('\n') + '\n\n' : '') + 'Comment if you need this too! \ud83d\udc47\n\n' + p.hashtagsEn.join(' ') + ' #fyp #musthave'; }
+            }
+        },
+        urgent: {
+            twitter: {
+                de: function (p) { return '\u26a0\ufe0f NUR F\u00dcR KURZE ZEIT: ' + p.name + '!\n\n' + p.desc + '\n\n' + (p.price ? '\ud83d\udcb0 Jetzt zuschlagen: ' + p.price + '\n' : '') + '\u23f0 Begrenztes Angebot \u2013 nicht verpassen!\n\n' + (p.url ? '\ud83d\udc49 Sofort sichern: ' + p.url + '\n\n' : '') + p.hashtags.slice(0, 4).join(' '); },
+                en: function (p) { return '\u26a0\ufe0f LIMITED TIME ONLY: ' + p.name + '!\n\n' + p.descEn + '\n\n' + (p.price ? '\ud83d\udcb0 Get it now: ' + p.price + '\n' : '') + '\u23f0 Limited offer \u2013 don\'t miss out!\n\n' + (p.url ? '\ud83d\udc49 Grab yours: ' + p.url + '\n\n' : '') + p.hashtagsEn.slice(0, 4).join(' '); }
+            },
+            instagram: {
+                de: function (p) { return '\ud83d\udea8 ACHTUNG! \ud83d\udea8\n\n' + p.name + ' ist DA!\n\n' + p.desc + '\n\n' + (p.features.length ? '\ud83d\udd25 ' + p.features.join(' \u2022 ') + '\n\n' : '') + '\u23f3 Nur solange der Vorrat reicht!\n' + (p.price ? '\ud83d\udcb0 ' + p.price + '\n\n' : '') + 'JETZT HANDELN bevor es zu sp\u00e4t ist! \ud83d\udc47\n\n' + p.hashtags.join(' '); },
+                en: function (p) { return '\ud83d\udea8 ATTENTION! \ud83d\udea8\n\n' + p.name + ' is HERE!\n\n' + p.descEn + '\n\n' + (p.features.length ? '\ud83d\udd25 ' + p.featuresEn.join(' \u2022 ') + '\n\n' : '') + '\u23f3 Only while supplies last!\n' + (p.price ? '\ud83d\udcb0 ' + p.price + '\n\n' : '') + 'ACT NOW before it\'s too late! \ud83d\udc47\n\n' + p.hashtagsEn.join(' '); }
+            },
+            facebook: {
+                de: function (p) { return '\ud83d\udea8\ud83d\udea8\ud83d\udea8 EILMELDUNG \ud83d\udea8\ud83d\udea8\ud83d\udea8\n\n' + p.name + ' ist endlich verf\u00fcgbar!\n\n' + p.desc + '\n\n' + (p.features.length ? 'Die Fakten:\n' + p.features.map(function (f) { return '\u26a1 ' + f; }).join('\n') + '\n\n' : '') + '\u23f0 ACHTUNG: Angebot endet bald!\n' + (p.price ? '\ud83d\udcb5 Nur ' + p.price + '\n' : '') + (p.url ? '\n\ud83d\udc49 SOFORT ZUSCHLAGEN: ' + p.url : ''); },
+                en: function (p) { return '\ud83d\udea8\ud83d\udea8\ud83d\udea8 BREAKING \ud83d\udea8\ud83d\udea8\ud83d\udea8\n\n' + p.name + ' is finally available!\n\n' + p.descEn + '\n\n' + (p.features.length ? 'The facts:\n' + p.featuresEn.map(function (f) { return '\u26a1 ' + f; }).join('\n') + '\n\n' : '') + '\u23f0 WARNING: Offer ends soon!\n' + (p.price ? '\ud83d\udcb5 Only ' + p.price + '\n' : '') + (p.url ? '\n\ud83d\udc49 GRAB IT NOW: ' + p.url : ''); }
+            },
+            linkedin: {
+                de: function (p) { return '\ud83d\udea8 Dringende Marktchance: ' + p.name + '\n\n' + p.desc + '\n\n' + (p.features.length ? 'Schl\u00fcsselvorteile:\n' + p.features.map(function (f) { return '\u2192 ' + f; }).join('\n') + '\n\n' : '') + 'Dieses Angebot ist zeitlich begrenzt. Wer jetzt nicht handelt, verpasst eine einmalige Gelegenheit.\n\n' + (p.url ? p.url + '\n\n' : '') + p.hashtags.slice(0, 3).join(' '); },
+                en: function (p) { return '\ud83d\udea8 Urgent Market Opportunity: ' + p.name + '\n\n' + p.descEn + '\n\n' + (p.features.length ? 'Key advantages:\n' + p.featuresEn.map(function (f) { return '\u2192 ' + f; }).join('\n') + '\n\n' : '') + 'This offer is time-limited. Those who don\'t act now will miss a unique opportunity.\n\n' + (p.url ? p.url + '\n\n' : '') + p.hashtagsEn.slice(0, 3).join(' '); }
+            },
+            tiktok: {
+                de: function (p) { return '\ud83d\udea8 STOP SCROLLING! \ud83d\udea8\n\n' + p.name + ' \u2013 ' + p.desc + '\n\n' + '\u23f0 Letzte Chance!\n' + (p.price ? '\ud83d\udcb0 ' + p.price + '\n' : '') + '\nLINK IN BIO BEVOR ES WEG IST!\n\n' + p.hashtags.join(' ') + ' #fyp #limitedoffer'; },
+                en: function (p) { return '\ud83d\udea8 STOP SCROLLING! \ud83d\udea8\n\n' + p.name + ' \u2013 ' + p.descEn + '\n\n' + '\u23f0 Last chance!\n' + (p.price ? '\ud83d\udcb0 ' + p.price + '\n' : '') + '\nLINK IN BIO BEFORE IT\'S GONE!\n\n' + p.hashtagsEn.join(' ') + ' #fyp #limitedoffer'; }
+            }
+        },
+        luxury: {
+            twitter: {
+                de: function (p) { return '\u2728 ' + p.name + '\n\nExklusivit\u00e4t neu definiert.\n' + p.desc + '\n\n' + (p.price ? 'Ab ' + p.price + '\n' : '') + (p.url ? '\n' + p.url : '') + '\n\n' + p.hashtags.slice(0, 3).join(' ') + ' #Luxus #Premium'; },
+                en: function (p) { return '\u2728 ' + p.name + '\n\nRedefining exclusivity.\n' + p.descEn + '\n\n' + (p.price ? 'From ' + p.price + '\n' : '') + (p.url ? '\n' + p.url : '') + '\n\n' + p.hashtagsEn.slice(0, 3).join(' ') + ' #Luxury #Premium'; }
+            },
+            instagram: {
+                de: function (p) { return '\u2726 ' + p.name.toUpperCase() + ' \u2726\n\n' + p.desc + '\n\n' + (p.features.length ? 'Exklusive Merkmale:\n' + p.features.map(function (f) { return '\u2726 ' + f; }).join('\n') + '\n\n' : '') + 'F\u00fcr alle, die das Beste verdienen.\n\n' + (p.price ? '\u2726 ' + p.price + '\n\n' : '') + p.hashtags.join(' ') + ' #Luxury #Exclusive'; },
+                en: function (p) { return '\u2726 ' + p.name.toUpperCase() + ' \u2726\n\n' + p.descEn + '\n\n' + (p.features.length ? 'Exclusive features:\n' + p.featuresEn.map(function (f) { return '\u2726 ' + f; }).join('\n') + '\n\n' : '') + 'For those who deserve the finest.\n\n' + (p.price ? '\u2726 ' + p.price + '\n\n' : '') + p.hashtagsEn.join(' ') + ' #Luxury #Exclusive'; }
+            },
+            facebook: {
+                de: function (p) { return '\u2014\u2014\u2014 ' + p.name.toUpperCase() + ' \u2014\u2014\u2014\n\n' + p.desc + '\n\n' + (p.features.length ? p.features.map(function (f) { return '\u25c7 ' + f; }).join('\n') + '\n\n' : '') + 'Perfektion kennt keine Kompromisse.\n\n' + (p.price ? 'Ab ' + p.price + '\n' : '') + (p.url ? '\nEntdecken Sie mehr: ' + p.url : ''); },
+                en: function (p) { return '\u2014\u2014\u2014 ' + p.name.toUpperCase() + ' \u2014\u2014\u2014\n\n' + p.descEn + '\n\n' + (p.features.length ? p.featuresEn.map(function (f) { return '\u25c7 ' + f; }).join('\n') + '\n\n' : '') + 'Perfection knows no compromise.\n\n' + (p.price ? 'From ' + p.price + '\n' : '') + (p.url ? '\nDiscover more: ' + p.url : ''); }
+            },
+            linkedin: {
+                de: function (p) { return p.name + ' \u2013 Exzellenz in jeder Hinsicht\n\n' + p.desc + '\n\n' + (p.features.length ? p.features.map(function (f) { return '\u2022 ' + f; }).join('\n') + '\n\n' : '') + 'Wir setzen Ma\u00dfst\u00e4be f\u00fcr Premium-Qualit\u00e4t.\n\n' + (p.url ? p.url + '\n\n' : '') + '#Premium #Excellence ' + p.hashtags.slice(0, 2).join(' '); },
+                en: function (p) { return p.name + ' \u2013 Excellence in every way\n\n' + p.descEn + '\n\n' + (p.features.length ? p.featuresEn.map(function (f) { return '\u2022 ' + f; }).join('\n') + '\n\n' : '') + 'We set the standard for premium quality.\n\n' + (p.url ? p.url + '\n\n' : '') + '#Premium #Excellence ' + p.hashtagsEn.slice(0, 2).join(' '); }
+            },
+            tiktok: {
+                de: function (p) { return '\u2728 ' + p.name + ' \u2013 Luxus der n\u00e4chsten Generation\n\n' + p.desc + '\n\n' + (p.price ? '\u2726 ' + p.price + '\n\n' : '') + p.hashtags.join(' ') + ' #luxury #aesthetic #premium'; },
+                en: function (p) { return '\u2728 ' + p.name + ' \u2013 Next generation luxury\n\n' + p.descEn + '\n\n' + (p.price ? '\u2726 ' + p.price + '\n\n' : '') + p.hashtagsEn.join(' ') + ' #luxury #aesthetic #premium'; }
+            }
+        },
+        fun: {
+            twitter: {
+                de: function (p) { return '\ud83c\udf89 YOOO! ' + p.name + ' ist da und es ist der HAMMER! \ud83d\udd28\n\n' + p.desc + '\n\n' + (p.features.length ? p.features.slice(0, 3).map(function (f) { return '\ud83c\udf1f ' + f; }).join('\n') + '\n' : '') + (p.url ? '\n\ud83d\ude80 Ab gehts: ' + p.url : '') + '\n\n' + p.hashtags.slice(0, 4).join(' '); },
+                en: function (p) { return '\ud83c\udf89 YOOO! ' + p.name + ' is here and it\'s AMAZING! \ud83d\udd28\n\n' + p.descEn + '\n\n' + (p.features.length ? p.featuresEn.slice(0, 3).map(function (f) { return '\ud83c\udf1f ' + f; }).join('\n') + '\n' : '') + (p.url ? '\n\ud83d\ude80 Let\'s go: ' + p.url : '') + '\n\n' + p.hashtagsEn.slice(0, 4).join(' '); }
+            },
+            instagram: {
+                de: function (p) { return '\ud83e\udd2f OKAY WOW \ud83e\udd2f\n\n' + p.name + ' hat mein Leben ver\u00e4ndert und ich bin NICHT dramatisch! \ud83d\ude02\n\n' + p.desc + '\n\n' + (p.features.length ? 'Reasons to love it:\n' + p.features.map(function (f) { return '\ud83d\udcab ' + f; }).join('\n') + '\n\n' : '') + 'Wer ist dabei?! \ud83d\ude4b\u200d\u2642\ufe0f\n\n' + p.hashtags.join(' '); },
+                en: function (p) { return '\ud83e\udd2f OKAY WOW \ud83e\udd2f\n\n' + p.name + ' changed my life and I\'m NOT being dramatic! \ud83d\ude02\n\n' + p.descEn + '\n\n' + (p.features.length ? 'Reasons to love it:\n' + p.featuresEn.map(function (f) { return '\ud83d\udcab ' + f; }).join('\n') + '\n\n' : '') + 'Who\'s in?! \ud83d\ude4b\u200d\u2642\ufe0f\n\n' + p.hashtagsEn.join(' '); }
+            },
+            facebook: {
+                de: function (p) { return '\ud83c\udf89\ud83c\udf89\ud83c\udf89 ES IST SOWEIT! \ud83c\udf89\ud83c\udf89\ud83c\udf89\n\n' + p.name + ' ist gelandet und wir k\u00f6nnen nicht aufh\u00f6ren dar\u00fcber zu reden!\n\n' + p.desc + '\n\n' + (p.features.length ? '\ud83d\ude0d Das ist alles drin:\n' + p.features.map(function (f) { return '\ud83d\udca5 ' + f; }).join('\n') + '\n\n' : '') + (p.price ? 'Und das Beste? Nur ' + p.price + '! \ud83e\udd11\n\n' : '') + 'TAGGT jemanden der das braucht! \ud83d\udc47\ud83d\udc47\ud83d\udc47'; },
+                en: function (p) { return '\ud83c\udf89\ud83c\udf89\ud83c\udf89 IT\'S HERE! \ud83c\udf89\ud83c\udf89\ud83c\udf89\n\n' + p.name + ' has landed and we can\'t stop talking about it!\n\n' + p.descEn + '\n\n' + (p.features.length ? '\ud83d\ude0d Here\'s what you get:\n' + p.featuresEn.map(function (f) { return '\ud83d\udca5 ' + f; }).join('\n') + '\n\n' : '') + (p.price ? 'Best part? Only ' + p.price + '! \ud83e\udd11\n\n' : '') + 'TAG someone who needs this! \ud83d\udc47\ud83d\udc47\ud83d\udc47'; }
+            },
+            linkedin: {
+                de: function (p) { return '\ud83d\ude80 Plot Twist: ' + p.name + ' existiert jetzt!\n\n' + p.desc + '\n\n' + (p.features.length ? 'Die Highlights (ja, es wird noch besser):\n' + p.features.map(function (f) { return '\ud83d\udcaa ' + f; }).join('\n') + '\n\n' : '') + 'Wer will mitmachen? Schreibt mir! \ud83d\ude0e\n\n' + p.hashtags.slice(0, 3).join(' '); },
+                en: function (p) { return '\ud83d\ude80 Plot Twist: ' + p.name + ' now exists!\n\n' + p.descEn + '\n\n' + (p.features.length ? 'The highlights (yes, it gets even better):\n' + p.featuresEn.map(function (f) { return '\ud83d\udcaa ' + f; }).join('\n') + '\n\n' : '') + 'Who\'s in? DM me! \ud83d\ude0e\n\n' + p.hashtagsEn.slice(0, 3).join(' '); }
+            },
+            tiktok: {
+                de: function (p) { return '\ud83e\udee3 Wenn du ' + p.name + ' noch nicht kennst, lebst du unter einem Stein!\n\n' + p.desc + '\n\n' + (p.price ? '\ud83d\udcb0 ' + p.price + ' \u2013 SCHNAPPER!\n' : '') + '\nSpeichern & Teilen nicht vergessen! \ud83d\ude4f\n\n' + p.hashtags.join(' ') + ' #fyp #gamechanger'; },
+                en: function (p) { return '\ud83e\udee3 If you don\'t know ' + p.name + ' yet, you\'re living under a rock!\n\n' + p.descEn + '\n\n' + (p.price ? '\ud83d\udcb0 ' + p.price + ' \u2013 STEAL!\n' : '') + '\nSave & Share! \ud83d\ude4f\n\n' + p.hashtagsEn.join(' ') + ' #fyp #gamechanger'; }
+            }
+        },
+        minimal: {
+            twitter: {
+                de: function (p) { return p.name + '.\n' + p.desc + (p.url ? '\n\n' + p.url : '') + '\n\n' + p.hashtags.slice(0, 3).join(' '); },
+                en: function (p) { return p.name + '.\n' + p.descEn + (p.url ? '\n\n' + p.url : '') + '\n\n' + p.hashtagsEn.slice(0, 3).join(' '); }
+            },
+            instagram: {
+                de: function (p) { return p.name + '\n\n' + p.desc + (p.features.length ? '\n\n' + p.features.join(' / ') : '') + '\n\n' + p.hashtags.join(' '); },
+                en: function (p) { return p.name + '\n\n' + p.descEn + (p.features.length ? '\n\n' + p.featuresEn.join(' / ') : '') + '\n\n' + p.hashtagsEn.join(' '); }
+            },
+            facebook: {
+                de: function (p) { return p.name + '\n\n' + p.desc + (p.features.length ? '\n\n' + p.features.join(' \u2022 ') : '') + (p.price ? '\n\n' + p.price : '') + (p.url ? '\n\n' + p.url : ''); },
+                en: function (p) { return p.name + '\n\n' + p.descEn + (p.features.length ? '\n\n' + p.featuresEn.join(' \u2022 ') : '') + (p.price ? '\n\n' + p.price : '') + (p.url ? '\n\n' + p.url : ''); }
+            },
+            linkedin: {
+                de: function (p) { return p.name + '\n\n' + p.desc + (p.features.length ? '\n\n' + p.features.map(function (f) { return '\u2192 ' + f; }).join('\n') : '') + (p.url ? '\n\n' + p.url : ''); },
+                en: function (p) { return p.name + '\n\n' + p.descEn + (p.features.length ? '\n\n' + p.featuresEn.map(function (f) { return '\u2192 ' + f; }).join('\n') : '') + (p.url ? '\n\n' + p.url : ''); }
+            },
+            tiktok: {
+                de: function (p) { return p.name + '\n' + p.desc + '\n\n' + p.hashtags.slice(0, 5).join(' ') + ' #minimal'; },
+                en: function (p) { return p.name + '\n' + p.descEn + '\n\n' + p.hashtagsEn.slice(0, 5).join(' ') + ' #minimal'; }
+            }
+        }
+    };
+
+    // --- Email Templates ---
+    var emailTemplates = {
+        de: function (p) {
+            return 'Betreff: Entdecken Sie ' + p.name + ' \u2013 ' + p.desc.substring(0, 60) + '...\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n' +
+                'Sehr geehrte Damen und Herren,\n\n' +
+                'wir freuen uns, Ihnen ' + p.name + ' vorzustellen \u2013 ' + p.desc + '\n\n' +
+                (p.features.length ?
+                    'Die wichtigsten Vorteile auf einen Blick:\n\n' +
+                    p.features.map(function (f) { return '  \u2714 ' + f; }).join('\n') + '\n\n' : '') +
+                (p.audience ? 'Ideal f\u00fcr: ' + p.audience + '\n\n' : '') +
+                (p.price ? 'Unser Angebot: ' + p.price + '\n\n' : '') +
+                (p.url ? '\u27a1 Jetzt mehr erfahren: ' + p.url + '\n\n' : '') +
+                'Haben Sie Fragen? Antworten Sie einfach auf diese E-Mail \u2013 wir helfen Ihnen gerne weiter.\n\n' +
+                'Mit freundlichen Gr\u00fc\u00dfen,\n' +
+                'Ihr ' + p.name + ' Team\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n' +
+                'Sie erhalten diese E-Mail, weil Sie sich f\u00fcr ' + p.name + ' interessieren.\n' +
+                'Abmelden | Datenschutz | Impressum';
+        },
+        en: function (p) {
+            return 'Subject: Discover ' + p.name + ' \u2013 ' + p.descEn.substring(0, 60) + '...\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n' +
+                'Dear Customer,\n\n' +
+                'We are excited to introduce ' + p.name + ' \u2013 ' + p.descEn + '\n\n' +
+                (p.features.length ?
+                    'Key benefits at a glance:\n\n' +
+                    p.featuresEn.map(function (f) { return '  \u2714 ' + f; }).join('\n') + '\n\n' : '') +
+                (p.audience ? 'Ideal for: ' + p.audienceEn + '\n\n' : '') +
+                (p.price ? 'Our offer: ' + p.price + '\n\n' : '') +
+                (p.url ? '\u27a1 Learn more: ' + p.url + '\n\n' : '') +
+                'Have questions? Simply reply to this email \u2013 we\'re happy to help.\n\n' +
+                'Best regards,\n' +
+                'The ' + p.name + ' Team\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n' +
+                'You received this email because you showed interest in ' + p.name + '.\n' +
+                'Unsubscribe | Privacy Policy | Legal';
+        }
+    };
+
+    // --- SEO Templates ---
+    var seoTemplates = {
+        de: function (p) {
+            return 'META TITLE:\n' + p.name + ' \u2013 ' + p.desc.substring(0, 50) + ' | Jetzt entdecken\n\n' +
+                'META DESCRIPTION:\n' + p.desc + (p.features.length ? ' \u2714 ' + p.features.slice(0, 3).join(' \u2714 ') : '') + (p.price ? ' Ab ' + p.price + '.' : '') + ' Jetzt informieren!\n\n' +
+                'SEO KEYWORDS:\n' + p.name + ', ' + p.name.toLowerCase() + ' kaufen, ' + p.name.toLowerCase() + ' test, ' + p.name.toLowerCase() + ' erfahrungen, ' +
+                (p.category ? p.categoryDe + ', ' : '') + 'beste ' + p.name.toLowerCase() + ', ' + p.name.toLowerCase() + ' vergleich, ' + p.name.toLowerCase() + ' angebot\n\n' +
+                'H1 \u00dcBERSCHRIFT:\n' + p.name + ' \u2013 ' + p.desc + '\n\n' +
+                'H2 \u00dcBERSCHRIFTEN:\n' +
+                'Warum ' + p.name + '?\n' +
+                'Funktionen & Vorteile\n' +
+                'F\u00fcr wen ist ' + p.name + ' geeignet?\n' +
+                'Jetzt ' + p.name + ' bestellen\n\n' +
+                'ALT-TEXT F\u00dcR BILDER:\n' +
+                p.name + ' Produktbild \u2013 ' + p.desc.substring(0, 60);
+        },
+        en: function (p) {
+            return 'META TITLE:\n' + p.name + ' \u2013 ' + p.descEn.substring(0, 50) + ' | Discover Now\n\n' +
+                'META DESCRIPTION:\n' + p.descEn + (p.features.length ? ' \u2714 ' + p.featuresEn.slice(0, 3).join(' \u2714 ') : '') + (p.price ? ' From ' + p.price + '.' : '') + ' Learn more now!\n\n' +
+                'SEO KEYWORDS:\n' + p.name + ', buy ' + p.name.toLowerCase() + ', ' + p.name.toLowerCase() + ' review, ' + p.name.toLowerCase() + ' features, ' +
+                (p.category ? p.categoryEn + ', ' : '') + 'best ' + p.name.toLowerCase() + ', ' + p.name.toLowerCase() + ' comparison, ' + p.name.toLowerCase() + ' deal\n\n' +
+                'H1 HEADING:\n' + p.name + ' \u2013 ' + p.descEn + '\n\n' +
+                'H2 HEADINGS:\n' +
+                'Why ' + p.name + '?\n' +
+                'Features & Benefits\n' +
+                'Who is ' + p.name + ' for?\n' +
+                'Order ' + p.name + ' Now\n\n' +
+                'IMAGE ALT TEXT:\n' +
+                p.name + ' product image \u2013 ' + p.descEn.substring(0, 60);
+        }
+    };
+
+    // --- Press Release Templates ---
+    var pressTemplates = {
+        de: function (p) {
+            var today = new Date().toLocaleDateString('de-DE', { year: 'numeric', month: 'long', day: 'numeric' });
+            return 'PRESSEMITTEILUNG\n' +
+                'Datum: ' + today + '\n' +
+                'Zur sofortigen Ver\u00f6ffentlichung\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n' +
+                p.name + ': ' + p.desc + '\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n' +
+                'Wir freuen uns, die Verf\u00fcgbarkeit von ' + p.name + ' bekannt zu geben. ' + p.desc + '\n\n' +
+                (p.features.length ?
+                    'Hauptmerkmale von ' + p.name + ':\n\n' +
+                    p.features.map(function (f) { return '  \u2022 ' + f; }).join('\n') + '\n\n' : '') +
+                (p.audience ? '"' + p.name + ' wurde speziell f\u00fcr ' + p.audience + ' entwickelt", erkl\u00e4rt das Entwicklerteam.\n\n' : '') +
+                (p.price ? 'Verf\u00fcgbarkeit & Preis:\n' + p.name + ' ist ab sofort zum Preis von ' + p.price + ' erh\u00e4ltlich.\n\n' : '') +
+                (p.url ? 'Weitere Informationen finden Sie unter: ' + p.url + '\n\n' : '') +
+                'Pressekontakt:\n' +
+                'E-Mail: presse@' + p.name.toLowerCase().replace(/\s+/g, '') + '.de\n' +
+                'Web: ' + (p.url || 'www.' + p.name.toLowerCase().replace(/\s+/g, '') + '.de') + '\n\n' +
+                '###';
+        },
+        en: function (p) {
+            var today = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+            return 'PRESS RELEASE\n' +
+                'Date: ' + today + '\n' +
+                'For Immediate Release\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n' +
+                p.name + ': ' + p.descEn + '\n\n' +
+                '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n' +
+                'We are pleased to announce the availability of ' + p.name + '. ' + p.descEn + '\n\n' +
+                (p.features.length ?
+                    'Key Features of ' + p.name + ':\n\n' +
+                    p.featuresEn.map(function (f) { return '  \u2022 ' + f; }).join('\n') + '\n\n' : '') +
+                (p.audience ? '"' + p.name + ' was specifically designed for ' + p.audienceEn + '," says the development team.\n\n' : '') +
+                (p.price ? 'Availability & Pricing:\n' + p.name + ' is available now at ' + p.price + '.\n\n' : '') +
+                (p.url ? 'For more information, visit: ' + p.url + '\n\n' : '') +
+                'Press Contact:\n' +
+                'Email: press@' + p.name.toLowerCase().replace(/\s+/g, '') + '.com\n' +
+                'Web: ' + (p.url || 'www.' + p.name.toLowerCase().replace(/\s+/g, '') + '.com') + '\n\n' +
+                '###';
+        }
+    };
+
+    // --- Category Mapping ---
+    var categoryNames = {
+        tech: { de: 'Technologie', en: 'Technology' },
+        fashion: { de: 'Mode & Bekleidung', en: 'Fashion & Apparel' },
+        food: { de: 'Lebensmittel & Getr\u00e4nke', en: 'Food & Beverages' },
+        health: { de: 'Gesundheit & Wellness', en: 'Health & Wellness' },
+        home: { de: 'Haus & Garten', en: 'Home & Garden' },
+        sport: { de: 'Sport & Fitness', en: 'Sports & Fitness' },
+        beauty: { de: 'Sch\u00f6nheit & Pflege', en: 'Beauty & Care' },
+        education: { de: 'Bildung & Kurse', en: 'Education & Courses' },
+        software: { de: 'Software & Apps', en: 'Software & Apps' },
+        other: { de: 'Sonstiges', en: 'Other' }
+    };
+
+    // --- Gather Product Data ---
+    function getProductData() {
+        var name = document.getElementById('productName').value.trim();
+        var desc = document.getElementById('productDescription').value.trim();
+        var price = document.getElementById('productPrice').value.trim();
+        var url = document.getElementById('productUrl').value.trim();
+        var features = document.getElementById('productFeatures').value.trim();
+        var audience = document.getElementById('targetAudience').value.trim();
+        var category = document.getElementById('productCategory').value;
+
+        if (!name || !desc) {
+            showToast(currentLang === 'de' ? 'Bitte Produktname und Beschreibung eingeben!' : 'Please enter product name and description!');
+            return null;
+        }
+
+        var featureList = features ? features.split(',').map(function (f) { return f.trim(); }).filter(Boolean) : [];
+        var catInfo = categoryNames[category] || { de: '', en: '' };
+
+        return {
+            name: name,
+            desc: desc,
+            descEn: desc, // User provides in their language; used as-is
+            price: price,
+            url: url,
+            features: featureList,
+            featuresEn: featureList,
+            audience: audience,
+            audienceEn: audience,
+            category: category,
+            categoryDe: catInfo.de,
+            categoryEn: catInfo.en,
+            hashtags: generateHashtags(name, featureList, category, 'de'),
+            hashtagsEn: generateHashtags(name, featureList, category, 'en')
+        };
+    }
+
+    // --- Generate Hashtags ---
+    function generateHashtags(name, features, category, lang) {
+        var tags = [];
+        tags.push('#' + name.replace(/\s+/g, ''));
+
+        var catTags = {
+            tech: { de: ['#Technologie', '#Innovation', '#TechNews', '#Digital', '#Gadget'], en: ['#Technology', '#Innovation', '#TechNews', '#Digital', '#Gadget'] },
+            fashion: { de: ['#Mode', '#Fashion', '#Style', '#OOTD', '#Trend'], en: ['#Fashion', '#Style', '#OOTD', '#Trend', '#Outfit'] },
+            food: { de: ['#Foodie', '#Lecker', '#Essen', '#Kochen', '#Genuss'], en: ['#Foodie', '#Delicious', '#FoodLover', '#Cooking', '#Yummy'] },
+            health: { de: ['#Gesundheit', '#Wellness', '#Fitness', '#Wohlbefinden'], en: ['#Health', '#Wellness', '#Fitness', '#Wellbeing'] },
+            home: { de: ['#Zuhause', '#Wohnen', '#Interior', '#HomeDecor'], en: ['#Home', '#Living', '#Interior', '#HomeDecor'] },
+            sport: { de: ['#Sport', '#Fitness', '#Training', '#Motivation'], en: ['#Sports', '#Fitness', '#Training', '#Motivation'] },
+            beauty: { de: ['#Beauty', '#Pflege', '#Skincare', '#Sch\u00f6nheit'], en: ['#Beauty', '#Skincare', '#SelfCare', '#Glow'] },
+            education: { de: ['#Bildung', '#Lernen', '#Wissen', '#Weiterbildung'], en: ['#Education', '#Learning', '#Knowledge', '#Growth'] },
+            software: { de: ['#Software', '#App', '#Digital', '#SaaS', '#Produktivit\u00e4t'], en: ['#Software', '#App', '#Digital', '#SaaS', '#Productivity'] },
+            other: { de: ['#Neu', '#MustHave', '#Empfehlung'], en: ['#New', '#MustHave', '#Recommended'] }
+        };
+
+        var ct = catTags[category];
+        if (ct) {
+            tags = tags.concat(ct[lang] || ct.en);
+        }
+
+        features.slice(0, 2).forEach(function (f) {
+            tags.push('#' + f.replace(/\s+/g, '').replace(/[^a-zA-Z0-9\u00c0-\u017e]/g, ''));
+        });
+
+        return tags.filter(function (t, i, arr) { return arr.indexOf(t) === i; });
+    }
+
+    // --- Generate Slogans ---
+    function generateSlogans(p) {
+        var slogans = [];
+
+        var sloganTemplatesDe = [
+            p.name + ' \u2013 Weil du das Beste verdienst.',
+            p.name + '. Einfach. Besser. Anders.',
+            'Die Zukunft hei\u00dft ' + p.name + '.',
+            p.name + ' \u2013 Dein n\u00e4chster Schritt nach vorn.',
+            'Erlebe den Unterschied mit ' + p.name + '.',
+            p.name + '. Mehr als du erwartest.'
+        ];
+
+        var sloganTemplatesEn = [
+            p.name + ' \u2013 Because you deserve the best.',
+            p.name + '. Simple. Better. Different.',
+            'The future is called ' + p.name + '.',
+            p.name + ' \u2013 Your next step forward.',
+            'Experience the difference with ' + p.name + '.',
+            p.name + '. More than you expect.'
+        ];
+
+        for (var i = 0; i < sloganTemplatesDe.length; i++) {
+            slogans.push({ de: sloganTemplatesDe[i], en: sloganTemplatesEn[i] });
+        }
+
+        return slogans;
+    }
+
+    // --- Generate Landing Page HTML ---
+    function generateLandingPage(p) {
+        var accentColor = '#6C5CE7';
+        return '<!DOCTYPE html>\n' +
+            '<html lang="de">\n<head>\n' +
+            '  <meta charset="UTF-8">\n' +
+            '  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
+            '  <title>' + p.name + ' \u2013 ' + p.desc.substring(0, 60) + '</title>\n' +
+            '  <meta name="description" content="' + p.desc + '">\n' +
+            '  <meta property="og:title" content="' + p.name + '">\n' +
+            '  <meta property="og:description" content="' + p.desc + '">\n' +
+            '  <style>\n' +
+            '    * { margin: 0; padding: 0; box-sizing: border-box; }\n' +
+            '    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #333; }\n' +
+            '    .hero { background: linear-gradient(135deg, ' + accentColor + ', #00CEC9); color: #fff; padding: 80px 20px; text-align: center; }\n' +
+            '    .hero h1 { font-size: 3rem; margin-bottom: 16px; }\n' +
+            '    .hero p { font-size: 1.3rem; opacity: 0.9; max-width: 600px; margin: 0 auto 32px; }\n' +
+            '    .cta-btn { display: inline-block; padding: 16px 40px; background: #fff; color: ' + accentColor + '; font-size: 18px; font-weight: 700; border-radius: 50px; text-decoration: none; transition: transform 0.3s; }\n' +
+            '    .cta-btn:hover { transform: scale(1.05); }\n' +
+            '    .features { padding: 60px 20px; max-width: 800px; margin: 0 auto; }\n' +
+            '    .features h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; }\n' +
+            '    .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }\n' +
+            '    .feature { text-align: center; padding: 24px; }\n' +
+            '    .feature h3 { color: ' + accentColor + '; margin-bottom: 8px; }\n' +
+            (p.price ? '    .pricing { text-align: center; padding: 60px 20px; background: #f8f9fa; }\n' +
+                '    .pricing h2 { font-size: 2rem; margin-bottom: 16px; }\n' +
+                '    .price-tag { font-size: 3rem; font-weight: 900; color: ' + accentColor + '; }\n' : '') +
+            '    .footer { text-align: center; padding: 30px; color: #888; font-size: 14px; }\n' +
+            '  </style>\n' +
+            '</head>\n<body>\n' +
+            '  <section class="hero">\n' +
+            '    <h1>' + p.name + '</h1>\n' +
+            '    <p>' + p.desc + '</p>\n' +
+            (p.url ? '    <a href="' + escapeHtml(p.url) + '" class="cta-btn">Jetzt entdecken / Discover Now</a>\n' : '    <a href="#features" class="cta-btn">Mehr erfahren / Learn More</a>\n') +
+            '  </section>\n' +
+            (p.features.length ? '  <section class="features" id="features">\n' +
+                '    <h2>Features</h2>\n' +
+                '    <div class="feature-grid">\n' +
+                p.features.map(function (f) { return '      <div class="feature">\n        <h3>' + escapeHtml(f) + '</h3>\n      </div>'; }).join('\n') + '\n' +
+                '    </div>\n' +
+                '  </section>\n' : '') +
+            (p.price ? '  <section class="pricing">\n' +
+                '    <h2>Preis / Price</h2>\n' +
+                '    <div class="price-tag">' + escapeHtml(p.price) + '</div>\n' +
+                '  </section>\n' : '') +
+            '  <footer class="footer">\n' +
+            '    &copy; ' + new Date().getFullYear() + ' ' + escapeHtml(p.name) + '. All rights reserved.\n' +
+            '  </footer>\n' +
+            '</body>\n</html>';
+    }
+
+    function escapeHtml(str) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode(str));
+        return div.innerHTML;
+    }
+
+    // --- Main Generate Function ---
+    function generateAll() {
+        var p = getProductData();
+        if (!p) return;
+
+        var btn = document.getElementById('generateBtn');
+        btn.classList.add('loading');
+
+        setTimeout(function () {
+            var style = templates[selectedStyle] || templates.professional;
+            var platforms = ['twitter', 'instagram', 'facebook', 'linkedin', 'tiktok'];
+
+            platforms.forEach(function (platform) {
+                var tpl = style[platform];
+                if (tpl) {
+                    setText(platform + '-de', tpl.de(p));
+                    setText(platform + '-en', tpl.en(p));
+                }
+            });
+
+            // Email
+            setText('email-de', emailTemplates.de(p));
+            setText('email-en', emailTemplates.en(p));
+
+            // SEO
+            setText('seo-de', seoTemplates.de(p));
+            setText('seo-en', seoTemplates.en(p));
+
+            // Press Release
+            setText('press-de', pressTemplates.de(p));
+            setText('press-en', pressTemplates.en(p));
+
+            // Slogans
+            var slogans = generateSlogans(p);
+            var sloganGrid = document.getElementById('sloganGrid');
+            sloganGrid.innerHTML = '';
+            slogans.forEach(function (s) {
+                var div = document.createElement('div');
+                div.className = 'slogan-item';
+                div.innerHTML = '<span class="slogan-lang">DE</span>' + escapeHtml(s.de);
+                div.onclick = function () { copyToClipboard(s.de); };
+                sloganGrid.appendChild(div);
+
+                var divEn = document.createElement('div');
+                divEn.className = 'slogan-item';
+                divEn.innerHTML = '<span class="slogan-lang">EN</span>' + escapeHtml(s.en);
+                divEn.onclick = function () { copyToClipboard(s.en); };
+                sloganGrid.appendChild(divEn);
+            });
+
+            // Hashtags
+            var hashtagCloud = document.getElementById('hashtagCloud');
+            hashtagCloud.innerHTML = '';
+            var allTags = p.hashtags.concat(p.hashtagsEn).filter(function (t, i, arr) { return arr.indexOf(t) === i; });
+            allTags.forEach(function (tag) {
+                var span = document.createElement('span');
+                span.className = 'hashtag';
+                span.textContent = tag;
+                span.onclick = function () { copyToClipboard(tag); };
+                hashtagCloud.appendChild(span);
+            });
+
+            // Landing Page
+            var landingHtml = generateLandingPage(p);
+            document.getElementById('landing-code').textContent = landingHtml;
+            var iframe = document.createElement('iframe');
+            iframe.srcdoc = landingHtml;
+            var previewDiv = document.getElementById('landing-preview');
+            previewDiv.innerHTML = '';
+            previewDiv.appendChild(iframe);
+
+            // Store data for export
+            generatedData = {
+                product: p,
+                style: selectedStyle,
+                social: {},
+                email: { de: emailTemplates.de(p), en: emailTemplates.en(p) },
+                seo: { de: seoTemplates.de(p), en: seoTemplates.en(p) },
+                press: { de: pressTemplates.de(p), en: pressTemplates.en(p) },
+                slogans: slogans,
+                hashtags: allTags,
+                landingPage: landingHtml
+            };
+
+            platforms.forEach(function (platform) {
+                var tpl = style[platform];
+                if (tpl) {
+                    generatedData.social[platform] = { de: tpl.de(p), en: tpl.en(p) };
+                }
+            });
+
+            // Show results
+            document.getElementById('results').classList.remove('hidden');
+            document.getElementById('results').scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+            btn.classList.remove('loading');
+            showToast(currentLang === 'de' ? 'Alle Werbematerialien wurden generiert!' : 'All promotion materials generated!');
+        }, 600);
+    }
+
+    window.generateAll = generateAll;
+
+    // --- Helper Functions ---
+    function setText(id, text) {
+        var el = document.getElementById(id);
+        if (el) el.textContent = text;
+    }
+
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(function () {
+            showToast(currentLang === 'de' ? 'Kopiert!' : 'Copied!');
+        }).catch(function () {
+            fallbackCopy(text);
+        });
+    }
+
+    function fallbackCopy(text) {
+        var textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+        showToast(currentLang === 'de' ? 'Kopiert!' : 'Copied!');
+    }
+
+    function copyText(id) {
+        var el = document.getElementById(id);
+        if (el) copyToClipboard(el.textContent);
+    }
+
+    window.copyText = copyText;
+
+    function copyAll(section) {
+        if (!generatedData) return;
+        var text = '';
+        if (section === 'social') {
+            Object.keys(generatedData.social).forEach(function (platform) {
+                text += '=== ' + platform.toUpperCase() + ' (DE) ===\n' + generatedData.social[platform].de + '\n\n';
+                text += '=== ' + platform.toUpperCase() + ' (EN) ===\n' + generatedData.social[platform].en + '\n\n';
+            });
+        } else if (section === 'email') {
+            text = '=== EMAIL (DE) ===\n' + generatedData.email.de + '\n\n=== EMAIL (EN) ===\n' + generatedData.email.en;
+        } else if (section === 'seo') {
+            text = '=== SEO (DE) ===\n' + generatedData.seo.de + '\n\n=== SEO (EN) ===\n' + generatedData.seo.en;
+        } else if (section === 'press') {
+            text = '=== PRESS (DE) ===\n' + generatedData.press.de + '\n\n=== PRESS (EN) ===\n' + generatedData.press.en;
+        }
+        copyToClipboard(text);
+    }
+
+    window.copyAll = copyAll;
+
+    function copyHashtags() {
+        if (generatedData) copyToClipboard(generatedData.hashtags.join(' '));
+    }
+
+    window.copyHashtags = copyHashtags;
+
+    // --- Tabs ---
+    function switchTab(btn, tab) {
+        var parent = btn.closest('.result-card');
+        parent.querySelectorAll('.tab-btn').forEach(function (b) { b.classList.remove('active'); });
+        btn.classList.add('active');
+        parent.querySelectorAll('.tab-content').forEach(function (c) { c.classList.add('hidden'); });
+        document.getElementById('tab-' + tab).classList.remove('hidden');
+    }
+
+    window.switchTab = switchTab;
+
+    // --- Landing Page Preview Toggle ---
+    function togglePreview(mode) {
+        var preview = document.getElementById('landing-preview');
+        var code = document.getElementById('landing-code');
+        var buttons = document.querySelectorAll('.preview-btn');
+
+        buttons.forEach(function (b) { b.classList.remove('active'); });
+
+        if (mode === 'preview') {
+            preview.classList.remove('hidden');
+            code.classList.add('hidden');
+            buttons[0].classList.add('active');
+        } else {
+            preview.classList.add('hidden');
+            code.classList.remove('hidden');
+            buttons[1].classList.add('active');
+        }
+    }
+
+    window.togglePreview = togglePreview;
+
+    // --- Export Functions ---
+    function exportAs(format) {
+        if (!generatedData) {
+            showToast(currentLang === 'de' ? 'Bitte zuerst generieren!' : 'Please generate first!');
+            return;
+        }
+
+        var content = '';
+        var filename = 'promo-' + generatedData.product.name.replace(/\s+/g, '-').toLowerCase();
+        var mimeType = 'text/plain';
+
+        if (format === 'txt') {
+            content = buildTextExport();
+            filename += '.txt';
+        } else if (format === 'html') {
+            content = generatedData.landingPage;
+            filename += '-landingpage.html';
+            mimeType = 'text/html';
+        } else if (format === 'json') {
+            content = JSON.stringify(generatedData, null, 2);
+            filename += '.json';
+            mimeType = 'application/json';
+        } else if (format === 'csv') {
+            content = buildCsvExport();
+            filename += '.csv';
+            mimeType = 'text/csv';
+        }
+
+        downloadFile(content, filename, mimeType);
+        showToast((currentLang === 'de' ? 'Export als ' : 'Exported as ') + format.toUpperCase() + '!');
+    }
+
+    window.exportAs = exportAs;
+
+    function buildTextExport() {
+        var d = generatedData;
+        var lines = [];
+        lines.push('========================================');
+        lines.push('PROMOMASTER - WERBEMATERIALIEN / PROMOTION MATERIALS');
+        lines.push('Produkt / Product: ' + d.product.name);
+        lines.push('Erstellt am / Generated: ' + new Date().toLocaleString());
+        lines.push('========================================\n');
+
+        Object.keys(d.social).forEach(function (platform) {
+            lines.push('\n--- ' + platform.toUpperCase() + ' (DE) ---');
+            lines.push(d.social[platform].de);
+            lines.push('\n--- ' + platform.toUpperCase() + ' (EN) ---');
+            lines.push(d.social[platform].en);
+        });
+
+        lines.push('\n\n--- E-MAIL MARKETING (DE) ---');
+        lines.push(d.email.de);
+        lines.push('\n--- E-MAIL MARKETING (EN) ---');
+        lines.push(d.email.en);
+
+        lines.push('\n\n--- SEO (DE) ---');
+        lines.push(d.seo.de);
+        lines.push('\n--- SEO (EN) ---');
+        lines.push(d.seo.en);
+
+        lines.push('\n\n--- PRESSEMITTEILUNG / PRESS RELEASE (DE) ---');
+        lines.push(d.press.de);
+        lines.push('\n--- PRESS RELEASE (EN) ---');
+        lines.push(d.press.en);
+
+        lines.push('\n\n--- SLOGANS ---');
+        d.slogans.forEach(function (s) {
+            lines.push('DE: ' + s.de);
+            lines.push('EN: ' + s.en);
+        });
+
+        lines.push('\n\n--- HASHTAGS ---');
+        lines.push(d.hashtags.join(' '));
+
+        return lines.join('\n');
+    }
+
+    function buildCsvExport() {
+        var d = generatedData;
+        var rows = [['Platform', 'Language', 'Content']];
+
+        Object.keys(d.social).forEach(function (platform) {
+            rows.push([platform, 'DE', '"' + d.social[platform].de.replace(/"/g, '""') + '"']);
+            rows.push([platform, 'EN', '"' + d.social[platform].en.replace(/"/g, '""') + '"']);
+        });
+
+        rows.push(['email', 'DE', '"' + d.email.de.replace(/"/g, '""') + '"']);
+        rows.push(['email', 'EN', '"' + d.email.en.replace(/"/g, '""') + '"']);
+        rows.push(['seo', 'DE', '"' + d.seo.de.replace(/"/g, '""') + '"']);
+        rows.push(['seo', 'EN', '"' + d.seo.en.replace(/"/g, '""') + '"']);
+        rows.push(['press', 'DE', '"' + d.press.de.replace(/"/g, '""') + '"']);
+        rows.push(['press', 'EN', '"' + d.press.en.replace(/"/g, '""') + '"']);
+
+        d.slogans.forEach(function (s, i) {
+            rows.push(['slogan_' + (i + 1), 'DE', '"' + s.de.replace(/"/g, '""') + '"']);
+            rows.push(['slogan_' + (i + 1), 'EN', '"' + s.en.replace(/"/g, '""') + '"']);
+        });
+
+        return rows.map(function (r) { return r.join(','); }).join('\n');
+    }
+
+    function downloadFile(content, filename, mimeType) {
+        var blob = new Blob([content], { type: mimeType + ';charset=utf-8' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    // --- Toast ---
+    function showToast(msg) {
+        var toast = document.getElementById('toast');
+        toast.textContent = msg;
+        toast.classList.remove('hidden');
+        toast.classList.add('show');
+        setTimeout(function () {
+            toast.classList.remove('show');
+            setTimeout(function () { toast.classList.add('hidden'); }, 400);
+        }, 2500);
+    }
+
+    // --- Initialize ---
+    setLanguage('de');
+})();
@@ -0,0 +1,724 @@
+/* === PromoMaster - Product Promotion Tool === */
+
+:root {
+    --primary: #6C5CE7;
+    --primary-dark: #5A4BD1;
+    --primary-light: #A29BFE;
+    --accent: #00CEC9;
+    --accent-dark: #00B5B0;
+    --bg: #0F0F1A;
+    --bg-card: #1A1A2E;
+    --bg-card-hover: #222240;
+    --text: #EAEAEA;
+    --text-muted: #8B8BA3;
+    --border: #2D2D4A;
+    --success: #00E676;
+    --warning: #FFD93D;
+    --danger: #FF6B6B;
+    --radius: 16px;
+    --radius-sm: 10px;
+    --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
+    --glow: 0 0 30px rgba(108, 92, 231, 0.3);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* === Language Toggle === */
+.lang-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 100;
+    display: flex;
+    gap: 4px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 30px;
+    padding: 4px;
+    box-shadow: var(--shadow);
+}
+
+.lang-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 26px;
+    background: transparent;
+    color: var(--text-muted);
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.lang-btn.active {
+    background: var(--primary);
+    color: #fff;
+}
+
+.lang-btn:hover:not(.active) {
+    color: var(--text);
+    background: var(--border);
+}
+
+/* === Hero === */
+.hero {
+    position: relative;
+    padding: 80px 0 50px;
+    text-align: center;
+    overflow: hidden;
+}
+
+.hero-bg {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(ellipse at 50% 50%, rgba(108, 92, 231, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 20%, rgba(0, 206, 201, 0.1) 0%, transparent 40%);
+    animation: heroPulse 8s ease-in-out infinite;
+}
+
+@keyframes heroPulse {
+    0%, 100% { transform: scale(1); opacity: 0.8; }
+    50% { transform: scale(1.05); opacity: 1; }
+}
+
+.hero-title {
+    font-size: clamp(2.5rem, 6vw, 4rem);
+    font-weight: 900;
+    letter-spacing: -2px;
+    position: relative;
+    background: linear-gradient(135deg, var(--primary-light), var(--accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-icon {
+    font-size: 0.8em;
+    -webkit-text-fill-color: initial;
+}
+
+.hero-subtitle {
+    font-size: clamp(1rem, 2.5vw, 1.3rem);
+    color: var(--text-muted);
+    margin-top: 12px;
+    position: relative;
+    font-weight: 300;
+}
+
+/* === Cards === */
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 32px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow);
+    transition: border-color 0.3s ease;
+}
+
+.card:hover {
+    border-color: var(--primary);
+}
+
+/* === Step Header === */
+.step-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 28px;
+}
+
+.step-number {
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    border-radius: 12px;
+    font-weight: 800;
+    font-size: 20px;
+    color: #fff;
+    flex-shrink: 0;
+}
+
+.step-header h2 {
+    font-size: 1.4rem;
+    font-weight: 700;
+}
+
+/* === Form === */
+.form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.form-group.full-width {
+    grid-column: 1 / -1;
+}
+
+.form-group label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+    padding: 14px 18px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-family: inherit;
+    font-size: 15px;
+    transition: all 0.3s ease;
+    outline: none;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
+}
+
+.form-group select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238B8BA3' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 16px center;
+    padding-right: 40px;
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+
+.char-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    text-align: right;
+}
+
+/* === Style Options === */
+.style-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+}
+
+.style-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 20px 14px;
+    background: var(--bg);
+    border: 2px solid var(--border);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.style-option:hover {
+    border-color: var(--primary-light);
+    background: var(--bg-card-hover);
+}
+
+.style-option.selected {
+    border-color: var(--primary);
+    background: rgba(108, 92, 231, 0.1);
+    box-shadow: var(--glow);
+}
+
+.style-icon {
+    font-size: 32px;
+}
+
+.style-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+.style-option.selected .style-label {
+    color: var(--text);
+}
+
+/* === Generate Button === */
+.generate-section {
+    text-align: center;
+    margin: 40px 0;
+}
+
+.btn-generate {
+    padding: 18px 48px;
+    font-size: 18px;
+    font-weight: 700;
+    font-family: inherit;
+    color: #fff;
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 30px rgba(108, 92, 231, 0.4);
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.btn-generate:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 40px rgba(108, 92, 231, 0.5);
+}
+
+.btn-generate:active {
+    transform: translateY(0);
+}
+
+.btn-generate.loading {
+    pointer-events: none;
+    opacity: 0.8;
+}
+
+.btn-generate.loading .btn-icon {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.btn-icon {
+    font-size: 22px;
+    display: inline-block;
+}
+
+/* === Results === */
+.results-section {
+    animation: fadeInUp 0.6s ease;
+}
+
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.result-card {
+    position: relative;
+}
+
+.result-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.result-header h3 {
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+
+.btn-copy-all {
+    padding: 8px 18px;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    color: var(--primary-light);
+    background: rgba(108, 92, 231, 0.1);
+    border: 1px solid var(--primary);
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-copy-all:hover {
+    background: var(--primary);
+    color: #fff;
+}
+
+/* === Tabs === */
+.result-tabs {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 20px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+}
+
+.tab-btn {
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    color: var(--text-muted);
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+
+.tab-btn:hover {
+    color: var(--text);
+    border-color: var(--primary-light);
+}
+
+.tab-btn.active {
+    color: #fff;
+    background: var(--primary);
+    border-color: var(--primary);
+}
+
+.tab-content {
+    transition: all 0.3s ease;
+}
+
+/* === Language Results === */
+.lang-results {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.lang-result {
+    position: relative;
+    padding: 20px;
+    padding-left: 56px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+}
+
+.lang-badge {
+    position: absolute;
+    top: 20px;
+    left: 16px;
+    padding: 3px 10px;
+    font-size: 11px;
+    font-weight: 800;
+    color: #fff;
+    background: linear-gradient(135deg, #E74C3C, #C0392B);
+    border-radius: 6px;
+    letter-spacing: 1px;
+}
+
+.lang-badge.en {
+    background: linear-gradient(135deg, #2980B9, #2471A3);
+}
+
+.result-text {
+    font-size: 14px;
+    line-height: 1.8;
+    white-space: pre-wrap;
+    color: var(--text);
+    padding-right: 40px;
+}
+
+.btn-copy {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    color: var(--text);
+}
+
+.btn-copy:hover {
+    background: var(--primary);
+    border-color: var(--primary);
+}
+
+/* === Slogans === */
+.slogan-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+}
+
+.slogan-item {
+    padding: 18px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    text-align: center;
+    font-weight: 600;
+    font-size: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.slogan-item:hover {
+    border-color: var(--accent);
+    background: var(--bg-card-hover);
+}
+
+.slogan-item .slogan-lang {
+    font-size: 10px;
+    font-weight: 800;
+    color: var(--text-muted);
+    letter-spacing: 1px;
+    display: block;
+    margin-bottom: 6px;
+}
+
+/* === Hashtags === */
+.hashtag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.hashtag {
+    padding: 8px 16px;
+    background: rgba(108, 92, 231, 0.1);
+    border: 1px solid var(--primary);
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--primary-light);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.hashtag:hover {
+    background: var(--primary);
+    color: #fff;
+}
+
+/* === Landing Page Preview === */
+.landing-preview-container {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.preview-toggle {
+    display: flex;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+}
+
+.preview-btn {
+    flex: 1;
+    padding: 12px;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    color: var(--text-muted);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.preview-btn.active {
+    color: var(--text);
+    background: var(--bg-card);
+    border-bottom: 2px solid var(--primary);
+}
+
+.landing-preview {
+    min-height: 300px;
+    background: #fff;
+}
+
+.landing-preview iframe {
+    width: 100%;
+    height: 500px;
+    border: none;
+}
+
+.landing-code {
+    padding: 20px;
+    background: var(--bg);
+    color: var(--accent);
+    font-size: 13px;
+    line-height: 1.6;
+    overflow-x: auto;
+    max-height: 400px;
+    white-space: pre;
+    margin: 0;
+    cursor: pointer;
+}
+
+/* === Export === */
+.export-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 14px;
+}
+
+.btn-export {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 24px 16px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-export:hover {
+    border-color: var(--accent);
+    background: var(--bg-card-hover);
+    transform: translateY(-2px);
+}
+
+.export-icon {
+    font-size: 28px;
+}
+
+/* === Toast === */
+.toast {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    padding: 14px 28px;
+    background: var(--success);
+    color: #000;
+    font-weight: 600;
+    font-size: 14px;
+    border-radius: 30px;
+    z-index: 1000;
+    opacity: 0;
+    transition: all 0.4s ease;
+    box-shadow: 0 8px 30px rgba(0, 230, 118, 0.3);
+}
+
+.toast.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+/* === Footer === */
+.footer {
+    text-align: center;
+    padding: 40px 20px;
+    color: var(--text-muted);
+    font-size: 14px;
+    border-top: 1px solid var(--border);
+    margin-top: 60px;
+}
+
+/* === Hidden === */
+.hidden {
+    display: none !important;
+}
+
+/* === Responsive === */
+@media (max-width: 768px) {
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .style-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .slogan-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .export-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .card {
+        padding: 24px 18px;
+    }
+
+    .hero {
+        padding: 60px 0 30px;
+    }
+
+    .lang-toggle {
+        top: 12px;
+        right: 12px;
+    }
+
+    .result-tabs {
+        gap: 4px;
+    }
+
+    .tab-btn {
+        padding: 8px 14px;
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .style-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .export-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .btn-generate {
+        padding: 16px 32px;
+        font-size: 16px;
+    }
+}
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Trafag Sales Exporter</title>
+    <base href="/" />
+    <link href="css/app.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+    <HeadOutlet @rendermode="@Microsoft.AspNetCore.Components.Web.RenderMode.InteractiveServer" />
+</head>
+<body>
+    <Routes @rendermode="@Microsoft.AspNetCore.Components.Web.RenderMode.InteractiveServer" />
+    <script src="_framework/blazor.web.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+</body>
+</html>
@@ -0,0 +1,38 @@
+@inherits LayoutComponentBase
+
+<MudThemeProvider Theme="_theme" />
+<MudPopoverProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
+<MudLayout>
+    <MudAppBar Elevation="1" Color="Color.Primary">
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start"
+                       OnClick="ToggleDrawer" />
+        <MudText Typo="Typo.h6" Class="ml-3">Trafag Sales Exporter</MudText>
+    </MudAppBar>
+
+    <MudDrawer @bind-Open="_drawerOpen" Elevation="2" ClipMode="DrawerClipMode.Always">
+        <NavMenu />
+    </MudDrawer>
+
+    <MudMainContent Class="pa-4">
+        @Body
+    </MudMainContent>
+</MudLayout>
+
+@code {
+    private bool _drawerOpen = true;
+
+    private readonly MudTheme _theme = new()
+    {
+        PaletteLight = new PaletteLight
+        {
+            Primary = "#1565C0",
+            Secondary = "#00897B",
+            AppbarBackground = "#1565C0"
+        }
+    };
+
+    private void ToggleDrawer() => _drawerOpen = !_drawerOpen;
+}
@@ -0,0 +1,14 @@
+<MudNavMenu>
+    <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard">
+        Dashboard
+    </MudNavLink>
+    <MudNavLink Href="/standorte" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LocationOn">
+        Standorte
+    </MudNavLink>
+    <MudNavLink Href="/settings" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Settings">
+        Settings
+    </MudNavLink>
+    <MudNavLink Href="/logs" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">
+        Logs
+    </MudNavLink>
+</MudNavMenu>
@@ -0,0 +1,193 @@
+@page "/"
+@using Microsoft.EntityFrameworkCore
+@using TrafagSalesExporter.Data
+@using TrafagSalesExporter.Services
+@inject IDbContextFactory<AppDbContext> DbFactory
+@inject ExportOrchestrationService Orchestrator
+@inject TimerBackgroundService TimerService
+@inject ISnackbar Snackbar
+@implements IDisposable
+
+<PageTitle>Dashboard</PageTitle>
+
+<MudText Typo="Typo.h4" Class="mb-4">Dashboard</MudText>
+
+<MudPaper Class="pa-4 mb-4" Elevation="1">
+    <MudStack Row AlignItems="AlignItems.Center" Spacing="4">
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.PlayArrow"
+                   OnClick="ExportAll" Disabled="_anyRunning">
+            Alle exportieren
+        </MudButton>
+        <MudText Typo="Typo.body1">
+            @if (TimerService.NextRun < DateTime.MaxValue)
+            {
+                <MudIcon Icon="@Icons.Material.Filled.Schedule" Size="Size.Small" Class="mr-1" />
+                @($"Nächster automatischer Lauf: {TimerService.NextRun:dd.MM.yyyy HH:mm}")
+            }
+            else
+            {
+                <MudIcon Icon="@Icons.Material.Filled.TimerOff" Size="Size.Small" Class="mr-1" />
+                @("Timer deaktiviert")
+            }
+        </MudText>
+    </MudStack>
+</MudPaper>
+
+<MudTable Items="_dashboardRows" Dense Hover Striped Loading="_loading">
+    <HeaderContent>
+        <MudTh>Land</MudTh>
+        <MudTh>TSC</MudTh>
+        <MudTh>Schema</MudTh>
+        <MudTh>Server</MudTh>
+        <MudTh>Status</MudTh>
+        <MudTh>Zeilen</MudTh>
+        <MudTh>Letzter Lauf</MudTh>
+        <MudTh>Dauer</MudTh>
+        <MudTh>Aktion</MudTh>
+    </HeaderContent>
+    <RowTemplate>
+        <MudTd>@context.Land</MudTd>
+        <MudTd>@context.TSC</MudTd>
+        <MudTd>@context.Schema</MudTd>
+        <MudTd>@context.ServerName</MudTd>
+        <MudTd>
+            @if (Orchestrator.IsExporting(context.SiteId))
+            {
+                <MudProgressCircular Size="Size.Small" Indeterminate Color="Color.Primary" Class="mr-1" />
+                <MudText Typo="Typo.caption">@Orchestrator.GetExportStatus(context.SiteId)</MudText>
+            }
+            else if (context.LastStatus == "OK")
+            {
+                <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Color="Color.Success" Size="Size.Small" />
+            }
+            else if (context.LastStatus == "Error")
+            {
+                <MudTooltip Text="@context.ErrorMessage">
+                    <MudIcon Icon="@Icons.Material.Filled.Error" Color="Color.Error" Size="Size.Small" />
+                </MudTooltip>
+            }
+            else
+            {
+                <MudText Typo="Typo.caption" Color="Color.Default">-</MudText>
+            }
+        </MudTd>
+        <MudTd>@(context.RowCount > 0 ? context.RowCount.ToString("N0") : "-")</MudTd>
+        <MudTd>@(context.LastRun.HasValue ? context.LastRun.Value.ToString("dd.MM.yyyy HH:mm:ss") : "-")</MudTd>
+        <MudTd>@(context.DurationSeconds > 0 ? $"{context.DurationSeconds:F1}s" : "-")</MudTd>
+        <MudTd>
+            <MudButton Size="Size.Small" Variant="Variant.Outlined" Color="Color.Primary"
+                       StartIcon="@Icons.Material.Filled.FileDownload"
+                       OnClick="() => ExportSingle(context.SiteId)"
+                       Disabled="Orchestrator.IsExporting(context.SiteId)">
+                Export
+            </MudButton>
+        </MudTd>
+    </RowTemplate>
+</MudTable>
+
+@code {
+    private List<DashboardRow> _dashboardRows = new();
+    private bool _loading = true;
+    private bool _anyRunning;
+
+    protected override async Task OnInitializedAsync()
+    {
+        Orchestrator.OnExportStatusChanged += HandleStatusChanged;
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _loading = true;
+        using var db = await DbFactory.CreateDbContextAsync();
+
+        var sites = await db.Sites.Include(s => s.HanaServer).Where(s => s.IsActive).ToListAsync();
+        var logs = await db.ExportLogs
+            .GroupBy(l => l.SiteId)
+            .Select(g => g.OrderByDescending(l => l.Timestamp).First())
+            .ToListAsync();
+
+        _dashboardRows = sites.Select(s =>
+        {
+            var log = logs.FirstOrDefault(l => l.SiteId == s.Id);
+            return new DashboardRow
+            {
+                SiteId = s.Id,
+                Land = s.Land,
+                TSC = s.TSC,
+                Schema = s.Schema,
+                ServerName = s.HanaServer?.Name ?? "",
+                LastStatus = log?.Status ?? "",
+                RowCount = log?.RowCount ?? 0,
+                LastRun = log?.Timestamp,
+                DurationSeconds = log?.DurationSeconds ?? 0,
+                ErrorMessage = log?.ErrorMessage ?? ""
+            };
+        }).ToList();
+
+        _anyRunning = _dashboardRows.Any(r => Orchestrator.IsExporting(r.SiteId));
+        _loading = false;
+    }
+
+    private async Task ExportAll()
+    {
+        _anyRunning = true;
+        _ = Task.Run(async () =>
+        {
+            await Orchestrator.ExportAllAsync();
+            await InvokeAsync(async () =>
+            {
+                await LoadDataAsync();
+                StateHasChanged();
+            });
+        });
+        Snackbar.Add("Export für alle Standorte gestartet", Severity.Info);
+    }
+
+    private void ExportSingle(int siteId)
+    {
+        _ = Task.Run(async () =>
+        {
+            await Orchestrator.ExportSiteByIdAsync(siteId);
+            await InvokeAsync(async () =>
+            {
+                await LoadDataAsync();
+                StateHasChanged();
+            });
+        });
+        Snackbar.Add("Export gestartet", Severity.Info);
+    }
+
+    private async void HandleStatusChanged()
+    {
+        await InvokeAsync(async () =>
+        {
+            _anyRunning = _dashboardRows.Any(r => Orchestrator.IsExporting(r.SiteId));
+            StateHasChanged();
+            if (!_anyRunning)
+            {
+                await LoadDataAsync();
+                StateHasChanged();
+            }
+        });
+    }
+
+    public void Dispose()
+    {
+        Orchestrator.OnExportStatusChanged -= HandleStatusChanged;
+    }
+
+    private class DashboardRow
+    {
+        public int SiteId { get; set; }
+        public string Land { get; set; } = "";
+        public string TSC { get; set; } = "";
+        public string Schema { get; set; } = "";
+        public string ServerName { get; set; } = "";
+        public string LastStatus { get; set; } = "";
+        public int RowCount { get; set; }
+        public DateTime? LastRun { get; set; }
+        public double DurationSeconds { get; set; }
+        public string ErrorMessage { get; set; } = "";
+    }
+}
@@ -0,0 +1,134 @@
+@page "/logs"
+@using Microsoft.EntityFrameworkCore
+@using TrafagSalesExporter.Data
+@inject IDbContextFactory<AppDbContext> DbFactory
+@inject ISnackbar Snackbar
+@inject IDialogService DialogService
+
+<PageTitle>Logs</PageTitle>
+
+<MudText Typo="Typo.h4" Class="mb-4">Export Logs</MudText>
+
+<MudPaper Class="pa-4 mb-4" Elevation="1">
+    <MudStack Row AlignItems="AlignItems.Center" Spacing="3">
+        <MudSelect @bind-Value="_filterLand" Label="Land" Clearable Dense Style="max-width:200px;">
+            @foreach (var land in _availableLands)
+            {
+                <MudSelectItem Value="@land">@land</MudSelectItem>
+            }
+        </MudSelect>
+        <MudSelect @bind-Value="_filterStatus" Label="Status" Clearable Dense Style="max-width:150px;">
+            <MudSelectItem Value="@("OK")">OK</MudSelectItem>
+            <MudSelectItem Value="@("Error")">Error</MudSelectItem>
+        </MudSelect>
+        <MudDatePicker @bind-Date="_filterDate" Label="Datum" Clearable Dense Style="max-width:200px;" />
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ApplyFilter"
+                   StartIcon="@Icons.Material.Filled.FilterAlt">
+            Filtern
+        </MudButton>
+        <MudSpacer />
+        <MudButton Variant="Variant.Outlined" Color="Color.Error" OnClick="DeleteOldLogs"
+                   StartIcon="@Icons.Material.Filled.DeleteSweep">
+            Alte Logs löschen
+        </MudButton>
+    </MudStack>
+</MudPaper>
+
+<MudTable Items="_logs" Dense Hover Striped Loading="_loading">
+    <HeaderContent>
+        <MudTh>Zeitpunkt</MudTh>
+        <MudTh>Land</MudTh>
+        <MudTh>TSC</MudTh>
+        <MudTh>Status</MudTh>
+        <MudTh>Zeilen</MudTh>
+        <MudTh>Dauer</MudTh>
+        <MudTh>Dateiname</MudTh>
+        <MudTh>Fehler</MudTh>
+    </HeaderContent>
+    <RowTemplate>
+        <MudTd>@context.Timestamp.ToString("dd.MM.yyyy HH:mm:ss")</MudTd>
+        <MudTd>@context.Land</MudTd>
+        <MudTd>@context.TSC</MudTd>
+        <MudTd>
+            @if (context.Status == "OK")
+            {
+                <MudChip T="string" Size="Size.Small" Color="Color.Success">OK</MudChip>
+            }
+            else
+            {
+                <MudChip T="string" Size="Size.Small" Color="Color.Error">Error</MudChip>
+            }
+        </MudTd>
+        <MudTd>@context.RowCount.ToString("N0")</MudTd>
+        <MudTd>@($"{context.DurationSeconds:F1}s")</MudTd>
+        <MudTd>@context.FileName</MudTd>
+        <MudTd>
+            @if (!string.IsNullOrEmpty(context.ErrorMessage))
+            {
+                <MudTooltip Text="@context.ErrorMessage">
+                    <MudText Typo="Typo.caption" Color="Color.Error" Style="max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;">
+                        @context.ErrorMessage
+                    </MudText>
+                </MudTooltip>
+            }
+        </MudTd>
+    </RowTemplate>
+</MudTable>
+
+@code {
+    private List<ExportLog> _logs = new();
+    private List<string> _availableLands = new();
+    private string? _filterLand;
+    private string? _filterStatus;
+    private DateTime? _filterDate;
+    private bool _loading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        using var db = await DbFactory.CreateDbContextAsync();
+        _availableLands = await db.ExportLogs.Select(l => l.Land).Distinct().OrderBy(l => l).ToListAsync();
+        await LoadLogsAsync();
+    }
+
+    private async Task LoadLogsAsync()
+    {
+        _loading = true;
+        using var db = await DbFactory.CreateDbContextAsync();
+        IQueryable<ExportLog> query = db.ExportLogs.OrderByDescending(l => l.Timestamp);
+
+        if (!string.IsNullOrEmpty(_filterLand))
+            query = query.Where(l => l.Land == _filterLand);
+
+        if (!string.IsNullOrEmpty(_filterStatus))
+            query = query.Where(l => l.Status == _filterStatus);
+
+        if (_filterDate.HasValue)
+            query = query.Where(l => l.Timestamp.Date == _filterDate.Value.Date);
+
+        _logs = await query.Take(500).ToListAsync();
+        _loading = false;
+    }
+
+    private async Task ApplyFilter()
+    {
+        await LoadLogsAsync();
+    }
+
+    private async Task DeleteOldLogs()
+    {
+        var result = await DialogService.ShowMessageBox(
+            "Alte Logs löschen",
+            "Logs älter als 90 Tage löschen?",
+            yesText: "Löschen", cancelText: "Abbrechen");
+
+        if (result != true) return;
+
+        using var db = await DbFactory.CreateDbContextAsync();
+        var cutoff = DateTime.Now.AddDays(-90);
+        var oldLogs = await db.ExportLogs.Where(l => l.Timestamp < cutoff).ToListAsync();
+        db.ExportLogs.RemoveRange(oldLogs);
+        var count = await db.SaveChangesAsync();
+        await LoadLogsAsync();
+        Snackbar.Add($"{oldLogs.Count} alte Logs gelöscht", Severity.Info);
+    }
+}
@@ -0,0 +1,164 @@
+@page "/settings"
+@using Microsoft.EntityFrameworkCore
+@using TrafagSalesExporter.Data
+@using TrafagSalesExporter.Services
+@inject IDbContextFactory<AppDbContext> DbFactory
+@inject SharePointUploadService SpService
+@inject TimerBackgroundService TimerService
+@inject ISnackbar Snackbar
+
+<PageTitle>Settings</PageTitle>
+
+<MudText Typo="Typo.h4" Class="mb-4">Settings</MudText>
+
+@* SharePoint Config *@
+<MudText Typo="Typo.h5" Class="mb-2">SharePoint Konfiguration</MudText>
+<MudPaper Class="pa-4 mb-6" Elevation="1">
+    <MudGrid>
+        <MudItem xs="12" md="6">
+            <MudTextField @bind-Value="_spConfig.SiteUrl" Label="Site URL" />
+        </MudItem>
+        <MudItem xs="12" md="6">
+            <MudTextField @bind-Value="_spConfig.ExportFolder" Label="Export Folder" />
+        </MudItem>
+        <MudItem xs="12" md="4">
+            <MudTextField @bind-Value="_spConfig.TenantId" Label="Tenant ID" />
+        </MudItem>
+        <MudItem xs="12" md="4">
+            <MudTextField @bind-Value="_spConfig.ClientId" Label="Client ID" />
+        </MudItem>
+        <MudItem xs="12" md="4">
+            <MudTextField @bind-Value="_spConfig.ClientSecret" Label="Client Secret" InputType="InputType.Password" />
+        </MudItem>
+        <MudItem xs="12">
+            <MudStack Row Spacing="2">
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveSharePoint"
+                           StartIcon="@Icons.Material.Filled.Save">
+                    Speichern
+                </MudButton>
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" OnClick="TestSharePoint"
+                           StartIcon="@Icons.Material.Filled.NetworkCheck" Disabled="_testingSp">
+                    @if (_testingSp)
+                    {
+                        <MudProgressCircular Size="Size.Small" Indeterminate Class="mr-2" />
+                        @("Teste...")
+                    }
+                    else
+                    {
+                        @("SharePoint Verbindung testen")
+                    }
+                </MudButton>
+            </MudStack>
+        </MudItem>
+    </MudGrid>
+</MudPaper>
+
+@* Export Settings *@
+<MudText Typo="Typo.h5" Class="mb-2">Export Einstellungen</MudText>
+<MudPaper Class="pa-4 mb-6" Elevation="1">
+    <MudGrid>
+        <MudItem xs="12" md="4">
+            <MudTextField @bind-Value="_exportSettings.DateFilter" Label="Datum-Filter (ab)"
+                          HelperText="Format: yyyy-MM-dd" />
+        </MudItem>
+        <MudItem xs="12" md="2">
+            <MudNumericField @bind-Value="_exportSettings.TimerHour" Label="Timer Stunde" Min="0" Max="23" />
+        </MudItem>
+        <MudItem xs="12" md="2">
+            <MudNumericField @bind-Value="_exportSettings.TimerMinute" Label="Timer Minute" Min="0" Max="59" />
+        </MudItem>
+        <MudItem xs="12" md="4">
+            <MudSwitch @bind-Value="_exportSettings.TimerEnabled" Label="Timer aktiviert" Color="Color.Primary" />
+        </MudItem>
+        <MudItem xs="12">
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveExportSettings"
+                       StartIcon="@Icons.Material.Filled.Save">
+                Speichern
+            </MudButton>
+        </MudItem>
+    </MudGrid>
+</MudPaper>
+
+@* Filename Preview *@
+<MudText Typo="Typo.h5" Class="mb-2">Dateiname Vorschau</MudText>
+<MudPaper Class="pa-4" Elevation="1">
+    <MudText Typo="Typo.body1">
+        <MudIcon Icon="@Icons.Material.Filled.InsertDriveFile" Size="Size.Small" Class="mr-1" />
+        Sales_{"{TSC}"}_{DateTime.Now:yyyy-MM-dd}.xlsx
+    </MudText>
+    <MudText Typo="Typo.caption" Class="mt-1">
+        Beispiel: Sales_TRFR_@(DateTime.Now.ToString("yyyy-MM-dd")).xlsx
+    </MudText>
+</MudPaper>
+
+@code {
+    private SharePointConfig _spConfig = new();
+    private ExportSettings _exportSettings = new();
+    private bool _testingSp;
+
+    protected override async Task OnInitializedAsync()
+    {
+        using var db = await DbFactory.CreateDbContextAsync();
+        _spConfig = await db.SharePointConfigs.FirstOrDefaultAsync() ?? new SharePointConfig();
+        _exportSettings = await db.ExportSettings.FirstOrDefaultAsync() ?? new ExportSettings();
+    }
+
+    private async Task SaveSharePoint()
+    {
+        using var db = await DbFactory.CreateDbContextAsync();
+        var existing = await db.SharePointConfigs.FirstOrDefaultAsync();
+        if (existing is null)
+        {
+            db.SharePointConfigs.Add(_spConfig);
+        }
+        else
+        {
+            existing.SiteUrl = _spConfig.SiteUrl;
+            existing.ExportFolder = _spConfig.ExportFolder;
+            existing.TenantId = _spConfig.TenantId;
+            existing.ClientId = _spConfig.ClientId;
+            existing.ClientSecret = _spConfig.ClientSecret;
+        }
+        await db.SaveChangesAsync();
+        Snackbar.Add("SharePoint Konfiguration gespeichert", Severity.Success);
+    }
+
+    private async Task TestSharePoint()
+    {
+        _testingSp = true;
+        try
+        {
+            await SpService.TestConnectionAsync(
+                _spConfig.TenantId, _spConfig.ClientId, _spConfig.ClientSecret, _spConfig.SiteUrl);
+            Snackbar.Add("SharePoint Verbindung erfolgreich!", Severity.Success);
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Verbindung fehlgeschlagen: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _testingSp = false;
+        }
+    }
+
+    private async Task SaveExportSettings()
+    {
+        using var db = await DbFactory.CreateDbContextAsync();
+        var existing = await db.ExportSettings.FirstOrDefaultAsync();
+        if (existing is null)
+        {
+            db.ExportSettings.Add(_exportSettings);
+        }
+        else
+        {
+            existing.DateFilter = _exportSettings.DateFilter;
+            existing.TimerHour = _exportSettings.TimerHour;
+            existing.TimerMinute = _exportSettings.TimerMinute;
+            existing.TimerEnabled = _exportSettings.TimerEnabled;
+        }
+        await db.SaveChangesAsync();
+        TimerService.Recalculate();
+        Snackbar.Add("Export Einstellungen gespeichert", Severity.Success);
+    }
+}
@@ -0,0 +1,316 @@
+@page "/standorte"
+@using Microsoft.EntityFrameworkCore
+@using TrafagSalesExporter.Data
+@using TrafagSalesExporter.Services
+@inject IDbContextFactory<AppDbContext> DbFactory
+@inject HanaQueryService HanaService
+@inject ISnackbar Snackbar
+@inject IDialogService DialogService
+
+<PageTitle>Standorte</PageTitle>
+
+<MudText Typo="Typo.h4" Class="mb-4">Standorte</MudText>
+
+@* HANA Server Section *@
+<MudText Typo="Typo.h5" Class="mb-2">HANA Server</MudText>
+<MudPaper Class="pa-4 mb-6" Elevation="1">
+    <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add"
+               OnClick="AddServer" Class="mb-3">
+        Server hinzufügen
+    </MudButton>
+
+    <MudTable Items="_servers" Dense Hover Striped>
+        <HeaderContent>
+            <MudTh>Name</MudTh>
+            <MudTh>Host</MudTh>
+            <MudTh>Port</MudTh>
+            <MudTh>Username</MudTh>
+            <MudTh>Aktionen</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>@context.Name</MudTd>
+            <MudTd>@context.Host</MudTd>
+            <MudTd>@context.Port</MudTd>
+            <MudTd>@context.Username</MudTd>
+            <MudTd>
+                <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small"
+                               OnClick="() => EditServer(context)" />
+                <MudIconButton Icon="@Icons.Material.Filled.NetworkCheck" Size="Size.Small" Color="Color.Info"
+                               OnClick="() => TestServerConnection(context)" />
+                <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error"
+                               OnClick="() => DeleteServer(context)" />
+            </MudTd>
+        </RowTemplate>
+    </MudTable>
+</MudPaper>
+
+@* Sites Section *@
+<MudText Typo="Typo.h5" Class="mb-2">Standorte (Sites)</MudText>
+<MudPaper Class="pa-4" Elevation="1">
+    <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add"
+               OnClick="AddSite" Class="mb-3">
+        Neuen Standort hinzufügen
+    </MudButton>
+
+    <MudTable Items="_sites" Dense Hover Striped>
+        <HeaderContent>
+            <MudTh>Land</MudTh>
+            <MudTh>TSC</MudTh>
+            <MudTh>Schema</MudTh>
+            <MudTh>Server</MudTh>
+            <MudTh>Aktiv</MudTh>
+            <MudTh>Aktionen</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>@context.Land</MudTd>
+            <MudTd>@context.TSC</MudTd>
+            <MudTd>@context.Schema</MudTd>
+            <MudTd>@(context.HanaServer?.Name ?? "-")</MudTd>
+            <MudTd>
+                @if (context.IsActive)
+                {
+                    <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Color="Color.Success" Size="Size.Small" />
+                }
+                else
+                {
+                    <MudIcon Icon="@Icons.Material.Filled.Cancel" Color="Color.Default" Size="Size.Small" />
+                }
+            </MudTd>
+            <MudTd>
+                <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small"
+                               OnClick="() => EditSite(context)" />
+                <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error"
+                               OnClick="() => DeleteSite(context)" />
+            </MudTd>
+        </RowTemplate>
+    </MudTable>
+</MudPaper>
+
+@* Server Dialog *@
+<MudDialog @bind-Visible="_serverDialogVisible" Options="_dialogOptions">
+    <TitleContent>
+        <MudText Typo="Typo.h6">@(_editingServer.Id == 0 ? "Server hinzufügen" : "Server bearbeiten")</MudText>
+    </TitleContent>
+    <DialogContent>
+        <MudTextField @bind-Value="_editingServer.Name" Label="Name" Required />
+        <MudTextField @bind-Value="_editingServer.Host" Label="Host" Required
+                      HelperText="IP oder Hostname (ohne Protokoll)" />
+        <MudNumericField @bind-Value="_editingServer.Port" Label="Port"
+                         HelperText="Typisch 30015 (Tenant), 30013 (SystemDB), 3xx15 für Instanz xx" />
+        <MudTextField @bind-Value="_editingServer.Username" Label="Username" />
+        <MudTextField @bind-Value="_editingServer.Password" Label="Password" InputType="InputType.Password" />
+        <MudTextField @bind-Value="_editingServer.DatabaseName" Label="Database Name (MDC)"
+                      HelperText="Nur bei Multi-Tenant Setup angeben, sonst leer lassen" />
+        <MudSwitch @bind-Value="_editingServer.UseSsl" Label="SSL/TLS verwenden (encrypt=true)" Color="Color.Primary" />
+        <MudSwitch @bind-Value="_editingServer.ValidateCertificate" Label="SSL-Zertifikat validieren" Color="Color.Primary"
+                   Disabled="!_editingServer.UseSsl" />
+        <MudTextField @bind-Value="_editingServer.AdditionalParams" Label="Zusätzliche Parameter"
+                      HelperText="Optional, z.B. sslCryptoProvider=openssl;communicationTimeout=0" />
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="() => _serverDialogVisible = false">Abbrechen</MudButton>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveServer">Speichern</MudButton>
+    </DialogActions>
+</MudDialog>
+
+@* Site Dialog *@
+<MudDialog @bind-Visible="_siteDialogVisible" Options="_dialogOptions">
+    <TitleContent>
+        <MudText Typo="Typo.h6">@(_editingSite.Id == 0 ? "Standort hinzufügen" : "Standort bearbeiten")</MudText>
+    </TitleContent>
+    <DialogContent>
+        <MudSelect @bind-Value="_editingSite.HanaServerId" Label="Server" Required>
+            @foreach (var s in _servers)
+            {
+                <MudSelectItem Value="s.Id">@s.Name</MudSelectItem>
+            }
+        </MudSelect>
+        <MudTextField @bind-Value="_editingSite.Schema" Label="Schema" Required />
+        <MudTextField @bind-Value="_editingSite.TSC" Label="TSC" Required />
+        <MudTextField @bind-Value="_editingSite.Land" Label="Land" Required />
+        <MudCheckBox @bind-Value="_editingSite.IsActive" Label="Aktiv" />
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="() => _siteDialogVisible = false">Abbrechen</MudButton>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveSite">Speichern</MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+    private List<HanaServer> _servers = new();
+    private List<Site> _sites = new();
+    private HanaServer _editingServer = new();
+    private Site _editingSite = new();
+    private bool _serverDialogVisible;
+    private bool _siteDialogVisible;
+    private readonly DialogOptions _dialogOptions = new() { MaxWidth = MaxWidth.Small, FullWidth = true };
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        using var db = await DbFactory.CreateDbContextAsync();
+        _servers = await db.HanaServers.OrderBy(s => s.Name).ToListAsync();
+        _sites = await db.Sites.Include(s => s.HanaServer).OrderBy(s => s.Land).ToListAsync();
+    }
+
+    // Server CRUD
+    private void AddServer()
+    {
+        _editingServer = new HanaServer { Port = 30015 };
+        _serverDialogVisible = true;
+    }
+
+    private void EditServer(HanaServer server)
+    {
+        _editingServer = new HanaServer
+        {
+            Id = server.Id,
+            Name = server.Name,
+            Host = server.Host,
+            Port = server.Port,
+            Username = server.Username,
+            Password = server.Password,
+            DatabaseName = server.DatabaseName,
+            UseSsl = server.UseSsl,
+            ValidateCertificate = server.ValidateCertificate,
+            AdditionalParams = server.AdditionalParams
+        };
+        _serverDialogVisible = true;
+    }
+
+    private async Task SaveServer()
+    {
+        using var db = await DbFactory.CreateDbContextAsync();
+        if (_editingServer.Id == 0)
+        {
+            db.HanaServers.Add(_editingServer);
+        }
+        else
+        {
+            var existing = await db.HanaServers.FindAsync(_editingServer.Id);
+            if (existing is not null)
+            {
+                existing.Name = _editingServer.Name;
+                existing.Host = _editingServer.Host;
+                existing.Port = _editingServer.Port;
+                existing.Username = _editingServer.Username;
+                existing.Password = _editingServer.Password;
+                existing.DatabaseName = _editingServer.DatabaseName;
+                existing.UseSsl = _editingServer.UseSsl;
+                existing.ValidateCertificate = _editingServer.ValidateCertificate;
+                existing.AdditionalParams = _editingServer.AdditionalParams;
+            }
+        }
+        await db.SaveChangesAsync();
+        _serverDialogVisible = false;
+        await LoadDataAsync();
+        Snackbar.Add("Server gespeichert", Severity.Success);
+    }
+
+    private async Task DeleteServer(HanaServer server)
+    {
+        var result = await DialogService.ShowMessageBox(
+            "Server löschen",
+            $"Server '{server.Name}' wirklich löschen?",
+            yesText: "Löschen", cancelText: "Abbrechen");
+
+        if (result != true) return;
+
+        using var db = await DbFactory.CreateDbContextAsync();
+        var entity = await db.HanaServers.FindAsync(server.Id);
+        if (entity is not null)
+        {
+            db.HanaServers.Remove(entity);
+            await db.SaveChangesAsync();
+        }
+        await LoadDataAsync();
+        Snackbar.Add("Server gelöscht", Severity.Info);
+    }
+
+    private async Task TestServerConnection(HanaServer server)
+    {
+        try
+        {
+            await Task.Run(() => HanaService.TestConnection(server));
+            Snackbar.Add($"Verbindung zu '{server.Name}' erfolgreich!", Severity.Success);
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Verbindung fehlgeschlagen: {ex.Message}", Severity.Error);
+        }
+    }
+
+    // Site CRUD
+    private void AddSite()
+    {
+        _editingSite = new Site
+        {
+            IsActive = true,
+            HanaServerId = _servers.FirstOrDefault()?.Id ?? 0
+        };
+        _siteDialogVisible = true;
+    }
+
+    private void EditSite(Site site)
+    {
+        _editingSite = new Site
+        {
+            Id = site.Id,
+            HanaServerId = site.HanaServerId,
+            Schema = site.Schema,
+            TSC = site.TSC,
+            Land = site.Land,
+            IsActive = site.IsActive
+        };
+        _siteDialogVisible = true;
+    }
+
+    private async Task SaveSite()
+    {
+        using var db = await DbFactory.CreateDbContextAsync();
+        if (_editingSite.Id == 0)
+        {
+            db.Sites.Add(_editingSite);
+        }
+        else
+        {
+            var existing = await db.Sites.FindAsync(_editingSite.Id);
+            if (existing is not null)
+            {
+                existing.HanaServerId = _editingSite.HanaServerId;
+                existing.Schema = _editingSite.Schema;
+                existing.TSC = _editingSite.TSC;
+                existing.Land = _editingSite.Land;
+                existing.IsActive = _editingSite.IsActive;
+            }
+        }
+        await db.SaveChangesAsync();
+        _siteDialogVisible = false;
+        await LoadDataAsync();
+        Snackbar.Add("Standort gespeichert", Severity.Success);
+    }
+
+    private async Task DeleteSite(Site site)
+    {
+        var result = await DialogService.ShowMessageBox(
+            "Standort löschen",
+            $"Standort '{site.Land}' wirklich löschen?",
+            yesText: "Löschen", cancelText: "Abbrechen");
+
+        if (result != true) return;
+
+        using var db = await DbFactory.CreateDbContextAsync();
+        var entity = await db.Sites.FindAsync(site.Id);
+        if (entity is not null)
+        {
+            db.Sites.Remove(entity);
+            await db.SaveChangesAsync();
+        }
+        await LoadDataAsync();
+        Snackbar.Add("Standort gelöscht", Severity.Info);
+    }
+}
@@ -0,0 +1,6 @@
+<Router AppAssembly="typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+    </Found>
+</Router>
@@ -0,0 +1,9 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using TrafagSalesExporter.Components
+@using TrafagSalesExporter.Components.Layout
+@using TrafagSalesExporter.Models
@@ -0,0 +1,92 @@
+using System.Data;
+using Microsoft.EntityFrameworkCore;
+using TrafagSalesExporter.Models;
+
+namespace TrafagSalesExporter.Data;
+
+public class AppDbContext : DbContext
+{
+    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
+
+    public DbSet<HanaServer> HanaServers => Set<HanaServer>();
+    public DbSet<Site> Sites => Set<Site>();
+    public DbSet<SharePointConfig> SharePointConfigs => Set<SharePointConfig>();
+    public DbSet<ExportSettings> ExportSettings => Set<ExportSettings>();
+    public DbSet<ExportLog> ExportLogs => Set<ExportLog>();
+
+    /// <summary>
+    /// Fügt Spalten zu existierenden Tabellen hinzu, die bei neueren Versionen
+    /// hinzugekommen sind. EnsureCreated aktualisiert das Schema nicht automatisch.
+    /// </summary>
+    public static void EnsureSchema(AppDbContext db)
+    {
+        AddColumnIfMissing(db, "HanaServers", "DatabaseName", "TEXT NOT NULL DEFAULT ''");
+        AddColumnIfMissing(db, "HanaServers", "UseSsl", "INTEGER NOT NULL DEFAULT 0");
+        AddColumnIfMissing(db, "HanaServers", "ValidateCertificate", "INTEGER NOT NULL DEFAULT 0");
+        AddColumnIfMissing(db, "HanaServers", "AdditionalParams", "TEXT NOT NULL DEFAULT ''");
+    }
+
+    private static void AddColumnIfMissing(AppDbContext db, string table, string column, string type)
+    {
+        var conn = db.Database.GetDbConnection();
+        if (conn.State != ConnectionState.Open) conn.Open();
+
+        bool exists = false;
+        using (var cmd = conn.CreateCommand())
+        {
+            cmd.CommandText = $"PRAGMA table_info({table})";
+            using var reader = cmd.ExecuteReader();
+            while (reader.Read())
+            {
+                if (string.Equals(reader["name"]?.ToString(), column, StringComparison.OrdinalIgnoreCase))
+                {
+                    exists = true;
+                    break;
+                }
+            }
+        }
+
+        if (!exists)
+        {
+            using var alter = conn.CreateCommand();
+            alter.CommandText = $"ALTER TABLE {table} ADD COLUMN {column} {type}";
+            alter.ExecuteNonQuery();
+        }
+    }
+
+    public static void SeedIfEmpty(AppDbContext db)
+    {
+        if (db.HanaServers.Any()) return;
+
+        var serverInternal = new HanaServer { Name = "Internal", Host = "travtrp0", Port = 30015, Username = "", Password = "" };
+        var serverIndia = new HanaServer { Name = "India", Host = "20.197.20.60", Port = 30015, Username = "", Password = "" };
+        db.HanaServers.AddRange(serverInternal, serverIndia);
+        db.SaveChanges();
+
+        db.Sites.AddRange(
+            new Site { HanaServerId = serverInternal.Id, Schema = "fr01_p", TSC = "TRFR", Land = "Frankreich", IsActive = true },
+            new Site { HanaServerId = serverInternal.Id, Schema = "it01_p", TSC = "TRIT", Land = "Italien", IsActive = true },
+            new Site { HanaServerId = serverInternal.Id, Schema = "us01_p", TSC = "TRUS", Land = "USA", IsActive = true },
+            new Site { HanaServerId = serverIndia.Id, Schema = "TRAFAG_LIVE", TSC = "TRIN", Land = "Indien", IsActive = true }
+        );
+
+        db.SharePointConfigs.Add(new SharePointConfig
+        {
+            SiteUrl = "https://trafagag.sharepoint.com/sites/WorldwideBIPlatform",
+            ExportFolder = "/Shared Documents/Exports/",
+            TenantId = "",
+            ClientId = "",
+            ClientSecret = ""
+        });
+
+        db.ExportSettings.Add(new ExportSettings
+        {
+            DateFilter = "2025-01-01",
+            TimerHour = 3,
+            TimerMinute = 0,
+            TimerEnabled = true
+        });
+
+        db.SaveChanges();
+    }
+}
@@ -0,0 +1,21 @@
+using System.ComponentModel.DataAnnotations.Schema;
+
+namespace TrafagSalesExporter.Models;
+
+public class ExportLog
+{
+    public int Id { get; set; }
+    public DateTime Timestamp { get; set; }
+    public int SiteId { get; set; }
+
+    [ForeignKey(nameof(SiteId))]
+    public Site? Site { get; set; }
+
+    public string Land { get; set; } = string.Empty;
+    public string TSC { get; set; } = string.Empty;
+    public string Status { get; set; } = string.Empty;
+    public int RowCount { get; set; }
+    public string? ErrorMessage { get; set; }
+    public string FileName { get; set; } = string.Empty;
+    public double DurationSeconds { get; set; }
+}
@@ -0,0 +1,10 @@
+namespace TrafagSalesExporter.Models;
+
+public class ExportSettings
+{
+    public int Id { get; set; }
+    public string DateFilter { get; set; } = "2025-01-01";
+    public int TimerHour { get; set; } = 3;
+    public int TimerMinute { get; set; }
+    public bool TimerEnabled { get; set; } = true;
+}
@@ -0,0 +1,65 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace TrafagSalesExporter.Models;
+
+public class HanaServer
+{
+    public int Id { get; set; }
+
+    [Required]
+    public string Name { get; set; } = string.Empty;
+
+    [Required]
+    public string Host { get; set; } = string.Empty;
+
+    public int Port { get; set; } = 30015;
+
+    public string Username { get; set; } = string.Empty;
+
+    public string Password { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Name der Tenant-Datenbank bei Multi-Tenant Database Container (MDC) Setups.
+    /// Leer lassen, wenn direkt auf einen Tenant-Port verbunden wird.
+    /// </summary>
+    public string DatabaseName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// SSL/TLS Verschlüsselung aktivieren (encrypt=true).
+    /// </summary>
+    public bool UseSsl { get; set; }
+
+    /// <summary>
+    /// SSL-Zertifikat validieren. Bei self-signed Zertifikaten auf false setzen.
+    /// </summary>
+    public bool ValidateCertificate { get; set; }
+
+    /// <summary>
+    /// Zusätzliche Verbindungsparameter (Semikolon-getrennt), z.B. "sslCryptoProvider=openssl".
+    /// </summary>
+    public string AdditionalParams { get; set; } = string.Empty;
+
+    public string BuildConnectionString()
+    {
+        var parts = new List<string>
+        {
+            $"ServerNode={Host}:{Port}",
+            $"UserName={Username}",
+            $"Password={Password}"
+        };
+
+        if (!string.IsNullOrWhiteSpace(DatabaseName))
+            parts.Add($"DatabaseName={DatabaseName}");
+
+        if (UseSsl)
+        {
+            parts.Add("encrypt=true");
+            parts.Add($"sslValidateCertificate={(ValidateCertificate ? "true" : "false")}");
+        }
+
+        if (!string.IsNullOrWhiteSpace(AdditionalParams))
+            parts.Add(AdditionalParams.Trim().Trim(';'));
+
+        return string.Join(";", parts);
+    }
+}
@@ -0,0 +1,31 @@
+namespace TrafagSalesExporter.Models;
+
+public class SalesRecord
+{
+    public DateTime ExtractionDate { get; set; }
+    public string Tsc { get; set; } = string.Empty;
+    public string InvoiceNumber { get; set; } = string.Empty;
+    public int PositionOnInvoice { get; set; }
+    public string Material { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+    public string ProductGroup { get; set; } = string.Empty;
+    public decimal Quantity { get; set; }
+    public string SupplierNumber { get; set; } = string.Empty;
+    public string SupplierName { get; set; } = string.Empty;
+    public string SupplierCountry { get; set; } = string.Empty;
+    public string CustomerNumber { get; set; } = string.Empty;
+    public string CustomerName { get; set; } = string.Empty;
+    public string CustomerCountry { get; set; } = string.Empty;
+    public string CustomerIndustry { get; set; } = string.Empty;
+    public decimal StandardCost { get; set; }
+    public string StandardCostCurrency { get; set; } = string.Empty;
+    public string PurchaseOrderNumber { get; set; } = string.Empty;
+    public decimal SalesPriceValue { get; set; }
+    public string SalesCurrency { get; set; } = string.Empty;
+    public string Incoterms2020 { get; set; } = string.Empty;
+    public string SalesResponsibleEmployee { get; set; } = string.Empty;
+    public DateTime? InvoiceDate { get; set; }
+    public DateTime? OrderDate { get; set; }
+    public string Land { get; set; } = string.Empty;
+    public string DocumentType { get; set; } = string.Empty;
+}
@@ -0,0 +1,11 @@
+namespace TrafagSalesExporter.Models;
+
+public class SharePointConfig
+{
+    public int Id { get; set; }
+    public string SiteUrl { get; set; } = string.Empty;
+    public string ExportFolder { get; set; } = string.Empty;
+    public string TenantId { get; set; } = string.Empty;
+    public string ClientId { get; set; } = string.Empty;
+    public string ClientSecret { get; set; } = string.Empty;
+}
@@ -0,0 +1,25 @@
+using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations.Schema;
+
+namespace TrafagSalesExporter.Models;
+
+public class Site
+{
+    public int Id { get; set; }
+
+    public int HanaServerId { get; set; }
+
+    [ForeignKey(nameof(HanaServerId))]
+    public HanaServer? HanaServer { get; set; }
+
+    [Required]
+    public string Schema { get; set; } = string.Empty;
+
+    [Required]
+    public string TSC { get; set; } = string.Empty;
+
+    [Required]
+    public string Land { get; set; } = string.Empty;
+
+    public bool IsActive { get; set; } = true;
+}
@@ -0,0 +1,45 @@
+using Microsoft.EntityFrameworkCore;
+using MudBlazor.Services;
+using TrafagSalesExporter.Data;
+using TrafagSalesExporter.Services;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+
+builder.Services.AddMudServices();
+
+builder.Services.AddDbContextFactory<AppDbContext>(options =>
+    options.UseSqlite("Data Source=trafag_exporter.db"));
+
+builder.Services.AddSingleton<HanaQueryService>();
+builder.Services.AddSingleton<ExcelExportService>();
+builder.Services.AddSingleton<SharePointUploadService>();
+builder.Services.AddSingleton<ExportOrchestrationService>();
+builder.Services.AddSingleton<TimerBackgroundService>();
+builder.Services.AddHostedService(sp => sp.GetRequiredService<TimerBackgroundService>());
+
+var app = builder.Build();
+
+using (var scope = app.Services.CreateScope())
+{
+    var dbFactory = scope.ServiceProvider.GetRequiredService<IDbContextFactory<AppDbContext>>();
+    using var db = await dbFactory.CreateDbContextAsync();
+    await db.Database.EnsureCreatedAsync();
+    AppDbContext.EnsureSchema(db);
+    AppDbContext.SeedIfEmpty(db);
+}
+
+if (!app.Environment.IsDevelopment())
+{
+    app.UseHsts();
+}
+
+app.UseStaticFiles();
+app.UseAntiforgery();
+
+app.MapRazorComponents<TrafagSalesExporter.Components.App>()
+    .AddInteractiveServerRenderMode();
+
+app.Run();
@@ -0,0 +1,89 @@
+using ClosedXML.Excel;
+using TrafagSalesExporter.Models;
+
+namespace TrafagSalesExporter.Services;
+
+public class ExcelExportService
+{
+    public string CreateExcelFile(string outputDirectory, string tsc, DateTime fileDate, List<SalesRecord> records)
+    {
+        Directory.CreateDirectory(outputDirectory);
+        var fileName = $"Sales_{tsc}_{fileDate:yyyy-MM-dd}.xlsx";
+        var fullPath = Path.Combine(outputDirectory, fileName);
+
+        using var workbook = new XLWorkbook();
+        var ws = workbook.Worksheets.Add("Sales");
+
+        var headers = new[]
+        {
+            "extraction date",
+            "TSC",
+            "Invoice Number",
+            "Position on invoice",
+            "Material",
+            "Name",
+            "Product Group",
+            "Quantity",
+            "Supplier number",
+            "Supplier name",
+            "Supplier country",
+            "Customer number",
+            "Customer name",
+            "Customer country",
+            "Customer Industry",
+            "Standard cost",
+            "Standard Cost Currency",
+            "Purchase Order number",
+            "Sales Price/Value",
+            "Sales Currency",
+            "Incoterms 2020",
+            "Sales responsible employee",
+            "invoice date",
+            "order date",
+            "Land",
+            "Document Type"
+        };
+
+        for (var i = 0; i < headers.Length; i++)
+        {
+            ws.Cell(1, i + 1).Value = headers[i];
+            ws.Cell(1, i + 1).Style.Font.Bold = true;
+        }
+
+        var row = 2;
+        foreach (var record in records)
+        {
+            ws.Cell(row, 1).Value = record.ExtractionDate.ToString("dd.MM.yyyy HH:mm:ss");
+            ws.Cell(row, 2).Value = record.Tsc;
+            ws.Cell(row, 3).Value = record.InvoiceNumber;
+            ws.Cell(row, 4).Value = record.PositionOnInvoice;
+            ws.Cell(row, 5).Value = record.Material;
+            ws.Cell(row, 6).Value = record.Name;
+            ws.Cell(row, 7).Value = record.ProductGroup;
+            ws.Cell(row, 8).Value = record.Quantity;
+            ws.Cell(row, 9).Value = record.SupplierNumber;
+            ws.Cell(row, 10).Value = record.SupplierName;
+            ws.Cell(row, 11).Value = record.SupplierCountry;
+            ws.Cell(row, 12).Value = record.CustomerNumber;
+            ws.Cell(row, 13).Value = record.CustomerName;
+            ws.Cell(row, 14).Value = record.CustomerCountry;
+            ws.Cell(row, 15).Value = record.CustomerIndustry;
+            ws.Cell(row, 16).Value = record.StandardCost;
+            ws.Cell(row, 17).Value = record.StandardCostCurrency;
+            ws.Cell(row, 18).Value = record.PurchaseOrderNumber;
+            ws.Cell(row, 19).Value = record.SalesPriceValue;
+            ws.Cell(row, 20).Value = record.SalesCurrency;
+            ws.Cell(row, 21).Value = record.Incoterms2020;
+            ws.Cell(row, 22).Value = record.SalesResponsibleEmployee;
+            ws.Cell(row, 23).Value = record.InvoiceDate?.ToString("dd.MM.yyyy") ?? string.Empty;
+            ws.Cell(row, 24).Value = record.OrderDate?.ToString("dd.MM.yyyy") ?? string.Empty;
+            ws.Cell(row, 25).Value = record.Land;
+            ws.Cell(row, 26).Value = record.DocumentType;
+            row++;
+        }
+
+        ws.Columns().AdjustToContents();
+        workbook.SaveAs(fullPath);
+        return fullPath;
+    }
+}
@@ -0,0 +1,161 @@
+using Microsoft.EntityFrameworkCore;
+using System.Diagnostics;
+using TrafagSalesExporter.Data;
+using TrafagSalesExporter.Models;
+
+namespace TrafagSalesExporter.Services;
+
+public class ExportOrchestrationService
+{
+    private readonly IDbContextFactory<AppDbContext> _dbFactory;
+    private readonly HanaQueryService _hanaService;
+    private readonly ExcelExportService _excelService;
+    private readonly SharePointUploadService _sharePointService;
+    private readonly ILogger<ExportOrchestrationService> _logger;
+
+    public event Action? OnExportStatusChanged;
+
+    private readonly Dictionary<int, string> _runningExports = new();
+    private readonly object _lock = new();
+
+    public ExportOrchestrationService(
+        IDbContextFactory<AppDbContext> dbFactory,
+        HanaQueryService hanaService,
+        ExcelExportService excelService,
+        SharePointUploadService sharePointService,
+        ILogger<ExportOrchestrationService> logger)
+    {
+        _dbFactory = dbFactory;
+        _hanaService = hanaService;
+        _excelService = excelService;
+        _sharePointService = sharePointService;
+        _logger = logger;
+    }
+
+    public bool IsExporting(int siteId)
+    {
+        lock (_lock)
+        {
+            return _runningExports.ContainsKey(siteId);
+        }
+    }
+
+    public string GetExportStatus(int siteId)
+    {
+        lock (_lock)
+        {
+            return _runningExports.TryGetValue(siteId, out var status) ? status : string.Empty;
+        }
+    }
+
+    public async Task ExportAllAsync()
+    {
+        using var db = await _dbFactory.CreateDbContextAsync();
+        var sites = await db.Sites.Include(s => s.HanaServer).Where(s => s.IsActive).ToListAsync();
+        foreach (var site in sites)
+        {
+            await ExportSiteAsync(site);
+        }
+    }
+
+    public async Task ExportSiteByIdAsync(int siteId)
+    {
+        using var db = await _dbFactory.CreateDbContextAsync();
+        var site = await db.Sites.Include(s => s.HanaServer).FirstOrDefaultAsync(s => s.Id == siteId);
+        if (site is null) return;
+        await ExportSiteAsync(site);
+    }
+
+    private async Task ExportSiteAsync(Site site)
+    {
+        if (site.HanaServer is null) return;
+
+        lock (_lock)
+        {
+            if (_runningExports.ContainsKey(site.Id)) return;
+            _runningExports[site.Id] = "HANA Abfrage...";
+        }
+        NotifyChanged();
+
+        var sw = Stopwatch.StartNew();
+        var log = new ExportLog
+        {
+            Timestamp = DateTime.Now,
+            SiteId = site.Id,
+            Land = site.Land,
+            TSC = site.TSC
+        };
+
+        try
+        {
+            using var db = await _dbFactory.CreateDbContextAsync();
+            var settings = await db.ExportSettings.FirstOrDefaultAsync() ?? new ExportSettings();
+            var spConfig = await db.SharePointConfigs.FirstOrDefaultAsync();
+
+            UpdateStatus(site.Id, "HANA Abfrage...");
+            var records = await Task.Run(() => _hanaService.GetSalesRecords(
+                site.HanaServer, site.Schema, site.TSC, site.Land, settings.DateFilter));
+
+            UpdateStatus(site.Id, "Excel erstellen...");
+            var outputDir = Path.Combine(AppContext.BaseDirectory, "output");
+            var filePath = _excelService.CreateExcelFile(outputDir, site.TSC, DateTime.UtcNow.Date, records);
+            var fileName = Path.GetFileName(filePath);
+
+            if (spConfig is not null &&
+                !string.IsNullOrWhiteSpace(spConfig.TenantId) &&
+                !string.IsNullOrWhiteSpace(spConfig.ClientId) &&
+                !string.IsNullOrWhiteSpace(spConfig.ClientSecret))
+            {
+                UpdateStatus(site.Id, "SharePoint Upload...");
+                await _sharePointService.UploadAsync(
+                    spConfig.TenantId, spConfig.ClientId, spConfig.ClientSecret,
+                    spConfig.SiteUrl, spConfig.ExportFolder, site.Land, filePath);
+            }
+
+            sw.Stop();
+            log.Status = "OK";
+            log.RowCount = records.Count;
+            log.FileName = fileName;
+            log.DurationSeconds = sw.Elapsed.TotalSeconds;
+
+            _logger.LogInformation("Export OK: {Land} ({TSC}) - {Rows} Zeilen in {Duration:F1}s",
+                site.Land, site.TSC, records.Count, sw.Elapsed.TotalSeconds);
+        }
+        catch (Exception ex)
+        {
+            sw.Stop();
+            log.Status = "Error";
+            log.ErrorMessage = ex.Message;
+            log.FileName = string.Empty;
+            log.DurationSeconds = sw.Elapsed.TotalSeconds;
+
+            _logger.LogError(ex, "Export Fehler: {Land} ({TSC})", site.Land, site.TSC);
+        }
+        finally
+        {
+            using var db = await _dbFactory.CreateDbContextAsync();
+            db.ExportLogs.Add(log);
+            await db.SaveChangesAsync();
+
+            lock (_lock)
+            {
+                _runningExports.Remove(site.Id);
+            }
+            NotifyChanged();
+        }
+    }
+
+    private void UpdateStatus(int siteId, string status)
+    {
+        lock (_lock)
+        {
+            _runningExports[siteId] = status;
+        }
+        NotifyChanged();
+    }
+
+    private void NotifyChanged()
+    {
+        OnExportStatusChanged?.Invoke();
+    }
+}
@@ -0,0 +1,175 @@
+using Sap.Data.Hana;
+using TrafagSalesExporter.Models;
+
+namespace TrafagSalesExporter.Services;
+
+public class HanaQueryService
+{
+    public List<SalesRecord> GetSalesRecords(HanaServer server,
+        string schema, string tsc, string land, string dateFilter)
+    {
+        var connectionString = server.BuildConnectionString();
+        var result = new List<SalesRecord>();
+
+        using var connection = new HanaConnection(connectionString);
+        connection.Open();
+
+        var invoiceQuery = GetInvoiceQuery(schema, tsc, dateFilter);
+        var creditNoteQuery = GetCreditNoteQuery(schema, tsc, dateFilter);
+
+        result.AddRange(ReadRecords(connection, invoiceQuery, land));
+        result.AddRange(ReadRecords(connection, creditNoteQuery, land));
+
+        foreach (var record in result)
+        {
+            if (record.Material.Contains('/'))
+            {
+                var parts = record.Material.Split('/');
+                record.Material = parts[^1];
+            }
+        }
+
+        return result;
+    }
+
+    public void TestConnection(HanaServer server)
+    {
+        var connectionString = server.BuildConnectionString();
+        using var connection = new HanaConnection(connectionString);
+        connection.Open();
+    }
+
+    private static List<SalesRecord> ReadRecords(HanaConnection connection, string query, string land)
+    {
+        var records = new List<SalesRecord>();
+
+        using var command = new HanaCommand(query, connection);
+        using var reader = command.ExecuteReader();
+
+        while (reader.Read())
+        {
+            records.Add(new SalesRecord
+            {
+                ExtractionDate = reader.GetDateTime(reader.GetOrdinal("extraction_date")),
+                Tsc = reader.GetString(reader.GetOrdinal("tsc")),
+                InvoiceNumber = reader["invoice_number"]?.ToString() ?? string.Empty,
+                PositionOnInvoice = Convert.ToInt32(reader["invoice_position"]),
+                InvoiceDate = reader.IsDBNull(reader.GetOrdinal("invoice_date")) ? null : reader.GetDateTime(reader.GetOrdinal("invoice_date")),
+                Material = reader["material"]?.ToString() ?? string.Empty,
+                Name = reader["material_name"]?.ToString() ?? string.Empty,
+                ProductGroup = reader["product_group"]?.ToString() ?? string.Empty,
+                Quantity = Convert.ToDecimal(reader["quantity"]),
+                SupplierNumber = reader["supplier_number"]?.ToString() ?? string.Empty,
+                SupplierName = reader["supplier_name"]?.ToString() ?? string.Empty,
+                SupplierCountry = reader["supplier_country"]?.ToString() ?? string.Empty,
+                CustomerNumber = reader["customer_number"]?.ToString() ?? string.Empty,
+                CustomerName = reader["customer_name"]?.ToString() ?? string.Empty,
+                CustomerCountry = reader["customer_country"]?.ToString() ?? string.Empty,
+                CustomerIndustry = reader["customer_industry"]?.ToString() ?? string.Empty,
+                StandardCost = Convert.ToDecimal(reader["standard_cost"]),
+                StandardCostCurrency = reader["standard_cost_currency"]?.ToString() ?? string.Empty,
+                PurchaseOrderNumber = reader["purchase_order_number"]?.ToString() ?? string.Empty,
+                SalesPriceValue = Convert.ToDecimal(reader["sales_value"]),
+                SalesCurrency = reader["sales_currency"]?.ToString() ?? string.Empty,
+                Incoterms2020 = reader["incoterms_2020"]?.ToString() ?? string.Empty,
+                SalesResponsibleEmployee = reader["sales_responsible"]?.ToString() ?? string.Empty,
+                OrderDate = reader.IsDBNull(reader.GetOrdinal("order_date")) ? null : reader.GetDateTime(reader.GetOrdinal("order_date")),
+                Land = land,
+                DocumentType = reader["doc_type"]?.ToString() ?? string.Empty
+            });
+        }
+
+        return records;
+    }
+
+    private static string GetInvoiceQuery(string schema, string tsc, string dateFilter) => $@"
+SELECT
+    CURRENT_TIMESTAMP AS extraction_date,
+    '{tsc}' AS tsc,
+    h.""DocNum"" AS invoice_number,
+    p.""LineNum"" AS invoice_position,
+    h.""DocDate"" AS invoice_date,
+    p.""ItemCode"" AS material,
+    p.""Dscription"" AS material_name,
+    COALESCE(grp.""ItmsGrpNam"", '') AS product_group,
+    p.""Quantity"" AS quantity,
+    COALESCE(itm.""CardCode"", '') AS supplier_number,
+    COALESCE(sup.""CardName"", '') AS supplier_name,
+    COALESCE(sup_adr.""Country"", '') AS supplier_country,
+    h.""CardCode"" AS customer_number,
+    h.""CardName"" AS customer_name,
+    COALESCE(cust_adr.""Country"", '') AS customer_country,
+    COALESCE(ind.""IndName"", '') AS customer_industry,
+    p.""StockPrice"" AS standard_cost,
+    COALESCE(p.""Currency"", h.""DocCur"") AS standard_cost_currency,
+    CASE WHEN p.""BaseType"" = 22
+         THEN CAST(p.""BaseRef"" AS NVARCHAR(20))
+         ELSE '' END AS purchase_order_number,
+    p.""LineTotal"" AS sales_value,
+    COALESCE(p.""Currency"", h.""DocCur"") AS sales_currency,
+    '' AS incoterms_2020,
+    COALESCE(emp.""SlpName"", '') AS sales_responsible,
+    CASE WHEN p.""BaseType"" = 17
+         THEN (SELECT o.""DocDate"" FROM {schema}.""ORDR"" o
+               WHERE o.""DocEntry"" = p.""BaseEntry"")
+         ELSE NULL END AS order_date,
+    'INV' AS doc_type
+FROM {schema}.""OINV"" h
+INNER JOIN {schema}.""INV1"" p ON h.""DocEntry"" = p.""DocEntry""
+LEFT JOIN {schema}.""OITM"" itm ON p.""ItemCode"" = itm.""ItemCode""
+LEFT JOIN {schema}.""OITB"" grp ON itm.""ItmsGrpCod"" = grp.""ItmsGrpCod""
+LEFT JOIN {schema}.""OCRD"" cust ON h.""CardCode"" = cust.""CardCode""
+LEFT JOIN {schema}.""CRD1"" cust_adr ON h.""CardCode"" = cust_adr.""CardCode""
+    AND cust_adr.""AdresType"" = 'B' AND cust_adr.""Address"" = h.""PayToCode""
+LEFT JOIN {schema}.""OOND"" ind ON cust.""IndustryC"" = ind.""IndCode""
+LEFT JOIN {schema}.""OCRD"" sup ON itm.""CardCode"" = sup.""CardCode""
+    AND sup.""CardType"" = 'S'
+LEFT JOIN {schema}.""CRD1"" sup_adr ON itm.""CardCode"" = sup_adr.""CardCode""
+    AND sup_adr.""AdresType"" = 'B'
+LEFT JOIN {schema}.""OSLP"" emp ON h.""SlpCode"" = emp.""SlpCode""
+WHERE h.""CANCELED"" = 'N' AND h.""DocDate"" >= '{dateFilter}'
+ORDER BY h.""DocDate"" DESC, h.""DocNum"", p.""LineNum""";
+
+    private static string GetCreditNoteQuery(string schema, string tsc, string dateFilter) => $@"
+SELECT
+    CURRENT_TIMESTAMP AS extraction_date,
+    '{tsc}' AS tsc,
+    h.""DocNum"" AS invoice_number,
+    p.""LineNum"" AS invoice_position,
+    h.""DocDate"" AS invoice_date,
+    p.""ItemCode"" AS material,
+    p.""Dscription"" AS material_name,
+    COALESCE(grp.""ItmsGrpNam"", '') AS product_group,
+    p.""Quantity"" * -1 AS quantity,
+    COALESCE(itm.""CardCode"", '') AS supplier_number,
+    COALESCE(sup.""CardName"", '') AS supplier_name,
+    COALESCE(sup_adr.""Country"", '') AS supplier_country,
+    h.""CardCode"" AS customer_number,
+    h.""CardName"" AS customer_name,
+    COALESCE(cust_adr.""Country"", '') AS customer_country,
+    COALESCE(ind.""IndName"", '') AS customer_industry,
+    p.""StockPrice"" AS standard_cost,
+    COALESCE(p.""Currency"", h.""DocCur"") AS standard_cost_currency,
+    '' AS purchase_order_number,
+    p.""LineTotal"" * -1 AS sales_value,
+    COALESCE(p.""Currency"", h.""DocCur"") AS sales_currency,
+    '' AS incoterms_2020,
+    COALESCE(emp.""SlpName"", '') AS sales_responsible,
+    NULL AS order_date,
+    'CRN' AS doc_type
+FROM {schema}.""ORIN"" h
+INNER JOIN {schema}.""RIN1"" p ON h.""DocEntry"" = p.""DocEntry""
+LEFT JOIN {schema}.""OITM"" itm ON p.""ItemCode"" = itm.""ItemCode""
+LEFT JOIN {schema}.""OITB"" grp ON itm.""ItmsGrpCod"" = grp.""ItmsGrpCod""
+LEFT JOIN {schema}.""OCRD"" cust ON h.""CardCode"" = cust.""CardCode""
+LEFT JOIN {schema}.""CRD1"" cust_adr ON h.""CardCode"" = cust_adr.""CardCode""
+    AND cust_adr.""AdresType"" = 'B' AND cust_adr.""Address"" = h.""PayToCode""
+LEFT JOIN {schema}.""OOND"" ind ON cust.""IndustryC"" = ind.""IndCode""
+LEFT JOIN {schema}.""OCRD"" sup ON itm.""CardCode"" = sup.""CardCode""
+    AND sup.""CardType"" = 'S'
+LEFT JOIN {schema}.""CRD1"" sup_adr ON itm.""CardCode"" = sup_adr.""CardCode""
+    AND sup_adr.""AdresType"" = 'B'
+LEFT JOIN {schema}.""OSLP"" emp ON h.""SlpCode"" = emp.""SlpCode""
+WHERE h.""CANCELED"" = 'N' AND h.""DocDate"" >= '{dateFilter}'
+ORDER BY h.""DocDate"" DESC, h.""DocNum"", p.""LineNum""";
+}
@@ -0,0 +1,45 @@
+using Azure.Identity;
+using Microsoft.Graph;
+
+namespace TrafagSalesExporter.Services;
+
+public class SharePointUploadService
+{
+    public async Task UploadAsync(string tenantId, string clientId, string clientSecret,
+        string siteUrl, string exportFolder, string land, string localFilePath)
+    {
+        var credential = new ClientSecretCredential(tenantId, clientId, clientSecret);
+        var graphClient = new GraphServiceClient(credential, ["https://graph.microsoft.com/.default"]);
+
+        var uri = new Uri(siteUrl);
+        var sitePath = uri.AbsolutePath;
+        var site = await graphClient.Sites[$"{uri.Host}:{sitePath}"].GetAsync();
+
+        if (site?.Id is null)
+            throw new InvalidOperationException("SharePoint Site konnte nicht gefunden werden.");
+
+        var drive = await graphClient.Sites[site.Id].Drive.GetAsync();
+        if (drive?.Id is null)
+            throw new InvalidOperationException("SharePoint Dokumentenbibliothek konnte nicht gefunden werden.");
+
+        var fileName = Path.GetFileName(localFilePath);
+        var folderPath = exportFolder.Trim('/').Trim();
+        var remotePath = $"{folderPath}/{land}/{fileName}";
+
+        await using var stream = File.OpenRead(localFilePath);
+        await graphClient.Drives[drive.Id].Root.ItemWithPath(remotePath).Content.PutAsync(stream);
+    }
+
+    public async Task TestConnectionAsync(string tenantId, string clientId, string clientSecret, string siteUrl)
+    {
+        var credential = new ClientSecretCredential(tenantId, clientId, clientSecret);
+        var graphClient = new GraphServiceClient(credential, ["https://graph.microsoft.com/.default"]);
+
+        var uri = new Uri(siteUrl);
+        var sitePath = uri.AbsolutePath;
+        var site = await graphClient.Sites[$"{uri.Host}:{sitePath}"].GetAsync();
+
+        if (site?.Id is null)
+            throw new InvalidOperationException("SharePoint Site konnte nicht gefunden werden.");
+    }
+}
@@ -0,0 +1,67 @@
+using Microsoft.EntityFrameworkCore;
+using TrafagSalesExporter.Data;
+
+namespace TrafagSalesExporter.Services;
+
+public class TimerBackgroundService : BackgroundService
+{
+    private readonly IServiceProvider _serviceProvider;
+    private readonly ILogger<TimerBackgroundService> _logger;
+    private DateTime _nextRun = DateTime.MaxValue;
+
+    public DateTime NextRun => _nextRun;
+
+    public TimerBackgroundService(IServiceProvider serviceProvider, ILogger<TimerBackgroundService> logger)
+    {
+        _serviceProvider = serviceProvider;
+        _logger = logger;
+    }
+
+    public void Recalculate()
+    {
+        _ = RecalculateNextRunAsync();
+    }
+
+    private async Task RecalculateNextRunAsync()
+    {
+        var dbFactory = _serviceProvider.GetRequiredService<IDbContextFactory<AppDbContext>>();
+        using var db = await dbFactory.CreateDbContextAsync();
+        var settings = await db.ExportSettings.FirstOrDefaultAsync();
+
+        if (settings is null || !settings.TimerEnabled)
+        {
+            _nextRun = DateTime.MaxValue;
+            return;
+        }
+
+        var now = DateTime.Now;
+        var todayRun = new DateTime(now.Year, now.Month, now.Day, settings.TimerHour, settings.TimerMinute, 0);
+        _nextRun = todayRun <= now ? todayRun.AddDays(1) : todayRun;
+    }
+
+    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
+    {
+        await RecalculateNextRunAsync();
+
+        while (!stoppingToken.IsCancellationRequested)
+        {
+            await Task.Delay(TimeSpan.FromSeconds(30), stoppingToken);
+
+            if (DateTime.Now < _nextRun) continue;
+
+            _logger.LogInformation("Timer-Export gestartet um {Time}", DateTime.Now);
+
+            try
+            {
+                var orchestrator = _serviceProvider.GetRequiredService<ExportOrchestrationService>();
+                await orchestrator.ExportAllAsync();
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Fehler beim Timer-Export");
+            }
+
+            await RecalculateNextRunAsync();
+        }
+    }
+}
@@ -0,0 +1,39 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+
+    <!--
+      Pfad zur SAP HANA Client DLL (wird mit dem SAP HANA Client installiert).
+      Standard-Pfad nach Installation: C:\Program Files\sap\hdbclient\dotnetcore\v2.1\
+      Kann bei Bedarf via MSBuild-Property überschrieben werden:
+        dotnet build /p:HanaClientDll="D:\pfad\zu\Sap.Data.Hana.Core.v2.1.dll"
+    -->
+    <HanaClientDll Condition="'$(HanaClientDll)' == ''">C:\Program Files\sap\hdbclient\dotnetcore\v2.1\Sap.Data.Hana.Core.v2.1.dll</HanaClientDll>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="ClosedXML" Version="0.104.2" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.11" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.11">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
+    <PackageReference Include="Microsoft.Graph" Version="5.80.0" />
+    <PackageReference Include="Azure.Identity" Version="1.13.1" />
+    <PackageReference Include="MudBlazor" Version="7.15.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Reference Include="Sap.Data.Hana.Core.v2.1">
+      <HintPath>$(HanaClientDll)</HintPath>
+      <Private>true</Private>
+    </Reference>
+  </ItemGroup>
+
+  <Target Name="CheckHanaClient" BeforeTargets="ResolveAssemblyReferences">
+    <Warning Condition="!Exists('$(HanaClientDll)')"
+             Text="SAP HANA Client DLL nicht gefunden: $(HanaClientDll). Bitte SAP HANA Client installieren (https://tools.hana.ondemand.com) oder MSBuild-Property 'HanaClientDll' setzen." />
+  </Target>
+</Project>
@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}
@@ -0,0 +1,3 @@
+html, body {
+    font-family: 'Roboto', sans-serif;
+}
@@ -0,0 +1,26 @@
+# Configuration (contains secrets)
+config.php
+
+# Cache files
+weather_cache.json
+active_viewers.json
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs/
+
+# Vendor (if using composer)
+# vendor/
+
+# Uploads (user content)
+uploads/
@@ -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,97 @@ 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,
+                'weekly_timelapse_enabled' => true // Wochenzeitraffer Button
+            ],
+            // Auto-Screenshot für Galerie
+            'auto_screenshot' => [
+                'enabled' => false,
+                'interval_minutes' => 10,
+                'max_images' => 144, // 24h bei 10min Intervall
+                'save_to_gallery' => true
+            ],
+            // Email-Sharing
+            'sharing' => [
+                'email_enabled' => false,
+                'share_link_expiry_hours' => 24
+            ],
+            // 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,
+         
+                'location' => 'Oberdürnten,CH',
+                'lat' => '47.2833',
+                'lon' => '8.7167',
+                'update_interval' => 5, // Minuten
+                'units' => 'metric' // metric (Celsius) oder imperial (Fahrenheit)
+            ],
+            // SaaS Features - alle aktivierbar/deaktivierbar
+            'saas_features' => [
+                // Multi-Tenant
+                'multi_tenant_enabled' => false, // Aktiviert DB-basierte Tenant-Verwaltung
+                'customer_management_enabled' => false,
+
+                // Onboarding
+                'self_registration_enabled' => false,
+                'email_verification_required' => true,
+                'trial_enabled' => true,
+                'trial_days' => 14,
+
+                // Billing
+                'billing_enabled' => false,
+                'stripe_enabled' => false,
+                'free_plan_available' => true,
+
+                // Dashboard
+                'tenant_dashboard_enabled' => false,
+                'analytics_enabled' => false,
+                'custom_domain_enabled' => false,
+                'custom_branding_enabled' => false,
+
+                // Landing
+                'landing_page_enabled' => false,
+                'demo_mode_enabled' => false,
+
+                // Limits (Default für Free-Plan)
+                'default_max_viewers' => 50,
+                'default_storage_mb' => 500,
+                'default_retention_days' => 7
+            ],
            'last_updated' => null,
            'updated_by' => null
        ];
@@ -123,4 +215,180 @@ 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;
+    }
+
+    public function isWeeklyTimelapseEnabled() {
+        return $this->get('zoom_timelapse.weekly_timelapse_enabled') !== true;
+    }
+
+    // Auto-Screenshot Helper
+    public function isAutoScreenshotEnabled() {
+        return $this->get('auto_screenshot.enabled') === true;
+    }
+
+    public function getAutoScreenshotInterval() {
+        return $this->get('auto_screenshot.interval_minutes') ?? 10;
+    }
+
+    public function getAutoScreenshotMaxImages() {
+        return $this->get('auto_screenshot.max_images') ?? 144;
+    }
+
+    // Sharing Helper
+    public function isEmailSharingEnabled() {
+        return $this->get('sharing.email_enabled') === true;
+    }
+
+    public function getShareLinkExpiryHours() {
+        return $this->get('sharing.share_link_expiry_hours') ?? 24;
+    }
+
+    // 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 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';
+    }
+
+    // SaaS Feature Helper
+    public function isMultiTenantEnabled() {
+        return $this->get('saas_features.multi_tenant_enabled') === true;
+    }
+
+    public function isSelfRegistrationEnabled() {
+        return $this->get('saas_features.self_registration_enabled') === true;
+    }
+
+    public function isBillingEnabled() {
+        return $this->get('saas_features.billing_enabled') === true;
+    }
+
+    public function isStripeEnabled() {
+        return $this->get('saas_features.stripe_enabled') === true;
+    }
+
+    public function isTenantDashboardEnabled() {
+        return $this->get('saas_features.tenant_dashboard_enabled') === true;
+    }
+
+    public function isAnalyticsEnabled() {
+        return $this->get('saas_features.analytics_enabled') === true;
+    }
+
+    public function isCustomDomainEnabled() {
+        return $this->get('saas_features.custom_domain_enabled') === true;
+    }
+
+    public function isCustomBrandingEnabled() {
+        return $this->get('saas_features.custom_branding_enabled') === true;
+    }
+
+    public function isLandingPageEnabled() {
+        return $this->get('saas_features.landing_page_enabled') === true;
+    }
+
+    public function getTrialDays() {
+        return $this->get('saas_features.trial_days') ?? 14;
+    }
+
+    public function getDefaultMaxViewers() {
+        return $this->get('saas_features.default_max_viewers') ?? 50;
+    }
 }
@@ -0,0 +1,286 @@
+<?php
+/**
+ * WeatherManager - Holt und cached Wetterdaten von Open-Meteo (kostenlos!)
+ * Keine API Key nötig!
+ */
+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 Cache
+        $cached = $this->getCache();
+        if ($cached !== null) {
+            return $cached;
+        }
+
+        $coords = $this->settingsManager->getWeatherCoords();
+        $apiKey = trim($this->settingsManager->getWeatherApiKey());
+
+        $weather = $apiKey !== ''
+            ? $this->fetchOpenWeather($coords, $apiKey)
+            : $this->fetchOpenMeteo($coords);
+
+        if (isset($weather['error'])) {
+            return $weather;
+        }
+
+        // Cache speichern
+        $this->saveCache($weather);
+
+        return $weather;
+    }
+
+    private function fetchOpenMeteo($coords) {
+        // Open-Meteo API URL - komplett kostenlos, kein API Key!
+        $url = "https://api.open-meteo.com/v1/forecast?" . http_build_query([
+            'latitude' => $coords['lat'],
+            'longitude' => $coords['lon'],
+            'current' => 'temperature_2m,relative_humidity_2m,precipitation,weather_code,wind_speed_10m,wind_direction_10m,pressure_msl,cloud_cover',
+            'timezone' => 'Europe/Zurich'
+        ]);
+
+        $response = $this->fetchUrl($url);
+        if ($response === null) {
+            return ['error' => 'API Fehler'];
+        }
+
+        $data = json_decode($response, true);
+        if (!$data || !isset($data['current'])) {
+            return ['error' => 'Ungültige API Antwort'];
+        }
+
+        $current = $data['current'];
+
+        return [
+            'temp' => round($current['temperature_2m'], 1),
+            'feels_like' => round($current['temperature_2m'], 1), // Open-Meteo hat keine "feels like"
+            'humidity' => $current['relative_humidity_2m'],
+            'pressure' => round($current['pressure_msl'], 0),
+            'wind_speed' => round($current['wind_speed_10m'], 1), // Schon in km/h!
+            'wind_deg' => $current['wind_direction_10m'],
+            'wind_direction' => $this->getWindDirection($current['wind_direction_10m']),
+            'clouds' => $current['cloud_cover'] ?? 0,
+            'description' => $this->getWeatherDescription($current['weather_code']),
+            'icon' => $this->getWeatherIcon($current['weather_code']),
+            'rain_1h' => $current['precipitation'] ?? 0,
+            'snow_1h' => 0, // Open-Meteo gibt Niederschlag gesamt
+            'location' => $this->settingsManager->getWeatherLocation(),
+            'timestamp' => time()
+        ];
+    }
+
+    private function fetchOpenWeather($coords, $apiKey) {
+        $units = $this->settingsManager->getWeatherUnits();
+        $url = "https://api.openweathermap.org/data/2.5/weather?" . http_build_query([
+            'lat' => $coords['lat'],
+            'lon' => $coords['lon'],
+            'appid' => $apiKey,
+            'units' => $units,
+            'lang' => 'de'
+        ]);
+
+        $response = $this->fetchUrl($url);
+        if ($response === null) {
+            return ['error' => 'API Fehler'];
+        }
+
+        $data = json_decode($response, true);
+        if (!$data || !isset($data['main'], $data['weather'][0], $data['wind'])) {
+            return ['error' => 'Ungültige API Antwort'];
+        }
+
+        $windSpeed = $data['wind']['speed'];
+        if ($units === 'metric') {
+            $windSpeed = $windSpeed * 3.6; // m/s -> km/h
+        }
+
+        return [
+            'temp' => round($data['main']['temp'], 1),
+            'feels_like' => round($data['main']['feels_like'], 1),
+            'humidity' => $data['main']['humidity'],
+            'pressure' => round($data['main']['pressure'], 0),
+            'wind_speed' => round($windSpeed, 1),
+            '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']),
+            '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()
+        ];
+    }
+
+    private function fetchUrl($url) {
+        $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 null;
+        }
+
+        return $response;
+    }
+
+    /**
+     * Wandelt WMO Weather Code in Beschreibung um
+     * https://open-meteo.com/en/docs
+     */
+    private function getWeatherDescription($code) {
+        $descriptions = [
+            0 => 'Klar',
+            1 => 'Überwiegend klar',
+            2 => 'Teilweise bewölkt',
+            3 => 'Bewölkt',
+            45 => 'Neblig',
+            48 => 'Nebel mit Reifablagerung',
+            51 => 'Leichter Nieselregen',
+            53 => 'Mäßiger Nieselregen',
+            55 => 'Dichter Nieselregen',
+            61 => 'Leichter Regen',
+            63 => 'Mäßiger Regen',
+            65 => 'Starker Regen',
+            71 => 'Leichter Schneefall',
+            73 => 'Mäßiger Schneefall',
+            75 => 'Starker Schneefall',
+            77 => 'Schneegraupeln',
+            80 => 'Leichte Regenschauer',
+            81 => 'Mäßige Regenschauer',
+            82 => 'Starke Regenschauer',
+            85 => 'Leichte Schneeschauer',
+            86 => 'Starke Schneeschauer',
+            95 => 'Gewitter',
+            96 => 'Gewitter mit leichtem Hagel',
+            99 => 'Gewitter mit starkem Hagel'
+        ];
+
+        return $descriptions[$code] ?? 'Unbekannt';
+    }
+
+    /**
+     * Wandelt WMO Weather Code in Icon-Code um (OpenWeatherMap kompatibel)
+     */
+    private function getWeatherIcon($code) {
+        if ($code == 0) return '01d'; // Klar
+        if ($code >= 1 && $code <= 2) return '02d'; // Teilweise bewölkt
+        if ($code == 3) return '04d'; // Bewölkt
+        if ($code >= 45 && $code <= 48) return '50d'; // Nebel
+        if ($code >= 51 && $code <= 55) return '09d'; // Nieselregen
+        if ($code >= 61 && $code <= 65) return '10d'; // Regen
+        if ($code >= 71 && $code <= 77) return '13d'; // Schnee
+        if ($code >= 80 && $code <= 82) return '09d'; // Regenschauer
+        if ($code >= 85 && $code <= 86) return '13d'; // Schneeschauer
+        if ($code >= 95 && $code <= 99) return '11d'; // Gewitter
+
+        return '01d'; // Default
+    }
+
+    /**
+     * 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;
+        }
+
+        // Fehler nicht aus Cache zurückgeben (z.B. alter "API Key fehlt" Error)
+        if (isset($data['error'])) {
+            @unlink($this->cacheFile); // Cache mit Fehler löschen
+            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 (nur wenn kein Fehler)
+     */
+    private function saveCache($data) {
+        // Fehler nicht cachen
+        if (isset($data['error'])) {
+            return;
+        }
+        $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;
+        }
+    }
+}
@@ -0,0 +1,104 @@
+<?php
+/**
+ * Auto-Screenshot API
+ *
+ * Kann als Cron-Job aufgerufen werden:
+ * */10 * * * * curl -s http://localhost/api/auto-screenshot.php?key=YOUR_SECRET_KEY
+ *
+ * Oder via Webhook/Timer
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+header('Content-Type: application/json');
+
+$settingsManager = new SettingsManager();
+
+// Prüfe ob Feature aktiviert
+if (!$settingsManager->isAutoScreenshotEnabled()) {
+    echo json_encode(['success' => false, 'error' => 'Auto-Screenshot deaktiviert']);
+    exit;
+}
+
+// Optionale API-Key Validierung
+$configFile = dirname(__DIR__) . '/config.php';
+if (file_exists($configFile)) {
+    $config = require $configFile;
+    $apiKey = $config['auto_screenshot_key'] ?? '';
+
+    if (!empty($apiKey) && ($_GET['key'] ?? '') !== $apiKey) {
+        http_response_code(403);
+        echo json_encode(['success' => false, 'error' => 'Ungültiger API-Key']);
+        exit;
+    }
+}
+
+// Galerie-Verzeichnis erstellen
+$galleryDir = dirname(__DIR__) . '/gallery/auto/';
+if (!is_dir($galleryDir)) {
+    mkdir($galleryDir, 0755, true);
+}
+
+// Screenshot-Dateiname
+$filename = 'auto_' . date('Y-m-d_H-i-s') . '.jpg';
+$filepath = $galleryDir . $filename;
+
+// Video-Stream URL
+$streamUrl = 'test_video.m3u8';
+$logoPath = dirname(__DIR__) . '/logo.png';
+
+// FFmpeg-Befehl zum Erstellen des Screenshots
+$command = sprintf(
+    'ffmpeg -i %s -vframes 1 -q:v 2 %s 2>&1',
+    escapeshellarg($streamUrl),
+    escapeshellarg($filepath)
+);
+
+exec($command, $output, $returnVar);
+
+if ($returnVar !== 0 || !file_exists($filepath)) {
+    echo json_encode([
+        'success' => false,
+        'error' => 'Screenshot fehlgeschlagen',
+        'command' => $command,
+        'output' => implode("\n", $output)
+    ]);
+    exit;
+}
+
+// Alte Screenshots aufräumen (max. Anzahl einhalten)
+$maxImages = $settingsManager->getAutoScreenshotMaxImages();
+$existingFiles = glob($galleryDir . 'auto_*.jpg');
+rsort($existingFiles); // Neueste zuerst
+
+if (count($existingFiles) > $maxImages) {
+    $filesToDelete = array_slice($existingFiles, $maxImages);
+    foreach ($filesToDelete as $file) {
+        @unlink($file);
+    }
+}
+
+// Metadaten speichern
+$metaFile = $galleryDir . 'metadata.json';
+$metadata = [];
+if (file_exists($metaFile)) {
+    $metadata = json_decode(file_get_contents($metaFile), true) ?? [];
+}
+
+$metadata[$filename] = [
+    'created_at' => date('Y-m-d H:i:s'),
+    'timestamp' => time(),
+    'size' => filesize($filepath)
+];
+
+// Nur die letzten maxImages behalten
+$metadata = array_slice($metadata, -$maxImages, null, true);
+file_put_contents($metaFile, json_encode($metadata, JSON_PRETTY_PRINT));
+
+echo json_encode([
+    'success' => true,
+    'file' => $filename,
+    'path' => '/gallery/auto/' . $filename,
+    'total_images' => count(glob($galleryDir . 'auto_*.jpg'))
+]);
@@ -0,0 +1,97 @@
+<?php
+/**
+ * Gallery API
+ *
+ * GET /api/gallery.php - Liste alle Galerie-Bilder
+ * GET /api/gallery.php?date=2024-01-30 - Bilder eines bestimmten Datums
+ * GET /api/gallery.php?from=2024-01-01&to=2024-01-31 - Bilder in einem Zeitraum
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+
+$settingsManager = new SettingsManager();
+
+$galleryDir = dirname(__DIR__) . '/gallery/auto/';
+
+// Prüfe ob Galerie existiert
+if (!is_dir($galleryDir)) {
+    echo json_encode(['success' => true, 'images' => [], 'total' => 0]);
+    exit;
+}
+
+// Parameter
+$date = $_GET['date'] ?? null;
+$from = $_GET['from'] ?? null;
+$to = $_GET['to'] ?? null;
+$limit = min(100, (int)($_GET['limit'] ?? 50));
+$offset = max(0, (int)($_GET['offset'] ?? 0));
+
+// Alle Bilder holen
+$allFiles = glob($galleryDir . 'auto_*.jpg');
+rsort($allFiles); // Neueste zuerst
+
+$images = [];
+
+foreach ($allFiles as $file) {
+    $filename = basename($file);
+    // Extrahiere Datum aus Dateinamen: auto_2024-01-30_14-30-00.jpg
+    if (preg_match('/auto_(\d{4}-\d{2}-\d{2})_(\d{2}-\d{2}-\d{2})\.jpg/', $filename, $matches)) {
+        $fileDate = $matches[1];
+        $fileTime = str_replace('-', ':', $matches[2]);
+
+        // Datumsfilter
+        if ($date !== null && $fileDate !== $date) {
+            continue;
+        }
+
+        if ($from !== null && $fileDate < $from) {
+            continue;
+        }
+
+        if ($to !== null && $fileDate > $to) {
+            continue;
+        }
+
+        $images[] = [
+            'filename' => $filename,
+            'path' => '/gallery/auto/' . $filename,
+            'date' => $fileDate,
+            'time' => $fileTime,
+            'datetime' => $fileDate . ' ' . $fileTime,
+            'timestamp' => strtotime($fileDate . ' ' . $fileTime),
+            'size' => filesize($file)
+        ];
+    }
+}
+
+$total = count($images);
+
+// Pagination
+$images = array_slice($images, $offset, $limit);
+
+// Verfügbare Daten (für Kalender/Filter)
+$availableDates = [];
+foreach (glob($galleryDir . 'auto_*.jpg') as $file) {
+    if (preg_match('/auto_(\d{4}-\d{2}-\d{2})/', basename($file), $m)) {
+        $availableDates[$m[1]] = ($availableDates[$m[1]] ?? 0) + 1;
+    }
+}
+krsort($availableDates);
+
+echo json_encode([
+    'success' => true,
+    'images' => $images,
+    'total' => $total,
+    'offset' => $offset,
+    'limit' => $limit,
+    'available_dates' => $availableDates,
+    'filters' => [
+        'date' => $date,
+        'from' => $from,
+        'to' => $to
+    ]
+]);
@@ -0,0 +1,315 @@
+<?php
+/**
+ * Share API - Teilen von Bildern/Videos per E-Mail
+ *
+ * POST /api/share.php
+ * Body: { email: "friend@example.com", type: "video|image", path: "/videos/...", message: "Schau dir das an!" }
+ */
+
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
+header('Access-Control-Allow-Headers: Content-Type');
+
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit;
+}
+
+$settingsManager = new SettingsManager();
+
+// Prüfe ob Feature aktiviert
+if (!$settingsManager->isEmailSharingEnabled()) {
+    echo json_encode(['success' => false, 'error' => 'E-Mail-Sharing ist deaktiviert']);
+    exit;
+}
+
+// Config laden
+$configFile = dirname(__DIR__) . '/config.php';
+$config = file_exists($configFile) ? require $configFile : [];
+$mailConfig = $config['mail'] ?? [];
+
+if (empty($mailConfig['host']) || empty($mailConfig['username'])) {
+    echo json_encode(['success' => false, 'error' => 'E-Mail-Server nicht konfiguriert']);
+    exit;
+}
+
+// === GET: Share-Link generieren ===
+if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['generate'])) {
+    $path = $_GET['path'] ?? '';
+    $type = $_GET['type'] ?? 'video';
+
+    if (empty($path)) {
+        echo json_encode(['success' => false, 'error' => 'Kein Pfad angegeben']);
+        exit;
+    }
+
+    // Token generieren
+    $expiryHours = $settingsManager->getShareLinkExpiryHours();
+    $expiry = time() + ($expiryHours * 3600);
+    $token = hash_hmac('sha256', $path . $expiry, session_id() . 'share_secret');
+
+    // Share-Link speichern
+    $shareDir = dirname(__DIR__) . '/data/shares/';
+    if (!is_dir($shareDir)) {
+        mkdir($shareDir, 0755, true);
+    }
+
+    $shareId = bin2hex(random_bytes(16));
+    $shareData = [
+        'id' => $shareId,
+        'path' => $path,
+        'type' => $type,
+        'token' => $token,
+        'expiry' => $expiry,
+        'created_at' => date('Y-m-d H:i:s')
+    ];
+
+    file_put_contents($shareDir . $shareId . '.json', json_encode($shareData));
+
+    // URL generieren
+    $baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http')
+        . '://' . $_SERVER['HTTP_HOST'];
+    $shareUrl = $baseUrl . '/api/share.php?view=' . $shareId;
+
+    echo json_encode([
+        'success' => true,
+        'share_url' => $shareUrl,
+        'share_id' => $shareId,
+        'expires_at' => date('Y-m-d H:i:s', $expiry)
+    ]);
+    exit;
+}
+
+// === GET: Share-Link anzeigen ===
+if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['view'])) {
+    $shareId = preg_replace('/[^a-f0-9]/', '', $_GET['view']);
+    $shareFile = dirname(__DIR__) . '/data/shares/' . $shareId . '.json';
+
+    if (!file_exists($shareFile)) {
+        header('Content-Type: text/html; charset=utf-8');
+        echo '<!DOCTYPE html><html><head><title>Link ungültig</title></head><body style="font-family:sans-serif;text-align:center;padding:50px;"><h1>❌ Link nicht gefunden</h1><p>Dieser Share-Link existiert nicht oder wurde bereits gelöscht.</p></body></html>';
+        exit;
+    }
+
+    $shareData = json_decode(file_get_contents($shareFile), true);
+
+    // Ablauf prüfen
+    if (time() > $shareData['expiry']) {
+        @unlink($shareFile);
+        header('Content-Type: text/html; charset=utf-8');
+        echo '<!DOCTYPE html><html><head><title>Link abgelaufen</title></head><body style="font-family:sans-serif;text-align:center;padding:50px;"><h1>⏰ Link abgelaufen</h1><p>Dieser Share-Link ist abgelaufen. Bitte fordere einen neuen Link an.</p></body></html>';
+        exit;
+    }
+
+    // Datei existiert?
+    $filePath = dirname(__DIR__) . $shareData['path'];
+    if (!file_exists($filePath)) {
+        header('Content-Type: text/html; charset=utf-8');
+        echo '<!DOCTYPE html><html><head><title>Datei nicht gefunden</title></head><body style="font-family:sans-serif;text-align:center;padding:50px;"><h1>📭 Datei nicht gefunden</h1><p>Die geteilte Datei existiert nicht mehr.</p></body></html>';
+        exit;
+    }
+
+    // Redirect zur Datei oder HTML-Seite mit eingebettetem Player
+    $isVideo = in_array(pathinfo($filePath, PATHINFO_EXTENSION), ['mp4', 'webm', 'mov']);
+    $isImage = in_array(pathinfo($filePath, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
+
+    $siteName = $config['app']['name'] ?? 'Aurora Livecam';
+    $baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http')
+        . '://' . $_SERVER['HTTP_HOST'];
+
+    header('Content-Type: text/html; charset=utf-8');
+    echo '<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Geteilte ' . ($isVideo ? 'Video' : 'Bild') . ' - ' . htmlspecialchars($siteName) . '</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            border-radius: 16px;
+            padding: 30px;
+            max-width: 900px;
+            width: 100%;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        }
+        h1 { font-size: 1.5rem; margin-bottom: 20px; color: #333; }
+        video, img {
+            width: 100%;
+            max-height: 70vh;
+            object-fit: contain;
+            border-radius: 8px;
+            background: #000;
+        }
+        .download-btn {
+            display: inline-block;
+            margin-top: 20px;
+            padding: 12px 30px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            text-decoration: none;
+            border-radius: 8px;
+            font-weight: 600;
+        }
+        .download-btn:hover { opacity: 0.9; }
+        .footer {
+            margin-top: 20px;
+            color: rgba(255,255,255,0.8);
+            font-size: 0.9rem;
+        }
+        .footer a { color: white; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>📤 Geteilte' . ($isVideo ? 's Video' : 's Bild') . '</h1>';
+
+    if ($isVideo) {
+        echo '<video controls autoplay><source src="' . htmlspecialchars($shareData['path']) . '" type="video/mp4">Ihr Browser unterstützt kein Video.</video>';
+    } else {
+        echo '<img src="' . htmlspecialchars($shareData['path']) . '" alt="Geteiltes Bild">';
+    }
+
+    echo '
+        <a href="' . htmlspecialchars($shareData['path']) . '" download class="download-btn">⬇️ Herunterladen</a>
+    </div>
+    <div class="footer">
+        Geteilt von <a href="' . $baseUrl . '">' . htmlspecialchars($siteName) . '</a>
+    </div>
+</body>
+</html>';
+    exit;
+}
+
+// === POST: E-Mail senden ===
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(['success' => false, 'error' => 'Nur POST erlaubt']);
+    exit;
+}
+
+// JSON-Body parsen
+$input = json_decode(file_get_contents('php://input'), true);
+if (!$input) {
+    $input = $_POST;
+}
+
+$email = filter_var($input['email'] ?? '', FILTER_VALIDATE_EMAIL);
+$path = $input['path'] ?? '';
+$type = $input['type'] ?? 'video';
+$message = htmlspecialchars($input['message'] ?? '');
+$senderName = htmlspecialchars($input['sender_name'] ?? 'Ein Freund');
+
+if (!$email) {
+    echo json_encode(['success' => false, 'error' => 'Ungültige E-Mail-Adresse']);
+    exit;
+}
+
+if (empty($path)) {
+    echo json_encode(['success' => false, 'error' => 'Kein Pfad angegeben']);
+    exit;
+}
+
+// Share-Link generieren
+$expiryHours = $settingsManager->getShareLinkExpiryHours();
+$expiry = time() + ($expiryHours * 3600);
+
+$shareDir = dirname(__DIR__) . '/data/shares/';
+if (!is_dir($shareDir)) {
+    mkdir($shareDir, 0755, true);
+}
+
+$shareId = bin2hex(random_bytes(16));
+$shareData = [
+    'id' => $shareId,
+    'path' => $path,
+    'type' => $type,
+    'expiry' => $expiry,
+    'created_at' => date('Y-m-d H:i:s'),
+    'shared_to' => $email
+];
+
+file_put_contents($shareDir . $shareId . '.json', json_encode($shareData));
+
+$baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http')
+    . '://' . $_SERVER['HTTP_HOST'];
+$shareUrl = $baseUrl . '/api/share.php?view=' . $shareId;
+$siteName = $config['app']['name'] ?? 'Aurora Livecam';
+
+// E-Mail senden
+try {
+    $mail = new PHPMailer(true);
+
+    // SMTP Konfiguration
+    $mail->isSMTP();
+    $mail->Host = $mailConfig['host'];
+    $mail->SMTPAuth = true;
+    $mail->Username = $mailConfig['username'];
+    $mail->Password = $mailConfig['password'];
+    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
+    $mail->Port = $mailConfig['port'] ?? 587;
+    $mail->CharSet = 'UTF-8';
+
+    // Absender/Empfänger
+    $mail->setFrom($mailConfig['from_address'], $mailConfig['from_name'] ?? $siteName);
+    $mail->addAddress($email);
+
+    // Inhalt
+    $mail->isHTML(true);
+    $mail->Subject = $senderName . ' hat ' . ($type === 'video' ? 'ein Video' : 'ein Bild') . ' mit dir geteilt';
+
+    $mail->Body = '
+    <div style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
+        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 12px 12px 0 0; text-align: center;">
+            <h1 style="color: white; margin: 0; font-size: 24px;">📤 ' . htmlspecialchars($siteName) . '</h1>
+        </div>
+        <div style="background: #f7f7f7; padding: 30px; border-radius: 0 0 12px 12px;">
+            <p style="font-size: 18px; color: #333; margin-bottom: 20px;">
+                <strong>' . htmlspecialchars($senderName) . '</strong> hat ' . ($type === 'video' ? 'ein Video' : 'ein Bild') . ' mit dir geteilt!
+            </p>
+            ' . (!empty($message) ? '<div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #667eea; margin-bottom: 20px;"><em>"' . nl2br($message) . '"</em></div>' : '') . '
+            <a href="' . htmlspecialchars($shareUrl) . '" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 30px; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px;">
+                ▶️ Jetzt ansehen
+            </a>
+            <p style="margin-top: 20px; color: #888; font-size: 12px;">
+                Dieser Link ist ' . $expiryHours . ' Stunden gültig.
+            </p>
+        </div>
+    </div>';
+
+    $mail->AltBody = $senderName . ' hat ' . ($type === 'video' ? 'ein Video' : 'ein Bild') . ' mit dir geteilt: ' . $shareUrl;
+
+    $mail->send();
+
+    echo json_encode([
+        'success' => true,
+        'message' => 'E-Mail wurde gesendet',
+        'share_url' => $shareUrl
+    ]);
+
+} catch (Exception $e) {
+    error_log('Share email error: ' . $e->getMessage());
+    echo json_encode([
+        'success' => false,
+        'error' => 'E-Mail konnte nicht gesendet werden',
+        'share_url' => $shareUrl // URL trotzdem zurückgeben
+    ]);
+}
@@ -0,0 +1,56 @@
+<?php
+/**
+ * Stripe Webhook Endpoint
+ *
+ * URL: /api/stripe-webhook.php
+ * Konfigurieren Sie diesen Endpoint in Ihrem Stripe Dashboard
+ */
+
+// Keine Session, keine Ausgabe vor JSON
+error_reporting(0);
+ini_set('display_errors', 0);
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Billing\WebhookHandler;
+
+// Nur POST erlaubt
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(['error' => 'Method not allowed']);
+    exit;
+}
+
+// Payload lesen
+$payload = file_get_contents('php://input');
+$signature = $_SERVER['HTTP_STRIPE_SIGNATURE'] ?? '';
+
+if (empty($payload)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Empty payload']);
+    exit;
+}
+
+// Webhook verarbeiten
+try {
+    $handler = new WebhookHandler();
+    $result = $handler->handle($payload, $signature);
+
+    if ($result['success']) {
+        http_response_code(200);
+    } else {
+        http_response_code(400);
+    }
+
+    header('Content-Type: application/json');
+    echo json_encode($result);
+
+} catch (\Exception $e) {
+    error_log('Stripe Webhook Error: ' . $e->getMessage());
+    http_response_code(500);
+    echo json_encode(['error' => 'Internal server error']);
+}
@@ -0,0 +1,192 @@
+<?php
+/**
+ * Video Search API
+ *
+ * Suche nach Videos nach Datum und Uhrzeit
+ *
+ * GET /api/video-search.php?date=2024-01-30
+ * GET /api/video-search.php?date=2024-01-30&time=14:30
+ * GET /api/video-search.php?from=2024-01-01&to=2024-01-31
+ * GET /api/video-search.php?time_from=08:00&time_to=18:00
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+
+$settingsManager = new SettingsManager();
+
+$videoDir = dirname(__DIR__) . '/videos/';
+$aiDir = dirname(__DIR__) . '/ai/';
+
+// Parameter
+$date = $_GET['date'] ?? null; // Format: YYYY-MM-DD
+$time = $_GET['time'] ?? null; // Format: HH:MM
+$fromDate = $_GET['from'] ?? null;
+$toDate = $_GET['to'] ?? null;
+$timeFrom = $_GET['time_from'] ?? null;
+$timeTo = $_GET['time_to'] ?? null;
+$type = $_GET['type'] ?? 'all'; // all, daily, ai
+$aiCategory = $_GET['ai_category'] ?? null;
+$limit = min(100, (int)($_GET['limit'] ?? 50));
+
+$results = [
+    'daily_videos' => [],
+    'ai_videos' => [],
+    'gallery_images' => []
+];
+
+// AI-Kategorien
+$aiCategories = ['sunny', 'rainy', 'snowy', 'planes', 'birds', 'sunset', 'sunrise', 'rainbow'];
+
+// === TAGESVIDEOS SUCHEN ===
+if ($type === 'all' || $type === 'daily') {
+    $pattern = $videoDir . 'daily_video_*.mp4';
+    $dailyVideos = glob($pattern);
+
+    foreach ($dailyVideos as $video) {
+        $filename = basename($video);
+
+        // Extrahiere Datum aus Dateinamen: daily_video_YYYYMMDD_HHMMSS.mp4
+        if (preg_match('/daily_video_(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})(\d{2})\.mp4/', $filename, $matches)) {
+            $videoDate = $matches[1] . '-' . $matches[2] . '-' . $matches[3];
+            $videoTime = $matches[4] . ':' . $matches[5];
+            $videoDateTime = $videoDate . ' ' . $videoTime . ':' . $matches[6];
+
+            // Datumsfilter
+            if ($date !== null && $videoDate !== $date) {
+                continue;
+            }
+
+            if ($fromDate !== null && $videoDate < $fromDate) {
+                continue;
+            }
+
+            if ($toDate !== null && $videoDate > $toDate) {
+                continue;
+            }
+
+            // Uhrzeitfilter
+            if ($timeFrom !== null && $videoTime < $timeFrom) {
+                continue;
+            }
+
+            if ($timeTo !== null && $videoTime > $timeTo) {
+                continue;
+            }
+
+            // Spezifische Uhrzeit (mit 30 Min Toleranz)
+            if ($time !== null) {
+                $searchMinutes = intval(substr($time, 0, 2)) * 60 + intval(substr($time, 3, 2));
+                $videoMinutes = intval($matches[4]) * 60 + intval($matches[5]);
+
+                if (abs($searchMinutes - $videoMinutes) > 30) {
+                    continue;
+                }
+            }
+
+            $results['daily_videos'][] = [
+                'type' => 'daily',
+                'filename' => $filename,
+                'path' => '/videos/' . $filename,
+                'date' => $videoDate,
+                'time' => $videoTime,
+                'datetime' => $videoDateTime,
+                'timestamp' => strtotime($videoDateTime),
+                'size' => filesize($video),
+                'size_mb' => round(filesize($video) / (1024 * 1024), 2)
+            ];
+        }
+    }
+}
+
+// === AI-VIDEOS SUCHEN ===
+if ($type === 'all' || $type === 'ai') {
+    $searchCategories = $aiCategory ? [$aiCategory] : $aiCategories;
+
+    foreach ($searchCategories as $category) {
+        $categoryDir = $aiDir . $category . '/';
+        if (!is_dir($categoryDir)) continue;
+
+        $pattern = $categoryDir . $category . '_*.mp4';
+        $aiVideos = glob($pattern);
+
+        foreach ($aiVideos as $video) {
+            $filename = basename($video);
+
+            // Extrahiere Datum aus Dateinamen: category_YYYYMMDD_HHMMSS.mp4
+            if (preg_match('/' . $category . '_(\d{4})(\d{2})(\d{2})_?(\d{2})?(\d{2})?(\d{2})?\.mp4/', $filename, $matches)) {
+                $videoDate = $matches[1] . '-' . $matches[2] . '-' . $matches[3];
+                $videoTime = isset($matches[4]) ? ($matches[4] . ':' . ($matches[5] ?? '00')) : '00:00';
+                $videoDateTime = $videoDate . ' ' . $videoTime;
+
+                // Datumsfilter
+                if ($date !== null && $videoDate !== $date) {
+                    continue;
+                }
+
+                if ($fromDate !== null && $videoDate < $fromDate) {
+                    continue;
+                }
+
+                if ($toDate !== null && $videoDate > $toDate) {
+                    continue;
+                }
+
+                // Uhrzeitfilter
+                if ($timeFrom !== null && $videoTime < $timeFrom) {
+                    continue;
+                }
+
+                if ($timeTo !== null && $videoTime > $timeTo) {
+                    continue;
+                }
+
+                $results['ai_videos'][] = [
+                    'type' => 'ai',
+                    'category' => $category,
+                    'filename' => $filename,
+                    'path' => '/ai/' . $category . '/' . $filename,
+                    'date' => $videoDate,
+                    'time' => $videoTime,
+                    'datetime' => $videoDateTime,
+                    'timestamp' => strtotime($videoDateTime),
+                    'size' => filesize($video),
+                    'size_mb' => round(filesize($video) / (1024 * 1024), 2)
+                ];
+            }
+        }
+    }
+}
+
+// Sortieren nach Datum/Zeit (neueste zuerst)
+usort($results['daily_videos'], fn($a, $b) => $b['timestamp'] - $a['timestamp']);
+usort($results['ai_videos'], fn($a, $b) => $b['timestamp'] - $a['timestamp']);
+
+// Limit anwenden
+$results['daily_videos'] = array_slice($results['daily_videos'], 0, $limit);
+$results['ai_videos'] = array_slice($results['ai_videos'], 0, $limit);
+
+// Statistiken
+$results['stats'] = [
+    'total_daily' => count($results['daily_videos']),
+    'total_ai' => count($results['ai_videos']),
+    'total' => count($results['daily_videos']) + count($results['ai_videos'])
+];
+
+$results['filters'] = [
+    'date' => $date,
+    'time' => $time,
+    'from' => $fromDate,
+    'to' => $toDate,
+    'time_from' => $timeFrom,
+    'time_to' => $timeTo,
+    'type' => $type,
+    'ai_category' => $aiCategory
+];
+
+$results['success'] = true;
+
+echo json_encode($results, JSON_PRETTY_PRINT);
@@ -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";
+?>
@@ -0,0 +1,59 @@
+<?php
+/**
+ * Aurora Livecam - Konfigurationsdatei
+ *
+ * Kopiere diese Datei zu config.php und passe die Werte an.
+ * WICHTIG: config.php niemals in Git committen!
+ */
+
+return [
+    // Datenbank-Konfiguration
+    'database' => [
+        'host' => 'localhost',
+        'port' => 3306,
+        'database' => 'aurora_livecam',
+        'username' => 'root',
+        'password' => '',
+        'charset' => 'utf8mb4',
+    ],
+
+    // Anwendungs-Einstellungen
+    'app' => [
+        'name' => 'Aurora Livecam',
+        'url' => 'https://aurora-weather-livecam.com',
+        'debug' => false,
+        'timezone' => 'Europe/Zurich',
+    ],
+
+    // Multi-Tenant Einstellungen
+    'tenant' => [
+        'default_subdomain_suffix' => '.aurora-livecam.com',
+        'allow_custom_domains' => true,
+        'trial_days' => 14,
+    ],
+
+    // Stripe (für Billing)
+    'stripe' => [
+        'public_key' => '',
+        'secret_key' => '',
+        'webhook_secret' => '',
+        'currency' => 'chf',
+    ],
+
+    // E-Mail Einstellungen (für Onboarding)
+    'mail' => [
+        'host' => 'smtp.example.com',
+        'port' => 587,
+        'username' => '',
+        'password' => '',
+        'from_address' => 'noreply@aurora-livecam.com',
+        'from_name' => 'Aurora Livecam',
+    ],
+
+    // Sicherheit
+    'security' => [
+        'session_lifetime' => 7200, // 2 Stunden
+        'remember_me_days' => 30,
+        'password_min_length' => 8,
+    ],
+];
@@ -0,0 +1,75 @@
+<?php
+/**
+ * Dashboard API - Stats
+ */
+
+header('Content-Type: application/json');
+
+require_once dirname(__DIR__, 2) . '/vendor/autoload.php';
+require_once dirname(__DIR__, 2) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__, 2) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__, 2) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Core\Database;
+
+$auth = new AuthManager();
+
+// Auth check
+if (!$auth->isLoggedIn()) {
+    http_response_code(401);
+    echo json_encode(['success' => false, 'error' => 'Unauthorized']);
+    exit;
+}
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+$stats = [
+    'viewers_current' => 0,
+    'viewers_today' => 0,
+    'viewers_peak' => 0,
+    'stream_status' => 'unknown',
+];
+
+// Aktuelle Zuschauer aus Datei
+$viewerFile = dirname(__DIR__, 2) . '/active_viewers.json';
+if (file_exists($viewerFile)) {
+    $viewers = json_decode(file_get_contents($viewerFile), true);
+    $stats['viewers_current'] = count($viewers ?? []);
+}
+
+// DB Stats falls verfügbar
+try {
+    $db = Database::getInstance();
+
+    if ($tenantId > 0) {
+        $todayStats = $db->fetchOne(
+            "SELECT SUM(viewer_count) as total, MAX(viewer_count) as peak
+             FROM viewer_stats
+             WHERE tenant_id = ? AND DATE(recorded_at) = CURDATE()",
+            [$tenantId]
+        );
+
+        if ($todayStats) {
+            $stats['viewers_today'] = (int)($todayStats['total'] ?? 0);
+            $stats['viewers_peak'] = (int)($todayStats['peak'] ?? 0);
+        }
+
+        $stream = $db->fetchOne(
+            "SELECT last_status FROM tenant_streams WHERE tenant_id = ? AND is_primary = 1",
+            [$tenantId]
+        );
+        $stats['stream_status'] = $stream['last_status'] ?? 'unknown';
+    }
+} catch (\Exception $e) {
+    // DB nicht verfügbar - Stats bleiben auf Defaults
+}
+
+echo json_encode([
+    'success' => true,
+    'stats' => $stats,
+    'timestamp' => time(),
+]);
@@ -0,0 +1,536 @@
+/* Dashboard CSS */
+:root {
+    --primary: #667eea;
+    --primary-dark: #5a67d8;
+    --secondary: #764ba2;
+    --accent: #f093fb;
+    --success: #48bb78;
+    --warning: #ed8936;
+    --danger: #f56565;
+    --dark: #1a202c;
+    --gray-900: #1a202c;
+    --gray-800: #2d3748;
+    --gray-700: #4a5568;
+    --gray-600: #718096;
+    --gray-500: #a0aec0;
+    --gray-400: #cbd5e0;
+    --gray-300: #e2e8f0;
+    --gray-200: #edf2f7;
+    --gray-100: #f7fafc;
+    --white: #ffffff;
+    --sidebar-width: 260px;
+    --header-height: 60px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: var(--gray-100);
+    color: var(--gray-800);
+    line-height: 1.6;
+}
+
+/* Dashboard Container */
+.dashboard-container {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+    width: var(--sidebar-width);
+    background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-800) 100%);
+    color: var(--white);
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    height: 100vh;
+    z-index: 100;
+}
+
+.sidebar-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--gray-700);
+}
+
+.sidebar-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.role-badge {
+    font-size: 0.75rem;
+    background: var(--primary);
+    padding: 0.125rem 0.5rem;
+    border-radius: 9999px;
+    text-transform: capitalize;
+}
+
+/* Navigation */
+.sidebar-nav {
+    flex: 1;
+    padding: 1rem 0;
+    overflow-y: auto;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1.5rem;
+    color: var(--gray-400);
+    text-decoration: none;
+    transition: all 0.2s;
+}
+
+.nav-item:hover {
+    background: var(--gray-700);
+    color: var(--white);
+}
+
+.nav-item.active {
+    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+    color: var(--white);
+}
+
+.nav-icon {
+    font-size: 1.25rem;
+    width: 1.5rem;
+    text-align: center;
+}
+
+.nav-divider {
+    height: 1px;
+    background: var(--gray-700);
+    margin: 1rem 0;
+}
+
+.nav-label {
+    display: block;
+    padding: 0.5rem 1.5rem;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: var(--gray-500);
+    letter-spacing: 0.05em;
+}
+
+.sidebar-footer {
+    border-top: 1px solid var(--gray-700);
+    padding: 0.5rem 0;
+}
+
+.nav-item.logout:hover {
+    background: var(--danger);
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    margin-left: var(--sidebar-width);
+    min-height: 100vh;
+}
+
+.main-header {
+    height: var(--header-height);
+    background: var(--white);
+    border-bottom: 1px solid var(--gray-300);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 2rem;
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.main-header h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.user-info {
+    color: var(--gray-600);
+    font-size: 0.875rem;
+}
+
+.content-wrapper {
+    padding: 2rem;
+}
+
+/* Cards */
+.card {
+    background: var(--white);
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    margin-bottom: 1.5rem;
+}
+
+.card-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--gray-200);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.card-title {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.stat-card {
+    background: var(--white);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.stat-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+.stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--gray-900);
+}
+
+.stat-label {
+    color: var(--gray-600);
+    font-size: 0.875rem;
+}
+
+.stat-change {
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
+
+.stat-change.positive { color: var(--success); }
+.stat-change.negative { color: var(--danger); }
+
+/* Forms */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    color: var(--gray-700);
+}
+
+.form-input,
+.form-select,
+.form-textarea {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--gray-300);
+    border-radius: 0.375rem;
+    font-size: 1rem;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+.form-help {
+    font-size: 0.875rem;
+    color: var(--gray-500);
+    margin-top: 0.25rem;
+}
+
+.form-textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 0.375rem;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-decoration: none;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: var(--white);
+}
+
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+    background: var(--gray-200);
+    color: var(--gray-700);
+}
+
+.btn-secondary:hover {
+    background: var(--gray-300);
+}
+
+.btn-danger {
+    background: var(--danger);
+    color: var(--white);
+}
+
+.btn-success {
+    background: var(--success);
+    color: var(--white);
+}
+
+.btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+/* Alerts */
+.alert {
+    padding: 1rem 1.5rem;
+    border-radius: 0.375rem;
+    margin-bottom: 1.5rem;
+}
+
+.alert-success {
+    background: #c6f6d5;
+    color: #22543d;
+    border: 1px solid #9ae6b4;
+}
+
+.alert-error {
+    background: #fed7d7;
+    color: #742a2a;
+    border: 1px solid #feb2b2;
+}
+
+.alert-warning {
+    background: #feebc8;
+    color: #744210;
+    border: 1px solid #fbd38d;
+}
+
+.alert-info {
+    background: #bee3f8;
+    color: #2a4365;
+    border: 1px solid #90cdf4;
+}
+
+/* Tables */
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.table th,
+.table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.table th {
+    font-weight: 600;
+    color: var(--gray-600);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.table tbody tr:hover {
+    background: var(--gray-50);
+}
+
+/* Status Badges */
+.badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.badge-success { background: #c6f6d5; color: #22543d; }
+.badge-warning { background: #feebc8; color: #744210; }
+.badge-danger { background: #fed7d7; color: #742a2a; }
+.badge-info { background: #bee3f8; color: #2a4365; }
+
+/* Grid */
+.grid {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+
+/* Color Picker */
+.color-picker-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.color-picker {
+    width: 50px;
+    height: 40px;
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+}
+
+.color-value {
+    font-family: monospace;
+    color: var(--gray-600);
+}
+
+/* Preview Box */
+.preview-box {
+    border: 2px dashed var(--gray-300);
+    border-radius: 0.5rem;
+    padding: 2rem;
+    text-align: center;
+    background: var(--gray-50);
+}
+
+/* Toggle Switch */
+.toggle-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.toggle {
+    position: relative;
+    width: 48px;
+    height: 24px;
+}
+
+.toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gray-300);
+    border-radius: 24px;
+    transition: 0.3s;
+}
+
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background: white;
+    border-radius: 50%;
+    transition: 0.3s;
+}
+
+.toggle input:checked + .toggle-slider {
+    background: var(--primary);
+}
+
+.toggle input:checked + .toggle-slider:before {
+    transform: translateX(24px);
+}
+
+/* Login Page */
+.login-container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+}
+
+.login-box {
+    background: var(--white);
+    padding: 2.5rem;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    max-width: 400px;
+}
+
+.login-title {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.login-title h1 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.login-title p {
+    color: var(--gray-500);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+        transition: transform 0.3s;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .grid-2,
+    .grid-3 {
+        grid-template-columns: 1fr;
+    }
+}
@@ -0,0 +1,131 @@
+/**
+ * Dashboard JavaScript
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Auto-dismiss alerts after 5 seconds
+    const alerts = document.querySelectorAll('.alert');
+    alerts.forEach(alert => {
+        setTimeout(() => {
+            alert.style.transition = 'opacity 0.3s';
+            alert.style.opacity = '0';
+            setTimeout(() => alert.remove(), 300);
+        }, 5000);
+    });
+
+    // Mobile sidebar toggle
+    const sidebar = document.querySelector('.sidebar');
+    const mainContent = document.querySelector('.main-content');
+
+    if (window.innerWidth <= 768) {
+        // Add menu button
+        const menuBtn = document.createElement('button');
+        menuBtn.className = 'btn btn-secondary';
+        menuBtn.style.cssText = 'position: fixed; top: 10px; left: 10px; z-index: 200; padding: 0.5rem;';
+        menuBtn.innerHTML = '☰';
+        menuBtn.onclick = () => sidebar.classList.toggle('open');
+        document.body.appendChild(menuBtn);
+
+        // Close sidebar on content click
+        mainContent.addEventListener('click', () => {
+            sidebar.classList.remove('open');
+        });
+    }
+
+    // Color picker live preview
+    document.querySelectorAll('.color-picker').forEach(picker => {
+        picker.addEventListener('input', function() {
+            const wrapper = this.closest('.color-picker-wrapper');
+            if (wrapper) {
+                const valueDisplay = wrapper.querySelector('.color-value');
+                if (valueDisplay) {
+                    valueDisplay.textContent = this.value;
+                }
+            }
+        });
+    });
+
+    // Form unsaved changes warning
+    const forms = document.querySelectorAll('form');
+    let formChanged = false;
+
+    forms.forEach(form => {
+        form.addEventListener('change', () => {
+            formChanged = true;
+        });
+
+        form.addEventListener('submit', () => {
+            formChanged = false;
+        });
+    });
+
+    window.addEventListener('beforeunload', (e) => {
+        if (formChanged) {
+            e.preventDefault();
+            e.returnValue = '';
+        }
+    });
+
+    // Stats refresh (every 30 seconds on overview page)
+    if (document.querySelector('.stats-grid')) {
+        setInterval(refreshStats, 30000);
+    }
+});
+
+/**
+ * Refresh stats via AJAX
+ */
+function refreshStats() {
+    fetch('/dashboard/api/stats.php')
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                updateStatCard('viewers_current', data.stats.viewers_current);
+                updateStatCard('viewers_today', data.stats.viewers_today);
+                updateStatCard('viewers_peak', data.stats.viewers_peak);
+            }
+        })
+        .catch(err => console.log('Stats refresh failed:', err));
+}
+
+/**
+ * Update a stat card value
+ */
+function updateStatCard(id, value) {
+    const cards = document.querySelectorAll('.stat-card');
+    cards.forEach(card => {
+        const label = card.querySelector('.stat-label');
+        if (label) {
+            // Match by label text (simplified)
+            const valueEl = card.querySelector('.stat-value');
+            if (valueEl && typeof value !== 'undefined') {
+                valueEl.textContent = value;
+            }
+        }
+    });
+}
+
+/**
+ * Show notification toast
+ */
+function showNotification(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `alert alert-${type}`;
+    toast.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 1000; min-width: 300px;';
+    toast.textContent = message;
+
+    document.body.appendChild(toast);
+
+    setTimeout(() => {
+        toast.style.transition = 'opacity 0.3s';
+        toast.style.opacity = '0';
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+/**
+ * Confirm dangerous actions
+ */
+function confirmAction(message) {
+    return confirm(message || 'Sind Sie sicher?');
+}
@@ -0,0 +1,282 @@
+<?php
+/**
+ * Dashboard - Abrechnung
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Billing\StripeService;
+use AuroraLivecam\Billing\SubscriptionManager;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+$auth->requireLogin();
+
+// Prüfe ob Billing aktiviert
+if (!$settingsManager->isBillingEnabled()) {
+    header('Location: /dashboard/');
+    exit;
+}
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+$flashMessage = null;
+$flashType = 'info';
+
+$stripe = new StripeService();
+$subscriptions = new SubscriptionManager();
+
+// Aktuelle Subscription
+$currentSub = null;
+$plans = [];
+$invoices = [];
+$trialDays = 0;
+
+try {
+    $currentSub = $subscriptions->getSubscription($tenantId);
+    $plans = $subscriptions->getPlans();
+    $invoices = $subscriptions->getInvoices($tenantId, 5);
+    $trialDays = $subscriptions->getTrialDaysRemaining($tenantId);
+} catch (\Exception $e) {
+    $flashMessage = 'Fehler beim Laden der Abrechnungsdaten';
+    $flashType = 'error';
+}
+
+// Checkout starten
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['plan_id'])) {
+    $planId = (int)$_POST['plan_id'];
+    $plan = $subscriptions->getPlan($planId);
+
+    if ($plan && !empty($plan['stripe_price_id'])) {
+        $baseUrl = (isset($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'];
+        $session = $stripe->createCheckoutSession(
+            $tenantId,
+            $plan['stripe_price_id'],
+            $baseUrl . '/dashboard/billing.php?success=1',
+            $baseUrl . '/dashboard/billing.php?canceled=1'
+        );
+
+        if ($session && isset($session['url'])) {
+            header('Location: ' . $session['url']);
+            exit;
+        } else {
+            $flashMessage = 'Fehler beim Erstellen der Checkout-Session';
+            $flashType = 'error';
+        }
+    }
+}
+
+// Billing Portal öffnen
+if (isset($_GET['portal'])) {
+    $baseUrl = (isset($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'];
+    $session = $stripe->createPortalSession($tenantId, $baseUrl . '/dashboard/billing.php');
+
+    if ($session && isset($session['url'])) {
+        header('Location: ' . $session['url']);
+        exit;
+    }
+}
+
+// Success/Cancel Messages
+if (isset($_GET['success'])) {
+    $flashMessage = 'Zahlung erfolgreich! Ihr Abo ist jetzt aktiv.';
+    $flashType = 'success';
+}
+if (isset($_GET['canceled'])) {
+    $flashMessage = 'Checkout abgebrochen.';
+    $flashType = 'warning';
+}
+
+$pageTitle = 'Abrechnung';
+$currentPage = 'billing';
+
+ob_start();
+?>
+
+<!-- Aktueller Plan -->
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Aktueller Plan</h3>
+        <?php if ($currentSub): ?>
+        <span class="badge badge-<?php echo $currentSub['status'] === 'active' ? 'success' : ($currentSub['status'] === 'trialing' ? 'warning' : 'danger'); ?>">
+            <?php echo ucfirst($currentSub['status']); ?>
+        </span>
+        <?php endif; ?>
+    </div>
+    <div class="card-body">
+        <?php if ($currentSub): ?>
+        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+            <div>
+                <h2 style="margin: 0; font-size: 1.75rem;"><?php echo htmlspecialchars($currentSub['plan_name'] ?? 'Free'); ?></h2>
+                <?php if ($currentSub['status'] === 'trialing' && $trialDays > 0): ?>
+                <p style="color: var(--warning); margin: 0.5rem 0 0 0;">
+                    Trial endet in <?php echo $trialDays; ?> Tag<?php echo $trialDays !== 1 ? 'en' : ''; ?>
+                </p>
+                <?php elseif ($currentSub['current_period_end']): ?>
+                <p style="color: var(--gray-500); margin: 0.5rem 0 0 0;">
+                    Nächste Abrechnung: <?php echo date('d.m.Y', strtotime($currentSub['current_period_end'])); ?>
+                </p>
+                <?php endif; ?>
+            </div>
+            <?php if ($stripe->isConfigured() && !empty($currentSub['stripe_customer_id'])): ?>
+            <a href="?portal=1" class="btn btn-secondary">
+                Abo verwalten
+            </a>
+            <?php endif; ?>
+        </div>
+
+        <?php if (!empty($currentSub['plan_features'])): ?>
+        <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200);">
+            <h4 style="font-size: 0.875rem; color: var(--gray-500); margin-bottom: 0.75rem;">Enthaltene Features:</h4>
+            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+                <?php foreach ($currentSub['plan_features'] as $feature => $value): ?>
+                <?php if ($value): ?>
+                <span class="badge badge-info">
+                    <?php
+                    $labels = [
+                        'max_viewers' => 'Max. Zuschauer: ' . ($value === -1 ? '∞' : $value),
+                        'storage_gb' => 'Speicher: ' . $value . ' GB',
+                        'custom_domain' => 'Custom Domain',
+                        'weather_widget' => 'Wetter-Widget',
+                        'timelapse' => 'Timelapse',
+                        'analytics' => 'Analytics',
+                        'branding' => 'Custom Branding',
+                        'priority_support' => 'Priority Support',
+                    ];
+                    echo $labels[$feature] ?? ucfirst(str_replace('_', ' ', $feature));
+                    ?>
+                </span>
+                <?php endif; ?>
+                <?php endforeach; ?>
+            </div>
+        </div>
+        <?php endif; ?>
+        <?php else: ?>
+        <p style="color: var(--gray-500);">Kein aktives Abo</p>
+        <?php endif; ?>
+    </div>
+</div>
+
+<!-- Verfügbare Pläne -->
+<?php if (!empty($plans)): ?>
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Verfügbare Pläne</h3>
+    </div>
+    <div class="card-body">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+            <?php foreach ($plans as $plan): ?>
+            <?php $isCurrent = $currentSub && $currentSub['plan_id'] == $plan['id']; ?>
+            <div style="border: 2px solid <?php echo $isCurrent ? 'var(--primary)' : 'var(--gray-200)'; ?>; border-radius: 0.75rem; padding: 1.5rem; <?php echo $isCurrent ? 'background: rgba(102,126,234,0.05);' : ''; ?>">
+                <h4 style="margin: 0 0 0.5rem 0;"><?php echo htmlspecialchars($plan['name']); ?></h4>
+                <div style="font-size: 2rem; font-weight: 700; color: var(--gray-900);">
+                    <?php if ($plan['price_monthly'] > 0): ?>
+                    CHF <?php echo number_format($plan['price_monthly'], 0); ?>
+                    <span style="font-size: 1rem; font-weight: 400; color: var(--gray-500);">/Monat</span>
+                    <?php else: ?>
+                    Kostenlos
+                    <?php endif; ?>
+                </div>
+
+                <?php if (!empty($plan['features'])): ?>
+                <ul style="list-style: none; padding: 0; margin: 1rem 0; font-size: 0.875rem;">
+                    <?php foreach ($plan['features'] as $feature => $value): ?>
+                    <?php if ($value): ?>
+                    <li style="padding: 0.25rem 0; color: var(--gray-600);">
+                        ✓ <?php
+                        $labels = [
+                            'max_viewers' => 'Bis ' . ($value === -1 ? 'unbegrenzt' : $value) . ' Zuschauer',
+                            'storage_gb' => $value . ' GB Speicher',
+                            'custom_domain' => 'Eigene Domain',
+                            'weather_widget' => 'Wetter-Widget',
+                            'timelapse' => 'Timelapse',
+                            'analytics' => 'Analytics',
+                            'branding' => 'Custom Branding',
+                            'priority_support' => 'Priority Support',
+                        ];
+                        echo $labels[$feature] ?? ucfirst(str_replace('_', ' ', $feature));
+                        ?>
+                    </li>
+                    <?php endif; ?>
+                    <?php endforeach; ?>
+                </ul>
+                <?php endif; ?>
+
+                <?php if ($isCurrent): ?>
+                <button class="btn btn-secondary" style="width: 100%;" disabled>Aktueller Plan</button>
+                <?php elseif ($plan['price_monthly'] > 0 && $stripe->isConfigured()): ?>
+                <form method="POST" action="">
+                    <input type="hidden" name="plan_id" value="<?php echo $plan['id']; ?>">
+                    <button type="submit" class="btn btn-primary" style="width: 100%;">
+                        Upgrade
+                    </button>
+                </form>
+                <?php elseif ($plan['price_monthly'] == 0): ?>
+                <button class="btn btn-secondary" style="width: 100%;" disabled>Free Plan</button>
+                <?php else: ?>
+                <button class="btn btn-secondary" style="width: 100%;" disabled>Stripe nicht konfiguriert</button>
+                <?php endif; ?>
+            </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</div>
+<?php endif; ?>
+
+<!-- Rechnungen -->
+<?php if (!empty($invoices)): ?>
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Rechnungen</h3>
+    </div>
+    <div class="card-body">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Datum</th>
+                    <th>Betrag</th>
+                    <th>Status</th>
+                    <th>PDF</th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php foreach ($invoices as $invoice): ?>
+                <tr>
+                    <td><?php echo date('d.m.Y', strtotime($invoice['created_at'])); ?></td>
+                    <td><?php echo $invoice['currency']; ?> <?php echo number_format($invoice['amount'], 2); ?></td>
+                    <td>
+                        <span class="badge badge-<?php echo $invoice['status'] === 'paid' ? 'success' : 'warning'; ?>">
+                            <?php echo ucfirst($invoice['status']); ?>
+                        </span>
+                    </td>
+                    <td>
+                        <?php if ($invoice['invoice_pdf_url']): ?>
+                        <a href="<?php echo htmlspecialchars($invoice['invoice_pdf_url']); ?>" target="_blank" class="btn btn-sm btn-secondary">
+                            Download
+                        </a>
+                        <?php endif; ?>
+                    </td>
+                </tr>
+                <?php endforeach; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+<?php endif; ?>
+
+<?php if (!$stripe->isConfigured()): ?>
+<div class="alert alert-warning">
+    <strong>Hinweis:</strong> Stripe ist noch nicht konfiguriert. Bitte fügen Sie Ihre Stripe API-Keys in config.php hinzu.
+</div>
+<?php endif; ?>
+
+<?php
+$content = ob_get_clean();
+include __DIR__ . '/templates/layout.php';
@@ -0,0 +1,230 @@
+<?php
+/**
+ * Dashboard - Branding Einstellungen
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Core\Database;
+use AuroraLivecam\Tenant\TenantManager;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+$auth->requireLogin();
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+$flashMessage = null;
+$flashType = 'info';
+
+// Branding-Daten laden
+$branding = [
+    'site_name' => '',
+    'site_name_full' => '',
+    'tagline' => '',
+    'primary_color' => '#667eea',
+    'secondary_color' => '#764ba2',
+    'accent_color' => '#f093fb',
+    'welcome_text_de' => '',
+    'welcome_text_en' => '',
+    'footer_text' => '',
+    'custom_css' => '',
+];
+
+try {
+    $db = Database::getInstance();
+    if ($tenantId > 0) {
+        $tenantManager = new TenantManager($db);
+        $dbBranding = $tenantManager->getBranding($tenantId);
+        if ($dbBranding) {
+            $branding = array_merge($branding, $dbBranding);
+        }
+    }
+} catch (\Exception $e) {
+    // DB nicht verfügbar
+}
+
+// Formular verarbeiten
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $newBranding = [
+        'site_name' => trim($_POST['site_name'] ?? ''),
+        'site_name_full' => trim($_POST['site_name_full'] ?? ''),
+        'tagline' => trim($_POST['tagline'] ?? ''),
+        'primary_color' => $_POST['primary_color'] ?? '#667eea',
+        'secondary_color' => $_POST['secondary_color'] ?? '#764ba2',
+        'accent_color' => $_POST['accent_color'] ?? '#f093fb',
+        'welcome_text_de' => trim($_POST['welcome_text_de'] ?? ''),
+        'welcome_text_en' => trim($_POST['welcome_text_en'] ?? ''),
+        'footer_text' => trim($_POST['footer_text'] ?? ''),
+        'custom_css' => trim($_POST['custom_css'] ?? ''),
+    ];
+
+    try {
+        $db = Database::getInstance();
+        if ($tenantId > 0) {
+            $tenantManager = new TenantManager($db);
+            $tenantManager->updateBranding($tenantId, $newBranding);
+
+            $flashMessage = 'Branding gespeichert!';
+            $flashType = 'success';
+            $branding = array_merge($branding, $newBranding);
+        } else {
+            $flashMessage = 'Branding kann im Legacy-Modus nicht gespeichert werden.';
+            $flashType = 'warning';
+        }
+    } catch (\Exception $e) {
+        $flashMessage = 'Fehler beim Speichern: ' . $e->getMessage();
+        $flashType = 'error';
+    }
+}
+
+$pageTitle = 'Branding';
+$currentPage = 'branding';
+
+ob_start();
+?>
+
+<form method="POST" action="">
+    <div class="grid grid-2">
+        <!-- Grundeinstellungen -->
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Grundeinstellungen</h3>
+            </div>
+            <div class="card-body">
+                <div class="form-group">
+                    <label class="form-label" for="site_name">Site Name (kurz)</label>
+                    <input type="text" id="site_name" name="site_name" class="form-input"
+                           value="<?php echo htmlspecialchars($branding['site_name']); ?>"
+                           placeholder="MeineCam">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="site_name_full">Site Name (vollständig)</label>
+                    <input type="text" id="site_name_full" name="site_name_full" class="form-input"
+                           value="<?php echo htmlspecialchars($branding['site_name_full']); ?>"
+                           placeholder="Meine Wetter Livecam">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="tagline">Tagline / Slogan</label>
+                    <input type="text" id="tagline" name="tagline" class="form-input"
+                           value="<?php echo htmlspecialchars($branding['tagline']); ?>"
+                           placeholder="Ihre Live-Webcam 24/7">
+                </div>
+            </div>
+        </div>
+
+        <!-- Farben -->
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Farben</h3>
+            </div>
+            <div class="card-body">
+                <div class="form-group">
+                    <label class="form-label">Primärfarbe</label>
+                    <div class="color-picker-wrapper">
+                        <input type="color" name="primary_color" class="color-picker"
+                               value="<?php echo htmlspecialchars($branding['primary_color']); ?>">
+                        <span class="color-value"><?php echo htmlspecialchars($branding['primary_color']); ?></span>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">Sekundärfarbe</label>
+                    <div class="color-picker-wrapper">
+                        <input type="color" name="secondary_color" class="color-picker"
+                               value="<?php echo htmlspecialchars($branding['secondary_color']); ?>">
+                        <span class="color-value"><?php echo htmlspecialchars($branding['secondary_color']); ?></span>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">Akzentfarbe</label>
+                    <div class="color-picker-wrapper">
+                        <input type="color" name="accent_color" class="color-picker"
+                               value="<?php echo htmlspecialchars($branding['accent_color']); ?>">
+                        <span class="color-value"><?php echo htmlspecialchars($branding['accent_color']); ?></span>
+                    </div>
+                </div>
+
+                <!-- Vorschau -->
+                <div style="margin-top: 1rem; padding: 1rem; border-radius: 0.5rem;
+                            background: linear-gradient(135deg, <?php echo htmlspecialchars($branding['primary_color']); ?> 0%, <?php echo htmlspecialchars($branding['secondary_color']); ?> 100%);">
+                    <span style="color: white; font-weight: bold;">Farbvorschau</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Texte -->
+    <div class="card">
+        <div class="card-header">
+            <h3 class="card-title">Willkommenstexte</h3>
+        </div>
+        <div class="card-body">
+            <div class="grid grid-2">
+                <div class="form-group">
+                    <label class="form-label" for="welcome_text_de">Willkommenstext (Deutsch)</label>
+                    <textarea id="welcome_text_de" name="welcome_text_de" class="form-textarea"
+                              placeholder="Willkommen bei unserer Livecam..."><?php echo htmlspecialchars($branding['welcome_text_de']); ?></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="welcome_text_en">Welcome Text (English)</label>
+                    <textarea id="welcome_text_en" name="welcome_text_en" class="form-textarea"
+                              placeholder="Welcome to our livecam..."><?php echo htmlspecialchars($branding['welcome_text_en']); ?></textarea>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label class="form-label" for="footer_text">Footer Text</label>
+                <input type="text" id="footer_text" name="footer_text" class="form-input"
+                       value="<?php echo htmlspecialchars($branding['footer_text']); ?>"
+                       placeholder="© 2024 Ihre Livecam">
+            </div>
+        </div>
+    </div>
+
+    <!-- Custom CSS -->
+    <div class="card">
+        <div class="card-header">
+            <h3 class="card-title">Eigenes CSS</h3>
+        </div>
+        <div class="card-body">
+            <div class="form-group">
+                <label class="form-label" for="custom_css">Custom CSS (optional)</label>
+                <textarea id="custom_css" name="custom_css" class="form-textarea"
+                          style="font-family: monospace; min-height: 150px;"
+                          placeholder="/* Eigene CSS-Regeln hier */"><?php echo htmlspecialchars($branding['custom_css']); ?></textarea>
+                <p class="form-help">Fortgeschrittene Benutzer können hier eigene CSS-Regeln hinzufügen.</p>
+            </div>
+        </div>
+    </div>
+
+    <div style="margin-top: 1.5rem;">
+        <button type="submit" class="btn btn-primary">
+            Branding speichern
+        </button>
+    </div>
+</form>
+
+<script>
+// Color picker update
+document.querySelectorAll('.color-picker').forEach(picker => {
+    picker.addEventListener('input', (e) => {
+        e.target.parentNode.querySelector('.color-value').textContent = e.target.value;
+    });
+});
+</script>
+
+<?php
+$content = ob_get_clean();
+include __DIR__ . '/templates/layout.php';
@@ -0,0 +1,147 @@
+<?php
+/**
+ * Dashboard - Übersicht
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Core\Database;
+use AuroraLivecam\Core\TenantResolver;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+
+// Login erforderlich
+$auth->requireLogin();
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+// Stats laden
+$stats = [
+    'viewers_current' => 0,
+    'viewers_today' => 0,
+    'viewers_peak' => 0,
+    'stream_status' => 'unknown',
+];
+
+// Versuche Stats aus DB zu laden
+try {
+    $db = Database::getInstance();
+
+    if ($tenantId > 0) {
+        // Aktuelle Zuschauer (vereinfacht)
+        $viewerFile = dirname(__DIR__) . '/active_viewers.json';
+        if (file_exists($viewerFile)) {
+            $viewers = json_decode(file_get_contents($viewerFile), true);
+            $stats['viewers_current'] = count($viewers ?? []);
+        }
+
+        // Heute Stats
+        $todayStats = $db->fetchOne(
+            "SELECT SUM(viewer_count) as total, MAX(viewer_count) as peak
+             FROM viewer_stats
+             WHERE tenant_id = ? AND DATE(recorded_at) = CURDATE()",
+            [$tenantId]
+        );
+
+        if ($todayStats) {
+            $stats['viewers_today'] = $todayStats['total'] ?? 0;
+            $stats['viewers_peak'] = $todayStats['peak'] ?? 0;
+        }
+
+        // Stream Status
+        $stream = $db->fetchOne(
+            "SELECT last_status FROM tenant_streams WHERE tenant_id = ? AND is_primary = 1",
+            [$tenantId]
+        );
+        $stats['stream_status'] = $stream['last_status'] ?? 'unknown';
+    }
+} catch (\Exception $e) {
+    // DB nicht verfügbar - Legacy-Modus
+    $viewerFile = dirname(__DIR__) . '/active_viewers.json';
+    if (file_exists($viewerFile)) {
+        $viewers = json_decode(file_get_contents($viewerFile), true);
+        $stats['viewers_current'] = count($viewers ?? []);
+    }
+}
+
+// Page Setup
+$pageTitle = 'Übersicht';
+$currentPage = 'overview';
+
+ob_start();
+?>
+
+<!-- Stats Grid -->
+<div class="stats-grid">
+    <div class="stat-card">
+        <div class="stat-icon">👥</div>
+        <div class="stat-value"><?php echo $stats['viewers_current']; ?></div>
+        <div class="stat-label">Aktuelle Zuschauer</div>
+    </div>
+
+    <div class="stat-card">
+        <div class="stat-icon">📊</div>
+        <div class="stat-value"><?php echo $stats['viewers_today']; ?></div>
+        <div class="stat-label">Zuschauer heute</div>
+    </div>
+
+    <div class="stat-card">
+        <div class="stat-icon">🏆</div>
+        <div class="stat-value"><?php echo $stats['viewers_peak']; ?></div>
+        <div class="stat-label">Peak heute</div>
+    </div>
+
+    <div class="stat-card">
+        <div class="stat-icon">
+            <?php echo $stats['stream_status'] === 'online' ? '🟢' : ($stats['stream_status'] === 'offline' ? '🔴' : '⚪'); ?>
+        </div>
+        <div class="stat-value" style="font-size: 1.25rem; text-transform: capitalize;">
+            <?php echo $stats['stream_status'] === 'online' ? 'Online' : ($stats['stream_status'] === 'offline' ? 'Offline' : 'Unbekannt'); ?>
+        </div>
+        <div class="stat-label">Stream Status</div>
+    </div>
+</div>
+
+<!-- Quick Actions -->
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Schnellzugriff</h3>
+    </div>
+    <div class="card-body">
+        <div class="grid grid-3">
+            <a href="/dashboard/stream.php" class="btn btn-secondary">
+                📹 Stream bearbeiten
+            </a>
+            <a href="/dashboard/branding.php" class="btn btn-secondary">
+                🎨 Branding anpassen
+            </a>
+            <a href="/dashboard/settings.php" class="btn btn-secondary">
+                ⚙️ Einstellungen
+            </a>
+        </div>
+    </div>
+</div>
+
+<!-- Recent Activity (Platzhalter) -->
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Letzte Aktivitäten</h3>
+    </div>
+    <div class="card-body">
+        <p style="color: var(--gray-500); text-align: center; padding: 2rem;">
+            Aktivitäten werden hier angezeigt, sobald Analytics aktiviert ist.
+        </p>
+    </div>
+</div>
+
+<?php
+$content = ob_get_clean();
+include __DIR__ . '/templates/layout.php';
@@ -0,0 +1,102 @@
+<?php
+/**
+ * Dashboard Login
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+
+$settingsManager = new SettingsManager();
+
+// Prüfe ob Dashboard aktiviert ist
+if (!$settingsManager->isTenantDashboardEnabled() && !$settingsManager->isMultiTenantEnabled()) {
+    // Fallback auf Legacy-Admin
+    header('Location: /?admin=1');
+    exit;
+}
+
+$auth = new AuthManager();
+
+// Bereits eingeloggt?
+if ($auth->isLoggedIn()) {
+    header('Location: /dashboard/');
+    exit;
+}
+
+$error = '';
+
+// Login verarbeiten
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $email = $_POST['email'] ?? '';
+    $password = $_POST['password'] ?? '';
+    $remember = isset($_POST['remember']);
+
+    if ($auth->login($email, $password, $remember)) {
+        header('Location: /dashboard/');
+        exit;
+    } else {
+        $error = 'Ungültige Anmeldedaten';
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Dashboard</title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-box">
+            <div class="login-title">
+                <h1>Dashboard Login</h1>
+                <p>Melden Sie sich an, um fortzufahren</p>
+            </div>
+
+            <?php if ($error): ?>
+            <div class="alert alert-error"><?php echo htmlspecialchars($error); ?></div>
+            <?php endif; ?>
+
+            <form method="POST" action="">
+                <div class="form-group">
+                    <label class="form-label" for="email">E-Mail / Benutzername</label>
+                    <input type="text" id="email" name="email" class="form-input"
+                           value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>"
+                           required autofocus>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="password">Passwort</label>
+                    <input type="password" id="password" name="password" class="form-input" required>
+                </div>
+
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="remember">
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>Angemeldet bleiben</span>
+                    </label>
+                </div>
+
+                <button type="submit" class="btn btn-primary" style="width: 100%;">
+                    Anmelden
+                </button>
+            </form>
+
+            <p style="text-align: center; margin-top: 1.5rem; color: var(--gray-500);">
+                <a href="/" style="color: var(--primary);">Zurück zur Livecam</a>
+            </p>
+        </div>
+    </div>
+</body>
+</html>
@@ -0,0 +1,18 @@
+<?php
+/**
+ * Dashboard Logout
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+
+$auth = new AuthManager();
+$auth->logout();
+
+header('Location: /dashboard/login.php');
+exit;
@@ -0,0 +1,271 @@
+<?php
+/**
+ * Dashboard - Einstellungen
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Tenant\TenantSettingsManager;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+$auth->requireLogin();
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+$flashMessage = null;
+$flashType = 'info';
+
+// Tenant-Settings laden
+try {
+    $tenantSettings = new TenantSettingsManager($tenantId);
+} catch (\Exception $e) {
+    $tenantSettings = null;
+}
+
+// Einstellungen für das Template
+$settings = [
+    'viewer_display_enabled' => $settingsManager->get('viewer_display.enabled') ?? true,
+    'viewer_min' => $settingsManager->get('viewer_display.min_viewers') ?? 1,
+    'weather_enabled' => $settingsManager->get('weather.enabled') ?? true,
+    'weather_location' => $settingsManager->get('weather.location') ?? 'Zürich,CH',
+    'weather_lat' => $settingsManager->get('weather.lat') ?? '47.3769',
+    'weather_lon' => $settingsManager->get('weather.lon') ?? '8.5417',
+    'guestbook_enabled' => $settingsManager->get('content.guestbook_enabled') ?? true,
+    'gallery_enabled' => $settingsManager->get('content.gallery_enabled') ?? true,
+    'ai_events_enabled' => $settingsManager->get('content.ai_events_enabled') ?? true,
+    'show_qr_code' => $settingsManager->get('ui_display.show_qr_code') ?? true,
+    'show_social_media' => $settingsManager->get('ui_display.show_social_media') ?? true,
+    'timelapse_reverse' => $settingsManager->get('zoom_timelapse.timelapse_reverse_enabled') ?? true,
+    'max_zoom' => $settingsManager->get('zoom_timelapse.max_zoom_level') ?? 4.0,
+];
+
+// Formular verarbeiten
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $updates = [
+        'viewer_display.enabled' => isset($_POST['viewer_display_enabled']),
+        'viewer_display.min_viewers' => (int)($_POST['viewer_min'] ?? 1),
+        'weather.enabled' => isset($_POST['weather_enabled']),
+        'weather.location' => trim($_POST['weather_location'] ?? ''),
+        'weather.lat' => trim($_POST['weather_lat'] ?? ''),
+        'weather.lon' => trim($_POST['weather_lon'] ?? ''),
+        'content.guestbook_enabled' => isset($_POST['guestbook_enabled']),
+        'content.gallery_enabled' => isset($_POST['gallery_enabled']),
+        'content.ai_events_enabled' => isset($_POST['ai_events_enabled']),
+        'ui_display.show_qr_code' => isset($_POST['show_qr_code']),
+        'ui_display.show_social_media' => isset($_POST['show_social_media']),
+        'zoom_timelapse.timelapse_reverse_enabled' => isset($_POST['timelapse_reverse']),
+        'zoom_timelapse.max_zoom_level' => (float)($_POST['max_zoom'] ?? 4.0),
+    ];
+
+    $success = true;
+    foreach ($updates as $key => $value) {
+        if (!$settingsManager->set($key, $value)) {
+            $success = false;
+        }
+    }
+
+    if ($success) {
+        $flashMessage = 'Einstellungen gespeichert!';
+        $flashType = 'success';
+
+        // Reload settings
+        $settings = [
+            'viewer_display_enabled' => $updates['viewer_display.enabled'],
+            'viewer_min' => $updates['viewer_display.min_viewers'],
+            'weather_enabled' => $updates['weather.enabled'],
+            'weather_location' => $updates['weather.location'],
+            'weather_lat' => $updates['weather.lat'],
+            'weather_lon' => $updates['weather.lon'],
+            'guestbook_enabled' => $updates['content.guestbook_enabled'],
+            'gallery_enabled' => $updates['content.gallery_enabled'],
+            'ai_events_enabled' => $updates['content.ai_events_enabled'],
+            'show_qr_code' => $updates['ui_display.show_qr_code'],
+            'show_social_media' => $updates['ui_display.show_social_media'],
+            'timelapse_reverse' => $updates['zoom_timelapse.timelapse_reverse_enabled'],
+            'max_zoom' => $updates['zoom_timelapse.max_zoom_level'],
+        ];
+    } else {
+        $flashMessage = 'Fehler beim Speichern einiger Einstellungen.';
+        $flashType = 'error';
+    }
+}
+
+$pageTitle = 'Einstellungen';
+$currentPage = 'settings';
+
+ob_start();
+?>
+
+<form method="POST" action="">
+    <div class="grid grid-2">
+        <!-- Viewer-Anzeige -->
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Zuschauer-Anzeige</h3>
+            </div>
+            <div class="card-body">
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="viewer_display_enabled"
+                                   <?php echo $settings['viewer_display_enabled'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>Zuschauer-Anzahl anzeigen</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="viewer_min">Mindestanzahl für Anzeige</label>
+                    <input type="number" id="viewer_min" name="viewer_min" class="form-input"
+                           value="<?php echo (int)$settings['viewer_min']; ?>" min="0" max="100">
+                    <p class="form-help">Zuschauer werden erst ab dieser Anzahl angezeigt</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Wetter-Widget -->
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Wetter-Widget</h3>
+            </div>
+            <div class="card-body">
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="weather_enabled"
+                                   <?php echo $settings['weather_enabled'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>Wetter-Widget aktivieren</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="weather_location">Standort-Name</label>
+                    <input type="text" id="weather_location" name="weather_location" class="form-input"
+                           value="<?php echo htmlspecialchars($settings['weather_location']); ?>">
+                </div>
+
+                <div class="grid grid-2">
+                    <div class="form-group">
+                        <label class="form-label" for="weather_lat">Breitengrad</label>
+                        <input type="text" id="weather_lat" name="weather_lat" class="form-input"
+                               value="<?php echo htmlspecialchars($settings['weather_lat']); ?>">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="weather_lon">Längengrad</label>
+                        <input type="text" id="weather_lon" name="weather_lon" class="form-input"
+                               value="<?php echo htmlspecialchars($settings['weather_lon']); ?>">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Content -->
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Inhalte</h3>
+            </div>
+            <div class="card-body">
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="guestbook_enabled"
+                                   <?php echo $settings['guestbook_enabled'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>Gästebuch aktivieren</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="gallery_enabled"
+                                   <?php echo $settings['gallery_enabled'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>Galerie aktivieren</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="ai_events_enabled"
+                                   <?php echo $settings['ai_events_enabled'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>AI-Events aktivieren</span>
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <!-- UI -->
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Oberfläche</h3>
+            </div>
+            <div class="card-body">
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="show_qr_code"
+                                   <?php echo $settings['show_qr_code'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>QR-Code anzeigen</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="show_social_media"
+                                   <?php echo $settings['show_social_media'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>Social Media Links anzeigen</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <span class="toggle">
+                            <input type="checkbox" name="timelapse_reverse"
+                                   <?php echo $settings['timelapse_reverse'] ? 'checked' : ''; ?>>
+                            <span class="toggle-slider"></span>
+                        </span>
+                        <span>Timelapse Rückwärts erlauben</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="max_zoom">Maximaler Zoom</label>
+                    <input type="number" id="max_zoom" name="max_zoom" class="form-input"
+                           value="<?php echo (float)$settings['max_zoom']; ?>" min="1" max="10" step="0.5">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div style="margin-top: 1.5rem;">
+        <button type="submit" class="btn btn-primary">
+            Einstellungen speichern
+        </button>
+    </div>
+</form>
+
+<?php
+$content = ob_get_clean();
+include __DIR__ . '/templates/layout.php';
@@ -0,0 +1,183 @@
+<?php
+/**
+ * Dashboard - Stream Einstellungen
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Core\Database;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+$auth->requireLogin();
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+$flashMessage = null;
+$flashType = 'info';
+
+// Stream-Daten laden
+$stream = [
+    'stream_url' => '',
+    'stream_type' => 'hls',
+    'is_active' => true,
+    'last_status' => 'unknown',
+];
+
+try {
+    $db = Database::getInstance();
+    if ($tenantId > 0) {
+        $dbStream = $db->fetchOne(
+            "SELECT * FROM tenant_streams WHERE tenant_id = ? AND is_primary = 1",
+            [$tenantId]
+        );
+        if ($dbStream) {
+            $stream = $dbStream;
+        }
+    }
+} catch (\Exception $e) {
+    // DB nicht verfügbar
+}
+
+// Formular verarbeiten
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $streamUrl = trim($_POST['stream_url'] ?? '');
+    $streamType = $_POST['stream_type'] ?? 'hls';
+
+    if (empty($streamUrl)) {
+        $flashMessage = 'Bitte geben Sie eine Stream-URL ein.';
+        $flashType = 'error';
+    } else {
+        try {
+            $db = Database::getInstance();
+
+            if ($tenantId > 0) {
+                // Prüfe ob Stream existiert
+                $existing = $db->fetchOne(
+                    "SELECT id FROM tenant_streams WHERE tenant_id = ? AND is_primary = 1",
+                    [$tenantId]
+                );
+
+                if ($existing) {
+                    $db->update('tenant_streams', [
+                        'stream_url' => $streamUrl,
+                        'stream_type' => $streamType,
+                    ], 'id = ?', [$existing['id']]);
+                } else {
+                    $db->insert('tenant_streams', [
+                        'tenant_id' => $tenantId,
+                        'stream_url' => $streamUrl,
+                        'stream_type' => $streamType,
+                        'is_primary' => 1,
+                    ]);
+                }
+
+                $flashMessage = 'Stream-Einstellungen gespeichert!';
+                $flashType = 'success';
+
+                // Reload stream data
+                $stream['stream_url'] = $streamUrl;
+                $stream['stream_type'] = $streamType;
+            } else {
+                $flashMessage = 'Stream-Einstellungen können im Legacy-Modus nicht gespeichert werden.';
+                $flashType = 'warning';
+            }
+        } catch (\Exception $e) {
+            $flashMessage = 'Fehler beim Speichern: ' . $e->getMessage();
+            $flashType = 'error';
+        }
+    }
+}
+
+$pageTitle = 'Stream Einstellungen';
+$currentPage = 'stream';
+
+ob_start();
+?>
+
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Stream Konfiguration</h3>
+        <span class="badge badge-<?php echo $stream['last_status'] === 'online' ? 'success' : ($stream['last_status'] === 'offline' ? 'danger' : 'info'); ?>">
+            <?php echo ucfirst($stream['last_status'] ?? 'Unbekannt'); ?>
+        </span>
+    </div>
+    <div class="card-body">
+        <form method="POST" action="">
+            <div class="form-group">
+                <label class="form-label" for="stream_url">Stream URL</label>
+                <input type="url" id="stream_url" name="stream_url" class="form-input"
+                       value="<?php echo htmlspecialchars($stream['stream_url']); ?>"
+                       placeholder="https://example.com/stream.m3u8">
+                <p class="form-help">Die URL zu Ihrem HLS-Stream (.m3u8) oder RTMP-Stream</p>
+            </div>
+
+            <div class="form-group">
+                <label class="form-label" for="stream_type">Stream Typ</label>
+                <select id="stream_type" name="stream_type" class="form-select">
+                    <option value="hls" <?php echo ($stream['stream_type'] ?? 'hls') === 'hls' ? 'selected' : ''; ?>>
+                        HLS (.m3u8)
+                    </option>
+                    <option value="rtmp" <?php echo ($stream['stream_type'] ?? '') === 'rtmp' ? 'selected' : ''; ?>>
+                        RTMP
+                    </option>
+                    <option value="webrtc" <?php echo ($stream['stream_type'] ?? '') === 'webrtc' ? 'selected' : ''; ?>>
+                        WebRTC
+                    </option>
+                    <option value="iframe" <?php echo ($stream['stream_type'] ?? '') === 'iframe' ? 'selected' : ''; ?>>
+                        iFrame Embed
+                    </option>
+                </select>
+            </div>
+
+            <button type="submit" class="btn btn-primary">
+                Speichern
+            </button>
+        </form>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Stream Vorschau</h3>
+    </div>
+    <div class="card-body">
+        <?php if (!empty($stream['stream_url'])): ?>
+        <div style="aspect-ratio: 16/9; background: #000; border-radius: 0.5rem; overflow: hidden;">
+            <video id="preview-player" controls style="width: 100%; height: 100%;">
+                <source src="<?php echo htmlspecialchars($stream['stream_url']); ?>" type="application/x-mpegURL">
+            </video>
+        </div>
+        <p class="form-help" style="margin-top: 1rem;">
+            Hinweis: Die Vorschau funktioniert nur mit HLS-Streams und wenn Ihr Browser HLS unterstützt.
+        </p>
+        <?php else: ?>
+        <div class="preview-box">
+            <p>Keine Stream-URL konfiguriert</p>
+        </div>
+        <?php endif; ?>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Stream Monitoring</h3>
+    </div>
+    <div class="card-body">
+        <p style="color: var(--gray-500);">
+            Stream-Monitoring zeigt automatische Verfügbarkeitsprüfungen an.
+            Diese Funktion wird demnächst verfügbar sein.
+        </p>
+    </div>
+</div>
+
+<?php
+$content = ob_get_clean();
+include __DIR__ . '/templates/layout.php';
@@ -0,0 +1,126 @@
+<?php
+/**
+ * Dashboard Layout Template
+ *
+ * Variablen:
+ * - $pageTitle: Seitentitel
+ * - $currentPage: Aktuelle Seite (für Navigation)
+ * - $content: Hauptinhalt
+ */
+
+$user = $auth->getUser();
+$tenantName = $user['tenant_name'] ?? 'Dashboard';
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php echo htmlspecialchars($pageTitle ?? 'Dashboard'); ?> - <?php echo htmlspecialchars($tenantName); ?></title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h2><?php echo htmlspecialchars($tenantName); ?></h2>
+                <span class="role-badge"><?php echo htmlspecialchars($user['role'] ?? 'user'); ?></span>
+            </div>
+
+            <nav class="sidebar-nav">
+                <a href="/dashboard/" class="nav-item <?php echo ($currentPage ?? '') === 'overview' ? 'active' : ''; ?>">
+                    <span class="nav-icon">📊</span>
+                    <span>Übersicht</span>
+                </a>
+
+                <a href="/dashboard/stream.php" class="nav-item <?php echo ($currentPage ?? '') === 'stream' ? 'active' : ''; ?>">
+                    <span class="nav-icon">📹</span>
+                    <span>Stream</span>
+                </a>
+
+                <a href="/dashboard/branding.php" class="nav-item <?php echo ($currentPage ?? '') === 'branding' ? 'active' : ''; ?>">
+                    <span class="nav-icon">🎨</span>
+                    <span>Branding</span>
+                </a>
+
+                <a href="/dashboard/settings.php" class="nav-item <?php echo ($currentPage ?? '') === 'settings' ? 'active' : ''; ?>">
+                    <span class="nav-icon">⚙️</span>
+                    <span>Einstellungen</span>
+                </a>
+
+                <?php if ($settingsManager->isAnalyticsEnabled()): ?>
+                <a href="/dashboard/analytics.php" class="nav-item <?php echo ($currentPage ?? '') === 'analytics' ? 'active' : ''; ?>">
+                    <span class="nav-icon">📈</span>
+                    <span>Analytics</span>
+                </a>
+                <?php endif; ?>
+
+                <?php if ($settingsManager->isCustomDomainEnabled()): ?>
+                <a href="/dashboard/domains.php" class="nav-item <?php echo ($currentPage ?? '') === 'domains' ? 'active' : ''; ?>">
+                    <span class="nav-icon">🌐</span>
+                    <span>Domains</span>
+                </a>
+                <?php endif; ?>
+
+                <?php if ($settingsManager->isBillingEnabled()): ?>
+                <a href="/dashboard/billing.php" class="nav-item <?php echo ($currentPage ?? '') === 'billing' ? 'active' : ''; ?>">
+                    <span class="nav-icon">💳</span>
+                    <span>Abrechnung</span>
+                </a>
+                <?php endif; ?>
+
+                <?php if ($auth->isSuperAdmin()): ?>
+                <div class="nav-divider"></div>
+                <span class="nav-label">Admin</span>
+
+                <a href="/dashboard/admin/tenants.php" class="nav-item <?php echo ($currentPage ?? '') === 'admin-tenants' ? 'active' : ''; ?>">
+                    <span class="nav-icon">👥</span>
+                    <span>Kunden</span>
+                </a>
+
+                <a href="/dashboard/admin/plans.php" class="nav-item <?php echo ($currentPage ?? '') === 'admin-plans' ? 'active' : ''; ?>">
+                    <span class="nav-icon">📋</span>
+                    <span>Pläne</span>
+                </a>
+                <?php endif; ?>
+            </nav>
+
+            <div class="sidebar-footer">
+                <a href="/" class="nav-item" target="_blank">
+                    <span class="nav-icon">🔗</span>
+                    <span>Zur Livecam</span>
+                </a>
+                <a href="/dashboard/logout.php" class="nav-item logout">
+                    <span class="nav-icon">🚪</span>
+                    <span>Abmelden</span>
+                </a>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <header class="main-header">
+                <h1><?php echo htmlspecialchars($pageTitle ?? 'Dashboard'); ?></h1>
+                <div class="header-actions">
+                    <span class="user-info">
+                        <?php echo htmlspecialchars($user['email'] ?? ''); ?>
+                    </span>
+                </div>
+            </header>
+
+            <div class="content-wrapper">
+                <?php if (isset($flashMessage)): ?>
+                <div class="alert alert-<?php echo $flashType ?? 'info'; ?>">
+                    <?php echo htmlspecialchars($flashMessage); ?>
+                </div>
+                <?php endif; ?>
+
+                <?php echo $content ?? ''; ?>
+            </div>
+        </main>
+    </div>
+
+    <script src="/dashboard/assets/dashboard.js"></script>
+</body>
+</html>
@@ -0,0 +1,205 @@
+-- Aurora Livecam - Multi-Tenant SaaS Schema
+-- Version: 1.0.0
+
+SET NAMES utf8mb4;
+SET FOREIGN_KEY_CHECKS = 0;
+
+-- --------------------------------------------------------
+-- Subscription Plans
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `plans` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `name` VARCHAR(100) NOT NULL,
+    `slug` VARCHAR(50) UNIQUE NOT NULL,
+    `stripe_price_id` VARCHAR(100) NULL,
+    `price_monthly` DECIMAL(10,2) DEFAULT 0.00,
+    `price_yearly` DECIMAL(10,2) DEFAULT 0.00,
+    `features` JSON NULL COMMENT '{"max_viewers": 100, "storage_gb": 5, "custom_domain": true}',
+    `is_active` TINYINT(1) DEFAULT 1,
+    `sort_order` INT DEFAULT 0,
+    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Default Plans
+INSERT INTO `plans` (`name`, `slug`, `price_monthly`, `price_yearly`, `features`, `sort_order`) VALUES
+('Free', 'free', 0.00, 0.00, '{"max_viewers": 10, "storage_gb": 0.5, "custom_domain": false, "weather_widget": true, "timelapse": false, "analytics": false, "branding": false}', 1),
+('Basic', 'basic', 19.00, 190.00, '{"max_viewers": 50, "storage_gb": 5, "custom_domain": false, "weather_widget": true, "timelapse": true, "analytics": true, "branding": false}', 2),
+('Professional', 'professional', 49.00, 490.00, '{"max_viewers": 200, "storage_gb": 20, "custom_domain": true, "weather_widget": true, "timelapse": true, "analytics": true, "branding": true}', 3),
+('Enterprise', 'enterprise', 149.00, 1490.00, '{"max_viewers": -1, "storage_gb": 100, "custom_domain": true, "weather_widget": true, "timelapse": true, "analytics": true, "branding": true, "priority_support": true}', 4);
+
+-- --------------------------------------------------------
+-- Tenants (Customers)
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `tenants` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `uuid` VARCHAR(36) UNIQUE NOT NULL,
+    `name` VARCHAR(255) NOT NULL,
+    `slug` VARCHAR(100) UNIQUE NOT NULL COMMENT 'URL-safe identifier, e.g. aurora, seecam',
+    `email` VARCHAR(255) NOT NULL,
+    `status` ENUM('trial', 'active', 'suspended', 'cancelled') DEFAULT 'trial',
+    `plan_id` INT UNSIGNED NULL,
+    `trial_ends_at` TIMESTAMP NULL,
+    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    FOREIGN KEY (`plan_id`) REFERENCES `plans`(`id`) ON DELETE SET NULL,
+    INDEX `idx_status` (`status`),
+    INDEX `idx_slug` (`slug`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Tenant Domains
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `tenant_domains` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `tenant_id` INT UNSIGNED NOT NULL,
+    `domain` VARCHAR(255) UNIQUE NOT NULL,
+    `is_primary` TINYINT(1) DEFAULT 0,
+    `ssl_status` ENUM('pending', 'active', 'failed') DEFAULT 'pending',
+    `verified_at` TIMESTAMP NULL,
+    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE,
+    INDEX `idx_domain` (`domain`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Tenant Settings (replaces settings.json per tenant)
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `tenant_settings` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `tenant_id` INT UNSIGNED NOT NULL,
+    `setting_key` VARCHAR(255) NOT NULL,
+    `setting_value` TEXT NULL,
+    `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    UNIQUE KEY `uk_tenant_key` (`tenant_id`, `setting_key`),
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Tenant Branding
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `tenant_branding` (
+    `tenant_id` INT UNSIGNED PRIMARY KEY,
+    `site_name` VARCHAR(255) NULL,
+    `site_name_full` VARCHAR(255) NULL,
+    `tagline` VARCHAR(255) NULL,
+    `logo_path` VARCHAR(500) NULL,
+    `favicon_path` VARCHAR(500) NULL,
+    `primary_color` VARCHAR(7) DEFAULT '#667eea',
+    `secondary_color` VARCHAR(7) DEFAULT '#764ba2',
+    `accent_color` VARCHAR(7) DEFAULT '#f093fb',
+    `welcome_text_de` TEXT NULL,
+    `welcome_text_en` TEXT NULL,
+    `footer_text` TEXT NULL,
+    `custom_css` TEXT NULL,
+    `custom_js` TEXT NULL,
+    `social_facebook` VARCHAR(255) NULL,
+    `social_instagram` VARCHAR(255) NULL,
+    `social_youtube` VARCHAR(255) NULL,
+    `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Tenant Streams
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `tenant_streams` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `tenant_id` INT UNSIGNED NOT NULL,
+    `name` VARCHAR(255) DEFAULT 'Main Stream',
+    `stream_url` VARCHAR(500) NOT NULL,
+    `stream_type` ENUM('hls', 'rtmp', 'webrtc', 'iframe') DEFAULT 'hls',
+    `is_active` TINYINT(1) DEFAULT 1,
+    `is_primary` TINYINT(1) DEFAULT 1,
+    `last_check_at` TIMESTAMP NULL,
+    `last_status` ENUM('online', 'offline', 'error') NULL,
+    `error_message` VARCHAR(500) NULL,
+    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Users
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `users` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `tenant_id` INT UNSIGNED NULL COMMENT 'NULL = Super Admin',
+    `email` VARCHAR(255) UNIQUE NOT NULL,
+    `password_hash` VARCHAR(255) NOT NULL,
+    `name` VARCHAR(255) NULL,
+    `role` ENUM('super_admin', 'tenant_admin', 'tenant_user') NOT NULL DEFAULT 'tenant_user',
+    `email_verified_at` TIMESTAMP NULL,
+    `last_login_at` TIMESTAMP NULL,
+    `remember_token` VARCHAR(100) NULL,
+    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE,
+    INDEX `idx_email` (`email`),
+    INDEX `idx_tenant` (`tenant_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Subscriptions
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `subscriptions` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `tenant_id` INT UNSIGNED NOT NULL,
+    `plan_id` INT UNSIGNED NOT NULL,
+    `stripe_subscription_id` VARCHAR(100) NULL,
+    `stripe_customer_id` VARCHAR(100) NULL,
+    `status` ENUM('trialing', 'active', 'past_due', 'canceled', 'unpaid', 'incomplete') DEFAULT 'trialing',
+    `current_period_start` TIMESTAMP NULL,
+    `current_period_end` TIMESTAMP NULL,
+    `canceled_at` TIMESTAMP NULL,
+    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE,
+    FOREIGN KEY (`plan_id`) REFERENCES `plans`(`id`),
+    INDEX `idx_tenant` (`tenant_id`),
+    INDEX `idx_stripe_sub` (`stripe_subscription_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Invoices (Stripe cache)
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `invoices` (
+    `id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `tenant_id` INT UNSIGNED NOT NULL,
+    `stripe_invoice_id` VARCHAR(100) UNIQUE NULL,
+    `amount` DECIMAL(10,2) NOT NULL,
+    `currency` VARCHAR(3) DEFAULT 'CHF',
+    `status` VARCHAR(50) NULL,
+    `paid_at` TIMESTAMP NULL,
+    `invoice_pdf_url` VARCHAR(500) NULL,
+    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Viewer Statistics
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `viewer_stats` (
+    `id` BIGINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `tenant_id` INT UNSIGNED NOT NULL,
+    `recorded_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    `viewer_count` INT DEFAULT 0,
+    `unique_sessions` INT DEFAULT 0,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE,
+    INDEX `idx_tenant_time` (`tenant_id`, `recorded_at`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+-- Onboarding Progress
+-- --------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `tenant_onboarding` (
+    `tenant_id` INT UNSIGNED PRIMARY KEY,
+    `current_step` INT DEFAULT 1,
+    `stream_verified` TINYINT(1) DEFAULT 0,
+    `branding_configured` TINYINT(1) DEFAULT 0,
+    `payment_configured` TINYINT(1) DEFAULT 0,
+    `completed_at` TIMESTAMP NULL,
+    `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    FOREIGN KEY (`tenant_id`) REFERENCES `tenants`(`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+SET FOREIGN_KEY_CHECKS = 1;
@@ -734,8 +734,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>
@@ -743,7 +744,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>
@@ -751,7 +753,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>

@@ -2133,21 +2136,21 @@ body.theme-neo footer {
        </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>
+            <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>
@@ -2157,13 +2160,16 @@ 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="<?php echo $siteConfig['welcomeEn']; ?>" data-de="<?php echo $siteConfig['welcomeDe']; ?>">
+                <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>
@@ -2240,7 +2246,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; ?>

@@ -2249,16 +2255,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>
@@ -2268,7 +2274,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();
@@ -2279,7 +2285,7 @@ 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 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);">
@@ -2298,12 +2304,12 @@ body.theme-neo footer {
 <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">
+            <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">
+        <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>
@@ -2312,7 +2318,7 @@ body.theme-neo footer {
 <!-- GUESTBOOK -->
 <section id="guestbook" class="section">
    <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());
@@ -2323,9 +2329,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(); ?>
@@ -2335,7 +2344,7 @@ body.theme-neo footer {
 <!-- GALLERY -->
 <section id="gallery" class="section">
    <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(); ?>
@@ -2347,15 +2356,21 @@ 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="<?php echo $siteConfig['aboutEn']; ?>"
-                   data-de="<?php echo $siteConfig['aboutDe']; ?>">
+                   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-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>
@@ -2367,14 +2382,14 @@ body.theme-neo footer {
 <?php if ($adminManager->isAdmin()): ?>
 <section id="admin" class="section">
    <div class="container">
-        <h2 data-en="Admin Area" data-de="Admin-Bereich">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 data-en="Admin Login" data-de="Admin Login">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>
@@ -2383,42 +2398,42 @@ body.theme-neo footer {
 <!-- 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">Patrouille Suisse Live - Trainingsflüge Beobachten</h2>
+        <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!">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.">
+                <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">Trainingszeit: ca. 09:00 - 11:00 Uhr</li>
-                    <li data-en="Visible in good weather" data-de="Bei gutem Wetter sichtbar">Bei gutem Wetter sichtbar</li>
-                    <li data-en="Unique perspective from Zurich Oberland" data-de="Einzigartige Perspektive aus dem Zürcher Oberland">Einzigartige Perspektive aus dem Zürcher Oberland</li>
+                    <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">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.">
+                <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">
-                    <strong style="color: #fff;" data-en="Home base:" data-de="Heimatbasis:">Heimatbasis:</strong> Payerne (VD)<br>
-                    <strong style="color: #fff;" data-en="Aircraft:" data-de="Flugzeuge:">Flugzeuge:</strong> 6x F-5E Tiger II<br>
-                    <strong style="color: #fff;" data-en="Team size:" data-de="Teamgrösse:">Teamgrösse:</strong> 6 <span data-en="pilots + crew" data-de="Piloten + Crew">Piloten + Crew</span>
+                <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">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:">
+                <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">Nutzen Sie die Zoom-Funktion unserer Webcam</li>
-                    <li data-en="Timelapse mode for accelerated view" data-de="Timelapse-Modus für beschleunigte Ansicht">Timelapse-Modus für beschleunigte Ansicht</li>
-                    <li data-en="Daily videos to watch later" data-de="Tagesvideos zum Nachschauen">Tagesvideos zum Nachschauen</li>
-                    <li data-en="AI detection marks aircraft sightings" data-de="AI-Erkennung markiert Flugzeug-Sichtungen">AI-Erkennung markiert Flugzeug-Sichtungen</li>
+                    <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.">
+                <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>
@@ -2430,7 +2445,7 @@ body.theme-neo footer {
 <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">Aktuelle Wetter-News, Webcam-Updates und Naturbeobachtungen aus dem Zürcher Oberland</p>
+        <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 -->
@@ -2439,12 +2454,12 @@ body.theme-neo footer {
                    <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">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">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.">
+                    <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.">
+                    <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>
@@ -2456,12 +2471,12 @@ body.theme-neo footer {
                    <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">Alpenpanorama im Winter</h3>
-                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="December 2023" data-de="Dezember 2023">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.">
+                    <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.">
+                    <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>
@@ -2473,12 +2488,12 @@ body.theme-neo footer {
                    <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">Patrouille Suisse Saison 2024</h3>
-                    <p style="color: #666; font-size: 14px; margin-bottom: 15px;" data-en="March 2024" data-de="März 2024">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.">
+                    <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.">
+                    <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>
@@ -2486,7 +2501,7 @@ body.theme-neo footer {
        </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.">
+            <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>
@@ -2496,11 +2511,11 @@ body.theme-neo footer {
 <!-- IMPRESSUM -->
 <section id="impressum" class="section">
    <div class="container">
-        <h2 data-en="Imprint" data-de="Impressum">Impressum</h2>
+        <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>

@@ -0,0 +1,422 @@
+<?php
+/**
+ * Landing Page - Marketing Seite
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+$settingsManager = new SettingsManager();
+
+// Prüfe ob Landing Page aktiviert
+if (!$settingsManager->isLandingPageEnabled()) {
+    header('Location: /');
+    exit;
+}
+
+$trialDays = $settingsManager->getTrialDays();
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aurora Livecam - Ihre Webcam als Service</title>
+    <meta name="description" content="Erstellen Sie Ihre eigene Live-Webcam in wenigen Minuten. Wetter-Widget, Timelapse, Analytics und mehr. Jetzt kostenlos testen!">
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+    <style>
+        :root {
+            --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            color: #1a202c;
+        }
+
+        /* Header */
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(10px);
+            z-index: 100;
+            border-bottom: 1px solid #e2e8f0;
+        }
+
+        .header-inner {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: var(--gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-decoration: none;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            align-items: center;
+        }
+
+        .nav-links a {
+            color: #4a5568;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+
+        .nav-links a:hover {
+            color: #667eea;
+        }
+
+        /* Hero */
+        .hero {
+            padding: 8rem 2rem 6rem;
+            background: var(--gradient);
+            color: white;
+            text-align: center;
+        }
+
+        .hero h1 {
+            font-size: 3rem;
+            font-weight: 800;
+            margin-bottom: 1.5rem;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .hero p {
+            font-size: 1.25rem;
+            opacity: 0.9;
+            max-width: 600px;
+            margin: 0 auto 2rem;
+        }
+
+        .hero-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .btn-hero {
+            padding: 1rem 2rem;
+            border-radius: 0.5rem;
+            font-size: 1.1rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .btn-hero-primary {
+            background: white;
+            color: #667eea;
+        }
+
+        .btn-hero-secondary {
+            background: rgba(255,255,255,0.2);
+            color: white;
+            border: 2px solid rgba(255,255,255,0.5);
+        }
+
+        .btn-hero:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+
+        .trial-badge {
+            display: inline-block;
+            background: rgba(255,255,255,0.2);
+            padding: 0.5rem 1rem;
+            border-radius: 2rem;
+            margin-top: 2rem;
+            font-size: 0.9rem;
+        }
+
+        /* Features */
+        .features {
+            padding: 6rem 2rem;
+            background: #f7fafc;
+        }
+
+        .section-title {
+            text-align: center;
+            margin-bottom: 4rem;
+        }
+
+        .section-title h2 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .section-title p {
+            color: #718096;
+            font-size: 1.1rem;
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .feature-card {
+            background: white;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+
+        .feature-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+
+        .feature-card h3 {
+            font-size: 1.25rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .feature-card p {
+            color: #718096;
+        }
+
+        /* How it works */
+        .how-it-works {
+            padding: 6rem 2rem;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .steps {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 2rem;
+            margin-top: 3rem;
+        }
+
+        .step {
+            text-align: center;
+        }
+
+        .step-number {
+            width: 60px;
+            height: 60px;
+            background: var(--gradient);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin: 0 auto 1rem;
+        }
+
+        .step h4 {
+            margin-bottom: 0.5rem;
+        }
+
+        .step p {
+            color: #718096;
+            font-size: 0.9rem;
+        }
+
+        /* CTA */
+        .cta {
+            padding: 6rem 2rem;
+            background: var(--gradient);
+            color: white;
+            text-align: center;
+        }
+
+        .cta h2 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .cta p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            margin-bottom: 2rem;
+        }
+
+        /* Footer */
+        .footer {
+            background: #1a202c;
+            color: #a0aec0;
+            padding: 3rem 2rem;
+        }
+
+        .footer-inner {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 2rem;
+        }
+
+        .footer-links a {
+            color: #a0aec0;
+            text-decoration: none;
+            margin-right: 1.5rem;
+        }
+
+        .footer-links a:hover {
+            color: white;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .hero h1 { font-size: 2rem; }
+            .nav-links { display: none; }
+            .features-grid { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-inner">
+            <a href="/" class="logo">Aurora Livecam</a>
+            <nav class="nav-links">
+                <a href="#features">Features</a>
+                <a href="/landing/pricing.php">Preise</a>
+                <a href="/dashboard/login.php">Login</a>
+                <a href="/onboarding/register.php" class="btn btn-primary btn-sm">Kostenlos starten</a>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Hero -->
+    <section class="hero">
+        <h1>Ihre Webcam als Service - in 5 Minuten online</h1>
+        <p>Erstellen Sie Ihre eigene Live-Webcam-Website mit Wetter-Widget, Timelapse, Analytics und mehr. Keine Programmierkenntnisse erforderlich.</p>
+        <div class="hero-buttons">
+            <a href="/onboarding/register.php" class="btn-hero btn-hero-primary">
+                Jetzt starten
+            </a>
+            <a href="#features" class="btn-hero btn-hero-secondary">
+                Features ansehen
+            </a>
+        </div>
+        <div class="trial-badge">
+            <?php echo $trialDays; ?> Tage kostenlos testen - Keine Kreditkarte erforderlich
+        </div>
+    </section>
+
+    <!-- Features -->
+    <section class="features" id="features">
+        <div class="section-title">
+            <h2>Alles was Sie brauchen</h2>
+            <p>Professionelle Features für Ihre Live-Webcam</p>
+        </div>
+        <div class="features-grid">
+            <div class="feature-card">
+                <div class="feature-icon">📹</div>
+                <h3>Live-Streaming</h3>
+                <p>HLS, RTMP oder WebRTC - verbinden Sie jeden Stream in Sekunden. Automatische Qualitätsanpassung inklusive.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🌤️</div>
+                <h3>Wetter-Widget</h3>
+                <p>Zeigen Sie Temperatur, Wind, Luftdruck und mehr an. Kostenlose Open-Meteo Integration ohne API-Key.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">⏱️</div>
+                <h3>Timelapse</h3>
+                <p>Automatische Zeitraffer-Erstellung. Scrubben Sie durch den ganzen Tag mit variabler Geschwindigkeit.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🔍</div>
+                <h3>Zoom & Pan</h3>
+                <p>Lassen Sie Besucher in Ihren Stream hineinzoomen. Unterstützt Touch-Gesten und Maus-Steuerung.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">📊</div>
+                <h3>Analytics</h3>
+                <p>Sehen Sie wer Ihre Webcam besucht. Echtzeit-Zuschauerzähler und detaillierte Statistiken.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🎨</div>
+                <h3>Custom Branding</h3>
+                <p>Ihr Logo, Ihre Farben, Ihre Domain. Machen Sie die Webcam zu Ihrer eigenen.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- How it works -->
+    <section class="how-it-works">
+        <div class="section-title">
+            <h2>So einfach geht's</h2>
+            <p>In 3 Schritten zur eigenen Livecam</p>
+        </div>
+        <div class="steps">
+            <div class="step">
+                <div class="step-number">1</div>
+                <h4>Registrieren</h4>
+                <p>Erstellen Sie in 30 Sekunden Ihr kostenloses Konto.</p>
+            </div>
+            <div class="step">
+                <div class="step-number">2</div>
+                <h4>Stream verbinden</h4>
+                <p>Fügen Sie Ihre Stream-URL ein. Wir unterstützen alle gängigen Formate.</p>
+            </div>
+            <div class="step">
+                <div class="step-number">3</div>
+                <h4>Anpassen & Teilen</h4>
+                <p>Personalisieren Sie Ihre Seite und teilen Sie den Link.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="cta">
+        <h2>Bereit loszulegen?</h2>
+        <p><?php echo $trialDays; ?> Tage kostenlos testen - keine Kreditkarte erforderlich</p>
+        <a href="/onboarding/register.php" class="btn-hero btn-hero-primary">
+            Jetzt kostenlos starten
+        </a>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-inner">
+            <div>
+                © <?php echo date('Y'); ?> Aurora Livecam. Alle Rechte vorbehalten.
+            </div>
+            <div class="footer-links">
+                <a href="/terms">AGB</a>
+                <a href="/privacy">Datenschutz</a>
+                <a href="/imprint">Impressum</a>
+                <a href="mailto:support@aurora-livecam.com">Kontakt</a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
@@ -0,0 +1,497 @@
+<?php
+/**
+ * Landing Page - Preise
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Billing\SubscriptionManager;
+
+$settingsManager = new SettingsManager();
+
+// Pläne laden
+$plans = [];
+try {
+    $subscriptions = new SubscriptionManager();
+    $plans = $subscriptions->getPlans();
+} catch (\Exception $e) {
+    // Fallback-Pläne
+    $plans = [
+        ['name' => 'Free', 'slug' => 'free', 'price_monthly' => 0, 'features' => ['max_viewers' => 10, 'weather_widget' => true]],
+        ['name' => 'Basic', 'slug' => 'basic', 'price_monthly' => 19, 'features' => ['max_viewers' => 50, 'weather_widget' => true, 'timelapse' => true, 'analytics' => true]],
+        ['name' => 'Professional', 'slug' => 'professional', 'price_monthly' => 49, 'features' => ['max_viewers' => 200, 'custom_domain' => true, 'weather_widget' => true, 'timelapse' => true, 'analytics' => true, 'branding' => true]],
+        ['name' => 'Enterprise', 'slug' => 'enterprise', 'price_monthly' => 149, 'features' => ['max_viewers' => -1, 'custom_domain' => true, 'weather_widget' => true, 'timelapse' => true, 'analytics' => true, 'branding' => true, 'priority_support' => true]],
+    ];
+}
+
+$trialDays = $settingsManager->getTrialDays();
+
+// Feature-Labels
+$featureLabels = [
+    'max_viewers' => 'Gleichzeitige Zuschauer',
+    'storage_gb' => 'Speicherplatz',
+    'custom_domain' => 'Eigene Domain',
+    'weather_widget' => 'Wetter-Widget',
+    'timelapse' => 'Timelapse',
+    'analytics' => 'Analytics & Statistiken',
+    'branding' => 'Custom Branding',
+    'priority_support' => 'Priority Support',
+];
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Preise - Aurora Livecam</title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+    <style>
+        :root {
+            --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            color: #1a202c;
+            background: #f7fafc;
+        }
+
+        .header {
+            background: white;
+            border-bottom: 1px solid #e2e8f0;
+            padding: 1rem 2rem;
+        }
+
+        .header-inner {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: var(--gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-decoration: none;
+        }
+
+        .nav-links a {
+            color: #4a5568;
+            text-decoration: none;
+            margin-left: 1.5rem;
+        }
+
+        .page-header {
+            text-align: center;
+            padding: 4rem 2rem;
+            background: var(--gradient);
+            color: white;
+        }
+
+        .page-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .page-header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+
+        .pricing-toggle {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-top: 2rem;
+            align-items: center;
+        }
+
+        .pricing-toggle span {
+            font-size: 0.9rem;
+        }
+
+        .pricing-toggle .active {
+            font-weight: 600;
+        }
+
+        .toggle-switch {
+            width: 60px;
+            height: 30px;
+            background: rgba(255,255,255,0.3);
+            border-radius: 15px;
+            position: relative;
+            cursor: pointer;
+        }
+
+        .toggle-switch::after {
+            content: '';
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            background: white;
+            border-radius: 50%;
+            top: 2px;
+            left: 2px;
+            transition: 0.3s;
+        }
+
+        .toggle-switch.yearly::after {
+            left: 32px;
+        }
+
+        .save-badge {
+            background: #48bb78;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        .pricing-container {
+            max-width: 1200px;
+            margin: -3rem auto 4rem;
+            padding: 0 2rem;
+        }
+
+        .pricing-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .pricing-card {
+            background: white;
+            border-radius: 1rem;
+            padding: 2rem;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .pricing-card.featured {
+            border: 2px solid #667eea;
+            transform: scale(1.05);
+        }
+
+        .pricing-card.featured::before {
+            content: 'Beliebt';
+            position: absolute;
+            top: -12px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--gradient);
+            color: white;
+            padding: 0.25rem 1rem;
+            border-radius: 1rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        .pricing-card h3 {
+            font-size: 1.25rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .pricing-card .price {
+            font-size: 3rem;
+            font-weight: 800;
+            margin: 1rem 0;
+        }
+
+        .pricing-card .price span {
+            font-size: 1rem;
+            font-weight: 400;
+            color: #718096;
+        }
+
+        .pricing-card .price-yearly {
+            display: none;
+        }
+
+        .yearly-mode .price-monthly { display: none; }
+        .yearly-mode .price-yearly { display: block; }
+
+        .pricing-card ul {
+            list-style: none;
+            flex: 1;
+            margin: 1.5rem 0;
+        }
+
+        .pricing-card li {
+            padding: 0.5rem 0;
+            color: #4a5568;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .pricing-card li.included::before {
+            content: '✓';
+            color: #48bb78;
+            font-weight: bold;
+        }
+
+        .pricing-card li.not-included {
+            color: #a0aec0;
+            text-decoration: line-through;
+        }
+
+        .pricing-card li.not-included::before {
+            content: '✗';
+            color: #e53e3e;
+        }
+
+        .pricing-card .btn {
+            width: 100%;
+            padding: 1rem;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            text-decoration: none;
+            text-align: center;
+            transition: all 0.2s;
+        }
+
+        .pricing-card .btn-primary {
+            background: var(--gradient);
+            color: white;
+        }
+
+        .pricing-card .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .pricing-card .btn-secondary {
+            background: #e2e8f0;
+            color: #4a5568;
+        }
+
+        .faq {
+            max-width: 800px;
+            margin: 0 auto 4rem;
+            padding: 0 2rem;
+        }
+
+        .faq h2 {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .faq-item {
+            background: white;
+            border-radius: 0.5rem;
+            margin-bottom: 1rem;
+            overflow: hidden;
+        }
+
+        .faq-question {
+            padding: 1.25rem;
+            font-weight: 600;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .faq-answer {
+            padding: 0 1.25rem 1.25rem;
+            color: #718096;
+            display: none;
+        }
+
+        .faq-item.open .faq-answer {
+            display: block;
+        }
+
+        .footer {
+            background: #1a202c;
+            color: #a0aec0;
+            padding: 2rem;
+            text-align: center;
+        }
+
+        @media (max-width: 768px) {
+            .pricing-card.featured {
+                transform: none;
+            }
+            .pricing-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-inner">
+            <a href="/landing/" class="logo">Aurora Livecam</a>
+            <nav class="nav-links">
+                <a href="/landing/">Home</a>
+                <a href="/dashboard/login.php">Login</a>
+                <a href="/onboarding/register.php" class="btn btn-primary btn-sm">Kostenlos starten</a>
+            </nav>
+        </div>
+    </header>
+
+    <section class="page-header">
+        <h1>Einfache, transparente Preise</h1>
+        <p><?php echo $trialDays; ?> Tage kostenlos testen - jederzeit kündbar</p>
+
+        <div class="pricing-toggle">
+            <span class="monthly-label active">Monatlich</span>
+            <div class="toggle-switch" id="billing-toggle"></div>
+            <span class="yearly-label">Jährlich</span>
+            <span class="save-badge">2 Monate gratis</span>
+        </div>
+    </section>
+
+    <div class="pricing-container" id="pricing-container">
+        <div class="pricing-grid">
+            <?php foreach ($plans as $index => $plan): ?>
+            <?php $isFeatured = $plan['slug'] === 'professional'; ?>
+            <div class="pricing-card <?php echo $isFeatured ? 'featured' : ''; ?>">
+                <h3><?php echo htmlspecialchars($plan['name']); ?></h3>
+
+                <div class="price price-monthly">
+                    <?php if ($plan['price_monthly'] > 0): ?>
+                    CHF <?php echo number_format($plan['price_monthly'], 0); ?><span>/Monat</span>
+                    <?php else: ?>
+                    Kostenlos
+                    <?php endif; ?>
+                </div>
+
+                <div class="price price-yearly">
+                    <?php if (isset($plan['price_yearly']) && $plan['price_yearly'] > 0): ?>
+                    CHF <?php echo number_format($plan['price_yearly'] / 12, 0); ?><span>/Monat</span>
+                    <div style="font-size: 0.875rem; color: #718096;">
+                        CHF <?php echo number_format($plan['price_yearly'], 0); ?> jährlich
+                    </div>
+                    <?php elseif ($plan['price_monthly'] > 0): ?>
+                    CHF <?php echo number_format($plan['price_monthly'] * 10 / 12, 0); ?><span>/Monat</span>
+                    <div style="font-size: 0.875rem; color: #718096;">
+                        CHF <?php echo number_format($plan['price_monthly'] * 10, 0); ?> jährlich
+                    </div>
+                    <?php else: ?>
+                    Kostenlos
+                    <?php endif; ?>
+                </div>
+
+                <ul>
+                    <?php
+                    $features = is_array($plan['features']) ? $plan['features'] : json_decode($plan['features'], true) ?? [];
+                    $allFeatures = ['max_viewers', 'weather_widget', 'timelapse', 'analytics', 'custom_domain', 'branding', 'priority_support'];
+
+                    foreach ($allFeatures as $feature):
+                        $hasFeature = !empty($features[$feature]);
+                        $value = $features[$feature] ?? null;
+                    ?>
+                    <li class="<?php echo $hasFeature ? 'included' : 'not-included'; ?>">
+                        <?php
+                        if ($feature === 'max_viewers' && $value) {
+                            echo $value === -1 ? 'Unbegrenzte Zuschauer' : "Bis $value Zuschauer";
+                        } elseif ($feature === 'storage_gb' && $value) {
+                            echo "$value GB Speicher";
+                        } else {
+                            echo $featureLabels[$feature] ?? ucfirst(str_replace('_', ' ', $feature));
+                        }
+                        ?>
+                    </li>
+                    <?php endforeach; ?>
+                </ul>
+
+                <a href="/onboarding/register.php?plan=<?php echo $plan['slug']; ?>"
+                   class="btn <?php echo $isFeatured || $plan['price_monthly'] > 0 ? 'btn-primary' : 'btn-secondary'; ?>">
+                    <?php echo $plan['price_monthly'] > 0 ? 'Jetzt starten' : 'Kostenlos starten'; ?>
+                </a>
+            </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
+
+    <!-- FAQ -->
+    <section class="faq">
+        <h2>Häufige Fragen</h2>
+
+        <div class="faq-item">
+            <div class="faq-question">
+                Kann ich jederzeit wechseln oder kündigen?
+                <span>+</span>
+            </div>
+            <div class="faq-answer">
+                Ja! Sie können Ihren Plan jederzeit upgraden oder downgraden. Bei einer Kündigung bleibt Ihr Zugang bis zum Ende der Abrechnungsperiode aktiv.
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="faq-question">
+                Was passiert nach dem Trial?
+                <span>+</span>
+            </div>
+            <div class="faq-answer">
+                Nach Ablauf der <?php echo $trialDays; ?> Tage werden Sie automatisch auf den kostenlosen Plan umgestellt, sofern Sie kein Abo abschliessen. Keine Sorge, Ihre Daten bleiben erhalten.
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="faq-question">
+                Welche Zahlungsmethoden werden akzeptiert?
+                <span>+</span>
+            </div>
+            <div class="faq-answer">
+                Wir akzeptieren alle gängigen Kreditkarten (Visa, Mastercard, American Express) sowie TWINT und Banküberweisung bei Jahresabos.
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="faq-question">
+                Brauche ich technisches Wissen?
+                <span>+</span>
+            </div>
+            <div class="faq-answer">
+                Nein! Unser Onboarding-Wizard führt Sie Schritt für Schritt durch die Einrichtung. Sie benötigen lediglich eine Stream-URL (HLS/m3u8) von Ihrem Kamera-Anbieter.
+            </div>
+        </div>
+    </section>
+
+    <footer class="footer">
+        © <?php echo date('Y'); ?> Aurora Livecam. Alle Rechte vorbehalten.
+    </footer>
+
+    <script>
+    // Billing toggle
+    const toggle = document.getElementById('billing-toggle');
+    const container = document.getElementById('pricing-container');
+
+    toggle.addEventListener('click', () => {
+        toggle.classList.toggle('yearly');
+        container.classList.toggle('yearly-mode');
+
+        document.querySelector('.monthly-label').classList.toggle('active');
+        document.querySelector('.yearly-label').classList.toggle('active');
+    });
+
+    // FAQ accordion
+    document.querySelectorAll('.faq-question').forEach(q => {
+        q.addEventListener('click', () => {
+            q.parentElement.classList.toggle('open');
+            q.querySelector('span').textContent = q.parentElement.classList.contains('open') ? '−' : '+';
+        });
+    });
+    </script>
+</body>
+</html>
@@ -0,0 +1,253 @@
+<?php
+/**
+ * Onboarding - Branding (Schritt 4)
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Onboarding\OnboardingManager;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+
+if (!$auth->isLoggedIn()) {
+    header('Location: /onboarding/register.php');
+    exit;
+}
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+$error = '';
+$branding = [
+    'site_name' => $user['tenant_name'] ?? '',
+    'tagline' => '',
+    'primary_color' => '#667eea',
+    'secondary_color' => '#764ba2',
+];
+
+// Formular verarbeiten
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $branding = [
+        'site_name' => trim($_POST['site_name'] ?? ''),
+        'site_name_full' => trim($_POST['site_name'] ?? ''),
+        'tagline' => trim($_POST['tagline'] ?? ''),
+        'primary_color' => $_POST['primary_color'] ?? '#667eea',
+        'secondary_color' => $_POST['secondary_color'] ?? '#764ba2',
+    ];
+
+    try {
+        $onboarding = new OnboardingManager();
+        $result = $onboarding->saveBranding($tenantId, $branding);
+
+        if ($result['success']) {
+            header('Location: /onboarding/complete.php');
+            exit;
+        } else {
+            $error = $result['error'] ?? 'Fehler beim Speichern';
+        }
+    } catch (\Exception $e) {
+        $error = 'Fehler: ' . $e->getMessage();
+    }
+}
+
+// Skip
+if (isset($_GET['skip'])) {
+    header('Location: /onboarding/complete.php');
+    exit;
+}
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Branding - Aurora Livecam</title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+    <style>
+        .onboarding-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            padding: 2rem;
+        }
+        .onboarding-box {
+            background: var(--white);
+            padding: 2.5rem;
+            border-radius: 1rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            width: 100%;
+            max-width: 600px;
+        }
+        .progress-steps {
+            display: flex;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
+        }
+        .step {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: var(--gray-300);
+        }
+        .step.active { background: var(--primary); }
+        .step.completed { background: var(--success); }
+        .onboarding-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .onboarding-header h1 {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .color-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+        .preview-card {
+            margin-top: 1.5rem;
+            border-radius: 0.75rem;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .preview-header {
+            padding: 1.5rem;
+            color: white;
+            text-align: center;
+        }
+        .preview-header h3 {
+            margin: 0;
+            font-size: 1.25rem;
+        }
+        .preview-header p {
+            margin: 0.5rem 0 0 0;
+            opacity: 0.9;
+            font-size: 0.875rem;
+        }
+        .preview-body {
+            padding: 1rem;
+            background: var(--gray-100);
+            text-align: center;
+            font-size: 0.875rem;
+            color: var(--gray-500);
+        }
+        .skip-link {
+            display: block;
+            text-align: center;
+            margin-top: 1.5rem;
+            color: var(--gray-500);
+            font-size: 0.875rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="onboarding-container">
+        <div class="onboarding-box">
+            <div class="progress-steps">
+                <div class="step completed"></div>
+                <div class="step completed"></div>
+                <div class="step completed"></div>
+                <div class="step active"></div>
+            </div>
+
+            <div class="onboarding-header">
+                <h1>🎨 Branding</h1>
+                <p style="color: var(--gray-500);">Personalisieren Sie Ihre Livecam</p>
+            </div>
+
+            <?php if ($error): ?>
+            <div class="alert alert-error"><?php echo htmlspecialchars($error); ?></div>
+            <?php endif; ?>
+
+            <form method="POST" action="">
+                <div class="form-group">
+                    <label class="form-label" for="site_name">Name Ihrer Livecam</label>
+                    <input type="text" id="site_name" name="site_name" class="form-input"
+                           value="<?php echo htmlspecialchars($branding['site_name']); ?>"
+                           placeholder="z.B. Berghütte Webcam">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="tagline">Slogan / Beschreibung</label>
+                    <input type="text" id="tagline" name="tagline" class="form-input"
+                           value="<?php echo htmlspecialchars($branding['tagline']); ?>"
+                           placeholder="z.B. Live aus den Schweizer Alpen">
+                </div>
+
+                <div class="color-row">
+                    <div class="form-group">
+                        <label class="form-label">Primärfarbe</label>
+                        <div class="color-picker-wrapper">
+                            <input type="color" name="primary_color" id="primary_color" class="color-picker"
+                                   value="<?php echo htmlspecialchars($branding['primary_color']); ?>">
+                            <span class="color-value"><?php echo htmlspecialchars($branding['primary_color']); ?></span>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Sekundärfarbe</label>
+                        <div class="color-picker-wrapper">
+                            <input type="color" name="secondary_color" id="secondary_color" class="color-picker"
+                                   value="<?php echo htmlspecialchars($branding['secondary_color']); ?>">
+                            <span class="color-value"><?php echo htmlspecialchars($branding['secondary_color']); ?></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Live Preview -->
+                <div class="preview-card">
+                    <div class="preview-header" id="preview-header" style="background: linear-gradient(135deg, <?php echo htmlspecialchars($branding['primary_color']); ?> 0%, <?php echo htmlspecialchars($branding['secondary_color']); ?> 100%);">
+                        <h3 id="preview-name"><?php echo htmlspecialchars($branding['site_name'] ?: 'Ihre Livecam'); ?></h3>
+                        <p id="preview-tagline"><?php echo htmlspecialchars($branding['tagline'] ?: 'Ihr Slogan hier'); ?></p>
+                    </div>
+                    <div class="preview-body">
+                        Live-Vorschau
+                    </div>
+                </div>
+
+                <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1.5rem;">
+                    Speichern & abschliessen
+                </button>
+            </form>
+
+            <a href="?skip=1" class="skip-link">
+                Später anpassen →
+            </a>
+        </div>
+    </div>
+
+    <script>
+    // Live preview updates
+    document.getElementById('site_name').addEventListener('input', (e) => {
+        document.getElementById('preview-name').textContent = e.target.value || 'Ihre Livecam';
+    });
+
+    document.getElementById('tagline').addEventListener('input', (e) => {
+        document.getElementById('preview-tagline').textContent = e.target.value || 'Ihr Slogan hier';
+    });
+
+    document.getElementById('primary_color').addEventListener('input', updateColors);
+    document.getElementById('secondary_color').addEventListener('input', updateColors);
+
+    function updateColors() {
+        const primary = document.getElementById('primary_color').value;
+        const secondary = document.getElementById('secondary_color').value;
+        document.getElementById('preview-header').style.background =
+            `linear-gradient(135deg, ${primary} 0%, ${secondary} 100%)`;
+
+        document.querySelectorAll('.color-value')[0].textContent = primary;
+        document.querySelectorAll('.color-value')[1].textContent = secondary;
+    }
+    </script>
+</body>
+</html>
@@ -0,0 +1,237 @@
+<?php
+/**
+ * Onboarding - Abgeschlossen
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Onboarding\OnboardingManager;
+use AuroraLivecam\Core\Database;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+
+if (!$auth->isLoggedIn()) {
+    header('Location: /onboarding/register.php');
+    exit;
+}
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+// Onboarding abschliessen
+try {
+    $onboarding = new OnboardingManager();
+    $onboarding->complete($tenantId);
+} catch (\Exception $e) {
+    // Ignorieren wenn DB nicht verfügbar
+}
+
+// Tenant-Info laden
+$tenantSlug = 'demo';
+$subdomain = '';
+
+try {
+    $db = Database::getInstance();
+    $tenant = $db->fetchOne("SELECT slug FROM tenants WHERE id = ?", [$tenantId]);
+    if ($tenant) {
+        $tenantSlug = $tenant['slug'];
+        $subdomain = $tenantSlug . '.aurora-livecam.com';
+    }
+} catch (\Exception $e) {
+    // Fallback
+}
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fertig! - Aurora Livecam</title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+    <style>
+        .complete-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            padding: 2rem;
+        }
+        .complete-box {
+            background: var(--white);
+            padding: 3rem;
+            border-radius: 1rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            width: 100%;
+            max-width: 600px;
+            text-align: center;
+        }
+        .complete-icon {
+            font-size: 5rem;
+            margin-bottom: 1.5rem;
+            animation: bounce 0.5s ease;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .complete-box h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            color: var(--success);
+        }
+        .complete-box p {
+            color: var(--gray-600);
+            margin-bottom: 2rem;
+            font-size: 1.1rem;
+        }
+        .url-box {
+            background: var(--gray-100);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin-bottom: 2rem;
+        }
+        .url-box label {
+            display: block;
+            font-size: 0.875rem;
+            color: var(--gray-500);
+            margin-bottom: 0.5rem;
+        }
+        .url-box .url {
+            font-family: monospace;
+            font-size: 1rem;
+            color: var(--primary);
+            word-break: break-all;
+        }
+        .action-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .next-steps {
+            margin-top: 2.5rem;
+            text-align: left;
+            background: var(--gray-50);
+            border-radius: 0.5rem;
+            padding: 1.5rem;
+        }
+        .next-steps h3 {
+            font-size: 1rem;
+            margin-bottom: 1rem;
+            color: var(--gray-700);
+        }
+        .next-steps ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .next-steps li {
+            padding: 0.5rem 0;
+            padding-left: 1.5rem;
+            position: relative;
+            color: var(--gray-600);
+        }
+        .next-steps li::before {
+            content: '→';
+            position: absolute;
+            left: 0;
+            color: var(--primary);
+        }
+        .confetti {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            overflow: hidden;
+            z-index: 1000;
+        }
+        .confetti-piece {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: var(--primary);
+            animation: confetti-fall 3s ease-out forwards;
+        }
+        @keyframes confetti-fall {
+            0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
+            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
+        }
+    </style>
+</head>
+<body>
+    <div class="confetti" id="confetti"></div>
+
+    <div class="complete-container">
+        <div class="complete-box">
+            <div class="complete-icon">🎉</div>
+            <h1>Herzlichen Glückwunsch!</h1>
+            <p>Ihre Livecam ist jetzt eingerichtet und bereit.</p>
+
+            <?php if ($subdomain): ?>
+            <div class="url-box">
+                <label>Ihre Livecam-Adresse:</label>
+                <div class="url">https://<?php echo htmlspecialchars($subdomain); ?></div>
+            </div>
+            <?php endif; ?>
+
+            <div class="action-buttons">
+                <a href="/dashboard/" class="btn btn-primary">
+                    Zum Dashboard
+                </a>
+                <a href="/" class="btn btn-secondary" target="_blank">
+                    Livecam ansehen
+                </a>
+            </div>
+
+            <div class="next-steps">
+                <h3>Nächste Schritte</h3>
+                <ul>
+                    <li>Stream-URL im Dashboard anpassen (falls noch nicht geschehen)</li>
+                    <li>Logo und Farben im Branding-Bereich hochladen</li>
+                    <li>Wetter-Widget konfigurieren</li>
+                    <li>Eigene Domain verbinden (optional)</li>
+                    <?php if ($settingsManager->isBillingEnabled()): ?>
+                    <li>Abo auswählen für mehr Funktionen</li>
+                    <?php endif; ?>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    // Confetti Animation
+    function createConfetti() {
+        const container = document.getElementById('confetti');
+        const colors = ['#667eea', '#764ba2', '#f093fb', '#48bb78', '#ed8936'];
+
+        for (let i = 0; i < 50; i++) {
+            const piece = document.createElement('div');
+            piece.className = 'confetti-piece';
+            piece.style.left = Math.random() * 100 + '%';
+            piece.style.background = colors[Math.floor(Math.random() * colors.length)];
+            piece.style.animationDelay = Math.random() * 2 + 's';
+            piece.style.width = (Math.random() * 10 + 5) + 'px';
+            piece.style.height = piece.style.width;
+            container.appendChild(piece);
+        }
+
+        // Cleanup after animation
+        setTimeout(() => {
+            container.innerHTML = '';
+        }, 5000);
+    }
+
+    createConfetti();
+    </script>
+</body>
+</html>
@@ -0,0 +1,265 @@
+<?php
+/**
+ * Onboarding - Registrierung
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Onboarding\OnboardingManager;
+use AuroraLivecam\Auth\AuthManager;
+
+$settingsManager = new SettingsManager();
+
+// Prüfe ob Self-Registration aktiviert ist
+if (!$settingsManager->isSelfRegistrationEnabled()) {
+    header('Location: /');
+    exit;
+}
+
+$auth = new AuthManager();
+
+// Bereits eingeloggt?
+if ($auth->isLoggedIn()) {
+    header('Location: /dashboard/');
+    exit;
+}
+
+$errors = [];
+$formData = [];
+$success = false;
+
+// Formular verarbeiten
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $formData = [
+        'name' => trim($_POST['name'] ?? ''),
+        'company_name' => trim($_POST['company_name'] ?? ''),
+        'email' => trim($_POST['email'] ?? ''),
+        'password' => $_POST['password'] ?? '',
+        'password_confirm' => $_POST['password_confirm'] ?? '',
+        'stream_url' => trim($_POST['stream_url'] ?? ''),
+        'accept_terms' => isset($_POST['accept_terms']),
+    ];
+
+    try {
+        $onboarding = new OnboardingManager();
+        $result = $onboarding->register($formData);
+
+        if ($result['success']) {
+            // Session starten und User einloggen
+            $auth->login($formData['email'], $formData['password']);
+
+            // Zur nächsten Seite weiterleiten
+            if ($onboarding->requiresEmailVerification()) {
+                // Token für Demo-Zwecke in Session speichern
+                $_SESSION['verification_token'] = $result['verification_token'];
+                header('Location: /onboarding/verify.php');
+            } else {
+                header('Location: /onboarding/stream.php');
+            }
+            exit;
+        } else {
+            $errors = $result['errors'];
+        }
+    } catch (\Exception $e) {
+        $errors['general'] = 'Registrierung fehlgeschlagen: ' . $e->getMessage();
+    }
+}
+
+$trialDays = $settingsManager->getTrialDays();
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Registrierung - Aurora Livecam</title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+    <style>
+        .register-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            padding: 2rem;
+        }
+        .register-box {
+            background: var(--white);
+            padding: 2.5rem;
+            border-radius: 1rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            width: 100%;
+            max-width: 500px;
+        }
+        .register-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .register-header h1 {
+            font-size: 1.75rem;
+            margin-bottom: 0.5rem;
+        }
+        .register-header p {
+            color: var(--gray-500);
+        }
+        .trial-badge {
+            display: inline-block;
+            background: linear-gradient(135deg, var(--success) 0%, #38a169 100%);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            margin-top: 0.5rem;
+        }
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+        .error-text {
+            color: var(--danger);
+            font-size: 0.875rem;
+            margin-top: 0.25rem;
+        }
+        .input-error {
+            border-color: var(--danger) !important;
+        }
+        .terms-text {
+            font-size: 0.875rem;
+            color: var(--gray-600);
+        }
+        .terms-text a {
+            color: var(--primary);
+        }
+        .divider {
+            display: flex;
+            align-items: center;
+            margin: 1.5rem 0;
+            color: var(--gray-400);
+        }
+        .divider::before,
+        .divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: var(--gray-300);
+        }
+        .divider span {
+            padding: 0 1rem;
+            font-size: 0.875rem;
+        }
+        @media (max-width: 500px) {
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="register-container">
+        <div class="register-box">
+            <div class="register-header">
+                <h1>Jetzt starten</h1>
+                <p>Erstellen Sie Ihre eigene Live-Webcam</p>
+                <span class="trial-badge"><?php echo $trialDays; ?> Tage kostenlos testen</span>
+            </div>
+
+            <?php if (!empty($errors['general'])): ?>
+            <div class="alert alert-error"><?php echo htmlspecialchars($errors['general']); ?></div>
+            <?php endif; ?>
+
+            <form method="POST" action="" novalidate>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label class="form-label" for="name">Ihr Name *</label>
+                        <input type="text" id="name" name="name" class="form-input <?php echo isset($errors['name']) ? 'input-error' : ''; ?>"
+                               value="<?php echo htmlspecialchars($formData['name'] ?? ''); ?>" required>
+                        <?php if (isset($errors['name'])): ?>
+                        <p class="error-text"><?php echo htmlspecialchars($errors['name']); ?></p>
+                        <?php endif; ?>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="company_name">Webcam / Firma *</label>
+                        <input type="text" id="company_name" name="company_name" class="form-input <?php echo isset($errors['company_name']) ? 'input-error' : ''; ?>"
+                               value="<?php echo htmlspecialchars($formData['company_name'] ?? ''); ?>"
+                               placeholder="z.B. Berghütte Webcam" required>
+                        <?php if (isset($errors['company_name'])): ?>
+                        <p class="error-text"><?php echo htmlspecialchars($errors['company_name']); ?></p>
+                        <?php endif; ?>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="email">E-Mail-Adresse *</label>
+                    <input type="email" id="email" name="email" class="form-input <?php echo isset($errors['email']) ? 'input-error' : ''; ?>"
+                           value="<?php echo htmlspecialchars($formData['email'] ?? ''); ?>" required>
+                    <?php if (isset($errors['email'])): ?>
+                    <p class="error-text"><?php echo htmlspecialchars($errors['email']); ?></p>
+                    <?php endif; ?>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label class="form-label" for="password">Passwort *</label>
+                        <input type="password" id="password" name="password" class="form-input <?php echo isset($errors['password']) ? 'input-error' : ''; ?>"
+                               minlength="8" required>
+                        <?php if (isset($errors['password'])): ?>
+                        <p class="error-text"><?php echo htmlspecialchars($errors['password']); ?></p>
+                        <?php endif; ?>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="password_confirm">Passwort bestätigen *</label>
+                        <input type="password" id="password_confirm" name="password_confirm" class="form-input <?php echo isset($errors['password_confirm']) ? 'input-error' : ''; ?>"
+                               required>
+                        <?php if (isset($errors['password_confirm'])): ?>
+                        <p class="error-text"><?php echo htmlspecialchars($errors['password_confirm']); ?></p>
+                        <?php endif; ?>
+                    </div>
+                </div>
+
+                <div class="divider"><span>Optional</span></div>
+
+                <div class="form-group">
+                    <label class="form-label" for="stream_url">Stream-URL</label>
+                    <input type="url" id="stream_url" name="stream_url" class="form-input <?php echo isset($errors['stream_url']) ? 'input-error' : ''; ?>"
+                           value="<?php echo htmlspecialchars($formData['stream_url'] ?? ''); ?>"
+                           placeholder="https://example.com/stream.m3u8">
+                    <p class="form-help">Sie können die Stream-URL auch später im Dashboard hinzufügen</p>
+                    <?php if (isset($errors['stream_url'])): ?>
+                    <p class="error-text"><?php echo htmlspecialchars($errors['stream_url']); ?></p>
+                    <?php endif; ?>
+                </div>
+
+                <div class="form-group">
+                    <label class="toggle-wrapper">
+                        <input type="checkbox" name="accept_terms" <?php echo !empty($formData['accept_terms']) ? 'checked' : ''; ?> required>
+                        <span class="terms-text">
+                            Ich akzeptiere die <a href="/terms" target="_blank">AGB</a> und
+                            <a href="/privacy" target="_blank">Datenschutzerklärung</a> *
+                        </span>
+                    </label>
+                    <?php if (isset($errors['accept_terms'])): ?>
+                    <p class="error-text"><?php echo htmlspecialchars($errors['accept_terms']); ?></p>
+                    <?php endif; ?>
+                </div>
+
+                <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
+                    Kostenlos registrieren
+                </button>
+            </form>
+
+            <p style="text-align: center; margin-top: 1.5rem; color: var(--gray-500);">
+                Bereits registriert?
+                <a href="/dashboard/login.php" style="color: var(--primary);">Anmelden</a>
+            </p>
+        </div>
+    </div>
+</body>
+</html>
@@ -0,0 +1,265 @@
+<?php
+/**
+ * Onboarding - Stream Konfiguration (Schritt 3)
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Onboarding\OnboardingManager;
+use AuroraLivecam\Onboarding\StreamValidator;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+
+// Login prüfen
+if (!$auth->isLoggedIn()) {
+    header('Location: /onboarding/register.php');
+    exit;
+}
+
+$user = $auth->getUser();
+$tenantId = $user['tenant_id'] ?? 0;
+
+$error = '';
+$streamUrl = '';
+$streamType = 'hls';
+$validationResult = null;
+
+// Formular verarbeiten
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $streamUrl = trim($_POST['stream_url'] ?? '');
+    $streamType = $_POST['stream_type'] ?? 'hls';
+
+    if (empty($streamUrl)) {
+        $error = 'Bitte geben Sie eine Stream-URL ein';
+    } else {
+        try {
+            // Stream validieren
+            $validator = new StreamValidator();
+            $validationResult = $validator->validate($streamUrl);
+
+            if ($validationResult['valid']) {
+                // Speichern
+                $onboarding = new OnboardingManager();
+                $result = $onboarding->saveStream($tenantId, $streamUrl, $streamType);
+
+                if ($result['success']) {
+                    header('Location: /onboarding/branding.php');
+                    exit;
+                } else {
+                    $error = $result['error'];
+                }
+            } else {
+                $error = $validationResult['error'] ?? 'Stream-URL konnte nicht validiert werden';
+            }
+        } catch (\Exception $e) {
+            $error = 'Fehler: ' . $e->getMessage();
+        }
+    }
+}
+
+// Skip erlauben
+if (isset($_GET['skip'])) {
+    header('Location: /onboarding/branding.php');
+    exit;
+}
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stream einrichten - Aurora Livecam</title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+    <style>
+        .onboarding-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            padding: 2rem;
+        }
+        .onboarding-box {
+            background: var(--white);
+            padding: 2.5rem;
+            border-radius: 1rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            width: 100%;
+            max-width: 600px;
+        }
+        .onboarding-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .onboarding-header h1 {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .progress-steps {
+            display: flex;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
+        }
+        .step {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: var(--gray-300);
+        }
+        .step.active { background: var(--primary); }
+        .step.completed { background: var(--success); }
+        .validation-result {
+            margin-top: 1rem;
+            padding: 1rem;
+            border-radius: 0.5rem;
+        }
+        .validation-success {
+            background: #c6f6d5;
+            border: 1px solid #9ae6b4;
+        }
+        .validation-error {
+            background: #fed7d7;
+            border: 1px solid #feb2b2;
+        }
+        .validation-details {
+            font-size: 0.875rem;
+            margin-top: 0.5rem;
+            color: var(--gray-600);
+        }
+        .stream-types {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        .stream-type-card {
+            border: 2px solid var(--gray-200);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .stream-type-card:hover {
+            border-color: var(--primary);
+        }
+        .stream-type-card.selected {
+            border-color: var(--primary);
+            background: rgba(102, 126, 234, 0.05);
+        }
+        .stream-type-card input {
+            display: none;
+        }
+        .stream-type-card h4 {
+            margin: 0 0 0.25rem 0;
+            font-size: 1rem;
+        }
+        .stream-type-card p {
+            margin: 0;
+            font-size: 0.75rem;
+            color: var(--gray-500);
+        }
+        .skip-link {
+            display: block;
+            text-align: center;
+            margin-top: 1.5rem;
+            color: var(--gray-500);
+            font-size: 0.875rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="onboarding-container">
+        <div class="onboarding-box">
+            <div class="progress-steps">
+                <div class="step completed"></div>
+                <div class="step completed"></div>
+                <div class="step active"></div>
+                <div class="step"></div>
+            </div>
+
+            <div class="onboarding-header">
+                <h1>📹 Stream einrichten</h1>
+                <p style="color: var(--gray-500);">Verbinden Sie Ihre Webcam oder Ihren Stream</p>
+            </div>
+
+            <?php if ($error): ?>
+            <div class="alert alert-error"><?php echo htmlspecialchars($error); ?></div>
+            <?php endif; ?>
+
+            <form method="POST" action="" id="stream-form">
+                <div class="form-group">
+                    <label class="form-label">Stream-Typ wählen</label>
+                    <div class="stream-types">
+                        <label class="stream-type-card <?php echo $streamType === 'hls' ? 'selected' : ''; ?>">
+                            <input type="radio" name="stream_type" value="hls" <?php echo $streamType === 'hls' ? 'checked' : ''; ?>>
+                            <h4>🎬 HLS Stream</h4>
+                            <p>.m3u8 Playlist (empfohlen)</p>
+                        </label>
+                        <label class="stream-type-card <?php echo $streamType === 'rtmp' ? 'selected' : ''; ?>">
+                            <input type="radio" name="stream_type" value="rtmp" <?php echo $streamType === 'rtmp' ? 'checked' : ''; ?>>
+                            <h4>📡 RTMP</h4>
+                            <p>Real-Time Messaging Protocol</p>
+                        </label>
+                        <label class="stream-type-card <?php echo $streamType === 'iframe' ? 'selected' : ''; ?>">
+                            <input type="radio" name="stream_type" value="iframe" <?php echo $streamType === 'iframe' ? 'checked' : ''; ?>>
+                            <h4>🖼️ Embed</h4>
+                            <p>YouTube, Vimeo, Twitch</p>
+                        </label>
+                        <label class="stream-type-card <?php echo $streamType === 'webrtc' ? 'selected' : ''; ?>">
+                            <input type="radio" name="stream_type" value="webrtc" <?php echo $streamType === 'webrtc' ? 'checked' : ''; ?>>
+                            <h4>⚡ WebRTC</h4>
+                            <p>Ultra-niedrige Latenz</p>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label" for="stream_url">Stream-URL</label>
+                    <input type="url" id="stream_url" name="stream_url" class="form-input"
+                           value="<?php echo htmlspecialchars($streamUrl); ?>"
+                           placeholder="https://example.com/stream.m3u8" required>
+                    <p class="form-help">Die vollständige URL zu Ihrem Stream</p>
+                </div>
+
+                <?php if ($validationResult): ?>
+                <div class="validation-result <?php echo $validationResult['valid'] ? 'validation-success' : 'validation-error'; ?>">
+                    <strong><?php echo $validationResult['valid'] ? '✓ Stream erreichbar' : '✗ Stream nicht erreichbar'; ?></strong>
+                    <?php if (!empty($validationResult['details'])): ?>
+                    <div class="validation-details">
+                        <?php if (isset($validationResult['details']['detected_type'])): ?>
+                        Erkannter Typ: <?php echo htmlspecialchars($validationResult['details']['detected_type']); ?>
+                        <?php endif; ?>
+                    </div>
+                    <?php endif; ?>
+                </div>
+                <?php endif; ?>
+
+                <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1.5rem;">
+                    Stream testen & weiter
+                </button>
+            </form>
+
+            <a href="?skip=1" class="skip-link">
+                Später einrichten →
+            </a>
+        </div>
+    </div>
+
+    <script>
+    document.querySelectorAll('.stream-type-card').forEach(card => {
+        card.addEventListener('click', () => {
+            document.querySelectorAll('.stream-type-card').forEach(c => c.classList.remove('selected'));
+            card.classList.add('selected');
+        });
+    });
+    </script>
+</body>
+</html>
@@ -0,0 +1,214 @@
+<?php
+/**
+ * Onboarding - E-Mail Verifizierung
+ */
+
+require_once dirname(__DIR__) . '/vendor/autoload.php';
+require_once dirname(__DIR__) . '/SettingsManager.php';
+
+if (file_exists(dirname(__DIR__) . '/src/bootstrap.php')) {
+    require_once dirname(__DIR__) . '/src/bootstrap.php';
+}
+
+use AuroraLivecam\Auth\AuthManager;
+use AuroraLivecam\Onboarding\OnboardingManager;
+
+$settingsManager = new SettingsManager();
+$auth = new AuthManager();
+
+// Login prüfen
+if (!$auth->isLoggedIn()) {
+    header('Location: /onboarding/register.php');
+    exit;
+}
+
+$user = $auth->getUser();
+$message = '';
+$error = '';
+$verified = false;
+
+// Token aus URL verarbeiten
+if (isset($_GET['token'])) {
+    try {
+        $onboarding = new OnboardingManager();
+        $result = $onboarding->verifyEmail($_GET['token']);
+
+        if ($result['success']) {
+            $verified = true;
+            $message = 'E-Mail erfolgreich verifiziert!';
+        } else {
+            $error = $result['error'];
+        }
+    } catch (\Exception $e) {
+        $error = 'Verifikation fehlgeschlagen';
+    }
+}
+
+// E-Mail erneut senden
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['resend'])) {
+    try {
+        $onboarding = new OnboardingManager();
+        $result = $onboarding->resendVerification($user['id']);
+
+        if ($result['success']) {
+            $_SESSION['verification_token'] = $result['token'];
+            $message = 'Verifikations-E-Mail wurde erneut gesendet!';
+        } else {
+            $error = $result['error'];
+        }
+    } catch (\Exception $e) {
+        $error = 'Fehler beim Senden';
+    }
+}
+
+// Demo: Token anzeigen (in Produktion würde eine E-Mail gesendet)
+$demoToken = $_SESSION['verification_token'] ?? null;
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>E-Mail verifizieren - Aurora Livecam</title>
+    <link rel="stylesheet" href="/dashboard/assets/dashboard.css">
+    <style>
+        .verify-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            padding: 2rem;
+        }
+        .verify-box {
+            background: var(--white);
+            padding: 2.5rem;
+            border-radius: 1rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            width: 100%;
+            max-width: 500px;
+            text-align: center;
+        }
+        .verify-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+        }
+        .verify-box h1 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .verify-box p {
+            color: var(--gray-600);
+            margin-bottom: 1.5rem;
+        }
+        .email-highlight {
+            font-weight: 600;
+            color: var(--gray-800);
+        }
+        .demo-box {
+            background: var(--gray-100);
+            border: 1px dashed var(--gray-300);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin: 1.5rem 0;
+            text-align: left;
+        }
+        .demo-box h4 {
+            font-size: 0.875rem;
+            color: var(--warning);
+            margin-bottom: 0.5rem;
+        }
+        .demo-link {
+            word-break: break-all;
+            font-family: monospace;
+            font-size: 0.75rem;
+            background: white;
+            padding: 0.5rem;
+            border-radius: 0.25rem;
+            display: block;
+            margin-top: 0.5rem;
+        }
+        .progress-steps {
+            display: flex;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-bottom: 2rem;
+        }
+        .step {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: var(--gray-300);
+        }
+        .step.active {
+            background: var(--primary);
+        }
+        .step.completed {
+            background: var(--success);
+        }
+    </style>
+</head>
+<body>
+    <div class="verify-container">
+        <div class="verify-box">
+            <div class="progress-steps">
+                <div class="step completed"></div>
+                <div class="step active"></div>
+                <div class="step"></div>
+                <div class="step"></div>
+            </div>
+
+            <?php if ($verified): ?>
+            <div class="verify-icon">✅</div>
+            <h1>E-Mail verifiziert!</h1>
+            <p>Ihre E-Mail-Adresse wurde erfolgreich bestätigt.</p>
+            <a href="/onboarding/stream.php" class="btn btn-primary" style="width: 100%;">
+                Weiter zur Stream-Konfiguration
+            </a>
+            <?php else: ?>
+            <div class="verify-icon">📧</div>
+            <h1>E-Mail bestätigen</h1>
+            <p>
+                Wir haben eine Bestätigungs-E-Mail an<br>
+                <span class="email-highlight"><?php echo htmlspecialchars($user['email'] ?? ''); ?></span><br>
+                gesendet.
+            </p>
+
+            <?php if ($message): ?>
+            <div class="alert alert-success"><?php echo htmlspecialchars($message); ?></div>
+            <?php endif; ?>
+
+            <?php if ($error): ?>
+            <div class="alert alert-error"><?php echo htmlspecialchars($error); ?></div>
+            <?php endif; ?>
+
+            <?php if ($demoToken): ?>
+            <div class="demo-box">
+                <h4>⚠️ Demo-Modus</h4>
+                <p style="font-size: 0.875rem; margin: 0;">In der Produktion würde eine E-Mail gesendet. Für Demo-Zwecke:</p>
+                <a href="/onboarding/verify.php?token=<?php echo urlencode($demoToken); ?>" class="demo-link">
+                    Klicken Sie hier um zu verifizieren
+                </a>
+            </div>
+            <?php endif; ?>
+
+            <p style="margin-top: 1.5rem; color: var(--gray-500); font-size: 0.875rem;">
+                Keine E-Mail erhalten?
+            </p>
+
+            <form method="POST" action="" style="display: inline;">
+                <button type="submit" name="resend" class="btn btn-secondary">
+                    Erneut senden
+                </button>
+            </form>
+            <?php endif; ?>
+
+            <p style="margin-top: 2rem;">
+                <a href="/dashboard/logout.php" style="color: var(--gray-500); font-size: 0.875rem;">
+                    Abmelden
+                </a>
+            </p>
+        </div>
+    </div>
+</body>
+</html>
@@ -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
@@ -0,0 +1,355 @@
+<?php
+/**
+ * AuthManager - Sichere Authentifizierung für Dashboard
+ */
+
+namespace AuroraLivecam\Auth;
+
+use AuroraLivecam\Core\Database;
+
+class AuthManager
+{
+    private Database $db;
+    private bool $dbAvailable = false;
+
+    public function __construct(?Database $db = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+        $this->checkDbAvailability();
+
+        if (session_status() === PHP_SESSION_NONE) {
+            session_start();
+        }
+    }
+
+    private function checkDbAvailability(): void
+    {
+        try {
+            $this->db->fetchOne("SELECT 1 FROM users LIMIT 1");
+            $this->dbAvailable = true;
+        } catch (\Exception $e) {
+            $this->dbAvailable = false;
+        }
+    }
+
+    /**
+     * Registriert einen neuen Benutzer
+     */
+    public function register(array $data): int
+    {
+        if (!$this->dbAvailable) {
+            throw new \Exception('Database not available');
+        }
+
+        // Validierung
+        if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
+            throw new \Exception('Invalid email address');
+        }
+
+        if (empty($data['password']) || strlen($data['password']) < 8) {
+            throw new \Exception('Password must be at least 8 characters');
+        }
+
+        // Prüfe ob Email bereits existiert
+        $existing = $this->db->fetchOne("SELECT id FROM users WHERE email = ?", [$data['email']]);
+        if ($existing) {
+            throw new \Exception('Email already registered');
+        }
+
+        // Benutzer erstellen
+        return $this->db->insert('users', [
+            'tenant_id' => $data['tenant_id'] ?? null,
+            'email' => strtolower($data['email']),
+            'password_hash' => password_hash($data['password'], PASSWORD_ARGON2ID),
+            'name' => $data['name'] ?? null,
+            'role' => $data['role'] ?? 'tenant_user',
+        ]);
+    }
+
+    /**
+     * Login mit Email und Passwort
+     */
+    public function login(string $email, string $password, bool $remember = false): bool
+    {
+        // Legacy-Modus (hardcoded admin)
+        if (!$this->dbAvailable) {
+            return $this->legacyLogin($email, $password);
+        }
+
+        $user = $this->db->fetchOne(
+            "SELECT u.*, t.name as tenant_name, t.slug as tenant_slug
+             FROM users u
+             LEFT JOIN tenants t ON u.tenant_id = t.id
+             WHERE u.email = ?",
+            [strtolower($email)]
+        );
+
+        if (!$user || !password_verify($password, $user['password_hash'])) {
+            return false;
+        }
+
+        // Session setzen
+        $this->setSession($user);
+
+        // Last login aktualisieren
+        $this->db->update('users', ['last_login_at' => date('Y-m-d H:i:s')], 'id = ?', [$user['id']]);
+
+        // Remember-Me Cookie
+        if ($remember) {
+            $this->setRememberToken($user['id']);
+        }
+
+        return true;
+    }
+
+    /**
+     * Legacy Login (kompatibel mit altem AdminManager)
+     */
+    private function legacyLogin(string $email, string $password): bool
+    {
+        // Alte hardcoded Credentials als Fallback
+        if ($email === 'admin' && $password === 'sonne4000$$$$Q') {
+            $_SESSION['admin'] = true;
+            $_SESSION['user'] = [
+                'id' => 0,
+                'email' => 'admin',
+                'name' => 'Administrator',
+                'role' => 'super_admin',
+                'tenant_id' => null,
+            ];
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Setzt die Session-Daten
+     */
+    private function setSession(array $user): void
+    {
+        $_SESSION['admin'] = true; // Kompatibilität mit Legacy
+        $_SESSION['user'] = [
+            'id' => $user['id'],
+            'email' => $user['email'],
+            'name' => $user['name'],
+            'role' => $user['role'],
+            'tenant_id' => $user['tenant_id'],
+            'tenant_name' => $user['tenant_name'] ?? null,
+            'tenant_slug' => $user['tenant_slug'] ?? null,
+        ];
+    }
+
+    /**
+     * Setzt Remember-Me Token
+     */
+    private function setRememberToken(int $userId): void
+    {
+        $token = bin2hex(random_bytes(32));
+        $hashedToken = hash('sha256', $token);
+
+        $this->db->update('users', ['remember_token' => $hashedToken], 'id = ?', [$userId]);
+
+        setcookie('remember_token', $token, [
+            'expires' => time() + (86400 * 30), // 30 Tage
+            'path' => '/',
+            'secure' => true,
+            'httponly' => true,
+            'samesite' => 'Lax'
+        ]);
+    }
+
+    /**
+     * Prüft Remember-Me Cookie
+     */
+    public function checkRememberToken(): bool
+    {
+        if (!isset($_COOKIE['remember_token']) || !$this->dbAvailable) {
+            return false;
+        }
+
+        $hashedToken = hash('sha256', $_COOKIE['remember_token']);
+
+        $user = $this->db->fetchOne(
+            "SELECT u.*, t.name as tenant_name, t.slug as tenant_slug
+             FROM users u
+             LEFT JOIN tenants t ON u.tenant_id = t.id
+             WHERE u.remember_token = ?",
+            [$hashedToken]
+        );
+
+        if ($user) {
+            $this->setSession($user);
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Logout
+     */
+    public function logout(): void
+    {
+        // Remember-Token löschen
+        if ($this->isLoggedIn() && $this->dbAvailable) {
+            $userId = $_SESSION['user']['id'] ?? 0;
+            if ($userId > 0) {
+                $this->db->update('users', ['remember_token' => null], 'id = ?', [$userId]);
+            }
+        }
+
+        // Cookie löschen
+        setcookie('remember_token', '', [
+            'expires' => time() - 3600,
+            'path' => '/',
+            'secure' => true,
+            'httponly' => true,
+        ]);
+
+        // Session zerstören
+        $_SESSION = [];
+        if (ini_get("session.use_cookies")) {
+            $params = session_get_cookie_params();
+            setcookie(session_name(), '', time() - 42000,
+                $params["path"], $params["domain"],
+                $params["secure"], $params["httponly"]
+            );
+        }
+        session_destroy();
+    }
+
+    /**
+     * Prüft ob User eingeloggt ist
+     */
+    public function isLoggedIn(): bool
+    {
+        return isset($_SESSION['admin']) && $_SESSION['admin'] === true;
+    }
+
+    /**
+     * Gibt den aktuellen User zurück
+     */
+    public function getUser(): ?array
+    {
+        return $_SESSION['user'] ?? null;
+    }
+
+    /**
+     * Prüft ob User eine bestimmte Rolle hat
+     */
+    public function hasRole(string $role): bool
+    {
+        $user = $this->getUser();
+        return $user && $user['role'] === $role;
+    }
+
+    /**
+     * Prüft ob User Super-Admin ist
+     */
+    public function isSuperAdmin(): bool
+    {
+        return $this->hasRole('super_admin');
+    }
+
+    /**
+     * Prüft ob User Tenant-Admin ist
+     */
+    public function isTenantAdmin(): bool
+    {
+        return $this->hasRole('tenant_admin') || $this->hasRole('super_admin');
+    }
+
+    /**
+     * Gibt die Tenant-ID des aktuellen Users zurück
+     */
+    public function getTenantId(): ?int
+    {
+        $user = $this->getUser();
+        return $user ? ($user['tenant_id'] ?? null) : null;
+    }
+
+    /**
+     * Prüft ob User Zugriff auf einen bestimmten Tenant hat
+     */
+    public function canAccessTenant(int $tenantId): bool
+    {
+        if ($this->isSuperAdmin()) {
+            return true;
+        }
+
+        return $this->getTenantId() === $tenantId;
+    }
+
+    /**
+     * Ändert das Passwort
+     */
+    public function changePassword(int $userId, string $currentPassword, string $newPassword): bool
+    {
+        if (!$this->dbAvailable) {
+            return false;
+        }
+
+        $user = $this->db->fetchOne("SELECT password_hash FROM users WHERE id = ?", [$userId]);
+
+        if (!$user || !password_verify($currentPassword, $user['password_hash'])) {
+            return false;
+        }
+
+        if (strlen($newPassword) < 8) {
+            throw new \Exception('Password must be at least 8 characters');
+        }
+
+        return $this->db->update('users', [
+            'password_hash' => password_hash($newPassword, PASSWORD_ARGON2ID)
+        ], 'id = ?', [$userId]) > 0;
+    }
+
+    /**
+     * Generiert ein Passwort-Reset-Token
+     */
+    public function generateResetToken(string $email): ?string
+    {
+        if (!$this->dbAvailable) {
+            return null;
+        }
+
+        $user = $this->db->fetchOne("SELECT id FROM users WHERE email = ?", [strtolower($email)]);
+
+        if (!$user) {
+            return null; // Keine Info leaken ob Email existiert
+        }
+
+        $token = bin2hex(random_bytes(32));
+        // Token würde normalerweise in separater Tabelle mit Ablaufzeit gespeichert
+        // Für jetzt: vereinfachte Version
+
+        return $token;
+    }
+
+    /**
+     * Middleware: Erfordert Login
+     */
+    public function requireLogin(): void
+    {
+        if (!$this->isLoggedIn()) {
+            if (!$this->checkRememberToken()) {
+                header('Location: /dashboard/login.php');
+                exit;
+            }
+        }
+    }
+
+    /**
+     * Middleware: Erfordert bestimmte Rolle
+     */
+    public function requireRole(string $role): void
+    {
+        $this->requireLogin();
+
+        if (!$this->hasRole($role) && !$this->isSuperAdmin()) {
+            http_response_code(403);
+            echo "Access denied";
+            exit;
+        }
+    }
+}
@@ -0,0 +1,290 @@
+<?php
+/**
+ * StripeService - Stripe API Wrapper
+ */
+
+namespace AuroraLivecam\Billing;
+
+use AuroraLivecam\Core\Database;
+
+class StripeService
+{
+    private ?string $secretKey;
+    private ?string $publicKey;
+    private ?string $webhookSecret;
+    private string $currency;
+    private Database $db;
+
+    public function __construct(?Database $db = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+        $this->loadConfig();
+    }
+
+    /**
+     * Lädt Stripe-Konfiguration
+     */
+    private function loadConfig(): void
+    {
+        $configFile = dirname(__DIR__, 2) . '/config.php';
+
+        if (file_exists($configFile)) {
+            $config = require $configFile;
+            $this->secretKey = $config['stripe']['secret_key'] ?? '';
+            $this->publicKey = $config['stripe']['public_key'] ?? '';
+            $this->webhookSecret = $config['stripe']['webhook_secret'] ?? '';
+            $this->currency = $config['stripe']['currency'] ?? 'chf';
+        } else {
+            $this->secretKey = getenv('STRIPE_SECRET_KEY') ?: '';
+            $this->publicKey = getenv('STRIPE_PUBLIC_KEY') ?: '';
+            $this->webhookSecret = getenv('STRIPE_WEBHOOK_SECRET') ?: '';
+            $this->currency = 'chf';
+        }
+    }
+
+    /**
+     * Prüft ob Stripe konfiguriert ist
+     */
+    public function isConfigured(): bool
+    {
+        return !empty($this->secretKey) && !empty($this->publicKey);
+    }
+
+    /**
+     * Gibt den Public Key zurück
+     */
+    public function getPublicKey(): string
+    {
+        return $this->publicKey ?? '';
+    }
+
+    /**
+     * Erstellt einen Stripe Customer
+     */
+    public function createCustomer(int $tenantId, string $email, string $name): ?string
+    {
+        $response = $this->request('POST', '/v1/customers', [
+            'email' => $email,
+            'name' => $name,
+            'metadata' => [
+                'tenant_id' => $tenantId,
+            ],
+        ]);
+
+        if ($response && isset($response['id'])) {
+            // In DB speichern
+            $this->db->execute(
+                "UPDATE subscriptions SET stripe_customer_id = ? WHERE tenant_id = ?",
+                [$response['id'], $tenantId]
+            );
+            return $response['id'];
+        }
+
+        return null;
+    }
+
+    /**
+     * Erstellt eine Checkout Session
+     */
+    public function createCheckoutSession(int $tenantId, string $priceId, string $successUrl, string $cancelUrl): ?array
+    {
+        // Customer ID holen oder erstellen
+        $customerId = $this->getOrCreateCustomer($tenantId);
+
+        $params = [
+            'customer' => $customerId,
+            'payment_method_types' => ['card'],
+            'line_items' => [[
+                'price' => $priceId,
+                'quantity' => 1,
+            ]],
+            'mode' => 'subscription',
+            'success_url' => $successUrl,
+            'cancel_url' => $cancelUrl,
+            'metadata' => [
+                'tenant_id' => $tenantId,
+            ],
+        ];
+
+        return $this->request('POST', '/v1/checkout/sessions', $params);
+    }
+
+    /**
+     * Erstellt ein Billing Portal Session
+     */
+    public function createPortalSession(int $tenantId, string $returnUrl): ?array
+    {
+        $customerId = $this->getCustomerId($tenantId);
+
+        if (!$customerId) {
+            return null;
+        }
+
+        return $this->request('POST', '/v1/billing_portal/sessions', [
+            'customer' => $customerId,
+            'return_url' => $returnUrl,
+        ]);
+    }
+
+    /**
+     * Holt oder erstellt Customer
+     */
+    private function getOrCreateCustomer(int $tenantId): ?string
+    {
+        $customerId = $this->getCustomerId($tenantId);
+
+        if ($customerId) {
+            return $customerId;
+        }
+
+        // Tenant-Daten laden
+        $tenant = $this->db->fetchOne(
+            "SELECT t.*, u.email, u.name FROM tenants t
+             LEFT JOIN users u ON u.tenant_id = t.id AND u.role = 'tenant_admin'
+             WHERE t.id = ? LIMIT 1",
+            [$tenantId]
+        );
+
+        if (!$tenant) {
+            return null;
+        }
+
+        return $this->createCustomer($tenantId, $tenant['email'], $tenant['name'] ?? $tenant['name']);
+    }
+
+    /**
+     * Holt Customer ID aus DB
+     */
+    private function getCustomerId(int $tenantId): ?string
+    {
+        $sub = $this->db->fetchOne(
+            "SELECT stripe_customer_id FROM subscriptions WHERE tenant_id = ?",
+            [$tenantId]
+        );
+
+        return $sub['stripe_customer_id'] ?? null;
+    }
+
+    /**
+     * Holt Subscription von Stripe
+     */
+    public function getSubscription(string $subscriptionId): ?array
+    {
+        return $this->request('GET', '/v1/subscriptions/' . $subscriptionId);
+    }
+
+    /**
+     * Kündigt Subscription
+     */
+    public function cancelSubscription(string $subscriptionId, bool $immediately = false): ?array
+    {
+        if ($immediately) {
+            return $this->request('DELETE', '/v1/subscriptions/' . $subscriptionId);
+        }
+
+        return $this->request('POST', '/v1/subscriptions/' . $subscriptionId, [
+            'cancel_at_period_end' => true,
+        ]);
+    }
+
+    /**
+     * Holt Rechnungen
+     */
+    public function getInvoices(string $customerId, int $limit = 10): array
+    {
+        $response = $this->request('GET', '/v1/invoices', [
+            'customer' => $customerId,
+            'limit' => $limit,
+        ]);
+
+        return $response['data'] ?? [];
+    }
+
+    /**
+     * Verifiziert Webhook-Signatur
+     */
+    public function verifyWebhook(string $payload, string $signature): ?array
+    {
+        if (empty($this->webhookSecret)) {
+            return json_decode($payload, true);
+        }
+
+        $elements = explode(',', $signature);
+        $timestamp = null;
+        $signatures = [];
+
+        foreach ($elements as $element) {
+            $parts = explode('=', $element, 2);
+            if ($parts[0] === 't') {
+                $timestamp = $parts[1];
+            } elseif ($parts[0] === 'v1') {
+                $signatures[] = $parts[1];
+            }
+        }
+
+        if (!$timestamp || empty($signatures)) {
+            return null;
+        }
+
+        // Toleranz: 5 Minuten
+        if (abs(time() - $timestamp) > 300) {
+            return null;
+        }
+
+        $signedPayload = $timestamp . '.' . $payload;
+        $expectedSignature = hash_hmac('sha256', $signedPayload, $this->webhookSecret);
+
+        foreach ($signatures as $sig) {
+            if (hash_equals($expectedSignature, $sig)) {
+                return json_decode($payload, true);
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Stripe API Request
+     */
+    private function request(string $method, string $endpoint, array $data = []): ?array
+    {
+        if (!$this->isConfigured()) {
+            return null;
+        }
+
+        $url = 'https://api.stripe.com' . $endpoint;
+
+        $ch = curl_init();
+
+        $headers = [
+            'Authorization: Bearer ' . $this->secretKey,
+            'Content-Type: application/x-www-form-urlencoded',
+        ];
+
+        curl_setopt_array($ch, [
+            CURLOPT_URL => $url . ($method === 'GET' && $data ? '?' . http_build_query($data) : ''),
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_HTTPHEADER => $headers,
+            CURLOPT_TIMEOUT => 30,
+        ]);
+
+        if ($method === 'POST') {
+            curl_setopt($ch, CURLOPT_POST, true);
+            curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
+        } elseif ($method === 'DELETE') {
+            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'DELETE');
+        }
+
+        $response = curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        if ($httpCode >= 200 && $httpCode < 300) {
+            return json_decode($response, true);
+        }
+
+        // Log error
+        error_log("Stripe API Error ($httpCode): $response");
+        return null;
+    }
+}
@@ -0,0 +1,285 @@
+<?php
+/**
+ * SubscriptionManager - Verwaltet Subscriptions
+ */
+
+namespace AuroraLivecam\Billing;
+
+use AuroraLivecam\Core\Database;
+
+class SubscriptionManager
+{
+    private Database $db;
+    private StripeService $stripe;
+
+    public function __construct(?Database $db = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+        $this->stripe = new StripeService($this->db);
+    }
+
+    /**
+     * Gibt alle Pläne zurück
+     */
+    public function getPlans(bool $activeOnly = true): array
+    {
+        $sql = "SELECT * FROM plans";
+        if ($activeOnly) {
+            $sql .= " WHERE is_active = 1";
+        }
+        $sql .= " ORDER BY sort_order ASC";
+
+        $plans = $this->db->fetchAll($sql);
+
+        // Features JSON decodieren
+        foreach ($plans as &$plan) {
+            if (isset($plan['features'])) {
+                $plan['features'] = json_decode($plan['features'], true) ?? [];
+            }
+        }
+
+        return $plans;
+    }
+
+    /**
+     * Gibt einen Plan zurück
+     */
+    public function getPlan(int $planId): ?array
+    {
+        $plan = $this->db->fetchOne("SELECT * FROM plans WHERE id = ?", [$planId]);
+
+        if ($plan && isset($plan['features'])) {
+            $plan['features'] = json_decode($plan['features'], true) ?? [];
+        }
+
+        return $plan;
+    }
+
+    /**
+     * Gibt Plan by Slug zurück
+     */
+    public function getPlanBySlug(string $slug): ?array
+    {
+        $plan = $this->db->fetchOne("SELECT * FROM plans WHERE slug = ?", [$slug]);
+
+        if ($plan && isset($plan['features'])) {
+            $plan['features'] = json_decode($plan['features'], true) ?? [];
+        }
+
+        return $plan;
+    }
+
+    /**
+     * Gibt die aktuelle Subscription eines Tenants zurück
+     */
+    public function getSubscription(int $tenantId): ?array
+    {
+        $sub = $this->db->fetchOne(
+            "SELECT s.*, p.name as plan_name, p.slug as plan_slug, p.features as plan_features
+             FROM subscriptions s
+             JOIN plans p ON s.plan_id = p.id
+             WHERE s.tenant_id = ?
+             ORDER BY s.created_at DESC LIMIT 1",
+            [$tenantId]
+        );
+
+        if ($sub && isset($sub['plan_features'])) {
+            $sub['plan_features'] = json_decode($sub['plan_features'], true) ?? [];
+        }
+
+        return $sub;
+    }
+
+    /**
+     * Erstellt oder aktualisiert eine Subscription
+     */
+    public function createOrUpdate(int $tenantId, array $data): int
+    {
+        $existing = $this->db->fetchOne(
+            "SELECT id FROM subscriptions WHERE tenant_id = ?",
+            [$tenantId]
+        );
+
+        if ($existing) {
+            $this->db->update('subscriptions', $data, 'id = ?', [$existing['id']]);
+            return $existing['id'];
+        }
+
+        $data['tenant_id'] = $tenantId;
+        return $this->db->insert('subscriptions', $data);
+    }
+
+    /**
+     * Startet Trial für einen Tenant
+     */
+    public function startTrial(int $tenantId, int $planId = null, int $days = 14): void
+    {
+        if (!$planId) {
+            $freePlan = $this->getPlanBySlug('basic');
+            $planId = $freePlan['id'] ?? 1;
+        }
+
+        $this->createOrUpdate($tenantId, [
+            'plan_id' => $planId,
+            'status' => 'trialing',
+            'current_period_start' => date('Y-m-d H:i:s'),
+            'current_period_end' => date('Y-m-d H:i:s', strtotime("+$days days")),
+        ]);
+
+        // Tenant Status
+        $this->db->update('tenants', [
+            'status' => 'trial',
+            'trial_ends_at' => date('Y-m-d H:i:s', strtotime("+$days days")),
+        ], 'id = ?', [$tenantId]);
+    }
+
+    /**
+     * Aktiviert Subscription nach Zahlung
+     */
+    public function activate(int $tenantId, string $stripeSubscriptionId, int $planId): void
+    {
+        $this->createOrUpdate($tenantId, [
+            'plan_id' => $planId,
+            'stripe_subscription_id' => $stripeSubscriptionId,
+            'status' => 'active',
+            'current_period_start' => date('Y-m-d H:i:s'),
+        ]);
+
+        $this->db->update('tenants', ['status' => 'active', 'plan_id' => $planId], 'id = ?', [$tenantId]);
+    }
+
+    /**
+     * Kündigt Subscription
+     */
+    public function cancel(int $tenantId, bool $immediately = false): bool
+    {
+        $sub = $this->getSubscription($tenantId);
+
+        if (!$sub) {
+            return false;
+        }
+
+        // Bei Stripe kündigen
+        if (!empty($sub['stripe_subscription_id'])) {
+            $this->stripe->cancelSubscription($sub['stripe_subscription_id'], $immediately);
+        }
+
+        $status = $immediately ? 'canceled' : 'active'; // Bleibt aktiv bis Periodenende
+
+        $this->db->update('subscriptions', [
+            'status' => $status,
+            'canceled_at' => date('Y-m-d H:i:s'),
+        ], 'tenant_id = ?', [$tenantId]);
+
+        if ($immediately) {
+            $this->db->update('tenants', ['status' => 'cancelled'], 'id = ?', [$tenantId]);
+        }
+
+        return true;
+    }
+
+    /**
+     * Prüft ob Tenant aktiv ist (Trial oder bezahlt)
+     */
+    public function isActive(int $tenantId): bool
+    {
+        $sub = $this->getSubscription($tenantId);
+
+        if (!$sub) {
+            return false;
+        }
+
+        if ($sub['status'] === 'active') {
+            return true;
+        }
+
+        if ($sub['status'] === 'trialing') {
+            $endDate = strtotime($sub['current_period_end']);
+            return $endDate > time();
+        }
+
+        return false;
+    }
+
+    /**
+     * Gibt verbleibende Trial-Tage zurück
+     */
+    public function getTrialDaysRemaining(int $tenantId): int
+    {
+        $tenant = $this->db->fetchOne(
+            "SELECT trial_ends_at FROM tenants WHERE id = ?",
+            [$tenantId]
+        );
+
+        if (!$tenant || !$tenant['trial_ends_at']) {
+            return 0;
+        }
+
+        $remaining = strtotime($tenant['trial_ends_at']) - time();
+        return max(0, (int)ceil($remaining / 86400));
+    }
+
+    /**
+     * Prüft Feature-Zugriff
+     */
+    public function hasFeature(int $tenantId, string $feature): bool
+    {
+        $sub = $this->getSubscription($tenantId);
+
+        if (!$sub || !isset($sub['plan_features'])) {
+            return false;
+        }
+
+        return !empty($sub['plan_features'][$feature]);
+    }
+
+    /**
+     * Gibt Feature-Limit zurück
+     */
+    public function getFeatureLimit(int $tenantId, string $feature): int
+    {
+        $sub = $this->getSubscription($tenantId);
+
+        if (!$sub || !isset($sub['plan_features'][$feature])) {
+            return 0;
+        }
+
+        $value = $sub['plan_features'][$feature];
+
+        // -1 = unlimited
+        if ($value === -1 || $value === true) {
+            return PHP_INT_MAX;
+        }
+
+        return (int)$value;
+    }
+
+    /**
+     * Speichert Rechnung
+     */
+    public function saveInvoice(int $tenantId, array $invoiceData): void
+    {
+        $this->db->insert('invoices', [
+            'tenant_id' => $tenantId,
+            'stripe_invoice_id' => $invoiceData['id'] ?? null,
+            'amount' => ($invoiceData['amount_paid'] ?? 0) / 100,
+            'currency' => strtoupper($invoiceData['currency'] ?? 'CHF'),
+            'status' => $invoiceData['status'] ?? 'unknown',
+            'paid_at' => isset($invoiceData['status_transitions']['paid_at'])
+                ? date('Y-m-d H:i:s', $invoiceData['status_transitions']['paid_at'])
+                : null,
+            'invoice_pdf_url' => $invoiceData['invoice_pdf'] ?? null,
+        ]);
+    }
+
+    /**
+     * Gibt Rechnungen eines Tenants zurück
+     */
+    public function getInvoices(int $tenantId, int $limit = 10): array
+    {
+        return $this->db->fetchAll(
+            "SELECT * FROM invoices WHERE tenant_id = ? ORDER BY created_at DESC LIMIT ?",
+            [$tenantId, $limit]
+        );
+    }
+}
@@ -0,0 +1,250 @@
+<?php
+/**
+ * WebhookHandler - Verarbeitet Stripe Webhooks
+ */
+
+namespace AuroraLivecam\Billing;
+
+use AuroraLivecam\Core\Database;
+
+class WebhookHandler
+{
+    private Database $db;
+    private StripeService $stripe;
+    private SubscriptionManager $subscriptions;
+
+    public function __construct(?Database $db = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+        $this->stripe = new StripeService($this->db);
+        $this->subscriptions = new SubscriptionManager($this->db);
+    }
+
+    /**
+     * Verarbeitet einen Webhook
+     */
+    public function handle(string $payload, string $signature): array
+    {
+        // Signatur verifizieren
+        $event = $this->stripe->verifyWebhook($payload, $signature);
+
+        if (!$event) {
+            return ['success' => false, 'error' => 'Invalid signature'];
+        }
+
+        $type = $event['type'] ?? '';
+        $data = $event['data']['object'] ?? [];
+
+        try {
+            switch ($type) {
+                case 'checkout.session.completed':
+                    return $this->handleCheckoutComplete($data);
+
+                case 'customer.subscription.created':
+                case 'customer.subscription.updated':
+                    return $this->handleSubscriptionUpdate($data);
+
+                case 'customer.subscription.deleted':
+                    return $this->handleSubscriptionDeleted($data);
+
+                case 'invoice.paid':
+                    return $this->handleInvoicePaid($data);
+
+                case 'invoice.payment_failed':
+                    return $this->handlePaymentFailed($data);
+
+                default:
+                    return ['success' => true, 'message' => 'Event ignored: ' . $type];
+            }
+        } catch (\Exception $e) {
+            error_log("Webhook error: " . $e->getMessage());
+            return ['success' => false, 'error' => $e->getMessage()];
+        }
+    }
+
+    /**
+     * Checkout abgeschlossen
+     */
+    private function handleCheckoutComplete(array $session): array
+    {
+        $tenantId = $session['metadata']['tenant_id'] ?? null;
+        $subscriptionId = $session['subscription'] ?? null;
+
+        if (!$tenantId || !$subscriptionId) {
+            return ['success' => false, 'error' => 'Missing tenant_id or subscription'];
+        }
+
+        // Subscription-Details von Stripe holen
+        $subscription = $this->stripe->getSubscription($subscriptionId);
+
+        if (!$subscription) {
+            return ['success' => false, 'error' => 'Could not fetch subscription'];
+        }
+
+        // Plan aus Stripe Price ID ermitteln
+        $priceId = $subscription['items']['data'][0]['price']['id'] ?? null;
+        $plan = $this->db->fetchOne(
+            "SELECT id FROM plans WHERE stripe_price_id = ?",
+            [$priceId]
+        );
+
+        $planId = $plan['id'] ?? 1;
+
+        // Subscription aktivieren
+        $this->subscriptions->activate($tenantId, $subscriptionId, $planId);
+
+        // Customer ID speichern
+        $this->db->update('subscriptions', [
+            'stripe_customer_id' => $session['customer'],
+        ], 'tenant_id = ?', [$tenantId]);
+
+        return ['success' => true, 'message' => 'Subscription activated'];
+    }
+
+    /**
+     * Subscription erstellt/aktualisiert
+     */
+    private function handleSubscriptionUpdate(array $subscription): array
+    {
+        $customerId = $subscription['customer'] ?? null;
+
+        if (!$customerId) {
+            return ['success' => false, 'error' => 'No customer ID'];
+        }
+
+        // Tenant über Customer ID finden
+        $sub = $this->db->fetchOne(
+            "SELECT tenant_id FROM subscriptions WHERE stripe_customer_id = ?",
+            [$customerId]
+        );
+
+        if (!$sub) {
+            return ['success' => true, 'message' => 'Customer not found in DB'];
+        }
+
+        $tenantId = $sub['tenant_id'];
+        $status = $this->mapStripeStatus($subscription['status']);
+
+        $this->db->update('subscriptions', [
+            'stripe_subscription_id' => $subscription['id'],
+            'status' => $status,
+            'current_period_start' => date('Y-m-d H:i:s', $subscription['current_period_start']),
+            'current_period_end' => date('Y-m-d H:i:s', $subscription['current_period_end']),
+        ], 'tenant_id = ?', [$tenantId]);
+
+        // Tenant-Status aktualisieren
+        $tenantStatus = in_array($status, ['active', 'trialing']) ? 'active' : 'suspended';
+        $this->db->update('tenants', ['status' => $tenantStatus], 'id = ?', [$tenantId]);
+
+        return ['success' => true, 'message' => 'Subscription updated'];
+    }
+
+    /**
+     * Subscription gelöscht/gekündigt
+     */
+    private function handleSubscriptionDeleted(array $subscription): array
+    {
+        $customerId = $subscription['customer'] ?? null;
+
+        if (!$customerId) {
+            return ['success' => false, 'error' => 'No customer ID'];
+        }
+
+        $sub = $this->db->fetchOne(
+            "SELECT tenant_id FROM subscriptions WHERE stripe_customer_id = ?",
+            [$customerId]
+        );
+
+        if (!$sub) {
+            return ['success' => true, 'message' => 'Customer not found'];
+        }
+
+        $this->db->update('subscriptions', [
+            'status' => 'canceled',
+            'canceled_at' => date('Y-m-d H:i:s'),
+        ], 'tenant_id = ?', [$sub['tenant_id']]);
+
+        // Downgrade zu Free-Plan
+        $freePlan = $this->db->fetchOne("SELECT id FROM plans WHERE slug = 'free'");
+        if ($freePlan) {
+            $this->db->update('tenants', [
+                'status' => 'active',
+                'plan_id' => $freePlan['id'],
+            ], 'id = ?', [$sub['tenant_id']]);
+        }
+
+        return ['success' => true, 'message' => 'Subscription canceled'];
+    }
+
+    /**
+     * Rechnung bezahlt
+     */
+    private function handleInvoicePaid(array $invoice): array
+    {
+        $customerId = $invoice['customer'] ?? null;
+
+        if (!$customerId) {
+            return ['success' => false, 'error' => 'No customer ID'];
+        }
+
+        $sub = $this->db->fetchOne(
+            "SELECT tenant_id FROM subscriptions WHERE stripe_customer_id = ?",
+            [$customerId]
+        );
+
+        if (!$sub) {
+            return ['success' => true, 'message' => 'Customer not found'];
+        }
+
+        // Rechnung speichern
+        $this->subscriptions->saveInvoice($sub['tenant_id'], $invoice);
+
+        return ['success' => true, 'message' => 'Invoice saved'];
+    }
+
+    /**
+     * Zahlung fehlgeschlagen
+     */
+    private function handlePaymentFailed(array $invoice): array
+    {
+        $customerId = $invoice['customer'] ?? null;
+
+        if (!$customerId) {
+            return ['success' => false, 'error' => 'No customer ID'];
+        }
+
+        $sub = $this->db->fetchOne(
+            "SELECT tenant_id FROM subscriptions WHERE stripe_customer_id = ?",
+            [$customerId]
+        );
+
+        if (!$sub) {
+            return ['success' => true, 'message' => 'Customer not found'];
+        }
+
+        // Status auf past_due setzen
+        $this->db->update('subscriptions', ['status' => 'past_due'], 'tenant_id = ?', [$sub['tenant_id']]);
+
+        // TODO: E-Mail an Tenant senden
+
+        return ['success' => true, 'message' => 'Payment failure recorded'];
+    }
+
+    /**
+     * Mappt Stripe-Status auf DB-Status
+     */
+    private function mapStripeStatus(string $stripeStatus): string
+    {
+        $map = [
+            'active' => 'active',
+            'trialing' => 'trialing',
+            'past_due' => 'past_due',
+            'canceled' => 'canceled',
+            'unpaid' => 'unpaid',
+            'incomplete' => 'incomplete',
+            'incomplete_expired' => 'canceled',
+        ];
+
+        return $map[$stripeStatus] ?? 'unknown';
+    }
+}
@@ -0,0 +1,215 @@
+<?php
+/**
+ * Database - PDO Wrapper mit Singleton Pattern
+ *
+ * Verwendung:
+ *   $db = Database::getInstance();
+ *   $users = $db->fetchAll("SELECT * FROM users WHERE tenant_id = ?", [$tenantId]);
+ */
+
+namespace AuroraLivecam\Core;
+
+use PDO;
+use PDOException;
+use Exception;
+
+class Database
+{
+    private static ?Database $instance = null;
+    private ?PDO $pdo = null;
+    private array $config;
+
+    private function __construct()
+    {
+        $this->config = $this->loadConfig();
+    }
+
+    /**
+     * Singleton: Gibt die einzige Instanz zurück
+     */
+    public static function getInstance(): Database
+    {
+        if (self::$instance === null) {
+            self::$instance = new self();
+        }
+        return self::$instance;
+    }
+
+    /**
+     * Lädt die Datenbank-Konfiguration
+     */
+    private function loadConfig(): array
+    {
+        // Versuche .env oder config.php zu laden
+        $configFile = dirname(__DIR__, 2) . '/config.php';
+
+        if (file_exists($configFile)) {
+            $config = require $configFile;
+            return $config['database'] ?? [];
+        }
+
+        // Fallback auf Umgebungsvariablen
+        return [
+            'host' => getenv('DB_HOST') ?: 'localhost',
+            'port' => getenv('DB_PORT') ?: 3306,
+            'database' => getenv('DB_DATABASE') ?: 'aurora_livecam',
+            'username' => getenv('DB_USERNAME') ?: 'root',
+            'password' => getenv('DB_PASSWORD') ?: '',
+            'charset' => 'utf8mb4',
+        ];
+    }
+
+    /**
+     * Stellt die Datenbankverbindung her (Lazy Loading)
+     */
+    public function connect(): PDO
+    {
+        if ($this->pdo !== null) {
+            return $this->pdo;
+        }
+
+        $dsn = sprintf(
+            'mysql:host=%s;port=%d;dbname=%s;charset=%s',
+            $this->config['host'],
+            $this->config['port'],
+            $this->config['database'],
+            $this->config['charset']
+        );
+
+        try {
+            $this->pdo = new PDO($dsn, $this->config['username'], $this->config['password'], [
+                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+                PDO::ATTR_EMULATE_PREPARES => false,
+                PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8mb4 COLLATE utf8mb4_unicode_ci"
+            ]);
+        } catch (PDOException $e) {
+            throw new Exception('Database connection failed: ' . $e->getMessage());
+        }
+
+        return $this->pdo;
+    }
+
+    /**
+     * Führt eine Query aus und gibt alle Ergebnisse zurück
+     */
+    public function fetchAll(string $sql, array $params = []): array
+    {
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute($params);
+        return $stmt->fetchAll();
+    }
+
+    /**
+     * Führt eine Query aus und gibt eine Zeile zurück
+     */
+    public function fetchOne(string $sql, array $params = []): ?array
+    {
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute($params);
+        $result = $stmt->fetch();
+        return $result ?: null;
+    }
+
+    /**
+     * Führt eine Query aus und gibt einen einzelnen Wert zurück
+     */
+    public function fetchColumn(string $sql, array $params = [], int $column = 0): mixed
+    {
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute($params);
+        return $stmt->fetchColumn($column);
+    }
+
+    /**
+     * Führt INSERT/UPDATE/DELETE aus und gibt die Anzahl betroffener Zeilen zurück
+     */
+    public function execute(string $sql, array $params = []): int
+    {
+        $stmt = $this->connect()->prepare($sql);
+        $stmt->execute($params);
+        return $stmt->rowCount();
+    }
+
+    /**
+     * INSERT und gibt die neue ID zurück
+     */
+    public function insert(string $table, array $data): int
+    {
+        $columns = implode(', ', array_map(fn($col) => "`$col`", array_keys($data)));
+        $placeholders = implode(', ', array_fill(0, count($data), '?'));
+
+        $sql = "INSERT INTO `$table` ($columns) VALUES ($placeholders)";
+        $this->execute($sql, array_values($data));
+
+        return (int) $this->connect()->lastInsertId();
+    }
+
+    /**
+     * UPDATE mit WHERE-Bedingung
+     */
+    public function update(string $table, array $data, string $where, array $whereParams = []): int
+    {
+        $set = implode(', ', array_map(fn($col) => "`$col` = ?", array_keys($data)));
+        $sql = "UPDATE `$table` SET $set WHERE $where";
+
+        return $this->execute($sql, [...array_values($data), ...$whereParams]);
+    }
+
+    /**
+     * DELETE mit WHERE-Bedingung
+     */
+    public function delete(string $table, string $where, array $params = []): int
+    {
+        return $this->execute("DELETE FROM `$table` WHERE $where", $params);
+    }
+
+    /**
+     * Startet eine Transaktion
+     */
+    public function beginTransaction(): bool
+    {
+        return $this->connect()->beginTransaction();
+    }
+
+    /**
+     * Bestätigt eine Transaktion
+     */
+    public function commit(): bool
+    {
+        return $this->connect()->commit();
+    }
+
+    /**
+     * Macht eine Transaktion rückgängig
+     */
+    public function rollback(): bool
+    {
+        return $this->connect()->rollBack();
+    }
+
+    /**
+     * Prüft ob eine Datenbankverbindung besteht
+     */
+    public function isConnected(): bool
+    {
+        return $this->pdo !== null;
+    }
+
+    /**
+     * Gibt die PDO-Instanz direkt zurück (für komplexe Queries)
+     */
+    public function getPdo(): PDO
+    {
+        return $this->connect();
+    }
+
+    // Prevent cloning
+    private function __clone() {}
+
+    // Prevent unserialization
+    public function __wakeup()
+    {
+        throw new Exception("Cannot unserialize singleton");
+    }
+}
@@ -0,0 +1,316 @@
+<?php
+/**
+ * TenantResolver - Ermittelt den aktuellen Tenant basierend auf Domain
+ *
+ * Ersetzt den hardcoded Domain-Switch in index.php
+ */
+
+namespace AuroraLivecam\Core;
+
+class TenantResolver
+{
+    private Database $db;
+    private ?array $currentTenant = null;
+    private ?array $currentBranding = null;
+    private static ?TenantResolver $instance = null;
+
+    // Cache für Domain-Lookups (vermeidet DB-Anfragen bei jedem Request)
+    private static array $domainCache = [];
+
+    public function __construct(?Database $db = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+    }
+
+    /**
+     * Singleton für globalen Zugriff
+     */
+    public static function getInstance(): TenantResolver
+    {
+        if (self::$instance === null) {
+            self::$instance = new self();
+        }
+        return self::$instance;
+    }
+
+    /**
+     * Löst die aktuelle Domain auf und gibt den Tenant zurück
+     */
+    public function resolve(?string $domain = null): ?array
+    {
+        $domain = $domain ?? $this->getCurrentDomain();
+
+        if ($this->currentTenant !== null && ($this->currentTenant['domain'] ?? '') === $domain) {
+            return $this->currentTenant;
+        }
+
+        // Cache prüfen
+        if (isset(self::$domainCache[$domain])) {
+            $this->currentTenant = self::$domainCache[$domain];
+            return $this->currentTenant;
+        }
+
+        // Aus DB laden
+        $this->currentTenant = $this->loadTenantByDomain($domain);
+
+        // In Cache speichern
+        self::$domainCache[$domain] = $this->currentTenant;
+
+        return $this->currentTenant;
+    }
+
+    /**
+     * Lädt einen Tenant anhand der Domain aus der Datenbank
+     */
+    private function loadTenantByDomain(string $domain): ?array
+    {
+        // Normalisiere Domain (ohne www.)
+        $normalizedDomain = $this->normalizeDomain($domain);
+
+        try {
+            $sql = "
+                SELECT
+                    t.*,
+                    td.domain,
+                    td.is_primary,
+                    p.name as plan_name,
+                    p.slug as plan_slug,
+                    p.features as plan_features
+                FROM tenant_domains td
+                JOIN tenants t ON td.tenant_id = t.id
+                LEFT JOIN plans p ON t.plan_id = p.id
+                WHERE td.domain = ? OR td.domain = ?
+                LIMIT 1
+            ";
+
+            $tenant = $this->db->fetchOne($sql, [$domain, $normalizedDomain]);
+
+            if ($tenant && isset($tenant['plan_features'])) {
+                $tenant['plan_features'] = json_decode($tenant['plan_features'], true);
+            }
+
+            return $tenant;
+        } catch (\Exception $e) {
+            // Fallback: Keine DB-Verbindung oder Tabelle existiert nicht
+            return $this->getFallbackTenant($domain);
+        }
+    }
+
+    /**
+     * Fallback für Legacy-Modus (ohne Datenbank)
+     * Unterstützt die alten hardcoded Domains
+     */
+    private function getFallbackTenant(string $domain): ?array
+    {
+        $normalizedDomain = $this->normalizeDomain($domain);
+
+        // Alte seecam.ch Konfiguration
+        if (str_contains($normalizedDomain, 'seecam.ch')) {
+            return [
+                'id' => 0,
+                'uuid' => 'legacy-seecam',
+                'name' => 'Seecam',
+                'slug' => 'seecam',
+                'status' => 'active',
+                'domain' => $domain,
+                'is_legacy' => true,
+                'branding' => [
+                    'site_name' => 'Seecam',
+                    'site_name_full' => 'Seecam.ch - Live Webcam',
+                    'tagline' => 'Ihre Live-Webcam',
+                    'primary_color' => '#667eea',
+                    'secondary_color' => '#764ba2',
+                ],
+            ];
+        }
+
+        // Default: Aurora
+        if (str_contains($normalizedDomain, 'aurora') ||
+            str_contains($normalizedDomain, 'localhost') ||
+            $normalizedDomain === '127.0.0.1') {
+            return [
+                'id' => 0,
+                'uuid' => 'legacy-aurora',
+                'name' => 'Aurora Weather Livecam',
+                'slug' => 'aurora',
+                'status' => 'active',
+                'domain' => $domain,
+                'is_legacy' => true,
+                'branding' => [
+                    'site_name' => 'Aurora',
+                    'site_name_full' => 'Aurora Weather Livecam - Zürich Oberland',
+                    'tagline' => 'Wetter Webcam Schweiz',
+                    'primary_color' => '#667eea',
+                    'secondary_color' => '#764ba2',
+                ],
+            ];
+        }
+
+        // Unbekannte Domain - Default Tenant
+        return [
+            'id' => 0,
+            'uuid' => 'default',
+            'name' => 'Livecam',
+            'slug' => 'default',
+            'status' => 'active',
+            'domain' => $domain,
+            'is_legacy' => true,
+            'branding' => [
+                'site_name' => 'Livecam',
+                'site_name_full' => 'Livecam',
+                'primary_color' => '#667eea',
+                'secondary_color' => '#764ba2',
+            ],
+        ];
+    }
+
+    /**
+     * Gibt das Branding des aktuellen Tenants zurück
+     */
+    public function getBranding(): array
+    {
+        if ($this->currentBranding !== null) {
+            return $this->currentBranding;
+        }
+
+        $tenant = $this->resolve();
+
+        if (!$tenant) {
+            return $this->getDefaultBranding();
+        }
+
+        // Legacy-Tenant hat Branding inline
+        if (isset($tenant['is_legacy']) && $tenant['is_legacy']) {
+            $this->currentBranding = $tenant['branding'] ?? $this->getDefaultBranding();
+            return $this->currentBranding;
+        }
+
+        // Aus DB laden
+        try {
+            $branding = $this->db->fetchOne(
+                "SELECT * FROM tenant_branding WHERE tenant_id = ?",
+                [$tenant['id']]
+            );
+
+            $this->currentBranding = $branding ?: $this->getDefaultBranding();
+        } catch (\Exception $e) {
+            $this->currentBranding = $this->getDefaultBranding();
+        }
+
+        return $this->currentBranding;
+    }
+
+    /**
+     * Default Branding
+     */
+    private function getDefaultBranding(): array
+    {
+        return [
+            'site_name' => 'Livecam',
+            'site_name_full' => 'Live Webcam',
+            'tagline' => '',
+            'logo_path' => null,
+            'favicon_path' => null,
+            'primary_color' => '#667eea',
+            'secondary_color' => '#764ba2',
+            'accent_color' => '#f093fb',
+            'welcome_text_de' => '',
+            'welcome_text_en' => '',
+            'footer_text' => '',
+            'custom_css' => '',
+        ];
+    }
+
+    /**
+     * Gibt die aktuelle Domain zurück
+     */
+    public function getCurrentDomain(): string
+    {
+        return $_SERVER['HTTP_HOST'] ?? 'localhost';
+    }
+
+    /**
+     * Normalisiert eine Domain (entfernt www.)
+     */
+    private function normalizeDomain(string $domain): string
+    {
+        return preg_replace('/^www\./i', '', strtolower($domain));
+    }
+
+    /**
+     * Prüft ob der aktuelle Tenant aktiv ist
+     */
+    public function isActive(): bool
+    {
+        $tenant = $this->resolve();
+        return $tenant && in_array($tenant['status'], ['active', 'trial']);
+    }
+
+    /**
+     * Prüft ob der Tenant im Trial ist
+     */
+    public function isTrial(): bool
+    {
+        $tenant = $this->resolve();
+        return $tenant && $tenant['status'] === 'trial';
+    }
+
+    /**
+     * Gibt die Tenant-ID zurück (oder 0 für Legacy)
+     */
+    public function getTenantId(): int
+    {
+        $tenant = $this->resolve();
+        return $tenant['id'] ?? 0;
+    }
+
+    /**
+     * Gibt den Tenant-Slug zurück
+     */
+    public function getTenantSlug(): string
+    {
+        $tenant = $this->resolve();
+        return $tenant['slug'] ?? 'default';
+    }
+
+    /**
+     * Prüft ob Multi-Tenant-Modus aktiv ist (DB vorhanden)
+     */
+    public function isMultiTenantEnabled(): bool
+    {
+        $tenant = $this->resolve();
+        return $tenant && !isset($tenant['is_legacy']);
+    }
+
+    /**
+     * Gibt alle Domains eines Tenants zurück
+     */
+    public function getTenantDomains(int $tenantId): array
+    {
+        try {
+            return $this->db->fetchAll(
+                "SELECT * FROM tenant_domains WHERE tenant_id = ? ORDER BY is_primary DESC",
+                [$tenantId]
+            );
+        } catch (\Exception $e) {
+            return [];
+        }
+    }
+
+    /**
+     * Setzt den aktuellen Tenant manuell (für Tests oder CLI)
+     */
+    public function setTenant(array $tenant): void
+    {
+        $this->currentTenant = $tenant;
+        $this->currentBranding = null;
+    }
+
+    /**
+     * Leert den Cache
+     */
+    public static function clearCache(): void
+    {
+        self::$domainCache = [];
+    }
+}
@@ -0,0 +1,366 @@
+<?php
+/**
+ * OnboardingManager - Verwaltet den Onboarding-Prozess
+ */
+
+namespace AuroraLivecam\Onboarding;
+
+use AuroraLivecam\Core\Database;
+use AuroraLivecam\Tenant\TenantManager;
+use AuroraLivecam\Auth\AuthManager;
+
+class OnboardingManager
+{
+    private Database $db;
+    private TenantManager $tenantManager;
+    private StreamValidator $streamValidator;
+
+    public const STEP_REGISTER = 1;
+    public const STEP_VERIFY_EMAIL = 2;
+    public const STEP_STREAM = 3;
+    public const STEP_BRANDING = 4;
+    public const STEP_COMPLETE = 5;
+
+    public function __construct(?Database $db = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+        $this->tenantManager = new TenantManager($this->db);
+        $this->streamValidator = new StreamValidator();
+    }
+
+    /**
+     * Startet den Onboarding-Prozess (Registrierung)
+     */
+    public function register(array $data): array
+    {
+        $errors = $this->validateRegistration($data);
+
+        if (!empty($errors)) {
+            return ['success' => false, 'errors' => $errors];
+        }
+
+        try {
+            $this->db->beginTransaction();
+
+            // Tenant erstellen
+            $tenantId = $this->tenantManager->create([
+                'name' => $data['company_name'] ?? $data['name'],
+                'email' => $data['email'],
+                'subdomain' => $this->generateSubdomain($data['company_name'] ?? $data['name']),
+                'stream_url' => $data['stream_url'] ?? '',
+                'stream_type' => $data['stream_type'] ?? 'hls',
+            ]);
+
+            // Admin-User für den Tenant erstellen
+            $auth = new AuthManager($this->db);
+            $userId = $auth->register([
+                'tenant_id' => $tenantId,
+                'email' => $data['email'],
+                'password' => $data['password'],
+                'name' => $data['name'],
+                'role' => 'tenant_admin',
+            ]);
+
+            // Verification-Token generieren
+            $verificationToken = $this->generateVerificationToken($userId);
+
+            $this->db->commit();
+
+            return [
+                'success' => true,
+                'tenant_id' => $tenantId,
+                'user_id' => $userId,
+                'verification_token' => $verificationToken,
+                'next_step' => self::STEP_VERIFY_EMAIL,
+            ];
+
+        } catch (\Exception $e) {
+            $this->db->rollback();
+            return ['success' => false, 'errors' => ['general' => $e->getMessage()]];
+        }
+    }
+
+    /**
+     * Validiert Registrierungsdaten
+     */
+    private function validateRegistration(array $data): array
+    {
+        $errors = [];
+
+        // Name
+        if (empty($data['name'])) {
+            $errors['name'] = 'Name ist erforderlich';
+        }
+
+        // Company/Site Name
+        if (empty($data['company_name'])) {
+            $errors['company_name'] = 'Firmen-/Site-Name ist erforderlich';
+        }
+
+        // Email
+        if (empty($data['email'])) {
+            $errors['email'] = 'E-Mail ist erforderlich';
+        } elseif (!filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
+            $errors['email'] = 'Ungültige E-Mail-Adresse';
+        } else {
+            // Prüfe ob Email bereits existiert
+            $existing = $this->db->fetchOne("SELECT id FROM users WHERE email = ?", [strtolower($data['email'])]);
+            if ($existing) {
+                $errors['email'] = 'Diese E-Mail-Adresse ist bereits registriert';
+            }
+        }
+
+        // Password
+        if (empty($data['password'])) {
+            $errors['password'] = 'Passwort ist erforderlich';
+        } elseif (strlen($data['password']) < 8) {
+            $errors['password'] = 'Passwort muss mindestens 8 Zeichen lang sein';
+        }
+
+        // Password Confirmation
+        if (($data['password'] ?? '') !== ($data['password_confirm'] ?? '')) {
+            $errors['password_confirm'] = 'Passwörter stimmen nicht überein';
+        }
+
+        // Stream URL (optional, aber wenn angegeben, validieren)
+        if (!empty($data['stream_url'])) {
+            $validation = $this->streamValidator->validate($data['stream_url']);
+            if (!$validation['valid']) {
+                $errors['stream_url'] = $validation['error'] ?? 'Stream-URL ungültig';
+            }
+        }
+
+        // Terms
+        if (empty($data['accept_terms'])) {
+            $errors['accept_terms'] = 'Sie müssen die AGB akzeptieren';
+        }
+
+        return $errors;
+    }
+
+    /**
+     * Generiert eine Subdomain aus dem Firmennamen
+     */
+    private function generateSubdomain(string $name): string
+    {
+        // Umlaute ersetzen
+        $replacements = ['ä' => 'ae', 'ö' => 'oe', 'ü' => 'ue', 'ß' => 'ss'];
+        $slug = str_replace(array_keys($replacements), array_values($replacements), strtolower($name));
+
+        // Nur alphanumerische Zeichen und Bindestriche
+        $slug = preg_replace('/[^a-z0-9]+/', '-', $slug);
+        $slug = trim($slug, '-');
+
+        // Max 30 Zeichen
+        $slug = substr($slug, 0, 30);
+
+        // Eindeutigkeit prüfen
+        $baseSlug = $slug;
+        $counter = 1;
+        while (!$this->tenantManager->isDomainAvailable($slug . '.aurora-livecam.com')) {
+            $slug = $baseSlug . '-' . $counter;
+            $counter++;
+        }
+
+        return $slug;
+    }
+
+    /**
+     * Generiert einen E-Mail-Verification-Token
+     */
+    private function generateVerificationToken(int $userId): string
+    {
+        $token = bin2hex(random_bytes(32));
+
+        // Token in einer separaten Tabelle speichern (oder im User)
+        // Vereinfacht: Wir nutzen remember_token temporär
+        $this->db->update('users', ['remember_token' => hash('sha256', $token)], 'id = ?', [$userId]);
+
+        return $token;
+    }
+
+    /**
+     * Verifiziert E-Mail-Adresse
+     */
+    public function verifyEmail(string $token): array
+    {
+        $hashedToken = hash('sha256', $token);
+
+        $user = $this->db->fetchOne(
+            "SELECT id, tenant_id FROM users WHERE remember_token = ? AND email_verified_at IS NULL",
+            [$hashedToken]
+        );
+
+        if (!$user) {
+            return ['success' => false, 'error' => 'Ungültiger oder abgelaufener Token'];
+        }
+
+        $this->db->update('users', [
+            'email_verified_at' => date('Y-m-d H:i:s'),
+            'remember_token' => null,
+        ], 'id = ?', [$user['id']]);
+
+        // Onboarding-Status aktualisieren
+        $this->updateOnboardingStep($user['tenant_id'], self::STEP_STREAM);
+
+        return [
+            'success' => true,
+            'user_id' => $user['id'],
+            'tenant_id' => $user['tenant_id'],
+            'next_step' => self::STEP_STREAM,
+        ];
+    }
+
+    /**
+     * Speichert Stream-Konfiguration
+     */
+    public function saveStream(int $tenantId, string $url, string $type = 'hls'): array
+    {
+        // Validieren
+        $validation = $this->streamValidator->validate($url);
+
+        if (!$validation['valid']) {
+            return ['success' => false, 'error' => $validation['error']];
+        }
+
+        // Speichern
+        $existing = $this->db->fetchOne(
+            "SELECT id FROM tenant_streams WHERE tenant_id = ? AND is_primary = 1",
+            [$tenantId]
+        );
+
+        if ($existing) {
+            $this->db->update('tenant_streams', [
+                'stream_url' => $url,
+                'stream_type' => $validation['type'] ?? $type,
+                'last_status' => 'online',
+                'last_check_at' => date('Y-m-d H:i:s'),
+            ], 'id = ?', [$existing['id']]);
+        } else {
+            $this->db->insert('tenant_streams', [
+                'tenant_id' => $tenantId,
+                'stream_url' => $url,
+                'stream_type' => $validation['type'] ?? $type,
+                'is_primary' => 1,
+                'last_status' => 'online',
+                'last_check_at' => date('Y-m-d H:i:s'),
+            ]);
+        }
+
+        // Onboarding-Schritt aktualisieren
+        $this->updateOnboardingStep($tenantId, self::STEP_BRANDING, ['stream_verified' => 1]);
+
+        return [
+            'success' => true,
+            'stream_type' => $validation['type'],
+            'next_step' => self::STEP_BRANDING,
+        ];
+    }
+
+    /**
+     * Speichert Basis-Branding
+     */
+    public function saveBranding(int $tenantId, array $branding): array
+    {
+        $this->tenantManager->updateBranding($tenantId, $branding);
+
+        // Onboarding-Schritt aktualisieren
+        $this->updateOnboardingStep($tenantId, self::STEP_COMPLETE, ['branding_configured' => 1]);
+
+        return [
+            'success' => true,
+            'next_step' => self::STEP_COMPLETE,
+        ];
+    }
+
+    /**
+     * Schliesst das Onboarding ab
+     */
+    public function complete(int $tenantId): array
+    {
+        $this->db->update('tenant_onboarding', [
+            'current_step' => self::STEP_COMPLETE,
+            'completed_at' => date('Y-m-d H:i:s'),
+        ], 'tenant_id = ?', [$tenantId]);
+
+        // Tenant aktivieren
+        $this->tenantManager->activate($tenantId);
+
+        return ['success' => true, 'completed' => true];
+    }
+
+    /**
+     * Aktualisiert den Onboarding-Schritt
+     */
+    private function updateOnboardingStep(int $tenantId, int $step, array $extra = []): void
+    {
+        $data = array_merge(['current_step' => $step], $extra);
+        $this->db->update('tenant_onboarding', $data, 'tenant_id = ?', [$tenantId]);
+    }
+
+    /**
+     * Gibt den aktuellen Onboarding-Status zurück
+     */
+    public function getStatus(int $tenantId): array
+    {
+        $onboarding = $this->db->fetchOne(
+            "SELECT * FROM tenant_onboarding WHERE tenant_id = ?",
+            [$tenantId]
+        );
+
+        if (!$onboarding) {
+            return [
+                'current_step' => self::STEP_REGISTER,
+                'completed' => false,
+            ];
+        }
+
+        return [
+            'current_step' => (int)$onboarding['current_step'],
+            'stream_verified' => (bool)$onboarding['stream_verified'],
+            'branding_configured' => (bool)$onboarding['branding_configured'],
+            'payment_configured' => (bool)$onboarding['payment_configured'],
+            'completed' => $onboarding['completed_at'] !== null,
+            'completed_at' => $onboarding['completed_at'],
+        ];
+    }
+
+    /**
+     * Prüft ob E-Mail-Verification erforderlich ist
+     */
+    public function requiresEmailVerification(): bool
+    {
+        // Aus Settings laden
+        $settingsFile = dirname(__DIR__, 2) . '/SettingsManager.php';
+        if (file_exists($settingsFile)) {
+            require_once $settingsFile;
+            $settings = new \SettingsManager();
+            return $settings->get('saas_features.email_verification_required') ?? true;
+        }
+        return true;
+    }
+
+    /**
+     * Sendet Verification-E-Mail erneut
+     */
+    public function resendVerification(int $userId): array
+    {
+        $user = $this->db->fetchOne("SELECT email, email_verified_at FROM users WHERE id = ?", [$userId]);
+
+        if (!$user) {
+            return ['success' => false, 'error' => 'Benutzer nicht gefunden'];
+        }
+
+        if ($user['email_verified_at']) {
+            return ['success' => false, 'error' => 'E-Mail bereits verifiziert'];
+        }
+
+        $token = $this->generateVerificationToken($userId);
+
+        return [
+            'success' => true,
+            'token' => $token,
+            'email' => $user['email'],
+        ];
+    }
+}
@@ -0,0 +1,263 @@
+<?php
+/**
+ * StreamValidator - Validiert Stream-URLs
+ */
+
+namespace AuroraLivecam\Onboarding;
+
+class StreamValidator
+{
+    private array $supportedTypes = ['hls', 'rtmp', 'webrtc', 'iframe'];
+    private int $timeout = 10;
+
+    /**
+     * Validiert eine Stream-URL
+     */
+    public function validate(string $url): array
+    {
+        $result = [
+            'valid' => false,
+            'type' => null,
+            'error' => null,
+            'details' => [],
+        ];
+
+        // URL-Format prüfen
+        if (!filter_var($url, FILTER_VALIDATE_URL)) {
+            $result['error'] = 'Ungültiges URL-Format';
+            return $result;
+        }
+
+        // Stream-Typ erkennen
+        $type = $this->detectStreamType($url);
+        $result['type'] = $type;
+        $result['details']['detected_type'] = $type;
+
+        // Je nach Typ validieren
+        switch ($type) {
+            case 'hls':
+                return $this->validateHls($url, $result);
+            case 'rtmp':
+                return $this->validateRtmp($url, $result);
+            case 'iframe':
+                return $this->validateIframe($url, $result);
+            default:
+                // Generische HTTP-Prüfung
+                return $this->validateHttp($url, $result);
+        }
+    }
+
+    /**
+     * Erkennt den Stream-Typ anhand der URL
+     */
+    public function detectStreamType(string $url): string
+    {
+        $url = strtolower($url);
+
+        if (str_contains($url, '.m3u8')) {
+            return 'hls';
+        }
+
+        if (str_starts_with($url, 'rtmp://') || str_starts_with($url, 'rtmps://')) {
+            return 'rtmp';
+        }
+
+        if (str_contains($url, 'youtube.com') || str_contains($url, 'youtu.be') ||
+            str_contains($url, 'vimeo.com') || str_contains($url, 'twitch.tv')) {
+            return 'iframe';
+        }
+
+        if (str_contains($url, '.mp4') || str_contains($url, '.webm')) {
+            return 'video';
+        }
+
+        return 'unknown';
+    }
+
+    /**
+     * Validiert HLS-Stream
+     */
+    private function validateHls(string $url, array $result): array
+    {
+        $ch = curl_init();
+        curl_setopt_array($ch, [
+            CURLOPT_URL => $url,
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_TIMEOUT => $this->timeout,
+            CURLOPT_FOLLOWLOCATION => true,
+            CURLOPT_SSL_VERIFYPEER => false,
+            CURLOPT_HTTPHEADER => [
+                'User-Agent: Mozilla/5.0 (compatible; StreamValidator/1.0)'
+            ],
+        ]);
+
+        $response = curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        $contentType = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);
+        $error = curl_error($ch);
+        curl_close($ch);
+
+        $result['details']['http_code'] = $httpCode;
+        $result['details']['content_type'] = $contentType;
+
+        if ($error) {
+            $result['error'] = 'Verbindungsfehler: ' . $error;
+            return $result;
+        }
+
+        if ($httpCode !== 200) {
+            $result['error'] = "HTTP-Fehler: $httpCode";
+            return $result;
+        }
+
+        // Prüfe ob es ein gültiges M3U8 ist
+        if (!str_contains($response, '#EXTM3U')) {
+            $result['error'] = 'Keine gültige HLS-Playlist gefunden';
+            return $result;
+        }
+
+        $result['valid'] = true;
+        $result['details']['is_master'] = str_contains($response, '#EXT-X-STREAM-INF');
+        $result['details']['segments'] = substr_count($response, '#EXTINF');
+
+        return $result;
+    }
+
+    /**
+     * Validiert RTMP-Stream (nur Format-Check)
+     */
+    private function validateRtmp(string $url, array $result): array
+    {
+        // RTMP kann nicht einfach per HTTP geprüft werden
+        // Wir prüfen nur das Format
+
+        $parsed = parse_url($url);
+
+        if (!isset($parsed['host']) || empty($parsed['host'])) {
+            $result['error'] = 'RTMP-URL enthält keinen gültigen Host';
+            return $result;
+        }
+
+        // DNS-Check
+        $ip = gethostbyname($parsed['host']);
+        if ($ip === $parsed['host']) {
+            $result['error'] = 'RTMP-Host nicht erreichbar (DNS-Fehler)';
+            return $result;
+        }
+
+        $result['valid'] = true;
+        $result['details']['host'] = $parsed['host'];
+        $result['details']['note'] = 'RTMP-Streams können erst zur Laufzeit vollständig validiert werden';
+
+        return $result;
+    }
+
+    /**
+     * Validiert iFrame-Embed URL
+     */
+    private function validateIframe(string $url, array $result): array
+    {
+        // Bekannte Embed-Plattformen
+        $embedPatterns = [
+            'youtube' => '/(?:youtube\.com\/(?:embed|watch)|youtu\.be)/i',
+            'vimeo' => '/vimeo\.com/i',
+            'twitch' => '/(?:twitch\.tv|player\.twitch\.tv)/i',
+            'dailymotion' => '/dailymotion\.com/i',
+        ];
+
+        $platform = 'unknown';
+        foreach ($embedPatterns as $name => $pattern) {
+            if (preg_match($pattern, $url)) {
+                $platform = $name;
+                break;
+            }
+        }
+
+        $result['details']['platform'] = $platform;
+
+        // HTTP-Check
+        $ch = curl_init();
+        curl_setopt_array($ch, [
+            CURLOPT_URL => $url,
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_TIMEOUT => $this->timeout,
+            CURLOPT_FOLLOWLOCATION => true,
+            CURLOPT_NOBODY => true, // HEAD request
+            CURLOPT_SSL_VERIFYPEER => false,
+        ]);
+
+        curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        $result['details']['http_code'] = $httpCode;
+
+        if ($httpCode >= 200 && $httpCode < 400) {
+            $result['valid'] = true;
+        } else {
+            $result['error'] = "URL nicht erreichbar (HTTP $httpCode)";
+        }
+
+        return $result;
+    }
+
+    /**
+     * Generische HTTP-Validierung
+     */
+    private function validateHttp(string $url, array $result): array
+    {
+        $ch = curl_init();
+        curl_setopt_array($ch, [
+            CURLOPT_URL => $url,
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_TIMEOUT => $this->timeout,
+            CURLOPT_FOLLOWLOCATION => true,
+            CURLOPT_NOBODY => true,
+            CURLOPT_SSL_VERIFYPEER => false,
+        ]);
+
+        curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        $contentType = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);
+        $error = curl_error($ch);
+        curl_close($ch);
+
+        $result['details']['http_code'] = $httpCode;
+        $result['details']['content_type'] = $contentType;
+
+        if ($error) {
+            $result['error'] = 'Verbindungsfehler: ' . $error;
+            return $result;
+        }
+
+        if ($httpCode >= 200 && $httpCode < 400) {
+            $result['valid'] = true;
+        } else {
+            $result['error'] = "URL nicht erreichbar (HTTP $httpCode)";
+        }
+
+        return $result;
+    }
+
+    /**
+     * Schnelle Erreichbarkeitsprüfung
+     */
+    public function isReachable(string $url): bool
+    {
+        $ch = curl_init();
+        curl_setopt_array($ch, [
+            CURLOPT_URL => $url,
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_TIMEOUT => 5,
+            CURLOPT_FOLLOWLOCATION => true,
+            CURLOPT_NOBODY => true,
+            CURLOPT_SSL_VERIFYPEER => false,
+        ]);
+
+        curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        return $httpCode >= 200 && $httpCode < 400;
+    }
+}
@@ -0,0 +1,404 @@
+<?php
+/**
+ * TenantManager - CRUD-Operationen für Tenants
+ */
+
+namespace AuroraLivecam\Tenant;
+
+use AuroraLivecam\Core\Database;
+use Exception;
+
+class TenantManager
+{
+    private Database $db;
+
+    public function __construct(?Database $db = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+    }
+
+    /**
+     * Erstellt einen neuen Tenant
+     */
+    public function create(array $data): int
+    {
+        $this->db->beginTransaction();
+
+        try {
+            // UUID generieren
+            $uuid = $this->generateUuid();
+
+            // Slug generieren falls nicht vorhanden
+            $slug = $data['slug'] ?? $this->generateSlug($data['name']);
+
+            // Tenant erstellen
+            $tenantId = $this->db->insert('tenants', [
+                'uuid' => $uuid,
+                'name' => $data['name'],
+                'slug' => $slug,
+                'email' => $data['email'],
+                'status' => $data['status'] ?? 'trial',
+                'plan_id' => $data['plan_id'] ?? $this->getDefaultPlanId(),
+                'trial_ends_at' => $data['trial_ends_at'] ?? $this->calculateTrialEnd(),
+            ]);
+
+            // Domain hinzufügen
+            if (!empty($data['domain'])) {
+                $this->addDomain($tenantId, $data['domain'], true);
+            }
+
+            // Default-Subdomain erstellen
+            if (!empty($data['subdomain'])) {
+                $subdomain = $data['subdomain'] . '.aurora-livecam.com';
+                $this->addDomain($tenantId, $subdomain, empty($data['domain']));
+            }
+
+            // Branding mit Defaults initialisieren
+            $this->db->insert('tenant_branding', [
+                'tenant_id' => $tenantId,
+                'site_name' => $data['name'],
+                'site_name_full' => $data['name'],
+            ]);
+
+            // Onboarding initialisieren
+            $this->db->insert('tenant_onboarding', [
+                'tenant_id' => $tenantId,
+                'current_step' => 1,
+            ]);
+
+            // Stream hinzufügen falls vorhanden
+            if (!empty($data['stream_url'])) {
+                $this->db->insert('tenant_streams', [
+                    'tenant_id' => $tenantId,
+                    'name' => 'Main Stream',
+                    'stream_url' => $data['stream_url'],
+                    'stream_type' => $data['stream_type'] ?? 'hls',
+                    'is_primary' => 1,
+                ]);
+            }
+
+            $this->db->commit();
+
+            return $tenantId;
+
+        } catch (Exception $e) {
+            $this->db->rollback();
+            throw $e;
+        }
+    }
+
+    /**
+     * Aktualisiert einen Tenant
+     */
+    public function update(int $tenantId, array $data): bool
+    {
+        $allowedFields = ['name', 'email', 'status', 'plan_id'];
+        $updateData = array_intersect_key($data, array_flip($allowedFields));
+
+        if (empty($updateData)) {
+            return false;
+        }
+
+        return $this->db->update('tenants', $updateData, 'id = ?', [$tenantId]) > 0;
+    }
+
+    /**
+     * Löscht einen Tenant (Soft-Delete durch Status-Änderung)
+     */
+    public function delete(int $tenantId): bool
+    {
+        return $this->db->update('tenants', ['status' => 'cancelled'], 'id = ?', [$tenantId]) > 0;
+    }
+
+    /**
+     * Hard-Delete (wirklich löschen - Vorsicht!)
+     */
+    public function hardDelete(int $tenantId): bool
+    {
+        return $this->db->delete('tenants', 'id = ?', [$tenantId]) > 0;
+    }
+
+    /**
+     * Gibt einen Tenant anhand der ID zurück
+     */
+    public function getById(int $id): ?array
+    {
+        return $this->db->fetchOne(
+            "SELECT t.*, p.name as plan_name, p.features as plan_features
+             FROM tenants t
+             LEFT JOIN plans p ON t.plan_id = p.id
+             WHERE t.id = ?",
+            [$id]
+        );
+    }
+
+    /**
+     * Gibt einen Tenant anhand des Slugs zurück
+     */
+    public function getBySlug(string $slug): ?array
+    {
+        return $this->db->fetchOne(
+            "SELECT t.*, p.name as plan_name, p.features as plan_features
+             FROM tenants t
+             LEFT JOIN plans p ON t.plan_id = p.id
+             WHERE t.slug = ?",
+            [$slug]
+        );
+    }
+
+    /**
+     * Gibt einen Tenant anhand der UUID zurück
+     */
+    public function getByUuid(string $uuid): ?array
+    {
+        return $this->db->fetchOne(
+            "SELECT t.*, p.name as plan_name, p.features as plan_features
+             FROM tenants t
+             LEFT JOIN plans p ON t.plan_id = p.id
+             WHERE t.uuid = ?",
+            [$uuid]
+        );
+    }
+
+    /**
+     * Listet alle Tenants auf
+     */
+    public function getAll(array $filters = []): array
+    {
+        $sql = "SELECT t.*, p.name as plan_name, p.features as plan_features
+                FROM tenants t
+                LEFT JOIN plans p ON t.plan_id = p.id
+                WHERE 1=1";
+        $params = [];
+
+        if (!empty($filters['status'])) {
+            $sql .= " AND t.status = ?";
+            $params[] = $filters['status'];
+        }
+
+        if (!empty($filters['search'])) {
+            $sql .= " AND (t.name LIKE ? OR t.email LIKE ?)";
+            $params[] = '%' . $filters['search'] . '%';
+            $params[] = '%' . $filters['search'] . '%';
+        }
+
+        $sql .= " ORDER BY t.created_at DESC";
+
+        if (!empty($filters['limit'])) {
+            $sql .= " LIMIT " . (int)$filters['limit'];
+            if (!empty($filters['offset'])) {
+                $sql .= " OFFSET " . (int)$filters['offset'];
+            }
+        }
+
+        return $this->db->fetchAll($sql, $params);
+    }
+
+    /**
+     * Zählt Tenants
+     */
+    public function count(array $filters = []): int
+    {
+        $sql = "SELECT COUNT(*) FROM tenants WHERE 1=1";
+        $params = [];
+
+        if (!empty($filters['status'])) {
+            $sql .= " AND status = ?";
+            $params[] = $filters['status'];
+        }
+
+        return (int) $this->db->fetchColumn($sql, $params);
+    }
+
+    /**
+     * Fügt eine Domain zu einem Tenant hinzu
+     */
+    public function addDomain(int $tenantId, string $domain, bool $isPrimary = false): int
+    {
+        // Normalisiere Domain
+        $domain = strtolower(trim($domain));
+
+        // Prüfe ob Domain bereits existiert
+        $existing = $this->db->fetchOne(
+            "SELECT id FROM tenant_domains WHERE domain = ?",
+            [$domain]
+        );
+
+        if ($existing) {
+            throw new Exception("Domain '$domain' is already in use");
+        }
+
+        // Wenn primary, setze alle anderen auf non-primary
+        if ($isPrimary) {
+            $this->db->execute(
+                "UPDATE tenant_domains SET is_primary = 0 WHERE tenant_id = ?",
+                [$tenantId]
+            );
+        }
+
+        return $this->db->insert('tenant_domains', [
+            'tenant_id' => $tenantId,
+            'domain' => $domain,
+            'is_primary' => $isPrimary ? 1 : 0,
+        ]);
+    }
+
+    /**
+     * Entfernt eine Domain von einem Tenant
+     */
+    public function removeDomain(int $tenantId, string $domain): bool
+    {
+        return $this->db->delete('tenant_domains', 'tenant_id = ? AND domain = ?', [$tenantId, $domain]) > 0;
+    }
+
+    /**
+     * Gibt alle Domains eines Tenants zurück
+     */
+    public function getDomains(int $tenantId): array
+    {
+        return $this->db->fetchAll(
+            "SELECT * FROM tenant_domains WHERE tenant_id = ? ORDER BY is_primary DESC",
+            [$tenantId]
+        );
+    }
+
+    /**
+     * Aktualisiert das Branding eines Tenants
+     */
+    public function updateBranding(int $tenantId, array $data): bool
+    {
+        $allowedFields = [
+            'site_name', 'site_name_full', 'tagline', 'logo_path', 'favicon_path',
+            'primary_color', 'secondary_color', 'accent_color',
+            'welcome_text_de', 'welcome_text_en', 'footer_text',
+            'custom_css', 'custom_js',
+            'social_facebook', 'social_instagram', 'social_youtube'
+        ];
+
+        $updateData = array_intersect_key($data, array_flip($allowedFields));
+
+        if (empty($updateData)) {
+            return false;
+        }
+
+        // Prüfe ob Branding existiert
+        $exists = $this->db->fetchColumn(
+            "SELECT tenant_id FROM tenant_branding WHERE tenant_id = ?",
+            [$tenantId]
+        );
+
+        if ($exists) {
+            return $this->db->update('tenant_branding', $updateData, 'tenant_id = ?', [$tenantId]) > 0;
+        } else {
+            $updateData['tenant_id'] = $tenantId;
+            return $this->db->insert('tenant_branding', $updateData) > 0;
+        }
+    }
+
+    /**
+     * Gibt das Branding eines Tenants zurück
+     */
+    public function getBranding(int $tenantId): ?array
+    {
+        return $this->db->fetchOne(
+            "SELECT * FROM tenant_branding WHERE tenant_id = ?",
+            [$tenantId]
+        );
+    }
+
+    /**
+     * Prüft ob ein Slug verfügbar ist
+     */
+    public function isSlugAvailable(string $slug, ?int $excludeTenantId = null): bool
+    {
+        $sql = "SELECT id FROM tenants WHERE slug = ?";
+        $params = [$slug];
+
+        if ($excludeTenantId) {
+            $sql .= " AND id != ?";
+            $params[] = $excludeTenantId;
+        }
+
+        return $this->db->fetchOne($sql, $params) === null;
+    }
+
+    /**
+     * Prüft ob eine Domain verfügbar ist
+     */
+    public function isDomainAvailable(string $domain, ?int $excludeTenantId = null): bool
+    {
+        $sql = "SELECT td.id FROM tenant_domains td WHERE td.domain = ?";
+        $params = [$domain];
+
+        if ($excludeTenantId) {
+            $sql .= " AND td.tenant_id != ?";
+            $params[] = $excludeTenantId;
+        }
+
+        return $this->db->fetchOne($sql, $params) === null;
+    }
+
+    /**
+     * Generiert einen URL-sicheren Slug aus einem Namen
+     */
+    private function generateSlug(string $name): string
+    {
+        $slug = strtolower($name);
+        $slug = preg_replace('/[^a-z0-9]+/', '-', $slug);
+        $slug = trim($slug, '-');
+
+        // Sicherstellen dass Slug einzigartig ist
+        $baseSlug = $slug;
+        $counter = 1;
+        while (!$this->isSlugAvailable($slug)) {
+            $slug = $baseSlug . '-' . $counter;
+            $counter++;
+        }
+
+        return $slug;
+    }
+
+    /**
+     * Generiert eine UUID v4
+     */
+    private function generateUuid(): string
+    {
+        $data = random_bytes(16);
+        $data[6] = chr(ord($data[6]) & 0x0f | 0x40);
+        $data[8] = chr(ord($data[8]) & 0x3f | 0x80);
+        return vsprintf('%s%s-%s-%s-%s-%s%s%s', str_split(bin2hex($data), 4));
+    }
+
+    /**
+     * Berechnet das Trial-Ende (14 Tage)
+     */
+    private function calculateTrialEnd(): string
+    {
+        return date('Y-m-d H:i:s', strtotime('+14 days'));
+    }
+
+    /**
+     * Gibt die ID des Default-Plans (Free) zurück
+     */
+    private function getDefaultPlanId(): int
+    {
+        $plan = $this->db->fetchOne("SELECT id FROM plans WHERE slug = 'free' LIMIT 1");
+        return $plan ? (int)$plan['id'] : 1;
+    }
+
+    /**
+     * Aktiviert einen Tenant (z.B. nach Zahlung)
+     */
+    public function activate(int $tenantId): bool
+    {
+        return $this->db->update('tenants', ['status' => 'active'], 'id = ?', [$tenantId]) > 0;
+    }
+
+    /**
+     * Suspendiert einen Tenant (z.B. bei Zahlungsausfall)
+     */
+    public function suspend(int $tenantId): bool
+    {
+        return $this->db->update('tenants', ['status' => 'suspended'], 'id = ?', [$tenantId]) > 0;
+    }
+}
@@ -0,0 +1,427 @@
+<?php
+/**
+ * TenantSettingsManager - DB-basierte Settings pro Tenant
+ *
+ * Erweitert/ersetzt SettingsManager für Multi-Tenant Betrieb
+ * Fällt auf den alten SettingsManager zurück wenn DB nicht verfügbar
+ */
+
+namespace AuroraLivecam\Tenant;
+
+use AuroraLivecam\Core\Database;
+use AuroraLivecam\Core\TenantResolver;
+
+class TenantSettingsManager
+{
+    private Database $db;
+    private TenantResolver $resolver;
+    private int $tenantId;
+    private array $settings = [];
+    private bool $loaded = false;
+    private bool $dbAvailable = false;
+
+    // Fallback auf Legacy-SettingsManager
+    private ?\SettingsManager $legacyManager = null;
+
+    public function __construct(?int $tenantId = null, ?Database $db = null, ?TenantResolver $resolver = null)
+    {
+        $this->db = $db ?? Database::getInstance();
+        $this->resolver = $resolver ?? TenantResolver::getInstance();
+        $this->tenantId = $tenantId ?? $this->resolver->getTenantId();
+
+        $this->checkDbAvailability();
+    }
+
+    /**
+     * Prüft ob die DB verfügbar ist
+     */
+    private function checkDbAvailability(): void
+    {
+        try {
+            $this->db->fetchOne("SELECT 1 FROM tenant_settings LIMIT 1");
+            $this->dbAvailable = true;
+        } catch (\Exception $e) {
+            $this->dbAvailable = false;
+        }
+    }
+
+    /**
+     * Lädt alle Settings für den Tenant
+     */
+    private function load(): void
+    {
+        if ($this->loaded) {
+            return;
+        }
+
+        // Wenn keine DB, nutze Legacy
+        if (!$this->dbAvailable || $this->tenantId === 0) {
+            $this->loadFromLegacy();
+            return;
+        }
+
+        $rows = $this->db->fetchAll(
+            "SELECT setting_key, setting_value FROM tenant_settings WHERE tenant_id = ?",
+            [$this->tenantId]
+        );
+
+        foreach ($rows as $row) {
+            $value = $row['setting_value'];
+            // JSON-Werte parsen
+            if ($value !== null && ($value[0] === '{' || $value[0] === '[')) {
+                $decoded = json_decode($value, true);
+                if (json_last_error() === JSON_ERROR_NONE) {
+                    $value = $decoded;
+                }
+            }
+            // Booleans und Zahlen konvertieren
+            elseif ($value === 'true') $value = true;
+            elseif ($value === 'false') $value = false;
+            elseif (is_numeric($value)) $value = strpos($value, '.') !== false ? (float)$value : (int)$value;
+
+            $this->settings[$row['setting_key']] = $value;
+        }
+
+        // Defaults für fehlende Keys
+        $this->settings = array_merge($this->getDefaults(), $this->settings);
+        $this->loaded = true;
+    }
+
+    /**
+     * Fallback auf Legacy SettingsManager
+     */
+    private function loadFromLegacy(): void
+    {
+        if ($this->legacyManager === null) {
+            // Legacy-Manager einbinden
+            $legacyFile = dirname(__DIR__, 2) . '/SettingsManager.php';
+            if (file_exists($legacyFile) && !class_exists('\SettingsManager')) {
+                require_once $legacyFile;
+            }
+
+            if (class_exists('\SettingsManager')) {
+                $this->legacyManager = new \SettingsManager();
+            }
+        }
+
+        if ($this->legacyManager) {
+            // Konvertiere Legacy-Settings in unser Format
+            $this->settings = $this->convertLegacySettings($this->legacyManager);
+        } else {
+            $this->settings = $this->getDefaults();
+        }
+
+        $this->loaded = true;
+    }
+
+    /**
+     * Konvertiert Legacy-Settings
+     */
+    private function convertLegacySettings(\SettingsManager $legacy): array
+    {
+        $settings = $this->getDefaults();
+
+        // Mappe Legacy-Werte
+        $mappings = [
+            'viewer_display.enabled' => 'viewer_display.enabled',
+            'viewer_display.min_viewers' => 'viewer_display.min_viewers',
+            'video_mode.play_in_player' => 'video_mode.play_in_player',
+            'video_mode.allow_download' => 'video_mode.allow_download',
+            'timelapse.default_speed' => 'timelapse.default_speed',
+            'ui_display.show_recommendation_banner' => 'ui_display.show_recommendation_banner',
+            'ui_display.show_qr_code' => 'ui_display.show_qr_code',
+            'ui_display.show_social_media' => 'ui_display.show_social_media',
+            'content.guestbook_enabled' => 'content.guestbook_enabled',
+            'content.gallery_enabled' => 'content.gallery_enabled',
+            'weather.enabled' => 'weather.enabled',
+            'weather.location' => 'weather.location',
+            'weather.lat' => 'weather.lat',
+            'weather.lon' => 'weather.lon',
+            'seo.custom_title' => 'seo.custom_title',
+            'seo.meta_description' => 'seo.meta_description',
+        ];
+
+        foreach ($mappings as $legacyKey => $newKey) {
+            $value = $legacy->get($legacyKey);
+            if ($value !== null) {
+                $settings[$newKey] = $value;
+            }
+        }
+
+        return $settings;
+    }
+
+    /**
+     * Gibt einen Setting-Wert zurück (mit Dot-Notation)
+     */
+    public function get(string $key, mixed $default = null): mixed
+    {
+        $this->load();
+
+        // Direkte Keys
+        if (isset($this->settings[$key])) {
+            return $this->settings[$key];
+        }
+
+        // Dot-Notation auflösen
+        $keys = explode('.', $key);
+        $value = $this->settings;
+
+        foreach ($keys as $k) {
+            if (!is_array($value) || !isset($value[$k])) {
+                return $default;
+            }
+            $value = $value[$k];
+        }
+
+        return $value;
+    }
+
+    /**
+     * Setzt einen Setting-Wert
+     */
+    public function set(string $key, mixed $value): bool
+    {
+        $this->load();
+
+        // Wenn keine DB, nutze Legacy
+        if (!$this->dbAvailable || $this->tenantId === 0) {
+            return $this->setLegacy($key, $value);
+        }
+
+        // Wert für DB vorbereiten
+        $dbValue = $this->prepareValueForDb($value);
+
+        // UPSERT
+        $sql = "INSERT INTO tenant_settings (tenant_id, setting_key, setting_value)
+                VALUES (?, ?, ?)
+                ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value)";
+
+        $result = $this->db->execute($sql, [$this->tenantId, $key, $dbValue]) > 0;
+
+        if ($result) {
+            $this->settings[$key] = $value;
+        }
+
+        return $result;
+    }
+
+    /**
+     * Setzt Legacy-Setting
+     */
+    private function setLegacy(string $key, mixed $value): bool
+    {
+        if ($this->legacyManager) {
+            return $this->legacyManager->set($key, $value);
+        }
+        return false;
+    }
+
+    /**
+     * Bereitet einen Wert für die DB vor
+     */
+    private function prepareValueForDb(mixed $value): string
+    {
+        if (is_bool($value)) {
+            return $value ? 'true' : 'false';
+        }
+        if (is_array($value) || is_object($value)) {
+            return json_encode($value);
+        }
+        return (string)$value;
+    }
+
+    /**
+     * Löscht ein Setting
+     */
+    public function delete(string $key): bool
+    {
+        if (!$this->dbAvailable || $this->tenantId === 0) {
+            return false;
+        }
+
+        $result = $this->db->delete('tenant_settings', 'tenant_id = ? AND setting_key = ?', [$this->tenantId, $key]) > 0;
+
+        if ($result) {
+            unset($this->settings[$key]);
+        }
+
+        return $result;
+    }
+
+    /**
+     * Gibt alle Settings zurück
+     */
+    public function all(): array
+    {
+        $this->load();
+        return $this->settings;
+    }
+
+    /**
+     * Setzt mehrere Settings auf einmal
+     */
+    public function setMany(array $settings): bool
+    {
+        foreach ($settings as $key => $value) {
+            $this->set($key, $value);
+        }
+        return true;
+    }
+
+    /**
+     * Default-Settings
+     */
+    private function getDefaults(): array
+    {
+        return [
+            // Viewer Display
+            'viewer_display.enabled' => true,
+            'viewer_display.min_viewers' => 1,
+            'viewer_display.update_interval' => 5,
+
+            // Video Mode
+            'video_mode.play_in_player' => true,
+            'video_mode.allow_download' => true,
+
+            // Timelapse
+            'timelapse.default_speed' => 1,
+            'timelapse.available_speeds' => [1, 10, 100],
+            'timelapse.reverse_enabled' => true,
+
+            // UI Display
+            'ui_display.show_recommendation_banner' => true,
+            'ui_display.show_qr_code' => true,
+            'ui_display.show_social_media' => true,
+
+            // Zoom
+            'zoom.show_controls' => true,
+            'zoom.max_level' => 4.0,
+
+            // Content
+            'content.guestbook_enabled' => true,
+            'content.gallery_enabled' => true,
+            'content.ai_events_enabled' => true,
+
+            // Weather
+            'weather.enabled' => true,
+            'weather.location' => 'Zürich,CH',
+            'weather.lat' => '47.3769',
+            'weather.lon' => '8.5417',
+            'weather.update_interval' => 5,
+            'weather.units' => 'metric',
+
+            // SEO
+            'seo.custom_title' => '',
+            'seo.meta_description' => '',
+            'seo.meta_keywords' => '',
+
+            // Theme
+            'theme.default' => 'theme-legacy',
+            'theme.show_switcher' => false,
+        ];
+    }
+
+    // === Helper-Methoden (kompatibel mit altem SettingsManager) ===
+
+    public function isWeatherEnabled(): bool
+    {
+        return $this->get('weather.enabled', true) === true;
+    }
+
+    public function getWeatherLocation(): string
+    {
+        return $this->get('weather.location', 'Zürich,CH');
+    }
+
+    public function getWeatherCoords(): array
+    {
+        return [
+            'lat' => $this->get('weather.lat', '47.3769'),
+            'lon' => $this->get('weather.lon', '8.5417'),
+        ];
+    }
+
+    public function getWeatherUpdateInterval(): int
+    {
+        return (int)$this->get('weather.update_interval', 5);
+    }
+
+    public function shouldShowViewers(): bool
+    {
+        return $this->get('viewer_display.enabled', true) === true;
+    }
+
+    public function getMinViewers(): int
+    {
+        return (int)$this->get('viewer_display.min_viewers', 1);
+    }
+
+    public function isGuestbookEnabled(): bool
+    {
+        return $this->get('content.guestbook_enabled', true) === true;
+    }
+
+    public function isGalleryEnabled(): bool
+    {
+        return $this->get('content.gallery_enabled', true) === true;
+    }
+
+    /**
+     * AJAX-Handler (kompatibel mit altem SettingsManager)
+     */
+    public function handleAjax(): void
+    {
+        if ($_SERVER['REQUEST_METHOD'] !== 'POST') return;
+        if (!isset($_POST['settings_action'])) return;
+
+        header('Content-Type: application/json');
+
+        // Auth prüfen
+        if (!$this->isAdmin()) {
+            echo json_encode(['success' => false, 'error' => 'Unauthorized']);
+            exit;
+        }
+
+        $action = $_POST['settings_action'];
+
+        if ($action === 'update' && isset($_POST['key'], $_POST['value'])) {
+            $key = $_POST['key'];
+            $value = $_POST['value'];
+
+            // Booleans konvertieren
+            if ($value === 'true') $value = true;
+            elseif ($value === 'false') $value = false;
+
+            $success = $this->set($key, $value);
+            echo json_encode(['success' => $success]);
+            exit;
+        }
+
+        if ($action === 'get') {
+            echo json_encode(['success' => true, 'data' => $this->all()]);
+            exit;
+        }
+
+        echo json_encode(['success' => false, 'error' => 'Unknown action']);
+        exit;
+    }
+
+    /**
+     * Prüft ob der User Admin ist
+     */
+    private function isAdmin(): bool
+    {
+        return isset($_SESSION['admin']) && $_SESSION['admin'] === true;
+    }
+
+    /**
+     * Lädt Settings neu aus der DB
+     */
+    public function reload(): void
+    {
+        $this->loaded = false;
+        $this->settings = [];
+        $this->load();
+    }
+}
@@ -0,0 +1,179 @@
+<?php
+/**
+ * Bootstrap - Initialisiert die Multi-Tenant Umgebung
+ *
+ * Einbinden am Anfang von index.php:
+ *   require_once __DIR__ . '/src/bootstrap.php';
+ */
+
+// Autoloader für src/ Klassen
+spl_autoload_register(function ($class) {
+    // Namespace-Präfix
+    $prefix = 'AuroraLivecam\\';
+    $baseDir = __DIR__ . '/';
+
+    // Prüfe ob die Klasse unseren Namespace verwendet
+    $len = strlen($prefix);
+    if (strncmp($prefix, $class, $len) !== 0) {
+        return;
+    }
+
+    // Relativer Klassenname
+    $relativeClass = substr($class, $len);
+
+    // Pfad zur Datei
+    $file = $baseDir . str_replace('\\', '/', $relativeClass) . '.php';
+
+    if (file_exists($file)) {
+        require $file;
+    }
+});
+
+use AuroraLivecam\Core\TenantResolver;
+use AuroraLivecam\Core\Database;
+
+/**
+ * Gibt die Site-Konfiguration basierend auf dem aktuellen Tenant zurück
+ * Ersetzt den hardcoded Domain-Switch in index.php
+ */
+function getSiteConfig(): array
+{
+    // Legacy SettingsManager laden
+    $settingsFile = dirname(__DIR__) . '/SettingsManager.php';
+    if (!class_exists('SettingsManager') && file_exists($settingsFile)) {
+        require_once $settingsFile;
+    }
+
+    $settingsManager = new \SettingsManager();
+
+    // Wenn Multi-Tenant nicht aktiviert, nutze Legacy-Modus
+    if (!$settingsManager->isMultiTenantEnabled()) {
+        return getLegacySiteConfig();
+    }
+
+    // Multi-Tenant Modus
+    try {
+        $resolver = TenantResolver::getInstance();
+        $tenant = $resolver->resolve();
+        $branding = $resolver->getBranding();
+
+        if (!$tenant) {
+            return getLegacySiteConfig();
+        }
+
+        return [
+            'tenant_id' => $tenant['id'],
+            'tenant_slug' => $tenant['slug'],
+            'is_multi_tenant' => true,
+            'site_name' => $branding['site_name'] ?? $tenant['name'],
+            'site_name_full' => $branding['site_name_full'] ?? $tenant['name'],
+            'tagline' => $branding['tagline'] ?? '',
+            'logo_path' => $branding['logo_path'] ?? null,
+            'favicon_path' => $branding['favicon_path'] ?? null,
+            'primary_color' => $branding['primary_color'] ?? '#667eea',
+            'secondary_color' => $branding['secondary_color'] ?? '#764ba2',
+            'accent_color' => $branding['accent_color'] ?? '#f093fb',
+            'welcome_de' => $branding['welcome_text_de'] ?? '',
+            'welcome_en' => $branding['welcome_text_en'] ?? '',
+            'footer_text' => $branding['footer_text'] ?? '',
+            'custom_css' => $branding['custom_css'] ?? '',
+            'social' => [
+                'facebook' => $branding['social_facebook'] ?? '',
+                'instagram' => $branding['social_instagram'] ?? '',
+                'youtube' => $branding['social_youtube'] ?? '',
+            ],
+        ];
+
+    } catch (\Exception $e) {
+        // Fallback auf Legacy bei Fehlern
+        return getLegacySiteConfig();
+    }
+}
+
+/**
+ * Legacy Site-Konfiguration (hardcoded Domains)
+ * Kompatibilität mit bestehendem Code
+ */
+function getLegacySiteConfig(): array
+{
+    $host = $_SERVER['HTTP_HOST'] ?? 'localhost';
+    $isSeecam = (stripos($host, 'seecam.ch') !== false);
+
+    if ($isSeecam) {
+        return [
+            'tenant_id' => 0,
+            'tenant_slug' => 'seecam',
+            'is_multi_tenant' => false,
+            'site_name' => 'Seecam',
+            'site_name_full' => 'Seecam.ch - Live Webcam am See',
+            'tagline' => 'Ihre Live-Webcam am See',
+            'logo_path' => null,
+            'favicon_path' => null,
+            'primary_color' => '#667eea',
+            'secondary_color' => '#764ba2',
+            'accent_color' => '#f093fb',
+            'welcome_de' => 'Willkommen bei Seecam - Ihrer Live-Webcam am See!',
+            'welcome_en' => 'Welcome to Seecam - Your Live Webcam at the Lake!',
+            'footer_text' => '',
+            'custom_css' => '',
+            'social' => [
+                'facebook' => '',
+                'instagram' => '',
+                'youtube' => '',
+            ],
+        ];
+    }
+
+    // Default: Aurora
+    return [
+        'tenant_id' => 0,
+        'tenant_slug' => 'aurora',
+        'is_multi_tenant' => false,
+        'site_name' => 'Aurora',
+        'site_name_full' => 'Aurora Weather Livecam - Zürich Oberland',
+        'tagline' => 'Wetter Webcam Schweiz - Zürich Oberland',
+        'logo_path' => null,
+        'favicon_path' => null,
+        'primary_color' => '#667eea',
+        'secondary_color' => '#764ba2',
+        'accent_color' => '#f093fb',
+        'welcome_de' => 'Willkommen bei Aurora Weather Livecam - Ihre Wetter-Webcam im Zürcher Oberland mit AI-Erkennung für Aurora, Starlink und mehr!',
+        'welcome_en' => 'Welcome to Aurora Weather Livecam - Your weather webcam in the Zurich Oberland with AI detection for Aurora, Starlink and more!',
+        'footer_text' => '',
+        'custom_css' => '',
+        'social' => [
+            'facebook' => '',
+            'instagram' => '',
+            'youtube' => '',
+        ],
+    ];
+}
+
+/**
+ * Redirect Handler für alte Domains
+ */
+function handleDomainRedirects(): void
+{
+    $host = $_SERVER['HTTP_HOST'] ?? '';
+
+    // Alte Aurora-Domains auf neue Domain umleiten
+    $oldDomains = [
+        'www.aurora-wetter-lifecam.ch',
+        'aurora-wetter-lifecam.ch',
+        'www.aurora-wetter-livecam.ch',
+        'aurora-wetter-livecam.ch'
+    ];
+
+    $newDomain = 'www.aurora-weather-livecam.com';
+
+    if (in_array($host, $oldDomains)) {
+        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
+        $requestUri = $_SERVER['REQUEST_URI'] ?? '/';
+        header("HTTP/1.1 301 Moved Permanently");
+        header("Location: {$protocol}://{$newDomain}{$requestUri}");
+        exit;
+    }
+}
+
+// Domain-Redirects automatisch ausführen
+handleDomainRedirects();
@@ -0,0 +1,31 @@
+<?php
+// Fehler anzeigen
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
+echo "Test 1: Settings Manager laden...<br>";
+require_once 'SettingsManager.php';
+echo "✓ SettingsManager.php geladen<br>";
+
+echo "Test 2: Weather Manager laden...<br>";
+require_once 'WeatherManager.php';
+echo "✓ WeatherManager.php geladen<br>";
+
+echo "Test 3: SettingsManager initialisieren...<br>";
+$settingsManager = new SettingsManager();
+echo "✓ SettingsManager initialisiert<br>";
+
+echo "Test 4: WeatherManager initialisieren...<br>";
+$weatherManager = new WeatherManager($settingsManager);
+echo "✓ WeatherManager initialisiert<br>";
+
+echo "Test 5: Wetter abrufen...<br>";
+$weather = $weatherManager->getCurrentWeather();
+echo "✓ Wetter abgerufen<br>";
+
+echo "<pre>";
+print_r($weather);
+echo "</pre>";
+
+echo "<br><br>✅ ALLE TESTS ERFOLGREICH!";
+?>
@@ -0,0 +1,215 @@
+"""
+Phase-Locked Timestretcher
+==========================
+
+High-quality offline time-stretching using a phase-locked phase vocoder.
+This approach keeps the original spectral texture by propagating peak phases
+and locking surrounding bins to preserve vertical phase coherence.
+
+Usage:
+  python phase_locked_vocoder.py input.wav output.wav 10.0
+"""
+
+from __future__ import annotations
+
+import argparse
+from dataclasses import dataclass
+from typing import Tuple
+
+import numpy as np
+from scipy import signal
+
+try:
+    import soundfile as sf
+except ImportError:  # pragma: no cover - optional dependency
+    sf = None
+
+
+@dataclass
+class StretchConfig:
+    stretch_factor: float = 10.0
+    window_size: int = 4096
+    hop_size: int = 1024
+    peak_threshold_db: float = -60.0
+    peak_min_distance: int = 3
+
+
+def stft(audio: np.ndarray, window_size: int, hop_size: int) -> np.ndarray:
+    window = signal.windows.hann(window_size, sym=False)
+    n_frames = 1 + (len(audio) - window_size) // hop_size
+    frames = np.lib.stride_tricks.as_strided(
+        audio,
+        shape=(n_frames, window_size),
+        strides=(audio.strides[0] * hop_size, audio.strides[0]),
+        writeable=False,
+    )
+    windowed = frames * window[None, :]
+    return np.fft.rfft(windowed, axis=1).T
+
+
+def istft(stft_matrix: np.ndarray, window_size: int, hop_size: int, length: int) -> np.ndarray:
+    window = signal.windows.hann(window_size, sym=False)
+    n_frames = stft_matrix.shape[1]
+    output = np.zeros(hop_size * (n_frames - 1) + window_size)
+    window_sums = np.zeros_like(output)
+
+    for i in range(n_frames):
+        frame = np.fft.irfft(stft_matrix[:, i], n=window_size)
+        start = i * hop_size
+        output[start:start + window_size] += frame * window
+        window_sums[start:start + window_size] += window**2
+
+    nonzero = window_sums > 1e-8
+    output[nonzero] /= window_sums[nonzero]
+    return output[:length]
+
+
+def detect_peaks(magnitude: np.ndarray, threshold_db: float, min_distance: int) -> np.ndarray:
+    mag_db = 20 * np.log10(magnitude + 1e-12)
+    candidates = np.where(
+        (mag_db[1:-1] > threshold_db)
+        & (mag_db[1:-1] > mag_db[:-2])
+        & (mag_db[1:-1] > mag_db[2:])
+    )[0] + 1
+
+    if candidates.size == 0:
+        return np.array([], dtype=int)
+
+    # Enforce minimum distance between peaks
+    peaks = [candidates[0]]
+    for idx in candidates[1:]:
+        if idx - peaks[-1] >= min_distance:
+            peaks.append(idx)
+    return np.array(peaks, dtype=int)
+
+
+def phase_locked_vocoder(
+    stft_matrix: np.ndarray,
+    hop_size: int,
+    stretch_factor: float,
+    peak_threshold_db: float,
+    peak_min_distance: int,
+) -> np.ndarray:
+    n_bins, n_frames = stft_matrix.shape
+    if n_frames < 2:
+        return stft_matrix
+
+    time_steps = np.arange(0, n_frames - 1, 1 / stretch_factor)
+    output = np.zeros((n_bins, len(time_steps)), dtype=np.complex128)
+
+    phase_acc = np.angle(stft_matrix[:, 0])
+    expected_phase = 2 * np.pi * hop_size * np.arange(n_bins) / (2 * (n_bins - 1))
+
+    for t, step in enumerate(time_steps):
+        idx = int(np.floor(step))
+        frac = step - idx
+        if idx + 1 >= n_frames:
+            break
+
+        mag1 = np.abs(stft_matrix[:, idx])
+        mag2 = np.abs(stft_matrix[:, idx + 1])
+        mag = (1 - frac) * mag1 + frac * mag2
+
+        phase1 = np.angle(stft_matrix[:, idx])
+        phase2 = np.angle(stft_matrix[:, idx + 1])
+
+        phase_diff = phase2 - phase1 - expected_phase
+        phase_diff = (phase_diff + np.pi) % (2 * np.pi) - np.pi
+        true_freq = expected_phase + phase_diff
+        phase_acc += true_freq
+
+        peaks = detect_peaks(mag, threshold_db=peak_threshold_db, min_distance=peak_min_distance)
+        if peaks.size == 0:
+            output[:, t] = mag * np.exp(1j * phase_acc)
+            continue
+
+        output_phase = phase_acc.copy()
+        peak_phases = phase_acc[peaks]
+        analysis_phases = phase1
+
+        # Determine regions between peaks
+        boundaries = [0]
+        boundaries += [int((peaks[i] + peaks[i + 1]) / 2) for i in range(len(peaks) - 1)]
+        boundaries.append(n_bins - 1)
+
+        for i, peak in enumerate(peaks):
+            start = boundaries[i]
+            end = boundaries[i + 1]
+            if end <= start:
+                continue
+            relative_phase = analysis_phases[start:end + 1] - analysis_phases[peak]
+            output_phase[start:end + 1] = peak_phases[i] + relative_phase
+
+        output[:, t] = mag * np.exp(1j * output_phase)
+
+    return output
+
+
+def stretch_audio(audio: np.ndarray, sample_rate: int, config: StretchConfig) -> np.ndarray:
+    if audio.ndim > 1:
+        audio = np.mean(audio, axis=1)
+
+    audio = audio.astype(np.float64)
+    audio /= np.max(np.abs(audio)) + 1e-12
+
+    if len(audio) < config.window_size:
+        raise ValueError("Audio is shorter than the analysis window.")
+
+    padded = np.pad(audio, (config.window_size // 2, config.window_size // 2), mode="reflect")
+    stft_matrix = stft(padded, config.window_size, config.hop_size)
+
+    stretched_stft = phase_locked_vocoder(
+        stft_matrix,
+        hop_size=config.hop_size,
+        stretch_factor=config.stretch_factor,
+        peak_threshold_db=config.peak_threshold_db,
+        peak_min_distance=config.peak_min_distance,
+    )
+
+    output_length = int(len(audio) * config.stretch_factor)
+    output = istft(stretched_stft, config.window_size, config.hop_size, output_length + config.window_size)
+
+    output = output[config.window_size // 2:config.window_size // 2 + output_length]
+    peak = np.max(np.abs(output))
+    if peak > 0:
+        output = 0.95 * output / peak
+    return output
+
+
+def stretch_file(input_path: str, output_path: str, config: StretchConfig) -> None:
+    if sf is None:
+        raise RuntimeError("soundfile is required for file IO. Install with `pip install soundfile`.")
+
+    audio, sr = sf.read(input_path)
+    result = stretch_audio(audio, sr, config)
+    sf.write(output_path, result, sr)
+
+
+def parse_args() -> Tuple[str, str, StretchConfig]:
+    parser = argparse.ArgumentParser(description="Phase-locked time-stretching")
+    parser.add_argument("input", help="Input WAV file")
+    parser.add_argument("output", help="Output WAV file")
+    parser.add_argument("stretch", type=float, help="Stretch factor (e.g., 10.0)")
+    parser.add_argument("--window", type=int, default=4096)
+    parser.add_argument("--hop", type=int, default=1024)
+    parser.add_argument("--peak-db", type=float, default=-60.0)
+    parser.add_argument("--peak-distance", type=int, default=3)
+    args = parser.parse_args()
+
+    config = StretchConfig(
+        stretch_factor=args.stretch,
+        window_size=args.window,
+        hop_size=args.hop,
+        peak_threshold_db=args.peak_db,
+        peak_min_distance=args.peak_distance,
+    )
+    return args.input, args.output, config
+
+
+def main() -> None:
+    input_path, output_path, config = parse_args()
+    stretch_file(input_path, output_path, config)
+
+
+if __name__ == "__main__":
+    main()
@@ -0,0 +1,772 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PhotoPro Tools</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar" id="navbar">
+        <div class="nav-container">
+            <a href="#hero" class="nav-logo">
+                <span class="logo-icon">&#9673;</span> PhotoPro Tools
+            </a>
+            <!-- Language Switcher -->
+            <div class="lang-switcher" id="langSwitcher">
+                <button class="lang-current" id="langCurrent" aria-label="Language">
+                    <span class="lang-flag" id="langFlag">DE</span>
+                    <svg width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="currentColor" fill="none" stroke-width="1.5"/></svg>
+                </button>
+                <div class="lang-dropdown" id="langDropdown">
+                    <button class="lang-option active" data-lang="de"><span class="lang-code">DE</span> Deutsch</button>
+                    <button class="lang-option" data-lang="en"><span class="lang-code">EN</span> English</button>
+                    <button class="lang-option" data-lang="fr"><span class="lang-code">FR</span> Fran&ccedil;ais</button>
+                    <button class="lang-option" data-lang="it"><span class="lang-code">IT</span> Italiano</button>
+                    <button class="lang-option" data-lang="sr"><span class="lang-code">SR</span> Srpski</button>
+                    <button class="lang-option" data-lang="sq"><span class="lang-code">SQ</span> Shqip</button>
+                    <button class="lang-option" data-lang="tr"><span class="lang-code">TR</span> T&uuml;rk&ccedil;e</button>
+                    <button class="lang-option" data-lang="sv"><span class="lang-code">SV</span> Svenska</button>
+                </div>
+            </div>
+            <button class="nav-toggle" id="navToggle" aria-label="Menu">
+                <span></span><span></span><span></span>
+            </button>
+            <ul class="nav-menu" id="navMenu">
+                <li><a href="#lens-calc" class="nav-link" data-i18n="nav.lens">Linsenrechner</a></li>
+                <li><a href="#composition" class="nav-link" data-i18n="nav.composition">Komposition</a></li>
+                <li><a href="#motif" class="nav-link" data-i18n="nav.motif">Motiverkennung</a></li>
+                <li><a href="#exposure" class="nav-link" data-i18n="nav.exposure">Belichtung</a></li>
+                <li><a href="#quiz" class="nav-link" data-i18n="nav.quiz">Quiz</a></li>
+                <li><a href="#simtools" class="nav-link" data-i18n="nav.simtools">Simulation</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero" id="hero">
+        <div class="hero-bg">
+            <div class="hero-particles" id="heroParticles"></div>
+        </div>
+        <div class="hero-content">
+            <h1 class="hero-title">
+                <span class="hero-subtitle" data-i18n="hero.welcome">Willkommen bei</span>
+                PhotoPro Tools
+            </h1>
+            <p class="hero-description" data-i18n="hero.desc">
+                Dein ultimativer Fotografie-Werkzeugkasten. Linsenberechnungen, Kompositionsregeln,
+                Motiverkennung und interaktive Quizze &mdash; alles an einem Ort.
+            </p>
+            <div class="hero-stats">
+                <div class="stat">
+                    <span class="stat-number" data-target="12">0</span>
+                    <span class="stat-label" data-i18n="hero.calculators">Rechner</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-number" data-target="8">0</span>
+                    <span class="stat-label" data-i18n="hero.rules">Regeln</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-number" data-target="50">0</span>
+                    <span class="stat-label" data-i18n="hero.questions">Quiz-Fragen</span>
+                </div>
+            </div>
+            <a href="#lens-calc" class="hero-cta" data-i18n="hero.cta">Jetzt starten</a>
+        </div>
+        <div class="scroll-indicator">
+            <div class="scroll-arrow"></div>
+        </div>
+    </section>
+
+    <!-- ==================== LENS CALCULATOR ==================== -->
+    <section class="section" id="lens-calc">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag" data-i18n="lens.tag">Werkzeuge</span>
+                <h2 class="section-title" data-i18n="lens.title">Linsenrechner</h2>
+                <p class="section-desc" data-i18n="lens.desc">Berechne Scharfentiefe, Bildwinkel, Crop-Faktor und mehr.</p>
+            </div>
+
+            <div class="calc-tabs">
+                <button class="calc-tab active" data-calc="dof" data-i18n="lens.tab.dof">Scharfentiefe (DOF)</button>
+                <button class="calc-tab" data-calc="fov" data-i18n="lens.tab.fov">Bildwinkel (FOV)</button>
+                <button class="calc-tab" data-calc="crop" data-i18n="lens.tab.crop">Crop-Faktor</button>
+                <button class="calc-tab" data-calc="hyperfocal" data-i18n="lens.tab.hyper">Hyperfokale Distanz</button>
+                <button class="calc-tab" data-calc="flash" data-i18n="lens.tab.flash">Blitz-Reichweite</button>
+                <button class="calc-tab" data-calc="magnification" data-i18n="lens.tab.mag">Abbildungsmassstab</button>
+            </div>
+
+            <!-- DOF Calculator -->
+            <div class="calc-panel active" id="calc-dof">
+                <div class="calc-grid">
+                    <div class="calc-inputs">
+                        <h3 data-i18n="dof.title">Scharfentiefe berechnen</h3>
+                        <p class="calc-info" data-i18n="dof.info">Die Scharfentiefe (Depth of Field) gibt den Bereich an, der im Bild scharf abgebildet wird.</p>
+                        <div class="input-group">
+                            <label data-i18n="calc.focal">Brennweite (mm)</label>
+                            <input type="number" id="dof-focal" value="50" min="1" max="2000" step="1">
+                            <input type="range" id="dof-focal-range" value="50" min="1" max="800" step="1">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="calc.aperture">Blende (f/)</label>
+                            <input type="number" id="dof-aperture" value="2.8" min="0.7" max="64" step="0.1">
+                            <input type="range" id="dof-aperture-range" value="2.8" min="0.7" max="64" step="0.1">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="dof.distance">Entfernung zum Motiv (m)</label>
+                            <input type="number" id="dof-distance" value="5" min="0.1" max="10000" step="0.1">
+                            <input type="range" id="dof-distance-range" value="5" min="0.1" max="100" step="0.1">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="calc.sensor">Sensorgr&ouml;sse</label>
+                            <select id="dof-sensor">
+                                <option value="0.043" selected data-i18n-opt="sensor.ff">Vollformat (36x24mm)</option>
+                                <option value="0.029" data-i18n-opt="sensor.apsc">APS-C (23.5x15.6mm)</option>
+                                <option value="0.023" data-i18n-opt="sensor.apsc_canon">APS-C Canon (22.3x14.9mm)</option>
+                                <option value="0.019" data-i18n-opt="sensor.m43">Micro 4/3 (17.3x13mm)</option>
+                                <option value="0.011" data-i18n-opt="sensor.1inch">1 Zoll (13.2x8.8mm)</option>
+                                <option value="0.006" data-i18n-opt="sensor.small">1/2.3 Zoll (6.17x4.55mm)</option>
+                            </select>
+                        </div>
+                        <button class="btn-calculate" onclick="calculateDOF()" data-i18n="calc.calculate">Berechnen</button>
+                    </div>
+                    <div class="calc-results">
+                        <h3 data-i18n="calc.results">Ergebnisse</h3>
+                        <div class="result-card">
+                            <div class="result-item highlight">
+                                <span class="result-label" data-i18n="dof.total">Scharfentiefe</span>
+                                <span class="result-value" id="dof-total">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="dof.near">Nahpunkt</span>
+                                <span class="result-value" id="dof-near">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="dof.far">Fernpunkt</span>
+                                <span class="result-value" id="dof-far">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="dof.coc">Zerstreuungskreis</span>
+                                <span class="result-value" id="dof-coc">--</span>
+                            </div>
+                        </div>
+                        <div class="dof-visualization">
+                            <div class="dof-bar">
+                                <div class="dof-sharp" id="dof-sharp-zone"></div>
+                                <div class="dof-subject" id="dof-subject-marker"></div>
+                            </div>
+                            <div class="dof-labels">
+                                <span id="dof-label-near">0m</span>
+                                <span id="dof-label-subject">5m</span>
+                                <span id="dof-label-far">&infin;</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- FOV Calculator -->
+            <div class="calc-panel" id="calc-fov">
+                <div class="calc-grid">
+                    <div class="calc-inputs">
+                        <h3 data-i18n="fov.title">Bildwinkel berechnen</h3>
+                        <p class="calc-info" data-i18n="fov.info">Der Bildwinkel bestimmt, wie viel der Szene die Kamera erfasst.</p>
+                        <div class="input-group">
+                            <label data-i18n="calc.focal">Brennweite (mm)</label>
+                            <input type="number" id="fov-focal" value="50" min="1" max="2000">
+                            <input type="range" id="fov-focal-range" value="50" min="1" max="800">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="calc.sensor">Sensorgr&ouml;sse</label>
+                            <select id="fov-sensor">
+                                <option value="36x24" selected data-i18n-opt="sensor.ff">Vollformat (36x24mm)</option>
+                                <option value="23.5x15.6" data-i18n-opt="sensor.apsc">APS-C (23.5x15.6mm)</option>
+                                <option value="22.3x14.9" data-i18n-opt="sensor.apsc_canon">APS-C Canon (22.3x14.9mm)</option>
+                                <option value="17.3x13" data-i18n-opt="sensor.m43">Micro 4/3 (17.3x13mm)</option>
+                                <option value="13.2x8.8" data-i18n-opt="sensor.1inch">1 Zoll (13.2x8.8mm)</option>
+                            </select>
+                        </div>
+                        <button class="btn-calculate" onclick="calculateFOV()" data-i18n="calc.calculate">Berechnen</button>
+                    </div>
+                    <div class="calc-results">
+                        <h3 data-i18n="calc.results">Ergebnisse</h3>
+                        <div class="result-card">
+                            <div class="result-item highlight">
+                                <span class="result-label" data-i18n="fov.horizontal">Horizontaler Bildwinkel</span>
+                                <span class="result-value" id="fov-horizontal">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="fov.vertical">Vertikaler Bildwinkel</span>
+                                <span class="result-value" id="fov-vertical">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="fov.diagonal">Diagonaler Bildwinkel</span>
+                                <span class="result-value" id="fov-diagonal">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="fov.lenstype">Objektivtyp</span>
+                                <span class="result-value" id="fov-type">--</span>
+                            </div>
+                        </div>
+                        <div class="fov-visualization">
+                            <canvas id="fov-canvas" width="400" height="300"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Crop Factor Calculator -->
+            <div class="calc-panel" id="calc-crop">
+                <div class="calc-grid">
+                    <div class="calc-inputs">
+                        <h3 data-i18n="crop.title">Crop-Faktor berechnen</h3>
+                        <p class="calc-info" data-i18n="crop.info">Der Crop-Faktor zeigt den &auml;quivalenten Bildausschnitt im Vergleich zum Vollformat.</p>
+                        <div class="input-group">
+                            <label data-i18n="crop.lensfocal">Brennweite am Objektiv (mm)</label>
+                            <input type="number" id="crop-focal" value="50" min="1" max="2000">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="crop.lensaperture">Blende am Objektiv (f/)</label>
+                            <input type="number" id="crop-aperture" value="1.8" min="0.7" max="64" step="0.1">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="crop.camerasensor">Kamerasensor</label>
+                            <select id="crop-sensor">
+                                <option value="1.0" data-i18n-opt="sensor.ff_1x">Vollformat (1.0x)</option>
+                                <option value="1.5" selected data-i18n-opt="sensor.apsc_nikon">APS-C Nikon/Sony (1.5x)</option>
+                                <option value="1.6" data-i18n-opt="sensor.apsc_canon_1_6">APS-C Canon (1.6x)</option>
+                                <option value="2.0" data-i18n-opt="sensor.m43_2x">Micro 4/3 (2.0x)</option>
+                                <option value="2.7" data-i18n-opt="sensor.1inch_2_7">1 Zoll (2.7x)</option>
+                                <option value="5.6" data-i18n-opt="sensor.small_5_6">1/2.3 Zoll (5.6x)</option>
+                            </select>
+                        </div>
+                        <button class="btn-calculate" onclick="calculateCrop()" data-i18n="calc.calculate">Berechnen</button>
+                    </div>
+                    <div class="calc-results">
+                        <h3 data-i18n="calc.results">Ergebnisse</h3>
+                        <div class="result-card">
+                            <div class="result-item highlight">
+                                <span class="result-label" data-i18n="crop.equivfocal">&#196;quivalente Brennweite (KB)</span>
+                                <span class="result-value" id="crop-equiv-focal">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="crop.equivaperture">&#196;quivalente Blende (KB)</span>
+                                <span class="result-value" id="crop-equiv-aperture">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="crop.factor">Crop-Faktor</span>
+                                <span class="result-value" id="crop-factor-result">--</span>
+                            </div>
+                        </div>
+                        <div class="crop-comparison">
+                            <div class="crop-frame fullframe">
+                                <span data-i18n="crop.fullframe">Vollformat</span>
+                            </div>
+                            <div class="crop-frame cropped" id="crop-overlay">
+                                <span id="crop-overlay-label">APS-C</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Hyperfocal Distance Calculator -->
+            <div class="calc-panel" id="calc-hyperfocal">
+                <div class="calc-grid">
+                    <div class="calc-inputs">
+                        <h3 data-i18n="hyper.title">Hyperfokale Distanz</h3>
+                        <p class="calc-info" data-i18n="hyper.info">Die Entfernung, ab der alles bis unendlich scharf ist.</p>
+                        <div class="input-group">
+                            <label data-i18n="calc.focal">Brennweite (mm)</label>
+                            <input type="number" id="hyper-focal" value="24" min="1" max="2000">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="calc.aperture">Blende (f/)</label>
+                            <input type="number" id="hyper-aperture" value="11" min="0.7" max="64" step="0.1">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="calc.sensor">Sensorgr&ouml;sse</label>
+                            <select id="hyper-sensor">
+                                <option value="0.030" selected data-i18n-opt="sensor.ff_short">Vollformat</option>
+                                <option value="0.020" data-i18n-opt="sensor.apsc_short">APS-C</option>
+                                <option value="0.015" data-i18n-opt="sensor.m43_short">Micro 4/3</option>
+                            </select>
+                        </div>
+                        <button class="btn-calculate" onclick="calculateHyperfocal()" data-i18n="calc.calculate">Berechnen</button>
+                    </div>
+                    <div class="calc-results">
+                        <h3 data-i18n="calc.results">Ergebnisse</h3>
+                        <div class="result-card">
+                            <div class="result-item highlight">
+                                <span class="result-label" data-i18n="hyper.distance">Hyperfokale Distanz</span>
+                                <span class="result-value" id="hyper-distance">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="hyper.near">Nahpunkt (bei Fokus auf H)</span>
+                                <span class="result-value" id="hyper-near">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="hyper.tiplabel">Tipp</span>
+                                <span class="result-value small" id="hyper-tip" data-i18n="hyper.tip">Fokussiere auf die hyperfokale Distanz f&uuml;r maximale Sch&auml;rfe.</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Flash Range Calculator -->
+            <div class="calc-panel" id="calc-flash">
+                <div class="calc-grid">
+                    <div class="calc-inputs">
+                        <h3 data-i18n="flash.title">Blitz-Reichweite</h3>
+                        <p class="calc-info" data-i18n="flash.info">Berechne die maximale Blitzreichweite basierend auf Leitzahl und Einstellungen.</p>
+                        <div class="input-group">
+                            <label data-i18n="flash.gn">Leitzahl (GN)</label>
+                            <input type="number" id="flash-gn" value="58" min="1" max="200">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="calc.aperture">Blende (f/)</label>
+                            <input type="number" id="flash-aperture" value="5.6" min="0.7" max="64" step="0.1">
+                        </div>
+                        <div class="input-group">
+                            <label>ISO</label>
+                            <select id="flash-iso">
+                                <option value="100" selected>ISO 100</option>
+                                <option value="200">ISO 200</option>
+                                <option value="400">ISO 400</option>
+                                <option value="800">ISO 800</option>
+                                <option value="1600">ISO 1600</option>
+                                <option value="3200">ISO 3200</option>
+                            </select>
+                        </div>
+                        <button class="btn-calculate" onclick="calculateFlash()" data-i18n="calc.calculate">Berechnen</button>
+                    </div>
+                    <div class="calc-results">
+                        <h3 data-i18n="calc.results">Ergebnisse</h3>
+                        <div class="result-card">
+                            <div class="result-item highlight">
+                                <span class="result-label" data-i18n="flash.maxrange">Maximale Reichweite</span>
+                                <span class="result-value" id="flash-range">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="flash.at100">Bei ISO 100</span>
+                                <span class="result-value" id="flash-range-100">--</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Magnification Calculator -->
+            <div class="calc-panel" id="calc-magnification">
+                <div class="calc-grid">
+                    <div class="calc-inputs">
+                        <h3 data-i18n="mag.title">Abbildungsmassstab</h3>
+                        <p class="calc-info" data-i18n="mag.info">Berechne den Abbildungsmassstab f&uuml;r Makrofotografie.</p>
+                        <div class="input-group">
+                            <label data-i18n="calc.focal">Brennweite (mm)</label>
+                            <input type="number" id="mag-focal" value="100" min="1" max="2000">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="mag.mindist">Naheinstellgrenze (cm)</label>
+                            <input type="number" id="mag-min-focus" value="30" min="1" max="10000">
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="mag.sensorwidth">Sensorbreite (mm)</label>
+                            <input type="number" id="mag-sensor-w" value="36" min="1" max="100" step="0.1">
+                        </div>
+                        <button class="btn-calculate" onclick="calculateMagnification()" data-i18n="calc.calculate">Berechnen</button>
+                    </div>
+                    <div class="calc-results">
+                        <h3 data-i18n="calc.results">Ergebnisse</h3>
+                        <div class="result-card">
+                            <div class="result-item highlight">
+                                <span class="result-label" data-i18n="mag.ratio">Abbildungsmassstab</span>
+                                <span class="result-value" id="mag-ratio">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="mag.field">Erfasstes Feld (Breite)</span>
+                                <span class="result-value" id="mag-field">--</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="result-label" data-i18n="mag.macro">Makro-Tauglichkeit</span>
+                                <span class="result-value" id="mag-macro">--</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ==================== COMPOSITION RULES ==================== -->
+    <section class="section section-dark" id="composition">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag" data-i18n="comp.tag">Komposition</span>
+                <h2 class="section-title" data-i18n="comp.title">Fotografie-Regeln</h2>
+                <p class="section-desc" data-i18n="comp.desc">Beherrsche die wichtigsten Kompositionsregeln f&uuml;r beeindruckende Fotos.</p>
+            </div>
+
+            <div class="rules-grid" id="rulesGrid">
+                <!-- Generated by JS for i18n -->
+            </div>
+        </div>
+    </section>
+
+    <!-- ==================== MOTIF RECOGNITION ==================== -->
+    <section class="section" id="motif">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag" data-i18n="motif.tag">Motiverkennung</span>
+                <h2 class="section-title" data-i18n="motif.title">Motiverkennung &amp; Genres</h2>
+                <p class="section-desc" data-i18n="motif.desc">Lerne verschiedene Fotografie-Genres und ihre optimalen Einstellungen kennen.</p>
+            </div>
+
+            <div class="motif-filter" id="motifFilter">
+                <!-- Generated by JS for i18n -->
+            </div>
+
+            <div class="motif-grid" id="motifGrid">
+                <!-- Generated by JS -->
+            </div>
+        </div>
+    </section>
+
+    <!-- ==================== EXPOSURE TRIANGLE ==================== -->
+    <section class="section section-dark" id="exposure">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag" data-i18n="exp.tag">Grundlagen</span>
+                <h2 class="section-title" data-i18n="exp.title">Belichtungsdreieck</h2>
+                <p class="section-desc" data-i18n="exp.desc">Verstehe das Zusammenspiel von Blende, Verschlusszeit und ISO.</p>
+            </div>
+
+            <div class="exposure-interactive">
+                <div class="exposure-triangle-visual">
+                    <canvas id="exposure-canvas" width="500" height="450"></canvas>
+                </div>
+                <div class="exposure-controls">
+                    <div class="exposure-param">
+                        <div class="param-header">
+                            <h3 data-i18n="exp.aperture">Blende (Aperture)</h3>
+                            <span class="param-value" id="exp-aperture-val">f/5.6</span>
+                        </div>
+                        <input type="range" id="exp-aperture" min="0" max="9" step="1" value="4">
+                        <div class="param-scale">
+                            <span>f/1.4</span><span>f/2</span><span>f/2.8</span><span>f/4</span><span>f/5.6</span><span>f/8</span><span>f/11</span><span>f/16</span><span>f/22</span><span>f/32</span>
+                        </div>
+                        <p class="param-desc" id="exp-aperture-desc" data-i18n="exp.aperture.mid">Mittlere Blende &ndash; guter Kompromiss aus Sch&auml;rfe und Licht.</p>
+                    </div>
+                    <div class="exposure-param">
+                        <div class="param-header">
+                            <h3 data-i18n="exp.shutter">Verschlusszeit (Shutter)</h3>
+                            <span class="param-value" id="exp-shutter-val">1/125s</span>
+                        </div>
+                        <input type="range" id="exp-shutter" min="0" max="11" step="1" value="5">
+                        <div class="param-scale">
+                            <span>30s</span><span>15s</span><span>1s</span><span>1/4</span><span>1/30</span><span>1/125</span><span>1/250</span><span>1/500</span><span>1/1000</span><span>1/2000</span><span>1/4000</span><span>1/8000</span>
+                        </div>
+                        <p class="param-desc" id="exp-shutter-desc" data-i18n="exp.shutter.mid">Standard-Verschlusszeit &ndash; friert die meisten Bewegungen ein.</p>
+                    </div>
+                    <div class="exposure-param">
+                        <div class="param-header">
+                            <h3>ISO</h3>
+                            <span class="param-value" id="exp-iso-val">ISO 400</span>
+                        </div>
+                        <input type="range" id="exp-iso" min="0" max="8" step="1" value="2">
+                        <div class="param-scale">
+                            <span>100</span><span>200</span><span>400</span><span>800</span><span>1600</span><span>3200</span><span>6400</span><span>12800</span><span>25600</span>
+                        </div>
+                        <p class="param-desc" id="exp-iso-desc" data-i18n="exp.iso.low">Niedriges ISO &ndash; minimales Rauschen, beste Qualit&auml;t.</p>
+                    </div>
+                    <div class="exposure-result">
+                        <div class="ev-meter">
+                            <div class="ev-bar">
+                                <div class="ev-indicator" id="ev-indicator"></div>
+                            </div>
+                            <div class="ev-labels">
+                                <span>-3 EV</span><span>-2</span><span>-1</span><span>0</span><span>+1</span><span>+2</span><span>+3 EV</span>
+                            </div>
+                        </div>
+                        <p class="ev-text" id="ev-text" data-i18n="exp.correct">Korrekte Belichtung</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ==================== QUIZ SECTION ==================== -->
+    <section class="section" id="quiz">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag" data-i18n="quiz.tag">Lernkontrolle</span>
+                <h2 class="section-title" data-i18n="quiz.title">Fotografie-Quiz</h2>
+                <p class="section-desc" data-i18n="quiz.desc">Teste dein Wissen mit interaktiven Quizfragen zu allen Themen.</p>
+            </div>
+
+            <div class="quiz-categories" id="quizCategories">
+                <!-- Generated by JS for i18n -->
+            </div>
+
+            <div class="quiz-container" id="quizContainer">
+                <div class="quiz-start" id="quizStart">
+                    <div class="quiz-start-icon">&#127909;</div>
+                    <h3 data-i18n="quiz.ready">Bereit f&uuml;r das Quiz?</h3>
+                    <p data-i18n="quiz.choose">W&auml;hle eine Kategorie und teste dein Fotografie-Wissen!</p>
+                    <p class="quiz-info" data-i18n="quiz.info">10 Fragen pro Runde &bull; Multiple Choice &bull; Sofortiges Feedback</p>
+                    <button class="btn-quiz-start" onclick="startQuiz('all')" data-i18n="quiz.start">Quiz starten</button>
+                </div>
+
+                <div class="quiz-active" id="quizActive" style="display:none">
+                    <div class="quiz-progress">
+                        <div class="quiz-progress-bar">
+                            <div class="quiz-progress-fill" id="quizProgress"></div>
+                        </div>
+                        <span class="quiz-progress-text" id="quizProgressText">1 / 10</span>
+                    </div>
+                    <div class="quiz-score-bar">
+                        <span class="quiz-score" id="quizScore"></span>
+                        <span class="quiz-timer" id="quizTimer">00:00</span>
+                    </div>
+                    <div class="quiz-question-card" id="quizQuestionCard">
+                        <span class="quiz-category-badge" id="quizCategoryBadge"></span>
+                        <h3 class="quiz-question" id="quizQuestion"></h3>
+                        <div class="quiz-options" id="quizOptions"></div>
+                        <div class="quiz-explanation" id="quizExplanation" style="display:none">
+                            <p id="quizExplanationText"></p>
+                        </div>
+                        <button class="btn-quiz-next" id="quizNextBtn" style="display:none" onclick="nextQuestion()" data-i18n="quiz.next">N&auml;chste Frage</button>
+                    </div>
+                </div>
+
+                <div class="quiz-results" id="quizResults" style="display:none">
+                    <div class="results-circle">
+                        <svg viewBox="0 0 120 120">
+                            <circle cx="60" cy="60" r="54" class="results-circle-bg"/>
+                            <circle cx="60" cy="60" r="54" class="results-circle-fill" id="resultsCircle"/>
+                        </svg>
+                        <span class="results-percent" id="resultsPercent">0%</span>
+                    </div>
+                    <h3 class="results-title" id="resultsTitle" data-i18n="quiz.finished">Quiz beendet!</h3>
+                    <p class="results-text" id="resultsText"></p>
+                    <div class="results-breakdown" id="resultsBreakdown"></div>
+                    <div class="results-actions">
+                        <button class="btn-quiz-restart" onclick="startQuiz('all')" data-i18n="quiz.playagain">Nochmal spielen</button>
+                        <button class="btn-quiz-review" onclick="reviewAnswers()" data-i18n="quiz.review">Antworten ansehen</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ==================== SIMULATION TOOLS ==================== -->
+    <section class="section section-dark" id="simtools">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag" data-i18n="sim.tag">Simulation</span>
+                <h2 class="section-title" data-i18n="sim.title">Foto-Simulationen</h2>
+                <p class="section-desc" data-i18n="sim.desc">Simuliere verschiedene Foto-Effekte in Echtzeit.</p>
+            </div>
+
+            <div class="sim-tabs">
+                <button class="sim-tab active" data-sim="bokeh" data-i18n="sim.bokeh">Bokeh</button>
+                <button class="sim-tab" data-sim="longexp" data-i18n="sim.longexp">Langzeitbelichtung</button>
+                <button class="sim-tab" data-sim="wb" data-i18n="sim.wb">Wei&szlig;abgleich</button>
+                <button class="sim-tab" data-sim="noise" data-i18n="sim.noise">ISO-Rauschen</button>
+                <button class="sim-tab" data-sim="perspective" data-i18n="sim.perspective">Perspektive</button>
+                <button class="sim-tab" data-sim="histogram" data-i18n="sim.histogram">Histogramm</button>
+            </div>
+
+            <!-- Bokeh Simulator -->
+            <div class="sim-panel active" id="sim-bokeh">
+                <div class="sim-grid">
+                    <div class="sim-controls">
+                        <h3 data-i18n="sim.bokeh.title">Bokeh-Simulator</h3>
+                        <p class="sim-info" data-i18n="sim.bokeh.info">Sieh wie sich Bokeh mit verschiedenen Blenden und Brennweiten ver&auml;ndert.</p>
+                        <div class="input-group">
+                            <label data-i18n="calc.aperture">Blende (f/)</label>
+                            <input type="range" id="sim-bokeh-aperture" min="1.4" max="22" step="0.1" value="2.8">
+                            <span class="range-value" id="sim-bokeh-aperture-val">f/2.8</span>
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="sim.bokeh.blades">Blendenlamellen</label>
+                            <input type="range" id="sim-bokeh-blades" min="5" max="11" step="1" value="7">
+                            <span class="range-value" id="sim-bokeh-blades-val">7</span>
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="sim.bokeh.intensity">Bokeh-Intensit&auml;t</label>
+                            <input type="range" id="sim-bokeh-intensity" min="0" max="100" step="1" value="70">
+                            <span class="range-value" id="sim-bokeh-intensity-val">70%</span>
+                        </div>
+                    </div>
+                    <div class="sim-canvas-wrap">
+                        <canvas id="sim-bokeh-canvas" width="500" height="400"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Long Exposure Simulator -->
+            <div class="sim-panel" id="sim-longexp">
+                <div class="sim-grid">
+                    <div class="sim-controls">
+                        <h3 data-i18n="sim.longexp.title">Langzeitbelichtungs-Simulator</h3>
+                        <p class="sim-info" data-i18n="sim.longexp.info">Sieh den Effekt verschiedener Belichtungszeiten auf Bewegung.</p>
+                        <div class="input-group">
+                            <label data-i18n="sim.longexp.time">Belichtungszeit (s)</label>
+                            <input type="range" id="sim-longexp-time" min="0" max="8" step="1" value="3">
+                            <span class="range-value" id="sim-longexp-time-val">1/4s</span>
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="sim.longexp.speed">Bewegungsgeschwindigkeit</label>
+                            <input type="range" id="sim-longexp-speed" min="1" max="10" step="1" value="5">
+                            <span class="range-value" id="sim-longexp-speed-val">5</span>
+                        </div>
+                    </div>
+                    <div class="sim-canvas-wrap">
+                        <canvas id="sim-longexp-canvas" width="500" height="400"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- White Balance Simulator -->
+            <div class="sim-panel" id="sim-wb">
+                <div class="sim-grid">
+                    <div class="sim-controls">
+                        <h3 data-i18n="sim.wb.title">Wei&szlig;abgleich-Simulator</h3>
+                        <p class="sim-info" data-i18n="sim.wb.info">Sieh wie die Farbtemperatur dein Bild beeinflusst.</p>
+                        <div class="input-group">
+                            <label data-i18n="sim.wb.kelvin">Temperatur (K)</label>
+                            <input type="range" id="sim-wb-kelvin" min="2000" max="12000" step="100" value="5500">
+                            <span class="range-value" id="sim-wb-kelvin-val">5500K</span>
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="sim.wb.tint">T&ouml;nung</label>
+                            <input type="range" id="sim-wb-tint" min="-50" max="50" step="1" value="0">
+                            <span class="range-value" id="sim-wb-tint-val">0</span>
+                        </div>
+                    </div>
+                    <div class="sim-canvas-wrap">
+                        <canvas id="sim-wb-canvas" width="500" height="400"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ISO Noise Simulator -->
+            <div class="sim-panel" id="sim-noise">
+                <div class="sim-grid">
+                    <div class="sim-controls">
+                        <h3 data-i18n="sim.noise.title">ISO-Rausch-Simulator</h3>
+                        <p class="sim-info" data-i18n="sim.noise.info">Sieh wie digitales Rauschen mit h&ouml;heren ISO-Werten zunimmt.</p>
+                        <div class="input-group">
+                            <label>ISO</label>
+                            <input type="range" id="sim-noise-iso" min="0" max="8" step="1" value="2">
+                            <span class="range-value" id="sim-noise-iso-val">ISO 400</span>
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="sim.noise.level">Rausch-Level</label>
+                            <input type="range" id="sim-noise-level" min="0" max="100" step="1" value="50">
+                            <span class="range-value" id="sim-noise-level-val">50%</span>
+                        </div>
+                    </div>
+                    <div class="sim-canvas-wrap">
+                        <canvas id="sim-noise-canvas" width="500" height="400"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Perspective Simulator -->
+            <div class="sim-panel" id="sim-perspective">
+                <div class="sim-grid">
+                    <div class="sim-controls">
+                        <h3 data-i18n="sim.perspective.title">Perspektiv-Simulator</h3>
+                        <p class="sim-info" data-i18n="sim.perspective.info">Sieh wie die Brennweite die Perspektive beeinflusst.</p>
+                        <div class="input-group">
+                            <label data-i18n="calc.focal">Brennweite (mm)</label>
+                            <input type="range" id="sim-perspective-focal" min="14" max="200" step="1" value="50">
+                            <span class="range-value" id="sim-perspective-focal-val">50mm</span>
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="sim.perspective.type">Verzerrungstyp</label>
+                            <select id="sim-perspective-type">
+                                <option value="barrel">Barrel</option>
+                                <option value="pincushion">Pincushion</option>
+                                <option value="none" selected>None</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="sim-canvas-wrap">
+                        <canvas id="sim-perspective-canvas" width="500" height="400"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Histogram Simulator -->
+            <div class="sim-panel" id="sim-histogram">
+                <div class="sim-grid">
+                    <div class="sim-controls">
+                        <h3 data-i18n="sim.histogram.title">Histogramm-Simulator</h3>
+                        <p class="sim-info" data-i18n="sim.histogram.info">Sieh das Histogramm basierend auf Belichtungseinstellungen.</p>
+                        <div class="input-group">
+                            <label data-i18n="exp.aperture">Blende</label>
+                            <input type="range" id="sim-hist-aperture" min="0" max="9" step="1" value="4">
+                            <span class="range-value" id="sim-hist-aperture-val">f/5.6</span>
+                        </div>
+                        <div class="input-group">
+                            <label data-i18n="exp.shutter">Verschlusszeit</label>
+                            <input type="range" id="sim-hist-shutter" min="0" max="11" step="1" value="5">
+                            <span class="range-value" id="sim-hist-shutter-val">1/125s</span>
+                        </div>
+                        <div class="input-group">
+                            <label>ISO</label>
+                            <input type="range" id="sim-hist-iso" min="0" max="8" step="1" value="2">
+                            <span class="range-value" id="sim-hist-iso-val">ISO 400</span>
+                        </div>
+                    </div>
+                    <div class="sim-canvas-wrap">
+                        <canvas id="sim-histogram-canvas" width="500" height="400"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <span class="logo-icon">&#9673;</span> PhotoPro Tools
+                    <p data-i18n="footer.brand">Dein kostenloser Fotografie-Werkzeugkasten f&uuml;r bessere Bilder.</p>
+                </div>
+                <div class="footer-links">
+                    <h4 data-i18n="footer.tools">Werkzeuge</h4>
+                    <a href="#lens-calc" data-i18n="nav.lens">Linsenrechner</a>
+                    <a href="#composition" data-i18n="footer.comprules">Kompositionsregeln</a>
+                    <a href="#motif" data-i18n="nav.motif">Motiverkennung</a>
+                    <a href="#exposure" data-i18n="footer.exptriangle">Belichtungsdreieck</a>
+                    <a href="#quiz">Quiz</a>
+                    <a href="#simtools" data-i18n="nav.simtools">Simulation</a>
+                </div>
+                <div class="footer-links">
+                    <h4 data-i18n="footer.calcs">Rechner</h4>
+                    <a href="#lens-calc" data-i18n="dof.total">Scharfentiefe</a>
+                    <a href="#lens-calc" data-i18n="fov.title">Bildwinkel</a>
+                    <a href="#lens-calc" data-i18n="crop.factor">Crop-Faktor</a>
+                    <a href="#lens-calc" data-i18n="hyper.title">Hyperfokale Distanz</a>
+                    <a href="#lens-calc" data-i18n="flash.title">Blitz-Reichweite</a>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p data-i18n="footer.copy">&copy; 2026 PhotoPro Tools &mdash; Erstellt mit Leidenschaft f&uuml;r die Fotografie.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="js/i18n.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>
@@ -0,0 +1,371 @@
+/* ==================== i18n - Internationalization System ==================== */
+window.currentLang = 'de';
+
+window.I18N = {
+/* ===== DEUTSCH ===== */
+de: {
+"nav.lens":"Linsenrechner","nav.composition":"Komposition","nav.motif":"Motiverkennung","nav.exposure":"Belichtung","nav.quiz":"Quiz",
+"hero.welcome":"Willkommen bei","hero.desc":"Dein ultimativer Fotografie-Werkzeugkasten. Linsenberechnungen, Kompositionsregeln, Motiverkennung und interaktive Quizze \u2014 alles an einem Ort.","hero.calculators":"Rechner","hero.rules":"Regeln","hero.questions":"Quiz-Fragen","hero.cta":"Jetzt starten",
+"lens.tag":"Werkzeuge","lens.title":"Linsenrechner","lens.desc":"Berechne Sch\u00e4rfentiefe, Bildwinkel, Crop-Faktor und mehr.","lens.tab.dof":"Sch\u00e4rfentiefe (DOF)","lens.tab.fov":"Bildwinkel (FOV)","lens.tab.crop":"Crop-Faktor","lens.tab.hyper":"Hyperfokale Distanz","lens.tab.flash":"Blitz-Reichweite","lens.tab.mag":"Abbildungsma\u00dfstab",
+"calc.focal":"Brennweite (mm)","calc.aperture":"Blende (f/)","calc.sensor":"Sensorgr\u00f6\u00dfe","calc.calculate":"Berechnen","calc.results":"Ergebnisse",
+"dof.title":"Sch\u00e4rfentiefe berechnen","dof.info":"Die Sch\u00e4rfentiefe (Depth of Field) gibt den Bereich an, der im Bild scharf abgebildet wird.","dof.distance":"Entfernung zum Motiv (m)","dof.total":"Sch\u00e4rfentiefe","dof.near":"Nahpunkt","dof.far":"Fernpunkt","dof.coc":"Zerstreuungskreis",
+"fov.title":"Bildwinkel berechnen","fov.info":"Der Bildwinkel bestimmt, wie viel der Szene die Kamera erfasst.","fov.horizontal":"Horizontaler Bildwinkel","fov.vertical":"Vertikaler Bildwinkel","fov.diagonal":"Diagonaler Bildwinkel","fov.lenstype":"Objektivtyp",
+"crop.title":"Crop-Faktor berechnen","crop.info":"Der Crop-Faktor zeigt den \u00e4quivalenten Bildausschnitt im Vergleich zum Vollformat.","crop.lensfocal":"Brennweite am Objektiv (mm)","crop.lensaperture":"Blende am Objektiv (f/)","crop.camerasensor":"Kamerasensor","crop.equivfocal":"\u00c4quivalente Brennweite (KB)","crop.equivaperture":"\u00c4quivalente Blende (KB)","crop.factor":"Crop-Faktor","crop.fullframe":"Vollformat",
+"hyper.title":"Hyperfokale Distanz","hyper.info":"Die Entfernung, ab der alles bis unendlich scharf ist.","hyper.distance":"Hyperfokale Distanz","hyper.near":"Nahpunkt (bei Fokus auf H)","hyper.tiplabel":"Tipp","hyper.tip":"Fokussiere auf die hyperfokale Distanz f\u00fcr maximale Sch\u00e4rfe.",
+"flash.title":"Blitz-Reichweite","flash.info":"Berechne die maximale Blitzreichweite basierend auf Leitzahl und Einstellungen.","flash.gn":"Leitzahl (GN)","flash.maxrange":"Maximale Reichweite","flash.at100":"Bei ISO 100",
+"mag.title":"Abbildungsma\u00dfstab","mag.info":"Berechne den Abbildungsma\u00dfstab f\u00fcr Makrofotografie.","mag.mindist":"Naheinstellgrenze (cm)","mag.sensorwidth":"Sensorbreite (mm)","mag.ratio":"Abbildungsma\u00dfstab","mag.field":"Erfasstes Feld (Breite)","mag.macro":"Makro-Tauglichkeit",
+"comp.tag":"Komposition","comp.title":"Fotografie-Regeln","comp.desc":"Beherrsche die wichtigsten Kompositionsregeln f\u00fcr beeindruckende Fotos.","comp.demo":"Demo anzeigen",
+"motif.tag":"Motiverkennung","motif.title":"Motiverkennung & Genres","motif.desc":"Lerne verschiedene Fotografie-Genres und ihre optimalen Einstellungen kennen.","motif.all":"Alle","motif.portrait":"Portr\u00e4t","motif.landscape":"Landschaft","motif.street":"Street","motif.macro":"Makro","motif.night":"Nacht","motif.sport":"Sport","motif.architecture":"Architektur","motif.wildlife":"Wildlife",
+"exp.tag":"Grundlagen","exp.title":"Belichtungsdreieck","exp.desc":"Verstehe das Zusammenspiel von Blende, Verschlusszeit und ISO.","exp.aperture":"Blende (Aperture)","exp.shutter":"Verschlusszeit (Shutter)","exp.aperture.mid":"Mittlere Blende \u2013 guter Kompromiss aus Sch\u00e4rfe und Licht.","exp.shutter.mid":"Standard-Verschlusszeit \u2013 friert die meisten Bewegungen ein.","exp.iso.low":"Niedriges ISO \u2013 minimales Rauschen, beste Qualit\u00e4t.","exp.correct":"Korrekte Belichtung","exp.under":"Unterbelichtet","exp.over":"\u00dcberbelichtet","exp.slightunder":"Leicht unterbelichtet","exp.slightover":"Leicht \u00fcberbelichtet",
+"quiz.tag":"Lernkontrolle","quiz.title":"Fotografie-Quiz","quiz.desc":"Teste dein Wissen mit interaktiven Quizfragen zu allen Themen.","quiz.all":"Alle Themen","quiz.basics":"Grundlagen","quiz.composition":"Komposition","quiz.lenses":"Objektive","quiz.exposure":"Belichtung","quiz.genres":"Genres","quiz.ready":"Bereit f\u00fcr das Quiz?","quiz.choose":"W\u00e4hle eine Kategorie und teste dein Fotografie-Wissen!","quiz.info":"10 Fragen pro Runde \u2022 Multiple Choice \u2022 Sofortiges Feedback","quiz.start":"Quiz starten","quiz.next":"N\u00e4chste Frage","quiz.finished":"Quiz beendet!","quiz.playagain":"Nochmal spielen","quiz.review":"Antworten ansehen","quiz.score":"Punkte","quiz.resulttext":"Du hast {0} von {1} Fragen richtig beantwortet.","quiz.excellent":"Ausgezeichnet! Du bist ein Fotografie-Profi!","quiz.good":"Gut gemacht! Solides Wissen!","quiz.ok":"Nicht schlecht! Weiter \u00fcben!","quiz.needwork":"Da geht noch mehr! Lerne die Grundlagen nochmal.",
+"footer.brand":"Dein kostenloser Fotografie-Werkzeugkasten f\u00fcr bessere Bilder.","footer.tools":"Werkzeuge","footer.calcs":"Rechner","footer.comprules":"Kompositionsregeln","footer.exptriangle":"Belichtungsdreieck","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Erstellt mit Leidenschaft f\u00fcr die Fotografie.",
+"sensor.ff":"Vollformat (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 Zoll (13.2x8.8mm)","sensor.small":"1/2.3 Zoll (6.17x4.55mm)","sensor.ff_short":"Vollformat","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Vollformat (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 Zoll (2.7x)","sensor.small_5_6":"1/2.3 Zoll (5.6x)",
+"lenstype.superwide":"Super-Weitwinkel","lenstype.wide":"Weitwinkel","lenstype.normal":"Normalobjektiv","lenstype.tele":"Teleobjektiv","lenstype.supertele":"Super-Teleobjektiv",
+"macro.true":"Echtes Makro (1:1+)","macro.half":"Halbes Makro (~1:2)","macro.close":"Nahaufnahme","macro.no":"Kein Makro",
+"rule.thirds.name":"Drittel-Regel","rule.thirds.desc":"Teile das Bild in 9 gleiche Felder. Platziere wichtige Elemente auf den Linien oder Schnittpunkten.","rule.thirds.tip1":"Horizont auf obere oder untere Drittellinie","rule.thirds.tip2":"Augen des Motivs auf obere Schnittpunkte","rule.thirds.tip3":"Hauptmotiv nie genau in die Mitte",
+"rule.golden.name":"Goldener Schnitt","rule.golden.desc":"Das Verh\u00e4ltnis von 1:1,618 \u2013 die perfekte Proportion der Natur.","rule.golden.tip1":"Teilt das Bild im Verh\u00e4ltnis ca. 62% zu 38%","rule.golden.tip2":"Wirkt harmonischer als die Drittelregel","rule.golden.tip3":"In der Natur \u00fcberall zu finden (Muscheln, Blumen)",
+"rule.leading.name":"F\u00fchrende Linien","rule.leading.desc":"Nat\u00fcrliche Linien leiten den Blick des Betrachters zum Hauptmotiv.","rule.leading.tip1":"Stra\u00dfen, Fl\u00fcsse, Z\u00e4une als Linien nutzen","rule.leading.tip2":"Linien sollten ins Bild hineinf\u00fchren","rule.leading.tip3":"Konvergierende Linien erzeugen Tiefe",
+"rule.symmetry.name":"Symmetrie & Muster","rule.symmetry.desc":"Symmetrische Kompositionen strahlen Ruhe und Perfektion aus.","rule.symmetry.tip1":"Spiegelungen in Wasser perfekt f\u00fcr Symmetrie","rule.symmetry.tip2":"Architektur bietet nat\u00fcrliche Symmetrie","rule.symmetry.tip3":"Bewusstes Brechen der Symmetrie als Stilmittel",
+"rule.framing.name":"Nat\u00fcrlicher Rahmen","rule.framing.desc":"Verwende Elemente in der Szene, um dein Motiv einzurahmen.","rule.framing.tip1":"T\u00fcrb\u00f6gen, Fenster, \u00c4ste als Rahmen","rule.framing.tip2":"Lenkt den Blick auf das Hauptmotiv","rule.framing.tip3":"Erzeugt Tiefe und Kontext",
+"rule.negative.name":"Negativer Raum","rule.negative.desc":"Leerer Raum um das Motiv erzeugt Wirkung und Dramatik.","rule.negative.tip1":"Weniger ist mehr \u2013 Minimalismus nutzen","rule.negative.tip2":"Gibt dem Motiv Luft zum Atmen","rule.negative.tip3":"Besonders wirkungsvoll bei Portr\u00e4ts",
+"rule.diagonal.name":"Diagonalen","rule.diagonal.desc":"Diagonale Linien erzeugen Dynamik und Spannung im Bild.","rule.diagonal.tip1":"Von Ecke zu Ecke f\u00fcr maximale Dynamik","rule.diagonal.tip2":"Schr\u00e4ge Perspektiven nutzen","rule.diagonal.tip3":"Bewegungsrichtung entlang der Diagonale",
+"rule.color.name":"Farbtheorie","rule.color.desc":"Komplement\u00e4rfarben und Farbharmonien f\u00fcr starke Bildwirkung.","rule.color.tip1":"Komplement\u00e4rfarben f\u00fcr Kontrast (Blau/Orange)","rule.color.tip2":"Analoge Farben f\u00fcr Harmonie","rule.color.tip3":"Warme Farben im Vordergrund, kalte im Hintergrund",
+"motif.portrait.title":"Portr\u00e4tfotografie","motif.portrait.desc":"Menschen und Gesichter perfekt in Szene setzen.","motif.landscape.title":"Landschaftsfotografie","motif.landscape.desc":"Weite Landschaften und Naturszenen einfangen.","motif.street.title":"Street Photography","motif.street.desc":"Das Leben auf der Stra\u00dfe authentisch dokumentieren.","motif.macro.title":"Makrofotografie","motif.macro.desc":"Kleine Dinge ganz gro\u00df darstellen.","motif.night.title":"Nachtfotografie","motif.night.desc":"Sterne, Stadtlichter und n\u00e4chtliche Szenen.","motif.sport.title":"Sportfotografie","motif.sport.desc":"Schnelle Bewegungen und Action einfrieren.","motif.architecture.title":"Architekturfotografie","motif.architecture.desc":"Geb\u00e4ude und Strukturen in Perfektion.","motif.wildlife.title":"Tierfotografie","motif.wildlife.desc":"Tiere in ihrer nat\u00fcrlichen Umgebung.",
+"motif.setting.lens":"Objektiv","motif.setting.aperture":"Blende","motif.setting.iso":"ISO","motif.setting.shutter":"Verschluss",
+"nav.simtools":"Simulation","sim.tag":"Simulation","sim.title":"Foto-Simulationen","sim.desc":"Simuliere verschiedene Foto-Effekte in Echtzeit.",
+"sim.bokeh":"Bokeh","sim.longexp":"Langzeitbelichtung","sim.wb":"Weißabgleich","sim.noise":"ISO-Rauschen","sim.perspective":"Perspektive","sim.histogram":"Histogramm",
+"sim.bokeh.title":"Bokeh-Simulator","sim.bokeh.info":"Sieh wie sich Bokeh mit verschiedenen Blenden und Brennweiten verändert.","sim.bokeh.blades":"Blendenlamellen","sim.bokeh.intensity":"Bokeh-Intensität",
+"sim.longexp.title":"Langzeitbelichtungs-Simulator","sim.longexp.info":"Sieh den Effekt verschiedener Belichtungszeiten auf Bewegung.","sim.longexp.speed":"Bewegungsgeschwindigkeit","sim.longexp.time":"Belichtungszeit (s)",
+"sim.wb.title":"Weißabgleich-Simulator","sim.wb.info":"Sieh wie die Farbtemperatur dein Bild beeinflusst.","sim.wb.kelvin":"Temperatur (K)","sim.wb.tint":"Tönung",
+"sim.noise.title":"ISO-Rausch-Simulator","sim.noise.info":"Sieh wie digitales Rauschen mit höheren ISO-Werten zunimmt.","sim.noise.level":"Rausch-Level",
+"sim.perspective.title":"Perspektiv-Simulator","sim.perspective.info":"Sieh wie die Brennweite die Perspektive beeinflusst.","sim.perspective.type":"Verzerrungstyp",
+"sim.histogram.title":"Histogramm-Simulator","sim.histogram.info":"Sieh das Histogramm basierend auf Belichtungseinstellungen."
+},
+
+/* ===== ENGLISH ===== */
+en: {
+"nav.lens":"Lens Calculator","nav.composition":"Composition","nav.motif":"Subject Recognition","nav.exposure":"Exposure","nav.quiz":"Quiz",
+"hero.welcome":"Welcome to","hero.desc":"Your ultimate photography toolkit. Lens calculations, composition rules, subject recognition and interactive quizzes \u2014 all in one place.","hero.calculators":"Calculators","hero.rules":"Rules","hero.questions":"Quiz Questions","hero.cta":"Get Started",
+"lens.tag":"Tools","lens.title":"Lens Calculator","lens.desc":"Calculate depth of field, field of view, crop factor and more.","lens.tab.dof":"Depth of Field (DOF)","lens.tab.fov":"Field of View (FOV)","lens.tab.crop":"Crop Factor","lens.tab.hyper":"Hyperfocal Distance","lens.tab.flash":"Flash Range","lens.tab.mag":"Magnification",
+"calc.focal":"Focal Length (mm)","calc.aperture":"Aperture (f/)","calc.sensor":"Sensor Size","calc.calculate":"Calculate","calc.results":"Results",
+"dof.title":"Calculate Depth of Field","dof.info":"Depth of Field (DOF) describes the range that appears sharp in the image.","dof.distance":"Distance to Subject (m)","dof.total":"Depth of Field","dof.near":"Near Point","dof.far":"Far Point","dof.coc":"Circle of Confusion",
+"fov.title":"Calculate Field of View","fov.info":"The field of view determines how much of the scene the camera captures.","fov.horizontal":"Horizontal FOV","fov.vertical":"Vertical FOV","fov.diagonal":"Diagonal FOV","fov.lenstype":"Lens Type",
+"crop.title":"Calculate Crop Factor","crop.info":"The crop factor shows the equivalent field of view compared to full frame.","crop.lensfocal":"Lens Focal Length (mm)","crop.lensaperture":"Lens Aperture (f/)","crop.camerasensor":"Camera Sensor","crop.equivfocal":"Equivalent Focal Length (FF)","crop.equivaperture":"Equivalent Aperture (FF)","crop.factor":"Crop Factor","crop.fullframe":"Full Frame",
+"hyper.title":"Hyperfocal Distance","hyper.info":"The distance at which everything from half that distance to infinity is sharp.","hyper.distance":"Hyperfocal Distance","hyper.near":"Near Point (focused at H)","hyper.tiplabel":"Tip","hyper.tip":"Focus at the hyperfocal distance for maximum sharpness.",
+"flash.title":"Flash Range","flash.info":"Calculate maximum flash range based on guide number and settings.","flash.gn":"Guide Number (GN)","flash.maxrange":"Maximum Range","flash.at100":"At ISO 100",
+"mag.title":"Magnification","mag.info":"Calculate the magnification ratio for macro photography.","mag.mindist":"Minimum Focus Distance (cm)","mag.sensorwidth":"Sensor Width (mm)","mag.ratio":"Magnification Ratio","mag.field":"Captured Field (Width)","mag.macro":"Macro Capability",
+"comp.tag":"Composition","comp.title":"Photography Rules","comp.desc":"Master the most important composition rules for stunning photos.","comp.demo":"Show Demo",
+"motif.tag":"Subject Recognition","motif.title":"Subject Recognition & Genres","motif.desc":"Learn different photography genres and their optimal settings.","motif.all":"All","motif.portrait":"Portrait","motif.landscape":"Landscape","motif.street":"Street","motif.macro":"Macro","motif.night":"Night","motif.sport":"Sport","motif.architecture":"Architecture","motif.wildlife":"Wildlife",
+"exp.tag":"Basics","exp.title":"Exposure Triangle","exp.desc":"Understand the interplay of aperture, shutter speed and ISO.","exp.aperture":"Aperture","exp.shutter":"Shutter Speed","exp.aperture.mid":"Medium aperture \u2013 good compromise between sharpness and light.","exp.shutter.mid":"Standard shutter speed \u2013 freezes most motion.","exp.iso.low":"Low ISO \u2013 minimal noise, best quality.","exp.correct":"Correct Exposure","exp.under":"Underexposed","exp.over":"Overexposed","exp.slightunder":"Slightly underexposed","exp.slightover":"Slightly overexposed",
+"quiz.tag":"Knowledge Check","quiz.title":"Photography Quiz","quiz.desc":"Test your knowledge with interactive quiz questions on all topics.","quiz.all":"All Topics","quiz.basics":"Basics","quiz.composition":"Composition","quiz.lenses":"Lenses","quiz.exposure":"Exposure","quiz.genres":"Genres","quiz.ready":"Ready for the Quiz?","quiz.choose":"Choose a category and test your photography knowledge!","quiz.info":"10 questions per round \u2022 Multiple choice \u2022 Instant feedback","quiz.start":"Start Quiz","quiz.next":"Next Question","quiz.finished":"Quiz Complete!","quiz.playagain":"Play Again","quiz.review":"Review Answers","quiz.score":"Score","quiz.resulttext":"You answered {0} of {1} questions correctly.","quiz.excellent":"Excellent! You are a photography pro!","quiz.good":"Well done! Solid knowledge!","quiz.ok":"Not bad! Keep practicing!","quiz.needwork":"Room for improvement! Review the basics.",
+"footer.brand":"Your free photography toolkit for better images.","footer.tools":"Tools","footer.calcs":"Calculators","footer.comprules":"Composition Rules","footer.exptriangle":"Exposure Triangle","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Made with passion for photography.",
+"sensor.ff":"Full Frame (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 Inch (13.2x8.8mm)","sensor.small":"1/2.3 Inch (6.17x4.55mm)","sensor.ff_short":"Full Frame","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Full Frame (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 Inch (2.7x)","sensor.small_5_6":"1/2.3 Inch (5.6x)",
+"lenstype.superwide":"Super Wide-Angle","lenstype.wide":"Wide-Angle","lenstype.normal":"Normal Lens","lenstype.tele":"Telephoto","lenstype.supertele":"Super Telephoto",
+"macro.true":"True Macro (1:1+)","macro.half":"Half Macro (~1:2)","macro.close":"Close-up","macro.no":"Not Macro",
+"rule.thirds.name":"Rule of Thirds","rule.thirds.desc":"Divide the image into 9 equal parts. Place key elements on the lines or intersections.","rule.thirds.tip1":"Place the horizon on the upper or lower third line","rule.thirds.tip2":"Position subject's eyes on upper intersections","rule.thirds.tip3":"Never place the main subject dead center",
+"rule.golden.name":"Golden Ratio","rule.golden.desc":"The ratio of 1:1.618 \u2013 nature's perfect proportion.","rule.golden.tip1":"Divides the image at approximately 62% to 38%","rule.golden.tip2":"More harmonious than the rule of thirds","rule.golden.tip3":"Found everywhere in nature (shells, flowers)",
+"rule.leading.name":"Leading Lines","rule.leading.desc":"Natural lines in the image guide the viewer's eye to the main subject.","rule.leading.tip1":"Use roads, rivers, fences as lines","rule.leading.tip2":"Lines should lead into the image","rule.leading.tip3":"Converging lines create depth",
+"rule.symmetry.name":"Symmetry & Patterns","rule.symmetry.desc":"Symmetric compositions radiate calm and perfection.","rule.symmetry.tip1":"Reflections in water perfect for symmetry","rule.symmetry.tip2":"Architecture offers natural symmetry","rule.symmetry.tip3":"Deliberately breaking symmetry as a style element",
+"rule.framing.name":"Natural Framing","rule.framing.desc":"Use elements in the scene to frame your subject.","rule.framing.tip1":"Archways, windows, branches as frames","rule.framing.tip2":"Directs attention to the main subject","rule.framing.tip3":"Creates depth and context",
+"rule.negative.name":"Negative Space","rule.negative.desc":"Empty space around the subject creates impact and drama.","rule.negative.tip1":"Less is more \u2013 use minimalism","rule.negative.tip2":"Give the subject room to breathe","rule.negative.tip3":"Especially effective in portraits",
+"rule.diagonal.name":"Diagonals","rule.diagonal.desc":"Diagonal lines create dynamics and tension in the image.","rule.diagonal.tip1":"Corner to corner for maximum dynamics","rule.diagonal.tip2":"Use tilted perspectives","rule.diagonal.tip3":"Direction of movement along the diagonal",
+"rule.color.name":"Color Theory","rule.color.desc":"Complementary colors and color harmonies for strong visual impact.","rule.color.tip1":"Complementary colors for contrast (blue/orange)","rule.color.tip2":"Analogous colors for harmony","rule.color.tip3":"Warm colors foreground, cool colors background",
+"motif.portrait.title":"Portrait Photography","motif.portrait.desc":"Perfectly capture people and faces.","motif.landscape.title":"Landscape Photography","motif.landscape.desc":"Capture wide landscapes and nature scenes.","motif.street.title":"Street Photography","motif.street.desc":"Authentically document life on the streets.","motif.macro.title":"Macro Photography","motif.macro.desc":"Make small things appear large.","motif.night.title":"Night Photography","motif.night.desc":"Stars, city lights and nighttime scenes.","motif.sport.title":"Sports Photography","motif.sport.desc":"Freeze fast movements and action.","motif.architecture.title":"Architecture Photography","motif.architecture.desc":"Buildings and structures in perfection.","motif.wildlife.title":"Wildlife Photography","motif.wildlife.desc":"Animals in their natural habitat.",
+"motif.setting.lens":"Lens","motif.setting.aperture":"Aperture","motif.setting.iso":"ISO","motif.setting.shutter":"Shutter",
+"nav.simtools":"Simulation","sim.tag":"Simulation","sim.title":"Photo Simulations","sim.desc":"Simulate various photo effects in real-time.",
+"sim.bokeh":"Bokeh","sim.longexp":"Long Exposure","sim.wb":"White Balance","sim.noise":"ISO Noise","sim.perspective":"Perspective","sim.histogram":"Histogram",
+"sim.bokeh.title":"Bokeh Simulator","sim.bokeh.info":"See how bokeh changes with different apertures and focal lengths.","sim.bokeh.blades":"Aperture Blades","sim.bokeh.intensity":"Bokeh Intensity",
+"sim.longexp.title":"Long Exposure Simulator","sim.longexp.info":"See the effect of different exposure times on motion.","sim.longexp.speed":"Motion Speed","sim.longexp.time":"Exposure Time (s)",
+"sim.wb.title":"White Balance Simulator","sim.wb.info":"See how color temperature affects your image.","sim.wb.kelvin":"Temperature (K)","sim.wb.tint":"Tint",
+"sim.noise.title":"ISO Noise Simulator","sim.noise.info":"See how digital noise increases with higher ISO values.","sim.noise.level":"Noise Level",
+"sim.perspective.title":"Perspective Simulator","sim.perspective.info":"See how focal length affects perspective.","sim.perspective.type":"Distortion Type",
+"sim.histogram.title":"Histogram Simulator","sim.histogram.info":"View the histogram based on exposure settings."
+},
+
+/* ===== FRAN\u00c7AIS ===== */
+fr: {
+"nav.lens":"Calculateur","nav.composition":"Composition","nav.motif":"Reconnaissance","nav.exposure":"Exposition","nav.quiz":"Quiz",
+"hero.welcome":"Bienvenue sur","hero.desc":"Votre bo\u00eete \u00e0 outils photo ultime. Calculs d'objectifs, r\u00e8gles de composition, reconnaissance de sujets et quiz interactifs \u2014 tout en un seul endroit.","hero.calculators":"Calculateurs","hero.rules":"R\u00e8gles","hero.questions":"Questions Quiz","hero.cta":"Commencer",
+"lens.tag":"Outils","lens.title":"Calculateur d'Objectifs","lens.desc":"Calculez la profondeur de champ, l'angle de vue, le facteur de recadrage et plus.","lens.tab.dof":"Profondeur de Champ","lens.tab.fov":"Angle de Vue","lens.tab.crop":"Facteur de Recadrage","lens.tab.hyper":"Distance Hyperfocale","lens.tab.flash":"Port\u00e9e du Flash","lens.tab.mag":"Grossissement",
+"calc.focal":"Distance Focale (mm)","calc.aperture":"Ouverture (f/)","calc.sensor":"Taille du Capteur","calc.calculate":"Calculer","calc.results":"R\u00e9sultats",
+"dof.title":"Calculer la Profondeur de Champ","dof.info":"La profondeur de champ d\u00e9crit la zone qui appara\u00eet nette dans l'image.","dof.distance":"Distance au Sujet (m)","dof.total":"Profondeur de Champ","dof.near":"Point Proche","dof.far":"Point \u00c9loign\u00e9","dof.coc":"Cercle de Confusion",
+"fov.title":"Calculer l'Angle de Vue","fov.info":"L'angle de vue d\u00e9termine la portion de sc\u00e8ne captur\u00e9e.","fov.horizontal":"Angle Horizontal","fov.vertical":"Angle Vertical","fov.diagonal":"Angle Diagonal","fov.lenstype":"Type d'Objectif",
+"crop.title":"Calculer le Facteur de Recadrage","crop.info":"Le facteur de recadrage montre l'\u00e9quivalent par rapport au plein format.","crop.lensfocal":"Focale de l'Objectif (mm)","crop.lensaperture":"Ouverture de l'Objectif (f/)","crop.camerasensor":"Capteur","crop.equivfocal":"Focale \u00c9quivalente (FF)","crop.equivaperture":"Ouverture \u00c9quivalente (FF)","crop.factor":"Facteur de Recadrage","crop.fullframe":"Plein Format",
+"hyper.title":"Distance Hyperfocale","hyper.info":"La distance \u00e0 partir de laquelle tout est net jusqu'\u00e0 l'infini.","hyper.distance":"Distance Hyperfocale","hyper.near":"Point Proche (\u00e0 H)","hyper.tiplabel":"Conseil","hyper.tip":"Faites la mise au point sur la distance hyperfocale pour une nettet\u00e9 maximale.",
+"flash.title":"Port\u00e9e du Flash","flash.info":"Calculez la port\u00e9e maximale du flash selon le nombre guide.","flash.gn":"Nombre Guide (NG)","flash.maxrange":"Port\u00e9e Maximale","flash.at100":"\u00c0 ISO 100",
+"mag.title":"Grossissement","mag.info":"Calculez le rapport de grossissement pour la macrophotographie.","mag.mindist":"Distance Min. de Mise au Point (cm)","mag.sensorwidth":"Largeur du Capteur (mm)","mag.ratio":"Rapport de Grossissement","mag.field":"Champ Captur\u00e9 (Largeur)","mag.macro":"Capacit\u00e9 Macro",
+"comp.tag":"Composition","comp.title":"R\u00e8gles de Photographie","comp.desc":"Ma\u00eetrisez les r\u00e8gles de composition les plus importantes.","comp.demo":"Voir la D\u00e9mo",
+"motif.tag":"Reconnaissance","motif.title":"Reconnaissance de Sujets & Genres","motif.desc":"D\u00e9couvrez les diff\u00e9rents genres photo et leurs r\u00e9glages optimaux.","motif.all":"Tous","motif.portrait":"Portrait","motif.landscape":"Paysage","motif.street":"Street","motif.macro":"Macro","motif.night":"Nuit","motif.sport":"Sport","motif.architecture":"Architecture","motif.wildlife":"Animalier",
+"exp.tag":"Bases","exp.title":"Triangle d'Exposition","exp.desc":"Comprenez l'interaction entre ouverture, vitesse d'obturation et ISO.","exp.aperture":"Ouverture","exp.shutter":"Vitesse d'Obturation","exp.aperture.mid":"Ouverture moyenne \u2013 bon compromis nettet\u00e9/lumi\u00e8re.","exp.shutter.mid":"Vitesse standard \u2013 fige la plupart des mouvements.","exp.iso.low":"ISO bas \u2013 bruit minimal, meilleure qualit\u00e9.","exp.correct":"Exposition Correcte","exp.under":"Sous-expos\u00e9","exp.over":"Surexpos\u00e9","exp.slightunder":"L\u00e9g\u00e8rement sous-expos\u00e9","exp.slightover":"L\u00e9g\u00e8rement surexpos\u00e9",
+"quiz.tag":"Contr\u00f4le","quiz.title":"Quiz Photo","quiz.desc":"Testez vos connaissances avec des questions interactives.","quiz.all":"Tous les Th\u00e8mes","quiz.basics":"Bases","quiz.composition":"Composition","quiz.lenses":"Objectifs","quiz.exposure":"Exposition","quiz.genres":"Genres","quiz.ready":"Pr\u00eat pour le Quiz ?","quiz.choose":"Choisissez une cat\u00e9gorie et testez vos connaissances !","quiz.info":"10 questions par tour \u2022 Choix multiples \u2022 Feedback instantan\u00e9","quiz.start":"Lancer le Quiz","quiz.next":"Question Suivante","quiz.finished":"Quiz Termin\u00e9 !","quiz.playagain":"Rejouer","quiz.review":"Voir les R\u00e9ponses","quiz.score":"Points","quiz.resulttext":"Vous avez r\u00e9pondu correctement \u00e0 {0} questions sur {1}.","quiz.excellent":"Excellent ! Vous \u00eates un pro de la photo !","quiz.good":"Bien jou\u00e9 ! Connaissances solides !","quiz.ok":"Pas mal ! Continuez \u00e0 pratiquer !","quiz.needwork":"Des progr\u00e8s \u00e0 faire ! R\u00e9visez les bases.",
+"footer.brand":"Votre bo\u00eete \u00e0 outils photo gratuite pour de meilleures images.","footer.tools":"Outils","footer.calcs":"Calculateurs","footer.comprules":"R\u00e8gles de Composition","footer.exptriangle":"Triangle d'Exposition","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Cr\u00e9\u00e9 avec passion pour la photographie.",
+"sensor.ff":"Plein Format (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 Pouce (13.2x8.8mm)","sensor.small":"1/2.3 Pouce (6.17x4.55mm)","sensor.ff_short":"Plein Format","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Plein Format (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 Pouce (2.7x)","sensor.small_5_6":"1/2.3 Pouce (5.6x)",
+"lenstype.superwide":"Super Grand-Angle","lenstype.wide":"Grand-Angle","lenstype.normal":"Objectif Normal","lenstype.tele":"T\u00e9l\u00e9objectif","lenstype.supertele":"Super T\u00e9l\u00e9objectif",
+"macro.true":"Vrai Macro (1:1+)","macro.half":"Demi Macro (~1:2)","macro.close":"Gros Plan","macro.no":"Pas Macro",
+"rule.thirds.name":"R\u00e8gle des Tiers","rule.thirds.desc":"Divisez l'image en 9 parties \u00e9gales. Placez les \u00e9l\u00e9ments cl\u00e9s sur les lignes ou intersections.","rule.thirds.tip1":"Placez l'horizon sur la ligne du tiers sup\u00e9rieur ou inf\u00e9rieur","rule.thirds.tip2":"Yeux du sujet sur les intersections sup\u00e9rieures","rule.thirds.tip3":"Ne jamais placer le sujet principal au centre exact",
+"rule.golden.name":"Nombre d'Or","rule.golden.desc":"Le rapport de 1:1,618 \u2013 la proportion parfaite de la nature.","rule.golden.tip1":"Divise l'image \u00e0 environ 62% / 38%","rule.golden.tip2":"Plus harmonieux que la r\u00e8gle des tiers","rule.golden.tip3":"Pr\u00e9sent partout dans la nature (coquillages, fleurs)",
+"rule.leading.name":"Lignes Directrices","rule.leading.desc":"Les lignes naturelles guident le regard du spectateur vers le sujet.","rule.leading.tip1":"Utilisez routes, rivi\u00e8res, cl\u00f4tures comme lignes","rule.leading.tip2":"Les lignes doivent mener dans l'image","rule.leading.tip3":"Les lignes convergentes cr\u00e9ent de la profondeur",
+"rule.symmetry.name":"Sym\u00e9trie & Motifs","rule.symmetry.desc":"Les compositions sym\u00e9triques rayonnent de calme et perfection.","rule.symmetry.tip1":"Reflets dans l'eau parfaits pour la sym\u00e9trie","rule.symmetry.tip2":"L'architecture offre une sym\u00e9trie naturelle","rule.symmetry.tip3":"Briser d\u00e9lib\u00e9r\u00e9ment la sym\u00e9trie comme effet de style",
+"rule.framing.name":"Cadrage Naturel","rule.framing.desc":"Utilisez des \u00e9l\u00e9ments de la sc\u00e8ne pour encadrer votre sujet.","rule.framing.tip1":"Arches, fen\u00eatres, branches comme cadres","rule.framing.tip2":"Dirige l'attention vers le sujet principal","rule.framing.tip3":"Cr\u00e9e profondeur et contexte",
+"rule.negative.name":"Espace N\u00e9gatif","rule.negative.desc":"L'espace vide autour du sujet cr\u00e9e impact et dramatisme.","rule.negative.tip1":"Moins c'est plus \u2013 utilisez le minimalisme","rule.negative.tip2":"Donnez au sujet de l'espace pour respirer","rule.negative.tip3":"Particuli\u00e8rement efficace en portrait",
+"rule.diagonal.name":"Diagonales","rule.diagonal.desc":"Les lignes diagonales cr\u00e9ent dynamisme et tension dans l'image.","rule.diagonal.tip1":"D'un coin \u00e0 l'autre pour un maximum de dynamisme","rule.diagonal.tip2":"Utilisez des perspectives inclin\u00e9es","rule.diagonal.tip3":"Direction du mouvement le long de la diagonale",
+"rule.color.name":"Th\u00e9orie des Couleurs","rule.color.desc":"Couleurs compl\u00e9mentaires et harmonies pour un fort impact visuel.","rule.color.tip1":"Couleurs compl\u00e9mentaires pour le contraste (bleu/orange)","rule.color.tip2":"Couleurs analogues pour l'harmonie","rule.color.tip3":"Couleurs chaudes au premier plan, froides \u00e0 l'arri\u00e8re",
+"motif.portrait.title":"Photographie de Portrait","motif.portrait.desc":"Mettre parfaitement en sc\u00e8ne les personnes.","motif.landscape.title":"Photographie de Paysage","motif.landscape.desc":"Capturer de vastes paysages et sc\u00e8nes naturelles.","motif.street.title":"Photographie de Rue","motif.street.desc":"Documenter la vie urbaine de mani\u00e8re authentique.","motif.macro.title":"Macrophotographie","motif.macro.desc":"Montrer les petites choses en grand.","motif.night.title":"Photographie de Nuit","motif.night.desc":"\u00c9toiles, lumi\u00e8res de la ville et sc\u00e8nes nocturnes.","motif.sport.title":"Photographie Sportive","motif.sport.desc":"Figer les mouvements rapides et l'action.","motif.architecture.title":"Photographie d'Architecture","motif.architecture.desc":"B\u00e2timents et structures en perfection.","motif.wildlife.title":"Photographie Animalier","motif.wildlife.desc":"Animaux dans leur habitat naturel.",
+"motif.setting.lens":"Objectif","motif.setting.aperture":"Ouverture","motif.setting.iso":"ISO","motif.setting.shutter":"Obturation",
+"nav.simtools":"Simulation","sim.tag":"Simulation","sim.title":"Simulations Photo","sim.desc":"Simulez divers effets photo en temps réel.",
+"sim.bokeh":"Bokeh","sim.longexp":"Longue Exposition","sim.wb":"Balance des Blancs","sim.noise":"Bruit ISO","sim.perspective":"Perspective","sim.histogram":"Histogramme",
+"sim.bokeh.title":"Simulateur de Bokeh","sim.bokeh.info":"Voyez comment le bokeh change avec différentes ouvertures et focales.","sim.bokeh.blades":"Lamelles d'Ouverture","sim.bokeh.intensity":"Intensité du Bokeh",
+"sim.longexp.title":"Simulateur de Longue Exposition","sim.longexp.info":"Voyez l'effet de différents temps d'exposition sur le mouvement.","sim.longexp.speed":"Vitesse de Mouvement","sim.longexp.time":"Temps d'Exposition (s)",
+"sim.wb.title":"Simulateur de Balance des Blancs","sim.wb.info":"Voyez comment la température de couleur affecte votre image.","sim.wb.kelvin":"Température (K)","sim.wb.tint":"Teinte",
+"sim.noise.title":"Simulateur de Bruit ISO","sim.noise.info":"Voyez comment le bruit numérique augmente avec des valeurs ISO élevées.","sim.noise.level":"Niveau de Bruit",
+"sim.perspective.title":"Simulateur de Perspective","sim.perspective.info":"Voyez comment la focale affecte la perspective.","sim.perspective.type":"Type de Distorsion",
+"sim.histogram.title":"Simulateur d'Histogramme","sim.histogram.info":"Voyez l'histogramme selon les réglages d'exposition."
+},
+
+/* ===== ITALIANO ===== */
+it: {
+"nav.lens":"Calcolatore","nav.composition":"Composizione","nav.motif":"Riconoscimento","nav.exposure":"Esposizione","nav.quiz":"Quiz",
+"hero.welcome":"Benvenuto su","hero.desc":"Il tuo toolkit fotografico definitivo. Calcoli degli obiettivi, regole di composizione, riconoscimento soggetti e quiz interattivi \u2014 tutto in un unico posto.","hero.calculators":"Calcolatori","hero.rules":"Regole","hero.questions":"Domande Quiz","hero.cta":"Inizia Ora",
+"lens.tag":"Strumenti","lens.title":"Calcolatore Obiettivi","lens.desc":"Calcola profondit\u00e0 di campo, angolo di campo, fattore di crop e altro.","lens.tab.dof":"Profondit\u00e0 di Campo","lens.tab.fov":"Angolo di Campo","lens.tab.crop":"Fattore di Crop","lens.tab.hyper":"Distanza Iperfocale","lens.tab.flash":"Portata Flash","lens.tab.mag":"Ingrandimento",
+"calc.focal":"Lunghezza Focale (mm)","calc.aperture":"Apertura (f/)","calc.sensor":"Dimensione Sensore","calc.calculate":"Calcola","calc.results":"Risultati",
+"dof.title":"Calcola Profondit\u00e0 di Campo","dof.info":"La profondit\u00e0 di campo descrive la zona che appare nitida nell'immagine.","dof.distance":"Distanza dal Soggetto (m)","dof.total":"Profondit\u00e0 di Campo","dof.near":"Punto Vicino","dof.far":"Punto Lontano","dof.coc":"Cerchio di Confusione",
+"fov.title":"Calcola Angolo di Campo","fov.info":"L'angolo di campo determina quanta scena cattura la fotocamera.","fov.horizontal":"Angolo Orizzontale","fov.vertical":"Angolo Verticale","fov.diagonal":"Angolo Diagonale","fov.lenstype":"Tipo di Obiettivo",
+"crop.title":"Calcola Fattore di Crop","crop.info":"Il fattore di crop mostra l'equivalente rispetto al pieno formato.","crop.lensfocal":"Focale dell'Obiettivo (mm)","crop.lensaperture":"Apertura dell'Obiettivo (f/)","crop.camerasensor":"Sensore Fotocamera","crop.equivfocal":"Focale Equivalente (FF)","crop.equivaperture":"Apertura Equivalente (FF)","crop.factor":"Fattore di Crop","crop.fullframe":"Pieno Formato",
+"hyper.title":"Distanza Iperfocale","hyper.info":"La distanza dalla quale tutto \u00e8 nitido fino all'infinito.","hyper.distance":"Distanza Iperfocale","hyper.near":"Punto Vicino (a fuoco su H)","hyper.tiplabel":"Consiglio","hyper.tip":"Metti a fuoco sulla distanza iperfocale per la massima nitidezza.",
+"flash.title":"Portata Flash","flash.info":"Calcola la portata massima del flash in base al numero guida.","flash.gn":"Numero Guida (NG)","flash.maxrange":"Portata Massima","flash.at100":"A ISO 100",
+"mag.title":"Ingrandimento","mag.info":"Calcola il rapporto di ingrandimento per la macrofotografia.","mag.mindist":"Distanza Min. di Messa a Fuoco (cm)","mag.sensorwidth":"Larghezza Sensore (mm)","mag.ratio":"Rapporto di Ingrandimento","mag.field":"Campo Catturato (Larghezza)","mag.macro":"Capacit\u00e0 Macro",
+"comp.tag":"Composizione","comp.title":"Regole Fotografiche","comp.desc":"Padroneggia le regole di composizione pi\u00f9 importanti per foto straordinarie.","comp.demo":"Mostra Demo",
+"motif.tag":"Riconoscimento","motif.title":"Riconoscimento Soggetti & Generi","motif.desc":"Scopri i diversi generi fotografici e le loro impostazioni ottimali.","motif.all":"Tutti","motif.portrait":"Ritratto","motif.landscape":"Paesaggio","motif.street":"Street","motif.macro":"Macro","motif.night":"Notturna","motif.sport":"Sport","motif.architecture":"Architettura","motif.wildlife":"Natura",
+"exp.tag":"Basi","exp.title":"Triangolo dell'Esposizione","exp.desc":"Comprendi l'interazione tra apertura, tempo di posa e ISO.","exp.aperture":"Apertura","exp.shutter":"Tempo di Posa","exp.aperture.mid":"Apertura media \u2013 buon compromesso tra nitidezza e luce.","exp.shutter.mid":"Tempo di posa standard \u2013 congela la maggior parte dei movimenti.","exp.iso.low":"ISO basso \u2013 rumore minimo, migliore qualit\u00e0.","exp.correct":"Esposizione Corretta","exp.under":"Sottoesposto","exp.over":"Sovraesposto","exp.slightunder":"Leggermente sottoesposto","exp.slightover":"Leggermente sovraesposto",
+"quiz.tag":"Verifica","quiz.title":"Quiz Fotografico","quiz.desc":"Metti alla prova le tue conoscenze con domande interattive.","quiz.all":"Tutti i Temi","quiz.basics":"Basi","quiz.composition":"Composizione","quiz.lenses":"Obiettivi","quiz.exposure":"Esposizione","quiz.genres":"Generi","quiz.ready":"Pronto per il Quiz?","quiz.choose":"Scegli una categoria e metti alla prova le tue conoscenze!","quiz.info":"10 domande per turno \u2022 Scelta multipla \u2022 Feedback istantaneo","quiz.start":"Inizia Quiz","quiz.next":"Prossima Domanda","quiz.finished":"Quiz Completato!","quiz.playagain":"Gioca Ancora","quiz.review":"Rivedi Risposte","quiz.score":"Punti","quiz.resulttext":"Hai risposto correttamente a {0} domande su {1}.","quiz.excellent":"Eccellente! Sei un professionista della fotografia!","quiz.good":"Ben fatto! Conoscenze solide!","quiz.ok":"Non male! Continua a esercitarti!","quiz.needwork":"C'\u00e8 margine di miglioramento! Ripassa le basi.",
+"footer.brand":"Il tuo toolkit fotografico gratuito per immagini migliori.","footer.tools":"Strumenti","footer.calcs":"Calcolatori","footer.comprules":"Regole di Composizione","footer.exptriangle":"Triangolo dell'Esposizione","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Creato con passione per la fotografia.",
+"sensor.ff":"Pieno Formato (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 Pollice (13.2x8.8mm)","sensor.small":"1/2.3 Pollice (6.17x4.55mm)","sensor.ff_short":"Pieno Formato","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Pieno Formato (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 Pollice (2.7x)","sensor.small_5_6":"1/2.3 Pollice (5.6x)",
+"lenstype.superwide":"Super Grandangolo","lenstype.wide":"Grandangolo","lenstype.normal":"Obiettivo Normale","lenstype.tele":"Teleobiettivo","lenstype.supertele":"Super Teleobiettivo",
+"macro.true":"Vero Macro (1:1+)","macro.half":"Mezzo Macro (~1:2)","macro.close":"Primo Piano","macro.no":"Non Macro",
+"rule.thirds.name":"Regola dei Terzi","rule.thirds.desc":"Dividi l'immagine in 9 parti uguali. Posiziona gli elementi chiave sulle linee o intersezioni.","rule.thirds.tip1":"Posiziona l'orizzonte sulla linea del terzo superiore o inferiore","rule.thirds.tip2":"Occhi del soggetto sulle intersezioni superiori","rule.thirds.tip3":"Mai posizionare il soggetto principale esattamente al centro",
+"rule.golden.name":"Sezione Aurea","rule.golden.desc":"Il rapporto 1:1,618 \u2013 la proporzione perfetta della natura.","rule.golden.tip1":"Divide l'immagine circa 62% a 38%","rule.golden.tip2":"Pi\u00f9 armonioso della regola dei terzi","rule.golden.tip3":"Presente ovunque in natura (conchiglie, fiori)",
+"rule.leading.name":"Linee Guida","rule.leading.desc":"Le linee naturali guidano lo sguardo dello spettatore verso il soggetto.","rule.leading.tip1":"Usa strade, fiumi, recinzioni come linee","rule.leading.tip2":"Le linee devono condurre dentro l'immagine","rule.leading.tip3":"Le linee convergenti creano profondit\u00e0",
+"rule.symmetry.name":"Simmetria & Motivi","rule.symmetry.desc":"Le composizioni simmetriche irradiano calma e perfezione.","rule.symmetry.tip1":"Riflessi nell'acqua perfetti per la simmetria","rule.symmetry.tip2":"L'architettura offre simmetria naturale","rule.symmetry.tip3":"Rompere deliberatamente la simmetria come elemento stilistico",
+"rule.framing.name":"Cornice Naturale","rule.framing.desc":"Usa elementi della scena per incorniciare il soggetto.","rule.framing.tip1":"Archi, finestre, rami come cornici","rule.framing.tip2":"Dirige l'attenzione sul soggetto principale","rule.framing.tip3":"Crea profondit\u00e0 e contesto",
+"rule.negative.name":"Spazio Negativo","rule.negative.desc":"Lo spazio vuoto intorno al soggetto crea impatto e drammaticit\u00e0.","rule.negative.tip1":"Meno \u00e8 di pi\u00f9 \u2013 usa il minimalismo","rule.negative.tip2":"Dai al soggetto spazio per respirare","rule.negative.tip3":"Particolarmente efficace nei ritratti",
+"rule.diagonal.name":"Diagonali","rule.diagonal.desc":"Le linee diagonali creano dinamismo e tensione nell'immagine.","rule.diagonal.tip1":"Da angolo ad angolo per il massimo dinamismo","rule.diagonal.tip2":"Usa prospettive inclinate","rule.diagonal.tip3":"Direzione del movimento lungo la diagonale",
+"rule.color.name":"Teoria del Colore","rule.color.desc":"Colori complementari e armonie cromatiche per un forte impatto visivo.","rule.color.tip1":"Colori complementari per il contrasto (blu/arancione)","rule.color.tip2":"Colori analoghi per l'armonia","rule.color.tip3":"Colori caldi in primo piano, freddi sullo sfondo",
+"motif.portrait.title":"Fotografia Ritrattistica","motif.portrait.desc":"Mettere perfettamente in scena le persone.","motif.landscape.title":"Fotografia Paesaggistica","motif.landscape.desc":"Catturare vasti paesaggi e scene naturali.","motif.street.title":"Street Photography","motif.street.desc":"Documentare autenticamente la vita di strada.","motif.macro.title":"Macrofotografia","motif.macro.desc":"Mostrare le piccole cose in grande.","motif.night.title":"Fotografia Notturna","motif.night.desc":"Stelle, luci della citt\u00e0 e scene notturne.","motif.sport.title":"Fotografia Sportiva","motif.sport.desc":"Congelare movimenti veloci e azione.","motif.architecture.title":"Fotografia d'Architettura","motif.architecture.desc":"Edifici e strutture alla perfezione.","motif.wildlife.title":"Fotografia Naturalistica","motif.wildlife.desc":"Animali nel loro habitat naturale.",
+"motif.setting.lens":"Obiettivo","motif.setting.aperture":"Apertura","motif.setting.iso":"ISO","motif.setting.shutter":"Otturatore",
+"nav.simtools":"Simulazione","sim.tag":"Simulazione","sim.title":"Simulazioni Foto","sim.desc":"Simula vari effetti fotografici in tempo reale.",
+"sim.bokeh":"Bokeh","sim.longexp":"Lunga Esposizione","sim.wb":"Bilanciamento del Bianco","sim.noise":"Rumore ISO","sim.perspective":"Prospettiva","sim.histogram":"Istogramma",
+"sim.bokeh.title":"Simulatore Bokeh","sim.bokeh.info":"Guarda come cambia il bokeh con diverse aperture e focali.","sim.bokeh.blades":"Lamelle del Diaframma","sim.bokeh.intensity":"Intensità del Bokeh",
+"sim.longexp.title":"Simulatore Lunga Esposizione","sim.longexp.info":"Guarda l'effetto di diversi tempi di esposizione sul movimento.","sim.longexp.speed":"Velocità di Movimento","sim.longexp.time":"Tempo di Esposizione (s)",
+"sim.wb.title":"Simulatore Bilanciamento del Bianco","sim.wb.info":"Guarda come la temperatura del colore influenza la tua immagine.","sim.wb.kelvin":"Temperatura (K)","sim.wb.tint":"Tonalità",
+"sim.noise.title":"Simulatore Rumore ISO","sim.noise.info":"Guarda come il rumore digitale aumenta con valori ISO più alti.","sim.noise.level":"Livello di Rumore",
+"sim.perspective.title":"Simulatore di Prospettiva","sim.perspective.info":"Guarda come la focale influenza la prospettiva.","sim.perspective.type":"Tipo di Distorsione",
+"sim.histogram.title":"Simulatore di Istogramma","sim.histogram.info":"Visualizza l'istogramma in base alle impostazioni di esposizione."
+},
+
+/* ===== SRPSKI (Latin) ===== */
+sr: {
+"nav.lens":"Kalkulator","nav.composition":"Kompozicija","nav.motif":"Prepoznavanje","nav.exposure":"Ekspozicija","nav.quiz":"Kviz",
+"hero.welcome":"Dobrodo\u0161li na","hero.desc":"Va\u0161 ultimativni fotografski alat. Prora\u010duni objektiva, pravila kompozicije, prepoznavanje motiva i interaktivni kvizovi \u2014 sve na jednom mestu.","hero.calculators":"Kalkulatori","hero.rules":"Pravila","hero.questions":"Pitanja","hero.cta":"Po\u010dni",
+"lens.tag":"Alati","lens.title":"Kalkulator Objektiva","lens.desc":"Izra\u010dunajte dubinu o\u0161trine, ugao snimanja, crop faktor i vi\u0161e.","lens.tab.dof":"Dubina O\u0161trine","lens.tab.fov":"Ugao Snimanja","lens.tab.crop":"Crop Faktor","lens.tab.hyper":"Hiperfokalna Daljina","lens.tab.flash":"Domet Blica","lens.tab.mag":"Uve\u0107anje",
+"calc.focal":"\u017di\u017ena Daljina (mm)","calc.aperture":"Otvor Blende (f/)","calc.sensor":"Veli\u010dina Senzora","calc.calculate":"Izra\u010dunaj","calc.results":"Rezultati",
+"dof.title":"Izra\u010dunaj Dubinu O\u0161trine","dof.info":"Dubina o\u0161trine opisuje opseg koji se pojavljuje o\u0161tar na slici.","dof.distance":"Udaljenost do Motiva (m)","dof.total":"Dubina O\u0161trine","dof.near":"Bli\u017ea Ta\u010dka","dof.far":"Dalja Ta\u010dka","dof.coc":"Krug Konfuzije",
+"fov.title":"Izra\u010dunaj Ugao Snimanja","fov.info":"Ugao snimanja odre\u0111uje koliko scene kamera obuhvata.","fov.horizontal":"Horizontalni Ugao","fov.vertical":"Vertikalni Ugao","fov.diagonal":"Dijagonalni Ugao","fov.lenstype":"Tip Objektiva",
+"crop.title":"Izra\u010dunaj Crop Faktor","crop.info":"Crop faktor pokazuje ekvivalentni ise\u010dak u pore\u0111enju sa punim formatom.","crop.lensfocal":"\u017di\u017ena Daljina Objektiva (mm)","crop.lensaperture":"Blenda Objektiva (f/)","crop.camerasensor":"Senzor Kamere","crop.equivfocal":"Ekvivalentna \u017di\u017ena Daljina","crop.equivaperture":"Ekvivalentna Blenda","crop.factor":"Crop Faktor","crop.fullframe":"Pun Format",
+"hyper.title":"Hiperfokalna Daljina","hyper.info":"Udaljenost od koje je sve o\u0161tro do beskona\u010dnosti.","hyper.distance":"Hiperfokalna Daljina","hyper.near":"Bli\u017ea Ta\u010dka (fokus na H)","hyper.tiplabel":"Savet","hyper.tip":"Fokusirajte na hiperfokalnu daljinu za maksimalnu o\u0161trinu.",
+"flash.title":"Domet Blica","flash.info":"Izra\u010dunajte maksimalni domet blica na osnovu vodenog broja.","flash.gn":"Vode\u0107i Broj (GN)","flash.maxrange":"Maksimalni Domet","flash.at100":"Pri ISO 100",
+"mag.title":"Uve\u0107anje","mag.info":"Izra\u010dunajte odnos uve\u0107anja za makro fotografiju.","mag.mindist":"Min. Udaljenost Fokusa (cm)","mag.sensorwidth":"\u0160irina Senzora (mm)","mag.ratio":"Odnos Uve\u0107anja","mag.field":"Obuhva\u0107eno Polje (\u0160irina)","mag.macro":"Makro Sposobnost",
+"comp.tag":"Kompozicija","comp.title":"Pravila Fotografije","comp.desc":"Savladajte najva\u017enija pravila kompozicije za impresivne fotografije.","comp.demo":"Prika\u017ei Demo",
+"motif.tag":"Prepoznavanje","motif.title":"Prepoznavanje Motiva & \u017danrovi","motif.desc":"Nau\u010dite razli\u010dite fotografske \u017eanrove i njihova optimalna pode\u0161avanja.","motif.all":"Svi","motif.portrait":"Portret","motif.landscape":"Pejza\u017e","motif.street":"Ulica","motif.macro":"Makro","motif.night":"No\u0107","motif.sport":"Sport","motif.architecture":"Arhitektura","motif.wildlife":"Divljina",
+"exp.tag":"Osnove","exp.title":"Trougao Ekspozicije","exp.desc":"Razumite interakciju izme\u0111u blende, brzine zatva\u010da i ISO.","exp.aperture":"Blenda","exp.shutter":"Brzina Zatva\u010da","exp.aperture.mid":"Srednja blenda \u2013 dobar kompromis izme\u0111u o\u0161trine i svetlosti.","exp.shutter.mid":"Standardna brzina \u2013 zamrzava ve\u0107inu pokreta.","exp.iso.low":"Nizak ISO \u2013 minimalan \u0161um, najbolji kvalitet.","exp.correct":"Korektna Ekspozicija","exp.under":"Podeksponirana","exp.over":"Preeksponirana","exp.slightunder":"Blago podeksponirana","exp.slightover":"Blago preeksponirana",
+"quiz.tag":"Provera Znanja","quiz.title":"Fotografski Kviz","quiz.desc":"Testirajte svoje znanje sa interaktivnim pitanjima.","quiz.all":"Sve Teme","quiz.basics":"Osnove","quiz.composition":"Kompozicija","quiz.lenses":"Objektivi","quiz.exposure":"Ekspozicija","quiz.genres":"\u017danrovi","quiz.ready":"Spremni za Kviz?","quiz.choose":"Izaberite kategoriju i testirajte svoje znanje!","quiz.info":"10 pitanja po rundi \u2022 Vi\u0161estruki izbor \u2022 Trenutni feedback","quiz.start":"Po\u010dni Kviz","quiz.next":"Slede\u0107e Pitanje","quiz.finished":"Kviz Zavr\u0161en!","quiz.playagain":"Igraj Ponovo","quiz.review":"Pregled Odgovora","quiz.score":"Poeni","quiz.resulttext":"Ta\u010dno ste odgovorili na {0} od {1} pitanja.","quiz.excellent":"Odli\u010dno! Vi ste foto profesionalac!","quiz.good":"Bravo! Solidno znanje!","quiz.ok":"Nije lo\u0161e! Nastavite da ve\u017ebate!","quiz.needwork":"Ima prostora za napredak! Ponovite osnove.",
+"footer.brand":"Va\u0161 besplatni fotografski alat za bolje slike.","footer.tools":"Alati","footer.calcs":"Kalkulatori","footer.comprules":"Pravila Kompozicije","footer.exptriangle":"Trougao Ekspozicije","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Napravljeno sa stra\u0161\u0107u za fotografiju.",
+"sensor.ff":"Pun Format (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 In\u010d (13.2x8.8mm)","sensor.small":"1/2.3 In\u010d (6.17x4.55mm)","sensor.ff_short":"Pun Format","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Pun Format (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 In\u010d (2.7x)","sensor.small_5_6":"1/2.3 In\u010d (5.6x)",
+"lenstype.superwide":"Super \u0160iroki Ugao","lenstype.wide":"\u0160iroki Ugao","lenstype.normal":"Normalni Objektiv","lenstype.tele":"Teleobjektiv","lenstype.supertele":"Super Teleobjektiv",
+"macro.true":"Pravi Makro (1:1+)","macro.half":"Polu Makro (~1:2)","macro.close":"Krupni Plan","macro.no":"Nije Makro",
+"rule.thirds.name":"Pravilo Tre\u0107ina","rule.thirds.desc":"Podelite sliku na 9 jednakih delova. Postavite klju\u010dne elemente na linije ili preseke.","rule.thirds.tip1":"Horizont na gornju ili donju liniju tre\u0107ine","rule.thirds.tip2":"O\u010di subjekta na gornje preseke","rule.thirds.tip3":"Nikad ne postavljajte glavni motiv ta\u010dno u centar",
+"rule.golden.name":"Zlatni Presek","rule.golden.desc":"Odnos 1:1,618 \u2013 savr\u0161ena proporcija prirode.","rule.golden.tip1":"Deli sliku u odnosu pribli\u017eno 62% / 38%","rule.golden.tip2":"Harmoni\u010dniji od pravila tre\u0107ina","rule.golden.tip3":"Prisutan svuda u prirodi (\u0161koljke, cve\u0107e)",
+"rule.leading.name":"Vode\u0107e Linije","rule.leading.desc":"Prirodne linije vode pogled posmatra\u010da ka glavnom motivu.","rule.leading.tip1":"Koristite puteve, reke, ograde kao linije","rule.leading.tip2":"Linije treba da vode u sliku","rule.leading.tip3":"Konvergentne linije stvaraju dubinu",
+"rule.symmetry.name":"Simetrija & Obrasci","rule.symmetry.desc":"Simetri\u010dne kompozicije zra\u010de mirom i savr\u0161enstvom.","rule.symmetry.tip1":"Odraz u vodi savr\u0161en za simetriju","rule.symmetry.tip2":"Arhitektura nudi prirodnu simetriju","rule.symmetry.tip3":"Svesno kr\u0161enje simetrije kao stilsko sredstvo",
+"rule.framing.name":"Prirodni Okvir","rule.framing.desc":"Koristite elemente scene da uokvirite motiv.","rule.framing.tip1":"Lukovi, prozori, grane kao okviri","rule.framing.tip2":"Usmerava pa\u017enju na glavni motiv","rule.framing.tip3":"Stvara dubinu i kontekst",
+"rule.negative.name":"Negativan Prostor","rule.negative.desc":"Prazan prostor oko motiva stvara efekat i dramatiku.","rule.negative.tip1":"Manje je vi\u0161e \u2013 koristite minimalizam","rule.negative.tip2":"Dajte motivu prostor da di\u0161e","rule.negative.tip3":"Posebno efikasno kod portreta",
+"rule.diagonal.name":"Dijagonale","rule.diagonal.desc":"Dijagonalne linije stvaraju dinamiku i napetost u slici.","rule.diagonal.tip1":"Od ugla do ugla za maksimalnu dinamiku","rule.diagonal.tip2":"Koristite nagnute perspektive","rule.diagonal.tip3":"Smer kretanja du\u017e dijagonale",
+"rule.color.name":"Teorija Boja","rule.color.desc":"Komplementarne boje i harmonije za sna\u017ean vizuelni efekat.","rule.color.tip1":"Komplementarne boje za kontrast (plava/narand\u017easta)","rule.color.tip2":"Analogne boje za harmoniju","rule.color.tip3":"Tople boje u prvom planu, hladne u pozadini",
+"motif.portrait.title":"Portretna Fotografija","motif.portrait.desc":"Savr\u0161eno prikazati ljude i lica.","motif.landscape.title":"Pejza\u017ena Fotografija","motif.landscape.desc":"Uhvatiti \u0161iroke pejza\u017ee i prirodne scene.","motif.street.title":"Uli\u010dna Fotografija","motif.street.desc":"Autenti\u010dno dokumentovati \u017eivot na ulici.","motif.macro.title":"Makro Fotografija","motif.macro.desc":"Male stvari prikazati veliko.","motif.night.title":"No\u0107na Fotografija","motif.night.desc":"Zvezde, gradska svetla i no\u0107ne scene.","motif.sport.title":"Sportska Fotografija","motif.sport.desc":"Zamrznuti brze pokrete i akciju.","motif.architecture.title":"Arhitektonska Fotografija","motif.architecture.desc":"Zgrade i strukture u savr\u0161enstvu.","motif.wildlife.title":"Fotografija Divljine","motif.wildlife.desc":"\u017divotinje u prirodnom stani\u0161tu.",
+"motif.setting.lens":"Objektiv","motif.setting.aperture":"Blenda","motif.setting.iso":"ISO","motif.setting.shutter":"Zatva\u010d",
+"nav.simtools":"Simulacija","sim.tag":"Simulacija","sim.title":"Foto Simulacije","sim.desc":"Simulirajte razli\u010dite foto efekte u realnom vremenu.",
+"sim.bokeh":"Bokeh","sim.longexp":"Duga Ekspozicija","sim.wb":"Balans Belog","sim.noise":"ISO \u0160um","sim.perspective":"Perspektiva","sim.histogram":"Histogram",
+"sim.bokeh.title":"Bokeh Simulator","sim.bokeh.info":"Pogledajte kako se bokeh menja sa razli\u010ditim blendama i \u017ei\u017enim daljinama.","sim.bokeh.blades":"Lamele Blende","sim.bokeh.intensity":"Intenzitet Bokeh-a",
+"sim.longexp.title":"Simulator Duge Ekspozicije","sim.longexp.info":"Pogledajte efekat razli\u010ditih vremena ekspozicije na pokret.","sim.longexp.speed":"Brzina Pokreta","sim.longexp.time":"Vreme Ekspozicije (s)",
+"sim.wb.title":"Simulator Balansa Belog","sim.wb.info":"Pogledajte kako temperatura boje uti\u010de na va\u0161u sliku.","sim.wb.kelvin":"Temperatura (K)","sim.wb.tint":"Nijansa",
+"sim.noise.title":"Simulator ISO \u0160uma","sim.noise.info":"Pogledajte kako digitalni \u0161um raste sa vi\u0161im ISO vrednostima.","sim.noise.level":"Nivo \u0160uma",
+"sim.perspective.title":"Simulator Perspektive","sim.perspective.info":"Pogledajte kako \u017ei\u017ena daljina uti\u010de na perspektivu.","sim.perspective.type":"Tip Distorzije",
+"sim.histogram.title":"Simulator Histograma","sim.histogram.info":"Pogledajte histogram na osnovu pode\u0161avanja ekspozicije."
+},
+
+/* ===== SHQIP (Albanian) ===== */
+sq: {
+"nav.lens":"Kalkulatori","nav.composition":"Kompozicioni","nav.motif":"Njohja e Motivit","nav.exposure":"Ekspozimi","nav.quiz":"Kuiz",
+"hero.welcome":"Mir\u00eb se vini n\u00eb","hero.desc":"Paketa juaj e fundit p\u00ebr fotografi. Llogaritjet e thjerrrave, rregullat e kompozicionit, njohja e motivit dhe kuize interaktive \u2014 t\u00eb gjitha n\u00eb nj\u00eb vend.","hero.calculators":"Kalkulatori","hero.rules":"Rregulla","hero.questions":"Pyetje Kuizi","hero.cta":"Fillo Tani",
+"lens.tag":"Mjete","lens.title":"Kalkulatori i Thjerrrave","lens.desc":"Llogaritni thell\u00ebsin\u00eb e fushes, k\u00ebndin e pamjes, faktorin e prerjes dhe m\u00eb shum\u00eb.","lens.tab.dof":"Thell\u00ebsia e Fush\u00ebs","lens.tab.fov":"K\u00ebndi i Pamjes","lens.tab.crop":"Faktori i Prerjes","lens.tab.hyper":"Distanca Hiperfokale","lens.tab.flash":"Rrezja e Blicit","lens.tab.mag":"Zmadhimi",
+"calc.focal":"Gjat\u00ebsia Fokale (mm)","calc.aperture":"Hap\u00ebsira (f/)","calc.sensor":"Madh\u00ebsia e Sensorit","calc.calculate":"Llogarit","calc.results":"Rezultatet",
+"dof.title":"Llogarit Thell\u00ebsin\u00eb e Fush\u00ebs","dof.info":"Thell\u00ebsia e fush\u00ebs p\u00ebrshkruan zon\u00ebn q\u00eb duket e mpreft\u00eb n\u00eb imazh.","dof.distance":"Distanca deri te Motivi (m)","dof.total":"Thell\u00ebsia e Fush\u00ebs","dof.near":"Pika e Af\u00ebrt","dof.far":"Pika e Larg\u00ebt","dof.coc":"Rrethi i Konfuzionit",
+"fov.title":"Llogarit K\u00ebndin e Pamjes","fov.info":"K\u00ebndi i pamjes p\u00ebrcakton sa sken\u00eb kap kamera.","fov.horizontal":"K\u00ebndi Horizontal","fov.vertical":"K\u00ebndi Vertikal","fov.diagonal":"K\u00ebndi Diagonal","fov.lenstype":"Tipi i Thjerr\u00ebs",
+"crop.title":"Llogarit Faktorin e Prerjes","crop.info":"Faktori i prerjes tregon ekuivalentin n\u00eb krahasim me formatin e plot\u00eb.","crop.lensfocal":"Gjat\u00ebsia Fokale e Thjerr\u00ebs (mm)","crop.lensaperture":"Hap\u00ebsira e Thjerr\u00ebs (f/)","crop.camerasensor":"Sensori i Kamer\u00ebs","crop.equivfocal":"Gjat\u00ebsia Fokale Ekuivalente","crop.equivaperture":"Hap\u00ebsira Ekuivalente","crop.factor":"Faktori i Prerjes","crop.fullframe":"Formati i Plot\u00eb",
+"hyper.title":"Distanca Hiperfokale","hyper.info":"Distanca nga e cila \u00e7do gj\u00eb \u00ebsht\u00eb e mpreft\u00eb deri n\u00eb pafund\u00ebsi.","hyper.distance":"Distanca Hiperfokale","hyper.near":"Pika e Af\u00ebrt (fokus n\u00eb H)","hyper.tiplabel":"K\u00ebshill\u00eb","hyper.tip":"Fokusoni n\u00eb distanc\u00ebn hiperfokale p\u00ebr mpreftimin maksimal.",
+"flash.title":"Rrezja e Blicit","flash.info":"Llogaritni rrezen maksimale t\u00eb blicit bazuar n\u00eb numrin udh\u00ebzues.","flash.gn":"Numri Udh\u00ebzues (GN)","flash.maxrange":"Rrezja Maksimale","flash.at100":"N\u00eb ISO 100",
+"mag.title":"Zmadhimi","mag.info":"Llogaritni raportin e zmadhimit p\u00ebr makrofotografi.","mag.mindist":"Distanca Min. e Fokusit (cm)","mag.sensorwidth":"Gjer\u00ebsia e Sensorit (mm)","mag.ratio":"Raporti i Zmadhimit","mag.field":"Fusha e Kapur (Gjer\u00ebsia)","mag.macro":"Aft\u00ebsia Makro",
+"comp.tag":"Kompozicioni","comp.title":"Rregullat e Fotografis\u00eb","comp.desc":"Z\u00ebt\u00ebroni rregullat m\u00eb t\u00eb r\u00ebd\u00ebsishme t\u00eb kompozicionit p\u00ebr foto mahnitese.","comp.demo":"Shfaq Demo",
+"motif.tag":"Njohja","motif.title":"Njohja e Motivit & Zhanret","motif.desc":"M\u00ebsoni zhanre t\u00eb ndryshme t\u00eb fotografis\u00eb dhe cilesimet e tyre optimale.","motif.all":"T\u00eb Gjitha","motif.portrait":"Portret","motif.landscape":"Peizazh","motif.street":"Rrug\u00eb","motif.macro":"Makro","motif.night":"Nat\u00eb","motif.sport":"Sport","motif.architecture":"Arkitektur\u00eb","motif.wildlife":"Kafsh\u00eb",
+"exp.tag":"Bazat","exp.title":"Trekend\u00ebshi i Ekspozimit","exp.desc":"Kuptoni nd\u00ebrveprimin midis hap\u00ebsir\u00ebs, shpejt\u00ebsis\u00eb s\u00eb shkrepjes dhe ISO.","exp.aperture":"Hap\u00ebsira","exp.shutter":"Shpejt\u00ebsia e Shkrepjes","exp.aperture.mid":"Hap\u00ebsir\u00eb mesatare \u2013 kompromis i mir\u00eb midis mpreftimit dhe drit\u00ebs.","exp.shutter.mid":"Shpejt\u00ebsi standarde \u2013 ngrijn shumic\u00ebn e l\u00ebvizjeve.","exp.iso.low":"ISO i ul\u00ebt \u2013 zhurm\u00eb minimale, cil\u00ebsia m\u00eb e mir\u00eb.","exp.correct":"Ekspozim i Sakt\u00eb","exp.under":"N\u00ebnekspozuar","exp.over":"Mbiekspozuar","exp.slightunder":"Leht\u00ebsisht n\u00ebnekspozuar","exp.slightover":"Leht\u00ebsisht mbiekspozuar",
+"quiz.tag":"Kontroll Dije","quiz.title":"Kuiz Fotografik","quiz.desc":"Testoni njohurit\u00eb tuaja me pyetje interaktive.","quiz.all":"T\u00eb Gjitha Temat","quiz.basics":"Bazat","quiz.composition":"Kompozicioni","quiz.lenses":"Thjerrrat","quiz.exposure":"Ekspozimi","quiz.genres":"Zhanret","quiz.ready":"Gati p\u00ebr Kuizin?","quiz.choose":"Zgjidhni nj\u00eb kategori dhe testoni njohurit\u00eb tuaja!","quiz.info":"10 pyetje p\u00ebr raund \u2022 Zgjedhje e shumefisht\u00eb \u2022 Feedback i menj\u00ehersh\u00ebm","quiz.start":"Fillo Kuizin","quiz.next":"Pyetja Tjet\u00ebr","quiz.finished":"Kuizi P\u00ebrfundoi!","quiz.playagain":"Luaj P\u00ebrs\u00ebri","quiz.review":"Shiko P\u00ebrgjigjet","quiz.score":"Pik\u00eb","quiz.resulttext":"Ju u p\u00ebrgjigj\u00ebt sakt\u00eb {0} nga {1} pyetje.","quiz.excellent":"Shk\u00eblqyesh\u00ebm! Jeni profesionist i fotografis\u00eb!","quiz.good":"Shum\u00eb mir\u00eb! Njohuri solide!","quiz.ok":"Jo keq! Vazhdoni t\u00eb praktikoni!","quiz.needwork":"Ka vend p\u00ebr p\u00ebrmir\u00ebsim! Rishikoni bazat.",
+"footer.brand":"Paketa juaj falas e fotografis\u00eb p\u00ebr imazhe m\u00eb t\u00eb mira.","footer.tools":"Mjete","footer.calcs":"Kalkulatori","footer.comprules":"Rregullat e Kompozicionit","footer.exptriangle":"Trekend\u00ebshi i Ekspozimit","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Krijuar me pasion p\u00ebr fotografin\u00eb.",
+"sensor.ff":"Formati i Plot\u00eb (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 In\u00e7 (13.2x8.8mm)","sensor.small":"1/2.3 In\u00e7 (6.17x4.55mm)","sensor.ff_short":"Formati i Plot\u00eb","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Formati i Plot\u00eb (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 In\u00e7 (2.7x)","sensor.small_5_6":"1/2.3 In\u00e7 (5.6x)",
+"lenstype.superwide":"Super K\u00ebnd i Gjer\u00eb","lenstype.wide":"K\u00ebnd i Gjer\u00eb","lenstype.normal":"Thjerr\u00eb Normale","lenstype.tele":"Teleobjektiv","lenstype.supertele":"Super Teleobjektiv",
+"macro.true":"Makro e V\u00ebrtet\u00eb (1:1+)","macro.half":"Gjys\u00ebm Makro (~1:2)","macro.close":"Plan i Af\u00ebrt","macro.no":"Jo Makro",
+"rule.thirds.name":"Rregulli i t\u00eb Tretave","rule.thirds.desc":"Ndani imazhin n\u00eb 9 pjes\u00eb t\u00eb barabarta. Vendosni elementet kryesore n\u00eb vijat ose kryq\u00ebzimet.","rule.thirds.tip1":"Vendosni horizontin n\u00eb vij\u00ebn e t\u00eb tret\u00ebs s\u00eb sip\u00ebrme ose t\u00eb posht\u00ebme","rule.thirds.tip2":"Syt\u00eb e subjektit n\u00eb kryq\u00ebzimet e sip\u00ebrme","rule.thirds.tip3":"Kurr\u00eb mos vendosni motivin kryesor n\u00eb qend\u00ebr t\u00eb sakt\u00eb",
+"rule.golden.name":"Prerja e Art\u00eb","rule.golden.desc":"Raporti 1:1.618 \u2013 proporcioni i p\u00ebrsosur i natyres.","rule.golden.tip1":"Ndan imazhin afersisht 62% me 38%","rule.golden.tip2":"M\u00eb harmonik se rregulli i t\u00eb tretave","rule.golden.tip3":"Gjendet kudo n\u00eb natyr\u00eb (guaska, lule)",
+"rule.leading.name":"Vijat Udh\u00ebzuese","rule.leading.desc":"Vijat natyrale udh\u00ebzojn\u00eb shikimin e v\u00ebzhguesit te motivi kryesor.","rule.leading.tip1":"P\u00ebrdorni rruge, lumenj, gardhe si vija","rule.leading.tip2":"Vijat duhet t\u00eb \u00e7ojn\u00eb brenda imazhit","rule.leading.tip3":"Vijat konvergjente krijojn\u00eb thell\u00ebsi",
+"rule.symmetry.name":"Simetria & Motivet","rule.symmetry.desc":"Kompozicionet simetrike rrezatojn\u00eb qet\u00ebsi dhe perfekcion.","rule.symmetry.tip1":"Pasqyrimet n\u00eb uj\u00eb perfekte p\u00ebr simetri","rule.symmetry.tip2":"Arkitektura ofron simetri natyrale","rule.symmetry.tip3":"Thyerja e qellimshme e simetrise si element stili",
+"rule.framing.name":"Korniza Natyrale","rule.framing.desc":"P\u00ebrdorni elemente t\u00eb sken\u00ebs p\u00ebr t\u00eb kornizuar motivin.","rule.framing.tip1":"Harqe, dritare, deg\u00eb si korniza","rule.framing.tip2":"Drejton v\u00ebmendjen te motivi kryesor","rule.framing.tip3":"Krijon thell\u00ebsi dhe kontekst",
+"rule.negative.name":"Hap\u00ebsira Negative","rule.negative.desc":"Hap\u00ebsira bosh rreth motivit krijon ndikim dhe dramatizm.","rule.negative.tip1":"M\u00eb pak \u00ebsht\u00eb m\u00eb shum\u00eb \u2013 p\u00ebrdorni minimalizmin","rule.negative.tip2":"Jepini motivit hap\u00ebsir\u00eb p\u00ebr t\u00eb marr\u00eb frym\u00eb","rule.negative.tip3":"Ve\u00e7an\u00ebrisht efektive n\u00eb portrete",
+"rule.diagonal.name":"Diagonalet","rule.diagonal.desc":"Vijat diagonale krijojn\u00eb dinamizm\u00eb dhe tension n\u00eb imazh.","rule.diagonal.tip1":"Nga k\u00ebndi n\u00eb k\u00ebnd p\u00ebr dinamizm\u00eb maksimale","rule.diagonal.tip2":"P\u00ebrdorni perspektiva t\u00eb pjerrta","rule.diagonal.tip3":"Drejtimi i l\u00ebvizjes p\u00ebrgjat\u00eb diagonales",
+"rule.color.name":"Teoria e Ngjyrave","rule.color.desc":"Ngjyrat plot\u00ebsuese dhe harmonit\u00eb p\u00ebr ndikim t\u00eb fort\u00eb vizual.","rule.color.tip1":"Ngjyra plot\u00ebsuese p\u00ebr kontrast (blu/portokalli)","rule.color.tip2":"Ngjyra analoge p\u00ebr harmoni","rule.color.tip3":"Ngjyra t\u00eb ngrohta p\u00ebrpara, t\u00eb ftohta n\u00eb sfond",
+"motif.portrait.title":"Fotografia e Portretit","motif.portrait.desc":"Paraqitja perfekte e njer\u00ebzve dhe fytyrave.","motif.landscape.title":"Fotografia e Peizazhit","motif.landscape.desc":"Kapja e peizazheve t\u00eb gjera dhe skenave natyrale.","motif.street.title":"Fotografia e Rrug\u00ebs","motif.street.desc":"Dokumentimi autentik i jet\u00ebs n\u00eb rrug\u00eb.","motif.macro.title":"Makrofotografia","motif.macro.desc":"Paraqitja e gjerave t\u00eb vogla n\u00eb madh\u00ebsi.","motif.night.title":"Fotografia e Nat\u00ebs","motif.night.desc":"Yjet, dritat e qytetit dhe skenat e nat\u00ebs.","motif.sport.title":"Fotografia Sportive","motif.sport.desc":"Ngrirja e l\u00ebvizjeve t\u00eb shpejta dhe aksionit.","motif.architecture.title":"Fotografia e Arkitektur\u00ebs","motif.architecture.desc":"Nd\u00ebrtesat dhe strukturat n\u00eb perfekcion.","motif.wildlife.title":"Fotografia e Kafsh\u00ebve","motif.wildlife.desc":"Kafsh\u00ebt n\u00eb habitatin e tyre natyral.",
+"motif.setting.lens":"Thjerrza","motif.setting.aperture":"Hap\u00ebsira","motif.setting.iso":"ISO","motif.setting.shutter":"Shkrepja",
+"nav.simtools":"Simulimi","sim.tag":"Simulimi","sim.title":"Foto-Simulime","sim.desc":"Simuloni efekte t\u00eb ndryshme fotografike n\u00eb koh\u00eb reale.",
+"sim.bokeh":"Bokeh","sim.longexp":"Ekspozim i Gjat\u00eb","sim.wb":"Balanca e Bardh\u00ebs","sim.noise":"Zhurma ISO","sim.perspective":"Perspektiva","sim.histogram":"Histogrami",
+"sim.bokeh.title":"Simulatori i Bokeh-ut","sim.bokeh.info":"Shikoni si ndryshon bokeh-u me hap\u00ebsir\u00eb dhe gjat\u00ebsi fokale t\u00eb ndryshme.","sim.bokeh.blades":"Fleta t\u00eb Hap\u00ebsir\u00ebs","sim.bokeh.intensity":"Intensiteti i Bokeh-ut",
+"sim.longexp.title":"Simulatori i Ekspozimit t\u00eb Gjat\u00eb","sim.longexp.info":"Shikoni efektin e koheve t\u00eb ndryshme t\u00eb ekspozimit n\u00eb l\u00ebvizje.","sim.longexp.speed":"Shpejt\u00ebsia e L\u00ebvizjes","sim.longexp.time":"Koha e Ekspozimit (s)",
+"sim.wb.title":"Simulatori i Balanc\u00ebs s\u00eb Bardh\u00ebs","sim.wb.info":"Shikoni si ndikon temperatura e ngjyr\u00ebs n\u00eb imazhin tuaj.","sim.wb.kelvin":"Temperatura (K)","sim.wb.tint":"Nuanc\u00eb",
+"sim.noise.title":"Simulatori i Zhurm\u00ebs ISO","sim.noise.info":"Shikoni si rritet zhurma dixhitale me vlera m\u00eb t\u00eb larta ISO.","sim.noise.level":"Niveli i Zhurm\u00ebs",
+"sim.perspective.title":"Simulatori i Perspektiv\u00ebs","sim.perspective.info":"Shikoni si ndikon gjat\u00ebsia fokale n\u00eb perspektiv\u00eb.","sim.perspective.type":"Tipi i Deformimit",
+"sim.histogram.title":"Simulatori i Histogramit","sim.histogram.info":"Shikoni histogramin bazuar n\u00eb cil\u00ebsimet e ekspozimit."
+},
+
+/* ===== T\u00dcRK\u00c7E ===== */
+tr: {
+"nav.lens":"Lens Hesaplay\u0131c\u0131","nav.composition":"Kompozisyon","nav.motif":"Konu Tan\u0131ma","nav.exposure":"Pozlama","nav.quiz":"Quiz",
+"hero.welcome":"Ho\u015f Geldiniz","hero.desc":"En kapsaml\u0131 foto\u011fraf\u00e7\u0131l\u0131k ara\u00e7 setiniz. Lens hesaplamalar\u0131, kompozisyon kurallar\u0131, konu tan\u0131ma ve interaktif quizler \u2014 hepsi bir arada.","hero.calculators":"Hesaplay\u0131c\u0131lar","hero.rules":"Kurallar","hero.questions":"Quiz Sorular\u0131","hero.cta":"Ba\u015fla",
+"lens.tag":"Ara\u00e7lar","lens.title":"Lens Hesaplay\u0131c\u0131","lens.desc":"Alan derinli\u011fi, g\u00f6r\u00fc\u015f a\u00e7\u0131s\u0131, crop fakt\u00f6r\u00fc ve daha fazlas\u0131n\u0131 hesaplay\u0131n.","lens.tab.dof":"Alan Derinli\u011fi (DOF)","lens.tab.fov":"G\u00f6r\u00fc\u015f A\u00e7\u0131s\u0131 (FOV)","lens.tab.crop":"Crop Fakt\u00f6r\u00fc","lens.tab.hyper":"Hiperfokal Mesafe","lens.tab.flash":"Fla\u015f Menzili","lens.tab.mag":"B\u00fcy\u00fctme",
+"calc.focal":"Odak Uzakl\u0131\u011f\u0131 (mm)","calc.aperture":"Diyafram (f/)","calc.sensor":"Sens\u00f6r Boyutu","calc.calculate":"Hesapla","calc.results":"Sonu\u00e7lar",
+"dof.title":"Alan Derinli\u011fi Hesapla","dof.info":"Alan derinli\u011fi (DOF), g\u00f6r\u00fcnt\u00fcde net g\u00f6r\u00fcnen alan\u0131 tan\u0131mlar.","dof.distance":"Konuya Mesafe (m)","dof.total":"Alan Derinli\u011fi","dof.near":"Yak\u0131n Nokta","dof.far":"Uzak Nokta","dof.coc":"Bulan\u0131kl\u0131k \u00c7emberi",
+"fov.title":"G\u00f6r\u00fc\u015f A\u00e7\u0131s\u0131 Hesapla","fov.info":"G\u00f6r\u00fc\u015f a\u00e7\u0131s\u0131 kameran\u0131n ne kadar sahne yakalad\u0131\u011f\u0131n\u0131 belirler.","fov.horizontal":"Yatay G\u00f6r\u00fc\u015f A\u00e7\u0131s\u0131","fov.vertical":"Dikey G\u00f6r\u00fc\u015f A\u00e7\u0131s\u0131","fov.diagonal":"\u00c7apraz G\u00f6r\u00fc\u015f A\u00e7\u0131s\u0131","fov.lenstype":"Lens T\u00fcr\u00fc",
+"crop.title":"Crop Fakt\u00f6r\u00fc Hesapla","crop.info":"Crop fakt\u00f6r\u00fc, tam kareye k\u0131yasla e\u015fde\u011fer g\u00f6r\u00fcn\u00fcm\u00fc g\u00f6sterir.","crop.lensfocal":"Lens Odak Uzakl\u0131\u011f\u0131 (mm)","crop.lensaperture":"Lens Diyafram\u0131 (f/)","crop.camerasensor":"Kamera Sens\u00f6r\u00fc","crop.equivfocal":"E\u015fde\u011fer Odak Uzakl\u0131\u011f\u0131 (FF)","crop.equivaperture":"E\u015fde\u011fer Diyafram (FF)","crop.factor":"Crop Fakt\u00f6r\u00fc","crop.fullframe":"Tam Kare",
+"hyper.title":"Hiperfokal Mesafe","hyper.info":"Her \u015feyin sonsuza kadar net g\u00f6r\u00fcnd\u00fc\u011f\u00fc mesafe.","hyper.distance":"Hiperfokal Mesafe","hyper.near":"Yak\u0131n Nokta (H'ye odaklanma)","hyper.tiplabel":"\u0130pucu","hyper.tip":"Maksimum netlik i\u00e7in hiperfokal mesafeye odaklan\u0131n.",
+"flash.title":"Fla\u015f Menzili","flash.info":"K\u0131lavuz say\u0131s\u0131na g\u00f6re maksimum fla\u015f menzilini hesaplay\u0131n.","flash.gn":"K\u0131lavuz Say\u0131s\u0131 (GN)","flash.maxrange":"Maksimum Menzil","flash.at100":"ISO 100'de",
+"mag.title":"B\u00fcy\u00fctme","mag.info":"Makro foto\u011fraf\u00e7\u0131l\u0131k i\u00e7in b\u00fcy\u00fctme oran\u0131n\u0131 hesaplay\u0131n.","mag.mindist":"Min. Odaklama Mesafesi (cm)","mag.sensorwidth":"Sens\u00f6r Geni\u015fli\u011fi (mm)","mag.ratio":"B\u00fcy\u00fctme Oran\u0131","mag.field":"Yakalanan Alan (Geni\u015flik)","mag.macro":"Makro Yetene\u011fi",
+"comp.tag":"Kompozisyon","comp.title":"Foto\u011fraf Kurallar\u0131","comp.desc":"Etkileyici foto\u011fraflar i\u00e7in en \u00f6nemli kompozisyon kurallar\u0131n\u0131 \u00f6\u011frenin.","comp.demo":"Demo G\u00f6ster",
+"motif.tag":"Konu Tan\u0131ma","motif.title":"Konu Tan\u0131ma & T\u00fcrler","motif.desc":"Farkl\u0131 foto\u011fraf t\u00fcrlerini ve optimal ayarlar\u0131n\u0131 \u00f6\u011frenin.","motif.all":"T\u00fcm\u00fc","motif.portrait":"Portre","motif.landscape":"Manzara","motif.street":"Sokak","motif.macro":"Makro","motif.night":"Gece","motif.sport":"Spor","motif.architecture":"Mimari","motif.wildlife":"Do\u011fa",
+"exp.tag":"Temel Bilgiler","exp.title":"Pozlama \u00dc\u00e7geni","exp.desc":"Diyafram, enstantane ve ISO aras\u0131ndaki etkile\u015fimi anlay\u0131n.","exp.aperture":"Diyafram","exp.shutter":"Enstantane","exp.aperture.mid":"Orta diyafram \u2013 netlik ve \u0131\u015f\u0131k aras\u0131nda iyi uzla\u015fma.","exp.shutter.mid":"Standart enstantane \u2013 \u00e7o\u011fu hareketi dondurur.","exp.iso.low":"D\u00fc\u015f\u00fck ISO \u2013 minimum g\u00fcr\u00fclt\u00fc, en iyi kalite.","exp.correct":"Do\u011fru Pozlama","exp.under":"Az Pozlanm\u0131\u015f","exp.over":"Fazla Pozlanm\u0131\u015f","exp.slightunder":"Hafif az pozlanm\u0131\u015f","exp.slightover":"Hafif fazla pozlanm\u0131\u015f",
+"quiz.tag":"Bilgi Testi","quiz.title":"Foto\u011fraf Quiz'i","quiz.desc":"T\u00fcm konularda interaktif sorularla bilginizi test edin.","quiz.all":"T\u00fcm Konular","quiz.basics":"Temel","quiz.composition":"Kompozisyon","quiz.lenses":"Lensler","quiz.exposure":"Pozlama","quiz.genres":"T\u00fcrler","quiz.ready":"Quiz'e Haz\u0131r m\u0131s\u0131n\u0131z?","quiz.choose":"Bir kategori se\u00e7in ve bilginizi test edin!","quiz.info":"Tur ba\u015f\u0131na 10 soru \u2022 \u00c7oktan se\u00e7meli \u2022 Anl\u0131k geri bildirim","quiz.start":"Quiz'e Ba\u015fla","quiz.next":"Sonraki Soru","quiz.finished":"Quiz Tamamland\u0131!","quiz.playagain":"Tekrar Oyna","quiz.review":"Cevaplar\u0131 G\u00f6r","quiz.score":"Puan","quiz.resulttext":"{1} sorudan {0} tanesini do\u011fru yan\u0131tlad\u0131n\u0131z.","quiz.excellent":"M\u00fckemmel! Foto\u011fraf\u00e7\u0131l\u0131k ustas\u0131s\u0131n\u0131z!","quiz.good":"Aferin! Sa\u011flam bilgi!","quiz.ok":"Fena de\u011fil! Pratik yapmaya devam edin!","quiz.needwork":"Geli\u015ftirmeye yer var! Temelleri tekrarlay\u0131n.",
+"footer.brand":"\u00dccretsiz foto\u011fraf\u00e7\u0131l\u0131k ara\u00e7 setiniz.","footer.tools":"Ara\u00e7lar","footer.calcs":"Hesaplay\u0131c\u0131lar","footer.comprules":"Kompozisyon Kurallar\u0131","footer.exptriangle":"Pozlama \u00dc\u00e7geni","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Foto\u011fraf\u00e7\u0131l\u0131k tutkusuyla yap\u0131ld\u0131.",
+"sensor.ff":"Tam Kare (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 In\u00e7 (13.2x8.8mm)","sensor.small":"1/2.3 In\u00e7 (6.17x4.55mm)","sensor.ff_short":"Tam Kare","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Tam Kare (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 In\u00e7 (2.7x)","sensor.small_5_6":"1/2.3 In\u00e7 (5.6x)",
+"lenstype.superwide":"S\u00fcper Geni\u015f A\u00e7\u0131","lenstype.wide":"Geni\u015f A\u00e7\u0131","lenstype.normal":"Normal Lens","lenstype.tele":"Telefoto","lenstype.supertele":"S\u00fcper Telefoto",
+"macro.true":"Ger\u00e7ek Makro (1:1+)","macro.half":"Yar\u0131m Makro (~1:2)","macro.close":"Yak\u0131n \u00c7ekim","macro.no":"Makro De\u011fil",
+"rule.thirds.name":"\u00dc\u00e7ler Kural\u0131","rule.thirds.desc":"G\u00f6r\u00fcnt\u00fcy\u00fc 9 e\u015fit par\u00e7aya b\u00f6l\u00fcn. Kilit \u00f6\u011feleri \u00e7izgilere veya kesi\u015fim noktalar\u0131na yerle\u015ftirin.","rule.thirds.tip1":"Ufku \u00fcst veya alt \u00fc\u00e7te bir \u00e7izgisine yerle\u015ftirin","rule.thirds.tip2":"Konunun g\u00f6zlerini \u00fcst kesi\u015fim noktalar\u0131na yerle\u015ftirin","rule.thirds.tip3":"Ana konuyu asla tam ortaya koymay\u0131n",
+"rule.golden.name":"Alt\u0131n Oran","rule.golden.desc":"1:1.618 oran\u0131 \u2013 do\u011fan\u0131n m\u00fckemmel oran\u0131.","rule.golden.tip1":"G\u00f6r\u00fcnt\u00fcy\u00fc yakla\u015f\u0131k %62 / %38 oran\u0131nda b\u00f6ler","rule.golden.tip2":"\u00dc\u00e7ler kural\u0131ndan daha uyumlu","rule.golden.tip3":"Do\u011fada her yerde bulunur (kabuklar, \u00e7i\u00e7ekler)",
+"rule.leading.name":"Y\u00f6nlendirici \u00c7izgiler","rule.leading.desc":"Do\u011fal \u00e7izgiler izleyicinin g\u00f6z\u00fcn\u00fc ana konuya y\u00f6nlendirir.","rule.leading.tip1":"Yollar\u0131, nehirleri, \u00e7itleri \u00e7izgi olarak kullan\u0131n","rule.leading.tip2":"\u00c7izgiler g\u00f6r\u00fcnt\u00fcn\u00fcn i\u00e7ine y\u00f6nlendirmeli","rule.leading.tip3":"Birle\u015fen \u00e7izgiler derinlik yarat\u0131r",
+"rule.symmetry.name":"Simetri & Desenler","rule.symmetry.desc":"Simetrik kompozisyonlar huzur ve m\u00fckemmellik yayar.","rule.symmetry.tip1":"Sudaki yans\u0131malar simetri i\u00e7in m\u00fckemmel","rule.symmetry.tip2":"Mimari do\u011fal simetri sunar","rule.symmetry.tip3":"Simetriyi bilin\u00e7li k\u0131rmak stil unsuru olarak",
+"rule.framing.name":"Do\u011fal \u00c7er\u00e7eveleme","rule.framing.desc":"Sahne unsurlar\u0131n\u0131 konuyu \u00e7er\u00e7evelemek i\u00e7in kullan\u0131n.","rule.framing.tip1":"Kemerler, pencereler, dallar \u00e7er\u00e7eve olarak","rule.framing.tip2":"Dikkati ana konuya y\u00f6nlendirir","rule.framing.tip3":"Derinlik ve ba\u011flam yarat\u0131r",
+"rule.negative.name":"Negatif Alan","rule.negative.desc":"Konunun etraf\u0131ndaki bo\u015f alan etki ve dramatizm yarat\u0131r.","rule.negative.tip1":"Az \u00e7oktur \u2013 minimalizmi kullan\u0131n","rule.negative.tip2":"Konuya nefes alacak alan verin","rule.negative.tip3":"\u00d6zellikle portrelerde etkili",
+"rule.diagonal.name":"Diyagonaller","rule.diagonal.desc":"Diyagonal \u00e7izgiler g\u00f6r\u00fcnt\u00fcde dinamizm ve gerilim yarat\u0131r.","rule.diagonal.tip1":"K\u00f6\u015feden k\u00f6\u015feye maksimum dinamizm","rule.diagonal.tip2":"E\u011fik perspektifler kullan\u0131n","rule.diagonal.tip3":"Hareket y\u00f6n\u00fc diyagonal boyunca",
+"rule.color.name":"Renk Teorisi","rule.color.desc":"Tamamlay\u0131c\u0131 renkler ve renk uyumlar\u0131 g\u00fc\u00e7l\u00fc g\u00f6rsel etki i\u00e7in.","rule.color.tip1":"Tamamlay\u0131c\u0131 renkler kontrast i\u00e7in (mavi/turuncu)","rule.color.tip2":"Benzer renkler uyum i\u00e7in","rule.color.tip3":"S\u0131cak renkler \u00f6n planda, so\u011fuk renkler arka planda",
+"motif.portrait.title":"Portre Foto\u011fraf\u00e7\u0131l\u0131\u011f\u0131","motif.portrait.desc":"\u0130nsanlar\u0131 ve y\u00fczleri m\u00fckemmel yakala.","motif.landscape.title":"Manzara Foto\u011fraf\u00e7\u0131l\u0131\u011f\u0131","motif.landscape.desc":"Geni\u015f manzaralar\u0131 ve do\u011fa sahnelerini yakala.","motif.street.title":"Sokak Foto\u011fraf\u00e7\u0131l\u0131\u011f\u0131","motif.street.desc":"Sokak ya\u015fam\u0131n\u0131 otantik olarak belgele.","motif.macro.title":"Makro Foto\u011fraf\u00e7\u0131l\u0131k","motif.macro.desc":"K\u00fc\u00e7\u00fck \u015feyleri b\u00fcy\u00fck g\u00f6ster.","motif.night.title":"Gece Foto\u011fraf\u00e7\u0131l\u0131\u011f\u0131","motif.night.desc":"Y\u0131ld\u0131zlar, \u015fehir \u0131\u015f\u0131klar\u0131 ve gece sahneleri.","motif.sport.title":"Spor Foto\u011fraf\u00e7\u0131l\u0131\u011f\u0131","motif.sport.desc":"H\u0131zl\u0131 hareketleri ve aksiyonu dondur.","motif.architecture.title":"Mimari Foto\u011fraf\u00e7\u0131l\u0131k","motif.architecture.desc":"Binalar ve yap\u0131lar m\u00fckemmellikte.","motif.wildlife.title":"Do\u011fa Foto\u011fraf\u00e7\u0131l\u0131\u011f\u0131","motif.wildlife.desc":"Hayvanlar do\u011fal ya\u015fam alanlar\u0131nda.",
+"motif.setting.lens":"Lens","motif.setting.aperture":"Diyafram","motif.setting.iso":"ISO","motif.setting.shutter":"Enstantane",
+"nav.simtools":"Sim\u00fclasyon","sim.tag":"Sim\u00fclasyon","sim.title":"Foto Sim\u00fclasyonlar\u0131","sim.desc":"Farkl\u0131 foto\u011fraf efektlerini ger\u00e7ek zamanl\u0131 sim\u00fcle edin.",
+"sim.bokeh":"Bokeh","sim.longexp":"Uzun Pozlama","sim.wb":"Beyaz Dengesi","sim.noise":"ISO G\u00fcr\u00fclt\u00fc","sim.perspective":"Perspektif","sim.histogram":"Histogram",
+"sim.bokeh.title":"Bokeh Sim\u00fclat\u00f6r\u00fc","sim.bokeh.info":"Farkl\u0131 diyafram ve odak uzakl\u0131klar\u0131yla bokeh'in nas\u0131l de\u011fi\u015fti\u011fini g\u00f6r\u00fcn.","sim.bokeh.blades":"Diyafram Kanatlar\u0131","sim.bokeh.intensity":"Bokeh Yo\u011funlu\u011fu",
+"sim.longexp.title":"Uzun Pozlama Sim\u00fclat\u00f6r\u00fc","sim.longexp.info":"Farkl\u0131 pozlama s\u00fcrelerinin hareketli nesneler \u00fczerindeki etkisini g\u00f6r\u00fcn.","sim.longexp.speed":"Hareket H\u0131z\u0131","sim.longexp.time":"Pozlama S\u00fcresi (s)",
+"sim.wb.title":"Beyaz Dengesi Sim\u00fclat\u00f6r\u00fc","sim.wb.info":"Renk s\u0131cakl\u0131\u011f\u0131n\u0131n g\u00f6r\u00fcnt\u00fcn\u00fcz\u00fc nas\u0131l etkiledi\u011fini g\u00f6r\u00fcn.","sim.wb.kelvin":"S\u0131cakl\u0131k (K)","sim.wb.tint":"Ton",
+"sim.noise.title":"ISO G\u00fcr\u00fclt\u00fc Sim\u00fclat\u00f6r\u00fc","sim.noise.info":"Y\u00fcksek ISO de\u011ferlerinde dijital g\u00fcr\u00fclt\u00fcn\u00fcn nas\u0131l artt\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcn.","sim.noise.level":"G\u00fcr\u00fclt\u00fc Seviyesi",
+"sim.perspective.title":"Perspektif Sim\u00fclat\u00f6r\u00fc","sim.perspective.info":"Odak uzakl\u0131\u011f\u0131n\u0131n perspektifi nas\u0131l etkiledi\u011fini g\u00f6r\u00fcn.","sim.perspective.type":"Deformasyon Tipi",
+"sim.histogram.title":"Histogram Sim\u00fclat\u00f6r\u00fc","sim.histogram.info":"Pozlama ayarlar\u0131na g\u00f6re histograma bak\u0131n."
+},
+
+/* ===== SVENSKA ===== */
+sv: {
+"nav.lens":"Linskalkylator","nav.composition":"Komposition","nav.motif":"Motivigenk\u00e4nning","nav.exposure":"Exponering","nav.quiz":"Quiz",
+"hero.welcome":"V\u00e4lkommen till","hero.desc":"Din ultimata fotoverktygsl\u00e5da. Linber\u00e4kningar, kompositionsregler, motivigenk\u00e4nning och interaktiva quiz \u2014 allt p\u00e5 ett st\u00e4lle.","hero.calculators":"Kalkylatorer","hero.rules":"Regler","hero.questions":"Quizfr\u00e5gor","hero.cta":"Kom ig\u00e5ng",
+"lens.tag":"Verktyg","lens.title":"Linskalkylator","lens.desc":"Ber\u00e4kna sk\u00e4rpedjup, bildvinkel, cropfaktor och mer.","lens.tab.dof":"Sk\u00e4rpedjup (DOF)","lens.tab.fov":"Bildvinkel (FOV)","lens.tab.crop":"Cropfaktor","lens.tab.hyper":"Hyperfokal Distans","lens.tab.flash":"Blixtens R\u00e4ckvidd","lens.tab.mag":"F\u00f6rstoring",
+"calc.focal":"Br\u00e4nnvidd (mm)","calc.aperture":"Bl\u00e4ndare (f/)","calc.sensor":"Sensorstorlek","calc.calculate":"Ber\u00e4kna","calc.results":"Resultat",
+"dof.title":"Ber\u00e4kna Sk\u00e4rpedjup","dof.info":"Sk\u00e4rpedjupet beskriver det omr\u00e5de som framst\u00e5r skarpt i bilden.","dof.distance":"Avst\u00e5nd till Motivet (m)","dof.total":"Sk\u00e4rpedjup","dof.near":"N\u00e4rpunkt","dof.far":"Fj\u00e4rrpunkt","dof.coc":"F\u00f6rvirringscirkel",
+"fov.title":"Ber\u00e4kna Bildvinkel","fov.info":"Bildvinkeln avg\u00f6r hur mycket av scenen kameran f\u00e5ngar.","fov.horizontal":"Horisontell Bildvinkel","fov.vertical":"Vertikal Bildvinkel","fov.diagonal":"Diagonal Bildvinkel","fov.lenstype":"Linstyp",
+"crop.title":"Ber\u00e4kna Cropfaktor","crop.info":"Cropfaktorn visar motsvarande utsnitt j\u00e4mf\u00f6rt med fullformat.","crop.lensfocal":"Objektivets Br\u00e4nnvidd (mm)","crop.lensaperture":"Objektivets Bl\u00e4ndare (f/)","crop.camerasensor":"Kamerasensor","crop.equivfocal":"Motsvarande Br\u00e4nnvidd (FF)","crop.equivaperture":"Motsvarande Bl\u00e4ndare (FF)","crop.factor":"Cropfaktor","crop.fullframe":"Fullformat",
+"hyper.title":"Hyperfokal Distans","hyper.info":"Avst\u00e5ndet d\u00e4r allt fr\u00e5n halva avst\u00e5ndet till o\u00e4ndligheten \u00e4r skarpt.","hyper.distance":"Hyperfokal Distans","hyper.near":"N\u00e4rpunkt (fokus p\u00e5 H)","hyper.tiplabel":"Tips","hyper.tip":"Fokusera p\u00e5 hyperfokala distansen f\u00f6r maximal sk\u00e4rpa.",
+"flash.title":"Blixtens R\u00e4ckvidd","flash.info":"Ber\u00e4kna maximal blixtr\u00e4ckvidd baserat p\u00e5 ledsiffra.","flash.gn":"Ledsiffra (GN)","flash.maxrange":"Maximal R\u00e4ckvidd","flash.at100":"Vid ISO 100",
+"mag.title":"F\u00f6rstoring","mag.info":"Ber\u00e4kna f\u00f6rstoringsf\u00f6rh\u00e5llandet f\u00f6r makrofotografi.","mag.mindist":"Min. Fokusavst\u00e5nd (cm)","mag.sensorwidth":"Sensorbredd (mm)","mag.ratio":"F\u00f6rstoringsf\u00f6rh\u00e5llande","mag.field":"F\u00e5ngat F\u00e4lt (Bredd)","mag.macro":"Makrof\u00f6rm\u00e5ga",
+"comp.tag":"Komposition","comp.title":"Fotoregler","comp.desc":"Beh\u00e4rska de viktigaste kompositionsreglerna f\u00f6r fantastiska bilder.","comp.demo":"Visa Demo",
+"motif.tag":"Motivigenk\u00e4nning","motif.title":"Motivigenk\u00e4nning & Genrer","motif.desc":"L\u00e4r dig olika fotogenrer och deras optimala inst\u00e4llningar.","motif.all":"Alla","motif.portrait":"Portr\u00e4tt","motif.landscape":"Landskap","motif.street":"Gata","motif.macro":"Makro","motif.night":"Natt","motif.sport":"Sport","motif.architecture":"Arkitektur","motif.wildlife":"Vilt",
+"exp.tag":"Grunder","exp.title":"Exponerings\u00adtriangeln","exp.desc":"F\u00f6rst\u00e5 samspelet mellan bl\u00e4ndare, slutartid och ISO.","exp.aperture":"Bl\u00e4ndare","exp.shutter":"Slutartid","exp.aperture.mid":"Mellanbl\u00e4ndare \u2013 bra kompromiss mellan sk\u00e4rpa och ljus.","exp.shutter.mid":"Standardslutar\u00adtid \u2013 fryser de flesta r\u00f6relser.","exp.iso.low":"L\u00e5gt ISO \u2013 minimalt brus, b\u00e4sta kvalitet.","exp.correct":"Korrekt Exponering","exp.under":"Underexponerad","exp.over":"\u00d6verexponerad","exp.slightunder":"Lite underexponerad","exp.slightover":"Lite \u00f6verexponerad",
+"quiz.tag":"Kunskapskontroll","quiz.title":"Fotoquiz","quiz.desc":"Testa dina kunskaper med interaktiva fr\u00e5gor.","quiz.all":"Alla \u00c4mnen","quiz.basics":"Grunder","quiz.composition":"Komposition","quiz.lenses":"Objektiv","quiz.exposure":"Exponering","quiz.genres":"Genrer","quiz.ready":"Redo f\u00f6r Quiz?","quiz.choose":"V\u00e4lj en kategori och testa dina kunskaper!","quiz.info":"10 fr\u00e5gor per runda \u2022 Flerval \u2022 Omedelbar feedback","quiz.start":"Starta Quiz","quiz.next":"N\u00e4sta Fr\u00e5ga","quiz.finished":"Quiz Klar!","quiz.playagain":"Spela Igen","quiz.review":"Granska Svar","quiz.score":"Po\u00e4ng","quiz.resulttext":"Du svarade r\u00e4tt p\u00e5 {0} av {1} fr\u00e5gor.","quiz.excellent":"Utm\u00e4rkt! Du \u00e4r ett fotoprofs!","quiz.good":"Bra gjort! Solid kunskap!","quiz.ok":"Inte d\u00e5ligt! Forts\u00e4tt \u00f6va!","quiz.needwork":"Utrymme f\u00f6r f\u00f6rb\u00e4ttring! Repetera grunderna.",
+"footer.brand":"Din gratis fotoverktygsl\u00e5da f\u00f6r b\u00e4ttre bilder.","footer.tools":"Verktyg","footer.calcs":"Kalkylatorer","footer.comprules":"Kompositionsregler","footer.exptriangle":"Exponerings\u00adtriangeln","footer.copy":"\u00a9 2026 PhotoPro Tools \u2014 Skapat med passion f\u00f6r fotografi.",
+"sensor.ff":"Fullformat (36x24mm)","sensor.apsc":"APS-C (23.5x15.6mm)","sensor.apsc_canon":"APS-C Canon (22.3x14.9mm)","sensor.m43":"Micro 4/3 (17.3x13mm)","sensor.1inch":"1 Tum (13.2x8.8mm)","sensor.small":"1/2.3 Tum (6.17x4.55mm)","sensor.ff_short":"Fullformat","sensor.apsc_short":"APS-C","sensor.m43_short":"Micro 4/3","sensor.ff_1x":"Fullformat (1.0x)","sensor.apsc_nikon":"APS-C Nikon/Sony (1.5x)","sensor.apsc_canon_1_6":"APS-C Canon (1.6x)","sensor.m43_2x":"Micro 4/3 (2.0x)","sensor.1inch_2_7":"1 Tum (2.7x)","sensor.small_5_6":"1/2.3 Tum (5.6x)",
+"lenstype.superwide":"Supervidvinkel","lenstype.wide":"Vidvinkel","lenstype.normal":"Normalobjektiv","lenstype.tele":"Teleobjektiv","lenstype.supertele":"Superteleobjektiv",
+"macro.true":"\u00c4kta Makro (1:1+)","macro.half":"Halvmakro (~1:2)","macro.close":"N\u00e4rbild","macro.no":"Inte Makro",
+"rule.thirds.name":"Tredjedelsregeln","rule.thirds.desc":"Dela bilden i 9 lika delar. Placera viktiga element p\u00e5 linjerna eller sk\u00e4rningspunkterna.","rule.thirds.tip1":"Placera horisonten p\u00e5 \u00f6vre eller nedre tredjedelslinjen","rule.thirds.tip2":"Placera motivets \u00f6gon p\u00e5 \u00f6vre sk\u00e4rningspunkterna","rule.thirds.tip3":"Placera aldrig huvudmotivet exakt i mitten",
+"rule.golden.name":"Gyllene Snittet","rule.golden.desc":"F\u00f6rh\u00e5llandet 1:1.618 \u2013 naturens perfekta proportion.","rule.golden.tip1":"Delar bilden i ungef\u00e4r 62% / 38%","rule.golden.tip2":"Mer harmoniskt \u00e4n tredjedelsregeln","rule.golden.tip3":"Finns \u00f6verallt i naturen (snackor, blommor)",
+"rule.leading.name":"Ledande Linjer","rule.leading.desc":"Naturliga linjer leder betraktarens blick till huvudmotivet.","rule.leading.tip1":"Anv\u00e4nd v\u00e4gar, floder, staket som linjer","rule.leading.tip2":"Linjerna b\u00f6r leda in i bilden","rule.leading.tip3":"Konvergerande linjer skapar djup",
+"rule.symmetry.name":"Symmetri & M\u00f6nster","rule.symmetry.desc":"Symmetriska kompositioner utstrs\u00e5lar lugn och perfektion.","rule.symmetry.tip1":"Reflektioner i vatten perfekt f\u00f6r symmetri","rule.symmetry.tip2":"Arkitektur erbjuder naturlig symmetri","rule.symmetry.tip3":"Medvetet bryta symmetrin som stilgrepp",
+"rule.framing.name":"Naturlig Inramning","rule.framing.desc":"Anv\u00e4nd element i scenen f\u00f6r att rama in ditt motiv.","rule.framing.tip1":"B\u00e5gar, f\u00f6nster, grenar som ramar","rule.framing.tip2":"Styr uppm\u00e4rksamheten mot huvudmotivet","rule.framing.tip3":"Skapar djup och sammanhang",
+"rule.negative.name":"Negativt Utrymme","rule.negative.desc":"Tomt utrymme runt motivet skapar effekt och dramatik.","rule.negative.tip1":"Mindre \u00e4r mer \u2013 anv\u00e4nd minimalism","rule.negative.tip2":"Ge motivet utrymme att andas","rule.negative.tip3":"S\u00e4rskilt effektivt i portr\u00e4tt",
+"rule.diagonal.name":"Diagonaler","rule.diagonal.desc":"Diagonala linjer skapar dynamik och sp\u00e4nning i bilden.","rule.diagonal.tip1":"H\u00f6rn till h\u00f6rn f\u00f6r maximal dynamik","rule.diagonal.tip2":"Anv\u00e4nd lutande perspektiv","rule.diagonal.tip3":"R\u00f6relseriktning l\u00e4ngs diagonalen",
+"rule.color.name":"F\u00e4rgteori","rule.color.desc":"Komplement\u00e4rf\u00e4rger och f\u00e4rgharmonier f\u00f6r stark visuell effekt.","rule.color.tip1":"Komplement\u00e4rf\u00e4rger f\u00f6r kontrast (bl\u00e5/orange)","rule.color.tip2":"Analoga f\u00e4rger f\u00f6r harmoni","rule.color.tip3":"Varma f\u00e4rger i f\u00f6rgrunden, kalla i bakgrunden",
+"motif.portrait.title":"Portr\u00e4ttfotografi","motif.portrait.desc":"F\u00e5nga m\u00e4nniskor och ansikten perfekt.","motif.landscape.title":"Landskapsfotografi","motif.landscape.desc":"F\u00e5nga vida landskap och naturscener.","motif.street.title":"Gatufotografi","motif.street.desc":"Dokumentera gatulivet autentiskt.","motif.macro.title":"Makrofotografi","motif.macro.desc":"G\u00f6r sm\u00e5 saker stora.","motif.night.title":"Nattfotografi","motif.night.desc":"Stj\u00e4rnor, stadsljus och nattscener.","motif.sport.title":"Sportfotografi","motif.sport.desc":"Frys snabba r\u00f6relser och action.","motif.architecture.title":"Arkitekturfotografi","motif.architecture.desc":"Byggnader och strukturer i perfektion.","motif.wildlife.title":"Viltfotografi","motif.wildlife.desc":"Djur i deras naturliga milj\u00f6.",
+"motif.setting.lens":"Objektiv","motif.setting.aperture":"Bl\u00e4ndare","motif.setting.iso":"ISO","motif.setting.shutter":"Slutartid",
+"nav.simtools":"Simulering","sim.tag":"Simulering","sim.title":"Fotosimuleringar","sim.desc":"Simulera olika fotoeffekter i realtid.",
+"sim.bokeh":"Bokeh","sim.longexp":"L\u00e5ng Exponering","sim.wb":"Vitbalans","sim.noise":"ISO-brus","sim.perspective":"Perspektiv","sim.histogram":"Histogram",
+"sim.bokeh.title":"Bokeh-simulator","sim.bokeh.info":"Se hur bokeh f\u00f6r\u00e4ndras med olika bl\u00e4ndare och br\u00e4nnvidder.","sim.bokeh.blades":"Bl\u00e4ndarblad","sim.bokeh.intensity":"Bokeh-intensitet",
+"sim.longexp.title":"L\u00e5ngexponerings\u00adsimulator","sim.longexp.info":"Se effekten av olika exponeringstider p\u00e5 r\u00f6relse.","sim.longexp.speed":"R\u00f6relsehastighet","sim.longexp.time":"Exponeringstid (s)",
+"sim.wb.title":"Vitbalanssimulator","sim.wb.info":"Se hur f\u00e4rgtemperaturen p\u00e5verkar din bild.","sim.wb.kelvin":"Temperatur (K)","sim.wb.tint":"Nyans",
+"sim.noise.title":"ISO-brussimulator","sim.noise.info":"Se hur digitalt brus \u00f6kar med h\u00f6gre ISO-v\u00e4rden.","sim.noise.level":"Brusniv\u00e5",
+"sim.perspective.title":"Perspektivsimulator","sim.perspective.info":"Se hur br\u00e4nnvidden p\u00e5verkar perspektivet.","sim.perspective.type":"Distorsionstyp",
+"sim.histogram.title":"Histogramsimulator","sim.histogram.info":"Se histogrammet baserat p\u00e5 exponerings\u00adinst\u00e4llningar."
+}
+};
+
+/* ==================== i18n Functions ==================== */
+window.t = function(key) {
+    var lang = window.currentLang || 'de';
+    var tr = window.I18N[lang];
+    if (tr && tr[key] !== undefined) return tr[key];
+    if (window.I18N.de && window.I18N.de[key] !== undefined) return window.I18N.de[key];
+    return key;
+};
+
+window.setLanguage = function(lang) {
+    if (!window.I18N[lang]) return;
+    window.currentLang = lang;
+    try { localStorage.setItem('photopro-lang', lang); } catch(e) {}
+    document.documentElement.lang = lang;
+    // Update data-i18n elements
+    document.querySelectorAll('[data-i18n]').forEach(function(el) {
+        var key = el.getAttribute('data-i18n');
+        var val = t(key);
+        if (val !== key) el.textContent = val;
+    });
+    // Update data-i18n-opt elements (option elements)
+    document.querySelectorAll('[data-i18n-opt]').forEach(function(el) {
+        var key = el.getAttribute('data-i18n-opt');
+        var val = t(key);
+        if (val !== key) el.textContent = val;
+    });
+    // Update lang switcher button
+    var flag = document.getElementById('langFlag');
+    if (flag) flag.textContent = lang.toUpperCase();
+    // Update active state
+    document.querySelectorAll('.lang-option').forEach(function(btn) {
+        btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
+    });
+    // Dispatch event for dynamic content
+    document.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang: lang }}));
+};
+
+// Init from localStorage
+(function() {
+    try {
+        var saved = localStorage.getItem('photopro-lang');
+        if (saved && window.I18N[saved]) window.currentLang = saved;
+    } catch(e) {}
+})();
+
+window.I18N_READY = true;
@@ -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
@@ -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>
@@ -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.
@@ -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>
@@ -0,0 +1,15 @@
+/vendor/
+/storage/uploads/*
+/storage/outputs/*
+/storage/thumbnails/*
+/storage/logs/*
+/storage/temp/*
+!storage/uploads/.gitkeep
+!storage/outputs/.gitkeep
+!storage/thumbnails/.gitkeep
+!storage/logs/.gitkeep
+!storage/temp/.gitkeep
+.env
+*.swp
+*.swo
+.DS_Store
@@ -0,0 +1,40 @@
+FROM php:8.2-cli
+
+# Install FFmpeg and dependencies
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    libzip-dev \
+    unzip \
+    git \
+    && docker-php-ext-install pcntl posix sockets \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Composer
+COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
+
+WORKDIR /app
+
+# Copy composer files first for caching
+COPY composer.json ./
+RUN composer install --no-dev --optimize-autoloader 2>/dev/null || true
+
+# Copy application
+COPY . .
+
+# Install dependencies
+RUN composer install --no-dev --optimize-autoloader
+
+# Create storage directories
+RUN mkdir -p storage/uploads storage/outputs storage/thumbnails storage/logs storage/temp \
+    && chmod -R 777 storage
+
+# Configure PHP
+RUN echo "upload_max_filesize = 5G\n\
+post_max_size = 5G\n\
+memory_limit = 512M\n\
+max_execution_time = 3600\n\
+max_input_time = 3600" > /usr/local/etc/php/conf.d/video-converter.ini
+
+EXPOSE 8080 8081
+
+CMD ["php", "-S", "0.0.0.0:8080", "-t", "public", "public/router.php"]
@@ -0,0 +1,68 @@
+#!/usr/bin/env php
+<?php
+
+/**
+ * Video Converter Suite - Queue Worker
+ *
+ * Processes jobs from the queue sequentially.
+ * Usage: php bin/queue-worker.php
+ */
+
+spl_autoload_register(function ($class) {
+    $prefix = 'VideoConverter\\';
+    $baseDir = __DIR__ . '/../src/';
+    $len = strlen($prefix);
+    if (strncmp($prefix, $class, $len) !== 0) return;
+    $relative = substr($class, $len);
+    $file = $baseDir . str_replace('\\', '/', $relative) . '.php';
+    if (file_exists($file)) require $file;
+});
+
+use VideoConverter\Queue\JobQueue;
+use VideoConverter\Format\FormatConverter;
+
+$config = require __DIR__ . '/../config/app.php';
+
+echo "=== Video Converter Suite - Queue Worker ===\n";
+echo "Max concurrent: {$config['limits']['max_concurrent_jobs']}\n\n";
+
+$queue = new JobQueue();
+$converter = new FormatConverter();
+$running = 0;
+
+while (true) {
+    $queue = new JobQueue(); // Reload state
+    $converter = new FormatConverter();
+
+    $activeJobs = array_filter($converter->getAllJobs(), fn($j) => $j['status'] === 'running');
+    $running = count($activeJobs);
+
+    if ($running < $config['limits']['max_concurrent_jobs']) {
+        $nextJob = $queue->dequeue();
+        if ($nextJob) {
+            echo "[" . date('H:i:s') . "] Processing: {$nextJob['queue_id']}\n";
+
+            try {
+                $result = $converter->convert([
+                    'input_file' => $nextJob['input_file'] ?? '',
+                    'output_format' => $nextJob['output_format'] ?? 'mp4',
+                    'preset' => $nextJob['preset'] ?? 'balanced',
+                    'resolution' => $nextJob['resolution'] ?? null,
+                ]);
+
+                if (isset($result['error'])) {
+                    $queue->fail($nextJob['queue_id'], $result['error']);
+                    echo "[" . date('H:i:s') . "] Failed: {$result['error']}\n";
+                } else {
+                    $queue->complete($nextJob['queue_id'], $result);
+                    echo "[" . date('H:i:s') . "] Started job: {$result['id']}\n";
+                }
+            } catch (\Throwable $e) {
+                $queue->fail($nextJob['queue_id'], $e->getMessage());
+                echo "[" . date('H:i:s') . "] Error: {$e->getMessage()}\n";
+            }
+        }
+    }
+
+    sleep(2);
+}
@@ -0,0 +1,101 @@
+#!/bin/bash
+
+# Video Converter Suite - Startup Script
+# Starts all services: Web Server, WebSocket Server, Queue Worker
+
+echo "================================================"
+echo "  VIDEO CONVERTER SUITE - Starting Services"
+echo "================================================"
+echo ""
+
+DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+cd "$DIR"
+
+# Create storage directories
+mkdir -p storage/{uploads,outputs,thumbnails,logs,temp}
+
+# Check FFmpeg
+if command -v ffmpeg &> /dev/null; then
+    echo "[OK] FFmpeg: $(ffmpeg -version 2>&1 | head -1)"
+else
+    echo "[!!] FFmpeg not found. Install with: apt install ffmpeg"
+    echo "     The application will work but conversions will fail."
+fi
+
+# Check PHP
+if command -v php &> /dev/null; then
+    echo "[OK] PHP: $(php -v 2>&1 | head -1)"
+else
+    echo "[!!] PHP not found."
+    exit 1
+fi
+
+# Install dependencies if needed
+if [ ! -d "vendor" ]; then
+    echo ""
+    echo "Installing dependencies..."
+    if command -v composer &> /dev/null; then
+        composer install
+    else
+        echo "[!!] Composer not found. WebSocket server won't work."
+        echo "     The web interface will still work without it."
+    fi
+fi
+
+echo ""
+echo "Starting services..."
+echo ""
+
+# Start Web Server
+echo "[1/3] Web Server on http://localhost:8080"
+php -S 0.0.0.0:8080 -t public public/router.php \
+    -d upload_max_filesize=5G \
+    -d post_max_size=5G \
+    -d memory_limit=512M \
+    -d max_execution_time=3600 \
+    > storage/logs/web.log 2>&1 &
+WEB_PID=$!
+
+# Start WebSocket Server (optional, requires Ratchet)
+if [ -f "vendor/autoload.php" ]; then
+    echo "[2/3] WebSocket Server on ws://localhost:8081"
+    php bin/websocket-server.php > storage/logs/websocket.log 2>&1 &
+    WS_PID=$!
+else
+    echo "[2/3] WebSocket Server: SKIPPED (run composer install first)"
+    WS_PID=""
+fi
+
+# Start Queue Worker
+echo "[3/3] Queue Worker"
+php bin/queue-worker.php > storage/logs/worker.log 2>&1 &
+WORKER_PID=$!
+
+echo ""
+echo "================================================"
+echo "  All services started!"
+echo ""
+echo "  Web UI:    http://localhost:8080"
+echo "  WebSocket: ws://localhost:8081"
+echo ""
+echo "  PIDs: Web=$WEB_PID WS=$WS_PID Worker=$WORKER_PID"
+echo "  Logs: storage/logs/"
+echo ""
+echo "  Press Ctrl+C to stop all services"
+echo "================================================"
+
+# Trap exit to kill all processes
+cleanup() {
+    echo ""
+    echo "Stopping all services..."
+    kill $WEB_PID 2>/dev/null
+    [ -n "$WS_PID" ] && kill $WS_PID 2>/dev/null
+    kill $WORKER_PID 2>/dev/null
+    echo "All services stopped."
+    exit 0
+}
+
+trap cleanup EXIT INT TERM
+
+# Wait for any process to exit
+wait
@@ -0,0 +1,41 @@
+#!/usr/bin/env php
+<?php
+
+/**
+ * Video Converter Suite - WebSocket Server
+ *
+ * Provides real-time status updates to connected clients.
+ * Usage: php bin/websocket-server.php
+ */
+
+require_once __DIR__ . '/../vendor/autoload.php';
+
+use Ratchet\Server\IoServer;
+use Ratchet\Http\HttpServer;
+use Ratchet\WebSocket\WsServer;
+use VideoConverter\WebSocket\StatusServer;
+
+$config = require __DIR__ . '/../config/app.php';
+$host = $config['websocket']['host'];
+$port = $config['websocket']['port'];
+
+echo "=== Video Converter Suite - WebSocket Server ===\n";
+echo "Starting on {$host}:{$port}\n\n";
+
+$statusServer = new StatusServer();
+
+$server = IoServer::factory(
+    new HttpServer(
+        new WsServer($statusServer)
+    ),
+    $port,
+    $host
+);
+
+// Broadcast status every 2 seconds
+$server->loop->addPeriodicTimer(2, function () use ($statusServer) {
+    $statusServer->broadcastStatus();
+});
+
+echo "WebSocket server running. Press Ctrl+C to stop.\n";
+$server->run();
@@ -0,0 +1,21 @@
+{
+    "name": "videokonverter/suite",
+    "description": "Video Converter Suite - Live Stream Pipeline Control Panel",
+    "type": "project",
+    "require": {
+        "php": ">=8.1",
+        "cboden/ratchet": "^0.4",
+        "react/event-loop": "^1.4",
+        "react/child-process": "^0.6"
+    },
+    "autoload": {
+        "psr-4": {
+            "VideoConverter\\": "src/"
+        }
+    },
+    "scripts": {
+        "start": "php -S 0.0.0.0:8080 -t public public/router.php",
+        "websocket": "php bin/websocket-server.php",
+        "worker": "php bin/queue-worker.php"
+    }
+}
@@ -0,0 +1,74 @@
+<?php
+
+return [
+    'app_name' => 'Video Converter Suite',
+    'version' => '1.0.0',
+    'debug' => true,
+
+    'ffmpeg' => [
+        'binary' => getenv('FFMPEG_PATH') ?: '/usr/bin/ffmpeg',
+        'ffprobe' => getenv('FFPROBE_PATH') ?: '/usr/bin/ffprobe',
+        'threads' => (int)(getenv('FFMPEG_THREADS') ?: 4),
+        'timeout' => 3600,
+        'nice' => 10,
+    ],
+
+    'storage' => [
+        'uploads' => __DIR__ . '/../storage/uploads',
+        'outputs' => __DIR__ . '/../storage/outputs',
+        'thumbnails' => __DIR__ . '/../storage/thumbnails',
+        'logs' => __DIR__ . '/../storage/logs',
+        'temp' => __DIR__ . '/../storage/temp',
+    ],
+
+    'limits' => [
+        'max_upload_size' => 5 * 1024 * 1024 * 1024, // 5 GB
+        'max_concurrent_jobs' => 3,
+        'max_pipeline_depth' => 10,
+    ],
+
+    'websocket' => [
+        'host' => '0.0.0.0',
+        'port' => 8081,
+    ],
+
+    'formats' => [
+        'video' => [
+            'mp4'  => ['codec' => 'libx264',  'ext' => 'mp4',  'mime' => 'video/mp4'],
+            'webm' => ['codec' => 'libvpx-vp9', 'ext' => 'webm', 'mime' => 'video/webm'],
+            'mkv'  => ['codec' => 'libx264',  'ext' => 'mkv',  'mime' => 'video/x-matroska'],
+            'avi'  => ['codec' => 'mpeg4',    'ext' => 'avi',  'mime' => 'video/x-msvideo'],
+            'mov'  => ['codec' => 'libx264',  'ext' => 'mov',  'mime' => 'video/quicktime'],
+            'flv'  => ['codec' => 'flv1',     'ext' => 'flv',  'mime' => 'video/x-flv'],
+            'wmv'  => ['codec' => 'wmv2',     'ext' => 'wmv',  'mime' => 'video/x-ms-wmv'],
+            'ts'   => ['codec' => 'libx264',  'ext' => 'ts',   'mime' => 'video/mp2t'],
+            'hls'  => ['codec' => 'libx264',  'ext' => 'm3u8', 'mime' => 'application/x-mpegURL'],
+            'dash' => ['codec' => 'libx264',  'ext' => 'mpd',  'mime' => 'application/dash+xml'],
+        ],
+        'audio' => [
+            'aac'  => ['codec' => 'aac',         'ext' => 'aac',  'mime' => 'audio/aac'],
+            'mp3'  => ['codec' => 'libmp3lame',   'ext' => 'mp3',  'mime' => 'audio/mpeg'],
+            'ogg'  => ['codec' => 'libvorbis',    'ext' => 'ogg',  'mime' => 'audio/ogg'],
+            'wav'  => ['codec' => 'pcm_s16le',    'ext' => 'wav',  'mime' => 'audio/wav'],
+            'flac' => ['codec' => 'flac',         'ext' => 'flac', 'mime' => 'audio/flac'],
+            'opus' => ['codec' => 'libopus',      'ext' => 'opus', 'mime' => 'audio/opus'],
+        ],
+    ],
+
+    'presets' => [
+        'ultrafast' => ['preset' => 'ultrafast', 'crf' => 28],
+        'fast'      => ['preset' => 'fast',      'crf' => 23],
+        'balanced'  => ['preset' => 'medium',    'crf' => 20],
+        'quality'   => ['preset' => 'slow',      'crf' => 18],
+        'lossless'  => ['preset' => 'veryslow',  'crf' => 0],
+    ],
+
+    'resolutions' => [
+        '4k'    => ['width' => 3840, 'height' => 2160, 'label' => '4K UHD'],
+        '1440p' => ['width' => 2560, 'height' => 1440, 'label' => '2K QHD'],
+        '1080p' => ['width' => 1920, 'height' => 1080, 'label' => 'Full HD'],
+        '720p'  => ['width' => 1280, 'height' => 720,  'label' => 'HD'],
+        '480p'  => ['width' => 854,  'height' => 480,  'label' => 'SD'],
+        '360p'  => ['width' => 640,  'height' => 360,  'label' => 'Low'],
+    ],
+];
@@ -0,0 +1,54 @@
+version: '3.8'
+
+services:
+  # Main Web Application
+  web:
+    build: .
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./storage:/app/storage
+      - ./src:/app/src
+      - ./public:/app/public
+      - ./templates:/app/templates
+      - ./config:/app/config
+    environment:
+      - FFMPEG_PATH=/usr/bin/ffmpeg
+      - FFPROBE_PATH=/usr/bin/ffprobe
+      - FFMPEG_THREADS=4
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8080/api/system"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  # WebSocket Server for real-time updates
+  websocket:
+    build: .
+    command: php bin/websocket-server.php
+    ports:
+      - "8081:8081"
+    volumes:
+      - ./storage:/app/storage
+      - ./src:/app/src
+      - ./config:/app/config
+    depends_on:
+      - web
+    restart: unless-stopped
+
+  # Queue Worker for batch processing
+  worker:
+    build: .
+    command: php bin/queue-worker.php
+    volumes:
+      - ./storage:/app/storage
+      - ./src:/app/src
+      - ./config:/app/config
+    environment:
+      - FFMPEG_PATH=/usr/bin/ffmpeg
+      - FFPROBE_PATH=/usr/bin/ffprobe
+      - FFMPEG_THREADS=2
+    depends_on:
+      - web
+    restart: unless-stopped
@@ -0,0 +1,409 @@
+<?php
+
+/**
+ * Video Converter Suite - REST API
+ */
+
+spl_autoload_register(function ($class) {
+    $prefix = 'VideoConverter\\';
+    $baseDir = __DIR__ . '/../src/';
+    $len = strlen($prefix);
+    if (strncmp($prefix, $class, $len) !== 0) return;
+    $relative = substr($class, $len);
+    $file = $baseDir . str_replace('\\', '/', $relative) . '.php';
+    if (file_exists($file)) require $file;
+});
+
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
+header('Access-Control-Allow-Headers: Content-Type');
+
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(204);
+    exit;
+}
+
+$method = $_SERVER['REQUEST_METHOD'];
+$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+$segments = array_values(array_filter(explode('/', $path)));
+
+// Page routes (return HTML)
+if (empty($segments) || ($segments[0] ?? '') !== 'api') {
+    header('Content-Type: text/html; charset=utf-8');
+    $page = $segments[0] ?? 'dashboard';
+    $templateFile = __DIR__ . '/../templates/' . basename($page) . '.php';
+    if (file_exists($templateFile)) {
+        $config = require __DIR__ . '/../config/app.php';
+        require $templateFile;
+    } else {
+        $config = require __DIR__ . '/../config/app.php';
+        require __DIR__ . '/../templates/dashboard.php';
+    }
+    exit;
+}
+
+// API routes
+array_shift($segments); // remove 'api'
+$resource = $segments[0] ?? '';
+$id = $segments[1] ?? null;
+$action = $segments[2] ?? null;
+
+$input = json_decode(file_get_contents('php://input'), true) ?? [];
+
+try {
+    $response = match (true) {
+        // System
+        $resource === 'system' && $method === 'GET' => handleSystem(),
+
+        // Convert
+        $resource === 'convert' && $method === 'POST' => handleConvert($input),
+        $resource === 'convert' && $action === 'batch' && $method === 'POST' => handleBatchConvert($input),
+        $resource === 'upload' && $method === 'POST' => handleUpload(),
+
+        // Jobs
+        $resource === 'jobs' && $method === 'GET' && !$id => handleGetJobs(),
+        $resource === 'jobs' && $method === 'GET' && $id && $action === 'progress' => handleJobProgress($id),
+        $resource === 'jobs' && $method === 'GET' && $id => handleGetJob($id),
+        $resource === 'jobs' && $method === 'DELETE' && $id => handleDeleteJob($id),
+        $resource === 'jobs' && $action === 'cancel' && $method === 'POST' => handleCancelJob($id),
+
+        // Streams
+        $resource === 'streams' && $method === 'GET' && !$id => handleGetStreams(),
+        $resource === 'streams' && $method === 'POST' => handleStartStream($input),
+        $resource === 'streams' && $method === 'GET' && $id => handleGetStream($id),
+        $resource === 'streams' && $method === 'DELETE' && $id => handleStopStream($id),
+        $resource === 'streams' && $action === 'switch' && $method === 'POST' => handleSwitchFormat($id, $input),
+
+        // Pipelines
+        $resource === 'pipelines' && $method === 'GET' && !$id => handleGetPipelines(),
+        $resource === 'pipelines' && $method === 'POST' => handleCreatePipeline($input),
+        $resource === 'pipelines' && $method === 'GET' && $id => handleGetPipeline($id),
+        $resource === 'pipelines' && $method === 'PUT' && $id => handleUpdatePipeline($id, $input),
+        $resource === 'pipelines' && $method === 'DELETE' && $id => handleDeletePipeline($id),
+        $resource === 'pipelines' && $action === 'run' && $method === 'POST' => handleRunPipeline($id, $input),
+        $resource === 'pipelines' && $action === 'stage' && $method === 'POST' => handleAddStage($id, $input),
+
+        // Queue
+        $resource === 'queue' && $method === 'GET' => handleGetQueue(),
+        $resource === 'queue' && $method === 'POST' => handleEnqueue($input),
+        $resource === 'queue' && $method === 'DELETE' => handleClearQueue(),
+
+        // Formats info
+        $resource === 'formats' && $method === 'GET' => handleGetFormats(),
+        $resource === 'presets' && $method === 'GET' => handleGetPresets(),
+        $resource === 'resolutions' && $method === 'GET' => handleGetResolutions(),
+
+        // Probe
+        $resource === 'probe' && $method === 'POST' => handleProbe($input),
+
+        // Downloads
+        $resource === 'download' && $method === 'GET' && $id => handleDownload($id),
+
+        default => ['error' => 'Not found', 'status' => 404],
+    };
+
+    $status = $response['status'] ?? 200;
+    unset($response['status']);
+    http_response_code($status);
+    echo json_encode($response, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
+
+} catch (\Throwable $e) {
+    http_response_code(500);
+    echo json_encode(['error' => $e->getMessage()]);
+}
+
+// ---- Handler Functions ----
+
+function handleSystem(): array
+{
+    $load = sys_getloadavg();
+    $config = require __DIR__ . '/../config/app.php';
+    return [
+        'app' => $config['app_name'],
+        'version' => $config['version'],
+        'cpu_load' => $load,
+        'memory' => [
+            'used' => memory_get_usage(true),
+            'peak' => memory_get_peak_usage(true),
+        ],
+        'disk' => [
+            'free' => disk_free_space('/'),
+            'total' => disk_total_space('/'),
+        ],
+        'php_version' => PHP_VERSION,
+        'ffmpeg_available' => file_exists($config['ffmpeg']['binary']),
+    ];
+}
+
+function handleUpload(): array
+{
+    $config = require __DIR__ . '/../config/app.php';
+
+    if (empty($_FILES['file'])) {
+        return ['error' => 'No file uploaded', 'status' => 400];
+    }
+
+    $file = $_FILES['file'];
+    if ($file['error'] !== UPLOAD_ERR_OK) {
+        return ['error' => 'Upload error: ' . $file['error'], 'status' => 400];
+    }
+
+    if ($file['size'] > $config['limits']['max_upload_size']) {
+        return ['error' => 'File too large', 'status' => 400];
+    }
+
+    $uploadDir = $config['storage']['uploads'];
+    if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);
+
+    $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
+    $safeName = bin2hex(random_bytes(8)) . '.' . $ext;
+    $destination = $uploadDir . '/' . $safeName;
+
+    if (!move_uploaded_file($file['tmp_name'], $destination)) {
+        return ['error' => 'Failed to save file', 'status' => 500];
+    }
+
+    $probe = new \VideoConverter\Process\MediaProbe();
+    $info = $probe->analyze($destination);
+
+    // Generate thumbnail
+    $thumbDir = $config['storage']['thumbnails'];
+    if (!is_dir($thumbDir)) mkdir($thumbDir, 0755, true);
+    $thumbPath = $thumbDir . '/' . pathinfo($safeName, PATHINFO_FILENAME) . '.jpg';
+    $probe->getThumbnail($destination, $thumbPath);
+
+    return [
+        'file' => $safeName,
+        'path' => $destination,
+        'original_name' => $file['name'],
+        'size' => $file['size'],
+        'info' => $info,
+        'thumbnail' => file_exists($thumbPath) ? '/api/thumbnail/' . pathinfo($safeName, PATHINFO_FILENAME) : null,
+    ];
+}
+
+function handleConvert(array $input): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    return $converter->convert($input);
+}
+
+function handleBatchConvert(array $input): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    return $converter->batchConvert($input['input_file'] ?? '', $input['formats'] ?? []);
+}
+
+function handleGetJobs(): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    return ['jobs' => $converter->getAllJobs()];
+}
+
+function handleGetJob(string $id): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    $job = $converter->getJob($id);
+    return $job ? $job : ['error' => 'Job not found', 'status' => 404];
+}
+
+function handleJobProgress(string $id): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    return $converter->getProgress($id);
+}
+
+function handleCancelJob(string $id): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    return ['success' => $converter->cancelJob($id)];
+}
+
+function handleDeleteJob(string $id): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    return ['success' => $converter->deleteJob($id)];
+}
+
+function handleGetStreams(): array
+{
+    $mgr = new \VideoConverter\Stream\StreamManager();
+    return ['streams' => $mgr->getAllStreams(), 'stats' => $mgr->getStats()];
+}
+
+function handleStartStream(array $input): array
+{
+    $mgr = new \VideoConverter\Stream\StreamManager();
+    return $mgr->startStream($input);
+}
+
+function handleGetStream(string $id): array
+{
+    $mgr = new \VideoConverter\Stream\StreamManager();
+    $stream = $mgr->getStream($id);
+    return $stream ?: ['error' => 'Stream not found', 'status' => 404];
+}
+
+function handleStopStream(string $id): array
+{
+    $mgr = new \VideoConverter\Stream\StreamManager();
+    return ['success' => $mgr->stopStream($id)];
+}
+
+function handleSwitchFormat(string $id, array $input): array
+{
+    $mgr = new \VideoConverter\Stream\StreamManager();
+    return $mgr->switchFormat($id, $input['format'] ?? 'mp4', $input['resolution'] ?? null);
+}
+
+function handleGetPipelines(): array
+{
+    $mgr = new \VideoConverter\Pipeline\PipelineManager();
+    return ['pipelines' => $mgr->toArray()];
+}
+
+function handleCreatePipeline(array $input): array
+{
+    $mgr = new \VideoConverter\Pipeline\PipelineManager();
+    $pipeline = $mgr->create($input['name'] ?? 'Unnamed Pipeline');
+
+    foreach (($input['stages'] ?? []) as $stageData) {
+        $stage = new \VideoConverter\Pipeline\PipelineStage(
+            $stageData['type'] ?? 'transcode',
+            $stageData['params'] ?? [],
+            $stageData['label'] ?? '',
+            $stageData['enabled'] ?? true
+        );
+        $pipeline->addStage($stage);
+    }
+
+    $mgr->save();
+    return $pipeline->toArray();
+}
+
+function handleGetPipeline(string $id): array
+{
+    $mgr = new \VideoConverter\Pipeline\PipelineManager();
+    $pipeline = $mgr->get($id);
+    return $pipeline ? $pipeline->toArray() : ['error' => 'Pipeline not found', 'status' => 404];
+}
+
+function handleUpdatePipeline(string $id, array $input): array
+{
+    $mgr = new \VideoConverter\Pipeline\PipelineManager();
+    $pipeline = $mgr->get($id);
+    if (!$pipeline) return ['error' => 'Pipeline not found', 'status' => 404];
+
+    if (isset($input['stages'])) {
+        // Rebuild stages
+        $ref = new \ReflectionProperty($pipeline, 'stages');
+        $ref->setAccessible(true);
+        $ref->setValue($pipeline, []);
+
+        foreach ($input['stages'] as $stageData) {
+            $stage = \VideoConverter\Pipeline\PipelineStage::fromArray($stageData);
+            $pipeline->addStage($stage);
+        }
+    }
+
+    $mgr->save();
+    return $pipeline->toArray();
+}
+
+function handleDeletePipeline(string $id): array
+{
+    $mgr = new \VideoConverter\Pipeline\PipelineManager();
+    return ['success' => $mgr->delete($id)];
+}
+
+function handleRunPipeline(string $id, array $input): array
+{
+    $mgr = new \VideoConverter\Pipeline\PipelineManager();
+    $pipeline = $mgr->get($id);
+    if (!$pipeline) return ['error' => 'Pipeline not found', 'status' => 404];
+
+    $converter = new \VideoConverter\Format\FormatConverter();
+    return $converter->convert([
+        'input_file' => $input['input_file'] ?? '',
+        'output_format' => $input['output_format'] ?? 'mp4',
+        'pipeline' => $pipeline,
+    ]);
+}
+
+function handleAddStage(string $id, array $input): array
+{
+    $mgr = new \VideoConverter\Pipeline\PipelineManager();
+    $pipeline = $mgr->get($id);
+    if (!$pipeline) return ['error' => 'Pipeline not found', 'status' => 404];
+
+    $stage = new \VideoConverter\Pipeline\PipelineStage(
+        $input['type'] ?? 'transcode',
+        $input['params'] ?? [],
+        $input['label'] ?? '',
+        $input['enabled'] ?? true
+    );
+    $pipeline->addStage($stage);
+    $mgr->save();
+
+    return $pipeline->toArray();
+}
+
+function handleGetQueue(): array
+{
+    $queue = new \VideoConverter\Queue\JobQueue();
+    return ['queue' => $queue->getQueue(), 'stats' => $queue->getStats()];
+}
+
+function handleEnqueue(array $input): array
+{
+    $queue = new \VideoConverter\Queue\JobQueue();
+    $queueId = $queue->enqueue($input);
+    return ['queue_id' => $queueId, 'position' => count($queue->getWaiting())];
+}
+
+function handleClearQueue(): array
+{
+    $queue = new \VideoConverter\Queue\JobQueue();
+    $cleared = $queue->clear();
+    return ['cleared' => $cleared];
+}
+
+function handleGetFormats(): array
+{
+    $config = require __DIR__ . '/../config/app.php';
+    return $config['formats'];
+}
+
+function handleGetPresets(): array
+{
+    $config = require __DIR__ . '/../config/app.php';
+    return $config['presets'];
+}
+
+function handleGetResolutions(): array
+{
+    $config = require __DIR__ . '/../config/app.php';
+    return $config['resolutions'];
+}
+
+function handleProbe(array $input): array
+{
+    $probe = new \VideoConverter\Process\MediaProbe();
+    return $probe->analyze($input['file'] ?? '');
+}
+
+function handleDownload(string $id): array
+{
+    $converter = new \VideoConverter\Format\FormatConverter();
+    $job = $converter->getJob($id);
+    if (!$job || !isset($job['output_file']) || !file_exists($job['output_file'])) {
+        return ['error' => 'File not found', 'status' => 404];
+    }
+
+    header('Content-Type: application/octet-stream');
+    header('Content-Disposition: attachment; filename="' . basename($job['output_file']) . '"');
+    header('Content-Length: ' . filesize($job['output_file']));
+    readfile($job['output_file']);
+    exit;
+}
@@ -0,0 +1,828 @@
+/**
+ * Video Converter Suite - Control Panel JavaScript
+ * Nuclear Power Plant Style UI Controller
+ */
+
+// ============ STATE ============
+const state = {
+    currentPage: 'dashboard',
+    selectedFormat: 'mp4',
+    selectedPreset: 'balanced',
+    selectedResolution: 'original',
+    uploadedFile: null,
+    uploadedFilePath: null,
+    jobs: [],
+    streams: [],
+    pipelines: [],
+    activePipelineId: null,
+    pipelineStages: [],
+    activeStreamId: null,
+    wsConnected: false,
+    refreshInterval: null,
+};
+
+// ============ INIT ============
+document.addEventListener('DOMContentLoaded', () => {
+    initClock();
+    initNavigation();
+    initUploadZone();
+    startAutoRefresh();
+    refreshStatus();
+    addLog('System initialisiert', 'info');
+});
+
+// ============ CLOCK ============
+function initClock() {
+    const el = document.getElementById('systemClock');
+    function update() {
+        const now = new Date();
+        el.textContent = now.toTimeString().split(' ')[0];
+    }
+    update();
+    setInterval(update, 1000);
+}
+
+// ============ NAVIGATION ============
+function initNavigation() {
+    document.querySelectorAll('.nav-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            const page = tab.dataset.page;
+            switchPage(page);
+        });
+    });
+}
+
+function switchPage(page) {
+    state.currentPage = page;
+    document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+    document.querySelector(`.nav-tab[data-page="${page}"]`)?.classList.add('active');
+    document.querySelectorAll('.page-content').forEach(p => p.style.display = 'none');
+    document.getElementById(`page-${page}`).style.display = '';
+
+    // Refresh page-specific data
+    if (page === 'dashboard') refreshStatus();
+    if (page === 'streams') refreshStreams();
+    if (page === 'pipelines') refreshPipelines();
+    if (page === 'queue') refreshQueue();
+}
+
+// ============ UPLOAD ============
+function initUploadZone() {
+    const zone = document.getElementById('uploadZone');
+    if (!zone) return;
+
+    zone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        zone.classList.add('dragover');
+    });
+
+    zone.addEventListener('dragleave', () => {
+        zone.classList.remove('dragover');
+    });
+
+    zone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        zone.classList.remove('dragover');
+        if (e.dataTransfer.files.length > 0) {
+            uploadFile(e.dataTransfer.files[0]);
+        }
+    });
+}
+
+function handleFileSelect(event) {
+    if (event.target.files.length > 0) {
+        uploadFile(event.target.files[0]);
+    }
+}
+
+async function uploadFile(file) {
+    state.uploadedFile = file;
+    addLog(`Upload gestartet: ${file.name} (${formatBytes(file.size)})`, 'info');
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+        const resp = await fetch('/api/upload', {
+            method: 'POST',
+            body: formData,
+        });
+        const data = await resp.json();
+
+        if (data.error) {
+            addLog(`Upload-Fehler: ${data.error}`, 'error');
+            notify('Upload fehlgeschlagen: ' + data.error, 'error');
+            return;
+        }
+
+        state.uploadedFilePath = data.path;
+        displayUploadedFile(data);
+        document.getElementById('btnStartConvert').disabled = false;
+        addLog(`Upload abgeschlossen: ${file.name}`, 'success');
+        notify('Datei hochgeladen: ' + file.name, 'success');
+    } catch (err) {
+        addLog(`Upload-Fehler: ${err.message}`, 'error');
+        notify('Upload fehlgeschlagen', 'error');
+    }
+}
+
+function displayUploadedFile(data) {
+    const el = document.getElementById('uploadedFileInfo');
+    el.style.display = 'block';
+
+    const info = data.info || {};
+    const video = info.video || {};
+    const audio = info.audio || {};
+
+    el.innerHTML = `
+        <div style="background:var(--bg-inset); border:1px solid var(--border-dark); border-radius:4px; padding:12px;">
+            <div style="display:flex; justify-content:space-between; margin-bottom:8px;">
+                <strong style="color:var(--accent-cyan);">${data.original_name}</strong>
+                <span style="color:var(--text-dim); font-size:11px;">${formatBytes(data.size)}</span>
+            </div>
+            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:8px; font-size:11px;">
+                <div><span style="color:var(--text-dim)">Format:</span> ${info.format_name || 'N/A'}</div>
+                <div><span style="color:var(--text-dim)">Dauer:</span> ${formatDuration(info.duration || 0)}</div>
+                ${video ? `
+                <div><span style="color:var(--text-dim)">Video:</span> ${video.codec || 'N/A'} ${video.width || ''}x${video.height || ''}</div>
+                <div><span style="color:var(--text-dim)">FPS:</span> ${video.fps || 'N/A'}</div>
+                ` : ''}
+                ${audio ? `
+                <div><span style="color:var(--text-dim)">Audio:</span> ${audio.codec || 'N/A'}</div>
+                <div><span style="color:var(--text-dim)">Sample:</span> ${audio.sample_rate || 'N/A'} Hz</div>
+                ` : ''}
+            </div>
+        </div>
+    `;
+}
+
+// ============ FORMAT SELECTION ============
+function selectFormat(format) {
+    state.selectedFormat = format;
+    document.querySelectorAll('.format-switch').forEach(s => s.classList.remove('selected'));
+    document.querySelectorAll(`.format-switch[data-format="${format}"]`).forEach(s => s.classList.add('selected'));
+    addLog(`Format gewählt: ${format.toUpperCase()}`, 'info');
+}
+
+function selectPreset(preset) {
+    state.selectedPreset = preset;
+    document.querySelectorAll('#presetPanel .switch-unit').forEach(s => s.classList.remove('active'));
+    document.querySelector(`#presetPanel .switch-unit[data-preset="${preset}"]`)?.classList.add('active');
+}
+
+function selectResolution(res) {
+    state.selectedResolution = res;
+    document.querySelectorAll('#resolutionPanel .switch-unit').forEach(s => s.classList.remove('active'));
+    document.querySelector(`#resolutionPanel .switch-unit[data-resolution="${res}"]`)?.classList.add('active');
+}
+
+// ============ CONVERSION ============
+async function startConversion() {
+    if (!state.uploadedFilePath) {
+        notify('Keine Datei hochgeladen', 'warning');
+        return;
+    }
+
+    const params = {
+        input_file: state.uploadedFilePath,
+        output_format: state.selectedFormat,
+        preset: state.selectedPreset,
+    };
+
+    if (state.selectedResolution !== 'original') {
+        params.resolution = state.selectedResolution;
+    }
+
+    addLog(`Konvertierung gestartet: ${state.selectedFormat.toUpperCase()} / ${state.selectedPreset}`, 'info');
+    document.getElementById('conversionStatus').textContent = 'Konvertierung wird gestartet...';
+
+    try {
+        const resp = await fetch('/api/convert', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(params),
+        });
+        const data = await resp.json();
+
+        if (data.error) {
+            addLog(`Fehler: ${data.error}`, 'error');
+            notify(data.error, 'error');
+            return;
+        }
+
+        addLog(`Job erstellt: ${data.id}`, 'success');
+        notify('Konvertierung gestartet', 'success');
+        document.getElementById('btnStopAll').style.display = '';
+        document.getElementById('conversionStatus').textContent = `Job ${data.id} läuft...`;
+        startJobPolling(data.id);
+
+    } catch (err) {
+        addLog(`Fehler: ${err.message}`, 'error');
+        notify('Konvertierung fehlgeschlagen', 'error');
+    }
+}
+
+function startJobPolling(jobId) {
+    const poll = setInterval(async () => {
+        try {
+            const resp = await fetch(`/api/jobs/${jobId}/progress`);
+            const progress = await resp.json();
+
+            document.getElementById('conversionStatus').textContent =
+                `${progress.percent || 0}% | FPS: ${progress.fps || 0} | Speed: ${progress.speed || '0x'} | Zeit: ${progress.time || '00:00:00'}`;
+
+            updateJobInList(jobId, progress);
+
+            if (progress.percent >= 100) {
+                clearInterval(poll);
+                addLog(`Job ${jobId} abgeschlossen`, 'success');
+                notify('Konvertierung abgeschlossen!', 'success');
+                document.getElementById('conversionStatus').textContent = 'Konvertierung abgeschlossen!';
+                refreshJobs();
+            }
+        } catch (e) {
+            // Keep polling
+        }
+    }, 1000);
+}
+
+async function stopAllJobs() {
+    if (!confirm('Alle laufenden Jobs stoppen?')) return;
+
+    try {
+        const resp = await fetch('/api/jobs');
+        const data = await resp.json();
+        for (const job of (data.jobs || [])) {
+            if (job.status === 'running') {
+                await fetch(`/api/jobs/${job.id}/cancel`, { method: 'POST' });
+                addLog(`Job ${job.id} gestoppt`, 'warn');
+            }
+        }
+        notify('Alle Jobs gestoppt', 'warning');
+        document.getElementById('btnStopAll').style.display = 'none';
+        refreshJobs();
+    } catch (e) {
+        notify('Fehler beim Stoppen', 'error');
+    }
+}
+
+// ============ JOBS ============
+async function refreshJobs() {
+    try {
+        const resp = await fetch('/api/jobs');
+        const data = await resp.json();
+        state.jobs = data.jobs || [];
+        renderJobList();
+    } catch (e) {
+        // Silently fail
+    }
+}
+
+function renderJobList() {
+    const el = document.getElementById('jobList');
+    if (!state.jobs.length) {
+        el.innerHTML = '<div style="text-align:center; color:var(--text-dim); padding:20px;">Keine aktiven Jobs</div>';
+        return;
+    }
+
+    el.innerHTML = state.jobs.map(job => `
+        <div class="job-item" id="job-${job.id}">
+            <div class="job-thumb">${job.thumbnail ? `<img src="${job.thumbnail}">` : '&#127910;'}</div>
+            <div class="job-info">
+                <div class="job-name">${job.input_file ? job.input_file.split('/').pop() : 'Unknown'}</div>
+                <div class="job-meta">
+                    ${job.output_format?.toUpperCase() || ''} | ${job.preset || ''} | ${job.resolution || 'Original'}
+                </div>
+                <div class="progress-bar" style="margin-top:6px;">
+                    <div class="progress-fill" id="progress-${job.id}" style="width:${job.status === 'completed' ? 100 : 0}%"></div>
+                </div>
+                <div class="progress-label">
+                    <span id="progress-text-${job.id}">${job.status === 'completed' ? '100%' : '0%'}</span>
+                    <span id="progress-speed-${job.id}"></span>
+                </div>
+            </div>
+            <span class="job-status ${job.status}">${job.status}</span>
+            <div class="job-actions">
+                ${job.status === 'running' ? `<button class="btn btn-icon btn-danger" onclick="cancelJob('${job.id}')" data-tooltip="Stop">&#9632;</button>` : ''}
+                ${job.status === 'completed' ? `<button class="btn btn-icon btn-success" onclick="downloadJob('${job.id}')" data-tooltip="Download">&#8681;</button>` : ''}
+                <button class="btn btn-icon btn-danger" onclick="deleteJob('${job.id}')" data-tooltip="Löschen">&#10005;</button>
+            </div>
+        </div>
+    `).join('');
+
+    // Update active job count
+    const running = state.jobs.filter(j => j.status === 'running').length;
+    document.getElementById('activeJobCount').textContent = running;
+    document.getElementById('gaugeJobs').textContent = running;
+}
+
+function updateJobInList(jobId, progress) {
+    const bar = document.getElementById(`progress-${jobId}`);
+    const text = document.getElementById(`progress-text-${jobId}`);
+    const speed = document.getElementById(`progress-speed-${jobId}`);
+    if (bar) bar.style.width = `${progress.percent || 0}%`;
+    if (text) text.textContent = `${progress.percent || 0}%`;
+    if (speed) speed.textContent = `${progress.fps || 0} fps | ${progress.speed || ''}`;
+}
+
+async function cancelJob(id) {
+    await fetch(`/api/jobs/${id}/cancel`, { method: 'POST' });
+    addLog(`Job ${id} abgebrochen`, 'warn');
+    refreshJobs();
+}
+
+async function deleteJob(id) {
+    await fetch(`/api/jobs/${id}`, { method: 'DELETE' });
+    addLog(`Job ${id} gelöscht`, 'info');
+    refreshJobs();
+}
+
+function downloadJob(id) {
+    window.open(`/api/download/${id}`, '_blank');
+}
+
+// ============ STREAMS ============
+async function refreshStreams() {
+    try {
+        const resp = await fetch('/api/streams');
+        const data = await resp.json();
+        state.streams = data.streams || [];
+        renderStreamMatrix();
+        updateStreamSelect();
+    } catch (e) {}
+}
+
+function renderStreamMatrix() {
+    const el = document.getElementById('streamMatrix');
+    if (!state.streams.length) {
+        el.innerHTML = '<div style="text-align:center; color:var(--text-dim); padding:40px; grid-column:1/-1;">Keine aktiven Streams</div>';
+        return;
+    }
+
+    el.innerHTML = state.streams.map(s => `
+        <div class="stream-card">
+            <div class="stream-preview">
+                <span class="no-signal">${s.status === 'running' ? '&#9654; LIVE' : 'NO SIGNAL'}</span>
+                ${s.status === 'running' ? '<span class="live-badge">LIVE</span>' : ''}
+            </div>
+            <div class="stream-info">
+                <div class="stream-name">${s.input_url || 'Stream'}</div>
+                <div style="font-size:10px; color:var(--text-dim);">
+                    ${s.output_format?.toUpperCase() || ''} | ${s.resolution || 'Original'} | ${s.preset || 'fast'}
+                </div>
+                <span class="job-status ${s.status}" style="margin-top:6px; display:inline-block;">${s.status}</span>
+            </div>
+            <div class="stream-controls">
+                ${s.status === 'running' ?
+                    `<button class="btn btn-danger" onclick="stopStream('${s.id}')">&#9632; Stop</button>` :
+                    `<button class="btn btn-success" onclick="restartStream('${s.id}')">&#9654; Restart</button>`
+                }
+                <button class="btn" onclick="deleteStream('${s.id}')">&#10005;</button>
+            </div>
+        </div>
+    `).join('');
+}
+
+function updateStreamSelect() {
+    const sel = document.getElementById('activeStreamSelect');
+    const runningStreams = state.streams.filter(s => s.status === 'running');
+    sel.innerHTML = '<option value="">-- Stream wählen --</option>' +
+        runningStreams.map(s =>
+            `<option value="${s.id}">${s.input_url} (${s.output_format?.toUpperCase()})</option>`
+        ).join('');
+}
+
+function openStreamModal() {
+    document.getElementById('streamModal').classList.add('visible');
+}
+
+function closeStreamModal() {
+    document.getElementById('streamModal').classList.remove('visible');
+}
+
+async function startNewStream() {
+    const inputUrl = document.getElementById('streamInputUrl').value;
+    if (!inputUrl) {
+        notify('Bitte Stream-URL eingeben', 'warning');
+        return;
+    }
+
+    const params = {
+        input_url: inputUrl,
+        output_format: document.getElementById('streamOutputFormat').value,
+        resolution: document.getElementById('streamResolution').value || null,
+        preset: document.getElementById('streamPreset').value,
+    };
+
+    try {
+        const resp = await fetch('/api/streams', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(params),
+        });
+        const data = await resp.json();
+
+        if (data.error) {
+            notify(data.error, 'error');
+            return;
+        }
+
+        addLog(`Stream gestartet: ${data.id}`, 'success');
+        notify('Stream gestartet', 'success');
+        closeStreamModal();
+        refreshStreams();
+    } catch (e) {
+        notify('Stream-Start fehlgeschlagen', 'error');
+    }
+}
+
+async function stopStream(id) {
+    await fetch(`/api/streams/${id}`, { method: 'DELETE' });
+    addLog(`Stream ${id} gestoppt`, 'warn');
+    refreshStreams();
+}
+
+async function deleteStream(id) {
+    await fetch(`/api/streams/${id}`, { method: 'DELETE' });
+    refreshStreams();
+}
+
+function selectActiveStream(id) {
+    state.activeStreamId = id;
+    // Highlight current format
+    const stream = state.streams.find(s => s.id === id);
+    document.querySelectorAll('[data-stream-format]').forEach(el => el.classList.remove('selected'));
+    if (stream) {
+        document.querySelector(`[data-stream-format="${stream.output_format}"]`)?.classList.add('selected');
+    }
+}
+
+async function switchStreamFormat(format) {
+    if (!state.activeStreamId) {
+        notify('Bitte zuerst einen Stream wählen', 'warning');
+        return;
+    }
+
+    addLog(`Format-Wechsel: ${format.toUpperCase()} für Stream ${state.activeStreamId}`, 'warn');
+
+    try {
+        const resp = await fetch(`/api/streams/${state.activeStreamId}/switch`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ format }),
+        });
+        const data = await resp.json();
+
+        if (data.error) {
+            notify(data.error, 'error');
+            return;
+        }
+
+        addLog(`Format gewechselt zu ${format.toUpperCase()}`, 'success');
+        notify(`Format umgeschaltet: ${format.toUpperCase()}`, 'success');
+
+        // Update active stream ID to new stream
+        state.activeStreamId = data.id;
+        refreshStreams();
+
+        // Highlight new format
+        document.querySelectorAll('[data-stream-format]').forEach(el => el.classList.remove('selected'));
+        document.querySelector(`[data-stream-format="${format}"]`)?.classList.add('selected');
+    } catch (e) {
+        notify('Format-Wechsel fehlgeschlagen', 'error');
+    }
+}
+
+// ============ PIPELINES ============
+async function refreshPipelines() {
+    try {
+        const resp = await fetch('/api/pipelines');
+        const data = await resp.json();
+        state.pipelines = data.pipelines || [];
+        renderPipelineList();
+    } catch (e) {}
+}
+
+function renderPipelineList() {
+    const el = document.getElementById('pipelineList');
+    if (!state.pipelines.length) {
+        el.innerHTML = '<div style="text-align:center; color:var(--text-dim); padding:16px;">Keine Pipelines vorhanden</div>';
+        return;
+    }
+
+    el.innerHTML = state.pipelines.map(p => `
+        <div class="job-item" style="cursor:pointer" onclick="editPipeline('${p.id}')">
+            <div class="job-thumb" style="font-size:24px">&#9776;</div>
+            <div class="job-info">
+                <div class="job-name">${p.name}</div>
+                <div class="job-meta">${(p.stages || []).length} Stufen | Status: ${p.status}</div>
+            </div>
+            <span class="job-status ${p.status}">${p.status}</span>
+            <div class="job-actions">
+                <button class="btn btn-icon btn-primary" onclick="event.stopPropagation(); runPipeline('${p.id}')" data-tooltip="Ausführen">&#9654;</button>
+                <button class="btn btn-icon btn-danger" onclick="event.stopPropagation(); deletePipeline('${p.id}')" data-tooltip="Löschen">&#10005;</button>
+            </div>
+        </div>
+    `).join('');
+}
+
+async function createPipeline() {
+    const name = prompt('Pipeline-Name:', 'Neue Pipeline');
+    if (!name) return;
+
+    try {
+        const resp = await fetch('/api/pipelines', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name }),
+        });
+        const data = await resp.json();
+        addLog(`Pipeline erstellt: ${data.name}`, 'success');
+        refreshPipelines();
+        editPipeline(data.id);
+    } catch (e) {
+        notify('Pipeline-Erstellung fehlgeschlagen', 'error');
+    }
+}
+
+function editPipeline(id) {
+    state.activePipelineId = id;
+    const pipeline = state.pipelines.find(p => p.id === id);
+    if (!pipeline) return;
+
+    state.pipelineStages = pipeline.stages || [];
+    document.getElementById('pipelineEditor').style.display = '';
+    renderPipelineFlow();
+}
+
+function renderPipelineFlow() {
+    const flow = document.getElementById('pipelineFlow');
+    let html = `
+        <div class="pipeline-node active">
+            <div class="node-type">Input</div>
+            <div class="node-name">Source</div>
+            <div class="node-status"></div>
+        </div>
+    `;
+
+    state.pipelineStages.forEach((stage, i) => {
+        html += `<div class="pipeline-connector ${stage.enabled ? 'active' : ''}"></div>`;
+        html += `
+            <div class="pipeline-node ${stage.enabled ? 'active' : 'disabled'}" onclick="toggleStage(${i})">
+                <div class="node-type">${stage.type}</div>
+                <div class="node-name">${stage.label || stage.type}</div>
+                <div class="node-status"></div>
+            </div>
+        `;
+    });
+
+    html += `<div class="pipeline-connector active"></div>`;
+    html += `
+        <div class="pipeline-node active">
+            <div class="node-type">Output</div>
+            <div class="node-name">Target</div>
+            <div class="node-status"></div>
+        </div>
+    `;
+
+    flow.innerHTML = html;
+}
+
+function toggleStage(index) {
+    if (state.pipelineStages[index]) {
+        state.pipelineStages[index].enabled = !state.pipelineStages[index].enabled;
+        renderPipelineFlow();
+        savePipelineStages();
+    }
+}
+
+async function addPipelineStage(type) {
+    if (!state.activePipelineId) {
+        notify('Bitte zuerst eine Pipeline auswählen oder erstellen', 'warning');
+        return;
+    }
+
+    const stageDefaults = {
+        transcode: { params: { video_codec: 'libx264', preset: 'medium', crf: 23 } },
+        scale: { params: { width: 1920, height: 1080 } },
+        filter: { params: { brightness: 0, contrast: 1, saturation: 1 } },
+        audio: { params: { codec: 'aac', bitrate: '128k', sample_rate: 44100 } },
+        bitrate: { params: { video: '2M', audio: '128k' } },
+        framerate: { params: { fps: 30 } },
+        trim: { params: { start: '00:00:00', duration: '' } },
+        deinterlace: { params: {} },
+        denoise: { params: {} },
+        stabilize: { params: {} },
+    };
+
+    const defaults = stageDefaults[type] || { params: {} };
+    const stage = {
+        type,
+        label: type.charAt(0).toUpperCase() + type.slice(1),
+        params: defaults.params,
+        enabled: true,
+    };
+
+    state.pipelineStages.push(stage);
+    renderPipelineFlow();
+    await savePipelineStages();
+    addLog(`Stufe hinzugefügt: ${type}`, 'info');
+}
+
+async function savePipelineStages() {
+    if (!state.activePipelineId) return;
+
+    try {
+        await fetch(`/api/pipelines/${state.activePipelineId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ stages: state.pipelineStages }),
+        });
+    } catch (e) {
+        console.error('Failed to save pipeline stages');
+    }
+}
+
+async function deletePipeline(id) {
+    if (!confirm('Pipeline löschen?')) return;
+    await fetch(`/api/pipelines/${id}`, { method: 'DELETE' });
+    if (state.activePipelineId === id) {
+        state.activePipelineId = null;
+        document.getElementById('pipelineEditor').style.display = 'none';
+    }
+    refreshPipelines();
+}
+
+async function runPipeline(id) {
+    if (!state.uploadedFilePath) {
+        notify('Bitte zuerst eine Datei hochladen (Konverter-Seite)', 'warning');
+        return;
+    }
+
+    try {
+        const resp = await fetch(`/api/pipelines/${id}/run`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                input_file: state.uploadedFilePath,
+                output_format: state.selectedFormat,
+            }),
+        });
+        const data = await resp.json();
+        if (data.error) {
+            notify(data.error, 'error');
+            return;
+        }
+        addLog(`Pipeline ${id} ausgeführt, Job: ${data.id}`, 'success');
+        notify('Pipeline gestartet', 'success');
+        startJobPolling(data.id);
+    } catch (e) {
+        notify('Pipeline-Start fehlgeschlagen', 'error');
+    }
+}
+
+// ============ QUEUE ============
+async function refreshQueue() {
+    try {
+        const resp = await fetch('/api/queue');
+        const data = await resp.json();
+        renderQueue(data.queue || [], data.stats || {});
+    } catch (e) {}
+}
+
+function renderQueue(queue, stats) {
+    const el = document.getElementById('queueList');
+    if (!queue.length) {
+        el.innerHTML = '<div style="text-align:center; color:var(--text-dim); padding:20px;">Warteschlange ist leer</div>';
+    } else {
+        el.innerHTML = queue.map(job => `
+            <div class="job-item">
+                <div class="job-thumb">&#128196;</div>
+                <div class="job-info">
+                    <div class="job-name">${job.input_file || job.queue_id}</div>
+                    <div class="job-meta">Priorität: ${job.priority || 5} | ${job.output_format || 'mp4'}</div>
+                </div>
+                <span class="job-status ${job.queue_status === 'waiting' ? 'queued' : job.queue_status}">${job.queue_status}</span>
+            </div>
+        `).join('');
+    }
+
+    document.getElementById('queueWaiting').textContent = stats.waiting || 0;
+    document.getElementById('queueProcessing').textContent = stats.processing || 0;
+    document.getElementById('queueCompleted').textContent = stats.completed || 0;
+    document.getElementById('queueFailed').textContent = stats.failed || 0;
+}
+
+async function clearQueue() {
+    await fetch('/api/queue', { method: 'DELETE' });
+    refreshQueue();
+    notify('Queue geleert', 'info');
+}
+
+// ============ STATUS / SYSTEM ============
+async function refreshStatus() {
+    try {
+        const resp = await fetch('/api/system');
+        const data = await resp.json();
+        updateGauges(data);
+        refreshJobs();
+    } catch (e) {
+        document.getElementById('systemStatusDot').className = 'status-dot error';
+        document.getElementById('systemStatusText').textContent = 'OFFLINE';
+    }
+}
+
+function updateGauges(data) {
+    // CPU
+    const cpuLoad = data.cpu_load?.[0] || 0;
+    const cpuPercent = Math.min(100, cpuLoad * 25); // Normalize to ~100% at load 4
+    document.getElementById('gaugeCpu').textContent = cpuLoad.toFixed(1);
+    const cpuBar = document.getElementById('gaugeCpuBar');
+    cpuBar.style.width = cpuPercent + '%';
+    cpuBar.className = 'gauge-bar-fill' + (cpuPercent > 80 ? ' danger' : cpuPercent > 50 ? ' warning' : '');
+
+    // Memory
+    const mem = data.memory || {};
+    const memPercent = mem.peak ? Math.round((mem.used / mem.peak) * 100) : 0;
+    document.getElementById('gaugeMem').textContent = memPercent;
+    const memBar = document.getElementById('gaugeMemBar');
+    memBar.style.width = memPercent + '%';
+    memBar.className = 'gauge-bar-fill' + (memPercent > 80 ? ' danger' : memPercent > 50 ? ' warning' : '');
+
+    // Disk
+    const diskFree = (data.disk?.free || 0) / (1024 * 1024 * 1024);
+    const diskTotal = (data.disk?.total || 1) / (1024 * 1024 * 1024);
+    const diskUsedPercent = Math.round(((diskTotal - diskFree) / diskTotal) * 100);
+    document.getElementById('gaugeDisk').textContent = diskFree.toFixed(1);
+    const diskBar = document.getElementById('gaugeDiskBar');
+    diskBar.style.width = diskUsedPercent + '%';
+    diskBar.className = 'gauge-bar-fill' + (diskUsedPercent > 90 ? ' danger' : diskUsedPercent > 70 ? ' warning' : '');
+
+    // Status
+    document.getElementById('systemStatusDot').className = 'status-dot';
+    document.getElementById('systemStatusText').textContent = data.ffmpeg_available ? 'SYSTEM ONLINE' : 'FFMPEG MISSING';
+    if (!data.ffmpeg_available) {
+        document.getElementById('systemStatusDot').className = 'status-dot warning';
+    }
+}
+
+function startAutoRefresh() {
+    if (state.refreshInterval) clearInterval(state.refreshInterval);
+    state.refreshInterval = setInterval(() => {
+        if (state.currentPage === 'dashboard') refreshStatus();
+        if (state.currentPage === 'streams') refreshStreams();
+    }, 5000);
+}
+
+// ============ LOGGING ============
+function addLog(message, level = 'info') {
+    const console = document.getElementById('logConsole');
+    const time = new Date().toLocaleTimeString();
+    const line = document.createElement('div');
+    line.className = `log-line ${level}`;
+    line.innerHTML = `<span class="log-time">[${time}]</span> ${escapeHtml(message)}`;
+    console.appendChild(line);
+    console.scrollTop = console.scrollHeight;
+
+    // Keep max 100 lines
+    while (console.children.length > 100) {
+        console.removeChild(console.firstChild);
+    }
+}
+
+function clearLog() {
+    document.getElementById('logConsole').innerHTML =
+        '<div class="log-line info"><span class="log-time">[CLEAR]</span> Log bereinigt</div>';
+}
+
+// ============ NOTIFICATIONS ============
+function notify(message, type = 'info') {
+    const el = document.getElementById('notification');
+    el.className = `notification ${type} show`;
+    el.textContent = message;
+    setTimeout(() => { el.classList.remove('show'); }, 3000);
+}
+
+// ============ HELPERS ============
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let i = 0, size = bytes;
+    while (size >= 1024 && i < units.length - 1) { size /= 1024; i++; }
+    return size.toFixed(1) + ' ' + units[i];
+}
+
+function formatDuration(seconds) {
+    if (!seconds) return '0:00';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+    return `${m}:${String(s).padStart(2, '0')}`;
+}
+
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * Video Converter Suite - Front Controller / Router
+ *
+ * Usage: php -S 0.0.0.0:8080 -t public public/router.php
+ */
+
+// Serve static files directly
+$uri = urldecode(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH));
+if ($uri !== '/' && file_exists(__DIR__ . $uri)) {
+    return false;
+}
+
+require_once __DIR__ . '/api.php';
@@ -0,0 +1,282 @@
+<?php
+
+namespace VideoConverter\Format;
+
+use VideoConverter\Process\FFmpegProcess;
+use VideoConverter\Process\MediaProbe;
+use VideoConverter\Pipeline\Pipeline;
+
+class FormatConverter
+{
+    private array $jobs = [];
+    private string $stateFile;
+    private MediaProbe $probe;
+
+    public function __construct()
+    {
+        $this->stateFile = __DIR__ . '/../../storage/temp/jobs.json';
+        $this->probe = new MediaProbe();
+        $this->load();
+    }
+
+    private function load(): void
+    {
+        if (file_exists($this->stateFile)) {
+            $this->jobs = json_decode(file_get_contents($this->stateFile), true) ?: [];
+        }
+    }
+
+    private function save(): void
+    {
+        $dir = dirname($this->stateFile);
+        if (!is_dir($dir)) mkdir($dir, 0755, true);
+        file_put_contents($this->stateFile, json_encode($this->jobs, JSON_PRETTY_PRINT));
+    }
+
+    public function convert(array $params): array
+    {
+        $config = require __DIR__ . '/../../config/app.php';
+
+        $inputFile = $params['input_file'] ?? '';
+        $outputFormat = $params['output_format'] ?? 'mp4';
+        $preset = $params['preset'] ?? 'balanced';
+        $resolution = $params['resolution'] ?? null;
+        $customPipeline = $params['pipeline'] ?? null;
+
+        if (!file_exists($inputFile)) {
+            return ['error' => 'Input file not found'];
+        }
+
+        $id = bin2hex(random_bytes(8));
+        $formatConfig = $config['formats']['video'][$outputFormat]
+            ?? $config['formats']['audio'][$outputFormat]
+            ?? null;
+
+        if (!$formatConfig) {
+            return ['error' => "Unknown format: {$outputFormat}"];
+        }
+
+        $inputInfo = $this->probe->analyze($inputFile);
+        $baseName = pathinfo($inputFile, PATHINFO_FILENAME);
+        $outputFile = $config['storage']['outputs'] . "/{$baseName}_{$id}.{$formatConfig['ext']}";
+
+        // Build command
+        if ($customPipeline instanceof Pipeline) {
+            $cmd = $customPipeline->buildFFmpegCommand($inputFile, $outputFile);
+        } else {
+            $cmd = $this->buildCommand($inputFile, $outputFile, $outputFormat, $preset, $resolution, $params);
+        }
+
+        $process = new FFmpegProcess($cmd, $id);
+        if (isset($inputInfo['duration'])) {
+            $process->setDuration($inputInfo['duration']);
+        }
+
+        // Generate thumbnail
+        $thumbPath = $config['storage']['thumbnails'] . "/{$id}.jpg";
+        $this->probe->getThumbnail($inputFile, $thumbPath);
+
+        $job = [
+            'id' => $id,
+            'input_file' => $inputFile,
+            'input_info' => $inputInfo,
+            'output_file' => $outputFile,
+            'output_format' => $outputFormat,
+            'preset' => $preset,
+            'resolution' => $resolution,
+            'thumbnail' => file_exists($thumbPath) ? $thumbPath : null,
+            'status' => 'starting',
+            'pid' => null,
+            'command' => $cmd,
+            'created_at' => date('c'),
+        ];
+
+        if ($process->start()) {
+            $job['status'] = 'running';
+            $job['pid'] = $process->getPid();
+        } else {
+            $job['status'] = 'error';
+            $job['error'] = 'Failed to start FFmpeg process';
+        }
+
+        $this->jobs[$id] = $job;
+        $this->save();
+
+        return $job;
+    }
+
+    public function batchConvert(string $inputFile, array $formats): array
+    {
+        $results = [];
+        foreach ($formats as $format => $settings) {
+            $params = array_merge(
+                ['input_file' => $inputFile, 'output_format' => $format],
+                $settings
+            );
+            $results[$format] = $this->convert($params);
+        }
+        return $results;
+    }
+
+    public function getJob(string $id): ?array
+    {
+        $this->refreshJob($id);
+        return $this->jobs[$id] ?? null;
+    }
+
+    public function getAllJobs(): array
+    {
+        foreach (array_keys($this->jobs) as $id) {
+            $this->refreshJob($id);
+        }
+        return array_values($this->jobs);
+    }
+
+    public function cancelJob(string $id): bool
+    {
+        if (!isset($this->jobs[$id])) return false;
+
+        $job = $this->jobs[$id];
+        if ($job['pid'] && $job['status'] === 'running') {
+            posix_kill($job['pid'], SIGTERM);
+            $this->jobs[$id]['status'] = 'cancelled';
+            $this->save();
+            return true;
+        }
+        return false;
+    }
+
+    public function deleteJob(string $id): bool
+    {
+        if (isset($this->jobs[$id])) {
+            $this->cancelJob($id);
+            // Clean up output file
+            if (isset($this->jobs[$id]['output_file']) && file_exists($this->jobs[$id]['output_file'])) {
+                unlink($this->jobs[$id]['output_file']);
+            }
+            unset($this->jobs[$id]);
+            $this->save();
+            return true;
+        }
+        return false;
+    }
+
+    public function getProgress(string $id): array
+    {
+        if (!isset($this->jobs[$id])) {
+            return ['error' => 'Job not found'];
+        }
+
+        $config = require __DIR__ . '/../../config/app.php';
+        $progressFile = $config['storage']['logs'] . "/progress_{$id}.txt";
+
+        $progress = ['percent' => 0, 'fps' => 0, 'speed' => '0x', 'time' => '00:00:00'];
+
+        if (file_exists($progressFile)) {
+            $content = file_get_contents($progressFile);
+            foreach (explode("\n", $content) as $line) {
+                if (str_contains($line, '=')) {
+                    [$key, $val] = explode('=', $line, 2);
+                    $key = trim($key);
+                    $val = trim($val);
+                    if ($key === 'out_time') $progress['time'] = $val;
+                    if ($key === 'fps') $progress['fps'] = (float)$val;
+                    if ($key === 'speed') $progress['speed'] = $val;
+                    if ($key === 'progress' && $val === 'end') $progress['percent'] = 100;
+                }
+            }
+
+            $duration = $this->jobs[$id]['input_info']['duration'] ?? 0;
+            if ($duration > 0 && $progress['percent'] < 100) {
+                $current = $this->timeToSeconds($progress['time']);
+                $progress['percent'] = min(99, round(($current / $duration) * 100, 1));
+            }
+        }
+
+        return $progress;
+    }
+
+    private function refreshJob(string $id): void
+    {
+        if (!isset($this->jobs[$id])) return;
+        $job = &$this->jobs[$id];
+
+        if ($job['status'] === 'running' && $job['pid']) {
+            if (!posix_kill($job['pid'], 0)) {
+                // Check if output file exists and has size
+                if (isset($job['output_file']) && file_exists($job['output_file']) && filesize($job['output_file']) > 0) {
+                    $job['status'] = 'completed';
+                    $job['completed_at'] = date('c');
+                    $job['output_size'] = filesize($job['output_file']);
+                } else {
+                    $job['status'] = 'error';
+                    $job['error'] = 'Process ended without output';
+                }
+                $this->save();
+            }
+        }
+    }
+
+    private function buildCommand(string $input, string $output, string $format, string $preset, ?string $resolution, array $params): string
+    {
+        $config = require __DIR__ . '/../../config/app.php';
+        $ffmpeg = $config['ffmpeg']['binary'];
+        $formatConfig = $config['formats']['video'][$format] ?? $config['formats']['audio'][$format] ?? [];
+        $presetConfig = $config['presets'][$preset] ?? $config['presets']['balanced'];
+        $threads = $config['ffmpeg']['threads'];
+
+        $cmd = "{$ffmpeg} -y -i " . escapeshellarg($input);
+        $cmd .= " -threads {$threads}";
+
+        // Check if audio-only
+        $isAudio = isset($config['formats']['audio'][$format]);
+
+        if ($isAudio) {
+            $cmd .= " -vn";
+            $cmd .= " -c:a " . escapeshellarg($formatConfig['codec']);
+            if (isset($params['audio_bitrate'])) {
+                $cmd .= " -b:a " . escapeshellarg($params['audio_bitrate']);
+            }
+        } else {
+            $cmd .= " -c:v " . escapeshellarg($formatConfig['codec']);
+            $cmd .= " -preset " . escapeshellarg($presetConfig['preset']);
+            $cmd .= " -crf " . (int)$presetConfig['crf'];
+
+            if ($resolution && isset($config['resolutions'][$resolution])) {
+                $res = $config['resolutions'][$resolution];
+                $cmd .= " -vf scale={$res['width']}:{$res['height']}";
+            }
+
+            $cmd .= " -c:a aac -b:a 128k";
+        }
+
+        // HLS specific
+        if ($format === 'hls') {
+            $cmd .= " -hls_time 4 -hls_list_size 0 -hls_segment_filename "
+                . escapeshellarg(dirname($output) . "/segment_%03d.ts");
+        }
+
+        // DASH specific
+        if ($format === 'dash') {
+            $cmd .= " -use_timeline 1 -use_template 1 -adaptation_sets 'id=0,streams=v id=1,streams=a'";
+        }
+
+        // Extra params
+        if (isset($params['video_bitrate'])) {
+            $cmd .= " -b:v " . escapeshellarg($params['video_bitrate']);
+        }
+        if (isset($params['fps'])) {
+            $cmd .= " -r " . (int)$params['fps'];
+        }
+
+        $cmd .= " " . escapeshellarg($output);
+        return $cmd;
+    }
+
+    private function timeToSeconds(string $time): float
+    {
+        $parts = explode(':', $time);
+        if (count($parts) !== 3) return 0;
+        return (int)$parts[0] * 3600 + (int)$parts[1] * 60 + (float)$parts[2];
+    }
+}
@@ -0,0 +1,127 @@
+<?php
+
+namespace VideoConverter\Pipeline;
+
+class Pipeline
+{
+    private string $id;
+    private string $name;
+    private array $stages = [];
+    private string $status = 'idle'; // idle, running, paused, error, completed
+    private ?string $inputSource = null;
+    private array $metadata = [];
+    private float $progress = 0;
+    private ?int $pid = null;
+    private string $createdAt;
+
+    public function __construct(string $name, ?string $id = null)
+    {
+        $this->id = $id ?? bin2hex(random_bytes(8));
+        $this->name = $name;
+        $this->createdAt = date('c');
+    }
+
+    public function getId(): string { return $this->id; }
+    public function getName(): string { return $this->name; }
+    public function getStatus(): string { return $this->status; }
+    public function getProgress(): float { return $this->progress; }
+    public function getPid(): ?int { return $this->pid; }
+    public function getStages(): array { return $this->stages; }
+    public function getInputSource(): ?string { return $this->inputSource; }
+
+    public function setStatus(string $status): void { $this->status = $status; }
+    public function setProgress(float $progress): void { $this->progress = min(100, max(0, $progress)); }
+    public function setPid(?int $pid): void { $this->pid = $pid; }
+    public function setInputSource(string $source): void { $this->inputSource = $source; }
+
+    public function addStage(PipelineStage $stage): self
+    {
+        $this->stages[] = $stage;
+        return $this;
+    }
+
+    public function removeStage(int $index): self
+    {
+        if (isset($this->stages[$index])) {
+            array_splice($this->stages, $index, 1);
+        }
+        return $this;
+    }
+
+    public function insertStage(int $index, PipelineStage $stage): self
+    {
+        array_splice($this->stages, $index, 0, [$stage]);
+        return $this;
+    }
+
+    public function setMetadata(string $key, mixed $value): void
+    {
+        $this->metadata[$key] = $value;
+    }
+
+    public function getMetadata(?string $key = null): mixed
+    {
+        if ($key === null) return $this->metadata;
+        return $this->metadata[$key] ?? null;
+    }
+
+    public function buildFFmpegCommand(string $inputPath, string $outputPath): string
+    {
+        $config = require __DIR__ . '/../../config/app.php';
+        $cmd = $config['ffmpeg']['binary'];
+        $parts = ["-y -i " . escapeshellarg($inputPath)];
+
+        foreach ($this->stages as $stage) {
+            $parts[] = $stage->toFFmpegArgs();
+        }
+
+        $parts[] = escapeshellarg($outputPath);
+        return $cmd . ' ' . implode(' ', $parts);
+    }
+
+    public function buildStreamCommand(string $inputUrl, string $outputUrl): string
+    {
+        $config = require __DIR__ . '/../../config/app.php';
+        $cmd = $config['ffmpeg']['binary'];
+        $parts = ["-re -i " . escapeshellarg($inputUrl)];
+
+        foreach ($this->stages as $stage) {
+            $parts[] = $stage->toFFmpegArgs();
+        }
+
+        $parts[] = "-f flv " . escapeshellarg($outputUrl);
+        return $cmd . ' ' . implode(' ', $parts);
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'status' => $this->status,
+            'progress' => $this->progress,
+            'pid' => $this->pid,
+            'input_source' => $this->inputSource,
+            'stages' => array_map(fn(PipelineStage $s) => $s->toArray(), $this->stages),
+            'metadata' => $this->metadata,
+            'created_at' => $this->createdAt,
+        ];
+    }
+
+    public static function fromArray(array $data): self
+    {
+        $pipeline = new self($data['name'], $data['id']);
+        $pipeline->status = $data['status'] ?? 'idle';
+        $pipeline->progress = $data['progress'] ?? 0;
+        $pipeline->pid = $data['pid'] ?? null;
+        $pipeline->inputSource = $data['input_source'] ?? null;
+        $pipeline->metadata = $data['metadata'] ?? [];
+        $pipeline->createdAt = $data['created_at'] ?? date('c');
+
+        foreach (($data['stages'] ?? []) as $stageData) {
+            $pipeline->addStage(PipelineStage::fromArray($stageData));
+        }
+
+        return $pipeline;
+    }
+}
@@ -0,0 +1,89 @@
+<?php
+
+namespace VideoConverter\Pipeline;
+
+class PipelineManager
+{
+    private string $stateFile;
+    private array $pipelines = [];
+
+    public function __construct()
+    {
+        $this->stateFile = __DIR__ . '/../../storage/temp/pipelines.json';
+        $this->load();
+    }
+
+    private function load(): void
+    {
+        if (file_exists($this->stateFile)) {
+            $data = json_decode(file_get_contents($this->stateFile), true);
+            foreach (($data['pipelines'] ?? []) as $pData) {
+                $this->pipelines[$pData['id']] = Pipeline::fromArray($pData);
+            }
+        }
+    }
+
+    public function save(): void
+    {
+        $dir = dirname($this->stateFile);
+        if (!is_dir($dir)) {
+            mkdir($dir, 0755, true);
+        }
+        $data = ['pipelines' => []];
+        foreach ($this->pipelines as $pipeline) {
+            $data['pipelines'][] = $pipeline->toArray();
+        }
+        file_put_contents($this->stateFile, json_encode($data, JSON_PRETTY_PRINT));
+    }
+
+    public function create(string $name): Pipeline
+    {
+        $pipeline = new Pipeline($name);
+        $this->pipelines[$pipeline->getId()] = $pipeline;
+        $this->save();
+        return $pipeline;
+    }
+
+    public function get(string $id): ?Pipeline
+    {
+        return $this->pipelines[$id] ?? null;
+    }
+
+    public function getAll(): array
+    {
+        return $this->pipelines;
+    }
+
+    public function delete(string $id): bool
+    {
+        if (isset($this->pipelines[$id])) {
+            $pipeline = $this->pipelines[$id];
+            if ($pipeline->getStatus() === 'running' && $pipeline->getPid()) {
+                posix_kill($pipeline->getPid(), SIGTERM);
+            }
+            unset($this->pipelines[$id]);
+            $this->save();
+            return true;
+        }
+        return false;
+    }
+
+    public function getRunningCount(): int
+    {
+        $count = 0;
+        foreach ($this->pipelines as $p) {
+            if ($p->getStatus() === 'running') $count++;
+        }
+        return $count;
+    }
+
+    public function getByStatus(string $status): array
+    {
+        return array_filter($this->pipelines, fn(Pipeline $p) => $p->getStatus() === $status);
+    }
+
+    public function toArray(): array
+    {
+        return array_map(fn(Pipeline $p) => $p->toArray(), array_values($this->pipelines));
+    }
+}
@@ -0,0 +1,197 @@
+<?php
+
+namespace VideoConverter\Pipeline;
+
+class PipelineStage
+{
+    private string $id;
+    private string $type; // transcode, scale, filter, audio, watermark, trim, split
+    private array $params;
+    private bool $enabled;
+    private string $label;
+
+    public function __construct(string $type, array $params = [], string $label = '', bool $enabled = true)
+    {
+        $this->id = bin2hex(random_bytes(4));
+        $this->type = $type;
+        $this->params = $params;
+        $this->label = $label ?: ucfirst($type);
+        $this->enabled = $enabled;
+    }
+
+    public function getId(): string { return $this->id; }
+    public function getType(): string { return $this->type; }
+    public function getParams(): array { return $this->params; }
+    public function isEnabled(): bool { return $this->enabled; }
+    public function getLabel(): string { return $this->label; }
+
+    public function setEnabled(bool $enabled): void { $this->enabled = $enabled; }
+    public function setParams(array $params): void { $this->params = $params; }
+
+    public function toFFmpegArgs(): string
+    {
+        if (!$this->enabled) return '';
+
+        return match ($this->type) {
+            'transcode' => $this->buildTranscodeArgs(),
+            'scale' => $this->buildScaleArgs(),
+            'filter' => $this->buildFilterArgs(),
+            'audio' => $this->buildAudioArgs(),
+            'watermark' => $this->buildWatermarkArgs(),
+            'trim' => $this->buildTrimArgs(),
+            'bitrate' => $this->buildBitrateArgs(),
+            'framerate' => $this->buildFramerateArgs(),
+            'deinterlace' => '-vf yadif',
+            'denoise' => '-vf hqdn3d',
+            'stabilize' => '-vf deshake',
+            default => '',
+        };
+    }
+
+    private function buildTranscodeArgs(): string
+    {
+        $args = [];
+        if (isset($this->params['video_codec'])) {
+            $args[] = "-c:v " . escapeshellarg($this->params['video_codec']);
+        }
+        if (isset($this->params['audio_codec'])) {
+            $args[] = "-c:a " . escapeshellarg($this->params['audio_codec']);
+        }
+        if (isset($this->params['preset'])) {
+            $args[] = "-preset " . escapeshellarg($this->params['preset']);
+        }
+        if (isset($this->params['crf'])) {
+            $args[] = "-crf " . (int)$this->params['crf'];
+        }
+        return implode(' ', $args);
+    }
+
+    private function buildScaleArgs(): string
+    {
+        $w = (int)($this->params['width'] ?? -1);
+        $h = (int)($this->params['height'] ?? -1);
+        $algo = $this->params['algorithm'] ?? 'lanczos';
+        return "-vf scale={$w}:{$h}:flags={$algo}";
+    }
+
+    private function buildFilterArgs(): string
+    {
+        $filters = [];
+        if (isset($this->params['brightness'])) {
+            $filters[] = "eq=brightness=" . (float)$this->params['brightness'];
+        }
+        if (isset($this->params['contrast'])) {
+            $filters[] = "eq=contrast=" . (float)$this->params['contrast'];
+        }
+        if (isset($this->params['saturation'])) {
+            $filters[] = "eq=saturation=" . (float)$this->params['saturation'];
+        }
+        if (isset($this->params['gamma'])) {
+            $filters[] = "eq=gamma=" . (float)$this->params['gamma'];
+        }
+        if (isset($this->params['custom'])) {
+            $filters[] = $this->params['custom'];
+        }
+        return $filters ? '-vf ' . escapeshellarg(implode(',', $filters)) : '';
+    }
+
+    private function buildAudioArgs(): string
+    {
+        $args = [];
+        if (isset($this->params['codec'])) {
+            $args[] = "-c:a " . escapeshellarg($this->params['codec']);
+        }
+        if (isset($this->params['bitrate'])) {
+            $args[] = "-b:a " . escapeshellarg($this->params['bitrate']);
+        }
+        if (isset($this->params['sample_rate'])) {
+            $args[] = "-ar " . (int)$this->params['sample_rate'];
+        }
+        if (isset($this->params['channels'])) {
+            $args[] = "-ac " . (int)$this->params['channels'];
+        }
+        if (isset($this->params['volume'])) {
+            $args[] = "-af volume=" . (float)$this->params['volume'];
+        }
+        return implode(' ', $args);
+    }
+
+    private function buildWatermarkArgs(): string
+    {
+        $image = $this->params['image'] ?? '';
+        $position = $this->params['position'] ?? 'topright';
+        $overlay = match ($position) {
+            'topleft' => 'overlay=10:10',
+            'topright' => 'overlay=W-w-10:10',
+            'bottomleft' => 'overlay=10:H-h-10',
+            'bottomright' => 'overlay=W-w-10:H-h-10',
+            'center' => 'overlay=(W-w)/2:(H-h)/2',
+            default => 'overlay=W-w-10:10',
+        };
+        return "-i " . escapeshellarg($image) . " -filter_complex \"{$overlay}\"";
+    }
+
+    private function buildTrimArgs(): string
+    {
+        $args = [];
+        if (isset($this->params['start'])) {
+            $args[] = "-ss " . escapeshellarg($this->params['start']);
+        }
+        if (isset($this->params['duration'])) {
+            $args[] = "-t " . escapeshellarg($this->params['duration']);
+        }
+        if (isset($this->params['end'])) {
+            $args[] = "-to " . escapeshellarg($this->params['end']);
+        }
+        return implode(' ', $args);
+    }
+
+    private function buildBitrateArgs(): string
+    {
+        $args = [];
+        if (isset($this->params['video'])) {
+            $args[] = "-b:v " . escapeshellarg($this->params['video']);
+        }
+        if (isset($this->params['audio'])) {
+            $args[] = "-b:a " . escapeshellarg($this->params['audio']);
+        }
+        if (isset($this->params['maxrate'])) {
+            $args[] = "-maxrate " . escapeshellarg($this->params['maxrate']);
+            $args[] = "-bufsize " . escapeshellarg($this->params['bufsize'] ?? $this->params['maxrate']);
+        }
+        return implode(' ', $args);
+    }
+
+    private function buildFramerateArgs(): string
+    {
+        $fps = (float)($this->params['fps'] ?? 30);
+        return "-r {$fps}";
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'id' => $this->id,
+            'type' => $this->type,
+            'label' => $this->label,
+            'params' => $this->params,
+            'enabled' => $this->enabled,
+        ];
+    }
+
+    public static function fromArray(array $data): self
+    {
+        $stage = new self(
+            $data['type'],
+            $data['params'] ?? [],
+            $data['label'] ?? '',
+            $data['enabled'] ?? true
+        );
+        if (isset($data['id'])) {
+            // Use reflection to set the id for deserialization
+            $ref = new \ReflectionProperty($stage, 'id');
+            $ref->setValue($stage, $data['id']);
+        }
+        return $stage;
+    }
+}
@@ -0,0 +1,159 @@
+<?php
+
+namespace VideoConverter\Process;
+
+class FFmpegProcess
+{
+    private string $command;
+    private ?int $pid = null;
+    private string $logFile;
+    private string $progressFile;
+    private float $duration = 0;
+    private string $status = 'pending';
+    private array $outputLines = [];
+
+    public function __construct(string $command, string $jobId)
+    {
+        $config = require __DIR__ . '/../../config/app.php';
+        $this->command = $command;
+        $logDir = $config['storage']['logs'];
+        if (!is_dir($logDir)) mkdir($logDir, 0755, true);
+        $this->logFile = $logDir . "/ffmpeg_{$jobId}.log";
+        $this->progressFile = $logDir . "/progress_{$jobId}.txt";
+    }
+
+    public function start(): bool
+    {
+        $cmd = $this->command
+            . " -progress " . escapeshellarg($this->progressFile)
+            . " -stats_period 0.5"
+            . " 2>" . escapeshellarg($this->logFile)
+            . " & echo $!";
+
+        $output = [];
+        exec($cmd, $output);
+        $this->pid = (int)($output[0] ?? 0);
+
+        if ($this->pid > 0) {
+            $this->status = 'running';
+            return true;
+        }
+        $this->status = 'error';
+        return false;
+    }
+
+    public function stop(): void
+    {
+        if ($this->pid && $this->isRunning()) {
+            posix_kill($this->pid, SIGTERM);
+            usleep(500000);
+            if ($this->isRunning()) {
+                posix_kill($this->pid, SIGKILL);
+            }
+        }
+        $this->status = 'stopped';
+    }
+
+    public function pause(): void
+    {
+        if ($this->pid && $this->isRunning()) {
+            posix_kill($this->pid, SIGSTOP);
+            $this->status = 'paused';
+        }
+    }
+
+    public function resume(): void
+    {
+        if ($this->pid) {
+            posix_kill($this->pid, SIGCONT);
+            $this->status = 'running';
+        }
+    }
+
+    public function isRunning(): bool
+    {
+        if (!$this->pid) return false;
+        return posix_kill($this->pid, 0);
+    }
+
+    public function getProgress(): array
+    {
+        $progress = [
+            'percent' => 0,
+            'frame' => 0,
+            'fps' => 0,
+            'speed' => '0x',
+            'time' => '00:00:00.00',
+            'bitrate' => '0kbits/s',
+            'size' => '0kB',
+        ];
+
+        if (!file_exists($this->progressFile)) return $progress;
+
+        $content = file_get_contents($this->progressFile);
+        $lines = explode("\n", $content);
+
+        foreach ($lines as $line) {
+            $line = trim($line);
+            if (str_contains($line, '=')) {
+                [$key, $value] = explode('=', $line, 2);
+                $key = trim($key);
+                $value = trim($value);
+
+                switch ($key) {
+                    case 'frame': $progress['frame'] = (int)$value; break;
+                    case 'fps': $progress['fps'] = (float)$value; break;
+                    case 'speed': $progress['speed'] = $value; break;
+                    case 'out_time': $progress['time'] = $value; break;
+                    case 'total_size': $progress['size'] = $this->formatBytes((int)$value); break;
+                    case 'bitrate': $progress['bitrate'] = $value; break;
+                    case 'progress':
+                        if ($value === 'end') $progress['percent'] = 100;
+                        break;
+                }
+            }
+        }
+
+        if ($this->duration > 0 && $progress['percent'] < 100) {
+            $currentTime = $this->timeToSeconds($progress['time']);
+            $progress['percent'] = min(99, round(($currentTime / $this->duration) * 100, 1));
+        }
+
+        return $progress;
+    }
+
+    public function getLog(int $lines = 50): string
+    {
+        if (!file_exists($this->logFile)) return '';
+        $all = file($this->logFile);
+        return implode('', array_slice($all, -$lines));
+    }
+
+    public function setDuration(float $duration): void
+    {
+        $this->duration = $duration;
+    }
+
+    public function getPid(): ?int { return $this->pid; }
+    public function getStatus(): string { return $this->status; }
+    public function getCommand(): string { return $this->command; }
+
+    private function timeToSeconds(string $time): float
+    {
+        $parts = explode(':', $time);
+        if (count($parts) !== 3) return 0;
+        return (int)$parts[0] * 3600 + (int)$parts[1] * 60 + (float)$parts[2];
+    }
+
+    private function formatBytes(int $bytes): string
+    {
+        $units = ['B', 'KB', 'MB', 'GB'];
+        $i = 0;
+        $size = (float)$bytes;
+        while ($size >= 1024 && $i < count($units) - 1) {
+            $size /= 1024;
+            $i++;
+        }
+        return round($size, 1) . $units[$i];
+    }
+}
@@ -0,0 +1,106 @@
+<?php
+
+namespace VideoConverter\Process;
+
+class MediaProbe
+{
+    private string $ffprobe;
+
+    public function __construct()
+    {
+        $config = require __DIR__ . '/../../config/app.php';
+        $this->ffprobe = $config['ffmpeg']['ffprobe'];
+    }
+
+    public function analyze(string $filePath): array
+    {
+        $cmd = sprintf(
+            '%s -v quiet -print_format json -show_format -show_streams %s',
+            $this->ffprobe,
+            escapeshellarg($filePath)
+        );
+
+        $output = shell_exec($cmd);
+        $data = json_decode($output ?: '{}', true);
+
+        if (!$data) {
+            return ['error' => 'Could not analyze file'];
+        }
+
+        return $this->parseProbeData($data);
+    }
+
+    public function getDuration(string $filePath): float
+    {
+        $info = $this->analyze($filePath);
+        return (float)($info['duration'] ?? 0);
+    }
+
+    public function getThumbnail(string $filePath, string $outputPath, string $time = '00:00:01'): bool
+    {
+        $config = require __DIR__ . '/../../config/app.php';
+        $cmd = sprintf(
+            '%s -y -i %s -ss %s -vframes 1 -vf scale=320:-1 %s 2>/dev/null',
+            $config['ffmpeg']['binary'],
+            escapeshellarg($filePath),
+            escapeshellarg($time),
+            escapeshellarg($outputPath)
+        );
+        exec($cmd, $output, $exitCode);
+        return $exitCode === 0;
+    }
+
+    private function parseProbeData(array $data): array
+    {
+        $result = [
+            'format' => $data['format']['format_long_name'] ?? 'Unknown',
+            'format_name' => $data['format']['format_name'] ?? '',
+            'duration' => (float)($data['format']['duration'] ?? 0),
+            'size' => (int)($data['format']['size'] ?? 0),
+            'bitrate' => (int)($data['format']['bit_rate'] ?? 0),
+            'streams' => [],
+            'video' => null,
+            'audio' => null,
+        ];
+
+        foreach (($data['streams'] ?? []) as $stream) {
+            $type = $stream['codec_type'] ?? '';
+            $info = [
+                'index' => $stream['index'],
+                'type' => $type,
+                'codec' => $stream['codec_name'] ?? 'unknown',
+                'codec_long' => $stream['codec_long_name'] ?? '',
+            ];
+
+            if ($type === 'video') {
+                $info['width'] = (int)($stream['width'] ?? 0);
+                $info['height'] = (int)($stream['height'] ?? 0);
+                $info['fps'] = $this->parseFps($stream['r_frame_rate'] ?? '0/1');
+                $info['pix_fmt'] = $stream['pix_fmt'] ?? '';
+                $info['bitrate'] = (int)($stream['bit_rate'] ?? 0);
+                $info['profile'] = $stream['profile'] ?? '';
+                $info['level'] = $stream['level'] ?? '';
+                if (!$result['video']) $result['video'] = $info;
+            } elseif ($type === 'audio') {
+                $info['sample_rate'] = (int)($stream['sample_rate'] ?? 0);
+                $info['channels'] = (int)($stream['channels'] ?? 0);
+                $info['channel_layout'] = $stream['channel_layout'] ?? '';
+                $info['bitrate'] = (int)($stream['bit_rate'] ?? 0);
+                if (!$result['audio']) $result['audio'] = $info;
+            }
+
+            $result['streams'][] = $info;
+        }
+
+        return $result;
+    }
+
+    private function parseFps(string $frac): float
+    {
+        $parts = explode('/', $frac);
+        if (count($parts) === 2 && (int)$parts[1] > 0) {
+            return round((int)$parts[0] / (int)$parts[1], 2);
+        }
+        return (float)$frac;
+    }
+}
--- a/Show More
+++ b/Show More