/* Stadtkarte: Lagefarbe, Schraffur und Besitzerpunkt bleiben voneinander unterscheidbar. */
.city-map-wrap {max-width:100%; overflow:auto; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg);}
.city-map {display:block; width:100%; max-width:720px; height:auto; margin:0 auto;}
.city-cell {cursor:pointer;}
.city-cell rect {fill:#303d43; stroke:none; transition:stroke .1s,filter .1s;}
.city-cell .city-edge {fill:none; stroke:#53636d; stroke-width:1.5; stroke-linecap:square; pointer-events:none;}
.city-cell:hover rect {stroke:var(--accent); stroke-width:2; filter:brightness(1.12);}
.city-cell:focus-visible {outline:none;}
.city-cell:focus-visible rect {stroke:var(--accent); stroke-width:3;}
.city-cell[data-art=frei] rect {fill:#74b898;}
.city-cell[data-art=frei] .city-edge {stroke:#9dd6b8;}
.city-cell[data-art=eigen] rect {fill:#386f56;}
.city-cell[data-art=eigen] .city-edge {stroke:#bcf2cf; stroke-width:2;}
.city-cell[data-art=fremd] rect {fill:#65747e;}
.city-cell[data-art=fremd] .city-edge {stroke:#8495a0;}
.city-cell[data-art=gesperrt] rect {fill:#aa7771;}
.city-cell[data-art=gesperrt] .city-edge {stroke:#e99b91;}
.city-cell[data-art="eigen-gesperrt"] rect {fill:#804c45;}
.city-cell[data-art="eigen-gesperrt"] .city-edge {stroke:#ffc4ac; stroke-width:2;}
.city-legend {display:flex; flex-wrap:wrap; gap:12px 20px; margin:0 0 18px; padding:0; list-style:none; font-size:12px; line-height:1.5; color:var(--muted);}
.city-legend li {display:flex; align-items:center; gap:8px;}
.city-key {width:16px; height:16px; flex:none; border-radius:4px; display:inline-block; background:#303d43; border:1px solid #53636d;}
.city-key[data-art=frei] {background:#74b898; border-color:#9dd6b8;}
.city-key[data-art=eigen] {background:#386f56; border-color:#bcf2cf;}
.city-key[data-art=fremd] {background:#65747e; border-color:#8495a0;}
.city-key[data-art=gesperrt] {background:#aa7771; border-color:#e99b91;}
.city-key[data-art="eigen-gesperrt"] {background:#804c45; border-color:#ffc4ac;}
#cityPanel td button {min-height:40px; padding:9px 12px;}

/* Lagen bilden eine feste Kartenlegende; Eigentum wird zusaetzlich durch Muster markiert. */
.city-cell[data-lage] .city-fill {fill:#7c8990;}
.city-cell[data-lage="0"] .city-fill, .city-key[data-lage="0"] {fill:#d9b655; background:#d9b655;}
.city-cell[data-lage="1"] .city-fill, .city-key[data-lage="1"] {fill:#d69368; background:#d69368;}
.city-cell[data-lage="2"] .city-fill, .city-key[data-lage="2"] {fill:#77a7c5; background:#77a7c5;}
.city-cell[data-lage="3"] .city-fill, .city-key[data-lage="3"] {fill:#84b794; background:#84b794;}
.city-cell[data-lage="4"] .city-fill, .city-key[data-lage="4"] {fill:#b8bb8c; background:#b8bb8c;}
.city-cell[data-lage="zentrum"] .city-fill, .city-key[data-lage="zentrum"] {fill:#c99be0; background:#c99be0;}
.city-key[data-lage] {border-color:#ffffff40;}
.city-cell[data-lage][data-art] .city-edge {stroke:#11181c; stroke-width:1.5;}
.city-map:not(.city-map-neu) .city-cell[data-art] .city-mark {fill:url(#city-schraffur);}
.city-map .city-cell .city-mark {pointer-events:none;}
.city-hatch {stroke:#182126aa; stroke-width:2.2;}
.city-map .city-cell[data-lage][data-art=fremd] .city-fill {opacity:.58;}
.city-map .city-cell[data-art=gesperrt] .city-mark, .city-map .city-cell[data-art="eigen-gesperrt"] .city-mark {fill:#bb5b59aa;}
.city-cell[data-lage][data-art=eigen] .city-edge, .city-cell[data-lage][data-art="eigen-gesperrt"] .city-edge {stroke:#ecf8ee; stroke-width:3;}
.city-cell .city-dot {fill:#182126; stroke:#edf0e9; stroke-width:1.5; pointer-events:none;}
.city-cell[data-art=fehlt] .city-fill {opacity:.3;}
.city-cell .city-missing {stroke:#11181caa; stroke-width:1.5; fill:none; pointer-events:none;}
.city-cell[data-versorgung=nein] .city-fill {stroke:#b33f3b; stroke-width:2.5; stroke-dasharray:3 2;}
.city-center {cursor:pointer;}
.city-center rect {fill:#3b4b53; stroke:#80919a; stroke-width:1.5;}
.city-center text {font:600 11px system-ui,sans-serif; fill:var(--ink); pointer-events:none;}
.city-center:hover rect, .city-center:focus-visible rect {stroke:var(--accent); stroke-width:2.5;}
.city-center:focus-visible {outline:none;}
.city-key[data-art=frei] {background:#d9b655; border-color:#11181c; box-shadow:0 0 0 1px var(--line);}
.city-key[data-art=fremd] {background:repeating-linear-gradient(45deg,#65747e 0 3px,#273840 3px 5px); border-color:#8495a0;}
.city-key[data-art=eigen] {background:radial-gradient(circle,#182126 0 3px,#d9b655 3.5px); border:2px solid #ecf8ee;}
.city-key[data-art=gesperrt] {background:repeating-linear-gradient(45deg,#aa7771 0 3px,#b33f3b 3px 5px); border-color:#e99b91;}
.city-key[data-art=zentrum] {background:#3b4b53; border-color:#80919a;}
.city-legend-lagen li {align-items:flex-start;}
.city-legend-lagen small {display:block; color:var(--muted); font-size:11px; margin-top:3px;}
.city-info {min-height:3.4em; margin:16px 0 6px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:13px; line-height:1.65;}
@media(max-width:600px) {
  .city-map-wrap {padding:10px;}.city-legend {gap:12px 14px;}
  .city-legend-lagen {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .city-info {font-size:12px; padding:11px; min-height:4.5em;}
}
@media(prefers-reduced-motion:reduce) {.city-cell rect {transition:none;}}

/* Neue Stadt: Flaechenraster mit Wegen, Parks, Zentrum, Nummern und Anwesen-Namen. */
.city-map-neu {max-width:min(100%,980px);}
.city-map-wrap:has(.city-map-neu) {max-height:78vh; padding:10px;}
.city-map-wrap.city-gezoomt .city-map-neu {margin:0;}
.city-map-neu .city-cell[data-flaeche=weg] .city-fill {fill:#59636a;}
.city-map-neu .city-cell[data-flaeche=weg][data-weg=kreuzung] .city-fill {fill:#626d74;}
.city-map-neu .city-cell[data-flaeche=weg][data-weg=hauptachse] .city-fill {fill:#a3adb3;}
.city-map-neu .city-cell[data-flaeche=weg][data-weg=hauptachse] {cursor:help;}
.city-map-neu .city-cell[data-flaeche=park] .city-fill {fill:#4c8b4f;}
.city-map-neu .city-cell[data-flaeche=park] {cursor:help;}
.city-map-neu .city-hatch-bg {fill:transparent;}
.city-map-neu .city-cell .city-nr {font:700 11px system-ui,sans-serif; fill:#11181c; paint-order:stroke; stroke:#ffffffb0; stroke-width:2.2px; pointer-events:none;}
.city-map-neu .city-cell[data-art=fremd] .city-nr, .city-map-neu .city-cell[data-art=gesperrt] .city-nr {fill:#f3f5f2; stroke:#11181cc0;}
.city-map-neu .city-names text {font:700 10px system-ui,sans-serif; fill:#ffffff; paint-order:stroke; stroke:#11181c; stroke-width:3px; stroke-linejoin:round; pointer-events:none;}
.city-map-neu .city-center rect {fill:#7d6bb0; stroke:#c8bdf0; stroke-width:1.5;}
.city-map-neu .city-center .city-center-name {font:700 12px system-ui,sans-serif; fill:#ffffff; paint-order:stroke; stroke:#2d2450; stroke-width:3px;}
.city-map-neu .city-arrival circle {fill:#e5484d; stroke:#ffffff; stroke-width:2;}
.city-map-neu .city-arrival path {stroke:#ffffff; stroke-width:2; stroke-linecap:round; fill:none;}
.city-map-neu .city-arrival {pointer-events:none;}
.city-map-neu .city-cell .city-hl {fill:#ff4fa340; stroke:#ff4fa3; stroke-width:3; pointer-events:none;}
.city-map-neu .city-cell .city-dot {stroke-width:1;}
.city-dicht .city-nr, .city-dicht .city-names, .city-dicht .city-center-name {display:none;}
.city-zoom {display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px;}
.city-zoom button {min-width:40px; min-height:36px;}
.city-zoom .work-note {margin:0;}
.city-key[data-flaeche=weg] {background:#59636a; border-color:#7c8990;}
.city-key[data-flaeche=hauptachse] {background:#a3adb3; border-color:#c9d0d4;}
.city-key[data-flaeche=park] {background:#4c8b4f; border-color:#7cc17f;}
.city-key[data-flaeche=zentrum] {background:#7d6bb0; border-color:#c8bdf0;}
.city-key[data-flaeche=ankunft] {background:#e5484d; border:2px solid #ffffff; border-radius:50%;}
.city-map-vorschau {margin:12px 0;}
.city-map-vorschau .city-map-neu, .city-map-klein {max-width:360px;}
.city-warp {margin-top:14px;}
#cityPanel [data-city-orte] td button, #cityPanel [data-city-antraege] td button {margin:2px 4px 2px 0;}
@media(max-width:600px) {
  .city-map-wrap:has(.city-map-neu) {max-height:70vh; padding:6px;}
  .city-zoom .work-note {flex-basis:100%; font-size:12px;}
}
[data-stadt-verwaltung] > h3 {margin:22px 0 10px;}
.verwaltung-antrag {margin-top:12px;}

/* Zentrumsmiete: Mietflaechen gestrichelt umrandet, freie Mietflaeche mit gestricheltem Innenrahmen. */
.city-map-neu .city-cell[data-vergabe=miete] .city-edge {stroke-dasharray:4 3;}
.city-map-neu .city-cell .city-miete {fill:none; stroke:#2d2450; stroke-width:1.5; stroke-dasharray:3 2; pointer-events:none;}
.city-map-neu .city-cell:hover .city-miete {stroke:#2d2450; stroke-width:1.5; filter:none;}
.city-key[data-art="miete-frei"] {background:#c99be0; border:2px dashed #2d2450;}
.city-laufzeit {display:flex; flex-wrap:wrap; gap:8px 18px;}
.city-laufzeit label {display:flex; align-items:center; gap:6px; min-height:40px;}
.city-laufzeit small {color:var(--muted);}
.city-miete-hinweis {font-weight:600;}
.city-miete-hinweis[data-hinweis=laeuft_ab] {color:#d9a03a;}
.city-miete-hinweis[data-hinweis=schonfrist], .city-miete-hinweis[data-hinweis=raeumen] {color:#e5484d;}
#cityPanel [data-city-mieten] td button {margin:2px 4px 2px 0;}

/* Stadtgebiete (test.24): Name dezent auf dem Weg ueber jedem Block; im dichten Massstab nur im Tooltip. */
.city-map-neu .city-gebiete text {font:italic 600 10px system-ui,sans-serif; letter-spacing:.02em; fill:#eef2ea; opacity:.82; paint-order:stroke; stroke:#11181ca8; stroke-width:2.4px; stroke-linejoin:round; pointer-events:none;}
.city-dicht .city-gebiete {display:none;}
[data-wegkauf-grund] {margin-top:8px;}

/* Deine Grundstuecke: je Anwesen eine Karte, Untergrundstuecke aufklappbar (375 px ohne Querscrollen). */
.city-anwesen-liste {display:grid; gap:12px; margin:0; padding:0; list-style:none;}
.city-anwesen {min-width:0; padding:14px 16px; border:1px solid var(--line); background:var(--surface);}
.city-anwesen-kopf {display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}
.city-anwesen-name {font-size:16px; overflow-wrap:anywhere;}
.city-anwesen-name[data-autoname] {font-weight:600;}
#cityPanel .city-stift, .city-stift {display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; padding:6px;}
.city-marke {display:inline-block; padding:2px 8px; font-size:12px; line-height:1.5; background:#dff0d4; color:#173d10; box-shadow:0 0 0 2px var(--edge, #555);}
.city-marke[data-laden=zu] {background:#e4e4e4; color:#3a3a3a;}
.city-marke[data-warnung] {background:#f6d5d0; color:#6e130d;}
.city-anwesen-zeile {margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.6; overflow-wrap:anywhere;}
.city-anwesen-aktionen {display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.city-anwesen-details {margin-top:10px;}
.city-anwesen-details > summary {min-height:32px; line-height:32px;}
.city-anwesen-werte {display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; margin:8px 0;}
.city-anwesen-werte dd {margin:0; overflow-wrap:anywhere;}
.city-unter {display:grid; gap:6px; margin:6px 0 0; padding:0; list-style:none;}
.city-unter li {display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px; line-height:1.5;}
.city-unter button, #cityPanel .city-unter button {min-height:32px; padding:4px 10px;}
.city-unter li span {min-width:0; overflow-wrap:anywhere; color:var(--muted);}
.city-steuer-aelter {margin-top:10px;}
.city-steuer-aelter > summary {min-height:32px; line-height:32px;}