/* =========================================================
   MN MEDIA · STEP 48 · Selected Work
   ========================================================= */

.step48-projects{
  --s48-paper:#f1efe8;
  --s48-ink:#111311;
  --s48-lime:#d8f024;
  --s48-line:rgba(17,19,17,.16);
  background:var(--s48-paper);
  color:var(--s48-ink);
  padding:clamp(88px,10vw,150px) 0 clamp(88px,9vw,138px);
  overflow:hidden;
}

.step48-projects-shell{
  width:min(1580px,calc(100% - clamp(34px,5vw,84px)));
  margin:0 auto;
}

.step48-projects-head{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:clamp(40px,7vw,110px);
  align-items:end;
  margin-bottom:clamp(48px,6vw,84px);
}

.step48-projects-kicker{
  margin:0 0 18px;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.16em;
}

.step48-projects-head h2{
  margin:0;
  max-width:10.7ch;
  font-size:clamp(3.5rem,7.5vw,8.4rem);
  line-height:.84;
  letter-spacing:-.075em;
  font-weight:900;
}

.step48-projects-intro{
  margin:0 0 6px;
  max-width:46ch;
  font-size:clamp(1rem,1.2vw,1.22rem);
  line-height:1.55;
  color:rgba(17,19,17,.62);
}

.step48-projects-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(22px,2.6vw,38px);
}

.step48-project{
  display:grid;
  text-decoration:none;
  color:inherit;
  min-width:0;
  border-top:1px solid var(--s48-line);
}

.step48-project--hero{
  grid-row:span 2;
}

.step48-project-media{
  position:relative;
  min-height:330px;
  overflow:hidden;
  background:#151715;
}

.step48-project--hero .step48-project-media{
  min-height:clamp(670px,62vw,920px);
}

.step48-project-media>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}

.step48-project-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.42)),
    linear-gradient(90deg,rgba(0,0,0,.26),transparent 42%);
}

.step48-project-badge{
  position:absolute;
  top:20px;left:20px;
  padding:9px 12px;
  background:var(--s48-lime);
  color:#111;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.11em;
}

.step48-project-number{
  position:absolute;
  right:16px;
  bottom:6px;
  z-index:4;
  font-size:clamp(5.5rem,10vw,11rem);
  line-height:.8;
  font-weight:950;
  letter-spacing:-.09em;
  color:rgba(255,255,255,.92);
  mix-blend-mode:screen;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.step48-project-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 26px;
  gap:18px;
  align-items:end;
  padding:clamp(20px,2vw,30px) 0 clamp(28px,3vw,42px);
}

.step48-project-copy p{
  margin:0 0 9px;
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.13em;
  color:rgba(17,19,17,.58);
}

.step48-project-copy h3{
  margin:0;
  max-width:18ch;
  font-size:clamp(1.55rem,2.4vw,3rem);
  line-height:.96;
  letter-spacing:-.05em;
  font-weight:850;
}

.step48-project-copy>span{
  align-self:center;
  max-width:25ch;
  font-size:.7rem;
  line-height:1.35;
  text-align:right;
  color:rgba(17,19,17,.5);
}

.step48-project-copy>i{
  align-self:center;
  font-style:normal;
  font-size:1.25rem;
  transition:transform .3s ease;
}

.step48-project-art{
  display:grid;
  place-items:center;
}

/* STONE */
.step48-project-art--stone{
  background:#d7d3ca;
}
.step48-stone-word{
  position:relative;
  z-index:3;
  font-size:clamp(3.5rem,7vw,7rem);
  font-weight:950;
  letter-spacing:-.075em;
}
.step48-stone-word::after{
  content:"STEINE";
  display:block;
  text-align:right;
  font-size:.18em;
  letter-spacing:.34em;
  margin-top:8px;
}
.step48-stone-block{
  position:absolute;
  background:#111;
}
.step48-stone-block--a{
  width:38%;height:58%;
  left:6%;top:10%;
  transform:rotate(-5deg);
}
.step48-stone-block--b{
  width:29%;height:40%;
  right:8%;bottom:7%;
  background:var(--s48-lime);
  transform:rotate(7deg);
}

/* CLUB */
.step48-project-art--club{
  background:#111;
  color:#fff;
}
.step48-club-poster{
  width:68%;
  aspect-ratio:.74;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(22px,3vw,42px);
  border:1px solid rgba(255,255,255,.35);
  background:
    linear-gradient(145deg,transparent 0 54%,var(--s48-lime) 54% 67%,transparent 67%),
    #1c1f1c;
  transform:rotate(-4deg);
  box-shadow:16px 16px 0 rgba(255,255,255,.08);
}
.step48-club-poster small{
  margin-bottom:auto;
  font-size:.58rem;
  letter-spacing:.16em;
}
.step48-club-poster strong{
  font-size:clamp(2.2rem,4.8vw,5rem);
  line-height:.82;
  letter-spacing:-.07em;
}
.step48-club-poster span{
  margin-top:18px;
  font-size:.56rem;
  letter-spacing:.12em;
}
.step48-club-stripe{
  position:absolute;
  width:45%;
  height:12px;
  left:-6%;
  bottom:18%;
  background:var(--s48-lime);
  transform:rotate(12deg);
}

