/* ═══════════ SCROLL-STORIES V2 — PRODUCTION ═══════════ */

/* ═══════════ 1. TEXT-REVEAL ═══════════ */
.tr-wrap{position:relative;min-height:350vh}
.tr-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:0 clamp(1.5rem,5vw,4rem)}
.tr-sentence{font-family:'Anton',sans-serif;font-size:clamp(24px,6vw,58px);line-height:1.25;text-align:center;max-width:850px;letter-spacing:0.5px;margin:0}
.tr-sentence .tr-w{color:rgba(237,234,221,0.08);transition:color 0.3s cubic-bezier(0.16,1,0.3,1),transform 0.3s cubic-bezier(0.16,1,0.3,1);display:inline-block;will-change:color,transform}
.tr-sentence .tr-w.tr-active{color:#B8E834;transform:scale(1.04)}
.tr-sentence .tr-w.tr-done{color:#EDEADD}
.tr-progress{position:fixed;bottom:0;left:0;height:3px;background:#B8E834;z-index:100;transform-origin:left;will-change:transform;pointer-events:none;opacity:0;transition:opacity 0.3s}
.tr-progress.visible{opacity:1}

/* ═══════════ 2. VORHER/NACHHER V3 ═══════════ */
.vn{position:relative;min-height:400vh}
.vn-pin{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(14px,2.5vh,28px) clamp(16px,4vw,48px);gap:clamp(10px,1.6vh,18px);overflow:hidden}
.vn-head{text-align:center;position:relative;z-index:1}
.vn-eye{font-size:clamp(9px,1vw,11px);letter-spacing:3px;text-transform:uppercase;display:block;margin-bottom:6px}
.vn-h{font-family:'Anton',sans-serif;font-size:clamp(22px,4.2vw,42px);line-height:1.08;letter-spacing:0.5px}
.vn-browser{position:relative;z-index:1;width:min(920px,100%);border-radius:clamp(8px,1.2vw,14px);overflow:hidden;border:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.25),0 16px 48px rgba(0,0,0,0.2);flex-shrink:0}
.vn-chrome{background:#1c1c1e;padding:clamp(5px,0.7vh,9px) clamp(10px,1.5vw,16px);display:flex;align-items:center;gap:clamp(6px,1vw,10px);border-bottom:1px solid rgba(255,255,255,0.04)}
.vn-dots{display:flex;gap:5px}
.vn-dot{width:clamp(8px,0.9vw,11px);height:clamp(8px,0.9vw,11px);border-radius:50%}
.vn-dot:nth-child(1){background:#ff5f57}
.vn-dot:nth-child(2){background:#febc2e}
.vn-dot:nth-child(3){background:#28c840}
.vn-url{flex:1;background:rgba(255,255,255,0.06);border-radius:5px;padding:clamp(3px,0.4vh,5px) clamp(8px,1.2vw,12px);font-size:clamp(10px,1vw,12px);color:rgba(255,255,255,0.3);text-align:center}
.vn-port{position:relative;aspect-ratio:2/1;overflow:hidden;background:#111}
@media(max-width:600px){.vn-port{aspect-ratio:4/3}}
.vn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.vn-old{z-index:2;will-change:clip-path}
.vn-line{position:absolute;top:0;bottom:0;width:3px;background:linear-gradient(180deg,rgba(184,232,52,0.3),#B8E834 20%,#B8E834 80%,rgba(184,232,52,0.3));z-index:10;left:100%;will-change:left;touch-action:none}
.vn-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(34px,5vw,44px);height:clamp(34px,5vw,44px);background:#B8E834;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.vn-grip::before{content:'';position:absolute;inset:-5px;min-width:44px;min-height:44px;border-radius:50%}
.vn-grip:active{cursor:grabbing}
.vn-grip svg{width:clamp(14px,2vw,18px);height:clamp(14px,2vw,18px);fill:none;stroke:#0A0D0B;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.vn-lab{position:absolute;z-index:11;font-size:clamp(9px,1vw,11px);letter-spacing:2px;font-weight:700;padding:clamp(4px,0.5vh,6px) clamp(8px,1vw,11px);border-radius:4px;bottom:clamp(8px,2.5%,18px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 0.3s}
.vn-lab-l{left:clamp(8px,2%,16px);background:rgba(0,0,0,0.55);color:rgba(255,255,255,0.7)}
.vn-lab-r{right:clamp(8px,2%,16px);background:rgba(184,232,52,0.12);color:#B8E834}
.vn-strip{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(8px,1.5vw,20px);min-height:clamp(24px,3vh,36px)}
.vn-metric{display:flex;align-items:baseline;gap:5px;opacity:0;transform:translateY(10px);transition:opacity 0.45s,transform 0.45s}
.vn-metric.show{opacity:1;transform:none}
.vn-metric strong{font-family:'Anton',sans-serif;font-size:clamp(16px,2vw,24px);color:#B8E834}
.vn-metric span{font-size:clamp(11px,1.1vw,13px);opacity:0.4}
.vn-sep{opacity:0;font-size:clamp(12px,1.2vw,16px);color:rgba(237,234,221,0.15);transition:opacity 0.3s}
.vn-sep.show{opacity:1}
.vn-btn{position:relative;z-index:1;display:inline-block;background:#B8E834;color:#0A0D0B;padding:clamp(10px,1.3vh,14px) clamp(18px,2.5vw,26px);border-radius:8px;font-weight:700;font-size:clamp(13px,1.3vw,15px);text-decoration:none;letter-spacing:0.3px;opacity:0;transform:translateY(10px);transition:opacity 0.5s,transform 0.5s,background 0.2s}
.vn-btn.show{opacity:1;transform:none}
.vn-btn:hover{background:#c8f244}
.vn-hint{position:absolute;bottom:clamp(10px,2vh,20px);left:50%;transform:translateX(-50%);font-size:clamp(10px,1vw,12px);opacity:0.2;letter-spacing:1px;z-index:1;transition:opacity 0.4s;white-space:nowrap}
.vn-hint.hide{opacity:0}
@media(max-width:600px){.vn{min-height:300vh}.vn-strip{flex-wrap:wrap;justify-content:center;gap:4px 14px}.vn-sep{display:none}.vn-h{font-size:clamp(20px,7vw,32px)}}

/* ═══════════ 3. STICKY PHONE ═══════════ */
.ph-wrap{position:relative;min-height:450vh}
.ph-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,64px);padding:0 clamp(1rem,3vw,2rem)}
@media(max-width:640px){.ph-sticky{flex-direction:column;gap:20px;padding-top:60px}}

.ph-device{flex:0 0 clamp(160px,25vw,220px);width:clamp(160px,25vw,220px);height:clamp(320px,50vw,440px);border:3px solid #2a2a2a;border-radius:clamp(20px,4vw,32px);background:#111;position:relative;overflow:hidden}
@media(max-width:640px){.ph-device{flex:0 0 260px;width:170px;height:340px}}
.ph-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:clamp(50px,8vw,76px);height:clamp(16px,2.5vw,24px);background:#0A0D0B;border-radius:0 0 clamp(8px,1.5vw,14px) clamp(8px,1.5vw,14px);z-index:2}
.ph-screen{position:absolute;inset:clamp(5px,1vw,8px);border-radius:clamp(15px,3vw,24px);overflow:hidden}
.ph-slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1);will-change:opacity}
.ph-slide.active{opacity:1}

.ph-s1{background:linear-gradient(180deg,#162816,#0c1a0c);align-items:center;padding-top:clamp(28px,8%,44px)}
.ph-s1 .ph-icon{width:clamp(36px,6vw,54px);height:clamp(36px,6vw,54px);border-radius:50%;background:#B8E834;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#0A0D0B;font-weight:700;font-size:clamp(12px,2vw,18px);font-family:'Anton',sans-serif}
.ph-s1 .ph-appname{color:#EDEADD;font-size:clamp(10px,1.5vw,13px);font-weight:600;margin-bottom:clamp(12px,4%,22px);font-family:'Inter',sans-serif}
.ph-s1 .ph-row{width:78%;height:clamp(20px,4%,30px);background:rgba(184,232,52,0.12);border-radius:5px;margin-bottom:clamp(5px,1.5%,8px)}
.ph-s1 .ph-row:first-of-type{background:rgba(184,232,52,0.18)}

.ph-s2{background:linear-gradient(180deg,#1a1a2a,#0f0f1a);padding:clamp(26px,7%,38px) clamp(10px,3%,16px) clamp(10px,3%,16px)}
.ph-s2 .ph-cat{color:#B8E834;font-size:clamp(8px,1.2vw,11px);letter-spacing:1px;margin-bottom:clamp(6px,2%,12px);font-family:'Inter',sans-serif;font-weight:600}
.ph-s2 .ph-job{border-radius:clamp(5px,1.2%,8px);padding:clamp(7px,2%,12px);margin-bottom:clamp(4px,1.2%,7px)}
.ph-s2 .ph-job.urgent{background:rgba(255,138,31,0.15)}
.ph-s2 .ph-job.normal{background:rgba(184,232,52,0.08)}
.ph-s2 .ph-job strong{display:block;font-size:clamp(8px,1.2vw,11px);font-weight:600}
.ph-s2 .ph-job.urgent strong{color:#FF8A1F}
.ph-s2 .ph-job.normal strong{color:#B8E834}
.ph-s2 .ph-job small{color:#EDEADD;opacity:0.5;font-size:clamp(7px,1vw,9px)}

.ph-s3{background:linear-gradient(180deg,#2a1a1a,#1a0f0f);padding:clamp(26px,7%,38px) clamp(10px,3%,16px) clamp(10px,3%,16px)}
.ph-s3 .ph-cat{color:#FF8A1F;font-size:clamp(8px,1.2vw,11px);letter-spacing:1px;margin-bottom:clamp(6px,2%,12px);font-family:'Inter',sans-serif;font-weight:600}
.ph-s3 .ph-invoice{background:rgba(237,234,221,0.04);border-radius:clamp(5px,1.2%,8px);padding:clamp(8px,2.5%,14px)}
.ph-s3 .ph-inv-head{display:flex;justify-content:space-between;margin-bottom:clamp(6px,2%,10px)}
.ph-s3 .ph-inv-head span{font-size:clamp(8px,1.3vw,12px)}
.ph-s3 .ph-inv-head span:first-child{color:#EDEADD}
.ph-s3 .ph-inv-head span:last-child{color:#B8E834;font-weight:600}
.ph-s3 .ph-inv-rows{border-top:1px solid rgba(237,234,221,0.08);padding-top:clamp(4px,1.5%,8px)}
.ph-s3 .ph-inv-row{display:flex;justify-content:space-between;font-size:clamp(7px,1vw,9px);color:#EDEADD;opacity:0.45;margin-bottom:3px}
.ph-s3 .ph-send-btn{margin-top:clamp(8px,3%,16px);background:#FF8A1F;color:#0A0D0B;text-align:center;padding:clamp(5px,1.5%,9px);border-radius:clamp(3px,0.8%,6px);font-size:clamp(8px,1.2vw,11px);font-weight:700;font-family:'Inter',sans-serif}

.ph-progress{position:absolute;bottom:clamp(12px,3%,22px);left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.ph-dot{width:clamp(6px,1.2vw,8px);height:clamp(6px,1.2vw,8px);border-radius:50%;background:rgba(237,234,221,0.15);transition:background 0.4s,transform 0.4s}
.ph-dot.active{background:#B8E834;transform:scale(1.3)}

.ph-text{flex:1;max-width:380px;min-width:0}
@media(max-width:640px){.ph-text{text-align:center;padding:0 1rem}}
.ph-panel{transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1);will-change:opacity}
.ph-panel:not(.active){opacity:0;position:absolute;pointer-events:none}
.ph-panel.active{opacity:1;position:relative}
.ph-panel .ph-step{color:#B8E834;font-size:clamp(10px,1.3vw,12px);letter-spacing:3px;margin-bottom:clamp(4px,1%,8px);font-family:'Inter',sans-serif;font-weight:600}
.ph-panel .ph-step.orange{color:#FF8A1F}
.ph-panel h3{font-family:'Anton',sans-serif;font-size:clamp(20px,3.5vw,34px);margin:0 0 clamp(6px,1.5%,12px);letter-spacing:1px;color:#EDEADD}
.ph-panel p{color:rgba(237,234,221,0.45);font-size:clamp(13px,1.8vw,16px);line-height:1.6;margin:0}

/* ═══════════ REDUCED MOTION ═══════════ */
@media(prefers-reduced-motion:reduce){
  .tr-sentence .tr-w{transition:none!important}
  .ph-slide,.ph-panel,.ph-dot{transition:none!important}
  .tr-progress{display:none}
  .vn-metric,.vn-btn,.vn-sep,.vn-hint{transition:none!important;transform:none!important}
  .vn-grip{transition:none!important}
  .vn-old{clip-path:inset(0 50% 0 0)!important}
  .vn-metric,.vn-btn,.vn-sep{opacity:1!important}
}