/* v88: cached successor to v64 plus the additive cross-brand UI refinement. */
/* v64: shared optical scale; approved v62 artwork and native menu stay intact. */
html{--kp64-control:56px;--kp64-edge:24px;--kp64-top:22px;--kp64-logo-visible:clamp(92px,7.64vw,110px)}
html body .brand61-header.site-header{grid-template-columns:minmax(0,1fr) max-content!important;grid-template-rows:auto!important;align-items:start!important;min-height:0!important;padding:var(--kp64-top) var(--kp64-edge)!important;gap:12px 20px!important}
html body .brand61-header .brand61-freestanding.brand{width:min(100%,calc(var(--kp64-logo-visible)*6.8093))!important;max-width:none!important;grid-column:1!important;grid-row:1!important;align-self:start!important}
html body .brand61-header .desktop-nav{display:none!important}
html body .brand61-header .header-actions{display:flex!important;grid-column:2!important;grid-row:1!important;align-self:start!important;justify-content:flex-end!important;justify-self:end;align-items:center;flex-wrap:nowrap!important;gap:10px!important;padding:0 calc(var(--kp64-control) + 14px) 0 0!important}
html body .brand61-header .header-actions a{min-height:var(--kp64-control);box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:15px!important;line-height:1.15;padding:10px 16px!important;white-space:nowrap;border-radius:8px!important;font-weight:800;color:#fff!important;text-shadow:1px 1px 2px #0008}
html body .brand61-header .header-actions .retirement-depot-promo{flex-direction:column;align-items:flex-start;gap:4px;min-width:0;background:linear-gradient(135deg,#f36a21,#c8470d)!important}
html body .brand61-header .header-actions .retirement-depot-promo small{font-size:10px;letter-spacing:.08em}
html body .brand61-header .header-actions .header-pkv{background:linear-gradient(135deg,#126886,#063e61)!important}
html body .brand61-header .mobile-menu-toggle,html body .brand61-header.brand61-scrolled .mobile-menu-toggle{display:block!important;position:fixed!important;inset:var(--kp64-top) var(--kp64-edge) auto auto!important;width:var(--kp64-control)!important;height:var(--kp64-control)!important;min-width:var(--kp64-control);margin:0!important;grid-area:auto!important}
html body .brand61-header .mobile-menu-toggle span{width:26px;height:2.5px}
html body .brand61-header .mobile-nav{top:calc(var(--kp64-top) + var(--kp64-control) + 12px)!important;right:var(--kp64-edge)!important;width:min(510px,calc(100% - var(--kp64-edge)*2));max-height:calc(100dvh - var(--kp64-top) - var(--kp64-control) - 36px)}
html body .brand61-header .mobile-nav a{font-size:16px;min-height:48px}
html body .contact-dock{right:var(--kp64-edge)!important;bottom:var(--kp64-edge)!important}
html body .whatsapp-trigger,html body .back-to-top,html body .function-dock-toggle{width:var(--kp64-control)!important;height:var(--kp64-control)!important;min-width:var(--kp64-control);border-radius:8px!important}
html body .back-to-top{right:calc(var(--kp64-edge) + var(--kp64-control) + 12px)!important;bottom:var(--kp64-edge)!important}
html body .whatsapp-trigger svg,html body .back-to-top svg{width:28px;height:28px}
html body .function-dock{position:fixed;inset:auto auto var(--kp64-edge) var(--kp64-edge)!important;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px;transform:none}
html body .function-dock-toggle{display:grid!important;place-items:center;padding:0;border:1px solid #ffffffb0;background:linear-gradient(135deg,#10a9c0,#08728c);box-shadow:0 8px 22px #032d4b40;color:#fff;cursor:pointer}
html body .function-dock-toggle-grid{display:grid;grid-template-columns:repeat(2,7px);gap:5px}
html body .function-dock-toggle-grid i{width:7px;height:7px;border-radius:50%;background:currentColor;transition:transform .18s}
html body .function-dock.is-open .function-dock-toggle-grid i:first-child,html body .function-dock.is-open .function-dock-toggle-grid i:last-child{transform:scale(1.35)}
html body .function-dock-links{display:grid;gap:8px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s}
html body .function-dock.is-open .function-dock-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
html body .function-dock a,html body .function-dock a:hover,html body .function-dock a:focus-visible{width:220px;height:52px;grid-template-columns:52px 1fr;border:1px solid #ffffffa0;border-radius:8px}
html body .function-dock-label{font-size:15px;text-shadow:1px 1px 2px #0008}
html body .function-dock-icon{width:52px;height:52px}
html body .function-dock-icon svg{width:25px;height:25px}
/* Desktop and tablet retain the visible side rail; the four-dot toggle is mobile only. */
@media(min-width:768px){
 html body .function-dock{inset:clamp(132px,18vh,170px) auto auto 0!important;display:grid;gap:10px}
 html body .function-dock-toggle{display:none!important}
 html body .function-dock-links,html body .function-dock.is-open .function-dock-links{display:grid;gap:10px;opacity:1;visibility:visible;pointer-events:auto;transform:none}
 html body .function-dock a{width:var(--kp64-control);height:var(--kp64-control);grid-template-columns:var(--kp64-control) 174px;border-left:0;border-radius:0 8px 8px 0}
 html body .function-dock a:hover,html body .function-dock a:focus-visible{width:230px;height:var(--kp64-control);grid-template-columns:var(--kp64-control) 174px;border-left:0;border-radius:0 8px 8px 0}
 html body .function-dock-icon{width:var(--kp64-control);height:var(--kp64-control)}
}
@media(min-width:1101px){
 html body .ov-hero-20260913 .hero-card{width:31%;max-width:640px;padding:clamp(24px,1.8vw,36px);left:3%;top:52%;border-radius:8px}
 html body .ov-hero-20260913 .hero-card h1{font-size:clamp(34px,2.65vw,66px);line-height:1.1}
 html body .ov-hero-20260913 .hero-card>p:not(.eyebrow){font-size:clamp(15px,.9vw,20px);line-height:1.6;margin:18px 0}
 html body .ov-hero-20260913 .hero-card .eyebrow{font-size:clamp(11px,.65vw,15px)}
 html body .ov-hero-20260913 .hero-proof{font-size:12px;gap:16px;margin-top:18px;padding-top:14px;flex-wrap:wrap}
}
@media(min-width:768px) and (max-width:1279px){
 html body .brand61-header.site-header{grid-template-columns:minmax(0,1fr) var(--kp64-control)!important;gap:10px!important}
 html body .brand61-header .brand61-freestanding.brand{grid-column:1!important}
 html body .brand61-header .header-actions{grid-column:1/3!important;grid-row:2!important;padding-right:0!important}
}
@media(max-width:767px){
 html{--kp64-control:48px;--kp64-edge:12px;--kp64-top:14px;--kp64-logo-visible:clamp(36px,8vw,60px)}
 html body .brand61-header.site-header{grid-template-columns:minmax(0,1fr) var(--kp64-control)!important;gap:12px!important}
 html body .brand61-header .brand61-freestanding.brand{width:min(100%,620px)!important}
 html body .brand61-header .header-actions{display:none!important}
 html body .brand61-header .mobile-nav{grid-template-columns:1fr}
 html body .function-dock a{height:48px;grid-template-columns:48px 1fr}
 html body .function-dock-icon{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){html body .function-dock *{transition:none!important}}
@media print{html body .function-dock,html body .brand61-header .mobile-menu-toggle{display:none!important}}


/* Cross-brand UI 88: additive header, controls, portrait depth and CTA finish.
   Existing handlers, destinations, calculators and source portraits stay intact. */
:root {
  --kp88-control: clamp(56px, 2.25vw, 88px);
  --kp88-gap: clamp(10px, .45vw, 16px);
}

/* Pixel artwork stays untouched; the CSS shadow alone restores the approved
   rear/right depth treatment at every responsive size. */
html body .ov-hero-20260913 .hero-person-stefan {
  filter: drop-shadow(11px 13px 13px rgb(1 25 43 / 36%)) drop-shadow(5px 7px 5px rgb(1 25 43 / 16%)) !important;
}

@media (min-width: 768px) {
  html { --kp64-control: var(--kp88-control); }

  /* One clear header action: the native menu at the upper-right. All former
     destinations remain available inside that menu and in the quick rail. */
  html body .brand61-header.site-header {
    grid-template-columns: minmax(0, 1fr) var(--kp88-control) !important;
    grid-template-rows: auto !important;
  }
  html body .brand61-header .header-actions { display: none !important; }
  html body .brand61-header .mobile-menu-toggle,
  html body .brand61-header.brand61-scrolled .mobile-menu-toggle {
    width: var(--kp88-control) !important;
    height: var(--kp88-control) !important;
    min-width: var(--kp88-control) !important;
    min-height: var(--kp88-control) !important;
  }
  html body .brand61-header .mobile-menu-toggle span {
    width: clamp(26px, .82vw, 34px);
    height: clamp(2.5px, .09vw, 3.5px);
  }

  /* Exactly four complete quick actions stay visible on the left. */
  html body .function-dock {
    inset: clamp(132px, 18vh, 210px) auto auto 0 !important;
  }
  html body .function-dock-links,
  html body .function-dock.is-open .function-dock-links {
    gap: var(--kp88-gap);
  }
  html body .function-dock a {
    width: var(--kp88-control);
    height: var(--kp88-control);
    grid-template-columns: var(--kp88-control) clamp(174px, 5vw, 210px);
  }
  html body .function-dock a:hover,
  html body .function-dock a:focus-visible {
    width: calc(var(--kp88-control) + clamp(174px, 5vw, 210px));
    height: var(--kp88-control);
    grid-template-columns: var(--kp88-control) clamp(174px, 5vw, 210px);
  }
  html body .function-dock-icon {
    width: var(--kp88-control);
    height: var(--kp88-control);
  }
  html body .function-dock-icon svg {
    width: clamp(25px, .85vw, 34px);
    height: clamp(25px, .85vw, 34px);
  }
  html body .function-dock-label { font-size: clamp(15px, .48vw, 18px); }

  /* Preserve OV's lower-right contact position; scroll-up sits directly left
     of WhatsApp and scales from the same 56px desktop baseline. */
  html body .back-to-top {
    right: calc(var(--kp64-edge) + var(--kp88-control) + var(--kp88-gap)) !important;
    left: auto !important;
    bottom: var(--kp64-edge) !important;
  }
  html body .contact-dock {
    right: var(--kp64-edge) !important;
    left: auto !important;
    bottom: var(--kp64-edge) !important;
  }

  /* Preserve the approved transparent artwork. The positive X/Y shadow reads
     behind and to Stefan's right; Ludmilla remains smaller and one layer back. */
  html body .ov-hero-20260913 {
    --ov-nav-height: 0px !important;
    --ov-scene-height: 100svh !important;
    --kp88-person-height: min(calc(var(--ov-scene-height) * 1.056), 218vw);
  }
  html body .ov-hero-20260913 .hero {
    height: var(--ov-scene-height) !important;
  }
  html body .ov-hero-20260913 .hero-people {
    height: 100% !important;
    overflow: visible !important;
  }
  html body .ov-hero-20260913 .hero-person-stefan {
    height: var(--kp88-person-height) !important;
    bottom: calc(10px - var(--kp88-person-height) * .05104) !important;
    z-index: 3 !important;
    filter: drop-shadow(18px 20px 18px rgb(1 25 43 / 42%)) drop-shadow(7px 9px 6px rgb(1 25 43 / 18%)) !important;
  }
  html body .ov-hero-20260913 .hero-person-ludmilla {
    height: calc(var(--kp88-person-height) * .93) !important;
    bottom: calc(14px - var(--kp88-person-height) * .93 * .05104) !important;
    z-index: 2 !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  html body .brand61-header .brand61-freestanding.brand {
    /* On tablet-sized stages the full-width lockup crossed the portraits.
       Keep it readable while reserving a clear centre lane for both faces. */
    width: clamp(258px, 34vw, 380px) !important;
  }
}

/* Short landscape screens use the established compact mobile control model.
   The portraits keep their near-full-height treatment, while the logo and
   controls no longer compete for the same narrow vertical band. */
@media (min-width: 768px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --kp88-control: 48px;
    --kp64-control: 48px;
    --kp64-edge: 12px;
    --kp64-top: 12px;
  }

  html body .brand61-header .brand61-freestanding.brand {
    width: min(34vw, 300px) !important;
  }
  html body .function-dock {
    inset: auto auto var(--kp64-edge) var(--kp64-edge) !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  html body .function-dock-toggle {
    display: grid !important;
    width: var(--kp88-control) !important;
    height: var(--kp88-control) !important;
  }
  html body .function-dock-links,
  html body .function-dock.is-open .function-dock-links {
    gap: 7px;
  }
  html body .function-dock-links {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }
  html body .function-dock.is-open .function-dock-links {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  html body .function-dock a,
  html body .function-dock a:hover,
  html body .function-dock a:focus-visible,
  html body .function-dock.is-open a {
    width: 214px;
    height: 48px;
    grid-template-columns: 48px minmax(0, 1fr);
    border-left: 1px solid rgb(255 255 255 / 63%);
    border-radius: 8px;
  }
  html body .function-dock-icon {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  html body .brand61-header .brand61-freestanding.brand {
    width: min(34vw, 250px) !important;
  }
}

/* The numeric fact cards must be allowed to shrink at 320px. `auto` kept the
   copy at its intrinsic width and widened the entire document. */
html body .facts-grid article {
  grid-template-columns: 68px minmax(0, 1fr);
}
html body .facts-grid :is(strong, p) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Long German insurance terms remain complete but may wrap on the 320px
   layout instead of widening research and FAQ cards. */
html[lang="de"] body :is(#wissen-forschung, #fragen-antworten) :is(
  header,
  article,
  details,
  summary,
  h2,
  h3,
  p
) {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Colored conversion controls share the approved softly rectangular finish.
   Consent, calculator tabs, sliders, lightboxes and icon-only controls are
   deliberately excluded. */
html body :is(
  a.button:not(.button-secondary),
  button.button:not(.button-secondary):not(.consent-dialog button):not(.pkv58-population-heading button),
  a.cta,
  a.cta-button,
  a.mobile-nav-booking,
  a.mobile-nav-retirement,
  .retirement-depot-promo,
  .function-dock a,
  .whatsapp-teaser > a,
  button[type="submit"]
) {
  border-radius: 8px !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 55%);
}

/* Additive trust photo after the booking application. The booking controls,
   field order and API mount remain untouched above this independent section. */
html body .kp-booking-trust {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  align-items: stretch;
  gap: clamp(22px, 4vw, 54px);
  width: min(1180px, calc(100% - 40px));
  margin: clamp(48px, 7vw, 92px) auto;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid rgb(153 202 214 / 48%);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #eff9fb);
  box-shadow: 0 24px 64px rgb(8 45 89 / 11%);
}
html body .kp-booking-shell {
  min-height: 715px;
}
html body .kp-booking-trust__media {
  display: block;
  min-height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #dceff3;
}
html body .kp-booking-trust__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
html body .kp-booking-trust__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(12px, 2.5vw, 30px) clamp(8px, 2vw, 22px);
}
html body .kp-booking-trust__copy h2 {
  margin: 10px 0 16px;
  color: var(--navy);
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
html body .kp-booking-trust__copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}
html body .kp-booking-trust__copy small {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  html body .kp-booking-shell { min-height: 904px; }
  html body .kp-booking-trust {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    padding: 10px;
    border-radius: 18px;
  }
  html body .kp-booking-trust__media { border-radius: 12px; }
  html body .kp-booking-trust__copy { padding: 16px 10px 20px; }
}

/* Tablet and portrait-mobile need both the visual scene and the decision copy
   in the first viewport. The scene remains intact, but no longer consumes the
   complete screen before the heading and primary actions begin. */
@media (max-width: 1100px) and (min-height: 501px) {
  html body .hero-title-frame.ov-hero-20260913 {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
  }
  html body .hero-title-frame.ov-hero-20260913 .brand61-scene {
    order: 1;
    height: var(--ov-scene-height);
    min-height: 0;
    padding-top: 0;
  }
  html body .hero-title-frame.ov-hero-20260913 .hero {
    height: 100% !important;
    min-height: 0 !important;
  }
  html body .hero-title-frame.ov-hero-20260913 .hero-card {
    order: 2;
    margin: 28px auto 0;
  }
  html body .hero-title-frame.ov-hero-20260913 .kp-titles-approved {
    order: 3;
  }
}

@media (min-width: 621px) and (max-width: 1100px) and (min-height: 501px) {
  html body .ov-hero-20260913 {
    --ov-scene-height: clamp(390px, 52svh, 620px) !important;
    --kp88-person-height: min(calc(var(--ov-scene-height) * 1.056), 218vw);
  }
  html body .ov-hero-20260913 .hero-card {
    width: min(760px, calc(100% - 48px));
    padding: clamp(18px, 2.2vw, 26px);
  }
  html body .ov-hero-20260913 .hero-card h1 {
    font-size: clamp(32px, 4.6vw, 46px);
  }
  html body .ov-hero-20260913 .hero-card > p:not(.eyebrow) {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.48;
  }
  html body .ov-hero-20260913 .hero-actions {
    margin-top: 14px;
  }
  html body .ov-hero-20260913 .hero-proof {
    margin-top: 12px;
    padding-top: 10px;
  }
}

@media (max-width: 620px) and (min-height: 501px) {
  html body .ov-hero-20260913 {
    --ov-scene-height: clamp(250px, 46svh, 430px) !important;
    --ov-person-height: min(calc(var(--ov-scene-height) * 1.04), 210vw);
  }
  html body .ov-hero-20260913 .hero-card {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 12px;
  }
  html body .ov-hero-20260913 .hero-card .eyebrow {
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: .1em;
  }
  html body .ov-hero-20260913 .hero-card h1 {
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.04;
  }
  html body .ov-hero-20260913 .hero-card > p:not(.eyebrow) {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.4;
  }
  html body .ov-hero-20260913 .hero-actions {
    flex-direction: row;
    gap: 10px;
    margin-top: 11px;
  }
  html body .ov-hero-20260913 .hero-actions .button {
    width: auto;
    min-height: 38px;
    padding: 9px 12px;
    font-size: 12px;
  }
  html body .ov-hero-20260913 .hero-actions .text-link {
    font-size: 12px;
  }
  html body .ov-hero-20260913 .hero-proof {
    gap: 4px 10px;
    margin-top: 9px;
    padding-top: 8px;
    font-size: 9px;
  }
}

/* Genuine short landscape uses the same stacked information hierarchy in a
   denser form. This keeps the complete copy clear of both portraits and the
   fixed corner controls instead of turning the first view into image-only UI. */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  html body .hero-title-frame.ov-hero-20260913 {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    --ov-scene-height: 48svh !important;
    --kp88-person-height: min(calc(var(--ov-scene-height) * 1.056), 218vw);
    --ov-person-height: min(calc(var(--ov-scene-height) * 1.04), 210vw);
  }
  html body .hero-title-frame.ov-hero-20260913 .brand61-scene {
    order: 1;
    height: var(--ov-scene-height);
    min-height: 0;
    padding-top: 0;
  }
  html body .hero-title-frame.ov-hero-20260913 .hero {
    height: 100% !important;
    min-height: 0 !important;
  }
  html body .hero-title-frame.ov-hero-20260913 .hero-card {
    position: relative;
    inset: auto;
    order: 2;
    width: min(760px, calc(100% - 144px));
    max-width: none;
    margin: 6px auto 0;
    padding: 10px 14px;
    border-radius: 8px;
    transform: none;
  }
  html body .hero-title-frame.ov-hero-20260913 .kp-titles-approved {
    order: 3;
  }
  html body .ov-hero-20260913 .hero-card .eyebrow {
    margin-bottom: 3px;
    font-size: 8px;
  }
  html body .ov-hero-20260913 .hero-card h1 {
    font-size: clamp(21px, 3.4vw, 28px);
    line-height: 1.02;
  }
  html body .ov-hero-20260913 .hero-card > p:not(.eyebrow) {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.3;
  }
  html body .ov-hero-20260913 .hero-actions {
    flex-direction: row;
    gap: 10px;
    margin-top: 7px;
  }
  html body .ov-hero-20260913 .hero-actions .button {
    width: auto;
    min-height: 34px;
    padding: 7px 11px;
    font-size: 11px;
  }
  html body .ov-hero-20260913 .hero-actions .text-link {
    font-size: 11px;
  }
  html body .ov-hero-20260913 .hero-proof {
    gap: 3px 9px;
    margin-top: 6px;
    padding-top: 5px;
    font-size: 8px;
  }
}

/* At medium widths the persistent left rail needs its own safety lane. */
@media (min-width: 768px) and (max-width: 1359px) {
  html body .kp-booking-trust {
    width: calc(100% - var(--kp88-control) - 64px);
    margin-right: 40px;
    margin-left: calc(var(--kp88-control) + 24px);
  }
}

@media (forced-colors: active) {
  html body .ov-hero-20260913 .hero-person-stefan { filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .function-dock *,
  html body .brand61-header .mobile-menu-toggle * { transition: none !important; }
}

@media print {
  html body .contact-dock,
  html body .back-to-top { display: none !important; }
}