/* PRODUCT */
.step48-project-art--product{
  background:#d8f024;
}
.step48-app-shell{
  width:70%;
  min-height:70%;
  padding:24px;
  background:#0f1110;
  color:#fff;
  border-radius:26px;
  box-shadow:18px 18px 0 rgba(17,19,17,.15);
  transform:rotate(2.5deg);
}
.step48-app-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:14px;
}
.step48-app-top b{color:var(--s48-lime)}
.step48-app-top span{font-size:.55rem;letter-spacing:.14em}
.step48-app-stat{
  display:grid;
  margin-top:30px;
}
.step48-app-stat strong{
  font-size:clamp(4rem,8vw,8rem);
  line-height:.8;
  letter-spacing:-.08em;
}
.step48-app-stat small{
  margin-top:8px;
  font-size:.58rem;
  letter-spacing:.15em;
  color:rgba(255,255,255,.52);
}
.step48-app-bars{
  height:110px;
  display:flex;
  align-items:end;
  gap:8px;
  margin-top:26px;
}
.step48-app-bars i{
  flex:1;
  min-height:18%;
  background:#fff;
}
.step48-app-bars i:nth-child(2){height:44%}
.step48-app-bars i:nth-child(3){height:72%;background:var(--s48-lime)}
.step48-app-bars i:nth-child(4){height:56%}
.step48-app-bars i:nth-child(5){height:86%}
.step48-app-bars i:nth-child(6){height:64%}

/* Hover / reveal */
.step48-project{
  opacity:.48;
  transform:translateY(24px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1);
}
.step48-project.is-visible{
  opacity:1;
  transform:none;
}

@media (hover:hover){
  .step48-project:hover .step48-project-media>img{
    transform:scale(1.045);
    filter:saturate(1.05) contrast(1.02);
  }
  .step48-project:hover .step48-project-number{
    transform:translate(-8px,-8px);
  }
  .step48-project:hover .step48-project-copy>i{
    transform:translate(5px,-5px);
  }
}

.step48-projects-foot{
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:center;
  margin-top:clamp(36px,5vw,66px);
  padding-top:24px;
  border-top:1px solid var(--s48-line);
}
.step48-projects-foot p{
  margin:0;
  max-width:58ch;
  color:rgba(17,19,17,.56);
  font-size:.86rem;
  line-height:1.5;
}
.step48-projects-foot a{
  color:var(--s48-ink);
  text-decoration:none;
  font-weight:850;
  white-space:nowrap;
}
.step48-projects-foot a:hover,
.step48-projects-foot a:focus-visible{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}

@media (max-width:980px){
  .step48-projects-head{
    grid-template-columns:1fr;
    gap:26px;
  }
  .step48-projects-head h2{
    font-size:clamp(3.2rem,11vw,6.6rem);
  }
  .step48-projects-intro{
    max-width:60ch;
  }
  .step48-projects-grid{
    grid-template-columns:1fr 1fr;
  }
  .step48-project--hero{
    grid-column:1 / -1;
    grid-row:auto;
  }
  .step48-project--hero .step48-project-media{
    min-height:62vw;
  }
  .step48-project-copy{
    grid-template-columns:1fr 24px;
  }
  .step48-project-copy>span{
    display:none;
  }
}

@media (max-width:640px){
  .step48-projects{
    padding:76px 0 84px;
  }
  .step48-projects-shell{
    width:calc(100% - 24px);
  }
  .step48-projects-head h2{
    font-size:clamp(2.9rem,14.5vw,4.8rem);
  }
  .step48-projects-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .step48-project--hero{
    grid-column:auto;
  }
  .step48-project--hero .step48-project-media,
  .step48-project-media{
    min-height:74vw;
  }
  .step48-project-copy h3{
    font-size:1.65rem;
  }
  .step48-project-number{
    font-size:6.4rem;
  }
  .step48-projects-foot{
    display:grid;
    gap:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .step48-project,
  .step48-project-media>img,
  .step48-project-number,
  .step48-project-copy>i{
    transition:none!important;
  }
  .step48-project{
    opacity:1;
    transform:none;
  }
}


/* STEP48 HOTFIX 49 · aktuelle Referenzen */
.step48-project-live{
  position:absolute;
  left:16px;
  top:16px;
  z-index:5;
  padding:8px 10px;
  background:#111311;
  color:#fff;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.12em;
}

/* Praxis Mayr */
.step48-project-art--praxis{
  background:#e8e2d8;
}
.step48-praxis-window{
  position:relative;
  width:82%;
  min-height:72%;
  padding:clamp(22px,3vw,38px);
  background:#f7f3ec;
  border:1px solid rgba(17,19,17,.18);
  overflow:hidden;
  box-shadow:14px 14px 0 rgba(17,19,17,.08);
}
.step48-praxis-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid rgba(17,19,17,.15);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.12em;
}
.step48-praxis-top i{
  width:8px;height:8px;border-radius:50%;
  background:#708373;
}
.step48-praxis-copy{
  position:relative;
  z-index:2;
  display:grid;
  gap:14px;
  max-width:76%;
  padding-top:clamp(34px,5vw,68px);
}
.step48-praxis-copy small{
  font-size:.54rem;
  letter-spacing:.15em;
  color:#69756c;
}
.step48-praxis-copy strong{
  max-width:12ch;
  font-family:Georgia,serif;
  font-size:clamp(2rem,4.2vw,4.5rem);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.045em;
}
.step48-praxis-copy span{
  height:5px;
  width:82%;
  background:#111311;
  opacity:.12;
}
.step48-praxis-copy span:last-child{width:58%}
.step48-praxis-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(83,108,91,.28);
}
.step48-praxis-orbit--a{
  width:210px;height:210px;right:-56px;top:58px;
}
.step48-praxis-orbit--b{
  width:130px;height:130px;right:46px;bottom:-48px;
  background:rgba(125,149,132,.12);
}

