/* ===================================================================
   Context Orbit, Eclipta Design System
   Dunkle editoriale Basis, EIN roter Akzent, scharfe Kanten, Haarlinien.
   Kein Glow, keine Rundungen, keine dekorativen Gradients
   (linear-gradient ausschliesslich fuer das gemandatete Grid-Overlay).
   Hierarchie ueber Serif-Displays, Mono-Overlines und Haarlinien-Raster.
   =================================================================== */

/* ---------- Self-hosted Fonts (latin-Subset, woff2) ----------
   ?v=5c447ecd0160 ist der Abdruck dieser Auslieferung; der Server setzt ihn beim
   Ausliefern ein (app/ui_auslieferung.py). Damit darf der Browser die
   Schriften ein Jahr behalten, statt sie bei jedem Aufruf neu nachzufragen —
   ueber den Tunnel waren das sechs Anfragen zu je rund einer halben Sekunde.
   Aendert sich eine Schrift, aendert sich der Abdruck und damit die Adresse. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/newsreader-400.woff2?v=5c447ecd0160") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-500.woff2?v=5c447ecd0160") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/newsreader-600.woff2?v=5c447ecd0160") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400.woff2?v=5c447ecd0160") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-400.woff2?v=5c447ecd0160") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-500.woff2?v=5c447ecd0160") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-600.woff2?v=5c447ecd0160") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/hanken-700.woff2?v=5c447ecd0160") format("woff2")}

/* ---------- Token-Vertrag (VERBINDLICH) ---------- */
:root{
  color-scheme:dark;
  /* Flaechen */
  --bg:#0a0a0a;
  --bg-cover:#000000;
  --surface:#111111;
  --surface-2:#161616;
  /* Text */
  --fg:#ffffff;
  --body:rgba(255,255,255,.70);
  --muted:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.20);
  --line-soft:rgba(255,255,255,.07);
  /* Interaktiv: dezentes Weiss. Rot bleibt Marke/Akzent, nicht "du bist hier". */
  --interactive:rgba(255,255,255,.90);
  /* Akzent, sparsam */
  --oxblood:#9e2b1e;
  --signal:#d8412f;
  --danger:#b3402f;
  /* Typografie */
  --serif:"Newsreader",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* Grid */
  --grid:46px;
  font-size:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--oxblood);color:#fff}

/* ---------- Textur: Grid-Overlay + Film-Grain (fixed, hinter Inhalt) ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hidden{display:none!important}
a{color:var(--signal);text-decoration:none}
a:hover{color:var(--fg)}

/* Fokus-Konvention: praezise weisse Kante, kein Glow. */
:focus{outline:none}
:focus-visible{outline:1px solid var(--interactive);outline-offset:2px}

/* Dezente, scharfe Scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}

/* =========================================================
   Geteilte Utility-Klassen (auch von tracking.css genutzt)
   ========================================================= */

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Editoriale Laufnummer (01, 02, ...) im Akzent, Serif wie in der Academy. */
.index-num{
  font-family:var(--serif);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--signal);
  font-variant-numeric:tabular-nums;
}

.smallcaps{
  display:inline-block;
  font-family:var(--sans);
  font-weight:500;
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--body);
  border:1px solid var(--line);
  padding:.15rem .5rem;
}

.btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.02em;
  background:var(--signal);
  color:#0d0d0d;
  border:1px solid var(--signal);
  border-radius:0;
  padding:.55rem 1.1rem;
  cursor:pointer;
  transition:background-color 150ms linear,border-color 150ms linear,color 150ms linear;
}
.btn:hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--fg)}
.btn.ghost{
  background:transparent;
  color:var(--body);
  border:1px solid var(--line);
  font-weight:500;
}
.btn.ghost:hover{background:transparent;border-color:var(--interactive);color:var(--fg)}
.btn.danger{
  background:transparent;
  color:var(--danger);
  border:1px solid var(--danger);
}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* Roh-<button> ohne .btn-Klasse: gleiches System. */
button:not(.btn){
  font-family:var(--sans);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.02em;
  background:var(--signal);
  color:#0d0d0d;
  border:1px solid var(--signal);
  border-radius:0;
  padding:.55rem 1.1rem;
  cursor:pointer;
  transition:background-color 150ms linear,border-color 150ms linear,color 150ms linear;
}
button:not(.btn):hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--fg)}
button.ghost:not(.btn){background:transparent;color:var(--body);border:1px solid var(--line);font-weight:500}
button.ghost:not(.btn):hover{background:transparent;border-color:var(--interactive);color:var(--fg)}
button.danger:not(.btn){background:transparent;color:var(--danger);border:1px solid var(--danger)}
button.danger:not(.btn):hover{background:var(--danger);color:#fff;border-color:var(--danger)}

button:disabled{opacity:.35;cursor:default;pointer-events:none}

input,select,textarea{
  background:var(--surface);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:0;
  padding:.5rem .65rem;
  font:inherit;
  font-size:.9rem;
  transition:border-color 150ms linear;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--interactive)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:disabled,select:disabled,textarea:disabled{opacity:.4}

.stat{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.stat-num{
  font-family:var(--serif);
  font-weight:500;
  font-size:2.4rem;
  line-height:1;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.stat-num.hot{color:var(--signal)}
.stat-label{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}

.tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--line)}
.tab{
  font-family:var(--sans);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding:.6rem 0;
  border-bottom:1.5px solid transparent;
  margin-bottom:-1px;
  cursor:pointer;
  transition:color 150ms linear;
}
.tab:hover{color:var(--body)}
.tab.active{color:var(--fg);border-bottom-color:var(--signal)}

.bar{position:relative;height:3px;background:var(--surface);width:100%;overflow:hidden}
.bar>span{position:absolute;left:0;top:0;bottom:0;background:var(--signal)}

.muted{color:var(--muted)}
.error{color:var(--signal);min-height:1.2em;margin:0;font-size:.85rem}

/* =========================================================
   Login: ein Moment, kein Formular-Kaestchen.
   Grosses Serif-Statement in einem praezisen Rahmen mit Rail.
   ========================================================= */
.login{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-cover);
  padding:clamp(1.2rem,4vw,4rem);
  overflow-y:auto;
}
.login::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
}
.login-frame{
  position:relative;
  width:min(62rem,100%);
  background:var(--bg);
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(12rem,17rem) minmax(0,1fr);
}
/* Praezise Akzent-Marke an der Rahmenkante, sonst kein Rot im Chrome. */
.login-frame::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:2rem;height:2px;
  background:var(--signal);
}
.login-rail{
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:2rem 1.8rem;
  border-right:1px solid var(--line);
  background:var(--bg-cover);
}
.login-rail-meta{display:flex;flex-direction:column;gap:.55rem}
.login-rail-meta .eyebrow{display:block}
.login-main{
  padding:clamp(2rem,5vw,3.8rem);
  display:flex;flex-direction:column;gap:1.1rem;
}
.login-main>.eyebrow{display:block}
.wordmark{
  font-family:var(--serif);
  font-weight:600;
  color:var(--fg);
  margin:0;
  letter-spacing:-.01em;
}
.wordmark-sm{
  font-family:var(--sans);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.01em;
  color:var(--body);
  user-select:none;
}
.dot{color:var(--signal)}
.login-display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--fg);
  margin:0;
}
.login-sub{
  color:var(--body);
  font-size:.95rem;
  margin:0;
  max-width:32rem;
}
.login-form{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem;margin-bottom:0;max-width:32rem}
/* Das freiwillige Sitzfeld steht direkt im Formular, nicht in der Zeile
   mit dem Knopf — es bekommt denselben Anstrich wie das Tokenfeld. */
