/* ============================================================
   onagero — Anmutung. Keine Funktion, keine Anordnung.

   Wird als LETZTES geladen. Fasst Farbe, Schrift, Kante, Fuellung und
   Schatten an. Fasst NICHT an: display, position, width, height, flex,
   grid - also nichts, was etwas verschiebt. Zum Zurueckdrehen die
   <link>-Zeile aus den Seiten nehmen.

   DIE SPRACHE, UND WAS SIE ERSETZT
   Vorher: Industrieterminal. Schreibmaschine ueberall, VERSALIEN mit
   Sperrung, harte Haarlinien, ein Warnstreifen in Schraffur, scharfe Ecken.
   Jetzt: ruhige Bueroanwendung. Eine Grotesk, gemischte Schreibung, weiche
   Kanten, wenig Linien, viel Ruhe dazwischen. Farbe traegt nur, wo etwas zu
   entscheiden oder zu melden ist.

   DREI REGELN, DIE ALLES ANDERE ERKLAEREN
   1. NICHTS SCHREIT. Kein text-transform, keine Sperrung. Es gab 48 Regeln
      mit Versalien und 73 mit Sperrung. Beide sind flaechig abgeraeumt, weil
      48 Einzelueberschreibungen beim naechsten Umbau wieder auseinanderfallen.
   2. SCHREIBMASCHINE IST EIN SIGNAL, KEIN STIL. Mono steht im Endgeraet, im
      Quelltext und bei einem Wert, den eine Maschine geschrieben hat. Sonst
      Grotesk. Es gab 88 Mono-Stellen; die meisten waren Dekoration.
   3. LINIEN SIND TEUER. Wo vorher eine Haarlinie trennte, trennt jetzt
      Abstand oder eine blasse Fuellung. Rahmen nur um Dinge zum Anfassen.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

:root,
[data-theme="dark"],
[data-theme="light"]{
  --bg:        #F7F7F5;
  --panel:     #FFFFFF;
  --panel2:    #F1F1EE;
  --line:      #E7E7E2;
  --line-zart: #F0F0EC;
  --text:      #191918;
  --muted:     #6B6B66;

  /* DIE AKZENTFARBE IST IN BEIDEN ANMUTUNGEN DAS LIMETTENGRUEN. Hier stand ein
     dunkles Tannengruen, und damit war die helle Anmutung nicht dieselbe Marke
     in hell, sondern eine zweite Marke: die Bilder, die Leuchten unter den
     Erklaerungen und der Kumpel wechselten beim Umschalten die Farbe. Was in
     hell anders sein MUSS, ist nur die Schrift AUF dem Akzent - schwarz auf
     Limette, nie weiss, sonst ist der Knopf nicht lesbar. */
  --accent:      #7CB518;
  --accent-dark: #6AA010;
  --akzent-hell: #EDF6E0;
  /* Die markierte Stelle war --akzent-hell, also #EDF6E0 auf #FFFFFF:
     ein Unterschied von zwoelf Stufen, den man auf einem Laptop im
     Hellen nicht sieht. Eine Auswahl muss man SEHEN, ohne die Schrift
     darin zu verlieren - schwarz auf diesem Gruen steht bei 11,5:1. */
  --auswahl:     #C3E38F;
  --limette:     #9BD832;
  --ok:    #2E7D51;
  --warn:  #9A5A1C;
  --err:   #A33A22;
  --term-bg: #1A1D1B;

  --kopf-dunkel:#0A2C1D;
  --kopf-hell:  #175B3C;
  --naht:       #7CB518;

  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --bg2:var(--panel); --surface:var(--panel); --surface2:var(--panel2); --surface3:var(--panel2);
  --border:var(--line); --border2:var(--line-zart);
  --text2:var(--text); --text3:var(--muted);
  --accent-hover:var(--accent-dark); --accent-dim:var(--akzent-hell); --accent-text:#0A1A0E;
  --green:var(--ok);   --green-bg:#E8F0EA;
  --yellow:var(--warn);--yellow-bg:#F6EFE6;
  --red:var(--err);    --red-bg:#F7EBE7;

  --radius:  8px;
  --radius2: 6px;
  --schatten:      0 1px 2px rgba(25,25,24,.05);
  --schatten-hoch: 0 4px 14px rgba(25,25,24,.10), 0 1px 3px rgba(25,25,24,.06);
}

/* ============================================================
   Das dunkle Bild derselben Sprache.
   Der Schalter war da und bewirkte nichts: beide Zustaende trugen
   dieselben Werte, also sah Dunkel aus wie Hell. Gleiche Form,
   gleiche Radien, gleiche Schrift - nur der Grund kippt, und der
   Akzent wird die Limette, weil Dunkelgruen auf Dunkelgruen nichts
   mehr ist. Schrift AUF dem Akzent kippt deshalb mit (--accent-text).
   ============================================================ */
[data-theme="dark"]{
  --bg:        #0E1613;
  --panel:     #14201B;
  --panel2:    #1A2822;
  --line:      #24352D;
  --line-zart: #1C2A24;
  --text:      #ECF2EE;
  --muted:     #9CAAA3;

  --accent:      #7CB518;
  --accent-dark: #6AA010;
  --akzent-hell: #1B2E1A;
  /* Dasselbe im Dunkeln: #1B2E1A auf #14201B war praktisch der Grund.
     Helle Schrift auf diesem Gruen steht bei 5,8:1. */
  --auswahl:     #44661D;
  --limette:     #9BD832;
  --ok:    #5FBF87;
  --warn:  #D9A55A;
  --err:   #E2705A;
  --term-bg: #0A100D;

  --kopf-dunkel:#0F2C1D;
  --kopf-hell:  #235C3B;
  --naht:       #7CB518;

  --bg2:var(--panel); --surface:var(--panel); --surface2:var(--panel2); --surface3:var(--panel2);
  --border:var(--line); --border2:var(--line-zart);
  --text2:var(--text); --text3:var(--muted);
  --accent-hover:var(--accent-dark); --accent-dim:var(--akzent-hell);
  --accent-text:#0A1A0E;
  --green:var(--ok);   --green-bg:#16281F;
  --yellow:var(--warn);--yellow-bg:#2A2317;
  --red:var(--err);    --red-bg:#2B1A16;

  --schatten:      0 1px 2px rgba(0,0,0,.34);
  --schatten-hoch: 0 4px 16px rgba(0,0,0,.44), 0 1px 3px rgba(0,0,0,.30);
}


/* ---------- 1. Nichts schreit ---------- */
body, body *:not(code):not(pre):not(kbd){
  text-transform:none !important;
  letter-spacing:normal !important;
}
/* Grotesk als BODEN, nicht als Wunsch. Eine Liste von Auswahlen reicht nicht:
   88 Stellen setzen Schreibmaschine ausdruecklich und die meisten sind
   spezifischer als eine Aufzaehlung. Die Sprache braucht einen Boden, sonst
   bleibt sie eine Bitte. */
body, body *:not(code):not(pre):not(kbd){ font-family:var(--sans) !important; }
/* Und darueber die Ausnahmen, in dieser Reihenfolge, damit sie gewinnen:
   das Endgeraet, Quelltext, und die zwei Stellen, an denen im Entwurf
   wirklich ein Maschinenwert steht. */
code, pre, kbd, .mono,
.term-wrap, .term-wrap *, .xterm, .xterm *,
.ltag, .stat-pill, .usage-num, .acct-indicator{
  font-family:var(--mono) !important;
}
body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
h1{font-size:19px;font-weight:600}
h2{font-size:15px;font-weight:600}
h3{font-size:13px;font-weight:600}

/* ---------- 2. Kopfleiste: Verlauf, Naht, Kontofeld ---------- */
.lmnl-nav{
  background:linear-gradient(90deg,var(--kopf-dunkel) 0%,var(--kopf-hell) 100%);
  border-bottom:0;color:#F2F7F3;align-items:stretch;padding-right:0;
}
.lmnl-nav > *{align-self:center}
/* KEIN EINZIGER ECKIGER KNOPF IN DER LEISTE. Nachgemessen an Karls Bild
   (07.09.2026, senkrechte Schnitte): der Hell-Dunkel-Knopf hat GAR KEINEN
   Kasten - nur Striche auf dem Verlauf. Der Kontoknopf ist eine Pille mit
   1 Pixel Rand #2B5A3E und OHNE Fuellung: innen misst er #102C1D, also den
   Grund der Leiste. Beide sind 27 von 47 Pixeln hoch, sitzen also mit
   Abstand in der Leiste und nicht von Kante zu Kante.
   Vorher stand hier das Gegenteil: beide von oben bis unten durchgezogen, mit
   dunklem Block und einer limettenfarbenen Kante am Symbolknopf. */