/* vinzenznieberle.com */
.step48-project-art--vinzenz{
  background:#0d0f0e;
}
.step48-vinzenz-board{
  width:84%;
  min-height:74%;
  padding:clamp(22px,3vw,38px);
  background:
    linear-gradient(145deg,transparent 0 64%,#d8f024 64% 77%,transparent 77%),
    #151815;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:16px 16px 0 #d8f024;
}
.step48-vinzenz-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.step48-vinzenz-top b{
  color:#d8f024;
  font-size:1rem;
}
.step48-vinzenz-top span{
  font-size:.54rem;
  letter-spacing:.13em;
  opacity:.58;
}
.step48-vinzenz-main{
  padding:clamp(28px,4vw,54px) 0;
}
.step48-vinzenz-main small{
  display:block;
  margin-bottom:12px;
  font-size:.58rem;
  letter-spacing:.15em;
  color:#d8f024;
}
.step48-vinzenz-main strong{
  display:block;
  max-width:9ch;
  font-size:clamp(2.5rem,5.2vw,5.5rem);
  line-height:.82;
  letter-spacing:-.075em;
}
.step48-vinzenz-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.16);
}
.step48-vinzenz-metrics span{
  display:grid;
  gap:4px;
  padding:14px 10px;
  border-right:1px solid rgba(255,255,255,.16);
}
.step48-vinzenz-metrics span:last-child{border-right:0}
.step48-vinzenz-metrics b{font-size:1rem}
.step48-vinzenz-metrics small{
  font-size:.48rem;
  letter-spacing:.10em;
  opacity:.5;
}

@media (max-width:640px){
  .step48-praxis-window,
  .step48-vinzenz-board{
    width:86%;
  }
  .step48-praxis-copy{
    max-width:84%;
    padding-top:32px;
  }
  .step48-vinzenz-main{
    padding:28px 0;
  }
  .step48-project-live{
    top:12px;
    left:12px;
    padding:7px 9px;
  }
}


/* =========================================================
   STEP48 HOTFIX 50 · "Arbeiten"-Look
   Bild-/Visual-getrieben, bewusst unregelmäßig und editorial.
   ========================================================= */

.step48-projects-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  column-gap:clamp(22px,3.2vw,52px)!important;
  row-gap:clamp(82px,10vw,154px)!important;
  align-items:start!important;
}

/* bewusst versetzte Größen statt klassischer Kartenmatrix */
.step48-project:nth-child(1){
  grid-column:1 / span 7!important;
  grid-row:1!important;
}
.step48-project:nth-child(2){
  grid-column:9 / span 4!important;
  grid-row:1!important;
  margin-top:clamp(110px,15vw,230px)!important;
}
.step48-project:nth-child(3){
  grid-column:2 / span 4!important;
  grid-row:2!important;
}
.step48-project:nth-child(4){
  grid-column:7 / span 6!important;
  grid-row:2!important;
  margin-top:clamp(-58px,-4vw,-24px)!important;
}

.step48-project{
  display:block!important;
  border-top:0!important;
  opacity:.36;
  transform:translateY(30px);
  cursor:none!important;
}

.step48-project.is-visible{
  opacity:1;
  transform:none;
}

/* Projektbild/Visual ist der Star */
.step48-project-media,
.step48-project--hero .step48-project-media{
  min-height:0!important;
  aspect-ratio:1.22 / 1;
}

.step48-project:nth-child(2) .step48-project-media{
  aspect-ratio:.84 / 1;
}

.step48-project:nth-child(3) .step48-project-media{
  aspect-ratio:.88 / 1;
}

.step48-project:nth-child(4) .step48-project-media{
  aspect-ratio:1.28 / 1;
}

/* Zwetschke-artig reduziert: keine großen Nummern/Pills, nur Visual + Kunde + Aussage */
.step48-project-number,
.step48-project-live,
.step48-project-badge{
  display:none!important;
}

.step48-project-copy{
  display:block!important;
  padding:clamp(18px,1.7vw,26px) 0 0!important;
}

.step48-project-copy p{
  margin:0 0 8px!important;
  font-size:clamp(.72rem,.72vw,.82rem)!important;
  line-height:1.1!important;
  letter-spacing:.08em!important;
  color:var(--s48-ink)!important;
}

.step48-project-copy h3{
  max-width:15ch!important;
  margin:0!important;
  font-size:clamp(1.7rem,2.55vw,3.35rem)!important;
  line-height:.94!important;
  letter-spacing:-.052em!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.step48-project-copy>span,
.step48-project-copy>i{
  display:none!important;
}

@media (hover:hover) and (pointer:fine){
  .step48-project:hover .step48-project-copy h3{
    transform:translateX(8px);
  }

  .step48-project:hover .step48-project-media>img{
    transform:scale(1.055)!important;
  }

  .step48-projects[data-step48-cursor-live="true"]{
    cursor:none!important;
  }
}

/* Sonnenbrillen-Cursor */
.step48-emoji-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:9999;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%) scale(.55) rotate(-8deg);
  transform-origin:center;
  font-size:34px;
  line-height:1;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.18));
  transition:opacity .16s ease,scale .16s ease;
  will-change:transform;
}

