/* ---------------------------------------------------------------- Basis */

:root {
  --fg: #000;
  --bg: #fff;
  --line: 1.25rem;                              /* Zeilenhöhe = 20px */
  --edge: 0.5rem;                               /* Abstand der Texte zum Rand */
  --bar: calc(var(--line) + 2 * var(--edge));   /* Höhe einer Textleiste = 2.25rem */
  --space: 1.25rem;                             /* allgemeiner Abstand */
  --titel-breite: 5.25rem;                      /* Breite von „Gerd Hötter“ oben links */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;                              /* 1rem = 16px */
  line-height: var(--line);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, address, button, figure, figcaption {
  font: inherit;
  line-height: inherit;
}

ul, ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a,
button {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a:hover,
a[aria-current],
button:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.2rem;
}

:focus-visible {
  outline: 0.0625rem solid var(--fg);
  outline-offset: 0.1875rem;
}

[hidden] {
  display: none !important;
}

/* nur für Screenreader */
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- Menü & Fußzeile */

.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 var(--space);
  padding: var(--edge);
}

/* obere Leiste: fixiert, nur Text */
.bar--top {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.bar--top a {
  pointer-events: auto;
}

/* Seitentitel auf der Startseite nicht als „aktuell“ unterstreichen */
.bar--top > a[aria-current]:not(:hover) {
  text-decoration: none;
}

.menu,
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space);
}

/* ------------------------------------------- Startseite: Serien-Bildstreifen */

/* Seite rastet an den Serien ein; die fixierte Leiste oben wird freigehalten */
:root:has(body.serien) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--bar);
}

.serie {
  --h: 70vh;                                         /* Höhe einer Serie */
  --caption: calc(2 * var(--line) + var(--edge));    /* Platz für bis zu zwei Zeilen Bildangaben */
  --img-h: calc(var(--h) - var(--bar) - var(--caption));
  height: var(--h);
  margin-bottom: 2rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@supports (height: 1dvh) {
  .serie {
    --h: 70dvh;
  }
}

.serie:first-child {
  margin-top: var(--bar);
}

/* Werkseite: Streifen über die ganze Fensterhöhe */
.serien--einzeln .serie {
  --h: calc(100vh - var(--bar));
}

@supports (height: 1dvh) {
  .serien--einzeln .serie {
    --h: calc(100dvh - var(--bar));
  }
}

/* horizontaler Streifen, Werke direkt nebeneinander */
.streifen {
  display: flex;
  align-items: flex-start;
  gap: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--edge);
  padding: 0 var(--edge);
  scrollbar-width: none;
}

.streifen::-webkit-scrollbar {
  display: none;
}

.werk {
  flex: none;
  scroll-snap-align: start;
}

.werk a {
  display: block;
}

/* Pfeile über jeder Serie */
.pfeile {
  display: flex;
  gap: var(--edge);
}

.pfeile button {
  padding: 0 0.25rem;
}

.pfeile button:hover {
  text-decoration: none;
  opacity: 0.5;
}

.werk img {
  /* gleiche Höhe für alle; höchstens 75 % der Fensterbreite, damit das nächste Werk sichtbar bleibt */
  height: min(var(--img-h), calc(75vw / var(--ratio)));
  width: auto;
  max-width: none;
  aspect-ratio: var(--ratio);
  background: #f2f2f2;
}

.werk figcaption {
  /* Titel, Jahr, Medium, Maße nebeneinander; bei schmalen Bildern Umbruch in eine zweite Zeile */
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space);
  padding: var(--edge) var(--space) 0 0;
  max-width: min(var(--img-h) * var(--ratio), 75vw);
  max-height: var(--caption);
  overflow: hidden;
}

.werk figcaption span {
  white-space: nowrap;
}

.serien .footer {
  scroll-snap-align: end;
}

/* ------------------------------------------------- Einzelansicht eines Werks */

.passepartout {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  padding-top: var(--bar);
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--bar);
  container-type: size;
}

/* Werk so groß wie möglich */
.stage__bild {
  width: min(100cqw, 100cqh * var(--ratio));
  height: auto;
  aspect-ratio: var(--ratio);
}

