/* Shared header: message strip, floating bar, product menu, phone menu.
   Values follow the design handoff (design_handoff_vortner/tokens.css). */
html{scroll-padding-top:96px}
.vh-wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* Message strip */
.vh-strip{background:#16181B;color:#D9D8D3;font-size:13.5px;line-height:1.4}
.vh-strip .vh-wrap{display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;padding-top:8px;padding-bottom:8px;padding-right:56px;position:relative;text-align:center}
.vh-strip b{color:#fff;font-weight:600}
.vh-strip a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.vh-strip a:hover{text-decoration:underline;text-underline-offset:3px}
.vh-x{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:4px;background:none;color:#9C9A94;cursor:pointer;font-family:inherit;font-size:18px;line-height:1}
.vh-x:hover{color:#fff;background:#25282C}
.vh-strip.vh-gone{display:none}

/* Floating bar */
header.vh{position:sticky;top:0;z-index:50;padding-top:14px;border:0;background:none;view-transition-name:vh}
.vh-bar{height:62px;padding:0 10px 0 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:6px;box-shadow:0 0 0 1px #E4E3DF;transition:box-shadow 160ms cubic-bezier(.2,.7,.2,1)}
header.vh.vh-scrolled .vh-bar{box-shadow:0 18px 48px -12px rgba(22,24,27,.25),0 0 0 1px #E4E3DF}
.vh-wm{justify-self:start;display:inline-flex;align-items:center;font-size:24px;font-weight:700;letter-spacing:-0.035em;line-height:1;color:#16181B;text-decoration:none}
.vh-wm svg{width:.62em;height:.62em;margin:0 .02em;transform:translateY(.06em)}

/* Links as a segmented control */
.vh-links{display:flex;align-items:center;gap:2px;background:#ECEBE7;border-radius:4px;padding:3px;font-size:15px;font-weight:500}
.vh-links > a,.vh-dd > button{display:inline-flex;align-items:center;gap:6px;font:inherit;color:#3A3D42;text-decoration:none;background:none;border:0;cursor:pointer;padding:7px 14px;border-radius:3px;transition:background-color 120ms,color 120ms,box-shadow 120ms}
.vh-links > a:hover,.vh-dd > button:hover,.vh-dd.vh-open > button,.vh-links > a[aria-current],.vh-dd > button[aria-current]{background:#fff;color:#16181B;box-shadow:0 1px 2px rgba(22,24,27,.08)}
.vh-chev{width:10px;height:10px;transition:transform 160ms cubic-bezier(.2,.7,.2,1)}
.vh-dd{position:relative}
.vh-dd.vh-open .vh-chev{transform:rotate(180deg)}

/* Product menu: popover, fade + 4px drop, 160ms */
.vh-dd-m{position:absolute;top:100%;left:50%;width:372px;margin-top:18px;background:#fff;border-radius:6px;padding:6px;box-shadow:0 18px 48px -12px rgba(22,24,27,.25),0 0 0 1px #E4E3DF;opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity 160ms cubic-bezier(.2,.7,.2,1),transform 160ms cubic-bezier(.2,.7,.2,1),visibility 0s linear 160ms}
.vh-dd-m::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px} /* bridge over the gap */
.vh-dd.vh-open .vh-dd-m{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity 160ms cubic-bezier(.2,.7,.2,1),transform 160ms cubic-bezier(.2,.7,.2,1),visibility 0s}
.vh-dd-m a{display:grid;grid-template-columns:1fr auto;gap:1px 12px;align-items:center;padding:10px 12px;border-radius:4px;text-decoration:none;color:#16181B;transition:background-color 120ms,box-shadow 120ms}
.vh-dd-m a:hover,.vh-dd-m a:focus-visible,.vh-dd-m a[aria-current]{background:#FAFAF8;box-shadow:inset 2px 0 0 #16181B;outline:none}
.vh-dd-m a::after{content:"›";grid-column:2;grid-row:1 / span 2;color:#8A8D92;font-size:18px}
.vh-dd-m b{font-size:14px;font-weight:600;line-height:1.25}
.vh-dd-m span{grid-column:1;font-size:13px;color:#5A5D63;line-height:1.35}

/* Call button: white secondary, so the page's blue stays the one main action */
.vh-cta{justify-self:end;display:flex;align-items:center}
.vh-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:14px;line-height:1;color:#16181B;background:#fff;text-decoration:none;white-space:nowrap;padding:11px 16px;border-radius:4px;box-shadow:inset 0 0 0 1px #C9C8C3;transition:box-shadow 120ms}
.vh-btn:hover{box-shadow:inset 0 0 0 1px #16181B}
.vh-ar{transition:transform 120ms}.vh-btn:hover .vh-ar{transform:translateX(2px)}

/* Phone menu */
.vh-burger{display:none;margin-left:8px;width:42px;height:42px;border:0;background:none;border-radius:4px;cursor:pointer;position:relative}
.vh-burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:1px;background:#16181B;transition:transform 220ms cubic-bezier(.2,.7,.2,1),top 220ms cubic-bezier(.2,.7,.2,1)}
.vh-burger span:first-child{top:16px}.vh-burger span:last-child{top:24px}
.vh-menu-open .vh-burger span:first-child{top:20px;transform:rotate(45deg)}
.vh-menu-open .vh-burger span:last-child{top:20px;transform:rotate(-45deg)}
.vh-panel{position:fixed;left:0;right:0;bottom:0;top:var(--vh-h,76px);z-index:49;background:#F6F5F2;padding:20px 20px 28px;display:flex;flex-direction:column;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 200ms cubic-bezier(.2,.7,.2,1),transform 200ms cubic-bezier(.2,.7,.2,1),visibility 0s linear 200ms}
.vh-menu-open .vh-panel{opacity:1;visibility:visible;transform:none;transition:opacity 200ms cubic-bezier(.2,.7,.2,1),transform 200ms cubic-bezier(.2,.7,.2,1),visibility 0s}
html.vh-menu-open,html.vh-menu-open body{overflow:hidden}
.vh-panel small{display:block;font-size:12px;font-weight:600;color:#8A8D92;margin:8px 0 6px}
.vh-panel a{color:#16181B;text-decoration:none}
.vh-p-prod a{display:block;padding:10px 0;font-size:19px;font-weight:600;border-bottom:1px solid #E4E3DF}
.vh-p-main{margin-top:22px}
.vh-p-main a{display:block;padding:10px 0;font-size:24px;font-weight:700;letter-spacing:-0.02em}
.vh-panel a[aria-current]{color:#2A5DAA}
.vh-p-btn{margin-top:auto;display:flex;justify-content:center;padding:16px 20px;border-radius:4px;background:#2A5DAA;color:#fff!important;font-weight:600;font-size:16px}

/* Language switch: "DE · EN", current language in ink, the other a quiet link (blue only on hover/focus) */
.vl{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#8A8D92;white-space:nowrap}
.vl [aria-current]{color:#16181B}
.vl a{color:#8A8D92;text-decoration:none;border-radius:3px;padding:4px 2px;transition:color 120ms}
.vl a:hover,.vl a:focus-visible{color:#2A5DAA}
.vh-cta .vl{margin-right:14px}
.vh-panel .vl{margin-top:auto;padding:14px 0 4px;font-size:15px}
.vh-panel .vl + .vh-p-btn{margin-top:12px}
.foot .foot-in{padding-top:28px;padding-bottom:28px} /* the pages' phone rule .wrap{padding:0 16px} would drop it */
.foot .vl{color:#5A5D63}
.foot .vl [aria-current]{color:#F6F5F2}
.foot .vl a{color:#C9C7C1}
.foot .vl a:hover,.foot .vl a:focus-visible{color:#fff}

/* German labels are longer: up to 1180px the links centre between wordmark and button, not on the page */
@media (max-width:1180px){html[lang="de"] .vh-bar{grid-template-columns:auto 1fr auto}html[lang="de"] .vh-links{justify-self:center}}

@media (max-width:1000px){
  html{scroll-padding-top:84px}
  .vh-wrap{padding:0 16px}
  .vh-strip{font-size:13px}
  .vh-strip .vh-wrap{justify-content:flex-start;text-align:left;flex-wrap:wrap;gap:4px 10px;padding-right:52px}
  .vh-x{right:12px}
  header.vh{padding-top:10px}
  .vh-bar{display:flex;height:56px;padding:0 6px 0 16px}
  .vh-wm{font-size:22px}
  .vh-links{display:none}
  .vh-cta{margin-left:auto}
  .vh-btn{padding:10px 13px}
  .vh-burger{display:block}
  .vh-cta .vl{display:none}
}

/* Page-to-page: a soft cross-fade where the browser supports it; the header stays put. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:230ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  .vh-strip *,header.vh *,header.vh .vh-bar,.vh-panel{transition:none!important}
  @view-transition{navigation:none}
}