/* Hallmark · shape: Marquee Hero (/), Index-First (/notar, /recht, /service), Long Document (Rechtsgebiete, Kosten, Impressum, Datenschutz), Letter (/ueber-uns) · genre: editorial · theme: Grid (deal 3/3, seed einer-anwalts--und-notarkanzlei-f43e·1f08ff2c·2026-10-24·r0) · redesign: full · draw: 932130 · job: book (by phone)
 * hero: Stage (/), Banner (every other route) · nav: masthead (three-part, centred wordmark) · footer: index columns · imagery: the user's portraits (2), the street plan drawn from OpenStreetMap data · signature: the Ortsmitte plan in the ultramarine field, the motto overprinting it; on /notar the sample deed that drafts, is read, signed, sealed and copied as the three steps scroll
 * axes: light/grotesk-sans/cool · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a motto is only a tone; the fee rule in the red field is the page's argument and the hours band proves the phone is the way in */
/* Hallmark · dismissed 25 · .years__text is one sentence under a figure, a caption that may sit from 28ch */
/* Hallmark · dismissed 77 · the inner routes of the Kanzlei are Long Document and Letter pages, one reading column between page head and footer */
/* Hallmark · waive 44c · Banner posture on every route but the start page · a reading page about Arbeitsrecht or Kosten should show its first topic above the fold, not a poster */
/* Hallmark · waive 78 · Long Document and Letter routes set heads in the margin column · on the reading pages of the Kanzlei Swienty, from Arbeitsrecht to Datenschutz, each head annotates the text beside it */
/* Hallmark · waive 49b · real phrases at 320px, two lines at most · German compounds like Kosten und Rechtsschutz and the BfDI web address cannot shorten without losing meaning */
/* Impeccable · direction: Liegenschaftskarte und Grundbuch, seed:9476b6cfe930a3ca, code-led */
@import url("./tokens.css");
@import url("./base.css");
@import url("./fonts.css");

/* ---------------------------------------------------------------- base */
body { font-size: var(--text-body); line-height: 1.6; }
h1 { font-size: var(--text-display); line-height: 1; }
h2 { line-height: 1.02; }
.lead { color: var(--color-ink-2); }
small, .small { font-size: var(--text-sm); }
.field { background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-ink); }
.field--mark { background: var(--color-mark); color: var(--color-mark-ink); --color-focus: var(--color-ink); }
.field .lead, .field--mark .lead { color: inherit; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* ---------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); }

.link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.32em; transition: color var(--dur-short) var(--ease-out), text-decoration-thickness var(--dur-micro) var(--ease-out); }
.link:hover { color: var(--color-mark); }
.link:active { text-decoration-thickness: 3px; }
.link--on-field:hover, .field .link:hover { color: inherit; text-decoration-thickness: 3px; }
main a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-short) var(--ease-out); }
main a:not([class]):hover { color: var(--color-mark); }
.field a:not([class]):hover { color: inherit; text-decoration-thickness: 3px; }

