diff --git a/README.md b/README.md
index e69de29..263f4df 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,181 @@
+# BotKonzept Frontend
+
+Modernes, responsives Frontend für die BotKonzept SaaS-Plattform.
+
+## 📁 Projektstruktur
+
+```
+customer-frontend/
+├── index.html          # Landing Page mit Registrierung
+├── dashboard.html      # Kunden-Dashboard
+├── css/
+│   ├── style.css       # Haupt-Stylesheet
+│   └── dashboard.css   # Dashboard-spezifische Styles
+├── js/
+│   ├── main.js         # Landing Page JavaScript
+│   └── dashboard.js    # Dashboard JavaScript
+└── logo/
+    └── 20250119_Logo_Botkozept.svg
+```
+
+## 🚀 Features
+
+### Landing Page (index.html)
+- ✅ Modernes, responsives Design
+- ✅ Hero-Section mit animiertem Chat-Preview
+- ✅ Feature-Übersicht
+- ✅ "So funktioniert's" Sektion
+- ✅ Pricing-Tabelle mit Rabatt-Timeline
+- ✅ Registrierungsformular
+- ✅ FAQ-Akkordeon
+- ✅ Mobile-optimiert
+
+### Dashboard (dashboard.html)
+- ✅ Übersicht mit Statistiken
+- ✅ PDF-Upload mit Drag & Drop
+- ✅ Dokumenten-Verwaltung
+- ✅ Chatbot-Test-Interface
+- ✅ Embed-Code Generator
+- ✅ Einstellungen
+- ✅ Trial-Status & Upgrade-Banner
+
+## 🎨 Design-System
+
+### Farben
+```css
+--primary: #6366f1;      /* Indigo */
+--secondary: #0ea5e9;    /* Sky Blue */
+--accent: #f59e0b;       /* Amber */
+--success: #10b981;      /* Emerald */
+--error: #ef4444;        /* Red */
+```
+
+### Typografie
+- Font: Inter (Google Fonts)
+- Responsive Schriftgrößen mit `clamp()`
+
+### Komponenten
+- Buttons (Primary, Outline, White)
+- Cards
+- Forms
+- Modals
+- Notifications
+
+## 🔧 Konfiguration
+
+### API-Endpunkte
+
+In `js/main.js`:
+```javascript
+const CONFIG = {
+    WEBHOOK_URL: 'https://n8n.userman.de/webhook/botkonzept-registration',
+    API_BASE_URL: 'https://api.botkonzept.de',
+};
+```
+
+### Webhook-Integration
+
+Das Registrierungsformular sendet folgende Daten an den Webhook:
+```json
+{
+    "firstName": "Max",
+    "lastName": "Mustermann",
+    "email": "max@beispiel.de",
+    "company": "Muster GmbH",
+    "website": "https://beispiel.de",
+    "newsletter": true,
+    "timestamp": "2025-01-25T10:00:00.000Z",
+    "source": "website"
+}
+```
+
+## 📱 Responsive Breakpoints
+
+- Desktop: > 1024px
+- Tablet: 768px - 1024px
+- Mobile: < 768px
+- Small Mobile: < 480px
+
+## 🚀 Deployment
+
+### Lokales Testen
+```bash
+cd customer-frontend
+python3 -m http.server 8000
+# Öffnen: http://localhost:8000
+```
+
+### Produktion
+```bash
+# Dateien auf Webserver kopieren
+rsync -avz . user@botkonzept.de:/var/www/botkonzept/
+```
+
+### NGINX Konfiguration
+```nginx
+server {
+    listen 80;
+    server_name botkonzept.de www.botkonzept.de;
+    
+    root /var/www/botkonzept;
+    index index.html;
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # Cache static assets
+    location ~* \.(css|js|svg|png|jpg|jpeg|gif|ico)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+}
+```
+
+## 🔒 Sicherheit
+
+- HTTPS erforderlich für Produktion
+- CORS-Header für API-Calls
+- Input-Validierung auf Client-Seite
+- XSS-Schutz durch HTML-Escaping
+
+## 📊 Analytics
+
+Google Analytics 4 Integration vorbereitet:
+```html
+<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+```
+
+Conversion-Tracking:
+```javascript
+trackConversion('registration_complete', { email: '...' });
+```
+
+## 🎯 Customer Journey
+
+1. **Besucher** kommt auf botkonzept.de
+2. **Registrierung** über Formular
+3. **Instanz-Erstellung** (automatisch via n8n Workflow)
+4. **Dashboard-Zugang** per E-Mail
+5. **PDF-Upload** in Wissensdatenbank
+6. **Embed-Code** für Website kopieren
+7. **Trial-Reminder** (Tag 3, 5, 7)
+8. **Upgrade** oder Ablauf
+
+## 📝 TODO
+
+- [ ] Stripe/PayPal Integration
+- [ ] E-Mail-Verifizierung
+- [ ] Passwort-Reset
+- [ ] Multi-Language Support
+- [ ] Dark Mode
+- [ ] PWA Support
+
+## 📄 Lizenz
+
+Proprietär - Alle Rechte vorbehalten
+
+---
+
+**Version:** 1.0.0  
+**Erstellt:** Januar 2025
diff --git a/css/dashboard.css b/css/dashboard.css
new file mode 100644
index 0000000..2c02c13
--- /dev/null
+++ b/css/dashboard.css
@@ -0,0 +1,1128 @@
+/* ============================================
+   BotKonzept Dashboard Styles
+   ============================================ */
+
+/* Dashboard Body */
+.dashboard-body {
+    background: var(--gray-100);
+    min-height: 100vh;
+}
+
+/* Dashboard Navigation */
+.dashboard-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    background: var(--white);
+    border-bottom: 1px solid var(--gray-200);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    z-index: 1000;
+}
+
+.nav-brand .logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--gray-900);
+}
+
+.nav-brand .logo img {
+    height: 32px;
+}
+
+.nav-user {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.trial-badge {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: var(--accent);
+    color: var(--white);
+    border-radius: var(--radius-full);
+    font-size: 0.875rem;
+}
+
+.trial-badge i {
+    font-size: 0.75rem;
+}
+
+.user-menu {
+    position: relative;
+}
+
+.user-btn {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    background: none;
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+
+.user-btn:hover {
+    background: var(--gray-50);
+}
+
+.user-avatar {
+    width: 32px;
+    height: 32px;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
+    font-size: 0.875rem;
+}
+
+.user-btn span {
+    font-weight: 500;
+    color: var(--gray-700);
+}
+
+.user-btn i.fa-chevron-down {
+    font-size: 0.75rem;
+    color: var(--gray-400);
+}
+
+.user-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 8px;
+    background: var(--white);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    min-width: 200px;
+    display: none;
+    z-index: 100;
+}
+
+.user-dropdown.active {
+    display: block;
+}
+
+.user-dropdown a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    color: var(--gray-700);
+    transition: var(--transition-fast);
+}
+
+.user-dropdown a:hover {
+    background: var(--gray-50);
+    color: var(--primary);
+}
+
+.user-dropdown a.logout {
+    color: var(--error);
+}
+
+.user-dropdown hr {
+    border: none;
+    border-top: 1px solid var(--gray-200);
+    margin: 4px 0;
+}
+
+/* Dashboard Layout */
+.dashboard-layout {
+    display: flex;
+    padding-top: 64px;
+    min-height: 100vh;
+}
+
+/* Sidebar */
+.dashboard-sidebar {
+    position: fixed;
+    left: 0;
+    top: 64px;
+    bottom: 0;
+    width: 260px;
+    background: var(--white);
+    border-right: 1px solid var(--gray-200);
+    display: flex;
+    flex-direction: column;
+    padding: 24px 0;
+    overflow-y: auto;
+}
+
+.sidebar-nav {
+    flex: 1;
+}
+
+.sidebar-nav .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 24px;
+    color: var(--gray-600);
+    font-weight: 500;
+    transition: var(--transition-fast);
+    border-left: 3px solid transparent;
+}
+
+.sidebar-nav .nav-item:hover {
+    background: var(--gray-50);
+    color: var(--primary);
+}
+
+.sidebar-nav .nav-item.active {
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--primary);
+    border-left-color: var(--primary);
+}
+
+.sidebar-nav .nav-item i {
+    width: 20px;
+    text-align: center;
+}
+
+/* Sidebar CTA */
+.sidebar-cta {
+    margin: 24px 16px 0;
+    padding: 20px;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-lg);
+    color: var(--white);
+    text-align: center;
+}
+
+.sidebar-cta .cta-icon {
+    width: 48px;
+    height: 48px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 12px;
+    font-size: 1.25rem;
+}
+
+.sidebar-cta h4 {
+    color: var(--white);
+    margin-bottom: 8px;
+}
+
+.sidebar-cta p {
+    font-size: 0.875rem;
+    opacity: 0.9;
+    margin-bottom: 16px;
+}
+
+.sidebar-cta .btn {
+    position: relative;
+}
+
+.sidebar-cta .discount-badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background: var(--accent);
+    color: var(--white);
+    font-size: 0.625rem;
+    padding: 2px 6px;
+    border-radius: var(--radius-full);
+    font-weight: 600;
+}
+
+/* Main Content */
+.dashboard-main {
+    flex: 1;
+    margin-left: 260px;
+    padding: 32px;
+    max-width: calc(100% - 260px);
+}
+
+/* Dashboard Sections */
+.dashboard-section {
+    display: none;
+}
+
+.dashboard-section.active {
+    display: block;
+}
+
+.section-header {
+    margin-bottom: 32px;
+}
+
+.section-header h1 {
+    font-size: 1.75rem;
+    margin-bottom: 8px;
+}
+
+.section-header p {
+    color: var(--gray-600);
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.stat-card {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    box-shadow: var(--shadow-sm);
+}
+
+.stat-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+}
+
+.stat-icon.blue {
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--primary);
+}
+
+.stat-icon.green {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--success);
+}
+
+.stat-icon.purple {
+    background: rgba(139, 92, 246, 0.1);
+    color: #8b5cf6;
+}
+
+.stat-icon.orange {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--accent);
+}
+
+.stat-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-value {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--gray-900);
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--gray-500);
+}
+
+/* Quick Actions */
+.quick-actions {
+    margin-bottom: 32px;
+}
+
+.quick-actions h2 {
+    font-size: 1.25rem;
+    margin-bottom: 16px;
+}
+
+.actions-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+}
+
+.action-card {
+    background: var(--white);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    text-align: center;
+    transition: var(--transition);
+    cursor: pointer;
+}
+
+.action-card:hover {
+    border-color: var(--primary);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+}
+
+.action-icon {
+    width: 64px;
+    height: 64px;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 16px;
+    font-size: 1.5rem;
+    color: var(--white);
+}
+
+.action-card h3 {
+    font-size: 1.125rem;
+    margin-bottom: 8px;
+    color: var(--gray-900);
+}
+
+.action-card p {
+    font-size: 0.875rem;
+    color: var(--gray-600);
+}
+
+/* Trial Banner */
+.trial-banner {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    margin-bottom: 32px;
+}
+
+.banner-content {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.banner-icon {
+    width: 64px;
+    height: 64px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: var(--radius-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    color: var(--white);
+    flex-shrink: 0;
+}
+
+.banner-text {
+    flex: 1;
+    color: var(--white);
+}
+
+.banner-text h3 {
+    color: var(--white);
+    margin-bottom: 4px;
+}
+
+.banner-text p {
+    opacity: 0.9;
+}
+
+.banner-content .btn {
+    flex-shrink: 0;
+}
+
+/* Upload Area */
+.upload-area {
+    background: var(--white);
+    border: 2px dashed var(--gray-300);
+    border-radius: var(--radius-lg);
+    padding: 48px;
+    text-align: center;
+    margin-bottom: 32px;
+    transition: var(--transition);
+}
+
+.upload-area:hover,
+.upload-area.dragover {
+    border-color: var(--primary);
+    background: rgba(99, 102, 241, 0.05);
+}
+
+.upload-icon {
+    font-size: 3rem;
+    color: var(--primary);
+    margin-bottom: 16px;
+}
+
+.upload-area h3 {
+    margin-bottom: 8px;
+}
+
+.upload-area > p {
+    color: var(--gray-600);
+    margin-bottom: 24px;
+}
+
+.upload-hint {
+    font-size: 0.75rem;
+    color: var(--gray-500);
+    margin-top: 16px;
+}
+
+/* Upload Progress */
+.upload-progress {
+    background: var(--white);
+    border-radius: var(--radius);
+    padding: 16px;
+    margin-bottom: 24px;
+}
+
+.progress-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 0.875rem;
+}
+
+.progress-bar {
+    height: 8px;
+    background: var(--gray-200);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-full);
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
+/* Documents List */
+.documents-list {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.list-header h2 {
+    font-size: 1.125rem;
+}
+
+.doc-count {
+    font-size: 0.875rem;
+    color: var(--gray-500);
+}
+
+.documents-table {
+    min-height: 200px;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 48px;
+    color: var(--gray-500);
+}
+
+.empty-state i {
+    font-size: 3rem;
+    margin-bottom: 16px;
+    opacity: 0.5;
+}
+
+.empty-state h3 {
+    color: var(--gray-700);
+    margin-bottom: 8px;
+}
+
+/* Document Row */
+.document-row {
+    display: flex;
+    align-items: center;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--gray-100);
+    transition: var(--transition-fast);
+}
+
+.document-row:hover {
+    background: var(--gray-50);
+}
+
+.document-row:last-child {
+    border-bottom: none;
+}
+
+.doc-icon {
+    width: 40px;
+    height: 40px;
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+}
+
+.doc-info {
+    flex: 1;
+}
+
+.doc-name {
+    font-weight: 500;
+    color: var(--gray-900);
+    margin-bottom: 2px;
+}
+
+.doc-meta {
+    font-size: 0.75rem;
+    color: var(--gray-500);
+}
+
+.doc-status {
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-right: 16px;
+}
+
+.doc-status.indexed {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--success);
+}
+
+.doc-status.processing {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--accent);
+}
+
+.doc-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.doc-actions button {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: var(--gray-100);
+    border-radius: var(--radius);
+    cursor: pointer;
+    color: var(--gray-600);
+    transition: var(--transition-fast);
+}
+
+.doc-actions button:hover {
+    background: var(--gray-200);
+    color: var(--gray-900);
+}
+
+.doc-actions button.delete:hover {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--error);
+}
+
+/* Chatbot Test */
+.chatbot-test-container {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    gap: 24px;
+}
+
+.chat-window {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    flex-direction: column;
+    height: 500px;
+}
+
+.chat-window .chat-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    background: var(--gradient-primary);
+    color: var(--white);
+}
+
+.chat-window .chat-messages {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.chat-input-area {
+    display: flex;
+    padding: 16px 20px;
+    border-top: 1px solid var(--gray-200);
+    gap: 12px;
+}
+
+.chat-input-area input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius-full);
+    font-size: 0.9375rem;
+    outline: none;
+}
+
+.chat-input-area input:focus {
+    border-color: var(--primary);
+}
+
+.send-btn {
+    width: 44px;
+    height: 44px;
+    background: var(--gradient-primary);
+    color: var(--white);
+    border: none;
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.send-btn:hover {
+    transform: scale(1.05);
+}
+
+.chat-tips {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    height: fit-content;
+}
+
+.chat-tips h3 {
+    margin-bottom: 16px;
+}
+
+.chat-tips ul {
+    list-style: none;
+}
+
+.chat-tips li {
+    padding: 8px 0;
+    color: var(--gray-600);
+    font-size: 0.875rem;
+    padding-left: 20px;
+    position: relative;
+}
+
+.chat-tips li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--primary);
+}
+
+/* Embed Section */
+.embed-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.embed-card {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+}
+
+.embed-card h2 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.25rem;
+    margin-bottom: 16px;
+}
+
+.embed-card h2 i {
+    color: var(--primary);
+}
+
+.code-block {
+    position: relative;
+    background: var(--gray-900);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin: 16px 0;
+}
+
+.code-block pre {
+    color: var(--success);
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.875rem;
+    overflow-x: auto;
+    margin: 0;
+}
+
+.copy-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    padding: 8px 16px;
+    background: var(--gray-700);
+    color: var(--white);
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: var(--transition-fast);
+}
+
+.copy-btn:hover {
+    background: var(--gray-600);
+}
+
+.copy-success {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--success);
+    font-size: 0.875rem;
+}
+
+.endpoint-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.endpoint-item label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.endpoint-url {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--gray-100);
+    padding: 12px 16px;
+    border-radius: var(--radius);
+}
+
+.endpoint-url code {
+    flex: 1;
+    font-size: 0.8125rem;
+    color: var(--gray-700);
+    word-break: break-all;
+}
+
+.copy-btn-sm {
+    padding: 6px 10px;
+    background: var(--white);
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    color: var(--gray-600);
+    transition: var(--transition-fast);
+}
+
+.copy-btn-sm:hover {
+    background: var(--gray-50);
+    color: var(--primary);
+}
+
+/* Installation Steps */
+.install-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.install-step {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+.step-num {
+    width: 32px;
+    height: 32px;
+    background: var(--gradient-primary);
+    color: var(--white);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.install-step h4 {
+    margin-bottom: 4px;
+}
+
+.install-step p {
+    font-size: 0.875rem;
+    color: var(--gray-600);
+}
+
+.platform-guides h4 {
+    margin-bottom: 12px;
+}
+
+.platform-links {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.platform-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: var(--gray-100);
+    border-radius: var(--radius);
+    color: var(--gray-700);
+    font-size: 0.875rem;
+    transition: var(--transition-fast);
+}
+
+.platform-link:hover {
+    background: var(--primary);
+    color: var(--white);
+}
+
+/* Analytics Placeholder */
+.analytics-placeholder {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    padding: 48px;
+    text-align: center;
+}
+
+.placeholder-icon {
+    font-size: 4rem;
+    color: var(--gray-300);
+    margin-bottom: 24px;
+}
+
+.analytics-placeholder h3 {
+    margin-bottom: 16px;
+}
+
+.analytics-placeholder p {
+    color: var(--gray-600);
+    margin-bottom: 24px;
+}
+
+.analytics-placeholder ul {
+    list-style: none;
+    display: inline-block;
+    text-align: left;
+    margin-bottom: 24px;
+}
+
+.analytics-placeholder li {
+    padding: 8px 0;
+    color: var(--gray-600);
+}
+
+.analytics-placeholder li i {
+    color: var(--success);
+    margin-right: 8px;
+}
+
+/* Settings */
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+}
+
+.settings-card {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+}
+
+.settings-card h2 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.25rem;
+    margin-bottom: 24px;
+}
+
+.settings-card h2 i {
+    color: var(--primary);
+}
+
+.setting-group {
+    margin-bottom: 20px;
+}
+
+.setting-group label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: var(--gray-700);
+}
+
+.setting-group input[type="text"],
+.setting-group input[type="email"],
+.setting-group textarea {
+    width: 100%;
+    padding: 12px 16px;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius);
+    font-size: 0.9375rem;
+    transition: var(--transition-fast);
+}
+
+.setting-group input:focus,
+.setting-group textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.color-picker {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.color-picker input[type="color"] {
+    width: 48px;
+    height: 48px;
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+}
+
+.plan-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.plan-badge {
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.plan-badge.trial {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--accent);
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .actions-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .chatbot-test-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .chat-tips {
+        display: none;
+    }
+}
+
+@media (max-width: 1024px) {
+    .dashboard-sidebar {
+        width: 200px;
+    }
+    
+    .dashboard-main {
+        margin-left: 200px;
+        max-width: calc(100% - 200px);
+    }
+    
+    .sidebar-cta {
+        display: none;
+    }
+    
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .dashboard-nav {
+        padding: 0 16px;
+    }
+    
+    .trial-badge {
+        display: none;
+    }
+    
+    .user-btn span {
+        display: none;
+    }
+    
+    .dashboard-sidebar {
+        position: fixed;
+        left: -260px;
+        width: 260px;
+        transition: left 0.3s ease;
+        z-index: 999;
+    }
+    
+    .dashboard-sidebar.active {
+        left: 0;
+    }
+    
+    .dashboard-main {
+        margin-left: 0;
+        max-width: 100%;
+        padding: 16px;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .actions-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .banner-content {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .banner-icon {
+        margin: 0 auto;
+    }
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..a3dc603
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,1573 @@
+/* ============================================
+   BotKonzept - Modern CSS Stylesheet
+   ============================================ */
+
+/* CSS Variables */
+:root {
+    /* Colors */
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --primary-light: #818cf8;
+    --secondary: #0ea5e9;
+    --accent: #f59e0b;
+    
+    /* Neutrals */
+    --white: #ffffff;
+    --gray-50: #f9fafb;
+    --gray-100: #f3f4f6;
+    --gray-200: #e5e7eb;
+    --gray-300: #d1d5db;
+    --gray-400: #9ca3af;
+    --gray-500: #6b7280;
+    --gray-600: #4b5563;
+    --gray-700: #374151;
+    --gray-800: #1f2937;
+    --gray-900: #111827;
+    
+    /* Status Colors */
+    --success: #10b981;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    
+    /* Typography */
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    
+    /* Spacing */
+    --container-max: 1200px;
+    --section-padding: 100px;
+    
+    /* Border Radius */
+    --radius-sm: 4px;
+    --radius: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
+    
+    /* Transitions */
+    --transition: all 0.3s ease;
+    --transition-fast: all 0.15s ease;
+}
+
+/* Reset & Base */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-family);
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--gray-700);
+    background-color: var(--white);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: var(--transition-fast);
+}
+
+a:hover {
+    color: var(--primary-dark);
+}
+
+/* Container */
+.container {
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 24px;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    color: var(--gray-900);
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
+h2 { font-size: clamp(2rem, 4vw, 3rem); }
+h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
+h4 { font-size: 1.25rem; }
+
+.gradient-text {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 24px;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: var(--radius);
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: var(--transition);
+    text-decoration: none;
+}
+
+.btn-sm {
+    padding: 8px 16px;
+    font-size: 0.875rem;
+}
+
+.btn-lg {
+    padding: 16px 32px;
+    font-size: 1.125rem;
+}
+
+.btn-block {
+    width: 100%;
+}
+
+.btn-primary {
+    background: var(--gradient-primary);
+    color: var(--white);
+    border-color: transparent;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+    color: var(--white);
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--primary);
+    border-color: var(--primary);
+}
+
+.btn-outline:hover {
+    background: var(--primary);
+    color: var(--white);
+}
+
+.btn-white {
+    background: var(--white);
+    color: var(--primary);
+    border-color: var(--white);
+}
+
+.btn-white:hover {
+    background: var(--gray-100);
+    color: var(--primary-dark);
+}
+
+/* ============================================
+   Navigation
+   ============================================ */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--gray-200);
+    transition: var(--transition);
+}
+
+.navbar .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 72px;
+}
+
+.navbar .logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--gray-900);
+}
+
+.navbar .logo img {
+    height: 40px;
+    width: auto;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+}
+
+.nav-links a {
+    color: var(--gray-600);
+    font-weight: 500;
+    transition: var(--transition-fast);
+}
+
+.nav-links a:hover {
+    color: var(--primary);
+}
+
+.mobile-menu-btn {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--gray-700);
+    cursor: pointer;
+}
+
+/* ============================================
+   Hero Section
+   ============================================ */
+.hero {
+    position: relative;
+    padding: 160px 0 100px;
+    overflow: hidden;
+    background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
+}
+
+.hero .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+}
+
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: var(--primary-light);
+    color: var(--white);
+    border-radius: var(--radius-full);
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 24px;
+}
+
+.hero-badge i {
+    font-size: 0.75rem;
+}
+
+.hero h1 {
+    margin-bottom: 24px;
+}
+
+.hero-subtitle {
+    font-size: 1.25rem;
+    color: var(--gray-600);
+    margin-bottom: 32px;
+    max-width: 540px;
+}
+
+.hero-cta {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 48px;
+}
+
+.hero-stats {
+    display: flex;
+    gap: 48px;
+}
+
+.stat {
+    text-align: center;
+}
+
+.stat-number {
+    display: block;
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--gray-900);
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--gray-500);
+}
+
+/* Hero Visual - Chat Preview */
+.hero-visual {
+    position: relative;
+    z-index: 2;
+}
+
+.chat-preview {
+    background: var(--white);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xl);
+    overflow: hidden;
+    max-width: 400px;
+    margin-left: auto;
+}
+
+.chat-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    background: var(--gradient-primary);
+    color: var(--white);
+}
+
+.chat-avatar {
+    width: 44px;
+    height: 44px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+}
+
+.chat-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-name {
+    font-weight: 600;
+}
+
+.chat-status {
+    font-size: 0.75rem;
+    opacity: 0.9;
+}
+
+.chat-status i {
+    font-size: 0.5rem;
+    color: var(--success);
+    margin-right: 4px;
+}
+
+.chat-messages {
+    padding: 20px;
+    min-height: 280px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.message {
+    max-width: 85%;
+    padding: 12px 16px;
+    border-radius: var(--radius-lg);
+    font-size: 0.9375rem;
+}
+
+.message.bot {
+    background: var(--gray-100);
+    align-self: flex-start;
+    border-bottom-left-radius: 4px;
+}
+
+.message.user {
+    background: var(--primary);
+    color: var(--white);
+    align-self: flex-end;
+    border-bottom-right-radius: 4px;
+}
+
+.message.typing {
+    padding: 16px 20px;
+}
+
+.typing-indicator {
+    display: flex;
+    gap: 4px;
+}
+
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    background: var(--gray-400);
+    border-radius: 50%;
+    animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typing {
+    0%, 60%, 100% { transform: translateY(0); }
+    30% { transform: translateY(-8px); }
+}
+
+.chat-input {
+    display: flex;
+    padding: 16px 20px;
+    border-top: 1px solid var(--gray-200);
+    gap: 12px;
+}
+
+.chat-input input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius-full);
+    font-size: 0.9375rem;
+    outline: none;
+    transition: var(--transition-fast);
+}
+
+.chat-input input:focus {
+    border-color: var(--primary);
+}
+
+.chat-input button {
+    width: 44px;
+    height: 44px;
+    background: var(--gradient-primary);
+    color: var(--white);
+    border: none;
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.chat-input button:hover {
+    transform: scale(1.05);
+}
+
+/* Hero Background */
+.hero-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.gradient-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.4;
+}
+
+.orb-1 {
+    width: 600px;
+    height: 600px;
+    background: var(--primary-light);
+    top: -200px;
+    right: -100px;
+}
+
+.orb-2 {
+    width: 400px;
+    height: 400px;
+    background: var(--secondary);
+    bottom: -100px;
+    left: -100px;
+}
+
+.orb-3 {
+    width: 300px;
+    height: 300px;
+    background: var(--accent);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* ============================================
+   Trusted By Section
+   ============================================ */
+.trusted-by {
+    padding: 60px 0;
+    background: var(--white);
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.trusted-label {
+    text-align: center;
+    color: var(--gray-500);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 24px;
+}
+
+.trusted-logos {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 48px;
+    flex-wrap: wrap;
+}
+
+.logo-placeholder {
+    color: var(--gray-400);
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* ============================================
+   Section Header
+   ============================================ */
+.section-header {
+    text-align: center;
+    max-width: 700px;
+    margin: 0 auto 60px;
+}
+
+.section-badge {
+    display: inline-block;
+    padding: 6px 16px;
+    background: var(--primary-light);
+    color: var(--white);
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 16px;
+}
+
+.section-header h2 {
+    margin-bottom: 16px;
+}
+
+.section-header p {
+    font-size: 1.125rem;
+    color: var(--gray-600);
+}
+
+/* ============================================
+   Features Section
+   ============================================ */
+.features {
+    padding: var(--section-padding) 0;
+    background: var(--white);
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
+}
+
+.feature-card {
+    padding: 32px;
+    background: var(--white);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius-lg);
+    transition: var(--transition);
+}
+
+.feature-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-light);
+}
+
+.feature-icon {
+    width: 56px;
+    height: 56px;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: var(--white);
+    margin-bottom: 20px;
+}
+
+.feature-card h3 {
+    margin-bottom: 12px;
+    font-size: 1.25rem;
+}
+
+.feature-card p {
+    color: var(--gray-600);
+    font-size: 0.9375rem;
+}
+
+/* ============================================
+   How It Works Section
+   ============================================ */
+.how-it-works {
+    padding: var(--section-padding) 0;
+    background: var(--gray-50);
+}
+
+.steps {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 0;
+    margin-bottom: 60px;
+}
+
+.step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 280px;
+    padding: 0 20px;
+}
+
+.step-number {
+    width: 48px;
+    height: 48px;
+    background: var(--gradient-primary);
+    color: var(--white);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+}
+
+.step-content h3 {
+    margin-bottom: 8px;
+}
+
+.step-content p {
+    color: var(--gray-600);
+    font-size: 0.9375rem;
+}
+
+.step-icon {
+    margin-top: 20px;
+    font-size: 2.5rem;
+    color: var(--primary-light);
+}
+
+.step-connector {
+    width: 100px;
+    height: 2px;
+    background: var(--gray-300);
+    margin-top: 24px;
+}
+
+/* Code Preview */
+.code-preview {
+    max-width: 600px;
+    margin: 0 auto;
+    background: var(--gray-900);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: var(--shadow-xl);
+}
+
+.code-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: var(--gray-800);
+}
+
+.code-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.code-dot.red { background: #ff5f56; }
+.code-dot.yellow { background: #ffbd2e; }
+.code-dot.green { background: #27ca40; }
+
+.code-title {
+    margin-left: auto;
+    color: var(--gray-400);
+    font-size: 0.75rem;
+}
+
+.code-preview pre {
+    padding: 20px;
+    margin: 0;
+    overflow-x: auto;
+}
+
+.code-preview code {
+    color: var(--success);
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.875rem;
+}
+
+/* ============================================
+   Pricing Section
+   ============================================ */
+.pricing {
+    padding: var(--section-padding) 0;
+    background: var(--white);
+}
+
+.pricing-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
+    margin-bottom: 60px;
+}
+
+.pricing-card {
+    position: relative;
+    padding: 40px 32px;
+    background: var(--white);
+    border: 2px solid var(--gray-200);
+    border-radius: var(--radius-xl);
+    transition: var(--transition);
+}
+
+.pricing-card:hover {
+    border-color: var(--primary-light);
+}
+
+.pricing-card.featured {
+    border-color: var(--primary);
+    transform: scale(1.05);
+    box-shadow: var(--shadow-xl);
+}
+
+.pricing-badge {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 6px 20px;
+    background: var(--gradient-primary);
+    color: var(--white);
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.pricing-header {
+    text-align: center;
+    margin-bottom: 32px;
+}
+
+.pricing-header h3 {
+    margin-bottom: 16px;
+    font-size: 1.5rem;
+}
+
+.price {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 4px;
+    margin-bottom: 8px;
+}
+
+.price .currency {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--gray-600);
+}
+
+.price .amount {
+    font-size: 3.5rem;
+    font-weight: 800;
+    color: var(--gray-900);
+    line-height: 1;
+}
+
+.price .period {
+    font-size: 1rem;
+    color: var(--gray-500);
+}
+
+.pricing-description {
+    color: var(--gray-600);
+    font-size: 0.9375rem;
+}
+
+.pricing-features {
+    list-style: none;
+    margin-bottom: 32px;
+}
+
+.pricing-features li {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--gray-100);
+    font-size: 0.9375rem;
+}
+
+.pricing-features li:last-child {
+    border-bottom: none;
+}
+
+.pricing-features li i {
+    font-size: 0.875rem;
+}
+
+.pricing-features li i.fa-check {
+    color: var(--success);
+}
+
+.pricing-features li i.fa-times {
+    color: var(--gray-400);
+}
+
+.pricing-features li.disabled {
+    color: var(--gray-400);
+}
+
+.pricing-note {
+    text-align: center;
+    margin-top: 16px;
+    font-size: 0.875rem;
+    color: var(--gray-600);
+}
+
+.pricing-note i {
+    color: var(--accent);
+}
+
+.discount-tag {
+    background: var(--accent);
+    color: var(--white);
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+    font-weight: 600;
+}
+
+/* Discount Timeline */
+.discount-timeline {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 40px;
+    background: var(--gray-50);
+    border-radius: var(--radius-xl);
+}
+
+.discount-timeline h3 {
+    text-align: center;
+    margin-bottom: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+}
+
+.discount-timeline h3 i {
+    color: var(--primary);
+}
+
+.timeline {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+
+.timeline::before {
+    content: '';
+    position: absolute;
+    top: 12px;
+    left: 50px;
+    right: 50px;
+    height: 4px;
+    background: var(--gray-300);
+    z-index: 0;
+}
+
+.timeline-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+}
+
+.timeline-marker {
+    width: 24px;
+    height: 24px;
+    background: var(--gray-300);
+    border: 4px solid var(--white);
+    border-radius: 50%;
+    margin-bottom: 16px;
+}
+
+.timeline-marker.active {
+    background: var(--success);
+}
+
+.timeline-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.timeline-day {
+    font-weight: 600;
+    color: var(--gray-700);
+}
+
+.timeline-discount {
+    color: var(--primary);
+    font-weight: 600;
+}
+
+.timeline-price {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--gray-900);
+}
+
+/* ============================================
+   Registration Section
+   ============================================ */
+.register {
+    padding: var(--section-padding) 0;
+    background: var(--gray-50);
+}
+
+.register-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.register-info h2 {
+    margin-bottom: 16px;
+}
+
+.register-info > p {
+    color: var(--gray-600);
+    font-size: 1.125rem;
+    margin-bottom: 32px;
+}
+
+.register-benefits {
+    list-style: none;
+}
+
+.register-benefits li {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: 1rem;
+    color: var(--gray-700);
+}
+
+.register-benefits li i {
+    color: var(--success);
+    font-size: 1.25rem;
+}
+
+/* Registration Form */
+.register-form-wrapper {
+    background: var(--white);
+    padding: 40px;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+}
+
+.register-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.form-group label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--gray-700);
+}
+
+.form-group input[type="text"],
+.form-group input[type="email"],
+.form-group input[type="url"] {
+    padding: 12px 16px;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    transition: var(--transition-fast);
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.checkbox-group {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.checkbox-group input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    margin-top: 2px;
+    accent-color: var(--primary);
+}
+
+.checkbox-group label {
+    font-size: 0.875rem;
+    color: var(--gray-600);
+    line-height: 1.4;
+}
+
+.checkbox-group label a {
+    color: var(--primary);
+}
+
+/* Form States */
+.form-success,
+.form-error {
+    text-align: center;
+    padding: 40px 20px;
+}
+
+.success-icon,
+.error-icon {
+    font-size: 4rem;
+    margin-bottom: 20px;
+}
+
+.success-icon {
+    color: var(--success);
+}
+
+.error-icon {
+    color: var(--error);
+}
+
+.form-success h3,
+.form-error h3 {
+    margin-bottom: 12px;
+}
+
+.form-success p,
+.form-error p {
+    color: var(--gray-600);
+    margin-bottom: 20px;
+}
+
+.success-details {
+    text-align: left;
+    background: var(--gray-50);
+    padding: 20px;
+    border-radius: var(--radius);
+    margin-top: 20px;
+}
+
+.success-details ol {
+    margin-left: 20px;
+    margin-top: 12px;
+}
+
+.success-details li {
+    padding: 4px 0;
+    color: var(--gray-600);
+}
+
+/* ============================================
+   FAQ Section
+   ============================================ */
+.faq {
+    padding: var(--section-padding) 0;
+    background: var(--white);
+}
+
+.faq-grid {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.faq-item {
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.faq-question {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--gray-900);
+    transition: var(--transition-fast);
+}
+
+.faq-question:hover {
+    color: var(--primary);
+}
+
+.faq-question i {
+    font-size: 0.875rem;
+    color: var(--gray-400);
+    transition: var(--transition);
+}
+
+.faq-item.active .faq-question i {
+    transform: rotate(180deg);
+}
+
+.faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.faq-item.active .faq-answer {
+    max-height: 500px;
+}
+
+.faq-answer p {
+    padding-bottom: 24px;
+    color: var(--gray-600);
+    line-height: 1.7;
+}
+
+/* ============================================
+   CTA Section
+   ============================================ */
+.cta {
+    padding: 80px 0;
+    background: var(--gradient-primary);
+}
+
+.cta-content {
+    text-align: center;
+    color: var(--white);
+}
+
+.cta-content h2 {
+    color: var(--white);
+    margin-bottom: 16px;
+}
+
+.cta-content p {
+    font-size: 1.25rem;
+    opacity: 0.9;
+    margin-bottom: 32px;
+}
+
+/* ============================================
+   Footer
+   ============================================ */
+.footer {
+    padding: 80px 0 40px;
+    background: var(--gray-900);
+    color: var(--gray-400);
+}
+
+.footer-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 48px;
+    margin-bottom: 48px;
+}
+
+.footer-brand .logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--white);
+    margin-bottom: 16px;
+}
+
+.footer-brand .logo img {
+    height: 40px;
+    filter: brightness(0) invert(1);
+}
+
+.footer-brand p {
+    margin-bottom: 24px;
+    line-height: 1.6;
+}
+
+.social-links {
+    display: flex;
+    gap: 16px;
+}
+
+.social-links a {
+    width: 40px;
+    height: 40px;
+    background: var(--gray-800);
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--gray-400);
+    transition: var(--transition);
+}
+
+.social-links a:hover {
+    background: var(--primary);
+    color: var(--white);
+}
+
+.footer-links h4 {
+    color: var(--white);
+    font-size: 1rem;
+    margin-bottom: 20px;
+}
+
+.footer-links ul {
+    list-style: none;
+}
+
+.footer-links li {
+    margin-bottom: 12px;
+}
+
+.footer-links a {
+    color: var(--gray-400);
+    transition: var(--transition-fast);
+}
+
+.footer-links a:hover {
+    color: var(--white);
+}
+
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 32px;
+    border-top: 1px solid var(--gray-800);
+    font-size: 0.875rem;
+}
+
+.footer-bottom i {
+    color: var(--error);
+}
+
+/* ============================================
+   Responsive Design
+   ============================================ */
+@media (max-width: 1024px) {
+    .hero .container {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+    
+    .hero-content {
+        order: 1;
+    }
+    
+    .hero-visual {
+        order: 2;
+    }
+    
+    .hero-subtitle {
+        margin: 0 auto 32px;
+    }
+    
+    .hero-cta {
+        justify-content: center;
+    }
+    
+    .hero-stats {
+        justify-content: center;
+    }
+    
+    .chat-preview {
+        margin: 0 auto;
+    }
+    
+    .features-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .pricing-grid {
+        grid-template-columns: 1fr;
+        max-width: 400px;
+        margin: 0 auto 60px;
+    }
+    
+    .pricing-card.featured {
+        transform: none;
+    }
+    
+    .register-wrapper {
+        grid-template-columns: 1fr;
+    }
+    
+    .register-info {
+        text-align: center;
+    }
+    
+    .register-benefits {
+        display: inline-block;
+        text-align: left;
+    }
+    
+    .footer-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    :root {
+        --section-padding: 60px;
+    }
+    
+    .navbar .container {
+        height: 64px;
+    }
+    
+    .nav-links {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: var(--white);
+        flex-direction: column;
+        padding: 20px;
+        gap: 16px;
+        border-bottom: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-lg);
+    }
+    
+    .nav-links.active {
+        display: flex;
+    }
+    
+    .mobile-menu-btn {
+        display: block;
+    }
+    
+    .hero {
+        padding: 120px 0 60px;
+    }
+    
+    .hero-cta {
+        flex-direction: column;
+    }
+    
+    .hero-stats {
+        flex-direction: column;
+        gap: 24px;
+    }
+    
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .steps {
+        flex-direction: column;
+        gap: 32px;
+    }
+    
+    .step-connector {
+        width: 2px;
+        height: 40px;
+        margin: 0;
+    }
+    
+    .timeline {
+        flex-direction: column;
+        gap: 24px;
+    }
+    
+    .timeline::before {
+        display: none;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .register-form-wrapper {
+        padding: 24px;
+    }
+    
+    .footer-grid {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+    
+    .social-links {
+        justify-content: center;
+    }
+    
+    .footer-bottom {
+        flex-direction: column;
+        gap: 12px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 16px;
+    }
+    
+    h1 {
+        font-size: 2rem;
+    }
+    
+    h2 {
+        font-size: 1.75rem;
+    }
+    
+    .btn-lg {
+        padding: 14px 24px;
+        font-size: 1rem;
+    }
+    
+    .chat-preview {
+        max-width: 100%;
+    }
+    
+    .discount-timeline {
+        padding: 24px;
+    }
+}
+
+/* ============================================
+   Animations
+   ============================================ */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.animate-fade-in-up {
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.6s ease forwards;
+}
+
+/* Scroll animations */
+.scroll-animate {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.scroll-animate.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Loading spinner */
+.spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: var(--white);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ============================================
+   Utility Classes
+   ============================================ */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.mt-1 { margin-top: 8px; }
+.mt-2 { margin-top: 16px; }
+.mt-3 { margin-top: 24px; }
+.mt-4 { margin-top: 32px; }
+
+.mb-1 { margin-bottom: 8px; }
+.mb-2 { margin-bottom: 16px; }
+.mb-3 { margin-bottom: 24px; }
+.mb-4 { margin-bottom: 32px; }
+
+.hidden { display: none !important; }
+.visible { display: block !important; }
diff --git a/dashboard.html b/dashboard.html
new file mode 100644
index 0000000..62ef39d
--- /dev/null
+++ b/dashboard.html
@@ -0,0 +1,480 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex, nofollow">
+    <title>Dashboard - BotKonzept</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="logo/20250119_Logo_Botkozept.svg">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/dashboard.css">
+</head>
+<body class="dashboard-body">
+    <!-- Dashboard Navigation -->
+    <nav class="dashboard-nav">
+        <div class="nav-brand">
+            <a href="index.html" class="logo">
+                <img src="logo/20250119_Logo_Botkozept.svg" alt="BotKonzept Logo">
+                <span>BotKonzept</span>
+            </a>
+        </div>
+        <div class="nav-user">
+            <div class="trial-badge" id="trialBadge">
+                <i class="fas fa-clock"></i>
+                <span>Trial: <strong id="trialDays">7</strong> Tage übrig</span>
+            </div>
+            <div class="user-menu">
+                <button class="user-btn" id="userMenuBtn">
+                    <div class="user-avatar">
+                        <i class="fas fa-user"></i>
+                    </div>
+                    <span id="userName">Max Mustermann</span>
+                    <i class="fas fa-chevron-down"></i>
+                </button>
+                <div class="user-dropdown" id="userDropdown">
+                    <a href="#settings"><i class="fas fa-cog"></i> Einstellungen</a>
+                    <a href="#billing"><i class="fas fa-credit-card"></i> Abrechnung</a>
+                    <a href="#support"><i class="fas fa-life-ring"></i> Support</a>
+                    <hr>
+                    <a href="index.html" class="logout"><i class="fas fa-sign-out-alt"></i> Abmelden</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Dashboard Layout -->
+    <div class="dashboard-layout">
+        <!-- Sidebar -->
+        <aside class="dashboard-sidebar">
+            <nav class="sidebar-nav">
+                <a href="#overview" class="nav-item active" data-section="overview">
+                    <i class="fas fa-home"></i>
+                    <span>Übersicht</span>
+                </a>
+                <a href="#documents" class="nav-item" data-section="documents">
+                    <i class="fas fa-file-pdf"></i>
+                    <span>Dokumente</span>
+                </a>
+                <a href="#chatbot" class="nav-item" data-section="chatbot">
+                    <i class="fas fa-robot"></i>
+                    <span>Chatbot</span>
+                </a>
+                <a href="#embed" class="nav-item" data-section="embed">
+                    <i class="fas fa-code"></i>
+                    <span>Einbinden</span>
+                </a>
+                <a href="#analytics" class="nav-item" data-section="analytics">
+                    <i class="fas fa-chart-line"></i>
+                    <span>Analytics</span>
+                </a>
+                <a href="#settings" class="nav-item" data-section="settings">
+                    <i class="fas fa-cog"></i>
+                    <span>Einstellungen</span>
+                </a>
+            </nav>
+            
+            <!-- Upgrade CTA -->
+            <div class="sidebar-cta">
+                <div class="cta-icon">
+                    <i class="fas fa-crown"></i>
+                </div>
+                <h4>Upgrade auf Starter</h4>
+                <p>Unbegrenzte Dokumente & mehr Features</p>
+                <a href="#upgrade" class="btn btn-primary btn-sm btn-block">
+                    <span class="discount-badge">30% Rabatt</span>
+                    Jetzt upgraden
+                </a>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="dashboard-main">
+            <!-- Overview Section -->
+            <section id="overview" class="dashboard-section active">
+                <div class="section-header">
+                    <h1>Willkommen zurück! 👋</h1>
+                    <p>Hier ist eine Übersicht Ihres Chatbots</p>
+                </div>
+
+                <!-- Stats Cards -->
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-icon blue">
+                            <i class="fas fa-file-pdf"></i>
+                        </div>
+                        <div class="stat-content">
+                            <span class="stat-value" id="docCount">0</span>
+                            <span class="stat-label">Dokumente</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon green">
+                            <i class="fas fa-comments"></i>
+                        </div>
+                        <div class="stat-content">
+                            <span class="stat-value" id="messageCount">0</span>
+                            <span class="stat-label">Nachrichten</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon purple">
+                            <i class="fas fa-users"></i>
+                        </div>
+                        <div class="stat-content">
+                            <span class="stat-value" id="visitorCount">0</span>
+                            <span class="stat-label">Besucher</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon orange">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <div class="stat-content">
+                            <span class="stat-value" id="satisfactionRate">-</span>
+                            <span class="stat-label">Zufriedenheit</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div class="quick-actions">
+                    <h2>Schnellstart</h2>
+                    <div class="actions-grid">
+                        <a href="#documents" class="action-card" data-section="documents">
+                            <div class="action-icon">
+                                <i class="fas fa-upload"></i>
+                            </div>
+                            <h3>PDF hochladen</h3>
+                            <p>Fügen Sie neue Dokumente zu Ihrer Wissensdatenbank hinzu</p>
+                        </a>
+                        <a href="#embed" class="action-card" data-section="embed">
+                            <div class="action-icon">
+                                <i class="fas fa-code"></i>
+                            </div>
+                            <h3>Code kopieren</h3>
+                            <p>Holen Sie sich den Embed-Code für Ihre Website</p>
+                        </a>
+                        <a href="#chatbot" class="action-card" data-section="chatbot">
+                            <div class="action-icon">
+                                <i class="fas fa-comment-dots"></i>
+                            </div>
+                            <h3>Chatbot testen</h3>
+                            <p>Testen Sie Ihren Chatbot live</p>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Trial Banner -->
+                <div class="trial-banner" id="trialBanner">
+                    <div class="banner-content">
+                        <div class="banner-icon">
+                            <i class="fas fa-gift"></i>
+                        </div>
+                        <div class="banner-text">
+                            <h3>🎉 Exklusives Angebot: 30% Frühbucher-Rabatt!</h3>
+                            <p>Upgraden Sie jetzt und sparen Sie €176,40 im ersten Jahr. Angebot endet in <strong id="offerCountdown">48:00:00</strong></p>
+                        </div>
+                        <a href="#upgrade" class="btn btn-primary">
+                            Jetzt für €34,30/Monat upgraden
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Documents Section -->
+            <section id="documents" class="dashboard-section">
+                <div class="section-header">
+                    <h1>Dokumente</h1>
+                    <p>Verwalten Sie Ihre Wissensdatenbank</p>
+                </div>
+
+                <!-- Upload Area -->
+                <div class="upload-area" id="uploadArea">
+                    <div class="upload-content">
+                        <div class="upload-icon">
+                            <i class="fas fa-cloud-upload-alt"></i>
+                        </div>
+                        <h3>PDF-Dateien hochladen</h3>
+                        <p>Ziehen Sie Dateien hierher oder klicken Sie zum Auswählen</p>
+                        <input type="file" id="fileInput" accept=".pdf" multiple hidden>
+                        <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
+                            <i class="fas fa-plus"></i> Dateien auswählen
+                        </button>
+                        <p class="upload-hint">Unterstützt: PDF (max. 10MB pro Datei)</p>
+                    </div>
+                </div>
+
+                <!-- Upload Progress -->
+                <div class="upload-progress" id="uploadProgress" style="display: none;">
+                    <div class="progress-header">
+                        <span>Wird hochgeladen...</span>
+                        <span id="uploadPercent">0%</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="progressFill"></div>
+                    </div>
+                </div>
+
+                <!-- Documents List -->
+                <div class="documents-list">
+                    <div class="list-header">
+                        <h2>Hochgeladene Dokumente</h2>
+                        <span class="doc-count" id="totalDocs">0 Dokumente</span>
+                    </div>
+                    <div class="documents-table" id="documentsTable">
+                        <div class="empty-state">
+                            <i class="fas fa-folder-open"></i>
+                            <h3>Noch keine Dokumente</h3>
+                            <p>Laden Sie Ihr erstes PDF hoch, um zu beginnen</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Chatbot Section -->
+            <section id="chatbot" class="dashboard-section">
+                <div class="section-header">
+                    <h1>Chatbot testen</h1>
+                    <p>Testen Sie Ihren Chatbot mit Ihren hochgeladenen Dokumenten</p>
+                </div>
+
+                <div class="chatbot-test-container">
+                    <div class="chat-window">
+                        <div class="chat-header">
+                            <div class="chat-avatar">
+                                <i class="fas fa-robot"></i>
+                            </div>
+                            <div class="chat-info">
+                                <span class="chat-name">Ihr Chatbot</span>
+                                <span class="chat-status"><i class="fas fa-circle"></i> Online</span>
+                            </div>
+                            <button class="btn btn-sm btn-outline" id="clearChat">
+                                <i class="fas fa-trash"></i> Leeren
+                            </button>
+                        </div>
+                        <div class="chat-messages" id="chatMessages">
+                            <div class="message bot">
+                                <p>Hallo! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen helfen?</p>
+                            </div>
+                        </div>
+                        <div class="chat-input-area">
+                            <input type="text" id="chatInput" placeholder="Stellen Sie eine Frage...">
+                            <button class="send-btn" id="sendBtn">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="chat-tips">
+                        <h3>💡 Tipps</h3>
+                        <ul>
+                            <li>Stellen Sie Fragen zu Ihren hochgeladenen Dokumenten</li>
+                            <li>Der Bot antwortet basierend auf Ihrer Wissensdatenbank</li>
+                            <li>Je mehr Dokumente, desto besser die Antworten</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Embed Section -->
+            <section id="embed" class="dashboard-section">
+                <div class="section-header">
+                    <h1>Chatbot einbinden</h1>
+                    <p>Integrieren Sie den Chatbot in Ihre Website</p>
+                </div>
+
+                <div class="embed-container">
+                    <!-- Embed Code -->
+                    <div class="embed-card">
+                        <h2><i class="fas fa-code"></i> Embed-Code</h2>
+                        <p>Kopieren Sie diesen Code und fügen Sie ihn vor dem <code>&lt;/body&gt;</code>-Tag Ihrer Website ein:</p>
+                        
+                        <div class="code-block">
+                            <pre id="embedCode">&lt;script src="https://botkonzept.de/embed/<span id="customerId">IHRE-ID</span>.js"&gt;&lt;/script&gt;</pre>
+                            <button class="copy-btn" onclick="copyEmbedCode()">
+                                <i class="fas fa-copy"></i> Kopieren
+                            </button>
+                        </div>
+                        
+                        <div class="copy-success" id="copySuccess" style="display: none;">
+                            <i class="fas fa-check"></i> Code kopiert!
+                        </div>
+                    </div>
+
+                    <!-- Webhook URLs -->
+                    <div class="embed-card">
+                        <h2><i class="fas fa-link"></i> API-Endpunkte</h2>
+                        <p>Für fortgeschrittene Integrationen:</p>
+                        
+                        <div class="endpoint-list">
+                            <div class="endpoint-item">
+                                <label>Chat-Webhook:</label>
+                                <div class="endpoint-url">
+                                    <code id="chatWebhook">https://sb-XXXXX.userman.de/webhook/rag-chat-webhook/chat</code>
+                                    <button class="copy-btn-sm" onclick="copyToClipboard('chatWebhook')">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="endpoint-item">
+                                <label>Upload-Formular:</label>
+                                <div class="endpoint-url">
+                                    <code id="uploadUrl">https://sb-XXXXX.userman.de/form/rag-upload-form</code>
+                                    <button class="copy-btn-sm" onclick="copyToClipboard('uploadUrl')">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Installation Guide -->
+                    <div class="embed-card">
+                        <h2><i class="fas fa-book"></i> Installationsanleitung</h2>
+                        
+                        <div class="install-steps">
+                            <div class="install-step">
+                                <div class="step-num">1</div>
+                                <div class="step-content">
+                                    <h4>Code kopieren</h4>
+                                    <p>Klicken Sie auf "Kopieren" um den Embed-Code in die Zwischenablage zu kopieren.</p>
+                                </div>
+                            </div>
+                            <div class="install-step">
+                                <div class="step-num">2</div>
+                                <div class="step-content">
+                                    <h4>In Website einfügen</h4>
+                                    <p>Fügen Sie den Code vor dem schließenden <code>&lt;/body&gt;</code>-Tag ein.</p>
+                                </div>
+                            </div>
+                            <div class="install-step">
+                                <div class="step-num">3</div>
+                                <div class="step-content">
+                                    <h4>Fertig!</h4>
+                                    <p>Der Chatbot erscheint automatisch unten rechts auf Ihrer Website.</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="platform-guides">
+                            <h4>Plattform-spezifische Anleitungen:</h4>
+                            <div class="platform-links">
+                                <a href="#" class="platform-link">
+                                    <i class="fab fa-wordpress"></i> WordPress
+                                </a>
+                                <a href="#" class="platform-link">
+                                    <i class="fab fa-shopify"></i> Shopify
+                                </a>
+                                <a href="#" class="platform-link">
+                                    <i class="fab fa-wix"></i> Wix
+                                </a>
+                                <a href="#" class="platform-link">
+                                    <i class="fab fa-squarespace"></i> Squarespace
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Analytics Section -->
+            <section id="analytics" class="dashboard-section">
+                <div class="section-header">
+                    <h1>Analytics</h1>
+                    <p>Verstehen Sie, wie Besucher mit Ihrem Chatbot interagieren</p>
+                </div>
+
+                <div class="analytics-placeholder">
+                    <div class="placeholder-icon">
+                        <i class="fas fa-chart-bar"></i>
+                    </div>
+                    <h3>Analytics verfügbar im Starter-Plan</h3>
+                    <p>Upgraden Sie, um detaillierte Statistiken zu sehen:</p>
+                    <ul>
+                        <li><i class="fas fa-check"></i> Häufigste Fragen</li>
+                        <li><i class="fas fa-check"></i> Antwortqualität</li>
+                        <li><i class="fas fa-check"></i> Besucherstatistiken</li>
+                        <li><i class="fas fa-check"></i> Conversion-Tracking</li>
+                    </ul>
+                    <a href="#upgrade" class="btn btn-primary">
+                        <i class="fas fa-crown"></i> Jetzt upgraden
+                    </a>
+                </div>
+            </section>
+
+            <!-- Settings Section -->
+            <section id="settings" class="dashboard-section">
+                <div class="section-header">
+                    <h1>Einstellungen</h1>
+                    <p>Passen Sie Ihren Chatbot an</p>
+                </div>
+
+                <div class="settings-grid">
+                    <!-- Appearance Settings -->
+                    <div class="settings-card">
+                        <h2><i class="fas fa-palette"></i> Erscheinungsbild</h2>
+                        
+                        <div class="setting-group">
+                            <label>Primärfarbe</label>
+                            <div class="color-picker">
+                                <input type="color" id="primaryColor" value="#6366f1">
+                                <span>#6366f1</span>
+                            </div>
+                        </div>
+                        
+                        <div class="setting-group">
+                            <label>Chatbot-Name</label>
+                            <input type="text" id="botName" value="Assistent" placeholder="z.B. Support-Bot">
+                        </div>
+                        
+                        <div class="setting-group">
+                            <label>Begrüßungsnachricht</label>
+                            <textarea id="welcomeMessage" rows="3">Hallo! Wie kann ich Ihnen helfen?</textarea>
+                        </div>
+                        
+                        <button class="btn btn-primary" onclick="saveSettings()">
+                            <i class="fas fa-save"></i> Speichern
+                        </button>
+                    </div>
+
+                    <!-- Account Settings -->
+                    <div class="settings-card">
+                        <h2><i class="fas fa-user"></i> Konto</h2>
+                        
+                        <div class="setting-group">
+                            <label>E-Mail</label>
+                            <input type="email" id="accountEmail" value="max@beispiel.de" disabled>
+                        </div>
+                        
+                        <div class="setting-group">
+                            <label>Plan</label>
+                            <div class="plan-info">
+                                <span class="plan-badge trial">Trial</span>
+                                <span>Endet am <strong id="trialEndDate">01.02.2025</strong></span>
+                            </div>
+                        </div>
+                        
+                        <a href="#upgrade" class="btn btn-outline btn-block">
+                            <i class="fas fa-crown"></i> Plan upgraden
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Scripts -->
+    <script src="js/dashboard.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8cceef2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="BotKonzept - Ihr KI-Chatbot für die Website. Einfach einrichten, PDF hochladen, fertig!">
+    <meta name="keywords" content="KI Chatbot, Website Chatbot, RAG, PDF Chatbot, Kundenservice Automation">
+    <title>BotKonzept - KI-Chatbot für Ihre Website</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="logo/20250119_Logo_Botkozept.svg">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar" id="navbar">
+        <div class="container">
+            <a href="#" class="logo">
+                <img src="logo/20250119_Logo_Botkozept.svg" alt="BotKonzept Logo">
+                <span>BotKonzept</span>
+            </a>
+            <div class="nav-links" id="navLinks">
+                <a href="#features">Features</a>
+                <a href="#how-it-works">So funktioniert's</a>
+                <a href="#pricing">Preise</a>
+                <a href="#faq">FAQ</a>
+                <a href="#register" class="btn btn-primary btn-sm">Kostenlos testen</a>
+            </div>
+            <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Menü öffnen">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-badge">
+                    <i class="fas fa-rocket"></i>
+                    <span>7 Tage kostenlos testen</span>
+                </div>
+                <h1>Ihr intelligenter <span class="gradient-text">KI-Chatbot</span> für die Website</h1>
+                <p class="hero-subtitle">
+                    Laden Sie einfach Ihre PDFs hoch und Ihr Chatbot beantwortet Kundenfragen automatisch. 
+                    Keine Programmierung erforderlich – in 5 Minuten einsatzbereit.
+                </p>
+                <div class="hero-cta">
+                    <a href="#register" class="btn btn-primary btn-lg">
+                        <i class="fas fa-play"></i>
+                        Jetzt kostenlos starten
+                    </a>
+                    <a href="#how-it-works" class="btn btn-outline btn-lg">
+                        <i class="fas fa-info-circle"></i>
+                        Mehr erfahren
+                    </a>
+                </div>
+                <div class="hero-stats">
+                    <div class="stat">
+                        <span class="stat-number">5 Min</span>
+                        <span class="stat-label">Setup-Zeit</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-number">100%</span>
+                        <span class="stat-label">DSGVO-konform</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-number">24/7</span>
+                        <span class="stat-label">Verfügbar</span>
+                    </div>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="chat-preview">
+                    <div class="chat-header">
+                        <div class="chat-avatar">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <div class="chat-info">
+                            <span class="chat-name">BotKonzept Assistent</span>
+                            <span class="chat-status"><i class="fas fa-circle"></i> Online</span>
+                        </div>
+                    </div>
+                    <div class="chat-messages">
+                        <div class="message bot">
+                            <p>Hallo! 👋 Wie kann ich Ihnen heute helfen?</p>
+                        </div>
+                        <div class="message user">
+                            <p>Was sind Ihre Öffnungszeiten?</p>
+                        </div>
+                        <div class="message bot">
+                            <p>Unsere Öffnungszeiten sind Montag bis Freitag von 9:00 bis 18:00 Uhr. Am Wochenende sind wir geschlossen.</p>
+                        </div>
+                        <div class="message user">
+                            <p>Wie kann ich eine Bestellung aufgeben?</p>
+                        </div>
+                        <div class="message bot typing">
+                            <span class="typing-indicator">
+                                <span></span><span></span><span></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="chat-input">
+                        <input type="text" placeholder="Nachricht eingeben...">
+                        <button><i class="fas fa-paper-plane"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="hero-bg">
+            <div class="gradient-orb orb-1"></div>
+            <div class="gradient-orb orb-2"></div>
+            <div class="gradient-orb orb-3"></div>
+        </div>
+    </section>
+
+    <!-- Trusted By Section -->
+    <section class="trusted-by">
+        <div class="container">
+            <p class="trusted-label">Vertraut von innovativen Unternehmen</p>
+            <div class="trusted-logos">
+                <div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen A</div>
+                <div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen B</div>
+                <div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen C</div>
+                <div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen D</div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="features" id="features">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-badge">Features</span>
+                <h2>Alles was Sie für einen erfolgreichen Chatbot brauchen</h2>
+                <p>Leistungsstarke Funktionen, die Ihren Kundenservice revolutionieren</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-file-pdf"></i>
+                    </div>
+                    <h3>PDF-Upload</h3>
+                    <p>Laden Sie einfach Ihre Dokumente hoch. Der Chatbot lernt automatisch aus Ihren Inhalten.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <h3>KI-gestützte Antworten</h3>
+                    <p>Modernste KI-Technologie für natürliche und präzise Antworten auf Kundenfragen.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-code"></i>
+                    </div>
+                    <h3>Einfache Integration</h3>
+                    <p>Ein Zeile Code – mehr brauchen Sie nicht. Funktioniert mit jeder Website.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3>DSGVO-konform</h3>
+                    <p>Alle Daten werden in Deutschland gehostet. 100% DSGVO-konform.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-palette"></i>
+                    </div>
+                    <h3>Anpassbares Design</h3>
+                    <p>Passen Sie Farben und Stil an Ihre Marke an. Ihr Chatbot, Ihr Look.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-chart-line"></i>
+                    </div>
+                    <h3>Analytics Dashboard</h3>
+                    <p>Verstehen Sie, was Ihre Kunden fragen. Detaillierte Statistiken und Insights.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- How It Works Section -->
+    <section class="how-it-works" id="how-it-works">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-badge">So funktioniert's</span>
+                <h2>In 3 einfachen Schritten zum eigenen KI-Chatbot</h2>
+                <p>Keine technischen Kenntnisse erforderlich</p>
+            </div>
+            <div class="steps">
+                <div class="step">
+                    <div class="step-number">1</div>
+                    <div class="step-content">
+                        <h3>Registrieren</h3>
+                        <p>Erstellen Sie Ihr kostenloses Konto in weniger als einer Minute. Keine Kreditkarte erforderlich.</p>
+                    </div>
+                    <div class="step-icon">
+                        <i class="fas fa-user-plus"></i>
+                    </div>
+                </div>
+                <div class="step-connector"></div>
+                <div class="step">
+                    <div class="step-number">2</div>
+                    <div class="step-content">
+                        <h3>PDFs hochladen</h3>
+                        <p>Laden Sie Ihre Dokumente hoch – FAQs, Produktinfos, Anleitungen. Der Bot lernt automatisch.</p>
+                    </div>
+                    <div class="step-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </div>
+                </div>
+                <div class="step-connector"></div>
+                <div class="step">
+                    <div class="step-number">3</div>
+                    <div class="step-content">
+                        <h3>Code einbinden</h3>
+                        <p>Kopieren Sie den Code-Snippet und fügen Sie ihn in Ihre Website ein. Fertig!</p>
+                    </div>
+                    <div class="step-icon">
+                        <i class="fas fa-code"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="code-preview">
+                <div class="code-header">
+                    <span class="code-dot red"></span>
+                    <span class="code-dot yellow"></span>
+                    <span class="code-dot green"></span>
+                    <span class="code-title">Ihr Embed-Code</span>
+                </div>
+                <pre><code>&lt;script src="https://botkonzept.de/embed/IHRE-ID.js"&gt;&lt;/script&gt;</code></pre>
+            </div>
+        </div>
+    </section>
+
+    <!-- Pricing Section -->
+    <section class="pricing" id="pricing">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-badge">Preise</span>
+                <h2>Transparente Preise, keine versteckten Kosten</h2>
+                <p>Starten Sie kostenlos und upgraden Sie, wenn Sie bereit sind</p>
+            </div>
+            <div class="pricing-grid">
+                <!-- Trial Plan -->
+                <div class="pricing-card">
+                    <div class="pricing-header">
+                        <h3>Trial</h3>
+                        <div class="price">
+                            <span class="currency">€</span>
+                            <span class="amount">0</span>
+                            <span class="period">/7 Tage</span>
+                        </div>
+                        <p class="pricing-description">Perfekt zum Testen</p>
+                    </div>
+                    <ul class="pricing-features">
+                        <li><i class="fas fa-check"></i> 100 Dokumente</li>
+                        <li><i class="fas fa-check"></i> 1.000 Nachrichten</li>
+                        <li><i class="fas fa-check"></i> 1 Chatbot</li>
+                        <li><i class="fas fa-check"></i> Standard Support</li>
+                        <li class="disabled"><i class="fas fa-times"></i> Custom Branding</li>
+                        <li class="disabled"><i class="fas fa-times"></i> Analytics</li>
+                    </ul>
+                    <a href="#register" class="btn btn-outline btn-block">Kostenlos starten</a>
+                </div>
+
+                <!-- Starter Plan -->
+                <div class="pricing-card featured">
+                    <div class="pricing-badge">Beliebt</div>
+                    <div class="pricing-header">
+                        <h3>Starter</h3>
+                        <div class="price">
+                            <span class="currency">€</span>
+                            <span class="amount">49</span>
+                            <span class="period">/Monat</span>
+                        </div>
+                        <p class="pricing-description">Für kleine Unternehmen</p>
+                    </div>
+                    <ul class="pricing-features">
+                        <li><i class="fas fa-check"></i> Unbegrenzte Dokumente</li>
+                        <li><i class="fas fa-check"></i> 10.000 Nachrichten/Monat</li>
+                        <li><i class="fas fa-check"></i> 1 Chatbot</li>
+                        <li><i class="fas fa-check"></i> Prioritäts-Support</li>
+                        <li><i class="fas fa-check"></i> Custom Branding</li>
+                        <li><i class="fas fa-check"></i> Analytics Dashboard</li>
+                    </ul>
+                    <a href="#register" class="btn btn-primary btn-block">Jetzt starten</a>
+                    <p class="pricing-note">
+                        <i class="fas fa-gift"></i> 
+                        <span class="discount-tag">30% Rabatt</span> bei Upgrade innerhalb von 3 Tagen
+                    </p>
+                </div>
+
+                <!-- Business Plan -->
+                <div class="pricing-card">
+                    <div class="pricing-header">
+                        <h3>Business</h3>
+                        <div class="price">
+                            <span class="currency">€</span>
+                            <span class="amount">149</span>
+                            <span class="period">/Monat</span>
+                        </div>
+                        <p class="pricing-description">Für wachsende Teams</p>
+                    </div>
+                    <ul class="pricing-features">
+                        <li><i class="fas fa-check"></i> Unbegrenzte Dokumente</li>
+                        <li><i class="fas fa-check"></i> 50.000 Nachrichten/Monat</li>
+                        <li><i class="fas fa-check"></i> 5 Chatbots</li>
+                        <li><i class="fas fa-check"></i> Dedizierter Support</li>
+                        <li><i class="fas fa-check"></i> API-Zugriff</li>
+                        <li><i class="fas fa-check"></i> SLA-Garantie</li>
+                    </ul>
+                    <a href="#register" class="btn btn-outline btn-block">Kontakt aufnehmen</a>
+                </div>
+            </div>
+
+            <!-- Discount Timeline -->
+            <div class="discount-timeline">
+                <h3><i class="fas fa-clock"></i> Frühbucher-Rabatte</h3>
+                <div class="timeline">
+                    <div class="timeline-item">
+                        <div class="timeline-marker active"></div>
+                        <div class="timeline-content">
+                            <span class="timeline-day">Tag 1-3</span>
+                            <span class="timeline-discount">30% Rabatt</span>
+                            <span class="timeline-price">€34,30/Monat</span>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-marker"></div>
+                        <div class="timeline-content">
+                            <span class="timeline-day">Tag 4-5</span>
+                            <span class="timeline-discount">15% Rabatt</span>
+                            <span class="timeline-price">€41,65/Monat</span>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-marker"></div>
+                        <div class="timeline-content">
+                            <span class="timeline-day">Tag 6-7</span>
+                            <span class="timeline-discount">Normalpreis</span>
+                            <span class="timeline-price">€49/Monat</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Registration Section -->
+    <section class="register" id="register">
+        <div class="container">
+            <div class="register-wrapper">
+                <div class="register-info">
+                    <h2>Starten Sie Ihre <span class="gradient-text">7-Tage Trial</span></h2>
+                    <p>Keine Kreditkarte erforderlich. Voller Funktionsumfang. Jederzeit kündbar.</p>
+                    <ul class="register-benefits">
+                        <li><i class="fas fa-check-circle"></i> Sofortiger Zugang</li>
+                        <li><i class="fas fa-check-circle"></i> Keine Zahlungsdaten nötig</li>
+                        <li><i class="fas fa-check-circle"></i> Persönlicher Support</li>
+                        <li><i class="fas fa-check-circle"></i> Alle Features inklusive</li>
+                    </ul>
+                </div>
+                <div class="register-form-wrapper">
+                    <form id="registerForm" class="register-form">
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label for="firstName">Vorname *</label>
+                                <input type="text" id="firstName" name="firstName" required placeholder="Max">
+                            </div>
+                            <div class="form-group">
+                                <label for="lastName">Nachname *</label>
+                                <input type="text" id="lastName" name="lastName" required placeholder="Mustermann">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="email">E-Mail-Adresse *</label>
+                            <input type="email" id="email" name="email" required placeholder="max@beispiel.de">
+                        </div>
+                        <div class="form-group">
+                            <label for="company">Unternehmen (optional)</label>
+                            <input type="text" id="company" name="company" placeholder="Muster GmbH">
+                        </div>
+                        <div class="form-group">
+                            <label for="website">Website (optional)</label>
+                            <input type="url" id="website" name="website" placeholder="https://www.beispiel.de">
+                        </div>
+                        <div class="form-group checkbox-group">
+                            <input type="checkbox" id="privacy" name="privacy" required>
+                            <label for="privacy">
+                                Ich akzeptiere die <a href="#" target="_blank">Datenschutzerklärung</a> und 
+                                <a href="#" target="_blank">AGB</a> *
+                            </label>
+                        </div>
+                        <div class="form-group checkbox-group">
+                            <input type="checkbox" id="newsletter" name="newsletter">
+                            <label for="newsletter">
+                                Ich möchte Updates und Tipps per E-Mail erhalten (optional)
+                            </label>
+                        </div>
+                        <button type="submit" class="btn btn-primary btn-lg btn-block" id="submitBtn">
+                            <span class="btn-text">Kostenlos registrieren</span>
+                            <span class="btn-loading" style="display: none;">
+                                <i class="fas fa-spinner fa-spin"></i> Wird erstellt...
+                            </span>
+                        </button>
+                    </form>
+                    <div id="formSuccess" class="form-success" style="display: none;">
+                        <div class="success-icon">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <h3>Willkommen bei BotKonzept!</h3>
+                        <p>Ihre Instanz wird gerade erstellt. Sie erhalten in Kürze eine E-Mail mit Ihren Zugangsdaten.</p>
+                        <div class="success-details">
+                            <p><strong>Nächste Schritte:</strong></p>
+                            <ol>
+                                <li>Prüfen Sie Ihren Posteingang</li>
+                                <li>Klicken Sie auf den Aktivierungslink</li>
+                                <li>Laden Sie Ihr erstes PDF hoch</li>
+                            </ol>
+                        </div>
+                    </div>
+                    <div id="formError" class="form-error" style="display: none;">
+                        <div class="error-icon">
+                            <i class="fas fa-exclamation-circle"></i>
+                        </div>
+                        <h3>Ups, etwas ist schiefgelaufen</h3>
+                        <p id="errorMessage">Bitte versuchen Sie es später erneut.</p>
+                        <button class="btn btn-outline" onclick="resetForm()">Erneut versuchen</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ Section -->
+    <section class="faq" id="faq">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-badge">FAQ</span>
+                <h2>Häufig gestellte Fragen</h2>
+                <p>Alles was Sie wissen müssen</p>
+            </div>
+            <div class="faq-grid">
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Wie funktioniert der KI-Chatbot?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Unser Chatbot nutzt modernste KI-Technologie (RAG - Retrieval Augmented Generation). 
+                        Sie laden Ihre Dokumente hoch, und der Bot durchsucht diese, um präzise Antworten auf 
+                        Kundenfragen zu geben. Die KI versteht den Kontext und formuliert natürliche Antworten.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Welche Dateiformate werden unterstützt?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Aktuell unterstützen wir PDF-Dateien. Weitere Formate wie Word, Excel und 
+                        Textdateien sind in Planung. Sie können beliebig viele PDFs hochladen – 
+                        FAQs, Produktkataloge, Anleitungen, etc.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Ist der Service DSGVO-konform?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Ja, 100%! Alle Daten werden ausschließlich auf Servern in Deutschland gehostet. 
+                        Wir verarbeiten keine Daten außerhalb der EU. Sie erhalten einen 
+                        Auftragsverarbeitungsvertrag (AVV) auf Anfrage.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Kann ich den Chatbot an mein Design anpassen?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Ja! Im Starter- und Business-Plan können Sie Farben, Logo und Begrüßungstext 
+                        anpassen. Der Chatbot fügt sich nahtlos in Ihr Website-Design ein.</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Was passiert nach der Trial-Phase?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Nach 7 Tagen endet Ihre Trial automatisch. Sie können jederzeit auf einen 
+                        bezahlten Plan upgraden. Wenn Sie innerhalb der ersten 3 Tage upgraden, 
+                        erhalten Sie 30% Rabatt!</p>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Wie integriere ich den Chatbot in meine Website?</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Ganz einfach! Sie erhalten einen Code-Snippet, den Sie vor dem &lt;/body&gt;-Tag 
+                        Ihrer Website einfügen. Das funktioniert mit WordPress, Shopify, Wix, 
+                        und jeder anderen Website.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta">
+        <div class="container">
+            <div class="cta-content">
+                <h2>Bereit, Ihren Kundenservice zu revolutionieren?</h2>
+                <p>Starten Sie noch heute Ihre kostenlose 7-Tage-Trial</p>
+                <a href="#register" class="btn btn-white btn-lg">
+                    <i class="fas fa-rocket"></i>
+                    Jetzt kostenlos starten
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <a href="#" class="logo">
+                        <img src="logo/20250119_Logo_Botkozept.svg" alt="BotKonzept Logo">
+                        <span>BotKonzept</span>
+                    </a>
+                    <p>Ihr intelligenter KI-Chatbot für besseren Kundenservice.</p>
+                    <div class="social-links">
+                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                        <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h4>Produkt</h4>
+                    <ul>
+                        <li><a href="#features">Features</a></li>
+                        <li><a href="#pricing">Preise</a></li>
+                        <li><a href="#faq">FAQ</a></li>
+                        <li><a href="#">Dokumentation</a></li>
+                    </ul>
+                </div>
+                <div class="footer-links">
+                    <h4>Unternehmen</h4>
+                    <ul>
+                        <li><a href="#">Über uns</a></li>
+                        <li><a href="#">Blog</a></li>
+                        <li><a href="#">Karriere</a></li>
+                        <li><a href="#">Kontakt</a></li>
+                    </ul>
+                </div>
+                <div class="footer-links">
+                    <h4>Rechtliches</h4>
+                    <ul>
+                        <li><a href="#">Impressum</a></li>
+                        <li><a href="#">Datenschutz</a></li>
+                        <li><a href="#">AGB</a></li>
+                        <li><a href="#">Cookie-Einstellungen</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 BotKonzept. Alle Rechte vorbehalten.</p>
+                <p>Made with <i class="fas fa-heart"></i> in Germany</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Custom JS -->
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/dashboard.js b/js/dashboard.js
new file mode 100644
index 0000000..7662a11
--- /dev/null
+++ b/js/dashboard.js
@@ -0,0 +1,744 @@
+/**
+ * BotKonzept Dashboard JavaScript
+ * ================================
+ * Handles all dashboard functionality
+ */
+
+// Configuration
+const DASHBOARD_CONFIG = {
+    // API Endpoints - Update for production
+    API_BASE_URL: 'https://api.botkonzept.de',
+    CHAT_WEBHOOK_URL: '', // Will be set from customer data
+    UPLOAD_URL: '', // Will be set from customer data
+    
+    // Customer data (loaded from localStorage or API)
+    customerId: null,
+    customerData: null,
+    
+    // Trial settings
+    trialDays: 7,
+    discountDay3: 0.30, // 30% discount
+    discountDay5: 0.15, // 15% discount
+};
+
+// ============================================
+// DOM Ready
+// ============================================
+document.addEventListener('DOMContentLoaded', () => {
+    initDashboard();
+    initNavigation();
+    initUserMenu();
+    initFileUpload();
+    initChatbot();
+    initSectionNavigation();
+    loadCustomerData();
+    updateTrialStatus();
+});
+
+// ============================================
+// Dashboard Initialization
+// ============================================
+function initDashboard() {
+    // Check if user is logged in (for demo, we'll simulate this)
+    const isLoggedIn = localStorage.getItem('botkonzept_session') || true; // Demo mode
+    
+    if (!isLoggedIn) {
+        window.location.href = 'index.html';
+        return;
+    }
+    
+    // Load customer data from localStorage or use demo data
+    const storedData = localStorage.getItem('botkonzept_customer');
+    if (storedData) {
+        DASHBOARD_CONFIG.customerData = JSON.parse(storedData);
+    } else {
+        // Demo data
+        DASHBOARD_CONFIG.customerData = {
+            id: 'demo-' + Date.now(),
+            firstName: 'Max',
+            lastName: 'Mustermann',
+            email: 'max@beispiel.de',
+            company: 'Muster GmbH',
+            trialStartDate: new Date().toISOString(),
+            instanceUrl: 'https://sb-demo.userman.de',
+            chatWebhook: 'https://sb-demo.userman.de/webhook/rag-chat-webhook/chat',
+            uploadUrl: 'https://sb-demo.userman.de/form/rag-upload-form',
+        };
+    }
+    
+    // Update UI with customer data
+    updateCustomerUI();
+}
+
+// ============================================
+// Navigation
+// ============================================
+function initNavigation() {
+    // Sidebar navigation
+    const navItems = document.querySelectorAll('.sidebar-nav .nav-item');
+    const sections = document.querySelectorAll('.dashboard-section');
+    
+    navItems.forEach(item => {
+        item.addEventListener('click', (e) => {
+            e.preventDefault();
+            const sectionId = item.getAttribute('data-section');
+            
+            // Update active states
+            navItems.forEach(nav => nav.classList.remove('active'));
+            item.classList.add('active');
+            
+            // Show corresponding section
+            sections.forEach(section => {
+                section.classList.remove('active');
+                if (section.id === sectionId) {
+                    section.classList.add('active');
+                }
+            });
+            
+            // Update URL hash
+            window.location.hash = sectionId;
+        });
+    });
+    
+    // Handle initial hash
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+        const targetNav = document.querySelector(`[data-section="${hash}"]`);
+        if (targetNav) {
+            targetNav.click();
+        }
+    }
+}
+
+function initSectionNavigation() {
+    // Quick action cards
+    const actionCards = document.querySelectorAll('.action-card');
+    actionCards.forEach(card => {
+        card.addEventListener('click', (e) => {
+            e.preventDefault();
+            const sectionId = card.getAttribute('data-section');
+            const targetNav = document.querySelector(`[data-section="${sectionId}"]`);
+            if (targetNav) {
+                targetNav.click();
+            }
+        });
+    });
+}
+
+// ============================================
+// User Menu
+// ============================================
+function initUserMenu() {
+    const userBtn = document.getElementById('userMenuBtn');
+    const userDropdown = document.getElementById('userDropdown');
+    
+    if (!userBtn || !userDropdown) return;
+    
+    userBtn.addEventListener('click', () => {
+        userDropdown.classList.toggle('active');
+    });
+    
+    // Close on outside click
+    document.addEventListener('click', (e) => {
+        if (!userBtn.contains(e.target) && !userDropdown.contains(e.target)) {
+            userDropdown.classList.remove('active');
+        }
+    });
+}
+
+// ============================================
+// Customer Data
+// ============================================
+function loadCustomerData() {
+    const data = DASHBOARD_CONFIG.customerData;
+    if (!data) return;
+    
+    // Update customer ID in embed code
+    const customerIdEl = document.getElementById('customerId');
+    if (customerIdEl) {
+        customerIdEl.textContent = data.id;
+    }
+    
+    // Update webhook URLs
+    const chatWebhookEl = document.getElementById('chatWebhook');
+    if (chatWebhookEl && data.chatWebhook) {
+        chatWebhookEl.textContent = data.chatWebhook;
+    }
+    
+    const uploadUrlEl = document.getElementById('uploadUrl');
+    if (uploadUrlEl && data.uploadUrl) {
+        uploadUrlEl.textContent = data.uploadUrl;
+    }
+    
+    // Update user name
+    const userNameEl = document.getElementById('userName');
+    if (userNameEl) {
+        userNameEl.textContent = `${data.firstName} ${data.lastName}`;
+    }
+    
+    // Update account email
+    const accountEmailEl = document.getElementById('accountEmail');
+    if (accountEmailEl) {
+        accountEmailEl.value = data.email;
+    }
+}
+
+function updateCustomerUI() {
+    loadCustomerData();
+    
+    // Update stats (demo data)
+    updateStats({
+        documents: 0,
+        messages: 0,
+        visitors: 0,
+        satisfaction: '-'
+    });
+}
+
+function updateStats(stats) {
+    const docCountEl = document.getElementById('docCount');
+    const messageCountEl = document.getElementById('messageCount');
+    const visitorCountEl = document.getElementById('visitorCount');
+    const satisfactionEl = document.getElementById('satisfactionRate');
+    
+    if (docCountEl) docCountEl.textContent = stats.documents;
+    if (messageCountEl) messageCountEl.textContent = stats.messages;
+    if (visitorCountEl) visitorCountEl.textContent = stats.visitors;
+    if (satisfactionEl) satisfactionEl.textContent = stats.satisfaction;
+}
+
+// ============================================
+// Trial Status
+// ============================================
+function updateTrialStatus() {
+    const data = DASHBOARD_CONFIG.customerData;
+    if (!data || !data.trialStartDate) return;
+    
+    const trialStart = new Date(data.trialStartDate);
+    const now = new Date();
+    const daysPassed = Math.floor((now - trialStart) / (1000 * 60 * 60 * 24));
+    const daysRemaining = Math.max(0, DASHBOARD_CONFIG.trialDays - daysPassed);
+    
+    // Update trial badge
+    const trialDaysEl = document.getElementById('trialDays');
+    if (trialDaysEl) {
+        trialDaysEl.textContent = daysRemaining;
+    }
+    
+    // Update trial end date
+    const trialEndDateEl = document.getElementById('trialEndDate');
+    if (trialEndDateEl) {
+        const endDate = new Date(trialStart);
+        endDate.setDate(endDate.getDate() + DASHBOARD_CONFIG.trialDays);
+        trialEndDateEl.textContent = formatDate(endDate);
+    }
+    
+    // Show/hide discount banner based on days
+    const trialBanner = document.getElementById('trialBanner');
+    if (trialBanner) {
+        if (daysPassed <= 3) {
+            // Show 30% discount
+            trialBanner.querySelector('h3').textContent = '🎉 Exklusives Angebot: 30% Frühbucher-Rabatt!';
+            trialBanner.querySelector('.btn').textContent = 'Jetzt für €34,30/Monat upgraden';
+        } else if (daysPassed <= 5) {
+            // Show 15% discount
+            trialBanner.querySelector('h3').textContent = '⏰ Nur noch 2 Tage: 15% Rabatt!';
+            trialBanner.querySelector('.btn').textContent = 'Jetzt für €41,65/Monat upgraden';
+        } else {
+            // Show normal price
+            trialBanner.querySelector('h3').textContent = '⚠️ Ihre Trial endet bald!';
+            trialBanner.querySelector('.btn').textContent = 'Jetzt für €49/Monat upgraden';
+        }
+    }
+    
+    // Start countdown timer
+    startOfferCountdown();
+}
+
+function startOfferCountdown() {
+    const countdownEl = document.getElementById('offerCountdown');
+    if (!countdownEl) return;
+    
+    // Set countdown to 48 hours from now (for demo)
+    let timeRemaining = 48 * 60 * 60; // 48 hours in seconds
+    
+    const updateCountdown = () => {
+        const hours = Math.floor(timeRemaining / 3600);
+        const minutes = Math.floor((timeRemaining % 3600) / 60);
+        const seconds = timeRemaining % 60;
+        
+        countdownEl.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+        
+        if (timeRemaining > 0) {
+            timeRemaining--;
+            setTimeout(updateCountdown, 1000);
+        }
+    };
+    
+    updateCountdown();
+}
+
+// ============================================
+// File Upload
+// ============================================
+function initFileUpload() {
+    const uploadArea = document.getElementById('uploadArea');
+    const fileInput = document.getElementById('fileInput');
+    
+    if (!uploadArea || !fileInput) return;
+    
+    // Drag and drop
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('dragover');
+    });
+    
+    uploadArea.addEventListener('dragleave', () => {
+        uploadArea.classList.remove('dragover');
+    });
+    
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+        
+        const files = e.dataTransfer.files;
+        handleFiles(files);
+    });
+    
+    // File input change
+    fileInput.addEventListener('change', () => {
+        handleFiles(fileInput.files);
+    });
+}
+
+function handleFiles(files) {
+    const validFiles = Array.from(files).filter(file => {
+        if (file.type !== 'application/pdf') {
+            showNotification('Nur PDF-Dateien werden unterstützt', 'error');
+            return false;
+        }
+        if (file.size > 10 * 1024 * 1024) { // 10MB
+            showNotification(`${file.name} ist zu groß (max. 10MB)`, 'error');
+            return false;
+        }
+        return true;
+    });
+    
+    if (validFiles.length === 0) return;
+    
+    validFiles.forEach(file => uploadFile(file));
+}
+
+async function uploadFile(file) {
+    const uploadProgress = document.getElementById('uploadProgress');
+    const progressFill = document.getElementById('progressFill');
+    const uploadPercent = document.getElementById('uploadPercent');
+    
+    // Show progress
+    if (uploadProgress) uploadProgress.style.display = 'block';
+    
+    try {
+        // Simulate upload progress (replace with actual upload)
+        for (let i = 0; i <= 100; i += 10) {
+            await new Promise(resolve => setTimeout(resolve, 200));
+            if (progressFill) progressFill.style.width = `${i}%`;
+            if (uploadPercent) uploadPercent.textContent = `${i}%`;
+        }
+        
+        // Add document to list
+        addDocumentToList({
+            name: file.name,
+            size: formatFileSize(file.size),
+            date: new Date().toLocaleDateString('de-DE'),
+            status: 'processing'
+        });
+        
+        showNotification(`${file.name} wurde hochgeladen`, 'success');
+        
+        // Simulate processing
+        setTimeout(() => {
+            updateDocumentStatus(file.name, 'indexed');
+            updateDocCount();
+        }, 3000);
+        
+    } catch (error) {
+        console.error('Upload error:', error);
+        showNotification('Fehler beim Hochladen', 'error');
+    } finally {
+        // Hide progress
+        setTimeout(() => {
+            if (uploadProgress) uploadProgress.style.display = 'none';
+            if (progressFill) progressFill.style.width = '0%';
+        }, 500);
+    }
+}
+
+function addDocumentToList(doc) {
+    const documentsTable = document.getElementById('documentsTable');
+    if (!documentsTable) return;
+    
+    // Remove empty state if present
+    const emptyState = documentsTable.querySelector('.empty-state');
+    if (emptyState) emptyState.remove();
+    
+    const docRow = document.createElement('div');
+    docRow.className = 'document-row';
+    docRow.dataset.name = doc.name;
+    docRow.innerHTML = `
+        <div class="doc-icon">
+            <i class="fas fa-file-pdf"></i>
+        </div>
+        <div class="doc-info">
+            <div class="doc-name">${doc.name}</div>
+            <div class="doc-meta">${doc.size} • ${doc.date}</div>
+        </div>
+        <span class="doc-status ${doc.status}">${doc.status === 'indexed' ? 'Indexiert' : 'Verarbeitung...'}</span>
+        <div class="doc-actions">
+            <button title="Herunterladen"><i class="fas fa-download"></i></button>
+            <button class="delete" title="Löschen" onclick="deleteDocument('${doc.name}')"><i class="fas fa-trash"></i></button>
+        </div>
+    `;
+    
+    documentsTable.appendChild(docRow);
+}
+
+function updateDocumentStatus(name, status) {
+    const docRow = document.querySelector(`.document-row[data-name="${name}"]`);
+    if (!docRow) return;
+    
+    const statusEl = docRow.querySelector('.doc-status');
+    if (statusEl) {
+        statusEl.className = `doc-status ${status}`;
+        statusEl.textContent = status === 'indexed' ? 'Indexiert' : 'Verarbeitung...';
+    }
+}
+
+function deleteDocument(name) {
+    if (!confirm(`Möchten Sie "${name}" wirklich löschen?`)) return;
+    
+    const docRow = document.querySelector(`.document-row[data-name="${name}"]`);
+    if (docRow) {
+        docRow.remove();
+        updateDocCount();
+        showNotification('Dokument gelöscht', 'success');
+    }
+    
+    // Show empty state if no documents
+    const documentsTable = document.getElementById('documentsTable');
+    if (documentsTable && documentsTable.children.length === 0) {
+        documentsTable.innerHTML = `
+            <div class="empty-state">
+                <i class="fas fa-folder-open"></i>
+                <h3>Noch keine Dokumente</h3>
+                <p>Laden Sie Ihr erstes PDF hoch, um zu beginnen</p>
+            </div>
+        `;
+    }
+}
+
+function updateDocCount() {
+    const documentsTable = document.getElementById('documentsTable');
+    const totalDocsEl = document.getElementById('totalDocs');
+    const docCountEl = document.getElementById('docCount');
+    
+    if (!documentsTable) return;
+    
+    const count = documentsTable.querySelectorAll('.document-row').length;
+    
+    if (totalDocsEl) totalDocsEl.textContent = `${count} Dokument${count !== 1 ? 'e' : ''}`;
+    if (docCountEl) docCountEl.textContent = count;
+}
+
+// Make deleteDocument available globally
+window.deleteDocument = deleteDocument;
+
+// ============================================
+// Chatbot
+// ============================================
+function initChatbot() {
+    const chatInput = document.getElementById('chatInput');
+    const sendBtn = document.getElementById('sendBtn');
+    const clearBtn = document.getElementById('clearChat');
+    
+    if (!chatInput || !sendBtn) return;
+    
+    // Send message on button click
+    sendBtn.addEventListener('click', () => sendMessage());
+    
+    // Send message on Enter
+    chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+    
+    // Clear chat
+    if (clearBtn) {
+        clearBtn.addEventListener('click', () => {
+            const chatMessages = document.getElementById('chatMessages');
+            if (chatMessages) {
+                chatMessages.innerHTML = `
+                    <div class="message bot">
+                        <p>Hallo! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen helfen?</p>
+                    </div>
+                `;
+            }
+        });
+    }
+}
+
+async function sendMessage() {
+    const chatInput = document.getElementById('chatInput');
+    const chatMessages = document.getElementById('chatMessages');
+    
+    if (!chatInput || !chatMessages) return;
+    
+    const message = chatInput.value.trim();
+    if (!message) return;
+    
+    // Add user message
+    addChatMessage(message, 'user');
+    chatInput.value = '';
+    
+    // Show typing indicator
+    const typingId = showTypingIndicator();
+    
+    try {
+        // Send to chat webhook (if configured)
+        const webhookUrl = DASHBOARD_CONFIG.customerData?.chatWebhook;
+        
+        if (webhookUrl && webhookUrl !== 'https://sb-demo.userman.de/webhook/rag-chat-webhook/chat') {
+            const response = await fetch(webhookUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    chatInput: message,
+                    sessionId: getSessionId(),
+                }),
+            });
+            
+            const data = await response.json();
+            removeTypingIndicator(typingId);
+            addChatMessage(data.output || data.response || 'Keine Antwort erhalten', 'bot');
+        } else {
+            // Demo response
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            removeTypingIndicator(typingId);
+            
+            const demoResponses = [
+                'Das ist eine Demo-Antwort. Laden Sie Dokumente hoch, um echte Antworten zu erhalten.',
+                'Ich kann Ihnen helfen, sobald Sie Ihre Wissensdatenbank mit PDFs gefüllt haben.',
+                'Bitte laden Sie zunächst einige Dokumente hoch, damit ich Ihre Fragen beantworten kann.',
+            ];
+            
+            addChatMessage(demoResponses[Math.floor(Math.random() * demoResponses.length)], 'bot');
+        }
+    } catch (error) {
+        console.error('Chat error:', error);
+        removeTypingIndicator(typingId);
+        addChatMessage('Entschuldigung, es gab einen Fehler. Bitte versuchen Sie es erneut.', 'bot');
+    }
+}
+
+function addChatMessage(text, type) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+    
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${type}`;
+    messageDiv.innerHTML = `<p>${escapeHtml(text)}</p>`;
+    
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function showTypingIndicator() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return null;
+    
+    const id = 'typing-' + Date.now();
+    const typingDiv = document.createElement('div');
+    typingDiv.className = 'message bot typing';
+    typingDiv.id = id;
+    typingDiv.innerHTML = `
+        <span class="typing-indicator">
+            <span></span><span></span><span></span>
+        </span>
+    `;
+    
+    chatMessages.appendChild(typingDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    return id;
+}
+
+function removeTypingIndicator(id) {
+    if (!id) return;
+    const typingDiv = document.getElementById(id);
+    if (typingDiv) typingDiv.remove();
+}
+
+function getSessionId() {
+    let sessionId = sessionStorage.getItem('chat_session_id');
+    if (!sessionId) {
+        sessionId = 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+        sessionStorage.setItem('chat_session_id', sessionId);
+    }
+    return sessionId;
+}
+
+// ============================================
+// Embed Code
+// ============================================
+function copyEmbedCode() {
+    const embedCode = document.getElementById('embedCode');
+    if (!embedCode) return;
+    
+    const text = embedCode.textContent;
+    copyToClipboard('embedCode');
+    
+    // Show success message
+    const copySuccess = document.getElementById('copySuccess');
+    if (copySuccess) {
+        copySuccess.style.display = 'flex';
+        setTimeout(() => {
+            copySuccess.style.display = 'none';
+        }, 2000);
+    }
+}
+
+function copyToClipboard(elementId) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+    
+    const text = element.textContent;
+    
+    navigator.clipboard.writeText(text).then(() => {
+        showNotification('In Zwischenablage kopiert', 'success');
+    }).catch(err => {
+        console.error('Copy failed:', err);
+        // Fallback
+        const textarea = document.createElement('textarea');
+        textarea.value = text;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+        showNotification('In Zwischenablage kopiert', 'success');
+    });
+}
+
+// Make functions available globally
+window.copyEmbedCode = copyEmbedCode;
+window.copyToClipboard = copyToClipboard;
+
+// ============================================
+// Settings
+// ============================================
+function saveSettings() {
+    const primaryColor = document.getElementById('primaryColor')?.value;
+    const botName = document.getElementById('botName')?.value;
+    const welcomeMessage = document.getElementById('welcomeMessage')?.value;
+    
+    // Save to localStorage (in production, save to API)
+    const settings = {
+        primaryColor,
+        botName,
+        welcomeMessage,
+    };
+    
+    localStorage.setItem('botkonzept_settings', JSON.stringify(settings));
+    showNotification('Einstellungen gespeichert', 'success');
+}
+
+// Make saveSettings available globally
+window.saveSettings = saveSettings;
+
+// ============================================
+// Utility Functions
+// ============================================
+function showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    notification.innerHTML = `
+        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
+        <span>${message}</span>
+    `;
+    
+    // Add styles
+    notification.style.cssText = `
+        position: fixed;
+        bottom: 24px;
+        right: 24px;
+        padding: 16px 24px;
+        background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#6366f1'};
+        color: white;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+        z-index: 9999;
+        animation: slideIn 0.3s ease;
+    `;
+    
+    document.body.appendChild(notification);
+    
+    // Remove after 3 seconds
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+
+function formatDate(date) {
+    return new Intl.DateTimeFormat('de-DE', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    }).format(date);
+}
+
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Add notification animations
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideIn {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes slideOut {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+    }
+`;
+document.head.appendChild(style);
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..d0b214a
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,468 @@
+/**
+ * BotKonzept - Main JavaScript
+ * ============================
+ * Handles all interactive functionality for the BotKonzept website
+ */
+
+// Configuration
+const CONFIG = {
+    // API Endpoints - Update these for production
+    WEBHOOK_URL: 'https://n8n.userman.de/webhook/botkonzept-registration',
+    API_BASE_URL: 'https://api.botkonzept.de',
+    
+    // Validation
+    MIN_NAME_LENGTH: 2,
+    MAX_NAME_LENGTH: 50,
+    
+    // Animation
+    SCROLL_OFFSET: 100,
+    ANIMATION_DELAY: 100,
+};
+
+// ============================================
+// DOM Ready
+// ============================================
+document.addEventListener('DOMContentLoaded', () => {
+    initNavigation();
+    initMobileMenu();
+    initSmoothScroll();
+    initFAQ();
+    initRegistrationForm();
+    initScrollAnimations();
+    initTypingAnimation();
+});
+
+// ============================================
+// Navigation
+// ============================================
+function initNavigation() {
+    const navbar = document.getElementById('navbar');
+    let lastScroll = 0;
+    
+    window.addEventListener('scroll', () => {
+        const currentScroll = window.pageYOffset;
+        
+        // Add shadow on scroll
+        if (currentScroll > 50) {
+            navbar.style.boxShadow = '0 4px 6px -1px rgb(0 0 0 / 0.1)';
+        } else {
+            navbar.style.boxShadow = 'none';
+        }
+        
+        // Hide/show navbar on scroll (optional)
+        // if (currentScroll > lastScroll && currentScroll > 200) {
+        //     navbar.style.transform = 'translateY(-100%)';
+        // } else {
+        //     navbar.style.transform = 'translateY(0)';
+        // }
+        
+        lastScroll = currentScroll;
+    });
+}
+
+// ============================================
+// Mobile Menu
+// ============================================
+function initMobileMenu() {
+    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+    const navLinks = document.getElementById('navLinks');
+    
+    if (!mobileMenuBtn || !navLinks) return;
+    
+    mobileMenuBtn.addEventListener('click', () => {
+        navLinks.classList.toggle('active');
+        
+        // Toggle icon
+        const icon = mobileMenuBtn.querySelector('i');
+        if (navLinks.classList.contains('active')) {
+            icon.classList.remove('fa-bars');
+            icon.classList.add('fa-times');
+        } else {
+            icon.classList.remove('fa-times');
+            icon.classList.add('fa-bars');
+        }
+    });
+    
+    // Close menu when clicking a link
+    navLinks.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => {
+            navLinks.classList.remove('active');
+            const icon = mobileMenuBtn.querySelector('i');
+            icon.classList.remove('fa-times');
+            icon.classList.add('fa-bars');
+        });
+    });
+}
+
+// ============================================
+// Smooth Scroll
+// ============================================
+function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            
+            if (targetId === '#') return;
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                const navbarHeight = document.getElementById('navbar').offsetHeight;
+                const targetPosition = targetElement.offsetTop - navbarHeight - 20;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+}
+
+// ============================================
+// FAQ Accordion
+// ============================================
+function initFAQ() {
+    const faqItems = document.querySelectorAll('.faq-item');
+    
+    faqItems.forEach(item => {
+        const question = item.querySelector('.faq-question');
+        
+        question.addEventListener('click', () => {
+            // Close other items
+            faqItems.forEach(otherItem => {
+                if (otherItem !== item && otherItem.classList.contains('active')) {
+                    otherItem.classList.remove('active');
+                }
+            });
+            
+            // Toggle current item
+            item.classList.toggle('active');
+        });
+    });
+}
+
+// ============================================
+// Registration Form
+// ============================================
+function initRegistrationForm() {
+    const form = document.getElementById('registerForm');
+    const submitBtn = document.getElementById('submitBtn');
+    const formSuccess = document.getElementById('formSuccess');
+    const formError = document.getElementById('formError');
+    
+    if (!form) return;
+    
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        // Validate form
+        if (!validateForm(form)) {
+            return;
+        }
+        
+        // Show loading state
+        setLoadingState(submitBtn, true);
+        
+        // Collect form data
+        const formData = {
+            firstName: form.firstName.value.trim(),
+            lastName: form.lastName.value.trim(),
+            email: form.email.value.trim(),
+            company: form.company.value.trim() || null,
+            website: form.website.value.trim() || null,
+            newsletter: form.newsletter.checked,
+            timestamp: new Date().toISOString(),
+            source: 'website',
+            userAgent: navigator.userAgent,
+            language: navigator.language,
+        };
+        
+        try {
+            // Send registration request
+            const response = await fetch(CONFIG.WEBHOOK_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(formData),
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const result = await response.json();
+            
+            // Show success message
+            form.style.display = 'none';
+            formSuccess.style.display = 'block';
+            
+            // Track conversion (if analytics is set up)
+            trackConversion('registration_complete', formData);
+            
+        } catch (error) {
+            console.error('Registration error:', error);
+            
+            // Show error message
+            form.style.display = 'none';
+            formError.style.display = 'block';
+            
+            const errorMessage = document.getElementById('errorMessage');
+            if (errorMessage) {
+                errorMessage.textContent = getErrorMessage(error);
+            }
+        } finally {
+            setLoadingState(submitBtn, false);
+        }
+    });
+}
+
+// Form validation
+function validateForm(form) {
+    let isValid = true;
+    
+    // Clear previous errors
+    form.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
+    form.querySelectorAll('.error-message').forEach(el => el.remove());
+    
+    // Validate first name
+    const firstName = form.firstName.value.trim();
+    if (firstName.length < CONFIG.MIN_NAME_LENGTH) {
+        showFieldError(form.firstName, 'Bitte geben Sie Ihren Vornamen ein');
+        isValid = false;
+    }
+    
+    // Validate last name
+    const lastName = form.lastName.value.trim();
+    if (lastName.length < CONFIG.MIN_NAME_LENGTH) {
+        showFieldError(form.lastName, 'Bitte geben Sie Ihren Nachnamen ein');
+        isValid = false;
+    }
+    
+    // Validate email
+    const email = form.email.value.trim();
+    if (!isValidEmail(email)) {
+        showFieldError(form.email, 'Bitte geben Sie eine gültige E-Mail-Adresse ein');
+        isValid = false;
+    }
+    
+    // Validate website (if provided)
+    const website = form.website.value.trim();
+    if (website && !isValidURL(website)) {
+        showFieldError(form.website, 'Bitte geben Sie eine gültige URL ein (z.B. https://beispiel.de)');
+        isValid = false;
+    }
+    
+    // Validate privacy checkbox
+    if (!form.privacy.checked) {
+        showFieldError(form.privacy, 'Bitte akzeptieren Sie die Datenschutzerklärung');
+        isValid = false;
+    }
+    
+    return isValid;
+}
+
+// Show field error
+function showFieldError(field, message) {
+    field.classList.add('error');
+    field.style.borderColor = '#ef4444';
+    
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'error-message';
+    errorDiv.style.color = '#ef4444';
+    errorDiv.style.fontSize = '0.75rem';
+    errorDiv.style.marginTop = '4px';
+    errorDiv.textContent = message;
+    
+    field.parentNode.appendChild(errorDiv);
+}
+
+// Email validation
+function isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+}
+
+// URL validation
+function isValidURL(url) {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+// Set loading state
+function setLoadingState(button, isLoading) {
+    const btnText = button.querySelector('.btn-text');
+    const btnLoading = button.querySelector('.btn-loading');
+    
+    if (isLoading) {
+        button.disabled = true;
+        if (btnText) btnText.style.display = 'none';
+        if (btnLoading) btnLoading.style.display = 'inline-flex';
+    } else {
+        button.disabled = false;
+        if (btnText) btnText.style.display = 'inline';
+        if (btnLoading) btnLoading.style.display = 'none';
+    }
+}
+
+// Get user-friendly error message
+function getErrorMessage(error) {
+    if (error.message.includes('Failed to fetch')) {
+        return 'Verbindungsfehler. Bitte überprüfen Sie Ihre Internetverbindung.';
+    }
+    if (error.message.includes('500')) {
+        return 'Serverfehler. Bitte versuchen Sie es später erneut.';
+    }
+    if (error.message.includes('400')) {
+        return 'Ungültige Eingabe. Bitte überprüfen Sie Ihre Daten.';
+    }
+    return 'Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
+}
+
+// Reset form
+function resetForm() {
+    const form = document.getElementById('registerForm');
+    const formSuccess = document.getElementById('formSuccess');
+    const formError = document.getElementById('formError');
+    
+    if (form) {
+        form.reset();
+        form.style.display = 'flex';
+    }
+    if (formSuccess) formSuccess.style.display = 'none';
+    if (formError) formError.style.display = 'none';
+}
+
+// Make resetForm available globally
+window.resetForm = resetForm;
+
+// ============================================
+// Scroll Animations
+// ============================================
+function initScrollAnimations() {
+    const animatedElements = document.querySelectorAll('.feature-card, .step, .pricing-card, .faq-item');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry, index) => {
+            if (entry.isIntersecting) {
+                setTimeout(() => {
+                    entry.target.classList.add('visible');
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }, index * CONFIG.ANIMATION_DELAY);
+                
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    });
+    
+    animatedElements.forEach(el => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(20px)';
+        el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+        observer.observe(el);
+    });
+}
+
+// ============================================
+// Typing Animation (Chat Preview)
+// ============================================
+function initTypingAnimation() {
+    const typingMessage = document.querySelector('.message.typing');
+    if (!typingMessage) return;
+    
+    // Simulate typing response
+    setTimeout(() => {
+        typingMessage.innerHTML = '<p>Sie können Ihre Bestellung ganz einfach über unser Online-Formular aufgeben. Alternativ können Sie uns auch telefonisch unter 0800-123456 erreichen.</p>';
+        typingMessage.classList.remove('typing');
+    }, 3000);
+}
+
+// ============================================
+// Analytics & Tracking
+// ============================================
+function trackConversion(eventName, data = {}) {
+    // Google Analytics 4
+    if (typeof gtag !== 'undefined') {
+        gtag('event', eventName, {
+            'event_category': 'conversion',
+            'event_label': 'registration',
+            ...data
+        });
+    }
+    
+    // Facebook Pixel
+    if (typeof fbq !== 'undefined') {
+        fbq('track', 'Lead', data);
+    }
+    
+    // Console log for debugging
+    console.log('Conversion tracked:', eventName, data);
+}
+
+// ============================================
+// Utility Functions
+// ============================================
+
+// Debounce function
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// Throttle function
+function throttle(func, limit) {
+    let inThrottle;
+    return function(...args) {
+        if (!inThrottle) {
+            func.apply(this, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}
+
+// Format currency
+function formatCurrency(amount, currency = 'EUR') {
+    return new Intl.NumberFormat('de-DE', {
+        style: 'currency',
+        currency: currency
+    }).format(amount);
+}
+
+// Format date
+function formatDate(date) {
+    return new Intl.DateTimeFormat('de-DE', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    }).format(new Date(date));
+}
+
+// ============================================
+// Export for testing
+// ============================================
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        validateForm,
+        isValidEmail,
+        isValidURL,
+        formatCurrency,
+        formatDate
+    };
+}
diff --git a/logo/20250119_Logo_Botkozept.svg b/logo/20250119_Logo_Botkozept.svg
new file mode 100644
index 0000000..8318377
--- /dev/null
+++ b/logo/20250119_Logo_Botkozept.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="359px" height="60px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 2150 359"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil1 {fill:#FEFEFE;fill-rule:nonzero}
+    .fil4 {fill:#88CED7;fill-rule:nonzero}
+    .fil3 {fill:#4FC0EF;fill-rule:nonzero}
+    .fil2 {fill:#3A7ABD;fill-rule:nonzero}
+    .fil0 {fill:#234182;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Bot_x0020_TV">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1548485603296">
+   <g>
+    <path class="fil0" d="M204 168l0 22c0,8 5,14 12,14 3,0 6,-2 9,-4 2,-3 4,-6 4,-10l0 -22c0,-8 -5,-14 -12,-14 -3,0 -6,2 -9,4 -2,3 -4,6 -4,10z"/>
+   </g>
+   <g>
+    <path class="fil0" d="M142 168l0 22c0,8 5,14 12,14 3,0 6,-2 9,-4 2,-3 4,-6 4,-10l0 -22c0,-8 -5,-14 -12,-14 -3,0 -6,2 -9,4 -2,3 -4,6 -4,10z"/>
+   </g>
+  </g>
+  <g id="_1548485603200">
+   <g>
+    <path class="fil1" d="M209 192l2 0c1,0 1,0 1,-1l0 -24c0,-1 0,-1 -1,-1l-2 0c-1,0 -1,0 -1,1l0 24c0,1 0,1 1,1z"/>
+   </g>
+   <g>
+    <path class="fil1" d="M147 192l2 0c1,0 1,0 1,-1l0 -24c0,-1 0,-1 -1,-1l-2 0c-1,0 -1,0 -1,1l0 24c0,1 0,1 1,1z"/>
+   </g>
+  </g>
+  <path class="fil0" d="M119 24l0 32 -38 0 0 -32c0,-10 8,-19 19,-19 10,0 19,8 19,19zm221 259l-221 0 0 56c0,10 -8,19 -18,20 -11,1 -20,-8 -20,-19l0 -219 0 -8 47 0c-5,0 -8,3 -9,8 0,1 0,1 0,2l0 113c0,5 4,9 9,9l211 0c10,0 19,8 20,18 1,11 -8,20 -19,20z"/>
+  <g id="_1548485605696">
+   <path class="fil2" d="M251 302l38 0 0 38c0,10 -8,19 -19,19 -10,0 -19,-8 -19,-19l0 -38z"/>
+  </g>
+  <g id="_1548485607712">
+   <path class="fil3" d="M359 94c0,10 -8,19 -19,19l-32 0 0 -38 32 0c10,0 19,8 19,19z"/>
+  </g>
+  <g id="_1548485606320">
+   <path class="fil4" d="M19 245l43 0 0 38 -43 0c-10,0 -19,-8 -19,-19 0,-10 8,-19 19,-19z"/>
+  </g>
+  <path class="fil2" d="M251 237l0 -2 0 -112c0,-5 -4,-9 -9,-9l-222 0c-10,0 -19,-8 -20,-18 -1,-11 8,-20 19,-20l232 0 0 -55c0,-11 9,-20 20,-19 10,1 18,9 18,20l0 217 0 8 -47 0c4,0 8,-3 9,-8 0,0 0,-1 0,-1z"/>
+  <path class="fil0" d="M391 213l0 -212 90 0c40,0 60,16 60,49 0,24 -13,41 -39,52 28,5 42,21 42,48 0,42 -22,63 -66,63l-87 0zm86 -22c25,0 38,-13 38,-38 0,-25 -17,-37 -51,-37l-12 0 0 -18c40,-5 61,-20 61,-44 0,-20 -11,-30 -34,-30l-60 0 0 167 58 0z"/>
+  <path id="_1" class="fil0" d="M609 107c0,57 26,86 77,86 51,0 76,-29 76,-86 0,-56 -25,-85 -76,-85 -52,0 -77,28 -77,85zm-29 1c0,-72 35,-108 106,-108 70,0 105,36 105,108 0,71 -35,107 -105,107 -71,0 -106,-36 -106,-107z"/>
+  <polygon id="_2" class="fil0" points="977,1 977,24 910,24 910,213 883,213 883,24 816,24 816,1 "/>
+  <path id="_3" class="fil0" d="M1037 1l0 212 -27 0 0 -212 27 0zm149 0l-95 100 97 112 -38 0 -86 -102 0 -17 88 -93 35 0z"/>
+  <path id="_4" class="fil0" d="M1216 107c0,57 26,86 77,86 51,0 76,-29 76,-86 0,-56 -25,-85 -76,-85 -52,0 -77,28 -77,85zm-29 1c0,-72 35,-108 106,-108 70,0 105,36 105,108 0,71 -35,107 -105,107 -71,0 -106,-36 -106,-107z"/>
+  <polygon id="_5" class="fil0" points="1594,1 1594,24 1468,191 1592,191 1592,213 1435,213 1435,191 1565,24 1438,24 1438,1 "/>
+  <polygon id="_6" class="fil0" points="1777,1 1777,24 1666,24 1666,95 1771,95 1771,117 1666,117 1666,191 1779,191 1779,213 1638,213 1638,1 "/>
+  <path id="_7" class="fil0" d="M1820 213l0 -212 86 0c43,0 65,19 65,57 0,41 -30,66 -89,75l-6 -23c43,-6 65,-23 65,-51 0,-24 -13,-35 -38,-35l-56 0 0 189 -27 0z"/>
+  <polygon id="_8" class="fil0" points="2150,1 2150,24 2083,24 2083,213 2056,213 2056,24 1989,24 1989,1 "/>
+  <polygon class="fil2" points="391,359 391,254 411,254 446,333 481,254 500,254 500,359 482,359 482,286 454,359 437,359 409,286 409,359 "/>
+  <polygon id="_1_8" class="fil2" points="593,254 593,271 541,271 541,297 591,297 591,315 541,315 541,342 594,342 594,359 522,359 522,254 "/>
+  <path id="_2_9" class="fil2" d="M653 342c22,0 32,-13 32,-38 0,-22 -11,-32 -32,-32l-21 0 0 71 21 0zm-41 17l0 -104 41 0c34,0 52,16 52,49 0,37 -17,55 -52,55l-41 0z"/>
+  <polygon id="_3_10" class="fil2" points="740,254 740,359 721,359 721,254 "/>
+  <polygon id="_4_11" class="fil2" points="773,359 753,359 797,254 818,254 863,359 842,359 830,330 796,330 802,313 823,313 807,274 "/>
+  <polygon id="_5_12" class="fil2" points="876,359 876,254 896,254 931,333 966,254 985,254 985,359 967,359 967,286 939,359 922,359 893,286 893,359 "/>
+  <polygon id="_6_13" class="fil2" points="1078,254 1078,271 1026,271 1026,297 1076,297 1076,315 1026,315 1026,342 1079,342 1079,359 1007,359 1007,254 "/>
+  <polygon id="_7_14" class="fil2" points="1165,254 1165,271 1135,271 1135,359 1116,359 1116,271 1086,271 1086,254 "/>
+  <polygon id="_8_15" class="fil2" points="1251,254 1251,271 1196,342 1251,342 1251,359 1174,359 1174,342 1232,271 1176,271 1176,254 "/>
+  <polygon id="_9" class="fil2" points="1332,359 1332,254 1352,254 1407,330 1407,254 1425,254 1425,359 1406,359 1351,281 1351,359 "/>
+  <polygon id="_10" class="fil2" points="1518,254 1518,271 1466,271 1466,297 1516,297 1516,315 1466,315 1466,342 1519,342 1519,359 1447,359 1447,254 "/>
+  <polygon id="_11" class="fil2" points="1605,254 1605,271 1576,271 1576,359 1556,359 1556,271 1526,271 1526,254 "/>
+  <polygon id="_12" class="fil2" points="1608,254 1628,254 1639,329 1666,254 1684,254 1710,326 1721,254 1740,254 1721,359 1703,359 1674,277 1643,359 1625,359 "/>
+  <path id="_13" class="fil2" d="M1770 306c0,24 11,36 32,36 21,0 31,-12 31,-36 0,-24 -10,-36 -31,-36 -22,0 -32,12 -32,36zm-20 0c0,-35 17,-53 52,-53 34,0 51,18 51,53 0,35 -17,53 -51,53 -33,0 -51,-18 -52,-53z"/>
+  <path id="_14" class="fil2" d="M1872 358l0 -104 47 0c21,0 32,9 32,28 0,13 -8,23 -25,31l33 45 -24 0 -32 -45 0 -9c18,-3 28,-10 28,-21 0,-8 -4,-12 -13,-12l-26 0 0 87 -20 0z"/>
+  <path id="_15" class="fil2" d="M1988 254l0 104 -19 0 0 -104 19 0zm73 0l-44 49 49 56 -27 0 -40 -49 0 -13 39 -43 24 0z"/>
+  <path id="_16" class="fil2" d="M2071 354l0 -17c10,4 22,6 35,6 16,0 24,-5 24,-16 0,-8 -5,-12 -15,-12l-16 0c-21,0 -32,-10 -32,-29 0,-21 15,-32 46,-32 12,0 23,2 33,5l0 17c-10,-4 -21,-6 -33,-6 -17,0 -26,5 -26,15 0,8 4,12 13,12l16 0c23,0 34,10 34,29 0,22 -14,33 -43,33 -13,0 -25,-2 -35,-5z"/>
+ </g>
+</svg>