/* Produktleiste: bleibt oben stehen, sobald der Seitenkopf verlassen ist.
   Zeigt, wo man ist, und hält das Angebot in Reichweite. Ohne Skript bleibt
   sie verborgen. */
:root { --product-bar: 0px; }
.has-product-bar { --product-bar: 3.25rem; }
.detail-page { --bar-bg: var(--detail-bg); --bar-ink: var(--detail-ink); --bar-muted: var(--detail-muted); --bar-accent: var(--detail-accent); --bar-line: var(--detail-line); }
.vocab-page { --bar-bg: var(--cup-bg); --bar-ink: var(--cup-ink); --bar-muted: var(--cup-muted); --bar-accent: var(--cup-mint); --bar-line: var(--cup-line); }

.product-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  color: var(--bar-ink);
  background: color-mix(in srgb, var(--bar-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bar-line);
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s .28s;
}
.product-bar[hidden] { display: none; }
.product-bar.is-shown { transform: none; visibility: visible; transition: transform .28s ease; }
.product-bar-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--product-bar); }
.product-bar-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font: 650 .98rem/1.2 var(--heading);
  letter-spacing: -.02em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-bar-links { display: flex; gap: clamp(.9rem, 2vw, 1.6rem); margin-left: auto; }
.product-bar-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--product-bar);
  color: var(--bar-muted);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.product-bar-links a[hidden] { display: none; }
.product-bar-links a:hover { color: var(--bar-ink); }
.product-bar-links a[aria-current] { color: var(--bar-ink); box-shadow: inset 0 -2px var(--bar-accent); }
.product-bar-offer {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--bar-accent);
  color: var(--bar-bg);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.product-bar-offer:hover { filter: brightness(1.1); }
.product-bar :focus-visible { outline: 2px solid var(--bar-accent); outline-offset: 3px; }
.product-bar-offer:focus-visible { outline-color: var(--bar-ink); }

/* Sprungziele landen unter der Leiste, nicht dahinter. */
.has-product-bar :is(#reise, #details, #ausprobieren, .cup-section[id], .cup-classroom, .cup-buy, .cup-season-feature) { scroll-margin-top: calc(var(--product-bar) + .75rem); }

.product-bar-offer-short { display: none; }
@media (max-width: 700px) {
  /* Am Handy steht der kurze Text. Der lange bleibt als Linkname für Vorlesehilfen. */
  .product-bar-offer-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .product-bar-offer-short { display: inline; }
  .product-bar-links { display: none; }
  .product-bar-name { flex: 1 1 auto; }
  .product-bar-offer { padding: 0 .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .product-bar, .product-bar.is-shown { transition: none; }
}
@media print { .product-bar { display: none; } }