.project-choice {
  width: min(100%, 58rem);
  margin: clamp(3rem, 13vh, 8rem) auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(126, 167, 211, .25);
  border-radius: 1.3rem;
  background: #071326;
  text-align: center;
}
.project-choice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.project-choice-actions button, .project-nav button {
  min-height: 3rem;
  padding: .75rem 1.2rem;
  border: 1px solid rgba(110, 195, 177, .4);
  border-radius: .8rem;
  background: #0a2330;
  color: #effff8;
  font-weight: 700;
}
.project-choice-actions button:hover, .project-nav button[aria-current="page"] {
  background: #14594c;
  border-color: #48deaa;
}
.project-choice-actions button:focus-visible, .project-nav button:focus-visible {
  outline: 2px solid #6cf5c4;
  outline-offset: 3px;
}
.project-nav { display: flex; flex-wrap: wrap; gap: .6rem; width: min(100%, 112rem); margin: 0 auto 1rem; }
.project-nav button { min-height: 2.6rem; font-size: .85rem; }
.berlin-view { width: min(100%, 112rem); margin: 0 auto; }
.berlin-panel { width: 100%; }
.berlin-metrics { gap: .8rem; }
.berlin-metrics .metric { min-width: 10rem; }
.berlin-metrics .metric strong { color: #6bf3ac; }
.berlin-map-stage { min-height: min(68vh, 51rem); }
.berlin-map-stage svg { width: 100%; min-height: min(68vh, 51rem); }
.berlin-map-stage .country { cursor: zoom-in; }
.berlin-dot { fill: #57f092; stroke: transparent; pointer-events: all; cursor: pointer; }
.berlin-tooltip { position: absolute; z-index: 5; transform: translate(-50%, -110%); padding: .45rem .65rem; border: 1px solid #479a73; border-radius: .5rem; background: #06190f; color: #e5ffed; font-size: .78rem; white-space: nowrap; pointer-events: none; }
@media (max-width: 700px) {
  .berlin-panel .panel-header { flex-direction: column; }
  .berlin-metrics { flex-wrap: wrap; }
  .berlin-metrics .metric { min-width: 8rem; }
  .berlin-map-stage, .berlin-map-stage svg { min-height: 25rem; }
}