/* ===================================================================
   Context Orbit, Stil-System V4 (T-003a, 2026-09-22)

   Dunkle editoriale Basis, EIN roter Akzent, Serif-Displays, Haarlinien.
   Neu gegenueber der Vorschrift bis V3 (Silas, 22.09.2026: Abweichen erlaubt
   zugunsten von wahrgenommenem Wert und Alltagstauglichkeit):
     - weiches Formvokabular: runde Tasten, runde Felder, Radius-Stufen
     - Flaechen-Hierarchie in vier Stufen statt zwei
     - Zustaende (hover / fokus / aktiv) als Tokens, nicht je Regel
     - Schatten nur fuer Schwebendes (Dialog, Profil-Menue)
   Alles steht als Token in :root; die Reiter-Stile (tracking.css & Co.)
   konsumieren ausschliesslich diese Tokens — keine eigenen Farben.
   =================================================================== */

/* ---------- Self-hosted Fonts (latin-Subset, woff2) ----------
   ?v=bb6869db1630 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=bb6869db1630") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-500.woff2?v=bb6869db1630") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/newsreader-600.woff2?v=bb6869db1630") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400.woff2?v=bb6869db1630") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-400.woff2?v=bb6869db1630") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-500.woff2?v=bb6869db1630") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-600.woff2?v=bb6869db1630") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/hanken-700.woff2?v=bb6869db1630") format("woff2")}

/* ---------- Token-Vertrag (VERBINDLICH) ---------- */
:root{
  color-scheme:dark;
  /* ---- Flaechen-Hierarchie (von hinten nach vorn) ----
     bg-cover: Kopfzeile, Seitenleiste, Login (der tiefste Grund)
     bg:       die Arbeitsflaeche
     surface:  Karten, Listen, Felder auf der Arbeitsflaeche
     surface-2: erhobene Karte, Kopfzeile einer Tabelle, aktive Zeile
     surface-3: schwebend (Dialog, Menue) */
  --bg:#0a0a0a;
  --bg-cover:#000000;
  --surface:#111111;
  --surface-2:#171717;
  --surface-3:#1e1e1e;
  /* ---- Text ---- */
  --fg:#ffffff;
  --body:rgba(255,255,255,.72);
  --muted:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --line-soft:rgba(255,255,255,.07);
  /* Interaktiv: dezentes Weiss. Rot bleibt Marke/Akzent, nicht "du bist hier". */
  --interactive:rgba(255,255,255,.92);
  /* ---- Akzent, sparsam ---- */
  --oxblood:#9e2b1e;
  --signal:#d8412f;
  --danger:#b3402f;
  --accent:var(--signal);
  --accent-soft:rgba(216,65,47,.14);   /* Hintergrund einer hervorgehobenen Flaeche */
  --accent-line:rgba(216,65,47,.45);   /* Kante einer hervorgehobenen Flaeche */
  /* ---- Ampel (nur fuer Zustaende, nie fuer Schmuck) ---- */
  --ok:#4caf6d;
  --ok-soft:rgba(76,175,109,.14);
  --warn:#d9a533;
  --warn-soft:rgba(217,165,51,.14);
  --bad:var(--signal);
  --bad-soft:var(--accent-soft);
  /* ---- Zustaende ---- */
  --hover-bg:rgba(255,255,255,.05);
  --active-bg:rgba(255,255,255,.09);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--interactive);
  --t-fast:130ms;
  --t-base:180ms;
  /* ---- Radius-Stufen ----
     xs: Marken, Codes        sm: Felder, Chips     md: Karten, Tabellen
     lg: grosse Karten, Kopf  pill: Tasten, Reiter */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-pill:999px;
  /* ---- Abstaende ---- */
  --s-1:.25rem;
  --s-2:.5rem;
  --s-3:.75rem;
  --s-4:1rem;
  --s-5:1.5rem;
  --s-6:2rem;
  --s-7:3rem;
  /* ---- Schatten, sparsam: nur was wirklich schwebt ---- */
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 18px 48px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  /* ---- Typografie ---- */
  --serif:"Newsreader",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* Grid */
  --grid:46px;
  /* ---- Feste Farben, die frueher direkt in den Regeln standen ----
     Im dunklen Stand wertgleich mit dem Bisherigen; das helle
     Erscheinungsbild (unten) setzt eigene. */
  --on-signal:#0d0d0d;                 /* Schrift auf der roten Taste */
  --on-oxblood:#ffffff;                /* Schrift auf Rot beim Ueberfahren */
  --on-danger:#ffffff;                 /* Schrift auf Gefahr, Zaehler */
  --selection-bg:var(--oxblood);
  --selection-fg:#ffffff;
  --grid-line:rgba(255,255,255,.045);  /* Raster hinter der Seite */
  --grid-line-login:rgba(255,255,255,.07);
  --grid-line-hero:rgba(255,255,255,.05);
  --code-bg:#0d0d0d;                   /* Codeblock in der Notiz */
  --wikilink-line:rgba(216,65,47,.35);
  --scrim:rgba(0,0,0,.6);              /* Abdunklung hinter Dialogen */
  /* Grund der Wissenskarte (Rahmen, Ladeanzeige). Folgt der KARTE, nicht der
     Oberflaeche: „Hell nur in der Wissenskarte" macht ihn hell, obwohl der
     Rest dunkel bleibt. */
  --karte-grund:#000000;
  font-size:16px;
}

/* ---------- Erscheinungsbild „Hell" (Silas, 26.09.2026) ----------
   Gewaehlt unter Einstellungen › Erscheinungsbild, gemerkt im Browser,
   gesetzt von thema.js als data-thema am <html> — BEVOR das erste Bild
   gemalt wird. Standard bleibt Dunkel; ohne Wahl gilt nichts von hier.

   Kein umgedrehtes Dunkel, sondern dieselbe Haltung auf Papier: warmes
   Papierweiss statt #fff, Tinte statt Schwarz, Haarlinien als Tinte mit
   geringer Deckkraft. Die Flaechen-Hierarchie bleibt in fuenf Stufen: der
   tiefste Grund (Kopfzeile, Seitenleiste) ist ein Hauch dunkleres Papier,
   Karten liegen heller darauf, Schwebendes ist fast weiss und traegt einen
   warmen, leisen Schatten. EIN Rot, hell und frisch wie das Orange der
   Karte (Silas, 26.09.2026: die Tasten waren im tieferen Rot zu dunkel).
   Gemessen auf --bg (#f4f1ea): --fg 15,5:1 · --body 8,6:1 · --muted 5,0:1 ·
   --ok 4,9:1 · --warn 4,9:1; --signal 3,6:1 und Papier auf --signal 3,9:1,
   also AA fuer Tasten und grosse Schrift, bewusst nicht fuer Fliesstext.

   Derselbe Block gilt bei „Hell nur in der Wissenskarte" fuer den Kasten
   der Karte (#netz-halter): die Ladeanzeige davor soll zur hellen Karte
   passen, auch wenn der Rest der Oberflaeche dunkel bleibt. Ebenso fuer die
   schwebenden Knoepfe, die auf dem Handy auf der Karte liegen (Ordner,
   ganzes Netz zeigen) — sie stehen neben den Knoepfen der Karte selbst und
   sollen dieselbe Farbe tragen. */
:root[data-thema="hell"],
:root[data-thema="karte-hell"] #netz-halter,
:root[data-thema="karte-hell"] main.flush,
:root[data-thema="karte-hell"] .handy-knopf{
  color-scheme:light;
  --bg:#f4f1ea;
  --bg-cover:#ece7dd;
  --surface:#faf8f3;
  --surface-2:#f0ece4;
  --surface-3:#fffdf9;
  --fg:#1c1915;
  --body:rgba(28,25,21,.80);
  --muted:rgba(28,25,21,.64);
  --line:rgba(28,25,21,.13);
  --line-strong:rgba(28,25,21,.24);
  --line-soft:rgba(28,25,21,.07);
  --interactive:rgba(28,25,21,.86);
  --oxblood:#c43d20;
  --signal:#de4b2b;
  --danger:#cf4324;
  --accent-soft:rgba(222,75,43,.11);
  --accent-line:rgba(222,75,43,.45);
  --ok:#1e7343;
  --ok-soft:rgba(30,115,67,.12);
  --warn:#8a6100;
  --warn-soft:rgba(176,125,20,.15);
  --hover-bg:rgba(28,25,21,.045);
  --active-bg:rgba(28,25,21,.08);
  --shadow-1:0 1px 2px rgba(60,44,28,.10);
  --shadow-2:0 18px 48px rgba(60,44,28,.16),0 2px 6px rgba(60,44,28,.08);
  --on-signal:#fffaf3;
  --on-oxblood:#fffaf3;
  --on-danger:#fffaf3;
  --selection-bg:rgba(222,75,43,.20);
  --selection-fg:#1c1915;
  --grid-line:rgba(28,25,21,.045);
  --grid-line-login:rgba(28,25,21,.055);
  --grid-line-hero:rgba(28,25,21,.04);
  --code-bg:#ece8df;
  --wikilink-line:rgba(222,75,43,.40);
  --scrim:rgba(44,34,24,.30);
  --karte-grund:#f3efe6;
  /* Abgeleitete Tokens noch einmal: eine Variable, die auf eine andere
     verweist, wird dort aufgeloest, wo sie steht — im Kasten der Karte
     (nur-Karte-Stufe) erbte er sonst die dunklen Werte der Wurzel. */
  --accent:var(--signal);
  --bad:var(--signal);
  --bad-soft:var(--accent-soft);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--interactive);
}

