/* ════════════════════════════════════════════════════════════════════════
   Mobile — every rule on this page, in one place, loaded last.

   The prototypes were drawn on an 1100–1200px canvas and only ever rendered
   there, so none of this existed. Everything below was measured in a real
   390×740 viewport in Chrome, not assumed, and each block says what it fixes.

   This file loads AFTER site.css and the page's own stylesheet on purpose:
   several of these override a rule of the same specificity (.mk-tog's 34px
   box, say), and load order is what decides those.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared ─────────────────────────────────────────────────────────────── */
/* The floating nav is sticky, so an anchor jump (#work, #build, #how) landed
   underneath it. */
html{scroll-padding-top:104px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Touch targets. The pill's controls were 34×34 and 41×32, and the footer
   links were 22px tall — all under the 44px minimum for a finger. Gated on
   width, not `hover:none`: a phone-sized viewport is the reliable signal, and
   `hover:none` is untestable in a desktop browser. */
@media(max-width:820px){
  [data-toggle-theme]{width:44px;height:44px}
  [data-toggle-lang]{min-width:44px;min-height:44px;padding:0 13px}
  .mk-btn--sm{height:44px;padding:0 18px}
  /* The padding is the tap target. 11px put every footer link on a 44px
     pitch — the AAA touch minimum — and four of them in a column then read as
     a very airy list with no relationship between the items. 6px brings the
     pitch to ~34px, which is still well clear of the 24px WCAG 2.2 AA floor
     (2.5.8) and reads as a list again. The 44px targets are kept where the
     stakes are higher: the pill's controls, the CTA and the legal links. */
  .mk-foot-links{gap:0}
  .mk-foot-links a{display:block;padding:6px 0}
  .mk-legal-link{display:inline-block;padding:13px 0}
  .kt-chip{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .v6-cta-mail{display:inline-block;padding:14px 0}
  .kt-dv a{display:inline-block;padding:12px 0;margin:-12px 0}
  /* the wordmark is the only way back to the homepage from a subpage */
  .mk-lock{padding:11px 0}
}

/* ── Mobile menu ───────────────────────────────────────────────────────────
   Below 820px the prototypes set the pill's nav to `display:none` and offered
   nothing in its place, so Work / What we build / How we work / About us could
   not be reached from a phone at all. site.js moves those same links into the
   sheet below — it does not copy them, so there is one list to keep right.
   The pill keeps only the wordmark, the two toggles and the menu button, which
   also fixes its fixed 373px width overflowing a 360px screen. */
.mk-burger{display:none}

@media(max-width:820px){
  .mk-burger{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;
    border:1px solid var(--border-subtle);border-radius:50%;
    background:transparent;color:var(--text-primary);cursor:pointer;
  }
  .mk-burger:hover{background:var(--surface-sunken)}
  .mk-burger span{
    display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;
    transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);
  }
  .mk-burger span+span{margin-top:4px}
  [data-menu-open] .mk-burger span:first-child{transform:translateY(2.75px) rotate(45deg)}
  [data-menu-open] .mk-burger span:last-child{transform:translateY(-2.75px) rotate(-45deg)}

  /* the pill's own CTA is redundant once the sheet carries one */
  [data-navbar]>*>.mk-btn{display:none}
  .mk-pill{gap:10px;padding:8px 8px 8px 16px}
}

.mk-sheet{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);
  padding:clamp(24px,8vw,48px);
  background:var(--surface-page);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease-out),visibility var(--dur) var(--ease-out);
}
[data-menu-open] .mk-sheet{opacity:1;visibility:visible}
/* the sheet's own nav is a clone of the pill's, so it must not inherit the
   pill's row layout */
.mk-sheet nav{display:block}
.mk-sheet a{
  display:block;padding:14px 0;
  font:var(--fw-semibold) clamp(26px,7vw,34px)/1.2 var(--font-display);
  letter-spacing:-0.02em;color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
}
/* the CTA is a button, not one of the list links above it */
.mk-sheet .mk-btn{
  display:flex;margin-top:var(--space-6);width:100%;border-bottom:0;
  height:54px;padding:0 28px;
  font:var(--fw-semibold) var(--fs-body)/1 var(--font-sans);letter-spacing:0.01em;
}
.mk-sheet .mk-btn:hover{transform:none}
/* the pill stays above the sheet so its button — now an X — still closes it */
[data-menu-open] [data-navbar]{z-index:70}
/* the sheet is the whole screen, so the page behind it must not scroll */
body.mk-menu-locked{overflow:hidden}

