/* H&O Bildansicht ("Lightbox") - gehoert zu js/lightbox.js.
   Liegt ueber allem (hoechster Wert der Seite sonst: 901 beim Expose-Panel).
   Die Farben kommen aus dem Seitenthema, damit die Ansicht nicht wie ein
   fremdes Plugin wirkt: warmes Dunkel statt neutralem Schwarz. */

.hoLb {
  /* Nahezu deckend: helle Flaechen der Seite (Karten, Knoepfe) schimmerten
     bei 0.94 als auffaellige Flecken durch den Weichzeichner. */
  --lb-grund: rgba(22, 18, 15, 0.975);
  --lb-hell: #f5ede6;
  --lb-mute: rgba(245, 237, 230, 0.62);
  --lb-flaeche: rgba(245, 237, 230, 0.1);
  --lb-flaeche-hover: rgba(245, 237, 230, 0.2);
  --lb-ease: cubic-bezier(0.16, 0.84, 0.28, 1);

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kopf   kopf    kopf"
    "zurueck buehne   vor"
    "fuss   fuss    fuss";
  align-items: stretch;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  color: var(--lb-hell);
}

.hoLb[hidden] { display: none; }

/* Hintergrund: eigenes Element, damit ein Klick daneben schliesst und der
   Weichzeichner nicht auf dem Bild landet. */
.hoLb__grund {
  position: absolute;
  inset: 0;
  background: var(--lb-grund);
  opacity: 0;
  transition: opacity 0.32s ease;
}
@supports (backdrop-filter: blur(4px)) {
  .hoLb__grund { backdrop-filter: blur(10px) saturate(120%); }
}
.hoLb.is-offen .hoLb__grund { opacity: 1; }

/* Bedienelemente kommen leicht verzoegert nach - erst das Bild, dann der Rahmen. */
.hoLb__kopf,
.hoLb__fuss,
.hoLb__pfeil {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease 0.12s, transform 0.4s var(--lb-ease) 0.12s;
}
.hoLb__kopf  { transform: translateY(-10px); }
.hoLb__fuss  { transform: translateY(10px); }
.hoLb__pfeil { transform: scale(0.9); }
.hoLb.is-offen .hoLb__kopf,
.hoLb.is-offen .hoLb__fuss,
.hoLb.is-offen .hoLb__pfeil { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Kopfzeile */

.hoLb__kopf {
  grid-area: kopf;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
}

.hoLb__titel {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--lb-mute);
  /* Lange Objekttitel duerfen die Zeile nicht sprengen. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(70ch, calc(100% - 4rem));
}

/* ------------------------------------------------------------ Knoepfe */

.hoLb__knopf {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lb-flaeche);
  color: var(--lb-hell);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s var(--lb-ease);
}
.hoLb__knopf:hover  { background: var(--lb-flaeche-hover); }
.hoLb__knopf:active { transform: scale(0.94); }
.hoLb__knopf:focus-visible {
  outline: 2px solid var(--lb-hell);
  outline-offset: 3px;
}

.hoLb__pfeil--zurueck { grid-area: zurueck; justify-self: start; align-self: center; }
.hoLb__pfeil--vor     { grid-area: vor;    justify-self: end;   align-self: center; }
.hoLb__pfeil:hover    { transform: scale(1.06); }

/* Ein einzelnes Bild braucht weder Pfeile noch Leiste noch Zaehler. */
.hoLb--einzeln .hoLb__pfeil,
.hoLb--einzeln .hoLb__leiste,
.hoLb--einzeln .hoLb__zaehler { display: none; }

/* -------------------------------------------------------------- Bildbuehne */

.hoLb__buehne {
  grid-area: buehne;
  position: relative;
  z-index: 1;
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(0.5rem, 2vw, 1.25rem);
}

.hoLb__bild {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  /* transform-origin mittig: darauf rechnet die FLIP-Animation in
     js/lightbox.js. Nicht aendern, ohne dort nachzuziehen. */
  transform-origin: center center;
  will-change: transform, opacity;
  cursor: default;
}

/* Dezenter Hinweis, solange ein grosses Foto noch laedt. */
.hoLb.is-laedt .hoLb__buehne::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(245, 237, 230, 0.25);
  border-top-color: var(--lb-hell);
  animation: hoLbDreh 0.7s linear infinite;
}
@keyframes hoLbDreh { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- Fußzeile */

.hoLb__fuss {
  grid-area: fuss;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.hoLb__leiste {
  display: flex;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.hoLb__leiste::-webkit-scrollbar { display: none; }

.hoLb__mini {
  flex: none;
  width: 66px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s var(--lb-ease);
}
.hoLb__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoLb__mini:hover { opacity: 0.8; transform: translateY(-2px); }
.hoLb__mini.is-aktiv {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--lb-hell);
}
.hoLb__mini:focus-visible { outline: 2px solid var(--lb-hell); outline-offset: 2px; }

.hoLb__zaehler {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--lb-mute);
}

/* ------------------------------------------------------------------ Klein */

@media (max-width: 700px) {
  /* Auf dem Handy wird gewischt - die Pfeile wuerden nur das Bild verdecken. */
  .hoLb {
    /* minmax(0, 1fr) statt 1fr: eine reine 1fr-Spalte waechst mit einem
       breiten Foto mit, statt es zu begrenzen - das Bild stand dann seitlich
       ueber dem Bildschirmrand. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "kopf" "buehne" "fuss";
  }
  .hoLb__pfeil { display: none; }
  .hoLb__mini { width: 54px; height: 38px; }
}

/* Anklickbare Vorschaubilder in den Karten als solche kenntlich machen.
   Die Karten selbst bleiben unveraendert - nur Mauszeiger und Fokusrahmen. */
.prop__gallery-thumb[role="button"],
.spotlight-thumb[role="button"] { cursor: zoom-in; }
.prop__gallery-thumb[role="button"]:focus-visible,
.spotlight-thumb[role="button"]:focus-visible {
  outline: 2px solid var(--color-accent, #b48b74);
  outline-offset: 2px;
}

/* ------------------------------------------------- Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {
  .hoLb__grund,
  .hoLb__kopf,
  .hoLb__fuss,
  .hoLb__pfeil,
  .hoLb__bild,
  .hoLb__mini,
  .hoLb__knopf { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .hoLb__kopf, .hoLb__fuss, .hoLb__pfeil { transform: none; }
  .hoLb.is-laedt .hoLb__buehne::after { animation: none; }
}