/* Kalinski · Rechtsanwälte in Bürogemeinschaft
   Gestaltung „Satzspiegel“. Regeln, Tokens und Begründungen: design/gestaltungsrichtlinien.md */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- Schriften (selbst gehostet, SIL OFL) ---------- */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metrisch angepasste Fallbacks gegen Layoutsprünge (Werte aus @capsizecss/metrics) */
@font-face { font-family: "Bodoni Moda Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 114.22%; ascent-override: 98.5%; descent-override: 35.02%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 101.17%; ascent-override: 101.32%; descent-override: 27.18%; line-gap-override: 0%; }

/* ---------- Reset ---------- */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  address { font-style: normal; }
  button { font: inherit; color: inherit; }
}

/* ---------- Tokens ---------- */

@layer tokens {
  :root {
    color-scheme: light;

    /* Primitive */
    --ivory-50: #f6f3ee;
    --ivory-100: #e8e2d7;
    --grey-300: #b3b0a8;
    --grey-600: #5c5c57;
    --grey-700: #4a4a46;
    --anthracite-900: #2a2b2d;
    --bronze-300: #c9ad7f;
    --bronze-400: #b89a6c;
    --bronze-500: #9a7b4f;
    --bronze-700: #765c37;
    --bronze-800: #624d2f;
    --tint-todo-paper: #e7e0d5;
    --tint-todo-stone: #ddd3c3;
    --tint-todo-ink: #47423c;
    --tint-hover-ink: #3a3b3e;

    /* Rollen · Theme paper */
    --bg: var(--ivory-50);
    --fg: var(--anthracite-900);
    --fg-2: var(--grey-700);
    --fg-3: var(--grey-600);
    --accent: var(--bronze-500);
    --accent-text: var(--bronze-700);
    --rule: rgb(42 43 45 / .16);
    --rule-col: rgb(42 43 45 / .28);
    --fuge: var(--bronze-500);
    --signet: var(--bronze-500);
    --btn-fg: var(--ivory-50);
    --btn-bg-hover: var(--bronze-700);
    --btn-bg-active: var(--bronze-800);
    --todo-bg: var(--tint-todo-paper);
    --bg-hover: transparent;

    /* Schrift */
    --font-display: "Bodoni Moda", "Bodoni Moda Fallback", serif;
    --font-text: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
    --fs-display: clamp(2.625rem, 1.794rem + 3.696vw, 4.75rem);   /* 42 → 76 */
    --fs-h1: clamp(2.5rem, 2.109rem + 1.739vw, 3.5rem);           /* 40 → 56 */
    --fs-h2: clamp(2.125rem, 1.881rem + 1.087vw, 2.75rem);         /* 34 → 44 */
    --fs-h3: clamp(2rem, 1.951rem + .217vw, 2.125rem);             /* 32 → 34 */
    --fs-lead: clamp(1.1875rem, 1.139rem + .217vw, 1.3125rem);   /* 19 → 21 */
    --fs-h4: var(--fs-lead);
    --fs-body: clamp(1.0625rem, 1.038rem + .109vw, 1.125rem);     /* 17 → 18 */
    --fs-small: 1rem;
    --fs-ui: 1rem;
    --fs-label: .8125rem;
    --fs-lockup: .8125rem;
    --measure-body: 54ch;
    --measure-lead: 48ch;
    --measure-legal: 56ch;

    /* Abstände (4-pt-Basis, 8-pt-Rhythmus) */
    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
    --space-section: clamp(4rem, 3.217rem + 3.478vw, 6rem);       /* 64 → 96 */
    --space-block: clamp(2.5rem, 2.109rem + 1.739vw, 3.5rem);      /* 40 → 56 */
    --page-margin: clamp(1.25rem, .174rem + 4.783vw, 4rem);       /* 20 → 64 */

    /* Raster */
    --cols: 4;
    --gutter: 1rem;
    --header-h: 4.5rem;
    --callbar-h: 3.5rem;

    /* Bewegung */
    --dur-1: 150ms;
    --dur-2: 200ms;
    --ease: cubic-bezier(.2, .7, .2, 1);
  }

  @media (min-width: 40em) { :root { --cols: 8; --gutter: 1.5rem; } }
  @media (min-width: 66em) { :root { --cols: 12; --gutter: 2rem; --header-h: 5rem; --fs-lockup: .875rem; } }

  [data-theme="paper"] {
    --bg: var(--ivory-50); --fg: var(--anthracite-900); --fg-2: var(--grey-700); --fg-3: var(--grey-600);
    --accent: var(--bronze-500); --accent-text: var(--bronze-700); --rule: rgb(42 43 45 / .16);
    --fuge: var(--bronze-500); --signet: var(--bronze-500); --btn-fg: var(--ivory-50);
    --btn-bg-hover: var(--bronze-700); --btn-bg-active: var(--bronze-800);
    --todo-bg: var(--tint-todo-paper); --bg-hover: transparent;
  }
  [data-theme="stone"] { --bg: var(--ivory-100); --todo-bg: var(--tint-todo-stone); }
  [data-theme="ink"] {
    --bg: var(--anthracite-900); --fg: var(--ivory-50); --fg-2: var(--grey-300); --fg-3: var(--grey-300);
    --accent: var(--bronze-300); --accent-text: var(--bronze-300);
    --rule: rgb(246 243 238 / .24); --fuge: var(--bronze-500); --signet: var(--bronze-300);
    --btn-fg: var(--anthracite-900); --btn-bg-hover: var(--bronze-300); --btn-bg-active: var(--bronze-400);
    --todo-bg: var(--tint-todo-ink); --bg-hover: var(--tint-hover-ink);
    -webkit-font-smoothing: antialiased;
  }
  /* Abgeleitete Rollen auf jedem Theme-Träger neu auflösen */
  :root, [data-theme] { --rule-strong: var(--fg); --focus: var(--fg); --btn-bg: var(--fg); }
}

/* ---------- Grundlagen ---------- */

@layer base {
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    font-kerning: normal;
    font-synthesis: none;
  }
  /* Abstand unter dem Sticky-Header am Ziel, nicht am Scrollbereich: sonst springt die Seite, sobald der Header den Fokus bekommt */
  main, main *, .site-footer, .site-footer * { scroll-margin-top: calc(var(--header-h) + 1rem); }
  @media (max-width: 65.99em) {
    html { scroll-padding-bottom: calc(var(--callbar-h) + 1rem + env(safe-area-inset-bottom)); }
  }

  body, [data-theme] { background: var(--bg); color: var(--fg); }
  body { font: 400 var(--fs-body)/1.6 var(--font-text); }
  ::selection { background: var(--bronze-300); color: var(--anthracite-900); }

  h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.01em; }
  h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.005em; }
  h1, h2 { font-optical-sizing: none; font-variation-settings: "opsz" 11; }
  h3 { font: 500 var(--fs-h4)/1.3 var(--font-text); }
  h1, h2, h3 { hyphens: manual; text-wrap: balance; overflow-wrap: break-word; }
  p, li, dd { hyphens: auto; hyphenate-limit-chars: 10 4 4; text-wrap: pretty; }
  strong, em, b { font-weight: 500; font-style: normal; }

  a { color: inherit; text-decoration: underline 1px var(--accent); text-underline-offset: .25em; }
  a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--fg); }
  a:active { color: var(--accent-text); }
  a[href^="tel:"] { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  [tabindex="-1"]:focus { outline: none; }
}

/* ---------- Layout ---------- */

@layer layout {
  .wrap { width: min(100% - 2 * var(--page-margin), 75rem); margin-inline: auto; }
  .grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
  .grid > * { grid-column: 1 / -1; }

  .section { padding-block: var(--space-section); }
  /* Zwei Abschnitte gleichen Themes: die durchgehende Head-Linie trennt, oberes Padding entfällt */
  .section:not([data-theme]) + .section:not([data-theme]) { padding-block-start: 0; }
  .section[data-theme="stone"] + .section[data-theme="stone"] { padding-block-start: 0; }
  .section[data-theme="stone"]:has(+ .section[data-theme="stone"]) { padding-block-end: 0; }

  @media (min-width: 40em) {
    .grid > .g-left { grid-column: 1 / 5; }
    .grid > .g-right { grid-column: 5 / -1; }
    .grid > .g-text-6 { grid-column: 1 / 8; }
    .grid > :is(.g-q1, .g-q3) { grid-column: 1 / 5; }
    .grid > :is(.g-q2, .g-q4) { grid-column: 5 / -1; }
  }
  @media (min-width: 66em) {
    .grid > .g-margin { grid-column: 1 / 4; }
    .grid > .g-text { grid-column: 4 / -1; }
    .grid > .g-text-6 { grid-column: 4 / 10; }
    .grid > .g-left { grid-column: 1 / 7; }
    .grid > .g-right { grid-column: 7 / -1; }
    .grid > .g-q1 { grid-column: 1 / 4; }
    .grid > .g-q2 { grid-column: 4 / 7; }
    .grid > .g-q3 { grid-column: 7 / 10; }
    .grid > .g-q4 { grid-column: 10 / -1; }
  }
}

/* ---------- Komponenten ---------- */

