/* ============================================================
   Vault — Design System
   Basis sind die Tokens von Live Hub (gleiche Flächen, Linien,
   Akzente), ergänzt um eine Monospace-Schrift und Syntaxfarben
   für die IDE-Akzente.
   ============================================================ */

:root{
  --bg:#0d1016;
  --bg-soft:#11151d;
  --panel:#161b25;
  --panel-2:#1c2230;
  --panel-3:#232b3b;
  --line:#28303f;
  --line-soft:#1f2632;
  --line-strong:#364156;
  --text:#e7ecf4;
  --text-2:#aab6c8;
  --muted:#77839a;
  --faint:#566178;
  --accent:#6ea8fe;
  --accent-ink:#0b1220;
  /* Füllung für aktiven Tab, Theme-Segment und Hauptknöpfe — in Space ein
     Verlauf, in Summer je nach Bereich. Dazu ihr Schein (Winter: Kerzenlicht). */
  --accent-fill:var(--accent);
  --accent-glow:0 4px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent);
  --ok:#5fd0a0;
  --warn:#f3b64b;
  --danger:#f4708c;
  --violet:#a78bfa;
  --fire:#ff8a4c;

  /* Syntaxfarben — sparsam für die IDE-Anmutung */
  --syn-kw:#c792ea;
  --syn-str:#c3e88d;
  --syn-num:#f78c6c;
  --syn-fn:#82aaff;
  --syn-com:#5f6b82;
  --syn-type:#ffcb6b;
  --code-ink:#f5b67f;
  --code-bg:#0a0d12;

  /* Neon-Markierungen (Editor & Ansicht) — Reihenfolge wie in der Toolbar */
  --neon-red:#f04a52;
  --neon-yellow:#ffd54f;
  --neon-green:#b6e83c;
  --neon-forest:#2eb872;
  --neon-sky:#4cc4ff;
  --neon-blue:#6b8cff;
  --neon-violet:#b88cff;
  --neon-magenta:#ff6bc7;
  --neon-silver:#c3ccdb;
  /* Monatsrückblick: zwei Reihen, geprüft auf Farbsehschwäche (validate_palette) */
  --mr-cap:#3a97e4;
  --mr-ref:#c08912;

  /* Editor */
  --ed-font:'Recursive',var(--sans);
  --ed-mono:0;
  --ed-fs:15.5px;
  --ed-lh:1.8;
  --ed-ink:#cfd7e4;
  --ed-strong:#f4f7fb;
  --ed-mk:#4c5870;
  --ed-quote:#a9b5c8;
  --ed-cur:rgba(255,255,255,.03);

  --grid-dot:rgba(148,163,184,.13);
  /* Was hinter allem liegt: in Dark und Light nur die Fläche, in Space der
     Nebel, in Winter die Glut, in Summer die Farbspritzer. Body und Karten-
     Vollbild tragen ihn, beide genau fenstergroß — so liegt er überall gleich. */
  --backdrop:var(--bg);
  --shadow:0 12px 34px rgba(0,0,0,.42);
  --shadow-sm:0 4px 14px rgba(0,0,0,.28);
  --shadow-pop:0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02);
  --neu:inset 0 1px 0 rgba(255,255,255,.035), 0 14px 30px -18px rgba(0,0,0,.85);
  --neu-hover:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 38px -16px rgba(0,0,0,.9);
  --r:12px;
  --r-sm:8px;
  --r-lg:16px;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --topbar-h:56px;
  --statusbar-h:26px;
  color-scheme:dark;
}

/* Helle Basis — darauf baut Summer auf (das frühere Light-Theme ist in ihm aufgegangen) */
[data-tone="light"]{
  --mr-cap:#1f74c4;
  --mr-ref:#a26800;
  --bg:#f4f6fa;
  --bg-soft:#eef1f7;
  --panel:#ffffff;
  --panel-2:#f5f7fb;
  --panel-3:#e9eef6;
  --line:#dde3ee;
  --line-soft:#e8ecf4;
  --line-strong:#c9d2e1;
  --text:#131926;
  --text-2:#41506a;
  --muted:#6b7891;
  --faint:#8d98ad;
  --accent:#2f6fe4;
  --accent-ink:#ffffff;
  --ok:#129a6b;
  --warn:#b6790c;
  --danger:#d8385c;
  --violet:#7c5cf0;
  --fire:#e0621f;
  --syn-kw:#8a3fd1;
  --syn-str:#2f8a3c;
  --syn-num:#c2551f;
  --syn-fn:#2f5fd0;
  --syn-com:#8d98ad;
  --syn-type:#93600a;
  --code-ink:#b4531b;
  --code-bg:#f3f5f9;
  --neon-red:#c62128;
  --neon-yellow:#a26800;
  --neon-green:#6c8f00;
  --neon-forest:#0b7a4b;
  --neon-sky:#0277c0;
  --neon-blue:#2540c8;
  --neon-violet:#7440e0;
  --neon-magenta:#c1257f;
  --neon-silver:#69748a;
  --ed-ink:#27324a;
  --ed-strong:#0e1422;
  --ed-mk:#a3adbf;
  --ed-quote:#4b5873;
  --ed-cur:rgba(20,30,60,.035);
  --grid-dot:rgba(71,85,105,.16);
  --shadow:0 12px 30px rgba(20,30,60,.12);
  --shadow-sm:0 3px 10px rgba(20,30,60,.08);
  --shadow-pop:0 24px 60px -20px rgba(20,30,60,.35), 0 0 0 1px rgba(20,30,60,.04);
  --neu:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px -18px rgba(20,30,60,.35);
  --neu-hover:inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px -16px rgba(20,30,60,.4);
  color-scheme:light;
}

/* ---------- Space: Deep Purple, Pink, Space Black ----------
   Baut auf Dark auf — keine der Light-Regeln greift hier. Fast schwarz mit
   einem Hauch Violett, Panels und Linien in tiefem Lila, Akzent Pink.
   Ok, Warnung und Gefahr bleiben wie in Dark: ihre Farben tragen Bedeutung,
   keine Stimmung. Werte wie in Live Hub. */
[data-theme="space"]{
  --bg:#07040d;
  --bg-soft:#0c0716;
  --panel:#130c21;
  --panel-2:#1a112c;
  --panel-3:#25183d;
  --line:#30214f;
  --line-soft:#211636;
  --line-strong:#45306e;
  --text:#f1eaff;
  --text-2:#c4b5e0;
  --muted:#8b7bab;
  --faint:#67588a;
  --accent:#ff5cb0;
  --accent-ink:#1f0617;
  --accent-fill:linear-gradient(135deg,#a855f7,#ff5cb0);
  --accent-glow:0 4px 16px -6px rgba(255,92,176,.7);
  --violet:#b57bff;
  --syn-kw:#d29bff;
  --syn-com:#6c5b92;
  --code-bg:#0a0613;
  --ed-ink:#ddd3f1;
  --ed-strong:#fbf7ff;
  --ed-mk:#5e4b88;
  --ed-quote:#bdaade;
  --ed-cur:rgba(200,150,255,.035);
  --grid-dot:rgba(181,123,255,.15);
  --shadow:0 12px 34px rgba(0,0,0,.58);
  --shadow-sm:0 4px 14px rgba(0,0,0,.36);
  --shadow-pop:0 24px 60px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02);
  --neu:inset 0 1px 0 rgba(255,255,255,.035),0 14px 30px -18px rgba(0,0,0,.95);
  --neu-hover:inset 0 1px 0 rgba(255,255,255,.05),0 18px 38px -16px #000;
  /* Nebel: violetter Schimmer oben rechts, pinker unten links — sichtbar in den Fugen */
  --backdrop:
    radial-gradient(1100px 640px at 92% -12%,rgba(150,70,230,.22),transparent 62%),
    radial-gradient(900px 600px at -8% 112%,rgba(255,92,176,.13),transparent 60%),
    var(--bg);
}

/* ---------- Winter: Schwarz, Schneeweiß, Kerzenlicht ----------
   Fast schwarz, aber kein reines Schwarz — ein ordentlicher Dark Mode mit
   neutralen Panels und einem Hauch Wärme. Akzent Schneeweiß; Aktives ist
   weiß gefüllt und trägt warmen Kerzenschein mit dunkelrotem Hof. */
[data-theme="winter"]{
  --bg:#0b0b0d;
  --bg-soft:#100f12;
  --panel:#141416;
  --panel-2:#1a1a1d;
  --panel-3:#232326;
  --line:#2d2c30;
  --line-soft:#1f1e22;
  --line-strong:#3d3b40;
  --text:#f2efea;
  --text-2:#bdb8b0;
  --muted:#86817a;
  --faint:#625e59;
  --accent:#f5f2ec;
  --accent-ink:#141416;
  --accent-fill:linear-gradient(180deg,#ffffff,#e8e2d6);
  --accent-glow:0 0 0 1px rgba(255,236,210,.22),0 0 14px rgba(255,166,84,.30),0 0 30px rgba(140,18,28,.38);
  --syn-com:#67625c;
  --code-bg:#0d0c0f;
  --ed-ink:#d9d4cc;
  --ed-strong:#fbf8f3;
  --ed-mk:#57534d;
  --ed-quote:#b6b0a7;
  --ed-cur:rgba(255,236,210,.03);
  --grid-dot:rgba(245,236,220,.1);
  --shadow:0 12px 34px rgba(0,0,0,.62);
  --shadow-sm:0 4px 14px rgba(0,0,0,.4);
  --shadow-pop:0 24px 60px -18px rgba(0,0,0,.88),0 0 0 1px rgba(255,255,255,.02);
  --neu:inset 0 1px 0 rgba(255,255,255,.035),0 14px 30px -18px rgba(0,0,0,.95);
  --neu-hover:inset 0 1px 0 rgba(255,255,255,.05),0 18px 38px -16px #000;
  /* dunkelrote Glut steigt von unten auf, oben in den Ecken wärmt Kerzenlicht */
  --backdrop:
    radial-gradient(1000px 520px at 50% 122%,rgba(128,16,26,.34),transparent 64%),
    radial-gradient(640px 420px at 4% -8%,rgba(255,168,86,.1),transparent 62%),
    radial-gradient(640px 420px at 97% -8%,rgba(255,168,86,.07),transparent 62%),
    var(--bg);
}

/* ---------- Forest: Tiefschwarz, grüner Schein, Sonnenuntergang ----------
   Wie in Magic Cards: tiefes Schwarz, Panels und Linien in dunklem Waldgrün,
   ein kräftiger dunkelgrüner Schein, der von oben und unten einblendet, und
   zurückhaltende Sonnenauf-/-untergangs-Akzente (Gelb, Orange, helles Rot)
   an den Ecken. Aktives ist dunkelgrün gefüllt, hell beschriftet und strahlt
   grün. Warm werden auch die kleinen Beschriftungen (Pfade, Kicker, Tags). */
[data-theme="forest"]{
  --bg:#020302;
  --bg-soft:#040705;
  --panel:#080d0a;
  --panel-2:#0d1510;
  --panel-3:#142019;
  --line:#16281d;
  --line-soft:#101c15;
  --line-strong:#233f2d;
  --text:#e4f1e8;
  --text-2:#aac0b2;
  --muted:#7f9587;
  --faint:#52675a;
  --accent:#3fd58a;
  --accent-ink:#eafff1;
  --accent-fill:linear-gradient(135deg,#14532d,#1f9d5b);
  --accent-glow:0 0 0 1px rgba(74,222,128,.35),0 0 22px -4px rgba(34,197,94,.65),0 0 42px -8px rgba(21,128,61,.55);
  --btn-glow:var(--accent-glow);
  --violet:#f2a383;
  --syn-kw:#f0a85c;
  --syn-num:#ff8f80;
  --syn-fn:#7fd6a4;
  --syn-com:#4f6b5a;
  --code-bg:#030604;
  --ed-ink:#d3e3d8;
  --ed-strong:#f4fbf6;
  --ed-mk:#3f5d4a;
  --ed-quote:#a6c1af;
  --ed-cur:rgba(46,184,114,.045);
  --grid-dot:rgba(110,205,145,.09);
  /* Panels strahlen grün in den Grund */
  --shadow:0 14px 36px -16px rgba(0,0,0,.95),0 0 60px -20px rgba(34,197,94,.5);
  --shadow-sm:0 4px 14px rgba(0,0,0,.5);
  --shadow-pop:0 24px 60px -18px rgba(0,0,0,.95),0 0 60px -24px rgba(34,197,94,.45),0 0 0 1px rgba(255,255,255,.02);
  --neu:inset 0 1px 0 rgba(255,255,255,.035),0 14px 30px -18px #000,0 0 46px -22px rgba(34,197,94,.42);
  --neu-hover:inset 0 1px 0 rgba(255,255,255,.05),0 18px 38px -16px #000,0 0 56px -20px rgba(34,197,94,.52);
  /* Oben die Sonnenauf-/-untergangs-Akzente, darunter der grüne Schein */
  --backdrop:
    radial-gradient(42% 28% at 100% 100%,rgba(249,115,22,.36),rgba(239,68,68,.17) 42%,transparent 74%),
    radial-gradient(26% 18% at 0% 0%,rgba(250,204,21,.14),transparent 70%),
    radial-gradient(90% 65% at 15% 0%,rgba(22,163,74,.55),rgba(21,128,61,.22) 45%,transparent 80%),
    radial-gradient(85% 65% at 70% 100%,rgba(22,163,74,.48),rgba(20,83,45,.2) 45%,transparent 80%),
    radial-gradient(45% 40% at 0% 60%,rgba(16,185,129,.2),transparent 72%),
    var(--bg);
}

/* ---------- Summer: Weiß mit Farbspritzern ----------
   Baut auf der hellen Basis auf (data-tone="light"): warmes Weiß, weiße Panels, dunkle
   Tinte. Hinter allem liegen scharfe, voll deckende Farbspritzer (splash.js).
   Gedimmte Schrift ist so dunkel, dass sie auch auf der halbdurchsichtigen
   Seitenleiste über dem kräftigsten Spritzer 4,5 : 1 hält. Signalfarben
   etwas dunkler als in Light. */
[data-theme="summer"]{
  --bg:#fbfaf7;
  --bg-soft:#f6f4ef;
  --panel:#ffffff;
  --panel-2:#faf8f4;
  --panel-3:#f1eee7;
  --line:#e6e2d9;
  --line-soft:#efebe4;
  --line-strong:#d5cfc4;
  --text:#1c1d24;
  --text-2:#3d404c;
  --muted:#535868;
  --faint:#6e7383;
  --ok:#0e7f57;
  --warn:#9a6508;
  --danger:#a3261d;
  --violet:#7445e0;
  --fire:#c9500f;
  --code-bg:#f6f4ef;
  --ed-ink:#262833;
  --ed-strong:#111218;
  --ed-mk:#a29d93;
  --ed-quote:#474a57;
  --ed-cur:rgba(60,40,10,.035);
  --grid-dot:rgba(90,80,60,.17);
  --shadow:0 12px 30px rgba(60,45,20,.12);
  --shadow-sm:0 3px 10px rgba(60,45,20,.08);
  --shadow-pop:0 24px 60px -20px rgba(60,45,20,.32),0 0 0 1px rgba(60,45,20,.05);
  --neu:inset 0 1px 0 #fff,0 10px 26px -18px rgba(60,45,20,.34);
  --neu-hover:inset 0 1px 0 #fff,0 16px 34px -16px rgba(60,45,20,.4);
  --backdrop:var(--splash,none) 0 0 no-repeat,var(--bg);
  /* Akzent: die Farbe des aktiven Bereichs, zur Tinte hin abgedunkelt bis
     4,5 : 1 auf Weiß — Capture blau, Research lila, Reflections gelb (als
     Schrift oliv; gefüllt bleibt es Gelb mit dunkler Schrift). */
  --accent:#2c6ad5;
  --accent-ink:#ffffff;
}
[data-theme="summer"][data-area="research"]{--accent:#8151da}
[data-theme="summer"][data-area="reflections"]{
  --accent:#846c21;--accent-fill:#ffc81e;--accent-ink:#1c1d24;
  --accent-glow:0 4px 14px -6px rgba(240,180,0,.85);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--backdrop);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  font-feature-settings:'cv11','ss01';
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
.hidden{display:none !important}
.spacer{flex:1}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.c-com{color:var(--syn-com)}
.c-str{color:var(--syn-str)}
.c-kw{color:var(--syn-kw)}
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}

kbd{
  font-family:var(--mono);font-size:10.5px;line-height:1.4;font-weight:500;
  padding:1px 5px;border-radius:5px;border:1px solid var(--line);border-bottom-width:2px;
  background:var(--panel-2);color:var(--text-2);white-space:nowrap;
}
code{font-family:var(--mono)}

/* ============================================================
   Kopfzeile
   ============================================================ */
.topbar{
  height:var(--topbar-h);display:flex;align-items:center;gap:14px;padding:0 14px 0 12px;
  background:var(--bg-soft);border-bottom:1px solid var(--line);position:relative;z-index:30;
}
.brand{
  display:flex;align-items:center;gap:9px;flex:none;background:transparent;border:1px solid transparent;
  border-radius:10px;padding:5px 10px 5px 6px;transition:.14s;color:var(--text);
}
.brand:hover{background:var(--panel);border-color:var(--line)}
.brand-mark{position:relative;display:block;flex:none;width:26px;height:26px}
.brand-ico{width:26px;height:26px;border-radius:7px;display:block;filter:drop-shadow(0 2px 6px rgba(110,168,254,.25))}
.brand-name{font-weight:700;letter-spacing:-.02em;font-size:15.5px}
.brand-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted);font-weight:500;
  padding:2px 6px;border:1px solid var(--line);border-radius:5px;background:var(--panel);
}

.tabs{display:flex;gap:3px;background:var(--panel);padding:4px;border-radius:11px;border:1px solid var(--line);flex:none}
.tab{
  border:0;background:transparent;color:var(--text-2);padding:6px 10px 6px 11px;border-radius:8px;
  font-weight:500;display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.tab:hover{color:var(--text);background:var(--panel-2);transition:background .15s,color .15s}
.tab.active{background:var(--accent-fill);color:var(--accent-ink);font-weight:600;box-shadow:var(--accent-glow)}
.tab kbd{font-size:9.5px;padding:0 4px;border-bottom-width:1px;background:transparent;color:var(--faint);border-color:var(--line)}
.tab.active kbd{color:var(--accent-ink);border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.08)}

.cmd-trigger{
  display:flex;align-items:center;gap:9px;height:34px;flex:0 1 280px;min-width:140px;padding:0 7px 0 11px;margin-left:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--muted);transition:.15s;
}
.cmd-trigger:hover{border-color:var(--line-strong);color:var(--text-2);background:var(--panel-2)}
.cmd-ico{display:grid;place-items:center}
.cmd-ph{flex:1;min-width:0;text-align:left;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.backup-chip{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 9px;border-radius:20px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 11%,var(--panel));
  color:var(--text);font-size:12px;font-weight:500;transition:background .15s,border-color .15s,box-shadow .15s;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 7%,transparent);animation:backupIn .3s ease-out;
}
.backup-chip .ico{color:var(--warn)}
.backup-chip i{width:6px;height:6px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn);animation:pulse 1.6s infinite}
.backup-chip em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.backup-chip:hover{background:color-mix(in srgb,var(--warn) 20%,var(--panel));border-color:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 14%,transparent),0 6px 18px -8px var(--warn)}
@keyframes backupIn{from{opacity:0;transform:translateY(-3px)}}
/* Angeheftetes Pure Reading — leuchtet in der Farbe seines Typs */
.pin-chip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 10px;border-radius:20px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--c) 50%,var(--line));background:color-mix(in srgb,var(--c) 13%,var(--panel));
  color:var(--text);font-size:12px;font-weight:500;cursor:pointer;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 9%,transparent),0 0 16px -6px var(--c);
  transition:background .15s,border-color .15s,box-shadow .15s;animation:backupIn .25s ease-out;
}
.pin-chip > .ico{color:var(--c);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent))}
.pin-chip:hover{background:color-mix(in srgb,var(--c) 22%,var(--panel));border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent),0 6px 20px -6px var(--c)}
.pin-chip-x{display:none;place-items:center;width:16px;height:16px;margin-right:-4px;border-radius:50%;color:var(--muted)}
.pin-chip:hover .pin-chip-x{display:inline-grid}
.pin-chip-x:hover{color:var(--text);background:color-mix(in srgb,var(--c) 30%,transparent)}
/* Monatsrückblick (review.js): das Kalendersymbol trägt den Akzent des Themes */
#reviewBtn .ico{color:var(--accent);transition:filter .15s}
#reviewBtn:hover .ico{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 60%,transparent))}
.today-chip{font-size:12px;color:var(--text-2);background:var(--panel);border:1px solid var(--line);padding:5px 11px;border-radius:20px;white-space:nowrap}
.icon-btn{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text-2);
  display:grid;place-items:center;transition:.15s;flex:none;padding:0;
}
.icon-btn:hover:not(:disabled){background:var(--panel-2);color:var(--text);border-color:var(--line-strong)}
.icon-btn:disabled{opacity:.38;cursor:default}
.icon-btn-sm{width:26px;height:26px;border-radius:7px}
.icon-btn .ico{display:block}

/* Theme-Schalter: fünf Segmente, so hoch wie die Knöpfe daneben. Das aktive
   trägt dieselbe Füllung wie der aktive Tab — in Space den Verlauf, in Winter
   den Kerzenschein, in Summer die Farbe des Bereichs. */
.theme-sw{
  display:flex;gap:2px;flex:none;height:32px;padding:2px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);
}
.theme-sw button{
  width:26px;border:0;border-radius:7px;padding:0;display:grid;place-items:center;
  font-size:13px;line-height:1;background:transparent;color:var(--text-2);transition:background .14s,color .14s;
}
.theme-sw button:hover{background:var(--panel-2);color:var(--text)}
.theme-sw button.on{background:var(--accent-fill);color:var(--accent-ink);cursor:default;box-shadow:var(--accent-glow)}
.theme-sw button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Schmal: nur das aktive Segment, ein Klick darauf schaltet zum nächsten Theme */
@media (max-width:1000px){
  .theme-sw button:not(.on){display:none}
  .theme-sw button.on{cursor:pointer}
}

/* ============================================================
   Layout
   ============================================================ */
main{height:calc(100vh - var(--topbar-h) - var(--statusbar-h));overflow:hidden;position:relative}
.view{display:none;height:100%;overflow:hidden}
.view.active{display:block;animation:viewIn .18s ease-out}
@keyframes viewIn{from{opacity:.4}to{opacity:1}}
/* Summer: kaum blenden — sonst schimmern die Spritzer kurz durch die Panels */
[data-theme="summer"] .view.active{animation-name:viewInSoft}
@keyframes viewInSoft{from{opacity:.86}}
.view-col{height:100%;display:flex;flex-direction:column;min-height:0}
.scroll-y{overflow-y:auto}

.vhead{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.vhead-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.vhead-title h1{font-size:22px;letter-spacing:-.02em}
.vhead-title h2{font-size:16px;letter-spacing:-.01em}
.vhead-path{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.vhead-count{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:1px 8px;border-radius:20px}
.vhead-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.section-title{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:500;margin:0 0 10px;display:flex;align-items:center;gap:6px;
}
.section-title .n{color:var(--faint)}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid var(--line);background:var(--panel);color:var(--text);height:34px;
  padding:0 13px;border-radius:9px;font-weight:500;font-size:13px;
  display:inline-flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--panel-2);border-color:var(--line-strong)}
.btn kbd{margin-left:2px;font-size:10px;padding:0 4px;border-bottom-width:1px}
.btn-primary{background:var(--accent-fill) border-box;border-color:transparent;color:var(--accent-ink);font-weight:600;box-shadow:var(--btn-glow,0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent))}
.btn-primary:hover{filter:brightness(1.07);background:var(--accent-fill) border-box;border-color:transparent}
.btn-primary kbd{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.18);color:var(--accent-ink)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--line);color:var(--text)}
.btn-danger{color:var(--danger)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--danger)}
.btn-danger-solid{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
.btn-danger-solid:hover{filter:brightness(1.06);background:var(--danger)}
.btn-sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:8px;gap:6px}
.btn-xs{height:22px;padding:0 7px;font-size:11px;border-radius:6px;gap:4px}
.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer}
.linkish:hover{text-decoration:underline}

/* ---------- Eingaben ---------- */
.inp,textarea.inp,select.inp{
  width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:8px 11px;border-radius:9px;outline:none;transition:.15s;font-size:13.5px;
}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.inp::placeholder{color:var(--faint)}
.inp-sm{padding:5px 9px;font-size:12.5px;border-radius:7px}
textarea.inp{resize:vertical;line-height:1.55}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2377839a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
label.fld,div.fld{display:block;margin-bottom:14px}
.fld > span{display:block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.filter{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 11px;width:250px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--muted);transition:.15s;
}
.filter input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);font-size:13px}
.filter input::placeholder{color:var(--faint)}
.filter:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.filter:focus-within kbd{opacity:0}
.filter-sm{height:30px;width:100%}

/* ---------- Segment ---------- */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:2px;gap:2px;flex:none}
.seg-btn{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;border:0;
  background:transparent;color:var(--muted);font-size:12.5px;font-weight:500;transition:color .12s,background .12s;
}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)}
[data-tone="light"] .seg-btn.active{background:#fff;box-shadow:0 1px 3px rgba(20,30,60,.12)}
.seg-btn kbd{font-size:9.5px;padding:0 4px;border-bottom-width:1px}
.seg-sm .seg-btn{height:24px;padding:0 8px;font-size:12px}

/* ---------- Farbwahl ---------- */
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch span{display:block;width:22px;height:22px;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .12s}
.swatch span:hover{transform:scale(1.12)}
.swatch input:checked + span{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--c)}

/* ---------- Leerzustand ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:70px 20px;text-align:center;color:var(--muted);width:100%}
.empty-state.small{padding:40px 16px}
.empty-state p{max-width:400px;margin:0;font-size:13.5px;line-height:1.6}
.es-code{font-family:var(--mono);font-size:13px;color:var(--text-2)}

/* ============================================================
   Statusleiste — wie in einer IDE
   ============================================================ */
