/*
 * Crossbrand90 corrects the interaction regression introduced by Crossbrand89.
 * Menus and contact panels open in protected lanes without scrolling the page,
 * hiding the portraits, or detaching the qualification cards from their hero.
 */
html[data-crossbrand90] {
  --cb90-control: 48px;
  --cb90-edge: 12px;
  --cb90-gap: 7px;
  --cb90-nav-gap: 28px;
}

html[data-crossbrand90],
html[data-crossbrand90] body {
  overflow-anchor: none !important;
}

/* Every persistent control uses the same square, contour and viewport inset. */
html[data-crossbrand90] body section.hero .kp-header61 .kp-toggle61,
html[data-crossbrand90].kp61-scrolled body section.hero .kp-header61 .kp-toggle61,
html[data-crossbrand90="aa"] body .kp-function-toggle,
html[data-crossbrand90="ks"] body .kp-function-toggle,
html[data-crossbrand90="kj"] body .kp-function-toggle-v17,
html[data-crossbrand90] body :is(.kp-whatsapp, .kp-whatsapp-v17, .kp-up, .kp-up-v17) {
  box-sizing: border-box !important;
  width: var(--cb90-control) !important;
  min-width: var(--cb90-control) !important;
  max-width: var(--cb90-control) !important;
  height: var(--cb90-control) !important;
  min-height: var(--cb90-control) !important;
  max-height: var(--cb90-control) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgb(255 255 255 / 44%) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 24%),
    0 7px 18px rgb(0 22 35 / 24%) !important;
}

html[data-crossbrand90] body section.hero .kp-header61 .kp-toggle61,
html[data-crossbrand90].kp61-scrolled body section.hero .kp-header61 .kp-toggle61 {
  position: fixed !important;
  inset: var(--cb90-edge) var(--cb90-edge) auto auto !important;
  transition-property: background-color, border-color, box-shadow, filter !important;
}

html[data-crossbrand90][data-brand61] body section.hero#start .kp-header61 .kp-toggle61,
html[data-crossbrand90][data-brand61].kp61-scrolled body section.hero#start .kp-header61 .kp-toggle61 {
  width: var(--cb90-control) !important;
  min-width: var(--cb90-control) !important;
  max-width: var(--cb90-control) !important;
  height: var(--cb90-control) !important;
  min-height: var(--cb90-control) !important;
  max-height: var(--cb90-control) !important;
}

/* The three deployed headers do not expose exactly the same hero id.  Target
 * their real menu owners as well so a brand rule can never resize or move the
 * shared control after scroll. */
