/* STSB Sportkarte – Corporate Design Stadtsportbund Cottbus (Stadtgebiete-Design) */
.stsb-karte{display:flex;gap:22px;align-items:stretch;font-family:'Montserrat',sans-serif}

/* ── Seitenleiste ──
   Feste gemeinsame Höhe (ca. 10–15 sichtbare Filterpositionen, per
   Shortcode-Attribut "hoehe" einstellbar). Der Rest der Liste scrollt
   über eine eigene Bildlaufleiste; die Karte rechts ist exakt gleich hoch. */
.stsb-karte-side{flex:0 0 292px;height:var(--stsb-karte-h,700px);overflow-y:auto;
  padding:4px 10px 4px 2px;scrollbar-width:thin;scrollbar-color:#d5d9dc transparent}
.stsb-karte-side::-webkit-scrollbar{width:8px}
.stsb-karte-side::-webkit-scrollbar-track{background:transparent}
.stsb-karte-side::-webkit-scrollbar-thumb{background:#d5d9dc;border-radius:8px}
.stsb-karte-side::-webkit-scrollbar-thumb:hover{background:#E80000}
.stsb-karte-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#E80000;margin-bottom:4px}
.stsb-karte-h{margin:0 0 8px;font-size:25px;line-height:1.15;color:#1d2126;font-weight:800}
.stsb-karte-sub{margin:0 0 16px;font-size:13.5px;color:#575151;line-height:1.55}

/* Gebietsliste (wie Bezirksliste beim Vorbild) */
.stsb-karte-gebiete{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:7px}
.stsb-karte-gebiete-trenner{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9aa0a6;padding:8px 4px 1px}
.stsb-karte-gebiet{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:#fff;border:1px solid #eceef0;border-radius:12px;padding:11px 14px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700;color:#373A3E;text-align:left;
  box-shadow:0 1px 3px rgba(0,0,0,.04);transition:all .3s ease}
.stsb-karte-gebiet:hover{border-color:#E80000;transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.08)}
.stsb-karte-gebiet--aktiv,.stsb-karte-gebiet--aktiv:hover{background:#E80000;border-color:#E80000;color:#fff}
.stsb-karte-gebiet--aktiv .stsb-karte-n{background:rgba(255,255,255,.22);color:#fff}
.stsb-karte-gebiet--leer{color:#a6abb0;font-weight:400}
.stsb-karte-n{background:#f1f2f3;color:#575151;font-size:11.5px;font-weight:800;border-radius:20px;padding:2px 9px;flex-shrink:0}

/* Sportarten-Filter */
.stsb-karte-filter-titel{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9aa0a6;margin:0 0 8px;padding:0 4px}
.stsb-karte-filter{list-style:none;margin:0 0 10px;padding:0}
.stsb-karte-filter label{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;
  cursor:pointer;transition:background .25s ease;font-size:13px;color:#373A3E}
.stsb-karte-filter label:hover{background:#f4f5f6}
.stsb-karte-filter input{accent-color:#E80000;width:15px;height:15px;flex-shrink:0;margin:0}
.stsb-karte-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.stsb-karte-lbl{flex:1}
.stsb-karte-filter input:not(:checked) ~ .stsb-karte-lbl,
.stsb-karte-filter input:not(:checked) ~ .stsb-karte-n{opacity:.4}
.stsb-karte-filter input:not(:checked) ~ .stsb-karte-dot{opacity:.25}
.stsb-karte-alle-wrap{display:flex;gap:8px}
.stsb-karte-alle{flex:1;border:1.5px solid #E80000;background:#fff;color:#E80000;font-size:12px;font-weight:700;
  border-radius:20px;padding:7px 4px;cursor:pointer;transition:all .3s ease}
.stsb-karte-alle:hover{background:#E80000;color:#fff}

/* ── Kartenbühne: exakt gleich hoch wie die Filterspalte ── */
.stsb-karte-stage{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;
  height:var(--stsb-karte-h,700px)}
#stsb-karte-map{flex:1;border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.10);z-index:1;background:#f6f7f5}

/* Gebiets-Labels: sachte, transparent im Hintergrund – liegen UNTER den Vereins-Pins */
.stsb-gebiet-lblwrap{background:transparent;border:none}
.stsb-gebiet-lbl{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  color:rgba(120,126,132,.55);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.05em;pointer-events:none;transition:opacity .4s ease}
.stsb-gebiet-lbl--umland{color:rgba(150,156,162,.42);font-weight:400}
.stsb-gebiet-lbl--dim{opacity:.18}

/* Gebiets-Flächen: sanfter Hover (kein drop-shadow/filter – zu teuer auf großen SVG-Flächen) */
.stsb-karte .leaflet-interactive{transition:fill .3s ease,fill-opacity .3s ease;outline:none}

/* Herauszoomen-Button (Leaflet-Control unten links, wie beim Vorbild) */
.stsb-karte-back{background:#E80000;color:#fff;border:none;border-radius:24px;padding:11px 20px;
  font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.22);transition:opacity .35s ease,transform .35s ease,background .25s ease}
.stsb-karte-back:hover{background:#C10000;transform:translateY(-1px)}
.stsb-karte-back--aus{opacity:0;pointer-events:none;transform:translateY(6px)}

/* ── Vereins-Pin: weiche Einblend-Animation ── */
.stsb-karte-pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);
  animation:stsbPinAuf .5s cubic-bezier(.34,1.4,.64,1) both}
@keyframes stsbPinAuf{from{opacity:0;transform:rotate(-45deg) scale(.4)}to{opacity:1;transform:rotate(-45deg) scale(1)}}
.stsb-pin-tip{background:#373A3E;color:#fff;border:none;border-radius:8px;font-family:'Montserrat',sans-serif;
  font-size:12px;padding:5px 10px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.stsb-pin-tip::before{border-top-color:#373A3E}

/* ── Cluster-Bubble: ruhig einblenden ── */
.stsb-cluster{width:42px;height:42px;border-radius:50%;background:#E80000;color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:14px;font-family:'Montserrat',sans-serif;
  border:3px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.28);
  animation:stsbClusterAuf .5s ease-out both;transition:transform .3s ease}
.stsb-cluster:hover{transform:scale(1.08)}
@keyframes stsbClusterAuf{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* ── Overlay + Info-Karte (zentriert über der Karte, wie beim Vorbild) ──
   WICHTIG: geschlossen = pointer-events:none, sonst blockiert die unsichtbare
   Ebene sämtliche Karten-Interaktionen (Klicken, Hover, Zoomen, Verschieben). */
.stsb-karte-overlay{position:absolute;inset:0;z-index:900;border-radius:18px;
  background:rgba(246,247,249,.82);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;pointer-events:none;transition:opacity .32s ease}
/* Bewusst KEIN backdrop-filter: Blur über der Leaflet-Karte erzwingt teure
   GPU-Kompositionen (Ruckler/Freezes) – die dichte Milchglas-Schicht wirkt gleich. */
.stsb-karte-overlay--offen{opacity:1;pointer-events:auto}
/* Bewusst OHNE transform/Transition auf der Card: animierte Transforms über den
   GPU-beschleunigten Leaflet-Ebenen können Renderer/Capture-Probleme auslösen. */
.stsb-karte-card{position:relative;background:#fff;border-radius:18px;max-width:420px;width:100%;
  max-height:calc(100% - 24px);overflow-y:auto;padding:26px 26px 24px;
  box-shadow:0 18px 44px rgba(0,0,0,.20)}
.stsb-card-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid #e4e6e9;background:#fff;color:#575151;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s ease}
.stsb-card-x:hover{background:#E80000;border-color:#E80000;color:#fff}
.stsb-card-eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#E80000;margin-bottom:4px}
.stsb-card-h{margin:0 0 12px;font-size:19px;line-height:1.3;color:#1d2126;padding-right:34px}
.stsb-card-zeile{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:#575151;margin:0 0 7px;line-height:1.45}
.stsb-card-ic{color:#E80000;flex-shrink:0;margin-top:1px;display:inline-flex}
.stsb-card-zeile a{color:#373A3E;text-decoration:none;border-bottom:1px solid #e5c4c4;transition:color .2s ease}
.stsb-card-zeile a:hover{color:#E80000}
.stsb-card-sport{margin:10px 0 8px;font-size:12.5px;color:#8a8f94;line-height:1.5}
.stsb-karte-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.stsb-karte-chip{color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 10px;letter-spacing:.02em}
.stsb-card-actions{display:flex;gap:10px;flex-wrap:wrap}
.stsb-karte-btn{display:inline-flex;align-items:center;gap:7px;background:#E80000;color:#fff!important;font-size:13px;font-weight:700;
  text-decoration:none!important;border-radius:22px;padding:10px 18px;transition:all .25s ease}
.stsb-karte-btn:hover{background:#C10000;transform:translateY(-1px)}
.stsb-karte-btn--outline{background:#fff;color:#373A3E!important;border:1.5px solid #d9dcdf}
.stsb-karte-btn--outline:hover{background:#f4f5f6;border-color:#373A3E;transform:translateY(-1px)}

/* ── Responsive ── */
@media (max-width:1024px){
  .stsb-karte{flex-direction:column}
  .stsb-karte-side{flex:none;width:auto;align-self:stretch;height:auto;overflow-y:visible}
  .stsb-karte-stage{height:auto}
  .stsb-karte-gebiete{flex-direction:row;flex-wrap:wrap}
  .stsb-karte-gebiete li{flex:0 0 auto}
  .stsb-karte-gebiete-trenner{flex-basis:100%;padding:6px 4px 0}
  .stsb-karte-gebiet{padding:8px 12px;font-size:12.5px}
  .stsb-karte-filter{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
  #stsb-karte-map{height:460px!important}
}
@media (max-width:600px){
  .stsb-karte-filter{grid-template-columns:1fr}
  #stsb-karte-map{height:420px!important}
  .stsb-karte-card{padding:20px 18px 18px}
}