/* Gemeinsames Layout für Galerie-Unterseiten. Landingpage bleibt unverändert. */
:root { --ink:#414141; --muted:#bdbdbd; --header-bottom:172px; --fade-depth:70px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.gallery-page { margin:0; color:var(--ink); background:#fff; font:400 14px/1.35 Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; z-index:100; top:0; left:0; right:0; height:var(--header-bottom); pointer-events:none; }
.site-header::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.99) 28%,rgba(255,255,255,.93) 54%,rgba(255,255,255,.72) 75%,rgba(255,255,255,0) 100%); pointer-events:none; }
.back-link,.current-section,.site-nav { position:absolute; z-index:1; top:54px; }
.back-link { left:9.2%; font-size:17px; line-height:1; pointer-events:auto; }
.current-section { left:50%; transform:translateX(-50%); white-space:nowrap; }
.site-nav { right:6.2%; display:flex; align-items:flex-end; flex-direction:column; gap:0; min-width:120px; text-align:right; line-height:16px; pointer-events:auto; }
.site-nav a:first-child { margin-bottom:12px; }
.site-nav a[aria-current="page"] { color:var(--muted); }
.site-nav a:hover,.back-link:hover { color:#a0a0a0; }
.artwork-list { padding:calc(var(--header-bottom) + 36px) 5% 10vh; display:flex; flex-direction:column; align-items:center; gap:clamp(130px,23vh,270px); }
.artwork { width:min(100%,1240px); display:flex; align-items:center; flex-direction:column; }
.artwork-images { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr); align-items:center; gap:clamp(14px,4vw,78px); }
.hero-wrap { grid-column:2; grid-row:1; display:flex; justify-content:center; align-items:center; min-width:0; }
.artwork-main { display:block; width:auto; height:auto; max-width:100%; max-height:min(70svh,720px); object-fit:contain; cursor:default; }
.artwork-main:focus-visible { outline:1px solid #888; outline-offset:5px; }
.detail { display:block; width:100%; max-width:280px; max-height:min(53svh,530px); object-fit:contain; justify-self:center; opacity:0; visibility:hidden; transform:translateY(7px); transition:opacity .25s ease,transform .25s ease,visibility .25s ease; }
.detail-left { grid-column:1; grid-row:1; }
.detail-right { grid-column:3; grid-row:1; }
@media (hover:hover) and (min-width:701px) { .artwork.has-details:hover .detail,.artwork.has-details:focus-within .detail { opacity:1; visibility:visible; transform:translateY(0); } }
.artwork-description { text-align:center; max-width:min(620px,90%); margin-top:17px; line-height:1.4; }
.artwork-title { margin:0 0 14px; font:inherit; }
.artwork-description p { margin:0; }
.artwork-description .availability { margin-top:16px; color:#bdbdbd; font-style:italic; }
.artwork-description .free-text { margin-top:18px; white-space:pre-line; }
.artwork.is-demo .artwork-description { color:#898989; }
@media(max-width:700px) {
  :root { --header-bottom:150px; --fade-depth:56px; }
  body.gallery-page { font-size:12px; }
  .back-link,.current-section,.site-nav { top:27px; }
  .back-link { left:20px; }
  .site-nav { right:15px; min-width:auto; font-size:11px; line-height:15px; }
  .current-section { top:27px; font-size:11px; line-height:15px; }
  .artwork-list { padding:calc(var(--header-bottom) + 28px) 12px 90px; gap:140px; }
  .artwork-images { display:flex; align-items:center; flex-direction:column; gap:14px; }
  .hero-wrap { width:100%; }
  .artwork-main { max-width:88vw; max-height:61svh; }
  .has-details .artwork-main { cursor:pointer; }
  .detail { display:none; width:min(76vw,300px); max-width:100%; max-height:45svh; opacity:1; visibility:visible; transform:none; }
  .artwork.has-details.details-visible .detail { display:block; }
  .artwork-description { margin-top:13px; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} .detail{transition:none;} }
.copyright { position:fixed; bottom:14px; left:0; width:100%; text-align:center; font-family:Arial,sans-serif; font-size:10px; font-weight:400; color:#999; z-index:100; pointer-events:none; }

/* Beliebig viele gleichwertige Hauptbilder als ruhige Bildfolge vor dem Werktitel. */
.artwork-images.is-series { display:flex; flex-direction:column; align-items:center; gap:clamp(28px,7vh,90px); }
.artwork-images.is-series .hero-wrap { width:100%; }
.artwork-images.is-series .artwork-main { margin:0 auto; }
/* Eine Bilderfolge besitzt keine seitlich schwebenden Detailbilder; sie ist selbst die Serie. */
.artwork-images.is-series .detail { display:none; }
.artwork-images.is-series .hero-wrap { position:relative; }
.artwork-images.is-series .hero-wrap .artwork-main { max-width:min(88vw,850px);max-height:80svh; }
.editorial-page { padding:calc(var(--header-bottom) + 40px) max(7%,20px) 110px;max-width:850px;margin:0 auto; }
.editorial-picture { display:block;max-width:100%;max-height:75svh;width:auto;height:auto;object-fit:contain;margin:0 auto 50px; }
.editorial-text { font:inherit;line-height:1.45;white-space:pre-line; }
.editorial-contact { margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:8px; }
.editorial-contact a { text-decoration:none;overflow-wrap:anywhere; }
.editorial-contact a:hover { color:#999; }
@media(max-width:700px) {
  .artwork-images.is-series { gap:36px; }
  .artwork-images.is-series .hero-wrap .artwork-main { max-width:88vw;max-height:66svh; }
  .editorial-page { padding-top:calc(var(--header-bottom) + 35px); }
  .editorial-picture { margin-bottom:34px; }
}
/* Bildschutz auf allen Unterseiten */

img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* ABOUT – exakt wie Navigation */

.editorial-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #414141;
}

.editorial-text p {
  margin: 0 0 36px;
}

.vita-title {
  margin: 60px 0 36px;
  text-align: left;
  font: inherit;
  font-weight: 400;
}

.vita {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 18px;

  font: inherit;
  color: inherit;
  text-align: left;
}

.vita-year {
  font: inherit;
  white-space: nowrap;
}

@media (max-width: 700px) {

  .editorial-text {
    font-size: 11px;
    line-height: 15px;
  }

  .vita {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 15px;
  }
}


/* ABOUT – Bild und Text gleich breit */

body:has(.editorial-picture) .editorial-picture {
  width: min(100%, 620px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 40px;
}

body:has(.editorial-picture) .editorial-text {
  width: min(100%, 620px);
  margin: 0 auto;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #414141;
}

body:has(.editorial-picture) .editorial-text p {
  margin: 0 0 36px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Vita bleibt linksbündig */

.vita-title {
  margin: 60px 0 36px;
  text-align: center;
  font: inherit;
}

.vita {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 18px;
  text-align: left;
  font: inherit;
}

.vita-year {
  white-space: nowrap;
}

/* Mobile */

@media (max-width: 700px) {
  body:has(.editorial-picture) .editorial-text {
    font-size: 11px;
    line-height: 15px;
  }

  .vita {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 15px;
  }
}