/* ===================================================================== PrepP — „Vorlesung live" (Paket P7, 13.10.2026, js/vorlesung.js) --------------------------------------------------------------------- Seit dem 13.10.2026 abends eine SEITE im Portal (#vorlesung/…, Muster .hf-ansicht des Hefts): randlos, so hoch wie das Fenster unter der Kopfzeile (--vl-oben misst js/vorlesung.js), Tokens --pp-*, hell und dunkel aus denselben Variablen. Kein Vollbild mehr: Seitenleiste und Kopfzeile bleiben, man kann die Seite verlassen, und der Lauf läuft weiter — der Chip .vl-chip (am body, unten links, UNTER dem Aufnahme-Fenster z 135) führt zurück. Drei Spalten: Folien · Heft · Marken; unten die Leiste. „Nur Heft" (vl-nurheft) nimmt die Folien weg. Auf dem Telefon (vl-schmal — die Klasse setzt js/vorlesung.js aus innerWidth; die Media-Query steht zusätzlich für den Fall, dass die Klasse zu spät kommt) stapeln Folien und Heft; iPad hoch (vl-hoch) stellt sie nebeneinander. In beiden wird die Marken-Spalte ein aufklappbares Feld. ===================================================================== */ .pp-page.vl-root { max-width: none; margin: 0; padding: 0; position: relative; height: calc(100vh - var(--vl-oben, 54px)); height: calc(100dvh - var(--vl-oben, 54px)); display: flex; flex-direction: column; min-height: 0; background: var(--pp-bg); color: var(--pp-text); font-family: var(--pp-ui); font-size: var(--pp-fs-klein); } .pp-page.vl-root.vl-leer-seite { height: auto; padding: 26px 30px; } /* ---------- Der Chip des laufenden Laufs (ohne offene Ansicht) ---------- MITSCHRIFT-R4 (13.10.2026): Er wohnt in der Kopfzeile (#pp-vl-wirt, js/app.js) in der Gestalt des Aufnahme-Chips daneben — vorher schwebte er unten links über Inhalt und unter dem Aufnahme-Fenster (p3 #6). Solange die Mitschrift aufnimmt, ruht der Aufnahme-Chip (body.vl-lauf): EINE Uhr, EIN Rückweg. Ohne Portal-Kopf steht er frei am body (vl-chip-frei). */ #pp-vl-wirt { position: relative; display: inline-flex; align-items: center; min-width: 0; } #pp-vl-wirt:empty { display: none; } /* MITSCHRIFT-M1 (14.10.2026): Der Aufnahme-Chip ruht NICHT mehr, solange die Mitschrift aufnimmt — er IST jetzt der rote Punkt in der Kopfleiste (nach 2 s zu, antippen klappt Zeit, Pause/Weiter und Stopp auf). Die Uhr steht damit nur einmal offen da (p1 B15 bleibt erfüllt). */ .vl-chip { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-width: 32px; height: 30px; padding: 0 10px; white-space: nowrap; border-radius: 6px; border: 1px solid var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); font-family: var(--pp-ui); font-size: var(--pp-fs-mini); font-weight: 600; cursor: pointer; } /* 44 px Ziel ohne 44 px Kasten (Muster .au-chip). */ .vl-chip::after { content: ""; position: absolute; inset: -7px -4px; } .vl-chip:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; } .vl-chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-text-3); } .vl-chip[data-phase="nimmtAuf"] i { background: var(--pp-err); } .vl-chip[data-phase="pausiert"] i, .vl-chip[data-phase="unterbrochen"] i { background: var(--pp-warn); } body.pp-anim .vl-chip[data-phase="nimmtAuf"] i { animation: vl-puls 1.6s ease-in-out infinite; } .vl-chip .pp-num { font-family: var(--pp-mono); font-weight: 500; color: var(--pp-text-2); font-variant-numeric: tabular-nums; } .vl-chip.vl-chip-frei { position: fixed; left: 16px; bottom: 16px; z-index: 134; height: auto; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--pp-surface); box-shadow: var(--pp-lift); font-size: var(--pp-fs-klein); } .vl-chip.vl-chip-frei::after { inset: 0; } /* WO2 (web1014 D1-02): In der Prüfungsansicht (body ohne pp-mode) liegt unten die 54-px-Leiste mit „OVERVIEW" (css/exam.css .exam-bottom) — der freie Chip steht darüber statt darauf. */ body:not(.pp-mode) .vl-chip.vl-chip-frei { bottom: calc(54px + 12px + env(safe-area-inset-bottom, 0px)); } /* Telefon und Touch: ein echtes 44er Ziel wie der Aufnahme-Chip (dieselbe Abfrage); das Wort geht, ▶ und Zeit bleiben — unter 400 px auch die Zeit (p3 #10: der Chip schob „?" bei 360 px in eine zweite Kopfzeile). */ @media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) { .vl-chip { min-width: 44px; height: 44px; } .vl-chip::after { inset: 0; } } @media (max-width: 700px) { .vl-chip .vl-chip-t { display: none; } } @media (max-width: 400px) { .vl-chip .pp-num { display: none; } } /* sim1016-R6 (A7-02): Die Schwelle 400 px ließ das iPhone 16 Pro (402 px) durch — dort stand „● 00:01:26" im Kopf, und „?" rutschte unter ☰ (6 px Überlauf). Auf dem Finger gilt dieselbe Schwelle wie für die Uhr des Aufnahme-Chips (css/prepp.css, 440 px: jedes iPhone hochkant). */ @media (pointer: coarse) and (max-width: 440px) { .vl-chip .pp-num { display: none; } } /* sim1016-R6 (A1-14): Läuft die Aufnahme und man hat die Arbeitsumgebung verlassen, standen zwei GLEICHE rote Punkte im Kopf — der Rückweg (dieser Chip, ohne sein Wort unter 700 px) und der Aufnahme-Punkt. Steht der Aufnahme-Chip daneben, zeigt der Rückweg ein ▶ (wie sein Wort „▶ Arbeitsumgebung"); der Zustand bleibt Sache des roten Punkts. */ @media (max-width: 700px) { .pp-mtop-status:has(.au-chip) .vl-chip i, .pp-top:has(.au-chip) .vl-chip i { width: 0; height: 0; border-radius: 0; background: none; animation: none; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } } /* ---------- Kopfzeile ---------- UI1015-U5 (15.10.2026, Jonas): Die Seite hat keine eigene Kopfzeile mehr — Titel und Unterzeile stehen im Seitennamen der Portal-Kopfzeile (.vl-kopf-hier, unten), „‹ Verlassen", „■ Beenden" und „Veranstaltung zuordnen" sind weg. .vl-top ist nur noch die Zeile des Lesemodus („Nur lesen" · „✎ Bearbeiten", .vl-top-lesen). Mit ihr gingen der Titel (.vl-titel/.vl-meta) und die REC-Anzeige des Telefon-Kopfs (.vl-rec, .vl-rec-knopf) — REC trägt in jeder Lage der rote Punkt der Kopfleiste. */ .vl-top { flex: 0 0 auto; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--pp-line); background: var(--pp-surface); flex-wrap: wrap; row-gap: 6px; } @keyframes vl-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .vl-rec-satz { font-family: var(--pp-ui); font-weight: 400; font-size: var(--pp-fs-mini); color: var(--pp-text-3); } .vl-rec-satz:empty { display: none; } .vl-ans { display: inline-flex; gap: 4px; margin-left: auto; } .vl-ans .pp-btn.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); } .vl-nur-schmal { display: none; } /* Lange und kurze Beschriftung desselben Knopfs: auf Handybreite die kurze (zwei Zeilen Kopf, zwei Zeilen Leiste statt je drei — gemessen 132/124 px). */ .vl-kurz { display: none; } .vl-root.vl-schmal .vl-lang { display: none; } .vl-root.vl-schmal .vl-kurz { display: inline; } .vl-seite-zu { position: absolute; right: 8px; top: 8px; } /* ---------- Körper: drei Spalten ---------- */ .vl-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; } .vl-folien, .vl-heft { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .vl-folien { border-right: 1px solid var(--pp-line); outline: none; } .vl-folien:focus-visible { box-shadow: inset 0 0 0 2px var(--pp-accent-line); } .vl-seite { flex: 0 0 240px; min-width: 0; min-height: 0; overflow: auto; padding: 10px 12px; border-left: 1px solid var(--pp-line); background: var(--pp-surface); } .vl-seite h4 { margin: 8px 0 6px; font-size: var(--pp-fs-mini); letter-spacing: .4px; text-transform: uppercase; color: var(--pp-text-3); font-weight: 600; } .vl-seite h4:first-child { margin-top: 0; } .vl-pb { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; display: flex; justify-content: center; align-items: flex-start; } .vl-heft-wirt { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; } /* hz1020: Die Lese-Ansicht des zweiten Hefts (lg1019, .vl-heft-lesen*) ist weg — jede Heft-Spalte trägt eine eigene, bedienbare Ansicht (.vl-heft-wirt). */ .vl-heft-wirt > .pp-page.hf-page { flex: 1 1 auto; min-height: 0; } .vl-leer { color: var(--pp-text-3); font-size: var(--pp-fs-klein); padding: 10px; text-align: center; } /* Marken */ .vl-marke { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--pp-line); font-size: var(--pp-fs-klein); } /* UI1015-U6: Jeder Eintrag hat sein Zeichen (◆ Stelle, ? Frage, ✎ Aufgabe — dieselben Farben wie die Knöpfe darüber), den Namen bzw. Text und darunter die Stelle (Zeit · Folie · Heftseite). Eine unbenannte Stelle steht leise „Stelle" (bis bf1022-M stand eine BENANNTE fett). Die Zeile nimmt den Fokus (Menü per Tastatur) und hebt sich beim Überfahren — sie IST das Ding. */ .vl-marke-z { flex: 0 0 auto; min-width: 20px; text-align: center; color: var(--pp-accent-2); } .vl-marke.frage .vl-marke-z { color: var(--pp-warn); } .vl-marke.aufgabe .vl-marke-z { color: var(--pp-accent-2); } .vl-marke-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; } /* bf1022-M (Jonas, 22.10.2026: eine gemerkte Zusammenfassung stand fett und vier Zeilen lang zwischen einzeiligen Fragen): Jeder Eintrag hat dasselbe Gewicht wie die Fragen, und ein langer Text steht auf höchstens drei Zeilen — Antippen klappt ihn auf (.auf, js/vorlesung.js markeAufKlick). Der Text selbst bleibt ganz (gekürzt wird nur die Anzeige). */ .vl-marke-name { color: var(--pp-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .vl-marke.auf .vl-marke-name { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } .vl-marke-name.leer { color: var(--pp-text-2); } .vl-marke.benannt .vl-marke-name { font-weight: 400; } .vl-marke-name .katex { font-size: 1em; } .vl-marke-s { font-size: var(--pp-fs-mini); color: var(--pp-text-3); font-family: var(--pp-mono); } .vl-marke-s:empty { display: none; } .vl-marke[data-vl-mk] { cursor: pointer; border-radius: 4px; } .vl-marke[data-vl-mk]:hover { background: var(--pp-accent-tint); } .vl-marke[data-vl-mk]:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } .vl-marke[data-vl-mk].pp-ctx-offen { background: var(--pp-accent-tint); } /* Auf der Tönung reicht --pp-text-3 nicht (gemessen 4,49 : 1 in WebKit, 11 px). */ .vl-marke[data-vl-mk]:hover .vl-marke-s, .vl-marke[data-vl-mk].pp-ctx-offen .vl-marke-s { color: var(--pp-text-2); } /* „… gelöscht · Rückgängig" — an der Stelle des Eintrags, solange WEG_MS läuft. */ .vl-marke-weg { align-items: center; color: var(--pp-text-2); } .vl-marke-weg .vl-marke-t { flex: 1 1 auto; } .vl-marke-weg .pp-btn { flex: none; } @media (pointer: coarse) { .vl-marke[data-vl-mk] { min-height: 44px; } .vl-marke-weg .pp-btn { min-height: 44px; } } /* Ohne Aufnahme ohne Einträge (js/vorlesung.js markenZeichnen) und die drei Knöpfe ohne Aufnahme (nimmtAufSetzen) tragen `hidden` — gegen die display-Regeln dieser Datei gewinnt es nur ausdrücklich. */ .vl-root [data-vl-marken][hidden], .vl-root [data-vl-stapel-kopf="marken"][hidden], .vl-root .vl-seite-akt[hidden], .vl-root .vl-rl-akt[hidden], .vl-root .vl-bot-vier[hidden] { display: none; } /* ---------- Leiste unten ---------- */ .vl-bot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-top: 1px solid var(--pp-line); background: var(--pp-surface); flex-wrap: wrap; row-gap: 6px; } /* ui1019-U1: Die Transkript-Zeile (.vl-tr, „Teil 17 …") ist weg — die Teile stehen in Mitdenken und in der Notiz. Was sie sonst sagte, ist die Meldung der Aufnahme (js/vorlesung.js aufMeldungHtml): in der Leiste neben „Mitdenken" oder im Aufnahme-Satz der Fußzeile. Sie darf umbrechen — abgeschnitten wäre sie auf dem Telefon nach „Kein Zugriff aufs Mi…" zu Ende. */ .vl-auf-meldung { min-width: 0; white-space: normal; font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng); color: var(--pp-text-3); } .vl-auf-meldung.vl-auf-fehler { color: var(--pp-text-2); } .vl-bot-auf:has(.vl-auf-meldung) { flex: 1 1 320px; } .vl-bot-auf .vl-rec-satz:has(.vl-auf-meldung) { flex: 1 1 auto; min-width: 0; } .vl-live-rec:has(> .vl-auf-meldung) { flex: 1 1 100%; flex-wrap: wrap; gap: var(--pp-sp-1) var(--pp-sp-2); } .vl-live-rec > .vl-auf-meldung { flex: 1 1 100%; } .vl-bot-akt { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } /* ---------- Zwei wählbare Seiten („Beginne ein Event", 13.10.2026 abends) ---------- Links und rechts stehen, was der Dialog wählt: Folien (PDF), Heft, Notiz (das Panel von js/notizen.js), Bild oder leer — dieselben Spalten wie die alte feste Aufteilung (vl-folien links, vl-heft rechts). */ .vl-notiz-wirt { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; } .vl-notiz-wirt > .nz-wirt { flex: 1 1 auto; min-height: 0; } /* AUSBAU-A2 (N24): die Arbeitsfläche als Seite — derselbe Wirt wie im Arbeitsfenster (.sbf-wirt). */ .vl-flaeche-wirt { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; } .vl-flaeche-wirt > .sbf-wirt { flex: 1 1 auto; min-height: 0; } .vl-pb-bild { align-items: center; } .vl-bild { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); } .vl-leer-seite-inhalt { margin: auto; } /* ---------- Nur Heft ---------- */ .vl-root.vl-nurheft .vl-folien { display: none; } /* ---------- Toast (eigen; überlebt das Beenden) ---------- */ .vl-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 160; max-width: min(640px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; background: var(--pp-surface); color: var(--pp-text); border: 1px solid var(--pp-line-2); box-shadow: var(--pp-lift); font-family: var(--pp-ui); font-size: var(--pp-fs-klein); opacity: 0; pointer-events: none; } body.pp-anim .vl-toast { transition: opacity .2s ease, transform .2s ease; } .vl-toast.auf { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } /* sim1016-R6 (A1-07): Die Meldung (z 160, über Dialogen) lag über einem offenen Kontextmenü (#pp-ctx, z 140) und deckte am Telefon dessen unteren Punkt („… in den Papierkorb") ab. Solange ein Menü offen ist, tritt sie zurück. */ body:has(> .pp-ctx:not([hidden])) .vl-toast.auf { opacity: 0; pointer-events: none; } .vl-toast b { display: block; font-weight: 600; } .vl-toast-s { color: var(--pp-text-2); margin-top: 2px; } /* ---------- Kurskopf-Knopf ---------- */ .vl-kopf-wirt:empty { display: none; } .vl-kopf-wirt .pp-dim { font-weight: 400; } /* ---------- Handybreite und iPad hoch: stapeln ---------- Folien oben, Heft unten, die Leiste bleibt; die Marken-Spalte wird ein Feld, das der Knopf „◆ n" aufklappt (seit UI1015-U5 in der Fußzeile). */ .vl-root.vl-schmal .vl-body { flex-direction: column; } .vl-root.vl-schmal .vl-folien { border-right: 0; border-bottom: 1px solid var(--pp-line); flex: 0 0 38%; } .vl-root.vl-schmal .vl-heft { flex: 1 1 auto; } .vl-root.vl-schmal .vl-seite { display: none; } .vl-root.vl-schmal.vl-seite-auf .vl-seite { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 90vw); z-index: 2; box-shadow: var(--pp-lift); padding-top: 44px; } .vl-root.vl-schmal .vl-nur-schmal { display: inline-flex; } .vl-root.vl-schmal .vl-ans { margin-left: 0; } .vl-root.vl-schmal .vl-top { padding: 4px 8px; gap: 6px; } .vl-root.vl-schmal .vl-rec-txt { display: none; } .vl-root.vl-schmal .vl-rec-satz:not(:has(button)):not(:has(.vl-auf-fehler)) { display: none; } /* sim1016-R2 (B2-03): Nimmt ein ANDERES Gerät auf, sagt „Trotzdem hier aufnehmen" darunter, warum — in den engen Lagen, wo der Satz der Leiste (.vl-rec-txt) ausgeblendet ist. Sonst bleibt die Zeile weg. */ .vl-woanders-unter { display: none; } .vl-root.vl-schmal .pp-btn:has(> .vl-woanders-unter), .vl-root.vl-quer .pp-btn:has(> .vl-woanders-unter) { flex-direction: column; gap: 0; line-height: var(--pp-lh-knapp); white-space: normal; text-align: center; } .vl-root.vl-schmal .vl-woanders-unter, .vl-root.vl-quer .vl-woanders-unter { display: block; font-size: var(--pp-fs-mini); font-weight: 400; color: var(--pp-text-2); } .vl-root.vl-schmal .vl-bot { padding: 6px 8px; gap: 6px; } .vl-root.vl-schmal .vl-bot-akt { margin-left: 0; width: 100%; justify-content: space-between; } .vl-root.vl-schmal .vl-bot-akt .pp-btn { flex: 1 1 auto; justify-content: center; } /* ---------- iPad hoch: Folien und Heft nebeneinander, Marken eingeklappt ---------- Jonas' Entscheidung vom 13.10.: je halb (≈ 417 px bei 834), die Marken- Spalte klappt der Knopf „◆ n" (Fußzeile, UI1015-U5) als Feld über dem Heft auf. ◆ Marke und ? Frage stehen weiter in der Leiste. */ .vl-root.vl-hoch .vl-body { position: relative; } .vl-root.vl-hoch .vl-seite { display: none; } .vl-root.vl-hoch.vl-seite-auf .vl-seite { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 90vw); z-index: 2; box-shadow: var(--pp-lift); padding-top: 44px; } .vl-root.vl-hoch .vl-nur-schmal { display: inline-flex; } /* Dieselbe Regel wie lageNoetig(): gestapelt bis 600 px (Telefon) und quer unter 760 px. */ @media (max-width: 600px), (max-width: 759px) and (orientation: landscape) { .vl-root .vl-body { flex-direction: column; } .vl-root .vl-folien { border-right: 0; border-bottom: 1px solid var(--pp-line); flex: 0 0 38%; } .vl-root .vl-seite { display: none; } .vl-root.vl-seite-auf .vl-seite { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 90vw); z-index: 2; box-shadow: var(--pp-lift); padding-top: 44px; } .vl-root .vl-nur-schmal { display: inline-flex; } .vl-root .vl-lang { display: none; } .vl-root .vl-kurz { display: inline; } } /* … und nebeneinander hochkant von 601 bis 1099 px (iPad hoch). */ @media (min-width: 601px) and (max-width: 1099px) and (orientation: portrait) { .vl-root .vl-body { position: relative; } .vl-root .vl-seite { display: none; } .vl-root.vl-seite-auf .vl-seite { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 90vw); z-index: 2; box-shadow: var(--pp-lift); padding-top: 44px; } .vl-root .vl-nur-schmal { display: inline-flex; } } /* Finger: 44 px Trefferfläche (WebKit-Abnahme 13.10. abends — vorher 40 px, „‹ ›" 34 px breit, „Folien wählen …" 30 px hoch). */ @media (hover: none) { .vl-top .pp-btn, .vl-bot .pp-btn, .vl-pb .pp-btn, .vl-seite .pp-btn { min-height: 44px; } .vl-seite-zu { min-width: 44px; justify-content: center; } .vl-pb label.pp-btn { display: inline-flex; align-items: center; } } /* ===================================================================== MITSCHRIFT-R4 (13.10.2026, docs/MITSCHRIFT-R4-2026-10-13.md) — die Schreibfläche zuerst. Gemessen vorher (WebKit): Telefon quer 844 × 390 sah vom Heftblatt 286 × 37 px, Telefon hoch 374 × 152, iPad hoch hatte 107 px Kopf, weil „■ Beenden" in eine zweite Zeile brach. ===================================================================== */ /* (Finger: „‹" und „■" mit 44 px, p3 #11 — beide Knöpfe sind mit UI1015-U5 gegangen, ebenso der Titel mit seinen 72 px, DK-13: er steht im Seitennamen der Portal-Kopfzeile, .vl-kopf-hier.) */ /* Die Zeile des Lesemodus bleibt in den engen Lagen EINE Zeile. */ .vl-root.vl-hoch .vl-top, .vl-root.vl-schmal .vl-top, .vl-root.vl-quer .vl-top { flex-wrap: nowrap; } .vl-root.vl-hoch .vl-top > *, .vl-root.vl-schmal .vl-top > *, .vl-root.vl-quer .vl-top > * { flex-shrink: 0; } /* iPad hoch: kurze Beschriftungen im Kopf; die Leiste in EINER Zeile (vorher 82 px, zwei Zeilen). */ .vl-root.vl-hoch .vl-top .vl-lang { display: none; } .vl-root.vl-hoch .vl-top .vl-kurz { display: inline; } .vl-root.vl-hoch .vl-bot { flex-wrap: nowrap; } .vl-root.vl-hoch .vl-bot-akt { flex: none; } /* Telefon hoch: Von der Ansicht-Wahl steht nur der Knopf, der umschaltet; die Leiste ist eine Zeile (ein Grund, warum nichts aufnimmt, bleibt — ui1019-U1, Regel bei .vl-rec-satz oben). */ .vl-root.vl-schmal .vl-ans .pp-btn.on { display: none; } /* … und die Knöpfe in EINER Zeile (gemessen 390 px: mit „Tasche" brachen sie in eine zweite, die Leiste war 107 px hoch). */ .vl-root.vl-schmal .vl-bot-akt { flex-wrap: nowrap; gap: 4px; } .vl-root.vl-schmal .vl-bot-akt .pp-btn { min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; } /* W4-11 (QA1013-Q09): bei 360 px waren die Zeichenknöpfe 40 × 44 — auf Touch mindestens 44 breit (gemessen: die Reihe bleibt einzeilig). */ @media (pointer: coarse) { .vl-root.vl-schmal .vl-bot-akt .pp-btn { min-width: 44px; justify-content: center; } } /* Telefon QUER (vl-quer): Die Leiste steht OBEN, nur mit Zeichen (◆ § ? ✎, der Name steht in aria-label), Folien | Heft nebeneinander, die Marken als Feld wie auf dem iPad hoch. Bis UI1015-U5 teilte sie sich die Zeile mit dem Kopf der Seite; ohne ihn (vl-ohne-kopf) hat sie die Zeile für sich — nur die Zeile des Lesemodus teilt sie noch. */ .vl-root.vl-quer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); } .vl-root.vl-quer .vl-top { grid-column: 1; grid-row: 1; padding: 4px 8px; gap: 6px; } .vl-root.vl-quer .vl-bot { grid-column: 2; grid-row: 1; border-top: 0; border-bottom: 1px solid var(--pp-line); padding: 4px 8px 4px 0; gap: 4px; flex-wrap: nowrap; } .vl-root.vl-quer.vl-ohne-kopf .vl-bot { grid-column: 1 / -1; padding-left: 8px; } .vl-root.vl-quer .vl-body { grid-column: 1 / -1; grid-row: 2; flex-direction: row; position: relative; } .vl-root.vl-quer .vl-folien { flex: 1 1 0; border-bottom: 0; border-right: 1px solid var(--pp-line); } .vl-root.vl-quer .vl-heft { flex: 1 1 0; } .vl-root.vl-quer .vl-bot .vl-auf-meldung, .vl-root.vl-quer .vl-wort, .vl-root.vl-quer .vl-rec-txt, .vl-root.vl-quer .vl-lang { display: none; } .vl-root.vl-quer .vl-kurz { display: inline; } .vl-root.vl-quer .vl-ans .pp-btn.on { display: none; } .vl-root.vl-quer .vl-ans { margin-left: 0; } .vl-root.vl-quer .vl-bot-akt { margin-left: 0; flex-wrap: nowrap; } .vl-root.vl-quer .vl-bot-akt .pp-btn { min-width: 44px; justify-content: center; } .vl-root.vl-quer .vl-seite { display: none; } .vl-root.vl-quer.vl-seite-auf .vl-seite { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 90vw); z-index: 2; box-shadow: var(--pp-lift); padding-top: 44px; } .vl-root.vl-quer .vl-nur-schmal { display: inline-flex; } /* body.vl-voll (js/vorlesung.js koerperKlassen: Telefon, kürzere Seite < 640 px, und iPad quer, WF5) — bis UI1015-U5 ruhten hier BEIDE Köpfe des Portals (126 px, zwei Leisten, p3 #4), und „‹ Verlassen" im Kopf der Seite führte hinaus. Den Kopf der Seite gibt es nicht mehr (Jonas: Titel und Unterzeile in die Kopfzeile des Portals, „‹ Verlassen" und „■ Beenden" weg). Also ruht nur noch die Zeile der KI-Chats; es bleibt die Zeile mit dem Seitennamen (Titel der Veranstaltung, gekürzt), dem roten Punkt der Aufnahme und ☰ — der Weg hinaus: - Telefon (Statusgruppe oben in .pp-mtop, H1): die Zeile 2 ruht (Chats, ☑ Heute) — EINE Zeile von 53 px, so hoch wie vorher der Kopf der Seite. - iPad quer (ohne Statusgruppe oben): Die Chat-Reiter in .pp-top ruhen — mit ihnen bräche .pp-top in zwei Zeilen (KI-Leiste mit flex-basis 100 %). Und WF5 (Jonas F12: „EINE Kopfzeile wie am Telefon") bleibt: Über .pp-top läge sonst die Portal-Leiste (Marke + ☰) als zweite Zeile — 65 + 61 px statt der 57 px des alten Kopfs der Seite, gemessen in WebKit an 1112 × 834. Von ihr bleibt nur das ☰ (der Weg hinaus, auch in der Home-Bildschirm-App ohne Zurück-Taste): oben rechts ÜBER .pp-top, die dafür rechts Platz hält; die Marke ruht. Verankert an .pp-root — in der Hülle beginnt es unter der Safe Area. Am Telefon steht die Statusgruppe ohnehin IN der Portal-Leiste (.pp-mtop-status-da, H1) — dort nichts davon. PAKET D (17.10.2026, Jonas: „Die Chat-Leiste wird in der Arbeitsfläche nicht angezeigt, sie soll aber trotzdem angezeigt werden … über die oberste Leiste von PrepP geschoben"): Die Zeile der KI-Chats ruht nicht mehr, sie LIEGT AUF der Statuszeile — gleiche Höhe, also kein Pixel Blatt weniger. Telefon: die zweite Zeile (Chats + ☑ Heute) steht fest oben über `.pp-mtop` (z 22 über 21). iPad quer: die Leiste füllt `.pp-top` bis vor das ☰. Die Statuszeile holt js/kopf-scroll.js (Zug am oberen Anschlag, Rad am Rand, Maus an der Kante, Fokus) mit `.pp-root.pp-kopf-status`; nach 2 s ohne Bedienung schiebt sich die Leiste wieder darüber. Ohne KI-Leiste (Gast, KI aus) bleibt es bei U5: die zweite Zeile ruht. Kein transform im Ruhezustand — er machte die Zeile zum Bezugskasten des festen Historie-Aufklappers. */ body.vl-voll .pp-main > .pp-top.pp-top-zeile2:not(:has(> .kf-leiste)) { display: none; } body.vl-voll .pp-main > .pp-top.pp-top-zeile2:has(> .kf-leiste) { position: fixed; top: 0; left: 0; right: 0; z-index: 22; } .pp-huelle body.vl-voll .pp-main > .pp-top.pp-top-zeile2:has(> .kf-leiste) { top: env(safe-area-inset-top, 0px); } /* Die Safe Area zählt nur in der Hülle (viewport-fit=cover); die PWA hat keine, und verify-pwa-0926 hält ihre Statusleiste „default" fest. */ body.vl-voll .pp-main > .pp-top.pp-top-zeile2 .kf-hist { top: 57px; } .pp-huelle body.vl-voll .pp-main > .pp-top.pp-top-zeile2 .kf-hist { top: calc(57px + env(safe-area-inset-top, 0px)); } body.vl-voll .pp-root.pp-kopf-status > .pp-main > .pp-top.pp-top-zeile2, body.vl-voll .pp-root.pp-kopf-status > .pp-main > .pp-top:not(.pp-top-zeile2) > .kf-leiste { transform: translateY(-100%); visibility: hidden; pointer-events: none; } .pp-huelle body.vl-voll .pp-root.pp-kopf-status > .pp-main > .pp-top.pp-top-zeile2, .pp-huelle body.vl-voll .pp-root.pp-kopf-status > .pp-main > .pp-top:not(.pp-top-zeile2) > .kf-leiste { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); } /* ew1020-c (ab1020d Befund 8, S2): Am TELEFON HOCHKANT lag die Chat-Zeile damit fest bei top 0 über `.pp-mtop` — Seitenname (der Link zur Kursseite, „‹ Vorlesung 1"), Suche, ? und ☰ waren unsichtbar, gemessen an 390 × 844: Punkt 360/26 traf „☑ Heute", nicht ☰. Zurück kam ein Neuer nur über die unsichtbare Zuggeste oder den Browser. Hochkant ist Höhe aber nicht knapp (791 px Blatt): Dort steht Zeile 2 wieder UNTER der Statuszeile, wie auf jeder anderen Seite des Telefons (klebend bei 53 px, css/prepp.css H1) — beide sichtbar, das Blatt beginnt 53 px tiefer (--vl-oben misst js/vorlesung.js). Quer (max-height 500, jeder Pixel zählt) bleibt Paket D, aber die Zeile lässt rechts das ☰ der Statuszeile frei (Muster iPad quer: der sichtbare Weg hinaus). iPad: unverändert — dort gibt es keine `.pp-mtop-status-da`. js/kopf-scroll.js `ueberlagert` fragt dieselbe Bedingung (TEL_HOCH_Q). */ @media (orientation: portrait) { body.vl-voll .pp-root:has(> .pp-mtop.pp-mtop-status-da) > .pp-main > .pp-top.pp-top-zeile2:has(> .kf-leiste) { position: sticky; top: 53px; left: auto; right: auto; transform: none; visibility: visible; pointer-events: auto; } .pp-huelle body.vl-voll .pp-root:has(> .pp-mtop.pp-mtop-status-da) > .pp-main > .pp-top.pp-top-zeile2:has(> .kf-leiste) { top: calc(env(safe-area-inset-top, 0px) + 53px); transform: none; } body.vl-voll .pp-root:has(> .pp-mtop.pp-mtop-status-da) > .pp-main > .pp-top.pp-top-zeile2 .kf-hist { top: 110px; } .pp-huelle body.vl-voll .pp-root:has(> .pp-mtop.pp-mtop-status-da) > .pp-main > .pp-top.pp-top-zeile2 .kf-hist { top: calc(110px + env(safe-area-inset-top, 0px)); } } @media (orientation: landscape) { body.vl-voll .pp-root:has(> .pp-mtop.pp-mtop-status-da) > .pp-main > .pp-top.pp-top-zeile2:has(> .kf-leiste) { right: 52px; } } body.pp-anim.vl-voll .pp-main > .pp-top:not(.pp-top-zeile2) > .kf-leiste { transition: transform .26s ease, visibility .26s; } @media (prefers-reduced-motion: reduce) { body.pp-anim.vl-voll .pp-main > .pp-top:not(.pp-top-zeile2) > .kf-leiste { transition: none; } } @media (pointer: coarse) and (max-width: 1200px) { body.vl-voll .pp-root { position: relative; } body.vl-voll .pp-mtop:not(.pp-mtop-status-da) { position: absolute; top: 0; right: 0; z-index: 25; padding: 8px 14px 8px 0; border-bottom: 0; background: transparent; } body.vl-voll .pp-mtop:not(.pp-mtop-status-da) .pp-brand { display: none; } body.vl-voll .pp-main > .pp-top:not(.pp-top-zeile2) { padding-right: 72px; } /* iPad quer: über Seitenname, Lupe und Chips der Zeile, z 31 über dem schwebenden Suchknopf (z 30), unter dem ☰ (z 25 an .pp-root, also außerhalb des Stapels von .pp-top — rechts bleiben dafür die 72 px frei). */ body.vl-voll .pp-main > .pp-top:not(.pp-top-zeile2) > .kf-leiste { position: absolute; left: 0; top: 0; bottom: 0; right: 72px; z-index: 31; height: auto; padding: 0 18px; box-sizing: border-box; background: var(--pp-surface); } } /* Das eingebettete Heft in der Mitschrift: „Foto" und „Bild" vorn in der Leiste (p4 #7: bei 845 px Leiste in 417 px Spalte lagen sie außerhalb, ohne Hinweis) — dahinter wischt die Leiste wie bisher; der Rand rechts blendet aus, solange noch etwas folgt (hf-ueber-rechts, js/heft.js). */ .vl-heft-wirt .hf-leiste > .hf-kopfgruppe { order: -2; } .vl-heft-wirt .hf-leiste > .hf-fotogruppe { order: -1; } /* Der Dialog „Beginne ein Event" führt hierher: Sein „▶ Beginnen" steht immer im Bild (p3 #4: quer 328 px Dialog, Knopf bei y = 403 von 390 — nur nach Rollen im Dialog). */ .pp-va-event .pp-va-knopfreihe { position: sticky; bottom: 0; z-index: 1; margin: 0 -12px -12px; padding: 10px 12px 12px; background: var(--pp-bg-2); border-top: 1px solid var(--pp-line); } /* W4-11 (QA1013-Q09): Die zwei „… in den Kursdateien suchen" waren auf Touch 36 px hoch (Regel der Kursseite, css/prepp.css) — im Dialog 44 px. */ @media (pointer: coarse) { .pp-va-event .pp-va-link { min-height: 44px; } } /* ---------- Safe Area der App-Hülle (QA1013-Q05, A1-10/A1-13) ---------- Nur unter `.pp-huelle` (app/naht/huelle-laufzeit.js). Mit viewport-fit=cover reicht die Seite unter den Home-Indikator: Die Aufnahmeleiste unten, der schwebende Chip und die Meldung stehen darüber. Oben trägt der body den Rand (css/prepp.css), --vl-oben misst ihn mit (js/vorlesung.js). */ .pp-huelle .pp-page.vl-root:not(.vl-leer-seite) { height: calc(100vh - var(--vl-oben, 54px) - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - var(--vl-oben, 54px) - env(safe-area-inset-bottom, 0px)); } /* sim1016-R7 (A7-05): Mit offener Bildschirmtastatur (html.pp-tastatur, --pp-vv-h = sichtbare Höhe — beide setzt EIN Hörer in js/app.js) endet die Arbeitsumgebung über der Tastatur, statt dass iOS die Seite samt Kopf und Reitern unter die Statusleiste rollt. Die Safe Area unten zählt dann nicht: Die Tastatur deckt den Home-Indikator. */ html.pp-tastatur .pp-page.vl-root:not(.vl-leer-seite) { height: calc(var(--pp-vv-h, 100dvh) - var(--vl-oben, 54px)); } .pp-huelle .vl-chip.vl-chip-frei { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); } .pp-huelle .vl-toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } /* ---------- MITSCHRIFT-M1 (14.10.2026): die Aufnahme-Knöpfe im Kopf ---------- UI1015-U5: Die Telefon-Knöpfe im Kopf der Seite (.vl-auf, .vl-rec — Pause, Weiter, Stopp, REC) sind mit dem Kopf gegangen; der rote Punkt der Kopfleiste trägt sie in jeder Lage. Es bleibt der Dialog mit zwei Wegen — seit U5 nur noch beim Wechsel mit laufender Aufnahme (wechselFragen; die Rückfrage „beenden?", beendenFragen, ist weg). */ .vl-ende-wege { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .vl-ende-wege .pp-btn { justify-content: flex-start; text-align: left; white-space: normal; min-height: 44px; } /* ---------- M2 (14.10.2026): Reiter, zwei Spalten, Ziehen, rechte Spalte ---------- docs/MITSCHRIFT-M2-2026-10-14.md. Höchstens zwei Seiten nebeneinander; weitere als Reiter über ihrer Spalte. Eine Spalte ohne Reiter ist weg und erscheint nur beim Ziehen als Ablage. Am Telefon (vl-eins) eine Spalte, deren Leiste alle Reiter trägt. */ .vl-folien, .vl-heft { position: relative; } .vl-reiter { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 2px; padding: 4px 6px 0; min-width: 0; border-bottom: 1px solid var(--pp-line); background: var(--pp-surface); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; /* B1017: der Wisch am Rand der Leiste schiebt nicht die Seite */ } .vl-reiter::-webkit-scrollbar { display: none; } .vl-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; min-height: 32px; padding: 0 12px 0 6px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--pp-text-2); font: inherit; font-size: var(--pp-fs-klein); white-space: nowrap; cursor: grab; /* B1017: pan-x statt none — am Finger rollt ein waagerechter Wisch die Leiste; umgeordnet wird erst nach dem Halten (js/vorlesung.js LANG_MS, zugTouch hält dann das Rollen an). Die Maus kennt touch-action nicht. */ touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .vl-tab:hover { color: var(--pp-text); } /* B1017: angehoben (Finger lag LANG_MS still) — Loslassen öffnet das Menü, Ziehen ordnet um. */ .vl-reiter .vl-tab.vl-tab-gehalten { background: var(--pp-accent-tint); color: var(--pp-accent-2); box-shadow: inset 0 -2px 0 var(--pp-accent); } .vl-tab.on { margin-bottom: -1px; border-color: var(--pp-line); background: var(--pp-bg); color: var(--pp-text); font-weight: 600; } .vl-tab:focus-visible, .vl-plus:focus-visible, .vl-rechts-leiste:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } .vl-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .vl-griff { flex: none; color: var(--pp-text-3); font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng); } .vl-tab-fremd { display: none; } .vl-root.vl-eins .vl-tab-fremd { display: inline-flex; } .vl-tab-zieht { opacity: .45; } .vl-plus { flex: none; align-self: center; min-width: 32px; min-height: 28px; margin: 0 0 3px 4px; padding: 0; border: 1px dashed var(--pp-line); border-radius: 6px; background: transparent; color: var(--pp-text-2); font: inherit; font-size: var(--pp-fs-gross); line-height: var(--pp-lh-eng); cursor: pointer; } .vl-plus:hover, .vl-plus[aria-expanded="true"] { border-style: solid; border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); } .vl-reiter.vl-ablage { background: var(--pp-accent-tint); box-shadow: inset 0 -2px 0 var(--pp-accent); } .vl-pane.vl-ablage { box-shadow: inset 0 0 0 2px var(--pp-accent); } .vl-geist { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; padding: 6px 12px; border-radius: 6px; background: var(--pp-accent); color: #fff; font-size: var(--pp-fs-klein); font-weight: 600; white-space: nowrap; box-shadow: var(--pp-lift); } .vl-root.vl-zieht, .vl-root.vl-zieht * { cursor: grabbing !important; } /* Die leere Spalte: weg — beim Ziehen die Ablage neben der vollen. */ .vl-root .vl-pane-leer { display: none; } .vl-root.vl-zieht:not(.vl-eins) .vl-pane-leer { display: flex; flex: 0 0 min(32%, 280px); align-items: center; justify-content: center; border: 2px dashed var(--pp-accent-line); background: var(--pp-accent-tint); } .vl-pane-leer > .vl-reiter { display: none; } .vl-ablage-satz { margin: auto; color: var(--pp-accent-2); } .vl-root.vl-nurlinks .vl-folien { border-right: 0; } /* Telefon: eine Spalte, die Fokus-Spalte. */ .vl-root.vl-eins .vl-body { flex-direction: column; } .vl-root.vl-eins .vl-folien, .vl-root.vl-eins .vl-heft { flex: 1 1 auto; border: 0; } .vl-root.vl-eins[data-vl-fokus="rechts"] .vl-folien, .vl-root.vl-eins[data-vl-fokus="links"] .vl-heft { display: none; } /* Das „+"-Menü: Notiz, Heft, Fläche — neu oder aus dem Kurs. */ .vl-plus-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 1px; width: min(300px, calc(100vw - 16px)); max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-bg); box-shadow: var(--pp-lift); } .vl-plus-titel { padding: 6px 8px 2px; font-size: var(--pp-fs-mini); letter-spacing: .4px; text-transform: uppercase; color: var(--pp-text-3); font-weight: 600; } .vl-plus-wahl { display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 34px; padding: 6px 8px; text-align: left; border: 0; border-radius: 6px; background: transparent; color: var(--pp-text); font: inherit; font-size: var(--pp-fs-klein); cursor: pointer; } .vl-plus-wahl:hover { background: var(--pp-accent-tint); } /* Ring-Ersatz statt bloßem outline: none (Leitplanke ns0929-p5 Regel 1). */ .vl-plus-wahl:focus-visible { background: var(--pp-accent-tint); outline: none; box-shadow: inset 0 0 0 2px var(--pp-accent); } .vl-plus-zus { color: var(--pp-text-3); font-size: var(--pp-fs-mini); } /* Die rechte Spalte: Marken, darunter Mitdenken; nach rechts einklappbar (Muster der Einsicht: schmale Leiste mit Pfeil und Zähler). Nur in der breiten Lage — in den engen ist sie ein aufklappbares Feld (◆). */ .vl-root.vl-breit .vl-seite { flex-basis: 288px; position: relative; } /* (Der Knopf „›" oben in der Spalte, .vl-rechts-knopf, ist mit der Reiterleiste der Spalte gegangen — Rechte Seitenleiste, 17.10.2026; eingeklappt wird über den Teiler.) */ .vl-rechts-leiste { display: none; } .vl-root.vl-breit.vl-rechts-zu .vl-seite { display: none; } .vl-root.vl-breit.vl-rechts-zu .vl-rechts-leiste { flex: 0 0 36px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; border: 0; border-left: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text-2); font: inherit; font-size: var(--pp-fs-mini); cursor: pointer; } .vl-rechts-leiste:hover { background: var(--pp-accent-tint); color: var(--pp-accent-2); } .vl-rechts-leiste .pp-num { font-family: var(--pp-mono); font-weight: 500; } .vl-rechts-live { margin: 12px 0 8px; } .vl-root .vl-seite .vl-live-in { flex-direction: column; align-items: stretch; } .vl-root .vl-seite .vl-live-kopf { flex-wrap: wrap; } .vl-root .vl-seite .vl-live-form { flex: none; } .vl-root .vl-seite .vl-live-karten { flex: none; max-height: none; overflow: visible; } /* Touch: 44er Ziele für Griff, „+" und Menü. */ @media (hover: none), (pointer: coarse) { .vl-tab { min-height: 44px; } .vl-plus { min-width: 44px; min-height: 40px; } .vl-plus-wahl { min-height: 44px; } .vl-root.vl-breit.vl-rechts-zu .vl-rechts-leiste { flex-basis: 44px; } } /* ===================================================================== MS1 (14.10.2026, docs/MITSCHRIFT-MS1-2026-10-14.md) — Jonas: „Unten rechts die Boxen sollen in die rechte Leiste mit eingebunden werden" und „Die Aufnahme … nur mit einem Punkt angezeigt, wie es bei dem Statuspunkt oben rechts ist". ===================================================================== */ /* Die Kopfleiste steht, solange die Mitschrift offen ist (body.vl-offen, js/vorlesung.js koerperKlassen — nie am Telefon): Sie trägt den roten Punkt, die EINE Stelle der Aufnahme. Befund: Mit „Obere Leiste fixieren" aus fuhr sie nach 2 s weg (js/anim.js pp-kopf-weg), sobald noch kein Chip darin stand — und eine Meldung, die DANACH kam, holte sie nicht zurück. Spezifität (0,5,1) schlägt die Weg-Regel in css/prepp.css (0,5,0). */ body.vl-offen .pp-root.pp-kopf-weg .pp-main > .pp-top { transform: none; margin-bottom: 0; visibility: visible; pointer-events: auto; opacity: 1; } /* (Die zwei Wirte des Kopfs, .vl-top-auf/.vl-top-ende — REC am Telefon, „■ Beenden" — sind mit dem Kopf gegangen, UI1015-U5.) */ /* Fußzeile (seit ui1019-U1 ohne Transkript-Satz, seit fx1019-V1 ohne „Keine Aufnahme"): ohne Aufnahme nur „Aufnahme starten", wenn Mitdenken nicht zu sehen ist, und Sätze mit Inhalt (unterbrochen, Sperre, anderes Gerät, Meldung); die vier und „◆ n" nur in den engen Lagen (die Hüllen .vl-bot-vier/.vl-bot-seite verschwinden für das Flex-Layout der Leiste). */ .vl-bot-auf { display: inline-flex; align-items: center; min-width: 0; } .vl-bot-auf:empty, .vl-bot-auf:has(> .vl-rec-satz:empty) { display: none; } .vl-bot-auf .vl-rec-satz { display: inline-flex; align-items: center; gap: 8px; } .vl-bot-vier, .vl-bot-seite { display: contents; } .vl-bot-akt:not(:has(button:not([hidden]))) { display: none; } /* Rechte Spalte: die vier als EINE Zeile über der Liste. b1015-A (15.10.2026, Jonas: „Die Markierung … soll ein bisschen schön redesigned werden"): statt vier einzelner Kästen mit blau gefülltem ✎ eine ruhige Segmentleiste — EIN Rahmen, Trennlinien, Zeichen über dem Wort. Das Zeichen trägt die Farbe seines Eintrags in der Liste darunter (.vl-marke …-z: ◆/✎ Akzent, § Text, ? Warnung); das Wort steht in --pp-text-2. Hover und Druck als Tint, der Fokus als Ring innen (der Rahmen schneidet ab). Maße aus der Skala (--pp-fs-*, --pp-sp-*), 48 px Ziel. */ .vl-seite-akt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--pp-sp-3); /* UI1015-U6: drei (Stelle merken, Frage, Aufgabe) */ border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-bg); overflow: hidden; } .vl-seite .vl-vier-k { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pp-sp-1); min-width: 0; min-height: 48px; margin: 0; padding: var(--pp-sp-2) var(--pp-sp-1); border: 0; border-left: 1px solid var(--pp-line); border-radius: 0; background: transparent; color: var(--pp-text-2); font-family: var(--pp-ui); line-height: var(--pp-lh-eng); cursor: pointer; } .vl-seite .vl-vier-k:first-child { border-left: 0; } .vl-seite .vl-vier-k:hover { background: var(--pp-accent-tint); color: var(--pp-text); } .vl-seite .vl-vier-k:active { background: var(--pp-accent-tint); box-shadow: inset 0 -2px 0 var(--pp-accent); } .vl-seite .vl-vier-k:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } .vl-vier-z { font-size: var(--pp-fs-gross); line-height: var(--pp-lh-eng); } .vl-seite .vl-vier-k[data-vl="marke"] .vl-vier-z, .vl-seite .vl-vier-k[data-vl="aufgabe"] .vl-vier-z { color: var(--pp-accent-2); } .vl-seite .vl-vier-k[data-vl="frage"] .vl-vier-z { color: var(--pp-warn); } .vl-vier-w { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pp-fs-mini); font-weight: 500; } /* Die Überschrift darüber: das Wort in der Versalzeile der Spalte, die Zahl als ruhige Marke daneben (vorher „(n)" in Versalien). */ .vl-seite h4:has(> .vl-kopf-zahl), .vl-marken-seite h4:has(> .vl-kopf-zahl) { display: flex; align-items: center; gap: var(--pp-sp-2); } .vl-kopf-wort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vl-kopf-zahl { flex: none; min-width: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 999px; text-align: center; background: var(--pp-surface-2); color: var(--pp-text-2); font-family: var(--pp-mono); font-weight: 500; font-size: var(--pp-fs-mini); line-height: 18px; letter-spacing: 0; text-transform: none; } /* ---------- b1015-A: Aufnahme neben „Mitdenken" ---------- Jonas (15.10.2026): „Aufnahme starten" kommt neben „Mitdenken" — der Platz [data-vl-auf-slot] im Kopf von Mitdenken (js/vorlesung.js aufBeiMitdenken). Steht er sichtbar (#vl-root.vl-auf-mitdenken), schweigt der alte Platz, die Fußzeile (bis UI1015-U5 auch der Start im Telefon-Kopf). */ .vl-live-rec { display: inline-flex; align-items: center; min-width: 0; } .vl-live-rec:empty { display: none; } /* UI1015-FIX-F: kein margin-left: auto mehr — „Aufnahme" steht vorn in der Zeile, „Erstellen ▾" direkt daneben (Jonas, 16.10.2026). */ /* In der Vorgabebreite der Spalte (288 px, innen 264) passen „✦ Mitdenken · n ▾" (129 px) und „Aufnahme starten" (135 px) nicht in eine Zeile — gemessen in WebKit. Unter 280 px Breite des Bereichs steht die kurze Fassung „● Aufnahme" (DK-13), darüber die lange; gefragt wird der Bereich, nicht das Fenster. */ .vl-live-in { container: vl-live / inline-size; } @container vl-live (max-width: 279px) { .vl-live-rec .vl-lang { display: none; } .vl-live-rec .vl-kurz { display: inline; } } .vl-root.vl-auf-mitdenken .vl-bot-auf { display: none; } /* UI1015-Fix: die Anzeige „● REC 00:00:00" (.vl-auf-stand) ist weg — den Zustand zeigt der rote Punkt oben. */ @media (hover: none), (pointer: coarse) { .vl-live-rec .pp-btn { min-height: 44px; } } /* Die Fußzeile ohne Inhalt (keine Aufnahme, Mitdenken in der Spalte, keine Auswahl) nimmt keinen Platz — js/vorlesung.js botLeerPruefen. */ .vl-root.vl-bot-leer > .vl-bot { display: none; } /* Eingeklappt: „‹ ◆ n" klappt auf, darunter die vier als Zeichen. Die Leiste selbst ist seit MS1 kein Knopf mehr (vier Knöpfe in einem Knopf wären ungültig), nur noch ihr Kopf. */ .vl-root.vl-breit.vl-rechts-zu .vl-rechts-leiste { cursor: default; gap: 6px; padding: 4px 0 10px; } .vl-rechts-leiste:hover { background: var(--pp-surface); color: var(--pp-text-2); } .vl-rl-auf { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--pp-line); background: none; color: inherit; font: inherit; cursor: pointer; } .vl-rl-auf:hover { background: var(--pp-accent-tint); color: var(--pp-accent-2); } .vl-rl-akt { display: flex; flex-direction: column; align-items: center; gap: 4px; } .vl-rl-k { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--pp-line); border-radius: 6px; background: var(--pp-bg); color: var(--pp-text); font: inherit; font-size: var(--pp-fs-klein); cursor: pointer; } .vl-rl-k:hover { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); } .vl-rl-k.accent { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); } .vl-rl-auf:focus-visible, .vl-rl-k:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } @media (hover: none), (pointer: coarse) { .vl-rl-k { width: 40px; height: 44px; } } /* ---------- MT (14.10.2026): EINE Leiste je Spalte ---------- docs/MITSCHRIFT-MT-REITER-2026-10-14.md. Die Dokumente des Hefts stehen als Reiter in der Leiste der Spalte (Name · Seitenzahl, ⋯ am offenen); die eigene Reiterleiste des Hefts (#hf-doks) zeichnet das Heft hier nicht. Der Reiter ist eine Hülle (span) um zwei Knöpfe — ein Knopf im Knopf ginge nicht. */ .vl-tab.vl-dok { gap: 0; padding: 0 2px 0 0; } .vl-dok-knopf { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: inherit; align-self: stretch; padding: 0 8px 0 6px; border: 0; border-radius: 6px 6px 0 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: inherit; touch-action: pan-x; -webkit-user-select: none; user-select: none; /* B1017: wie .vl-tab */ } .vl-dok-knopf:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } .vl-dok-knopf .vl-tab-name { max-width: 160px; } .vl-dok-art { flex: none; color: var(--pp-text-3); } .vl-tab.vl-dok.on .vl-dok-art { color: var(--pp-accent-2); } /* hz1020 (ab1020b Befund 1): Mit ZWEI Heften trägt die Spalte des aktiven Hefts vl-heft-aktiv — ihr gewählter Dokument-Reiter bekommt die Akzentlinie, der Wirt oben einen Akzentstrich; die andere Spalte zeigt ihren Reiter ruhig. Mit einem Heft steht die Klasse nie. */ .vl-pane.vl-heft-aktiv .vl-tab.vl-dok.on { box-shadow: inset 0 2px 0 0 var(--pp-accent); } .vl-pane.vl-heft-aktiv .vl-heft-wirt { box-shadow: inset 0 2px 0 0 var(--pp-accent); } .vl-dok-n { flex: none; font-family: var(--pp-mono); font-weight: 500; font-size: var(--pp-fs-mini); color: var(--pp-text-3); } /* UI1015-U2: kein ⋯ mehr am Dokument-Reiter — sein Menü kommt per Rechtsklick/Long-Press (iOS: kein Bildmenü/Textauswahl beim Halten). */ .vl-tab { -webkit-touch-callout: none; } .vl-plus-wahl[disabled] { opacity: .5; cursor: default; } @media (hover: none), (pointer: coarse) { .vl-dok-knopf .vl-tab-name { max-width: 120px; } } /* Das „+" bleibt am rechten Rand der Leiste stehen, auch wenn die Reiter (mit den Dokumenten des Hefts) breiter sind als die Spalte und die Leiste wischt — gemessen in WebKit: 390 px Telefon 495 px Reiter, das „+" lag bei x = 445; am Laptop 435 in 378 px. */ .vl-reiter > .vl-plus { position: sticky; right: 0; z-index: 1; background: var(--pp-surface); } /* DK-02: Wer die Leiste per Fokus/Wischen an den rechten Rand bringt, hält die Breite des „+" frei (44 px Ziel + Abstand) — sonst liegt es auf dem ⋯ des offenen Reiters. reiterInsBild rechnet dasselbe für den Rollstand. */ .vl-reiter { scroll-padding-inline-end: 52px; } .vl-reiter > .vl-plus:hover, .vl-reiter > .vl-plus[aria-expanded="true"] { background: linear-gradient(var(--pp-accent-tint), var(--pp-accent-tint)), var(--pp-surface); } /* sim1016 A2-05: „‹ +4" / „+3 ›" — wie viele Reiter außer Sicht liegen; ein Druck blättert weiter. Beide kleben am Rand und nehmen im Fluss keinen Platz (negativer Rand = eigene Breite, MEHR_PX in js/vorlesung.js), damit die Reiter beim Ein- und Ausblenden nicht springen. Rechts steht der Knopf vor dem „+" (--vl-plus-b setzt reiterUeberlauf, gemessen). */ .vl-reiter > .vl-mehr { flex: none; position: sticky; z-index: 2; align-self: stretch; width: 40px; min-height: 32px; padding: 0 2px; margin-bottom: 1px; border: 0; border-radius: 6px 6px 0 0; background: var(--pp-surface); color: var(--pp-accent-2); font: inherit; font-size: var(--pp-fs-klein); font-weight: 600; white-space: nowrap; cursor: pointer; } .vl-reiter > .vl-mehr[hidden] { display: none; } .vl-reiter > .vl-mehr-l { left: 0; margin-right: -40px; box-shadow: -6px 0 0 var(--pp-surface), 8px 0 8px -6px rgba(0, 0, 0, .35); } /* der erste Schatten deckt die 6 px Innenabstand der Leiste */ .vl-reiter > .vl-mehr-r { right: var(--vl-plus-b, 40px); margin-left: -40px; box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .35); } .vl-reiter > .vl-mehr:hover { background: linear-gradient(var(--pp-accent-tint), var(--pp-accent-tint)), var(--pp-surface); } .vl-reiter > .vl-mehr:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } @media (hover: none), (pointer: coarse) { .vl-reiter > .vl-mehr { min-height: 44px; } } /* ===================================================================== MS2 (14.10.2026, docs/MITSCHRIFT-MS2-2026-10-14.md) — Jonas: „Die Fenster an der Seite sollen ineinander verschoben werden können." Marken und Mitdenken sind Seiten der Mitschrift wie Folien und Notiz: per Griff in eine Spalte (als Reiter) und zurück in die rechte Spalte, ihren Heimatort. Wer nichts zieht, sieht die Spalte wie vor MS2 — mit einer Reiterleiste oben (nur in der breiten Lage). ===================================================================== */ /* Die Leiste der rechten Spalte: bündig über die ganze Spaltenbreite (die Spalte hat 10 px / 12 px Innenrand), „›" am Ende statt schwebend. */ /* Seit der Rechten Seitenleiste (17.10.2026) trägt nur noch das Training eine solche Kopfzeile (.vl-training-heim, „✦ Mitdenken ×"); die Vorlesung hat keine Reiterleiste in der Spalte mehr. */ .vl-reiter-heim { margin: -10px -12px 10px; padding: 4px 6px 0; align-items: flex-end; } .vl-root:not(.vl-breit) .vl-reiter-heim { display: none; } .vl-tab-heim { padding-right: 10px; } .vl-tab-zeichen { flex: none; color: var(--pp-accent-2); } .vl-seite [data-vl-stapel="mitdenken"] { margin: 12px 0 8px; } /* Ein Seitenfenster als Seite einer Spalte: rollt für sich, Innenrand wie die rechte Spalte; Mitdenken untereinander (Feld, Knöpfe, Karten). */ .vl-seitenfenster { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 14px; } .vl-seitenfenster > h4 { margin: 0 0 6px; font-size: var(--pp-fs-mini); letter-spacing: .4px; text-transform: uppercase; color: var(--pp-text-3); font-weight: 600; } .vl-root .vl-seitenfenster .vl-live-in { flex-direction: column; align-items: stretch; } .vl-root .vl-seitenfenster .vl-live-kopf { flex-wrap: wrap; } .vl-root .vl-seitenfenster .vl-live-form { flex: none; } .vl-root .vl-seitenfenster .vl-live-karten { flex: none; max-height: none; overflow: visible; } /* Leer gezogen: nur die schmale Leiste (wie eingeklappt, MS1) — ohne „‹" (bis UI1015-U5 dafür „■", Mitschrift beenden …, unter den vier). */ .vl-root.vl-breit.vl-seite-leer .vl-seite { display: none; } .vl-root.vl-breit.vl-seite-leer .vl-rechts-leiste { flex: 0 0 36px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-left: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text-2); font-size: var(--pp-fs-mini); } .vl-root.vl-seite-leer .vl-rl-auf { display: none; } /* Beim Ziehen: Die rechte Spalte (offen, eingeklappt oder leer) ist eine Ablage. */ .vl-seite.vl-ablage, .vl-rechts-leiste.vl-ablage { box-shadow: inset 0 0 0 2px var(--pp-accent); background: var(--pp-accent-tint); } @media (hover: none), (pointer: coarse) { .vl-root.vl-breit.vl-seite-leer .vl-rechts-leiste { flex-basis: 44px; } } /* ===================================================================== MS3 (14.10.2026, docs/MITSCHRIFT-MS3-2026-10-14.md) — Jonas: „… die Größe der linken, rechten Seite oder sogar der rechten einklappbaren Seite veränderbar oder verziehbar." Zwei Teiler, nur in der breiten Lage (js/vorlesung.js teilerZeigen setzt hidden). ===================================================================== */ /* Die Breiten. Ohne Merker die Vorgabe (1 : 1, rechte Spalte 288 px — bei 1280 wie vor MS3 379/378/288); mit Merker die Anteile aus js/vorlesung.js (--vl-gl/--vl-gr als flex-grow, --vl-s in Prozent der Körperbreite). Die Mindestbreiten stehen HIER, damit sie in jedem Fenster gewinnen: eine Seite 240 px (in einem engen Körper höchstens 30 %), die rechte Spalte 200 px bis 50 % — und sie gibt als EINZIGE nach (flex-shrink 1), wenn ein gemerkter Anteil im kleineren Fenster nicht mehr neben zwei Seiten passt. */ .vl-root.vl-breit .vl-folien { flex-grow: var(--vl-gl, 1); } .vl-root.vl-breit .vl-heft { flex-grow: var(--vl-gr, 1); } .vl-root.vl-breit .vl-pane:not(.vl-pane-leer) { min-width: min(240px, 30%); } .vl-root.vl-breit .vl-seite { flex: 0 1 var(--vl-s, 288px); min-width: 200px; max-width: 50%; } /* Der Griff: im Fluss 0 px breit (nimmt den Seiten nichts), die Trefferfläche ragt 8 px zu beiden Seiten (16 px; Finger 12 px = 24 px), sichtbar ein 8 px breiter Griff in der Mitte der Höhe und beim Darüberfahren/Ziehen die Linie in Akzentfarbe (Muster pp-side-grip der Seitenleiste). */ .vl-teiler { position: relative; flex: 0 0 0; width: 0; min-width: 0; z-index: 4; cursor: col-resize; touch-action: none; outline: none; -webkit-user-select: none; user-select: none; } .vl-teiler[hidden] { display: none; } .vl-teiler::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; right: -8px; } .vl-teiler::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; } .vl-teiler-griff { position: absolute; top: 50%; left: -4px; width: 8px; height: 40px; margin-top: -20px; box-sizing: border-box; border: 1px solid var(--pp-line-2); border-radius: 4px; background: var(--pp-surface); pointer-events: none; } .vl-teiler:hover::after, .vl-teiler.vl-teiler-an::after, .vl-teiler:focus-visible::after { background: var(--pp-accent); } .vl-teiler:hover .vl-teiler-griff, .vl-teiler.vl-teiler-an .vl-teiler-griff, .vl-teiler:focus-visible .vl-teiler-griff { border-color: var(--pp-accent); background: var(--pp-accent); } body.pp-anim .vl-teiler::after, body.pp-anim .vl-teiler-griff { transition: background .12s ease, border-color .12s ease; } /* Während des Zugs: überall der Zieh-Zeiger, keine Textauswahl, und die Seiten fangen nichts (eine Fläche oder ein Notiz-Rahmen verschluckte sonst den Zeiger, wenn der Griff ihn verliert). */ .vl-root.vl-teilt, .vl-root.vl-teilt * { cursor: col-resize !important; -webkit-user-select: none; user-select: none; } .vl-root.vl-teilt .vl-pane, .vl-root.vl-teilt .vl-seite { pointer-events: none; } @media (hover: none), (pointer: coarse) { .vl-teiler::before { left: -12px; right: -12px; } .vl-teiler-griff { height: 44px; margin-top: -22px; } } /* ===================================================================== MW1 (14.10.2026, docs/MITSCHRIFT-MW1-2026-10-14.md) — Jonas: „Offene Tabs sollen dann auch wieder schließbar sein. Das Plus soll weiter aufgeräumt und etwas intuitiver gemacht werden …" ===================================================================== */ /* Das × eines Reiters: ein eigener Knopf NEBEN dem Reiter (ein Knopf im Knopf ginge nicht), der über dessen rechten Innenrand rückt — sieht aus wie im Reiter. Sichtbar am offenen Reiter, sonst beim Darüberfahren bzw. mit Fokus; sein Platz ist reserviert (sonst rückten die Nachbarn). */ .vl-tab:has(+ .vl-tab-x) { padding-right: 28px; } .vl-tab-x { flex: none; align-self: center; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 2px 0 -26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--pp-text-3); font: inherit; font-size: var(--pp-fs-gross); line-height: var(--pp-lh-eng); cursor: pointer; opacity: 0; } .vl-tab:hover + .vl-tab-x, .vl-tab.on + .vl-tab-x, .vl-tab-x:hover, .vl-tab-x:focus-visible { opacity: 1; } /* Fokus2-F3 (Jonas: „Die Tabs kann man auch noch nicht schließen über ein ×."): Das × steht an JEDEM Reiter sichtbar — am offenen, unter dem Zeiger und mit Fokus voll. UI1015-U2: ruhig jetzt 0,75 statt 0,55 (in Jonas' Bild war es neben dem ⋯ kaum zu sehen; das ⋯ zwischen Reiter und × hob dazu die Regel „.vl-tab.on + .vl-tab-x" auf — es ist gefallen). */ .vl-tab-x { opacity: .75; } .vl-tab-x:hover { background: var(--pp-accent-tint); color: var(--pp-text); } .vl-tab-x:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } .vl-tab-x-fremd { display: none; } .vl-root.vl-eins .vl-tab-x-fremd { display: inline-flex; } /* Das Heft: jedes Dokument trägt sein × IN seinem Reiter (nach dem ⋯). */ .vl-tab.vl-dok { padding-right: 2px; } .vl-tab.vl-dok > .vl-tab-x { margin: 0 2px 0 0; } .vl-tab.vl-dok.on > .vl-tab-x, .vl-tab.vl-dok:hover > .vl-tab-x { opacity: 1; } .vl-tab-x.vl-tab-x-heft { margin: 0 4px 0 0; border: 1px solid transparent; } .vl-tab-x.vl-tab-x-heft:hover { border-color: var(--pp-line); } /* Finger: kein „darüber" — jedes × ist ein 44er Ziel, sichtbar an jedem Reiter. UI1015-Fix (16.10.2026, Jonas: „Manchmal wird das × noch nicht in dem Tab angezeigt, zu dem es gehört"): Es stand NEBEN dem Reiter, außerhalb seiner Umrandung (am iPad gesehen). Jetzt rückt es wie mit der Maus IN den Reiter — der Reiter hält rechts 44 px frei, damit der Name nie unter dem × liegt. Ein Dokument-Reiter eines Hefts trägt sein × schon innen (margin 0). */ @media (hover: none), (pointer: coarse) { .vl-root.vl-root .vl-reiter > .vl-tab-x, .vl-root.vl-root .vl-reiter .vl-tab.vl-dok > .vl-tab-x { display: inline-flex; opacity: .7; width: 44px; min-width: 44px; height: 44px; margin: 0; } .vl-root.vl-root .vl-reiter > .vl-tab:has(+ .vl-tab-x) + .vl-tab-x { margin: 0 2px 0 -48px; } /* im 4-px-Raster: das × endet 2 px vor dem Rand */ .vl-root.vl-root .vl-reiter > .vl-tab.on + .vl-tab-x, .vl-root.vl-root .vl-reiter .vl-tab.vl-dok.on > .vl-tab-x { opacity: 1; } .vl-root.vl-root:not(.vl-eins) .vl-reiter > .vl-tab-x-fremd, .vl-root.vl-root:not(.vl-eins) .vl-reiter .vl-tab.vl-dok > .vl-tab-x-fremd { display: none; } .vl-tab:has(+ .vl-tab-x) { padding-right: 48px; } } /* UI1015-U2: der leere Reiter des „+" und die leere Arbeitsumgebung — mittig drei (vier) ruhige Pillen untereinander (Bild: Obsidians leerer Reiter). */ .vl-start { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px 16px; min-height: 0; overflow: auto; } .vl-start-knoepfe { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(280px, 100%); } .vl-start-knopf { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; border: 1px solid var(--pp-line); border-radius: 999px; background: transparent; color: var(--pp-text-2); font: inherit; font-size: var(--pp-fs-text); line-height: var(--pp-lh-eng); text-align: left; cursor: pointer; } .vl-start-knopf:hover { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); color: var(--pp-text); } .vl-start-knopf:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; } .vl-start-knopf[aria-expanded="true"] { border-color: var(--pp-accent-line); color: var(--pp-text); } .vl-start-ico { flex: none; color: var(--pp-text-3); } .vl-start-knopf:hover .vl-start-ico { color: var(--pp-accent-2); } .vl-tab-start .vl-tab-zeichen { color: var(--pp-text-3); } /* Das „+": oben die Suche, darunter rollt die Liste (die Höhe setzt PreppImBild.platziere — H2). */ .vl-plus-menu { width: min(340px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: hidden; padding: 0; gap: 0; } .vl-plus-such-zeile { flex: none; padding: 8px; border-bottom: 1px solid var(--pp-line); background: var(--pp-bg); } .vl-plus-such { display: block; width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 10px; border: 1px solid var(--pp-line-2); border-radius: 6px; background: var(--pp-surface); color: var(--pp-text); font: inherit; font-size: var(--pp-fs-gross); /* 16 px: Safari zoomt sonst beim Fokus (Q05) */ } .vl-plus-such:focus { outline: 2px solid var(--pp-accent); outline-offset: -1px; border-color: var(--pp-accent-line); } .vl-plus-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding: 4px 6px 6px; } .vl-plus-gruppe { display: flex; flex-direction: column; gap: 1px; } .vl-plus-gruppe + .vl-plus-gruppe { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--pp-line); } .vl-plus-wahl { justify-content: space-between; } .vl-plus-wahl .vl-plus-zus { flex: none; margin-left: auto; } .vl-plus-wahl { overflow-wrap: anywhere; } .vl-plus-wahl.vl-plus-akt { background: var(--pp-accent-tint); box-shadow: inset 0 0 0 1px var(--pp-accent-line); } .vl-plus-mehr { align-self: flex-start; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--pp-accent-2); font: inherit; font-size: var(--pp-fs-klein); cursor: pointer; } .vl-plus-mehr:hover, .vl-plus-mehr.vl-plus-akt { background: var(--pp-accent-tint); } .vl-plus-mehr:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } .vl-plus-nichts { padding: 10px 8px; color: var(--pp-text-3); font-size: var(--pp-fs-klein); } @media (hover: none), (pointer: coarse) { .vl-plus-such { min-height: 44px; } .vl-plus-mehr { min-height: 44px; } } /* (Der Weg zur Nachbereitung am Ende der rechten Spalte, .vl-nach-knopf, ist mit „Danach" entfallen — UI1015-U5.) */ /* ===================================================================== WO3 (Web-Abnahme web1014, 14.10.2026) — Politur am Telefon und iPad. docs/abnahme/w1014-wo3/BERICHT.md ===================================================================== */ /* V1-10: Das ◆-Feld der engen Lagen ist wegklickbar (H2-Regel, docs/HANDY- H2-IM-BILD-2026-10-14.md) — der Schirm liegt unter dem Feld über der Seite; ein Tipp darauf schließt (js/vorlesung.js data-vl="seite-schirm"). */ .vl-seite-schirm { display: none; } .vl-root.vl-seite-auf:not(.vl-breit) .vl-seite-schirm { display: block; position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, .35); cursor: pointer; } /* Der Schirm steht im Markup HINTER der Spalte (am Ende von .vl-body, damit die Teiler-Reihe MS3 unberührt bleibt) — das Feld liegt deshalb über z-index darüber, nicht über die Reihenfolge. Spät im Stylesheet, damit es die gleich spezifischen z-index:2-Regeln der Lagen schlägt. UI1015-U6 (WebKit-Abnahme, 375 px): Schirm 7 und Feld 8 liegen über den schwebenden Ebenen des Hefts (.hf-schwebe 5 seit UI1015-U3, Seitenleiste als Blatt und Anwesenheit 6, Teiler 4) — vorher deckte die Heft-Insel den Kopf des Felds samt „Stelle merken" zu und lag hell über dem Schirm. Unter der Statusgruppe des iPads (25) und den Meldungen bleiben sie. */ .vl-root.vl-seite-auf:not(.vl-breit) .vl-seite { z-index: 8; } /* (V1-09: der Zeit-Knopf der REC-Anzeige im Telefon-Kopf — mit dem Kopf gegangen, UI1015-U5.) */ /* V1-15: Der aktive Reiter war nur am Schriftgewicht zu erkennen (Fläche 1,06 : 1). Eine Akzentlinie oben trägt den Zustand (≥ 3 : 1). */ .vl-tab.on { box-shadow: inset 0 2px 0 var(--pp-accent); color: var(--pp-text); } /* V1-19: Rollt die Reiterleiste, zeigt ein Schatten am klebenden „+", dass darunter noch Reiter liegen (js/vorlesung.js reiterUeberlauf setzt data-vl-mehr, solange rechts etwas folgt). */ .vl-reiter[data-vl-mehr="rechts"] > .vl-plus { box-shadow: -10px 0 10px -6px rgba(0, 0, 0, .45); } /* V1-13: Trefferflächen am Finger ≥ 44 px — „+" der Spalten (44 × 40) und die eingeklappte rechte Leiste (◆ § ? ✎ je 40 × 44). */ @media (hover: none), (pointer: coarse) { .vl-plus { min-height: 44px; } .vl-rl-k { width: 44px; height: 44px; } .vl-root.vl-breit.vl-rechts-zu .vl-rechts-leiste { flex-basis: 48px; } } /* ===================================================================== a1014 P8 (15.10.2026) — Arbeitsumgebung als einzige Ansicht. docs/abnahme/a1014-p8/BERICHT.md ===================================================================== */ /* Lesemodus („Anzeigen", Entscheidung 0.3): kein Stift, keine Aufnahme, keine Marke — die Knöpfe sind WEG, nicht nur grau (ein versehentlicher Strich in der Vorlesung ist genau das, was der Modus verhindert). */ .vl-lesen-marke { font-size: var(--pp-fs-mini); color: var(--pp-text-3); letter-spacing: .4px; text-transform: uppercase; font-weight: 600; white-space: nowrap; } .vl-root.vl-lesen .vl-seite-akt, .vl-root.vl-lesen .vl-rl-akt, .vl-root.vl-lesen .vl-bot-vier, .vl-root.vl-lesen [data-vl="erneut"], .vl-root.vl-lesen [data-vl="auswahl"], .vl-root.vl-lesen [data-vl="folie"], .vl-root.vl-lesen .vl-live-rec { display: none; } .vl-root.vl-lesen .hf-leiste, .vl-root.vl-lesen .hf-zgleiste, .vl-root.vl-lesen .zg-leiste { display: none; } .vl-root.vl-lesen .hf-buehne { cursor: grab; } /* Ohne Veranstaltung (Kursebene, Entscheidung 0.2): keine Uhr, keine Aufnahme, keine Marken-Vier — seit UI1015-U5 für immer (kein „Veranstaltung zuordnen" mehr, das sie brachte). */ .vl-root.vl-ohne-event .vl-bot-auf, .vl-root.vl-ohne-event [data-vl="erneut"], .vl-root.vl-ohne-event .vl-live-rec, .vl-root.vl-ohne-event .vl-seite-akt, .vl-root.vl-ohne-event .vl-rl-akt, .vl-root.vl-ohne-event .vl-bot-vier { display: none; } /* Die Seiten Transkript und Aufnahme — UI1015-U2 EINE Ansicht: Kopf (Name, Dauer/Zeichen), Spieler der Aufnahme, dann der Text — gesetzt wie die Textansicht der Dateien (css/material.css .mt-text-rumpf), die Zeitmarken sind Knöpfe. */ .vl-dok-seite { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; } .vl-tk, .vl-au { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .vl-dok-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--pp-line); font-size: var(--pp-fs-mini); color: var(--pp-text-2); } .vl-dok-kopf b { color: var(--pp-text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vl-dok-kopf .pp-btn { margin-left: auto; } .vl-spieler { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--pp-line); background: var(--pp-surface); } .vl-sp-regler { flex: 1 1 160px; min-width: 120px; accent-color: var(--pp-accent); } .vl-sp-zeit { font-size: var(--pp-fs-mini); color: var(--pp-text-2); white-space: nowrap; } .vl-sp-teil { font-size: var(--pp-fs-mini); white-space: nowrap; } .vl-tk-text { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 16px; max-width: none; } .vl-tk-zeit { border: 0; border-radius: 4px; padding: 0 4px; background: var(--pp-accent-tint); color: var(--pp-accent-2); font: inherit; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); cursor: pointer; } .vl-tk-zeit:hover { background: var(--pp-accent); color: #fff; } .vl-au > h4 { margin: 10px 12px 0; font-size: var(--pp-fs-mini); letter-spacing: .4px; text-transform: uppercase; color: var(--pp-text-3); font-weight: 600; } .vl-au-marken { list-style: none; margin: 0; padding: 8px 12px; overflow: auto; } .vl-au-marken li { padding: 4px 0; border-bottom: 1px dashed var(--pp-line); } .vl-au-marke-art { color: var(--pp-text-3); } .vl-au-kein-tk { margin: 0; padding: 10px 12px; font-size: var(--pp-fs-klein); } /* („Veranstaltung zuordnen" — Knopf im Kopf, Liste im Dialog, .vl-zu-* — ist mit UI1015-U5 entfallen.) */ @media (hover: none), (pointer: coarse) { .vl-tk-zeit { min-height: 44px; } /* DK-14: vorher 32 */ /* DK-14: Spielerknöpfe (41 × 44), der Regler (16 hoch) und ✎ im Lesemodus (40 × 44) auf 44 — der Regler über Polsterung, die Spur bleibt schmal. */ .vl-spieler .pp-btn, .vl-bearbeiten { min-width: 44px; min-height: 44px; justify-content: center; } .vl-sp-regler { padding: 14px 0; box-sizing: content-box; } } /* ===================================================================== a1014 fix-au (15.10.2026) — Befunde der Abnahme „au" (docs/abnahme/a1014-fix-au/BERICHT.md) ===================================================================== */ /* AU-06: Im Lesemodus (Entscheidung 0.3) widersprach der Kopf dem Versprechen „nur lesen": der Satz „Bearbeiten ohne Aufnahme — ‚Aufnahme starten' …" (ohne den Knopf), die Notiz-Leiste (+ Notiz · Bilder · Vorlage · Erstellen · Kamera) und „Seiten markieren" (dazu „■ Beenden" — seit UI1015-U5 gibt es ihn nicht mehr). Alles weg, nicht grau — wie die Stift-Werkzeuge. */ .vl-root.vl-lesen .vl-auf-meldung, .vl-root.vl-lesen .nz-leiste, .vl-root.vl-lesen [data-vl="seiten"] { display: none; } /* AU-08: Die Kursebene (ohne Event) trug Reste der Veranstaltung — das Marken-Fenster „Marken, Kapitel & Aufgaben (0)" (und bis UI1015-U5 die Überschrift „Danach"): Marken hängen an einer Aufnahmezeit, die es hier nicht gibt. */ .vl-root.vl-ohne-event .vl-marken-seite, .vl-root.vl-ohne-event [data-vl-stapel-kopf="marken"], .vl-root.vl-ohne-event [data-vl-stapel="marken"], .vl-root.vl-ohne-event [data-vl-tab^="heim:"][data-vl-seite-art="marken"] { display: none; } /* ---------- Fokus Y1 (15.10.2026): das Training in der Arbeitsumgebung ---------- docs/FOKUS-Y1-2026-10-15.md. Links die feste Seite `training` (ihr Wirt gehört js/app.js renderTraining), rechts die gewohnte Spalte, der Tutor als Seite `tutor`. Kein Kopf, keine Marken-Spalte, keine Leiste unten — das Markup hat sie gar nicht (bauen, VL.training). */ .vl-root.vl-training .vl-training-wirt { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; } /* Die Seite des Trainings füllt die Spalte — die Portalbreite (1120 px) und ihr Rand gelten im Wirt nicht; der Rand ist der der Spalte. */ .vl-root.vl-training .vl-training-wirt > .pp-page { max-width: none; margin: 0; padding: 14px 18px 48px; } .vl-root.vl-training.vl-eins .vl-training-wirt > .pp-page { padding: 10px 12px 48px; } /* Die linke Leiste (nur der feste Reiter „Training") nur am Telefon — dort trägt sie die Reiter der rechten Spalte (vl-tab-fremd) und ist der Weg zurück zu den Aufgaben; breit wäre sie ein Reiter ohne Wahl. */ .vl-root.vl-training:not(.vl-eins) [data-vl-pane="links"] > .vl-reiter { display: none; } .vl-root.vl-training .vl-tab-training { cursor: default; } .vl-root.vl-training .vl-tab-training .vl-tab-zeichen { color: var(--pp-text-3); } /* Der Tutor als Seite: das Panel füllt die Spalte, sein Verlauf rollt. */ .vl-root.vl-training .vl-tutor-wirt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 8px; } .vl-root.vl-training .vl-tutor-wirt > .pp-fenster { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; max-height: none; } .vl-root.vl-training .vl-tutor-wirt > .pp-fenster > .ppf-koerper { flex: 1 1 auto; min-height: 0; overflow: auto; } .vl-root.vl-training .vl-tutor-wirt > .pp-fenster.zu { flex: 0 0 auto; } /* Die rechte Spalte ohne Reiter bleibt stehen (spaltenKlassen): ihr „+" ist der Weg zu Notiz, Heft und Dateien — der Leerzustand sagt es. */ .vl-root.vl-training .vl-training-rechts-leer { margin: auto; max-width: 320px; padding: 24px 16px; } .vl-root.vl-training .vl-training-rechts-leer p { margin: 0 0 8px; } /* Die Aufgabe braucht mehr Platz als die Notiz: ohne gezogene Breite 3 : 2 (der Teiler „mitte" ändert es, Doppelklick stellt es wieder her). */ .vl-root.vl-training.vl-breit .vl-folien { flex-grow: var(--vl-gl, 3); } .vl-root.vl-training.vl-breit .vl-heft { flex-grow: var(--vl-gr, 2); } /* Teil 2: Mitdenken im Training — die rechte Spalte nur mit Mitdenken (trainingSeiteHtml). Ihr Kopf steht in JEDER Lage (sein × ist der Weg zum Schließen; die Vorlesung blendet die Leiste eng aus, weil dort ◆ der Weg ist). Der Knopf „✦ Mitdenken" in der Reiterleiste gibt es nur in den engen Lagen — breit steht die Spalte selbst da. */ .vl-root.vl-training .vl-training-heim { display: flex; align-items: center; gap: 2px; } .vl-root.vl-training:not(.vl-breit) .vl-training-heim { margin: 0 0 8px; padding: 0; } .vl-root.vl-training .vl-training-heim .vl-tab-heim { cursor: default; } .vl-root.vl-training.vl-breit .vl-tab-mitdenken { display: none; } /* ===================================================================== UI1015-U5 (15.10.2026, docs/UI1015-U5-2026-10-15.md) — der Kopf der Arbeitsumgebung wohnt in der Kopfzeile des Portals. Jonas: „‹ Verlassen" und „■ Beenden" weg; Titel und Unterzeile stehen dort, wo bisher „Arbeitsumgebung" stand; ohne Veranstaltung steht dort nichts. ===================================================================== */ /* Der Seitenname (js/vorlesung.js kopfHier über js/app.js kopfTeile): zwei Zeilen, jede ohne Umbruch mit Ellipse. Der Kasten gibt als Erster nach (Fallstrick 41: wer nowrap setzt, setzt min-width: 0 dazu) — am Telefon (Statuszeile mit Lupe, Punkten, ☰) kürzt er, statt umzubrechen; breit höchstens 46 vw, damit Lupe, Chats und Punkte daneben stehen bleiben. Zeilenhöhe „knapp" statt „eng": Mit 1 schnitte overflow die Unterlängen ab. */ .pp-top-here.vl-kopf-hier { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; flex: 0 1 auto; min-width: 0; max-width: min(46vw, 520px); line-height: var(--pp-lh-knapp); } .vl-kopf-hier > b, .vl-kopf-hier > .vl-kopf-meta { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vl-kopf-hier > b { font-weight: 600; } .vl-kopf-hier > .vl-kopf-meta { font-size: var(--pp-fs-mini); font-weight: 400; color: var(--pp-text-3); } /* Ohne Veranstaltung: nichts — auch keine Lücke im Abstand der Zeile. */ .pp-top-here.vl-kopf-leer { display: none; } /* sim1016-R6 (A1-05): Der Seitenname ist der Weg zurück zur Kursseite (ein Link, js/vorlesung.js kopfHier) — am Telefon gab es aus der Arbeitsumgebung sonst nur die Zurück-Geste (in der App-Hülle nicht einmal die), ☰ oder die Suche. Er sieht aus wie bisher; ohne Seitenleiste (Telefon, Tablet) trägt er ein „‹" davor und 44 px Höhe. */ a.pp-top-here.vl-kopf-hier { color: inherit; text-decoration: none; cursor: pointer; } a.pp-top-here.vl-kopf-hier:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; border-radius: 4px; } @media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) { a.pp-top-here.vl-kopf-hier { position: relative; padding-left: 14px; min-height: 44px; box-sizing: border-box; } a.pp-top-here.vl-kopf-hier::before { content: "‹"; position: absolute; left: 0; top: 50%; transform: translateY(-55%); font-size: var(--pp-fs-gross); font-weight: 400; color: var(--pp-text-2); } } /* Die eine Zeile, die der Seite blieb: der Lesemodus. */ .vl-top-lesen { justify-content: flex-start; } /* ===================================================================== Rechte Seitenleiste (17.10.2026) — Jonas: „Der Pfeil … und die Titelmarken und ‚Mitdenken‘ sollen entfernt werden. Das soll einfach immer da in dieser rechten Seitenleiste angezeigt werden." Und am Telefon: „unten aufklappbar … nach oben ziehbar … oder durch den unteren Knopf öffnen", mit „Erstellen" ohne Aufklappen von Mitdenken. test/verify-rechte-seitenleiste.js ===================================================================== */ /* Ohne Reiterleiste beginnt die Spalte mit ihrem ersten Teil. */ .vl-root .vl-seite > .vl-blatt-kopf + h4, .vl-root .vl-seite > .vl-blatt-kopf + .vl-seite-akt[hidden] + .vl-rechts-live, .vl-root .vl-seite > .vl-blatt-kopf + h4[hidden] + .vl-seite-akt[hidden] + [data-vl-marken][hidden] + .vl-rechts-live { margin-top: 0; } /* Der Kopf des Blatts hat außerhalb des Blatts keinen Kasten — das ✕ darin steht wie bisher oben rechts im Feld (iPad hoch, Telefon quer). */ .vl-blatt-kopf { display: contents; } .vl-blatt-strich { display: none; } /* Die Griffe der Teile (MS2: in eine Spalte ziehen, hier umordnen) — nur breit, wo es Spalten gibt; sie ersetzen die Reiter der Spalte. */ .vl-stapel-griff { display: none; } .vl-stapel-griff .vl-tab-name { display: none; } .vl-root.vl-breit .vl-stapel-griff { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 24px; height: 24px; margin-left: auto; border-radius: 4px; color: var(--pp-text-3); font-size: var(--pp-fs-klein); font-weight: 400; letter-spacing: 0; text-transform: none; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .vl-root.vl-breit .vl-stapel-griff::before { content: "⠿"; } .vl-root.vl-breit .vl-stapel-griff:hover { background: var(--pp-accent-tint); color: var(--pp-accent-2); } /* K3-P4 (C12 Q3): der Griff ist per Tastatur erreichbar — sein Fokus ist sichtbar. */ .vl-root.vl-breit .vl-stapel-griff:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; background: var(--pp-accent-tint); color: var(--pp-accent-2); } .vl-root.vl-breit .vl-stapel-griff.vl-tab-zieht { opacity: .45; } /* Mitdenken hat keine Überschrift — sein Griff steht oben rechts am Teil, die erste Zeile (Aufnahme · Erstellen) hält ihm den Platz frei. */ .vl-root.vl-breit .vl-seite [data-vl-stapel="mitdenken"] { position: relative; } .vl-root.vl-breit .vl-seite [data-vl-stapel="mitdenken"] > .vl-stapel-griff { position: absolute; top: 0; right: -6px; z-index: 1; } .vl-root.vl-breit .vl-seite [data-vl-stapel="mitdenken"] .vl-live-kopf { padding-right: 24px; } @media (hover: none), (pointer: coarse) { .vl-root.vl-breit .vl-stapel-griff { width: 32px; height: 32px; } .vl-root.vl-breit .vl-seite [data-vl-stapel="mitdenken"] .vl-live-kopf { padding-right: 32px; } } /* ---------- Telefon hochkant: das Blatt von unten (vl-blatt) ---------- js/vorlesung.js blattStart/blattZieh/blattEnde. Zu: nur der unterste Knopf der Fußzeile. Auf: halb (--vl-blatt-halb) oder voll; beim Ziehen folgt die Höhe dem Finger (--vl-blatt-h). Die Höhe ist ein Anteil der Arbeitsumgebung — mit offener Tastatur endet sie über ihr (html.pp-tastatur), das Blatt mit ihr. Schirm 7 und Blatt 8 wie das Feld der anderen engen Lagen (WO3). */ .vl-root.vl-blatt { --vl-blatt-halb: 58%; } .vl-root.vl-blatt.vl-seite-auf .vl-seite { display: block; position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: auto; box-sizing: border-box; height: var(--vl-blatt-halb); max-height: calc(100% - 8px); min-height: 0; padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .28); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 8; } .vl-root.vl-blatt.vl-blatt-voll .vl-seite { height: calc(100% - 8px); } .vl-root.vl-blatt.vl-blatt-zieht .vl-seite { height: var(--vl-blatt-h, var(--vl-blatt-halb)); } /* Der Kopf: Griff (Strich) in der Mitte, ✕ rechts; er klebt oben, wenn der Inhalt rollt. */ .vl-root.vl-blatt .vl-blatt-kopf { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 3; height: 44px; margin: 0 -14px 2px; background: var(--pp-surface); border-radius: 14px 14px 0 0; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .vl-root.vl-blatt .vl-blatt-strich { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--pp-line-2, var(--pp-line)); } .vl-root.vl-blatt .vl-blatt-kopf .vl-seite-zu { position: absolute; top: 0; right: 6px; } /* Der unterste Knopf der Fußzeile: eine Zeile über die ganze Breite, der Griff des geschlossenen Blatts. Darüber stehen ◆ ? ✎ (mit Aufnahme) bzw. „● Aufnahme" — die Knöpfe der Fußzeile umbrechen dafür in zwei Zeilen. */ .vl-root.vl-blatt .vl-bot-akt { flex-wrap: wrap; row-gap: 6px; } .vl-root.vl-blatt .vl-bot-auf { flex: 1 1 100%; } .vl-root.vl-blatt .vl-bot-auf .vl-rec-satz { flex: 1 1 auto; } .vl-root.vl-blatt .vl-bot-auf [data-vl="erneut"] { flex: 1 1 auto; justify-content: center; } .vl-blatt-knopf { position: relative; order: 9; flex: 1 0 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; margin: 0 -8px -6px; padding: 12px 64px 8px; border: 0; border-top: 1px solid var(--pp-line); border-radius: 0; background: var(--pp-surface); color: var(--pp-text); font: inherit; font-size: var(--pp-fs-klein); font-weight: 600; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .vl-blatt-knopf:hover { background: var(--pp-accent-tint); } .vl-blatt-knopf:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -3px; } .vl-blatt-knopf .vl-blatt-strich { display: block; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--pp-line-2, var(--pp-line)); } .vl-blatt-zahl { position: absolute; right: 16px; top: 50%; transform: translateY(-40%); color: var(--pp-text-2); font-weight: 500; } .vl-blatt-zahl .pp-num { font-family: var(--pp-mono); } .vl-root.vl-seite-leer .vl-blatt-knopf { display: none; } /* nichts in der Spalte: kein Blatt */ /* Hereinfahren nur hinter dem Schalter „Animationen" (docs/ANIMATIONEN.md) — und nicht nach einem Zug (vl-blatt-gezogen): Da steht es schon unter dem Finger. */ @keyframes vl-blatt-rein { from { transform: translateY(100%); } to { transform: none; } } @keyframes vl-blatt-schirm { from { opacity: 0; } } body.pp-anim .vl-root.vl-blatt.vl-seite-auf:not(.vl-blatt-gezogen) .vl-seite { animation: vl-blatt-rein .22s cubic-bezier(.2, .8, .2, 1); } body.pp-anim .vl-root.vl-blatt.vl-seite-auf .vl-seite-schirm { animation: vl-blatt-schirm .22s ease; } body.pp-anim .vl-root.vl-blatt:not(.vl-blatt-zieht) .vl-seite { transition: height .2s ease; } /* ---------- sim1016 J4: der Notiz-Chat in der rechten Seitenleiste ---------- js/vorlesung.js chatWirtNeu, js/app.js vorlesungChat. Der Wirt ist leer, bis „KI fragen zu dieser Notiz" einen Chat öffnet; dann ist die Spalte eine Säule aus Kopf (Blatt), den Knöpfen zum Merken (nur mit Aufnahme) und dem Chat, dessen Verlauf rollt und dessen Eingabe unten steht. Marken und Mitdenken bleiben im Dokument, nur unsichtbar (die Automatik findet ihren Wirt). Breit zeigt die Spalte sich auch, wenn sie sonst leer gezogen wäre. */ .vl-chat-wirt:empty { display: none; } .vl-root.vl-breit:not(.vl-rechts-zu) .vl-seite.vl-chat-auf, .vl-root.vl-seite-auf:not(.vl-breit) .vl-seite.vl-chat-auf { display: flex; flex-direction: column; overflow: hidden; } .vl-root.vl-breit.vl-seite-leer.vl-chat-da:not(.vl-rechts-zu) .vl-rechts-leiste { display: none; } .vl-root.vl-seite-leer.vl-chat-da .vl-blatt-knopf { display: flex; } .vl-root .vl-seite.vl-chat-auf > :not(.vl-blatt-kopf):not(.vl-chat-wirt):not(.vl-seite-akt) { display: none; } .vl-root .vl-seite.vl-chat-auf > .vl-chat-wirt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .vl-root .vl-seite.vl-chat-auf > .vl-seite-akt { flex: none; margin-bottom: 8px; } .vl-chat-wirt > .pp-fenster { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; max-width: none; max-height: none; } .vl-chat-wirt > .pp-fenster > .ppf-koerper { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; } .vl-chat-wirt > .pp-fenster > :not(.ppf-koerper) { flex: none; } /* Die Spalte selbst ist die Fläche — der Chat bringt keinen zweiten Rahmen mit. */ .vl-chat-wirt > .pp-fenster.pp-card { border: 0; box-shadow: none; background: transparent; } .vl-root.vl-blatt .vl-seite.vl-chat-auf { padding-bottom: env(safe-area-inset-bottom, 0px); }