/* ---------------------------------------------------------------- masthead */
.masthead { position: relative; z-index: var(--z-raised); background: var(--color-paper); }
.masthead__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--space-lg); min-height: var(--nav-h); }
.masthead__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.masthead__links a, .menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-md); font-weight: 500; text-decoration: none; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }
.masthead__links a:hover { text-decoration-line: underline; }
.masthead__links a[aria-current="page"], .menu a[aria-current="page"] { text-decoration-line: underline; text-decoration-thickness: 3px; }
.masthead__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-lg); }
.wordmark { display: inline-grid; grid-template-columns: auto auto; column-gap: var(--space-sm); align-items: center; font: var(--display-weight) 1.25rem/0.98 var(--font-display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.wordmark::before { content: ""; grid-row: span 2; align-self: stretch; aspect-ratio: 1; background: var(--color-mark); }
.wordmark__name { font-weight: 700; }
.wordmark__role { font-weight: 400; }
.menu-toggle { display: none; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.menu-toggle:hover { background: var(--color-paper-2); }
.menu-toggle:active { transform: translateY(1px); }
.menu-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.menu { background: var(--color-paper); padding-block: var(--space-md) var(--space-xl); }
.menu ul { display: grid; gap: var(--space-2xs); margin: 0; list-style: none; }
.menu a { font: var(--display-weight) var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.02em; min-height: 52px; }

@media (max-width: 72rem) {
  .masthead__bar { grid-template-columns: auto minmax(0, 1fr); }
  .masthead__links { display: none; }
  .masthead__end { gap: var(--space-xs); }
  .menu-toggle { display: inline-flex; align-items: center; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .menu[hidden] { display: block !important; }
}
@media (min-width: 72.0625rem) { .menu { display: none !important; } }
@media (max-width: 40rem) {
  .masthead .btn--nav { display: none; }
  .wordmark { font-size: 1.0625rem; }
}

/* ---------------------------------------------------------------- hero (start page) */
.hero__grid {
  display: grid;
  grid-template-columns: [full-start] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr) [content-start] repeat(12, minmax(0, calc((var(--container) - 2 * var(--gutter) - 11 * var(--gap-columns)) / 12))) [content-end] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr) [full-end];
  column-gap: var(--gap-columns);
  min-height: clamp(36rem, calc(100svh - var(--nav-h)), 62rem);
}
.hero__field { grid-column: 9 / full-end; grid-row: 1; position: relative; overflow: hidden; }
.hero__plan { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; }
.hero__map { flex: 1; min-height: 0; }
.hero__map, .hero__map svg { width: 100%; height: 100%; }
.hero__caption { display: grid; gap: var(--space-2xs); padding: var(--space-lg) var(--space-xl) var(--space-xl); background: var(--color-field); color: var(--color-field-ink); font-size: var(--text-md); }
.hero__street { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.02em; }
.hero__text { grid-column: content-start / content-end; grid-row: 1; align-self: center; position: relative; z-index: var(--z-raised); padding-block: var(--space-2xl) var(--space-3xl); pointer-events: none; }
.hero__text a { pointer-events: auto; }
.hero__head { position: relative; }
.poster { margin: 0; max-width: none; font: var(--display-weight) var(--text-poster)/0.92 var(--font-display); letter-spacing: -0.045em; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; text-wrap: initial; }
/* SplitText masks clip at the line box; give descenders (g, p) and accents room without moving the lines */
.poster .sl-mask { padding-block: 0.06em 0.16em; margin-block: -0.06em -0.16em; }
.poster--overprint { position: absolute; inset: 0; color: var(--color-field-ink); clip-path: inset(0 0 0 calc(7 * (100% + var(--gap-columns)) / 12)); }
.hero__lede { max-width: 34ch; margin-top: var(--space-xl); font-size: var(--text-lead); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }

.status { font-size: var(--text-md); }

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [content-end] var(--gutter) [full-end]; column-gap: 0; min-height: 0; }
  .hero__text { grid-row: 1; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__field { grid-column: full-start / full-end; grid-row: 2; min-height: min(34rem, 78svh); }
  .poster--overprint { display: none; }
  .hero__caption { padding: var(--space-md) var(--gutter) var(--space-lg); }
}
@media (max-width: 40rem) { .poster__br { display: none; } }

/* ---------------------------------------------------------------- the street plan */
.plan { display: block; width: 100%; height: 100%; color: inherit; }
.plan path { vector-effect: non-scaling-stroke; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.plan .plan__houses { stroke-width: 0.75; opacity: 0.42; }
.plan .plan__green { stroke: none; fill: currentColor; opacity: 0.08; }
.plan__paths path { stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.55; }
.plan__minor path { stroke-width: 1.6; opacity: 0.8; }
.plan__major path { stroke-width: 3.2; }
.plan__focus path { stroke-width: 7; }
.plan__label { font: 500 13px var(--font-body); fill: currentColor; paint-order: stroke; stroke: var(--plan-ground, var(--color-field)); stroke-width: 4px; stroke-linejoin: round; }
.plan__label--focus { font-size: 17px; }
.plan__scale path { stroke-width: 2; }
.plan__scale text, .plan__north text { font: 500 12px var(--font-body); fill: currentColor; }
.plan__north path { stroke-width: 1.6; }
.field .plan { --plan-ground: var(--color-field); }

/* the plan on paper (Anfahrt): the street is the one red mark */
.plan-paper { --plan-ground: var(--color-paper); color: var(--color-ink); }
.plan-paper .plan .plan__houses { opacity: 0.3; }
.plan-paper .plan__focus path { stroke: var(--color-mark); stroke-width: 8; }
.plan-paper .plan__label--focus { fill: var(--color-mark); }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section-gap); }
.section--roles { padding-block: var(--section-gap-l) var(--section-gap); }
.section--areas { padding-top: var(--space-3xl); }
.section--person { padding-block: var(--section-gap-s) var(--section-gap-l); }
.section--close { padding-block: var(--section-gap) var(--section-gap-s); }
.head { margin-bottom: var(--space-2xl); }
.head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.head--split h2 { grid-column: 1 / 8; }
.head--split .lead { grid-column: 8 / 13; max-width: 40ch; }
@media (max-width: 60rem) { .head--split { display: block; } .head--split .lead { margin-top: var(--space-md); } }