*{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(--selection-bg);color:var(--selection-fg)}

/* ---------- Textur: Grid-Overlay (fixed, hinter Inhalt) ----------
   Das fruehere Film-Grain (ein Rauschmuster als zweite Textur-Ebene) ist
   seit T-029 weg: auf dem schwarzen Grund las es sich als Sternenhimmel,
   und Sterne gibt es in der Oberflaeche nicht mehr (Silas, 23.09.2026). */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
}

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

/* Fokus-Konvention: doppelter Ring (Grund + Weiss), folgt der Rundung. */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Dezente, scharfe Scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--bg);border-radius:var(--r-pill)}
::-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);
  border-radius:var(--r-pill);
  padding:.15rem .55rem;
}

/* ---------- Tasten: rund, drei Gewichte ----------
   .btn / roher <button>   = Hauptaktion (rot)
   .ghost                  = Nebenaktion (Haarlinie)
   .danger                 = zerstoerend (rote Haarlinie, fuellt sich erst beim Hover)
   Roh-<button> ohne Klasse folgt demselben System, damit kein Knopf je
   „nackt" erscheint. */
.btn,
button:not(.btn){
  font-family:var(--sans);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.01em;
  background:var(--signal);
  color:var(--on-signal);
  border:1px solid var(--signal);
  border-radius:var(--r-pill);
  padding:.55rem 1.15rem;
  line-height:1.2;
  cursor:pointer;
  transition:background-color var(--t-fast) linear,border-color var(--t-fast) linear,color var(--t-fast) linear,transform var(--t-fast) ease;
}
.btn:hover,
button:not(.btn):hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--on-oxblood)}
.btn:active,
button:not(.btn):active{transform:translateY(1px)}
.btn.ghost,
button.ghost:not(.btn){
  background:transparent;
  color:var(--body);
  border:1px solid var(--line-strong);
  font-weight:500;
}
.btn.ghost:hover,
button.ghost:not(.btn):hover{background:var(--hover-bg);border-color:var(--interactive);color:var(--fg)}
.btn.danger,
button.danger:not(.btn){
  background:transparent;
  color:var(--danger);
  border:1px solid var(--danger);
}
.btn.danger:hover,
button.danger:not(.btn):hover{background:var(--danger);color:var(--on-danger);border-color:var(--danger)}
/* Kleine Taste (Zeilenknoepfe, Leisten) */
.btn.klein,button.klein:not(.btn){padding:.35rem .8rem;font-size:.74rem}

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

/* ---------- Felder: weich gerundet, ruhige Kante ---------- */
input,select,textarea{
  background:var(--surface);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.55rem .75rem;
  font:inherit;
  font-size:.9rem;
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear;
}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--interactive);box-shadow:none}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:disabled,select:disabled,textarea:disabled{opacity:.4}
input[type="checkbox"],input[type="radio"]{accent-color:var(--signal)}

.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;border-radius:var(--r-pill)}
.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,var(--grid-line-login) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line-login) 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);
  border-radius:var(--r-lg);
  overflow:hidden;
  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:0;left:0;
  width:2.4rem;height:3px;
  background:var(--signal);
  border-bottom-right-radius:var(--r-pill);
}
.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.5rem;white-space:nowrap}
.login-row input{border-radius:var(--r-sm)}

@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 + Kopfzeile + Navigation (V4)

   EINE Zeile: Marke | drei Hauptpunkte als runde Reiter | Zahnrad | Profil.
   Keine Gruppenbeschriftungen mehr (Brain / Ops / Automatik) — die Gruppen
   waren Erbauer-Sprache. Was betrieblich ist, liegt hinter dem Zahnrad.
   ========================================================= */
.shell{display:flex;flex-direction:column;height:100vh}
header{
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding:0 1.5rem;
  min-height:3.6rem;
  border-bottom:1px solid var(--line);
  background:var(--bg-cover);
  position:relative;
  z-index:30;
}

/* Feld 1: Marke */
header .brand{
  display:flex;align-items:baseline;gap:.55rem;
  padding-right:1.25rem;
  border-right:1px solid var(--line);
  white-space:nowrap;
}
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 */
header nav{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.5rem}
.nav-sep{display:none}
.nav-cluster{display:flex;align-items:center}
.nav-cluster[data-rolle="haupt"]{flex:0 1 auto;min-width:0}
.nav-cluster[data-rolle="werkzeug"]{margin-left:auto}
.nav-label{display:none}
.nav-items{display:flex;align-items:center;gap:.2rem}
header nav a{
  font-family:var(--sans);
  font-weight:500;
  font-size:.86rem;
  letter-spacing:0;
  color:var(--muted);
  padding:.42rem .9rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  display:inline-flex;align-items:center;gap:.45rem;
  white-space:nowrap;
  line-height:1.2;
  transition:color var(--t-fast) linear,background-color var(--t-fast) linear,border-color var(--t-fast) linear;
}
header nav a:hover{color:var(--fg);background:var(--hover-bg)}
header nav a:active{background:var(--active-bg)}
header nav a:focus-visible{box-shadow:var(--focus-ring)}
header nav a.active,
header nav a.active:hover{
  color:var(--fg);
  background:var(--surface-2);
  border-color:var(--line);
}
/* Der Marken-Punkt am aktiven Reiter: die einzige Stelle, an der Rot
   „du bist hier" sagt — klein, rund, unaufdringlich. */
header nav a.active::before{
  content:"";
  width:.38rem;height:.38rem;border-radius:var(--r-pill);
  background:var(--signal);
  flex-shrink:0;
}
/* Zahnrad: nur das Symbol, das Wort steht fuer Vorleser und Tooltip bereit. */
header nav a.nav-icon{padding:.42rem .55rem}
header nav a.nav-icon svg{width:1.05rem;height:1.05rem;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
header nav a.nav-icon .nav-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
header nav a.nav-icon.active::before{display:none}

/* Feld 3: Profil — eine runde Taste, dahinter ein Menue. */
.spacer{flex:1}
.sitz{display:flex;align-items:center;position:relative}
.profil{
  display:inline-flex;align-items:center;gap:.55rem;
  background:transparent;
  color:var(--body);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.28rem .8rem .28rem .3rem;
  font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:0;
  cursor:pointer;
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear,color var(--t-fast) linear;
}
.profil:hover{background:var(--hover-bg);border-color:var(--line-strong);color:var(--fg)}
.profil[aria-expanded="true"]{background:var(--surface-2);border-color:var(--line-strong);color:var(--fg)}
.profil-kreis{
  width:1.6rem;height:1.6rem;border-radius:var(--r-pill);
  background:var(--surface-3);
  border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:.82rem;color:var(--fg);
  text-transform:uppercase;
  flex-shrink:0;
}
#whoami{
  color:inherit;font-size:.8rem;font-family:var(--sans);
  letter-spacing:0;line-height:1;white-space:nowrap;
  max-width:11rem;overflow:hidden;text-overflow:ellipsis;
}
.profil-menue{
  position:absolute;top:calc(100% + .55rem);right:0;
  width:19rem;max-width:calc(100vw - 2rem);
  background:var(--surface-3);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  padding:1rem 1.1rem 1.1rem;
  display:flex;flex-direction:column;gap:.85rem;
  z-index:45;
}
.profil-kopf{display:flex;flex-direction:column;gap:.2rem}
.profil-name{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--fg);line-height:1.1;overflow-wrap:anywhere}
.profil-rolle{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.profil-rechte{display:flex;flex-direction:column;gap:.35rem;border-top:1px solid var(--line);padding-top:.75rem}
.profil-rechte .eyebrow{display:block;margin-bottom:.15rem}
.profil-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--sans);font-size:.7rem;font-weight:500;
  color:var(--body);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.18rem .6rem;
  background:var(--surface);
  white-space:nowrap;
}
.chip.an{border-color:var(--line-strong);color:var(--fg)}
.chip.aus{opacity:.45;text-decoration:line-through}
.chip .chip-punkt{width:.35rem;height:.35rem;border-radius:var(--r-pill);background:var(--ok)}
.chip.aus .chip-punkt{background:var(--muted)}
.profil-menue #logout-btn{align-self:flex-start}
.badge{
  background:var(--signal);color:var(--on-danger);
  border-radius:var(--r-pill);
  padding:0 .4rem;
  font-size:.62rem;font-weight:700;
  font-family:var(--mono);
  line-height:1.45;
}

/* Handy (T-045): die Leiste bleibt EINE Zeile, auch auf 320 px — Marke,
   Vault, Agenten, Lupe (T-050), Zahnrad, Profil. Keine zweite Zeile, kein waagerechtes
   Scrollen. Die Zeile unter der Marke (Anlagenname) fällt weg, das Profil
   ist nur der Kreis, jede Taste ist mindestens 40 px hoch. Unter 400 px
   wird die Wortmarke zu „Orbit." gekürzt (siehe unten). */
