body {
  font-family: var(--font-family-1);
  background: #fff;
  color: var(--color-1);
}

a {
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  background: #fff;
  /* Über dem Such-Overlay (5), damit dessen Oberkante unter der
     Kopf-Linie samt Schatten liegt. */
  z-index: 6;
}

/* Der Kopf liegt fest über der Seite. Der Inhalt hält immer den Abstand
   des ausgefahrenen Kopfs – so springt nichts, wenn er beim Scrollen
   schrumpft. Die Höhe misst script.js (--header-space). */
header.shadow-bottom {
  position: fixed;
  top: 0;
  left: 0;
}

body {
  padding-top: var(--header-space, 123px);
}

.logo {
  font-family: var(--font-family-1);
  font-size: var(--font-size-logo);
  line-height: 1;
  letter-spacing: var(--letter-spacing-logo);
  white-space: nowrap;
}

.logo-compact {
  display: none;
}

header nav {
  display: flex;
  gap: 40px;
  padding-top: 15px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Die Gruppe ist so breit wie ihr Titel – so liegen zwischen allen Titeln
   gleich große Abstände. Breitere Unterpunkte ragen nach rechts hinaus. */
.nav-sub {
  width: 0;
}

.nav-sub a {
  width: max-content;
}

.nav-group-label {
  font-size: var(--font-size-body-m);
  line-height: 31px;
  margin-bottom: 15px;
}

/* Unterpunkte liegen hinter dem Gruppentitel: sichtbar erst nach Klick
   (.nav-group-open) oder wenn die aktuelle Seite in der Gruppe liegt
   (.nav-group-on). */
.nav-group a:not(.nav-group-label) {
  display: none;
  font-size: var(--font-size-body-s);
  line-height: 22px;
}

.nav-group-on a:not(.nav-group-label),
.nav-group-open a:not(.nav-group-label) {
  display: block;
}

/* Luft zwischen letztem Unterpunkt und der Kopf-Linie (Figma). Zählt nur,
   solange die Unterpunkte sichtbar sind. */
.nav-sub a:last-child {
  margin-bottom: 15px;
}

.nav-group-label {
  cursor: pointer;
}

/* Auf dem Desktop behält das kurze Logo die Luft über sich wie das lange –
   nur mobil klebt es an der Oberkante (siehe unten). */
header.is-compact .logo {
  font-size: var(--font-size-h2);
}

/* Zieht das kurze Logo mobil an die Oberkante: Bei Zeilenhöhe 1 liegt über der
   Versalhöhe von Saans noch 0,1215 em Luft
   ((Ascent 910 + Descent 225 − 1000) / 2 + 910 − Versalhöhe 721).
   Optisch sitzt es mit 3px mehr besser – das „!“ ragt leicht hinaus. */
header {
  --logo-trim: calc(-0.1215em - 3px);
}

header.is-compact .logo-full {
  display: none;
}

header.is-compact .logo-compact {
  display: inline;
}

/* Im geschrumpften Kopf ist nur Platz für die Titelzeile – Unterpunkte
   zeigt dort nur die aufgeklappte Gruppe. */
header.is-compact .nav-group a:not(.nav-group-label),
header.is-compact .nav-group-on a:not(.nav-group-label) {
  display: none;
}

header.is-compact .nav-group-open a:not(.nav-group-label) {
  display: block;
}

header.is-compact .nav-utils {
  display: flex;
  justify-content: flex-end;
  column-gap: 8px;
}

header.is-compact .nav-easy,
header.is-compact .nav-search {
  margin-top: 0;
}

/* Feste Breite für beide Zustände: so breit wie die Zeile im geschrumpften
   Kopf (Sprache 31 + Leichte Sprache 29 + Suche 30 + 2 × 8 Abstand). Sonst
   springen die Gruppen beim Wechsel zwischen groß und klein seitlich. */
.nav-utils {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 31px 38px 38px;
  justify-items: end;
  width: 106px;
  line-height: 0;
}

/* Der Sprachwechsel zeigt immer nur die Sprache, in die gewechselt
   werden kann – die aktuelle steht schon im Seiteninhalt. */
.nav-langs a[aria-current] {
  display: none;
}

.nav-langs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-body-m);
  line-height: 31px;
  letter-spacing: -0.84px;
}

.nav-easy {
  grid-column: 1;
  grid-row: 2;
  width: 29px;
  height: 30px;
  overflow: clip;
  margin-top: 8px;
}

/* Die Symbole sind Masken in Textfarbe – so färbt der Hover sie rot. */
.nav-easy,
.nav-search {
  color: var(--color-1);
}

a.nav-easy:hover,
a.nav-easy[aria-current],
.nav-search:hover {
  color: var(--color-6);
}

.nav-icon {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  mask: center / 100% 100% no-repeat;
}

.nav-easy .nav-icon {
  mask-image: url('../img/leichte-sprache.png');
}

.nav-search .nav-icon {
  mask-image: url('../img/search.svg');
}

.nav-search {
  grid-column: 1;
  grid-row: 3;
  width: 30px;
  height: 30px;
  overflow: clip;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
}

.rule {
  display: none;
}

/* Der Teaser ist so hoch wie sein Inhalt. Eine feste Mindesthöhe plus eine
   1fr-Leerzeile hatte die Resthöhe zwischen Tag und Bild aufgespannt – bei
   kurzen Teasern klaffte dort eine Lücke. */
.teaser > a {
  display: grid;
  grid-template-columns: minmax(0, 686px) minmax(0, 1fr);
  padding-top: 24px;
  padding-bottom: 32px;
  color: inherit;
}

.teaser-warm {
  background: var(--color-bg-warm);
}

.teaser-grey {
  background: var(--color-bg-grey);
}

.teaser.shadow-bottom {
  z-index: 1;
}

.teaser.shadow-bottom:nth-child(1) {
  z-index: 4;
}

.teaser.shadow-bottom:nth-child(2) {
  z-index: 3;
}

.teaser.shadow-bottom:nth-child(3) {
  z-index: 2;
}

