/* =====================================================================
   Vias Media v2 "Bauplan" — every page except the homepage
   page hero · section heads · services · steps · projects · case study ·
   gallery · contact form · tables · prose (legal, blog) · blog list

   One file for all sub-pages on purpose: it is fetched once and every
   later page change finds it in the cache.
   ===================================================================== */

:root {
  --fs-phero: clamp(2.75rem, 1rem + 8.6vw, 9rem);   /* 44–144px page titles */
  --fs-ptitle: clamp(2.25rem, 1.3rem + 4.4vw, 5rem);  /* 36–80px long titles (articles, legal) */
}

/* =====================================================================
   PAGE HERO — one screen, laid out like the homepage's F: title across
   the top, note on the left, foot row (facts left, action right). It is
   pinned and the first section slides over it.
   ===================================================================== */
.phero {
  position: relative;
  z-index: 0;
  display: flex;
  min-height: calc(var(--vh, 1vh) * 100);
  padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
  overflow: hidden;          /* the title lines drive apart sideways on scroll */
  overflow: clip;
}
@media (min-height: 36.0625rem) {
  .phero { position: sticky; top: 0; }
}
.phero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  row-gap: clamp(1rem, calc(var(--vh, 1vh) * 3), 2.25rem);
  padding-top: clamp(0.75rem, calc(var(--vh, 1vh) * 2.4), 2rem);
  padding-bottom: calc(clamp(1.25rem, calc(var(--vh, 1vh) * 3.4), 2.5rem) + env(safe-area-inset-bottom, 0px));
}
.phero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-phero);
  letter-spacing: 0.005em;
  line-height: 0.82;
  max-width: 12.5em;
  text-wrap: balance;
}
.phero__title .ln { transform: translate3d(calc(var(--drive, 0) * var(--dir, 1) * 1px), 0, 0); }
.phero__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34rem;
  text-wrap: pretty;
}
.phero__lead + .phero__lead { margin-top: 0.75rem; font-size: var(--fs-small); }
.phero__lead .em { color: var(--ink); font-weight: 600; }
.phero__foot {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.phero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-left: auto; }
.phero__lead-cover { --i: 3; }
.phero__foot { --i: 5; }
@media (max-width: 22.5rem) {
  .phero__actions { width: 100%; }
  .phero__actions .btn { flex: 1 1 100%; }
}
/* small screens: the main action has to stay on the first screen, so the
   second button and the extra line step aside */
@media (max-width: 22.5rem), (max-height: 40rem) {
  .phero__actions:has(.btn--accent) .btn:not(.btn--accent) { display: none; }
  .phero__lead + .phero__lead { display: none; }
}

/* short variant: text pages. As tall as its content, not pinned */
.phero--short {
  position: relative;
  top: auto;
  min-height: 0;
  padding-top: calc(var(--hdr-h) + clamp(3rem, calc(var(--vh, 1vh) * 12), 8rem));
}
.phero--short .phero__wrap { grid-template-rows: auto; padding-bottom: 0; }
.phero--short .phero__title { font-size: var(--fs-ptitle); line-height: 0.88; max-width: 16em; }
.phero--short + .s,
.post > .s { padding-top: var(--head-gap); }
/* a title that main.js sets on two lines and fits to the full width (laptops) */
.phero__title[data-fit] .ln > span { display: inline-block; }
@media (min-width: 62.5rem) {
  .phero__title[data-fit] { max-width: none; line-height: 0.8; }
}

/* breadcrumb: Start / Projekte / Name */
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-mono);
  color: var(--ink-2);
}
.crumb a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.crumb [aria-current] { color: var(--ink); }
@media (hover: hover) {
  .crumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
}

/* key / value facts (case studies, article dates) */
.meta { display: flex; flex-wrap: wrap; gap: 0.875rem 2.5rem; margin: 0; }
.meta dd { margin-left: 0; }
.meta__k {
  display: block;
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-mono);
  color: var(--ink-3);
}
.meta__v { display: block; margin-top: 0.125rem; font-size: 0.9375rem; }
.meta--line { gap: 0.25rem 1.25rem; font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-2); }

/* =====================================================================
   SECTION ANATOMY shared by the pages (the label / head / body columns
   come from base.css)
   ===================================================================== */
