/* =====================================================================
   PrepP — „Mitdenken" in der Mitschrift (Paket LIVE, 14.10.2026,
   js/vorlesung-live.js; docs/LIVE-VORLESUNG-2026-10-14.md)
   ---------------------------------------------------------------------
   Der Bereich steht in der Leiste der Mitschrift (.vl-bot) direkt unter
   dem Transkript-Satz: eine eigene Zeile über die ganze Breite (order 5,
   flex-basis 100 %). Er nimmt Platz von Folien und Heft (die Seite ist
   eine Spalte fester Höhe, .vl-body schrumpft) — er liegt NIE darüber.
   Einzige Ausnahme: Telefon QUER, dort teilen Kopf und Leiste eine Zeile;
   der aufgeklappte Bereich ist dann ein Feld unter dem Knopf, wie die
   Marken-Spalte (nur auf Klick).

   Breit (seit UI1015-FIX-F, 16.10.2026): oben „Aufnahme" und — ohne
   Aufnahme — „Erstellen ▾" nebeneinander, darunter das Erstellte als
   Punkte, mit Aufnahme der Schalter „Alle 3 Minuten zusammenfassen", das
   Feld, ganz unten die Textzeile „▸ Antworten · n" und die Karten
   (höchstens 24 % der Höhe bzw. 200 px, rollt — die neueste steht oben).
   „Heft mitlesen" steht im ⋯ des Hefts (Abschnitt unten).
   Telefon hoch (vl-schmal): zugeklappt nur die Kopfzeile „Mitdenken · n"
   (44 px), aufgeklappt Feld, Knöpfe und Karten untereinander.
   Eigene Datei statt css/vorlesung.css: Ein anderes Paket (Q09) arbeitet
   heute nacht dort. Tokens --pp-*, hell und dunkel aus denselben Variablen.
   ===================================================================== */

.vl-live[hidden], .vl-live [hidden] { display: none !important; }
.vl-live { flex: 1 1 100%; order: 5; min-width: 0; }
.vl-live:empty { display: none; }
/* iPad hoch stellt die Leiste auf eine Zeile (nowrap, css/vorlesung.css) —
   der Bereich braucht seine eigene; Telefon quer bleibt bei einer Zeile. */
.vl-root .vl-bot:has(> .vl-live:not([hidden])) { flex-wrap: wrap; }
.vl-root.vl-quer .vl-bot:has(> .vl-live:not([hidden])) { flex-wrap: nowrap; }
/* Aufgeklappt nimmt der Bereich Folien und Heft Höhe weg. Was im Heft
   dann über seine Spalte hinausragt (das Blatt, positionierte Leisten),
   malte sich sonst ÜBER die Leiste und fing die Tipps ab (WebKit 390 px,
   gemessen: das Raster des Blatts lag über dem Feld). Die Spalte schneidet
   ab, die Leiste liegt eine Ebene höher — die Marken-Spalte (z 2) bleibt
   darüber. */
.vl-root:has(> .vl-bot > .vl-live:not(.zu):not([hidden])) > .vl-body { overflow: hidden; }
.vl-root .vl-bot:has(> .vl-live:not(.zu):not([hidden])) { position: relative; z-index: 1; }