html[data-crossbrand90="aa"][data-brand61="aa"] body button.aa33-nav-toggle.kp-toggle61,
html[data-crossbrand90="ks"][data-brand61="ks"] body button.mobile-menu-button.ks-menu-button-v2.kp-toggle61,
html[data-crossbrand90="kj"][data-brand61="kj"] body button.kp-menu61.kp-toggle61 {
  position: fixed !important;
  inset: var(--cb90-edge) var(--cb90-edge) auto auto !important;
  box-sizing: border-box !important;
  width: var(--cb90-control) !important;
  min-width: var(--cb90-control) !important;
  max-width: var(--cb90-control) !important;
  height: var(--cb90-control) !important;
  min-height: var(--cb90-control) !important;
  max-height: var(--cb90-control) !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[data-crossbrand90="aa"] body .kp-function-dock,
html[data-crossbrand90="ks"] body .kp-function-dock,
html[data-crossbrand90="kj"] body .kp-function-dock-v17 {
  inset: auto auto var(--cb90-edge) var(--cb90-edge) !important;
}

html[data-crossbrand90="aa"] body .kp-contact-dock,
html[data-crossbrand90="ks"] body .kp-contact-dock,
html[data-crossbrand90="kj"] body .kp-contact-dock-v17 {
  inset: auto var(--cb90-edge) var(--cb90-edge) auto !important;
}

html[data-crossbrand90] body :is(.kp-up, .kp-up-v17) {
  right: calc(var(--cb90-edge) + var(--cb90-control) + var(--cb90-gap)) !important;
  bottom: var(--cb90-edge) !important;
}

html[data-crossbrand90] body :is(.kp-whatsapp, .kp-whatsapp-v17) {
  position: fixed !important;
  inset: auto var(--cb90-edge) var(--cb90-edge) auto !important;
  top: auto !important;
  right: var(--cb90-edge) !important;
  bottom: var(--cb90-edge) !important;
  left: auto !important;
  border-color: rgb(204 255 224 / 62%) !important;
}

/* Qualification cards remain document-flow children of their hero at all times. */
html[data-crossbrand90] body section.hero > :is(.kp-founder-credentials-v20, .kp-titles-approved) {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* Main navigation owns the clear left lane; portraits stay in the right lane. */
@media (min-width: 768px) {
  html[data-crossbrand90] {
    --cb90-control: 56px;
    --cb90-edge: 24px;
    --cb90-gap: 10px;
    --cb90-nav-gap: 60px;
  }

  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    position: fixed !important;
    box-sizing: border-box !important;
    inset: 164px auto auto var(--cb90-edge) !important;
    width: 510px !important;
    max-width: calc(100vw - 2 * var(--cb90-edge)) !important;
  }

  html[data-crossbrand90="aa"][data-brand61="aa"] body section.hero#start .kp-header61.aa33-nav-open > #aa33-main-navigation:not([hidden]) {
    top: 164px !important;
    right: auto !important;
    left: var(--cb90-edge) !important;
  }

  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body :is(.kp-function-dock, .kp-function-dock-v17) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html[data-crossbrand90][data-brand61] body :is(.kp-contact-dock, .kp-contact-dock-v17) > :is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden]) {
    position: fixed !important;
    inset: auto auto var(--cb90-edge) calc(var(--cb90-edge) + var(--cb90-control) + var(--cb90-gap)) !important;
    box-sizing: border-box !important;
    right: auto !important;
    left: calc(var(--cb90-edge) + var(--cb90-control) + var(--cb90-gap)) !important;
    bottom: var(--cb90-edge) !important;
    width: min(360px, calc(100vw - 2 * var(--cb90-edge) - var(--cb90-control) - var(--cb90-gap))) !important;
    max-width: 360px !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    width: 232px !important;
  }


  html[data-crossbrand90="aa"][data-brand61="aa"] body section.hero#start .kp-header61.aa33-nav-open > #aa33-main-navigation:not([hidden]) {
    top: 144px !important;
    right: auto !important;
    left: var(--cb90-edge) !important;
    width: 232px !important;
  }

  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    top: 144px !important;
  }

  html[data-crossbrand90][data-brand61] body :is(.kp-contact-dock, .kp-contact-dock-v17) > :is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden]) {
    left: var(--cb90-edge) !important;
    width: 232px !important;
    max-width: 232px !important;
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    top: 144px !important;
    width: 292px !important;
  }

  html[data-crossbrand90][data-brand61] body :is(.kp-contact-dock, .kp-contact-dock-v17) > :is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden]) {
    left: var(--cb90-edge) !important;
    width: 292px !important;
    max-width: 292px !important;
  }
}

@media (min-width: 768px) and (max-height: 600px) and (orientation: landscape) {
  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    width: 220px !important;
    max-height: calc(100svh - var(--cb90-edge) * 2 - var(--cb90-control) - 12px) !important;
    overflow: auto !important;
  }

  html[data-crossbrand90="aa"][data-brand61="aa"] body section.hero#start .kp-header61.aa33-nav-open > #aa33-main-navigation:not([hidden]) {
    right: auto !important;
    left: var(--cb90-edge) !important;
    width: 220px !important;
  }
}

/* Phone menus become compact two-column panels. While a panel is open, both
 * actors remain visible together in the unobstructed lower part of the scene. */
