:root{
  --bg:#f6f7f9; --panel:#fff; --panel-2:#fbfbfd; --text:#15171c; --muted:#6b7280;
  --line:#e4e6ec; --accent:#3b5bfd; --accent-soft:#eaeeff;
  --treffer:#1f9254; --treffer-bg:#e6f6ed;
  --wahrsch:#a5680a; --wahrsch-bg:#fdf3e0;
  --unsicher:#6b7280; --unsicher-bg:#eef0f3;
  --neu:#c2255c; --neu-bg:#fde9f0;
  --radius:12px; --shadow:0 1px 2px rgba(16,20,40,.06),0 6px 18px rgba(16,20,40,.05);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1014; --panel:#171a21; --panel-2:#1c2029; --text:#e8eaef; --muted:#9aa2b1;
  --line:#272c36; --accent:#7c93ff; --accent-soft:#1e2540;
  --treffer:#4ade80; --treffer-bg:#132a1d; --wahrsch:#fbbf24; --wahrsch-bg:#2e2412;
  --unsicher:#9aa2b1; --unsicher-bg:#21252e; --neu:#f472b6; --neu-bg:#2e1622;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --bg:#0e1014; --panel:#171a21; --panel-2:#1c2029; --text:#e8eaef; --muted:#9aa2b1;
  --line:#272c36; --accent:#7c93ff; --accent-soft:#1e2540;
  --treffer:#4ade80; --treffer-bg:#132a1d; --wahrsch:#fbbf24; --wahrsch-bg:#2e2412;
  --unsicher:#9aa2b1; --unsicher-bg:#21252e; --neu:#f472b6; --neu-bg:#2e1622;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px 64px}

header.top{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--line);padding:14px 0 12px;margin-bottom:18px}
.top-in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;gap:16px;
  align-items:center;flex-wrap:wrap}
h1{font-size:19px;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--treffer)}
.meta{color:var(--muted);font-size:13px}
.spacer{flex:1}
.iconbtn{background:var(--panel);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:7px 12px;cursor:pointer;font-size:13px}
.iconbtn:hover{border-color:var(--accent)}

.layout{display:grid;grid-template-columns:288px 1fr;gap:20px;align-items:start}
aside{position:sticky;top:78px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
aside h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  margin:20px 0 9px;font-weight:600}
/* nur die allererste Ueberschrift, nicht die erste jedes Unterblocks */
aside > h2:first-child{margin-top:0}
input[type=search],select{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel-2);color:var(--text);font-size:14px}
input[type=range]{width:100%;accent-color:var(--accent)}
.loc{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:9px;
  background:var(--panel-2)}
.loc-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500}
.loc-km{margin-left:auto;color:var(--accent);font-variant-numeric:tabular-nums;font-size:13px}
.row{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:7px 0;color:var(--text)}
.row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;align-content:flex-start}
.chip{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  border-radius:999px;padding:0 10px;font-size:12.5px;cursor:pointer;user-select:none;
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  /* feste Hoehe: verhindert, dass ein Chip in der Flex-Zeile gedehnt wird
     und aus der Pille ein Kreis wird */
  height:26px;flex:0 0 auto;max-width:100%}
.chip .n{opacity:.55;font-variant-numeric:tabular-nums;font-size:11.5px}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}

.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  padding:7px 13px;cursor:pointer;font-size:13.5px;color:var(--muted)}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.tab .n{opacity:.75;font-variant-numeric:tabular-nums}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.count{color:var(--muted);font-size:13.5px}
.toolbar select{width:auto;padding:7px 10px;font-size:13px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;margin-bottom:11px;box-shadow:var(--shadow);transition:border-color .12s}
.card:hover{border-color:var(--accent)}
.card.gemerkt{border-left:3px solid var(--accent)}
.ct{display:flex;gap:10px;align-items:flex-start}
.ct h3{margin:0;font-size:16px;line-height:1.35;letter-spacing:-.005em}
.ct h3 a{text-decoration:none;color:var(--text)}
.ct h3 a:hover{color:var(--accent)}
.acts{margin-left:auto;display:flex;gap:5px;flex-shrink:0}
.acts button{background:none;border:1px solid var(--line);border-radius:8px;width:30px;
  height:30px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.acts button:hover{border-color:var(--accent);color:var(--accent)}
.acts button.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.sub{color:var(--muted);font-size:13.5px;margin:5px 0 8px;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sub b{color:var(--text);font-weight:600}
.sep{opacity:.4}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.b{font-size:11.5px;padding:2.5px 8px;border-radius:999px;font-weight:600;letter-spacing:.01em}
.b.treffer{background:var(--treffer-bg);color:var(--treffer)}
.b.wahrscheinlich{background:var(--wahrsch-bg);color:var(--wahrsch)}
.b.unsicher{background:var(--unsicher-bg);color:var(--unsicher)}
.b.neu{background:var(--neu-bg);color:var(--neu)}
.b.portal{background:var(--panel-2);color:var(--muted);border:1px solid var(--line);font-weight:500}
.b.km{background:var(--accent-soft);color:var(--accent)}
.exz{color:var(--muted);font-size:13.5px;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
details.warum{margin-top:9px}
details.warum summary{cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none}
details.warum summary::-webkit-details-marker{display:none}
details.warum summary:before{content:"\25b8  "}
details.warum[open] summary:before{content:"\25be  "}
details.warum ul{margin:7px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.leer{text-align:center;padding:60px 20px;color:var(--muted)}
.leer h3{color:var(--text);margin:0 0 6px}
footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px;text-align:center}
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  aside{position:static}
  .wrap{padding:0 16px 40px}
}
.b.tag{background:var(--panel-2);color:var(--muted);border:1px solid var(--line);
  font-weight:500;white-space:nowrap}
/* eigener Name, damit es nicht mit der Leermeldung .leer kollidiert */
.chip.ohne-angabe{font-style:italic;opacity:.85}