/* =====================================================================
   PrepP — Stylesheet der aeusseren Huelle (Portal)
   ---------------------------------------------------------------------
   Umsetzung des Claude-Design-Entwurfs "PrepP Redesign".
   Gilt fuer Start, Kurse, Kursseite, Detail, Ergebnis-Uebersicht,
   Training, Meine Inhalte und den Editor.

   NICHT betroffen: Pruefungsansicht und Item-Ansicht im Ergebnis.
   Die bleiben im Dynexite-Look (css/dynexite.css) — so wollte es der
   Entwurf ausdruecklich ("Pruefungsansicht — unveraendert"), und so
   bleibt das Klausurgefuehl am Pruefungstag erhalten.

   ACHTUNG Namensraum: dynexite.css belegt auf :root bereits --bg, --line,
   --ok und --err. Alle Tokens hier trage deshalb das Praefix --pp-,
   sonst faerbt das Portal-Theme die Pruefungsansicht mit ein.
   ===================================================================== */

/* ---------- Tokens: dunkel (Standard) ---------- */
body {
  --pp-bg: #0e1015;
  --pp-bg-2: #14171e;
  --pp-surface: #191d26;
  --pp-surface-2: #1e232d;
  /* Linien und Nebentexte bewusst kräftiger als im Entwurf — der war auf
     Ruhe hin gezeichnet, im Betrieb zählt Lesbarkeit. */
  --pp-line: rgba(236, 234, 229, .20);
  --pp-line-2: rgba(236, 234, 229, .34);
  --pp-text: #f2f0ea;
  --pp-text-2: #c5cbd6;
  --pp-text-3: #99a1af;
  --pp-accent: #c99a4e;
  --pp-accent-2: #dcb478;
  --pp-accent-tint: rgba(201, 154, 78, .12);
  --pp-accent-line: rgba(201, 154, 78, .45);
  --pp-ok: #6fae7f;
  --pp-warn: #d8a544;
  --pp-err: #cf6b5c;
  /* Leichte Einfaerbungen fuer ganze Flaechen (Einsicht: Antwortzeilen).
     Die Volltoene sind dafuer zu laut — sie gehoeren an Rand und Symbol. */
  --pp-ok-tint: rgba(111, 174, 127, .10);
  --pp-warn-tint: rgba(216, 165, 68, .10);
  --pp-err-tint: rgba(207, 107, 92, .10);
  --pp-track: #262b35;
  --pp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .32);
  /* eigener Schatten fuers Anheben beim Ueberfahren */
  --pp-lift: 0 8px 24px rgba(0, 0, 0, .5);
  --pp-serif: "Cormorant Garamond", Georgia, serif;
  --pp-body: "Lora", Georgia, serif;
  /* Technische Schrift fuer das Schaltbild-Labor: Zahlen muessen dort in
     Spalten stehen, dafuer taugt eine Antiqua nicht. */
  --pp-ui: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --pp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Tokens: hell ---------- */
body[data-theme="light"] {
  --pp-bg: #f3f2f2;
  --pp-bg-2: #eceae7;
  --pp-surface: #ffffff;
  --pp-surface-2: #faf9f7;
  --pp-line: rgba(32, 31, 29, .20);
  --pp-line-2: rgba(32, 31, 29, .36);
  --pp-text: #171614;
  --pp-text-2: #423f3c;
  --pp-text-3: #55514b;
  --pp-accent: #b68235;
  --pp-accent-2: #8a6228;
  --pp-accent-tint: rgba(182, 130, 53, .1);
  --pp-accent-line: rgba(182, 130, 53, .5);
  --pp-ok: #2e7d52;
  --pp-warn: #a9761a;
  --pp-err: #b0432f;
  --pp-ok-tint: rgba(46, 125, 82, .08);
  --pp-warn-tint: rgba(169, 118, 26, .09);
  --pp-err-tint: rgba(176, 67, 47, .08);
  --pp-track: #e2dfd9;
  --pp-shadow: 0 1px 3px rgba(32, 31, 29, .09);
  --pp-lift: 0 7px 20px rgba(32, 31, 29, .17);
}

/* Nur waehrend eine Portalseite sichtbar ist — sonst wuerde der dunkle
   Hintergrund unter der hellen Pruefungsansicht durchscheinen. */
body.pp-mode { background: var(--pp-bg); }

/* ---------- Sprachumschaltung ----------
   Beide Sprachen stehen im Markup; die Anzeige entscheidet CSS.
   Vorteil: kein Neu-Rendern beim Umschalten, kein Zustand in den Views. */
[data-en] { display: none; }
body[data-lang="en"] [data-en] { display: inline; }
body[data-lang="en"] [data-de] { display: none; }

/* ---------- Speicherwarnung ----------
   Gehoert keiner der beiden Welten: Der Browserspeicher kann im Portal wie
   mitten in der Pruefung volllaufen, und dann muss die Meldung in beiden
   Faellen erscheinen. Deshalb absichtlich NICHT auf .pp-root oder .pp-mode
   eingegrenzt und mit festen Farben statt --pp-Tokens -- so sieht sie ueberall
   gleich aus und haengt an keinem Theme.
   z-index ueber allem: Sie meldet Datenverlust, sie darf nichts verdecken. */
.pp-store-warn {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
  z-index: 99999; max-width: min(560px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  background: #7d2020; color: #fff; border: 1px solid #a33;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .38);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 500; line-height: 1.45;
}
.pp-store-warn-txt { flex: 1 1 auto; }
.pp-store-warn b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.pp-store-warn button {
  margin-left: 4px; flex: 0 0 auto; background: none; border: 0;
  color: #fff; opacity: .75; font-size: 15px; line-height: 1; padding: 2px 4px;
}
.pp-store-warn button:hover { opacity: 1; }

/* ---------- Grundgeruest ---------- */
.pp-root {
  display: flex;
  min-height: 100vh;
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: var(--pp-body);
  font-size: 14.5px;
  /* Grundgewicht 500 statt 400: Lora wirkt in 400 auf dunklem Grund dünn. */
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.pp-root b, .pp-root strong { font-weight: 700; }
.pp-root a { color: var(--pp-accent); text-decoration: none; }
.pp-root a:hover { color: var(--pp-accent-2); text-decoration: underline; }
.pp-root *:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-root ::selection { background: var(--pp-accent-tint); }
.pp-root input, .pp-root button, .pp-root select, .pp-root textarea { font-family: inherit; }
.pp-num { font-variant-numeric: tabular-nums; }

/* ---------- Seitenleiste ---------- */
.pp-side {
  width: 236px; flex: 0 0 236px;
  border-right: 1px solid var(--pp-line);
  background: var(--pp-bg-2);
  padding: 22px 16px 18px;
  display: flex; flex-direction: column; gap: 20px;
  /* Steht fest am linken Rand: bei langen Seiten (Training) scrollt nur der
     Inhalt daneben. sticky statt fixed, damit die Leiste Flex-Element bleibt
     und ihre Breite die Inhaltsfläche weiterhin schiebt. */
  position: sticky; top: 0; height: 100vh;
  /* Reicht die eigene Höhe nicht (kleiner Bildschirm, laufender Versuch),
     rollt die Leiste in sich statt unten abgeschnitten zu werden. */
  overflow-y: auto;
  box-sizing: border-box;
}
.pp-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; cursor: pointer; }
/* Bildmarke "Sprungantwort, kalibriert" — je eine Fassung für dunkel und
   hell, umgeschaltet über das Theme statt per Skript. */
.pp-logo { width: 30px; height: 30px; display: block; flex: 0 0 auto; }
.pp-logo.light { display: none; }
body[data-theme="light"] .pp-logo.dark { display: none; }
body[data-theme="light"] .pp-logo.light { display: block; }
.pp-brand-mark {
  width: 30px; height: 30px;
  border: 1px solid var(--pp-accent-line); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pp-serif); font-style: italic; font-size: 19px;
  color: var(--pp-accent);
}
.pp-brand-name { font-family: var(--pp-serif); font-weight: 600; font-size: 21px; line-height: 1; letter-spacing: .4px; }

