/* ═══════════════════════════════════════════════════════════════════════
   Fotos — Albenübersicht und Album

   Baut auf style.css auf: Farben, Schrift, Kopfleiste und Fuß kommen von
   dort. Harte Kanten, keine Rundungen; die Fotos bringen die Farbe mit.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kopf ─────────────────────────────────────────────────────────────── */

.seitenkopf {
  background: var(--blau);
  color: var(--weiss);
  /* Die Kopfleiste steht fest darüber. */
  padding-block: calc(clamp(64px, 8vw, 84px) + clamp(32px, 5vw, 72px)) clamp(36px, 5vw, 64px);
}

.seitenkopf__kicker {
  font-weight: 800;
  font-size: 0.86em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gelb);
}

.seitenkopf__title {
  margin-top: 10px;
  font-size: clamp(52px, 10vw, 136px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.seitenkopf--album .seitenkopf__title {
  font-size: clamp(40px, 7vw, 96px);
}

.seitenkopf__lede {
  max-width: 34em;
  margin-top: clamp(18px, 2.4vw, 28px);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  color: #e3e8ff;
}

.seitenkopf__meta {
  margin-top: 14px;
  font-weight: 700;
  color: #c9d3ff;
}

.seitenkopf__zurueck {
  display: inline-block;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 0.86em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gelb);
}

.seitenkopf__zurueck:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Inhalt ───────────────────────────────────────────────────────────── */

.fotos-seite {
  background: var(--weiss);
  padding-block: clamp(36px, 6vw, 80px);
}

.fotos-seite :focus-visible {
  outline-color: var(--blau);
}

.fotos__leer {
  color: #3c4a7a;
}

/* ── Alben ────────────────────────────────────────────────────────────── */

.alben {
  display: grid;
  gap: clamp(28px, 3vw, 40px) clamp(14px, 2vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.album__link {
  display: grid;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}

.album__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--blau);
}

.album__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.album__link:hover .album__frame img {
  scale: 1.04;
}

/* Wie die Leisten des Flyers: Gelb, leicht schräg. */
.album__count {
  position: absolute;
  left: 12px;
  bottom: 14px;
  padding: 5px 10px 6px;
  background: var(--gelb);
  color: var(--blau);
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  rotate: -2deg;
}

.album__title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--blau);
}

.album__link:hover .album__title {
  text-decoration: underline;
  text-decoration-color: var(--gelb);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.album__meta {
  font-size: 0.9em;
  color: #3c4a7a;
}

/* ── Fotos eines Albums ──────────────────────────────────────────────────
   Ein Mosaik in Zeilen gleicher Höhe, jede Zeile auf voller Breite. Spalten
   ließen bei wenigen Fotos Löcher — vier Bilder, davon eines quer, und eine
   Spalte stand halb leer.

   Gerechnet wird in album.js (`mosaic()`), weil sich nur dort die letzte
   Zeile sinnvoll behandeln lässt. Was hier steht, ist der Rückfall für den
   Moment davor: Jedes Foto trägt sein Seitenverhältnis als `--r`,
   Grundbreite und Wachstum sind proportional dazu, die Höhen einer Zeile
   bleiben damit gleich. Nichts wird beschnitten. */

.fotos {
  --zeile: clamp(150px, 17vw, 260px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.8vw, 12px);
}

.foto {
  flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--zeile));
}

/* Die letzte Zeile soll nicht auf ein riesiges Einzelbild aufgeblasen
   werden: Der Platzhalter nimmt einen Teil des Rests. Ungefähr so viel, wie
   drei Querformate wachsen würden. */
.fotos::after {
  content: '';
  flex: 4 1 0;
}

/* Gerechnet: Die Breiten setzt album.js, Flex hält sich heraus. */
.fotos.is-mosaik .foto {
  flex: none;
}

.fotos.is-mosaik::after {
  content: none;
}

.foto__link {
  display: block;
  overflow: hidden;
  background: var(--blau);
}

.foto__link img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale 0.5s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.2s;
}

.foto__link:hover img {
  scale: 1.04;
}