.statusbar{
  height:var(--statusbar-h);display:flex;align-items:stretch;justify-content:space-between;
  background:var(--bg-soft);border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted);
  padding:0 6px;user-select:none;
}
.sb-left,.sb-right{display:flex;align-items:stretch;min-width:0}
.sb-item{display:inline-flex;align-items:center;gap:6px;padding:0 9px;white-space:nowrap}
.sb-item + .sb-item{border-left:1px solid var(--line-soft)}
.sb-branch{color:var(--text-2)}
.sb-branch .ico{color:var(--accent)}
.sb-save i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px color-mix(in srgb,var(--ok) 60%,transparent)}
.sb-save.dirty i{background:var(--warn);box-shadow:0 0 8px color-mix(in srgb,var(--warn) 60%,transparent)}
.sb-save.saving i{background:var(--accent);animation:pulse 1s infinite}
.sb-save.err{color:var(--danger)}
.sb-save.err i{background:var(--danger)}
.sb-bak .ico{color:var(--ok)}
.sb-bak.busy .ico{color:var(--accent);animation:pulse 1s infinite}
.sb-bak.warn{color:var(--warn)}
.sb-bak.warn .ico{color:var(--warn)}
.sb-sync{cursor:pointer}
.sb-sync .ico{color:var(--ok)}
.sb-sync.busy .ico{color:var(--accent);animation:pulse 1s infinite}
.sb-sync.warn,.sb-sync.warn .ico{color:var(--warn)}
.sb-sync:hover{color:var(--text)}
.sb-ctx{color:var(--text-2)}
.sb-ctx .ico{color:var(--faint)}
.sb-ed{color:var(--text-2)}
.sb-lang{color:var(--syn-kw)}
@keyframes pulse{50%{opacity:.35}}

/* ============================================================
   Modal, Menü, Toast
   ============================================================ */
.modal-bd{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,7,11,.58);backdrop-filter:blur(4px);opacity:0;transition:opacity .14s;
}
[data-tone="light"] .modal-bd{background:rgba(30,40,60,.28)}
.modal-bd.in{opacity:1}
.modal-bd.out{opacity:0}
.modal-bd.bd-top{align-items:flex-start;padding-top:11vh}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop),inset 0 1px 0 rgba(255,255,255,.04);
  max-height:calc(100vh - 40px);display:flex;flex-direction:column;min-height:0;
  transform:translateY(8px) scale(.985);transition:transform .16s cubic-bezier(.2,.8,.2,1);
}
.modal-bd.in .modal{transform:none}
.modal-head{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 12px 20px}
.modal-titles{flex:1;min-width:0}
.modal-head h3{font-size:16px;font-weight:700}
.modal-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px}
.modal-head-actions{display:flex;gap:6px}
.modal-body{padding:6px 20px 20px;overflow:auto;flex:1;min-height:0}
.modal-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--bg-soft);border-radius:0 0 var(--r-lg) var(--r-lg)}
.confirm-text{margin:0;color:var(--text-2);line-height:1.6}

.menu{
  position:fixed;z-index:150;min-width:210px;max-width:320px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;padding:5px;box-shadow:var(--shadow-pop);animation:menuIn .12s ease-out;
}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}}
.menu-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:7px;border:0;background:transparent;
  color:var(--text-2);font-size:13px;text-align:left;
}
.menu-item:hover:not(:disabled){background:var(--panel-3);color:var(--text)}
.menu-item:disabled{opacity:.4;cursor:default}
.menu-item .ico{flex:none;color:var(--muted)}
.menu-item:hover .ico{color:var(--text)}
.menu-item.danger,.menu-item.danger .ico{color:var(--danger)}
.menu-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item kbd{margin-left:auto;font-size:10px;border-bottom-width:1px}
.menu-check{color:var(--accent) !important}
.menu-dot{width:9px;height:9px;border-radius:50%;flex:none;margin:0 2px;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}
.menu-ico-pad{width:14px;flex:none}
.menu-sep{height:1px;background:var(--line-soft);margin:4px 3px}
.menu-heading{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:6px 9px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popover{padding:12px;min-width:270px;max-height:calc(100vh - 16px);overflow:auto}
.pop-title{font-size:13px;font-weight:600;margin-bottom:12px}
.pop-actions{display:flex;align-items:center;gap:6px;margin-top:14px}
.pop-form .fld{margin-bottom:12px}

.pop-pick{padding:8px;width:340px;max-width:340px}
.pick-list{max-height:290px;overflow:auto;margin-top:6px}
.pick-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:7px;border:0;background:transparent;color:var(--text-2);font-size:13px;text-align:left}
.pick-item .ico{color:var(--c);flex:none}
.pick-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-item em{font-family:var(--mono);font-size:10px;color:var(--faint);font-style:normal}
.pick-item.active,.pick-item:hover{background:var(--panel-3);color:var(--text)}
.pick-empty{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}

.toast{
  position:fixed;left:50%;bottom:42px;z-index:200;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;background:var(--panel-3);border:1px solid var(--line-strong);color:var(--text);
  padding:9px 12px 9px 15px;border-radius:11px;box-shadow:var(--shadow-pop);font-size:13px;transition:.18s cubic-bezier(.2,.8,.2,1);
}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.err{border-color:color-mix(in srgb,var(--danger) 50%,var(--line))}
.toast-act{background:color-mix(in srgb,var(--accent) 14%,transparent);border:0;color:var(--accent);font-weight:600;font-size:12.5px;padding:4px 9px;border-radius:7px}
.toast-act:hover{background:color-mix(in srgb,var(--accent) 24%,transparent)}

/* ============================================================
   Markdown
   ============================================================ */
.md{font-size:13.5px;line-height:1.62;color:var(--text-2);overflow-wrap:anywhere}
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md p{margin:0 0 .65em}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{color:var(--text);margin:1em 0 .45em;line-height:1.3}
.md h1{font-size:1.35em}
.md h2{font-size:1.15em}
.md h3{font-size:1.02em}
.md h4,.md h5,.md h6{font-size:.95em}
.md strong{color:var(--text);font-weight:600}
.md em{color:var(--text)}
.md ul,.md ol{margin:0 0 .7em;padding-left:1.3em}
.md li{margin:.14em 0}
.md li::marker{color:var(--muted)}
.md ul.tasks{list-style:none;padding-left:.1em}
.md li.task{display:flex;gap:9px;align-items:flex-start;list-style:none}
.md li.task > span{flex:1;min-width:0}
.md li.task.done > span{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.md input[type=checkbox]{
  appearance:none;flex:none;width:15px;height:15px;margin:.24em 0 0;border-radius:4px;border:1.5px solid var(--line-strong);
  background:var(--panel-2);cursor:pointer;display:grid;place-items:center;transition:.12s;
}
.md input[type=checkbox]:hover{border-color:var(--ok)}
.md input[type=checkbox]:checked{background:var(--ok);border-color:var(--ok)}
.md input[type=checkbox]:checked::after{content:'';width:8px;height:5px;border:2px solid #04231a;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.md input[type=checkbox]:disabled{cursor:default}
.md blockquote{margin:.3em 0 .8em;padding:.2em 0 .2em 14px;border-left:3px solid color-mix(in srgb,var(--c,var(--accent)) 70%,transparent);color:var(--text)}
.md blockquote p{margin-bottom:.3em}
.md code{font-size:.86em;background:var(--panel-3);color:var(--code-ink);padding:1px 5px;border-radius:5px}
.md pre.md-code{
  position:relative;margin:.4em 0 .9em;padding:12px 14px;background:var(--code-bg);border:1px solid var(--line);
  border-radius:10px;overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text);
}
.md pre.md-code code{background:none;padding:0;color:inherit;font-size:inherit}
/* Kopieren — beim Überfahren statt der Sprachangabe oben rechts */
.md-copy{
  position:absolute;top:5px;right:6px;width:26px;height:24px;padding:0;border-radius:7px;display:grid;place-items:center;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--muted);
  opacity:0;cursor:pointer;transition:opacity .12s,color .12s,background .12s;
}
.md pre.md-code:hover .md-copy{opacity:1}
.md pre.md-code:hover .md-lang{opacity:0}
.md-copy:hover{color:var(--text);background:var(--panel-2)}

/* ---------- Farben in Code-Blöcken — Python, Java, SQL, R (codehl.js) ----------
   Dieselben Klassen im Editor und in Pure Reading; nur Farbe und Neigung,
   damit im Editor nichts verrutscht. */
.cx-k,.cx-o{color:var(--syn-kw)}
.cx-s{color:var(--syn-str)}
.cx-c{color:var(--syn-com);font-style:oblique 8deg}
.cx-n,.cx-b{color:var(--syn-num)}
.cx-f{color:var(--syn-fn)}
.cx-t{color:var(--syn-type)}
.cx-d{color:var(--code-ink)}
.md-lang{position:absolute;top:6px;right:9px;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--syn-kw);opacity:.8}
.md-table{overflow-x:auto;margin:.3em 0 .9em;border:1px solid var(--line-soft);border-radius:9px}
.md table{border-collapse:collapse;width:100%;font-size:.93em}
.md th,.md td{padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.md th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500;background:var(--bg-soft)}
.md tr:last-child td{border-bottom:0}
/* Zellen brechen nur zwischen Wörtern: anywhere (von .md) ließe eine Spalte bis auf einen
   Buchstaben schrumpfen („Thi/nki/ng“) — so bestimmt ihr längstes Wort die Mindestbreite.
   Nackte Links und Inline-Code dürfen weiter überall brechen. Feine Linien trennen die Spalten. */
.md :is(th,td){overflow-wrap:break-word;text-wrap:pretty}
.md :is(th,td) :is(.md-url,code){overflow-wrap:anywhere}
.md :is(th,td) + :is(th,td){border-left:1px solid var(--line-soft)}
/* Formeln und Bilder machen die Tabelle nie breiter als ihren Platz: als Grid mit einer Spur
   minmax(0, max-content) zählen sie für die Mindestbreite der Spalte nicht mit. Ist Platz, stehen
   sie ganz da; sonst scrollt die Formel in ihrer Zelle und das Bild wird kleiner. Auf der
   Grundlinie wie vorher (vertical-align bleibt baseline). */
.md :is(th,td) .md-math{display:inline-grid;grid-template-columns:minmax(0,max-content);max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.md :is(th,td) .md-math-d{display:grid}
.md :is(th,td) .img-w{display:grid;grid-template-columns:minmax(0,max-content);width:auto}
/* Passt eine Tabelle so nicht in ihren Platz, gibt nur sie nach (tables.js misst):
   erst engere Zellen und Silbentrennung, zuletzt Umbruch mitten im Wort. */
.md-table.tight :is(th,td){padding:6px 8px;hyphens:auto;-webkit-hyphens:auto}
.md-table.tighter :is(th,td){overflow-wrap:anywhere}
.md a{color:var(--accent);text-decoration:none}
.md a:hover{text-decoration:underline}
.md a.md-url::after{content:'↗';font-size:.8em;margin-left:2px;opacity:.7}
.md hr{border:0;border-top:1px dashed var(--line);margin:1em 0}
.md mark{background:color-mix(in srgb,var(--neon-yellow) 16%,transparent);color:var(--neon-yellow);border-radius:3px;padding:0 2px}
.md del{color:var(--muted)}
.md-tag{font-family:var(--mono);font-size:.84em;color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent);padding:1px 5px;border-radius:5px}
.md-wiki{color:var(--accent);border-bottom:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);cursor:pointer}
.md-wiki:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:4px;text-decoration:none}
.md-ts{font-family:var(--mono);font-size:.84em;color:#ff6b6b !important;background:color-mix(in srgb,#ff4d4d 13%,transparent);padding:1px 6px;border-radius:5px}
.md-ts:hover{text-decoration:none !important;background:color-mix(in srgb,#ff4d4d 22%,transparent)}
/* Folienmarker: im Editor bleibt @12 stehen, in Pure Reading und Karten wird ein Chip daraus */
.md-slide{
  font-family:var(--mono);font-size:.84em;color:var(--fire) !important;text-decoration:none !important;
  background:color-mix(in srgb,var(--fire) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fire) 26%,transparent);
  padding:1px 6px;border-radius:5px;white-space:nowrap;cursor:default;
}
.ed[data-slide-url]:not([data-slide-url=""]) .md-slide{cursor:pointer}
.ed[data-slide-url]:not([data-slide-url=""]) .md-slide:hover{background:color-mix(in srgb,var(--fire) 24%,transparent)}
.t-slide{color:var(--fire)}

/* ---------- Formeln (MathML von Temml, siehe math.js) ----------
   Die Schrift ist die Mathe-Schrift des Systems; die Farbe kommt vom Text,
   passt also zu jedem Theme und zu Kachel wie Schlicht. */
.md math,.ed-peek math{font-family:"STIX Two Math","Cambria Math",math;font-size:1.08em}
.md-math{color:inherit}
.md-math-d{display:block;margin:.4em 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.md-math-b{margin:.6em 0 .9em;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;text-align:center}
.md-math-b .md-math-d{margin:0}
/* Noch nicht geladen: das TeX blass; fehlerhaft: das TeX rot, der Fehler im Tooltip */
.md-math.pending,.md-math.err{font-family:var(--mono);font-size:.86em}
.md-math.pending{color:var(--faint)}
.md-math.err{color:var(--danger);text-decoration:underline dotted color-mix(in srgb,var(--danger) 60%,transparent);text-underline-offset:3px;cursor:help}
.ed-view .md-math:not(.err){cursor:copy}

/* ---------- Callouts (> [!tip] — wie in Obsidian) ---------- */
.md-callout{
  --co:var(--neon-blue);margin:.5em 0 .9em;padding:.55em .95em .65em;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--co) 28%,var(--line));border-left:3px solid var(--co);
  background:color-mix(in srgb,var(--co) 8%,transparent);
}
.md-co-head{display:flex;align-items:center;gap:.5em;color:var(--co);font-weight:650;line-height:1.4}
.md-co-head .ico{flex:none}
.md-co-t{flex:1;min-width:0}
.md-co-t em,.md-co-t strong{color:inherit}
.md-co-body{margin-top:.35em;color:var(--text)}
.md-co-body > :last-child{margin-bottom:0}
details.md-callout > summary{cursor:pointer;list-style:none;user-select:none}
details.md-callout > summary::-webkit-details-marker{display:none}
.md-co-fold{flex:none;opacity:.7;transform:rotate(-90deg);transition:transform .15s}
details.md-callout[open] .md-co-fold{transform:none}
details.md-callout:not([open]){padding-bottom:.55em}

/* ============================================================
   Bilder — Verweis im Editor, Bild in Pure Reading und Karten,
   klein am Rand des Editors, Großansicht
   ============================================================ */
/* Schreiben: der Verweis ![Alt](img:…) — nur Farbe und Hintergrund, die Zeichen bleiben */
.t-img{color:var(--syn-fn);background:color-mix(in srgb,var(--syn-fn) 11%,transparent);border-radius:4px}
.t-img .t-isrc{color:var(--faint)}
.img-w{position:relative;display:block;width:fit-content;max-width:100%;margin:.6em 0}
.img-w img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);cursor:zoom-in}
.img-w img:not([src]){color:transparent}
.img-copy{
  position:absolute;top:8px;right:8px;width:28px;height:28px;padding:0;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(6px);
  color:var(--text-2);opacity:0;transition:opacity .12s,color .12s,background .12s;box-shadow:var(--shadow-sm);
}
.img-w:hover .img-copy{opacity:1}
.img-copy:hover{color:var(--text);background:var(--panel-2)}
.img-w.missing img,.img-w.missing .img-copy{display:none}
.img-miss{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px dashed var(--line-strong);font-family:var(--mono);font-size:11.5px;color:var(--muted)}
/* Klein am rechten Rand, solange der Cursor in einer Bildzeile steht */
.ed-peek{
  position:fixed;z-index:9;padding:5px;border-radius:11px;max-width:240px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-pop);animation:menuIn .12s ease-out;
}
.ed-peek[hidden]{display:none}
.ed-peek .img-w{margin:0}
.ed-peek img{max-height:160px;width:auto;border-radius:7px}
.ed-peek .img-copy{top:5px;right:5px;width:24px;height:24px;border-radius:7px}
/* … oder die Formel am Cursor, gerendert, während man tippt */
.ed-peek.is-math{max-width:min(620px,72vw);padding:10px 14px;font-size:calc(var(--ed-size) + 2px);color:var(--text)}
.peek-math{overflow-x:auto;scrollbar-width:thin}
.peek-math.stale{opacity:.38}
.peek-err{margin-top:4px;font-family:var(--mono);font-size:10.5px;line-height:1.45;color:var(--danger);max-width:56ch;white-space:normal}
.peek-math + .peek-err{padding-top:5px;border-top:1px dashed var(--line-soft)}
/* Bild über dem Editor: Ziel markieren */
.ed.drop-img .ed-body{outline:2px dashed color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:4px;border-radius:12px}
/* Großansicht */
.lbx{
  position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:4vh 4vw 3vh;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);animation:edFocusIn .16s ease-out;
}
.lbx-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.lbx-img{display:block;max-width:100%;max-height:100%;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);box-shadow:var(--shadow-pop)}
.lbx-bar{
  flex:none;display:flex;align-items:center;gap:8px;width:min(900px,100%);padding:6px 6px 6px 14px;
  border-radius:12px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-sm);
}
.lbx-info{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--muted)}
.lbx-info b{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbx-info span{font-family:var(--mono);font-size:11px;white-space:nowrap}
/* Kacheln zeigen nur ein Symbol */
.note-imgs{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-family:var(--mono);font-size:10px}
.note-imgs b{font-weight:500}
.bkf-imgs{display:inline-flex;align-items:center;gap:3px}

/* ============================================================
   Farbmarkierungen — gemeinsam für Editor und Ansicht
   ============================================================ */
.hl-red{--n:var(--neon-red)}
.hl-yellow{--n:var(--neon-yellow)}
.hl-green{--n:var(--neon-green)}
.hl-forest{--n:var(--neon-forest)}
.hl-sky{--n:var(--neon-sky)}
.hl-blue{--n:var(--neon-blue)}
.hl-violet{--n:var(--neon-violet)}
.hl-magenta{--n:var(--neon-magenta)}
.hl-silver{--n:var(--neon-silver)}
/* Drei Stile, umschaltbar in der Toolbar — Farbe und Deckkraft kommen
   als Variablen von der Wurzel, damit Thema und Stil sich nicht in die
   Quere kommen. */
.hl{
  color:var(--n);background:color-mix(in srgb,var(--n) var(--hl-a,14%),transparent);border-radius:4px;
  text-shadow:var(--hl-glow,0 0 12px color-mix(in srgb,var(--n) 55%,transparent));
}
.md .hl{padding:0 3px;margin:0 -1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.md .hl strong,.md .hl em{color:inherit}
[data-tone="light"]{--hl-a:11%;--hl-glow:none}
:root[data-hl="bg"]{--hl-a:26%;--hl-glow:none}
[data-tone="light"][data-hl="bg"]{--hl-a:30%}
:root[data-hl="bg"] .hl{color:inherit}
:root[data-hl="text"]{--hl-a:0%}

/* ============================================================
   Editor — Markdown mit Live-Syntax-Highlighting
   Textarea (durchsichtig) liegt exakt über .ed-hl (eingefärbt).
   Beide Ebenen MÜSSEN identische Schriftmetrik haben: keine
   Größen-, Abstands- oder Paddingänderungen an Spans!
   ============================================================ */
:root[data-ed-font="mono"]{--ed-mono:1}
:root[data-ed-size="s"]{--ed-fs:14px;--ed-lh:1.72}
:root[data-ed-size="l"]{--ed-fs:17px;--ed-lh:1.8}

.ed{position:relative;display:flex;flex-direction:column;--ed-min:140px;--ed-size:var(--ed-fs);--ed-px:16px;container-type:inline-size}
@container (max-width:830px){
  .ed-tools .et-hl kbd{display:none}
  .ed-tools .et-hl{width:22px}
  .ed-tools .et-sep{margin:0 2px}
  .ed-tools .et-btn{min-width:26px;padding:0 4px}
  .ed-tools .et-hlmode .seg-btn{padding:0 4px}
}
.ed-tools{
  position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:2px;padding:4px;margin:0 0 6px;
  border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--panel-2) 88%,transparent);
  backdrop-filter:blur(10px);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.03);
  overflow-x:auto;scrollbar-width:none;font-family:var(--sans);line-height:1;
}
.ed-tools::-webkit-scrollbar{display:none}
.et-btn{
  flex:none;height:28px;min-width:28px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;gap:3px;transition:background .12s,color .12s;
}
.et-btn:hover{background:var(--panel-3);color:var(--text)}
.et-txt{font-size:13px;font-weight:600;font-family:var(--ed-font)}
.et-b{font-weight:800}
.et-i{font-style:oblique 12deg}
.et-s{text-decoration:line-through}
.et-mono{font-family:var(--mono);font-size:11px}
.et-sep{width:1px;height:18px;background:var(--line);margin:0 5px;flex:none}
/* Schalter für den Markierungsstil — das „A“ zeigt jeden Stil direkt */
.et-hlmode{flex:none;margin:0 5px 0 1px;padding:2px;gap:1px}
.et-hlmode .seg-btn{height:22px;padding:0 5px;min-width:0}
.et-hlmode span{
  --n:var(--neon-yellow);display:inline-block;min-width:13px;padding:0 1px;border-radius:3px;
  font-family:var(--ed-font);font-size:11.5px;font-weight:700;line-height:17px;text-align:center;
}
.hm-both span{color:var(--n);background:color-mix(in srgb,var(--n) 28%,transparent)}
.hm-bg span{color:var(--text);background:color-mix(in srgb,var(--n) 45%,transparent)}
.hm-text span{color:var(--n)}
.et-hl{
  flex:none;height:28px;width:30px;border:0;border-radius:7px;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:3px;
  transition:background .12s;position:relative;
}
.et-hl i{flex:0 0 11px;width:11px;height:11px;border-radius:50%;background:var(--n);box-shadow:0 0 0 2px color-mix(in srgb,var(--n) 22%,transparent),0 0 10px color-mix(in srgb,var(--n) 80%,transparent);transition:transform .12s}
.et-hl kbd{flex:none;font-size:9px;padding:0 3px;border:0;background:transparent;color:var(--faint)}
.et-hl:hover{background:color-mix(in srgb,var(--n) 12%,transparent)}
.et-hl:hover i{transform:scale(1.18)}
.et-hl.on{background:color-mix(in srgb,var(--n) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--n) 55%,transparent)}
.et-hl.on kbd{color:var(--n)}
.et-font{color:var(--text-2)}
[data-tone="light"] .et-hl i{box-shadow:0 0 0 2px color-mix(in srgb,var(--n) 22%,transparent)}

.ed-body{display:flex;align-items:flex-start;position:relative}

/* ---------- Gliederungsleiste ----------
   Links am Dokument steht je Überschrift ein Balken, seine Länge zeigt
   die Ebene. Beim Überfahren klappt die Leiste über den Text auf — sie
   liegt darüber statt daneben, damit nichts umbricht und die Seite im
   Fokus-Modus mittig bleibt. Sie klebt oben und bleibt beim Scrollen. */
.ed-ol{flex:none;width:20px;height:0;position:sticky;top:46px;z-index:6}
.ed.is-focus .ed-ol{top:8px}
.ed-ol-in{
  position:absolute;left:0;top:0;width:20px;max-height:min(56vh,540px);overflow:hidden;
  display:flex;flex-direction:column;gap:5px;padding:8px 5px;
  border:1px solid transparent;border-radius:11px;
  transition:width .18s ease .08s,gap .18s .08s,padding .18s .08s,background .18s,border-color .18s,box-shadow .18s;
}
.ol-i{
  flex:none;display:flex;align-items:center;gap:9px;height:9px;padding:0;
  border:0;border-radius:6px;background:transparent;color:var(--muted);
  font-family:var(--sans);font-size:12px;text-align:left;cursor:pointer;
  transition:height .18s .08s,padding .18s .08s,background .12s,color .12s;
}
.ol-i > i{flex:none;height:2px;border-radius:2px;width:calc(14px - var(--lvl) * 1.7px);background:var(--line-strong);transition:background .12s}
.ol-i > span{flex:1;min-width:0;opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .12s}
/* viele Überschriften: die Balken rücken enger */
.ed-ol-in.dense{gap:2px}
.ed-ol-in.dense .ol-i{height:7px}
.ed-ol-in:hover{
  width:252px;gap:1px;padding:8px 7px;overflow-y:auto;scrollbar-width:thin;
  background:color-mix(in srgb,var(--panel-2) 96%,transparent);border-color:var(--line);
  box-shadow:var(--shadow-pop),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(10px);
}
.ed-ol-in:hover .ol-i{height:23px;padding:0 7px 0 calc(6px + (var(--lvl) - 1) * 10px)}
.ed-ol-in:hover .ol-i > i{width:4px;height:4px;border-radius:50%}
.ed-ol-in:hover .ol-i > span{opacity:1}
.ol-i:hover{background:var(--panel-3);color:var(--text)}
.ol-i.on{color:var(--text)}
.ol-i.on > i{background:var(--accent);box-shadow:0 0 7px color-mix(in srgb,var(--accent) 70%,transparent)}
/* Abschnittweise lesen (⌥↓/⌥↑): der Balken des Ziels blitzt kurz auf */
.ol-i.ping > i{animation:olPing .6s ease-out;transform-origin:left center}
@keyframes olPing{0%{transform:scaleX(1.9);box-shadow:0 0 14px var(--accent)}100%{transform:none}}
.ol-i.ol-l1 > span{font-weight:600}
.ed:not(.with-outline):not(.is-pure) .ed-ol{display:none}
/* Unter zwei Überschriften bleibt die Spalte leer, rückt den Text aber
   nicht hin und her, sobald eine zweite dazukommt. */
.ed.with-outline .ed-ol[hidden]{display:block;visibility:hidden}
/* Ganz oben: ganze Gliederung im Vollbild — eingeklappt nur ein kleines Zeichen */
.ol-full{
  flex:none;display:flex;align-items:center;gap:8px;height:10px;padding:0;margin-bottom:2px;
  border:0;border-radius:6px;background:transparent;color:var(--faint);
  font-family:var(--sans);font-size:12px;text-align:left;cursor:pointer;
  transition:height .18s .08s,padding .18s .08s,margin .18s .08s,background .12s,color .12s;
}
.ol-full svg{flex:none}
.ol-full span{flex:1;min-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:opacity .12s}
.ed-ol-in:hover .ol-full{height:25px;padding:0 7px;margin-bottom:5px;color:var(--muted)}
.ed-ol-in:hover .ol-full span{opacity:1}
.ol-full:hover,.ed-ol-in:hover .ol-full:hover{background:var(--panel-3);color:var(--text)}

