/* ==========================================================================
   Fonts — selbst gehostet, keine externen Requests.

   EB Garamond (SIL Open Font License) traegt die ganze Seite: Seitentitel,
   Ueberschriften, Fliesstext, Werkangaben, Navigation. Eingebunden als
   variable Schrift mit der Gewichtsachse 400-800 — deshalb steht in
   @font-face eine Gewichtsspanne statt eines einzelnen Werts; jedes
   font-weight dazwischen wird echt interpoliert und braucht keine eigene
   Datei. Auf Latin beschnitten (rund 120 KB je Schnitt).

   --font-serif und --font-sans zeigen beide auf diese Familie. Die zwei
   Variablen bleiben getrennt, weil das Stylesheet an vielen Stellen zwischen
   Auszeichnung und Lesetext unterscheidet und sich das so jederzeit wieder
   trennen laesst.

   Der System-Stack bleibt als --font-system-sans / --font-system-serif
   erhalten: er traegt, solange die Schrift laedt, und die Buchansicht
   »Die Fuge« setzt ihn in css/fuge.css bewusst wieder ein.
   ========================================================================== */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond/EBGaramond-Variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond/EBGaramond-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-system-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-system-serif: Georgia, "Times New Roman", serif;

  --font-sans: "EB Garamond", var(--font-system-serif);
  --font-serif: "EB Garamond", var(--font-system-serif);

  --color-bg: #f6f1e6;

  /* Leinwandstruktur des Seitengrundes.
     Kett- und Schussfäden als zwei gekreuzte, sich wiederholende Verläufe,
     darüber Korn (Faser) und eine grobe Wolkigkeit, damit das Gewebe nicht
     mechanisch gleichmäßig wirkt. Beides als SVG-Turbulenz inline, kein Bild.
     Der Grundton liegt heller als --color-bg, weil das Gewebe die Fläche
     abdunkelt; im Mittel kommt wieder #f6f1e6 heraus. */
  --leinwand-grund: #fdf9f0;
  /* Das Gewebe ist gezeichnet und wird per feDisplacementMap leicht aus der
     Flucht gebracht: die Faeden laufen dadurch nicht schnurgerade, sondern
     schwanken um Bruchteile eines Pixels — wie bei echtem Leinen. Vorher waren
     es zwei gekreuzte repeating-linear-gradient; die sind mathematisch exakt
     und sahen deshalb steril aus. Welle 2.8: darunter sieht man nichts,
     darueber (ab etwa 4) fangen die Faeden an zu schlieren.
     Teilung 4.5px wie vorher; die Faeden sind zusaetzlich leicht weichgezeichnet
     (feGaussianBlur 0.25), sonst sind gezeichnete Striche haerter als der
     Farbverlauf vorher und das Gewebe wirkt wie Millimeterpapier. */
  --leinwand-gewebe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='450'%3E%3Cfilter id='v' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.022' numOctaves='2' seed='4' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.8' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='0.25'/%3E%3C/filter%3E%3Cg filter='url(%23v)' stroke='rgb(150,122,78)' stroke-width='1.5' fill='none'%3E%3Cpath d='M0.0 -14V464M4.5 -14V464M9.0 -14V464M13.5 -14V464M18.0 -14V464M22.5 -14V464M27.0 -14V464M31.5 -14V464M36.0 -14V464M40.5 -14V464M45.0 -14V464M49.5 -14V464M54.0 -14V464M58.5 -14V464M63.0 -14V464M67.5 -14V464M72.0 -14V464M76.5 -14V464M81.0 -14V464M85.5 -14V464M90.0 -14V464M94.5 -14V464M99.0 -14V464M103.5 -14V464M108.0 -14V464M112.5 -14V464M117.0 -14V464M121.5 -14V464M126.0 -14V464M130.5 -14V464M135.0 -14V464M139.5 -14V464M144.0 -14V464M148.5 -14V464M153.0 -14V464M157.5 -14V464M162.0 -14V464M166.5 -14V464M171.0 -14V464M175.5 -14V464M180.0 -14V464M184.5 -14V464M189.0 -14V464M193.5 -14V464M198.0 -14V464M202.5 -14V464M207.0 -14V464M211.5 -14V464M216.0 -14V464M220.5 -14V464M225.0 -14V464M229.5 -14V464M234.0 -14V464M238.5 -14V464M243.0 -14V464M247.5 -14V464M252.0 -14V464M256.5 -14V464M261.0 -14V464M265.5 -14V464M270.0 -14V464M274.5 -14V464M279.0 -14V464M283.5 -14V464M288.0 -14V464M292.5 -14V464M297.0 -14V464M301.5 -14V464M306.0 -14V464M310.5 -14V464M315.0 -14V464M319.5 -14V464M324.0 -14V464M328.5 -14V464M333.0 -14V464M337.5 -14V464M342.0 -14V464M346.5 -14V464M351.0 -14V464M355.5 -14V464M360.0 -14V464M364.5 -14V464M369.0 -14V464M373.5 -14V464M378.0 -14V464M382.5 -14V464M387.0 -14V464M391.5 -14V464M396.0 -14V464M400.5 -14V464M405.0 -14V464M409.5 -14V464M414.0 -14V464M418.5 -14V464M423.0 -14V464M427.5 -14V464M432.0 -14V464M436.5 -14V464M441.0 -14V464M445.5 -14V464M450.0 -14V464' opacity='0.072'/%3E%3Cpath d='M-14 0.0H464M-14 4.5H464M-14 9.0H464M-14 13.5H464M-14 18.0H464M-14 22.5H464M-14 27.0H464M-14 31.5H464M-14 36.0H464M-14 40.5H464M-14 45.0H464M-14 49.5H464M-14 54.0H464M-14 58.5H464M-14 63.0H464M-14 67.5H464M-14 72.0H464M-14 76.5H464M-14 81.0H464M-14 85.5H464M-14 90.0H464M-14 94.5H464M-14 99.0H464M-14 103.5H464M-14 108.0H464M-14 112.5H464M-14 117.0H464M-14 121.5H464M-14 126.0H464M-14 130.5H464M-14 135.0H464M-14 139.5H464M-14 144.0H464M-14 148.5H464M-14 153.0H464M-14 157.5H464M-14 162.0H464M-14 166.5H464M-14 171.0H464M-14 175.5H464M-14 180.0H464M-14 184.5H464M-14 189.0H464M-14 193.5H464M-14 198.0H464M-14 202.5H464M-14 207.0H464M-14 211.5H464M-14 216.0H464M-14 220.5H464M-14 225.0H464M-14 229.5H464M-14 234.0H464M-14 238.5H464M-14 243.0H464M-14 247.5H464M-14 252.0H464M-14 256.5H464M-14 261.0H464M-14 265.5H464M-14 270.0H464M-14 274.5H464M-14 279.0H464M-14 283.5H464M-14 288.0H464M-14 292.5H464M-14 297.0H464M-14 301.5H464M-14 306.0H464M-14 310.5H464M-14 315.0H464M-14 319.5H464M-14 324.0H464M-14 328.5H464M-14 333.0H464M-14 337.5H464M-14 342.0H464M-14 346.5H464M-14 351.0H464M-14 355.5H464M-14 360.0H464M-14 364.5H464M-14 369.0H464M-14 373.5H464M-14 378.0H464M-14 382.5H464M-14 387.0H464M-14 391.5H464M-14 396.0H464M-14 400.5H464M-14 405.0H464M-14 409.5H464M-14 414.0H464M-14 418.5H464M-14 423.0H464M-14 427.5H464M-14 432.0H464M-14 436.5H464M-14 441.0H464M-14 445.5H464M-14 450.0H464' opacity='0.066'/%3E%3C/g%3E%3C/svg%3E");
  /* Ungleiche Fadendichte laengs Kette und Schuss — breite, sehr weiche
     Streifen. Bewusst KEINE vereinzelten Noppen: mehrere Versuche damit sahen
     nach Staub und Kratzern auf dem Bildschirm aus, nicht nach Gewebe. */
  --leinwand-dichte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.005' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.46 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.07 0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.055' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.46 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.063 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23a)'/%3E%3Crect width='600' height='600' filter='url(%23b)'/%3E%3C/svg%3E");
  --leinwand-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8 0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.47 0 0 0 0 0.33 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
  --leinwand-wolke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='470'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.010' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.58 0 0 0 0 0.50 0 0 0 0 0.35 0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='470' height='470' filter='url(%23w)'/%3E%3C/svg%3E");
  /* Trennstrich unter dem Seitenkopf als Kohle-/Bleistiftstrich.
     Ein leicht welliger Pfad wird per feDisplacementMap aufgeraut, sodass die
     Kante ausfranst und der Strich in der Deckung schwankt — wie ein mit der
     Hand gezogener Graphitstrich. Zwei uebereinanderliegende Pfade: ein
     kraeftiger Kern und ein blasser, breiter Abrieb daneben. */
  --kohlestrich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='14'%3E%3Cfilter id='k' x='-3%25' y='-150%25' width='106%25' height='400%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.2' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 0.75' numOctaves='4' seed='5' result='m'/%3E%3CfeColorMatrix in='m' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.9 0 0 0 -0.42' result='korn'/%3E%3CfeComposite in='d' in2='korn' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23k)'%3E%3Cpath d='M2 8.4 C 220 7.0 380 9.4 600 7.9 S 1020 9.1 1240 7.4 S 1600 9.2 1798 8.1' fill='none' stroke='%233a332c' stroke-width='3.4' stroke-linecap='round' opacity='0.34'/%3E%3Cpath d='M2 7.6 C 240 6.3 400 8.5 620 7.0 S 1040 8.2 1260 6.6 S 1610 8.3 1798 7.3' fill='none' stroke='%231d1813' stroke-width='2.1' stroke-linecap='round' opacity='0.78'/%3E%3C/g%3E%3C/svg%3E");

  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-border: #ddd6c6;
  --color-accent: #1a1a1a;

  --max-width: 1500px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Die Struktur ist am Fenster verankert (fixed), nicht am jeweiligen Kasten.
   Nur so laufen Seitengrund und die beiden fest stehenden Navigationsspalten
   nahtlos ineinander — sonst begänne das Gewebe in jeder Spalte neu. */
