:root {
	--bpv-bg: #1b1d22;
	--bpv-bg-deep: #121317;
	--bpv-bar: #0e0f12;
	--bpv-line: rgba(255, 255, 255, 0.08);
	--bpv-text: #ececef;
	--bpv-muted: #9a9ca5;
	--bpv-hover: rgba(255, 255, 255, 0.09);
	--bpv-focus: #8fb4ff;
	--bpv-bar-h: 56px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

body.bpv-body {
	background: var(--bpv-bg-deep);
	color: var(--bpv-text);
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior: none;
	touch-action: manipulation;
}

button {
	font: inherit;
	color: inherit;
}

.bpv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Layout ---------- */

.bpv-app {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	height: 100vh;
	height: 100dvh;
}

.bpv-stage {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 45%, #2a2d34 0%, var(--bpv-bg) 55%, var(--bpv-bg-deep) 100%);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.bpv-zoom {
	position: absolute;
	inset: 0;
	transform-origin: 0 0;
}

.bpv-zoom.is-animating {
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bpv-stage.is-zoomed {
	cursor: grab;
}

.bpv-stage.is-panning {
	cursor: grabbing;
}

.bpv-zoom .bpv-book {
	position: absolute;
	inset: 28px 72px;
	visibility: hidden;
}

.bpv-book.is-ready {
	visibility: visible;
}

/* StPageFlip-Anpassungen: Größe kommt vom Container, nicht vom Seitenverhältnis */
.bpv-book.stf__parent {
	min-width: 0 !important;
	min-height: 0 !important;
	touch-action: none;
}

.bpv-book .stf__wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---------- Seiten ---------- */

.bpv-page {
	background: #fff;
	overflow: hidden;
}

.bpv-page-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bpv-sheet {
	position: relative;
	background: #fff;
}

.bpv-sheet canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.bpv-page.is-pending .bpv-sheet {
	background: linear-gradient(100deg, #f1f1f3 30%, #fafafb 50%, #f1f1f3 70%) 0 0 / 300% 100%;
	animation: bpv-shimmer 1.4s linear infinite;
}

@keyframes bpv-shimmer {
	to {
		background-position: -150% 0;
	}
}

/* Leichte Schattierung zum Bund hin */
.bpv-page-inner::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6%;
	pointer-events: none;
	opacity: 0;
}

.bpv-book.is-spread .bpv-page--left .bpv-page-inner::after {
	right: 0;
	opacity: 1;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
}

.bpv-book.is-spread .bpv-page--right .bpv-page-inner::after {
	left: 0;
	opacity: 1;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
}

.bpv-links {
	position: absolute;
	inset: 0;
}

.bpv-link {
	position: absolute;
	display: block;
	border-radius: 2px;
	transition: background-color 0.15s;
}

.bpv-link:hover,
.bpv-link:focus-visible {
	background: rgba(255, 196, 0, 0.2);
	outline: none;
}

/* ---------- Seitliche Pfeile ---------- */

.bpv-side {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	cursor: pointer;
	transition: background-color 0.15s, opacity 0.15s;
}

.bpv-side svg {
	width: 26px;
	height: 26px;
}

.bpv-side:hover {
	background: rgba(255, 255, 255, 0.16);
}

.bpv-side:disabled {
	opacity: 0;
	pointer-events: none;
}

.bpv-side--prev {
	left: 14px;
}

.bpv-side--next {
	right: 14px;
}

.bpv-stage.is-zoomed .bpv-side {
	opacity: 0;
	pointer-events: none;
}

/* ---------- Status / Laden ---------- */

.bpv-status {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--bpv-muted);
	text-align: center;
	padding: 24px;
	pointer-events: none;
}

.bpv-status[hidden] {
	display: none;
}

.bpv-status p {
	margin: 0;
}

.bpv-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--bpv-text);
	border-radius: 50%;
	animation: bpv-spin 0.8s linear infinite;
}

.bpv-status.is-error .bpv-spinner {
	display: none;
}

.bpv-status.is-error {
	color: var(--bpv-text);
}

@keyframes bpv-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Thumbnails ---------- */

