/* ════════════════════════════════════════════════════════════════════════
   ONO OS · Molecule · sub-nav-v2 (config-driven, cross-app, Atomic-DS)
   HEILIGE REGELN:
     · NIEMALS einseitige Konturen
     · NIEMALS Schatten
     · NIEMALS Verläufe
     · NIEMALS Outlines auf Pills/Buttons
     · IMMER Haffer + stylistic-sets
     · IMMER smooth-corners
     · IMMER phi-tokens für Maße
   ════════════════════════════════════════════════════════════════════════ */

.ono-sub-nav-v2 {
  /* Scope-local phi-tokens shadow — protect against per-page var redefinitions */
  --type-xxs: clamp(10px, 0.55vw, 14px);
  --type-xxxs: clamp(9px, 0.5vw, 12px);
  --space-2xs: 4px;
  --space-s: 0.5rem;
  --space-m: 0.875rem;
  --space-l: 1.5rem;
  position: sticky;
  top: var(--hn-h, 64px);
  z-index: 50;
  background: color-mix(in srgb, var(--bg, #FAFAF6) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
  padding: var(--space-s, 0.625rem) var(--space-l, 1.5rem);
  display: flex;
  justify-content: center;
  transition: top .25s ease, opacity .2s ease, transform .2s ease;
}
body.has-ono-headroom-nav:has(.ono-headroom-nav.is-hidden) .ono-sub-nav-v2 { top: 0; }

.ono-sub-nav-v2[hidden] { display: none; }

.ono-sub-nav-v2__inner {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-tile, #F0EDE5);
  border-radius: var(--r-pill, 999px);
  padding: var(--space-2xs, 4px);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.ono-sub-nav-v2__inner::-webkit-scrollbar { display: none; }

.ono-sub-nav-v2__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-s, 0.675rem) var(--space-m, 1.125rem);
  border-radius: var(--r-pill, 999px);
  font-family: 'Haffer', -apple-system, system-ui, sans-serif;
  font-size: var(--type-xxs, 13px);
  font-weight: 618;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--fg, #1A1A1A);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1, 'ss03' 1, 'ss04' 1, 'ss05' 1, 'tnum' 1;
}
.ono-sub-nav-v2__pill:hover { background: color-mix(in srgb, var(--fg, #1A1A1A) 5%, transparent); }
.ono-sub-nav-v2__pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--orange, #FD9501);
}
.ono-sub-nav-v2__pill--active {
  background: var(--orange, #FD9501);
  color: #FFFFFF;
}
.ono-sub-nav-v2__pill--active:hover {
  background: var(--orange-deep, #E78600);
  color: #FFFFFF;
}
.ono-sub-nav-v2__pill .ono-sub-nav-v2__meta {
  opacity: 0.62;
  font-weight: 382;
  font-size: var(--type-xxxs, 0.75rem);
}
.ono-sub-nav-v2__pill--active .ono-sub-nav-v2__meta {
  opacity: 0.85;
  color: #FFFFFF;
}

[data-ono-sub-nav-v2-mount] { display: contents; }