.login-form>input{background:var(--bg-cover);padding:.7rem .8rem;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em}
.field-label{
  font-family:var(--sans);
  font-weight:500;
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.login-row{display:flex;gap:.6rem}
.login-row input{
  flex:1;min-width:0;
  background:var(--bg-cover);
  padding:.7rem .8rem;
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.06em;
}
.login-row .btn{padding:.7rem 1.4rem;white-space:nowrap}

@media (max-width:760px){
  .login-frame{grid-template-columns:1fr}
  .login-rail{
    flex-direction:row;align-items:baseline;
    border-right:0;border-bottom:1px solid var(--line);
    padding:1.1rem 1.4rem;
  }
  .login-rail-meta{flex-direction:row;gap:1.2rem;flex-wrap:wrap}
  .login-row{flex-direction:column}
}

/* =========================================================
   Shell + Header + Nav
   ========================================================= */
.shell{display:flex;flex-direction:column;height:100vh}
/* ---------------------------------------------------------------
   Kopfzeile: EIN Raster aus zwei Zeilen und drei Feldern.

   Obere Zeile = Beschriftung (eclipta. / BRAIN / OPS / AUTOMATIK / Sitz),
   untere Zeile = das Anfassbare (Wortmarke / Reiter / Abmelden).
   Die drei Felder (Marke | Navigation | Sitz) trennen Haarlinien ueber die
   volle Hoehe. Dadurch gehoert „eclipta." sichtbar zur Marke und nicht mehr
   zum Menue, und die Gruppenbeschriftung steht ueber ihrer Gruppe statt als
   scheinbarer Reiter daneben.
   --------------------------------------------------------------- */
header{
  display:flex;
  align-items:stretch;
  align-content:flex-start;
  gap:0;
  padding:.6rem 1.5rem 0;
  min-height:4.2rem;
  border-bottom:1px solid var(--line);
  background:var(--bg-cover);
  flex-wrap:wrap;
}

/* Feld 1: Marke */
header .brand{
  display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:flex-start;
  gap:.45rem;
  padding:.05rem 1.5rem .8rem 0;
  margin-right:1.5rem;
  border-right:1px solid var(--line);
}
header .brand a{color:var(--fg);display:block}
header .brand a:hover .wordmark{color:var(--fg)}
header .brand .wordmark{
  font-family:var(--sans);font-weight:700;
  font-size:1.02rem;letter-spacing:-.005em;line-height:1;
  display:block;
}
header .brand .eyebrow{font-size:.55rem;letter-spacing:.22em;line-height:1;opacity:.85}

/* Feld 2: Navigation, in Gruppen */
header nav{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;gap:0;flex-wrap:wrap}
/* Der fruehere freistehende Strich ist ueberfluessig: die Trennlinie haengt
   jetzt an der Gruppe selbst und ueberlebt damit jeden Umbruch. */
.nav-sep{display:none}
.nav-cluster{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:.45rem;
  padding:.05rem 1.4rem 0;
}
.nav-cluster:first-child{padding-left:0}
.nav-cluster:not(:first-child){border-left:1px solid var(--line)}
.nav-label{
  font-size:.55rem;letter-spacing:.22em;line-height:1;
  color:var(--muted);opacity:.7;margin:0;padding-left:.5rem;
}
.nav-items{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.1rem}
header nav a{
  font-family:var(--sans);
  font-weight:500;
  font-size:.735rem;
  /* Enger als frueher (.11em): dieselbe Kapitaelchen-Anmutung, aber
     lesbarer und rund ein Sechstel schmaler. */
  letter-spacing:.065em;
  text-transform:uppercase;
  color:var(--muted);
  padding:.4rem .5rem .5rem;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:.4rem;
  white-space:nowrap;
  transition:color 130ms linear,border-color 130ms linear,background-color 130ms linear;
}
header nav a:hover{color:var(--fg);border-bottom-color:var(--line-strong)}
header nav a:active{background:var(--surface-2)}
/* Der Fokusrahmen liegt INNEN, sonst schneidet ihn die Kopfzeilenkante ab. */
header nav a:focus-visible{outline:1px solid var(--interactive);outline-offset:-2px}
header nav a.active,
header nav a.active:hover{
  color:var(--fg);
  background:var(--surface-2);
  border-bottom-color:var(--signal);
}

/* Feld 3: Sitz. Sitzname oben in der Beschriftungszeile, Knopf unten in der
   Reiterzeile — dadurch steht er im selben Raster wie alles andere. */
.spacer{flex:1}
.sitz{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  gap:.45rem;
  margin-left:auto;
  padding:.05rem 0 .7rem 1.5rem;
  border-left:1px solid var(--line);
}
#whoami{
  color:var(--muted);font-size:.63rem;font-family:var(--mono);
  letter-spacing:.05em;line-height:1;white-space:nowrap;
}
.sitz .btn.ghost{padding:.34rem .85rem;font-size:.72rem;letter-spacing:.05em}
.badge{
  background:var(--signal);color:#fff;
  border-radius:0;
  padding:0 .3rem;
  font-size:.62rem;font-weight:700;
  font-family:var(--mono);
  line-height:1.45;
}

