/* The layout of darikami.ch. Colours, type sizes and spaces through look.css's names; only layout measures stay here. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/albert-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/albert-sans-latin-600-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--t-m)/1.6 var(--sans); overflow-x: clip;
  display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1; }
h1, h2, h3 { text-wrap: balance; font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); line-height: 1.2; letter-spacing: -0.01em; }
p, ul, ol, address, figure { margin: 0; font-style: normal; }
/* line breaks (skill webdesign, "Line breaks"): balance on headlines, pretty on text; a figure stays with its currency;
   the pages hold the   and nobr groups the rules need (number and unit, a sentence's last 2 words) */
p, li, dd, td, th, summary, figcaption { text-wrap: pretty; }
[data-fact] { white-space: nowrap; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
mark { background: var(--accent-tint); color: inherit; padding: 0 0.2em; border-radius: 0.25em; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[id] { scroll-margin-top: 4rem; }
.wrap { --gutter: var(--s-4); width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s-3); top: var(--s-2); z-index: 10; background: var(--surface); color: var(--fg);
  padding: var(--s-2) var(--s-3); }
@media (min-width: 48rem) { .wrap { --gutter: var(--s-5); } }
@media (min-width: 80rem) { .wrap { --gutter: var(--s-6); } }

/* draft marks - removed before the release (README) */
.draft { background: var(--warn); color: var(--fg); border-bottom: 1px solid var(--warn-line); font-size: var(--t-s); }
.draft p { padding: var(--s-2) 0; }
.todo { background: var(--warn); color: var(--fg); outline: 1px dashed var(--warn-line); padding: 0 0.2em; }

/* the ink band: Kontakt and the footer */
.band { background: var(--band); color: var(--on-band); }
.tinted { background: var(--tint); }

/* header: light, sticky, one line below */
header.site { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.5rem; }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; }
.brand svg { display: block; width: 9.5rem; height: auto; aspect-ratio: 520 / 120; }
header.site nav ul { display: flex; align-items: center; gap: var(--s-1) var(--s-4); list-style: none; padding: 0; font-size: var(--t-s); }
header.site nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
header.site nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
header.site nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
/* the phone keeps the first anchor (Preise) beside Kontakt and EN; the rest comes at 48 rem */
.nav-field { display: none; }
.nav-field:first-child { display: list-item; }
@media (min-width: 48rem) { .nav-field { display: list-item; } .brand svg { width: 11rem; } }

/* buttons: a plain block with one slanted corner, the only hard shape of the site */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: var(--s-2) var(--s-4);
  font-weight: 600; text-decoration: none; text-align: center;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.button:focus-visible { outline-offset: -5px; }
.button.primary { background: var(--accent); color: var(--on-accent); }
/* an outline button: the inset line draws the straight edges, the gradient the slanted corner just inside the clip */
.button.line { color: inherit; box-shadow: inset 0 0 0 1px currentColor;
  background: linear-gradient(225deg, transparent calc(var(--cut) * 0.7071), currentColor calc(var(--cut) * 0.7071),
    currentColor calc(var(--cut) * 0.7071 + 1.5px), transparent calc(var(--cut) * 0.7071 + 1.5px)) top right / calc(var(--cut) * 2) calc(var(--cut) * 2) no-repeat; }
.button:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
@media (max-width: 47.99rem) { .actions .button { width: 100%; } }
/* a text link with a chevron: the second action of a screen, in the accent */
.more-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.more-link::after { content: "\203A"; margin-left: 0.3em; font-size: 1.2em; line-height: 1; }
.more-link:hover { text-decoration: underline; }
.band .more-link { color: var(--band-accent); }

/* a screen: eyebrow, headline, one line, one action */
.screen { padding-block: var(--screen); }
.eyebrow { font-size: var(--t-s); font-weight: 600; color: var(--muted); margin-bottom: var(--s-3); }
.band .eyebrow { color: var(--band-muted); }
.screen-head h1, .screen-head h2 { max-width: 22ch; }
.nobr { white-space: nowrap; }
.screen-head .line { margin-top: var(--s-4); max-width: var(--measure); font-size: var(--t-l); line-height: 1.45; }
.screen-head .line + .line { margin-top: var(--s-3); }
.screen-head .actions { margin-top: var(--s-5); }
.after-note { margin-top: var(--s-6); max-width: var(--measure); font-size: var(--t-s); color: var(--muted); }