.bpv-thumbs {
	background: var(--bpv-bar);
	border-top: 1px solid var(--bpv-line);
}

.bpv-thumbs[hidden] {
	display: none;
}

.bpv-thumbs-track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 12px 16px 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.bpv-thumb {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bpv-muted);
	font-size: 12px;
	cursor: pointer;
}

.bpv-thumb-img {
	display: block;
	height: 96px;
	background: #2b2e35;
	border-radius: 2px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.15s;
}

.bpv-thumb-img canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 2px;
}

.bpv-thumb:hover .bpv-thumb-img {
	outline-color: rgba(255, 255, 255, 0.35);
}

.bpv-thumb.is-active {
	color: var(--bpv-text);
}

.bpv-thumb.is-active .bpv-thumb-img {
	outline-color: var(--bpv-text);
}

/* ---------- Leiste ---------- */

.bpv-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	min-height: var(--bpv-bar-h);
	padding: 0 12px env(safe-area-inset-bottom);
	padding-left: max(12px, env(safe-area-inset-left));
	padding-right: max(12px, env(safe-area-inset-right));
	background: var(--bpv-bar);
	border-top: 1px solid var(--bpv-line);
}

.bpv-bar-group {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.bpv-bar-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
	color: var(--bpv-text);
}

.bpv-bar-tools {
	justify-content: flex-end;
}

.bpv-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--bpv-text);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s, opacity 0.15s;
}

.bpv-btn[hidden] {
	display: none;
}

.bpv-btn:hover {
	background: var(--bpv-hover);
}

.bpv-btn:disabled {
	opacity: 0.3;
	cursor: default;
	background: none;
}

.bpv-btn[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.14);
}

.bpv-btn:focus-visible,
.bpv-side:focus-visible,
.bpv-thumb:focus-visible .bpv-thumb-img,
.bpv-pageno input:focus-visible {
	outline: 2px solid var(--bpv-focus);
	outline-offset: 2px;
}

.bpv-icon-exit {
	display: none;
}

.is-fullscreen .bpv-icon-enter {
	display: none;
}

.is-fullscreen .bpv-icon-exit {
	display: inline;
}

.bpv-icon-enter,
.bpv-icon-exit {
	line-height: 0;
}

.bpv-pageno {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 6px;
	color: var(--bpv-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bpv-pageno input {
	width: 62px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--bpv-text);
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.bpv-pageno input:focus {
	border-color: var(--bpv-focus);
	outline: none;
}

/* ---------- Touch-Geräte & kleine Bildschirme ---------- */

@media (hover: none), (pointer: coarse) {
	.bpv-side {
		display: none;
	}

	.bpv-btn--zoom {
		display: none;
	}

	.bpv-zoom .bpv-book {
		inset: 16px 12px;
	}
}

@media (max-width: 720px) {
	.bpv-bar {
		grid-template-columns: auto 1fr;
		gap: 4px;
		padding-left: max(6px, env(safe-area-inset-left));
		padding-right: max(6px, env(safe-area-inset-right));
	}

	.bpv-bar-title {
		display: none;
	}

	.bpv-btn {
		width: 36px;
	}

	.bpv-pageno {
		margin: 0 2px;
	}

	.bpv-pageno input {
		width: 52px;
	}

	.bpv-zoom .bpv-book {
		inset: 14px 10px;
	}

	.bpv-side {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpv-zoom.is-animating {
		transition: none;
	}

	.bpv-page.is-pending .bpv-sheet,
	.bpv-spinner {
		animation-duration: 3s;
	}
}

/* ---------- Hinweisseite (keine PDF / Passwort) ---------- */

.bpv-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
	text-align: center;
	background: var(--bpv-bg);
}

.bpv-message h1 {
	margin: 0 0 12px;
	font-size: 22px;
}

.bpv-message p {
	color: var(--bpv-muted);
}

.bpv-message form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.bpv-message input[type="password"] {
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--bpv-text);
}

.bpv-message input[type="submit"] {
	padding: 8px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--bpv-text);
	color: var(--bpv-bg-deep);
	cursor: pointer;
}