.wl2 { --fs-label: 10px; --fs-text: 11px; --fs-title: 13px; }
/* Selected Works: Projektliste links, Bilder rechts. Hover = Vorschau, Klick = alle Bilder des Projekts */
.wl2 { --rh: 7.5vw; }
.wl2 main { position: relative; padding: 0 var(--side) 80px; }
.wl2 .marks { position: absolute; inset: 0 var(--side); display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: var(--rh); pointer-events: none; overflow: hidden; z-index: 0; color: #c6c6c6; font-size: 5px; line-height: 1; }
.wl2 .marks i { position: relative; display: block; font-style: normal; }
.wl2 .marks i::before { content: "+"; position: absolute; left: -1.6px; top: -2.6px; }
.wl2 .layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: clamp(8px, 2vh, 24px); }

.wl2 .intro { grid-column: 1; margin: 0 0 clamp(20px, 5vh, 56px); max-width: 44ch; font-size: var(--fs-text, 11px); line-height: 1.5; color: var(--muted); }
.wl2 .list { grid-column: 1; list-style: none; margin: 0; padding: 0; }
.wl2 .list li { border-top: 1px solid var(--line); }
.wl2 .list li:last-child { border-bottom: 1px solid var(--line); }
.wl2 .row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr); gap: 4px 16px; align-items: baseline; width: 100%; padding: clamp(14px, 2.4vh, 24px) 0; background: none; border: 0; text-align: left; font: inherit; font-size: var(--fs-text, 11px); line-height: 1.35; color: var(--text); cursor: pointer; }
.wl2 .row .name { font-weight: 600; }

.wl2 .row .m { color: var(--muted); }
.wl2 .row:hover .name, .wl2 .row:focus-visible .name { text-decoration: underline; text-underline-offset: 3px; }
.wl2 li.on .row .name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.wl2 .stage { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 76px; height: calc(100svh - 150px); min-height: 360px; background: var(--placeholder); overflow: hidden; }
.wl2 .pv { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; overflow: hidden; }
.wl2 .pv.on { opacity: 1; }
.wl2 .pv img, .wl2 .pv video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl2 .gal { position: absolute; inset: 0; overflow-y: auto; background: var(--bg); display: none; scrollbar-width: none; }
.wl2 .gal::-webkit-scrollbar { display: none; }
.wl2 .stage.open .gal { display: block; }
.wl2 .gal figure { margin: 0 0 12px; } .wl2 .gal figure:last-child { margin-bottom: 0; }
.wl2 .gal img, .wl2 .gal video { display: block; width: 100%; height: auto; background: var(--placeholder); }
.wl2 .close { position: absolute; top: 10px; right: 12px; z-index: 3; display: none; font: inherit; font-size: var(--fs-label, 10px); background: var(--bg); color: var(--text); border: 0; padding: 4px 8px; cursor: pointer; }
.wl2 .stage.open .close { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .wl2 .pv.kb1.on img { animation: kbA 20s ease-in-out infinite alternate; }
  .wl2 .pv.kb2.on img { animation: kbB 24s ease-in-out infinite alternate; }
  .wl2 .pv.kb3.on img { animation: kbC 22s ease-in-out infinite alternate; }
  @keyframes kbA { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
  @keyframes kbB { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1.02); } }
  @keyframes kbC { from { transform: scale(1.04) translate(-1.5%, 1.5%); } to { transform: scale(1.16) translate(1.5%, -1.5%); } }
}

/* Handy: keine Vorschau rechts, die Bilder klappen unter der Zeile auf */
.wl2 .gal-m { display: none; }
@media (max-width: 860px) {
  .wl2 .layout { grid-template-columns: 1fr; }
  .wl2 .stage { display: none; }
  .wl2 .row { grid-template-columns: 1fr 1fr; }
  .wl2 .row .name { grid-column: 1 / -1; }
  .wl2 li.on .gal-m { display: block; padding: 4px 0 18px; }
  .wl2 .gal-m figure { margin: 0 0 10px; }
  .wl2 .gal-m img, .wl2 .gal-m video { display: block; width: 100%; height: auto; }
  .wl2 .marks { display: none; }
}

/* Zeichnungen (Explosionsplan) ganz zeigen, nicht beschneiden */
.wl2 .pv.fit { background: var(--bg); }
.wl2 .pv.fit img { object-fit: contain; padding: 4%; }

/* Projekttext als zweites „Bild“ der Galerie */
.wl2 .gal figure.txt, .wl2 .gal-m figure.txt { padding: clamp(16px, 2vw, 28px); background: transparent; font-size: var(--fs-text, 11px); line-height: 1.6; color: var(--text); }
.wl2 .txt .tt { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title, 13px); line-height: 1.1; letter-spacing: -.01em; }
.wl2 .txt .st { margin: 0 0 14px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-text, 11px); line-height: 1.4; }
.wl2 .txt .nt { margin: 0 0 14px; color: var(--muted); }
.wl2 .txt dl { margin: 0 0 14px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.wl2 .txt dl.cr { grid-template-columns: 1fr; }
.wl2 .txt dl.cr > div { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.wl2 .txt dt { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label, 10px); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.wl2 .txt dd { margin: 0; }
.wl2 .txt .tx p { margin: 0 0 .8em; } .wl2 .txt .tx { margin-bottom: 14px; }
.wl2 .txt .hd { margin: 14px 0 6px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label, 10px); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wl2 .txt .lk { margin: 0; padding: 0; list-style: none; } .wl2 .txt .lk a { border-bottom: 1px solid currentColor; } .wl2 .txt .lk .source { display: block; color: var(--muted); font-size: var(--fs-label, 10px); }
@media (max-width: 860px) { .wl2 .txt dl, .wl2 .txt dl.cr > div { grid-template-columns: 1fr; gap: 0; } .wl2 .txt dd { margin-bottom: 6px; } }