/* ════════════════════════════════════════════════════════════════════════
   ONO OS · Molecule · sub-header-toggle (Atomic-DS, phi-tokens, SSoT)
   HEILIGE REGELN:
     · NIEMALS einseitige Konturen
     · NIEMALS Schatten
     · NIEMALS Verläufe
     · NIEMALS Outlines auf Eyebrows/Pills/Buttons/Cards
     · IMMER Haffer + stylistic-sets
     · IMMER smooth-corners (corner-shape: superellipse)
     · IMMER phi-tokens für Maße
   ════════════════════════════════════════════════════════════════════════ */

/* Sticky Sub-Header Container */
.nu-subheader {
  position: sticky;
  top: 64px;
  z-index: 50;
  background: color-mix(in srgb, var(--bg, #FAFAF6) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
  padding: 10px 24px;
  display: flex;
  justify-content: center;
  transition: top .25s ease;
}
body.has-ono-headroom-nav:has(.ono-headroom-nav.is-hidden) .nu-subheader { top: 0; }

/* Pill-Track — FLAT (kein shadow, kein border) */
.phi-pill-toggle {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bg-tile, var(--muted, #F0EDE5)) !important;
  border-radius: 999px !important;
  corner-shape: superellipse;
  -webkit-corner-shape: superellipse;
  padding: 4px !important;
  gap: 2px !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Pill-Item — Inactive · FLAT */
.phi-pill-toggle__item {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  corner-shape: superellipse;
  -webkit-corner-shape: superellipse;
  font-size: 14px !important;
  font-weight: 618 !important;
  font-family: 'Haffer', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif !important;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'ss04' 1, 'ss05' 1, 'tnum' 1, 'zero' 1 !important;
  cursor: pointer;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--fg, var(--muted-foreground, #1A1A1A)) !important;
  opacity: 0.62 !important;
  text-decoration: none !important;
  text-transform: lowercase !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.phi-pill-toggle__item:hover {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--fg, #1A1A1A) 6%, transparent) !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  color: var(--fg, #1A1A1A) !important;
}
.phi-pill-toggle__item:focus,
.phi-pill-toggle__item:focus-visible,
.phi-pill-toggle__item:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Pill-Item · ACTIVE · pure orange fill, NULL Schatten/Border/Outline */
.phi-pill-toggle__item.active,
.phi-pill-toggle__item--active {
  background: var(--orange, #FD9501) !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
.phi-pill-toggle__item.active:hover,
.phi-pill-toggle__item--active:hover {
  background: var(--orange, #FD9501) !important;
  color: #fff !important;
  box-shadow: none !important;
}


/* Logo-Icon */
.phi-pill-toggle__item .nav-logo {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}
.phi-pill-toggle--lg .phi-pill-toggle__item {
  height: 36px !important;
  min-height: 36px !important;
  font-size: 15px !important;
  padding: 0 22px !important;
  gap: 8px !important;
}
.phi-pill-toggle--lg .phi-pill-toggle__item .nav-logo {
  width: 22px !important;
  height: 22px !important;
}

/* Cross-app GLOBAL outline-kill — Heilige Regel: NIEMALS Outlines */
button:focus, button:focus-visible,
a:focus, a:focus-visible,
[role='tab']:focus, [role='tab']:focus-visible,
[role='button']:focus, [role='button']:focus-visible,
.eyebrow:focus, .eyebrow:focus-visible,
.card:focus, .card:focus-visible,
.btn:focus, .btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

body.has-ono-headroom-nav .wrap { padding-top: 24px; }