diff --git a/public/index.html b/public/index.html
index c44876b..82984a8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -649,13 +649,115 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 10px;
-            margin-bottom: 5px;
-            background: white;
-            border-radius: 4px;
-            border: 1px solid #ddd;
+            gap: 16px;
+            padding: 10px 14px;
+            background: #ffffff;
+            border: 1px solid #c3c6d7;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #0b1c30;
         }
-        
+        .list-item strong {
+            color: #0b1c30;
+            font-weight: 600;
+        }
+        .list-item small {
+            color: #434655;
+            font-size: 12px;
+        }
+        .list-item button {
+            background: #ffffff;
+            color: #434655;
+            padding: 4px 10px;
+            border: 1px solid #c3c6d7;
+            border-radius: 6px;
+            font-size: 12px;
+            font-weight: 500;
+            cursor: pointer;
+            font-family: inherit;
+        }
+        .list-item button:hover {
+            background: #dce9ff;
+            color: #0b1c30;
+            border-color: #2563eb;
+        }
+        .list-item button.btn-danger {
+            background: #ffffff;
+            color: #ba1a1a;
+            border-color: #ffdad6;
+        }
+        .list-item button.btn-danger:hover {
+            background: #ffdad6;
+            border-color: #ba1a1a;
+        }
+        .list-item button.btn-success {
+            background: #2563eb;
+            color: #ffffff;
+            border-color: #2563eb;
+        }
+        .list-item button.btn-success:hover {
+            background: #004ac6;
+        }
+
+        /* Provider cards used by MA-Prozentsätze / MA-Provisionen / Provisionsregeln */
+        .admin-card {
+            background: #ffffff;
+            border: 1px solid #c3c6d7;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .admin-card-header {
+            padding: 12px 16px;
+            background: #eff4ff;
+            border-bottom: 1px solid #c3c6d7;
+        }
+        .admin-card-header h4 {
+            margin: 0;
+            font-size: 14px;
+            font-weight: 600;
+            color: #0b1c30;
+        }
+        .admin-card-content {
+            padding: 12px 16px;
+            color: #0b1c30;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .prozentsaetze-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+        .tarif-provision-controls .form-row {
+            margin-bottom: 0;
+            align-items: center;
+        }
+        .tarif-provision-controls label {
+            color: #434655;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        .tarif-provision-controls input[type=number] {
+            padding: 6px 10px;
+            border: 1px solid #c3c6d7;
+            border-radius: 6px;
+            font-size: 13px;
+        }
+        .tarif-provision-controls button.btn-success {
+            background: #2563eb;
+            color: #ffffff;
+            padding: 6px 12px;
+            border: none;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+        }
+        .tarif-provision-controls button.btn-success:hover {
+            background: #004ac6;
+        }
+
         .table-container {
             overflow-x: auto;
         }
@@ -753,6 +855,137 @@
         /* Documents modal is now styled with Tailwind in the markup.
            Only keep the document-item rule at line ~574 — that one is
            still used by other places (file upload preview list). */
