/* ============================================================
   Startseite: Arbeiten als Scroll-Buehne
   Eine dunkle, feste Buehne, auf der die Live-Projekte beim Scrollen wechseln: links Name,
   Branche und ein Satz, rechts Desktop und Handy. Das Licht der Buehne
   nimmt die Farbe des aktiven Projekts an.
   Mobil und ohne JS: Projekte stehen untereinander, kein Sticky.
   ============================================================ */

@property --cases-glow { syntax:"<color>"; inherits:true; initial-value:#2368f5; }

.p-cases {
  --cases-glow:#2368f5;
  position:relative;
  background:var(--sys-ink,#0b0c10);
  color:#fff;
  transition:--cases-glow .9s ease;
}

/* ---------- Buehne ---------- */
.p-cases__track { position:relative; height:calc(var(--count) * 85vh + 15vh); }
.p-cases__sticky {
  position:sticky;
  top:0;
  height:100vh;
  min-height:620px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  padding:clamp(96px,11vh,120px) 0 clamp(28px,4vh,44px);
  overflow:hidden;
}
.p-cases__sticky::before {
  content:"";
  position:absolute;
  inset:-10% -10% 0 30%;
  background:radial-gradient(50% 55% at 62% 55%,color-mix(in srgb,var(--cases-glow) 55%,transparent),transparent 72%);
  opacity:.55;
  pointer-events:none;
}
.p-cases__stage { position:relative; display:grid; align-items:center; min-height:0; }
.p-cases__item {
  grid-area:1/1;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;
  gap:clamp(40px,5vw,80px);
  min-height:0;
}
.p-cases__text { position:relative; z-index:1; }
.p-cases__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 20px; color:rgba(255,255,255,.62); font-size:13px; font-weight:600; }
.p-cases__num { color:#7ea6ff; font-size:11px; font-weight:720; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.p-cases__badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:99px; color:#fff; background:rgba(35,104,245,.28); box-shadow:inset 0 0 0 1px rgba(126,166,255,.45); font-size:10px; font-weight:720; letter-spacing:.08em; text-transform:uppercase; }
.p-cases__badge::before { content:""; width:6px; height:6px; border-radius:50%; background:#7ea6ff; box-shadow:0 0 8px #7ea6ff; }
.p-cases__name { margin:0; font-size:clamp(40px,4.6vw,68px); font-weight:540; letter-spacing:-.06em; line-height:.98; }
.p-cases__lead { max-width:36ch; margin:22px 0 32px; color:rgba(255,255,255,.74); font-size:clamp(16px,1.25vw,19px); line-height:1.5; }
.p-cases__links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin:0; }
.p-cases__links .p-text-link { color:#fff; font-size:14px; font-weight:750; }
.p-cases__domain { color:rgba(255,255,255,.6); font-size:13px; font-weight:600; text-decoration:none; transition:color .3s ease; }
.p-cases__domain:hover,.p-cases__domain:focus-visible { color:#fff; }
.site-shell .p-cases__domain.has-link-hover { background-image:none!important; }

/* Desktop im Browserfenster, Handy davor */
.p-cases__media { position:relative; display:block; padding:0 7% 7% 0; color:inherit; }
.p-cases__browser {
  display:block;
  overflow:hidden;
  border-radius:var(--sys-r-md,12px);
  background:#14161b;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 100px -40px rgba(0,0,0,.8);
}
.p-cases__bar { position:relative; display:flex; align-items:center; gap:5px; height:28px; padding:0 12px; background:#16181d; border-bottom:1px solid rgba(255,255,255,.07); }
.p-cases__bar i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); }
.p-cases__bar span { position:absolute; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.55); font-size:10px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.p-cases__browser img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.p-cases__phone {
  position:absolute;
  right:0;
  bottom:0;
  width:24%;
  aspect-ratio:390/844;
  padding:4px;
  border-radius:26px;
  background:#0a0b0e;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 40px 70px -24px rgba(0,0,0,.85);
}
.p-cases__phone img { display:block; width:100%; height:100%; border-radius:22px; object-fit:cover; object-position:top center; }

/* Wechsel: nur das aktive Projekt ist sichtbar */
.p-cases--js .p-cases__item { visibility:hidden; pointer-events:none; }
.p-cases--js .p-cases__item.is-active { visibility:visible; pointer-events:auto; }
.p-cases--js .p-cases__text > * { opacity:0; transform:translateY(22px); filter:blur(6px); transition:opacity .45s ease,transform .6s var(--sys-ease,cubic-bezier(.22,.72,.19,1)),filter .45s ease; }
.p-cases--js .p-cases__browser { opacity:0; transform:translateY(40px) scale(.97); transition:opacity .5s ease,transform .8s var(--sys-ease,cubic-bezier(.22,.72,.19,1)); }
.p-cases--js .p-cases__phone { opacity:0; transform:translateY(70px); transition:opacity .5s ease,transform .9s var(--sys-ease,cubic-bezier(.22,.72,.19,1)); }
.p-cases--js .is-active .p-cases__text > *,
.p-cases--js .is-active .p-cases__browser,
.p-cases--js .is-active .p-cases__phone { opacity:1; transform:none; filter:none; }
.p-cases--js .is-active .p-cases__text > :nth-child(2) { transition-delay:60ms; }
.p-cases--js .is-active .p-cases__text > :nth-child(3) { transition-delay:120ms; }
.p-cases--js .is-active .p-cases__text > :nth-child(4) { transition-delay:180ms; }
.p-cases--js .is-active .p-cases__phone { transition-delay:120ms; }
/* Beim Verlassen schneller und ohne Verzoegerung */
.p-cases--js .p-cases__item:not(.is-active) * { transition-duration:.25s; transition-delay:0s; }
.p-cases--js .p-cases__item:not(.is-active) { transition:visibility 0s .25s; }

/* Fortschritt: vier Linien, die aktive ist blau und leuchtet */
.p-cases__nav { position:relative; display:flex; align-items:center; gap:6px; margin-top:clamp(20px,3vh,36px); }
.p-cases__nav button { display:grid; place-items:center; width:48px; height:32px; padding:0; border:0; background:none; cursor:pointer; }
.p-cases__nav i { display:block; width:100%; height:2px; border-radius:2px; background:rgba(255,255,255,.2); transition:background .4s ease,box-shadow .4s ease; }
.p-cases__nav button:hover i { background:rgba(255,255,255,.5); }
.p-cases__nav button[aria-current="true"] i { background:#2368f5; box-shadow:0 0 10px rgba(35,104,245,.8); }
.p-cases__nav button:focus-visible { outline:2px solid #7ea6ff; outline-offset:2px; border-radius:4px; }
.p-cases__count { margin-left:auto; color:rgba(255,255,255,.5); font-size:11px; font-weight:650; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.p-cases__count b { color:#fff; font-weight:720; }

.p-cases__foot { padding-top:clamp(32px,4vw,56px); padding-bottom:clamp(80px,8vw,120px); border-top:0; }
.p-cases__foot .p-text-link { color:#fff; font-size:14px; font-weight:750; }

/* Niedrige Fenster: Bild etwas kleiner, damit alles in einen Viewport passt */
@media (min-width:901px) and (max-height:780px) {
  .p-cases__item { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  .p-cases__lead { margin:16px 0 24px; }
}

/* ---------- Tablet und Mobil: Projekte untereinander ---------- */
@media (max-width:900px) {
  .p-cases__track { height:auto; }
  .p-cases__sticky { position:static; height:auto; min-height:0; display:block; padding:clamp(56px,15vw,88px) 0 0; overflow:visible; }
  .p-cases__sticky::before { display:none; }
  /* Wischreihe ueber die volle Breite, die naechste Karte schaut an. */
  .p-cases__stage {
    display:flex;
    align-items:stretch;
    gap:14px;
    width:100%;
    padding:0 var(--p-edge) 4px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--p-edge);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .p-cases__stage::-webkit-scrollbar { display:none; }
  .p-cases__item { flex:0 0 min(84vw,420px); scroll-snap-align:start; scroll-snap-stop:always; align-content:start; grid-area:auto; grid-template-columns:minmax(0,1fr); gap:24px; padding:18px 18px 24px; border-radius:20px; background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--glow) 60%,transparent),transparent 80%),rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
  .p-cases__media { order:-1; padding:0 9% 12% 0; }
  .p-cases__phone { width:30%; border-radius:20px; padding:3px; }
  .p-cases__phone img { border-radius:17px; }
  .p-cases__meta { margin-bottom:14px; }
  .p-cases__name { font-size:clamp(30px,8.5vw,40px); }
  .p-cases__lead { margin:12px 0 20px; font-size:15px; }
  .p-cases__nav { display:none; }
  .p-cases--js .p-cases__item { visibility:visible; pointer-events:auto; }
  .p-cases--js .p-cases__item * { opacity:1!important; transform:none!important; filter:none!important; }
  .p-cases__foot { padding-top:40px; }
}

@media (prefers-reduced-motion:reduce) {
  .p-cases,
  .p-cases--js .p-cases__item,
  .p-cases--js .p-cases__item * { transition:none!important; }
}