.sec { row-gap: var(--head-gap); }
.head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block-gap); justify-items: start; }
/* a start-aligned cell is as wide as its longest word; never wider than its column */
.head > *,
.ct__head > *,
.wk__body > * { max-width: 100%; }
.s__full { grid-column: 1 / -1; }
.frame { border: 1px solid var(--line); background: var(--ground-2); }
.frame img { width: 100%; height: auto; }

/* =====================================================================
   SERVICES — six cells in one tight grid that share their hairlines
   (owner: "pack the services more tightly together, not just one column
   with lots of white space"). Phones: compact rows, the drawing beside the
   text. Tablets: two columns. Laptops: three. The whole cell is the link
   (the "more" link is stretched over it).
   ===================================================================== */
.svc-sec { padding-top: var(--head-gap); }
.svcs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svc {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-areas: "top top" "fig txt" "fig more";
  column-gap: 1rem;
  row-gap: 0.75rem;
  align-items: start;
  padding: 1rem 1rem 1.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--hdr-h) + 1rem);
}
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground-2); opacity: 0; transition: opacity 0.16s ease; }
.svc__top { grid-area: top; display: flex; justify-content: space-between; align-items: center; }
.svc__n { color: var(--ink-3); }
.svc__go svg { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-base) var(--ease-out); }
/* a plate in the ink colour with the same drawings the homepage shows on hover */
.svc__fig { grid-area: fig; background: var(--ink); color: var(--ground); }
.svc__fig svg { width: 100%; height: auto; padding: 9%; }
.svc__fig .a { fill: var(--accent); }
.svc__fig .as { stroke: var(--accent); }
.svc__fig .f { fill: currentColor; }
.svc__fig text { font-family: var(--font-sans); }
.svc__txt { grid-area: txt; display: grid; gap: 0.5rem; min-width: 0; }
.svc__name { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 3rem); line-height: 0.9; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.svc__d { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; max-width: 30rem; text-wrap: pretty; }
.svc__more {
  grid-area: more;
  justify-self: start;
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-mono);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.3em;
}
.svc__more::after { content: ""; position: absolute; inset: 0; }   /* the whole cell is the link */
.svc__more:focus-visible { outline: none; }
.svc:has(.svc__more:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (hover: hover) {
  .svc:hover::before { opacity: 1; }
  .svc:hover .svc__go svg { transform: translateX(0.3125rem); }
  .svc:hover .svc__more { color: var(--ink); text-decoration-color: currentColor; }
}
.svc:active::before { opacity: 1; }
.svc:active .svc__go svg { transform: translateX(0.3125rem); }
@media (min-width: 48rem) {
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "fig" "txt" "more";
    row-gap: 1rem;
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .svc__fig { width: min(100%, 11rem); }
  .svc__more { margin-top: 0.25rem; }
}
@media (min-width: 62.5rem) {
  .svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc { grid-template-rows: auto auto 1fr auto; padding: 1.5rem 1.5rem 1.75rem; }
  .svc__fig { width: min(100%, 12.5rem); }
}

/* =====================================================================
   SERVICE PAGES — a data sheet, deliberately unlike the main pages (owner,
   2026-10-14: "individual service pages should be different from the main
   pages … different composition of h1 and its placing, more or less white
   space, different animations and content layout"). A masthead hero that
   is not pinned, a checklist, a time line, a featured reference and a cost
   box; tighter section spacing than the main pages.
   ===================================================================== */
.sx .s { padding-block: clamp(4rem, 2.5rem + 6vw, 9rem); }
.sx-hero {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--hdr-h) + clamp(1rem, calc(var(--vh, 1vh) * 3), 2.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background: var(--ground);
}
.sx-hero__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sx-hero__n { color: var(--ink-3); white-space: nowrap; }
/* the masthead: the service's name across the full width (main.js fits it,
   data-fitw); its letters rise one by one (data-letters) */
.sx-word {
  width: max-content;
  margin-top: clamp(1.5rem, calc(var(--vh, 1vh) * 5), 4rem);
  padding-top: 0.06em;
  font-family: var(--font-display);
  font-size: 17vw;
  line-height: 0.82;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  overflow: clip;
}
.sx-word .lt { display: inline-block; }
.js .sx-word:not(.is-in) .lt { transform: translate3d(0, 105%, 0); }
.js .sx-word.is-in .lt { transition: transform 0.9s var(--ease-out); transition-delay: calc(var(--c, 0) * 32ms); }
.js .sx-word:not(.is-split) { visibility: hidden; }
.rv-fallback .sx-word { visibility: visible !important; }
.rv-fallback .sx-word .lt { transform: none !important; }
.sx-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--block-gap);
  margin-top: var(--block-gap);
  padding-top: var(--block-gap);
  border-top: 1px solid var(--line);
}
.sx-hero__text { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.sx-hero__text > * { max-width: 100%; }
/* the promise in the text face, mixed case: a different voice from the main pages' display titles */
.sx-hero__title {
  font-family: var(--font-sans);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 17em;
  text-wrap: balance;
}
.sx-hero__lead { color: var(--ink-2); max-width: 34rem; text-wrap: pretty; }
.sx-hero__act { --i: 2; }
.sx-hero__fig { display: none; grid-area: auto; --i: 3; }   /* phones: the services grid shows the drawing; here it would push the facts down */
.sx-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--block-gap) 0 0; border-top: 1px solid var(--line); --i: 4; }
.sx-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.875rem; border-bottom: 1px solid var(--line); }
.sx-fact__k { font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-3); }
.sx-fact__v { margin: 0; font-weight: 600; text-align: right; }
@media (min-width: 48rem) {
  .sx-hero__body { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
  .sx-hero__text { grid-column: 1 / span 5; }
  .sx-hero__fig { display: block; grid-column: 6 / -1; justify-self: end; width: 100%; max-width: 21rem; }
  .sx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .sx-fact { display: grid; gap: 0.375rem; padding: 1rem 1.25rem 1.125rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .sx-fact:last-child { border-right: 1px solid var(--line); }
  .sx-fact__v { text-align: left; font-size: 1.1875rem; line-height: 1.25; }
}

/* checklist: two columns from tablets on; each tick draws itself as its row comes up */
.sx-inc .grid { row-gap: var(--head-gap); }
.sx-inc__head { grid-column: 1 / -1; display: grid; gap: var(--block-gap); justify-items: start; }
.sx-checks { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: calc(var(--gutter) * 2); }
.sx-check {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.375rem;
  align-items: start;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}
.sx-check__box {
  grid-row: 1 / span 2;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: square;
}
.sx-check__box path { stroke-dasharray: 22; stroke-dashoffset: 0; }
.js .sx-check:not(.is-in) .sx-check__box path { stroke-dashoffset: 22; }
.js .sx-check.is-in .sx-check__box path { transition: stroke-dashoffset 0.6s var(--ease-out) 0.35s; }
.sx-check__t h3 { font-stretch: 112%; font-weight: 600; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.01em; }
.sx-check__d p { color: var(--ink-2); font-size: 0.9375rem; max-width: 30rem; text-wrap: pretty; }
@media (min-width: 48rem) {
  .sx-checks { grid-column: 3 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* time line: a hairline track and an ink fill (--flow, 0 → 1, main.js) that grows
   as the list passes up the screen; a stage lights up when the fill reaches it */
.sx-flow .grid { row-gap: var(--head-gap); }
.sx-steps { --flow: 1; position: relative; grid-column: 1 / -1; display: grid; padding-left: 2rem; }
.sx-steps::before,
.sx-steps::after { content: ""; position: absolute; left: 0.4375rem; top: 0.375rem; bottom: 2rem; width: 1px; background: var(--line); }
.sx-steps::after { background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--flow)); }
.sx-step { position: relative; display: grid; gap: 0.5rem; padding-bottom: 2rem; }
.sx-step__node {
  position: absolute;
  z-index: 1;
  left: -2rem;
  top: 0.0625rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 1px solid var(--line);
  background: var(--ground);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.sx-step__n { color: var(--ink-3); }
.sx-step__t h3 { font-size: var(--fs-d2); line-height: 0.92; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.sx-step__d p { color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
.sx-step__t,
.sx-step__d { transition: opacity 0.4s ease; }
.sx-steps.is-live .sx-step:not(.is-done) .sx-step__t,
.sx-steps.is-live .sx-step:not(.is-done) .sx-step__d { opacity: 0.35; }
.sx-steps.is-live .sx-step.is-done .sx-step__node,
.sx-steps:not(.is-live) .sx-step__node { background: var(--ink); border-color: var(--ink); }
@media (min-width: 62.5rem) {
  .sx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); padding-left: 0; padding-top: 2.5rem; }
  .sx-steps::before,
  .sx-steps::after { left: 0; right: 0; top: 0.4375rem; bottom: auto; width: auto; height: 1px; }
  .sx-steps::after { transform-origin: 0 50%; transform: scaleX(var(--flow)); }
  .sx-step { padding: 0 1.5rem 0 0; }
  .sx-step__node { left: 0; top: -2.5rem; }
  .sx-step__t h3 { font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem); }
}

/* featured reference: the screenshot whole, the figure it is known for, large */
.sx-ref__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--block-gap);
  padding-block: var(--row-pad);
  border-block: 1px solid var(--line);
}
.sx-ref__shot { transition: border-color var(--dur-fast) ease; }
.sx-ref__body { display: grid; gap: 0.875rem; align-content: start; justify-items: start; }
.sx-ref__name { font-size: var(--fs-d2); line-height: 0.92; }
.sx-ref__num { display: block; font-size: clamp(4rem, 2rem + 7vw, 8.5rem); line-height: 0.8; }
.sx-ref__lbl { display: block; margin-top: 0.5rem; color: var(--ink-2); }
.sx-ref__go { margin-top: 0.5rem; }
.js .sx-ref__card:not(.is-in) .sx-ref__shot { clip-path: inset(0 100% 0 0); }
.js .sx-ref__card.is-in .sx-ref__shot { clip-path: inset(0); transition: clip-path 1s var(--ease-io), border-color var(--dur-fast) ease; }
.rv-fallback .sx-ref__shot { clip-path: none !important; }
@media (hover: hover) {
  .sx-ref__card:hover .sx-ref__shot { border-color: var(--ink); }
  .sx-ref__card:hover .sx-ref__go { background: var(--ink); border-color: var(--ink); color: var(--ground); }
  .sx-ref__card:hover .ico-arrow { transform: translateX(0.1875rem); }
}
.sx-ref__card:active .sx-ref__go { background: var(--ink); border-color: var(--ink); color: var(--ground); }
@media (min-width: 48rem) {
  .sx-ref__card { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .sx-ref__shot { grid-column: 1 / span 5; }
  .sx-ref__body { grid-column: 6 / -1; }
}

/* cost: one ruled box on the second ground */
.sx-cost__box {
  display: grid;
  gap: var(--block-gap);
  padding: clamp(1.25rem, 0.9rem + 2vw, 3rem);
  border: 1px solid var(--line);
  background: var(--ground-2);
}
.sx-cost__head { display: grid; gap: 1rem; justify-items: start; }
.sx-cost__body { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 62.5rem) {
  .sx-cost__box { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); align-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sx-word .lt { transform: none; transition: none; }
  .js .sx-check .sx-check__box path { stroke-dashoffset: 0; transition: none; }
  .js .sx-ref__card .sx-ref__shot { clip-path: none; transition: none; }
}

/* =====================================================================
   STEPS — a real sequence. Phones: ruled rows. Laptops: four standing
   panels on one line, the text at the foot of each.
   ===================================================================== */
.steps { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.step {
  display: grid;
  gap: 0.5rem;
  padding-block: var(--row-pad);
  border-bottom: 1px solid var(--line);
}
.step__n { color: var(--ink-3); }
.step__d p { color: var(--ink-2); max-width: 34rem; text-wrap: pretty; }
@media (min-width: 48rem) and (max-width: 62.4375rem) {
  .step { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .step__n { grid-column: 1 / span 2; }
  .step__t { grid-column: 3 / span 3; }
  .step__d { grid-column: 6 / -1; }
}
@media (min-width: 62.5rem) {
  .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: clamp(17rem, calc(var(--vh, 1vh) * 44), 25rem);
    padding: 1.25rem 1.5rem 1.5rem 1.25rem;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
  .step:last-child { border-right: 1px solid var(--line); }
  .step__t h3 { font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .step__d { margin-top: auto; }
}

/* text rows across the whole grid: number, short title, sentence */
@media (min-width: 48rem) {
  .rows--txt .row__n { grid-column: 1 / span 2; }
  .rows--txt .row__t { grid-column: 3 / span 3; }
  .rows--txt .row__d { grid-column: 6 / -1; }
}
h2.tag { margin: 0; font-weight: 400; }

/* a list of towns set as one statement (fills with ink on scroll) */
.towns { font-size: clamp(2rem, 1.1rem + 4.2vw, 5rem); line-height: 0.92; text-wrap: balance; }

/* two columns of plain links with a line of text each */
.duo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.duo__item {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.375rem 1rem;
  align-items: start;
  padding: var(--row-pad) 0;
  border-bottom: 1px solid var(--line);
}
.duo__item::before { content: ""; position: absolute; inset: 0 calc(var(--margin) * -1); z-index: -1; background: var(--ink); opacity: 0; transition: opacity 0.16s ease; }
.duo__item h3 { grid-column: 1; }
.duo__item p { grid-column: 1; color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
.duo__go { grid-column: 2; grid-row: 1; align-self: center; }
.duo__go svg { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .duo__item:hover { color: var(--ground); }
  .duo__item:hover::before { opacity: 1; }
  .duo__item:hover p { color: inherit; }
  .duo__item:hover .duo__go svg { transform: translateX(0.25rem); }
}
@media (min-width: 48rem) {
  .duo { grid-column: 3 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .duo__item { padding-inline: 0.875rem; }
  .duo__item::before { inset: 0; }
}

/* reference rows: name, the figure it is known for, arrow */
.refs { grid-column: 1 / -1; margin-inline: calc(var(--margin) * -1); }
.refs .row { padding-inline: var(--margin); align-items: center; }
.refs .row__n { grid-column: 1 / -1; grid-row: 1; }
.refs .row__t { grid-column: 1 / -2; font-size: var(--fs-d2); line-height: 0.92; overflow-wrap: break-word; }
.refs .row__d { grid-column: 1 / -2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.refs .row__go { grid-row: 2; }
.refs__num { font-family: var(--font-display); font-size: var(--fs-d3); line-height: 1; }
.refs__lbl { font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-2); }
@media (hover: hover) {
  .refs a.row:hover .refs__lbl { color: inherit; }
}
@media (min-width: 48rem) {
  .refs .row__n { grid-column: 1 / span 2; }
  .refs .row__t { grid-column: 3 / span 3; grid-row: 1; }
  .refs .row__d { grid-column: 6 / -2; grid-row: 1; }
  .refs .row__go { grid-row: 1; }
}

/* name, address, phone and mail as one block */
.nap { display: grid; gap: 0.25rem; justify-items: start; font-size: var(--fs-lead); font-style: normal; }
.nap strong { font-weight: 600; }
.nap span { color: var(--ink-2); }
.nap .link { margin-top: 0.5rem; }

/* =====================================================================
   PROJECTS — a ruled catalogue. The screenshot whole, at its own ratio;
   the name large beside it; two figures; the whole entry is the link.
   ===================================================================== */
.wks { border-top: 1px solid var(--line); }
.wk {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.25rem;
  align-items: start;
  padding-block: clamp(1.5rem, 1rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.wk__media { grid-column: 1 / -1; transition: border-color var(--dur-fast) ease; }
.wk__body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; justify-items: start; }
.wk__count,
.wk__tags { color: var(--ink-2); }
.wk__name { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 6rem); line-height: 0.86; overflow-wrap: break-word; }
.wk__desc { color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
.wk__stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.75rem 2.5rem; margin-top: 0.5rem; }
.wk__num { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); line-height: 0.9; }
.wk__lbl { display: block; margin-top: 0.25rem; font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-2); }
.wk .btn { margin-top: 0.75rem; }
@media (hover: hover) {
  .wk:hover .wk__media { border-color: var(--ink); }
  .wk:hover .btn { background: var(--ink); border-color: var(--ink); color: var(--ground); }
  .wk:hover .ico-arrow { transform: translateX(0.1875rem); }
}
@media (min-width: 62.5rem) {
  .wk__media { grid-column: 1 / span 4; }
  .wk__body {
    grid-column: 5 / -1;
    align-self: stretch;
    grid-template-rows: auto auto auto auto 1fr;
    padding-left: clamp(0.5rem, 2vw, 2.5rem);
  }
  .wk__stats { align-self: end; }
}

/* =====================================================================
   CASE STUDY
   ===================================================================== */
/* the site on a laptop and on a phone, both at their own ratio */
.shots { align-items: end; row-gap: var(--gutter); }
.shots__desk { grid-column: 1 / -1; }
.shots__phone { grid-column: 3 / -1; justify-self: end; width: min(100%, 13rem); }
@media (min-width: 48rem) {
  .shots__desk { grid-column: 1 / span 6; }
  .shots__phone { grid-column: 7 / -1; width: 100%; max-width: 19rem; }
}

.moves { border-top: 1px solid var(--line); }
.moves .row__n { grid-column: 1 / -1; }
.case-fig { margin-top: var(--head-gap); }
@media (min-width: 48rem) {
  .moves .row__n { grid-column: 1 / span 1; }
  .moves .row__t { grid-column: 2 / span 3; }
  .moves .row__d { grid-column: 5 / -1; }
}

/* figures a project is measured by */
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.stat { padding-block: var(--row-pad); border-bottom: 1px solid var(--line); }
.stat__num { display: block; font-family: var(--font-display); font-size: clamp(3.75rem, 2rem + 8vw, 5.5rem); line-height: 0.8; letter-spacing: 0.005em; overflow-wrap: anywhere; }
.stat__lbl { display: block; margin-top: 0.75rem; font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-2); }
@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .stat { padding: 1.25rem 1.5rem 1.5rem 1.25rem; border-bottom: 0; border-left: 1px solid var(--line); }
  /* three cells in a row: sized so a nine-letter word ("Taggleich") fits its cell */
  .stat__num { font-size: clamp(2.75rem, 6.2vw, 6.5rem); }
  .stat:last-child { border-right: 1px solid var(--line); }
}
.quote { display: grid; gap: 1rem; }
.quote p { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem); line-height: 1.3; letter-spacing: -0.01em; max-width: 40rem; text-wrap: pretty; }
.quote__by { font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-2); }
.outcome { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.4; max-width: 40rem; text-wrap: pretty; }