+
+        /* Shared app-modal scaffolding (Stitch style). Pair `display:none`
+           with `display:flex` in JS to toggle. */
+        .app-modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.4);
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+        }
+        .app-modal-card {
+            background: #ffffff;
+            border: 1px solid rgba(195, 198, 215, 0.3);
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+            width: 100%;
+            max-height: 85vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .app-modal-header {
+            padding: 16px 24px;
+            border-bottom: 1px solid #c3c6d7;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .app-modal-header h3 {
+            font-size: 18px;
+            font-weight: 600;
+            color: #0b1c30;
+        }
+        .app-modal-body {
+            padding: 24px;
+            overflow-y: auto;
+            color: #0b1c30;
+        }
+        .app-modal-form {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .app-modal-field {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        .app-modal-field > span {
+            font-size: 11px;
+            font-weight: 700;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: #434655;
+        }
+        .app-modal-field input[type=text],
+        .app-modal-field input[type=number],
+        .app-modal-field input[type=password],
+        .app-modal-field input[type=date],
+        .app-modal-field select,
+        .app-modal-field textarea {
+            padding: 8px 12px;
+            border: 1px solid #c3c6d7;
+            border-radius: 8px;
+            font-size: 14px;
+            font-family: inherit;
+            color: #0b1c30;
+            background: #ffffff;
+            width: 100%;
+        }
+        .app-modal-field input:focus,
+        .app-modal-field select:focus,
+        .app-modal-field textarea:focus {
+            outline: none;
+            border-color: #2563eb;
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
+        }
+        .app-modal-checkbox {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            color: #0b1c30;
+            cursor: pointer;
+        }
+        .app-modal-checkbox input[type=checkbox] {
+            width: 16px;
+            height: 16px;
+            accent-color: #2563eb;
+            cursor: pointer;
+        }
+        .app-modal-footer {
+            padding: 16px 24px;
+            border-top: 1px solid #c3c6d7;
+            background: rgba(239, 244, 255, 0.5);
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+        }
+        .app-modal-btn-primary {
+            background: #2563eb;
+            color: #ffffff;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            font-family: inherit;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
+        .app-modal-btn-primary:hover {
+            background: #004ac6;
+        }
+        .app-modal-btn-secondary {
+            background: #ffffff;
+            color: #0b1c30;
+            padding: 8px 16px;
+            border: 1px solid #c3c6d7;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            font-family: inherit;
+        }
+        .app-modal-btn-secondary:hover {
+            background: #eff4ff;
+        }
         
         @keyframes fadeIn {
             from { opacity: 0; }
@@ -1425,25 +1658,32 @@
                     </div>
                     
                     <div class="admin-form-section">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                        <div class="flex justify-between items-center">
                             <div>
-                                <h4>Tarifoptionen verwalten</h4>
-                                <p style="margin: 0; color: #6c757d; font-size: 14px;">Erstellen und verwalten Sie Zusatzoptionen für Tarife</p>
+                                <h4 style="margin:0;">Tarifoptionen verwalten</h4>
+                                <p style="margin:4px 0 0 0; color:#434655; font-size:13px;">Erstellen und verwalten Sie Zusatzoptionen für Tarife</p>
                             </div>
-                            <button onclick="openAddTarifoptionModal()" style="background: #28a745; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px;">
-                                <span style="font-size: 16px;">+</span>
+                            <button onclick="openAddTarifoptionModal()"
+                                    class="bg-primary-container text-on-primary hover:bg-primary transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-xs shadow-sm">
+                                <span class="material-symbols-outlined text-[18px]">add</span>
                                 Neue Tarifoption
                             </button>
                         </div>
                     </div>
-                    
+
                     <div class="admin-content-section">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                            <h4>Bestehende Tarifoptionen</h4>
-                            <div style="display: flex; gap: 15px; align-items: center;">
-                                <input type="text" id="tarifoptionSearch" placeholder="Nach Tarif oder Option suchen..." style="padding: 8px 12px; border: 2px solid #e1e5e9; border-radius: 6px; width: 250px; font-size: 14px;" oninput="filterTarifoptionenAdmin()">
-                                <button onclick="clearTarifoptionSearch()" style="background: #6c757d; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;">Löschen</button>
-                                <div id="tarifoptionSearchCounter" style="font-size: 13px; color: #6c757d; min-width: 120px;"></div>
+                        <div class="flex justify-between items-center" style="margin-bottom:16px;">
+                            <h4 style="margin:0;">Bestehende Tarifoptionen</h4>
+                            <div class="flex items-center gap-sm">
+                                <input type="text" id="tarifoptionSearch" placeholder="Nach Tarif oder Option suchen…"
+                                       oninput="filterTarifoptionenAdmin()"
+                                       class="bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm text-body-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
+                                       style="width:250px;">
+                                <button onclick="clearTarifoptionSearch()"
+                                        class="bg-surface-container-high text-on-surface border border-outline-variant hover:bg-surface-variant transition-colors rounded h-8 px-md text-body-sm">
+                                    Zurücksetzen
+                                </button>
+                                <div id="tarifoptionSearchCounter" class="text-body-sm text-on-surface-variant" style="min-width:120px;"></div>
                             </div>
                         </div>
                         <div class="table-container">
@@ -1594,60 +1834,78 @@
         </div>
 
         <!-- Modal: Benutzer anlegen / bearbeiten -->
-        <div id="userModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;">
-            <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; border-radius:8px; width:90%; max-width:500px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
-                <h3 id="userModalTitle" style="margin-top:0;">Neuer Benutzer</h3>
-                <input type="hidden" id="userModalUuid">
-                <div class="form-group" style="margin-bottom:14px;">
-                    <label for="userModalUsername">Username</label>
-                    <input type="text" id="userModalUsername" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
+        <div id="userModal" class="app-modal" style="display:none;">
+            <div class="app-modal-card" style="max-width:480px;">
+                <div class="app-modal-header">
+                    <div class="flex items-center gap-sm">
+                        <span class="material-symbols-outlined text-primary">person</span>
+                        <h3 id="userModalTitle" style="margin:0;">Neuer Benutzer</h3>
+                    </div>
+                    <button onclick="closeUserModal()" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
+                        <span class="material-symbols-outlined">close</span>
+                    </button>
                 </div>
-                <div class="form-group" style="margin-bottom:14px;">
-                    <label for="userModalDisplay">Anzeigename</label>
-                    <input type="text" id="userModalDisplay" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
-                </div>
-                <div class="form-group" style="margin-bottom:14px;">
-                    <label for="userModalPassword">Passwort <span id="userModalPasswordHint" style="color:#666; font-size:12px;">(min. 8 Zeichen)</span></label>
-                    <input type="password" id="userModalPassword" autocomplete="new-password" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
-                    <small id="userModalPasswordEditHint" style="color:#666; display:none;">Leer lassen, um Passwort unverändert zu lassen</small>
-                </div>
-                <div class="form-group" style="margin-bottom:18px;">
-                    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
-                        <input type="checkbox" id="userModalIsAdmin"> Administrator
+                <div class="app-modal-body app-modal-form">
+                    <input type="hidden" id="userModalUuid">
+                    <label class="app-modal-field">
+                        <span>Username</span>
+                        <input type="text" id="userModalUsername">
+                    </label>
+                    <label class="app-modal-field">
+                        <span>Anzeigename</span>
+                        <input type="text" id="userModalDisplay">
+                    </label>
+                    <label class="app-modal-field">
+                        <span>Passwort <span id="userModalPasswordHint" style="font-weight:400; letter-spacing:normal; text-transform:none; font-size:12px;">(min. 8 Zeichen)</span></span>
+                        <input type="password" id="userModalPassword" autocomplete="new-password">
+                        <small id="userModalPasswordEditHint" style="display:none; color:#434655; font-size:12px;">Leer lassen, um Passwort unverändert zu lassen</small>
+                    </label>
+                    <label class="app-modal-checkbox">
+                        <input type="checkbox" id="userModalIsAdmin">
+                        <span>Administrator</span>
                     </label>
                 </div>
-                <div style="text-align:right;">
-                    <button type="button" onclick="closeUserModal()" style="margin-right:8px;">Abbrechen</button>
-                    <button type="button" class="btn-success" onclick="saveUserFromModal()">Speichern</button>
+                <div class="app-modal-footer">
+                    <button type="button" onclick="closeUserModal()" class="app-modal-btn-secondary">Abbrechen</button>
+                    <button type="button" onclick="saveUserFromModal()" class="app-modal-btn-primary">Speichern</button>
                 </div>
             </div>
         </div>
 
         <!-- Modal: VO bearbeiten -->
-        <div id="voEditModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;">
-            <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; border-radius:8px; width:90%; max-width:480px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
-                <h3 style="margin-top:0;">VO bearbeiten</h3>
-                <input type="hidden" id="voEditId">
-                <div class="form-group" style="margin-bottom:12px;">
-                    <label>Anbieter</label>
-                    <input type="text" id="voEditAnbieter" readonly style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f5f5f5;">
+        <div id="voEditModal" class="app-modal" style="display:none;">
+            <div class="app-modal-card" style="max-width:480px;">
+                <div class="app-modal-header">
+                    <div class="flex items-center gap-sm">
+                        <span class="material-symbols-outlined text-primary">badge</span>
+                        <h3 style="margin:0;">VO bearbeiten</h3>
+                    </div>
+                    <button onclick="closeVoEditModal()" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
+                        <span class="material-symbols-outlined">close</span>
+                    </button>
                 </div>
-                <div class="form-group" style="margin-bottom:12px;">
-                    <label for="voEditNummer">VO-Nummer</label>
-                    <input type="text" id="voEditNummer" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
-                </div>
-                <div class="form-group" style="margin-bottom:12px;">
-                    <label for="voEditBezeichnung">Bezeichnung</label>
-                    <input type="text" id="voEditBezeichnung" placeholder="z.B. Fachhandel (leer = keine)" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
-                </div>
-                <div class="form-group" style="margin-bottom:18px;">
-                    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
-                        <input type="checkbox" id="voEditAktiv"> Aktiv
+                <div class="app-modal-body app-modal-form">
+                    <input type="hidden" id="voEditId">
+                    <label class="app-modal-field">
+                        <span>Anbieter</span>
+                        <input type="text" id="voEditAnbieter" readonly style="background:#eff4ff; color:#434655;">
+                    </label>
+                    <label class="app-modal-field">
+                        <span>VO-Nummer</span>
+                        <input type="text" id="voEditNummer">
+                    </label>
+                    <label class="app-modal-field">
+                        <span>Bezeichnung</span>
+                        <input type="text" id="voEditBezeichnung" placeholder="z.B. Fachhandel (leer = keine)">
+                    </label>
+                    <label class="app-modal-checkbox">
+                        <input type="checkbox" id="voEditAktiv">
+                        <span>Aktiv</span>
                     </label>
                 </div>
-                <div style="text-align:right;">
-                    <button type="button" onclick="closeVoEditModal()" style="margin-right:8px;">Abbrechen</button>
-                    <button type="button" class="btn-success" onclick="saveVoFromModal()">Speichern</button>
+                <div class="app-modal-footer">
+                    <button type="button" onclick="closeVoEditModal()" class="app-modal-btn-secondary">Abbrechen</button>
+                    <button type="button" onclick="saveVoFromModal()" class="app-modal-btn-primary">Speichern</button>
                 </div>
             </div>
         </div>
@@ -1744,35 +2002,45 @@
     </div>
     
     <!-- Edit Tariff Modal -->
-    <div id="editTariffModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
-        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 600px; max-width: 90%; max-height: 90vh; overflow-y: auto;">
-            <h3>Tarif bearbeiten</h3>
-            <form id="editTariffForm">
-                <input type="hidden" id="editTariffId">
-                <div class="form-group">
-                    <label>Tarif-Name:</label>
-                    <input type="text" id="editTariffName" required>
+    <div id="editTariffModal" class="app-modal" style="display:none;">
+        <div class="app-modal-card" style="max-width:600px;">
+            <div class="app-modal-header">
+                <div class="flex items-center gap-sm">
+                    <span class="material-symbols-outlined text-primary">receipt_long</span>
+                    <h3 style="margin:0;">Tarif bearbeiten</h3>
                 </div>
-                <div class="form-group">
-                    <label>VO:</label>
-                    <select id="editTariffVo">
-                        <option value="">VO wählen...</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label>Shop-Provision (€):</label>
-                    <input type="number" id="editTariffProvisionBetrag" step="0.01" min="0" placeholder="Betrag in Euro">
-                </div>
-                <div class="form-group">
-                    <label>Tarifoptionen (Anbieter-weit):</label>
-                    <div id="editTariffOptionenContainer" style="border:1px solid #ddd; border-radius:6px; padding:10px; max-height:200px; overflow-y:auto; background:#fafafa;">
-                        <small style="color:#666;">Keine Tarifoptionen für diesen Anbieter vorhanden</small>
+                <button onclick="closeModal('editTariffModal')" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
+                    <span class="material-symbols-outlined">close</span>
+                </button>
+            </div>
+            <form id="editTariffForm" class="contents">
+                <div class="app-modal-body app-modal-form">
+                    <input type="hidden" id="editTariffId">
+                    <label class="app-modal-field">
+                        <span>Tarif-Name</span>
+                        <input type="text" id="editTariffName" required>
+                    </label>
+                    <label class="app-modal-field">
+                        <span>VO</span>
+                        <select id="editTariffVo">
+                            <option value="">VO wählen…</option>
+                        </select>
+                    </label>
+                    <label class="app-modal-field">
+                        <span>Shop-Provision (€)</span>
+                        <input type="number" id="editTariffProvisionBetrag" step="0.01" min="0" placeholder="Betrag in Euro">
+                    </label>
+                    <div class="app-modal-field">
+                        <span>Tarifoptionen (Anbieter-weit)</span>
+                        <div id="editTariffOptionenContainer"
+                             style="border:1px solid #c3c6d7; border-radius:8px; padding:12px; max-height:200px; overflow-y:auto; background:#eff4ff; display:flex; flex-direction:column; gap:6px;">
+                            <small style="color:#434655;">Keine Tarifoptionen für diesen Anbieter vorhanden</small>
+                        </div>
                     </div>
                 </div>
-
-                <div style="display: flex; gap: 10px; margin-top: 20px;">
-                    <button type="submit" class="btn-success">Speichern</button>
-                    <button type="button" onclick="closeModal('editTariffModal')">Abbrechen</button>
+                <div class="app-modal-footer">
+                    <button type="button" onclick="closeModal('editTariffModal')" class="app-modal-btn-secondary">Abbrechen</button>
+                    <button type="submit" class="app-modal-btn-primary">Speichern</button>
                 </div>
             </form>
         </div>
@@ -1867,20 +2135,30 @@
     </div>
     
     <!-- Delete Schaltung Modal -->
-    <div id="deleteSchaltungModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
-        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 500px; max-width: 90%;">
-            <h3>Schaltung löschen</h3>
-            <p>Sind Sie sicher, dass Sie diese Schaltung löschen möchten?</p>
-            <p><strong id="deleteSchaltungInfo"></strong></p>
-            <div class="form-group" style="margin-top: 20px;">
-                <label>Grund für die Löschung <span class="required">*</span></label>
-                <textarea id="deleteReason" rows="3" placeholder="Bitte geben Sie den Grund für die Löschung ein..." required style="resize: vertical;"></textarea>
+    <div id="deleteSchaltungModal" class="app-modal" style="display:none;">
+        <div class="app-modal-card" style="max-width:500px;">
+            <div class="app-modal-header">
+                <div class="flex items-center gap-sm">
+                    <span class="material-symbols-outlined text-error">warning</span>
+                    <h3 style="margin:0;">Schaltung löschen</h3>
+                </div>
+                <button onclick="closeModal('deleteSchaltungModal')" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
+                    <span class="material-symbols-outlined">close</span>
+                </button>
             </div>
-            <div style="display: flex; gap: 10px; margin-top: 20px;">
-                <button onclick="confirmDeleteSchaltung()" class="btn-danger">Löschen</button>
-                <button onclick="closeModal('deleteSchaltungModal')">Abbrechen</button>
+            <div class="app-modal-body app-modal-form">
+                <p style="color:#434655;">Sind Sie sicher, dass Sie diese Schaltung löschen möchten?</p>
+                <div style="padding:10px 14px; background:#eff4ff; border:1px solid #c3c6d7; border-radius:8px; color:#0b1c30; font-weight:600;" id="deleteSchaltungInfo"></div>
+                <label class="app-modal-field">
+                    <span>Grund für die Löschung *</span>
+                    <textarea id="deleteReason" rows="3" placeholder="Bitte geben Sie den Grund für die Löschung ein…" required style="resize: vertical;"></textarea>
+                </label>
+                <input type="hidden" id="deleteSchaltungId">
+            </div>
+            <div class="app-modal-footer">
+                <button type="button" onclick="closeModal('deleteSchaltungModal')" class="app-modal-btn-secondary">Abbrechen</button>
+                <button type="button" onclick="confirmDeleteSchaltung()" class="app-modal-btn-primary" style="background:#ba1a1a;">Löschen</button>
             </div>
-            <input type="hidden" id="deleteSchaltungId">
         </div>
     </div>