/* ══════════════════════════════════════════════════════════════
   Zoom-Betrachter — Stylesheet.

   Repo-fähig: KEINE App-Variablen, KEINE App-Selektoren. Farben über
   `--zv-*`-Tokens mit Defaults; die App setzt sie je Theme (Bridge in
   style.css). Die LAGE setzt das Modul selbst aus `getRect()` — hier
   steht nur, wie die Fläche innen aussieht.
   ══════════════════════════════════════════════════════════════ */

.zv-root {
  --zv-bg:           rgba(12, 10, 9, 0.94);
  --zv-bg-image:     none;
  --zv-text:         #EDE6DA;
  --zv-muted:        rgba(237, 230, 218, 0.72);
  --zv-close-bg:     rgba(0, 0, 0, 0.55);
  --zv-close-text:   #fff;
  --zv-z:            60;

  position: fixed;
  z-index: var(--zv-z);
  display: flex;
  flex-direction: column;
  background-color: var(--zv-bg);
  background-image: var(--zv-bg-image);
  color: var(--zv-text);
  /* Die Fläche führt ihre Zeiger selbst: kein Scrollen, kein Browser-Zoom,
     keine Zurück-Geste. Nur hier, nicht global. */
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.zv-root[hidden] { display: none; }

.zv-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  cursor: zoom-in;
}
.zv-root.zv-zoomed .zv-stage { cursor: grab; }

.zv-img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

/* Heller Grund hinter dem Bild (open(…, { light: true })): durchsichtige,
   dunkel gezeichnete Bilder wären auf der dunklen Fläche unsichtbar. */
.zv-img.zv-img--light { background: var(--zv-light-bg, #fff); }
.zv-peek[hidden] { display: none; }

/* Die Unterschrift (etwa der Bildnachweis) — rechtsbündig unter dem Bild,
   wie eine Bildunterschrift gelesen. Links bleiben anklickbar. */
.zv-credit {
  flex: 0 0 auto;
  padding: 4px 10px 6px;
  text-align: right;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--zv-muted);
  user-select: text;
  -webkit-user-select: text;
}
.zv-credit[hidden] { display: none; }
.zv-credit a { color: inherit; }

/* Beim Wisch zur nächsten Seite: ein Streifen Hintergrund, dann die nächste,
   noch leere Fläche. Der Streifen trägt, was der Aufrufer als Hintergrund
   setzt (--zv-gap-bg / --zv-gap-image), ohne Angabe ein helles Papierweiß. */
.zv-gap, .zv-next {
  position: fixed;
  z-index: var(--zv-z, 60);
  pointer-events: none;
}
.zv-gap {
  background-color: var(--zv-gap-bg, #ECE7DA);
  background-image: var(--zv-gap-image, none);
}
/* Deckend: durchscheinend zeigte die leere Seite als Geist, was darunter
   liegt. Sie sieht aus wie die Fläche selbst (--zv-next-*, sonst dunkel). */
.zv-next {
  background-color: var(--zv-next-bg, #1A1716);
  background-image: var(--zv-next-image, none);
}
.zv-gap[hidden], .zv-next[hidden] { display: none; }

/* Die Knöpfe (✕ und Zoom-beenden) sind so groß wie eine Fingerkuppe (48 px Trefferfläche), damit es
   ohne Zielen trifft — auch auf einem Bild, das bis in die Ecke reicht. */
.zv-btn {
  /* Eigene Vorgaben: das ✕ steht neben der Fläche, erbt also nichts von ihr. */
  --zv-close-bg:     rgba(0, 0, 0, 0.55);
  --zv-close-text:   #fff;
  --zv-close-ring:   rgba(255, 255, 255, 0.7);
  /* fest; top/right setzt das Modul aus getRect() */
  position: fixed;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--zv-close-ring);
  border-radius: 50%;
  background: var(--zv-close-bg);
  color: var(--zv-close-text);
  font: 700 22px/1 system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.zv-btn[hidden] { display: none; }
.zv-btn:focus-visible { outline: 3px solid var(--zv-close-ring); outline-offset: 2px; }

/* Stelle in der Reihe („2 / 3") — ein Knopf im Kleid des ✕, oben links ihm
   gegenüber (top/left setzt das Modul); ein Tipp blättert weiter. Breit
   genug für die Zahlen, rund an den Enden. Steht NACH .zv-btn: gleiche
   Spezifität, die spätere Regel gewinnt. */
.zv-counter {
  width: auto;
  min-width: 48px;
  padding: 0 12px;
  border-radius: 24px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}