/* ---------------------------------------------------------------- switcher + index */
.switch__tabs { position: relative; display: flex; gap: var(--space-xl); margin-bottom: var(--space-xl); }
@media (max-width: 40rem) { .switch__tabs { flex-wrap: wrap; gap: 0 var(--space-lg); } .switch__tab { font-size: clamp(1.0625rem, 4.8vw, var(--text-xl)); } }
.switch__tab { position: relative; white-space: nowrap; min-height: 52px; padding: 0; border: 0; background: none; color: var(--color-muted); font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: -0.025em; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.switch__tab:hover { color: var(--color-ink); }
.switch__tab:active { transform: translateY(1px); }
.switch__tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.switch__tab[aria-selected="true"] { color: var(--color-ink); }
.switch__bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--color-ink); pointer-events: none; }
.switch__fallback { display: none; }
html:not(.js) .switch__tabs { display: none; }
html:not(.js) .switch__fallback { display: block; margin: var(--space-2xl) 0 var(--space-lg); font-size: var(--text-2xl); }

.index { margin: 0; padding: 0; list-style: none; }
.index li + li a { border-top: 1px solid var(--color-rule); }
.index a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); text-decoration: none; transition: opacity var(--dur-short) var(--ease-out); }
.index__title { grid-column: 1 / 6; font: var(--display-weight) var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; transition: color var(--dur-short) var(--ease-out); }
.index__line { grid-column: 6 / 13; color: var(--color-ink-2); }
.index--large a { padding-block: var(--space-xl); }
.index--large .index__title { grid-column: 1 / 8; font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.035em; }
.index--large .index__line { grid-column: 8 / 13; }
.index a:hover .index__title { color: var(--color-mark); }
.index a:visited .index__title { color: var(--color-ink-2); }
.index:has(a:hover) a:not(:hover), .index:has(a:focus-visible) a:not(:focus-visible) { opacity: 0.38; }
.index a:focus-visible { outline-offset: -2px; }
@media (max-width: 60rem) {
  .index a, .index--large a { display: block; padding-block: var(--space-md); }
  .index__line { display: block; margin-top: var(--space-2xs); }
}

