/* Før/efter-fotos har samme størrelse; kun afdækningen ændres. */
.comparison-showcase { position:relative; height:540px; background:#dfe6d8; border-radius:5px; isolation:isolate; overflow:hidden; }
.comparison-slide { --split:50%; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .65s ease; overflow:hidden; }
.comparison-slide.is-active { opacity:1; pointer-events:auto; z-index:1; }
.comparison-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.comparison-before { clip-path:inset(0 calc(100% - var(--split)) 0 0); z-index:1; }
.comparison-slide::after { content:''; position:absolute; inset:50% 0 0; z-index:2; pointer-events:none; background:linear-gradient(transparent,rgba(12,25,18,.88)); }
.comparison-tag { position:absolute; top:20px; left:20px; z-index:4; padding:5px 12px; border-radius:3px; background:rgba(20,35,26,.8); color:white; font-size:11px; letter-spacing:.08em; pointer-events:none; }
.tag-after { left:auto; right:20px; }
.comparison-divider { position:absolute; left:var(--split); top:0; bottom:0; width:2px; transform:translateX(-1px); background:white; z-index:3; pointer-events:none; box-shadow:0 0 4px #0005; }
.comparison-divider span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:44px; height:44px; border:2px solid white; border-radius:50%; background:#243e2dd9; color:white; font-size:25px; letter-spacing:3px; padding-left:3px; box-shadow:0 2px 8px #0002; }
.comparison-range { position:absolute; top:calc(50% - 22px); left:-22px; width:calc(100% + 44px); height:44px; margin:0; z-index:5; opacity:0; cursor:ew-resize; touch-action:pan-y; appearance:none; background:transparent; }
.comparison-range::-webkit-slider-thumb { appearance:none; width:44px; height:44px; border:0; }
.comparison-range::-moz-range-thumb { width:44px; height:44px; border:0; }
.comparison-slide:focus-within .comparison-divider span { outline:3px solid #e3b96a; outline-offset:4px; }
.comparison-slide figcaption { position:absolute; bottom:68px; left:30px; right:30px; color:white; z-index:4; pointer-events:none; display:grid; gap:5px; }
.comparison-slide figcaption>span { font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.comparison-slide figcaption strong { font-size:21px; line-height:1.3; font-weight:500; letter-spacing:-.02em; }
.comparison-slide figcaption small { font-size:10px; color:#ffffffc9; }
.comparison-controls { position:absolute; bottom:20px; left:23px; right:23px; z-index:8; display:flex; align-items:center; justify-content:space-between; }
.comparison-dots { display:flex; }
.comparison-dot { width:34px; height:36px; position:relative; border:0; background:transparent; }
.comparison-dot::after { content:''; position:absolute; width:6px; height:6px; border-radius:4px; background:#ffffff80; top:15px; left:14px; }
.comparison-dot.is-active::after { background:white; width:20px; left:7px; }
.comparison-pause { width:36px; height:36px; border-radius:50%; border:1px solid #ffffffa0; background:#182a2350; color:white; font-size:15px; }
@media(min-width:1500px) { .comparison-showcase { height:565px; } }
@media(max-width:1150px) { .comparison-showcase { height:510px; } }
@media(max-width:960px) { .comparison-showcase { height:490px; } }
@media(max-width:700px) { .comparison-showcase { height:400px; } .comparison-slide figcaption { left:23px; right:23px; } .comparison-slide figcaption strong { font-size:19px; } }
@media(max-width:380px) { .comparison-showcase { height:360px; } }
@media(prefers-reduced-motion:reduce) { .comparison-slide { transition:none; } }