.teaser-kicker {
  grid-column: 1 / -1;
  color: var(--color-6);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.teaser-title {
  grid-column: 1 / -1;
  font-family: var(--font-family-1);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.teaser-title .cur {
  display: block;
}

.teaser-serif .teaser-title {
  font-family: var(--font-family-2);
}

.teaser-tag,
.tag {
  display: grid;
  place-items: center;
  margin-inline: auto;
  width: 130px;
  height: 32px;
  border: var(--border-width-1) solid var(--color-6);
  border-radius: 50px;
  font-size: var(--font-size-body-s);
  background: rgba(255, 255, 255, 0.8);
}

.teaser-tag {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 16px 0 24px;
}

.teaser-media {
  grid-column: 1;
  align-self: end;
}

.teaser-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.teaser-aside {
  grid-column: 2;
  align-self: end;
  padding-left: 14px;
}

.teaser-copy {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  max-width: 608px;
}

/* Pfeile – siehe snippets/pfeil.php. Farbe kommt über currentColor,
   die Richtung über Rotation, damit eine Form für alle Fälle reicht. */
.pfeil {
  display: block;
  color: inherit;
}

.pfeil-down {
  transform: rotate(90deg);
}

.pfeil-up {
  transform: rotate(-90deg);
}

.pfeil-left {
  transform: rotate(180deg);
}

/* Pfeil im Teaser: sitzt inline hinter dem letzten Wort und füllt den Rest
   der Zeile bis zum Spaltenende. Der Anker ist 0 breit, damit der Umbruch des
   Textes unberührt bleibt; die Länge setzt script.js als --teaser-arrow-width.
   Passt der Pfeil nicht mehr in die letzte Zeile, rutscht er per .is-wrapped
   in eine eigene Zeile darunter. */
.teaser-copy-arrow {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: baseline;
}

.teaser-copy-arrow.is-wrapped {
  display: block;
  width: 100%;
  height: 1.6em;
}

.teaser-copy-arrow-inner {
  position: absolute;
  left: 14px;
  /* Mitte des Pfeils auf halbe x-Höhe über der Grundlinie legen, damit er
     mittig zum letzten Wort sitzt. 10px = halbe Höhe des Pfeilkopfs. */
  bottom: calc(0.26em - 10px);
  display: flex;
  align-items: center;
  width: var(--teaser-arrow-width, 0px);
  overflow: hidden;
}

.teaser-copy-arrow.is-wrapped .teaser-copy-arrow-inner {
  left: 0;
  top: calc(50% - 10px);
  bottom: auto;
}

.teaser-copy-arrow-line {
  flex: 1 1 auto;
  height: 1.3px;
  background: currentColor;
}

/* Der Kopf liegt auf dem Strich statt hinter ihm: die Spitze sitzt 8.2px
   innerhalb des SVG, der negative Rand schiebt sie genau auf das Linienende. */
.teaser-copy-arrow .pfeil {
  flex: none;
  width: 9px;
  height: 20px;
  margin-left: -8.2px;
}

/* Unter 1100px reicht der Platz neben dem Bild nicht mehr für den Text:
   Bild und Text stehen dann untereinander. */
@media only screen and (max-width: 1100px) {
  .teaser > a {
    grid-template-columns: minmax(0, 1fr);
  }

  .teaser-media,
  .teaser-aside {
    grid-column: 1;
  }

  .teaser-aside {
    padding-left: 0;
    padding-top: 16px;
  }
}

/* ---------------------------------------------------------------------------
   Ausstellung (Figma „Ausstellungen“)
   Das Cover steht immer oben: Kicker, Name, Tag, dann das Bild über die volle
   Breite oder in der linken Spalte. Darunter links die Bildunterschrift,
   rechts Text und Links. Linie und Schatten trennen es von den Modulen.
   ------------------------------------------------------------------------- */
.exhibition-cover {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--horizontal-space-5);
  align-items: start;
  padding-top: var(--vertical-space-5);
  padding-bottom: var(--vertical-space-8);
  counter-reset: story-caption;
}

.exhibition-cover > * {
  grid-column: 1 / -1;
}

.exhibition-kicker {
  color: var(--color-6);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.exhibition-title {
  margin-top: var(--vertical-space-4);
  font-family: var(--font-family-1);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.exhibition-cover > :first-child {
  margin-top: 0;
}

.exhibition-title .cur {
  display: block;
}

/* Figma: 68px unter dem Namen, 82px über dem Bild. */
.exhibition-cover .tag {
  margin: var(--vertical-space-9) auto 0;
}

/* Das Bild schrumpft beim Runterscrollen stufenlos von der vollen auf die
   halbe Breite (Figma „Ausstellungen“, Scroll-Zustand) und füllt dann die
   linke Spalte, belegt aber weiter die ganze Zeile – Bildunterschrift und
   Text stehen immer darunter. --cover-shrink läuft von 0 bis 1 und kommt aus
   script.js; ohne JS bleibt das Bild breit. */
.exhibition-media {
  position: relative;
  width: calc(100% - var(--cover-shrink, 0) * (50% + var(--horizontal-space-5) / 2));
  margin-top: var(--vertical-space-10);
  aspect-ratio: 3 / 2;
  overflow: clip;
  background: var(--color-5);
}

.exhibition-media img,
.exhibition-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 153px;
  height: 153px;
  overflow: clip;
  transform: translate(-50%, -50%) rotate(90deg);
}

.hero-play img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Die Nummer steht hier in derselben Zeile wie die Angaben. */
.exhibition-caption {
  grid-column: 1;
  margin-top: var(--vertical-space-4);
  max-width: 530px;
}

.exhibition-caption.story-caption::before {
  display: inline;
  content: "(" counter(story-caption, decimal-leading-zero) ") ";
}

/* Unter dem breiten Bild beginnt der Text ein Stück tiefer, neben dem
   geschrumpften auf Höhe der Bildunterschrift. */
.exhibition-text {
  grid-column: 2;
  margin-top: calc(var(--vertical-space-8) - var(--cover-shrink, 0) * (var(--vertical-space-8) - var(--vertical-space-5)));
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.exhibition-text p + p {
  margin-top: var(--line-height-body-m);
}

.exhibition-text a:not(.link-out) {
  color: var(--color-6);
}

.exhibition-text em {
  font-style: italic;
}

.exhibition-text > .pfeil-links:not(:first-child) {
  margin-top: var(--line-height-body-m);
}

/* Pfeil-Links (snippets/pfeil-links.php): Pfeil vorn, Bezeichnung dahinter. */
.pfeil-links {
  list-style: none;
}

.pfeil-links .link-out .pfeil {
  flex: none;
  width: 101px;
  height: 21px;
}

.pfeil-links .link-out:hover span {
  color: var(--color-6);
}

@media only screen and (max-width: 800px) {
  .exhibition-cover {
    grid-template-columns: minmax(0, 1fr);
  }

  .exhibition-media {
    width: 100%;
  }

  .exhibition-caption,
  .exhibition-text {
    grid-column: 1;
  }

  .exhibition-cover .tag {
    margin-top: var(--vertical-space-6);
  }

  .exhibition-media {
    margin-top: var(--vertical-space-6);
  }

  .exhibition-caption {
    margin-top: var(--vertical-space-2);
  }

  .exhibition-text {
    margin-top: var(--vertical-space-5);
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }

  .exhibition-text p + p,
  .exhibition-text > .pfeil-links:not(:first-child) {
    margin-top: 22px;
  }

  .pfeil-links .link-out {
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }
}

/* ---------------------------------------------------------------------------
   Nicht gefunden (templates/error.php): roter Kicker und große Überschrift
   wie im Ausstellungs-Cover, Text und Pfeil-Links in der rechten Spalte.
   ------------------------------------------------------------------------- */
.error-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--horizontal-space-5);
  padding-top: var(--vertical-space-5);
  padding-bottom: calc(2 * var(--vertical-space-10));
}

.error-kicker,
.error-title {
  grid-column: 1 / -1;
}

.error-kicker {
  color: var(--color-6);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.error-title {
  margin-top: var(--vertical-space-4);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.error-text {
  grid-column: 2;
  margin-top: var(--vertical-space-10);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.error-text p + p,
.error-text > .pfeil-links:not(:first-child) {
  margin-top: var(--line-height-body-m);
}

@media only screen and (max-width: 800px) {
  .error-page {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--vertical-space-10);
  }

  .error-text {
    grid-column: 1;
    margin-top: var(--vertical-space-6);
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }

  .error-text p + p,
  .error-text > .pfeil-links:not(:first-child) {
    margin-top: 22px;
  }
}

/* Der Inhalt endet immer mit Linie und Schatten. Er liegt über dem
   Footer (dessen Zeilen haben z-index 2 und weißen Grund), sonst wäre
   der Schatten verdeckt. */
main.shadow-bottom {
  z-index: 3;
}

/* Hat der letzte Abschnitt schon eine eigene Linie, übernimmt main sie,
   damit keine doppelte Linie entsteht. */
main.shadow-bottom > .shadow-bottom:last-child {
  border-bottom: none;
}

main.shadow-bottom > .shadow-bottom:last-child::after {
  content: none;
}

main.shadow-bottom:has(> .shadow-bottom-lg:last-child)::after {
  height: var(--shadow-height-lg);
}

.footer-row {
  display: grid;
  /* Figma: Überschrift ab 20, Felder und Links ab 527, Absenden ab 1089. */
  grid-template-columns: minmax(0, 476px) minmax(0, 531px) minmax(182px, 1fr);
  column-gap: 31px;
  align-items: start;
  padding-top: 46px;
  padding-bottom: 44px;
}

.footer-newsletter {
  z-index: 2;
  background: #fff;
}

.footer-information {
  z-index: 1;
  background: #fff;
  padding-top: 44px;
  padding-bottom: 34px;
}

.footer-row h2 {
  font-size: var(--font-size-h2);
  line-height: 32px;
  letter-spacing: -1.4px;
}

.footer-newsletter-fields {
  max-width: 531px;
}

.footer-newsletter-fields input[type="email"] {
  width: 100%;
  border: none;
  border-bottom: 1.3px solid var(--color-1);
  padding: 0;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-family: inherit;
  background: transparent;
}

.footer-newsletter-fields input[type="email"]::placeholder {
  color: var(--color-1);
  opacity: 1;
}

.footer-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  color: var(--color-6);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.footer-consent img {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
}

.footer-submit {
  width: 130px;
  height: 32px;
  border: var(--border-width-1) solid var(--color-6);
  border-radius: 50px;
  color: var(--color-6);
  font-size: var(--font-size-body-s);
  font-family: inherit;
  background: rgba(255, 255, 255, 0.8);
}

.footer-links {
  display: grid;
  grid-template-columns: 266px auto;
  margin-top: 4px;
}

.footer-links a {
  font-size: var(--font-size-body-s);
  line-height: 20px;
}

.footer-logo {
  justify-self: end;
  width: 182px;
  height: 76px;
  margin-top: -14px;
  overflow: clip;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Unter 1100px steht die Überschrift über der Zeile, darunter Felder und
   Links links, Absenden und Logo rechts. */
@media only screen and (max-width: 1100px) {
  .footer-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 24px;
  }

  .footer-row h2 {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }

  .footer-links {
    grid-template-columns: minmax(0, 266px) auto;
  }

  .footer-logo {
    margin-top: 0;
  }
}

/* Auf dem Handy reicht die Breite nicht für zwei Spalten: alles untereinander. */
@media only screen and (max-width: 800px) {
  .footer-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 31px;
  }

  .footer-logo {
    justify-self: start;
  }
}

.listing {
  padding-top: 24px;
  padding-bottom: 80px;
}

.listing > ul,
.listing > ul > li {
  display: contents;
}

.listing h1 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  margin-bottom: 24px;
}

.ImageContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.tag-quiet {
  border-color: var(--color-1);
  color: var(--color-1);
}

/* Figma: Kopf-Linie → Knöpfe 32, Knöpfe → Linie 76 (Leiste 140 hoch),
   Knöpfe 130 × 32 im Abstand von 24. Reichen die Knöpfe nicht in eine
   Zeile, brechen sie um. */
.werke-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 32px;
  padding-bottom: 76px;
}

