diff --git a/Mockup/InterfaceMockup.png b/Mockup/InterfaceMockup.png
new file mode 100644
index 0000000..6d5a3e0
Binary files /dev/null and b/Mockup/InterfaceMockup.png differ
diff --git a/Mockup/index.html b/Mockup/index.html
new file mode 100644
index 0000000..5c78438
--- /dev/null
+++ b/Mockup/index.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">
+    <title>Active Directory Datenverwaltung</title>
+    <style>
+        :root {
+            --color-white: rgba(255, 255, 255, 1);
+            --color-black: rgba(0, 0, 0, 1);
+            --color-cream-50: rgba(252, 252, 249, 1);
+            --color-cream-100: rgba(255, 255, 253, 1);
+            --color-gray-200: rgba(245, 245, 245, 1);
+            --color-gray-300: rgba(167, 169, 169, 1);
+            --color-slate-500: rgba(98, 108, 113, 1);
+            --color-brown-600: rgba(94, 82, 64, 1);
+            --color-charcoal-700: rgba(31, 33, 33, 1);
+            --color-charcoal-800: rgba(38, 40, 40, 1);
+            --color-slate-900: rgba(19, 52, 59, 1);
+            --color-teal-500: rgba(33, 128, 141, 1);
+            --color-teal-600: rgba(29, 116, 128, 1);
+            --color-teal-700: rgba(26, 104, 115, 1);
+            --color-teal-300: rgba(50, 184, 198, 1);
+            --color-teal-400: rgba(45, 166, 178, 1);
+            --color-brown-600-rgb: 94, 82, 64;
+            --color-teal-500-rgb: 33, 128, 141;
+            --color-background: var(--color-cream-50);
+            --color-surface: var(--color-cream-100);
+            --color-text: var(--color-slate-900);
+            --color-text-secondary: var(--color-slate-500);
+            --color-primary: var(--color-teal-500);
+            --color-primary-hover: var(--color-teal-600);
+            --color-primary-active: var(--color-teal-700);
+            --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
+            --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
+            --color-border: rgba(var(--color-brown-600-rgb), 0.2);
+            --color-btn-primary-text: var(--color-cream-50);
+            --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
+            --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            --font-size-sm: 12px;
+            --font-size-base: 14px;
+            --font-size-lg: 16px;
+            --font-size-xl: 18px;
+            --font-size-2xl: 20px;
+            --font-size-3xl: 24px;
+            --space-4: 4px;
+            --space-6: 6px;
+            --space-8: 8px;
+            --space-12: 12px;
+            --space-16: 16px;
+            --space-20: 20px;
+            --space-24: 24px;
+            --space-32: 32px;
+            --radius-base: 8px;
+            --radius-lg: 12px;
+            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
+            --duration-fast: 150ms;
+            --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --color-gray-400-rgb: 119, 124, 124;
+                --color-teal-300-rgb: 50, 184, 198;
+                --color-gray-300-rgb: 167, 169, 169;
+                --color-gray-200-rgb: 245, 245, 245;
+                --color-background: var(--color-charcoal-700);
+                --color-surface: var(--color-charcoal-800);
+                --color-text: var(--color-gray-200);
+                --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
+                --color-primary: var(--color-teal-300);
+                --color-primary-hover: var(--color-teal-400);
+                --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
+                --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
+                --color-border: rgba(var(--color-gray-400-rgb), 0.3);
+                --color-btn-primary-text: var(--color-slate-900);
+                --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
+            }
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-family-base);
+            background-color: var(--color-background);
+            color: var(--color-text);
+            line-height: 1.5;
+            padding: var(--space-20);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background-color: var(--color-surface);
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-md);
+            padding: var(--space-32);
+        }
+
+        h1 {
+            font-size: var(--font-size-3xl);
+            margin-bottom: var(--space-24);
+            color: var(--color-text);
+        }
+
+        h2 {
+            font-size: var(--font-size-xl);
+            margin-bottom: var(--space-16);
+            margin-top: var(--space-24);
+            color: var(--color-text);
+        }
+
+        .form-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--space-12);
+            margin-bottom: var(--space-16);
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .form-group.full-width {
+            grid-column: 1 / -1;
+        }
+
+        label {
+            font-size: var(--font-size-sm);
+            font-weight: 500;
+            color: var(--color-text);
+            margin-bottom: var(--space-4);
+        }
+
+        input[type="text"],
+        input[type="password"],
+        input[type="email"],
+        select {
+            padding: var(--space-8) var(--space-12);
+            font-size: var(--font-size-base);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-base);
+            background-color: var(--color-surface);
+            color: var(--color-text);
+            transition: border-color var(--duration-fast) var(--ease-standard);
+        }
+
+        input:focus,
+        select:focus {
+            outline: none;
+            border-color: var(--color-primary);
+            box-shadow: 0 0 0 3px var(--color-focus-ring);
+        }
+
+        .btn {
+            padding: var(--space-8) var(--space-16);
+            font-size: var(--font-size-base);
+            font-weight: 500;
+            border: none;
+            border-radius: var(--radius-base);
+            cursor: pointer;
+            transition: all var(--duration-fast) var(--ease-standard);
+        }
+
+        .btn-primary {
+            background-color: var(--color-primary);
+            color: var(--color-btn-primary-text);
+        }
+
+        .btn-primary:hover {
+            background-color: var(--color-primary-hover);
+        }
+
+        .btn-secondary {
+            background-color: var(--color-secondary);
+            color: var(--color-text);
+        }
+
+        .btn-secondary:hover {
+            background-color: var(--color-secondary-hover);
+        }
+
+        .btn-small {
+            padding: var(--space-4) var(--space-12);
+            font-size: var(--font-size-sm);
+        }
+
+        .divider {
+            border: none;
+            border-top: 2px solid var(--color-border);
+            margin: var(--space-32) 0;
+        }
+
+        .dynamic-fields {
+            margin-top: var(--space-16);
+        }
+
+        .dynamic-field-item {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: var(--space-12);
+            margin-bottom: var(--space-12);
+            align-items: end;
+        }
+
+        .csv-section {
+            margin-top: var(--space-24);
+        }
+
+        input[type="file"] {
+            padding: var(--space-8);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-base);
+            background-color: var(--color-surface);
+            color: var(--color-text);
+            cursor: pointer;
+        }
+
+        .button-group {
+            display: flex;
+            gap: var(--space-12);
+            margin-top: var(--space-16);
+        }
+
+        .btn-remove {
+            background-color: rgba(192, 21, 47, 0.1);
+            color: #c0152f;
+            padding: var(--space-8) var(--space-12);
+        }
+
+        .btn-remove:hover {
+            background-color: rgba(192, 21, 47, 0.2);
+        }
+
+            font-size: var(--font-size-sm);
+        }
+
+            padding: var(--space-8) var(--space-12);
+            border: 1px solid var(--color-border);
+            text-align: left;
+        }
+
+            background-color: var(--color-secondary);
+            font-weight: 500;
+            color: var(--color-text);
+        }
+
+            width: 100%;
+            padding: var(--space-4) var(--space-8);
+            font-size: var(--font-size-sm);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-base);
+            background-color: var(--color-surface);
+            color: var(--color-text);
+        }
+
+            background-color: var(--color-secondary);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Active Directory Datenverwaltung</h1>
+
+        <form id="adForm">
+            <h2>Benutzer manuell anlegen</h2>
+            
+            <div class="form-grid">
+                <div class="form-group">
+                    <label for="firstname">Vorname</label>
+                    <input type="text" id="firstname" name="firstname" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password">Passwort</label>
+                    <input type="password" id="password" name="password" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="lastname">Nachname</label>
+                    <input type="text" id="lastname" name="lastname" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="group">Gruppe</label>
+                    <select id="group" name="group" required>
+                        <option value="">-- Gruppe wählen --</option>
+                        <option value="Admins">Admins</option>
+                        <option value="Benutzer">Benutzer</option>
+                        <option value="IT">IT</option>
+                        <option value="Buchhaltung">Buchhaltung</option>
+                        <option value="Vertrieb">Vertrieb</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="dynamic-fields">
+                <h2>Zusätzliche Felder</h2>
+                <div id="customFields"></div>
+                <button type="button" class="btn btn-secondary btn-small" onclick="addCustomField()">+ Feld hinzufügen</button>
+            </div>
+
+            <div class="button-group">
+                <button type="submit" class="btn btn-primary">Benutzer erstellen</button>
+                <button type="reset" class="btn btn-secondary">Zurücksetzen</button>
+            </div>
+        </form>
+
+        <hr class="divider">
+
+        <div class="csv-section">
+            <h2>CSV-Datei importieren</h2>
+            <form id="csvForm">
+                <div class="form-group">
+                    <label for="csvFile">CSV-Datei auswählen</label>
+                    <input type="file" id="csvFile" name="csvFile" accept=".csv" required>
+                </div>
+                <button type="button" class="btn btn-primary" onclick="loadCSVPreview()">CSV laden</button>
+            </form>
+
+            <div id="csvPreview" style="margin-top: var(--space-24);">
+                <h2>CSV-Vorschau und Bearbeitung</h2>
+                <div class="preview-info" style="margin-bottom: var(--space-16); padding: var(--space-12); background-color: var(--color-secondary); border-radius: var(--radius-base); font-size: var(--font-size-sm);">
+                    <strong>Hinweis:</strong> Sie können die Werte direkt in der Tabelle bearbeiten, bevor Sie importieren.
+                </div>
+                <div style="overflow-x: auto; margin-bottom: var(--space-16);">
+                    <table id="csvTable" style="width: 100%; border-collapse: collapse;">
+                        <thead id="csvTableHead"></thead>
+                        <tbody id="csvTableBody"></tbody>
+                    </table>
+                </div>
+                <div class="button-group">
+                    <button type="button" class="btn btn-primary" onclick="importCSVData()">Endgültig importieren</button>
+                    <button type="button" class="btn btn-secondary" onclick="cancelCSVPreview()">Abbrechen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let customFieldCounter = 0;
+
+        function addCustomField() {
+            customFieldCounter++;
+            const container = document.getElementById('customFields');
+            const fieldItem = document.createElement('div');
+            fieldItem.className = 'dynamic-field-item';
+            fieldItem.id = `customField_${customFieldCounter}`;
+            
+            fieldItem.innerHTML = `
+                <div class="form-group">
+                    <label for="fieldName_${customFieldCounter}">Feldname</label>
+                    <input type="text" id="fieldName_${customFieldCounter}" placeholder="z.B. Telefonnummer">
+                </div>
+                <div class="form-group">
+                    <label for="fieldValue_${customFieldCounter}">Wert</label>
+                    <input type="text" id="fieldValue_${customFieldCounter}" placeholder="Wert eingeben">
+                </div>
+                <div class="form-group">
+                    <button type="button" class="btn btn-remove btn-small" onclick="removeCustomField(${customFieldCounter})">Entfernen</button>
+                </div>
+            `;
+            
+            container.appendChild(fieldItem);
+        }
+
+        function removeCustomField(id) {
+            const field = document.getElementById(`customField_${id}`);
+            if (field) {
+                field.remove();
+            }
+        }
+
+        document.getElementById('adForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            
+            const formData = {
+                firstname: document.getElementById('firstname').value,
+                lastname: document.getElementById('lastname').value,
+                group: document.getElementById('group').value,
+                password: document.getElementById('password').value,
+                customFields: {}
+            };
+
+            const customFields = document.querySelectorAll('.dynamic-field-item');
+            customFields.forEach((field) => {
+                const nameInput = field.querySelector('[id^="fieldName_"]');
+                const valueInput = field.querySelector('[id^="fieldValue_"]');
+                if (nameInput && valueInput && nameInput.value) {
+                    formData.customFields[nameInput.value] = valueInput.value;
+                }
+            });
+
+            console.log('AD Benutzer Daten:', formData);
+            alert('Benutzer wurde erfolgreich erstellt!\n\nDaten in der Konsole (F12) einsehen.');
+        });
+
+        let csvData = [];
+
+        function loadCSVPreview() {
+            const fileInput = document.getElementById('csvFile');
+            const file = fileInput.files[0];
+            
+            if (!file) {
+                alert('Bitte wählen Sie eine CSV-Datei aus.');
+                return;
+            }
+
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                const csvContent = event.target.result;
+                parseCSV(csvContent);
+                displayCSVPreview();
+            };
+            reader.readAsText(file);
+        }
+
+        function parseCSV(content) {
+            const lines = content.split('\n').filter(line => line.trim());
+            csvData = lines.map(line => {
+                // Einfaches CSV-Parsing (für komplexere CSVs ggf. Bibliothek verwenden)
+                return line.split(/[,;]/).map(cell => cell.trim().replace(/^"|"$/g, ''));
+            });
+        }
+
+        function displayCSVPreview() {
+            if (csvData.length === 0) return;
+
+            const previewDiv = document.getElementById('csvPreview');
+            const tableHead = document.getElementById('csvTableHead');
+            const tableBody = document.getElementById('csvTableBody');
+
+            // Header erstellen
+            const headers = csvData[0];
+            tableHead.innerHTML = '<tr>' + headers.map(h => `<th>${h}</th>`).join('') + '</tr>';
+
+            // Datenzeilen erstellen (mit editierbaren Inputs)
+            tableBody.innerHTML = '';
+            for (let i = 1; i < csvData.length; i++) {
+                const row = csvData[i];
+                const tr = document.createElement('tr');
+                row.forEach((cell, index) => {
+                    const td = document.createElement('td');
+                    const input = document.createElement('input');
+                    input.type = 'text';
+                    input.value = cell;
+                    input.dataset.row = i;
+                    input.dataset.col = index;
+                    input.addEventListener('input', (e) => {
+                        csvData[i][index] = e.target.value;
+                    });
+                    td.appendChild(input);
+                    tr.appendChild(td);
+                });
+                tableBody.appendChild(tr);
+            }
+
+            previewDiv.style.display = 'block';
+        }
+
+        function importCSVData() {
+            console.log('Importierte CSV-Daten:', csvData);
+            alert(`${csvData.length - 1} Benutzer erfolgreich importiert!\n\nDaten in der Konsole (F12) einsehen.`);
+            cancelCSVPreview();
+        }
+
+        function cancelCSVPreview() {
+            document.getElementById('csvPreview').style.display = 'none';
+            document.getElementById('csvFile').value = '';
+            csvData = [];
+        }
+    </script>
+</body>
+</html>
