/* Ausgewählte Arbeiten – Proof-Schicht für /studio-v2/ (Phase 4.7: Poster + Projektroute, kein Browser im Browser).
   Alle Regeln auf .studio-proof / .lsp begrenzt, berühren den Hero nicht. Tokens aus /assets/css/styles.css. */

.studio-proof { padding-block: clamp(88px, 12vh, 160px); }
.studio-proof .section-sub { color: var(--tl-mut); }

.lsp { position: relative; }
.lsp-skeleton { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.lsp-skeleton span { display: block; border-radius: 14px; background: var(--paper-2); }
.lsp-skeleton span:first-child { height: 280px; }
.lsp-skeleton span:nth-child(2) { aspect-ratio: 1000 / 612; }
.lsp-skeleton span:nth-child(3) { display: none; }
.lsp-noscript { color: var(--tl-mut); }
.lsp-noscript a, .lsp-more a { color: var(--tl); border-bottom: 1px solid var(--tl-line); }
.lsp-more { margin-top: clamp(36px, 6vh, 64px); color: var(--tl-mut); font-size: var(--fs--1); }
.lsp-more a:hover, .lsp-noscript a:hover { border-color: var(--gold-ink); }

.lsp-grid { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

/* ---------- Auswahl ---------- */
.lsp-list { display: grid; gap: 4px; position: sticky; top: 96px; }
.lsp-group { margin: 18px 0 6px; font: var(--w-med) .68rem/1.2 "Outfit", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--tl-mut); }
.lsp-group:first-child { margin-top: 0; }
.lsp-case {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 10px; width: 100%; padding: 16px 0;
  border: 0; border-top: 1px solid var(--tl-line); background: none; color: var(--tl-mut);
  text-align: left; font: inherit; cursor: pointer; transition: color .25s var(--ease);
}
.lsp-case__nr { font: var(--w-semi) .78rem/1.6 "Outfit", sans-serif; letter-spacing: var(--ls-caps); color: var(--tl-mut); }
.lsp-case__copy { display: grid; gap: 2px; }
.lsp-case strong { font: var(--w-bold) clamp(1.3rem, 1rem + 1vw, 1.7rem)/1.1 "Outfit", sans-serif; letter-spacing: -.01em; color: inherit; }
.lsp-case small { font: var(--w-semi) .72rem/1.5 "Outfit", sans-serif; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold-ink); }
.lsp-case:hover, .lsp-case[aria-pressed="true"] { color: var(--tl); }
.lsp-case[aria-pressed="true"] .lsp-case__nr { color: var(--gold-ink); }
.lsp-case--eigen small { display: none; } /* Gruppenüberschrift nennt es bereits (Desktop) */

/* ---------- Poster: Desktop-Ausschnitt + Handy im echten Größenverhältnis (390 : 1440) ---------- */
.lsp-main { min-width: 0; }
.lsp-stage { display: block; position: relative; aspect-ratio: 1000 / 612; color: inherit; }
.lsp-device {
  position: absolute; left: 0; top: 0; width: 80%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px;
  background: var(--paper-2); box-shadow: 0 0 0 1px var(--tl-line), 0 34px 80px -44px rgba(23, 22, 26, .55);
}
.lsp-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .35s var(--ease); }
.lsp-phone {
  position: absolute; right: 0; bottom: 0; width: 23%; aspect-ratio: 390 / 844; padding: clamp(5px, .5vw, 8px);
  border-radius: clamp(22px, 2.4vw, 34px); background: #17161a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 60px -26px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .35s var(--ease);
}
.lsp-phone__screen { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: clamp(17px, 1.9vw, 27px); background: #fff; }
.lsp-phone__shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lsp[data-state="ready"] .lsp-shot, .lsp[data-state="ready"] .lsp-phone { opacity: 1; }
.lsp-stage[href]:hover .lsp-device { box-shadow: 0 0 0 1px var(--tl), 0 34px 80px -44px rgba(23, 22, 26, .55); }

/* ---------- Detail + Aktion ---------- */
.lsp-detail { margin-top: clamp(22px, 3.4vh, 34px); }
.lsp-name { margin-top: 8px; font: var(--w-bold) clamp(1.9rem, 1.4rem + 2vw, 3rem)/1.04 "Outfit", sans-serif; letter-spacing: -.01em; }
.lsp-proof { margin-top: 10px; max-width: 52ch; font-size: var(--fs-1); line-height: 1.5; color: var(--tl-mut); }
.lsp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 20px; }
.lsp-explore[hidden], .lsp-link[hidden] { display: none; }
.lsp-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--tl); border-bottom: 1px solid var(--tl-line); font-weight: var(--w-semi); }
.lsp-link:hover { border-color: var(--gold-ink); }
.lsp-hint { margin-top: 12px; font-size: var(--fs--1); color: var(--tl-mut); }