/* ---------- Gliederung im Vollbild ----------
   Wie der Fokus-Modus: abgedunkelter Hintergrund, eine große Kachel.
   Die Balken wiederholen die Leiste — gleiche Länge je Ebene. */
.olf{
  position:fixed;inset:0;z-index:110;display:flex;align-items:flex-start;justify-content:center;padding:4.5vh 24px 3vh;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px) saturate(1.1);
  animation:edFocusIn .18s ease-out;
}
.olf-panel{
  width:min(1120px,100%);max-height:100%;display:flex;flex-direction:column;min-height:0;outline:none;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-pop),inset 0 1px 0 rgba(255,255,255,.04);
}
.olf-head{display:flex;align-items:center;gap:14px;padding:18px 16px 14px 26px;border-bottom:1px dashed var(--line-soft)}
.olf-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.olf-meta{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.olf-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:16px 20px 24px}
.olf-cols{columns:250px 3;column-gap:30px}
.olf-g{break-inside:avoid;display:flex;flex-direction:column;gap:1px;margin-bottom:18px}
.olf-g.big{break-inside:auto}
.olf-g.lead{column-span:all;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.olf-g.lead .olf-top{font-size:15px}
.olf-i{
  display:flex;align-items:flex-start;gap:10px;width:100%;padding:4px 8px 4px calc(8px + var(--d) * 14px);
  border:0;border-radius:7px;background:transparent;color:var(--muted);
  font-family:var(--sans);font-size:13px;line-height:1.4;text-align:left;cursor:pointer;
  transition:background .12s,color .12s;
}
.olf-i > i{flex:none;height:2px;margin-top:.62em;border-radius:2px;width:calc(14px - (var(--d) + 1) * 1.7px);background:var(--line-strong)}
.olf-i > span{flex:1;min-width:0;overflow-wrap:anywhere}
/* Gliederung: Überschriften gerendert — Formeln, Fettes, Kursives, Code —, aber ohne Farben:
   alles in der Schriftfarbe der Leiste, wie immer (keine Markierungen, keine Code-Farbe) */
:is(.ol-i,.olf-i) > span :is(.md-lk,.hl,code,.md-tag,.md-slide,.md-math,strong,em,del){
  color:inherit;background:none;box-shadow:none;text-shadow:none;border:0;padding:0;margin:0;border-radius:0;
}
:is(.ol-i,.olf-i) > span code{font-family:var(--mono);font-size:.88em}
:is(.ol-i,.olf-i) > span math{font-family:"STIX Two Math","Cambria Math",math;font-size:1.06em}
:is(.ol-i,.olf-i) > span .md-math:is(.pending,.err){font-family:var(--mono);font-size:.88em;text-decoration:none}
.olf-i > em{flex:none;font-style:normal;font-family:var(--mono);font-size:10px;line-height:1.9;color:var(--faint)}
.olf-top{color:var(--text);font-size:14px;font-weight:600;padding-top:5px;padding-bottom:5px}
.olf-top > i{width:14px}
.olf-i:hover,.olf-i:focus-visible{background:var(--panel-3);color:var(--text);outline:none}
.olf-i.on{color:var(--text)}
.olf-i.on > i{background:var(--accent);box-shadow:0 0 7px color-mix(in srgb,var(--accent) 70%,transparent)}
@media (max-width:640px){
  .olf{padding:16px}
  .olf-head{padding:14px 12px 12px 16px;flex-wrap:wrap}
  .olf-meta{order:3;width:100%}
  .olf-body{padding:12px 10px 18px}
}
.ed-gutter{
  flex:none;width:44px;padding:10px 11px 10px 0;text-align:right;color:var(--faint);font-family:var(--mono);font-size:11px;
  user-select:none;border-right:1px solid var(--line-soft);transition:color .15s;
}
.ed-gutter .ln{line-height:calc(var(--ed-size) * var(--ed-lh));opacity:.6}
.ed-gutter .ln-x{overflow:hidden;visibility:hidden}
.ed-gutter .ln.cur{opacity:1;color:var(--text-2)}
.ed.focus .ed-gutter .ln.cur{color:var(--accent)}
.ed:not(.with-gutter) .ed-gutter{display:none}
.ed-main{flex:1;min-width:0;position:relative}

.ed-hl,.ed-ta{
  display:block;width:100%;margin:0;border:0;box-sizing:border-box;padding:10px var(--ed-px);min-height:var(--ed-min);
  font-family:var(--ed-font);font-size:var(--ed-size);line-height:var(--ed-lh);
  font-variation-settings:"MONO" var(--ed-mono);font-weight:400;font-style:normal;
  letter-spacing:0;word-spacing:0;text-indent:0;text-transform:none;
  font-kerning:none;font-variant-ligatures:none;font-feature-settings:"kern" 0,"liga" 0,"calt" 0,"dlig" 0;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;tab-size:4;
}
.ed-hl{position:absolute;top:0;left:0;pointer-events:none;color:var(--ed-ink);z-index:0}
.ed-ta{
  position:relative;z-index:1;resize:none;outline:none;background:transparent;overflow:hidden;
  color:transparent;caret-color:var(--accent);
}
.ed-ta::placeholder{color:var(--faint);opacity:1}
.ed-ta::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);color:transparent}

/* Zeilen */
.ed-hl .l.cur{background:var(--ed-cur);box-shadow:calc(var(--ed-px) * -1) 0 0 var(--ed-cur),var(--ed-px) 0 0 var(--ed-cur)}
.ed-hl .l-h1,.ed-hl .l-h2{background-image:linear-gradient(90deg,color-mix(in srgb,var(--syn-kw) 32%,transparent),transparent 75%);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat}
.ed-hl .l-code,.ed-hl .l-fence{background:var(--code-bg);box-shadow:calc(var(--ed-px) * -1) 0 0 var(--code-bg),var(--ed-px) 0 0 var(--code-bg)}
.ed-hl .l-code{color:var(--syn-str)}
.ed-hl .l-code.l-hlc{color:var(--ed-ink)}             /* mit Sprache: Grundfarbe neutral, Tokens farbig */

/* Tokens */
.t-mk{color:var(--ed-mk)}
.t-hm{color:var(--syn-kw)}
.t-h{color:var(--ed-strong)}
:root[data-uniwidth] .t-h{font-weight:720}
.l-h1 .t-h{text-shadow:0 0 18px color-mix(in srgb,var(--syn-kw) 40%,transparent)}
.t-b{color:var(--ed-strong)}
:root[data-uniwidth] .t-b{font-weight:700}
.t-i{color:var(--ed-strong);font-style:oblique 11deg}
.t-s{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--ed-mk)}
.t-code{color:var(--code-ink);background:color-mix(in srgb,var(--panel-3) 85%,transparent);border-radius:4px}
.t-link,.t-wiki{color:var(--accent)}
.t-url{color:color-mix(in srgb,var(--accent) 60%,var(--ed-mk));text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.t-tag{color:var(--violet)}
.t-li{color:var(--accent)}
:root[data-uniwidth] .t-li{font-weight:800}
.t-num{color:var(--syn-num)}
.t-box{color:var(--muted)}
.t-box.done{color:var(--ok)}
.t-donetxt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--ed-mk)}
.t-q{color:var(--syn-kw)}
.t-qt{color:var(--ed-quote);font-style:oblique 8deg}
.t-fence{color:var(--syn-kw)}
.t-pipe{color:var(--ed-mk)}
/* Formeln: TeX in Himmelblau, Befehle (\frac, \alpha) in der Schlüsselwortfarbe,
   Blöcke ($$ … $$) mit eigenem Band wie Code. Kommentare (%%…%%) blass. */
.t-math{background:color-mix(in srgb,var(--neon-sky) 9%,transparent);border-radius:4px}
.t-mx{color:var(--neon-sky)}
.t-mcmd{color:var(--syn-kw)}
.ed-hl .l-math{background:color-mix(in srgb,var(--neon-sky) 7%,transparent);box-shadow:calc(var(--ed-px) * -1) 0 0 color-mix(in srgb,var(--neon-sky) 7%,transparent),var(--ed-px) 0 0 color-mix(in srgb,var(--neon-sky) 7%,transparent)}
.t-cmt{color:var(--faint);font-style:oblique 8deg}
/* Callout: [!typ] in seiner Farbe */
.t-co{color:var(--co);background:color-mix(in srgb,var(--co) 14%,transparent);border-radius:4px}
:root[data-uniwidth] .t-co{font-weight:700}
.t-cot{color:var(--ed-strong)}
.ed-hl .hl .t-b,.ed-hl .hl .t-i,.ed-hl .hl .t-link{color:inherit}
[data-tone="light"] .l-h1 .t-h{text-shadow:none}

/* Varianten */
.ed-qc{--ed-min:150px}
.ed-doc{--ed-min:320px}
.ed-essay{--ed-min:52vh;--ed-size:calc(var(--ed-fs) + 1px)}

/* ---------- Pure Reading: der gerenderte Text ----------
   Statt Textarea und Kopie zeigt der Editor hier den Text ohne
   Markdown-Zeichen — keine Textarea darüber, also dürfen Abstände,
   Balken und echte Links sein. Aussehen: siehe „Pure Reading“ unten. */
.ed.is-read > .ed-tools,.ed.is-read .ed-main,.ed:not(.is-read) .ed-view{display:none}
.ed-view{flex:1;min-width:0;position:relative;min-height:var(--ed-min);padding:10px var(--ed-px) 14px;outline:none}
.ed-empty{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-top:2px}
.ed-md{font-size:calc(var(--ed-size) - 1.5px);line-height:1.7}
.ed-md,.ed-md p,.ed-md li{color:var(--text)}

/* Knopf „Pure Reading“ — oben rechts am Fenster und im Kopf des Fokus-Modus */
.ed-pure-btn{
  flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text-2);background:transparent;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));transition:color .12s,border-color .12s,box-shadow .12s,background .12s;
}
.ed-pure-btn .ico{color:var(--accent)}
.ed-pure-btn:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:0 0 14px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.ed-fhead .ed-pure-btn{height:32px;padding:0 12px;border-radius:10px}
/* Im schmalen Inspektor nur das Symbol */
.dp-bar{container-type:inline-size}
@container (max-width:430px){.dp-pure span{display:none}.dp-pure{padding:0 7px}}

/* Knopf „Fokus-Modus“ — oben links am jeweiligen Fenster */
.ed-fbtn{
  flex:none;width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--muted);
  display:grid;place-items:center;padding:0;transition:color .12s,background .12s,border-color .12s;
}
.ed-fbtn:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.ed-fbtn.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.ed-fbtn .ico{display:block}

/* ---------- Suche im Text ---------- */
/* Gleichartiges markieren: Leiste unter der Toolbar, solange eine Art
   ausgewählt ist. Nicht anwendbare Knöpfe treten währenddessen zurück. */
.ed:not(.is-msel) .ed-msel{display:none}
.ed-msel{
  display:flex;align-items:center;gap:6px;padding:5px 6px 5px 4px;margin:0 0 6px;position:sticky;top:0;z-index:5;
  border:1px solid color-mix(in srgb,var(--syn-kw) 34%,var(--line));border-radius:11px;
  background:color-mix(in srgb,var(--panel-2) 92%,transparent);backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);font-family:var(--sans);font-size:12.5px;color:var(--text-2);
}
.ed-msel .ico-wrap{color:var(--syn-kw)}
.ed-msel-txt b{font-family:var(--mono);color:var(--syn-kw);margin-right:3px}
.ed-msel-hint{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed.is-msel > .ed-tools .et-btn[data-f="h"],
.ed.is-msel > .ed-tools .et-btn[data-f="link"],
.ed.is-msel > .ed-tools .et-btn[data-f="ul"],
.ed.is-msel > .ed-tools .et-btn[data-f="ol"],
.ed.is-msel > .ed-tools .et-btn[data-f="task"],
.ed.is-msel > .ed-tools .et-btn[data-f="quote"],
.ed.is-msel > .ed-tools .et-btn[data-f="table"],
.ed.is-msel > .ed-tools .et-btn[data-f="callout"],
.ed.is-msel > .ed-tools .et-btn[data-f="math"]{opacity:.3;pointer-events:none}
.ed.is-msel > .ed-tools .et-btn[data-f="msel"]{background:color-mix(in srgb,var(--syn-kw) 18%,transparent);color:var(--syn-kw)}
::highlight(ed-msel){background-color:color-mix(in srgb,var(--syn-kw) 32%,transparent);color:var(--syn-kw)}
[data-tone="light"] ::highlight(ed-msel){background-color:color-mix(in srgb,var(--syn-kw) 24%,transparent);color:#3b1670}

.ed:not(.is-find) .ed-find{display:none}
.ed-find{
  display:flex;flex-direction:column;gap:2px;padding:4px 6px;margin:0 0 6px;position:sticky;top:0;z-index:5;
  border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--panel-2) 92%,transparent);
  backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);font-family:var(--sans);
}
.ed-find-row{display:flex;align-items:center;gap:4px}
.ed-find:not(.repl) .ed-rep-row{display:none}
.ed-rep-row{border-top:1px dashed var(--line-soft);padding-top:3px;margin-top:1px}
.ed-rep-inp{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--text);font-size:13px;padding:3px 2px}
.ed-rep-inp::placeholder{color:var(--faint)}
.ed-rep-row .btn{height:24px;padding:0 9px;font-size:11.5px}
.ed-find-rt .ico{transition:transform .15s}
.ed-find-rt.on .ico{transform:rotate(90deg)}
.ed.is-read .ed-find-rt{display:none}

/* Vorschläge nach # und [[ */
.ed-sug{
  position:fixed;z-index:120;min-width:220px;max-width:340px;overflow:auto;padding:4px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-pop);
  font-family:var(--sans);
}
.sug-item{
  display:flex;align-items:center;gap:7px;width:100%;padding:5px 8px;border:0;border-radius:7px;background:transparent;
  color:var(--text-2);font-size:12.5px;text-align:left;
}
.sug-item .ico{color:var(--c);flex:none}
.sug-hash{font-family:var(--mono);color:var(--c);font-weight:600}
.sug-glyph{flex:none;min-width:22px;text-align:center;font-family:"STIX Two Math","Cambria Math",var(--sans);font-size:14px;color:var(--neon-sky)}
.sug-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-item em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);flex:none}
.sug-item:hover{background:var(--panel-3);color:var(--text)}
.sug-item.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.ed-find .ico-wrap{display:grid;place-items:center;width:22px;color:var(--muted)}
.ed-find-inp{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--text);font-size:13px;padding:3px 2px}
.ed-find-inp::placeholder{color:var(--faint)}
.ed-find-n{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:0 6px;white-space:nowrap}
.ed-find.no-hit .ed-find-n{color:var(--danger)}
.ed.is-focus > .ed-find{width:min(960px,100%);flex:none;position:relative}
::highlight(ed-find){background-color:color-mix(in srgb,var(--neon-yellow) 28%,transparent);color:var(--neon-yellow)}
::highlight(ed-find-cur){background-color:var(--accent);color:var(--accent-ink)}
[data-tone="light"] ::highlight(ed-find){background-color:color-mix(in srgb,var(--neon-yellow) 45%,transparent);color:#4a3600}

/* ---------- Fokus-Modus ----------
   Der Editor wird zur Ebene über der App: abgedunkelt, die Seite
   zentriert, breiter, etwas größere Schrift. Kopf und Toolbar stehen
   fest, nur die Seite scrollt — nichts lugt über oder unter ihnen hervor. */
.ed-fhead,.ed-fstat{display:none}
.ed.is-focus{
  position:fixed;inset:0;z-index:95;margin:0 !important;
  display:flex;flex-direction:column;align-items:center;overflow:hidden;
  padding:4.5vh 24px 16px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px) saturate(1.1);
  --ed-min:calc(95.5vh - 250px);--ed-size:calc(var(--ed-fs) + 2px);--ed-px:34px;
  animation:edFocusIn .2s ease-out;
}
@keyframes edFocusIn{from{opacity:0}}
.ed.is-focus > .ed-fhead,.ed.is-focus > .ed-tools,.ed.is-focus > .ed-body{width:min(960px,100%);flex:none}
.ed.is-focus > .ed-fhead{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:0 2px}
.ed-fhead .ed-fbtn{width:34px;height:34px;border-radius:10px}
.ed-ftitles{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ed-fkicker,.olf-kicker{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--syn-kw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-ftitle,.olf-title{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Titel im Vollbild zum Bearbeiten: sieht aus wie der Titel, eine feine Linie verrät das Feld */
.ed-ftitle-inp{display:block;width:100%;min-width:0;margin:0;padding:0 0 2px;line-height:1.3;background:transparent;border:0;border-radius:0;outline:none;box-shadow:0 1px 0 transparent;transition:box-shadow .12s}
.ed-ftitle-inp:hover{box-shadow:0 1px 0 var(--line)}
.ed-ftitle-inp:focus{box-shadow:0 1px 0 var(--accent)}
.ed-ftitle-inp::placeholder{color:var(--muted);font-weight:600}
.ed.is-focus > .ed-tools{position:relative;margin:0 0 10px !important}
.ed.is-focus > .ed-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 8px 24px 6px;
  box-shadow:var(--shadow-pop),inset 0 1px 0 rgba(255,255,255,.04);
}
.ed.is-focus .ed-gutter{border-right-color:transparent}
.ed.is-focus > .ed-fstat{
  display:flex;gap:14px;margin-top:12px;align-self:center;flex:none;
  padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 92%,transparent);
  box-shadow:var(--shadow-sm);font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;
}
.ed-fstat > span + span{padding-left:14px;border-left:1px solid var(--line)}
.ed-fstat kbd{font-size:9.5px;border-bottom-width:1px;margin-right:3px}

/* ---------- Pure Reading ----------
   Fokus + gerenderter Text ohne Drumherum: Kopf, Toolbar und Zeilennummern weg,
   die leuchtende Kachel reicht bis oben. Oben in ihr klebt nur noch
   Projekt · Typ · Titel (wie der Pfad einer geöffneten Capture-Notiz),
   gescrollt wird in der Kachel, ihre Ränder bleiben stehen. Farbe: selbst
   gewählt (--pure), sonst Tag (--glow), Typ (--tc), Kategorie (--c). */
.ed-phead{display:none}
.ed.is-pure{--pg:var(--pure,var(--glow,var(--tc,var(--c,var(--accent)))));padding-top:3vh}
.ed.is-pure > .ed-fhead,.ed.is-pure > .ed-tools,.ed.is-pure .ed-gutter{display:none !important}
.ed.is-focus.is-pure > .ed-body{
  display:block;width:min(900px,100%);padding:0 0 30px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--pg) 34%,var(--line));
  /* Lichtkante und Tönung hängen an der Kachel, nicht am Text — sie scrollen nicht mit */
  background:
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--pg) 85%,transparent),transparent) 50% 0 / calc(100% - 56px) 1px no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--pg) 11%,var(--panel)) 0%,var(--panel) 40%);
  box-shadow:var(--shadow-pop),0 0 64px -20px color-mix(in srgb,var(--pg) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.04);
}
.ed.is-pure .ed-phead{
  display:block;position:sticky;top:0;z-index:7;padding:15px 30px 12px;
  background:color-mix(in srgb,var(--pg) 11%,var(--panel));border-bottom:1px dashed color-mix(in srgb,var(--pg) 22%,var(--line-soft));
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--syn-kw);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ed.is-pure .ed-ol{top:52px;margin-left:4px}
.ed.is-pure .ed-view{
  min-height:0;padding:22px 48px 8px 40px;
  font-size:calc(var(--ed-size) - .5px);line-height:1.74;
}
.ed.is-pure .ed-view h1{font-size:1.75em;letter-spacing:-.02em}
.ed.is-pure .ed-view blockquote{border-left-color:var(--pg)}
.ed.is-pure .ed-view hr{border-top-color:color-mix(in srgb,var(--pg) 32%,var(--line))}
.ed.is-focus.is-pure > .ed-fstat{margin-top:14px}

/* Schlicht (Knopf in der Leiste, :root[data-pure="plain"]) — und immer im PDF (.pr-body,
   print.html): statt der leuchtenden
   Kachel die Fläche des Editors im Fokus, dazu Schrift, Farben und Zeilenhöhe
   des Editors — gesetzt wie ein Dokument (Absätze, Überschriften mit etwas
   Größe), nur ohne Markdown-Zeichen. Gleiches Layout, nichts leuchtet. */
:root[data-pure="plain"] .ed.is-focus.is-pure > .ed-body{
  border-color:var(--line);background:var(--panel);
  box-shadow:var(--shadow-pop),inset 0 1px 0 rgba(255,255,255,.04);
}
:root[data-pure="plain"] .ed.is-pure .ed-phead{background:var(--panel);border-bottom-color:var(--line-soft)}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body){
  font-family:var(--ed-font);font-variation-settings:"MONO" var(--ed-mono);
  font-size:var(--ed-size);line-height:var(--ed-lh);color:var(--ed-ink);
}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) :is(p,li){color:var(--ed-ink)}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) p{margin-bottom:.8em}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) .md-co-body > :last-child{margin-bottom:0}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) :is(h1,h2,h3,h4,h5,h6){color:var(--ed-strong);font-weight:720;letter-spacing:-.01em;line-height:1.35;margin:1.2em 0 .5em}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) > :first-child{margin-top:0}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) h1{font-size:1.45em}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) h2{font-size:1.2em}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) h3{font-size:1.06em}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) :is(h4,h5,h6){font-size:1em}
/* Unterstrich wie im Editor: ein feiner Verlauf in der Schlüsselwortfarbe */
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) :is(h1,h2){
  padding-bottom:.28em;
  background:linear-gradient(90deg,color-mix(in srgb,var(--syn-kw) 32%,transparent),transparent 75%) 0 100% / 100% 1px no-repeat;
}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) :is(strong,em){color:var(--ed-strong)}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) strong{font-weight:700}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) em{font-style:oblique 11deg}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) li::marker{color:var(--accent)}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) ol > li::marker{color:var(--syn-num)}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) blockquote{border-left:2px solid color-mix(in srgb,var(--syn-kw) 60%,transparent);color:var(--ed-quote);font-style:oblique 8deg}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) hr{border-top-color:var(--line)}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) code{font-family:var(--ed-font);font-variation-settings:"MONO" 1;font-size:.9em}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) pre.md-code{font-family:var(--ed-font);font-variation-settings:"MONO" 1;color:var(--syn-str);border-color:var(--line-soft)}
:is(:root[data-pure="plain"] .ed.is-pure .ed-view,.pr-body) pre.md-code.hlc{color:var(--ed-ink)}

/* ---------- Lesefenster (reader.html) ----------
   Pure Reading füllt das ganze Fenster: kein abgedunkelter Hintergrund (dahinter
   liegt nichts außer dem Theme), weniger Rand. Schwebend (data-float) noch knapper. */
html[data-reader] .ed.is-focus{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:14px 16px 10px;animation:none}
html[data-reader] .ed.is-pure{padding-top:14px}
html[data-reader] .ed.is-focus.is-pure > .ed-fstat{margin-top:10px;max-width:calc(100% - 8px);overflow-x:auto;scrollbar-width:none}
html[data-float] .ed.is-focus{padding:6px}
html[data-float] .ed.is-pure{padding-top:6px}
html[data-float] .ed.is-focus.is-pure > .ed-body{border-radius:12px}
html[data-float] .ed.is-pure .ed-view{padding:14px 18px 8px}
html[data-float] .ed.is-pure .ed-phead{padding:10px 18px 9px}
html[data-float] .ed.is-pure .ed-ol{display:none}
html[data-float] .ed.is-focus.is-pure > .ed-fstat{margin-top:6px;gap:8px;padding:4px 10px}
html[data-float] .ed-fstat > span + span{padding-left:8px}
html[data-float] .ed-look span,html[data-float] .ed-fstat > .ed-fw,html[data-float] .ed-pdf{display:none}
/* Hinweise im Lesefenster: Dokument gelöscht · liest gerade im Vordergrund */
.rd-note{position:fixed;inset:0;display:grid;place-items:center;padding:24px}
.rd-note-in{
  max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 26px;text-align:center;
  border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-pop);color:var(--muted);
}
.rd-note-in > .ico{color:var(--accent)}
.rd-note-t{font-size:17px;font-weight:650;color:var(--text)}
.rd-note-in p{margin:0 0 6px;font-size:13px;line-height:1.55}

/* Knopf „Schlicht“ rechts neben der Lesezeit */
.ed-fstat > .ed-lookw{display:inline-flex;align-items:center;gap:6px}
.ed-look{
  display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:11px;
  border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;cursor:pointer;
  transition:color .12s,background .12s,border-color .12s;
}
.ed-look:hover{color:var(--text);background:var(--panel-3)}
.ed-look.on{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ed-look.on .ico{color:var(--accent)}
@media (max-width:640px){.ed-look span{display:none}}

/* Farbpunkt vor dem Wortzähler — beim Überfahren die Farben der App */
.ed-pcol{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.ed-pdot{
  width:12px;height:12px;border-radius:50%;background:var(--pg);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pg) 24%,transparent),0 0 10px color-mix(in srgb,var(--pg) 75%,transparent);
  transition:transform .12s;
}
.ed-pcol:hover .ed-pdot{transform:scale(1.15)}
.ed-pal{display:none;position:absolute;left:-14px;bottom:100%;padding-bottom:12px}   /* Abstand = Brücke für die Maus */
.ed-pcol:hover .ed-pal{display:block}
.ed-pal-in{
  display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:14px;
  background:color-mix(in srgb,var(--panel-2) 96%,transparent);border:1px solid var(--line);
  box-shadow:var(--shadow-pop);backdrop-filter:blur(10px);
}
.ed-pal button{
  width:17px;height:17px;flex:0 0 17px;border-radius:50%;border:0;padding:0;background:var(--c);cursor:pointer;
  box-shadow:0 0 8px -1px color-mix(in srgb,var(--c) 70%,transparent);transition:transform .12s;
}
.ed-pal button:hover{transform:scale(1.2)}
.ed-pal button.on{box-shadow:0 0 0 2px var(--panel-2),0 0 0 3.5px var(--c)}
.ed-pal .ed-pal-auto{
  --c:var(--panel-3);width:auto;flex:none;padding:0 7px;border-radius:9px;margin-left:3px;
  font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);
}
.ed-pal .ed-pal-auto.on{color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}

/* Anheften — gleich neben dem Farbpunkt. Ist ein anderes Dokument angeheftet,
   steht hier sein Titel in dessen Farbe; die Ebene darüber liegt auch über Fenstern. */