/* Auf der Übersicht schließt eine eigene Linie samt Schatten die Leiste
   ab, die Kacheln stehen direkt darunter. */
.werke-filters.shadow-bottom {
  padding-bottom: 75px;
}

.werke-filters .filter {
  min-width: 130px;
  height: 32px;
  padding: 0 16px;
  font-size: var(--font-size-body-s);
  line-height: 1;
}

.werke-filters .filter-on {
  color: var(--color-6);
}

/* Figma: der Rand ein zweites Mal, weichgezeichnet (Blur 3.5), statt
   des allgemeinen Scheins. */
.werke-filters .filter::before {
  border: var(--border-width-1) solid var(--color-6);
  box-shadow: none;
  filter: blur(3.5px);
}

.werke-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(10rem, calc((100% - 4 * var(--horizontal-space-3)) / 5))), 1fr)
  );
  gap: var(--horizontal-space-3);
  padding-bottom: var(--vertical-space-10);
}

.werke-tile {
  color: inherit;
}

.werke-tile-media {
  position: relative;
  aspect-ratio: 264 / 346;
  overflow: clip;
  background: var(--color-5);
}

.werke-tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.werke-tile-name {
  /* Figma: Bild → Name 10 */
  margin-top: 10px;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

/* Figma: zwei gleich breite Hälften, getrennt von einer roten Mittellinie,
   die von der Kopfzeile bis ans Seitenende läuft. Das Bild steht randlos
   in der linken Hälfte, alles andere hält 20px Abstand zu Rand und Linie. */
.werk-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 0 var(--vertical-space-10);
}

.werk-layout::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--line-thickness-5);
  transform: translateX(-50%);
  background: var(--color-6);
  pointer-events: none;
}

.werk-media,
.werk-copy:not(.werk-info) {
  grid-column: 1;
}

.werk-facts,
.werk-info {
  grid-column: 2;
}

.werk-facts {
  display: grid;
  /* Figma: zweite Spalte bei 458 von 680px */
  grid-template-columns: 2fr 1fr;
  gap: var(--vertical-space-7) var(--horizontal-space-3);
  align-content: start;
  padding: var(--vertical-space-6) var(--horizontal-space-3) 0;
}

.werk-title {
  grid-column: 1 / -1;
  /* Figma: 200px vom Titel bis zur ersten Angabe */
  margin-bottom: calc(200px - var(--vertical-space-7));
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.werk-label {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body-m);
}

.werk-field p:last-child {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.werk-copy {
  padding: var(--vertical-space-4) var(--horizontal-space-3) 0;
}

.werk-copy h2 {
  display: block;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body-m);
}

.werk-copy p {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.werk-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Handy: Knöpfe in derselben Größe, weniger Luft um die Leiste. */
@media only screen and (max-width: 800px) {
  .werke-filters {
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .werke-filters.shadow-bottom {
    padding-bottom: 20px;
  }
}

@media only screen and (max-width: 800px) {
  .werk-layout {
    grid-template-columns: 1fr;
  }

  .werk-layout::after {
    display: none;
  }

  .werk-media,
  .werk-copy:not(.werk-info),
  .werk-facts,
  .werk-info {
    grid-column: 1;
  }

  .werk-facts {
    grid-template-columns: 1fr 1fr;
  }

  .werk-title {
    margin-bottom: 0;
  }
}

/* Filterleiste (Personen A–Z, Archiv nach Jahren): eine Zeile kleiner
   Einträge, der aktive steht in Logo-Größe, die Leiste wächst mit ihm.

   Lage der Glyphe in Saans: Der Inhaltskasten ist 1.129 em hoch, die
   Grundlinie liegt 0.907 em unter seiner Oberkante. Wie weit ein Eintrag
   darüber und darunter reicht, bringt er selbst mit (--glyph-top,
   --glyph-bottom in em, aus filter_glyph_style()). */
.filter-bar {
  /* Figma: Linie zu Linie 78px, wie eine Zeile der Personenliste */
  --filter-bar-height: 78px;
  /* Oberkante der kleinen Einträge: die Oberlänge (0.729 em über der
     Grundlinie, also 0.1785 em unter der Kastenkante), gemessen ab der
     Zeilenoberkante. */
  --filter-item-glyph-top: calc((var(--line-height-body-m) - 1.129 * var(--font-size-body-m)) / 2 + 0.1785 * var(--font-size-body-m));
  --filter-bar-padding: calc((var(--filter-bar-height) - var(--line-height-body-m)) / 2);

  /* Die Einträge stehen oben, mit dem Abstand, der sich bei mittiger
     Ausrichtung ergäbe – so bleiben sie an ihrem Platz, wenn die Leiste
     mit aktivem Filter höher wird. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--horizontal-space-6);
  padding-top: var(--filter-bar-padding);
  padding-bottom: var(--filter-bar-padding);
  background: #fff;
  z-index: 4;
}

/* Reicht die Breite nicht (schmale Fenster), scrollt die Liste seitlich.
   Sie reicht dafür über den Innenabstand der Leiste bis an deren Kanten:
   Der Scrollbereich schneidet senkrecht ab, und das soll erst dort
   geschehen, nicht knapp an der großen Glyphe – Browser setzen die
   Grundlinie um ein paar Pixel verschieden. */
.filter-list {
  display: flex;
  flex: 1;
  align-items: flex-start;
  min-width: 0;
  margin-top: calc(-1 * var(--filter-bar-padding));
  margin-bottom: calc(-1 * var(--filter-bar-padding));
  padding-top: var(--filter-bar-padding);
  padding-bottom: var(--filter-bar-padding);
  overflow-x: auto;
  /* Der Inhaltskasten der Schrift reicht unter die Glyphe; senkrecht
     scrollen soll die Liste dadurch nicht. */
  overflow-y: hidden;
  scrollbar-width: none;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  letter-spacing: -1px;
}

.filter-list > li {
  flex: 0 0 auto;
}

.filter-list a:hover {
  color: var(--color-6);
}

/* Der aktive Eintrag steht in Logo-Größe. Die Oberkante seiner Glyphe
   liegt auf der der kleinen Einträge, sein Kasten endet so weit unter der
   Glyphe wie diese unter der Leistenkante beginnt – so wächst die Leiste
   um genau die Glyphe, mit gleich viel Luft oben und unten. Bei
   line-height: 1 liegt die Grundlinie 0.8425 em unter der Kastenkante
   ((1 - 1.129) / 2 + 0.907).

   Die übrigen Einträge bleiben stehen: jeder ist ein eigenes, oben
   ausgerichtetes Flex-Element. */
.filter-list .filter-on {
  display: block;
  font-size: var(--font-size-logo);
  line-height: 1;
  letter-spacing: var(--letter-spacing-logo);
  margin-top: calc(var(--filter-item-glyph-top) - (0.8425 - var(--glyph-top, 0.729)) * 1em);
  height: calc(var(--filter-item-glyph-top) + (0.8425 - var(--glyph-bottom, 0)) * 1em);
}

.personen {
  --personen-toggle-size: 40px;
  /* Figma: Linie zu Linie 78px, in Leiste und Liste gleich */
  --personen-row-height: 78px;
}

.personen-bar {
  --filter-bar-height: var(--personen-row-height);
}

/* Die Buchstaben verteilen sich über die ganze Breite. */
.personen-letters {
  justify-content: space-between;
  gap: var(--horizontal-space-1);
}

.personen-switch {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--line-height-body-m);
  flex: 0 0 auto;
}

.personen-switch-btn {
  width: 26px;
  height: 26px;
  overflow: clip;
  opacity: 0.35;
}

.personen-switch-on {
  opacity: 1;
}

.personen-switch-icon,
.personen-switch-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.personen[data-ansicht="raster"] .personen-liste,
.personen[data-ansicht="liste"] .personen-raster {
  display: none;
}

.personen-raster {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(10rem, calc((100% - 4 * var(--horizontal-space-3)) / 5))), 1fr)
  );
  gap: var(--horizontal-space-3);
  padding-bottom: var(--vertical-space-10);
}