@layer components {

  /* Typografie */
  .t-display, .t-h1, .t-h2, .t-h3 {
    font-family: var(--font-display); font-weight: 400;
    font-optical-sizing: none; font-variation-settings: "opsz" 11;
    hyphens: manual; text-wrap: balance;
  }
  .t-display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.01em; max-inline-size: 14ch; }
  .t-h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.01em; max-inline-size: 18ch; }
  .t-h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.005em; max-inline-size: 20ch; }
  .t-h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; }
  .t-h4 { font: 500 var(--fs-h4)/1.3 var(--font-text); }
  .lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg-2); max-inline-size: var(--measure-lead); }
  .prose { max-inline-size: var(--measure-body); }
  .prose > * + * { margin-block-start: 1em; }
  .note { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); max-inline-size: var(--measure-body); }
  .note + .note { margin-block-start: var(--s-3); }

  /* Label */
  .label {
    font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase;
    color: var(--fg-3); hyphens: none; text-wrap: wrap; max-inline-size: none;
    font-variation-settings: normal;
  }
  .label__num { color: var(--accent-text); font-variant-numeric: tabular-nums lining-nums; margin-inline-end: var(--s-2); }
  .label--dash::before { content: ""; display: block; inline-size: 28px; border-block-start: 1px solid var(--accent); margin-block-end: var(--s-3); }

  /* Icons */
  .icon { inline-size: 1rem; block-size: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: square; transition: transform var(--dur-1) var(--ease); }

  /* Buttons in drei Stufen */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
    min-block-size: 48px; padding: var(--s-2) var(--s-5);
    border: 1px solid transparent; border-radius: 0;
    font: 500 var(--fs-ui)/1.25 var(--font-text); letter-spacing: .01em; text-decoration: none;
    hyphens: none; cursor: pointer; background: none;
    transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
  }
  .btn:hover .icon, .btn:focus-visible .icon { transform: translateX(4px); }
  .btn--primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
  .btn--primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg); }
  .btn--primary:active { background: var(--btn-bg-active); border-color: var(--btn-bg-active); color: var(--btn-fg); }
  .btn--secondary { border-color: var(--fg); color: var(--fg); }
  .btn--secondary:hover { background: var(--fg); color: var(--bg); }
  .btn--secondary:active { background: var(--btn-bg-active); border-color: var(--btn-bg-active); color: var(--btn-fg); }
  .btn--compact { min-block-size: 44px; }
  @media (max-width: 39.99em) { .btn--block-sm { inline-size: 100%; } }

  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }

  .link-more {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-block-size: 24px; padding-block: var(--s-1);
    font-weight: 500; color: var(--fg);
  }
  .link-more:hover .icon, .link-more:focus-visible .icon { transform: translateX(4px); }
  .link-ext .icon { display: inline-block; vertical-align: -.1em; margin-inline-start: .15em; }

  /* Lockup · der Zusatz gehört zum Zeichen */
  .lockup { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--fg); text-decoration: none; }
  .lockup:hover { color: var(--fg); }
  .lockup__signet { inline-size: 28px; block-size: 28px; flex: none; fill: none; stroke: var(--signet); stroke-width: 1.5px; stroke-linecap: square; }
  .lockup__divider { display: none; inline-size: 1px; block-size: 40px; flex: none; background: var(--accent); }
  .lockup__text { display: flex; flex-direction: column; gap: var(--s-2); }
  .lockup__wordmark { --wm-h: .875rem; block-size: var(--wm-h); inline-size: calc(var(--wm-h) * 8.7706); fill: currentColor; overflow: visible; }
  .lockup__sub { font: 400 var(--fs-lockup)/1.25 var(--font-text); letter-spacing: .01em; color: var(--fg); }
  .lockup__l1, .lockup__em { display: block; }
  .lockup__em { white-space: nowrap; }
  @media (min-width: 66em) {
    .lockup--full { gap: var(--s-4); }
    .lockup--full .lockup__signet { inline-size: 32px; block-size: 32px; }
    .lockup--full .lockup__divider { display: block; }
    .lockup--full .lockup__wordmark { --wm-h: 1.01rem; }
    .lockup--full .lockup__l1, .lockup--full .lockup__em { display: inline; }
  }


  /* Header */
  .scroll-sentinel { block-size: 1px; }
  .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); }
  .site-header::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
    border-block-end: 1px solid var(--rule); opacity: 0; transition: opacity var(--dur-2) var(--ease);
  }
  .site-header.is-scrolled::after { opacity: 1; }
  .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-block-size: var(--header-h); padding-block: var(--s-3); }

  .site-nav { display: none; }
  .site-nav > ul { display: flex; flex-wrap: wrap; column-gap: clamp(1.25rem, 5.357vw - 2.286rem, 2rem); }
  .site-nav > ul > li > a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: var(--fs-ui); text-decoration: none; hyphens: none; white-space: nowrap; }
  .site-nav > ul > li > a:hover { text-decoration: underline 1px var(--fg); text-underline-offset: .35em; }
  .site-nav > ul > li > a[aria-current] { text-decoration: underline 2px var(--accent); text-underline-offset: .35em; }

  @media (min-width: 66em) {
    .site-nav { display: flex; align-items: center; gap: var(--s-5); margin-inline-start: auto; }
  }

  .menu-toggle, .menu__close {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-inline-size: 48px; min-block-size: 48px; padding: 0;
    border: 0; background: none; color: var(--fg); font-weight: 500; font-size: var(--fs-ui); cursor: pointer;
  }
  .menu-toggle:hover span, .menu__close:hover span { text-decoration: underline 1px var(--fg); text-underline-offset: .35em; }
  @media (min-width: 66em) { .menu-toggle { display: none; } }

  /* Ohne JavaScript: Navigation als Liste unter dem Lockup */
  .no-js .site-header { position: static; }
  .no-js .menu-toggle { display: none; }
  @media (max-width: 65.99em) {
    .no-js .site-header__inner { flex-wrap: wrap; }
    .no-js .site-nav { display: block; flex-basis: 100%; }
  }

  /* Mobilmenü (dialog) */
  .menu {
    position: fixed; inset: 0; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none;
    margin: 0; padding: 0; border: 0; overflow: auto; background: var(--bg); color: var(--fg);
    opacity: 1; transition: opacity var(--dur-2) var(--ease);
  }
  @starting-style { .menu[open] { opacity: 0; } }
  .menu::backdrop { background: transparent; }
  html:has(dialog[open]) { overflow: hidden; }
  .menu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-block-size: var(--header-h); padding-block: var(--s-3); }
  .menu__body { padding-block: var(--s-5) var(--s-8); }
  .menu__list > li { border-block-start: 1px solid var(--rule); }
  .menu__list > li:last-child { border-block-end: 1px solid var(--rule); }
  .menu__list > li > a { display: flex; align-items: center; min-block-size: 56px; font: 500 1.375rem/1.2 var(--font-text); letter-spacing: -.005em; text-decoration: none; hyphens: none; }
  /* Unter jedem Anwalt seine Rechtsgebiete (mobil 2 × 2, sonst eine Zeile mit Mittelpunkten) und sein direkter Kontakt;
     ab 66em steht der Kontakt rechts in derselben Zeile, die Linien laufen über die ganze Breite (seit 14.10.2026) */
  .menu__sub { display: grid; grid-template-columns: 11.5rem max-content; column-gap: var(--s-4); padding-block-end: var(--s-2); }
  .menu__list .menu__sub li a { display: inline-flex; align-items: center; min-block-size: 40px; font: 400 var(--fs-ui)/1.3 var(--font-text); letter-spacing: 0; color: var(--fg-2); text-decoration: none; }
  @media (min-width: 40em) {
    .menu__sub { display: flex; flex-wrap: wrap; column-gap: 0; }
    .menu__sub li { display: flex; align-items: center; }
    .menu__sub li + li::before { content: "·"; padding-inline: var(--s-3); color: var(--accent); font-weight: 500; }
  }
  .menu__reach { display: grid; justify-items: start; padding-block-end: var(--s-3); }
  .menu__reach a, .menu__reach .todo { display: inline-flex; align-items: center; min-block-size: 40px; }
  .menu__reach .todo { min-block-size: 0; margin-block: var(--s-2); }
  .menu__reach a[href^="tel:"] { font: 500 var(--fs-lead)/1.3 var(--font-text); }
  .menu__list .menu__sub a:hover { color: var(--fg); text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
  .menu__list .menu__sub a[aria-current] { color: var(--fg); }
  .menu__direct { margin-block-start: var(--s-6); }
  .menu__legal { display: flex; gap: var(--s-5); margin-block-start: var(--s-6); font-size: var(--fs-small); }
  .menu__legal a { min-block-size: 44px; display: inline-flex; align-items: center; }

  /* Section-Head */
  .head { border-block-start: 1px solid var(--rule-strong); padding-block-start: var(--s-5); margin-block-end: var(--space-block); }
  .head__title { margin-block-start: var(--s-3); max-inline-size: 20ch; }
  .head__lead { margin-block-start: var(--s-5); }
  @media (min-width: 40em) { .head__lead { grid-column: 1 / 8; } }
  @media (min-width: 66em) {
    .head { align-items: first baseline; }
    .head__label { grid-column: 1 / 4; }
    .head__title { grid-column: 4 / -1; margin-block-start: 0; }
    .head__lead { grid-column: 4 / 10; }
  }
  .head--compact { border-block-start-color: var(--rule); margin-block-end: var(--s-5); }
  .head--compact .head__title { margin-block-start: 0; font: 500 var(--fs-h4)/1.3 var(--font-text); letter-spacing: 0; max-inline-size: none; }

  /* Paare und Fuge · Tom immer links, Klaus immer rechts */
  .pair { row-gap: var(--s-7); }
  .pair--fuge { position: relative; row-gap: 0; }
  @media (max-width: 39.99em) {
    .pair--fuge > .pair__item:nth-child(1 of .pair__item) { padding-block-end: var(--s-6); margin-block-end: var(--s-6); border-block-end: 1px solid var(--fuge); }
  }
  @media (min-width: 40em) {
    .pair { row-gap: 0; }
    .pair--fuge::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(50% - .5px); border-inline-start: 1px solid var(--fuge); }
  }
  .pair__item { border-block-start: 1px solid var(--rule-strong); padding-block-start: var(--s-5); }
  /* Gleiche Zeilen bei Tom und Klaus (subgrid); ohne Unterstützung wird unschädlich gestapelt */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 40em) {
      .pair > .pair__item { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 4); align-content: start; }
      .pair > .pair__item .dlist { display: grid; grid-template-rows: subgrid; grid-row: span var(--dl-rows, 1); }
    }
  }

  /* Hero */
  .hero { padding-block-start: var(--s-7); }
  @media (min-width: 40em) { .hero { padding-block-start: var(--s-8); } }
  .hero__kicker { display: block; }
  .hero__kicker > span { display: inline; }
  .hero__line { display: block; margin-block-start: var(--s-4); }
  .hero__lead { margin-block-start: var(--s-6); }
  .hero__more { margin-block-start: var(--s-4); color: var(--fg-2); max-inline-size: var(--measure-body); }
  .hero__note { margin-block-start: var(--s-6); }
  .doors { margin-block-start: var(--space-block); }
  @media (min-width: 40em) {
    .hero__lead, .hero__more { grid-column: 1 / 8; }
    .hero__note { grid-column: 1 / 8; }
  }
  @media (min-width: 66em) {
    .hero__title { display: grid; grid-template-columns: subgrid; align-items: first baseline; }
    .hero__kicker { grid-column: 1 / 4; }
    .hero__kicker > span { display: block; }
    .hero__kicker > .hero__sep { display: none; }
    .hero__line { grid-column: 4 / -1; margin-block-start: 0; }
    .hero__lead, .hero__more, .hero__note { grid-column: 4 / 10; }
  }

  /* Tür */
  .door { --rows: 3; }
  .door__list { margin-block-start: var(--s-5); }
  .door__action { margin-block-start: var(--s-6); align-self: end; }
  .door-row {
    position: relative; display: grid; grid-template-columns: 1fr; row-gap: var(--s-1);
    min-block-size: 64px; padding-block: var(--s-4); padding-inline-end: 40px;
    border-block-start: 1px solid var(--rule); color: var(--fg); text-decoration: none;
  }
  li:last-child > .door-row { border-block-end: 1px solid var(--rule); }
  .door-row__name { font-weight: 500; }
  .door-row__desc { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3); hyphens: manual; }
  .door-row .icon { position: absolute; inset-inline-end: 0; top: 50%; translate: 0 -50%; inline-size: 20px; block-size: 20px; }
  .door-row:hover .door-row__name { text-decoration: underline 1px var(--fg); text-underline-offset: .25em; }
  .door-row:hover .icon, .door-row:focus-visible .icon { transform: translateX(4px); }
  .door-row:active .door-row__name { color: var(--accent-text); }
  .door-row:focus-visible { outline-offset: -2px; }
  /* Die Beschreibungen sind lang (Texte der Anwälte, 14.10.2026): Sie stehen unter dem Namen, nicht daneben.
     Zeile n liegt bei Tom und Klaus auf einer Höhe (Erbrecht neben Erbrecht); dafür genau vier Gebiete je Tür. */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 40em) {
      .doors .door { --rows: 6; }
      .doors .door__list { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
      .doors .door__list > li { display: grid; }
      .doors .door-row { align-content: start; }
    }
  }


  /* Personenkarte · Zeilen: Name, Rolle, 3 Fakten, Link */
  .person { --rows: 6; --dl-rows: 3; }
  .person__name { margin-block-end: 0; }
  .person__name a { text-decoration: none; }
  .person__name a:hover { text-decoration: underline 1px var(--fg); text-underline-offset: .12em; }
  .person__role { margin-block-start: var(--s-2); font-size: var(--fs-small); color: var(--fg-2); }
  .person__action { margin-block-start: var(--s-6); align-self: end; }

  /* Definitionslisten (Fakten, Kontakt, Anbieter) */
  .dlist { margin-block-start: var(--s-5); }
  .dlist > div { padding-block: var(--s-3); border-block-start: 1px solid var(--rule); }
  .dlist > div:last-child { border-block-end: 1px solid var(--rule); }
  .dlist dt { font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
  .dlist dd { margin-block-start: var(--s-1); }
  @media (min-width: 66em) {
    /* Label schmal, Wert breit: Bei halber Breite hatte der Wert nur 17–27 Zeichen pro Zeile und stand weit vom Label */
    .dlist--split > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--s-5); align-items: first baseline; }
    .dlist--split dd { margin-block-start: 0; }
  }

  /* Fakten im Stone-Band */
  .fact { border-block-start: 1px solid var(--rule); padding-block: var(--s-5) var(--s-2); }
  .fact h3:not(:first-child) { margin-block-start: var(--s-3); }
  .fact p { margin-block-start: var(--s-2); color: var(--fg-2); }
  .facts-grid { row-gap: var(--s-5); }
  @media (min-width: 40em) and (max-width: 65.99em) {
    .facts-grid .fact { display: grid; grid-template-columns: subgrid; align-items: first baseline; }
    .facts-grid .fact > .label { grid-column: 1 / -1; }
    .facts-grid .fact h3 { grid-column: 1 / 4; }
    .facts-grid .fact p { grid-column: 4 / -1; margin-block-start: var(--s-3); }
  }
  @media (min-width: 66em) {
    .facts-grid .fact:nth-child(1) { grid-column: 4 / 7; }
    .facts-grid .fact:nth-child(2) { grid-column: 7 / 10; }
    .facts-grid .fact:nth-child(3) { grid-column: 10 / -1; }
  }

  /* Ablauf */
  .steps { border-block-start: 1px solid var(--rule); counter-reset: none; }
  .step { display: grid; grid-template-columns: subgrid; padding-block: var(--s-5); border-block-end: 1px solid var(--rule); }
  .step__num { grid-column: 1 / 2; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
  .step__body { grid-column: 2 / -1; }
  .step__body p { margin-block-start: var(--s-2); color: var(--fg-2); }
  @media (min-width: 40em) {
    .steps { row-gap: 0; }
    .step { grid-template-columns: none; display: block; grid-column: span 4; border-block-end: 0; }
    .step:nth-child(n + 3) { border-block-start: 1px solid var(--rule); }
    .step__body { margin-block-start: var(--s-4); }
  }
  @media (min-width: 66em) {
    .step { grid-column: span 3; }
    .step:nth-child(n + 3) { border-block-start: 0; }
  }

  /* Häufige Fragen */
  .faq { border-block-end: 1px solid var(--rule); }
  .faq details { border-block-start: 1px solid var(--rule); }
  .faq summary {
    display: grid; grid-template-columns: 1fr 20px; gap: var(--s-5); align-items: center;
    min-block-size: 72px; padding-block: var(--s-5); cursor: pointer; list-style: none;
    font: 500 var(--fs-h4)/1.3 var(--font-text);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover .faq__q { text-decoration: underline 1px var(--fg); text-underline-offset: .25em; }
  .faq summary:focus-visible { outline-offset: -2px; }
  .faq__icon { position: relative; inline-size: 20px; block-size: 20px; }
  .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur-1) var(--ease); }
  .faq__icon::before { inset-inline: 2px; top: calc(50% - .75px); block-size: 1.5px; }
  .faq__icon::after { inset-block: 2px; left: calc(50% - .75px); inline-size: 1.5px; }
  .faq summary:hover .faq__icon { color: var(--accent-text); }
  .faq details[open] .faq__icon::after { transform: scaleY(0); }
  .faq__a { padding-block-end: var(--s-5); color: var(--fg-2); max-inline-size: var(--measure-body); }
  .faq__a > * + * { margin-block-start: 1em; }

  /* Kontaktkarte · Zeilen: Label, Name, Rolle, Telefon, E-Mail, Telefax (nur Klaus), Aktionen */
  .contact-card { --rows: 7; --dl-rows: 3; }
  .contact-card__label { color: var(--accent-text); }
  .contact-card h3 { margin-block-start: var(--s-3); }
  .contact-card__actions { margin-block-start: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  @media (min-width: 66em) { .grid > .contact-card--single { grid-column: 4 / 10; } }

  .notes { margin-block-start: var(--s-7); }
  @media (min-width: 40em) { .notes { grid-column: 1 / 8; } }
  @media (min-width: 66em) { .notes { grid-column: 4 / 10; } }

  /* Anfahrt */
  .visit { margin-block-start: var(--s-7); border-block-start: 1px solid var(--rule); padding-block-start: var(--s-5); row-gap: var(--s-5); }
  .visit p { font-size: var(--fs-small); line-height: 1.5; }
  .visit strong { display: block; margin-block-end: var(--s-1); font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

  /* Footer */
  .site-footer { padding-block: var(--space-block) var(--s-6); border-block-start: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; }
  .site-footer__row { row-gap: var(--s-7); }
  .site-footer address { margin-block-start: var(--s-5); color: var(--fg-2); }
  .site-footer h3 { margin-block-start: var(--s-2); }
  .site-footer ul { display: grid; gap: 0; margin-block-start: var(--s-3); }
  .site-footer li a, .site-footer dd a { display: inline-flex; align-items: center; min-block-size: 24px; padding-block: var(--s-1); }
  .footer-col > .label { display: block; }
  .site-footer a { text-decoration-line: none; }
  .site-footer a:is(:hover, :focus-visible) { text-decoration: underline 1px currentColor; text-underline-offset: .25em; }
  .footer-col dl { margin-block-start: var(--s-3); }
  .footer-col dd { color: var(--fg); }
  .site-footer__legal { margin-block-start: var(--s-7); padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); row-gap: var(--s-3); color: var(--fg-2); }
  @media (min-width: 66em) { .site-footer__legal > :last-child { grid-column: 4 / -1; } .site-footer__legal > :first-child { grid-column: 1 / 4; } }

  /* Callbar · unter 66em auf jeder Seite */
  .callbar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20;
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; grid-auto-flow: column;
    min-block-size: calc(var(--callbar-h) + env(safe-area-inset-bottom)); padding-block-end: env(safe-area-inset-bottom);
    border-block-start: 1px solid var(--rule);
  }
  .callbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-block-size: var(--callbar-h); padding: var(--s-2); text-decoration: none; color: var(--fg);
    transition: background-color var(--dur-1);
  }
  .callbar a + a { border-inline-start: 1px solid var(--rule); }
  .callbar a:hover, .callbar a:active { background: var(--bg-hover); }
  .callbar a:focus-visible { outline-offset: -4px; }
  .callbar__label { font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
  .callbar__name { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 500; font-size: var(--fs-ui); line-height: 1.25; }
  .callbar__name .icon--down { transform: rotate(90deg); }
  @media (max-width: 65.99em) { body:has(.callbar) { padding-block-end: calc(var(--callbar-h) + env(safe-area-inset-bottom)); } }
  .callbar__more, .callbar__arrow { display: none; }
  .callbar a.callbar__ask { padding-inline: var(--s-3); }
  .callbar__text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  /* Auf der Anfrageseite selbst entfällt der Eintrag */
  body:has(#anfrage-form) .callbar__ask { display: none; }
  @media (max-width: 23.99em) { .callbar:has(.callbar__ask) .callbar__name .icon { display: none; } .callbar a { padding-inline: var(--s-1); } }
  @media (max-width: 22.49em) { .callbar:has(.callbar__ask) .callbar__label { font-size: .6875rem; letter-spacing: .04em; } .callbar:has(.callbar__ask) .callbar__name { font-size: .9375rem; } }
  @media (max-height: 30em) { .site-header, .callbar { position: static; } body:has(.callbar) { padding-block-end: 0; } }
  /* Desktop: Die Leiste entfällt, die Online-Anfrage steht als ruhiger Knopf unten rechts (Linie statt Schatten) */
  @media (min-width: 66em) {
    .callbar { inset-inline: auto var(--page-margin); inset-block-end: var(--s-5); display: block; min-block-size: 0; padding: 0; border: 0; background: none; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2); }
    .callbar > a:not(.callbar__ask) { display: none; }
    .callbar a.callbar__ask {
      flex-direction: row; justify-content: flex-start; gap: var(--s-4); min-block-size: 0; padding: var(--s-4) var(--s-5);
      background: var(--bg); border: 1px solid var(--accent); text-align: start;
    }
    .callbar__text { align-items: flex-start; }
    .callbar__ask .callbar__name { font-size: var(--fs-lead); }
    .callbar__more { display: inline; }
    .callbar__arrow { display: block; inline-size: 20px; block-size: 20px; }
    .callbar a.callbar__ask:hover { background: var(--bg-hover); }
    .callbar a.callbar__ask:hover .icon { transform: translateX(4px); }
    html { scroll-padding-bottom: 7rem; }
  }
  @media (min-width: 66em) and (max-height: 30em) { .callbar { position: fixed; } }
  /* Der schwebende Knopf passt erst ab 104em neben den Inhalt (Satzbreite 75rem plus Knopf im Seitenrand).
     Darunter verdeckte er Text; dort steht die Online-Anfrage nach dem Hero in der mitlaufenden Kopfzeile. */
  .header-ask { display: none; }
  @media (min-width: 66em) and (max-width: 103.99em) {
    .callbar { display: none; }
    html { scroll-padding-bottom: 0; }
    body:has(#anfrage-form) .site-header .header-ask { display: none; }
  }

  /* Unterseiten · Brotkrumen */
  .breadcrumb { padding-block-start: var(--s-5); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
  .breadcrumb li + li::before { content: "/"; content: "/" / ""; color: var(--fg-3); }
  .breadcrumb a, .breadcrumb [aria-current] { display: inline-flex; align-items: center; min-block-size: 24px; }
  .breadcrumb a { text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline 1px var(--fg); text-underline-offset: .25em; }

  /* Unterseiten · Hero */
  .page-hero { padding-block-start: var(--s-7); }
  .page-hero__title { margin-block-start: var(--s-4); }
  .page-hero__lead, .page-hero__meta, .page-hero__actions { margin-block-start: var(--s-6); }
  @media (min-width: 40em) { .page-hero__lead { grid-column: 1 / 8; } }
  @media (min-width: 66em) {
    .page-hero__grid { align-items: first baseline; }
    .page-hero__label { grid-column: 1 / 4; }
    .page-hero__title { grid-column: 4 / -1; margin-block-start: 0; }
    .page-hero__lead { grid-column: 4 / 10; }
    .page-hero__meta, .page-hero__actions { grid-column: 4 / -1; }
  }
  .page-hero__meta.dlist { margin-block-start: var(--s-6); }
  @media (min-width: 40em) {
    .contact-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
    .contact-row > div:last-child { border-block-end: 1px solid var(--rule); }
    .contact-row > div { border-block-end: 1px solid var(--rule); }
  }
  @media (min-width: 66em) { .grid > .contact-row { grid-column: 4 / 10; } }

  /* Faktenleiste im Profil */
  .factbar { border-block: 1px solid var(--rule); }
  .factbar > div { padding-block: var(--s-5); }
  .factbar > div + div { border-block-start: 1px solid var(--rule); }
  .factbar dt { font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
  .factbar dd { margin-block-start: var(--s-2); font-size: var(--fs-lead); line-height: 1.45; }
  @media (min-width: 40em) {
    .factbar { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
    .factbar > div + div { border-block-start: 0; }
    .factbar > div:nth-child(n + 3) { border-block-start: 1px solid var(--rule); }
  }
  @media (min-width: 66em) {
    .factbar { grid-template-columns: repeat(4, 1fr); }
    .factbar > div:nth-child(n + 3) { border-block-start: 0; }
  }

  /* Themenzeilen */
  /* Marginalien mit Haarlinie (seit 14.10.2026): ab 66em steht der Titel links in Spalte 4–6, der Text rechts ab
     Spalte 7 auf derselben Grundlinie; feine Linien über der Textspalte trennen die Themen und rahmen die Liste,
     damit die Abschnittsüberschrift frei darüber steht */
  .topic { display: grid; grid-template-columns: subgrid; }
  .topic__body { padding-block: var(--s-6); border-block-start: 1px solid var(--rule); }
  .topic:last-child .topic__body { border-block-end: 1px solid var(--rule); }
  .topic__body { grid-column: 1 / -1; }
  .topic__body p { margin-block-start: var(--s-2); color: var(--fg-2); max-inline-size: var(--measure-body); }
  .topic__body .link-more { margin-block-start: var(--s-3); }
  @media (min-width: 66em) {
    .topic__body { grid-column: 4 / -1; display: grid; grid-template-columns: subgrid; align-items: first baseline; }
    .topic__body > h3 { grid-column: 1 / 4; padding-inline-end: var(--s-4); }
    .topic__body > :not(h3) { grid-column: 4 / -1; }
    .topic__body > h3 + p { margin-block-start: 0; }
  }
  .topics-end { margin-block-start: var(--s-6); }
  @media (min-width: 66em) { .grid > .topics-end { grid-column: 4 / -1; } }

  /* Merksatz */
  .merksatz__text { margin-block-start: var(--s-4); max-inline-size: 30ch; }
  .merksatz__source { margin-block-start: var(--s-4); font-size: var(--fs-small); color: var(--fg-3); }
  @media (min-width: 66em) {
    .merksatz__grid { align-items: first baseline; }
    .merksatz__label { grid-column: 1 / 4; }
    .merksatz__text { grid-column: 4 / -1; margin-block-start: 0; }
    .merksatz__source { grid-column: 4 / -1; }
  }

  /* Werdegang als Chronik (seit 14.10.2026): eine bronzene Achse in der Spaltenlücke vor den Jahren, daran
     Teilstriche wie an einem Lineal (lang mit Jahr, kurz ohne). Jahre in Bodoni und Bronze wie die Ziffern im
     Ablauf, Monat oder Zusatz als Label darunter. Die Achse endet an der letzten Station mit einem Punkt, wie jede
     Überschrift der Seite. Achse und Striche sind Schmuck (Pseudo-Elemente); die Folge steht als <ol> mit <time>
     im Text. Vorbilder: Noerr (mobil: Achse links, Jahr über dem Text), Judd und Albers Foundation (Jahr als Anker,
     ruhige Spalten), Kellerhals Carrard (Striche statt Punkte). */
  .chrono {
    --axis: 1.25rem;                                 /* Achse → Inhalt; ab 66em die halbe Spaltenlücke */
    --year: 1.625rem;
    --tick-dated: calc(var(--year) * .56 + var(--year-nudge, 0px));   /* Mitte der Ziffern */
    --tick-plain: calc(var(--fs-body) * .84);                          /* Mitte der Titelzeile */
    position: relative; display: grid; row-gap: var(--s-6); padding-inline-start: var(--axis);
  }
  .chrono__item { position: relative; --tick-y: var(--tick-plain); }
  .chrono__item:has(> .chrono__when) { --tick-y: var(--tick-dated); }
  .chrono__when { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); }
  .chrono__year { font: 400 var(--year)/1.1 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
  .chrono__qual { font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
  .chrono__when + .chrono__what { margin-block-start: var(--s-2); }
  .chrono__title { font-weight: 500; }
  .chrono__detail { color: var(--fg-2); }
  /* Achse von der ersten bis zur letzten Station; unter der letzten deckt der Grund sie ab */
  .chrono::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: var(--tick-dated) 0; border-inline-start: 1px solid var(--accent); transform-origin: top; }
  .chrono__item:last-child::after { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--axis) - 1px); inset-block: calc(var(--tick-y) + 3px) -1px; inline-size: 3px; background: var(--bg); }
  /* Teilstriche: lang mit Jahr, kurz ohne */
  .chrono__item::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--axis)); inset-block-start: var(--tick-y); inline-size: .625rem; border-block-start: 1px solid var(--accent); transform-origin: left; }
  .chrono__item:not(:has(> .chrono__when))::before { inline-size: .3125rem; }
  /* Schlusspunkt */
  .chrono__item:last-child > :first-child::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--axis) - 2px); inset-block-start: calc(var(--tick-y) - 2px); inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent); }
  @media (min-width: 40em) and (max-width: 65.99em) {
    .chrono__item { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--gutter); align-items: first baseline; }
    .chrono__when { grid-column: 1; flex-direction: column; align-items: flex-start; row-gap: var(--s-1); }
    .chrono__what { grid-column: 2; }
    .chrono__when + .chrono__what { margin-block-start: 0; }
  }
  @media (min-width: 66em) {
    .legal-block > .chrono { grid-column: 4 / -1; }
    .chrono { --axis: calc(var(--gutter) / 2); --year: var(--fs-h3); padding-inline-start: 0; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); }
    .chrono::before { inset-inline-start: calc(-1 * var(--axis)); }
    .chrono__item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: first baseline; }
    .chrono__when { grid-column: 1 / 4; flex-direction: column; align-items: flex-start; row-gap: var(--s-1); }
    .chrono__what { grid-column: 4 / -1; }
    .chrono__when + .chrono__what { margin-block-start: 0; }
  }

  /* Zuständig (seit 14.10.2026 mit Spaltenlinie wie Personenkarten und Impressum, ohne waagerechte Linien):
     Beschriftung links, rechts je Anwalt Name (Link aufs Profil) und Telefon untereinander; bei Erbrecht Tom über
     Klaus. Mobil steht die Beschriftung darüber. */
  .assigned { margin-block-start: var(--s-6); display: grid; row-gap: var(--s-4); }
  .assigned dt { font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
  .assigned dd { display: grid; justify-items: start; row-gap: var(--s-1); }
  @media (min-width: 40em) {
    .assigned { position: relative; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s-5); align-items: first baseline; }
    .assigned::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(6.5rem + var(--s-5) / 2); border-inline-start: 1px solid var(--rule-col); }
    .assigned dt { grid-column: 1; grid-row: 1; }
    .assigned dd { grid-column: 2; }
  }
  @media (min-width: 66em) { .grid > .assigned { grid-column: 4 / -1; } }

  /* Label links (Spalte 1–3), Inhalt rechts: Rechtliches, im Profil auch Werdegang und Arbeitsweise */
  .legal-block { border-block-start: 1px solid var(--rule); padding-block: var(--s-5) var(--s-7); row-gap: var(--s-3); }
  .legal-block__text { max-inline-size: var(--measure-legal); }
  .legal-block__text > * + * { margin-block-start: 1em; }
  @media (min-width: 66em) {
    .legal-block { align-items: first baseline; }
    .legal-block__label { grid-column: 1 / 4; }
    .legal-block__text { grid-column: 4 / -1; }
  }
  .provider { --rows: 9; --dl-rows: 8; }
  .provider h2 { margin-block-end: 0; }
  /* Verantwortliche im Impressum: Tom links, Klaus rechts */
  .legal-pair { display: grid; row-gap: var(--s-4); }
  .legal-block__text.legal-pair > * + * { margin-block-start: 0; }
  @media (min-width: 40em) { .legal-pair { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); } }
  .stand { margin-block-start: var(--s-6); font-size: var(--fs-small); color: var(--fg-3); }
  .stand + p { margin-block-start: var(--s-4); }
  .legal-block .dlist { margin-block-start: 0; }
  .legal-block .dlist > div:first-child { border-block-start: 0; padding-block-start: 0; }
  .legal-block .merksatz__text { margin-block-start: 0; }
  @media (min-width: 66em) {
    .legal-block .dlist--split { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gutter); max-inline-size: none; }
    .legal-block .dlist--split > div { grid-column: 1 / -1; grid-template-columns: subgrid; }
    .legal-block .dlist--split dt { grid-column: 1 / 4; }
    .legal-block .dlist--split dd { grid-column: 4 / -1; }
  }

  /* Datenschutz · Inhaltsverzeichnis */
  .toc { margin-block-end: var(--s-7); }
  .toc ol { margin-block-start: var(--s-3); border-block-start: 1px solid var(--rule); }
  .toc a { display: flex; align-items: center; min-block-size: 44px; border-block-end: 1px solid var(--rule); font-size: var(--fs-small); text-decoration: none; }
  .toc a:hover { text-decoration: underline 1px var(--fg); text-underline-offset: .25em; }
  @media (min-width: 66em) {
    .grid > .toc { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); margin-block-end: 0; }
    .grid > .legal-content { grid-column: 4 / -1; }
  }
  .legal-content { max-inline-size: calc(var(--measure-legal) + 2rem); }
  .legal-content section + section { margin-block-start: var(--s-7); }
  .legal-content p, .legal-content ul { max-inline-size: var(--measure-legal); }
  .legal-content p + p, .legal-content p + ul, .legal-content ul + p { margin-block-start: 1em; }
  .legal-content ul { padding-inline-start: 1.1em; list-style: disc; }
  .legal-content h3 { margin-block: var(--s-6) var(--s-3); }
  .legal-content .head + h3 { margin-block-start: var(--s-4); }
  .legal-content .dlist { max-inline-size: var(--measure-legal); }
  /* Datenschutz, Abschnitt 01: Verantwortliche nebeneinander wie im Impressum, Tom links, Klaus rechts */
  .legal-content .legal-pair { margin-block-start: var(--s-4); max-inline-size: var(--measure-legal); }
  .legal-content .legal-pair > p { margin-block-start: 0; }
  .legal-content .dlist dd ul { margin-block-start: .5em; }
  .legal-content :is(p, ul) + .dlist { margin-block-start: var(--s-4); }
  .legal-content .dlist + p { margin-block-start: var(--s-4); }
  .legal-content .emph { margin-block: var(--s-5); padding-block: var(--s-4); border-block: 1px solid var(--rule); }
  .legal-content .emph h3 { margin-block-end: var(--s-2); }

  /* Porträt- und Bild-Slots (nur mit echter Datei) */
  .slot img { inline-size: 100%; block-size: auto; object-fit: cover; }
  .slot figcaption { margin-block-start: var(--s-2); font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

  /* Platzhalter für offene Inhalte */
  .todo {
    background: var(--todo-bg); color: var(--fg);
    outline: 1px dashed var(--accent-text); outline-offset: 0;
    padding-inline: .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
}

/* ---------- Hilfsklassen ---------- */

@layer utilities {
  .sr-only {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; inset-inline-start: var(--s-3); inset-block-start: -100px; z-index: 100;
    padding: var(--s-3) var(--s-4); background: var(--fg); color: var(--bg); text-decoration: none;
  }
  .skip-link:focus { inset-block-start: var(--s-3); }
  .nowrap { white-space: nowrap; }
  .mt-block { margin-block-start: var(--space-block); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  }

  @media print {
    .callbar, .menu, .menu-toggle, .skip-link, .site-nav { display: none; }
    .site-header { position: static; }
    [data-theme="ink"] { --bg: #fff; --fg: #000; --fg-2: #333; --fg-3: #333; --accent: #9a7b4f; --accent-text: #765c37; --signet: #9a7b4f; --rule: rgb(0 0 0 / .2); --todo-bg: #eee; }
    .btn--primary, .btn--primary:hover { background: none; color: var(--fg); border-color: var(--fg); }
    body { padding: 0; }
  }
}

/* ==========================================================================
   Inszenierung (Variante „wow“)
   Bilder, eine Scroll-Szene, ein Bildband und wenige Bewegungsmomente.
   Ausnahmen von Regel 10 sind in design/variante-wow.md begründet.
   Verborgenes hängt an html.reveal (nur ohne „weniger Bewegung“) und an .sv,
   das main.js ausschließlich Elementen unterhalb des ersten Bildschirms gibt.
   ========================================================================== */

@layer tokens {
  /* Zeiten nach den Referenzen: Kümmerlein 1000 ms inOutQuart, Versatz 100–200 ms; zmz 950 ms expo-out, 34 px */
  :root { --dur-5: 1600ms; --ease-out: cubic-bezier(.19, 1, .22, 1); --ease-io: cubic-bezier(.77, 0, .175, 1); --rise: 2rem; --ease-reveal: cubic-bezier(.33, 1, .68, 1); }
}

@layer components {

  /* Bühne: 12er-Raster plus zwei Randspuren, damit Bilder bis an den Fensterrand laufen */
  .stage {
    --content: min(100% - 2 * var(--page-margin), 75rem);
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [content-start] repeat(var(--cols), calc((var(--content) - (var(--cols) - 1) * var(--gutter)) / var(--cols)))
      [content-end] minmax(0, 1fr) [full-end];
    column-gap: var(--gutter);
  }
  .stage > * { grid-column: content-start / content-end; }

  /* Bildrahmen und Bildunterschrift */
  .frame { overflow: hidden; background: var(--ivory-100); }
  .frame img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .caption { margin-block-start: var(--s-3); font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
  .caption .todo { text-transform: none; letter-spacing: 0; }

  /* Hero mit Bild */
  .hero--stage .hero__title { display: block; }
  .hero--stage .hero__kicker > span { display: inline; }
  .hero--stage .hero__line { margin-block-start: var(--s-5); max-inline-size: none; }
  .rise { display: block; }
  .rise > span { display: block; }
  .hero__media { grid-column: full-start / full-end; margin-block-start: var(--s-7); }
  .hero__media .frame { aspect-ratio: 4 / 3; }
  .hero__media .frame img { object-position: 50% 30%; }
  .hero__media .caption { padding-inline: var(--page-margin); }
  .hero__after > .doors { margin-block-start: var(--s-7); }
  @media (min-width: 40em) {
    .hero__media .frame { aspect-ratio: 16 / 9; }
  }
  @media (min-width: 66em) {
    .hero--stage { padding-block-start: var(--s-7); }
    .hero__text { grid-column: 2 / 8; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--s-2) 0; }
    .hero--stage .hero__title { display: flex; flex-direction: column; }
    .hero--stage .hero__line { margin-block-start: var(--s-6); font-size: min(var(--fs-display), 6.4vw); }
    .hero--stage .hero__kicker > .hero__sep { display: inline; }
    .hero--stage .hero__lead { grid-column: auto; margin-block-start: var(--s-6); }
    .hero--stage .hero__more { grid-column: auto; }
    .hero__media { grid-column: 8 / full-end; grid-row: 1; margin-block-start: 0; display: grid; grid-template-columns: subgrid; }
    .hero__media .frame { grid-column: 1 / -1; aspect-ratio: auto; block-size: clamp(24rem, 100svh - 25rem, 44rem); }
    .hero__media .caption { grid-column: 1 / content-end; padding-inline: 0; }
  }

  /* Szene „Bürogemeinschaft“: Kopf seitlich wie bei 01 und 05, darunter links das Bild, rechts die drei
     gleichrangigen Zusagen. Jede der beiden Zeilen passt für sich auf den Bildschirm. */
  .scene__grid { row-gap: var(--s-7); }
  .scene__figure .frame { aspect-ratio: 3 / 2; }
  .scene__fact { padding-block: var(--s-6); border-block-start: 1px solid var(--rule); }
  .scene__fact:last-child { border-block-end: 1px solid var(--rule); }
  .scene__fact p { margin-block-start: var(--s-3); color: var(--fg-2); max-inline-size: 40ch; }
  @media (min-width: 66em) {
    .scene__figure { grid-column: 1 / 7; align-self: start; }
    .scene__facts { grid-column: 7 / -1; position: relative; }
    .scene__facts::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--gutter) / -2 - .5px); border-inline-start: 1px solid var(--rule); }
    .scene__fact { padding-block: var(--s-5); border-block-start: 0; }
    .scene__fact:last-child { border-block-end: 0; }
    .scene__fact + .scene__fact { border-block-start: 1px solid var(--rule); }
    .scene__fact:first-child { padding-block-start: 0; }
  }

  /* Bildband (Tafel mit Legende, keine Überschrift, kein Landmark) */
  .band { position: relative; isolation: isolate; display: grid; align-items: end; min-block-size: clamp(30rem, 88vh, 56rem); margin: 0; overflow: clip; }
  .band__media { position: absolute; inset: 0; z-index: -1; overflow: clip; }
  .band__media img { position: absolute; inset-inline: 0; inset-block-start: -12%; inline-size: 100%; block-size: 124%; object-fit: cover; }
  .band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(42 43 45 / .92) 0%, rgb(42 43 45 / .8) 50%, rgb(42 43 45 / .45) 75%, rgb(42 43 45 / .12) 100%); }
  .band__text { padding-block: var(--space-section) var(--s-8); row-gap: var(--s-4); }
  .band__label, .band__caption { display: block; color: var(--fg); }
  .band__title { display: block; max-inline-size: 16ch; }
  .band__caption { font-size: var(--fs-small); line-height: 1.5; }
  @media (max-width: 39.99em) {
    .band__media::after { background: linear-gradient(to top, rgb(42 43 45 / .94) 0%, rgb(42 43 45 / .8) 60%, rgb(42 43 45 / .4) 100%); }
  }
  @media (min-width: 66em) {
    .band__text { align-items: first baseline; }
    .band__label { grid-column: 1 / 4; }
    .band__title, .band__caption { grid-column: 4 / -1; }
  }


  /* Das Logo ist der Menüknopf: fünf Linien, drei Zustände (Signet · ☰ · ✕).
     --logo: none hält die Linien im Signet; ohne Wert gilt die ☰-Stellung. */
  .morph { inline-size: 1.5rem; block-size: 1.5rem; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: square; transition: stroke 300ms cubic-bezier(.4, 0, 1, 1); }
  .morph line { transform-box: view-box; transform-origin: 50px 50px; transition: transform 300ms cubic-bezier(.4, 0, 1, 1), opacity 300ms cubic-bezier(.4, 0, 1, 1); }
  .morph :is(.morph__a, .morph__b, .morph__c, .morph__d) { stroke-linecap: butt; }
  .morph__stem { transform: var(--logo, rotate(90deg) scale(.91)); }
  .morph__a { transform: var(--logo, translateY(-25px) rotate(47.6deg) scale(.68)); }
  .morph__b { transform: var(--logo, translateY(25px) rotate(-47.6deg) scale(.68)); }
  .morph__c { transform: var(--logo, translateY(-25px) rotate(-47.6deg) scale(.68)); }
  .morph__d { transform: var(--logo, translateY(25px) rotate(47.6deg) scale(.68)); }
  /* Der Knopf zeigt das Signet. Zu ☰ wird er bei echter Absicht mit der Maus (main.js setzt .is-menu nach 150 ms
     Bewegung auf dem Knopf) oder mit Tastaturfokus; beim Verlassen zurück. Hinein 420 ms weich auslaufend,
     zurück 300 ms. Hinter dem offenen Menü bleibt er, wie er ist; im Menü wird aus ☰ ein ✕ (.is-x). */
  .menu-toggle { --logo: none; }
  .menu-toggle .morph { stroke: var(--signet); }
  .menu-toggle:is(.is-menu, :focus-visible) { --logo: initial; }
  .menu-toggle:is(.is-menu, :focus-visible) .morph { stroke: currentColor; transition-duration: 420ms; transition-timing-function: cubic-bezier(.33, 1, .68, 1); }
  .menu-toggle:is(.is-menu, :focus-visible) .morph line { transition-duration: 420ms; transition-timing-function: cubic-bezier(.33, 1, .68, 1); }
  /* Mobil und Tablet ist der Knopf der einzige Weg ins Menü: dort zeigt er gleich ☰ (Wunsch der Anwälte, 14.10.2026) */
  @media (max-width: 65.99em) {
    .menu-toggle { --logo: initial; }
    .menu-toggle .morph { stroke: currentColor; }
  }
  .menu__close .morph line { transition-duration: 420ms; transition-timing-function: cubic-bezier(.33, 1, .68, 1); }
  .is-x .morph :is(.morph__a, .morph__b, .morph__c, .morph__d) { transform: none; }
  .is-x .morph .morph__stem { transform: scaleY(0); opacity: 0; }

  @media (min-width: 66em) {
    /* Menü auf dem Desktop: Punkte groß in Plex (Bodoni zerfiel hier zu Haarlinien). Die Zeilen laufen über die
       ganze Breite: rechts in der Zeile jedes Anwalts sein Telefon und seine E-Mail, darunter Online-Anfrage */
    .menu__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; padding-block-start: clamp(1.5rem, 6dvh, 4rem); }
    .menu__body > nav { grid-column: 1 / -1; grid-row: 1; }
    .menu__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
    .menu__list > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
    .menu__list > li > :is(a, .menu__sub) { grid-column: 1 / 8; }
    .menu__reach { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: center; padding-block: var(--s-2); }
    .menu__direct { grid-column: 9 / -1; grid-row: 2; margin-block-start: var(--s-5); }
    .menu__legal { grid-column: 9 / -1; grid-row: 3; margin-block-start: var(--s-4); }
    .menu__list > li > a { min-block-size: clamp(3rem, (100dvh - 20rem) / 7, 4.5rem); font: 500 clamp(1.5rem, 3.4dvh, 2rem)/1.15 var(--font-text); letter-spacing: -.01em; }
    .menu__list > li > a:hover { text-decoration: underline 1px var(--accent); text-underline-offset: .2em; }
  }

  /* Kompaktere Abschnitte: Lead neben der Überschrift, Fragen mit Überschrift links */
  .split { border-block-start: 1px solid var(--rule-strong); padding-block-start: var(--s-5); row-gap: var(--s-6); }
  .split .head { border: 0; padding: 0; margin: 0; }
  .head--stack .head__title { margin-block-start: var(--s-3); }
  .notes { margin-block-start: var(--s-6); }
  .visit { margin-block-start: var(--s-6); }
  /* Schmaler Abschnitt (Anfahrt): halber Abstand, Linie oben wie bei den Köpfen */
  .section--slim { padding-block: var(--space-block); }
  .section--slim .visit { margin-block-start: 0; border-block-start-color: var(--rule-strong); }
  @media (min-width: 66em) {
    .contact-card__actions { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--s-6); }
  }
  /* Kontaktseite: Adresse und Route stehen direkt darüber in der Anfahrt */
  body:has(#anfahrt) .site-footer .g-q1 :is(address, .link-ext) { display: none; }
  @media (min-width: 66em) {
    .head--side .head__title { grid-column: 4 / 8; }
    .head--side .head__lead { grid-column: 8 / -1; grid-row: 1; margin-block-start: 0; }
    .head--stack { display: block; }
    .split__aside { grid-column: 1 / 7; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
    .split__main { grid-column: 7 / -1; }
  }

  /* Jeder Abschnitt soll auf einen Bildschirm passen: Abstände richten sich ab 66em nach der Höhe */
  @media (min-width: 66em) {
    :root { --space-section: clamp(3.5rem, 6svh + 1rem, 6rem); --space-block: clamp(2rem, 3svh + 1rem, 3.5rem); }
  }
  @media (min-width: 66em) and (max-height: 50em) {
    .head { padding-block-start: var(--s-4); }
    .faq summary { min-block-size: 56px; padding-block: var(--s-4); }
    .dlist { margin-block-start: var(--s-4); }
    .dlist > div { padding-block: var(--s-2); }
    .person__action, .door__action { margin-block-start: var(--s-5); }
    .step { padding-block: var(--s-4); }
    .step__body { margin-block-start: var(--s-3); }
    .door-row { min-block-size: 56px; padding-block: var(--s-3); }
    .door__list { margin-block-start: var(--s-3); }
    .door-row { row-gap: 0; }
    :root { --space-section: clamp(2.5rem, 7svh - 1rem, 4rem); --space-block: clamp(1.5rem, 3svh, 2.5rem); }
    .head--side .head__lead { font-size: var(--fs-body); line-height: 1.5; }
    .scene__grid { row-gap: var(--s-5); }
    .scene__fact { padding-block: var(--s-4); }
  }

  .faq__q, .door-row__desc { text-wrap: balance; }
  @media (max-width: 39.99em) {
    .hero--stage .hero__kicker > .hero__sep { display: none; }
    .hero--stage .hero__kicker > span:not(.sr-only, .hero__sep) { display: block; }
  }
  @media (min-width: 40em) and (max-width: 65.99em) {
    .site-footer__row > :is(.g-q1, .g-q4) { grid-column: 1 / -1; }
    .site-footer__row > .g-q2 { grid-column: 1 / 5; }
    .site-footer__row > .g-q3 { grid-column: 5 / -1; }
    .site-footer__row > .g-q4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--gutter); }
  }

  /* Bild im Rechtsgebiet-Hero */
  .page-hero__media { margin-block-start: var(--space-block); }
  .page-hero__media .frame { aspect-ratio: 4 / 3; }
  @media (min-width: 40em) { .page-hero__media .frame { aspect-ratio: 16 / 9; } }
  @media (min-width: 66em) { .page-hero__media .frame { aspect-ratio: 21 / 9; } }
  .frame > picture { display: block; block-size: 100%; }
  /* „Zuständig“ steht direkt unter der Überschrift, die Einleitung folgt (Seitenstruktur 14.10.2026) */
  .assigned__note { margin-block-start: var(--s-3); }
  /* Startseite, Schluss: drei Wege auf eigene Seiten (Fragen, Kontakt, Online-Anfrage), an der Achse von Spalte 4 */
  .next-list { margin-block-start: 0; }
  @media (min-width: 66em) { .grid > .next-list { grid-column: 4 / -1; } }
  /* Kontaktseite: heller Grund wie die übrigen Unterseiten, ohne Tür (das Teilen gehört der Startseite).
     Ruhig gesetzt: Titel auf der Achse von Toms Karte, ein Stil für alle Werte (Telefon wie E-Mail), keine
     Linien zwischen den Zeilen, Knopf und vCard bei beiden untereinander an derselben Stelle.
     Kopf und beide Karten passen ab 1100 × 720 in den ersten Bildschirm. */
  .contact-page .head__title { grid-column: 1 / -1; }
  .contact-page .contact-card .dlist > div { border-block: 0; padding-block: var(--s-2); }
  .contact-page .contact-card__actions { flex-direction: column; align-items: flex-start; column-gap: 0; row-gap: var(--s-3); }
  .contact-page .contact-card__actions .link-more { font-size: var(--fs-small); }
  @media (min-width: 66em) {
    .contact-page .head { margin-block-end: var(--s-6); }
    .contact-page .contact-card__actions { margin-block-start: var(--s-5); }
    .contact-page .contact-card .dlist > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--s-4); align-items: first baseline; }
    .contact-page .contact-card .dlist dd { margin-block-start: 0; }
    .contact-page .contact-card .dlist > div { padding-block: var(--s-1); }
  }
  /* Kontaktseite mit Porträts (4:5, nur für beide, Gestaltungsrichtlinien 10.2). Mobil klein neben dem Namen,
     auf dem Tablet über dem Namen, ab 66em in den ersten beiden Spalten der Karte neben Name und Daten; die Knöpfe
     laufen darunter über die ganze Karte. Die Zeile vor den Knöpfen ist flexibel und nimmt die Höhe des Porträts
     auf, damit Name und Daten oben bleiben und bei Tom und Klaus auf derselben Höhe stehen. */
  .contact-card__portrait { aspect-ratio: 4 / 5; }
  @media (max-width: 39.99em) {
    .contact-card__portrait { float: inline-start; inline-size: 6rem; margin-inline-end: var(--s-4); margin-block-end: var(--s-4); }
    .contact-card:has(> .contact-card__portrait) .dlist { clear: both; }
  }
  @media (min-width: 40em) {
    .contact-card:has(> .contact-card__portrait) { --rows: 8; }
    .contact-card__portrait { inline-size: 50%; margin-block-end: var(--s-4); }
  }
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 66em) {
      .pair:has(> .contact-card > .contact-card__portrait) { grid-template-rows: repeat(5, auto) 1fr auto; }
      .contact-card:has(> .contact-card__portrait) { grid-template-columns: subgrid; }
      .contact-card:has(> .contact-card__portrait) > * { grid-column: 3 / -1; }
      .contact-card > .contact-card__portrait { grid-column: 1 / 3; grid-row: 1 / 7; inline-size: auto; margin-block-end: 0; }
      .contact-card:has(> .contact-card__portrait) > .contact-card__actions { grid-column: 1 / -1; grid-row: 7; }
      /* „Telefon“ ist 63 px breit; mit 4,5rem passt die E-Mail-Adresse ab 1100 px noch in eine Zeile */
      .contact-page .contact-card:has(> .contact-card__portrait) .dlist > div { grid-template-columns: 4.5rem minmax(0, 1fr); }
    }
  }
  /* Fragenseite: Abschluss unter den Antworten */
  .split__main > .topics-end { margin-block-start: var(--s-6); }
  /* Impressum: Label neben dem Wert, damit beide Anbieter nebeneinander auf einen Bildschirm passen */
  @media (min-width: 66em) {
    .provider .dlist > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--s-4); align-items: first baseline; }
    .provider .dlist dd { margin-block-start: 0; }
  }
  /* Spaltenlinie (seit 14.10.2026): Wo Beschriftung und Wert nebeneinanderstehen, trennt eine feine senkrechte Linie
     in der Mitte des Spaltenabstands beide Spalten, statt einer Linie unter jeder Zeile. Sie hängt an der Zeile, nicht
     am Wert, damit sie auch bei zweizeiligen Beschriftungen ohne Lücke durchläuft. */
  @media (min-width: 66em) {
    :is(.person .dlist--split, .contact-page .contact-card .dlist, .legal-block .dlist--split, .provider .dlist) > div { position: relative; padding-block: var(--dl-pad, var(--s-2)); border-block: 0; }
    :is(.person .dlist--split, .contact-page .contact-card .dlist, .legal-block .dlist--split, .provider .dlist) > div::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: var(--dl-line); border-inline-start: 1px solid var(--rule-col); }
    .person .dlist--split { --dl-line: calc(8.5rem + var(--s-5) / 2); }
    .contact-page .contact-card .dlist { --dl-line: calc(6rem + var(--s-4) / 2); --dl-pad: var(--s-1); }
    .contact-page .contact-card:has(> .contact-card__portrait) .dlist { --dl-line: calc(4.5rem + var(--s-4) / 2); }
    .legal-block .dlist--split { --dl-line: calc(100% / 3 - var(--gutter) / 6); --dl-pad: var(--s-4); }
    .legal-block .dlist--split > div + div { margin-block-start: 0; }
    .provider .dlist { --dl-line: calc(10rem + var(--s-4) / 2); --dl-pad: var(--s-3); }
  }
  /* Profile: Name in H1-Größe (Display nur im Startseiten-Hero), daneben ein Steckbrief statt Kontaktzeile,
     Knöpfen und Faktenleiste; jede Angabe steht einmal, und alles passt auf den ersten Bildschirm */
  .profile-facts { margin-block-start: var(--s-6); }
  /* Steckbrief und Personenkarten ohne Linien zwischen den Zeilen, wie die Kontaktkarten */
  :is(.profile-facts, .person .dlist) > div { border-block: 0; padding-block: var(--s-2); }
  @media (min-width: 40em) and (max-width: 65.99em) {
    .profile-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  }
  @media (min-width: 66em) {
    .page-hero--profile .page-hero__grid { grid-template-rows: auto auto auto 1fr; }
    .page-hero--profile .page-hero__title { grid-row: 1; }
    .page-hero--profile .page-hero__lead { grid-column: 4 / 10; grid-row: 2; }
    .page-hero--profile .page-hero__actions { grid-column: 4 / 10; grid-row: 3; }
    /* Knopf und vCard bei Tom und Klaus an derselben Stelle: untereinander, wie auf der Kontaktseite */
    .page-hero--profile .page-hero__actions { flex-direction: column; align-items: flex-start; row-gap: var(--s-3); }
    .page-hero--profile .profile-aside { grid-column: 10 / -1; grid-row: 2 / -1; align-self: start; }
  }
  /* Porträt im Profil (4:5, Gestaltungsrichtlinien 10.2): ab 66em über dem Steckbrief in Spalte 10–12. Darunter
     steht es zwischen Name und Vorspann, der Steckbrief folgt nach dem Vorspann (Hülle mit display: contents) */
  .profile-portrait { aspect-ratio: 4 / 5; margin-block-start: var(--s-6); inline-size: min(100%, 20rem); }
  @media (max-width: 65.99em) {
    .profile-aside { display: contents; }
    .page-hero--profile :is(.profile-portrait, .profile-facts) { grid-column: 1 / -1; }
    .page-hero--profile :is(.profile-facts, .page-hero__actions) { order: 1; }
  }
  @media (min-width: 66em) {
    .profile-portrait { margin-block-start: 0; inline-size: auto; }
    .profile-aside > .profile-facts { margin-block-start: var(--s-4); }
  }
  /* Rechtsgebiete ab 66em: Bild im Hochformat (Spalte 10–12, Fluchtlinie wie der Porträt-Slot) neben Einleitung und „Zuständig“, damit beides zusammen auf den
     ersten Bildschirm passt (die Einleitungen der Anwälte sind lang). Darunter weiter 21:9 unter dem Text. */
  @media (min-width: 66em) {
    .page-hero--media .page-hero__grid { grid-template-rows: auto auto auto auto 1fr; }
    .page-hero--media .page-hero__title { grid-column: 4 / 10; grid-row: 1; }
    .page-hero--media .page-hero__lead { grid-column: 4 / 10; grid-row: 4; }
    .page-hero--media .assigned__note { grid-column: 4 / 10; grid-row: 3; }
    .page-hero--media .page-hero__grid > .assigned { grid-column: 4 / 10; grid-row: 2; }
    .page-hero--media .page-hero__media { grid-column: 10 / -1; grid-row: 1 / -1; align-self: start; margin-block-start: 0; }
    .page-hero--media .page-hero__media .frame { aspect-ratio: 4 / 5; }
  }

  /* Unterstrich zeichnet sich in der Navigation */
  .site-nav > ul > li > a {
    background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 0 1px no-repeat;
    transition: background-size 350ms var(--ease-out);
  }
  .site-nav > ul > li > a:hover { text-decoration: none; background-size: 100% 1px; }
  .site-nav > ul > li > a[aria-current] { text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; }
  @media (forced-colors: active) {
    .site-nav > ul > li > a:hover { text-decoration: underline 1px; text-underline-offset: .35em; }
    .site-nav > ul > li > a[aria-current] { text-decoration: underline 2px; text-underline-offset: .35em; }
  }

  /* Fragen öffnen kurz und weich, wo der Browser es kann */
  @media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) and selector(::details-content) {
      .faq { interpolate-size: allow-keywords; }
      .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 450ms var(--ease-out), content-visibility 450ms allow-discrete; }
      .faq details[open]::details-content { block-size: auto; }
    }
  }
}

