/* =====================================================================
   Schnellansicht („Quick Look", js/schnellansicht.js, 17.10.2026).

   Ein schwebendes Fenster OHNE Blende: Die Liste darunter bleibt
   bedienbar. Es hängt am <body> (dort liegen die --pp-Tokens, hell und
   dunkel), unter Menü (140) und Portal-Dialog (150) — ein Menü, das man
   aus der Liste öffnet, liegt also darüber.
   ===================================================================== */

.pp-sa {
  position: fixed; z-index: 135; left: 16px; top: 10vh;
  width: min(620px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  display: flex; flex-direction: column;
  background: var(--pp-surface); color: var(--pp-text);
  border: 1px solid var(--pp-line-2); border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .38);
  font-family: var(--pp-sans);
  overflow: hidden;
}
/* Der Griff: die ganze Kopfzeile außer den Knöpfen. touch-action: none,
   damit ein Zug mit dem Finger das Fenster bewegt statt die Seite. */
.pp-sa-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 14px;
  background: var(--pp-surface-2);
  border-bottom: 1px solid var(--pp-line);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.pp-sa.zieht .pp-sa-kopf { cursor: grabbing; }
/* min-width: 0 — sonst schrumpft ein langer Name nie unter seine
   Textbreite und schiebt die Knöpfe hinaus (Fallstrick 41). */
.pp-sa-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.pp-sa-kopf .pp-btn { flex: none; }
.pp-sa-x {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--pp-text-2);
  border: 1px solid var(--pp-line-2); border-radius: 6px;
  font: inherit; line-height: 1; cursor: pointer;
}
.pp-sa-x:hover { border-color: var(--pp-accent); color: var(--pp-accent-2); }
.pp-sa-info {
  padding: 6px 14px; color: var(--pp-text-2); font-size: .85em;
  border-bottom: 1px solid var(--pp-line);
  font-variant-numeric: tabular-nums;
}
.pp-sa-info:empty { display: none; }
.pp-sa-rumpf {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 12px 14px 16px;
  overscroll-behavior: contain;
}
.pp-sa-rumpf:focus { outline: none; }
.pp-sa-satz { margin: 0; color: var(--pp-text-2); line-height: 1.5; }
.pp-sa-seite {
  display: block; width: 100%; height: auto; margin: 0 0 10px;
  background: #fff; box-shadow: 0 0 0 1px var(--pp-line);
}
.pp-sa-seiten + .pp-sa-satz { margin-top: 4px; }
.pp-sa-bild { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; }
.pp-sa-audio { display: block; width: 100%; margin: 0 0 12px; }
.pp-sa-rahmen { display: block; width: 100%; height: 62vh; border: 0; background: #fff; }
.pp-sa-text { line-height: 1.55; overflow-wrap: anywhere; }
.pp-sa-text p { margin: 0 0 .7em; }

/* Die Zeile, deren Vorschau gerade steht (die Veranstaltung kennt keine
   Klick-Auswahl; im Explorer liegt sie zusätzlich auf der Auswahl). */
.pp-sa-akt { outline: 2px solid var(--pp-accent); outline-offset: -2px; border-radius: 4px; }