/* Without JavaScript there is no sheet to open, so let the pill's own links
   wrap rather than leaving a phone with no navigation at all. */
.mk-nojs [data-navbar] nav{display:flex;flex-wrap:wrap}
.mk-nojs .mk-burger{display:none}

/* ── Homepage ───────────────────────────────────────────────────────────── */
/* The three case studies had their two-column split written inline, with no
   breakpoint, so on a phone Road Lens got a 178px image column against a 132px
   text column and the copy broke to one word per line. The mirrored one puts
   its text first in the DOM; on one column the image leads, like the other two. */
@media(max-width:860px){
  .v6-case{grid-template-columns:1fr!important;gap:clamp(20px,5vw,32px)!important}
  .v6-case--flip>*:last-child{order:-1}
  .v6-case>*{padding-left:0!important;padding-right:0!important}
}

/* Four columns of 65px, one or two words per line. */
@media(max-width:860px){.v6-steps{grid-template-columns:1fr 1fr!important;gap:32px 22px!important}}
@media(max-width:420px){.v6-steps{grid-template-columns:1fr!important;gap:28px!important}}

/* The problem cards carried a staggered margin-top (44px / -8px / 36px) so the
   two desktop columns interleaved. In one column that is just uneven gaps. */
@media(max-width:860px){.v6-cols2 .v6-fix{margin-top:0!important}}

/* The same cards, stacked, ran the full column width — four identical
   full-bleed blocks with nothing to tell one from the next. Narrowing them
   slightly and alternating which edge they sit against restores the desktop
   stagger in the one dimension a phone has. The inset is small on purpose: it
   should read as rhythm, not as a card that failed to fit. */
@media(max-width:860px){
  .v6-cols2 .v6-fix{width:93%}
  .v6-cols2 .v6-fix:nth-child(odd){margin-right:auto}
  .v6-cols2 .v6-fix:nth-child(even){margin-left:auto}
}

/* The statement between the two sections is the beat between them, and at
   phone width it was closing up against the last card. */
@media(max-width:820px){
  .v6-turn{margin-top:clamp(76px,17vw,104px)!important;margin-bottom:clamp(40px,9vw,56px)}
  .v6-turn .v6-h2{font-size:clamp(23px,6.4vw,30px)!important}
}

/* 16.5px ran the hosting line to five lines on a 390px screen. The strip is
   an aside, not a section, and five lines makes it read as one. */
@media(max-width:820px){
  .v6-hoststrip{padding:20px!important;gap:14px!important}
  .v6-hoststrip .v6-lead{font-size:14.5px!important;line-height:1.5}
}

/* The before/after cards sit side by side on a desktop and stacked on a
   phone, so the arrow between them has to turn with them. Rotating the icon
   rather than its box on purpose: the box is a reveal target, and `.r.in`
   sets its transform. */
@media(max-width:860px){
  .v6-flowarrow svg{transform:rotate(90deg)}
}

/* A touch screen has no hover, so the stroke has no state to belong to. It
   used to reveal on scroll instead, which meant all four cards wore it at once
   — the thing the stroke exists to avoid. It is a pointer-only flourish now,
   and the card reads fine without it. The hover outline is neutralised here
   too, so a tap does not leave one card highlighted behind you. */
@media(hover:none){
  .v6-strike{display:none}
  .v6-fix:hover{border-color:var(--border-subtle);box-shadow:var(--shadow-sm)}
}

/* ── The hero mock ─────────────────────────────────────────────────────────
   The three rotating views (website → tool → software) are one composition
   drawn at ~880px. Below 820px its frame is ~315px, and the contents were
   being *clipped* rather than shrunk: the mock site's own nav ran off the
   right edge with "Tisch reservieren" sliced in half, and text bottomed out
   at 6.5px. So the frame is laid out at the size the composition was drawn
   for and scaled down as one piece — the proportions are then the desktop
   ones, just smaller, which reads as a screenshot instead of a broken layout.
   site.js keeps --nf-scale in step with the frame's real width. */
@media(max-width:820px){
  .hp-peek{width:100%}
  /* All four corners, not `18px 18px 0 0`. The square bottom was deliberate —
     the mock was meant to be cut by the fold so the page reads as continuing —
     but it landed as a hard edge against a rounded top on a frame that is
     plainly a screen. The scroll cue above it already says the page continues,
     so the frame can just be a frame. */
  .hp-peek .v6-scene{aspect-ratio:16/9;overflow:hidden;border-radius:18px}
  .hp-peek .nf-browser{
    inset:0 auto auto 0;
    width:var(--nf-design-w);height:calc(var(--nf-design-w) * 9 / 16);
    aspect-ratio:auto;
    transform:scale(var(--nf-scale,1));
    transform-origin:top left;
    border-radius:18px;
  }
}

