:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#02070d}
body{display:flex;justify-content:center;font-family:Arial,Helvetica,sans-serif}
.poster{position:relative;width:min(100vw,1024px);aspect-ratio:2/3;background:#02070d;overflow:hidden}
.reference{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}

/* Neue Navigationsleiste. Sie deckt die alte, ins Hintergrundbild eingebrannte Navigation ab. */
.mf-top-nav{
  position:absolute;
  z-index:50;
  left:17.6%;
  top:1.50%;
  width:66.8%;
  height:4%;
  padding:0 1.05%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  white-space:nowrap;
  background:linear-gradient(180deg,rgba(2,13,22,.99),rgba(2,11,18,.985));
  border-top:1px solid rgba(24,196,255,.08);
  border-bottom:1px solid rgba(24,196,255,.34);
  box-shadow:0 7px 18px rgba(0,0,0,.40), inset 0 -1px 0 rgba(0,201,255,.08);
  border-radius:0 0 7px 7px;
}
.mf-top-nav-item{
  height:100%;
  padding:0 .68em;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  text-transform:none;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(7px,1.02vw,11px);
  font-weight:600;
  line-height:1;
  text-shadow:0 1px 2px #000;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.mf-top-nav-item:hover,
.mf-top-nav-item:focus-visible{
  color:#20d9ff;
  background:rgba(0,184,255,.07);
  outline:none;
}
.mf-top-nav-item.active{
  color:#18d7ff;
  position:relative;
}
.mf-top-nav-item.active::after{
  content:"";
  position:absolute;
  left:20%;
  right:20%;
  bottom:14%;
  height:2px;
  border-radius:2px;
  background:#18d7ff;
  box-shadow:0 0 8px rgba(24,215,255,.75);
}

.hot{position:absolute;display:block;background:transparent;border:0;cursor:pointer;text-decoration:none;z-index:20}
.hot:focus-visible{outline:2px solid #17c7ff;outline-offset:2px;border-radius:6px}
/* CTA hotspots */
.donate-hero{left:33.6%;top:35.2%;width:33.2%;height:3.2%;border-radius:999px}
.register{left:14.8%;top:53.6%;width:24.5%;height:3.1%;border-radius:12px}
.learn{left:61.0%;top:53.6%;width:25.4%;height:3.1%;border-radius:12px}
.mission{left:5.1%;top:72.3%;width:22.0%;height:3.0%;border-radius:12px}

@media (max-width:760px){
  .mf-top-nav{left:16.8%;width:70.5%;padding:0 .35%;overflow:hidden}
  .mf-top-nav-item{padding:0 .38em;font-size:clamp(5.5px,1.02vw,8px)}
}