/* 
 * desktop.css 
 */

/* html { font-size: 20px; }
html, body, #map {
  height: 100%; 		
  width: 100vw;
  margin: 0; 	
  padding: 0;
  font-family: "Tahoma, sans-serif";
  font: normal 16px/normal Tahoma, Geneva, sans-serif;
  font-size: 1em; 
  letter-spacing: -0.5px;
  color: rgba(0,0,127,1);
  background-color: black;
}

input, select { font-size: 1.3em;
  letter-spacing: -0.5px;
  display: inline-block;
  color: rgba(0,0,127,1);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 3px 0 3px 12px;
  border: 1px solid rgba(0,0,127,1);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(255,255,255,0.67);
  min-width: 2rem;
  min-height: 2rem;
}

select { font-size: 1.2em; 
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}

.right {
  font-size: 1em;
  text-align: right;
  padding: 4px 3px 2px 12px;
}
.center {
  font-size: 1em;
  text-align: center;
  padding: 3px 0 3px 3px;
}

#searchtext { display:none; }

.selector {
  background-color: rgba(255,255,0,0);
  opacity: 100%;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 650;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.status, .description {
  width: 100%;
  text-align: center;
  font-size: 0.7em;
  margin: 3px 0px 3px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.popup h1 { font-size: 1.2em; text-align: center; color: blue;}
.popup td { font-size: 0.8em; }
.popup input { padding: 3px; text-align:center; font-size: 1em; }
.icon-blue {filter: invert(14%) sepia(80%) saturate(5900%) hue-rotate(234deg) brightness(87%) contrast(82%);}

*/


/* ===========================
   glass.css — Liquid Glass UI
   =========================== */

/* ---- Tokens / Theme Vars ---- */
:root {
  --glass-blur: 6px;
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.40);
  --glass-shadow: rgba(0, 0, 0, 0.25);
  --glass-radius: 16px;

  --fg: #111;          /* Textfarbe helles Theme */
  --fg-soft: #344;     /* sekundär/placeholder */
  --fg-on-glass: #111; /* Text auf hellen Glasflächen */
  --accent: 255,110,72;/* RGB Triplet für Primary-Buttons (optional) */

  --ctl-h: 36px; --ctl-h-m: 34px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-blur: 6px;
    --glass-bg: rgba(18, 22, 32, 0.45);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-shadow: rgba(0, 0, 0, 0.60);

    --fg: #eef3ff;
    --fg-soft: #b6c2db;
    --fg-on-glass: #fff;
  }
}

[data-theme="dark"] {
  --glass-bg: rgba(18, 22, 32, 0.45);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: rgba(0, 0, 0, 0.60);

  --fg: #eef3ff;
  --fg-soft: #b6c2db;
  --fg-on-glass: #fff;
}

/* ---- Base / Reset (nur Relevantes) ---- */
html {
  font-size: 18px;
  font-family: Tahoma, Geneva, sans-serif;
  color: var(--fg);
}
html, body, #map {
  height: 100%;
  width: 100vw;
  margin: 0;
  padding: 0;
}

html { font-size: 18px; }
#selector { font-size: 0.9rem; }

@media (max-width: 600px) {
  html { font-size: 16px; }
  #selector { font-size: 0.85rem; }
}

/* Versteckte Felder */
#colorby { display: none; }
#heatradius { display: none; }

