/* hoerer.css — Admin-Seite „Hörer jetzt“ (03.10.2026, nach Vorbild Balkanbeatz live.php) */
.hl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hl-kopf .ad-lab, .hl-kopf .ad-meta { margin: 0; }
.hl-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: start; }

.hl-zahl { position: relative; overflow: hidden; margin-bottom: 14px; padding: 22px 24px; border-radius: 14px; color: var(--ru-paper);
  border: 1px solid rgba(245,239,230,.14);
  background: linear-gradient(140deg, rgba(0,229,255,.18), rgba(255,43,214,.22)), color-mix(in srgb, var(--ru-ink) 82%, #000); }
.hl-zahl b { display: block; font: 800 64px/1 var(--ru-f-disp); letter-spacing: -.02em; }
.hl-zahl span { display: block; margin-top: 6px; font: 600 11px var(--ru-f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ru-paper-70); }
.hl-zahl small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ru-paper-70); }

.hl-tabelle { background: var(--ad-flaeche); border: 1px solid var(--ru-line-2); border-radius: var(--ru-r-2); max-height: 70vh; overflow: auto; }
.hl-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.hl-tabelle col.c1 { width: 52%; } .hl-tabelle col.c2 { width: 26%; } .hl-tabelle col.c3 { width: 22%; }
.hl-tabelle th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 10px 12px; background: color-mix(in srgb, var(--ru-ink) 94%, #000);
  border-bottom: 1px solid var(--ru-line-2); font: 600 10.5px var(--ru-f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ru-paper-50); }
.hl-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--ru-line-2); vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.hl-tabelle tr:last-child td { border-bottom: 0; }
.hl-tabelle td small { display: block; color: var(--ru-paper-50); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-tabelle .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hl-q { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; background: var(--ru-cyan); box-shadow: 0 0 8px rgba(0,229,255,.6); }
.hl-ip { white-space: nowrap; font-family: var(--ru-f-mono); font-size: 12.5px; }
.hl-hinweis { font-size: 12px; color: var(--ru-paper-50); margin: 8px 2px 0; }

.hl-karte { margin: 0; }
.hl-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hl-karte-kopf .ad-lab { margin: 0; }
.hl-seg { display: inline-flex; border: 1px solid var(--ru-line); border-radius: 999px; overflow: hidden; }
.hl-seg label { position: relative; cursor: pointer; }
.hl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hl-seg span { display: block; padding: 6px 12px; font: 600 11px var(--ru-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ru-paper-70); }
.hl-seg input:checked + span { background: var(--ru-cyan); color: #0d0a1f; }
.hl-seg input:focus-visible + span { outline: 2px solid var(--ru-cyan); outline-offset: -2px; }

/* Karte (Leaflet) */
.rrk-karte { width: 100%; height: min(640px, 62vh); border-radius: 10px; overflow: hidden; border: 1px solid var(--ru-line-2); background: #0b0e17; z-index: 0; }
.rrk-karte:fullscreen { height: 100vh; border-radius: 0; }
/* Dunkle Karte: helle OSM-Kacheln umkehren, Farben zurückdrehen */
.rrk-karte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55); }
.rrk-karte.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
.rrk-nadel { background: none; border: 0; }
.rrk-nadel svg { filter: drop-shadow(0 0 6px rgba(0,229,255,.55)); transition: transform .15s; transform-origin: 50% 100%; }
.rrk-nadel:hover svg { transform: scale(1.12); }
.rrk-gruppe { background: none; border: 0; }
.rrk-gruppe div { border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ru-cyan);
  box-shadow: 0 0 0 6px rgba(0,229,255,.16), 0 0 0 12px rgba(0,229,255,.07), 0 3px 8px rgba(0,0,0,.45); animation: rrk-puls 2.4s ease-out infinite; }
.rrk-gruppe span { width: 72%; height: 72%; border-radius: 50%; background: #0d0a1f; color: var(--ru-cyan); display: flex; align-items: center; justify-content: center; font: 700 14px Arial, sans-serif; }
@keyframes rrk-puls { 0% { box-shadow: 0 0 0 0 rgba(0,229,255,.45), 0 3px 8px rgba(0,0,0,.45); } 70% { box-shadow: 0 0 0 14px rgba(0,229,255,0), 0 3px 8px rgba(0,0,0,.45); } 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0), 0 3px 8px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { .rrk-gruppe div { animation: none; } }
.rrk-voll { width: 34px; height: 34px; border: 1px solid var(--ru-line); border-radius: 6px; background: #1a1440; color: var(--ru-paper); font-size: 18px; line-height: 1; cursor: pointer; }
.rrk-voll:hover { background: #231b52; }
.rrk-karte .leaflet-bar a { background: #1a1440; color: var(--ru-paper); border-color: var(--ru-line-2); }
.rrk-karte .leaflet-bar a:hover { background: #231b52; }
.rrk-karte .leaflet-control-attribution { background: rgba(13,10,31,.75); color: var(--ru-paper-50); }
.rrk-karte .leaflet-control-attribution a { color: var(--ru-cyan); }
.rrk-karte .leaflet-popup-content-wrapper, .rrk-karte .leaflet-popup-tip { background: #1a1440; color: var(--ru-paper); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.rrk-karte .leaflet-popup-close-button { color: var(--ru-paper-70); }
.rrk-pop { font: 13px/1.45 Arial, sans-serif; min-width: 170px; }
.rrk-pop strong { display: block; font-size: 14px; margin-bottom: 2px; }
.rrk-pop ul { margin: 6px 0 0; padding: 0 0 0 16px; max-height: 180px; overflow: auto; }
.rrk-pop small { color: var(--ru-paper-50); }
.rrk-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ru-paper-70); margin: 10px 2px 0; }
.rrk-legende span { display: inline-flex; align-items: center; gap: 6px; }
.rrk-legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

@media (max-width: 1100px) { .hl-raster { grid-template-columns: minmax(0, 1fr); } }
/* Handy: Karte nicht höher als der halbe Bildschirm, Tabelle ohne eigenen Scrollbereich */
@media (max-width: 720px) { .rrk-karte { height: 52vh; } .hl-tabelle { max-height: none; } .hl-zahl b { font-size: 52px; } }