/* =====================================================================
   Kursmaterial — Reiter „Material" (js/material.js), Entwurf R1 Werkbank
   (15.08.2026, docs/KURSMATERIAL.md).

   Portal-Look: ausschliesslich --pp-Tokens, hell und dunkel. Der Entwurf
   nennt --warn-bg/--ok-bg/--err-bg — hier heissen sie --pp-*-tint; alles
   Weitere (--pp-surface-2, --pp-line-2, --pp-accent-tint, --pp-lift) gibt
   es in prepp.css. Kein Token ohne Definition (verify-professor-leisten.js).
   ===================================================================== */

/* ---------- Seite, Kopf, Modulwahl, Reiter ---------- */
.mt-page { display: flex; flex-direction: column; gap: 14px; }
.mt-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mt-head .pp-h1 { margin: 0; }
.mt-meta { font-size: var(--pp-fs-klein); color: var(--pp-text-3); }
.mt-eyebrow {
  font-size: var(--pp-fs-mini); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--pp-text-3);
}
.mt-due {
  font-family: var(--pp-mono); font-size: var(--pp-fs-mini); font-weight: 600; color: var(--pp-warn);
  background: var(--pp-warn-tint); border-radius: 9px; padding: 1px 7px; white-space: nowrap;
}
/* ---------- Plan 10 E: Material als Reiter der Kursseite ----------
   Die Modulwahl, der ⚙ neben ihr und der Leerzustand „kein Kurs" sind
   gefallen (den Kurs waehlt die Kursseite, die Einstellungen oeffnet ihr
   Zahnrad). Neu: die Unterreiter UNTER der Reiterleiste des Kurses — als
   zweite Ebene kleiner und ohne eigenen Trennstrich, sonst saehe es aus
   wie zwei gleichrangige Leisten —, die Zeile zu den Dokumenten ohne
   Kurs, und der Kopf in #kurs-start-slot. */
.mt-im-kurs { margin-top: 14px; }
/* P4 (11.10.2026, Jonas: die Pillen „gefallen mir nicht gut"): Die
   Unterreiter sind eine BOXENZEILE, die unmittelbar an der Linie der
   Hauptreiter haengt — eine Flaeche in --pp-surface-2 ohne Oberkante (die
   Linie der Hauptreiter IST ihre Oberkante), darin Kaesten mit 5-px-Ecken
   und 4 px Fuge. Nicht --pp-bg-2: das ist in beiden Themes gleich
   --pp-surface, die Kaesten stuenden ohne Abhebung in der Flaeche.
   Damit zwischen Linie und Zeile keine Luecke bleibt, fallen zwei
   Abstaende weg: der untere Rand der Hauptreiter-Leiste (prepp.css,
   --pp-sp-6) und der obere von .mt-im-kurs. Beides ueber :has, weil die
   Hauptleiste app.js gehoert und nur HIER feststeht, dass Material offen
   ist (ohne Teilnahme — .mt-ohne-teilnahme, keine Unterreiter — bleibt
   der Abstand). Schmal: eine Zeile, waagerecht scrollbar statt Umbruch;
   min-width: 0 und flex: 0 0 auto, sonst schoebe die Zeile die Seite
   breit (Fallstrick 41). docs/MATERIAL-UNTERREITER-2026-10-11.md */
.pp-tabs:has(+ #kurs-reiter-wirt > .mt-im-kurs > .mt-unter) { margin-bottom: 0; }
.mt-im-kurs:has(> .mt-unter:first-child) { margin-top: 0; }
.mt-tabs.mt-unter {
  border: 1px solid var(--pp-line); border-top: 0; border-radius: 0 0 6px 6px;
  background: var(--pp-surface-2); padding: 6px; gap: 4px;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; min-width: 0; max-width: 100%;
}
.mt-tabs.mt-unter > button {
  flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center;
  border: 1px solid var(--pp-line); border-radius: 5px; padding: 6px 12px; margin: 0;
  font-size: var(--pp-fs-klein); background: var(--pp-surface); color: var(--pp-text-2);
}
.mt-tabs.mt-unter > button:hover { color: var(--pp-text); border-color: var(--pp-line-2); }
.mt-tabs.mt-unter > button.on {
  border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2);
}
.mt-tabs.mt-unter > button:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; }
@media (hover: none) { .mt-tabs.mt-unter > button { min-height: 44px; } }
.mt-tabs .mt-due { margin-left: 6px; }
/* Nur für Screenreader und Textkopie (ns0929-p6, Befund p3 #15): das
   Komma zwischen Reitername und Zahl. Muster .hf-sr in css/heft.css. */
.mt-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-ohne-kurs-zeile { font-size: var(--pp-fs-klein); }
.mt-ohne-kurs-zeile a { color: var(--pp-accent-2); }
.mt-ohne-kurs-satz { margin: 0; }
.mt-doc-kurs { font-size: var(--pp-fs-klein); max-width: 180px; }
/* Der Kopf der Kursseite: seit dem 02.10.2026 nur „Grundlagen · N von 4
   Schritten" und die Schrittzeile (Skript → Quellen → Aufgaben → Kurs
   initialisieren; docs/UI-POLITUR-2026-10-02.md). Kein Kasten — der Platz unter dem Kursnamen ist Teil
   des Kopfes; nur die Kursinit-Karte eines laufenden Auftrags ist eine. */
#kurs-start-slot { display: flex; flex-direction: column; gap: 8px; }
/* Einklappbar (Plan 10 D2): eine Zeile mit Chevron und Kurzfassung,
   darunter der Rumpf. Zugeklappt heißt `hidden` — die Gegenregel ist
   Pflicht, weil der Rumpf `display: flex` setzt und damit die
   Browserregel [hidden] schlüge (die .pp-inreq-Falle). */
.mt-kopf-klappe { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mt-kopf-rumpf { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mt-kopf-rumpf[hidden] { display: none; }
.mt-kopf-chevron {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%;
  border: 0; background: transparent; padding: 2px 4px 2px 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng); color: var(--pp-text-2); text-align: left;
}
.mt-kopf-chevron:hover { color: var(--pp-text); }
.mt-kopf-kurz { min-width: 0; overflow-wrap: anywhere; }
.mt-kopf-pfeil {
  flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin: 0 3px 3px 2px;
}
.mt-kopf-klappe.zu .mt-kopf-pfeil { transform: rotate(-45deg); margin: 0 3px 0 0; }
@media (hover: none) { .mt-kopf-chevron { min-height: 44px; } }
.mt-kopf-link {
  border: 0; background: transparent; padding: 0; font: inherit; color: var(--pp-accent-2);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; text-align: left;
}
.mt-kopf-start { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-kopf-start.knapp { gap: 0; }
.mt-start-kette { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.mt-start-pfeil { color: var(--pp-text-3); font-size: var(--pp-fs-klein); }
.mt-start-schritt {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pp-line); border-radius: 999px;
  background: var(--pp-surface); color: var(--pp-text); padding: 4px 11px 4px 5px; cursor: pointer;
  font-family: inherit; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng);
}
.mt-start-schritt[disabled] { opacity: .55; cursor: default; }
.mt-start-schritt:hover { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); }
.mt-start-haken {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--pp-line-2);
  display: inline-grid; place-items: center; font-size: var(--pp-fs-mini); font-weight: 700; flex: 0 0 auto;
}
.mt-start-schritt.ok { color: var(--pp-text-2); }
.mt-start-schritt.ok .mt-start-haken { border-color: var(--pp-ok); background: var(--pp-ok-tint); color: var(--pp-ok); }
@media (hover: none) { .mt-start-schritt, .mt-kopf-start .pp-btn { min-height: 44px; } }
/* Handy-Schliff 13.10.2026 (docs/abnahme/handy-1013): Bis 600 px brach die
   Kette „Skript hinterlegen → Quellen hinterlegen → Aufgaben erstellen" in
   zwei Reihen um (94 px, vor den Reitern). Schmal ist sie EINE wischbare
   Zeile — der angeschnittene dritte Schritt zeigt, dass es weitergeht. */
@media (max-width: 600px) {
  .mt-start-kette { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .mt-start-kette::-webkit-scrollbar { display: none; }
  .mt-start-schritt, .mt-start-pfeil { flex: none; white-space: nowrap; }
}
/* Politur 03.10.2026: der Analyse-Stand am Schritt „Skript hinterlegen" —
   klein, und solange er leer ist, ohne eigene Lücke in der Kette. */
.mt-start-ext { margin-left: -2px; }
.mt-start-ext:empty { display: none; }
.mt-tabs { margin: 0; }
.mt-tab-ico { font-family: var(--pp-mono); font-size: var(--pp-fs-klein); margin-right: 7px; }
.mt-tab-n {
  font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3);
  background: var(--pp-surface-2); border-radius: 9px; padding: 1px 7px; margin-left: 7px;
}
/* a1014-M1: der Kopf der Einzelansicht unter Lernen (statt der
   Reiterleiste) — Rueckweg, Name des Werkzeugs, Zahlen in EINER Zeile.
   Der Rueckweg der Kursseite darueber (.pp-kurs-zurueck, app.js) tritt
   zurueck, sobald dieser Kopf dasteht; ohne ihn (Fehler, keine
   Teilnahme) bleibt er der Weg. */
.pp-kurs-zurueck:has(+ #kurs-reiter-wirt .mt-einzel-kopf) { display: none; }
/* Die Einzelansicht liegt UEBER der Kursseite (Jonas: „zeigt NUR die
   Karteikarten"): Unter dem Titel der Kursseite folgt sofort das Werkzeug.
   Ausgeblendet werden die Tätigkeitsreiter, die Kurzzeile und der Kopf
   „Kurs einrichten"/„Grundlagen" — gemessen in WebKit stand das Werkzeug
   in einem frischen Kurs sonst erst bei y = 759 (Laptop). Was dort LAEUFT
   (Kursinit-Karte, Lauf-Chat, Meldung), bleibt sichtbar. Zurueck auf
   Lernen steht alles wieder da. */
.pp-kurs-einzel > .pp-kurs-taet, .pp-kurs-einzel > .pp-kurs-kap-schmal,
.pp-kurs-einzel .pp-kurs-unter, .pp-kurs-einzel .pp-kurs-daten,
.pp-kurs-einzel #kurs-start-slot > .mt-kopf-klappe,
.pp-kurs-einzel #kurs-start-slot > .mt-kopf-start { display: none; }
.mt-einzel-kopf[hidden] { display: none; }
.mt-einzel-kopf { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.mt-einzel-zurueck {
  display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
  font-size: var(--pp-fs-klein); color: var(--pp-text-2); background: var(--pp-surface);
  border: 1px solid var(--pp-line); border-radius: 6px; padding: 4px 10px 4px 7px;
}
.mt-einzel-zurueck:hover { color: var(--pp-text); border-color: var(--pp-line-2); }
.mt-einzel-zurueck:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
@media (pointer: coarse) { .mt-einzel-zurueck { min-height: 44px; } }
.mt-einzel-titel { display: inline-flex; align-items: center; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.mt-einzel-kopf .mt-tab-n { margin-left: 0; }

/* ---------- Gemeinsame Bausteine ---------- */
.mt-page input:not([type="checkbox"]):not([type="file"]), .mt-page textarea, .mt-select, .mt-dlg input, .mt-dlg textarea, .mt-dlg select {
  border: 1px solid var(--pp-line-feld); border-radius: 6px; background: var(--pp-bg);
  padding: 7px 10px; font: inherit; font-size: var(--pp-fs-klein); color: var(--pp-text);
  box-sizing: border-box; min-width: 0;
}
.mt-page textarea, .mt-dlg textarea { resize: vertical; width: 100%; }
.mt-page input:focus, .mt-page textarea:focus, .mt-select:focus, .mt-dlg input:focus { border-color: var(--pp-accent-line); }
.mt-select { background: var(--pp-surface); cursor: pointer; }
/* Auf dem Finger (ns0929-p3, 29.09.2026, WebKit gemessen): WebKit malt ein
   <select> mit seiner eigenen Hoehe — 21 px, auf dem iPad wie auf dem
   Telefon — und ueberhoert padding und min-height, solange es native
   aussieht (Befund L1 der Startkarte, 27.09.). Betroffen waren alle
   Auswahlfelder des Materials: Taschenrechner und Art der Quelle im
   Zahnrad, die Filter der Karteikarten, die Felder des Box- und
   Kartenformulars. Mit appearance: none greift die 44-px-Regel; der Pfeil
   kommt aus zwei Verlaeufen (kein Bild, kein data:-URI). Mit Maus bleibt
   das native Feld unveraendert. */
@media (hover: none) {
  .mt-select {
    -webkit-appearance: none; appearance: none;
    min-height: 44px; padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 50%, var(--pp-text-2) 50%),
                      linear-gradient(135deg, var(--pp-text-2) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
}
.mt-hint { font-size: var(--pp-fs-mini); color: var(--pp-text-3); line-height: var(--pp-lh-text); }
.mt-fuss { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-msg { font-size: var(--pp-fs-klein); color: var(--pp-text-2); }
.mt-msg .err { color: var(--pp-err); }
.mt-msg.ok { color: var(--pp-ok); }
.mt-msg.warn {
  border: 1px solid var(--pp-warn); background: var(--pp-warn-tint);
  border-radius: 6px; padding: 10px 14px; color: var(--pp-text);
}
.mt-msg.warn ul { margin: 6px 0 0; padding-left: var(--pp-sp-4); }
.mt-warnzeile { font-size: var(--pp-fs-mini); color: var(--pp-warn); }
.mt-texfehler { color: var(--pp-warn); font-size: var(--pp-fs-klein); margin-top: 6px; }
.mt-chip {
  display: inline-block; border: 1px solid var(--pp-line); border-radius: 10px;
  padding: 1px 8px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); white-space: nowrap;
}
/* M4: der „+N"-Chip buendelt die uebrigen Signalwoerter (Woerter im title). */
.mt-chip-mehr { cursor: help; color: var(--pp-text-3); }

/* ---- Die MARKE: EINE Klasse fuer Tags und fuer „als Karte" (09.09.2026)
   Jonas: „Die Tags sollen nicht mit # beginnen, sondern einfach so
   aussehen und hervorgehoben sein, wie jetzt im Formelraum ‚als Karte‘."

   Vorher standen die Deklarationen dreimal fast gleich da (.mt-chip-karte,
   .mt-karte-tags > i, .mt-zk-tags > i) und liefen bereits auseinander —
   zwei Rahmenfarben, zwei Radien, zwei Textfarben. Sie stehen jetzt
   einmal; was WIRKLICH verschieden ist, bleibt bei seinem Wirt (die
   Ellipse der Listenspalte, das Layout der Reihen).

   Das „#" ist damit aus der ANZEIGE verschwunden. Getragen wird die Marke
   jetzt von ihrer Form, nicht von einem Zeichen — an Ankis DATEIFORMAT
   aendert das nichts (tagSchluessel, die TSV-Spalte und die Kopfzeile
   „#tags column:N" sind unberuehrt; dort ist „#" Syntax, kein Schmuck).

   Gemessen, nicht geschaetzt (die Tokenwerte aus css/prepp.css, Rechnung
   in docs/FORMELRAUM-CHECKPOINT-2026-09-09.md 2): --pp-accent-2 auf
   --pp-accent-tint ergibt 6,61 : 1 im dunklen und 5,44 : 1 im hellen
   Theme — beide ueber WCAG AA fuer kleinen Text (4,5 : 1). Es ist
   dasselbe Tokenpaar, das .mt-chip-karte seit dem 04.09.2026 traegt; die
   Marke erbt seine Messung, statt eine neue Farbe zu erfinden. */
.mt-marke {
  display: inline-block; font-style: normal; white-space: nowrap;
  border: 1px solid var(--pp-accent-line); border-radius: 10px; padding: 1px 8px;
  background: var(--pp-accent-tint); color: var(--pp-accent-2);
  font-size: var(--pp-fs-mini); font-weight: 500;
}
/* Der „+N"-Bruder: dieselbe Marke, aber sie sagt eine ANZAHL statt eines
   Namens (die uebrigen stehen im title). */
.mt-marke-mehr { cursor: help; }
/* B1 (04.09.2026): „als Karte" an einer Formel — dieselbe Marke, aber ein
   KNOPF. Nur der Zeiger und die Unterstreichung unterscheiden ihn: die
   Form sagt „hier steht etwas", der Zeiger sagt „hier fuehrt etwas hin".
   `font: inherit` waere hier falsch — es naehme der Marke ihre Groesse;
   ein <button> braucht dagegen die Schriftfamilie ausdruecklich. */
.mt-chip-karte { cursor: pointer; font-family: inherit; line-height: inherit; }
.mt-chip-karte:hover { text-decoration: underline; }
/* Der Weg zur Karteikarte steht seit dem 09.09.2026 im aufgeklappten
   Detail statt in der Zeile — mit demselben Einzug wie die Abschnitte
   darueber, damit er nicht wie ein zweiter Kopf aussieht. */
.mt-fd-karte { padding: 0 16px 12px 28px; }
/* --pp-accent-2 statt --pp-accent, und das ist gemessen: Der Chip ist mit
   10,5 px kleiner Text, WCAG AA verlangt also 4,5 : 1. --pp-accent auf
   --pp-accent-tint ergibt im HELLEN Theme 4,03 : 1 (WebKit, 1440 px) — der
   Ton, den .mt-toggle.on daneben seit jeher traegt und der deshalb dort
   bleibt (zwei verschieden gefaerbte Umschalter in EINEM Formular waeren
   der groessere Schaden; der Befund steht als Altbestand in
   docs/abnahme/material-p2/BERICHT.md). Ein NEUES Element unter AA
   auszuliefern ist etwas anderes: --pp-accent-2 ist im hellen Theme der
   dunklere Blauton (5,45 : 1) und im dunklen der hellere — er verbessert
   also in BEIDE Richtungen, ohne einen neuen Token zu erfinden. */
.mt-quelle { font-size: var(--pp-fs-mini); color: var(--pp-text-3); font-family: var(--pp-mono); }
.mt-fehlt { font-size: var(--pp-fs-klein); color: var(--pp-text-3); font-style: italic; }
.mt-code { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); border: 1px solid var(--pp-line); border-radius: 4px; padding: 1px 6px; }
.mt-ikon {
  border: 0; background: transparent; cursor: pointer; color: var(--pp-text-3);
  font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng); padding: 2px 5px; border-radius: 4px; font-family: inherit;
}
.mt-ikon:hover:not(:disabled) { background: var(--pp-surface-2); color: var(--pp-accent-2); }
.mt-ikon:disabled { opacity: .3; cursor: default; }
.mt-del {
  border: 0; background: transparent; cursor: pointer; color: var(--pp-text-3);
  font-size: var(--pp-fs-mini); font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; font-family: inherit;
}
.mt-del:hover, .mt-del.arm { background: var(--pp-err-tint); color: var(--pp-err); }
/* Die Werkzeuge der Bearbeiten-Ansicht (↑ ↓ ✎ Löschen) auf dem Finger:
   gemessen 20 × 17 bzw. 54 × 18 px (iPad hoch und Telefon, ns0929-p3).
   Sie stehen 4 px auseinander — ein ::before-Vorsatz je Knopf ueberlappte
   den Nachbarn (Lehre aus wa-3), deshalb waechst der KASTEN. Nur mit
   grobem Zeiger; mit Maus pixelgleich. */
@media (hover: none) {
  .mt-ikon, .mt-del {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}
.mt-akt { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.mt-link-btn {
  border: 0; background: transparent; padding: 0; color: var(--pp-accent-2); font-size: var(--pp-fs-mini);
  font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; align-self: flex-start;
}
.mt-link-btn:hover { text-decoration: underline; }
.mt-link-btn.mono { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); font-weight: 500; }
.mt-toggle {
  border: 1px solid var(--pp-line); background: var(--pp-surface); border-radius: 6px;
  padding: 7px 10px; font: inherit; font-size: var(--pp-fs-klein); color: var(--pp-text-2); cursor: pointer;
}
.mt-toggle.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); font-weight: 600; }
.mt-badge {
  font-size: var(--pp-fs-mini); font-weight: 600; border-radius: 9px; padding: 2px 9px; white-space: nowrap; flex: 0 0 auto;
  color: var(--pp-text-2); background: var(--pp-surface-2);
}
.mt-badge.blatt { color: var(--pp-accent-2); background: var(--pp-accent-tint); }
.mt-badge.kopf  { color: var(--pp-err); background: var(--pp-err-tint); }
.mt-badge.ok    { color: var(--pp-ok); background: var(--pp-ok-tint); }
.mt-badge.warn  { color: var(--pp-warn); background: var(--pp-warn-tint); }
.mt-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; flex: 0 0 auto; }
.mt-punkt.blatt { background: var(--pp-accent); }
.mt-punkt.kopf  { background: var(--pp-err); }
.mt-punkt.boss  { background: var(--pp-err); border-radius: 50%; }
.mt-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--pp-track); overflow: hidden; }
.mt-bar > i { display: block; height: 100%; background: var(--pp-accent); }
.mt-ok-kreis {
  width: 38px; height: 38px; border-radius: 50%; background: var(--pp-ok-tint); color: var(--pp-ok);
  display: grid; place-items: center; font-size: var(--pp-fs-gross);
}
.mt-leer {
  border: 1px dashed var(--pp-line); border-radius: 10px; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.mt-leer > b { font-size: var(--pp-fs-text); }
.mt-leer > span { font-size: var(--pp-fs-klein); color: var(--pp-text-2); max-width: 420px; line-height: var(--pp-lh-text); }
/* wa-7 (27.09.2026): Im Leerzustand steht neben dem blauen Anlegeknopf
   „✦ Mit KI erstellen" — als ZEILE, weil `.mt-leer` eine Spalte ist. Sie
   bricht um statt zu ueberlaufen (390 px: beide Knoepfe untereinander,
   mittig wie der Rest des Kastens). */
.mt-leer-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.mt-toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.mt-suche {
  flex: 1 1 200px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--pp-line-feld);
  background: var(--pp-surface); border-radius: 6px; padding: 0 12px;
}
.mt-suche > span { color: var(--pp-text-3); }
.mt-page .mt-suche input { border: 0; background: transparent; padding: 7px 0; flex: 1; font-size: var(--pp-fs-klein); }
.mt-subrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mt-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-subtabs button {
  display: flex; align-items: center; gap: 7px; border: 1px solid var(--pp-line); background: var(--pp-surface);
  color: var(--pp-text-2); border-radius: 6px; padding: 6px 13px; font-size: var(--pp-fs-klein); cursor: pointer; font-family: inherit;
}
.mt-subtabs button.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); font-weight: 600; }
.mt-sub-n { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); }
.mt-segs { display: flex; border: 1px solid var(--pp-line); border-radius: 6px; overflow: hidden; }
.mt-segs button {
  display: flex; align-items: center; gap: 6px; border: 0; border-right: 1px solid var(--pp-line-2);
  background: var(--pp-surface); color: var(--pp-text-2); padding: 7px 12px; font-size: var(--pp-fs-klein); font-weight: 600; cursor: pointer; font-family: inherit;
}
.mt-segs button:last-child { border-right: 0; }
.mt-segs button.on { background: var(--pp-accent-tint); color: var(--pp-accent-2); }
.mt-segs button .pp-num { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); opacity: .75; }
.mt-chip-btn {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--pp-line); background: var(--pp-surface);
  border-radius: 6px; padding: 7px 12px; font-size: var(--pp-fs-klein); color: var(--pp-text-2); cursor: pointer; max-width: 260px; font-family: inherit;
}
.mt-chip-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-chip-btn:hover { background: var(--pp-surface-2); }
.mt-chip-btn.leer { border-color: var(--pp-warn); color: var(--pp-warn); }
.mt-legende { display: flex; gap: 14px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); flex-wrap: wrap; align-items: center; }
.mt-legende > span { display: flex; align-items: center; white-space: pre-wrap; }
.mt-legende .warn { color: var(--pp-warn); font-weight: 600; }
.mt-plus { align-self: flex-start; color: var(--pp-accent-2); }
.mt-fold summary { cursor: pointer; font-size: var(--pp-fs-klein); color: var(--pp-text-2); }
.mt-fold[open] summary { margin-bottom: 8px; }
.mt-form { border-color: var(--pp-accent-line); padding: var(--pp-sp-4); display: flex; flex-direction: column; gap: 10px; }
.mt-form > b { font-size: var(--pp-fs-klein); }
.mt-form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mt-form-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.mt-form-fuss { display: flex; gap: 8px; margin-top: 4px; }
/* flex schlägt das hidden-Attribut — die Gegenregel gilt überall (Kurs teilen: Rückfrage „Ablehnen" ersetzt den Fuß; G1 fand es). */
.mt-form-fuss[hidden] { display: none; }
.mt-form-fuss.rechts { justify-content: flex-end; }
.mt-frage { font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); margin-bottom: 4px; }
.mt-dlg { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
/* „Karten mit KI erstellen" (14.09.2026, docs/KARTEN-AGENT-2026-09-14.md).
   Der Seitenabstand kommt von `.mt-dlg` darueber — .pp-modal-body bringt
   keinen mit, und das ist die Falle, die in PrepP schon fuenfmal
   zugeschlagen hat (CLAUDE.md, „Ein Portal-Dialog zur Zeit"). Hier steht
   nur das Zeilenraster des Dialogs. */
.mt-kk-zeile { display: grid; grid-template-columns: 126px 1fr; align-items: center; gap: 10px; }
.mt-kk-zeile > span:first-child {
  font-size: var(--pp-fs-klein); color: var(--pp-text-2); line-height: var(--pp-lh-eng);
}
/* Anzahl-Knoepfe und Kaestchen brechen um, statt die Spalte zu sprengen
   (Fallstrick 41: was `nowrap` traegt, nimmt seinen Nachbarn den Platz). */
.mt-kk-knoepfe, .mt-kk-haken { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.mt-kk-haken label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng);
}
/* R3 auf dem Finger: Die ZEILE ist hier der Bedienweg — das Kaestchen
   misst 12 px, und ein `::before`-Fuellstueck (Muster .mt-plan-los) haette
   nur den Punkt vergroessert, nicht das Wort daneben. Die Beschriftung
   gehoert zum Ziel, also waechst das ganze Label (gemessen 18 → 44 px bei
   390 px, WebKit 18.09.2026). Mit Maus bleibt alles, wie es war. */