.step48-emoji-cursor.is-visible{
  opacity:1;
}

.step48-emoji-cursor.is-down{
  font-size:29px;
}

/* Mehr Weißraum wie bei einer Work-Galerie */
.step48-projects-head{
  margin-bottom:clamp(72px,8vw,126px)!important;
}

.step48-projects-foot{
  margin-top:clamp(86px,11vw,170px)!important;
}

/* Tablet: weiterhin editorial versetzt, aber stabiler */
@media (max-width:980px){
  .step48-projects-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;
    row-gap:76px!important;
  }

  .step48-project:nth-child(1),
  .step48-project:nth-child(2),
  .step48-project:nth-child(3),
  .step48-project:nth-child(4){
    grid-row:auto!important;
    margin-top:0!important;
  }

  .step48-project:nth-child(1){grid-column:1 / -1!important}
  .step48-project:nth-child(2){grid-column:1!important}
  .step48-project:nth-child(3){grid-column:2!important;margin-top:74px!important}
  .step48-project:nth-child(4){grid-column:1 / -1!important;width:78%;justify-self:end!important}

  .step48-project--hero .step48-project-media{
    min-height:0!important;
    aspect-ratio:1.42 / 1!important;
  }

  .step48-project-copy h3{
    font-size:clamp(1.65rem,4vw,2.55rem)!important;
  }
}

/* Mobil: kein Custom Cursor, einspaltig und große Work-Visuals */
@media (max-width:640px){
  .step48-projects-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    row-gap:56px!important;
  }

  .step48-project:nth-child(1),
  .step48-project:nth-child(2),
  .step48-project:nth-child(3),
  .step48-project:nth-child(4){
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    margin-top:0!important;
    justify-self:stretch!important;
    cursor:pointer!important;
  }

  .step48-project-media,
  .step48-project--hero .step48-project-media,
  .step48-project:nth-child(2) .step48-project-media,
  .step48-project:nth-child(3) .step48-project-media,
  .step48-project:nth-child(4) .step48-project-media{
    aspect-ratio:1.04 / 1!important;
    min-height:0!important;
  }

  .step48-project-copy{
    padding-top:16px!important;
  }

  .step48-project-copy h3{
    max-width:17ch!important;
    font-size:1.75rem!important;
  }

  .step48-emoji-cursor{
    display:none!important;
  }

  .step48-projects-head{
    margin-bottom:58px!important;
  }

  .step48-projects-foot{
    margin-top:70px!important;
  }
}


/* =========================================================
   HOTFIX 51 · echte Website-Ausschnitte + Moustache Cursor
   ========================================================= */

.step48-project-media--site{
  background:transparent!important;
  overflow:visible!important;
}
.step48-site-card{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:26px;
  background:#f5f4ef;
  border:1px solid rgba(17,19,17,.12);
  box-shadow:0 32px 64px rgba(17,19,17,.10);
}
.step48-site-bar{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:0 16px;
  background:#111311;
  color:#fff;
  font-size:.72rem;
  letter-spacing:.05em;
}
.step48-site-bar span{
  width:10px;height:10px;border-radius:50%;
  background:#d8f024;
  flex:0 0 auto;
}
.step48-site-bar strong{
  font-size:.68rem;
  font-weight:900;
}
.step48-site-bar em{
  margin-left:auto;
  font-style:normal;
  opacity:.68;
  font-size:.6rem;
  letter-spacing:.08em;
}

.step48-site-frame{
  position:relative;
  height:calc(100% - 54px);
  overflow:hidden;
  background:#ece9df;
}
.step48-site-frame::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:24%;
  background:linear-gradient(180deg, rgba(245,244,239,0) 0%, rgba(245,244,239,.07) 18%, rgba(245,244,239,.82) 100%);
  pointer-events:none;
}
.step48-site-frame iframe{
  width:1440px;
  height:1400px;
  border:0;
  background:#fff;
  transform-origin:0 0;
  pointer-events:none;
  display:block;
  filter:saturate(.96) contrast(1.01);
}

.step48-site-card--bergsport .step48-site-frame iframe{transform:scale(.57) translateY(-10px)}
.step48-site-card--stone .step48-site-frame iframe{transform:scale(.62) translateY(-28px)}
.step48-site-card--praxis .step48-site-frame iframe{transform:scale(.64) translateY(-16px)}
.step48-site-card--vinzenz .step48-site-frame iframe{transform:scale(.60) translateY(-6px)}

.step48-project:nth-child(2) .step48-site-card,
.step48-project:nth-child(3) .step48-site-card{
  border-radius:22px;
}

/* image zoom hover becomes site-pan feeling */
@media (hover:hover) and (pointer:fine){
  .step48-project:hover .step48-site-card{
    box-shadow:0 42px 88px rgba(17,19,17,.16);
  }
  .step48-project:hover .step48-site-frame iframe{
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .step48-project:nth-child(1):hover .step48-site-frame iframe{transform:scale(.585) translateY(-14px)}
  .step48-project:nth-child(2):hover .step48-site-frame iframe{transform:scale(.635) translateY(-34px)}
  .step48-project:nth-child(3):hover .step48-site-frame iframe{transform:scale(.655) translateY(-20px)}
  .step48-project:nth-child(4):hover .step48-site-frame iframe{transform:scale(.615) translateY(-12px)}
}

/* Replace emoji cursor with uploaded moustache-glasses asset */
.step48-emoji-cursor{
  width:78px!important;
  height:78px!important;
  background:url("assets/cursors/mustache-glasses-transparent.png") center/contain no-repeat;
  font-size:0!important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%) scale(.68) rotate(-5deg);
}
.step48-emoji-cursor.is-down{
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.16));
}
.step48-emoji-cursor.is-visible{
  opacity:1;
}
.step48-emoji-cursor::before{
  content:"";
  display:none;
}

