/* UI-V6b (Doku/14_ARCHITEKTUR_V6.md §7–§13): Wege-Werkzeug Bauen/Abreißen + Rodungs-Vorschau, Ausbildung + Kinder im Siedler-Panel,
   Ressourcenfluss im Lager-Panel, Nachbarn im Startmenü/Neues Spiel, Fraktionsinseln auf Weltkarte/Globus.
   Eingebunden per <link data-sb="ui-v6b"> aus ui/v6b-common.js (ensureV6bCss), bis index.html die Zeile hat (ANFRAGEN_UI-V6b §1).
   Regeln: Trefferflächen ≥ 44 px, 360 px ohne waagrechtes Scrollen, Tablet (ui-tablet.css) unverändert gültig. */

/* ---------- Wege-Werkzeug ---------- */
#ui .pt-mode { margin-top: 10px; display: flex; gap: 4px; }
#ui .pt-mode .pt-modebtn { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; min-width: 0; }
#ui .pt-mode .pt-modebtn .ic { flex: none; }
#ui .pt-mode .pt-modebtn.active[data-modus="abreissen"] { color: var(--danger); }
#ui .pt-mode .pt-modebtn:disabled, #ui .pt-mode .pt-modebtn.folgt { opacity: .5; cursor: default; }
#ui .pt-card.abreissen .pt-ic { color: var(--danger); background: rgba(229, 72, 77, .12); }
#ui .pt-card.abreissen .pt-hint { background: rgba(229, 72, 77, .08); }
#ui .pt-roden { margin-top: 6px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 210, 63, .28); color: #6A4A00; font-size: 13px; line-height: 1.25; }
#ui .pt-roden .ic { flex: none; color: #8A6A00; }
#ui .pt-roden b { font-weight: 800; }
#ui .pt-roden small { color: #8A6A3A; font-weight: 600; }
#ui .pt-warn.soft { color: var(--ink2); }
/* niedrige Bildschirme: Hinweistext weg (der Umschalter braucht die Zeile), Karte bleibt kompakt */
@media (max-height: 720px) {
  #ui .pt-card .pt-hint { display: none; }
  #ui .pt-root.move .pt-card .pt-hint { display: block; }
  #ui .pt-mode { margin-top: 8px; }
  #ui .pt-row { margin-top: 8px; }
}

/* ---------- Siedler: Ausbildung ---------- */
#ui .v6b-train .v6b-urow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .06); min-width: 0; }
#ui .v6b-train .v6b-urow:first-of-type { border-top: 0; }
#ui .v6b-uic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--card2); display: flex; align-items: center; justify-content: center; color: #6A5A3A; }
#ui .v6b-umain { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ui .v6b-uname { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }
#ui .v6b-ulvl { font-size: 12px; color: var(--ink2); font-weight: 700; }
#ui .v6b-pips { display: inline-flex; gap: 3px; }
#ui .v6b-pips i { width: 14px; height: 6px; border-radius: 3px; background: var(--card3); display: inline-block; }
#ui .v6b-pips i.on { background: var(--primary); }
#ui .v6b-urow.max .v6b-pips i.on { background: var(--gold); }
#ui .v6b-uwirk { font-size: 12.5px; color: var(--ink); font-weight: 600; }
#ui .v6b-ukost { font-size: 12.5px; }
#ui .v6b-cost { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
#ui .v6b-c { display: inline-flex; align-items: center; gap: 3px; }
#ui .v6b-c small { color: var(--ink2); }
#ui .v6b-urow.nok .v6b-cost { color: var(--danger); }
#ui .v6b-ugrund { font-size: 12px; color: var(--danger); display: flex; align-items: center; gap: 4px; }
#ui .v6b-urow .v6b-up { flex: none; min-width: 96px; min-height: 44px; margin-right: 3px; }
#ui .v6b-folgt { margin-top: 4px; }

