.panel--archiv { background-color: var(--farbe-weiss); }

/* --- Kopfleiste ----------------------------------------------------------- */
.archivkopf {
  position: sticky;
  top: 0;
  z-index: 555;
  /* flow-root verhindert, dass der margin-top der Filterleiste nach aussen
     durchschlaegt und die Kopfleiste um 24px nach unten schiebt. */
  display: flow-root;
  height: var(--kopf-hoehe);
  background-color: rgb(255 255 255 / 0.8);
  transition: transform var(--uebergang-kurz) ease-in-out;
}
.archivkopf--versteckt { transform: translateY(-100%); }

.archivkopf__reiter {
  position: absolute;
  right: 0;
  z-index: 666;
  width: 80px;
  height: 40px;
  padding: 0;
  border: 0;
  color: var(--farbe-weiss);
  cursor: pointer;
  font-family: var(--schrift);
  font-size: 13px;
  letter-spacing: 2px;
  text-align: left;
  text-transform: uppercase;
  transition: background-color var(--uebergang-kurz);
}
.archivkopf__reiter span { padding-left: 13px; }
.archivkopf__reiter--jahre  { top: 0;    background-color: var(--kopf-jahre); }
.archivkopf__reiter--serien { top: 40px; background-color: var(--kopf-serien); }
.archivkopf__reiter[aria-expanded="true"] { background-color: var(--farbe-akzent); }
@media (hover: hover) {
  .archivkopf__reiter:hover { background-color: var(--farbe-akzent); }
}

.archivkopf__leiste {
  display: flex;
  justify-content: flex-end;
  height: 35px;
  margin-top: 24px;
  padding-right: 150px;
}
.archivkopf__leiste[hidden] { display: none; }

.archivkopf__filter {
  height: 35px;
  margin-left: 20px;
  padding-inline: 20px;
  border: 0;
  background: none;
  color: var(--farbe-tinte);
  cursor: pointer;
  font-family: var(--schrift);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color var(--uebergang-mittel);
}
/* Nur auf Geraeten mit echtem Zeiger. Auf Touch bleibt der
   Hover-Zustand nach dem Tippen haengen — ein angetipptes Werk
   bliebe dunkel, ein Filter sichtbar markiert. */
.archivkopf__filter--aktiv {
  background-color: var(--farbe-tinte);
  color: var(--farbe-weiss);
}
@media (hover: hover) {
  .archivkopf__filter:hover {
    background-color: var(--farbe-tinte);
    color: var(--farbe-weiss);
  }
}

/* --- Raster --------------------------------------------------------------- */
/* Ohne JavaScript stehen die Werke schlicht untereinander und bleiben
   lesbar. Sobald gallery.js laeuft, setzt es .raster--berechnet und
   positioniert absolut (Kuerzeste-Spalte-Packung wie Isotope).

   padding-top 20px, nicht 100px wie im Bestand: dort war die Kopfleiste
   fixiert und damit ausserhalb des Flusses. Hier steht sie als sticky im
   Fluss und belegt bereits 80px — 80 + 20 ergibt dieselben 100px. */
.raster { position: relative; padding-top: 20px; }

.werk {
  width: var(--spalte);
  margin: 0 0 var(--abstand) var(--abstand);
}

/* content-visibility: auto laesst den Browser alles ueberspringen, was
   ausserhalb des Sichtfelds liegt — bei 267 Werken und einem ueber
   100.000 px hohen Raster ist das der Unterschied zwischen fluessig und
   Tab-Absturz. Die Ersatzgroesse setzt gallery.js je Werk, damit die
   Bloecke ihre Hoehe behalten, ohne gerendert zu werden. */
.raster--berechnet .werk {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  content-visibility: auto;
  transition: transform var(--uebergang-mittel), opacity var(--uebergang-mittel);
}
.raster--berechnet .werk[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.werk__link { display: block; }

/* Der Platzhalterton ist sichtbar, solange das Bild noch nicht da ist —
   das geladene Werk ist undurchsichtig und deckt ihn vollstaendig ab. Ohne
   ihn stehen beim Filterwechsel weisse Rahmen mit Schlagschatten im Raum,
   was wie ein Fehler aussieht statt wie "laedt noch". */
.werk img {
  display: block;
  width: 100%;
  height: auto;
  background-color: #ececec;
  box-shadow: var(--schatten-werk);
  cursor: zoom-in;
  transition: filter var(--uebergang-mittel);
}
@media (hover: hover) {
  .werk img:hover { filter: brightness(50%); }
}

/* Bildunterschrift steht im Dokument (SEO, Screenreader, Lightbox),
   ist im Raster aber nicht sichtbar — wie im Bestand. */
.werk__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Mobil ---------------------------------------------------------------- */
/* Im Bestand war die Filterleiste hier gar nicht erreichbar: sie lag als
   position:fixed mit right:150px ausserhalb des Bildschirms, sichtbar blieben
   nur zwei ueberdimensionale JAHRE/SERIEN-Bloecke. Hier darf die Leiste
   umbrechen und die Kopfleiste mitwachsen. Ab 1025px gilt unveraendert der
   Zustand des Bestands. */
@media (max-width: 1024px) {
  .archivkopf {
    height: auto;
    min-height: var(--kopf-hoehe);
    padding-right: 168px;             /* Platz fuer Reiter (80) + Burger (84) */
  }

  /* Neben den Burger ruecken, nicht darunter. */
  .archivkopf__reiter { right: 84px; }

  .archivkopf__leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 8px;
    height: auto;
    margin-top: 0;
    padding: 12px 12px 12px 16px;
  }

  .archivkopf__filter {
    height: 34px;
    margin-left: 0;
    padding-inline: 12px;
    font-size: 15px;
  }

  .raster { padding-top: 12px; }
}

/* Auf Telefonbreite bleibt neben den absolut gesetzten Reitern zu wenig
   Platz — die Filterchips stuenden dann einzeln untereinander. Hier
   ruecken die Reiter in eine eigene Zeile darueber. */
@media (max-width: 640px) {
  .archivkopf {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-right: 84px;              /* nur noch der Burger */
  }

  .archivkopf__reiter {
    position: static;
    flex: 0 0 auto;
    width: 110px;
    height: 36px;
  }

  .archivkopf__leiste {
    flex: 1 0 100%;
    padding: 10px 12px;
  }
}