/* lever: gemeinsame Navigation mit Mega-Menü, Handy-Menü und Fußzeile für alle Seiten.
   Das Markup steht nur in _partials/nav.html und _partials/footer.html.
   Nach jeder Änderung dort: node _partials/sync.cjs (setzt es in alle Seiten ein).
   Nutzt die Tokens jeder Seite: --bg --soft --ink --ink2 --ink3 --line --o1 --o2 --o3 --grad --display --ui */

[id]{scroll-margin-top:88px}
html.nav-lock{overflow:hidden}

/* Leiste */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);font-family:var(--ui);color:var(--ink);background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--line)}
.nav.mm-open,.nav.mob-open{background:#fff}
.nav-in{width:min(1180px,100% - 40px);margin-inline:auto;height:68px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px}
.brand b{font-family:var(--display);font-weight:400;font-size:25px;letter-spacing:-.04em;line-height:1}
.brand .by{display:flex;align-items:center;gap:8px;margin-left:4px;padding-left:12px;border-left:1px solid var(--line);height:32px}
.brand .by small{font-size:12px;color:var(--ink3)}
/* Schwarze Logo-Datei statt Farbfilter: Filter rastern die Vektorgrafik und machen sie bei kleiner Größe unscharf */
.brand .by img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:6px}
.nav-link{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;white-space:nowrap;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;color:var(--ink2);text-decoration:none;cursor:pointer;transition:background-color 180ms ease,color 180ms ease}
.nav-link:hover,.nav-link[aria-expanded="true"],.nav-link.is-current{color:var(--ink);background:rgba(11,11,11,.05)}
.nav-link svg{transition:transform 240ms cubic-bezier(.23,1,.32,1)}
.nav-link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-lang{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:44px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--ink2);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:color 180ms ease,box-shadow 180ms ease}
.nav-lang:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(11,11,11,.3)}
.nav-cta{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:#0b0b0b;color:#fff;font-size:13.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;transition:background-color 180ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.nav-cta:hover{background:#262624}
.nav-cta:active{transform:scale(.97)}
.nav-burger{display:none;width:42px;height:42px;margin-right:-8px;border:0;border-radius:12px;background:none;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.nav-burger span{position:relative;display:block;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:background-color 160ms ease}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform 260ms cubic-bezier(.23,1,.32,1)}
.nav-burger span::before{transform:translateY(-6px)}
.nav-burger span::after{transform:translateY(6px)}
.nav-burger[aria-expanded="true"] span{background:transparent}
.nav-burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}
.nav :focus-visible{outline:2px solid var(--o2);outline-offset:2px}

/* Mega-Menü Apps */
.mm-panel{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 1px 0 var(--line),0 34px 60px -34px rgba(0,0,0,.24);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity 180ms ease,transform 240ms cubic-bezier(.23,1,.32,1),visibility 0s linear 240ms}
.nav.mm-open .mm-panel{visibility:visible;opacity:1;transform:none;transition:opacity 180ms ease,transform 240ms cubic-bezier(.23,1,.32,1),visibility 0s}
.mm-in{width:min(1180px,100% - 40px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,3vw,48px);padding:26px 0 28px}
.mm-feature{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-content:start;padding:24px;border-radius:22px;background:var(--soft)}
.mm-feature img{width:56px;height:56px;filter:drop-shadow(0 10px 18px rgba(242,60,0,.28))}
.mm-st{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.mm-st i{width:7px;height:7px;border-radius:50%;background:var(--o3)}
.mm-title{display:block;margin-top:8px;font-family:var(--display);font-weight:400;font-size:23px;letter-spacing:-.025em;line-height:1.15;color:var(--ink);text-decoration:none}
.mm-title:hover{color:var(--o1)}
.mm-feature p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink2)}
.mm-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.mm-sub a{padding:7px 13px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--ink);text-decoration:none;transition:box-shadow 180ms ease}
.mm-sub a:hover{box-shadow:inset 0 0 0 1px rgba(11,11,11,.28)}
.mm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;align-content:start}
.mm-group{display:grid;gap:2px;align-content:start;min-width:0}
.mm-h{padding:4px 12px 8px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mm-app{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start;padding:12px;border-radius:16px;color:var(--ink);text-decoration:none;transition:background-color 180ms ease}
.mm-app:hover{background:var(--soft)}
.mm-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 10px 20px -12px rgba(242,60,0,.75)}
.mm-group.plan .mm-ic{background:var(--soft);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.mm-ic svg{width:19px;height:19px}
.mm-app b{display:block;font-size:14.5px;font-weight:500;line-height:1.3}
.mm-app small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink3)}
.mm-foot{border-top:1px solid var(--line)}
.mm-foot-in{width:min(1180px,100% - 40px);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;font-size:13px;color:var(--ink3)}
.mm-foot-links{display:flex;gap:22px;flex-wrap:wrap}
.mm-foot-links a{color:var(--ink);font-weight:500;text-decoration:none}
.mm-foot-links a:hover{text-decoration:underline;text-underline-offset:3px}

/* Handy-Menü */
.nav-mobile{position:absolute;left:0;right:0;top:100%;height:calc(100vh - 68px - env(safe-area-inset-top,0px));height:calc(100dvh - 68px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:6px max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity 180ms ease,transform 240ms cubic-bezier(.23,1,.32,1),visibility 0s linear 240ms}
.nav.mob-open .nav-mobile{visibility:visible;opacity:1;transform:none;transition:opacity 180ms ease,transform 240ms cubic-bezier(.23,1,.32,1),visibility 0s}
.nav-mobile .mm-feature{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px;margin-top:6px}
.nav-mobile .mm-feature img{width:48px;height:48px}
.nav-mobile .mm-title{font-size:21px}
.mob-h{margin:22px 0 4px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mob-apps{display:grid;gap:14px;margin-top:14px}
.mob-apps .mm-h{padding-left:12px}
.mob-links{margin-top:18px;border-top:1px solid var(--line)}
.mob-link{display:flex;align-items:center;min-height:58px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:21px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mob-cta{display:flex;align-items:center;justify-content:center;height:52px;margin-top:24px;border-radius:999px;background:#0b0b0b;color:#fff;font-size:15px;font-weight:500;text-decoration:none}

@media(max-width:1180px){.brand .by{display:none}}
@media(max-width:1020px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .mm-panel{display:none}
}
@media(max-width:440px){.nav-cta{display:none}}
@media(min-width:1021px){.nav-mobile{display:none}}

/* Fußzeile */
.site-foot{border-top:1px solid var(--line);background:var(--bg);padding:36px 0 calc(36px + env(safe-area-inset-bottom,0px));font-family:var(--ui);font-size:13px;color:var(--ink3)}
.foot-in{width:min(1180px,100% - 40px);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand img{width:26px;height:26px}
.foot-brand b{font-size:20px}
.site-foot a{color:inherit;text-decoration:none;transition:color 180ms ease}
.site-foot a:hover,.site-foot a[aria-current="page"]{color:var(--ink)}
.site-foot .foot-brand,.site-foot .wc{color:var(--ink)}
.foot-nav{display:flex;gap:24px;flex-wrap:wrap}
.site-foot :focus-visible{outline:2px solid var(--o2);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .mm-panel,.nav-mobile,.nav-link svg,.nav-burger span::before,.nav-burger span::after{transition:none!important}
}