/* North-up regional schematic; positions simplified for legible selection. */
.hero > .cluster-stage { width:100%; max-width:760px; min-height:660px; aspect-ratio: 720 / 660; margin-inline:auto; padding:0; display:block; }
.cluster-stage .zoom-ring { inset:0; width:100%; height:100%; aspect-ratio:auto; transform:none; opacity:1; }
.cluster-stage .zoom-ring::after, .cluster-stage .site-flag::after { display:none; }
.region-river { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.region-river .river-bank { fill:none; stroke:#649ba9; stroke-width:32; opacity:.3; }
.region-river .river-water { fill:none; stroke:#b6e6f5; stroke-width:24; }
.region-river text { fill:#245b70; font:700 16px system-ui,sans-serif; }
.region-north { position:absolute; top:20px; left:24px; z-index:2; color:#164b31; font-weight:800; font-size:14px; }
.region-caption { position:absolute; bottom:10px; left:0; right:0; text-align:center; color:#234a35; font-size:12px; font-weight:650; z-index:2; }
.cluster-stage .site-flag { position:absolute; display:flex; flex-direction:column; gap:4px; width:max-content; max-width:36%; margin:0; padding:0; transform:translate(-50%,-50%); }
.cluster-stage .site-flag:hover, .cluster-stage .site-flag:focus-visible { transform:translate(-50%,-50%) scale(1.04); }
.cluster-stage .site-flag:focus-visible .flag-label { outline:3px solid #245b70; outline-offset:3px; }
.cluster-stage .hospital-mark { width:44px; height:44px; border-radius:15px; }
.cluster-stage .hospital-mark i { font-size:21px; }
.cluster-stage .flag-label { font-size:clamp(12px,1.15vw,16px); padding:8px 10px; white-space:nowrap; }
.cluster-stage .duisburg-hamborn { left:65%; top:12%; }
.cluster-stage .oberhausen-site { left:83%; top:27%; }
.cluster-stage .duisburg-homberg { left:44%; top:36%; }
.cluster-stage .duisburg-hochfeld { left:68%; top:51%; }
.cluster-stage .krefeld-huels { left:15%; top:60%; }
.cluster-stage .duisburg-huckingen { left:69%; top:70%; }
.cluster-stage .krefeld-uerdingen { left:40%; top:77%; }
.cluster-stage .krefeld-zentrum { left:23%; top:90%; }
@media(max-width:760px) {
  .hero > .cluster-stage { min-height:610px; aspect-ratio:auto; }
  .cluster-stage .site-flag { max-width:45%; }
  .cluster-stage .flag-label { font-size:11px; padding:7px 5px; }
  .cluster-stage .hospital-mark { width:34px; height:34px; border-radius:12px; }
  .cluster-stage .hospital-mark i { font-size:18px; }
  .cluster-stage .oberhausen-site { left:77%; }
  .cluster-stage .duisburg-hamborn { left:61%; }
  .cluster-stage .krefeld-huels { left:20%; }
  .cluster-stage .krefeld-zentrum { left:25%; }
  .region-caption { font-size:10px; }
}
.region-river { clip-path:ellipse(50% 50% at 50% 50%); }