@media (max-width:760px){
  header{padding:0 .75rem;gap:.4rem;flex-wrap:nowrap;min-height:3.25rem}
  header .brand{border-right:0;padding-right:0;flex-shrink:0}
  header .brand .eyebrow{display:none}
  .sitz{flex-shrink:0}
  header nav{flex:1 1 auto;min-width:0;gap:.15rem}
  .nav-items{gap:.1rem}
  header nav a{padding:.5rem .7rem;font-size:.84rem;min-height:2.5rem}
  header nav a.nav-icon{padding:.5rem .7rem}
  #whoami{display:none}
  .profil{padding:0;border:0;background:transparent}
  .profil-kreis{width:2.5rem;height:2.5rem;font-size:.95rem}
}
@media (max-width:400px){
  /* „Context Orbit." → „Orbit.": das Wort steht im Markup, gekürzt wird
     nur die Anzeige (der Punkt bleibt der rote Marken-Punkt). */
  header .brand .wordmark{font-size:0}
  header .brand .wordmark::before{content:"Orbit";font-size:1rem}
  header .brand .wordmark .dot{font-size:1rem}
  header nav a{padding:.5rem .55rem}
  header nav a.nav-icon{padding:.5rem .6rem}
}
@media (max-width:350px){
  header{padding:0 .6rem;gap:.3rem}
  header nav a.active::before{display:none}
  /* Seit T-050 steht die Lupe mit in der Zeile: etwas schmalere Reiter. */
  header nav a{padding:.5rem .45rem}
}

/* =========================================================
   Die Suche in der Kopfleiste (T-050, Silas 25.09.2026)

   Gross, ruhig und mittig zwischen „Vault · Agenten" und „Einstellungen ·
   Profil" — auf jeder Seite. Die Treffer stehen IMMER in einem kleinen
   Menue direkt unter dem Feld: erste Zeile die Bereiche als Chips (und die
   Suchart), darunter die Treffer mit Titel, Ort und Ausschnitt. Das Menue
   schwebt wie das Profil-Menue (gleiche Flaeche, Kante, Schatten).

   Wo die Leiste knapp ist (Handy; Fassung „reiter" bis 1280 px), steht nur
   die Lupe. Sie oeffnet Feld und Menue ueber den ganzen Schirm — siehe die
   beiden Abfragen am Ende dieses Abschnitts.
   ========================================================= */
header.such-offen{z-index:65}
.kopfsuche{
  flex:1 1 auto;min-width:10rem;
  display:flex;align-items:center;justify-content:center;
  padding:0 .75rem;
}
.kopfsuche-feld{position:relative;width:min(40rem,100%)}
/* Den freien Platz nimmt die Suche (bzw. am Handy ihr Aussenrand links der
   Lupe) — das Zahnrad schliesst dann ohne eigenen Aussenrand an. */
.kopfsuche:not(.hidden)+.nav-cluster[data-rolle="werkzeug"]{margin-left:0}
.kopfsuche .search-row{
  display:flex;align-items:center;gap:.55rem;
  height:2.5rem;padding:0 .4rem 0 .95rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear;
}
.kopfsuche .search-row:hover{border-color:var(--line-strong)}
.kopfsuche .search-row:focus-within{border-color:var(--interactive);background:var(--surface-2)}
.kopfsuche .such-symbol{width:1rem;height:1rem;flex-shrink:0;display:block;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round}
.kopfsuche .search-row input,
.kopfsuche .search-row input:hover,
.kopfsuche .search-row input:focus{
  flex:1;min-width:0;height:100%;
  padding:0;border:0;border-radius:0;background:transparent;
  font-size:.9rem;color:var(--fg);
}
/* Lupe (nur wo die Leiste knapp ist) und Schliessen (nur in der grossen
   Suchflaeche): am Rechner nicht da. Als <button> fielen sie sonst unter
   die globale Regel `button:not(.btn)` (0,1,1: rot gefuellt) — deshalb
   `.kopfsuche ` davor (0,2,0). */