.personen-tile {
  color: inherit;
}

.personen-tile-media {
  position: relative;
  aspect-ratio: 264 / 346;
  overflow: clip;
  background: var(--color-5);
}

.personen-tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personen-tile-name {
  margin-top: var(--gap-1);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.personen-raster li,
.personen-liste li {
  scroll-margin-top: 8rem;
}

/* Der Seitenrand sitzt im Eintrag, nicht an der Liste: sonst endet die
   Trennlinie vor dem Rand. .full bringt ihn mit, hier wird er entfernt
   und weiter unten an summary und Aufklappbereich weitergereicht. */
.personen-liste {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--vertical-space-10);
}

/* Linie oben statt unten. Beim Überfahren soll die Linie über dem
   Eintrag rot werden – die gehörte vorher zum Eintrag darüber, und auf
   das vorherige Geschwister kommt CSS nicht. */
.personen-liste > li {
  position: relative;
  border-top: var(--line-thickness-5) solid var(--color-1);
}

.personen-liste > li:last-child {
  border-bottom: var(--line-thickness-5) solid var(--color-1);
}

/* Über dem ersten Eintrag liegt schon die Linie der Filterleiste. */
.personen-liste > li:first-child {
  border-top: 0;
}

/* Beim Überfahren derselbe Schatten wie unter Kopf und Filterleiste. */
.personen-liste > li:hover {
  border-top-color: var(--color-6);
}

.personen-liste > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--shadow-height);
  background: var(--shadow-drop);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
}

.personen-liste > li:hover::before {
  opacity: 1;
}

.personen-liste > li:hover .personen-row-name {
  color: var(--color-6);
}

.personen-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--horizontal-space-4);
  /* Zeilenhöhe ohne die Linie oben am Eintrag */
  min-height: calc(var(--personen-row-height) - var(--line-thickness-5));
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  /* über dem Verlauf, damit der Name beim Überfahren klar bleibt */
  position: relative;
  z-index: 1;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  cursor: pointer;
  list-style: none;
}

.personen-row summary::-webkit-details-marker,
.personen-row summary::marker {
  display: none;
  content: "";
}

.personen-row-toggle {
  flex: 0 0 var(--personen-toggle-size);
  position: relative;
  width: var(--personen-toggle-size);
  height: var(--personen-toggle-size);
  border: var(--line-thickness-5) solid currentColor;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.8);
  color: var(--color-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

/* Schein um den Kreis: derselbe Rand, weichgezeichnet (Figma: Blur 3.5) */
.personen-row-toggle::before {
  content: "";
  position: absolute;
  inset: calc(-2 * var(--line-thickness-5));
  border: var(--line-thickness-5) solid var(--color-6);
  border-radius: 50%;
  filter: blur(3.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Maße vor der Drehung. Die Spitze sitzt im Entwurf 1.7px aus der
   Mitte in Pfeilrichtung, darum der Versatz. */
.personen-row-toggle .pfeil {
  width: 14.6px;
  height: 24.6px;
  translate: 0 1.7px;
}

/* Überfahren und geöffnet: roter Knopf mit Schein */
.personen-liste > li:hover .personen-row-toggle,
.personen-row[open] .personen-row-toggle {
  color: var(--color-6);
}

.personen-liste > li:hover .personen-row-toggle::before,
.personen-row[open] .personen-row-toggle::before {
  opacity: 1;
}

.personen-row[open] .personen-row-toggle .pfeil {
  transform: rotate(-90deg);
  translate: 0 -1.7px;
}

/* Figma: Bild 264 breit unter dem Namen, Text ab 663 bis 1343 – er
   beginnt schon auf Höhe der Namenszeile (42px unter der Linie) und
   hält zum Knopf Abstand. */
.personen-row-info {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) minmax(0, 680px);
  gap: var(--horizontal-space-4);
  padding-left: var(--page-gutter);
  padding-right: calc(var(--page-gutter) + var(--personen-toggle-size) + var(--horizontal-space-5));
}

.personen-row-media {
  position: relative;
  aspect-ratio: 264 / 312;
  overflow: clip;
  background: var(--color-5);
}

.personen-row-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personen-row-copy {
  grid-column: 3;
  /* nach oben in die Namenszeile, über summary, damit der Text
     auswählbar bleibt und nicht den Eintrag zuklappt */
  position: relative;
  z-index: 2;
  margin-top: calc(42px - var(--personen-row-height));
  padding-bottom: var(--vertical-space-6);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

/* gleiches Absatzmaß wie in der Biografie auf der Personenseite */
.personen-row-copy p + p {
  margin-top: var(--vertical-space-3);
}

/* schmal: Bild über dem Text, der Text bleibt unter dem Namen */
@media only screen and (max-width: 800px) {
  .personen-row-info {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--vertical-space-3);
    padding-right: var(--page-gutter);
  }

  .personen-row-media {
    width: min(100%, 264px);
  }

  .personen-row-copy {
    grid-column: auto;
    margin-top: 0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: clip;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Personen-Detailseite */
.person {
  padding-bottom: var(--vertical-space-10);
}

/* Zwei Hälften über die volle Breite. Linke Spalte in drei Zeilen
   (Name, Portrait, Bildnachweis), damit die Biografie rechts exakt am
   Bildunterrand anschlägt. */
.person-top {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}

/* Rote Mittellinie zwischen Portrait und Biografie, über die ganze Höhe. */
.person-top::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--line-thickness-5);
  transform: translateX(-50%);
  background: var(--color-6);
  pointer-events: none;
}

.person-name {
  grid-column: 1;
  grid-row: 1;
  padding: var(--vertical-space-4) var(--page-gutter) var(--vertical-space-5);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-logo);
}

.person-first,
.person-last {
  display: block;
}

.person-figure {
  display: contents;
  margin: 0;
}

/* Portrait fällt nach links aus dem Satzspiegel heraus, rechts bis zur Linie. */
.person-portrait {
  grid-column: 1;
  grid-row: 2;
}

.person-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.person-credit {
  grid-column: 1;
  grid-row: 3;
  padding: var(--vertical-space-1) var(--page-gutter) 0;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body-m);
}

/* Biografie steht in der rechten Hälfte und schlägt unten am Portrait an. */
.person-aside {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 var(--page-gutter);
}

.person-bio {
  font-size: var(--font-size-body-s);
  line-height: 24px;
}

.person-bio p + p {
  margin-top: var(--vertical-space-3);
}

.person .werke-grid {
  padding-top: 150px;
}

.person-work-year {
  display: block;
  font-size: var(--font-size-caption);
  color: var(--color-8);
}

/* Slideshow (Ausstellungs-Übersicht) */
.slideshow {
  position: relative;
}

.slideshow-slides {
  display: grid;
}

.slideshow-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.slideshow-slide.is-active {
  position: relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s ease, visibility 0s;
}

.slideshow-dots {
  position: absolute;
  left: var(--page-gutter);
  bottom: var(--vertical-space-4);
  display: flex;
  gap: var(--gap-1);
  z-index: 3;
}

.slideshow-dot,
.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: var(--line-thickness-5) solid var(--color-1);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.slideshow-dot.is-active,
.carousel-dot.is-active {
  border-color: var(--color-6);
  background: var(--color-6);
}

