/* =========================================================================
   MAJORES GALERIE — München
   Bilder (generativ, synthetisch, klassisch) · Bildberatung · Kunst & Kapital

   Raster, Typo-Skala und Abstände folgen dem redaktionellen System, das wir
   von gagosian.com/premieres ausgemessen haben. Neu gegenüber der Vorlage:
   Inter Tight als Interface-Schrift, wechselnde Bildformate statt 16:9,
   Filter, Werkdetail mit Anfrageformular.

   Wortmarke ist der Name, gesetzt — kein Bildzeichen.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, li, figure, form { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Tokens ---------- */
:root {
  /* Graustufen */
  --gray-200: #f2f2f2;
  --gray-300: #cccccc;
  --gray-400: #b2b2b2;
  --gray-500: #a7a7a7;
  --gray-600: #909090;
  --gray-700: #646464;
  --gray-800: #222222;
  --gray-900: #111111;
  --field-dark: #444444;
  --field-dark-placeholder: #838383;

  /* Container */
  --screen-3xl: 1832px;      /* äußerer Rahmen  */
  --screen-xl-nopad: 1224px; /* Inhaltsspalte   */

  /* Akzent ausschliesslich für Tastaturfokus und den Anfrage-Button. */
  --akzent: #3B5BFF;

  /* Schriften — alle frei lizenziert. Serif trägt Fließtext und
     Überschriften, Saira das Display-Band, Inter Tight alles Funktionale. */
  --font-serif:      "Crimson Pro", "Times New Roman", serif;
  --font-serif-cond: "Crimson Pro", "Times New Roman", serif;
  --font-display:    "Saira Extra Condensed", Haettenschweiler, Impact, sans-serif;
  --font-sans:       "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Stauchung des Display-Bands. 1 = unverzerrt, kleiner = kompakter.
     0,82 hält die schmale, plakative Anmutung, ohne dass die Striche
     sichtbar dünner werden. */
  --gh-squeeze: 0.82;

  /* Theme (hell) */
  --bg: #ffffff;
  --fg: var(--gray-900);
  --rule: var(--gray-300);
  --link-hover: var(--gray-400);
  --nav-idle: var(--gray-400);
  --nav-active: var(--gray-900);
  --field-bg: var(--gray-200);
  --field-fg: var(--gray-900);
  --field-placeholder: var(--gray-500);
  --field-border: var(--gray-200);
  --field-border-focus: var(--gray-900);
  --btn-border: var(--gray-900);
  --btn-border-hover: var(--gray-300);
  --btn-bg: #ffffff;
}

[data-theme="dark"] {
  --bg: var(--gray-800);
  --fg: #ffffff;
  --rule: var(--gray-700);
  --link-hover: var(--gray-600);
  --nav-idle: var(--gray-600);
  --nav-active: #ffffff;
  --field-bg: var(--field-dark);
  --field-fg: #ffffff;
  --field-placeholder: var(--field-dark-placeholder);
  --field-border: var(--field-dark);
  --field-border-focus: #ffffff;
  --btn-border: #ffffff;
  --btn-border-hover: var(--gray-700);
  --btn-bg: var(--gray-800);
}

/* =========================================================================
   Typografie-Skala
   ========================================================================= */
body {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: calc(22.5 / 19);
  color: var(--gray-900);
  background: #fff;
  font-feature-settings: "onum", "pnum", "kern", "liga" 0;
  -webkit-font-smoothing: antialiased;
}

/* Fließtext */
.type-m-sm, .type-m-md, .type-m-lg {
  font-family: var(--font-serif);
  font-weight: 400;
  word-spacing: -0.03em;
  font-feature-settings: "onum", "pnum", "kern", "liga" 0;
  line-height: var(--lineHeight);
}
.type-m-sm { font-size: 1.09375rem; --lineHeight: calc(20 / 17.5);   --trim-t: -0.22em; --trim-b: -0.22em; }
.type-m-md { font-size: 19px;      --lineHeight: calc(22.5 / 19);    --trim-t: -0.26em; --trim-b: -0.26em; }
.type-m-lg { font-size: 20px;      --lineHeight: calc(24 / 20);      --trim-t: -0.24em; --trim-b: -0.25em; }

