/* Gemeinsame Stile der Deutschlandkarten auf Kreisbasis (Kreiskarte, Lkw-Standortkarte).
   Eingebunden von _kreiskarte.php und _lkw.php. */
.kk-rahmen { position: relative; border: 1px solid var(--gitter); border-radius: 12px; background: var(--flaeche); overflow: hidden; }
.kk-svg { display: block; width: 100%; height: min(78vh, 900px); touch-action: pan-y; cursor: grab; }
.kk-svg.zieht { cursor: grabbing; }
.kk-svg .kreis { fill: var(--kk-leer, var(--flaeche-3)); }
.kk-svg .kreis:hover { stroke: var(--text); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.kk-svg .grenze { fill: none; pointer-events: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kk-svg .kreis3 { stroke: var(--flaeche); stroke-width: .7px; }
.kk-svg .land2  { stroke: var(--flaeche); stroke-width: 2px; }
.kk-svg .aussen1 { stroke: var(--text-3); stroke-width: 1px; }
.kk-tipp { position: absolute; display: none; z-index: 4; pointer-events: none; max-width: 260px;
  background: var(--text); color: var(--flaeche); font-size: 13.5px; line-height: 1.45;
  padding: 8px 11px; border-radius: 9px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.kk-tipp.zeigen { display: block; }
.kk-tipp b { font-weight: 650; font-size: 14.5px; }
.kk-tipp .kk-art { display: block; opacity: .7; font-size: 12.5px; margin-bottom: 4px; }
.kk-tipp .kk-wert { font-size: 17px; font-weight: 700; }
.kk-tipp .kk-vgl { display: block; opacity: .8; font-size: 12.5px; margin-top: 3px; }
.kk-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.kk-zoom button { width: 34px; height: 34px; font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  background: var(--flaeche); color: var(--text-2); border: 1px solid var(--gitter); border-radius: 8px; }
.kk-zoom button:hover:not(:disabled) { color: var(--text); background: var(--flaeche-2); }
.kk-zoom button:disabled { opacity: .4; cursor: default; }
.kk-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.kk-laden[hidden] { display: none; }
.kk-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.kk-legende span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.kk-legende i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }
.kk-bedienung { margin: 8px 0 0; }
/* Zusatzebenen (kartenebenen.js): Autobahn zurückhaltend unter den Punkten, Ortsnamen mit Halo */
.ebene-autobahn path { fill: none; stroke: var(--text-3); stroke-width: 1.4px; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; opacity: .8; pointer-events: none; }
.ebene-orte text { fill: var(--text); font-weight: 600; text-anchor: middle; paint-order: stroke;
  stroke: var(--flaeche); stroke-linejoin: round; pointer-events: none; }
.kk-quelle { margin: 4px 0 0; }
/* Autobahnschilder: neutral dunkel statt Schilderblau – Blau ist auf der Lkw-Karte schon eine Datenfarbe */
.ebene-schilder rect { fill: var(--text-2); stroke: var(--flaeche); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.ebene-schilder text { fill: var(--flaeche); font-weight: 700; text-anchor: middle; pointer-events: none; }