/* Krisenkarte cottbus.de · v1.0.1 · Philipp Ramsch
   Farben fest gesetzt (!important), damit das Theme sie nicht überschreibt.
   Rot #E40033 = Leuchtturm · Blau #003F57 = Informationspunkt (Kit-Farben cottbus.de) */
.kk-krisenkarte { --kk-rot:#E40033; --kk-blau:#003F57; --kk-lila:#43002E; --kk-grau:#F3F3F3;
  font-family: inherit; color:#000; position:relative; }
.kk-krisenkarte *, .kk-krisenkarte *::before, .kk-krisenkarte *::after { box-sizing: border-box; }
.kk-kopf { display:flex; flex-wrap:wrap; gap:.5em; align-items:center; margin:0 0 .8em; }
.kk-filter { display:flex; flex-wrap:wrap; gap:.4em; margin:0; padding:0; border:0; }
.kk-filter legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.kk-krisenkarte .kk-knopf { font:inherit !important; font-size:.95em !important; font-weight:700 !important;
  line-height:1.2 !important; padding:.55em .9em !important; border-radius:0 !important; cursor:pointer;
  border:2px solid var(--kk-blau) !important; background:#fff !important; color:var(--kk-blau) !important;
  text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; }
.kk-krisenkarte .kk-knopf:hover, .kk-krisenkarte .kk-knopf[aria-pressed="true"] {
  background:var(--kk-blau) !important; color:#fff !important; }
.kk-krisenkarte .kk-knopf.kk-naechster { border-color:var(--kk-rot) !important; background:var(--kk-rot) !important; color:#fff !important; }
.kk-krisenkarte .kk-knopf.kk-naechster:hover { background:var(--kk-lila) !important; border-color:var(--kk-lila) !important; }
.kk-krisenkarte .kk-knopf:focus-visible, .kk-krisenkarte .kk-eintrag:focus-visible, .kk-marker:focus-visible {
  outline:3px solid #389EC3 !important; outline-offset:2px !important; }
.kk-raster { display:grid; grid-template-columns: minmax(260px, 34%) 1fr; gap:1.2em; align-items:stretch; }
.kk-liste { max-height:600px; overflow-y:auto; padding-right:.3em; order:1; }
.kk-karte { height:600px; min-height:360px; order:2; border:1px solid #d6d6d6; border-radius:10px; overflow:hidden; background:var(--kk-grau); }
.kk-gruppe { font-weight:900 !important; margin:.8em 0 .4em !important; padding:0 !important; font-size:1em !important; }
.kk-gruppe.kk-lt { color:var(--kk-rot) !important; } .kk-gruppe.kk-ip { color:var(--kk-blau) !important; }
.kk-liste ul { list-style:none !important; margin:0 !important; padding:0 !important; }
.kk-liste li { margin:0 0 .35em !important; padding:0 !important; }
.kk-krisenkarte .kk-eintrag { display:flex !important; gap:.7em; align-items:flex-start; width:100%; text-align:left !important;
  font:inherit !important; font-size:.92em !important; line-height:1.35 !important; font-weight:400 !important;
  padding:.55em .7em !important; background:#fff !important; color:#000 !important; cursor:pointer;
  border:1px solid #d6d6d6 !important; border-left:5px solid var(--kk-rot) !important; border-radius:0 8px 8px 0 !important;
  text-transform:none !important; box-shadow:none !important; white-space:normal !important; }
.kk-krisenkarte .kk-eintrag.kk-ip { border-left-color:var(--kk-blau) !important; }
.kk-krisenkarte .kk-eintrag:hover, .kk-krisenkarte .kk-eintrag.kk-aktiv { background:var(--kk-grau) !important; }
.kk-krisenkarte .kk-eintrag.kk-aktiv { border-color:var(--kk-rot) !important; border-left-width:8px !important; }
.kk-krisenkarte .kk-eintrag.kk-ip.kk-aktiv { border-color:var(--kk-blau) !important; }
.kk-nr { flex:0 0 auto; min-width:2em; height:2em; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.85em; color:#fff; background:var(--kk-rot); }
.kk-ip .kk-nr { background:var(--kk-blau); border-radius:6px; }
.kk-text strong { font-weight:700; }
/* Markierungen auf der Karte */
.kk-marker { width:32px; height:40px; padding:0 !important; border:0 !important; background:transparent !important; cursor:pointer;
  box-shadow:none !important; }
/* MapLibre positioniert Markierungen absolut per transform – darf weder vom Theme noch von hier überschrieben werden */
.kk-krisenkarte .kk-marker.maplibregl-marker { position:absolute !important; top:0 !important; left:0 !important; margin:0 !important; }
.kk-marker .kk-pin { position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--kk-rot); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.kk-marker.kk-ip .kk-pin { background:var(--kk-blau); }
.kk-marker .kk-pin b { transform:rotate(45deg); color:#fff; font:900 12px/1 system-ui, sans-serif; }
.kk-marker.kk-aktiv { z-index:5; }
.kk-marker.kk-aktiv .kk-pin { background:var(--kk-lila); transform:rotate(-45deg) scale(1.25); }
/* Popup */
.kk-popup { font-size:14px; line-height:1.4; color:#000; }
.kk-popup p { margin:0 0 .5em !important; }
.kk-popup-typ { font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
.kk-popup-typ.kk-lt { color:var(--kk-rot, #E40033); } .kk-popup-typ.kk-ip { color:var(--kk-blau, #003F57); }
.kk-popup-info { font-size:13px; color:#333; }
.kk-popup-abstand { font-weight:700; }
.kk-popup a.kk-route { display:inline-block; font-weight:700 !important; color:#fff !important; background:#003F57 !important;
  padding:.45em .8em !important; text-decoration:none !important; }
.kk-popup a.kk-route:hover { background:#43002E !important; }
.kk-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kk-meldung { margin:.6em 0 0 !important; font-size:.9em; min-height:1.2em; }
.kk-meldung-fehler { color:#E40033; font-weight:700; }
.kk-meldung-hinweis { color:#003F57; font-weight:700; }
/* Bestätigungen („Angezeigt: …“) nur für Screenreader – sichtbar bleiben nur Fehler und Hinweise */
.kk-krisenkarte .kk-meldung:not(.kk-meldung-fehler):not(.kk-meldung-hinweis) { position:absolute !important; width:1px !important;
  height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; margin:0 !important; }
.kk-quelle { font-size:.8em; margin:.6em 0 0 !important; color:#444; }
/* Tablet hoch / Handy: Karte oben, Liste darunter */
@media (max-width: 900px) {
  .kk-raster { grid-template-columns: 1fr; }
  .kk-karte { order:1; height:62vh; max-height:520px; }
  .kk-liste { order:2; max-height:none; overflow:visible; }
}
.kk-hinweis { font-weight:400; font-style:italic; font-size:.9em; }