.fotos__mehr-zeile {
  margin-top: clamp(22px, 3vw, 36px);
  text-align: center;
}

.fotos__mehr {
  padding: 14px 28px;
  border: 0;
  border-radius: 0;
  background: var(--gelb);
  color: var(--blau);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--blau);
}

.fotos__mehr:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ── Hinweis zum Entfernen ───────────────────────────────────────────────
   Klein, aber auf jeder Fotoseite direkt unter den Bildern: Wer sich auf
   einem Foto findet, muss den Weg finden, ohne danach zu suchen. */

.fotos__hinweis {
  max-width: 46em;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 16px;
  border-top: 1px solid rgb(32 52 206 / 15%);
  font-size: 0.86em;
  color: #4a5580;
}

.fotos__hinweis a {
  font-weight: 700;
  color: var(--blau);
}

/* ── Ticket-Aufruf ───────────────────────────────────────────────────────
   Gelb wie der Flohmarkt auf der Startseite; „2027“ als blaue, schräge
   Leiste wie „& Klänge“. */

.fotos-cta {
  background: var(--gelb);
  color: var(--blau-nacht);
  padding-block: clamp(36px, 6vw, 72px);
}

.fotos-cta__wrap {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
}

.fotos-cta__kicker {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blau);
}

.fotos-cta__title {
  margin-top: 8px;
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--blau);
}

.fotos-cta__title span {
  display: inline-block;
  margin-top: 0.06em;
  padding: 0.04em 0.16em 0.08em;
  background: var(--blau);
  color: var(--gelb);
  rotate: -2deg;
}

.fotos-cta__text {
  max-width: 30em;
  margin-top: clamp(14px, 2vw, 22px);
  font-weight: 700;
}

.fotos-cta__btn {
  justify-self: start;
  padding: 16px 30px;
  background: var(--blau);
  color: var(--weiss);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--blau-nacht);
  transition: translate 0.15s ease, box-shadow 0.15s ease;
}

.fotos-cta__btn:hover {
  translate: -2px -2px;
  box-shadow: 7px 7px 0 var(--blau-nacht);
}

.fotos-cta :focus-visible {
  outline-color: var(--blau);
}

@media (min-width: 760px) {
  .fotos-cta__wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ── Großansicht ─────────────────────────────────────────────────────── */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

/* Ausgeschrieben statt var(--blau-nacht): ::backdrop erbt in älteren
   Browsern die Variablen von :root nicht. Fast deckend, sonst liest sich
   die gelbe Fläche der Seite durch. */
.lightbox::backdrop {
  background: rgb(12 20 85 / 98%);
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox__img {
  max-width: calc(100vw - 2 * var(--rand));
  max-height: calc(100dvh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* Wischen soll blättern, nicht die Seite verschieben. */
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.lightbox__leiste {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--rand) calc(18px + env(safe-area-inset-bottom));
  color: var(--weiss);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lightbox__melden {
  font-size: 0.86em;
  color: #c9d3ff;
  text-underline-offset: 4px;
}

.lightbox__melden:hover {
  color: var(--gelb);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 0;
  background: var(--gelb);
  color: var(--blau);
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.lightbox__btn:hover {
  background: var(--weiss);
}

.lightbox__zu {
  top: calc(14px + env(safe-area-inset-top));
  right: var(--rand);
}

.lightbox__zurueck,
.lightbox__vor {
  top: 50%;
  translate: 0 -50%;
}

.lightbox__zurueck {
  left: var(--rand);
}

.lightbox__vor {
  right: var(--rand);
}

/* Auf dem Telefon liegen die Pfeile unten neben dem Zähler — mittig über dem
   Bild verdeckten sie es, und gewischt wird dort ohnehin. */
@media (max-width: 759px) {
  .lightbox__zurueck,
  .lightbox__vor {
    top: auto;
    bottom: calc(66px + env(safe-area-inset-bottom));
    translate: none;
    width: 44px;
    height: 44px;
  }
}

/* ── Breiter ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .album__link:hover .album__frame img,
  .foto__link:hover img {
    scale: none;
  }

  .fotos-cta__btn:hover {
    translate: none;
  }
}