/* Layout values copied from the supplied Claude source. */
:root{--ref-gutter:clamp(16px,3.2vw,48px);--gap:clamp(8px,1vw,14px);--ref-section:clamp(80px,11vw,170px);--ease:cubic-bezier(.16,1,.3,1);--bg-2:#121316}
#arbeiten{width:100%;max-width:1560px;margin-inline:auto;padding:var(--ref-section) var(--ref-gutter) 0}
#arbeiten .exhibition-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:clamp(20px,3vw,36px);border-bottom:1px solid rgba(241,240,237,.1)}
#arbeiten .exhibition-heading h2{font-size:clamp(2.3rem,5.4vw,5.4rem);line-height:.98;letter-spacing:-.045em;font-weight:500}
#arbeiten .exhibition-heading h2 em{color:#676a70}
#arbeiten .exhibition-heading .eyebrow{font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;font-size:.68rem;letter-spacing:.14em;padding-bottom:8px;margin:0;color:#676a70;white-space:normal}
#arbeiten .inside-heading{margin-top:var(--ref-section)}
#arbeiten .project::after{display:none}
#arbeiten .project img{aspect-ratio:auto}
/* Raster (Aussen / Innen) */
#arbeiten .gallery { display: grid; align-items:stretch; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(90px, 8.6vw, 148px); grid-auto-flow: dense; gap: var(--gap); }
#arbeiten .project { position: relative; margin: 0; overflow: hidden; background: var(--bg-2); border-radius: 10px; grid-column: span 3; grid-row: span 3; isolation: isolate; }
#arbeiten .project.c2 { grid-column: span 2; } #arbeiten .project.c3 { grid-column: span 3; } #arbeiten .project.c4 { grid-column: span 4; } #arbeiten .project.c6 { grid-column: span 6; }
#arbeiten .project.r3 { grid-row: span 3; } #arbeiten .project.r4 { grid-row: span 4; }
#arbeiten .project a, #arbeiten .project .inner { display: block; width: 100%; height: 100%; position: relative; }
#arbeiten .project img, #arbeiten .project video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#arbeiten .project img { transform: scale(1.02); transition: transform 1.3s var(--ease), filter .6s; }
#arbeiten .project:hover img { transform: scale(1.07); }
#arbeiten .project video { opacity: 0; transition: opacity 1s; }
#arbeiten .project video.playing { opacity: 1; }
#arbeiten .project .hud { position: absolute; inset: 12px; pointer-events: none; opacity: 0; transition: opacity .35s; }
#arbeiten .project .hud i { position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); }
#arbeiten .project .hud i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
#arbeiten .project .hud i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
#arbeiten .project .hud i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
#arbeiten .project .hud i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
#arbeiten .project:hover .hud { opacity: 1; }
#arbeiten .project .live { position: absolute; left: 14px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; animation: blink 1.6s ease-in-out infinite; z-index: 2; }
#arbeiten .project.has-video .live { opacity: 1; }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 900px) {
  #arbeiten .gallery { grid-auto-rows: auto; gap: 8px; }
  #arbeiten .gallery .project:nth-child(n) { grid-column: span 6; grid-row: auto; aspect-ratio: 16 / 10; }
  #arbeiten .gallery .project.tall { aspect-ratio: 4 / 5; }
  #arbeiten .project img { transform: none; }
}
@media (min-width: 560px) and (max-width: 900px) {
  #arbeiten .gallery .project.c2, #arbeiten .gallery .project.c3 { grid-column: span 3; }
  #arbeiten .project.tall { grid-column: span 3; }
}


#arbeiten .project.reveal{transition:opacity .9s var(--ease),translate 1s var(--ease)}
.js #arbeiten .project.reveal:not(.visible){opacity:0;translate:0 22px}
.hero-scroll{height:180vh}
.hero{height:100vh;height:100svh;min-height:0}
.hero-frame{opacity:1;transform:scale(var(--hero-scale,1));border-radius:0}
.hero-frame::after{content:'';position:absolute;inset:0;background:#0b0c0e;opacity:var(--hero-dim,0);pointer-events:none}
.hero-after{display:none}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:100svh}.hero-frame{transform:none}.hero-frame::after{opacity:0}.js #arbeiten .project.reveal:not(.visible){opacity:1;translate:none}}