/* ============================================================
   SESAM — Tab-Navigation
   Sitzt am unteren Rand der Hero, scrollt mit und klebt dann
   an der Oberkante. Der aktive Link ist einfach rot markiert,
   kein Reiter-Effekt.
   ============================================================ */

/* Sentinel: 1px-Marker vor der Leiste für den Sticky-Zustand */
#navSentinel { height: 1px; }

.tabnav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.tabnav__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--nav-h);
  padding-inline: var(--gutter);
  background: var(--char);
  color: var(--on-char);
}

.tabnav__brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--on-char);
}
.tabnav__seed { width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--accent); }

/* ---- Links ---- */
.tabnav__links { display: flex; align-items: center; gap: 0.2rem; }
.tabnav__links li { display: flex; }
.tabnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55em clamp(0.8rem, 1.6vw, 1.4rem);
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-variation-settings: 'wght' 560;
  color: var(--on-char-mut);
  transition: color var(--dur-hover) var(--ease-out-hard),
              background-color var(--dur-hover) var(--ease-out-hard);
}
.tabnav__link:hover { color: var(--on-char); }

/* Aktiver Link: einfach rot markiert, kein Tab-Effekt */
.tabnav__link.is-active {
  background: var(--accent);
  color: var(--on-accent);
  font-variation-settings: 'wght' 680;
}

/* ---- Aktionen rechts ---- */
.tabnav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.tabnav__cart, .tabnav__wa, .tabnav__menu {
  background: var(--char-2);
  color: var(--on-char);
}
.tabnav__cart:hover, .tabnav__wa:hover, .tabnav__menu:hover { background: var(--accent); color: var(--on-accent); }
.tabnav__count[hidden] { display: none; }
.tabnav__count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.25em;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.62rem;
}
.tabnav__menu { display: none; }

/* ---- Bestellart-Umschalter ---- */
.modetoggle {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--char-2);
}
.modetoggle button {
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-variation-settings: 'wght' 580;
  color: var(--on-char-mut);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-out-hard),
              color var(--dur-hover) var(--ease-out-hard);
}
.modetoggle button[aria-pressed='true'] {
  background: var(--on-char);
  color: var(--char);
}
.modetoggle button:not([aria-pressed='true']):hover { color: var(--on-char); }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .modetoggle button { font-size: 0.72rem; padding: 0.45em 0.75em; }
}
@media (max-width: 1120px) {
  .tabnav .modetoggle { display: none; } /* wandert ins mobile Menü + Warenkorb */
}
@media (max-width: 900px) {
  .tabnav__links { display: none; }
  .tabnav__menu { display: inline-flex; }
  .tabnav__bar { justify-content: space-between; }
}

/* ============================================================
   Fakten-Laufband (direkt unter der Leiste)
   ============================================================ */
.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--accent);
  color: var(--on-accent);
  padding-block: 0.7rem;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: marquee 26s linear infinite;
}
.marquee__track i { font-style: normal; font-size: 0.8em; opacity: 0.85; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ============================================================
   Mobiles Menü
   ============================================================ */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--char);
  color: var(--on-char);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--gutter);
}
.mmenu[hidden] { display: none; }
.mmenu__close {
  position: absolute;
  top: 1.2rem; right: var(--gutter);
  background: var(--char-2);
  color: var(--on-char);
}
.mmenu__list { display: flex; flex-direction: column; gap: 0.35em; }
.mmenu__item {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 10vw, 3.6rem);
  text-transform: uppercase;
  color: var(--on-char);
  padding-block: 0.08em;
}
.mmenu__item:hover, .mmenu__item.is-active { color: var(--accent); }
.mmenu__mode {
  display: flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--char-2);
  align-self: flex-start;
}
.mmenu__mode button {
  padding: 0.6em 1em;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  color: var(--on-char-mut);
  cursor: pointer;
}
.mmenu__mode button[aria-pressed='true'] { background: var(--on-char); color: var(--char); }
.mmenu__wa { align-self: flex-start; }