:host {
    display: contents
  }
  
  .wi-root {
    all: initial;
    display: contents
  }
  
  :host {
    --radius: 8px;
    --max: 1240px;
    --deep: #132016;
    --green: #174f37;
    --accent: #7fa873;
    --accent-light: #a9c99a;
    --muted: #657169;
    --line: #dce4dd;
    --tint: #f3f6f1;
    --white: #fff;
    --viewer: #171717;
    --black: #000;
    --ink: var(--deep);
    --action: #dcecaa;
    --lime: var(--action);
    --action-hover: color-mix(in srgb, var(--action) 85%, var(--white));
    --surface-active: color-mix(in srgb, var(--accent) 15%, var(--white));
    --on-dark-muted: color-mix(in srgb, var(--white) 65%, var(--deep));
    --viewer-muted: color-mix(in srgb, var(--white) 65%, var(--viewer));
    --viewer-hover: color-mix(in srgb, var(--white) 14%, var(--viewer));
    --font-sans: Arial, Helvetica, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --text-body: 16px;
    --text-small: 14px;
    --text-meta: 12px;
    --text-h2: clamp(26px, 2.5vw, 34px);
    --deep-a15: color-mix(in srgb, var(--deep) 15%, transparent);
    --deep-a40: color-mix(in srgb, var(--deep) 40%, transparent);
    --deep-a85: color-mix(in srgb, var(--deep) 85%, transparent);
    --deep-a5: color-mix(in srgb, var(--deep) 5%, transparent);
    --deep-a10: color-mix(in srgb, var(--deep) 10%, transparent);
    --deep-a70: color-mix(in srgb, var(--deep) 70%, transparent);
    --black-a15: color-mix(in srgb, var(--black) 15%, transparent);
    --deep-a95: color-mix(in srgb, var(--deep) 95%, transparent);
    --deep-a55: color-mix(in srgb, var(--deep) 55%, transparent);
    --white-a40: color-mix(in srgb, var(--white) 40%, transparent);
    --deep-a25: color-mix(in srgb, var(--deep) 25%, transparent);
    --white-a95: color-mix(in srgb, var(--white) 95%, transparent);
    --white-a15: color-mix(in srgb, var(--white) 15%, transparent);
    --white-a10: color-mix(in srgb, var(--white) 10%, transparent);
    --black-a55: color-mix(in srgb, var(--black) 55%, transparent);
    --black-a85: color-mix(in srgb, var(--black) 85%, transparent);
    --white-a5: color-mix(in srgb, var(--white) 5%, transparent);
    --viewer-a85: color-mix(in srgb, var(--viewer) 85%, transparent);
    --white-a25: color-mix(in srgb, var(--white) 25%, transparent);
    --black-a70: color-mix(in srgb, var(--black) 70%, transparent)
  }
  
  * {
    box-sizing: border-box
  }
  
  @media(max-width:1024px),
  (pointer:coarse) {
    .wi-root {
      overscroll-behavior-y: none
    }
  }
  
  .wi-root {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font: 16px/1.6 var(--font-sans)
  }
  
  :host(.wi-modal-open),
  :host(.wi-mega-open) {
    overflow: hidden
  }
  
  :host(.wi-mega-open) .back-to-top {
    visibility: hidden
  }
  
  button,
  input {
    font: inherit
  }
  
  button,
  a,
  input {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
  }
  
  button {
    cursor: pointer
  }
  
  a {
    color: inherit;
    text-decoration: none
  }
  
  @media(hover:hover) {
    a:hover {
      color: var(--green)
    }
  }
  
  button {
    border: 0;
    background: none;
    color: inherit
  }
  
  img {
    display: block;
    max-width: 100%;
    object-fit: cover
  }
  
  p {
    margin: 0 0 20px
  }
  
  h2,
  h3 {
    line-height: 1.15;
    margin: 0 0 18px;
    font-weight: 500;
    overflow-wrap: break-word
  }
  
  h2 {
    font-size: clamp(27px, 2.5vw, 36px);
    letter-spacing: -.022em
  }
  
  h3 {
    font-size: 22px;
    letter-spacing: -.3px
  }
  
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  summary:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 4px
  }
  
  button:disabled {
    cursor: not-allowed;
    opacity: .45
  }
  
  input:disabled {
    background: var(--tint);
    color: var(--muted)
  }
  
  [hidden] {
    display: none !important
  }
  
  .wrap {
    width: min(calc(100% - 64px), var(--max));
    margin-inline: auto
  }
  
  .icon {
    width: 23px;
    height: 23px;
    flex: 0 0 auto
  }
  
  .skip {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 100;
    background: var(--white);
    padding: 14px
  }
  
  .skip:focus {
    top: 10px
  }
  
  .small {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55
  }
  
  .small a {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 3px
  }
  
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 48px;
    padding: 13px 22px;
    background: var(--action);
    color: var(--deep);
    border: 1px solid var(--action);
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center
  }
  
  @media(hover:hover) {
    .button:hover {
      background: var(--action-hover);
      border-color: var(--action-hover);
      color: var(--deep)
    }
  }
  
  .button-light {
    background: var(--lime);
    color: var(--deep);
    border-color: var(--lime)
  }
  
  @media(hover:hover) {
    .button-light:hover {
      background: var(--action-hover);
      color: var(--deep)
    }
  }
  
  .button-outline {
    background: transparent;
    color: var(--green);
    border-color: var(--line)
  }
  
  .text-link {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 5px
  }
  
  h2,
  h3 {
    text-wrap: balance
  }
  
  p {
    text-wrap: pretty
  }
  
  .site-header {
    background: var(--white);
    border-bottom: 1px solid var(--line)
  }
  
  .header-main {
    display: flex;
    align-items: center;
    gap: 38px;
    padding-block: 24px 18px
  }
  
  .logo {
    display: inline-flex;
    flex: 0 0 auto
  }
  
  .logo img {
    width: 216px;
    height: 64px;
    object-fit: contain
  }
  
  .header-tools {
    display: flex;
    align-items: center
  }
  
  .header-tools>button,
  .header-tools>a {
    gap: 7px;
    font-size: 13px;
    position: relative
  }
  
  .header-tools b {
    position: absolute;
    right: -7px;
    top: -2px;
    display: grid;
    place-items: center;
    font-size: 10px;
    background: var(--green);
    color: var(--white);
    border-radius: 100%;
    min-width: 18px;
    min-height: 18px
  }
  
  .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid var(--line)
  }
  
  .nav-item {
    display: flex;
    align-items: center;
    border-bottom: 3px solid transparent
  }
  
  .nav-item>.nav-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 16px 6px 13px;
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.6;
    min-height: 48px;
    text-align: left
  }
  
  .nav-trigger[aria-expanded=true] {
    color: var(--green)
  }
  
  @media(hover:hover) {
    .nav-trigger:hover {
      color: var(--green)
    }
  }
  
  .nav-item.active {
    border-color: var(--green)
  }
  
  #mobile-toggle {
    display: none
  }
  
  .mega-inner {
    width: min(calc(100% - 64px), var(--max));
    margin: auto;
    padding: 26px 0 28px
  }
  
  .mega-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px
  }
  
  .mega-heading h2 {
    font-size: 25px;
    margin: 0
  }
  
  .mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.2fr;
    gap: 24px
  }

  
  
  .mega-grid h3 {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .6px
  }
  
  .mega-grid a {
    display: block;
    padding: 6px 0;
    font-size: var(--text-small);
    line-height: 1.4
  }
  
  @media(hover:hover) {
    .mega-grid a:hover {
      text-decoration: underline
    }
  }
  

  /* MENU AD STYLES AUSKOMMENTIEREN 
  .menu-partner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: 14px 20px 18px;
    border: 1px solid var(--surface-active);
    border-radius: 10px;
    background: var(--surface-active);
    text-align: left
  }
  
  .menu-partner .menu-ad-label {
    align-self: flex-end;
    margin: 0 -6px 20px 0;
    font: 10px/1.4 var(--font-sans);
    color: var(--muted)
  }

  .menu-partner .menu-ad-mark {display: none;}
  
  .menu-partner .menu-ad-kicker {
    margin-bottom: 12px;
    font: 11px/1.5 var(--font-sans);
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--muted)
  }
  
  .menu-partner h3,
  .menu-partner p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0
  }
  
  .menu-partner h3 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin: 0 0 16px;
    font: italic 400 28px/1.12 var(--font-serif);
    letter-spacing: -.6px;
    text-wrap: balance;
    color: var(--green)
  }
  
  .menu-partner p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin: 0 0 14px;
    font: 14px/1.5 var(--font-sans)
  }
  
  .menu-partner a.menu-ad-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 0;
    border-top: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
    font: 600 13px/1.4 var(--font-sans);
    text-decoration: none
  }
  
  .menu-partner a.menu-ad-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px
  }
  
  .menu-partner a.menu-ad-link:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px
  }
  
  @media(min-width:1025px)and (max-width:1150px) {
    .menu-partner {
      padding: 16px
    }
    .menu-partner h3 {
      font-size: 25px
    }
  }

  END MENU AD STYLES AUSKOMMENTIEREN */

  #mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100dvh - var(--main-nav-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    box-shadow: 0 20px 25px var(--deep-a15)
  }
  
  #menu-shade {
    position: fixed;
    inset: 0;
    background: var(--black-a55);
    z-index: 52;
    touch-action: none
  }
  
  .section {
    padding-block: 54px
  }
  
  details {
    border-block-start: 1px solid var(--line);
    padding: 18px 0
  }
  
  summary {
    cursor: pointer;
    font-weight: 600;
    line-height: 1.5
  }
  
  details p {
    padding-top: 15px;
    font-size: var(--text-small)
  }
  
  dialog {
    border: 0;
    color: var(--ink);
    padding: 0;
    max-height: 90dvh;
    border-radius: 8px;
    width: min(calc(100% - 32px), 580px)
  }
  
  dialog::backdrop {
    background: var(--deep-a55)
  }
  
  .utility-dialog {
    padding: 30px
  }
  
  .dialog-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px
  }
  
  .dialog-head h2 {
    font-size: 26px;
    margin: 6px 0
  }
  
  .dialog-head button {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px
  }
  
  .utility-dialog label {
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    margin: 17px 0 8px
  }
  
  input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px;
    min-height: 46px;
    background: var(--white);
    color: var(--ink);
    font-size: var(--text-body)
  }
  
  .input-action {
    display: flex;
    gap: 10px;
    margin-bottom: 20px
  }
  
  .input-action input {
    min-width: 0
  }
  
  .notice {
    background: var(--tint);
    padding: 15px;
    border-left: 3px solid var(--accent);
    font-size: var(--text-small);
    margin: 20px 0;
    color: var(--muted)
  }
  
  .utility-dialog form>.button {
    margin-top: 20px
  }
  
  .utility-dialog>.text-link {
    display: inline-block;
    margin-top: 24px
  }
  
  .account-dialog {
    width: min(460px, calc(100% - 24px));
    border-radius: 12px
  }
  
  .account-dialog .dialog-head {
    margin-bottom: 10px
  }
  
  .account-intro {
    font-size: var(--text-small);
    color: var(--muted);
    margin-bottom: 22px
  }
  
  .account-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--tint);
    padding: 4px;
    border-radius: 6px;
    margin-bottom: 22px
  }
  
  .account-tabs button {
    min-height: 44px;
    border-radius: 4px;
    font-size: var(--text-small)
  }
  
  .account-tabs button[aria-pressed=true] {
    background: var(--white);
    box-shadow: 0 1px 4px var(--deep-a10);
    font-weight: 600
  }
  
  .account-providers {
    display: grid;
    gap: 10px
  }
  
  .account-provider {
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 500
  }
  
  @media(hover:hover) {
    .account-provider:hover {
      border-color: var(--muted)
    }
  }
  
  .account-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: var(--text-small);
    margin: 22px 0 0
  }
  
  .account-divider:before,
  .account-divider:after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line)
  }
  
  .account-password-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px
  }
  
  .account-password-label .text-link {
    font-size: 12px;
    min-height: 32px
  }
  
  .account-password-field {
    position: relative
  }
  
  .account-password-field input {
    padding-right: 84px
  }
  
  .account-password-field button {
    position: absolute;
    right: 4px;
    top: 2px;
    min-height: 44px;
    padding: 8px;
    font-size: 12px;
    color: var(--green)
  }
  
  .account-dialog #register-info {
    margin: 12px 0 0
  }
  
  .account-dialog #account-submit {
    width: 100%;
    margin-top: 20px
  }
  
  .account-dialog input:disabled {
    background: var(--tint)
  }
  
  .account-dialog button:disabled {
    opacity: .65;
    cursor: not-allowed
  }
  
  .account-status {
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--muted);
    margin: 16px 0 0
  }
  
  .account-dialog .account-guest {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: var(--text-small)
  }
  
  #toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%);
    max-width: calc(100% - 32px);
    padding: 14px 23px;
    box-shadow: 0 5px 25px var(--black-a15);
    border-radius: 5px;
    background: var(--deep);
    color: var(--white);
    z-index: 100;
    font-size: var(--text-small)
  }
  
  .mobile-dialog {
    --mobile-gutter: 24px;
    background: transparent;
    color: var(--ink);
    inset: 0 0 0 auto;
    margin: 0;
    width: min(360px, calc(100% - 56px));
    max-width: calc(100% - 56px);
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    overflow: hidden
  }
  
  .mobile-dialog[open] {
    display: block
  }
  
  .mobile-sheet {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--white)
  }
  
  .mobile-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
  }
  
  .mobile-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: max(16px, env(safe-area-inset-top)) var(--mobile-gutter) 4px;
    flex-shrink: 0
  }
  
  .mobile-top button {
    width: 44px;
    height: 44px
  }
  
  .mobile-top .mobile-back {
    margin-right: auto
  }
  
  .mobile-panel-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 16px
  }
  
  #mobile-panel {
    overflow-y: auto;
    overscroll-behavior: none;
    flex: 1;
    min-height: 0;
    padding-inline: var(--mobile-gutter)
  }
  
  .mobile-context {
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 8px 0
  }
  
  .mobile-context h2 {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left;
    margin: 0
  }
  
  .mobile-context h2 a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    width: 100%;
    font: inherit;
    color: inherit;
    text-decoration: none
  }
  
  .mobile-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 0;
    min-height: 44px;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere
  }
  
  .mobile-row-label {
    min-width: 0
  }
  
  .mobile-row-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--green)
  }
  
  @media(hover:hover) {
    .mobile-row:hover {
      background: transparent;
      color: var(--ink)
    }
  }
  
  .mobile-row:active {
    color: var(--green)
  }
  
  .mobile-row:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px
  }
  
  .mobile-group {
    margin: 0;
    padding: 0;
    border: 0
  }
  
  .mobile-group>summary {
    list-style: none;
    font-weight: 500;
    cursor: pointer
  }
  
  .mobile-group>summary::-webkit-details-marker {
    display: none
  }
  
  .mobile-group>summary .mobile-row-icon {
    transform: rotate(90deg);
    transition: transform .24s ease
  }
  
  .mobile-group[open]>summary:not([aria-expanded=false]) .mobile-row-icon {
    transform: rotate(-90deg)
  }
  
  .mobile-group-links {
    padding-bottom: 8px
  }
  
  .mobile-group-links .mobile-row {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 12px
  }
  
  .mobile-partner {
    background: var(--surface-active);
    padding: 8px 12px;
    margin: 12px 0 0;
    border-radius: 4px
  }
  
  .mobile-partner a {
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    min-height: 44px
  }
  
  .mobile-partner span {
    font-size: 12px;
    color: var(--muted)
  }
  
  .close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--green);
    box-shadow: none;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease
  }
  
  .close-button .icon {
    width: 22px;
    height: 22px
  }
  
  .close-button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px
  }
  
  .close-button:active {
    background: var(--surface-active);
    border-color: var(--accent);
    transform: scale(.96)
  }
  
  @media(hover:hover)and (pointer:fine) {
    .close-button:hover {
      background: var(--surface-active);
      border-color: var(--accent)
    }
  }
  
  @media(max-width:350px) {
    .mobile-dialog {
      --mobile-gutter: 20px
    }
  }
  
  @media(max-width:1150px) {
    .header-main {
      gap: 22px
    }
    .header-tools {
      gap: 14px
    }
    .logo img {
      width: 190px;
      height: 58px
    }
    .nav-item>.nav-trigger {
      padding-inline: 4px
    }
  }
  
  @media(max-width:1024px) {
    .wrap {
      width: calc(100% - 40px)
    }
    .logo img {
      width: 180px;
      height: 50px
    }
    .header-tools {
      margin-left: auto
    }
    .header-tools>button,
    .header-tools>a {
      justify-content: center
    }
    .header-tools #mobile-toggle {
      display: flex;
      order: 5
    }
    .desktop-nav {
      display: none
    }
    .header-main {
      padding-bottom: 65px
    }
    .header-tools>[data-dialog=language-dialog] {
      position: absolute;
      right: 82px;
      bottom: 12px;
      font-size: var(--text-small)
    }
    .mega-inner {
      display: none
    }
    .section {
      padding-block: 38px
    }
  }
  
  @media(max-width:600px) {
    .wrap {
      width: calc(100% - 32px)
    }
    .header-main {
      padding-top: 12px
    }
    .logo img {
      width: 153px;
      height: 48px
    }
    .header-tools .icon {
      width: 21px;
      height: 21px
    }
    .header-tools>button,
    .header-tools>a {
      min-width: 33px
    }
    .section {
      padding-block: 34px
    }
    .utility-dialog {
      padding: 22px
    }
    .dialog-head h2 {
      font-size: 24px
    }
    .input-action {
      flex-wrap: wrap
    }
    .input-action input,
    .input-action button {
      width: 100%
    }
  }
  
  @media(max-width:350px) {
    .wrap {
      width: calc(100% - 24px)
    }
    .header-tools {
      gap: 3px
    }
    .logo img {
      width: 135px
    }
  }
  
  @media(prefers-reduced-motion:reduce) {
    *,
    *:before,
    *:after {
      animation: none !important;
      transition: none !important
    }
  }
  
  .nav-submenu-toggle {
    display: grid;
    place-items: center;
    width: 28px;
    min-height: 44px;
    padding: 4px;
    color: var(--green)
  }
  
  @media(pointer:coarse) {
    .nav-submenu-toggle {
      width: 44px
    }
  }
  
  .dialog-initial-focus:focus {
    outline: none
  }
  
  :host {
    --main-nav-height: 165px;
    --active-nav-height: 165px;
    --reading-progress: 0;
    --scroll-gap: 24px
  }
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
    will-change: transform
  }
  
  .site-header:has(#mega-menu:not([hidden])) {
    z-index: 55
  }
  
  :host(.wi-has-scrolled) .site-header {
    box-shadow: 0 4px 18px var(--deep-a10)
  }
  
  :host(.wi-show-subnav) .site-header {
    transform: translateY(calc(-100% - 5px));
    pointer-events: none
  }
  
  .scroll-progress {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--green);
    pointer-events: none
  }
  
  .scroll-progress>span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--action);
    transform: scaleX(var(--reading-progress));
    transform-origin: left;
    will-change: transform
  }
  
  .back-to-top {
    position: fixed;
    z-index: 101;
    right: 24px;
    bottom: 24px;
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--white);
    border: 1px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 5px 20px var(--deep-a15)
  }
  
  @media(hover:hover) {
    .back-to-top:hover {
      background: var(--deep);
      border-color: var(--accent);
      color: var(--white)
    }
  }
  
  .back-to-top .icon {
    transform: rotate(-90deg);
    width: 22px;
    height: 22px
  }
  
  .subnav-host {
    display: flow-root
  }
  
  [data-scroll-subnav] {
    background: var(--white)
  }
  
  [data-scroll-subnav].subnav-fixed {
    position: fixed;
    z-index: 51;
    inset: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 58px;
    padding: 14px max(24px, calc((100% - var(--max)) / 2));
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 18px var(--deep-a10);
    transform: translateY(calc(-100% - 6px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .28s ease, visibility 0s linear .42s
  }
  
  :host(.wi-show-subnav) [data-scroll-subnav].subnav-fixed {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s
  }
  
  [data-scroll-subnav] a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0
  }
  
  [data-scroll-subnav] {
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain
  }
  
  @media(max-width:1024px) {
    [data-scroll-subnav] {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none
    }
    [data-scroll-subnav]::-webkit-scrollbar {
      display: none
    }
  }
  
  @media(max-width:1024px) {
    :host {
      --scroll-gap: 16px
    }
    .back-to-top {
      right: 20px;
      bottom: max(20px, env(safe-area-inset-bottom))
    }
  }
  
  @media(max-width:600px) {
    [data-scroll-subnav].subnav-fixed {
      padding: 12px 16px;
      gap: 7px 18px;
      min-height: 62px
    }
    .back-to-top {
      right: 16px;
      width: 46px;
      height: 46px
    }
    .scroll-progress {
      height: 3px
    }
  }
  
  @media(prefers-reduced-motion:reduce) {
    .site-header,
    [data-scroll-subnav].subnav-fixed {
      transition: none
    }
  }
  
  .mobile-settings {
    position: relative;
    padding: 12px var(--mobile-gutter) max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--white);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px
  }
  
  .locale-button {
    gap: 10px;
    font-size: var(--text-small)
  }
  
  @media(max-width:1024px) {
    :host {
      --main-nav-height: 74px;
      --active-nav-height: 74px
    }
    .header-main {
      padding: 12px 0;
      flex-wrap: nowrap;
      gap: 12px
    }
    .header-tools>[data-dialog=language-dialog] {
      display: none
    }
    .header-tools {
      flex: 0 0 auto
    }
    .header-tools>button,
    .header-tools>a {
      width: 44px;
      min-width: 44px;
      height: 44px;
      padding: 8px
    }
    .header-tools>[data-dialog=account-dialog] {
      position: relative;
      right: auto;
      bottom: auto
    }
    .header-main .logo {
      min-width: 0;
      flex: 0 1 180px
    }
  }
  
  @media(max-width:600px) {
    .header-tools b {
      right: 0;
      top: 0
    }
  }
  
  .header-main .logo img {
    width: 172px;
    height: 52px;
    object-position: left center;
    padding-left: 10px
  }
  
  .header-tools {
    gap: 8px
  }
  
  .header-tools>button,
  .header-tools>a,
  .locale-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 50%
  }
  
  .header-tools>.locale-button,
  .locale-button {
    width: auto;
    min-width: 68px;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 24px
  }
  
  .header-tools>.locale-button-icon {
    width: auto;
    min-width: 72px;
    margin-left: 12px;
    padding: 8px 10px;
    border-radius: 24px
  }
  
  .header-tools>.locale-button-icon:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 12px;
    bottom: 12px;
    border-left: 1px solid var(--line)
  }
  
  .mobile-preferences {
    display: flex;
    justify-self: end;
    min-width: 0
  }
  
  .mobile-locale-feedback {
    grid-column: 1/-1;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted)
  }
  
  .locale-dropdown {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ink)
  }
  
  .locale-dropdown>summary {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 0;
    list-style: none;
    cursor: pointer;
    border-bottom: 1px solid var(--line)
  }
  
  .locale-dropdown>summary::-webkit-details-marker {
    display: none
  }
  
  .locale-dropdown .locale-name {
    min-width: 0;
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: anywhere
  }
  
  .locale-symbol {
    display: flex;
    align-items: center
  }
  
  .locale-symbol>.icon {
    width: 24px;
    height: 24px
  }
  
  .locale-dropdown .locale-chevron {
    width: 18px;
    height: 18px;
    color: var(--green);
    transform: rotate(90deg);
    transition: transform .3s ease
  }
  
  .locale-dropdown[open] .locale-chevron {
    transform: rotate(-90deg)
  }
  
  .locale-dropdown :is(summary, button):focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px
  }
  
  .locale-options {
    max-height: min(240px, 30dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0
  }
  
  .locale-options>button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 8px;
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
    color: inherit;
    border: 0;
    border-radius: 4px;
    background: transparent
  }
  
  .locale-options>button>span {
    min-width: 0;
    overflow-wrap: anywhere
  }
  
  .locale-options>button>img {
    display: block;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border: 1px solid var(--line)
  }
  
  .locale-options>button>.icon {
    width: 18px;
    height: 18px;
    opacity: 0
  }
  
  .locale-options>button[aria-pressed=true] {
    background: var(--surface-active);
    color: var(--green)
  }
  
  .locale-options>button[aria-pressed=true]>.icon {
    opacity: 1
  }
  
  .locale-dropdown-compact>summary {
    grid-template-columns: 20px auto 16px;
    gap: 8px;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    font-weight: 400
  }
  
  .locale-dropdown-compact .locale-symbol>.icon {
    width: 20px;
    height: 20px
  }
  
  .locale-dropdown-compact .locale-chevron {
    width: 16px;
    height: 16px
  }
  
  .locale-dropdown-compact .locale-options {
    position: absolute;
    z-index: 5;
    max-height: min(240px, 40dvh);
    padding: 6px;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 6px 24px var(--deep-a15)
  }
  
  .mobile-settings .locale-options {
    inset: auto var(--mobile-gutter) calc(100% - 4px)
  }
  
  @media(hover:hover)and (pointer:fine) {
    .header-tools>button:hover,
    .header-tools>a:hover,
    .locale-button:hover {
      background: var(--tint);
      color: var(--ink)
    }
  }
  
  @media(max-width:1024px) {
    .header-main .logo {
      flex-basis: 140px
    }
    .header-main .logo img {
      width: 100%;
      height: 44px
    }
    .header-tools {
      gap: 2px
    }
  }
  
  @media(max-width:600px) {
    .header-main .logo {
      flex-basis: 128px
    }
    .header-main .logo img {
      height: 40px
    }
    .header-main {
      gap: 8px
    }
    .header-tools {
      gap: 0
    }
  }
  
  .site-footer {
    margin-top: 28px;
    padding: 0;
    background: var(--deep);
    color: var(--white)
  }
  
  .site-footer .newsletter {
    margin: 0;
    background: transparent
  }
  
  .newsletter-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 24px 40px;
    padding-block: 34px;
    border-bottom: 1px solid var(--white-a15);
    align-items: center
  }
  
  .newsletter-copy {
    min-width: 0
  }
  
  .newsletter h2 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--action);
    margin-bottom: 8px
  }
  
  .newsletter h2 em {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.14em
  }
  
  .newsletter-copy p {
    font-size: var(--text-body);
    line-height: 1.5;
    margin: 0;
    max-width: 46ch;
    color: var(--on-dark-muted)
  }
  
  .newsletter-form {
    min-width: 0;
    width: 100%;
    max-width: 520px;
    justify-self: end
  }
  
  .newsletter-form>label {
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--on-dark-muted);
    margin-bottom: 6px
  }
  
  .newsletter-input {
    display: flex;
    gap: 8px
  }
  
  .newsletter-input input {
    width: 0;
    min-width: 0;
    flex: 1;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--deep);
    color: var(--white);
    border-color: var(--muted)
  }
  
  .newsletter-input input::placeholder {
    color: var(--on-dark-muted);
    opacity: 1
  }
  
  .newsletter-input .button {
    width: auto;
    flex-shrink: 0;
    padding: 12px 16px;
    min-height: 48px;
    background: var(--action);
    border-color: var(--action);
    color: var(--deep)
  }
  
  .footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) minmax(0, 4fr);
    gap: 32px 62px;
    align-items: start;
    padding: 26px 0
  }
  
  .footer-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0
  }
  
  .footer-intro>img {
    width: 120px;
    height: auto;
    aspect-ratio: 200/88;
    flex: none;
    margin: 0;
    object-fit: contain;
    filter: brightness(0) invert(1)
  }
  
  .footer-intro p {
    max-width: 48ch;
    font-size: var(--text-small);
    line-height: 1.6;
    margin: 0;
    color: var(--on-dark-muted);
    text-wrap: pretty
  }
  
  .footer-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding-top: 4px;
    min-width: 0
  }
  
  .footer-columns>div {
    min-width: 0
  }
  
  .footer-columns h3 {
    font-size: var(--text-small);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--action);
    margin-bottom: 8px
  }
  
  .footer-columns a {
    display: block;
    min-height: 24px;
    font-size: var(--text-small);
    line-height: 1.5;
    padding: 2px 0;
    color: var(--on-dark-muted);
    overflow-wrap: anywhere
  }
  
  .footer-services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    border-top: 1px solid var(--white-a15);
    padding: 12px 0
  }
  
  .footer-connect {
    display: flex;
    align-items: center;
    gap: 16px
  }
  
  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0
  }
  
  .footer-connect>.social-links {
    position: relative;
    flex: none;
    flex-wrap: nowrap;
    padding-left: 16px
  }
  
  .footer-connect>.social-links:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    border-left: 1px solid var(--white-a15)
  }
  
  .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--white-a95)
  }
  
  .social-links svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0
  }
  
  .footer-preferences {
    position: relative;
    max-width: 100%
  }

  .footer-preferences {
    display: none;
  }
  .footer-connect>.social-links:before {
    display: none;
  }
  
  .footer-preferences>.locale-button {
    min-width: 72px;
    color: var(--white-a95)
  }
  
  .footer-preferences>.locale-dropdown {
    display: none;
    width: max-content;
    color: var(--white-a95)
  }
  
  .footer-preferences .locale-chevron {
    color: var(--action)
  }
  
  .footer-preferences .locale-options {
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 10;
    width: 260px;
    max-width: calc(100vw - 32px)
  }
  
  .footer-preferences .locale-options>button:focus-visible {
    outline-color: var(--green)
  }
  
  @media(max-width:1024px) {
    .footer-preferences>.locale-button {
      display: none
    }
    .footer-preferences>.locale-dropdown {
      display: block
    }
  }
  
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    border-top: 1px solid var(--white-a15);
    padding: 14px 0 80px;
    font-size: var(--text-meta);
    color: var(--on-dark-muted);
    text-align: left
  }
  
  .footer-bottom>span {
    text-align: right
  }
  
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 18px
  }
  
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 32px
  }
  
  .site-footer :focus-visible {
    outline-color: var(--action)
  }
  
  .footer-columns a:focus-visible {
    outline-offset: 2px
  }
  
  @media(max-width:1100px) {
    .footer-main {
      grid-template-columns: 1fr;
      gap: 22px;
      padding: 24px 0
    }
    .footer-intro p {
      max-width: 76ch
    }
    .footer-services {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px
    }
  }
  
  @media(max-width:760px) {
    .newsletter-inner {
      grid-template-columns: 1fr;
      gap: 18px
    }
    .newsletter h2 {
      grid-column: 1;
      grid-row: 1
    }
    .newsletter-form {
      justify-self: start
    }
    .newsletter h2 {
      font-size: 20px
    }
    .footer-columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 20px;
      padding: 0
    }
    .footer-columns a {
      padding: 3px 0
    }
    .footer-columns h3 {
      margin-bottom: 6px
    }
    .footer-services {
      row-gap: 24px;
      border-top: 0;
      justify-items: center;
      text-align: center
    }
    .footer-connect,
    .social-links {
      justify-content: center
    }
    .footer-connect {
      display: contents
    }
    .footer-connect>.social-links {
      width: 100%;
      gap: 0;
      padding: 0 0 16px;
      border-bottom: 1px solid var(--white-a15)
    }
    .footer-connect>.social-links:before {
      display: none
    }
    .footer-preferences {
      order: 1;
      position: relative;
      display: flex;
      justify-content: center;
      flex: none;
      width: 100%;
      min-width: 0
    }
    .footer-preferences>.locale-dropdown {
      width: 100%
    }
    .footer-preferences .locale-dropdown>summary {
      grid-template-columns: 20px minmax(0, 1fr) 16px;
      gap: 8px;
      min-height: 52px;
      padding: 12px 8px;
      border: 1px solid var(--on-dark-muted);
      border-radius: 6px;
      text-align: left
    }
    .footer-preferences .locale-dropdown[open]>summary {
      border-color: var(--accent)
    }
    .footer-preferences .locale-options {
      width: 100%;
      max-width: 100%;
      text-align: left
    }
    .footer-bottom {
      flex-direction: column;
      padding: 14px 0 80px;
      gap: 12px;
      text-align: center
    }
    .footer-bottom>span {
      width: 100%;
      text-align: center
    }
    .footer-legal {
      justify-content: center;
      gap: 4px 18px
    }
  }
  
  @media(max-width:380px) {
    .newsletter-input {
      flex-wrap: wrap
    }
    .newsletter-input input {
      flex-basis: 100%;
      width: 100%
    }
    .newsletter-input .button {
      width: 100%
    }
    .footer-columns {
      column-gap: 12px
    }
  }
  
  @media(hover:hover)and (pointer:fine) {
    .footer-columns a:hover,
    .footer-bottom a:hover {
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 3px
    }
    .site-footer .social-links a:hover,
    .site-footer .locale-button:hover {
      color: var(--white);
      background: var(--white-a10)
    }
    .newsletter-input .button:hover {
      background: var(--action-hover);
      border-color: var(--action-hover);
      color: var(--deep)
    }
  }
  
  .language-option img {
    display: block;
    flex: none;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 0
  }
  
  #language-dialog {
    width: min(960px, calc(100% - 32px));
    max-width: 960px;
    background: var(--white);
    font-family: var(--font-sans)
  }
  
  #language-dialog .language-options {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0
  }
  
  #language-dialog .language-options legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%)
  }
  
  #language-dialog .language-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 4px;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin
  }
  
  #language-dialog .language-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 12px 14px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-size: var(--text-body);
    line-height: 1.4;
    font-weight: 400;
    color: var(--deep)
  }
  
  #language-dialog .language-option img {
    width: 32px;
    height: 24px;
    border-radius: 3px;
    flex: none
  }
  
  #language-dialog .language-option .language-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere
  }
  
  #language-dialog .language-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0
  }
  
  #language-dialog .language-option .language-check {
    flex: none;
    width: 20px;
    height: 20px;
    opacity: 0;
    color: var(--green)
  }
  
  #language-dialog .language-check .icon {
    width: 20px;
    height: 20px
  }
  
  #language-dialog .language-option:has(input:checked) {
    background: color-mix(in srgb, var(--action) 55%, var(--tint));
    font-weight: 600;
    color: var(--green)
  }
  
  #language-dialog .language-option:has(input:checked) .language-check {
    opacity: 1
  }
  
  #language-dialog .language-option:has(input:focus-visible) {
    outline: 2px solid var(--green);
    outline-offset: 1px
  }
  
  #language-dialog #language-status {
    background: none;
    border: 0;
    padding: 0 8px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 13px
  }
  
  #language-dialog form>.button {
    display: block;
    margin: 16px 4px 0 auto;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px
  }
  
  @media(hover:hover) {
    #language-dialog .language-option:hover {
      background: var(--deep-a5)
    }
    #language-dialog .language-option:has(input:checked):hover {
      background: color-mix(in srgb, var(--action) 55%, var(--tint))
    }
  }
  
  @media(max-width:760px) {
    #language-dialog .language-options-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-height: 50dvh
    }
    #language-dialog .language-option {
      font-size: 16px;
      padding: 10px;
      gap: 10px
    }
  }
  
  @media(max-width:480px) {
    #language-dialog .language-options-grid {
      grid-template-columns: 1fr
    }
    #language-dialog .language-option {
      min-height: 56px
    }
  }
  
  .site-footer .newsletter-input input:focus {
    border-color: var(--action);
    box-shadow: none;
    outline: 1px solid var(--action);
    outline-offset: 0
  }
  
  .site-footer .newsletter-input input:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 1px
  }
  
  .site-footer .newsletter-input input:autofill,
  .site-footer .newsletter-input input:autofill:focus {
    box-shadow: 0 0 0 1000px var(--deep) inset;
    -webkit-text-fill-color: var(--white)
  }
  
  .footer-group {
    min-width: 0;
    border: 0;
    padding: 0
  }
  
  .footer-group>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    cursor: default
  }
  
  .footer-group>summary::-webkit-details-marker {
    display: none
  }
  
  .footer-group>summary .icon {
    display: none
  }
  
  @media(max-width:760px) {
    .footer-columns {
      grid-template-columns: 1fr;
      gap: 0
    }
    .footer-group {
      border-bottom: 1px solid var(--white-a15)
    }
    .footer-group:first-child {
      border-top: 1px solid var(--white-a15)
    }
    .footer-group>summary {
      min-height: 54px;
      cursor: pointer;
      padding: 12px 0
    }
    .footer-group>summary h3 {
      margin: 0
    }
    .footer-group>summary .icon {
      display: block;
      width: 18px;
      height: 18px;
      color: var(--action);
      transform: rotate(90deg)
    }
    .footer-group[open]>summary .icon {
      transform: rotate(-90deg)
    }
    .footer-group>summary[aria-expanded=false] .icon {
      transform: rotate(90deg)
    }
    .footer-group>summary[aria-expanded=true] .icon {
      transform: rotate(-90deg)
    }
    .footer-group>nav {
      padding-bottom: 12px
    }
    .footer-columns .footer-group a {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 8px 0
    }
  }
  
  :host {
    --max: 1320px;
    --hotel-surface: #f2f7f8;
    --hotel-subnav: #194459;
    --on-action: #194459
  }
  
  .header-main {
    padding-block: 16px 10px;
    gap: 28px
  }
  
  .header-main .logo img,
  .logo img {
    width: 230px;
    height: 61px
  }
  
  .header-promise {
    color: var(--muted);
    font-size: 14px;
    margin-left: 18px
  }
  
  .header-tools {
    margin-left: auto
  }
  
  .desktop-nav {
    gap: 38px
  }
  
  .nav-item>.nav-trigger {
    padding-block: 11px 10px
  }
  
  .nav-submenu-toggle>.icon {
    width: 16px;
    height: 16px
  }
  /*
  .mega-grid {
    --menu-col: calc((100% - 96px) / 5.2);
    --menu-ad-width: calc(var(--menu-col) * 1.2);
    grid-template-columns: repeat(3, var(--menu-col)) minmax(0, 1fr) var(--menu-ad-width)
  }
  
  .mega-grid:has(>div:nth-child(2):last-of-type) {
    grid-template-columns: repeat(2, var(--menu-col)) minmax(0, 1fr) var(--menu-ad-width)
  }
*/
  /*
  .mega-grid {
    --menu-col: calc((100% - 96px) / 5.2);
    --menu-ad-width: calc(var(--menu-col) * 1.2);
    grid-template-columns: repeat(3, var(--menu-col)) minmax(0, 1fr) var(--menu-ad-width)
  }
  
  .mega-grid:has(>div:nth-child(2):last-of-type) {
    grid-template-columns: repeat(2, var(--menu-col)) minmax(0, 1fr) var(--menu-ad-width)
  }
    */
    /* GEKLAUT VON MARTINS DEV */
    .mega-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 1.05fr;
      }
      .mega-grid:has(> div:nth-child(2):last-of-type) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 1.1fr;
      }
      /* ENDE GEKLAUT VON MARTINS DEV */
  
  .mega-grid>.menu-partner {
    grid-column: -2 / -1
  }
  
  .mobile-settings {
    justify-content: space-between
  }
  
  .mobile-settings>a {
    font-size: 14px
  }
  
  [data-save][aria-pressed=true] svg {
    fill: var(--surface-active)
  }
  
  :host {
    --section-heading-size: clamp(27px, calc(23.584px + .792vw), 35px)
  }
  
  .utility-dialog .small {
    font-size: 13px;
    line-height: 1.65
  }
  
  .utility-dialog .button,
  .utility-dialog label {
    font-size: 14px
  }
  
  .utility-dialog h2 {
    outline: none
  }
  
  .search-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0
  }
  
  .search-suggestions button {
    font-size: 13px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 4px
  }
  
  @media(hover:hover) {
    .search-suggestions button:hover {
      background: var(--tint)
    }
  }
  
  #search-results {
    margin-bottom: 22px
  }
  
  #search-results>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    gap: 15px;
    font-size: 15px
  }
  
  .share-device {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px
  }
  
  #share-dialog .input-action {
    margin-top: 8px
  }
  
  #share-url {
    min-width: 0;
    font-size: 13px
  }
  
  .favorite-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
  }
  
  .empty-favorites {
    text-align: center;
    padding: 25px 0
  }
  
  .empty-favorites .icon {
    width: 38px;
    height: 38px;
    color: var(--accent);
    margin-bottom: 12px
  }
  
  .empty-favorites p {
    font-size: 15px
  }
  
  .site-footer .footer-brand {
    display: inline-block;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 16px
  }
  
  .site-footer .footer-intro .footer-brand img {
    filter: brightness(0) invert(1);
    opacity: 1;
    margin: 0;
    width: 195px;
    height: 52px
  }
  
  .facebook-link {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #ffffff30;
    border-radius: 50%
  }
  
  .newsletter-form input:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px
  }
  
  .site-footer .newsletter h2 em {
    font-size: 1.15em
  }
  
  .footer-services {
    padding-block: 15px;
    display: flex
  }
  
  .footer-main {
    padding-block: 30px !important
  }
  
  .footer-columns a {
    font-size: 13px
  }
  
  .back-to-top {
    z-index: 101
  }
  
  button:focus-visible,
  a:focus-visible {
    outline-color: var(--green)
  }
  
  .site-footer a:focus-visible {
    outline-color: var(--accent-light)
  }
  
  @media(max-width:1150px) {
    .header-promise {
      font-size: 13px;
      margin-left: 0
    }
  }
  
  @media(max-width:1024px) {
    .header-main {
      padding-block: 10px;
      gap: 12px
    }
    .header-main .logo img {
      width: 210px;
      height: 56px
    }
    .header-promise {
      display: none
    }
  }
  
  @media(max-width:800px) {
    .wrap {
      width: calc(100% - 40px)
    }
    .site-footer {
      padding-bottom: 90px
    }
    .back-to-top {
      bottom: 100px;
      right: 18px;
      width: 44px;
      height: 44px
    }
  }
  
  @media(max-width:560px) {
    .header-main {
      width: calc(100% - 28px);
      padding-block: 9px
    }
    .header-main .logo img {
      width: 157px;
      height: 43px
    }
    .header-main .logo {
      flex: 0 1 157px;
      min-width: 100px
    }
    .header-tools {
      gap: 0
    }
    .header-tools>button {
      width: 34px;
      min-width: 34px;
      padding: 6px;
      min-height: 44px
    }
    .header-tools .icon {
      width: 20px;
      height: 20px
    }
    .header-tools .locale-button {
      display: none
    }
    .header-tools b {
      right: -3px;
      top: 0
    }
    .utility-dialog .input-action .button {
      padding-inline: 12px
    }
    .utility-dialog .input-action input {
      min-width: 0
    }
    .utility-dialog .input-action .icon {
      display: none
    }
    .newsletter-input {
      flex-wrap: wrap
    }
    .newsletter-input input {
      width: 100%
    }
    .newsletter-input .button {
      white-space: nowrap;
      font-size: 13px
    }
    .back-to-top {
      width: 39px;
      height: 39px;
      bottom: 100px
    }
  }
  
  @media(prefers-reduced-motion:reduce) {}
  
  .social-links .social-link-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #ffffffa6
  }
  
  :host([data-motion=soft]) {
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --dur-fast: .15s;
    --dur-base: .2s;
    --dur-slow: .28s;
    --motion-ease: cubic-bezier(.25, .1, .25, 1)
  }
  
  :host([data-motion=soft]) .site-header {
    opacity: 1;
    transition: transform .38s var(--motion-ease), opacity .24s ease, box-shadow .24s ease
  }
  
  :host([data-motion=soft]) [data-scroll-subnav].subnav-fixed {
    transition: transform .34s var(--motion-ease), opacity .24s ease, visibility 0s linear .34s
  }
  
  :host([data-motion=soft].wi-show-subnav) [data-scroll-subnav].subnav-fixed {
    transition-delay: 0s, 0s, 0s
  }
  
  :host([data-motion=soft]) :is(.nav-item, .nav-trigger, .nav-submenu-toggle, [data-scroll-subnav] a, .button, .poi-icon-button, .poi-image-control, .header-tools>button, .header-tools>a) {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease, opacity .2s ease
  }
  
  :host([data-motion=soft]) :is(.nav-chevron, .footer-group>summary .icon, .poi-readmore-toggle .icon) {
    transition: transform .24s var(--motion-ease)
  }
  
  :host([data-motion=soft]) .motion-pending {
    opacity: 0;
    transform: translateY(16px)
  }
  
  :host([data-motion=soft]) .motion-closing {
    pointer-events: none
  }
  
  :host([data-motion=soft]) #mega-menu.motion-rolling {
    overflow: hidden
  }
  
  :host([data-motion=soft].wi-show-subnav) .site-header {
    opacity: 0
  }
  
  :host([data-motion=soft]) dialog::backdrop {
    animation: soft-backdrop-in .25s var(--motion-ease) both
  }
  
  :host([data-motion=soft]) dialog.motion-closing::backdrop {
    animation: soft-backdrop-out .18s var(--motion-ease) both
  }
  
  :host([data-motion=soft]) #mobile-dialog::backdrop {
    animation-duration: var(--dur-slow);
    animation-delay: 0s;
    animation-timing-function: var(--ease-drawer)
  }
  
  :host([data-motion=soft]) #mobile-dialog.motion-closing::backdrop {
    animation-duration: .22s;
    animation-delay: 0s
  }
  
  :host([data-motion=soft]) .mobile-sheet {
    transform: translate3d(100%, 0, 0);
    transition: transform .2s var(--ease-drawer, cubic-bezier(.32, .72, 0, 1))
  }
  
  :host([data-motion=soft]) .mobile-dialog.drawer-open>.mobile-sheet {
    transform: translateZ(0);
    transition-duration: var(--dur-slow, .28s);
    transition-delay: 0s;
    will-change: transform
  }
  
  .menu-glyph {
    transform-origin: center;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1)
  }
  
  #mobile-toggle[aria-expanded=true] .menu-glyph,
  #mobile-dialog.drawer-open .menu-glyph {
    transform: rotate(180deg)
  }
  
  .menu-glyph path {
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
    transform-box: view-box
  }
  
  .menu-bar-top {
    transform-origin: 12px 6px
  }
  
  .menu-bar-middle {
    transform-origin: 12px 12px
  }
  
  .menu-bar-bottom {
    transform-origin: 12px 18px
  }
  
  #mobile-toggle[aria-expanded=true] .menu-bar-top,
  #mobile-dialog.drawer-open .menu-bar-top {
    transform: translateY(6px) rotate(45deg)
  }
  
  #mobile-toggle[aria-expanded=true] .menu-bar-middle,
  #mobile-dialog.drawer-open .menu-bar-middle {
    transform: scaleX(.2);
    opacity: 0
  }
  
  #mobile-toggle[aria-expanded=true] .menu-bar-bottom,
  #mobile-dialog.drawer-open .menu-bar-bottom {
    transform: translateY(-6px) rotate(-45deg)
  }
  
  #mobile-toggle {
    border: 1px solid transparent
  }
  
  #mobile-toggle[aria-expanded=true] {
    background: var(--white);
    border-color: var(--line);
    color: var(--green)
  }
  
  #mobile-dialog.motion-closing .menu-glyph,
  #mobile-dialog.motion-closing .menu-glyph path {
    transition-duration: .22s
  }
  
  :host([data-motion=soft]) [data-readmore-content] {
    display: flow-root;
    overflow: hidden
  }
  
  :host([data-motion=soft]) .motion-details {
    overflow: hidden;
    box-sizing: border-box
  }
  
  :host([data-motion=soft].wi-subnav-pushing) .site-header {
    transform: translateY(calc(-1 * var(--header-push)));
    opacity: 1;
    transition: none
  }
  
  :host([data-motion=soft].wi-show-subnav.wi-subnav-docked) .site-header,
  :host([data-motion=soft].wi-show-subnav.wi-subnav-docked) [data-scroll-subnav].subnav-fixed {
    animation: none;
    transition: none
  }
  
  @media(prefers-reduced-motion:reduce) {
    :host([data-motion=soft]) {
      scroll-behavior: auto
    }
    :host([data-motion=soft]) *,
    :host([data-motion=soft]) *:before,
    :host([data-motion=soft]) *:after,
    :host([data-motion=soft]) dialog::backdrop {
      animation: none !important;
      transition: none !important
    }
    :host([data-motion=soft]) .motion-pending {
      opacity: 1;
      transform: none
    }
  }
  
  @media print {
    :host([data-motion=soft]) .motion-pending {
      opacity: 1;
      transform: none
    }
  }
  
  @media(prefers-reduced-motion:no-preference) {
    :host([data-motion=soft].wi-show-subnav) [data-scroll-subnav].subnav-fixed {
      animation: soft-sticky-in .6s .09s var(--motion-ease) both
    }
  }
  
  :host {
    --deep: #194459;
    --green: #04778c;
    --accent: #04859d;
    --accent-light: #98d5dc;
    --muted: #5c7280;
    --line: #dce6e9;
    --tint: #f1f7f8;
    --action: #98d5dc;
    --on-action: #194459;
    --conversion: #048097;
    --conversion-border: #047388;
    --conversion-text: #fff;
    --conversion-hover: #036d81;
    --secondary: #dceef1;
    --secondary-hover: #b9dde4;
    --secondary-text: var(--deep);
    --secondary-border: var(--green);
    --field-border: #819095
  }
  
  #language-dialog .language-option:has(input:checked),
  .locale-options>button[aria-pressed=true] {
    color: var(--deep)
  }
  
  .header-main .logo img {
    padding-left: 0;
    object-position: left center
  }
  
  .header-tools>.locale-button-icon {
    position: relative
  }
  
  .mobile-back>.icon {
    transform: rotate(180deg)
  }
  
  .mobile-settings {
    display: grid;
    grid-template-columns: 1fr auto
  }
  
  .mobile-settings>a {
    display: flex;
    align-items: center;
    min-height: 44px
  }
  
  .mobile-settings>.mobile-preferences {
    grid-column: 2
  }
  
  .footer-brand {
    display: block;
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px
  }
  
  .footer-brand img {
    width: 190px;
    height: 51px;
    object-fit: contain
  }
  
  [data-date-clear] {
    margin-top: 12px;
    min-height: 40px;
    font-size: 13px
  }
  
  @media(max-width:1024px) {
    .header-main {
      padding-block: 12px;
      gap: 12px
    }
    .header-main .logo img {
      width: 180px;
      height: 48px
    }
    .header-main .logo {
      flex-basis: 180px
    }
    .header-promise {
      display: none
    }
    .footer-preferences>.locale-button {
      display: none
    }
  }
  
  @media(max-width:760px) {
    .footer-main {
      grid-template-columns: 1fr;
      gap: 22px
    }
    .footer-columns {
      grid-template-columns: 1fr;
      gap: 0
    }
    .footer-services {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px
    }
    .footer-connect {
      display: contents
    }
    .footer-preferences {
      width: 100%;
      justify-content: center
    }
    .footer-preferences>.locale-dropdown {
      width: 100%
    }
    .footer-bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-bottom: 110px
    }
    .footer-bottom>span {
      text-align: center
    }
    .footer-legal {
      justify-content: center
    }
  }
  
  @media(max-width:560px) {
    .header-main .logo {
      flex-basis: 140px
    }
    .header-main .logo img {
      width: 140px;
      height: 38px
    }
    .header-tools {
      gap: 0
    }
    .header-tools>button,
    .header-tools>a {
      min-width: 40px;
      width: 40px;
      height: 44px;
      padding: 9px
    }
    .newsletter-input {
      flex-wrap: wrap
    }
    .newsletter-input input {
      flex-basis: 100%;
      width: 100%
    }
    .newsletter-input .button {
      width: 100%
    }
  }
  
  @media(max-width:560px) {
    .header-tools>[data-dialog=language-dialog] {
      display: none
    }
  }
  
  @media(min-width:1025px) {
    .header-main {
      display: grid;
      grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
      align-items: center;
      gap: 24px;
      padding-block: 16px
    }
    .header-main>.logo {
      justify-self: start
    }
    .header-main>.header-promise {
      justify-self: center;
      text-align: center;
      margin: 0;
      line-height: 1.5;
      font-size: 15px
    }
    .header-main>.header-tools {
      grid-column: 3;
      justify-self: end;
      margin: 0
    }
    .desktop-nav {
      align-items: center;
      justify-content: center
    }
    .nav-item>.nav-trigger {
      padding-block: 12px;
      min-height: 48px;
      text-align: center
    }
    .nav-submenu-toggle {
      align-self: center
    }
  }
  
  @media(max-width:1024px) {
    .header-main {
      display: flex;
      align-items: center
    }
    .header-promise {
      display: none
    }
  }
  
  [data-interest][aria-pressed=true] {
    color: var(--deep)
  }
  
  [data-interest][aria-pressed=true]>.icon {
    transform: rotate(45deg)
  }
  
  details[open]>summary .icon-plus,
  [data-interest][aria-pressed=true]>.icon-plus {
    transform: none !important
  }
  
  details[open]>summary .icon-plus .icon-vertical,
  [data-interest][aria-pressed=true]>.icon-plus .icon-vertical {
    display: none
  }
  
  [data-occupancy-nights] {
    display: block;
    font-size: 13px;
    margin-top: 10px;
    color: var(--muted)
  }
  
  [data-occupancy-nights]:empty {
    display: none
  }
  
  .language-actions {
    display: flex;
    justify-content: flex-end
  }
  
  :host {
    --cta-radius: 5px;
    --cta-font-size: 14px;
    --cta-height: 48px;
    --cta-shadow: none
  }
  
  .button {
    --cta-bg: var(--secondary);
    --cta-fg: var(--secondary-text);
    --cta-border: var(--secondary-border);
    --cta-hover-bg: var(--secondary-hover);
    --cta-hover-fg: var(--secondary-text);
    --cta-hover-border: var(--secondary-border);
    --cta-rest-shadow: var(--cta-shadow)
  }
  
  .button.button-outline {
    --cta-bg: #fff;
    --cta-fg: var(--green);
    --cta-border: var(--green);
    --cta-hover-bg: var(--tint);
    --cta-hover-fg: var(--green);
    --cta-hover-border: var(--green);
    --cta-rest-shadow: none
  }
  
  .wi-root .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cta-bg) !important;
    color: var(--cta-fg) !important;
    border: 1px solid var(--cta-border) !important;
    border-radius: var(--cta-radius) !important;
    min-height: var(--cta-height) !important;
    padding: 13px 22px !important;
    font-family: var(--font-sans) !important;
    font-size: var(--cta-font-size) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    gap: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    box-shadow: var(--cta-rest-shadow) !important;
    transform: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1) !important
  }
  
  .wi-root .button>.icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    stroke-width: 1.6
  }
  
  @media(hover:hover) {
    .wi-root .button:hover:not(:disabled):not([aria-disabled=true]) {
      background: var(--cta-hover-bg) !important;
      color: var(--cta-hover-fg) !important;
      border-color: var(--cta-hover-border) !important;
      box-shadow: var(--cta-rest-shadow) !important
    }
  }
  
  .wi-root .button:focus-visible {
    outline: 3px solid var(--deep) !important;
    outline-offset: 3px !important
  }
  
  .wi-root .button:active:not(:disabled):not([aria-disabled=true]) {
    background: var(--cta-hover-bg) !important;
    color: var(--cta-hover-fg) !important;
    border-color: var(--cta-hover-border) !important;
    box-shadow: none !important;
    transform: scale(.97) !important
  }
  
  .wi-root .button:is(:disabled, [aria-disabled=true]) {
    background: #f3f5f6 !important;
    color: #6c7d84 !important;
    border-color: #d4dde1 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important
  }
  
  @media(max-width:600px) {
    .wi-root .button {
      padding: 11px 12px !important
    }
  }
  
  @media(prefers-reduced-motion:reduce) {
    .wi-root .button {
      transition: none !important
    }
  }
  
  :host {
    --mobile-booking-height: 0px
  }
  
  @media(max-width:1000px) {
    .wi-root .back-to-top {
      bottom: calc(var(--mobile-booking-height) + 16px);
      transition: opacity .2s, transform .2s
    }
    .site-footer {
      padding-bottom: calc(var(--mobile-booking-height) + 24px)
    }
  }
  
  @media(max-width:1000px) {
    [data-collapsible-booking] {
      --sheet-bg: #fff;
      --sheet-text: #194459;
      --sheet-muted: #536e79;
      --sheet-grip: #9dafb5;
      --sheet-close: #edf3f4;
      background: var(--sheet-bg);
      color: var(--sheet-text)
    }
    [data-collapsible-booking] .button {
      --cta-height: 52px;
      --cta-font-size: 16px
    }
    [data-sheet-theme=dark] {
      --sheet-bg: #163d4c;
      --sheet-text: #fff;
      --sheet-muted: #d1e1e7;
      --sheet-grip: #a5c2cc;
      --sheet-close: #2b5362;
      border-top-color: #406471
    }
    [data-sheet-theme=dark] .button:not(.button-outline) {
      --cta-bg: #04778c;
      --cta-border: #65a5b3;
      --cta-hover-bg: #096477;
      --cta-hover-border: #a5c2cc
    }
    [data-sheet-theme=dark] .button.button-outline {
      --cta-bg: #fff;
      --cta-fg: #04778c;
      --cta-border: #fff;
      --cta-hover-bg: #e5f1f4;
      --cta-hover-border: #e5f1f4
    }
    [data-sheet-theme=dark] .button:focus-visible {
      outline-color: #fff !important
    }
  }
  
  @media(max-width:1000px) {
    :host([lang]) [data-collapsible-booking][data-sheet-theme=form] {
      --sheet-bg: var(--tint);
      --sheet-text: var(--deep);
      --sheet-muted: #496370;
      --sheet-grip: #8ca7af;
      --sheet-close: #ffffffc9;
      background: linear-gradient(to bottom, #19445914 0, transparent 105px), var(--tint);
      border-top: 1px solid #b5cbd2;
      box-shadow: 0 -8px 28px #19445920
    }
  }
  
  @media(max-width:1000px) {
    [data-collapsible-booking] {
      touch-action: none;
      overscroll-behavior: none;
      transform: translateZ(0);
      -webkit-backface-visibility: hidden
    }
  }
  
  @media(pointer:coarse) {
    :is(input: not([type=checkbox], [type=radio], [type=range], [type=hidden]), select, textarea) {
      font-size:16px !important
    }
  }
  
  @keyframes soft-backdrop-in {
    0% {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  
  @keyframes soft-backdrop-out {
    0% {
      opacity: 1
    }
    to {
      opacity: 0
    }
  }
  
  @keyframes soft-sticky-in {
    0% {
      opacity: 0;
      transform: translateY(calc(-100% - 6px))
    }
    to {
      opacity: 1;
      transform: translateY(0)
    }
  }