/* ---------------------------------------------------------------- person + years */
.person { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.person__photo { grid-column: 2 / 5; aspect-ratio: 6 / 7; margin: 0; }
.person__body { grid-column: 6 / 13; }
.person__body .lead { margin-top: var(--space-lg); max-width: 46ch; }
.person__more { margin-top: var(--space-xl); }
.years { margin-top: var(--space-2xl); }
.years__line { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.years__tab { min-height: 48px; padding: 0; border: 0; background: none; color: var(--color-muted); font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-decoration: none; text-underline-offset: 0.22em; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.years__tab:hover { color: var(--color-ink); }
.years__tab:active { transform: translateY(1px); }
.years__tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.years__tab[aria-selected="true"] { color: var(--color-mark); text-decoration: underline 3px; }
.years__panel { margin-top: var(--space-xl); }
.years__big { overflow: hidden; margin: 0; font: var(--display-weight) var(--text-figure)/0.86 var(--font-display); letter-spacing: -0.055em; color: var(--color-mark); font-variant-numeric: tabular-nums; }
.years__big span { display: inline-block; }
.years__text { max-width: 36ch; margin-top: var(--space-md); font-size: var(--text-lead); }
.years__list { display: grid; gap: var(--space-sm); margin: 0; }
.years__list div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-md); }
.years__list dt { font: var(--display-weight) var(--text-lg)/1.3 var(--font-display); }
.years__list dd { margin: 0; }
html:not(.js) .years__line, html:not(.js) .years__panel { display: none; }
.js .years__list { display: none; }
@media (max-width: 60rem) {
  .person__photo { grid-column: 1 / 8; max-width: 300px; }
  .person__body { grid-column: 1 / -1; margin-top: var(--space-xl); }
}

/* ---------------------------------------------------------------- statement on the red field */
.statement { padding-block: var(--section-gap-s); }
.statement__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.statement__text { grid-column: 1 / 10; max-width: none; font: 400 var(--text-statement)/1.05 var(--font-display); letter-spacing: -0.03em; }
.statement__aside { grid-column: 10 / 13; display: grid; gap: var(--space-md); font-size: var(--text-xl); line-height: 1.35; }
@media (max-width: 60rem) { .statement__text, .statement__aside { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- close: phone, portrait, hours */
.close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.close__text { grid-column: 1 / 8; }
.close__text .lead { margin-top: var(--space-lg); max-width: 46ch; }
.close__phone { margin-top: var(--space-xl); }
.close__phone a { font: var(--display-weight) var(--text-phone)/0.95 var(--font-display); letter-spacing: -0.045em; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.close__phone a:hover { color: var(--color-mark); }
.close__mail { margin-top: var(--space-md); font-size: var(--text-lead); }
.close__photo { grid-column: 9 / 12; aspect-ratio: 6 / 7; margin: 0; }
.close .hours { grid-column: 1 / -1; margin-top: var(--space-3xl); }
@media (max-width: 60rem) {
  .close__text { grid-column: 1 / -1; }
  .close__photo { grid-column: 1 / 8; max-width: 300px; margin-top: var(--space-xl); }
}

.hours__title { font-size: var(--text-title); margin-bottom: var(--space-lg); }
.hours__axis, .hours__day { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--space-lg); }
.hours__axis { position: relative; height: 1.75rem; font-size: var(--text-sm); color: var(--color-muted); }
.hours__axis::before { content: ""; }
.hours__axis span { position: absolute; left: calc(9rem + var(--space-lg) + (100% - 9rem - var(--space-lg)) * var(--at) / 10); transform: translateX(-50%); white-space: nowrap; }
.hours__axis span:first-child { transform: none; }
.hours__axis span:last-child { transform: translateX(-100%); }
.hours__days { margin: 0; padding: 0; list-style: none; }
.hours__day { align-items: center; min-height: 60px; border-top: 1px solid var(--color-rule); }
.hours__name { font-weight: 500; }
.hours__track { position: relative; height: 40px; background: var(--color-paper-2); }
.hours__open { position: absolute; top: 0; bottom: 0; left: calc(100% * var(--from) / 10); width: calc(100% * (var(--to) - var(--from)) / 10); display: flex; align-items: center; padding-inline: var(--space-sm); overflow: hidden; background: var(--color-field); color: var(--color-field-ink); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours__closed { position: absolute; top: 0; bottom: 0; left: calc(45% + var(--space-md)); display: flex; align-items: center; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.hours__day.is-today .hours__name { color: var(--color-mark); }
.hours__now { position: absolute; top: -14px; bottom: 0; left: calc(100% * var(--now) / 10); width: 2px; margin-left: -1px; background: var(--color-paper); pointer-events: none; }
.hours__now::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; background: var(--color-mark); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (max-width: 40rem) {
  .hours__axis { display: none; }
  .hours__day { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); padding-block: var(--space-sm); }
  .hours__open, .hours__closed { font-size: var(--text-xs); padding-inline: var(--space-xs); }
}

/* ---------------------------------------------------------------- call bar (sticky at the foot, settles above the footer) */
.callbar { position: sticky; bottom: 0; z-index: var(--z-sticky); background: var(--color-paper-2); transition: transform var(--dur-long) var(--ease-out); }
.callbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--callbar-h); padding-block: var(--space-xs); }
.callbar__status { font-weight: 500; }
.callbar__call { min-height: 48px; }
.js .callbar.is-tucked { transform: translateY(100%); }
@media (max-width: 40rem) { .callbar__row { min-height: 64px; } .callbar__status { font-size: var(--text-xs); line-height: 1.3; } .callbar__call { padding-inline: var(--space-md); } }
@media (prefers-reduced-motion: reduce) { .callbar { transition: none; } }

/* ---------------------------------------------------------------- footer on the ultramarine field */
.footer { padding-block: var(--section-gap-s) var(--space-2xl); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.footer__office { grid-column: 1 / 5; }
.footer__name { font: var(--display-weight) var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.025em; max-width: 14ch; }
.footer address { margin-top: var(--space-lg); font-style: normal; }
.footer__lines { display: grid; gap: var(--space-2xs); margin: var(--space-lg) 0 0; }
.footer__lines div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); }
.footer__lines dt { font-weight: 500; }
.footer__lines dd { margin: 0; }
.footer__index { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: var(--gap-columns); }
.footer__head { font-weight: 500; margin-bottom: var(--space-sm); }
.footer ul { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.footer a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-micro) var(--ease-out); }
.footer a:hover { text-decoration-thickness: 3px; }
.footer__index a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; }
.footer__index a:hover { text-decoration: underline 3px; }
.footer__legal { display: grid; gap: var(--space-xs); margin-top: var(--space-3xl); font-size: var(--text-sm); }
.footer__legal p { max-width: 72ch; }
@media (max-width: 72rem) { .footer__office, .footer__index { grid-column: 1 / -1; } }
@media (max-width: 22rem) { .footer__lines div { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 60rem) {
  .footer__index { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); row-gap: var(--space-xl); }
}