/* Kacheln (Weitere Ausstellungen + Archiv) */
/* Die Spur wird um den Kachel-Innenabstand nach außen gezogen und die
   Lücke um denselben Betrag je Seite verkleinert: dadurch stehen die
   Bilder auf 20 / 495 / 970 wie in Figma, bündig mit der Überschrift. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-inline: calc(-1 * var(--tile-inset));
  column-gap: calc(var(--tile-gap) - 2 * var(--tile-inset));
  row-gap: var(--vertical-space-8);
  align-items: start;
}

.tiles > li {
  display: contents;
}

@media only screen and (max-width: 1100px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 800px) {
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tile {
  border: var(--border-width-1) solid transparent;
  transition: border-color 0.2s ease;
}

.tile:hover {
  border-color: var(--color-6);
}

.tile > a {
  display: block;
  color: inherit;
  padding: var(--vertical-space-2);
}

.tile-media {
  margin-bottom: var(--vertical-space-3);
}

.tile-media img {
  width: 100%;
  height: auto;
  display: block;
}

.tile-fixed .tile-media {
  position: relative;
  aspect-ratio: 45 / 32;
  overflow: clip;
  background: var(--color-5);
}

.tile-fixed .tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-label {
  color: var(--color-6);
  margin-bottom: var(--vertical-space-1);
}

.tile-title {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.tile-title .cur {
  display: block;
}

.tile .tag {
  margin-block: var(--vertical-space-3);
  margin-inline: 0;
}

.tile-copy {
  font-size: var(--font-size-body-s);
  line-height: 22px;
}

/* Kachel-Karussell (Weitere Ausstellungen, Weitere Ankäufe, Archiv) */
.carousel {
  /* Figma: 450er Bilder auf 20 / 495 / 970, also 25 Lücke. Die Kachel
     trägt ihren Innenabstand beidseitig mit, darum bleibt als Lücke
     zwischen den Kacheln nur der Rest. */
  --carousel-gap: calc(var(--tile-gap) - 2 * var(--tile-inset));
  /* immer genau drei Kacheln, keine angeschnittene vierte */
  --carousel-visible: 3;
  /* Zone am linken und rechten Bildrand, in der der Pfeil am Zeiger hängt */
  --carousel-hotzone: 160px;
}

.carousel-viewport {
  position: relative;
}

.carousel-track {
  /* Spur um den Kachel-Innenabstand nach außen, damit das erste Bild
     links und das dritte rechts auf dem Seitenrand stehen – bündig mit
     der Überschrift „Archiv →“ darüber. */
  margin-inline: calc(-1 * var(--tile-inset));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible)
  );
  column-gap: var(--carousel-gap);
  /* Alle Kacheln so hoch wie die höchste, damit die Teaser unten
     auf einer Linie stehen. */
  align-items: stretch;
  overflow-x: auto;
  /* overflow-x allein macht auch die y-Achse scrollbar und würde
     das Mausrad der Seite abfangen – die Spur ist nie höher als ihre Kacheln. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Fokusring der Spur nicht am Rand abschneiden */
  padding-bottom: var(--vertical-space-1);
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  scroll-snap-align: start;
}

/* Gleiche Kachelhöhe im Karussell: Bild oben, Teaser unten
   ausgerichtet – egal wie hoch das Bild oder wie kurz der Titel ist. */
.carousel-item .tile,
.carousel-item .tile > a {
  height: 100%;
}

.carousel-item .tile > a {
  display: flex;
  flex-direction: column;
}

/* Figma: Bild → Titel 14, Titel → Tag 24. */
.carousel-item .tile-media {
  flex: 0 0 auto;
  margin-bottom: 14px;
}

.carousel-item .tag {
  margin-top: 24px;
}

/* Titel und Tag bleiben direkt unterm Bild, nur der Teasertext
   wird an den unteren Rand der Kachel geschoben. */
.carousel-item .tile-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.carousel-item .tile-copy {
  margin-top: auto;
}

/* Pfeile liegen auf den Kacheln, links und rechts, vertikal zentriert –
   derselbe lange Pfeil wie bei „weitere Ausstellungen“ (pfeil.php, variant link).
   Ohne feinen Zeiger (Touch) bleibt es bei dieser festen Position. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: block;
  width: 101px;
  height: 21px;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-6);
  cursor: pointer;
}

/* display: block schlägt sonst das hidden-Attribut, mit dem script.js die
   Pfeile abschaltet, wenn die Spur gar nichts zu scrollen hat. */
.carousel-arrow[hidden] {
  display: none;
}

.carousel-arrow .pfeil {
  width: 101px;
  height: 21px;
}

.carousel-prev {
  left: var(--vertical-space-3);
}

.carousel-next {
  right: var(--vertical-space-3);
}

/* Maus und Trackpad: die Schaltfläche wird zur unsichtbaren Zone am
   linken bzw. rechten Bildrand. Darin ersetzt der Pfeil den Mauszeiger
   und hängt an ihm; script.js schreibt --arrow-x/--arrow-y und die Höhe
   des Bildbandes (--carousel-media-height). */
