/*
Theme Name: Kammer Rieck
Theme URI: https://kammer.gallery
Author: Kammer Rieck
Description: Minimalist gallery theme for Kammer Rieck
Version: 2.0
*/

/* ══════════════════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }


/* ══════════════════════════════════════════════════════════════════════
   VARIABLES
   --page-margin    seitlicher Abstand (responsive)
   --page-top       Abstand oben für erstes Inhaltselement
   --color-text     Inhalte (Künstler, Titel, Werke)
   --color-header   Header (Logo, Adresse, Nav)
   --color-footer   Footer
   --color-hover    Pink-Hover für Links
   --color-controls Karussell-Steuerung (1/2, Enlarge)
   --ex-grid-w      Inhaltsbreite Single-Exhibition (= 100% minus seitliche Margins)
   --werk-max-w     Maximale Breite eines Werk-Bildes (Querformat)
   --thumb-w        Feste Kachelbreite Single-Exhibition Thumbnails
   --thumb-row-gap  Zeilenabstand im Thumbnail-Raster
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --page-margin:   max(5.4vw, calc((100vw - 2000px) / 2)); /* Content-Cap: max. 2000px breit */
  --page-top:      max(30px, 1.984vw);
  --edge-padding:  20px; /* gleicher Abstand: Header→Unterkante Hero, Footer→Page-Unterkante, Index/X-Btn→Oberkante */

  --color-text:     #000000;
  --color-header:   #828282;
  --color-footer:   #828282;
  --color-controls: #828282;
  --color-hover:    #FFB7F8;

  --thumb-w:       min(250px, 14.352vw); /* Grid skaliert, gecappt bei 250px (MBP14: 217px) */
  --thumb-row-gap: min(108px, 4.828vw);   /* Cap bei 108px (= bei Content-Breite 2000) */
  --ex-grid-w:     calc(100% - 2 * var(--page-margin));
  --werk-max-w:    calc((100vw - 2 * var(--page-margin) + var(--thumb-w)) / 2);
}


/* ══════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════ */
body {
  background: #fff;
  font-family: Helvetica, Inter, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  overflow-x: hidden;
}
html { margin-top: 0 !important; overflow-x: hidden; }
@media (min-width: 1025px) {
  html { scrollbar-gutter: stable; scroll-behavior: smooth; }
  /* Anchor-Sprung zu .aw-section: etwas Abstand zum oberen Viewport-Rand */
  .aw-section[id] { scroll-margin-top: 30px; }
}
#wpadminbar { display: none !important; }
a:hover { color: var(--color-hover); }


/* ══════════════════════════════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════════════════════════════ */
.logo-link { display: block; position: relative; line-height: 1; }
.logo-link .logo-default,
.logo-link .logo-white { transition: opacity 0.15s; }
.logo-link .logo-pink {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  transition: opacity 0.15s;
  height: 50px;
  width: auto;
  display: block;
}
.logo-link:hover .logo-pink    { opacity: 1; }
.logo-link:hover .logo-default { opacity: 0; }
.logo-link:hover .logo-white   { opacity: 0; }
.logo-link:hover .logo-text    { color: var(--color-hover); }
.logo-default { opacity: 0.7; }
.logo-text { font-size: 51px; line-height: 1; display: block; }

/* Größeres Logo auf der Single-Exhibition-Seite */
.logo {
  font-size: 51px;
  line-height: 1;
  color: var(--color-text);
  transition: color 0.15s;
  flex-shrink: 0;
  text-decoration: none;
}
.logo .logo-img { height: 50px; width: auto; display: block; }
.logo a { color: inherit; text-decoration: none; }
.logo a:hover { color: var(--color-hover); }


/* ══════════════════════════════════════════════════════════════════════
   HEADER
   Wird auch im Footer wiederverwendet (.site-footer .header)
   ══════════════════════════════════════════════════════════════════════ */
.header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 70px;
  padding: 50px var(--page-margin) 0 var(--page-margin); /* seitlicher Abstand responsive wie Rest der Seite */
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-header);
}

.header-logo {
  flex-shrink: 0;
  font-size: 51px;
  line-height: 1;
  align-self: flex-end;
  position: relative;
  bottom: 5.2px; /* Feinabstimmung vertikale Ausrichtung */
}
.header-logo .logo-img { height: 36px; width: auto; display: block; }
.header-logo a {
  color: var(--color-header);
  text-decoration: none;
  transition: color 0.15s;
  display: block;
  line-height: 1;
}
.header-logo a:hover { color: var(--color-hover); }

.header-right {
  display: flex;
  gap: 70px;
  align-items: flex-start;
}
.nav-col { flex-shrink: 0; text-align: left; }
.nav-col a { color: var(--color-header); }
.nav-col a:hover { color: var(--color-hover); }

.header-subscribe { display: none; } /* nicht im Default-Header verwendet */

