/* ═══════════════════════════════════════════════════════════════════════════
   karte-grund-neu.css — lane T-KARTENEU 06.10.2026: the road network of the new base maps + the zoom buttons.
   Loaded AFTER karte.css (it uses karte.css's --lk-* map tokens and the design system's --ton/--rand/--karte).
   ⭐ Dark is the default, light by system or by the switch (`data-farbe` on <html>) — the convention of ds.css
     and karte.css. ⛔ No colour of any game or mod map: our own atlas look (motorway = double line with a core).
   ⭐ Stroke widths stay in SCREEN pixels (vector-effect) — the road groups are scaled ×10 in the SVG.
   ⭐ Road detail follows the zoom: `data-nah` on the svg (set by karte-zoom.js): 0 overview, 1 near, 2 close.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --lk-ab-rand:   rgba(206, 218, 232, .80);   /* motorway casing */
  --lk-ab-kern:   #26364a;                    /* motorway core (a shade above the land) */
  --lk-schnell:   rgba(176, 193, 212, .50);
  --lk-landstr:   rgba(160, 178, 198, .32);
}
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) {
    --lk-ab-rand: #8496aa;
    --lk-ab-kern: #ffffff;
    --lk-schnell: rgba(110, 128, 150, .70);
    --lk-landstr: rgba(120, 138, 160, .45);
  }
}
:root[data-farbe="hell"] {
  --lk-ab-rand: #8496aa;
  --lk-ab-kern: #ffffff;
  --lk-schnell: rgba(110, 128, 150, .70);
  --lk-landstr: rgba(120, 138, 160, .45);
}

.gk-strassen path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.gk-land-str { stroke: var(--lk-landstr); stroke-width: .6; }
.gk-schnell  { stroke: var(--lk-schnell); stroke-width: 1.1; }
/* the motorway: casing + core = ONE path drawn twice — the SVG carries `<g class="gk-ab-kern"><use href="#gk-ab-…"/>`,
   so the core costs 60 bytes, not a second copy of the geometry. ⭐ The stroke sits on the GROUP and the path inherits
   it — that is what lets the <use> copy take the core colour (styles do not reliably reach a <use> shadow copy). */
.gk-ab       { stroke: var(--lk-ab-rand); stroke-width: 2.8; }
.gk-ab-kern  { stroke: var(--lk-ab-kern); stroke-width: 1.1; }

/* overview: main roads hidden, expressways quiet; near: everything */
.live-karte:not([data-nah="1"]):not([data-nah="2"]) .gk-land-str { display: none; }
.live-karte:not([data-nah="1"]):not([data-nah="2"]) .gk-schnell { stroke-width: .8; }
.live-karte:not([data-nah="1"]):not([data-nah="2"]) .gk-ab { stroke-width: 1.7; }
.live-karte:not([data-nah="1"]):not([data-nah="2"]) .gk-ab-kern { stroke-width: .6; }
.live-karte[data-nah="2"] .gk-ab { stroke-width: 3.2; }
.live-karte[data-nah="2"] .gk-ab-kern { stroke-width: 1.3; }
.live-karte[data-nah="2"] .gk-land-str { stroke-width: .9; }

/* ── a crowded map (karte.js hunk ④ sets .lk-voll when more than 24 trips are on the road): the trip lines step back,
      the pills/clusters and the highlighted trip stay in full colour ── */
.live-karte.lk-voll .lk-bogen { stroke-opacity: .28; }
.live-karte.lk-voll .lk-bogen.saum { stroke-opacity: .12; }
.live-karte.lk-voll .lk-bogen.hervor { stroke-opacity: 1; }

