/* D2 · Puls, second pass. The page behaves like an instrument: one material from ink to tint,
   a ruled sheet, small type, and a reading that is always real.
   Durations are multiples or simple fractions of one beat (--beat, 0.42 s, same as TAKT.beat):
   feedback and reveals stay under 400 ms, so they use the half and three-quarter beat. */

@font-face { font-family: Geist; src: url(/assets/takt/fonts/Geist-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/takt/fonts/GeistMono-Latin.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Geist Pixel"; src: url(/assets/takt/fonts/GeistPixel-Numerals.woff2) format("woff2"); font-display: swap; }
/* Fallbacks tuned to Geist's metrics, so the swap moves nothing. */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"); size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Pixel Fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"); size-adjust: 97%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }

@property --smudge { syntax: "<color>"; inherits: true; initial-value: #c39a7d; }

:root {
  --beat: .42s;
  --fast: calc(var(--beat) / 2);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* One hue from ink to tint. Lime is the one accent: a good reading, and Live. */
  --page: #fff;
  --ink: #1b2a2b;
  --body: #4c5856;
  --tone: #566c6a;
  --card: #f5f8f7;
  --rule: #e6ecea;
  --rule-2: #d3dcd9;
  --lime: #dff500;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  --col: 1320px;
  --gutter: 40px;
  --inset: 32px;
  --cell: 16px;
  --gap-h: 96px;

  /* The profession tints the fog, nothing else. */
  --smudge: #c39a7d;
}
html.tint { transition: --smudge calc(var(--beat) * 2) ease; }
:root[data-seg="therapie"] { --smudge: #c78d9c; }
:root[data-seg="kanzlei"] { --smudge: #7c9cbc; }
:root[data-seg="handwerk"] { --smudge: #cf9a4f; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html.glide { scroll-behavior: smooth; } }
::selection { background: var(--lime); color: var(--ink); }
body {
  margin: 0;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  background: var(--page);
  color: var(--ink);
  font: 400 1rem/1.5 Geist, "Geist Fallback", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
/* Safari styles the page late and every transition would run at load: the bar at the foot, the header's logo. */
.js:not(.is-up) *, .js:not(.is-up) *::before, .js:not(.is-up) *::after { transition: none !important; }
/* iOS 26 ignores theme-color and paints the band above the page in the body's colour: the fog's top edge over the hero. */
.js body { background: #4b6460; }
.js body.is-past { background: var(--page); }
main, .foot { background: var(--page); }
/* The notch's gutters in landscape are the body's padding. The page and the hero reach across them, so fog never stands beside white. */
main, .foot, .hero { margin-inline: calc(-1 * env(safe-area-inset-left)) calc(-1 * env(safe-area-inset-right)); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
/* A route shows its own words from the first paint on: the script in the head sets data-seg before anything
   is drawn, takt.js keeps hidden in step after that. Without JavaScript the page is the plain one. */
:root:not([data-seg]) [data-seg-show]:not([data-seg-show~="alle"]),
:root[data-seg="alle"] [data-seg-show]:not([data-seg-show~="alle"]),
:root[data-seg="ordination"] [data-seg-show]:not([data-seg-show~="ordination"]),
:root[data-seg="therapie"] [data-seg-show]:not([data-seg-show~="therapie"]),
:root[data-seg="kanzlei"] [data-seg-show]:not([data-seg-show~="kanzlei"]),
:root[data-seg="handwerk"] [data-seg-show]:not([data-seg-show~="handwerk"]) { display: none !important; }
main { display: block; outline: 0; }
main:focus-visible { outline: 0; box-shadow: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; overflow-wrap: break-word; }
p, li { text-wrap: pretty; }
p, li, summary, dd { overflow-wrap: break-word; }
summary, dd, figcaption { text-wrap: pretty; }
.nb { white-space: nowrap; }

/* ss09 is the plain zero: a slashed zero reads as a terminal, not an instrument. */
.px { font-family: "Geist Pixel", "Pixel Fallback", ui-monospace, monospace; font-weight: 400; letter-spacing: 0; font-feature-settings: "ss09" 1; }
.tn { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.fog :focus-visible, .bar :focus-visible { outline-color: #fff; }
.ende__card :focus-visible { outline-color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp input { width: 48px; height: 48px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; }
.skip:focus { top: 16px; }

/* ---- The sheet: one column between two rails, rules that run to the edge of the screen ---- */
.col { display: block; max-width: var(--col); margin-inline: max(var(--gutter), calc(50% - var(--col) / 2)); border-inline: 1px solid var(--rule); }
.band { border-bottom: 1px solid var(--rule); }
.gap { display: block; border-bottom: 1px solid var(--rule); }
/* The page counts its own days: Tag 1 in the hero, one bar further at every band, Live at the foot. Nothing moves. */
.gap i { position: relative; height: var(--gap-h); background: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 10%) 0 100% / 100% 8px no-repeat; }
.gap i::after { content: ""; position: absolute; left: calc(var(--d) * 10%); bottom: 0; width: 10%; height: 3px; background: var(--lime); }

/* ---- Fog: flat colour with an out-of-focus smudge of the profession on top.
   The warm part and the light part are placed per surface, always behind a picture or
   empty space. Text only ever sits on the base, so white stays above 4.5:1. ---- */
.fog {
  --sx: 72%; --sy: 40%; --sw: 36%; --sh: 52%; --sa: 52%;
  --lx: 104%; --ly: 42%; --lw: 20%; --lh: 40%; --la: .52;
  --on: #fff;
  --on-2: rgb(255 255 255 / .94);
  --line: rgb(255 255 255 / .18);
  position: relative; isolation: isolate;
  color: var(--on);
  background-color: #4d6662;
  background-image:
    radial-gradient(var(--lw) var(--lh) at var(--lx) var(--ly), rgb(190 208 206 / var(--la)) 0%, transparent 72%),
    radial-gradient(60% 50% at 78% 112%, rgb(14 24 26 / .4) 0%, transparent 72%),
    linear-gradient(90deg, rgb(20 34 36 / .24) 0%, rgb(20 34 36 / 0) 56%);
}
@supports (background: color-mix(in oklab, red, blue)) {
  .fog {
    background-image:
      radial-gradient(var(--sw) var(--sh) at var(--sx) var(--sy), color-mix(in oklab, var(--smudge) var(--sa), transparent) 0%, transparent 74%),
      radial-gradient(var(--lw) var(--lh) at var(--lx) var(--ly), rgb(190 208 206 / var(--la)) 0%, transparent 72%),
      radial-gradient(60% 50% at 78% 112%, rgb(14 24 26 / .4) 0%, transparent 72%),
      linear-gradient(90deg, rgb(20 34 36 / .24) 0%, rgb(20 34 36 / 0) 56%);
  }
}
.fog::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: url(/assets/d2/grain.png) 0 0 / 128px 128px; mix-blend-mode: soft-light; opacity: .05;
}
/* The light fog carries ink, never white. */
.fog--lift {
  --on: var(--ink);
  --on-2: var(--ink);
  --line: rgb(27 42 44 / .14);
  background-color: #b6c6c3;
  background-image:
    radial-gradient(70% 60% at 50% 16%, rgb(195 154 125 / .3) 0%, transparent 72%),
    radial-gradient(80% 60% at 50% 112%, rgb(60 84 84 / .3) 0%, transparent 72%);
}
@supports (background: color-mix(in oklab, red, blue)) {
  .fog--lift {
    background-image:
      radial-gradient(70% 60% at 50% 16%, color-mix(in oklab, var(--smudge) 38%, transparent) 0%, transparent 72%),
      radial-gradient(80% 60% at 50% 112%, rgb(60 84 84 / .3) 0%, transparent 72%);
  }
}

/* ---- Type ---- */
.t2 { color: var(--tone); }
.fog .t2 { color: rgb(255 255 255 / .72); }
h2 { margin-left: -.045em; font-size: clamp(1.875rem, 1.1rem + 2.3vw, 3rem); line-height: 1.17; letter-spacing: -.02em; }
h2 > span, h2 > span > span { display: inline; }
/* A heading breaks where the sentence does. The second tone is kept for a line that answers the first. */
@media (min-width: 768px) { h2 .t2, h2 .ln { display: block; } }
.lab { font: 400 .75rem/1.34 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--tone); }
.fog .lab { color: var(--on-2); }
/* A section's label is a tick on the same ruler. Pills are for actions only. */
.chip { display: flex; width: fit-content; align-items: center; min-height: 16px; padding: 0 0 0 7px; font: 400 .75rem/16px var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--tone); border-left: 1px solid var(--rule-2); }
.fog .chip { color: #fff; border-left-color: rgb(255 255 255 / .34); }
.cap { padding: 10px 2px 2px; font-size: .875rem; line-height: 1.43; color: var(--body); text-wrap: balance; }
.cap strong { font-weight: 500; color: var(--ink); }
.ticks li { position: relative; padding: 11px 0 11px 30px; font-size: 1rem; line-height: 1.5; border-top: 1px solid var(--rule); }
.ticks li::before {
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.6l3.6 3.4 7.4-8'/%3E%3C/svg%3E");
  content: ""; position: absolute; left: 0; top: 12px; width: 20px; height: 20px;
  background: currentColor; -webkit-mask: var(--tick) center / 20px no-repeat; mask: var(--tick) center / 20px no-repeat;
}
.fog .ticks li { border-color: var(--line); }
.pending {
  display: inline-block; padding: 4px 8px; font: 400 .75rem/1.34 var(--mono); color: var(--ink);
  background: #fbf8d9; border: 1px dashed #a9a34f; border-radius: 4px;
}

/* ---- Buttons. The transparent border turns into a real one in forced colours. ---- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 24px;
  font: inherit; font-weight: 500; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
/* Only with a pointer: touch has no hover, and iOS Safari would fade every button in on load, from a grey pill with a blue label. */
@media (hover: hover) { .btn { transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); } }
.btn--s { --h: 40px; padding: 0 16px; font-size: .875rem; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2f4243; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #e9efed; }
.btn--line { color: #fff; border-color: rgb(255 255 255 / .42); }
.btn--line:hover { background: rgb(255 255 255 / .1); }
.btn:disabled { opacity: .6; cursor: progress; }
.quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--fast) var(--ease);
}
.quiet:hover { text-decoration-color: var(--ink); }

/* ---- Header: quiet on the fog, a short glass pill once the page moves ---- */
.bar {
  position: sticky; top: 12px; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  width: calc(100% - 2 * var(--gutter)); height: 56px; max-width: var(--col); margin: 16px auto -72px; padding: 0 8px 0 16px;
  color: #fff; background: rgb(27 42 44 / .84); border-radius: 999px;
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 18px 44px -18px rgb(14 24 26 / .5);
  transition: background-color .2s cubic-bezier(0, 0, .2, 1), box-shadow .2s cubic-bezier(0, 0, .2, 1), padding .2s cubic-bezier(0, 0, .2, 1), max-width .2s cubic-bezier(0, 0, .2, 1);
}
@media (min-width: 1100px) { .bar.is-scrolled { max-width: 720px; } }
.js .bar:not(.is-scrolled) { padding-inline: calc(var(--inset) + 1px); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; line-height: 1.1; text-decoration: none; font-weight: 500; letter-spacing: -.01em; }
.brand__mark { display: grid; place-items: center; width: 28px; height: 28px; background: var(--lime); color: var(--ink); border-radius: 8px; }
.bar__nav { display: flex; gap: 4px; margin-left: 12px; }
.bar__nav a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 10px; font-size: .875rem; text-decoration: none; }
.bar__nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--fast) var(--ease); }
.bar__nav a:hover::after { transform: none; }
.bar__tel { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-size: .875rem; font-variant-numeric: tabular-nums; text-decoration: none; }
.bar__tel:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bar__cta { background: #fff; color: var(--ink); }
.bar__cta:hover { background: #e9efed; }

body:has(> nav[aria-label="Entwürfe vergleichen"]) .hero { --strip: 30px; }

/* ---- First screen: one still image of the offer, the five facts along its foot ---- */
.hero__in {
  --split: 44.1%;
  display: grid; grid-template-columns: minmax(0, var(--split)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  max-width: var(--col); margin-inline: max(var(--gutter), calc(50% - var(--col) / 2)); padding-top: 72px;
  min-height: min(calc(100svh - var(--strip, 0px)), calc(58rem + 72px));
  border-inline: 1px solid rgb(255 255 255 / .12);
}
.hero__lead { align-self: center; padding: 24px 20px 28px var(--inset); }
.kicker { font-size: .875rem; line-height: 1.43; color: var(--on-2); }
.h1 { margin-top: 16px; margin-left: -.055em; font-size: clamp(2.25rem, 1.4rem + 2.9vw, 4rem); line-height: 1.09; letter-spacing: -.02em; }
.h1 > span { display: block; }
.hero__promise { max-width: 28em; margin-top: 20px; font-size: 1.125rem; line-height: 1.44; color: var(--on-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero__cta .btn { flex: 1 1 auto; }
.phone-only { display: none; }
.hero__small { margin-top: 12px; font-size: .875rem; line-height: 1.43; color: var(--on-2); }

/* More light than on the other fields, behind the plate and past the rail. Only with the two columns:
   on one column the text would stand in it. */
@media (min-width: 900px) {
  .hero.fog { --sx: 76%; --sy: 34%; --sw: 46%; --sh: 44%; --sa: 96%; --lx: 101%; --ly: 36%; --lw: 26%; --lh: 40%; --la: .8; }
}
/* The plate is small here: shorter and higher, the glow stays off the caption under it. */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero.fog { --sy: 28%; --sh: 34%; --ly: 22%; }
}
/* Past 1920 px it keeps its size and stays with the plate. Plain lengths: Chromium and Firefox drop a gradient with a calc() in its size. */
@media (min-width: 1921px) {
  .hero.fog { --sx: calc(50% + 499px); --sw: 883px; --lx: calc(50% + 979px); --lw: 499px; }
}

/* One site, one layout, five days. The plate starts as the wireframe, and d2.js lays the finished page over it strip by strip. */
.slice { align-self: center; min-width: 0; padding: 20px var(--inset) 16px 21px; }
.slice__view { position: relative; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 0 0 8px rgb(255 255 255 / .1), 0 34px 70px -34px rgb(14 24 26 / .7); }
.slice__view picture, .slice__view img { display: block; width: 100%; }
.slice__view .slice__fin { position: absolute; left: 0; top: 0; }
.slice__bars { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgb(27 42 44 / .13) 0 1px, transparent 1px 10%); transition: opacity var(--beat) ease; }
.ruler { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-top: 18px; font: 400 12px/1 var(--mono); color: var(--on-2); }
.ruler i { position: relative; display: flex; align-items: center; gap: 6px; height: 26px; padding-left: 6px; font-style: normal; white-space: nowrap; }
.ruler i::after { content: ""; position: absolute; left: 0; top: 16px; bottom: 0; width: 1px; background: rgb(255 255 255 / .34); }
/* The long ticks are the five stops of the Ablauf, and the seams of the plate above them. */
.ruler i:nth-of-type(odd)::after { top: 0; background: #fff; } /* a whole day; the short ticks between are half days */
.ruler i:last-of-type { justify-content: flex-end; }
.ruler__live { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 20px; padding: 0 5px; font: 500 12px/1 var(--mono); color: var(--ink); background: var(--lime); border-radius: 4px; }
.ruler__run { position: absolute; left: 0; top: -1px; width: 10%; height: 2px; background: var(--lime); visibility: hidden; }
/* At rest the page is finished: the bars are gone and the mark stands on Live. Without motion it starts there. */
.is-rest .slice__bars { opacity: 0; }
.is-rest .ruler__run { visibility: visible; left: 90%; }
@media (prefers-reduced-motion: reduce) {
  .slice__bars { opacity: 0; }
  .ruler__run { visibility: visible; left: 90%; }
}
.slice__cap { margin-top: 8px; font-size: .875rem; line-height: 1.43; color: var(--on-2); }

.facts { grid-column: 1 / -1; display: grid; grid-template-columns: calc(var(--split) * .36) calc(var(--split) * .64) minmax(0, .9fr) minmax(0, 1fr) minmax(0, .98fr); border-top: 1px solid var(--line); }
.facts__i { padding: 16px 12px 18px 20px; border-left: 1px solid var(--line); }
.facts__i:first-child { padding-left: var(--inset); border-left: 0; }
.facts__i dt { font: 400 .75rem/1.34 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--on-2); }
.facts__v { margin-top: 8px; font-size: 1.125rem; line-height: 1.33; }
/* The two numbers the offer stands on. Net and gross weigh the same: side by side, each with its label under it, stacked only where they cannot fit. */
.facts__n { display: block; margin-left: -.04em; font-size: clamp(2.25rem, 1.6rem + 1.9vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.facts__v--n { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .28em; }
.facts__l { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.43; color: var(--on-2); }
.facts__i--price { display: flex; flex-wrap: wrap; column-gap: 28px; }
.facts__i--price dt, .facts__i--price .facts__s { flex: 0 0 100%; }
.facts__i--price .facts__s { margin-top: 6px; }
.facts__s { margin-top: 4px; font-size: .875rem; line-height: 1.43; color: var(--on-2); }
.facts__s a, .facts__v a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; font-variant-numeric: tabular-nums; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- Head of a section ---- */
.head { display: grid; grid-template-columns: calc((100% + 2 * var(--inset)) * 7 / 12 + 1px) minmax(0, 1fr); align-items: end; padding: 64px var(--inset) 40px; }
.head__l { display: grid; gap: 16px; justify-items: start; }
.head__sub { font-size: 1.125rem; line-height: 1.44; color: var(--body); }

/* ---- Befund: the free check, and the one instrument on the page ---- */
.check__room { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.check__ask { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 64px var(--inset) 28px; }
.check__ask h2 { margin-top: 16px; }
.check__sub { max-width: 30em; margin-top: 16px; font-size: 1.125rem; line-height: 1.44; color: var(--body); }
.probe { width: 100%; margin-top: auto; padding-top: 32px; }
.probe__l { display: flex; align-items: flex-end; min-height: 32px; padding-bottom: 8px; font-size: .875rem; font-weight: 500; }
.probe__row { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--card); border: 1px solid var(--rule-2); border-radius: 999px; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.probe__row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.probe__row:has(.btn:focus-visible) { border-color: var(--rule-2); box-shadow: none; }
.probe input { flex: 1; min-width: 0; height: 52px; padding: 0 12px 0 20px; font: inherit; font-size: 1.125rem; color: var(--ink); background: none; border: 0; outline: 0; }
.probe input:focus-visible { outline: 0; }
.probe input::placeholder { color: var(--tone); opacity: 1; }
.probe .btn { flex: none; }
.check__note { margin-top: 10px; font-size: .875rem; line-height: 1.43; color: var(--body); }
.check__note.is-said { font-size: 1rem; line-height: 1.5; color: var(--ink); }

.check__cell { grid-column: 2; grid-row: 1 / 3; min-width: 0; padding: var(--cell); border-left: 1px solid var(--rule); }
.reading { display: flex; flex-direction: column; height: 100%; min-height: 560px; padding: 24px; border-radius: 12px; }
.reading__lab { font: 400 .75rem/1.34 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--on-2); overflow-wrap: anywhere; }
.reading__big { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; }
.reading__v { margin-left: -.07em; font-size: 6rem; line-height: 1; }
.reading[data-state="error"] .reading__v { display: none; }
/* Nothing was measured: empty gauges would only hold dashes and push the label under the header. */
.reading[data-state="error"] .gauges { display: none; }
.reading[data-state="run"] .reading__v { animation: beat calc(var(--beat) * 3) ease-in-out infinite; }
@keyframes beat { 50% { opacity: .55; } }
.reading__u { font-size: 1.125rem; line-height: 1.33; }
.reading__say { display: none; }

.reading { --sx: 76%; --sy: 16%; --sw: 58%; --sh: 34%; --sa: 30%; --la: 0; }
.scope, .gauge { background: rgb(14 24 26 / .26); border: 1px solid rgb(255 255 255 / .1); border-radius: 8px; }
.scope { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px; margin-top: auto; padding: 14px 16px 12px; }
.scope ul { margin-top: 8px; }
.scope li { position: relative; padding-left: 18px; font-size: .875rem; line-height: 1.68; color: var(--on-2); }
.scope li::before { content: ""; position: absolute; left: 0; top: .44em; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.reading[data-state="run"] .scope li::before { animation: blink calc(var(--beat) * 3) steps(1) infinite; animation-delay: calc(var(--n, 0) * var(--beat) / 2); }
@keyframes blink { 50% { background: rgb(255 255 255 / .5); } }
/* Lime is a good reading and only that; a heavy ring is a finding; a dash could not be read. */
.scope li[data-s="pass"]::before { background: var(--lime); box-shadow: none; }
.scope li[data-s="fail"] { color: #fff; font-weight: 500; }
.scope li[data-s="fail"]::before { box-shadow: inset 0 0 0 2.5px #fff; }
.scope li[data-s="skip"]::before { top: .78em; height: 2px; border-radius: 0; background: rgb(255 255 255 / .5); box-shadow: none; }

.gauges { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.gauge { --v: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px; padding: 10px 14px 9px; }
.gauge[data-g="ms"] { --lim: .667; }
.gauge[data-g="kb"] { --lim: .5; }
.gauge__v { font-size: 1.125rem; line-height: 1.33; font-variant-numeric: tabular-nums; }
.gauge__track { grid-column: 1 / -1; position: relative; height: 3px; margin: 9px 0 6px; background: rgb(255 255 255 / .24); border-radius: 2px; }
.gauge__mark { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: #fff; border-radius: 2px; transition: width calc(var(--beat) * 2) var(--ease); }
.gauge__limit { position: absolute; left: calc(var(--lim) * 100%); top: -4px; bottom: -4px; width: 1px; background: rgb(255 255 255 / .7); }
.gauge__s { grid-column: 1 / -1; position: relative; font: 400 .75rem/1.3 var(--mono); color: var(--on-2); }
/* The label sits under the tick it names, not at the end of the axis. */
.gauge__lim { position: absolute; left: calc(var(--lim) * 100%); transform: translateX(-50%); white-space: nowrap; }

.plate { margin-top: 12px; }
.steps { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.steps li { position: relative; padding-left: 18px; font-size: .875rem; line-height: 1.5; color: var(--on-2); }
.steps li::before { content: ""; position: absolute; left: 0; top: .32em; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
.steps li.is-now { color: #fff; }
.steps li.is-now::before { animation: blink calc(var(--beat) * 3) steps(1) infinite; }
.steps li.is-done { color: #fff; }
.steps li.is-done::before { background: var(--lime); box-shadow: none; }
.plate__msg { font-size: 1rem; line-height: 1.44; outline: 0; }
.plate__msg:focus-visible { outline: 0; }
.plate__msg a { display: flex; align-items: center; width: fit-content; min-height: 44px; font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.plate__sum { font-size: .875rem; line-height: 1.43; }

.befund { grid-column: 1; grid-row: 2; min-width: 0; padding: 12px var(--inset) 28px; }
.befund__score { max-width: 22em; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.22; letter-spacing: -.012em; outline: 0; }
.befund__score:focus-visible { outline: 0; }
.befund__list { margin-top: 16px; border-top: 1px solid var(--rule); }
.befund__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.befund__list h4 { font-size: 1.125rem; line-height: 1.33; }
.befund__list p { grid-column: 1 / -1; font-size: 1rem; line-height: 1.5; color: var(--body); }
.befund__list .eff { font-size: .875rem; color: var(--body); white-space: nowrap; }
.befund__list .eff b { font-weight: 500; color: var(--ink); }
.befund__list .befund__rest { display: block; font-size: 1rem; line-height: 1.5; color: var(--body); }
.befund__msg { max-width: 34em; margin-top: 12px; font-size: 1.125rem; line-height: 1.44; color: var(--body); }
.befund__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }

/* Finished: question and form step back to one line, so the reading and its findings share one view. */
.check__room.is-done .check__ask { grid-row: 1; padding: 24px var(--inset) 8px; }
.is-done .check__ask .chip, .is-done .check__sub, .is-done .check__note, .is-done .probe__l { display: none; }
.is-done .check__ask h2 { margin-top: 0; font-size: 1.5rem; line-height: 1.25; }
.is-done .check__ask h2 .ln { display: inline; }
.is-done .probe { margin-top: 12px; padding-top: 0; }
.is-done .probe input { height: 44px; font-size: 1rem; }
.is-done .probe .btn { --h: 44px; padding: 0 18px; font-size: .875rem; }
.check__room.is-done .reading { min-height: 0; }
/* Beside a long list the reading keeps its own height and stays in view. */
@media (min-width: 900px) {
  .check__room.is-done .reading { height: auto; position: sticky; top: 96px; }
  .check__room.is-done .scope { margin-top: 16px; }
}
/* Taller than the space under the header it would hide its foot until the list ends, so here it scrolls along. */
@media (min-width: 900px) and (max-width: 1279px) and (max-height: 839px) {
  .check__room.is-done .reading { position: static; }
}

/* ---- Der erste Eindruck: the one scroll sequence ---- */
.vital__stage { --barh: 34px; --res: 64px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto minmax(0, 1fr); }
.vital__head { grid-column: 1; grid-row: 1; padding: 64px var(--inset) 0; }
.vital__head h2 { margin-top: 16px; font-size: clamp(1.625rem, 2.4vw, 2rem); line-height: 1.25; }
.vital__list { grid-column: 1; grid-row: 2; margin-top: 28px; padding: 0 var(--inset) 32px; }
/* A problem is struck when its dot appears, and its answer stands under it. */
.vital__list { counter-reset: v; }
.vital__list li { position: relative; padding: 12px 0 12px 32px; font-size: 1rem; line-height: 1.5; border-top: 1px solid var(--rule); counter-increment: v; }
.vital__list li::before { content: counter(v); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 20px; height: 20px; font: 400 12px/1 var(--mono); color: var(--tone); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-2); transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.vital__list li.is-ok::before { color: #fff; background: var(--ink); box-shadow: none; }
.vital__p { text-decoration-line: line-through; text-decoration-color: transparent; text-decoration-thickness: 1px; transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease); }
.vital__list li.is-ok .vital__p { color: var(--tone); text-decoration-color: currentColor; }
.vital__a { display: block; margin-top: 2px; font-weight: 500; transition: opacity var(--fast) var(--ease); }
.vital__view { grid-column: 2; grid-row: 1 / 3; min-width: 0; padding: var(--cell); border-left: 1px solid var(--rule); }
.frame { position: relative; width: 100%; background: var(--card); border-radius: 12px; box-shadow: 0 0 0 1px var(--rule-2); }
.frame__screen { position: relative; overflow: hidden; background: var(--card); border-radius: 12px; }
/* The honest label sits in the address bar, so no crop can ever lose it. */
.frame__bar { display: grid; place-items: center; min-height: var(--barh); padding: 6px 12px; font: 400 .75rem/1.3 var(--mono); text-align: center; text-wrap: balance; color: var(--body); border-bottom: 1px solid var(--rule); }
.frame__cap { grid-area: 1 / 1; }
.frame__cap--old { display: none; }
.frame__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--card); }
.frame__img, .frame__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.scan i { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #fff; box-shadow: 0 0 0 .5px rgb(27 42 44 / .55); }
/* A dot beside each element of the sample. Placed in % of the shot, so it holds at any size. */
.pin { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; font: 500 12px/1 var(--mono); color: #fff; background: var(--ink); border-radius: 50%; box-shadow: 0 0 0 2px #fff; transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
/* On a phone the readings pass under the frame, from the tablet up the list carries them. */
.leads { display: none; }
.vital__res { margin-top: 14px; padding-inline: 2px; font-size: 1.125rem; line-height: 1.44; }

/* With JavaScript and room to spare the stage sticks and the scroll drives it.
   Without the room, under 620 px height or on a short tablet, it stays a plain, finished layout. */
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 64em) and (min-height: 38.75em), screen and (prefers-reduced-motion: no-preference) and (min-width: 48em) and (min-height: 53em) {
  .js .vital { height: 235vh; height: 235svh; }
  .js .vital__stage { position: sticky; top: 0; height: min(100vh, 62rem); height: min(100svh, 62rem); min-height: 596px; overflow: hidden; }
  .js .vital__head { padding-top: 92px; }
  .js .vital__list { margin-top: clamp(14px, 3.4vh, 28px); padding-bottom: 12px; }
  .js .vital__view { padding-top: 84px; padding-bottom: 12px; }
  @supports (width: 1cqw) {
    .js .vital__fit { container-type: size; height: 100%; display: flex; flex-direction: column; justify-content: center; }
    .js .frame, .js .vital__res { width: min(100cqw, (100cqh - var(--res) - var(--barh)) * 1.6); }
  }
  .is-live .frame__cap--old { display: inline; }
  .is-live .frame__img--new { clip-path: inset(0 0 100% 0); }
  .is-live .scan { opacity: 1; }
  .is-live .pin { opacity: 0; transform: scale(.8); }
  .is-live .pin.is-on { opacity: 1; transform: none; }
  .is-live .vital__a { opacity: 0; }
  .is-live .vital__list li.is-ok .vital__a { opacity: 1; }
  .is-live .vital__res { opacity: 0; }
}

/* ---- Ihr Beruf: four ruled cells, the open one marked by a line ---- */
.files { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.file { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-width: 0; padding: 16px 20px 18px; font: inherit; text-align: left; color: var(--tone); background: none; border: 0; border-left: 1px solid var(--rule); cursor: pointer; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.file:first-child { padding-left: var(--inset); border-left: 0; }
.file::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform calc(var(--beat) * .75) var(--ease); }
.file:hover { color: var(--ink); background: var(--card); }
.file[aria-pressed="true"] { color: var(--ink); }
.file[aria-pressed="true"]::after { transform: none; }
.file:focus-visible { outline-offset: -3px; }
.file__t { display: block; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.012em; overflow-wrap: anywhere; }
.file__s { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.4; color: var(--body); overflow-wrap: anywhere; }

.chart { border-top: 1px solid var(--rule); }
.chart__p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chart__p { animation: swap calc(var(--beat) * .75) var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }
.chart__text { display: flex; flex-direction: column; min-width: 0; padding: 40px var(--inset) 24px; }
.chart__lead { max-width: 17em; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.22; letter-spacing: -.012em; }
.chart__body { max-width: 31em; margin-top: 16px; font-size: 1.125rem; line-height: 1.44; color: var(--body); }
.chart__more { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-bottom: -10px; color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.chart__text .ticks { margin-top: auto; padding-top: 32px; }
.chart__text .ticks li:last-child { border-bottom: 1px solid var(--rule); }
.chart__cell { min-width: 0; padding: var(--cell); border-left: 1px solid var(--rule); }
.chart__fig { display: flex; justify-content: center; height: 100%; min-height: 560px; padding-top: 40px; overflow: hidden; border-radius: 12px 12px 0 0; }
.handset { align-self: flex-start; width: min(54%, 290px); overflow: hidden; background: #fff; border-radius: 28px; box-shadow: 0 0 0 6px rgb(255 255 255 / .34), 0 30px 60px -30px rgb(14 24 26 / .7); }
.handset img { width: 100%; }
/* The label closes the card; the handset bleeds under it, so nothing shows below. */
.chart__fig .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: #fff; }
@media (min-width: 900px) { .chart__fig { height: 460px; min-height: 0; } }

/* ---- Ablauf: the five days, one stop each ---- */
.plan__pre .lab { margin-bottom: 10px; }
.plan__pre ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan__pre h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.33; }
.plan__pre li p { margin-top: 4px; font-size: 1rem; line-height: 1.5; color: var(--body); }
.plan__cell { padding: var(--cell); border-top: 1px solid var(--rule); }
.line { --sa: 0%; --la: 0; padding: 24px; border-radius: 12px; }
.stops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
.stop { position: relative; min-width: 0; }
.stop:not(:last-child)::before { content: ""; position: absolute; left: 30px; right: -14px; top: 9px; height: 2px; background: rgb(255 255 255 / .34); transform-origin: left; }
.stop__dot { position: relative; display: block; width: 20px; height: 20px; margin-bottom: 16px; background: rgb(255 255 255 / .24); border-radius: 50%; }
.stop__dot::after { content: ""; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.stop__dot--live { background: var(--lime); }
.stop__dot--live::after { background: var(--ink); }
.stop__day { display: block; margin-bottom: 8px; font: 400 .75rem/1.34 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--on-2); }
.stop h3 { font-size: 1.125rem; line-height: 1.33; }
.stop > p { margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--on-2); }
.line__foot { margin-top: 20px; padding-top: 12px; font-size: .875rem; line-height: 1.43; color: var(--on-2); border-top: 1px solid var(--line); }
.line.is-wait .stop::before { transform: scaleX(0); }
.js .stop::before { transition: transform var(--beat) ease-in-out calc(var(--d) * var(--beat) / 1.5); }
/* From here the stops stand on their true day: five even days, and a wider last one for Live. */
@media (min-width: 1200px) {
  .stops { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); column-gap: 0; }
  .stop { padding-right: 24px; }
  .stop:not(:last-child)::before { left: 26px; right: 6px; height: 1px; top: 9.5px; }
  .stop__dot { z-index: 1; background: #778b87; } /* solid, so the day ticks stop at its edge */
  .stop__dot--live { background: var(--lime); }
  .stops::after {
    content: ""; position: absolute; left: 9.5px; top: 6px; width: 100%; height: 8px; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .55) 0 1px, transparent 1px calc(100% / 10.6)); /* one tile, or Safari rounds it to whole pixels and the ticks drift off the dots */
    -webkit-mask: linear-gradient(90deg, #000 calc(100% * 8 / 10.6), transparent 0); mask: linear-gradient(90deg, #000 calc(100% * 8 / 10.6), transparent 0);
  }
}

.load { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.5fr); align-items: stretch; border-top: 1px solid var(--rule); }
.load__t { padding: 20px var(--inset); font-size: 1.125rem; line-height: 1.33; }
.load__r { display: contents; }
.load__r > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-left: 1px solid var(--rule); }
.load__r dt { order: 2; font-size: .875rem; color: var(--body); }
.load__r dd { font-size: 1rem; }
.load__r dd b { font-size: 2rem; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.load__end { padding: 20px var(--inset); font-size: 1.125rem; line-height: 1.33; border-left: 1px solid var(--rule); }

/* ---- Beispiele: cell, inset card, label. The sample stays recognisably a sample. ---- */
.ex__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.ex__i { min-width: 0; padding: var(--cell); }
.ex__i:nth-child(n+3) { border-top: 1px solid var(--rule); }
.ex__i:nth-child(odd) { border-right: 1px solid var(--rule); }
:root[data-seg="therapie"] .ex--therapie, :root[data-seg="kanzlei"] .ex--kanzlei, :root[data-seg="handwerk"] .ex--handwerk { order: -1; }
/* Psycho stands last in the markup, so nth-child leaves the other routes alone. On Therapie it leads and the rules follow what is visible. */
:root[data-seg="therapie"] .ex--psycho { order: -2; border-top: 0; }
:root[data-seg="therapie"] .ex--ordination { border-top: 1px solid var(--rule); }
:root[data-seg="therapie"] .ex--kanzlei { border-right: 0; }
/* The same on Kanzlei and Handwerk, whose tile moves to the front. */
:root[data-seg="kanzlei"] .ex--kanzlei, :root[data-seg="handwerk"] .ex--handwerk { border-top: 0; }
:root[data-seg="kanzlei"] .ex--therapie, :root[data-seg="handwerk"] .ex--therapie { border-top: 1px solid var(--rule); }
@media (min-width: 768px) {
  :root[data-seg="kanzlei"] .ex--kanzlei, :root[data-seg="handwerk"] .ex--handwerk, :root[data-seg="kanzlei"] .ex--therapie, :root[data-seg="handwerk"] .ex--therapie { border-right: 1px solid var(--rule); }
  :root[data-seg="kanzlei"] .ex--ordination, :root[data-seg="handwerk"] .ex--ordination, :root[data-seg="handwerk"] .ex--kanzlei { border-right: 0; }
}
.ex__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule); }
.ex__desk { position: absolute; inset: 0; }
.ex__desk img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.ex__phone { position: absolute; right: 4%; top: 44%; width: 21%; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 0 0 4px #fff, 0 22px 44px -18px rgb(14 24 26 / .6); transition: transform var(--beat) var(--ease); }
.ex__phone img { width: 100%; }
.ex__i:hover .ex__phone { transform: translateY(-6px); }
.ex__line { padding: 16px var(--inset) 18px; font-size: 1rem; line-height: 1.5; color: var(--body); border-top: 1px solid var(--rule); }
.ex__line a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--ink); font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---- Preis: the one full-width field between the hero and the ending. The rails run through it. ---- */
.preis { --sx: 80%; --sy: 6%; --sw: 52%; --sh: 36%; --sa: 58%; --lx: 103%; --ly: 10%; --lw: 20%; --lh: 30%; --la: .36; border-bottom: 0; }
@media (min-width: 1921px) {
  .preis { --sx: calc(50% + 576px); --sw: 998px; --lx: calc(50% + 1018px); --lw: 384px; } /* as on the hero: the glow stays with the column */
}
.preis .col { border-color: var(--line); }
.t10 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.t10__cell { min-width: 0; }
.t10__card { display: flex; flex-direction: column; height: 100%; min-height: 540px; padding: 28px var(--inset) 24px; }
.t10__top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; }
.t10__top h3 { font-size: 1.125rem; line-height: 1.33; }
.t10__name { font-weight: 500; }
.t10__top .t2 { color: var(--on-2); }
.t10__meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font: 400 .75rem/1.5 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--on-2); }
/* The five days in the price: half when you say yes, half when the site is live. */
.t10__axis { margin-top: 20px; }
.t10__axis .ruler { margin-top: 0; }
.t10__axis .ruler i:last-of-type { padding-left: 0; }
.t10__pay { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font: 400 .75rem/1.34 var(--mono); letter-spacing: .02em; color: #fff; }
.t10__price { margin-top: auto; padding-top: 32px; }
.t10__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.t10__line + .t10__line { margin-top: 16px; }
.t10__eur { display: block; margin-left: -.05em; font-size: clamp(4rem, 6.2vw, 5.75rem); line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.t10__vat { display: block; font-size: 1.125rem; line-height: 1.33; }
.t10__vat strong { font-weight: 500; }
/* Kanzlei and Handwerk deduct the tax: the net price alone, large, the gross beside it in words. */
:root[data-seg="kanzlei"] .t10__line, :root[data-seg="handwerk"] .t10__line { display: block; }
:root[data-seg="kanzlei"] .t10__eur, :root[data-seg="handwerk"] .t10__eur { font-size: clamp(5rem, 8vw, 7.25rem); letter-spacing: -.04em; }
:root[data-seg="kanzlei"] .t10__vat, :root[data-seg="handwerk"] .t10__vat { margin-top: 10px; }
.t10__host { margin-top: 20px; padding-top: 12px; font-size: 1rem; line-height: 1.5; border-top: 1px solid var(--line); }
.t10__after { margin-top: 2px; font-size: .875rem; line-height: 1.43; color: var(--on-2); }
.t10__cond { margin-top: 12px; }
.t10__back { margin-top: 20px; padding: 12px 14px 13px; color: var(--ink); background: #fff; border-radius: 8px; }
.t10__promise { font-size: 1.125rem; line-height: 1.33; }
.t10__terms { margin-top: 2px; font-size: .875rem; line-height: 1.43; color: var(--body); }
.t10__in { display: flex; flex-direction: column; min-width: 0; padding: 28px var(--inset) 24px; border-left: 1px solid var(--line); }
.incl { margin-top: 12px; }
.incl li:last-child { border-bottom: 1px solid var(--line); }
.t10__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: auto; padding-top: 24px; }
.t10__act p { flex: 1 1 14em; font-size: .875rem; line-height: 1.43; color: var(--on-2); }
.preis__more { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.2fr) minmax(0, 1.08fr); border-top: 1px solid var(--line); }
.preis__more > div { padding: 20px var(--inset) 24px; border-left: 1px solid var(--line); }
.preis__more > div:first-child { border-left: 0; }
.preis__more h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.33; }
.preis__more p { margin-top: 4px; font-size: 1rem; line-height: 1.5; color: var(--on-2); }
/* The reason for the limit is a line of its own, on the columns above it. */
.preis__more > .preis__why { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; padding: 0; border-left: 0; border-top: 1px solid var(--line); }
.preis__why h3 { padding: 20px var(--inset) 24px; }
.preis__why p { grid-column: 2 / -1; margin: 0; padding: 20px var(--inset) 24px; border-left: 1px solid var(--line); }
.preis__small { padding: 14px var(--inset) 16px; font-size: 1rem; line-height: 1.5; color: var(--on-2); border-top: 1px solid var(--line); }

/* ---- Übergabe: a typeset report, not a seal ---- */
.ueber__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.ueber__l { padding: 64px var(--inset) 32px; }
.ueber__l h2 { margin-top: 16px; font-size: clamp(1.625rem, 2.4vw, 2rem); line-height: 1.25; }
.ueber__note { max-width: 30em; margin-top: 16px; font-size: 1rem; line-height: 1.5; color: var(--body); }
.report { display: grid; align-content: stretch; border-left: 1px solid var(--rule); }
.report div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 24px; align-items: center; padding: 16px var(--inset); border-bottom: 1px solid var(--rule); }
.report div:last-child { border-bottom: 0; }
.report dt { font-size: 1.125rem; line-height: 1.33; overflow-wrap: break-word; }
.report dd { font-size: 1rem; line-height: 1.5; color: var(--body); }

/* ---- Person ---- */
.person__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.person__fig { position: relative; min-width: 0; padding: var(--cell); }
.person__fig img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.person__fig .pending { position: absolute; left: 26px; bottom: 26px; }
/* The portrait fills its cell at every width. */
@media (min-width: 1100px) {
  .person__fig { display: flex; }
  .person__fig img { height: 100%; aspect-ratio: auto; min-height: 0; }
}
.person__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 64px var(--inset) 24px; border-left: 1px solid var(--rule); }
.person__text h2 { margin-top: 16px; }
.letter { max-width: 36em; margin-top: 28px; font-size: 1.125rem; line-height: 1.44; color: var(--body); }
.letter p + p { margin-top: 12px; }
.letter__hi { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.012em; color: var(--ink); }
.letter__sig { margin-top: auto; padding-top: 24px; font-size: .875rem; line-height: 1.43; }
.letter__sig a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-variant-numeric: tabular-nums; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---- Frühere Arbeiten ---- */
.work__flag { display: block; width: fit-content; margin: 0 var(--inset) 16px; }
.voice + .work__flag { margin-top: -8px; }
.voice { padding: 24px var(--inset) 28px; border-top: 1px solid var(--rule); }
.voice__q p { max-width: 34em; font-size: 1.5rem; line-height: 1.33; letter-spacing: -.012em; }
.cases { display: grid; }
:root[data-seg="handwerk"] .case--handwerk { order: -1; }
.case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--rule); }
.case__cell { min-width: 0; padding: var(--cell); }
.case__stage { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; }
.case__desk { position: absolute; left: 5%; top: 8%; width: 80%; overflow: hidden; border-radius: 8px; box-shadow: 0 26px 50px -26px rgb(14 24 26 / .7); }
.case__desk img { width: 100%; }
.case__phone { position: absolute; right: 5%; top: 24%; width: 21%; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 0 0 4px rgb(255 255 255 / .6), 0 22px 44px -18px rgb(14 24 26 / .7); }
.case__phone img { width: 100%; }
.case__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px var(--inset) 24px; border-left: 1px solid var(--rule); }
.case__text h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.012em; }
.case__what { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: var(--body); }
.quote { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.quote p { font-size: 1.125rem; line-height: 1.44; }
.quote__by { margin-top: 10px; font-size: .875rem; line-height: 1.43; color: var(--body); }
.case__text .pending { margin-top: 12px; }
.work__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 48px; padding: 14px var(--inset) 16px; font-size: .875rem; line-height: 1.43; color: var(--body); border-top: 1px solid var(--rule); }

/* ---- Fragen ---- */
.fragen__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.fragen__h { position: sticky; top: 72px; padding: 64px var(--inset) 40px; }
.fragen__h h2 { margin-top: 16px; }
.faq { min-width: 0; border-left: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 0; }
.faq summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 60px 14px var(--inset); font-size: 1.125rem; line-height: 1.33; text-wrap: balance; list-style: none; cursor: pointer; transition: background-color var(--fast) var(--ease); }
.faq summary:hover { background: var(--card); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: var(--inset); top: 50%; width: 13px; height: 1.5px; background: var(--ink); transition: transform var(--fast) var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq details[open] p { animation: swap calc(var(--beat) * .75) var(--ease); }
.faq details p { max-width: 40em; padding: 0 60px 20px var(--inset); font-size: 1rem; line-height: 1.5; color: var(--body); }
.faq details a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq__topic { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.43; color: var(--body); }

/* ---- Beratung ---- */
.ende { --sx: 74%; --sy: 52%; --sw: 34%; --sh: 62%; --sa: 46%; --la: 0; }
.ende__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); max-width: var(--col); margin-inline: max(var(--gutter), calc(50% - var(--col) / 2)); border-inline: 1px solid rgb(255 255 255 / .12); }
.ende__say { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 64px var(--inset) 32px; }
.ende__say h2 { margin-top: 16px; font-size: clamp(2.25rem, 1.4rem + 2.9vw, 4rem); line-height: 1.09; letter-spacing: -.02em; }
.ende__sub { max-width: 27em; margin-top: 20px; font-size: 1.125rem; line-height: 1.44; color: var(--on-2); }
.ende__card { min-width: 0; margin: var(--cell); padding: 24px; color: var(--ink); background: #fff; border-radius: 12px; }
.req { display: flex; flex-direction: column; gap: 4px; }
.field label { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 36px; padding-bottom: 6px; font-size: .875rem; line-height: 1.43; font-weight: 500; }
.field__opt { font-weight: 400; color: var(--body); }
.field input { width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--card); border: 1px solid var(--rule-2); border-radius: 8px; outline: 0; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.field input::placeholder { color: var(--tone); opacity: 1; }
.field input:hover { border-color: var(--tone); }
.field input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* An invalid field is marked on the field itself, not only in the line below it. */
.field input[aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.consent input[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); }
.field__err { position: relative; margin-top: 6px; padding-left: 26px; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.field__err::before { content: "!"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; font-size: .75rem; font-weight: 600; line-height: 1; color: #fff; background: var(--ink); border-radius: 50%; }
.field__err:empty { display: none; }
.req__site { margin-top: 10px; font-size: .875rem; line-height: 1.43; color: var(--body); }
.req__site strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 44px; margin-top: 12px; font-size: .875rem; line-height: 1.43; color: var(--body); cursor: pointer; }
/* 44 px of target around a 24 px box: the transparent border is part of the control */
.consent input { appearance: none; width: 44px; height: 44px; margin: -10px; background: var(--card) padding-box; border: 10px solid transparent; border-radius: 14px; box-shadow: inset 0 0 0 11px transparent, inset 0 0 0 1.5px var(--tone); cursor: pointer; transition: background-color var(--fast) var(--ease); }
.consent input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.6l3.6 3.4 7.4-8'/%3E%3C/svg%3E") center / 18px no-repeat padding-box; }
/* the link keeps a 44 px target without pushing the lines apart */
.consent a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (forced-colors: active) {
  .consent input { appearance: auto; width: 24px; height: 24px; margin: 0; border: 0; border-radius: 0; }
}
.req__btn { width: 100%; margin-top: 8px; }
.req__status { margin-top: 6px; font-size: 1rem; line-height: 1.5; }
.req__status:empty { margin: 0; }
.req__status a { color: inherit; }
.req__status.req__off { margin: 12px 0 0; font-size: .875rem; line-height: 1.43; color: var(--body); }
.req__off .num { white-space: nowrap; }
.req__alt { margin-top: 12px; padding-top: 4px; font-size: .875rem; line-height: 1.43; text-align: center; border-top: 1px solid var(--rule); }
.req__alt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ende__date { font-size: .875rem; line-height: 1.43; text-align: center; color: var(--body); }
/* The sheet ends on the tenth day: the whole ruler, in line with the rails, standing on the edge of the field. */
.ende__end { max-width: var(--col); margin-inline: max(var(--gutter), calc(50% - var(--col) / 2)); border-inline: 1px solid rgb(255 255 255 / .12); }
.ende__end .ruler { margin-top: 0; }
.ende__end .ruler__run { left: 90%; visibility: visible; } /* the mark the bands walk arrives here */
.sent h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; }
.sent h3:focus, .sent h3:focus-visible { outline: 0; }
.sent p { margin-top: 12px; font-size: 1.125rem; line-height: 1.44; color: var(--body); }

/* ---- Footer ---- */
.foot { font-size: .875rem; line-height: 1.5; color: var(--body); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: center; padding: 16px var(--inset); }
.foot__who { max-width: 52em; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot__nav a, .foot__nav span { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---- Sticky action bar on phones ---- */
.dock { display: none; }

@media (forced-colors: active) {
  .scope li .sr { position: static; width: auto; height: auto; clip-path: none; white-space: normal; }
  .file[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .faq summary::before, .faq summary::after, .ticks li::before { forced-color-adjust: none; background: CanvasText; }
  /* The browser ignores the transparent line and strikes every problem before the sequence starts. */
  .vital__p { text-decoration-line: none; }
  .vital__list li.is-ok .vital__p { text-decoration-line: line-through; }
}

/* A small rise for the sample plates, once, on desktop. Not on text, price or form. */
.rise { transform: translateY(12px); transition: transform calc(var(--beat) * .75) var(--ease); transition-delay: calc(var(--n, 0) * var(--beat) / 3); }
.rise.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
}

/* Short laptops: everything that matters stays above the fold. */
@media (min-width: 1100px) and (max-height: 780px) {
  .hero__lead { padding-block: 12px 16px; }
  .h1 { margin-top: 10px; font-size: clamp(2.25rem, min(1.4rem + 2.9vw, 8.2vh), 4rem); }
  .hero__promise { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
  .hero__cta { margin-top: 18px; }
  .hero__cta .btn { --h: 48px; padding: 0 18px; font-size: .875rem; }
  .hero__small { margin-top: 8px; }
  .slice { padding-block: 12px 8px; max-width: 100%; }
  .slice__cap { margin-top: 4px; }
  .ruler { margin-top: 12px; }
  .facts__i { padding-block: 10px 12px; }
  .facts__v { margin-top: 4px; font-size: 1rem; }
}
/* Too short for the whole plate: it ends on row 568 of 750, the one low on the page that all four samples leave free. */
@media (min-width: 1100px) and (max-height: 741px) {
  .slice__view { aspect-ratio: 1200 / 568; }
}

/* Under this width the tenth day has no room for two labels: Live takes its place. */
@media (max-width: 1365px) {
  .ruler i:last-of-type { padding-left: 0; }
}

@media (min-width: 1100px) {
  .reading, .line { padding-inline: 16px; }
  .ende__card { padding-inline: 17px 16px; }
  .facts__i:first-child, .facts__i--price { padding-right: 8px; }
  /* Five cells in a row: the numeral follows the price cell, so net and gross stay side by side on a laptop. */
  .facts__n { font-size: min(3rem, 4.3vw - .75rem); }
  .preis { scroll-margin-top: -84px; } /* the field lands flush: the pill is short here and clears the chip, a white strip above would cut it */
}
@media (min-width: 1280px) {
  .facts { grid-template-columns: calc(var(--split) * .33) calc(var(--split) * .67) minmax(0, .9fr) minmax(0, 1fr) minmax(0, .98fr); } /* room for a real gap between the figures; the third cell stays on the plate's edge */
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .facts__i--price { column-gap: 16px; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .facts__u { font-size: 1rem; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  .facts__u { font-size: .875rem; }
}
/* Three columns of points no longer fit: two, with Anfragen running down the first. */
@media (min-width: 900px) and (max-width: 1219px) {
  .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope__g:first-child { grid-row: span 2; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .gauges { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1099px) {
  :root { --gutter: 16px; --inset: 24px; --gap-h: 12px; }
  .bar__nav { display: none; }
  .hero__in { grid-template-columns: minmax(0, 5.25fr) minmax(0, 6.75fr); column-gap: 28px; min-height: 0; }
  .hero__lead { padding: 28px 0 24px var(--inset); }
  .slice { padding: 24px var(--inset) 16px 0; }
  .facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .facts__i { grid-column: span 2; border-top: 1px solid var(--line); padding-inline: 16px; }
  .facts__i:nth-child(1), .facts__i:nth-child(2) { grid-column: span 3; border-top: 0; }
  .facts__i:nth-child(3) { padding-left: var(--inset); border-left: 0; }
  .head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-top: 48px; padding-bottom: 28px; }
  .person__text { padding-top: 40px; }
  .fragen__h { padding-top: 48px; }
  .check__ask { padding-top: 48px; }
  .vital__head { padding-top: 48px; }
  .plan__pre { margin-top: 8px; }
  .chart__fig { min-height: 480px; }
  .preis { --sx: 86%; --sy: 0%; --sw: 72%; --sh: 11%; --sa: 44%; --la: 0; } /* a shallow glow in the empty corner: one column has no other free space */
  .t10 { grid-template-columns: minmax(0, 1fr); }
  .t10__card { min-height: 0; }
  .t10__price { margin-top: 28px; padding-top: 0; }
  .t10__in { border-left: 0; border-top: 1px solid var(--line); }
  .load { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .load__t, .load__end { grid-column: 1 / -1; }
  .load__t { padding-block: 16px 8px; }
  .load__r > div { border-left: 0; border-top: 1px solid var(--rule); padding-inline: var(--inset) 12px; }
  .load__r > div + div { border-left: 1px solid var(--rule); padding-inline: 16px 12px; }
  .load__end { border-left: 0; border-top: 1px solid var(--rule); padding-block: 14px 16px; }
  .ueber__in, .fragen__in, .ende__in, .person__in, .case { grid-template-columns: minmax(0, 1fr); }
  .ueber__l { padding: 48px var(--inset) 28px; }
  .report { border-left: 0; border-top: 1px solid var(--rule); }
  .person__text, .case__text { border-left: 0; border-top: 1px solid var(--rule); }
  .person__fig img { aspect-ratio: 16 / 11; object-position: 50% 12%; }
  .fragen__h { position: static; padding: 48px var(--inset) 28px; }
  .faq { border-left: 0; border-top: 1px solid var(--rule); }
  .ende__say { padding-top: 48px; }
  .ende__sub { margin-top: 16px; }
  .ende__card { margin-top: 12px; }
}

/* The five days stack once five columns no longer fit side by side. */
@media (max-width: 999px) {
  .stops { display: block; }
  .stop { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding-bottom: 20px; }
  .stop:last-child { padding-bottom: 0; }
  .stop:not(:last-child)::before { left: 9px; right: auto; top: 26px; bottom: 6px; width: 2px; height: auto; transform-origin: top; }
  .line.is-wait .stop::before { transform: scaleY(0); }
  .stop__dot { grid-row: 1 / 3; margin: 0; }
  .stop h3, .stop > p { grid-column: 2; }
  .stop__day { margin-bottom: 4px; }
  .line { padding: 20px 20px 16px; }
}

@media (max-width: 899px) {
  .preis__more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preis__more > div:nth-child(3) { border-left: 0; }
  .preis__more > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .preis__more > .preis__why { grid-column: auto; display: block; padding: 20px var(--inset) 24px; border-left: 1px solid var(--line); }
  .preis__why h3 { padding: 0; }
  .preis__why p { margin-top: 4px; padding: 0; border-left: 0; }
  .hero { --sy: 55%; --sh: 30%; --ly: 55%; --lh: 30%; } /* one column: the glow goes behind the plate, the text keeps the base */
  .hero__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .hero__lead { padding: 32px var(--inset) 12px; }
  .slice { padding: 12px var(--inset) 20px; }
  .check__room { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .check__ask, .check__room.is-done .check__ask { grid-column: 1; grid-row: auto; padding-bottom: 12px; }
  .probe { margin-top: 0; padding-top: 20px; }
  .check__cell { grid-column: 1; grid-row: auto; border-left: 0; }
  .reading { min-height: 0; height: auto; }
  .scope { margin-top: 20px; }
  .befund, .is-done .befund { grid-column: 1; grid-row: auto; }
  .chart__p { grid-template-columns: minmax(0, 1fr); }
  .chart__cell { border-left: 0; border-top: 1px solid var(--rule); }
  .chart__fig { min-height: 0; height: 420px; }
  .chart__text { padding-top: 28px; }
}

/* Tablets: the problem list moves above the frame. */
@media (min-width: 768px) and (max-width: 1023px) {
  .vital__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .vital__head, .vital__list, .vital__view { grid-column: 1; grid-row: auto; }
  .vital__head { padding-top: 48px; }
  .vital__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 16px; padding-bottom: 12px; }
  .vital__list li { padding-block: 8px; }
  .vital__view { border-left: 0; border-top: 1px solid var(--rule); }
  .js .vital__head { padding-top: 84px; }
  .js .vital__view { padding-top: 12px; }
}
@media (min-width: 768px) and (max-width: 1099px) and (max-height: 720px) {
  .js .vital__res { width: 100%; }
}

@media (max-width: 767px) {
  :root { --gutter: 0px; --inset: 16px; --cell: 12px; }
  .slice { align-self: stretch; } /* centred, it would shrink to its caption until the image is in */
  html { scroll-padding-top: 16px; scroll-padding-bottom: 96px; }
  .col { border-inline: 0; }
  .gap i { margin-inline: var(--inset); } /* on the scale of the rulers in the hero and at the foot */
  body { font-size: 1rem; }
  .bar, .js .bar:not(.is-scrolled) { position: relative; top: 0; height: 52px; margin: 0 0 -52px; padding: 0 16px; gap: 8px; background: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar__cta { display: none; }
  .bar__tel { font-weight: 500; }

  .hero { --sx: 50%; --sy: 84%; --sw: 76%; --sh: 22%; --sa: 44%; --lx: 104%; --ly: 86%; --lw: 40%; --lh: 18%; }
  .hero__in { display: flex; flex-direction: column; margin: 0; padding-top: 52px; border: 0; }
  .hero__lead { align-self: stretch; padding: 20px var(--inset) 20px; }
  .h1 { margin-top: 10px; font-size: clamp(2.25rem, 11.2vw, 3rem); line-height: 1.08; }
  .hero__promise { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
  .hero__cta { flex-direction: column; align-items: stretch; margin-top: 18px; }
  .phone-only { display: inline; }
  .hero__cta .btn { --h: 54px; padding: 0 12px; }
  .hero__small { margin-top: 10px; text-align: center; }
  .facts { order: 2; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10rem, 50%)), 1fr)); }
  .facts__i, .facts__i:nth-child(1), .facts__i:nth-child(2) { grid-column: auto; padding: 12px var(--inset) 13px; border-left: 0; border-top: 1px solid var(--line); }
  .facts__i:nth-child(1) { border-top: 0; }
  .facts__i:nth-child(2) { order: -1; grid-column: 1 / -1; border-top: 0; }
  .facts__i:nth-child(3), .facts__i:nth-child(5) { border-left: 1px solid var(--line); }
  .facts__i:nth-child(1) { order: 0; border-top: 1px solid var(--line); }
  .facts__i:nth-child(3) { order: 1; padding-left: var(--inset); }
  .facts__i:nth-child(4) { order: 2; }
  .facts__i:nth-child(5) { order: 3; }
  .facts__v { margin-top: 4px; font-size: 1rem; line-height: 1.4; }
  .facts__i--price { column-gap: 0; }
  .facts__i--price .facts__v:first-of-type { flex: 0 0 calc(50% + var(--inset)); } /* the gross stands on the strip's second column */
  .slice { order: 3; padding: 16px var(--inset) 18px; border-top: 1px solid var(--line); }
  .slice__view { box-shadow: 0 0 0 5px rgb(255 255 255 / .1), 0 24px 44px -26px rgb(14 24 26 / .7); }
  .ruler { margin-top: 14px; }
  .ruler i { padding-left: 3px; }
  .ruler i:first-child { font-size: 0; }
  .ruler i:first-child::before { content: "1"; font-size: 12px; }
  .ruler i:last-of-type { padding: 0; overflow: visible; }

  h2 { font-size: clamp(1.75rem, 8.2vw, 2.25rem); line-height: 1.17; }
  h2 .t2, h2 .ln { display: block; }
  .head { padding: 36px var(--inset) 20px; }
  .head__l { gap: 12px; }
  .ticks li { font-size: 1rem; }

  .check__ask { padding: 36px var(--inset) 8px; }
  .check__ask h2 { margin-top: 12px; }
  .check__sub { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
  .head__sub, .chart__body, .letter, .vital__res, .ende__sub { font-size: 1rem; line-height: 1.5; }
  .befund__list h4, .plan__pre h3, .preis__more h3 { font-size: 1rem; line-height: 1.4; }
  .probe { padding-top: 16px; }
  .probe__row { flex-direction: column; align-items: stretch; padding: 0; gap: 8px; background: none; border: 0; border-radius: 0; }
  .probe__row:focus-within { box-shadow: none; }
  .probe input { flex: none; height: 54px; padding: 0 18px; background: var(--card); border: 1px solid var(--rule-2); border-radius: 999px; }
  .probe input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .probe .btn { width: 100%; --h: 54px; }
  .reading { --sy: 76px; --sh: 92px; padding: 16px; scroll-margin-bottom: 96px; } /* beside the number, off the label and the sentence: in px, the panel's height changes with its state, the number's place does not */
  .reading__v { font-size: 4.5rem; }
  .voice__q p { font-size: 1.25rem; line-height: 1.4; }
  .reading__big { margin-top: 6px; }
  /* On a phone the panel fills the screen: the number says what it means before it ends. The h3 stays for focus and the live region. */
  .reading[data-state="done"] .reading__say { display: block; margin-top: 10px; font-size: 1.125rem; line-height: 1.33; }
  .befund__score { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .scope { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; padding: 12px; margin-top: 12px; }
  .scope__g:first-child { grid-row: span 2; }
  .gauges { grid-template-columns: minmax(0, 1fr); }
  .reading[data-state="idle"] .gauges { display: none; }
  .reading[data-state="idle"] .plate { display: none; }
  .befund { padding: 8px var(--inset) 20px; scroll-margin-bottom: 96px; }
  .befund__list li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .befund__list .eff { order: 3; white-space: normal; }
  .befund__act { flex-direction: column; align-items: stretch; gap: 4px; }
  .befund__act .btn { --h: 56px; padding: 8px 14px; }
  .befund__act .quiet { justify-content: center; }
  .check__room.is-done .check__ask { padding: 16px var(--inset) 8px; }

  .vital__stage { display: block; padding-bottom: 20px; }
  .vital__head { padding: 36px var(--inset) 0; }
  .vital__head h2 { margin-top: 12px; font-size: clamp(1.75rem, 8.2vw, 2.25rem); line-height: 1.17; }
  .vital__list { margin-top: 16px; padding: 0 var(--inset); }
  .vital__list li { padding: 11px 0; }
  .vital__list li::before, .vital__a { display: none; }
  .vital__view { margin-top: 12px; padding: 0 var(--inset); border: 0; }
  .frame { display: contents; }
  .frame__screen { box-shadow: 0 0 0 1px var(--rule-2); }
  .frame__view { aspect-ratio: 5 / 6; }
  .pin { display: none; }
  .leads { display: block; position: static; margin-top: 8px; }
  .lead { position: static; min-height: 52px; align-items: center; transform: none; border-bottom: 1px solid var(--rule); }
  .lead__t { position: relative; height: auto; padding: 0 0 0 28px; font: 400 1rem/1.4 Geist, "Geist Fallback", system-ui, sans-serif; white-space: normal; background: none; box-shadow: none; }
  .lead__t::after { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231b2a2b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.6l3.6 3.4 7.4-8'/%3E%3C/svg%3E") center / 20px no-repeat; }
  .vital__res { margin-top: 14px; padding: 0; }

  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file, .file:first-child { padding: 12px var(--inset) 13px; border-left: 0; }
  .file:nth-child(even) { border-left: 1px solid var(--rule); }
  .file:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .file__t { font-size: 1.125rem; }
  .file__s { font-size: .875rem; line-height: 1.43; }
  .chart__text { padding: 20px var(--inset) 12px; }
  .chart__body { margin-top: 12px; }
  .chart__text .ticks { margin-top: 0; padding-top: 16px; }
  .chart__fig { height: 380px; padding-top: 24px; }
  .handset { width: 62%; border-radius: 22px; box-shadow: 0 0 0 4px rgb(255 255 255 / .34), 0 22px 44px -22px rgb(14 24 26 / .7); }

  .plan__pre ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .load { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .load__r > div { padding-inline: var(--inset) 8px; }
  .load__r > div + div { padding-inline: 12px 8px; }
  .load__r dt, .load__r dd { font-size: .875rem; }

  .ex__grid { grid-template-columns: minmax(0, 1fr); }
  .ex__i:nth-child(odd) { border-right: 0; }
  .ex__i:nth-child(n+2), :root[data-seg="kanzlei"] .ex--ordination, :root[data-seg="handwerk"] .ex--ordination { border-top: 1px solid var(--rule); }
  .ex__stage { aspect-ratio: auto; height: 330px; background: var(--card); }
  .ex__desk { display: none; }
  .ex__phone { left: 50%; right: auto; top: 20px; width: 232px; margin-left: -116px; }
  .ex__line { padding: 14px var(--inset) 16px; }

  .t10__card { padding-block: 20px; }
  .t10__line { display: block; }
  .t10__eur { font-size: min(4rem, 25vw); }
  :root[data-seg="kanzlei"] .t10__eur, :root[data-seg="handwerk"] .t10__eur { font-size: min(5rem, 25vw); }
  .t10__vat { margin-top: 6px; }
  .t10__in { padding-block: 20px; }
  .t10__act .btn { width: 100%; --h: 54px; }
  .preis__more { grid-template-columns: minmax(0, 1fr); }
  .preis__more > div, .preis__more > .preis__why { padding: 16px var(--inset) 18px; border-left: 0; }
  .preis__more > div + div { border-top: 1px solid var(--line); }

  .ueber__l { padding: 36px var(--inset) 20px; }
  .ueber__l h2 { margin-top: 12px; font-size: clamp(1.625rem, 7.4vw, 2rem); }
  .report div { grid-template-columns: minmax(0, 1fr); padding: 12px var(--inset); }

  .person__fig img { object-position: 50% 18%; }
  .person__fig .pending { left: 20px; bottom: 20px; }
  .person__text { padding: 24px var(--inset) 12px; }
  .letter { margin-top: 20px; }
  .letter__sig { padding-top: 12px; }

  .work__flag { margin-bottom: 12px; }
  .case__stage { aspect-ratio: 4 / 3; }
  .case__desk { left: 4%; top: 8%; width: 76%; }
  .case__phone { width: 25%; top: 20%; right: 4%; border-radius: 12px; }
  .case__text { padding: 20px var(--inset) 18px; }
  .work__foot { grid-template-columns: minmax(0, 1fr); padding-bottom: 14px; }

  .fragen__h { padding: 36px var(--inset) 20px; }
  .faq summary { min-height: 60px; padding: 12px 48px 12px var(--inset); font-size: 1rem; line-height: 1.4; }
  .faq details p { padding: 0 var(--inset) 18px; }

  .ende { --sx: 50%; --sy: 84%; --sw: 80%; --sh: 26%; --la: 0; }
  .ende__in { margin: 0; border: 0; }
  .ende__say { padding: 36px var(--inset) 12px; }
  .ende__sub { margin-top: 12px; }
  .ende__card { margin: var(--cell); padding: 8px 16px 8px; }
  .ende__end { margin: 0; padding-inline: var(--inset); border: 0; }
  .ende__end .ruler i:last-of-type { padding: 0; }
  .field label { display: block; min-height: 44px; padding: 14px 0 5px; }
  .consent { margin-top: 10px; }
  .foot__in { grid-template-columns: minmax(0, 1fr); padding-block: 14px 8px; }

  .js body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .js .dock {
    position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 50;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 6px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 0 0 1px var(--rule-2), 0 14px 34px -14px rgb(14 24 26 / .5);
    transform: translateY(calc(100% + 40px)); visibility: hidden;
    transition: transform var(--beat) var(--ease), visibility 0s linear var(--beat);
  }
  .js .dock.is-on { transform: none; visibility: visible; transition: transform var(--beat) var(--ease); }
  .dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; font-weight: 500; line-height: 1.2; text-decoration: none; border-radius: 11px; }
  .dock small { font-size: .875rem; font-weight: 400; color: var(--body); }
  .dock__a { color: var(--ink); background: var(--card); }
  .dock__b { color: #fff; background: var(--ink); }
}

/* The phone sequence: the frame sticks, the readings pass under it, the thumb stays in charge. */
@media screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .frame__screen { position: sticky; top: 8px; z-index: 2; box-shadow: 0 0 0 1px var(--rule-2), 0 0 0 9px #fff; }
  .js .frame__view { aspect-ratio: auto; height: min(calc((100vw - 32px) * 1.1), 52svh); }
  .is-live .frame__cap--old { display: inline; }
  .is-live .frame__img--new { clip-path: inset(0 0 100% 0); }
  .is-live .scan { opacity: 1; }
  .is-live .lead__t::after { opacity: .22; transition: opacity var(--fast) var(--ease); }
  .is-live .lead.is-on .lead__t::after { opacity: 1; }
}

/* Short phones: the promise, the two numbers and the button still share the first screen. */
@media (max-width: 767px) and (max-height: 720px) {
  .hero__lead { padding-block: 12px 14px; }
  .h1 { font-size: clamp(2rem, 10vw, 2.625rem); }
  .hero__promise { margin-top: 8px; font-size: 1rem; }
  .hero__cta { margin-top: 12px; }
  .hero__cta .btn { --h: 50px; }
}
@media (max-width: 360px) {
  .hero__cta .btn { font-size: .875rem; }
  .facts__u { font-size: .875rem; }
  .scope { grid-template-columns: minmax(0, 1fr); }
  .scope__g:first-child { grid-row: auto; }
}
/* One line for the label, so the two facts in this row start level. */
@media (max-width: 349px) {
  .facts__ihr { display: none; }
}
/* The 9 would run under the Live tag. Its tick stays. */
@media (max-width: 17.5rem) {
  .ruler i:nth-of-type(9) { font-size: 0; }
}
/* Safari's largest text sizes leave a layout about this wide. */
@media (max-width: 260px) {
  .brand__word { display: none; }
  .ex__phone { left: 16px; width: calc(100% - 32px); margin-left: 0; }
  h2 { font-size: 1.5rem; }
  .reading__big { flex-wrap: wrap; gap: 0 14px; }
  .gauge__lim { position: static; transform: none; display: block; }
  .load { grid-template-columns: minmax(0, 1fr); }
  .load__r > div, .load__r > div + div { border-left: 0; padding-inline: var(--inset) 12px; }
  .ende__say h2 { font-size: 1.75rem; }
  .stop .nb { white-space: normal; }
}

/* ---- On paper: the finished sequence, wherever the page stood. Timelines leave their state inline. ---- */
@media print {
  .frame__img--new, .slice__fin { clip-path: none !important; }
  .slice__bars { display: none; } /* with backgrounds off a dialog fills this box white, right over the plate */
  .slice__view { break-inside: avoid; box-shadow: none !important; }
  .js body { background: none; }
  .facts { break-inside: avoid; }
  .faq details[open] p { animation: none; } /* every row opens at once for paper: no answer may print mid-fade */
  .gap { display: none; }
  /* Dialogs drop the fog and leave its white text pale grey: on paper the price is ink. */
  .hero.fog { --on: var(--ink); --on-2: var(--ink); --line: var(--rule-2); background: none; }
  .hero.fog::before { display: none; }
  .hero .t2 { color: var(--tone); }
  /* What was white on the fog alone: the buttons and the ticks, and a tick is a background too. */
  .hero .btn { color: var(--ink); border-color: var(--rule-2); }
  .hero .ruler i::after, .preis .ruler i::after { background: var(--tone); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .preis, .reading, .ende, .line { --on: var(--ink); --on-2: var(--ink); --line: var(--rule-2); background: none; }
  .preis::before, .reading::before, .ende::before, .line::before { display: none; }
  .scope li[data-s="fail"] { color: var(--ink); }
  .probe .btn, .ende__card .btn { color: var(--ink); background: none; border: 1px solid var(--rule-2); }
  .preis .chip, .t10__pay { color: var(--ink); }
  .preis h2 .t2 { color: var(--tone); }
  .frame__cap:not(.frame__cap--old), .vital__res { opacity: 1 !important; visibility: visible !important; }
  .scan, .dock { display: none !important; }
  .bar { position: relative; top: 0; color: var(--ink); background: none; box-shadow: none; } /* not static: the hero would paint over it */
  .vital__p { color: var(--tone); text-decoration-color: currentColor; }
  .vital__list li::before, .vital__list li.is-ok::before { color: var(--ink); background: none; box-shadow: inset 0 0 0 1px var(--rule-2); }
  .frame__screen, .ex__i, .ex__stage, .case__stage { break-inside: avoid; }
  /* Dialogs leave backgrounds off by default, and a dot is one. */
  .pin { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* With its margins a sheet of paper comes out at phone width. It still has room for the dots and their numbers. */
@media print and (max-width: 767px) {
  .vital__list li { padding: 12px 0 12px 32px; }
  .vital__list li::before { display: grid; }
  .vital__a { display: block; }
  .frame__view { aspect-ratio: 16 / 10; }
  .pin { display: grid; }
  .leads { display: none; }
}

/* Last, because the font shorthand resets it: ss09 is Geist Mono's plain zero. */
.lab, .chip, .ruler, .ruler__live, .pin, .vital__list li::before, .facts__i dt, .reading__lab, .gauge__s, .frame__bar, .stop__day, .t10__meta, .t10__pay, .pending { font-feature-settings: "ss09" 1; }