.dark-menu header, .dark-menu.page-template-page-transparent-menu header.wp-block-template-part > div, .dark-menu main>.entry-content>:first-child.quickjump .quickjumpmenu {
    --wp--preset--color--textcolor: #000;
    color: var(--wp--preset--color--textcolor);
}

.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg, .wp-block-navigation-overlay-close svg { width:clamp(2.5rem,6vw,3.5rem); height:clamp(2.5rem,6vw,3.5rem); }
.wp-block-navigation svg line { stroke-width: 3px; }
.wp-block-navigation-overlay-close {position: absolute; right: 0}
.wp-block-navigation-overlay-close svg {color: #fff}

a.wp-block-navigation-item__content { font-style:normal; text-decoration:none !important}
a.wp-block-navigation-item__content:hover { font-style:italic}
.current-menu-item a.wp-block-navigation-item__content { font-style:italic}

header .wp-block-site-logo {max-width: clamp(180px,17vw,270px)}
header .wp-block-site-logo {fill:currentColor;}


header, .page-template-page-transparent-menu header.wp-block-template-part { position: fixed; width: 100%; top: 0; }
header>.wp-block-group {transition:background 0.3s ease;}
header .wp-block-site-logo { transition:transform 0.3s ease; transform:translateY(0)}
.scrolled header { pointer-events:none}
.scrolled header>.wp-block-group * { pointer-events:initial}
.scrolled header .wp-block-site-logo:not(.wp-block-navigation__responsive-container .wp-block-site-logo) { transform:translateY(-150px)}
.scrolled header>.wp-block-group {background-color:transparent !important}


:root{--menu-bg-color:color-mix(in srgb, var(--wp--preset--color--secondary), transparent 20%)}

/*
.wp-block-navigation__responsive-container {
  bottom: auto;
  max-height: 100dvh;
}*/
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
    padding-top:max(env(safe-area-inset-top), var(--wp--style--root--padding-left));
    padding-right:max(env(safe-area-inset-right), var(--wp--style--root--padding-right));
    padding-bottom:max(env(safe-area-inset-bottom), var(--wp--style--root--padding-left));
    padding-left:max(env(safe-area-inset-left), var(--wp--style--root--padding-left));
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--menu-bg-color);
    --wp--preset--color--textcolor:white;
    color:white;
    /*bg*/ --hg-pos-x:right -5%; --hg-pos-y: bottom 50%; --hg-size:auto 70%;
    backdrop-filter: blur(3px);
}
.my-overlay  /*.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content*/ {
    padding-top: 0;
    min-height: calc(100dvh - 2 * var(--wp--style--root--padding-left));
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    --navigation-layout-justification-setting:space-between;
}
@media (min-width: 546px){ .my-overlay>.wp-block-group {min-height:calc(100dvh - 2 * var(--wp--style--root--padding-left))} }
@media (max-width: 545px){ .my-overlay>.wp-block-group.left {min-height:calc(100dvh - 2 * var(--wp--style--root--padding-left) - 6em)}  }
.my-overlay>.wp-block-group.left {justify-content: space-between;}
.my-overlay>.wp-block-group.right {align-items: flex-end; font-size: 2em}
.my-overlay ul.language-switcher { font-size: 2em; }
.my-overlay .baseicon.border {color: currentColor; border-color: currentColor;}
.my-overlay a:hover .baseicon.border {background-color: #000; border-color:#000}

.wp-block-navigation__responsive-container.is-menu-open .my-overlay .wp-block-navigation /*.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container */{
    justify-content: space-between;
    --navigation-layout-justification-setting:flex-start;
    gap:0;
}



.my-overlay>.wp-block-group .wp-block-navigation__container > :nth-child(2) /*.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > :nth-child(2)*/ {
    margin-top: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {font-size: var(--wp--preset--font-size--xxx-large); margin-bottom: -0.25em; margin-top: 0em; display: block; min-width: 12ch}

.has-modal-open .wp-block-navigation__responsive-close {max-width: 100%}

nav:has( >.wp-block-navigation__responsive-container.has-modal-open.is-menu-open ) .wp-block-navigation__responsive-container-open { display: none !important;}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {}

nav .wp-block-button.is-style-outline .wp-block-button__link {padding: 0}
nav .wp-block-button__link.wp-element-button {padding: 0; font-size: 1.5em}
nav .wp-block-button__link.wp-element-button svg {margin: 0}

.hg-hahn-01, .hg-hahn-02, .hg-hahn-03 { isolation: isolate; --hg-pos-x:right 0%; --hg-pos-y:bottom 20%; --hg-size:clamp(200px,50vw,440px)/*auto 80%*/; --hg-opacity:1}
.hg-hahn-01:not([class*=sticky]), .hg-hahn-02:not([class*=sticky]), .hg-hahn-03:not([class*=sticky]) { position: relative;}

.hg-offset-x { --hg-pos-x:right -6em }
.hg-top-y { --hg-pos-y:top 20% }
.hg-center-y { --hg-pos-y:top 50% }

.hg-hahn-01::before, .hg-hahn-02::before, .hg-hahn-03::before, .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open::before {
    content:'';
    position: absolute;
    z-index: -1;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    pointer-events: none;
    mask: url("../images/hahn-01.svg") no-repeat;
    -webkit-mask: url("../images/hahn-01.svg") no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: var(--hg-pos-x, right -20%) var(--hg-pos-y, center);
    -webkit-mask-position: var(--hg-pos-x, right -20%) var(--hg-pos-y, center);
    mask-size: var(--hg-size);
    -webkit-mask-size: var(--hg-size);
    background: var(--hg-color,white);
    opacity: var(--hg-opacity);
}
.hg-hahn-02::before { mask-image: url("../images/hahn-02.svg"); -webkit-mask-image: url("../images/hahn-02.svg"); }
.hg-hahn-03::before { mask-image: url("../images/hahn-03.svg"); -webkit-mask-image: url("../images/hahn-03.svg"); }

.hg-hahn-01::before, .hg-hahn-02::before, .hg-hahn-03::before{
    transform:translateX(calc(10vw - 20vw * var(--scroll-offset,0)))
}
.hg-hahn-01.links::before, .hg-hahn-02.links::before, .hg-hahn-03.links::before{
    /*transform: scaleX(-1);*/
    transform:scaleX(-1) translateX(calc(10vw - 20vw * var(--scroll-offset,0)))
}
.hg-offset-x::before {
    transform: translateX(calc(10vw - 10vw * var(--scroll-offset, 0)));
}



footer .hg-hahn-01::before { transform: translateX(0); --hg-size:clamp(200px,70vw,300px); --hg-pos-y: bottom 80%; --hg-pos-x: right 4em;}

.hg-primary{--hg-color:var(--wp--preset--color--primary)}
.hg-secondary{--hg-color:var(--wp--preset--color--secondary)}
.hg-tertiary{--hg-color:var(--wp--preset--color--tertiary)}
.hg-quaternary{--hg-color:var(--wp--preset--color--quaternary)}
.hg-quinary{--hg-color:var(--wp--preset--color--quinary)}

.hg-opacity-75{--hg-opacity:0.75}
.hg-opacity-50{--hg-opacity:0.5}
.hg-opacity-25{--hg-opacity:0.25}
.hg-opacity-15{--hg-opacity:0.15}




.hahn-01, .hahn-02, .hahn-03 {
    width:5em;
    height:5em;
    pointer-events: none;
    mask: url("../images/hahn-01.svg") no-repeat;
    -webkit-mask: url("../images/hahn-01.svg") no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    background: currentColor;
}
.hahn-02 { mask-image: url("../images/hahn-02.svg"); -webkit-mask-image: url("../images/hahn-02.svg"); }
.hahn-03 { mask-image: url("../images/hahn-03.svg"); -webkit-mask-image: url("../images/hahn-03.svg"); }


footer{margin-top: 0}
footer .wp-block-button.is-style-outline .wp-block-button__link {
    padding: 0;
    font-size: 1.5rem;
}
footer .wp-block-button__link.wp-element-button svg {margin: 0}

.parent-restaurant {--menu-bg-color:color-mix(in srgb, var(--wp--preset--color--quaternary), transparent 10%);  }
.parent-restaurant .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open::before{ --hg-color: var(--wp--preset--color--quinary); }

.parent-outdoor {--menu-bg-color:color-mix(in srgb, var(--wp--preset--color--tertiary), transparent 10%);  }
.parent-outdoor .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open::before{ --hg-color: var(--wp--preset--color--quaternary); }

.parent-kontakt {--menu-bg-color:color-mix(in srgb, #9bbec4, transparent 10%);  }
.parent-kontakt .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open::before{ --hg-color: color-mix(in srgb, var(--wp--preset--color--secondary), white 55%); }


@media (max-width: 600px){
    .entry-content>:first-child .wp-block-cover.is-position-bottom-left {
    padding-bottom: calc(3 * var(--wp--preset--spacing--40)) !important;
    }
}
@media (orientation: portrait) {
    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open::before { --hg-pos-x:right -20%; --hg-pos-y:bottom 50%; --hg-size:60%;}
    footer .hg-hahn-01::before {--hg-pos-x:right -1em; --hg-pos-y:bottom 50% }
}




/*
main h2:not(.wp-block-cover h2) {
  opacity: 0;
  transform: translateY(-2em);
  filter: blur(10px);
  letter-spacing: 0.5em;
  animation: scroll-reveal linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 50%;
  //view-timeline-inset: 20vh;/
}
.sticky-top h2:not(.wp-block-cover h2) {
  animation-range: entry 0% cover 10%;
}

@keyframes scroll-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    letter-spacing: -0.02em;
  }
}*/

/*
main p {
  opacity: 0;
  transform: translateY(1em);
  animation: scroll-fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 20% cover 50%;
}
main .sticky-top p {
  animation-range: entry 5% cover 10%;
}
@keyframes scroll-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}*/

/*
main p {
  //display: inline;
  color: hsl(0deg 0% 100% / 20%);
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-size: 100% 0%;
  background-image: linear-gradient(90deg, #fff, #fff);
  animation: bg-reveal 3.5s linear forwards;
  animation-timeline: view(y);
  animation-range-start: cover 10.5vh;
  animation-range-end: cover 94.5vh;
  transition: background-size 0.8s ease, opacity 0.2s ease;
}
@keyframes bg-reveal {
  to {
    background-size: 100% 100%;
    opacity: 1;
  }
}*/





@property --opacity-offset {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.hg-hahn-01::before, .hg-hahn-02::before, .hg-hahn-03::before{
  --opacity-offset: 0;
  animation: scrollReveal linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
  opacity:calc(var(--opacity-offset) * var(--hg-opacity));
}
.sticky-top.hg-hahn-01::before, .sticky-top.hg-hahn-02::before, .sticky-top.hg-hahn-03::before{
  animation-range: entry 0% cover 10%;
}


@keyframes scrollReveal {
  to {
    --opacity-offset: 1;
  }
}




.language-switcher { list-style:none; font-size:var(--wp--preset--font-size--large); display:flex; text-transform:uppercase; padding:0 }
.language-switcher li:not(:first-child):before {content: ' / '}
.language-switcher li a {text-decoration:none;}
.language-switcher li a:hover {color:#000}
.language-switcher li.act a {font-weight: bold;}

/* TRP  language switcher */
.trp-shortcode-switcher__wrapper {margin-top: 2em}
.trp-shortcode-arrow {display: none}
.trp-shortcode-switcher {display: flex !important}
.trp-switcher-dropdown-list {max-height: none; max-width: 0;overflow-x: hidden;}
.trp-ls-dropdown.is-open .trp-switcher-dropdown-list, .trp-ls-dropdown[aria-expanded="true"] .trp-switcher-dropdown-list, .trp-shortcode-switcher.trp-open-on-hover.is-open .trp-switcher-dropdown-list, .trp-shortcode-switcher[aria-expanded="true"] .trp-switcher-dropdown-list{
    overflow-x: auto;
    max-width: 100px;
    max-height: min(350px, 70vh);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--text) transparent;
}
.trp-shortcode-switcher .trp-switcher-dropdown-list {
    flex-direction: row !important;
}