.finder-cities .finder-region-open { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px 20px; border: 1px solid #72c9c1; border-radius: 999px; background: #14372f; color: #daf1e1; font: 700 1rem/1.4 var(--body, sans-serif); cursor: pointer; }
.finder-cities .finder-region-open:hover { background: #215045; }
.finder-cities a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; border-radius: 14px; }
.finder-cities .finder-city-region { display: block; font-size: .875rem; line-height: 1.4; color: inherit; }
.finder-city-priority { display: inline-block; margin-left: 6px; padding: 2px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: .875rem; font-weight: 500; }
.finder-administrative-label { margin: 10px 0 0; color: #c2dbb0; font-size: .9375rem; line-height: 1.5; }
.essen-page .finder-administrative-label { color: #9adad3; }
[data-region-open][hidden] { display: none; }
#district-map-card, #essen-map-card { scroll-margin-top: 24px; }
.region-dialog { width: min(1060px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0; overflow: auto; color: #e9f2e1; background: #101b15; border: 1px solid #50725b; border-radius: 20px; box-shadow: 0 30px 100px #0009; }
.region-dialog::backdrop { background: #07130dc9; backdrop-filter: blur(5px); }
body:has(.region-dialog[open]) { overflow: hidden; }
.region-dialog { overscroll-behavior: contain; }
.region-dialog[open] { animation: region-open 300ms cubic-bezier(.2,.8,.2,1) both; }
.region-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px 20px; }
.region-heading h2 { margin: 5px 0 0; font: 700 clamp(1.5rem, 3vw, 2rem)/1.15 var(--heading, sans-serif); }
.region-heading .section-kicker { margin: 0; }
.region-close { width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid #657c68; border-radius: 50%; background: #203828; color: #edf5e8; font: 400 2rem/1 sans-serif; cursor: pointer; }
.region-close:hover { background: #36533c; }
.region-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 26px; padding: 0 28px; }
.region-map-stage { position: relative; height: min(65svh, 680px); min-height: 300px; overflow: hidden; border-radius: 12px; border: 1px solid #71897b; background: #e7ede7; }
.region-map-stage svg { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.region-city { cursor: pointer; outline: none; }
.region-city-base { fill: var(--city-color); fill-opacity: .09; }
.region-districts path { fill-opacity: .34; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.region-city-border { fill: none; stroke: var(--city-color); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke-width 180ms ease; }
.region-city.is-active .region-city-border, .region-city:focus-visible .region-city-border { stroke-width: 6; }
.region-city-label rect { fill: #f8fcf6; stroke: var(--city-color); stroke-width: 2; }
.region-city-label text { fill: #132a1c; font: 700 28px var(--body, sans-serif); }
.region-city.is-active .region-city-label rect, .region-city:focus-visible .region-city-label rect { fill: #daf2c3; stroke-width: 4; }
.region-north { position: absolute; left: 14px; bottom: 12px; padding: 4px 8px; border-radius: 4px; color: #244c38; background: #fffffff0; font-size: .875rem; pointer-events: none; }
.region-sidebar { min-width: 0; }
.region-sidebar > p { font-size: 1rem; line-height: 1.55; margin: 0 0 18px; }
.region-sidebar .region-eyebrow { margin: 0 0 6px; font-weight: 700; color: #b0d957; }
.region-city-link { display: block; margin: 0 0 12px; padding: 17px 18px; border: 1px solid #749d4d; border-radius: 10px; background: #263d1c; color: #edf6e6; text-decoration: none; }
.region-city-link[data-region-city="essen"] { border-color: #4e9d9b; background: #173532; }
.region-city-link strong { display: flex; justify-content: space-between; gap: 12px; font-size: 1.125rem; }
.region-city-link small { display: block; margin-top: 5px; font-size: .875rem; color: #cbdfbd; }
.region-city-priority { display: block; margin-bottom: 8px; color: #b0d957; font-size: .875rem; font-weight: 600; }
.region-city-link:hover { box-shadow: inset 0 0 0 1px currentColor; }
.region-visibility { width: 100%; min-height: 48px; margin: 6px 0 16px; padding: 12px; border: 1px solid #627466; border-radius: 8px; background: #12241a; color: #dcead5; font: 600 .9375rem/1.35 var(--body, sans-serif); cursor: pointer; }
.region-visibility:disabled { opacity: .5; cursor: default; }
.region-sidebar .region-status { min-height: 48px; color: #c0e89e; font-size: .9375rem; }
.region-sidebar .region-note { margin: 0; font-size: .875rem; color: #adbdad; }
.region-credits { padding: 16px 28px 20px; }
.region-credits .essen-map-attribution { margin: 0; }
.region-dialog :is(a,button):focus-visible { outline: 3px solid #caef9b; outline-offset: 3px; }
.region-dialog[aria-busy="true"] :is(.region-city,.region-city-link) { cursor: progress; }
@keyframes region-open { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes region-arrive { from { opacity: .35; transform: scale(.97); } to { opacity: 1; transform: none; } }
.city-map-arrival :is(#district-map-card, #essen-map-card) { animation: region-arrive 650ms ease-out both; }
@media (max-width: 1000px) { #district-map-card, #essen-map-card { scroll-margin-top: calc(var(--mobile-header-height, 148px) + 16px); } }
@media (max-width: 700px) {
  .finder-cities a { max-width: 100%; box-sizing: border-box; }
  .finder-cities .finder-city-region { display: block; }
  .region-dialog { width: calc(100vw - 16px); max-height: calc(100svh - 16px); border-radius: 14px; }
  .region-heading { padding: 16px; gap: 12px; }
  .region-layout { display: flex; flex-direction: column; gap: 16px; padding: 0 16px; }
  .region-map-stage { height: 48svh; min-height: 270px; }
  .region-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .region-sidebar > p, .region-visibility { grid-column: 1 / -1; }
  .region-sidebar .region-eyebrow, .region-sidebar > p:not([class]) { display: none; }
  .region-city-link { margin: 0; padding: 12px; }
  .region-city-link strong { font-size: 1rem; gap: 4px; }
  .region-city-link small { overflow-wrap: anywhere; }
  .region-visibility { margin: 0; }
  .region-sidebar .region-status { min-height: 0; margin: 0; }
  .region-credits { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .region-dialog[open], .city-map-arrival :is(#district-map-card, #essen-map-card) { animation: none; } .region-city-border { transition: none; } }
@media (forced-colors: active) { .region-city-border { stroke: CanvasText; } .region-city-label rect { fill: Canvas; stroke: CanvasText; } .region-city-label text { fill: CanvasText; } .region-city:focus-visible .region-city-border { stroke: Highlight; } }