@media (hover: none) {
  .mt-kk-haken label { min-height: 44px; }
}
/* Ein Weg, den es gerade nicht gibt (kein Skript hinterlegt), wird
   ausgegraut statt weggelassen — er sagt dann, dass es ihn gibt. */
.mt-kk-haken label.mt-kk-aus { color: var(--pp-text-3); }
.mt-kk-zeile.mt-kk-typen { align-items: start; }
.mt-kk-zeile.mt-kk-typen > span:first-child { padding-top: 3px; }
/* 16 statt 18: ab 16 px liegt jeder Abstand auf dem 4-px-Raster
   (docs/SKALA-2026-09-05.md, verify-skala.js 4b). */
.mt-kk-laeuft { padding: var(--pp-sp-4, 16px) 0; text-align: center; }
.mt-kk-vorschau { display: flex; flex-direction: column; gap: 10px; }
.mt-kk-bsp {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border: 1px solid var(--pp-line); border-radius: var(--pp-radius-s, 6px);
  background: var(--pp-surface-2);
}
.mt-kk-bsp-f { font-weight: 600; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); }
.mt-kk-bsp-a { font-size: var(--pp-fs-klein); color: var(--pp-text-2); line-height: var(--pp-lh-text); }
@media (max-width: 560px) {
  /* Auf dem Telefon steht die Beschriftung UEBER ihrem Feld — 126 px
     Etikett neben einem Eingabefeld lassen von dem nichts uebrig. */
  .mt-kk-zeile { grid-template-columns: 1fr; gap: 4px; }
}
.mt-sec { overflow: hidden; }
.mt-sec-h {
  display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid var(--pp-line);
  background: var(--pp-surface-2); font-size: var(--pp-fs-klein); font-weight: 600;
}
.mt-sec-h .pp-num { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); font-weight: 400; margin-left: auto; }
.mt-sec-h .mt-link-btn { margin-left: auto; }
.mt-sec-h .mt-badge { margin-left: 0; }
/* Der ⚙-Knopf der Reiter (C44, 06.09.2026) ist mit r1-07 (25.09.2026)
   in die Kopfzeile gewandert (.mt-kurs-cfg oben) — seine drei Regeln
   hier sind damit entfallen. */
.mt-menu-wirt { position: relative; margin-left: auto; flex: 0 0 auto; }
/* wa-7: „✦ Mit KI erstellen" in der Kopfzeile der Karteikarten steht rechts
   neben ⋯ — er nimmt den freien Platz (margin-left: auto) und das ⋯ rueckt
   direkt an ihn heran, statt dass sich zwei auto-Raender die Luecke teilen
   und der Knopf mitten in der Zeile schwebt. */
.mt-subrow > .mt-ki-anlegen { margin-left: auto; flex: 0 0 auto; }
.mt-subrow > .mt-ki-anlegen + .mt-menu-wirt { margin-left: 0; }
.mt-ki-anlegen { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.mt-ki-stern { width: 12px; height: 12px; flex: 0 0 auto; }

.mt-menu-btn { border: 1px solid var(--pp-line); background: var(--pp-surface); width: 30px; height: 30px; font-weight: 700; letter-spacing: 1px; color: var(--pp-text-2); }
.mt-menu-bg { position: fixed; inset: 0; z-index: 80; }
.mt-menu {
  position: absolute; right: 0; top: 34px; z-index: 90; border: 1px solid var(--pp-line); background: var(--pp-surface);
  border-radius: 8px; box-shadow: var(--pp-lift); width: 240px; padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
.mt-menu button {
  border: 0; background: transparent; border-radius: 6px; padding: 7px 10px; text-align: left; font-size: var(--pp-fs-klein);
  cursor: pointer; color: var(--pp-text); display: flex; gap: 9px; align-items: center; font-family: inherit;
}
.mt-menu button:hover { background: var(--pp-surface-2); }
.mt-menu button > i { color: var(--pp-text-3); font-family: var(--pp-mono); font-style: normal; font-size: var(--pp-fs-mini); width: 15px; text-align: center; }

/* ---------- Symbolfeld (Banner, Videolinks) und die Kursinit-Zeile ---------- */
.mt-tile-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: var(--pp-accent-tint); color: var(--pp-accent-2);
  display: grid; place-items: center; font-family: var(--pp-mono); font-size: var(--pp-fs-gross);
}
.mt-hilfs-z { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--pp-fs-klein); }
.mt-hilfs-z > .mt-eyebrow { width: 84px; flex: 0 0 auto; }
.mt-hilfs-z > span:nth-child(2) { flex: 1; min-width: 200px; color: var(--pp-text-2); }
.mt-hilfs-z i { font-style: normal; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text); }

/* ---------- Karteikarten ---------- */
.mt-lern { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 14px; align-items: start; }
.mt-side { display: flex; flex-direction: column; gap: 14px; }
.mt-sidebox { padding: var(--pp-sp-3); display: flex; flex-direction: column; gap: 6px; }
.mt-sidebox > .mt-eyebrow { padding: 2px 6px 4px; }
.mt-side-inhalt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* ---------- Die Seitenkaesten klappen sich selbst zu (14.09.2026) ----------
   DIE GEGENREGEL ZUERST, weil ohne sie gar nichts zugeht: Die Kinder sind
   `display: flex` bzw. `display: block`, und das schlaegt die Browserregel
   `[hidden] { display: none }` — die .pp-inreq-Falle vom 13.08.2026. Zwei
   Klassen im Selektor reichen (0,2,0 gegen 0,1,0 von `.mt-modus`), ein
   `!important` braucht es nicht. */
.mt-sidebox > [hidden] { display: none; }
.mt-side-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 36px; padding: 5px 6px; border: 0; border-radius: 6px;
  background: transparent; color: var(--pp-text); font: inherit; text-align: left; cursor: pointer;
}
.mt-side-kopf:hover { background: var(--pp-accent-tint); }
.mt-side-kopf > .chev { color: var(--pp-text-3); flex: 0 0 auto; }
.mt-side-kopf > .mt-eyebrow { flex: 0 0 auto; }
/* Die Zusammenfassung ist EINZEILIG — sie ersetzt den Inhalt, sie wird
   nicht zu einem zweiten Inhalt. `min-width: 0` ist Pflicht: Ein Flex-Kind
   mit dem Vorgabewert `auto` schrumpft nie unter sein laengstes Wort
   (Fallstrick 41), und ein Kapitelname ist genau so ein Wort. */
.mt-side-kopf > .txt {
  flex: 1; min-width: 0; font-size: var(--pp-fs-klein); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-side-kopf > .txt .pp-num { font-family: var(--pp-mono); font-weight: 400; color: var(--pp-text-3); }
/* KEIN Uebergang, und das ist Absicht statt Vergesslichkeit: Zugeklappt
   heisst `display: none`, und daran laesst sich nichts fahren. Damit
   klappt der Kasten unter `prefers-reduced-motion` und bei
   abgeschalteten Animationen genauso zu wie sonst — es ist FUNKTION, kein
   Zierrat, und deshalb haengt es auch nicht an `pp-anim` (der Schalter
   regiert Zierrat; siehe den Kopf von `bindeSideboxen` in js/material.js,
   warum `PreppAnim.bandZuklapp` hier nicht passt). */
.mt-modus {
  display: flex; align-items: center; gap: 9px; border: 1px solid transparent; background: transparent; border-radius: 6px;
  padding: 7px 10px; font-size: var(--pp-fs-klein); color: var(--pp-text-2); cursor: pointer; text-align: left; font-family: inherit;
}
.mt-modus > span { flex: 1; }
.mt-modus > i { font-style: normal; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-modus:hover { border-color: var(--pp-accent-line); }
.mt-modus.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2); font-weight: 600; }
.mt-modus.on > i { color: var(--pp-accent-2); }
.mt-zahlen { font-size: var(--pp-fs-mini); color: var(--pp-text-3); line-height: var(--pp-lh-text); padding: 0 2px; }
.mt-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mt-pruef-setup { padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.mt-pruef-setup > b { font-size: var(--pp-fs-gross); }
.mt-pruef-setup > span { font-size: var(--pp-fs-klein); color: var(--pp-text-2); max-width: 380px; line-height: var(--pp-lh-text); }
.mt-pn { display: flex; align-items: center; gap: 10px; }
.mt-pn > b { font-family: var(--pp-mono); font-size: var(--pp-fs-h1); min-width: 44px; text-align: center; }
.mt-pn > span { font-size: var(--pp-fs-klein); color: var(--pp-text-3); }
.mt-pn .mt-ikon { border: 1px solid var(--pp-line); width: 30px; height: 30px; font-size: var(--pp-fs-gross); }
.mt-fortlauf { display: flex; align-items: center; gap: 10px; }
.mt-fortlauf > .pp-num { font-family: var(--pp-mono); font-size: var(--pp-fs-klein); color: var(--pp-text-2); flex: 0 0 auto; }
.mt-again { font-size: var(--pp-fs-mini); font-weight: 600; color: var(--pp-err); background: var(--pp-err-tint); border-radius: 9px; padding: 1px 8px; flex: 0 0 auto; }
/* ---------- Der 309-px-Ueberlauf bei 390 px (14.09.2026, Jonas) ----------
   GEMESSEN in echtem WebKit (docs/abnahme/karten-lernen-0914/), und die
   Kette steht Glied fuer Glied:

     .mt-karte-frage   innen 650 / aussen 292   ← EIN unbrechbares Wort
     .mt-karte         innen 678 / aussen 348
     .mt-lern          innen 679 / aussen 350
     #app/.pp-root     innen 699 / aussen 390   ⇒ Dokument 699 statt 390

   Zwei Ursachen, und beide muessen weg (Fallstrick 41):
     1. Der Text bricht nicht — `overflow-wrap` war nirgends gesetzt, ein
        langer Fachbegriff ist damit ein 650 px breites Wort.
     2. Die Spalte gibt nicht nach — unter 860 px stand
        `grid-template-columns: 1fr`, und ein blankes `1fr` ist
        `minmax(auto, 1fr)`: Es kann per Definition nicht unter seinen
        min-content schrumpfen. Dasselbe am Flex-Kind `.mt-karte > *`
        (Vorgabe `min-width: auto`).
   Eine der beiden allein genuegt NICHT: Ohne (1) staende das Wort weiter
   aus der Karte heraus, ohne (2) risse die naechste breite Formel die
   Spalte wieder auf. */
.mt-karte > * { min-width: 0; }
.mt-karte-titel, .mt-karte-frage, .mt-karte-antwort { overflow-wrap: anywhere; }
.mt-karte { padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; border-radius: 10px; }
.mt-karte-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-kicker { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
/* Q4: die Tags der Karte im Trainer und in der Fokus-Ansicht. Der LOOK
   kommt seit dem 09.09.2026 aus .mt-marke (Jonas: „hervorgehoben … wie
   ‚als Karte‘"); hier steht nur noch, wie die Reihe liegt. Reine Anzeige
   bleibt es trotzdem: Nur der Knopf traegt Zeiger und Unterstreichung. */
.mt-karte-tags { display: flex; gap: 5px; flex-wrap: wrap; }
/* Der aktive Tag-Filter als eckige Marke mit Abwurfknopf — dieselbe
   Sprache wie .tr-tag der Trainings-Filtersuche: Rueckmeldung mit
   Ausgang, keine Auswahl. Deshalb eckig und nicht rund wie die
   Anzeige-Marken darueber. */
.mt-aktivfilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mt-filtermarke {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2);
  border-radius: 5px; padding: 4px 9px; font-size: var(--pp-fs-mini); font-family: inherit; cursor: pointer;
}
.mt-filtermarke i { font-style: normal; opacity: .6; font-size: var(--pp-fs-mini); }
.mt-filtermarke:hover i { opacity: 1; }
/* „Runde fortgesetzt (7 / 20) · neu beginnen" (17.09.2026) — die eine
   Zeile, die den Uebergang benennt, wenn eine Runde aus dem Merker
   weiterlaeuft. Sie steht UEBER dem Fortschrittsbalken der Karte und ist
   bewusst leise (kein Kasten, keine Flaeche): Sie ist eine Auskunft ueber
   das, was gerade geschah, keine Handlungsaufforderung — der Ausgang
   daneben ist der Knopf. */
.mt-fortgesetzt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: var(--pp-fs-mini); color: var(--pp-text-2);
}
/* Die Vorschau unter dem Tag-Feld des Formulars zeigt seit dem
   09.09.2026 dieselbe MARKE, die danach in der Liste steht (.mt-marke am
   <b>) — vorher war sie gefaerbter Fettdruck und sah damit anders aus als
   ihr eigenes Ergebnis. Der Zeilenabstand haelt die Pillen auseinander,
   wenn die Vorschau umbricht. */
.mt-tagvor { line-height: var(--pp-lh-text); }
.mt-karte-kopf .mt-reife { margin-left: auto; }
.mt-reife {
  font-size: var(--pp-fs-mini); font-weight: 600; border-radius: 9px; padding: 1px 8px; white-space: nowrap;
  color: var(--pp-text-3); background: var(--pp-surface-2);
}
.mt-reife.lernend { color: var(--pp-warn); background: var(--pp-warn-tint); }
.mt-reife.jung    { color: var(--pp-accent-2); background: var(--pp-accent-tint); }
.mt-reife.reif    { color: var(--pp-ok); background: var(--pp-ok-tint); }
.mt-reife.leech   { color: var(--pp-err); background: var(--pp-err-tint); }
.mt-karte-titel { font-weight: 600; }
.mt-karte-frage { font-size: var(--pp-fs-gross); font-weight: 600; line-height: var(--pp-lh-text); }
.mt-trenn { height: 1px; background: var(--pp-line); }
.mt-karte-antwort { font-size: var(--pp-fs-text); line-height: var(--pp-lh-weit); }
/* B1: Die Antwortseite zeigt die Formel AUS DEM FORMELRAUM (eine Wahrheit,
   nie eine Kopie) — abgesetzt wie ein Kursbuch-Verweis, damit man sieht,
   dass sie von woanders kommt. Die Formel scrollt in ihrem eigenen Kasten:
   Ein Flex-Kind schrumpft erst mit min-width: 0, und eine breite Formel
   liefe sonst aus der Karte (dieselbe Ursache wie M3, Fallstrick 41). */
.mt-karte-formel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--pp-line); background: var(--pp-bg); border-radius: 6px; padding: 10px 12px;
}
.mt-karte-formel .mt-tex { font-size: var(--pp-fs-gross); overflow-x: auto; min-width: 0; max-width: 100%; }
.mt-karte-formel .mt-link-btn { margin-left: auto; }
/* Das Gegenstueck im Formel-Formular: „gibt es schon" plus der Weg dorthin. */
.mt-karte-schon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-karte-schon .pp-btn { margin-left: auto; }
.mt-merke {
  border: 1px solid var(--pp-accent-line); background: var(--pp-accent-tint); border-radius: 6px; padding: 9px 12px;
  display: flex; flex-direction: column; gap: 3px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text);
}
.mt-merke > span { font-size: var(--pp-fs-mini); font-weight: 700; letter-spacing: 1px; color: var(--pp-accent-2); }
.mt-auf {
  margin-top: auto; border: 1px dashed var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent-2);
  border-radius: 8px; padding: 13px; font-size: var(--pp-fs-klein); font-weight: 600; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 10px; font-family: inherit;
}
.mt-auf:hover { border-style: solid; }
.mt-auf kbd, .mt-note kbd {
  font-family: var(--pp-mono); font-size: var(--pp-fs-mini); border: 1px solid var(--pp-accent-line); border-radius: 4px; padding: 1px 6px; opacity: .8;
}
.mt-karte-fuss { display: flex; justify-content: flex-end; }
.mt-noten { display: flex; gap: 8px; }
/* W2-22 (qa1013): Am Laptop (1280 × 800) begannen die vier Noten bei
   y ≈ 780 — Kurskopf und Reiter belegen ~480 px über der Karte. Die Leiste
   klebt deshalb am unteren Rand des Bildes, solange die Karte darüber
   hinausragt; im Vollbild sitzt sie ohnehin im Fuß (.mt-voll-fuss). */