body,
.info-nav,
.utility-nav {
  background-color: var(--leinwand-grund);
  background-image:
    var(--leinwand-dichte),
    var(--leinwand-gewebe),
    var(--leinwand-korn),
    var(--leinwand-wolke);
  background-size: 600px 600px, 450px 450px, 140px 140px, 470px 470px;
  background-attachment: fixed;
}

body {
  margin: 0;
  background-color: var(--leinwand-grund);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  /* height: auto ist noetig, sobald ein Bild width/height-Attribute traegt:
     max-width verkleinert dann zwar die Breite, die Hoehe bliebe aber auf dem
     Attributwert stehen und das Bild wird gestaucht. In der Galerie war das nie
     zu sehen, weil .gallery__item img seine eigene Regel hat. */
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* ---------- Header / Navigation ----------
   Kategorien liegen fest am rechten Rand, vertikal mittig im Bildschirm —
   bei JEDER Fensterbreite sichtbar, niemals oben. */

:root {
  --nav-width: 10rem;
  /* Linker Seitenrand. Entspricht dem Wert von frueher, als hier die
     Spalte fuer Kontakt/CV stand (8rem + 1.5rem) — die Galerie soll
     genau so stehen wie vorher. */
  --seitenrand: 9.5rem;
}

/* Der linke Seitenrand ist auf schmalen Schirmen bewusst klein: die Spalte
   fuer Kontakt/CV, deren Breite er nachbildete, sitzt seit dem 10.09. oben
   rechts in der Ecke. Stehengeblieben hat er auf dem Handy die Haelfte des
   Bildschirms gekostet (96px links + 104px Navi von 390px). */
@media (max-width: 899px) {
  :root { --nav-width: 7rem; --seitenrand: 3rem; }
}

@media (max-width: 600px) {
  :root { --nav-width: 5rem; --seitenrand: 1rem; }
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Rechten Streifen freihalten, damit nichts unter der Navigation verschwindet */
/* Rechts bleibt der Streifen fuer die Kategorien frei. Links steht jetzt ein
   glatter Seitenrand statt der frueheren Spalte fuer Kontakt/CV — die sitzt
   seit 10.09. oben rechts in der Ecke. */
.site-header,
main,
.site-footer {
  padding-right: calc(var(--nav-width) + var(--space-3));
  padding-left: var(--seitenrand);
}

.site-header {
  /* Kein border-bottom: der Trennstrich ist eine Zeichnung, siehe
     --kohlestrich. Er sitzt buendig auf der Unterkante und behaelt seine
     Korngroesse, weil die SVG-Flaeche mit 1800px breiter als die meisten
     Fenster ist und daher kaum gestreckt wird. */
  background-image: var(--kohlestrich);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 14px;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4.5vw, 4rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  hyphens: none;
}

.site-title a {
  text-decoration: none;
}

/* Kontakt / CV — fest am linken Rand, vertikal mittig,
   auf gleicher Höhe wie die Kategorien rechts */
/* Kontakt / CV als zwei Reiter in der oberen rechten Ecke, fest am Fenster.
   Kein transform zum Positionieren — ein transform macht das Element zum
   Bezugsrahmen fuer seinen eigenen background-attachment: fixed, dann begaenne
   das Leinwandgewebe hier neu und die Ecke stuende als Kasten im Grund.
   Der Hintergrund bleibt noetig, weil beim Scrollen Bilder darunter
   durchlaufen. */
.info-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  padding: var(--space-2) var(--space-3);
  text-align: right;
}

.utility-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Kategorien — fest am rechten Rand, vertikal mittig */
.quick-nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 50;
  width: var(--nav-width);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-1);
  text-align: right;
}