.kopfsuche .kopf-lupe,
.kopfsuche .such-zu{
  display:none;align-items:center;justify-content:center;flex-shrink:0;
  width:2.5rem;height:2.5rem;padding:0;
  background:transparent;color:var(--muted);
  border:1px solid transparent;border-radius:var(--r-pill);
  font-weight:500;
}
.kopfsuche .kopf-lupe:hover,
.kopfsuche .such-zu:hover{color:var(--fg);background:var(--hover-bg);border-color:transparent}
.kopfsuche .kopf-lupe:active,
.kopfsuche .such-zu:active{transform:none;background:var(--active-bg)}
.kopfsuche .kopf-lupe:focus-visible,
.kopfsuche .such-zu:focus-visible{box-shadow:var(--focus-ring)}
.kopfsuche .kopf-lupe[aria-expanded="true"]{color:var(--fg);background:var(--surface-2);border-color:var(--line)}
.kopfsuche .kopf-lupe svg,
.kopfsuche .such-zu svg{width:1.1rem;height:1.1rem;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- Das Menue unter dem Feld ---- */
.such-menue{
  position:absolute;top:calc(100% + .5rem);left:0;right:0;z-index:2;
  display:flex;flex-direction:column;
  max-height:min(34rem,calc(100vh - 5.5rem));
  background:var(--surface-3);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.such-filter{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  padding:.7rem .8rem .65rem;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.such-zonen{display:flex;flex-wrap:wrap;gap:.3rem;flex:1 1 auto;min-width:0}
/* T-051: Inaktiv ist normal lesbar (nicht ausgegraut); aktiv ist dasselbe
   mit einem orangen Rand im Marken-Akzent --signal. Die halb durchsichtige
   --accent-line wirkte auf dunklem Grund rostrot statt orange und markierte
   zu schwach (Silas: „damit das besser markiert ist“). --warn waere die
   Ampel (nur fuer Zustaende). Den Zustand traegt zusaetzlich aria-pressed. */
.such-filter .such-chip{
  font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:0;line-height:1.2;
  color:var(--fg);background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:.26rem .62rem;cursor:pointer;
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear,color var(--t-fast) linear;
}
.such-filter .such-chip:hover{background:var(--hover-bg)}
.such-filter .such-chip:active{transform:none;background:var(--active-bg)}
.such-filter .such-chip:focus-visible{box-shadow:var(--focus-ring)}
.such-filter .such-chip.an{border-color:var(--signal)}
.such-filter select{
  margin-left:auto;width:auto;
  padding:.28rem .7rem;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  border-radius:var(--r-pill);
}
.such-lage{margin:0;padding:.6rem 1rem 0;font-size:.76rem;line-height:1.4;flex-shrink:0}
.such-lage:empty{display:none}
#search-results{
  display:flex;flex-direction:column;gap:.1rem;
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:.35rem .4rem .6rem;padding-bottom:.6rem;
}
#search-results:empty{display:none}
.such-evidenz{margin:0;padding:.3rem .65rem;font-size:.72rem;line-height:1.4}
.such-leer{margin:0;padding:.55rem .65rem;font-size:.84rem}
.such-fehler{margin:0;padding:.55rem .65rem;font-size:.84rem;color:var(--signal)}
#search-results>.btn{align-self:flex-start;margin:.35rem .65rem .2rem}
.such-treffer{
  display:flex;flex-direction:column;gap:.12rem;
  padding:.5rem .7rem .55rem;
  border-left:2px solid transparent;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background-color var(--t-fast) linear,border-color var(--t-fast) linear;
}
.such-treffer:hover{background:var(--hover-bg);border-left-color:var(--line-strong)}
.such-treffer.aktiv{background:var(--active-bg);border-left-color:var(--signal)}
.such-titel{color:var(--fg);font-size:.88rem;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.such-ort{color:var(--muted);font-size:.7rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.such-schnipsel{
  color:var(--muted);font-size:.76rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;
}

/* ---- Wo die Leiste knapp ist: nur die Lupe, Suche ueber den ganzen Schirm ----
   Handy (bis 760 px) und die Fassung „reiter" bis 1280 px (dort stehen vier
   Reiter mehr in der Zeile). Beide Bloecke sind gleich; die Lupe sitzt rechts
   neben dem Zahnrad-Paar. */
@media (max-width:1280px){
  .shell.nav-reiter .kopfsuche{flex:0 0 auto;min-width:0;padding:0;margin-left:auto}
  .shell.nav-reiter .kopfsuche .kopf-lupe{display:inline-flex}
  .shell.nav-reiter .kopfsuche-feld{display:none}
  .shell.nav-reiter .kopfsuche.offen .kopfsuche-feld{
    display:flex;flex-direction:column;
    position:fixed;inset:0;z-index:5;width:auto;
    padding:.6rem .75rem 0;
    background:var(--bg-cover);
  }
  .shell.nav-reiter .kopfsuche.offen .search-row{height:2.75rem;flex-shrink:0}
  .shell.nav-reiter .kopfsuche.offen .such-zu{display:inline-flex}
  .shell.nav-reiter .kopfsuche.offen .such-menue{
    position:static;flex:1 1 auto;min-height:0;max-height:none;
    margin:.6rem -.75rem 0;
    border:0;border-top:1px solid var(--line);border-radius:0;
    box-shadow:none;background:var(--bg-cover);
  }
}
@media (max-width:760px){
  .kopfsuche{flex:0 0 auto;min-width:0;padding:0;margin-left:auto}
  .kopfsuche .kopf-lupe{display:inline-flex}
  .kopfsuche-feld{display:none}
  /* Offen: Feld ganz oben ueber die volle Breite, darunter das Menue bis an
     den unteren Rand — fast der ganze Schirm fuer die Treffer. */
  .kopfsuche.offen .kopfsuche-feld{
    display:flex;flex-direction:column;
    position:fixed;inset:0;z-index:5;width:auto;
    padding:.6rem .75rem 0;
    padding-top:max(.6rem,env(safe-area-inset-top, 0px));
    background:var(--bg-cover);
  }
  .kopfsuche.offen .search-row{height:2.75rem;flex-shrink:0;padding-right:.2rem}
  .kopfsuche.offen .such-zu{display:inline-flex}
  .kopfsuche.offen .such-menue{
    position:static;flex:1 1 auto;min-height:0;max-height:none;
    margin:.6rem -.75rem 0;
    border:0;border-top:1px solid var(--line);border-radius:0;
    box-shadow:none;background:var(--bg-cover);
  }
  /* Finger: Chips, Suchart und Treffer mindestens 40 px hoch. */
  .such-filter{padding:.7rem .75rem}
  .such-filter .such-chip{min-height:2.5rem;padding:.5rem .95rem;font-size:.84rem}
  .such-filter select{min-height:2.5rem;font-size:16px}
  .such-treffer{padding:.7rem .75rem .75rem;min-height:3rem}
  .such-titel{font-size:.95rem}
  .such-schnipsel{font-size:.82rem}
  #search-results{padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px))}
}

.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}
/* Der scrollende Teil: die Ordnerliste. Unten Innenabstand, damit der
   letzte Ordner nicht unter dem festgepinnten Knopf verschwindet. (Die
   Suchtreffer stehen seit T-050 nicht mehr hier, sondern im Menue der
   Kopfsuche.) */
#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:"-"}
/* Die kurze Erklärung neben dem Klarnamen einer Zone (T-010): leise, in
   Normalschrift, eine Zeile, was nicht passt wird abgeschnitten. */
.dir>.dir-name>.zone-erkl{
  flex:1;min-width:0;
  font-weight:400;font-size:.68rem;letter-spacing:0;text-transform:none;
  color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.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;
  border-radius:var(--r-xs);
  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:var(--karte-grund)}

/* 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:var(--karte-grund)}
.netz-frame{flex:1;width:100%;border:0;background:var(--karte-grund);display:block}

/* ---------- Netz: Ladeanzeige statt weissem Aufblitzen (T-029) ----------
   Der Netz-Reiter bettet den eigenstaendigen Viewer als Rahmen ein. Bis das
   erste Bild WIRKLICH steht (der Viewer meldet es, siehe app.js
   netzLadeanzeige), liegt davor ein schwarzer Grund mit einem ruhigen Orbit:
   Kern, zwei Umlaufbahnen, ein kleiner Planet im Akzent. Davor, nicht
   dahinter: dahinter wuerde das zunaechst weisse Viewer-Dokument ihn
   verdecken. Keine Sterne (T-028), keine Bibliothek, nur Tokens.

   Die Bewegung liegt auf eigenen Kaesten und nur auf `transform`, damit der
   Browser sie ohne den Hauptfaden abspielt — der ist beim Aufbau des Netzes
   ausgelastet. Bei „Bewegung reduzieren" steht der Planet still und nur das
   Wort sagt, dass geladen wird. */
.netz-grund{
  position:absolute;
  inset:0;
  background:var(--karte-grund);
  z-index:2;
  opacity:1;
  transition:opacity 200ms ease;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.netz-grund.weg{opacity:0}
.netz-grund.fehler{pointer-events:auto}
.netz-lader{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  max-width:26rem;text-align:center;
}
.netz-grund .netz-wort{
  color:var(--muted);
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.netz-grund.fehler .netz-wort{
  color:var(--body);
  font-size:.9rem;
  letter-spacing:0;
  text-transform:none;
  line-height:1.5;
}
.netz-lader-tasten{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}

/* Der Orbit: 4.5rem, mittig im Netz-Kasten. */
.orbit-lader{position:relative;width:4.5rem;height:4.5rem;flex-shrink:0}
.orbit-bahn,
.orbit-kern,
.orbit-umlauf,
.orbit-planet{position:absolute;display:block;border-radius:var(--r-pill)}
.orbit-bahn{border:1px solid var(--line-strong)}
.orbit-bahn-aussen{inset:0}
.orbit-bahn-innen{inset:1.15rem;border-color:var(--line)}
.orbit-kern{
  width:.6rem;height:.6rem;left:50%;top:50%;margin:-.3rem 0 0 -.3rem;
  background:var(--fg);opacity:.85;
}
.orbit-umlauf{inset:0;animation:orbit-kreisen 2.8s linear infinite}
.orbit-planet{
  width:.55rem;height:.55rem;left:50%;top:0;margin:-.275rem 0 0 -.275rem;
  background:var(--signal);
  box-shadow:0 0 0 3px var(--accent-soft);
}
@keyframes orbit-kreisen{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.netz-grund.fehler .orbit-umlauf{animation:none}
.netz-grund.fehler .orbit-planet{background:var(--muted);box-shadow:none}
@media (prefers-reduced-motion: reduce){
  .orbit-umlauf{animation:none;transform:rotate(45deg)}
  .netz-grund{transition:none}
}

/* ---------- 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.4rem}
.view-head .eyebrow{display:block;margin-bottom:.5rem}
.view-head h2{margin-bottom:.35rem}
.view-head>p.muted{max-width:52rem;line-height:1.55;font-size:.88rem;margin:.2rem 0 0}
.path-line{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--muted);
  word-break:break-all;
}

/* ---------- Notiz-Kopf als eigener Block (Vision § 9.9) ----------
   Pfad, Titel und Metadaten stehen in EINER gerundeten Karte auf der
   Arbeitsflaeche; darunter beginnt der Text auf dem Grund. Der Kopf ist
   damit auf einen Blick vom Inhalt zu unterscheiden. */
.note-head{
  margin-bottom:1.4rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.35rem 1.6rem 1.25rem;
  position:relative;
  overflow:hidden;
}
.note-head::before{
  content:"";
  position:absolute;top:0;left:0;
  width:2.4rem;height:3px;
  background:var(--signal);
  border-bottom-right-radius:var(--r-pill);
}
.note-head .path{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.03em;
  color:var(--muted);
  word-break:break-all;
  margin-bottom:.75rem;
}
.note-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.8rem,3.2vw,2.5rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--fg);
  margin:0 0 .9rem;
  max-width:52rem;
  overflow-wrap:anywhere;
}
.note-head dl{
  display:flex;flex-wrap:wrap;gap:.45rem .5rem;
  margin:.2rem 0 0;
  padding:.85rem 0 0;
  border-top:1px solid var(--line-soft);
}
/* Jedes Metadatum ist ein Chip: Schluessel klein, Wert daneben. */
.note-head dt,.note-head dd{margin:0}
.note-head dt{
  display:inline-flex;align-items:center;
  font-family:var(--sans);
  font-weight:500;
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-right:0;
  border-radius:var(--r-pill) 0 0 var(--r-pill);
  padding:.22rem .55rem .22rem .7rem;
}
.note-head dd{
  display:inline-flex;align-items:center;
  color:var(--body);
  font-size:.76rem;
  font-family:var(--mono);
  word-break:break-word;
  border:1px solid var(--line);
  border-radius:0 var(--r-pill) var(--r-pill) 0;
  padding:.22rem .7rem .22rem .55rem;
  margin-right:.35rem;
  max-width:100%;
}

.note-actions{display:flex;gap:.45rem;margin-bottom:1.8rem;flex-wrap:wrap;align-items:center}
.note-actions button{padding:.42rem .95rem;font-size:.78rem}
.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);border-radius:var(--r-xs);padding:.08rem .4rem;font-family:var(--mono);font-size:.82em;color:var(--fg)}
.md pre{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.2rem;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:3px solid var(--signal);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;margin:1rem 0 1rem 0;padding:.55rem 1.1rem .55rem 1.1rem;color:var(--body)}
.md blockquote p{color:inherit}
/* Tabellen: gerundeter Rahmen, Haarlinien innen, Kopf leicht abgesetzt. */
.md table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:.86rem;margin:1rem 0;font-variant-numeric:tabular-nums;max-width:100%}
.md td,.md th{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);padding:.45rem .7rem;text-align:left;vertical-align:top}
.md td:last-child,.md th:last-child{border-right:0}
.md tr:last-child td{border-bottom:0}
.md th{color:var(--muted);font-weight:500;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);background:var(--surface-2)}
.md tbody tr:hover td{background:var(--hover-bg)}
.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);border-radius:var(--r-md)}

