/*******************************************************************************
 diashow.css – gemeinsam für Wanderseiten und Galerieseiten:
 Vorschaubilder (#thumbs), Einzelfoto-Overlay, Overlay-Diashow. Script: ../js/diashow.js
 Vorschaubilder: reine Bilder ohne Rand/Hintergrund, beliebiges Format, in zwei Auflösungen (Entscheid 2026-10-25,
 siehe README "Vorschaubilder in zwei Auflösungen"): simages max. 130 x 90 px (1x-Bildschirm) und mimages max. 260 x 180 px
 (Retina/Handy), per srcset 1x/2x; Kachel 140 x 100 px minus Innenabstand 4 px und Rahmen 1 px. Noch nicht umgestellte
 Seiten (Wanderungen) haben nur mimages mit max. 280 x 200 px. Grosse Bilder: b (max. 1300 x 750), x (max. 2500 x 1440).
 Anpassbar über Variablen (am Body der jeweiligen Seite setzen, siehe galerie.css):
   --thumb-bg (Kachelhintergrund), --thumb-padding, --thumb-rahmen / --thumb-rahmen-dicke (Rahmen ums Bild),
   --thumb-hover-outline (Rahmen um die Kachel beim Hover), --thumb-hover-rahmen (Bildrahmen beim Hover).
*******************************************************************************/

/* ---------- Vorschaubilder ----------
   Kachel (a) immer gleich gross, Bild zentriert eingepasst, Fläche rundherum standardmässig transparent. */
#thumbs {
  --thumb-luecke: 6px;          /* Abstand zwischen den Kacheln */
  --thumb-verhaeltnis: 1.4;     /* Kachel Handy: Breite / Höhe (14 : 10) */
  display: flex; flex-wrap: wrap; gap: var(--thumb-luecke);
}
#thumbs a {
  display: flex; align-items: center; justify-content: center; line-height: 0;
  width: 140px; height: 100px; box-sizing: border-box; border-radius: 6px;
  padding: var(--thumb-padding, 5px);
  background: var(--thumb-bg, transparent);
}
#thumbs img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  aspect-ratio: auto; object-fit: contain; box-sizing: border-box;
  border: var(--thumb-rahmen-dicke, 0) solid var(--thumb-rahmen, transparent);
}
#thumbs a:hover, #thumbs a:focus-visible {
  outline: var(--thumb-hover-outline, 3px solid var(--gruen)); outline-offset: -3px;
}
#thumbs a:hover img, #thumbs a:focus-visible img {
  border-color: var(--thumb-hover-rahmen, var(--thumb-rahmen, transparent));
}
/* Handy: 3 Spalten, Kachel im Seitenverhältnis 14 : 10. Drei Korrekturen für Safari/iPhone (getestet 2026-10-25, iOS 18):
   1) minmax(0, 1fr): Mit 1fr darf eine Spalte nie schmaler als ihr Inhalt werden. Ein Hochformatbild machte die Spalte breiter,
      das Raster ragte über den Bildschirm hinaus (Seite breiter als das Fenster, Safari zoomt heraus, nur ca. 2 Thumbs sichtbar).
   2) min-height: 0: Eine Kachel mit aspect-ratio hat sonst die Mindesthöhe ihres Inhalts (Hochformatbild) und wird höher als 14 : 10;
      über das Seitenverhältnis wird daraus auch noch eine Mindestbreite (siehe 1).
   3) max-height des Bildes feste Länge statt 100 %: Safari löst Prozentwerte gegen eine Höhe, die nur aus aspect-ratio kommt, nicht auf
      (Chrome schon). Darum aus der Kachelbreite gerechnet: (Containerbreite - 2 Lücken) / 3 / Verhältnis - 2 x Innenabstand.
      cqw = Breite des Containers #thumbs (container-type: inline-size; Safari ab iOS 16). */
@media (max-width: 600px) {
  #thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); container-type: inline-size; }
  #thumbs a { width: auto; height: auto; aspect-ratio: var(--thumb-verhaeltnis); min-height: 0; }
  #thumbs img {
    max-height: calc((100cqw - 2 * var(--thumb-luecke)) / 3 / var(--thumb-verhaeltnis) - 2 * var(--thumb-padding, 5px));
  }
}

/*******************************************************************************
 Einzelfoto-Overlay (Links im Beschreibungstext). Foto nie grösser als Original.
*******************************************************************************/
.foto-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  background: rgba(0, 0, 0, .85);
}
.foto-overlay[hidden] { display: none; }
.foto-rahmen { position: relative; margin: 0; line-height: 0; }
.foto-bild {
  display: block; width: auto; height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}
.foto-zu {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: #fff; color: #222;
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.foto-zu:hover { background: #e8e8e8; }

/*******************************************************************************
 Overlay-Diashow
*******************************************************************************/
html.dia-offen, html.dia-offen body { overflow: hidden; }

.dia-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: #000;
  color: #ddd;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.dia-overlay[hidden] { display: none; }

.dia-buehne {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.dia-rahmen {
  position: relative;
  margin: 0;
  line-height: 0;
  transition: opacity .15s;
}
.dia-rahmen.laedt { opacity: .6; }

.dia-bild { display: block; max-width: none; }

/* Bildtext liegt auf dem unteren Bildrand */
.dia-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, .65);
  color: #ddd;
  font-size: 15px;
  line-height: 1.35;
}
.dia-text[hidden] { display: none; }

/* Leiste oben */
.dia-leiste {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  font-size: 15px;
}
.dia-titel {
  flex: 1 1 auto;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dia-zaehler { white-space: nowrap; }

.dia-knopf, .dia-pfeil {
  font: inherit;
  color: #eee;
  background-color: rgba(40, 40, 40, .6);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  cursor: pointer;
}
.dia-knopf {
  min-width: 44px;
  min-height: 40px;
  padding: 0 10px;
  font-size: 15px;
}
.dia-knopf[hidden] { display: none; }
.dia-info[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.dia-zu { font-size: 18px; }

.dia-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 80px;
  font-size: 44px;
  line-height: 1;
  padding: 0 0 6px;
}
.dia-zurueck { left: calc(8px + env(safe-area-inset-left)); }
.dia-vor { right: calc(8px + env(safe-area-inset-right)); }
.dia-pfeil:disabled { opacity: .15; cursor: default; }
.dia-knopf:hover, .dia-pfeil:hover:not(:disabled) { background-color: rgba(90, 90, 90, .8); }

.dia-leiste, .dia-pfeil { transition: opacity .2s; }
.dia-overlay.ohne-leiste .dia-leiste,
.dia-overlay.ohne-leiste .dia-pfeil { opacity: 0; pointer-events: none; }
.dia-overlay.einzel .dia-pfeil,
.dia-overlay.einzel .dia-info { display: none; }

/* Handy: auf Touch-Geräten wird gewischt, Pfeile kleiner */
@media (pointer: coarse) {
  .dia-pfeil { width: 40px; height: 64px; font-size: 34px; background-color: rgba(40, 40, 40, .35); }
}
@media (max-width: 600px) {
  .dia-text { font-size: 14px; padding: 5px 8px; }
  .dia-titel { font-size: 14px; }
}