/* meteo365 v4 — MeteoTimeSlider (modernisiert)
   Basiert auf der DOM-Struktur aus assets/v4/js/meteotimeslider.js.
   Modernisierungs-Layer (Now-Marker, Progress-Fill, Day-Chips, Speed-Toggle,
   LIVE-Badge, zweizeilige Bubble) wird von start.php via Wrapper-JS injiziert.
   Tokens sind gescopet auf #timeslider (kein :root-Hijack).
*/

#timeslider {
  --mts-accent:        #f4a932;
  --mts-accent-2:      #e08900;
  --mts-accent-soft:   rgba(244, 169, 50, .22);
  --mts-accent-glow:   rgba(244, 169, 50, .55);
  --mts-alt:           #e11d74;
  --mts-alt-soft:      rgba(225, 29, 116, .18);
  --mts-bg:            rgba(11, 19, 28, .82);
  --mts-bg-strong:     rgba(8, 14, 22, .95);
  --mts-stroke:        rgba(255, 255, 255, .12);
  --mts-text:          #fff;
  --mts-muted:         rgba(255, 255, 255, .60);
  --mts-track:         rgba(255, 255, 255, .14);
  --mts-tick:          rgba(255, 255, 255, .22);
  --mts-shadow:        0 14px 32px rgba(0, 0, 0, .35);

  color: var(--mts-text);
  font-family: var(--font-sans);
}

/* ===== Wrapper — voll transparent (Karte scheint durch).
   Background liegt nur an Tray (Day-Labels + Ticks) und an den Buttons. */
#timeslider .mts-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 6px 16px 8px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#timeslider .mts-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

#timeslider .mts-left      { display: flex; align-items: center; gap: 8px; }
#timeslider .mts-btnstack  { display: flex; align-items: center; gap: 6px; }
#timeslider .mts-line      { display: flex; align-items: center; gap: 6px; }

/* ===== Buttons (mono Prev/Next, Orange Play) =====
   Prev/Next bekommen dasselbe Petrol-Gradient wie .map-btn und das
   Modell-Select-Dropdown — bündig zur restlichen UI, kein Glass mehr. */
#timeslider .mts-prev,
#timeslider .mts-next {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--map-control-bg);
  backdrop-filter: var(--map-control-blur);
  -webkit-backdrop-filter: var(--map-control-blur);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 4px 10px rgba(4, 39, 58, .28);
  transition: background .18s ease, color .18s ease;
}
#timeslider .mts-prev:hover,
#timeslider .mts-next:hover {
  background: var(--map-control-bg-hover);
}

#timeslider .mts-play {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--mts-accent), var(--mts-accent-2));
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 14px rgba(224, 137, 0, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
#timeslider .mts-play:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 8px 18px rgba(224, 137, 0, .42);
}

/* ===== Speed-Toggle (B-Element) ===== */
#timeslider .mts-speed {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--mts-stroke);
}
#timeslider .mts-speed button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mts-muted);
  font: 700 10px/1 var(--font-sans);
  padding: 3px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
#timeslider .mts-speed button:hover { color: var(--mts-text); }
#timeslider .mts-speed button.is-active {
  background: var(--mts-accent);
  color: #fff;
}

/* ===== Track + Progress-Fill (A-Element) ===== */
#timeslider .mts-trackcol { min-width: 0; }

/* ===== Track (klassisch: duenne horizontale Schiene im Panel) ===== */
#timeslider .mts-track {
  position: relative;
  margin-bottom: 0;
  z-index: 9;
  /* iOS liefert den Touch-Scrub sonst nicht (Safari deutet die Bewegung als
     Scroll/Zoom und „klaut" sie) → Zeitleiste auf iPhone nicht ziehbar. Der
     eigene Touch-Handler (idxFromTouch) übernimmt das Ziehen komplett. */
  touch-action: none;
}
#timeslider .mts-range { touch-action: none; }

/* Hintergrund-Schiene (transparent-hell auf Petrol) */
#timeslider .mts-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}
/* Gefuellter Progress (links vom Thumb) */
#timeslider .mts-track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mts-accent), var(--mts-accent-soft));
  width: var(--mts-progress, 0%);
  pointer-events: none;
  transition: width .12s ease;
}

