/* Canonical nullserie lockup — Marketing/Chrome (nicht v3 Quiz-Innenleben).
   Ring --brand-blue, Wort --text-primary, Ampel-Punkte Rot/Gelb/Grün. */
:root {
  --brand-lockup-h: 48px;
  --brand-blue: #234a6b;
  --ns-ink: var(--brand-blue);
  --ns-accent: #c4784a;
  --text-primary: #1a1a1a;
  --ampel-rot: #c94a3f;
  --ampel-gelb: #dba13a;
  --ampel-gruen: #4a9060;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-blue: #8eb4d4;
    --ns-ink: var(--brand-blue);
    --ns-accent: #e0a07a;
    --text-primary: #e8eae6;
  }
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap, 44px);
  min-width: var(--tap, 44px);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.brand:active { transform: scale(0.97); opacity: 0.88; }
.brand .brand-lockup,
.brand svg.brand-lockup {
  height: var(--brand-lockup-h);
  width: auto;
  max-width: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--ns-ink) 8%, transparent));
}
.brand .ns-ring {
  fill: none;
  stroke: var(--ns-ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand .ns-dot-1 { fill: var(--ampel-rot); }
.brand .ns-dot-2 { fill: var(--ampel-gelb); }
.brand .ns-dot-3 { fill: var(--ampel-gruen); }
.brand .ns-word {
  font-family: "SF Pro Display", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 31px;
  font-weight: 400;
  letter-spacing: 0.14em;
  fill: var(--text-primary);
  dominant-baseline: central;
}
.brand .brand-mark {
  width: 36px;
  height: 36px;
}
.brand-mark .ns-ring { stroke-width: 5.8; }

@keyframes ns-draw { to { stroke-dashoffset: 0; } }
@keyframes ns-pop { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  .brand-interactive:hover .brand-lockup .ns-ring,
  .brand-interactive:focus-visible .brand-lockup .ns-ring {
    stroke-dasharray: 69.115;
    stroke-dashoffset: 69.115;
    animation: ns-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .brand-interactive:hover .brand-lockup .ns-dot,
  .brand-interactive:focus-visible .brand-lockup .ns-dot {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transform: scale(0.35);
    animation: ns-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .brand-interactive:hover .brand-lockup .ns-dot-1,
  .brand-interactive:focus-visible .brand-lockup .ns-dot-1 { animation-delay: 820ms; }
  .brand-interactive:hover .brand-lockup .ns-dot-2,
  .brand-interactive:focus-visible .brand-lockup .ns-dot-2 { animation-delay: 940ms; }
  .brand-interactive:hover .brand-lockup .ns-dot-3,
  .brand-interactive:focus-visible .brand-lockup .ns-dot-3 { animation-delay: 1060ms; }
}