/* ============================================================
   MARKETING — the public surface in front of the gate (issue #341).

   A second surface of the same product, not a separate brand: every colour
   and font here is one of app.css's own custom properties, so light/dark and
   the type roles (--disp system, --mono machine, --prose broadcaster) stay
   exactly what they mean in the app. What's added is page-specific layout
   only — a scrolling one-pager with a wordmark that doubles as a live grep
   box, ported from a validated interaction prototype: nav clicks TYPE the
   target section into the wordmark's slash gap, manual scroll swaps it
   instantly (scrollspy), and the search icon (or clicking the gap itself)
   turns the gap into a real DOM text search over the page's own content.
   ============================================================ */

/* `height:auto` is load-bearing: app.css sets `html,body{height:100%}`, which
   pins body's box to one viewport while its content runs far past it — and a
   sticky child can only stick inside its containing block, so the header slid
   away after the first screen. Letting body grow with its content is what
   makes `.mk-head`'s sticky span the whole scroll. */
body.mk{
  background:var(--paper);color:var(--ink);
  font-family:var(--prose);font-size:var(--fs-15);line-height:1.4;
  height:auto;min-height:100%;
}

/* ---------- header ---------- */
/* Sticky, so the gap is watched all the way down — and a sticky header is a
   strip the page can never scroll out from under. Hence `--mk-head-h`: the
   header's own measured height (marketing.js keeps it current through a
   ResizeObserver), which every section wears as `scroll-margin-top` so a nav
   click, a `#hash` and an in-page link all land the section's top edge just
   BELOW the header rather than beneath it. The header's height is not a
   constant: it is one row on a desk and two on a phone. */
.mk-head{
  position:sticky;top:0;z-index:var(--z-bar);
  display:flex;align-items:baseline;gap:var(--sp-5) var(--sp-10);flex-wrap:wrap;
  padding:11px 20px 10px;border-bottom:1px solid var(--rule);
  background:var(--sheet);
}
.mk-brand{display:flex;align-items:baseline;gap:var(--sp-7);min-width:0}
.mk-wordmark{
  font-family:var(--disp);font-variation-settings:"wdth" 125;
  font-weight:800;font-size:22px;letter-spacing:.005em;line-height:1;
  color:var(--ink);white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:baseline;min-width:0;
}
.mk-wordmark em{font-style:normal;color:var(--match)}
.mk-sep{color:var(--ink-3);margin:0 .04em;font-weight:400}
/* The gap text is the search TERM, and it stays --ink-3 like the slashes it
   sits between: the spot colour marks what the page found, never the query. */