.mt-lern .mt-noten {
  position: sticky; bottom: 0; z-index: 2; background: var(--pp-bg, var(--pp-surface));
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
.mt-note {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--pp-line);
  background: var(--pp-surface); border-radius: 8px; padding: 10px 6px; cursor: pointer; font-family: inherit; color: var(--pp-text);
}
.mt-note:hover { box-shadow: var(--pp-lift); }
.mt-note > b { font-size: var(--pp-fs-klein); font-weight: 600; }
.mt-note > i { font-style: normal; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-note kbd { border-color: var(--pp-line); color: var(--pp-text-3); }
.mt-note.n0 { border-color: var(--pp-err); color: var(--pp-err); background: var(--pp-err-tint); }
.mt-note.n1 { border-color: var(--pp-warn); color: var(--pp-warn); }
.mt-note.n3 { border-color: var(--pp-ok); color: var(--pp-ok); background: var(--pp-ok-tint); }
.mt-fertig-runde { padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; border-radius: 10px; }
.mt-fertig-runde > b { font-size: var(--pp-fs-gross); }
.mt-runde-stats { display: flex; gap: var(--pp-sp-6); }
.mt-runde-stats > div { display: flex; flex-direction: column; gap: 1px; }
.mt-runde-stats b { font-family: var(--pp-mono); font-size: var(--pp-fs-h1); }
.mt-runde-stats span { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-tabelle { overflow: hidden; }
/* Q4 (05.09.2026): eine siebte Spalte fuer die Tags. Kapitel und Typ
   geben dafuer je ein paar Pixel ab, statt die Frage schmaler zu machen —
   die Frage ist die Spalte, in der man die Karte wiedererkennt. */
.mt-zeile-k {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px 88px 116px 100px 74px 72px; gap: 10px; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid var(--pp-line); cursor: pointer; font-size: var(--pp-fs-klein);
}
.mt-zeile-k:last-child { border-bottom: 0; }
.mt-zeile-k:hover { background: var(--pp-surface-2); }
.mt-zk-kopf { background: var(--pp-surface-2); font-size: var(--pp-fs-mini); color: var(--pp-text-3); font-weight: 600; cursor: default; padding: 8px 16px; }
.mt-zk-frage, .mt-zk-kap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-zk-kap { font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.mt-zk-typ { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
/* Die Tag-Spalte: kleine Marken, die in EINER Zeile bleiben. Was nicht
   hineinpasst, wird abgeschnitten — die Tags einer Karte stehen
   vollstaendig im Trainer und im Formular, hier geht es ums Erkennen.
   `flex-wrap: nowrap` ist Absicht: Eine umbrechende Zelle machte die
   ganze Zeile hoeher, und eine Kartenliste mit unterschiedlich hohen
   Zeilen laesst sich nicht mehr ueberfliegen. */
.mt-zk-tags { display: flex; gap: 4px; overflow: hidden; flex-wrap: nowrap; align-items: center; }
/* Der LOOK steht in .mt-marke (09.09.2026); hier bleibt, was die SPALTE
   braucht: die Ellipse und das Nachgeben (Fallstrick 41). Das engere
   Polster ebenso — die Spalte ist 116 px breit, und mit dem Polster der
   Reihen passte kein zweiter Tag mehr daneben. */
.mt-zk-tags > i {
  padding: 1px 6px; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Der „+N"-Chip darf nicht schrumpfen — er ist die Auskunft, WIE VIEL
   fehlt; schrumpfte er, waere genau sie das Erste, was verschwindet.
   Der Tag daneben gibt stattdessen nach (Fallstrick 41: wer nowrap
   setzt, sagt dazu, wer nachgibt). */
.mt-zk-tags > i.mehr { flex: 0 0 auto; }
/* Das „—" ist keine Marke, sondern die Auskunft „keine Tags" — es
   traegt .mt-marke gar nicht erst und bleibt der ruhige Strich. */
.mt-zk-tags > i.leer { border: 0; padding: 0; background: none; color: var(--pp-text-3); font-style: normal; }
.mt-zk-due { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-zk-akt { display: flex; justify-content: flex-end; }
/* Gliederung der Kartenliste nach Kursbuch-Kapiteln (01.09.2026,
   docs/KARTEN-KAPITEL.md). Der Kopf ist eine FLAECHE mit eigenem Ton, kein
   zweiter Rahmen: Er trennt Bloecke innerhalb einer Karte, wie der
   Gruppenkopf der Portal-Listen — deshalb --pp-surface-2 und nicht
   --pp-bg-2 (das ist byteweise die Flaeche der Zeilen darunter, Kontrast
   1,00; siehe CLAUDE.md, Listen). Er ist kein Ziel: kein Hover, kein
   Zeiger. */
.mt-zk-gruppe {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 16px; background: var(--pp-surface-2);
  border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line);
  font-size: var(--pp-fs-mini); font-weight: 600; color: var(--pp-text);
}
.mt-zk-gruppe:first-child { border-top: 0; }
.mt-zk-gruppe > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-zk-gruppe > i { font-family: var(--pp-mono); font-style: normal; font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-zk-gruppe.luecke { color: var(--pp-warn); }
.mt-kap-luecke { display: block; margin: 0 0 10px; }
/* Die Kapitelwahl im Handformular — eine Zeile, Beschriftung links. */
.mt-f-kapzeile { display: flex; align-items: center; gap: 10px; }
.mt-f-kapzeile > span { font-size: var(--pp-fs-mini); color: var(--pp-text-2); white-space: nowrap; }
.mt-f-kapzeile > select { flex: 1 1 auto; min-width: 0; }
.mt-stat-tiles { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; }
.mt-stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 13px 16px; border-right: 1px solid var(--pp-line); }
.mt-stat-tile:last-child { border-right: 0; }
.mt-stat-tile > b { font-family: var(--pp-mono); font-size: var(--pp-fs-h1); font-weight: 500; }
.mt-stat-tile > span { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-stat-tile.warn > b { color: var(--pp-warn); }
.mt-stat-tile.ok > b { color: var(--pp-ok); }
.mt-stat-tile.err > b { color: var(--pp-err); }
.mt-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.mt-kaps-stat { padding: 12px 16px; display: flex; flex-direction: column; gap: 11px; }
.mt-kapzeile { display: flex; flex-direction: column; gap: 4px; }
.mt-kapzeile > div:first-child { display: flex; justify-content: space-between; font-size: var(--pp-fs-klein); }
.mt-kapzeile .pp-num { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-kapzeile .mt-bar > i { background: var(--pp-ok); }
.mt-heat { padding: 14px 16px 8px; display: flex; align-items: flex-end; gap: 2px; height: 76px; box-sizing: border-box; }
.mt-heat > i { display: block; flex: 1; background: var(--pp-accent); border-radius: 2px 2px 0 0; min-width: 0; }
.mt-heat-achse { display: flex; justify-content: space-between; padding: 0 16px 10px; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-leech-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--pp-line); font-size: var(--pp-fs-klein); }
.mt-leech-row > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-leech-row .pp-num { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-err); }

/* ---------- Formelraum ---------- */
.mt-formel { border-bottom: 1px solid var(--pp-line); }
.mt-formel:last-child { border-bottom: 0; }
.mt-formel-z { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 0; cursor: pointer; }
.mt-formel-z:hover { background: var(--pp-surface-2); }
/* M4 (22.08.2026): Das Badge „auf dem Blatt/in den Kopf" ist aus der
   Formelzeile weg — der Strich traegt die Sorte jetzt allein und ist dafuer
   von 3 auf 4 px gewachsen. Kontrast beider Farben gegen Zeile UND
   Hover-Grund in beiden Themes >= 3:1 gemessen (verify-material-gebrauch.js);
   der Wortlaut bleibt als title an der Zeile (Barrierefreiheit). */
.mt-strich { width: 4px; align-self: stretch; flex: 0 0 auto; }
.mt-formel.blatt .mt-strich { background: var(--pp-accent); }
.mt-formel.kopf  .mt-strich { background: var(--pp-err); }
.mt-formel-tex { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-formel-tex .mt-tex { font-size: var(--pp-fs-text); overflow-x: auto; }
.mt-zeichen { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-formel-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 240px; }
.mt-caret { font-style: normal; color: var(--pp-text-3); font-size: var(--pp-fs-klein); }
.mt-formel-detail { padding: 4px 16px 14px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--pp-sp-4); font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); }
/* Q3.2: Der Abschnitt ist ein BLOCK, nicht mehr ein Flex-Container in
   Spaltenrichtung. Der machte aus jedem Inline-Element (KaTeX-Span, <b>,
   <code>) und jedem Textstueck ein eigenes Flex-Item — also eine eigene
   Zeile: gemessen 10 Zeilenkaesten und 119 px fuer EINEN Satz bei 499 px
   Spaltenbreite (docs/abnahme/material-q3/BERICHT.md). Nur die
   UEBERSCHRIFT steht auf ihrer eigenen Zeile, der Inhalt fliesst.
   Die Ueberschrift wird ueber ihre KLASSE angesprochen, nicht ueber
   `span:first-child`: KaTeX ersetzt beim Setzen `\(…\)` durch einen
   <span class="katex"> — in einem Abschnitt OHNE Ueberschrift (Q3.3)
   waere der sonst „das erste span" und bekaeme den Ueberschrift-Stil. */
.mt-formel-detail > div { display: block; }
.mt-fd-h { display: block; margin-bottom: 2px; font-size: var(--pp-fs-mini); font-weight: 700; letter-spacing: 1px; color: var(--pp-text-3); }
.mt-formel-detail code, .mt-mini { font-family: var(--pp-mono); font-size: var(--pp-fs-klein); }
.mt-formel-detail .falle { background: var(--pp-warn-tint); border-radius: 6px; padding: 7px 10px; }
.mt-formel-detail .falle > .mt-fd-h { color: var(--pp-warn); }
.mt-formel-detail .warn { font-size: var(--pp-fs-mini); color: var(--pp-warn); }
/* Q3.3: Ueberschriften anpassen — je Abschnitt ein Umschalter („mit /
   ohne Ueberschrift") und, solange er an ist, das Feld dafuer. Der
   Umschalter hat eine feste Breite, damit die Felder eine gemeinsame
   linke Kante haben; `min-width: 0` am Feld, weil ein Flex-Kind sonst
   nie unter seine Inhaltsbreite schrumpft (Fallstrick 41). */
.mt-ub { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mt-ub-liste { display: flex; flex-direction: column; gap: 6px; padding-left: 2px; align-self: stretch; }
.mt-ub-zeile { display: flex; align-items: center; gap: 8px; }
.mt-ub-zeile > .mt-toggle { flex: 0 0 auto; width: 190px; justify-content: flex-start; }
.mt-ub-zeile > input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .mt-ub-zeile { flex-wrap: wrap; }
  .mt-ub-zeile > .mt-toggle { width: 100%; }
}
.mt-fund { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-accent-2); font-weight: 500; cursor: pointer; }
.mt-formel-detail code { font-family: var(--pp-mono); font-size: var(--pp-fs-klein); }

.mt-option {
  display: flex; gap: 11px; border: 1px solid var(--pp-line); background: var(--pp-surface); border-radius: 8px;
  padding: 10px 13px; cursor: pointer; text-align: left; align-items: flex-start; font-family: inherit; color: var(--pp-text);
}
.mt-option:hover { border-color: var(--pp-accent-line); }
.mt-option.on { border-color: var(--pp-accent); background: var(--pp-accent-tint); }
.mt-option > span { display: flex; flex-direction: column; gap: 2px; }
.mt-option b { font-size: var(--pp-fs-klein); }
.mt-option small { font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.mt-radio { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--pp-line-2); margin-top: 1px; box-sizing: border-box; }
.mt-option.on .mt-radio { border-color: var(--pp-accent); background: radial-gradient(circle, var(--pp-accent) 3px, transparent 3.5px); }
.mt-hm-box { border: 1px solid var(--pp-line); background: var(--pp-bg); border-radius: 8px; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
/* Das Datumsfeld traegt einen festen Inhalt (JJJJ-MM-TT) — in der
   Flex-Spalte streckte es sich sonst wie das Freitextfeld ueber die ganze
   Breite und sieht neben zehn Zeichen leer aus. */
#mt-hm-termin { align-self: flex-start; }
/* Leer (ns0929-p6, Befund p1 #21): WebKit malt in ein leeres Datumsfeld das
   HEUTIGE Datum als Platzhalter — neben „Noch kein Termin eingetragen" sah
   das aus wie ein gesetzter Termin. Solange das Feld leer ist und nicht
   bearbeitet wird, bleibt es leer; mit dem Fokus erscheinen die Felder
   zum Tippen. Die Klasse setzt js/material.js (terminLeer). */
#mt-hm-termin.mt-datum-leer:not(:focus)::-webkit-datetime-edit { opacity: 0; }
/* ---- Klausur-Eckdaten (29.08.2026, docs/KLAUSUR-EINSTELLUNGEN.md) ----
   Beschriftung links, kurzes Zahlenfeld rechts; die Beschriftung darf
   umbrechen und unter ihre Textbreite schrumpfen (min-width: 0 —
   Fallstrick 41), das Zahlenfeld traegt eine feste Breite, weil es sich
   in der Flex-Spalte sonst wie ein Freitextfeld streckte (dieselbe
   Begruendung wie #mt-hm-termin). */
.mt-kl-zeile { display: flex; align-items: center; gap: 10px; }
.mt-kl-zeile > label, .mt-kl-frage { flex: 1; min-width: 0; font-size: var(--pp-fs-klein); color: var(--pp-text-2); overflow-wrap: anywhere; }
.mt-kl-zeile > input { flex: 0 0 auto; width: 108px; }
/* Bonus „erreicht / maximal": zwei schmale Kästchen auf der Breite eines
   breiten, damit die Spalte der Eingaben bündig bleibt. */
.mt-kl-paar { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.mt-kl-paar > input { width: 48px; }
.mt-kl-paar-trenn { color: var(--pp-text-3); }
.mt-kl-janein { display: flex; gap: 6px; flex: 0 0 auto; }
.mt-kl-janein .pp-btn.on { border-color: var(--pp-accent); background: var(--pp-accent-tint); color: var(--pp-accent-2); font-weight: 600; }
/* Der Umverteilungs-Schritt: je Zeile Kaestchen, Titel, alt → neu. Der
   Titel schrumpft (min-width: 0), die Punktespanne nie — sie ist die
   Aussage des Schritts. */
.mt-uv-zeile { display: flex; align-items: center; gap: 9px; border: 1px solid var(--pp-line); background: var(--pp-surface); border-radius: 8px; padding: 9px 12px; cursor: pointer; font-size: var(--pp-fs-klein); }
.mt-uv-zeile:hover { border-color: var(--pp-accent-line); }
.mt-uv-titel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mt-uv-punkte { flex: 0 0 auto; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); font-weight: 500; white-space: nowrap; }
.mt-datei { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* `.mt-datei-ico` (das ▤ vor jeder Datei- und Quellenzeile) ist am
   13.09.2026 entfallen — js/material.js, quellenHtml und datei(). */
/* `min-width: 120px` gegen `flex: 1` — und beides zusammen ist genau
   Fallstrick 41: Ein Flex-Kind mit `nowrap` und dem Vorgabewert
   `min-width: auto` kann NIE unter seine Textbreite schrumpfen. Der Name
   traegt deshalb eine ausdrueckliche Untergrenze und `text-overflow`, und
   seit dem 28.08.2026 steht neben ihm ein WORT (das Status-Abzeichen).
   Damit teilen sich in einer 520-px-Zeile fuenf Dinge den Platz; die
   Zeile bricht darum um (`flex-wrap` oben) statt jemanden
   herauszudruecken. */
.mt-datei-name { flex: 1; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 120px; }
.mt-datei-vorlage { border-top: 1px solid var(--pp-line); padding-top: 8px; }

/* ---------- Weitere Quellen je Kurs (13.09.2026) ----------
   docs/MATERIAL-QUELLEN-2026-09-13.md. Eine Quellen-Zeile IST eine
   .mt-datei — dieselbe Zeile wie beim Skript, nur mit einer Art-Marke
   davor. Deshalb steht hier nur, was dazukommt; alles Uebrige (Umbruch,
   Namensbreite, Abzeichen-Wirt) erbt sie und bleibt eine Regel.

   `.mt-quellen` traegt `flex: 1` samt `min-width: 0`: In der Uebersicht
   steht es als ZWEITES Kind einer `.mt-hilfs-z` neben der 84-px-Spalte
   der Eyebrow, und ohne die Untergrenze koennte es nicht unter seine
   Inhaltsbreite schrumpfen (Fallstrick 41 — genau die Falle, die zwei
   Zeilen weiter oben schon einmal zugeschlagen hat). Die 200 px sind
   dieselbe Schwelle wie bei `.mt-hilfs-z > span:nth-child(2)`. */
.mt-quellen { flex: 1; min-width: min(200px, 100%); display: flex; flex-direction: column; gap: 7px; }
.mt-hm-box > .mt-quellen { border-top: 1px solid var(--pp-line); padding-top: 8px; }
/* Die Art steht als WORT, nicht als Farbe: Ein Kurs kann vier
   Uebungsblaetter und drei Altklausuren tragen, und welche Zeile welche
   ist, muss auch in Graustufen lesbar sein (dieselbe Regel wie beim
   EIN-Zustand des Sandbox-Bandes). */
.mt-quelle-art {
  flex: 0 0 auto; font-size: var(--pp-fs-mini); font-weight: 500; line-height: var(--pp-lh-eng);
  color: var(--pp-text-2); background: var(--pp-surface-2);
  border: 1px solid var(--pp-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.mt-quelle-neu > .mt-select { flex: 0 0 auto; width: auto; min-width: 150px; }
/* ---------- Die Quellen als AUSWAHL (14.09.2026) ----------
   Nur im Kursinit-Dialog (`quellenHtml(cid, { waehlbar: true })`). Das
   Kaestchen steht VOR der Art-Marke und darf nicht schrumpfen: `.mt-datei`
   ist ein Flex-Container mit Umbruch, und ein Kaestchen, das als Erstes
   nachgibt, waere ein Zustand ohne Traeger. Die Zeile erbt sonst alles
   von `.mt-datei`/`.mt-quelle` — eine Zeile, eine Gestalt. */
.mt-quelle-kast { flex: 0 0 auto; margin: 0; accent-color: var(--pp-accent); }
/* Eine feste Datei traegt ihre Art als WORT wie jede Quelle („Skript",
   „Formelblatt") — sie steht damit in derselben Spalte und laesst sich
   mit einem Blick von den weiteren Quellen unterscheiden. */
.mt-quelle-fest > .mt-quelle-art { background: var(--pp-accent-tint); }
@media (hover: none) {
  /* R3/C56: Das Kaestchen ist der einzige Bedienweg dieser Zeile — die
     Flaeche wird ueber ein `::before` vergroessert (Muster
     .mt-plan-los/.mt-check-hak), damit die Zeilenhoehe bleibt. */
  .mt-quelle-kast { position: relative; }
  .mt-quelle-kast::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}
@media (hover: none) {
  /* R3/C56: Ansehen und Entfernen stehen hier dauerhaft sichtbar und
     werden mit dem Finger getroffen. Dieselbe Rechnung wie bei den
     Nebenknoepfen der Listen in prepp.css. `.mt-datei .mt-ext-neu` ist
     seit dem 14.09.2026 dabei: „Analyse fortsetzen"/„erneut versuchen"
     stehen auch an der Skript-Zeile des ⚙-Dialogs, die keine .mt-quelle
     ist. */
  .mt-quelle .pp-btn, .mt-quelle-neu .pp-btn, .mt-quelle-neu .mt-select, .mt-datei .mt-ext-neu {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-top: 0; padding-bottom: 0;
  }
  /* Das Abzeichen als KNOPF (⚠ und Haengt) ist 11 px hoch — gemessen bei
     390 px. Vergroessert wird die FLAECHE ueber ein ::before (Muster
     .mt-plan-los, .mt-check-hak), nicht der Kasten: Die Zeile behaelt
     ihre Hoehe. Volle Breite des Abzeichens, 44 px hoch. */
  button.mt-ext { position: relative; }
  button.mt-ext::before {
    content: ""; position: absolute; top: 50%; left: 0;
    width: 100%; height: 44px; transform: translateY(-50%);
  }
}

/* ---------- Die Übungsblätter (Stufe 2, Paket 03a, 23.09.2026) ----------
   docs/BLAETTER-2026-09-23.md. Je Blatt eine Gruppe aus drei Reihen —
   Datei, Frist und Stand, Lösung —, und JEDE Reihe ist eine .mt-datei:
   Umbruch, Namensbreite (Fallstrick 41) und Abzeichen-Wirt erbt sie von
   dort, hier steht nur, was dazukommt. Die Gruppe trägt einen Rahmen,
   weil drei Reihen ohne ihn in die des nächsten Blattes liefen.

   `.mt-blaetter` hat dieselbe Flex-Rolle wie `.mt-quellen`: In der
   Übersicht steht es als zweites Kind einer `.mt-hilfs-z` neben der
   84-px-Spalte der Eyebrow und muss unter seine Inhaltsbreite schrumpfen
   dürfen. */
.mt-blaetter { flex: 1; min-width: min(200px, 100%); display: flex; flex-direction: column; gap: 7px; }
.mt-blaetter-kasten { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--pp-line); padding-top: 8px; }
.mt-blatt { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--pp-line); border-radius: 8px; padding: 7px 10px; }
/* Beschriftung und Feld als EINE Einheit, die nie auseinanderbricht —
   „Woche" ohne sein Feld in der Reihe darunter hieße nichts. */
.mt-blatt-feld { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.mt-blatt-lbl { font-weight: 600; }
/* Das Wochenfeld trägt höchstens zwei Ziffern; in der Flex-Reihe streckte
   es sich sonst wie ein Freitextfeld (Begründung wie #mt-hm-termin). */
.mt-blatt-feld > .mt-blatt-woche { width: 64px; }
.mt-blatt-stand { font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.mt-blatt-stand.ok { color: var(--pp-ok); font-weight: 500; }
/* Stufe 2, 03b: ein Erzeugen-Lauf läuft — Akzentschrift, kein Urteil. */
.mt-blatt-stand.laeuft { color: var(--pp-accent-2); font-weight: 500; }
/* r1-07: die VORGESCHLAGENE Frist. Das Feld trägt sie wie eine echte
   (änderbar), aber gestrichelt, und daneben steht das WORT — eine
   Strichelung allein läse niemand als „geschätzt“. Die Marke hat keine
   Bewertungsfarbe: Ein Vorschlag ist kein Fehler und kein Urteil.
   Feld und Marke sind eine Gruppe, die umbrechen darf (Fallstrick 41:
   min-width 0, sonst schöbe sie bei 390 px die Zeile auf). Der Selektor
   trägt `input`, weil die Grundregel der Material-Felder
   (.mt-page input:not(…):not(…)) sonst spezifischer wäre — in WebKit
   gemessen: ohne ihn blieb der Rahmen durchgezogen. */
.mt-blatt-frist { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.mt-blatt-frist .mt-blatt-feld > input.mt-blatt-faellig.vorgeschlagen { border-style: dashed; color: var(--pp-text-2); }
.mt-blatt-vorschlag {
  display: inline-flex; align-items: center; font-size: var(--pp-fs-mini); font-weight: 600;
  color: var(--pp-text-2); border: 1px dashed var(--pp-line-2); border-radius: 999px; padding: 1px 8px;
}
/* Die [hidden]-Falle: eine display-Regel schlägt die Browserregel. */
.mt-blatt-vorschlag[hidden] { display: none; }
/* Ohne Plan: EINE Zeile über den Blättern — der Satz nimmt den Platz,
   der Knopf bleibt rechts daneben (auf dem Telefon darunter). */
.mt-blatt-plan > .mt-hint { flex: 1 1 200px; min-width: 0; }
@media (hover: none) {
  /* R3/C56: Die Knöpfe und Felder der Wochenliste werden mit dem Finger
     getroffen — dieselbe Rechnung wie bei den Quellenzeilen oben. */
  .mt-blatt .pp-btn, .mt-blatt-neu .pp-btn, .mt-blatt-plan .pp-btn, .mt-blatt-feld > input {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-top: 0; padding-bottom: 0;
  }
}

/* ---------- Status der Skript-Analyse (B1, 28.08.2026) ----------
   Ein Abzeichen am Dateinamen sagt, ob der Professor diese Datei als Text
   lesen kann (docs/SKRIPT-EXTRAKTE.md). Der Wirt steht IMMER im Markup und
   ist leer, solange es nichts zu melden gibt — so bleibt die Zeilenbreite
   ruhig und der asynchrone Nachtrag muss nichts einfuegen (er beschreibt
   nur diesen einen Knoten, nie den Dialog: Fallstrick 8).
   `flex: 0 0 auto` ist Pflicht: .mt-datei-name traegt `flex: 1` und nimmt
   sich sonst den Platz des Abzeichens. */
/* `max-width: 100%` (14.09.2026, WebKit bei 390 px gemessen): `flex: 0 0
   auto` heisst „nie schrumpfen" — die Breite ist dann der Max-Content,
   und „••• Hängt seit 55 min" plus „Analyse fortsetzen" sind 319 px in
   einer 220-px-Spalte: 63 px waagerechter Ueberlauf der ganzen Seite.
   Die Zeile bricht den Wirt zwar in eine eigene Reihe um, aber dort ist
   er ohne Deckel weiter 319 px breit, und das innere `flex-wrap` hat
   nichts zu wrappen. Der Deckel gibt ihm die Reihenbreite, dann wandert
   der Knopf in die zweite Zeile. Dasselbe traf vorher „⚠ Analyse
   gescheitert" plus „erneut versuchen" (Bestand, mitbehoben). */
.mt-ext-wirt { flex: 0 0 auto; max-width: 100%; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.mt-ext { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng);
  background: none; border: 0; padding: 0; font-family: inherit; }
/* ---------- Das WORT neben dem Glyph (28.08.2026) ----------
   Der Zustand stand bis dahin ausschliesslich im `title` eines 12-px-
   Zeichens: unsichtbar, auf dem Telefon unerreichbar, mit der Tastatur
   erst recht. Jetzt steht er als Text daneben — und weil `.mt-datei` eine
   FLEX-Zeile in einem 520-px-Dialog ist, ist das nicht folgenlos
   (Fallstrick 41). Drei Regeln greifen ineinander, und keine ist
   austauschbar:

   - Der WIRT schrumpft NIE (`flex: 0 0 auto`, Zeile darueber). Ein
     `min-width: 0` waere hier genau falsch: `.mt-datei-name` traegt
     `flex: 1`, und mit erlaubtem Schrumpfen naehme es dem Abzeichen den
     Platz weg, bis es verschwindet.
   - Dafuer bricht der Wirt INNEN um (`flex-wrap`): Bei „⚠ Analyse
     gescheitert" plus „Analyse erneut versuchen" rutscht der Knopf in
     eine zweite Zeile, statt aus dem Dialog zu laufen.
   - Und die ZEILE bricht um (`flex-wrap` an `.mt-datei`, stand schon da),
     statt jemanden herauszudruecken.

   Das Wort selbst bricht NICHT um (`nowrap`) — es ist kurz und soll als
   eine Einheit lesbar bleiben. `font-weight: 500` statt fett: Es ist eine
   Zustandsangabe, keine Ueberschrift. */
.mt-ext-wort { font-weight: 500; font-size: var(--pp-fs-mini); white-space: nowrap; }
.mt-ext.ok { color: var(--pp-ok); }
.mt-ext.warn { color: var(--pp-warn); }
.mt-ext.laeuft { color: var(--pp-text-3); }
.mt-ext.offen { color: var(--pp-text-3); }
/* HAENGT (14.09.2026, docs/EXTRAKT-HAENGT-2026-09-14.md): eine Zeile, an
   der der Server seit der Stale-Frist nichts mehr gerechnet hat. Warnfarbe
   wie das ⚠ — es braucht eine Handlung —, aber die drei Punkte bleiben
   und stehen STILL: Der Zustand ist „unterbrochen", nicht „gescheitert",
   und Bewegung wuerde behaupten, dass etwas laeuft (die Puls-Regel unten
   haengt an `.laeuft`, nicht an den Punkten). */
.mt-ext.haengt { color: var(--pp-warn); }
.mt-ext.haengt .mt-ext-punkt { opacity: .7; }
/* „· seit N min" hinter „In Verarbeitung" — Nebenauskunft, gleiche Groesse
   wie das Wort, nicht fett; bricht nicht um (es ist eine Einheit). */
.mt-ext-seit { font-size: var(--pp-fs-mini); white-space: nowrap; margin-left: 2px; }
/* fx1021 (ab1020e S2-4): Der Fortschritt einer Analyse („Seite 2 von 10 ·
   Scan wird als Bild gelesen") ist eine EIGENE Zeile unter dem Abzeichen —
   volle Breite im Wirt (flex-basis 100 %), und sie bricht um. Als nowrap-
   Nebenwort im Abzeichen lief sie am iPhone 137 px aus der Zeile. Ebenso
   darf das lange Wort „Mit deinem Schlüssel nicht analysiert" am Knopf
   umbrechen (max-width: der Wirt, nie mehr). */
.mt-ext-fortschritt { flex: 1 1 100%; min-width: 0; font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng);
  color: var(--pp-text-3); white-space: normal; overflow-wrap: anywhere; }
.mt-ext.haengt { max-width: 100%; text-align: left; }
.mt-ext.haengt .mt-ext-wort { white-space: normal; min-width: 0; }
/* Das ⚠ ist ein KNOPF (der Weg zum vollen Grund) — es soll aber aussehen
   wie das Abzeichen daneben, nicht wie ein Bedienelement zweiter Art. */
button.mt-ext { cursor: pointer; }
button.mt-ext:hover, button.mt-ext:focus-visible { text-decoration: underline; }
.mt-ext-neu { flex: 0 0 auto; }
.mt-ext-punkt { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; }

/* Die Bewegung haengt an `.pp-anim` am body (docs/ANIMATIONEN.md) — ohne
   den Schalter stehen dieselben drei Punkte still da. Die AUSKUNFT ist in
   beiden Faellen dieselbe; bewegt wird nur, wenn der Nutzer es erlaubt
   hat. Die @keyframes stehen unbedingt, weil CSS sie nicht verschachteln
   kann — wirksam werden sie erst durch die `animation`-Zeile darunter,
   und die traegt den Vorfahren. */
@keyframes mt-ext-puls { 0%, 80%, 100% { opacity: .28; } 40% { opacity: 1; } }
.pp-anim .mt-ext.laeuft .mt-ext-punkt { animation: mt-ext-puls 1.2s ease-in-out infinite; }
.pp-anim .mt-ext.laeuft .mt-ext-punkt:nth-child(2) { animation-delay: .18s; }
.pp-anim .mt-ext.laeuft .mt-ext-punkt:nth-child(3) { animation-delay: .36s; }
.mt-pdf-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mt-pdf-kopf > .mt-hint { flex: 1; }
.mt-pdf-rahmen { width: 100%; height: 70vh; border: 1px solid var(--pp-line); border-radius: 6px; background: #fff; }

/* ---------- Kursbuch ---------- */
.mt-buch { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.mt-kapliste { padding: 12px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 14px; }
.mt-kapliste > .mt-eyebrow { padding: 2px 6px 7px; }
/* N4b: Der Kopf der Kapitelliste steht IMMER im Markup (eine zweite
   Fassung je Fensterbreite waere ein zweiter Renderweg) und ist am
   Schreibtisch schlicht nicht da — dort traegt die Spalte ihr Etikett
   „KAPITEL" wie bisher. Beide Regeln kehren sich in der Medienabfrage
   weiter unten um. */
.mt-kapliste-kopf { display: none; }
.mt-kapliste > .mt-eyebrow.breit { display: block; }
.mt-kap {
  display: flex; flex-direction: column; gap: 2px; border: 1px solid transparent; background: transparent; border-radius: 6px;
  padding: 8px 10px; cursor: pointer; text-align: left; font-family: inherit; color: var(--pp-text-2);
}
.mt-kap:hover { border-color: var(--pp-accent-line); }
.mt-kap.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-text); }
.mt-kap > span { font-size: var(--pp-fs-klein); line-height: var(--pp-lh-knapp); }
.mt-kap.on > span { font-weight: 600; }
.mt-kap > small { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-kap b.ok { color: var(--pp-ok); }
/* Kursbuch ↔ Lernplan (docs/KURSBUCH-LERNPLAN.md) — der Termin steht am
   Kapitel, damit „wie weit muss ich sein?" ohne Seitenwechsel beantwortet
   ist. Faellig heisst „heute oder frueher", nicht „verpasst": Der Plan
   sperrt nichts. */
.mt-kap > span { display: flex; align-items: baseline; gap: 7px; }
.mt-kap-plan {
  margin-left: auto; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); font-style: normal;
  color: var(--pp-text-3); border: 1px solid var(--pp-line); border-radius: 4px; padding: 0 4px;
}
.mt-kap-plan.faellig { color: var(--pp-accent-2); border-color: var(--pp-accent-line); }
.mt-kap-offen { color: var(--pp-accent-2); }
.mt-plan {
  border: 1px solid var(--pp-line); border-left: 3px solid var(--pp-accent); border-radius: 6px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; background: var(--pp-surface);
}
.mt-plan.leer { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-plan.leer .pp-btn { margin-left: auto; }
/* „＋ Aus dem Lernplan einziehen" steht am ENDE einer Spalte und wurde
   von ihr auf die volle Breite gedehnt — bei 1440 px gemessen 768 px
   fuer einen `slim`-Knopf. `align-self` nimmt ihn aus der Dehnung; der
   leere Fall daneben ist eine ZEILE und bleibt unberuehrt. */
.mt-plan:not(.leer) > #mt-plan-zieh { align-self: flex-start; }
.mt-plan-tag { display: flex; flex-direction: column; gap: 4px; }
.mt-plan-kopf { display: flex; align-items: baseline; gap: 9px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.mt-plan-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; border-top: 1px solid var(--pp-line); }
.mt-plan-row.done { opacity: .55; }
.mt-plan-row.done b { text-decoration: line-through; }
.mt-plan-row .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mt-plan-row b { font-size: var(--pp-fs-klein); font-weight: 600; }
.mt-plan-row i { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); font-style: normal; }
.mt-plan-min { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
/* Der Rand steht auf --pp-line-2 und nicht auf --pp-line — aus demselben
   Grund und mit denselben Zahlen wie beim Nachbarn .mt-kap-check weiter
   unten (B50 der Abnahme vom 04.09.2026): Der Haken, um den es in Jonas'
   Bug ging, war das SCHWAECHSTE Kaestchen der Seite (WebKit gemessen:
   Rand gegen Grund 1,41 dunkel / 1,37 hell, gegen 1,83/1,63 beim direkten
   Nachbarn). Die Angleichung des Kapitel-Kaestchens hat ihn liegen
   lassen — derselbe Griff, eine Zeile weiter. Auch danach bleibt er unter
   den 3 : 1 von WCAG 1.4.11; das haengt am Token und ist Jonas'
   zurueckgestellte Entscheidung. */
.mt-plan-hak {
  width: 19px; height: 19px; flex: none; border: 1px solid var(--pp-line-2); border-radius: 4px;
  background: var(--pp-bg); color: var(--pp-ok); cursor: pointer; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng);
}
.mt-plan-hak:hover { border-color: var(--pp-accent-line); }
/* Die eingebetteten Lernplan-Bloecke (01.09.2026): Der Kopf ist nur noch
   die AUSKUNFT (.mt-plan.kopfzeile), die Aufgaben stehen als klickbare
   Zeilen hinter der Theorie (.mt-plan-aufgaben) — die ZEILE ist die
   Flaeche (Portal-Muster), deshalb cursor/hover an der Zeile selbst. */
.mt-plan.kopfzeile { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mt-plan-aufgaben { border-left-color: var(--pp-ok); }
.mt-plan-row.block { cursor: pointer; border-radius: 6px; padding: 6px 8px; margin: 0 -8px; }
.mt-plan-row.block:hover { background: var(--pp-accent-tint); }
.mt-plan-row.block.sim b { color: var(--pp-accent-2); }
.mt-plan-datum { flex: none; font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-plan-auf { flex: none; color: var(--pp-text-3); }
.mt-plan-row.block:hover .mt-plan-auf { color: var(--pp-accent-2); }
/* Die Marke im Kursbuch-Block und im Einzieh-Dialog: Beide faerben ihr
   `i` auf --pp-text-3 (0,1,1), und material.css laedt NACH prepp.css —
   ohne diese zwei Zeilen stuende die Marke dort grau statt rot. Dieselbe
   Ueberschreibung wie in prepp.css, aus demselben Grund (eine neue
   pauschale Regel schlaegt keine aeltere spezifischere). */
.mt-plan-row i .lp-marke, .mt-zieh-row i .lp-marke { color: var(--pp-err); font-weight: 600; }
/* Der Trenner der Referenzzeile (19.09.2026) — `pre` haelt sein
   Leerzeichen, in einer Flex-Zeile frisst es der Umbruchalgorithmus sonst. */
.mt-plan-row .lp-rm-sep, .mt-zieh-row .lp-rm-sep { flex: none; white-space: pre; }
/* AUF DEM TELEFON REICHT EINE ZEILE NICHT (WebKit 390 px, gemessen am
   19.09.2026): Die Spalte des `i` ist im Kursbuch nur 159 px breit (im
   Dialog 216), und darin blieb dem Kopf 0 px — sichtbar war nur eine
   Ellipse —, waehrend der Rest („· A01 · Aufgabe · ● falsch", 180–326 px)
   am `overflow: hidden` des `i` abgeschnitten wurde. Beides unlesbar ist
   schlechter als zwei Zeilen: Deshalb bekommt der Kopf hier seine eigene
   Zeile (Ellipse wie oben), der Trenner faellt weg, und der Rest darf
   UMBRECHEN statt zu kuerzen — wortgleich die Loesung, die `.tr-m` in der
   Trefferliste seit dem 17.09. traegt (css/prepp.css).

   Die Regel gilt NUR den zwei Kursbuch-Zeilen, nicht `i.lp-rm` allgemein:
   Die Lernplan-Zeile hat weniger Nachbarn, dort stand der Rest bei 390 px
   gemessen GANZ im Bild (Abnahme 17.09., 105–106 px) — eine pauschale
   Regel erzwaenge ihr einen Umbruch, den sie nicht braucht.

   Die 640 px sind die Schwelle von `.tr-m`; die Kursbuch-Umbrueche selbst
   liegen bei 860 px (.mt-akt) — hier geht es um die Zeile, nicht um die
   Spalte. */
@media (max-width: 640px) {
  .mt-plan-row i.lp-rm, .mt-zieh-row i.lp-rm { flex-wrap: wrap; }
  .mt-plan-row .lp-ref, .mt-zieh-row .lp-ref { flex: 1 1 100%; }
  .mt-plan-row .lp-rm-sep, .mt-zieh-row .lp-rm-sep { display: none; }
  .mt-plan-row .lp-rm-rest, .mt-zieh-row .lp-rm-rest {
    flex: 0 1 auto; min-width: 0; white-space: normal;
  }
}
/* ---- Einziehen und Lösen (07.09.2026, Jonas' Punkt 3) ----
   Das ✕ ist eine NEBENaktion in einer Zeile, die selbst die Flaeche ist:
   Es erscheint erst beim Ueberfahren (Portal-Muster .pp-actions) und
   bleibt auf Touch dauerhaft sichtbar — dort gibt es kein Hover, und ein
   Knopf, den man nur mit der Maus findet, ist auf dem Telefon keiner. */
.mt-plan-los {
  flex: none; border: none; background: none; color: var(--pp-text-3);
  cursor: pointer; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng);
  padding: 4px 6px; border-radius: 5px; opacity: 0;
}
.mt-plan-row.block:hover .mt-plan-los, .mt-plan-los:focus-visible { opacity: 1; }
.mt-plan-los:hover { color: var(--pp-err); background: var(--pp-err-tint); }
/* Auf Touch ist er DAUERHAFT sichtbar — und dann gilt R3: gemessen war er
   20 × 21 px, also die Haelfte der Trefferflaeche, die ein Finger braucht.
   Er steht in keiner der zwei R3-Listen in prepp.css (er entstand am
   07.09.2026, danach), deshalb steht die Regel hier bei ihm. Sichtbar
   bleibt das kleine ✕ — vergroessert wird die FLAECHE (Muster
   `.lp-unit .cb::before`), damit die Zeile ihre Hoehe behaelt. */
@media (hover: none) {
  .mt-plan-los { opacity: 1; position: relative; }
  .mt-plan-los::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}
/* Der Einzieh-Dialog: eine Liste aus Kaestchen, nach Datum gruppiert.
   Gerollt wird die LISTE, nicht der ganze Dialog (WebKit gemessen am
   07.09.2026): Mit `overflow: auto` an `.mt-zieh` lag die Fusszeile
   INNERHALB des Rollkastens — bei 390 px waren von „Abbrechen" und
   „Einziehen" beim Oeffnen **0 px** zu sehen, man musste 123 px weit in
   der Liste rollen, um sie zu finden. Das ist die Kette aus dem
   Einstellungsfenster (17.08.2026): Rollen kann nur, wo JEDES Glied
   darueber schrumpfen darf — also `min-height: 0` an beiden. */
.mt-zieh { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; min-height: 0; }
.mt-zieh-liste {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.mt-zieh-tag { display: flex; flex-direction: column; gap: 2px; }
.mt-zieh-row {
  display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 6px; cursor: pointer;
}
.mt-zieh-row:hover { background: var(--pp-accent-tint); }
.mt-zieh-row .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mt-zieh-row b { font-size: var(--pp-fs-klein); font-weight: 600; }
.mt-zieh-row i { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); font-style: normal; }
/* Die EINE Kapitel-Checkbox am Kapitelanfang (01.09.2026). `auto` heisst:
   abgeleitet aus „alles erledigt", kein Hand-Haken — gestrichelter Rand,
   der Titel sagt es. */
/* Der Rand steht auf --pp-line-2, nicht auf --pp-line: Das ist der Ton, den
   das Kaestchen des Lernplans (.lp-unit .cb) seit jeher traegt, und die zwei
   sind dasselbe Bedienelement an zwei Orten. Mit --pp-line war die WICHTIGSTE
   neue Bedienung dieser Welle das SCHWAECHSTE Kaestchen der Seite (WebKit
   gemessen: Rand gegen Grund 1,55 dunkel / 1,29 hell, gegen 1,83/1,63 beim
   Lernplan und 6,38/4,52 beim Checkpoint). Auch danach bleibt es unter den
   3:1 von WCAG 1.4.11 — das haengt am Token und ist Jonas' zurueckgestellte
   Entscheidung, hier wird nur der Ausreisser eingefangen. */
.mt-kap-check {
  width: 22px; height: 22px; flex: none; border: 1.5px solid var(--pp-line-2); border-radius: 5px;
  background: var(--pp-bg); color: var(--pp-bg); cursor: pointer; font-size: var(--pp-fs-klein); font-weight: 700;
  line-height: var(--pp-lh-eng); padding: 0;
}
.mt-kap-check:hover { border-color: var(--pp-accent-line); }
.mt-kap-check[aria-checked="true"] { background: var(--pp-ok); border-color: var(--pp-ok); }
/* `auto` heisst „der Haken steht aus der RECHNUNG, nicht weil jemand ihn
   gesetzt hat" (docs/KURSBUCH-INTERAKTIV.md 5). Ein blosses border-style
   sagte das NICHT: Die Regel darueber faerbt den Rand auf --pp-ok, also
   auf die Farbe der Fuellung — ein gestrichelter Rand in der Farbe seines
   Grundes ist unsichtbar (WebKit gemessen: Rand und Flaeche beide
   rgb(63,185,80), Hand- und auto-Zustand pixelgleich, unterschieden nur
   noch durch den title). Genommen ist deshalb wortgleich die Form, die
   dieselbe Aussage im Lernplan schon traegt (.lp-unit .cb.auto): getoente
   Flaeche, gestrichelter Rand in der Signalfarbe, Haken in derselben
   Farbe — die Strichelung wird erst dadurch sichtbar. */
.mt-kap-check.auto { background: var(--pp-ok-tint); border: 1.5px dashed var(--pp-ok); color: var(--pp-ok); }
/* Auf dem Finger: die Kapitel-Checkbox war 22 × 22 px wirksam (ns0929-p3,
   iPad hoch und Telefon) — ihr Nachbar .mt-check-hak hat den Vorsatz
   seit dem 09.09., sie nicht. Dasselbe Muster: die FLAECHE waechst, das
   Kaestchen bleibt. */
@media (hover: none) {
  .mt-kap-check { position: relative; }
  .mt-kap-check::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}
.mt-kap-ok { font-style: normal; color: var(--pp-ok); font-weight: 700; }
.mt-luecke-liste { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.mt-luecke-row { display: flex; gap: 9px; font-size: var(--pp-fs-mini); }
.mt-luecke-row .grow { flex: 1; min-width: 0; }
.mt-buch-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-buch-kopf .pp-h2 { font-size: var(--pp-fs-h2); font-weight: 600; }
.mt-skript {
  display: flex; align-items: center; gap: 7px; border: 1px solid var(--pp-line); background: var(--pp-surface); border-radius: 6px;
  padding: 6px 11px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); cursor: pointer; max-width: 230px; font-family: var(--pp-mono);
}
.mt-skript > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-skript:hover { background: var(--pp-surface-2); }
.mt-box {
  border: 1px solid var(--pp-line); border-left: 3px solid var(--mt-box-farbe, var(--pp-text-3)); border-radius: 6px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 7px; background: var(--pp-surface);
}
.mt-box-h { display: flex; align-items: center; gap: 8px; font-size: var(--pp-fs-mini); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mt-box-farbe, var(--pp-text-2)); }
/* Q2 Punkt 4 (05.09.2026): Die EIGENE Ueberschrift eines Textkastens ist
   ein Titel, kein Etikett — sie folgt dem Fliesstext (gemischte
   Schreibung, Textfarbe) statt der 10-px-Versalienzeile, die die
   Farbsprache der uebrigen Boxarten traegt. */
.mt-box-h.eigen { font-size: var(--pp-fs-text); letter-spacing: 0; text-transform: none; color: var(--pp-text); }
.mt-box-md { font-size: var(--pp-fs-klein); line-height: var(--pp-lh-weit); max-width: 70ch; }
.mt-box-verweis { border: 1px solid var(--pp-line); background: var(--pp-bg); border-radius: 6px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mt-box-verweis > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mt-box-verweis small { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-box-verweis .mt-link-btn, .mt-box-verweis .pp-btn { margin-left: auto; }
/* Q2 Punkt 6 (05.09.2026): Der ganze Verweiskasten ist die Fläche
   („die Fläche ist der Knopf", CLAUDE.md Abschnitt 6) — wörtlich die
   Bauart der Lernplan-Zeilen unten im selben Kapitel
   (.mt-plan-row.block). Der Knopf am rechten Rand ist damit zur
   BESCHRIFTUNG geworden: Er sagt weiterhin, wohin es geht, ist aber
   kein zweiter Tabstopp und keine zweite Aktion mehr. */
.mt-box-verweis.pp-pick { cursor: pointer; text-decoration: none; color: inherit; }
.mt-box-verweis.pp-pick:hover { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); }
.mt-box-verweis.pp-pick:hover .mt-verweis-auf { color: var(--pp-accent-2); }
.mt-verweis-auf {
  margin-left: auto; flex: 0 0 auto; font-size: var(--pp-fs-mini); font-weight: 600;
  color: var(--pp-text-2); display: flex; align-items: center; gap: 5px;
}
.mt-verweis-auf > i { font-style: normal; color: var(--pp-accent-2); }
.mt-box-verweis .mt-tex { font-size: var(--pp-fs-text); }
/* Q2 Punkt 1 (05.09.2026): Die Notiz „die verwiesene Aufgabe gibt es in
   dieser Klausur nicht mehr" steht IM lebenden Verweiskasten. Ohne diese
   Zeile erbt sie die Grauschrift von `.mt-box-verweis small` (die
   Spezifitaet 0,1,1 schlaegt `.mt-fehlt`) — ein Hinweis in der
   leisesten Farbe des Portals ist keiner. */
.mt-box-verweis small.mt-fehlt { color: var(--pp-warn); font-style: italic; }
/* Die Farbsprache der Ueber-Nacht-Buecher: Etikettfarbe = Boxfarbe, je Theme
   nachgemessen (WCAG AA, docs/KURSMATERIAL.md). */
.mt-box.kopf    { --mt-box-farbe: #ff7b72; background: var(--pp-err-tint); }
.mt-box.blatt   { --mt-box-farbe: var(--pp-accent); background: var(--pp-accent-tint); }
.mt-box.aufgabe { --mt-box-farbe: var(--pp-ok); background: var(--pp-ok-tint); }
.mt-box.check   { --mt-box-farbe: var(--pp-warn); background: var(--pp-warn-tint); }
.mt-box.falle   { --mt-box-farbe: #e3b341; }
.mt-box.jetztdu { --mt-box-farbe: #46c8b8; }
.mt-box.boss    { --mt-box-farbe: #f0857c; }
.mt-box.wozu    { --mt-box-farbe: var(--pp-text-2); background: var(--pp-surface-2); }
body[data-theme="light"] .mt-box.kopf    { --mt-box-farbe: var(--pp-err); }
body[data-theme="light"] .mt-box.blatt   { --mt-box-farbe: #0a4fb5; }
body[data-theme="light"] .mt-box.falle   { --mt-box-farbe: #7a5c00; }
body[data-theme="light"] .mt-box.jetztdu { --mt-box-farbe: #10736a; }
body[data-theme="light"] .mt-box.boss    { --mt-box-farbe: #a13a30; }
/* Das Kaestchen des Checkpoints (16.08.2026). Es traegt die Farbe seiner
   Box (--mt-box-farbe, in beiden Themes nachgemessen) statt einer eigenen —
   sonst haette der Kasten zwei Farben, die dasselbe meinen. Abgehakt bleibt
   der Kasten LESBAR und wird nur ruhiger (Muster .mt-plan-row.done: ausgrauen
   statt durchstreichen) — ein Checkpoint, den man nicht mehr lesen kann,
   taugt beim zweiten Durchgang nicht mehr. */
.mt-check-hak {
  width: 17px; height: 17px; flex: none; border: 1.5px solid var(--mt-box-farbe, var(--pp-text-3));
  border-radius: 4px; background: var(--pp-bg); color: var(--mt-box-farbe, var(--pp-text-2));
  cursor: pointer; font-size: var(--pp-fs-mini); font-weight: 700; line-height: var(--pp-lh-eng); padding: 0;
}
.mt-check-hak:hover { background: var(--pp-surface-2); }
/* Auf dem Finger 44 x 44 (WebKit gemessen am 09.09.2026: der Haken war
   17 x 17, also gut ein Drittel der Flaeche, die R3/C56 zusichert).
   Vergroessert wird die FLAECHE, nicht das Kaestchen — sonst haette die
   Kopfzeile der Box auf dem Telefon eine andere Hoehe als am Laptop;
   woertlich das Muster von `.mt-plan-los::before` weiter oben.
   `position: relative` steht in der Regel selbst: Ohne sie hinge das
   ::before am naechsten positionierten Vorfahren, und das ist die ganze
   Box. Der Haken ist erst seit dem 09.09.2026 der Weg, auf dem ein
   Checkpoint von Hand quittiert wird (die KI hakt ihn sonst ab) — vorher
   war er die einzige Bedienung eines seltenen Falls. */
@media (hover: none) {
  .mt-check-hak { position: relative; }
  .mt-check-hak::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}
.mt-check-hak[aria-checked="true"] { background: var(--mt-box-farbe, var(--pp-text-3)); color: var(--pp-bg); }
.mt-check-erl { font-style: normal; font-weight: 600; color: var(--pp-text-3); letter-spacing: .6px; }
/* Kursbuch-Todo (08.09.2026): Wo der Haken der Aufgaben-Box wohnt („im
   Lernplan · 12.09."), in der Kopfzeile der Box — nicht versal, nicht
   gesperrt: Es ist eine Auskunft, kein Etikett. */
.mt-box-plan { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pp-text-3); }
.mt-box.erledigt { background: var(--pp-surface); }
.mt-box.erledigt .mt-box-md { opacity: .72; }
.mt-jd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-jd-frage { flex: 0 1 auto; min-width: 0; }
.mt-page .mt-jd-in { width: 130px; font-family: var(--pp-mono); font-size: var(--pp-fs-klein); background: var(--pp-surface); }
.mt-jd-in.ok { border-color: var(--pp-ok); }
.mt-jd-in.err { border-color: var(--pp-err); }
.mt-jd-unit { font-size: var(--pp-fs-klein); color: var(--pp-text-2); font-family: var(--pp-mono); }
.mt-jd-erg { font-size: var(--pp-fs-klein); font-weight: 600; }
.mt-jd-erg.ok { color: var(--pp-ok); }
.mt-jd-erg.err { color: var(--pp-err); }

/* ---------- Das Mini-Feld des Trainings im Kursbuch (12.09.2026) ----------
   `.mt-feld` ist die Huelle, die PreppRender.miniFeld baut — darin liegt
   dasselbe `.ex-input` bzw. `.mexpr-face` wie in der Pruefung. Beide
   bringen aus `css/exam.css` FESTE helle Farben mit (die Pruefungsansicht
   ist in beiden Themes hell, Zwei-Welten). Im Kursbuch waere das ein
   weisser Kasten auf dunklem Grund, also faerbt hier eine Handvoll Regeln
   ueber --pp-Tokens um — und zwar fuer BEIDE Themes zugleich, statt die
   tr-dunkel-Regeln des Trainings ein zweites Mal hinzuschreiben (die
   haengen unter `.pp-task-body` und gelten hier ohnehin nicht). Der
   FORMELDIALOG haengt am body und erbt gar nichts; er bekommt die Klasse
   `tr-dunkel` von der Huelle (js/app.js, miniFeld) und faellt damit unter
   `.mexpr-modal.tr-dunkel` — die einzige tr-dunkel-Regel ohne
   .pp-task-body-Bindung. */
.mt-feld { display: inline-flex; align-items: baseline; gap: 6px; }
.mt-page .mt-feld .ex-input,
.mt-page .mt-feld .mexpr-face {
  background: var(--pp-surface); color: var(--pp-text);
  border-bottom-color: var(--pp-line-feld); font-size: var(--pp-fs-klein);
}
.mt-page .mt-feld .ex-input { width: 130px; font-family: var(--pp-mono); }
.mt-page .mt-feld .ex-input::placeholder { color: var(--pp-text-3); }
.mt-page .mt-feld .ex-input.answered,
.mt-page .mt-feld .mexpr-face.answered { background: var(--pp-accent-tint); }
.mt-page .mt-feld .mexpr-face .mexpr-ph { color: var(--pp-text-3); }
.mt-page .mt-feld .mexpr-chip { background: var(--pp-surface-2); }
.mt-page .mt-feld .unit { color: var(--pp-text-2); }

/* ---------- Die Loesung: EIN Fliesstext (12.09.2026) ----------
   Hier stand `display: flex; flex-direction: column`. Ein Spalten-
   Flexcontainer macht aus jedem Element UND jedem Textstueck ein eigenes
   Flex-Item, also eine eigene Zeile: Ein Satz mit drei KaTeX-Formeln
   zerfiel in acht Zeilen („Charakteristisches Polynom: / p(λ)=… / — /
   doppelte Nullstelle / …"). Dieselbe Ursache wie im Formelraum (Q3,
   05.09.2026) — deshalb steht sie hier als Warnung und nicht nur als
   geloeschte Zeile: Wer einen Kasten mit gesetzten Formeln baut, macht ihn
   NICHT zur Flex-Spalte.

   `<details>` ist der Aufklapper (kein JS, kein Zustand im DOM-Umweg);
   der Checkpoint benutzt dieselben Klassen mit `<div>`/`<span>`, deshalb
   greifen die Regeln ueber beide Gestalten. */
.mt-jd-sol { flex: 1 1 100%; border: 1px solid var(--pp-line); background: var(--pp-surface); border-radius: 6px; padding: 8px 11px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); }
.mt-jd-sol > summary, .mt-jd-soltitel {
  font-size: var(--pp-fs-mini); font-weight: 700; letter-spacing: 1px; color: var(--pp-text-3);
}
/* `list-item` und NICHT `block`: Ein <summary> traegt seine Aufklapp-Marke
   als ::marker, und `display: block` nimmt sie ihm — dann sieht der
   Aufklapper aus wie eine Ueberschrift, die nichts tut. Der Titel des
   Checkpoints ist dagegen ein <span> und braucht sein eigenes `block`. */
.mt-jd-sol > summary { display: list-item; cursor: pointer; }
.mt-jd-sol > summary::marker { color: var(--pp-text-3); }
.mt-jd-soltitel { display: block; }
/* Eine breite Formel bleibt im Kasten, statt ihn aufzuziehen. */
.mt-jd-soltext { margin-top: 4px; color: var(--pp-text); overflow-x: auto; }
.mt-jd-soltext p { margin: 0; }
.mt-jd-soltext p + p { margin-top: var(--pp-sp-2, 8px); }

/* ---------- Checkpoint mit Antwort und KI-Bewertung (09.09.2026) ----------
   Ein SPALTEN-Block und keine Flex-Zeile wie „Jetzt du": Dort steht eine
   Zahl neben ihrer Einheit, hier ein mehrzeiliges Feld ueber seinen
   Knoepfen. Nur --pp-Tokens (Fallstrick 11). */
.mt-chk { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* `resize: vertical` ist Absicht: Wie lang eine Verstaendnis-Antwort wird,
   weiss nur der, der sie schreibt. */
.mt-page .mt-chk-in { width: 100%; resize: vertical; font-size: var(--pp-fs-klein); background: var(--pp-surface); }
.mt-chk-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-chk-erl { font-size: var(--pp-fs-mini); font-weight: 600; color: var(--pp-ok); }
.mt-chk-erg {
  border: 1px solid var(--pp-line); border-left: 3px solid var(--pp-text-3);
  background: var(--pp-surface); border-radius: 6px; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text);
}
/* Der Farbstrich traegt das Urteil — „teilweise" bekommt bewusst KEINE
   Bewertungsfarbe (Muster `nurManuell` in trainStand: kein Urteil ohne
   Grundlage), „unsicher" ebenso wenig. */
.mt-chk-erg.ok  { border-left-color: var(--pp-ok); }
.mt-chk-erg.err { border-left-color: var(--pp-err); }
.mt-chk-erg.laeuft { color: var(--pp-text-2); font-style: italic; }
.mt-chk-erg > b { font-size: var(--pp-fs-klein); }
.mt-chk-erg.ok > b  { color: var(--pp-ok); }
.mt-chk-erg.err > b { color: var(--pp-err); }
/* Der Vorschlags-Satz steht KLEIN und ruhig ueber der Begruendung — er
   ist die Einordnung des Ergebnisses, nicht das Ergebnis. */
.mt-chk-vor { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-chk-txt { color: var(--pp-text); }
.mt-chk-l { margin: 0; padding-left: var(--pp-sp-4); color: var(--pp-text-2); font-size: var(--pp-fs-mini); }
.mt-doc-zeile { display: flex; align-items: center; gap: 9px; }
.mt-doc-zeile input { flex: 1; }

/* ---------- Video-Register ---------- */
.mt-banner { display: flex; align-items: center; gap: 11px; padding: 11px 15px; flex-wrap: wrap; }
.mt-banner > span:nth-child(2) { font-size: var(--pp-fs-klein); color: var(--pp-text-2); line-height: var(--pp-lh-text); flex: 1; min-width: 200px; }
.mt-banner .mt-tile-ico { width: 28px; height: 28px; font-size: var(--pp-fs-klein); }
.mt-thema .mt-sec-h > b { font-size: var(--pp-fs-text); }
.mt-thema .mt-sec-h .mt-akt { margin-left: auto; }
.mt-page .mt-thema .mt-sec-h input { min-width: 220px; font-weight: 600; }
.mt-link { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--pp-line); }
.mt-link:last-child { border-bottom: 0; }
.mt-link:hover { background: var(--pp-surface-2); }
.mt-link .mt-tile-ico { width: 30px; height: 30px; font-size: var(--pp-fs-klein); }
.mt-link-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mt-link-txt > b { font-size: var(--pp-fs-klein); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-link-txt > small { font-size: var(--pp-fs-mini); color: var(--pp-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-open {
  flex: 0 0 auto; border: 1px solid var(--pp-line); background: var(--pp-surface); border-radius: 6px; width: 28px; height: 28px;
  display: grid; place-items: center; color: var(--pp-accent-2); text-decoration: none;
}
.mt-open:hover { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); text-decoration: none; }
.mt-ungeprueft { border-style: dashed; }
/* Videos zum Thema — in der Einsicht (Kontextspalte) und im Trainingsfuss. */
.mt-videos { display: flex; flex-direction: column; gap: 6px; }
.mt-videos a { color: var(--pp-accent-2); font-size: var(--pp-fs-klein); }
.mt-videos .k { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }

/* ---------- Vollbild der Lernkarte (14.09.2026) ----------
   Jonas: „Karteikarten werden vor allem am Handy gelernt." Das Overlay
   haengt am `body` (Muster `.sb-geovoll`) und zeigt NUR die Karte:
   Fortschritt oben, Karte in der Mitte, Bewertungsknoepfe unten in
   Daumenreichweite.

   z-index 145: ueber der Kopfzeile (sticky, z 20) und der Seitenleiste,
   aber UNTER `.pp-modal-bg` (150) — ein Dialog, der von hier aus
   aufgeht, muss darueber liegen. Dieselbe Stufe wie `.sb-voll-bg`; die
   beiden koennen nie zugleich stehen.

   Dark/hell ueber --pp-Tokens, wie die ganze Seite. */
.mt-voll {
  position: fixed; inset: 0; z-index: 145;
  background: var(--pp-bg); color: var(--pp-text);
  display: flex; flex-direction: column; overflow: hidden;
}
.mt-voll-kopf {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--pp-line); background: var(--pp-surface);
}
.mt-voll-lauf { flex: 1; min-width: 0; font-family: var(--pp-mono); font-size: var(--pp-fs-klein); color: var(--pp-text-2); }
.mt-voll-x { flex: 0 0 auto; width: 44px; height: 44px; font-size: var(--pp-fs-gross); }
/* Der Leib scrollt, der Fuss nicht: Eine lange Antwort darf die
   Bewertungsknoepfe nicht aus dem Bild schieben — sie sind der einzige
   Weg weiter. `min-height: 0` an der Flex-Spalte, sonst wuechse der Leib
   ueber seinen Anteil hinaus (dieselbe Kette wie beim Notiz-Fenster). */
.mt-voll-leib { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; }
.mt-voll-leib > .mt-karte { min-height: 0; height: 100%; box-sizing: border-box; }
.mt-voll-leib .mt-karte-frage { font-size: var(--pp-fs-h2); }
.mt-voll-fuss {
  flex: 0 0 auto; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pp-line); background: var(--pp-surface);
}
.mt-voll-fuss .mt-noten { flex-wrap: wrap; }
/* Mindestens 48 px hoch — die Leiste liegt am Daumen, und dort ist die
   44-px-Regel (R3) die Untergrenze, nicht das Ziel. */
.mt-voll-fuss .mt-note { min-height: 48px; }
.mt-voll-fuss .mt-fuss { display: block; margin-top: 6px; font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-vollknopf { flex: 0 0 auto; }
/* Auf dem Telefon ist die Karte die ganze Flaeche — kein Rahmen um den
   Rahmen. */
@media (max-width: 860px) {
  .mt-voll-leib { padding: 8px; }
  .mt-voll-leib > .mt-karte { padding: 16px 14px; }
  .mt-voll-fuss .mt-note { flex: 1 1 45%; }
}

/* ---------- Druck: Cheat-Sheet-Vorlage ---------- */
.ppd-kompakt { padding: 6px 9px; margin-bottom: 6px; font-size: 12px; }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 860px) {
  .mt-stat-grid, .mt-formel-detail, .mt-form-grid2, .mt-form-grid3 { grid-template-columns: 1fr; }
  /* `minmax(0, 1fr)` und nicht `1fr`: siehe die Ueberlauf-Rechnung bei
     `.mt-karte` — ein blankes `1fr` kann nicht unter seinen min-content. */
  .mt-lern { grid-template-columns: minmax(0, 1fr); }
  .mt-buch { grid-template-columns: 1fr; }
  .mt-kapliste { position: static; }
  /* ---------- N4b (12.09.2026): die Kapitelliste klappt ----------
     Jonas: „Kursbuch Kapitel soll auf dem Handy einklappbar sein und dann
     anklickbar sein, wodurch man dann an den Start des Kapitels kommt."

     GEMESSEN bei 390 px mit SECHS Kapiteln (ein echtes Kursbuch hat
     mehr): Die Liste ist 375 px hoch, das Kapitel selbst beginnt erst bei
     y = 793 — also unterhalb des Bildschirms. Am Schreibtisch ist die
     Liste eine eigene Spalte und stoert niemanden; gestapelt ist sie eine
     Wand vor dem Inhalt.

     Zugeklappt ist deshalb der NORMALFALL, und der Kopf sagt, in welchem
     Kapitel man steht — eine Zeile, die nur „Kapitel" sagt, waere eine
     Zeile ohne Auskunft. `zu` ist eine KLASSE, kein `hidden`: Die
     Eintraege sind `display: flex`, und das schluege die Browserregel
     `[hidden] { display: none }` (die .pp-inreq-Falle vom 13.08.2026). */
  .mt-kapliste-kopf {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 44px; padding: 6px 8px; border: 0; border-radius: 6px;
    background: transparent; color: var(--pp-text); font: inherit; text-align: left; cursor: pointer;
  }
  .mt-kapliste-kopf:hover { background: var(--pp-accent-tint); }
  .mt-kapliste-kopf > .chev {
    color: var(--pp-text-3); transition: transform .13s ease; flex: 0 0 auto;
  }
  .mt-kapliste-kopf[aria-expanded="true"] > .chev { transform: rotate(90deg); }
  @media (prefers-reduced-motion: reduce) { .mt-kapliste-kopf > .chev { transition: none; } }
  .mt-kapliste-kopf > .mt-eyebrow { flex: 0 0 auto; }
  .mt-kapliste-kopf > .jetzt {
    flex: 1; min-width: 0; font-size: var(--pp-fs-klein); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mt-kapliste > .mt-eyebrow.breit { display: none; }
  .mt-kapliste.zu > .mt-kap, .mt-kapliste.zu > .pp-btn { display: none; }
  /* Der 17-px-Ueberlauf des Kursbuchs (Bestand seit dem 07.09.2026, als
     Verursacher gemessen am 09.09.: `.mt-akt` mit dem ⋯ bei x = 407 in
     einem 390-px-Fenster). Die Ursache ist Fallstrick 41: `.mt-akt` steht
     auf `flex: 0 0 auto` und kann damit NIE unter seine Inhaltsbreite
     schrumpfen — es traegt hier bis zu sechs Knoepfe (Skript, Pfeile, ✎,
     Loeschen, Bearbeiten, ⚙, ⋯) und misst 387 px in einem 358 px breiten
     Kopf.

     `min-width: 0` allein reicht NICHT: Es hebt nur die Mindestgroesse
     auf, waehrend `flex-shrink: 0` das Schrumpfen ganz verbietet
     (gemessen — nach dem ersten Anlauf stand `flex-wrap: wrap` und
     `min-width: 0px`, und der Ueberlauf war unveraendert 17 px). Die
     Knopfreihe bekommt deshalb eine EIGENE ZEILE und darf darin
     umbrechen — woertlich die Antwort von `.lp-unit .lp-akt` (R3): Geteilt
     wird die HOEHE, nicht die Breite. Nur im Kursbuchkopf, denn nur dort
     ist es gemessen. */
  .mt-buch-kopf > .mt-akt { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; margin-left: 0; }
  /* Und das ⋯ gibt sein `margin-left: auto` ab: In einer UMGEBROCHENEN
     Reihe schiebt es sich sonst allein an den rechten Rand der zweiten
     Zeile (im Abnahmebild zu sehen, bevor diese Zeile kam). Dieselbe
     Gegenregel wie an der Reiterzeile daneben (.mt-subrow). */
  .mt-buch-kopf > .mt-akt > .mt-menu-wirt { margin-left: 0; }
  .mt-stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .mt-stat-tile { border-bottom: 1px solid var(--pp-line); }
  .mt-zeile-k { grid-template-columns: minmax(0, 1fr) 84px 60px; }
  /* Die Tag-Spalte faellt hier mit Kapitel und Typ weg (Q4) — auf dem
     Telefon reicht der Platz fuer drei Spalten, und die Tags einer Karte
     stehen im Trainer und im Formular vollstaendig da. */
  .mt-zeile-k > .mt-zk-kap, .mt-zeile-k > .mt-zk-typ, .mt-zeile-k > .mt-zk-tags,
  .mt-zk-kopf > span:nth-child(2), .mt-zk-kopf > span:nth-child(3), .mt-zk-kopf > span:nth-child(4) { display: none; }
  .mt-noten { flex-wrap: wrap; }
  .mt-note { flex: 1 1 45%; }
  .mt-formel-chips { display: none; }
}

/* .pp-btn.slim setzt seine Textfarbe NACH .pp-btn.accent — auf blauem Grund
   stuende grauer Text („Pruefen" der Jetzt-du-Box). */
.mt-page .pp-btn.accent.slim, .mt-dlg .pp-btn.accent.slim { color: var(--pp-accent-contrast); }
.mt-page #mt-thtitel { flex: 1 1 260px; }

/* ---------- M9: Klausurtermin an den Karteikarten (22.08.2026) ----------
   Die Terminanpassung wird GESAGT, nicht still getan: eine Zeile in der
   Seitenspalte der Lernansicht und ein Hinweis unter der Klausur-Zeile
   der Uebersicht. Nur --pp-Tokens (Fallstrick 11). */
.mt-klausur-hin { display: block; margin-top: 6px; font-size: var(--pp-fs-mini); color: var(--pp-text-2); line-height: var(--pp-lh-text); }

/* ---------- M6: Fokus-Ansicht der Karteikarten (22.08.2026) ----------
   Karten untereinander in Kartengroesse, eigener Scrollkasten mit
   scroll-snap; die fokussierte Karte (.on) deckt ihre Antwort auf, alle
   anderen stehen gedimmt mit Frage da. Der grosse untere Innenabstand
   laesst auch die letzte Karte in die Mitte scrollen. */
.mt-fokus-hint { display: block; margin: 2px 2px 10px; }
.mt-fokus { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 300px);
  min-height: 320px; overflow-y: auto; scroll-snap-type: y proximity; padding: 4px 2px 35vh; }
.mt-fokus-karte { scroll-snap-align: center; padding: 20px 24px; display: flex; flex-direction: column;
  gap: 12px; border-radius: 10px; cursor: pointer; opacity: .55; transition: opacity .15s ease; }
.mt-fokus-karte.on { opacity: 1; border-color: var(--pp-accent-line); }
.mt-fokus-karte:not(.on) .mt-fk-antwort { display: none; }
.mt-fk-antwort { display: flex; flex-direction: column; gap: 10px; }

/* ---------- M8: Uebungsplattform der Uni (22.08.2026) ----------
   Linkliste + handeingetragene Punktestaende auf der Kursseite (Reiter
   nur bei Eintraegen, EN34). Nur Links, keine Einbettung. */
.mt-uni { display: flex; flex-direction: column; gap: 10px; padding: 16px var(--pp-sp-4); }
.mt-uni-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt-uni-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0 4px; border-top: 1px solid var(--pp-line); }
.mt-uni-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-uni-link { font-weight: 600; color: var(--pp-accent-2); text-decoration: none; overflow-wrap: anywhere; }
.mt-uni-link:hover { text-decoration: underline; }
.mt-uni-url { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); overflow-wrap: anywhere; }
.mt-uni-stand { font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.mt-uni-akt { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.mt-uni-form { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
  .mt-uni-zeile { flex-direction: column; gap: 8px; }
}

/* ---------------- Kurs initialisieren (M2/EN17, 22.08.2026) ----------------
   Der Auftrag mit Verlauf: Schritt-Marken, ein kurzes Protokoll und am
   Ende die Freigabeliste mit einem Haken JE Eintrag. Nur --pp-Tokens; die
   Karte liegt auf der Uebersicht und traegt deren Optik (.pp-card).

   Die vier Zustaende eines Schritts tragen FARBE UND FORM (Ziffer,
   Fuellung, Rahmen) — Farbe allein waere hier dieselbe Falschaussage wie
   an der Formelzeile (M4). */
.mt-kursinit { padding: 14px var(--pp-sp-4); display: flex; flex-direction: column; gap: 10px; }
/* Die Kopfzeile des Kastens (wa-7, 27.09.2026, Jonas' Bildschirmfoto): Die
   Versal-Ueberschrift „KURS INITIALISIEREN" brach in zwei Zeilen um, und
   die Schritt-Kreise ①②③ lagen IN der Schrift. Ursache war die Regel der
   Grundlage-Zeile `.mt-hilfs-z > .mt-eyebrow { width: 84px }`, die hier
   mitgriff: „INITIALISIEREN" ist als EIN Wort breiter als 84 px und lief
   aus seinem Kasten heraus — unter die Kreise, die direkt dahinter
   beginnen. Dazu verlangte `.mt-hilfs-z > span:nth-child(2)` von der
   Kreisreihe 200 px Mindestbreite (Fallstrick 41: wer darf nachgeben?).

   Jetzt: Die Ueberschrift nimmt ihre eigene Breite und bricht nie mitten
   im Titel um (nowrap; nur wenn selbst die Zeile zu schmal ist, kuerzt
   die Ellipse statt zu ueberlappen). Die Kreisreihe darf schrumpfen und
   in sich umbrechen; die Knoepfe behalten ihre Breite. Reicht die Zeile
   nicht, bricht die ZEILE um (flex-wrap am Kopf) — geordnet: Titel und
   Kreise oben, Knoepfe darunter. Spezifitaet 0,3,0 schlaegt die zwei
   Regeln der Grundlage-Zeile (0,2,0 bzw. 0,2,1). */
.mt-kursinit > .mt-ki-kopf { gap: 8px 10px; }
.mt-kursinit > .mt-ki-kopf > .mt-eyebrow {
  width: auto; flex: 0 1 auto; min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-kursinit > .mt-ki-kopf > .mt-ki-stand { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.mt-kursinit > .mt-ki-kopf > .pp-btn { flex: 0 0 auto; }
/* Das ✕ (wa-7): eine Ikone ohne Text — 28 px mit Maus, 44 px auf dem
   Finger in BEIDE Richtungen (die Hausregel C56 fuer Ikonen, css/prepp.css). */
.mt-ki-zu {
  flex: 0 0 auto; width: 28px; height: 28px; margin-left: auto;
  display: inline-grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--pp-text-2); font: inherit; font-size: var(--pp-fs-text); line-height: var(--pp-lh-eng); cursor: pointer;
}
.mt-kursinit > .mt-ki-kopf > .pp-btn + .mt-ki-zu { margin-left: 0; }
.mt-ki-zu:hover { background: var(--pp-surface-2); color: var(--pp-text); border-color: var(--pp-line); }
.mt-ki-zu:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px), (hover: none) {
  .mt-ki-zu { width: 44px; height: 44px; }
  /* Der Weg zur fehlenden Quelle im eingeschraenkten Dialog traegt TEXT —
     44 px in der Hoehe (WebKit bei 390 px: 180 × 19 vorher). */
  .mt-ki-schritt-w.mt-ki-nur .pp-link { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Die EINE Zeile des eingeschraenkten Dialogs (wa-7) — ohne Kaestchen,
   aber mit derselben Einrueckung wie die Zeilen der vollen Kette. */
.mt-ki-schritt-w.mt-ki-nur { cursor: default; }
.mt-ki-schritt-w.mt-ki-nur .pp-link { align-self: flex-start; margin-top: 2px; font-size: var(--pp-fs-klein); }
.mt-ki-stand { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 120px; font-size: var(--pp-fs-klein); color: var(--pp-text-2); }
.mt-ki-schritt {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 11px/1 var(--pp-mono, monospace);
  border: 1px solid var(--pp-line-2); color: var(--pp-text-3);
}
.mt-ki-schritt.laeuft { border-color: var(--pp-accent); color: var(--pp-accent-2); }
.mt-ki-schritt.fertig { border-color: var(--pp-ok); background: var(--pp-ok-tint); color: var(--pp-ok); }
.mt-ki-schritt.fehler { border-color: var(--pp-err); background: var(--pp-err-tint); color: var(--pp-err); }
.mt-ki-punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pp-accent);
  display: inline-block; margin: 0 4px 0 2px;
}
.mt-ki-proto { display: flex; flex-direction: column; gap: 3px; font-size: var(--pp-fs-klein); color: var(--pp-text-2); }
.mt-ki-zeile.ok { color: var(--pp-ok); }
.mt-ki-zeile.warn { color: var(--pp-warn); }
.mt-ki-zeile.err { color: var(--pp-err); }
.mt-ki-zeile pre {
  margin: 4px 0 0; padding: 8px; max-height: 220px; overflow: auto;
  background: var(--pp-bg); border: 1px solid var(--pp-line); border-radius: 6px;
  font-size: var(--pp-fs-mini); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--pp-text-2);
}
.mt-ki-erg {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--pp-line); cursor: pointer;
}
.mt-ki-erg > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mt-ki-erg b { font-size: var(--pp-fs-klein); }
.mt-ki-erg small { font-size: var(--pp-fs-mini); color: var(--pp-text-2); }
.mt-ki-erg.fertig { opacity: .7; cursor: default; }
.mt-ki-ok { font-size: var(--pp-fs-mini); color: var(--pp-ok); flex: 0 0 auto; }
/* Die Freigabe von Änderungen am BESTAND (P4-M, 18.09.2026,
   docs/KI-MATERIAL-BEARBEITEN-2026-09-18.md): je Zeile ein Kästchen, der
   Name des Eintrags und darunter alt → neu. Gebaut wie .mt-ki-erg daneben
   — dieselbe Karte, eine Ebene tiefer.
   `min-width: 0` und `overflow-wrap` sind keine Zierde: Das „alt → neu"
   ist fremder Text beliebiger Länge (eine Formel ohne Leerzeichen), und
   ein Flex-Kind ohne beides schöbe die Karte aus dem Chat (Fallstrick 41). */
.mt-bearb { gap: 0; }
.mt-bearb > .mt-eyebrow { margin-bottom: 4px; }
.mt-bearb-zeile {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--pp-line); cursor: pointer;
}
.mt-bearb-zeile > span { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mt-bearb-zeile b { font-size: var(--pp-fs-klein); font-weight: 600; }
.mt-bearb-zeile small { font-size: var(--pp-fs-mini); color: var(--pp-text-2); line-height: var(--pp-lh-text); }
.mt-bearb-zeile small i { font-style: normal; font-family: var(--pp-mono); color: var(--pp-text-3); }
.mt-bearb-zeile input:disabled { cursor: default; }
.mt-bearb > .mt-warnzeile { padding: 6px 0 0; }
/* In der gesammelten Freigabe von „Kurs erweitern" haengen die Aenderungen
   UNTER ihrem Ergebnis — eingerueckt auf die Textkante der Zeile darueber
   (24 px — Kaestchen plus Luecke, auf dem 4-px-Raster), damit man sieht, wozu sie gehoeren. */
.mt-bearb-ein { display: flex; flex-direction: column; padding: 0 0 8px 24px; }
.mt-bearb-ein > .pp-link { align-self: flex-start; margin-top: 6px; }
/* Die Vorschau: Anfragen, Cent und Dauer nebeneinander — drei Zahlen, die
   zusammen die Entscheidung tragen. */
.mt-ki-kosten { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: var(--pp-fs-klein); color: var(--pp-text-2); }
.mt-ki-kosten b { font-size: var(--pp-fs-gross); color: var(--pp-text); }
.mt-ki-kosten b + span { margin-right: 10px; }
/* Der Wirt des Geld-Paars (14.09.2026): Ueber RWTHgpt wird er LEER, und
   dann darf er im Flex-Fluss auch keinen Platz nehmen. `display:
   contents` loest ihn dafuer heraus — Zahl und Wort bleiben Flex-Kinder
   von `.mt-ki-kosten` und behalten Groesse und Abstand aus den zwei
   Regeln darueber (beide sind Nachfahren-Selektoren, der Wirt dazwischen
   stoert sie nicht; `b + span` trifft ebenfalls weiter, denn `+` liest
   den DOM-Baum und nicht das Layout). Ein `[hidden]` an Zahl und Wort
   waere der falsche Weg: `.mt-ki-kosten` ist display:flex und schlaegt
   damit die Browserregel fuer [hidden] — genau die .pp-inreq-Falle vom
   13.08.2026. */
.mt-ki-geldpaar { display: contents; }
.mt-ki-zahl { display: flex; flex-direction: column; gap: 6px; }
/* Die Anzahl gilt nur fuer die Uebungsklausuren (29.08.2026). Ist der
   Schritt abgewaehlt, sind die Knoepfe eine Auswahl ohne Wirkung: gesperrt
   (disabled, das ist die Wahrheit) und gedaempft (das ist die Anzeige) —
   Muster .mt-ki-schritt-w.aus zwei Regeln weiter unten. Nur --pp-Tokens;
   die Kante bleibt sichtbar, damit die Zeile nicht verschwindet, sondern
   erkennbar ruht. */
.mt-option.aus,
.mt-option.aus:hover { cursor: default; border-color: var(--pp-line); background: var(--pp-surface); }
.mt-option.aus b, .mt-option.aus small { color: var(--pp-text-3); }
.mt-option.aus .mt-radio { border-color: var(--pp-line); background: none; }
.mt-ki-zahl.aus { opacity: .72; }
/* Die Schritt-Liste der Vorschau (M2, 23.08.2026). Ein Schritt ohne seine
   Quelle bleibt SICHTBAR und trägt seinen Grund — ein weggelassener Punkt
   wäre eine stille Auslassung, ein leeres Kästchen ohne Erklärung eine
   Zumutung. Deshalb nur gedämpft, nicht ausgeblendet. */
.mt-ki-liste { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.mt-ki-schritt-w { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; cursor: pointer; }
.mt-ki-schritt-w > span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mt-ki-schritt-w b { font-size: var(--pp-fs-klein); font-weight: 500; }
.mt-ki-schritt-w small { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-ki-schritt-w.aus { cursor: default; }
.mt-ki-schritt-w.aus b { color: var(--pp-text-3); }
.mt-ki-themen { display: flex; flex-direction: column; gap: 4px; font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-ki-themen input {
  padding: 6px 8px; border: 1px solid var(--pp-line-feld); border-radius: 6px;
  background: var(--pp-surface); color: var(--pp-text); font: inherit; font-size: var(--pp-fs-klein);
}

/* ns0929-p6 (29.09.2026, Befund p3 #12): die übrigen kleinen Ziele des
   Materials auf dem Finger — gemessen in WebKit (iPad hoch, Telefon): die
   Zahlenfelder und der Termin im Zahnrad (35/39 px), die Unterreiter der
   Karteikarten (30), Modus und Seitenköpfe (32/36), die Suche (35), die
   Segmente und der Hilfsmittel-Chip des Formelraums (30/32) und der
   Skript-Link im Kurskopf (19). Alles in der HÖHE — sie stehen in
   umbrechenden Zeilen oder untereinander, eine breitere Fläche überlappte
   den Nachbarn. Nur ohne Zeiger (hover: none): der Mac bleibt pixelgleich
   (css/prepp.css ns0929-p6 und R3 für die Portal-Bausteine). */
@media (hover: none) {
  .mt-hm-box input, .mt-kl-zeile input, .mt-page .mt-suche input,
  .mt-subtabs button, .mt-modus, .mt-side-kopf, .mt-segs button, .mt-chip-btn,
  .mt-kopf-link { min-height: 44px; }
}

/* Reiter „Dateien": die EINE Ablagefläche (04.10.2026) — Klick oder Ziehen. */
.mt-dateien { display: flex; flex-direction: column; gap: 12px; }
.mt-dateien-ablage {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 120px; padding: 20px;
  border: 1.5px dashed var(--pp-line-2); border-radius: 12px;
  background: transparent; color: var(--pp-text-2);
  font: inherit; font-weight: 600; cursor: pointer;
}
.mt-dateien-ablage:hover, .mt-dateien-ablage:focus-visible,
.mt-zieh-auf .mt-dateien-ablage { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-text); }
.mt-dateien-ablage[disabled] { cursor: progress; opacity: .7; }
.mt-dateien-ablage-plus { font-size: 1.4em; }

/* ---------- Die Dateizeile (09.10.2026, docs/DATEIEN-ZEILE-2026-10-09.md) ----------
   Jonas: Namen fett und mit echten Aufzählungspunkten, rechts davon die
   zwei Hauptknöpfe, alles Übrige hinter einem Pfeil. Eine Zeile ist ein
   <li> (bzw. der Kopf eines Blattes): links `.mt-dz-info` (Punkt, Name,
   Seiten/Größe, Rolle, Abzeichen, Stand, 🎧), rechts `.mt-dz-akt`
   (höchstens zwei Hauptknöpfe und ▾), darunter über die volle Breite der
   Meldeplatz. Die Regeln hängen an `.mt-dateien` — die übrigen Wirte der
   Fabrik (⚙-Dialog, Kursinit-Auswahl) behalten ihre Zeile.

   Fallstrick 41 zweimal: `.mt-dz-info` trägt `min-width: 0` (sonst könnte
   es neben den Knöpfen nie unter seine Textbreite schrumpfen und schöbe
   sie aus der Zeile), und der Name bricht um statt abzuschneiden — die
   Grundregel `.mt-datei-name` (nowrap, ellipsis, min-width 120px) gilt hier
   nicht: Ein langer Name ist genau der Teil, der zwei Dateien
   unterscheidet, und neben ihm steht jetzt nur noch Auskunft. */
.mt-dz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-dateien .mt-dz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 8px; border-radius: 8px;
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein); color: var(--pp-text-2);
}
/* Die Zeile, auf die sich ein offenes Menü bezieht, bleibt markiert
   (.pp-ctx-offen setzt js/listen.js beim Öffnen und nimmt es beim Schließen). */
.mt-dateien .mt-dz:hover, .mt-dateien .mt-dz.pp-ctx-offen { background: var(--pp-surface-2); }
/* Dateien mit einem Klick (13.10.2026, docs/DATEIEN-EIN-KLICK-2026-10-13.md):
   Die Zeile IST der Knopf „Öffnen" — Zeiger und Fokusrahmen sagen es. */
.mt-dateien .mt-dz[data-mt-datei-zeile] { cursor: pointer; }
.mt-dateien .mt-dz[data-mt-datei-zeile]:focus-visible { outline: 2px solid var(--pp-accent-line); outline-offset: -2px; }
/* Auf dem Finger reicht die vergrößerte Trefferfläche des Abzeichens
   darunter („KI-Analyse mit Guthaben", ::before 17 px nach oben) über den
   NAMEN — ein Tipp auf den Namen öffnete den Pass-Hinweis statt der Datei
   (gemessen in WebKit bei 390 px). Der Name liegt deshalb darüber. */
@media (pointer: coarse) { .mt-dz .mt-dz-titel { position: relative; z-index: 1; } }
/* Die Ansicht einer Datei ohne Zeile der Ablage (Bild, Datei im Ordner). */
.mt-bildansicht { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; border-radius: 6px; background: var(--pp-surface-2); }
.mt-audioansicht { display: block; width: 100%; margin: 12px 0; }
/* Der Einzug für den Punkt sitzt am GANZEN Info-Block, nicht am Namen:
   Bricht die Auskunft auf dem Telefon in eine zweite Zeile („✓ Indiziert",
   „Zu groß …"), steht sie bündig unter dem Namen statt unter dem Punkt. */
.mt-dz-info { flex: 1 1 280px; min-width: 0; margin-right: 8px; padding-left: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* Der Aufzählungspunkt: ein Kreis in der Akzentfarbe vor der ersten
   Zeile des Namens — bricht der Name um, steht die zweite Zeile unter dem
   Namen, nicht unter dem Punkt (Einzug statt Fließtext). Eine Form, keine
   Schrift: kein Zeichen, das ein Screenreader vorläse (die Liste sagt er
   ohnehin an). `top` ist die halbe Zeilenhöhe des Namens (14 px · 1,35)
   minus den halben Punkt.
   Name und Seiten/Größe sind zwei Flex-Kinder: Passen sie nicht neben-
   einander, rückt die Größe in die nächste Zeile — vorher brach der Name
   mitten in „2023-|24.pdf", nur damit die Größe noch dahinter passte
   (gemessen in WebKit bei 390 px). */
.mt-dz-titel {
  position: relative; flex: 0 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; line-height: var(--pp-lh-knapp);
}
.mt-dz-titel::before {
  content: ""; position: absolute; left: -15px; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--pp-accent);
}
.mt-dateien .mt-dz .mt-datei-name {
  flex: 0 1 auto; min-width: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere;
  font-family: var(--pp-sans); font-size: var(--pp-fs-text); font-weight: 600; color: var(--pp-text);
}
.mt-dz-meta {
  flex: none; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); font-weight: 400;
  color: var(--pp-text-3); white-space: nowrap;
}
.mt-dz-akt { flex: 0 0 auto; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.mt-dz-akt > .pp-btn { white-space: nowrap; }
/* Der Platzhalter einer fehlenden Spalte: belegt die Breite, zeigt nichts,
   nimmt keinen Klick (dateiZeileHtml). */
.mt-dz-akt > .mt-dz-platz { visibility: hidden; pointer-events: none; }
/* Das ▾ — so breit wie das ⋯ der Listen (css/listen.css .pp-lmore), der
   Winkel gezeichnet (js/material.js dateiZeileHtml) und mittig. */
/* `align-self: center` statt `stretch` (wa1009-P4, 09.10.2026): Bricht der
   Name in eine zweite Zeile, wuchs das ▾ mit der GANZEN Zeile — gemessen in
   WebKit 42 × 68 px neben 30 px hohen Hauptknöpfen (iPad hoch 44 × 87). Die
   unsichtbare Textzeile im ::after gibt dem Knopf die Höhe eines Knopfes
   MIT Schrift (Zeilenhöhe + Polster) — ohne sie wäre er 26 statt 30 px
   hoch, und das war der Grund für `stretch`. Den Namen trägt weiter das
   aria-label. */
.mt-dz-pfeil {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; align-self: center;
  padding-left: 9px; padding-right: 9px; min-width: 32px;
}
.mt-dz-pfeil::after { content: "\00a0"; width: 0; overflow: hidden; }
.mt-dz-pfeil > svg { display: block; }
.mt-dz-weitere[hidden] { display: none; }
/* Der Meldeplatz steht unter der Zeile über die volle Breite — und
   nimmt keinen Platz, solange er nichts zu sagen hat. */
.mt-dz > .mt-hint { flex: 1 1 100%; padding-left: 16px; }
.mt-dz > .mt-hint:empty { display: none; }
/* Die Lösung eines Blattes: eine Ebene tiefer, mit hohlem Punkt. */
.mt-dz-unterliste { padding-left: var(--pp-sp-6); }
.mt-dz-unter .mt-dz-titel::before { top: 5px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--pp-text-3); }
.mt-dateien .mt-dz-unter .mt-datei-name { font-size: var(--pp-fs-klein); }
/* Die Übungsblätter tragen keinen Rahmen mehr: Blatt und Lösung hält die
   Einrückung zusammen, wie jede andere Liste dieser Seite. */
.mt-dateien .mt-blatt { border: 0; border-radius: 0; padding: 0; gap: 0; }
.mt-dateien .mt-datei-gruppe { display: flex; flex-direction: column; gap: 4px; }
.mt-dateien .mt-datei-gruppe > .mt-eyebrow { padding: 6px 8px 0; }
/* „Zu groß für die KI-Analyse" ist ein <button> ohne Farbregel und malte
   deshalb in der Vorgabefarbe des Browsers — im dunklen Theme Schwarz auf
   Fast-Schwarz (gemessen in WebKit vor diesem Umbau). Ruhig wie
   „In Verarbeitung": kein Fehler, nur eine Auskunft. */
.mt-ext.zugross { color: var(--pp-text-3); }
/* „KI-Analyse mit Semester-Pass" (wa1009-R2, 10.10.2026): ruhig wie „zu
   groß" — eine Auskunft über das Konto, kein Fehler der Datei. Der Weg zum
   Pass steht erst nach dem Klick im Meldeplatz der Zeile (und an der
   Meldung, wenn der Speicher voll ist): Satz und Knopf in einer Zeile, die
   umbricht; der Knopf hält seine Breite. */
.mt-ext.ohnepass { color: var(--pp-text-3); }
/* Auf dem Finger: Die Abzeichen-KNÖPFE (⚠, „zu groß", „KI-Analyse mit
   Semester-Pass", „Hängt") sind 11 px hohe Wörter — gemessen auf dem iPad
   quer (wa1009-R2): wirksam 81 × 40 px. Gewachsen ist die Trefferfläche,
   nicht der Kasten: ein unsichtbarer Vorsatz oben und unten (11 + 2 × 17),
   Muster .pp-crumb in prepp.css. Mit Maus: nichts. */
@media (pointer: coarse) {
  button.mt-ext { position: relative; }
  button.mt-ext::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; bottom: -17px; }
}
.mt-ext-pass .pp-btn { margin-left: 6px; vertical-align: baseline; white-space: nowrap; }
/* Der zweite Weg (KI:connect, wa1009-R4) in eigener Zeile unter dem Pass. */
.mt-ext-pass-kc { display: block; margin-top: 6px; }
/* „Aufgaben daraus erstellen" ohne Analyse-Freischaltung (wa1009-R4):
   gesperrt wie die Podcast-Knöpfe eines Kontos ohne Guthaben (podcast.css,
   .pc-gesperrt) — gestrichelt, die ruhige Farbe der Abzeichen, ein Schloss
   hinter dem Wort. Die Akzentfläche fällt weg: Ein Hauptknopf in der
   Akzentfarbe verspräche den Dialog, den der Klick nicht öffnet. Drei
   Klassen schwer, damit .pp-btn.accent-line (prepp.css) nicht gewinnt. */
.pp-btn.slim.mt-gesperrt, .pp-btn.slim.mt-gesperrt:hover {
  color: var(--pp-text-3); border-style: dashed; border-color: var(--pp-line-2); background: transparent;
}
.pp-btn.mt-gesperrt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mt-schloss { flex: none; color: var(--pp-text-3); }
/* Im Menü (▾ und Rechtsklick) wird das Innere des Knopfs zur
   Beschriftung — ohne den gap des Knopfs klebte das Schloss am Wort
   (derselbe Befund wie bei .pc-schloss, wa1009-p3). */
.pp-ctx-lbl .mt-schloss { margin-left: 6px; vertical-align: -1px; }
/* Das ⌄ im Satz nach dem Ablegen — gezeichnet wie am Knopf der Zeile
   (Plex Sans hat das Zeichen nicht), auf der Grundlinie des Textes. */
.mt-pfeil-text { display: inline-flex; vertical-align: -1px; }
/* ---------- Was aus einer Datei erstellt wurde (10.10.2026, docs/DATEI-ERZEUGNISSE-2026-10-10.md) ----------
   An Stelle eines Erstell-Knopfs steht das Erzeugnis — in einer ZELLE, die
   so breit ist wie der Knopf, den sie ersetzt: Darunter liegt sein Wortlaut
   unsichtbar als Maß (.mt-dz-mass, Muster .mt-dz-platz), darüber der Knopf
   des Erzeugnisses, der zum Maß nichts beiträgt (`width: 0`) und es über
   `min-width: 100%` ganz ausfüllt. So bleiben die Spalten über alle Zeilen
   bündig, und ein langer Titel endet mit „…" statt die Zeile zu sprengen
   (der volle steht im title). */
.mt-dz-zelle { display: inline-grid; flex: 0 0 auto; min-width: 0; }
.mt-dz-zelle > * { grid-area: 1 / 1; }
.mt-dz-mass { visibility: hidden; pointer-events: none; white-space: nowrap; }
.mt-dz-erz {
  box-sizing: border-box; width: 0; min-width: 100%;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; overflow: hidden;
}
.mt-dz-erz-sym { flex: none; }
.mt-dz-erz-titel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-dz-erz-pfeil { flex: none; margin-left: auto; }
.mt-dz-erz-auf.offen .mt-dz-erz-pfeil { transform: rotate(180deg); }
/* Die Hefte aus einer Datei (Plan 15 P4) stehen neben dem Namen, ohne
   Maß darunter — der Knopf trägt seine eigene Breite, höchstens 240 px. */
.mt-dz-info > .mt-dz-zelle[data-mt-erz-art="heft"] { flex: 0 1 auto; max-width: 240px; }
.mt-dz-zelle[data-mt-erz-art="heft"] > .mt-dz-erz { width: auto; min-width: 0; max-width: 100%; }
/* Die aufgeklappte Liste steht unter der Zeile über die volle Breite,
   bündig mit dem Namen. Eine Zeile je Erzeugnis: Art, Titel, (Episoden),
   Datum — die ganze Zeile ist der Knopf. */
.mt-dz-erz-liste {
  flex: 1 1 100%; list-style: none; margin: 2px 0 0; padding: 0 0 0 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.mt-dz-erz-liste[hidden] { display: none; }
.mt-dz-erz-eintrag {
  width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 6px 8px; border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-surface);
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein); color: var(--pp-text); text-align: left; cursor: pointer;
}
.mt-dz-erz-eintrag:hover, .mt-dz-erz-eintrag:focus-visible { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); }
.mt-dz-erz-eintrag > .mt-dz-erz-sym { align-self: center; }
.mt-dz-erz-art { flex: none; font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-dz-erz-name { flex: 1 1 160px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mt-dz-erz-zusatz, .mt-dz-erz-datum { flex: none; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); white-space: nowrap; }
/* Die Podcast-Spalte war für ein Erzeugnis zu schmal (gemessen in WebKit:
   119 px — „🎧 2 erst…", „🎧 Altklaus…"). Ab 641 px ist sie deshalb in
   JEDER Zeile 152 px breit: der Knopf „Podcast daraus", sein Platzhalter
   und das Maß einer Podcast-Zelle — dieselbe Zahl an allen drei, sonst
   wären die Spalten nicht mehr bündig. Auf dem Telefon wachsen die Zellen
   stattdessen in die freie Breite (unten). */
@media (min-width: 641px) {
  .mt-dateien .mt-dz-akt > .pc-datei-knopf, .mt-dateien .mt-dz-akt > .mt-dz-platz,
  .mt-dateien .mt-dz-zelle[data-mt-erz-art="podcast"] > .mt-dz-mass {
    box-sizing: border-box; min-width: 152px; justify-content: center; text-align: center;
  }
  .mt-dateien .mt-dz-akt > .mt-dz-platz, .mt-dateien .mt-dz-zelle > .mt-dz-mass { display: inline-flex; align-items: center; }
}
/* „In ‚Dateien' zeigen" aus dem ⋯ einer Klausur: die Zeilen ihrer Quellen
   bleiben markiert, bis die Seite neu gebaut wird. */
.mt-dateien .mt-dz.mt-dz-sprung { box-shadow: inset 0 0 0 2px var(--pp-accent-line); }
@media (max-width: 640px) {
  /* Telefon: Name oben und rechts daneben das ▾, die Hauptknöpfe darunter
     über die volle Breite, links bündig unter dem Namen. `order` statt
     einer zweiten Markup-Fassung: Es bleibt EINE Zeile. */
  .mt-dz-info { flex: 1 1 0; margin-right: 0; }
  .mt-dz-pfeil { order: 1; align-self: flex-start; }
  .mt-dz-akt { order: 2; flex-basis: 100%; margin-left: 0; justify-content: flex-start; padding-left: 16px; }
  .mt-dz-akt > .mt-dz-platz { display: none; }
  .mt-dz > .mt-hint { order: 3; }
  /* Erzeugnisse (10.10.2026): Die aufgeklappte Liste steht UNTER den
     Knöpfen (sonst rückte sie zwischen Namen und Knöpfe), und eine Zelle
     wächst in die freie Breite der Reihe — Bündigkeit braucht es hier
     nicht, Platz für den Titel schon. */
  .mt-dz > .mt-dz-erz-liste { order: 3; padding-left: 16px; }
  .mt-dz-zelle { flex: 1 1 auto; }
}
@media (hover: none) {
  /* R3/C56: Die Knöpfe der Zeile werden mit dem Finger getroffen. */
  .mt-dz-akt > .pp-btn, .mt-dz-pfeil { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  /* Die Zelle eines Erzeugnisses (10.10.2026): Maß und Knopf dieselbe Höhe. */
  .mt-dz-zelle > .pp-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .mt-dz-zelle > .mt-dz-mass { display: inline-flex; align-items: center; }
  .mt-dz-erz-eintrag { min-height: 44px; align-items: center; }
  .mt-dz-pfeil { min-width: 44px; justify-content: center; }
}
@media (max-width: 379px) {
  /* Die zwei Hauptknöpfe in EINER Reihe auch unter 380 px (wa1009-P4,
     09.10.2026): Gemessen bei 390 px passten sie (183 + 6 + 119 px auf
     318), bei 375 px (iPhone SE/mini) fehlten 5 px — „Podcast daraus" brach
     in eine eigene Reihe, die Zeile wuchs von 108 auf 158 px. Schmaleres
     Polster und Abstand (173 + 4 + 109 = 286 px) passen bis 360 px
     (verbreitete Android-Breite, 288 px Platz); 390 px bleibt
     pixelgleich. */
  .mt-dz-akt { gap: 4px; }
  .mt-dz-akt > .pp-btn { padding-left: 9px; padding-right: 9px; }
  .mt-dz-zelle > .pp-btn { padding-left: 9px; padding-right: 9px; }
}

/* ---- Aufnahmen und Textdateien im Reiter „Dateien" (Paket C, 12.10.2026) ----
   docs/AUFNAHME-C-2026-10-12.md. Der Stand einer Aufnahme ist Auskunft wie
   „✓ Indiziert" — ruhig, kein Knopf. Der Player steht unter der Zeile über
   die volle Breite (Muster Meldeplatz), eingerückt wie der Name. */
.mt-auf-stand {
  font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-2);
  border: 1px solid var(--pp-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.mt-auf-stand[data-mt-auf-stand="nimmtAuf"] { color: var(--pp-err); border-color: var(--pp-err); }
.mt-auf-stand[data-mt-auf-stand="ohneTranskript"] { color: var(--pp-warn); border-color: var(--pp-warn); }
.mt-dz > .mt-auf-player {
  flex: 1 1 100%; min-width: 0; padding-left: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
}
.mt-dz > .mt-auf-player[hidden] { display: none; }
.mt-auf-regler { flex: 1 1 160px; min-width: 0; accent-color: var(--pp-accent); }
.mt-auf-zeit, .mt-auf-teil { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-2); white-space: nowrap; }
.mt-auf-teil:empty { display: none; }
.mt-auf-audio { display: none; }
@media (pointer: coarse) { .mt-auf-pp { min-width: 44px; min-height: 44px; } }
/* Zwei Aufnahmen zusammenführen (P6, docs/APP-P6-AUDIO-ZUSAMMEN-2026-10-12.md). */
.mt-auf-wahl { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-auf-wahl-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--pp-line); border-radius: 6px; cursor: pointer; }
.mt-auf-wahl-zeile.mt-aus { cursor: default; opacity: .6; }
.mt-auf-wahl-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mt-auf-vorschau { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); min-height: 1.2em; overflow-wrap: anywhere; }
/* Die Textansicht: Fließtext mit Absätzen, kein Monospace; eine Zeitmarke
   am Absatzanfang als dezenter Chip. */
.mt-text-rumpf {
  max-height: 70vh; overflow: auto; padding: 4px 2px;
  font-family: var(--pp-sans); font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); color: var(--pp-text);
  overflow-wrap: anywhere;
}
.mt-text-rumpf p { margin: 0 0 0.8em; }
.mt-text-rumpf .mt-text-ueber { font-weight: 600; margin-top: 1em; }
.mt-zeitmarke {
  display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 4px;
  font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3);
  background: var(--pp-surface-2); border: 1px solid var(--pp-line);
}

/* ---------- Der Explorer im Reiter „Dateien" (Plan 15 P3, 12.10.2026) ----------
   docs/APP-P3-EXPLORER-2026-10-12.md. Links der Ordnerbaum des Kurses,
   rechts die Liste des gewählten Ordners als Tabelle (Name, Art, Größe,
   Geändert, Zustand, ⋯). Jede Dateizeile ist weiter die Zeile aus
   dateiZeileHtml — hier wird sie nur zum Raster: die Hauptknöpfe
   (.mt-dz-akt) stehen im ⋯ und im Rechtsklick, nicht in der Zeile.

   `order` ist hier Pflicht: Die Telefonregeln der Dateizeile (≤ 640 px)
   setzen order 1/2/3 an ⌄, Knöpfe und Meldeplatz — im Raster schöbe das
   den ⌄ hinter den Player in eine eigene Rasterzeile. Keine Übergänge:
   Bewegung hängt am EINEN Schalter (docs/ANIMATIONEN.md). */
.mt-ex-reiter { gap: 10px; }
.mt-ex-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--pp-fs-klein); color: var(--pp-text-2); }
.mt-ex-status:empty, .mt-ex-status[hidden] { display: none; }
.mt-ex-st { display: inline-flex; align-items: center; gap: 6px; }
.mt-ex-st-trenner { color: var(--pp-text-3); }
.mt-ex-passlink {
  border: 0; background: none; padding: 0; font: inherit; color: var(--pp-accent-2);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.mt-ex-passtext { color: var(--pp-text-3); }
.mt-ex-konfliktknopf { display: inline-flex; align-items: center; gap: 6px; }
.mt-ex-fremdordner .pp-btn { margin-left: 4px; }
.mt-ex-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-ex-hoch { white-space: nowrap; }
.mt-ex-suche { flex: 1 1 200px; min-width: 0; max-width: 360px; box-sizing: border-box; }
.mt-ex-ansicht { display: inline-flex; gap: 2px; margin-left: auto; }
.mt-ex-ansicht > [aria-pressed="true"] { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); color: var(--pp-text); }
.mt-ex-baumknopf { display: none; }
.mt-ex-chips { margin: 0; }
/* ---- Datei-Filter und Kurs-Dateiwähler (LERNEN-ANSICHT, Runde 6) ----
   Seit a1014 P6 (15.10.2026) die Bauart der Filtersuche im Training: Knopf
   „Filtersuche" mit Zahl, aufgeklappt die Abschnitte (.tr-fsec, .tr-opt
   aus prepp.css — dieselben Klassen, dasselbe Bild), gesetzte Filter als
   Marken (.tr-tag). Auf jeder Breite gleich: erst aufklappen, dann wählen.
   Abstand trägt nur, was sichtbar ist — eine zugeklappte Leiste ohne
   Marken nimmt keinen Platz. */
.mt-df { display: flex; flex-direction: column; min-width: 0; }
.mt-df > * { margin-top: var(--pp-sp-2); }
.mt-df > [hidden] { display: none; }
.mt-df-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-2); }
.mt-df-name { flex: 1 1 200px; min-width: 0; max-width: 360px; box-sizing: border-box; }
.mt-df-auf { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mt-df-wahl { border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface); overflow: hidden; }
.mt-df-wahl .tr-fsec-body[hidden] { display: none; }
.mt-df-aktiv[hidden] { display: none; }
.mt-eingebettet { margin: 0; }
.mt-eingebettet .mt-ex { min-height: 220px; }
/* Der Kurs-Dateiwähler: Kopf, Filter, Liste, Fuß. */
.mt-kdw-huelle { padding: 0 var(--pp-sp-4) var(--pp-sp-4); }
.mt-kdw { display: flex; flex-direction: column; gap: var(--pp-sp-2); min-width: 0; }
.mt-kdw-kopf { display: flex; align-items: baseline; gap: var(--pp-sp-2); }
.mt-kdw-liste { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface); }
.mt-kdw-z { border-top: 1px solid var(--pp-line); }
.mt-kdw-z:first-child { border-top: 0; }
.mt-kdw-z[hidden] { display: none; }
.mt-kdw-z label { display: flex; align-items: center; gap: var(--pp-sp-2); padding: var(--pp-sp-2) var(--pp-sp-3); min-height: 44px; cursor: pointer; box-sizing: border-box; }
.mt-kdw-z label:hover { background: var(--pp-bg-2); }
.mt-kdw-z input { flex: none; width: 18px; height: 18px; margin: 0; }
.mt-kdw-sym { flex: none; }
.mt-kdw-text { display: flex; flex-direction: column; min-width: 0; }
.mt-kdw-name { overflow-wrap: anywhere; }
.mt-kdw-meta { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-kdw-leer { margin: 0; }
.mt-kdw-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-sp-2); }
.mt-kdw-platz { flex: 1 1 auto; }
/* DK-14: auch am iPad (Finger über 640 px) — die Köpfe maßen dort 36. */
@media (max-width: 640px), (pointer: coarse) {
  .mt-df-auf, .mt-df-name, .mt-df .tr-fsec-head { min-height: 44px; }
}
@media (max-width: 640px) {
  .mt-kdw-fuss .pp-btn { min-height: 44px; }
}
.mt-ex-chip-n { margin-left: 6px; font-family: var(--pp-mono); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }

