/* ============================================================
   Liminal — shared design system (theme tokens + primitives)
   Flat industrial-terminal, matching Liminal Lite: near-black background,
   ONE mint/teal accent, monospace everywhere, sharp corners, no native
   browser chrome (scrollbars/selects/checkboxes/shadows except modals).
   Accent is ONE variable (--accent); swap to retheme the whole product.
   The old claude-web does NOT use this file and is untouched.
   ============================================================ */

:root,
[data-theme="dark"],
[data-theme="light"] {
  /* ---- Lite's exact tokens ---- */
  --bg:        #111514;
  --panel:     #181d1c;
  --panel2:    #1f2523;
  --line:      #2a3330;
  --text:      #d5ddda;
  --muted:     #7c8a86;
  --accent:      #3fd8a4;
  --accent-dark: #26b384;
  --ok:    #46c06a;
  --warn:  #e5aa14;
  --err:   #e05555;
  --term-bg: #0e1211;
  --mono: ui-monospace,'Cascadia Mono',Consolas,'DejaVu Sans Mono',monospace;

  /* ---- back-compat aliases ----
     Existing component CSS across index.html / programs.html / login.html /
     settings.html still references the older "Liminal Dusk" variable names.
     Point every one of them at the tokens above so the whole app re-themes
     from ONE source instead of per-file color copies drifting apart.
     Light mode is intentionally identical to dark here — a half-styled
     light mode is worse than a no-op toggle. */
  --bg2:        var(--panel);
  --surface:    var(--panel);
  --surface2:   var(--panel2);
  --surface3:   var(--panel2);
  --border:     var(--line);
  --border2:    var(--line);
  --text2:      var(--text);
  --text3:      var(--muted);
  --accent-hover: var(--accent-dark);
  --accent-dim:   #3fd8a426;
  --accent-text:  #0b0d10;
  --green:  var(--ok);   --green-bg:  #46c06a1a;
  --yellow: var(--warn); --yellow-bg: #e5aa141a;
  --red:    var(--err);  --red-bg:    #e055551a;
  --blue:   #67e8f9;     --blue-bg:   #67e8f91a;
  /* Violett heisst an genau einer Stelle genau eine Sache: dieser Chat laeuft
     nicht auf dem eigenen Kontingent, sondern auf dem geliehenen Adminkonto. */
  --violet: #a78bfa;     --violet-bg: #a78bfa1a;

  /* Rundung. Hier stand 0px, und darunter setzten vierzehn Regeln
     `border-radius: var(--radius2)` NOCH EINMAL fest - der Wert war also da und wurde von
     niemandem gelesen. Eine Marke, die nichts steuert, ist keine Marke.
     Beide Haeuser tragen jetzt dieselbe weiche Kante wie die Konsole in
     Liminal main, und sie laesst sich ab jetzt an EINER Stelle aendern. */
  --radius:  10px;
  --radius2: 6px;
  --shadow:  0 10px 28px rgba(0,0,0,.55);
  --mono2: var(--mono);
  --sans: var(--mono);   /* Lite is monospace everywhere — no separate UI face */

  --nav-h: 46px;
}

/* ---- Real light theme ----
   A fully-styled counterpart, not a no-op. Only the BASE tokens + the few
   aliases that carry a literal hex are overridden here; every `var(--panel)`
   style alias above re-resolves lazily to these values, so the whole product
   re-skins from this one block (same "one accent, one source" rule as dark).
   The mint accent is deepened so it clears contrast as link text on white and
   still works as a button fill (with light --accent-text). */
[data-theme="light"] {
  --bg:        #f2f5f3;
  --panel:     #ffffff;
  --panel2:    #e9edeb;
  --line:      #d3dad6;
  --text:      #16211d;
  --muted:     #5d6a65;
  --accent:      #0c9b6b;
  --accent-dark: #087a53;
  --ok:    #1a8f4a;
  --warn:  #a9760a;
  --err:   #c4362f;
  --term-bg: #ffffff;

  --accent-dim:   #0c9b6b26;
  --accent-text:  #ffffff;
  --green-bg:  #1a8f4a14;
  --yellow-bg: #a9760a14;
  --red-bg:    #c4362f14;
  --blue:   #1d7fa0;     --blue-bg:   #1d7fa014;
  --violet: #6d3fd1;     --violet-bg: #6d3fd114;
  --shadow:  0 10px 28px rgba(0,0,0,.14);
}