/* Ab hier wird es eng: die Navigation bekommt eine eigene Zeile, damit
   Reiter weder abgeschnitten werden noch der Knopf allein umbricht. */
@media (max-width:1360px){
  header{padding-bottom:0}
  header .brand{border-right:0;margin-right:0;padding-right:0;padding-bottom:.6rem}
  .sitz{border-left:0;padding-left:1.5rem;padding-bottom:.6rem}
  header nav{
    order:3;
    flex-basis:100%;
    border-top:1px solid var(--line);
    padding-top:.5rem;
    row-gap:.7rem;
  }
  .sitz{order:2}
}

.body{display:flex;flex:1;min-height:0}

/* =========================================================
   Sidebar (nur Vault/Note): Mono-Labels, klare Einrueckung
   ========================================================= */
/* Die Seitenleiste scrollt NICHT als Ganzes. Sie ist ein Rahmen fester
   Hoehe: Suche und Zonen-Beschriftung stehen oben, „Neue Notiz" klebt unten,
   und dazwischen scrollt allein die Ordnerliste. Vorher wanderte der Knopf
   beim Aufklappen mehrerer Ordner aus dem Bild — man musste erst suchen
   gehen, um eine Notiz anzulegen. */
aside{
  width:21rem;
  border-right:1px solid var(--line);
  padding:1.1rem 1.1rem 1.1rem;
  overflow:hidden;
  display:flex;flex-direction:column;gap:1rem;
  background:var(--bg-cover);
  flex-shrink:0;
  min-height:0;
}
/* Oberer Block und Fusszeile geben nie nach — auch nicht auf niedrigen
   Fenstern, wo sonst zuerst der Knopf zusammengedrueckt wuerde. */
.side-label{display:block;padding-bottom:.1rem;flex-shrink:0}
.search-row{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);flex-shrink:0}
.search-row input,.search-row select{border:0;background:var(--bg)}
.search-row input{flex:1;min-width:0;font-size:.85rem}
.search-row select{
  width:auto;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
#search-results{display:flex;flex-direction:column;gap:.45rem;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:.9rem}
.hit{
  border:1px solid var(--line);
  border-left:1.5px solid var(--line);
  background:var(--surface);
  padding:.55rem .7rem;
  cursor:pointer;
  transition:border-color 150ms linear,background-color 150ms linear;
}
.hit:hover{border-color:var(--line-strong);border-left-color:var(--signal);background:var(--surface-2)}
.hit .p{color:var(--body);font-size:.72rem;word-break:break-all;font-family:var(--mono)}
.hit:hover .p{color:var(--fg)}
.hit .s{color:var(--muted);font-size:.76rem;margin-top:.25rem;line-height:1.45}

/* Der scrollende Teil. Baum und Trefferliste stehen nie gleichzeitig da,
   also ist immer genau einer von beiden das Fenster, das scrollt. Unten
   Innenabstand, damit der letzte Ordner nicht unter dem festgepinnten Knopf
   verschwindet. */
#tree{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:.9rem;font-size:.84rem}
.dir>.dir-name{
  cursor:pointer;
  color:var(--body);
  font-family:var(--sans);
  font-weight:600;
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.45rem 0;
  display:flex;align-items:baseline;gap:.5rem;
  border-top:1px solid var(--line);
  transition:color 150ms linear;
  user-select:none;
}
.dir>.dir-name:hover{color:var(--fg)}
.dir>.dir-name::before{
  content:"+";
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--muted);
  width:.75rem;
  flex-shrink:0;
}
.dir.open>.dir-name::before{content:"-"}
.dir .dir>.dir-name{border-top:1px solid var(--line-soft);font-weight:500;color:var(--muted)}
.dir .dir>.dir-name:hover{color:var(--body)}
.dir>.children{margin-left:.35rem;padding-left:.75rem;border-left:1px solid var(--line-soft);display:none}
.dir.open>.children{display:block}
.leaf{
  display:block;
  padding:.22rem 0 .22rem .6rem;
  color:var(--muted);
  font-size:.8rem;
  word-break:break-all;
  border-left:1.5px solid transparent;
  transition:color 150ms linear,border-color 150ms linear;
}
.children>.leaf{margin-left:-.75rem;padding-left:1.35rem}
.leaf:hover{color:var(--fg);border-left-color:var(--line-strong)}
.leaf.active{color:var(--fg);border-left-color:var(--signal)}