.ed.ed-layer.is-focus{z-index:100}
.ed-fstat > .ed-pinw{display:inline-flex;align-items:center}
.ed-fstat > .ed-pcol + .ed-pinw{border-left:0;padding-left:0;margin-left:-6px}
.ed.is-focus:not(.is-pure) > .ed-fstat > .ed-pinw{margin-block:-3px}   /* Editor: Leiste bleibt so hoch wie ohne Knopf */
.ed-pin{
  display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 7px;border-radius:11px;
  border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;cursor:pointer;
  transition:color .12s,background .12s,border-color .12s;
}
.ed-pin:hover{color:var(--text);background:var(--panel-3);border-color:var(--line)}
.ed-pin.go{color:var(--text-2)}
.ed-pin.go > .ico{color:var(--pt)}
.ed-pin.go:hover{border-color:color-mix(in srgb,var(--pt) 50%,var(--line));background:color-mix(in srgb,var(--pt) 12%,var(--panel-2))}
.ed-pin.on{color:var(--pg);border-color:color-mix(in srgb,var(--pg) 45%,var(--line));background:color-mix(in srgb,var(--pg) 12%,transparent)}
.ed.is-focus:not(.is-pure) .ed-pin.on{--pg:var(--glow,var(--tc,var(--c,var(--accent))))}   /* im Editor: Farbe des Fensters */
.ed-pin-t{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-pin-x{display:none;place-items:center;width:14px;height:14px;margin-right:-3px;border-radius:50%;color:var(--muted)}
.ed-pin:hover .ed-pin-x{display:inline-grid}

/* Lesetimer — zweigeteilt (−10 % · Stoppuhr · +10 %), grau wie die Leiste, in der letzten Minute rot */
.ed-fstat > .ed-tmrw{display:inline-flex;align-items:center}
.ed-tmr{display:inline-flex;align-items:stretch;height:21px;border:1px solid var(--line);border-radius:11px;overflow:hidden;color:var(--muted)}
.ed-tmr > button{padding:0 8px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .12s,color .12s}
.ed-tmr > button:hover{background:var(--panel-3);color:var(--text)}
.ed-tmr > .ed-tmr-ico{display:grid;place-items:center;padding:0 6px;border-inline:1px solid var(--line);color:var(--faint)}
.ed-tmr > .ed-tmr-ico:hover{color:var(--text)}
.ed-tmr.run{align-items:center;gap:6px;padding:0 9px;background:transparent;color:var(--muted);font:inherit;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.ed-tmr.run:hover{background:var(--panel-3);color:var(--text)}
.ed-tmr.run .ico{color:var(--faint)}
.ed-tmr.run.last,.ed-tmr.run.last .ico{color:var(--danger)}
.ed-tmr.run.last{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.ed-tmr.run.done .ed-tmr-t{animation:tmrDone 1.2s ease-in-out infinite}
@keyframes tmrDone{50%{opacity:.35}}
.ed-pin-x:hover{color:var(--text);background:var(--line)}

/* ============================================================
   TAB 1 · CAPTURE
   ============================================================ */
.cap{padding:20px 24px 0}
.tagbar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:16px}
.tagbar-sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.tagchip{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 8px 0 12px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);color:var(--text-2);font-size:13px;font-weight:500;
  transition:background .14s,border-color .14s,color .14s,box-shadow .14s;user-select:none;position:relative;
}
.tagchip:hover{background:var(--panel-2);color:var(--text);border-color:var(--line-strong)}
.tc-hash{font-family:var(--mono);color:var(--c);font-weight:600}
.tc-n{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--panel-2);padding:0 6px;border-radius:6px;min-width:20px;text-align:center;line-height:18px}
.tagchip.active{
  background:color-mix(in srgb,var(--c,var(--accent)) 15%,var(--panel));color:var(--text);
  border-color:color-mix(in srgb,var(--c,var(--accent)) 55%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--accent)) 11%,transparent),0 6px 18px -10px var(--c,var(--accent));
}
.tagchip.active .tc-n{background:color-mix(in srgb,var(--c,var(--accent)) 25%,transparent);color:var(--text)}
.tc-all{--c:var(--accent)}
.tc-all .ico{color:var(--muted)}
.tc-add{border-style:dashed;color:var(--muted);background:transparent;padding:0 12px 0 10px;gap:5px}
.tc-archive{margin-left:auto;gap:6px;color:var(--muted)}
.tc-archive .ico{color:var(--muted)}
.tc-archive.active .ico{color:var(--text)}
.tagchip.dragging{opacity:.4}
.tagchip.drop-l::before,.tagchip.drop-r::after{content:'';position:absolute;top:4px;bottom:4px;width:2px;background:var(--accent);border-radius:2px}
.tagchip.drop-l::before{left:-5px}
.tagchip.drop-r::after{right:-5px}

.cap-scroll{flex:1;min-height:0;margin:0 -24px;padding:2px 24px 50px}
.masonry{display:flex;gap:14px;align-items:flex-start}
.masonry.is-empty{display:block}
.masonry-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}

.note{
  --c:var(--line-strong);
  position:relative;border-radius:14px;padding:13px 15px 9px;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--panel)) 0%,var(--panel) 62%);
  border:1px solid color-mix(in srgb,var(--c) 24%,var(--line));
  box-shadow:var(--neu);transition:transform .16s,box-shadow .16s,border-color .16s;
}
.note::before{
  content:'';position:absolute;left:14px;right:14px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 80%,transparent),transparent);opacity:.7;
}
.note:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 46%,var(--line));box-shadow:var(--neu-hover)}
.note.untagged{--c:var(--line-strong)}
.note.flash{animation:flash 1.1s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 2px var(--accent),0 0 30px -4px var(--accent)}100%{box-shadow:var(--neu)}}
.note-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;min-height:20px}
.note-tags{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.ntag{font-family:var(--mono);font-size:10.5px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);padding:1px 7px;border-radius:6px;white-space:nowrap}
.ntag-none{--c:var(--muted)}
.note-pinned{color:var(--accent);display:grid;place-items:center}
.note-time{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.note.archived{border-style:dashed}
.note.archived .note-title,.note.archived .note-body{opacity:.82}
.note-title{font-size:15px;font-weight:600;line-height:1.35;margin:0 0 6px;letter-spacing:-.01em;overflow-wrap:anywhere}
.note-body{max-height:320px;overflow:hidden;position:relative}
.note-body.clamped{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
.note .md blockquote{font-size:15px;line-height:1.5;border-left-color:var(--c)}
.note-yt{display:block;position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin:0 0 10px;background:#000;border:1px solid var(--line)}
.note-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .15s,transform .3s}
.note-yt:hover img{opacity:1;transform:scale(1.02)}
.note-yt.noimg{background:linear-gradient(135deg,#2a1216,#12151c)}
.yt-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.yt-play .ico{width:46px;height:34px;padding:7px 10px;background:rgba(220,30,40,.88);border-radius:9px;stroke:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.note-foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:7px;border-top:1px dashed var(--line-soft);min-height:30px}
.note-id{font-family:var(--mono);font-size:10px;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-acts{margin-left:auto;flex:none;display:flex;gap:2px;opacity:0;transition:opacity .14s}
.note:hover .note-acts{opacity:1}
.note-acts button{width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}
.note-acts button:hover{background:var(--panel-3);color:var(--text)}
.note-acts [data-act=del]:hover{color:var(--danger)}
.note.pinned .note-acts [data-act=pin]{color:var(--accent)}

/* Kompakte Liste — eine Zeile je Notiz, neben dem Masonry-Raster */
.masonry.as-list{display:flex;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--neu);overflow:hidden}
.nrow{
  --c:var(--line-strong);
  display:flex;align-items:center;gap:10px;min-height:40px;padding:5px 10px 5px 14px;cursor:pointer;position:relative;
  border-bottom:1px solid var(--line-soft);transition:background .12s;
}
.nrow:last-child{border-bottom:0}
.nrow:hover{background:color-mix(in srgb,var(--c) 6%,var(--panel-2))}
.nrow.flash{animation:flash 1.1s ease-out}
.nr-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px -1px color-mix(in srgb,var(--c) 70%,transparent)}
.nrow.archived .nr-dot{background:transparent;border:1px dashed var(--muted);box-shadow:none}
.nr-text{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.nr-text b{font-weight:600;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;max-width:60%}
.nr-text span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.nrow.archived .nr-text{opacity:.8}
.nr-tags{flex:none;display:flex;gap:4px;max-width:30%;overflow:hidden}
.nrow .note-imgs,.nrow .note-pinned{flex:none}
.nr-time{flex:none;width:92px;text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.nr-acts{position:absolute;right:6px;top:50%;transform:translateY(-50%);margin:0;padding-left:26px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 6%,var(--panel-2)) 26px)}
.nrow:hover .nr-acts{opacity:1}
.nrow.pinned .note-acts [data-act=pin]{color:var(--accent)}
@media (max-width:720px){.nr-tags{display:none}.nr-text span{display:none}.nr-time{width:auto}}

/* Wiederentdecken — Notizen von heute vor einem Monat / Jahr, über dem Raster */
.cap-back{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;padding:6px 8px 6px 12px;border:1px dashed var(--line);border-radius:11px;color:var(--muted);font-size:12px}
.cap-back[hidden]{display:none}
.cap-back > .ico{color:var(--accent);flex:none}
.cb-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.cb-grp{display:inline-flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
.cb-when{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-right:2px}
.cb-note{--c:var(--muted);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));background:color-mix(in srgb,var(--c) 8%,transparent);color:var(--text-2);
  border-radius:7px;padding:2px 9px;font-size:12px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cb-note:hover{color:var(--text);border-color:color-mix(in srgb,var(--c) 60%,var(--line))}
.cb-x{width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--faint);display:grid;place-items:center;cursor:pointer}
.cb-x:hover{background:var(--panel-3);color:var(--text)}

/* ---------- Monatsrückblick: Vollbild ---------- */
.mr-modal{height:min(94vh,1180px)}
.mr-modal .modal-body{padding:0;display:flex;overflow:hidden}
.mr{display:flex;flex-direction:column;width:100%;min-height:0}
.mr-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:18px 16px 18px 28px;border-bottom:1px solid var(--line-soft);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:
    radial-gradient(70% 160% at 0% 0%,color-mix(in srgb,var(--mr-cap) 17%,transparent),transparent 60%),
    radial-gradient(60% 160% at 100% 0%,color-mix(in srgb,var(--mr-ref) 15%,transparent),transparent 60%),var(--panel);
}
.mr-kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-2);align-self:center}
.mr-kicker em{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--mr-ref);border:1px solid color-mix(in srgb,var(--mr-ref) 40%,transparent);border-radius:6px;padding:0 6px}
.mr-nav{display:flex;align-items:center;gap:4px;grid-row:1 / span 2;grid-column:2;align-self:start}
.mr-nav .icon-btn:disabled{opacity:.35;pointer-events:none}
.mr-rail{display:flex;gap:2px;height:32px;padding:2px;margin-right:6px;border-radius:9px;background:var(--panel);border:1px solid var(--line)}
.mr-m{position:relative;display:inline-flex;align-items:baseline;gap:3px;padding:0 9px;border:0;border-radius:7px;background:transparent;
  color:var(--text-2);font-size:12px;line-height:26px;transition:background .14s,color .14s}
.mr-m em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.mr-m:hover{background:var(--panel-2);color:var(--text)}
.mr-m.quiet{color:var(--faint)}
.mr-m.on{background:var(--panel-3);color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--mr-ref)}
.mr-m.on em{color:var(--muted)}
.mr-m i{position:absolute;top:4px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--mr-ref)}
@media (max-width:820px){.mr-rail{display:none}}
.mr-title{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:4px 0 0}
.mr-title span{color:var(--muted);font-weight:500}
.mr-lead{grid-column:1 / -1;margin:6px 0 0;font-size:14px;color:var(--text-2);max-width:760px;line-height:1.55}
.mr-body{flex:1;min-height:0;padding:20px 28px 44px}
.mr-empty{padding:40px 4px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.mr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.mr-kpi{display:flex;flex-direction:column;gap:3px;padding:13px 15px 12px;border-radius:13px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--neu)}
.mr-kl{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.mr-kl i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.mr-kpi b{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--text)}
.mr-kpi b small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:2px}
.mr-ks{font-size:11.5px;color:var(--muted)}
.mr-kd{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.mr-kd.up{color:var(--ok)}
.mr-sec{margin-top:26px}
.mr-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 2px 9px;border-bottom:1px dashed var(--line-soft);margin-bottom:12px}
.mr-h h3{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-2);font-weight:600}
.mr-h > span{font-size:12px;color:var(--muted)}
.mr-legend{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.mr-legend i{margin-left:8px}
.mr-legend i.sq,.mr-cal i.sq,.mr-ch i.sq{width:8px;height:8px;border-radius:2px;background:var(--mr-cap);display:inline-block;flex:none}
.mr-legend i.ci,.mr-ch i.ci{width:8px;height:8px;border-radius:50%;background:var(--mr-ref);display:inline-block;flex:none}
.mr-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mr-wd{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:left;padding:0 4px 2px}
.mr-day{min-height:56px;display:flex;flex-direction:column;justify-content:space-between;padding:6px 7px 7px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line-soft);transition:border-color .12s,background .12s}
.mr-day.we{background:color-mix(in srgb,var(--bg-soft) 70%,var(--panel-3))}
.mr-day.on{background:var(--panel);border-color:var(--line)}
.mr-day:hover{border-color:var(--line-strong)}
.mr-day.today{box-shadow:inset 0 0 0 1.5px var(--mr-ref)}
.mr-day.future{opacity:.4}
.mr-dn{font-family:var(--mono);font-size:11px;color:var(--muted)}
.mr-day.on .mr-dn{color:var(--text)}
.mr-marks{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.mr-cal i.ci{width:8px;height:8px;border-radius:50%;background:var(--k);display:inline-block}
.mr-marks em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--muted);margin-right:2px}
.mr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px;align-items:start}
@media (max-width:900px){.mr-cols{grid-template-columns:1fr}}
.mr-col{position:relative;padding:15px 18px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--neu);min-width:0}
.mr-col::before{content:'';position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.8}
.mr-ch{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mr-ch h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
.mr-ch > span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.mr-ch i.sq,.mr-ch i.ci{width:10px;height:10px}
.mr-sub{display:flex;align-items:center;gap:6px;margin:18px 0 9px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.mr-sub span{text-transform:none;letter-spacing:0;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-none{margin-top:12px;font-size:12.5px;color:var(--muted)}
.mr-bars{display:flex;flex-direction:column;gap:7px}
.mr-bar{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr);align-items:center;gap:12px}
.mr-bl{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--text-2)}
.mr-bl i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--k)}
.mr-bl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-bt{display:flex;align-items:center;gap:8px;min-width:0}
.mr-bt b{display:block;height:10px;border-radius:0 4px 4px 0;background:var(--k);flex:none;width:calc((100% - 118px) * var(--p))}
.mr-bt em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text);white-space:nowrap}
.mr-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mr-facts > span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line-soft);font-size:11.5px;color:var(--text-2)}
.mr-facts .ico{color:var(--muted)}
.mr-facts b{font-family:var(--mono);color:var(--text);font-weight:600}
.mr-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.mr-note{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px 9px;border-radius:10px;cursor:pointer;color:var(--text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--k) 9%,var(--panel-2)) 0%,var(--panel-2) 70%);border:1px solid color-mix(in srgb,var(--k) 22%,var(--line));transition:.14s}
.mr-note:hover{border-color:color-mix(in srgb,var(--k) 55%,var(--line));transform:translateY(-1px)}
.mr-nt{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-nt .ico{color:var(--accent);flex:none}
.mr-nx{font-size:12px;color:var(--text-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mr-nm{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px}
.mr-mood-plot{min-height:140px}
.mr-habits{display:flex;flex-direction:column;gap:9px}
.mr-habit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.mr-hq{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-hv{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.mr-hv > b{font-family:var(--mono);color:var(--text);font-weight:600}
.mr-meter{width:80px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--mr-ref) 18%,var(--panel-3));overflow:hidden}
.mr-meter b{display:block;height:100%;border-radius:3px;background:var(--mr-ref)}
.mr-hls{display:flex;flex-direction:column;gap:4px}
.mr-hl{display:flex;align-items:baseline;gap:9px;text-align:left;padding:6px 8px;border-radius:8px;border:0;background:transparent;color:var(--text);cursor:pointer;font-size:13px}
.mr-hl:hover{background:var(--panel-2)}
.mr-hl i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--k);transform:translateY(-1px)}
.mr-hl em{flex:none;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);width:78px}
.mr-hl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px 24px}
.mr-voices .mr-h{margin-bottom:10px}
.mr-chips{display:flex;flex-wrap:wrap;gap:6px}
.mr-chip{padding:4px 11px;border-radius:999px;font-size:12.5px;color:var(--text);background:color-mix(in srgb,var(--mr-ref) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--mr-ref) 26%,var(--line))}
.mr-chip.more{color:var(--muted);background:transparent}
.mr-quotes{display:flex;flex-direction:column;gap:8px}
.mr-quote{display:flex;flex-direction:column;gap:3px;text-align:left;padding:8px 12px;border:0;border-left:2px solid color-mix(in srgb,var(--mr-ref) 60%,transparent);border-radius:0 9px 9px 0;
  background:color-mix(in srgb,var(--mr-ref) 5%,transparent);color:var(--text);cursor:pointer;font-size:13.5px;line-height:1.5}
.mr-quote:hover{background:color-mix(in srgb,var(--mr-ref) 10%,transparent)}
.mr-quote em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ---------- Schnellerfassung ---------- */
/* ---------- Notiz-Ansicht ----------
   Die Kachel aus dem Raster, nur groß: gleicher Farbsaum, gleiche
   Kopf- und Fußzeile. Das Fenster selbst tritt zurück, damit die
   Kachel das Gehäuse ist. */
.nv-modal .modal{background:transparent;border:0;box-shadow:none;transform:translateY(10px) scale(.96)}
.nv-modal .modal-body{padding:0;overflow:hidden;display:flex;min-height:min(46vh,520px)}
.nv{
  --c:var(--line-strong);
  flex:1;min-width:0;display:flex;flex-direction:column;position:relative;
  border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--panel)) 0%,var(--panel) 42%);
  border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));
  box-shadow:var(--shadow-pop),0 0 44px -14px color-mix(in srgb,var(--c) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.04);
}
.nv::before{
  content:'';position:absolute;left:26px;right:26px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 85%,transparent),transparent);
}
.nv.archived{border-style:dashed}
.nv-bar{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 16px;border-bottom:1px dashed var(--line-soft)}
.nv-edit{gap:6px;color:var(--text-2);border-color:color-mix(in srgb,var(--c) 34%,var(--line))}
.nv-edit:hover{color:var(--text);border-color:color-mix(in srgb,var(--c) 55%,var(--line))}
.nv-edit kbd{font-size:9.5px;border-bottom-width:1px;margin-left:2px}
.nv-scroll{flex:1;min-height:0;overflow:auto;padding:16px 26px 10px;outline:none}
.nv-title{font-size:25px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:4px 0 12px;overflow-wrap:anywhere}
.nv .note-head{margin-bottom:12px}
.nv .ntag,.nv .note-time{font-size:11px}
.nv .note-body{max-height:none;overflow:visible;font-size:14.5px;line-height:1.72}
.nv .note-body.clamped{-webkit-mask-image:none;mask-image:none}
.nv .md blockquote{border-left-color:var(--c)}
.nv .note-yt{max-width:520px}
.nv-empty{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.nv .note-foot{margin:0;padding:9px 16px;border-top:1px dashed var(--line-soft)}
.nv .note-acts{opacity:1}
.nv .note-acts button{width:30px;height:30px}

.qc-modal .modal-body{padding:0}
.qc{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 60px)}
.qc-bar{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 10px;border-bottom:1px solid var(--line-soft)}
.qc-path{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;white-space:nowrap}
.qc-path b{color:var(--text-2);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.qc-new{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);padding:0 6px;border-radius:5px}
.qc-title{width:100%;border:0;outline:none;background:transparent;font-size:20px;font-weight:700;letter-spacing:-.02em;padding:14px 20px 2px 58px;color:var(--text)}
.qc-title::placeholder{color:var(--faint);font-weight:600}
.qc-scroll{max-height:48vh;overflow:auto;padding:2px 10px 6px 2px;flex:1;min-height:0}
.qc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 16px 12px 58px;border-top:1px dashed var(--line-soft)}
.qc-label{font-family:var(--mono);font-size:11px;color:var(--syn-kw);margin-right:2px;margin-left:-40px;width:34px}
.qtag{
  display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);font-size:12px;font-weight:500;transition:.12s;
}
.qtag span{font-family:var(--mono);color:var(--c)}
.qtag:hover{color:var(--text);border-color:var(--line-strong)}
.qtag.on{background:color-mix(in srgb,var(--c) 18%,var(--panel));border-color:color-mix(in srgb,var(--c) 60%,var(--line));color:var(--text);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 12%,transparent)}
.qtag-add{border-style:dashed;background:transparent;color:var(--muted);gap:4px}
.qc-foot{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-top:1px solid var(--line-soft);background:var(--bg-soft);border-radius:0 0 var(--r-lg) var(--r-lg)}
.qc-meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
.qc-auto{color:var(--accent)}

/* ============================================================
   TAB 2 · RESEARCH
   ============================================================ */
.rs{display:grid;grid-template-columns:236px minmax(0,1fr);height:100%}
.rs-rail{background:var(--bg-soft);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:12px 10px 0;overflow:auto;gap:2px}
.rail-head{display:flex;align-items:center;padding:2px 4px 10px 8px}
.rail-title{flex:1;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.rail-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--text-2);font-size:13px;text-align:left;transition:background .12s,color .12s;
}
.rail-item:hover{background:var(--panel);color:var(--text)}
.rail-item.active{background:var(--panel);border-color:var(--line);color:var(--text);box-shadow:inset 3px 0 0 var(--c,var(--accent)),var(--neu)}
.rail-item .ico{color:var(--muted)}
.rail-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent)}
.rail-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-n{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.rail-sec{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding:14px 8px 5px;background:none;border:0;width:100%;text-align:left}
.rail-sec-btn:hover{color:var(--text-2)}
.rail-sec .rail-n{margin-left:auto}
.rail-list{display:flex;flex-direction:column;gap:1px}
.rail-grp{
  display:flex;align-items:center;gap:4px;padding:13px 4px 4px 6px;position:relative;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--c,var(--muted));
}
.rail-ghandle{display:grid;place-items:center;width:14px;color:var(--faint);opacity:0;cursor:grab}
.rail-grp:hover .rail-ghandle{opacity:1}
.rail-gname{display:flex;align-items:center;gap:5px;flex:1;min-width:0;background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left}
.rail-gname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-gname .ico{transition:transform .15s;flex:none}
.rail-grp.closed .rail-gname .ico{transform:rotate(-90deg)}
.rail-gmore{opacity:0;border-color:transparent;background:transparent}
.rail-grp:hover .rail-gmore{opacity:1}
.rail-hint{font-size:11.5px;color:var(--faint);border:1px dashed var(--line);border-radius:8px;margin:2px 0;padding:7px 10px;text-align:center}
.rail-item.dragging,.rail-grp.dragging{opacity:.4}
.rail-item.drop-t::before,.rail-item.drop-b::after,.rail-grp.drop-t::before,.rail-grp.drop-b::after{
  content:'';position:absolute;left:6px;right:6px;height:2px;background:var(--accent);border-radius:2px;
}
.rail-item{position:relative}
.rail-item.drop-t::before,.rail-grp.drop-t::before{top:-1px}
.rail-item.drop-b::after,.rail-grp.drop-b::after{bottom:-1px}
.rail-list.drop-in{background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:9px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.rail-archived .rail-item{opacity:.65}
.rail-empty{font-size:12px;color:var(--muted);padding:6px 10px}
/* Die Typen-Legende bleibt unten stehen, die Projekte scrollen darunter durch */
.rail-foot{
  margin-top:auto;position:sticky;bottom:0;z-index:2;padding:12px 6px 14px;
  background:var(--bg-soft);border-top:1px dashed var(--line-soft);box-shadow:0 -14px 14px -8px var(--bg-soft);
}
.rail-legend{display:flex;flex-wrap:wrap;gap:5px 9px;font-family:var(--mono);font-size:10px}
.rail-legend span{display:inline-flex;align-items:center;gap:4px;color:var(--c);opacity:.85}

.rs-main{min-width:0;height:100%;overflow:hidden;position:relative}
.rs-over{height:100%;padding:20px 26px 50px}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pcard{
  display:flex;flex-direction:column;gap:10px;padding:15px 16px 13px;border-radius:var(--r-lg);cursor:pointer;min-height:262px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 11%,var(--panel)) 0%,var(--panel) 64%);
  border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));box-shadow:var(--neu);transition:transform .16s,box-shadow .16s,border-color .16s;
  text-align:left;color:var(--text);
}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--neu-hover);border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.pc-head{display:flex;align-items:center;gap:10px}
.pc-head h3{font-size:15.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent),0 0 12px var(--c);flex:none}
.pc-more{opacity:0}
.pcard:hover .pc-more{opacity:1}
.pc-desc{margin:0;font-size:12.5px;color:var(--text-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}
.pc-preview{
  height:98px;border-radius:10px;border:1px solid var(--line-soft);overflow:hidden;
  background:radial-gradient(circle,var(--grid-dot) 1px,transparent 1.2px) 0 0/14px 14px,color-mix(in srgb,var(--bg) 70%,transparent);
}
.pc-preview svg{width:100%;height:100%;display:block}
.pv-lines line{stroke:color-mix(in srgb,var(--c) 45%,var(--line-strong));stroke-width:1}
.pv-root{filter:drop-shadow(0 0 5px var(--c))}
.pc-noprev{height:100%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--syn-com)}
.pc-typebar{display:flex;gap:2px;height:5px;border-radius:3px;overflow:hidden}
.pc-typebar i{background:var(--c);display:block}
.pc-legend{display:flex;flex-wrap:wrap;gap:3px 10px;font-family:var(--mono);font-size:10.5px}
.pc-legend span{color:var(--c)}
.pc-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted);border-top:1px dashed var(--line-soft);padding-top:9px;margin-top:auto}
.pc-foot > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-foot > :last-child{text-align:right}
.pc-grp{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--c);padding:2px 10px;border-radius:7px;
  background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 38%,transparent);
  box-shadow:0 0 15px -2px color-mix(in srgb,var(--c) 70%,transparent),inset 0 0 10px -5px color-mix(in srgb,var(--c) 85%,transparent);
  text-shadow:0 0 10px color-mix(in srgb,var(--c) 45%,transparent);transition:box-shadow .16s,background .16s;white-space:nowrap;
}
.pcard:hover .pc-grp{background:color-mix(in srgb,var(--c) 20%,transparent);box-shadow:0 0 18px -2px color-mix(in srgb,var(--c) 80%,transparent),inset 0 0 12px -5px color-mix(in srgb,var(--c) 90%,transparent)}
[data-tone="light"] .pc-grp{text-shadow:none;box-shadow:none;color:color-mix(in srgb,var(--c) 70%,#000)}
.pcard-new{
  align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--line);background:transparent;box-shadow:none;color:var(--muted);font-size:13.5px;font-weight:500;
}
.pcard-new em{font-style:normal;font-size:12px;color:var(--faint);font-weight:400}
.pcard-new:hover{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 5%,transparent)}

