/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */

/* Shared dark liquid glass for scrolled header + mega. */
:root {
  --rn-nav-glass-tint: rgba(10, 10, 14, 0.58);
  --rn-nav-glass-blur: 48px;
  --rn-nav-glass-sat: 170%;
}

.site-header {
  position: fixed;
  /* positioning context for mega panels */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  overflow: visible;
  transition: background-color var(--rn-duration-slow) var(--rn-ease),
    box-shadow var(--rn-duration-slow) var(--rn-ease),
    padding var(--rn-duration) var(--rn-ease);
  background-color: transparent;
  padding-block: var(--rn-space-6);
}

.site-header.is-scrolled {
  background-color: var(--rn-nav-glass-tint);
  backdrop-filter: blur(var(--rn-nav-glass-blur)) saturate(var(--rn-nav-glass-sat));
  -webkit-backdrop-filter: blur(var(--rn-nav-glass-blur)) saturate(var(--rn-nav-glass-sat));
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
  padding-block: var(--rn-space-4);
}

/*
 * Image-hero pages: keep header transparent at top (like Home).
 * Solid bar only after scroll (.is-scrolled), when a mega is open, or on
 * surfaces without a photo hero (Shop, legal, etc.).
 */
body:has(.hero) .site-header:not(.is-scrolled):not(.is-mega-open),
body:has(.rn-dc-hero) .site-header:not(.is-scrolled):not(.is-mega-open),
body:has(.rn-page-hero) .site-header:not(.is-scrolled):not(.is-mega-open),
.home .site-header:not(.is-scrolled):not(.is-mega-open),
.page-template-page-cafe .site-header:not(.is-scrolled):not(.is-mega-open),
.page-template-page-konfigurator .site-header:not(.is-scrolled):not(.is-mega-open),
body.rr-cfg-page .site-header:not(.is-scrolled):not(.is-mega-open) {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: var(--rn-max-wide);
  margin-inline: auto;
  padding-inline: var(--rn-gutter);
}

.site-logo {
  flex-shrink: 0;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition: opacity 0.35s var(--rn-ease), transform 0.35s var(--rn-ease), height var(--rn-duration) var(--rn-ease);
}

/* .site-header.is-scrolled .site-logo – removed: identical to base state */

.site-logo svg,
.site-logo img {
  height: 52px;
  width: auto;
  transition: height var(--rn-duration) var(--rn-ease);
}

/* Large logo that shrinks on scroll – home + café + konfigurator (same hero shell) */
.home .site-logo svg,
.home .site-logo img,
.page-template-page-cafe .site-logo svg,
.page-template-page-cafe .site-logo img,
.page-template-page-konfigurator .site-logo svg,
.page-template-page-konfigurator .site-logo img,
body.rr-cfg-page .site-logo svg,
body.rr-cfg-page .site-logo img {
  height: 90px;
}

.home .site-header.is-scrolled .site-logo svg,
.home .site-header.is-scrolled .site-logo img,
.page-template-page-cafe .site-header.is-scrolled .site-logo svg,
.page-template-page-cafe .site-header.is-scrolled .site-logo img,
.page-template-page-konfigurator .site-header.is-scrolled .site-logo svg,
.page-template-page-konfigurator .site-header.is-scrolled .site-logo img,
body.rr-cfg-page .site-header.is-scrolled .site-logo svg,
body.rr-cfg-page .site-header.is-scrolled .site-logo img {
  height: 52px;
}

/* Global: alle Seiten mit Bild-Hero starten mit großem Logo (wie Home) */
body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-logo svg,
body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-logo img {
  height: 90px;
}

body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-header.is-scrolled .site-logo svg,
body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-header.is-scrolled .site-logo img {
  height: 52px;
}

/* Shop / Café Mode Switch */
.rn-mode-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  flex-shrink: 0;
}

.rn-mode-switch__btn {
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
  padding: 0.5em 1.1em;
  border-radius: 999px;
  transition: background-color var(--rn-duration) var(--rn-ease), color var(--rn-duration) var(--rn-ease);
}

.rn-mode-switch__btn:hover {
  color: var(--rn-white);
}

.rn-mode-switch__btn.is-active {
  background-color: var(--rn-white);
  color: var(--rn-black);
}

