/* =========================
   Neo-Ice UI – LäJuLa Map
   ========================= */

/* — Farb- & Radius-Token — */
:root{
  /* Ice-Gradient + Akzent (softe Softeis-Vibes) */
  --bg-1:#eef6ff; --bg-2:#fdf2f8;
  --bg-3:#f0f9ff; /* für Noise/Overlay */
  --text:#0f172a;
  --muted:#f3f4f6; --muted-hover:#e5e7eb;

  --panel:rgba(255,255,255,0.66);
  --panel-solid:#ffffff;
  --panel-hover:rgba(255,255,255,0.82);

  --accent:#6d28d9;         /* violet */
  --accent-2:#22d3ee;       /* cyan */
  --ring:0 0 0 3px rgba(109,40,217,.35);

  --radius-xl:18px; --radius:12px; --radius-sm:8px;
  --shadow:0 10px 40px rgba(2, 6, 23, .18);
  --shadow-sm:0 6px 18px rgba(2, 6, 23, .12);
  --border:1px solid rgba(2,6,23,.08);
}

/* — Dark Mode — */
@media (prefers-color-scheme: dark){
  :root{
    --bg-1:#0b1220; --bg-2:#1a1030; --bg-3:#0b1220;
    --text:#e5e7eb;
    --muted:#181a20; --muted-hover:#22252d;

    --panel:rgba(22, 24, 31, .6);
    --panel-solid:#12131a;
    --panel-hover:rgba(32, 36, 44, .72);

    --accent:#8b5cf6;
    --accent-2:#67e8f9;
    --ring:0 0 0 3px rgba(139,92,246,.4);

    --shadow:0 14px 44px rgba(0,0,0,.55);
    --shadow-sm:0 8px 24px rgba(0,0,0,.4);
    --border:1px solid rgba(255,255,255,.06);
  }
}

/* === Vollfläche: weicher Dual-Gradient + zarter Noise === */
html,body,#map{width:100%;height:100%;margin:0;padding:0}
html,body{
  overflow:hidden;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--bg-2), transparent 60%),
    radial-gradient(1400px 900px at 110% 10%, var(--bg-1), transparent 55%),
    linear-gradient(180deg, var(--bg-3), var(--bg-1));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Inter, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* dezent gekörntes Overlay */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .05 0'/></feComponentTransfer></filter>\
<rect width='100%' height='100%' filter='url(%23n)'/>\
</svg>");
  opacity:.25;
  mix-blend-mode:overlay;
}

/* === Touch-Zielgröße === */
@media (pointer:coarse){
  button,[role="button"]{min-height:44px}
}

/* === Burger-Button (Glass + Glow) === */
#burgerBtn{
  position:absolute; top:1rem; left:1rem; z-index:1001;
  border:none; font-size:1.15rem; line-height:1;
  padding:.7rem .9rem; border-radius:var(--radius);
  background:var(--panel);
  backdrop-filter:saturate(130%) blur(10px);
  -webkit-backdrop-filter:saturate(130%) blur(10px);
  box-shadow:var(--shadow-sm);
  border:var(--border);
  color:var(--text); cursor:pointer;
  transition:transform .12s ease, background .18s ease, box-shadow .2s ease;
}
#burgerBtn:hover{ background:var(--panel-hover); box-shadow:var(--shadow) }
#burgerBtn:active{ transform:translateY(1px) scale(.98) }
#burgerBtn:focus-visible{ outline:none; box-shadow:var(--ring) }

/* === Sidebar (Frosted Card) === */
#sidebar{
  position:absolute; top:3.5rem; left:1rem; z-index:1000;
  width:360px; max-width:calc(100% - 2rem);
  background:var(--panel);
  border:var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  max-height:calc(100% - 4.5rem);
  display:grid; grid-auto-rows:min-content; gap:.5rem;
  padding:.75rem;
  opacity:0; transform:translateY(-6px) scale(.985);
  transform-origin:top left;
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none; overflow:hidden;
}
#sidebar.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }

/* Mobile: Sheet-Zentrierung */
@media (max-width:640px){
  #sidebar{ left:.5rem; right:.5rem; width:auto; border-radius:16px }
}

/* === Optionaler Sidebar-Header (falls du später einen einfügst) === */
#sidebar .header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.35rem .5rem .15rem; gap:.5rem;
}
#sidebar .header h2{
  font-size:.95rem; font-weight:700; margin:0;
  letter-spacing:.2px;
}

/* === Marker-Liste als „Cards“ === */
#marker-list{
  list-style:none; padding:.35rem; margin:0;
  overflow-y:auto; overscroll-behavior:contain;
  scroll-padding:10px;
}
#marker-list li{
  position:relative;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem;
  padding:.8rem .85rem;
  background:linear-gradient(180deg, var(--panel-solid), var(--panel-hover));
  border-radius:14px;
  border:var(--border);
  box-shadow:var(--shadow-sm);
  cursor:pointer; user-select:none;
  transition:transform .12s ease, box-shadow .18s ease, opacity .2s ease;
}
#marker-list li + li{ margin-top:.6rem }
#marker-list li:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
#marker-list li:active{ transform:translateY(0) scale(.995) }
#marker-list li:focus-visible{ outline:none; box-shadow:var(--ring) }
#marker-list li.active{
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--panel-solid), var(--panel-hover));
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}

