/* The bar without the pill.

   It stops being an object lying on the page and becomes the page's top edge:
   full width, a veil of black with the content showing faintly through it, one
   hairline underneath. Nothing else moves — the padding below reproduces the
   pill's own inner edge exactly, so the logo, the menu and the account chip
   stay on the pixels they are on today. */

:root{
  /* Where the pill's shell used to be, and where the bar's content sits now. */
  --nav-edge: max(24px, calc((100% - 1180px) / 2));
  --nav-inset: max(36px, calc((100% - 1180px) / 2 + 12px));
}

nav{
  top: 0; left: 0; right: 0;
  width: 100%; max-width: none; transform: none;
  height: 74px;
  padding-inline: var(--nav-inset);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
  box-shadow: none;
  background: #0a0a0b;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Creme-Fassung. Greift nur, wo die Seite die helle Fassung traegt — die
   uebrigen Seiten liefern dunkel aus und sehen diese Regeln nie. */
[data-theme="light"] nav{
  border-bottom-color: rgba(23,19,16,0.10);
  background: #f0eee6;
}
[data-theme="light"] .nav-user-dropdown{ background: #f7f6f1; }

/* The drop-downs hang off the bar, and an absolutely positioned child ignores
   its parent's padding — so they carry the measure themselves. */
.fm{ padding-left: var(--nav-edge); padding-right: var(--nav-edge); }

@media (max-width: 980px){
  /* The burger panel keeps the same measure rather than running edge to edge. */
  nav.menu-open .nav-links{ left: var(--nav-inset); right: var(--nav-inset); }
}

/* The links sit next to the wordmark instead of floating in the middle of the
   bar; the account chip keeps the right edge to itself. */
@media (min-width: 981px){
  nav{ justify-content: flex-start; }
  .nav-links{ margin-left: 48px; }
  .nav-cta{ margin-left: auto; }
}

/* With the links at the left, a centred or right-aligned panel no longer sits
   under the link that opens it — and a panel the pointer cannot reach going
   straight down closes under the mouse. Both open from the content's left
   edge now. */
@media (min-width: 981px){
  .fm-card,
  .fm-right .fm-card{ margin-left: 0; margin-right: auto; }
}

/* The bar carries a backdrop-filter and a nested one does not apply, so the
   account panel inside it rendered as flat translucency with nothing blurred
   behind it. Plain black, the same as the two drop-downs on the left, and the
   same 22px of air under the bar. */
.nav-user-dropdown{
  margin-top: calc((74px - 40px) / 2 + 22px);
  background: #121214;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The gap is dead ground: the panel is absolutely positioned, so it does not
   grow the box that :hover is tested against, and the pointer on its way down
   would leave .nav-user and close the menu. This strip belongs to the panel
   and bridges it, exactly as .fm::before does for the mega menus. */
.nav-user-dropdown::before{
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(0px - ((74px - 40px) / 2 + 22px)); height: calc((74px - 40px) / 2 + 22px);
}

/* ── The links themselves ────────────────────────────────────────────────
   Sentence case, not caps. The uppercase also leaked: `.nav-links a` matches
   every link inside the bar, the mega menus' own items included, which is why
   several rules in megamenu.css had to turn it off again. Off at the source
   now — those rules are harmless but no longer doing anything. */
.nav-links a{
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 14px;
  font-weight: 600;
}

/* The arrow reads as part of the word rather than a speck next to it, and it
   turns over when the menu it belongs to opens — by hover and by keyboard
   focus, so it is not mouse-only.

   Drawn from two borders rather than set as ⌄ (U+2304): that glyph renders at
   roughly half its font-size, so matching the text meant guessing at a size
   that then moved with the font. The character stays in the markup and is
   hidden, so nothing else has to change. */
.nav-chevron{
  display: inline-block;
  width: 8px; height: 8px;
  font-size: 0; line-height: 0;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  opacity: .7;
  transition: transform .22s ease, opacity .15s;
}
.fm-wrap:hover > a .nav-chevron,
.fm-wrap:focus-within > a .nav-chevron{
  transform: translateY(1px) rotate(225deg);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .nav-chevron{ transition: opacity .15s; }
}

/* Tastatur: ein sichtbarer Fokusring auf jeder öffentlichen Seite. */
:focus-visible{ outline: 2px solid var(--green, #ffffff); outline-offset: 2px; border-radius: 4px; }
/* Textfelder zeigen den Fokus über Cursor und Rahmen, nicht über den Ring. */
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: none; }
.fm .fm-item:focus-visible{ background: rgba(255,255,255,.06); }

/* ── Hell/Dunkel-Umschalter (von der Startseite hierher, damit alle Seiten ihn tragen) ── */
/* Der Umschalter selbst. Kein Text, also traegt aria-label die Bedeutung;
   aria-pressed sagt, ob die helle Fassung an ist. */
.nav-theme{width:36px;height:36px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;border-radius:99px;border:1px solid transparent;
  background:transparent;color:var(--text3);cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;}
.nav-theme:hover{color:var(--text);background:var(--bg3);border-color:var(--border);}
.nav-theme:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.nav-theme svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.nav-theme .nt-moon{display:none;}
[data-theme="light"] .nav-theme .nt-sun{display:none;}
[data-theme="light"] .nav-theme .nt-moon{display:block;}
/* Die Zeile im Klappmenue. Ausserhalb der schmalen Leiste bleibt sie weg —
   dort steht der Knopf in der Leiste selbst. */
/* Mit Typ im Selektor: static/nav.css setzt ab 981 px
   `.nav-links > li{display:flex}` und wird nach diesem Block geladen — ein
   einfaches `.nav-theme-li` verlaere dort. */
.nav-links li.nav-theme-li{display:none;}
.nav-theme-row{width:auto;height:auto;gap:11px;justify-content:flex-start;}
.nt-lbl{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  font-family:inherit;}
.nt-lbl-dunkel{display:none;}
[data-theme="light"] .nt-lbl-hell{display:none;}
[data-theme="light"] .nt-lbl-dunkel{display:inline;}
/* Gemessen braucht die Leiste auf 375 px genau 375 px — kein Platz fuer
   einen weiteren Knopf. Darunter wandert er in das Klappmenue. */
@media (max-width:480px){
  .nav-cta .nav-theme{display:none;}
  nav.menu-open .nav-theme-li{display:block;}
  nav.menu-open .nav-theme-row{display:flex;width:100%;padding:14px;border-radius:12px;
    color:var(--text);}
  nav.menu-open .nav-theme-row:hover{background:rgba(255,255,255,.06);border-color:transparent;}
  [data-theme="light"] nav.menu-open .nav-theme-row:hover{background:rgba(23,19,16,.06);}
}

/* ── Light: readable on hover, readable in colour ──────────────────────────
   Some pages give the account menu a hover fill from --glass-bg, which in
   their own styles is near-black — with near-black text on it in the light
   mode. The fill is set here for every page, and the small coloured badges
   get their darker shade so they read on cream. */
[data-theme="light"] .nav-user-dropdown a:hover,
[data-theme="light"] .nav-user-dropdown .nav-menu-item:hover,
[data-theme="light"] .nav-user-dropdown .nav-menu-item:focus-visible{
  background: rgba(23,19,16,.07) !important; color: #171310 !important; }
[data-theme="light"] .nav-user-dropdown .nav-menu-item:hover .nav-menu-val{ color: #171310 !important; }
[data-theme="light"] .nav-user-dropdown a.nav-menu-danger:hover{ color: #b42318 !important; }
[data-theme="light"] .mock-badge.r, [data-theme="light"] .turn-badge{ color: #b42318 !important; background: rgba(180,35,24,.09) !important; }
[data-theme="light"] .mock-badge.y{ color: #8a5300 !important; background: rgba(176,110,0,.12) !important; }
[data-theme="light"] .mock-badge.g{ color: #1a1714 !important; background: rgba(23,19,16,.07) !important; }
[data-theme="light"] .gcard-n{ color: rgba(23,19,16,.62) !important; }
[data-theme="light"] .cross{ color: rgba(23,19,16,.5) !important; }

/* ── Account menu, built like the app's (templates/_usermenu.html) ──────────
   Same entries, icons and flyouts as the menu at the bottom of the app's
   sidebar. The flyouts open to the left here: the menu sits at the right
   edge of the bar. Selectors carry .nav-user-dropdown so the older per-page
   rules for `.nav-user-dropdown a` do not reach the items. */
.nav-user-dropdown.um{width:280px;min-width:0;padding:6px;border-radius:16px;border:1px solid rgba(255,255,255,.1);
  background:#17171a;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
[data-theme="light"] .nav-user-dropdown.um{background:#ffffff;border-color:rgba(23,19,16,.12);box-shadow:0 24px 60px -24px rgba(23,19,16,.28)}
.um .um-head{display:flex;align-items:center;gap:12px;padding:12px 12px 14px;margin:0 0 6px;border-bottom:1px solid var(--border)}
.um .um-head .nav-user-avatar{width:38px;height:38px;font-size:15px}
.um .um-ht{min-width:0}
.um .um-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um .um-mail{font-size:12.5px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-user-dropdown .um-item{display:flex;align-items:center;gap:12px;width:100%;height:38px;padding:0 12px;border:0;border-radius:10px;
  background:none;font:inherit;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;text-align:left;cursor:pointer;transition:background .12s}
.nav-user-dropdown .um-item:hover,.um .um-group.open > .um-item{background:rgba(255,255,255,.06);color:var(--text)}
[data-theme="light"] .nav-user-dropdown .um-item:hover,[data-theme="light"] .um .um-group.open > .um-item{background:rgba(23,19,16,.06) !important;color:#171310 !important}
.um .um-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.um .um-t{flex:1;min-width:0}
.um .um-val{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--text3)}
.um .um-chev{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;opacity:.55;margin-left:auto}
.um .um-val + .um-chev{margin-left:4px}
.um .um-sep{height:1px;background:var(--border);margin:6px 4px}
.um .um-group{position:relative}
.um .um-sub{display:none;position:absolute;right:calc(100% + 10px);top:-6px;width:200px;padding:6px;flex-direction:column;
  border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#17171a;box-shadow:0 20px 50px -18px rgba(0,0,0,.6)}
[data-theme="light"] .um .um-sub{background:#ffffff;border-color:rgba(23,19,16,.12);box-shadow:0 20px 50px -22px rgba(23,19,16,.28)}
.um .um-group.open > .um-sub{display:flex}
.um .um-si{gap:10px}
.um .um-ck{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.um .um-si.on .um-ck{opacity:1}
.um .um-si.on{font-weight:600}
@media (max-width:640px){
  .nav-user-dropdown.um{width:min(280px,calc(100vw - 24px))}
  .um .um-sub{position:static;width:auto;border:0;box-shadow:none;background:none;padding:0 0 4px 30px}
  [data-theme="light"] .um .um-sub{background:none}
}

/* ── Phone and small tablet (the burger's own breakpoint, 860px) ───────────
   The bar keeps one gutter with the page under it; the logo holds the left
   edge, the account action and the burger the right one, the burger last as
   on every phone. The open menu is a sheet the colour of the bar, from under
   it to the bottom of the screen, scrolling on its own: the floating card it
   was let the page show through around it and ran off the bottom of the
   screen once Products was open. Nothing here reaches a wider screen. */
:root{ --nav-h: 74px; --nav-gut: 20px; }
.nav-links li.nav-acct-li{ display: none; }
@media (max-width: 860px){
  :root{ --nav-h: 64px; }
  nav{ height: var(--nav-h); padding-inline: var(--nav-gut); gap: 8px; }
  .nav-logo{ flex: none; min-height: 44px; }
  .nav-cta{ order: 2; margin-left: auto; gap: 8px; flex: none; }
  .nav-cta .btn-ghost, .nav-cta .btn-solid, .nav-cta .btn-dark{
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
    font-size: 14px; font-weight: 600; line-height: 1; box-shadow: none; transform: none; }
  .nav-cta .btn-solid{ background: var(--green); }
  /* The burger is a plain icon on the right edge; its 44px hit area runs into
     the gutter so the lines themselves end on the page's edge. */
  .nav-burger{ order: 3; width: 44px; height: 44px; margin: 0 -13px 0 -4px; border: 0; border-radius: 999px;
    background: transparent; -webkit-tap-highlight-color: transparent; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after{ width: 18px; }
  .nav-burger:active{ background: rgba(255,255,255,.08); }
  [data-theme="light"] .nav-burger:active{ background: rgba(23,19,16,.07); }

  /* The open menu */
  html:has(nav.menu-open){ overflow: hidden; }
  nav.menu-open .nav-links{
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; height: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0 !important; padding: 6px var(--nav-gut) calc(32px + env(safe-area-inset-bottom));
    background: #0a0a0b; border: 0; border-radius: 0; box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  [data-theme="light"] nav.menu-open ul.nav-links{ background: #f0eee6 !important; border-color: transparent !important;
    box-shadow: none !important; }
  nav.menu-open .nav-links > li{ list-style: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  [data-theme="light"] nav.menu-open .nav-links > li{ border-bottom-color: rgba(23,19,16,.10); }
  nav.menu-open .nav-links > li > a{
    display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 !important;
    border-radius: 0; background: none !important; font-size: 17px !important; font-weight: 500 !important;
    letter-spacing: -.01em !important; color: var(--text) !important; -webkit-tap-highlight-color: transparent; }
  nav.menu-open .nav-links a:active{ opacity: .6; }
  nav.menu-open .fm-wrap > a .nav-chevron{ width: 9px; height: 9px; margin-right: 4px; }

  /* A folded-out menu: its pages one step in, the column names as quiet labels */
  nav.menu-open .fm-wrap.open .fm{ padding: 0 0 14px 16px; }
  nav.menu-open .fm .fm-col-head{ margin: 0 !important; padding: 12px 0 4px; font-size: 13px !important;
    font-weight: 500 !important; line-height: 18px; color: var(--text3) !important; }
  nav.menu-open .fm .fm-item{ display: flex; align-items: center; min-height: 44px; padding: 0 !important;
    margin: 0 !important; border-radius: 0 !important; background: none !important; }
  nav.menu-open .fm .fm-t{ font-size: 16px !important; font-weight: 400 !important; line-height: 22px;
    letter-spacing: 0; color: var(--text) !important; }
  nav.menu-open .fm-split .fm-side{ margin-top: 6px; }
  /* The first label sits right under its own row, not a gap away */
  nav.menu-open .fm .fm-main > .fm-col-head{ padding-top: 0; }
  /* The theme button is a 40px control like the pills beside it */
  .nav-cta .nav-theme{ width: 40px; height: 40px; }

  .nav-user-name{ max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The account menu: no hover-open on touch, so a second tap closes it */
  .nav-user:not(.open):hover .nav-user-dropdown{ opacity: 0; visibility: hidden; }
  .nav-user-dropdown.um{ position: fixed; top: calc(var(--nav-h) + 8px); right: var(--nav-gut); left: auto;
    width: 320px; margin: 0; max-height: calc(100vh - var(--nav-h) - 16px);
    max-height: calc(100dvh - var(--nav-h) - 16px - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; }
  .nav-user-dropdown.um::before{ display: none; }
  .nav-user-dropdown .um-item{ height: 44px; font-size: 15px; }
  /* A flyout opens in place, inside the scrolling card. In the light theme
     it kept the floating card's shadow and looked like a second menu. */
  .um .um-sub, [data-theme="light"] .um .um-sub{ position: static; width: auto; padding: 0 0 4px 30px;
    border: 0; border-radius: 0; box-shadow: none; background: none; }
}
@media (max-width: 480px){
  /* Two buttons and a burger do not fit next to the logo in every language:
     signing in moves into the menu, the bar keeps Register. */
  .nav-cta .btn-ghost{ display: none; }
  .nav-user-trigger{ width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; }
  .nav-user-trigger .nav-user-avatar{ width: 34px; height: 34px; font-size: 14px; }
  .nav-user-name{ display: none; }
  .nav-user-dropdown.um{ left: var(--nav-gut); right: var(--nav-gut); width: auto; }

  /* Light and dark, as one more row */
  nav.menu-open .nav-links li.nav-theme-li{ display: block; }
  nav.menu-open .nav-theme-row{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
    padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--text); font: inherit;
    -webkit-tap-highlight-color: transparent; }
  nav.menu-open .nav-theme-row:active{ opacity: .6; }
  nav.menu-open .nav-theme-row svg{ width: 19px; height: 19px; }
  nav.menu-open .nav-theme-row .nt-lbl{ font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
  /* The label on the list's left edge, the icon on the right like the chevrons */
  nav.menu-open .nav-theme-row{ flex-direction: row-reverse; justify-content: space-between; }
  nav.menu-open .nav-theme-row svg{ margin-right: 2px; }
  /* With the menu open its own Log in / Register pair is the call to action */
  nav.menu-open:has(.nav-acct-li) .nav-cta > a[href="/register"]{ visibility: hidden; }

  /* Log in and Register at the foot of the menu, as two pills */
  nav.menu-open .nav-links li.nav-acct-li{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding-top: 24px; border-bottom: 0; }
  nav.menu-open .nav-links li.nav-acct-li > a{ justify-content: center; min-height: 48px; border-radius: 999px;
    font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
  nav.menu-open .nav-links li.nav-acct-li > a.nav-acct-in{ background: rgba(255,255,255,.10) !important; }
  nav.menu-open .nav-links li.nav-acct-li > a.nav-acct-up{ background: #ffffff !important; color: #0c0c0e !important; }
  [data-theme="light"] nav.menu-open .nav-links li.nav-acct-li > a.nav-acct-in{ background: rgba(23,19,16,.08) !important; }
  [data-theme="light"] nav.menu-open .nav-links li.nav-acct-li > a.nav-acct-up{ background: #1a1714 !important; color: #f0eee6 !important; }
}