/* ==========================================================================
   MOBILE NAVIGATION — OBSIDIAN EDITORIAL EDITION
   ========================================================================== */

body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.mobile-menu-open .nav-container {
    transform: none !important;
}

body.mobile-menu-open .navbar {
    position: relative !important;
    z-index: 10002 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
}

body.mobile-menu-open .navbar::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -34px;
    right: -4vw;
    bottom: -28px;
    left: -4vw;
    background: linear-gradient(to bottom, rgba(8, 7, 6, .98) 0%, rgba(8, 7, 6, .82) 56%, transparent 100%);
    pointer-events: none;
}

body.mobile-menu-open .burger-menu {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
}

body.mobile-menu-open .navbar-logo {
    opacity: 0;
    transform: translateY(-8px) scale(.92);
    pointer-events: none;
}

/* Premium trigger */
.burger-menu {
    position: relative;
    display: none;
    width: 48px;
    height: 48px;
    padding: 13px 12px !important;
    margin: -4px -8px -4px 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px !important;
    border: 1px solid rgba(202, 138, 4, .3);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(27, 24, 20, .94), rgba(7, 7, 6, .98));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .07);
    cursor: pointer;
    z-index: 10001;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1), background .45s ease;
}

.burger-menu::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 210deg, transparent 0 56%, rgba(248, 216, 115, .95) 68%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .65;
    pointer-events: none;
    animation: burgerOrbit 5s linear infinite;
}

@keyframes burgerOrbit {
    to { transform: rotate(360deg); }
}

.burger-menu span {
    display: block !important;
    width: 23px !important;
    height: 1.5px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(90deg, #F7D66F, #B97700) !important;
    box-shadow: 0 0 8px rgba(202, 138, 4, .35);
    transform-origin: center;
    transition: width .45s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s ease !important;
}

.burger-menu span:nth-child(2) {
    width: 15px !important;
    align-self: flex-end;
}

.burger-menu:hover,
.burger-menu:focus-visible,
.burger-menu.open {
    border-color: rgba(229, 184, 59, .75);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .42), 0 0 24px rgba(202, 138, 4, .18), inset 0 1px 0 rgba(255, 255, 255, .09);
    transform: scale(1.04);
    outline: none;
}

.burger-menu.open {
    background: linear-gradient(145deg, rgba(35, 29, 21, .98), rgba(9, 8, 7, .99));
}

.burger-menu.open span:nth-child(1) {
    width: 22px !important;
    transform: translateY(6.5px) rotate(45deg);
}

.burger-menu.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px) scaleX(0);
}

.burger-menu.open span:nth-child(3) {
    width: 22px !important;
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Fullscreen material surface */
.mobile-menu-overlay {
    --menu-x: 78%;
    --menu-y: 18%;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding: calc(102px + env(safe-area-inset-top)) 22px calc(38px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 138, 4, .45) transparent;
    background: radial-gradient(circle at 15% 0%, rgba(202, 138, 4, .11), transparent 34%), linear-gradient(145deg, #100E0C 0%, #080706 52%, #030303 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    -webkit-clip-path: circle(0% at calc(100% - 47px) 56px);
    clip-path: circle(0% at calc(100% - 47px) 56px);
    transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), -webkit-clip-path .9s cubic-bezier(.76, 0, .24, 1), opacity .35s ease, visibility 0s linear .9s;
}

.mobile-menu-overlay::-webkit-scrollbar {
    width: 4px;
}

.mobile-menu-overlay::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: linear-gradient(#F0C85B, #8A5900);
}

.mobile-menu-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--menu-x) var(--menu-y), rgba(202, 138, 4, .17), transparent 58%), radial-gradient(600px circle at 50% 110%, rgba(202, 138, 4, .07), transparent 66%);
    opacity: 0;
    transform: scale(.92);
    transition: opacity .8s .25s ease, transform 1.2s .1s cubic-bezier(.16, 1, .3, 1);
}

.mobile-menu-overlay::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .25;
    background-image: linear-gradient(rgba(202, 138, 4, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(202, 138, 4, .045) 1px, transparent 1px);
    background-size: 74px 74px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 42%, #000 10%, transparent 82%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 42%, #000 10%, transparent 82%);
    transform: translateY(-18px);
    transition: transform 1.35s .15s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important;
    -webkit-clip-path: circle(150% at calc(100% - 47px) 56px);
    clip-path: circle(150% at calc(100% - 47px) 56px);
    transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), -webkit-clip-path .9s cubic-bezier(.76, 0, .24, 1), opacity .3s ease, visibility 0s linear;
}

.mobile-menu-overlay.active::before {
    opacity: 1;
    transform: scale(1);
}

.mobile-menu-overlay.active::after {
    opacity: .42;
    transform: translateY(0);
}