/* Responsive tweaks */
@media (max-width:980px){
  .step48-site-bar{
    min-height:50px;
    padding:0 14px;
  }
  .step48-site-frame{
    height:calc(100% - 50px);
  }
  .step48-site-card--bergsport .step48-site-frame iframe{transform:scale(.58) translateY(-4px)}
  .step48-site-card--stone .step48-site-frame iframe{transform:scale(.60) translateY(-22px)}
  .step48-site-card--praxis .step48-site-frame iframe{transform:scale(.60) translateY(-12px)}
  .step48-site-card--vinzenz .step48-site-frame iframe{transform:scale(.58) translateY(0)}
}

@media (max-width:640px){
  .step48-site-card{
    border-radius:20px;
  }
  .step48-site-bar{
    min-height:46px;
    gap:10px;
    padding:0 12px;
    font-size:.62rem;
  }
  .step48-site-bar strong{font-size:.62rem}
  .step48-site-bar em{
    max-width:46%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .step48-site-frame{
    height:calc(100% - 46px);
  }
  .step48-site-frame iframe{
    width:1280px;
    height:1260px;
  }
  .step48-site-card--bergsport .step48-site-frame iframe{transform:scale(.41) translateY(-2px)}
  .step48-site-card--stone .step48-site-frame iframe{transform:scale(.44) translateY(-10px)}
  .step48-site-card--praxis .step48-site-frame iframe{transform:scale(.43) translateY(-8px)}
  .step48-site-card--vinzenz .step48-site-frame iframe{transform:scale(.42) translateY(0)}
}


/* =========================================================
   HOTFIX 52 · Referenzen wie große Work-Cards
   Wenige Projekte -> größer, versetzt, bildgetrieben.
   ========================================================= */

.step48-projects-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:clamp(34px,4.6vw,72px)!important;
  align-items:start!important;
}

/* Vier große Karten, bewusst ungleich / versetzt */
.step48-project:nth-child(1){
  grid-column:1 / span 7!important;
  grid-row:1!important;
  margin-top:0!important;
}
.step48-project:nth-child(2){
  grid-column:8 / span 5!important;
  grid-row:1!important;
  margin-top:clamp(130px,13vw,220px)!important;
}
.step48-project:nth-child(3){
  grid-column:1 / span 5!important;
  grid-row:2!important;
  margin-top:clamp(24px,3vw,54px)!important;
}
.step48-project:nth-child(4){
  grid-column:6 / span 7!important;
  grid-row:2!important;
  margin-top:clamp(-36px,-2.5vw,-18px)!important;
}

/* Karte selbst */
.step48-project{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:clamp(22px,2.1vw,34px)!important;
  border:0!important;
  background:#111311!important;
  box-shadow:0 22px 58px rgba(17,19,17,.10)!important;
  cursor:none!important;
}

/* Media füllt gesamte Karte */
.step48-project-media,
.step48-project--hero .step48-project-media,
.step48-project:nth-child(2) .step48-project-media,
.step48-project:nth-child(3) .step48-project-media,
.step48-project:nth-child(4) .step48-project-media{
  width:100%!important;
  min-height:0!important;
  aspect-ratio:1.04 / 1!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}

/* etwas unterschiedliche Proportionen */
.step48-project:nth-child(1) .step48-project-media{
  aspect-ratio:1.12 / 1!important;
}
.step48-project:nth-child(2) .step48-project-media{
  aspect-ratio:.96 / 1!important;
}
.step48-project:nth-child(3) .step48-project-media{
  aspect-ratio:.94 / 1!important;
}
.step48-project:nth-child(4) .step48-project-media{
  aspect-ratio:1.12 / 1!important;
}

/* Browserrahmen entfernen – Website wird zur eigentlichen Bildfläche */
.step48-site-card{
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:inherit!important;
  box-shadow:none!important;
  background:#ece9df!important;
}
.step48-site-bar{
  display:none!important;
}
.step48-site-frame{
  height:100%!important;
  border-radius:inherit!important;
}
.step48-site-frame::after{
  height:58%!important;
  background:
    linear-gradient(180deg,
      rgba(10,12,11,0) 0%,
      rgba(10,12,11,.04) 22%,
      rgba(10,12,11,.58) 70%,
      rgba(10,12,11,.90) 100%)!important;
  z-index:3!important;
}

/* Ausschnitte größer / direkter */
.step48-site-frame iframe{
  width:1440px!important;
  height:1500px!important;
  transform-origin:0 0!important;
  filter:saturate(1.02) contrast(1.02)!important;
}

.step48-site-card--bergsport .step48-site-frame iframe{
  transform:scale(.63) translateY(-18px)!important;
}
.step48-site-card--stone .step48-site-frame iframe{
  transform:scale(.56) translateY(-16px)!important;
}
.step48-site-card--praxis .step48-site-frame iframe{
  transform:scale(.56) translateY(-10px)!important;
}
.step48-site-card--vinzenz .step48-site-frame iframe{
  transform:scale(.63) translateY(-8px)!important;
}

