:root{--photo-nav-height:64px}

.photo-context-nav{
  position:sticky;
  top:0;
  z-index:100;
  min-height:var(--photo-nav-height);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px max(7vw,18px);
  border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(13,40,66,.97);
  box-shadow:0 8px 24px rgba(13,40,66,.16);
  backdrop-filter:blur(10px);
}

.photo-context-nav a{
  min-height:44px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.34);
  border-radius:10px;
  padding:0 16px;
  color:#fff;
  text-decoration:none;
  font:700 14px/1.2 'DM Sans',sans-serif;
}

.photo-context-nav a:hover,.photo-context-nav a:focus-visible{
  border-color:#fff;
  background:#fff;
  color:#0d2842;
  outline:3px solid rgba(237,127,80,.45);
  outline-offset:2px;
}

.photo-context-title{
  margin-left:auto;
  color:#b9d5df;
  font-size:13px;
  font-weight:700;
}

.photo-context-detail .photo-context-home{
  margin-left:auto;
  border-color:#ed7f50;
  background:#ed7f50;
}

.photo-context-detail .photo-context-home:hover,
.photo-context-detail .photo-context-home:focus-visible{color:#0d2842}

.history-hero .subpage-topbar,
body>.site-header{display:none!important}

#historische-foto{scroll-margin-top:calc(var(--photo-nav-height) + 20px)}

@media(max-width:650px){
  :root{--photo-nav-height:58px}
  .photo-context-nav{gap:8px;padding:7px 10px}
  .photo-context-nav a{min-height:44px;padding:0 13px;font-size:13px}
  .photo-context-title{font-size:12px}
  .photo-context-detail a{flex:1}
}

@media(prefers-reduced-motion:reduce){.photo-context-nav{backdrop-filter:none}}