/* ---------- Mobil (< 768 px): horizontaler Showcase ---------- */
@media (max-width: 767px) {
  .studio-proof { padding-block: 44px 44px; }
  .studio-proof .section-head { margin-bottom: 18px; }
  .studio-proof .section-head h2 { font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1; }
  .studio-proof .section-sub { margin-top: 10px; font-size: .92rem; line-height: 1.45; }
  .lsp-skeleton, .lsp-grid { grid-template-columns: 1fr; }
  .lsp-skeleton span:first-child { height: 0; }
  .lsp-skeleton span:nth-child(2) { aspect-ratio: 4 / 5; }
  .lsp-more { margin-top: 12px; font-size: .84rem; }

  .lsp--mobil { display: block; }
  .lsp-railhead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
  .lsp-count { margin: 0; display: flex; align-items: baseline; gap: 1px; font: var(--w-semi) .8rem/1 "Outfit", sans-serif; letter-spacing: var(--ls-caps); color: var(--tl-mut); font-variant-numeric: tabular-nums; }
  .lsp-count__nr { color: var(--tl); font-size: 1.05rem; }
  .lsp-dots { display: flex; gap: 2px; }
  .lsp-dot { position: relative; width: 28px; height: 44px; margin: -14px 0; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .lsp-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--tl-line); transition: transform .2s var(--ease), background .2s var(--ease); }
  .lsp-dot[aria-current="true"]::after { background: var(--gold-ink); transform: scale(1.35); }

  /* Rail: nur horizontal snappen, die Seite scrollt normal weiter */
  .lsp-rail {
    display: flex; gap: 10px; margin-inline: calc(-1 * clamp(20px, 5vw, 56px)); padding-inline: 7vw;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 7vw; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -2px;
  }
  .lsp-rail::-webkit-scrollbar { display: none; }
  .lsp-slide { flex: 0 0 86vw; max-width: 420px; scroll-snap-align: center; scroll-snap-stop: always; display: grid; gap: 14px; align-content: start; opacity: .5; transform: scale(.965); transform-origin: 50% 0; transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .lsp-slide.is-aktiv { opacity: 1; transform: none; }
  /* Dual-Device: Desktop als Hauptfläche, Handy rechts unten leicht darüber – beide immer sichtbar, kein Overflow */
  .lsp-slide__stage.lsp-stage { display: block; position: relative; aspect-ratio: 1 / .86; padding: 0; background: none; border-radius: 0; }
  .lsp-slide .lsp-device { width: 80%; border-radius: 9px; }
  .lsp-slide .lsp-phone { width: 33%; padding: 5px; border-radius: 20px; }
  .lsp-slide .lsp-phone__screen { border-radius: 15px; background: #fff; }
  .lsp-slide .lsp-phone__shot { position: absolute; inset: 0; }
  .lsp-slide__copy { display: grid; gap: 4px; padding-inline: 2px; }
  .lsp-slide .lsp-name { margin-top: 0; font-size: 1.7rem; }
  .lsp-slide .lsp-proof { margin-top: 2px; font-size: .95rem; }
  .lsp-slide .lsp-actions { flex-wrap: nowrap; margin-top: 8px; gap: 14px; }
  .lsp-slide .lsp-actions .lsp-explore { flex: 1 1 auto; justify-content: center; }
  .lsp-slide .lsp-link { flex: none; min-height: 40px; font-size: .86rem; white-space: nowrap; }
  .lsp-hint--rail { margin-top: 8px; font-size: .74rem; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) { .lsp-shot, .lsp-phone, .lsp-slide, .lsp-teaser { transition: none; } .lsp-teaser { display: none; } }

/* ===================== Teaser-Trailer (Phase 5.x) + Signature Reveal ===================== */
.lsp-phone__screen { position: relative; }   /* .lsp-device ist bereits absolut positioniert */

/* Echte Trailer (Original-Releases): liegen über dem Poster, blenden nach dem Ende ruhig aus/ein (kein Rückwärtslauf) */
.lsp-teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .45s ease; background: #000; pointer-events: none; }
.is-video > .lsp-teaser { opacity: 1; }

/* Reveal: Schleier (nur.studio tritt zurück) + Fläche wächst auf Vollbild + ein feiner Goldstreif */
.lsp-schleier { position: fixed; inset: 0; z-index: 9998; background: var(--paper, #f3f1ec); opacity: 0; pointer-events: none; }
.lsp-reveal { position: fixed; z-index: 9999; overflow: hidden; background: #fff; pointer-events: none; box-shadow: 0 30px 80px -30px rgba(23, 22, 26, .45); }
.lsp-reveal__flaeche { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: hidden; }
.lsp-reveal__flaeche .lsp-shot, .lsp-reveal__flaeche .lsp-phone__shot { opacity: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lsp-sweep {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; opacity: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(90deg, transparent, rgba(232, 190, 104, .0) 20%, rgba(244, 206, 128, .85) 50%, rgba(232, 190, 104, .0) 80%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .lsp-schleier, .lsp-reveal { display: none; }
}