/* Kalinski · Rechtsanwälte in Bürogemeinschaft
   Gestaltung „Kanzlei“ (seit 17.10.2026). Liegt über style.css und steht bewusst außerhalb der @layer-Ebenen,
   damit diese Regeln alle Regeln aus style.css überstimmen. style.css liefert Raster, Komponenten und Verhalten,
   diese Datei das Erscheinungsbild. Beschreibung: design/gestaltungsrichtlinien.md, Abschnitt 0.

   Leitidee: Flächen aus dem Kanzlei-Look, Bedienung und Raster aus dem Satzspiegel (Blindprüfung 17.10.2026).
   - Keine Linien. Ordnung entsteht aus Flächen (Elfenbein, Stone, Anthrazit), Kacheln und Weißraum.
   - Bodoni nur groß (Hero, Abschnitte, Namen), alles andere in Plex. Bodoni zerfällt klein zu Haarlinien.
   - Bronze sparsam: Signet, Fuge, Abschnittsnummern, kurzer Strich über Kopf-Labels, aktive Seite.
   - Tom links, Klaus rechts; die Fuge mit dem geteilten Signet zeigt die Bürogemeinschaft.
   - Kopfzeile im Porsche-Stil: „Menü“ links, Zeichen in der Mitte, rechts „Anrufen“ und „Online-Anfrage“;
     unter 66em Zeichen und „Menü“. Das Menü zeigt je Anwalt Nummer und Rechtsgebiete in einer Ebene. */


/* ==========================================================================
   Tokens
   ========================================================================== */

:root, [data-theme="paper"] {
  --k-ivory: #f6f3ee;
  --k-stone: #ece7de;
  --k-stone-2: #e3dccf;
  --k-ink: #2a2b2d;
  --k-ink-2: #34353a;
  --k-ink-3: #3e4045;
  --k-grey: #4a4a46;
  --k-grey-2: #5c5c57;
  --k-bronze: #9a7b4f;
  --k-bronze-text: #765c37;
  --k-bronze-light: #c9ad7f;
  --k-radius-s: 2px;   /* nur noch Platzhalter-Marken; Knöpfe seit 24.10.2026 mit --k-radius wie Zeilen und Kacheln */
  --k-radius: 4px;
  --k-radius-l: 6px;
  --k-pad: clamp(1.5rem, 1rem + 2vw, 3rem);

  --bg: var(--k-ivory);
  --fg: var(--k-ink);
  --fg-2: var(--k-grey);
  --fg-3: var(--k-grey-2);
  --accent: var(--k-bronze);
  --accent-text: var(--k-bronze-text);
  /* Kachel: auf Elfenbein Stone, auf Stone Elfenbein, auf Anthrazit etwas heller */
  --tile: var(--k-stone);
  --tile-2: var(--k-stone-2);
  --rule: transparent;
  --rule-col: transparent;
  --rule-strong: transparent;
  --fuge: var(--k-bronze);
  --signet: var(--k-bronze);
  --btn-bg: var(--k-ink);
  --btn-fg: var(--k-ivory);
  --btn-bg-hover: var(--k-bronze-text);
  --btn-bg-active: #624d2f;
  --todo-bg: #e7e0d5;
  --bg-hover: transparent;

  --fs-display: clamp(2.75rem, 1.5rem + 5.4vw, 6.5rem);
  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --fs-h2: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --fs-h3: clamp(1.75rem, 1.6rem + .6vw, 2.25rem);
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --fs-tile: 1.375rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --header-h: 4.75rem;
  /* Zeilen höchstens etwa 65 Zeichen (Plex: deutscher Text gemessen rund 1,5 Zeichen je ch) */
  --measure-legal: 42ch;
  --space-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}
[data-theme="stone"] { --bg: var(--k-stone); --tile: var(--k-ivory); --tile-2: #fbf9f5; --todo-bg: #ddd3c3; }
[data-theme="ink"] {
  --bg: var(--k-ink); --fg: var(--k-ivory); --fg-2: #b3b0a8; --fg-3: #b3b0a8;
  --accent: var(--k-bronze-light); --accent-text: var(--k-bronze-light); --tile: var(--k-ink-2); --tile-2: var(--k-ink-3);
  --signet: var(--k-bronze-light);
  --btn-bg: var(--k-ivory); --btn-fg: var(--k-ink); --btn-bg-hover: var(--k-bronze-light); --btn-bg-active: #b89a6c;
  --todo-bg: #47423c;
}
:root, [data-theme] { --focus: var(--fg); }
@media (min-width: 66em) {
  :root { --space-section: clamp(5rem, 9svh + 1rem, 9rem); --space-block: clamp(2.5rem, 4svh + 1rem, 4.5rem); }
}


/* ==========================================================================
   Grundlagen
   ========================================================================== */

body { font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--k-bronze-light); color: var(--k-ink); }

/* Bodoni für große Titel, normal geschrieben */
h1, h2, .t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em;
  font-optical-sizing: none; font-variation-settings: "opsz" 11;
}
h1, .t-h1 { line-height: 1.06; }
h2, .t-h2 { line-height: 1.1; }
.t-h3 { line-height: 1.15; letter-spacing: 0; }
h3, .t-h4 { font-weight: 500; }
strong, b { font-weight: 600; }
/* Bodoni-Skala: Die Haarstriche tragen nur groß. Ab 56 px (Hero, Seiten- und Abschnittstitel) der normale
   Schnitt; in mittleren Größen (Namen, Türtitel, Merksatz, Jahre, Formulartitel) mindestens 36 bis 48 px und der
   kräftigere Schnitt 500, damit die feinen Striche nicht wegbrechen; darunter keine Bodoni, sondern Plex.
   Immer mit der robusten optischen Größe „opsz 11“. */
:is(.t-h3, .person__name, .door > :is(h2, h3), .provider > h2, .contact-card > h2, .merksatz__text, .chrono__year, .form__title) {
  font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 11;
}
.t-h3, .door > :is(h2, h3), .provider > h2, .contact-card > h2 { font-size: clamp(2.25rem, 2rem + .9vw, 2.75rem); line-height: 1.12; }
.chrono__year { --year: clamp(2.25rem, 2rem + .8vw, 2.75rem); font-size: var(--year); letter-spacing: 0; }
.form__title { font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem); }
.step__num { font-optical-sizing: none; }
/* Titel mittlerer Größe in Kacheln: Plex halbfett statt dünner Bodoni */
.scene__fact .t-h3, .topic__body > h3 {
  font: 600 var(--fs-tile)/1.25 var(--font-text); letter-spacing: -.012em; font-variation-settings: normal;
}

/* Labels: auch als h1/h2 immer in Plex */
@media (max-width: 65.99em) { :is(h1, h2, .t-display, .t-h1, .t-h2, .hero__line, .band__title):not(.label) { font-weight: 500; } }
.label, :is(h1, h2, h3).label { font-family: var(--font-text); font-weight: 500; letter-spacing: .08em; font-variation-settings: normal; }
.label__num { color: var(--accent-text); }
/* Kurzer Bronzestrich über Kopf-Labels: das eine juristische Zeichen statt Linien über die ganze Breite */
.head__label::before, .label--dash::before {
  content: ""; display: block; inline-size: 28px; block-size: 0;
  border-block-start: 1px solid var(--accent); margin-block-end: var(--s-3);
}
.lead { color: var(--fg-2); }

a { text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.todo { border-radius: var(--k-radius-s); }

/* Bilder: abgerundet, wo sie nicht randlos laufen */
.frame { border-radius: var(--k-radius-l); background: var(--k-stone); }
.caption { letter-spacing: .06em; font-weight: 500; }

/* Knöpfe: gefüllt, kaum gerundet */
.btn { border-radius: var(--k-radius); border-width: 0; min-block-size: 52px; padding-inline: 1.75rem; font-weight: 500; letter-spacing: .01em; }
.btn--primary, .btn--primary:hover, .btn--primary:active { border: 0; }
/* Hauptknopf in Bronze (dunkler Ton der Marke, 5,7:1 mit Elfenbein), beim Überfahren Anthrazit: Das Handeln hat
   die Markenfarbe, Zustände (aktiver Schritt, gewählte Antwort) bleiben Anthrazit. Vorher war er Anthrazit wie diese
   und wirkte schwer (18.10.2026). */
.btn--primary { background: var(--k-bronze-text); color: var(--k-ivory); transition: background-color 200ms var(--ease); }
.btn--primary:hover, .btn--primary:active { background: var(--k-ink); color: var(--k-ivory); }
.btn--secondary { background: transparent; border: 1px solid var(--fg); color: var(--fg); }
.btn--secondary:hover { background: var(--fg); color: var(--bg); }
.btn--compact { min-block-size: 44px; padding-inline: 1.25rem; }
}
.link-more { font-weight: 500; text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
.link-more:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }



/* ==========================================================================
   Kopfzeile im Porsche-Stil (Entscheidung der Anwälte, 17.10.2026 abends)
   Ab 66em: links „Menü“, in der Mitte das volle Zeichen, rechts „Anrufen“ (Panel mit beiden Anwälten und
   Nummern) und „Online-Anfrage“. Keine Framebar, keine Textlinks in der Zeile: Rechtsgebiete, Profile, Fragen und
   Kontakt stehen im Menü, je Anwalt auf einer Fläche mit Nummer und Gebieten (eine Ebene, kein Raten).
   Darunter: Zeichen links, „Menü“ rechts. Auf der Startseite liegt sie oben transparent auf dem Titelbild und
   bekommt ihren festen Grund, sobald man scrollt (siehe unten); auf allen anderen Seiten steht sie immer fest.
   ========================================================================== */