/* Text wie im Beispiel direkt IN die Karte */
.step48-project-copy{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:7!important;
  display:block!important;
  padding:clamp(24px,2.5vw,40px)!important;
  color:#fff!important;
  pointer-events:none!important;
}

.step48-project-copy p{
  margin:0 0 8px!important;
  color:#fff!important;
  opacity:.82!important;
  font-size:clamp(.62rem,.72vw,.78rem)!important;
  line-height:1.1!important;
  letter-spacing:.045em!important;
  text-transform:none!important;
  text-shadow:0 2px 12px rgba(0,0,0,.24)!important;
}

.step48-project-copy h3{
  margin:0!important;
  max-width:13.5ch!important;
  color:#fff!important;
  font-size:clamp(2rem,3.3vw,4.45rem)!important;
  line-height:.84!important;
  letter-spacing:-.06em!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  text-shadow:0 3px 18px rgba(0,0,0,.26)!important;
}

.step48-project-copy>span,
.step48-project-copy>i{
  display:none!important;
}

/* Hover: ganz subtil, keine Karten-Spielerei */
@media (hover:hover) and (pointer:fine){
  .step48-project{
    transition:
      transform .42s cubic-bezier(.2,.8,.2,1),
      box-shadow .42s ease,
      opacity .55s ease!important;
  }
  .step48-project:hover{
    transform:translateY(-7px)!important;
    box-shadow:0 34px 82px rgba(17,19,17,.17)!important;
  }
  .step48-project:hover .step48-site-frame iframe{
    transition:transform .55s cubic-bezier(.2,.8,.2,1)!important;
  }
  .step48-project:nth-child(1):hover .step48-site-frame iframe{
    transform:scale(.65) translateY(-26px)!important;
  }
  .step48-project:nth-child(2):hover .step48-site-frame iframe{
    transform:scale(.575) translateY(-25px)!important;
  }
  .step48-project:nth-child(3):hover .step48-site-frame iframe{
    transform:scale(.575) translateY(-18px)!important;
  }
  .step48-project:nth-child(4):hover .step48-site-frame iframe{
    transform:scale(.65) translateY(-16px)!important;
  }
}

/* Kopf etwas näher an die Arbeiten */
.step48-projects-head{
  margin-bottom:clamp(58px,7vw,104px)!important;
}

/* Footer mit mehr Ruhe */
.step48-projects-foot{
  margin-top:clamp(90px,10vw,150px)!important;
}

/* Tablet */
@media (max-width:980px){
  .step48-projects-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px!important;
  }

  .step48-project:nth-child(1){
    grid-column:1 / -1!important;
    grid-row:auto!important;
    margin-top:0!important;
  }
  .step48-project:nth-child(2){
    grid-column:1!important;
    grid-row:auto!important;
    margin-top:0!important;
  }
  .step48-project:nth-child(3){
    grid-column:2!important;
    grid-row:auto!important;
    margin-top:76px!important;
  }
  .step48-project:nth-child(4){
    grid-column:1 / -1!important;
    grid-row:auto!important;
    width:82%!important;
    justify-self:end!important;
    margin-top:18px!important;
  }

  .step48-project-copy h3{
    font-size:clamp(1.8rem,5vw,3.25rem)!important;
  }
}

/* Mobil */
@media (max-width:640px){
  .step48-projects-grid{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }

  .step48-project:nth-child(1),
  .step48-project:nth-child(2),
  .step48-project:nth-child(3),
  .step48-project:nth-child(4){
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    margin-top:0!important;
    justify-self:stretch!important;
    cursor:pointer!important;
  }

  .step48-project-media,
  .step48-project--hero .step48-project-media,
  .step48-project:nth-child(1) .step48-project-media,
  .step48-project:nth-child(2) .step48-project-media,
  .step48-project:nth-child(3) .step48-project-media,
  .step48-project:nth-child(4) .step48-project-media{
    aspect-ratio:1 / 1!important;
  }

  .step48-project{
    border-radius:22px!important;
  }

  .step48-project-copy{
    padding:22px!important;
  }

  .step48-project-copy h3{
    max-width:14ch!important;
    font-size:clamp(1.8rem,9vw,2.65rem)!important;
  }

  .step48-project-copy p{
    font-size:.62rem!important;
  }

  .step48-site-frame iframe{
    width:1280px!important;
    height:1380px!important;
  }

  .step48-site-card--bergsport .step48-site-frame iframe{
    transform:scale(.46) translateY(-8px)!important;
  }
  .step48-site-card--stone .step48-site-frame iframe{
    transform:scale(.43) translateY(-7px)!important;
  }
  .step48-site-card--praxis .step48-site-frame iframe{
    transform:scale(.43) translateY(-5px)!important;
  }
  .step48-site-card--vinzenz .step48-site-frame iframe{
    transform:scale(.46) translateY(-4px)!important;
  }
}


/* HOTFIX 53 · Cursor movement fix
   JS must be allowed to control transform. */
.step48-emoji-cursor{
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%) scale(.68) rotate(-5deg);
  transition:opacity .14s ease!important;
}


/* =========================================================
   HOTFIX 54 · Echte Referenzbilder + Hover-Animation
   ========================================================= */

.step48-project-media--shot{
  background:transparent!important;
}

.step48-shot-card{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
  background:#161817;
}

.step48-shot-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transform:scale(1.001);
  transition:transform .65s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}