.mobile-nav__link--switch {
  color: var(--rn-accent) !important;
}

@media (max-width: 1024px) {
  .rn-mode-switch {
    display: none;
  }
}

/* Primary Nav */
.primary-nav {
  display: flex;
  align-items: center;
  height: 52px;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--rn-space-8);
}

.primary-nav__link {
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rn-white);
  position: relative;
  padding-block: var(--rn-space-2);
}

.primary-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--rn-accent);
  transition: width var(--rn-duration) var(--rn-ease);
}

.primary-nav__link:hover::after,
.primary-nav__link.is-active::after {
  width: 100%;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--rn-space-6);
  height: 52px;
}

.header-actions__cluster {
  display: flex;
  align-items: center;
  gap: var(--rn-space-5);
  height: 100%;
}

.header-actions__cluster .rn-popover-wrap {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.header-actions__icon {
  color: var(--rn-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity var(--rn-duration) var(--rn-ease), transform var(--rn-duration) var(--rn-ease);
}

.header-actions__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.header-actions__icon:hover {
  opacity: 0.75;
  transform: scale(1.08);
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--rn-accent);
  color: var(--rn-black);
  font-size: 12px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--rn-space-2);
  color: var(--rn-white);
}

.menu-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  margin: 5px 0;
  transition: all var(--rn-duration) var(--rn-ease);
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Nav Overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  background-color: var(--rn-black);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rn-space-6);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--rn-duration-slow) var(--rn-ease), visibility var(--rn-duration-slow) var(--rn-ease);
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav__link {
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rn-white);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-nav.is-open .mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation */
.mobile-nav.is-open .mobile-nav__link:nth-child(1) {
  transition-delay: 0.1s;
}

.mobile-nav.is-open .mobile-nav__link:nth-child(2) {
  transition-delay: 0.15s;
}

.mobile-nav.is-open .mobile-nav__link:nth-child(3) {
  transition-delay: 0.2s;
}

.mobile-nav.is-open .mobile-nav__link:nth-child(4) {
  transition-delay: 0.25s;
}

.mobile-nav.is-open .mobile-nav__link:nth-child(5) {
  transition-delay: 0.3s;
}

.mobile-nav.is-open .mobile-nav__link:nth-child(6) {
  transition-delay: 0.35s;
}


/* Primary nav trigger (mega) */
.primary-nav__item--mega {
  position: static;
}

.primary-nav__trigger {
  /* Button reset only – keep .primary-nav__link type/color (do NOT inherit body). */
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding-inline: 0;
  padding-block: var(--rn-space-2);
  cursor: pointer;
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rn-white);
  line-height: inherit;
}

.primary-nav__chevron {
  display: block;
  flex-shrink: 0;
  transition: transform var(--rn-duration) var(--rn-ease);
  opacity: 0.85;
}

.primary-nav__trigger[aria-expanded="true"] .primary-nav__chevron {
  transform: rotate(180deg);
}

.primary-nav__trigger[aria-expanded="true"]::after {
  width: 100%;
}

/* ==========================================================================
   Mega menu — dark liquid glass, continuous with header (no gap)
   ========================================================================== */
.rn-mega {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 990; /* under .site-header (1000) so nav stays clickable */
  color: var(--rn-white);
  /* Content starts below header; glass fills from y=0 → no Leerzeile */
  padding-top: var(--rn-header-offset, 5.5rem);
  padding-bottom: var(--rn-space-6);
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  /* Flat tint only — layered gradients on BF element can kill Chromium blur */
  background-color: var(--rn-nav-glass-tint);
  -webkit-backdrop-filter: blur(var(--rn-nav-glass-blur)) saturate(var(--rn-nav-glass-sat));
  backdrop-filter: blur(var(--rn-nav-glass-blur)) saturate(var(--rn-nav-glass-sat));
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* No transform/opacity on this node — both trap backdrop-filter */
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.2s var(--rn-ease);
}

.rn-mega__frost,
.rn-mega__frost-canvas,
.rn-mega__glass {
  display: none !important;
}

/* Soft specular sheen (does not replace blur) */
.rn-mega::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 55% at 18% -8%, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 28%);
}

.rn-mega::after {
  content: none;
}