/* hero: the text, then the drawn phone beside it (desktop) or under it. The device keeps its ratio and the screen's edge
   cuts it, Apple's way: the sample site fills the top, the empty tail is never seen. The price stands before the button. */
.hero { padding-bottom: 0; overflow: hidden; }
.hero .screen-head h1 { max-width: 11ch; }
.hero .actions { row-gap: var(--s-3); }
.price-line { font-weight: 600; font-size: var(--t-l); }
.hero-figure { margin-top: var(--s-6); height: 22rem; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.phone { width: 16rem; flex: none; aspect-ratio: 9 / 19.5; padding: 0.6rem; border-radius: 2.75rem; background: var(--device);
  box-shadow: inset 0 0 0 1.5px var(--device-line); }
.phone-screen { position: relative; height: 100%; padding: 3.25rem 1.25rem 1.25rem; border-radius: 2.2rem; background: var(--device-screen);
  color: var(--fg); display: flex; flex-direction: column; gap: var(--s-2); overflow: hidden; }
.phone-screen::before { content: ""; position: absolute; top: 0.75rem; left: 50%; width: 5.5rem; height: 1.5rem; margin-left: -2.75rem;
  border-radius: 1rem; background: var(--device); }
.mini-brand { font: 500 var(--t-m)/1.2 var(--display); letter-spacing: -0.02em; }
.mini-head { font: 500 1.625rem/1.08 var(--display); letter-spacing: -0.03em; margin-top: var(--s-2); margin-bottom: var(--s-2); }
.mini-line { font-size: var(--t-s); line-height: 1.4; }
.mini-line.muted { color: var(--muted); }
/* the call bar: full width, where a thumb reaches it */
.mini-button { align-self: stretch; margin-top: var(--s-3); min-height: 2.75rem; display: flex; align-items: center; justify-content: center;
  padding: var(--s-2) var(--s-4); background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: var(--t-s); clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% 100%, 0 100%); }
@media (min-width: 60rem) {
  /* the first screen holds headline, price and the one button at 1280 x 720 */
  .hero { --hero-top: clamp(4rem, 9vh, 6rem); padding-top: var(--hero-top); }
  .hero-grid { display: grid; grid-template-columns: 6fr 6fr; column-gap: var(--s-6); align-items: center; min-height: calc(100svh - 3.5rem - var(--hero-top)); }
  .hero-figure { margin-top: 0; height: 28rem; align-self: end; }
  .phone { width: 20rem; }
  .phone-screen { padding-inline: 1.5rem; }
  .mini-brand { font-size: 1.25rem; }
  .mini-head { font-size: 2rem; }
  .mini-line { font-size: var(--t-m); }
}

/* Preise: 3 soft cards, the recommended one in ink; the figure is the picture */
.cards { list-style: none; padding: 0; display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.card { position: relative; display: flex; flex-direction: column; gap: var(--s-2); background: var(--surface); border-radius: var(--r-card);
  padding: var(--s-5) var(--s-5) var(--s-5); box-shadow: inset 0 0 0 1px var(--ring); }
.card-name { font: 500 var(--t-l)/1.2 var(--display); letter-spacing: -0.02em; }
.card-scope { font-size: var(--t-s); color: var(--muted); }
.card-price { margin-block: var(--s-4) var(--s-3); font: 500 var(--t-xl)/1 var(--display); letter-spacing: -0.03em; }
.card-once { display: block; margin-top: var(--s-2); font: 400 var(--t-s)/1.4 var(--sans); letter-spacing: 0; color: var(--muted); }
.card-for { margin-top: auto; font-size: var(--t-s); }
.card.featured { background: var(--band); color: var(--on-band); box-shadow: none; }
.card.featured .card-scope, .card.featured .card-once { color: var(--band-muted); }
.card-flag { position: absolute; top: var(--s-5); right: var(--s-5); padding: var(--s-1) var(--s-3); font-size: var(--t-xs); font-weight: 600;
  background: var(--band-accent); color: var(--on-band-accent); border-radius: 1rem; }
@media (min-width: 60rem) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s-2); }
}

/* the fold under the prices: a row with a rule above and below, a drawn plus that turns into a minus */
.fold { margin-top: var(--s-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; cursor: pointer;
  list-style: none; font: 500 var(--t-l)/1.3 var(--display); letter-spacing: -0.01em; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; flex: none; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  font: 400 1.75rem/1 var(--display); border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ring); }
