/* ───────────────────────────────────────────
   Portfolio: Case-Viewer – baut auf site.css auf
   Pro Case: Monitor (16:9) + Smartphone (9:16/4:5), Liefer-Liste, ganze Videos.
   ─────────────────────────────────────────── */

.cases{ padding:0 0 var(--sp); }

/* Leiste: Case-Tabs links, Pfeile rechts */
.cases__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.cases__tabs{ display:flex; flex-wrap:wrap; gap:.5rem; }
/* Mobil: Tabs in einer Zeile seitlich wischen statt drei Zeilen umbrechen */
@media (max-width:699px){
  .cases__tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:calc(100% + var(--gutter) * 2); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); }
  .cases__tabs::-webkit-scrollbar{ display:none; }
  .cases__tabs button{ flex:none; white-space:nowrap; }
}
.cases__tabs button{
  padding:.75rem 1.25rem; border-radius:var(--sh-sm); border:1px solid var(--line);
  color:var(--fg-2); font-weight:700; font-size:.95rem; transition:color .25s, border-color .25s, background .25s;
}
.cases__tabs button:hover{ color:var(--fg); border-color:var(--fg-3); }
.cases__tabs button[aria-selected="true"]{ background:var(--c-accent); color:var(--c-on-accent); border-color:transparent; }
.cases__nav{ display:flex; align-items:center; gap:.8rem; }
.cases__arrow{
  display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%;
  border:1px solid var(--line); font-size:1.1rem; transition:background .25s, color .25s, border-color .25s;
}
.cases__arrow:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.cases__count{ font-size:.9rem; font-weight:700; letter-spacing:.06em; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.cases__count b{ color:var(--fg); }
.no-js .cases__nav{ display:none; }

/* Ein Case */
.js .case:not(.is-active){ display:none; }
.no-js .case + .case{ margin-top:var(--sp); }
.case__grid{ display:grid; gap:clamp(2rem, 4vw, 4rem); align-items:center; }
@media (min-width:980px){ .case__grid{ grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); } }
.case__cat{
  display:inline-block; margin:0 0 1rem; padding:.35rem .7rem; border-radius:var(--sh-xs);
  background:var(--c-accent); color:var(--c-on-accent); font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.case__title{ font-size:clamp(2.2rem, 4.4vw, 3.8rem); font-weight:800; letter-spacing:-.035em; line-height:1; margin-bottom:.8rem; }
.case__sub{ font-family:var(--serif); font-size:1.08rem; margin-bottom:1.3rem; }
.case__txt{ color:var(--fg-2); font-size:1.02rem; max-width:48ch; margin-bottom:2rem; }
.case__h{ font-family:var(--body); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); margin-bottom:1rem; }
.deliv{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.deliv li{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-radius:var(--sh-sm);
  background:var(--panel); box-shadow:0 0 0 1px var(--line);
}
.deliv .r{ transform:scale(1.35); margin-inline:.2rem; }
.deliv b{ display:block; font-size:.98rem; }
.deliv span{ display:block; color:var(--fg-2); font-size:.9rem; }

/* Bühne: Bildschirm + Smartphone als Blender-Renderings (tools/blender) */
.case__stage{ position:relative; aspect-ratio:16 / 11.4; }
.cmon{ position:absolute; left:-2%; top:0; width:90%; }
.cphone{ position:absolute; right:-1%; bottom:-2%; width:30%; }
.cphone[data-mode="feed"] .dv__screen{ background:#FAFAF8; }

/* Wechsel-Animation (translate/rotate, damit die 3D-Neigung im transform bleibt) */
.case.is-active .case__info > *{ animation:caseIn .6s var(--ease-out) both; }
.case.is-active .case__info > :nth-child(2){ animation-delay:.05s; }
.case.is-active .case__info > :nth-child(3){ animation-delay:.1s; }
.case.is-active .case__info > :nth-child(n+4){ animation-delay:.15s; }
.case.is-active .cmon{ animation:caseIn .7s var(--ease-out) both; }
.case.is-active .cphone{ animation:phoneIn .9s .15s var(--ease-out) both; }
@keyframes caseIn{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }
@keyframes phoneIn{ from{ opacity:0; translate:0 18%; } to{ opacity:1; translate:0 0; } }

/* Ganze Videos */
.case__videos{ margin-top:clamp(2.5rem, 5vw, 4rem); padding-top:clamp(2rem, 4vw, 3rem); border-top:1px solid var(--line); }
.case__vids{ --vh:clamp(10rem, 15vw, 13.5rem); list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1rem 1.2rem; }
.case__vids li{ width:min-content; display:flex; flex-direction:column; gap:.6rem; }
.case__vids .vid{ height:var(--vh); width:auto; border-radius:var(--sh-sm); }
.case__vids p{ margin:0; font-size:.9rem; font-weight:600; color:var(--fg-2); }
@media (max-width:560px){
  .case__vids{ --vh:9.5rem; }
  .cases__tabs button{ padding:.6rem 1rem; font-size:.88rem; }
}

@media (prefers-reduced-motion: reduce){
  .case.is-active *{ animation:none !important; }
}

/* Kundenlogos im Case */
.case__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.6rem; margin:.2rem 0 1.3rem; }
.clogo{ display:block; width:min(12rem, calc(1.9rem * var(--ar))); height:auto; aspect-ratio:var(--ar); background:var(--fg);
  -webkit-mask:var(--src) left center / contain no-repeat; mask:var(--src) left center / contain no-repeat; }
.clogo--pic{ background:none; width:auto; max-width:12rem; height:clamp(1.5rem, calc(5.2rem / var(--ar, 2)), 2.6rem); aspect-ratio:auto; object-fit:contain; object-position:left center; }
.vid__logo{ display:flex; align-items:center; min-height:2.6rem; }
.vid__logo .clogo--pic{ height:min(3.6rem, calc(2.1rem * var(--s, 1))); }
.clogo-combo{ display:flex; align-items:center; gap:.5rem; }
.clogo-combo .clogo--pic{ height:2.6rem; }
.clogo-txt{ font-family:var(--display); font-weight:800; font-size:1.25rem; letter-spacing:-.02em; }
.clogo-txt--caps{ font-size:.85rem; letter-spacing:.3em; }
/* Ergebnis */
.case__result{ display:flex; align-items:baseline; gap:.8rem; margin:-.6rem 0 2rem; }
.case__result b{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem, 4vw, 3.4rem); letter-spacing:-.04em; line-height:1; color:var(--hi); }
.case__result span{ color:var(--fg); font-weight:600; max-width:22ch; }
/* Nur Bildschirm (kein Social-Clip) */
.case__stage--solo .cmon{ left:4%; width:92%; top:2%; }

