/* HG_HAMBURG_BRAND_V15 — original port-signal identity, independent of Hamburg's official crest. */
:root {
  --hg15-harbor: #07131d;
  --hg15-water: #12334b;
  --hg15-paper: #f6f2e9;
  --hg15-signal: #ef163f;
  --hg15-amber: #ffbd66;
}

.hg-portal-header {
  height: 74px;
  padding-inline: clamp(14px, 2.6vw, 42px);
  border-bottom-color: rgba(255,255,255,.13);
  background: color-mix(in srgb, var(--hg15-harbor) 78%, transparent);
  box-shadow: 0 18px 44px rgba(1,7,12,.22);
  backdrop-filter: blur(24px) saturate(135%);
}

.hg-portal-brand { gap: 13px; }

.hg-portal-mark,
.hg-portal-mark--image {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.hg-portal-mark--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 18px rgba(239,22,63,.22));
}

.hg-portal-brand strong {
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 900;
  letter-spacing: -.055em;
}

.hg-brand-divider {
  display: inline-block;
  margin-inline: .24em;
  color: var(--hg15-signal);
  font-size: .72em;
  letter-spacing: -.18em;
  transform: translateY(-.04em) skewX(-9deg);
}

.hg-portal-brand small {
  margin-top: 5px;
  color: rgba(246,242,233,.66);
  font-size: 7.5px;
  letter-spacing: .22em;
}

.hg-portal-nav a {
  color: rgba(246,242,233,.72);
  font-size: 10px;
  letter-spacing: .06em;
}

.hg-portal-nav a::after { background: var(--hg15-amber); }
.hg-portal-nav a:hover,
.hg-portal-nav a:focus-visible { color: #fff; }

.hg-portal-play {
  border-radius: 999px;
  background: var(--hg15-paper);
  color: var(--hg15-harbor);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.hg-portal-play:hover,
.hg-portal-play:focus-visible {
  background: #fff;
  color: #9c001f;
  transform: translateY(-1px);
}

.hg-portal-footer .hg-portal-mark { width: 52px; height: 52px; flex-basis: 52px; }

@media (max-width: 760px) {
  .hg-portal-header { height: 62px; padding-inline: 10px; }
  .hg-portal-mark,
  .hg-portal-mark--image { width: 40px; height: 40px; flex-basis: 40px; }
  .hg-portal-brand { gap: 9px; }
  .hg-portal-brand strong { font-size: 14px; }
}