/* ==========================================================================
   Opacity-Control – vertikaler Transparenz-Slider oben links.

   Positionierung: direkt unter den Leaflet-Zoom-Buttons.
   Breite und left identisch zu .leaflet-top.leaflet-left (34px, left: 10px)
   damit der Slider exakt mit den +/- Buttons fluchtet.

   Vertikalisierung via writing-mode: vertical-lr + direction: rtl –
   moderne Cross-Browser-Methode (Chrome ab Apr 2024, Firefox ab Nov 2023).
   Kein transform:rotate, kein orient-Attribut nötig.

   Nach der Drehung durch writing-mode gilt je nach Browser unterschiedlich
   für die Pseudo-Elemente:

   Firefox (-moz-):
     Pseudo-Elemente folgen der writing-mode-Transformation des Host-Elements.
     width  = visuelle Länge (lange Achse), height = Track-Dicke (kurze Achse).
     Der Browser wendet auf -moz-range-track intern nochmal eine Rotation an –
     korrigiert per @supports (-moz-appearance: none) { transform: rotate(90deg) }.

     Thumb-Reiseweg: Firefox berechnet ihn als (width − thumbDiameter). Daher ist
     width am Input 4px kleiner als height (106px vs. 110px) – gibt dem Thumb je
     ~2px Puffer an beiden Enden. Chrome wertet width für den Reiseweg nicht aus.

     Track-Durchschein: Firefox rendert den Track hinter dem Thumb ohne
     z-index-Kontrolle. Gelöst durch zwei-stufige Färbung:
     ::-moz-range-track      = color-accent-dim (voller Track, oberer Teil sichtbar)
     ::-moz-range-progress   = color-accent     (unterer/befüllter Teil kräftiger)
     Der Thumb überlagert den Track optisch – kein Durchschein mehr sichtbar.

     Hover-Propagation: Firefox reicht :hover vom Parent nicht an Pseudo-Elemente
     weiter. Alle Hover-Regeln nutzen daher :hover direkt auf dem Input.

   Chrome (-webkit-):
     Pseudo-Elemente leben im internen Shadow-DOM VOR der writing-mode-
     Transformation -- sie sehen die Achsen noch ungedreht:
     height = Länge entlang der Slider-Achse, width = Track-Dicke.
     Thumb-Zentrierung: margin-inline-start (Querachse im Shadow-DOM).
     Zwei-stufige Färbung via --slider-fill (CSS Custom Property, per JS gesetzt):
     linear-gradient(to top, color-accent 0%→fill, color-accent-dim fill→100%).
     Webkit kennt kein ::-webkit-slider-progress – daher JS-gestützter Trick.

   direction: rtl sorgt für intuitive Richtung:
     oben  = 100% (mehr sichtbar)
     unten =   0% (unsichtbar)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Äußerer Container – absolut positioniert unter den Zoom-Buttons
   -------------------------------------------------------------------------- */
#opacity-control {
  position: absolute;
  top: 83px;      /* Leaflet-Zoom-Buttons enden ca. bei 76px */
  left: 10px;     /* identisch zu .leaflet-top.leaflet-left */
  width: 34px;    /* identisch zur Breite der Leaflet +/- Buttons */
  z-index: 1000;  /* Leaflet-Control-Layer */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}


/* --------------------------------------------------------------------------
   Tooltip-Pill – erscheint bei Hover / Focus über dem Wrapper
   -------------------------------------------------------------------------- */
#opacity-tooltip {
  min-width: 42px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Standard: unsichtbar; bei Interaktion eingeblendet */
  opacity: 0;
  transition: opacity var(--transition-fast);
}

#opacity-control:hover #opacity-tooltip,
#opacity-control:focus-within #opacity-tooltip,
#opacity-control.opacity-keyboard-active #opacity-tooltip {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Wrapper-Kapsel – Glassmorphism-Hülle wie #theme-toggle
   -------------------------------------------------------------------------- */
#opacity-slider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md);

  /* Breite exakt wie Leaflet +/- Buttons */
  width: 34px;
  /* Höhe = Slider-Länge + vertikales Padding */
  height: calc(110px + var(--space-4));
  padding: var(--space-2) 0;
}


/* --------------------------------------------------------------------------
   Slider – cross-browser vertikal via writing-mode
   -------------------------------------------------------------------------- */
#opacity-slider {
  padding-block: 4px;
  -webkit-appearance: none;
  appearance: none;

  /* Vertikalisierung: writing-mode dreht die Interaktionsachse.
     direction: rtl = oben ist der Maximalwert (100%). */
  writing-mode: vertical-lr;
  direction: rtl;

  /* Jeder Browser liest die für ihn relevante Achse:
     Chrome:  height = visuelle Länge (Shadow-DOM, vor writing-mode), ignoriert width.
     Firefox: width  = visuelle Länge (nach Transformation), ignoriert height.
     width: 106px statt 110px – bewusste Differenz für Firefox:
     Reiseweg = width − thumbDiameter = 106 − 16 = 90px, verteilt ~2px Puffer
     je Ende. Chrome bleibt unberührt da es width nicht für den Reiseweg nutzt. */
  width: 106px;
  height: 110px;

  background: transparent;
  outline: none;
  cursor: pointer;
}