/* Überschriften */
.type-mc-2xs, .type-mc-xs, .type-mc-sm, .type-mc-md, .type-mc-lg, .type-mc-xl {
  font-family: var(--font-serif-cond);
  font-weight: 700;
  line-height: var(--lineHeight);
  font-feature-settings: "onum" 0, "pnum", "kern", "liga" 0;
}
.type-mc-2xs { font-size: 1.1875rem; --lineHeight: calc(22.5 / 19); --trim-t: -0.2em;  --trim-b: -0.3em; }
.type-mc-xs  { font-size: 1.3125rem; --lineHeight: calc(22 / 21);   --trim-t: -0.18em; --trim-b: -0.22em; }
.type-mc-sm  { font-size: 1.5rem;    --lineHeight: 1;               --trim-t: -0.13em; --trim-b: -0.2em; }
.type-mc-md  { font-size: 1.625rem;  --lineHeight: 1; letter-spacing: -0.015em; --trim-t: -0.18em; --trim-b: -0.17em; }
.type-mc-lg  { font-size: 1.875rem;  --lineHeight: 1; letter-spacing: -0.015em; --trim-t: -0.16em; --trim-b: -0.2em; }
.type-mc-xl  { font-size: 2.1875rem; --lineHeight: 1; letter-spacing: -0.015em; --trim-t: -0.16em; --trim-b: -0.2em; }

/* Display-Band, immer Versalien */
.type-gh-sm, .type-gh-md, .type-gh-lg, .type-gh-xl {
  font-family: var(--font-display);
  font-weight: 900;
  --lineHeight: calc(60 / 75);
  line-height: var(--lineHeight);
  text-transform: uppercase;
  font-feature-settings: "clig" 0, "liga" 0;
  --trim-t: 0.0145em;
  --trim-b: -0.1125em;
  /* Laufweiten-Korrektur: Satzbreite wird um 1/Faktor aufgeweitet und
     anschließend zurückskaliert — dadurch brechen die Zeilen korrekt.
     Bei --gh-squeeze:1 passiert nichts. */
  display: block;
  width: calc(100% / var(--gh-squeeze));
  transform: scaleX(var(--gh-squeeze));
  transform-origin: left top;
}
.type-gh-sm { font-size: 3.125rem;  letter-spacing: 0.01em; }
.type-gh-md { font-size: 3.75rem;   letter-spacing: 0.01em; }
.type-gh-lg { font-size: 4.6875rem; }

/* Interface & Formulare */
.type-america-xs, .type-america-sm, .type-america-md {
  font-family: var(--font-sans);
  line-height: var(--lineHeight);
  font-feature-settings: "ss01", "onum" 0, "pnum";
  letter-spacing: -0.007em;
  word-spacing: -0.02em;
}
.type-america-xs { font-size: 0.78125rem; --lineHeight: calc(15 / 12.5);   -webkit-text-stroke: 0.1px; --trim-t: -0.28em;  --trim-b: -0.24em; }
.type-america-sm { font-size: 0.96875rem; --lineHeight: calc(19.5 / 15.5); --trim-t: -0.28em;  --trim-b: -0.28em; }
.type-america-md { font-size: 1.125rem;   --lineHeight: calc(22.5 / 18);   --trim-t: -0.215em; --trim-b: -0.265em; }

/* Leading-Trim: kappt den Zeilenabstand über/unter dem Textblock, damit
   Abstände auf die Schriftkante statt auf die Zeilenbox referenzieren. */
.type-adjust > *::before,
.type-adjust > *::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-top: 1px;
}
.type-adjust > *::before { margin-bottom: calc(var(--trim-t, -0.26em) - 1px); }
.type-adjust > *::after  { margin-top:    calc(var(--trim-b, -0.26em) - 1px); }

.font-normal { font-weight: 400; }
em, i { font-style: italic; }

/* Abstand zwischen mehreren Absätzen in einem Textblock. */
.card-desc p + p, .prose p + p { margin-top: 0.703125em; }

/* =========================================================================
   Raster & Container
   ========================================================================= */
.outer { margin: 0 auto; width: 100%; max-width: var(--screen-3xl); }
.pad   { width: 100%; padding-left: 16px; padding-right: 16px; }
.container {
  margin: 0 auto;
  width: 100%;
  max-width: var(--screen-xl-nopad);
}
@media (min-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
}
@media (min-width: 768px)  { .grid12 { column-gap: 20px; } }
@media (min-width: 1024px) { .grid12 { column-gap: 32px; } }

.col-12 { grid-column: span 12 / span 12; }
@media (min-width: 768px) {
  .md-col-6      { grid-column: span 6 / span 6; }
  .md-col-1-7    { grid-column: 1 / 7; }
  .md-col-9-13   { grid-column: 9 / 13; }
}

.rule {
  width: 100%;
  border-bottom: 1px solid var(--rule);
}

/* =========================================================================
   Kopfzeile
   ========================================================================= */
.skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: static; width: auto; height: 36px; clip: auto;
  font-weight: 700; line-height: 36px;
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10001;
  background: #fff;
  margin: 0 auto;
  max-width: var(--screen-3xl);
}
.page { padding-top: 36px; }