.vl-live-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-1) var(--pp-sp-2); min-width: 0; }
.vl-live-kopf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-1) var(--pp-sp-2); flex: none; min-width: 0; max-width: 100%; }
.vl-live-auf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; white-space: nowrap;
  border: 1px solid var(--pp-accent-line); border-radius: 6px; background: var(--pp-accent-tint); color: var(--pp-accent-2);
  font-family: var(--pp-ui); font-size: var(--pp-fs-klein); font-weight: 600; cursor: pointer;
}
.vl-live-auf:focus-visible, .vl-live-chip:focus-visible, .vl-live-feld:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
.vl-live-auf .pp-num { font-family: var(--pp-mono); font-weight: 500; }
.vl-live-pfeil { display: inline-block; font-size: var(--pp-fs-mini); }
.vl-live.zu .vl-live-pfeil { transform: rotate(-90deg); }
body.pp-anim .vl-live-pfeil { transition: transform .15s ease; }
/* Neue Karte, während der Bereich zu ist (Telefon). */
.vl-live-neu { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-accent); }
.vl-live-satz { min-width: 0; color: var(--pp-text-2); font-size: var(--pp-fs-mini); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-live-satz:empty { display: none; }

.vl-live-koerper { display: contents; }
.vl-live.zu .vl-live-koerper { display: none; }
.vl-live-form { flex: 1 1 260px; display: flex; gap: var(--pp-sp-1); min-width: 0; margin: 0; }
.vl-live-feld {
  flex: 1 1 auto; min-width: 0; min-height: 30px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid var(--pp-line-feld); border-radius: 6px; background: var(--pp-bg); color: var(--pp-text);
  font-family: var(--pp-ui); font-size: var(--pp-fs-text);
}
.vl-live-senden { flex: none; justify-content: center; }
.vl-live-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; white-space: nowrap;
  border: 1px solid var(--pp-line); border-radius: 999px; background: var(--pp-surface); color: var(--pp-text-2);
  font-family: var(--pp-ui); font-size: var(--pp-fs-mini); cursor: pointer;
}
.vl-live-chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-line); }
.vl-live-chip[aria-pressed="true"] { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); }
.vl-live-chip[aria-pressed="true"] i { background: var(--pp-accent); }

/* ---------- „Heft mitlesen" im ⋯ des Hefts (Fokus Y3; seit UI1015-FIX-F, 16.10.2026) ----------
   Bis UI1015-FIX-F eine eigene Zeile in Mitdenken; jetzt eine Gruppe der
   senkrechten Liste unter dem ⋯ des Hefts (#hf-mitlesen, css/heft.css
   .hf-leiste) — gebaut von js/vorlesung-live.js heftNachziehen. Die Knöpfe
   sind die der Liste (.hf-knopf, Wort neben dem Zeichen); der Schalter trägt
   seinen Zustand als Wort („an"/„aus") UND als Punkt — EIN ist eine Fläche
   (hf-knopf[aria-pressed]) und ein farbiger Punkt, nicht nur eine Farbe. Der
   Stand bricht um statt abzuschneiden: abgeschnitten fehlte ausgerechnet der
   Grund eines Fehlers. */
