/* ══════════════════════════════════════════════════════════════════
   LIGHTBOX – geteilt von Tagebuch und Wand (Markup legt lightbox.js an)
   ══════════════════════════════════════════════════════════════════ */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12,12,12,0.93);
  z-index: 200;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* breiten Carousel-Track auf den Schirm beschneiden */
}
#lightbox.open { display: flex; }

/* Carousel-Track: alle Bilder der Galerie liegen nebeneinander; per translateX
   wird das aktive Bild zentriert. */
/* Wrapper nur für die einmalige „Wisch"-Hinweis-Animation. Sein Transform
   überlagert (komponiert mit) das Carousel-Transform des Tracks, ohne dessen
   Position zu verändern. */
.lb-viewport {
  position: absolute;
  inset: 0;
  --hint-x: -56px;             /* Strecke, um die das Bild beim Hinweis nach links rückt */
}
@keyframes lb-swipe-hint {
  0%, 100% { transform: translateX(0); }
  42%      { transform: translateX(var(--hint-x)); }
}
@media (prefers-reduced-motion: no-preference) {
  .lb-viewport.hint { animation: lb-swipe-hint 0.95s cubic-bezier(0.4, 0, 0.2, 1); }
}

.lb-track {
  --slide-w: 100vw;            /* Slides = volle Breite → kein dauerhafter Peek */
  position: absolute;          /* bei left:0 starten, damit translateX exakt rechnet
                                  (sonst zentriert die Flexbox den breiten Track) */
  left: 0; top: 0;
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  touch-action: pan-y;         /* waagerechtes Wischen handhaben wir selbst */
}
.lb-slide {
  flex: 0 0 var(--slide-w);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;             /* kleiner Abstand zum Bildschirmrand (nahezu fullscreen) */
}
.lb-slide figure { margin: 0; display: flex; flex-direction: column; }
.lb-slide img {
  max-width: calc(100vw - 24px);   /* Slide-Breite minus Padding (fester Wert, da
                                      die figure sich nach dem Bild richtet) */
  max-height: 88vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Bedien-Buttons als runde „Chips" mit Hintergrund → über jedem Bild sichtbar.
   Touch-Fläche 44×44px (Apple HIG / WCAG-Empfehlung). Symbole als SVG
   (wie .pfeil auf der Wand) statt Textzeichen aus der Systemschrift. */
#lb-close,
.lb-arrow {
  position: absolute;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  transition: opacity 0.18s, background 0.18s;
  user-select: none;
  z-index: 201;
}
#lb-close svg { width: 16px; height: 16px; }
.lb-arrow svg { width: 20px; height: 11px; }
#lb-prev svg  { transform: scaleX(-1); }      /* derselbe Pfeil, gespiegelt */
#lb-close:focus-visible,
.lb-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#lb-close {
  top:   calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  background: rgba(0,0,0,0.5);
  opacity: 0.9;
}
#lb-close:hover { opacity: 1; background: rgba(0,0,0,0.68); }

.lb-arrow {
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  opacity: 0.85;
}
.lb-arrow:hover { opacity: 1; background: rgba(0,0,0,0.6); }
/* Am Anfang/Ende der Galerie den nicht nutzbaren Pfeil ganz ausblenden */
.lb-arrow.disabled { opacity: 0; pointer-events: none; }
#lb-prev { left:  calc(env(safe-area-inset-left, 0px) + 12px); }
#lb-next { right: calc(env(safe-area-inset-right, 0px) + 12px); }

/* Bildzeile (nur Wand): direkt unter dem Foto, ohne eigenen Hintergrund,
   genau so breit wie das Bild: links Ort · Jahr, rechts „Zum Eintrag →".
   Gleiche Typo wie die Bildzeile auf der Wand (kleine Versalien). */
.lb-slide img:has(+ .lb-zeile) { max-height: calc(88vh - 36px); }   /* Platz für die Zeile */
.lb-zeile {
  width: 0; min-width: 100%;   /* trägt nicht zur Breite bei → folgt der Bildbreite */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 14px;
  padding: 12px 4px 0;         /* seitlich minimal eingerückt gegenüber der Bildkante */
  box-sizing: border-box;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.lb-zeile a { color: #fff; text-decoration: none; margin-left: auto; white-space: nowrap; }
/* Abstufung wie an der Wand: Jahr leiser */
.lb-zeile .jahr    { opacity: 0.65; }
.lb-zeile svg { width: 1.3em; height: 0.73em; margin-left: 0.35em; vertical-align: -0.02em; transition: transform 0.2s ease; }
.lb-zeile a:hover svg { transform: translateX(3px); }   /* wie an der Wand: Pfeil rückt nach rechts, keine Unterstreichung */

/* Handy: die Pfeile stören nur, das Wischen genügt (+ Hinweis-Animation). */
@media (max-width: 600px) {
  .lb-arrow { display: none; }
}