.main-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a,
.utility-nav a {
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
  overflow-wrap: break-word;
}

.main-nav a {
  font-size: clamp(0.7rem, 1.4vw, 1.05rem);
  letter-spacing: 0.08em;
}

.utility-nav a {
  font-size: clamp(0.6rem, 1vw, 0.8rem);
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.is-active,
.utility-nav a:hover,
.utility-nav a:focus-visible,
.utility-nav a[aria-current="page"] {
  color: var(--color-text);
  border-color: var(--color-accent);
}

/* ---------- Atelierfoto (Platzhalter auf der Kontaktseite) ---------- */

/* Das Atelierfoto laeuft ueber die volle Breite der Textspalte (720px minus
   2x24px Rand). Vorher stand hier ein gestrichelter Platzhalterkasten mit
   max-width: 420px — fuer ein echtes Foto zu zaghaft. */
.atelier-foto {
  margin: 0 0 var(--space-4);
  text-align: center;
}

/* Gleicher feiner Rahmen wie bei den Galeriebildern. */
.atelier-foto img {
  border: 1px solid var(--color-border);
}

.atelier-foto figcaption {
  margin-top: var(--space-1);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------- Kategorie-Abschnitte (Startseite) ---------- */

.category {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) 0 var(--space-5);
  /* Anker nicht direkt an die Fensterkante scrollen */
  scroll-margin-top: var(--space-2);
}

.category__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2rem;
}