.vl-live-heft { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
.vl-live-heft-satz { padding: 4px 10px; color: var(--pp-text-2); font-size: var(--pp-fs-mini); line-height: var(--pp-lh-text); max-width: 240px; }
.vl-live-heft-an i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-line-2, var(--pp-line)); }
.vl-live-heft-an[aria-pressed="true"] i { background: var(--pp-accent); }
.vl-live-heft-zustand { margin-left: auto; padding-left: 8px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.vl-live-heft-an[aria-pressed="true"] .vl-live-heft-zustand { color: var(--pp-accent-2); font-weight: 600; }
.vl-live-heft-an.warn { border-color: var(--pp-err); background: var(--pp-err-tint); color: var(--pp-text); box-shadow: none; }
.vl-live-heft-an.warn i { background: var(--pp-err); border-radius: 2px; }
.pp-anim .vl-live-heft-an.liest i { animation: vl-live-puls 1.2s ease-in-out infinite; }
@keyframes vl-live-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .vl-live-heft-an.liest i { animation: none; } }
.vl-live-takt { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 28px; white-space: nowrap; color: var(--pp-text-2); font-size: var(--pp-fs-mini); }
.vl-live-takt select {
  min-height: 30px; padding: 2px 6px; font: inherit; color: var(--pp-text);
  background: var(--pp-surface); border: 1px solid var(--pp-line-feld); border-radius: 6px;
}
.vl-live-heft-zahl, .vl-live-heft-stand { padding: 0 10px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.vl-live-heft-zahl { font-family: var(--pp-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-live-heft-stand { min-width: 0; max-width: 240px; overflow-wrap: anywhere; }
.vl-live-heft-zahl:empty, .vl-live-heft-stand:empty { display: none; }
.vl-live-heft-stand.fehler { color: var(--pp-err); }
@media (pointer: coarse) {
  .vl-live-takt select { -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 10px; }
}
/* Eine Heft-Karte: Befund (Warnfarbe am Rand) oder Hinweis (Akzent) — das
   Wort steht dabei, nicht nur die Farbe. */
.vl-live-karte.heft { border-left: 3px solid var(--pp-warn); }
.vl-live-karte.heft.hinweis { border-left-color: var(--pp-accent-line); }
.vl-live-heft-art { font-weight: 600; color: var(--pp-text); }
.vl-live-heft-art.hinweis { color: var(--pp-accent-2); }
@media (pointer: coarse) {
  .vl-live-takt select { -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 10px; }
  .vl-live-heft .pp-btn { min-height: 44px; }
}

/* ---------- Mitdenken an, der Läufer (Fokus 2 · F5, 15.10.2026) ----------
   Eine eigene Zeile über die ganze Breite oben im Körper, nur an einer
   Veranstaltung: der Schalter „Mitdenken an" (dieselbe Chip-Gestalt wie
   „Heft mitlesen") bzw. wer gerade mitdenkt und „Hier übernehmen",
   darunter ein Satz, wohin die Antworten gehen. Der Satz bricht um, nie
   abgeschnitten — er ist die Auskunft, was die Lerngruppe sieht. Am
   Telefon hoch fällt nur der Satz weg (der Platz gehört Feld und Karten;
   der Kopf sagt zugeklappt, wo Mitdenken läuft). */
.vl-live-laeufer { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-1) var(--pp-sp-2); min-width: 0; }
.vl-live-lf-wer { min-width: 0; color: var(--pp-text); font-size: var(--pp-fs-mini); font-weight: 600; overflow-wrap: anywhere; }
.vl-live-lf-satz { flex: 1 1 100%; min-width: 0; color: var(--pp-text-2); font-size: var(--pp-fs-mini); line-height: var(--pp-lh-text); overflow-wrap: anywhere; }
.vl-live-lf-nur { color: var(--pp-text-2); }
.vl-live-laeufer .pp-btn:disabled, .vl-live-laeufer .vl-live-chip:disabled { opacity: .5; cursor: default; }
@media (pointer: coarse) {
  .vl-live-laeufer .pp-btn { min-height: 44px; }
}
.vl-root.vl-schmal .vl-live-lf-satz { display: none; }

/* ---------- Karten (neueste oben) ---------- */
.vl-live-karten {
  flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--pp-sp-2); min-width: 0;
  max-height: min(24vh, 200px); overflow-y: auto; overscroll-behavior: contain;
}
.vl-live-karten:empty { display: none; }
.vl-live-karte {
  border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-bg); color: var(--pp-text);
  padding: var(--pp-sp-2) var(--pp-sp-3); font-size: var(--pp-fs-klein);
}
.vl-live-karte.auto { border-left: 3px solid var(--pp-accent-line); }
.vl-live-karte.laeuft { border-color: var(--pp-accent-line); }
.vl-live-kk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: var(--pp-sp-1); color: var(--pp-text-2); font-size: var(--pp-fs-mini); }
.vl-live-kk .pp-num { font-family: var(--pp-mono); font-variant-numeric: tabular-nums; }
/* gk1019-G5 (19.10.2026): der gemeinsame Verlauf der Lerngruppe — das Kürzel
   „Von" vor der Zeit jeder Karte, und die flüchtige Karte eines anderen
   Mitglieds („antwortet …"), bis seine fertige Antwort kommt. */