.step48-shot-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,12,11,.05) 0%, rgba(10,12,11,.00) 28%, rgba(10,12,11,.16) 54%, rgba(10,12,11,.82) 100%),
    linear-gradient(90deg, rgba(10,12,11,.26) 0%, rgba(10,12,11,.02) 44%, rgba(10,12,11,.36) 100%);
  z-index:1;
  pointer-events:none;
}

.step48-shot-card--light .step48-shot-overlay,
.step48-shot-overlay--light{
  background:
    linear-gradient(180deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.02) 34%, rgba(245,242,236,.38) 74%, rgba(245,242,236,.92) 100%),
    linear-gradient(90deg, rgba(245,242,236,.12) 0%, rgba(245,242,236,.00) 48%, rgba(245,242,236,.20) 100%);
}

.step48-shot-top{
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(17,19,17,.76);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:.62rem;
  line-height:1;
  letter-spacing:.08em;
  font-weight:900;
  text-transform:uppercase;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}

.step48-shot-top--dark{
  background:rgba(245,242,236,.82);
  color:#5c5047;
}

.step48-project-copy{
  padding:clamp(24px,2.5vw,42px)!important;
}

.step48-project-copy p{
  letter-spacing:.06em!important;
}

.step48-project-copy h3{
  max-width:12ch!important;
}

.step48-project-copy--dark,
.step48-project-copy--dark p,
.step48-project-copy--dark h3{
  color:#5b5147!important;
  text-shadow:none!important;
}

.step48-project-copy--dark p{
  opacity:.84!important;
}

@media (hover:hover) and (pointer:fine){
  .step48-project:hover .step48-shot-img{
    transform:scale(1.045) translateY(-6px);
    filter:saturate(1.05) contrast(1.02);
  }
  .step48-project:hover .step48-shot-top{
    transform:translateY(-3px);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .step48-project:hover .step48-project-copy h3{
    transform:translateY(-2px);
  }
}

@media (max-width:980px){
  .step48-project-copy h3{
    max-width:13ch!important;
  }
  .step48-shot-top{
    top:16px;
    left:16px;
    padding:9px 12px;
    font-size:.58rem;
  }
}

@media (max-width:640px){
  .step48-project-copy{
    padding:20px!important;
  }
  .step48-project-copy h3{
    max-width:14ch!important;
    font-size:clamp(1.55rem,8.1vw,2.4rem)!important;
  }
  .step48-project-copy p{
    font-size:.62rem!important;
  }
  .step48-shot-top{
    top:14px;
    left:14px;
    max-width:calc(100% - 28px);
    white-space:normal;
    line-height:1.2;
  }
}


/* =========================================================
   HOTFIX 55 · Emoji-Cursor + Social-Referenzen + mehr Abstand
   ========================================================= */
.step48-projects-grid--expanded{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:38px;
  align-items:start;
}

.step48-projects-grid--expanded .step48-project{
  border-radius:34px;
  overflow:hidden;
  min-height:480px;
  transform:none;
}

.step48-projects-grid--expanded .step48-project:nth-child(1){
  grid-column:1 / span 7;
  margin-top:0;
}
.step48-projects-grid--expanded .step48-project:nth-child(2){
  grid-column:8 / span 5;
  margin-top:72px;
}
.step48-projects-grid--expanded .step48-project:nth-child(3){
  grid-column:1 / span 5;
  margin-top:10px;
}
.step48-projects-grid--expanded .step48-project:nth-child(4){
  grid-column:6 / span 7;
  margin-top:122px;
}
.step48-projects-grid--expanded .step48-project:nth-child(5){
  grid-column:1 / span 7;
  margin-top:6px;
}
.step48-projects-grid--expanded .step48-project:nth-child(6){
  grid-column:8 / span 5;
  margin-top:96px;
}

.step48-projects-grid--expanded .step48-project-media{
  min-height:480px;
  height:100%;
}
.step48-projects-grid--expanded .step48-project:nth-child(1) .step48-project-media,
.step48-projects-grid--expanded .step48-project:nth-child(5) .step48-project-media{
  min-height:540px;
}
.step48-projects-grid--expanded .step48-project:nth-child(4) .step48-project-media{
  min-height:560px;
}

.step48-projects-grid--expanded .step48-shot-img{
  object-fit:cover;
  object-position:center top;
}
.step48-projects-grid--expanded .step48-project--social .step48-shot-img{
  object-position:center center;
}

.step48-projects-grid--expanded .step48-project-copy{
  gap:18px;
}
.step48-projects-grid--expanded .step48-project-copy h3{
  max-width:12ch!important;
}
.step48-projects-grid--expanded .step48-project-copy p{
  font-size:.72rem!important;
}
.step48-projects-grid--expanded .step48-project-copy > span{
  max-width:70%;
}

@media (hover:hover) and (pointer:fine){
  .step48-projects-grid--expanded .step48-project:hover{
    transform:translateY(-8px) rotate(-.25deg);
    box-shadow:0 30px 60px rgba(18,19,18,.14);
  }
  .step48-projects-grid--expanded .step48-project:hover .step48-shot-img{
    transform:scale(1.045) translateY(-8px);
  }
}

/* cursor image */
.step48-emoji-cursor{
  width:86px!important;
  height:86px!important;
  background:url("assets/cursors/emoji-binoculars.png") center/contain no-repeat!important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.18));
}
.step48-emoji-cursor::before{display:none!important}
.step48-emoji-cursor.is-down{transform-origin:center center}

