/* Blätterkatalog – Viewer */
:root {
  --fb-accent: #b3262d;
  --fb-bg: #ece6de;
  --fb-ink: #2b2521;
  --fb-muted: #6f655d;
  --fb-line: rgba(43, 37, 33, .1);
  --fb-surface: #fffdfa;
  --fb-bar-h: 58px;
  --fb-foot-h: 56px;
  --fb-radius: 12px;
  --fb-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fb-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fb-bg); color: var(--fb-ink); font: 15px/1.5 var(--fb-sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; }
.fb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fb-muted { color: var(--fb-muted); }
.fb-i { width: 22px; height: 22px; flex: none; }

.fb {
  position: fixed; inset: 0; display: grid;
  grid-template-rows: var(--fb-bar-h) minmax(0, 1fr) var(--fb-foot-h);
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--fb-bg) 55%, #fff) 0%, var(--fb-bg) 62%, color-mix(in srgb, var(--fb-bg) 88%, #000) 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Kopfleiste ---------- */
.fb-bar {
  display: flex; align-items: center; gap: 14px; padding: 0 12px 0 16px; z-index: 20;
  background: color-mix(in srgb, var(--fb-surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--fb-line);
}
.fb-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; padding-right: 14px; border-right: 1px solid var(--fb-line); height: 34px; }
.fb-brand img { height: 32px; width: auto; display: block; }
.fb-heading { min-width: 0; flex: 1; line-height: 1.2; }
.fb-title { margin: 0; font: 600 15px/1.25 var(--fb-serif); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-title a { text-decoration: none; }
.fb-title a:hover { text-decoration: underline; }
.fb-sub { margin: 2px 0 0; font: 400 12.5px/1.25 var(--fb-sans); color: var(--fb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-actions { display: flex; gap: 2px; flex: none; }

.fb-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 0; padding: 0;
  background: transparent; color: var(--fb-ink); cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s, transform .1s;
}
.fb-btn:hover { background: rgba(43, 37, 33, .07); }
.fb-btn:active { transform: scale(.94); }
.fb-btn[aria-pressed="true"], .fb-btn.is-active { color: var(--fb-accent); background: color-mix(in srgb, var(--fb-accent) 10%, transparent); }
.fb-btn:disabled, .fb-btn[aria-disabled="true"] { opacity: .3; pointer-events: none; }
:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }

/* ---------- Bühne & Buch ---------- */
.fb-stage { position: relative; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 22px 76px; }
.fb-book-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.fb-book { position: relative; flex: none; }
.fb-book.stf__parent::after { /* weicher Schatten unter dem Buch */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 28px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(40, 25, 15, .28), transparent 70%); filter: blur(6px);
}
.fb-book.is-portrait.stf__parent::after { left: 10%; right: 10%; }
.fb-book.is-single-right.stf__parent::after { left: 53%; }
.fb-book.is-single-left.stf__parent::after { right: 53%; }
.fb.has-panel .fb-stage { padding-right: calc(min(420px, 100vw) + 24px); }
.fb.has-panel .fb-arrow--next { right: calc(min(420px, 100vw) + 14px); }
.fb-book .stf__wrapper { position: relative; width: 100%; height: 100%; padding: 0 !important; }
.fb-page { background: #fff center / cover no-repeat; overflow: hidden; user-select: none; -webkit-user-select: none; }
.fb-page picture, .fb-page img { display: block; width: 100%; height: 100%; }
.fb-page img { object-fit: cover; -webkit-user-drag: none; }
/* Falz-Schattierung */
.fb-page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; z-index: 1; }
.fb-page.--left::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,.04) 35%, transparent); }
.fb-page.--right::after { left: 0; background: linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,.04) 35%, transparent); }
.fb-book.is-portrait .fb-page::after, .fb-page[data-density="hard"]::after { display: none; }

/* Link-Bereiche & Suchtreffer */
.fb-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fb-link {
  position: absolute; pointer-events: auto; border-radius: 6px; cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}
.fb-link:hover, .fb-link:focus-visible {
  background: color-mix(in srgb, var(--fb-accent) 13%, transparent);
  box-shadow: 0 0 0 2px var(--fb-accent), 0 4px 18px rgba(0,0,0,.15);
}
.fb-flash .fb-link { animation: fb-flash 1.6s ease-out 1; }
@keyframes fb-flash {
  0%, 100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
  25% { background: color-mix(in srgb, var(--fb-accent) 16%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb-accent) 70%, transparent); }
}
@media (hover: none) {
  .fb-link { background: color-mix(in srgb, var(--fb-accent) 7%, transparent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fb-accent) 45%, transparent); }
}
.fb-hit { position: absolute; border-radius: 3px; background: rgba(255, 200, 0, .45); mix-blend-mode: multiply; box-shadow: 0 0 0 2px rgba(255, 186, 0, .55); pointer-events: none; }
.fb-hit.is-current { background: rgba(255, 140, 0, .5); box-shadow: 0 0 0 3px rgba(230, 110, 0, .8); }

/* Pfeile */
.fb-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--fb-ink); background: var(--fb-surface);
  box-shadow: 0 2px 10px rgba(40, 25, 15, .14); transition: transform .15s, box-shadow .15s, opacity .2s;
}
.fb-arrow:hover { transform: scale(1.06); box-shadow: 0 4px 18px rgba(40, 25, 15, .2); }
.fb-arrow--prev { left: 14px; } .fb-arrow--next { right: 14px; }
.fb-arrow[aria-disabled="true"] { opacity: 0; pointer-events: none; }