.mobile-menu-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 460px;
    min-height: calc(100dvh - 140px);
    margin: 0 auto;
    isolation: isolate;
}

.mobile-menu-content::after {
    content: 'KGS';
    position: absolute;
    z-index: -1;
    top: 250px;
    right: -62px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 10rem;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(229, 184, 59, .045);
    writing-mode: vertical-rl;
    user-select: none;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 1.1s .4s ease, transform 1.2s .35s cubic-bezier(.16, 1, .3, 1);
}

.mobile-menu-overlay.active .mobile-menu-content::after {
    opacity: 1;
    transform: translateX(0);
}

/* Brand introduction */
.mobile-menu-logo {
    position: relative;
    display: flex !important;
    align-items: center !important;
    align-self: flex-start;
    gap: 15px;
    width: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    opacity: 0;
    transform: translateY(-18px);
}

.mobile-menu-logo::after {
    content: 'LEBENSENERGIE KGS\A PRIVATE HEALTH COACHING';
    white-space: pre;
    font-family: 'Montserrat', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .19em;
    color: rgba(255, 255, 255, .72);
}

.mobile-menu-logo img {
    width: auto !important;
    height: 50px !important;
    filter: drop-shadow(0 0 18px rgba(202, 138, 4, .3)) !important;
}

.mobile-menu-overlay.active .mobile-menu-logo {
    animation: menuBrandIn .9s .24s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes menuBrandIn {
    to { opacity: 1; transform: translateY(0); }
}

.menu-divider {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 0 0 12px;
    overflow: visible;
    background: rgba(255, 255, 255, .075);
}

.menu-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 86px;
    height: 2px;
    background: linear-gradient(90deg, #F6D66E, #9D6500, transparent);
    box-shadow: 0 0 13px rgba(202, 138, 4, .48);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s .42s cubic-bezier(.16, 1, .3, 1);
}

.menu-divider::after {
    content: 'NAVIGATION  /  01—10';
    position: absolute;
    right: 0;
    top: -22px;
    font-family: 'Montserrat', sans-serif;
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: rgba(202, 138, 4, .58);
    opacity: 0;
    transition: opacity .7s .52s ease;
}

.mobile-menu-overlay.active .menu-divider::before {
    transform: scaleX(1);
}

.mobile-menu-overlay.active .menu-divider::after {
    opacity: 1;
}

/* Editorial navigation list */
.menu-links-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    counter-reset: mobile-nav-item;
}

.menu-link-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 11px;
    width: 100%;
    min-height: 66px;
    padding: 12px 4px 12px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(90deg, rgba(202, 138, 4, 0), rgba(202, 138, 4, 0));
    text-decoration: none !important;
    counter-increment: mobile-nav-item;
    opacity: 0;
    transform: translateX(-32px);
    -webkit-tap-highlight-color: transparent;
    transition: background .45s ease, border-color .45s ease, padding .45s cubic-bezier(.16, 1, .3, 1);
}

.menu-link-item::before {
    content: counter(mobile-nav-item, decimal);
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: 'Montserrat', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(202, 138, 4, .52);
    transition: color .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1), text-shadow .4s ease;
}

.menu-link-item::after {
    content: '↗';
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    font-family: 'Montserrat', sans-serif;
    font-size: .92rem;
    color: rgba(255, 255, 255, .18);
    transform: translate(-6px, 5px);
    transition: color .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1), text-shadow .4s ease;
}

.menu-link-item .link-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.55rem, 6.5vw, 1.85rem);
    font-style: normal;
    font-weight: 550;
    line-height: 1;
    letter-spacing: -.018em;
    color: rgba(255, 253, 248, .88) !important;
    transition: color .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1), text-shadow .4s ease;
}

.menu-link-item .link-subtitle {
    grid-column: 2;
    grid-row: 2;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .55rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: rgba(202, 138, 4, .58) !important;
    transition: color .4s ease, letter-spacing .45s ease;
}

.menu-link-item:hover,
.menu-link-item:focus-visible,
.menu-link-item:active,
.menu-link-item[aria-current='page'] {
    padding-left: 10px;
    border-color: rgba(202, 138, 4, .24);
    background: linear-gradient(90deg, rgba(202, 138, 4, .11), rgba(202, 138, 4, .025) 72%, transparent);
    outline: none;
}

.menu-link-item:hover::before,
.menu-link-item:focus-visible::before,
.menu-link-item[aria-current='page']::before {
    color: #F0C85A;
    transform: translateX(3px);
    text-shadow: 0 0 12px rgba(202, 138, 4, .6);
}

.menu-link-item:hover::after,
.menu-link-item:focus-visible::after,
.menu-link-item[aria-current='page']::after {
    color: #E8BC45;
    transform: translate(0, 0);
    text-shadow: 0 0 12px rgba(202, 138, 4, .5);
}

