/* Startseite: Vorher / Nachher */
.vn{max-width:1300px;margin:0 auto;padding:clamp(60px,7vw,110px) clamp(18px,5vw,76px)}
.vn-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 50px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,36px)}
.vn-head .eyebrow{margin:0 0 12px}
.vn-head h2{margin:0;font:500 clamp(32px,4vw,58px)/1.03 'Manrope',sans-serif;letter-spacing:-.045em;color:#22231d}
.vn-head h2 em{font-style:normal;color:#9c302e}
.vn-head p{margin:0;max-width:40ch;font-size:15px;line-height:1.65;color:#6f6f63}
.vn-stage{position:relative;border-radius:clamp(20px,2.4vw,32px);overflow:hidden;aspect-ratio:16/9;background:#e7e2d8;box-shadow:0 40px 80px rgba(48,40,25,.16);user-select:none;-webkit-user-select:none;touch-action:pan-y;--p:22%}
.vn-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.vn-after{clip-path:inset(0 0 0 var(--p))}
.vn-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.35);pointer-events:none}
.vn-knob{position:absolute;top:50%;left:var(--p);width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.28);pointer-events:none;transition:transform .2s}
.vn-knob svg{width:28px;height:28px;fill:none;stroke:#9c302e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vn-stage.drag .vn-knob{transform:scale(1.1)}
.vn-tag{position:absolute;top:18px;padding:8px 14px;border-radius:999px;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;transition:opacity .3s}
.vn-tag.b{left:18px;background:rgba(20,19,17,.72);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vn-tag.a{right:18px;background:#9c302e;color:#fff}
.vn-cap{position:absolute;right:18px;bottom:18px;max-width:min(70%,460px);padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}
.vn-cap b{display:block;font:600 16px/1.3 'DM Sans',sans-serif;color:#22231d}
.vn-cap span{font-size:13px;color:#6f6f63}
.vn-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:5;pointer-events:none}
.vn-stage{cursor:ew-resize}
.vn-range:focus-visible{opacity:0}
.vn-stage:has(.vn-range:focus-visible) .vn-knob{outline:3px solid #9c302e;outline-offset:4px}
.vn-hint{position:absolute;left:50%;bottom:22px;translate:-50% 0;padding:8px 14px;border-radius:999px;background:rgba(20,19,17,.66);color:#fff;font:600 12px/1 'DM Sans',sans-serif;pointer-events:none;transition:opacity .4s}
.vn-stage.used .vn-hint{opacity:0}
.vn-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,12px);margin-top:clamp(12px,1.4vw,18px)}
.vn-thumbs button{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#e7e2d8;cursor:pointer;opacity:.6;transition:opacity .25s,transform .25s;outline-offset:3px}
.vn-thumbs button:hover{opacity:.9}
.vn-thumbs button.on{opacity:1;box-shadow:0 0 0 3px #9c302e}
.vn-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.vn-thumbs span{position:absolute;left:8px;right:8px;bottom:7px;color:#fff;font:700 11.5px/1.2 'DM Sans',sans-serif;text-align:left;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vn-note{margin:12px 0 0;font-size:12px;color:#9a978b}
@media (max-width:700px){
  .vn-stage{aspect-ratio:4/5}
  .vn-cap{right:12px;left:12px;bottom:12px;max-width:none;padding:12px 14px}
  .vn-hint{bottom:auto;top:62px}
  .vn-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:12px -18px 0;padding:4px 18px}
  .vn-thumbs::-webkit-scrollbar{display:none}
  .vn-thumbs button{flex:0 0 38%;scroll-snap-align:start}
}