/* studio.INTERVAL — Projekte (gallery) */

.proj-head{ padding-top:104px; }
.proj-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.proj-head h1{ font-size:clamp(40px,7vw,104px); line-height:0.88; letter-spacing:-0.045em; font-weight:700; }

/* view switcher */
.vswitch{ display:flex; border:1px solid var(--ink); }
.vswitch button{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:9px 16px; background:transparent; border:none; border-right:1px solid var(--ink); cursor:pointer; color:var(--ink); transition:background .2s,color .2s; white-space:nowrap; }
.vswitch button:last-child{ border-right:none; }
.vswitch button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

.proj-sub{ display:flex; justify-content:space-between; align-items:baseline; margin-top:26px; padding-bottom:18px; border-bottom:1px solid var(--ink); }

/* view containers */
.view{ display:none; }
.view.is-active{ display:block; }

/* ---------- toolbar: view switch + 3D-models toggle ---------- */
.vtools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mtoggle{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--ink); background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink); padding:8px 13px; transition:background .2s,color .2s; }
.mtoggle:hover{ background:var(--ink); color:var(--paper); }
.mtoggle[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#16150F; }
.mtoggle .ico{ width:13px; height:13px; position:relative; display:inline-block; }
.mtoggle .ico::before{ content:""; position:absolute; inset:1px; border:1.4px solid currentColor; transform:rotate(0deg) skewX(-12deg); }
.mtoggle .ico::after{ content:""; position:absolute; left:4px; top:-2px; width:8px; height:8px; border:1.4px solid currentColor; opacity:.55; transform:skewX(-12deg); }
.mtoggle[aria-pressed="true"] .ico{ animation:spinIco 3.6s linear infinite; }
@keyframes spinIco{ to{ transform:rotate(360deg); } }

/* ---------- CSS-3D massing model (replaces key image when 3D mode on) ---------- */
.massing{ position:relative; width:100%; height:100%; perspective:760px; background:
   radial-gradient(120% 120% at 30% 12%, #f4f2ec 0%, #e4e1d8 60%, #d8d5cb 100%);
   overflow:hidden; }
.massing__stage{ position:absolute; left:50%; top:54%; transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(-26deg) rotateY(var(--ry,28deg)); }
.massing__grp{ transform-style:preserve-3d; }
.massing .face{ position:absolute; background:#efece5; border:1px solid rgba(22,21,15,.42); }
.massing .face.t{ background:#f6f4ee; }      /* top */
.massing .face.s{ background:#dcd8cd; }       /* side */
.massing .face.f{ background:#e8e5dc; }       /* front */
.massing .face.acc{ background:var(--accent); border-color:var(--accent-deep); }
.massing__shadow{ position:absolute; left:50%; top:50%; width:160px; height:54px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(22,21,15,.26), transparent 72%);
  transform:translate(-50%,120px) rotateX(78deg); filter:blur(1px); }
.massing__tag{ position:absolute; left:12px; bottom:11px; z-index:3; font-family:var(--mono); font-size:10px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-deep); background:rgba(244,242,236,.78); padding:2px 7px; }
.massing__hint{ position:absolute; right:12px; top:11px; z-index:3; font-family:var(--mono); font-size:9px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); }
.scard.is-3d .ph, .tlcard.is-3d .ph{ aspect-ratio:4/3 !important; }

/* ---------- RAUM (3D graph) view ---------- */
.raum-note{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:8px; }
.raum{ position:relative; width:100%; height:74vh; min-height:520px; border:1px solid var(--ink);
  background:radial-gradient(130% 130% at 50% 18%, #f3f1ea 0%, #e9e6df 55%, #ded9cd 100%); overflow:hidden; cursor:grab; }
.raum:active{ cursor:grabbing; }
.raum canvas{ display:block; }
.raum__hud{ position:absolute; left:14px; bottom:13px; z-index:4; display:flex; gap:16px; flex-wrap:wrap; pointer-events:none; }
.raum__hud span{ font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:#5f5d54; display:flex; align-items:center; gap:6px; }
.raum__hud b{ color:var(--accent-deep); font-weight:600; }
.raum__tip{ position:absolute; right:14px; top:13px; z-index:4; font-family:var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--grey); pointer-events:none; }
/* floating label over hovered node */
.raum__label{ position:absolute; z-index:5; transform:translate(-50%,-130%); pointer-events:none; opacity:0;
  transition:opacity .18s; background:#16150F; color:#ECEAE3; padding:6px 10px; white-space:nowrap; }
.raum__label.on{ opacity:1; }
.raum__label b{ font-size:13px; font-weight:600; letter-spacing:-0.01em; display:block; }
.raum__label span{ font-family:var(--mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:#9b988d; }
.raum__loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:6;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); background:rgba(233,230,223,.6); }
.raum__loading.gone{ opacity:0; pointer-events:none; transition:opacity .5s; }

/* ---------- INDEX view ---------- */
.idx-row{ display:grid; grid-template-columns:0.55fr 2.6fr 1.1fr 1fr 0.9fr 0.4fr; gap:var(--gutter); align-items:center; padding:20px 0; border-bottom:1px solid var(--line); position:relative; transition:padding .35s cubic-bezier(.2,.7,.2,1); }
.idx-row:hover{ padding-left:16px; }
.idx-row .i-no{ font-family:var(--mono); color:var(--accent-deep); font-size:13px; }
.idx-row .i-title{ font-size:clamp(20px,2.3vw,30px); font-weight:600; letter-spacing:-0.02em; transition:color .2s; }
.idx-row:hover .i-title{ color:var(--accent-deep); }
.idx-row .i-cell{ font-family:var(--mono); font-size:12px; color:var(--grey); text-transform:uppercase; letter-spacing:0.04em; }
.idx-row .i-arrow{ text-align:right; font-family:var(--mono); color:var(--grey); transition:color .25s,transform .35s; }
.idx-row:hover .i-arrow{ color:var(--accent-deep); transform:translateX(4px); }
.idx-row .i-prev{ position:absolute; right:5%; top:50%; width:220px; height:142px; transform:translateY(-50%) scale(.96); opacity:0; pointer-events:none; transition:opacity .3s,transform .3s; z-index:6; overflow:hidden; border:1px solid var(--line); }
.idx-row .i-prev img{ width:100%; height:100%; object-fit:cover; display:block; }
.idx-row:hover .i-prev{ opacity:1; transform:translateY(-50%) scale(1); }
.idx-head{ display:grid; grid-template-columns:0.55fr 2.6fr 1.1fr 1fr 0.9fr 0.4fr; gap:var(--gutter); padding:14px 0; }
@media(max-width:900px){
  .idx-row,.idx-head{ grid-template-columns:0.5fr 2.4fr 1.2fr; }
  .idx-row .i-cell.hide-m,.idx-head .i-cell.hide-m{ display:none; }
  .idx-row .i-prev{ display:none; }
}

/* ---------- RASTER (scatter) view ---------- */
.scatter{ position:relative; width:100%; margin-top:36px; }
.scard{ position:absolute; cursor:pointer; }
.scard .ph{ width:100%; aspect-ratio:var(--ar,4/3); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.scard .ph img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.94); transition:filter .4s, transform .6s cubic-bezier(.2,.7,.2,1); }
.scard:hover .ph{ transform:translateY(-6px); }
.scard:hover .ph img{ filter:saturate(1.05); transform:scale(1.03); }
.scard__cap{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; gap:10px; }
.scard__no{ font-family:var(--mono); font-size:11px; color:var(--accent-deep); }
.scard__ttl{ font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.scard__yr{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.scatter__dim{ position:absolute; pointer-events:none; }

/* ---------- GRAPH view ---------- */
.graph{ position:relative; width:100%; height:680px; margin-top:24px; border:1px solid var(--line); background:
   radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/26px 26px, var(--card); overflow:hidden; }
.graph__svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.gnode{ position:absolute; transform:translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.gnode__dot{ width:14px; height:14px; border-radius:50%; background:var(--ink); transition:transform .25s, background .25s, box-shadow .25s; }
.gnode__lbl{ font-family:var(--mono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--grey); white-space:nowrap; text-align:center; transition:color .25s; }
.gnode__lbl b{ display:block; font-family:var(--grotesk); font-size:13px; letter-spacing:-0.01em; text-transform:none; color:var(--ink); font-weight:600; }
.gnode:hover .gnode__dot,.gnode.is-hot .gnode__dot{ background:var(--accent); transform:scale(1.5); box-shadow:0 0 0 6px var(--accent-soft); }
.gnode:hover .gnode__lbl,.gnode.is-hot .gnode__lbl{ color:var(--ink); }
.graph.is-dim .gnode:not(.is-hot){ opacity:0.32; }
.graph__legend{ position:absolute; left:16px; bottom:14px; z-index:3; display:flex; gap:14px; flex-wrap:wrap; max-width:70%; }
.graph__legend span{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); display:flex; align-items:center; gap:6px; cursor:pointer; transition:color .2s; }
.graph__legend span:hover{ color:var(--accent-deep); }
.graph__legend i{ width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--accent); }
.graph__legend em{ font-style:normal; color:var(--grey-2); }
@media(max-width:760px){ .graph{ height:520px; } .gnode__lbl b{ font-size:11px; } }

/* ---------- TIMELINE view (parallax axis) ---------- */
.tl{ position:relative; margin-top:34px; }
.tl__axis{ position:absolute; top:0; bottom:0; width:1px; background:var(--ink); left:50%; transform:translateX(-0.5px); }
.tl__wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; pointer-events:none; }
.tl__year{ position:absolute; transform:translate(-50%,-50%); background:var(--paper); padding:4px 11px; font-family:var(--mono); font-size:13px; letter-spacing:0.08em; color:var(--accent-deep); z-index:4; }
.tl__dot{ position:absolute; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--ink); z-index:3; transition:background .25s, transform .25s, box-shadow .25s; }
.tl__dot.is-now{ background:var(--accent); transform:translate(-50%,-50%) scale(1.55); box-shadow:0 0 0 6px var(--accent-soft); }
.tlcard{ position:absolute; width:min(40%,330px); z-index:2; will-change:transform; }
.tlcard .ph{ width:100%; aspect-ratio:4/3; overflow:hidden; }
.tlcard .ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.tlcard:hover .ph img{ transform:scale(1.04); }
.tlcard__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:9px; gap:10px; }
.tlcard__no{ font-family:var(--mono); font-size:11px; color:var(--accent-deep); }
.tlcard__yr{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.tlcard__ttl{ display:block; font-size:17px; font-weight:600; letter-spacing:-0.01em; margin-top:2px; transition:color .25s; }
.tlcard__sub{ display:block; font-family:var(--mono); font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:0.04em; margin-top:3px; }
.tlcard.side-l{ text-align:right; }
.tlcard.side-l .tlcard__meta{ flex-direction:row-reverse; }
.tlcard.is-now .tlcard__ttl{ color:var(--accent-deep); }
.tlcard.is-now .ph{ outline:1px solid var(--accent); outline-offset:-1px; }
@media(max-width:680px){
  .tl__axis{ left:28px; }
  .tlcard{ text-align:left !important; }
  .tlcard.side-l{ text-align:left; }
  .tlcard.side-l .tlcard__meta{ flex-direction:row; }
}