.nav-inner { width: 100%; padding: 0 16px; position: relative; }
.nav-inner a { font-weight: 700; }
.nav-row { display: flex; align-items: center; }
.nav-logo a { display: block; height: 36px; line-height: 36px; }
.nav-toggle {
  display: none;
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font-weight: 700;
  color: var(--gray-400);
  outline: none;
  cursor: pointer;
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.nav-toggle:hover { color: var(--gray-900); }

.nav-link {
  display: block;
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
  color: var(--gray-400);
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.nav-link:hover { color: var(--gray-900); }
.nav-link[aria-current="page"] { color: var(--gray-900); }

/* einzeilig */
.nav-inner[data-wrapped="false"] { display: flex; flex-wrap: nowrap; }
.nav-inner[data-wrapped="false"] .nav-logo { margin-right: 25px; }
.nav-inner[data-wrapped="false"] .nav-lists { display: flex; min-width: 0; flex-grow: 1; }
.nav-inner[data-wrapped="false"] .nav-primary { display: flex; flex-wrap: nowrap; flex-shrink: 0; }
.nav-inner[data-wrapped="false"] .nav-secondary { display: flex; margin-left: auto; padding-left: 25px; }
.nav-inner[data-wrapped="false"] .nav-primary li,
.nav-inner[data-wrapped="false"] .nav-secondary li { margin-right: 25px; }
.nav-inner[data-wrapped="false"] .nav-primary li:last-child,
.nav-inner[data-wrapped="false"] .nav-secondary li:last-child { margin-right: 0; }

/* zusammengeklappt */
.nav-inner[data-wrapped="true"] .nav-toggle { display: block; }
.nav-inner[data-wrapped="true"] .nav-lists { display: none; }
.nav-inner[data-wrapped="true"][data-open="true"] .nav-lists { display: block; }
.nav-inner[data-wrapped="true"] .nav-lists li { border-bottom: 1px solid var(--gray-300); }
.nav-inner[data-wrapped="true"] .nav-secondary li:last-child { border-bottom: 0; }

/* Titelband + Reiter (dunkel) */
.band { width: 100%; padding: 0 16px; background: var(--bg); color: var(--fg); overflow-x: clip; }
.band-title { padding-top: 16px; padding-bottom: 18px; }
@media (min-width: 768px) { .band-title { padding-top: 24px; padding-bottom: 28px; } }

.subnav { display: flex; }
.subnav li { height: 36px; padding-right: 25px; }
.subnav li:last-child { padding-right: 0; }
.subnav a {
  display: flex;
  line-height: 36px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--nav-idle);
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--nav-active); }

/* =========================================================================
   Abschnitte
   ========================================================================= */