.vl-live-von { display: inline-flex; align-items: center; margin-right: 2px; }
.vl-live-von .pp-gk { font-size: var(--pp-fs-mini); }
.vl-live-karte.fremd { border-style: dashed; }
.vl-live-quelle { font-weight: 600; color: var(--pp-text); }
.vl-live-frage { color: var(--pp-text); overflow-wrap: anywhere; }
.vl-live-auto { color: var(--pp-accent-2); }
.vl-live-text { white-space: pre-wrap; line-height: var(--pp-lh-knapp); overflow-wrap: anywhere; }
.vl-live-leise { color: var(--pp-text-2); }
.vl-live-akt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-1) var(--pp-sp-2); margin-top: var(--pp-sp-2); }
.vl-live-ok { font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.vl-live-fz { font-size: var(--pp-fs-mini); color: var(--pp-err); }
.vl-live-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-2); color: var(--pp-text); }

/* ---------- Touch und Telefon: 44er Ziele, kein Zoom ins Feld ----------
   iOS zoomt in jedes Feld unter 16 px — mitten in der Vorlesung kippte
   dabei die ganze Seite. */
@media (pointer: coarse) {
  .vl-live-auf, .vl-live-chip, .vl-live-feld { min-height: 44px; }
  .vl-live-senden { min-width: 44px; }
  .vl-live-feld { font-size: var(--pp-fs-gross); }
}
.vl-root.vl-schmal .vl-live-in { flex-direction: column; align-items: stretch; }
.vl-root.vl-schmal .vl-live-kopf { display: flex; width: 100%; }
.vl-root.vl-schmal .vl-live-auf { min-height: 44px; flex: none; }
.vl-root.vl-schmal .vl-live-koerper { display: flex; flex-direction: column; align-items: stretch; gap: var(--pp-sp-2); }
.vl-root.vl-schmal .vl-live.zu .vl-live-koerper { display: none; }
.vl-root.vl-schmal .vl-live-form { flex: none; }
.vl-root.vl-schmal .vl-live-feld, .vl-root.vl-schmal .vl-live-chip { min-height: 44px; font-size: var(--pp-fs-gross); }
.vl-root.vl-schmal .vl-live-chip { font-size: var(--pp-fs-klein); }
.vl-root.vl-schmal .vl-live-senden { min-width: 44px; min-height: 44px; }
.vl-root.vl-schmal .vl-live-karten { max-height: 30vh; }
/* N33-08 (14.10.2026): Telefon hoch, aufgeklappt mit zwei Karten blieben
   Folien 91 px und Heft 149 px (gemessen in der App, iPhone 402 × 874;
   WebKit mit Hülle und Safe Area dasselbe) — Kopf, Feld, zwei Knopfzeilen
   und 30 vh Karten standen ÜBEReinander (Bereich 414 px). Jetzt:
   - Feld und Knöpfe teilen EINE Zeile (bis UI1015-U6 „Was war das?" —
     den Knopf gibt es nicht mehr),
   - der ganze aufgeklappte Körper hat höchstens 24 vh, nur die Karten
     rollen darin (die neueste steht oben),
   - die Folien geben solange Platz ans Heft ab (28 % statt 38 % des
     Körpers) — mitgeschrieben wird im Heft.
   Gemessen (docs/N33-FIX-2026-10-14.md): Folien + Heft bekommen wieder
   gut die Hälfte der Seite. */
.vl-root.vl-schmal .vl-live:not(.zu) .vl-live-koerper {
  flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start;
  max-height: 24vh; min-height: 0; overflow: hidden;
}
.vl-root.vl-schmal .vl-live-form { flex: 1 1 120px; }
/* sim1016 A7-06 (iPhone 390 × 844, Aufnahme läuft, Mitdenken auf: der Fuß
   nahm 242–259 px, das Dokument 426): „Erstellen ▾" und der Schalter „Alle
   3 Minuten zusammenfassen" teilen EINE Zeile statt je einer eigenen — das
   Erstellte bricht darunter über die ganze Breite um. */