/* previous / next project: two halves of one bar */
.pn { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); background: var(--ground); }
.pn__cell {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--margin);
  border-bottom: 1px solid var(--line);
}
/* the space before the footer belongs to this bar: a gap outside it would
   show the pinned hero underneath */
.pn::after { content: ""; grid-column: 1 / -1; height: var(--section); }
.pn__cell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); opacity: 0; transition: opacity 0.16s ease; }
.pn__dir { font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-2); }
.pn__name { font-size: var(--fs-d1); line-height: 0.88; overflow-wrap: break-word; }
.pn__cell--next { text-align: right; justify-items: end; }
@media (hover: hover) {
  .pn__cell:hover { color: var(--ground); }
  .pn__cell:hover::before { opacity: 1; }
  .pn__cell:hover .pn__dir { color: inherit; }
}
@media (min-width: 48rem) {
  .pn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn__cell + .pn__cell { border-left: 1px solid var(--line); }
}

/* =====================================================================
   GALLERY — sideways scroll only (never up and down), native momentum,
   two buttons that step one picture
   ===================================================================== */
.gal__head { align-items: end; }
.gal__nav { grid-column: 1 / -1; display: flex; gap: 0.375rem; }
.gal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-h);
  height: var(--ctl-h);
  border: 1px solid var(--ink);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.gal__btn svg { width: 1.125rem; height: 1.125rem; }