/* Festgepinnt: der Knopf ist die Fusszeile der Seitenleiste. „margin-top:auto"
   schiebt ihn ans untere Ende, auch wenn der Baum kurz ist; „flex-shrink:0"
   haelt ihn in voller Hoehe, wenn das Fenster niedrig wird. Die Haarlinie
   trennt ihn sichtbar von der Liste, die dahinter wegscrollt. */
/* Der Fuss der Seitenleiste. Er sitzt unten fest — und er DECKT AB.
   Ohne den deckenden Grund endete die durchscrollende Liste an einer harten
   Kante mitten in einer Zeile; ein durchsichtiger Knopf haette die Liste
   ausserdem durch sich hindurchscheinen lassen, sobald sich Fuss und Liste
   je um ein Haar ueberlappen. Der kleine Streifen darueber (::before) blendet
   die letzten Zeilen weich in den Hintergrund aus: sauberer Abschluss statt
   Schnitt. Er nimmt keine Klicks an — darunter liegt die Liste, die bedienbar
   bleiben muss. */
#new-note-btn{
  align-self:stretch;
  text-align:center;
  margin-top:auto;
  flex-shrink:0;
  border-top:1px solid var(--line);
  padding-top:.55rem;
  position:relative;
  z-index:2;
  background:var(--bg-cover);
}
/* „bottom:100%" waere hier um genau eine Haarlinie zu tief — und diese eine
   Haarlinie ist der Trennstrich ueber dem Knopf.

   Warum: ein absolut gestelltes Kind bezieht sich auf die INNENFLAECHE des
   Vorfahren (padding box). Deren Oberkante liegt UNTER dem oberen Rahmen.
   „bottom:100%" setzt die Unterkante des Streifens also genau dorthin — und
   weil der Verlauf „to top" unten voll deckend ist, lag der deckende Teil
   exakt auf der Linie. Gemessen am 2026-08-27: Rahmen von y=211,98 bis
   y=212,98, Streifen-Unterkante y=212,98; im Bildschirmfoto war ueber dem
   Knopf in keiner Pixelzeile etwas anderes als reines Schwarz.

   Die Linie fehlte also nie — sie wurde uebermalt. „calc(100% + 1px)" hebt
   den Streifen um die Rahmenbreite an, sodass er an der Linie ENDET statt
   ueber ihr zu liegen. Der weiche Uebergang bleibt unveraendert; er beginnt
   nur ein Pixel hoeher, und das sieht niemand. */
#new-note-btn::before{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:calc(100% + 1px);
  height:1.9rem;
  background:linear-gradient(to top,var(--bg-cover),transparent);
  pointer-events:none;
}

/* =========================================================
   Main / Notiz-Ansicht
   ========================================================= */
main{flex:1;overflow-y:auto;padding:2.2rem 2.8rem 3.5rem;background:var(--bg);min-width:0;position:relative}

/* ---------- Warten sichtbar machen ----------
   Ein Reiterwechsel holt seine Daten ueber die Leitung. Bei guter Verbindung
   sind das Millisekunden, bei schlechter mehrere Sekunden — und in denen
   stand hier vorher eine schwarze Flaeche. Eine leere Flaeche ist die
   schlechteste aller Antworten: sie sieht aus wie ein Fehler, obwohl gerade
   alles richtig laeuft. Zwei Anzeigen, bewusst getrennt:

   1. Der Balken ganz oben laeuft IMMER, vom ersten Augenblick an. Er sagt
      "die Seite arbeitet" und kostet keinen Platz.
   2. Der Schleier mit dem Geruest kommt erst nach einer kurzen Weile. Waere
      er sofort da, wuerde er bei jedem schnellen Klick aufblitzen — dieses
      Flackern stoert mehr, als es hilft. */
#ladebalken{
  position:fixed;
  top:0; left:0; right:0;
  height:2px;
  z-index:60;
  background:transparent;
  pointer-events:none;
}
#ladebalken.laeuft::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:35%;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  animation:ladebalken-lauf 1.1s ease-in-out infinite;
}
@keyframes ladebalken-lauf{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(385%)}
}

.laden-schleier{
  position:absolute;
  inset:0;
  z-index:5;
  background:var(--bg);
  padding:2.2rem 2.8rem 3.5rem;
  overflow:hidden;
}