#timeslider .mts-range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 14px;
  margin: 0;
  padding: 0;
  background: transparent;
  outline: none;
}
#timeslider .mts-range::-webkit-slider-runnable-track { background: transparent; height: 4px; border-radius: 999px; }
#timeslider .mts-range::-moz-range-track             { background: transparent; height: 4px; border-radius: 999px; }
/* Native Thumb (Library kuemmert sich selbst um Position) */
/* Thumb (Kreis) in voller Akzent-Orange — auf dunklem Tray-Background hob
   sich der vorherige weiße Kreis im Dark-Mode nicht gut ab. */
#timeslider .mts-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--mts-accent);
  border: 2px solid var(--mts-accent-2);
  box-shadow: 0 0 0 4px var(--mts-accent-soft), 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
}
#timeslider .mts-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mts-accent);
  border: 2px solid var(--mts-accent-2);
  box-shadow: 0 0 0 4px var(--mts-accent-soft), 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
}

/* ===== Now-Marker (A-Element) ===== */
#timeslider .mts-now {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--mts-accent);
  border-radius: 2px;
  left: var(--mts-now, 0%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
#timeslider .mts-now::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--mts-accent);
  box-shadow: 0 0 0 0 var(--mts-accent-glow);
  animation: mts-now-pulse 2.4s ease-out infinite;
}
@keyframes mts-now-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(244, 169, 50, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(244, 169, 50, 0); }
  100% { box-shadow: 0 0 0 0   rgba(244, 169, 50, 0); }
}

/* ===== Bubble (zweizeilig: Wochentag + Uhrzeit) ===== */
#timeslider .mts-bubble {
  position: absolute;
  top: -24px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  min-width: 80px;
  min-height: 22px;
  padding: 5px 10px;
  border-radius: 999px;
  /* Bubble in Akzent-Orange — Datum/Uhrzeit knallig vom dunklen Map-Hintergrund. */
  background: linear-gradient(180deg, var(--mts-accent), var(--mts-accent-2));
  color: #fff;
  text-align: center;
  justify-content: center;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .02em;
  box-shadow:
    0 6px 14px rgba(4, 39, 58, .35),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}
#timeslider .mts-bubble:active { cursor: grabbing; }
#timeslider .mts-bubble::after { display: none; }

/* Einzeilig: "MI 21.05 · 14 MESZ" — alles in weiß, Trenner leicht gedimmt */
#timeslider .mts-bubble-day {
  color: #fff;
  margin-right: 4px;
  letter-spacing: .08em;
}
#timeslider .mts-bubble-sep {
  color: rgba(255, 255, 255, .45);
  margin: 0 5px;
}
#timeslider .mts-bubble-time {
  color: #fff;
}

/* LIVE-Badge an der Bubble (B-Element) */
#timeslider .mts-bubble-live {
  display: none;
  position: absolute;
  top: -6px; right: -8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--mts-alt);
  color: #fff;
  font: 800 8px/1.4 var(--font-sans);
  letter-spacing: .12em;
  box-shadow: 0 3px 8px rgba(225, 29, 116, .45);
  pointer-events: none;
}
#timeslider .mts-bubble.is-live .mts-bubble-live { display: inline-block; }

/* ===== Tray: Ticks + Day-Chips ===== */
/* ===== Ticks (klassisch: alle unter dem Track) ===== */
#timeslider .mts-trackcol { position: relative; }

/* Tray (Day-Labels + Ticks) — selbes Petrol-Gradient wie .map-btn und das
   Modell-Select-Dropdown. Solid (kein Glass) damit es bündig zur restlichen
   UI passt. */
#timeslider .mts-tray {
  position: relative;
  margin-top: 0;
  padding: 2px 8px 5px;
  border-radius: 10px;
  background: var(--map-control-bg);
  backdrop-filter: var(--map-control-blur);
  -webkit-backdrop-filter: var(--map-control-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 6px 14px rgba(4, 39, 58, .28);
}