/* Online-Anfrage (anfrage.html): ein Formular in drei Schritten, ohne Drittanbieter.
   Ohne JavaScript steht alles untereinander; anfrage.js macht daraus Schritte und blendet Zusatzfragen ein. */
@layer components {
  .form-section { padding-block-start: 0; }
  .form, .form-done { grid-column: 1 / -1; max-inline-size: 46rem; }
  @media (min-width: 66em) { .grid > .form, .grid > .form-done { grid-column: 4 / 11; } }

  .callout { padding-inline-start: var(--s-4); border-inline-start: 2px solid var(--accent); color: var(--fg); max-inline-size: var(--measure-body); }
  .page-hero__meta.callout { margin-block-start: var(--s-6); }

  /* Schritte */
  .stepper { display: none; }
  .js .stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-block-end: var(--s-7); counter-reset: none; }
  .stepper__item { padding-block-start: var(--s-3); border-block-start: 2px solid var(--rule); font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); hyphens: none; }
  .stepper__num { font-variant-numeric: tabular-nums lining-nums; margin-inline-end: var(--s-1); }
  .stepper__item.is-done { border-block-start-color: var(--fg-3); color: var(--fg-2); }
  .stepper__item[aria-current] { border-block-start-color: var(--accent); color: var(--fg); }
  @media (max-width: 39.99em) {
    .stepper__item { font-size: 0; letter-spacing: 0; }
    .stepper__item .stepper__num { font-size: var(--fs-label); }
    .stepper__item[aria-current] { font-size: var(--fs-label); letter-spacing: .08em; }
    .stepper { grid-template-columns: auto auto auto auto; justify-content: start; column-gap: var(--s-4); }
  }

  .form__step + .form__step { margin-block-start: var(--space-section); }
  .js .form.is-stepped .form__step + .form__step { margin-block-start: 0; }
  .form__title { display: flex; align-items: baseline; gap: var(--s-3); padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule-strong); font: 400 var(--fs-h3)/1.2 var(--font-display); font-variation-settings: "opsz" 11; }
  .form__title:focus { outline: none; }
  .form__num { font: 500 var(--fs-label)/1 var(--font-text); letter-spacing: .08em; color: var(--accent-text); font-variant-numeric: tabular-nums lining-nums; }

  /* Felder */
  .field { margin-block-start: var(--s-6); margin-inline: 0; border: 0; padding: 0; min-inline-size: 0; }
  .cond > .callout { margin-block-start: var(--s-4); }
  .field .field { margin-block-start: var(--s-4); }
  .field__label { display: block; padding: 0; font-weight: 500; line-height: 1.4; }
  .field__label--sub { font-weight: 400; font-size: var(--fs-small); color: var(--fg-2); }
  .field__req { margin-inline-start: var(--s-2); font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
  .field__hint { margin-block-start: var(--s-1); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); max-inline-size: var(--measure-body); }
  .field__hint--after { margin-block-start: var(--s-2); }
  .field-row { display: grid; gap: 0 var(--gutter); }
  .field-row > .field { margin-block-start: var(--s-6); }
  .field .field-row > .field { margin-block-start: var(--s-4); }
  @media (min-width: 40em) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row--plz { grid-template-columns: 8rem 1fr; }
    .field--narrow { max-inline-size: 16rem; }
  }

  .input {
    display: block; inline-size: 100%; min-block-size: 48px; margin-block-start: var(--s-2); padding: var(--s-3) var(--s-4);
    border: 1px solid var(--fg-3); border-radius: 0; background: #fff; color: var(--fg);
    font: 400 var(--fs-body)/1.4 var(--font-text); appearance: none;
  }
  .input:hover { border-color: var(--fg); }
  .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--fg); }
  .input::placeholder { color: var(--fg-3); opacity: 1; }
  .input--area { min-block-size: 10rem; resize: vertical; }
  .input--date { max-inline-size: 14rem; }
  .input--select {
    padding-inline-end: var(--s-8);
    background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%);
    background-position: calc(100% - 1.375rem) 50%, calc(100% - 1rem) 50%; background-size: .375rem .375rem; background-repeat: no-repeat;
  }

  /* Auswahl als Zeilen und Chips */
  .choice { display: flex; align-items: center; gap: var(--s-3); min-block-size: 48px; padding: var(--s-2) var(--s-4); border: 1px solid var(--rule); background: #fff; cursor: pointer; line-height: 1.35; }
  .choice:hover { border-color: var(--fg-3); }
  .choice input { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--anthracite-900); }
  .choice:has(input:checked) { border-color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); }
  .choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .choice input:focus-visible { outline: none; }
  .choice--check { margin-block-start: var(--s-6); align-items: flex-start; padding-block: var(--s-3); }
  .choice--check input { margin-block-start: .2em; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-3); }
  .chips .choice { flex: 0 1 auto; }

  /* Rechtsgebiet: Tom links, Klaus rechts, dazwischen die Fuge */
  .choice-groups { position: relative; display: grid; gap: var(--s-6) var(--gutter); margin-block-start: var(--s-4); }
  .choice-group { display: grid; gap: var(--s-2); align-content: start; }
  .choice-group__head { padding-block: var(--s-3) var(--s-2); border-block-start: 1px solid var(--rule-strong); font-weight: 500; }
  .choice-group__role { display: block; font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
  @media (min-width: 40em) {
    .choice-groups { grid-template-columns: 1fr 1fr; }
    .choice-groups::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(50% - .5px); border-inline-start: 1px solid var(--fuge); }
  }
  .choice-group.is-preferred .choice-group__head { border-block-start-color: var(--accent); box-shadow: 0 -1px 0 var(--accent); }
  .route { margin-block-start: var(--s-4); }

  /* Zusatzfragen */
  .cond__when { margin-block-start: var(--s-1); font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
  .js .cond__when { display: none; }
  .cond--box { margin-block-start: var(--s-6); padding: var(--s-5) 0 var(--s-2) var(--s-5); border-inline-start: 1px solid var(--accent); }
  .cond--box > .field:first-of-type, .cond--box > .cond__when + .field, .cond--box > .cond__when + .field-row > .field { margin-block-start: var(--s-4); }
  .cond__head { font: 500 var(--fs-h4)/1.3 var(--font-text); }
  .cond[hidden] { display: none; }

  /* Fehler: Text, Linie und Gewicht, nie nur Farbe */
  .field__error { display: flex; gap: var(--s-2); margin-block-start: var(--s-2); font-weight: 500; color: var(--fg); }
  .field__error::before { content: ""; flex: none; inline-size: 3px; background: var(--accent-text); }
  .field.is-invalid .input, .field.is-invalid .choice-groups .choice, .field.is-invalid > .chips .choice { border-color: var(--fg); border-width: 2px; }
  .form__summary-errors { margin-block-start: var(--s-5); padding: var(--s-4) var(--s-5); border: 2px solid var(--fg); }
  .form__summary-errors:focus { outline: none; }
  .form__summary-errors p { font-weight: 500; }
  .form__summary-errors ul { margin-block-start: var(--s-2); padding-inline-start: 1.1em; list-style: disc; }

  /* Navigation, Prüfen, Senden */
  .form__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-block-start: var(--s-7); padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); }
  .form__nav [data-nav="back"][hidden] + [data-nav="next"] { margin-inline-start: auto; }
  .form__nav [hidden] { display: none; }
  .review { margin-block-start: var(--s-5); }
  .review__group + .review__group { margin-block-start: var(--s-6); }
  .review__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block-end: var(--s-2); border-block-end: 1px solid var(--rule-strong); }
  .review__head h3 { font: 500 var(--fs-h4)/1.3 var(--font-text); }
  .review__edit { padding: 0; border: 0; background: none; color: var(--fg); font-weight: 500; text-decoration: underline 1px var(--accent); text-underline-offset: .25em; cursor: pointer; min-block-size: 44px; }
  .review dl > div { display: grid; gap: var(--s-1); padding-block: var(--s-3); border-block-end: 1px solid var(--rule); }
  .review dt { font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
  .review dd { white-space: pre-line; overflow-wrap: anywhere; }
  @media (min-width: 40em) { .review dl > div { grid-template-columns: 14rem 1fr; gap: var(--gutter); align-items: first baseline; } }
  .form__notes { margin-block-start: var(--s-6); padding-inline-start: 1.1em; list-style: disc; color: var(--fg-2); max-inline-size: var(--measure-body); }
  .form__notes li + li { margin-block-start: var(--s-2); }
  .form__send { margin-block-start: var(--s-6); }
  .js .form.is-stepped .form__send { margin-block-start: var(--s-6); }
  .form__status:not(:empty) { margin-block-start: var(--s-4); font-weight: 500; }
  .form [type="submit"][aria-disabled="true"] { cursor: progress; opacity: .7; }
  .hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

  .form-done { padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule-strong); }
  .form-done:focus { outline: none; }
  .form-done > * + * { margin-block-start: var(--s-5); }
  .form-done .lead { color: var(--fg); }

  @media print { .stepper, .form__nav, .hp, .callbar { display: none !important; } .form__step[hidden] { display: block !important; } }
}

