/* The browser's own native tap-highlight flash (a translucent grey overlay
   on touch, independent of any :hover/:active CSS) was covering the white
   nav buttons on tap. Disabling it sitewide is harmless on non-touch input. */
html body .site-header a:not(#\9),
html body .site-header button:not(#\9) {
  -webkit-tap-highlight-color: transparent !important;
}

/* Every heading, every page: one identical typeface.
   The :not(#\9) clause is a specificity boost (never matches a real id)
   so this reliably beats page-specific rules regardless of class count. */
html body h1:not(#\9),
html body h2:not(#\9),
html body h3:not(#\9) {
  font-family: "Zilla Slab", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

/* Same letter-spacing as the landing page on every section heading, everywhere. */
html body h1:not(#\9),
html body h2:not(#\9) {
  letter-spacing: 0.02em !important;
}

/* Never leave a single orphan word alone on the last line, anywhere on the site. */
html body h1:not(#\9),
html body h2:not(#\9),
html body h3:not(#\9) {
  text-wrap: balance;
}

html body p:not(#\9) {
  text-wrap: pretty;
}

/* Key product/company names always stay on one line, never split mid-phrase. */
html body .nav-product-name:not(#\9),
html body .about-final-card-label:not(#\9),
html body .about-final-ec-link:not(#\9),
html body .dark-offer-copy u:not(#\9),
html body .plan-toggle-btn:not(#\9) {
  white-space: nowrap;
}

/* Footer legal links: identical position and typeface on every page. */
html body footer:not(#\9) {
  display: flex !important;
  justify-content: flex-end !important;
}

html body .footer-legal:not(#\9) {
  display: inline-flex !important;
  justify-content: flex-end !important;
}

html body .footer-legal a:not(#\9) {
  font-family: "Zilla Slab", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
}

/* Final shared navbar: identical on every RIVER page. */
@media (min-width: 761px) {
  html body .site-header,
  html body[data-theme="light"] .site-header,
  html body .site-header.nav-scrolled,
  html body[data-theme="light"] .site-header.nav-scrolled {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: minmax(max-content, 1fr) max-content max-content !important;
    column-gap: 0 !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 7px calc((100% - 1040px) / 2) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #111411 !important;
    background: linear-gradient(90deg, #f4f2f3 0%, #efeded 50%, #dad8d9 100%) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  html body .site-header .brand {
    justify-self: start !important;
    width: 120px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  html body .site-header .brand-logo {
    display: block !important;
    width: 112px !important;
    height: auto !important;
    max-height: 27px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html body .site-header .nav-links {
    position: static !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body .site-header .nav-product-link,
  html body .site-header .nav-placeholder-link,
  html body .site-header .nav-contact-link,
  html body .site-header .header-demo {
    font-family: "Zilla Slab", Georgia, serif !important;
    font-size: 13px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
  }

  html body .site-header .nav-links > a:not(.nav-demo-mobile),
  html body .site-header .nav-product > .nav-product-link {
    padding: 6px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
  }

  /* Desktop product dropdown rows: same framed-card look as the mobile menu. */
  html body .site-header .nav-product-dropdown {
    gap: 3px !important;
    border-radius: 14px !important;
  }

  html body[data-theme] .site-header.site-header .nav-product-dropdown .nav-product-option {
    min-height: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(55, 80, 63, 0.09) !important;
    border-radius: 10px !important;
  }

  /* No hover fill on the dropdown rows, on any page — underline only. */
  html body[data-theme] .site-header.site-header .nav-product-dropdown .nav-product-option:hover,
  html body[data-theme] .site-header.site-header .nav-product-dropdown .nav-product-option:focus-visible,
  html body[data-theme] .site-header.site-header .nav-product-dropdown .nav-product-option.nav-hover-active,
  html body[data-theme] .site-header.site-header .nav-product-dropdown .nav-product-option:hover .nav-product-copy,
  html body[data-theme] .site-header.site-header .nav-product-dropdown .nav-product-option:focus-visible .nav-product-copy,
  html body[data-theme] .site-header.site-header .nav-product-dropdown .nav-product-option.nav-hover-active .nav-product-copy {
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .site-header .header-actions {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
  }

  html body .site-header .header-demo {
    min-height: 34px !important;
    padding: 10px 16px !important;
    border: 1px solid #0b0b0b !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: #0b0b0b !important;
  }

  html body .site-header .menu-toggle,
  html body .site-header .nav-mobile-brand,
  html body .site-header .nav-demo-mobile,
  html body .site-header .nav-mobile-contact {
    display: none !important;
  }
}

/* The approved RIVER green must not be lost to page-level heading rules. */
html body.unified-pricing-page .price-final-cta h2 {
  color: #00eb1c !important;
  -webkit-text-fill-color: #00eb1c !important;
}

/* One calm Demo-buchen interaction everywhere; page-level green/raised hovers are reset. */
html body .site-header .header-demo,
html body .site-header .nav-demo-mobile {
  transition: color 420ms ease, background-color 420ms ease, border-color 420ms ease !important;
}

html body .site-header .header-demo:hover,
html body .site-header .header-demo:focus-visible {
  color: #fff !important;
  background: #6d706d !important;
  border-color: #6d706d !important;
  box-shadow: none !important;
  filter: none !important;
  text-decoration: none !important;
  transform: none !important;
}

html body .site-header .nav-demo-mobile:hover,
html body .site-header .nav-demo-mobile:focus-visible {
  color: #fff !important;
  background: #6d706d !important;
  border-color: #6d706d !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Preise uses the exact same header surface and geometry as the landing page. */
html body.unified-pricing-page .site-header,
html body.unified-pricing-page[data-theme="light"] .site-header,
html body.unified-pricing-page .site-header.nav-scrolled {
  color: #111411 !important;
  background: linear-gradient(90deg, #f4f2f3 0%, #efeded 50%, #dad8d9 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Preise: force the same visible menu lettering as the approved landing navbar.
   Desktop only — the mobile menu has its own larger size below. */
@media (min-width: 761px) {
  html body.unified-pricing-page .site-header .nav-links .nav-product-link,
  html body.unified-pricing-page .site-header .nav-links .nav-placeholder-link,
  html body.unified-pricing-page .site-header .nav-links .nav-contact-link,
  html body.unified-pricing-page .site-header .nav-links .landing-nav-hover-label,
  html body.unified-pricing-page .site-header .header-demo {
    font-family: "Zilla Slab", Georgia, serif !important;
    font-size: 13px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    -webkit-font-smoothing: auto !important;
    font-synthesis: weight style !important;
  }
}

/* Preise loads an additional page stylesheet. Keep its visible labels just as
   strong as the labels on the landing and About pages. */
html body.unified-pricing-page .site-header .nav-links > a .landing-nav-hover-label,
html body.unified-pricing-page .site-header .nav-product > .nav-product-link .landing-nav-hover-label,
html body.unified-pricing-page .site-header .header-demo {
  font-family: "Zilla Slab", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

/* Final shared MOBILE navbar: identical on every RIVER page, matching the
   river-ai.html reference. Page-level CSS (about-final.css, preise-unified.css,
   etc.) previously forced square corners on some pages and rounded pills on
   others; this layer wins via source order + !important so every page matches. */
@media (max-width: 760px) {
  html body .site-header.site-header .nav-mobile-brand {
    display: none !important;
  }

  /* Use the dynamic viewport unit so the menu always reaches the true bottom
     of the screen, even after the browser's own address bar shows/hides. */
  html body .site-header.site-header .nav-links {
    height: 100dvh !important;
    max-height: none !important;
  }

  html body .site-header.site-header .nav-links > a:not(.nav-demo-mobile),
  html body .site-header.site-header .nav-product > .nav-product-link {
    border-radius: 0 !important;
  }

  /* Left-align the button label text on mobile (Produkte, Über uns, Preise,
     Kontakt, EC Group) — only Demo buchen stays centered. */
  html body .site-header.site-header .nav-links > a:not(.nav-demo-mobile),
  html body .site-header.site-header .nav-product > .nav-product-link {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html body .site-header.site-header .nav-product-dropdown {
    border-radius: 0 !important;
  }

  /* Product submenu rows (RIVER AI / Tools / Dashboard): square corners,
     matching the rest of the mobile menu. */
  html body .site-header.site-header .nav-product-option {
    border-radius: 0 !important;
  }

  /* The white square button must hold in every interaction state on mobile
     (hover/focus/active, and while/after the Produkte dropdown is open) —
     never the green-tinted rounded "desktop hover" look. The :not(#\9)
     clause is a specificity boost (never matches a real id) needed to beat
     the home page's own `body[data-theme="light"].home-page ...` rules,
     which otherwise outrank a plain doubled .site-header selector. */
  html body .site-header.site-header .nav-links .nav-product > .nav-product-link:hover:not(#\9),
  html body .site-header.site-header .nav-links .nav-product > .nav-product-link:focus-visible:not(#\9),
  html body .site-header.site-header .nav-links .nav-product > .nav-product-link:focus:not(#\9),
  html body .site-header.site-header .nav-links .nav-product > .nav-product-link:active:not(#\9),
  html body .site-header.site-header .nav-links .nav-product.product-open > .nav-product-link:not(#\9),
  html body .site-header.site-header .nav-links > a:not(.nav-demo-mobile):hover:not(#\9),
  html body .site-header.site-header .nav-links > a:not(.nav-demo-mobile):focus-visible:not(#\9),
  html body .site-header.site-header .nav-links > a:not(.nav-demo-mobile):focus:not(#\9),
  html body .site-header.site-header .nav-links > a:not(.nav-demo-mobile):active:not(#\9) {
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.94) !important;
    color: rgb(32, 37, 33) !important;
    box-shadow: rgba(255, 255, 255, 0.9) 0 1px 0 0, rgba(65, 80, 69, 0.035) 0 8px 24px 0 !important;
    filter: none !important;
    transform: none !important;
  }

  html body .site-header.site-header .nav-links {
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Contact details live in the footer/page content already; the mobile
     menu itself should end with the Demo-buchen button. */
  html body .site-header.site-header .nav-mobile-contact {
    display: none !important;
  }

  /* Demo buchen: one calm solid button instead of the elaborate info-card. */
  html body .site-header.site-header .nav-demo-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin-top: 8px !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: #0b0b0b !important;
    box-shadow: none !important;
  }

  html body .site-header.site-header .nav-demo-mobile:hover,
  html body .site-header.site-header .nav-demo-mobile:focus-visible {
    color: #fff !important;
    background: #6d706d !important;
  }

  html body .site-header.site-header .nav-demo-mobile .nav-demo-copy small,
  html body .site-header.site-header .nav-demo-mobile > span[aria-hidden="true"] {
    display: none !important;
  }

  html body .site-header.site-header .nav-demo-mobile .nav-demo-copy strong {
    color: #fff !important;
    font-family: "Zilla Slab", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em !important;
  }

  html body .site-header.site-header .nav-demo-mobile:hover .nav-demo-copy strong,
  html body .site-header.site-header .nav-demo-mobile:focus-visible .nav-demo-copy strong {
    color: #fff !important;
  }
}