/* Video-Overlay für «Ganze Videos ansehen» */
.has-vmodal, .has-vmodal body{ overflow:hidden; }
.vmodal{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(1rem, 4vw, 3rem);
  background:color-mix(in oklab, #000 82%, var(--c-dark)); animation:vmIn .3s var(--ease-out) both;
}
.vmodal__box{
  position:relative; aspect-ratio:var(--a);
  width:min(100%, 1280px, calc((100svh - 6rem) * var(--a)));
}
.vmodal__player, .vmodal__vid{ width:100%; height:100%; }
.vmodal__vid{ border-radius:var(--sh-sm); overflow:hidden; background:#000 center / cover no-repeat; }
.vmodal__close{
  position:absolute; z-index:3; right:.7rem; top:.7rem; width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.1rem; color:#fff; background:rgba(0,0,0,.55); transition:background .2s;
}
.vmodal__close:hover{ background:rgba(255,255,255,.24); }
.vmodal__close:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
@keyframes vmIn{ from{ opacity:0; } to{ opacity:1; } }

/* Ganze Videos: pro Video eine Gruppe, Versionen nebeneinander (gleiche Höhe zeigt die Formate) */
.vgroup + .vgroup{ margin-top:clamp(1.6rem, 3vw, 2.4rem); }
.vgroup__t{ margin:0 0 .8rem; font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.dv__screen > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Fotos: pro Serie eine Reihe, alle Bilder gleich hoch (Breite nach Seitenverhältnis). Mobil seitlich wischen. */
.photos{ padding:0 0 var(--sp); }
.pset + .pset{ margin-top:clamp(2.4rem, 5vw, 3.6rem); }
.pset__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; margin-bottom:1rem; }
.pset__t{ margin:0; font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.pset__d{ margin:0; color:var(--fg-2); font-size:.95rem; }
.pset__grid{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
.pset__grid li{ flex:var(--ar) 1 0; min-width:0; }
.pset__btn{ display:block; width:100%; aspect-ratio:var(--ar); padding:0; border:0; background:#000; border-radius:var(--sh-sm); overflow:hidden; cursor:zoom-in; }
.pset__btn img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
@media (hover:hover){ .pset__btn:hover img{ transform:scale(1.035); } }
.pset__btn:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
@media (max-width:699px){
  .pset__grid{ overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .pset__grid::-webkit-scrollbar{ display:none; }
  .pset__grid li{ flex:0 0 auto; height:clamp(13rem, 58vw, 17rem); aspect-ratio:var(--ar); max-width:80vw; scroll-snap-align:start; }
  .pset__btn{ height:100%; }
}

/* Foto-Cases: grosses Bild statt Geräte */
.case__stage--photo{ aspect-ratio:3 / 2; }
.case__stage--photo img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--sh); box-shadow:0 40px 70px -40px rgba(0,0,0,.7); }
.pset__head .vgroup__t{ margin:0; }

/* Längere Serien: Bildleiste zum Durchscrollen, Pfeile rechts im Kopf */
.pset__nav{ margin-left:auto; display:flex; gap:.5rem; align-self:center; }
.pset__arrow[disabled]{ opacity:.3; pointer-events:none; }
@media (min-width:700px){
  .pset--scroll .pset__grid{ overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain; }
  .pset--scroll .pset__grid::-webkit-scrollbar{ display:none; }
  .pset--scroll .pset__grid li{ flex:0 0 auto; height:clamp(15rem, 24vw, 22rem); aspect-ratio:var(--ar); scroll-snap-align:start; }
  .pset--scroll .pset__btn{ height:100%; }
}
@media (max-width:699px){ .pset__nav{ display:none; } }

/* Foto-Overlay (nutzt .vmodal) */
.vmodal--photo{ padding-inline:clamp(1rem, 6vw, 5.5rem); }
.vmodal--photo .vmodal__box{ width:min(100%, 1400px, calc((100svh - 6rem) * var(--a))); }
.vmodal__img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:var(--sh-sm); background:#000; }
.vmodal__nav{
  position:absolute; top:50%; translate:0 -50%; width:3rem; height:3rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.15rem; color:#fff; background:rgba(255,255,255,.1); transition:background .2s;
}
.vmodal__nav:hover{ background:rgba(255,255,255,.24); }
.vmodal__nav:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.vmodal__nav--prev{ left:clamp(.5rem, 1.6vw, 1.5rem); }
.vmodal__nav--next{ right:clamp(.5rem, 1.6vw, 1.5rem); }
@media (max-width:699px){ .vmodal__nav{ top:auto; bottom:1rem; translate:none; } .vmodal--photo{ padding-bottom:5rem; } }