/* Wer schnelle Bewegung nicht vertraegt, bekommt denselben Hinweis ruhig. */
@media (prefers-reduced-motion: reduce){
  #ladebalken.laeuft::before{animation:none;width:100%;opacity:.5}
  .skel-kopf,.skel-zeile{animation:none}
}
/* Ansichten, die die ganze Fläche brauchen (Netz): kein Rand, kein Scrollen. */
main.flush{padding:0;overflow:hidden;display:flex;position:relative;background:#000}

/* Der eigene Platz des Netz-Reiters, gleichrangig neben der Hauptfläche.
   Er existiert, weil ein herausgenommenes iframe beim Wiedereinsetzen neu
   lädt (so die Norm, so alle Browser) — der Viewer wird deshalb nie
   abgebaut, sondern nur weggeblendet. Rein baulich: dieselbe Fläche wie
   „main.flush", keine eigene Gestaltung. */
#netz-halter{flex:1;min-width:0;display:flex;position:relative;overflow:hidden;background:#000}
.netz-frame{flex:1;width:100%;border:0;background:#000;display:block}

/* ---------- Netz: kein weisses Aufblitzen ----------
   Der Netz-Reiter bettet den eigenstaendigen Viewer als Rahmen ein. Ein
   Browser malt ein frisch geladenes Dokument weiss, bis dessen eigene
   Stilangaben da sind — und die holt der Viewer als eigene Datei nach. Ueber
   den Tunnel ist das rund eine Sekunde grelles Weiss in einer sonst
   durchgehend dunklen Oberflaeche.

   Deshalb liegt bis zum Fertigladen ein eigener dunkler Grund mit Sternenfeld
   DAVOR (nicht dahinter — dahinter wuerde das weisse Dokument ihn verdecken).
   Er ist reines CSS, laedt nichts nach und steht im selben Augenblick wie der
   Reiter. Danach blendet er sanft weg. */
.netz-grund{
  position:absolute;
  inset:0;
  background:#000;
  z-index:2;
  opacity:1;
  transition:opacity 320ms ease;
  pointer-events:none;
}
.netz-grund.weg{opacity:0}
.netz-grund::before{
  content:"";
  position:absolute;
  inset:0;
  /* Sternenfeld: gestreute Punkte aus wiederholten Radialverläufen. */
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1px 1px at 68% 9%,  rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.65), transparent 100%),
    radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1px 1px at 52% 31%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1px 1px at 7%  77%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 79% 84%, rgba(255,255,255,.40), transparent 100%),
    radial-gradient(2px 2px at 45% 88%, rgba(255,255,255,.30), transparent 100%),
    radial-gradient(1px 1px at 95% 66%, rgba(255,255,255,.50), transparent 100%),
    radial-gradient(1px 1px at 24% 40%, rgba(255,255,255,.30), transparent 100%);
  background-repeat:repeat;
  background-size:340px 340px;
}
.netz-grund .netz-wort{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- Ladegerüste ----------
   Sie halten den Platz, solange ein Baustein oder eine Liste unterwegs ist.
   Kein leerer Kasten (sieht aus wie ein Fehler) und kein Springen, wenn der
   Inhalt kommt: das Gerüst hat dieselbe Zeilenhöhe wie der spätere Inhalt. */
@keyframes skel-puls{0%,100%{opacity:.30}50%{opacity:.62}}
.skel-kopf,
.skel-zeile{
  background:var(--surface-2);
  animation:skel-puls 1.5s ease-in-out infinite;
}
.skel-kopf{height:1.9rem;width:min(22rem,60%);margin-bottom:1.6rem}
.skel-zeile{height:1rem;margin-bottom:.75rem}
.skel-zeile:nth-child(3){width:92%}
.skel-zeile:nth-child(4){width:78%}
.skel-zeile:nth-child(5){width:86%}
.skel-zeile:nth-child(6){width:64%}
.skel-zeile:nth-child(7){width:80%}
#tree .skel-zeile{height:.85rem;margin:0 0 .9rem}
#tree .skel-zeile:nth-child(even){width:72%}
#tree .skel-zeile:nth-child(3n){width:58%}
.skel-wort{
  margin-top:1.4rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
/* Zahl, die noch gezählt wird: gleiche Zeile, nur zurückgenommen. */
.wird-geladen{opacity:.45}

.view-head{margin-bottom:1.6rem}
.view-head .eyebrow{display:block;margin-bottom:.6rem}
.view-head h2{margin-bottom:.4rem}
.path-line{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--muted);
  word-break:break-all;
}

.note-head{margin-bottom:1.4rem}
.note-head .path{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.03em;
  color:var(--muted);
  word-break:break-all;
  margin-bottom:.9rem;
}
.note-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--fg);
  margin:0 0 1rem;
  max-width:52rem;
  overflow-wrap:anywhere;
}
.note-head dl{
  display:flex;flex-wrap:wrap;gap:.1rem 2rem;
  margin:.4rem 0 0;
  padding:.75rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.note-head dt{
  font-family:var(--sans);
  font-weight:500;
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.3rem;
}
.note-head dd{
  margin:0 0 .3rem;
  color:var(--body);
  font-size:.82rem;
  word-break:break-word;
  font-family:var(--mono);
}

.note-actions{display:flex;gap:.5rem;margin-bottom:1.8rem;flex-wrap:wrap;align-items:center}
.note-actions .muted{font-size:.78rem}

/* Fliesstext / Markdown, editoriale Lesespalte */
.md{line-height:1.7;max-width:52rem;color:var(--body);font-size:.98rem}
.md>:first-child{margin-top:0}
.md h1{font-family:var(--serif);font-weight:500;color:var(--fg);font-size:1.9rem;line-height:1.12;letter-spacing:-.01em;margin:2rem 0 .8rem}
.md h2{font-family:var(--serif);font-weight:500;color:var(--fg);font-size:1.45rem;line-height:1.2;margin:1.8rem 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--line)}
.md h3{font-family:var(--serif);font-weight:500;color:var(--fg);font-size:1.15rem;margin:1.4rem 0 .5rem}
.md h4,.md h5,.md h6{font-family:var(--sans);font-weight:600;color:var(--fg);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:1.3rem 0 .4rem}
.md p{margin:.7rem 0}
.md strong{color:var(--fg);font-weight:600}
.md em{font-family:var(--serif);font-style:italic;font-size:1.03em}
.md a{color:var(--signal)}
.md a:hover{color:var(--fg)}
.md code{background:var(--bg-cover);border:1px solid var(--line-soft);padding:.08rem .35rem;font-family:var(--mono);font-size:.82em;color:var(--fg)}
.md pre{background:#0d0d0d;border:1px solid var(--line);padding:1rem 1.1rem;overflow-x:auto;font-size:.8rem;line-height:1.6;margin:1rem 0}
.md pre code{background:none;border:0;padding:0;font-size:inherit;color:var(--body)}
.md blockquote{border-left:2px solid var(--signal);margin:1rem 0 1rem 0;padding:.1rem 0 .1rem 1.1rem;color:var(--body)}
.md blockquote p{color:inherit}
.md table{border-collapse:collapse;font-size:.86rem;margin:1rem 0;font-variant-numeric:tabular-nums}
.md td,.md th{border:1px solid var(--line);padding:.4rem .65rem;text-align:left}
.md th{color:var(--muted);font-weight:500;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans)}
.md ul,.md ol{padding-left:1.35rem;margin:.7rem 0}
.md li{margin:.25rem 0}
.md li::marker{color:var(--muted)}
.md hr{border:0;border-top:1px solid var(--line);margin:1.8rem 0}
.md img{max-width:100%;border:1px solid var(--line)}