/* tablet */
@media (max-width:1180px){
  .step48-projects-grid--expanded{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
  }
  .step48-projects-grid--expanded .step48-project:nth-child(1),
  .step48-projects-grid--expanded .step48-project:nth-child(2),
  .step48-projects-grid--expanded .step48-project:nth-child(3),
  .step48-projects-grid--expanded .step48-project:nth-child(4),
  .step48-projects-grid--expanded .step48-project:nth-child(5),
  .step48-projects-grid--expanded .step48-project:nth-child(6){
    grid-column:auto;
    margin-top:0;
  }
  .step48-projects-grid--expanded .step48-project:nth-child(2),
  .step48-projects-grid--expanded .step48-project:nth-child(4),
  .step48-projects-grid--expanded .step48-project:nth-child(6){
    margin-top:46px;
  }
  .step48-projects-grid--expanded .step48-project:nth-child(1),
  .step48-projects-grid--expanded .step48-project:nth-child(4){
    min-height:520px;
  }
}

/* mobile */
@media (max-width:760px){
  .step48-projects-grid--expanded{
    grid-template-columns:1fr;
    gap:22px;
  }
  .step48-projects-grid--expanded .step48-project:nth-child(2),
  .step48-projects-grid--expanded .step48-project:nth-child(4),
  .step48-projects-grid--expanded .step48-project:nth-child(6){
    margin-top:0;
  }
  .step48-projects-grid--expanded .step48-project,
  .step48-projects-grid--expanded .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(1) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(4) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(5) .step48-project-media{
    min-height:420px;
  }
  .step48-projects-grid--expanded .step48-project-copy h3{
    max-width:13ch!important;
    font-size:clamp(1.5rem,7.7vw,2.25rem)!important;
  }
}


/* =========================================================
   HOTFIX 56 · mehr Versatz + gleiche Größe
   ========================================================= */
.step48-projects-grid--expanded{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:34px 42px!important;
  align-items:start!important;
}

.step48-projects-grid--expanded .step48-project{
  grid-column:auto!important;
  width:100%!important;
  min-height:540px!important;
  margin-top:0!important;
  border-radius:34px!important;
}

.step48-projects-grid--expanded .step48-project-media,
.step48-projects-grid--expanded .step48-project:nth-child(1) .step48-project-media,
.step48-projects-grid--expanded .step48-project:nth-child(2) .step48-project-media,
.step48-projects-grid--expanded .step48-project:nth-child(3) .step48-project-media,
.step48-projects-grid--expanded .step48-project:nth-child(4) .step48-project-media,
.step48-projects-grid--expanded .step48-project:nth-child(5) .step48-project-media,
.step48-projects-grid--expanded .step48-project:nth-child(6) .step48-project-media{
  min-height:540px!important;
  height:540px!important;
}

/* starker Versatz: rechte Spalte fast untereinander */
.step48-projects-grid--expanded .step48-project:nth-child(1){margin-top:0!important;}
.step48-projects-grid--expanded .step48-project:nth-child(2){margin-top:150px!important;}
.step48-projects-grid--expanded .step48-project:nth-child(3){margin-top:10px!important;}
.step48-projects-grid--expanded .step48-project:nth-child(4){margin-top:160px!important;}
.step48-projects-grid--expanded .step48-project:nth-child(5){margin-top:20px!important;}
.step48-projects-grid--expanded .step48-project:nth-child(6){margin-top:170px!important;}

.step48-projects-grid--expanded .step48-shot-img{
  object-fit:cover!important;
  object-position:center center!important;
}

.step48-projects-grid--expanded .step48-project-copy h3{
  max-width:13ch!important;
}

@media (max-width:1180px){
  .step48-projects-grid--expanded{
    gap:28px 28px!important;
  }
  .step48-projects-grid--expanded .step48-project,
  .step48-projects-grid--expanded .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(1) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(2) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(3) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(4) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(5) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(6) .step48-project-media{
    min-height:500px!important;
    height:500px!important;
  }
  .step48-projects-grid--expanded .step48-project:nth-child(2),
  .step48-projects-grid--expanded .step48-project:nth-child(4),
  .step48-projects-grid--expanded .step48-project:nth-child(6){
    margin-top:120px!important;
  }
}

@media (max-width:760px){
  .step48-projects-grid--expanded{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }
  .step48-projects-grid--expanded .step48-project,
  .step48-projects-grid--expanded .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(1) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(2) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(3) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(4) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(5) .step48-project-media,
  .step48-projects-grid--expanded .step48-project:nth-child(6) .step48-project-media{
    min-height:420px!important;
    height:420px!important;
  }
  .step48-projects-grid--expanded .step48-project:nth-child(2),
  .step48-projects-grid--expanded .step48-project:nth-child(4),
  .step48-projects-grid--expanded .step48-project:nth-child(6){
    margin-top:0!important;
  }
}


/* =========================================================
   HOTFIX 57 · neuer kleiner Detektiv-Cursor
   ========================================================= */
.step48-emoji-cursor{
  width:58px!important;
  height:58px!important;
  background:url("assets/cursors/emoji-detective.png") center/contain no-repeat!important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.16))!important;
}
.step48-emoji-cursor.is-down{
  transform-origin:center center!important;
}
@media (max-width:1180px){
  .step48-emoji-cursor{
    width:52px!important;
    height:52px!important;
  }
}