.vl-root.vl-schmal .vl-live:not(.zu) .vl-live-koerper > .vl-live-erstellen:not([hidden]) { display: contents; }
.vl-root.vl-schmal .vl-live:not(.zu) .vl-live-koerper > .vl-live-erstellen > .vl-live-erstellt { flex: 1 1 100%; order: 1; }
.vl-root.vl-schmal .vl-live:not(.zu) .vl-live-koerper > .vl-live-laeufer { flex: 1 1 0; min-width: 0; }
.vl-root.vl-schmal .vl-live:not(.zu) .vl-live-koerper > .vl-live-form { order: 2; flex-basis: 100%; }
.vl-root.vl-schmal .vl-live:not(.zu) .vl-live-koerper > .vl-live-karten, .vl-root.vl-schmal .vl-live:not(.zu) .vl-live-koerper > .vl-live-unten { order: 3; }
.vl-root.vl-schmal .vl-live:not(.zu) .vl-live-karten { flex: 1 1 100%; max-height: calc(24vh - 52px); }
.vl-root.vl-schmal:has(> .vl-bot > .vl-live:not(.zu):not([hidden])) .vl-folien { flex-basis: 28%; }

/* ---------- Telefon quer: der Knopf in der einen Zeile, das Feld auf Klick ---------- */
.vl-root.vl-quer .vl-live { flex: none; order: -1; position: relative; }
.vl-root.vl-quer .vl-live-satz, .vl-root.vl-quer .vl-live-wort { display: none; }
.vl-root.vl-quer .vl-live-koerper {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--pp-sp-2);
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; width: min(380px, 70vw); max-height: 70vh; overflow-y: auto;
  padding: var(--pp-sp-2); border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-surface); box-shadow: var(--pp-lift);
}
.vl-root.vl-quer .vl-live.zu .vl-live-koerper { display: none; }
.vl-root.vl-quer .vl-live-karten { max-height: none; }

/* ---------- UI1015-U6 (15.10.2026): die rechte Spalte nach der Aufnahme ----------
   docs/UI1015-U6-2026-10-15.md. Ohne Aufnahme an einer Veranstaltung steht
   unter dem Feld „Erstellen ▾" und direkt dahinter, was dafür schon entstand
   (die Liste „Schon erstellt" der Automatik, ihre Zeilen in der Gestalt aus
   css/prepp.css .pp-auto-erz). Breit klappt der Zählerknopf nur die Antworten
   (.karten-zu) und tritt zurück (kein Akzent: er ist nicht mehr der Name des
   Bereichs — den trägt der Reiter); eng bleibt er die Schublade (.zu, oben). */
.vl-live-erstellen { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--pp-sp-1); min-width: 0; }
.vl-live-erstellen .vl-live-erstellen-k { flex: none; }
.vl-live-erstellt { align-self: stretch; min-width: 0; }
.vl-live-erstellt:empty { display: none; }
@media (pointer: coarse) { .vl-live-erstellen .vl-live-erstellen-k { min-height: 44px; } }
.vl-live.karten-zu .vl-live-karten { display: none; }

/* ---------- UI1015-FIX-F (16.10.2026): oben Aufnahme + Erstellen, unten die Antworten ----------
   docs/UI1015-FIX-F-2026-10-16.md. Jonas: „Aufnahme" und „Erstellen ▾" GANZ
   OBEN nebeneinander, darunter das Erstellte als Punkte, unterstrichen wie
   Links (ohne Kasten); „Antworten · n" eine Textzeile ohne Kasten GANZ UNTEN,
   die Karten klappen darunter auf. js/vorlesung-live.js ortsWechsel stellt
   die Knoten breit so; eng (Telefon) bleibt der Kopf die Schublade.
   - Im Kopf ist die Gruppe „Erstellen" nur Hülle (display: contents): Der
     Knopf steht in der Zeile neben „Aufnahme", die Liste bricht als eigene
     Zeile darunter um — über die ganze Breite, nicht eingerückt hinter dem
     Platz der Aufnahme. Zu schmal für beide Knöpfe: Der Kopf bricht um,
     nichts läuft über (flex-wrap oben). */
