/* === Variablen === */
:root{
  --bg-0:#0b0f14; --bg-1:#0e1218;
  --panel-bg:rgba(20,20,20,.55); --panel-border:rgba(255,255,255,.18);
  --surface:#1e1f24; --text:#e8eaed; --muted:#9aa0a6;
  --accent:#11a579; --danger:#d64f45;

  /* Fernziel-Chips (dezente Slate-Töne) */
  --ext-chip-bg: rgba(46, 52, 60, .78);
  --ext-chip-bg-active:#5e7387;
  --ext-chip-text:#e6eef6;
  --ext-chip-text-active:#0e1318;
  --ext-chip-border:rgba(255,255,255,.16);
  --ext-chip-border-active:rgba(255,255,255,.28);
  --ext-chip-shadow:0 4px 10px rgba(0,0,0,.24);
  --ext-chip-shadow-active:0 6px 14px rgba(0,0,0,.28);

  /* Cheapest-Marker */
  --cheapest-dot:#172228;
  --cheapest-ring:rgba(23,34,40,.45);
}

/* === Grundlayout === */
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 800px at 15% 10%, #111823 0%, transparent 60%),
    radial-gradient(1200px 800px at 85% 0%, #0f1a22 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.app{ display:flex; flex-direction:column; min-height:100dvh; max-width:100vw; overflow-x:hidden }
header{ padding:14px 16px 8px }
h2{ margin:0; font-weight:800; letter-spacing:.2px }

/* === Panel === */
.panel{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:10px 12px; margin:0 12px 10px;
  background:var(--panel-bg); border:1px solid var(--panel-border);
  border-radius:14px; backdrop-filter:saturate(135%) blur(6px);
}
.panel label{ display:flex; align-items:center; gap:8px; font-weight:600; color:#d7dbe0 }
.panel-spacer{ flex:1 1 auto }

/* === Formular === */
select, input[type="text"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:#1b1e24; color:var(--text); outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
select:focus{ border-color:rgba(255,255,255,.28) }
select#external optgroup{
  color:#E3BE8A; font-style:italic; font-weight:700; opacity:.99;
}
select#external optgroup option{ color:var(--text); font-weight:500 }

/* === Referenz-Pill === */
.ref-pill{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:8px; padding:6px 10px; height:36px;
  border-radius:10px; white-space:nowrap;
  background:rgba(255,255,255,.08); color:#e8eaed;
  border:1px solid rgba(255,255,255,.15); font-size:13px;
}
.ref-pill b{ font-weight:800 }

/* === Donation === */
.don-btn img{ height:36px; width:auto; display:block }
@media (max-width: 740px){ .don-btn{ display:none } }

/* === Karte === */
#map{ flex:1 1 auto; min-height:420px; min-width:0; border-top:1px solid rgba(255,255,255,.06) }

/* === Leaflet Controls === */
.leaflet-top.leaflet-left{ left:clamp(8px,1.5vw,24px) }
.leaflet-left .leaflet-control{ margin-left:clamp(6px,1vw,14px) }
.leaflet-control-zoom{ border-radius:10px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,.3) }
.leaflet-control-zoom a{ background:#1f2127; color:#e8eaed; border:1px solid rgba(255,255,255,.12) }
.leaflet-control-zoom a:hover{ background:#2a2d34 }
.leaflet-bottom.leaflet-right .leaflet-control-zoom{ margin:8px }

/* === HUD === */
.hud{
  box-sizing:border-box; padding:12px; border-radius:14px;
  background:rgba(18,18,20,.65); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:saturate(135%) blur(6px);
  max-height:calc(100dvh - 24px);
  width:290px !important;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.hud .card{ width:100%; border-radius:12px; overflow:hidden; background:rgba(31,33,39,.85); border:1px solid rgba(255,255,255,.12); margin-bottom:12px }
.hud .head{ font-size:12px; letter-spacing:.1em; color:#b7bec6; opacity:.95; padding:10px 12px 0; text-transform:uppercase; font-weight:800 }
.hud .value{ padding:6px 12px 10px; font-size:36px; font-weight:900; line-height:1; letter-spacing:.2px }
.hud .value.ok{ color:var(--accent) }
.hud .value.bad{ color:#ff6b5f }
.hud .sub{ padding:0 12px 12px; font-size:13px; color:#b9c0c8 }
.hud .spark{ height:54px; margin:6px 10px 10px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden }
.hud .spark canvas{ width:100%; height:100%; display:block }
.hud .list{ padding:8px 10px 10px }
.hud .list .row{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; column-gap:10px; padding:1px 0 }
.hud .list .rank{ color:#aeb6bf; font-weight:800 }
.hud .list .name{ color:#dfe4ea; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.hud .list .val{ font-weight:900; justify-self:end }
.hud .list .eur{ color:#b9c0c8; font-size:12px; justify-self:end }

/* === City Tooltip === */
.leaflet-tooltip.cityBubble{
  background:rgba(255,255,255,.92); color:#111; border:0; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.22); padding:6px 8px;
  display:inline-block; width:max-content; max-width:none; min-width:0; white-space:normal;
}
.leaflet-tooltip.cityBubble .cb-top,
.leaflet-tooltip.cityBubble .cb-line{ white-space:nowrap }
.leaflet-tooltip.cityBubble .cb-top{ margin:0 0 2px }
.leaflet-tooltip.cityBubble .cb-top b{ font-size:11.5px; letter-spacing:.02em }
.leaflet-tooltip.cityBubble .cb-line{ font-size:10.5px; display:flex; align-items:center; gap:8px }
.leaflet-tooltip.cityBubble .cb-line b{ font-size:10.5px }
.leaflet-tooltip.cityBubble .eur{ font-size:10.5px; color:#334; opacity:.9 }
.leaflet-tooltip.cityBubble .bull{ display:inline-block; font-size:14px; line-height:1; transform:translateY(-0.5px); opacity:.75 }
.leaflet-tooltip.cityBubble:before{ border-right-color:rgba(255,255,255,.92) }
.leaflet-tooltip.cityBubble.cityBubble--nodata{ opacity:.88; filter:grayscale(.15) brightness(.96) }
.leaflet-tooltip.cityBubble.cityBubble--nodata .cb-line i{ color:#666 }

/* === Geo Tooltip === */
.leaflet-tooltip.geoTip{
  background:rgba(20,20,20,.78); color:#eee; border:1px solid rgba(255,255,255,.18);
  border-radius:8px; padding:4px 6px; font-size:11px; font-weight:700;
}
.leaflet-tooltip.geoTip:before{ border-right-color:rgba(20,20,20,.78) }

/* === Legende === */
.legend.dark{ background:rgba(20,20,20,.75); color:#eee; padding:8px; border-radius:10px; border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 16px rgba(0,0,0,.4) }
.legend.dark .swatch{ display:inline-block; width:16px; height:12px; margin-right:8px; border-radius:3px; border:1px solid rgba(255,255,255,.25) }
.legend.dark > div{ display:flex; align-items:center; gap:8px; margin:4px 0 }

/* === Fehlerbox === */
#err{
  display:none; margin:12px 16px; padding:10px 12px;
  background:rgba(220,53,69,.12); border:1px solid rgba(220,53,69,.35);
  color:#ffd1d6; border-radius:12px; white-space:pre-wrap;
}

/* === Responsiv === */
@media (max-width: 900px){ .panel{ gap:10px } .hud .value{ font-size:30px } }
@media (max-width: 560px), (max-height:540px){ #hud-avg{ display:none } }
@media (max-width: 680px){ .ref-pill{ display:none } .hud{ max-height:calc(100dvh - 12px) } }

/* === Cheapest Marker === */
.cheapest-marker{ position:relative; width:22px; height:22px }
.cheapest-marker .cm-dot,
.cheapest-marker .cm-pulse{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none }
.cheapest-marker .cm-dot{ width:10px; height:10px; background:var(--cheapest-dot); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35) }
.cheapest-marker .cm-pulse{ width:10px; height:10px; background:var(--cheapest-ring); animation:cm-pulse 1.6s ease-out infinite }
@keyframes cm-pulse{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:.45 } 100%{ transform:translate(-50%,-50%) scale(2.4); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .cheapest-marker .cm-pulse{ animation:none; opacity:.5 } }

/* === Fernziele: Chips === */
.extChipWrap{ pointer-events:auto }
.extChip{
  position:relative; left:0; top:0; transform:translate(-50%,-50%);
  min-width:26px; height:18px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--chip-bg, var(--ext-chip-bg));
  border:1px solid var(--chip-b, var(--ext-chip-border));
  color:var(--chip-txt, var(--ext-chip-text));
  font-weight:800; font-size:11px; line-height:1; letter-spacing:.5px; text-transform:uppercase;
  box-shadow:var(--chip-shadow, var(--ext-chip-shadow));
  backdrop-filter:blur(6px) saturate(125%); cursor:pointer; user-select:none;
}
.extChip:hover{ filter:brightness(1.06) }
.extChip--active{
  background:var(--chip-bg, var(--ext-chip-bg-active));
  border-color:var(--chip-b, var(--ext-chip-border-active));
  color:var(--chip-txt, var(--ext-chip-text-active));
  box-shadow:var(--chip-shadow, var(--ext-chip-shadow-active));
}

/* === Fernziele: Punkt-Fallback === */
.extPin{ cursor:pointer }
.extPin:hover{ filter:brightness(1.05) }