:root {
    --header-padding-top: max(20px, calc(94 * var(--px)));
  }





  header.main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
  
  header.main > .inner {
    padding-top: var(--header-padding-top);
  }
  
  
  
  
  
  
  
  
  .site-title {
    width: max(120px, calc(246 * var(--px)));
  }
  
  .site-title svg {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .site-title--header path {
    fill: var(--base-color-white);
  }
  
  
  
  
  
  
  
  
  
  
  
  div.menu-button,
  div.inquiry-button {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 105;
    text-align: right;
    mix-blend-mode: difference;
  }
  
  div.inquiry-button {
    right: calc(max(40px, calc(49 * var(--px))) + 20px + var(--page-padding-right));
  }
  
  div.inquiry-button .btn {
    height: max(40px, calc(49 * var(--px)));
    padding-block: 0;
    box-sizing: border-box;
    display: block;
    line-height: max(38px, calc(47 * var(--px)));
  }
  
  div.menu-button + div.menu-button,
  div.inquiry-button + div.inquiry-button {
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  
  div.menu-button :is(a, button),
  div.inquiry-button :is(a, button) {
    pointer-events: all;
  }
  
  div.menu-button > .inner,
  div.inquiry-button > .inner {
    padding-inline: var(--page-padding-left);
    padding-top: var(--header-padding-top);
    display: inline-block;
  }
  
  div.inquiry-button > .inner {
    padding-right: 0;
  }
  
  div.menu-button > .inner > .wrap,
  div.inquiry-button > .inner > .wrap {
    position: relative;
  }
  
  .btn-burger {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    --size: max(40px, calc(49 * var(--px)));
    width: var(--size);
    height: var(--size);
    border: 1px solid var(--base-color-white);
    border-radius: 50%;
  }
  
  .btn-burger .bar {
    display: block;
    height: 1px;
    width: calc(var(--size) * 0.42);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-3px);
    background: var(--base-color-white);
    transition: transform 250ms var(--ttf-2);
    will-change: transform;
  }
  
  .btn-burger .bar-2 {
    transform: translateX(-50%) translateY(3px);
  }
  
  body.menu .btn-burger .bar-1,
  .btn-burger.btn-close .bar-1 {
    transform: translateX(-50%) translateY(0px) rotate(-45deg);
  }
  
  body.menu .btn-burger .bar-2,
  .btn-burger.btn-close .bar-2 {
    transform: translateX(-50%) translateY(0px) rotate(45deg);
  }
  
  @media (max-width: 500px) {
    
    div.inquiry-button {
      position: absolute;
      transition: opacity 500ms;
    }
    
    body.menu div.inquiry-button {
      opacity: 0;
    }
    
    body.menu div.inquiry-button .btn {
      pointer-events: none !important;
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  
  
  div.flyout {
    position: fixed;
    inset: 0;
    z-index: 102;
    color: var(--base-color-white);
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transition: 
      opacity 250ms 0ms,
      visibility 0ms 250ms;
  }
  
  body.menu div.flyout {
    visibility: visible;
    opacity: 1;
    transition: 
      opacity 0ms 0ms,
      visibility 0ms 0ms;
  }
  
  div.flyout::after {
    content: '';
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--base-color-green);
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 0ms var(--ttf-4) 250ms;
  }
  
  body.menu div.flyout::after {
    transform: none;
    transition: transform 750ms var(--ttf-4) 0ms;
  }
  
  div.flyout > .inner {
    padding-top: var(--header-padding-top);
    padding-bottom: calc(var(--header-padding-top) * 2);
    position: relative;
    z-index: 3;
    display: flex;
    flex-flow: column nowrap;
    gap: max(30px, calc(90 * var(--px))) 0;
  }
  
  div.flyout nav.header {
    margin-left: auto;
  }
  
  div.flyout nav.header .menu {
    display: flex;
    flex-flow: row nowrap;
  }
  
  div.flyout nav.header .menu > li {
    opacity: 0;
    transform: translateY(5vw);
    transition: 1000ms var(--ttf-2) calc((var(--index, 0) * 50ms) + 200ms);
    transition-property: transform, opacity;
  }
  
  div.flyout nav.header .btn-houses > a {
    interactivity: inert;
    pointer-events: none;
  }
  
  body.menu div.flyout nav.header .menu > li {
    opacity: 1;
    transform: none;
  }
  
  div.flyout nav.header .menu > li > a {
    display: inline-block;
  }
  
  div.flyout nav.header .menu > li:not(:last-child) > a {
    margin-right: calc(110 * var(--px));
  }
  
  div.flyout nav.header .sub-menu {
    color: var(--base-color-black);
    font-family: var(--base-font-1-regular);
    font-size: 1.0625rem;
    text-transform: uppercase;
    padding-top: 2.41176470588235294117em;
    display: flex;
    flex-flow: column nowrap;
    gap: 1.5em 0;
  }
  
  div.flyout nav.header .sub-menu a > span {
    display: flex;
    flex-flow: row nowrap;
    gap: 0 1.23529411764705882352em;
    align-items: center;
  }
  
  div.flyout nav.header .sub-menu a > span::before {
    content: '';
    display: block;
    width: 2.64705882352941176470em;
    aspect-ratio: 1;
    background: var(--background-url, url(../imgs/signet--passagen.svg)) no-repeat center center;
    background-size: contain;
    flex-shrink: 0;
  }
  
  div.flyout nav.header .sub-menu .btn-house-garden {
    --background-url: url(../imgs/signet--garden.svg);
  }
  
  div.flyout nav.header .sub-menu .btn-house-light {
    --background-url: url(../imgs/signet--light.svg);
  }
  
  div.flyout nav.header .sub-menu .btn-house-urban {
    --background-url: url(../imgs/signet--urban.svg);
  }
  
  div.flyout nav.header .sub-menu .btn-house-icon {
    --background-url: url(../imgs/signet--icon.svg);
  }
  
  div.flyout div.background-shape {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1000ms var(--ttf-7) 250ms;
  }
  
  body.menu div.flyout div.background-shape {
    opacity: 1;
  }
  
  div.flyout div.background-shape svg {
    display: block;
    position: absolute;
    width: calc(1875 * var(--px));
    height: auto;
    top: calc(191 * var(--px));
    left: calc(-50 * var(--px));
    opacity: 0.07;
  }
  
  div.flyout .site-title {
    transition: opacity 1000ms var(--ttf-7) 250ms;
    opacity: 0;
  }
  
  body.menu div.flyout .site-title {
    opacity: 1;
  }
  
  div.flyout nav.header a:is([href*="urban"], [href*="light"]) {
    opacity: 0.25;
    pointer-events: none;
    interactivity: inert;
  }
  
  
  
  
  
  
  
  
  
  @media (max-width: 1000px) {
    
    div.flyout nav.header {
      margin-left: var(--page-padding-left-l);
    }
    
    div.flyout nav.header .menu {
      flex-flow: column nowrap;
      gap: 0.6em 0;
    }
    
    div.flyout nav.header .sub-menu {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding-top: 1em;
      padding-bottom: 2em;
      font-size: 13px;
    }
    
  }
  
  
  
  
  
  @media (max-width: 500px) {
    
    div.flyout nav.header {
      font-size: 28px;
    }
  
    div.flyout nav.header .sub-menu {
      display: flex;
      flex-flow: column nowrap;
      gap: 17px;
      font-size: 12px;
      padding-left: 30px;
      padding-top: 18px;
      padding-bottom: 10px;
    }
    
    div.flyout nav.header .sub-menu a > span::before {
      width: 30px;
    }
    
    div.flyout nav.header .sub-menu a > span {
      gap: 0 16px;
    }
  
  }