:root {
  --bg: #0e1016; --panel: #161922; --panel-2: #1d212d; --line: #2a2f3d;
  --ink: #e6e8ee; --ink-dim: #9aa0ae; --thread: #d4a24e; --thread-soft: #6b5836;
  --accent: #7aa2f7; --broken: #e06c75;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* Liste — Lesebereich — Graph. Der Graph liegt rechts und bekommt den Rest. */
#app { display: grid; grid-template-columns: 260px 420px 6px 1fr; grid-template-rows: 100vh; height: 100vh; }
#sidebar { order: 1; }
#reader { order: 2; }
#split { order: 3; }
#graph-wrap { order: 4; }

/* Ziehbalken zwischen Lesebereich und Graph */
#split { background: var(--line); cursor: col-resize; position: relative; }
#split:hover, #split:active { background: var(--thread-soft); }
#split::after { content: ""; position: absolute; inset: 0 -4px; }
#app > * { min-height: 0; min-width: 0; overflow: hidden; }
@media (max-width: 1100px) { #app { grid-template-columns: 1fr !important; grid-template-rows: 100vh; }
  #sidebar, #reader, #split { display: none; } }

#sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.brand h1 { margin: 0; font-size: 20px; letter-spacing: .5px; font-weight: 600; }
.brand h1 .a { color: var(--thread); }
.brand p { margin: 4px 0 0; font-size: 12px; color: var(--ink-dim); }
.stats { display: flex; gap: 6px; padding: 14px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.stat { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; flex: 1 1 auto; min-width: 64px; }
.stat b { display: block; font-size: 18px; color: var(--thread); }
.stat span { font-size: 11px; color: var(--ink-dim); }
.search { padding: 12px 16px; }
.search input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 9px 11px; font-size: 13px; outline: none; }
.search input:focus { border-color: var(--thread-soft); }
#filelist { overflow-y: auto; flex: 1; padding: 4px 8px 16px; }
.file { padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file:hover { background: var(--panel-2); color: var(--ink); }
.file.active { background: var(--thread-soft); color: #fff; }
.file .deg { float: right; font-size: 10px; opacity: .55; }
/* Ordner-Gruppierung in der Liste */
.folder { display: flex; align-items: center; gap: 7px; padding: 14px 10px 6px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.folder i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.folder .cnt { margin-left: auto; opacity: .6; letter-spacing: 0; }
.file { padding-left: 24px; }
.file .sub { display: block; font-size: 10px; opacity: .5; padding-left: 0; }

/* Legende der Ordnerfarben ueber dem Graphen */
#legend { position: absolute; left: 16px; top: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px;
  max-width: 62%; background: rgba(14,16,22,.72); padding: 7px 11px; border-radius: 8px;
  backdrop-filter: blur(6px); font-size: 11px; color: var(--ink-dim); }
#legend .leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  cursor: pointer; padding: 2px 5px; border-radius: 5px; }
#legend .leg i { width: 8px; height: 8px; border-radius: 50%; }
#legend .leg:hover { color: var(--ink); background: rgba(255,255,255,.05); }
#legend .leg.on { color: var(--ink); background: rgba(212,162,78,.16); }
#legend .leg.clear { color: var(--thread); text-decoration: underline; }

/* Tag-Liste in der Seitenleiste, auf- und zuklappbar */
#tags { border-top: 1px solid var(--line); flex: none; display: flex; flex-direction: column; min-height: 0; }
#tags.open { max-height: 32vh; }
.tags-head { width: 100%; display: flex; align-items: center; gap: 7px; background: none; border: none;
  color: var(--ink-dim); font: 500 11px/1 inherit; letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 16px; cursor: pointer; text-align: left; }
.tags-head:hover { color: var(--ink); }
.tags-head .caret { font-size: 9px; opacity: .7; }
.tags-head .n { margin-left: auto; opacity: .6; letter-spacing: 0; }
#tags.closed .tags-body { display: none; }
.tags-body { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 14px; overflow-y: auto; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; color: var(--ink-dim); }
.tag-chip i { font-style: normal; opacity: .5; font-size: 10px; }
.tag-chip:hover { color: var(--ink); border-color: var(--thread-soft); }
.tag-chip.on { background: rgba(212,162,78,.16); border-color: var(--thread-soft); color: var(--thread); }

/* Ordnerzeile als Filter */
.folder[data-folder] { cursor: pointer; }
.folder[data-folder]:hover { color: var(--ink); }
.folder.on { color: var(--thread); }

#graph-wrap { position: relative; overflow: hidden; }
#graph { display: block; width: 100%; height: 100%; cursor: grab; }
#graph:active { cursor: grabbing; }
.hud { position: absolute; left: 16px; bottom: 14px; font-size: 11px; color: var(--ink-dim);
  background: rgba(14,16,22,.7); padding: 6px 10px; border-radius: 8px; backdrop-filter: blur(6px); }
.toolbar { position: absolute; right: 16px; top: 14px; display: flex; gap: 6px; }
.toolbar button { background: rgba(29,33,45,.85); border: 1px solid var(--line); color: var(--ink-dim);
  border-radius: 7px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.toolbar button:hover { color: var(--ink); border-color: var(--thread-soft); }
/* Regler fuer den Fokus-Kontrast */
.toolbar .focus { width: 92px; align-self: center; accent-color: var(--thread); cursor: pointer;
  background: rgba(29,33,45,.85); border: 1px solid var(--line); border-radius: 7px; padding: 0 6px; height: 28px; }

#reader { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 0; }
.reader-empty { color: var(--ink-dim); padding: 40px 28px; text-align: center; }
.reader-empty .big { font-size: 40px; opacity: .3; }
.doc { padding: 26px 30px 60px; }
.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px; }
.doc-head h2 { margin: 0 0 6px; font-size: 22px; }
.doc-head { position: relative; }
/* Vor und zurueck im Verlauf */
.doc-head .nav { display: flex; gap: 4px; margin-bottom: 10px; }
.doc-head .nav button { width: 26px; height: 24px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: 6px; font-size: 15px; line-height: 1; cursor: pointer; }
.doc-head .nav button:hover:not(:disabled) { color: var(--thread); border-color: var(--thread-soft); }
.doc-head .nav button:disabled { opacity: .35; cursor: default; }
.doc-head .meta { font-size: 12px; color: var(--ink-dim); }
.edit-link { position: absolute; right: 0; top: 0; background: none; border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: 7px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.edit-link:hover { color: var(--thread); border-color: var(--thread-soft); }

/* Bearbeiten */
.editor { display: flex; flex-direction: column; gap: 10px; }
.editor textarea { width: 100%; min-height: 58vh; resize: vertical; background: #0b0d13;
  color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  font: 13px/1.7 "SF Mono", Menlo, monospace; outline: none; }
.editor textarea:focus { border-color: var(--thread-soft); }
.edit-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edit-bar button { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 7px; padding: 8px 15px; font-size: 13px; cursor: pointer; }
.edit-bar button.primary { background: var(--thread); border-color: var(--thread); color: #1a1205; font-weight: 600; }
.edit-bar button:disabled { opacity: .6; cursor: default; }
.edit-bar .hint { font-size: 11px; color: var(--ink-dim); margin-left: auto; }
.doc h1,.doc h2,.doc h3 { line-height: 1.3; }
.doc h1 { font-size: 24px; } .doc h2 { font-size: 20px; } .doc h3 { font-size: 17px; }
.doc p { margin: 10px 0; } .doc a { color: var(--accent); text-decoration: none; }
.doc a:hover { text-decoration: underline; }
.doc .wikilink { color: var(--thread); border-bottom: 1px dotted var(--thread-soft); }
.doc .wikilink.broken { color: var(--broken); border: none; cursor: help; }
/* Toter Verweis, der sich anlegen laesst */
.doc .wikilink.broken.creatable { cursor: pointer; border-bottom: 1px dashed var(--broken); }
.doc .wikilink.broken.creatable::after { content: "+"; font-size: 10px; vertical-align: super; margin-left: 2px; opacity: .7; }
.doc .wikilink.broken.creatable:hover { color: var(--thread); border-bottom-color: var(--thread); }
.doc .wikilink.broken.busy { opacity: .45; pointer-events: none; }
.doc .tag { color: #b3f; background: rgba(122,102,247,.12); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.doc code { background: var(--panel-2); padding: 2px 6px; border-radius: 5px; font-size: 13px;
  font-family: "SF Mono", Menlo, monospace; }
.doc pre.code { background: #0b0d13; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  overflow-x: auto; font-size: 13px; }
.doc pre.code code { background: none; padding: 0; }
.doc blockquote { border-left: 3px solid var(--thread-soft); margin: 12px 0; padding: 2px 14px; color: var(--ink-dim); }
/* Tabellen: bei schmalem Lesebereich seitlich scrollbar statt gequetscht */
.doc .table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 9px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 13px; }
.doc thead th { background: var(--panel-2); color: var(--ink); font-weight: 600; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.doc tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-dim); vertical-align: top; }
.doc tbody tr:last-child td { border-bottom: none; }
.doc tbody tr:hover td { background: rgba(255,255,255,.02); color: var(--ink); }
.doc hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.backlinks { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; }
.backlinks h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); margin: 0 0 10px; }
.backlink { display: block; padding: 6px 10px; border-radius: 7px; background: var(--panel-2); margin-bottom: 5px;
  font-size: 13px; color: var(--thread); cursor: pointer; }
.backlink:hover { background: var(--thread-soft); color: #fff; }