/* ============================================================================
   shell.css · global site chrome (nav + footer)
   Single source of truth for the header navigation and the rich site footer,
   shared across every page incl. the blog generator output. Loaded AFTER
   tokens.css and BEFORE each page's own inline <style>, so per-page styles
   never need to redefine the nav/footer. Markup lives in partials/nav.html and
   partials/footer.html, injected by scripts/build-shell.mjs + build-blog.mjs.
   ========================================================================== */

/* ----- top navigation ----- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--surface-glass); backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid var(--border);
  transition: box-shadow .28s var(--ease-premium), background .25s ease; }
.nav.scrolled { box-shadow: 0 6px 22px rgba(10,37,64,.08); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; transition: height .26s var(--ease-premium); }
.nav.scrolled .nav-in { height: 54px; }
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 40px; width: auto; transition: height .26s var(--ease-premium); }
.nav.scrolled .brand img { height: 34px; }
.nav-right { display: flex; align-items: center; gap: .75rem; }
.nav-links { display: none; gap: .55rem; margin-right: .4rem; }
@media (min-width: 820px){ .nav-links { display: flex; } }
/* i18n-stable: fixed slots so EN/DE labels never shift the layout (centered within slot) */
.nav-links a { font: 600 .9rem var(--sans); color: var(--text-soft); transition: color .2s; min-width: 5.1rem; text-align: center; }
.nav-links a.on, .nav-links a:hover { color: var(--text); }
.lang { display: flex; gap: 3px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang a { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; color: var(--text-soft); font: 600 .8rem var(--sans); transition: background .2s var(--ease-snap), color .2s; }
.lang a img { width: 18px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.lang a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.lang a:hover:not(.on) { color: var(--text); }
.nav .btn { padding: 9px 16px; min-height: 44px; font-size: .9rem; }
.nav-cta-text { display: none; }
@media (min-width: 560px){ .nav-cta-text { display: inline; } .nav .btn { min-width: 10.5rem; justify-content: center; } }
/* Touch tap-targets >= 44px on mobile */
@media (max-width: 559px){
  .lang a { min-height: 44px; padding: 8px 13px; }
  .nav .btn { min-width: 44px; padding: 11px 14px; }
}

/* ----- rich site footer ----- */
.site-footer { padding: clamp(48px,6vw,72px) 0 30px; border-top: 1px solid var(--border); background: var(--bg-warm); color: var(--text-soft); font-size: .92rem; }
.foot-grid { display: grid; gap: clamp(28px,4vw,48px); grid-template-columns: 1fr; }
@media (min-width:680px){ .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot-brand .b { display: flex; align-items: center; margin-bottom: 12px; }
.foot-brand .b img { display: block; height: 42px; width: auto; }
.foot-brand p { margin: 0 0 6px; line-height: 1.6; max-width: 38ch; }
.foot-brand a { color: var(--accent-deep); font-weight: 600; }
.foot-col h3 { font: 700 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin: 0 0 12px; }
.foot-col a { display: block; color: var(--text-soft); padding: 4px 0; transition: color .2s; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { margin-top: clamp(32px,4vw,48px); padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; font: 600 .8rem var(--sans); color: var(--text-soft); letter-spacing: .02em; }