#timeslider .mts-ticks {
  position: relative;
  height: 10px;
}
#timeslider .mts-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background: rgba(255, 255, 255, .38);
  opacity: 1;
}
#timeslider .mts-tick--hour { height: 6px; background: rgba(255, 255, 255, .58); }
#timeslider .mts-tick--6h  { height: 8px; background: rgba(255, 255, 255, .78); opacity: 1; }
#timeslider .mts-tick--day { height: 9px; background: var(--mts-accent); opacity: .9; }

/* Prognose-Slider: Stunden-Ticks etwas zuruecknehmen — sie standen zu kraeftig.
   Radar/Observation (ohne .is-model) bleiben unveraendert kraeftig, dort helfen
   die 15-Minuten-Striche. Der Tageswechsel-Tick bleibt in beiden Faellen gleich. */
#timeslider .mts-ticks.is-model .mts-tick      { height: 4px; background: rgba(255, 255, 255, .24); }
#timeslider .mts-ticks.is-model .mts-tick--hour { height: 5px; background: rgba(255, 255, 255, .20); }
#timeslider .mts-ticks.is-model .mts-tick--6h  { height: 7px; background: rgba(255, 255, 255, .62); }
/* Neuer Tag bleibt auch im Prognose-Slider ORANGE (Akzent) — die is-model-Basis-
   regel (weiß) ist gleich spezifisch und kam später, hatte also Farbe UND Höhe
   des Tages-Ticks überschrieben. Hier wiederhergestellt. */
#timeslider .mts-ticks.is-model .mts-tick--day { height: 9px; background: var(--mts-accent); opacity: .9; }

/* ===== Day-Labels (ohne eigenen Pill-BG — Panel ist dunkel genug) =====
   Aktiver Tag bleibt in Orange (das mochtest du). */
#timeslider .mts-daylabels {
  position: relative;
  height: 14px;
  margin-top: 2px;
}
/* Label als BLOCK ueber einem Tagessegment (left+width via JS).
   text-align: center zentriert den Text. Bei zu schmalem Segment
   schaltet das Wrapper-JS auf eine Kurzform um (z.B. "Mo" statt "Mo., 25.")
   — keine Ellipsis-Punkte mehr. */
#timeslider .mts-daylabel {
  position: absolute;
  text-align: center;
  box-sizing: border-box;
  padding: 0 4px;
  font: 700 10px/1 var(--font-sans);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  white-space: nowrap;
  overflow: hidden;          /* nur falls Kurzform doch noch zu breit */
  cursor: pointer;
  transition: color .18s ease;
}
#timeslider .mts-daylabel:hover     { color: #fff; }
#timeslider .mts-daylabel.is-current { color: var(--mts-accent); }

/* ===== Hover-Linie + Tooltip (CSS-only Update) ===== */
#timeslider .mts-hover {
  position: absolute;
  bottom: 0; top: 0;
  width: 1px;
  background: rgba(255, 255, 255, .42);
  pointer-events: none;
  transform: translateX(-0.5px);
}
#timeslider .mts-hover-tip {
  position: absolute;
  bottom: 100%;
  transform: translate(-50%, -6px);
  padding: 5px 9px;
  border-radius: 999px;
  font: 600 11px/1.1 var(--font-sans);
  color: #fff;
  background: var(--mts-bg-strong);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--mts-stroke);
  white-space: nowrap;
  pointer-events: none;
}
#timeslider .mts-hover-tip::after { display: none; }

/* internes Select & Info-Zeile verstecken (Modell-Wechsel liegt woanders) */
#timeslider .mts-wrap .mts-model { display: none !important; }
#timeslider .mts-wrap .mts-info  { display: none !important; }

/* ===== Mobile Tape-Modus (<=720px, gesetzt via .is-tape Klasse von JS) =====
   iOS-Picker-Style: Bubble fest in der Mitte, Tape (Ticks + Day-Labels) scrollt
   horizontal drunter weg. Native Range/Thumb/Progress/Buttons werden hidden. */
#timeslider.is-tape .mts-left,
#timeslider.is-tape .mts-thumb-custom,
#timeslider.is-tape .mts-hover,
#timeslider.is-tape .mts-hover-tip { display: none !important; }

#timeslider.is-tape .mts-range,
#timeslider.is-tape .mts-track::before,
#timeslider.is-tape .mts-track::after { display: none; }