/* ---------------------------------------------------------------- page head (every route but the start page) */
.pagehead__grid {
  display: grid;
  grid-template-columns: [full-start] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr) [content-start] repeat(12, minmax(0, calc((var(--container) - 2 * var(--gutter) - 11 * var(--gap-columns)) / 12))) [content-end] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr) [full-end];
  column-gap: var(--gap-columns);
  min-height: clamp(22rem, 46svh, 30rem);
}
.pagehead__text { grid-column: content-start / span 8; grid-row: 1; align-self: center; padding-block: var(--space-2xl) var(--space-3xl); }
.pagehead__text h1 { font-size: clamp(2.5rem, 3.6vw + 0.75rem, 4.5rem); }
.pagehead__text .lead { margin-top: var(--space-lg); max-width: 46ch; }
.pagehead__crumb { margin-bottom: var(--space-lg); font-size: var(--text-md); }
.pagehead__crumb a { text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.pagehead__field { grid-column: 11 / full-end; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-2xl) var(--space-xl); }
.pagehead__field--wide { grid-column: 10 / full-end; }
.pagehead__label { font-weight: 500; margin-bottom: var(--space-md); }
.toc { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; min-height: 36px; align-items: center; font-weight: 500; text-decoration: none; text-underline-offset: 0.3em; }
.toc a:hover { text-decoration: underline 1px; }
.toc a.is-current { text-decoration: underline 3px; }
.pagehead__figure { margin: 0; font: var(--display-weight) clamp(2rem, 2.4vw + 0.5rem, 3.25rem)/1 var(--font-display); letter-spacing: -0.035em; overflow-wrap: break-word; min-width: 0; }
.pagehead__figure p { margin: 0; }
figure.pagehead__field { margin: 0; }
figure.pagehead__field figcaption { margin-top: var(--space-lg); }
.pagehead__figure a { text-decoration: none; }
.pagehead__figure a:hover { text-decoration: underline 3px; text-underline-offset: 0.12em; }
@media (min-width: 60.0625rem) and (max-width: 90rem) {
  .pagehead__text { grid-column: content-start / span 7; }
  .pagehead__field, .pagehead__field--wide { grid-column: 9 / full-end; }
}
@media (max-width: 60rem) {
  .pagehead__grid { grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [content-end] var(--gutter) [full-end]; column-gap: 0; min-height: 0; }
  .pagehead__text { grid-column: content-start / content-end; padding-block: var(--space-xl) var(--space-2xl); }
  .pagehead__field, .pagehead__field--wide { grid-column: full-start / full-end; grid-row: 2; padding: var(--space-xl) var(--gutter); }
}