/* ---------- Gallery (echtes Kachel-Grid) ----------
   grid-auto-flow: dense packt die Kacheln lückenlos nebeneinander;
   die Zeilenhöhe je Kachel wird per JS (initGridSpans) passend zur
   Bildhöhe gesetzt (klassischer CSS-Grid-Masonry-Trick). */

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1px;
  grid-auto-flow: dense;
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1250px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1700px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

.gallery__item {
  position: relative;
  /* figure hat vom Browser Standardrand — zurücksetzen, sonst stimmt
     die per JS gemessene Höhe nicht mit der tatsächlich belegten
     Fläche überein und Kacheln überlappen sich. */
  margin: 0;
  /* Beschriftung strikt innerhalb des Bildes halten — sie soll
     einblenden, nicht die Kachel nach unten verlängern. */
  overflow: hidden;
  cursor: zoom-in;
}

/* Highlightwerke: doppelt so breite Kachel, bleibt aber im Grid
   zwischen den anderen Werken eingebettet statt eine eigene Zeile zu
   sprengen. Bei Pärchen kommt die Klasse auf den .gallery__pair,
   damit Haupt- und Detailbild zusammenbleiben. */
.gallery__item--featured,
.gallery__pair--featured {
  grid-column: span 2;
}

@media (max-width: 899px) {
  .gallery__item--featured,
  .gallery__pair--featured {
    grid-column: span 1;
  }
}

/* Eine Stufe ueber --featured: fuer das eine Werk, das im Raum das groesste
   ist (Winterreise, 170 x 170 cm). Drei Spalten breit, faellt unterhalb der
   Rasterstufen auf span 2 bzw. span 1 zurueck. Bewusst KEIN
   grid-column: 1 / -1 — das reisst die Kachel-Optik auf. */
.gallery__item--gross {
  grid-column: span 3;
}

@media (max-width: 1249px) {
  .gallery__item--gross { grid-column: span 2; }
}

@media (max-width: 899px) {
  .gallery__item--gross { grid-column: span 1; }
}

/* Auftaktbild einer Kategorie: bekommt eine eigene Zeile und fuellt sie ueber
   die gesamte Rasterbreite - von der linken bis zur rechten Kante des
   Bilderblocks. Bewusst ohne Hoehendeckel: das Bild soll gross wirken. */
.gallery__item--voll {
  grid-column: 1 / -1;
}

/* Spezifitaet bewusst erhoeht: .gallery__item img setzt weiter unten
   eigene Werte und wuerde diese Regel sonst ueberschreiben. */