#mkPatHolder{
  color:var(--ink-3);font-family:var(--mono);font-size:var(--fs-14);font-weight:600;
  display:inline-block;min-width:0;cursor:text;max-width:34vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:baseline;
}
.mk-head.mk-typing .mk-wordmark #mkPatHolder,
.mk-head.mk-typing .mk-wordmark .mk-q{
  border-right:2px solid var(--ink-3);padding-right:1px;
}
.mk-q{
  font:600 var(--fs-14) var(--mono);color:var(--ink-3);background:transparent;border:0;
  border-bottom:1px dashed var(--ink-3);outline:0;padding:0 1px;
  width:1ch;vertical-align:baseline;
}
.mk-hits{
  font-family:var(--mono);font-size:var(--fs-7);color:var(--ink-2);white-space:nowrap;
  min-width:3.5ch;
}
.mk-nav{display:flex;align-items:baseline;gap:var(--sp-10);margin-left:auto;font-family:var(--disp);font-size:var(--fs-12);flex-wrap:wrap}
.mk-nav button{background:none;border:0;cursor:pointer;color:var(--ink-2);font:inherit;padding:.2rem .1rem}
.mk-nav button:hover{color:var(--ink)}
.mk-nav button mark{background:var(--match);color:#fff;padding:0 1px}
/* search, theme and sign-in: one group of plain icon controls, kept off the
   wordmark and glued to the header's right edge on every width. No button
   chrome at all — no background, no border — in either state: a `<button>`
   carries a UA default box/border unless it is reset explicitly (the bug
   behind the grey square the magnifying glass used to sit in), so every
   control in the group is reset through this one selector rather than
   per-control, so a fourth tool can't reintroduce it by omission. */
.mk-tools{display:flex;align-items:center;gap:var(--sp-5)}
.mk-tools>*{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;background:none;border:0;padding:0;margin:0;
  color:var(--ink);cursor:pointer;text-decoration:none;
}
.mk-tools>*:hover{color:var(--match)}
.mk-tools>*:focus-visible{outline:2px solid var(--match);outline-offset:1px}
.mk-tools svg{display:block}
/* Narrow: the nav is the row that drops, and it drops as a whole (`order`
   sends it after the tools, `flex-basis:100%` gives it the row to itself),
   so row one is always wordmark … search · theme · sign-in. The breakpoint
   is where one row stops fitting the widest gap text plus all five labels. */
@media (max-width:900px){
  .mk-head{gap:var(--sp-4) var(--sp-6);padding:var(--sp-5) var(--sp-8) var(--sp-4)}
  /* `flex:1 1 0`: the wordmark group's line-breaking size is ZERO, so the
     tools can never be pushed off row one; the group then grows into the
     room that is left, and when that is less than it wants, the one thing in
     it that may give is the gap text (#mkPatHolder: min-width:0, ellipsis).
     A long term on a narrow phone reads `impress…` — the tools stay. */
  .mk-brand{gap:var(--sp-5);flex:1 1 0}
  .mk-hits{flex:none}
  .mk-hits:empty{display:none}
  .mk-tools{flex:none;margin-left:auto;gap:var(--sp-3)}
  .mk-nav{order:3;flex-basis:100%;margin-left:0;gap:var(--sp-7);font-size:var(--fs-11)}
}
@media (max-width:420px){
  .mk-head{padding:var(--sp-5) var(--sp-6) var(--sp-4)}
  .mk-wordmark{font-size:var(--fs-17)}
}

/* ---------- sections ---------- */
main{display:block}
/* Full viewport height, even the short ones (Contact, Impressum): a nav click
   scrollIntoView({block:'start'}) on the LAST section can only reach the top
   of the viewport if there is at least one viewport of room below it, or the
   browser clamps the scroll short of the target and the section lands lower
   than intended. */
.mk-sec{
  min-height:100vh;padding:64px 20px;max-width:640px;margin:0 auto;
  border-bottom:1px solid var(--rule);
  scroll-margin-top:var(--mk-head-h,0px);
}
.mk-sec:last-child{border-bottom:0}
.mk-idx{
  font-family:var(--disp);font-variation-settings:"wdth" 125;font-weight:800;
  font-size:var(--fs-7);color:var(--match);letter-spacing:.08em;margin-bottom:var(--sp-3);
}
.mk-sec h1{
  font-family:var(--disp);font-variation-settings:"wdth" 125;font-weight:800;
  font-size:clamp(28px,4.5vw,38px);line-height:1.12;margin:.1em 0 .6em;color:var(--ink);
}
.mk-sec p{margin:0 0 1em;color:var(--ink)}
.mk-sec p:last-child{margin-bottom:0}
.mk-lead{font-size:1.15em;line-height:1.55}
.mk-sec a{border-bottom:1px solid var(--rule)}
.mk-sec a:hover{border-color:var(--match);color:var(--match)}
.mk-wm-inline{font-family:var(--disp);font-weight:800}
.mk-note{font-size:.85em;color:var(--ink-2)}

/* ---------- FAQ ---------- */
.mk-faq{margin:0}
.mk-faq-item{padding:var(--sp-8) 0;border-top:1px solid var(--rule)}
.mk-faq-item:first-child{border-top:0;padding-top:0}
.mk-faq dt{
  font-family:var(--disp);font-weight:700;font-size:1.05em;color:var(--ink);
  margin-bottom:.4em;
}
.mk-faq dd{margin:0;color:var(--ink);line-height:1.6}
.mk-faq code{font-family:var(--mono);font-size:.9em;color:var(--match)}

/* ---------- product screenshots ---------- */
.mk-shot{margin:1.6em 0;border:1px solid var(--rule);background:var(--sheet)}
.mk-shot img{display:block;width:100%;height:auto}
.mk-shot figcaption{
  font-family:var(--mono);font-size:var(--fs-7);color:var(--ink-2);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--rule);
}
#mkShotDark{display:none}
:root[data-theme=dark] #mkShotDark{display:block}
:root[data-theme=dark] #mkShotLight{display:none}

/* ---------- contact ---------- */
.mk-contact-addr{font-family:var(--mono);font-size:1.1em}

/* ---------- impressum ---------- */
.mk-incomplete{
  border:1px solid var(--rule);border-left:3px solid var(--match);
  background:var(--shade);padding:var(--sp-5) var(--sp-7);margin-bottom:1.4em;
}
.mk-impressum{margin:0}
.mk-impressum dt{
  font-family:var(--disp);font-weight:700;font-size:.85em;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-3);margin:1.2em 0 .3em;
}
.mk-impressum dt:first-child{margin-top:0}
.mk-impressum dd{margin:0;color:var(--ink);line-height:1.5}

/* ---------- real search hit marks ---------- */
mark.hit{background:color-mix(in srgb, var(--match) 22%, transparent);color:inherit}
mark.hit.current{background:var(--match);color:#fff}