* { box-sizing: border-box; }
/* No browser scrollbars anywhere. Scrolling still works, it's just invisible —
   Firefox via scrollbar-width, WebKit/Chrome via ::-webkit-scrollbar. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
code, .mono { font-family: var(--mono); }

/* ---------- Top navigation bar (injected by liminal-shell.js) ---------- */
.lmnl-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.lmnl-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text); margin-right: 14px; user-select: none; font-family: var(--mono);
}
.lmnl-brand .glyph {
  width: 16px; height: 16px; flex: 0 0 16px;
  background: url(/favicon.svg) center/contain no-repeat;
  color: transparent; font-size: 0; overflow: hidden;
}
.lmnl-tabs { display: flex; align-items: center; gap: 2px; height: 100%; }
/* Die Markierung des aktiven Reiters steht RECHTS neben dem Wort, nicht
   darunter. Unter der Leiste liegt der Nutzungsstreifen, ebenfalls duenn und
   ebenfalls in der Akzentfarbe: zwei waagerechte gruene Striche uebereinander
   waren nicht auseinanderzuhalten, und der Verbrauch war nicht mehr ablesbar.
   Der Platz fuer die Markierung wird IMMER freigehalten (durchsichtig, wenn
   nicht aktiv), sonst wandert die Leiste bei jedem Wechsel um zwei Pixel. */
.lmnl-tab {
  padding: 0 12px; height: 100%; border-radius: var(--radius2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-family: var(--mono);
  cursor: pointer; border: none; background: transparent;
  transition: color .15s;
}
.lmnl-tab::after {
  content: ''; width: 2px; height: 13px; margin-left: 8px;
  background: transparent; transition: background .15s;
}
.lmnl-tab:hover { color: var(--text); }
.lmnl-tab.active { color: var(--accent); }
.lmnl-tab.active::after { background: var(--accent); }
.lmnl-spacer { flex: 1; }
/* Wohin eine Seite ihre eigenen Bedienelemente haengt, statt eine zweite Leiste
   darunter aufzumachen (siehe LiminalShell.onNav). */
.lmnl-extras { display: flex; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.lmnl-extras:empty { display: none; }
.lmnl-iconbtn {
  width: 30px; height: 30px; border-radius: var(--radius2);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  cursor: pointer; font-size: 14px;
}
.lmnl-iconbtn:hover { border-color: var(--line); color: var(--text); }
.lmnl-user {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--radius2); cursor: pointer;
  font-size: 11px; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line);
  background: var(--panel2); font-family: var(--mono);
}
.lmnl-user:hover { border-color: var(--muted); color: var(--text); }
.lmnl-menu {
  position: absolute; top: calc(var(--nav-h) - 1px); right: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius2);
  box-shadow: var(--shadow); min-width: 200px; padding: 0; display: none; z-index: 60;
}
.lmnl-menu.open { display: block; }
.lmnl-menu .item {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius2);
  font-size: 12px; letter-spacing: .04em; color: var(--text); background: transparent;
  border: none; border-bottom: 1px solid var(--line); cursor: pointer; font-family: var(--mono);
}
.lmnl-menu .item:last-child { border-bottom: 0; }
.lmnl-menu .item:hover { background: var(--panel); color: var(--accent); }
.lmnl-menu .sep { height: 1px; background: var(--line); margin: 0; }

/* ---------- Primitives ---------- */
.lmnl-wrap { max-width: none; margin: 0; padding: 28px 30px 60px; }
.lmnl-h1 { font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: .04em; }
.lmnl-sub { color: var(--muted); font-size: 12px; margin: 0 0 22px; }

.btn {
  padding: 8px 14px; border-radius: var(--radius2); border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--muted); background: var(--panel2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b0d10; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--err); border-color: var(--err); }
