From c780decdc32cda441917a95248e82745335e8fb3 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Sun, 31 May 2026 11:58:47 +0200
Subject: [PATCH] =?UTF-8?q?cms:=20Sveltia-Einfl=C3=BCsse=20im=20Admin=20(S?=
 =?UTF-8?q?uche,=20fixierte=20Action-Leiste,=20Status-Chips,=20Vorschau-To?=
 =?UTF-8?q?ggle)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar-Suche, Gruppen mit Zähler, zweizeilige Einträge mit Datum
- Editor-Kopf fixiert mit Speichern/Vorschau/Publizieren + Entwurf/Veröffentlicht-Chip
- Vorschau-Pane ein-/ausblendbar
- schwarze Topbar + Newsreader-Serif + Creme + Terracotta = Site-Look

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 cms/admin/src/App.jsx    | 211 +++++++++++++++++++++------------------
 cms/admin/src/styles.css |  84 +++++++++-------
 2 files changed, 160 insertions(+), 135 deletions(-)

diff --git a/cms/admin/src/App.jsx b/cms/admin/src/App.jsx
index 01cec75..c26fe09 100644
--- a/cms/admin/src/App.jsx
+++ b/cms/admin/src/App.jsx
@@ -70,6 +70,7 @@ function Login() {
 function Dashboard({ email }) {
   const [entries, setEntries] = useState([]);
   const [current, setCurrent] = useState(null);
+  const [query, setQuery] = useState('');
   const [msg, setMsg] = useState(null);
 
   async function refresh() {
@@ -80,15 +81,16 @@ function Dashboard({ email }) {
   useEffect(() => { if (!msg) return; const t = setTimeout(() => setMsg(null), 4000); return () => clearTimeout(t); }, [msg]);
 
   async function open(entry) {
-    try {
-      const e = await api.read(entry.path);
-      setCurrent(fromRead(e));
-    } catch (err) { setMsg({ type: 'err', text: err.message }); }
+    try { setCurrent(fromRead(await api.read(entry.path))); }
+    catch (err) { setMsg({ type: 'err', text: err.message }); }
   }
 
-  // Nach Typ gruppieren.
+  const q = query.trim().toLowerCase();
+  const filtered = q
+    ? entries.filter((e) => e.title.toLowerCase().includes(q) || (e.section || '').includes(q))
+    : entries;
   const groups = { beitrag: [], seite: [], rubrik: [] };
-  for (const e of entries) (groups[e.kind] || groups.seite).push(e);
+  for (const e of filtered) (groups[e.kind] || groups.seite).push(e);
 
   return (
     <div className="app">
@@ -96,22 +98,29 @@ function Dashboard({ email }) {
         <span className="logo">OPENBUREAU</span>
         <span className="logo-sub">Redaktion</span>
         <span className="spacer" />
-        <span className="muted">{email}</span>
+        <span className="who">{email}</span>
         <button className="ghost" onClick={() => supabase.auth.signOut()}>Abmelden</button>
       </header>
 
       <div className="body">
         <aside>
           <button className="new" onClick={() => setCurrent({ ...EMPTY })}>＋ Neuer Beitrag</button>
+          <div className="search">
+            <span>⌕</span>
+            <input placeholder="Suchen…" value={query} onChange={(e) => setQuery(e.target.value)} />
+          </div>
           {['beitrag', 'seite', 'rubrik'].map((kind) => groups[kind].length > 0 && (
             <div className="group" key={kind}>
-              <div className="group-title">{KIND_LABEL[kind]}</div>
+              <div className="group-title">{KIND_LABEL[kind]} <span>{groups[kind].length}</span></div>
               <ul className="list">
                 {groups[kind].map((e) => (
                   <li key={e.path} className={current?.path === e.path ? 'active' : ''} onClick={() => open(e)}>
                     <span className="dot" style={{ background: e.color ? hexOf(e.color) : 'var(--line)' }} />
-                    <span className="t">{e.title}{e.draft && <em className="draft-tag">Entwurf</em>}</span>
-                    {e.section && <span className="s">{e.section}</span>}
+                    <span className="t">
+                      <span className="t-title">{e.title}</span>
+                      <span className="t-meta">{[e.section, e.date].filter(Boolean).join(' · ')}</span>
+                    </span>
+                    {e.draft && <span className="draft-tag">Entwurf</span>}
                   </li>
                 ))}
               </ul>
@@ -135,6 +144,7 @@ function Dashboard({ email }) {
 function Editor({ initial, onSaved, onMsg }) {
   const [f, setF] = useState(initial);
   const [previewUrl, setPreviewUrl] = useState(null);
+  const [showPreview, setShowPreview] = useState(true);
   const [busy, setBusy] = useState(false);
   const set = (k) => (e) => setF({ ...f, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
 
@@ -153,8 +163,7 @@ function Editor({ initial, onSaved, onMsg }) {
     try {
       await api.save(path, buildFrontmatter(f), f.body);
       const loaded = fromRead(await api.read(path));
-      onSaved(loaded);
-      setF(loaded);
+      onSaved(loaded); setF(loaded);
       onMsg({ type: 'ok', text: 'Gespeichert.' });
       return path;
     } catch (e) { onMsg({ type: 'err', text: e.message }); return null; }
@@ -164,11 +173,9 @@ function Editor({ initial, onSaved, onMsg }) {
   async function preview() {
     const path = await save();
     if (!path) return;
-    setBusy(true);
-    try {
-      const res = await api.preview(path);
-      setPreviewUrl(`${res.url}?t=${Date.now()}`);
-    } catch (e) { onMsg({ type: 'err', text: e.message }); }
+    setShowPreview(true); setBusy(true);
+    try { const res = await api.preview(path); setPreviewUrl(`${res.url}?t=${Date.now()}`); }
+    catch (e) { onMsg({ type: 'err', text: e.message }); }
     finally { setBusy(false); }
   }
 
@@ -177,91 +184,99 @@ function Editor({ initial, onSaved, onMsg }) {
     if (!path) return;
     if (!confirm('Diesen Eintrag live publizieren?')) return;
     setBusy(true);
-    try {
-      const res = await api.publish(path);
-      onMsg({ type: 'ok', text: `Live: ${res.url}` });
-    } catch (e) { onMsg({ type: 'err', text: e.message }); }
+    try { const res = await api.publish(path); onMsg({ type: 'ok', text: `Live: ${res.url}` }); }
+    catch (e) { onMsg({ type: 'err', text: e.message }); }
     finally { setBusy(false); }
   }
 
   return (
     <div className="editor">
-      <div className="fields">
-        <div className="path-row">
-          {f.isNew ? (
-            <>
-              <label className="sm">Typ
-                <select value={f.type} onChange={set('type')}>
-                  <option value="beitrag">Beitrag</option>
-                  <option value="seite">Seite</option>
-                </select>
-              </label>
-              {f.type === 'beitrag' && (
-                <label className="sm">Rubrik
-                  <select value={f.section} onChange={set('section')}>
-                    {SECTIONS.map((s) => <option key={s}>{s}</option>)}
-                  </select>
-                </label>
-              )}
-              <label>Slug<input value={f.slug} onChange={set('slug')} placeholder="z.B. neuer-beitrag" /></label>
-            </>
-          ) : (
-            <div className="pathlabel">{f.path}</div>
-          )}
-        </div>
-
-        <label className="big">Titel<input value={f.title} onChange={set('title')} /></label>
-
-        <div className="row">
-          <label className="sm">Datum<input type="date" value={f.date} onChange={set('date')} /></label>
-          <label className="xs">Reihenfolge<input type="number" value={f.weight} onChange={set('weight')} placeholder="weight" /></label>
-          <label>Farbe
-            <div className="colorpick">
-              <span className="swatch" style={{ background: hexOf(f.color) }} />
-              <select value={f.color} onChange={set('color')}>
-                {COLORS.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
-              </select>
-            </div>
-          </label>
-        </div>
-
-        <div className="row">
-          <label className="sm">Layout
-            <select value={f.layout} onChange={set('layout')}>
-              {LAYOUTS.map((l) => <option key={l} value={l}>{l || '(automatisch)'}</option>)}
-            </select>
-          </label>
-          <label>Tags<input value={f.tags} onChange={set('tags')} placeholder="komma, getrennt" /></label>
-          <label className="check"><input type="checkbox" checked={f.toc} onChange={set('toc')} /> Inhaltsverzeichnis</label>
-          <label className="check"><input type="checkbox" checked={f.draft} onChange={set('draft')} /> Entwurf</label>
-        </div>
-
-        <label>Kurztext (summary)<input value={f.summary} onChange={set('summary')} /></label>
-
-        <div className="row">
-          <label>Cover-Bild<input value={f.cover_image} onChange={set('cover_image')} placeholder="/images/…jpg" /></label>
-          <label>Externer Link<input value={f.external} onChange={set('external')} placeholder="https://…" /></label>
-        </div>
-
-        <MarkdownEditor
-          value={f.body}
-          onChange={(body) => setF((p) => ({ ...p, body }))}
-          onUpload={async (file) => (await api.upload(file)).url}
-          onMsg={onMsg}
-        />
-
-        <div className="actions">
+      <div className="editor-main">
+        <div className="editor-head">
+          <div className="crumb">{f.isNew ? 'Neuer Eintrag' : f.path}</div>
+          <span className="spacer" />
+          {f.draft
+            ? <span className="status draft">Entwurf</span>
+            : <span className="status live">Veröffentlicht</span>}
+          <button className="toggle" onClick={() => setShowPreview((v) => !v)} title="Vorschau ein/aus">
+            {showPreview ? 'Vorschau ⤫' : 'Vorschau ⤢'}
+          </button>
           <button onClick={save} disabled={busy}>Speichern</button>
           <button onClick={preview} disabled={busy}>Vorschau</button>
           <button className="primary" onClick={publish} disabled={busy}>Publizieren</button>
         </div>
+
+        <div className="fields">
+          <div className="path-row">
+            {f.isNew ? (
+              <>
+                <label className="sm">Typ
+                  <select value={f.type} onChange={set('type')}>
+                    <option value="beitrag">Beitrag</option>
+                    <option value="seite">Seite</option>
+                  </select>
+                </label>
+                {f.type === 'beitrag' && (
+                  <label className="sm">Rubrik
+                    <select value={f.section} onChange={set('section')}>
+                      {SECTIONS.map((s) => <option key={s}>{s}</option>)}
+                    </select>
+                  </label>
+                )}
+                <label>Slug<input value={f.slug} onChange={set('slug')} placeholder="z.B. neuer-beitrag" /></label>
+              </>
+            ) : null}
+          </div>
+
+          <label className="big">Titel<input value={f.title} onChange={set('title')} placeholder="Titel des Beitrags" /></label>
+
+          <div className="row">
+            <label className="sm">Datum<input type="date" value={f.date} onChange={set('date')} /></label>
+            <label className="xs">Reihenfolge<input type="number" value={f.weight} onChange={set('weight')} placeholder="weight" /></label>
+            <label>Farbe
+              <div className="colorpick">
+                <span className="swatch" style={{ background: hexOf(f.color) }} />
+                <select value={f.color} onChange={set('color')}>
+                  {COLORS.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
+                </select>
+              </div>
+            </label>
+          </div>
+
+          <div className="row">
+            <label className="sm">Layout
+              <select value={f.layout} onChange={set('layout')}>
+                {LAYOUTS.map((l) => <option key={l} value={l}>{l || '(automatisch)'}</option>)}
+              </select>
+            </label>
+            <label>Tags<input value={f.tags} onChange={set('tags')} placeholder="komma, getrennt" /></label>
+            <label className="check"><input type="checkbox" checked={f.toc} onChange={set('toc')} /> Inhaltsverzeichnis</label>
+            <label className="check"><input type="checkbox" checked={f.draft} onChange={set('draft')} /> Entwurf</label>
+          </div>
+
+          <label>Kurztext (summary)<input value={f.summary} onChange={set('summary')} /></label>
+
+          <div className="row">
+            <label>Cover-Bild<input value={f.cover_image} onChange={set('cover_image')} placeholder="/images/…jpg" /></label>
+            <label>Externer Link<input value={f.external} onChange={set('external')} placeholder="https://…" /></label>
+          </div>
+
+          <MarkdownEditor
+            value={f.body}
+            onChange={(body) => setF((p) => ({ ...p, body }))}
+            onUpload={async (file) => (await api.upload(file)).url}
+            onMsg={onMsg}
+          />
+        </div>
       </div>
 
-      <div className="preview">
-        {previewUrl
-          ? <iframe title="Vorschau" src={previewUrl} />
-          : <div className="empty small"><p>Vorschau erscheint hier nach „Vorschau“.</p></div>}
-      </div>
+      {showPreview && (
+        <div className="preview">
+          {previewUrl
+            ? <iframe title="Vorschau" src={previewUrl} />
+            : <div className="empty small"><p>Auf „Vorschau“ klicken — die Seite erscheint hier in deinem echten Theme.</p></div>}
+        </div>
+      )}
     </div>
   );
 }
@@ -280,19 +295,19 @@ function MarkdownEditor({ value, onChange, onUpload, onMsg }) {
   function wrap(pre, post = pre, placeholder = '') {
     const el = ta.current; const s = el.selectionStart, e = el.selectionEnd;
     const sel = value.slice(s, e) || placeholder;
-    const next = value.slice(0, s) + pre + sel + post + value.slice(e);
-    onChange(next); restore(s + pre.length, s + pre.length + sel.length);
+    onChange(value.slice(0, s) + pre + sel + post + value.slice(e));
+    restore(s + pre.length, s + pre.length + sel.length);
   }
   function linePrefix(prefix) {
     const el = ta.current; const s = el.selectionStart;
     const ls = value.lastIndexOf('\n', s - 1) + 1;
-    const next = value.slice(0, ls) + prefix + value.slice(ls);
-    onChange(next); restore(s + prefix.length, s + prefix.length);
+    onChange(value.slice(0, ls) + prefix + value.slice(ls));
+    restore(s + prefix.length, s + prefix.length);
   }
   function insert(text) {
     const el = ta.current; const s = el.selectionStart, e = el.selectionEnd;
-    const next = value.slice(0, s) + text + value.slice(e);
-    onChange(next); restore(s + text.length, s + text.length);
+    onChange(value.slice(0, s) + text + value.slice(e));
+    restore(s + text.length, s + text.length);
   }
   async function pickImage(ev) {
     const file = ev.target.files?.[0]; ev.target.value = '';
@@ -330,7 +345,7 @@ function MarkdownEditor({ value, onChange, onUpload, onMsg }) {
   );
 }
 
-// ── Mapping DB-Lesart → Formular ───────────────────────────────────────────
+// ── Mapping Datei-Lesart → Formular ────────────────────────────────────────
 function fromRead(r) {
   const fm = r.frontmatter || {};
   return {
diff --git a/cms/admin/src/styles.css b/cms/admin/src/styles.css
index c579ab3..0978847 100644
--- a/cms/admin/src/styles.css
+++ b/cms/admin/src/styles.css
@@ -19,18 +19,17 @@
   --dark-text: #f0f0f0;
   --dark-muted: #a9a9a9;
   --ok: #5d7d4b;
+  --amber: #b8902f;
 
   --radius: 11px;
+  --shadow: 0 10px 34px -22px rgba(40,20,10,.5);
 }
 
 * { box-sizing: border-box; }
 html, body, #root { height: 100%; }
 body {
-  margin: 0;
-  font-family: var(--sans);
-  font-size: 14.5px;
-  color: var(--text);
-  background: var(--bg);
+  margin: 0; font-family: var(--sans); font-size: 14.5px;
+  color: var(--text); background: var(--bg);
 }
 button, input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text); }
 .muted { color: var(--muted); }
@@ -39,23 +38,20 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; colo
 /* ── Login ── */
 .login {
   background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
-  padding: 36px 32px; width: 320px; display: flex; flex-direction: column; gap: 12px;
-  box-shadow: 0 12px 40px -20px rgba(0,0,0,.3);
+  padding: 36px 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow);
 }
 .login-brand { font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: 20px; }
 .login-sub { font-family: var(--serif); font-style: italic; color: var(--muted); margin-bottom: 10px; }
 .err { color: var(--accent); margin: 4px 0 0; font-size: 13px; }
 
-/* ── Inputs ── */
+/* ── Inputs / Buttons ── */
 input, select, textarea {
-  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
-  padding: 9px 11px; width: 100%;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%;
 }
 input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(181,74,44,.12); }
-
 button {
   background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
-  padding: 9px 16px; cursor: pointer; font-weight: 500; transition: .12s;
+  padding: 8px 15px; cursor: pointer; font-weight: 500; transition: .12s; white-space: nowrap;
 }
 button:hover { border-color: var(--accent-soft); }
 button:disabled { opacity: .5; cursor: default; }
@@ -64,33 +60,37 @@ button.primary:hover { background: #a23f23; }
 button.ghost { background: transparent; border-color: transparent; color: var(--dark-muted); }
 button.ghost:hover { color: #fff; border-color: var(--dark-muted); }
 
-/* ── App-Rahmen ── */
+/* ── App / Topbar (schwarz wie der Site-Masthead) ── */
 .app { display: flex; flex-direction: column; height: 100%; }
-.topbar {
-  display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 54px;
-  background: var(--dark); color: var(--dark-text); flex: none;
-}
+.topbar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 54px; background: var(--dark); color: var(--dark-text); flex: none; }
 .topbar .logo { font-family: var(--display); font-weight: 700; letter-spacing: .14em; }
 .topbar .logo-sub { font-family: var(--serif); font-style: italic; color: var(--dark-muted); font-size: 13px; }
 .topbar .spacer { flex: 1; }
-.topbar .muted { color: var(--dark-muted); font-size: 13px; }
+.topbar .who { color: var(--dark-muted); font-size: 13px; }
 
 .body { display: flex; flex: 1; min-height: 0; }
 
-/* ── Sidebar ── */
-aside { width: 280px; flex: none; border-right: 1px solid var(--line); background: var(--panel-2); padding: 14px; overflow: auto; }
-.new { width: 100%; margin-bottom: 16px; background: var(--accent); border-color: var(--accent); color: #fff; }
+/* ── Sidebar (Collections, Sveltia-artig) ── */
+aside { width: 290px; flex: none; border-right: 1px solid var(--line); background: var(--panel-2); padding: 14px; overflow: auto; }
+.new { width: 100%; margin-bottom: 12px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
 .new:hover { background: #a23f23; }
+.search { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; margin-bottom: 16px; }
+.search span { color: var(--muted); font-size: 17px; }
+.search input { border: none; background: transparent; padding: 9px 0; }
+.search input:focus { box-shadow: none; }
+
 .group { margin-bottom: 18px; }
-.group-title { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 6px 7px; }
+.group-title { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 6px 8px; }
+.group-title span { background: var(--line); color: var(--muted); border-radius: 20px; padding: 1px 7px; font-size: 10px; letter-spacing: 0; }
 .list { list-style: none; margin: 0; padding: 0; }
-.list li { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; cursor: pointer; }
+.list li { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; cursor: pointer; }
 .list li:hover { background: var(--panel); }
-.list li.active { background: var(--panel); box-shadow: inset 2px 0 0 var(--accent); }
-.list .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
-.list .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 15px; }
-.list .s { font-size: 11px; color: var(--muted); }
-.draft-tag { font-style: normal; font-size: 10px; color: #b8902f; margin-left: 6px; font-family: var(--sans); }
+.list li.active { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
+.list .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
+.list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.list .t-title { font-family: var(--serif); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.list .t-meta { font-size: 11px; color: var(--muted); }
+.draft-tag { font-size: 10px; color: var(--amber); border: 1px solid var(--amber); border-radius: 20px; padding: 1px 7px; flex: none; }
 
 main { flex: 1; min-width: 0; }
 .empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-family: var(--serif); font-style: italic; padding: 24px; text-align: center; }
@@ -98,23 +98,35 @@ main { flex: 1; min-width: 0; }
 
 /* ── Editor ── */
 .editor { display: flex; height: 100%; }
-.fields { width: 52%; padding: 22px 24px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
+.editor-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.editor-head {
+  display: flex; align-items: center; gap: 9px; padding: 11px 22px;
+  border-bottom: 1px solid var(--line); background: var(--panel); flex: none;
+}
+.editor-head .crumb { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.editor-head .spacer { flex: 1; }
+.editor-head .toggle { background: transparent; border-color: transparent; color: var(--muted); }
+.editor-head .toggle:hover { color: var(--text); border-color: var(--line); }
+.status { font-size: 11px; border-radius: 20px; padding: 3px 10px; font-weight: 600; }
+.status.draft { color: var(--amber); background: rgba(184,144,47,.12); }
+.status.live { color: var(--ok); background: rgba(93,125,75,.14); }
+
+.fields { flex: 1; padding: 22px 24px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
 .row { display: flex; gap: 12px; align-items: flex-end; }
+.path-row { display: flex; gap: 12px; align-items: flex-end; }
+.path-row:empty { display: none; }
 label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); flex: 1; }
 label.sm { flex: 0 0 150px; } label.xs { flex: 0 0 110px; }
 label.check { flex-direction: row; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap; }
 label.check input { width: auto; }
-label.big input { font-family: var(--serif); font-size: 22px; font-weight: 600; padding: 11px 13px; }
-
-.path-row { display: flex; gap: 12px; align-items: flex-end; }
-.pathlabel { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; }
+label.big input { font-family: var(--serif); font-size: 23px; font-weight: 600; padding: 11px 13px; }
 
 .colorpick { display: flex; align-items: center; gap: 8px; }
 .colorpick .swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); flex: none; }
 .colorpick select { flex: 1; }
 
 /* ── Markdown-Editor ── */
-.md { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
+.md { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
 .toolbar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 7px 9px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
 .tb { padding: 5px 9px; border: 1px solid transparent; background: transparent; border-radius: 6px; min-width: 30px; font-size: 13px; line-height: 1; }
 .tb:hover { background: var(--panel); border-color: var(--line); }
@@ -122,10 +134,8 @@ label.big input { font-family: var(--serif); font-size: 22px; font-weight: 600;
 .md textarea { border: none; border-radius: 0; min-height: 320px; flex: 1; resize: vertical; font-family: var(--serif); font-size: 16px; line-height: 1.7; padding: 16px; }
 .md textarea:focus { box-shadow: none; }
 
-.actions { display: flex; gap: 9px; padding-top: 4px; }
-
 /* ── Vorschau-Pane ── */
-.preview { width: 48%; border-left: 1px solid var(--line); background: #fff; }
+.preview { width: 46%; flex: none; border-left: 1px solid var(--line); background: #fff; }
 .preview iframe { width: 100%; height: 100%; border: 0; }
 
 /* ── Toast ── */