/* kleine Status-Pill rechts (optional .pill) */
#marker-list li .pill{
  font-size:.72rem; line-height:1; padding:.4rem .55rem;
  border-radius:999px;
  background:color-mix(in oklab, var(--accent) 12%, var(--panel-solid));
  border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  box-shadow:inset 0 0 12px rgba(0,0,0,.04);
}

/* Scrollbar */
#sidebar::-webkit-scrollbar, #marker-list::-webkit-scrollbar{ width:12px }
#sidebar::-webkit-scrollbar-thumb, #marker-list::-webkit-scrollbar-thumb{
  background:rgba(2,6,23,.22); border-radius:999px; border:3px solid transparent; background-clip:content-box;
}

/* === Share-Button & Toast (falls genutzt) === */
#shareLinkBtn{
  position:absolute; top:1rem; right:1rem; z-index:1001;
  padding:.65rem .8rem; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; border:none; cursor:pointer; font-weight:600;
  box-shadow:var(--shadow-sm);
  transition:filter .15s ease, transform .12s ease;
}
#shareLinkBtn:hover{ filter:saturate(110%) brightness(1.03) }
#shareLinkBtn:active{ transform:translateY(1px) }
#shareLinkBtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(34,211,238,.5) }

#shareToast{
  background:rgba(15,23,42,.9); color:#fff;
  padding:.45rem .65rem; border-radius:10px;
  box-shadow:var(--shadow-sm); border:1px solid rgba(255,255,255,.08);
}

/* === Leaflet: Controls & Popup veredeln === */
.leaflet-control-zoom {
  display: none !important;
}

.leaflet-bar a, .leaflet-control-layers-toggle{
  transition:transform .12s ease, background .15s ease;
}
.leaflet-bar a:active{ transform:translateY(1px) }

.leaflet-control-layers{
  background:var(--panel)!important; border:var(--border)!important;
  border-radius:14px!important; box-shadow:var(--shadow-sm)!important;
  color:#fff!important; /* Layer Control Text */
}
.leaflet-control-layers label,
.leaflet-control-layers span {
  color:#fff!important;
}
.leaflet-control-layers input {
  accent-color:#fff;
}
.leaflet-control-layers-expanded{
  backdrop-filter:saturate(130%) blur(10px);
  -webkit-backdrop-filter:saturate(130%) blur(10px);
}

.leaflet-popup-content-wrapper{
  border-radius:16px; box-shadow:var(--shadow);
  background:var(--panel-solid); color:var(--text);
  border:var(--border);
}
.leaflet-popup-tip{ background:var(--panel-solid) }

/* Popup-Header-Linie (dezent, kein Ausfaden mehr) */
.leaflet-popup-content b{
  display:inline-block; margin-bottom:.25rem;
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:var(--text)!important;
}

/* === Standortmarker: glühender Pulse === */
.pulse-marker{
  width:20px; height:20px; border-radius:50%;
  position:relative;
  background:radial-gradient(circle at 30% 30%, #ff5c5c, red 65%);
  box-shadow:0 0 0 2px rgba(255,0,0,.25), 0 0 18px rgba(255,60,60,.55);
  animation:pulse 1.15s ease-in-out infinite;
  will-change:transform, opacity, box-shadow;
  border:none;
}
@keyframes pulse{
  0%{ transform:scale(.6); opacity:.95; box-shadow:0 0 0 0 rgba(255,0,0,.25), 0 0 14px rgba(255,60,60,.4)}
  100%{ transform:scale(1.1); opacity:.65; box-shadow:0 0 0 8px rgba(255,0,0,0), 0 0 26px rgba(255,60,60,.65)}
}

/* === Reduzierte Bewegung === */
@media (prefers-reduced-motion: reduce){
  #sidebar,#burgerBtn,#shareLinkBtn,.leaflet-bar a{ transition:none!important }
  .pulse-marker{ animation:none }
}

/* === High Contrast / Forced Colors === */
@media (forced-colors:active){
  #burgerBtn,#sidebar,#marker-list li,.leaflet-popup-content-wrapper,
  .leaflet-control-zoom a,.leaflet-control-layers{
    forced-color-adjust:none;
    background:Canvas; color:CanvasText; border:1px solid CanvasText; box-shadow:none;
  }
  #marker-list li.active{ outline:2px solid Highlight }
  #burgerBtn:focus-visible,#marker-list li:focus-visible{ outline:2px solid Highlight; outline-offset:2px }
}

/* === Kleinigkeiten === */
.leaflet-container a{ color:var(--accent) }
.leaflet-container a:hover{ text-decoration:underline }

/* Für deine JS-States */
#marker-list li.active::after{
  content:"";
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:999px;
  background:radial-gradient(circle, var(--accent-2), var(--accent));
  box-shadow:0 0 14px color-mix(in oklab, var(--accent) 60%, transparent);
}