.vl-live-kopf > .vl-live-erstellen { display: contents; }
.vl-live-kopf > .vl-live-erstellen > .vl-live-erstellt { flex: 1 1 100%; }
/* Die Punkte: die Zeilen der Automatik (css/prepp.css .pp-auto-erz) ohne
   Rahmen und Fläche; was sich öffnen lässt, ist unterstrichen wie ein Link,
   was noch entsteht, nicht (es lässt sich noch nicht öffnen). Die Art steht
   leise davor, nicht als Großbuchstaben-Kasten. */
.vl-live-erstellt .pp-auto-erz-liste { gap: 0; }
.vl-live-erstellt .pp-auto-erz {
  position: relative; display: block; width: 100%; box-sizing: border-box; padding: 3px 0 3px 14px;
  border: 0; border-radius: 0; background: none; color: var(--pp-text); text-align: left; line-height: var(--pp-lh-knapp);
}
.vl-live-erstellt .pp-auto-erz::before { content: "•"; position: absolute; left: 3px; top: 3px; color: var(--pp-text-2); }
.vl-live-erstellt .pp-auto-erz-art { margin-right: 4px; color: var(--pp-text-2); font-size: var(--pp-fs-mini); text-transform: none; letter-spacing: 0; }
.vl-live-erstellt .pp-auto-erz-art::after { content: " ·"; }
.vl-live-erstellt button.pp-auto-erz .pp-auto-erz-t {
  color: var(--pp-accent-2); text-decoration: underline; text-decoration-color: var(--pp-accent-line); text-underline-offset: 2px;
}
.vl-live-erstellt button.pp-auto-erz:hover { background: none; border-color: transparent; }
.vl-live-erstellt button.pp-auto-erz:hover .pp-auto-erz-t { text-decoration-color: currentColor; }
.vl-live-erstellt button.pp-auto-erz:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
.vl-live-erstellt .pp-auto-erz.laeuft { border-style: none; }
@media (pointer: coarse) { .vl-live-erstellt .pp-auto-erz { padding-top: 10px; padding-bottom: 10px; } .vl-live-erstellt .pp-auto-erz::before { top: 10px; } }
/* Die Zeile „Antworten · n" ganz unten: ein Textknopf mit ▸/▾ vorn, ohne
   Rahmen, Fläche und Knopf-Gestalt; daneben der Satz („antwortet …"). */
.vl-live-unten { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--pp-sp-2); min-width: 0; }
.vl-live-auf[data-vll-art="breit"] {
  min-height: 24px; padding: 0; gap: 5px; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--pp-text-2); font-weight: 600;
}
.vl-live-auf[data-vll-art="breit"] .vl-live-pfeil { order: -1; width: 1em; font-size: var(--pp-fs-klein); }
.vl-live-auf[data-vll-art="breit"]:hover { color: var(--pp-text); }
@media (pointer: coarse) { .vl-live-auf[data-vll-art="breit"] { min-height: 44px; } }

/* ---------- bf1022-M (22.10.2026): ⋯, Jetzt, Eigene, Bearbeiten ----------
   Das ⋯ von Mitdenken (Einstellung „In Notiz übernehmen") steht am Ende
   des Kopfs; das ⋯ einer Karte rechts in ihrer Kopfzeile. Beide leise, wie
   die Griffe — sie sind Wege, keine Aufforderungen. */
.vl-live-mehr, .vl-live-kmenue {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 4px;
  border: 0; border-radius: 4px; background: none; color: var(--pp-text-2); font: inherit; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng); cursor: pointer;
}
/* Das Zeichen als Pseudo-Inhalt: Der Text der Karte (textContent, Vorlesen)
   bleibt ihr Inhalt — der Name des Knopfs steht im aria-label. */