.recent{margin-top:30px}
.recent-list{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:5px;box-shadow:var(--neu)}
.recent-row{
  display:grid;grid-template-columns:24px minmax(160px,1.1fr) minmax(0,2fr) auto 90px;align-items:center;gap:14px;
  padding:8px 10px;border-radius:8px;border:0;background:transparent;color:var(--text);text-align:left;
}
.recent-row:hover{background:var(--panel-2)}
.rr-ico{color:var(--tc);display:grid;place-items:center}
.rr-title{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-ex{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-proj{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--text-2);white-space:nowrap}
.rr-proj i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.rr-time{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-align:right}

/* ---------- Projekt ---------- */
.proj{height:100%;display:flex;flex-direction:column;min-height:0}
.proj-head{
  display:flex;align-items:flex-end;gap:16px;padding:14px 20px 13px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 8%,var(--bg)) 0%,var(--bg) 100%);flex-wrap:wrap;
}
.ph-main{min-width:0;flex:1}
.ph-crumbs{font-family:var(--mono);font-size:11px;color:var(--faint)}
.ph-crumbs b{color:var(--text-2);font-weight:500}
.ph-row{display:flex;align-items:center;gap:10px;margin:3px 0 5px}
.ph-dot{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent),0 0 14px var(--c);flex:none}
.ph-title{font-size:21px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
.ph-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.ph-desc{font-size:13px;color:var(--text-2);max-width:560px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-stats{display:flex;gap:5px;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:1px 7px;border-radius:6px}
.stat b{color:var(--text);font-weight:600}
.stat-t i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.ph-actions{display:flex;align-items:center;gap:8px}
.ph-actions .filter{width:220px}
.proj-body{flex:1;min-height:0;position:relative}

/* ---------- Listenansicht ---------- */
.lv{display:grid;grid-template-columns:minmax(0,1fr);height:100%}
.lv.has-pane{grid-template-columns:minmax(360px,1fr) minmax(440px,48%)}
.lv-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.lv.has-pane .lv-main{border-right:1px solid var(--line)}
.lv-bar{display:flex;align-items:center;gap:8px;padding:9px 18px;border-bottom:1px solid var(--line-soft)}
.lv-lbl{font-family:var(--mono);font-size:10.5px;color:var(--syn-kw);margin-left:6px}
.lv-lbl:first-child{margin-left:0}
.lv-count{font-family:var(--mono);font-size:11px;color:var(--muted)}
.lv-scroll{flex:1;min-height:0;padding:6px 10px 40px}
.lv-table{container-type:inline-size}
.lv-row{
  display:grid;grid-template-columns:minmax(0,1fr) 84px 150px 54px 92px;align-items:center;gap:12px;
  padding:6px 10px;border-radius:9px;border:1px solid transparent;cursor:pointer;outline:none;
}
.lv-row:hover{background:var(--panel)}
.lv-row.active{background:color-mix(in srgb,var(--tc) 9%,var(--panel));border-color:color-mix(in srgb,var(--tc) 36%,var(--line));box-shadow:var(--neu)}
.lv-headrow{
  cursor:default;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);
  padding:8px 10px 6px;position:sticky;top:-6px;background:var(--bg);z-index:2;border-radius:0;
}
.lv-headrow:hover{background:var(--bg)}
.lv-headrow span:last-child{text-align:right}
.lv-name{display:flex;align-items:center;gap:11px;min-width:0}
.lv-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--tc);background:color-mix(in srgb,var(--tc) 13%,transparent);border:1px solid color-mix(in srgb,var(--tc) 22%,transparent)}
.lv-tt{display:flex;flex-direction:column;min-width:0}
.lv-title{font-size:13.5px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-file{font-family:var(--mono);font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbadge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent);
  padding:1px 7px;border-radius:6px;white-space:nowrap;
}
.tbadge-btn{cursor:pointer;height:24px;padding:0 8px}
.tbadge-btn:hover{background:color-mix(in srgb,var(--c) 20%,transparent)}
.lv-tags{display:flex;gap:6px;overflow:hidden;font-family:var(--mono);font-size:10.5px;color:var(--violet);white-space:nowrap}
.lv-links{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.lv-date{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right;white-space:nowrap}
.lv-group{margin-bottom:4px}
.lv-ghead{
  display:flex;align-items:center;gap:7px;width:100%;padding:10px 8px 5px;background:transparent;border:0;
  font-family:var(--mono);font-size:12px;color:var(--text-2);text-align:left;
}
.lv-ghead > .ico:nth-child(2){color:var(--c)}
.lv-ghead .n{color:var(--faint);font-size:10.5px}
.lv-chev{color:var(--faint);transition:transform .15s}
.lv-group.closed .lv-chev{transform:rotate(-90deg)}
.lv-group.closed .lv-rows{display:none}
.lv-rows{padding-left:10px;border-left:1px dashed var(--line-soft);margin-left:13px}
@container (max-width:700px){
  .lv-row{grid-template-columns:minmax(0,1fr) 84px 84px}
  .lv-row > :nth-child(3),.lv-row > :nth-child(4){display:none}
}
@container (max-width:460px){
  .lv-row{grid-template-columns:minmax(0,1fr) 80px}
  .lv-row > :nth-child(2){display:none}
}
.lv-pane{display:none;min-width:0;min-height:0;background:var(--bg-soft)}
.lv.has-pane .lv-pane{display:flex;flex-direction:column}

/* ---------- Dokument-Panel ---------- */
.dp-host{display:flex;flex-direction:column;min-height:0;height:100%}
.dp{display:flex;flex-direction:column;height:100%;min-height:0}
.dp-bar{display:flex;align-items:center;gap:6px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--line-soft);background:var(--bg-soft)}
.dp-crumbs{font-family:var(--mono);font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dp-crumbs b{color:var(--text-2);font-weight:500}
.dp-scroll{flex:1;min-height:0;padding:16px 22px 50px 22px}
.dp-typerow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dp-bar .ed-fbtn{margin-right:2px}
.dp-stamp{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.dp-title{
  width:100%;border:0;outline:none;background:transparent;resize:none;overflow:hidden;color:var(--text);
  font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.3;padding:2px 0;
}
.dp-title::placeholder{color:var(--faint)}
.dp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 14px}
.dtag{display:inline-flex;align-items:center;gap:1px;font-family:var(--mono);font-size:11px;color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent);padding:1px 2px 1px 8px;border-radius:6px}
.dtag button{border:0;background:transparent;color:inherit;opacity:.5;display:grid;place-items:center;width:16px;height:16px;padding:0;border-radius:4px}
.dtag button:hover{opacity:1;background:color-mix(in srgb,var(--violet) 20%,transparent)}
.dp-taginp{border:0;outline:none;background:transparent;font-family:var(--mono);font-size:11px;color:var(--text);width:150px;padding:3px 2px}
.dp-taginp::placeholder{color:var(--faint)}
.dp-source{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:10px 12px 12px;margin-bottom:14px;box-shadow:var(--neu)}
.dp-src-head{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.dp-src-head .ico{color:var(--tc)}
.dp-src-head .btn{margin-left:auto;text-transform:none;letter-spacing:0;font-family:var(--sans)}
.dp-src-grid{display:flex;flex-wrap:wrap;gap:8px 10px}
.dp-src-grid label{flex:1 1 170px;display:flex;flex-direction:column;gap:3px;position:relative;min-width:0}
.dp-src-grid label.w-s{flex:0 1 92px}
.dp-src-grid label.w-f{flex:1 1 100%}
.dp-src-grid span{font-family:var(--mono);font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.dp-src-grid input{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12.5px;color:var(--text);outline:none;min-width:0}
.dp-src-grid input:focus{border-color:var(--accent)}
.dp-src-grid a{position:absolute;right:8px;bottom:6px;color:var(--accent)}
.dp-body{margin:0 -10px 0 -22px}
.dp-body .ed-tools{margin-left:22px;margin-right:10px}
.dp-links{margin-top:22px;padding-top:14px;border-top:1px dashed var(--line)}
.dlinks{display:flex;flex-wrap:wrap;gap:6px}
.dlink{
  display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 9px;border-radius:8px;background:var(--panel);
  border:1px solid var(--line);font-size:12.5px;color:var(--text-2);cursor:pointer;max-width:100%;transition:.12s;
}
.dlink > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlink .ico{color:var(--c);flex:none}
.dlink em{font-family:var(--mono);font-size:10px;color:var(--muted);font-style:normal;background:var(--panel-2);padding:0 5px;border-radius:4px}
.dlink button{border:0;background:transparent;color:var(--muted);opacity:0;width:18px;height:18px;padding:0;display:grid;place-items:center;border-radius:5px}
.dlink:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line));color:var(--text)}
.dlink:hover button{opacity:1}
.dlink button:hover{background:var(--panel-3);color:var(--danger)}
.dlink-root{cursor:default}
.dlink-add{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;border:1px dashed var(--line-strong);background:transparent;color:var(--muted);font-size:12.5px}
.dlink-add:hover{color:var(--text);border-color:var(--accent)}
.dp-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px;padding:30px;text-align:center}

/* ---------- Mindmap ---------- */
.mmw{display:flex;height:100%;position:relative}
.mm-host{flex:1;min-width:0;position:relative;container-type:inline-size}
.mm-side{width:0;overflow:hidden;border-left:0 solid var(--line);background:var(--bg-soft);transition:width .22s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.mmw.panel-open .mm-side{width:min(480px,44%);border-left-width:1px}
.mm{position:absolute;inset:0;overflow:hidden;outline:none;background:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
.mm-bg{position:absolute;inset:0;background-image:radial-gradient(circle,var(--grid-dot) 1.1px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.mm.panning{cursor:grabbing}
.mm.linking,.mm.linking *{cursor:crosshair !important}
.mm-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.mm-edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.mm-edge{fill:none;stroke:var(--c);stroke-linecap:round;opacity:.72;transition:opacity .15s}
.mm-edge.cross{stroke:var(--muted);stroke-dasharray:4 5;opacity:.7}
.mm-edge.sel{opacity:1;stroke:var(--accent);stroke-width:3px !important;filter:drop-shadow(0 0 4px var(--accent))}
.mm-edge.dim{opacity:.1}
.mm-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}
.mm-temp{fill:none;stroke:var(--c,var(--accent));stroke-width:2;stroke-dasharray:6 5;animation:dash .5s linear infinite}
/* Wo ein neuer Knoten landet, solange sein Typ gewählt wird */
.mm-ghost{
  position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;
  border:2px dashed var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);animation:ghostPulse 1.2s ease-in-out infinite;
}
@keyframes ghostPulse{50%{transform:scale(1.35);opacity:.55}}
@keyframes dash{to{stroke-dashoffset:-11}}
.mm-labels,.mm-nodes{position:absolute;left:0;top:0}
.mm-elabel{
  position:absolute;width:max-content;transform:translate(-50%,-50%);font-family:var(--mono);font-size:10.5px;padding:1px 7px;border-radius:6px;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--text-2);white-space:nowrap;cursor:pointer;
}
.mm-elabel.sel{border-color:var(--accent);color:var(--text)}

.mm-node{position:absolute;transform:translate(-50%,-50%);cursor:default;width:max-content}
.mm-node.t-doc{
  width:232px;padding:10px 12px 9px;border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,var(--panel)) 0%,var(--panel) 75%);
  border:1px solid color-mix(in srgb,var(--c) 34%,var(--line));box-shadow:var(--neu);
  transition:box-shadow .15s,border-color .15s,opacity .15s;
}
.mm-node.t-doc:hover{border-color:color-mix(in srgb,var(--c) 58%,var(--line));box-shadow:var(--neu-hover)}
.mm-type{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--tc);margin-bottom:5px}
.mm-no{font-weight:700;color:var(--text-2);background:color-mix(in srgb,var(--tc) 18%,transparent);padding:0 4px;border-radius:4px}
.mm-tag{margin-left:auto;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
.mm-title{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere;outline:none}
.mm-title .ph{color:var(--muted);font-style:italic;font-weight:400}
/* Neuer Knoten beim Benennen: leer zeigt er, was hier hingehört */
.mm-node.renaming .mm-title:empty::before{content:'Titel eingeben …';color:var(--faint);font-weight:400;font-style:italic;pointer-events:none}
.mm-ex{font-size:12px;color:var(--text-2);line-height:1.45;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mm-meta{display:flex;gap:10px;font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:7px}
.mm-meta span{display:inline-flex;align-items:center;gap:3px}
.mm.far .mm-ex,.mm.far .mm-meta,.mm.far .mm-tag,
.mm-node.tight .mm-ex,.mm-node.tight .mm-meta{display:none}   /* knapp: kein Platz für Auszug und Meta */
.mm-node.tight.selected{z-index:4}
.mm-node.tight.selected .mm-ex{display:-webkit-box}
.mm-node.tight.selected .mm-meta{display:flex}
.mm.far .mm-node.t-doc .mm-title{font-size:15px}

.mm-node.t-topic{
  display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;max-width:280px;
  background:color-mix(in srgb,var(--c) 15%,var(--panel));border:1.5px solid color-mix(in srgb,var(--c) 62%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 7%,transparent),var(--neu);transition:box-shadow .15s,opacity .15s;
}
.mm-node.t-topic .mm-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-node.t-topic.renaming .mm-title{white-space:pre-wrap}
.mm-hasnote{color:var(--c);opacity:.7;display:grid}

.mm-node.root{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 28px 15px;border-radius:18px;min-width:190px;max-width:340px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 34%,var(--panel-2)) 0%,color-mix(in srgb,var(--c) 12%,var(--panel)) 100%);
  border:1.5px solid color-mix(in srgb,var(--c) 72%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 9%,transparent),0 20px 44px -18px color-mix(in srgb,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
}
.mm-kicker{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:color-mix(in srgb,var(--c) 60%,var(--text))}
.mm-node.root .mm-title{font-size:17px;font-weight:700;text-align:center;letter-spacing:-.01em}

.mm-node.selected{outline:2px solid var(--accent);outline-offset:3px}
.mm-node.orphan{border-style:dashed}
.mm-node.collapsed.t-doc{box-shadow:4px 4px 0 -1px var(--panel-2),4px 4px 0 0 color-mix(in srgb,var(--c) 30%,var(--line)),var(--neu)}
.mm-node.dim{opacity:.22}
.mm-node.hit{box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 55%,transparent),var(--neu)}
.mm-node.link-target{outline:2px dashed var(--ok);outline-offset:4px}
.mm-node.drag{z-index:5;box-shadow:var(--shadow)}
.mm.dragging{cursor:grabbing}
.mm-node.renaming .mm-title{cursor:text;user-select:text;-webkit-user-select:text;background:var(--panel-3);border-radius:5px;padding:0 4px;margin:0 -4px;box-shadow:0 0 0 1px var(--accent);min-width:40px}

.mm-handle{
  position:absolute;top:50%;right:-6px;width:11px;height:11px;border-radius:50%;background:var(--c);border:2px solid var(--bg);
  transform:translateY(-50%);opacity:0;cursor:crosshair;transition:opacity .12s,transform .12s;z-index:2;
}
.mm-node.side-l .mm-handle{right:auto;left:-6px}
.mm-node.side-t .mm-handle,.mm-node.side-b .mm-handle{right:auto;left:50%;transform:translateX(-50%)}
.mm-node.side-t .mm-handle{top:-6px}
.mm-node.side-b .mm-handle{top:auto;bottom:-6px}
.mm-node:hover .mm-handle,.mm-node.selected .mm-handle{opacity:1}
.mm-handle:hover{transform:translateY(-50%) scale(1.45);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.mm-node.side-t .mm-handle:hover,.mm-node.side-b .mm-handle:hover{transform:translateX(-50%) scale(1.45)}
.mm-fold{
  position:absolute;top:50%;right:-30px;transform:translateY(-50%);height:18px;min-width:18px;padding:0 5px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--c) 55%,var(--line));background:var(--bg);color:var(--c);
  font-family:var(--mono);font-size:10px;line-height:16px;z-index:3;
}
.mm-node.side-l .mm-fold{right:auto;left:-30px}
.mm-node.side-t .mm-fold,.mm-node.side-b .mm-fold{right:auto;left:50%;transform:translateX(-50%)}
.mm-node.side-t .mm-fold{top:-28px}
.mm-node.side-b .mm-fold{top:auto;bottom:-28px}
.mm-fold:hover{background:var(--c);color:var(--bg)}

.mm-tools{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:4}
.mm-tools .btn{background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm)}
.mm-zoom{
  position:absolute;bottom:12px;right:12px;display:flex;align-items:center;gap:2px;padding:4px;z-index:4;
  background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-sm);
}
.mm-zoom .icon-btn,.mm-corner .icon-btn{border-color:transparent;background:transparent}
/* Vollbild — oben rechts, gleiche Kachel wie der Zoom unten rechts */
.mm-corner{
  position:absolute;top:12px;right:12px;display:flex;padding:4px;z-index:4;
  background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-sm);
}
.mm-corner .icon-btn.on{color:var(--accent)}
/* Das Kartenfenster samt Inspektor über der ganzen App — unter Modals (100), Menüs und Toasts */
.mmw.is-full{position:fixed;inset:0;z-index:60;height:auto;background:var(--backdrop);animation:mmFull .16s ease-out}
@keyframes mmFull{from{opacity:.55}}
.mm-pct{font-family:var(--mono);font-size:11px;min-width:48px;height:26px;background:transparent;border:0;color:var(--text-2);border-radius:6px}
.mm-pct:hover{background:var(--panel-2);color:var(--text)}
.mm-zsep{width:1px;height:18px;background:var(--line);margin:0 3px}
.mm-hints{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:14px;font-family:var(--mono);font-size:10.5px;
  color:var(--muted);white-space:nowrap;pointer-events:none;z-index:3;padding:5px 12px;border-radius:9px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line-soft);
}
.mm-hints span{display:inline-flex;align-items:center;gap:5px}
.mm-hints kbd{font-size:9.5px;padding:0 4px;border-bottom-width:1px}
@container (max-width:1020px){.mm-hints{display:none}}
.mm-mini{
  position:absolute;bottom:12px;left:12px;z-index:4;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);
}

/* ============================================================
   TAB 3 · REFLECTIONS
   ============================================================ */
.rf{padding:16px 22px 14px;gap:14px}
.tl-panel{
  flex:none;height:290px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-soft) 100%);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--neu);
}
.tl-head{display:flex;align-items:center;gap:10px 12px;padding:12px 14px 6px 18px;flex-wrap:wrap}
.tl-head > .spacer{flex:1 1 0;min-width:0}
.tl-title{display:flex;align-items:baseline;gap:10px}
.tl-title h2{font-size:16px;font-weight:700}
.tl-range{font-size:12.5px;color:var(--text-2)}
.tl-stats{display:flex;gap:6px;flex-wrap:wrap}
.stat-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:12px;color:var(--text-2);white-space:nowrap}
.stat-chip i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.stat-chip b{font-family:var(--mono);color:var(--text);font-weight:600}
.stat-fire .ico{color:var(--fire)}
.stat-fire.zero .ico{color:var(--muted)}
.tl-legend{display:flex;gap:2px;flex-wrap:wrap}
.tl-leg{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:7px;background:transparent;border:1px solid transparent;font-size:12px;color:var(--text-2)}
.tl-leg i{width:8px;height:8px;border-radius:50%;background:var(--c);border:1.5px solid var(--c)}
.tl-leg span{font-family:var(--mono);font-size:10px;color:var(--faint)}
.tl-leg:hover{background:var(--panel-2)}
.tl-leg.off{opacity:.45}
.tl-leg.off i{background:transparent}
.tl-ctrls{display:flex;align-items:center;gap:6px;margin-left:auto}
.zoomer{display:inline-flex;align-items:center;gap:1px;border:1px solid var(--line);border-radius:9px;padding:2px;background:var(--panel-2)}
.zoomer .icon-btn{border-color:transparent;background:transparent;width:24px;height:24px}
.zoomer-v{font-family:var(--mono);font-size:10.5px;min-width:56px;text-align:center;color:var(--text-2)}

.tl-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;position:relative;cursor:grab;scrollbar-width:thin}
.tl-scroll.grabbing{cursor:grabbing}
.tl-scroll::-webkit-scrollbar{height:8px}
.tl-canvas{position:relative;user-select:none}
.tl-we{position:absolute;top:0;background:color-mix(in srgb,var(--text) 2%,transparent)}
.tl-mline{position:absolute;top:0;width:1px;background:var(--line-soft)}
.tl-month{position:absolute;top:3px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.tl-axis{position:absolute;left:0;height:1px;background:var(--line-strong)}
.tl-tick{position:absolute;width:1px;height:7px;background:var(--line);transform:translateX(-50%)}
.tl-tick.has{background:var(--muted)}
.tl-day{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1.15;pointer-events:none}
.tl-day b{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--faint);font-weight:500}
.tl-day em{font-style:normal;font-size:13px;font-weight:600;color:var(--text-2);margin-top:1px;padding:0 5px;border-radius:6px}
.tl-day.we em{color:var(--muted)}
.tl-day.today b{color:var(--accent)}
.tl-day.today em{background:var(--accent-fill);color:var(--accent-ink);box-shadow:var(--today-glow,0 0 12px -2px var(--accent))}
.tl-now{position:absolute;width:1.5px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));transform:translateX(-50%);pointer-events:none}
.tl-now-l{position:absolute;top:2px;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--accent);background:var(--panel);padding:0 5px;border-radius:4px;pointer-events:none}
.tl-stem{position:absolute;width:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,transparent),color-mix(in srgb,var(--c) 25%,transparent));transform:translateX(-50%);pointer-events:none}
.tl-chip{
  position:absolute;height:30px;display:flex;align-items:center;gap:6px;padding:0 10px 0 11px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--c) 38%,var(--line));background:color-mix(in srgb,var(--c) 12%,var(--panel));
  color:var(--text);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;
  box-shadow:inset 3px 0 0 var(--c),0 8px 18px -12px rgba(0,0,0,.8);transition:transform .12s,background .12s,border-color .12s;
}
.tl-chip:hover{background:color-mix(in srgb,var(--c) 22%,var(--panel));border-color:color-mix(in srgb,var(--c) 60%,var(--line));transform:translateY(-1px);z-index:3}
.tl-emo{font-size:12px;flex:none}
.tl-ct{overflow:hidden;text-overflow:ellipsis}
.tl-dot{
  position:absolute;width:11px;height:11px;padding:0;border-radius:50%;background:var(--c);border:2px solid var(--panel);
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 28%,transparent),0 0 10px color-mix(in srgb,var(--c) 70%,transparent);
  transition:transform .12s;z-index:2;
}
.tl-dot:hover{transform:translate(-50%,-50%) scale(1.45)}
.tl-dot.ping{animation:ping 1.5s ease-out}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--c)}100%{box-shadow:0 0 0 18px transparent}}
/* Nach links verblassen die Einträge (--fade aus reflections.js); überfahren leuchten sie ganz auf */
:is(.tl-stem,.tl-chip,.tl-dot){opacity:var(--fade,1)}
:is(.tl-stem,.tl-chip,.tl-dot):is(.lit,:hover){opacity:1}
/* Capture in der Timeline: blasse Quadrate unter den Punkten, in der Farbe des ersten Tags */
.tl-sq{position:absolute;width:7px;height:7px;padding:0;border:0;border-radius:2px;background:var(--c);transform:translate(-50%,-50%);opacity:calc(var(--fade,1) * .5);transition:transform .12s,opacity .12s;z-index:1}
.tl-sq:is(.lit,:hover){opacity:1;transform:translate(-50%,-50%) scale(1.5)}
.tl-leg-cap i{border-radius:2px}
.tip-top i.sq{border-radius:2px}
.tl-tip{
  position:fixed;z-index:60;width:290px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:12px;
  padding:10px 12px 11px;box-shadow:var(--shadow-pop);pointer-events:none;
}
.tip-top{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--c)}
.tip-top i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.tip-top span{margin-left:auto;color:var(--muted)}
.tip-title{font-size:13.5px;font-weight:600;margin:6px 0 3px;line-height:1.35}
.tip-ex{font-size:12.5px;color:var(--text-2);line-height:1.5}
.tip-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:7px}

.rf-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rf-sub .filter{width:230px}