.wikilink{color:var(--signal);border-bottom:1px solid rgba(216,65,47,.35)}
.wikilink:hover{color:var(--fg);border-bottom-color:var(--line-strong)}
.wikilink.dead{color:var(--muted);border-bottom:1px dotted var(--line-strong);cursor:default}

textarea.editor{
  width:100%;min-height:60vh;
  background:var(--bg-cover);
  font-family:var(--mono);
  font-size:.84rem;line-height:1.65;
  padding:1rem 1.1rem;
  resize:vertical;
}

/* =========================================================
   Home (editoriale Uebersicht)
   ========================================================= */
.home-hero{
  position:relative;
  background-color:var(--bg-cover);
  /* Grid-Overlay im Hero (gemandatete Textur, gedaempft) */
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  border:1px solid var(--line);
  padding:clamp(2.2rem,5vw,3.6rem) clamp(1.6rem,4vw,2.8rem);
  margin-bottom:1px;
}
.home-hero::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:2rem;height:2px;
  background:var(--signal);
}
.home-hero .eyebrow{margin-bottom:1.2rem;display:block}
.home-hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--fg);
  margin:0 0 1.1rem;
  max-width:36rem;
}
.home-hero .sub{color:var(--muted);font-size:.92rem;margin:0;font-family:var(--mono);letter-spacing:.02em}

.home-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.home-block{
  background:var(--surface);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.7rem 1.6rem 1.9rem;
  min-width:0;
}
.home-block>.blk-head{
  display:flex;align-items:baseline;gap:.7rem;
  margin-bottom:1.2rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line-soft);
}
.home-block>.blk-head .eyebrow{color:var(--body)}
.home-block.span-2{grid-column:span 2}
.home-block.span-3{grid-column:1 / -1}
@media (max-width:1100px){
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .home-grid{grid-template-columns:1fr}
  .home-block.span-2{grid-column:auto}
}

.recent-list{display:flex;flex-direction:column}
.recent-item{
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  column-gap:.4rem;
  align-items:baseline;
  padding:.75rem 0;
  border-top:1px solid var(--line-soft);
}
.recent-item:first-child{border-top:0;padding-top:0}
.recent-item .n{grid-column:1;font-family:var(--serif);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.recent-item .t{grid-column:2;font-family:var(--serif);font-weight:500;font-size:1.08rem;color:var(--fg);line-height:1.25;transition:color 150ms linear}
.recent-item:hover .t{color:var(--interactive)}
.recent-item:hover .n{color:var(--signal)}
.recent-item .m{grid-column:2;display:flex;gap:1rem;margin-top:.25rem;min-width:0}
.recent-item .p{font-family:var(--mono);font-size:.68rem;color:var(--muted);word-break:break-all;flex:1;min-width:0}
.recent-item .d{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

.home-kpis{display:flex;gap:2.6rem;flex-wrap:wrap}
.home-review-num{
  font-family:var(--serif);font-weight:500;
  font-size:3.4rem;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.home-review-num.hot{color:var(--signal)}
.home-review-line{display:inline-block;color:var(--muted);font-size:.82rem;margin-top:.6rem;border-bottom:1px solid transparent;transition:color 150ms linear}
.home-review-line:hover{color:var(--fg)}

/* Zonen-Schnellzugriff: nummerierte Kacheln im Haarlinien-Raster */
.zone-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.zone-tile{
  display:flex;flex-direction:column;gap:.45rem;
  background:var(--surface);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.1rem 1.1rem 1.2rem;
  min-width:0;
  transition:background-color 150ms linear;
}
.zone-tile:hover{background:var(--surface-2)}
.zone-tile .zi{font-family:var(--serif);font-size:.72rem;letter-spacing:.06em;color:var(--signal);font-variant-numeric:tabular-nums}
.zone-tile .zn{font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--fg);line-height:1.15;transition:color 150ms linear}
.zone-tile:hover .zn{color:var(--interactive)}
.zone-tile .zd{font-size:.76rem;color:var(--muted);line-height:1.4}
.zone-tile .zc{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--muted);margin-top:auto;padding-top:.5rem}

/* =========================================================
   Review
   ========================================================= */
.review-item{
  border:1px solid var(--line);
  border-left:2px solid var(--signal);
  background:var(--surface);
  padding:1.3rem 1.5rem 1.2rem;
  margin-bottom:1.1rem;
  max-width:60rem;
}
.review-item .path{margin-bottom:.8rem}
.review-item .path a{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--body);word-break:break-all}
.review-item .path a:hover{color:var(--fg)}
.review-item .md{font-size:.92rem}
.review-item .actions{display:flex;gap:.6rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}