.gal__btn--prev svg { transform: scaleX(-1); }
.gal__btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) {
  .gal__btn:not(:disabled):hover { background: var(--ink); color: var(--ground); }
}
.gal__vp {
  display: flex;
  gap: 0.375rem;
  margin-top: var(--head-gap);
  padding-inline: var(--margin);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margin);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal__vp::-webkit-scrollbar { display: none; }
.gal__vp img {
  flex: none;
  width: auto;
  max-width: none;
  height: clamp(15rem, calc(var(--vh, 1vh) * 58), 34rem);
  border: 1px solid var(--line);
  background: var(--ground-2);
  scroll-snap-align: start;
}
.gal__vp:focus-visible { outline-offset: -2px; }
/* phones: sized by width, so a laptop screenshot is seen whole (its own ratio) */
@media (max-width: 47.9375rem) {
  .gal__vp { align-items: flex-start; }
  .gal__vp img { width: 84vw; height: auto; }
  .gal__vp img.is-tall { width: 44vw; }
}
@media (min-width: 48rem) {
  .gal__nav { grid-column: -3 / -1; justify-content: flex-end; }
  .gal__head .s__head { grid-column: 3 / -3; }
}

/* =====================================================================
   CONTACT — the form in the middle, alone with its title (owner,
   2026-10-14: the two-column page was "so stuffed"); what happens next
   and the direct ways to reach me lie below it, side by side.
   ===================================================================== */
