/* @gula-code */
.gula-pdf {
	--gula-pdf-bg:     rgba(30, 30, 32, 0.96);
	--gula-pdf-leiste: #1d1d1f;
	--gula-pdf-fg:     #f2f2f2;
	--gula-pdf-fg2:    rgba(242, 242, 242, 0.65);
	--gula-pdf-knopf:  rgba(255, 255, 255, 0.10);

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	flex-direction: column;
	background: var(--gula-pdf-bg);
	color: var(--gula-pdf-fg);
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.gula-pdf.is-open { display: flex; }
html.gula-pdf-offen, html.gula-pdf-offen body { overflow: hidden; }

.gula-pdf__leiste {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 16px;
	background: var(--gula-pdf-leiste);
	flex: 0 0 auto;
}
.gula-pdf__kopf { flex: 1 1 auto; min-width: 0; }
.gula-pdf__titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gula-pdf__untertitel { font-size: 12px; color: var(--gula-pdf-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gula-pdf__stand { color: var(--gula-pdf-fg2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gula-pdf__knoepfe { display: flex; align-items: center; gap: 6px; }
.gula-pdf__k {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: var(--gula-pdf-knopf);
	color: var(--gula-pdf-fg);
	font: inherit;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.gula-pdf__k:hover, .gula-pdf__k:focus-visible { background: rgba(255, 255, 255, 0.22); color: #fff; outline: none; }
.gula-pdf--eigen { --gula-pdf-leiste: var(--gula-pdf-bg); }
.gula-pdf--eigen .gula-pdf__leiste { border-bottom: 1px solid rgba(127, 127, 127, 0.3); }
.gula-pdf--hell {
	--gula-pdf-fg:    #222;
	--gula-pdf-fg2:   rgba(0, 0, 0, 0.6);
	--gula-pdf-knopf: rgba(0, 0, 0, 0.08);
}
.gula-pdf--hell .gula-pdf__k:hover, .gula-pdf--hell .gula-pdf__k:focus-visible { background: rgba(0, 0, 0, 0.16); color: #000; }
.gula-pdf__nr { color: var(--gula-pdf-fg2); font-weight: 400; font-variant-numeric: tabular-nums; }
.gula-pdf__nr:not(:empty) { margin-right: .7em; }
.gula-pdf__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border: 0;
	background: none;
	color: var(--gula-pdf-fg);
	font-size: 56px;
	line-height: 1;
	padding: 0 14px;
	cursor: pointer;
	opacity: .75;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
	user-select: none;
}
.gula-pdf__nav:hover, .gula-pdf__nav:focus-visible { opacity: 1; outline: none; transform: translateY(-50%) scale(1.1); }
.gula-pdf__zurueck { left: 8px; }
.gula-pdf__weiter { right: 8px; }
.gula-pdf--hell .gula-pdf__nav { text-shadow: none; }
.gula-pdf__zoom { font-size: 13px; min-width: 56px; font-variant-numeric: tabular-nums; }
.gula-pdf__zu { font-size: 24px; margin-left: 6px; }

.gula-pdf__flaeche {
	flex: 1 1 auto;
	overflow: auto;
	padding: 16px;
	outline: none;
	overscroll-behavior: contain;
}
.gula-pdf__seiten { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gula-pdf__blatt {
	position: relative;
	flex: 0 0 auto;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.gula-pdf__blatt:not(.ist-gezeichnet)::after {
	content: "Seite wird gezeichnet …";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: min(30%, 12rem);
	font: 14px/1.4 system-ui, sans-serif;
	color: #8a8a8a;
	background: repeating-linear-gradient(180deg, #fff 0 22px, #f1f1f1 22px 24px);
	opacity: .6;
}
.gula-pdf__blatt canvas { display: block; }
.gula-pdf__meldung { text-align: center; color: var(--gula-pdf-fg2); margin: 40px 0; }
.gula-pdf__meldung a { color: #fff; margin-left: .4em; }
.gula-pdf--hell .gula-pdf__meldung a { color: var(--gula-pdf-fg); }

@media (max-width: 640px) {
	.gula-pdf__leiste { flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px; }
	.gula-pdf__kopf { flex-basis: 100%; order: -1; }
	.gula-pdf__knoepfe { margin-left: auto; }
	.gula-pdf__flaeche { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.gula-pdf__flaeche { scroll-behavior: auto; }
}