.neighbor-page .finder-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: 24px; align-items: start; }
.neighbor-city-card { min-width: 0; padding: clamp(22px,3vw,34px); border: 1px solid #49614b; border-top: 5px solid #76b49b; border-radius: 8px; background: #101e17; }
.neighbor-city-card h2 { margin: 12px 0; font: 700 clamp(1.5rem,2.6vw,2.3rem)/1.2 var(--heading); }
.neighbor-map-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.neighbor-map-toolbar .button { min-height: 48px; padding: 12px 16px; font-size: .9375rem; white-space: normal; }
.neighbor-city-figure { margin: 0; }
.neighbor-map-stage { position: relative; height: min(72svh,640px); min-height: 280px; overflow: hidden; border: 1px solid #749285; border-radius: 12px; background: #edf0e8; }
.neighbor-map-stage[data-viewport-fit] { height: min(640px,var(--bottrop-map-visible-height)); min-height: 0; }
.neighbor-map-stage svg { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.neighbor-map-stage svg:active { cursor: grabbing; }
.neighbor-map-stage svg:focus-visible { outline: 3px solid #b0d957; outline-offset: -4px; }
.neighbor-page[data-neighbor-city="gladbeck"], .neighbor-radial[data-neighbor-city="gladbeck"] { --neighbor-city-color: var(--map-muenster-outline, #477326); }
.neighbor-page[data-neighbor-city="velbert"], .neighbor-radial[data-neighbor-city="velbert"] { --neighbor-city-color: var(--map-duesseldorf-outline, #19638f); }
.neighbor-page .neighbor-map-stage, .neighbor-radial .district-radial-preview-map { background: #f1f3f1; }
.neighbor-map-stage [data-city-roads], .neighbor-radial .neighbor-preview-roads { opacity: .68; filter: var(--map-muted-background, grayscale(1) contrast(.82) brightness(1.12)); }
.neighbor-map-stage svg[data-map-detail="street"] [data-city-roads] { opacity: .86; filter: grayscale(1) contrast(.92) brightness(1.06); }
.neighbor-map-stage [data-city-outline] { fill: var(--neighbor-city-color); fill-opacity: .13; stroke: var(--neighbor-city-color); stroke-width: 3.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 1px #fff); }
.neighbor-district { fill-opacity: .55; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.neighbor-map-stage .neighbor-district { cursor: pointer; }
.neighbor-district:is(:hover,:focus-visible), .neighbor-district[data-selected="true"] { fill-opacity: .7; stroke-width: 3.4; outline: none; }
.neighbor-city-border { fill: none; stroke: var(--neighbor-city-color); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.neighbor-radial .neighbor-district { stroke-width: 1.4; fill-opacity: .6; }
.neighbor-map-hover { min-height: 3em; margin: 10px 0 0; color: #d7e9c9; font-size: 1rem; line-height: 1.5; }
[data-neighbor-person][data-district-colored] { border-left: 5px solid var(--district-accent); padding-left: 12px; }
[data-neighbor-person][data-district-colored]::before { content: ''; display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--district-accent); }
.neighbor-map-controls { position: absolute; top: 12px; right: 12px; display: grid; grid-template-columns: auto 44px; gap: 6px; align-items: start; }
.neighbor-map-controls button { min-height: 44px; border: 1px solid #5e7969; border-radius: 7px; background: #fffffff2; color: #193529; font: 700 1rem var(--body,sans-serif); cursor: pointer; }
.neighbor-map-controls [data-zoom-reset] { grid-column: 1; grid-row: 1; padding: 8px 12px; }
.neighbor-map-controls [data-zoom-in] { grid-column: 2; grid-row: 1; font-size: 1.5rem; }
.neighbor-map-controls [data-zoom-out] { grid-column: 2; grid-row: 2; font-size: 1.5rem; }
.neighbor-map-controls output { grid-column: 2; grid-row: 3; padding: 4px 0; border-radius: 5px; background: #fffffff2; color: #193529; text-align: center; font-size: .875rem; }
.neighbor-map-controls button:focus-visible { outline: 3px solid #19638f; outline-offset: 2px; }
.neighbor-map-north { position: absolute; bottom: 12px; left: 12px; padding: 4px 8px; border-radius: 4px; background: #fffffff2; color: #244c38; }
.neighbor-attribution { color: #b9cdc4; font-size: .875rem; line-height: 1.6; }
.neighbor-attribution a { color: inherit; text-underline-offset: 3px; }
.neighbor-city-figure figcaption, .neighbor-map-help { color: #c4d9ce; font-size: .9375rem; line-height: 1.6; }
.neighbor-city-figure figcaption:empty { display: none; }
.neighbor-map-note { padding: 16px 18px; border-left: 3px solid #c6a866; background: #26281b; color: #eddfbc; font-size: .9375rem; line-height: 1.6; }
.neighbor-map-note p { margin: 6px 0 0; }
.neighbor-selection { margin: 18px 0; padding: 18px; border: 1px solid var(--district-accent); border-left-width: 4px; border-radius: 8px; background: #15271b; }
.neighbor-selection h3 { margin: 8px 0; font-size: 1.4rem; color: var(--district-accent); }
.neighbor-selection p { font-size: 1rem; line-height: 1.6; }
.neighbor-selection a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 16px; color: #d6f4b5; }
.neighbor-selection[hidden] { display: none; }
.neighbor-directory-list { margin: 22px 0 0; border-top: 1px solid #425b3a; }
.neighbor-directory-list > summary { min-height: 48px; padding: 14px 0; color: #c7e6ad; cursor: pointer; font-size: 1rem; }
.neighbor-directory-list summary:focus-visible { outline: 3px solid #b0d957; }
.neighbor-directory-list .velbert-directory-grid { grid-template-columns: minmax(0,1fr); }
.neighbor-directory-list .text-link { display: inline-flex; min-height: 44px; align-items: center; border: 0; padding: 8px 0; background: none; color: #d3ecbc; text-align: left; cursor: pointer; font: inherit; }
.neighbor-page .velbert-primary { border: 0; border-radius: 0; background: none; }
.neighbor-page .velbert-primary h2 { font-size: 1.65rem; }
.neighbor-official .velbert-contact-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.neighbor-official .gladbeck-map-link { padding: 24px; border: 1px solid #49614b; border-radius: 8px; background: #101e17; }
.neighbor-radial.district-radial[data-enhanced] { margin: auto; inset: 0; translate: none; width: min(1100px,calc(100vw - 24px)); height: max-content; max-height: calc(100dvh - 24px); padding: 0; }
.neighbor-radial::backdrop { background: #07130dba; backdrop-filter: blur(4px); }
body:has(.neighbor-radial[open]) { overflow: hidden; }
.neighbor-radial .district-radial-preview { grid-template-rows: auto minmax(0,1fr) 100px; }
.neighbor-radial .district-radial-preview-city { stroke: var(--neighbor-city-color); fill: var(--neighbor-city-color); fill-opacity: .13; stroke-width: 2.5; }
.neighbor-radial .district-radial-preview-hint { font-size: .875rem; }
.neighbor-radial > .neighbor-attribution { margin: 16px 24px; }
.neighbor-radial[data-layout="stacked"] .district-radial-content { height: auto; display: flex; flex-direction: column; padding: 18px; gap: 20px; }
.neighbor-radial[data-layout="stacked"] .district-radial-orbit { display: none; }
.neighbor-radial[data-layout="stacked"] .district-radial-preview { position: relative; top: auto; left: auto; translate: none; width: min(100%,320px); height: 350px; margin-inline: auto; }
.neighbor-radial[data-layout="stacked"] .district-radial-names { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.neighbor-radial[data-layout="stacked"] .district-radial-name, .neighbor-radial[data-layout="stacked"][data-open="true"] .district-radial-name:hover { position: relative; left: auto; top: auto; width: 100%; min-height: 76px; height: auto; transform: none; opacity: 1; border-radius: 14px; padding: 12px; font-size: 1rem; }
@media (max-width: 1100px) { .neighbor-page .finder-workspace { grid-template-columns: minmax(0,1fr); } .neighbor-official .velbert-contact-list { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px) { .neighbor-city-card { padding: 22px 18px; } .neighbor-map-stage { height: 56svh; } .neighbor-map-toolbar > .button { flex: 1; } }
@media (max-width: 480px) { .neighbor-radial[data-layout="stacked"] .district-radial-names { grid-template-columns: minmax(0,1fr); } }
@media (forced-colors: active) { .neighbor-map-stage [data-city-outline] { stroke: CanvasText; fill: none; } }
.city-map-arrival :is(#gladbeck-map-card,#velbert-map-card) { animation: region-arrive 650ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .city-map-arrival :is(#gladbeck-map-card,#velbert-map-card) { animation: none; } }