/* ---------------------------------------------------------------- reading pages: heads in the margin column */
.doc { padding-block: var(--section-gap-s) var(--section-gap); }
.doc__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-bottom: var(--space-3xl); }
.doc__intro > * { grid-column: 5 / 12; }
.doc__intro p + p { margin-top: var(--space-md); }
.doc__intro .statement-s { font: 400 var(--text-statement)/1.08 var(--font-display); letter-spacing: -0.03em; max-width: 24ch; }
.doc > .container > .topic:first-child { padding-top: var(--space-lg); }
.topic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); scroll-margin-top: var(--space-xl); }
.topic > h2 { grid-column: 1 / 5; font-size: var(--text-topic); line-height: 1.1; letter-spacing: -0.025em; max-width: 18ch; }
.topic__body { grid-column: 5 / 12; }
.topic__body p, .doc__intro p { max-width: 65ch; line-height: 1.7; }
.topic__body p + p, .topic__body p + ul, .topic__body ul + p { margin-top: var(--space-md); }
.topic__body ul { margin: 0; padding-left: 1.1em; }
.topic__body a, .doc__intro a { overflow-wrap: anywhere; }
.topic__body li + li { margin-top: var(--space-2xs); }
.topic__body h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-title); }
.topic__body h3:first-child { margin-top: 0; }
.topic--plain > h2 { font-size: var(--text-title); }
@media (max-width: 60rem) {
  .doc__intro > *, .topic > h2, .topic__body { grid-column: 1 / -1; }
  .topic__body { margin-top: var(--space-md); }
}

/* the nine notary groups: one inventory */
.groups { padding-block: var(--section-gap-s) var(--section-gap); }
.group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); scroll-margin-top: var(--space-xl); }
.group > h2 { grid-column: 1 / 5; font-size: var(--text-topic); line-height: 1.1; letter-spacing: -0.025em; }
.group ul { grid-column: 5 / 13; columns: 2; column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.group li { break-inside: avoid; padding-block: var(--space-2xs); }
.group__note { grid-column: 5 / 12; margin-top: var(--space-md); color: var(--color-ink-2); }
.group:target > h2 { color: var(--color-mark); }
@media (max-width: 60rem) { .group > h2, .group ul, .group__note { grid-column: 1 / -1; } .group ul { columns: 1; margin-top: var(--space-md); } }

/* a band that hands over to the phone */
.band { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.band__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; }
.band__grid h2 { grid-column: 1 / 8; }
.band__grid .band__act { grid-column: 9 / 13; display: grid; gap: var(--space-sm); justify-items: start; }
.band__phone { font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: -0.04em; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.band__phone:hover { color: var(--color-mark); }
@media (max-width: 60rem) { .band__grid h2, .band__grid .band__act { grid-column: 1 / -1; } }

/* cards of people on Kanzlei */
.people { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-3xl); }
.people__item { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap-columns); grid-column: span 6; align-items: end; }
.people__item figure { grid-column: 1 / 4; aspect-ratio: 6 / 7; margin: 0; }
.people__item div { grid-column: 4 / 7; }
.people__item h2 { font-size: var(--text-topic); line-height: 1.1; }
.people__item p { margin-top: var(--space-sm); }
.people__item a.link { display: inline-block; margin-top: var(--space-md); }
@media (max-width: 60rem) { .people__item { grid-column: 1 / -1; } }