.stage__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.stage__nav:focus-visible {
  outline: none;
}

.stage__nav--prev {
  left: 0;
  cursor: w-resize;
}

.stage__nav--next {
  right: 0;
  cursor: e-resize;
}

.zaehler {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- Serienansicht: alle Werke in einer Reihe */

.reihe-seite {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  padding-top: var(--bar);
}

.reihe {
  --gap: var(--edge);
  /* gemeinsame Bildhöhe: Breite ohne Abstände geteilt durch die Summe der Seitenverhältnisse,
     höchstens so hoch wie der verfügbare Platz */
  --hoehe: min(
    (100vw - 2 * var(--edge) - (var(--anzahl) - 1) * var(--gap)) / var(--summe),
    100dvh - 2 * var(--bar) - 2rem
  );
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  min-height: 0;
  padding: 0 var(--edge);
}

.reihe__werk img {
  height: var(--hoehe);
  width: auto;
  max-width: none;
  aspect-ratio: var(--ratio);
}

/* mobil: untereinander, gemeinsame Breite aus der Fensterhöhe */
@media (max-width: 45rem) {
  .reihe {
    --breite: min(
      (100dvh - 2 * var(--bar) - var(--line) - 1rem - (var(--anzahl) - 1) * var(--gap)) / var(--summe-kehrwert),
      100vw - 2 * var(--edge)
    );
    flex-direction: column;
    padding: var(--edge) 0;
  }

  .reihe__werk img {
    width: var(--breite);
    height: auto;
  }
}

/* ------------------------------------------- Werke: Liste & Kontaktabzüge */

.ansichten a:not([aria-current]) {
  color: inherit;
}

.intro {
  margin-bottom: var(--line);
}

.section__body--breit,
.section__body:has(.index) {
  max-width: 60rem;
}

.index a {
  display: grid;
  grid-template-columns: 3fr 1fr 3fr 2fr;
  gap: 0 1rem;
}

/* Miniatur beim Hover über einen Eintrag (vorschau.js) */
.vorschau {
  position: fixed;
  z-index: 5;
  object-fit: cover;
  background: #f2f2f2;
  pointer-events: none;
  visibility: hidden;
}

.vorschau.is-visible {
  visibility: visible;
}

/* Kontaktabzüge: alle Werke gleich hoch, nebeneinander */
.abzuege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edge);
  --hoehe: 8rem;
}

.abzuege a {
  display: block;
  height: var(--hoehe);
  width: calc(var(--hoehe) * var(--ratio));
}

.abzuege img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f2f2f2;
}

@media (max-width: 45rem) {
  .abzuege {
    --hoehe: 5rem;
  }

  .index a {
    grid-template-columns: 1fr auto;
  }

  .index a span:nth-child(n + 3) {
    display: none;
  }
}

/* ----------------------------------------------------------- Textseiten */

.sections {
  padding: calc(var(--bar) + 2.5rem) var(--edge) 3.75rem;
}

.section {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 3fr;
  gap: 0 var(--space);
}

.section + .section {
  margin-top: 3.75rem;
}

.section__body {
  max-width: 40rem;
  font-style: normal;
}

.prose > * + * {
  margin-top: var(--line);
}

.prose h2,
.prose h3 {
  margin-top: 2.5rem;
}

.prose a {
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.2rem;
}

.prose ul > li::before {
  content: "– ";
}

.rows {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0 var(--space);
}

.rows dd + dt,
.rows dd + dt + dd {
  margin-top: var(--edge);
}

.portrait {
  width: 20rem;
}

.atelier-bild {
  width: 100%;
  margin-top: var(--line);
}

address {
  font-style: normal;
}

/* auf breiten Bildschirmen beginnen die Kategorien rechts neben dem fixierten Seitentitel,
   damit sie beim Scrollen an ihm vorbeilaufen statt darunter */
@media (min-width: 64rem) {
  .sections {
    padding-left: calc(var(--edge) + var(--titel-breite) + var(--space));
  }
}

@media (max-width: 45rem) {
  .section {
    grid-template-columns: 1fr;
  }

  .section__label {
    margin-bottom: var(--line);
  }
}