.buckets{flex:1;min-height:0;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
.bucket{
  flex:0 0 320px;display:flex;flex-direction:column;min-height:0;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--panel)) 0,var(--panel) 190px);
  border:1px solid color-mix(in srgb,var(--c) 24%,var(--line));box-shadow:var(--neu);
}
.bk-head{padding:14px 14px 13px 16px;cursor:pointer;border-bottom:1px solid var(--line-soft);transition:background .14s}
.bk-head:hover{background:color-mix(in srgb,var(--c) 6%,transparent)}
.bk-row{display:flex;align-items:center;gap:8px}
.bk-dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent),0 0 12px var(--c);flex:none}
.bk-emo{font-size:15px}
.bk-row h3{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-n{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.bk-more{opacity:.45;border-color:transparent;background:transparent;transition:opacity .15s,background .15s}
.bucket:hover .bk-more{opacity:1}
.bk-more:hover{background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--text)}
.bk-desc{margin:5px 0 7px;font-size:12.5px;color:var(--text-2);line-height:1.45;min-height:18px}
.bk-mode{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:10px}
.bk-mode .ico{color:var(--c)}
.bk-bar{height:5px;border-radius:3px;background:var(--panel-3);overflow:hidden}
.bk-bar i{display:block;height:100%;border-radius:3px;background:var(--c);box-shadow:0 0 10px var(--c);transition:width .4s}
.bk-goal-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:7px}
.bk-goal-row b{color:var(--text)}
.bk-streak{display:inline-flex;align-items:center;gap:3px;color:var(--fire)}
.bk-now{margin-left:auto;display:inline-flex;align-items:center;gap:3px}
.bk-goal.done .bk-now{color:var(--ok)}
.bk-goal-none{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.bk-list{flex:1;min-height:0;padding:4px 10px 12px;display:flex;flex-direction:column;gap:8px}
.bk-sec{display:flex;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--c);padding:10px 6px 0;opacity:.9}
.bk-sec span{margin-left:auto;color:var(--faint)}
.bk-empty{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:18px 6px}
.ecard{
  padding:10px 12px 10px;border-radius:11px;cursor:pointer;flex:none;
  background:color-mix(in srgb,var(--c) 6%,var(--bg-soft));border:1px solid color-mix(in srgb,var(--c) 18%,var(--line));
  transition:transform .14s,border-color .14s,box-shadow .14s;
}
.ecard:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--c) 48%,var(--line));box-shadow:var(--neu-hover)}
.ec-top{display:flex;align-items:center;gap:8px}
.ec-date{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--c);font-weight:600}
.ec-rel{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.ec-title{font-size:13.5px;font-weight:600;line-height:1.38;margin:5px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ec-ex{font-size:12px;color:var(--text-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ec-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:7px}
.ec-score{display:inline-flex;align-items:center;gap:5px;color:var(--text-2)}
.ec-score i{width:28px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c) calc(var(--p) * 100%),var(--panel-3) 0)}
.bk-add{
  margin:0 10px 10px;height:38px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--c) 38%,var(--line));background:transparent;
  color:var(--text-2);display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;flex:none;transition:.14s;
}
.bk-add:hover{background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--text);border-style:solid}
.bucket-new{
  flex:0 0 240px;align-items:center;justify-content:center;gap:6px;background:transparent;border:1.5px dashed var(--line);box-shadow:none;
  color:var(--muted);font-size:13.5px;font-weight:500;text-align:center;padding:20px;
}
.bucket-new em{font-style:normal;font-size:11.5px;color:var(--faint);font-weight:400;line-height:1.5}
.bucket-new:hover{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 4%,transparent)}

/* ---------- Vollbild einer Kategorie ---------- */
.bkf-modal{height:min(92vh,1100px)}
.bkf-modal .modal-body{padding:0;display:flex;overflow:hidden}
.bkf{display:flex;flex-direction:column;width:100%;min-height:0}
.bkf-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:16px 16px 14px 22px;
  border-bottom:1px solid var(--line-soft);border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 13%,var(--panel)) 0%,var(--panel) 100%);
}
.bkf-title{display:flex;align-items:center;gap:10px;min-width:0}
.bkf-title h2{font-size:21px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.bkf-emo{font-size:18px}
.bkf-path{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkf-actions{display:flex;align-items:center;gap:8px}
.bkf-actions .filter{width:230px}
.bkf-stats{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bkf-goal{gap:8px}
.bkf-goal .bk-bar{width:70px}
.bkf-goal .bk-streak{display:inline-flex;align-items:center;gap:2px}
.bkf-mode{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:4px}
.bkf-mode .ico{color:var(--c)}
.bkf-hits{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--accent)}
.bkf-body{flex:1;min-height:0;padding:6px 22px 34px}
.bkf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.bkf-sec{
  grid-column:1 / -1;display:flex;align-items:baseline;gap:8px;padding:16px 2px 7px;border-bottom:1px dashed var(--line-soft);
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--c);
}
.bkf-sec span{color:var(--faint);letter-spacing:.04em}
.bkf-card{
  display:flex;flex-direction:column;min-width:0;padding:13px 15px 10px;border-radius:13px;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 8%,var(--panel)) 0%,var(--panel) 70%);
  border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));box-shadow:var(--neu);
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.bkf-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:var(--neu-hover)}
.bkf-etitle{font-size:15px;font-weight:600;line-height:1.35;margin:7px 0 2px;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bkf-content{flex:1;max-height:250px;overflow:hidden;margin-top:4px}
.bkf-content.clamped{-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.bkf-qa{margin-top:8px}
.bkf-q{font-size:11px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.bkf-a{font-size:13px;color:var(--text);line-height:1.5;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bkf-li{display:inline}
.bkf-li + .bkf-li::before{content:' · ';color:var(--c)}
.bkf-scale{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--text)}
.bkf-scale i{width:64px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--c) calc(var(--p) * 100%),var(--panel-3) 0);box-shadow:0 0 8px color-mix(in srgb,var(--c) 45%,transparent)}
.bkf-md{font-size:13px}
.bkf-md h1,.bkf-md h2,.bkf-md h3{font-size:13.5px;margin:.6em 0 .3em}
.bkf-foot{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line-soft);font-family:var(--mono);font-size:10px;color:var(--faint)}
.bkf-open{margin-left:auto;display:inline-flex;align-items:center;gap:4px;opacity:0;color:var(--c);transition:opacity .15s}
.bkf-card:hover .bkf-open{opacity:1}
.bkf-empty{grid-column:1 / -1}
[data-tone="light"] .bkf-sec{color:color-mix(in srgb,var(--c) 66%,#000)}

/* ---------- Eintrag-Formular ---------- */
.ef-modal{height:min(90vh,940px)}
.ef-modal .modal-body{padding:0;display:flex;overflow:hidden}
.ef{display:flex;flex-direction:column;width:100%;min-height:0}
.ef-head{padding:14px 16px 12px 22px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 11%,var(--panel)),var(--panel));border-radius:var(--r-lg) var(--r-lg) 0 0}
.ef-kicker{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.ef-kicker .ed-fbtn{margin:-4px -2px -4px -7px}
.ef-path b{color:var(--text-2);font-weight:500}
.ef-emo{font-size:14px}
.ef-tpl{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:6px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.ef-head-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.ef-title{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);padding:3px 0}
.ef-title::placeholder{color:color-mix(in srgb,var(--text) 38%,transparent)}
.ef-date{display:inline-flex;align-items:center;gap:6px;padding:0 8px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--muted)}
.ef-date input{border:0;background:transparent;outline:none;font-family:var(--mono);font-size:12px;color:var(--text)}
.ef-body{flex:1;min-height:0;padding:18px 24px 40px;display:flex;flex-direction:column;gap:12px}
.ef-body.ef-free-body{padding:10px 20px 40px 4px;display:block}
.ef-q{padding:14px 16px 14px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg-soft);transition:border-color .15s,box-shadow .15s;flex:none}
.ef-q.answered{border-color:color-mix(in srgb,var(--c) 28%,var(--line))}
.ef-q:focus-within{border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 10%,transparent)}
.ef-qhead{display:flex;align-items:baseline;gap:10px}
.ef-num{font-family:var(--mono);font-size:11px;color:var(--c);font-weight:600;width:20px;flex:none}
.ef-qtext{font-size:14.5px;font-weight:600;line-height:1.4}
.ef-kind{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.06em}
.ef-hint{font-size:12px;color:var(--muted);margin:3px 0 0 30px}
.ef-ans{display:block;width:calc(100% - 30px);margin:8px 0 0 30px;background:transparent;border:0;resize:none;outline:none;color:var(--text);font-size:14px;line-height:1.65;padding:0;overflow:hidden}
.ef-ans::placeholder{color:var(--faint)}
.ef-list{margin:8px 0 0 30px;display:flex;flex-direction:column;gap:2px}
.ef-li{display:flex;align-items:center;gap:10px}
.ef-bullet{font-family:var(--mono);font-size:10px;color:var(--c);width:12px;text-align:right;opacity:.8;flex:none}
.ef-ans-li{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px dashed var(--line);padding:6px 2px;outline:none;color:var(--text);font-size:14px}
.ef-ans-li:focus{border-bottom-color:var(--c);border-bottom-style:solid}
.ef-scale{display:flex;align-items:center;gap:6px;margin:10px 0 2px 30px;flex-wrap:wrap}
.ef-scale button{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);
  font-family:var(--mono);font-size:13px;transition:.12s;padding:0;
}
.ef-scale button:hover{border-color:var(--c);color:var(--text)}
.ef-scale button.on{background:var(--c);border-color:var(--c);color:#0b1220;font-weight:700;box-shadow:0 4px 14px -4px var(--c)}
.ef-scale-lbl{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:8px}
.ef-foot{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 20px;border-top:1px solid var(--line-soft);background:var(--bg-soft);border-radius:0 0 var(--r-lg) var(--r-lg)}
.ef-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.ef-status i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.ef-status.saved i{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.ef-status.dirty i{background:var(--warn)}
.ef-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ef-prog{display:inline-block;width:64px;height:4px;border-radius:2px;background:var(--panel-3);overflow:hidden}
.ef-prog i{display:block;height:100%;background:var(--c);transition:width .3s}

/* ---------- Antworttypen: Ja/Nein · Zahl · Uhrzeit ---------- */
.ef-yn{display:flex;gap:8px;margin:10px 0 2px 30px}
.ef-yn button{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px 0 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);font-size:13px;font-weight:500;transition:.12s;
}
.ef-yn button .ico{color:var(--muted)}
.ef-yn button:hover{border-color:var(--c);color:var(--text)}
.ef-yn button.on{background:var(--c);border-color:var(--c);color:#0b1220;font-weight:700;box-shadow:0 4px 14px -4px var(--c)}
.ef-yn button.on .ico{color:#0b1220}
.ef-yn button.no.on{background:var(--panel-3);border-color:var(--line-strong);color:var(--text);box-shadow:none}
.ef-yn button.no.on .ico{color:var(--text)}
.ef-numf,.ef-time{display:flex;align-items:center;gap:10px;margin:10px 0 2px 30px}
.ef-num-in,.ef-time-in{
  height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font-family:var(--mono);font-size:15px;padding:0 12px;outline:none;transition:border-color .12s,box-shadow .12s;
}
.ef-num-in{width:130px}
.ef-time-in{width:120px;color-scheme:dark}
:root[data-tone="light"] .ef-time-in{color-scheme:light}
.ef-num-in:focus,.ef-time-in:focus{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.ef-num-in.bad{border-color:var(--danger)}
.ef-num-help{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.ef-hist{
  flex:none;align-self:center;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:6px;
  border:1px solid transparent;background:transparent;color:var(--faint);font-family:var(--mono);font-size:10.5px;transition:.12s;
}
.ef-q:hover .ef-hist,.ef-hist:focus-visible{color:var(--muted);border-color:var(--line-soft)}
.ef-hist:hover{color:var(--text)!important;border-color:color-mix(in srgb,var(--c) 50%,var(--line))!important;background:var(--panel-2)}
.ans-yn{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11.5px;padding:1px 8px 1px 6px;border-radius:6px}
.ans-yn.yes{color:var(--text);background:color-mix(in srgb,var(--c,var(--accent)) 18%,transparent)}
.ans-yn.yes .ico{color:var(--c,var(--accent))}
.ans-yn.no{color:var(--muted);background:var(--panel-3)}
.ans-num{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12.5px;color:var(--text)}
.ans-num .ico{color:var(--muted)}

/* ---------- Wochenreview: Dailies dieser Woche ---------- */
.ef-week{flex:none;padding:12px 14px 12px;border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--panel)) 0%,var(--bg-soft) 100%)}
.ew-h{display:flex;align-items:center;gap:8px;font-size:13px}
.ew-h .ico{color:var(--c)}
.ew-h span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ew-empty{margin:6px 0 0 21px;font-size:12.5px;color:var(--muted)}
.ew-row{display:flex;align-items:flex-end;gap:22px;margin-top:10px;flex-wrap:wrap}
.ew-days{display:flex;gap:6px}
.ew-day{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default}
.ew-bar{width:22px;height:46px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)}
.ew-bar i{display:block;width:14px;border-radius:4px 4px 0 0;background:var(--c)}
.ew-bar i.dot{width:6px;height:6px;border-radius:50%;margin-bottom:4px;background:var(--muted)}
.ew-day em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
.ew-day.has em{color:var(--text-2)}
.ew-figs{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);padding-bottom:16px}
.ew-figs b{font-family:var(--mono);font-size:15px;color:var(--text);font-weight:600}
.ew-hl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line-soft)}
.ew-hl-h{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.ew-hl-h .ico{color:var(--accent)}
.ew-hl-i{display:inline-flex;align-items:baseline;gap:6px;max-width:320px;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:3px 9px;
  font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ew-hl-i em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
.ew-hl-i:hover{color:var(--text);border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.ef-sugg{margin:9px 0 2px 30px;padding:8px 10px 8px 11px;border-left:2px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:0 9px 9px 0;background:color-mix(in srgb,var(--c) 5%,transparent)}
.es-h{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.es-h .ico{color:var(--c)}
.es-fill{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);font-family:var(--mono);font-size:10.5px}
.es-fill:hover{color:var(--text);border-color:var(--c)}
.ef-sugg ul{list-style:none;margin:5px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.ef-sugg li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.ef-sugg li em{flex:none;width:20px;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
.ef-sugg li b{flex:none;font-weight:600;color:var(--text)}
.ef-sugg li span{min-width:0;overflow-wrap:anywhere}
.es-more{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin:3px 0 0 28px}

/* ---------- Diagramme (Auswertung, Verlauf) ----------
   Eine Reihe je Diagramm in der Farbe der Kategorie; Text in Texttönen. */
.chart{display:block;outline:none;overflow:visible;touch-action:pan-y}
.chart:focus-visible{border-radius:6px;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent)}
.ch-grid{stroke:var(--line-soft);stroke-width:1;shape-rendering:crispEdges}
.ch-yt,.ch-xt{font-family:var(--mono);font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums}
.ch-yt{text-anchor:end}
.ch-line{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-area{fill:var(--c);opacity:.1;stroke:none}
.ch-end,.ch-hot{fill:var(--c);stroke:var(--panel);stroke-width:2}
.ch-endv{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--text)}
.ch-cross{stroke:var(--line-strong);stroke-width:1;opacity:0;shape-rendering:crispEdges}
.ch-hot{opacity:0}
.chart.hovering .ch-cross,.chart.hovering .ch-hot{opacity:1}
.ch-tip{
  position:fixed;z-index:160;pointer-events:none;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:7px;row-gap:1px;
  padding:7px 10px 7px 9px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line-strong);box-shadow:var(--shadow-pop);max-width:260px;
}
.ch-tip[hidden]{display:none}
.ch-tip i{grid-row:1;width:12px;height:2px;border-radius:1px;background:var(--c)}
.ch-tip b{grid-row:1;font-family:var(--mono);font-size:13px;color:var(--text);font-weight:600}
.ch-tip span{grid-column:1 / -1;font-size:11.5px;color:var(--muted)}
.ch-tip i + b + span{grid-column:2}
.ch-tip b:first-child{grid-column:1 / -1}

/* ---------- Auswertung ---------- */
.ins-modal{height:min(92vh,1100px)}
.ins-modal .modal-body{padding:0;display:flex;overflow:hidden}
.ins{--c:var(--accent);display:flex;flex-direction:column;width:100%;min-height:0}
.ins-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:16px 16px 14px 22px;border-bottom:1px solid var(--line-soft);
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--panel)) 0%,var(--panel) 100%)}
.ins-title{display:flex;align-items:center;gap:10px;min-width:0}
.ins-title > .ico{color:var(--accent)}
.ins-title h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.ins-filters{grid-column:1 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ins-cats{display:flex;flex-wrap:wrap;gap:5px}
.ins-cat{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;transition:.12s}
.ins-cat i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.ins-cat:hover{color:var(--text);border-color:var(--line-strong)}
.ins-cat.on{color:var(--text);background:var(--panel-2);border-color:color-mix(in srgb,var(--c) 55%,var(--line))}
.ins-body{flex:1;min-height:0;padding:16px 22px 40px}
.ins-kpis{display:flex;flex-wrap:wrap;gap:6px}
.ins-sec{margin-top:22px}
.ins-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 2px 9px;border-bottom:1px dashed var(--line-soft);margin-bottom:12px}
.ins-h h3{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-2);font-weight:600}
.ins-h span{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.ins-heat{padding:14px 16px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--neu)}
.hm-scroll{overflow-x:auto;padding-bottom:4px}
.heat{display:block}
.hm-c{transition:opacity .1s}
.hm-c:hover{stroke:var(--text);stroke-width:1.5}
:is(.hm-c,.hm-legend i).l0{fill:var(--panel-3);background:var(--panel-3)}
:is(.hm-c,.hm-legend i).l1{fill:color-mix(in srgb,var(--accent) 26%,var(--panel-3));background:color-mix(in srgb,var(--accent) 26%,var(--panel-3))}
:is(.hm-c,.hm-legend i).l2{fill:color-mix(in srgb,var(--accent) 48%,var(--panel-3));background:color-mix(in srgb,var(--accent) 48%,var(--panel-3))}
:is(.hm-c,.hm-legend i).l3{fill:color-mix(in srgb,var(--accent) 72%,var(--panel-3));background:color-mix(in srgb,var(--accent) 72%,var(--panel-3))}
:is(.hm-c,.hm-legend i).l4{fill:var(--accent);background:var(--accent)}
.hm-m,.hm-wd{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.hm-legend{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.hm-legend i{width:11px;height:11px;border-radius:2.5px}
.hm-legend span:first-child{margin-right:3px}
.hm-legend span:last-child{margin-left:3px}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.ins-card{display:flex;flex-direction:column;min-width:0;padding:13px 15px 12px;border-radius:13px;background:var(--panel);
  border:1px solid color-mix(in srgb,var(--c) 20%,var(--line));box-shadow:var(--neu)}
.ins-ch{display:flex;align-items:flex-start;gap:8px}
.ins-q{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ins-meta{display:flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ins-meta i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.ins-fig{display:flex;align-items:baseline;gap:6px;margin:10px 0 6px}
.ins-fig b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.ins-fig span{font-size:12px;color:var(--muted)}
.ins-plot{min-height:132px}
.ins-empty{padding:18px 4px;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.6}
.ins-empty b{color:var(--text-2);font-weight:500}
.yn-strip{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.yn-strip i{width:12px;height:12px;border-radius:3px;cursor:default}
.yn-strip i.y{background:var(--c)}
.yn-strip i.n{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.yn-strip i:hover{outline:1.5px solid var(--text);outline-offset:1px}
.yn-key{display:inline-block;width:10px;height:10px;border-radius:2.5px;margin-left:6px}
.yn-key.y{background:var(--text-2)}
.yn-key.n{box-shadow:inset 0 0 0 1.5px var(--line-strong)}

/* ---------- Verlauf einer Frage ---------- */
.qh-modal{height:min(88vh,980px)}
.qh-modal .modal-body{padding:0;display:flex;overflow:hidden}
.qh{display:flex;flex-direction:column;width:100%;min-height:0}
.qh-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 14px 12px 22px;border-bottom:1px solid var(--line-soft);
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 12%,var(--panel)) 0%,var(--panel) 100%)}
.qh-kicker{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--c);align-self:center}
.qh-title{grid-column:1 / -1;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.qh-stats{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.qh-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:4px}
.qh-tools{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin-top:4px}
.qh-tools .filter{width:260px}
.qh-body{flex:1;min-height:0;padding:6px 22px 34px}
.qh-plot{padding:14px 4px 4px;min-height:150px}
.qh-yn{padding:14px 2px 6px}
.qh-sec{display:flex;align-items:baseline;gap:8px;padding:16px 2px 6px;border-bottom:1px dashed var(--line-soft);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--c)}
.qh-row{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:10px 8px;border-bottom:1px solid var(--line-soft);border-radius:8px;cursor:pointer;transition:background .12s}
.qh-row:hover{background:var(--panel-2)}
.qh-row.cur{cursor:default;background:color-mix(in srgb,var(--c) 6%,transparent)}
.qh-date{display:flex;flex-direction:column;gap:1px}
.qh-date b{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--text-2)}
.qh-date span{font-family:var(--mono);font-size:10px;color:var(--faint)}
.qh-a{font-size:14px;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.qh-a.k-list{white-space:normal}
.qh-a .bkf-li{display:block;padding-left:14px;position:relative}
.qh-a .bkf-li::before{content:'';position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--c)}
.qh-a .bkf-li + .bkf-li::before{content:'';color:transparent}
.qh-cur{font-family:var(--mono);font-size:10px;color:var(--c);white-space:nowrap}
.qh-cat{width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.8}

/* ---------- Fragen-Baukasten ---------- */
.tb-intro{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:11px;font-size:13px;margin-bottom:4px}
.tb-intro .ico{color:var(--c,var(--accent));vertical-align:-2px}
.tb-select{width:auto;min-width:240px}
.tb-note{width:100%;font-size:11.5px;color:var(--muted)}
.tb-list{display:flex;flex-direction:column;gap:8px}
.tb-row{display:grid;grid-template-columns:24px minmax(0,1fr) 184px auto;gap:10px;align-items:start;padding:10px;border:1px solid var(--line-soft);border-radius:11px;background:var(--panel)}
.tb-row:focus-within{border-color:color-mix(in srgb,var(--c,var(--accent)) 50%,var(--line))}
.tb-num{font-family:var(--mono);font-size:11px;color:var(--c,var(--accent));padding-top:9px;font-weight:600}
.tb-grip{display:flex;justify-content:center;height:34px;cursor:grab;touch-action:none;border-radius:7px;user-select:none}
.tb-grip .ico{display:none;margin-top:9px;color:var(--muted)}
.tb-row:hover .tb-grip .tb-num{display:none}
.tb-row:hover .tb-grip .ico{display:block}
.tb-grip:hover{background:var(--panel-2)}
.tb-grip:hover .ico{color:var(--text)}
.tb-sorting,.tb-sorting *{cursor:grabbing !important;user-select:none}
.tb-sorting .tb-row:not(.tb-drag){transition:transform .16s ease}
.tb-row.tb-drag{position:relative;z-index:3;border-color:color-mix(in srgb,var(--c,var(--accent)) 55%,var(--line));box-shadow:var(--shadow);background:var(--panel-2)}
.tb-row.tb-drag .tb-grip .tb-num{display:none}
.tb-row.tb-drag .tb-grip .ico{display:block;color:var(--c,var(--accent))}
.tb-fields{display:flex;flex-direction:column;gap:6px;min-width:0}
.tb-text{font-weight:500}
.tb-acts{display:flex;gap:2px;padding-top:3px}
.tb-acts .icon-btn{border-color:transparent;background:transparent}
.tb-acts .tb-del:hover{color:var(--danger)}
.tb-empty{font-size:13px;color:var(--muted);padding:10px}
.tb-add-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:10px}
.tb-quick{font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.tb-actions{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}

/* ---------- Vorlagen & Kategorien ---------- */
.tpl-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.tpl-card{border:1px solid var(--line);border-radius:12px;padding:13px 14px 12px;background:var(--bg-soft);display:flex;flex-direction:column}
.tpl-head{display:flex;align-items:flex-start;gap:10px}
.tpl-ico{width:32px;height:32px;border-radius:9px;background:var(--panel-3);display:grid;place-items:center;color:var(--accent);flex:none}
.tpl-titles{flex:1;min-width:0}
.tpl-titles h4{font-size:14.5px}
.tpl-titles p{margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.tpl-n{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;padding-top:3px}
.tpl-qs{margin:10px 0 10px;padding-left:20px;font-size:12.5px;color:var(--text-2);flex:1}
.tpl-qs li{margin:3px 0;padding-left:2px}
.tpl-qs li::marker{font-family:var(--mono);font-size:10px;color:var(--faint)}
.tpl-qs li span{display:inline}
.tpl-qs li em{font-family:var(--mono);font-size:9.5px;color:var(--faint);font-style:normal;margin-left:6px}
.tpl-qs li.more{list-style:none;color:var(--muted);font-size:11.5px;margin-left:-20px}
.tpl-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px dashed var(--line-soft);padding-top:10px}
.tpl-used{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--text-2);background:var(--panel);border:1px solid var(--line);padding:1px 7px;border-radius:6px}
.tpl-used i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.tpl-unused{font-family:var(--mono);font-size:10.5px;color:var(--faint)}

.row-icon{display:flex;gap:10px}
.fld-emo{width:78px;flex:none}
.emo-inp{text-align:center;font-size:18px;padding:5px}
.emo-picks{display:flex;flex-wrap:wrap;gap:4px;margin:-6px 0 14px}
.emo-picks button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);font-size:15px;padding:0}
.emo-picks button:hover{border-color:var(--accent);background:var(--panel-3)}
.cat-form .seg{flex-wrap:wrap}

/* ============================================================
   Befehlspalette
   ============================================================ */
.pal-modal .modal-body{padding:0}
.pal-input{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-input .ico{color:var(--accent)}
.pal-input input{flex:1;background:transparent;border:0;outline:none;font-size:16px;color:var(--text)}
.pal-input input::placeholder{color:var(--faint)}
.pal-list{max-height:54vh;overflow:auto;padding:6px}
.pal-group{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);padding:10px 10px 4px}
.pal-item{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;padding:7px 10px;
  border-radius:9px;border:0;background:transparent;color:var(--text);text-align:left;
}
.pal-item.active{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
.pal-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.pal-main{display:flex;flex-direction:column;min-width:0}
.pal-title{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-snip{font-size:12px;line-height:1.45;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1px}
.pal-sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.pal-item mark,.pal-snip mark{background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--text);border-radius:3px;padding:0 1px}
.pal-empty{padding:30px;text-align:center;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pal-foot{display:flex;align-items:center;gap:16px;padding:8px 14px;border-top:1px solid var(--line-soft);background:var(--bg-soft);font-size:11px;color:var(--muted);border-radius:0 0 var(--r-lg) var(--r-lg)}
.pal-foot span{display:inline-flex;align-items:center;gap:4px}
.pal-foot kbd{font-size:9.5px;border-bottom-width:1px}
.pal-count{font-family:var(--mono)}
/* Volltextsuche: aktive Filter, Filter-Vorschläge, Syntax-Hinweis */
.pal-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px;border-bottom:1px solid var(--line-soft);background:var(--bg-soft)}
.pal-filters[hidden]{display:none}
.pal-fl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin-right:2px}
.pal-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-family:var(--mono);font-size:11px;color:var(--text-2);background:var(--panel-2);border:1px solid var(--line)}
.pal-chip .ico{color:var(--accent)}
.pal-chip.bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.pal-chip.bad .ico{color:var(--danger)}
.pal-hint .pal-title{font-family:var(--mono);font-size:12.5px}
.pal-syntax kbd{font-family:var(--mono)}