.ct {
  position: relative;
  z-index: 1;
  min-height: calc(var(--vh, 1vh) * 100);
  padding-top: calc(var(--hdr-h) + clamp(1.5rem, calc(var(--vh, 1vh) * 6), 4.5rem));
  padding-bottom: var(--section);
  background: var(--ground);
}
.ct__grid { row-gap: var(--head-gap); align-items: start; }
.ct__head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; justify-items: center; text-align: center; }
.ct__head .lead { margin-inline: auto; }
.ct__title { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.75rem); line-height: 0.86; }
.ct__form { grid-column: 1 / -1; }
.ct__aside {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--head-gap);
  margin-top: var(--block-gap);
  padding-top: var(--head-gap);
  border-top: 1px solid var(--line);
}
.ct__next { border-top: 1px solid var(--line); }
.ct__next .row { grid-template-columns: 3rem minmax(0, 1fr); row-gap: 0.25rem; padding-block: 1rem; }
.ct__next .row__n { grid-column: 1; grid-row: 1 / span 2; }
.ct__next .row__t { grid-column: 2; font-weight: 600; }
.ct__next .row__d { grid-column: 2; }
.ct__direct { display: grid; gap: 0.875rem; justify-items: start; align-content: start; }
.ct__direct-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ct__direct .btn svg { width: 1rem; height: 1rem; }
@media (min-width: 48rem) {
  .ct__head,
  .ct__form { grid-column: 2 / -2; }
  .ct__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 62.5rem) {
  .ct__head,
  .ct__form { grid-column: 3 / span 4; }
}