.fold[open] summary::after { content: "\2212"; }
.fold summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.fold-grid { display: grid; gap: var(--s-5); padding-block: var(--s-3) var(--s-6); }
.fold-grid h3 { font: 600 var(--t-m)/1.4 var(--sans); letter-spacing: 0; margin-bottom: var(--s-3); }
.fold-grid ul { padding-left: 1.1em; font-size: var(--t-s); }
.fold-grid li + li { margin-top: var(--s-2); }
.fold-grid li::marker { color: var(--muted); }
@media (min-width: 60rem) { .fold-grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-5); } }

/* a block that runs from the wrap's left edge to the viewport's right edge */
.bleed { --gutter: var(--s-4); margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
@media (min-width: 48rem) { .bleed { --gutter: var(--s-5); } }
@media (min-width: 80rem) { .bleed { --gutter: var(--s-6); } }

/* Beispiel: capsario.ch in a drawn browser frame to the right edge, the phone overlapping its foot */
.frame { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto var(--s-6) auto; column-gap: var(--s-3); margin-top: var(--s-6); }
.frame-desk { grid-column: 1 / -1; grid-row: 1; background: var(--surface); border-radius: var(--r-small) 0 0 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ring); }
.frame-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); background: var(--tint); }
.frame-dots { flex: none; width: 2.375rem; height: 0.625rem;
  background: radial-gradient(circle at 0.3125rem 50%, var(--line) 0.28rem, transparent 0.3rem) 0 0 / 0.875rem 100% repeat-x; }
.frame-url { flex: 0 1 20rem; margin-inline: auto; padding: 0 var(--s-3); font-size: var(--t-xs); text-align: center; color: var(--muted);
  background: var(--surface); border-radius: 0.375rem; }
.frame-phone { grid-column: 7 / span 5; grid-row: 1 / span 2; align-self: end; overflow: hidden;
  border: 0.4rem solid var(--device); border-radius: 1.25rem; background: var(--device); box-shadow: inset 0 0 0 1px var(--device-line); }
.frame figcaption { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); }
/* on a phone, one frame: the phone shot is the picture, at about 0.8 of its size, the browser frame stays hidden */
.cap-phone { display: none; }
@media (max-width: 47.99rem) {
  .frame { grid-template-rows: auto auto; }
  .frame-desk { display: none; }
  .frame-phone { grid-column: 1 / span 10; grid-row: 1; align-self: start; }
  .frame figcaption { grid-row: 2; }
  .cap-desk { display: none; }
  .cap-phone { display: inline; }
}
@media (min-width: 60rem) {
  .frame { grid-template-rows: auto var(--s-7) auto; column-gap: var(--s-4); }
  .frame-desk { border-radius: var(--r-card) 0 0 0; }
  .frame-phone { grid-column: 9 / span 3; border-width: 0.6rem; border-radius: 2rem; }
  .frame figcaption { grid-row: 2; grid-column: 1 / span 8; align-self: start; }
}

/* Ablauf: 4 steps, each a big numeral from a counter */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.step { counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: var(--s-3);
  font: 500 var(--t-2xl)/1 var(--display); letter-spacing: -0.04em; }
.step h3 { margin-bottom: var(--s-2); }
.step p { font-size: var(--t-s); max-width: 26rem; }
@media (max-width: 47.99rem) { .step::before { font-size: var(--t-xl); } }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-4); row-gap: var(--s-6); } }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Betrieb: the mail on the left, the changed site on the right, an arrow between */
.change { display: grid; gap: var(--s-3); margin-top: var(--s-6); align-items: center; }
.change > div { background: var(--tint); border-radius: var(--r-card); padding: var(--s-4) var(--s-4) var(--s-5); box-shadow: inset 0 0 0 1px var(--ring); }
.change-meta { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-3); }
.change-text { font: 500 var(--t-m)/1.4 var(--display); letter-spacing: -0.01em; }
.change-title { font: 500 var(--t-m)/1.4 var(--display); letter-spacing: -0.01em; margin-bottom: var(--s-3); }
.change-site p { font-size: var(--t-s); }
.change-site p + p { margin-top: var(--s-2); }
.change-arrow { width: 2.5rem; height: auto; color: var(--accent); justify-self: center; transform: rotate(90deg); }
@media (min-width: 48rem) {
  .change { grid-template-columns: 1fr auto 1fr; gap: var(--s-4); }
  .change-arrow { transform: none; width: 3rem; }
}
@media (min-width: 60rem) {
  .betrieb-grid { display: grid; grid-template-columns: 6fr 6fr; column-gap: var(--s-6); align-items: center; }
  /* the headline's first sentence stays one line: the size follows the column where the column is narrower than the sentence */
  .betrieb-grid .screen-head { container-type: inline-size; }
  .betrieb-grid h2 { font-size: min(var(--t-xl), 11cqi); }
  .change { margin-top: 0; }
}