.gallery .gallery__item--voll img {
  width: 100%;
  height: auto;
  max-height: none;
}

/* Werkgruppe, die zwingend nebeneinander stehen muss (z.B. die vier
   Bronzemedaillons). Belegt eine eigene volle Zeile im Raster und teilt sie
   intern gleichmaessig auf. Auf schmalen Fenstern zwei mal zwei statt vier
   nebeneinander - vier waeren dort briefmarkengross. */
.gallery__reihe {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  align-items: start;
}

/* Zwei Werke, die zusammengehoeren (z.B. dieselbe Plastik aus zwei
   Blickwinkeln): teilen sich eine volle Zeile je zur Haelfte. */
.gallery__reihe--zwei {
  grid-template-columns: repeat(2, 1fr);
}

/* Werke, deren waagerechte Kanten exakt auf einer Linie stehen sollen,
   obwohl sie verschiedene Formate haben. Die Spalten werden nach dem
   Seitenverhaeltnis gewichtet (grid-template-columns inline, ein fr-Wert je
   Werk, proportional zu Breite/Hoehe des Fotos). Dann ist jede Zelle so
   breit, dass alle Bilder dieselbe Hoehe ergeben - Ober- und Unterkante
   fluchten, ohne dass ein Werk verzerrt oder beschnitten wird.
   Die Hoehenrechnung in main.js liest dafuer die echten Spaltenbreiten. */
.gallery__reihe--linie {
  align-items: start;
}

/* Zeile, die als durchgehende Linie ueber die volle Rasterbreite laeuft:
   links und rechts buendig mit dem Bilderblock, alle Bilder gleich hoch,
   Luecken so breit wie im uebrigen Raster.

   Die Spaltengewichte kommen als Custom Property --spalten aus dem HTML, ein
   fr-Wert je Werk, proportional zu Breite/Hoehe des Fotos. Dadurch wird jede
   Zelle genau so breit, dass sich fuer alle Bilder dieselbe Hoehe ergibt.
   Bewusst als Variable und nicht als grid-template-columns direkt im
   style-Attribut: so kann die Regel fuer schmale Fenster unten normal
   ueberschrieben werden — ein Inline-Wert waere staerker als jedes
   Stylesheet und liesse sich nur mit !important zurueckholen. */
.gallery__reihe--breit {
  grid-template-columns: var(--spalten);
  gap: var(--space-3);
}

/* Einspaltig waeren drei Werke nebeneinander briefmarkengross. */
@media (max-width: 899px) {
  .gallery__reihe.gallery__reihe--breit { grid-template-columns: 1fr; }
}

/* Zwei Werke nebeneinander, aber nur so gross wie zwei gewoehnliche Kacheln
   statt ueber die ganze Zeile. Der Innenabstand entspricht dem des Rasters,
   damit jede Zelle wirklich eine Spaltenbreite belegt. */