.rn-mega > .rn-mega__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--rn-space-4) var(--rn-space-2);
}

.rn-mega--compact > .rn-mega__inner {
  padding-block: var(--rn-space-3) var(--rn-space-2);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rn-mega,
  .site-header.is-scrolled,
  body.rn-mega-open .site-header {
    background-color: rgba(12, 12, 16, 0.94);
  }
}

.rn-mega[hidden] {
  display: none !important;
}

.rn-mega.is-open {
  display: block;
  visibility: visible;
  pointer-events: auto;
}

.rn-mega__inner {
  max-width: var(--rn-max-wide);
  margin-inline: auto;
  padding-inline: var(--rn-gutter);
}

.rn-mega__grid {
  display: grid;
  gap: var(--rn-space-8);
}

/* Alle Mega-Menüs gleich: zwei Linkspalten links, Bildkachel mit CTA rechts */
.rn-mega__grid--sortiment,
.rn-mega__grid--firmen,
.rn-mega__grid--erlebnis {
  grid-template-columns: 1fr 1fr minmax(300px, 1.15fr);
  align-items: stretch;
}

.rn-mega__feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rn-radius-card);
  background: #0a0a0a;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: border-color var(--rn-duration) var(--rn-ease);
}
.rn-mega__feature:hover,
.rn-mega__feature:focus-visible { border-color: rgba(201, 168, 118, 0.6); color: #fff; }

/* Bild füllt die Karte (wie ein kleiner Seitenkopf), Text links auf dunklem Verlauf */
.rn-mega__feature-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transition: transform 0.8s var(--rn-ease);
}
.rn-mega__feature-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.62) 45%, rgba(10, 10, 10, 0) 80%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 45%);
  pointer-events: none;
}
.rn-mega__feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 70%;
  padding: 28px;
}
.rn-mega__feature-kicker {
  font-family: var(--rn-font-display);
  font-size: var(--rn-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--rn-eyebrow-track);
  text-transform: uppercase;
  color: var(--rn-accent);
}
.rn-mega__feature-title {
  font-family: var(--rn-font-display);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.rn-mega__feature-cta.rn-mega__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  margin: 8px 0 0;
  padding: 0 22px;
  white-space: nowrap;
  border: 2px solid #fff;
  border-radius: var(--rn-radius-control);
  background: #fff;
  color: #0a0a0a;
  font-family: var(--rn-font-display);
  font-size: var(--rn-btn-size);
  font-weight: 700;
  letter-spacing: var(--rn-btn-track);
  text-transform: uppercase;
}
.rn-mega__feature-cta.rn-mega__cta::after { content: '→'; font-size: 16px; letter-spacing: 0; transition: transform var(--rn-duration) var(--rn-ease); }
.rn-mega__feature:hover .rn-mega__feature-img,
.rn-mega__feature:focus-visible .rn-mega__feature-img { transform: scale(1.06); }
.rn-mega__feature:hover .rn-mega__feature-cta,
.rn-mega__feature:focus-visible .rn-mega__feature-cta { background: var(--rn-accent); border-color: var(--rn-accent); color: #0a0a0a; }
.rn-mega__feature:hover .rn-mega__feature-cta::after { transform: translateX(3px); }

.rn-mega__heading {
  margin: 0 0 var(--rn-space-4);
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rn-accent);
}

.rn-mega__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-2);
}

.rn-mega__links a {
  display: inline-block;
  color: var(--rn-white);
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  padding-block: 0.35em;
  border-bottom: 1px solid transparent;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
  transition: color var(--rn-duration) var(--rn-ease),
    border-color var(--rn-duration) var(--rn-ease);
}

.rn-mega__links a:hover,
.rn-mega__links a:focus-visible {
  color: var(--rn-accent);
  border-bottom-color: rgba(200, 169, 126, 0.55);
}

.rn-mega__products {
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-3);
}

.rn-mega__product {
  display: flex;
  align-items: center;
  gap: var(--rn-space-3);
  padding: var(--rn-space-2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.28);
  transition: background var(--rn-duration) var(--rn-ease),
    border-color var(--rn-duration) var(--rn-ease),
    transform var(--rn-duration) var(--rn-ease);
}

