/* flipbook.css — eigenständiger 3D-Flipbook-Viewer (flipbook.php / seiten/flipbook_viewer.php),
   bewusst unabhängig von intranet.css, damit die Seite später isoliert (Website/iframe) läuft. */

:root {
  --fb-gruen: #5aa12f;
  --fb-gruen-d: #48831f;
  --fb-orange: #ed960c;
  --fb-ink: #2b2f2a;
  --fb-muted: #717a6b;
  --fb-line: #e2e7da;
  --fb-bg: #23271f;
  --fb-card: #ffffff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fb-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fb-ink);
  overflow: hidden;
}
body { display: flex; flex-direction: column; }

.fb-buehne {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; justify-content: stretch;
  padding: 14px; overflow: hidden;
}
/* fb-viewport ist die normal-große, sichtbare Box (StPageFlip misst offsetWidth/offsetHeight von
   #flipbook, um im Seitenverhältnis zu rendern — braucht daher eine explizite, von beiden Achsen
   begrenzte Box, sonst kann die berechnete Höhe die Fläche überragen und wird abgeschnitten). Rein
   für Clipping zuständig (overflow:hidden) — KEIN display:flex mehr: ein übergroßes, transformiertes
   Flex-Item in einem overflow:hidden-Flex-Container war vermutlich die Ursache dafür, dass mobile
   Browser #flipbook zusätzlich auf die sichtbare Fläche zusammengestaucht haben, statt es wie
   spezifiziert überstehen zu lassen (per Design, siehe #flipbook unten). */
.fb-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* #flipbook wird dauerhaft auf die DOPPELTE Größe seines Viewports gebracht — NICHT per CSS-Prozent-
   wert mehr, sondern per JS in echten Pixeln gesetzt (flipbook-viewer.js: groesseAnpassen()), damit
   nichts von Flexbox/Prozent-Auflösungsketten abhängt. Zentrierung per klassischem
   top:50%;left:50%;translate(-50%,-50%)-Trick (bezieht sich immer auf die eigene Boxgröße, egal was
   der Elterncontainer treibt) statt Flexbox. Danach scale(.5) auf normale Anzeigegröße zurück.
   Effekt: StPageFlip misst el.offsetWidth/Height (bestimmt Canvas-Auflösung + Bounds) im
   "aufgeblasenen" 2x-Raum und zeichnet dadurch dauerhaft in doppelter Auflösung — Zoomen (unten) ist
   dann nur noch ein CSS-Wechsel auf scale(1), kein Canvas-Resize/Neuzeichnen zur Zoom-Zeit nötig
   (das hatte sich als zu fragil erwiesen). Wichtig im Gegenzug: die minWidth/maxWidth/minHeight/
   maxHeight-Werte in flipbook-viewer.js sind verdoppelt, sonst würden sie im 2x-Raum nur die HALBE
   reale Anzeigegröße erlauben. */
#flipbook {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.5);
  touch-action: none;
}
#flipbook.fb-anim { transition: transform .25s ease; }

/* Blättern nur über die Randzonen (StPageFlip-eigene Drag/Klick-Steuerung ist bewusst aus,
   siehe useMouseEvents:false in flipbook-viewer.js) — Seitenmitte ist für Doppelklick-Zoom frei.
   Position/Breite/Höhe setzt flipbook-viewer.js per Inline-Style, exakt an der Kante des jeweils
   sichtbaren Buch-Rechtecks (pageFlip.getBoundsRect(), herunterskaliert auf reale Pixel — ändert
   sich je nach Cover/Doppelseite und bei Resize). Liegen als Geschwister von #flipbook direkt in
   fb-viewport, das kein eigenes Padding hat — kein Versatz auszurechnen. */
.fb-blaettern-zone {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; cursor: pointer; z-index: 5;
  opacity: 0; transition: opacity .15s;
}
.fb-blaettern-zone:hover { opacity: 1; }
.fb-blaettern-zone span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(20, 24, 16, .45); color: #fff; font-size: 1.1rem;
}
.fb-blaettern-zone-links { justify-content: flex-start; padding-left: 10px; background: linear-gradient(to right, rgba(0,0,0,.12), transparent); }
.fb-blaettern-zone-rechts { justify-content: flex-end; padding-right: 10px; background: linear-gradient(to left, rgba(0,0,0,.12), transparent); }

/* Zoom-Modus (Doppelklick auf eine Seite oder ➕): Randzonen aus dem Weg, #flipbook wechselt von
   scale(.5) auf scale(1) — zeigt die schon vorhandene doppelte Auflösung 1:1 an, kein Neuzeichnen
   nötig. Pan (JS, translate vor dem scale) verschiebt den sichtbaren Ausschnitt. */
.fb-viewport.fb-gezoomt .fb-blaettern-zone { display: none; }
.fb-viewport.fb-gezoomt #flipbook { cursor: grab; }
.fb-viewport.fb-gezoomt #flipbook.fb-draggt { cursor: grabbing; }

.fb-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: #fff; border-top: 1px solid var(--fb-line);
}
.fb-btn {
  cursor: pointer; font: inherit; font-weight: 600; font-size: 1rem;
  padding: 8px 13px; border-radius: 8px; border: 1px solid var(--fb-line);
  background: #f2f5ee; color: var(--fb-ink);
}
.fb-btn:hover { background: #eef5e7; }
.fb-btn:disabled { opacity: .4; cursor: default; }
.fb-btn-grid { font-size: 1.1rem; }

.fb-seitenanzeige { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fb-muted); white-space: nowrap; }
.fb-seite-eingabe {
  width: 3em; text-align: center; font: inherit; font-weight: 700; color: var(--fb-ink);
  border: 1px solid var(--fb-line); border-radius: 6px; padding: 6px 4px;
}

.fb-grid-overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 16, .82);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.fb-grid-overlay.offen { display: flex; }
.fb-grid-inner { background: var(--fb-card); border-radius: 12px; max-width: 900px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.fb-grid-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--fb-line); font-weight: 700; }
.fb-grid-raster { overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; }
.fb-grid-item { cursor: pointer; text-align: center; }
.fb-grid-item img { width: 100%; border-radius: 4px; border: 1px solid var(--fb-line); display: block; }
.fb-grid-item span { display: block; font-size: .78rem; color: var(--fb-muted); margin-top: 3px; }
.fb-grid-item:hover img { border-color: var(--fb-gruen); }

@media (max-width: 640px) {
  .fb-btn { padding: 8px 10px; font-size: .95rem; }
  .fb-seitenanzeige { font-size: .85rem; }
}