/* Capsario: the search crop in a soft card, the assistant as a small card under the text */
.search-card { margin-top: var(--s-6); background: var(--surface); border-radius: var(--r-card); padding: var(--s-4); box-shadow: inset 0 0 0 1px var(--ring); }
.search-card img { width: 100%; border-radius: var(--r-small); }
.aside-card { margin-top: var(--s-6); background: var(--surface); border-radius: var(--r-card); padding: var(--s-5); max-width: var(--measure);
  box-shadow: inset 0 0 0 1px var(--ring); }
.aside-card h3 { margin-bottom: var(--s-3); }
.aside-card p { font-size: var(--t-s); }
@media (min-width: 60rem) {
  .capsario-grid { display: grid; grid-template-columns: 6fr 6fr; column-gap: var(--s-6); align-items: start; }
  .capsario-grid .screen-head { grid-column: 1; }
  .search-card { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
  .aside-card { grid-column: 1; }
}

/* Kontakt: the ink band, centred */
.close .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close h2 { font-size: var(--t-2xl); max-width: 14ch; }
.close .line { margin-top: var(--s-4); max-width: var(--measure); font-size: var(--t-l); line-height: 1.45; }
.close .actions { margin-top: var(--s-5); justify-content: center; }
.close .button.primary { background: var(--band-accent); color: var(--on-band-accent); }
.close .small-line { margin-top: var(--s-5); font-size: var(--t-s); color: var(--band-muted); }
.close .asks { text-align: left; }

/* the footer */
footer.site { border-top: 1px solid var(--band-line); font-size: var(--t-s); }
footer.site .wrap { display: grid; gap: var(--s-4); padding-block: var(--s-5); }
footer.site p { color: var(--band-muted); }
footer.site .brand svg { width: 8rem; }
footer.site .foot-text p + p { margin-top: var(--s-2); }
footer.site .foot-text a { padding-block: 0.75em; }
footer.site ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); list-style: none; padding: 0; }
footer.site li a { display: inline-block; padding-block: 0.7em; }
@media (min-width: 60rem) {
  footer.site .wrap { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-4); align-items: start; }
  footer.site .brand { grid-column: 1 / span 4; }
  footer.site .foot-text { grid-column: 5 / span 5; }
  footer.site nav { grid-column: 10 / span 3; justify-self: end; }
}