/* Subscribe-Spalte: optisch eine Zeile nach unten verschieben (gleicht 2-zeilige Nav-Cols aus) */
#subscribe-toggle,
#subscribe-toggle-footer,
#subscribe-toggle-footer-aw,
#subscribe-toggle-footer-se {
  padding-top: calc(13px * 1.3);
  min-height: calc(13px * 1.3 * 2);
  position: relative;
}
#subscribe-toggle { text-align: right; }
#subscribe-toggle span,
#subscribe-toggle-footer span,
#subscribe-toggle-footer-aw span,
#subscribe-toggle-footer-se span { cursor: pointer; }
#subscribe-toggle span:hover,
#subscribe-toggle-footer span:hover,
#subscribe-toggle-footer-aw span:hover,
#subscribe-toggle-footer-se span:hover { color: var(--color-hover); }

/* Adresse / Öffnungszeiten / Kontakt (Single-Exhibition Header) */
.nav-info { font-size: 12px; text-align: right; line-height: 1; }
.nav-info a { color: var(--color-text); }
.nav-info a:hover { color: var(--color-hover); }


/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.site-footer { margin-top: 160px; padding-bottom: var(--edge-padding); color: var(--color-footer); }
.site-footer .header       { color: var(--color-footer); justify-content: flex-start; gap: 70px; }
.site-footer .header-right { flex: 1; }
.site-footer .nav-col      { color: var(--color-footer); }
.site-footer .nav-col a    { color: var(--color-footer); }
.site-footer .nav-col a:hover { color: var(--color-hover); }
.site-footer .logo-link    { color: var(--color-footer); }
.site-footer .footer-supporter {
  color: var(--color-footer);
  margin-left: auto; /* pusht Supporter ans rechte Page-Ende */
  text-align: right;
  padding-top: calc(13px * 1.3);
}
.footer-supporter-mobile { display: none; } /* nur auf Mobile sichtbar (siehe Responsive) */


/* ══════════════════════════════════════════════════════════════════════
   HERO AREA
   Pink-Flash-Animation, Layout, Hero-spezifische Header-Farben
   ══════════════════════════════════════════════════════════════════════ */