.pp-nav { display: flex; flex-direction: column; gap: 2px; }
.pp-nav button {
  font-weight: 500; text-align: left; display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 5px; font-size: 14px; cursor: pointer;
  background: transparent; color: var(--pp-text-2); border: 1px solid transparent;
}
.pp-nav button:hover { background: var(--pp-surface-2); }
.pp-nav button.on {
  font-weight: 600; background: var(--pp-accent-tint); color: var(--pp-text);
  border-color: var(--pp-accent-line);
}
.pp-nav button span { flex: 1; }
.pp-badge {
  border: 1px solid var(--pp-accent-line); color: var(--pp-accent);
  border-radius: 9px; padding: 1px 7px; font-size: 10.5px;
  font-variant-numeric: tabular-nums; flex: 0 0 auto !important;
}

/* Laufender Versuch in der Seitenleiste */
.pp-running {
  text-align: left; border: 1px solid var(--pp-accent-line);
  background: var(--pp-accent-tint); border-radius: 6px;
  padding: 12px 13px; cursor: pointer; color: var(--pp-text); width: 100%;
}
.pp-running:hover { border-color: var(--pp-accent); }
.pp-running .t { font-size: 13.5px; margin-top: 4px; }
.pp-running .m { font-size: 11.5px; color: var(--pp-text-2); margin-top: 7px; font-variant-numeric: tabular-nums; }

.pp-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pp-segment { display: flex; border: 1px solid var(--pp-line); border-radius: 5px; overflow: hidden; flex: 1; }
.pp-segment button {
  flex: 1; border: none; background: transparent; color: var(--pp-text-3);
  padding: 7px 0; font-size: 12px; cursor: pointer; letter-spacing: .6px;
}
.pp-segment button + button { border-left: 1px solid var(--pp-line); }
.pp-segment button.on { background: var(--pp-accent-tint); color: var(--pp-accent); }
.pp-theme {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--pp-line); border-radius: 5px; background: transparent;
  color: var(--pp-text-2); padding: 7px 11px; font-size: 12px; cursor: pointer;
}
.pp-theme:hover { border-color: var(--pp-accent-line); color: var(--pp-accent); }
.pp-user {
  display: flex; align-items: center; gap: 9px;
  padding-top: 10px; border-top: 1px solid var(--pp-line); font-size: 13px;
}
.pp-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pp-track); border: 1px solid var(--pp-line); flex: 0 0 auto;
}
/* Impressum und Datenschutz. Zwei eigenstaendige HTML-Seiten, kein SPA-Ziel —
   § 5 DDG verlangt "staendig verfuegbar", und das erfuellt eine ausgelieferte
   Datei besser als eine Route, die erst nach dem Laden von app.js existiert.
   Deshalb hier <a href> statt data-go. */
.pp-legal { display: flex; gap: 12px; font-size: 11.5px; }
.pp-legal a { color: var(--pp-text-3); text-decoration: none; letter-spacing: .2px; }
.pp-legal a:hover { color: var(--pp-text-2); text-decoration: underline; }

/* ---------- Inhaltsflaeche ---------- */
.pp-main { flex: 1; min-width: 0; }
/* Inhalt mittig statt linksbündig — auf breiten Bildschirmen klebte sonst
   alles am linken Rand, während rechts die halbe Fläche leer blieb. */
.pp-page { max-width: 1120px; margin: 0 auto; padding: 38px 44px 60px; }

/* Seitenleiste: Griff am rechten Rand, Ausblenden und Streifensymbol */
.pp-side-grip {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 5;
}
.pp-side-grip::after {
  content: ""; position: absolute; top: 0; left: 2px; width: 2px; height: 100%;
  background: transparent; transition: background .12s ease;
}
.pp-side-grip:hover::after { background: var(--pp-accent); }
/* HINWEIS: hier kein "position: relative" — das stünde hinter der sticky-Regel
   oben, gewönne bei gleicher Spezifität und die Leiste würde wieder mitrollen.
   sticky ist selbst Bezugsrahmen genug für den absolut gesetzten Griff. */
.pp-side.will-hide { opacity: .45; }
.pp-root.side-off .pp-side { display: none; }

/* Eingeklappt bleibt eine schmale Spalte stehen: oben die Bildmarke, darunter
   der Knopf zum Aufklappen. Sie ist Flex-Element wie die Leiste selbst, damit
   der Inhalt daneben beginnt statt darunter zu verschwinden. */
.pp-rail {
  width: 58px; flex: 0 0 58px;
  border-right: 1px solid var(--pp-line);
  background: var(--pp-bg-2);
  padding: 22px 0 18px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: sticky; top: 0; height: 100vh;
  box-sizing: border-box;
}
.pp-rail .pp-brand { padding: 0; }
.pp-side-show {
  width: 34px; height: 32px; border-radius: 7px;
  border: 1px solid var(--pp-line-2); background: var(--pp-surface);
  color: var(--pp-text); font-size: 15px; cursor: pointer; flex: 0 0 auto;
}
.pp-side-show:hover { border-color: var(--pp-accent); color: var(--pp-accent); }

/* Begrüßung neben der Überschrift */
.pp-greet { margin-top: 8px; font-size: 13.5px; color: var(--pp-text-2); font-style: italic; }
.pp-greet b { font-style: normal; }

/* Einklappbare Abschnitte */
.pp-fold > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; padding: 4px 0; margin-bottom: 2px;
}
.pp-fold > summary::-webkit-details-marker { display: none; }
.pp-fold > summary::before {
  content: "▸"; color: var(--pp-text-3); font-size: 13px;
  transition: transform .13s ease; display: inline-block;
}
.pp-fold[open] > summary::before { transform: rotate(90deg); }
.pp-fold > summary:hover::before { color: var(--pp-accent); }
.pp-fold-n {
  font-size: 11px; color: var(--pp-text-3); border: 1px solid var(--pp-line);
  border-radius: 9px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}

/* Themenblock in der Auswertung: der Weg in die Aufgabe */
.pp-block-go {
  margin-top: 10px; font-size: 11.5px; color: var(--pp-text-3);
  display: flex; justify-content: flex-end; gap: 4px;
}
.pp-block.pp-pick:hover .pp-block-go { color: var(--pp-accent); }