/* CV table */
.cv { width: 100%; border-collapse: collapse; }
.cv th, .cv td { padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; }
.cv th { width: 9rem; font: var(--display-weight) var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv th[scope="col"] { font: 500 var(--text-sm)/1.2 var(--font-body); letter-spacing: 0; color: var(--color-muted); border-top: 0; padding-top: 0; }

/* Kontakt: the number is the content */
.contact { padding-block: var(--section-gap-s) 0; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.contact__phone { grid-column: 1 / -1; }
.contact__phone .lead { margin-top: var(--space-lg); }
.contact__number { margin-top: var(--space-xl); }
.contact__phone .contact__number a { font: var(--display-weight) var(--text-poster)/0.9 var(--font-display); letter-spacing: -0.05em; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.contact__phone .contact__number a:hover { color: var(--color-mark); }
.contact__block { grid-column: span 4; }
.contact__block h2 { font-size: var(--text-title); margin-bottom: var(--space-sm); }
.contact__block address { font-style: normal; }
.section--hours { padding-block: var(--section-gap-s) var(--section-gap); }
@media (max-width: 60rem) { .contact__block { grid-column: 1 / -1; } }

/* Anfahrt */
.route { padding-block: var(--section-gap-s) var(--section-gap); }
.route__map { margin: 0; aspect-ratio: 1100 / 760; width: 100%; background: var(--color-paper); }
.route__map svg { width: 100%; height: 100%; }
.route__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.route__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }
@media (max-width: 40rem) { .route__map { aspect-ratio: 4 / 5; } }

/* legal text */
.legal h2 { font-size: var(--text-topic); }
.legal .topic__body h3 { font-size: var(--text-lg); }

/* 404 */
.lost { padding-block: var(--section-gap-s) var(--section-gap); }

/* ---------------------------------------------------------------- Notariat: the deed follows the three steps */
/* Base state is the finished deed (drafted, signed, sealed, copies out). The scrub in site.js rewinds it
   to a blank sheet and plays it forward with the reader's scroll, only on wide screens with motion allowed. */
.ablauf { padding-block: var(--section-gap); }
.ablauf .head { margin-bottom: var(--space-2xl); }
.ablauf__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.ablauf__stage { grid-column: 1 / 7; position: sticky; top: var(--space-xl); display: flex; align-items: center; min-height: calc(100svh - 2 * var(--space-xl) - var(--callbar-h)); }
.ablauf__steps { grid-column: 8 / 13; margin: 0; padding: 0; list-style: none; }
.ablauf__step { padding-block: var(--space-xl) var(--space-2xl); border-top: 1px solid color-mix(in oklab, var(--color-field-ink) 35%, transparent); }
.ablauf__step h3 { font-size: var(--text-topic); line-height: 1.1; letter-spacing: -0.025em; }
.ablauf__step p { margin-top: var(--space-md); max-width: 46ch; line-height: 1.6; }
.ablauf.is-scrubbed .ablauf__step { min-height: 66svh; }
.ablauf.is-scrubbed .ablauf__step:first-child { margin-top: 18svh; }
.ablauf__step.is-current { border-top-color: var(--color-field-ink); box-shadow: inset 0 3px 0 var(--color-field-ink); }

.deed { position: relative; width: min(70%, calc((100svh - 2 * var(--space-xl) - var(--callbar-h) - var(--space-2xl)) / 1.414)); aspect-ratio: 1 / 1.414; margin-block: var(--space-xl); container-type: inline-size; color: var(--color-ink); }
.deed__sheet { position: absolute; inset: 0; background: var(--color-paper); }
.deed__sheet--main { z-index: 2; display: flex; flex-direction: column; padding: 9cqw 9cqw 8cqw; font-size: 3.3cqw; line-height: 1.45; }
.deed__sheet--back { --tx: 0%; --ty: 0%; --r: 0deg; transform: translate(var(--tx), var(--ty)) rotate(var(--r)); transform-origin: 0 100%; background: var(--color-paper-2); }
.deed__sheet--grundbuch { z-index: 0; --tx: 38%; --ty: -2%; --r: 3deg; background: var(--color-paper-3); }
.deed__sheet--copy { z-index: 1; --tx: 19%; --ty: 1%; --r: 1deg; }
.deed__sheet--back span { position: absolute; top: 9cqw; right: 4.5cqw; writing-mode: vertical-rl; font-size: 2.9cqw; font-weight: 500; line-height: 1; color: var(--color-ink-2); white-space: nowrap; }
.deed p { margin: 0; max-width: none; }
.deed__nr { align-self: flex-end; font-size: 2.8cqw; color: var(--color-muted); }
.deed__head { margin-top: 3cqw; font: var(--display-weight) 5.4cqw/1.1 var(--font-display); letter-spacing: -0.02em; text-align: center; }
.deed__text { margin-top: 5cqw; }
.deed__para { margin-top: 4.5cqw; font-weight: 500; }
.deed__bars { display: grid; gap: 2.2cqw; margin-top: 2.6cqw; }
.deed__bars i { display: block; width: calc(var(--w) * 100%); height: 1.5cqw; background: var(--color-rule); transform-origin: 0 50%; }
.deed__formula { margin-top: auto !important; padding-top: 4cqw; font-size: 3cqw; }
.deed__signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4cqw; margin-top: 2cqw; }
.deed__sign { display: grid; gap: 1cqw; font-size: 2.6cqw; color: var(--color-muted); }
.deed__sign svg { width: 100%; height: auto; overflow: visible; }
.deed__ink { fill: none; stroke: var(--color-field); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.deed__rule { fill: none; stroke: var(--color-ink); stroke-width: 1; }
.deed__seal { position: absolute; right: 3cqw; bottom: 2.5cqw; width: 19cqw; height: auto; color: var(--color-mark); transform: rotate(-12deg); mix-blend-mode: multiply; }
.deed__seal circle { fill: none; stroke: currentColor; stroke-width: 2.5; }
.deed__seal text { fill: currentColor; font: 500 9.5px var(--font-body); }
.deed__seal .deed__seal-mid { font: var(--display-weight) 15px var(--font-display); }
.deed__reader { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; top: 21%; height: 5.5%; background: color-mix(in oklab, var(--color-field) 22%, transparent); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
@media (max-width: 60rem) {
  .ablauf__grid { display: block; }
  .ablauf__stage { position: static; min-height: 0; justify-content: flex-start; }
  .deed { width: min(70%, 20rem); margin-block: var(--space-md) var(--space-2xl); }
}

/* ---------------------------------------------------------------- motion: entrance state, scoped to script */
.js:not(.js-ready) [data-poster], .js:not(.js-ready) [data-plan] { visibility: hidden; }
.js.motion-off [data-poster], .js.motion-off [data-plan] { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .js [data-poster], .js [data-plan] { visibility: visible; }
  .index a, .index__title, .switch__tab, .years__tab, .link, .btn { transition: none; }
}
.person__body > p:not(.lead):not(.person__more) { margin-top: var(--space-md); max-width: 60ch; }
.person--doc { padding-bottom: var(--space-3xl); }
.person--doc .person__body { align-self: end; }
.person--doc .person__body .lead { margin-top: 0; }