/* --- Track – Chrome / Safari ----------------------------------------------- */
#opacity-slider::-webkit-slider-runnable-track {
  /* Webkit Shadow-DOM liegt VOR der writing-mode-Transformation:
     height = Länge entlang der Slider-Achse, width = Track-Dicke (quer).
     106px statt 110px: Track etwas kürzer als der Input, damit der Thumb
     optisch bündig mit den Enden des sichtbaren Tracks abschließt.

     Zwei-stufige Färbung via --slider-fill (per JS auf dem Input gesetzt):
     Gradient läuft to top (0% unten → 100% oben, passend zu direction:rtl).
     Trennpunkt = --slider-fill → unterer Teil kräftig, oberer Teil dim.
     Fallback 80% für den seltenen Fall dass JS noch nicht gelaufen ist. */
  height: 106px;
  width: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to top,
    var(--color-accent)     var(--slider-fill, 80%),
    var(--color-accent-dim) var(--slider-fill, 80%)
  );
}

#opacity-control:hover #opacity-slider::-webkit-slider-runnable-track {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-accent)     85%, var(--color-accent-glow)) var(--slider-fill, 80%),
    color-mix(in srgb, var(--color-accent-dim) 70%, var(--color-accent))      var(--slider-fill, 80%)
  );
}

/* --- Thumb – Chrome / Safari ----------------------------------------------- */
#opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  /* translate() wirkt im visuellen Koordinatensystem NACH der writing-mode-
   Transformation -- Shadow-DOM-Achsen spielen keine Rolle.
   Formel: -(thumbSize - trackWidth) / 2 = -(16 - 4) / 2 = -6px */
  translate: -6px 0;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px var(--color-accent-glow);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  scale: 1.25;
}

#opacity-slider::-webkit-slider-thumb:hover,
#opacity-control:hover #opacity-slider::-webkit-slider-thumb {
  transform: scale(1.25);
  box-shadow: 0 0 14px var(--color-accent-glow);
}


/* --- Track – Firefox ------------------------------------------------------- */
#opacity-slider::-moz-range-track {
  /* Firefox folgt der writing-mode-Transformation des Host-Elements:
     width = Länge entlang der Slider-Achse, height = Track-Dicke (quer).
     Sichtbar mit color-accent-dim – zeigt den oberen (leeren) Teil des Tracks.
     ::-moz-range-progress überlagert den unteren (befüllten) Teil kräftiger. */
  width: 110px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-accent-dim);
}

#opacity-slider::-moz-range-progress {
  /* Firefox-exklusiv: befüllter Anteil (0% bis Thumb-Position) kräftiger als
     der leere Teil darüber. Webkit kennt kein Äquivalent. */
  background: var(--color-accent);
  border-radius: var(--radius-full);
  height: 4px;
}

/* Firefox wendet auf -moz-range-track intern nochmal eine Rotation an.
   @supports (-moz-appearance: none) trifft ausschliesslich Firefox --
   kein anderer Browser versteht -moz-appearance.
   transform: rotate(90deg) dreht den Track zurueck in die korrekte Lage. */
@supports (-moz-appearance: none) {
  #opacity-slider::-moz-range-track {
    transform: rotate(90deg);
  }
  #opacity-slider-wrap {
    /* Firefox-only (via @supports): Wrapper 106px statt 110px, passend zur
       verkürzten Input-width. Chrome sieht diesen Block nicht und behält
       calc(110px + var(--space-4)) aus dem normalen Regel-Block. */
    height: calc(106px + var(--space-4));
  }
}

/* Hover auf Track und Progress – Firefox.
   Firefox reicht :hover am Parent-Element NICHT an Pseudo-Elemente weiter.
   Deshalb: :hover direkt auf dem Input-Element selbst als Selektor. */
#opacity-slider:hover::-moz-range-track,
#opacity-control:focus-within #opacity-slider::-moz-range-track {
  background: color-mix(in srgb, var(--color-accent-dim) 70%, var(--color-accent));
}

#opacity-slider:hover::-moz-range-progress,
#opacity-control:focus-within #opacity-slider::-moz-range-progress {
  background: color-mix(in srgb, var(--color-accent) 85%, var(--color-accent-glow));
}

/* --- Thumb – Firefox ------------------------------------------------------- */
#opacity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  /* Firefox zentriert den Thumb automatisch auf dem Track -- kein margin nötig. */
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px var(--color-accent-glow);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

#opacity-slider:hover::-moz-range-thumb,
#opacity-control:focus-within #opacity-slider::-moz-range-thumb,
#opacity-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 14px var(--color-accent-glow);
}


/* --------------------------------------------------------------------------
   Responsive – Portrait-Smartphones (≤ 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  #opacity-control {
    top: 79px;
    left: 10px;
    width: 32px;
  }

  #opacity-slider-wrap {
    width: 32px;
    height: calc(90px + var(--space-4));
  }

  @supports (-moz-appearance: none) {
    #opacity-slider-wrap {
      /* Firefox-only analog: 86px statt 90px. Chrome behält calc(90px + ...). */
      height: calc(86px + var(--space-4));
    }
  }

  #opacity-slider {
    /* Firefox liest width für den Reiseweg: 86px = 90px − 4px Puffer-Offset.
       Chrome liest height: 90px bleibt unverändert. */
    width: 86px;
    height: 90px;
  }

  /* Track-Länge im Responsive-Block anpassen. */
  #opacity-slider::-webkit-slider-runnable-track {
    height: 86px;  /* Chrome: height = Länge im Shadow-DOM */
  }

  #opacity-slider::-moz-range-track {
    width: 90px;
  }

  #opacity-tooltip {
    min-width: 39px;
  }
}