/* Token-Verwaltung: dunkel wie die ESCAPE66-Seite, Gold als Akzent, Ampelfarben für den Zustand */
:root{--grund:#0d0c0a;--flaeche:#17150f;--linie:#2c281d;--text:#ece6d6;--leise:#9b937f;--gold:#c8a24b;
  --gruen:#3fae5a;--gelb:#e3c440;--orange:#e5872a;--rot:#d9443a;--grau:#6d6a62}
*{box-sizing:border-box}
html,body{margin:0;background:var(--grund);color:var(--text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-weight:600;margin:0}
h1{font-size:1.25rem}h2{font-size:1.15rem}h3{font-size:.95rem;color:var(--gold);margin:16px 0 6px}
.leise{color:var(--leise);font-weight:400}
button{font:inherit;background:var(--gold);color:#17130a;border:0;border-radius:6px;padding:8px 14px;cursor:pointer;font-weight:600}
button.schlicht{background:none;color:var(--leise);border:1px solid var(--linie)}
button.schlicht:hover{color:var(--text)}
input,select,textarea{font:inherit;width:100%;background:#0f0e0b;color:var(--text);border:1px solid var(--linie);border-radius:6px;padding:9px 10px;margin-top:4px}
a{color:var(--gold)}

.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:22px}
.login{max-width:340px;margin:12vh auto;display:flex;flex-direction:column;gap:12px}
.login label{color:var(--leise);font-size:.85rem}
.fehler{color:var(--rot);min-height:1.2em;margin:0}

header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 18px 6px}
header p{margin:2px 0 0;font-size:.85rem}
.rechts{display:flex;gap:10px;align-items:center;font-size:.85rem}

.zaehler{display:flex;gap:8px;flex-wrap:wrap;padding:6px 18px 12px}
.zaehler span{background:var(--flaeche);border:1px solid var(--linie);border-radius:20px;padding:4px 12px;font-size:.85rem}
.punkt{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px;flex:none}
.gruen{background:var(--gruen)}.gelb{background:var(--gelb)}.orange{background:var(--orange)}.rot{background:var(--rot)}.grau{background:var(--grau)}

.raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;padding:0 18px 18px;height:calc(100vh - 120px)}
#karte{border-radius:10px;border:1px solid var(--linie);min-height:300px}
.liste{overflow:auto;padding-right:4px}
.filter{display:flex;gap:6px;position:sticky;top:0;background:var(--grund);padding-bottom:8px;z-index:2}
.filter button{background:var(--flaeche);color:var(--leise);border:1px solid var(--linie);padding:6px 12px;font-weight:500}
.filter button.an{color:#17130a;background:var(--gold);border-color:var(--gold)}
.abschnitt{color:var(--gold);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin:14px 0 4px}
.zeile{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.zeile:hover,.zeile.aktiv{background:var(--flaeche);border-color:var(--linie)}
.zeile .name{font-weight:600;min-width:72px}
.zeile .ort{color:var(--leise);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.zeile .wert{font-variant-numeric:tabular-nums;font-size:.85rem;text-align:right;white-space:nowrap}
.zeile .wert small{display:block;color:var(--leise)}

#detail{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--flaeche);border-left:1px solid var(--linie);
  padding:16px 18px;overflow:auto;z-index:1000;box-shadow:-10px 0 30px rgba(0,0,0,.5)}
.detailkopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
#d_inhalt img{width:100%;max-width:260px;image-rendering:pixelated;border:1px solid var(--linie);border-radius:6px;margin:10px 0}
.fakten{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.9rem;margin:8px 0}
.fakten dt{color:var(--leise)}.fakten dd{margin:0}
table{width:100%;border-collapse:collapse;font-size:.85rem}
td,th{text-align:left;padding:4px 6px;border-bottom:1px solid var(--linie);vertical-align:top}
th{color:var(--leise);font-weight:500}
.notizform{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.vermerk{border-left:3px solid var(--gold);padding:4px 10px;margin:6px 0;font-size:.9rem}
.vermerk small{color:var(--leise);display:block}

.leaflet-container{background:#1c1b17}
.leaflet-popup-content{font:13px system-ui,sans-serif}

@media (max-width:820px){
  .raster{grid-template-columns:1fr;height:auto}
  #karte{height:46vh}
  .liste{overflow:visible}
}