/* ============================================================
   Einstellungen & Kürzel
   ============================================================ */
.set-sec{padding:14px 0;border-bottom:1px dashed var(--line-soft)}
.set-sec:first-child{padding-top:4px}
.set-title{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.set-row{display:flex;align-items:center;gap:16px;padding:9px 0}
.set-row > div:first-child{flex:1;min-width:0}
.set-row-wrap{flex-wrap:wrap;row-gap:10px}
.set-row-wrap > div:first-child{flex-basis:100%}
.set-row b{font-size:13.5px;font-weight:600}
.set-row p{margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.set-btns{display:flex;gap:6px}
/* Web-Clipper: Lesezeichen zum Ziehen */
.set-note{margin:2px 0 0;font-size:11.5px;color:var(--faint);line-height:1.55}
/* Mobil & Sync */
.sync-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px;margin:2px 0 6px}
.sync-code{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sync-code::placeholder{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.sync-msg{margin:4px 0 0;font-size:12px;color:var(--text-2)}
.sync-msg.err{color:var(--danger)}
.sync-switch{background:none;border:0;padding:4px 0;font-size:12px;color:var(--accent);cursor:pointer}
.sync-switch:hover{text-decoration:underline}
.sync-head{display:flex;align-items:center;gap:12px;padding:6px 0 10px}
.sync-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent)}
.sync-dot.busy{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);animation:pulse 1s infinite}
.sync-dot.warn{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 16%,transparent)}
.sync-ht{flex:1;min-width:0}
.sync-ht b{font-size:13.5px;font-weight:600;margin-right:8px}
.sync-ht code{font-size:11.5px;color:var(--code-ink);background:var(--panel-3);padding:1px 6px;border-radius:5px}
.sync-ht p{margin:3px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.sync-devs{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;border:1px solid var(--line-soft);border-radius:10px;padding:4px}
.sync-dev{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px}
.sync-dev:hover{background:var(--panel-2)}
.sync-dev.off{opacity:.5}
.sync-dev-i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--panel-2);color:var(--accent);flex:none}
.sync-dev-t{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.sync-dev-t b{font-size:13px;font-weight:600}
.sync-dev-t em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);padding:0 6px;border-radius:5px}
.sync-dev-t > span{flex-basis:100%;font-size:11.5px;color:var(--muted)}
.sync-budget{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:4px 0 2px}
.sync-bar{display:grid;grid-template-columns:1fr auto;gap:3px 8px;font-size:11.5px;color:var(--text-2)}
.sync-bar i{grid-column:1/-1;grid-row:2;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--p),var(--line-soft) var(--p))}
.sync-bar em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.sync-foot{display:flex;justify-content:flex-end;margin-top:8px}
/* Kopplungscode */
.pair{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px 2px}
.pair-code{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:.12em;color:var(--text);padding:14px 22px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--line);user-select:all;transition:opacity .2s}
.pair-code.gone{opacity:.3;text-decoration:line-through}
.pair-left{font-size:12px;color:var(--muted)}
.pair-left b{font-family:var(--mono);color:var(--text-2)}
.pair-steps{align-self:stretch;margin:6px 0 0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--text-2)}
.pair-steps code{font-size:11.5px;color:var(--code-ink);background:var(--panel-3);padding:0 5px;border-radius:4px}
.pair-status{display:flex;align-items:center;gap:7px;margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.pair-status .ico{color:var(--accent)}
.pair-status.ok{color:var(--ok)}
.pair-status.ok .ico{color:var(--ok)}
.set-note code{font-size:11px;color:var(--code-ink);background:var(--panel-3);padding:0 4px;border-radius:4px}
.clip-bm{cursor:grab;text-decoration:none;white-space:nowrap}
.clip-bm:active{cursor:grabbing}
.set-sec.flash{animation:setFlash 1.6s ease-out;border-radius:10px}
@keyframes setFlash{0%,30%{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 10%,transparent)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
.set-info{font-size:12.5px;color:var(--text-2);line-height:1.6;background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.set-info code{font-size:11.5px;color:var(--code-ink);background:var(--panel-3);padding:0 4px;border-radius:4px}
.set-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.set-stats span{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);padding:2px 8px;border-radius:6px}
.set-stats b{color:var(--text)}
.set-stats .ok{color:var(--ok)}
.set-stats .warn{color:var(--warn)}
.set-about{display:flex;align-items:center;gap:12px;padding-top:16px}
.set-about p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.set-about .mono{font-size:11px;color:var(--faint);margin-left:4px}

.keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.keys-group{margin-bottom:14px}
.keys-row{display:flex;align-items:center;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line-soft);font-size:13px;color:var(--text-2)}
.keys-k{min-width:150px;display:flex;gap:3px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px}

.boot-error{position:fixed;inset:80px 40px auto;background:var(--panel);border:1px solid var(--danger);border-radius:12px;padding:20px;color:var(--text);z-index:999}
.boot-error pre{white-space:pre-wrap;font-size:12px;color:var(--text-2)}

/* Helles Theme: farbige Beschriftungen abdunkeln, damit sie auf Weiß lesbar bleiben */
[data-tone="light"] :is(.ec-date,.bk-sec,.ntag,.tc-hash,.tbadge,.pc-legend span,.rail-legend span,.tip-top,.ef-num,.ef-tpl,.qtag span,.tpl-used,.dlink .ico,.pick-item .ico,.pal-ico,.mm-kicker,.bk-mode .ico){color:color-mix(in srgb,var(--c) 66%,#000)}
[data-tone="light"] :is(.mm-type,.lv-ico,.rr-ico){color:color-mix(in srgb,var(--tc) 66%,#000)}
[data-tone="light"] .md-tag,[data-tone="light"] .dtag,[data-tone="light"] .lv-tags{color:#6a45d8}
[data-tone="light"] .mm-node.t-topic .mm-title{color:color-mix(in srgb,var(--c) 45%,#000)}
[data-tone="light"] .tl-chip{color:var(--text)}

/* ============================================================
   Themes — die Umgebung
   Die Tokens stehen oben; hier, was über Farben hinausgeht.
   ============================================================ */

/* ---------- Space ---------- */
/* Kopfzeile mit Lila-Pink-Schimmer an den Rändern */
[data-theme="space"] .topbar{
  background:linear-gradient(90deg,rgba(168,85,247,.14),transparent 38%,transparent 62%,rgba(255,92,176,.1)),var(--bg-soft);
}
/* Das Logo leuchtet violett-pink statt blau */
[data-theme="space"] .brand-ico{filter:hue-rotate(68deg) saturate(1.3) drop-shadow(0 2px 7px rgba(255,92,176,.32))}
[data-theme="space"] .modal-bd{background:rgba(8,3,18,.68)}
/* Der Kopf über Karte und Liste ist durchsichtig, damit der Nebel nicht an ihm abreißt */
:is([data-theme="space"],[data-theme="winter"],[data-theme="forest"]) .proj-head{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 8%,transparent) 0%,transparent 100%);
}

/* ---------- Winter ---------- */
/* Kopfzeile glimmt an den Rändern dunkelrot */
[data-theme="winter"] .topbar{
  background:linear-gradient(90deg,rgba(130,18,28,.22),transparent 32%,transparent 68%,rgba(130,18,28,.22)),var(--bg-soft);
  box-shadow:0 1px 0 rgba(255,190,120,.05),0 10px 30px -14px rgba(130,18,28,.45);
}
[data-theme="winter"] .modal-bd{background:rgba(6,4,5,.72)}
/* Kerzenschein auch an Hauptknöpfen und am heutigen Tag */
[data-theme="winter"]{--btn-glow:var(--accent-glow);--today-glow:var(--accent-glow)}
/* Schneeweißes Logo — sein Punkt wird zur kleinen Kerzenflamme, die leise flackert */
[data-theme="winter"] .brand-ico{filter:saturate(0) brightness(1.2) contrast(1.05) drop-shadow(0 2px 7px rgba(255,170,90,.16))}
[data-theme="winter"] .brand-mark::after{
  content:'';position:absolute;left:16px;top:4px;width:5.5px;height:6.5px;border-radius:50% 50% 45% 45% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 64%,#fff6df 0%,#ffc37a 38%,#e0602a 72%,#7a1418 100%);
  animation:candle 3.4s ease-in-out infinite;
}
@keyframes candle{
  0%,100%{box-shadow:0 0 4px 1px rgba(255,170,80,.6),0 0 11px 3px rgba(150,22,30,.4);transform:scale(1)}
  22%{box-shadow:0 0 3px 1px rgba(255,170,80,.45),0 0 9px 2px rgba(150,22,30,.32);transform:scale(.93,.96)}
  43%{box-shadow:0 0 6px 2px rgba(255,182,92,.7),0 0 14px 4px rgba(150,22,30,.46);transform:scale(1.05,1.08)}
  68%{box-shadow:0 0 4px 1px rgba(255,164,74,.52),0 0 10px 3px rgba(150,22,30,.35);transform:scale(.97,1)}
}
@media (prefers-reduced-motion:reduce){[data-theme="winter"] .brand-mark::after{animation:none}}
/* Weiße Links wären weißer Text: sie bekommen eine warme Unterstreichung */
[data-theme="winter"] :is(.md a,.linkish){text-decoration:underline;text-decoration-color:rgba(255,170,90,.5);text-underline-offset:3px}

/* ---------- Forest ---------- */
/* Kopfzeile: links grün, rechts ein Hauch Abendrot, darunter ein grüner Schein */
[data-theme="forest"] .topbar{
  background:linear-gradient(90deg,rgba(22,101,52,.34),transparent 22%,transparent 80%,rgba(234,88,12,.12)),var(--bg-soft);
  box-shadow:0 1px 0 rgba(74,222,128,.12),0 12px 30px -20px rgba(34,197,94,.6);
}
/* Die Statusleiste ist der Horizont: rechts, wo die Sonne steht, glüht ihre Kante */
[data-theme="forest"] .statusbar{
  border-top-color:transparent;
  background:linear-gradient(90deg,var(--line) 0%,var(--line) 60%,rgba(249,115,22,.5) 84%,rgba(251,191,36,.7) 93%,rgba(239,68,68,.55) 100%) 0 0/100% 1px no-repeat,var(--bg-soft);
}
/* Große Panels mit leichtem grünem Schimmer von oben */
[data-theme="forest"] :is(.tl-panel,.recent-list,.olf-panel){background:linear-gradient(180deg,rgba(34,197,94,.08),transparent 45%),var(--panel)}
[data-theme="forest"] .modal-bd{background:rgba(0,4,2,.72)}
/* Auf der hellgrünen Fundstelle braucht es dunkle Schrift */
[data-theme="forest"] ::highlight(ed-find-cur){color:#021208}
/* Grünes Logo, sein Punkt eine aufgehende Sonne mit grünem Hof */
[data-theme="forest"] .brand-ico{filter:hue-rotate(-66deg) saturate(1.15) drop-shadow(0 2px 8px rgba(34,197,94,.45))}
[data-theme="forest"] .brand-mark::after{
  content:'';position:absolute;left:16.3px;top:4.6px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 50% 62%,#fff4c7 0 14%,#fbbf24 38%,#f97316 68%,#ef4444 100%);
  box-shadow:0 0 5px 1px rgba(251,146,60,.6),0 0 11px 3px rgba(34,197,94,.35);
}
/* Heute ist Sonnenaufgang: Markierung und Linie in der Timeline */
[data-theme="forest"] .tl-day.today em{background:linear-gradient(135deg,#fde68a,#fbbf24 30%,#f97316 70%,#ef4444);color:#1a0d04}
[data-theme="forest"]{--today-glow:0 0 14px -2px rgba(249,115,22,.75)}
[data-theme="forest"] .tl-day.today b,[data-theme="forest"] .tl-now-l{color:#fdba74}
[data-theme="forest"] .tl-now{background:linear-gradient(180deg,#fdba74,rgba(239,68,68,.25))}

/* ---------- Summer ---------- */
[data-theme="summer"] :is(h1,h2,h3,.note-title,.nv-title,.ph-title,.dp-title,.ef-title,.bk-row h3){color:#111218}
/* Jeder Tab trägt seine Bereichsfarbe schon im Symbol */
[data-theme="summer"] .tab:not(.active)[data-view="capture"] .ico{color:#2c6ad5}
[data-theme="summer"] .tab:not(.active)[data-view="research"] .ico{color:#8151da}
[data-theme="summer"] .tab:not(.active)[data-view="reflections"] .ico{color:#846c21}
[data-theme="summer"][data-area="reflections"]{--today-glow:0 0 12px -2px #ffc81e}
[data-theme="summer"][data-area="reflections"] ::highlight(ed-find-cur){background-color:#ffc81e}

/* Kein Weichzeichner: die Seitenleiste ist eine halbdurchsichtige weiße Platte,
   durch die die Spritzer klar umrissen scheinen. Ihre leisesten Beschriftungen
   werden so dunkel wie --muted, damit sie auch dort lesbar bleiben. */
[data-theme="summer"] .rs-rail{background:rgba(255,255,255,.68)}
[data-theme="summer"] .rs-rail :is(.rail-n,.rail-sec,.rail-ghandle){color:var(--muted)}
[data-theme="summer"] .rail-grp{color:color-mix(in srgb,var(--c,var(--muted)) 55%,#1c1d24)}
[data-theme="summer"] .rail-foot{background:var(--panel);box-shadow:none}
[data-theme="summer"] .rail-hint{background:var(--panel)}
/* Die Karte liegt auf einer helleren Platte: Spritzer bleiben zu ahnen, Kanten lesbar */
[data-theme="summer"] .mm{background:color-mix(in srgb,var(--bg) 82%,transparent)}
[data-theme="summer"] :is(.mm-tools .btn,.mm-zoom,.mm-corner,.mm-mini,.mm-hints){background:var(--panel);backdrop-filter:none}
/* Die Liste ist dichte Schrift — sie bekommt festen Grund */
[data-theme="summer"] .lv-main{background:var(--bg)}
/* Kleine Schrift direkt auf dem Hintergrund bekommt festen Grund in Hintergrundfarbe:
   unsichtbar auf freier Fläche, ein sauberer Ausschnitt über einem Spritzer. */
[data-theme="summer"] :is(.vhead-title,.empty-state > *,.vhead-actions > .lv-lbl){background:var(--bg);box-shadow:0 0 0 6px var(--bg);border-radius:6px}
[data-theme="summer"] .rs-over .section-title{width:fit-content;background:var(--bg);box-shadow:0 0 0 6px var(--bg);border-radius:6px}
[data-theme="summer"] :is(.tc-add,.pcard-new,.bucket-new){background:var(--panel)}

/* Glow-Kacheln brauchen auf Weiß mehr Deckkraft: kräftigere Tönung, ein farbiger
   Hof rundum und ein farbiger Schein nach unten — beim Überfahren etwas mehr. */
[data-theme="summer"] :is(.note,.pcard:not(.pcard-new),.bkf-card){
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 15%,var(--panel)) 0%,var(--panel) 62%);
  border-color:color-mix(in srgb,var(--c) 46%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 11%,transparent),0 14px 26px -16px color-mix(in srgb,var(--c) 72%,transparent),var(--neu);
}
[data-theme="summer"] :is(.note,.pcard:not(.pcard-new),.bkf-card):hover{
  border-color:color-mix(in srgb,var(--c) 66%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent),0 18px 32px -14px color-mix(in srgb,var(--c) 85%,transparent),var(--neu-hover);
}
[data-theme="summer"] .bucket:not(.bucket-new){
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 15%,var(--panel)) 0,var(--panel) 190px);
  border-color:color-mix(in srgb,var(--c) 42%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 10%,transparent),0 16px 30px -18px color-mix(in srgb,var(--c) 70%,transparent),var(--neu);
}
[data-theme="summer"] .mm-node.t-doc{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 15%,var(--panel)) 0%,var(--panel) 75%);
  border-color:color-mix(in srgb,var(--c) 48%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 10%,transparent),0 12px 22px -14px color-mix(in srgb,var(--c) 70%,transparent),var(--neu);
}
[data-theme="summer"] .mm-node.t-doc:hover{border-color:color-mix(in srgb,var(--c) 68%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 15%,transparent),0 16px 28px -14px color-mix(in srgb,var(--c) 82%,transparent),var(--neu-hover)}
[data-theme="summer"] .mm-node.t-topic{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 13%,transparent),0 10px 20px -12px color-mix(in srgb,var(--c) 60%,transparent)}
[data-theme="summer"] .ecard{background:color-mix(in srgb,var(--c) 7%,var(--panel));border-color:color-mix(in srgb,var(--c) 32%,var(--line))}
/* Farbige Beschriftungen abgedunkelt, helle Farbpunkte mit feiner Kontur */
[data-theme="summer"] :is(.lv-ghead > .ico:nth-child(2),.sug-hash,.sug-item .ico,.pin-chip > .ico,.ed-pin.go > .ico,.tb-num,.bkf-mode .ico,.mv-type .ico,.mv-type.on){color:color-mix(in srgb,var(--c,var(--pt)) 62%,#1c1d24)}
[data-theme="summer"] :is(.rail-dot,.pc-dot,.bk-dot,.ph-dot,.stat-t i,.stat-chip i,.tl-leg i,.rr-proj i,.tpl-used i,.mv-dot,.tip-top i,.swatch span,.ed-pal button:not(.ed-pal-auto),.menu-dot){
  outline:1px solid color-mix(in srgb,var(--c) 55%,#1c1d24);outline-offset:-1px;
}
[data-theme="summer"] .ed-pdot{outline:1px solid color-mix(in srgb,var(--pg) 55%,#1c1d24);outline-offset:-1px}

/* ============================================================
   Schmale Fenster
   ============================================================ */
/* Die Suche gibt zuerst nach, dann fallen Datum und Untertitel weg */
@media (max-width:1480px){
  .today-chip{display:none}
}
@media (max-width:1320px){
  .brand-tag{display:none}
  .cmd-trigger{flex-basis:220px;min-width:110px}
  .ph-stats .stat-t{display:none}
  .ph-desc{max-width:340px}
}
@media (max-width:1240px){
  .backup-chip em,.cmd-trigger .cmd-kbd{display:none}
}
@media (max-width:1100px){
  .cmd-ph,.cmd-trigger .cmd-kbd{display:none}
  .cmd-trigger{flex:none;min-width:0;width:34px;padding:0;justify-content:center}
  .lv.has-pane{grid-template-columns:minmax(0,1fr)}
  .lv.has-pane .lv-main{display:none}
  .ph-actions .filter{width:160px}
}
@media (max-width:920px){
  .brand-tag{display:none}
  .tab kbd{display:none}
  .rs{grid-template-columns:minmax(0,1fr)}
  .rs-rail{display:none}
  .keys{grid-template-columns:1fr}
  .mmw.panel-open .mm-side{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);z-index:6;box-shadow:var(--shadow-pop)}
}
@media (max-width:640px){
  .tab span{display:none}
  .filter{width:100% !important}
  .vhead-actions{width:100%}
  .cap{padding:14px 14px 0}
  .cap-scroll{margin:0 -14px;padding:2px 14px 40px}
  .rf{padding:12px}
}

/* ---------- Backup-Import: Vorschau ---------- */
.imp-grid{display:grid;grid-template-columns:minmax(0,1fr) auto auto 52px;column-gap:22px;row-gap:7px;align-items:baseline;padding:6px 2px 4px}
.imp-grid b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);text-align:right}
.imp-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:right}
.imp-l{font-size:13px;color:var(--text-2)}
.imp-grid .imp-bak{color:var(--accent)}
.imp-grid > :nth-child(4n){text-align:right;font-family:var(--mono);font-size:11.5px}
.imp-eq{color:var(--faint)}
.imp-plus{color:var(--ok)}
.imp-minus{color:var(--danger)}
.imp-sep{border-top:1px dashed var(--line);padding-top:9px;margin-top:3px}
.imp-t{font-family:var(--mono);font-size:11.5px;color:var(--text);text-align:right;white-space:nowrap}
.imp-grid .imp-old{color:var(--warn)}
.imp-warn{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.55;color:var(--text-2);
  background:color-mix(in srgb,var(--warn) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line))}
.imp-warn .ico{color:var(--warn);flex:none;margin-top:2px}
.imp-warn b{color:var(--text)}
/* ---------- Papierkorb (views/trash.js) ---------- */
:root{--tr-capture:var(--mr-cap);--tr-research:var(--violet);--tr-reflections:var(--mr-ref)}
.tr-modal{height:min(88vh,980px)}
.tr-modal .modal-body{padding:0;display:flex;overflow:hidden}
.tr{display:flex;flex-direction:column;width:100%;min-height:0}
.tr-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:16px 16px 12px 22px;border-bottom:1px solid var(--line-soft)}
.tr-title{display:flex;align-items:center;gap:10px;min-width:0}
.tr-title > .ico{color:var(--muted)}
.tr-title h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.tr-sub{grid-column:1 / -1;margin:0;font-size:12.5px;color:var(--muted)}
.tr-tools{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.tr-tools .filter{width:240px}
.tr-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media (max-width:820px){.tr-main{grid-template-columns:1fr}.tr-preview{display:none}}
.tr-list{padding:6px 10px 24px 14px;border-right:1px solid var(--line-soft);outline:none}
.tr-sec{padding:14px 8px 6px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.tr-row{display:flex;align-items:center;gap:11px;padding:8px 8px 8px 9px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.tr-row:hover{background:var(--panel-2)}
.tr-row.on{background:var(--panel-2);border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.tr-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--panel))}
.tr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tr-t b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-t em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-left{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
.tr-left.soon{color:var(--warn)}
.tr-acts{flex:none;display:none;gap:3px}
.tr-row:hover .tr-acts,.tr-row.on .tr-acts{display:flex}
.tr-row:hover .tr-left,.tr-row.on .tr-left{display:none}
.tr-acts [data-forever]:hover{color:var(--danger)}
.tr-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:70px 20px;text-align:center;color:var(--muted)}
.tr-empty b{color:var(--text-2);font-weight:600;font-size:14px}
.tr-empty span{font-size:12.5px}
.tr-preview{padding:18px 24px 30px}
.tr-p-head{padding-bottom:14px;border-bottom:1px dashed var(--line-soft)}
.tr-p-kind{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--c)}
.tr-p-head h3{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:6px 0 4px;overflow-wrap:anywhere}
.tr-p-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.6}
.tr-p-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tr-p-btns kbd{font-size:9.5px;margin-left:4px}
.tr-p-info{font-size:12.5px;color:var(--text-2);line-height:1.55;margin:14px 0 0}
.tr-p-body{margin-top:14px;font-size:13.5px;line-height:1.65;opacity:.92}

/* Automatisches Backup (Einstellungen) */
.set-folder{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--text);background:var(--panel-2);border:1px solid var(--line-soft);border-radius:6px;padding:1px 7px;margin-right:4px}
.set-folder .ico{color:var(--accent)}
.set-bk-ok{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;color:var(--ok)}
.set-bk-err{color:var(--danger)}
.set-auto{flex-direction:column;align-items:stretch;gap:9px}
.set-auto .set-btns{flex-wrap:wrap;justify-content:flex-start}
.set-auto .set-btns .icon-btn{margin-left:auto}
.rst-list{display:flex;flex-direction:column;gap:4px;margin-top:10px;max-height:52vh;overflow:auto}
.rst-row{display:flex;align-items:center;gap:11px;text-align:left;padding:9px 11px;border-radius:10px;border:1px solid var(--line-soft);background:var(--panel-2);color:var(--text);cursor:pointer;transition:.12s}
.rst-row:hover{border-color:var(--line-strong);background:var(--panel-3)}
.rst-ico{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--panel);color:var(--accent)}
.rst-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rst-t b{font-size:13px;font-weight:600}
.rst-t em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.rst-m{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.imp-note{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
.imp-note b{color:var(--text-2)}
.imp-modal .modal-foot .spacer{flex:1}

/* ---------- Notiz nach Research verschieben ---------- */
.mv .pop-title{display:flex;align-items:center;gap:6px}
.mv-types{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.mv-type{
  display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:7px;font-family:var(--mono);font-size:10.5px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);transition:.12s;
}
.mv-type:hover{color:var(--text);border-color:var(--line-strong)}
.mv-type.on{color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);border-color:color-mix(in srgb,var(--c) 50%,transparent)}
.mv-type .ico{color:var(--c)}
.pick-item .mv-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent)}
.mv-note{font-size:11px;color:var(--faint);margin-top:8px;line-height:1.5}
.mv .pick-item em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}

/* ---------- Anheften in Reflections ---------- */
.bkf-pin{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:7px;background:transparent;color:var(--faint);
  display:grid;place-items:center;opacity:0;transition:opacity .14s,color .12s,background .12s;
}
.bkf-card{position:relative}
.bkf-card:hover .bkf-pin{opacity:1}
.bkf-pin:hover{background:var(--panel-3);color:var(--text)}
.bkf-card.pinned .bkf-pin{opacity:1;color:var(--c)}
.bkf-card.pinned{border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 16%,transparent)}
.ec-pin{color:var(--c);display:inline-flex;align-items:center}
.ecard.pinned{border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.bkf-pinned{gap:5px}
.bkf-pinned .bkf-pn{font-family:var(--mono);font-size:10px;color:var(--faint)}
.bkf-pinned.on{background:color-mix(in srgb,var(--c) 18%,transparent);border-color:color-mix(in srgb,var(--c) 50%,transparent);color:var(--text)}
.bkf-pinned.on .ico,.bkf-pinned.on .bkf-pn{color:var(--c)}

/* ---------- Verschieben-Fenster ---------- */
.mv-dest{width:100%;margin-bottom:8px}
.mv-dest .seg-btn{flex:1;justify-content:center}
.mv-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);margin:2px 0 9px;cursor:pointer}
.mv-check input{accent-color:var(--accent);width:14px;height:14px}

/* ---------- Tabellen-Größenwähler ---------- */
.pop-table .pop-body,.tp{min-width:210px}
.tp-head{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2);margin-bottom:8px}
.tp-head b{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--accent)}
.tp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.tp-grid i{
  height:20px;border-radius:4px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;transition:background .08s,border-color .08s;
}
.tp-grid i:nth-child(-n+6){border-color:var(--line-strong)}
.tp-grid i.on{background:color-mix(in srgb,var(--accent) 26%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.tp-note{font-size:11px;color:var(--faint);margin-top:9px;line-height:1.5}

/* ============================================================
   PDF (print.html, print.js) — ein Text oder ein Ast der Mindmap auf
   Papier, immer in der Schlicht-Optik (Regeln oben über .pr-body).
   Helle Papierpalette unabhängig vom Theme, A4, Fußzeile mit Seitenzahl
   (@page, Text kommt aus print.js). Gilt auch am Bildschirm, damit die
   Seite mit ?preview so aussieht, wie sie gedruckt wird.
   ============================================================ */
@page{size:A4;margin:16mm 17mm 17mm}
html[data-print]{--bg:#fff;--panel:#fff;--panel-2:#f6f7f9;--panel-3:#eef0f4;--code-bg:#f5f6f9;--ed-ink:#232a38;background:#fff}
html[data-print],html[data-print] body{height:auto;overflow:visible;background:#fff}
html[data-print] *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pr{max-width:180mm;margin:0 auto;padding:6mm 0 10mm;color:var(--ed-ink);height:auto;overflow:visible}   /* main der App hat eine feste Höhe */
@media print{.pr{max-width:none;padding:0}}
/* Kopf: Projekt, darunter der Titel */
.pr-head{margin:0 0 7mm;padding-bottom:4.5mm;border-bottom:1px solid var(--line)}
.pr-kicker{font-family:var(--mono);font-size:8pt;text-transform:uppercase;letter-spacing:.14em;color:var(--syn-kw)}
.pr-title{margin:2.2mm 0 0;font-family:var(--ed-font);font-variation-settings:"MONO" 0;font-size:21pt;font-weight:720;line-height:1.2;letter-spacing:-.01em;color:var(--ed-strong)}
.pr-meta{margin-top:2mm;font-family:var(--mono);font-size:8pt;color:var(--muted)}
/* Text: die Schlicht-Regeln, auf Papiermaße gebracht */
.pr-body{--ed-size:10.5pt;--ed-lh:1.62;--ed-mono:0}
.pr-body .md-wiki{border-bottom:0;color:var(--accent);cursor:default}
.pr-body a[href]{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:2px}
.pr-body a.md-url::after{content:none}
.pr-body pre.md-code{white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible;font-size:8.6pt}
.pr-body :is(.md-copy,.img-copy){display:none}
.pr-body :is(.md-math-b,.md-math-d,.md-table){overflow:visible}
.pr-body table{font-size:.9em}
.pr-body .img-w img{max-height:225mm;cursor:default;border-color:var(--line-soft)}
.pr-body .md-callout{background:color-mix(in srgb,var(--co) 7%,#fff)}
.pr-body details.md-callout .md-co-fold{display:none}
/* Inhalt (bei einem Ast): klickbar im PDF */
.pr-toc{margin:0 0 8mm;padding:4mm 5mm;border:1px solid var(--line-soft);border-radius:8px;font-family:var(--ed-font);font-size:9.5pt}
.pr-toc-h{font-family:var(--mono);font-size:7.5pt;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:2mm}
.pr-toc a{display:flex;gap:3mm;align-items:baseline;padding:.6mm 0 .6mm calc(var(--d,1) * 5mm - 5mm);color:var(--ed-ink);text-decoration:none}
.pr-toc a em{font-style:normal;font-family:var(--mono);font-size:7.5pt;color:var(--tc,var(--muted));min-width:16mm}
.pr-toc.long{break-after:page}
/* Abschnitte (Dokumente eines Asts) */
.pr-sec{margin-top:9mm;padding-top:5mm;border-top:1px dashed var(--line)}
.pr-sec.pr-first{margin-top:0;padding-top:0;border-top:0}
/* Option „Jedes Dokument auf einer neuen Seite“ — die Trennlinie braucht es dann nicht */
html[data-newpage] :is(.pr-sec:not(.pr-first),.pr-toc ~ .pr-sec){break-before:page;margin-top:0;padding-top:0;border-top:0}   /* nach dem Inhalt auch das erste */
.pr-sec-k{font-family:var(--mono);font-size:7.5pt;text-transform:uppercase;letter-spacing:.12em;color:var(--tc,var(--muted))}
.pr-sec-t{margin:1.2mm 0 0;font-family:var(--ed-font);font-variation-settings:"MONO" 0;font-weight:720;line-height:1.25;color:var(--ed-strong);font-size:calc(15pt - var(--d,1) * 1pt)}
.pr-sec > .pr-body{margin-top:3mm}
.pr-empty{font-family:var(--mono);font-size:8.5pt;color:var(--faint)}
/* Seitenumbrüche: Blöcke nicht zerteilen, Überschriften beim Text halten */
.pr-body :is(pre,.md-callout,.md-math-b,.img-w,blockquote,tr,li),.pr-toc{break-inside:avoid}
.pr-body :is(h1,h2,h3,h4,h5,h6),.pr-sec-k,.pr-sec-t,.pr-meta{break-after:avoid}
/* Optimierte Seitenformatierung (?flow, print.js → optimizeBreaks): große Kästen tragen .pr-flow
   und dürfen umbrechen — nur an Nahtstellen und mit Mindestrest auf beiden Seiten */
html[data-measure] .pr{width:176mm;max-width:none;margin:0;padding:0}   /* messen in Druckbreite */
html[data-flow] .pr-body .pr-flow,html[data-flow] .pr-toc.pr-flow{break-inside:auto;box-decoration-break:clone;-webkit-box-decoration-break:clone}
html[data-flow] .pr-body :is(p,li,blockquote,.md-co-body){orphans:3;widows:3}
html[data-flow] .pr-body pre.md-code.pr-flow{orphans:4;widows:4}
html[data-flow] .pr-body pre.pr-flow code{display:block}
html[data-flow] .pr-body .pr-cb{display:block}
html[data-flow] .pr-body .pr-cb.keep{break-inside:avoid}
html[data-flow] .pr-body .pr-cb + .pr-cb{margin-top:calc(var(--gap,1) * 1lh)}   /* die Leerzeile davor — fällt am Seitenanfang weg */
html[data-flow] .pr-body .md-callout.pr-flow .md-co-head{break-after:avoid}
html[data-flow] .pr-body .md-table.pr-flow thead{display:table-header-group;break-after:avoid}
html[data-flow] .pr-body .md-table.pr-flow tbody tr:first-child{break-after:avoid}
html[data-flow] .pr-body .md-table.pr-flow tbody tr:last-child{break-before:avoid}
/* Ast als PDF: Reihenfolge und Auswahl vor dem Druckdialog (pdf.js) */
.pdo-modal .modal-titles h3{display:flex;align-items:center;gap:8px}
.pdo-hint{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pdo-hint kbd{font-size:10px}
.pdo-list{display:flex;flex-direction:column;gap:2px;max-height:min(56vh,520px);overflow-y:auto;scrollbar-width:thin;padding:2px;margin:0 -2px}
.pdo-row{
  display:flex;align-items:center;gap:8px;min-height:34px;padding:0 6px 0 calc(4px + (var(--d,1) - 1) * 20px);
  border-radius:8px;background:var(--panel);border:1px solid transparent;cursor:pointer;user-select:none;
  transition:background .12s,border-color .12s,opacity .12s;
}
.pdo-row:hover{background:var(--panel-2)}
.pdo-row:focus-visible{outline:none;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.pdo-row.fixed{cursor:pointer;border-bottom:1px dashed var(--line-soft);border-radius:8px 8px 0 0;margin-bottom:4px}
.pdo-grip{flex:none;width:20px;height:28px;display:grid;place-items:center;color:var(--faint);cursor:grab;touch-action:none;border-radius:6px}
.pdo-grip:hover{color:var(--text);background:var(--panel-3)}
.pdo-on{flex:none;margin:0;accent-color:var(--accent);cursor:pointer}
.pdo-type{flex:none;min-width:64px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--tc,var(--muted))}
.pdo-t{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdo-row.off .pdo-t,.pdo-row.off .pdo-type{opacity:.4}
.pdo-row.off .pdo-t{text-decoration:line-through;text-decoration-color:var(--faint)}
.pdo-mv{flex:none;display:flex;gap:1px;opacity:0;transition:opacity .12s}
.pdo-row:hover .pdo-mv,.pdo-row:focus-visible .pdo-mv{opacity:1}
.pdo-mv button{width:24px;height:24px;padding:0;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.pdo-mv button:hover:not(:disabled){background:var(--panel-3);color:var(--text)}
.pdo-mv button:disabled{opacity:.3}
.pdo-opt{display:flex;align-items:center;gap:8px;margin:12px 2px 0;padding-top:10px;border-top:1px dashed var(--line-soft);font-size:13px;color:var(--text-2);cursor:pointer;user-select:none}
.pdo-opt input{margin:0;accent-color:var(--accent);cursor:pointer}
.pdo-opt + .pdo-opt{margin-top:8px;padding-top:0;border-top:0;align-items:flex-start}
.pdo-opt + .pdo-opt input{margin-top:3px}
.pdo-opt span{display:flex;flex-direction:column;gap:2px}
.pdo-opt em{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted)}
.pdo-list.sorting .pdo-row{transition:transform .14s ease}
.pdo-list.sorting .pdo-row.drag{transition:none;position:relative;z-index:2;background:var(--panel-2);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow-sm)}
.pdo-list.sorting .pdo-row.drag .pdo-grip{cursor:grabbing;color:var(--accent)}
/* Der unsichtbare Rahmen, in dem Vault das PDF vorbereitet (pdf.js) */
.pdf-frame{position:fixed;right:0;bottom:0;width:0;height:0;border:0;opacity:0;pointer-events:none}

/* ============================================================
   WEB-CLIPPER — das kleine Fenster des Lesezeichens (clip.html)
   ============================================================ */
html[data-clip] body{background:var(--panel);overflow:hidden}
.cl{height:100%;display:flex;flex-direction:column;--c:var(--accent)}
.cl-head{display:flex;align-items:center;gap:10px;padding:12px 14px 11px 16px;border-bottom:1px solid var(--line-soft);background:var(--bg-soft)}
.cl-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);color:var(--accent);flex:none}
.cl-ht{display:flex;flex-direction:column;gap:1px;min-width:0}
.cl-ht b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.cl-kicker{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--syn-kw)}
.cl-host{display:inline-flex;align-items:center;gap:5px;max-width:46%;font-family:var(--mono);font-size:11px;color:var(--muted);text-decoration:none;padding:3px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel-2)}
.cl-host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-host:hover{color:var(--text);border-color:var(--line-strong)}
.cl-body{flex:1;min-height:0;overflow:auto;padding:6px 18px 14px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.cl-title{width:100%;border:0;outline:none;background:transparent;font-size:20px;font-weight:700;letter-spacing:-.02em;padding:10px 0 0;color:var(--text)}
.cl-title::placeholder{color:var(--faint);font-weight:600}
.cl-video{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);padding:8px 10px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line-soft)}
.cl-video span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-video b{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);padding:1px 7px;border-radius:6px;white-space:nowrap}
.cl-video .ico{color:#ff4e45;flex:none}
.cl-sec{display:flex;flex-direction:column;gap:7px}
.cl-label{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.cl-label .ico{color:var(--c)}
.cl-mini{font-family:var(--sans);font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--muted);background:transparent;border:0;padding:2px 6px;border-radius:6px}
.cl-mini:hover{color:var(--text);background:var(--panel-2)}
.cl-quote{margin:0;max-height:38vh;overflow:auto;padding:10px 14px 10px 16px;border-radius:0 10px 10px 0;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 7%,var(--bg-soft));font-size:14.5px;line-height:1.6;scrollbar-width:thin}
.cl-quote.md p:last-child{margin-bottom:0}
.cl-quote-ta,.cl-thought{width:100%;resize:none;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);padding:10px 12px;line-height:1.55;outline:none;max-height:38vh;overflow:auto;transition:border-color .12s,box-shadow .12s}
.cl-quote-ta{font-family:var(--mono);font-size:12.5px}
.cl-thought{font-size:14px;min-height:76px}
.cl-quote-ta:focus,.cl-thought:focus{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.cl-thought::placeholder{color:var(--faint)}
.cl-cite{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--text-2);padding-left:2px;min-width:0}
.cl-cite span{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
.cl-url{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--muted);min-width:0}
.cl-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:10px;border-top:1px dashed var(--line-soft)}
.cl-tags .qc-label{margin-left:0;width:auto;margin-right:4px}
.cl-foot{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-top:1px solid var(--line-soft);background:var(--bg-soft)}
.cl-hint{font-size:11.5px;color:var(--muted)}
.cl-hint b{color:var(--warn);font-weight:600}
.cl-hint .cl-err{color:var(--danger,#f87171)}
.cl-empty,.cl-done{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px;max-width:380px}
.cl-empty b,.cl-done b{font-size:16px;font-weight:700}
.cl-empty p,.cl-done p{margin:0;font-size:13px;color:var(--text-2);line-height:1.55}
.cl-empty .cl-logo{width:44px;height:44px;border-radius:12px;margin-bottom:4px}
.cl-empty .btn,.cl-done .btn{margin-top:8px}
.cl-done p span{font-family:var(--mono);font-size:12px;color:var(--c)}
.cl-done .cl-sub{font-size:12px;color:var(--muted)}
.cl-check{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 7%,transparent);margin-bottom:4px;animation:clPop .32s cubic-bezier(.3,1.5,.6,1)}
@keyframes clPop{from{transform:scale(.6);opacity:0}}

/* ============================================================
   MOBIL — iPhone, iPad, Android (role.js)
   data-mobile: gekoppeltes Gerät (Rechte) · data-device: phone | tablet | desktop (Layout)
   ============================================================ */
/* Rechte: was nur am Mac geht */
html[data-mobile] :is(.mac-only,.backup-chip){display:none !important}

/* ---------- Kopplungsbildschirm (in der Cloud, noch nicht gekoppelt) ---------- */
body.pairing > :not(.ps):not(#toast){display:none !important}
body.pairing{overflow:auto}
.ps{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));background:var(--bg)}
.ps-card{width:min(420px,100%);display:flex;flex-direction:column;gap:14px;padding:30px 22px 24px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-pop);text-align:center}
.ps-card img{align-self:center;filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--accent) 40%,transparent))}
.ps-card h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
.ps-card p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.ps-code{font-family:var(--mono);font-size:22px;letter-spacing:.14em;text-align:center;text-transform:uppercase;padding:13px 10px}
.ps-code::placeholder{letter-spacing:.14em}
.ps-card .btn{justify-content:center;height:46px;font-size:15px}
.ps-msg{min-height:1.4em;font-size:13px !important}
.ps-msg.err{color:var(--danger) !important}
.ps-warn{display:flex;gap:9px;text-align:left;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--warn) 11%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));font-size:13px !important}
.ps-warn .ico{color:var(--warn);flex:none;margin-top:3px}
.ps-hint{font-size:12.5px !important;color:var(--muted) !important}