@media (max-width: 767px) and (orientation: portrait) {
  html[data-crossbrand90="ks"] {
    --cb89-person: min(calc((100svh - 54px) * 1.03), 220vw);
  }

  html[data-crossbrand90] body section.hero.kp-full-header > .kp-full-scene,
  html[data-crossbrand90] body section.hero.kp-full-header .kp-full-portraits {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  /* Keep Ludmilla clearly visible to Stefan's right.  Stefan remains in front,
   * but the overlap is deliberately shallow instead of hiding her torso. */
  html[data-crossbrand90] body section.hero.kp-full-header .kp-full-portraits :is(.hero-founder-ludmilla, .hero-person-ludmilla, img.kp-full-woman) {
    right: calc(50% - var(--cb89-person) * .43 + clamp(4px, 1.5vw, 8px)) !important;
  }

  html[data-crossbrand90="ks"] body .ks-biomarker-rail57 {
    left: 4px !important;
    width: 52px !important;
    grid-template-columns: 52px !important;
  }

  html[data-crossbrand90="ks"] body .ks-biomarker-rail57 .ks-analysis-readout:is(.ks-readout-a, .ks-readout-b) {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    position: fixed !important;
    box-sizing: border-box !important;
    inset: 76px var(--cb90-edge) auto var(--cb90-edge) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 282px !important;
    padding: 10px !important;
    overflow: auto !important;
  }

  html[data-crossbrand90="aa"][data-brand61="aa"] body section.hero#start .kp-header61.aa33-nav-open > #aa33-main-navigation:not([hidden]) {
    top: 76px !important;
    right: var(--cb90-edge) !important;
    left: var(--cb90-edge) !important;
    width: auto !important;
  }

  html[data-crossbrand90="ks"] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    top: 108px !important;
    max-height: 200px !important;
  }

  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) > a {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 9px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  html[data-crossbrand90="aa"] body #aa33-main-navigation > .kp61-mobile-services {
    display: none !important;
  }

  html[data-crossbrand90="aa"] body #aa33-main-navigation > :is(.header-message, .header-login) {
    display: block !important;
  }

  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) {
    --cb90-open-person: min(54svh, calc(100svh - 280px), 510px);
  }

  html[data-crossbrand90="ks"]:has(section.hero .kp-toggle61[aria-expanded="true"]) {
    --cb90-open-person: min(47svh, calc(100svh - 325px), 445px);
  }

  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body section.hero .kp-full-portraits :is(.hero-founder-stefan, .hero-person-stefan, img.kp-full-man),
  html[data-crossbrand90]:has(:is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden])) body section.hero .kp-full-portraits :is(.hero-founder-stefan, .hero-person-stefan, img.kp-full-man) {
    inset: auto calc(50% - var(--cb90-open-person) * .3066 + 18px) calc(1svh - var(--cb90-open-person) * .05104) auto !important;
    height: var(--cb90-open-person) !important;
  }

  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body section.hero .kp-full-portraits :is(.hero-founder-ludmilla, .hero-person-ludmilla, img.kp-full-woman),
  html[data-crossbrand90]:has(:is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden])) body section.hero .kp-full-portraits :is(.hero-founder-ludmilla, .hero-person-ludmilla, img.kp-full-woman) {
    inset: auto calc(50% - var(--cb90-open-person) * .43 + 8px) calc(1svh - var(--cb90-open-person) * .9659090909 * .05104) auto !important;
    height: calc(var(--cb90-open-person) * .9659090909) !important;
  }

  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body :is(.kp-function-dock, .kp-function-dock-v17, .kp-contact-dock, .kp-contact-dock-v17) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html[data-crossbrand90]:has(:is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden])) {
    --cb90-open-person: min(55svh, calc(100svh - 352px), 500px);
  }

  html[data-crossbrand90] body :is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden]) {
    position: fixed !important;
    box-sizing: border-box !important;
    inset: calc(var(--cb90-edge) + var(--cb90-control) + var(--cb90-gap)) var(--cb90-edge) auto var(--cb90-edge) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 286px !important;
    overflow: auto !important;
  }
}

