/* ============================================================================
 * tc-zoom — ein Foto bildschirmfüllend, mit Zoom und Verschieben
 * (14.09.2026, Tim am iPhone: „Mir fehlt ein Zoom. Wenn ich hier klicke,
 * sollte ich das Bild ganz groß sehen. Das gleiche gilt am Desktop.")
 * ----------------------------------------------------------------------------
 * Geöffnet über TC.Zoom.oeffnen({ src, alt }) in js/tc-ui.js — das Markup
 * baut das Skript, hier steht nur die Gestalt.
 *
 * Slots: __buehne (+ __bild) · __schliessen · __leiste (+ __knopf) · __hinweis
 * Zustände am Wurzelelement: is-bereit (Maße bekannt) · is-nah (vergrößert)
 * · is-zieht (Maus zieht). Am Bild: is-gleitet (Umschalten mit Übergang).
 *
 * ⚠️ DIE KNÖPFE BRINGEN IHRE GESTALT SELBST MIT. Der Zoom liegt auf Seiten
 * mit und ohne gallery.css und button.css; eine geliehene Klasse
 * (tc-gallery__close) wäre dort ein heller Browser-Standardknopf (§10).
 * ⚠️ `max-width: none` AM BILD. Das globale img{max-width:100%} würde das
 * Foto sonst auf die Fensterbreite zwingen, und die Rechnung in TC.Zoom
 * (natürliche Maße × Faktor) stimmte nicht mehr.
 * ========================================================================== */

.tc-zoom {
  position: fixed;
  inset: 0;
  z-index: var(--tc-z-popover);
  /* Voll deckend: Bei 96 % schien der helle Text des Betrachters darunter
     noch lesbar durch (am Prüfstand in Handybreite gesehen). */
  background: rgb(0, 0, 0);
  color: var(--tc-text-strong, #e0e0e0);
  font-family: var(--tc-font-body, inherit);
  opacity: 0;
  transition: opacity var(--tc-motion-fast, 0.15s) ease;
}

.tc-zoom.is-bereit { opacity: 1; }

.tc-zoom__buehne {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: zoom-in;
}

.tc-zoom.is-nah .tc-zoom__buehne { cursor: grab; }
.tc-zoom.is-zieht .tc-zoom__buehne { cursor: grabbing; }

.tc-zoom__bild {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}

.tc-zoom__bild.is-gleitet {
  transition: transform var(--tc-motion-normal, 0.2s) ease;
}

/* Knöpfe: dunkle Scheibe mit feinem Rand, wie tc-gallery__nav — aber aus
   eigener Hand (siehe Kopf). 44 px: die größere Touch-Fläche, weil auf dem
   Handy ein Fehltipp auf der Bühne das Foto verschiebt. */
.tc-zoom__knopf {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(var(--tc-touch-min, 36px), 44px);
  height: max(var(--tc-touch-min, 36px), 44px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--tc-radius-full, 999px);
  background: rgba(20, 20, 20, 0.72);
  color: var(--tc-text-strong, #e0e0e0);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color var(--tc-motion-fast, 0.15s) ease;
}

.tc-zoom__knopf:hover { border-color: var(--tc-accent, #a1917a); }

.tc-zoom__knopf:focus-visible {
  outline: 2px solid var(--tc-highlight, #d4c4a0);
  outline-offset: 2px;
}

.tc-zoom__schliessen {
  position: absolute;
  top: calc(var(--tc-safe-top, 0px) + var(--tc-space-3, 12px));
  right: calc(var(--tc-safe-right, 0px) + var(--tc-space-3, 12px));
}

.tc-zoom__leiste {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tc-safe-bottom, 0px) + var(--tc-space-4, 16px));
  transform: translateX(-50%);
  display: flex;
  gap: var(--tc-space-3, 12px);
}

.tc-zoom__hinweis {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tc-safe-bottom, 0px) + var(--tc-space-4, 16px) + 60px);
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 6px 12px;
  border-radius: var(--tc-radius-full, 999px);
  background: rgba(20, 20, 20, 0.72);
  color: var(--tc-text-default, #cdcdcd);
  font-size: var(--tc-text-xs, 0.75rem);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tc-zoom__hinweis.is-weg { opacity: 0; }

/* tc-zoom-lupe — der Ausloeser am Foto (14.09.2026)
   Ein Tipp aufs Foto oeffnet den Zoom auch, aber das sieht man einem Foto
   nicht an; die Lupe sagt es. EIN Knopf fuer jeden Betrachter (Galerie,
   Werkbank-Album, Pathfinder-Chronik). Tim: „Warum ist das nicht einfach
   einheitlich?" — die erste Fassung stand nur im Galerie-Betrachter, und
   im Album fehlte der Zoom deshalb ganz.
   Markup: TC.Zoom.lupe(aufruf) in js/tc-ui.js. Der Behaelter muss
   positioniert sein; die Lupe sitzt unten rechts. */
.tc-zoom-lupe {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: var(--tc-space-3, 12px);
  bottom: var(--tc-space-3, 12px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(var(--tc-touch-min, 36px), 44px);
  height: max(var(--tc-touch-min, 36px), 44px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--tc-radius-full, 999px);
  background: rgba(20, 20, 20, 0.72);
  color: var(--tc-text-strong, #e0e0e0);
  font: inherit;
  cursor: zoom-in;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.tc-zoom-lupe:hover { border-color: var(--tc-accent, #a1917a); }

.tc-zoom-lupe:focus-visible {
  outline: 2px solid var(--tc-highlight, #d4c4a0);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tc-zoom,
  .tc-zoom__bild.is-gleitet,
  .tc-zoom__knopf,
  .tc-zoom__hinweis { transition-duration: 0.01ms; }
}