/* ── the zoom buttons (bottom right of the stage, glass like the legend) ── */
.lk-zoom { position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 12px; }
.lk-zoom button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rand, rgba(255,255,255,.15)); border-radius: 9px;
  background: var(--karte, #151b24); color: var(--text, #eef3f8); font: 600 18px/1 var(--schrift, system-ui, sans-serif); cursor: pointer; }
.lk-zoom button:hover { border-color: var(--ton, #f0a02a); }
.lk-zoom button:focus-visible { outline: 2px solid var(--ton, #f0a02a); outline-offset: 2px; }
.lk-zoom button[disabled] { opacity: .4; cursor: default; }
.lk-zoom .lk-zoom-zurueck { font-size: 15px; }
.live-karte { touch-action: pan-y; }
.live-karte[data-gezoomt] { touch-action: none; cursor: grab; }
.live-karte.lk-zieht { cursor: grabbing; }
.live-buehne:focus-visible { outline: 2px solid var(--ton, #f0a02a); outline-offset: 2px; }
@media (max-width: 699px) { .lk-zoom { right: 8px; top: 8px; } .lk-zoom button { width: 40px; height: 40px; } }

/* ═══ T-KARTE2 06.10.2026 ═══════════════════════════════════════════════════════════════════════════════════════
   ① the players' cluster pill „∑ n" (karte.js stage-2 hunk ⑤) takes the violet of the layer „Fahrer unterwegs" —
     the colour comes from --c, set by karte.js; nothing to add but the focus ring colour.
   ② the list under the map for 1000+ (hunk ⑦, class .lk-fl2 on karte.js's .lk-fl): key numbers/chips, tabs, search,
     collapsible groups, „n weitere anzeigen". Uses the design tokens of karte.css (--mulde, --rand, --matt, --text, --ton). */
.live-karte .lk-spu-haufen .ring-fokus { stroke: var(--lk-spu); }

.lk-fl2-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.lk-fl.lk-fl2 h3 { margin: 0 0 var(--ab-klein, 8px); }
.lk-fl2-welt { font-size: 13px; color: var(--matt); }
.lk-fl2-reiter { display: flex; gap: 2px; margin: 0 0 12px; border-bottom: 1px solid var(--rand); overflow-x: auto; }
.lk-fl2-reiter[hidden] { display: none; }
.lk-fl2-reiter button {
  font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
  background: transparent; color: var(--matt); border: 0; border-bottom: 2px solid transparent;
  padding: 7px 12px 9px; margin-bottom: -1px;
}
.lk-fl2-reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--ton); font-weight: 600; }
.lk-fl2-reiter button b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--matt); margin-left: 4px; }
.lk-fl2-zahlen { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px; align-items: center; }
.lk-fl2-chip {
  font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rand); background: var(--mulde); color: var(--text);
}
.lk-fl2-chip i { font-style: normal; font-weight: 800; color: var(--c, var(--ton)); }
.lk-fl2-chip em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.lk-fl2-chip:hover:not([disabled]) { border-color: var(--c, var(--ton)); }
.lk-fl2-chip[aria-pressed="true"] { border-color: var(--c, var(--ton)); box-shadow: inset 0 0 0 1px var(--c, var(--ton)); }
.lk-fl2-chip[disabled] { opacity: .45; cursor: default; }
.lk-fl2-kz { font-size: 13.5px; color: var(--matt); padding: 4px 12px 4px 0; }
.lk-fl2-kz b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.lk-fl2-werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.lk-fl2-suche {
  flex: 1 1 240px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 12px;
  border-radius: 8px; border: 1px solid var(--rand); background: var(--mulde); color: var(--text);
}
.lk-fl2-suche::placeholder { color: var(--matt); }
.lk-fl2-ordnung { display: flex; flex-wrap: wrap; gap: 4px; }
.lk-fl2-ordnung button {
  font: inherit; font-size: 13px; cursor: pointer; padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--rand); background: transparent; color: var(--matt);
}
.lk-fl2-ordnung button[aria-pressed="true"] { color: var(--text); border-color: var(--ton); }
.lk-fl2 button:focus-visible, .lk-fl2-suche:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.lk-fl2-treffer { margin: 4px 0 6px; font-size: 13px; color: var(--matt); }
.lk-fg { border-top: 1px solid var(--rand); }
.lk-fg:first-child, .lk-fl2-treffer + .lk-fg { border-top: 0; }
.lk-fg-kopf {
  font: inherit; font-size: 14.5px; font-weight: 600; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; background: transparent; border: 0; color: var(--text); cursor: pointer; text-align: left;
}
.lk-fg-kopf .lk-fl-zahl { margin-left: auto; }
.lk-fg-zeichen { font-style: normal; font-weight: 800; color: var(--c); display: inline-block; min-width: 1.2em; }
.lk-fg-pfeil {
  flex: none; width: 7px; height: 7px; margin: 0 3px 2px; border-right: 2px solid var(--matt); border-bottom: 2px solid var(--matt);
  transform: rotate(-45deg); transition: transform .15s;
}
.lk-fg-kopf[aria-expanded="true"] .lk-fg-pfeil { transform: rotate(45deg); margin-bottom: 4px; }
.lk-fg.offen { padding-bottom: 12px; }
.lk-fl2-rest { color: var(--matt); }
.lk-fl-spu .lk-fl-nr { min-width: 46px; }
@media (prefers-reduced-motion: reduce) { .lk-fg-pfeil { transition: none; } }
@media (max-width: 699px) {
  .lk-fl2-suche { flex-basis: 100%; }
  .lk-fl2-chip { padding: 5px 10px; }
}

/* RD-KARTE 07.10.2026 (lane C-HP-KARTE-ZOOM): ① players' dot clusters „∑ n" (karte_js_bruecke3.py) — dark + light via
   the map tokens · ② phone width: below 1100 px .live-blick had an implicit `auto` column that grew to the list's
   widest row (live.html at 375 px scrolled sideways to 453 px) -> one shrinkable column */
.live-karte .lk-sp-haufen { cursor: zoom-in; }
.live-karte .lk-sp-haufen circle.b { fill: var(--lk-spieler); fill-opacity: .9; stroke: var(--lk-punktrand); stroke-width: 1.6; }
.live-karte .lk-sp-haufen text { fill: var(--lk-punktrand); font-weight: 800; font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.live-karte .lk-sp-haufen text.g3 { font-size: 9.5px; letter-spacing: -.2px; }
.live-karte .lk-sp-haufen.hervor circle.b { stroke: var(--text); stroke-width: 2.4; }
.live-blick { grid-template-columns: minmax(0, 1fr); }
.live-blick > * { min-width: 0; }

/* RD-KARTE Feinschliff 07.10.2026: the players' bubbles lie in their own layer UNDER the town names (names keep
   their halo on top) — the bubble itself a touch more transparent so a name or road under its edge still reads */
.live-karte .lk-schicht-sphaufen .lk-sp-haufen circle.b { fill-opacity: .82; }
.live-karte .lk-schicht-sphaufen .lk-sp-haufen text { paint-order: stroke; stroke: var(--lk-spieler); stroke-width: 2px; }

/* KARTE-JETZT kopf frei */
/* KARTE-JETZT 07.10.2026: the „Stand"/„Heute" pills keep the zoom column (.lk-zoom, top right) free and wrap. */
.live-buehne .live-kopf { max-width: calc(100% - 84px); }
@media (max-width: 640px) { .live-buehne .live-kopf { max-width: none; padding-right: 60px; } }

/* RD-KARTE-NE */
/* 07.10.2026: Natural-Earth roads outside the base game (ProMods regions) — SCHEMATIC on purpose:
   one thin warm-grey line, no casing, no motorway double line, so it never looks like the game-derived network.
   Level of detail: overview = the main roads only, coarse (gk-ne-grob); from 2.2x (data-nah 1) the same main roads
   finer (gk-ne-haupt) + all other roads (gk-ne-neben); from 5x (data-nah 2) bolder. */
:root {
  --lk-ne-haupt: rgba(232, 210, 168, .78);
  --lk-ne-neben: rgba(220, 202, 170, .52);
  --lk-ne-text:  rgba(226, 232, 240, .62);
}
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) {
    --lk-ne-haupt: rgba(132, 96, 48, .82);
    --lk-ne-neben: rgba(140, 108, 70, .58);
    --lk-ne-text:  rgba(40, 52, 68, .62);
  }
}
:root[data-farbe="hell"] {
  --lk-ne-haupt: rgba(132, 96, 48, .82);
  --lk-ne-neben: rgba(140, 108, 70, .58);
  --lk-ne-text:  rgba(40, 52, 68, .62);
}
.gk-ne path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.gk-ne-haupt { stroke: var(--lk-ne-haupt); stroke-width: 1.3; }
.gk-ne-neben { stroke: var(--lk-ne-neben); stroke-width: .9; }
.gk-ne-grob  { stroke: var(--lk-ne-haupt); stroke-width: 1.1; }
.live-karte:not([data-nah="1"]):not([data-nah="2"]) .gk-ne-neben,
.live-karte:not([data-nah="1"]):not([data-nah="2"]) .gk-ne-haupt,
.live-karte[data-nah="1"] .gk-ne-grob, .live-karte[data-nah="2"] .gk-ne-grob { display: none; }
.live-karte[data-nah="2"] .gk-ne-haupt { stroke-width: 1.7; }
.live-karte[data-nah="2"] .gk-ne-neben { stroke-width: 1.1; }
.lk-ne-quelle { position: absolute; right: 12px; bottom: 6px; z-index: 1; font-size: 10.5px; line-height: 1.3;
  color: var(--lk-ne-text); pointer-events: none; max-width: 46%; text-align: right; }
.lk-ne-quelle[hidden] { display: none; }
.lk-zoom-hinweis { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; color: #fff; background: rgba(12, 18, 28, .78);
  pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.lk-zoom-hinweis.an { opacity: 1; }
.live-karte { cursor: grab; }
@media (max-width: 699px) {
  .lk-ne-quelle { position: static; display: block; max-width: none; text-align: left; padding: 4px 12px 6px; }
  .lk-zoom-hinweis { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lk-zoom-hinweis { transition: none; } }