main { margin: 0 auto; width: 100%; max-width: var(--screen-3xl); background: #fff; display: flex; flex-direction: column; flex: 1 1 auto; }

.sec {
  width: 100%;
  padding: 0 16px;
  position: relative;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.sec-content { padding-top: 16px; padding-bottom: 64px; }
@media (min-width: 768px) { .sec-content { padding-top: 20px; padding-bottom: 80px; } }

.sec-title { padding-bottom: 32px; }
@media (min-width: 768px) { .sec-title { padding-bottom: 40px; } }

.sec-intro { padding-bottom: 32px; }
@media (min-width: 768px) { .sec-intro { padding-bottom: 40px; } }

/* Hero — vollflächige Abbildung über der Textspalte */
.hero { width: 100%; position: relative; background: var(--bg); color: var(--fg); margin-top: -1px; overflow: hidden; }
.hero-content { margin: 0 auto; width: 100%; padding-bottom: 64px; }
@media (min-width: 768px) { .hero-content { padding-bottom: 80px; } }
.hero-media { padding-bottom: 20px; }
@media (min-width: 768px) { .hero-media { padding: 0 16px 24px; } }
.hero-media-inner { display: flex; width: 100%; justify-content: center; user-select: none; }
.hero-grid { row-gap: 20px; }
@media (min-width: 768px)  { .hero-grid { row-gap: 24px; } }
@media (min-width: 1024px) { .hero-grid { row-gap: 32px; } }

.hero-meta { padding-bottom: 20px; }
@media (min-width: 768px) { .hero-meta { padding-bottom: 32px; } }
.hero-readmore { margin-top: 20px; }
@media (min-width: 768px) { .hero-readmore { margin-top: 32px; } }

.signup-col { position: relative; grid-column: span 12 / span 12; padding-top: 44px; }
@media (min-width: 768px) { .signup-col { grid-column: 9 / 13; padding-top: 0; } }

/* =========================================================================
   Werkabbildungen
   Bildformate wechseln pro Werk (--ar), wie in einer echten Hängung.
   Standard 4:5 hochformat.
   ========================================================================= */
.media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  background: var(--gray-200);
  overflow: hidden;
}
[data-theme="dark"] .media { background: #1a1a1a; }

/* Werke sitzen unten im Rahmen, so wie Bilder an einer Wand auf einer
   Linie hängen — nicht jedes Format zentriert für sich. */
.media-frame { display: flex; align-items: flex-end; }

.art { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.media > .art { position: absolute; inset: 0; }
.group:hover .art { transform: scale(1.018); }
@media (prefers-reduced-motion: reduce) { .art { transition: none; } .group:hover .art { transform: none; } }

/* Feine Kante, damit helle Arbeiten auf Weiß nicht ausfransen. */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08);
  pointer-events: none;
}
[data-theme="dark"] .media::after { box-shadow: inset 0 0 0 1px rgba(245, 244, 241, .10); }

/* Werkabbildungen füllen ihren Rahmen. */
.art { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-media { padding-bottom: 20px; }
@media (min-width: 768px) { .card-media { padding-bottom: 24px; } }

.card-meta { padding-bottom: 20px; }
@media (min-width: 768px) { .card-meta { padding-bottom: 24px; } }
.card-desc { padding-top: 20px; }
@media (min-width: 768px) { .card-desc { padding-top: 24px; } }

.card-grid { row-gap: 40px; }

.card-title a, .group .card-title { transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.group:hover .card-title { color: var(--link-hover); }

/* Karten-Typo schaltet bei md um */
.card-meta, .card-desc { font-size: 1.09375rem; --lineHeight: calc(20 / 17.5); --trim-t: -0.22em; --trim-b: -0.22em; }
@media (min-width: 768px) {
  .card-meta, .card-desc { font-size: 19px; --lineHeight: calc(22.5 / 19); --trim-t: -0.26em; --trim-b: -0.26em; }
}
.card-title { font-size: 1.625rem; --trim-t: -0.18em; --trim-b: -0.17em; }
@media (min-width: 768px) { .card-title { font-size: 1.875rem; --trim-t: -0.16em; --trim-b: -0.2em; } }

/* responsive Überschriften */
.h-section { font-size: 1.625rem; --trim-t: -0.18em; --trim-b: -0.17em; }
@media (min-width: 768px) { .h-section { font-size: 2.1875rem; --trim-t: -0.16em; --trim-b: -0.2em; } }
.h-hero { font-size: 1.625rem; --trim-t: -0.18em; --trim-b: -0.17em; }
@media (min-width: 768px) { .h-hero { font-size: 2.1875rem; --trim-t: -0.16em; --trim-b: -0.2em; } }
.seeall { font-size: 1.3125rem; --lineHeight: calc(22 / 21); --trim-t: -0.18em; --trim-b: -0.22em; }
@media (min-width: 768px) { .seeall { font-size: 1.5rem; --lineHeight: 1; --trim-t: -0.13em; --trim-b: -0.2em; } }
/* Das Display-Band wird auf kleinen Bildschirmen nicht verkleinert —
   die Zeile bricht stattdessen um. */

/* =========================================================================
   Links
   ========================================================================= */
.link {
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
  color: var(--fg);
}
.link:hover { color: var(--link-hover); }

.link-inline {
  transition: text-decoration-color .15s cubic-bezier(.4, 0, .2, 1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.12rem;
  text-decoration-color: var(--fg);
}
.link-inline:hover { text-decoration-color: var(--link-hover); }

.cta { display: inline-block; margin: -8px 0; padding: 8px 0; }

/* =========================================================================
   Formulare
   ========================================================================= */
.field {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--field-fg);
  border-radius: 0;
  outline: none;
  appearance: none;
}
.field::placeholder { color: var(--field-placeholder); opacity: 1; }
.field:focus { border-color: var(--field-border-focus); }
.field-row { margin-bottom: 12px; }
.field-row:last-child { margin-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid var(--btn-border);
  border-style: solid;
  background: var(--btn-bg);
  color: var(--fg);
  height: 40px;
  min-width: 40px;
  padding: 10px 12px;
  border-radius: 0;
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.btn:hover { border-color: var(--btn-border-hover); }

/* Auf Zeigegeräten sind Felder und Buttons flacher — wie im Original */
@media (hover: hover) {
  .field { height: 30px; padding: 0 8px; }
  .btn   { height: 30px; min-width: 30px; padding: 0 8px; }
  @media (min-width: 1024px) { .btn-hero { height: 34px; } }
}

.signup-title { margin-bottom: 24px; }
.signup-note { margin-bottom: 16px; }
.signup-legal { margin-top: 16px; }
.btn-mt { margin-top: 16px; }

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

/* =========================================================================
   Fußzeile
   ========================================================================= */
.site-footer { margin: 0 auto; width: 100%; max-width: var(--screen-3xl); background: #fff; color: var(--gray-900); }
.footer-top { padding-top: 20px; padding-bottom: 40px; }
@media (min-width: 612px) { .footer-top { padding-top: 20px; padding-bottom: 64px; } }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 40px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; }
}
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1392px) { .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.footer-signup { grid-column: span 4 / span 4; position: relative; overflow-x: clip; }
@media (min-width: 768px)  { .footer-signup { grid-column: span 4 / span 4; padding-top: 20px; } }
@media (min-width: 1024px) { .footer-signup { grid-column: span 5 / span 5; } }

/* Innenraster der Newsletter-Spalte: das Eingabefeld läuft nur über
   4 von 5 Spalten, Überschrift und Button über die volle Breite. */
.footer-signup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
}
@media (min-width: 768px)  { .footer-signup-grid { column-gap: 24px; } }
@media (min-width: 1024px) { .footer-signup-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; } }
.fs-full  { grid-column: span 4 / span 4; }
@media (min-width: 1024px) { .fs-full { grid-column: span 5 / span 5; } }
.fs-input { grid-column: span 4 / span 4; overflow: hidden; }

.footer-social { grid-column: span 4 / span 4; }
@media (min-width: 768px)  { .footer-social { grid-column: span 4 / span 4; } }
@media (min-width: 1024px) { .footer-social { grid-column: span 4 / span 4; } }
@media (min-width: 1392px) { .footer-social { grid-column: 8 / 12; } }

.social-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px)  { .social-grid { gap: 24px; } }
@media (min-width: 1024px) { .social-grid { column-gap: 32px; row-gap: 24px; } }
.social-cell { position: relative; width: 100%; padding-bottom: 100%; }
.social-cell > a {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px;
}
.social-cell svg { width: 40px; height: 40px; display: block; }
@media (max-width: 767px) { .social-inner { margin: 0 auto; max-width: 70px; } }