/* ---------- Fußleiste ---------- */
.fb-foot {
  display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 12px; z-index: 20;
  background: color-mix(in srgb, var(--fb-surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--fb-line);
}
.fb-range { flex: 0 1 380px; min-width: 0; display: flex; padding: 0 10px; }
.fb-range input { width: 100%; min-width: 0; accent-color: var(--fb-accent); cursor: pointer; }
.fb-indicator { min-width: 128px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--fb-muted); white-space: nowrap; }

/* ---------- Seitenpanels ---------- */
.fb-panel {
  position: fixed; z-index: 40; top: calc(var(--fb-bar-h) + env(safe-area-inset-top)); right: 0; bottom: 0;
  width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--fb-surface); border-left: 1px solid var(--fb-line); box-shadow: -18px 0 50px rgba(40, 25, 15, .14);
  transform: translateX(0); transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
}
.fb-panel[hidden] { display: flex; transform: translateX(105%); visibility: hidden; }
.fb-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--fb-line); }
.fb-panel-head h2 { flex: 1; margin: 0; font: 600 17px/1.2 var(--fb-serif); }
.fb-panel-body { flex: 1; overflow: auto; padding: 16px 18px 28px; overscroll-behavior: contain; }

.fb-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 10px; background: rgba(43, 37, 33, .06); color: var(--fb-muted); }
.fb-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--fb-accent); }
.fb-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--fb-ink); outline: none; }
.fb-search-info { margin: 0 0 12px; font-size: 13.5px; color: var(--fb-muted); }
.fb-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fb-result { display: flex; gap: 12px; width: 100%; text-align: left; padding: 10px; border-radius: 10px; border: 1px solid var(--fb-line); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.fb-result:hover, .fb-result.is-current { border-color: color-mix(in srgb, var(--fb-accent) 50%, transparent); box-shadow: 0 2px 12px rgba(40, 25, 15, .08); }
.fb-result img { width: 52px; height: auto; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.15); flex: none; align-self: flex-start; }
.fb-result b { display: block; font-size: 13px; }
.fb-result b small { font-weight: 500; color: var(--fb-accent); margin-left: 6px; }
.fb-result span { display: block; font-size: 13.5px; color: var(--fb-muted); margin-top: 2px; line-height: 1.4; }
.fb-result mark { background: rgba(255, 200, 0, .45); color: var(--fb-ink); border-radius: 2px; padding: 0 1px; }

.fb-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
.fb-thumbs a { display: block; text-decoration: none; border-radius: 8px; padding: 6px; transition: background-color .15s; }
.fb-thumbs a:hover { background: rgba(43, 37, 33, .05); }
.fb-thumbs img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 1px 6px rgba(40, 25, 15, .18); }
.fb-thumbs span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.3; color: var(--fb-muted); }
.fb-thumbs b { color: var(--fb-ink); font-weight: 600; margin-right: 3px; }
.fb-thumbs a.is-current img { box-shadow: 0 0 0 3px var(--fb-accent), 0 2px 10px rgba(40, 25, 15, .2); }

.fb-panel--text .fb-panel-body { font-size: 15.5px; line-height: 1.62; }
.fb-article { display: none; }
.fb-article.is-shown { display: block; }
.fb-article h2 { font: 600 21px/1.25 var(--fb-serif); margin: 0 0 14px; }
.fb-article h2 a { text-decoration: none; }
.fb-article h2 span { display: block; font: 600 11.5px/1.4 var(--fb-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fb-accent); margin-bottom: 4px; }
.fb-article p { margin: 0 0 .85em; }
.fb-article-links { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--fb-line); display: grid; gap: 8px; }
.fb-article-links a { display: flex; gap: 8px; align-items: center; color: var(--fb-accent); text-decoration: none; font-size: 14px; word-break: break-word; }
.fb-article-links a:hover { text-decoration: underline; }
.fb-article-links .fb-i { width: 18px; height: 18px; }
.fb-ocr-note { font-size: 12.5px; margin-top: 26px; }

/* ---------- Zoom ---------- */
.fb-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(28, 23, 20, .94); }
.fb-zoom[hidden] { display: none; }
.fb-zoom-canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.fb-zoom-canvas.is-dragging { cursor: grabbing; }
.fb-zoom-inner { position: absolute; left: 0; top: 0; display: flex; transform-origin: 0 0; will-change: transform; }
.fb-zoom-inner .fb-page { position: relative; display: block; box-shadow: 0 10px 50px rgba(0,0,0,.4); }
.fb-zoom-inner .fb-page::after { display: none; }
.fb-zoom-bar {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 14px; background: rgba(255, 253, 250, .96); box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
#fb-zoom-level { min-width: 58px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

.fb-toast {
  position: fixed; left: 50%; bottom: calc(var(--fb-foot-h) + 18px); z-index: 80; translate: -50% 12px; opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 10px; background: #2b2521; color: #fff; font-size: 14px; transition: opacity .2s, translate .2s;
}
.fb-toast.is-shown { opacity: 1; translate: -50% 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .fb-hide-sm { display: none; } }
@media (max-width: 760px) {
  :root { --fb-bar-h: 54px; --fb-foot-h: 52px; }
  .fb-stage { padding: 10px 8px; }
  .fb-arrow { display: none; }
  .fb-brand { padding-right: 10px; }
  .fb-brand img { height: 26px; }
  .fb-hide-xs { display: none; }
  .fb-indicator { min-width: 92px; font-size: 12.5px; }
  .fb-bar { gap: 10px; padding: 0 6px 0 12px; }
  .fb-btn { width: 38px; height: 38px; }
}
@media (max-width: 480px) {
  .fb-brand { display: none; }
  .fb-title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-panel, .fb-toast, .fb-link { transition: none; }
  .fb-flash .fb-link { animation: none; }
}
@media print {
  body { overflow: visible; }
  .fb { position: static; display: block; }
  .fb-bar, .fb-foot, .fb-arrow, .fb-panel, .fb-zoom { display: none !important; }
}