/* ---------- App-Sperre ---------- */
.lock{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:var(--bg)}
.lock-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.lock-card b{font-size:18px;font-weight:700}
.lock-card .btn{height:48px;padding:0 24px;font-size:15px}
.lock-msg{margin:0;font-size:13px;color:var(--muted);min-height:1.3em}

/* ---------- Installieren, offline ---------- */
.install-bar{position:fixed;left:12px;right:12px;top:calc(var(--topbar-h) + 8px);z-index:900;display:flex;align-items:flex-start;gap:10px;padding:11px 10px 11px 14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line-strong);box-shadow:var(--shadow-pop);font-size:13px;line-height:1.5;color:var(--text-2);max-width:560px;margin:0 auto}
.install-bar > .ico{color:var(--accent);flex:none;margin-top:3px}
.install-bar > span{flex:1}
html[data-offline] .m-title::after{content:'offline';margin-left:8px;vertical-align:middle;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}

/* ---------- Touch allgemein (iPad, Handy) ---------- */
@media (hover:none){
  .note .note-acts{opacity:1}
  .note-acts button{width:32px;height:32px}
  .mm-hints{display:none}
  .btn kbd,.ed-fstat > .ed-fesc{display:none}
}
.mm-ro :is(.mm-tools,.mm-hints,.mm-handle){display:none !important}
.qc-photo{display:none}
html:is([data-device="phone"],[data-device="tablet"]) .qc-photo{display:inline-flex}
html[data-device="tablet"] :is(.btn,.icon-btn){min-height:34px}
html[data-device="tablet"] .ef-scale button{width:40px;height:40px}

/* Research: zurück zu den Projekten, wenn der Explorer nicht zu sehen ist */
.ph-back{display:none}
@media (max-width:920px){.ph-back{display:inline-grid}}

/* Lesen auf iPhone/iPad (mreader.js) — Pure Reading über allem */
.mrd .ed.is-focus{z-index:600}
html[data-mobile] .ed [data-popout]{display:none}

/* „Heute“ in Reflections (iPhone, iPad) */
.rf-today{display:none}
html[data-mobile] .rf-today,html[data-device="phone"] .rf-today{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:none;padding:1px}
.rf-today::-webkit-scrollbar{display:none}
.rft{flex:0 0 auto;min-width:170px;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:14px;text-align:left;
  background:color-mix(in srgb,var(--c) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 26%,var(--line));color:var(--text)}
.rft-emo{font-size:20px;line-height:1;flex:none}
.rft-emo i{display:block;width:10px;height:10px;border-radius:50%;background:var(--c)}
.rft-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rft-t b{font-size:14px;font-weight:600}
.rft-t span{font-size:12px;color:var(--muted);white-space:nowrap}
.rft.open .rft-t span{color:var(--c)}
.rft-go{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.rft.done .rft-go{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}

/* ---------- Handy: Rahmen ---------- */
.m-title,.mtabs,.m-sync,.fab{display:none}
html[data-device="phone"]{--topbar-h:calc(52px + env(safe-area-inset-top));--statusbar-h:0px;--mtabs-h:60px}
html[data-device="phone"] .topbar{padding:env(safe-area-inset-top) 8px 0 12px;gap:8px}
html[data-device="phone"] :is(.tabs,.cmd-trigger,.today-chip,.theme-sw,.brand-name,.brand-tag,.backup-chip,.pin-chip,.statusbar){display:none !important}
html[data-device="phone"] .m-title{display:block;flex:1;min-width:0;font-size:18px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-device="phone"] .m-sync:not(.hidden){display:block;width:9px;height:9px;padding:0;border:0;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 15%,transparent)}
html[data-device="phone"] .m-sync.busy{background:var(--accent);animation:pulse 1s infinite}
html[data-device="phone"] .m-sync.warn{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 15%,transparent)}
html[data-device="phone"] .topbar-right{gap:4px}
html[data-device="phone"] main{height:calc(100vh - var(--topbar-h) - var(--mtabs-h) - env(safe-area-inset-bottom));height:calc(100dvh - var(--topbar-h) - var(--mtabs-h) - env(safe-area-inset-bottom))}
html[data-device="phone"] .mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;height:calc(var(--mtabs-h) + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-top:1px solid var(--line)}
.mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.mtab.active{color:var(--accent)}
.mtab.active .ico{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 55%,transparent))}
html[data-device="phone"] .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(var(--mtabs-h) + env(safe-area-inset-bottom) + 16px);z-index:70;
  width:58px;height:58px;border-radius:19px;border:0;background:var(--accent-fill);color:var(--accent-ink);
  box-shadow:0 12px 28px -10px color-mix(in srgb,var(--accent) 75%,transparent),var(--shadow-pop)}
html[data-device="phone"] .view:not(.active) .fab{display:none}
html[data-device="phone"] body{-webkit-tap-highlight-color:transparent}
html[data-device="phone"] .toast{bottom:calc(var(--mtabs-h) + env(safe-area-inset-bottom) + 14px);max-width:calc(100vw - 24px);z-index:950}

/* Fenster füllen auf dem Handy den Bildschirm (Rückfragen bleiben klein) */
html[data-device="phone"] .modal-bd{padding:0 !important;align-items:stretch !important}
html[data-device="phone"] .modal:not(.modal-confirm){width:100vw !important;max-height:none;height:100vh;height:100dvh;border-radius:0;border:0;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
html[data-device="phone"] .modal-bd:has(.modal-confirm){align-items:center !important;padding:16px !important}
html[data-device="phone"] .nv-modal .modal{background:var(--panel)}
html[data-device="phone"] .ed.is-focus{padding:calc(10px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));--ed-px:18px}
html[data-device="phone"] .ed.is-focus > .ed-fstat{max-width:100%;overflow-x:auto;scrollbar-width:none;gap:10px;margin-top:8px}
html[data-device="phone"] .ed-fstat > span + span{padding-left:10px}
html[data-device="phone"] .ed-fstat > :is(.ed-fpos,.ed-ftime,.ed-tmrw){display:none}
html[data-device="phone"] .ed.is-pure .ed-phead{white-space:normal;line-height:1.55;padding:12px 18px 10px}
html[data-device="phone"] .ed.is-pure .ed-view{padding:16px 18px 8px 30px}   /* links: Platz für die Gliederungsleiste */
html[data-device="phone"] :is(input,textarea,select,.ed-ta){font-size:16px}       /* sonst zoomt iOS beim Tippen */
html[data-device="phone"] .set-theme{flex-wrap:wrap;max-width:100%}
html[data-device="phone"] .pal-modal .modal-body{display:flex;flex-direction:column;overflow:hidden}
html[data-device="phone"] .pal-list{flex:1;max-height:none}
html[data-device="phone"] .pal-item{grid-template-columns:30px minmax(0,1fr);row-gap:2px;padding:9px 10px}
html[data-device="phone"] .pal-item > .pal-ico{grid-row:span 2;align-self:start}
html[data-device="phone"] .pal-item > .pal-sub{grid-column:2;max-width:none}
html[data-device="phone"] .pal-item > :nth-child(n+4){display:none}
html[data-device="phone"] .pal-foot{overflow-x:auto;scrollbar-width:none;border-radius:0;white-space:nowrap}
html[data-device="phone"] .pal-foot > *{flex:none}
html[data-device="phone"] .set-keys{display:none}
html[data-device="phone"] .qc-modal .modal-body{display:flex;flex-direction:column;overflow:hidden}
html[data-device="phone"] .qc{flex:1;max-height:none}
html[data-device="phone"] .qc-scroll{max-height:none}
html[data-device="phone"] .qc-title{padding-left:20px}
html[data-device="phone"] .qc-tags{padding-left:16px}
html[data-device="phone"] .qc-label{display:none}
html[data-device="phone"] .qc-meta{display:none}
html[data-device="phone"] .qc-foot{border-radius:0;padding:10px 12px}

/* Capture */
html[data-device="phone"] .cap{padding:10px 12px 0}
html[data-device="phone"] .cap .vhead{gap:8px;margin-bottom:10px}
html[data-device="phone"] .cap .vhead-title,html[data-device="phone"] #capNew,html[data-device="phone"] .cap .lv-lbl{display:none}
html[data-device="phone"] .cap .vhead-actions{width:100%;display:flex;gap:8px;flex-wrap:nowrap}
html[data-device="phone"] .cap .vhead-actions .filter{flex:1;width:auto !important;min-width:0}
html[data-device="phone"] .cap .cap-sort{display:none}
html[data-device="phone"] .tagbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px 10px;padding:0 12px 2px}
html[data-device="phone"] .tagbar::-webkit-scrollbar{display:none}
html[data-device="phone"] .tagchip{flex:none}
html[data-device="phone"] .note-acts{display:none}
html[data-device="phone"] .cap-scroll{padding-bottom:96px !important}

/* Reflections */
html[data-device="phone"] .rf{padding:10px 10px 0;gap:10px}
html[data-device="phone"] .tl-panel{height:210px}
html[data-device="phone"] :is(.tl-stats,.tl-legend,#tlMode,.zoomer,.tl-range){display:none !important}
html[data-device="phone"] .tl-head{padding:8px 10px 2px 14px}
html[data-device="phone"] .rf-sub .vhead-title{display:none}
html[data-device="phone"] .rf-sub .filter{flex:1;width:auto !important}
html[data-device="phone"] .rf-sub #rfStats span{display:none}
html[data-device="phone"] .buckets{scroll-snap-type:x mandatory;gap:10px;padding:0 0 10px}
html[data-device="phone"] .bucket{flex:0 0 calc(100vw - 44px);scroll-snap-align:center}
html[data-device="phone"] .ef-head{padding:12px 12px 10px 14px;border-radius:0}
html[data-device="phone"] .ef-body{padding:12px 10px 40px}
html[data-device="phone"] .ef-q{padding:12px}
html[data-device="phone"] :is(.ef-hint,.ef-list){margin-left:0}
html[data-device="phone"] .ef-ans{margin-left:0;width:100%}
html[data-device="phone"] .ef-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-left:0;gap:6px}
html[data-device="phone"] .ef-scale button{width:auto;height:46px;font-size:16px}
html[data-device="phone"] .ef-scale-lbl{grid-column:1/-1;margin:4px 0 0}
html[data-device="phone"] .ef-foot{border-radius:0;padding:10px 12px;gap:10px}
html[data-device="phone"] .ef-meta{display:none}
html[data-device="phone"] .ef-yn{margin-left:0}
html[data-device="phone"] .ef-yn button{flex:1;height:46px}

/* Research: Übersicht, Liste und Lesen */
html[data-device="phone"] .rs-over{padding:12px 12px 40px}
html[data-device="phone"] .rs-over > .vhead{display:none}
html[data-device="phone"] .proj-grid{grid-template-columns:minmax(0,1fr);gap:12px}
html[data-device="phone"] .recent{margin-top:22px}
html[data-device="phone"] .recent-row{grid-template-columns:20px minmax(0,1fr) auto;gap:10px}
html[data-device="phone"] .recent-row :is(.rr-ex,.rr-proj){display:none}
html[data-device="phone"] .rr-time{white-space:nowrap}
html[data-device="phone"] .proj-head{padding:10px 12px;gap:8px}
html[data-device="phone"] :is(.ph-crumbs,.ph-stats,.seg-view,.lv-bar .lv-lbl,.lv-sort){display:none !important}
html[data-device="phone"] .ph-actions{width:100%}
html[data-device="phone"] .ph-actions .filter{flex:1;width:auto !important}
html[data-device="phone"] .lv-bar{padding:8px 12px}
html[data-device="phone"] .lv-scroll{padding:4px 6px 60px}
html[data-device="phone"] .lv-row{grid-template-columns:minmax(0,1fr);padding:9px 8px}
html[data-device="phone"] .lv-row > :not(.lv-name){display:none}
html[data-device="phone"] .lv-headrow{display:none}
html[data-device="phone"] .rs-main .vhead{padding:12px 12px 0}