.site-header {
  background: var(--k-ivory); color: var(--fg);
}
.site-header::after { content: none; }
.site-header__inner { min-block-size: var(--header-h); padding-block: 0; gap: var(--s-6); }
.site-header__inner > .menu-toggle { display: inline-flex; gap: .6rem; margin: 0 0 0 auto; opacity: 1; color: inherit; --logo: initial; }
.site-header__inner > .menu-toggle .morph { stroke: currentColor; }
/* Im HTML steht „Menü“ vor dem Zeichen (Tab-Reihenfolge wie am Desktop sichtbar); am Handy steht es rechts */
@media (max-width: 65.99em) { .site-header__inner > .menu-toggle { order: 2; } }
.site-header .header-ask {
  display: inline-flex; min-block-size: 44px; padding-inline: 1.25rem; border: 0; border-radius: var(--k-radius);
  background: var(--k-bronze-text); color: var(--k-ivory); font-weight: 500; white-space: nowrap;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.site-header .header-ask:hover { background: var(--k-ink); color: var(--k-ivory); }
body:has(#anfrage-form) .site-header .header-ask { display: none; }
/* Startseite (Test 18.10.2026, nach Porsche): Beim Laden liegt die Kopfzeile ohne Fläche auf dem Foto, Schrift in
   Elfenbein, „Online-Anfrage“ hell gefüllt; ab dem ersten Scrollen (main.js setzt .is-scrolled) blendet der feste
   Grund ein. Das Foto beginnt dafür ganz oben (main rückt um die Kopfzeile nach oben). Offenes Panel „Anrufen“:
   fester Grund, damit das Panel nicht an einer durchsichtigen Zeile hängt. */
/* Der Wechsel läuft über 500 ms, weich an- und auslaufend (300 ms wirkten wie ein Umschalten, 900 ms träge) */
.site-header { --hdr-fade: 500ms cubic-bezier(.33, 0, .2, 1); transition: background-color var(--hdr-fade), color var(--hdr-fade); }
.site-header :is(.lockup__signet, .lockup__divider, .header-ask) { transition: stroke var(--hdr-fade), background-color var(--hdr-fade), color var(--hdr-fade); }
body:has(.hero--stage) main { margin-block-start: calc(-1 * var(--header-h)); }
/* Der Scroll-Fühler (1 px über der Kopfzeile) braucht keinen Platz: sonst stünde über dem Foto ein heller Strich */
.scroll-sentinel { position: absolute; inset: 0 0 auto; }
body:has(.hero--stage) .site-header:not(.is-scrolled, :has(.k-call:popover-open)) { background: transparent; color: var(--k-ivory); }
body:has(.hero--stage) .site-header:not(.is-scrolled, :has(.k-call:popover-open)) .lockup__signet { stroke: var(--k-bronze-light); }
body:has(.hero--stage) .site-header:not(.is-scrolled, :has(.k-call:popover-open)) .lockup__divider { background: var(--k-bronze-light); }
body:has(.hero--stage) .site-header:not(.is-scrolled, :has(.k-call:popover-open)) .header-ask { background: var(--k-ivory); color: var(--k-ink); }
body:has(.hero--stage) .site-header:not(.is-scrolled, :has(.k-call:popover-open)) .header-ask:hover { background: var(--k-stone); }
.site-header .lockup, .site-header .lockup__sub { color: inherit; }
@media (min-width: 66em) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .site-header__inner > .menu-toggle, .site-header.is-compact .menu-toggle {
    display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; flex-direction: row-reverse; margin: 0;
  }
  .site-header__inner > .lockup { grid-column: 2; grid-row: 1; }
  .site-header .lockup--full .lockup__divider { block-size: 36px; }
  .site-header .site-nav { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: var(--s-6); margin: 0; }
}


/* „Anrufen“ und sein Panel */
.k-call__toggle {
  display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; padding: 0;
  border: 0; background: none; color: inherit; font: 500 var(--fs-ui)/1.2 var(--font-text); cursor: pointer;
}
.k-call__toggle:hover { text-decoration: underline 1px currentColor; text-underline-offset: .35em; }
.k-call__toggle .icon { inline-size: 18px; block-size: 18px; }
.k-call {
  position: fixed; inset: calc(var(--panel-top, var(--header-h)) + .5rem) var(--page-margin) auto auto; margin: 0;
  inline-size: min(22rem, calc(100vw - 2rem)); padding: var(--s-3); border: 0; border-radius: var(--k-radius-l);
  background: var(--k-ivory); color: var(--k-ink); box-shadow: 0 24px 60px rgb(42 43 45 / .18);
}
.k-call::backdrop { background: transparent; }
.k-call__row { display: grid; justify-items: start; padding: var(--s-4) var(--s-5); border-radius: var(--k-radius); background: var(--k-stone); }
.k-call__row + .k-call__row { margin-block-start: 6px; }
.k-call__role { color: var(--accent-text); }
.k-call__name { margin-block-start: var(--s-1); font: 600 1.25rem/1.25 var(--font-text); letter-spacing: -.01em; }
.k-call__num { margin-block-start: var(--s-2); font-weight: 500; font-size: 1.125rem; }
.k-call .todo { font-size: var(--fs-small); }
.k-call__mail { margin-block-start: var(--s-1); font-size: var(--fs-small); text-decoration: underline 1px var(--accent); text-underline-offset: .25em; }
/* Unter 66em öffnet „Anrufen · E-Mail“ in der Leiste unten dasselbe Panel, als Fläche direkt über der Leiste */
@media (max-width: 65.99em) {
  .k-call { inset: auto var(--page-margin) calc(var(--callbar-h) + env(safe-area-inset-bottom) + .5rem) var(--page-margin); inline-size: auto; }
  .k-call__num, .k-call__mail { display: inline-flex; align-items: center; min-block-size: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .k-call:popover-open { opacity: 1; translate: 0 0; transition: opacity 200ms var(--ease-out), translate 300ms var(--ease-out); }
  @starting-style { .k-call:popover-open { opacity: 0; translate: 0 -8px; } }
}


/* ==========================================================================
   Menü (in jeder Breite die Navigation; die Kopfzeile trägt nur „Menü“, „Anrufen“ und „Online-Anfrage“)
   Flyout von links wie im Kanzlei-Look, aber eine Ebene wie im Satzspiegel: Unter jedem Anwalt stehen gleich
   seine Rechtsgebiete, Telefon und E-Mail, auf einer Stone-Fläche je Anwalt. So muss niemand raten, wer
   zuständig ist (Blindprüfung 17.10.2026). Öffnen 500 ms, Schließen 350 ms (länger wirkte träge).
   ========================================================================== */

.menu {
  --panel: min(27rem, 100vw); --pad: clamp(1.25rem, .75rem + 2vw, 2rem);
  inset: 0 auto 0 0; inline-size: var(--panel); block-size: 100dvh; z-index: 50; overflow: hidden;
  background: var(--k-ivory); box-shadow: none;
}
.menu[open] { display: flex; flex-direction: column; }
.menu:focus { outline: none; }
.menu::backdrop { background: rgb(42 43 45 / .4); }
.menu .wrap { width: auto; margin-inline: var(--pad); }
.menu > :is(.menu__head, .menu__body) { flex: none; inline-size: calc(var(--panel) - 2 * var(--pad)); }
.menu__head { justify-content: space-between; min-block-size: var(--header-h); }
@media (min-width: 66em) { .menu__head .lockup--full .lockup__divider { display: block; block-size: 36px; } }
/* „Schließen“ mit Wort, nicht nur als × (Blindprüfung Runde 2) */
.menu__close {
  flex-direction: row; justify-content: center; gap: .5rem;
  flex: none; min-inline-size: 44px; block-size: 44px; min-block-size: 44px; padding-inline: var(--s-4); border-radius: var(--k-radius);
  background: var(--k-stone); font: 500 var(--fs-ui)/1 var(--font-text); transition: background-color 200ms var(--ease);
}
.menu__close:hover { background: var(--k-stone-2); }
.menu__close:hover > span { text-decoration: none; }
.menu__close .morph { inline-size: 1.125rem; block-size: 1.125rem; }
.menu .menu__body { flex: 1 1 auto; display: flex; flex-direction: column; padding-block: var(--s-6); overflow-y: auto; }
.menu__body > nav { flex: none; }

/* Erste Ebene */
/* Ohne negativen Rand: die scrollbare Fläche schnitte die Kanten der Stone-Flächen ab */
.menu .menu__list { display: grid; grid-template-columns: none; row-gap: 2px; margin-inline: 0; }
.menu .menu__list > li { display: block; border: 0; padding: 0; margin: 0; background: none; }
.menu .menu__list > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-block-size: 3.5rem; padding-inline: var(--s-4); border-radius: var(--k-radius);
  font: 500 1.25rem/1.2 var(--font-text); letter-spacing: -.005em; color: var(--fg); text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.menu .menu__list > li > a:hover { background: var(--k-stone); text-decoration: none; }
.menu .menu__list > li > a[aria-current] { color: var(--accent-text); }
/* Je Anwalt eine Fläche: Name, gleich darunter Nummer und E-Mail, dann die Rechtsgebiete (so steht die Nummer
   im ersten Bildschirm des Menüs; die Reihenfolge steht so im HTML) */
.menu .menu__list > li.menu__group { margin-block: var(--s-2); padding: var(--s-2) var(--s-4) var(--s-3); border-radius: var(--k-radius-l); background: var(--k-stone); }
.menu .menu__group > .menu__reach { margin-block: 0 var(--s-2); }
.menu .menu__list > li.menu__group > a { margin-inline: calc(-1 * var(--s-4)); font-weight: 600; border-radius: var(--k-radius-l) var(--k-radius-l) var(--k-radius) var(--k-radius); }
.menu .menu__list > li.menu__group > a:hover { background: var(--k-stone-2); }
.menu .menu__sub { display: grid; grid-template-columns: none; gap: 0; padding: 0; margin: 0; }
.menu .menu__sub li { display: block; }
.menu .menu__sub li::before { content: none; }
.menu .menu__sub a {
  display: flex; align-items: center; min-block-size: 40px; font-size: 1.0625rem; color: var(--fg); text-decoration: none;
}
.menu .menu__sub a:hover { text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
.menu .menu__sub a[aria-current] { color: var(--accent-text); }
.menu .menu__reach { display: grid; justify-items: start; gap: 0; padding: 0; }
.menu .menu__reach a { display: inline-flex; align-items: center; min-block-size: 40px; text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
.menu .menu__reach a[href^="tel:"] { font: 500 1.25rem/1.3 var(--font-text); }
.menu .menu__reach a:hover { text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
.menu .menu__reach .todo { margin-block: var(--s-2); }
/* „Online-Anfrage“ steht ganz oben im Menü (so auch im HTML), nicht unten: Dort war sie am Handy ohne Scrollen nicht
   zu sehen */
.menu__direct { margin-block: 0 var(--s-5); padding-block-start: 0; }
.menu__legal { margin-block-start: auto; padding-block-start: var(--s-7); }
/* „Online-Anfrage“ als helle Kachel im Stil der Anwaltskacheln, mit kurzer Erklärung (statt eines schweren dunklen
   Balkens über die volle Breite) */
.menu__ask-tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4); row-gap: var(--s-1);
  padding: var(--s-5) var(--s-5); border-radius: var(--k-radius-l); background: var(--k-stone); color: var(--fg); text-decoration: none;
  transition: background-color 200ms var(--ease);
}
.menu__ask-tile:hover { background: var(--k-stone-2); }
.menu__ask-title { grid-column: 1; font: 600 1.25rem/1.25 var(--font-text); letter-spacing: -.01em; }
.menu__ask-tile:hover .menu__ask-title { text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
.menu__ask-note { grid-column: 1; font-size: .9375rem; line-height: 1.4; color: var(--fg-2); hyphens: manual; text-wrap: balance; }
.menu__ask-tile .icon { grid-column: 2; grid-row: 1 / span 2; inline-size: 22px; block-size: 22px; color: var(--accent); transition: transform 200ms var(--ease); }
.menu__ask-tile:hover .icon { transform: translateX(4px); }
/* Desktop: breites Flyout, Tom und Klaus nebeneinander, die Namen groß in Bodoni (überstimmt das Desktop-Menü
   aus style.css mit seinem 12-Spalten-Raster) */
@media (min-width: 66em) {
  .menu { --panel: min(48rem, 100vw); }
  .menu .menu__body { display: flex; flex-direction: column; padding-block-start: var(--s-6); }
  .menu .menu__body > nav { grid-column: auto; grid-row: auto; }
  .menu .menu__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-3); }
  .menu .menu__list > li { grid-column: 1 / -1; display: block; }
  .menu .menu__list > li.menu__group { grid-column: auto; grid-row: 2; }
  .menu .menu__list > li > a { min-block-size: 3.5rem; font: 500 1.25rem/1.2 var(--font-text); }
  .menu .menu__list > li > :is(a, .menu__sub) { grid-column: auto; }
  .menu .menu__list > li.menu__group > a {
    font: 500 clamp(2.25rem, 1.6rem + .8vw, 2.5rem)/1.1 var(--font-display); font-variation-settings: "opsz" 11; letter-spacing: -.01em;
  }
  .menu .menu__reach { grid-column: auto; grid-row: auto; align-self: auto; padding-block: 0; }
  .menu__direct, .menu__legal { grid-column: auto; grid-row: auto; }
}
.menu__legal { gap: var(--s-5); font-size: 1rem; }
.menu__legal a { color: var(--fg-2); text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
.menu__legal a:hover { text-decoration: underline 1px currentColor; }
.menu__legal a[aria-current] { color: var(--accent-text); }
.menu__ask-tile[aria-current] { box-shadow: inset 3px 0 0 var(--accent); }
/* Fokusrahmen im Menü nach innen: Die scrollende Fläche schnitte ihn sonst links und rechts ab */
.menu :is(a, button):focus-visible { outline-offset: -2px; }
/* Kein schwebender Knopf mehr (style.css hielt dafür ab 104em unten 7rem frei) */
@media (min-width: 66em) { html { scroll-padding-bottom: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Ein Gleiten, ein Abdunkeln, ein Einblenden: wenige gleichzeitige Bewegungen, damit nichts ruckelt.
     Kein Weichzeichner hinter dem Menü (kostet bei jedem Bild Leistung). */
  .menu {
    animation: none; opacity: 1; translate: calc(-100% - 1rem) 0;
    transition:
      translate 350ms cubic-bezier(.65, 0, .35, 1),
      display 350ms allow-discrete, overlay 350ms allow-discrete;
  }
  .menu[open] {
    translate: 0 0;
    transition:
      translate 500ms cubic-bezier(.65, 0, .15, 1),
      display 500ms allow-discrete, overlay 500ms allow-discrete;
  }
  @starting-style { .menu[open] { translate: calc(-100% - 1rem) 0; } }
  .menu::backdrop {
    background: rgb(42 43 45 / 0);
    transition: background-color 350ms ease, display 350ms allow-discrete, overlay 350ms allow-discrete;
  }
  .menu[open]::backdrop { background: rgb(42 43 45 / .4); transition-duration: 500ms; }
  @starting-style { .menu[open]::backdrop { background: rgb(42 43 45 / 0); } }

  /* Der Inhalt blendet als Ganzes ein, wenn das Panel fast steht */
  @keyframes k-menu-in { from { opacity: 0; } }
  .menu[open] .menu__list li, .menu[open] :is(.menu__direct, .menu__legal) { animation: none; }
  .menu[open] > :is(.menu__head, .menu__body) { animation: k-menu-in 300ms ease-out both 150ms; }
}


/* ==========================================================================
   Startseite
   ========================================================================== */

/* Hero: randloses Foto, Titel in Bodoni darauf */
.hero--stage { padding-block-start: 0; }
.hero--stage .stage { grid-template-rows: auto auto auto; }
.hero--stage .hero__text { display: contents; }
.hero--stage .hero__title {
  grid-column: content-start / content-end; grid-row: 1; align-self: end; z-index: 1;
  display: block; padding-block-end: clamp(2.5rem, 7vh, 5rem); color: var(--k-ivory);
}
.hero--stage .hero__kicker, .hero--stage .hero__sep { color: var(--k-ivory); }
.hero--stage .hero__kicker > span { display: inline; }
.hero--stage .label--dash::before { border-color: var(--k-bronze-light); }
.hero--stage .hero__line {
  display: block; margin-block-start: var(--s-4); max-inline-size: none;
  font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.015em;
}
.hero__media { grid-column: full-start / full-end; grid-row: 1; margin: 0; display: block; position: relative; background: none; }
/* Das Foto füllt den Rest des ersten Bildschirms: am Desktop unter der Kopfzeile, am Handy
   zwischen Kopfzeile und Leiste unten (Wunsch der Anwälte: ein Einstieg über den ganzen Bildschirm). Abdunkelung
   von unten, sodass auch die kleine Zeile über dem Titel ≥ 4,5:1 hat. */
/* Einstieg beim Laden „Fuge“ (gewählt am 18.10.2026 aus fünf Varianten, nach Recherche bei Porsche, Rolex,
   Cartier, Aman und Kanzleien: Das Foto ist ab dem ersten Bild da und wird nie verdeckt; nur die Schrift kommt).
   Die kurze Bronzelinie über der Dachzeile zieht von links auf (das Signet-Motiv als kleine Geste), dann folgen
   Dachzeile und Titel mit wenigen Pixeln Weg; das Foto setzt sich dabei ganz leicht. Titel nach rund 1,7 s ganz da.
   Hinter dem Foto der Mittelton des Bildes statt einer leeren Fläche, falls es langsam lädt. */
.hero--stage .hero__media { background: #9ba375; }
.hero--stage .label--dash::before { inline-size: clamp(44px, 5vw, 80px); border-block-start-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes k-settle { from { scale: 1.04; } to { scale: 1; } }
  @keyframes k-fadeup { from { opacity: 0; transform: translateY(14px); } }
  @keyframes k-fuge-draw { from { transform: scaleX(0); } }
  .reveal .hero__media .frame { animation: none; clip-path: none; }
  .reveal .hero__media .frame img { animation-duration: 2400ms; animation-delay: 0s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  .reveal .hero--stage .label--dash::before { transform-origin: left; animation: k-fuge-draw 700ms cubic-bezier(.65, 0, .35, 1) both 200ms; }
  .reveal .hero--stage .rise { clip-path: none; }
  .reveal .hero--stage .hero__kicker > span, .reveal .hero--stage .hero__kicker > .hero__sep { animation: k-fadeup 600ms cubic-bezier(.22, .61, .36, 1) both 650ms; }
  .reveal .hero--stage .rise > span, .reveal .hero--stage .rise + .rise > span { animation: k-fadeup 900ms cubic-bezier(0, 0, .2, 1) both 800ms; }
  @media (min-width: 66em) { .reveal .hero__media .caption { animation-delay: 1300ms; } }
}
.hero__media .frame { position: relative; border-radius: 0; aspect-ratio: auto; block-size: max(32rem, 100svh); }
/* Oben leicht dunkler, damit die helle Kopfzeile auf jedem Bildausschnitt lesbar bleibt */
.hero--stage .hero__media .frame::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 1; block-size: calc(var(--header-h) * 2.2); pointer-events: none;
  background: linear-gradient(to bottom, rgb(42 43 45 / .55), rgb(42 43 45 / 0));
}
/* Handy und Tablet: Das Foto füllt den Raum zwischen Kopfzeile und Leiste unten und bleibt beim Scrollen kurz stehen
   (--hero-pin), während der Titel schneller davongleitet und ausblendet; dann scrollt die Seite weiter. Gebaut mit
   sticky: Die Bildfläche (figure) ist um den Stand höher, Foto und Titel kleben darin oben unter der Kopfzeile. */
@media (max-width: 65.99em) {
  .hero--stage { --hero-h: max(24rem, calc(100svh - var(--callbar-h) - env(safe-area-inset-bottom))); --hero-pin: 0px; }
  /* Höhe statt Innenabstand: sticky bleibt nur innerhalb der Inhaltsfläche des Elternelements */
  /* Das Foto reicht um die Höhe der Adressleiste weiter nach unten (100lvh − 100svh): Klappt Safari die Leiste beim
     Scrollen ein, füllt es den frei werdenden Platz statt eines grauen Streifens. Der Titel bleibt auf --hero-h. */
  .hero__media { block-size: calc(var(--hero-h) + 100lvh - 100svh + var(--hero-pin)); }
  .hero__media .frame { block-size: calc(var(--hero-h) + 100lvh - 100svh); }
  .hero--stage .hero__title { align-self: start; block-size: var(--hero-h); display: flex; flex-direction: column; justify-content: flex-end; }
}
/* Parallax: Am Handy blendet der Titel beim Scrollen aus, das Foto läuft langsamer als die Seite; am
   Desktop steht das Foto kurz, der Titel gleitet davon. Stand nur mit Bewegung (html.reveal): Mit
   „weniger Bewegung“ klebte der Titel sonst über dem Vorspann, weil er nicht ausblendet.
   Ausnahme von „alle Scroll-Bewegungen im Skript“ (18.10.2026): Das Titelbild läuft als CSS-Scroll-Animation, wo der
   Browser sie kann, und nur in Firefox über main.js (aus CSS und Skript gemischt ruckelte es am iPhone). */
/* Nach Apples WebKit-Empfehlungen (18.10.2026; vorher sprang das Foto am iPhone in Stufen): je Element nur eine
   Bewegung und bewegte Teile als eigene Ebene. Das Foto setzt sich beim Laden (scale am img), die Ebene darum
   (.frame__layer) sinkt beim Scrollen (translate); beide sind mit will-change vorab eigene Ebenen, damit Safari das
   große Bild nicht mitten im Scrollen neu aufbaut. */
.hero__media .frame__layer, .hero__media .frame__layer > picture { display: block; block-size: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .hero__media .frame__layer, .reveal .hero__media .frame img { will-change: transform; }
}
/* Desktop wie am Handy (18.10.2026; vorher sank nur das Foto um 7 bis 15 %, das sah man kaum): Das Foto füllt den
   Bildschirm und bleibt einen Stand lang stehen, der Titel gleitet schneller weg und blendet aus. Das Foto hebt sich
   dabei langsam (statt zu sinken wie am Handy): So bleiben beim Laden die Turmspitzen ganz im Bild, die oben im Foto
   sitzen. Stand kürzer als am Handy (25 statt 45 svh), der Titel ist entsprechend früher weg. Die Bildunterschrift
   blendet nur aus, ohne Weg (sie scrollt nicht mit dem stehenden Foto und wirkte sonst, als flöge sie davon). */
@media (min-width: 66em) {
  .hero--stage { --hero-h: max(32rem, 100svh); --hero-pin: 0px; }
  .hero__media { block-size: calc(var(--hero-h) + var(--hero-pin)); }
  .hero__media .frame { block-size: var(--hero-h); }
  .hero--stage .hero__title { align-self: start; block-size: var(--hero-h); display: flex; flex-direction: column; justify-content: flex-end; }
  .hero--stage .hero__media .caption { inset-block: calc(var(--hero-h) - var(--s-5) - 1lh) auto; }
}
@media (min-width: 66em) and (prefers-reduced-motion: no-preference) {
  .reveal .hero--stage { --hero-pin: 25svh; }
  .reveal .hero__media .frame, .reveal .hero--stage .hero__title { position: sticky; top: 0; }
  .reveal .hero__media .frame__layer { block-size: 120%; }
}
/* Handy ohne Stand (18.10.2026; vorher 45 svh Stand, der Titel klebte und glitt um 30 svh davon: zu viel Scrollweg,
   und beim Zurückscrollen kam die Schrift von oben herabgezogen). Wie bei Apple, Porsche und den Empfehlungen gegen
   Scroll-Jacking: Foto und Titel scrollen mit der Seite, der Titel blendet nur aus. Die Tiefe kommt vom Foto: Es
   sinkt im Rahmen ab und läuft so nur mit gut 60 % der Scrollgeschwindigkeit. Beim Laden steht es oben bündig (Türme
   ganz im Bild); die Lücke, die oben im Rahmen entsteht, liegt stets schon über dem Bildschirm, weil das Foto
   langsamer sinkt, als die Seite scrollt. (Ein Zoom statt dessen wirkte nur gestreckt.) */
@keyframes k-hero-out { to { translate: 0 -30svh; opacity: 0; } }
@keyframes k-hero-drift { to { translate: 0 40%; } }
@keyframes k-fade-out { to { opacity: 0; } }
@keyframes k-hero-rise { from { translate: 0 0; } to { translate: 0 -15%; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) and (animation-range: 0px 100px) {
    @media (max-width: 65.99em) {
      .reveal .hero--stage .hero__title { animation: k-fade-out linear both; animation-timeline: scroll(root block); animation-range: 8svh 50svh; }
      .reveal .hero__media .frame img { animation: k-settle 2600ms var(--ease-out) both .2s; }
      .reveal .hero__media .frame__layer { animation: k-hero-drift linear both; animation-timeline: scroll(root block); animation-range: 0px 100svh; }
    }
    @media (min-width: 66em) {
      /* Am Scrollweg der Seite wie am Handy (view() am Foto maß am Rahmen und bewegte nichts; eine benannte Zeitleiste
         am Rahmen lief in Chrome und WebKit 27, aber nicht in Safari 26) */
      .reveal .hero--stage .hero__title { animation: k-hero-out linear both; animation-timeline: scroll(root block); animation-range: 3svh 45svh; }
      .reveal .hero--stage .hero__media .caption { animation: k-fade-out linear both; animation-timeline: scroll(root block); animation-range: 0px 8svh; }
      .reveal .hero__media .frame__layer { animation: k-hero-rise linear both; animation-timeline: scroll(root block); animation-range: 0px 140svh; }
    }
  }
}

/* Titelbild im Wechsel (Termin 24.10.2026, zum Testen): Das Ladenburg-Foto liegt in derselben Ebene über dem Foto der
   Anwälte und blendet langsam ein und aus, 9 s je Bild. Nur die Deckkraft ändert sich, am <picture>, nicht am <img>
   (das trägt schon k-settle; je Element eine Bewegung). Die Bildunterschrift wechselt mit. Mit „weniger Bewegung“
   bleibt es beim Foto der Anwälte. */
.hero__media .frame__layer { position: relative; }
.hero__media .frame__layer > .hero__alt { position: absolute; inset: 0; opacity: 0; }
.hero__media .caption { display: grid; justify-items: end; }
.hero__cap { grid-area: 1 / 1; }
.hero__cap--alt { opacity: 0; }
@keyframes k-hero-swap { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes k-hero-swap-out { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__media .frame__layer > .hero__alt, .hero__cap--alt { animation: k-hero-swap 18s ease-in-out infinite 1s; }
  .hero__cap:not(.hero__cap--alt) { animation: k-hero-swap-out 18s ease-in-out infinite 1s; }
}
@media (prefers-reduced-motion: reduce) { .hero__alt { display: none; } }
.hero__media .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(42 43 45 / .9) 0%, rgb(42 43 45 / .62) 38%, rgb(42 43 45 / 0) 72%); pointer-events: none; }
.hero__media .caption { position: absolute; inset-inline-end: var(--page-margin); inset-block-end: var(--s-5); z-index: 1; margin: 0; padding: 0; color: rgb(246 243 238 / .7); }
/* Am Handy steht die Bildunterschrift unten im (stehenden) Foto, nicht am Fuß der verlängerten Bildfläche */
/* Am Handy keine Bildunterschrift im Titelbild: Neben Dachzeile und Titel war es zu viel Text (Wunsch 18.10.2026) */
@media (max-width: 65.99em) { .hero--stage .hero__media .caption { display: none; } }
.hero--stage .hero__lead, .hero--stage .hero__more { grid-column: content-start / content-end; }
.hero--stage .hero__lead {
  grid-row: 2; margin-block-start: var(--space-block); max-inline-size: 38ch;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.35; color: var(--fg);
}
.hero--stage .hero__more { grid-row: 3; margin-block-start: var(--s-5); max-inline-size: 44ch; color: var(--fg-2); }
/* Ein Blickfang: der Vorspann groß, darunter der Zusatz leiser in derselben Spalte (nicht als zweiter Block daneben) */
@media (min-width: 66em) {
  .hero--stage :is(.hero__lead, .hero__more) { grid-column: content-start / span 8; }
}

/* Türen: zwei Kacheln, dazwischen die bronzene Fuge mit dem Signet, das sich teilt */
.doors { row-gap: var(--gutter); }
/* Keine Karte um die Zeilen (Karte in Karte machte am Handy die Spalte schmal): Die Zeilen selbst sind die Flächen */
.door { margin: 0; padding: 0; border: 0; background: none; }
/* Die Wege: Kachelpaare von Tom und Klaus auf gleicher Höhe (Subgrid, siehe unten), der Textlink zur Anfrage unten */
.doors > .door { display: flex; flex-direction: column; grid-row: auto; }
.doors .door__list { grid-template-rows: none; grid-row: auto; }
.doors .door__list > li { display: block; }
.door__action { margin-block-start: auto; padding-block-start: var(--s-5); }
/* Die Anfrage je Anwalt als ruhiger Textlink statt als Knopf (Startseite, Profile, Kontakt): Große Knöpfe je Anwalt
   wirkten doppelt und konkurrierten mit „Online-Anfrage“ oben und in der Leiste unten */
:is(.door__action, .page-hero__actions, .contact-card__actions) .btn[href^="anfrage.html"] {
  inline-size: auto; min-block-size: 44px; padding: 0; gap: .5rem; justify-content: flex-start;
  border: 0; border-radius: 0; background: none; color: var(--fg);
  font-weight: 500; text-decoration: underline 1px var(--accent); text-underline-offset: .3em;
}
.btn[href^="anfrage.html"]:is(:is(.door__action, .page-hero__actions, .contact-card__actions) *):hover { background: none; color: var(--fg); text-decoration-thickness: 2px; text-decoration-color: currentColor; }
:is(.door__action, .page-hero__actions, .contact-card__actions) .btn[href^="anfrage.html"] .icon { transition: transform 200ms var(--ease); }
:is(.door__action, .page-hero__actions, .contact-card__actions) .btn[href^="anfrage.html"]:hover .icon { transform: translateX(4px); }
/* Die Kacheln von Tom und Klaus stehen paarweise auf gleicher Höhe (Subgrid), auch am Handy: Beide Spalten enden
   auf derselben Linie, keine wirkt länger (Klaus' Beschreibungen sind teils länger) */
.door-stage .doors { grid-template-rows: repeat(5, auto); }
.door-stage .doors > .door { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 6px; }
.door-stage .door__list { display: contents; }
.door-stage .door__list > li { display: flex; }
.door-stage .door__list > li > .door-row { flex: 1 1 auto; }
.hero__note { grid-column: 1 / -1; max-inline-size: 44ch; margin-block-start: var(--space-block); }
.hero__note .note { max-inline-size: none; color: var(--fg-3); }

/* Tür im Stand (nach Apple, porsche.com und scroll-driven-animations.style): Vor den Kacheln steht ein kompaktes
   Tür-Bild: oben das Signet, darunter links „Tom Kalinski“, rechts „Klaus Kalinski“ (Links zum Profil), dazwischen
   die Fuge. Ab 40em rastet es in der Bildmitte ein und bleibt einen langen Stand lang stehen (Desktop 0,9, Tablet
   0,7 Bildschirmhöhen); währenddessen zieht sich das Zeichen heran und teilt sich, die Namen steigen verschieden weit
   auf und rücken auseinander, die Fuge wächst. Die Titel der Kacheln stehen nur für Screenreader da. Am Handy ohne
   Stand: zwei Spalten, die beim Hereinscrollen auseinanderrücken (siehe unten). Höhen in svh (die Adressleiste von
   Safari ändert die Fensterhöhe beim Scrollen). Gebaut wie die Referenz: Die Spur ist um den Stand (--pin) höher als
   das Bild, das Bild klebt darin per sticky, eine View Timeline der Spur treibt den Ablauf. Ohne Scroll-Animationen
   im Browser oder mit „weniger Bewegung“ steht die Tür offen. */
.door-stage { grid-column: 1 / -1; margin-block-start: var(--space-block); }
.door-stage > .doors { margin-block-start: 0; }

.door-scene {
  --scene-h: 15rem; --mark-h: 3.5rem; --name-gap: 1rem;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  block-size: var(--scene-h); margin-block-end: var(--s-6); padding-block-start: var(--s-2);
}
/* Die Fuge: von unter dem Signet bis an den Fuß des Bildes */
.door-scene::before {
  content: ""; position: absolute; inset-block: calc(var(--mark-h) + var(--s-6)) 0; inset-inline-start: calc(50% - .5px);
  border-inline-start: 1px solid var(--fuge); transform-origin: top;
}
.door-scene__mark {
  grid-column: 1 / -1; justify-self: center; block-size: var(--mark-h); inline-size: auto; aspect-ratio: 180 / 100; overflow: visible;
  fill: none; stroke: var(--signet); stroke-width: 1.5px; stroke-linecap: square;
}
/* Die Schrägen enden gerade: Eckige Enden ragten am Knoten über den Stamm hinaus, sichtbar, sobald die Tür offen ist
   und jedes K allein steht. Gerade Enden liegen ganz im Stamm. */
.door-scene__mark line + line { stroke-linecap: butt; }
.door-scene__l { transform: translateX(-80px); }
.door-scene__r { transform: translateX(80px); }
.door-scene__name {
  display: grid; align-content: start; row-gap: var(--s-2); margin-block-start: var(--s-5);
  color: var(--fg); text-decoration: none;
}
.door-scene__name .label { color: var(--accent-text); }
.door-scene__who {
  font: 500 clamp(1.875rem, 1.3rem + 2.6vw, 3.75rem)/1.05 var(--font-display); letter-spacing: -.01em;
  font-optical-sizing: none; font-variation-settings: "opsz" 11; hyphens: manual; text-wrap: balance;
  transition: color 200ms var(--ease);
}
/* Kein Pfeil unter den Namen (störte; die Namen sind auch so als Links erkennbar) */
.door-scene__name:hover .door-scene__who { color: var(--accent-text); }
.door-scene__name--tom { grid-column: 1; justify-items: end; text-align: end; padding-inline-end: var(--name-gap); }
.door-scene__name--klaus { grid-column: 2; justify-items: start; padding-inline-start: var(--name-gap); }
@media (min-width: 40em) {
  .door-scene { --scene-h: 17rem; --mark-h: 4.5rem; --name-gap: clamp(2rem, 4vw, 3.5rem); margin-block-end: 0; }
  .door-scene__name { margin-block-start: var(--s-6); }
  /* Die Namen stehen im Tür-Bild; in den Kacheln bleiben die Titel für Screenreader */
  .door-stage .door > :is(h2, h3) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 66em) { .door-scene__who { font-weight: 400; } }
/* Tür am Handy: Tom und Klaus stehen auch hier nebeneinander. Oben teilt sich das Zeichen, darunter die beiden
   Namen (eine Zeile, Plex, damit sie sich nicht quer lesen), dann je Spalte die Rechtsgebiete als kurze Zeilen ohne
   Beschreibung und die Anfrage. Die Fuge ist ein einziger Strich vom Zeichen bis unter die Anfrage (vorher zwei, einer
   bei den Namen, einer bei den Kacheln, die beim Wachsen zusammenliefen; das störte, 18.10.2026). Beim Hereinscrollen
   teilt sich das Zeichen, die Spalten rücken von der Mitte auseinander und die Fuge wächst (main.js). */
@media (max-width: 39.99em) {
  .door-scene { --scene-h: auto; --mark-h: 3rem; --name-gap: var(--s-4); margin-block-end: var(--s-4); }
  .door-scene::before, .door-stage .doors::before { content: none; }
  .door-stage { position: relative; }
  .door-stage::before {
    content: ""; position: absolute; inset-block: calc(3rem + var(--s-3)) 0; inset-inline-start: calc(50% - .5px);
    border-inline-start: 1px solid var(--fuge); transform-origin: top;
  }
  .door-scene__name { margin-block-start: var(--s-5); row-gap: var(--s-1); }
  .door-scene__who { font: 600 1.125rem/1.25 var(--font-text); letter-spacing: -.01em; font-variation-settings: normal; }
  .door-stage .door > :is(h2, h3) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .door-stage .doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--s-4)); row-gap: 0; }
  .door-stage .doors > .door { grid-column: auto; }
  .door-stage .pair--fuge > .pair__item:nth-child(1 of .pair__item) { padding-block-end: 0; margin-block-end: 0; border-block-end: 0; }
  .door-stage .door-row { min-block-size: 0; padding: var(--s-3); }
  .door-stage .door-row__name { font-size: .9375rem; line-height: 1.3; hyphens: auto; overflow-wrap: anywhere; }
  .door-stage .door-row__desc, .door-stage .door-row .icon { display: none; }
  .door-stage .door__action { padding-block-start: var(--s-4); }
  .door-stage .door__action .btn { font-size: .9375rem; line-height: 1.3; white-space: normal; text-align: start; }
  .door-stage .door__action .btn .icon { flex: none; }
}

/* Bühne der Tür (nur mit Bewegung): Ab 40em rastet sie ein und bleibt einen langen Stand lang stehen; währenddessen
   zieht sich das Zeichen heran und teilt sich, „Rechtsanwalt“ und die Namen steigen verschieden weit auf und rücken
   auseinander, die Fuge wächst. Am Handy kein Stand: Sie geht auf, während sie hereinscrollt, die Spalten rücken
   zusammen. Die Bewegung rechnet main.js (stages). */
@media (prefers-reduced-motion: no-preference) {
  .reveal .door-scene-track {
    /* Scrollweg im Stand (Handy kürzer); das Bild steht in der Mitte zwischen Kopfzeile und unterer Leiste;
       Scrollweg, bis es dort ankommt. Alles in svh. */
    --pin: 0px; --shut: .75rem; --bottom: var(--callbar-h);
    --pin-top: max(calc(var(--header-h) + 1rem), calc((100svh + var(--header-h) - var(--bottom)) / 2 - 15rem / 2));
    --at: calc(100svh - var(--pin-top));
    --open: cubic-bezier(.65, 0, .35, 1);
  }
  @media (min-width: 40em) { .reveal .door-scene-track { --pin: 70svh; --shut: clamp(1rem, 2vw, 1.75rem); --pin-top: max(calc(var(--header-h) + 1rem), calc((100svh + var(--header-h) - var(--bottom)) / 2 - 17rem / 2)); } }
  @media (min-width: 66em) { .reveal .door-scene-track { --pin: 90svh; --bottom: 0px; } }
  .reveal .door-scene-track::after { content: ""; display: block; block-size: var(--pin); }
  .reveal .door-scene { position: sticky; top: var(--pin-top); }
  .reveal .door-scene__name .label { --d-from: 5svh; }
  .reveal .door-scene__who { --d-from: 11svh; }
  @media (min-width: 40em) { .reveal .door-scene__mark { transform-origin: 50% 100%; } }
  @media (max-width: 39.99em) {
    .reveal .door-scene-track::after { content: none; }
    .reveal .door-scene { position: relative; top: auto; }
  }
}

/* Ab 40em bewegen sich die Kacheln selbst nicht: Signet und Fuge zwischen ihnen stehen fertig (am Handy rücken die Spalten, siehe oben) */
.door-stage .doors::before, .door-stage .doors > .pair__item { animation: none; transform: none; }

/* Zeilen-Kacheln (Rechtsgebiete, Wege, Fehlerseite): eine Fläche je Eintrag, dunkel beim Überfahren */
.door__list, .next-list { display: grid; gap: 6px; }
/* Kacheln einer Reihe gleich hoch: der Link füllt sein Listenelement */
.next-list > li { display: flex; }
.next-list > li > .door-row { flex: 1 1 auto; }
.door-row {
  border: 0; border-radius: var(--k-radius); background: var(--tile);
  padding: var(--s-4) calc(var(--s-5) + 28px) var(--s-4) var(--s-5);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.door-row .icon { inset-inline-end: var(--s-5); }
.door-row__name { font-weight: 500; }
/* Hover leicht: die Fläche dunkelt eine Stufe nach, der Name wird unterstrichen, der Pfeil rückt vor
   (die anthrazitfarbene Fläche wirkte schwer und nach App) */
.door-row:hover { background: var(--tile-2); }
.door-row:hover .door-row__name { text-decoration: underline 1px var(--accent); text-underline-offset: .25em; }
.door-row .icon { transition: transform 200ms var(--ease); }
[data-theme="ink"] .door-row { color: var(--k-ivory); }
@media (min-width: 66em) { .grid > .next-list { grid-column: 4 / -1; } }

/* Abschnittsköpfe: ein Kopf für alle Seiten, auf dem Raster des Satzspiegels (zentrierte Köpfe neben
   linksbündigen Rechtsblöcken wirkten zusammengewürfelt, Blindprüfung 17.10.2026). Ab 66em steht das Label mit
   Bronzestrich und Nummer in Spalte 1–3, der Titel in Bodoni ab Spalte 4 (dieselbe Achse wie Seitenköpfe und
   Rechtsblöcke); darunter einspaltig, Label über dem Titel. Keine Linie über dem Kopf. */
.head, .head--side, .head--compact { text-align: start; border: 0; padding: 0; margin-inline: 0; margin-block-end: var(--space-block); }
.head__label { display: block; }
.head__title { margin-block-start: var(--s-3); max-inline-size: 22ch; }
/* Zeilen höchstens etwa 65 Zeichen (Plex: 1ch ≈ 1,3 Zeichen deutscher Text) */
.head__lead { margin-block-start: var(--s-5); max-inline-size: 44ch; }
@media (min-width: 66em) {
  .head:not(.head--stack) > .head__title { margin-block-start: 0; }
  .head:not(.head--stack, .head--side) > .head__lead { grid-column: 4 / -1; }
  .head--side:not(:has(.head__lead)) > .head__title { grid-column: 4 / -1; }
}
.split { border: 0; padding: 0; }

/* Paare: Kacheln */
.pair { row-gap: var(--gutter); }
/* Paar-Teile sind Kacheln mit eigenem Innenabstand (Person, Kontakt, Anbieter); nur die Linie fällt weg */
.pair__item { border: 0; }
@media (min-width: 40em) { .pair--fuge::before { border-color: var(--fuge); } }
@media (max-width: 39.99em) {
  .pair--fuge > .pair__item:nth-child(1 of .pair__item) { border-block-end: 0; margin-block-end: var(--gutter); padding-block-end: var(--k-pad); }
}
.person, .contact-card, .provider { background: var(--tile); border-radius: var(--k-radius-l); padding: var(--k-pad); }
.person__name { margin-block-start: var(--s-2); font-size: clamp(2.5rem, 2rem + 1.4vw, 3rem); }
.contact-card__label { color: var(--accent-text); }
.dlist > div, .profile-facts > div { border: 0; padding-block: var(--s-2); }
/* In Karten steht die Beschriftung über ihrem Wert, nicht mit Abstand links daneben: So ist sofort klar,
   was zusammengehört */
:is(.person, .contact-card, .provider) .dlist > div { display: block; padding-block: var(--s-2); }
:is(.person, .contact-card, .provider) .dlist dd { margin-block-start: var(--s-1); }
/* Die Zeilen von Tom und Klaus liegen auf einem gemeinsamen Raster (subgrid); dessen Abstand gilt nur zwischen
   den Karten, nicht zwischen den Zeilen in einer Karte */
.pair > .pair__item, .pair > .pair__item .dlist { row-gap: 0; }
.dlist > div::before, .assigned::before { content: none; }
.dlist dt, .assigned dt, .factbar dt { letter-spacing: .08em; font-weight: 500; }

/* Szene: Bild und drei Kacheln */
.scene__facts { display: grid; gap: 8px; }
.scene__facts::after { content: none; }
.scene__fact, .scene__fact + .scene__fact, .scene__fact:last-child { border: 0; background: var(--tile); border-radius: var(--k-radius-l); padding: var(--s-5) var(--s-6); }
@media (min-width: 66em) {
  .scene__figure { align-self: stretch; display: grid; grid-template-rows: 1fr auto; }
  .scene__figure .frame { aspect-ratio: auto; block-size: 100%; }
}

/* Inhaltsbilder (.m-reveal) „Setzen“ (gewählt am 18.10.2026 nach Recherche: Premium- und Kanzleiseiten blenden
   Inhaltsbilder ruhig ein, kein Vorhang, kein Schieben): Sobald ein Bild zu einem Viertel im Bild ist (main.js setzt
   .is-in), blendet es ein und setzt sich im festen Rahmen von 104 auf 100 %, wie das Titelfoto beim Einstieg.
   Einmalig, danach steht es. Kein Vorhang, kein scrollgebundener Zoom. Dahinter Stone als Platzhalter. */
.m-reveal .frame { background: var(--k-stone); }
html.reveal .m-reveal .frame, html.reveal.sv-js .m-reveal.sv .frame { clip-path: none; animation: none; }
html.reveal .m-reveal .frame img, html.reveal .m-reveal.sv .frame img, html.reveal.sv-js .m-reveal.sv .frame img { animation: none; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.reveal .m-reveal .frame img, html.reveal.sv-js .m-reveal.sv .frame img {
    opacity: 0; transform: scale(1.04);
    transition: opacity 800ms cubic-bezier(.25, 1, .5, 1), transform 1400ms cubic-bezier(.22, 1, .36, 1);
  }
  html.reveal .m-reveal.is-in .frame img, html.reveal.sv-js .m-reveal.is-in.sv .frame img { opacity: 1; transform: none; }
}

/* Bildband */
.band { min-block-size: clamp(32rem, 100svh, 60rem); }
/* Bildband mit Stand und Tiefe (Muster nach scroll-driven-animations.style, „horizontal section“, und den
   Apple-artigen Szenen): Der Abschnitt ist um den Stand höher; darin kleben Foto und Schrift als eine Bühne in
   Bildschirmhöhe. Solange die Bühne steht (Bereich „contain“), bewegen sich nur die Ebenen auf ihr: Das Foto zieht
   sich langsam heran, die Schrift schiebt sich in drei Ebenen verschieden weit nach oben (oben am weitesten), das
   wirkt räumlich. Danach verlässt die ganze Szene gemeinsam den Bildschirm. Nur ohne „weniger Bewegung“.
   Die Bewegung rechnet main.js (stages). */
@media (prefers-reduced-motion: no-preference) {
  .reveal .band {
    --band-h: calc(100svh - var(--header-h)); --band-pin: 100svh;
    display: grid; grid-template-areas: "band"; align-items: start; overflow: visible;
    min-block-size: 0; block-size: calc(var(--band-h) + var(--band-pin));
  }
  /* Unter 66em liegt unten die Leiste: die Bühne endet über ihr */
  @media (max-width: 65.99em) { .reveal .band { --band-h: calc(100svh - var(--header-h) - var(--callbar-h) - env(safe-area-inset-bottom)); } }
  .reveal .band__media, .reveal .band__text { grid-area: band; position: sticky; top: var(--header-h); block-size: var(--band-h); }
  .reveal .band__media { inset: auto; top: var(--header-h); overflow: clip; }
  .reveal .band__text { align-content: end; padding-block: 0 clamp(4rem, 20svh, 12rem); }
  /* will-change: wie beim Titelfoto vorab eine eigene Ebene, damit Safari das große Bild beim Scrollen nicht neu aufbaut */
  .reveal .band__media img { inset-block-start: -5%; block-size: 110%; will-change: transform; }
  .reveal .band__media::after { background: linear-gradient(to top, rgb(42 43 45 / .88) 0%, rgb(42 43 45 / .6) 50%, rgb(42 43 45 / .45) 100%); }
  .reveal .band .band__text > * { --d-to: 0px; }
  .reveal .band .band__label { --d-from: 5svh; }
  .reveal .band .band__title { --d-from: 11svh; }
  .reveal .band .band__caption { --d-from: 17svh; }
}
.band__media::after { background: linear-gradient(to top, rgb(42 43 45 / .9) 0%, rgb(42 43 45 / .66) 45%, rgb(42 43 45 / .2) 70%, rgb(42 43 45 / 0) 88%); }
.band__title { max-inline-size: 16ch; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.25rem); line-height: 1.04; letter-spacing: -.01em; }
@media (min-width: 66em) {
  .band__text { display: block; }
  .band__label { margin-block-end: var(--s-4); }
  .band__caption { margin-block-start: var(--s-4); }
}

/* Ablauf: vier Kacheln mit großer Bodoni-Ziffer in Bronze (Wunsch der Anwälte, wie im Kanzlei-Look 9359831) */
.steps { border: 0; gap: var(--gutter); }
.steps::before { content: none; }
.step, .step:nth-child(n + 3) { display: block; border: 0; background: var(--tile); border-radius: var(--k-radius-l); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.step__num { display: block; font: 400 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--font-display); font-variation-settings: "opsz" 11; color: var(--accent); }
.step__body { margin-block-start: var(--s-6); }
@media (max-width: 39.99em) { .step { grid-column: 1 / -1; } }


/* ==========================================================================
   Footer und Leiste unten
   ========================================================================== */

.site-footer { background: #222325; border: 0; }
.site-footer__legal { border: 0; padding-block-start: 0; margin-block-start: var(--s-8); color: var(--fg-3); }
.site-footer .t-h4 { font-size: 1.25rem; }
.site-footer .lockup--full .lockup__divider { display: block; }

.callbar { border: 0; background: var(--k-ink); }
.callbar a + a { border: 0; }
.callbar__label { color: var(--k-bronze-light); letter-spacing: .08em; }
/* Bei großer Schrift: Spalten dürfen schrumpfen, Namen umbrechen, statt dass „Online-Anfrage“ aus dem Bild läuft */
.callbar { grid-auto-columns: minmax(0, auto); }
.callbar a { min-inline-size: 0; text-align: center; }
.callbar__name { flex-wrap: wrap; justify-content: center; row-gap: 0; font-size: min(var(--fs-ui), 4.2vw); }
.callbar__label { font-size: min(var(--fs-label), 3.2vw); }
/* Auf gemeinsamen Seiten: ein Knopf „Anrufen · E-Mail“ für beide Anwälte (öffnet die Auswahl), daneben die Anfrage */
.callbar > .callbar__call {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-inline-size: 0;
  min-block-size: var(--callbar-h); padding: var(--s-2); border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer;
}
.callbar > .callbar__call:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
body:has(#anfrage-form) .callbar:has(> .callbar__call) { grid-template-columns: minmax(0, 1fr); }
/* Zwei gleich breite Felder: links der Kontakt, rechts die Online-Anfrage als helle, gefüllte Schaltfläche,
   der stärkste Weg in der Leiste */
.callbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.callbar a.callbar__ask {
  flex-direction: row; gap: var(--s-2); margin: var(--s-2); min-block-size: calc(var(--callbar-h) - 2 * var(--s-2));
  padding-inline: var(--s-3); border-radius: var(--k-radius); background: var(--k-ivory); color: var(--k-ink);
  transition: background-color 200ms var(--ease);
}
.callbar a.callbar__ask:hover, .callbar a.callbar__ask:active { background: var(--k-bronze-light); }
.callbar__ask .callbar__name { font-weight: 600; color: inherit; }
.callbar__ask .callbar__arrow { display: inline-block; flex: none; inline-size: 18px; block-size: 18px; }
.callbar a.callbar__ask:focus-visible { outline: 2px solid var(--k-ivory); outline-offset: 2px; }
@media (max-width: 23.99em) { .callbar__ask .callbar__arrow { display: none; } .callbar a.callbar__ask { padding-inline: var(--s-2); } }
/* Im Formular blendet anfrage.js in der Auswahl den nicht gewählten Anwalt aus */
.k-call__row[hidden] { display: none; }
/* Ab 66em entfällt der schwebende Anfrage-Knopf: Die Anfrage steht oben in der Kopfzeile */
@media (min-width: 66em) { .callbar { display: none; } }
@media (max-width: 65.99em) {
  body:has(.callbar) { padding-block-end: 0; }
  body:has(.callbar) .site-footer::after { content: ""; display: block; block-size: calc(var(--callbar-h) + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   Unterseiten
   ========================================================================== */

.breadcrumb a { text-decoration: none; }
.page-hero__title { font-size: var(--fs-h1); }
/* Lange Wörter in großen Titeln trennen statt seitlich überlaufen (große Schrift am Handy) */
@media (max-width: 39.99em) {
  .hero--stage .hero__line { font-size: min(var(--fs-display), 11vw); }
  .hero--stage .hero__lead { hyphens: manual; }
  .page-hero__title, h1.head__title { font-size: min(var(--fs-h1), 10.5vw); }
  h2.head__title { font-size: min(var(--fs-h2), 10vw); }
}
/* Seitenköpfe: Das Label steht über dem Titel, mit dem Bronzestrich wie bei den Abschnittsköpfen,
   statt allein am linken Rand (Rest des alten Rasters) */
.page-hero__label::before { content: ""; display: block; inline-size: 28px; border-block-start: 1px solid var(--accent); margin-block-end: var(--s-3); }
@media (min-width: 66em) {
  .page-hero__grid > .page-hero__label { grid-column: 4 / -1; grid-row: 1; }
  .page-hero__grid > .page-hero__title { grid-row: 2; margin-block-start: var(--s-3); }
  .page-hero--media .page-hero__grid { grid-template-rows: auto auto auto auto auto 1fr; }
  .page-hero--media .page-hero__grid > .assigned { grid-row: 3; }
  .page-hero--media .assigned__note { grid-row: 4; }
  .page-hero--media .page-hero__lead { grid-row: 5; }
}
.page-hero__media .frame { border-radius: var(--k-radius-l); }

/* Profil: Name groß, rechts der Steckbrief als Kachel; Tätigkeit als 2 × 2 Kacheln;
   Werdegang, Arbeitsweise und Berufsrecht auf Stone, Inhalte in hellen Kacheln */
.page-hero--profile .profile-facts { background: var(--tile); border-radius: var(--k-radius-l); padding: var(--s-5) var(--s-6); }
.page-hero--profile .profile-facts dd { margin-block-start: var(--s-1); }
@media (min-width: 66em) {
  #taetigkeit .next-list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#taetigkeit .door-row { min-block-size: 7.5rem; align-content: start; }
/* Rechtsblöcke (Profil, Impressum): derselbe Kopf wie bei den Abschnitten, Label mit Bronzestrich und Nummer in
   Spalte 1–3, der Inhalt ab Spalte 4 (zwei Kopfsysteme wirkten zusammengewürfelt, Blindprüfung Runde 2) */
.legal-block { border: 0; padding-block: var(--s-7); align-items: start; }
.legal-block + .legal-block { margin-block-start: 0; }
.legal-block .legal-block__label::before {
  content: ""; display: block; inline-size: 28px; border-block-start: 1px solid var(--accent); margin-block-end: var(--s-3);
}
/* Der Werdegang bleibt ohne Kachel: Seine Achse liegt im Spaltenzwischenraum links und säße sonst auf der Kante */
.legal-block .dlist--split { background: var(--tile); border-radius: var(--k-radius-l); padding: var(--s-6) var(--k-pad); }
.merksatz__text { font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); line-height: 1.18; max-inline-size: 24ch; }
.merksatz__text, .merksatz__text p { hyphens: manual; text-wrap: balance; }
/* Am Handy an die Breite gekoppelt: bei großer Schrift lief das längste Wort sonst über den Rand */
@media (max-width: 39.99em) { .merksatz__text { font-size: max(1.875rem, min(2.25rem, 8.5vw)); } }
.legal-block__text.merksatz { max-inline-size: none; }
.legal-block__text > p, .legal-block__text > ul { max-inline-size: var(--measure-legal); }
.legal-content :is(p, ul, ol, dd) { max-inline-size: var(--measure-legal); }
.merksatz__source { font-weight: 500; }

/* Chronik: die Achse ist die eine Linie, in Bronze */
.chrono::before, .chrono__item::before { border-color: var(--accent); }
.chrono__item:last-child > :first-child::before { background: var(--accent); }
.chrono__year { font-family: var(--font-display); color: var(--accent-text); }

.assigned::before { content: none; }
.assigned dd { margin: 0; }
/* Rechtsgebiete: ruhiger Kopf, der Inhalt steht im Vordergrund. „Zuständig“ ist eine Zeile statt einer Kachel
   („Zuständig  Rechtsanwalt Klaus Kalinski  06203 18 01 12“, bei zwei Anwälten durch die Fuge getrennt); nur der Name
   ist unterstrichen, ohne Pfeil. Das Label „Rechtsgebiet“ steht nur für Screenreader (der Brotkrumenpfad sagt es),
   der Bronzestrich bleibt. Der Vorspann eine Stufe kleiner. */
.page-hero--media .page-hero__label { font-size: 0; line-height: 0; letter-spacing: 0; }
.page-hero--media .assigned {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-6); row-gap: var(--s-3); margin-block-start: var(--s-5);
}
.page-hero--media .assigned dt { margin-inline-end: calc(-1 * var(--s-3)); }
.page-hero--media .assigned dd {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4); row-gap: 0;
  padding: 0; border-radius: 0; background: none;
}
/* Zwei Anwälte (Erbrecht): bündig untereinander, „Zuständig“ links daneben; Tom oben, Klaus darunter */
.page-hero--media .assigned:has(dd + dd) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-2); align-items: baseline; }
.page-hero--media .assigned:has(dd + dd) dt { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.page-hero--media .assigned:has(dd + dd) dd { grid-column: 2; }
@media (max-width: 39.99em) {
  .page-hero--media .assigned:has(dd + dd) { grid-template-columns: minmax(0, 1fr); }
  .page-hero--media .assigned:has(dd + dd) dt { grid-row: auto; }
  .page-hero--media .assigned:has(dd + dd) dd { grid-column: 1; }
}
.page-hero--media .assigned .link-more .icon { display: none; }
.page-hero--media .assigned a[href^="tel:"] { font-weight: 500; color: var(--fg); text-decoration: none; }
.page-hero--media .assigned a[href^="tel:"]:hover { text-decoration: underline 1px var(--accent); text-underline-offset: .3em; }
.page-hero--media .page-hero__lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; margin-block-start: var(--s-6); max-inline-size: 44ch; }
/* Themen: lange Texte bekommen Luft statt Kästen (Kacheln nur für kurze Inhalte) */
.topics { row-gap: var(--s-8); }
.topic__body, .topic + .topic > .topic__body, .topic:last-child .topic__body { border: 0; background: none; border-radius: 0; padding: 0; }
.topic__body p { max-inline-size: 42ch; }
@media (min-width: 66em) {
  .topic__body { grid-column: 1 / -1; }
  .topic__body > h3 { grid-column: 1 / 4; }
  .topic__body > :not(h3) { grid-column: 4 / -1; }
}
.topics-end { color: var(--fg-2); }

/* Fragen: Akkordeon als eine zusammenhängende Fläche */
/* Fragen als eine zusammenhängende Fläche, die Fragen durch eine schmale helle Fuge getrennt (einzelne Kacheln
   wirkten blockig) */
.faq { border: 0; display: grid; gap: 2px; }
.faq details, .faq details + details { border: 0; border-radius: 0; background: var(--tile); padding-inline: var(--s-5); transition: background-color 200ms var(--ease); }
.faq details:first-child { border-start-start-radius: var(--k-radius-l); border-start-end-radius: var(--k-radius-l); }
.faq details:last-child { border-end-start-radius: var(--k-radius-l); border-end-end-radius: var(--k-radius-l); }
.faq details:hover { background: var(--tile-2); }
.faq details[open] { background: var(--tile); }
.faq summary { font-weight: 500; }
.faq summary:hover .faq__q { text-decoration: none; }
.faq__a { max-inline-size: 60ch; }

/* Kontakt und Anfahrt */
@media (min-width: 66em) { .contact-page .head__title { grid-column: 4 / -1; } }
.contact-page .contact-card .dlist { margin-block-start: var(--s-5); }
.contact-page .contact-card .dlist > div { padding-block: var(--s-1); }
.visit, .section--slim .visit { border: 0; background: var(--tile); border-radius: var(--k-radius-l); padding: var(--k-pad); }
/* „Anfahrt“ steht als Kopf über der ganzen Kachel, darunter drei gleich breite Spalten (sonst stand das Label über
   einer leeren Spalte und am Handy doppelt über „Adresse“) */
.visit > .label { grid-column: 1 / -1; margin: 0; }
@media (min-width: 40em) {
  .grid.visit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.visit > :is(.g-q2, .g-q3, .g-q4) { grid-column: auto; }
}
@media (max-width: 39.99em) {
  :is(.contact-card, .provider, .person) { padding: var(--s-5) var(--s-4); }
}

/* Impressum: Anbieter als zwei Kacheln wie die Kontaktkarten; ab 66em wie ein Rechtsblock: Label „01 Anbieter“ in
   Spalte 1–3, das Paar ab Spalte 4 (vorher stand das Label allein über der vollen Breite) */
@media (min-width: 66em) {
  #anbieter > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  #anbieter > .wrap > .head { grid-column: 1 / 4; margin: 0; }
  #anbieter > .wrap > .pair { grid-column: 4 / -1; }
}
.provider .dlist { margin-block-start: var(--s-5); }

/* Datenschutz: Inhaltsverzeichnis als ruhige Kachel, Zwischentitel links in Plex halbfett */
.toc { align-self: start; }
.toc ol, .toc a { border: 0; }
.toc ol { display: grid; gap: 2px; margin-block-start: var(--s-3); }
.toc a { align-items: flex-start; padding-block: var(--s-2); border-radius: var(--k-radius); padding-inline: var(--s-3); transition: background-color 200ms var(--ease); }
.toc a:hover { background: var(--tile); text-decoration: none; }
@media (min-width: 66em) {
  .toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: var(--s-5); border-radius: var(--k-radius-l); background: var(--tile); }
  .toc a:hover { background: var(--tile-2); }
}
.legal-content .head, .legal-content .head--compact { text-align: start; margin-inline: 0; margin-block-end: var(--s-4); }
.legal-content .head__title { margin: 0; max-inline-size: none; font: 600 var(--fs-tile)/1.25 var(--font-text); letter-spacing: -.012em; font-variation-settings: normal; }
.legal-content .head__title .label__num { margin-inline-end: var(--s-3); font-weight: 500; }
.legal-content > section { margin-block-start: var(--space-block); }
.legal-content > section:first-child { margin-block-start: 0; }
.callout { border: 0; border-radius: var(--k-radius-l); background: var(--tile); padding: var(--s-5); }
.legal-content .dlist > div { padding-block: var(--s-3); }

/* Fehlerseite: die Wege als Zeilen-Kacheln */
.mt-block > ul { display: grid; gap: 6px; }


/* ==========================================================================
   Online-Anfrage
   Das Formular steht als eine helle Kachel auf Stone; Schritte als Reiter oben. Textfelder mit sichtbarem Rand
   (zum Hineinschreiben muss man sie erkennen), Auswahl als Flächen wie die Rechtsgebiete auf der Startseite
   (18.10.2026; vorher umrandete Kästen): Stone, beim Überfahren eine Stufe dunkler, gewählt Anthrazit wie der
   aktive Schritt. Erkennbar bleibt jede Antwort am Kreis davor (eigener Rand, ≥ 3:1).
   ========================================================================== */

/* Das Formular steht wie jede andere Seite direkt auf dem hellen Grund im Raster (18.10.2026; vorher eine eigene
   Karte auf einem Steinband, die es sonst nirgends gab): ab 66em die Schritte als mitlaufende Gliederung in Spalte
   1–3 wie das Inhaltsverzeichnis im Datenschutz, das Formular ab Spalte 4 wie der Seitenkopf darüber. */
.form-section { background: none; padding-block-start: var(--s-6); }
/* Fristhinweis: am Handy über den Schritten, ab 66em unter der Schrittliste links (läuft mit) */
.form__aside { display: flex; flex-direction: column; gap: var(--s-5); margin-block-end: var(--s-6); }
.form__frist { max-inline-size: var(--measure-body); font-size: var(--fs-small); line-height: 1.5; }
.form-section .form { background: none; border-radius: 0; padding: 0; }
.form-section .grid > .form { grid-column: 1 / -1; inline-size: 100%; }
/* Nach dem Senden blendet anfrage.js das Formular aus (hidden); die Rasterregel unten darf das nicht überstimmen */
.form-section .form[hidden] { display: none; }
@media (min-width: 66em) {
  .form-section .grid > .form:not([hidden]) { display: grid; grid-template-columns: subgrid; align-items: start; }
  .form-section .form > * { grid-column: 4 / -1; }
  .form-section .form > .form__aside {
    grid-column: 1 / 4; grid-row: 1 / span 20; position: sticky; top: calc(var(--header-h) + 2rem); margin: 0;
  }
  .form-section .form__aside > .stepper { order: -1; display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; }
  .form-section .form__frist { padding: var(--s-4); }
  .form-section .stepper__item, .form-section .stepper__item.is-done, .form-section .stepper__item[aria-current] {
    padding: var(--s-2) var(--s-3); background: none; color: var(--fg-2); font-size: var(--fs-small);
  }
  .form-section .stepper__item[aria-current] { background: var(--tile); color: var(--fg); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
  .form-section .stepper__item.is-done { color: var(--fg-2); }
}
.stepper { gap: 6px; }
.stepper__item, .stepper__item.is-done, .stepper__item[aria-current] {
  padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--k-radius); background: var(--k-stone); color: var(--fg-3);
}
.stepper__item.is-done { background: var(--k-stone-2); color: var(--fg-2); }
/* Schmal: nur die Ziffern, der aktive Schritt mit Namen und so breit wie nötig */
@media (max-width: 39.99em) {
  .js .stepper { display: flex; gap: 6px; }
  .stepper__item { flex: 1 1 0; min-inline-size: 0; white-space: nowrap; }
  .stepper__item[aria-current] { flex: 3 1 auto; white-space: normal; }
}
.stepper__item[aria-current] { background: var(--k-ink); color: var(--k-ivory); }
.form__title, .form__nav, .form-done, .review__head, .choice-group__head { border: 0; }
.form__title { display: block; padding-block-start: 0; }
/* Schrittkopf wie die anderen Abschnittsköpfe: Bronzestrich, darüber „Schritt 1 von 3“ als Label, darunter der
   Titel in Bodoni (vorher eine große Bronze-Ziffer vor dem Titel) */
.form__title .form__num {
  display: block; margin-block-end: var(--s-3); font: 500 var(--fs-label)/1.3 var(--font-text); letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-2);
}
.form__title::before {
  content: ""; display: block; inline-size: 28px; margin-block-end: var(--s-3); border-block-start: 1px solid var(--accent);
}
.form__title .form__num::before { content: "Online-Anfrage · Schritt "; }
.form__title .form__num::after { content: " von 3"; }
/* Felder: helle Fläche mit sichtbarem Rahmen (#7d776c, ≥ 3,6:1 auf allen Gründen); nur background-color, damit
   der Pfeil der Auswahlliste aus style.css bleibt. Ohne Rahmen waren die Felder kaum zu erkennen (1,11:1) */
