/* ==========================================================
   Werke: schwebende Übersicht + Serienansicht
   ========================================================== */

/* Zoom zwischen Kachel und Serie (Chrome, Edge, Safari ab 18.2; Firefox öffnet normal) */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

/* ---------- Übersicht ---------- */
.works-h1{margin-bottom:72px}
.works-shop{margin:64px 0 0;font-size:13px;color:var(--muted)}
/* Positionen sind auf 1184 px Breite angelegt und skalieren mit (Breite/Abstand oben relativ zur Feldbreite) */
.field{position:relative;height:0;padding-bottom:calc(var(--fh,1300) / 1184 * 100%)}
.ft{position:absolute;left:var(--x);top:calc(var(--y) / var(--fh,1300) * 100%);width:calc(var(--w) / 1184 * 100%);display:block;animation:mz-float var(--dur) ease-in-out var(--del) infinite alternate}
@keyframes mz-float{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
.ft img,.ft .ph{display:block;width:100%;height:auto;transition:opacity .45s ease}
.ph{background:#ececea;aspect-ratio:4/5}
.field:has(.ft:hover) .ft:not(:hover) img,.field:has(.ft:hover) .ft:not(:hover) .ph{opacity:.28}
.nm{position:absolute;left:0;top:calc(100% + 14px);font-family:var(--serif);font-size:30px;line-height:1.1;white-space:nowrap;color:var(--ink);opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.ft:hover .nm,.ft:focus-visible .nm{opacity:1;transform:none}
.ft:focus-visible{outline-offset:8px}
@media (hover:none){.nm{opacity:1;transform:none;font-size:22px}}

/* ---------- Serienansicht ---------- */
.sv{position:relative}
.bar{position:fixed;left:0;right:0;top:var(--wp-admin--admin-bar--height,0px);height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:var(--paper);z-index:5}
.bar-l{display:flex;align-items:center;gap:0;min-width:0}
.back{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.svt{margin:0 0 0 28px;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtn{margin-left:32px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;min-height:44px;white-space:nowrap}
/* Eine Arbeit pro Ansicht, mittig; Blättern rastet jeweils auf der nächsten Arbeit ein */
.sv{--svh:calc(100dvh - 176px - var(--wp-admin--admin-bar--height,0px));--txtw:440px}
.strip{display:flex;align-items:stretch;gap:0;margin-top:96px;height:calc(100vh - 176px - var(--wp-admin--admin-bar--height,0px));height:var(--svh);overflow-x:auto;overflow-y:hidden;padding:0;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;transition:transform .6s cubic-bezier(.2,.75,.15,1)}
.strip::-webkit-scrollbar{display:none}
.it{flex:0 0 100%;margin:0;height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always}
.it-in{display:flex;flex-direction:column;align-items:flex-start;max-width:calc(100% - 96px)}
.it img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(var(--svh) - 36px);background:var(--tone)}
.it figcaption{margin-top:12px;font-size:13px;color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.end{display:none}
.foot{position:fixed;left:48px;right:48px;bottom:0;height:80px;display:flex;align-items:center;gap:28px;background:var(--paper);z-index:4;transition:left .6s cubic-bezier(.2,.75,.15,1)}
.foot[hidden]{display:none}
.prog{flex:1;height:1px;background:var(--line);position:relative}
.prog span{position:absolute;left:0;top:0;height:1px;width:4%;background:var(--ink);transition:width .15s linear}
.arr{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.arr:hover{color:var(--muted)}
.hint{font-size:12px;color:#8a8a8a;white-space:nowrap}

/* Text: ohne JavaScript unter den Bildern */
.txt{max-width:720px;margin:64px auto 96px;padding:0 var(--gutter)}
.txt h2{margin:0;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1}
.txt .meta{margin:16px 0 28px;font-size:13px;line-height:1.8;color:var(--muted)}
.txt-body p{margin:0 0 18px;font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink-2)}
.txt-body a{border-bottom:1px solid var(--line-2)}
.txt h3{margin:32px 0 10px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.small-list{list-style:none;margin:0;padding:0}
.small-list li,.txt .small{font-size:14px;line-height:1.6;margin:0 0 6px}
.txt .small{margin-top:32px}
.x{position:absolute;top:28px;right:32px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.x[hidden]{display:none}

/* Mit JavaScript (Computer): Text als Spalte links unter der Leiste; offen rücken Bilder und Fußleiste nach rechts */
.js .single-serie{overflow:hidden}
.js .sv{overflow-x:clip} /* hinausgeschobenes Bild nicht seitlich scrollbar machen */
.js .txt{position:fixed;top:calc(96px + var(--wp-admin--admin-bar--height,0px));left:0;bottom:0;width:var(--txtw);max-width:100%;margin:0;padding:24px 40px 48px 48px;background:var(--paper);border-right:1px solid var(--line);overflow:auto;transform:translateX(-102%);transition:transform .6s cubic-bezier(.2,.75,.15,1);z-index:6}
.js .txt.show{transform:none}
.js .txt .x{top:16px;right:16px}
.js .sv.t-open .strip{transform:translateX(var(--txtw))} /* Text schiebt das Bild nach rechts hinaus, Größe bleibt */
.js .sv.t-open .foot{left:calc(var(--txtw) + 48px)}
/* Anfangszustand schon beim Laden (bevor das Skript läuft), damit nichts springt */
@media (min-width:761px){
  .js .sv.start-open .txt{transform:none}
  .js .sv.start-open .strip{transform:translateX(var(--txtw))}
  .js .sv.start-open .foot{left:calc(var(--txtw) + 48px)}
}
.sv.no-anim .txt,.sv.no-anim .strip,.sv.no-anim .foot{transition:none !important}

/* ---------- Handy ---------- */
@media (max-width:760px){
  .field{height:auto;display:flex;flex-direction:column;gap:64px;padding-bottom:40px}
  .ft{position:relative;left:auto;top:auto;width:var(--mw);margin-left:var(--ml)}
  .nm{position:static;display:block;margin-top:10px}

  .js .single-serie{overflow:auto}
  .bar{position:sticky;top:0;height:64px;padding:0 16px}
  .svt{font-size:22px;margin-left:14px}
  .back{gap:8px}
  .strip{flex-direction:column;align-items:stretch;gap:56px;margin-top:0;height:auto;overflow:visible;padding:24px 16px 0;scroll-snap-type:none}
  .js .sv.t-open .strip{transform:none}
  .it{height:auto;display:block}
  .it-in{display:block;max-width:none}
  .it img{width:100%;height:auto;max-height:none}
  .it figcaption{white-space:normal}
  .end,.js .sv .end{display:block;flex-basis:auto;height:40vh}
  .bar-l{flex:1}
  .tbtn{margin-left:auto;padding-left:12px}
  .foot{display:none !important}
  .js .txt{top:auto;left:0;right:0;width:auto;height:72%;height:72dvh;border-right:0;border-top:1px solid var(--line);padding:56px 20px 32px;transform:translateY(102%);box-shadow:0 -12px 40px rgba(0,0,0,.06)}
  .js .txt .x{top:8px;right:8px}
  .txt h2{font-size:36px}
  .txt-body p{font-size:19px}
  .x{top:8px;right:8px}
  @supports (animation-timeline: view()){
    .it img{animation:mz-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes mz-rise{from{opacity:0;transform:translateY(48px) scale(.94)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .ft{animation:none}
  .js .txt,.strip,.foot{transition:none}
  .it img{animation:none !important}
}