:root {
  --nacht: #14110f;
  --nacht-tief: #0b0908;
  --flaeche: #1e1a17;
  --gold: #d9b26f;
  --gold-hell: #f1d9a7;
  --creme: #f3ece2;
  --gedimmt: #a39a8e;
  --serif: "Palatino Linotype", Palatino, "Iowan Old Style", "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --luft: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  /* Platz für die Scrollleiste immer freihalten, damit die Zeilenbreite nicht springt */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 520px at 50% -120px, #3a2c1c 0%, transparent 70%),
    var(--nacht);
  color: var(--creme);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Kopf */

.kopf {
  text-align: center;
  padding: clamp(48px, 9vw, 112px) var(--luft) clamp(32px, 5vw, 56px);
}

.kopf__datum {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.kopf__titel {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.kopf__zahl {
  font-size: clamp(120px, 24vw, 260px);
  letter-spacing: -0.04em;
  background: linear-gradient(170deg, var(--gold-hell) 10%, var(--gold) 45%, #9c7438 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 18px 40px #d9b26f2e);
}

.kopf__zahl:empty {
  display: none;
}

.kopf__wort {
  font-size: clamp(30px, 5.4vw, 56px);
  font-style: italic;
  color: var(--creme);
}

.kopf__linie {
  display: flex;
  justify-content: center;
  margin: 28px 0 22px;
}

.kopf__linie span {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.kopf__info {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  justify-content: center;
  color: var(--gedimmt);
  font-size: 15px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 16px;
  border: 1px solid #d9b26f66;
  border-radius: 999px;
  background: #d9b26f14;
  color: var(--gold-hell);
  font: 600 14px/1 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}

.knopf:hover {
  background: #d9b26f2b;
  border-color: var(--gold);
}

.knopf svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- Raster (Zeilen in Bildhöhe) */

main {
  padding: 0 var(--luft) 96px;
}

.raster {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--abstand, 8px);
}

.raster__zeile {
  display: flex;
  gap: var(--abstand, 8px);
}

.kachel {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--flaeche);
  cursor: zoom-in;
  opacity: 0;
  translate: 0 14px;
  animation: auftauchen 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.kachel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.02;
  transition:
    opacity 600ms ease,
    scale 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kachel img.geladen {
  opacity: 1;
  scale: 1;
}

.kachel:hover img.geladen {
  scale: 1.035;
}

.kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #ffffff12;
  pointer-events: none;
}

@keyframes auftauchen {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.hinweis {
  text-align: center;
  color: var(--gedimmt);
}

/* ---------------------------------------------------------------- Großansicht */

.leuchte {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0b0908f5;
  color: var(--creme);
}

.leuchte::backdrop {
  background: transparent;
}

.leuchte[open] {
  display: grid;
  grid-template-rows: 1fr auto;
  animation: einblenden 220ms ease;
}

.leuchte__bild {
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px clamp(12px, 7vw, 96px) 8px;
}

.leuchte__bild img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 30px 80px #000a;
  transition: opacity 200ms ease;
}

.leuchte__zeile {
  margin: 0;
  padding: 14px 24px 22px;
  display: flex;
  justify-content: center;
  gap: 18px;
  color: var(--gedimmt);
  font-size: 14px;
}

.leuchte__zeile span + span::before {
  content: "·";
  margin-right: 18px;
  color: var(--gold);
}

.rund {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  background: #14110fb3;
  color: var(--creme);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 160ms, color 160ms;
}

.rund:hover {
  border-color: var(--gold);
  color: var(--gold-hell);
}

.rund svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leuchte__zu,
.schau__zu {
  top: 14px;
  right: 14px;
}

.leuchte__vor,
.leuchte__nach {
  top: 50%;
  translate: 0 -50%;
}

.leuchte__vor {
  left: 14px;
}

.leuchte__nach {
  right: 14px;
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- Diashow */

.schau {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #000;
  overflow: hidden;
  cursor: none;
}

.schau.maus {
  cursor: default;
}

.schau__buehne img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1400ms ease;
}

.schau__buehne img.hinten {
  object-fit: cover;
  filter: blur(40px) brightness(0.45);
  scale: 1.15;
}

.schau__buehne img.sichtbar {
  opacity: 1;
}

.schau__buehne img.fahrt {
  animation: fahrt var(--dauer, 7s) linear forwards;
}

@keyframes fahrt {
  from {
    scale: 1;
    translate: 0 0;
  }
  to {
    scale: 1.07;
    translate: var(--weg, 1.2%) -0.8%;
  }
}

.schau__titel {
  position: absolute;
  left: 28px;
  bottom: 22px;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: #f3ece2cc;
  text-shadow: 0 2px 12px #000;
}

.schau__fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #ffffff14;
}

.schau__fortschritt span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
}

.schau__pause {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: #14110fcc;
  color: var(--creme);
  font-size: 15px;
}

.schau__zu {
  opacity: 0;
  transition: opacity 200ms;
}

.schau.maus .schau__zu {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .kachel,
  .kachel img,
  .schau__buehne img {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    translate: none;
  }
  .schau__buehne img:not(.sichtbar) {
    opacity: 0;
  }
}