/* Dialog im Portal-Look */
.pp-modal-bg {
  position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pp-modal {
  width: 100%; max-height: 84vh; overflow: auto;
  background: var(--pp-bg-2); color: var(--pp-text);
  border: 1px solid var(--pp-line-2); border-radius: 10px;
  box-shadow: var(--pp-lift); font-family: var(--pp-body); font-weight: 500;
}
.pp-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 10px; border-bottom: 1px solid var(--pp-line);
}
.pp-modal-head h3 { margin: 0; font-family: var(--pp-serif); font-weight: 600; font-size: 22px; }
.pp-modal-x {
  margin-left: auto; border: 1px solid var(--pp-line); background: transparent;
  color: var(--pp-text-2); border-radius: 6px; width: 30px; height: 28px;
  cursor: pointer; font-size: 13px;
}
.pp-modal-x:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-modal-body { padding: 10px 0 16px; }
.pp-datenew {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px; margin: 6px 14px 0; border-top: 1px solid var(--pp-line);
}
.pp-datenew label {
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px;
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 600;
}
.pp-datenew input, .pp-datenew select {
  border: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text);
  border-radius: 6px; padding: 8px 10px; font-size: 13px;
  font-family: inherit; letter-spacing: 0; text-transform: none; outline: none;
}
.pp-datenew input:focus, .pp-datenew select:focus { border-color: var(--pp-accent); }

/* Griff an der Editor-Vorschau */
.pp-prev-grip {
  position: absolute; top: 0; left: -4px; width: 8px; height: 100%;
  cursor: col-resize; z-index: 5;
}
.pp-prev-grip::after {
  content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%;
  background: transparent; transition: background .12s ease;
}
.pp-prev-grip:hover::after { background: var(--pp-accent); }
.pp-editor-prev { position: relative; }
.pp-eyebrow {
  font-size: 10.5px; letter-spacing: 1.9px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 600;
}
.pp-eyebrow.accent { color: var(--pp-accent); }
/* Überschriften in 600 statt 400 — Cormorant Garamond ist eine feine
   Renaissance-Antiqua und wirkt im Regelschnitt fast zart. */
.pp-h1 { font-family: var(--pp-serif); font-weight: 600; font-size: 39px; margin: 8px 0 0; letter-spacing: .2px; }
.pp-h2 { font-family: var(--pp-serif); font-weight: 600; font-size: 26px; margin: 0; }
.pp-h3 { font-family: var(--pp-serif); font-weight: 600; font-size: 23px; margin: 0 0 12px; }
.pp-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.pp-crumb { font-size: 12.5px; color: var(--pp-text-3); margin-bottom: 6px; }
.pp-crumb a { color: var(--pp-text-3); }

.pp-search {
  border: 1px solid var(--pp-line); border-radius: 20px;
  padding: 8px 18px; font-size: 13px; color: var(--pp-text-3);
  background: transparent; outline: none; min-width: 150px;
}
.pp-search:focus { border-color: var(--pp-accent-line); color: var(--pp-text); }

/* ---------- Bausteine ---------- */
.pp-card { border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-surface); }
.pp-card.pad { padding: 20px; }
.pp-card.accent { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); }
.pp-list { border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-surface); overflow: hidden; }
.pp-row { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--pp-line); }
.pp-row:last-child { border-bottom: none; }
.pp-row .grow { flex: 1; min-width: 0; }

/* ---------- Anfassbare Flächen ----------
   Statt eines Knopfes "Öffnen" ist die ganze Zeile bzw. Karte das Ziel.
   Beim Überfahren hebt sie sich leicht heraus — das ersetzt eine Beschriftung,
   die man lesen muss, durch etwas, das man sieht. Nebenaktionen erscheinen
   erst dabei, damit die Liste im Ruhezustand ruhig bleibt. */
.pp-pick {
  cursor: pointer;
  transition: transform .13s ease, box-shadow .13s ease,
              border-color .13s ease, background-color .13s ease;
}
.pp-card.pp-pick:hover, .pp-card.pp-pick:focus-visible {
  transform: translateY(-3px);
  border-color: var(--pp-accent-line);
  box-shadow: var(--pp-lift);
}
.pp-list .pp-pick { position: relative; }
.pp-list .pp-pick:hover, .pp-list .pp-pick:focus-visible {
  background: var(--pp-surface-2);
  border-color: var(--pp-accent-line);
  transform: translateY(-1px);
  box-shadow: var(--pp-lift);
  z-index: 2;
}
.pp-pick:active { transform: translateY(0); }

/* Pfeil als Hinweis, dass hier etwas passiert */
.pp-go {
  color: var(--pp-text-3); font-size: 19px; line-height: 1; flex: 0 0 auto;
  transition: transform .13s ease, color .13s ease;
}
.pp-pick:hover .pp-go { color: var(--pp-accent); transform: translateX(4px); }