.btn.danger:hover { background: #e0555522; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 9px 10px; border-radius: var(--radius2);
  border: 1px solid var(--line); background: var(--term-bg); color: var(--text);
  font-size: 13px; font-family: var(--mono); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius2);
  padding: 16px;
}
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: var(--radius2);
  font-size: 10px; font-weight: 700; font-family: var(--mono); letter-spacing: .04em;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--line);
}
.badge.green  { background: #46c06a1a; color: var(--ok);   border-color: transparent; }
.badge.yellow { background: #e5aa141a; color: var(--warn); border-color: transparent; }
.badge.red    { background: #e055551a; color: var(--err);  border-color: transparent; }
.badge.accent { background: #3fd8a426; color: var(--accent); border-color: transparent; }

table.lmnl { width: 100%; border-collapse: collapse; font-size: 12px; }
table.lmnl th { text-align: left; color: var(--muted); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.lmnl td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--text); }
table.lmnl tr:hover td { background: var(--panel); }

/* ---------- Segmentschalter ----------
   Stand bisher in jeder Seite einzeln (settings.html, programs.html), also gab
   es ihn auf einer neuen Seite schlicht nicht - dort blieben zwei nackte
   Knoepfe des Browsers stehen. Eine Seite mit eigenen Vorstellungen
   ueberschreibt das hier weiterhin, ihr <style> steht spaeter. */
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--panel); }
.seg > button {
  padding: 6px 12px; border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-right: 1px solid var(--line); transition: color .15s, background .15s;
}
.seg > button:last-child { border-right: none; }
.seg > button:hover:not(.active) { color: var(--text); }
.seg > button.active { background: var(--accent); color: var(--accent-text); }

.muted { color: var(--muted); }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent); color: var(--text);
  padding: 10px 16px; border-radius: var(--radius2); box-shadow: var(--shadow);
  font-size: 12px; font-family: var(--mono); z-index: 200; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---------- Schalter und Anzeigen in der Leiste ---------- */
/* Liegen in der Shell und nicht in einer einzelnen Seite, damit sie auf JEDEM
   Reiter sichtbar und bedienbar sind. Vorher steckten sie in der
   Engineering-Seite, also gab es sie im Programme-Reiter schlicht nicht. */
