@font-face { font-family: "Whyte"; src: url("fonts/BerresheimWhyte-Book.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte"; src: url("fonts/BerresheimWhyte-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte"; src: url("fonts/BerresheimWhyte-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte"; src: url("fonts/BerresheimWhyte-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte"; src: url("fonts/BerresheimWhyte-Super.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte Inktrap"; src: url("fonts/BerresheimWhyteInktrap-Super.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }

/* Gestaltungssystem: Papier und Tinte, Berresheim Whyte. Eine Schriftskala, eine Abstandsskala, ein Maß. */
:root {
  --paper: #FFFFFF;
  --ink: #0B0B0C;
  --mute: #4A4A4F;
  --line: #E3E1DC;
  --wash: #F2F2EE;
  --dot: #B4B4AE;
  --teal: #0E9AB0;
  --red: #D8432C;
  --display: "Whyte Inktrap", "Whyte", "Arial Black", sans-serif;
  --max: 1180px;
  --gutter: clamp(16px, 5vw, 72px);
  --gap: clamp(16px, 2.5vw, 32px);
  /* Schriftskala – wie „Aus dem Atelier“: Fließtext 17, Lead fett, Titel in der Inktrap Super */
  --t-xs: 12px;     /* Etiketten, Kicker */
  --t-s: 14px;      /* Bildunterschriften, Meta */
  --t-m: 17px;      /* Fließtext */
  --t-l: 19px;      /* Zwischentitel */
  --t-lead: clamp(20px, 2.4vw, 28px);   /* Lead unter Titeln, fett */
  --t-xl: clamp(40px, 6vw, 64px);       /* Seitentitel, Abschnittstitel */
  --t-display: clamp(48px, 9vw, 128px); /* Aufmacher */
  /* Abstandsskala */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: clamp(48px, 7vw, 96px);
  --measure: 64ch;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Pfeil nach oben: unten rechts, erscheint erst nach gut einer Bildschirmhöhe Scrollen (scroll-getrieben, sonst immer da) */
.to-top { position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 50; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--ink); display: grid; place-items: center; font-size: 20px; line-height: 1; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.to-top:hover { text-decoration: none; transform: translateY(-2px); }
@supports (animation-timeline: scroll()) {
  .to-top { animation: to-top-in linear both; animation-timeline: scroll(root); animation-range: 60vh 120vh; }
}
@supports not (animation-timeline: scroll()) { .to-top { opacity: 1; pointer-events: auto; } }
@keyframes to-top-in { from { opacity: 0; pointer-events: none; } to { opacity: 1; pointer-events: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Whyte", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; font-size: var(--t-m); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
/* Typo-Regel: Inktrap Super nur als Stimme des Künstlers – Name in der Kopfzeile und der eine Aufmacher (.hero-title).
   Alles, was ordnet, spricht Whyte: Seitentitel Whyte Bold, groß, aber nicht riesig. */
h1 { font-family: "Whyte", -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.015em; line-height: 1.05; }
h2 { font-size: var(--t-l); }
.lead { font-weight: 700; font-size: var(--t-lead); line-height: 1.22; }
/* Schwarzer Knopf mit Pfeil, wie auf dem Merkblatt */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 17px; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.btn::after { content: "→"; font-weight: 500; }
p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
.cv-year h3, .cap-price, .room-count { font-variant-numeric: tabular-nums; }
.kicker { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--s2); font-weight: 500; }
/* Der kurze Strich: Marke aus den Drucksachen, steht über Kickern */
.count { color: var(--mute); font-weight: 400; margin-left: 0.45em; font-family: "Whyte", sans-serif; font-size: 0.55em; letter-spacing: 0; }
.empty, .placeholder { color: var(--mute); max-width: var(--measure); }

/* Kopf und Fuß: Name links, Menü rechts, eine feine Linie */
/* Kopf: ein Kasten mit Milchglas für Name und Menü; nur hier ein backdrop-filter (Safari erlaubt keinen zweiten darin). */
.site-top {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--gap);
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 22px var(--gutter) 18px;
  /* bleibt beim Scrollen oben stehen – ohne weiße Fläche, nur ein Hauch Milchglas hinter der Schrift */
  position: sticky; top: 0; z-index: 40; background: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
}
.site-header { display: contents; }
.site-name { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.01em; line-height: 1; }
.site-name-h { margin: 0; font: inherit; display: contents; }
/* Menüknopf: nur auf dem Telefon sichtbar, drei Striche, geöffnet ein Kreuz */
.nav-toggle { display: none; width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle span:nth-child(1) { top: 14px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 28px; }
.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-name:hover { text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 24px); font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav a { color: var(--mute); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { text-decoration: none; color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.site-main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s6); }
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--gap);
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px; font-size: 13px; color: var(--mute);
}
.footer-nav { display: flex; gap: var(--s3); }

.nav-showroom { margin-left: var(--s1); padding-left: var(--s3); border-left: 1px solid var(--line); }
.lang-switch { display: inline-flex; align-items: baseline; gap: 6px; color: var(--mute); font-size: 12px; letter-spacing: 0.12em; }
.lang-switch a { color: var(--mute); }
.lang-sep { color: var(--line); }

/* Seitenköpfe */
.page-head { margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.page-head p { margin: 0; color: var(--mute); }
.page-head .kicker { margin-bottom: 0; }
/* Abschnitte: 2 px schwarze Linie oben, großer Titel in der Inktrap, rechts der Weiterlink */
/* Modulköpfe auf der Startseite: feine Linie, ruhiger Titel, Link in Grau – die Bilder sollen lauter sein als die Köpfe */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); margin: var(--s6) 0 var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
/* Zwischengrößen in der fetten Whyte; die Inktrap bleibt den ganz großen Titeln vorbehalten */
.section-head h2 { font-weight: 500; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.15; letter-spacing: 0; }
/* Startseite: Die Plätze trennt eine kräftige Linie mit viel Luft, damit der Aufmacher und die Liste darunter nicht ineinanderlaufen. */
.section-start .slot + .slot .section-head { border-top: 2px solid var(--ink); padding-top: var(--s4); margin-top: clamp(64px, 9vw, 128px); }
.section-head .more { font-size: 12px; color: var(--mute); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; white-space: nowrap; }
.section-head .more:hover { color: var(--ink); text-decoration: none; }
.more::before, .inquire::before, .pub-link a::before, .marked-mail::before { content: "→ "; }
.work-nav { letter-spacing: 0.14em; }
.year-group { margin: 0 0 var(--s4); }
.year-group .year { font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--ink); margin: 0 0 var(--s3); padding-top: var(--s3); border-top: 2px solid var(--ink); font-feature-settings: "lnum" 1; }

/* Raster für Werke und Serien: Bild auf Weiß, darunter die Angaben wie eine Katalogunterschrift */
/* Werkraster: fünf Spalten, eng gesetzt – die Bilder tragen, die Beschriftung bleibt klein */
/* Werkraster (Ausstellung, Startseite): vier Spalten mit Luft, Beschriftung wie in der Mappe – Zeile für Zeile, leicht, ohne Linie */
.grid { display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-series { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tile a { display: block; }
.tile a:hover { text-decoration: none; }
/* Kacheln in echten Proportionen: --r kommt aus dem Werkbild; ohne Bild bleibt es quadratisch */
/* Bildfeld: im Raster mit Unterschriften das gemeinsame Maß (--box am ul), sonst das eigene Seitenverhältnis (--r) */
.tile-image { position: relative; aspect-ratio: var(--box, var(--r, 1)); overflow: hidden; }
.tile-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .25s ease; }
.grid { align-items: start; }
.tile a:hover .tile-image img { transform: translateY(-2px); }
.tile-empty { display: block; width: 100%; height: 100%; background: var(--wash); }
.tile figcaption { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink); border-top: 0; padding-top: 0; }
.tile figcaption span { display: block; }
.tile figcaption .cap-title-year { display: none; }
.cap-year { color: var(--mute); }
.cap-title { font-weight: 500; margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.cap-line { color: var(--ink); font-size: 15px; line-height: 1.6; }
.cap-no { color: var(--mute); font-size: 12px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; margin-top: 10px; }
/* Werke-Übersicht: drei versetzte Spalten (Mauerwerk), die Bilder tragen; beim Überfahren nur Titel und Jahr
   (mit Finger: klein darunter). Das Jahr am Titel ist sonst überall versteckt, dort nennt es die Zeile darunter. */
.cap-title-year { display: none; font-weight: 400; color: var(--mute); }
/* Übersicht und Mappe laufen über die ganze Fensterbreite (mit Seitenrand), die Kopfzeile bleibt in der Seitenbreite */
.works-index, .folio, .exhibitions-index { width: calc(100vw - 2 * var(--gutter)); margin-left: calc(50% - 50vw + var(--gutter)); margin-right: 0; }
/* Ausstellungsübersicht: zwei Spalten, Ansichten groß in echten Proportionen, Beschriftung leicht darunter */
.exhibitions-index .grid-exhibitions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); }
.exhibitions-index .year-group .grid-exhibitions { margin-top: var(--s3); }
/* Allein im Jahr: volle Breite, Bild auf Bildschirmhöhe begrenzt, Text größer */
.exhibitions-index .grid-exhibitions.year-solo { grid-template-columns: 1fr; }
.exhibitions-index .year-solo .tile-image { aspect-ratio: auto; height: min(78vh, calc(100vw / var(--r, 1.5) - 80px)); }
.exhibitions-index .year-solo .exhibition-tile .exhibition-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; }
.exhibitions-index .tile-image { aspect-ratio: var(--r, 1.5); background: none; }
.exhibitions-index .tile-image img { object-fit: cover; object-position: center; }
.exhibitions-index .tile-image img.work-fallback { object-fit: contain; }
.exhibitions-index .exhibition-tile .tile-text { border-top: 0; padding-top: 18px; }
.exhibitions-index .exhibition-tile .exhibition-title { font-size: 17px; font-weight: 400; letter-spacing: 0; }
.exhibitions-index .exhibition-tile .tile-meta { font-size: 15px; color: var(--ink); }
.exhibitions-index .exhibition-tile .tile-kind { margin-top: 6px; }
.exhibitions-index .tile a:hover .tile-image img { transform: none; }
.exhibitions-index .tile a:hover .tile-text { font-style: italic; }
@media (max-width: 800px) { .exhibitions-index .grid-exhibitions { grid-template-columns: 1fr; gap: var(--s4); } }
.works-index .grid-works { display: block; column-count: 3; column-gap: var(--s4); }
.works-index .tile-work { break-inside: avoid; display: block; margin: 0 0 var(--s4); }
/* Mit Script: feste Spalten, vom Script in Lesereihenfolge gefüllt (ohne Script bleiben CSS-Spalten) */
.works-index .grid-works.masonry { column-count: auto; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 var(--s4); align-items: start; }
.works-index .mcol { display: block; margin: 0; padding: 0; }
/* Zeilenbündig (Vorgabe): jede Zeile gleich hoch, die Werke teilen sich die Breite nach Seitenverhältnis (--r am li), nichts beschnitten.
   Das ::after-Element schluckt den Rest der letzten Zeile; ein Werk wächst höchstens auf das Anderthalbfache. */
.works-index .grid-works.rows { --row: clamp(240px, 30vw, 520px); column-count: auto; display: flex; flex-wrap: wrap; gap: var(--s4); align-items: stretch; }
.works-index .grid-works.rows::after { content: ""; flex-grow: 1000000; }
.works-index .grid-works.rows .tile-work { flex-grow: calc(var(--r, 1) * 1000); flex-basis: calc(var(--r, 1) * var(--row)); max-width: calc(var(--r, 1) * var(--row) * 1.5); aspect-ratio: var(--r, 1); margin: 0; min-width: 0; }
.works-index .grid-works.rows .tile-work[hidden] { display: none; }
.works-index .grid-works.rows .tile-work a, .works-index .grid-works.rows .tile-work figure, .works-index .grid-works.rows .tile-image { height: 100%; }
.works-index .grid-works.rows .tile-image { aspect-ratio: auto; }
.works-index .mcol > ul { list-style: none; margin: 0; padding: 0; }
.works-index .tile-image { background: none; }
.works-index .tile-image img { object-position: center top; }
.works-index .tile-work figure { position: relative; }
.works-index .tile-work figcaption { position: absolute; inset: 0; margin: 0; padding: 12px; border: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(255,255,255,.82); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.works-index .tile-work .cap-title { font-size: 16px; font-weight: 500; line-height: 1.3; margin: 0; }
.works-index .tile-work a:hover figcaption { opacity: 1; }
.works-index .tile-work .cap-line, .works-index .tile-work .cap-no { display: none; }
.works-index .tile-work .cap-title-year { display: inline; }
.works-index .tile a:hover .tile-image img { transform: none; }
/* Auf dem Handy (ohne Hover) keine Titel unter den Bildern: nur Bilder, der Titel steht auf der Werkseite. */
@media (hover: none) { .works-index .tile-work figcaption { display: none; } }
/* Filterzeile der Werke-Übersicht */
.works-filter { margin: 0 0 var(--s4); font-size: 13px; line-height: 2; }
.works-all { margin: 0 0 var(--s4); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.wf-row { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.wf-label { color: var(--mute); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; min-width: 72px; }
.works-filter a, .works-filter button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.works-filter small { color: var(--mute); font-size: 11px; margin-left: 2px; }
.works-filter a:hover, .works-filter button:hover { color: var(--mute); }
.works-filter button.on { font-weight: 700; }
.wf-search input { font: inherit; font-size: 13px; width: 220px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); border-radius: 0; }
.wf-search input:focus { outline: none; border-bottom-color: var(--ink); }
/* Mappe: Serie als Folge großer Werke */
/* Mappe: zwei Spalten, jedes Werk fast halbe Seitenbreite, darunter die Angaben mit Luft */
/* Mappe (Serienseite): zwei Spalten mit viel Luft, Beschriftung leicht, Zeile für Zeile. margin-left bleibt die Vollbreite von oben. */
.folio { list-style: none; margin-top: var(--s5); margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(72px, 9vw, 140px) var(--s5); align-items: start; }
.page-head-quiet { margin-bottom: 0; }
.page-head-quiet .kicker { margin: 0; }
.page-head-quiet + .folio, .page-head-quiet + .views { margin-top: var(--s3); }
.folio-item { margin: 0; scroll-margin-top: 120px; }
.folio-item:target .cap-title { font-weight: 700; }
.folio a { text-decoration: none; color: inherit; }
.folio a:hover figcaption { font-style: italic; }
.folio-image { position: relative; aspect-ratio: var(--r, 1); background: none; }
.folio-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
/* Beschriftung: alle Zeilen gleich gesetzt, kleiner Absatz nach dem Titel, die Nummer abgesetzt in Grau */
.folio figcaption { margin-top: 20px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--ink); }
.folio figcaption span { display: block; font-size: 16px; line-height: 1.6; margin: 0; }
.folio .cap-title { color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.folio .cap-title-year { display: none; }
.folio .cap-line { color: var(--ink); }
.folio .cap-no { font-size: 13px; letter-spacing: 0.06em; color: var(--mute); margin-top: 14px; }
.folio a:hover .cap-title { color: var(--ink); }
@media (max-width: 800px) { .folio { grid-template-columns: 1fr; gap: 56px; margin-top: var(--s4); } }
.cap-label { color: var(--mute); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-top: var(--s1); }
.cap-label + .cap-line { color: var(--ink); }
.tile-title { font-weight: 500; }
.tile-count { color: var(--mute); }
/* Fette Titel bleiben ohne Unterstrich; beim Überfahren wird der Titel nur leiser */
.tile a:hover .cap-title, .tile a:hover .tile-title { color: var(--mute); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Startseite: Aufmacher */
.hero a { display: block; }
.hero a:hover { text-decoration: none; }
.hero-image { background: var(--wash); display: flex; justify-content: center; width: 100vw; margin-inline: calc(50% - 50vw); }
.hero-image img { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; }
/* Karussell im Aufmacher: Installationsansichten der obersten Ausstellung, Überblendung alle paar Sekunden, volle Breite wie die Bildpausen des Merkblatts */
.hero-carousel { position: relative; aspect-ratio: 2 / 1; max-height: 80vh; overflow: hidden; background: none; }
.hero-carousel img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.hero-carousel img.is-on { opacity: 1; }
.hero-carousel .dots { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 8px; }
.hero-carousel .dots li { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.25; transition: opacity 0.4s; }
.hero-carousel .dots li.is-on { opacity: 0.9; }
.exhibition-place a { color: inherit; text-decoration: none; }
.exhibition-place a:hover { color: var(--mute); text-decoration: none; }
.hero-text { padding: var(--s4) 0 0; display: flex; flex-direction: column; gap: var(--s2); }
.ar-link.ar-off { opacity: 0.75; }
.ar-note { display: block; width: 100%; font-size: var(--t-s); color: var(--mute); margin-top: 6px; max-width: var(--measure); }
.hero-text .kicker { margin-bottom: 0; }
.hero-title { font-family: var(--display); font-weight: 800; font-size: var(--t-display); letter-spacing: -0.005em; line-height: 0.9; max-width: 14ch; }
.hero-place { margin: 0; color: var(--ink); font-size: var(--t-lead); font-weight: 500; line-height: 1.22; }
.hero-dates { margin: 0; color: var(--mute); font-size: 14px; }
.hero-excerpt { margin: var(--s2) 0 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--ink); }
.hero-more { margin: var(--s2) 0 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.hero a:hover .hero-more { text-decoration: underline; text-underline-offset: 4px; }
.hero-meta { margin: 0; color: var(--mute); }
.hero a:hover .hero-title { color: var(--mute); }

/* Werkseite: Bild groß auf Weiß, Angaben darunter wie eine Katalogseite */
.work { display: block; }
.work-nav { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--s3); }
.work-nav a { color: var(--mute); }
/* Handy: erst das Bild, dann der Text, das Blättern zuletzt – sonst stapeln sich Kopf, Menü und Blättern über dem Bild */
@media (max-width: 800px) { .work { display: flex; flex-direction: column; } .work-nav { order: 3; margin: var(--s4) 0 0; padding-top: var(--s2); border-top: 1px solid var(--line); } .work-figure { margin-bottom: var(--s3); } }
.work-figure { display: flex; align-items: center; justify-content: center; margin: 0 0 var(--s4); }
.work-figure img { max-height: 78vh; width: auto; max-width: 100%; }
.work-text { max-width: 680px; margin: 0 auto; }
.work-title { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--s3); }
.work-caption span { display: block; font-size: var(--t-m); line-height: 1.5; }
.work-caption .cap-title { display: none; }
.work-caption .cap-year { color: var(--ink); }
.work-caption .cap-line { color: var(--mute); }
.work-caption .cap-label { color: var(--mute); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-top: var(--s2); }
.work-caption .cap-label + .cap-line { color: var(--ink); }
.work .facts { margin-top: var(--s4); }
.work-figure-empty { aspect-ratio: 4 / 3; }
.facts { margin: 0; }
.fact { display: grid; grid-template-columns: 9em 1fr; gap: var(--s1); padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-s); }
.fact:last-child { border-bottom: 1px solid var(--line); }
.fact dt { color: var(--mute); }
.fact dd { margin: 0; }
.fact-list li { margin: 0 0 4px; }
.exhibition-year { color: var(--mute); }

/* Ausstellungen */
/* Jede Zeile ist ein eigenes Raster: Die letzte Spalte hat eine feste Breite, sonst schöbe ein längeres Etikett („Upcoming exhibition“) die Spalten dieser Zeile nach links. */
.exhibition-list { border-top: 1px solid var(--line); }
.exhibition-row a {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 11em;
  gap: var(--gap); padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.exhibition-row .plain {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 11em;
  gap: var(--gap); padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.exhibition-row.current .exhibition-kind { color: var(--ink); font-weight: 500; }
/* Ankündigungen: Poster (Schwarz auf Papier) nur wo vorhanden, Titel mit dichter Infozeile, rechts der Stand */
.exhibition-row.ann a, .exhibition-row.ann .plain { display: flex; align-items: center; gap: var(--s2); padding: 10px 0; }
.ann-poster { flex: 0 0 auto; display: block; width: 64px; aspect-ratio: 1 / 1.35; }
.ann-poster img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
.ann-body { flex: 1 1 auto; min-width: 0; display: block; }
.ann-body .exhibition-title { display: block; }
.ann-meta { display: block; margin-top: 2px; font-size: var(--t-s); color: var(--mute); }
.ann-artists { display: block; margin-top: 1px; font-size: var(--t-s); color: var(--mute); font-weight: 300; }
.exhibition-row.ann .exhibition-kind { flex: 0 0 auto; }
/* Ausstellungen als Kacheln: Titelbild 3:2 formatfüllend, Werk-Rückfall eingepasst */
.grid-exhibitions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--gap); }
.exhibition-tile .tile-image { aspect-ratio: 3 / 2; background: var(--wash); }
.exhibition-tile .tile-image img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.exhibition-tile .tile-image img.work-fallback { inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.exhibition-tile .tile-text { display: block; margin-top: var(--s2); font-size: var(--t-s); line-height: 1.45; border-top: 1px solid var(--ink); padding-top: 12px; }
.exhibition-tile .tile-text span { display: block; }
.exhibition-tile .exhibition-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.exhibition-tile .tile-meta { color: var(--mute); margin-top: 2px; }
.exhibition-tile .tile-kind { color: var(--mute); margin-top: 4px; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.exhibition-tile a:hover .exhibition-title { color: var(--mute); }
.year-group .grid-exhibitions { margin-top: var(--s2); }
@media (max-width: 1100px) { .grid-exhibitions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ausstellungsliste: Hochformat aus den Ansichten links beim Namen, in Farbe */
.with-shots .exhibition-row a, .with-shots .exhibition-row .plain { grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 11em; align-items: center; }
.ann-poster.shot { width: 56px; }
.ann-poster.shot img { filter: none; mix-blend-mode: normal; }
/* Vita: Schalter Alle / Einzel / Gruppe */
.cv-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s3) 0 var(--s2); }
.cv-switch button { font: inherit; font-weight: 500; font-size: 13px; letter-spacing: 0.02em; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); background: none; color: var(--mute); cursor: pointer; }
.cv-switch button:hover { border-color: var(--ink); color: var(--ink); }
.cv-switch button.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* Vita: Abschnittstitel eine Stufe leiser, dünne Linie – die Einträge sollen tragen */
.section-vita .section-head { margin-top: var(--s5); }
.exhibition-row a:hover { text-decoration: none; }
.exhibition-row a:hover .exhibition-title { color: var(--mute); }
.exhibition-title { font-weight: 700; }
.page-head .exhibition-dates { font-size: 14px; color: var(--mute); }
.exhibition-place, .exhibition-dates, .exhibition-kind { color: var(--mute); font-size: var(--t-s); }
.exhibition-kind { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.exhibition-row:not(.ann) .exhibition-kind { text-align: right; }
.page-head .exhibition-place, .exhibition .page-head .exhibition-place { font-size: var(--t-lead); font-weight: 700; line-height: 1.22; color: var(--ink); }
.press-text, .artists, .text-page { max-width: var(--measure); margin: 0 0 var(--s5); }
.press-text p, .text-page p { font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.artists h2, .installation-views h2, .shown-works h2, .opening h2 { font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--ink); margin: 0 0 var(--s3); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.installation-views, .shown-works, .publications, .project-parts, .project-exhibitions, .stations, .opening { margin: 0 0 48px; }
/* Showroom */
/* Tor zum Showroom: mittig, mit Punch – großer Titel, kräftiger Lead, Formular in der Mitte, Anfrage darunter */
.showroom-gate { max-width: 640px; margin: clamp(24px, 10vh, 110px) auto 0; text-align: center; }
.showroom-gate .page-head { margin-bottom: var(--s3); justify-content: center; }
.showroom-gate .page-head h1 { font-size: clamp(30px, 3.6vw, 44px); }
.showroom-lead { font-size: 17px; line-height: 1.55; font-weight: 400; margin: 0 auto; }
.showroom-hint { color: var(--mute); font-size: var(--t-s); }
.showroom-request { margin-top: 28px; font-weight: 400; font-size: var(--t-m); }
.showroom-request a:hover { text-decoration: none; color: var(--mute); }
#gate-form { display: flex; gap: 10px; margin: 32px auto 14px; max-width: 520px; }
#gate-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; height: 46px; padding: 0 14px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; }
#gate-form button { font: inherit; font-weight: 500; font-size: 16px; min-height: 46px; padding: 0 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
#gate-form button:hover { background: var(--paper); color: var(--ink); }
.showroom-error { color: var(--red); }
.cta-note { font-size: 14px; color: var(--mute); }
.room-wege { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: var(--s3) 0 0; }
.showroom-hint { color: var(--mute); font-size: 14px; }
.showroom-until { color: var(--mute); margin: 4px 0 0; }
.showroom-intro p { font-size: 17px; line-height: 1.5; max-width: 68ch; }
.showroom .views { margin: 0 0 40px; }
.cap-price { display: block; margin-top: 8px; font-weight: 500; }
.cap-status { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--ink); font-weight: 500; font-size: var(--t-s); }
.cap-price + .cap-status { margin-top: 4px; }
.cap-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2f9e5b; flex: none; }
.cap-status.status-reserved::before { background: #e4a11b; }
.cap-status.status-sold::before { background: #d8432c; }
.cap-status.status-sold, .cap-status.status-reserved { margin-top: 8px; }
.ar-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--t-s); color: var(--ink); text-decoration: underline; text-underline-offset: 0.12em; }
.ar-inline::before { content: "AR"; font-size: 10px; letter-spacing: 0.1em; border: 1px solid var(--ink); padding: 1px 4px; }
.ar-inline img { display: none; }
.inquire { display: inline-block; margin-top: 8px; }
.showroom-note { color: var(--mute); font-size: 14px; margin-top: 32px; }
.room-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 5; }
.room-tools select, .room-tools input, .room-tools button, .room-marked button { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 0; }
.room-tools input { width: 110px; }
.room-count { margin-left: auto; color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.room-marked { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 20px; padding: 10px 14px; background: var(--wash); font-size: 14px; }
.room-group { margin: 0 0 var(--s5); }
.room-group h3 { position: sticky; top: 0; z-index: 4; background: var(--paper); display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3); padding: var(--s2) 0; border-top: 2px solid var(--ink); font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
.room-group .group-count { font-size: var(--t-s); color: var(--mute); font-weight: 400; }
.room-jump { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 var(--s4); font-size: var(--t-s); }
.room-jump a { color: var(--mute); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.room-jump a::after { content: " " attr(data-count); font-size: var(--t-xs); }
.room-jump a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--ink); }
.showroom-tile .tile-image { cursor: zoom-in; }
.showroom-tile .mark { display: block; margin-top: 10px; font-size: 12px; color: var(--mute); cursor: pointer; }
.showroom-tile.marked { outline: 2px solid var(--ink); outline-offset: 8px; }
.room-detail { position: fixed; inset: 0; background: rgba(255,255,255,.97); z-index: 50; overflow: auto; padding: 48px 72px; }
.room-detail .detail-body { max-width: 1100px; margin: 0 auto; }
.room-detail img { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.room-detail figcaption { margin-top: 18px; font-size: 14px; line-height: 1.5; } .room-detail figcaption span { display: block; }
.detail-close, .detail-prev, .detail-next { position: fixed; top: 50%; transform: translateY(-50%); font: inherit; font-size: 40px; line-height: 1; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 10px 16px; }
.detail-close { top: 16px; right: 16px; transform: none; font-size: 32px; } .detail-prev { left: 8px; } .detail-next { right: 8px; }
body.detail-open { overflow: hidden; }
.detail-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--s3) 0 0; }
.detail-tools .ar-note { flex-basis: 100%; text-align: center; color: var(--mute); font-size: var(--t-s); max-width: 48ch; margin: var(--s1) auto 0; }
.detail-caption { margin-top: var(--s3); font-size: 14px; line-height: 1.5; text-align: center; } .detail-caption span { display: block; } .detail-caption .cap-label { margin-top: 6px; }
.detail-tools button, .detail-tools .ar-link { font: inherit; font-size: 13px; padding: 7px 14px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.detail-tools button.on { background: var(--ink); color: var(--paper); } .detail-tools button:disabled { opacity: .35; cursor: default; }
.detail-tools .ar-link img { width: 1px; height: 1px; }
.wall { position: relative; width: 100%; aspect-ratio: 5 / 3; background: linear-gradient(#f2f0eb, #e9e6df); overflow: hidden; margin-top: 8px; }
.wall-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 4%; background: #d9d4ca; }
.wall-figure { position: absolute; left: 6%; bottom: 4%; height: 58.3%; fill: #b8b2a7; }
.wall-work { position: absolute; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,.08); }
.wall-note { position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: var(--mute); }
@media print { .site-nav, .room-tools, .room-marked, .showroom-gate, .mark, .site-footer { display: none !important; } .print-marked .showroom-tile:not(.marked) { display: none; } .showroom-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 800px) { .room-tools { position: static; } .room-detail { padding: 56px 16px; } .detail-prev, .detail-next { top: auto; bottom: 12px; transform: none; } }
.station-list { list-style: none; margin: 0; padding: 0; }
.station { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.station-date { color: var(--mute); font-size: var(--t-s); padding-top: 3px; }
.station-body h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; font-weight: 700; }
.station-body p { margin: 0 0 10px; max-width: 68ch; }
.views.station-views { --row: clamp(84px, 8vw, 120px); gap: 4px; margin-top: 12px; }
.opening .views.station-views { --row: clamp(96px, 10vw, 150px); margin-top: 0; }
.views li[hidden] { display: none; }
.opening-more { margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); text-decoration: underline; cursor: pointer; }
.station-views a { cursor: zoom-in; }
.station-views img { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.station-views a:hover img { transform: scale(1.025); opacity: .94; }
.project-parts h2, .project-exhibitions h2, .stations h2, .publications h2, .verify h2 { font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--ink); margin: 0 0 var(--s3); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.pub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.pub-card { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; }
.pub-cover { display: block; background: var(--wash); }
.pub-cover img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.10); }
.pub-cover.placeholder { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; color: var(--mute); font-size: 13px; border: 1px solid var(--line); }
.pub-text .kicker { margin: 0 0 4px; }
.pub-text h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; font-weight: 700; }
.pub-subtitle { margin: 0 0 8px; color: var(--mute); }
.pub-meta { margin: 0; font-size: 14px; color: var(--mute); line-height: 1.5; }
.pub-link { margin: 10px 0 0; font-size: 14px; }
.pub-card h3 a { color: inherit; text-decoration: none; }
.pub-card h3 a:hover { color: var(--mute); text-decoration: none; }
.pub-buy { margin: 12px 0 0; }
.pub-soldout { display: inline-block; margin: 12px 0 0; padding: 9px 14px; border: 1px solid var(--line); color: var(--mute); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.publication-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.publication-cover { background: var(--wash); }
.publication-cover img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.12); }
.publication-cover.placeholder { aspect-ratio: 3 / 4; }
.publication-facts { list-style: none; margin: 0 0 var(--s3); padding: 0; font-size: var(--t-s); }
.publication-facts li { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.publication-facts li:last-child { border-bottom: 1px solid var(--line); }
.publication-facts .fact-label { color: var(--mute); }
.publication-about { max-width: 58ch; margin: var(--s3) 0 0; font-size: 16px; line-height: 1.55; }
.publication-shows { margin-top: var(--s4); }
.publication-shows h2 { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.publication-shows ul { list-style: none; margin: 0; padding: 0; }
.publication-shows a::before { content: "→ "; }
.installation-views { margin-top: -8px; }
/* Zeilenbündige Galerie: flex-grow und flex-basis aus dem Seitenverhältnis (--r), Zeilenhöhe --row; nichts springt, keine Löcher.
   Das ::after-Element schluckt den Rest der letzten Zeile, damit sie nicht aufgeblasen wird. */
.views-lead { margin: 0 0 var(--gap); background: var(--wash); }
.views-lead a { display: block; aspect-ratio: var(--r); max-height: 82vh; overflow: hidden; }
.views-lead img { display: block; width: 100%; height: 100%; object-fit: cover; }
.views { --row: clamp(170px, 14vw, 230px); display: flex; flex-wrap: wrap; gap: var(--gap); list-style: none; margin: 0; padding: 0; }
/* Die letzte Zeile darf nicht auf volle Breite wachsen: höchstens anderthalbfach. */
.views li { flex-grow: calc(var(--r) * 1000); flex-basis: calc(var(--r) * var(--row)); max-width: calc(var(--r) * var(--row) * 1.5); aspect-ratio: var(--r); margin: 0; background: var(--wash); min-width: 0; overflow: hidden; }
.installation-views a { cursor: zoom-in; }
.installation-views img { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.installation-views a:hover img { transform: scale(1.025); opacity: .94; }
.views::after { content: ""; flex-grow: 1000000; }
.views a { display: block; width: 100%; height: 100%; }
.views img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Viewer */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(255,255,255,.97); display: grid; grid-template-rows: 1fr auto; }
.lb[hidden] { display: none; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 48px 72px 8px; }
.lb-stage img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; animation: lb-in .28s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lb-stage figcaption { color: var(--mute); font-size: 13px; margin-top: 10px; min-height: 1.2em; text-align: center; }
.lb-thumbs { list-style: none; margin: 0; padding: 8px 16px 14px; display: flex; gap: 6px; overflow-x: auto; justify-content: safe center; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs li { flex: 0 0 auto; height: 56px; opacity: .45; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s; }
.lb-thumbs li.is-on { opacity: 1; outline-color: var(--ink); }
.lb-thumbs li:hover { opacity: .85; }
.lb-thumbs img { display: block; height: 100%; width: auto; }
.lb button { position: absolute; background: none; border: 0; color: var(--ink); font: 400 40px/1 "Whyte", -apple-system, "Helvetica Neue", Arial, sans-serif; cursor: pointer; padding: 12px 18px; opacity: .8; }
.lb button:hover { opacity: 1; }
.lb-close { top: 8px; right: 12px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-60%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-60%); }

/* Startseiten-Module */
/* Galerien: Karten wie der Service-Block des Merkblatts – Linie oben, fetter Name, Ort darunter */
.gallery-intro { font-size: 18px; line-height: 1.6; color: var(--mute); margin: 0 0 var(--s3); max-width: var(--measure); }
.gallery-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3) var(--gap); }
.gallery-list li { border-top: 1px solid var(--ink); padding-top: 12px; }
.gallery-name { display: block; font-weight: 700; font-size: 18px; line-height: 1.25; }
.gallery-name a:hover { text-decoration: none; color: var(--mute); }
.gallery-city { display: block; color: var(--mute); font-size: var(--t-s); margin-top: 2px; }
.gallery-lines { display: block; margin-top: 8px; color: var(--mute); font-size: var(--t-s); line-height: 1.55; }
.gallery-lines a { color: inherit; }
.gallery-lines a:hover { color: var(--ink); text-decoration: none; }
/* Verweise unter der Adresse: E-Mail, Website, Ausstellungen – klein, gesperrt, mit feiner Linie */
.section-kaufen .hero-image { margin-bottom: var(--s5); }
/* Kaufen-Seite: Galerien über die ganze Breite, drei gleiche Spalten, größer gesetzt */
/* Drop: ein Werk mit Zähler und Kaufen-Knopf; auf der Drops-Seite alle Werke mit Stand */
.drop-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.drop-item[hidden] { display: none; }
/* Farbe des Drops: die Seite würfelt beim Laden einen Ton aus der Palette (Skript setzt --drop auf html); Rot ist der Rückfall. */
:root { --drop: #E8402B; --drop-ink: #E8402B; }
/* Weißer Drop: Schrift auf dem Knopf weiß, Kachel mit feinem Rand, damit sie auf Papier noch als Fläche steht */
.drop-white .drop-compact, .drop-white .drops-hero { outline: 0; }
.drop-white .drop-full .drop-item.is-now { outline: 0; }
.drop-white .drops-hero { padding-left: 0; padding-right: 0; border-top: 2px solid var(--ink); }
/* Startkachel wie die Drops-Seite: weiß, die Drop-Farbe als Kante oben und im Schriftzug, das Werk auf Weiß */
.drop-compact { background: var(--paper); color: var(--ink); padding: clamp(14px, 1.8vw, 22px) 0 var(--s3); border-top: 10px solid var(--drop); }
.drop-compact .drop-word { color: var(--drop); }
.drop-white .drop-compact { border-top-color: var(--ink); }
.drop-white .drop-compact .drop-word { color: var(--ink); }
.drop-compact .drop-state { color: var(--drop); }
.drop-white .drop-compact .drop-state { color: var(--ink); }
.drop-word { font-weight: 800; font-size: clamp(64px, 7.5vw, 110px); line-height: 0.9; letter-spacing: -0.04em; margin: -0.06em 0 0.18em; }
/* Kachel: Zeile und Zähler über die ganze Breite, das Bild rechts neben Titel, Angaben und Knopf */
.drop-compact .drop-item { grid-template-columns: minmax(0, 1fr) minmax(260px, 50%); row-gap: 0; align-items: start; }
.drop-compact .drop-text { display: contents; }
.drop-compact .drop-state, .drop-compact .drop-cd { grid-column: 1 / -1; }
.drop-compact .drop-body { grid-column: 1; grid-row: 3; }
.drop-compact .drop-buy { margin-top: 8px; }
.drop-compact .drop-image { grid-column: 2; grid-row: 3; align-self: start; }
.slot:not(.slot-row) .drop-word, .section-kaufen .drop-word { font-size: clamp(40px, 4.4vw, 68px); }
.slot:not(.slot-row) .drop-cd b, .slot:not(.slot-row) .drop-cd i, .section-kaufen .drop-cd b, .section-kaufen .drop-cd i { font-size: clamp(48px, 5.6vw, 84px); }
.slot:not(.slot-row) .drop-cd .cd-n, .section-kaufen .drop-cd .cd-n { gap: 26px; }
.slot:not(.slot-row) .drop-title, .section-kaufen .drop-title { font-size: clamp(22px, 2.2vw, 30px); }
.slot-half .drop-compact .drop-item { grid-template-columns: minmax(0, 1fr) minmax(150px, 200px); gap: 20px; }
.slot-half .drop-cd b, .slot-half .drop-cd i { font-size: clamp(30px, 3vw, 48px); }
.slot-half .drop-cd .cd-n { gap: 12px; }
.slot-half .drop-cd small { font-size: 10px; letter-spacing: 0.1em; }
.section-kaufen .module-drop { margin: var(--s5) 0; }
.drop-compact .drop-image { background: none; aspect-ratio: auto; outline: 0; justify-self: end; max-width: 100%; }
.drop-compact .drop-image img { height: auto; width: auto; max-width: 100%; max-height: 560px; object-fit: fill; }
/* Vor dem Start zeigt die Kachel das winzige Bild groß gezogen, also unscharf. */
.drop-compact .drop-item.is-up .drop-image img { width: 100%; }
.drop-compact .drop-state, .drop-compact .drop-state .drop-label, .drop-compact .drop-sep { color: var(--ink); }
.drop-compact .drop-state .drop-label { font-weight: 700; }
.drop-cd { display: flex; flex-direction: column; line-height: 1; margin: 8px 0 20px; }
.cd-n { display: flex; gap: 14px; }
.cd-l { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.drop-compact .cd-l, .drop-cd-text .cd-l { display: none; }
.drop-full .drop-image { position: relative; }
.drop-full .drop-cd-over { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 16px 20px 14px; background: var(--drop); color: var(--ink); align-items: flex-start; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.drop-full .drop-item.is-up .drop-cd-over { display: flex; }
.drop-full .drop-cd-over b, .drop-full .drop-cd-over i { font-size: clamp(28px, 3.2vw, 48px); }
.drop-full .drop-cd-over .cd-n { gap: 12px; }
.drop-full .drop-cd-over .cd-l { margin-bottom: 8px; }
.drop-full .drop-cd-text { display: none; }
/* Drops-Seite: rotes Band oben, das laufende Werk als rote Kachel in voller Breite */
.drops-hero { background: var(--drop); color: var(--ink); padding: clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 32px); margin: 0 0 var(--s3); }
.drops-group.single { margin-top: 0; }
.drops-group.single .drops-text { margin: var(--s2) 0 var(--s3); }
.drops-lead { margin: 0 0 14px; max-width: 30ch; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.drops-hero .drop-word { margin: -0.06em 0 0.14em; font-size: clamp(72px, 11vw, 170px); line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; font-weight: 800; font-family: inherit; max-width: none; }
.drops-hero .drops-intro { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; color: var(--ink); }
.drops-hero .drops-rule { margin-top: 12px; font-size: clamp(13px, 1.1vw, 15px); opacity: 0.8; }

/* Das laufende Werk ist der Held: Bild auf drei Fünfteln der Breite, weißes Papier statt Farbfläche, die Farbe nur noch als Marke am Rand und am Knopf. */
.drop-full .drop-item.is-now { background: var(--paper); color: var(--ink); padding: clamp(18px, 2.2vw, 28px) 0 var(--s4); margin: 0; border: 0; border-top: 10px solid var(--drop); grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--s4); align-items: end; }
.drop-full .drop-item.is-now::before { content: none; }
.drop-full .drop-item.is-now .drop-text { order: 2; }
.drop-full .drop-item.is-now .drop-image { order: 1; background: none; aspect-ratio: auto; outline: 0; justify-self: start; max-width: 100%; }
.drop-full .drop-item.is-now .drop-image img { height: auto; width: 100%; max-width: 100%; max-height: 84vh; object-fit: contain; object-position: left bottom; }
.drop-full .drop-item.is-now .drop-cd-text { display: flex; }
.drop-full .drop-item.is-now .drop-cd-text b, .drop-full .drop-item.is-now .drop-cd-text i { font-size: clamp(26px, 2.6vw, 40px); }
.drop-full .drop-item.is-now .drop-cd-text { margin: 4px 0 16px; }
.drop-full .drop-item.is-now .drop-state { color: var(--drop); }
.drop-full .drop-item.is-now .drop-title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 10px; }
.drop-price { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.drop-price s { color: var(--mute); font-size: clamp(18px, 1.8vw, 24px); }
.drop-price b { font-size: clamp(36px, 4vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.drop-price .drop-save { flex-basis: 100%; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--drop); font-weight: 700; margin-top: 4px; }
.drop-white .drop-price .drop-save, .drop-white .drop-full .drop-item.is-now .drop-state { color: var(--ink); }
.drop-avail { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.drop-avail:empty { display: none; }
/* Herkunftskarte: Foto aus der Ausstellung, Text daneben, als Ganzes klickbar */
.drop-origin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: center; margin: 2px 0 18px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.drop-origin img { display: block; width: 92px; height: 68px; object-fit: cover; }
.drop-origin-text { display: block; line-height: 1.35; }
.drop-origin-text small { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
.drop-origin-text b { display: block; font-size: 17px; font-weight: 700; }
.drop-origin-text em { display: block; font-style: normal; font-size: 13px; color: var(--mute); }
.drop-origin-more { grid-column: 2; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
.drop-origin-more::before { content: "→ "; }
a.drop-origin:hover .drop-origin-text b { text-decoration: underline; }
.drop-ship { margin: 10px 0 0; font-size: 13px; color: var(--mute); max-width: 40ch; }
.drop-full .drop-item.is-now .drop-buy { display: block; text-align: center; font-size: 15px; letter-spacing: 0.14em; padding: 18px 22px; }
/* Detailfotos: kleine Reihe unter dem Werk */
.drop-details { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.drop-details li { margin: 0; font-size: 12px; color: var(--mute); }
.drop-details .drop-image { aspect-ratio: 1; background: var(--wash); display: block; margin-bottom: 4px; }
.drop-details img { object-fit: cover; }
.drop-full .drop-item.is-now .drop-state, .drop-full .drop-item.is-now .drop-state .drop-label, .drop-full .drop-item.is-now .drop-sep, .drop-full .drop-item.is-now .drop-caption { color: var(--ink); }
.drop-full .drop-item.is-now .drop-state .drop-label { font-weight: 700; }
.drop-full .drop-item.is-now .drop-title { font-size: clamp(22px, 2.2vw, 30px); }
.drop-full .drop-item.is-now .drop-buy { background: var(--ink); color: var(--drop-ink); font-weight: 700; padding: 15px 22px; }
.drop-white .drop-full .drop-item.is-now .drop-buy { color: var(--paper); }
.drop-full .drop-item.is-now .drop-buy:hover { background: var(--paper); color: var(--ink); }
.drop-full .drop-item.is-now .drop-buy.is-off { background: none; color: var(--ink); border: 2px solid var(--ink); }
.drop-cd b { display: block; font-size: clamp(40px, 4.2vw, 56px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.drop-cd small { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-top: 6px; opacity: 0.75; }
.drop-cd i { font-style: normal; font-size: clamp(40px, 4.2vw, 56px); font-weight: 800; }
.drop-compact .drop-caption { color: var(--ink); opacity: 0.8; }
.drop-compact .drop-buy { background: var(--ink); color: var(--drop-ink); font-weight: 700; padding: 15px 22px; }
.drop-white .drop-compact .drop-buy { color: var(--paper); }
.drop-compact .drop-buy:hover { background: var(--paper); color: var(--ink); }
.drop-compact .drop-buy.is-off { background: none; color: var(--ink); border: 2px solid var(--ink); }
.drop-compact .drop-item.is-up .drop-state .drop-label { color: var(--ink); }
.drop-image { display: block; background: var(--wash); aspect-ratio: 1; }
.drop-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.drop-state { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.drop-state .drop-label { color: var(--ink); font-weight: 500; }
.is-past .drop-state .drop-label, .is-up .drop-state .drop-label { color: var(--mute); }
.drop-timer { font-family: var(--mono, monospace); letter-spacing: 0.04em; }
.drop-sep { color: var(--mute); }
.drop-image[data-zoom][href] { cursor: zoom-in; }
.drop-zoom { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.drop-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.drop-state:has(.drop-timer:empty) .drop-sep { display: none; }
.drop-title { margin: 0 0 4px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.2; }
.drop-caption { margin: 0 0 6px; color: var(--mute); font-size: var(--t-s); }
.drop-facts { margin: 0 0 var(--s2); font-size: var(--t-s); color: var(--ink); }
.drop-lines { list-style: none; margin: 4px 0 var(--s3); padding: 0; font-size: 15px; line-height: 1.6; }
.drop-lines .drop-inv { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); margin-top: 8px; }
.drop-compact .drop-lines { font-size: 16px; line-height: 1.65; margin: 6px 0 var(--s3); }
.drop-compact .drop-lines .drop-inv { color: var(--ink); opacity: 0.7; }
.drop-full .drop-item.is-now .drop-lines .drop-inv { color: var(--ink); opacity: 0.7; }
.drop-compact .drop-facts, .drop-full .drop-item.is-now .drop-facts { color: var(--ink); }
.drop-full .drop-item.is-up .drop-lines, .drop-full .drop-item.is-past .drop-lines { color: var(--mute); }
.drop-buy { display: inline-block; padding: 11px 18px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.drop-buy:hover { background: var(--teal); color: var(--paper); text-decoration: none; }
.drop-buy.is-off { background: none; color: var(--mute); border: 1px solid var(--line); pointer-events: none; }
.drops-intro { max-width: 62ch; margin: 0 0 var(--s5); font-size: 16px; line-height: 1.55; }
.drops-group { margin: 0 0 var(--s6); }
.drops-group h2 { font-weight: 700; font-size: 20px; margin: 0 0 var(--s3); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.drop-full .drop-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.drop-full .drop-item.is-past { opacity: 0.55; }
.drop-full .drop-item.is-past .drop-image img { filter: grayscale(1); }
/* Kommende Werke: auch auf der Farbfläche, das unscharfe Bild mittig, die Zeile darüber. */
.drop-full .drop-item.is-up { background: var(--drop); color: var(--ink); padding: 14px clamp(14px, 1.6vw, 22px); margin: 8px 0 0; border: 0; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s3); align-items: center; text-align: left; }
.drop-full .drop-item.is-up .drop-text { order: 2; width: 100%; }
.drop-full .drop-item.is-up .drop-image { order: 1; width: 150px; max-width: 150px; margin: 0; background: none; }
.drop-full .drop-item.is-up .drop-cd-over { position: static; transform: none; display: flex; padding: 0; background: none; color: var(--ink); box-shadow: none; margin-top: 2px; }
.drop-full .drop-item.is-up .drop-cd-over b, .drop-full .drop-item.is-up .drop-cd-over i { font-size: clamp(22px, 2.4vw, 34px); }
.drop-full .drop-item.is-up .drop-cd-over small { font-size: 10px; }
.drop-full .drop-item.is-up .drop-state { margin: 0 0 4px; font-size: 12px; }
.drop-full .drop-item.is-up .drop-image { outline-width: 3px; }
.drop-full .drop-item.is-past { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: 14px 0; }
.drop-full .drop-item.is-past .drop-image { width: 150px; }
.drop-full .drop-item.is-up .drop-state, .drop-full .drop-item.is-up .drop-state .drop-label, .drop-full .drop-item.is-up .drop-sep { color: var(--ink); }
.drop-full .drop-item.is-up .drop-state .drop-label { font-weight: 700; }
.drop-full .drop-item.is-up .drop-cd-over { background: none; color: var(--ink); box-shadow: none; }
.drop-white .drop-full .drop-item.is-up { outline: 0; border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; }
.drop-white .drop-full .drop-item.is-up:last-child { border-bottom: 1px solid var(--line); }
.drop-white .drop-full .drop-item.is-up .drop-cd-over { color: var(--paper); }
.drop-full .drop-item.is-up .drop-image { overflow: hidden; }
/* Die Unschärfe steckt schon in der Datei; darüber wabert der Flüssigkeitsfilter (SVG auf der Drops-Seite), das Bild ist etwas vergrößert, damit der Rahmen dabei gefüllt bleibt. */
.drop-full .drop-item.is-up .drop-image img { object-fit: cover; transform: scale(1.3); }
/* Nur im Sichtbereich: eigener Filter je Werk (feste Turbulenz), das Bild treibt langsam dahinter durch, so wabert es ohne Neuberechnung des Rauschens. */
.drop-full .drop-item.is-up.in-view .drop-image img { filter: var(--liq); animation: liq 9s ease-in-out infinite alternate; }
@keyframes liq { 0% { transform: scale(1.3) translate(0, 0); } 50% { transform: scale(1.38) translate(2.5%, -2%); } 100% { transform: scale(1.32) translate(-2%, 2.5%); } }
@media (prefers-reduced-motion: reduce) { .drop-full .drop-item.is-up.in-view .drop-image img { animation: none; } }
.drop-full .drop-item.is-up .drop-image { outline: 3px solid var(--ink); outline-offset: 0; }
.drop-full .drop-item.is-up .drop-title { color: var(--mute); }
.drops-text { max-width: 62ch; margin: 0 0 var(--s4); font-size: 16px; line-height: 1.55; }
.drops-text p { margin: 0 0 1em; }
@media (max-width: 800px) { .drop-item, .drop-compact .drop-item, .slot-half .drop-compact .drop-item { grid-template-columns: 1fr; } .drop-full .drop-item.is-now { margin: 0; } .drop-compact .drop-image { grid-column: 1; grid-row: 2; max-width: 240px; justify-self: center; margin: 4px 0 18px; }
  /* Kachel auf dem Handy: alles mittig, Bild gleich unter dem Wort DROP */
  .drop-compact { text-align: center; }
  .drop-compact .drop-word { text-align: center; }
  .drop-compact .drop-state { grid-row: 3; }
  .drop-compact .drop-cd { grid-row: 4; align-items: center; }
  .drop-compact .drop-cd .cd-n { justify-content: center; }
  .drop-compact .drop-body { grid-row: 5; }
  .drop-compact .drop-lines { text-align: center; }
  .drop-compact .drop-buy { display: block; width: 100%; margin-top: 14px; padding: 18px 20px; font-size: 15px; letter-spacing: 0.14em; } .drop-cd b, .drop-cd i, .slot-half .drop-cd b, .slot-half .drop-cd i, .slot:not(.slot-row) .drop-cd b, .slot:not(.slot-row) .drop-cd i, .section-kaufen .drop-cd b, .section-kaufen .drop-cd i { font-size: clamp(26px, 7.2vw, 40px); } .drop-cd .cd-n, .slot-half .drop-cd .cd-n, .slot:not(.slot-row) .drop-cd .cd-n, .section-kaufen .drop-cd .cd-n { gap: 8px; } .slot:not(.slot-row) .drop-word, .section-kaufen .drop-word { font-size: clamp(48px, 12vw, 76px); } .slot:not(.slot-row) .drop-title, .section-kaufen .drop-title { font-size: 22px; } .drop-full .drop-cd-over { padding: 12px 14px 10px; } .drop-full .drop-cd-over b, .drop-full .drop-cd-over i { font-size: clamp(22px, 6vw, 34px); } .drop-full .drop-item.is-now { grid-template-columns: 1fr; text-align: center; } .drop-full .drop-item.is-now::before { text-align: center; } .drop-full .drop-item.is-now .drop-image { order: 1; justify-self: center; max-width: 240px; margin: 4px 0 18px; } .drop-full .drop-item.is-now .drop-text { order: 2; } .drop-full .drop-item.is-now .drop-cd-text { align-items: center; } .drop-full .drop-item.is-now .drop-cd-text .cd-n { justify-content: center; } .drop-full .drop-item.is-now .drop-lines { text-align: center; } .drop-full .drop-item.is-now .drop-buy { display: block; width: 100%; margin-top: 14px; padding: 18px 20px; font-size: 15px; letter-spacing: 0.14em; } .drop-full .drop-item.is-now .drop-cd-text b, .drop-full .drop-item.is-now .drop-cd-text i { font-size: clamp(26px, 7.2vw, 40px); } }
.section-kaufen .gallery-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--gap); }
.section-kaufen .gallery-list li { border-top: 2px solid var(--ink); padding-top: 16px; }
.section-kaufen .gallery-name { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.section-kaufen .gallery-city { font-size: 15px; margin-top: 6px; }
.section-kaufen .gallery-links { margin-top: 16px; font-size: 12px; }
@media (max-width: 800px) { .section-kaufen .gallery-list { grid-template-columns: 1fr; } }
/* Kontaktseite: Karten im Raster; Rechtstexte: ruhige Spalte */
.page-head .lead { max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: var(--s4) 0 var(--s6); }
.contact-card { background: #D7F1E4; color: var(--ink); padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 6px; min-height: 220px; }
.contact-card .kicker { color: #1F6B4F; }
.contact-card a:not(.drop-buy) { color: var(--ink); }
.contact-card .drop-buy { background: var(--ink); color: #D7F1E4; }
.contact-card .drop-buy:hover { background: #1F6B4F; color: var(--paper); }
.contact-card .drop-buy.is-link { background: none; color: var(--ink); border-color: var(--ink); }
.contact-card h2 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.15; margin: 0 0 6px; }
.contact-card .kicker { margin: 0 0 4px; }
.contact-address, .contact-line { margin: 0; font-size: 15px; line-height: 1.5; }
.contact-action { margin: auto 0 0; padding-top: 14px; }
.contact-action .drop-buy + .drop-buy { margin-left: 8px; }
.drop-buy.is-link { background: none; color: var(--ink); border: 1px solid var(--ink); padding: 10px 17px; }
.legal { max-width: 72ch; }
.legal h2 { font-size: 17px; font-weight: 700; margin: var(--s4) 0 8px; }
.legal p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.legal code { font-family: var(--mono, monospace); font-size: 13px; background: var(--wash); padding: 1px 5px; }
.legal-list { margin: var(--s3) 0; padding: 0; }
.legal-row { display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.legal-row:last-child { border-bottom: 1px solid var(--line); }
.legal-row dt { color: var(--mute); margin: 0; }
.legal-row dd { margin: 0; }
.legal-note { color: var(--mute); font-size: 13px; margin-top: var(--s4); }
.drops-terms { margin: var(--s3) 0 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.drops-terms a { color: var(--mute); }
.legal ol, .legal ul { padding-left: 1.3em; font-size: 15px; line-height: 1.6; }
.legal li { margin: 0 0 8px; }
.purchase-ways { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: var(--s3); }
.purchase-ways a { display: inline-block; padding: 10px 16px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.purchase-ways a:hover { background: var(--ink); color: var(--paper, #fff); }
.purchase-intro + .shown-works { margin-top: var(--s5); }
/* Startseite: eine Zeile je Galerie, Name, Adresse, Verweise, Haarlinien dazwischen. Kein Raster, nichts rutscht allein in eine zweite Reihe. */
.gallery-rows { display: block; border-top: 2px solid var(--ink); }
.gallery-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px var(--gap); align-items: baseline; border-top: 1px solid var(--line); padding: 18px 0; }
.gallery-rows li:first-child { border-top: 0; }
.gallery-rows .gallery-name { font-size: clamp(19px, 1.7vw, 23px); }
.gallery-rows .gallery-lines { margin-top: 0; }
.gallery-rows .gallery-links { margin-top: 0; justify-self: end; justify-content: flex-end; white-space: nowrap; }
@media (max-width: 800px) { .gallery-rows li { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; } .gallery-rows .gallery-links { justify-self: start; justify-content: flex-start; margin-top: 8px; white-space: normal; } }
.gallery-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.gallery-links a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.gallery-links a:hover { border-color: var(--ink); }
/* Ort-Seite: Kontaktdaten als Zeilen mit Etikett links */
.venue-contact-list li { display: grid; grid-template-columns: 9em 1fr; gap: var(--s1); padding: 10px 0; border-bottom: 1px solid var(--line); }
.venue-label { color: var(--mute); font-size: var(--t-s); }
.slot + .slot { margin-top: 96px; }
.slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--gap); align-items: start; }
.slot-half .section-head, .slot-half .publications h2 { margin-top: 0; }
.slot-half .module-text { max-width: none; }
.work-card { display: block; color: inherit; text-decoration: none; }
.work-card:hover { text-decoration: none; }
.work-card-image { background: var(--wash); display: flex; justify-content: center; align-items: center; }
.work-card-image img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.work-card-title { margin: var(--s3) 0 4px; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.005em; line-height: 1; }
.work-card:hover .work-card-title { color: var(--mute); }
.work-card-meta { margin: 0; color: var(--mute); font-size: var(--t-s); }
.slot-half .pub-card { grid-template-columns: 120px 1fr; gap: 20px; }
.slot-half .grid-exhibitions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slot-half .grid-series { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Serienübersicht: zwei große Spalten */
.grid-series.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
/* Serien als Zeilen (Startseite): Bild auf zwei Dritteln, Text daneben unten bündig, Bildseite wechselnd */
.series-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.series-row a { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s4); align-items: end; text-decoration: none; color: var(--ink); }
.series-row.alt a { grid-template-columns: 1fr 2fr; }
.series-row.alt .sr-image { order: 2; }
/* Hochformate nicht über die ganze Spalte ziehen: Breite aus Seitenverhältnis und höchstens 78 % der Fensterhöhe; in der Wechselzeile rückt das Bild an den Text */
.sr-image { margin: 0; width: min(100%, calc(78vh * var(--r, 1))); }
.series-row.alt .sr-image { margin-left: auto; }
.sr-image img { display: block; width: 100%; height: auto; }
.sr-image .tile-empty { display: block; aspect-ratio: 4 / 3; }
.sr-text { padding-bottom: 4px; }
.sr-title { font: 500 clamp(28px, 3.2vw, 46px)/1.05 "Inktrap Super", "Whyte", -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em; margin: 0 0 10px; }
.sr-kicker { margin: 0 0 10px; color: var(--mute); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.sr-meta { margin: 0 0 14px; color: var(--mute); font-size: 15px; line-height: 1.5; }
.sr-fact { display: block; }
.sr-lead { margin: 0 0 18px; font-size: 17px; line-height: 1.55; max-width: 36ch; }
.sr-more { display: inline-block; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.sr-more::before { content: "→ "; }
.series-row a:hover .sr-title { color: var(--mute); }
.series-row a:hover .sr-more { text-decoration: underline; }
.module-works.columns-2 .grid { grid-template-columns: repeat(2, 1fr); }
.module-works.columns-3 .grid { grid-template-columns: repeat(3, 1fr); }
.module-works.columns-4 .grid { grid-template-columns: repeat(4, 1fr); }
.slot-half .module-works .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.strip { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hero-meta { margin: 0.3em 0 0; color: var(--mute); }
.module-text { max-width: 760px; }
/* Startseite: Bild in voller Breite und ein Katalog */
.module-image figure img { width: 100%; }
.module-image figcaption { margin-top: var(--s1); color: var(--mute); font-size: var(--t-s); }
.module-image .kicker { margin-bottom: var(--s2); }
/* Video: 16:9, schwarz, Abspielknopf mittig; der Player ersetzt den Knopf nach dem Klick */
.video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 var(--s4); background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: none; border: 0; color: #fff; cursor: pointer; font: inherit; padding: var(--s3); }
.video-icon { width: 72px; height: 72px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: 26px; padding-left: 5px; transition: transform 0.2s ease; }
.video-play:hover .video-icon { transform: scale(1.06); }
.video-title { font-weight: 700; font-size: var(--t-lead); }
.video-note { font-size: 12px; opacity: 0.6; }
.video figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; font-size: var(--t-s); color: var(--mute); }
.video:has(figcaption) { margin-bottom: calc(var(--s4) + 28px); }
.module-publication .publications { margin: 0; }
.module-publication .publications h2 { border-top-color: var(--ink); }
.module-picked .grid-exhibitions { margin: 0; }
.module-text.with-figure { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); max-width: none; align-items: start; }
.module-text .text-body p { font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.module-text .text-body h2 { font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; margin: 0 0 var(--s3); }
.text-figure img { width: 100%; }
.text-figure figcaption { margin-top: 6px; color: var(--mute); font-size: 0.9em; }

/* Vita: Ausstellungsliste als ruhige Textkolumne */
.vita { max-width: 820px; }
.vita-intro { font-size: 1.1em; line-height: 1.55; max-width: 64ch; margin: 0 0 40px; }
.vita h2 { font-size: 14px; font-weight: 400; color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase; margin: 48px 0 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.cv { margin: 0; }
.vita h2 { font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin: var(--s5) 0 var(--s3); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.vita-intro p { font-size: 18px; line-height: 1.6; max-width: var(--measure); text-wrap: pretty; }
.cv-year { display: grid; grid-template-columns: 72px 1fr; gap: 0 var(--s3); padding: var(--s2) 0; align-items: start; }
.cv-year + .cv-year { border-top: 1px solid var(--line); }
.cv-year h3 { margin: 0; font-size: inherit; font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; }
.cv-year ul { list-style: none; margin: 0; padding: 0; }
.cv-year li + li { margin-top: var(--s2); }
.cv-title { font-weight: 700; }
/* Pfeil hinter Ausstellungen mit eigener Seite: zeigt, wo es weitergeht; rückt beim Zeigen ein Stück vor. */
.cv-go { display: inline-block; margin-right: 0.4em; font-weight: 700; color: var(--ink); transition: transform 0.2s ease; }
.cv-title a:hover .cv-go { transform: translateX(4px); }
.exhibition-row a:hover .cv-go { transform: translateX(4px); }
/* Fette Links (Vita, Publikationen, Stationen, Überschriften): nie unterstrichen */
.cv-title a:hover, h1 a:hover, h2 a:hover, h3 a:hover, .pub-text h3 a:hover, .station-body h3 a:hover { text-decoration: none; color: var(--mute); }
.cv-place { color: var(--mute); }
.cv-meta { display: block; margin-top: 3px; font-size: var(--t-s); color: var(--mute); }
.cv-artists { display: block; margin-top: 2px; font-size: var(--t-s); color: var(--mute); font-weight: 300; }
@media (max-width: 800px) { .cv-year { grid-template-columns: 1fr; gap: 4px; } }

/* Zertifikat */
.certificate { max-width: 820px; }
.certificate .cert-artist { color: var(--mute); margin-top: -0.4em; }
.cert-image img { width: 100%; max-height: 60vh; object-fit: contain; background: var(--wash); }
.cert-data { border-collapse: collapse; margin: 24px 0; width: 100%; }
.cert-data th { text-align: left; font-weight: 500; color: var(--mute); padding: 6px 16px 6px 0; width: 180px; vertical-align: top; }
.cert-data td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.cert-status { padding: 10px 14px; border: 1px solid var(--line); display: inline-block; }
.cert-status.ok { border-color: #2e9e6b; color: #2e9e6b; }
.cert-status.pending { color: var(--mute); }
.cert-proof dl { margin: 16px 0; }
.cert-proof dt { color: var(--mute); margin-top: 10px; }
.cert-proof dd { margin: 2px 0 0; }
.cert-proof code { font-size: 0.85em; word-break: break-all; }
.cert-files { list-style: none; padding: 0; display: flex; gap: 18px; }
.cert-howto { color: var(--mute); font-size: 0.95em; }
    .verify h2 { font-size: 14px; color: var(--mute, #777); font-weight: 400; margin: 32px 0 12px; padding-top: 12px; border-top: 1px solid var(--line, #ddd); }
    .checks { list-style: none; margin: 0 0 16px; padding: 0; }
    .checks li { display: grid; grid-template-columns: 28px 220px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line, #ddd); align-items: baseline; }
    .checks .mark { font-weight: 700; font-variant-numeric: tabular-nums; }
    .checks .detail { color: var(--mute, #777); font-size: 0.92em; overflow-wrap: anywhere; }
    .checks .detail a { margin-left: 6px; }
    .checks li.ok .mark { color: #2e9e6b; } .checks li.bad .mark, .checks li.bad .detail { color: #d8432c; } .checks li.wait .mark { color: #c58a00; }
    .dropzone { border: 1px dashed var(--mute, #999); padding: 18px; color: var(--mute, #777); cursor: pointer; }
    .dropzone.over { border-color: var(--ink, #111); color: var(--ink, #111); background: var(--wash, #f3f1ec); }
    .dropzone p { margin: 0; font-size: 0.92em; } .dropzone input { display: none; }
    .verify-note { color: var(--ink, #111); font-size: 0.95em; min-height: 1.4em; }
    @media (max-width: 700px) { .checks li { grid-template-columns: 24px 1fr; } .checks .detail { grid-column: 2; } }

/* Schmale Bildschirme */
@media (max-width: 800px) {
  .module-works.columns-3 .grid, .module-works.columns-4 .grid { grid-template-columns: repeat(2, 1fr); }
  .module-text.with-figure { grid-template-columns: 1fr; }
  .slot-row { grid-template-columns: 1fr; gap: 0; }
  .publication-body { grid-template-columns: 1fr; }
  /* Drops-Band auf dem Telefon: bis an den Rand, das Wort füllt die Breite */
  .drops-hero { margin: calc(-1 * var(--s2)) calc(-1 * var(--gutter)) var(--s3); padding: 26px var(--gutter) 24px; }
  .drops-hero .drop-word { font-size: 23.5vw; letter-spacing: -0.05em; margin: -0.08em 0 0.1em; }
  .drops-lead { font-size: 24px; max-width: none; }
  .drop-full .drop-item.is-now { grid-template-columns: 1fr; border-top-width: 8px; }
  .drop-full .drop-item.is-now .drop-image img { max-height: none; }
  .drop-full .drop-item.is-up, .drop-full .drop-item.is-past { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .drop-full .drop-item.is-up .drop-image, .drop-full .drop-item.is-past .drop-image { width: 96px; max-width: 96px; }
  .drop-full .drop-item.is-up .drop-cd-over b, .drop-full .drop-item.is-up .drop-cd-over i { font-size: 20px; }
  /* Fußzeile auf dem Telefon: ein Punkt je Zeile, Copyright darunter */
  .site-footer { flex-direction: column-reverse; align-items: stretch; gap: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
  .footer-nav { flex-direction: column; gap: 0; }
  .footer-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
  .footer-nav a:last-child { border-bottom: 0; }
  .site-copyright { font-size: 12px; }
  .contact-grid { grid-template-columns: 1fr; }
  .legal-row { grid-template-columns: 1fr; gap: 2px; }
  .slot-row .slot-half + .slot-half .section-head { margin-top: var(--s5); }
  .work { grid-template-columns: 1fr; }
  .exhibition-row a, .exhibition-row .plain { grid-template-columns: 1fr; gap: 2px; }
  .exhibition-row:not(.ann) .exhibition-kind { text-align: left; }
  .with-shots .exhibition-row a { grid-template-columns: 56px 1fr; column-gap: var(--s2); }
  .with-shots .ann-poster.shot { grid-row: 1 / span 4; }
  .views { --row: 150px; gap: 6px; }
  /* Telefon: Aufmacher groß, darunter ein Raster kleiner Quadrate statt Bild für Bild über die volle Breite. */
  .installation-views .views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .installation-views .views li { flex: none; max-width: none; aspect-ratio: 1; }
  .views.station-views { --row: 72px; gap: 3px; }
  .views-lead { margin-bottom: 6px; }
  .lb-stage { padding: 44px 8px 6px; }
  .lb-prev, .lb-next { display: none; }
  .pub-list { grid-template-columns: 1fr; }
  .station { grid-template-columns: 1fr; gap: 6px; }
  .pub-card { grid-template-columns: 110px 1fr; gap: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
  .grid-series.two { grid-template-columns: 1fr; gap: var(--s4); }
  .series-row a, .series-row.alt a { grid-template-columns: 1fr; gap: 12px; }
  .series-row.alt .sr-image { order: 0; margin-left: 0; }
  .sr-image { width: 100%; }
  .sr-lead { max-width: none; }
  .works-index .grid-works { column-count: 2; column-gap: var(--s2); }
  .works-index .grid-works.masonry { gap: 0 var(--s2); }
  /* Telefon: niedrige Zeilen, damit zwei Werke nebeneinander passen (ein Werk darf bis anderthalbfach wachsen) */
  .works-index .grid-works.rows { --row: 150px; gap: 8px; }
  .works-index .tile-work { margin-bottom: var(--s2); }
  .folio { grid-template-columns: 1fr; gap: var(--s5); }
  .wf-label { min-width: 100%; line-height: 1.6; }
  /* Kopf auf dem Telefon: feste Leiste mit Milchglas, durchsichtig; das Menü klappt darunter auf und liegt mit im selben Milchglas */
  body { padding-top: var(--bar-h, 64px); }
  .site-top { position: fixed; top: 0; left: 0; right: 0; display: block; padding: 0; background: transparent; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: background 0.2s ease; }
  .site-top.is-open { background: rgba(255, 255, 255, 0.62); }
  .site-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter) 12px; }
  .site-name { font-size: 26px; margin: 0; }
  .nav-toggle { display: block; flex: none; }
  .site-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter) 18px; background: transparent; border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); font-size: 15px; letter-spacing: 0.1em; }
  body.nav-open .site-nav { display: flex; }
  .site-nav a { display: block; padding: 14px 0; border: 0; color: var(--ink); white-space: nowrap; }
  .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
  .nav-showroom { margin-left: 0; padding-left: 0; border-left: 0; }
  .lang-switch { position: static; display: flex; gap: 14px; padding: 16px 0 0; font-size: 14px; }
  .lang-switch a { padding: 0; border: 0; }
  .lang-sep { display: none; }
  .site-main { padding-top: var(--s2); }
  /* Aufmacher auf dem Handy: enger gesetzt, Bild dichter am Menü, Text dichter am Bild */
  .hero-title { font-size: clamp(40px, 12.5vw, 60px); }
  .hero-text { padding-top: var(--s3); gap: 10px; }
  .hero-dates { font-size: 13px; }
  .site-name { font-size: 28px; }
  .hero-carousel { aspect-ratio: 4 / 3; }
  .tile figcaption { font-size: 12.5px; }
}


/* style-extra.css */
/* Feinschliff zum Prüfen (28.10.2026). Liegt in der Bibliothek unter homepage/style-extra.css und wird hinten ans Stylesheet gehängt. */

/* 6 · Seitenwechsel als weiche Überblendung (Safari 18.2+, Chrome 126+; sonst normaler Wechsel) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }

/* 7 · Sanftes Auftauchen beim Scrollen, einmalig, ohne JavaScript (scroll-getriebene Animation; ältere Browser zeigen alles sofort) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile, .views li, .views-lead, .cv-year, .exhibition-row, .pub-card, .station {
      animation: rise .6s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}
/* Die Werkübersicht steht in CSS-Spalten; dort berechnet Safari die Sichtbarkeit falsch und lässt Kacheln unsichtbar. Deshalb ohne Auftauchen. */
.works-index .tile { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 8 · Aufmacher: das Bild läuft beim Scrollen etwas langsamer als der Text (Parallax), nur mit Bewegung erlaubt */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-image { overflow: hidden; }
    .hero-carousel img, .hero-image > img {
      animation: hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}
@keyframes hero-drift { to { transform: translateY(16%) scale(1.06); } }

/* 9 · Vita: das Jahr als ruhiges Register am Rand – gleiche Größe wie der Titel, Whyte, auf der Grundlinie der ersten Zeile,
   bleibt beim Scrollen stehen; die Titel tragen die Zeile, dazwischen mehr Luft */
.cv-year { grid-template-columns: 84px 1fr; gap: 0 var(--s3); padding: 26px 0; align-items: start; }
.cv-year h3 { position: sticky; top: 104px; margin: 0; font-family: "Whyte", sans-serif; font-weight: 500; font-size: 17px; line-height: 1.35; letter-spacing: 0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-year li + li { margin-top: 18px; }
.cv-title { font-weight: 600; font-size: 17px; line-height: 1.35; }
.cv-place { font-size: 17px; line-height: 1.35; color: var(--mute); }
.cv-meta { margin-top: 4px; font-size: 13px; letter-spacing: 0.01em; }
.cv-artists { font-size: 13px; }
.cv-year + .cv-year { border-top: 1px solid var(--line); }
@media (max-width: 800px) {
  .cv-year { grid-template-columns: 1fr; padding: 18px 0; }
  .cv-year h3 { position: static; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
}

/* 13 · Ausstellungs- und Werk-Kacheln feiner: dünne helle Linien, mittleres statt fettes Gewicht, Jahr zurückgenommen */
.year-group .year { border-top: 1px solid var(--line); font-weight: 500; font-size: 16px; color: var(--ink); padding-top: 16px; }
.exhibition-tile .tile-text { border-top: 1px solid var(--line); padding-top: 10px; }
.exhibition-tile .exhibition-title { font-weight: 500; font-size: 16px; letter-spacing: 0; }
.exhibition-tile .tile-meta { font-size: 13px; }
.exhibition-tile .tile-kind { font-size: 10.5px; letter-spacing: .12em; color: var(--dot); margin-top: 6px; }
.page-head .count { font-size: 0.4em; }