/* ---- Glass Utility ---- */
/* .glass {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: 0 4px 20px var(--glass-shadow);
} */



 /* from Lab */

  #lab{
    position:fixed; left:12px; top:80px; z-index:3200;
    width:min(340px, 92vw); padding:10px 12px;
  }
  .glass{
    position:relative; border-radius:var(--glass-radius);
    background:var(--glass-bg); border:1px solid var(--glass-border);
    box-shadow:0 10px 30px var(--glass-shadow); color:var(--fg);
    overflow:hidden; isolation:isolate;
    --lens-blur: 2px;          /* deine Präferenz: 4–6 */
    --lens-sat:  1;          /* 0.8 */
    --lens-bri:  1;          /* 0.8 */
  }
  .row{display:grid; grid-template-columns:130px 1fr auto; gap:8px; align-items:center; margin:6px 0}
  input[type="range"]{width:100%}
  small.val{font-variant-numeric:tabular-nums; opacity:.7}
  select,button{font:14px/1 system-ui; padding:6px 8px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.55)}

  /* ===== Liquid Lens Layer via Pseudo-Element ===== */
  .glass.lens::before,
  .glass.lens::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  }
  .glass.lens::before{
    /* Regler steuern diese Variablen */

    backdrop-filter: blur(var(--lens-blur));
    -webkit-backdrop-filter: blur(var(--lens-blur));
    filter: url(#lensDyn) saturate(var(--lens-sat)) brightness(var(--lens-bri));
  }
  .glass.lens::after{
    background:
      linear-gradient(125deg, rgba(255,255,255,.28),
                               rgba(255,255,255,.08) 35%,
                               rgba(255,255,255,0) 60%);
    box-shadow:
      inset 1px 1px 0 var(--glass-border),
      inset 0 0 8px rgba(255,255,255,.25);
  }
  .glass > *{ position:relative; z-index:1 }

  /* Zoom/Layers gläsern machen (optional) */
  .leaflet-control { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
  .leaflet-control a { background: rgba(255,255,255,.5); border-radius:8px; }

 /* end from Lab */


/* ---- Selector Panel (Overlay) ---- */
.selector {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 96vw); /* auf großen Screens nicht zu breit */
  margin: 0;
  padding: 6px 8px;                   /* kompakter */
  text-align: center;
  z-index: 3000;
  opacity: 1;

  display: flex;
  flex-wrap: wrap;                    /* bricht auf kleinen Screens um */
  align-items: center;                /* vertikal mittig */
  justify-content: center;           /* mittig anordnen */
  gap: 6px 8px;                      /* kompakter Abstand */
  line-height: 1.2;
}
/* safety: auch ohne .glass-Klasse verglasen
#selector {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: 0 4px 20px var(--glass-shadow);
}  */

/* ---- Form Controls im Selector ---- */
#selector input,
#selector select,
#selector button,
#selector label.custom-file-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctl-h);          /* exakt gleiche Höhe für alle */
  padding: 0 10px;               /* vertikal 0 -> exakte Höhe */
  line-height: 1;                /* kein „Hochstehen“ */
  margin: 0;                     /* Abstände über .selector gap */

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;

  backdrop-filter: blur(calc(var(--glass-blur) * 0.7));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.7));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 2px 6px rgba(0,0,0,0.15);

  font-size: 0.85rem;
  color: var(--fg-on-glass);
}
#selector input::placeholder { color: var(--fg-soft); }

#selector button {
  padding: 0 12px;                    /* gleichmäßige Breite */
  font-weight: 600;
  cursor: pointer;
  min-width: 40px; font-weight: 600;
}
#selector button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1000px rgba(255,255,255,0.06),
    0 1px 4px rgba(0,0,0,0.22);
}

/* Inputs noch etwas schmaler auf dem Phone, Picker-Icons kompakter */
@media (max-width: 600px) {
  :root { --ctl-h: var(--ctl-h-m); --glass-blur: 10px; }  /* etwas flacher auf Phone */

  .selector {
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom)); /* Notch-Safe */
    left: 50%;
    transform: translateX(-50%);
    width: 96vw;
    gap: 6px;             /* kompaktere Abstände */
    padding: 6px 8px;
  }

  #selector input,
  #selector select,
  #selector button,
  #selector label.custom-file-upload {
    height: var(--ctl-h-m);
    padding: 0 8px;
    font-size: 0.85rem;
  }
  /* iOS Safari: Date/Time-Picker kompakter */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
  }
}


/* ---- Popup-Typografie (unverändert, nur minimal poliert) ---- */
.popupheading {
  color: blue;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}
.popupbigbull { font-size: 4em; display: inline; vertical-align: middle; line-height: 0.1; }
.popupsmallbull { font-size: 3em; display: inline; vertical-align: middle; line-height: 0.1; }
.popupvalue { text-align: center; margin-top: 0.8em; margin-bottom: 1.0em; }
.popupminmax { font-size: 0.9em; display: inline; }
.popupdate { font-size: 0.7em; text-align: right; margin-top: .8em; }

