/* Vorher-Nachher-Vergleich (Startseite) */
.vn-section .vn-heading{text-align:center;margin-top:0}
.vn-section .vn-intro{max-width:720px;margin:0 auto 32px}
.vn-grid{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:900px;margin:0 auto}
.vn-compare{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#2b2b2b;--pos:50%;-webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:ew-resize;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.vn-compare img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;pointer-events:none;-webkit-user-drag:none}
.vn-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vn-label{position:absolute;top:10px;z-index:3;padding:3px 9px;border-radius:3px;background:rgba(0,0,0,.6);color:#fff;font-family:Roboto,sans-serif;font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.02em;pointer-events:none}
.vn-label--before{left:10px}
.vn-label--after{right:10px}
.vn-handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.45);pointer-events:none}
.vn-handle::after{content:"\2039\00a0\203A";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#333;font:700 20px/38px Roboto,sans-serif;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.vn-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}
.vn-compare.vn-js .vn-range{pointer-events:none}
.vn-compare:focus-within .vn-handle::after{outline:3px solid #b3262e;outline-offset:2px}
@media screen and (max-width:991px){.vn-handle::after{width:34px;height:34px;font-size:18px;line-height:32px}}
@media screen and (max-width:767px){.vn-grid{max-width:none}.vn-section .vn-intro{margin-bottom:24px}}
/* Button "Vorher – Nachher ansehen" (Startseite -> Galerie) */
.vn-gal-cta-wrap{display:flex;justify-content:center;width:100%;padding:32px 20px 0}
.vn-gal-cta.submit-button1{display:inline-block;padding:12px 24px;border-radius:0;background-color:var(--dark-brown,#936037);color:#fff;font-size:16px;line-height:1.5;text-align:center;text-decoration:none;transition:background-color .3s}
.vn-gal-cta.submit-button1:hover,.vn-gal-cta.submit-button1:focus-visible{background-color:#000;color:#fff}
