.ort { display: flex; gap: 6px; align-items: center; flex: 1; max-width: 520px;
  color: var(--sf-muted); flex-wrap: wrap; }
.ort input { flex: 1; min-width: 120px; padding: 7px 12px; border-radius: var(--sf-radius-sm);
  border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-text); font: inherit; }
.filter { display: flex; gap: 6px; padding: 8px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--sf-line); }
.haupt { display: grid; grid-template-columns: minmax(320px, 38%) 1fr; height: calc(100vh - 170px); }
.seite { overflow-y: auto; border-right: 1px solid var(--sf-line); padding: 0 12px 12px; }
.seite-kopf { padding: 10px 4px 6px; color: var(--sf-muted); }
.liste { display: flex; flex-direction: column; gap: 10px; }
.kartenbereich { position: relative; }
.uebersicht { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); }
.uebersicht[hidden] { display: none; }
.kartenbereich #karte { position: absolute; inset: 0; border-radius: 0; border: 0; }
.karte-eintrag { background: var(--sf-surface); border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius); padding: 10px 12px; display: grid;
  grid-template-columns: 1fr 92px; gap: 4px 10px; box-shadow: var(--sf-shadow); }
.karte-eintrag { cursor: pointer; }
.karte-eintrag.hervor { outline: 2px solid var(--sf-accent); }
.karte-eintrag h3 { margin: 0; font-size: 15px; }
.karte-eintrag h3 a { text-decoration: none; }
.karte-eintrag .meta { color: var(--sf-muted); font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.karte-eintrag .mini { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
.karte-eintrag .mini path { stroke: var(--sf-route); fill: none; stroke-width: 1.6; }
.karte-eintrag .aktionen { grid-column: 1 / span 2; display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--sf-muted); align-items: center; }
.karte-eintrag .aktionen button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
.stufe i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-line); margin-right: 2px; }
.stufe i.an { background: var(--sf-accent); }
.vergleich { position: absolute; left: 10px; right: 10px; bottom: 24px; display: flex; gap: 10px;
  align-items: center; background: var(--sf-surface); border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius); padding: 8px 10px; box-shadow: var(--sf-shadow); }
.vergleich .platz { flex: 1; background: var(--sf-surface-2); border-radius: var(--sf-radius-sm); padding: 6px 8px; font-size: 12px; }
.knopf { padding: 6px 12px; border-radius: var(--sf-radius-sm); background: var(--sf-accent);
  color: var(--sf-accent-text); border: 0; font-weight: 700; cursor: pointer; font: inherit; }
.vergleich-dialog { background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius); max-width: 760px; width: 95vw; }
.vergleich-dialog table { width: 100%; border-collapse: collapse; }
.vergleich-dialog td, .vergleich-dialog th { padding: 6px 8px; border-bottom: 1px solid var(--sf-line); text-align: left; }
@media (max-width: 760px) {
  .haupt { grid-template-columns: 1fr; height: auto; }
  .kartenbereich { order: -1; }
  .kartenbereich #karte { position: relative; height: 46vh; }
  .seite { border-right: 0; overflow: visible; }
  .vergleich { position: static; margin: 8px; }
}
.vergleich[hidden] { display: none; }