/* ---------- Siedler: Kinder ---------- */
#ui .v6b-kidhint { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(63, 174, 90, .12); font-size: 13px; line-height: 1.3; }
#ui .v6b-kidhint .ic { flex: none; margin-top: 1px; color: var(--success); }
#ui .v6b-kidhint small { color: var(--ink2); font-weight: 600; }
#ui .v6b-kidhint.wait { background: var(--card2); color: var(--ink2); }
#ui .v6b-kidhint.wait .ic { color: var(--ink2); }
#ui .v6b-assign .v6b-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#ui .v6b-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--card3); background: #fff; font-weight: 700; font-size: 13px; color: var(--ink); cursor: pointer; max-width: 100%; }
#ui .v6b-chip small { color: var(--ink2); font-weight: 600; }
#ui .v6b-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#ui .v6b-chip .v6b-chip-tip { color: #B8860B; }
#ui .v6b-chip:active { transform: scale(.97); }
#ui .v6b-kidpurse .v6b-tip { color: #6A4A00; font-weight: 700; }
#ui .v6b-assign-none { padding: 6px 2px; }

/* ---------- Lager: Ressourcenfluss ---------- */
#ui .v6b-flowbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; min-width: 0; }
#ui .v6b-flowhint { font-size: 11.5px; color: var(--ink2); flex: 1 1 160px; min-width: 0; line-height: 1.3; }
#ui .v6b-flowseg { flex: none; margin-right: 3px; }
#ui .v6b-flowseg button { min-height: 44px; font-size: 12px; padding: 0 10px; }
#ui .lg3-row.v6b-hasflow { flex-wrap: wrap; row-gap: 0; }
#ui .lg3-row .v6b-flow { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 0 0 2px 24px; margin-top: -2px; font-size: 11px; line-height: 1.25; font-variant-numeric: tabular-nums; min-width: 0; }
#ui .lg3-row .v6b-flow.hidden { display: none; }
#ui .v6b-flow .f-plus { color: #2F8F48; font-weight: 800; }
#ui .v6b-flow .f-minus { color: #C9393E; font-weight: 800; }
#ui .v6b-flow .f-net { color: var(--ink2); font-weight: 700; }
#ui .v6b-flow .f-net.pos { color: #2F8F48; }
#ui .v6b-flow .f-net.neg { color: #C9393E; }
#ui .v6b-flow .f-reach { color: var(--ink2); font-weight: 600; }
#ui .v6b-flow .f-reach.low { color: #B86A00; font-weight: 800; }
#ui .v6b-flow .f-reach.crit { color: var(--danger); font-weight: 800; }

/* ---------- Startmenü / Neues Spiel: Nachbarn ---------- */
#ui .v6b-nb { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#ui .v6b-nb-t { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--ink2); }
#ui .v6b-nb-seg button { flex: 1 1 auto; min-height: 46px; }
#ui .v6b-nb-text { color: var(--ink); line-height: 1.35; }
#ui .v6b-nb-hint { line-height: 1.3; }

