/* ==========================================================================
   Vorschau im Panel rechts — Betrachter fuer PDF, Webseite, Bild, Film.
   Gehoert zu assets/js/vorschau.js und wird nach app.css geladen; die
   wenigen Regeln, die eine Vorgabe aus Abschnitt 34 von app.css umlegen,
   stehen hier mit derselben Spezifitaet und gewinnen ueber die Reihenfolge.

   Keine eigenen Farben: alles kommt aus den Tokens, damit die 22 Themes
   stimmen. Radien nur in den drei Stufen aus app.css — --radius fuer die
   Steuerleiste und das Seitenfeld, --radius-sm fuer die Symbolknoepfe.
   Die Seiten selbst haben keinen Radius: Papier hat Ecken.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Das Panel mit Betrachter
   Ohne Betrachter bleibt es, wie es war: eine Miniatur, so hoch wie noetig.
   Mit Betrachter bekommt die Buehne die Hoehe, die der Schirm hergibt —
   gedeckelt, damit Angaben und Knoepfe darunter bei 1440 x 900 ohne
   Scrollen sichtbar bleiben (docs/DESIGN.md §7).
   -------------------------------------------------------------------------- */

.dokupanel {
	/* Buehnenhoehe: was vom Fenster bleibt, wenn Kopf, Angaben, Knoepfe
	   und der Rand darueber abgezogen sind. */
	--dp-buehne: clamp(260px, calc(100vh - 352px), 1100px);
}

.dokupanel.hat-betrachter {
	grid-template-rows: auto auto auto auto;
	overflow: hidden;
}

.dokupanel.hat-betrachter .dp-buehne {
	display: grid;
	/* `place-items: center` aus app.css wuerde den Betrachter auf seine
	   Inhaltshoehe schrumpfen — er soll die Buehne fuellen. Das Zentrieren
	   uebernimmt die Miniatur weiter unten fuer sich selbst. */
	place-items: stretch;
	height: var(--dp-buehne);
	min-height: 0;
	overflow: hidden;
	background: var(--bg);
}

/* Die Sofort-Miniatur, bevor der Betrachter steht. */
.dokupanel.hat-betrachter .dp-buehne > img {
	place-self: center;
	max-height: 100%;
	object-fit: contain;
}

/* Ueberlagert das Panel die Liste, hat es die ganze Fensterhoehe. */
.dokumente.hat-panel-ueber .dokupanel.hat-betrachter {
	--dp-buehne: calc(100vh - 172px);
}

/* Eine Karte ist so hoch, wie sie Text hat. Eine halbe Bildschirmhoehe
   leere Flaeche darunter waere ein leerer Vorschaurahmen (§6). */
.dokupanel.hat-betrachter:has(.pv-web.ist-karte) .dp-buehne {
	height: auto;
	max-height: var(--dp-buehne);
}

/* --------------------------------------------------------------------------
   2. Gemeinsamer Rahmen
   -------------------------------------------------------------------------- */

.pv {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	/* Als Rasterkind zaehlt sonst die Mindestbreite des Inhalts: die
	   Buehne wuerde beim Verschmaelern nicht mitgehen, und die Seiten
	   blieben in der Breite von vorhin stehen. */
	min-width: 0;
	min-height: 0;
	background: var(--bg);
}

/* --------------------------------------------------------------------------
   3. PDF: Seiten als Leinwaende, eigene Scrollleiste
   -------------------------------------------------------------------------- */

.pv-blatt {
	position: relative;
	height: 100%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-items: safe center;
	gap: 10px;
	overflow-x: auto;
	/* Immer `scroll`, nie `auto`: sonst taucht die Leiste erst nach dem
	   ersten Rendern auf und verschiebt die Breite, nach der gerechnet
	   wurde — die Seiten waeren dann 10 px zu breit. */
	overflow-y: scroll;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--text-faint) transparent;
}

.pv-blatt:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.pv-blatt::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.pv-blatt::-webkit-scrollbar-track,
.pv-blatt::-webkit-scrollbar-corner {
	background: transparent;
}

.pv-blatt::-webkit-scrollbar-thumb {
	background: var(--text-faint);
	background-clip: content-box;
	border: 3px solid transparent;
	border-radius: var(--radius-sm);
}

.pv-blatt::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
	background-clip: content-box;
}

/* Der Platzhalter traegt schon die Masse der Seite; die Leinwand legt
   sich hinein, sobald sie gerendert ist. */
.pv-seite {
	flex: none;
	background: var(--surface);
	border: 1px solid var(--border);
}

.pv-leinwand {
	display: block;
}

/* Seite 1 aus der Miniatur, bis die erste echte Seite steht. */
.pv-sofort {
	position: absolute;
	inset: 10px;
	margin: auto;
	max-width: calc(100% - 20px);
	max-height: calc(100% - 20px);
	object-fit: contain;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Steuerleiste
   Sie liegt ueber den Seiten und ist nur da, wenn jemand da ist: beim
   Ueberfahren und sobald einer ihrer Knoepfe den Fokus hat.
   -------------------------------------------------------------------------- */

.pv-steuer {
	position: absolute;
	left: 50%;
	bottom: var(--raum-3);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--surface) 86%, transparent);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .14s ease-out;
}

.pv:hover .pv-steuer,
.pv:focus-within .pv-steuer {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.pv-steuer { transition: none; }
}

.pv-knopf {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	cursor: pointer;
}

.pv-knopf:hover:not(:disabled) {
	background: var(--hover, var(--surface-2));
	color: var(--text);
}

.pv-knopf:disabled {
	opacity: .35;
	cursor: default;
}

.pv-nr {
	width: 36px;
	height: 24px;
	margin: 0 2px;
	padding: 0 4px;
	font: inherit;
	font-size: var(--t--3);
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.pv-nr:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.pv-von {
	font-size: var(--t--3);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	white-space: nowrap;
}

.pv-luft {
	width: var(--raum-2);
}

/* --------------------------------------------------------------------------
   5. Webseite: Rahmen, wenn sie sich einbetten laesst, sonst Karte
   -------------------------------------------------------------------------- */

.pv-web {
	display: flex;
	flex-direction: column;
}

.pw-kopf {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--raum-3);
	padding: var(--raum-2) var(--raum-3);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.pw-rahmen {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	border: 0;
	background: var(--surface);
}

.pw-karte {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--raum-2);
	padding: var(--raum-4);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--text-faint) transparent;
}

.pw-bild {
	align-self: stretch;
	max-height: 200px;
	object-fit: contain;
	object-position: left center;
}

.pw-domain {
	margin: 0;
	font-size: var(--t--2);
	color: var(--text-muted);
}

.pw-titel {
	margin: 0;
	font-size: var(--t-1);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.pw-text {
	margin: 0;
	max-width: 62ch;
	font-size: var(--t--1);
	line-height: 1.5;
	color: var(--text-muted);
}

.pw-grund {
	margin: 0;
	font-size: var(--t--2);
	color: var(--text-faint);
}

.pw-karte .knopf {
	margin-top: var(--raum-1);
}

/* --------------------------------------------------------------------------
   6. Bild und Film
   -------------------------------------------------------------------------- */

.pv-medium {
	display: grid;
	place-items: center;
	padding: var(--raum-3);
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--text-faint) transparent;
}

.pv-bild,
.pv-video {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

/* --------------------------------------------------------------------------
   7. Telefon: das Panel fuellt den Schirm, der Betrachter auch.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
	.dokumente.hat-panel .dokupanel.hat-betrachter,
	.dokumente.hat-panel-ueber .dokupanel.hat-betrachter {
		--dp-buehne: calc(100vh - 172px);
	}
}