.ts-tn{width:100%;margin:0 auto 32px}
.ts-tn-copy{text-align:center;margin:0 auto 20px;padding:0 15px}
.ts-tn-copy h2{margin:0 0 7px;font-size:clamp(25px,3vw,40px)}
.ts-tn-copy p{margin:0;color:#777}

.ts-tn-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--r,0);
  background:#111;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

/* Das Tag-Bild bestimmt die echte Höhe / das Seitenverhältnis */
.ts-tn-base{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  z-index:1;
}

/* Nacht liegt pixelgenau über dem Tag-Bild */
.ts-tn-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:2;
  overflow:hidden;
  clip-path:inset(0 50% 0 0);
  -webkit-clip-path:inset(0 50% 0 0);
}
.ts-tn-overlay img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:fill !important;
  transform:none !important;
}

/* Trennlinie + Griff */
.ts-tn-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  z-index:4;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  pointer-events:none;
}
.ts-tn-handle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  color:#0d3a5d;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 22px/1 Arial,sans-serif;
  box-shadow:0 2px 12px rgba(0,0,0,.28);
  letter-spacing:4px;
  padding-left:4px;
}

/* Unsichtbarer Range liegt über der kompletten Bildfläche */
.ts-tn-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:6;
}

/* Beschriftungen */
.ts-tn-label{
  position:absolute;
  bottom:20px;
  z-index:5;
  background:rgba(0,0,0,.58);
  color:#fff;
  padding:7px 11px;
  font:600 12px/1 Arial,sans-serif;
  letter-spacing:.12em;
  border-radius:3px;
  pointer-events:none;
}
.ts-tn-label-night{left:20px}
.ts-tn-label-day{right:20px}

@media(max-width:767px){
  .ts-tn-label{bottom:12px}
  .ts-tn-label-night{left:12px}
  .ts-tn-label-day{right:12px}
  .ts-tn-handle{width:42px;height:42px}
}