/* Seitenübergänge: seit 17.10.2026 keine. Safari tauschte am Ende des Überblendens den Schnappschuss gegen die
   echte Seite, das zuckte kurz nach dem Aufruf; zuvor waren schon der wandernde Name und das Nachrutschen
   der neuen Seite entfernt worden. Die neue Seite steht direkt. */

/* Bewegung (vollständige Liste in design/variante-wow.md): Nur der Hero baut sich beim Laden auf.
   Alles andere hängt am Scrollen, als CSS-Scroll-Animation oder, wo der Browser sie nicht kann,
   über Fortschrittswerte aus main.js (html.sv-js). */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes k-rise { from { transform: translateY(135%); } }
    @keyframes k-mask { from { transform: translateY(130%); } }
    @keyframes k-up { from { opacity: 0; transform: translateY(var(--rise)); } }
    @keyframes k-fade { from { opacity: 0; } }
    @keyframes k-draw-x { from { transform: scaleX(0); } }
    @keyframes k-grow-y { from { transform: scaleY(0); } }
    @keyframes k-unveil { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
    @keyframes k-settle { from { scale: 1.08; } }
    @keyframes k-zoom { from { transform: scale(1.06); } }

    /* Hero beim Laden */
    .rise { clip-path: inset(-.5em -.3em -.3em -.3em); }
    .rise > span { animation: k-rise 1300ms var(--ease-out) both .15s; }
    .rise + .rise > span { animation-delay: .3s; }
    .hero--stage .label--dash::before { transform-origin: left; animation: k-draw-x 1200ms var(--ease-io) both; }
    .hero--stage .hero__kicker > span, .hero--stage .hero__kicker > .hero__sep { animation: k-fade 900ms var(--ease-out) both .1s; }
    .hero--stage .hero__lead { animation: k-up 1100ms var(--ease-out) both .55s; }
    .hero--stage .hero__more { animation: k-up 1100ms var(--ease-out) both .65s; }
    .hero__media .frame { animation: k-unveil var(--dur-5) var(--ease-io) both .2s; }
    .hero__media .frame img { animation: k-settle 2600ms var(--ease-out) both .2s; }
    .hero__media .caption { animation: k-fade 900ms var(--ease-out) both 1.2s; }


    /* Menüpunkte bauen sich beim Öffnen nacheinander auf */
    .menu[open] .menu__list li { animation: k-up 900ms var(--ease-out) both; }
    .menu[open] .menu__list li:nth-child(2) { animation-delay: 50ms; }
    .menu[open] .menu__list li:nth-child(3) { animation-delay: 100ms; }
    .menu[open] .menu__list li:nth-child(4) { animation-delay: 150ms; }
    .menu[open] .menu__list li:nth-child(5) { animation-delay: 200ms; }
    .menu[open] .menu__list li:nth-child(6) { animation-delay: 250ms; }
    .menu[open] .menu__list li:nth-child(7) { animation-delay: 300ms; }
    .menu[open] :is(.menu__direct, .menu__legal) { animation: k-fade 900ms var(--ease-out) both 350ms; }

    /* Scrollgebunden (.sv): Alles unterhalb des ersten Bildschirms bewegt sich im Takt des Scrollens.
       Eine Zeile steigt 2rem, während ihre Oberkante von 98 % auf 72 % der Fensterhöhe wandert;
       nebeneinanderstehende Teile folgen je 2 % später. Zurückscrollen spult zurück. */
    .reveal .pair.sv > .pair__item { --lag: 0vh; }
    .reveal .sv:not(.pair, .steps) > :nth-child(2) { --lag: 2vh; }
    .reveal .sv:not(.pair, .steps) > :nth-child(n + 3) { --lag: 4vh; }
    .reveal .step.sv:nth-child(2) { --lag-el: 2vh; }
    .reveal .step.sv:nth-child(3) { --lag-el: 4vh; }
    .reveal .step.sv:nth-child(4) { --lag-el: 6vh; }
    .reveal .head.sv > .head__title { clip-path: inset(-.5em -.5em -.35em -.5em); }
    .reveal .head.sv > .head__title > .ri { display: block; }

    /* main.js setzt beim Scrollen die Fortschritte als --p, --line und --tick (0 bis 1, Kurven schon eingerechnet),
       in jedem Browser gleich; CSS-Scroll-Animationen gibt es nicht mehr (18.10.2026) */
    .reveal.sv-js :is(.head, .band__text, .scene__fact, .topic, .step, .factbar, .merksatz__grid).sv > *,
    .reveal.sv-js .pair.sv > .pair__item > *,
    .reveal.sv-js .chrono.sv > li > * { opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * var(--rise))); }
    .reveal.sv-js .head.sv > .head__title { opacity: 1; transform: none; }
    .reveal.sv-js .head.sv > .head__title > .ri { transform: translateY(calc((1 - var(--p, 0)) * 130%)); }
    .reveal.sv-js .pair--fuge.sv::before { transform-origin: top; transform: scaleY(var(--p, 0)); }
    .reveal.sv-js .steps.sv::before { transform-origin: left; transform: scaleX(var(--p, 0)); }
    .reveal.sv-js .chrono.sv::before { transform: scaleY(var(--line, 0)); }
    .reveal.sv-js .chrono.sv > li::before { transform: scaleX(var(--tick, 0)); }
    .reveal.sv-js .chrono.sv > li:last-child > :first-child::before { opacity: var(--tick, 0); }
  }

  .steps { position: relative; }
  .steps::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px; border-block-start: 1px solid var(--rule-strong); }

  @media print {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal .sv > *, .reveal .sv > * > *, .reveal .sv > .head__title > .ri { opacity: 1 !important; transform: none !important; }
    .reveal .pair--fuge::before, .reveal .steps::before, .reveal .chrono::before, .reveal .chrono > li::before { transform: none !important; }
    .reveal .doors > .pair__item { transform: none !important; }
    .faq details::details-content { content-visibility: visible !important; block-size: auto !important; }
    .faq__icon { display: none; }
    .reveal .m-reveal .frame { clip-path: none !important; }
    .reveal .m-reveal .frame img { transform: none !important; }
    .band { min-block-size: 0; display: block; }
    .band__media { display: none; }
    .band__text { padding-block: var(--s-7) 0; }
  }
}