/* the English page: the drawn run list, the price table, the 3 rules, the company line */
.runs { margin-top: var(--s-6); background: var(--surface); border-radius: var(--r-card); padding: var(--s-5); box-shadow: inset 0 0 0 1px var(--ring); }
.runs figcaption { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-3); }
.runs ol { list-style: none; padding: 0; }
.runs li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); align-items: baseline; }
.run-state { font-weight: 600; font-size: var(--t-s); }
.run-state.ok { color: var(--good); }
.run-state.fail { color: var(--bad); }
.run-state.fix { color: var(--accent-text); }
.run-what { font-size: var(--t-s); }
/* the Store card: 3 Actor rows, the name in the first column */
.actors li { grid-template-columns: 9.5rem 1fr; }
.actors .run-name { font-weight: 600; font-size: var(--t-s); }
@media (min-width: 60rem) {
  .split { display: grid; grid-template-columns: 6fr 6fr; column-gap: var(--s-6); align-items: center; }
  .runs { margin-top: 0; }
}
.prices { width: 100%; border-collapse: collapse; margin-top: var(--s-6); font-size: var(--t-s); }
.prices th, .prices td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-top: 1px solid var(--line); font-weight: 400; }
.prices thead th { color: var(--muted); font-size: var(--t-xs); border-top: 0; padding-block: 0 var(--s-2); }
.prices tbody th { font-weight: 600; }
.fig-note { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }
.tier-what { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-xs); line-height: 1.4; margin-top: var(--s-1); }
.fine { margin-top: var(--s-4); max-width: var(--measure); font-size: var(--t-xs); line-height: 1.55; color: var(--muted); }
/* on a phone the Actor rows stack: the name above its line, so the line keeps a readable width */
@media (max-width: 47.99rem) { .actors li { grid-template-columns: 1fr; gap: var(--s-1); } }
@media (max-width: 23.99rem) { .runs { padding: var(--s-4); } }  /* 360 px: the run column holds "Your dataset arrives." whole */
@media (max-width: 47.99rem) {
  .prices thead { position: absolute; left: -9999px; }
  .prices, .prices tbody, .prices tr, .prices th, .prices td { display: block; width: 100%; }
  .prices tr { border-top: 1px solid var(--line); padding-block: var(--s-3); }
  .prices th, .prices td { border: 0; padding: 0; }
  .prices tbody th { margin-bottom: var(--s-2); font-size: var(--t-m); }
  /* the label stands in the cell's padding, so the figure's spans stay one line of text */
  .prices td { position: relative; padding: var(--s-1) 0 var(--s-1) calc(6.5rem + var(--s-2)); }
  .prices td::before { content: attr(data-label); color: var(--muted); position: absolute; left: 0; top: var(--s-1); width: 6.5rem; }
}
@media (min-width: 48rem) { .prices thead th:first-child { width: 34%; } }
@media (min-width: 80rem) { .prices .fig { white-space: nowrap; } }
.rules { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.rules h3 { margin-bottom: var(--s-2); }
.rules p { font-size: var(--t-s); max-width: 26rem; }
@media (min-width: 60rem) { .rules { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-5); } }
.asks { padding-left: 1.4em; margin-top: var(--s-4); max-width: var(--measure); font-size: var(--t-l); line-height: 1.45; }
.asks li + li { margin-top: var(--s-2); }
.asks li::marker { font-family: var(--display); font-weight: 500; }
.company { padding-block: var(--s-6); }
.company p { max-width: var(--measure); }
.company a { padding-block: 0.75em; }

/* the inner pages */
.page { padding-block: var(--s-6) var(--s-7); }
.page-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.page-head .lead { font-size: var(--t-l); line-height: 1.45; max-width: var(--measure); }
/* the inner page's headline: a step below the hero on a phone, so "Schreiben Sie uns." stays one line at 360 px */
.page-head h1 { font-size: clamp(2.25rem, 1rem + 5.4vw, 5.5rem); }
.page-grid h1 { font-size: var(--t-xl); }
.prose { max-width: var(--measure); }
.prose .lead { font-size: var(--t-l); line-height: 1.45; margin-bottom: var(--s-5); }
.prose h2 { font: 500 var(--t-l)/1.2 var(--display); letter-spacing: -0.01em; margin: var(--s-5) 0 var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose p + p, .prose ul + p, .prose p + ul, .prose address + p { margin-top: var(--s-3); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--muted); }
.small { font-size: var(--t-s); color: var(--muted); margin-top: var(--s-5); }
.big-link { font: 500 var(--t-xl)/1.1 var(--display); letter-spacing: -0.03em; display: inline-block; overflow-wrap: anywhere; }
.reach { display: grid; gap: var(--s-5); }
.reach h2 { font: 600 var(--t-s)/1.4 var(--sans); letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-2); }
.reach-sub { font: 500 var(--t-l)/1.3 var(--display); letter-spacing: -0.01em; }
.reach a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* a link inside a sentence keeps its line and gets a 44 px target from its padding */
.prose a, .brief a { padding-block: 0.75em; }
.brief { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.brief h2 { margin: 0 0 var(--s-3); font: 500 var(--t-l)/1.2 var(--display); letter-spacing: -0.01em; }
.brief ol { padding-left: 1.2em; margin-block: var(--s-3); }
.brief li + li { margin-top: var(--s-2); }
.brief li::marker { font-family: var(--display); font-weight: 500; }
.brief p { max-width: var(--measure); }
.brief p + p { margin-top: var(--s-3); }
.page .actions { margin-top: var(--s-5); }
@media (min-width: 60rem) {
  .page { padding-block: var(--s-7); }
  .page-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s-4); }
  .page-side { grid-column: 1 / span 4; margin-bottom: 0; }
  .page-main { grid-column: 5 / span 8; }
  /* Kontakt: the 3 ways to reach us stacked on the left, the 3 facts beside them, so the page uses its width */
  .contact { display: grid; grid-template-columns: 6fr 5fr; column-gap: var(--s-6); }
  .contact .page-head { grid-column: 1 / -1; }
  .contact .reach { grid-column: 1; }
  .contact .brief { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: 0; border-top: 0; }
}