.rn-mega__product:hover,
.rn-mega__product:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
}

.rn-mega__product-img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.rn-mega__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rn-mega__product-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--rn-white);
}

.rn-mega__product-meta strong {
  font-family: var(--rn-font-display);
  font-size: var(--rn-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rn-mega__product-meta span {
  font-size: var(--rn-text-xs);
  color: var(--rn-accent);
}

.rn-mega__note {
  margin: 0;
  color: var(--rn-white-55);
  font-size: var(--rn-text-sm);
}

.rn-mega__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rn-space-3);
  margin-top: var(--rn-space-4);
  padding-top: var(--rn-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Sortiment: CTAs sit directly under Beliebt products (no full-width footer row) */
.rn-mega__footer--beliebt {
  justify-content: stretch;
  margin-top: var(--rn-space-4);
  padding-top: var(--rn-space-3);
  gap: var(--rn-space-2);
}
.rn-mega__footer--beliebt .rn-mega__cta {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.65rem;
  padding: 0.7em 1em;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
}

.rn-mega__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11.5rem;
  min-height: 3rem;
  padding: 0.85em 1.75em;
  border-radius: var(--rn-radius-control);
  border: 2px solid #fff;
  background: #fff;
  color: var(--rn-black);
  font-family: var(--rn-font-display);
  font-size: var(--rn-btn-size);
  font-weight: 700;
  letter-spacing: var(--rn-btn-track);
  text-transform: uppercase;
  transition: background var(--rn-duration) var(--rn-ease),
    color var(--rn-duration) var(--rn-ease),
    border-color var(--rn-duration) var(--rn-ease),
    transform var(--rn-duration) var(--rn-ease),
    box-shadow var(--rn-duration) var(--rn-ease);
}

.rn-mega__cta:hover,
.rn-mega__cta:focus-visible {
  background: var(--rn-accent);
  border-color: var(--rn-accent);
}

.rn-mega__cta--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--rn-white);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.rn-mega__cta--ghost:hover,
.rn-mega__cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--rn-white);
  color: var(--rn-white);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Mega open: same glass as .rn-mega (panel is body-level, not a header child). */
.site-header.is-mega-open,
body:has(.hero) .site-header.is-mega-open,
body:has(.rn-dc-hero) .site-header.is-mega-open,
body:has(.rn-page-hero) .site-header.is-mega-open,
.home .site-header.is-mega-open,
.page-template-page-cafe .site-header.is-mega-open,
.page-template-page-konfigurator .site-header.is-mega-open,
body.rr-cfg-page .site-header.is-mega-open,
body.rn-mega-open .site-header {
  /*
   * Header stays transparent while mega is open so ONE glass surface shows:
   * .rn-mega (z 990) paints liquid glass from y=0; header (z 1000) only holds nav.
   * Double backdrop-filter (header over mega) looked like opaque black.
   */
  transition: none !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  padding-bottom: 0.25rem !important;
}


/* Mobile nav – grouped layout */
.mobile-nav__inner {
  width: min(100%, 420px);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: var(--rn-space-10) var(--rn-gutter) var(--rn-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-6);
}

.mobile-nav__switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  align-self: center;
  margin-bottom: var(--rn-space-2);
}

.mobile-nav__switch-btn {
  padding: 0.45em 1.2em;
  border-radius: 999px;
  font-size: var(--rn-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rn-white);
  transition: background var(--rn-duration) var(--rn-ease), color var(--rn-duration) var(--rn-ease);
}

.mobile-nav__switch-btn.is-active {
  background: var(--rn-white);
  color: var(--rn-black);
}

.mobile-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-3);
}

.mobile-nav__label {
  margin: 0 0 var(--rn-space-1);
  font-size: var(--rn-text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rn-accent);
}

.mobile-nav .mobile-nav__link {
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  letter-spacing: 0.08em;
}

.mobile-nav.is-open .mobile-nav__link,
.mobile-nav.is-open .mobile-nav__label,
.mobile-nav.is-open .mobile-nav__switch {
  opacity: 1;
  transform: none;
}