.menu-link-item:hover .link-title,
.menu-link-item:focus-visible .link-title,
.menu-link-item[aria-current='page'] .link-title {
    color: #FFFFFF !important;
    transform: translateX(3px);
    text-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 18px rgba(202, 138, 4, .13);
}

.menu-link-item[aria-current='page'] .link-title::after {
    content: '  •';
    color: #D9A91E;
    font-size: .65rem;
    vertical-align: middle;
}

.menu-link-item:hover .link-subtitle,
.menu-link-item:focus-visible .link-subtitle,
.menu-link-item[aria-current='page'] .link-subtitle {
    color: rgba(237, 193, 75, .9) !important;
    letter-spacing: .22em;
}

.mobile-menu-overlay.active .menu-link-item {
    animation: menuEditorialIn .82s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes menuEditorialIn {
    from { opacity: 0; transform: translateX(-32px); filter: blur(6px); }
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

.mobile-menu-overlay.active .menu-link-item:nth-child(1) { animation-delay: .29s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(2) { animation-delay: .34s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(3) { animation-delay: .39s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(4) { animation-delay: .44s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(5) { animation-delay: .49s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(6) { animation-delay: .54s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(7) { animation-delay: .59s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(8) { animation-delay: .64s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(9) { animation-delay: .69s; }
.mobile-menu-overlay.active .menu-link-item:nth-child(10) { animation-delay: .74s; }

/* Conversion area */
.menu-footer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
    margin-top: 27px;
    padding-bottom: 8px;
    opacity: 0;
    transform: translateY(22px);
}

.mobile-menu-overlay.active .menu-footer {
    animation: menuFooterIn .9s .78s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes menuFooterIn {
    to { opacity: 1; transform: translateY(0); }
}

.menu-footer a.btn-infinity-gold {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 62px;
    padding: 17px 20px 17px 24px !important;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(248, 216, 115, .7) !important;
    border-radius: 16px !important;
    background: linear-gradient(110deg, #F0C959, #C7890B 55%, #F4D472) !important;
    box-shadow: 0 18px 45px rgba(202, 138, 4, .22), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
    color: #0A0908 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease !important;
}

.menu-footer a.btn-infinity-gold::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -45%;
    width: 30%;
    height: 240%;
    transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    animation: menuCtaShine 4.5s 1.2s ease-in-out infinite;
}

.menu-footer a.btn-infinity-gold::after {
    content: '→';
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    margin-left: 15px;
    flex: 0 0 auto;
    border: 1px solid rgba(10, 9, 8, .22);
    border-radius: 50%;
    font-size: 1rem;
    letter-spacing: 0;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .4s ease;
}

@keyframes menuCtaShine {
    0%, 58% { left: -45%; }
    85%, 100% { left: 125%; }
}

.menu-footer a.btn-infinity-gold:hover,
.menu-footer a.btn-infinity-gold:focus-visible,
.menu-footer a.btn-infinity-gold:active {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 58px rgba(202, 138, 4, .34), 0 0 28px rgba(229, 184, 59, .16), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
    outline: none;
}

.menu-footer a.btn-infinity-gold:hover::after,
.menu-footer a.btn-infinity-gold:focus-visible::after {
    transform: translateX(4px);
    background: rgba(255, 255, 255, .25);
}

.menu-contact-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.menu-contact-info::before {
    content: 'DIREKTKONTAKT';
    font-family: 'Montserrat', sans-serif;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: rgba(202, 138, 4, .56);
}

.menu-contact-info a {
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, .52) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .35s ease, text-shadow .35s ease;
}

.menu-contact-info a:hover,
.menu-contact-info a:focus-visible {
    color: #E4B83E !important;
    text-shadow: 0 0 12px rgba(202, 138, 4, .35);
    outline: none;
}

@media (max-width: 1024px) {
    .nav-links-desktop { display: none !important; }
    .burger-menu { display: flex !important; }
}

@media (max-width: 480px) {
    .mobile-menu-overlay {
        padding-left: 18px;
        padding-right: 18px;
    }

    .mobile-menu-logo::after {
        font-size: .53rem;
        letter-spacing: .15em;
    }

    .menu-link-item {
        min-height: 63px;
        grid-template-columns: 33px minmax(0, 1fr) 21px;
        column-gap: 9px;
    }

    .menu-link-item .link-title {
        font-size: clamp(1.45rem, 7vw, 1.72rem);
    }

    .menu-contact-info::before {
        display: none;
    }

    .menu-contact-info {
        justify-content: center;
    }
}

@media (max-height: 720px) {
    .mobile-menu-overlay {
        padding-top: calc(88px + env(safe-area-inset-top));
    }

    .mobile-menu-logo {
        margin-bottom: 16px !important;
    }

    .mobile-menu-logo img {
        height: 42px !important;
    }

    .menu-link-item {
        min-height: 58px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .menu-footer {
        margin-top: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .burger-menu::before,
    .mobile-menu-overlay,
    .mobile-menu-overlay::before,
    .mobile-menu-overlay::after,
    .mobile-menu-logo,
    .menu-divider::before,
    .menu-link-item,
    .menu-footer,
    .menu-footer a.btn-infinity-gold::before {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .mobile-menu-overlay.active .mobile-menu-logo,
    .mobile-menu-overlay.active .menu-link-item,
    .mobile-menu-overlay.active .menu-footer {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* =====================================================================
   RECHTSLINKS IM MOBILMENUE
   ---------------------------------------------------------------------
   Das Menue enthielt 13 Links, aber keinen einzigen zum Impressum. Auf dem
   Handy war das Impressum damit nur ueber rund 7.000px Scrollen bis zum
   Seitenfuss erreichbar. § 5 DDG verlangt "leicht erkennbar und unmittelbar
   erreichbar"; eine Zeile im Menue macht daraus einen Fingertipp.

   Formsprache wie .menu-contact-info: kleine gesperrte Versalien als
   Rubrik, darunter die Links in gedaempftem Weiss.
   ===================================================================== */
.menu-recht {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.menu-recht::before {
    content: 'RECHTLICHES';
    flex: 0 0 100%;
    margin-bottom: 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: rgba(202, 138, 4, .56);
}

.menu-recht a {
    color: rgba(255, 255, 255, .58) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .64rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    text-decoration: none !important;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color .35s ease, border-color .35s ease;
}

.menu-recht a:hover,
.menu-recht a:focus-visible {
    color: rgba(240, 208, 95, .95) !important;
    border-bottom-color: rgba(202, 138, 4, .55);
}

/* Auf sehr schmalen Geraeten untereinander statt gequetscht nebeneinander */
@media (max-width: 360px) {
    .menu-recht { gap: 2px 12px; }
    .menu-recht a { font-size: .6rem !important; }
}

/* =====================================================================
   MOBILMENUE: FUSS DAUERHAFT SICHTBAR
   ---------------------------------------------------------------------
   Der Menueinhalt war hoeher als der Bildschirm: bei 390x844 waren es
   914px Inhalt in 844px Fenster. Unter der Kante lagen der letzte
   Navigationspunkt, die E-Mail-Adresse und - schwerwiegender - der
   Hauptknopf "Erstgespraech vereinbaren". Man musste im Menue scrollen,
   ohne dass etwas darauf hinwies.

   Statt die Eintraege zu stauchen, traegt jetzt nur die Linkliste den
   Ueberschuss: Logo oben und Menuefuss unten stehen fest, dazwischen
   scrollt die Navigation. Knopf, Kontakt und Rechtslinks sind damit auf
   jeder Geraetehoehe sofort sichtbar.

   min-height: 0 ist Pflicht - ohne das schrumpft ein Flex-Kind nicht
   unter seinen Inhalt und overflow bleibt wirkungslos.
   ===================================================================== */
html body .mobile-menu-overlay {
    align-items: stretch;
    overflow-y: hidden;
}

html body .mobile-menu-content {
    min-height: 0;
    height: 100%;
}

html body .menu-links-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 138, 4, .45) transparent;
}

html body .menu-links-wrapper::-webkit-scrollbar { width: 3px; }
html body .menu-links-wrapper::-webkit-scrollbar-thumb {
    background: rgba(202, 138, 4, .45);
    border-radius: 3px;
}

html body .menu-footer {
    flex: 0 0 auto;
}

/* Kurze Geraete: der feste Kopf- und Fussbereich liess der Navigation bei
   320x568 nur 162px Scrollfenster fuer zehn Eintraege. Auf niedrigen
   Bildschirmen ruecken Kopfabstand und Menuefuss enger zusammen, damit die
   Liste mehr Raum bekommt. Auf normalen Geraeten aendert sich nichts. */
@media (max-height: 720px) {
    html body .mobile-menu-overlay {
        padding-top: calc(70px + env(safe-area-inset-top));
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }
    html body .menu-footer { margin-top: 16px; gap: 12px; }
    html body .menu-footer a.btn-infinity-gold { min-height: 54px; padding-top: 13px !important; padding-bottom: 13px !important; }
    html body .menu-recht { padding-top: 10px; gap: 4px 12px; }
}

/* Sehr niedrig: die E-Mail-Adresse steht identisch im Seitenfuss und
   weicht hier zugunsten der Navigation. Die Rechtszeile bleibt - sie ist
   der einzige kurze Weg zum Impressum. */
@media (max-height: 620px) {
    html body .menu-contact-info { display: none; }
    html body .mobile-menu-logo { transform: scale(.85); transform-origin: left center; }
}