#timeslider.is-tape .mts-wrap   { padding: 0; max-width: 100%; }
#timeslider.is-tape .mts-row    { grid-template-columns: 1fr; gap: 0; }
#timeslider.is-tape .mts-track  { height: 28px; margin: 0; }

/* Bubble: fest in der Mitte oberhalb des Tape */
#timeslider.is-tape .mts-bubble {
  position: absolute;
  left: 50% !important;
  top: 0;
  transform: translateX(-50%) !important;
  cursor: pointer;
  z-index: 25;
}

/* Tape = der scrollbare Tray */
#timeslider.is-tape .mts-tray {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 6px;
  margin-top: 4px;
  border-radius: 0;
  /* Selbes Petrol-Gradient wie .map-btn, konsistent zum Desktop-Tray */
  background: var(--map-control-bg);
}
#timeslider.is-tape .mts-tray::-webkit-scrollbar { display: none; }

/* Center-Indikator (vertikaler Strich unter der Bubble) */
#timeslider.is-tape .mts-trackcol {
  position: relative;
}
#timeslider.is-tape .mts-trackcol::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 28px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--mts-accent);
  pointer-events: none;
  z-index: 24;
  box-shadow: 0 0 6px rgba(244, 169, 50, .55);
}

/* Ticks + Labels: containers nehmen die berechnete Tape-Breite an */
#timeslider.is-tape .mts-ticks,
#timeslider.is-tape .mts-daylabels {
  width: var(--tape-width, 100%);
  position: relative;
}

/* Day-Label-Override fuer Tape: kein Block-Width, punktgenau bei lokaler Mittagszeit */
#timeslider.is-tape .mts-daylabel {
  width: auto !important;
  transform: translateX(-50%);
  padding: 0;
}

@media (max-width: 360px) {
  #timeslider.is-tape .mts-bubble { font-size: 10.5px; min-width: 70px; padding: 4px 8px; }
}

/* ===== Prognose-Bereich der Zeitleiste (Nowcast) =====
   Radar und Satellit hängen an ihre Messreihe fortgeschriebene Bilder an. Ohne
   sichtbare Grenze hält man die für Aufnahmen — deshalb ein eigenes Band ab dem
   ersten Vorhersage-Zeitpunkt bis zum Ende, plus der Zusatz „· Prognose" an der
   Zeitanzeige, sobald der Schieber dort steht.
   Gesetzt von meteotimeslider.js (prognoseAbISO je Modell). */
#timeslider .mts-prognose {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;                      /* unter die Marken, nicht darüber */
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      rgba(244, 169, 50, .16) 0 6px,
      rgba(244, 169, 50, .06) 6px 12px);
  border-left: 2px solid rgba(244, 169, 50, .70);
}

/* Zeitanzeige im Vorhersage-Bereich: Akzentrand statt anderer Schriftfarbe —
   die Blase steht auf wechselndem Untergrund, ein Farbwechsel wäre dort mal
   lesbar und mal nicht. */
#timeslider .mts-bubble.is-prognose {
  border: 1px solid rgba(244, 169, 50, .75);
  box-shadow: 0 0 0 2px rgba(244, 169, 50, .18);
}
/* Das Wort selbst — ACHTUNG: weiter oben steht `.mts-bubble::after{display:none}`,
   deshalb hier ausdruecklich wieder einschalten. */
#timeslider .mts-bubble.is-prognose::after {
  /* Text kommt aus dem data-Attribut (JS), NICHT fest hier: CSS-Inhalte sind
     keine Textknoten und werden von der Uebersetzungsschicht nicht erfasst —
     auf der englischen Seite stand sonst dauerhaft "Prognose". */
  content: "· " attr(data-prognose-txt);
  display: inline !important;
  margin-left: 6px;
  font-weight: 700;
  letter-spacing: .04em;
  /* Navy statt Orange: Orange auf Orange ergab Kontrast 1,00 (unsichtbar).
     Navy bringt 6,88 auf dem hellen und 5,05 auf dem dunklen Ende des
     Verlaufs — und ist dieselbe Kombination wie auf dem Premium-Knopf. */
  color: #083145;
}