.auto-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; padding: 6px 4px; }
.ar-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted); width: 18px; text-align: right; transition: color .15s; font-family: var(--mono); }
.ar-track { width: 30px; height: 14px; border-radius: var(--radius2); background: var(--panel2); border: 1px solid var(--line); position: relative; transition: background .15s, border-color .15s; }
.ar-track.on { background: #2c3a2f; border-color: var(--ok); }
.ar-track.yolo { background: #2e2140; border-color: #a855f7; }
.ar-track::after { content: ''; width: 10px; height: 10px; border-radius: var(--radius2); background: var(--muted); position: absolute; top: 1px; left: 1px; transition: left .15s, background .15s; }
.ar-track.on::after { left: 17px; background: var(--ok); }
.ar-track.yolo::after { background: #a855f7; }

/* ---------- Einstellungsfenster (Zahnrad) ---------- */
.lmnl-modal { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(0,0,0,.6); }
.lmnl-modal.open { display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.lmnl-sheet { background: var(--panel2); border: 1px solid var(--line); width: 100%; max-width: 460px; }
.lmnl-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); }
.lmnl-sheet header .t { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: var(--mono); color: var(--text2); }
.lmnl-sheet header .who { font-size: 11px; color: var(--text3); font-family: var(--mono); }
.lmnl-sec { padding: 15px 16px; border-bottom: 1px solid var(--line); }
.lmnl-sec:last-child { border-bottom: 0; }
.lmnl-sec h3 { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-family: var(--mono); margin-bottom: 12px; }
.lmnl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lmnl-row + .lmnl-row { margin-top: 12px; }
.lmnl-row .rt { font-size: 13px; color: var(--text); }
.lmnl-row .rn { font-size: 11px; color: var(--text3); margin-top: 2px; }
.lmnl-sw { width: 34px; height: 16px; flex: 0 0 34px; background: var(--panel); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .15s, border-color .15s; }
.lmnl-sw::after { content: ''; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--muted); transition: left .15s, background .15s; }
.lmnl-sw.on { background: #2c3a2f; border-color: var(--ok); }
.lmnl-sw.on::after { left: 19px; background: var(--ok); }
.lmnl-f { margin-bottom: 9px; }
.lmnl-f label { display: block; font-size: 10px; font-weight: 700; color: var(--text3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--mono); }
.lmnl-f input { width: 100%; padding: 8px 10px; border-radius: var(--radius2); border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 13px; outline: none; }
.lmnl-f input:focus { border-color: var(--accent); }
.lmnl-btn { padding: 8px 14px; border-radius: var(--radius2); border: 1px solid var(--line); background: var(--panel);
  color: var(--text2); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--mono);
  letter-spacing: .06em; text-transform: uppercase; }
.lmnl-btn:hover { border-color: var(--muted); color: var(--text); }
.lmnl-btn.primary { background: var(--accent); border-color: var(--accent); color: #0b0d10; }
.lmnl-btn.danger { color: var(--red); }
.lmnl-btn.danger:hover { border-color: var(--red); }
.lmnl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lmnl-msg { font-size: 12px; margin-top: 8px; min-height: 15px; }
.lmnl-msg.ok { color: var(--ok); } .lmnl-msg.err { color: var(--red); }
.lmnl-u { margin-bottom: 14px; } .lmnl-u:last-child { margin-bottom: 0; }
.lmnl-u .l { display: flex; justify-content: space-between; margin-bottom: 5px; }
.lmnl-u .n { font-size: 12px; color: var(--text2); }
.lmnl-u .p { font-size: 12px; font-weight: 700; font-family: var(--mono); }
.lmnl-u .bar { height: 8px; background: var(--panel); border: 1px solid var(--line); position: relative; overflow: hidden; }
.lmnl-u .fill { position: absolute; inset: 0; right: auto; width: 0%; background: var(--accent); transition: width .6s ease; }
.lmnl-u .fill.warn { background: var(--warn); } .lmnl-u .fill.crit { background: var(--red); }
/* Aushilfe schlaegt Warnstufe: der Balken zeigt dann das geliehene Konto, und
   dessen 12 % sind keine Warnung, sondern die Antwort auf "warum geht es noch". */
.lmnl-u .fill.lend { background: var(--violet); }
.lmnl-note-lend { font-size: 11px; color: var(--violet); margin-top: 8px; line-height: 1.5; }
.lmnl-u .r { font-size: 10px; color: var(--text3); margin-top: 4px; font-family: var(--mono); }

/* ============================================================
   Handy und Tablet — die Regeln, die JEDE Liminal-Seite braucht
   ============================================================
   Diese Datei war bis hierher komplett ohne @media: das Hausdesign hat also
   nur eine einzige Groesse gekannt, die des Schreibtischs. Auf dem iPhone lief
   deshalb die Kopfleiste von Programme rechts aus dem Bild, und das Suchfeld
   war auf einen Rest zusammengedrueckt. Dieselbe Datei liegt dem Baukasten fuer
   die Apps bei (sandbox-kit/liminal.css), was hier steht gilt also fuer alles,
   was im Haus gebaut wird - und muss dort gleich bleiben.

   Die iOS-Geometrie (keine Hoehe auf <html>, Huelle im normalen Fluss mit
   100lvh, kein position:fixed fuer die Huelle) steht NICHT hier, sondern in der
   jeweiligen Seite: sie betriftt das oberste Dokument und nur das.
   Siehe WEBAPP-PROXY-GUIDE.md. */

/* Beruehrung statt Maus: kein graues Aufblitzen beim Tippen, kein 300ms-
   Warten auf einen Doppeltipp, keine ungewollte Textauswahl an Bedienelementen. */
button, .lmnl-tab, .lmnl-iconbtn, .lmnl-user, .btn, .lmnl-btn, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Die Kopfleiste darf nie ueber den Rand laufen. Die Reiter schieben sich
   waagerecht, der Rest bleibt stehen. Der Balken dazu ist ausgeblendet (siehe
   ganz oben), das Schieben funktioniert trotzdem. */
.lmnl-nav { min-width: 0; }
.lmnl-tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; min-width: 0; flex: 0 1 auto; }
.lmnl-tab { flex: 0 0 auto; white-space: nowrap; }
.lmnl-extras { flex: 0 1 auto; }

@media (max-width: 700px) {
  /* Das Zeichen bleibt, der Schriftzug geht. Er ist auf dieser Breite der
     teuerste Platz der Leiste und traegt nichts, was das Zeichen nicht auch
     sagt. Der Text wird nicht entfernt, nur unsichtbar gemacht: Vorlese- und
     Suchfunktionen finden ihn weiter. */
  .lmnl-brand { margin-right: 6px; gap: 0; font-size: 0; letter-spacing: 0; }
  .lmnl-brand .glyph { font-size: 0; }
  .lmnl-nav { padding: 0 8px; gap: 2px; }
  .lmnl-tab { padding: 0 9px; }
  .lmnl-user { padding: 5px 8px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lmnl-wrap { padding: 18px 14px 48px; }
  .lmnl-modal.open { padding: 16px 10px 40px; }
}

@media (min-width: 701px) and (max-width: 1099px) {
  /* Tablet: Platz genug fuer die ganze Leiste, aber nicht fuer den Rand eines
     Schreibtischs. */
  .lmnl-wrap { padding: 22px 20px 56px; }
}

/* Sicherer Bereich. Gilt fuer den Inhalt, NICHT fuer <body>: Seiten, die selbst
   eine Huelle bauen (shell.html), setzen den Rand dort schon, und zweimal
   gesetzt ergibt einen doppelten Streifen. */
.lmnl-wrap {
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}

@media (pointer: coarse) {
  /* Zwei Dinge, die auf einem Bildschirm ohne Maus nicht verhandelbar sind.

     Erstens die Schriftgroesse in Eingabefeldern: unter 16px zoomt iOS beim
     Antippen die GANZE Seite heran und wieder heraus kommt sie nicht. Das ist
     kein Stilfehler, danach stimmt die Geometrie der Seite nicht mehr.

     Zweitens die Groesse der Ziele: eine Fingerkuppe trifft etwa 9mm, das sind
     rund 44px. Alles darunter wird zur Geduldsprobe. */
  input, select, textarea { font-size: 16px; }
  .lmnl-f input { font-size: 16px; }
  /* Ausdruecklich NUR die Bedienelemente des Hausdesigns, nicht `button`
     ueberhaupt: eine Seite hat immer auch winzige Knoepfe, die winzig sein
     MUESSEN (das Kreuz an einem Anhang, ein Punkt in einer Zeile). Eine Regel
     auf alle Knoepfe haette die auf 44px aufgeblasen und die Zeilen gesprengt. */
  .btn, .lmnl-btn, .lmnl-iconbtn, .lmnl-user, .lmnl-tab { min-height: 44px; }
  .lmnl-iconbtn { min-width: 44px; }
  .lmnl-menu .item { padding: 13px 10px; }
}

/* Breites bekommt seinen eigenen Schieber, statt die ganze Seite waagerecht
   wandern zu lassen. Eine Seite, die seitlich verrutscht, wirkt kaputt, und auf
   einem Telefon findet man den Weg zurueck oft nicht.
   Die Tabellenregel gilt nur schmal: `display:block` macht aus der Tabelle ein
   scrollbares Kaestchen, nimmt ihr dabei aber die volle Breite. Auf dem
   Schreibtisch waere das eine Verschlechterung ohne Anlass. */
@media (max-width: 1099px) {
  .lmnl-wrap table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.lmnl-scrollx { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre { max-width: 100%; overflow-x: auto; }
/* Absichtlich nur Bilder und Video. Eine Regel auf `svg` haette die Pfeile der
   Schaubilder und die Formelsaetze von KaTeX mitgetroffen, die ihre Breite
   selbst ausrechnen und groesser sein DUERFEN als ihr Kasten. */
img, video { max-width: 100%; height: auto; }

/* ---------- Anfassen statt Anklicken: Auswahl, Lupe, Ueberscrollen ----------
   Drei Dinge, die auf einem Bildschirm ohne Maus stoeren und auf einem mit
   Maus nie aufgefallen sind. */

/* 1. Kein versehentliches Markieren an Bedienelementen. Wer auf einer Kachel
      den Finger eine Spur zu lange liegen laesst, bekam die blaue Markierung
      und die Lupe darueber - in einer App sieht das aus, als sei etwas kaputt.
      Ausdruecklich NUR an Bedienelementen und Beschriftungen: der INHALT bleibt
      auswaehlbar, denn eine Zahl aus einer Auswertung will man kopieren
      koennen, und das ist auf dem Tablet der einzige Weg dorthin. */
.lmnl-nav, .lmnl-brand, .lmnl-tab, .lmnl-tabs, .lmnl-iconbtn, .lmnl-user,
.lmnl-menu, .btn, .lmnl-btn, .badge, .seg, .toast, [role="button"], button, label {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Was trotzdem auswaehlbar bleiben MUSS: Eingabefelder, und alles, was jemand
   ausdruecklich so kennzeichnet. Ein Eingabefeld ohne Auswahl laesst sich nicht
   mehr korrigieren, das waere die Reparatur schlimmer als der Schaden. */
input, textarea, [contenteditable], .lmnl-auswaehlbar, .lmnl-auswaehlbar * {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* 2. Kein Ueberscrollen ueber das Ende hinaus. Die Seite federte am oberen und
      unteren Rand zurueck und gab den Blick auf den Grund dahinter frei - in
      einer eigenen App gibt es kein "dahinter", also sieht es nach einem Loch
      aus. Nebenwirkung mit Absicht: das Nach-unten-Ziehen laedt die Seite nicht
      mehr neu, was in einer App ohnehin niemand will.
      `contain` statt `none`: Ketten nach aussen sind unterbunden, das eigene
      Scrollen bleibt unangetastet. */
html, body { overscroll-behavior: contain; }
/* Ein Bereich, der in sich scrollt, gibt sein Scrollen ebenfalls nicht nach
   aussen weiter - sonst wandert am Ende einer Liste die ganze Seite mit. */
.lmnl-wrap, .userpick, .uac-drop, .lmnl-modal, [data-scroll] { overscroll-behavior: contain; }