.mobile-nav__label,
.mobile-nav__switch {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mobile-nav.is-open .mobile-nav__switch {
  transition-delay: 0.05s;
}

.mobile-nav.is-open .mobile-nav__group:nth-of-type(1) .mobile-nav__label { transition-delay: 0.1s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(1) .mobile-nav__link:nth-of-type(1) { transition-delay: 0.12s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(1) .mobile-nav__link:nth-of-type(2) { transition-delay: 0.15s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(1) .mobile-nav__link:nth-of-type(3) { transition-delay: 0.18s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(1) .mobile-nav__link:nth-of-type(4) { transition-delay: 0.21s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(2) .mobile-nav__label { transition-delay: 0.24s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(2) .mobile-nav__link { transition-delay: 0.27s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(3) .mobile-nav__label { transition-delay: 0.3s; }
.mobile-nav.is-open .mobile-nav__group:nth-of-type(3) .mobile-nav__link { transition-delay: 0.33s; }
.mobile-nav.is-open > .mobile-nav__inner > .mobile-nav__link--switch { transition-delay: 0.36s; }

.mobile-nav {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding-top: calc(var(--rn-header-height, 72px) + 0.5rem);
}

@media (max-width: 1024px) {
  .primary-nav {
    display: none;
  }

  .rn-mega {
    display: none !important;
  }

  .menu-toggle {
    display: block;
  }
}

@media (max-width: 1200px) {
  .rn-mega__grid--sortiment,
  .rn-mega__grid--firmen,
  .rn-mega__grid--erlebnis {
    grid-template-columns: 1fr 1fr minmax(260px, 1fr);
    gap: var(--rn-space-6);
  }
}

/* ── Mobile compact header ─────────────────────────── */
@media (max-width: 768px) {
  :root {
    --rn-header-height: 60px;
  }

  .site-header {
    padding-block: var(--rn-space-3);
  }

  .site-header.is-scrolled {
    padding-block: var(--rn-space-2);
    /* Denser bar so white icons stay crisp over cream/white sections */
    background-color: rgba(12, 12, 16, 0.9);
  }

  .header-inner {
    align-items: center;
  }

  .site-logo svg,
  .site-logo img {
    height: 36px;
  }

  .home .site-logo svg,
  .home .site-logo img,
  .page-template-page-cafe .site-logo svg,
  .page-template-page-cafe .site-logo img,
  .page-template-page-konfigurator .site-logo svg,
  .page-template-page-konfigurator .site-logo img,
  body.rr-cfg-page .site-logo svg,
  body.rr-cfg-page .site-logo img {
    height: 50px;
  }

  .home .site-header.is-scrolled .site-logo svg,
  .home .site-header.is-scrolled .site-logo img,
  .page-template-page-cafe .site-header.is-scrolled .site-logo svg,
  .page-template-page-cafe .site-header.is-scrolled .site-logo img,
  .page-template-page-konfigurator .site-header.is-scrolled .site-logo svg,
  .page-template-page-konfigurator .site-header.is-scrolled .site-logo img,
  body.rr-cfg-page .site-header.is-scrolled .site-logo svg,
  body.rr-cfg-page .site-header.is-scrolled .site-logo img {
    height: 36px;
  }

  body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-logo svg,
  body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-logo img {
    height: 50px;
  }

  body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-header.is-scrolled .site-logo svg,
  body:has(.hero, .rn-dc-hero, .rn-page-hero, .rn-about-hero, .rn-account-hero, .rn-subpage-hero) .site-header.is-scrolled .site-logo img {
    height: 36px;
  }

  .header-actions {
    align-items: center;
    gap: 2px;
    height: auto;
    min-height: 44px;
  }

  .header-actions__cluster {
    gap: 0;
    height: auto;
  }

  /* 44px touch targets */
  .header-actions__icon {
    width: 44px;
    height: 44px;
  }

  .header-actions__icon svg {
    width: 22px;
    height: 22px;
  }

  .header-actions__icon:hover {
    transform: none;
  }

  /* Speisekarte lives in the drawer on small screens */
  .header-actions__icon--drawer {
    display: none;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .cart-count {
    width: 18px;
    height: 18px;
    font-size: 12px;
    top: 4px;
    right: 4px;
  }
}

/* Very small phones: keep chrome tight */
@media (max-width: 380px) {
  .header-actions__icon {
    width: 40px;
    height: 40px;
  }
}