:root{
  --grund:#11161b; --fläche:#171e25; --fläche2:#1e2731; --rand:#2b3743;
  --text:#e6edf3; --leise:#9aa7b4; --akzent:#2ea043; --ort:#38bdf8; --event:#f0a23c;
  --warn:#e3b341; --fehler:#f85149;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--grund);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.45}
header{position:sticky;top:0;z-index:600;background:var(--fläche);border-bottom:1px solid var(--rand);
  padding:.5rem .7rem .55rem}
.kopf{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;justify-content:space-between}
h1{margin:0;font-size:1.02rem;font-weight:650;letter-spacing:.01em}
h1 span{color:var(--leise);font-weight:450}
.stand{color:var(--leise);font-size:.76rem}
.leiste{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.45rem}
.knopf{background:var(--akzent);color:#fff;border:0;border-radius:8px;padding:.42rem .7rem;
  font-size:.9rem;cursor:pointer;min-height:32px}
.knopf:active{transform:translateY(1px)}
.knopf.zweit{background:var(--fläche2);border:1px solid var(--rand);color:var(--text)}
.feld{display:flex;align-items:center;gap:.3rem;font-size:.82rem;color:var(--leise)}
select{background:var(--fläche2);color:var(--text);border:1px solid var(--rand);border-radius:7px;
  padding:.32rem .45rem;font-size:.88rem;min-height:32px}
.chip{background:var(--fläche2);color:var(--text);border:1px solid var(--rand);border-radius:999px;
  padding:.3rem .7rem;font-size:.82rem;cursor:pointer;min-height:30px}
.chip[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.hinweis{margin:.5rem .7rem 0;padding:.5rem .65rem;border-radius:8px;font-size:.85rem;
  background:#2a2313;border:1px solid var(--warn);color:#f0e0b8}
.hinweis.fehler{background:#2b1517;border-color:var(--fehler);color:#ffd7d5}
main{display:grid;grid-template-columns:1fr;gap:0}
#karte{height:46vh;min-height:260px;width:100%;background:#0b1015}
#liste{padding:.6rem .7rem 4rem;display:flex;flex-direction:column;gap:.5rem}
.abschnitt{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--leise);
  margin:.5rem 0 0}
.zeile{background:var(--fläche);border:1px solid var(--rand);border-radius:10px;padding:.55rem .65rem;
  cursor:pointer}
.zeile:hover{border-color:#3d4a58}
.zeile.kopf-zeile{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}
.name{font-weight:600;font-size:.95rem}
.name-ko{color:var(--leise);font-weight:400;font-size:.85rem;margin-left:.35rem}
.meta{color:var(--leise);font-size:.8rem;margin-top:.15rem}
.marker{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.35rem;
  vertical-align:middle}
.marker.ort{background:var(--ort)}
.marker.event{background:var(--event)}
.badge{font-size:.72rem;border-radius:999px;padding:.1rem .45rem;border:1px solid var(--rand);color:var(--leise);white-space:nowrap}
.badge.offen{color:#7ee2a8;border-color:#2d6a45;background:#122a1c}
.badge.zu{color:#ffb3ae;border-color:#6a2d2d;background:#2a1414}
.badge.unbekannt{color:var(--warn);border-color:#5c4a1c;background:#241d0e}
.badge.entfernt{color:#c9d5e1}
.detail{position:fixed;right:0;top:0;bottom:0;width:min(430px,100%);background:var(--fläche);
  border-left:1px solid var(--rand);z-index:900;overflow-y:auto;padding:1rem 1rem 3rem;
  box-shadow:-8px 0 24px rgba(0,0,0,.45)}
.schliessen{position:absolute;right:.6rem;top:.55rem;background:var(--fläche2);border:1px solid var(--rand);
  color:var(--text);border-radius:8px;font-size:1.1rem;width:30px;height:30px;cursor:pointer;line-height:1}
.detail h2{margin:.2rem 2rem .1rem 0;font-size:1.05rem}
.detail h3{margin:1rem 0 .25rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--leise)}
.detail p{margin:.25rem 0;font-size:.88rem}
.detail a{color:#7cc4ff}
.zeiten{font-variant-numeric:tabular-nums;font-size:.86rem;color:#cfe0ee}
.ev{display:flex;gap:.5rem;justify-content:space-between;padding:.3rem 0;border-bottom:1px dashed var(--rand);font-size:.84rem}
.ev:last-child{border-bottom:0}
.ev .t{flex:1 1 auto}
.ev .p{color:var(--leise);white-space:nowrap}
.fuss{margin-top:1rem;color:var(--leise);font-size:.74rem;line-height:1.4}
.legende{background:rgba(17,22,27,.9);border:1px solid var(--rand);border-radius:8px;padding:.35rem .5rem;
  font-size:.74rem;color:var(--text)}
.legende div{display:flex;align-items:center;gap:.3rem;margin:.1rem 0}
.leaflet-popup-content-wrapper{background:var(--fläche);color:var(--text);border-radius:8px}
.leaflet-popup-tip{background:var(--fläche)}
@media(min-width:900px){
  main{grid-template-columns:1fr 420px;height:calc(100vh - 108px)}
  #karte{height:100%}
  #liste{overflow-y:auto;height:100%}
  .detail{position:fixed}
}