.vl-live-pkt::before { content: "⋯"; }
.vl-live-mehr { margin-left: auto; }
/* Das ⋯ der Karte sitzt in ihrer rechten oberen Ecke — in der Kopfzeile
   bräche es (44 px am Finger) sonst in eine eigene Zeile. */
.vl-live-karte { position: relative; }
.vl-live-kmenue { position: absolute; top: 2px; right: 2px; }
.vl-live-karte:has(> .vl-live-kk > .vl-live-kmenue) > .vl-live-kk { padding-right: 28px; }
@media (pointer: coarse) { .vl-live-karte:has(> .vl-live-kk > .vl-live-kmenue) > .vl-live-kk { padding-right: 40px; } .vl-live-kmenue { top: -4px; right: -4px; } }
/* Hinter dem Schalter eingehängt (jetztNachziehen): so breit wie nötig. */
.vl-live-laeufer > .vl-live-jetzt { flex: 0 1 auto; }
.vl-live-mehr:hover, .vl-live-kmenue:hover, .vl-live-kmenue.pp-ctx-offen, .vl-live-mehr.pp-ctx-offen { background: var(--pp-accent-tint); color: var(--pp-accent-2); }
.vl-live-mehr:focus-visible, .vl-live-kmenue:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
.vl-live-mehr[hidden], .vl-live-jetzt[hidden], .vl-live-jetzt [hidden], .vl-live-eigen[hidden] { display: none; }
@media (pointer: coarse) { .vl-live-mehr, .vl-live-kmenue { min-width: 44px; height: 44px; } }
/* „Jetzt zusammenfassen" · „+ Eigene" — direkt unter dem Schalter, eine Zeile. */
.vl-live-jetzt { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-1) var(--pp-sp-2); min-width: 0; }
.vl-live-jetzt-satz { flex: 1 1 100%; min-width: 0; color: var(--pp-text-2); font-size: var(--pp-fs-mini); line-height: var(--pp-lh-text); overflow-wrap: anywhere; }
.vl-live-jetzt-satz:empty { display: none; }
.vl-live-jetzt .pp-btn:disabled { opacity: .6; cursor: progress; }
@media (pointer: coarse) { .vl-live-jetzt .pp-btn { min-height: 44px; } }
/* Die Felder: Eigene Zusammenfassung und das Bearbeiten einer Karte. */
.vl-live-eigen, .vl-live-bearb { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--pp-sp-1); min-width: 0; margin: 0; }
.vl-live-eigen-feld, .vl-live-bearb-feld {
  width: 100%; box-sizing: border-box; min-height: 4.5em; resize: vertical; padding: 6px 8px;
  border: 1px solid var(--pp-line-feld); border-radius: 6px; background: var(--pp-bg); color: var(--pp-text);
  font: inherit; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-knapp);
}
.vl-live-eigen-feld:focus-visible, .vl-live-bearb-feld:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
.vl-live-bearb-k { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-1) var(--pp-sp-2); font-size: var(--pp-fs-mini); }
@media (pointer: coarse) { .vl-live-eigen-feld, .vl-live-bearb-feld { font-size: var(--pp-fs-gross); } .vl-live-bearb-k .pp-btn { min-height: 44px; } }
/* Die eigene Karte trägt ihren Strich in der Farbe der Fragen — sie ist von dir, nicht von der KI. */
.vl-live-karte.eigen { border-left: 3px solid var(--pp-warn); }
/* „Zusammenfassung gelöscht · Rückgängig" an der Stelle der Karte (WEG_MS). */
.vl-live-weg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pp-sp-1) var(--pp-sp-2);
  padding: var(--pp-sp-1) var(--pp-sp-3); border: 1px dashed var(--pp-line); border-radius: 8px; color: var(--pp-text-2); font-size: var(--pp-fs-klein); }
@media (pointer: coarse) { .vl-live-weg .pp-btn { min-height: 44px; } }