/* =========================================================
   Audit
   ========================================================= */
/* ---------- Audit-Log als Fussabschnitt der Betriebs-Ansicht ----------
   Frueher ein eigener Reiter. Der Abschnitt bekommt oben eine Haarlinie und
   Luft, damit er als eigener Teil der Seite lesbar ist und nicht wie ein
   Anhaengsel der Tabelle darueber wirkt. Eigene Farben braucht er nicht. */
.audit-abschnitt{
  margin-top:3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.audit-abschnitt .audit-kopf{margin-bottom:1.1rem}
.audit-abschnitt .audit-kopf h3{margin-bottom:.4rem}
.audit-abschnitt .audit-kopf p{font-size:.82rem;line-height:1.55;max-width:52rem}

table.audit{border-collapse:collapse;width:100%;font-size:.82rem;margin-bottom:1.2rem}
table.audit th{
  text-align:left;
  font-family:var(--sans);
  font-weight:500;
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line-strong);
  padding:.55rem .75rem;
  white-space:nowrap;
}
table.audit td{
  border-bottom:1px solid var(--line-soft);
  padding:.5rem .75rem;
  text-align:left;
  color:var(--body);
}
table.audit tr:hover td{background:var(--surface)}
table.audit td.ts{white-space:nowrap;color:var(--muted);font-family:var(--mono);font-size:.72rem}

/* Generische Section-Ueberschriften (Review/Audit/Editor/Tracking) */
main h2{
  font-family:var(--serif);font-weight:500;color:var(--fg);
  font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.01em;
  margin:0 0 1.2rem;
}
main h3{font-family:var(--serif);font-weight:500;color:var(--fg);font-size:1.3rem;margin:0 0 1rem}

/* =========================================================
   Modals + Toasts
   ========================================================= */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
  z-index:40;
  padding:1rem;
}
.modal{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  padding:1.6rem 1.7rem;
  width:34rem;max-width:92vw;
  max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:1rem;
}
.modal::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:1.6rem;height:2px;
  background:var(--signal);
}
.modal h3{margin:0 0 .2rem}
.modal .row{display:flex;gap:.6rem;justify-content:flex-end;padding-top:.6rem;border-top:1px solid var(--line)}

.toast{
  position:fixed;bottom:1.6rem;left:50%;
  transform:translateX(-50%);
  background:var(--bg-cover);
  border:1px solid var(--line-strong);
  border-left:2px solid var(--line-strong);
  padding:.75rem 1.3rem;
  font-size:.85rem;
  color:var(--fg);
  z-index:50;
  max-width:min(40rem,92vw);
}
.toast.err{border-color:var(--signal);border-left-color:var(--signal)}

/* =========================================================
   Responsive: bis ~900px brauchbar
   ========================================================= */
@media (max-width:900px){
  header{padding:.6rem 1rem 0}
  header nav{flex-wrap:wrap}
  /* Die Gruppen stapeln sich; die Trennlinie wandert von links nach oben,
     damit sie bei umgebrochenen Zeilen weiter das Richtige sagt. */
  /* Nebeneinander passt hier nichts mehr. Die Gruppen stapeln sich, und die
     Trennlinie wandert von links nach oben — sonst stuende sie nach dem
     Umbruch an der falschen Kante. */
  header nav{row-gap:.35rem}
  .nav-cluster{padding:0;flex-basis:100%;gap:.3rem}
  .nav-cluster:not(:first-child){
    border-left:0;
    border-top:1px solid var(--line-soft);
    padding-top:.4rem;
  }
  .nav-label{padding-left:0}
  header nav a{padding:.3rem .45rem .4rem}
  header nav a:first-child{padding-left:0}
  .body{flex-direction:column;overflow-y:auto}
  /* Die Seitenleiste kostete auf schmalen Fenstern den ganzen ersten
     Bildschirm: Navigation, Suche, Zonenbaum — und der Inhalt fing erst nach
     dem ersten Scrollen an. Ausserdem war die letzte Zeile des Baums hart
     abgeschnitten, was aussieht, als fehle etwas (Fund A-05).

     Jetzt nimmt sie hoechstens ein gutes Drittel, scrollt in sich selbst und
     hat unten Luft, damit keine Zeile halb angeschnitten stehen bleibt. */
  aside{
    width:100%;
    max-height:34vh;
    min-height:11rem;
    padding-bottom:1.1rem;
    border-right:0;
    border-bottom:1px solid var(--line);
    overscroll-behavior:contain;
  }
  main{padding:1.4rem 1.1rem 2.5rem;overflow-y:visible}
  .home-kpis{gap:1.6rem}
  .stat-num{font-size:2rem}
  /* Wer man ist, verschwand hier frueher ganz (Fund A-04). Wer zwei Zugaenge
     hat, wusste dann nicht mehr, in welchem er sitzt. Jetzt bleibt die Angabe
     stehen; wird es zu eng, wird hinten gekuerzt — der Sitzname steht vorn. */
  #whoami{
    display:inline-block;
    max-width:9.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
    font-size:.68rem;
  }
}

