/* Additional website directory; preserves the personal site's visual language. */
.header .menu-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid currentColor;border-radius:24px;white-space:nowrap;background:transparent;font-size:12px;font-weight:700}.menu-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}.menu-button[aria-expanded=true]{background:var(--ink);color:var(--yellow)}.header>.hello{gap:14px}.header>nav[aria-label=Hauptnavigation]{gap:clamp(14px,2vw,28px)}.header #mobile-nav{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;background:var(--ink);color:var(--paper);padding:28px var(--pad) 32px;border-bottom:3px solid var(--yellow);box-shadow:0 18px 40px #0004;max-height:calc(100dvh - 105px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.nav-group{min-width:0}.nav-group h2{font:700 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid #ffffff25}.header #mobile-nav .nav-group a{font-size:12px;line-height:1.4;font-weight:400;min-height:44px;padding:10px 0;display:flex;white-space:normal;overflow-wrap:anywhere}.header #mobile-nav .nav-group a:hover{color:var(--yellow)}.header #mobile-nav a::after{display:none}.header #mobile-nav a[aria-current=location]{color:var(--yellow)}.nav-group a.nav-primary{font-weight:700!important}.nav-top-link{display:block;font-weight:700;font-size:13px;margin-bottom:12px;color:var(--yellow)}
@media(max-width:1200px){.header>nav[aria-label=Hauptnavigation]{display:none}.header>.hello{margin-left:auto}.header #mobile-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 40px}.header #mobile-nav .nav-group a{font-size:14px}}
@media(max-width:720px){.header>.hello{display:none}.header #mobile-nav{grid-template-columns:1fr;gap:26px;max-height:calc(100dvh - 85px);padding:22px var(--pad) 28px}.header #mobile-nav .nav-group a{font-size:15px}.header .menu-button{font-size:12px}.nav-group h2{font-size:11px}.header{gap:12px}}

/* Grouped, indented navigation with an optional pointer spotlight. */
.header #mobile-nav{gap:16px;align-items:start;padding-top:20px;padding-bottom:24px;background:#151b1e}
.nav-group{position:relative;isolation:isolate;overflow:hidden;padding:16px 12px 12px;border:1px solid #ffffff14;border-top:2px solid var(--nav-accent);border-radius:8px;background:color-mix(in srgb,var(--nav-accent) 3%,#151b1e)}
.nav-group h2{position:relative;display:flex;align-items:center;gap:10px;color:var(--nav-accent);padding:0 4px 13px;margin:0 0 8px;border-color:color-mix(in srgb,var(--nav-accent) 22%,transparent);min-height:36px}
.nav-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.nav-group h2 .nav-icon{width:21px;height:21px;flex-basis:21px}
.header #mobile-nav .nav-group a{position:relative;align-items:center;gap:10px;margin-left:12px;padding:10px 9px 10px 13px;border-left:1px solid color-mix(in srgb,var(--nav-accent) 24%,transparent);border-radius:0 5px 5px 0;transition:background .16s,color .16s,translate .16s;color:#e2e9e6}
.nav-link-text{min-width:0;flex:1}.header #mobile-nav .nav-group a .nav-icon{color:var(--nav-accent);opacity:.8}
.header #mobile-nav .nav-group a:hover,.header #mobile-nav .nav-group a:focus-visible{color:var(--nav-accent);background:color-mix(in srgb,var(--nav-accent) 11%,transparent);border-left-color:var(--nav-accent)}
.header #mobile-nav .nav-group a:focus-visible{outline:2px solid var(--nav-accent);outline-offset:-2px}
.header #mobile-nav .nav-group a[aria-current=location]{color:var(--nav-accent)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .nav-group::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(180px circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in srgb,var(--nav-accent) 14%,transparent),transparent 85%);transition:opacity .2s}
 .nav-group.pointer-active::before{opacity:1}.header #mobile-nav .nav-group a:hover{translate:3px 0}
}
@media(max-width:720px){.header #mobile-nav{gap:14px}.nav-group{padding:16px 13px 12px}.header #mobile-nav .nav-group a{font-size:14px;padding-top:11px;padding-bottom:11px}.nav-group h2{font-size:11px}}
@media(prefers-reduced-motion:reduce){.header #mobile-nav .nav-group a,.nav-group::before{transition:none;translate:none}}