/* Short landscape phones keep the same left menu lane as tablets. */
@media (max-height: 600px) and (orientation: landscape) {
  html[data-crossbrand90] {
    --cb90-control: 48px;
    --cb90-edge: 12px;
    --cb90-gap: 7px;
    --cb90-nav-gap: 64px;
  }

  html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) {
    position: fixed !important;
    box-sizing: border-box !important;
    inset: 124px auto auto var(--cb90-edge) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 220px !important;
    max-width: 220px !important;
    max-height: calc(100svh - 136px) !important;
    overflow: auto !important;
  }

  html[data-crossbrand90="aa"][data-brand61="aa"] body section.hero#start .kp-header61.aa33-nav-open > #aa33-main-navigation:not([hidden]) {
    top: 124px !important;
  }

  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body :is(.kp-function-dock, .kp-function-dock-v17) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html[data-crossbrand90] body :is(.kp-whatsapp-card, .kp-whatsapp-card-v17):not([hidden]) {
    position: fixed !important;
    box-sizing: border-box !important;
    inset: var(--cb90-edge) auto auto var(--cb90-edge) !important;
    width: min(360px, calc(100vw - 2 * var(--cb90-edge) - var(--cb90-control) - var(--cb90-gap))) !important;
    max-width: 360px !important;
    max-height: calc(100svh - 2 * var(--cb90-edge)) !important;
    overflow: auto !important;
  }
}

/* Unified navigation contract: every top-right panel is anchored to the
 * toggle's right edge and expands left below it.  It is an explicit exception
 * to the protected actor lane and may cover portraits; it never moves the page. */
html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]),
html[data-crossbrand90="aa"][data-brand61="aa"] body section.hero#start .kp-header61.aa33-nav-open > #aa33-main-navigation:not([hidden]) {
  position: fixed !important;
  box-sizing: border-box !important;
  inset: calc(var(--cb90-edge) + var(--cb90-control) + var(--cb90-nav-gap)) var(--cb90-edge) auto auto !important;
  top: calc(var(--cb90-edge) + var(--cb90-control) + var(--cb90-nav-gap)) !important;
  right: var(--cb90-edge) !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
  width: min(510px, calc(100vw - 2 * var(--cb90-edge))) !important;
  max-width: calc(100vw - 2 * var(--cb90-edge)) !important;
  max-height: calc(100svh - 2 * var(--cb90-edge) - var(--cb90-control) - var(--cb90-nav-gap)) !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: auto !important;
  z-index: 999998 !important;
}

html[data-crossbrand90] body section.hero .kp-header61 nav[aria-label*="Hauptnavigation"]:not([hidden]) > a {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  line-height: 1.15 !important;
}

/* Persistent corner controls stay where they belong while navigation is open.
 * Triggering either peer still closes the navigation through the shared JS. */
html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body :is(.kp-function-dock, .kp-function-dock-v17, .kp-contact-dock, .kp-contact-dock-v17) {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* The navigation exception overlays the unchanged actors.  Do not shrink or
 * shift either person when the menu opens; WhatsApp retains its safe layout. */
@media (max-width: 767px) and (orientation: portrait) {
  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body section.hero .kp-full-portraits :is(.hero-founder-stefan, .hero-person-stefan, img.kp-full-man) {
    inset: auto calc(50% - var(--cb89-person) * .3066 + clamp(16px, 6vw, 25px)) calc(var(--cb89-shoe) - var(--cb89-person) * .05104) auto !important;
    height: var(--cb89-person) !important;
  }

  html[data-crossbrand90]:has(section.hero .kp-toggle61[aria-expanded="true"]) body section.hero .kp-full-portraits :is(.hero-founder-ludmilla, .hero-person-ludmilla, img.kp-full-woman) {
    inset: auto calc(50% - var(--cb89-person) * .43 + clamp(4px, 1.5vw, 8px)) calc(var(--cb89-shoe) - var(--cb89-person) * var(--cb89-woman) * .05104) auto !important;
    height: calc(var(--cb89-person) * var(--cb89-woman)) !important;
  }
}