.input { border: 1px solid #7d776c; border-radius: var(--k-radius); background-color: #fbf9f5; }
.input:hover { border-color: var(--fg); }
.input:focus-visible { background-color: #fff; }
.choice {
  border: 0; border-radius: var(--k-radius); background-color: var(--k-stone);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.choice:hover { background-color: var(--k-stone-2); }
.choice:has(input:checked) { background-color: var(--k-ink); color: var(--k-ivory); box-shadow: none; }
.choice:has(input:checked) input { accent-color: var(--k-bronze-light); }
/* Fehler ruhig (18.10.2026; vorher dicke schwarze Rahmen um Hinweis, Felder und jede Antwort): Den Fehler sagt die
   Meldung unter dem Feld mit Bronze-Kante; das Textfeld bekommt nur einen dunklen Rand, die Antworten nichts. */
.field.is-invalid .input { border-color: var(--fg); border-width: 1px; }
.field.is-invalid :is(.choice-groups, .chips) .choice { border: 0; }
/* Hinweis oben wie der Kasten „Läuft eine Frist?“ im Seitenkopf: Steinfläche, keine Kante. Meldung am Feld als
   ruhige Zeile in dunkler Bronze, ohne Balken; das Feld selbst bleibt, wie es ist (nur das Textfeld dunkler) */
.form__summary-errors {
  max-inline-size: var(--measure-body); margin-block: var(--s-5) 0; padding: var(--s-5);
  border: 0; border-radius: var(--k-radius-l); background: var(--tile); box-shadow: none;
}
.form__summary-errors p { font-weight: 500; }
.form__summary-errors ul { margin-block-start: var(--s-2); list-style: none; padding-inline-start: 0; }
.form__summary-errors li + li { margin-block-start: var(--s-1); }
.field__error { display: block; margin-block-start: var(--s-2); font-size: var(--fs-small); font-weight: 500; color: var(--accent-text); }
.field__error::before { content: none; }
/* Weniger Kapitälchen: Schritte und „Pflichtfeld“ in normaler Schreibung; über den Rechtsgebieten nur die Namen
   (die Zeile „Rechtsanwalt“ darüber war hier doppelt) */
.stepper__item, .stepper__item[aria-current] { font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }
@media (max-width: 39.99em) { .stepper__item { font-size: 0; } .stepper__item .stepper__num, .stepper__item[aria-current] { font-size: var(--fs-small); } }
.field__req { font: 400 var(--fs-small)/1.3 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.choice-group__role { display: none; }
.chips { gap: 6px; }
.choice-group { gap: 6px; }
/* Kurze Gruppen (bis drei Antworten, etwa Ja / Nein / Weiß nicht): eine Reihe gleich breiter Flächen; am Handy
   stehen alle Antworten als volle Zeilen untereinander wie die Rechtsgebiete (vorher brach die dritte allein um) */
.chips:not(:has(> .choice:nth-child(4))) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 39.99em) {
  .chips, .chips:not(:has(> .choice:nth-child(4))) { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; }
}
.choice-groups::before { content: none; }
.choice-group__head { padding-block-start: 0; }
.choice-group.is-preferred .choice-group__head { box-shadow: none; color: var(--accent-text); }
.cond--box { border: 0; border-radius: var(--k-radius-l); background: var(--k-stone); padding: var(--s-5); }
.cond--box .input { background-color: #fbf9f5; }
/* Auf der Stone-Box stehen die Antworten hell */
.cond--box .choice { background-color: var(--k-ivory); }
.cond--box .choice:not(:has(input:checked)):hover { background-color: #fbf9f5; }
.form__nav { align-items: center; padding-block-start: var(--s-6); }
/* „Zurück“ als ruhiger Textknopf (vorher ein umrandeter Kasten, das einzige Linienelement im Formular) */
.form__nav [data-nav="back"] {
  min-inline-size: 0; padding-inline: 0; border: 0; background: none; color: var(--fg);
  text-decoration: underline 1px var(--accent); text-underline-offset: .3em;
}
.form__nav [data-nav="back"]:hover { background: none; color: var(--fg); text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.form__nav [data-nav="back"][hidden] ~ [type="submit"] { margin-inline-start: auto; }
.form__summary-errors { border-radius: var(--k-radius); }
.review dl > div { border: 0; padding-block: var(--s-2); }
.review { background: var(--k-stone); border-radius: var(--k-radius-l); padding: var(--s-5); }
.review + .review { margin-block-start: 8px; }
.form-done { padding-block-start: 0; }
/* Bestätigung nach dem Senden wie ein Seitenkopf: Bronzestrich, Label, Titel, Vorspann, Hinweis, Link */
.form-done > .label::before { content: ""; display: block; inline-size: 28px; margin-block-end: var(--s-3); border-block-start: 1px solid var(--accent); }
.form-done > .label { color: var(--fg-2); }
.form-done { scroll-margin-top: calc(var(--header-h) + 2rem); }
.form-done > .note { max-inline-size: var(--measure-body); color: var(--fg-2); }

/* Anmerkungen der Anwälte vom 20.10.2026 („Website Überarbeitung 2.0“) */
/* Blocksatz im Fließtext, auch am Handy; längere Texte laufen bis an den rechten Rand des Inhalts (die Lücke
   rechts störte). Blocksatz braucht Silbentrennung: Mit strengen Grenzen (Wörter ab 12 Zeichen, je Teil 5) trennte
   der Browser kaum, und die Wortlücken wuchsen auf das Drei- bis Achtfache (gemessen 24.10.2026). Deshalb trennt er
   jetzt ab 8 Zeichen, vorn mindestens 4 und hinten 3. Nur Fließtext in ausreichend breiten Spalten steht im
   Blocksatz. Linksbündig bleiben kurze Angaben (Steckbrief, Kontaktkarten, Adressen, Zitat, Inhaltsverzeichnis,
   Formularhinweise) und schmale Spalten (Ablauf, Kacheln der Bürogemeinschaft, Tätigkeiten unter 75em). Dort
   wurden die Lücken auch mit Trennung bis zu zwei Wortbreiten groß. Aus demselben Grund steht am Handy kein Blocksatz
   (rund 38 Zeichen je Zeile). :where hält die Regel schwach, damit zentrierte Elemente zentriert bleiben. */
:where(main) :where(p, li), :where(main) .legal-content dd, .door-row__desc {
  hyphens: auto; text-wrap: wrap;
  hyphenate-limit-chars: 8 4 3; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 3;
}
@media (min-width: 40em) {
  :where(main) :where(p, li), :where(main) .legal-content dd { text-align: justify; }
  :where(main) :where(nav, dl, form, figure, .merksatz, .legal-pair, .contact-card, .visit, .person, .step, .scene__fact, .door__list, .next-list) :where(p, li),
  :where(main) :where(h1, h2, h3, h4, .label, .breadcrumb, .btn, .link-more, .stand, .caption, .person__role,
    .field__hint, .callout, .door-scene__name, .door-row__name, .step__num, .step__body) { text-align: start; }
}
@media (min-width: 75em) { .door-row__desc { text-align: justify; } }
.hero--stage :is(.hero__lead, .hero__more), .hero__note, .head__lead, .page-hero--media .page-hero__lead,
.topic__body p, .step__body, .scene__fact p, .faq__a, .note, .legal-content :is(p, ul, ol, dd),
.legal-block__text > p, .legal-block__text > ul, .lead, .prose { max-inline-size: none; }
.hero--stage .hero__lead { hyphens: auto; }
@media (min-width: 66em) {
  .hero--stage :is(.hero__lead, .hero__more) { grid-column: content-start / content-end; }
  .head__lead { grid-column: 4 / -1; }
}
/* Namen der Anwälte nie trennen (Impressum „Verantwortliche“, Datenschutz „Verantwortliche“) */
.legal-pair p { hyphens: manual; }

/* Startseite: Abschnitt „01 Rechtsgebiete“ vor der Tür; der Kopf trägt nur das Label (die Namen folgen im Tür-Bild) */
.hero__head { grid-column: 1 / -1; margin-block: var(--space-block) 0; }
.hero__head + .door-stage { margin-block-start: var(--s-6); }

/* Tür: kürzerer Stand (vorher 90 bzw. 70 Bildschirmhöhen; man scrollte zu lange bis zu den Rechtsgebieten) */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 40em) { .reveal .door-scene-track { --pin: 35svh; } }
  @media (min-width: 66em) { .reveal .door-scene-track { --pin: 45svh; } }
}

/* Fußzeile: Telefon mit Symbol wie „Anrufen“ in der Kopfzeile */
.footer-col dd.tel { display: flex; align-items: center; gap: .5rem; }
.footer-col dd.tel .icon { inline-size: 16px; block-size: 16px; color: var(--k-bronze-light); }

/* Logo am Handy in einer Zeile: „Rechtsanwälte in Bürogemeinschaft“ wie am Desktop */
@media (max-width: 65.99em) {
  .lockup__l1, .lockup__em { display: inline; }
  .lockup__sub { white-space: nowrap; font-size: min(var(--fs-lockup), 3.5vw); } /* sehr schmale Handys: kleiner statt Umbruch */
}

/* Startseite 03, Wechsel: Über dem Bischofshof liegt das Foto beider Anwälte und blendet langsam ein und aus
   (je rund 7 s stehen, 1,3 s Überblendung); die Bildunterschrift wechselt mit. Erst wenn das Bild gesetzt ist
   (.is-in), und nur ohne „weniger Bewegung“; sonst steht der Bischofshof allein. */
.swap { position: relative; }
.swap > .swap__b { position: absolute; inset: 0; opacity: 0; }
.swap__caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: center; }
.swap__caption > span { grid-area: 1 / 1; }
/* Rechts in der Bildunterschrift zeigen zwei Punkte, dass ein zweites Bild folgt (wie die Seitenpunkte bei Porsche): Der
   Punkt des gezeigten Bildes ist zur Pille gestreckt und bronzen, der andere ein heller Punkt; beim Überblenden tauschen
   sie im selben Takt. Nur wenn das Bild wirklich wechselt; mit „weniger Bewegung“ fehlen sie. */
.swap__caption > .swap__dots { display: none; grid-area: 1 / 2; gap: 6px; align-items: center; }
.swap__dots i { inline-size: 6px; block-size: 6px; border-radius: 3px; background: color-mix(in srgb, currentColor 35%, transparent); }
.swap__dots i:first-child { inline-size: 18px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  html.reveal .m-reveal.is-in .swap__b { animation: k-swap 16s ease-in-out 3s infinite; }
  html.reveal .m-reveal.is-in .swap__caption > :first-child { animation: k-swap-out 16s ease-in-out 3s infinite; }
  html.reveal .swap__caption > .swap__dots { display: flex; }
  html.reveal .m-reveal.is-in .swap__dots i:first-child { animation: k-swap-dot-a 16s ease-in-out 3s infinite; }
  html.reveal .m-reveal.is-in .swap__dots i:last-child { animation: k-swap-dot-b 16s ease-in-out 3s infinite; }
}
@keyframes k-swap-dot-a {
  0%, 100% { inline-size: 18px; background: var(--accent); }
  8%, 50% { inline-size: 6px; background: color-mix(in srgb, currentColor 35%, transparent); }
  58% { inline-size: 18px; background: var(--accent); }
}
@keyframes k-swap-dot-b {
  0%, 100% { inline-size: 6px; background: color-mix(in srgb, currentColor 35%, transparent); }
  8%, 50% { inline-size: 18px; background: var(--accent); }
  58% { inline-size: 6px; background: color-mix(in srgb, currentColor 35%, transparent); }
}
@keyframes k-swap { 0%, 100% { opacity: 0; } 8%, 50% { opacity: 1; } 58% { opacity: 0; } }
@keyframes k-swap-out { 0%, 100% { opacity: 1; } 8%, 50% { opacity: 0; } 58% { opacity: 1; } }

/* Profil-Kopf (24.10.2026, Variante „Querformat“ nach Vergleich von vier Varianten, Vorbild Hengeler Mueller): Porträt im
   Querformat links (1–7), Label, Name, Vorspann und Aktionen rechts daneben (8–12, mittig zum Bild), wie das
   Bild-Zitat-Paar in 03; darunter der Steckbrief als Leiste über die ganze Breite. Kopf und Leiste passen auch auf
   kleine Laptops (MacBook Air, rund 1280 × 700) auf den ersten Bildschirm: Das Foto gibt dafür an Höhe nach und wird
   breiter geschnitten. Am Handy: Foto, Name, Vorspann, Aktionen, Steckbrief. */
.page-hero--profile { padding-block-start: var(--s-5); }
.page-hero--profile .page-hero__grid { row-gap: var(--s-6); }
.page-hero--profile .profile-photo { margin: 0; aspect-ratio: 3 / 2; }
.page-hero--profile .profile-photo img { object-position: 50% 25%; }
.page-hero--profile .page-hero__actions { flex-direction: column; align-items: flex-start; row-gap: var(--s-3); }
.page-hero--profile .profile-facts { margin: 0; padding: var(--s-4) var(--k-pad); }
.page-hero--profile .profile-facts > div { padding-block: var(--s-2); }
.page-hero--profile .profile-facts dd { overflow-wrap: anywhere; }
@media (max-width: 65.99em) {
  .profile-intro > .page-hero__title { margin-block-start: var(--s-3); }
  .page-hero--profile .page-hero__lead { margin-block-start: var(--s-5); }
}
@media (min-width: 40em) {
  .page-hero--profile .profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 66em) {
  .page-hero--profile .page-hero__grid { align-items: center; row-gap: var(--s-5); }
  .page-hero--profile .profile-photo {
    grid-column: 1 / 8; grid-row: 1;
    /* Kopfzeile, Brotkrumen, Abstände und Steckbrief-Leiste abgezogen */
    max-block-size: max(100svh - var(--header-h) - 15.5rem, 18rem);
  }
  .profile-intro { grid-column: 8 / -1; grid-row: 1; padding-inline-start: var(--s-5); }
  .profile-intro > .page-hero__title { margin-block-start: var(--s-3); font-size: clamp(3rem, 2rem + 2.4vw, 4.5rem); }
  .profile-intro > .page-hero__lead { margin-block-start: var(--s-4); }
  .profile-intro > .page-hero__actions { margin-block-start: var(--s-5); }
  .page-hero--profile .profile-facts { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(5, auto); justify-content: space-between; }
}

/* Profil 03 Arbeitsweise: zweites Porträt aus dem Shooting neben dem Leitsatz, als Bild-Text-Paar (Bild 1–7, Label und
   Leitsatz 8–12, mittig zum Bild); am Handy Label, Bild, Leitsatz */
.profile-wide { margin: 0; }
.profile-wide .frame { aspect-ratio: 3 / 2; }
.profile-wide .frame img { object-position: 50% 30%; }
.legal-block--media .merksatz__text { font-size: clamp(1.875rem, 1.3rem + 1.3vw, 2.625rem); }
@media (max-width: 65.99em) {
  .legal-block--media .profile-wide { grid-column: 1 / -1; order: 1; margin-block: var(--s-4) var(--s-5); }
  .legal-block--media .merksatz { grid-column: 1 / -1; order: 2; }
}
@media (min-width: 66em) {
  .legal-block--media { grid-template-rows: 1fr auto auto 1fr; align-items: start; row-gap: 0; }
  .legal-block--media .profile-wide { grid-column: 1 / 8; grid-row: 1 / -1; }
  .legal-block--media .legal-block__label { grid-column: 8 / -1; grid-row: 2; padding-inline-start: var(--s-6); }
  .legal-block--media .merksatz { grid-column: 8 / -1; grid-row: 3; margin-block-start: var(--s-5); padding-inline-start: var(--s-6); }
}

/* Profil 04 Berufsrechtliche Angaben: drei gleich hohe Kacheln nebeneinander wie die Zusagen der Startseite (03), statt
   einer Liste in einer Kachel, die neben dem Bild-Zitat-Paar aus 03 strukturlos wirkte; am Handy untereinander */
.legal-block .legal-facts { display: grid; gap: var(--s-3); margin: 0; max-inline-size: none; }
.legal-block .legal-facts > div { background: var(--tile); border-radius: var(--k-radius-l); padding: var(--s-5) var(--s-6); }
.legal-block .legal-facts > div:first-child { padding-block-start: var(--s-5); }
.legal-block .legal-facts dd { margin-block-start: var(--s-3); line-height: 1.5; }
@media (min-width: 40em) { .legal-block .legal-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
@media (min-width: 66em) {
  /* Label über den Kacheln, Kacheln auf ganzer Breite (je vier Spalten): Kante links bündig mit dem Bild aus 03 */
  .legal-block:has(> .legal-facts) { row-gap: var(--s-5); }
  .legal-block:has(> .legal-facts) > .legal-block__label { grid-column: 1 / -1; }
  .legal-block > .legal-facts { grid-column: 1 / -1; }
}