.gallery__reihe--schmal {
  grid-column: span 2;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 899px) {
  .gallery__reihe--schmal { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .gallery__reihe { grid-template-columns: repeat(2, 1fr); }
  .gallery__reihe--zwei { grid-template-columns: repeat(2, 1fr); }
}

/* Handy: gar keine mehrspaltige Zeile mehr. Zu zweit blieben von den rund
   270px Bildbreite je 130px, zu dritt 80px — als Werkabbildung wertlos.
   Steht bewusst NACH der 899er-Regel: gleiche Spezifitaet, die spaetere
   gewinnt. */
@media (max-width: 600px) {
  .gallery__reihe,
  .gallery__reihe--zwei,
  .gallery__reihe--schmal,
  .gallery__reihe.gallery__reihe--breit { grid-template-columns: 1fr; }
}

/* Drei Malerei-Zeilen stehen seit jeher enger als das uebrige Raster. Sie
   tragen seit dem Handy-Umbau --breit (wegen --spalten), das braechte sonst
   die 24px des Rasters mit. Steht bewusst nach --breit: gleiche Spezifitaet,
   die spaetere gewinnt. */
.gallery__reihe--eng { gap: var(--space-1); }

/* Auf dem Handy stehen die Werke untereinander — dort ist der enge Abstand
   kein Zusammenhalt mehr, sondern faellt aus dem Raster. */
@media (max-width: 600px) {
  .gallery__reihe--eng { gap: var(--space-3); }
}

/* Werk + Detailaufnahme fest als Zweierreihe in einer Kachel
   zusammenhalten. Die Detailaufnahme ist standardmäßig eingeklappt und
   erscheint erst bei Fokus/Klick auf das Paar — bewusst kein Hover,
   das hat auf vielen Bildern gleichzeitig geruckelt. */
/* Zwei Werke uebereinander als EINE Zelle einer fluchtenden Zeile — gedacht
   fuer den Fall, dass neben einem grossen Werk zwei kleinere stehen sollen und
   alle drei unten auf einer Linie enden.

   Die Luft zwischen den beiden Werken steht fest auf 28px — knapp ueber dem
   normalen Rasterabstand von 24px. Das Breitenverhaeltnis im --spalten-Wert
   ist passend dazu gerechnet: der Stapel wird damit ueber alle Fensterbreiten
   auf 1-2px genau so hoch wie das grosse Werk daneben.

   Bewusst NICHT ueber align-self: stretch + space-between geloest, obwohl das
   auf den ersten Blick genauer klingt: die Zeile fuellt im aeusseren Raster
   ihre Zeilenspur, und die ist durch grid-auto-rows: 1px + 24px Abstand auf
   25px aufgerundet. Der Stapel wuerde sich auf diese aufgerundete Hoehe
   dehnen und bis zu 24px unter dem Nachbarwerk enden. */
.gallery__stapel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Kein gap: eingeklappt wuerde er trotzdem Platz belegen und das Hauptbild
   um 8px schmaler machen als eine gewoehnliche Kachel - das bricht die
   Kantenausrichtung in einer .gallery__reihe--linie. Der Abstand kommt
   stattdessen erst mit der aufgeklappten Detailaufnahme als deren Rand. */
.gallery__pair {
  display: flex;
  gap: 0;
}

.gallery__pair .gallery__item:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.gallery__pair .gallery__item:last-child {
  flex: 0 0 0%;
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.gallery__pair:focus-within .gallery__item:last-child,
.gallery__pair.is-revealed .gallery__item:last-child {
  flex: 0 0 calc(50% - var(--space-1) / 2);
  margin-left: var(--space-1);
  opacity: 1;
  pointer-events: auto;
}

.gallery__item img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
}

/* Titel/Maße liegen standardmäßig unsichtbar über dem Bild und
   erscheinen erst bei Hover, Tastaturfokus oder Klick/Tap. */
.gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--space-3) var(--space-2) var(--space-2);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  font-size: 0.8rem;
  line-height: 1.4;
  color: #f2f2ee;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery__item:focus-within .gallery__caption,
.gallery__item.is-revealed .gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery__caption-title {
  font-style: italic;
  color: #fff;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-3);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  margin: 0 auto;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-2);
}

.lightbox__close {
  top: var(--space-2);
  right: var(--space-2);
}

.lightbox__prev {
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Content pages (Kontakt / CV) ---------- */

/* Kontakt und CV: der Block steht wie die Galerien mittig, der Satz darin
   haengt aber links an dessen Kante — dadurch beginnt der Text auf derselben
   Senkrechten wie »Frieder Sailer« im Seitenkopf. Vorher war die 720px-Spalte
   selbst zentriert und stand deshalb weiter rechts als die Ueberschrift. */
.content-page {
  max-width: var(--max-width);
  /* content-box, obwohl global border-box gilt: <main> traegt hier die
     Maximalbreite UND die seitlichen Polster. Bei border-box zoege das Polster
     von den 1500px ab, der Satz begaenne dadurch weiter rechts als
     »Frieder Sailer« im Kopf (gemessen 362 statt 194px bei 1920px Fenster).
     Auf der Startseite tritt das nicht auf, dort sitzt die Maximalbreite auf
     .category INNERHALB von main. */
  box-sizing: content-box;
  margin: 0 auto;
  /* KEINE padding-Kurzform: <main> traegt diese Klasse selbst, und die
     Kurzform wuerde das padding-left/right aus der gemeinsamen Regel fuer
     .site-header/main/.site-footer ueberschreiben. Dann faellt der linke
     Seitenrand weg und der Satz klebt an der Fensterkante. */
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.content-page > * {
  max-width: 720px;
  margin-right: auto;
}

.content-page__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2.2rem;
  margin: 0 0 var(--space-4);
}

.content-page h2:not(.content-page__title) {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin-top: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
}

.content-page p {
  margin: 0 0 var(--space-2);
}

.content-page ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.2em;
}

.cv-entry {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.cv-entry__year {
  flex: 0 0 5em;
  color: var(--color-text-muted);
}

.placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 480px) {
  .quick-nav {
    padding-left: 0;
  }
}