/* ============================================================
   Wasserturmsiedlung — Map-Compare-Slider (2027 V2)
   Hell/Dunkel-Wischregler. Setzt tokens.css voraus.
   ============================================================ */

.mapcompare {
  position: relative;
  width: 100%;
  aspect-ratio: var(--mc-ratio, 1.85);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-raised);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.mapcompare:not(.is-ready) { min-height: 220px; }

.mc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.mc-lightwrap {
  position: absolute; inset: 0;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.mapcompare:not(.is-dragging) .mc-lightwrap { transition: clip-path 60ms linear; }

/* Griff */
.mc-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; padding: 0; margin: 0;
  background: none; border: 0; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.mc-handle-line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.mc-handle-grip {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: -.04em;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform var(--dur-fast) var(--ease);
}
.mapcompare:hover .mc-handle-grip { transform: scale(1.08); }
.mc-handle:focus-visible { outline: none; }
.mc-handle:focus-visible .mc-handle-grip { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Tag/Nacht-Labels */
.mc-tag {
  position: absolute; bottom: var(--space-2);
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px); z-index: 2; pointer-events: none;
}
.mc-tag-light { left: var(--space-2);  background: rgba(251,250,245,.82); color: #1d3b2e; }
.mc-tag-dark  { right: var(--space-2); background: rgba(20,33,26,.7);     color: #f3eedd; }

@media (prefers-reduced-motion: reduce) {
  .mapcompare .mc-lightwrap { transition: none; }
  .mc-handle-grip { transition: none; }
}
@media (max-width: 560px) {
  .mc-handle-grip { width: 38px; height: 38px; }
  .mc-tag { font-size: .68rem; }
}