@keyframes hero-flash-pink {
  from { background: #FFB7F8; }
  to   { background: #c1c1c1; }
}

.hero-area {
  height: 100vh;
  min-height: unset;
  background: #c1c1c1;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: hero-flash-pink 0.5s steps(1, end) forwards;
}
.hero-area.aw-hero {
  height: 70vh;
  animation: none; /* kein pinkes Flimmern auf All-Works */
  background: #FFB7F8; /* startet pink */
}
.hero-area.aw-hero.is-flash-white { background: #fff; }   /* kurzer weißer Flash */
.hero-area.aw-hero.is-scrolled    { background: #c1c1c1; } /* final grau */

/* Solange der Hero pink ist: Hover-Farbe schwarz statt pink
   (CSS-Variable überschreiben — wirkt auf alle Hover-Selektoren via var(--color-hover)) */
.hero-area.aw-hero:not(.is-scrolled) {
  --color-hover: #000;
}

/* Header im Hero: weiße Farben, Position absolute am unteren Rand */
.hero-area .header {
  color: #fff;
  justify-content: flex-start;
  gap: 70px;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding-top: 0;
  padding-bottom: var(--edge-padding);
}
.hero-area .header-logo a       { color: #fff; }
.hero-area .header-logo a:hover { color: var(--color-hover); }
.hero-area .nav-col             { color: #fff; }
.hero-area .nav-col a           { color: #fff; }
.hero-area .nav-col a:hover     { color: var(--color-hover); }
.hero-area .header-subscribe    { color: #fff; }

/* Loop-Bild im All-Works-Hero komplett ausblenden */
.hero-area.aw-hero .main-image-wrap { display: none; }
.hero-area .main-image-wrap         { order: 2; margin-top: auto; }
.hero-area .img-placeholder         { background: rgba(255,255,255,0.15); }


/* ══════════════════════════════════════════════════════════════════════
   HAUPTBILD (Hero Loop) — All-Works
   ══════════════════════════════════════════════════════════════════════ */
.main-image-wrap {
  display: flex;
  justify-content: center;
  margin-top: max(60px, 3.968vw);
  margin-bottom: max(60px, 3.968vw);
}
.main-img {
  max-width: clamp(max(500px, 33.069vw), 59.59vw, max(1200px, 79.365vw));
  display: block;
  object-fit: contain;
}
.img-placeholder { background: #c1c1c1; }
.img-placeholder.main-img {
  width: calc(100% - clamp(max(70px, 4.630vw), 7.672vw, max(150px, 9.921vw)));
  max-width: clamp(max(500px, 33.069vw), 59.59vw, max(1200px, 79.365vw));
}


/* ══════════════════════════════════════════════════════════════════════
   PROGRESSIVE IMAGE LOADING (blur-up)
   ══════════════════════════════════════════════════════════════════════ */
.progressive-img { background: #c1c1c1; }


/* ══════════════════════════════════════════════════════════════════════
   GO-TOP BUTTON (Mobile)
   ══════════════════════════════════════════════════════════════════════ */
#go-top {
  position: fixed;
  bottom: max(27px, 1.786vw);
  right: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  display: none;
  font-family: inherit;
  background: none;
  border: none;
  padding: max(4px, 0.265vw) var(--page-margin) max(4px, 0.265vw) max(6px, 0.397vw);
  text-align: right;
  z-index: 500;
}
#go-top:hover { color: var(--color-hover); }
/* Auf All-Works und Frontpage komplett ausgeblendet (Desktop + Mobile) */
body.home #go-top,
body.page-template-page-all-works-php #go-top { display: none !important; }
@media (min-width: 1025px) {
  body.post-type-archive-exhibition #go-top { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   ALL-WORKS PAGE (page-all-works.php)
   ══════════════════════════════════════════════════════════════════════ */
.all-works-page {
  padding-top: max(90px, 5.952vw);
  position: relative;
}

/* ── Sections ── */
.aw-section          { margin-bottom: max(170px, 11.243vw); }
.aw-section-label    { color: #828282; margin: 0 var(--page-margin) max(11px, 0.728vw) var(--page-margin); }
.aw-section-upcoming { margin-bottom: max(140px, 9.259vw); }

.aw-info {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  margin: 0 var(--page-margin) 30px var(--page-margin);
}

/* ── Presstext (Toggle + Inhalt) ── */
.aw-presstext-wrap {
  padding: 0 var(--page-margin);
  margin-bottom: max(60px, 3.968vw);
}
.aw-presstext-toggle {
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
}
.aw-presstext-toggle:hover { color: var(--color-hover); }
.aw-presstext-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}
.aw-presstext-body > div {
  overflow: hidden;
  padding-top: 0;
  transition: padding-top 200ms ease;
  max-width: calc(50vw - var(--page-margin));
}
/* Landing-Page Presstext: Breite an Zeichenanzahl gebunden */
.all-works-page .aw-presstext-body > div { max-width: 90ch; }
.aw-presstext-wrap.is-open .aw-presstext-body         { grid-template-rows: 1fr; }
.aw-presstext-wrap.is-open .aw-presstext-body > div   { padding-top: max(16px, 1.058vw); }
.aw-presstext-body p {
  color: var(--color-text);
  margin-bottom: max(16px, 1.058vw);
  font-weight: 500;
  line-height: 1.6;
}
.aw-presstext-body, .aw-presstext-body * { font-weight: 500; }

/* ── Grid (nutzt .ex-thumb-item / .ex-thumb-overlay aus Single-Exhibition) ── */
.aw-grid { margin-top: 0 !important; }
/* Hochformat-Bilder bekommen weißen Hintergrund seitlich (statt grau) */
.aw-grid .ex-thumb-item img { background: #fff; }

.aw-grid .ex-thumb-item.aw-thumb-hidden,
.aw-thumb-hidden { display: none !important; }

/* ── Index-Button ── */
.aw-index-btn {
  position: absolute;
  top: max(120px, 7.937vw); /* bündig mit dem Künstlernamen unter dem "Upcoming:" Label */
  right: var(--page-margin);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--color-text);
  line-height: 1;
  z-index: 1000;
}
.aw-index-btn:hover { color: var(--color-hover); }
/* Nach Klick: Hover-Effekt aussetzen, bis Maus das Element verlässt — verhindert „klebenden" Pink-Hover */
.aw-index-btn.no-hover:hover { color: var(--color-text); }
.aw-index-btn.is-stuck {
  position: fixed;
  top: var(--edge-padding);
}

/* ── Index-Overlay ── */
.aw-index-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
  padding: var(--page-top) 0 0 0;
}
.aw-index-overlay.is-open {
  display: flex;
  flex-direction: column;
}
.aw-index-overlay .aw-index-list { padding: 0 var(--page-margin); }
.aw-index-overlay .site-footer   { margin-top: auto; }

/* Index-Overlay-Header (nur Mobile + nur im Single-Exhibition-Overlay sichtbar) */
.aw-index-header { display: none; padding: 0 var(--page-margin); margin-bottom: 1.5em; }
.aw-index-overview {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}
.aw-index-overview:hover { color: var(--color-hover); }

.aw-index-year-block { margin-bottom: 1.5em; }
.aw-index-year       { color: #828282; margin-bottom: 1em; }
.aw-index-item       { margin-bottom: 0; line-height: 1; }
.aw-index-link {
  display: block;
  width: max-content;
  max-width: 100%;
  color: var(--color-text);
  text-decoration: none;
}
.aw-index-link:hover  { color: var(--color-hover); }
.aw-index-artist      { margin-right: max(4px, 0.265vw); }
.aw-index-exh-title   { color: var(--color-text); }

/* Index-Overlay: Home-Logo (nur Mobile sichtbar) */
.aw-index-home-logo {
  display: none;
  position: absolute;
  top: var(--page-top);
  left: var(--page-margin);
  z-index: 1001;
  line-height: 1;
}
.aw-index-home-logo .logo-img,
.aw-index-home-logo .logo-text {
  filter: grayscale(1);
  opacity: 0.5;
}
.aw-index-home-logo:hover .logo-img,
.aw-index-home-logo:hover .logo-text { opacity: 0.8; }
.aw-index-home-logo .logo-img  { height: max(39px, 2.579vw); width: auto; display: block; }
.aw-index-home-logo .logo-text { font-size: 36px; font-weight: 700; color: #828282; }


/* ══════════════════════════════════════════════════════════════════════
   SINGLE-EXHIBITION PAGE (single-exhibition.php)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.ex-page-layout {}
.ex-main-col {}

/* ── Info-Zeile (Künstler / Titel / Datum oben auf der Seite) ── */
.ex-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: var(--page-top) var(--page-margin) 0 var(--page-margin);
}
.ex-info-block {
  line-height: 1.65;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 70px;
}
.ex-info-artists {
  color: var(--color-text);
  overflow-wrap: normal; /* kein Mid-Word-Bruch — Namen bleiben durch   auf einer Zeile, nur Kommas brechen */
  word-break: normal;
  max-width: 60vw;
  flex-shrink: 0;
}
.ex-info-title {
  color: var(--color-text);
  overflow-wrap: break-word;
  word-break: normal;
  flex-shrink: 0;
}
.ex-info-dates {
  color: var(--color-text);
  flex-shrink: 0;
  margin-top: 0;
}

/* ── Sticky Menu (oben rechts: Liste aller Ausstellungen) ── */
.ex-menu-wrap {
  position: fixed;
  top: var(--page-top);
  right: var(--page-margin);
  text-align: right;
  z-index: 600;
}
.ex-menu-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  display: block;
  margin-left: auto;
  /* Button: langsam einblenden (nach Overlay-Fade), schnell ausblenden */
  transition: opacity 0.45s ease 0.25s;
}
.ex-menu-btn:hover { color: var(--color-hover); }
.ex-menu-wrap.is-open .ex-menu-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ex-menu-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: max(500px, 33.069vw);
  max-width: 90vw;
  z-index: 600;
  text-align: right;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s 0.35s;
}
.ex-menu-wrap.is-open .ex-menu-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease 0.2s, visibility 0s;
}
.ex-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 0;
}
.ex-menu-home {
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--color-text); text-decoration: none;
  display: block; width: fit-content; margin-left: auto; margin-bottom: max(20px, 1.323vw);
}
.ex-menu-home:hover { color: var(--color-hover); }
.ex-menu-year {
  font-size: 12px; font-weight: 700;
  color: #828282; line-height: 1;
  margin-top: max(16px, 1.058vw); margin-bottom: 2px;
}
.ex-menu-item {
  display: block; width: fit-content; margin-left: auto;
  font-size: 12px; font-weight: 700;
  color: var(--color-text); text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.ex-menu-item:hover      { color: var(--color-hover); }
.ex-menu-item.is-current { color: var(--color-hover); }
.ex-menu-close {
  background: none; border: none; padding: 0;
  margin-left: auto; display: block; width: fit-content;
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--color-text); cursor: pointer;
}
.ex-menu-close:hover { color: var(--color-hover); }
.ex-menu-spacer { height: 1.65em; }

/* ── Presstext + Artist-Description ── */
.ex-text-block {
  width: calc(50vw - var(--page-margin));
  max-width: calc(50vw - var(--page-margin));
  margin: max(60px, 3.968vw) 0 0 var(--page-margin);
}
.ex-text-block:last-of-type { margin-bottom: 0; }
.ex-presstext { line-height: 1.6; font-weight: 500; }
.ex-presstext, .ex-presstext * { font-weight: 500; }
.ex-presstext p {
  color: var(--color-text);
  margin-bottom: max(16px, 1.058vw);
  font-weight: 500;
}

.ex-artist-description       { margin-top: max(60px, 3.968vw); }
.ex-artist-description-block {
  width: var(--ex-grid-w);
  max-width: var(--ex-grid-w);
  margin: max(60px, 3.968vw) 0 0 var(--page-margin);
}
.ex-artist-description p,
.ex-artist-description-block p {
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: max(16px, 1.058vw);
  font-weight: 500;
}

/* ── Thumbnail-Raster (5 Spalten Default; in Responsive reduziert) ── */
.ex-thumb-grid {
  width: var(--ex-grid-w);
  max-width: var(--ex-grid-w);
  margin: min(119px, 5.291vw) auto 0 auto; /* Cap bei 119px (= bei Content-Breite 2000) */
  display: grid;
  grid-template-columns: repeat(5, var(--thumb-w));
  row-gap: var(--thumb-row-gap);
  justify-content: space-between;
}
.ex-thumb-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 217 / 158;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.ex-thumb-item,
.ex-thumb-item *,
.ex-thumb-item img { cursor: pointer !important; } /* Safari: explizit für Children + !important */
.ex-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: opacity 0.2s;
  background: #c1c1c1;
}
.ex-thumb-overlay {
  position: absolute;
  inset: 0;
  background: #FFB7F8;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.ex-thumb-item:hover .ex-thumb-overlay { opacity: 0; }

/* ── Werke-Detail (große Bilder unter dem Raster) ── */
.ex-works-detail {
  margin-top: max(150px, 9.921vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 max(80px, 5.291vw) 0;
}
.werk {
  width: 100%;
  max-width: 100%;
  margin-bottom: max(150px, 9.921vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.werk-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--werk-max-w);
  max-width: 100%;
}
.werk-img { width: var(--werk-max-w); max-width: 100%; background: #c1c1c1; }

/* ── Karussell ── */
.carousel {
  width: var(--werk-max-w);
  max-width: 100%;
  position: relative;
  overflow: hidden;
  transition: height 0.3s ease;
  display: flex;
  justify-content: center;
}
.carousel.is-zoomed { overflow: visible; }
.carousel-track     { position: relative; width: 100%; }
.carousel-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  max-height: 42.989vw; /* max(650px, 42.989vw) auf MBP14 — skaliert proportional */
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: max(14px, 0.926vw);
  opacity: 0.5;
  font-family: inherit;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.carousel-arrow-prev { left: 0; }
.carousel-arrow-next { right: 0; }
@media (min-width: 1025px) { .carousel-arrow { display: none !important; } }
@media (max-width: 1024px) { .carousel-arrow { display: block; } }

/* ── Werk-Steuerung + Info ── */
.werk-controls {
  display: flex;
  align-items: baseline;
  gap: max(26px, 1.720vw);
  margin-top: max(12px, 0.794vw);
}
.werk-numbers              { color: var(--color-controls); display: inline-flex; gap: max(4px, 0.265vw); }
.werk-numbers .current-num { cursor: default; }
.werk-numbers .total-num   { cursor: default; }
/* Default: Desktop-Variante (in werk-controls) sichtbar, Mobile-Variante (in werk-info) versteckt */
.werk-numbers-mobile       { display: none; }
.werk-enlarge {
  color: var(--color-controls);
  cursor: pointer;
  padding: max(12px, 0.794vw);
  margin: -max(12px, 0.794vw);
  display: inline-block;
}
.werk-enlarge:hover { color: var(--color-hover); }

.werk-info     { margin-top: max(18px, 1.190vw); line-height: 1.6; }
.werk-artist   { color: var(--color-text); margin-bottom: 0; }
.werk-title    { color: var(--color-text); }
.werk-material { color: var(--color-text); line-height: 1.6; }

/* ── Installation Views ── */
.installation-grid-detail {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(60px, 3.968vw);
}
.installation-img {
  width: var(--werk-max-w);
  max-width: 100%;
  height: auto;
  background: #c1c1c1;
  display: block;
}


/* ══════════════════════════════════════════════════════════════════════
   LIGHTBOX (Vollbild beim Klick auf ein Bild)
   ══════════════════════════════════════════════════════════════════════ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1000;
  flex-direction: column;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox.open { display: flex; }
/* Caption-Text in der Lightbox darf markiert werden */
.lightbox .lightbox-caption-col,
.lightbox .lightbox-caption-col * {
  user-select: text;
  -webkit-user-select: text;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: var(--color-hover); }

/* Bottom-Row: Caption (links) + Nav-Buttons (< > X) auf gleicher Höhe.
   padding-top 12px = Abstand Bild → Schrift.
   padding-bottom 48px = Abstand Schrift → Strip.
   Höhe ergibt sich automatisch aus Padding + Caption-Text. */
.aw-lightbox .lightbox-bottom-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 12px var(--page-margin) 48px;
  box-sizing: border-box;
  gap: 24px;
}
.aw-lightbox .lightbox-bottom-row .lightbox-caption-col {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aw-lightbox .lightbox-nav {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}
.aw-lightbox .lightbox-nav .lightbox-close {
  margin-left: 36px; /* 24px gap + 36px = 60px Abstand zwischen > und X */
}
/* < und > optisch auf Mitte von X heben */
.aw-lightbox .lightbox-nav .lightbox-prev,
.aw-lightbox .lightbox-nav .lightbox-next {
  transform: translateY(-2px);
}

.lightbox-img-row {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 0;
  padding: 7.3vh var(--page-margin) 0 var(--page-margin); /* ~72px Top bei MBP 14" (982px Viewport) */
  gap: 24px;
  box-sizing: border-box;
}
.lightbox-img-wrap {
  flex: 1;
  display: block;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.lightbox-img-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}
.lightbox-img-placeholder img.lb-main {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom left;
}

.lightbox-caption-col {
  flex: 1;
  text-align: left;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
}
.lightbox-overlay-caption,
.lightbox-info { display: none; }
.lightbox-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 1002;
  display: none;
}


/* Thumbnail-Strip in der Lightbox */
.lb-thumb-strip {
  flex-shrink: 0;
  height: 47px;
  padding: 0 var(--page-margin); /* gleicher Abstand zur Seite wie X-Btn */
  margin-bottom: 10px;
  box-sizing: border-box;
}
/* Auf Bildschirmen größer als MBP 14" (1512px breit): Abstand Strip → unterer Rand auf vh basieren */
@media (min-width: 1513px) {
  .lb-thumb-strip {
    margin-bottom: 1vh;
  }
}
.lb-thumb-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.lb-thumb-track {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-shrink: 0;
}
.lb-thumb-item {
  flex-shrink: 0;
  height: 32px;
  padding-bottom: 4px;
  box-sizing: content-box;
  cursor: pointer;
}
.lb-thumb-item.is-active {
  cursor: default;
  border-bottom: 2px solid #828282;
}
.lb-thumb-item img {
  height: 32px;
  width: auto;
  max-width: none;
  display: block;
  pointer-events: none;
}
/* Auf Bildschirmen größer als MBP 14": Thumbnails + Abstände proportional vergrößern */
@media (min-width: 1513px) {
  .lb-thumb-item,
  .lb-thumb-item img {
    height: 3.26vh; /* = 32px auf MBP 14" (982px Viewport-Höhe) */
  }
  .lb-thumb-item {
    padding-bottom: 0.41vh; /* = 4px auf MBP 14" */
  }
  .lb-thumb-item.is-active {
    border-bottom-width: 0.2vh; /* = 2px auf MBP 14" */
  }
}


/* ══════════════════════════════════════════════════════════════════════
   NEWSLETTER (GetResponse Embed)
   ══════════════════════════════════════════════════════════════════════ */
getresponse-form,
#gr-newsletter-form { display: block; margin-top: max(8px, 0.529vw); }

getresponse-form form,
getresponse-form .gr-form,
#gr-newsletter-form form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: max(8px, 0.529vw) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
getresponse-form input[type="email"],
getresponse-form input[type="text"],
#gr-newsletter-form input[type="email"],
#gr-newsletter-form input[type="text"] {
  border: none !important;
  border-bottom: 1px solid #828282 !important;
  background: transparent !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  padding: 2px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: max(160px, 10.582vw) !important;
}
getresponse-form button,
getresponse-form input[type="submit"],
#gr-newsletter-form input[type="submit"],
#gr-newsletter-form button[type="submit"] {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}
getresponse-form button:hover,
getresponse-form input[type="submit"]:hover,
#gr-newsletter-form input[type="submit"]:hover,
#gr-newsletter-form button[type="submit"]:hover { color: var(--color-hover) !important; }


/* ══════════════════════════════════════════════════════════════════════
   HELPERS
   ══════════════════════════════════════════════════════════════════════ */
.addr-break-mobile { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   Sortiert von groß nach klein (Desktop-First)
   ══════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   max(768px, 50.794vw) — Mobile Layout
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root        { --page-margin: 9px; }
  body         { font-size: 14px; line-height: 1; }
  .header      { font-size: 14px; line-height: 0.9; }

  /* Engerer Zeilenabstand für Presstext und Werk-Infos */
  .ex-presstext, .ex-presstext p,
  .aw-presstext-body p,
  .ex-info-block,
  .werk-material { line-height: 1; }

  /* Single-Exhibition: kompakter Abstand vom Presstext bis zum ersten Bild */
  body.single-exhibition .ex-presstext-wrap-single { margin-bottom: 48px !important; }
  /* Abstand vom Presstext zum ersten Werk halbiert (150 → 75) */
  body.single-exhibition .ex-works-detail { margin-top: 0; } /* presstext-wrap-single hat bereits margin-bottom 48 */
  /* Logo auf Landing Page (body.home) nicht klickbar */
  body.home .header-logo a { pointer-events: none; }

  /* Header */
  .header {
    padding: 40px 9px 0 9px;
    gap: 16px;
    align-items: flex-end;
  }
  .header-logo {
    padding-top: 0;
    align-self: flex-start;
    position: relative;
    bottom: 0;
    margin-top: 1px;
  }
  .header-logo .logo-img { height: 32px; } /* Mobile: 90% von Desktop (36px) — wie line-height 1 → 0.9 */
  .header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding-bottom: 0;
    padding-top: 6px;
  }
  .nav-col { text-align: right; white-space: nowrap; }
  .subscribe-col    { display: none; }
  .header-subscribe { padding: 0 var(--page-margin); }
  /* Subscribe auf Mobile: kein extra Abstand nach oben */
  #subscribe-toggle,
  #subscribe-toggle-footer { padding-top: 0; min-height: 0; }

  /* Footer */
  .site-footer { padding-bottom: 60px; }
  body.home .site-footer { padding-bottom: 5px; margin-top: 84px; } /* Landing: gleicher Abstand wie zwischen Ausstellungen */
  body.home .footer-supporter-mobile { margin-top: 0; } /* sonst margin-collapse mit site-footer margin-top */
  .site-footer .header {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
  }
  .site-footer .header-logo-group {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 1px;
  }
  .site-footer .footer-supporter:not(.footer-supporter-mobile) { display: none; }
  .site-footer .footer-supporter-mobile,
  .footer-supporter-mobile {
    display: block !important;
    text-align: left !important;
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--page-margin);
    margin-top: 40px;
    color: var(--color-footer);
    font-size: 13px;
    font-weight: 700;
  }

  /* Hero */
  .hero-area .header {
    position: static;
    order: 0;
    margin-top: unset;
    padding-top: var(--page-margin);
    padding-bottom: 0;
    justify-content: space-between;
    gap: 16px;
  }
  .hero-area .main-image-wrap { order: 0; margin-top: unset; }

  /* Misc */
  .logo     { font-size: 73px; }
  .nav-info { text-align: left; }

  /* Hauptbild auf Mobile: volle Viewport-Breite */
  .main-image-wrap { margin-top: 32px; margin-bottom: 32px; padding: 0; }
  .main-img {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .img-placeholder.main-img { width: 100vw; max-width: 100vw; }

  #go-top { right: 0; padding: 4px 20px 4px 6px; bottom: 17px; }
}

/* ══════════════════════════════════════════════════════════════════════
   max(600px, 39.683vw) — Mobile (Single-Exhibition + All-Works)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── Mobile: alle Texte mit Upcoming-Zeilenabstand, außer Presstext ── */
  body                                                { line-height: 0.9; }
  .ex-presstext, .ex-presstext p,
  .aw-presstext-body p,
  .ex-artist-description p,
  .ex-artist-description-block p                      { line-height: 1.6; }
  .werk-info                                          { line-height: 0.9; }
  .werk-material                                      { line-height: 0.9; }

  /* ── Single-Exhibition: Info-Zeile ── */
  .ex-info-row   { margin: var(--page-top) 9px 0 9px; flex-direction: column; gap: 8px; }
  .ex-info-block { flex-direction: column; gap: 0; line-height: 0.9; }
  body.single-exhibition .ex-info-artists           { max-width: 70vw; margin-bottom: 1em; }
  body.single-exhibition .ex-info-dates             { font-size: 11px; }
  body.single-exhibition .ex-presstext-wrap-single  { margin-top: 48px; margin-bottom: 48px; }

  /* Single-Exhibition: Sticky-Menu wird Vollbild-Overlay */
  .ex-menu-wrap                            { left: 0; right: 0; top: 40px; }
  .ex-menu-wrap.is-open                    { inset: 0; top: 0; }
  .ex-menu-btn                             { padding-right: 9px; }
  .ex-menu-overlay                         { width: 100%; max-width: 100%; left: 0; background: #fff; }
  .ex-menu-wrap.is-open .ex-menu-overlay   { width: 100%; height: 100%; padding: 40px 9px; overflow-y: auto; }

  /* Single-Exhibition: Presstext + Thumbnails + Werke volle Breite */
  .ex-text-block { margin-left: 9px; margin-right: 9px; width: auto; max-width: calc(100% - 18px); }
  .ex-thumb-grid {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    margin-left: 9px;
    margin-right: 9px;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .ex-thumb-item    { width: 100%; height: auto; aspect-ratio: 259 / 188; }
  .ex-works-detail  { padding: 0; }
  .werk             { width: 100vw; max-width: 100vw; overflow: hidden; align-items: flex-start; }
  .werk-inner       { width: 100vw; max-width: 100vw; }
  .werk-img         { width: 100vw !important; max-width: 100vw !important; }
  .carousel         { width: 100vw !important; max-width: 100vw !important; }
  .carousel-slide   { width: 100vw !important; min-width: 100vw !important; max-height: none !important; margin: 0 !important; }
  .werk-controls    { display: none; }
  .werk-inner       { width: 100vw; max-width: 100vw; position: relative; }
  .werk-info              { padding: 0 9px; margin-top: 6px; }
  /* Bei mehreren Bildern (werk-numbers oben rechts): rechts Platz freihalten, damit Text nicht überlappt */
  .werk-info.has-numbers  { padding-right: 40px; }
  /* werk-numbers rechts am Body-Padding (= var(--page-margin)), auf Höhe von werk-artist (top per JS gesetzt) */
  .werk-numbers-mobile {
    display: inline-flex;
    position: absolute;
    right: var(--page-margin);
    font-weight: 700;
    color: var(--color-controls);
  }
  .werk-enlarge     { display: none; }

  .installation-grid-detail {
    gap: 60px;
    margin-bottom: 30px;
    margin-left: 0;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    align-items: flex-start;
  }
  .installation-img { width: 100vw !important; max-width: 100vw !important; margin-left: 0; }

  /* ── All-Works: Hero, Layout, Sections ── */
  .hero-area.aw-hero                      { height: 65vh; }
  .hero-area.aw-hero .main-image-wrap     { display: none; }
  .all-works-page                         { padding-top: 20px; }
  .all-works-page .aw-index-btn           { top: 20px; line-height: 0.9; }
  .site-footer .header                    { display: none; } /* nur Supporter-Satz auf Mobile */

  /* All-Works Grid: 5 Spalten erzwingen, größere Gaps */
  .aw-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 16px;
    row-gap: 32px;
  }
  .aw-grid .ex-thumb-item { width: 100%; aspect-ratio: 4 / 3; }

  /* Section-Labels (Upcoming/Past) luftig — gleicher Abstand zum Künstler */
  .aw-section-label { line-height: 0.9; }

  /* Upcoming-Section */
  .aw-section                            { line-height: 0.9; }
  .aw-section-upcoming                   { line-height: 0.9; margin-bottom: 96px; }
  .aw-section-upcoming .ex-info-artists  { max-width: 100%; }
  .aw-section-upcoming .ex-info-dates    { font-size: 11px; }
  .aw-section-upcoming .aw-name          { display: block; }      /* Künstler untereinander */
  .aw-section-upcoming .aw-name-sep      { display: none; }

  /* Past-Sections: Titel + Presstext-Link aus, Datum klein */
  .aw-section { margin-bottom: 84px; }
  .aw-section:not(.aw-section-upcoming) .ex-info-title,
  .aw-section:not(.aw-section-upcoming) .aw-presstext-wrap { display: none; }
  .aw-section:not(.aw-section-upcoming) .ex-info-dates     { font-size: 11px; }
  /* Past-Sections: Info ÜBER dem Grid, Künstler-Datum-Gap kleiner */
  .aw-section:not(.aw-section-upcoming) {
    display: flex;
    flex-direction: column;
  }
  .aw-section:not(.aw-section-upcoming) .aw-section-label  { order: 0; }
  .aw-section:not(.aw-section-upcoming) .aw-info {
    order: 1;
    margin: 0 var(--page-margin) 12px var(--page-margin);
  }
  .aw-section:not(.aw-section-upcoming) .aw-grid           { order: 2; }
  .aw-section:not(.aw-section-upcoming) .ex-info-block     { gap: 4px; }
  /* Past-Sections sind klickbar */
  .aw-section[data-ex-url]:not(.aw-section-upcoming)       { cursor: pointer; }

  /* Adresse: Umbruch nach "20357" → Hamburg auf eigene Zeile */
  .addr-break-mobile { display: inline; }

  /* Single-Exhibition: alten Menu-Button und Werke-Thumbnails ausblenden */
  body.single-exhibition .ex-menu-wrap   { display: none; }
  body.single-exhibition .ex-thumb-grid  { display: none; }

  /* Single-Exhibition: Presstext + Artist-Description gemeinsam einklappen, volle Breite */
  body.single-exhibition .ex-presstext-wrap-single .ex-text-block,
  body.single-exhibition .ex-presstext-wrap-single .ex-artist-description-block {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  body.single-exhibition .ex-presstext-wrap-single .ex-artist-description-block {
    margin-top: 30px;
  }
  body.single-exhibition .aw-presstext-body > div { max-width: 100%; }

  /* Index-Overlay-Header (Overview-Link) auf Mobile sichtbar — auf Landing UND Single-Exhibition */
  .aw-index-header { display: block; margin-top: -10px; } /* hochsetzen, damit bündig mit X-Btn */
  /* Mehr Platz zwischen den Ausstellungs-Einträgen im Index-Menü */
  .aw-index-overlay .aw-index-item { margin-bottom: 0.6em; }
  /* Index-Btn auf gleicher line-height wie Body, oben rechts wie auf Landing */
  body.single-exhibition .aw-index-btn { line-height: 0.9; top: 20px; }
  /* Header auf Single-Exhibition Mobile ausblenden — Künstler beginnt direkt am Page-Top wie auf Landing */
  body.single-exhibition > .header { display: none; }
  body.single-exhibition .ex-info-row { margin: 20px 9px 0 9px; }
  /* Index-Overlay: Footer im Flow */
  .aw-index-overlay .site-footer .header { display: flex; padding-top: 0; }
  .aw-index-overlay.is-open {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .aw-index-overlay .site-footer {
    margin-top: 60px;
    padding-top: 0;
    padding-bottom: 100px;
  }
  .aw-index-overlay .footer-supporter-mobile { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Single-Exhibition Desktop (≥max(601px, 39.749vw))
   Index-Btn aus, Presstext-Toggle aus, Layout flacher
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  body.single-exhibition .aw-index-btn,
  body.single-exhibition .aw-index-overlay { display: none !important; }
  /* Presstext-Wrapper transparent (display:contents), Toggle versteckt */
  body.single-exhibition .ex-presstext-wrap-single,
  body.single-exhibition .ex-presstext-wrap-single .aw-presstext-body,
  body.single-exhibition .ex-presstext-mobile-inner { display: contents; }
  body.single-exhibition .ex-presstext-wrap-single .aw-presstext-toggle { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Single-Exhibition: Supporter-Satz im Footer ausblenden
   ══════════════════════════════════════════════════════════════════════ */
body.single-exhibition .footer-supporter,
body.single-exhibition .footer-supporter-mobile { display: none !important; }