/* =====================================================================
   TABLES — scroll sideways inside their frame on small screens
   ===================================================================== */
.tbl {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.tbl table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.tbl th,
.tbl td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th {
  border-bottom-color: var(--line);
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-mono);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.tbl td { color: var(--ink-2); }
.tbl td:first-child,
.tbl td strong { color: var(--ink); font-weight: 600; }
.tbl:focus-visible { outline-offset: 2px; }
/* comparison: the last column is ours */
.tbl--cmp { grid-column: 1 / -1; }
.tbl--cmp th:last-child { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.tbl--cmp td:last-child { color: var(--ink); background: var(--ground-2); }

/* =====================================================================
   PROSE — legal texts and articles. Mixed case for reading: only the
   page title is in the display face.
   ===================================================================== */
.prose { grid-column: 1 / -1; max-width: 44rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
@media (min-width: 48rem) {
  .prose { grid-column: 3 / -1; }
}
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: 2.6em 0 0.6em;
  font-family: var(--font-sans);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.prose h2,
.prose h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.prose h3 { margin: 2em 0 0.5em; font-size: 1.125rem; font-weight: 650; line-height: 1.3; color: var(--ink); }
.prose p { margin: 0 0 1em; text-wrap: pretty; }
.prose ul,
.prose ol { margin: 0 0 1em; padding-left: 1.25rem; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; padding-left: 0.25rem; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { margin: 1.5em 0; padding: 1rem 1.25rem; border: 1px solid var(--line); background: var(--ground-2); color: var(--ink); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: var(--font-mono); font-size: 0.875em; }
.prose hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line); }
.prose .tbl { margin: 1.5em 0; }
@media (hover: hover) {
  .prose a:hover { text-decoration-thickness: 2px; }
}

/* =====================================================================
   BLOG — the list is a ruled index; an article is prose with three
   blocks after it (case study, related, check)
   The markup of cards and related blocks is written by build_blog.py.
   ===================================================================== */
.blog-grid { border-top: 1px solid var(--line); }
.blog-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0.75rem;
  align-items: start;
  padding: var(--row-pad) var(--margin);
  margin-inline: calc(var(--margin) * -1);
  border-bottom: 1px solid var(--line);
}
.blog-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); opacity: 0; transition: opacity 0.16s ease; }
.blog-card__media { display: none; }
.blog-card__body { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 0.5rem; }
.blog-card__body > * { grid-column: 1 / -1; }
.blog-card .t-label-md,
.blog-card__meta { font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-3); }
.blog-card__meta { display: flex; gap: 0.5rem; color: var(--ink-2); }
.blog-card .t-card {
  font-family: var(--font-sans);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.blog-card .t-body { color: var(--ink-2); max-width: 38rem; text-wrap: pretty; }
.blog-card__more { display: none; }
@media (hover: hover) {
  .blog-card:hover { color: var(--ground); }
  .blog-card:hover::before { opacity: 1; }
  .blog-card:hover .t-body,
  .blog-card:hover .t-label-md,
  .blog-card:hover .blog-card__meta { color: inherit; }
}
@media (min-width: 48rem) {
  /* date and category in the label columns, title and summary beside them */
  .blog-card__body > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .blog-card__meta { grid-column: 1 / span 2 !important; grid-row: 2; align-self: start; }
  .blog-card__body > :nth-child(2) { grid-column: 3 / -1; grid-row: 1; }
  .blog-card__body > :nth-child(3) { grid-column: 3 / -1; grid-row: 2; }
}

.post__blocks { grid-column: 1 / -1; display: grid; gap: var(--head-gap); margin-top: var(--head-gap); }
@media (min-width: 48rem) {
  .post__blocks { grid-column: 3 / -1; }
}
.post__case {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 2rem;
  align-items: center;
  max-width: 44rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: var(--ground-2);
}
.post__case-num { display: block; font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 0.85; }
.post__case-stat .t-small,
.post__case .t-label-md { display: block; font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); color: var(--ink-2); }
.post__case-stat .t-small { margin-top: 0.375rem; }
.post__case-text { display: grid; gap: 0.25rem; justify-items: start; }
.post__case .t-card { font-family: var(--font-display); font-size: var(--fs-d3); line-height: 1; }
.post__case .link { font-size: var(--fs-small); }
.post__related { max-width: 44rem; }
.post__related h2 { margin-bottom: 1rem; font-family: var(--font-mono); font-stretch: 87.5%; font-size: var(--fs-mono); font-weight: 400; color: var(--ink-2); }
.post__related h2::before { content: "[\00a0"; content: "[\00a0" / ""; }
.post__related h2::after { content: "\00a0]"; content: "\00a0]" / ""; }
.post__related .blog-card { grid-template-columns: minmax(0, 1fr); margin-inline: 0; padding-inline: 0.875rem; }
.post__related .blog-card__body { grid-template-columns: minmax(0, 1fr); }
.post__related .blog-card__body > *,
.post__related .blog-card__meta { grid-column: 1 !important; grid-row: auto !important; }
.post__cta { display: grid; gap: 1.25rem; justify-items: start; max-width: 44rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--accent); color: var(--on-accent); }
.post__cta h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-d2); line-height: 0.92; }
.post__cta p { margin-top: 0.75rem; max-width: 34rem; }
.post__cta .btn { background: #161514; border-color: #161514; color: #F3EFE8; }
@media (hover: hover) {
  .post__cta .btn:hover { background: transparent; border-color: #161514; color: #161514; }
}

/* contact page: the footer's own call to action would only repeat the page */
.ftr--bare .ftr__cta { display: none; }
.ftr--bare .ftr__lines { margin-top: 0; }

/* reduced motion: the page hero is plain flow like everything else */
@media (prefers-reduced-motion: reduce) {
  .phero { position: relative; top: auto; }
}

/* pressed states (touch): the same change the pointer sees on hover */
.crumb a:active { color: var(--ink); text-decoration-color: currentColor; }
.duo__item:active { color: var(--ground); }
.duo__item:active::before { opacity: 1; }
.duo__item:active p { color: inherit; }
.refs a.row:active .refs__lbl { color: inherit; }
.wk:active .wk__media { border-color: var(--ink); }
.wk:active .btn { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.pn__cell:active { color: var(--ground); }
.pn__cell:active::before { opacity: 1; }
.pn__cell:active .pn__dir { color: inherit; }
.gal__btn:not(:disabled):active { background: var(--ink); color: var(--ground); }
.blog-card:active { color: var(--ground); }
.blog-card:active::before { opacity: 1; }
.blog-card:active .t-body,
.blog-card:active .t-label-md,
.blog-card:active .blog-card__meta { color: inherit; }
.post__cta .btn:active { background: transparent; border-color: #161514; color: #161514; }