@media (hover: hover) and (pointer: fine) {
  .carousel-arrow {
    top: 0;
    transform: none;
    width: var(--carousel-hotzone);
    height: var(--carousel-media-height, 100%);
    cursor: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .carousel-arrow:hover,
  .carousel-arrow:focus-visible {
    opacity: 1;
  }

  .carousel-prev {
    left: 0;
    --arrow-x: 51px;
  }

  .carousel-next {
    right: 0;
    --arrow-x: calc(var(--carousel-hotzone) - 51px);
  }

  .carousel-arrow .pfeil {
    position: absolute;
    left: 0;
    top: 0;
    /* Der Pfeil sitzt mit seiner Mitte auf dem Zeiger. */
    transform: translate(
      calc(var(--arrow-x) - 50%),
      calc(var(--arrow-y, 50px) - 50%)
    );
    pointer-events: none;
  }

  /* .pfeil-left dreht selbst um 180°, das darf die Position nicht verlieren. */
  .carousel-prev .pfeil {
    transform: translate(
        calc(var(--arrow-x) - 50%),
        calc(var(--arrow-y, 50px) - 50%)
      )
      rotate(180deg);
  }
}

@media only screen and (max-width: 800px) {
  .carousel {
    --carousel-visible: 1;
  }

  /* Eine Kachel pro Bild: jede nur so hoch wie ihr Inhalt. */
  .carousel-track {
    align-items: start;
  }
}

/* Aufmacher der Ankäufe-Übersicht: links Name und Werktitel, rechts das
   Werkbild in einer getönten Fläche bis an den rechten Seitenrand.
   Maße nach Figma (1440): Textspalte bis 740, Bildfläche 700 × 851. */
.ankauf-hero > a {
  display: grid;
  /* Bildspalte 680 + 20 Bleed = 700 wie in Figma, Textspalte endet bei 690. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
  column-gap: var(--horizontal-space-4);
  color: inherit;
}

.ankauf-hero-text {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--vertical-space-5);
  padding-bottom: var(--vertical-space-4);
}

.ankauf-hero-kicker {
  color: var(--color-6);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.ankauf-hero-title {
  font-family: var(--font-family-1);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  margin-top: var(--vertical-space-3);
}

.ankauf-hero-serif .ankauf-hero-title {
  font-family: var(--font-family-2);
}

/* Werktitel und Link stehen am unteren Rand der Textspalte. */
.ankauf-hero-link {
  margin-top: auto;
  padding-top: var(--vertical-space-6);
  max-width: 467px;
  font-size: var(--font-size-body-m);
  line-height: 30px;
}

.ankauf-hero-link .cur {
  display: block;
}

.ankauf-hero-media {
  grid-column: 2;
  /* bis an den Seitenrand, der Gutter von .full wird hier zurückgenommen */
  margin-right: calc(-1 * var(--page-gutter));
  aspect-ratio: 700 / 851;
  display: grid;
  place-items: center;
  padding: var(--vertical-space-10) var(--horizontal-space-5);
  background: var(--color-5);
}

/* Das Bild füllt die Fläche so weit wie möglich, ohne das Seitenverhältnis
   zu verlieren – max-width/max-height allein würden kleine Ableitungen nie
   hochskalieren. */
.ankauf-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

@media only screen and (max-width: 800px) {
  .ankauf-hero > a {
    grid-template-columns: minmax(0, 1fr);
  }

  .ankauf-hero-text,
  .ankauf-hero-media {
    grid-column: 1;
  }

  .ankauf-hero-media {
    margin-left: calc(-1 * var(--page-gutter));
    aspect-ratio: 4 / 3;
    padding: var(--vertical-space-6) var(--horizontal-space-3);
  }
}

/* Abschnitt mit Überschrift-Link und Karussell zwischen zwei Linien
   (Weitere Ausstellungen, Weitere Ankäufe, Archiv auf Einblick und am
   Fuß eines Beitrags). Figma (Darstellung Carousel): Linie → Überschrift
   25, Überschrift → Bild 25, Teaser → Linie 22. Die Kachel trägt ihren
   Innenabstand (--tile-inset) oben und unten mit, die Spur unten noch
   Platz für den Fokusring – beides wird von den Abständen abgezogen. */
.carousel-section {
  padding-top: var(--tile-gap);
  padding-bottom: calc(22px - var(--tile-inset) - var(--vertical-space-1));
}

.carousel-section .carousel {
  margin-top: calc(var(--tile-gap) - var(--tile-inset));
}

/* Archiv-Seite */
/* Die Jahre stehen mit festem Abstand von links (Figma). */
.archiv-years {
  gap: var(--horizontal-space-4);
}

/* Figma: Linie → Jahresüberschrift 48 */
.archiv-groups {
  padding-top: var(--vertical-space-7);
}

.archiv-group {
  padding-bottom: var(--vertical-space-10);
}

.archiv-group-title {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -1.4px;
  margin-bottom: var(--vertical-space-6);
}

/* Archiv-Karussell am Fuß der Einblick-Übersicht. */
/* Beitragskopf: Kicker und Überschrift, darunter die Inhaltsmodule. Das
   Aufmacherbild gehört nur zur Ankaufsseite. */
.article {
  padding-top: var(--vertical-space-5);
  padding-bottom: var(--vertical-space-10);
}

.article-kicker {
  color: var(--color-6);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.article-title {
  font-family: var(--font-family-1);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

/* Figma setzt Kicker und Überschrift 50px auseinander. */
.article-kicker + .article-title {
  margin-top: var(--vertical-space-4);
}

.article-title-serif {
  font-family: var(--font-family-2);
}

.article-cover {
  margin-top: var(--vertical-space-6);
}

.article-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* Werkangaben unter dem Aufmacherbild eines Ankaufs. */
.article-caption {
  margin-top: var(--vertical-space-2);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

/* Der erste Block schließt direkt an die Überschrift an (Figma: 75px). */
.article .blocks {
  padding-top: var(--vertical-space-9);
}

/* ---------------------------------------------------------------------------
   Ankaufsseite (Figma „Ankäufe“, 1440er Raster)
   Überschrift, darunter das Werk über 1034 von 1400, Werkangaben links
   darunter. Weitere Medien stehen rechts, ihre Bildunterschrift steht am
   linken Seitenrand auf Höhe der Bildunterkante. Fließtext steht links.
   ------------------------------------------------------------------------- */
.article-ankauf .article-title {
  margin-top: var(--vertical-space-3);
}

/* Das Werk steht in einer getönten Fläche über 1034 von 1400 – gleiche
   Behandlung wie im Aufmacher, damit hohe Formate nicht die halbe Seite
   füllen. */
.article-ankauf .article-cover {
  margin-top: var(--vertical-space-4);
  width: 73.86%;
}

/* min-height und die minmax-Spur halten die Fläche auf dem Seitenverhältnis,
   sonst schiebt ein Hochformat sie in die Höhe. */
.article-ankauf .article-cover .article-cover-frame {
  aspect-ratio: 1034 / 1179;
  min-height: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: var(--vertical-space-9) var(--horizontal-space-6);
  background: var(--color-5);
}

.article-ankauf .article-cover img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* Das Aufmacherbild bringt seine Angaben schon mit, der erste Block
   schließt darum ohne zusätzlichen Vorlauf an. */
.article-ankauf .blocks {
  padding-top: 0;
}

.article-ankauf .block-media-inset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 41.07%);
  column-gap: var(--block-gap);
  align-items: end;
}

.article-ankauf .block-media-inset .block-media-frame {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  width: 100%;
}

.article-ankauf .block-media-inset figcaption {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin-top: 0;
}

.article-ankauf .block-text .block-column {
  grid-column: 1;
}

@media only screen and (max-width: 800px) {
  .article-ankauf .article-cover {
    width: 100%;
  }

  .article-ankauf .block-media-inset {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-ankauf .block-media-inset .block-media-frame,
  .article-ankauf .block-media-inset figcaption {
    grid-column: 1;
  }

  .article-ankauf .block-media-inset .block-media-frame {
    grid-row: 1;
  }

  .article-ankauf .block-media-inset figcaption {
    grid-row: 2;
    margin-top: var(--vertical-space-2);
  }
}

/* ---------------------------------------------------------------------------
   Inhaltsmodule (Kirby-Blocks)
   Grundraster: zwei gleich breite Spalten. Fließtext steht rechts, große
   Aussagen und Medien nehmen die volle Breite, das Interview nutzt beide
   Spalten mit einer roten Trennlinie dazwischen.
   ------------------------------------------------------------------------- */

.blocks {
  --block-columns: repeat(2, minmax(0, 1fr));
  --block-gap: var(--horizontal-space-5);
  padding-bottom: var(--vertical-space-10);
}

.block + .block {
  margin-top: var(--vertical-space-9);
}

/* Einleitung: rot, über die volle Breite – im Figma derselbe Grad wie die
   Aussage, nur in Rot. */
.block-lead p {
  color: var(--color-6);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.02em;
}

/* Aussage: schwarz, über die volle Breite. */
.block-statement p {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.02em;
}

/* Fließtext: rechte Spalte. */
.block-text {
  display: grid;
  grid-template-columns: var(--block-columns);
  column-gap: var(--block-gap);
}

.block-text .block-column {
  grid-column: 2;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

/* Im Figma trennt eine leere Zeile die Absätze. */
.block-text p + p {
  margin-top: var(--line-height-body-m);
}

.block-text a {
  color: var(--color-6);
}

/* Medien: eingerückt, halbe Breite links oder über die volle Breite. */
.block-media img,
.block-video video,
.block-video img {
  display: block;
  width: 100%;
  height: auto;
}

.block-media figcaption,
.block-video figcaption {
  margin-top: var(--vertical-space-2);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

/* Eingerückt: das Bild steht mittig über 66,6 % der Satzbreite, der
   Bildnachweis am linken Seitenrand auf Höhe der Bildunterkante. */
.block-media-inset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 66.6%) minmax(0, 1fr);
  align-items: end;
}

.block-media-inset .block-media-frame {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  width: 100%;
}

.block-media-inset figcaption {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin-top: 0;
}

/* Halbe Breite: das Bild füllt die linke Rasterspalte, der Fließtext
   daneben läuft ab der Bildunterkante weiter. */
.block-media-half .block-media-frame {
  width: calc(50% - var(--block-gap) / 2);
}

/* Video: volle Breite mit Abspielsymbol in der Mitte. */
.block-video-frame {
  position: relative;
  background: var(--color-1);
}

.block-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 133px;
  height: 115px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.block-video-play img {
  width: 100%;
  height: 100%;
}

/* Ein Video mit Bedienleiste bringt sein eigenes Symbol mit. */
.block-video-frame:has(video) .block-video-play {
  display: none;
}

/* Liste: Zeilen mit Trennlinien, die bis an den Seitenrand laufen. Über der
   ersten Zeile steht keine Linie. */
.block-liste ul {
  list-style: none;
}

.block-liste li {
  margin: 0 calc(-1 * var(--page-gutter));
  padding: 0 var(--page-gutter);
  border-bottom: var(--line-thickness-5) solid var(--color-1);
}

.block-liste-row {
  display: grid;
  /* Die Kennung braucht wenig Platz, der Titel steht direkt daneben. */
  grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  column-gap: var(--block-gap);
  align-items: baseline;
  /* Figma: 70px Zeile in einer 138px hohen Zeile. */
  padding: 34px 0;
  color: inherit;
}

.block-liste-label {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.02em;
}

.block-liste-title {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.02em;
}

.block-liste a:hover .block-liste-title {
  color: var(--color-6);
}

/* Interview: Frage über die ganze Breite, Antwort darunter in der rechten
   Spalte, durchgehende rote Linie dazwischen. */
.block-interview {
  position: relative;
  --interview-offset: var(--vertical-space-5);
}

.block-interview::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--block-gap) / 2);
  width: var(--line-thickness-5);
  background: var(--color-6);
}

.block-interview-item {
  position: relative;
}

.block-interview-item + .block-interview-item {
  margin-top: var(--vertical-space-10);
}

.block-interview dt {
  padding-bottom: var(--vertical-space-3);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: -0.02em;
}

.block-interview dd {
  width: calc(50% - var(--block-gap) / 2);
  margin: 0 0 0 auto;
  padding-top: var(--interview-offset);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.block-interview dd p + p {
  margin-top: var(--vertical-space-5);
}

/* Fragen (Ausstellung): große Überschrift links, wer antwortet rechts auf
   Höhe der letzten Zeile. Die Fragen laufen über die ganze Breite, die
   Antworten stehen tiefer in der rechten Spalte. Die rote Mittellinie geht
   von der Linie über dem Block bis zu seinem Ende. */
.block-fragen {
  position: relative;
  padding-top: var(--vertical-space-6);
  padding-bottom: calc(2 * var(--vertical-space-10));
}

.block-fragen::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--line-thickness-5) / 2);
  width: var(--line-thickness-5);
  background: var(--color-6);
}