.lmnl-nav button.lmnl-iconbtn,
.lmnl-nav button.lmnl-user{align-self:center;background:transparent}
.lmnl-nav button.lmnl-iconbtn,
.lmnl-nav button.lmnl-iconbtn:hover{
  border:0;background:transparent;border-radius:999px;
  width:30px;height:30px;padding:0;color:rgba(233,244,237,.78)}
.lmnl-nav button.lmnl-iconbtn:hover{color:#fff}
.lmnl-nav button.lmnl-user,
.lmnl-nav button.lmnl-user:hover{
  border:0;background:transparent;padding:0 14px 0 4px;color:#F2F7F3;font-size:12px}
.lmnl-nav button.lmnl-user > *{
  border:1px solid #2B5A3E;border-radius:999px;background:transparent;
  padding:0 15px;height:26px;display:inline-flex;align-items:center;color:#F2F7F3;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;letter-spacing:.03em}
.lmnl-nav button.lmnl-user:hover > *{border-color:#3E7A55}
/* Der Schriftzug im Entwurf ist LEICHTER und weiter gesperrt als der hier. */
/* Gemessen: der Schriftzug im Entwurf ist rund 79 Pixel breit, meiner war 60.
   Also ein Fuenftel zu klein. */
.lmnl-brand{font-size:20px;font-weight:400;letter-spacing:.045em;
  text-transform:lowercase;color:#F2F7F3}
/* Im Entwurf ist die Marke 24 Pixel breit (gemessen: x 13 bis 36 bei 1578
   Breite). 19 war zu klein - nebeneinander gelegt sieht man es sofort. */
/* Kein Beschnitt am Zeichen: liminal.css setzt hier overflow:hidden, und ein
   Zeichen, das an seiner Kiste abgeschnitten wird, sieht eckig aus.
   29 statt 25, weil das Feld jetzt 28 Einheiten misst und 2,5 davon Luft. */
.lmnl-brand .glyph{width:29px;height:29px;flex:0 0 29px;overflow:visible}
/* Die Blase war so hoch wie die ganze Leiste. Ursache: die Reiterzeile steht
   auf `align-items:stretch` und `height:100%`, also wurde aus dem Hintergrund
   ein 46 Pixel hoher Block, der an der Leiste klebt statt am Wort zu sitzen.
   Eine feste Hoehe, mittig gesetzt, macht daraus wieder eine Pille. */
.lmnl-nav .lmnl-tabs{align-items:center}
/* REITER WIE IM ENTWURF, abgemessen am 07.09.2026: Versalien, Schreibmaschine,
   gesperrt, und der aktive Reiter ist kein rundes Kissen, sondern ein Feld
   ueber die GANZE Hoehe der Leiste mit einem sehr leisen Aufhellen - im
   Entwurf #153A25 gegen #143523 daneben, also knapp fuenf Stufen. Vorher stand
   hier ein Kissen mit 17 Prozent Weiss: das ist etwa dreimal so laut wie das
   Original und war der lauteste Unterschied zum Entwurf. */
.lmnl-nav .lmnl-tabs .lmnl-tab{
  font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(233,244,237,.66);
  background:transparent;border:0;border-radius:8px;
  height:26px;padding:0 14px;display:inline-flex;align-items:center;
  transition:background .12s,color .12s}
.lmnl-nav .lmnl-tabs .lmnl-tab:hover{color:#fff;background:rgba(255,255,255,.05)}
/* AUSNAHME VON "NICHTS SCHREIT". Weiter oben nimmt eine Regel mit Nachdruck
   JEDEM Element Versalien und Sperrung - eine Entscheidung dieses Umbaus. Sein
   Entwurf hat in der Kopfleiste aber genau das: PROGRAMME, ENGINEERING, ADMIN
   in gesperrten Versalien auf Schreibmaschine. Der Entwurf ist die Vorlage,
   also gilt er hier, und nur hier. */
.tab-btn{
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:11px !important;
}
.lmnl-nav .lmnl-tabs .lmnl-tab{
  text-transform:uppercase !important;
  letter-spacing:.09em !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
}
/* Der aktive Reiter muss LAUTER sein als der, ueber dem die Maus zufaellig
   steht - sonst sehen zwei Reiter gleichzeitig aus wie "du bist hier". */
/* Das Feld unter dem aktiven Reiter ist im Entwurf ein FLUESTERN: gemessen
   #153A25 gegen #143523 daneben, also ein bis fuenf Stufen. Die Aussage traegt
   die fette weisse Schrift, nicht der Kasten. */
.lmnl-nav .lmnl-tabs .lmnl-tab.active{color:#fff;font-weight:700;background:rgba(255,255,255,.018)}
/* DER ALTE UNTERSTRICH MUSS AUS DEM SATZ, nicht nur unsichtbar werden.
   Hier stand `background:transparent`: der Strich war weg, sein Platz nicht.
   Gemessen: 2px breit plus Abstand, zusammen 10px, die im Reiter RECHTS vom
   Wort liegen - also sass jede Beschriftung 5px links von der Mitte, in einem
   Kasten, der zentriert zu sein behauptet. Bei den Unterreitern stand von
   Anfang an `display:none`, und genau die waren mittig. */
.lmnl-nav .lmnl-tabs .lmnl-tab::after,
.lmnl-nav .lmnl-tabs .lmnl-tab.active::after{display:none}

/* Vier Reiter passen bei 390px nicht nebeneinander: gemessen ragten
   "Prozesskarte" um 20px und "Admin" um 83px aus ihrem Streifen heraus und
   wurden abgeschnitten. Der Streifen darf wandern, aber ohne Balken - eine
   Bildlaufleiste ist Fremdmoebel und hat in dieser Oberflaeche nichts zu
   suchen. */
.lmnl-nav .lmnl-tabs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  flex-wrap:nowrap}
.lmnl-nav .lmnl-tabs::-webkit-scrollbar{display:none}
.lmnl-nav .lmnl-tabs .lmnl-tab{flex:0 0 auto}
/* Das Suchfeld war bei 390px auf 72px zusammengedrueckt, weil die Zeile nicht
   umbrechen darf und der Segmentschalter daneben 280px nimmt. Sichtbar wurde
   daraus "Progran" - ein abgeschnittenes Wort, und nichts sagt "unfertig" so
   schnell wie das. Auf schmalen Schirmen bekommt das Feld seine eigene Zeile. */
@media (max-width:640px){
  .toolbar{flex-wrap:wrap}
  .toolbar > input,.toolbar > input[type=search]{flex:1 0 100%;min-width:0}
}
/* Das Konto ist kein Gummiband. Auf der Schalenseite wurde es von den vier
   Reitern auf 48,34px gequetscht, waehrend es ueberall sonst 56px ist - und
   sein Wort sass dann 12px vom linken, 4px vom rechten Rand. */
.lmnl-nav .lmnl-user{flex:0 0 auto}

/* ---------- 3. Seitenleiste und Reiter ---------- */
.topbar{background:var(--panel);border-bottom:1px solid var(--line)}
.tab-bar{align-items:center !important}
.tab-btn{font-size:12px;font-weight:400;color:var(--muted);
  border-radius:8px;height:28px !important;padding:0 11px !important;
  display:inline-flex;align-items:center;transition:background .12s,color .12s}
.tab-btn:hover{color:var(--text);background:var(--panel2)}
.tab-btn::after,.tab-btn.active::after{display:none}
.tab-btn.active{background:var(--akzent-hell);color:var(--accent);font-weight:600}
.stat-pill{font-size:11px;color:var(--muted);background:var(--panel2);
  border:0;border-radius:999px;padding:4px 10px}
/* Der Streifen zeigt DIESELBE Zahl wie die Naht in der Kopfleiste (das
   Fuenf-Stunden-Fenster). Zwei Anzeigen fuer einen Wert sind eine zu viel, und
   der Streifen war die lautere: vier Pixel in voller Akzentfarbe, quer unter
   der Reiterzeile. Er bleibt stehen - auf dem Telefon ist er die naehere
   Anzeige - aber als Haarlinie, damit er nicht mit der Leiste konkurriert. */
.usage-strip{height:2px;background:transparent;border-radius:0;margin:0;overflow:hidden}
.usage-strip-fill{border-radius:0;background:var(--line);opacity:1}
.usage-strip-fill.warn{background:var(--warn)}
.usage-strip-fill.crit{background:var(--err)}
.usage-strip-fill.warn{background:var(--warn)}
.usage-strip-fill.crit{background:var(--err)}
.login-warn{font-size:12px;border-bottom:1px solid var(--line)}
.login-warn.warn{color:var(--warn);background:#FBF6EF;border-bottom-color:#EADFCE}

/* ---------- 4. Knoepfe, Felder, Plaettchen ---------- */
button, .bar-btn, .hbtn, .compose-btn, .compact-btn, .handoff-btn{
  border-radius:var(--radius2);font-size:12px;font-weight:500}
.bar-btn{border-radius:var(--radius);font-weight:600;padding:9px 16px}
.bar-btn.primary, button.primary{background:var(--accent);color:#fff;border:0;box-shadow:var(--schatten)}
.bar-btn.primary:hover, button.primary:hover{background:var(--accent-dark)}
.bar-btn.secondary, button.ghost, button.secondary{
  background:var(--panel);color:var(--text);border:1px solid var(--line)}
.bar-btn.secondary:hover, button.ghost:hover, button.secondary:hover{
  background:var(--panel2);border-color:var(--line);color:var(--text)}
.hbtn{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:6px 12px}
.hbtn:hover{background:var(--panel2)}
.hbtn.red{border-color:transparent;background:#F7EBE7;color:var(--err)}
.hbtn.red:hover{background:#F1DDD7}
.hbtn.green{border-color:transparent;background:var(--akzent-hell);color:var(--accent)}
.collapse-btn{color:var(--muted);background:transparent;border:0;border-radius:var(--radius2)}
.collapse-btn:hover{background:var(--panel2)}

input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select{
  background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:12.5px;padding:9px 12px;box-shadow:none}
input:focus, textarea:focus, select:focus{
  outline:0;border-color:#9DBBA9;box-shadow:0 0 0 3px rgba(18,73,47,.09)}
input::placeholder, textarea::placeholder{color:#9A9A94}
.term-wrap input, .term-wrap textarea{background:var(--term-bg);color:#D8DEDA;border-color:#2C302E}

.ltag, .chip, .badge, .pt{
  font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:var(--radius2);
  background:var(--panel2);color:#5C5C57;border:0}
.ltag.proxmox{background:var(--akzent-hell);color:var(--accent)}
.ltag.lxc{background:#E6EFF2;color:#245A6B}
.ltag.lxc2{background:#F6EFE6;color:var(--warn)}
.seg{background:var(--panel2);border-radius:var(--radius);padding:3px;border:0}
.seg button{font-size:12px;font-weight:500;color:var(--muted);
  background:transparent;border:0;border-radius:var(--radius2);padding:5px 12px}
.seg button.active, .seg button[aria-pressed="true"]{
  background:var(--panel);color:var(--text);box-shadow:var(--schatten)}

/* ---------- 5. Listen und Karten: Abstand statt Linien ---------- */
.chat-list{background:var(--bg)}
.chat-card{border-bottom:0;border-radius:var(--radius);margin:1px 8px;padding:9px 10px;
  box-shadow:none;background:transparent}
.chat-card:hover{background:var(--panel2)}
.chat-card.selected, .chat-card.done.selected{background:var(--akzent-hell);box-shadow:none}
.chat-card.shared{background:transparent;box-shadow:inset 2px 0 0 var(--limette)}
.chat-card.shared.selected{background:var(--akzent-hell)}
.chat-card.notify{background:#FBF6EF;box-shadow:none}
.chat-card .sdot{width:7px;height:7px}
.sdot.running, .sdot.running.active{background:var(--limette)}
.sdot.idle{background:#C9C9C3}
.sdot.done{background:var(--ok)}
.card, .app, .tile, .proj, .row-card, .handoff-panel, .switcher-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--schatten)}
.card:hover, .app:hover, .tile:hover{box-shadow:var(--schatten-hoch)}
.handoff-panel, .switcher-panel{box-shadow:var(--schatten-hoch)}

/* ---------- 6. Konsole ---------- */
.chat-bar{background:var(--bg);border-bottom:1px solid var(--line);padding:12px}
.chat-header{background:var(--panel);border-bottom:1px solid var(--line-zart);padding:10px 14px}
.htitle{font-size:13px;font-weight:600}
.pane-header{background:var(--panel);border-bottom:1px solid var(--line-zart)}
.pane-grid{background:var(--line-zart)}
/* Der Rand um den Chat war in beiden Anmutungen derselbe blasse Grauton -
   auf dunklem Grund liest er sich als Weiss, auf hellem als nichts. Er sagt
   "hier wird getippt", und das ist genau die Stelle, an der die Hausfarbe
   etwas zu sagen hat. */
.pane.focused{outline:1px solid var(--accent) !important;outline-offset:-1px}
.pane-dialog{background:var(--panel);font-size:13.5px;line-height:1.62;color:#262624}
.empty-state{font-size:12.5px;color:var(--muted)}
.term-wrap{background:var(--term-bg)}
.compose{background:var(--bg);border-top:1px solid var(--line);padding:12px}
.compose-input{border-radius:var(--radius);font-size:13.5px}
.compose-btn{border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);color:var(--muted)}
.compose-btn:hover{background:var(--panel2);color:var(--text)}
.compose-btn.attach{border-color:transparent;background:transparent}
.compose-btn.attach:hover{background:var(--panel2)}
.compose-btn.send{background:var(--accent);border-color:var(--accent);color:#fff}
.compose-btn.send:hover{background:var(--accent-dark)}
.compact-row{background:var(--bg)}
.compact-btn, .handoff-btn{color:#5A5A55;background:transparent;border:1px solid var(--line)}
.compact-btn:hover, .handoff-btn:hover{background:var(--panel2)}
#permissions{border-left:1px solid var(--line);background:var(--bg)}
.fb-bar{background:var(--panel);border-bottom:1px solid var(--line)}

/* ---------- 7. Anmeldung: der Schraffurstreifen war Lagerhalle ---------- */
.stripe{display:none}
.mark .sq{width:26px;height:26px;background:url(/favicon.svg) center/contain no-repeat;
  border:0;border-radius:0;transform:none;box-shadow:none}
.mark h1{font-size:22px;font-weight:600}

/* ---------- 8. Kein Fensterschmuck ---------- */
.dashed{border-style:solid !important}
.pane-grid.drag-over{outline:2px solid var(--limette);outline-offset:-4px}
.compose.drag-over{background:var(--akzent-hell)}
::selection{background:var(--auswahl);color:var(--text)}
::-moz-selection{background:var(--auswahl);color:var(--text)}

/* ---------- Nachgezogen, nachdem ich es angesehen habe ----------
   1. Das Ebenen-Plaettchen hatte fast dieselbe Fuellung wie die Schiene und
      war damit kein Plaettchen mehr, sondern nur kleiner Text. */
.ltag{background:#EAEAE5;color:#55554F;padding:2px 8px}
.ltag.proxmox{background:var(--akzent-hell);color:var(--accent)}

/* 2. Das Konto war ein flacher Text im dunklen Feld. Im Entwurf ist es eine
      umrandete Pille. Der Block bleibt beim Sonnenknopf, der die Naht traegt;
      das Konto wird wieder eine Pille. */
.lmnl-nav button.lmnl-user,
.lmnl-nav button.lmnl-user:hover{
  align-self:center;background:transparent;
  border:1px solid rgba(233,244,237,.32);border-radius:999px;
  padding:5px 15px;margin-right:18px;color:#F2F7F3
}
.lmnl-nav button.lmnl-user:hover{background:rgba(255,255,255,.08)}
.lmnl-nav button.lmnl-iconbtn{padding:0 16px}

/* 3. Die Fusszeile der Konsole war so blass, dass sie wie abgeschaltet aussah,
      obwohl beide Knoepfe benutzbar sind. */
.compact-btn,.handoff-btn{color:#4F4F4A;background:var(--panel);border:1px solid var(--line)}

/* ---------- Schmal ----------
   Bei 390 lief das Wortzeichen in die Reiter und die Kontopille aus dem Bild.
   Schmal traegt der Ring die Marke allein; er ist eine Hintergrundgrafik auf
   einem gemessenen Feld und bleibt daher stehen, wenn die Schrift auf 0 geht. */
@media (max-width:620px){
  .lmnl-brand{font-size:0;margin-right:6px}
  .lmnl-nav{padding-left:8px}
  .lmnl-nav .lmnl-tabs .lmnl-tab{font-size:10.5px;padding:0 10px;letter-spacing:.045em !important}
  .lmnl-nav button.lmnl-iconbtn{padding:0 10px}
  .lmnl-nav button.lmnl-user,
  .lmnl-nav button.lmnl-user:hover{padding:4px 11px;margin-right:8px;font-size:11px}
  .topbar{gap:2px}
  .tab-btn{padding:5px 9px !important;font-size:11.5px}
  .chat-header{padding:9px 10px;gap:6px}
  .htitle{font-size:13.5px}
  .hbtn{padding:5px 10px;font-size:11.5px}
}

/* ============================================================
   Nachgezogen: runder, und der Hell-Dunkel-Knopf
   ============================================================ */

/* 1. RUNDER. Die Kanten waren noch die alten scharfen mit etwas Radius
      obendrauf. In dieser Sprache ist die Rundung kein Detail, sie IST die
      halbe Aussage. */
:root,[data-theme="dark"],[data-theme="light"]{ --radius:10px; --radius2:8px; }
.card,.app,.tile,.proj,.row-card,.handoff-panel,.switcher-panel,
.chat-card,.seg,.compose-input,.chat-bar input,
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{
  border-radius:10px
}
.bar-btn,.hbtn,.compose-btn,.compact-btn,.handoff-btn,button.primary,
button.ghost,button.secondary,.seg button,.tab-btn{border-radius:8px}
.ltag,.chip,.badge,.pt{border-radius:6px}
.login-card,.card.login,form.login,.mark ~ *{border-radius:14px}

/* 2. DIE KONTOZONE liegt jetzt im GRUND der Leiste, nicht in den Knoepfen.
      Vorher trug jeder der beiden Knoepfe seinen eigenen dunklen Block, und
      der Hell-Dunkel-Knopf hat dabei gegen seine eigene Groesse gekaempft:
      er ist im Markup fest 30 mal 30, und meine Polsterung hat ihn
      auseinandergezogen. Der Verlauf endet jetzt selbst an der Naht. */
/* Die Naht im Verlauf ist keine Zierde, sie ist der Stand des laufenden
   Fuenf-Stunden-Fensters: links vom Strich ist verbraucht, rechts ist frei.
   Vorher stand hier fest 78 % - eine Zahl, die aus dem Entwurf abgeschrieben
   war und nichts gemessen hat. Den Wert setzt jetzt die Leiste selbst
   (liminal-shell.js, /api/usage).
   Kommt keine Zahl, steht die Naht bei 101 % und damit ausserhalb des Bildes:
   dann ist es wieder ein glatter Verlauf und behauptet nichts. */
/* DER VERLAUF LAEUFT UEBER DIE GANZE LEISTE, wie im Entwurf. Vorher endete er
   an einer limettenfarbenen Naht, die den Stand des Fuenf-Stunden-Fensters
   zeigte - stand der bei 13 Prozent, war die Leiste zu neun Zehnteln flach
   dunkel und sah dem Entwurf nicht mehr aehnlich. Nachgemessen an seinem Bild
   (07.09.2026, Zeile y=3 ueber die ganze Breite): #0F2C1D links, #235C3B bei
   etwa 83 Prozent, danach flach dunkel - und NULL limettenfarbene Punkte auf
   der ganzen Zeile. Der dunkle Block rechts ist kein Ende des Verlaufs, das
   sind die beiden Knoepfe, die ihren eigenen dunklen Grund tragen.
   Die Wochenzahl steht in der Marke; das Fuenf-Stunden-Fenster steht damit
   nicht mehr in der Leiste. */
/* DER VERLAUF ENDET AM STAND, und dieses Ende IST die Zahl - im Entwurf steht
   es zufaellig bei 83 Prozent, das ist ein Beispiel und keine Vorgabe.
   Zwei Fehler lagen hier nacheinander: erst eine limettenfarbene Naht am Ende
   (im Entwurf ist auf der ganzen Zeile KEIN einziger heller Punkt), dann die
   83 Prozent fest verdrahtet, womit die Anzeige verschwand.
   Richtig ist beides zusammen: dynamisches Ende, harte Kante, keine Naht. */
.lmnl-nav{
  background:linear-gradient(90deg,
    var(--kopf-dunkel) 0%,
    var(--kopf-hell) var(--stand-5h, 83%),
    var(--kopf-dunkel) var(--stand-5h, 83%),
    var(--kopf-dunkel) 100%);
  transition:background .4s linear;
}
/* 3. Der Knopf wird wieder ein Knopf: rund, durchsichtig, mit einer leisen
      Fuellung beim Zeigen. Kein Block, keine Polsterung, keine Naht an ihm. */
.lmnl-nav button.lmnl-iconbtn,
.lmnl-nav button.lmnl-iconbtn:hover{
  align-self:center;background:transparent;border:0;border-radius:999px;
  padding:0;color:rgba(233,244,237,.72);opacity:1
}
.lmnl-nav button.lmnl-iconbtn:hover{background:rgba(255,255,255,.12);color:#fff}
.lmnl-nav .lmnl-theme-glyph{display:grid;place-items:center;width:100%;height:100%}
.lmnl-nav .lmnl-theme-glyph svg{width:16px;height:16px}
.lmnl-nav button.lmnl-user,
.lmnl-nav button.lmnl-user:hover{align-self:center;background:transparent;margin-right:16px}

/* ============================================================
   Politur. Gemessen, nicht geraten: ein Durchlauf durch die laufende
   Seite hat jedes Element mit harter Kante, hartem Rahmen und schiefer
   Schriftgroesse gemeldet. Was hier steht, sind genau diese Funde.
   ============================================================ */

/* 1. DER SCHALTER war ein Rechteck mit einem eckigen Klotz darin, und seine
      Ein-Farben (#2c3a2f, #2e2140) stammten aus dem dunklen Haus: auf hellem
      Grund zwei schmutzige Flecken. Jetzt eine Pille mit rundem Knopf. */
.ar-track{
  width:34px;height:20px;border-radius:999px;
  background:#DCDCD6;border:0;transition:background .18s ease
}
.ar-track::after{
  width:16px;height:16px;border-radius:999px;background:#fff;
  top:2px;left:2px;box-shadow:0 1px 2px rgba(25,25,24,.22);
  transition:left .18s ease,background .18s ease
}
.ar-track.on{background:var(--accent);border:0}
.ar-track.on::after{left:16px;background:#fff}
.ar-track.yolo{background:#7A4BC4;border:0}
.ar-track.yolo::after{background:#fff}
.ar-label{font-size:11px;font-weight:500;color:var(--muted);width:auto}

/* 2. Die Zeilenknoepfe und die Meldung hatten Kante 0 bzw. 2. */
.cdel{border-radius:6px;padding:2px 6px}
.cdel.armed{font-size:10.5px;border-radius:6px;border-color:transparent;background:#F7EBE7;padding:2px 7px}
.row-acts{gap:4px}
.copy-toast{
  border-radius:10px;background:var(--panel);color:var(--text);
  border:1px solid var(--line);box-shadow:var(--schatten-hoch);
  font-size:12px;padding:9px 15px
}

/* 3. DIE SCHRIFTLEITER hatte sechs Stufen: 10, 11, 11.5, 12, 13.5, 14. Sechs
      Stufen sind keine Leiter, das ist Rauschen. Vier bleiben:
      15 Titel, 14 Text, 12.5 Nebensache, 11.5 Plaettchen. */
.htitle,.buehne-titel,.pane-header .htitle{font-size:13px;font-weight:600}
.pane-dialog,.compose-input,.chat-bar input,.empty-state{font-size:12.5px}
.zeile-titel,.chat-card > *:first-child{font-size:12.5px}
.stat-pill,.zeit,.hist-meta,.rollen-tech,.app .pt,.login-sub,.field label,
.archiv,.gruppe,.compact-btn,.handoff-btn{font-size:11.5px}
.ltag,.chip,.badge,.cdel.armed{font-size:10.5px}

/* 4. NICHTS SPRINGT. Notion-artig heisst vor allem: jede anfassbare Sache
      antwortet weich, und zwar in derselben Zeit. */
button,.bar-btn,.hbtn,.compose-btn,.tab-btn,.seg button,.chat-card,
.collapse-btn,.lmnl-tab,.lmnl-user,.lmnl-iconbtn,.card,.app,.tile,
input,textarea,select,.cdel{
  transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease
}
button:active,.bar-btn:active,.hbtn:active{transform:none}

/* 5. Die Trennlinien zwischen den Feldern duerfen leiser sein: sie sollen
      ordnen, nicht zeichnen. */
.topbar,.chat-bar,.compose,.pane-header,.chat-header,.fb-bar{border-color:var(--line-zart)}
.pane-grid{background:var(--line-zart)}
#permissions{border-left-color:var(--line-zart)}

/* 3b. DIE LEITER, jetzt mit den richtigen Namen. Der erste Versuch hat auf
      geratene Klassen zeigt; ein Durchlauf durch die laufende Seite hat die
      echten geliefert. Vier Stufen, und keine mehr:
      15 Titel, 14 Text, 13.5 Knopf, 12.5 Nebensache, 11.5 Plaettchen. */
.pane-title,.htitle{font-size:13px !important;font-weight:600}
.chat-name{font-size:12.5px !important;font-weight:500}
.pane-dialog,.empty-state,.dlg-hinweis{font-size:12.5px !important}
.compact-btn,.handoff-btn,.ar-label,.collapse-btn,
.bar-btn.secondary,.chat-meta,.chat-card span:not(.ltag):not(.sdot){font-size:11.5px !important}
.ltag,.chip,.badge,.cdel.armed{font-size:10.5px !important}
.copy-toast{font-size:12px !important}

/* Und die Zeile selbst bekommt ihre Ordnung: Titel traegt, alles darunter
   ist Nebensache und darf leiser sein. */
.chat-name{color:var(--text);letter-spacing:-.005em}
.chat-card .ltag{font-weight:500}

/* 3c. Die letzten fuenf Kleinen: die Filterknoepfe der Rueckmeldungen standen
      auf 10.5 und waren damit die kleinste Schrift der ganzen Anwendung. */
.seg button{font-size:11.5px !important}

/* 6. DER MODUS-KNOPF war das einzige umrandete Akzentding auf der Seite und
      zog dadurch mehr Blick als der Stopp daneben. Ein Zustand ist eine
      Fuellung, kein Rahmen. */
.hbtn.mode-btn{
  border-color:transparent;background:var(--akzent-hell);color:var(--accent);font-weight:600
}
.hbtn.mode-btn:hover{background:#DCE8DF}

/* 7. Leere Flaechen sagen leise Bescheid, statt in die Mitte zu rufen. */
.empty-state{color:#8A8A84;font-weight:400}
#permissions .empty-state{padding-top:28px;font-size:12px !important}

/* 8. Der Statuspunkt der Leiste braucht Luft, sonst klebt er am Zaehler. */
.conn-dot{margin-left:4px;margin-right:2px}
/* Schmal heisst der eingeschaltete Modus-Knopf `.hbtn.on`, nicht
   `.hbtn.mode-btn` - gemessen bei 390, wo er als einziges Ding wieder
   umrandet dastand. */
.hbtn.on{border-color:transparent;background:var(--akzent-hell);color:var(--accent);font-weight:600}
.hbtn.on:hover{background:#DCE8DF}

/* ============================================================
   LESBARKEIT. Gemessen ueber JEDES Textelement gegen seinen wirklichen
   Grund, nicht ueber die Stellen, die ich im Verdacht hatte. Das hat den
   Fehler gefunden, den ich mit dem Auge nicht gesehen habe:
   "Veroeffentlichen" stand in #0b0d10 auf dem dunkelgruenen Knopf,
   Verhaeltnis 1,87 zu 1 - der Boden fuer Text ist 4,5.

   URSACHE, und sie ist systematisch: #0b0d10 war die Schrift AUF dem Akzent,
   solange der Akzent Mint war. Der Akzent ist jetzt Dunkelgruen, also muss
   dieselbe Stelle Weiss tragen. Es gibt genau vier solcher Stellen und zwei
   dunkle Feldgruende; hier sind alle sechs.
   ============================================================ */
.btn.primary, .lmnl-btn.primary, button.primary, .bar-btn.primary,
.btn.primary *, .lmnl-btn.primary *, button.primary *, .bar-btn.primary *{
  color:var(--accent-text) !important
}
.userpick .pickrow[aria-pressed="true"] .kasten,
.userpick .pickrow[aria-pressed="true"] .kasten *{color:var(--accent-text) !important}
.view-badge{color:var(--accent-text) !important}
/* Zwei Eingabefelder trugen noch einen fast schwarzen Grund. */
.field input, .chat-rename, input.chat-rename{background:var(--panel) !important;color:var(--text) !important}

/* Und die Reiter der Kopfleiste lagen bei 4,37 - knapp unter dem Boden. */
.lmnl-nav .lmnl-tabs .lmnl-tab{color:rgba(240,248,243,.74)}
/* Der leere Zustand stand auf 3,24 - ich hatte ihn "leiser" gemacht und dabei
   unter den Boden gedrueckt. Leise heisst gedaempft, nicht unlesbar. */
.empty-state{color:var(--muted)}
#permissions .empty-state{color:var(--muted)}

/* ============================================================
   DAS ENDGERAET BLEIBT UNANGETASTET. Das hier ist kein Geschmack.
   xterm misst die Breite EINES Zeichens aus der Schrift und baut daraus sein
   Raster; die Spaltenzahl geht an die Gegenstelle. Eine andere Schrift heisst
   eine andere Zellbreite heisst eine falsche Spaltenzahl heisst zerrissene
   Ausgabe - genau der Fehler, der hier schon einmal Tage gekostet hat.
   Dazu kaeme: Roboto Mono kommt aus dem Netz. Laedt es auf der VM nicht,
   faellt xterm auf irgendetwas zurueck, und das Raster ist dahin.
   Also: das Endgeraet behaelt seinen eigenen Satz, ohne Netzabhaengigkeit.
   ============================================================ */
.term-wrap, .term-wrap *, .xterm, .xterm *{
  font-family: ui-monospace,'Cascadia Mono',Consolas,'DejaVu Sans Mono',monospace !important;
  letter-spacing: normal !important;
}

/* ============================================================
   Der Anmelde-Streifen. Er haengt an der Leiste (liminal-shell.js) und
   steht damit auf jeder Seite, nicht nur auf Engineering, und fuer jedes
   Konto, nicht nur fuer die Administration. Zwei Stufen: "laeuft bald ab"
   und "traegt nicht mehr". Er nimmt nur so viel Platz, wie ein Satz
   braucht - ein Balken, der jeden Tag da ist, wird nach drei Tagen nicht
   mehr gelesen, und dieser hier ist nur da, wenn wirklich etwas steht.
   ============================================================ */
.lmnl-anmeldung{
  padding:7px 16px;font-size:11.5px;line-height:1.45;
  background:var(--red-bg);color:var(--err);
  border-bottom:1px solid var(--err);
}
.lmnl-anmeldung[data-stufe="warn"]{
  background:var(--yellow-bg);color:var(--warn);border-bottom-color:var(--warn);
}

/* ============================================================
   Die Buehne in der hellen Anmutung, und der Reel-Zwang
   ============================================================
   Gemessen, nicht vermutet: die Buehne trug exakt dieselbe Farbe wie die Seite
   dahinter - beide rgb(247,247,245). Es gab also gar keine Flaeche, nur einen
   Bereich, in dem zufaellig Punkte liegen; und die Bilder darauf hatten weder
   Grund noch Kante noch Rundung, waren also freistehender Text auf Weiss. In
   der dunklen Anmutung traegt der Kontrast zum Grund das noch, in der hellen
   nicht mehr. Deshalb hier: die Buehne wird zurueckgesetzt, die Bilder werden
   Karten darauf, und die Punkte werden zur Textur statt zum Muster.
   Alles nur fuer hell und nur in diesem Blatt - die geteilten Lima-Dateien
   bleiben unangetastet, sonst aendert sich main mit. */
[data-theme="light"] .lima-buehne{
  background-color:#EDEDE8;
  /* Der Punkt war 10 Stufen vom Grund entfernt und damit auf einem Schirm
     bei Tageslicht nicht mehr da. Jetzt 29 Stufen: sichtbar als Textur,
     immer noch kein Muster, das mit dem Bild darauf konkurriert. */
  /* NACHGEMESSEN AN GERENDERTEN PIXELN, nicht am Zahlenwert: ein Punkt von
     1px Radius kam als 6 von 10.000 Pixeln heraus, Spitzenwert 24 Stufen unter
     dem Grund - und der Abstand betraegt inzwischen 43,5px, weil main das
     Raster mit der Kamera mitzieht. 0,06 Prozent der Flaeche in 24 Stufen ist
     keine Textur, das ist ein Geruecht. Groesser UND kraeftiger, beides: die
     Flaeche wird durch die FLAECHE der Punkte sichtbar, nicht durch ihre
     Farbe allein. */
  background-image:radial-gradient(circle, #C4C4B9 1.7px, transparent 1.9px);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.04), inset 1px 0 0 rgba(0,0,0,.04);
}
/* Ein Bild ist ein Gegenstand auf der Flaeche, keine Textstelle. Ohne Grund
   und Kante schwebt es, und "schwebt" liest sich als unfertig. */
/* IN BEIDEN ANMUTUNGEN DIESELBE FORM. Vorher stand die Karte nur unter
   [data-theme="light"]: hell war ein Bild ein Gegenstand mit Grund, Kante und
   Polsterung, dunkel war dasselbe Bild freistehender Text ohne alles. Ein
   Umschalten der Anmutung hat damit den AUFBAU geaendert, nicht nur die Farbe -
   und genau das darf ein Schalter nie. */
.lima-buehne figure.lz{
  background:var(--karte-grund);
  border:1px solid var(--karte-kante);
  border-radius:var(--radius,10px);
  padding:14px 16px;
  box-shadow:var(--karte-schatten);
}
.lima-buehne figure.lz .lz-titel{color:var(--karte-titel)}
:root{
  --karte-grund:#FFFFFF; --karte-kante:#E4E4DE;
  --karte-schatten:0 1px 2px rgba(24,24,20,.05), 0 6px 16px rgba(24,24,20,.05);
  --karte-titel:rgba(25,25,24,.78);
}
[data-theme="dark"]{
  --karte-grund:#14201B; --karte-kante:#25352E;
  --karte-schatten:0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.22);
  --karte-titel:rgba(236,242,238,.72);
}
/* Auch die Buehne selbst traegt in beiden Anmutungen dieselbe Textur, sonst
   liegt die Karte hell auf einem Muster und dunkel auf einer leeren Flaeche. */
[data-theme="dark"] .lima-buehne{
  background-color:#101A16;
  /* Dunkel war es noch schlimmer: Spitzenwert 10 Stufen ueber dem Grund,
     also auf einem Laptop bei Tageslicht schlicht nicht vorhanden. */
  background-image:radial-gradient(circle, #27362F 1.7px, transparent 1.9px);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.20), inset 1px 0 0 rgba(0,0,0,.20);
}

/* KEIN GETEILTER MODUS MEHR. Der Schalter fuehrte zurueck in "Buehne und
   Verlauf nebeneinander" - eine dritte Ansicht, die niemand bestellt hat und
   die neben Reel und Terminal nur die Frage aufwirft, welche denn nun gilt.
   Weg ist er; der einzige Rueckweg aus der Reel ist das Terminal. */
.kino-schalter{display:none !important}

/* EINE ANTWORT OHNE BILD DARF NICHT UNSICHTBAR SEIN.
   Gemessen: die Antwort kam an, stand im Verlauf, und der Verlauf ist in der
   Reel eine Schublade, die nur aufgeht, wenn man den Kumpel antippt. Bei einer
   Antwort MIT Bildern ist das richtig - die Buehne traegt sie. Bei einer
   Antwort ohne Bilder ist die Buehne leer, und dann versteckt die Reel den
   ganzen Inhalt hinter einer Geste, die niemand kennt: von aussen sieht es aus,
   als sei die Nachricht nie angekommen.
   Also: hat die Buehne kein einziges Bild, steht der Verlauf offen. */
/* KINO BLEIBT KINO. Kurzzeitig stand das Mitschriftblatt hier DAUERHAFT offen,
   damit es wie der Entwurf aussieht - damit war das Kino aber wieder die alte
   geteilte Ansicht, und genau das sollte weg. Das Blatt faehrt also wieder auf
   Tippen aus.
   Die eine Ausnahme bleibt: hat eine Antwort gar kein Bild, stuende sie sonst
   in einem unsichtbaren Fach. Dann steht das Blatt offen - und endet ueber dem
   Untertitelstreifen, sonst deckt es die gesprochene Zeile zu. */
/* GEAENDERT 09.09.2026. Vorher stand hier `transform:none; visibility:visible`,
   also: hat eine Antwort kein Bild, steht die Mitschrift DAUERHAFT offen. Das
   war als Rettung gedacht - eine bildlose Antwort sollte nicht in einem
   ungeoeffneten Fach verschwinden. In der Praxis war es das Gegenteil: eine
   frische Sitzung hat nie ein Bild, also stand die Spalte von Anfang an rechts,
   und das Kino war wieder die alte geteilte Ansicht. Gemeldet an allen drei
   Anlagen. Der Weg zur Mitschrift ist ueberall sonst der Kumpel, und der bleibt
   es jetzt auch hier; die Ausnahme unten haelt nur die Hoehe ueber dem
   Untertitelstreifen. */
.pane-dialog.lima-kino:not(:has(.lima-buehne figure.lz)) > .lima-lauf{
  transform:translateX(101%) !important; visibility:hidden !important;
}
.pane-dialog.lima-kino.kino-auf:not(:has(.lima-buehne figure.lz)) > .lima-lauf{
  transform:none !important; visibility:visible !important;
  bottom:calc(1.6 * clamp(18px, 2.6vw, 32px) + 10px) !important;
}
.pane-dialog.lima-kino:not(.kino-auf):not(:has(.lima-buehne figure.lz)) .kino-schleier{
  opacity:0 !important; pointer-events:none !important;
}
@media (max-width: 760px){
  .pane-dialog.lima-kino:not(:has(.lima-buehne figure.lz)) > .lima-lauf{
    bottom:calc(1.6 * clamp(18px, 2.6vw, 32px) + 10px) !important;
  }
}
.pane-dialog.lima-kino:not(.kino-auf):not(:has(.lima-buehne figure.lz)) .kino-schleier{
  opacity:0 !important; pointer-events:none !important;
}

/* Die Anmeldekarte. Kein Band am Rand, sondern eine Karte in der Mitte: sie
   erscheint nur, wenn wirklich keine Anmeldung da ist, und verschwindet, sobald
   eine da ist. Wer sie sieht, kann etwas TUN - das ist der ganze Unterschied
   zu einem Warnstreifen. */
/* DIE ANMELDEKARTE. Sie ist das einzige, was auf dem Schirm steht, wenn keine
   Anmeldung da ist - also traegt sie auch das Aussehen des Hauses und nicht das
   eines Warnfensters. Eine Handlung zur Zeit, ein grosser Griff, und das
   Codefeld gross genug, dass man sieht, was drin steht. */
#anmelde-karte{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  padding:16px;background:color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#anmelde-karte .ak-innen{width:min(380px,100%);box-sizing:border-box;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:26px 26px 22px;
  box-shadow:0 1px 2px rgba(12,16,12,.06), 0 20px 52px rgba(12,16,12,.24)}
/* Die Kopplung traegt den Kopf: Ring dieser Ansicht, Mal-Zeichen, Claude.
   Sie steht anstelle der beiden Absaetze, die vorher das Offensichtliche
   erklaert haben. */
#anmelde-karte .ak-marken{display:flex;align-items:center;justify-content:center;
  gap:14px;margin:0 0 16px}
#anmelde-karte .ak-marken svg,#anmelde-karte .ak-marken img{display:block;
  width:28px;height:28px;flex:0 0 auto}
#anmelde-karte .ak-mal{font-size:14px;font-weight:400;line-height:1;color:var(--muted)}
#anmelde-karte h3{margin:0 0 20px;font-size:15px;font-weight:600;text-align:center;
  letter-spacing:-.006em;color:var(--text)}
#anmelde-karte #ak-schritt2{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
/* [hidden] muss staerker sein als jede Anzeigeregel hier - sonst bleibt der
   erste Griff stehen, wenn der zweite Schritt aufgeht. Genau das war er. */
#anmelde-karte [hidden]{display:none !important}
#anmelde-karte .btn.ak-gross{display:block;width:100%;height:40px;padding:0;
  font-size:13.5px;font-weight:600;border-radius:10px}
#anmelde-karte .ak-feld{position:relative;margin:0 0 10px}
#anmelde-karte #ak-code{width:100%;box-sizing:border-box;padding:11px 92px 11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);
  font:600 14px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}
#anmelde-karte #ak-code::placeholder{font-weight:400;letter-spacing:0;color:var(--muted)}
#anmelde-karte #ak-code:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
#anmelde-karte .ak-einfuegen{position:absolute;right:5px;top:5px;bottom:5px;
  padding:0 13px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
#anmelde-karte .ak-einfuegen:hover{color:var(--text);border-color:var(--accent)}
#anmelde-karte #ak-adresse{display:block;margin:12px 0 0;padding:0;border:0;
  text-align:center;font-size:12px;font-weight:500;color:var(--muted);text-decoration:none}
#anmelde-karte #ak-adresse:hover{color:var(--accent);text-decoration:underline}
#anmelde-karte #ak-info{margin:14px 0 0;font-size:12px;line-height:1.5;
  text-align:center;color:var(--muted)}
#anmelde-karte #ak-info.fehler{color:#E5484D}
#anmelde-karte #ak-info:empty{display:none}


/* Schmaler Schirm: das Blatt liegt unten, also muss es dort genauso weit
   hochruecken, damit der Untertitelstreifen frei bleibt. */
@media (max-width: 760px){
  .pane-dialog.lima-kino:not(:has(.lima-buehne figure.lz)) > .lima-lauf{
    bottom:calc(1.6 * clamp(18px, 2.6vw, 32px) + 10px) !important;
  }
}


/* Ein ausgeschalteter Knopf muss AUSGESCHALTET aussehen, sonst haelt man ihn
   fuer kaputt statt fuer gesperrt. */
.hbtn:disabled,.hbtn[disabled]{opacity:.38;cursor:not-allowed}


/* ============================================================
   DIE SEITENLEISTE NACH DEM ENTWURF
   ------------------------------------------------------------
   Am Entwurfsbild gemessen, nicht geschaetzt (Bild 267 breit,
   Leiste ~255): Zeilenabstand 48, Block 47 hoch mit 8 Rand links
   und rechts, Punkt 7 gross mit Mitte 13 vom Blockrand, Text bei
   26, Pille 16 hoch in #EAE9E4, aktive Zeile derselbe Ton, Fuss
   mit Suchfeld 32 hoch und darunter die Archivzeile.
   Drei Dinge waren vorher anders und alle drei falsch herum:
   der Punkt sass RECHTS, wo die Zeile ohnehin leer ist, statt
   vorn an dem Namen, zu dem er gehoert; das Archiv sass OBEN und
   drueckte die neueste Sitzung nach unten; und ein Suchfeld gab
   es gar nicht, obwohl die Liste hier dreistellig wird.
   ============================================================ */
:root,[data-theme="light"]{
  --zeile-aktiv:#EAE9E4;
  --knopf-dunkel:#1C492F;
}
[data-theme="dark"]{
  --zeile-aktiv:#1E2C25;
  --knopf-dunkel:#1C492F;
}

/* Die Leiste ist eine Spalte: oben die rollende Liste, unten der feste Fuss.
   #chat-list bleibt der aeussere Kasten, weil Einklappen und Verstecken an
   ihm haengen. */
.chat-list{display:flex;flex-direction:column;overflow:hidden !important;padding:0}
@media (min-width:1100px){ .chat-list.hidden{display:flex !important} }
.chat-rollen{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 0 4px}

/* ---- Eine Zeile ---- */
.chat-card{display:flex;flex-direction:row;align-items:flex-start;gap:9px;
  margin:0 8px 1px;padding:6px 10px 7px;border-radius:8px}
.chat-card > .sdot{margin-top:5px;flex:0 0 auto}
.chat-card .chat-info{gap:1px}
/* Am Entwurf gemessen: der Name traegt dort deutlich mehr Masse (Median der
   Textpixel 129 gegen 182 bei Halbfett-500). Er ist der Anker der Zeile, alles
   darunter ist Beiwerk - also 600, und in hell nicht das haerteste Schwarz,
   sondern der waermere Ton des Entwurfs. */
.chat-card .chat-name{line-height:17px;padding-right:0;font-weight:600}
/* Der waermere Ton gilt NUR hell. `:root` traf beide Anmutungen - das dunkle
   Haus bekam schwarze Namen auf schwarzem Grund. */
.chat-card .chat-name{color:#37352F}
[data-theme="dark"] .chat-card .chat-name{color:var(--text)}
.chat-meta{gap:7px;align-items:center}
.chat-card.selected, .chat-card.done.selected, .chat-card.shared.selected{
  background:var(--zeile-aktiv);box-shadow:none}
.chat-card:hover{background:var(--panel2)}

/* Die Ebene ist ein Wort, kein Warnschild: beide Ebenen tragen dieselbe
   ruhige Pille, das Wort selbst sagt welche. Vorher war ROOT gruen getoent
   und SANDBOX grau, was aussah wie eine Wertung. */
.chat-card .ltag, .chat-card .ltag.proxmox, .chat-card .ltag.lxc,
.chat-card .ltag.lxc2, .chat-card .ltag.root, .chat-card .ltag.sandbox{
  background:var(--zeile-aktiv);color:#55554F;border:0;
  text-transform:uppercase !important;letter-spacing:.03em !important;
  font-size:10px;padding:2px 7px;border-radius:5px;line-height:12px}
[data-theme="dark"] .chat-card .ltag,
[data-theme="dark"] .chat-card .ltag.proxmox,
[data-theme="dark"] .chat-card .ltag.lxc,
[data-theme="dark"] .chat-card .ltag.lxc2{color:#A8B5AE}
.chat-card.selected .ltag{background:transparent}

/* ---- Der Fuss ---- */
.leiste-fuss{flex:0 0 auto;border-top:1px solid var(--line-zart);
  background:var(--bg);padding:9px 8px calc(10px + env(safe-area-inset-bottom))}
.leiste-suche{display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px}
.leiste-suche svg{width:12px;height:12px;flex:0 0 auto;color:var(--muted);opacity:.9}
/* Das Feld ist der Kasten, nicht IM Kasten: ohne !important gewinnt die
   allgemeine input-Regel weiter oben (drei :not() sind spezifischer als eine
   Klasse) und malt einen zweiten Rahmen in den ersten. */
.leiste-suche input{flex:1;min-width:0;background:transparent !important;
  border:0 !important;padding:0 !important;height:30px !important;
  font-size:12px;color:var(--text);border-radius:0 !important;box-shadow:none !important}
.leiste-suche input:focus{outline:0;box-shadow:none !important;border:0 !important}
.leiste-suche:focus-within{border-color:#9DBBA9}

.leiste-archiv{display:flex;align-items:center;gap:10px;height:30px;
  margin-top:8px;padding:0 12px;border-radius:8px;cursor:pointer;
  color:var(--muted);font-size:12px;-webkit-tap-highlight-color:transparent}
.leiste-archiv svg{width:12px;height:12px;flex:0 0 auto}
.leiste-archiv .la-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.leiste-archiv .la-count{font-family:var(--mono) !important;font-size:11px;color:#9D9C97}
.leiste-archiv:hover{background:var(--panel2);color:var(--text)}
.leiste-archiv.offen{background:var(--zeile-aktiv);color:var(--text)}

/* ---- Die Kopfleiste der Liste ---- */
/* Feld und Knopf sind im Entwurf gleich hoch (34) und gleich gerundet (8),
   der Knopf ist quadratisch und traegt das dunkle Gruen, nicht die Limette:
   auf hellem Grund ist ein limettener Block heller als der Grund und der
   Knopf verschwindet. */
/* Die Kopfleiste gehoert in die Spalte, nicht ueber die ganze Breite: im
   Entwurf ist das Feld genau so breit wie die Liste darunter. Sie steht
   deshalb IN #chat-list und traegt keinen Trennstrich mehr - unter ihr
   beginnt dieselbe Spalte, nicht ein anderer Bereich. */
.chat-bar{padding:8px;gap:7px;border-bottom:0;background:var(--bg)}
.chat-bar input{height:34px;padding:0 12px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line)}
.chat-bar .bar-btn.primary{width:34px;height:34px;padding:0;flex:0 0 auto;
  /* Die Schrift AUF dem Akzent ist weiter oben mit !important auf fast
     Schwarz gesetzt - richtig fuer den limettenen Knopf, blind fuer diesen
     dunkelgruenen. Hier gilt das Gegenteil. */
  background:var(--knopf-dunkel);border:0;border-radius:8px;
  font-size:17px;font-weight:400;line-height:1;
  display:flex;align-items:center;justify-content:center}
.chat-bar .bar-btn.primary, .chat-bar .bar-btn.primary *{color:#EDF6E0 !important}
.chat-bar .bar-btn.primary:hover{background:#235C3B}
/* Das Einklappen behaelt der Entwurf nicht - die Funktion schon. Sie steht
   nur nicht mehr als Kasten neben dem Feld, sondern als stiller Griff. */
.chat-bar .collapse-btn{width:22px;height:34px;border:0;background:transparent;
  color:var(--muted);font-size:13px}
.chat-bar .collapse-btn:hover{background:transparent;color:var(--text)}

/* DER SCHALTER FUER DIE LISTE steht in der Reiterzeile, links neben Chats.
   Auf der Naht war er ein eigener Streifen: er legte sich ueber den Namen des
   Chats und las sich als Spalt zwischen zwei Flaechen, statt als Schalter. */
.tab-bar .leiste-knopf{display:none}
@media (min-width:1100px){
  .tab-bar .leiste-knopf{display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;margin-right:6px;padding:0;border:0;background:transparent;
    color:var(--muted);border-radius:7px;cursor:pointer;flex:0 0 auto}
  .tab-bar .leiste-knopf svg{width:15px;height:15px;display:block}
  .tab-bar .leiste-knopf:hover{background:var(--panel2);color:var(--text)}
  .tab-bar .leiste-knopf.zu{background:var(--akzent-hell);color:var(--accent)}
}

/* DIE DENKWOLKE ist in beiden Anmutungen dieselbe: weiss mit dunklen Punkten.
   Hell bekommt sie zusaetzlich eine Kante, weil Weiss auf hellem Grund sonst
   nur eine Aussparung waere. */
/* Die Kante ist in beiden Anmutungen dieselbe: die Wolke wird EINMAL gebaut,
   ein Wechsel des Schalters faerbt sie nicht nach. Ein Wert je Anmutung hiesse
   also: wer im Dunkeln oeffnet und dann auf hell schaltet, hat eine weisse
   Wolke ohne Kante auf hellem Grund. Ein neutrales Grau steht in beiden. */
:root, [data-theme="dark"], [data-theme="light"]{
  --wolke-fuell:#FFFFFF; --wolke-punkt:#191918; --wolke-kante:#D5D5CE; }

/* DIE ZWEITE LEISTE IST KEINE FLAECHE. Unter dem Verlauf des Kopfes stand ein
   flacher grauer Balken mit den beiden Reitern, der Kostenpille und dem
   Verbindungspunkt. Der Kopf zeigt den Verbrauch bereits - im Ring und im
   Verlauf des Grundes -, also war der Balken eine zweite Statuszeile fuer
   dieselbe Auskunft. Er traegt jetzt keinen eigenen Grund und keine Kante
   mehr: die Reiter stehen auf dem Grund der Anwendung. */
.topbar{background:transparent !important;border-bottom:0 !important;padding:6px 10px}
.topbar .stat-pill{display:none !important}
/* Ein Punkt, der immer gruen ist, ist Zierde. Er zeigt sich, wenn er etwas zu
   sagen hat. */
.topbar .conn-dot{opacity:0;transition:opacity .2s}
.topbar .conn-dot:not(.connected){opacity:1}

/* ---------- Treffer aus den Gespraechen ---------- */
/* Sie stehen unter den Sitzungszeilen und sehen bewusst anders aus: eine
   Sitzung oeffnet man, eine Stelle springt man an. */
.such-kopf{margin:14px 8px 6px;padding:0 10px;font-family:var(--mono) !important;
  font-size:10px;letter-spacing:.06em !important;text-transform:uppercase !important;
  color:var(--muted);opacity:.75}
.such-stelle{margin:0 8px 2px;padding:7px 10px;border-radius:8px;cursor:pointer;
  border-left:2px solid var(--line);-webkit-tap-highlight-color:transparent}
.such-stelle:hover{background:var(--panel2);border-left-color:var(--accent)}
.ss-kopf{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.ss-name{font-size:11.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-rolle{margin-left:auto;font-family:var(--mono) !important;font-size:9.5px;
  color:var(--muted);opacity:.8}
.ss-archiv{font-family:var(--mono) !important;font-size:9.5px;color:var(--muted);
  background:var(--zeile-aktiv);border-radius:4px;padding:1px 5px}
.ss-text{font-size:11.5px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Wo man gelandet ist, sagt eine kurze Markierung - sonst steht man mitten in
   einem langen Gespraech und weiss nicht, warum hier. */
.such-treffer{animation:such-blitz 2.4s ease-out}
@keyframes such-blitz{
  0%,55%{background:var(--akzent-hell);box-shadow:0 0 0 6px var(--akzent-hell)}
  100%{background:transparent;box-shadow:none}
}

/* DIE ZWEI PIXEL UNTER DEN REITERN SIND DIESELBE ZAHL EIN DRITTES MAL.
   Gemessen: der Streifen stand auf 37 Prozent, der Verlauf des Kopfes auf
   37 Prozent, und der Ring traegt die Woche mit 53. Der Kopf ist die Anzeige
   dieses Hauses - ein grauer Faden darunter sagt nichts dazu, er sagt es nur
   noch einmal, leiser. */
.usage-strip{display:none !important}

/* DAS UNTERTITELBAND BEHAELT SEINE HOEHE, AUCH IN DER STILLE.
   Ich hatte es auf- und zufahren lassen, weil ein leeres Band unter der Buehne
   nach nichts aussieht. Das steht in main anders, und der Grund steht dort im
   Blatt daneben: faehrt das Band beim ersten Wort auf, wird die Buehne genau in
   dem Moment kleiner, in dem jemand ueber das Bild darauf zu reden anfaengt -
   die Kamera misst neu, zieht heraus und springt wieder hinein. Genau das war
   zu sehen. Das Haus kopiert main, auch da, wo mir etwas anderes besser
   gefaellt.
   Die Hoehenregel steht damit wieder allein im geteilten Blatt (kino.css). */


/* ---------- 12. Kein Kasten um die Antwort ----------
   NACHGESEHEN IN DER LAUFENDEN SEITE, nicht geraten: drei flache Toene lagen
   ineinander - das Raster #1C2A24, der Kasten #0E1613, das Blatt #14201B.
   Zwei rechteckige Stufen mit scharfen Ecken um jede Antwort, und keine davon
   sagte etwas: es war dieselbe Flaeche in drei Helligkeiten.
   Der Text steht jetzt auf demselben Grund wie alles andere. Was einen Kasten
   noch abgrenzt, ist der Akzentrahmen des AKTIVEN Kastens - der sagt etwas,
   naemlich wohin das Getippte geht - und sonst nichts.
   Die Bilder behalten ihre Karte: ein Bild IST ein Gegenstand auf der Flaeche,
   ein Absatz ist es nicht. */
.pane-dialog{background:var(--bg)}
.pane-grid{background:var(--bg)}

/* ---------- 13. Nur die eigene Nachricht traegt eine Blase ----------
   NACHGEMESSEN IN DER LAUFENDEN SEITE: .dlg-bubble (die eigene Nachricht)
   hat 1px Akzentkante, 16px Rundung und eigenen Grund - das soll sie behalten,
   sie sagt "das kam von dir". .dlg-body (die Antwort) hatte 1px #24352D,
   Rundung 0 und einen eigenen Grund: ein zweiter Kasten mit HARTEN Ecken, der
   nichts unterscheidet, weil ohnehin alles andere eine Antwort ist.
   Zwei Kaesten nebeneinander heben sich gegenseitig auf; einer davon muss weg,
   und es ist der, der keine Auskunft gibt.
   Die Regel steht hier und nicht in dialog.css: das Blatt ist geteilt, main
   wuerde sonst mitkippen. */
.dlg-body{background:transparent;border:0}

/* ---------- 14. Rueckmeldungen: die Schlange und das Blatt ----------
   DIE FORMENSPRACHE DIESES HAUSES IST RUND UND ARBEITET MIT ABSTAND STATT MIT
   LINIEN. Nachgeschaut, statt geraten: .chat-card nebenan hat border-bottom:0,
   eine Rundung, 8px Luft an den Seiten und markiert die Auswahl mit einem
   hellen Block. .seg ist rund, Knoepfe sind Pillen, Karten haben 10 bis 14.
   Der erste Wurf dieses Reiters kam aus einer anderen Sprache: Trennlinie
   unter jeder Zeile, Kaesten bis an die Kante, Rundung null. Er sah aus wie
   ein fremdes Programm im selben Fenster.
   Also: die Meldezeile ist eine Karte wie die Chatkarte, der Beleg steht in
   einer gerundeten Karte mit Rand, und Linien gibt es nur da, wo wirklich
   zwei Flaechen aneinanderstossen. */

/* Die Schlange. Keine Trennlinien - Abstand. */
.fb-z{border-bottom:0}
.fb-z-t{font-size:13.5px}
.fb-z:hover{background:var(--panel2)}
.fb-z.aktiv{background:var(--akzent-hell)}
.fb-z.aktiv .fb-z-t{color:var(--accent)}
.fb-rail{border-right:1px solid var(--line)}
.fb-bar{border-bottom:1px solid var(--line);background:var(--bg)}
.fb-group > h3{background:var(--bg)}

/* Das Blatt. Die Meldung traegt das Gewicht; der Beleg ist eine Karte. */
.fb-kopf{border-bottom:0}
.fb-titel{font-size:15.5px;line-height:1.45}
.fb-bild{border:1px solid var(--line);border-radius:14px;box-shadow:var(--schatten)}
.fb-stelle{background:var(--panel2);border-bottom:1px solid var(--line-zart)}
.fb-tun button{border-radius:999px;padding:4px 12px;background:transparent;
  border:1px solid var(--line);color:var(--muted)}
.fb-tun button:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.fb-unten{border-top:1px solid var(--line-zart);background:var(--panel)}
.fb-reply{background:var(--panel)}
.fb-reply input{border-radius:10px;background:transparent;border:1px solid var(--line-zart)}
.fb-reply input:focus{background:var(--panel2)}
.fb-reply button{border-radius:999px}
.fb-rep{border-left:2px solid var(--accent);padding-left:10px}

/* DIE BUEHNE: die App selbst, an der markierten Stelle. Kein Bild - ein Bild
   altert und man kann nichts darin anklicken. */
#fb-buehne{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:26px}
.fbb-kasten{display:flex;flex-direction:column;width:min(1180px,100%);height:min(820px,100%);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45)}
.fbb-kopf{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 14px;
  border-bottom:1px solid var(--line-zart);background:var(--panel2)}
.fbb-weg{font-family:var(--mono);font-size:11.5px;color:var(--accent)}
.fbb-stand{flex:1 1 auto;font-size:12px;color:var(--muted)}
.fbb-stand.weg{color:var(--warn)}
.fbb-zu{border:0;background:transparent;color:var(--muted);font-size:15px;
  line-height:1;padding:5px 8px;border-radius:7px;cursor:pointer}
.fbb-zu:hover{background:var(--line-zart);color:var(--text)}
.fbb-rahmen{flex:1 1 auto;width:100%;border:0;background:var(--bg)}