/* ── Page chrome: the floating pill and the footer ─────────────────────────
   Every page's nav and footer, once. Before this file each page carried its
   own prefixed twin (.v6-*, .kt-*, .ab-*, .lg-*) of the same rules, and they
   had drifted: the home page hover-faded the DE button and no other page did,
   its footer broke to two columns at 860px against 820px elsewhere, and its
   wrap was 1200px wide against 1100px. The markup is shared too, in
   `_src/_partials/`, so a change here cannot reach four pages and miss one.

   Loaded after site.css and before the page's own stylesheet. */

/* ── the pill ───────────────────────────────────────────────────────────── */
.mk-navbar{position:sticky;top:16px;z-index:40;display:flex;justify-content:center;padding:16px 20px 0;pointer-events:none}
.mk-pill{
  pointer-events:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  background:var(--mk-pill-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--mk-pill-border);border-radius:999px;padding:8px 8px 8px 20px;
  box-shadow:var(--shadow-lg),var(--mk-pill-ring)
}
.mk-pill nav{display:flex;gap:clamp(14px,1.6vw,26px)}
.mk-pill nav a{font:var(--fw-medium) 14px/1 var(--font-sans);color:var(--text-secondary);transition:color .2s}
.mk-pill nav a:hover,.mk-pill nav a.active{color:var(--text-primary)}
@media(max-width:820px){.mk-pill nav{display:none}}

/* The pill floats over whatever the page is showing, and on the home page that
   is the hero mock: a near-black rectangle. A translucent card fill over it
   left the pill with no visible edge, and the edge it did have changed with
   whatever scrolled underneath — the "irgendwie ändert sie sich leicht". So
   the fill is opaque enough to read as one surface at any scroll position and
   the border is paired with a hairline ring that does not depend on contrast
   with the backdrop. Both themes, same construction. */
:root{--mk-pill-bg:color-mix(in srgb,var(--surface-card) 94%,transparent);
  --mk-pill-border:var(--border-subtle);
  --mk-pill-ring:0 0 0 1px rgba(20,16,10,.06)}
.mk-dark{--mk-pill-bg:color-mix(in srgb,var(--warm-900) 96%,transparent);
  --mk-pill-border:rgba(242,236,225,.14);
  --mk-pill-ring:0 0 0 1px rgba(0,0,0,.6)}

.mk-lock{display:inline-flex;align-items:baseline;text-decoration:none;gap:0}
.mk-lockm{font:var(--fw-heavy) 22px/1 var(--font-display);color:var(--brand-500);letter-spacing:-0.03em}
.mk-lockw{font:var(--fw-heavy) 22px/1 var(--font-display);color:var(--text-primary);letter-spacing:-0.03em}

.mk-lang{border:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);font:var(--fw-semibold) 12px/1 var(--font-sans);letter-spacing:.04em;padding:9px 11px;border-radius:999px;cursor:pointer;transition:background .2s}
.mk-lang:hover{background:var(--surface-sunken)}
.mk-tog{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-subtle);background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:background .2s,transform .3s;flex:none}
.mk-tog:hover{transform:rotate(-18deg);background:var(--surface-sunken)}
.mk-tog svg{width:16px;height:16px}

/* ── the footer ─────────────────────────────────────────────────────────── */
.mk-foot{background:var(--brand-600);color:#fff;padding:56px 0 40px;margin-top:auto}
.mk-footwrap{max-width:1100px;margin:0 auto;padding:0 clamp(24px,5vw,60px);width:100%}
.mk-footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.mk-foot-blurb{margin:18px 0 0;max-width:280px;font:var(--text-body-sm);color:rgba(255,255,255,.92)}
.mk-foot-head{font:var(--fw-semibold) 13px/1 var(--font-sans);color:rgba(255,255,255,.78);margin:0 0 16px}
.mk-foot-links{display:flex;flex-direction:column;gap:12px}
.mk-foot-links a{font:var(--text-body-sm);color:rgba(255,255,255,.92)}
.mk-foot-links a:hover{color:#fff}
.mk-foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:var(--text-caption);color:rgba(255,255,255,.88)}
@media(max-width:820px){.mk-footgrid{grid-template-columns:1fr 1fr}}

/* ── The ink sections ──────────────────────────────────────────────────────
   "How we work" on the home page and "Our mission" on the about page are dark
   blocks that sit inside a light page. Both hard-coded `background:var(--warm-950)`
   inline — and in dark mode `--surface-page` IS `--warm-950`, so the section and
   the page became the same colour and the block stopped existing. Hence one
   class, used by both, that lifts the surface off the page in dark mode and
   draws its own edge: a hairline ring plus a soft brand bloom, so the block is
   still a block when there is no contrast to borrow. */
.mk-ink{
  position:relative;background:var(--warm-950);color:var(--text-on-dark);
  border-radius:clamp(28px,4vw,48px) clamp(28px,4vw,48px) 0 0;
}
.mk-dark .mk-ink{
  background:#14110C;                      /* lifted off the --warm-950 page */
  box-shadow:inset 0 1px 0 rgba(242,236,225,.10),
             0 -1px 0 rgba(242,236,225,.07),
             0 -30px 70px -40px rgba(79,116,255,.55);
}
/* The bloom reads as light spilling over the top edge rather than a border,
   which is what keeps it from looking like a card on a page of cards. */
.mk-dark .mk-ink::before{
  content:"";position:absolute;left:8%;right:8%;top:-1px;height:170px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(79,116,255,.20),transparent 72%);
  pointer-events:none;border-radius:inherit;
}
@media(prefers-reduced-motion:reduce){.mk-ink::before{display:none}}