diff --git a/server/backend/internal/httpapi/manage/templates.go b/server/backend/internal/httpapi/manage/templates.go
index 8127349..f24158c 100644
--- a/server/backend/internal/httpapi/manage/templates.go
+++ b/server/backend/internal/httpapi/manage/templates.go
@@ -690,52 +690,113 @@ if (document.readyState==='loading') document.addEventListener('DOMContentLoaded
 </html>`
 
 const manageTmpl = `<!DOCTYPE html>
-<html lang="de" data-theme="light">
+<html lang="de">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="color-scheme" content="light">
   <title>Playlist – {{.Screen.Name}}</title>
   <link rel="stylesheet" href="/static/bulma.min.css">
   <script src="/static/Sortable.min.js"></script>
   <style>
-    body { background: #f5f5f5; }
-    .drag-handle { cursor: grab; color: #aaa; font-size: 1.2em; user-select: none; }
-    .drag-handle:hover { color: #333; }
-    .item-disabled td { opacity: 0.5; }
-    .edit-row td { background: var(--bulma-warning-light, hsl(48, 100%, 96%)); padding: 0.75rem 1rem; }
-    .tag-type { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; }
-    .sortable-ghost { background: var(--bulma-info-light, hsl(207, 61%, 94%)) !important; }
-    .tab-panel { display: none; }
-    .tab-panel.is-active { display: block; }
+    :root { --morz-red:#E30613; --morz-red-dark:#B8000F; --nav-bg:#1A1A2E; --bg:#F7F8FA; --surface:#FFFFFF; --shadow-sm:0 1px 4px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.12); --radius:8px; --radius-btn:6px; }
+    body { background:var(--bg); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
+    .navbar { background:var(--nav-bg) !important; }
+    .navbar-item,.navbar-link { color:rgba(255,255,255,.85) !important; }
+    .navbar-item:hover,.navbar-link:hover { background:rgba(255,255,255,.08) !important; color:#fff !important; }
+    .morz-brand .accent { color:var(--morz-red); font-weight:800; }
+    .box { border-radius:var(--radius); box-shadow:var(--shadow-sm); }
+    .button.is-primary { background:var(--morz-red) !important; border-color:var(--morz-red) !important; border-radius:var(--radius-btn); }
+    .button.is-primary:hover { background:var(--morz-red-dark) !important; }
+    .button { border-radius:var(--radius-btn) !important; }
+    .input:focus,.select select:focus { border-color:var(--morz-red); box-shadow:0 0 0 3px rgba(227,6,19,.12); outline:none; }
+    /* Two-column layout */
+    .manage-layout { display:grid; grid-template-columns:1fr 380px; gap:1.5rem; align-items:start; }
+    @media (max-width:900px) { .manage-layout { grid-template-columns:1fr; } }
+    /* Playlist item card */
+    .pl-item { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm);
+                padding:.9rem 1rem; display:flex; align-items:flex-start; gap:.75rem;
+                transition:box-shadow .15s; position:relative; }
+    .pl-item:hover { box-shadow:var(--shadow-md); }
+    .pl-item.is-disabled { opacity:.45; }
+    .pl-item + .pl-item { margin-top:.5rem; }
+    .drag-handle { cursor:grab; color:#d1d5db; font-size:1.1rem; padding:.1rem .15rem; user-select:none; flex-shrink:0; margin-top:.1rem; }
+    .drag-handle:hover { color:#6b7280; }
+    .sortable-ghost { background:#f0fdf4 !important; box-shadow:none !important; }
+    .pl-item-body { flex:1; min-width:0; }
+    .pl-item-top { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.35rem; }
+    .pl-type-badge { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; background:#f3f4f6; color:#374151; padding:.15em .55em; border-radius:4px; font-weight:700; flex-shrink:0; }
+    .pl-title { font-weight:600; font-size:.9rem; cursor:pointer; border:1px solid transparent; border-radius:4px; padding:.1em .3em; background:transparent; min-width:60px; }
+    .pl-title:hover { border-color:#d1d5db; background:#f9fafb; }
+    .pl-title:focus { border-color:var(--morz-red); background:#fff; outline:none; box-shadow:0 0 0 2px rgba(227,6,19,.15); }
+    .pl-meta { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.8rem; color:#6b7280; }
+    .pl-duration-wrap { display:inline-flex; align-items:center; gap:.25rem; }
+    .pl-duration { cursor:pointer; border:1px solid transparent; border-radius:4px; padding:.1em .3em; background:transparent; width:4rem; text-align:center; font-size:.8rem; color:#6b7280; }
+    .pl-duration:hover { border-color:#d1d5db; background:#f9fafb; }
+    .pl-duration:focus { border-color:var(--morz-red); background:#fff; outline:none; }
+    /* Enable toggle */
+    .pl-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; gap:.4rem; }
+    .pl-toggle input { position:absolute; opacity:0; width:0; height:0; }
+    .pl-toggle-track { width:32px; height:18px; border-radius:9px; background:#d1d5db; transition:background .2s; flex-shrink:0; }
+    .pl-toggle input:checked + .pl-toggle-track { background:#22c55e; }
+    .pl-toggle-thumb { position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .2s; left:2px; top:2px; }
+    .pl-toggle input:checked ~ .pl-toggle-thumb { left:16px; }
+    .pl-toggle-label { font-size:.75rem; color:#6b7280; }
+    /* Validity expand */
+    .pl-validity-toggle { font-size:.75rem; color:#6b7280; cursor:pointer; border:none; background:none; padding:0; text-decoration:underline dotted; }
+    .pl-validity-toggle:hover { color:var(--morz-red); }
+    .pl-validity-fields { margin-top:.5rem; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
+    .pl-validity-fields .field { margin:0; }
+    .pl-validity-fields label { font-size:.7rem; color:#6b7280; display:block; margin-bottom:.2rem; }
+    /* Save indicator */
+    .save-ok { color:#22c55e; font-size:.8rem; opacity:0; transition:opacity .3s; }
+    .save-ok.show { opacity:1; }
+    /* Delete btn */
+    .pl-delete { position:absolute; top:.6rem; right:.6rem; background:none; border:none; cursor:pointer; color:#d1d5db; font-size:.9rem; padding:.15rem; border-radius:4px; opacity:0; transition:opacity .15s; }
+    .pl-item:hover .pl-delete { opacity:1; }
+    .pl-delete:hover { color:#ef4444; background:#fef2f2; }
+    /* Library */
+    .lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.75rem; }
+    .lib-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
+    .lib-thumb { width:100%; height:80px; object-fit:cover; background:#f3f4f6; display:flex; align-items:center; justify-content:center; font-size:2rem; }
+    .lib-info { padding:.5rem .6rem; flex:1; }
+    .lib-title { font-size:.75rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+    .lib-badge { font-size:.6rem; text-transform:uppercase; color:#6b7280; }
+    .lib-actions { padding:.4rem .6rem; border-top:1px solid #f3f4f6; display:flex; gap:.35rem; }
+    /* Upload zone */
+    .upload-zone { border:2px dashed #d1d5db; border-radius:var(--radius); padding:1.5rem; text-align:center; cursor:pointer; transition:border-color .15s; }
+    .upload-zone:hover,.upload-zone.dragover { border-color:var(--morz-red); background:#fff5f5; }
+    .upload-zone p { color:#9ca3af; font-size:.875rem; margin:.25rem 0; }
+    /* Screenshot */
+    .screen-preview { width:100%; max-height:200px; object-fit:cover; background:#1e293b; display:block; border-radius:var(--radius) var(--radius) 0 0; }
+    /* Modal */
+    .modal-card { border-radius:var(--radius); overflow:hidden; }
+    .modal-card-head { background:var(--nav-bg); }
+    .modal-card-title { color:#fff; font-weight:700; }
+    /* Toasts */
+    .morz-toast { position:fixed; top:1rem; right:1rem; z-index:9999; max-width:380px; border-radius:24px; box-shadow:var(--shadow-md); padding:.75rem 1.25rem; display:flex; align-items:center; gap:.75rem; font-size:.9rem; transform:translateX(120%); transition:transform .25s ease; }
+    .morz-toast.show { transform:translateX(0); }
+    .morz-toast.is-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
+    .morz-toast.is-danger  { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
   </style>
 </head>
 <body>
 
-<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    {{if .IsAdmin}}<a class="navbar-item" href="{{.BackLink}}">{{.BackLabel}}</a>{{end}}
-    <span class="navbar-item">
-      <strong>{{.Screen.Name}}</strong>
-      &nbsp;
-      <span class="tag is-info is-light">{{orientationLabel .Screen.Orientation}}</span>
-    </span>
-    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="manageNavbar">
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
+    {{if .IsAdmin}}<a class="navbar-item" href="{{.BackLink}}" style="font-size:.85rem">{{.BackLabel}}</a>{{end}}
+    <span class="navbar-item morz-brand"><span class="accent">MORZ</span>&nbsp;<span style="color:rgba(255,255,255,.85)">{{.Screen.Name}}</span></span>
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="manageNav">
+      <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
     </a>
   </div>
-  <div id="manageNavbar" class="navbar-menu">
+  <div id="manageNav" class="navbar-menu">
     <div class="navbar-start">
       {{if gt (len .AccessibleScreens) 1}}
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">Bildschirm wechseln</a>
         <div class="navbar-dropdown">
           {{range .AccessibleScreens}}
-          <a class="navbar-item{{if eq .Slug $.Screen.Slug}} is-active{{end}}" href="/manage/{{.Slug}}">
-            {{.Name}}
-          </a>
+          <a class="navbar-item{{if eq .Slug $.Screen.Slug}} is-active{{end}}" href="/manage/{{.Slug}}">{{.Name}}</a>
           {{end}}
         </div>
       </div>
@@ -745,450 +806,348 @@ const manageTmpl = `<!DOCTYPE html>
       <div class="navbar-item">
         <form method="POST" action="/logout">
           <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
-          <button class="button is-white is-outlined is-small" type="submit">Abmelden</button>
+          <button class="button is-outlined is-small" style="color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35)" type="submit">Abmelden</button>
         </form>
       </div>
     </div>
   </div>
 </nav>
 
-<!-- Lösch-Bestätigungs-Modal -->
-<div id="manage-delete-modal" class="modal">
-  <div class="modal-background" onclick="closeManageDeleteModal()"></div>
+<!-- Delete confirm modal -->
+<div id="del-modal" class="modal">
+  <div class="modal-background" onclick="document.getElementById('del-modal').classList.remove('is-active')"></div>
   <div class="modal-card">
     <header class="modal-card-head">
-      <p class="modal-card-title" id="manage-delete-modal-title">Eintrag entfernen?</p>
-      <button class="delete" aria-label="Schließen" onclick="closeManageDeleteModal()"></button>
+      <p class="modal-card-title" id="del-title">Löschen?</p>
+      <button class="delete" onclick="document.getElementById('del-modal').classList.remove('is-active')"></button>
     </header>
-    <section class="modal-card-body">
-      <p id="manage-delete-modal-body">Soll der Eintrag wirklich entfernt werden?</p>
-    </section>
-    <footer class="modal-card-foot">
-      <form id="manage-delete-modal-form" method="POST">
-        <button class="button is-danger" type="submit">Wirklich löschen</button>
-      </form>
-      <button class="button" onclick="closeManageDeleteModal()">Abbrechen</button>
+    <section class="modal-card-body"><p id="del-body"></p></section>
+    <footer class="modal-card-foot" style="gap:.5rem">
+      <form id="del-form" method="POST"><button class="button is-danger" type="submit">Löschen</button></form>
+      <button class="button" onclick="document.getElementById('del-modal').classList.remove('is-active')">Abbrechen</button>
     </footer>
   </div>
 </div>
 
+<section class="section pt-4">
+  <div class="container">
+
+    <!-- Screenshot -->
+    <div class="box mb-4" style="padding:0;overflow:hidden">
+      <img class="screen-preview"
+           data-src="/api/v1/screens/{{.Screen.Slug}}/screenshot"
+           alt="Screenshot {{.Screen.Name}}">
+      <div style="padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem;background:var(--surface)">
+        <span class="tag is-light" style="font-size:.75rem">{{orientationLabel .Screen.Orientation}}</span>
+        <span style="font-size:.8rem;color:#6b7280">{{.Screen.Slug}}</span>
+      </div>
+    </div>
+
+    <div class="manage-layout">
+
+      <!-- LEFT: Playlist -->
+      <div>
+        <div class="box">
+          <h2 class="title is-5 mb-4">Playlist</h2>
+
+          {{if .Items}}
+          <div id="sortable-items">
+            {{range .Items}}
+            <div class="pl-item{{if not .Enabled}} is-disabled{{end}}" id="item-{{.ID}}" data-id="{{.ID}}">
+              <span class="drag-handle" role="button" tabindex="0" title="Ziehen zum Sortieren">⠿</span>
+
+              <div class="pl-item-body">
+                <div class="pl-item-top">
+                  <span class="pl-type-badge">{{typeIcon .Type}} {{.Type}}</span>
+                  <input class="pl-title"
+                         value="{{.Title}}"
+                         placeholder="{{shortSrc .Src}}"
+                         data-id="{{.ID}}"
+                         onblur="saveField(this,'title')"
+                         onkeydown="if(event.key==='Enter'){this.blur()}">
+                  <span class="save-ok" id="ok-title-{{.ID}}">✓</span>
+                </div>
+
+                <div class="pl-meta">
+                  <div class="pl-duration-wrap">
+                    <input class="pl-duration" type="number" min="1" max="3600"
+                           value="{{.DurationSeconds}}"
+                           data-id="{{.ID}}"
+                           onblur="saveField(this,'duration_seconds')"
+                           onkeydown="if(event.key==='Enter'){this.blur()}"
+                           title="Anzeigedauer in Sekunden">
+                    <span>s</span>
+                    <span class="save-ok" id="ok-dur-{{.ID}}">✓</span>
+                  </div>
+
+                  <label class="pl-toggle" title="Aktiv / Deaktiviert">
+                    <input type="checkbox" {{if .Enabled}}checked{{end}} onchange="toggleEnabled('{{.ID}}',this.checked)">
+                    <span class="pl-toggle-track"></span>
+                    <span class="pl-toggle-thumb"></span>
+                    <span class="pl-toggle-label" id="enabled-label-{{.ID}}">{{if .Enabled}}Aktiv{{else}}Aus{{end}}</span>
+                  </label>
+
+                  {{if or .ValidFrom .ValidUntil}}
+                  <button class="pl-validity-toggle" type="button" onclick="toggleValidity('{{.ID}}')">
+                    {{if and .ValidFrom .ValidUntil}}{{formatDateDE .ValidFrom}} – {{formatDateDE .ValidUntil}}{{else if .ValidFrom}}ab {{formatDateDE .ValidFrom}}{{else}}bis {{formatDateDE .ValidUntil}}{{end}}
+                  </button>
+                  {{else}}
+                  <button class="pl-validity-toggle" type="button" onclick="toggleValidity('{{.ID}}')">+ Gültigkeit</button>
+                  {{end}}
+                </div>
+
+                <div class="pl-validity-fields" id="validity-{{.ID}}" style="display:none">
+                  <div class="field">
+                    <label>Gültig ab</label>
+                    <input class="input is-small" type="datetime-local"
+                           value="{{formatDT .ValidFrom}}"
+                           data-id="{{.ID}}"
+                           onblur="saveField(this,'valid_from')">
+                  </div>
+                  <div class="field">
+                    <label>Gültig bis</label>
+                    <input class="input is-small" type="datetime-local"
+                           value="{{formatDT .ValidUntil}}"
+                           data-id="{{.ID}}"
+                           onblur="saveField(this,'valid_until')">
+                  </div>
+                  <span class="save-ok" id="ok-validity-{{.ID}}">✓</span>
+                </div>
+              </div>
+
+              <button class="pl-delete" type="button"
+                title="Aus Playlist entfernen"
+                onclick="openDelModal('/manage/{{$.Screen.Slug}}/items/{{.ID}}/delete','Eintrag entfernen?','Eintrag wirklich aus der Playlist entfernen?')">✕</button>
+            </div>
+            {{end}}
+          </div>
+          <p class="help has-text-grey mt-3" style="font-size:.75rem">Per Drag &amp; Drop sortieren oder Felder direkt bearbeiten.</p>
+          {{else}}
+          <div class="notification is-light">
+            Die Playlist ist leer. Füge Medien aus der Bibliothek hinzu.
+          </div>
+          {{end}}
+        </div>
+      </div>
+
+      <!-- RIGHT: Library + Upload -->
+      <div>
+        <!-- Upload (collapsed) -->
+        <div class="box mb-3">
+          <details id="upload-details">
+            <summary style="cursor:pointer;font-weight:700;font-size:.9rem;list-style:none;display:flex;align-items:center;justify-content:space-between">
+              <span>+ Medium hinzufügen</span>
+              <span style="font-size:.75rem;color:#9ca3af">▼</span>
+            </summary>
+            <div style="margin-top:1rem">
+              <div class="tabs is-small mb-3" id="upload-tabs">
+                <ul>
+                  <li id="utab-file" class="is-active"><a onclick="switchUploadTab('file')" style="cursor:pointer">📁 Datei</a></li>
+                  <li id="utab-web"><a onclick="switchUploadTab('web')" style="cursor:pointer">🌐 URL</a></li>
+                </ul>
+              </div>
+
+              <div id="upanel-file">
+                <form id="upload-form" method="POST" action="/manage/{{.Screen.Slug}}/upload" enctype="multipart/form-data">
+                  <div class="field">
+                    <label class="label is-small">Typ</label>
+                    <div class="select is-small">
+                      <select name="type" id="upload-type-sel" onchange="updateAccept(this.value)">
+                        <option value="image">🖼 Bild</option>
+                        <option value="video">🎬 Video</option>
+                        <option value="pdf">📄 PDF</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="field">
+                    <label class="label is-small">Titel <span class="has-text-grey">(optional)</span></label>
+                    <input class="input is-small" type="text" name="title" placeholder="Aus Dateinamen abgeleitet">
+                  </div>
+                  <div class="field">
+                    <label class="label is-small">Datei</label>
+                    <div class="upload-zone" id="drop-zone" onclick="document.getElementById('upload-file-inp').click()" ondragover="event.preventDefault();this.classList.add('dragover')" ondragleave="this.classList.remove('dragover')" ondrop="handleDrop(event)">
+                      <p style="font-size:1.5rem">📂</p>
+                      <p>Klicken oder Datei hierher ziehen</p>
+                      <p id="drop-filename" style="display:none;color:#374151;font-weight:600"></p>
+                    </div>
+                    <input type="file" id="upload-file-inp" name="file" accept="image/*,video/*,application/pdf" style="display:none" onchange="updateDropLabel(this)">
+                  </div>
+                  <div id="upload-progress-wrap" style="display:none" class="mt-2">
+                    <progress id="upload-progress" class="progress is-primary is-small" value="0" max="100">0%</progress>
+                  </div>
+                  <div id="upload-error" class="notification is-danger is-light is-small mt-2" style="display:none"></div>
+                  <button class="button is-primary is-small mt-2" type="button" id="upload-btn" onclick="startUpload()">Hochladen</button>
+                </form>
+              </div>
+
+              <div id="upanel-web" style="display:none">
+                <form method="POST" action="/manage/{{.Screen.Slug}}/upload" enctype="multipart/form-data">
+                  <input type="hidden" name="type" value="web">
+                  <div class="field">
+                    <label class="label is-small">URL</label>
+                    <input class="input is-small" type="url" name="url" placeholder="https://example.com" required>
+                  </div>
+                  <div class="field">
+                    <label class="label is-small">Titel <span class="has-text-grey">(optional)</span></label>
+                    <input class="input is-small" type="text" name="title" placeholder="Anzeigename">
+                  </div>
+                  <button class="button is-primary is-small" type="submit">Hinzufügen</button>
+                </form>
+              </div>
+            </div>
+          </details>
+        </div>
+
+        <!-- Library -->
+        <div class="box">
+          <h2 class="title is-6 mb-3">Medienbibliothek</h2>
+          {{if .Assets}}
+          <div class="lib-grid">
+            {{range .Assets}}
+            <div class="lib-card">
+              <div class="lib-thumb">
+                {{if eq .Type "image"}}<img src="{{if .StoragePath}}/uploads/{{.StoragePath}}{{else}}{{.OriginalURL}}{{end}}" style="width:100%;height:80px;object-fit:cover" alt="" loading="lazy" onerror="this.style.display='none';this.parentElement.textContent='🖼'">
+                {{else if eq .Type "video"}}🎬
+                {{else if eq .Type "pdf"}}📄
+                {{else}}🌐{{end}}
+              </div>
+              <div class="lib-info">
+                <div class="lib-title" title="{{.Title}}">{{.Title}}</div>
+                <div class="lib-badge">{{typeIcon .Type}} {{.Type}}</div>
+              </div>
+              <div class="lib-actions">
+                {{if index $.AddedAssets .ID}}
+                <span style="font-size:.7rem;color:#22c55e;font-weight:600">✓ In Playlist</span>
+                {{else}}
+                <form method="POST" action="/manage/{{$.Screen.Slug}}/items" style="flex:1">
+                  <input type="hidden" name="media_asset_id" value="{{.ID}}">
+                  <button class="button is-primary is-small is-fullwidth" type="submit">+ Hinzufügen</button>
+                </form>
+                {{end}}
+                <button class="button is-small is-danger is-outlined" type="button"
+                  title="Aus Bibliothek löschen"
+                  onclick="openDelModal('/manage/{{$.Screen.Slug}}/media/{{.ID}}/delete','Medium löschen?','Wirklich löschen? Playlist-Einträge bleiben bestehen.')">🗑</button>
+              </div>
+            </div>
+            {{end}}
+          </div>
+          {{else}}
+          <p class="has-text-grey" style="font-size:.875rem">Noch keine Medien. Lade oben eine Datei hoch.</p>
+          {{end}}
+        </div>
+      </div>
+
+    </div><!-- /manage-layout -->
+  </div>
+</section>
+
 <script>
+var SCREEN_SLUG = '{{.Screen.Slug}}';
+var SERVER_TZ = '{{.ServerTimezone}}';
+
+// ─── Navbar burger ───────────────────────────────────────────────
+(function() {
+  var b = document.querySelector('.navbar-burger');
+  if (b) b.addEventListener('click', function() {
+    b.classList.toggle('is-active');
+    document.getElementById(b.dataset.target).classList.toggle('is-active');
+  });
+})();
+
+// ─── Delete modal ────────────────────────────────────────────────
+function openDelModal(action, title, body) {
+  document.getElementById('del-form').action = action;
+  document.getElementById('del-title').textContent = title;
+  document.getElementById('del-body').textContent = body;
+  document.getElementById('del-modal').classList.add('is-active');
+}
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') document.getElementById('del-modal').classList.remove('is-active');
+});
+
+// ─── CSRF ────────────────────────────────────────────────────────
+function getCsrf() { var m = document.cookie.match('(?:^|; )morz_csrf=([^;]*)'); return m ? decodeURIComponent(m[1]) : ''; }
+function injectCSRF() {
+  var t = getCsrf(); if (!t) return;
+  document.querySelectorAll('form[method="POST"],form[method="post"]').forEach(function(f) {
+    if (!f.querySelector('input[name="csrf_token"]')) { var i=document.createElement('input');i.type='hidden';i.name='csrf_token';i.value=t;f.appendChild(i); }
+  });
+}
+if (document.readyState==='loading') document.addEventListener('DOMContentLoaded',injectCSRF); else injectCSRF();
+
+// ─── Toast ───────────────────────────────────────────────────────
+function showToast(msg, type) {
+  var t = document.createElement('div');
+  t.className = 'morz-toast ' + (type || 'is-success');
+  t.innerHTML = msg + '<button onclick="this.parentElement.remove()" style="background:none;border:none;cursor:pointer;font-size:1rem;margin-left:auto;opacity:.6">✕</button>';
+  document.body.appendChild(t);
+  requestAnimationFrame(function() { t.classList.add('show'); });
+  setTimeout(function() { t.classList.remove('show'); setTimeout(function() { t.remove(); }, 300); }, 3500);
+}
+
+// ─── ?msg= toast ─────────────────────────────────────────────────
 (function() {
   var msg = new URLSearchParams(window.location.search).get('msg');
   if (!msg) return;
-  var texts = {
-    'uploaded': '✓ Medium erfolgreich hochgeladen.',
-    'deleted':  '✓ Erfolgreich gelöscht.',
-    'saved':    '✓ Änderungen gespeichert.',
-    'added':    '✓ Erfolgreich hinzugefügt.'
-  };
-  var text = texts[msg] || '✓ Aktion erfolgreich.';
-  var n = document.createElement('div');
-  n.className = 'notification is-success';
-  n.setAttribute('role', 'alert');
-  n.style.cssText = 'position:fixed;top:1rem;right:1rem;z-index:9999;max-width:380px;box-shadow:0 4px 12px rgba(0,0,0,.15)';
-  n.innerHTML = '<button class="delete"></button>' + text;
-  n.querySelector('.delete').addEventListener('click', function() { n.remove(); });
-  document.body.appendChild(n);
-  setTimeout(function() {
-    n.style.transition = 'opacity .5s';
-    n.style.opacity = '0';
-    setTimeout(function() { n.remove(); }, 500);
-  }, 3000);
-  // Clean URL without reloading
-  var url = new URL(window.location.href);
-  url.searchParams.delete('msg');
-  history.replaceState(null, '', url.toString());
+  var texts = { uploaded:'✓ Medium hochgeladen.', deleted:'✓ Gelöscht.', saved:'✓ Gespeichert.', added:'✓ Hinzugefügt.' };
+  showToast(texts[msg] || '✓ OK');
+  history.replaceState(null, '', window.location.pathname);
 })();
 
-function openManageDeleteModal(action, title, body) {
-  document.getElementById('manage-delete-modal-form').action = action;
-  document.getElementById('manage-delete-modal-title').textContent = title;
-  document.getElementById('manage-delete-modal-body').textContent = body;
-  document.getElementById('manage-delete-modal').classList.add('is-active');
-}
-function closeManageDeleteModal() {
-  document.getElementById('manage-delete-modal').classList.remove('is-active');
-}
-document.addEventListener('keydown', function(e) {
-  if (e.key === 'Escape') closeManageDeleteModal();
-});
-</script>
-<section class="section pb-0 pt-3">
-  <div class="container">
-    <nav class="breadcrumb" aria-label="breadcrumb">
-      <ul>
-        {{if .IsAdmin}}<li><a href="/admin">Admin</a></li>{{end}}
-        <li class="is-active"><a href="#" aria-current="page">{{.Screen.Name}}</a></li>
-      </ul>
-    </nav>
-  </div>
-</section>
+// ─── Inline field save ───────────────────────────────────────────
+function saveField(el, fieldName) {
+  var id = el.dataset.id;
+  var params = new URLSearchParams();
+  params.set('csrf_token', getCsrf());
 
-<section class="section pt-2">
-  <div class="container">
+  // Always send all required fields by reading the item's current DOM state
+  var item = document.getElementById('item-' + id);
+  var titleEl = item.querySelector('.pl-title');
+  var durEl   = item.querySelector('.pl-duration');
+  var togEl   = item.querySelector('.pl-toggle input');
+  var vfEl    = item.querySelector('[onblur*="valid_from"]');
+  var vuEl    = item.querySelector('[onblur*="valid_until"]');
 
-    <!-- ── Screenshot ── -->
-    <div class="box" style="padding:0;overflow:hidden;margin-bottom:1.5rem">
-      <img class="screen-thumb"
-           data-src="/api/v1/screens/{{.Screen.Slug}}/screenshot"
-           style="width:100%;max-height:220px;object-fit:cover;background:#222;display:block"
-           alt="Screenshot {{.Screen.Name}}">
-    </div>
+  params.set('title',            titleEl ? titleEl.value : '');
+  params.set('duration_seconds', durEl   ? durEl.value   : '20');
+  params.set('enabled',          togEl && togEl.checked ? 'true' : 'false');
+  if (vfEl && vfEl.value) params.set('valid_from',  vfEl.value);
+  if (vuEl && vuEl.value) params.set('valid_until', vuEl.value);
 
-    <!-- ── Playlist ── -->
-    <div class="box">
-      <h2 class="title is-5 mb-3">Aktuelle Playlist</h2>
-      {{if .Items}}
-      <div style="overflow-x: auto">
-      <table class="table is-fullwidth" id="playlist-table">
-        <thead>
-          <tr>
-            <th style="width:2rem"></th>
-            <th style="width:5rem">Typ</th>
-            <th>Titel / Quelle</th>
-            <th style="width:6rem">Dauer</th>
-            <th style="width:7rem">Status</th>
-            <th style="width:12rem">Aktionen</th>
-          </tr>
-        </thead>
-        <tbody id="sortable-items">
-          {{range .Items}}
-          <tr id="item-{{.ID}}" class="{{if not .Enabled}}item-disabled{{end}}">
-            <td style="white-space:nowrap">
-              <span class="drag-handle" role="button" aria-label="Reihenfolge per Drag ändern" tabindex="0" title="Ziehen zum Sortieren">⠿</span>
-              <button type="button" class="button is-small is-white px-1" style="min-width:1.6rem" title="Nach oben" aria-label="Eintrag nach oben" onclick="reorderMove('{{.ID}}', -1)">▲</button>
-              <button type="button" class="button is-small is-white px-1" style="min-width:1.6rem" title="Nach unten" aria-label="Eintrag nach unten" onclick="reorderMove('{{.ID}}', 1)">▼</button>
-            </td>
-            <td>
-              <span class="tag is-light tag-type">{{typeIcon .Type}}&nbsp;{{.Type}}</span>
-            </td>
-            <td>
-              <div>{{if .Title}}<strong>{{.Title}}</strong>{{else}}<em class="has-text-grey">{{shortSrc .Src}}</em>{{end}}</div>
-              {{if .Title}}<small class="has-text-grey">{{shortSrc .Src}}</small>{{end}}
-              {{if and .ValidFrom .ValidUntil}}<span class="tag is-info is-light is-small mt-1">{{formatDateDE .ValidFrom}} – {{formatDateDE .ValidUntil}}</span>
-              {{else if .ValidFrom}}<span class="tag is-info is-light is-small mt-1">ab {{formatDateDE .ValidFrom}}</span>
-              {{else if .ValidUntil}}<span class="tag is-info is-light is-small mt-1">bis {{formatDateDE .ValidUntil}}</span>{{end}}
-            </td>
-            <td>{{.DurationSeconds}}&thinsp;s</td>
-            <td>
-              {{if .Enabled}}
-              <span class="tag is-success is-light">Aktiv</span>
-              {{else}}
-              <span class="tag is-warning is-light">Deaktiviert</span>
-              {{end}}
-            </td>
-            <td>
-              <button class="button is-small is-info is-outlined" onclick="toggleEdit('{{.ID}}')">Bearbeiten</button>
-              <button class="button is-small is-danger is-outlined"
-                      type="button"
-                      aria-label="{{if .Title}}{{.Title}}{{else}}Eintrag{{end}} aus Playlist entfernen"
-                      title="Entfernen"
-                      onclick="openManageDeleteModal('/manage/{{$.Screen.Slug}}/items/{{.ID}}/delete', 'Eintrag entfernen?', 'Eintrag wirklich aus der Playlist entfernen?')">✕</button>
-            </td>
-          </tr>
-          <tr id="edit-{{.ID}}" class="edit-row" style="display:none">
-            <td colspan="6">
-              <form method="POST" action="/manage/{{$.Screen.Slug}}/items/{{.ID}}">
-                <div class="columns is-vcentered is-multiline">
-                  <div class="column is-4">
-                    <label class="label is-small">Titel</label>
-                    <input class="input is-small" type="text" name="title" value="{{.Title}}"
-                           placeholder="Anzeigename (optional)">
-                  </div>
-                  <div class="column is-narrow">
-                    <label class="label is-small">Dauer (Sek.)</label>
-                    <input class="input is-small" type="number" name="duration_seconds"
-                           value="{{.DurationSeconds}}" min="1" max="3600" style="width:6rem">
-                  </div>
-                  <div class="column is-narrow">
-                    <label class="label is-small">Gültig ab</label>
-                    <input class="input is-small" type="datetime-local" name="valid_from"
-                           value="{{formatDT .ValidFrom}}">
-                    <p class="help">Zeiten in Zeitzone des Servers (Europe/Berlin)</p>
-                  </div>
-                  <div class="column is-narrow">
-                    <label class="label is-small">Gültig bis</label>
-                    <input class="input is-small" type="datetime-local" name="valid_until"
-                           value="{{formatDT .ValidUntil}}">
-                    <p class="help">Zeiten in Zeitzone des Servers (Europe/Berlin)</p>
-                  </div>
-                  <div class="column is-narrow">
-                    <label class="label is-small">Aktiv</label>
-                    <div class="control" style="padding-top:0.4rem">
-                      <label class="checkbox">
-                        <input type="checkbox" name="enabled" value="true" {{if .Enabled}}checked{{end}}>
-                        Aktiv
-                      </label>
-                    </div>
-                  </div>
-                  <div class="column is-narrow">
-                    <label class="label is-small">&nbsp;</label>
-                    <div class="buttons">
-                      <button class="button is-small is-success" type="submit">Speichern</button>
-                      <button class="button is-small" type="button" onclick="toggleEdit('{{.ID}}')">Abbrechen</button>
-                    </div>
-                  </div>
-                </div>
-              </form>
-            </td>
-          </tr>
-          {{end}}
-        </tbody>
-      </table>
-      </div>
-      <p class="help has-text-grey mt-2">Einträge per Drag &amp; Drop in der Reihenfolge verschieben.</p>
-      {{else}}
-      <div class="notification is-light">
-        Die Playlist ist noch leer. Füge unten Medien aus der Bibliothek hinzu oder lade neue Dateien hoch.
-      </div>
-      {{end}}
-    </div>
-
-    <!-- ── Medienbibliothek ── -->
-    <div class="box">
-      <h2 class="title is-5 mb-3">Medienbibliothek</h2>
-      {{if .Assets}}
-      <div style="overflow-x: auto">
-      <table class="table is-fullwidth is-hoverable is-striped">
-        <thead>
-          <tr>
-            <th style="width:5rem">Typ</th>
-            <th>Titel</th>
-            <th>Quelle</th>
-            <th style="width:14rem">Aktionen</th>
-          </tr>
-        </thead>
-        <tbody>
-          {{range .Assets}}
-          <tr>
-            <td><span class="tag is-light tag-type">{{typeIcon .Type}}&nbsp;{{.Type}}</span></td>
-            <td>{{.Title}}</td>
-            <td>
-              <small class="has-text-grey">
-                {{if .StoragePath}}{{shortSrc .StoragePath}}{{else}}{{shortSrc .OriginalURL}}{{end}}
-              </small>
-            </td>
-            <td>
-              {{if index $.AddedAssets .ID}}
-              <span class="tag is-success is-light mr-2">✓ In Playlist</span>
-              {{else}}
-              <form method="POST" action="/manage/{{$.Screen.Slug}}/items" style="display:inline">
-                <input type="hidden" name="media_asset_id" value="{{.ID}}">
-                <button class="button is-small is-primary" type="submit">+ Hinzufügen</button>
-              </form>
-              &nbsp;
-              {{end}}
-              <button class="button is-small is-danger is-outlined"
-                      type="button"
-                      aria-label="{{.Title}} aus Bibliothek löschen"
-                      title="Aus Bibliothek löschen"
-                      onclick="openManageDeleteModal('/manage/{{$.Screen.Slug}}/media/{{.ID}}/delete', 'Medium löschen?', 'Medium wirklich aus der Bibliothek löschen? Playlist-Einträge bleiben bestehen, zeigen dann aber nichts an.')">🗑</button>
-            </td>
-          </tr>
-          {{end}}
-        </tbody>
-      </table>
-      </div>
-      {{else}}
-      <div class="notification is-light">Noch keine Medien hochgeladen. Lade unten eine Datei hoch oder füge eine Webseite hinzu.</div>
-      {{end}}
-    </div>
-
-    <!-- ── Neues Medium hinzufügen ── -->
-    <div class="box">
-      <h2 class="title is-5 mb-3">Neues Medium hinzufügen</h2>
-
-      <div class="tabs" id="upload-tabs">
-        <ul>
-          <li id="tab-file" class="is-active"><a><button type="button" role="tab" aria-selected="true" onclick="switchTab('file')" style="background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit">📁 Datei hochladen</button></a></li>
-          <li id="tab-web"><a><button type="button" role="tab" aria-selected="false" onclick="switchTab('web')" style="background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit">🌐 Webseite / URL</button></a></li>
-        </ul>
-      </div>
-
-      <div id="panel-file" class="tab-panel is-active">
-        <form id="upload-form" method="POST" action="/manage/{{.Screen.Slug}}/upload" enctype="multipart/form-data">
-          <div class="columns is-vcentered">
-            <div class="column is-2">
-              <div class="field">
-                <label class="label">Typ</label>
-                <div class="select is-fullwidth">
-                  <select name="type" id="upload-type-select" onchange="updateFileAccept(this.value)">
-                    <option value="image">🖼 Bild</option>
-                    <option value="video">🎬 Video</option>
-                    <option value="pdf">📄 PDF</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-            <div class="column">
-              <div class="field">
-                <label class="label">Titel <span class="has-text-grey">(optional)</span></label>
-                <input class="input" type="text" name="title"
-                       placeholder="Wird aus Dateinamen abgeleitet, wenn leer">
-              </div>
-            </div>
-            <div class="column">
-              <div class="field">
-                <label class="label">Datei</label>
-                <div class="control">
-                  <input class="input" type="file" name="file" id="upload-file-input" required
-                         accept="image/*,video/*,application/pdf">
-                </div>
-              </div>
-            </div>
-            <div class="column is-narrow">
-              <div class="field">
-                <label class="label">&nbsp;</label>
-                <button class="button is-primary" type="button" id="upload-btn" onclick="startUpload()">Hochladen</button>
-              </div>
-            </div>
-          </div>
-          <div id="upload-progress-wrap" style="display:none" class="mt-2">
-            <progress id="upload-progress" class="progress is-primary" value="0" max="100">0%</progress>
-          </div>
-          <div id="upload-error" class="notification is-danger is-light mt-2" style="display:none"></div>
-        </form>
-      </div>
-
-      <div id="panel-web" class="tab-panel">
-        <form method="POST" action="/manage/{{.Screen.Slug}}/upload" enctype="multipart/form-data">
-          <input type="hidden" name="type" value="web">
-          <div class="columns is-vcentered">
-            <div class="column">
-              <div class="field">
-                <label class="label">URL</label>
-                <input class="input" type="url" name="url"
-                       placeholder="https://example.com" required>
-              </div>
-            </div>
-            <div class="column">
-              <div class="field">
-                <label class="label">Titel <span class="has-text-grey">(optional)</span></label>
-                <input class="input" type="text" name="title" placeholder="Anzeigename">
-              </div>
-            </div>
-            <div class="column is-narrow">
-              <div class="field">
-                <label class="label">&nbsp;</label>
-                <button class="button is-primary" type="submit">Hinzufügen</button>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-
-    </div>
-  </div>
-</section>
-
-<script>
-// Navbar burger toggle
-(function() {
-  var burger = document.querySelector('.navbar-burger[data-target="manageNavbar"]');
-  if (burger) {
-    burger.addEventListener('click', function() {
-      var target = document.getElementById(burger.dataset.target);
-      burger.classList.toggle('is-active');
-      target.classList.toggle('is-active');
-    });
-  }
-})();
-
-function toggleEdit(id) {
-  var row = document.getElementById('edit-' + id);
-  if (row) {
-    var isHidden = (row.style.display === 'none' || row.style.display === '');
-    row.style.display = isHidden ? 'table-row' : 'none';
-    if (isHidden) {
-      row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-  }
-}
-
-function switchTab(tab) {
-  var panels = ['file', 'web'];
-  panels.forEach(function(p) {
-    var panel = document.getElementById('panel-' + p);
-    var tabEl = document.getElementById('tab-' + p);
-    if (!panel || !tabEl) return;
-    var btn = tabEl.querySelector('[role="tab"]');
-    if (p === tab) {
-      panel.classList.add('is-active');
-      tabEl.classList.add('is-active');
-      if (btn) btn.setAttribute('aria-selected', 'true');
-    } else {
-      panel.classList.remove('is-active');
-      tabEl.classList.remove('is-active');
-      if (btn) btn.setAttribute('aria-selected', 'false');
-    }
-  });
-}
-
-// N3: Keyboard-Reorder per ▲/▼-Buttons
-function reorderMove(itemId, direction) {
-  var tbody = document.getElementById('sortable-items');
-  if (!tbody) return;
-  var rows = Array.from(tbody.querySelectorAll('tr[id^="item-"]'));
-  var idx = rows.findIndex(function(r) { return r.id === 'item-' + itemId; });
-  if (idx < 0) return;
-  var newIdx = idx + direction;
-  if (newIdx < 0 || newIdx >= rows.length) return;
-
-  // DOM tauschen (auch die zugehörige edit-row mitnehmen)
-  var itemRow = document.getElementById('item-' + itemId);
-  var editRow = document.getElementById('edit-' + itemId);
-  var targetItemRow = rows[newIdx];
-  var targetEditRow = document.getElementById('edit-' + targetItemRow.id.replace('item-', ''));
-
-  if (direction < 0) {
-    tbody.insertBefore(itemRow, targetItemRow);
-    if (editRow) tbody.insertBefore(editRow, targetItemRow);
-    if (targetEditRow) tbody.insertBefore(targetItemRow, editRow || itemRow.nextSibling);
-    if (targetEditRow) tbody.insertBefore(targetEditRow, editRow || itemRow.nextSibling);
-  } else {
-    var after = (targetEditRow || targetItemRow).nextSibling;
-    tbody.insertBefore(itemRow, after);
-    if (editRow) tbody.insertBefore(editRow, after);
-  }
-
-  // Neue Reihenfolge ans Backend schicken
-  var ids = Array.from(tbody.querySelectorAll('tr[id^="item-"]')).map(function(r) {
-    return r.id.replace('item-', '');
-  });
-  fetch('/manage/{{.Screen.Slug}}/reorder', {
+  fetch('/manage/' + SCREEN_SLUG + '/items/' + id, {
     method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify(ids)
-  }).catch(function() {
-    showManageError('Reihenfolge konnte nicht gespeichert werden.');
-  });
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'fetch' },
+    body: params.toString()
+  }).then(function(r) {
+    if (r.ok) {
+      var okId = fieldName === 'duration_seconds' ? 'ok-dur-' : fieldName.startsWith('valid') ? 'ok-validity-' : 'ok-title-';
+      var okEl = document.getElementById(okId + id);
+      if (okEl) { okEl.classList.add('show'); setTimeout(function() { okEl.classList.remove('show'); }, 1500); }
+    } else {
+      showToast('⚠ Speichern fehlgeschlagen.', 'is-danger');
+    }
+  }).catch(function() { showToast('⚠ Netzwerkfehler.', 'is-danger'); });
 }
 
-// M10: Datei-Accept-Attribut dynamisch anpassen
-function updateFileAccept(type) {
-  var inp = document.getElementById('upload-file-input');
-  if (!inp) return;
-  var acceptMap = { 'image': 'image/*', 'video': 'video/*', 'pdf': 'application/pdf' };
-  inp.accept = acceptMap[type] || 'image/*,video/*,application/pdf';
+// ─── Toggle enabled ──────────────────────────────────────────────
+function toggleEnabled(id, checked) {
+  var item = document.getElementById('item-' + id);
+  if (checked) item.classList.remove('is-disabled'); else item.classList.add('is-disabled');
+  var label = document.getElementById('enabled-label-' + id);
+  if (label) label.textContent = checked ? 'Aktiv' : 'Aus';
+  // Save via saveField using the title input as trigger element proxy
+  var titleEl = item.querySelector('.pl-title');
+  if (titleEl) saveField(titleEl, 'enabled');
 }
 
-function showManageError(msg) {
-  var n = document.createElement('div');
-  n.className = 'notification is-danger';
-  n.setAttribute('role', 'alert');
-  n.style.cssText = 'position:fixed;top:1rem;right:1rem;z-index:9999;max-width:380px;box-shadow:0 4px 12px rgba(0,0,0,.15)';
-  n.innerHTML = '<button class="delete"></button>' + msg;
-  n.querySelector('.delete').addEventListener('click', function() { n.remove(); });
-  document.body.appendChild(n);
-  setTimeout(function() {
-    n.style.transition = 'opacity .5s';
-    n.style.opacity = '0';
-    setTimeout(function() { n.remove(); }, 500);
-  }, 4000);
+// ─── Toggle validity section ─────────────────────────────────────
+function toggleValidity(id) {
+  var el = document.getElementById('validity-' + id);
+  if (!el) return;
+  el.style.display = (el.style.display === 'none' || !el.style.display) ? 'flex' : 'none';
 }
 
-// Drag-and-drop reordering
+// ─── Sortable drag-and-drop ──────────────────────────────────────
 var sortableEl = document.getElementById('sortable-items');
 if (sortableEl) {
   Sortable.create(sortableEl, {
@@ -1196,121 +1155,75 @@ if (sortableEl) {
     animation: 150,
     ghostClass: 'sortable-ghost',
     onEnd: function() {
-      var ids = [];
-      sortableEl.querySelectorAll('tr[id^="item-"]').forEach(function(tr) {
-        ids.push(tr.id.replace('item-', ''));
-      });
-      fetch('/manage/{{.Screen.Slug}}/reorder', {
+      var ids = Array.from(sortableEl.querySelectorAll('.pl-item[data-id]')).map(function(el) { return el.dataset.id; });
+      fetch('/manage/' + SCREEN_SLUG + '/reorder', {
         method: 'POST',
-        headers: {'Content-Type': 'application/json'},
+        headers: {'Content-Type':'application/json'},
         body: JSON.stringify(ids)
-      }).then(function(response) {
-        if (!response.ok) {
-          showManageError('Reihenfolge konnte nicht gespeichert werden (HTTP ' + response.status + '). Seite wird neu geladen.');
-          window.location.reload();
-        }
-      }).catch(function() {
-        showManageError('Netzwerkfehler beim Speichern der Reihenfolge. Seite wird neu geladen.');
-        window.location.reload();
-      });
+      }).then(function(r) {
+        if (!r.ok) { showToast('⚠ Reihenfolge nicht gespeichert.','is-danger'); window.location.reload(); }
+      }).catch(function() { showToast('⚠ Netzwerkfehler.','is-danger'); window.location.reload(); });
     }
   });
 }
 
-// XHR-Upload mit Fortschrittsbalken
+// ─── Upload tab switch ───────────────────────────────────────────
+function switchUploadTab(name) {
+  ['file','web'].forEach(function(t) {
+    document.getElementById('utab-' + t).classList.toggle('is-active', t === name);
+    document.getElementById('upanel-' + t).style.display = t === name ? '' : 'none';
+  });
+}
+
+function updateAccept(type) {
+  var inp = document.getElementById('upload-file-inp');
+  if (!inp) return;
+  inp.accept = type === 'image' ? 'image/*' : type === 'video' ? 'video/*' : 'application/pdf';
+}
+
+function updateDropLabel(inp) {
+  var p = document.getElementById('drop-filename');
+  if (!p) return;
+  if (inp.files && inp.files[0]) { p.textContent = inp.files[0].name; p.style.display=''; }
+}
+
+function handleDrop(e) {
+  e.preventDefault();
+  document.getElementById('drop-zone').classList.remove('dragover');
+  var inp = document.getElementById('upload-file-inp');
+  if (inp && e.dataTransfer.files.length) { inp.files = e.dataTransfer.files; updateDropLabel(inp); }
+}
+
 function startUpload() {
   var form = document.getElementById('upload-form');
-  var fileInput = document.getElementById('upload-file-input');
-  var btn = document.getElementById('upload-btn');
-  var progressWrap = document.getElementById('upload-progress-wrap');
-  var progress = document.getElementById('upload-progress');
-  var errorBox = document.getElementById('upload-error');
-
-  errorBox.style.display = 'none';
-
-  if (!fileInput.files || fileInput.files.length === 0) {
-    errorBox.textContent = 'Bitte zuerst eine Datei auswählen.';
-    errorBox.style.display = '';
-    return;
-  }
-
-  var formData = new FormData(form);
+  var inp  = document.getElementById('upload-file-inp');
+  var btn  = document.getElementById('upload-btn');
+  var pg   = document.getElementById('upload-progress-wrap');
+  var bar  = document.getElementById('upload-progress');
+  var err  = document.getElementById('upload-error');
+  err.style.display = 'none';
+  if (!inp.files || !inp.files.length) { err.textContent='Bitte zuerst eine Datei auswählen.';err.style.display='';return; }
+  var fd = new FormData(form);
   var xhr = new XMLHttpRequest();
-
-  xhr.upload.onprogress = function(e) {
-    if (e.lengthComputable) {
-      var pct = Math.round((e.loaded / e.total) * 100);
-      progress.value = pct;
-      progress.textContent = pct + '%';
-    }
-  };
-
-  xhr.onloadstart = function() {
-    btn.style.display = 'none';
-    progressWrap.style.display = '';
-    progress.value = 0;
-  };
-
+  xhr.upload.onprogress = function(e) { if (e.lengthComputable) { bar.value=Math.round(e.loaded/e.total*100); } };
+  xhr.onloadstart = function() { btn.style.display='none'; pg.style.display=''; bar.value=0; };
   xhr.onload = function() {
-    if (xhr.status >= 200 && xhr.status < 400) {
-      window.location.href = '/manage/{{.Screen.Slug}}?msg=uploaded';
-    } else {
-      progressWrap.style.display = 'none';
-      btn.style.display = '';
-      errorBox.textContent = 'Upload fehlgeschlagen (HTTP ' + xhr.status + '): ' + xhr.responseText;
-      errorBox.style.display = '';
-    }
+    if (xhr.status >= 200 && xhr.status < 400) { window.location.href='/manage/'+SCREEN_SLUG+'?msg=uploaded'; }
+    else { pg.style.display='none'; btn.style.display=''; err.textContent='Upload fehlgeschlagen: '+xhr.responseText; err.style.display=''; }
   };
-
-  xhr.onerror = function() {
-    progressWrap.style.display = 'none';
-    btn.style.display = '';
-    errorBox.textContent = 'Netzwerkfehler beim Upload. Bitte erneut versuchen.';
-    errorBox.style.display = '';
-  };
-
+  xhr.onerror = function() { pg.style.display='none'; btn.style.display=''; err.textContent='Netzwerkfehler.'; err.style.display=''; };
   xhr.open('POST', form.action);
-  xhr.send(formData);
+  xhr.send(fd);
 }
-</script>
-<script>
-// K1: CSRF Double-Submit — füge Token aus Cookie in alle POST-Formulare ein.
-(function() {
-  function getCookie(name) {
-    var m = document.cookie.match('(?:^|; )' + name + '=([^;]*)');
-    return m ? decodeURIComponent(m[1]) : '';
-  }
-  function injectCSRF() {
-    var token = getCookie('morz_csrf');
-    if (!token) return;
-    document.querySelectorAll('form[method="POST"],form[method="post"]').forEach(function(f) {
-      if (!f.querySelector('input[name="csrf_token"]')) {
-        var inp = document.createElement('input');
-        inp.type = 'hidden'; inp.name = 'csrf_token'; inp.value = token;
-        f.appendChild(inp);
-      }
-    });
-  }
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', injectCSRF);
-  } else {
-    injectCSRF();
-  }
-})();
-</script>
-<script>
-(function() {
-  document.querySelectorAll('.screen-thumb').forEach(function(img) {
-    img.src = img.dataset.src;
-  });
-  setTimeout(function() {
-    document.querySelectorAll('.screen-thumb').forEach(function(img) {
-      img.src = img.dataset.src + '?t=' + Date.now();
-    });
-  }, 4000);
-})();
-</script>
 
+// ─── Screenshot lazy-load ────────────────────────────────────────
+(function() {
+  document.querySelectorAll('.screen-preview').forEach(function(img) {
+    img.src = img.dataset.src;
+    setTimeout(function() { img.src = img.dataset.src + '?t=' + Date.now(); }, 4000);
+  });
+})();
+</script>
 </body>
 </html>`
 