/* ---------- Weltkarte: Fraktionsinseln ---------- */
#ui .wm-fkhole .sea { fill: rgba(63, 167, 224, .9); }
#ui .wm-fkhole .ring { fill: none; stroke-width: 1.6; stroke-opacity: .9; vector-effect: non-scaling-stroke; }
#ui .wm-fkhole .sand { fill: #F2D49A; }
#ui .wm-fkhole .land { fill: #6FA35A; }
#ui .wm-fk .pole { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
#ui .wm-fk .flag { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
#ui .wm-fk .base { fill: rgba(255, 255, 255, .92); stroke: var(--ink); stroke-width: 1.2; }
#ui .wm-fk text { text-anchor: middle; font-weight: 800; font-size: 12.5px; fill: #fff; paint-order: stroke; stroke: var(--fk, #2B2A33); stroke-width: 3.2px; stroke-linejoin: round; }
#ui .wm-fk text.sub { font-size: 10px; font-weight: 700; stroke: rgba(0, 0, 0, .6); stroke-width: 2.5px; }
#ui .wm-fk.feind .flag { stroke: #7A1D20; stroke-width: 1.6; }
#ui .wm-fk.has-label text { display: none; }
#ui .wm-svg.wm-far .wm-fk text.sub { display: none; }
#ui .wm-fk.pressed { opacity: .75; }
#ui .wm-legend .v6b-lgflag .ic { color: var(--ink2); }
#ui .v6b-fklegend { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; min-width: 0; }
#ui .v6b-fklegend.hidden { display: none; }
#ui .v6b-fkchip { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .1); background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 800; cursor: pointer; max-width: 100%; min-width: 0; }
#ui .v6b-fkchip small { color: var(--ink2); font-weight: 600; white-space: nowrap; }
#ui .v6b-fkchip .v6b-fkname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#ui .v6b-fkflag { width: 14px; height: 10px; flex: none; clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
#ui .v6b-fkchip.feind { border-color: rgba(229, 72, 77, .5); }
#ui .v6b-fkchip.freund { border-color: rgba(63, 174, 90, .5); }
@media (max-width: 400px) { #ui .v6b-fkchip small { display: none; } }
#ui .v6b-unext { font-size: 12px; color: var(--primary2); font-weight: 700; display: flex; align-items: center; gap: 3px; }
#ui .v6b-urow.nok .v6b-unext { color: var(--ink2); }

/* ---------- Zeitraum-Umschalter (ui/zeitraum.js, gemeinsam: Ressourcen, Büro-Einnahmen, Bilanz) ---------- */
#ui .zr-switch { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; }
#ui .zr-switch .zr-btn { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
/* Wege-Werkzeug: Zurück-Knopf mit voller Trefferfläche */
#ui .pt-card .pt-back { min-width: 44px; min-height: 44px; }

/* ---------- §19 Herkunft/Ziel (ui/fluss-detail.js) ---------- */
#ui .lg3-row.v6b-flowon { cursor: pointer; }
#ui .lg3-row.v6b-flowon:active { background: rgba(0, 0, 0, .03); }
#ui .v6b-flow .f-chev { color: var(--ink3); margin-left: auto; display: inline-flex; }
#ui .v6b-fdet-wrap { margin: 0 0 6px 0; }
#ui .v6b-fdet-wrap.hidden { display: none; }
#ui .v6b-fdet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 12px; background: var(--card2); min-width: 0; }
@media (max-width: 420px) { #ui .v6b-fdet { grid-template-columns: minmax(0, 1fr); } }
#ui .v6b-fd-col { min-width: 0; }
#ui .v6b-fd-h { font-size: 11.5px; font-weight: 800; color: var(--ink2); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
#ui .v6b-fd-h small { text-transform: none; letter-spacing: 0; font-weight: 600; }
#ui .v6b-fd-list { display: flex; flex-direction: column; gap: 2px; }
#ui .v6b-fd-row { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: 13px; min-width: 0; color: var(--ink); }
#ui button.v6b-fd-row { min-height: 44px; width: 100%; border: 0; border-radius: 10px; background: #fff; padding: 0 8px; text-align: left; cursor: pointer; font: inherit; font-size: 13px; }
#ui button.v6b-fd-row:active { transform: scale(.98); }
#ui .v6b-fd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ui .v6b-fd-row b { font-variant-numeric: tabular-nums; flex: none; }
#ui .v6b-fd-row b.plus { color: #2F8F48; }
#ui .v6b-fd-row b.minus { color: #C9393E; }
#ui .v6b-fd-go { color: var(--ink3); flex: none; display: inline-flex; }
#ui .v6b-fd-empty, #ui .v6b-fd-more { font-size: 12px; color: var(--ink2); padding: 4px 0; }
#ui .v6b-lglinks, #ui .v6b-rlinks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 3px 8px 0; }
#ui .v6b-lglinks .btn, #ui .v6b-rlinks .btn { min-height: 44px; }

/* ---------- §19 Panel „Ressourcenmanagement“ ---------- */
#ui .v6b-res-full .full-head { flex: none; min-width: 0; }
#ui .v6b-res-full .full-body { padding-bottom: calc(var(--sab) + 24px); overflow-x: hidden; min-width: 0; }
#ui .v6b-res-head { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-bottom: 6px; }
#ui .v6b-res-head .panel-head { padding-right: 4px; }
#ui .v6b-res-isl { display: flex; flex-wrap: wrap; gap: 6px; }
#ui .v6b-res-isl.hidden { display: none; }
#ui .v6b-islchip { min-height: 44px; }
#ui .v6b-islchip.active { background: var(--primary); color: #fff; }
#ui .v6b-res-hint { line-height: 1.3; }
#ui .v6b-rtab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ui .v6b-rhead, #ui .v6b-rrow { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px 60px 46px; align-items: center; column-gap: 6px; min-width: 0; }
#ui .v6b-rhead { font-size: 11.5px; font-weight: 800; color: var(--ink2); padding: 4px 8px; text-transform: uppercase; letter-spacing: .03em; }
#ui .v6b-rhead span:not(.c-w), #ui .v6b-rrow span.c-p, #ui .v6b-rrow span.c-m, #ui .v6b-rrow span.c-n, #ui .v6b-rrow span.c-r { text-align: right; font-variant-numeric: tabular-nums; }
#ui .v6b-rrow { min-height: 48px; padding: 6px 8px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; row-gap: 2px; }
#ui .v6b-rrow:active { transform: scale(.99); }
#ui .v6b-rrow[aria-expanded="true"] { border-radius: 12px 12px 4px 4px; box-shadow: inset 0 0 0 2px rgba(82, 79, 254, .25); }
#ui .v6b-rrow .c-w { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
#ui .v6b-rname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#ui .v6b-rchev { color: var(--ink3); flex: none; display: inline-flex; }
#ui .v6b-rrow .c-p { color: #2F8F48; font-weight: 800; }
#ui .v6b-rrow .c-m { color: #C9393E; font-weight: 800; }
#ui .v6b-rrow .c-n { font-weight: 800; color: var(--ink2); }
#ui .v6b-rrow .c-n.pos { color: #2F8F48; } #ui .v6b-rrow .c-n.neg { color: #C9393E; }
#ui .v6b-rrow .c-r { color: var(--ink2); font-size: 12px; }
#ui .v6b-rrow .c-r.low { color: #B86A00; font-weight: 800; } #ui .v6b-rrow .c-r.crit { color: var(--danger); font-weight: 800; }
#ui .v6b-rsum { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-left: 24px; }
#ui .v6b-rtab .v6b-fdet { margin: 0 0 6px; border-radius: 4px 4px 12px 12px; }
#ui .v6b-rnone, #ui .v6b-rstill { padding: 8px 4px; }
@media (max-width: 380px) { #ui .v6b-rhead, #ui .v6b-rrow { grid-template-columns: minmax(0, 1fr) 46px 46px 52px 40px; column-gap: 4px; } #ui .v6b-rrow { font-size: 12.5px; padding: 6px; } }
@media (min-width: 900px) { #ui .v6b-res-full .full-body, #ui .v6b-res-full .full-head { width: 100%; max-width: 980px; margin: 0 auto; } }

/* ---------- §19 Panel „Gebäude-Status“ ---------- */
#ui .v6b-st-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 3px 2px 0; min-width: 0; }
#ui .v6b-st-filter { min-height: 44px; }
#ui .v6b-st-filter.on { background: var(--primary); color: #fff; }
#ui .v6b-st-filter.on .ic { color: #fff; }
#ui .v6b-st-counts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
#ui .v6b-st-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: var(--card3); color: var(--ink2); }
#ui .v6b-st-chip.st-ok { background: rgba(63, 174, 90, .16); color: #2F8F48; }
#ui .v6b-st-chip.st-grau { background: #E4E2E8; color: #5E5B6B; }
#ui .v6b-st-chip.st-orange { background: rgba(232, 134, 46, .18); color: #A85A10; }
#ui .v6b-st-chip.st-rot { background: rgba(229, 72, 77, .16); color: #B8292E; }
#ui .v6b-st-chip.st-blau { background: rgba(63, 167, 224, .18); color: #1F6FA0; }
#ui .v6b-st-chip.st-braun { background: rgba(138, 106, 69, .18); color: #6A4A25; }
#ui .v6b-st-chip.st-bau { background: rgba(82, 79, 254, .14); color: var(--primary2); }
#ui .v6b-st-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .06); min-width: 0; }
#ui .v6b-st-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--card2); display: flex; align-items: center; justify-content: center; }
#ui .v6b-st-row.st-rot .v6b-st-ic { box-shadow: inset 0 0 0 2px rgba(229, 72, 77, .5); }
#ui .v6b-st-row.st-orange .v6b-st-ic { box-shadow: inset 0 0 0 2px rgba(232, 134, 46, .5); }
#ui .v6b-st-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ui .v6b-st-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; min-width: 0; }
#ui .v6b-st-why { font-size: 12.5px; color: var(--ink2); line-height: 1.3; }
#ui .v6b-st-since { font-size: 11px; color: var(--ink3); }
#ui .v6b-st-go { flex: none; min-width: 64px; min-height: 44px; margin-right: 3px; }
#ui .v6b-st-src { margin-top: 8px; }
/* schmale Handys: Kopf der Werkzeugkarte ohne Symbolkachel, Titel kürzt statt zu überlappen */
#ui .pt-card .pt-title { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { #ui .pt-card .pt-ic { display: none; } #ui .pt-card .pt-title { font-size: 16px; } }