docs: Add comprehensive area/ directory structure documentation

- Created AREA_STRUCTURE.md with complete guide for media file organization
- Includes JSON configuration examples and naming conventions
- Added security guidelines and setup checklist
- Updated DEPLOYMENT.md to reference new documentation

This helps users understand how to structure their project data and media files
outside of the Git repository for security and size optimization.

AREA_STRUCTURE.md

@@ -0,0 +1,149 @@
+# Area Directory Structure
+
+Der `area/` Ordner enthält alle Projektdaten und Media-Dateien für die AdsPreview-Anwendung. Dieser Ordner ist aus Sicherheitsgründen und zur Größenreduzierung nicht im Git-Repository enthalten.
+
+## 📁 Verzeichnisstruktur
+
+```
+area/
+├── logins.json                          # Login-Konfiguration für Clients
+├── [Client-Name]/                        # Pro Client ein Ordner
+│   ├── project_order.json               # Reihenfolge der Projekte für den Client
+│   └── [Projekt-Name]/                   # Pro Projekt ein Ordner
+│       ├── index.php                    # Optional: Custom PHP für das Projekt
+│       ├── ads/                         # Werbemittel-Ordner
+│       │   ├── [Kampagne]/             # Kampagnen-Ordner
+│       │   │   ├── [Format]/           # Format-spezifische Dateien
+│       │   │   │   ├── [Größe]/        # Größen-spezifische Dateien
+│       │   │   │   │   ├── *.jpg       # Bilder
+│       │   │   │   │   ├── *.png       # Bilder
+│       │   │   │   │   ├── *.mp4       # Videos
+│       │   │   │   │   └── *.gif       # Animierte Bilder
+│       │   │   │   └── config.yaml     # Optional: HTML5-Konfiguration
+│       │   │   └── html/               # Optional: HTML5-Werbemittel
+│       │   │       ├── index.html      # HTML5-Anzeige
+│       │   │       └── assets/         # Zusätzliche Assets
+│       │   └── core/                   # Optional: Legacy PHP Core-Dateien
+│       └── setup/                      # Projekt-Konfiguration
+│           ├── setup.yaml              # Projekt-Setup-Konfiguration
+│           ├── logo.png                # Client-Logo
+│           ├── poster.jpg              # Projekt-Poster
+│           ├── showreel_close.svg      # Showreel-Icons
+│           └── showreel_dkt.png        # Showreel-Assets
+└── AllScreens/                         # Spezielle AllScreens-Projekte
+    └── [Projekt-Name]/                 # Struktur wie bei Client-Projekten
+```
+
+## 🔧 Konfigurationsdateien
+
+### `area/logins.json`
+Definiert die verfügbaren Clients und deren Zugriffsdaten:
+
+```json
+{
+  "clients": [
+    {
+      "name": "ClientName",
+      "folder": "ClientFolder",
+      "password": "client_password"
+    }
+  ]
+}
+```
+
+### `area/[Client]/project_order.json`
+Definiert die Reihenfolge der Projekte für einen Client:
+
+```json
+{
+  "project_order": [
+    "Projekt1",
+    "Projekt2", 
+    "Projekt3"
+  ]
+}
+```
+
+### `area/[Client]/[Projekt]/setup/setup.yaml`
+Projekt-spezifische Konfiguration:
+
+```yaml
+project_name: "Projektname"
+client: "Client Name"
+description: "Projektbeschreibung"
+showreel_enabled: true
+poster_image: "poster.jpg"
+logo_image: "logo.png"
+```
+
+## 📂 Beispiel-Struktur
+
+```
+area/
+├── logins.json
+├── Paramount/
+│   ├── project_order.json
+│   ├── Mission_Impossible_7/
+│   │   ├── ads/
+│   │   │   ├── Kinobanner/
+│   │   │   │   ├── Cineplex/
+│   │   │   │   │   └── Powerbanner_1420x420/
+│   │   │   │   │       ├── PARA_MI7_Cineplex_PB_1420x420_Datum.jpg
+│   │   │   │   │       └── PARA_MI7_Cineplex_PB_1420x420_Jetzt.jpg
+│   │   │   │   └── Cinestar/
+│   │   │   └── Programmatic/
+│   │   │       ├── Billboard/
+│   │   │       │   └── 800x250/
+│   │   │       │       ├── config.yaml
+│   │   │       │       └── html/
+│   │   │       │           ├── index.html
+│   │   │       │           ├── bg.jpg
+│   │   │       │           └── assets/
+│   │   │       └── HPA/
+│   │   └── setup/
+│   │       ├── setup.yaml
+│   │       ├── logo.png
+│   │       └── poster.jpg
+│   └── HE_Lioness_S2/
+└── Studiocanal/
+    └── HE_We_Live_in_Time/
+```
+
+## 🎯 Wichtige Hinweise
+
+### Datei-Namenskonventionen:
+- **Ordnernamen**: Keine Leerzeichen, verwende `_` oder `-`
+- **Dateinamen**: Beschreibende Namen mit Client-Präfix
+- **Bildformate**: JPG, PNG, GIF unterstützt
+- **Videoformate**: MP4 empfohlen
+
+### Dateigröße-Optimierung:
+- **Bilder**: Komprimierte Versionen mit `_sz.jpg` Suffix für kleinere Dateien
+- **Videos**: Web-optimierte MP4-Dateien
+- **Thumbnails**: Kleine Preview-Versionen für Listen-Ansichten
+
+### HTML5-Werbemittel:
+- **config.yaml**: Definiert Einstellungen für interaktive Anzeigen
+- **index.html**: Haupt-HTML-Datei
+- **Assets**: Alle zusätzlichen Dateien (CSS, JS, Bilder)
+
+## 🔒 Sicherheit
+
+- Der `area/` Ordner ist in `.gitignore` ausgeschlossen
+- Keine sensiblen Daten in Dateinamen verwenden
+- Regelmäßige Backups des `area/` Ordners erstellen
+- Zugriffskontrolle über `logins.json` verwalten
+
+## 📋 Setup-Checkliste
+
+1. ✅ `area/` Ordner im Projekt-Root erstellen
+2. ✅ `logins.json` mit Client-Daten anlegen
+3. ✅ Client-Ordner erstellen
+4. ✅ `project_order.json` für jeden Client
+5. ✅ Projekt-Ordner mit `setup/` Verzeichnis
+6. ✅ `ads/` Struktur nach Kampagnen organisieren
+7. ✅ Media-Dateien hochladen und testen
+
+---
+
+💡 **Tipp**: Verwende die Admin-Oberfläche der AdsPreview-Anwendung zur einfachen Verwaltung von Clients und Projekten.

DEPLOYMENT.md

@@ -1,5 +1,9 @@
 # 🚀 Deployment Guide
 
+## 📂 Wichtige Dokumentation
+- **[Area Structure Guide](AREA_STRUCTURE.md)**: Aufbau des `area/` Verzeichnisses mit Projektdaten
+- **[Deployment Scripts](deployment/scripts/README.md)**: Sichere Upload-Skripte mit `.env.upload`
+
 ## 🏠 Lokale Entwicklungsumgebung
 
 ### Voraussetzungen