/* Nebenaktionen: unsichtbar und unklickbar, bis die Zeile angefasst wird */
.pp-actions { display: flex; gap: 8px; flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity .13s ease; }
.pp-pick:hover .pp-actions, .pp-pick:focus-within .pp-actions { opacity: 1; pointer-events: auto; }
/* Auf Geräten ohne Mauszeiger gibt es kein Überfahren — dann immer zeigen. */
@media (hover: none) { .pp-actions { opacity: 1; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) {
  .pp-pick, .pp-go, .pp-actions { transition: none; }
  .pp-pick:hover, .pp-card.pp-pick:hover, .pp-list .pp-pick:hover { transform: none; }
}

.pp-btn {
  border: 1px solid var(--pp-line-2); color: var(--pp-text); font-weight: 600;
  background: transparent; border-radius: 4px; padding: 10px 20px;
  font-size: 13.5px; cursor: pointer;
}
.pp-btn:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-btn.accent { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-btn.accent:hover { background: var(--pp-accent-tint); border-color: var(--pp-accent-2); color: var(--pp-accent-2); }
.pp-btn.slim { padding: 6px 14px; font-size: 12.5px; color: var(--pp-text-2); }
.pp-btn.big { padding: 13px 0; font-size: 15px; width: 100%; border-radius: 5px; }
.pp-btn.wide { width: 100%; }
.pp-btn.dashed { border-style: dashed; border-color: var(--pp-accent-line); color: var(--pp-accent); padding: 8px 14px; font-size: 12.5px; }
.pp-btn.dashed:hover { background: var(--pp-accent-tint); }
.pp-btn[disabled] { opacity: .45; cursor: default; }
.pp-btn[disabled]:hover { border-color: var(--pp-line-2); color: var(--pp-text); }

.pp-chip {
  border: 1px solid var(--pp-line); color: var(--pp-text-2);
  border-radius: 16px; padding: 6px 15px; font-size: 12.5px;
  background: transparent; cursor: pointer;
}
.pp-chip.on { border-color: var(--pp-accent); background: var(--pp-accent-tint); color: var(--pp-accent); }
.pp-chip.static { cursor: default; }
.pp-chips { display: flex; gap: 9px; flex-wrap: wrap; }

.pp-tag {
  border: 1px solid var(--pp-accent-line); color: var(--pp-accent); font-weight: 600;
  border-radius: 11px; padding: 2px 10px; font-size: 10.5px; letter-spacing: .6px;
  white-space: nowrap;
}
.pp-tag.dim { border-color: var(--pp-line-2); color: var(--pp-text-3); }

.pp-bar { height: 5px; background: var(--pp-track); border-radius: 3px; overflow: hidden; }
.pp-bar.thin { height: 4px; border-radius: 2px; }
.pp-bar > i { display: block; height: 100%; background: var(--pp-accent); }

.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.pp-stat-label { font-size: 10.5px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--pp-text-3); font-weight: 600; }
.pp-stat-num { font-family: var(--pp-serif); font-weight: 600; font-size: 40px; line-height: 1.1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.pp-stat-sub { font-size: 12.5px; color: var(--pp-text-2); margin-top: 2px; }

/* Kleines Saeulendiagramm (Punkteverlauf) */
.pp-spark { display: flex; align-items: flex-end; gap: 7px; height: 38px; margin-top: 14px; }
.pp-spark > i { flex: 1; background: var(--pp-track); border-radius: 2px; }
.pp-spark > i.on { background: var(--pp-accent); }

/* ---------- Start ---------- */
.pp-active {
  border: 1px solid var(--pp-accent-line); background: var(--pp-accent-tint);
  border-radius: 8px; padding: 24px 26px;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-bottom: 24px;
}
.pp-active .title { font-family: var(--pp-serif); font-size: 27px; margin: 7px 0 0; }
.pp-active .sub { font-size: 13px; color: var(--pp-text-2); margin-top: 3px; }
.pp-active .prog { font-size: 12.5px; color: var(--pp-text-2); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pp-weak-course { font-size: 12px; color: var(--pp-text-3); width: 90px; flex: 0 0 auto; }
.pp-weak-bar { width: 220px; flex: 0 0 auto; }
.pp-weak-pct { width: 44px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pp-empty { color: var(--pp-text-3); padding: 18px 20px; font-size: 13.5px; }

/* ---------- Kurse ---------- */
.pp-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.pp-course { display: flex; flex-direction: column; padding: 22px; }
.pp-course .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pp-course .title { font-family: var(--pp-serif); font-weight: 600; font-size: 25px; margin: 8px 0 18px; }
.pp-course .nums {
  display: flex; gap: 22px; flex-wrap: wrap; min-width: 0;
  border-top: 1px solid var(--pp-line); padding-top: 14px; margin-top: auto;
}
.pp-course .nums > div { white-space: nowrap; }
.pp-course .nums b { display: block; font-family: var(--pp-serif); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-course .nums span { font-size: 11px; color: var(--pp-text-3); }
.pp-fav { border: none; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; color: var(--pp-text-3); }
.pp-fav.on { color: var(--pp-accent); }
.pp-fav:hover { color: var(--pp-accent); }
.pp-foot-links { margin-top: 36px; border-top: 1px solid var(--pp-line); padding-top: 16px; font-size: 12px; color: var(--pp-text-3); line-height: 1.7; }
.pp-foot-links b { color: var(--pp-text-2); }

/* ---------- Kursseite ---------- */
/* Reiter als Blöcke: groß genug, um ohne Zielen getroffen zu werden — sie
   sind der Hauptweg zurück in die Übersicht. */
.pp-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 22px 0 0;
  border-bottom: 1px solid var(--pp-line); padding-bottom: 8px;
}
.pp-tabs button {
  font-weight: 600; font-size: 14.5px; cursor: pointer; font-family: inherit;
  color: var(--pp-text-2); background: transparent;
  border: 1px solid var(--pp-line); border-radius: 7px;
  padding: 11px 20px; line-height: 1.2;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pp-tabs button:hover { border-color: var(--pp-line-2); color: var(--pp-text); background: var(--pp-surface); }
.pp-tabs button.on {
  color: var(--pp-accent); border-color: var(--pp-accent-line);
  background: var(--pp-accent-tint);
}
/* Die Zeile trägt Titel, Status und bis zu drei Knöpfe. Wird der Platz knapp,
   soll sie umbrechen — nicht der Titel mitten im Wort. */
.pp-exam-row { padding: 18px 22px; gap: 14px 18px; flex-wrap: wrap; }
.pp-exam-row .grow { flex: 1 1 240px; }
.pp-exam-row.running { background: var(--pp-accent-tint); }
.pp-exam-row .title { font-family: var(--pp-serif); font-weight: 600; font-size: 21px; }
.pp-exam-row .meta { font-size: 12.5px; color: var(--pp-text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pp-exam-row .status { width: 160px; flex: 0 0 auto; font-size: 12.5px; color: var(--pp-text-2); }
.pp-exam-row .status.live { color: var(--pp-accent); font-weight: 600; }

/* ---------- Detailseite ---------- */
.pp-detail { display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-start; }
.pp-detail-main { flex: 1 1 420px; min-width: 0; }
.pp-detail-side { width: 300px; flex: 0 0 300px; padding-top: 52px; display: flex; flex-direction: column; gap: 16px; }
.pp-keyfigs {
  display: flex; gap: 38px; flex-wrap: wrap;
  border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line);
  padding: 18px 0; margin-bottom: 26px;
}
.pp-keyfigs b { display: block; font-family: var(--pp-serif); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-keyfigs span { font-size: 11.5px; color: var(--pp-text-3); }
.pp-note { font-size: 12.5px; color: var(--pp-text-2); margin: 10px 0 18px; line-height: 1.6; }
.pp-hint { margin-top: 12px; font-size: 11px; color: var(--pp-text-3); text-align: center; line-height: 1.5; }
.pp-attempt-n { width: 20px; flex: 0 0 auto; font-family: var(--pp-serif); font-size: 19px; }

/* ---------- Ergebnis ---------- */
.pp-score {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 26px; margin-bottom: 26px;
}
.pp-score-ring {
  width: 132px; height: 132px; flex: 0 0 132px;
  border: 1px solid var(--pp-accent-line); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pp-score-ring b { font-family: var(--pp-serif); font-size: 38px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-score-ring span { font-size: 11.5px; color: var(--pp-text-3); margin-top: 4px; }
.pp-score-main { flex: 1 1 280px; min-width: 0; }
.pp-score-main .verdict { font-family: var(--pp-serif); font-weight: 600; font-size: 27px; }
.pp-score-main .meta { font-size: 13px; color: var(--pp-text-2); margin-top: 5px; font-variant-numeric: tabular-nums; }
.pp-score-hist { flex: 1 1 140px; min-width: 130px; max-width: 190px; }
.pp-score-hist .pp-spark { height: 64px; gap: 9px; margin-top: 12px; }
.pp-score-hist .vals { font-size: 11px; color: var(--pp-text-3); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pp-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 32px; }
.pp-block { padding: 16px 18px; }
.pp-block .head { display: flex; justify-content: space-between; font-size: 14px; gap: 12px; }
.pp-block .head span:last-child { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pp-res-row { border-left: 3px solid var(--pp-line-2); cursor: pointer; gap: 16px; }
.pp-res-row:hover { background: var(--pp-surface-2); }
.pp-res-row.ok { border-left-color: var(--pp-ok); }
.pp-res-row.warn { border-left-color: var(--pp-warn); }
.pp-res-row.err { border-left-color: var(--pp-err); }
.pp-res-row .score { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Filter "nur Fehler zeigen" */
.pp-hide-ok .pp-res-row.ok { display: none; }
.pp-toggle { font-size: 12.5px; color: var(--pp-text-2); display: flex; align-items: center; gap: 7px; cursor: pointer; }
.pp-toggle input { accent-color: var(--pp-accent); }
.pp-inline-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.pp-inline-head .pp-h2, .pp-inline-head .pp-h3 { margin: 0; }
.pp-inline-head > a, .pp-inline-head > label { margin-left: auto; }

/* ---------- Training ---------- */
.pp-task { padding: 28px 30px; }
.pp-task-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--pp-line); padding-bottom: 14px;
}
.pp-task-text { font-size: 16px; line-height: 1.75; margin: 20px 0 6px; max-width: 60ch; text-wrap: pretty; }
.pp-task-body { margin: 18px 0 26px; }
.pp-task-foot { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--pp-line); padding-top: 20px; flex-wrap: wrap; }
.pp-task-foot .right { margin-left: auto; }
.pp-feedback { border-radius: 6px; padding: 14px 16px; font-size: 13.5px; line-height: 1.65; margin-bottom: 20px; border: 1px solid; }
.pp-feedback.ok { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); }
.pp-feedback.err { border-color: var(--pp-line-2); background: var(--pp-surface-2); }
.pp-feedback b { font-weight: 600; }

/* Der Aufgabenkoerper wird vom Dynexite-Renderer erzeugt und bleibt hell.
   Das ist keine Bequemlichkeit, sondern notwendig: Schaltbilder, Bode-Plots
   und PLA-Diagramme sind schwarze SVGs auf weissem Grund — die liessen sich
   per CSS nicht umfaerben und waeren auf dunklem Untergrund unlesbar.
   Der Entwurf loest das an anderer Stelle genauso (weisse Vorschau im
   Editor), und es hat einen Nebeneffekt, der zum Zweck passt: Die Aufgabe
   sieht beim Ueben genauso aus wie am Klausurtag. */
.pp-task-body {
  background: #fff; color: #333c48;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  border-radius: 6px; overflow-x: auto;
  padding: 14px 0 18px; margin: 18px 0 26px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}
.pp-task-body .iblock-text:first-child { padding-top: 0; }

/* ---------- Meine Inhalte ---------- */
.pp-own-row .title { font-family: var(--pp-serif); font-weight: 600; font-size: 20px; }
.pp-own-row .meta { font-size: 12.5px; color: var(--pp-text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pp-ai { border: 1px solid var(--pp-accent-line); border-radius: 8px; padding: 26px; background: var(--pp-accent-tint); }
.pp-ai-title { font-family: var(--pp-serif); font-size: 24px; margin-bottom: 20px; }
/* Angabenformular: baut den KI-Prompt fertig zusammen, damit man ihn nur
   noch kopieren muss. */
.pp-ai-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.pp-ai-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pp-text-3);
}
.pp-ai-form label.wide { grid-column: 1 / -1; }
.pp-ai-form label.check {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px;
  letter-spacing: 0; text-transform: none; font-size: 12.5px;
  color: var(--pp-text-2); cursor: pointer;
}
.pp-ai-form input, .pp-ai-form select {
  border: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text);
  border-radius: 4px; padding: 8px 10px; font-size: 13px;
  letter-spacing: 0; text-transform: none; outline: none; font-family: inherit;
  min-width: 0; width: 100%; box-sizing: border-box;
}
.pp-ai-form input:focus, .pp-ai-form select:focus { border-color: var(--pp-accent); }
.pp-ai-form input[type="checkbox"] { width: auto; accent-color: var(--pp-accent); }
.pp-ai-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.pp-ai-step { border: 1px solid var(--pp-line); border-radius: 6px; padding: 18px; background: var(--pp-surface); }
.pp-ai-step.on { border-color: var(--pp-accent-line); }
.pp-ai-step .n {
  width: 26px; height: 26px; border: 1px solid var(--pp-line-2); color: var(--pp-text-3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.pp-ai-step.on .n { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-ai-step .lbl { font-size: 14.5px; margin-top: 12px; }
.pp-ai-out { margin-top: 18px; font-size: 13px; }
.pp-ai-out .ai-err { color: var(--pp-err); }
.pp-ai-out .ai-ok { color: var(--pp-ok); }
.pp-textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--pp-line);
  background: var(--pp-surface-2); color: var(--pp-text); border-radius: 4px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.6; resize: vertical; outline: none;
}
.pp-textarea:focus { border-color: var(--pp-accent); }

/* ---------- Editor ---------- */
.pp-editor-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  padding: 16px 26px; border-bottom: 1px solid var(--pp-line); background: var(--pp-bg-2);
}
.pp-editor-top button, .pp-editor-top > span { white-space: nowrap; flex: 0 0 auto; }
.pp-editor-top .back { border: none; background: transparent; color: var(--pp-text-3); font-size: 13px; cursor: pointer; }
.pp-editor-top .back:hover { color: var(--pp-accent); }
.pp-input {
  border: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text);
  border-radius: 4px; padding: 8px 12px; font-size: 15px; outline: none;
}
.pp-input:focus { border-color: var(--pp-accent); }
.pp-editor-top .spacer { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.pp-editor-grid {
  display: grid; grid-template-columns: 200px minmax(330px, 1fr) minmax(270px, 400px);
  min-height: calc(100vh - 61px);
}
.pp-editor-items {
  border-right: 1px solid var(--pp-line); background: var(--pp-bg-2);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 5px;
}
.pp-mini-label { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--pp-text-3); font-weight: 600; }
.pp-item-chip {
  border: 1px solid var(--pp-line); border-radius: 5px; padding: 9px 11px;
  display: flex; font-size: 13.5px; color: var(--pp-text-2); cursor: pointer;
  background: transparent; text-align: left; gap: 8px;
}
.pp-item-chip span { flex: 1; }
.pp-item-chip b { font-weight: 400; font-variant-numeric: tabular-nums; }
.pp-item-chip.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-text); }
.pp-editor-sum { margin-top: auto; border-top: 1px solid var(--pp-line); padding-top: 12px; font-size: 12px; color: var(--pp-text-3); font-variant-numeric: tabular-nums; }
.pp-editor-mid { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-editor-mid .head { display: flex; align-items: baseline; gap: 12px; }
.pp-editor-mid .head .t { font-family: var(--pp-serif); font-size: 24px; }
.pp-editor-mid .head .p { margin-left: auto; font-size: 12.5px; color: var(--pp-text-3); font-variant-numeric: tabular-nums; }
.pp-editor-prev { border-left: 1px solid var(--pp-line); background: var(--pp-bg-2); padding: 20px; min-width: 0; }
.pp-editor-prev .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pp-editor-prev .head > :last-child { margin-left: auto; }
/* Die Vorschau zeigt bewusst den Dynexite-Look — sie soll aussehen wie
   spaeter in der Pruefung, nicht wie der Editor. */
.pp-prev-frame {
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px; color: #333c48; overflow-x: auto;
}
.pp-blk { border: 1px solid var(--pp-line); border-radius: 6px; background: var(--pp-surface); padding: 16px; }
.pp-blk-head {
  display: flex; align-items: center; font-size: 10px; letter-spacing: 1.7px;
  text-transform: uppercase; color: var(--pp-text-3); margin-bottom: 10px; gap: 8px;
}
.pp-blk-head .tools { margin-left: auto; letter-spacing: 0; font-size: 12px; display: flex; gap: 8px; }
.pp-blk-head .tools button { border: none; background: transparent; color: var(--pp-text-3); cursor: pointer; font-size: 13px; padding: 0 2px; }
.pp-blk-head .tools button:hover { color: var(--pp-accent); }
.pp-field-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-field-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pp-text-3);
}
.pp-field-grid input, .pp-field-grid select, .pp-field-grid textarea {
  border: 1px solid var(--pp-line); background: var(--pp-surface-2); color: var(--pp-text);
  border-radius: 4px; padding: 7px 9px; font-size: 13px; letter-spacing: 0;
  text-transform: none; outline: none;
}
.pp-field-grid input:focus, .pp-field-grid select:focus, .pp-field-grid textarea:focus { border-color: var(--pp-accent); }
.pp-field-grid .w-s { width: 64px; }
.pp-field-grid .w-m { width: 96px; }
.pp-field-grid .w-l { width: 220px; }
.pp-field-grid .w-full { width: 100%; }

/* Die Blockeditoren stammen unveraendert aus editor.js und bringen ihre
   Dynexite-Klassen mit. Statt ihr Markup anzufassen — was die Editorlogik
   und den E2E-Test gefaehrden wuerde — bekommen sie hier das Portal-Kleid. */
.pp-editor-mid .ed-blockhead {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 400; margin-bottom: 4px;
}
.pp-editor-mid .ed-blockhead label { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.pp-editor-mid .ed-block {
  border: 1px solid var(--pp-line); border-radius: 6px;
  background: var(--pp-surface); padding: 16px; margin-bottom: 14px;
}
.pp-editor-mid .ed-bhead {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--pp-text-3); margin-bottom: 10px;
}
.pp-editor-mid .ed-field {
  border: 1px solid var(--pp-line); border-radius: 5px;
  background: var(--pp-surface-2); padding: 12px; margin-top: 10px;
}
.pp-editor-mid .ed-frow { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pp-editor-mid .ed-meta { color: var(--pp-text-3); font-size: 12px; }
.pp-editor-mid input, .pp-editor-mid select, .pp-editor-mid textarea {
  border: 1px solid var(--pp-line); background: var(--pp-surface-2);
  color: var(--pp-text); border-radius: 4px; padding: 7px 9px;
  font-size: 13px; font-family: inherit; outline: none; max-width: 100%;
}
.pp-editor-mid input:focus, .pp-editor-mid select:focus, .pp-editor-mid textarea:focus { border-color: var(--pp-accent); }
.pp-editor-mid label { font-size: 12.5px; color: var(--pp-text-2); }
.pp-editor-mid .btn-blue, .pp-editor-mid .btn-outline, .pp-editor-mid .btn-ghost,
.pp-editor-mid .ed-bhead button, .pp-editor-mid .ed-addblock button {
  border: 1px solid var(--pp-line-2); background: transparent; color: var(--pp-text);
  border-radius: 4px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.pp-editor-mid .btn-blue:hover, .pp-editor-mid .btn-outline:hover, .pp-editor-mid .btn-ghost:hover,
.pp-editor-mid .ed-bhead button:hover, .pp-editor-mid .ed-addblock button:hover {
  border-color: var(--pp-accent); color: var(--pp-accent);
}
.pp-editor-mid .ed-bhead button { border: none; padding: 0 4px; font-size: 13px; color: var(--pp-text-3); }
.pp-editor-mid .ed-addblock { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.pp-editor-mid .ed-addblock button { border-style: dashed; border-color: var(--pp-accent-line); color: var(--pp-accent); }
.pp-editor-mid .ed-cirprev { background: #fff; border-radius: 4px; padding: 8px; overflow-x: auto; }
/* Vorschau: bewusst weiss, sie zeigt den Klausur-Look */
.pp-editor-prev .item-card { background: #fff; color: #333c48; }

/* ---------- Uebergang in den Pruefungsmodus ---------- */
@keyframes pp-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pp-load { from { width: 6% } to { width: 96% } }
.pp-handoff {
  position: fixed; inset: 0; z-index: 200; background: #0a0c11; color: #eceae5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; animation: pp-fade .25s ease-out; font-family: var(--pp-body);
  text-align: center; padding: 24px;
}
.pp-handoff .eyebrow { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: #c99a4e; }
.pp-handoff .title { font-family: var(--pp-serif); font-size: 34px; font-weight: 400; }
.pp-handoff .track { width: 320px; max-width: 80vw; height: 3px; background: rgba(236, 234, 229, .14); border-radius: 2px; overflow: hidden; }
/* Laufzeit setzt handoff() als --pp-load-ms, damit der Balken mit der Blende
   fertig wird und nicht schon lange vorher am Anschlag steht. */
.pp-handoff .track > i {
  display: block; height: 100%; background: #c99a4e;
  animation: pp-load var(--pp-load-ms, 1600ms) ease-in-out forwards;
}
.pp-handoff .note { font-size: 14px; color: #8d94a2; line-height: 1.7; max-width: 440px; }
.pp-handoff button {
  border: 1px solid rgba(236, 234, 229, .28); background: transparent; color: #a8afbc;
  border-radius: 4px; padding: 9px 20px; font-size: 13px; cursor: pointer; margin-top: 6px;
  font-family: inherit;
}
.pp-handoff button:hover { border-color: #c99a4e; color: #c99a4e; }

/* =====================================================================
   Einsicht — Portal-Fassung (Umsetzung des Entwurfs "PrepP Einsicht")
   ---------------------------------------------------------------------
   Dieselben Daten wie die Dynexite-Einsicht, nur zum Auswerten geordnet:
   links der Navigator durch die Klausur, in der Mitte die Aufgabe, rechts
   der Zusammenhang (Zeit, verwandte Aufgaben, Notiz, Punkte).

   Eigener Rahmen statt der Portal-Huelle mit Seitenleiste: Die Einsicht
   braucht drei unabhaengig scrollende Spalten, und dafuer muss die Seite
   die volle Hoehe haben. position:fixed statt 100vh, weil unter dem Rahmen
   sonst der Dokumentfluss weiterlaeuft.
   ===================================================================== */
.ein-root {
  position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column;
  background: var(--pp-bg); color: var(--pp-text); font-family: var(--pp-body);
  overflow: hidden; font-size: 14px;
}
.ein-root button, .ein-root input, .ein-root textarea, .ein-root select { font-family: inherit; }

/* ---------- Kopfzeile ---------- */
.ein-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 26px;
  border-bottom: 1px solid var(--pp-line); background: var(--pp-bg-2); padding: 14px 26px 13px;
}
.ein-title { min-width: 0; }
.ein-crumb { font-size: 11.5px; color: var(--pp-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ein-crumb a { color: inherit; text-decoration: none; }
.ein-crumb a:hover { color: var(--pp-accent); }
.ein-h1-row { display: flex; align-items: baseline; gap: 12px; margin-top: 3px; }
.ein-h1-row h1 {
  font-family: var(--pp-serif); font-weight: 600; font-size: 27px; margin: 0; letter-spacing: .2px;
}
.ein-h1-row span { font-size: 12px; color: var(--pp-text-3); white-space: nowrap; }
.ein-topright { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.ein-total { text-align: right; }
.ein-total .n {
  font-family: var(--pp-serif); font-size: 24px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ein-total .n span { color: var(--pp-text-3); font-size: 17px; }
.ein-total .v { font-size: 11.5px; margin-top: 3px; }
.ein-total .v .ok { color: var(--pp-ok); }
.ein-total .v .err { color: var(--pp-err); }
.ein-total .v .dim { color: var(--pp-text-3); }
.ein-sep { width: 1px; height: 34px; background: var(--pp-line); }
.ein-icon {
  border: 1px solid var(--pp-line); border-radius: 5px; background: transparent;
  color: var(--pp-text-2); padding: 8px 11px; font-size: 12.5px; cursor: pointer;
}
.ein-icon:hover { border-color: var(--pp-accent-line); color: var(--pp-accent); }

/* ---------- Ansichtswechsel ----------
   Zwei Fassungen derselben Bewertung. Der Schalter steht in beiden an
   derselben Stelle oben rechts — nur so liest er sich als ein Schalter
   und nicht als zwei Knoepfe. */
.ein-switch { display: flex; border: 1px solid var(--pp-line-2); border-radius: 5px; overflow: hidden; }
.ein-switch button {
  border: none; background: transparent; color: var(--pp-text-3);
  padding: 8px 14px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.ein-switch button + button { border-left: 1px solid var(--pp-line-2); }
.ein-switch button:hover { color: var(--pp-text); }
.ein-switch button.on { background: var(--pp-accent-tint); color: var(--pp-accent); cursor: default; }
/* Fassung im Punktekasten der Pruefungsansicht — dort gelten die Farben und
   die Schrift von dynexite.css, nicht die Portal-Tokens. */
.scorebox { display: flex; align-items: center; gap: 16px; }
.scorebox .ein-switch.flat {
  border-color: #c8ccd2; border-radius: 3px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 400;
}
.scorebox .ein-switch.flat button { color: #6b7683; padding: 5px 11px; font-size: 12px; }
.scorebox .ein-switch.flat button + button { border-left-color: #c8ccd2; }
.scorebox .ein-switch.flat button:hover { color: #1c4e79; }
.scorebox .ein-switch.flat button.on { background: #eef3f8; color: #1f3651; }

/* ---------- Drei Spalten ---------- */
.ein-mid { flex: 1; display: flex; min-height: 0; }
.ein-rail {
  flex: 0 0 268px; width: 268px; overflow-y: auto; padding: 16px 0 30px;
  border-right: 1px solid var(--pp-line); background: var(--pp-bg-2);
}
.ein-main { flex: 1; min-width: 0; overflow-y: auto; }
.ein-wrap { max-width: 880px; padding: 26px 40px 60px; }
.ein-dock {
  flex: 0 0 300px; width: 300px; overflow-y: auto; padding: 22px 20px 40px;
  border-left: 1px solid var(--pp-line); background: var(--pp-bg-2);
  display: flex; flex-direction: column; gap: 16px;
}
.ein-rail::-webkit-scrollbar, .ein-main::-webkit-scrollbar, .ein-dock::-webkit-scrollbar { width: 9px; }
.ein-rail::-webkit-scrollbar-thumb, .ein-main::-webkit-scrollbar-thumb,
.ein-dock::-webkit-scrollbar-thumb { background: var(--pp-track); border-radius: 5px; }

/* ---------- Navigator ---------- */
.ein-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 14px; }
.ein-chip {
  border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text-2);
  border-radius: 14px; padding: 4px 11px; font-size: 11.5px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ein-chip:hover { border-color: var(--pp-accent-line); }
.ein-chip.on { border-color: var(--pp-accent); background: var(--pp-accent-tint); color: var(--pp-accent); }
.ein-group { padding: 0 0 4px; }
.ein-group-head {
  display: flex; align-items: baseline; gap: 8px; padding: 12px 16px 7px;
  font-size: 9.5px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--pp-text-3);
}
.ein-group-head > span { min-width: 0; }
/* Die Summe darf nicht umbrechen — bei langen Themennamen wie
   "Wissensteil - Kenngroessen periodischer Signale" quetscht der Flexbox
   sie sonst in drei Zeilen. Umbrechen soll der Name, nicht die Zahl. */
.ein-group-head b {
  margin-left: auto; flex: 0 0 auto; white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.ein-item {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  border: none; border-left: 3px solid var(--pp-line); background: transparent;
  color: var(--pp-text-2); padding: 8px 16px 8px 13px; cursor: pointer; font-size: 13px;
}
.ein-item:hover { background: var(--pp-surface-2); }
.ein-item.ok { border-left-color: var(--pp-ok); }
.ein-item.part { border-left-color: var(--pp-warn); }
.ein-item.err { border-left-color: var(--pp-err); }
.ein-item.on { background: var(--pp-surface); color: var(--pp-text); }
.ein-item .n { flex: 0 0 20px; font-size: 11.5px; color: var(--pp-text-3); font-variant-numeric: tabular-nums; }
.ein-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ein-item .star { color: var(--pp-accent); font-size: 11px; }
.ein-item .s { font-size: 11.5px; color: var(--pp-text-3); font-variant-numeric: tabular-nums; }
.ein-keys {
  margin: 18px 16px 0; padding-top: 14px; border-top: 1px solid var(--pp-line);
  font-size: 11.5px; color: var(--pp-text-3); line-height: 1.7;
}

/* ---------- Mitte ---------- */
.ein-banner {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 9px 14px;
  border: 1px solid var(--pp-accent-line); background: var(--pp-accent-tint); border-radius: 6px;
  font-size: 12.5px; color: var(--pp-text-2); font-variant-numeric: tabular-nums;
}
.ein-banner .ein-btn { margin-left: auto; }
.ein-head { display: flex; align-items: flex-start; gap: 16px; }
.ein-head h2 { font-family: var(--pp-serif); font-weight: 600; font-size: 29px; margin: 6px 0 0; }
.ein-head-right { margin-left: auto; text-align: right; flex: 0 0 auto; }
.ein-itempts {
  font-family: var(--pp-serif); font-weight: 600; font-size: 23px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--pp-text);
}
.ein-itempts.ok { color: var(--pp-ok); }
.ein-itempts.part { color: var(--pp-warn); }
.ein-itempts.err { color: var(--pp-err); }
.ein-itempts span { color: var(--pp-text-3); font-size: 15px; }
.ein-head-right .ein-btn { margin-top: 8px; }
.ein-eyebrow { font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--pp-text-3); }
.ein-subhead { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 12px; }
.ein-subhead h3 { font-family: var(--pp-serif); font-weight: 600; font-size: 20px; margin: 0; }
.ein-link {
  margin-left: auto; border: none; background: transparent; color: var(--pp-text-3);
  font-size: 12px; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--pp-line-2); text-underline-offset: 3px;
}
.ein-link:hover { color: var(--pp-accent); }

/* ---------- Register der Antworten ----------
   Eine Zeile je Feld: Beschriftung, eigene Antwort, richtige Antwort,
   Punkte, Zeichen. Klick fuehrt zum Feld im Aufgabenkoerper darunter —
   der bleibt die Wahrheit, das Register ist nur der schnelle Ueberblick. */
.ein-fields { display: flex; flex-direction: column; gap: 7px; }
.ein-frow {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px solid var(--pp-line); background: var(--pp-surface); border-radius: 7px;
  padding: 11px 15px; cursor: pointer; color: var(--pp-text); font-size: 14px;
}
.ein-frow:hover { border-color: var(--pp-accent-line); }
.ein-frow.err { border-color: var(--pp-err); background: var(--pp-err-tint); }
.ein-frow.part { border-color: var(--pp-warn); background: var(--pp-warn-tint); }
.ein-frow .lbl {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ein-frow .val {
  flex: 0 1 auto; display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ein-frow.err .val > b, .ein-frow.part .val > b { color: var(--pp-err); }
.ein-frow.part .val > b { color: var(--pp-warn); }
.ein-frow .val .arrow { color: var(--pp-text-3); font-size: 12px; }
.ein-frow .val .corr { color: var(--pp-ok); }
.ein-frow .val .unit { color: var(--pp-text-3); font-size: 12.5px; }
.ein-frow .p {
  flex: 0 0 78px; text-align: right; white-space: nowrap;
  font-size: 12.5px; color: var(--pp-text-3); font-variant-numeric: tabular-nums;
}
.ein-frow .m {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-ok-tint); color: var(--pp-ok);
}
.ein-frow.err .m { background: var(--pp-err-tint); color: var(--pp-err); }
.ein-frow.part .m { background: var(--pp-warn-tint); color: var(--pp-warn); }

/* Aufgabenkoerper — hell, siehe Begruendung bei .pp-task-body weiter oben. */
.ein-body { margin: 0; padding: 18px 0 22px; }
.ein-body .item-topic { padding-left: 28px; }
/* Sprungziel aus dem Register kurz aufblinken lassen */
@keyframes ein-ping { 0% { background: rgba(201, 154, 78, .30) } 100% { background: transparent } }
.ein-body .ein-ping { animation: ein-ping 1.2s ease-out; }

/* ---------- Eigene Einordnung ---------- */
.ein-cause { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--pp-line); }
.ein-cause .ein-note { margin: 7px 0 12px; }
.ein-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ein-tags .ein-chip { border-radius: 15px; padding: 6px 14px; font-size: 12.5px; }

/* ---------- Kontextspalte ---------- */
.ein-card { border: 1px solid var(--pp-line); border-radius: 7px; background: var(--pp-surface); padding: 15px 16px; }
.ein-card.accent { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); }
.ein-card.flush { padding: 0; overflow: hidden; }
.ein-card.accent .ein-eyebrow { color: var(--pp-accent); }
.ein-big {
  font-family: var(--pp-serif); font-weight: 600; font-size: 26px; line-height: 1;
  margin-top: 9px; font-variant-numeric: tabular-nums;
}
.ein-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.ein-bars > i { display: block; height: 5px; border-radius: 3px; background: var(--pp-accent); }
.ein-bars > i.ref { background: var(--pp-line-2); }
.ein-note { font-size: 11.5px; color: var(--pp-text-2); margin-top: 9px; line-height: 1.6; }
.ein-note.strong { font-size: 14px; color: var(--pp-text); }
.ein-rel {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  border: none; border-top: 1px solid var(--pp-line); background: transparent;
  color: var(--pp-text); padding: 11px 16px; cursor: pointer; font-size: 13px;
}
.ein-rel:hover { background: var(--pp-surface-2); }
.ein-rel .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ein-rel .m { font-size: 11px; color: var(--pp-text-3); white-space: nowrap; }
.ein-rel .go { color: var(--pp-text-3); }
.ein-dock textarea {
  width: 100%; box-sizing: border-box; margin-top: 9px; min-height: 78px; resize: vertical;
  border: 1px solid var(--pp-line); border-radius: 4px; background: var(--pp-bg);
  color: var(--pp-text); padding: 9px 10px; font-size: 13px; line-height: 1.6; outline: none;
}
.ein-dock textarea:focus { border-color: var(--pp-accent-line); }
.ein-ovr { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.ein-ovr input {
  flex: 1 1 auto; min-width: 0; border: none; border-bottom: 1px solid var(--pp-line-2); background: transparent;
  color: var(--pp-text); font-size: 15px; padding: 5px 2px; text-align: center; outline: none;
  font-variant-numeric: tabular-nums;
}
.ein-ovr input:focus { border-bottom-color: var(--pp-accent); }
.ein-ovr span { flex: 0 0 auto; font-size: 13px; color: var(--pp-text-3); }

/* ---------- Fusszeile ---------- */
.ein-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--pp-line); background: var(--pp-bg-2); padding: 11px 26px;
}
.ein-count { font-size: 12px; color: var(--pp-text-3); font-variant-numeric: tabular-nums; }
.ein-foot #ein-sum { margin-left: auto; }

/* ---------- Knoepfe ---------- */
.ein-btn {
  border: 1px solid var(--pp-line-2); background: transparent; color: var(--pp-text);
  border-radius: 4px; padding: 7px 15px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.ein-btn:hover:not(:disabled) { border-color: var(--pp-accent); color: var(--pp-accent); }
.ein-btn:disabled { opacity: .38; cursor: default; }
.ein-btn.accent { border-color: var(--pp-accent); background: var(--pp-accent-tint); color: var(--pp-accent); }
.ein-btn.accent:hover { border-color: var(--pp-accent-2); color: var(--pp-accent-2); }
.ein-btn.wide { width: 100%; margin-top: 12px; padding: 8px 0; }

/* Schmale Fenster: erst faellt der Zusammenhang weg, dann der Navigator —
   die Aufgabe selbst bleibt am laengsten stehen. */
@media (max-width: 1240px) { .ein-dock { display: none; } }
@media (max-width: 980px) {
  .ein-rail { display: none; }
  .ein-wrap { padding: 22px 20px 48px; }
  .ein-top { flex-wrap: wrap; gap: 14px; }
  .ein-topright { gap: 12px; }
}

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1180px) {
  .pp-editor-grid { grid-template-columns: 190px minmax(0, 1fr); }
  .pp-editor-prev { display: none; }
  .pp-weak-bar { width: 120px; }
  /* Kopfzeile des Editors darf jetzt umbrechen — sonst schiebt sie die
     ganze Seite in den waagerechten Bildlauf. */
  .pp-editor-top { flex-wrap: wrap; }
  .pp-editor-top .spacer { margin-left: 0; }
}
@media (max-width: 860px) {
  .pp-root { display: block; }
  .pp-side {
    width: auto; flex: none; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--pp-line);
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
  }
  /* Schmalspur wird zur Kopfzeile — senkrecht neben dem Inhalt bliebe auf
     dem Telefon zu wenig Breite übrig. */
  .pp-rail {
    width: auto; flex: none; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--pp-line);
    flex-direction: row; justify-content: flex-start; padding: 12px 20px;
  }
  .pp-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .pp-side-foot { margin-top: 0; flex-direction: row; align-items: center; }
  .pp-running { display: none; }
  .pp-page { padding: 26px 20px 48px; }
  .pp-detail-side { width: auto; flex: 1 1 auto; padding-top: 0; }
  .pp-weak-course, .pp-weak-bar { display: none; }
  .pp-editor-grid { grid-template-columns: 1fr; }
  .pp-editor-items { border-right: none; border-bottom: 1px solid var(--pp-line); }
}