.mt-ex {
  display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface);
  min-height: 320px; overflow: hidden;
}
.mt-ex-schleier { display: none; }
.mt-ex-baum {
  border-right: 1px solid var(--pp-line); background: var(--pp-bg-2); padding: 8px 6px;
  overflow: auto; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.mt-ex-baumliste, .mt-ex-baumliste ul { list-style: none; margin: 0; padding: 0; }
.mt-ex-baumliste ul { padding-left: 14px; }
.mt-ex-baumliste ul[hidden] { display: none; }
.mt-ex-knoten { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.mt-ex-knoten.on { background: var(--pp-accent-tint); }
.mt-ex-knoten.mt-ex-ablage, .mt-dateien .mt-ex .mt-ex-zeile.mt-ex-ablage { box-shadow: inset 0 0 0 2px var(--pp-accent-line); }
.mt-ex-klapp, .mt-ex-klapp-platz { flex: none; width: 20px; height: 26px; }
.mt-ex-klapp {
  border: 0; background: none; padding: 0; color: var(--pp-text-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mt-ex-klapp > svg { transform: rotate(-90deg); }
.mt-ex-klapp.offen > svg { transform: none; }
.mt-ex-ordnerknopf {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer;
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein); color: var(--pp-text); text-align: left;
}
.mt-ex-ordnerknopf:hover { background: var(--pp-surface-2); }
.mt-ex-knoten.on .mt-ex-ordnerknopf { font-weight: 600; }
.mt-ex-knoten-sym { flex: none; }
.mt-ex-knoten-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ex-korb {
  margin-top: auto; padding: 8px 8px 2px; border-top: 1px solid var(--pp-line);
  font-size: var(--pp-fs-klein); color: var(--pp-text-2); text-decoration: none;
}
.mt-ex-korb:hover { color: var(--pp-text); }
.mt-ex-haupt { min-width: 0; display: flex; flex-direction: column; }
.mt-ex-krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 12px;
  border-bottom: 1px solid var(--pp-line); font-size: var(--pp-fs-klein);
}
.mt-ex-krume { border: 0; background: none; padding: 2px 4px; border-radius: 4px; font: inherit; color: var(--pp-text-2); cursor: pointer; }
.mt-ex-krume:hover { background: var(--pp-surface-2); color: var(--pp-text); }
.mt-ex-krume[aria-current="page"], .mt-ex-krume-hier { color: var(--pp-text); font-weight: 600; }
.mt-ex-krume-trenner { color: var(--pp-text-3); }
/* Die Auswahlleiste steht dauerhaft (Muster docs/LISTEN.md 6b): ohne
   Auswahl „Nichts ausgewählt", mit Auswahl die Handlungen — kein Springen. */
.mt-ex-auswahl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; min-height: 42px; box-sizing: border-box;
  border-bottom: 1px solid var(--pp-line); font-size: var(--pp-fs-klein); color: var(--pp-text-3);
}
.mt-ex-auswahl.mit { color: var(--pp-text); background: var(--pp-accent-tint); }
.mt-ex-auswahl-text { margin-right: auto; }
.mt-ex-auswahl [data-mt-ex-akt="aufheben"]:disabled { visibility: hidden; }
.mt-ex-tabelle { flex: 1 1 auto; padding: 4px 6px 16px; min-width: 0; }
.mt-ex-kopf, .mt-dateien .mt-ex .mt-ex-zeile {
  display: grid; grid-template-columns: 24px 24px minmax(0, 1fr) 160px 72px 88px 24px 36px;
  align-items: center; column-gap: 8px;
}
/* K3-P6 (G3): im Gruppenkurs die Spalte „Von" nach dem Namen
   (js/material.js exVonZelle) — Kopf und JEDE Zeilenart tragen genau eine
   Zelle dafür, die Zahl der Zellen ist gleich der Zahl der Spalten
   (test/verify-k3-p6.js). Die Art gibt 20 px ab, der Name behält das 1fr. */
.mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf, .mt-dateien .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile {
  grid-template-columns: 24px 24px minmax(0, 1fr) 120px 140px 72px 88px 24px 36px;
}
.mt-ex-von { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-ex-von > .pp-gk { margin-left: 0; }
.mt-ex-von .pp-gk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mt-ex-da { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.mt-ex-da:empty { display: none; }
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-kursnotiz > .mt-ex-von,
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-gewaehlt > .mt-ex-von { color: var(--pp-text-2); }
/* Name und Auskunft (K3-P6, Jonas' Bild: „✓ Indiziert" und „noch nicht
   erzeugt" drängten in der Namenszeile, der Name brach daneben in schmale
   Stücke): In der Liste hat der Name seine Zeile für sich (volle Breite der
   Zelle), die Auskunft steht EINE Zeile darunter, ohne Umbruch und mit
   „…" gekürzt, wenn sie nicht passt — der volle Text steht im Hinweis
   (title). Gemessen in WebKit (390 px): Neben „✓ Indiziert" blieben dem
   Namen 70 px und sieben Zeilen. Der Name bricht an Wortgrenzen, nicht
   mitten im Wort („Wechselstromtechn|ik"). Fallstrick 41: jedes Kind mit
   min-width: 0. Die Kacheln behalten ihre Regeln. */
.mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile > .mt-dz-info { row-gap: 2px; }
.mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile > .mt-dz-info > .mt-dz-titel { flex: 1 1 100%; min-width: 0; }
.mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile > .mt-dz-info > :not(.mt-dz-titel) {
  flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile .mt-datei-name { overflow-wrap: break-word; }
/* Ein leerer Wirt (das Abzeichen der Analyse, bevor es etwas zu sagen gibt) hielt sonst eine Spaltenlücke vor der Auskunft. */
.mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile > .mt-dz-info > :not(.mt-dz-titel):empty { display: none; }
.mt-ex-mehr-leer { display: block; }
.mt-ex-kopf { padding: 4px 8px 6px; border-bottom: 1px solid var(--pp-line); font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-ex-kopf button { border: 0; background: none; padding: 2px 0; font: inherit; color: inherit; cursor: pointer; }
.mt-ex-kopf button:hover { color: var(--pp-text); }
.mt-ex-kopf button.on { color: var(--pp-text); font-weight: 600; }
.mt-ex-kopf button.on::after { content: " \2191"; }
.mt-ex-kopf button.on.ab::after { content: " \2193"; }
.mt-dateien .mt-ex .mt-ex-zeile { padding: 5px 8px; border-radius: 8px; cursor: pointer; row-gap: 4px; }
.mt-dateien .mt-ex .mt-ex-zeile[hidden] { display: none; }
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-gewaehlt { background: var(--pp-accent-tint); }
.mt-dateien .mt-ex .mt-ex-zeile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pp-accent); }
.mt-dateien .mt-ex .mt-ex-zeile > * { order: 0; }
.mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-pfeil { order: 1; justify-self: end; align-self: center; }
.mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-akt,
.mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-weitere { display: none; }
.mt-dateien .mt-ex .mt-ex-zeile > .mt-hint,
.mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-erz-liste,
.mt-dateien .mt-ex .mt-ex-zeile > .mt-auf-player { order: 2; grid-column: 3 / -1; padding-left: 0; }
.mt-dateien .mt-ex .mt-ex-zeile > .mt-hint:empty,
.mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-erz-liste[hidden],
.mt-dateien .mt-ex .mt-ex-zeile > .mt-auf-player[hidden] { display: none; }
.mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-info { padding-left: 0; margin-right: 0; min-width: 0; }
.mt-ex .mt-dz-titel::before { display: none; }
.mt-ex .mt-ex-zeile .mt-dz-meta { display: none; }
.mt-dateien .mt-ex .mt-dz-unter .mt-datei-name { font-size: var(--pp-fs-text); }
.mt-ex-wahl { display: flex; align-items: center; justify-content: center; }
.mt-ex-kasten, .mt-ex-alle { margin: 0; accent-color: var(--pp-accent); }
/* Die Kästchen erscheinen mit der Maus erst beim Überfahren oder mit
   Auswahl (Muster Windows-Explorer); am Finger stehen sie immer da. */
@media (hover: hover) {
  .mt-dateien .mt-ex .mt-ex-zeile:not(:hover):not(.mt-ex-gewaehlt) .mt-ex-kasten { opacity: 0; }
  .mt-dateien .mt-ex .mt-ex-zeile .mt-ex-kasten:focus-visible { opacity: 1; }
  /* Das ⋯ ist ruhig, bis die Zeile gemeint ist (Überfahren, Auswahl,
     offenes Menü, Fokus) — sonst stünde in jeder Zeile ein Rahmen. */
  .mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-pfeil { border-color: transparent; background: transparent; color: var(--pp-text-3); }
  .mt-dateien .mt-ex .mt-ex-zeile:hover > .mt-dz-pfeil, .mt-dateien .mt-ex .mt-ex-zeile.mt-ex-gewaehlt > .mt-dz-pfeil,
  .mt-dateien .mt-ex .mt-ex-zeile.pp-ctx-offen > .mt-dz-pfeil, .mt-dateien .mt-ex .mt-ex-zeile > .mt-dz-pfeil:focus-visible {
    border-color: var(--pp-line-2); color: var(--pp-text);
  }
}
.mt-ex-sym { font-size: var(--pp-fs-gross); line-height: var(--pp-lh-eng); text-align: center; }
.mt-ex-art, .mt-ex-gr, .mt-ex-dat { min-width: 0; font-size: var(--pp-fs-mini); color: var(--pp-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-ex-gr, .mt-ex-dat { font-family: var(--pp-mono); }
.mt-ex-zeile > .mt-ex-gr, .mt-ex-kopf > .mt-ex-gr { text-align: right; }
.mt-ex-zu { display: flex; justify-content: center; color: var(--pp-text-3); }
.mt-ex-zs { display: inline-flex; color: var(--pp-text-3); }
.mt-ex-zs > svg { display: block; }
.mt-ex-zs-konflikt, .mt-ex-zs-geaendert, .mt-ex-zs-fehler { color: var(--pp-warn); }
.mt-ex-zs-fehlt { color: var(--pp-err); }
.mt-ex-st .mt-ex-zs { color: inherit; }
.mt-ex-ort, .mt-ex-aus { font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.mt-ex-ort { display: none; }
.mt-ex[data-mt-ex-global] .mt-ex-ort { display: inline; }
.mt-ex-ort-menue { color: var(--pp-text-3); font-size: var(--pp-fs-mini); }
.mt-ex-virtuell .mt-ex-sym, .mt-ex-erzeugt .mt-ex-sym { opacity: .7; }
/* b1015-K: die Kursnotiz — erste Zeile der Kurswurzel, hervorgehoben
   (Akzentleiste links, getönt); ohne sie „Kursnotiz anlegen" in derselben
   Gestalt, der Name als Knopf (Tastatur, 44 px am Finger). */
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-kursnotiz { background: var(--pp-accent-tint); box-shadow: inset 3px 0 0 var(--pp-accent); }
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-kursnotiz:focus-visible { box-shadow: inset 0 0 0 2px var(--pp-accent); }
.mt-ex-kursnotiz .mt-ex-sym { color: var(--pp-accent-2); }
.mt-ex-kursnotiz .mt-datei-name { font-weight: 600; }
.mt-ex-kn-marke { font-size: var(--pp-fs-mini); color: var(--pp-text-3); white-space: nowrap; }
/* F9 (16.10.2026, docs/FOKUS2-F9-2026-10-15.md): Auf dem getönten Grund
   (--pp-accent-tint) erreichte --pp-text-3 nur 4,49:1 — gemessen in WebKit
   an „Infos zum Kurs" und „Kursnotiz". Die Nebenschrift der getönten Zeilen
   (Kursnotiz, ausgewählte Zeile) steht deshalb in --pp-text-2 (hell 6,01:1, dunkel 5,93:1;
   test/verify-fokus2-f9-kontrast.js). */
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-kursnotiz .mt-ex-kn-marke,
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-kursnotiz > :is(.mt-ex-art, .mt-ex-gr, .mt-ex-dat),
.mt-dateien .mt-ex .mt-ex-zeile.mt-ex-gewaehlt > :is(.mt-ex-art, .mt-ex-gr, .mt-ex-dat) { color: var(--pp-text-2); }
.mt-ex-kn-knopf { border: 0; background: none; padding: 0; min-height: 24px; font: inherit; font-weight: 600; color: var(--pp-accent-2); cursor: pointer; text-align: left; }
.mt-ex-kn-knopf:hover { text-decoration: underline; }
.mt-ex-kn-neu .mt-dz-titel { flex-wrap: wrap; align-items: baseline; }
@media (pointer: coarse) { .mt-ex-kn-knopf { min-height: 44px; } }
.mt-ex-leer { margin: 28px 12px; color: var(--pp-text-3); font-size: var(--pp-fs-klein); text-align: center; }
.mt-ex-leer[hidden] { display: none; }
.mt-ex-wohin-liste { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.mt-ex-wohin-zeile { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.mt-ex-wohin-zeile:hover { background: var(--pp-surface-2); }
.mt-ex-wohin-zeile.mt-aus { cursor: default; opacity: .5; }
/* K3-P2: mit Inhalten oder Heften zwei Listen (Ordner, Veranstaltungen) —
   je die Hälfte der Höhe, damit Abbrechen/Verschieben im Bild bleiben. */
.mt-ex-wohin-zwei .mt-ex-wohin-liste { max-height: 26vh; }
.mt-ex-wohin-teil { margin: 12px 0 0; font-size: var(--pp-fs-klein); font-weight: 600; color: var(--pp-text-2); }
.mt-ex-wohin-hinweis, .mt-ex-wohin-grund { margin: 4px 0; }
/* Kacheln — derselbe Knoten, ein anderes Raster. */
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-kopf { display: none; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-rumpf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; padding-top: 8px; align-items: start;
}
.mt-dateien .mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile {
  grid-template-columns: 24px minmax(0, 1fr) 36px;
  grid-template-areas: "wahl . mehr" "sym sym sym" "info info info" "dat dat zu";
  border: 1px solid var(--pp-line); padding: 6px 8px 8px; align-items: start;
}
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-wahl { grid-area: wahl; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-dz-pfeil,
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-mehr-leer { grid-area: mehr; }
/* K3-P6: in der Kachel steht „Von" oben in der Mitte — nur das Kürzel bzw. „du". */
.mt-dateien .mt-ex[data-mt-ex-modus="kacheln"][data-mt-ex-von] .mt-ex-zeile { grid-template-areas: "wahl von mehr" "sym sym sym" "info info info" "dat dat zu"; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-von { grid-area: von; justify-content: center; align-self: center; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-von > .pp-gk + .pp-gk-name { display: none; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-sym { grid-area: sym; font-size: 2.25em; padding: 4px 0; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-dz-info { grid-area: info; justify-content: center; text-align: center; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-art,
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-gr { display: none; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-dat { grid-area: dat; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-zu { grid-area: zu; }
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-hint,
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-dz-erz-liste,
.mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-auf-player { grid-column: 1 / -1; }
/* Der Name zuerst (DATEIEN-R4, Nutzer-Simulation 13.10. p4 #8): Auf dem
   iPad hochkant (834 px) blieben neben Baum (≈ 230 px) und den festen
   Spalten Art/Größe/Datum (320 px) für den Namen 50 px — „Übungsblatt
   4.pdf" in drei Zeilen. Gemessen wird die Breite der Tabelle selbst
   (Container), nicht das Fenster: Seitenleiste und Baum nehmen je nach
   Gerät verschieden viel. Unter 640 px weicht die Art, unter 460 px auch
   Größe und Datum (sie stehen in den Kacheln und im ⋯). Unter 700 px
   Fensterbreite gilt allein das Telefon-Raster darunter. */
.mt-ex-haupt { container: mt-ex-haupt / inline-size; }
@media (min-width: 700px) {
/* K3-P6: Unter 900 px Tabellenbreite zeigt „Von" nur das Kürzel (der Name
   steht im Hinweis) — gemessen in WebKit am Laptop (Tabelle ≈ 800 px neben
   dem Baum): mit 128 px für „Von" blieben dem Namen 184 px, „Sonstiges
   Formelsammlung …" stand in vier Zeilen. */
@container mt-ex-haupt (max-width: 900px) {
  .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf,
  .mt-dateien .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile { grid-template-columns: 24px 24px minmax(0, 1fr) 40px 140px 72px 88px 24px 36px; }
  .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-von > .pp-gk + .pp-gk-name { display: none; }
}
@container mt-ex-haupt (max-width: 640px) {
  .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf,
  .mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile { grid-template-columns: 24px 24px minmax(0, 1fr) 64px 84px 24px 36px; column-gap: 6px; }
  .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf > .mt-ex-art,
  .mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile > .mt-ex-art { display: none; }
  /* K3-P6: „Von" bleibt, schmal — das Kürzel (der Name im Hinweis), „du" ohne Kürzel. */
  .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf,
  .mt-dateien .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile { grid-template-columns: 24px 24px minmax(0, 1fr) 40px 64px 84px 24px 36px; }
  .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-von > .pp-gk + .pp-gk-name { display: none; }
}
@container mt-ex-haupt (max-width: 460px) {
  .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf,
  .mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile { grid-template-columns: 24px 24px minmax(0, 1fr) 24px 36px; }
  .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf > .mt-ex-gr, .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf > .mt-ex-dat,
  .mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile > .mt-ex-gr,
  .mt-dateien .mt-ex:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile > .mt-ex-dat { display: none; }
  .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf,
  .mt-dateien .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile { grid-template-columns: 24px 24px minmax(0, 1fr) 32px 24px 36px; }
}
}
/* Die Quittung der Ablage (DATEIEN-R4): je Datei eine Zeile. */
.mt-quittung { display: flex; flex-direction: column; gap: 2px; }
.mt-quittung-z { display: block; overflow-wrap: anywhere; }
.mt-quittung-pfad { font-family: var(--pp-mono); font-size: var(--pp-fs-mini); }
@media (hover: none) {
  .mt-dateien .mt-ex .mt-ex-zeile { min-height: 44px; }
  .mt-ex-ordnerknopf, .mt-ex-krume { min-height: 40px; }
  .mt-ex-klapp { height: 40px; width: 28px; }
  .mt-ex-kasten, .mt-ex-alle { width: 20px; height: 20px; }   /* DK-14: „Alle" maß 12 × 12 */
  /* DK-14: Liste/Kacheln (41 × 44) und die Sortierköpfe (21 hoch) auf 44. */
  .mt-ex-ansicht > .pp-btn { min-width: 44px; justify-content: center; }
  .mt-ex-kopf button[data-mt-ex-sort] { min-height: 44px; }
  /* D1-08 (web1014, 14.10.2026): Die Kästchen maßen am Finger 20 × 20
     (Zeile) und 13 × 13 („Alle auswählen") — wirksam genau so, denn ein
     Tipp daneben öffnete die Datei. Die Zelle ist seitdem ein <label>
     (js/material.js exVor/Kopfzeile), und sie trägt den unsichtbaren
     44-px-Vorsatz des Lernplan-Kästchens (C48); das Kästchen selbst
     bleibt, wie es ist. Er ragt 10 px über die 24 px breite Spalte: links
     in die Polsterung der Zeile, rechts über die Spaltenlücke ins Symbol
     — das Symbol hat keinen eigenen Weg, ein Tipp dort öffnete nur die
     Zeile. Senkrecht deckt er genau die 44 px der Zeile. Die Kopfzeile
     wächst dafür auf 44 px, sonst läge ihr Vorsatz zur Hälfte unter dem
     der ersten Zeile (die steht später im Markup und gewönne). */
  .mt-ex-wahl { position: relative; cursor: pointer; }
  .mt-ex-wahl::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .mt-ex-kopf { min-height: 44px; }
}
/* Telefon (< 700 px): der Baum als Blatt von links, die Tabelle mit
   Kästchen, Name, Zustand und ⋯ — Art, Größe und Datum stehen in der
   Kachelansicht und im Menü der Zeile. */
@media (max-width: 699px) {
  .mt-ex { grid-template-columns: minmax(0, 1fr); }
  .mt-ex-baumknopf { display: inline-flex; }
  .mt-ex-baum {
    display: none; position: fixed; z-index: 120; top: 0; bottom: 0; left: 0; width: min(82vw, 320px);
    border-right: 1px solid var(--pp-line); box-shadow: 0 0 24px rgba(0, 0, 0, .25);
    /* Kein oberer Safe-Area-Abstand: Die App laeuft mit statusbar-style "default",
       die Statusleiste liegt also nie ueber dem Inhalt (app.html, verify-pwa-0926). */
    padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .mt-ex.baum-auf .mt-ex-baum { display: flex; }
  .mt-ex.baum-auf .mt-ex-schleier { display: block; position: fixed; inset: 0; z-index: 119; background: rgba(0, 0, 0, .35); }
  .mt-ex-suche { max-width: none; flex-basis: 100%; order: 5; }
  .mt-ex-ansicht { margin-left: 0; }
  .mt-ex-kopf, .mt-dateien .mt-ex .mt-ex-zeile { grid-template-columns: 26px 22px minmax(0, 1fr) 22px 44px; column-gap: 6px; }
  .mt-ex-kopf > .mt-ex-art, .mt-ex-kopf > .mt-ex-gr, .mt-ex-kopf > .mt-ex-dat,
  .mt-dateien .mt-ex .mt-ex-zeile > .mt-ex-art, .mt-dateien .mt-ex .mt-ex-zeile > .mt-ex-gr,
  .mt-dateien .mt-ex .mt-ex-zeile > .mt-ex-dat { display: none; }
  /* K3-P6: am Telefon „Von" als Kürzel (bzw. „du"), 28 px. */
  .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-kopf, .mt-dateien .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-zeile { grid-template-columns: 26px 22px minmax(0, 1fr) 28px 22px 44px; }
  .mt-ex[data-mt-ex-von]:not([data-mt-ex-modus="kacheln"]) .mt-ex-von > .pp-gk + .pp-gk-name { display: none; }
  .mt-ex[data-mt-ex-von] .mt-ex-kopf > .mt-ex-von { overflow: hidden; text-overflow: ellipsis; }
  .mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-rumpf { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .mt-dateien .mt-ex[data-mt-ex-modus="kacheln"] .mt-ex-zeile > .mt-ex-dat { display: block; }
  .mt-ex-auswahl { padding: 6px 8px; }
  /* Ohne Auswahl brachen die zwei ausgegrauten Knöpfe auf 390 px in eine
     zweite Reihe (gemessen in WebKit) — am Telefon stehen sie erst mit
     einer Auswahl da. */
  .mt-ex-auswahl:not(.mit) [data-mt-ex-akt] { display: none; }
  .mt-ex-tabelle { padding: 4px 2px 12px; }
}

/* AUSBAU-A1 (14.10.2026): der Absatz an der Zeitmarke, die ein Verweis nennt. */
.mt-text-rumpf p.mt-zeitmarke-ziel { background: var(--pp-accent-tint); border-radius: 6px; box-shadow: 0 0 0 6px var(--pp-accent-tint); }