.footer-bottom { padding-top: 20px; }
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 32px;
}
@media (min-width: 768px)  { .footer-links { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1024px) { .footer-links { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1392px) { .footer-links { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.footer-col { grid-column: span 4 / span 4; }
@media (min-width: 768px)  { .footer-col { grid-column: span 8 / span 8; } }
@media (min-width: 1024px) { .footer-col { grid-column: span 3 / span 3; } }
.footer-col-spacer { display: none; }
@media (min-width: 1024px) { .footer-col-spacer { display: block; grid-column: span 1 / span 1; } }
.footer-col a { text-decoration-thickness: 1px; text-decoration-skip-ink: none; text-underline-offset: 0.12rem; }
.footer-col a:hover { text-decoration-line: underline; }
.footer-copy { padding-top: 64px; padding-bottom: 20px; }
@media (min-width: 1392px) { .footer-copy { padding-top: 80px; } }
.footer-signup-title { margin-bottom: 24px; }

/* =========================================================================
   Majores — eigene Bausteine
   ========================================================================= */

/* Wortmarke: nur der Name, im selben Serif-Fett wie die Navigation —
   kein Bildzeichen. Das geometrische Signet gehört zur Ventures-Holding
   und hat auf der Galerie-Seite nichts verloren. */

/* Filter über der Werkliste. Eckig — keine Pillen. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 32px; }
@media (min-width: 768px) { .filters { padding-bottom: 40px; } }
.filter {
  border: 1px solid var(--rule);
  background: none;
  color: var(--fg);
  height: 30px;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 0;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.filter:hover { border-color: var(--fg); }
.filter[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filter-count { color: var(--gray-600); margin-left: 6px; }
.filter[aria-pressed="true"] .filter-count { color: inherit; opacity: .65; }

/* Werkkarte: Titel und Angaben unter dem Bild. */
.work-title { transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.group:hover .work-title { color: var(--link-hover); }
.work-line { color: var(--gray-600); }
[data-theme="dark"] .work-line { color: var(--gray-500); }

/* Werkdetail: Abbildung links, Angaben und Anfrage rechts. */
.detail-media { grid-column: span 12 / span 12; }
@media (min-width: 768px) { .detail-media { grid-column: span 7 / span 7; } }
.detail-side { grid-column: span 12 / span 12; padding-top: 40px; }
@media (min-width: 768px) { .detail-side { grid-column: 9 / 13; padding-top: 0; } }

/* Werkangaben als Wertetabelle. */
.spec { border-top: 1px solid var(--rule); margin-top: 32px; }
.spec-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.spec-key { color: var(--gray-600); }
[data-theme="dark"] .spec-key { color: var(--gray-500); }

/* Anfrage-Block */
.inquiry { margin-top: 40px; }
.inquiry-title { margin-bottom: 20px; }
.field-area {
  width: 100%;
  min-height: 92px;
  padding: 7px 8px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--field-fg);
  border-radius: 0;
  outline: none;
  resize: vertical;
}
.field-area::placeholder { color: var(--field-placeholder); opacity: 1; }
.field-area:focus { border-color: var(--field-border-focus); }

.btn-accent { border-color: var(--fg); }
.btn-accent:hover { border-color: var(--akzent); color: var(--akzent); }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Zweispaltige Textblöcke (Beratung, Über). */
.col-half { grid-column: span 12 / span 12; }
@media (min-width: 768px) { .col-half { grid-column: span 6 / span 6; } }
.col-lead { grid-column: span 12 / span 12; }
@media (min-width: 768px) { .col-lead { grid-column: 1 / 8; } }

.block-title { padding-bottom: 20px; }
@media (min-width: 768px) { .block-title { padding-bottom: 24px; } }
.block + .block { padding-top: 40px; }
@media (min-width: 768px) { .block + .block { padding-top: 0; } }

/* Nummerierte Leistungsliste — Struktur ohne Dekor. */
.steps { border-top: 1px solid var(--rule); margin-top: 24px; }
.step { display: grid; grid-template-columns: 2.25rem 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.step-no { color: var(--gray-600); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .step-no { color: var(--gray-500); }

/* Kleingedrucktes / Hinweise */
.note { color: var(--gray-600); }
[data-theme="dark"] .note { color: var(--gray-500); }

/* Zurück-Link über dem Werkdetail */
.back { display: inline-block; padding: 8px 0; margin: -8px 0 0; }

/* Leerzustand des Filters */
.empty { padding: 40px 0; }

/* =========================================================================
   Offenere Flächen — nach dem Vorbild von Hauser & Wirth: grössere
   Abbildungen, mehr Luft zwischen den Abschnitten, leisere Linien.
   Das Raster bleibt, der Rhythmus wird weiter.
   ========================================================================= */
.sec-content { padding-top: 24px; padding-bottom: 96px; }
@media (min-width: 768px)  { .sec-content { padding-top: 28px; padding-bottom: 128px; } }
@media (min-width: 1256px) { .sec-content { padding-bottom: 160px; } }

.hero-content { padding-bottom: 96px; }
@media (min-width: 768px)  { .hero-content { padding-bottom: 128px; } }
@media (min-width: 1256px) { .hero-content { padding-bottom: 160px; } }

.sec-title { padding-bottom: 40px; }
@media (min-width: 768px)  { .sec-title { padding-bottom: 56px; } }
@media (min-width: 1256px) { .h-section { font-size: 2.75rem; --trim-t: -0.16em; --trim-b: -0.2em; } }

.sec-intro { padding-bottom: 48px; }
@media (min-width: 768px) { .sec-intro { padding-bottom: 64px; } }

.card-grid { row-gap: 72px; }
@media (min-width: 768px) { .card-grid { row-gap: 96px; } }

/* Linien leiser — auf Weiss und auf Dunkel. */
:root { --rule: rgba(17, 17, 17, .16); }
[data-theme="dark"] { --rule: rgba(245, 244, 241, .18); }

/* Kopfzeile eines Abschnitts mit Verweis rechts. */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.sec-head .sec-title { flex: 1 1 auto; }
.sec-head-link { flex: 0 0 auto; padding-bottom: 40px; white-space: nowrap; }
@media (min-width: 768px) { .sec-head-link { padding-bottom: 56px; } }
@media (max-width: 611px) { .sec-head { display: block; } .sec-head-link { padding-bottom: 32px; } }

/* Kartentypografie: Kicker klein und sachlich, Angaben in der Interface-
   Schrift, Beschreibung im Serif. Tombstone-Reihenfolge. */
/* Kartentext: schlichter Fluss mit festen Abstaenden. Kein Leading-Trim
   zwischen den Bloecken — gestapelte negative Margins koennen sich sonst
   aufaddieren und die Zeilen ueberlappen lassen. */
.card-body { padding-top: 20px; }
@media (min-width: 768px) { .card-body { padding-top: 24px; } }
.card-body > * + * { margin-top: 14px; }
.card-kicker { letter-spacing: .04em; text-transform: uppercase; }
.card-title { line-height: 1.05; }
.card-note { max-width: 34em; }

/* Waagerechte Werkreihe. Volle Breite, scrollt seitlich, rastet ein. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74vw;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 16px 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-item { scroll-snap-align: start; }
.rail-cap { padding-top: 20px; }
@media (min-width: 612px)  { .rail { grid-auto-columns: 44vw; gap: 20px; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: 30vw; gap: 32px; padding: 0 32px 8px; } }
@media (min-width: 1392px) { .rail { grid-auto-columns: 24vw; } }

/* Reiterleiste bleibt beim Scrollen stehen. */
.subnav-bar { position: sticky; top: 36px; z-index: 9000; }

/* Grosse Fliesstextspalte etwas luftiger. */
.type-m-lg { --lineHeight: calc(27 / 20); }

/* =========================================================================
   Hell als Grundton
   Die Startseite von Gagosian ist weiss; genau ein dunkles Band und ein
   hellgraues setzen Akzente. Dieselbe Rhythmik hier.
   ========================================================================= */
[data-theme="mid"] {
  --bg: var(--gray-200);
  --fg: var(--gray-900);
  --rule: rgba(17, 17, 17, .18);
  --link-hover: var(--gray-500);
  --nav-idle: var(--gray-500);
  --nav-active: var(--gray-900);
  --field-bg: #ffffff;
  --field-fg: var(--gray-900);
  --field-placeholder: var(--gray-500);
  --field-border: #ffffff;
  --field-border-focus: var(--gray-900);
  --btn-border: var(--gray-900);
  --btn-border-hover: var(--gray-400);
  --btn-bg: transparent;
}
[data-theme="mid"] .media { background: #e6e6e6; }
[data-theme="mid"] .work-line, [data-theme="mid"] .note,
[data-theme="mid"] .spec-key, [data-theme="mid"] .step-no { color: var(--gray-600); }

/* Titelband hell: gleiche Struktur, schwarze Marke auf Weiss. */
.band[data-theme="light"] { background: #fff; color: var(--gray-900); }

/* -------------------------------------------------------------------------
   Werkkarte im Dreierraster: Abbildung sitzt unten in einem Kasten fester
   Höhe und ist anteilig zur echten Werkgrösse breit — so hängen kleine und
   grosse Arbeiten auf einer Linie, wie an einer Wand.
   ------------------------------------------------------------------------- */
.plate { position: relative; width: 100%; padding-bottom: 90%; }
.plate-inner { position: absolute; bottom: 0; left: 0; width: var(--plate-w, 70%); }
.plate .media { transition: opacity .3s cubic-bezier(.4, 0, .2, 1); }
.group:hover .plate .media { opacity: .35; }
.group:hover .plate .art { transform: none; }
.card-body { transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.group:hover .card-body { color: var(--link-hover); }

@media (min-width: 768px) { .md-col-4 { grid-column: span 4 / span 4; } }

/* =========================================================================
   Auftakt — bildschirmfüllende Folge
   Bild liegt vollflächig, Wortmarke oben links darüber, Text mittig darauf.
   Wechselt selbsttätig; Fortschrittsbalken unten. Vorbild: gagosian.com.
   ========================================================================= */
.stage {
  position: relative;
  width: 100%;
  height: calc(100svh - 36px);
  min-height: 520px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--gray-900);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .9s;
}
.slide[data-active="true"] { opacity: 1; visibility: visible; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Lesbarkeit ohne sichtbaren Schleier: nur dort abdunkeln, wo Text steht. */
.slide-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 46% at 50% 52%, rgba(0,0,0,.42) 0%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 26%, transparent 74%, rgba(0,0,0,.24) 100%);
}
.slide-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 72px 24px;
  color: #fff;
}
.slide-body > * { max-width: 22em; }
.slide-kicker { padding-bottom: 14px; }
.slide-title { max-width: 14em; }
.slide-sub { padding-top: 12px; max-width: 20em; }
.slide-meta { padding-top: 12px; opacity: .88; }
.slide-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.75);
  transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
}
.slide-cta:hover { background: #fff; color: var(--gray-900); }

/* Alle Folien sind Vollbilder — keine geteilte Variante. */

/* Wortmarke über dem Bild — Farbe folgt der Folie. */
.stage-mark { position: absolute; left: 0; top: 0; z-index: 20; padding: 16px; }
@media (min-width: 768px) { .stage-mark { padding: 22px 28px; } }
.stage-mark .type-gh-sm { color: #fff; transition: color .5s cubic-bezier(.4,0,.2,1); }
.stage[data-mark="dark"] .stage-mark .type-gh-sm { color: var(--gray-900); }

/* Fortschritt und Steuerung */
.stage-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 2px; padding: 0 16px 16px; }
.stage-bar span { flex: 1 1 0; height: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.stage-bar span i { display: block; height: 100%; width: 0; background: #fff; }
.stage-bar span[data-done="true"] i { width: 100%; }
.stage-bar span[data-running="true"] i { animation: fill var(--dwell, 6500ms) linear forwards; }
@keyframes fill { from { width: 0 } to { width: 100% } }
.stage[data-mark="dark"] .stage-bar span { background: rgba(17,17,17,.25); }
.stage[data-mark="dark"] .stage-bar span i { background: var(--gray-900); }

.stage-nav {
  position: absolute; z-index: 20; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  color: #fff; opacity: .8; transition: opacity .2s;
}
.stage-nav:hover { opacity: 1; }
.stage-nav[data-dir="prev"] { left: 4px; }
.stage-nav[data-dir="next"] { right: 4px; }
.stage[data-mark="dark"] .stage-nav { color: var(--gray-900); }
@media (max-width: 611px) { .stage-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .stage-bar span[data-running="true"] i { animation: none; width: 100%; }
}

/* Abschnittskopf mit Pfeil rechts — wie „From the Quarterly →“ */
.sec-head-link a::after { content: ""; }
.arrowlink { display: inline-flex; align-items: center; gap: .5em; }

/* Leistungsliste — gesetzte Marke statt Aufzählungspunkt. */
.ticked { margin-top: 20px; border-top: 1px solid var(--rule); }
.ticked li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--rule); position: relative; }
.ticked li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 10px; height: 1px; background: currentColor; opacity: .55;
}
.ticked[data-mode="neg"] li { color: var(--gray-600); }
[data-theme="dark"] .ticked[data-mode="neg"] li { color: var(--gray-500); }

/* Lesbarer Textblock: Zeilenlänge begrenzen, Überschriften mit Luft. */
.prose-block { padding-top: 56px; }
.prose-block > * + * { margin-top: 1.05em; }
.prose-block h2 { padding-top: 1.6em; }
.prose-block p, .col-lead p, .sec-intro { max-width: 34em; }
.type-m-lg { max-width: 26em; }
.spec-row > div:last-child { max-width: 34em; }

/* Katalognummer vor der Serienangabe — eigenes Ordnungsmerkmal. */
.cat-no { color: var(--gray-500); margin-right: .8em; letter-spacing: .06em; }
[data-theme="dark"] .cat-no { color: var(--gray-600); }

/* Folienzähler unten rechts, wie bei Hauser & Wirth. */
.stage-count {
  position: absolute; right: 16px; bottom: 26px; z-index: 20;
  color: #fff; opacity: .85; letter-spacing: .08em;
}
.stage[data-mark="dark"] .stage-count { color: var(--gray-900); }
@media (min-width: 768px) { .stage-count { right: 28px; } }

/* =========================================================================
   Checklist — die Werkliste zur Ausstellung. Tabellarisch, nummeriert,
   ohne Bild. Sie ist der Übergang vom Programm zum einzelnen Werk und
   das Element, das diese Seite von der Vorlage unterscheidet.
   ========================================================================= */
.checklist { border-top: 1px solid var(--fg); }
.ck-head, .ck-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.ck-head { color: var(--gray-600); letter-spacing: .06em; text-transform: uppercase; padding: 10px 0; }
[data-theme="dark"] .ck-head { color: var(--gray-500); }
.ck-head .ck-dim, .ck-head .ck-ed { display: none; }
.ck-no { color: var(--gray-500); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.ck-main { display: flex; flex-direction: column; gap: 5px; }
.ck-dim, .ck-ed { grid-column: 2; }
.ck-row:hover { background: rgba(17, 17, 17, .03); }
[data-theme="dark"] .ck-row:hover { background: rgba(245, 244, 241, .05); }

@media (min-width: 900px) {
  .ck-head, .ck-row { grid-template-columns: 5rem minmax(0, 1fr) 9rem 11rem; align-items: baseline; }
  .ck-head .ck-dim, .ck-head .ck-ed { display: block; }
  .ck-dim, .ck-ed { grid-column: auto; }
}

/* Statusleiste Current / Upcoming / Past — bei Sprüth Magers und
   Max Hetzler der Standard, bei Gagosian gibt es sie so nicht. */
.statebar { display: flex; gap: 24px; padding-bottom: 28px; }
.statebar span { position: relative; padding-bottom: 6px; }
.statebar span[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--fg);
}
.statebar .is-muted { color: var(--gray-500); }

/* Jahresmarke über der Liste — die Gliederung, die Galerie Buchholz nutzt. */
.yearmark {
  letter-spacing: .1em;
  color: var(--gray-600);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
[data-theme="dark"] .yearmark { color: var(--gray-500); }

/* Honigtopf gegen Formular-Spam — für Menschen unsichtbar, für Bots sichtbar. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rückmeldung unter dem Formular. */
.form-status { margin-top: 16px; padding: 10px 12px; border-left: 2px solid var(--fg); }
.form-status[data-state="ok"]  { border-left-color: var(--fg); }
.form-status[data-state="bad"] { border-left-color: var(--akzent); color: var(--fg); }