.wikilink{color:var(--signal);border-bottom:1px solid var(--wikilink-line)}
.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);
  border-radius:var(--r-md);
  font-family:var(--mono);
  font-size:.84rem;line-height:1.65;
  padding:1rem 1.1rem;
  resize:vertical;
}

/* =========================================================
   Home (editoriale Uebersicht)
   ========================================================= */
.home-hero{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background-color:var(--bg-cover);
  /* Grid-Overlay im Hero (gemandatete Textur, gedaempft) */
  background-image:
    linear-gradient(to right,var(--grid-line-hero) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line-hero) 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:0;left:0;
  width:2.4rem;height:3px;
  background:var(--signal);
  border-bottom-right-radius:var(--r-pill);
}
.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));
  gap:.75rem;
  margin-top:.75rem;
}
.home-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.5rem 1.5rem 1.7rem;
  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}

/* Zonen-Schnellzugriff: nummerierte Kacheln im Haarlinien-Raster */
.zone-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
  gap:.6rem;
}
.zone-tile{
  display:flex;flex-direction:column;gap:.45rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:1.05rem 1.1rem 1.1rem;
  min-width:0;
  transition:background-color var(--t-fast) linear,border-color var(--t-fast) linear;
}
.zone-tile:hover{background:var(--surface-2);border-color:var(--line-strong)}
.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}

/* =========================================================
   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(--hover-bg)}
table.audit td.ts{white-space:nowrap;color:var(--muted);font-family:var(--mono);font-size:.72rem}

/* Generische Section-Ueberschriften (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}

/* =========================================================
   Overlay + Dialog (wiederverwendbare Komponente, T-003a)

   .overlay  — legt sich ueber die ganze Seite, der Hintergrund wird unscharf
               und dunkler. Klick auf den Grund schliesst (macht app.js).
   .dialog   — das Fenster davor: gerundet, schwebend (einziger Ort mit
               Schatten), Kopf / Inhalt / Fuss als eigene Teile.
   Die bestehenden Dialoge (openModal) tragen beide Klassen mit; die
   Personen-Fenster der Verwaltung (T-003b) setzen darauf auf, ohne hier
   etwas zu aendern.
   ========================================================= */
.overlay,
.modal-backdrop{
  position:fixed;inset:0;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
  backdrop-filter:blur(7px) saturate(.9);
  display:flex;align-items:center;justify-content:center;
  z-index:40;
  padding:1rem;
  animation:overlay-auf var(--t-base) ease both;
}
@keyframes overlay-auf{from{opacity:0}to{opacity:1}}
.dialog,
.modal{
  position:relative;
  background:var(--surface-3);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  padding:1.5rem 1.7rem 1.4rem;
  width:34rem;max-width:92vw;
  max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:1rem;
  animation:dialog-auf var(--t-base) ease both;
}
.dialog.breit{width:52rem}
.dialog.schmal{width:26rem}
@keyframes dialog-auf{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.dialog::before,
.modal::before{
  content:"";
  position:absolute;
  top:0;left:1.7rem;
  width:2rem;height:3px;
  background:var(--signal);
  border-radius:0 0 var(--r-pill) var(--r-pill);
}
.dialog h3,.modal h3{margin:0 0 .2rem}
.dialog-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.dialog-kopf .eyebrow{display:block;margin-bottom:.35rem}
.dialog-inhalt{display:flex;flex-direction:column;gap:.8rem;min-height:0}
.dialog-fuss,
.dialog .row,
.modal .row{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.8rem;border-top:1px solid var(--line);flex-wrap:wrap}
/* Schliessen-Kreuz oben rechts: eine runde Geist-Taste. */
.dialog-zu{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  width:2rem;height:2rem;padding:0;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;flex-shrink:0;
}
.dialog-zu:hover{background:var(--hover-bg);border-color:var(--line-strong);color:var(--fg)}
/* Am Handy fuellt das Fenster den Schirm: ein 34-rem-Kasten mit Rand ringsum
   waere dort ein Fenster im Fenster. Ab hier gibt es keinen Rand mehr, keine
   Rundung und keine Deckelung der Hoehe — nur den Inhalt. (T-003b) */
@media (max-width: 640px){
  .overlay,.modal-backdrop{padding:0;align-items:stretch}
  .dialog,.modal{
    width:100%;max-width:100%;
    min-height:100%;max-height:100%;
    border-radius:0;border-left:0;border-right:0;
    padding:1.2rem 1.1rem 1rem;
  }
}
@media (prefers-reduced-motion: reduce){
  .overlay,.modal-backdrop,.dialog,.modal{animation:none}
}

.toast{
  position:fixed;bottom:1.6rem;left:50%;
  transform:translateX(-50%);
  background:var(--surface-3);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
  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){
  .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}
}

/* 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);border-radius:var(--r-md);overflow:hidden}
.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:3px solid var(--signal);background:var(--surface);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  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}

/* Anhänge: die Ansicht des Originals (PDF-Seite, Bild) über dem Textauszug.
   Das Bild kommt vom Server bereits verkleinert (breite=1400); hier begrenzt
   nur noch der Rahmen, damit ein Hochformat nicht die ganze Seite füllt. */