/* Die Platzhalterzeilen in „Zuletzt geaendert" sind so hoch wie ein echter
   Eintrag — sonst waere das Geruest selbst die Ursache eines Layoutsprungs. */
.recent-list .skel-zeile{height:2.9rem;margin-bottom:1.1rem}

/* Mindesthoehe des Bearbeitungsfeldes. Stand frueher als Zuweisung an
   element.style im Quelltext — die Inhaltsrichtlinie (style-src 'self')
   verwirft solche Zuweisungen, die Zeile war also wirkungslos. */
.editor { min-height: 10rem; }

/* ---------- Ordner-Waehler im Verschieben-Dialog ----------
   Ein kleiner Ausschnitt des Vault-Baums, durch den man sich klickt. Er
   ersetzt das frühere Textfeld, in das der ganze Zielpfad getippt werden
   musste. Die Liste hat eine feste Höhe und scrollt in sich: der Dialog
   soll nicht bei jedem Ordnerwechsel die Größe ändern.

   WICHTIG (Spezifitaet): Ordnerzeilen und Brotkrumen sind <button>-Elemente
   und fielen damit unter die globale Regel `button:not(.btn)` (roter
   Marken-Hintergrund). Eine reine Klassenregel wie `.ow-zeile` (0,1,0)
   verliert gegen `button:not(.btn)` (0,1,1) — deshalb sind alle Regeln hier
   mit `.ow ` vorangestellt (0,2,0). Rot bleibt der Marke vorbehalten: dem
   Aktionsknopf des Dialogs und der Akzentkante der Zielanzeige. */
.ow{border:1px solid var(--line);background:var(--surface)}
.ow-weg{
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem;
  padding:.5rem .6rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;
}
/* Brotkrume: Text mit Hover, keine Knopf-Flaeche. */
.ow .ow-stufe{
  background:transparent;border:0;border-radius:0;padding:.1rem .25rem;
  color:var(--muted);font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:0;cursor:pointer;
}
.ow .ow-stufe:hover{background:transparent;border-color:transparent;color:var(--fg)}
.ow-trenner{color:var(--muted)}
.ow-liste{max-height:11rem;overflow-y:auto;padding:0}
/* Ordnerzeile: ruhige Dateiliste, Haarlinie zwischen den Zeilen. */
.ow .ow-zeile{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;text-align:left;
  background:transparent;border:0;border-radius:0;
  border-top:1px solid var(--line-soft);
  padding:.4rem .6rem;
  color:var(--body);font-family:var(--sans);font-size:.82rem;font-weight:500;
  letter-spacing:0;cursor:pointer;
}
.ow .ow-zeile:first-child{border-top:0}
.ow .ow-zeile:hover{background:var(--surface-2);border-color:var(--line-soft);color:var(--fg)}
.ow .ow-hoch{color:var(--muted)}
.ow .ow-hoch:hover{color:var(--fg)}
/* Anhaenge-Zone: gedaempft und ohne Hover-Reaktion. */
.ow .ow-gesperrt{cursor:default;color:var(--muted);opacity:.6}
.ow .ow-gesperrt:hover{background:transparent;color:var(--muted)}
.ow-zahl{color:var(--muted);font-family:var(--mono);font-size:.68rem}
.ow-neu{display:flex;gap:.5rem;padding:.5rem .6rem;border-top:1px solid var(--line)}
.ow-neu-name{flex:1}
.ow-frage{margin:0;color:var(--muted);font-size:.76rem}
.ow-ziel{
  margin:0;padding:.5rem .6rem;
  border-left:2px solid var(--signal);background:var(--surface);
  font-family:var(--mono);font-size:.74rem;
}

/* ---------- „Umsetzen lassen": aus einer Notiz wird ein Auftrag ----------
   Alles hier ist zurueckhaltend. Rot traegt in diesem Dialog nur der eine
   Aktionsknopf, den openModal ohnehin stellt — die Felder ringsum sind
   Flaeche und Haarlinie, sonst nichts. Eigener Knopf ist keiner dabei; waere
   einer dabei, muesste er die globale Regel `button:not(.btn)` (0,1,1)
   ueberschreiben, so wie es der Ordner-Waehler darueber tut. */
.ka-hinweis{margin:0 0 .5rem;color:var(--muted);font-size:.76rem;line-height:1.45}
.ka-auftragstext{
  width:100%;min-height:8.5rem;resize:vertical;
  background:var(--surface-2);border:1px solid var(--line-soft);color:var(--fg);
  font-family:var(--mono);font-size:.78rem;line-height:1.5;
}
.ka-zeile{display:flex;align-items:center;gap:.5rem;margin:.7rem 0 .35rem}
.ka-marke{color:var(--body);font-size:.82rem}
.ka-deckel{width:5rem;text-align:right}
.ka-herkunft{margin:.6rem 0 0;font-family:var(--mono);font-size:.7rem}
.ka-meldung{
  margin:.6rem 0 0;padding:.45rem .6rem;
  border-left:2px solid var(--line-strong);background:var(--surface);
  color:var(--body);font-size:.8rem;line-height:1.45;
}
.ka-meldung:empty{display:none}