/* css/meteotimeslider.css */
:root {
  --panel: rgba(15,25,35,.72);
  --stroke: rgba(255,255,255,.18);
  --text: #fff;
  --accent: #07BBCF;
  --logo: #f4a932;
}

#timeslider { width: calc(100% - 50px); max-width: 1000px;  margin:5px; position: absolute; bottom: 0px; left: 0px; z-index: 999999; }
/* Wrapper */
.mts-wrap { position: relative; width: 100%; max-width: 900px; color: var(--text); }

/* erste Zeile: Controls + Range */
.mts-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }

/* Select & Buttons */
.mts-model { appearance:none; border:0; border-radius:5px; padding:8px 12px; background:#0f1a23; color:var(--text); box-shadow:inset 0 0 0 1px var(--stroke); }
.mts-prev,.mts-next { appearance:none; border:0; border-radius:5px; padding:8px 15px; background:#062f42; color:var(--text); box-shadow:inset 0 0 0 1px var(--stroke); }
.mts-play { appearance:none; border:0; border-radius:5px; padding:8px 30px; background:#062f42; color:var(--text); box-shadow:inset 0 0 0 1px var(--stroke); }
.mts-prev:hover,.mts-play:hover,.mts-next:hover,.mts-model:hover { box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); }

.mts-trackcol { /*margin-bottom: -38px;*/ }
/* Track + Range + Bubble */
.mts-track { position: relative; margin-bottom: -18px;  z-index: 9; }
.mts-range { -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:0px; outline:none; 
             background:rgba(255,255,255,0.05); box-shadow:none; }
.mts-range::-webkit-slider-thumb{ -webkit-appearance:none; width:10px; height:16px; border-radius:2px; background:#f29400; border:none; box-shadow:none; cursor:pointer; }
.mts-range::-moz-range-thumb{ width:10px; height:16px; border-radius:2px; background:#f29400; border:none; box-shadow:none; cursor:pointer; }

.mts-bubble { position:absolute; top:-30px; translate:-50% 0; padding:8px 8px; border-radius:5px; background:#062f42;
              color:var(--text); font:600 12px/1 system-ui, sans-serif; box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
              pointer-events:auto; cursor:grab; user-select:none; }
.mts-bubble:active{ cursor:grabbing; }
.mts-bubble::after{ content:""; position:absolute; left:50%; bottom:-6px; translate:-50% 0; border-width:6px 6px 0 6px; border-style:solid; border-color:#0f1a23 transparent transparent transparent; }

/* Tray mit Ticks + Daylabels */
.mts-tray { position:relative; margin-top:0px; padding:0px 6px; border-radius:5px; background:#062f42; box-shadow:inset 0 0 0 1px var(--stroke); }
.mts-ticks { position:relative; height:18px; }
.mts-tick { position:absolute; top:0; width:1px; height:8px; background:#0a4e70; }
.mts-tick--6h{ height:12px; background:var(--accent); opacity:.9; }
.mts-tick--day{ height:16px; background:var(--logo); }

.mts-daylabels { position:relative; height:18px; margin-top:1px; }
.mts-daylabel { position:absolute; transform:translateX(-50%); font:600 11px/1 system-ui, sans-serif; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.5); }

/* Info-Zeile */
.mts-info { margin-top:8px; display:flex; align-items:center; gap:8px; }
.mts-meta-btn { appearance:none; border:0; border-radius:5px; padding:6px; background:#062f42; color:var(--text); box-shadow:inset 0 0 0 1px var(--stroke); position: absolute; bottom: 5px; right: 116px; width: 28px; }
.mts-meta-btn:hover{ box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); }

.mts-popover { position: absolute;z-index: 2147483647 !important; bottom:100px; right:5px; translate:0 0; min-width:240px; max-width:320px; padding:10px; border-radius:5px;
               background:#0f1a23; color:var(--text); box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px var(--stroke); font-size: 14px; }
.mts-pop-close { float:right; appearance:none; border:0; background:transparent; color:#fff; font-size:16px; cursor:pointer; }

/* internes Select im Slider ausblenden */
.mts-wrap .mts-model { display: none !important; }

/* externes, fixes Modell-Select unten rechts */
.mts-model-floating {
  position: fixed;
  right: 9px;
  bottom: 10px;
  z-index: 10000;

  appearance: none;
  border: 0;
  border-radius: 5px;
  padding: 8px 12px;
  background: #062f42;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font: 600 13px/1 system-ui, sans-serif;
}
.mts-model-floating:hover {
  box-shadow: inset 0 0 0 1px #07BBCF;
  color: #07BBCF;
}

/* dünne Hover-Linie */
.mts-hover{
  position:absolute;
  bottom: 0;
  top: 0;
  width: 1px;
  background: rgba(255,255,255,.6);
  pointer-events: none;
  transform: translateX(-0.5px);
}

/* Tooltip, zentriert auf Linie */
.mts-hover-tip{
  position:absolute;
  bottom: 100%;
  transform: translate(-50%, -6px);
  padding: 4px 8px;
  border-radius: 8px;
  font: 600 11px/1.1 system-ui, sans-serif;
  color: #fff;
  background: rgba(15,25,35,.9);
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);
  white-space: nowrap;
  pointer-events: none;
}
.mts-hover-tip::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15,25,35,.9);
}
.mts-hover,
.mts-hover-tip{
  pointer-events: none;
}


/* Mobile Mode Marker */
.mts-wrap.mts--mobile {
  /* keine feste Breite, track füllt Platz */
}

/* Buttons ausblenden */
.mts-wrap.mts--mobile .mts-btnstack,
.mts-wrap.mts--mobile .mts-prev,
.mts-wrap.mts--mobile .mts-next,
.mts-wrap.mts--mobile .mts-play {
  display: none !important;
}

/* Bubble fix zentriert über dem Track */
.mts-wrap.mts--mobile .mts-bubble {
  left: 50% !important; top: -15px;
  /*transform: translateX(-50%);*/
  pointer-events: auto; /* für Tap Play/Pause */
}

/* Floating Modelbar bottom-right */
.mts-modelbar{
  position: fixed;
  right: 1px; bottom: 6px;
  display: flex; align-items: center; gap: 8px;
  z-index: 9999;
  padding: 8px 10px;
  /*border-radius: 10px;
  background: rgba(15,25,35,.72);
  backdrop-filter: saturate(135%) blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18);*/
  color: #fff;
}

/* Select + Info-Button */
#mts-model{
  appearance: none;
  border: 0; border-radius: 10px;
  padding: 8px 12px; color: #fff;
  background: linear-gradient(180deg,#0f1a23,#0b141c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
#mts-meta-btn{
  appearance: none;
  border: 0; border-radius: 10px;
  padding: 8px 10px; font-weight: 700;
  color: #fff; background:#0f1a23;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  cursor: pointer;
}
#mts-meta-btn:hover{ box-shadow: inset 0 0 0 1px #07BBCF; color:#07BBCF; }

/* Popover */
#mts-meta-pop{
  position: absolute; right: 0; bottom: 46px;
  min-width: 240px; max-width: 320px;
  padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(180deg,#0f1a23,#0b141c);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18);
  color:#fff;
}
#mts-meta-pop .mts-pop-close{
  position: absolute; top: 6px; right: 6px;
  appearance: none; border:0; background: transparent;
  color:#fff; font-size:14px; cursor:pointer;
}

/* Den alten Info-Bereich im Slider verstecken, falls noch vorhanden */
.mts-wrap .mts-info{ display:none !important; }


@media (max-width: 600px){
#timeslider { width: 100%; max-width: 1000px;  margin:0px; position: absolute; bottom: 0px; left: 0px; z-index: 999999; }
}

/* Hover/Tooltips auf Mobile sicherheitshalber weg */
@media (max-width: 600px){
  .mts-hover,
  .mts-hover-tip { display: none !important; }
}

/* Der Track kann ruhig höher sein auf Mobile, damit man gut trifft */
@media (max-width: 600px){
  .mts-track { height: 40px; }
  .mts-range { margin-top: 20px; }
}