.block + .block-fragen,
.block-fragen + .block {
  margin-top: 0;
}

.blocks:has(> .block-fragen:last-child) {
  padding-bottom: 0;
}

.block-fragen-head {
  display: grid;
  grid-template-columns: var(--block-columns);
  column-gap: var(--block-gap);
  align-items: end;
  align-items: last baseline;
}

.block-fragen-title {
  grid-column: 1;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.block-fragen-name {
  grid-column: 2;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.block-fragen-items,
.block-fragen-foot {
  margin-top: calc(var(--vertical-space-10) + var(--vertical-space-7));
}

.block-fragen-head + .block-fragen-items {
  margin-top: calc(var(--vertical-space-10) + var(--vertical-space-7));
}

.block-fragen-item + .block-fragen-item {
  margin-top: calc(var(--vertical-space-10) + var(--vertical-space-7));
}

.block-fragen-item dt {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.03em;
}

.block-fragen-item dd {
  width: calc(50% - var(--block-gap) / 2);
  margin: calc(2 * var(--vertical-space-10)) 0 0 auto;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.block-fragen-item dd p + p {
  margin-top: var(--line-height-body-m);
}

.block-fragen-item dd a {
  color: var(--color-6);
}

.block-fragen-item dd em {
  font-style: italic;
}

.block-fragen-foot {
  width: calc(50% - var(--block-gap) / 2);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

@media only screen and (max-width: 800px) {
  .block-fragen {
    padding-bottom: var(--vertical-space-10);
  }

  .block-fragen::before {
    display: none;
  }

  .block-fragen-head {
    display: block;
  }

  .block-fragen-name {
    margin-top: var(--vertical-space-4);
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }

  .block-fragen-items,
  .block-fragen-foot,
  .block-fragen-head + .block-fragen-items,
  .block-fragen-item + .block-fragen-item {
    margin-top: var(--vertical-space-8);
  }

  .block-fragen-item dt {
    font-size: min(var(--font-size-h2), 9vw);
    line-height: 1.1;
  }

  .block-fragen-item dd,
  .block-fragen-foot {
    width: 100%;
    margin-left: 0;
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }

  .block-fragen-item dd {
    margin-top: var(--vertical-space-4);
  }

  .block-fragen-item dd p + p {
    margin-top: 22px;
  }
}

/* ---------------------------------------------------------------------------
   Überschriften stehen unscharf, bis sie in den Viewport laufen. Die Klasse
   greift nur, wenn script.js sie eingeschaltet hat – ohne JS bleibt alles
   scharf.
   ------------------------------------------------------------------------- */
.js-reveal .reveal {
  filter: blur(var(--reveal-blur));
  transition: filter var(--transition-1) ease-out;
}

.js-reveal .reveal.is-revealed {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    filter: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Titel & Text: große Überschrift links, kleiner Text rechts, dazwischen die
   rote Linie wie im Interview.
   ------------------------------------------------------------------------- */
.block-titeltext {
  position: relative;
  display: grid;
  grid-template-columns: var(--block-columns);
  column-gap: var(--block-gap);
}

.block-titeltext::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--block-gap) / 2);
  width: var(--line-thickness-5);
  background: var(--color-6);
}

/* Der Abstand steckt als Padding in den Spalten statt als Margin zwischen den
   Blöcken – so läuft die Linie über mehrere Titel & Text-Blöcke durch. */
.block-titeltext + .block-titeltext {
  margin-top: 0;
}

.block-titeltext > * {
  padding-top: var(--vertical-space-6);
  padding-bottom: var(--vertical-space-9);
}

.block-titeltext:last-child > * {
  padding-bottom: var(--vertical-space-10);
}

.blocks:has(> .block-titeltext:last-child) {
  padding-bottom: 0;
}

.block-titeltext-title {
  grid-column: 1;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.02em;
}

.block-titeltext .block-column {
  grid-column: 2;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.block-titeltext .block-column p + p {
  margin-top: var(--line-height-body-m);
}

.block-titeltext .block-column a {
  color: var(--color-6);
}

/* ---------------------------------------------------------------------------
   Story-Module (Figma „Stories V1“)
   Zwei Spalten über 680 von 1400 mit 40er Abstand. Überschrift & Lauftext,
   einzelne Bilder links, rechts oder über die volle Breite und das
   Bildraster. Die Redaktion ordnet sie frei an und spiegelt sie per Schalter.
   Bildunterschriften werden auf der Seite durchgezählt: (01), (02) …
   ------------------------------------------------------------------------- */
.blocks {
  counter-reset: story-caption;
}

.story-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.story-caption::before {
  counter-increment: story-caption;
  content: "(" counter(story-caption, decimal-leading-zero) ")";
  display: block;
}

.story-caption em,
.story-caption i {
  font-style: italic;
}

/* Überschrift & Lauftext: Überschrift in der einen Spalte, der Lauftext
   daneben in Body S. */
.block-kapitel {
  display: grid;
  grid-template-columns: var(--block-columns);
  column-gap: var(--block-gap);
  align-items: start;
}

.block-kapitel-title {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.03em;
}

.block-kapitel-title-serif {
  font-family: var(--font-family-2);
}

.block-kapitel-text {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--font-size-body-s);
  line-height: 24px;
}

/* Im Figma trennt eine leere Zeile die Absätze. */
.block-kapitel-text p + p {
  margin-top: 24px;
}

.block-kapitel-text a {
  color: var(--color-6);
}

.block-kapitel-text em {
  font-style: italic;
}

.block-kapitel-right .block-kapitel-title {
  grid-column: 2;
}

.block-kapitel-right .block-kapitel-text {
  grid-column: 1;
}

/* Bild & Unterschrift: das Bild füllt eine Spalte oder beide. Gegenüber
   steht die Unterschrift auf Höhe der Bildunterkante. */
.block-bild {
  display: grid;
  grid-template-columns: var(--block-columns);
  column-gap: var(--block-gap);
  align-items: end;
}

.block-bild img,
.block-bildraster img {
  display: block;
  width: 100%;
  height: auto;
}

.block-bild-frame {
  grid-row: 1;
  grid-column: 2;
}

.block-bild-left .block-bild-frame {
  grid-column: 1;
}

.block-bild-wide .block-bild-frame {
  grid-column: 1 / -1;
}

.block-bild-caption-beside figcaption {
  grid-row: 1;
  grid-column: 1;
}

.block-bild-left.block-bild-caption-beside figcaption {
  grid-column: 2;
}

.block-bild-caption-below figcaption {
  grid-row: 2;
  grid-column: 2;
  margin-top: var(--vertical-space-2);
}

.block-bild-left.block-bild-caption-below figcaption,
.block-bild-wide figcaption {
  grid-column: 1;
}

/* Bildraster: zwei Bilder je Zeile, Unterschriften unter jedem Bild oder
   gesammelt unter dem Raster in derselben Reihenfolge. */
.block-bildraster-grid {
  display: grid;
  grid-template-columns: var(--block-columns);
  gap: var(--block-gap);
  align-items: start;
}

.block-bildraster-item figcaption {
  margin-top: var(--vertical-space-2);
}

.block-bildraster-captions {
  display: grid;
  grid-template-columns: var(--block-columns);
  column-gap: var(--block-gap);
  row-gap: var(--vertical-space-6);
  margin-top: var(--vertical-space-4);
}

/* Falzlinie: auf Story-Seiten läuft ein Bund wie in einer aufgeschlagenen
   Publikation senkrecht durch die Seitenmitte, auch über die Bilder. */
/* Story-Seite: die Blöcke beginnen direkt unter dem Kopf (Figma: 36px). */
.story {
  padding-top: var(--vertical-space-5);
}

.story-fold {
  position: relative;
}

.story-fold::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 15px);
  width: 30px;
  background: linear-gradient(to right,
    #fff 0,
    #fafafa 6px,
    #f2f2f2 8px,
    #e4e4e5 10px,
    #cccccd 12px,
    #a6a7aa 14px,
    #787a7e 15px,
    #adaeb1 17px,
    #d1d1d2 19px,
    #e7e7e8 21px,
    #f4f4f4 23px,
    #fafafa 25px,
    #fff 28px);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

@media only screen and (max-width: 800px) {
  .story-fold::after {
    display: none;
  }

  /* Ohne zweite Spalte steht alles untereinander, die Unterschrift unter
     dem Bild. */
  .block-kapitel,
  .block-bild {
    display: block;
  }

  .block-kapitel-title {
    font-size: min(var(--font-size-h2), 10vw);
    line-height: 1.08;
  }

  .block-kapitel-title + .block-kapitel-text {
    margin-top: var(--vertical-space-4);
  }

  .block-bild figcaption {
    margin-top: var(--vertical-space-2);
  }

  .block-bildraster-grid {
    row-gap: var(--vertical-space-5);
  }

  .block-bildraster-captions {
    row-gap: var(--vertical-space-4);
  }
}

@media only screen and (max-width: 800px) {
  .blocks {
    --block-columns: minmax(0, 1fr);
    --block-gap: 0px;
  }

  .block-lead p,
  .block-statement p {
    font-size: min(var(--font-size-h2), 10vw);
    line-height: 1.08;
  }

  .block-text .block-column {
    grid-column: 1;
  }

  .block-text .block-column,
  .block-interview dd {
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }

  .block-text p + p {
    margin-top: var(--vertical-space-4);
  }

  /* Ohne zweite Spalte steht der Bildnachweis wieder unter dem Bild. */
  .block-media-inset {
    display: block;
  }

  .block-media-inset .block-media-frame,
  .block-media-half .block-media-frame {
    width: 100%;
  }

  .block-media-inset figcaption {
    margin-top: var(--vertical-space-2);
  }

  .block-liste-row {
    grid-template-columns: minmax(0, 90px) minmax(0, 1fr);
    column-gap: var(--horizontal-space-2);
    padding: var(--vertical-space-4) 0;
  }

  .block-liste-label,
  .block-liste-title {
    font-size: min(var(--font-size-h2), 7vw);
    line-height: 1.2;
  }

  /* Ohne zweite Spalte gibt es nichts, was die Linie trennen könnte. */
  .block-interview::before,
  .block-titeltext::before {
    display: none;
  }

  .block-interview {
    --interview-offset: 0px;
  }

  .block-interview dt {
    margin-bottom: var(--vertical-space-4);
    font-size: min(var(--font-size-h3), 9vw);
    line-height: 1.1;
  }

  .block-titeltext-title,
  .block-titeltext .block-column {
    grid-column: 1;
  }

  .block-titeltext-title {
    margin-bottom: var(--vertical-space-4);
    font-size: min(var(--font-size-h2), 10vw);
    line-height: 1.08;
  }

  /* Untereinander braucht nur die Textspalte den Abstand nach unten. */
  .block-titeltext > .block-titeltext-title {
    padding-bottom: 0;
  }

  .block-titeltext > .block-column {
    padding-top: 0;
  }

  .block-titeltext .block-column {
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }

  .block-titeltext .block-column p + p {
    margin-top: var(--vertical-space-4);
  }

  .block-interview dd {
    width: 100%;
    margin-left: 0;
    font-size: var(--font-size-body-s);
    line-height: 22px;
  }

  .block-video-play {
    width: 66px;
    height: 57px;
  }
}

/* ---------------------------------------------------------------------------
   Mobiles Menü
   Bis 800px liegt die Navigation hinter dem Toggle im Kopf. Geöffnet klappt
   sie als Feld unter der Logo-Zeile auf: erst die Hilfsmittel (Sprache,
   Leichte Sprache, Suche) untereinander, darunter die Gruppen. Unterpunkte
   zeigt die Gruppe der aktuellen Seite und jede per Klick aufgeklappte.
   ------------------------------------------------------------------------- */

/* Suche: Overlay unter dem Kopf. Oben das Eingabefeld in Logogröße,
   darunter die Treffer mit den Kacheln der Übersichten. Die Oberkante
   setzt script.js auf die Unterkante des Kopfs (--search-top). */
.search {
  position: fixed;
  inset: var(--search-top, 0px) 0 0 0;
  /* über den Teasern (bis 4), unter dem Kopf (6) */
  z-index: 5;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search[hidden] {
  display: none;
}

html.search-open {
  overflow: hidden;
}

.search-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}

.search-input {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-family: var(--font-family-1);
  font-size: var(--font-size-logo);
  line-height: 1;
  letter-spacing: var(--letter-spacing-logo);
  color: var(--color-1);
  appearance: none;
}

.search-input:focus {
  outline: none;
}

.search-input::placeholder {
  color: var(--color-9);
  opacity: 1;
}

.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  appearance: none;
}

.search-results {
  padding-top: var(--vertical-space-4);
}

.search-group-title {
  font-size: var(--font-size-body-s);
  color: var(--color-6);
  margin-bottom: var(--vertical-space-3);
}

.search-empty {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  padding-bottom: var(--vertical-space-10);
}

.search-group .tiles {
  padding-bottom: var(--vertical-space-10);
}

.nav-toggle {
  display: none;
}

@media only screen and (max-width: 800px) {
  header {
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0;
    padding-bottom: var(--vertical-space-2);
  }

  /* Auf schmalen Schirmen immer das kurze Logo, an der Oberkante. */
  .logo {
    font-size: var(--font-size-h2);
    margin-top: var(--logo-trim);
  }

  .logo-full {
    display: none;
  }

  .logo-compact {
    display: inline;
  }

  .nav-toggle {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    display: block;
    width: 34px;
    height: var(--line-thickness-5);
    background: var(--color-1);
  }

  .nav-toggle-icon {
    position: relative;
    margin: 0 auto;
  }

  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle-icon::before {
    top: -9px;
  }

  .nav-toggle-icon::after {
    top: 9px;
  }

  /* Geöffnet wird aus den drei Strichen ein Kreuz. */
  header.is-open .nav-toggle-icon {
    background: transparent;
  }

  header.is-open .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  header.is-open .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  header nav {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
  }

  /* Das geöffnete Menü liegt als Overlay über der Seite – der Inhalt darunter
     rückt weder beim Öffnen noch beim Schließen. */
  header.is-open nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    align-items: stretch;
    background: #fff;
    padding: 0 var(--page-gutter) var(--vertical-space-4);
    border-bottom: var(--shadow-border);
    max-height: calc(100vh - var(--font-size-h2) - 4 * var(--vertical-space-2));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Hilfsmittel als eigene Zeile über den Gruppen: Sprachwechsel links,
     Leichte Sprache und Suche rechts. */
  header.is-open .nav-utils {
    order: -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: var(--vertical-space-3) 0 var(--vertical-space-4);
    column-gap: var(--horizontal-space-4);
  }

  header.is-open .nav-langs {
    flex-direction: row;
    gap: var(--horizontal-space-2);
    margin-right: auto;
  }

  header.is-open .nav-easy,
  header.is-open .nav-search {
    margin-top: 0;
    margin-left: 0;
  }

  header.is-open .nav-group {
    padding-top: var(--vertical-space-3);
  }

  header.is-open .nav-group:last-of-type {
    padding-bottom: var(--vertical-space-5);
  }

  /* Die Gruppentitel skalieren mit, damit auch „Künstler:innen“ in die
     Zeile passt. */
  header.is-open .nav-group-label {
    font-size: min(var(--font-size-h2), 11vw);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0;
  }

  /* Unterpunkte erscheinen nach Klick auf den Gruppentitel – und von
     Anfang an in der Gruppe der aktuellen Seite. */
  header.is-open .nav-group a:not(.nav-group-label) {
    font-size: var(--font-size-body-m);
    line-height: 1.25;
  }

  header.is-open .nav-sub,
  header.is-open .nav-sub a {
    width: auto;
  }

  header.is-open .nav-sub a:last-child {
    margin-bottom: 0;
  }

  /* Der gescrollte Kopf darf das geöffnete Menü nicht wieder zusammenklappen. */
  header.is-open.is-compact nav {
    display: flex;
  }

  /* Sperre am Wurzelelement: am body würde der Browser die Seite beim
     Fokussieren des Knopfs seitlich verschieben. */
  html.nav-open {
    overflow: hidden;
  }

  /* Auf schmalen Schirmen folgt das Suchfeld dem kurzen Logo. */
  .search-input {
    font-size: var(--font-size-h2);
    padding-block: var(--vertical-space-2);
  }
}