.finder-cities { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.finder-cities a { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 48px; padding: 11px 20px; border: 1px solid #526748; border-radius: 999px; color: #e7efdf; background: #111a12; text-decoration: none; font-size: 1rem; font-weight: 700; }
.finder-cities a[aria-current="page"] { background: var(--green); color: #15220a; border-color: var(--green); }
.finder-cities small { font-size: .875rem; font-weight: 400; }
.finder-cities a:hover { border-color: var(--green); box-shadow: 0 0 0 3px #b0d95720; }
.finder-cities a:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.finder-intro:has(.finder-cities) { gap: 18px; }
.essen-page .finder-workspace { grid-template-columns: minmax(340px, .9fr) minmax(380px, 1.1fr); }
.essen-city-card { padding: clamp(24px, 3vw, 34px); border: 1px solid #435447; border-top: 5px solid #72c9c1; border-radius: 8px; background: #101c18; min-width: 0; }
.essen-city-card h2 { margin: 12px 0 0; font: 700 clamp(1.5rem, 2.4vw, 2.2rem)/1.2 var(--heading); }
.essen-city-figure { margin: 20px 0 16px; }
.essen-map-stage { position: relative; height: clamp(360px, 44vw, 560px); max-height: calc(100svh - 180px); min-height: 260px; overflow: hidden; border: 1px solid #4a6056; border-radius: 10px; background: #e8ede6; }
.essen-map-stage[data-viewport-fit="true"] { box-sizing: border-box; height: min(560px, var(--essen-map-visible-height)); max-height: var(--essen-map-visible-height); min-height: 0; }
.essen-city-figure svg { display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; }
#essen-city-base { fill: #6fb39b; fill-opacity: .05; pointer-events: none; }
#essen-city-outline { fill: none; stroke: #1d765e; stroke-width: 3.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
#essen-road-base, #essen-road-labels, #essen-district-edges { pointer-events: none; }
/* Only the map's baked-in place/road labels become quieter, not the directory. */
.essen-map-labels { opacity: .62; filter: saturate(.2); pointer-events: none; }
.essen-district-edge { fill: none; stroke: #20362ee6; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.essen-map-stage[hidden], .essen-map-tooltip[hidden] { display: none; }
.essen-map-selection[hidden], [data-region-open][hidden] { display: none; }
.essen-city-figure figcaption { margin-top: 12px; text-align: center; color: #c2d5c7; font-size: .8125rem; line-height: 1.5; }
.essen-map-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.essen-map-toolbar .button { min-height: 46px; padding: 12px 16px; font-size: .9375rem; }
.essen-colors-dot { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: conic-gradient(#4e98ca, #d085c3, #efaf63, #6bb997, #4e98ca); box-shadow: 0 0 0 2px #15220a30; }
.essen-map-toolbar .text-link { font-size: .875rem; }
/* As on GE: each 6 px stroke is clipped to its own area, leaving 3 px on
   either side of a shared border. Neighbouring colors cannot overwrite it. */
.essen-district-area { fill: var(--essen-accent); fill-opacity: .18; stroke: var(--essen-accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill-opacity .16s ease, stroke-opacity .16s ease; }
.essen-district-area.is-selected { fill-opacity: .3; stroke-width: 8; }
.essen-district-area.is-hovered, .essen-district-area:focus-visible { fill-opacity: .38; stroke-width: 9; outline: none; }
.essen-map-stage[data-zoomed="true"] svg { touch-action: none; cursor: grab; }
.essen-map-stage[data-dragging="true"] svg, .essen-map-stage[data-dragging="true"] .essen-district-area { cursor: grabbing; }
.essen-map-controls { position: absolute; right: 10px; top: 10px; display: grid; grid-template-columns: auto 42px; gap: 5px; align-items: start; pointer-events: none; }
.essen-map-controls button { min-height: 42px; min-width: 42px; padding: 8px 10px; border: 1px solid #8ba696; border-radius: 5px; background: #f0f7eff5; color: #13271c; font: 700 1.2rem/1.1 var(--body, sans-serif); cursor: pointer; pointer-events: auto; }
.essen-map-controls button:hover:not(:disabled) { background: #c7e893; }
.essen-map-controls button:focus-visible { outline: 3px solid #b0d957; outline-offset: 3px; }
.essen-map-controls button:disabled { opacity: .5; cursor: default; }
#essen-zoom-reset { grid-column: 1; grid-row: 1; font-size: .8125rem; }
#essen-zoom-in { grid-column: 2; grid-row: 1; }
#essen-zoom-out { grid-column: 2; grid-row: 2; }
#essen-zoom-level { grid-column: 2; grid-row: 3; text-align: center; font: 600 .75rem/1.8 var(--body, sans-serif); border-radius: 4px; background: #0c1915e6; color: #d6e2d3; }
.essen-map-north { position: absolute; bottom: 12px; left: 14px; padding: 2px 6px; border-radius: 4px; background: #fffffff0; color: #275542; font-size: .8125rem; pointer-events: none; }
.essen-road-status { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 8px 12px; background: #ffffffed; color: #213d2d; font-size: .875rem; line-height: 1.4; pointer-events: none; }
.essen-road-status:empty { display: none; }
.essen-map-attribution { margin: 0 0 18px; font-size: .75rem; line-height: 1.6; color: #b8cabb; overflow-wrap: anywhere; }
.essen-map-attribution a { color: #cde2bc; text-underline-offset: 2px; }
.essen-map-attribution-compact { margin: 12px 24px 20px; }
.essen-map-selection { min-height: 100px; padding: 16px 18px; border-left: 4px solid var(--essen-accent, #b0d957); background: #1a2a22; border-radius: 0 6px 6px 0; display: flex; flex-direction: column; gap: 6px; }
.essen-map-selection strong { font-size: 1rem; color: #f0f4ed; }
.essen-map-selection span, .essen-map-help { font-size: .875rem; line-height: 1.6; color: #becebf; }
.essen-map-help { margin: 14px 0 20px; }
.essen-map-tooltip { position: fixed; z-index: 45; width: max-content; max-width: min(280px, calc(100vw - 24px)); padding: 9px 13px; border: 1px solid var(--essen-accent); border-left-width: 4px; border-radius: 6px; color: #f0f4ed; background: #0b1813e8; box-shadow: 0 8px 22px #0004; backdrop-filter: blur(3px); font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.essen-map-tooltip, .essen-map-tooltip * { pointer-events: none; }
.essen-map-tooltip strong { display: block; margin-top: 3px; font-size: 1rem; }
.essen-map-note { border-top: 1px solid #3a5046; padding-top: 20px; margin-bottom: 22px; }
.essen-map-note strong { color: #b0d957; }
.essen-map-note p { color: #c4d0c1; margin-bottom: 0; }
.essen-page .finder-result { overflow-wrap: anywhere; }
.essen-page .finder-result[data-state="warning"] { border-left-color: #ffb86c; }
.essen-page .finder-privacy { font-size: .875rem; }
.essen-directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.essen-directory-heading h2 { margin: 10px 0 0; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1.15 var(--heading); }
.essen-directory-heading > p { color: #b9c5b1; font-size: .875rem; margin: 0; }
.essen-directory-hint { color: var(--muted); max-width: 66ch; margin: 18px 0 26px; }
.essen-directory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.essen-directory-link { --essen-accent: #b0d957; display: flex; flex-direction: column; min-width: 0; border: 1px solid #40523b; border-top: 4px solid var(--essen-accent); border-radius: 8px; background: #111b10; color: var(--ink); }
.essen-directory-select { display: flex; flex-direction: column; gap: 8px; flex: 1; width: 100%; min-height: 125px; padding: 18px 18px 12px; border: 0; border-radius: 5px; background: transparent; color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.essen-directory-link small { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: #c9d4c3; }
.essen-directory-link small::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--essen-accent); }
.essen-directory-link strong { font-size: 1rem; overflow-wrap: anywhere; }
.essen-directory-select > span { margin-top: auto; padding-top: 4px; font-size: .8125rem; color: #c9d4c3; }
.essen-directory-link:has(.essen-directory-select:hover:not(:disabled)), .essen-directory-link.is-selected { border-color: var(--essen-accent); background: #1b2a20; box-shadow: 0 0 0 1px var(--essen-accent); }
.essen-directory-select:focus-visible { outline: 3px solid var(--essen-accent); outline-offset: 3px; }
.essen-directory-select:disabled { cursor: default; }
.essen-directory-contact { margin: 0 18px 12px; min-height: 36px; display: flex; align-items: center; width: fit-content; font-size: .8125rem; color: #c8daa9; text-underline-offset: 3px; }
.essen-directory-contact:focus-visible { outline: 3px solid var(--essen-accent); outline-offset: 3px; }
.essen-result-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 20px; }
.essen-page .finder-street-assignment { border-left-color: #72c9c1; }
@media (max-width: 1100px) { .essen-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .essen-page .finder-workspace { grid-template-columns: minmax(0, 1fr); } .essen-directory-heading { align-items: start; flex-direction: column; gap: 16px; } .essen-city-card { width: 100%; box-sizing: border-box; } .essen-map-stage { height: 520px; } }
@media (max-width: 500px) { .finder-cities a { padding: 10px 16px; } .finder-cities small { display: none; } .essen-directory-grid { grid-template-columns: 1fr; } .essen-page .finder-form { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 500px) { .essen-city-card { padding: 22px 16px; } .essen-map-stage { height: 400px; } .essen-directory-select { min-height: 105px; } .essen-map-toolbar { gap: 14px; } .essen-map-toolbar .button { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .essen-district-area { transition: none; } }
@media (forced-colors: active) { .essen-district-edge { stroke: CanvasText; } .essen-map-labels { opacity: 1; filter: none; } .essen-district-area { fill: Canvas; stroke: CanvasText; } .essen-district-area.is-hovered, .essen-district-area.is-selected, .essen-district-area:focus-visible { fill: Highlight; fill-opacity: 1; } .essen-map-tooltip { background: Canvas; color: CanvasText; border-color: CanvasText; } }