/* Popup-Rahmen verglasen */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
   backdrop-filter: blur(var(--glass-blur)) saturate(1);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: 0 4px 20px var(--glass-shadow);
  color: var(--fg-on-glass);
}

/* Popup-Text einheitlich */
.leaflet-popup-content {
  margin: 8px 12px;
  font-size: 0.9rem;
  color: var(--fg-on-glass);
}

/* Heading stärker betonen */
.popupheading {
  color: blue;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.6em;
  font-size: 1.1rem;
}


/* ---- Fallback ohne Backdrop-Filter ---- */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .glass,
  #selector,
  #selector input,
  #selector select,
  #selector button,
  .leaflet-control-playback {
    background: rgba(40, 40, 40, 0.85);
  }
}



/* ====== Leaflet Default Controls verglasen ====== */
.leaflet-control {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--glass-shadow) !important;
  overflow: hidden; /* rund sauber abschneiden */
}

/* Buttons innerhalb der Controls */
.leaflet-control-zoom a,
.leaflet-control-layers a {
  background: transparent; /* Leaflet setzt sonst weiß */
  color: var(--fg-on-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-bottom: 1px solid var(--glass-border);
}
.leaflet-control a:last-child { border-bottom: none; }

/* Hover/Active */
.leaflet-control a:hover {
  background: rgba(255,255,255,0.2);
}
.leaflet-control a:active {
  background: rgba(255,255,255,0.3);
}

/* Layer switcher (checkboxen & labels) */
.leaflet-control-layers {
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--fg-on-glass);
}
.leaflet-control-layers input,
.leaflet-control-layers label {
  vertical-align: middle;
}

/* Verhindert das Kacheln im Layer-Button */
.leaflet-control-layers-toggle {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 60% 60% !important; /* oder 'contain' */
}
/* Standard: Controls unter dem Selector halten */
.leaflet-top,
.leaflet-bottom { z-index: 1500 !important; }

/* Wenn die Layer-Control geöffnet ist, Container darüber heben */
.leaflet-control-container:has(.leaflet-control-layers-expanded) {
  z-index: 4000 !important;
}

/* Falls du es gezielter nur für die obere Leiste willst: */
.leaflet-top:has(.leaflet-control-layers-expanded) {
  z-index: 4000 !important;
}

/* Die eigentliche Liste darf ruhig auch eine eigene Position/Z-Index haben */
.leaflet-control-layers-expanded {
  position: relative; /* wichtig, damit z-index greift */
  z-index: 1;
}
/* rechte Control-Spalte über #selector (der hat ~3000) */
.leaflet-top.leaflet-right { z-index: 3500 !important; }
/* linke Spalte kann darunter bleiben */
.leaflet-top.leaflet-left { z-index: 1500 !important; }

/* Pane über #selector (3000) und über Controls (3500 je nach Setup) */
.leaflet-tooltip-pane { z-index: 3600; }

/* Glas-Tooltip */
.leaflet-tooltip {
  backdrop-filter: blur(var(--glass-blur)) saturate(1);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 4px 14px var(--glass-shadow);
  color: var(--fg-on-glass);
  padding: 6px 8px;
  line-height: 1.2;
  background-clip: padding-box;      /* saubere Ränder */
  pointer-events: none;               /* Standard-Tooltip-Verhalten */
}

/* Dein SVG passt sich ein – keine Sprünge */
.leaflet-tooltip svg { display: block; }

/* Pfeil/Triangle in Glas-Optik (Leaflet hat :before-Arrow) */
.leaflet-tooltip-left:before   { border-right-color: var(--glass-bg); }
.leaflet-tooltip-right:before  { border-left-color:  var(--glass-bg); }
.leaflet-tooltip-top:before    { border-bottom-color:var(--glass-bg); }
.leaflet-tooltip-bottom:before { border-top-color:   var(--glass-bg); }

/* Optional: „Border“ für den Pfeil simulieren (dezent) */
.leaflet-tooltip:before { filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.25)); }

/* Mobile: etwas weniger Blur für Performance */
@media (max-width: 600px) {
  .leaflet-tooltip { backdrop-filter: blur(6px) saturate(1); -webkit-backdrop-filter: blur(6px) saturate(1); }
}