.anhang-vorschau{margin:0 0 1.8rem}
.anhang-leiste{display:flex;gap:.5rem;align-items:center;margin-bottom:.6rem;flex-wrap:wrap}
.anhang-leiste .muted{font-size:.78rem}
.anhang-bild{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.anhang-rahmen{display:block;width:100%;height:80vh;border:1px solid var(--line);
  border-radius:2px;background:#fff}
.anhang-spieler{display:block;max-width:100%;max-height:80vh;border:1px solid var(--line);
  border-radius:var(--r-md);background:#000}
audio.anhang-spieler{width:100%;height:auto;background:transparent;border:0}

/* =========================================================
   Einstellungen: Rahmen mit linker Sekundaernavigation (T-003a)

   Alles Betriebliche (Betrieb, Tracking, Verwaltung, Quellen, Kuratoren,
   Session Board) liegt hinter dem Zahnrad. Die Module selbst sind unveraendert
   — sie zeichnen in .einst-inhalt, als waere es die Hauptflaeche.
   ========================================================= */
.einst{
  display:grid;
  grid-template-columns:13.5rem minmax(0,1fr);
  gap:2.2rem;
  align-items:start;
}
.einst-nav{
  position:sticky;top:0;
  display:flex;flex-direction:column;gap:.15rem;
  padding:.25rem 0;
}
.einst-nav .eyebrow{display:block;padding:.3rem .9rem .55rem}
.einst-nav a{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:500;font-size:.88rem;
  color:var(--muted);
  padding:.5rem .9rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:color var(--t-fast) linear,background-color var(--t-fast) linear,border-color var(--t-fast) linear;
}
.einst-nav a:hover{color:var(--fg);background:var(--hover-bg)}
.einst-nav a.active{color:var(--fg);background:var(--surface-2);border-color:var(--line)}
.einst-nav a.active::before{
  content:"";width:.38rem;height:.38rem;border-radius:var(--r-pill);
  background:var(--signal);flex-shrink:0;
}
.einst-inhalt{min-width:0}
/* Die Module tragen noch ihre Bereichs-Beschriftung (Ops / Automatik) im Kopf.
   Im Einstellungs-Rahmen ist die Einordnung schon durch die linke Leiste
   gegeben — die Zeile wird deshalb hier ausgeblendet, nicht im Modul. */
.einst-inhalt>.view-head>.eyebrow{display:none}
@media (max-width:900px){
  .einst{grid-template-columns:1fr;gap:1rem}
  .einst-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:.3rem;padding:0 0 .75rem;border-bottom:1px solid var(--line)}
  .einst-nav .eyebrow{display:none}
}

/* Ohne erlaubtes Modul: ein ruhiger Satz. */
.einst-leer{max-width:40rem}
/* Das Kreuz im Suchfeld: der Browser malt es selbst, im Dunkeln weiss, auf
   hellem Grund aber im Systemblau — das einzige Blau der Oberflaeche. Im
   hellen Erscheinungsbild traegt es deshalb die leise Tinte der Seite. Im
   Dunkeln bleibt es, wie der Browser es malt. */
:root[data-thema="hell"] input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
  width:.75rem;height:.75rem;margin-left:.4rem;
  background-color:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2L2 10' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2L2 10' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor:pointer;
}
:root[data-thema="hell"] input[type="search"]::-webkit-search-cancel-button:hover{background-color:var(--fg)}

/* Zweite Gruppe der Leiste: die persoenlichen Punkte (Erscheinungsbild). */
.einst-nav .eyebrow.einst-gruppe{margin-top:1.1rem}

/* ---------- Einstellungen › Erscheinungsbild (26.09.2026) ----------
   Drei Karten nebeneinander, jede mit einer kleinen Vorschau: links die
   Oberflaeche (Kopfzeile, Zeilen), rechts die Wissenskarte (Umlaufbahn,
   Planet). Die Vorschau zeigt IMMER die Farben ihrer Stufe, unabhaengig
   davon, was gerade gilt — deshalb stehen ihre Toene hier ausgeschrieben
   (--m-*) und nicht als Token. Die Karte darum folgt dem geltenden Bild. */
.eb-einleitung{max-width:42rem;margin:-.4rem 0 1.6rem}
.eb-wahl{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1rem;
  max-width:62rem;
}
.eb-option{
  display:flex;flex-direction:column;gap:.9rem;
  padding:.8rem .8rem 1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear,box-shadow var(--t-fast) linear;
}
.eb-option:hover{border-color:var(--line-strong);background:var(--surface-2)}
.eb-option.gewaehlt{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line)}
.eb-option:has(.eb-knopf:focus-visible){box-shadow:var(--focus-ring)}
.eb-fuss{display:flex;align-items:flex-start;gap:.7rem;padding:0 .2rem}
/* Eigener, runder Auswahlpunkt statt des Browser-Knopfs. */
.eb-knopf{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;
  width:1.05rem;height:1.05rem;margin:.18rem 0 0;padding:0;
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:transparent;
  display:grid;place-content:center;
  cursor:pointer;
}
.eb-knopf::before{
  content:"";width:.5rem;height:.5rem;border-radius:var(--r-pill);
  background:var(--signal);
  transform:scale(0);transition:transform var(--t-fast) ease;
}
.eb-knopf:checked{border-color:var(--signal)}
.eb-knopf:checked::before{transform:scale(1)}
.eb-knopf:focus-visible{box-shadow:none}
.eb-text{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.eb-name{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.2;color:var(--fg);
}
.eb-marke{
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.08rem .5rem;
}
.eb-hinweis{font-size:.8rem;line-height:1.45;color:var(--muted)}
.eb-notiz{max-width:42rem;margin-top:1.4rem;font-size:.8rem}

/* Die Vorschau: 16:10, links Oberflaeche, rechts Karte. */
.eb-muster{
  --m-ui:#0a0a0a;--m-ui-kopf:#000000;--m-ui-linie:rgba(255,255,255,.12);--m-ui-text:rgba(255,255,255,.26);
  --m-karte:#000000;--m-karte-linie:rgba(255,255,255,.22);--m-punkt:#d8412f;--m-kern:rgba(255,255,255,.85);
  --m-rot:#d8412f;
  display:grid;grid-template-columns:42% 1fr;
  aspect-ratio:16/10;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
}
.eb-muster-karte-hell,
.eb-muster-hell{--m-karte:#f3efe6;--m-karte-linie:rgba(28,25,21,.22);--m-punkt:#de4b2b;--m-kern:rgba(28,25,21,.8)}
.eb-muster-hell{--m-ui:#f4f1ea;--m-ui-kopf:#ece7dd;--m-ui-linie:rgba(28,25,21,.12);--m-ui-text:rgba(28,25,21,.24);--m-rot:#de4b2b}
.eb-m-ui{position:relative;background:var(--m-ui);border-right:1px solid var(--m-ui-linie)}
.eb-m-kopf{
  position:absolute;left:0;right:0;top:0;height:20%;
  background:var(--m-ui-kopf);border-bottom:1px solid var(--m-ui-linie);
}
/* Die Marke in der Kopfzeile: ein roter Punkt. */
.eb-m-kopf::before{
  content:"";position:absolute;left:14%;top:50%;
  width:.32rem;height:.32rem;margin-top:-.16rem;border-radius:var(--r-pill);
  background:var(--m-rot);
}
/* Drei Textzeilen und ein Kaertchen. */
.eb-m-zeilen{
  position:absolute;left:14%;right:14%;top:32%;bottom:12%;
  background-image:
    linear-gradient(var(--m-ui-text),var(--m-ui-text)),
    linear-gradient(var(--m-ui-text),var(--m-ui-text)),
    linear-gradient(var(--m-ui-text),var(--m-ui-text));
  background-size:100% 3px,78% 3px,88% 3px;
  background-position:0 0,0 22%,0 44%;
  background-repeat:no-repeat;
}
.eb-m-zeilen::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  border:1px solid var(--m-ui-linie);border-radius:4px;
}
.eb-m-karte{position:relative;background:var(--m-karte)}
.eb-m-bahn{
  position:absolute;left:50%;top:50%;
  width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:1px dashed var(--m-karte-linie);border-radius:var(--r-pill);
}
.eb-m-bahn::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:var(--r-pill);background:var(--m-kern);
}
.eb-m-planet{
  position:absolute;left:73%;top:26%;
  width:.62rem;height:.62rem;border-radius:var(--r-pill);
  background:var(--m-punkt);
}

/* =========================================================
   Agenten: Platzhalter (V4 Baustein B kommt spaeter)
   ========================================================= */
/* Der fruehere Agenten-Platzhalter (Kopf, Marke, drei Karten) ist mit
   T-015-P5 weg; der Hauptpunkt zeichnet aus agenten.css. */

/* =========================================================
   Geteilte schlanke Bausteine fuer die Reiter (statt Einheits-Kacheln)

   .bilanz    — eine Zeile aus Zahl+Wort-Paaren (Quellen, Session Board)
   .bericht   — Beschriftung/Wert-Zeilen wie ein kurzer Bericht (Kuratoren)
   .statusfeld — Ampel + Satz + Fakten (Betrieb)
   Alle drei sind bewusst leiser als eine Kachelreihe: sie nehmen so viel
   Platz, wie ihr Inhalt braucht, nicht so viel, wie eine Kachel vorgibt.
   ========================================================= */
.bilanz{
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  margin:.4rem 0 1.4rem;
}
.bilanz-posten{
  display:inline-flex;align-items:baseline;gap:.45rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.38rem .95rem .38rem .8rem;
  white-space:nowrap;
}
.bilanz-zahl{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1}
.bilanz-wort{font-size:.78rem;color:var(--muted)}
.bilanz-posten.hot .bilanz-zahl{color:var(--signal)}
.bilanz-posten.leise{opacity:.6}

.bericht{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:.35rem 1.2rem;
  align-items:baseline;
  margin:.4rem 0 1.4rem;
  max-width:44rem;
  padding:.9rem 1.1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.bericht dt{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.bericht dd{margin:0;color:var(--body);font-size:.88rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.bericht dd strong{font-family:var(--serif);font-weight:500;font-size:1.1rem;color:var(--fg);font-variant-numeric:tabular-nums}
.bericht dd .unter{font-size:.76rem;color:var(--muted)}

.statusfeld{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1.1rem 1.4rem;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.2rem 1.5rem;
  margin:.4rem 0 1.4rem;
}
.statusfeld .ampel{
  width:3.2rem;height:3.2rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--fg);
  background:var(--surface-2);
  flex-shrink:0;
}
.statusfeld.z-gut .ampel{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.statusfeld.z-warnung .ampel{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.statusfeld.z-fehler .ampel{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.statusfeld.z-unbekannt .ampel{color:var(--muted)}
.statusfeld-text{min-width:0}
.statusfeld-titel{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--fg);line-height:1.15;margin:0 0 .25rem}
.statusfeld-satz{margin:0;color:var(--body);font-size:.9rem;line-height:1.5}
.statusfeld-fakten{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  padding-top:1rem;border-top:1px solid var(--line-soft);
}
.statusfeld-fakten .bilanz-posten{padding:.3rem .8rem .3rem .7rem}
.statusfeld-fakten .bilanz-zahl{font-size:1rem}
@media (max-width:600px){.statusfeld{grid-template-columns:1fr}.statusfeld .ampel{width:2.6rem;height:2.6rem}}

/* =========================================================
   Arbeitsplatz (T-003c, Vision § 9.2): Netz und Wissen auf einer Flaeche
   ---------------------------------------------------------
   Von links nach rechts: Zonen (eingeklappt),
   das Netz (#netz-halter), die Leseseite (#main), die Agenten-Spalte. Die
   Reihenfolge setzt `order`, weil app.js den Netz-Kasten erst beim ersten
   Besuch anhaengt. Auf dem Handy wird die Leseseite ein Vollbild-Blatt ueber
   dem Netz, die Zonen eine Schublade, die Agenten-Spalte faellt weg.
   ========================================================= */

.body.arbeitsplatz{position:relative}
.body.arbeitsplatz aside{order:1;width:19rem}
.body.arbeitsplatz #netz-halter{order:2}
.body.arbeitsplatz main{
  order:3;
  flex:0 0 auto;
  width:min(34rem,44vw);
  padding:1.1rem 1.5rem 3rem;
  border-left:1px solid var(--line);
  background:var(--bg);
}
.body.arbeitsplatz.lese-breit main{width:min(60rem,62vw)}
.body.arbeitsplatz #agenten-spalte{order:4}

/* Die Taste, mit der eine Spalte auf- und zugeht: rund, leise, mit Symbol. */
.spalten-schalter{
  display:inline-flex;align-items:center;gap:.5rem;
  align-self:flex-start;
  flex-shrink:0;
  padding:.45rem .8rem;
  font-size:.74rem;
}
button.ghost.spalten-schalter[aria-expanded="true"]{border-color:var(--line)}
.spalten-schalter svg{width:1rem;height:1rem;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Eingeklappt: eine schmale Leiste mit der runden Taste, das Wort senkrecht. */
.body.arbeitsplatz aside.eingeklappt,
.agenten-spalte.eingeklappt{
  width:3.25rem;
  padding:.8rem .4rem;
  align-items:center;
}
.body.arbeitsplatz aside.eingeklappt>:not(.spalten-schalter),
.agenten-spalte.eingeklappt>:not(.spalten-schalter){display:none}
/* Ausserhalb des Arbeitsplatzes (Sitz ohne Netz) gibt es nichts einzuklappen. */
.body:not(.arbeitsplatz) aside>.spalten-schalter{display:none}
.body.arbeitsplatz aside.eingeklappt>.spalten-schalter,
.agenten-spalte.eingeklappt>.spalten-schalter{flex-direction:column;align-self:center;padding:.65rem .5rem;gap:.6rem}
.body.arbeitsplatz aside.eingeklappt>.spalten-schalter .schalter-wort,
.agenten-spalte.eingeklappt>.spalten-schalter .schalter-wort{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}

/* Agenten-Spalte (T-015-P5): laufende und letzte Laeufe, Weg zu den Agenten. */
.agenten-spalte{
  display:flex;flex-direction:column;gap:1rem;
  width:17rem;
  padding:1rem 1.1rem;
  background:var(--bg-cover);
  border-left:1px solid var(--line);
  flex-shrink:0;
  min-height:0;
  overflow-y:auto;
}
.agenten-inhalt{
  display:flex;flex-direction:column;gap:.9rem;align-items:stretch;
  min-width:0;
}
.agenten-inhalt>.btn{align-self:flex-start}
.agenten-kasten{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.agenten-kasten:empty{display:none}
.agenten-kasten .eyebrow{margin-bottom:.2rem}
.agenten-satz-leise{margin:0;font-size:.8rem;line-height:1.45}
.agenten-lauf{
  display:flex;align-items:flex-start;gap:.55rem;
  padding:.5rem .65rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  text-decoration:none;color:var(--fg);
  min-width:0;
}
.agenten-lauf:hover{border-color:var(--line-strong);background:var(--surface-2)}
.agenten-lauf .ag-punkt{margin-top:.4rem}
.agenten-lauf-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.agenten-lauf-name{font-family:var(--serif);font-weight:500;font-size:.98rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenten-lauf-satz{font-size:.74rem;line-height:1.35}
/* Der Punkt in der Ampelfarbe — dieselben Klassen wie im Hauptpunkt. */
.ag-punkt{width:.5rem;height:.5rem;border-radius:var(--r-pill);background:var(--line);flex-shrink:0;display:inline-block}
.ag-punkt.ok{background:var(--ok)}
.ag-punkt.warn{background:var(--warn)}
.ag-punkt.bad{background:var(--bad)}
.ag-punkt.leer{background:transparent;border:1px solid var(--line)}
/* Eingeklappt: ein Punkt an der Taste, wenn gerade ein Lauf laeuft. */
.spalten-schalter .schalter-punkt{display:none;width:.45rem;height:.45rem;border-radius:var(--r-pill);background:var(--ok)}
.spalten-schalter.laeuft .schalter-punkt{display:inline-block;animation:ag-puls 1.6s ease-in-out infinite}
@keyframes ag-puls{0%,100%{opacity:1}50%{opacity:.35}}

/* Die Leiste ueber der Notiz auf der Leseseite: klebt oben, deckt ab. */
.lese-leiste{
  position:sticky;top:-1.1rem;
  z-index:3;
  display:flex;align-items:center;gap:.45rem;
  margin:-1.1rem -1.5rem 1.1rem;
  padding:.6rem 1.5rem;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.lese-leiste .eyebrow{margin-right:auto}
.lese-leiste button{padding:.36rem .85rem;font-size:.74rem}
.lese-leiste .lese-zu{width:2.1rem;height:2.1rem;padding:0;font-size:1.15rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* Die Notiz auf der schmalen Leseseite: derselbe Kopf, nur kleiner gesetzt. */
.body.arbeitsplatz .note-head{padding:1.1rem 1.2rem 1rem}
.body.arbeitsplatz .note-title{font-size:1.7rem}
.body.arbeitsplatz.lese-breit .note-title{font-size:clamp(1.8rem,2.6vw,2.3rem)}
.body.arbeitsplatz .note-actions{margin-bottom:1.3rem}
.body.arbeitsplatz .md{font-size:.95rem}

/* Wissen-Startseite: Suche oben, darunter nur „Zuletzt gelesen". */
.wissen-kopf h2{font-family:var(--serif);font-weight:500}
.wissen-zuletzt{max-width:46rem}
.wissen-zuletzt .recent-item{grid-template-columns:1fr}
.wissen-zuletzt .recent-item .t,
.wissen-zuletzt .recent-item .m{grid-column:1}

/* Bis 900 px stapelt die allgemeine Regel oben die Flaechen untereinander.
   Der Arbeitsplatz bleibt nebeneinander: Netz gross, Zonen als Schublade,
   die Leseseite als Blatt darueber. */
@media (max-width:900px){
  .body.arbeitsplatz{flex-direction:row;overflow:hidden}
  .body.arbeitsplatz aside{max-height:none;min-height:0;border-bottom:0;border-right:1px solid var(--line)}
  .body.arbeitsplatz #agenten-spalte{display:none}
  .body.arbeitsplatz aside.eingeklappt{width:2.75rem;padding:.6rem .25rem}
  /* Aufgeklappt: eine Schublade ueber dem Netz, nicht daneben. */
  .body.arbeitsplatz aside:not(.eingeklappt){
    position:absolute;top:0;bottom:0;left:0;z-index:20;
    width:min(20rem,86vw);
    box-shadow:var(--shadow-2);
  }
  /* Die Leseseite: ein Blatt ueber der Arbeitsflaeche. Die Kopfleiste (mit
     der Suche, T-050) bleibt darueber frei: 3,6rem Leiste + Luft. */
  .body.arbeitsplatz main,
  .body.arbeitsplatz.lese-breit main{
    position:fixed;inset:4.1rem 0 0 0;z-index:60;
    width:auto;
    padding:0 1.1rem 3rem;
    border-left:0;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:var(--shadow-2);
    overflow-y:auto;
  }
  .lese-leiste{top:0;margin:0 -1.1rem 1rem;padding:.7rem 1.1rem}
  .lese-leiste .lese-breite{display:none}
}

/* =========================================================
   Fassung „reiter" der Kopfzeile (T-011)

   Die mittlere Gruppe (Betrieb, Quellen, Session Board, Verwaltung) steht
   ruhig abgesetzt neben den vier Hauptpunkten: eine Haarlinie davor, ein
   wenig kleiner und leiser. Auf dem Handy rutscht sie in eine eigene Zeile.
   ========================================================= */
.nav-cluster[data-rolle="betrieb"]{
  border-left:1px solid var(--line);
  margin-left:.55rem;padding-left:.65rem;
}
.nav-cluster[data-rolle="betrieb"] a{font-size:.8rem;padding:.38rem .75rem}
.einst.einst-reiter{grid-template-columns:1fr}
/* Handy (T-045): die Zusatzreiter liegen dort hinter dem Zahnrad
   (navFassung in app.js). Die Gruppe bleibt auch dann weg, wenn die Leiste
   gerade noch nicht neu aufgebaut ist — sonst bräche die Zeile um. */
@media (max-width:760px){
  header .nav-cluster[data-rolle="betrieb"]{display:none}
}

/* Die Wahl der Fassung im Profil-Menue (nur Verwalter): zwei runde Knoepfe. */
/* Die Knoepfe sind <button> und fielen sonst unter die globale Regel
   `button:not(.btn)` (0,1,1: rot gefuellt). Mit `.fassung-wahl ` davor
   (0,2,0) gilt die eigene, leise Form (T-029). */
.fassung-wahl{display:inline-flex;gap:.3rem;flex-wrap:wrap}
.fassung-wahl .fassung-knopf{
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  color:var(--body);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.28rem .8rem;cursor:pointer;
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear,color var(--t-fast) linear;
}
.fassung-wahl .fassung-knopf:hover{color:var(--fg);background:var(--hover-bg);border-color:var(--line-strong)}
.fassung-wahl .fassung-knopf:active{transform:none}
.fassung-wahl .fassung-knopf.active{color:var(--fg);background:var(--surface-2);border-color:var(--line-strong)}
.fassung-vorgabe{font-size:.7rem;line-height:1.4}

/* =========================================================
   Handy-Ansicht (T-045, Silas 25.09.2026: Entwurf 5 „Vorschau")

   ALLES in diesem Abschnitt steht in der Medienabfrage bis 760 px. Am
   Rechner greift hier keine Zeile. Das Verhalten dazu steht in app.js
   (Abschnitt „Handy-Ansicht"), gekapselt hinter derselben Abfrage.

   Der Vault: das Netz füllt die ganze Fläche unter der Kopfleiste. Oben
   schweben „Ordner" (links) und „ganzes Netz zeigen" (rechts). Die Zonen-
   Spalte ist eine Schublade von links mit Schleier, die Leseseite ein Blatt
   von unten mit zwei Rasten (klein ≈ 52 % des Schirms, groß bis knapp unter
   die schwebenden Knöpfe). Auch groß bleibt ringsum Rand: man sieht das
   Netz dahinter. Die Rasten sind Klassen am Blatt (ohne Klasse = klein,
   .blatt-gross, .blatt-zu); nur während des Ziehens bewegt app.js das Blatt
   über Web Animations.
   ========================================================= */
@media (max-width:760px){
  /* Die Höhe des SICHTBAREN Schirms: auf dem iPhone ist 100vh größer als
     das, was zwischen den Leisten des Browsers zu sehen ist — das Blatt
     stünde sonst mit seinem unteren Teil hinter der Adressleiste. */
  .shell{height:100vh;height:100dvh}

  /* ---- Schwebende Knöpfe über dem Netz ---- */
  .body button.handy-knopf{
    position:absolute;top:12px;z-index:12;
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    height:2.5rem;min-width:2.5rem;padding:0 1rem 0 .8rem;
    background:var(--surface-2);color:var(--fg);
    border:1px solid var(--line-strong);border-radius:var(--r-pill);
    box-shadow:var(--shadow-1);
    font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:0;
    touch-action:manipulation;
  }
  .body button.handy-knopf:hover{background:var(--surface-3);border-color:var(--line-strong);color:var(--fg)}
  .body button.handy-knopf:active{transform:none;background:var(--surface-3)}
  .body button.handy-ordner{left:12px}
  .body button.handy-einpassen{right:12px;width:2.5rem;padding:0}
  .handy-knopf svg,
  .handy-rund svg{width:1.15rem;height:1.15rem;display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .body:not(.arbeitsplatz)>.handy-knopf,
  .body:not(.arbeitsplatz)>.handy-schleier{display:none}

  /* ---- Die Schublade (Zonen-Spalte) ---- */
  .body.arbeitsplatz aside,
  .body.arbeitsplatz aside:not(.eingeklappt),
  .body.arbeitsplatz aside.eingeklappt{
    position:absolute;top:0;bottom:0;left:0;z-index:30;
    width:min(86%,340px);max-height:none;min-height:0;
    padding:0 1rem 1rem;gap:.75rem;
    align-items:stretch;
    border-right:1px solid var(--line);border-bottom:0;
    box-shadow:var(--shadow-2);
    transform:none;visibility:visible;
    transition:transform 300ms cubic-bezier(.22,.8,.24,1),visibility 0s linear 0s;
  }
  /* Zu: aus dem Bild geschoben und unsichtbar — erst NACH dem Hinausfahren,
     damit der Inhalt beim Wegfahren nicht vorher verschwindet. */
  .body.arbeitsplatz aside.eingeklappt{
    transform:translateX(-102%);visibility:hidden;box-shadow:none;
    transition:transform 300ms cubic-bezier(.22,.8,.24,1),visibility 0s linear 300ms;
  }
  .body.arbeitsplatz aside.eingeklappt>.handy-schublade-kopf{display:flex}
  .body.arbeitsplatz aside.eingeklappt>.side-label{display:block}
  .body.arbeitsplatz aside.eingeklappt>#tree{display:block}
  .body.arbeitsplatz aside.eingeklappt>#new-note-btn{display:block}
  /* Die Taste der Spalte braucht es hier nicht: auf geht es mit „Ordner",
     zu mit dem Kreuz im Kopf oder dem Schleier. */
  .body.arbeitsplatz aside>#zonen-schalter{display:none}
  .handy-schublade-kopf{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    min-height:3.4rem;flex-shrink:0;margin-right:-.4rem;
  }
  .body:not(.arbeitsplatz) .handy-schublade-kopf{display:none}
  .handy-schublade-titel{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--fg);line-height:1}
  aside button.handy-rund{
    width:2.5rem;height:2.5rem;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;color:var(--body);
    border:1px solid var(--line);border-radius:var(--r-pill);
  }
  aside button.handy-rund:hover{background:var(--hover-bg);border-color:var(--line-strong);color:var(--fg)}
  .body.arbeitsplatz #tree .leaf{padding-top:.65rem;padding-bottom:.65rem}
  .body.arbeitsplatz #tree .dir>.dir-name{padding:.8rem 0}
  .handy-schleier{
    position:absolute;inset:0;z-index:25;
    background:var(--scrim);
    opacity:0;visibility:hidden;
    transition:opacity 250ms linear,visibility 0s linear 250ms;
  }
  .body.arbeitsplatz>aside:not(.eingeklappt)~.handy-schleier{
    opacity:1;visibility:visible;
    transition:opacity 250ms linear,visibility 0s linear 0s;
  }

  /* ---- Das Notizblatt (die Leseseite, #main) ----
     Oberkante 60 px unter der Kopfleiste = knapp unter der Reihe der
     schwebenden Knöpfe (12 px + 40 px + Luft). Links und rechts 8 px Rand,
     oben runde Ecken: auch groß sieht man das Netz vorbei. Die kleine Raste
     schiebt das Blatt so weit hinunter, dass 52 % der Schirmhöhe zu sehen
     sind (app.js: BLATT_KLEIN_ANTEIL). Damit man darin bis ans Ende scrollen
     kann, trägt es klein unten so viel Luft, wie unter den Rand ragt. */
  .body.arbeitsplatz main,
  .body.arbeitsplatz.lese-breit main{
    position:absolute;top:60px;right:8px;bottom:0;left:8px;z-index:15;
    width:auto;
    padding:0 1.1rem calc(48vh + 3rem);
    padding-bottom:calc(48dvh + 3rem);
    border:1px solid var(--line-strong);border-bottom:0;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:var(--shadow-2);
    background:var(--bg);
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(calc(100% - 52vh));
    transform:translateY(calc(100% - 52dvh));
  }
  .body.arbeitsplatz main.blatt-gross{
    transform:none;
    padding-bottom:calc(3rem + env(safe-area-inset-bottom, 0px));
  }
  .body.arbeitsplatz main.blatt-zu{transform:translateY(calc(100% + 24px))}
  /* Der Griff: die Leseleiste oben im Blatt. Ihre Knöpfe (Breiter, ×)
     braucht es hier nicht — oben steht nur der Strich, und nur hier nimmt
     das Blatt einen Zug an (touch-action:none). Der Inhalt darunter
     scrollt ganz normal. */
  .body.arbeitsplatz .lese-leiste{
    position:sticky;top:0;z-index:3;
    justify-content:center;
    margin:0 -1.1rem .6rem;padding:.8rem 0 .9rem;min-height:2.25rem;
    background:var(--bg);border-bottom:0;
    touch-action:none;cursor:grab;
    user-select:none;-webkit-user-select:none;
  }
  .body.arbeitsplatz .lese-leiste>*{display:none}
  .body.arbeitsplatz .lese-leiste::before{
    content:"";display:block;
    width:2.4rem;height:4px;border-radius:var(--r-pill);
    background:var(--line-strong);
  }
  .body.arbeitsplatz .note-head{padding:1rem 1.05rem .95rem}
  .body.arbeitsplatz .note-title{font-size:1.55rem}

  /* ---- Einstellungen: Übersicht zum Antippen statt linker Leiste ---- */
  .einst{grid-template-columns:1fr;gap:.9rem}
  .einst-nav{position:static;flex-direction:row;padding:0;border-bottom:0}
  .einst-nav a.einst-zurueck{
    min-height:2.5rem;padding:.5rem 1rem .5rem .75rem;
    color:var(--body);border:1px solid var(--line);
  }
  .einst-nav a.einst-zurueck:hover{color:var(--fg)}
  .einst-liste{
    display:flex;flex-direction:column;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    overflow:hidden;
  }
  .einst-liste a{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    min-height:3.25rem;padding:.75rem 1.1rem;
    color:var(--fg);font-size:1rem;font-weight:500;
    border-top:1px solid var(--line-soft);
  }
  .einst-liste a:first-child{border-top:0}
  .einst-liste a::after{content:"›";color:var(--muted);font-size:1.25rem;line-height:1}
  .einst-liste a:hover{background:var(--hover-bg);color:var(--fg)}

  /* ---- Für alle Seiten: nur hoch und runter, Finger-taugliche Tasten ----
     Eingabefelder mit 16 px Schrift — darunter vergrößert iOS beim
     Antippen die ganze Seite. Die Module setzen ihre Feldschrift mit
     eigenen, stärkeren Regeln; deshalb hier ausnahmsweise !important. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{font-size:16px!important}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select{min-height:2.5rem}
  .btn,
  button:not(.btn),
  .btn.klein,
  button.klein:not(.btn){min-height:2.5rem}
  .dialog-zu{width:2.5rem;height:2.5rem}
  .tab{padding:.8rem 0}
  .tabs{flex-wrap:wrap;column-gap:1.2rem}
  main{overflow-x:clip}
  main img,
  main video{max-width:100%;height:auto}
  .md{overflow-wrap:break-word}
  .md pre{max-width:100%;overflow-x:auto}
  .md table{display:block;max-width:100%;overflow-x:auto}
  .toast{max-width:calc(100vw - 1.5rem);bottom:calc(1rem + env(safe-area-inset-bottom, 0px))}
  .profil-menue{max-width:calc(100vw - 1.5rem)}
}