/* ── The hero, top to fold ─────────────────────────────────────────────────
   Two complaints, one cause. The hero was `92svh` tall but its content only
   filled the top half, so on a phone the mock finished at 664px — comfortably
   inside an 844px screen — and the page gave no sign that anything followed
   it. The leftover hero then stacked with the wrap's 40px and the next
   section's own top padding into a 332px hole under the mock.

   Filling the screen and pushing the mock to the hero's bottom edge fixes
   both: it is cut by the fold (≈108px showing, ≈84px below it on a 390×844
   phone) so the page reads as continuing, and the slack that made the hole is
   now spent above the mock instead of below it. Measured in svh so it holds
   from a 667px SE to a 932px Pro Max rather than being tuned to one phone. */
@media(max-width:820px){
  .hp-hero{min-height:calc(100vh - 26px);min-height:calc(100svh - 26px);padding-bottom:0}
  .hp-peek{margin-top:auto}
  /* the hero already ends at the fold, so the wrap's inline padding-bottom is
     pure hole; :has picks out the hero's wrap without touching the others */
  .v6-wrap:has(.hp-hero){padding-bottom:0!important}
}

/* ── Contact ────────────────────────────────────────────────────────────── */
/* The prototype's 120–200px top padding was sized for a 1100px canvas; on a
   phone it pushed the form most of a screen down. */
@media(max-width:820px){
  /* The floating pill ends at 94px and .kt-main already starts at 78, so the
     old 96–132px of padding on top of that pushed the eyebrow to 207 — a
     third of a screen of nothing under the nav. 36px puts it at 125, about
     30px clear of the pill, which is the gap the desktop layout has. */
  .kt-main{padding-top:36px;padding-bottom:clamp(48px,12vw,72px)}
  .kt-card{padding:22px 20px;border-radius:var(--radius-xl)}
}

/* iOS zooms the page in when a focused field's text is under 16px. */
@media(max-width:820px){
  .kt-input,.kt-textarea{font-size:16px}
}

/* ── About ──────────────────────────────────────────────────────────────── */

/* Same fix as the other two footers: below 560px the last column clipped the
   email address. */

/* The prototype's hero and section padding was sized for an 1100px canvas. */
@media(max-width:820px){
  .ab-wrap{padding-inline:clamp(20px,6vw,32px)}
  .ab-cta-link{display:inline-block;padding:14px 0}
}

/* ── Legal pages ────────────────────────────────────────────────────────── */

@media(max-width:820px){
  /* the two-column definition list becomes label-over-value */
  .lg-defs{grid-template-columns:1fr;gap:2px 0}
  .lg-defs dd{margin-bottom:14px}
  .lg-card{padding:18px 18px}
  /* the copyright row and the legal links stop fighting for one line */
  .mk-foot-bottom{justify-content:flex-start!important;flex-direction:column;gap:6px!important}
}

/* ── Short viewports ──────────────────────────────────────────────────────
   A phone held sideways is ~390px tall. The hero is built to fill a portrait
   screen, so in landscape it ran to 1.84 screens: the headline alone filled
   the view and the scroll cue — the one thing telling you there is more —
   sat below the fold. Here the hero states its line and gets out of the way.
   Keyed on height + orientation so it never touches a portrait phone or a
   short desktop window that is still wide. */
@media(max-height:560px) and (orientation:landscape){
  .hp-hero{min-height:0;padding-top:clamp(10px,2.5vh,24px)}
  .hp-title{font-size:clamp(28px,4.2vw,48px)}
  .hp-scroll{margin-top:8px}
  .hp-peek{width:min(58%,600px);margin-top:clamp(12px,2.5vh,24px)}
  /* the section rhythm is tuned for a tall screen too */
  .v6-wrap{padding-top:clamp(40px,7vw,80px)!important}
  .kt-main{padding-top:28px;padding-bottom:clamp(32px,7vh,56px)}
  .lg-head{padding-top:clamp(40px,10vh,72px)}
}

/* ── The footer on a phone ─────────────────────────────────────────────────
   One column made it ~670px tall — most of a screen of nothing but links,
   which is what "weird on mobile" was. The intro keeps the full width and the
   three link groups pair up beneath it, roughly halving the height. */
@media(max-width:560px){
  .mk-footgrid{
    grid-template-columns:1fr 1fr!important;gap:26px 20px!important}
  .mk-footgrid>:first-child{grid-column:1/-1}
}