/* GT Flipbook – Viewer
 * Farben/Maße angelehnt an den issuu-Reader, wie er auf konzerthaus-dortmund.de eingebettet war.
 * Alles Wichtige als Variablen, damit sich das je Kunde anpassen lässt.
 */
:root {
	--fb-bg: #333;                         /* Bühne */
	--fb-bar: rgba(26, 26, 26, .8);        /* Steuerleiste */
	--fb-pop: rgba(26, 26, 26, .94);       /* Menüs, Suche */
	--fb-fg: #fff;
	--fb-muted: #ccc;
	--fb-track: #ccc;
	--fb-accent: #fff;                     /* Fokus, Fortschritt */
	--fb-mark: rgba(0, 152, 205, .55);     /* Suchtreffer / Link-Hover (Konzerthaus-Blau) */
	--fb-gap: 12px;                        /* Abstand Leiste zum Rand */
	--fb-bar-h: 64px;
	--fb-edge-w: 80px;                     /* Pfeil-Zonen links/rechts */
	--fb-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fb-bg); }
body { font: 16px/1.4 var(--fb-font); color: var(--fb-fg); -webkit-font-smoothing: antialiased; }

.fb { position: relative; height: 100%; overflow: hidden; background: var(--fb-bg); user-select: none; -webkit-user-select: none; }
.fb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fb [hidden] { display: none !important; }
.fb :focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- Bühne */
.fb-stage {
	position: absolute; top: 8px; left: var(--fb-edge-w); right: var(--fb-edge-w);
	bottom: calc(var(--fb-bar-h) + var(--fb-gap) + 8px);
	display: flex; align-items: center; justify-content: center;
}
.fb-book { position: relative; transition: transform .45s ease; }
.fb-book .stf__parent { margin: 0 auto; }
.fb-book .stf__wrapper { position: relative; width: 100%; height: 100%; }
.fb-page { background: #fff; overflow: hidden; }
/* fill statt contain: Rundung im Seitenverhältnis erzeugt sonst eine helle Linie am Bund */
.fb-page img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; -webkit-user-drag: none; }
.fb-link { position: absolute; display: block; z-index: 2; border-radius: 2px; }
.fb-link:hover, .fb-link:focus-visible { background: color-mix(in srgb, var(--fb-mark) 35%, transparent); outline: 2px solid var(--fb-mark); outline-offset: 0; }

/* Pfeile: volle Höhe wie bei issuu, Symbol mittig */
.fb-edge {
	position: absolute; top: 0; bottom: calc(var(--fb-bar-h) + var(--fb-gap)); width: var(--fb-edge-w);
	display: flex; align-items: center; justify-content: center;
	padding: 0; border: 0; background: transparent; color: var(--fb-fg); cursor: pointer; z-index: 5;
}
.fb-edge--prev { left: 0; } .fb-edge--next { right: 0; }
.fb-edge svg { width: 48px; height: 48px; opacity: .85; transition: opacity .15s, transform .15s; }
.fb-edge:hover svg { opacity: 1; transform: scale(1.08); }
.fb-edge:disabled { visibility: hidden; }

/* -------------------------------------------------------- Steuerleiste */
.fb-controls {
	position: absolute; left: var(--fb-gap); right: var(--fb-gap); bottom: var(--fb-gap); height: var(--fb-bar-h);
	padding: 4px 8px; background: var(--fb-bar); border-radius: 8px;
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 20;
}
.fb-controls__row { display: flex; align-items: center; justify-content: space-between; height: 100%; padding-top: 12px; }
.fb-controls__left, .fb-controls__right { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fb-controls__right { justify-content: flex-end; }
.fb-controls__center { display: flex; align-items: center; gap: 8px; }

.fb-btn {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px;
	background: transparent; color: var(--fb-fg); cursor: pointer; text-decoration: none;
}
.fb-btn svg { width: 24px; height: 24px; }
.fb-btn:hover { background: rgba(255, 255, 255, .12); }
.fb-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
.fb-btn:disabled { opacity: .35; cursor: default; background: none; }

.fb-pageno { display: inline-flex; align-items: baseline; gap: 4px; padding-left: 8px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-pageno input {
	width: 4.2ch; padding: 2px 2px; border: 0; border-radius: 4px; background: transparent;
	color: var(--fb-fg); font: inherit; text-align: right; cursor: text;
}
.fb-pageno input:hover { background: rgba(255, 255, 255, .1); }
.fb-pageno input:focus { background: #fff; color: #111; text-align: center; outline: none; }

/* Seiten-Schieber am oberen Rand der Leiste */
.fb-scrub { position: absolute; left: 8px; right: 8px; top: 0; height: 20px; cursor: pointer; touch-action: none; }
.fb-scrub__track { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px; background: rgba(204, 204, 204, .45); overflow: hidden; }
.fb-scrub__fill { height: 100%; width: 0; background: var(--fb-track); }
.fb-scrub__thumb {
	position: absolute; top: 6px; left: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); transition: transform .12s;
}
.fb-scrub:hover .fb-scrub__thumb, .fb-scrub.is-dragging .fb-scrub__thumb, .fb-scrub:focus-visible .fb-scrub__thumb { transform: scale(1.6); }
.fb-scrub:focus-visible { outline: none; }
.fb-scrub__tip {
	position: absolute; bottom: 26px; transform: translateX(-50%); padding: 6px; border-radius: 6px;
	background: var(--fb-pop); text-align: center; font-size: 13px; pointer-events: none; white-space: nowrap;
}
.fb-scrub__tip img { display: block; width: 88px; height: auto; margin: 0 auto 4px; background: #555; }

/* Zoom-Regler */
.fb-zoomrange { -webkit-appearance: none; appearance: none; width: 160px; height: 20px; background: transparent; cursor: pointer; margin: 0; }
.fb-zoomrange::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--fb-track); }
.fb-zoomrange::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fb-track); }
.fb-zoomrange::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; }
.fb-zoomrange::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }

/* ---------------------------------------------------------- Zoom-Ansicht */
.fb-zoom {
	position: absolute; inset: 0 0 calc(var(--fb-bar-h) + var(--fb-gap)) 0; overflow: auto; z-index: 10;
	background: var(--fb-bg); cursor: grab; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior: contain;
}
.fb-zoom.is-panning { cursor: grabbing; }
.fb-zoom__inner { display: flex; width: max-content; min-width: 100%; min-height: 100%; align-items: center; justify-content: center; padding: 8px; }
.fb-zoom__inner img { display: block; height: auto; background: #fff; pointer-events: none; -webkit-user-drag: none; }

/* -------------------------------------------------------- Seitenübersicht */
.fb-grid {
	position: absolute; inset: 0 0 calc(var(--fb-bar-h) + var(--fb-gap)) 0; overflow: auto; z-index: 15;
	background: var(--fb-bg); overscroll-behavior: contain;
}
.fb-grid__inner { max-width: 1280px; margin: 0 auto; padding: 24px; }
.fb-toc { list-style: none; margin: 0 0 24px; padding: 0; columns: 2 280px; column-gap: 32px; }
.fb-toc:empty { display: none; }
.fb-toc li { break-inside: avoid; }
.fb-toc a { display: flex; justify-content: space-between; gap: 1rem; padding: 6px 8px; color: var(--fb-fg); text-decoration: none; border-radius: 4px; }
.fb-toc a:hover { background: rgba(255, 255, 255, .1); }
.fb-toc span:last-child { color: var(--fb-muted); font-variant-numeric: tabular-nums; }
.fb-toc .lvl-1 a { padding-left: 24px; color: var(--fb-muted); }
.fb-toc .lvl-2 a { padding-left: 40px; color: var(--fb-muted); }
.fb-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 24px; }
.fb-thumbs li { text-align: center; }
.fb-thumbs a { display: inline-block; color: var(--fb-muted); font-size: 13px; text-decoration: none; }
.fb-thumbs .fb-spread { display: flex; justify-content: center; margin-bottom: 6px; }
.fb-thumbs img { display: block; width: 104px; height: auto; background: #555; }
.fb-thumbs a:hover img, .fb-thumbs a[aria-current="true"] img { outline: 3px solid #fff; outline-offset: 0; }
.fb-thumbs a[aria-current="true"] { color: var(--fb-fg); }

/* -------------------------------------------------- Menüs (Suche, Teilen) */
.fb-pop {
	position: absolute; bottom: calc(var(--fb-bar-h) + var(--fb-gap) + 8px); right: var(--fb-gap); z-index: 25;
	background: var(--fb-pop); border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); user-select: text; -webkit-user-select: text;
}
.fb-search { width: min(380px, calc(100% - 2 * var(--fb-gap))); max-height: calc(100% - var(--fb-bar-h) - 3 * var(--fb-gap) - 16px); display: flex; flex-direction: column; }
.fb-search__form { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.fb-search__form input {
	flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; border-radius: 4px;
	background: rgba(255, 255, 255, .12); color: var(--fb-fg); font: inherit;
}
.fb-search__form input::placeholder { color: rgba(255, 255, 255, .55); }
.fb-results { list-style: none; margin: 0; padding: 4px; overflow: auto; }
.fb-results:empty { display: none; }
.fb-results a { display: block; padding: 8px 10px; color: var(--fb-fg); text-decoration: none; border-radius: 4px; font-size: 14px; }
.fb-results a:hover, .fb-results a:focus-visible { background: rgba(255, 255, 255, .1); }
.fb-res__p { display: block; color: var(--fb-muted); font-size: 12px; margin-bottom: 2px; }
.fb-results mark { background: var(--fb-mark); color: inherit; border-radius: 2px; }
.fb-res__empty { padding: 12px; color: var(--fb-muted); font-size: 14px; }

.fb-share { padding: 6px; min-width: 220px; right: calc(var(--fb-gap) + 96px); }
.fb-share > * {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 4px;
	background: none; color: var(--fb-fg); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
}
.fb-share > *:hover { background: rgba(255, 255, 255, .1); }
.fb-share svg { width: 20px; height: 20px; flex: 0 0 auto; }

.fb-toast {
	position: absolute; left: 50%; bottom: calc(var(--fb-bar-h) + var(--fb-gap) + 12px); transform: translateX(-50%);
	margin: 0; padding: 6px 12px; border-radius: 6px; background: var(--fb-pop); font-size: 14px; z-index: 30;
	transition: opacity .2s; pointer-events: none;
}
.fb-toast:empty { opacity: 0; }
.fb-noscript { position: absolute; inset: 40% 0 auto; text-align: center; }

/* ------------------------------------------------------------------ Mobil */
@media (max-width: 720px) {
	:root { --fb-edge-w: 8px; --fb-gap: 8px; --fb-bar-h: 56px; }
	.fb-edge { display: none; }
	.fb-zoomrange, #fb-download { display: none; }
	.fb-controls { padding: 2px 4px; }
	.fb-controls__row { padding-top: 10px; }
	.fb-controls__left, .fb-controls__right, .fb-controls__center { gap: 2px; }
	.fb-share { right: var(--fb-gap); }
	.fb-thumbs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 12px; }
	.fb-thumbs img { width: 64px; }
	.fb-grid__inner { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) { .fb * { transition: none !important; } }