/* Hannekum & Partner — Website-Stylesheet
   Gestaltung „Kontor": Die Kanzlei ruht auf zwei Säulen, Rechtsberatung und
   Notariat. Eine durchlaufende Achse teilt die Seite und hält beide Seiten
   im Gleichgewicht.

   Diese Datei ist der Ausbau von entwuerfe/kontor/assets/style.css
   (Entwurf bleibt unveraendert als Archiv liegen).

   Keine externen Ressourcen: Schriften liegen lokal unter /assets/fonts/,
   es werden keine CDNs, Google Fonts oder Tracker geladen.

   Gliederung
     1  Schriften und Farbwerte
     2  Grundlagen
     3  Kopf und Navigation
     4  Achse und Sektionen
     5  Auftakt, Buttons
     6  Startseiten-Bausteine (Saeulen, Arbeitsweise, Team, Standorte)
     7  Fuss
     8  Unterseite: Seitenkopf, Brotkrumen, Prosa
     9  Ratgeber: Artikeltypografie
    10  Ratgeber: Listen, Kacheln, Kategorien, Blaetterung
    11  Profilseite
    12  Handlungsaufruf-Kasten
*/

/* ---------- 1  Schriften und Farbwerte ---------- */

@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/Newsreader.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/PublicSans.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ---------- 2  Grundlagen ---------- */
/* Die Akzentfarbe stammt aus dem Kanzleilogo (Unterzeile „Rechtsanwaelte |
   Fachanwaelte | Notarin"): ein warmes Terrakotta. Drei Abstufungen, damit
   Flaechen, Kleinschrift auf Papier und Kleinschrift auf Navy jeweils den
   Kontrast halten (>=4.5:1 bzw. >=5:1). --brass bleibt als Name bestehen,
   weil die uebrigen Regeln der Datei darauf verweisen. */
:root {
  --ink:    #0E1A2B;
  /* Farbe der Kopfleiste nach Kundenvorgabe vom 29.08.2026 (T-1270) — sie ist
     zugleich die Innenfarbe des runden Kanzlei-Signets, das links in der
     Leiste steht, sodass Bild und Flaeche nahtlos ineinander uebergehen. */
  --navy:   #061827;
  --paper:  #FAFAF8;
  --accent:         #CB4522;
  --accent-text:    #B03C1D;
  --accent-on-dark: #E4603B;   /* seit T-1272 nur noch Reserve: die Kopfleiste traegt --cta */
  --teal:   #0F5C63;
  --brass:  var(--accent);
  /* Orange des Terminknopfes in der Kopfleiste nach Kundenvorgabe vom
     29.08.2026 (T-1271). Bewusst eine eigene Variable und nicht --accent:
     die Akzentfarbe traegt die ganze Seite, das Orange nur diesen Knopf.
     Die Beschriftung steht darauf im Navy der Leiste (6:1) — Weiss kaeme
     auf diesem hellen Orange nur auf 3:1 und waere schwer zu lesen. */
  --cta:    #F36F21;
  --line:   #D6D3CB;
  --mute:   #5A6472;
  /* Aus dem Kundenentwurf vom 29.08.2026: das Blau der hervorgehobenen
     Schlusswendung im Auftakt, der etwas kraeftigere Fliesstext daneben und
     die kuehle Rahmenfarbe des hellen Knopfes. */
  --sea:       #224D72;
  --ink-soft:  #353948;
  --line-cool: #8C9AAA;
  --serif:  'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans:   'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pad:    clamp(1.25rem, 4vw, 4rem);
  --axis:   1px;
}

/* Startseite: Farbwelt des Kundenentwurfs vom 29.08.2026 (T-1272). Dort traegt
   das Orange #F36F21 der Kopfleiste auch Flaechen, Linien und Kleinschrift,
   das Petrol ist der zweite Ton. Die Kopfleiste bleibt aussen vor: sie faerbt
   sich aus --navy und --cta und ist auf allen Seiten identisch.
   --brass/--brass-text werden mitgesetzt, weil ihre var()-Verweise bereits auf
   :root ausgerechnet und dann vererbt werden.
   Seit T-1287 tragen auch die fuenf Rechtsgebietsseiten (body.rg) diese
   Farbwelt — sie sind an der Startseite ausgerichtet, seit T-1288 ebenso die
   Notariatsseite (body.notariat), seit T-1293 die Kontaktseite
   (body.kontakt) und seit T-1294 die Kanzleiseite (body.kanzlei).
   Die uebrigen Unterseiten behalten das Terrakotta. */
body.home, body.rg, body.notariat, body.kontakt, body.kanzlei,
body.journal, body.berufstraeger, body.jobs {
  /* Breite der Lesespalte im Wissensbereich (T-1303): rund 760 px Satzbreite.
     Auftakt, Verzeichnis, Fliesstext und Ansprechpartner stehen darauf. Die
     Seitenraender des .wrap kommen darauf noch obendrauf — deshalb rechnen die
     Regeln mit calc(var(--read) + var(--pad) * 2). */
  --read:        47.5rem;
  --accent:      #F36F21;
  --accent-text: #B94D0C;   /* Kleinschrift auf Papier: 4,7:1 */
  --brass:       #F36F21;
  --brass-text:  #B94D0C;
  --teal:        #0E6F73;
  /* Warmes Off-White als heller Grund der Startseite (T-1273). --paper traegt
     hier den Seitengrund, den Auftakt und den Fuss; die weissen und die navy
     Baender setzen sich davon ab. Auf der Kopfleiste bleibt der Wert die
     Schriftfarbe auf Navy und ist dort weiterhin hell genug. */
  --paper:       #F6F3EE;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1.1em; max-width: 62ch; }
a  { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Grid-Kinder duerfen den Container nicht aufblaehen (min-width:auto) */
.hero > *, .pillars > *, .ways > *, .team > *, .places > *, .split > *,
.cards > *, .profile > *, .taxonomy > * { min-width: 0; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.wrap { max-width: 1220px; margin: 0 auto; padding-inline: var(--pad); }

/* Eyebrow: benennt, worum es im Abschnitt geht — kein Zierrat */
.eyebrow {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin: 0 0 1.4rem;
}

/* ---------- 3  Kopf und Navigation ---------- */
/* Dunkle Leiste nach dem Kundenentwurf vom 29.08.2026: ueber die volle Breite,
   Signet und Terminknopf dicht an den Raendern — nicht im 1220er Satzspiegel.
   Links Signet, Trennstrich und Wortmarke mit zentrierter Unterzeile, rechts
   die Navigation und ganz aussen der Terminknopf im Orange der Kundenvorgabe
   (T-1271, --cta). Ausgeschrieben steht hier keine Rufnummer; beide liegen im
   Telefonfenster vor dem Terminknopf und im Fuss jeder Seite.
   Der Zeilenabstand ist mit T-1276 von 1.6rem auf 1.3rem zusammengerueckt und
   mit T-1286 auf 1rem: die Navigation traegt seither sieben Rubriken, und
   nur so bleibt die Leiste bis unter 1320 px einzeilig. Aus demselben Grund
   ruecken die Raender von 3vw auf 2.2vw ein — Schriftgroessen, Hoehe, Signet
   und Terminknopf bleiben unberuehrt. */
.top { background: var(--navy); color: var(--paper); }
.top__inner {
  display: flex; align-items: center; gap: .9rem .7rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1.15rem, 1.4vw, 2.2rem);
}

/* Marke, Navigation und Knopf schrumpfen mit der Fensterbreite mit, damit die
   Leiste bis 1200 px in einer Zeile bleibt (darunter setzt sie sich um). */
.mark { display: flex; align-items: center; gap: clamp(.7rem, 1.1vw, 1rem); text-decoration: none; color: inherit; }
/* Das Signet ist seit T-1270 das Kanzleilogo (assets/img/signet-hp.png): Kreis,
   Terrakotta-Kontur und Monogramm bringt die Bilddatei selbst mit, deshalb hier
   nur noch die Groesse. */
.mark__sign {
  flex: 0 0 auto; width: clamp(52px, 4.6vw, 72px); height: auto;
}
.mark__text {
  border-left: 1px solid rgba(250, 250, 248, .3);
  padding-left: clamp(.7rem, 1.1vw, 1rem); text-align: center;
}
.mark__name {
  display: block; font-family: var(--serif); font-size: clamp(1.05rem, 1.55vw, 1.6rem);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; white-space: nowrap;
}
/* Unterzeile im Orange der Kundenvorgabe (T-1272) — dieselbe Farbe wie der
   Terminknopf am anderen Ende der Leiste, auf Navy 5,9:1. */
.mark__sub {
  display: block; font-size: clamp(.62rem, .78vw, .8rem); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cta); margin-top: .3rem; white-space: nowrap;
}

/* Der Abstand zwischen den Rubriken ist seit T-1286 schrittweise
   zurueckgenommen (1.5vw, dann 1.1vw, dann .9vw). Mit T-1308 kommt das
   zweite Aufklappmenue dazu — die Schriftgroesse bleibt, der Abstand geht
   auf .7vw. */
.nav { display: flex; align-items: center; gap: clamp(.7rem, .7vw, 1.2rem); margin-left: auto; flex-wrap: wrap; }
.nav > a, .nav__item > a {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: clamp(.85rem, 1.05vw, .95rem); text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent; color: rgba(250, 250, 248, .92);
}
.nav > a:hover, .nav__item > a:hover { color: var(--paper); border-bottom-color: var(--cta); }
/* Aktive Rubrik: dauerhaft unterstrichen, damit der Standort in der Seite ablesbar bleibt.
   Orange wie Unterzeile und Terminknopf — die Leiste traegt nur diesen einen Farbton. */
.nav a[aria-current] { border-bottom-color: var(--cta); color: var(--cta); }
.nav__caret { width: 11px; height: 11px; flex: 0 0 auto; }

/* Die Rechtsgebiete klappen auf — reines CSS ueber :hover und :focus-within,
   kein JavaScript. Der Kopflink bleibt anklickbar und fuehrt auf die
   Uebersicht, damit die Rubrik auch ohne Zeigegeraet erreichbar ist. */
/* Der Traeger des Aufklappmenues ist selbst ein Flex-Kasten (T-1306): als Block
   spannte er eine Zeilenbox auf, in der die inline-flex-Box des Links auf der
   Grundlinie sass — die Unterlaenge des Struts machte den Kasten 2 px hoeher
   als den Link, und im mittig ausgerichteten Kopf stand „Rechtsberatung"
   dadurch 1 px tiefer als die uebrigen Rubriken. */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__menu {
  position: absolute; left: 0; top: 100%; z-index: 30;
  display: none; min-width: 15rem; padding: .5rem 0;
  background: var(--navy); border: 1px solid rgba(250, 250, 248, .16);
  box-shadow: 0 14px 34px rgba(8, 16, 28, .32);
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { display: block; }
.nav__menu a {
  display: block; padding: .42rem 1.1rem; font-size: .9rem;
  text-decoration: none; color: rgba(250, 250, 248, .9); white-space: nowrap;
}
.nav__menu a:hover { background: rgba(250, 250, 248, .08); color: var(--paper); }
.nav__menu hr { border: 0; border-top: 1px solid rgba(250, 250, 248, .16); margin: .45rem 0; }

.top__cta {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  white-space: nowrap; font-size: clamp(.85rem, 1vw, .95rem); font-weight: 500;
  padding: clamp(.6rem, .85vw, .8rem) clamp(.9rem, 1.35vw, 1.3rem);
  border-radius: 5px; background: var(--cta); border: 1px solid var(--cta); color: var(--navy);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.top__cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.top__cta:hover { background: transparent; color: var(--cta); border-color: var(--cta); }

/* Telefonsymbol zwischen Navigation und Terminknopf (T-1276): ein Klick oeffnet
   das Rufnummernfenster in der Bildschirmmitte — kein Aufklappmenue mehr.
   Das Symbol steht exakt so hoch wie der Terminknopf daneben: --ctrl-h rechnet
   dessen Hoehe nach (Polsterung + Zeilenhoehe der Knopfschrift + Rahmen), damit
   beide Knoepfe der Leiste auf einer Kante sitzen. Ohne JavaScript bleibt das
   Symbol ein Verweis auf die Kontaktseite, wo beide Rufnummern stehen. */
.top { --ctrl-h: calc(2 * clamp(.6rem, .85vw, .8rem) + 1.7 * clamp(.85rem, 1vw, .95rem) + 2px); }
.tel__btn {
  flex: 0 0 auto; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctrl-h); height: var(--ctrl-h);
  border: 1px solid rgba(250, 250, 248, .32); border-radius: 5px;
  color: rgba(250, 250, 248, .92); cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.tel__btn:hover { color: var(--cta); border-color: var(--cta); }
.tel__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Das Fenster selbst: <dialog> bringt Mitte, Verdunkelung, Escape und die
   Tastaturfuehrung mit; assets/js/kopf.js oeffnet es und schliesst es beim
   Klick auf die verdunkelte Seite. Das Kreuz sitzt oben links (Kundenvorgabe). */
dialog.tel {
  margin: auto; padding: 0; border: 0; background: transparent;
  width: min(23rem, calc(100vw - 2.5rem)); color: var(--paper);
}
dialog.tel::backdrop { background: rgba(6, 24, 39, .68); }
.tel__box {
  position: relative; display: grid; gap: .6rem;
  padding: 2.6rem 1.5rem 1.5rem;
  background: var(--navy); border: 1px solid rgba(250, 250, 248, .18);
  box-shadow: 0 24px 60px rgba(8, 16, 28, .45);
}
.tel__close {
  position: absolute; left: .5rem; top: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: transparent; border: 0; border-radius: 4px; cursor: pointer;
  color: rgba(250, 250, 248, .7);
  transition: color .18s ease, background .18s ease;
}
.tel__close:hover { color: var(--cta); background: rgba(250, 250, 248, .08); }
.tel__close svg { width: 16px; height: 16px; }
.tel__title {
  margin: 0 0 .3rem; text-align: center;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cta); font-weight: 600;
}
.tel__no {
  display: block; text-align: center; text-decoration: none;
  font-size: 1.05rem; padding: .6rem 1rem; border-radius: 5px;
  border: 1px solid var(--cta); color: var(--cta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.tel__ort {
  display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(250, 250, 248, .72); margin-bottom: .1rem;
  transition: color .18s ease;
}
.tel__no:hover { background: var(--cta); color: var(--navy); }
.tel__no:hover .tel__ort { color: var(--navy); }

/* Auf schmalen Geraeten sitzt die Nav unter der Wortmarke und darf umbrechen;
   der Terminknopf rutscht mit. Das Aufklappmenue entfaellt dort, weil es ohne
   Zeigegeraet nicht bedienbar waere — der Kopflink fuehrt auf die Uebersicht. */
@media (max-width: 1199px) {
  .top__inner { gap: .8rem 1.2rem; padding-block: .85rem; }
  .nav { margin-left: 0; order: 3; width: 100%; gap: .8rem 1.4rem; }
  .nav__caret, .nav__menu { display: none; }
  .tel__btn { order: 2; margin-left: auto; }
  .top__cta { order: 2; }
}
@media (max-width: 519px) {
  .top { --ctrl-h: calc(2 * .6rem + 1.7 * .85rem + 2px); }
  .mark { gap: .7rem; }
  .mark__sign { width: 46px; height: 46px; font-size: 1.1rem; }
  .mark__text { padding-left: .75rem; }
  .mark__name { font-size: .95rem; letter-spacing: .06em; }
  .mark__sub { font-size: .56rem; letter-spacing: .13em; }
  .top__cta { font-size: .85rem; padding: .6rem 1rem; }
}

/* ---------- 4  Achse: das tragende Element ---------- */
.axis { position: relative; }
@media (min-width: 900px) {
  .axis::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: var(--axis); background: var(--line); transform: translateX(-50%);
  }
  /* Rautenmarke dort, wo ein Abschnitt ansetzt */
  .axis > section::before {
    content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px;
    background: var(--paper); border: 1px solid var(--brass);
    transform: translateX(-50%) rotate(45deg);
  }
  .axis > section { position: relative; }
}

section { padding-block: clamp(3.5rem, 7vw, 6.5rem); border-top: var(--axis) solid var(--line); }
section:first-child { border-top: 0; }

/* ---------- 5  Auftakt und Buttons ---------- */
.hero { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.15fr .85fr; } }
.hero h1 em { font-style: italic; color: var(--brass); }
.hero__lead { font-size: 1.12rem; color: var(--mute); margin-top: 1.6rem; }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }
.hero__img { position: relative; }
.hero__img img {
  filter: saturate(.9) contrast(1.02);
  width: 100%; max-height: min(62vh, 560px); object-fit: cover; object-position: top center;
}
.hero__cap {
  font-size: .82rem; color: var(--mute); border-top: 1px solid var(--line);
  padding-top: .6rem; margin-top: .9rem;
}

.btn {
  display: inline-block; text-decoration: none; font-size: .95rem; font-weight: 600;
  padding: .85rem 1.6rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 4px;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: transparent; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: transparent; color: var(--accent-text); border-color: var(--accent); }
.btn--teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--teal:hover { background: transparent; color: var(--teal); }
/* Auf der Startseite ist die Akzentfarbe das helle Orange der Kopfleiste.
   Weisse Schrift kaeme darauf nur auf 3:1 — die Beschriftung steht deshalb im
   Navy der Leiste (6:1), wie beim Terminknopf. */
body.home .btn--accent, body.rg .btn--accent,
body.notariat .btn--accent, body.kontakt .btn--accent,
body.kanzlei .btn--accent, body.journal .btn--accent,
body.berufstraeger .btn--accent, body.jobs .btn--accent { color: var(--navy); }

/* ---------- 5a  Startseite: Buehne ---------- */
/* Der Auftakt laeuft ueber die volle Breite: der Satz steht links auf Papier,
   das Bild sitzt rechts und laeuft bis an den Bildschirmrand. Ein Verlauf
   blendet es nach links ins Papier aus, damit die Schrift frei steht.
   Unter 900 px wird daraus ein Bildband ueber dem Text. */
.stage {
  position: relative; overflow: hidden;
  padding-block: 0; border-top: 0; border-bottom: 0;
  background: var(--paper);
}
.stage__inner { position: relative; z-index: 2; padding-block: clamp(2.6rem, 4.6vw, 4.3rem); }
.stage__body { max-width: 42rem; }
.stage h1 { font-size: clamp(2.2rem, 4.3vw, 3.4rem); line-height: 1.18; }
.stage__rule { width: 64px; height: 2px; background: var(--accent); border: 0; margin: 1.9rem 0 0; }
.stage__lead { font-size: 1.2rem; line-height: 1.62; color: var(--ink-soft); margin-top: 1.7rem; max-width: 34rem; }
.stage__cta { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 2.4rem; }
/* Gleich breite Knoepfe wie im Entwurf, auch bei kurzer Beschriftung */
.stage__cta .btn { min-width: 10.5rem; text-align: center; padding: .95rem 1.9rem; }
/* Der dritte Einstieg tritt bewusst zurueck: nur Kontur, kein Grund (T-1273) */
.stage__cta .btn--ghost { background: transparent; border-color: rgba(6, 24, 39, .3); color: var(--ink); }
.stage__cta .btn--ghost:hover { border-color: var(--ink); }
/* Auf schmalen Geraeten stehen die drei Einstiege untereinander und ueber die
   volle Spaltenbreite — gleich gross, gut zu treffen (T-1274). */
@media (max-width: 560px) {
  .stage__cta { flex-direction: column; align-items: stretch; gap: .8rem; }
  .stage__cta .btn { width: 100%; }
}
/* Die Rufnummer unter den drei Einstiegen (T-1274) ist mit T-1275 entfallen —
   sie steht jetzt im Telefonfenster der Kopfleiste, zusammen mit Ahrensburg. */

/* Unter 1200 px laeuft das Bild als Band ueber dem Satz. Der Ausschnitt sitzt
   etwas hoeher, damit die Dachkante der Elbphilharmonie im Bild bleibt; der
   Verlauf loest die linke Kante ins Papier auf. */
.stage__media { position: relative; }
.stage__media img {
  width: 100%; height: clamp(200px, 40vw, 380px);
  object-fit: cover; object-position: right 30%; filter: saturate(.92) contrast(1.02);
  /* Kein rechteckiger Stockfoto-Ausschnitt: das Motiv laeuft nach oben und
     unten weich ins Papier aus (T-1274). Die Maske sitzt auf dem Bild, damit
     der Verlauf in ::after unberuehrt bleibt. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%);
}
.stage__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--paper) 0%, rgba(246, 243, 238, 0) 22%);
}
/* Erst ab 1200 px ist neben dem Satz genug Platz fuer das Bild — darunter
   liegt es als Band ueber dem Text, sonst liefe die Zeile hinein. */
@media (min-width: 1200px) {
  .stage__media { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: 1; }
  .stage__media img {
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 72%, transparent 100%);
  }
  /* Das Bild blendet schon selbst nach links aus. Der Verlauf zieht diesen
     Uebergang weit nach rechts, damit die Schauzeile auf freiem Papier steht
     und das Motiv erst hinter ihr aufkommt (T-1272). */
  .stage__media::after {
    background: linear-gradient(to right,
      var(--paper) 0%, rgba(246, 243, 238, .92) 15%,
      rgba(246, 243, 238, .45) 40%, rgba(246, 243, 238, 0) 62%);
  }
  .stage__inner { min-height: 30rem; display: flex; align-items: center; }
}
@media (min-width: 1440px) { .stage__media { left: 46%; } }

/* ---------- 5b  Abschnittskopf ---------- */
.section-head { text-align: center; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.section-head .eyebrow { margin-bottom: .7rem; }
.section-head h2 { margin: 0; }
.section-head p { color: var(--mute); margin: 1rem auto 0; }
.section-head hr { width: 44px; height: 2px; background: var(--accent); border: 0; margin: 1.2rem auto 0; }
/* Linksbuendige Fassung fuer die Startseite (T-1273): der Satz steht am
   Anschlag des Satzspiegels, nicht in der Mitte — editorial statt symmetrisch. */
.section-head--left { text-align: left; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
/* .section-head p zentriert den Absatz ueber margin-inline:auto — das traefe
   sonst auch die Eyebrow und schoebe sie aus der Flucht der Ueberschrift. */
.section-head--left p { margin-inline: 0; }
.section-head--left h2 { max-width: 20ch; }
.section-head__wide { max-width: 26ch; }

/* ---------- 6  Startseite: die zwei Saeulen ---------- */
.pillars { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar h2 { margin-bottom: .8rem; }
.pillar p { color: var(--mute); }
.fields { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.fields li { border-top: 1px solid var(--line); }
.fields li:last-child { border-bottom: 1px solid var(--line); }
.fields a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  text-decoration: none; padding: .72rem 0; font-size: 1.02rem;
}
.fields a::after { content: "→"; color: var(--brass); opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.fields a:hover::after { opacity: 1; transform: translateX(3px); }
.fields a:hover { color: var(--brass); }

/* ---------- 6a Startseite: Baender, Weiterverweis ---------- */
/* Die Startseite ist in Baender gegliedert (T-1273). Getrennt werden sie durch
   den Farbwechsel Creme/Weiss, nicht durch Linien — die Kante entsteht aus der
   Flaeche. Navy traegt allein den Abschluss vor dem Fuss. */
.band { border-top: 0; padding-block: clamp(4rem, 8vw, 7rem); }
.band--white { background: #fff; }
.band--cream { background: var(--paper); }
.band--navy  { background: var(--navy); color: var(--paper); }
/* Knapper gesetzte Baender: Standorte und Abschluss standen zu hoch (T-1277). */
.band--tight { padding-block: clamp(3.2rem, 5.5vw, 4.8rem); }

/* Weiterverweis: Text und Pfeil, kein Knopf. Steht unter Schwerpunkten,
   Markenabschnitt und Themenfeldern. */
.more {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; font-size: .95rem; font-weight: 600;
}
.more::after { content: "→"; transition: transform .16s ease; }
.more:hover { color: var(--accent-text); }
.more:hover::after { transform: translateX(4px); }

/* ---------- 6b Startseite: Schwerpunkte ---------- */
/* Drei Bereiche, gehalten von Ziffer und Linie statt von Kaesten: oben die
   feine Anschlagslinie, darunter die Ziffer in Schaugroesse, Titel und die
   Themen als leise Zeilenreihe. Die Spannung entsteht aus dem Groessensprung
   zwischen Ziffer, Ueberschrift und Themen (T-1282), nicht aus Flaechen.
   Petrol kennzeichnet allein das Notariat (T-1274); Deutsch-USA traegt die
   Ziffer im Navy und steht damit gleichwertig, ohne zu draengen. */
.prio { display: grid; gap: clamp(2.8rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .prio { grid-template-columns: repeat(3, 1fr); }
  /* Nur eine Spalte traegt eine Unterzeile — die uebrigen Themenreihen
     beginnen trotzdem auf derselben Hoehe. */
  .prio__item:not(:has(.prio__sub)) .prio__list { margin-top: calc(2rem + 1.7 * .95rem); }
}
.prio > * { min-width: 0; }
.prio__item { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding-top: 1.2rem; }
/* Die Ziffer ist das tragende Gestaltungselement des Abschnitts: gross,
   in der Serifenschrift, dicht an der Anschlagslinie. */
.prio__no {
  font-family: var(--serif); font-size: clamp(3.4rem, 5.4vw, 5rem); line-height: .85;
  color: var(--accent); margin: 0 0 1.3rem; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.prio__item--teal .prio__no { color: var(--teal); }
#deutsch-usa .prio__no { color: var(--ink); }
.prio__item h3 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); margin: 0 0 .5rem; }
.prio__item h3 a { text-decoration: none; }
.prio__item h3 a:hover { color: var(--accent-text); }
/* Erklaerende Unterzeile (bisher nur „Deutsch-USA": Transatlantische
   Rechtsberatung). Sie steht dicht unter der Ueberschrift und bindet sich an
   sie, nicht an die Themenreihe darunter. */
.prio__sub { color: var(--mute); font-size: .95rem; margin: 0; }
/* Die Themen treten hinter die Ueberschrift zurueck (T-1282): kleiner und
   in der weicheren Schriftfarbe — verlinkte und nicht verlinkte Begriffe
   gleich, damit die drei Bereiche gleichwertig lesen. Keine Trennlinien
   zwischen den Zeilen; nur die Anschlagslinie oben bleibt. */
.prio__list {
  list-style: none; margin: 2rem 0 2.4rem; padding: 0;
  font-size: .94rem; line-height: 1.5; color: var(--ink-soft);
}
.prio__list li { padding: .3rem 0; }
.prio__list a { text-decoration: none; color: inherit; }
.prio__list a:hover { color: var(--accent-text); }
.prio__item .more { margin-top: auto; }

/* ---------- 6c Startseite: Notariat Ahrensburg ---------- */
/* Schlossmotiv links, Notariatstext rechts (T-1282). Das Bild nimmt gut die
   Haelfte der Breite ein und ist der atmosphaerische Anker fuer den Amtssitz;
   der frueher hier stehende allgemeine Kanzleisatz ist entfallen, ebenso der
   zweite Notariatsabschnitt weiter unten — das Notariat steht nur noch
   einmal, dafuer stark. */
.notar { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .notar { grid-template-columns: 1.06fr .94fr; } }
.notar > * { min-width: 0; }
/* Das Motiv (Schloss Ahrensburg mit der Schlosswiese) loest sich an allen vier
   Kanten in den cremefarbenen Grund auf — keine harte Bildkante. Die Maske
   sitzt auf dem img selbst, damit der Rahmen des Abschnitts unberuehrt bleibt. */
.notar__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Petrol ist der Ton des Notariats — hier als Eyebrow, sonst nirgends im
   Abschnitt: der Grund bleibt Creme, die Wirkung kommt aus Bild und Satz. */
.notar .eyebrow { color: var(--teal); }
.notar h2 { max-width: 17ch; }
.notar__text { color: var(--ink-soft); font-size: 1.08rem; margin: 1.6rem 0 0; max-width: 46ch; }
/* Die vier Gestaltungsfelder stehen als ruhiges Paar aus zwei Zeilen, durch
   einen Mittelpunkt getrennt — eine Aufzaehlung, kein Raster. Unter 520 px
   laufen sie untereinander, dort entfaellt der Trenner. */
.notar__fields {
  list-style: none; margin: 1.9rem 0 2.2rem; padding: 0;
  display: grid; grid-template-columns: auto auto; justify-content: start;
  gap: .3rem 1rem;
  font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5;
}
.notar__fields li { display: flex; align-items: baseline; gap: 1rem; }
.notar__fields li:nth-child(odd)::after { content: "·"; color: var(--line-cool); }
.notar__fields a { text-decoration: none; }
.notar__fields a:hover { color: var(--teal); }
.notar__cta { margin: 0; }
.notar .more:hover { color: var(--teal); }
@media (max-width: 519px) {
  .notar__fields { grid-template-columns: 1fr; }
  .notar__fields li:nth-child(odd)::after { content: none; }
}

/* ---------- 6d Startseite: Berufstraeger ---------- */
/* Symmetrische Dreierspalte (T-1283): drei Portraits im selben 4:5-Beschnitt,
   gleiche Breite, gleiche Hoehe, Koepfe auf einer Linie (der Beschnitt sitzt
   in den Bilddateien). Keine Kaesten, keine Rahmen, keine Schatten, keine
   runden Ecken, keine Linien unter den Namen — die Bilder tragen, der Text
   tritt zurueck. */
.people {
  display: grid; gap: clamp(2.6rem, 4vw, 3.6rem) clamp(1.6rem, 3.2vw, 2.8rem);
  justify-items: center;
}
@media (min-width: 700px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.people > * { min-width: 0; width: 100%; max-width: 360px; }
@media (min-width: 700px) { .people > * { max-width: none; } }
.people__link { display: block; text-decoration: none; overflow: hidden; }
/* Ruhezustand ist Schwarzweiss; beim Ueberfahren geht das Portrait weich in
   seine Farbe ueber und waechst um 1 %. Auf Touchgeraeten uebernimmt das der
   erste Antipper (:focus-within am Artikel), die Verlinkung bleibt. */
.people__link img {
  display: block; width: 100%; aspect-ratio: 4/5;
  object-fit: cover; object-position: top center;
  filter: grayscale(1) contrast(1.02);
  transition: filter .5s ease, transform .5s ease;
}
.people__item:hover .people__link img,
.people__item:focus-within .people__link img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.01);
}
@media (prefers-reduced-motion: reduce) {
  .people__link img { transition: filter .5s ease; }
  .people__item:hover .people__link img,
  .people__item:focus-within .people__link img { transform: none; }
}
.people__text { margin-top: clamp(1.1rem, 1.8vw, 1.5rem); }
.people__item h3 { margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: .01em; }
.people__item h3 a { text-decoration: none; }
.people__item h3 a:hover { color: var(--accent-text); }
.people__link:hover + .people__text h3 a { color: var(--accent-text); }
/* Berufsbezeichnungen: kleiner als der Name, ohne Trennlinie. */
.people__role { color: var(--ink-soft); font-size: .92rem; line-height: 1.65; margin: .45rem 0 0; }
.people__all { margin: clamp(2.6rem, 4.5vw, 3.6rem) 0 0; }

/* ---------- 6e Startseite: Themenfelder (Expertise) ---------- */
/* Fuenf anwaltliche Kernbereiche auf Navy (T-1284) — der Kontrast der
   Kopfleiste kehrt im unteren Teil der Seite wieder. Keine Kaesten, keine
   Schatten, keine gerundeten Ecken, keine Sinnbilder: nur feine
   Anschlagslinien, Ziffer, Ueberschrift, Themenzeile und Erklaersatz.
   Satzbild ab 1040 px: 2 + 3 ueber einem Sechserraster — die obere Reihe
   laeuft ueber je drei, die untere ueber je zwei Spalten. Alle fuenf Felder
   tragen dieselben Schriftgroessen, damit sie gleichwertig lesen; nur die
   Zeilenbreite unterscheidet sich. */
.exp { display: grid; gap: clamp(2.8rem, 4.5vw, 3.8rem); }
@media (min-width: 700px) {
  .exp { grid-template-columns: 1fr 1fr; column-gap: clamp(2.6rem, 5vw, 4rem); }
}
@media (min-width: 1040px) {
  .exp {
    grid-template-columns: repeat(6, 1fr);
    column-gap: clamp(2.4rem, 3.6vw, 3.6rem);
    row-gap: clamp(3.2rem, 5vw, 4.6rem);
  }
  .exp__item { grid-column: span 2; }
  .exp__item:nth-child(-n+2) { grid-column: span 3; }
}
.exp > * { min-width: 0; }
.exp__item { border-top: 1px solid var(--ink); padding-top: 1.3rem; }
/* Ziffer an der Anschlagslinie, in der Serifenschrift und ruhig gesperrt: sie
   ordnet die fuenf Felder, laeuft den Schwerpunkten (01/02/03 in der
   Schaugroesse weiter oben) aber bewusst nicht den Rang ab. */
.exp__no {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1;
  letter-spacing: .14em; color: var(--mute);
  font-variant-numeric: tabular-nums; margin: 0 0 1.1rem;
}
.exp__item h3 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); margin: 0 0 .6rem; }
/* Der Pfeil laeuft dem letzten Wort hinterher (nicht als Flex-Element an den
   rechten Rand): bei zweizeiligen Ueberschriften stuende er sonst allein. */
.exp__item h3 a { text-decoration: none; }
.exp__item h3 a::after {
  content: "\00a0→"; display: inline-block; font-size: .72em;
  color: var(--accent); transition: transform .16s ease;
}
.exp__item h3 a:hover { color: var(--accent-text); }
.exp__item h3 a:hover::after { transform: translateX(4px); }
/* Die Themen unter der Feldueberschrift: die Suchbegriffe des Kunden, gesetzt
   als Unterzeile in der Serifenschrift statt als Schlagwortreihe — gemischte
   Schreibung, keine Versalien, die Trenner dezent zurueckgenommen. Begriffe
   mit eigener Seite sind verlinkt, die uebrigen stehen als Text — es werden
   keine URLs erfunden. */
.exp__tags {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.5;
  color: var(--mute); margin: 0; max-width: 40ch;
}
.exp__sep { opacity: .5; }
.exp__tags a { text-decoration: none; border-bottom: 1px solid var(--line); }
.exp__tags a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
/* Erklaersatz: der leiseste Ton des Feldes, deutlich kleiner als die
   Ueberschrift und in der Grotesk, damit sich die drei Ebenen unterscheiden. */
.exp__text {
  font-size: .95rem; line-height: 1.7; color: var(--mute);
  margin: .9rem 0 0; max-width: 42ch;
}
/* Auf dem dunklen Grund tragen Linien, Ziffern und Themen die hellen
   Abstufungen; die Ueberschriften stehen in Weiss, die Pfeile im Orange. */
.band--navy .exp__item { border-top-color: rgba(246, 243, 238, .28); }
.band--navy .exp__no { color: rgba(246, 243, 238, .5); }
.band--navy .exp__item h3 a { color: #fff; }
.band--navy .exp__item h3 a::after { color: var(--cta); }
.band--navy .exp__item h3 a:hover { color: var(--cta); }
.band--navy .exp__tags { color: rgba(246, 243, 238, .74); }
.band--navy .exp__tags a { color: rgba(246, 243, 238, .92); border-bottom-color: rgba(246, 243, 238, .28); }
.band--navy .exp__tags a:hover { color: var(--cta); border-bottom-color: var(--cta); }
.band--navy .exp__text { color: rgba(246, 243, 238, .62); }
/* Auf Navy traegt die Eyebrow das Orange der Kopfleiste (5,9:1). */
.band--navy .eyebrow { color: var(--cta); }
.band--navy .section-head h2 { color: #fff; }

/* ---------- 6f Startseite: Wissen ---------- */
/* Drei Beitraege aus dem Ratgeber, redaktionell gesetzt wie eine
   Journalseite (T-1282): links der Leitbeitrag gross, rechts die beiden
   weiteren als ruhige Zeilen. Rechtsgebiet, Ueberschrift, kurzer Anreisser —
   keine Kacheln, keine Bilder, keine Rahmen. */
.wissen { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); }
@media (min-width: 900px) {
  .wissen {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 5rem);
    row-gap: clamp(2.2rem, 4vw, 3rem);
  }
  .wissen__item--lead { grid-column: 1; grid-row: 1 / span 2; }
}
.wissen > * { min-width: 0; }
/* Flex, damit die Weiterlesen-Verweise trotz unterschiedlich langer
   Anreisser am Fuss der Spalte stehen. */
.wissen__item {
  border-top: 1px solid var(--line); padding-top: 1.2rem;
  display: flex; flex-direction: column;
}
.wissen__item .more { margin-top: auto; }
.wissen__cat {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-text); margin: 0 0 .8rem;
}
.wissen__item h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.25; margin: 0 0 .7rem; }
.wissen__item h3 a { text-decoration: none; }
.wissen__item h3 a:hover { color: var(--accent-text); }
.wissen__item p { color: var(--mute); font-size: .96rem; margin: 0 0 1.2rem; }
/* Der Leitbeitrag steht an der kraeftigen Linie und traegt die grosse
   Ueberschrift — daraus entsteht die Hierarchie des Abschnitts. Die Regeln
   stehen bewusst hinter den allgemeinen, damit sie greifen. */
.wissen__item--lead { border-top-color: var(--ink); padding-top: 1.4rem; }
.wissen__item--lead h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.18; margin-bottom: .9rem; }
.wissen__item--lead p { font-size: 1.08rem; }
/* Beim Leitbeitrag steht der Verweis dicht am kurzen Anreisser; der freie
   Raum darunter bleibt bewusst stehen. */
.wissen__item--lead .more { margin-top: 0; }
.wissen__all { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }

/* ---------- 6g Startseite: Standorte ---------- */
/* Der Abschnitt stand zu hoch (T-1277): Kopf, Reihe und E-Mail sind
   zusammengerueckt, die Anmutung bleibt. */
#standorte .section-head--left { margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.locs { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 760px) { .locs { grid-template-columns: 1fr 1fr; } }
.locs > * { min-width: 0; }
.loc { border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.loc__kind {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--mute); margin: 0 0 .8rem;
}
/* Das Notariat besteht ausschliesslich in Ahrensburg — Petrol kennzeichnet es. */
.loc__kind--teal { color: var(--teal); }
.loc h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 0 0 .7rem; }
.loc address { font-style: normal; line-height: 1.85; color: var(--ink-soft); }
.loc address a { text-decoration: none; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.loc address a:hover { border-bottom-color: var(--accent); }
.locs__mail { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; font-size: 1.05rem; }
.locs__mail a { text-decoration: none; border-bottom: 1px solid var(--line); }
.locs__mail a:hover { border-bottom-color: var(--accent); }

/* ---------- 6h Startseite: Abschluss ---------- */
/* Zwei Spalten statt einer hohen Saeule (T-1277): links der Satz, rechts der
   Knopf und die Kontaktwege. Der Abschnitt baut damit deutlich niedriger und
   die rechte Haelfte steht nicht mehr leer. */
.closing__inner { max-width: 46rem; }
@media (min-width: 900px) {
  .closing__inner {
    max-width: none; display: grid; align-items: end;
    grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 5vw, 5rem);
  }
  .closing__inner > * { min-width: 0; }
  .closing__side .closing__cta { margin: 0; }
  .closing__meta { flex-direction: column; row-gap: 0; }
}
.closing h2 { max-width: 20ch; }
.closing__text { color: rgba(246, 243, 238, .8); margin: 1.4rem 0 0; font-size: 1.08rem; max-width: 44ch; }
.closing__cta { margin: 2.4rem 0 0; }
/* Rufnummern und Anschrift stehen beim Knopf, bewusst leise (T-1274). */
.closing__meta {
  display: flex; flex-wrap: wrap; column-gap: 1.8rem; row-gap: .2rem;
  margin: 1.8rem 0 0; font-size: .93rem; line-height: 2;
  color: rgba(246, 243, 238, .62); max-width: none;
}
.closing__meta a {
  text-decoration: none; color: rgba(246, 243, 238, .88);
  border-bottom: 1px solid rgba(246, 243, 238, .28);
  font-variant-numeric: tabular-nums;
}
.closing__meta a:hover { color: var(--cta); border-bottom-color: var(--cta); }
/* Auf Navy dreht der Knopf beim Ueberfahren um: Schrift und Rahmen in Orange. */
.closing .btn--accent:hover { background: transparent; color: var(--cta); border-color: var(--cta); }

/* ---------- 6i Arbeitsweise (Unterseiten) ---------- */
.ways { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way h3 { font-family: var(--sans); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem; }
.way p { color: var(--mute); margin: 0; font-size: .98rem; }

/* ---------- 6j Team (Unterseiten) ---------- */
.team { display: grid; gap: 2.2rem; }
@media (min-width: 760px) { .team { grid-template-columns: repeat(3, 1fr); } }
.person figure { margin: 0; }
.person img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; filter: grayscale(.15); }
.person h3 { margin-top: 1rem; font-size: 1.2rem; }
.person .role { color: var(--mute); font-size: .93rem; margin: .25rem 0 0; }

/* ---------- 6k Standortkarten (Unterseiten) ---------- */
.places { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .places { grid-template-columns: 1fr 1fr; } }
.place address { font-style: normal; line-height: 1.9; }
.place .note { color: var(--brass); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.place a { text-decoration: none; border-bottom: 1px solid var(--line); }
.place a:hover { border-bottom-color: var(--brass); }

/* ---------- 7  Abschluss und Fuss ---------- */
.close { text-align: center; }
.close h2 { max-width: 20ch; margin-inline: auto; }
.close p { margin-inline: auto; color: var(--mute); }

.foot { border-top: var(--axis) solid var(--line); padding-block: 2.4rem; font-size: .9rem; color: var(--mute); }
.foot__inner { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brass); }
.foot__legal { margin-left: auto; }

/* ---------- 8  Unterseite: Seitenkopf, Brotkrumen, Prosa ---------- */
.page-head { border-bottom: var(--axis) solid var(--line); }
.page-head .eyebrow { margin-bottom: 1rem; }
.prose h2 { margin-top: 2.6rem; margin-bottom: .8rem; }
.prose ul { padding-left: 1.1rem; color: var(--mute); max-width: 62ch; }
.prose li { margin-bottom: .5rem; }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.callout { border: 1px solid var(--line); padding: 1.8rem; background: #fff; }
.callout h3 { font-family: var(--sans); font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .7rem; }
.callout p { font-size: .98rem; color: var(--mute); }

/* Brotkrumen — sitzen zwischen Kopfleiste und Seiteninhalt auf der Linie auf.
   Die Achse setzt erst darunter an, deshalb bewusst ausserhalb von <main class="axis">. */
.crumbs { border-bottom: var(--axis) solid var(--line); background: var(--paper); }
.crumbs ol {
  list-style: none; margin: 0; padding-block: .85rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem;
  font-size: .84rem; color: var(--mute);
}
.crumbs li { display: flex; align-items: baseline; gap: .55rem; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--brass); border-bottom-color: var(--brass); }
.crumbs [aria-current] { color: var(--ink); }

/* Kopf einer Inhaltsseite ohne Aufmacherbild. Etwas kleiner als die
   Schauzeile der Startseite — hier steht Information, keine Bühne. */
.lede { max-width: 24ch; font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.page-intro { font-size: 1.12rem; color: var(--mute); margin-top: 1.6rem; max-width: 62ch; }

/* ---------- 9  Ratgeber: Artikeltypografie ---------- */

/* Ein Ratgeberartikel ist zum Lesen da. Der Satz steht in der linken Haelfte,
   damit die Mittelachse der Gestaltung genau zwischen Text und Randspalte
   laeuft; die Zeilenlaenge bleibt dadurch von selbst unter 70 Zeichen.
   Unter 1040 px faellt die Randspalte unter den Text. */
.article { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1040px) { .article { grid-template-columns: 1fr 1fr; } }
.article > * { min-width: 0; }

.article__aside { font-size: .95rem; }
@media (min-width: 1040px) {
  .article__aside { position: sticky; top: 2rem; align-self: start; }
}
.article__aside .callout + .related { margin-top: 2.4rem; }

/* Artikelueberschriften stehen in der halben Spalte — die Schaugroesse der
   Startseite waere hier zu laut und zu lang. */
.article__main h1 { font-size: clamp(2.1rem, 3.4vw, 3rem); }

.article__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem;
  font-size: .84rem; color: var(--mute);
  margin: 1.4rem 0 2.2rem; padding-top: .9rem; border-top: 1px solid var(--line);
}
.article__meta time { font-variant-numeric: tabular-nums; }
.article__meta .sep { color: var(--line); }
.article__meta a {
  text-decoration: none; color: var(--brass);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.article__meta a:hover { border-bottom: 1px solid var(--brass); }

.article__body { font-size: 1.04rem; }
.article__body > *:first-child { margin-top: 0; }
.article__body p { max-width: 68ch; margin: 0 0 1.15em; }
.article__body h2 {
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  margin: 2.6rem 0 .7rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.article__body h3 { font-size: 1.22rem; margin: 2rem 0 .5rem; }
.article__body h4 {
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  margin: 1.8rem 0 .5rem;
}
.article__body ul, .article__body ol { max-width: 66ch; padding-left: 1.2rem; margin: 0 0 1.3em; }
.article__body li { margin-bottom: .45em; }
.article__body li::marker { color: var(--brass); }
.article__body ul ul, .article__body ol ol { margin: .45em 0 .2em; }
.article__body a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); }
.article__body a:hover { color: var(--brass); }
.article__body strong { font-weight: 600; }
.article__body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; max-width: 68ch; }

.article__body blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.5rem;
  border-left: 2px solid var(--brass);
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--ink);
  max-width: 58ch;
}
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body blockquote cite {
  display: block; margin-top: .7rem;
  font-family: var(--sans); font-size: .85rem; font-style: normal; color: var(--mute);
}

/* Bilder im Fliesstext, mit Bildunterschrift auf der Linie */
.article__body figure { margin: 2rem 0; }
.article__body figure img { width: 100%; }
.article__body figcaption,
.figcaption {
  font-size: .82rem; color: var(--mute);
  border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .7rem;
  max-width: 62ch;
}

/* Tabellen: auf schmalen Geraeten seitlich scrollbar statt ueberlaufend */
.article__body .table-scroll { overflow-x: auto; margin: 1.8rem 0; -webkit-overflow-scrolling: touch; }
.article__body table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; }
.article__body th, .article__body td {
  text-align: left; vertical-align: top;
  padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--line);
}
.article__body th {
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass);
  border-bottom-color: var(--ink);
}
.article__body tbody tr:last-child td { border-bottom-color: var(--ink); }

/* Angehaengte Kaesten im Artikel (Hinweis, Frist, Merksatz) */
.article__body .callout { margin: 2rem 0; max-width: 68ch; }

/* ---------- 10  Ratgeber: Listen, Kacheln, Kategorien, Blaetterung ---------- */

.cards { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 700px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* Kachel: eine Linie oben als Anschlag, sonst nichts — wie die Feldlisten */
.card { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding-top: 1rem; }
.card__cat {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin: 0 0 .6rem;
}
.card h3 { font-size: 1.18rem; margin: 0; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--brass); }
.card p { color: var(--mute); font-size: .95rem; margin: .7rem 0 0; max-width: none; }
/* Zwei Klassen, damit die Regel `.card p` das auto-Maß nicht überschreibt:
   das Datum soll bei ungleich langen Titeln auf einer Linie stehen. */
.card .card__date {
  margin-top: auto; padding-top: 1rem;
  font-size: .82rem; color: var(--mute); font-variant-numeric: tabular-nums;
}

/* Artikelliste als Zeilen (Kategorieseite, Ratgeber-Uebersicht) */
.postlist { list-style: none; margin: 0; padding: 0; }
.postlist > li { border-top: 1px solid var(--line); }
.postlist > li:last-child { border-bottom: 1px solid var(--line); }
.postlist__item { display: grid; gap: .3rem 2rem; padding: 1.5rem 0; align-items: baseline; }
@media (min-width: 860px) { .postlist__item { grid-template-columns: 9rem 1fr; } }
.postlist__meta { font-size: .82rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.postlist h3 { font-size: 1.3rem; margin: 0; }
.postlist h3 a { text-decoration: none; }
.postlist h3 a:hover { color: var(--brass); }
.postlist p { color: var(--mute); font-size: .96rem; margin: .5rem 0 0; }
.postlist__cat {
  display: inline-block; margin-top: .6rem;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; text-decoration: none;
}
.postlist__cat:hover { border-bottom: 1px solid var(--brass); }

/* Kategorie-Verzeichnis: reine Linkliste, kein JavaScript-Filter */
.taxonomy { display: grid; gap: .1rem 2rem; list-style: none; margin: 1.8rem 0 0; padding: 0; }
@media (min-width: 620px)  { .taxonomy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .taxonomy { grid-template-columns: repeat(3, 1fr); } }
.taxonomy li { border-top: 1px solid var(--line); }
.taxonomy a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  text-decoration: none; padding: .6rem 0; font-size: .98rem;
}
.taxonomy a:hover { color: var(--brass); }
.taxonomy .count { color: var(--mute); font-size: .84rem; font-variant-numeric: tabular-nums; }
.taxonomy a:hover .count { color: var(--brass); }

/* Blaetterung */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .92rem;
}
.pager a, .pager span {
  display: inline-block; padding: .45rem .8rem; min-width: 2.6rem; text-align: center;
  text-decoration: none; border: 1px solid transparent;
}
.pager a:hover { border-color: var(--line); color: var(--brass); }
.pager [aria-current] { border-color: var(--ink); font-weight: 600; }
.pager .pager__gap { color: var(--mute); min-width: 0; padding-inline: .3rem; }
.pager__prev { margin-right: auto; }
.pager__next { margin-left: auto; }

/* Weiterlesen-Block am Artikelende */
.related { margin-top: 3.5rem; padding-top: 1.6rem; border-top: var(--axis) solid var(--line); }
.related > .eyebrow { margin-bottom: 1.4rem; }

/* ---------- 11  Profilseite ---------- */
.profile { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .profile { grid-template-columns: .8fr 1.2fr; } }
.profile__portrait { margin: 0; }
.profile__portrait img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center;
  filter: grayscale(.15);
}
.profile__portrait figcaption {
  font-size: .82rem; color: var(--mute);
  border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .7rem;
}
.profile__role { font-family: var(--serif); font-size: 1.25rem; color: var(--brass); margin: .9rem 0 1.4rem; }
/* Beschriftete Angaben (Schwerpunkte, Sprachen, Zulassung, Kontakt) */
.facts { margin: 2rem 0 0; }
.facts div {
  display: grid; gap: .1rem 1.5rem;
  border-top: 1px solid var(--line); padding: .8rem 0;
}
@media (min-width: 620px) { .facts div { grid-template-columns: 11rem 1fr; } }
.facts dt {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass); font-weight: 600;
}
.facts dd { margin: 0; color: var(--mute); }
.facts a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.facts a:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* ---------- 12  Handlungsaufruf-Kasten ---------- */
/* Abschluss unter Artikeln und Rechtsgebietsseiten. */
.cta {
  margin-top: 3.5rem; border: 1px solid var(--line); background: #fff;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.cta .eyebrow { margin-bottom: .8rem; }
.cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 24ch; }
.cta p { color: var(--mute); margin: .9rem 0 0; }
.cta__actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* === services === */
/* Ergaenzungen fuer die Festpreis-/Service-Seiten und die Rechtstexte.
   Alle Regeln sind ueber .page-service / .page-legal auf diese Seiten
   begrenzt, damit die uebrigen Seitentypen unveraendert bleiben. */

/* Lange Seitenueberschriften (Rechtstexte, Festpreis-Titel) brauchen eine
   ruhigere Schaugroesse als die Kurzform in .lede. */
.lede--long {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  max-width: 30ch;
}

/* Deutsche Komposita ("Rechtsdienstleistungen", "Berufshaftpflicht-
   versicherung") sprengen in der Schaugroesse sonst die 360-px-Spalte.
   Getrennt wird nur dort, wo es der schmale Satzspiegel verlangt — auf
   breiten Schirmen bricht die Zeile ganz normal am Wortende um. */
.page-service .lede, .page-legal .lede,
.page-service .article__body h2, .page-legal .article__body h2,
.page-service .article__body h3, .page-legal .article__body h3 {
  overflow-wrap: break-word;
}
@media (max-width: 700px) {
  .page-service .lede, .page-legal .lede,
  .page-service .article__body h2, .page-legal .article__body h2,
  .page-service .article__body h3, .page-legal .article__body h3 {
    hyphens: auto;
  }
}

/* Bilder der Alt-Seite sind teils nur 380 px breit; auf volle Spaltenbreite
   gezogen wuerden sie unscharf. Sie stehen daher hoechstens in Originalgroesse. */
.page-service .article__body figure { max-width: 100%; }
.page-service .article__body figure img { width: auto; max-width: 100%; }

/* Sprungmarken-Verweis als Knopf: die Unterlinie der Fliesstext-Verweise
   wuerde den Knopf durchschneiden. */
.page-service .article__body p.jump { margin: 1.8rem 0; }
.page-service .article__body .btn { border-bottom: 1px solid var(--ink); color: var(--paper); }
.page-service .article__body .btn:hover { color: var(--ink); }

/* Handlungsaufruf mitten im Text (dort, wo frueher ein Formular stand) */
.page-service .article__body .cta { margin: 3rem 0; max-width: 68ch; }
.page-service .article__body .cta h2 { margin: 0; padding-top: 0; border-top: 0; }
.page-service .article__body .cta p { margin: .9rem 0 0; }

/* Inhaltsverzeichnis der langen Rechtstexte in der Randspalte */
.toc ol {
  list-style: none; margin: 0; padding: 0;
  font-size: .92rem; line-height: 1.45;
}
.toc li { border-top: 1px solid var(--line); }
.toc li:last-child { border-bottom: 1px solid var(--line); }
.toc a {
  display: block; padding: .55rem 0; text-decoration: none; color: var(--mute);
}
.toc a:hover { color: var(--brass); }
@media (min-width: 1040px) {
  .page-legal .article__aside { max-height: calc(100vh - 4rem); overflow-y: auto; }
}

/* Rechtstexte: die Abschnittsueberschriften duerfen kleiner ausfallen als im
   Ratgeber — es sind Gliederungspunkte, keine Schauzeilen. */
.page-legal .article__body h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
/* Die Unterpunkte (1., 2., 3. …) heben sich durch die Grotesk vom Serifensatz
   des Fliesstextes ab — Versalien waeren bei Satzueberschriften zu laut. */
.page-legal .article__body h3 {
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .03em; margin: 2rem 0 .5rem;
}

/* Feldliste als Verzeichnis der Festpreisleistungen (Uebersichtsseite) */
.page-service .article__body ul.fields { padding-left: 0; max-width: 62ch; }
.page-service .article__body ul.fields li { list-style: none; margin-bottom: 0; }
.page-service .article__body ul.fields a { border-bottom: 0; }

/* Kein Bildschirm: Navigation, Fuss und Handlungsaufrufe sparen wir aus. */
@media print {
  .top, .foot, .cta, .related, .pager, .crumbs { display: none; }
  body { background: #fff; font-size: 11pt; }
  .axis::before, .axis > section::before { display: none; }
}

/* === kanzlei === */
/* Notariat, Kanzlei/Team, Kontakt, Jobs und die beiden Standortseiten.
   Nur Ergaenzungen — nichts oberhalb dieses Blocks wird veraendert. */

/* Grid-Kinder der neuen Raster duerfen den Container nicht aufblaehen */
.faq > div > *, .job > * { min-width: 0; }

/* Auftakt: Unterzeile der Buehne (Alt-Hero hatte Subline + Fliesstext) */
.hero__text { color: var(--mute); max-width: 58ch; margin-top: .9rem; }

/* Kachel mit Aufzaehlung — Notariat: Leistungsschwerpunkte */
.card ul { margin: .8rem 0 0; padding-left: 1.1rem; color: var(--mute); font-size: .95rem; }
.card ul li { margin-bottom: .35em; }
.card ul li::marker { color: var(--brass); }
.card ul a, .card p a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brass); }
.card ul a:hover, .card p a:hover { color: var(--brass); }
.card .callout { margin-top: 1.2rem; }

/* Fragen und Antworten: Zeilen auf der Linie, ab 1040 px zweispaltig —
   Frage links, Antwort rechts, damit die Mittelachse gewahrt bleibt.
   Kein Aufklappen, also kein JavaScript und nichts, was verborgen bleibt. */
.faq > div { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.faq > div:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
.faq p { color: var(--mute); margin: 0 0 .7em; max-width: 62ch; font-size: .98rem; }
.faq p:last-child { margin-bottom: 0; }
@media (min-width: 1040px) {
  .faq > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 4rem); }
  .faq h3 { margin-bottom: 0; }
}

/* Kanzleiteam: Portrait mit kurzem Text statt nur Funktionsbezeichnung */
.person .bio { color: var(--mute); font-size: .95rem; margin: .8rem 0 0; }
.person h3 a { text-decoration: none; }
.person h3 a:hover { color: var(--brass); }

/* Social-Media-Verweise — schlichte Textlinks, keine eingebetteten Widgets */
.social {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--mute);
}
.social a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.social a:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* Stellenanzeige: eine Linie oben als Anschlag, wie die Kacheln */
.job { border-top: 1px solid var(--ink); padding-top: 1.2rem; margin-top: 3.2rem; }
.job:first-child { margin-top: 0; }
.job > h3 { font-size: 1.35rem; margin-bottom: 1.4rem; }
.job__where {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin: 0 0 .6rem;
}
.job .article__body h4 { margin-top: 1.6rem; }

/* Standort-/Kontaktkarten: Schaltflaeche und Folgeverweis unter der Anschrift */
.place .btn { margin-top: .4rem; }
.place address + p { margin-top: 1.4rem; }

/* === rechtsgebiete === */
/* Ergaenzungen fuer die Uebersicht /rechtsgebiete/ und die 17 Rechtsgebiets-
   seiten. Nur Neues — bestehende Regeln bleiben unangetastet. */

/* Themenbild im Fliesstext. Unterschrift auf einer Linie darunter, wie die
   Bildunterschrift im Ratgeberartikel. */
.rg-figure { margin: 0 0 2.4rem; }
.rg-figure img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: saturate(.9) contrast(1.02); }
.rg-figure figcaption {
  font-size: .82rem; color: var(--mute);
  border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .8rem;
}
/* Kleine Quellbilder nicht hochziehen — sonst werden sie unscharf. */
.rg-figure--sm { max-width: 380px; }
.rg-figure--sm img { aspect-ratio: auto; }

/* Prosa: bisher sind nur h2/ul/li geregelt. Die Alt-Inhalte bringen zusaetzlich
   nummerierte Listen, Verweise, Stichworte und Zwischentitel mit. */
.prose ol { padding-left: 1.3rem; color: var(--mute); max-width: 62ch; }
.prose li::marker { color: var(--brass); }
.prose li strong, .prose p strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: none; border-bottom: 1px solid var(--brass); }
.prose a:hover { color: var(--brass); }
.prose h4 {
  font-family: var(--sans); font-size: .95rem; letter-spacing: .05em;
  text-transform: uppercase; margin: 2.2rem 0 .6rem;
}

/* Leistungsliste mit Beschreibung: die Feldliste, um Fliesstext ergaenzt. */
.rg-list { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.rg-list > li { border-top: 1px solid var(--line); padding: 1.15rem 0; margin: 0; }
.rg-list > li:last-child { border-bottom: 1px solid var(--line); }
.rg-list h3 { font-size: 1.14rem; margin: 0 0 .35rem; }
.rg-list p { color: var(--mute); font-size: .97rem; margin: 0; max-width: 62ch; }
@media (min-width: 900px) {
  .rg-list--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
  .rg-list--2 > li { min-width: 0; }
  /* In zwei Spalten trennt die obere Linie jede Zeile — die untere entfaellt. */
  .rg-list--2 > li:last-child { border-bottom: 0; }
}

/* Stichpunktliste ohne Aufzaehlungszeichen: die Linie oben ist der Anschlag,
   wie bei .fields. Die Haken-Symbole der Alt-Seite entfallen dadurch. */
.rg-checks { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.rg-checks > li {
  border-top: 1px solid var(--line); padding: .82rem 0; margin: 0;
  color: var(--mute); font-size: .98rem;
}
.rg-checks > li:last-child { border-bottom: 1px solid var(--line); }
.rg-checks strong { color: var(--ink); font-weight: 600; }

.rg-list a, .rg-checks a { text-decoration: none; border-bottom: 1px solid var(--brass); }
.rg-list a:hover, .rg-checks a:hover { color: var(--brass); }

/* Uebersichtsseite: Kachel je Rechtsgebiet, gleiche Form wie die Ratgeber-
   Kacheln, aber ohne Datum. */
.rg-grid { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 700px)  { .rg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rg-grid { grid-template-columns: repeat(3, 1fr); } }
.rg-grid > * { min-width: 0; }

/* === global: Umbruch langer Woerter/URLs (Ratgeber-Ausreisser bei 360px) === */
h1, h2, h3, .postlist h3 { overflow-wrap: break-word; }
@media (max-width: 700px) {
  h1, h2, h3, .postlist h3 { hyphens: auto; }
}
.article__body a { overflow-wrap: anywhere; }

/* === review-fixes (Design-Review 2026-08-24) === */
/* Kritisch: .article__body a uebersteuerte .btn -> Navy auf Navy (unlesbar) */
.article__body .btn { color: var(--paper); border-bottom: 1px solid var(--ink); }
.article__body .btn:hover { color: var(--ink); }
.article__body .btn--ghost { color: var(--ink); border-bottom: 1px solid var(--line); }
.article__body .btn--ghost:hover { border-bottom-color: var(--ink); }
/* Kontrast: Akzent-Kleinschrift (Eyebrows/Labels) auf >=5:1 abdunkeln */
:root { --brass-text: var(--accent-text); }
.eyebrow, .card__cat, .postlist__cat, .job__where { color: var(--brass-text); }

/* === rechtsgebietsseiten (T-1287) === */
/* Ein wiederverwendbares Layout-System fuer die Rechtsgebietsseiten. Die
   Dramaturgie ist auf jeder Seite dieselbe und folgt der Startseite:
     Auftakt → Einfuehrung → Leistungen → Kompetenzabschnitt (Navy) →
     Ansprechpartner → vertiefender Inhalt → Fragen → weitere Schwerpunkte →
     Kontakt (Navy)
   Gegliedert wird ueber die Baender der Startseite (.band--cream/--white/
   --navy); der Farbwechsel traegt die Kante, es gibt keine Trennlinien und
   keine Kaesten. Getragen wird die Seite von Typografie, Anschlagslinien und
   Ziffern — keine Sinnbilder, keine Rechtssymbole, keine Schatten.
   Die Seiten setzen body.rg und damit die Farbwelt der Startseite (Navy,
   Creme, Orange, Petrol). */

/* --- Auftakt --- */
/* Aufbau wie die Buehne der Startseite: der Satz steht links auf Papier, die
   Flaeche sitzt rechts und laeuft bis an den Bildschirmrand. Statt eines Fotos
   traegt sie ein ruhiges Lamellenmotiv — der Kunde wollte ausdruecklich kein
   Business-Stockfoto. Unter 1040 px entfaellt die Flaeche; dort bleibt der
   Auftakt reine Typografie. */
.rghero {
  position: relative; overflow: hidden;
  padding-block: 0; border-top: 0; background: var(--paper);
}
.rghero__inner { position: relative; z-index: 2; padding-block: clamp(2.8rem, 5vw, 4.6rem); }
.rghero__body { max-width: 40rem; }
.rghero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.14; }
.rghero__rule { width: 64px; height: 2px; background: var(--accent); border: 0; margin: 1.8rem 0 0; }
.rghero__lead {
  font-size: 1.16rem; line-height: 1.62; color: var(--ink-soft);
  margin-top: 1.7rem; max-width: 34rem;
}
.rghero__cta { display: flex; align-items: center; gap: 1.4rem 2rem; flex-wrap: wrap; margin-top: 2.3rem; }
.rghero__cta .btn { padding: .95rem 1.9rem; }
/* Die Flaeche: feine senkrechte Lamellen auf Navy, eine Fuge in Orange und
   ein Lichteinfall von rechts oben. Reines CSS — keine Bilddatei, kein
   externer Abruf, nichts nachzuladen. */
.rghero__art {
  display: none; background-color: var(--navy);
  background-image:
    linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 9%);
}
.rghero__art::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 46%;
  width: 2px; background: var(--cta); opacity: .85;
}
@media (min-width: 1040px) {
  .rghero__art { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 58%; z-index: 1; }
  .rghero__inner { min-height: 24rem; display: flex; align-items: center; }
  .rghero__body { max-width: 52%; }
}
@media (min-width: 1440px) { .rghero__art { left: 54%; } }

/* --- Einfuehrung --- */
/* Eine starke Ueberschrift und hoechstens zwei Absaetze — die langen Texte des
   Bestands stehen weiter unten im vertiefenden Abschnitt. */
.rg-intro h2 { max-width: 24ch; }
/* Der Abschnittskopf traegt hier keinen eigenen Abstand: die zwei Absaetze
   gehoeren zur Ueberschrift, sie stehen nicht als eigener Block darunter. */
.rg-intro .section-head { margin-bottom: 0; }
.rg-intro__text { margin: 1.8rem 0 0; max-width: 64ch; font-size: 1.06rem; color: var(--ink-soft); }
.rg-intro__text p { max-width: none; }
.rg-intro__text p:last-child { margin-bottom: 0; }

/* --- Leistungsbereiche --- */
/* Ein zweispaltiges Editorial-Raster statt Kacheln: Ziffer, Ueberschrift,
   zwei bis drei Saetze. Die Anschlagslinie oben haelt die Spalte, sonst gibt
   es keine Rahmen. */
.duties { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem) clamp(2.4rem, 5vw, 4.5rem); }
@media (min-width: 760px) { .duties { grid-template-columns: 1fr 1fr; } }
.duties > * { min-width: 0; }
.duties__item { border-top: 1px solid var(--ink); padding-top: 1.2rem; }
.duties__no {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1;
  letter-spacing: .14em; color: var(--accent-text);
  font-variant-numeric: tabular-nums; margin: 0 0 1rem;
}
.duties__item h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0 0 .6rem; }
.duties__item p { color: var(--mute); font-size: .97rem; margin: 0; max-width: 46ch; }
.duties__item a { text-decoration: none; border-bottom: 1px solid var(--line); }
.duties__item a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* --- Kompetenzabschnitt --- */
/* Der dunkle Gegenpol in der Mitte der Seite: eine grosse Serifenzeile in
   Weiss, darunter ein kurzer Text. Die Petrol-Linie ist der zweite Ton der
   Farbwelt und der einzige Zierrat des Abschnitts. */
.credo { max-width: 54rem; }
.credo h2 { color: #fff; max-width: 22ch; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.credo__rule { width: 64px; height: 2px; background: var(--teal); border: 0; margin: 1.9rem 0 0; }
.credo__text { color: rgba(246, 243, 238, .78); font-size: 1.08rem; margin: 1.8rem 0 0; max-width: 56ch; }

/* --- Ansprechpartner --- */
/* Die Portraits der Startseite, unveraendert (.people): gleicher Beschnitt,
   Schwarzweiss im Ruhezustand, Farbe beim Ueberfahren. Steht auf einer Seite
   nur ein Berufstraeger, fuellt eine kurze Notiz die freien Spalten — sonst
   stuende die Reihe zur Haelfte leer. */
.people__note { align-self: center; }
.people__note p { color: var(--ink-soft); font-size: 1.02rem; max-width: 46ch; margin: 0; }
.people__note a { text-decoration: none; border-bottom: 1px solid var(--line); }
.people__note a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
@media (min-width: 700px) {
  .people__note { max-width: none; }
  .people__note--wide { grid-column: span 2; }
}

/* --- Vertiefender Inhalt --- */
/* Die ausfuehrlichen Texte des Bestands: links der Abschnittskopf, der beim
   Blaettern stehen bleibt, rechts die Kapitel. Kurze Absaetze, klare H2/H3 —
   keine Textwand. */
.rg-deep { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1040px) {
  .rg-deep { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .rg-deep__head { position: sticky; top: 2rem; align-self: start; margin-bottom: 0; }
  /* In der schmalen Spalte waere die Schaugroesse der uebrigen Abschnitts-
     koepfe zu gross — sie zerfiele in vier Zeilen. */
  .rg-deep__head h2 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); max-width: none; }
}
.rg-deep > * { min-width: 0; }
.rg-deep__body { max-width: 68ch; }
.rg-deep__body > *:first-child { margin-top: 0; }
.rg-deep__body h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  margin: 2.8rem 0 .8rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.rg-deep__body h3 { font-size: 1.18rem; margin: 2rem 0 .5rem; }
.rg-deep__body p { margin: 0 0 1.1em; color: var(--ink-soft); }
.rg-deep__body a { text-decoration: none; border-bottom: 1px solid var(--line); }
.rg-deep__body a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.rg-deep__body strong { font-weight: 600; }
/* Die uebernommenen Bausteine des Bestands (Leistungszeilen, Fristkasten)
   behalten ihren eigenen Satz — die Kapitelregeln oben duerfen ihn nicht
   uebersteuern (gleiche Spezifitaet, spaetere Regel gewinnt). */
.rg-deep__body .rg-list h3 { font-size: 1.14rem; margin: 0 0 .35rem; }
.rg-deep__body .rg-list p { color: var(--mute); font-size: .97rem; margin: 0; }
.rg-deep__body .rg-list a { border-bottom-color: var(--accent); }
.rg-deep__body .callout { margin: 2.6rem 0; }
.rg-deep__body .callout h3 { font-size: .95rem; margin: 0 0 .7rem; }
.rg-deep__body .callout p { color: var(--mute); font-size: .98rem; }
.rg-deep__body .callout .btn { border-bottom: 0; color: var(--paper); }
.rg-deep__body .callout .btn:hover { color: var(--ink); }

/* --- Weitere Beratungsschwerpunkte --- */
/* Hoechstens drei verwandte Rechtsgebiete, als Zeilen an der Anschlagslinie.
   Der Pfeil steht im Petrol — der Abschnitt fuehrt weiter, er ruft nicht. */
.further { display: grid; gap: clamp(1.8rem, 3.5vw, 2.8rem); }
@media (min-width: 760px) { .further { grid-template-columns: repeat(3, 1fr); } }
.further > * { min-width: 0; }
.further__item { border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.further__item h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); margin: 0 0 .5rem; }
.further__item h3 a { text-decoration: none; }
.further__item h3 a::after {
  content: "\00a0→"; display: inline-block; font-size: .78em;
  color: var(--teal); transition: transform .16s ease;
}
.further__item h3 a:hover { color: var(--teal); }
.further__item h3 a:hover::after { transform: translateX(4px); }
.further__item p { color: var(--mute); font-size: .95rem; margin: 0; max-width: 40ch; }

/* Die Fragen nutzen den bestehenden .faq-Baustein (Zeilen auf der Linie,
   ab 1040 px Frage links / Antwort rechts). Auf den Rechtsgebietsseiten
   liegen sie auf Weiss, deshalb nur der Feinschliff der Schriftgroesse. */
.band .faq > div:first-child { border-top-color: var(--ink); }
.band .faq h3 { font-size: clamp(1.1rem, 1.5vw, 1.25rem); }

/* === notariat (T-1288) === */
/* Die Notariatsseite folgt der Dramaturgie der Startseite und dem
   Layout-System der Rechtsgebietsseiten (T-1287): Baender statt Trennlinien,
   Ziffern und feine Anschlagslinien statt Kaesten, keine Schatten, keine
   Sinnbilder. Gegliedert wird ueber den Farbwechsel
     Auftakt (Creme) → Einordnung (Weiss) → Leistungen (Creme) →
     Notar-Formulare (Petrol) → notarielle Taetigkeit (Navy) →
     Notarin und Amtssitz (Weiss) → Fragen (Creme) → Kontakt (Navy)
   Die Seite setzt body.notariat und traegt damit die Farbwelt der Startseite.
   Petrol ist der Ton des Notariats und traegt hier ein eigenes Band. */

/* --- Auftakt mit Portrait --- */
/* Der Auftakt folgt seit T-1289 der Buehne der Startseite: das Portrait der
   Notarin laeuft rechts bis an den Bildschirmrand, der Satz steht links auf
   ruhigem Papier. Das Bild zeigt den Empfang der Kanzlei mit dem Monogramm an
   der Wand; es blendet nach links und nach unten weich ins Papier aus, damit
   keine rechteckige Bildkante entsteht. Unter 1040 px wird daraus ein Bildband
   ueber dem Text — nebeneinander liefe der Satz sonst ins Bild. */
.rghero h1 em { font-style: italic; color: var(--accent); }
/* Einspaltig steht das Bild ungeschnitten ueber dem Satz und in der Breite
   begrenzt — ueber die volle Breite bliebe von der Aufnahme nur ein
   Brustausschnitt uebrig. */
.rghero__portrait { position: relative; margin: 0 auto; max-width: 470px; padding-top: clamp(1.4rem, 4vw, 2.4rem); }
.rghero__portrait img {
  display: block; width: 100%; height: auto;
  /* Kein rechteckiger Bildkasten: die Aufnahme loest sich an allen Kanten ins
     Papier auf. Die beiden Verlaeufe werden dafuer verschnitten. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
@media (min-width: 1040px) {
  .rghero--portrait .rghero__portrait {
    position: absolute; top: 0; right: 0; bottom: 0; left: 54%; z-index: 1;
    max-width: none; padding-top: 0;
  }
  .rghero--portrait .rghero__portrait img {
    height: 100%; object-fit: cover; object-position: 58% 8%;
    /* Zwei Verlaeufe: links ins Papier, unten in den Grund des naechsten
       Bandes. Sie werden verschnitten, damit beide Kanten weich bleiben. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 22%),
      linear-gradient(to bottom, transparent 0, #000 7%, #000 66%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 22%),
      linear-gradient(to bottom, transparent 0, #000 7%, #000 66%, transparent 97%);
    mask-composite: intersect;
  }
  /* Der Verlauf zieht den Uebergang noch etwas nach rechts, damit die
     Schauzeile auf freiem Papier steht. */
  .rghero--portrait .rghero__portrait::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right,
      var(--paper) 0%, rgba(246, 243, 238, .58) 16%, rgba(246, 243, 238, 0) 38%);
  }
  /* Der Auftakt waechst mit der Fensterbreite mit: sonst bliebe von der
     Aufnahme bei breiten Fenstern nur ein Brustausschnitt. */
  .rghero--portrait .rghero__inner { min-height: clamp(30rem, 37vw, 38rem); display: flex; align-items: center; }
  .rghero--portrait .rghero__body { max-width: 46%; }
}
@media (min-width: 1440px) { .rghero--portrait .rghero__portrait { left: 52%; } }

/* --- Leistungsbereiche mit Schaugroesse --- */
/* Sechs Bereiche als 2x3-Raster (T-1288): grosse Ziffer in der Serifenschrift,
   Ueberschrift mit Verweis auf die jeweilige Notariats-Unterseite, darunter
   die Themen als leise Zeile. Die Ziffer steht bewusst im ruhigen Grau — das
   Orange traegt allein der Pfeil hinter der Ueberschrift. */
.duties--display { row-gap: clamp(2.8rem, 5.5vw, 4.4rem); }
.duties--display .duties__no {
  font-size: clamp(2.6rem, 4.6vw, 3.9rem); line-height: .85; letter-spacing: -.02em;
  color: var(--mute); margin: 0 0 1rem;
}
.duties--display .duties__item h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin: 0 0 .6rem; }
.duties--display .duties__item h3 a { text-decoration: none; border-bottom: 0; }
.duties--display .duties__item h3 a::after {
  content: "\00a0→"; display: inline-block; font-size: .72em;
  color: var(--accent); transition: transform .16s ease;
}
.duties--display .duties__item h3 a:hover { color: var(--accent-text); border-bottom: 0; }
.duties--display .duties__item h3 a:hover::after { transform: translateX(4px); }

/* --- Petrolband: Notar-Formulare --- */
/* Der zweite Ton der Farbwelt bekommt ein eigenes Band. Auf Petrol traegt das
   Orange zu wenig Kontrast (2:1) — Eyebrow, Satz und Verweis stehen deshalb in
   den hellen Abstufungen des Papiertons. */
.band--teal { background: var(--teal); color: #fff; }
.band--teal .eyebrow { color: rgba(246, 243, 238, .88); }
.band--teal h2 { color: #fff; }
.band--teal .credo__rule { background: rgba(246, 243, 238, .6); }
.band--teal .credo__text { color: rgba(246, 243, 238, .86); }
.band--teal .more { color: #fff; }
.band--teal .more:hover { color: rgba(246, 243, 238, .78); }
.credo__cta { margin: 2.2rem 0 0; }

/* --- Notarin und Amtssitz --- */
/* Kompakt gehalten: links die Zeile des Abschnitts, rechts Name, Amt und
   Amtssitz an einer Anschlagslinie. Bewusst ohne zweites Portrait — die
   Notarin steht bereits im Auftakt. */
.notarin { display: grid; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
@media (min-width: 900px) {
  .notarin { grid-template-columns: 1.05fr .95fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .notarin .section-head { margin-bottom: 0; }
}
.notarin > * { min-width: 0; }
.notarin__card { border-top: 1px solid var(--ink); padding-top: 1.3rem; }
.notarin__card h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); margin: 0 0 .4rem; }
.notarin__card h3 a { text-decoration: none; }
.notarin__card h3 a:hover { color: var(--accent-text); }
.notarin__role { color: var(--ink-soft); font-size: 1rem; margin: 0 0 1.6rem; }
.notarin__seat {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--teal); margin: 0 0 .6rem;
}
.notarin__card address { font-style: normal; line-height: 1.85; color: var(--ink-soft); }
.notarin__card address a { text-decoration: none; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.notarin__card address a:hover { border-bottom-color: var(--accent); }

/* --- Abschluss mit zwei Einstiegen --- */
.closing__cta--pair { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Drei reduzierte Bereiche (notarielle Taetigkeit) --- */
/* Nur Anschlagslinie, Ueberschrift und zwei Saetze — der Abschnitt lebt vom
   dunklen Grund und der grossen Serifenzeile darueber. */
.trio { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); margin-top: clamp(2.6rem, 5vw, 4rem); }
@media (min-width: 820px) { .trio { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2.4rem, 4.5vw, 3.6rem); } }
.trio > * { min-width: 0; }
.trio__item { border-top: 1px solid rgba(246, 243, 238, .28); padding-top: 1.2rem; }
.trio__item h3 { color: #fff; font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin: 0 0 .7rem; }
.trio__item p { color: rgba(246, 243, 238, .72); font-size: .97rem; margin: 0; max-width: 42ch; }

/* Auf den dunklen Baendern braucht der Konturknopf die helle Schrift — das
   Navy von .btn--ghost (var(--ink)) waere auf Navy nicht lesbar. */
.band--navy .btn--ghost, .band--teal .btn--ghost {
  color: var(--paper); border-color: rgba(246, 243, 238, .45); background: transparent;
}
.band--navy .btn--ghost:hover, .band--teal .btn--ghost:hover {
  color: #fff; border-color: var(--paper); background: transparent;
}

/* === notariats-unterseiten (T-1290) === */
/* Ein gemeinsames System fuer die sechs Unterseiten des Notariats. Sie folgen
   der Hauptseite, bauen aber flacher: der Auftakt ist kompakter, danach traegt
   eine Sprungleiste die Orientierung. Dramaturgie auf allen sechs Seiten:
     Auftakt (Creme) → Auf dieser Seite (Creme) → Einordnung (Weiss) →
     Leistungen (Creme) → Ablauf (Navy) → Themen (Weiss) → Fragen (Creme) →
     weitere Themen (Weiss) → Notarin (Creme) → Kontakt (Navy)
   Gegliedert wird wie ueberall ueber den Farbwechsel der Baender; getragen
   wird die Seite von Typografie, Ziffern und feinen Linien. Keine Kaesten,
   keine Schatten, keine Sinnbilder. Die Seiten setzen body.notariat und tragen
   damit die Farbwelt der Startseite. */

/* --- Kompakter Auftakt --- */
/* Wie .rghero, aber ohne Flaeche rechts und niedriger: die Unterseite soll
   schnell zum Thema kommen, die Buehne gehoert der Hauptseite. */
.rghero--sub .rghero__inner { padding-block: clamp(2.6rem, 4.6vw, 4rem) 0; }
.rghero--sub .rghero__body { max-width: 44rem; }
.rghero--sub h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.rghero--sub .rghero__lead { max-width: 56ch; margin-top: 1.6rem; }
.rghero--sub .rghero__cta { margin-top: 2rem; }

/* --- Auf dieser Seite --- */
/* Eine Zeile, keine Kacheln: Beschriftung links, darunter bzw. daneben die
   Sprungziele als schlichte Textlinks an einer feinen Linie. */
.onpage { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.onpage__inner {
  display: grid; gap: .8rem 2.4rem;
  border-top: 1px solid var(--line); padding-top: 1.1rem;
}
@media (min-width: 820px) {
  .onpage__inner { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}
.onpage__label {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--mute); margin: 0;
}
.onpage__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.9rem;
}
.onpage__list a {
  text-decoration: none; font-size: .97rem; color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.onpage__list a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
/* Die Sprungziele brauchen etwas Luft ueber der Bandkante, sonst klebt die
   Ueberschrift nach dem Sprung am oberen Rand. */
.band[id] { scroll-margin-top: 1.4rem; }
.topic[id] { scroll-margin-top: 2rem; }

/* --- Zentrale Leistungen --- */
/* Eine grosse typografische Liste statt Karten: Ziffer, Bereich, ein Satz
   Erklaerung. Ab 820 px stehen die drei Teile nebeneinander, darunter
   untereinander. Gehalten wird die Liste allein von den Linien. */
.serve { border-top: 1px solid var(--ink); }
.serve__item {
  display: grid; gap: .5rem 2rem;
  padding-block: clamp(1.3rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .serve__item {
    grid-template-columns: 3.5rem minmax(0, 19rem) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 3.2vw, 3rem); align-items: baseline;
  }
}
.serve > * { min-width: 0; }
.serve__no {
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .12em;
  color: var(--accent-text); font-variant-numeric: tabular-nums; margin: 0;
}
.serve__item h3 { font-size: clamp(1.3rem, 2vw, 1.68rem); margin: 0; }
.serve__item p { color: var(--mute); font-size: .99rem; margin: 0; max-width: 54ch; }

/* --- Ablauf --- */
/* Der dunkle Gegenpol in der Seitenmitte: vier bis sechs Schritte, jeder an
   seiner Anschlagslinie. Keine Prozessgrafik, keine Pfeile, keine Farben —
   die Ziffern fuehren durch den Ablauf. */
.steps { display: grid; gap: clamp(2rem, 3.6vw, 3rem) clamp(2.2rem, 4vw, 3.4rem); }
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps > * { min-width: 0; }
.steps__item { border-top: 1px solid rgba(246, 243, 238, .28); padding-top: 1.1rem; }
.steps__no {
  font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: .9;
  color: rgba(246, 243, 238, .5); font-variant-numeric: tabular-nums; margin: 0 0 .8rem;
}
.steps__item h3 { color: #fff; font-size: clamp(1.12rem, 1.6vw, 1.32rem); margin: 0 0 .55rem; }
.steps__item p { color: rgba(246, 243, 238, .72); font-size: .96rem; margin: 0; max-width: 42ch; }

/* --- Themenabschnitte --- */
/* Zwei bis vier fachliche Abschnitte, jeder beantwortet eine Nutzerfrage:
   links die Frage als Ueberschrift, rechts kurze Absaetze. Ab 1040 px
   zweispaltig, damit die Zeilenlaenge lesbar bleibt. */
.topics { display: grid; gap: clamp(2.4rem, 4.4vw, 3.6rem); }
.topic {
  display: grid; gap: 1rem;
  padding-top: clamp(1.6rem, 3vw, 2.3rem); border-top: 1px solid var(--line);
}
.topic:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 1040px) {
  .topic {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.topic > * { min-width: 0; }
.topic h2 { font-size: clamp(1.35rem, 2.1vw, 1.8rem); max-width: 22ch; }
.topic__body { max-width: 66ch; }
.topic__body > *:first-child { margin-top: 0; }
.topic__body p { color: var(--ink-soft); margin: 0 0 1.05em; max-width: none; }
.topic__body p:last-child { margin-bottom: 0; }
.topic__body ul { margin: 0 0 1.05em; padding-left: 1.15rem; color: var(--ink-soft); }
.topic__body li { margin-bottom: .3em; }
.topic__body a { text-decoration: none; border-bottom: 1px solid var(--line); }
.topic__body a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* --- Persoenlicher Abschnitt: die Notarin --- */
/* Kein zweiter Teamblock: ein Portrait in ruhiger Groesse, daneben Name, Amt,
   zwei Saetze und der Termin-Verweis. */
.notarin.notarin--photo { align-items: center; }
@media (min-width: 820px) {
  .notarin.notarin--photo {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: clamp(2.2rem, 4.5vw, 4rem);
  }
}
.notarin__photo { margin: 0; max-width: 16rem; }
.notarin__photo img { width: 100%; height: auto; }
.notarin__text h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 24ch; margin: 0 0 1.3rem; }
.notarin__text .eyebrow { margin-bottom: .9rem; }
.notarin__name { font-size: 1.12rem; margin: 0 0 .2rem; }
.notarin__name a { text-decoration: none; border-bottom: 1px solid var(--line); }
.notarin__name a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.notarin__text .notarin__role { margin: 0 0 1.3rem; }
.notarin__text p { color: var(--ink-soft); max-width: 52ch; }
.notarin__cta { margin: 1.6rem 0 0; }

/* === deutschland-usa (T-1291) === */
/* Die Seite /internationales-recht/ folgt dem Layout-System der
   Rechtsgebietsseiten (T-1287): Baender statt Trennlinien, Ziffern und feine
   Anschlagslinien statt Kaesten, keine Sinnbilder. Gegliedert wird ueber den
   Farbwechsel
     Auftakt (Creme) → Positionierung (Weiss) → Leistungen (Creme) →
     Fuer Unternehmen (Navy) → Vertraege (Weiss) → Markteintritt (Creme) →
     Erbrecht (Weiss) → Berufstraeger (Creme) → Zusammenarbeit (Weiss) →
     Fragen (Creme) → weitere Schwerpunkte (Weiss) → Kontakt (Navy)
   Die Seite setzt body.rg und traegt damit die Orange-Petrol-Welt der
   Startseite. Internationalitaet wird ausschliesslich typografisch und ueber
   die Farbwelt vermittelt — keine Flagge, kein Wahrzeichen, kein Stockfoto. */

/* --- Auftakt: zwei Fugen, eine Verbindung --- */
/* Das Motiv des Rechtsgebiets-Auftakts, aber mit zwei senkrechten Fugen —
   Orange und Petrol — und einer feinen hellen Linie, die sie auf halber Hoehe
   verbindet. Reines CSS wie ueberall, kein externer Abruf. */
.rghero__art--duo {
  background-image:
    linear-gradient(rgba(246, 243, 238, .5), rgba(246, 243, 238, .5)),
    linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 9%);
  background-size: 38% 1px, auto, auto;
  /* Die Verbindungslinie soll genau von der orangen (28 %) zur petrolfarbenen
     Fuge (66 %) laufen. Bei background-size 38 % ergibt das die Position
     28 / (100 - 38) = 45,2 %. */
  background-position: 45.2% 52%, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
}
.rghero__art--duo::after { left: 28%; background: var(--cta); }
.rghero__art--duo::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 66%;
  width: 2px; background: var(--teal); opacity: .9;
}

/* --- Fuer Unternehmen: Satz links, Themen rechts --- */
/* Der dunkle Gegenpol der Seite. Links der Kompetenzabschnitt (.credo), rechts
   die Themen als reduzierte Liste an feinen Linien — keine Kacheln, keine
   Sinnbilder. */
.cross { display: grid; gap: clamp(2.2rem, 4.5vw, 3.4rem); align-items: start; }
@media (min-width: 900px) {
  .cross { grid-template-columns: 1.1fr .9fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.cross > * { min-width: 0; }
.cross .credo { max-width: none; }
.cross__list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid rgba(246, 243, 238, .28);
}
.cross__list li {
  padding: .85rem 0; border-bottom: 1px solid rgba(246, 243, 238, .16);
  color: rgba(246, 243, 238, .88); font-size: 1.02rem;
}

/* --- Vertragsthemen --- */
/* Begriff und ein Satz, an der Anschlagslinie. Bewusst kleiner gesetzt als die
   Leistungsbereiche: die Liste ordnet, sie ruft nicht. */
.aspects {
  display: grid; gap: clamp(1.6rem, 3vw, 2.3rem) clamp(2rem, 4vw, 3.2rem);
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
}
@media (min-width: 620px) { .aspects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .aspects { grid-template-columns: repeat(3, 1fr); } }
.aspects > * { min-width: 0; }
.aspects__item { border-top: 1px solid var(--line); padding-top: .9rem; }
.aspects__item h3 { font-size: 1.08rem; margin: 0 0 .35rem; }
.aspects__item p { color: var(--mute); font-size: .94rem; margin: 0; max-width: 42ch; }
.aspects__item a { text-decoration: none; border-bottom: 1px solid var(--line); }
.aspects__item a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* --- Ablauf auf hellem Grund --- */
/* Der Ablauf-Baustein der Notariats-Unterseiten (.steps) ist fuer dunkle
   Baender gesetzt. Auf Creme braucht er die dunklen Abstufungen. */
.steps--light { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.steps--light .steps__item { border-top-color: var(--ink); }
/* Schaugroesse und Abstand muessen hier mitgesetzt werden: .steps__item p ist
   spezifischer als .steps__no und gewinnt sonst gegen dessen Satz. */
.steps--light .steps__no {
  color: var(--mute); font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: .9; margin: 0 0 .8rem;
}
.steps--light .steps__item h3 { color: var(--ink); }
.steps--light .steps__item p { color: var(--mute); }
.steps--light .steps__item a { text-decoration: none; border-bottom: 1px solid var(--line); }
.steps--light .steps__item a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* Nachsatz unter einem Abschnitt: die Abgrenzung zur steuerlichen Beratung
   steht bewusst leise, nicht als Warnkasten. */
.note {
  margin: clamp(2rem, 3.5vw, 2.8rem) 0 0; max-width: 68ch;
  font-size: .94rem; color: var(--mute);
}

/* --- Zwei Berufstraeger --- */
/* Kein Teamblock mit drei gleichen Kacheln: zwei Portraits in ruhiger Groesse,
   daneben Name, Bezeichnung und der internationale Werdegang in zwei Saetzen.
   Die Aufnahmen stehen in Farbe — die Schwarzweiss-Regel der Startseite haengt
   an .people__item und greift hier nicht. */
.duo { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
@media (min-width: 880px) {
  .duo { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.duo > * { min-width: 0; }
.duo__item { display: grid; gap: 1.1rem 1.6rem; align-items: start; }
@media (min-width: 460px) {
  .duo__item { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); }
}
.duo__item > * { min-width: 0; }
.duo__photo { margin: 0; max-width: 10.5rem; }
.duo__text h3 { font-size: clamp(1.25rem, 1.9vw, 1.45rem); margin: 0 0 .35rem; }
.duo__text h3 a { text-decoration: none; }
.duo__text h3 a:hover { color: var(--accent-text); }
.duo__text p { color: var(--mute); font-size: .97rem; margin: 0; max-width: 44ch; }
/* Steht nach .duo__text p: die Berufsbezeichnung braucht Abstand zum Text und
   ihren eigenen Satz, sonst gewinnt die spezifischere Regel darueber. */
.duo__text .duo__role { color: var(--ink-soft); font-size: 1rem; margin: 0 0 1.1rem; }
.duo__text p a { text-decoration: none; border-bottom: 1px solid var(--line); }
.duo__text p a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* --- US-Visa & Immigration (T-1292) --- */
/* Der Abschnitt setzt sich vom Creme des Markteintritts darueber ueber einen
   waermeren, tieferen Sandton ab — die Kante entsteht wie ueberall aus dem
   Farbwechsel, nicht aus einer Linie. Komposition: links die Schauzeile in
   Serifenschrift, rechts die Themen als reine Typografie an feinen Linien.
   Bewusst weder Kacheln noch Sinnbilder; ein Motiv gibt es nicht (Flaggen,
   Reisepaesse und Flugzeuge sind ausdruecklich ausgeschlossen). */
.band--sand { background: #EFE7DA; }
.visa { display: grid; gap: clamp(2.4rem, 5vw, 3.4rem); align-items: start; }
@media (min-width: 900px) {
  .visa { grid-template-columns: 1.15fr .85fr; column-gap: clamp(2.8rem, 6vw, 5.5rem); }
}
.visa > * { min-width: 0; }
/* Groesser als die uebrigen H2 der Seite: der Abschnitt traegt keine Bilder,
   die Schauzeile ist sein Gesicht. */
.visa__body h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); max-width: 17ch; }
.visa__rule { width: 64px; height: 2px; background: var(--accent); border: 0; margin: 1.8rem 0 0; }
/* Der Fliesstext steht in einem eigenen Behaelter: eine Regel auf
   .visa__body p traefe auch die Eyebrow und den Weiterverweis mit. */
.visa__text { margin: 1.7rem 0 0; max-width: 52ch; color: var(--ink-soft); font-size: 1.06rem; }
.visa__text p { max-width: none; }
.visa__text p:last-child { margin-bottom: 0; }
.visa__cta { margin: 2.2rem 0 0; }
/* Die Rubrik der Themenliste steht leise: das Orange traegt bereits die
   Eyebrow des Abschnitts. */
.visa__label {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); font-weight: 600; margin: 0;
}
.visa__list {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  border-top: 1px solid var(--ink);
}
.visa__list li {
  padding: .9rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  line-height: 1.3;
}
/* Der siebte Leistungspunkt laeuft ueber beide Spalten: links die Leistung,
   rechts der berufsrechtliche Hinweis. Er steht leiser als die Leistung
   selbst — .duties__item p ist spezifischer und muss deshalb ueberboten
   werden. */
.duties__item--wide { grid-column: 1 / -1; }
.duties__cols { display: grid; gap: 1rem clamp(2.4rem, 5vw, 4.5rem); }
@media (min-width: 760px) { .duties__cols { grid-template-columns: 1fr 1fr; } }
.duties__cols > * { min-width: 0; }
.duties__item .duties__note { font-size: .88rem; }

/* Der Kopf eines Themenabschnitts darf eine Rubrik tragen — Ueberschrift und
   Eyebrow bleiben dabei ein Rasterkind, sonst zerfiele die zweite Spalte. */
.topic__head .eyebrow { margin-bottom: 1rem; }
.topic__head h2 { max-width: 22ch; }

/* Zwei Schauzeilen der Seite sind laenger als die uebrigen — bei den 20ch des
   Abschnittskopfs zerfielen sie in fuenf Zeilen bzw. brachen mitten im Wort
   „US-Markt" um. Bewusst auf body.rg begrenzt: auf der Startseite steht die
   Klasse ebenfalls im Markup, greift dort aber nicht. */
body.rg .section-head--left h2.section-head__wide,
body.kanzlei .section-head--left h2.section-head__wide,
body.berufstraeger .section-head--left h2.section-head__wide { max-width: 27ch; }

/* === kontaktseite (T-1293) === */
/* Die Kontaktseite folgt dem Layout-System der uebrigen neu gebauten Seiten:
   Baender statt Trennlinien, Ziffern und feine Anschlagslinien statt Kaesten,
   keine Sinnbilder, keine Schatten. Gegliedert wird ueber den Farbwechsel
     Auftakt (Creme) → Ihr Anliegen (Weiss) → Nachricht (Creme) →
     Standorte (Weiss) → Direkter Kontakt (Navy) → Fragen (Creme)
   Sie setzt body.kontakt und traegt damit die Orange-Petrol-Welt der
   Startseite. Bewusst kompakter als die Rechtsgebiets- und Notariatsseiten:
   der Besuch soll in einer Anfrage oder einem Anruf enden, nicht im Lesen. */

/* --- Auftakt --- */
/* Wie .rghero, aber ohne Flaeche rechts: statt eines Motivs tragen die beiden
   Einstiege den Auftakt. Der Satz darf deshalb die volle Breite nutzen. */
/* .rghero macht den Auftakt ab 1040 px zur Flex-Zeile, damit der Satz neben
   der Flaeche mittig steht. Hier gibt es keine Flaeche: Satz und Einstiege
   stehen untereinander, sonst rutschten die Einstiege daneben. */
.rghero--kontakt .rghero__inner { display: block; min-height: 0; }
.rghero--kontakt .rghero__body { max-width: 44rem; }
.rghero--kontakt .rghero__lead { max-width: 46ch; }

/* Die zwei primaeren Wege: Rechtsberatung und Notariat, jeweils als grosse
   Serifenzeile an einer Anschlagslinie mit Pfeil. Keine Kacheln — der
   Groessensprung und die Linie tragen den Einstieg. Petrol kennzeichnet wie
   ueberall auf der Website das Notariat. */
.paths { display: grid; gap: 0; margin-top: clamp(2.4rem, 4.5vw, 3.6rem); }
@media (min-width: 760px) {
  .paths { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.paths > * { min-width: 0; }
.paths__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  text-decoration: none; color: var(--ink);
  border-top: 1px solid var(--ink); padding: clamp(1rem, 2.2vw, 1.5rem) 0;
}
.paths__name { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
.paths__item::after {
  content: "→"; font-size: 1.15rem; color: var(--accent);
  transition: transform .16s ease;
}
.paths__item:hover { color: var(--accent-text); }
.paths__item:hover::after { transform: translateX(4px); }
.paths__item--teal::after { color: var(--teal); }
.paths__item--teal:hover { color: var(--teal); }

/* --- Ihr Anliegen --- */
/* Der Leistungsbaustein der Notariats-Unterseiten (.serve) traegt hier die
   drei Wege; er bekommt nur den Weiterverweis dazu. .serve__item p ist
   spezifischer als .more und muss deshalb ueberboten werden. */
.serve__item[id] { scroll-margin-top: 2rem; }
.serve__item > * { min-width: 0; }
.serve__item .serve__cta { margin: .9rem 0 0; font-size: .95rem; color: var(--ink); }
.serve__item .serve__cta .more { color: inherit; }
.serve__item .serve__cta .more:hover { color: var(--accent-text); }

/* --- Kontaktformular --- */
/* Weniger Formular-Aesthetik: keine Kaesten, keine Schatten, keine Radien —
   die Felder stehen auf feinen Linien wie die uebrigen Listen der Website.
   Die Beschriftung steht als Kleinschrift darueber, damit sie beim Ausfuellen
   sichtbar bleibt (ein Platzhalter allein verschwindet mit der Eingabe). */
.cform { margin-top: clamp(2.2rem, 4vw, 3.2rem); max-width: 54rem; }
.cform__grid { display: grid; gap: clamp(1.4rem, 2.8vw, 2.1rem) clamp(1.6rem, 3.5vw, 3rem); }
@media (min-width: 720px) { .cform__grid { grid-template-columns: 1fr 1fr; } }
.cform__grid > * { min-width: 0; }
/* Die Felder sind Absaetze — der Grundsatz von p (Abstand, 62ch) darf sie
   im Raster nicht mitnehmen. */
.cform__field { display: flex; flex-direction: column; gap: .4rem; margin: 0; max-width: none; }
.cform__wide { grid-column: 1 / -1; }
.cform__label {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--mute);
}
.cform__req { color: var(--accent-text); }
.cform input, .cform select, .cform textarea {
  font-family: inherit; font-size: 1.02rem; line-height: 1.6; color: var(--ink);
  width: 100%; min-height: 3rem; padding: .7rem 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; appearance: none; -webkit-appearance: none;
}
.cform textarea { min-height: 9rem; resize: vertical; }
.cform input:hover, .cform select:hover, .cform textarea:hover { border-bottom-color: var(--ink-soft); }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 4px; border-bottom-color: var(--accent);
}
/* appearance:none nimmt dem Auswahlfeld seinen Pfeil — er wird hier gezeichnet,
   damit keine Bilddatei und kein externer Abruf noetig ist. */
.cform__field--select { position: relative; }
.cform__field--select::after {
  content: ""; position: absolute; right: .35rem; bottom: 1.35rem;
  width: .5rem; height: .5rem; pointer-events: none;
  border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg);
}
.cform select { padding-right: 1.8rem; }
.cform__check { display: flex; align-items: flex-start; gap: .75rem; grid-column: 1 / -1; }
.cform__check input {
  width: 1.15rem; height: 1.15rem; min-height: 0; flex: 0 0 auto;
  margin: .4rem 0 0; padding: 0; border-bottom: 0;
  appearance: auto; -webkit-appearance: checkbox; accent-color: var(--accent);
}
.cform__check span { font-size: .98rem; color: var(--ink-soft); }
.cform__actions {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  gap: .9rem 1.8rem; margin-top: .4rem;
}
.cform__actions .btn { padding: .95rem 1.9rem; }
.cform__hint { margin: 0; font-size: .88rem; color: var(--mute); max-width: 38ch; }
/* Rueckmeldung nach dem Absenden — eine Zeile, kein Kasten. */
.cform__status { grid-column: 1 / -1; margin: 0; font-size: .95rem; color: var(--accent-text); }
.cform__status:empty { display: none; }
/* Der Hinweis zur Mandatsanfrage steht bewusst leise unter dem Formular:
   eine Haarlinie, Kleinschrift, kein Warnkasten. */
.cform__note {
  grid-column: 1 / -1; margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 0;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--mute); max-width: 72ch;
}
.cform__note a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.cform__note a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* --- Standorte --- */
/* Die Standortreihe der Startseite (.locs/.loc), ergaenzt um die beiden
   Weiterverweise und ein ruhiges Motiv. Das Bild steht am Fuss der Spalte,
   nicht darueber: auf dem Telefon sollen Anschrift und Rufnummer zuerst
   kommen. Beide Motive schliessen unten buendig ab. */
.loc--art { display: flex; flex-direction: column; }
.loc__cta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem;
  margin: clamp(1.2rem, 2.4vw, 1.7rem) 0 0;
}
.loc__art { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; }
@media (min-width: 760px) { .loc--art .loc__art { margin-top: auto; padding-top: clamp(1.6rem, 3vw, 2.4rem); } }
.loc__art img {
  display: block; width: 100%; height: clamp(150px, 19vw, 210px); object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  /* Keine harte Bildkante: das Motiv loest sich an allen Seiten in den Grund
     des Bandes auf — dieselbe Handschrift wie auf Start- und Notariatsseite. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 74%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 74%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}

/* --- Direkter Kontakt (Navy) --- */
/* Reduziert auf das Noetigste: zwei Spalten an feinen Linien, links die
   Rechtsberatung, rechts das Notariat. Unter „Notariat" steht ausschliesslich
   Ahrensburg — die notarielle Amtstaetigkeit besteht nur dort. */
.direct { display: grid; gap: clamp(2.2rem, 4.5vw, 3.4rem); margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
@media (min-width: 760px) {
  .direct { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
}
.direct > * { min-width: 0; }
.direct__col { border-top: 1px solid rgba(246, 243, 238, .28); padding-top: 1.2rem; }
.direct__label {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: rgba(246, 243, 238, .58); margin: 0 0 1.2rem;
}
.direct__list { list-style: none; margin: 0; padding: 0; }
.direct__list li { display: grid; gap: .1rem .9rem; padding: .5rem 0; }
@media (min-width: 420px) {
  .direct__list li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); align-items: baseline; }
}
.direct__list > li > * { min-width: 0; }
.direct__where { color: rgba(246, 243, 238, .58); font-size: .93rem; }
.direct__list a {
  /* justify-self: sonst zoege der Rasterplatz die Unterlaenge des Verweises
     bis an den Spaltenrand, weit hinter die Rufnummer. */
  justify-self: start;
  text-decoration: none; color: #fff; font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(246, 243, 238, .28);
}
.direct__list a:hover { color: var(--cta); border-bottom-color: var(--cta); }

/* === kanzleiseite (T-1294) === */
/* Die Kanzleiseite folgt dem Layout-System der uebrigen neu gebauten Seiten:
   Baender statt Trennlinien, Ziffern und feine Anschlagslinien statt Kaesten,
   keine Sinnbilder, keine Schatten. Gegliedert wird ueber den Farbwechsel
     Auftakt (Creme) → Positionierung (Weiss) → drei Bereiche (Creme) →
     Arbeitsweise (Navy) → Team (Weiss) → International (Creme) →
     Standorte (Weiss) → Karriere (Creme) → Kontakt (Navy)
   Sie setzt body.kanzlei und traegt damit die Orange-Petrol-Welt der
   Startseite. Fast alle Bausteine sind uebernommen (.rghero, .rg-intro,
   .prio, .steps, .people, .locs, .closing); neu sind nur der Bildauftakt,
   die vierspaltige Arbeitsweise und der internationale Abschnitt. */

/* --- Auftakt mit Kanzleimotiv --- */
/* Wie die Buehne der Startseite: der Satz steht links auf Papier, die Aufnahme
   sitzt rechts und laeuft bis an den Bildschirmrand. Das Motiv ist die eigene
   Kanzlei (Sitzecke am Standort Hamburg) — kein Stockfoto, kein generischer
   Besprechungsraum. Unter 1040 px wird daraus ein Bildband ueber dem Text. */
.rghero__scene { position: relative; margin: 0; padding-top: clamp(1.4rem, 4vw, 2.4rem); }
.rghero__scene img {
  display: block; width: 100%; height: clamp(190px, 34vw, 320px); object-fit: cover;
  object-position: center 42%;
  /* Keine harte Bildkante: die Aufnahme loest sich an allen Seiten ins Papier
     auf — dieselbe Handschrift wie auf Start-, Notariats- und Kontaktseite. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
/* Denselben Bildauftakt traegt seit T-1299 die Jobs-Seite (.rghero--jobs) —
   dort mit einem anderen Ausschnitt derselben Kanzleiaufnahme. */
@media (min-width: 1040px) {
  .rghero--kanzlei .rghero__scene,
  .rghero--jobs .rghero__scene {
    position: absolute; top: 0; right: 0; bottom: 0; left: 55%; z-index: 1;
    padding-top: 0;
  }
  .rghero--kanzlei .rghero__scene img,
  .rghero--jobs .rghero__scene img {
    height: 100%;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 26%),
      linear-gradient(to bottom, transparent 0, #000 8%, #000 70%, transparent 98%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 26%),
      linear-gradient(to bottom, transparent 0, #000 8%, #000 70%, transparent 98%);
    mask-composite: intersect;
  }
  /* Der Verlauf zieht den Uebergang noch etwas nach rechts, damit die
     Schauzeile auf freiem Papier steht. */
  .rghero--kanzlei .rghero__scene::after,
  .rghero--jobs .rghero__scene::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right,
      var(--paper) 0%, rgba(246, 243, 238, .6) 18%, rgba(246, 243, 238, 0) 42%);
  }
  .rghero--kanzlei .rghero__inner,
  .rghero--jobs .rghero__inner { min-height: clamp(26rem, 30vw, 32rem); display: flex; align-items: center; }
  /* Die Schauzeile soll zweizeilig stehen wie auf der Startseite — bei der
     vollen Schaugroesse zerfiele „Unternehmerisch gedacht." in zwei Zeilen. */
  .rghero--kanzlei h1, .rghero--jobs h1 { font-size: clamp(2.2rem, 3.6vw, 3rem); }
  .rghero--kanzlei .rghero__body,
  .rghero--jobs .rghero__body { max-width: 53%; }
}
@media (min-width: 1440px) {
  .rghero--kanzlei .rghero__scene,
  .rghero--jobs .rghero__scene { left: 53%; }
}
/* Der einzige Verweis im Auftakt fuehrt nach unten zum Team — kein zweiter
   Handlungsaufruf neben dem Terminknopf der Kopfleiste. */
.rghero__jump { margin: clamp(2rem, 4vw, 2.8rem) 0 0; }
.more--down::after { content: "↓"; }
.more--down:hover::after { transform: translateY(3px); }

/* --- Arbeitsweise: vier Prinzipien --- */
/* Der Ablauf-Baustein (.steps) traegt hier vier gleichwertige Prinzipien.
   Ab 1040 px stehen sie in einer Reihe — als 3 + 1 wirkte das vierte
   abgehaengt. */
@media (min-width: 1040px) { .steps--four { grid-template-columns: repeat(4, 1fr); } }
/* Schaugroesse und Abstand muessen hier mitgesetzt werden: .steps__item p ist
   spezifischer als .steps__no und gewinnt sonst gegen dessen Satz. */
.steps--four .steps__no {
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: .9; margin: 0 0 .8rem;
}

/* --- Internationale Ausrichtung --- */
/* Links der Satz, rechts die belegten Qualifikationen als reduzierte Liste.
   Kein Motiv: Flagge, Wahrzeichen und Skyline sind ausgeschlossen, die
   Internationalitaet traegt die Typografie. */
.intl { display: grid; gap: clamp(2.4rem, 5vw, 3.4rem); align-items: start; }
@media (min-width: 900px) {
  .intl { grid-template-columns: 1.15fr .85fr; column-gap: clamp(2.8rem, 6vw, 5.5rem); }
}
.intl > * { min-width: 0; }
.intl__body h2 { max-width: 18ch; }
.intl__rule { width: 64px; height: 2px; background: var(--accent); border: 0; margin: 1.8rem 0 0; }
/* Der Fliesstext steht in einem eigenen Behaelter: eine Regel auf .intl__body p
   traefe auch die Eyebrow und den Weiterverweis mit. */
.intl__text { margin: 1.7rem 0 0; max-width: 52ch; color: var(--ink-soft); font-size: 1.06rem; }
.intl__text p { max-width: none; }
.intl__text p:last-child { margin-bottom: 0; }
.intl__cta { margin: 2.2rem 0 0; }
.intl__label {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); font-weight: 600; margin: 0;
}
.intl__list { list-style: none; margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.intl__list li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.intl__name {
  display: block; font-family: var(--serif);
  font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.3;
}
.intl__name a { text-decoration: none; }
.intl__name a:hover { color: var(--accent-text); }
.intl__qual { display: block; color: var(--mute); font-size: .93rem; margin-top: .15rem; }

/* --- Kanzleiteam und Karriere --- */
/* Zweiter, bewusst leiserer Teamabschnitt (T-1298): ueber ihm stehen die drei
   Berufstraeger mit Portrait, das Kanzleiteam traegt allein die Typografie.
   Fuer Katrin Gross und Neele Waitschulies liegen keine professionellen
   Aufnahmen vor — erfundene Portraits sind ausgeschlossen, Platzhalter-
   Silhouetten ebenso. Weil damit nicht alle vier Mitarbeiterinnen einheitlich
   abgebildet werden koennten, bleibt der Abschnitt rein typografisch
   (Vorgabe T-1310). Deshalb Name, Funktion und ein Satz an einer
   Anschlagslinie wie bei den Schwerpunkten der Startseite: keine Kachel,
   kein Rand, kein Sinnbild. Der Abstand nach oben ist gross genug, dass der
   Abschnitt als eigener Teil der Seite liest und nicht als Fussnote. */
/* Die Haarlinie trennt die beiden Ebenen des Teams sichtbar, ohne ein zweites
   Band aufzumachen — das naechste Band (International) ist bereits Creme. */
.crew {
  margin-top: clamp(3.2rem, 5.5vw, 4.6rem);
  padding-top: clamp(2.8rem, 5vw, 4rem);
  border-top: var(--axis) solid var(--line);
}
.crew__head { margin-bottom: clamp(1.9rem, 3.5vw, 2.6rem); }
/* Kleiner als die Schauzeile der Berufstraeger: das Kanzleiteam soll mit den
   Anwaltsprofilen nicht konkurrieren. */
.crew__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 24ch; }
.crew__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 2.8rem); align-items: start; }
/* Zwei gleich breite Spalten, zwei Reihen. Der Reihenabstand ist deutlich
   groesser als der Spaltenabstand, damit die beiden Reihen als getrennte
   Ebenen lesen und die Anschlagslinien nicht zu einem Raster verschmelzen. */
@media (min-width: 760px) {
  .crew__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.4rem, 5vw, 4rem);
    row-gap: clamp(3.2rem, 6vw, 4.8rem);
  }
}
.crew__item { border-top: 1px solid var(--ink); padding-top: 1.2rem; }
/* Drei Ebenen je Person (T-1310): Name gross und ruhig in der Serifenschrift
   im Navy — orange Namen sind als dominantes Gestaltungselement ausdruecklich
   ausgeschlossen. Die Funktion traegt darunter den Akzent, der Satz steht im
   dunklen Grau des Fliesstextes. Alle vier Felder sind dabei gleich gesetzt;
   die Funktion entscheidet ueber die Wertigkeit nicht mit. */
.crew__name { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; color: var(--ink); margin: 0; }
/* Kleinschrift im Orange (4,7:1 auf Weiss). Petrol kennzeichnet auf dieser
   Website das Notariat — als Farbe aller vier Funktionszeilen waere es
   irrefuehrend, obwohl das Ticket beide Toene freistellt. */
.crew__role { margin: .55rem 0 0; color: var(--accent-text); font-size: .92rem; line-height: 1.5; }
.crew__text { margin: 1.05rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; max-width: 42ch; }
/* Der Karriereabschnitt bleibt kompakt: Satz, Verweis, darunter die beiden
   Profile als schlichte Textlinks. */
.career__text { margin: 1.4rem 0 0; max-width: 56ch; color: var(--ink-soft); font-size: 1.06rem; }
.career__cta { margin: 1.8rem 0 0; }
.career .social { margin-top: clamp(2rem, 3.5vw, 2.6rem); }
/* Der Umbruch der Team-Schauzeile ist fuer breite Fenster gesetzt (Vorgabe des
   Kunden). Auf dem Telefon bricht der Satz von selbst — „beginnt" stuende dort
   sonst allein in einer Zeile. Das Leerzeichen hinter dem <br> im Markup traegt
   die Wortgrenze; am Zeilenanfang zeigt es der Browser nicht an. */
@media (max-width: 699px) { body.kanzlei #team .section-head h2 br { display: none; } }

/* === wissensbereich (T-1295) === */
/* Aus dem Kanzlei-Blog wird ein redaktionelles Journal: Typografie traegt die
   Seite, nicht Kacheln. Keine Schatten, keine Radien, keine Stockfotos —
   Rubrik, Ueberschrift, Anreisser, Datum. Die Baender der Startseite
   (band--cream/--white/--navy) gliedern; die Kante entsteht aus dem
   Farbwechsel. Kopfleiste und Fuss bleiben unberuehrt. */

/* --- Auftakt der Journalseiten --- */
.jhero { padding-block: clamp(3.2rem, 6vw, 5rem) 0; }
.jhero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 16ch; }
.jhero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.62;
  color: var(--ink-soft); margin: 1.5rem 0 0; max-width: 46ch;
}
.jhero__back { margin: 1.4rem 0 0; }
/* Schlagwortarchive stehen eine Stufe leiser als der Wissensbereich selbst. */
.jhero--sub h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }

/* --- Themenleiste --- */
/* Reine Textnavigation an einer Haarlinie, kein Reiterwerk: die aktive Rubrik
   traegt die Akzentfarbe und eine Unterkante. Auf schmalen Geraeten laeuft
   die Leiste seitlich weiter, statt in viele Zeilen zu zerfallen. */
.jtopics {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1.2rem, 2.4vw, 2.2rem);
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
  border-top: 1px solid var(--line);
  padding-block: 1rem clamp(2.2rem, 4vw, 3rem);
}
.jtopics a {
  text-decoration: none; padding: .5rem 0;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--mute);
  border-bottom: 2px solid transparent;
}
.jtopics a:hover { color: var(--ink); }
.jtopics a[aria-current] { color: var(--accent-text); border-bottom-color: var(--accent); }
@media (max-width: 639px) {
  .jtopics {
    flex-wrap: nowrap; overflow-x: auto; gap: 0 1.4rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .jtopics::-webkit-scrollbar { display: none; }
  .jtopics a { white-space: nowrap; }
  /* Der weiche Rand rechts zeigt an, dass die Leiste weiterlaeuft. */
  .jtopics {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}

/* --- Hervorgehobener Beitrag --- */
.feature { padding-block: clamp(2.6rem, 4.5vw, 3.6rem) clamp(3rem, 5.5vw, 4.6rem); }
.feature__inner { border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.feature__cat, .jitem__cat, .readon__cat {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-text); margin: 0 0 1rem;
}
.feature h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 20ch; }
.feature h2 a { text-decoration: none; }
.feature h2 a:hover { color: var(--accent-text); }
.feature__lead {
  font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.65;
  color: var(--ink-soft); margin: 1.2rem 0 0; max-width: 54ch;
}
.feature__meta {
  font-size: .84rem; color: var(--mute); font-variant-numeric: tabular-nums;
  margin: 1.2rem 0 1.4rem;
}

/* --- Editorial-Raster --- */
.jgrid { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); }
@media (min-width: 700px)  { .jgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .jgrid { grid-template-columns: repeat(3, 1fr); } }
.jgrid > * { min-width: 0; }
.jitem {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line); padding-top: 1.1rem;
}
.jitem h3 { font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.28; margin: 0 0 .7rem; }
.jitem h3 a { text-decoration: none; }
.jitem h3 a:hover { color: var(--accent-text); }
.jitem p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; }
.jitem__date {
  margin-top: auto; padding-top: .4rem;
  font-size: .8rem; color: var(--mute); font-variant-numeric: tabular-nums;
}
.jitem .more { margin-top: .7rem; font-size: .88rem; }

/* --- Blaetterung im Band --- */
.jgrid + .pager { margin-top: clamp(2.6rem, 5vw, 3.6rem); }

/* --- Artikelkopf --- */
.arthead { padding-block: clamp(3rem, 5.4vw, 4.6rem) clamp(2.4rem, 4.4vw, 3.6rem); }
/* Kopf und Lesespalte stehen auf derselben Breite — der Satz springt
   beim Uebergang nicht seitlich weg. Seit T-1303 rund 780 px: der Auftakt
   stand sonst als schmale Saeule in einer sehr grossen leeren Flaeche. */
.arthead__inner { max-width: calc(var(--read) + var(--pad) * 2); }
.arthead__cat {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; margin: 0 0 1.2rem;
}
.arthead__cat a { text-decoration: none; color: var(--accent-text); }
.arthead__cat a:hover { border-bottom: 1px solid var(--accent); }
.arthead h1 { font-size: clamp(2rem, 3.9vw, 3.5rem); line-height: 1.12; }
.arthead__lead {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.6;
  color: var(--ink-soft); margin: 1.6rem 0 0; max-width: 54ch;
}
.arthead__meta {
  font-size: .84rem; color: var(--mute); font-variant-numeric: tabular-nums;
  margin: 2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
}

/* --- Lesespalte --- */
/* Der Satz laeuft nicht ueber die Seitenbreite, sondern steht in einer
   Lesespalte von rund 780 px (T-1303, vorher 736 px). Die Breitenmasse der
   Artikeltypografie (max-width in ch) treten hier zurueck — die Spalte selbst
   haelt die Zeilenlaenge. */
.reading__inner { max-width: calc(var(--read) + var(--pad) * 2); }
.reading .article__body {
  font-size: clamp(1.06rem, .3vw + 1rem, 1.14rem); line-height: 1.8;
  counter-reset: absatz;
}
.reading .article__body p,
.reading .article__body ul,
.reading .article__body ol,
.reading .article__body hr,
.reading .article__body .callout,
.reading .article__body figcaption { max-width: none; }
.reading .article__body p { margin: 0 0 1.5em; }
/* Zwischenueberschriften: kleine Kennziffer in der Akzentfarbe ueber der
   Schauzeile (T-1303). Die Ziffer setzt das Stylesheet — die Handnummerierung
   des Alt-Bestands („1. …") baut der Generator dafuer aus. */
.reading .article__body h2 {
  counter-increment: absatz;
  scroll-margin-top: 1.5rem;
  font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.2;
  margin: clamp(3.4rem, 6vw, 4.8rem) 0 1rem; padding-top: 1.6rem;
}
.reading .article__body h2::before {
  content: counter(absatz, decimal-leading-zero);
  display: block; margin-bottom: .7rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.reading .article__body h3 {
  scroll-margin-top: 1.5rem; font-size: 1.28rem;
  margin: 2.6rem 0 .6rem;
}
.reading .article__body h4 { margin-top: 2.2rem; }
.reading .article__body ul,
.reading .article__body ol { margin: 0 0 1.6em; padding-left: 1.3rem; }
.reading .article__body li { margin-bottom: .6em; }
.reading .article__body table { min-width: 26rem; }
/* Verweise: deutlich, aber ruhig — feine Linie in der Akzentfarbe, kein Blau,
   keine Unterstreichung quer durch Unterlaengen. */
.reading .article__body a {
  border-bottom: 1px solid var(--accent);
  text-underline-offset: .25em;
}
.reading .article__body a:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }
/* Bilder stuetzen den Beitrag, sie beherrschen ihn nicht (T-1303): hoechstens
   Lesespaltenbreite, gedeckelte Hoehe, grosszuegiger Abstand zum Text.
   Hochformate stehen gar nicht mehr im Fliesstext — das entscheidet der
   Generator beim Bauen. */
.reading .article__body figure { margin: clamp(2.6rem, 5vw, 3.6rem) 0; }
.reading .article__body figure img {
  width: 100%; height: auto; display: block;
  max-height: clamp(17rem, 40vw, 30rem); object-fit: cover;
}

/* --- Inhaltsverzeichnis --- */
/* <details> statt Skript: auf dem Telefon zuklappbar, auf dem Schreibtisch
   offen. Die Aufklappmarke bleibt sichtbar, damit klar ist, dass es geht. */
.toc {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  padding: 1rem 0 .4rem; margin: 0 0 clamp(2.6rem, 5vw, 3.6rem);
}
/* Die Linie unter dem letzten Eintrag traegt der Kasten selbst — sonst stuende
   sie im Zweispalter nur unter einer der beiden Spalten. */
.toc__list li:last-child { border-bottom: 0; }
.toc > summary {
  cursor: pointer; list-style: none;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--mute);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: "+"; font-size: 1.1rem; color: var(--accent-text); }
.toc[open] > summary::after { content: "\2212"; }
.toc__list {
  list-style: none; margin: 1.3rem 0 0; padding: 0;
  counter-reset: toc;
  display: grid; gap: 0;
}
/* Zweispaltig erst dort, wo die Lesespalte breit genug ist; auf dem Telefon
   steht das Verzeichnis einspaltig (T-1303). */
@media (min-width: 860px) { .toc__list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.toc__list li { counter-increment: toc; border-top: 1px solid var(--line); }
.toc__list a {
  display: grid; grid-template-columns: 1.9rem 1fr; align-items: baseline;
  text-decoration: none; padding: .85rem 0;
  font-size: 1rem; color: var(--ink); line-height: 1.45;
}
.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: .78rem; font-weight: 600; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.toc__list a:hover { color: var(--accent-text); }

/* --- Hervorhebung im Fliesstext --- */
/* Feine Linie, ruhiger Cremegrund, kleine Eyebrow — kein bunter Kasten. */
.pull {
  background: var(--paper); border-left: 2px solid var(--accent);
  padding: 1.4rem 1.6rem; margin: clamp(2.4rem, 4.5vw, 3.2rem) 0;
}
.pull__label {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-text); margin: 0 0 .6rem;
}
.reading .pull p { font-size: .98em; }
.reading .pull p:last-child { margin-bottom: 0; }

/* --- Ansprechpartner --- */
/* Mehrere Zustaendige stehen gleichwertig nebeneinander (T-1302/T-1303):
   gleicher Beschnitt, gleiche Bildgroesse, gleiche Schrift, keine Karte, kein
   Schatten, keine Rangfolge. Wer genannt ist, entscheidet das Rechtsgebiet des
   Beitrags — nicht ein Standardprofil. */
.byline {
  border-top: 1px solid var(--ink); padding-top: 2rem;
  margin-top: clamp(3.4rem, 6.5vw, 5rem);
}
.byline h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2;
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem);
}
.byline__intro { color: var(--ink-soft); margin: 0 0 1.8rem; max-width: 46ch; }
.byline__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.8rem, 3.5vw, 2.6rem);
}
@media (min-width: 620px) {
  .byline__list:not(.byline__list--solo) {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}
.byline__person { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.byline__list--solo .byline__person {
  grid-template-columns: 7rem 1fr; gap: 1.6rem; align-items: center;
}
.byline__photo { margin: 0; max-width: 10rem; }
.byline__list--solo .byline__photo { max-width: none; }
.byline__photo img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.02); }
.byline__name { font-family: var(--serif); font-size: 1.22rem; line-height: 1.25; margin: 0; }
.byline__name a { text-decoration: none; }
.byline__name a:hover { color: var(--accent-text); }
.byline__role { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; margin: .4rem 0 0; }
.byline__note { color: var(--mute); font-size: .9rem; margin: 1.8rem 0 0; }
.byline__cta { margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0; }

/* --- Passende Beratung --- */
.nextstep { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 900px) {
  .nextstep { grid-template-columns: 1.25fr .75fr; align-items: end; }
}
.nextstep > * { min-width: 0; }
.nextstep h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 22ch; }
.nextstep__body p { color: var(--ink-soft); margin: 1rem 0 0; max-width: 52ch; }
.nextstep__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }

/* --- Weitere Beitraege --- */
.readon { display: grid; gap: clamp(1.8rem, 3.5vw, 2.8rem); }
@media (min-width: 760px) { .readon { grid-template-columns: repeat(3, 1fr); } }
.readon > * { min-width: 0; }
.readon__item { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.readon__cat { margin-bottom: .8rem; }
.readon__item h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 .9rem; }
.readon__item h3 a { text-decoration: none; }
.readon__item h3 a:hover { color: var(--accent-text); }
.readon__item .more { font-size: .88rem; }

/* === personenseiten (T-1297) === */
/* Die drei Profilseiten der Berufstraeger folgen dem Layout-System der uebrigen
   neu gebauten Seiten: Baender statt Trennlinien, feine Anschlagslinien statt
   Kaesten, keine Schatten, keine Sinnbilder, keine Zertifikats-Badges.
   Dramaturgie auf allen drei Seiten:
     Auftakt (Creme) → Positionierung (Weiss) → Schwerpunkte (Creme) →
     [ein bis zwei individuelle Abschnitte] → Vita (Creme) →
     Qualifikationen (Weiss) → Kontakt (Navy)
   Die Seiten setzen body.berufstraeger und tragen damit die Orange-Petrol-Welt der
   Startseite. Zentrales visuelles Element ist allein das Portrait — die
   Aufnahmen sind unveraendert die der Startseite (T-1283), gleicher Beschnitt,
   gleiche Ausrichtung der Augenlinie. */

/* --- Auftakt: halb Satz, halb Portrait --- */
/* Anders als die uebrigen Auftakte der Website laeuft das Bild hier NICHT bis
   an den Bildschirmrand: das Portrait steht als ruhiges Hochformat (4:5) neben
   dem Satz und bleibt in der Hoehe begrenzt — die Person soll wirken, nicht
   erschlagen. Auf dem Telefon steht es direkt hinter Name und
   Berufsbezeichnung, in der Breite begrenzt, damit es keinen Bildschirm
   fuellt. */
.phero {
  display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem);
  padding-block: clamp(2.8rem, 5vw, 4.6rem);
}
.phero > * { min-width: 0; }
@media (min-width: 1040px) {
  .phero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.6rem, 6vw, 5rem); align-items: start;
  }
  .phero__head, .phero__body { grid-column: 1; }
  .phero__portrait { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
/* Etwas kleiner als die uebrigen Auftakte: der Name steht in der halben
   Spaltenbreite und zerfiele sonst in vier Zeilen. */
.phero h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); margin: 0; }
.phero__role {
  font-family: var(--serif); font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.5; color: var(--accent-text); margin: 1rem 0 0;
}
.phero__lead {
  font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft);
  margin: 0; max-width: 44ch;
}
.phero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem 2rem; margin: 2rem 0 0; }
.phero__cta .btn { padding: .95rem 1.9rem; }
.phero__portrait { margin: 0; max-width: 20rem; }
@media (min-width: 1040px) { .phero__portrait { max-width: 30rem; margin-left: auto; } }
.phero__portrait img {
  display: block; width: 100%; aspect-ratio: 4/5;
  object-fit: cover; object-position: top center;
  filter: grayscale(1) contrast(1.02); transition: filter .5s ease;
}
.phero__portrait:hover img { filter: grayscale(0) contrast(1); }
/* Schwarzweiss ist die Standarddarstellung; beim Ueberfahren geht das Portrait
   weich in seine Farbe ueber. Auf Touchgeraeten gibt es kein Ueberfahren —
   dort steht die Aufnahme von vornherein in Farbe, statt dass die Farbfassung
   unerreichbar bliebe. Es haengt keine Information am Hover. */
@media (hover: none) { .phero__portrait img { filter: none; } }

/* --- Vita: Jahr links, Station rechts --- */
/* Zweispaltig an feinen Linien — keine Zeitstrahlgrafik, keine Punkte, keine
   Pfeile, keine Sinnbilder. Unter 720 px steht das Jahr als eigene Zeile ueber
   der Station, damit die Angaben untereinander lesbar bleiben. */
.vita { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.vita li {
  display: grid; gap: .3rem 2rem;
  padding: clamp(.95rem, 2vw, 1.35rem) 0; border-bottom: 1px solid var(--line);
}
.vita li > * { min-width: 0; }
@media (min-width: 720px) {
  .vita li {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    column-gap: clamp(1.8rem, 4vw, 3.4rem); align-items: baseline;
  }
}
.vita__year {
  font-family: var(--serif); font-size: 1.02rem; letter-spacing: .04em;
  color: var(--accent-text); font-variant-numeric: tabular-nums; margin: 0;
}
.vita__what {
  font-size: clamp(1.02rem, 1.5vw, 1.12rem); line-height: 1.55;
  margin: 0; max-width: 56ch;
}

/* --- Qualifikationen, Sprachen, Mitgliedschaften --- */
/* Rein typografisch: Rubrik, darunter die Angaben an feinen Linien. Keine
   Siegel, keine Badges, keine Logos — genannt wird nur, was tatsaechlich
   belegt ist. */
.creds { display: grid; gap: clamp(2.2rem, 4vw, 3rem) clamp(2.4rem, 5vw, 4rem); }
@media (min-width: 760px)  { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .creds { grid-template-columns: repeat(3, 1fr); } }
.creds > * { min-width: 0; }
.creds__label {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); font-weight: 600; margin: 0 0 1rem;
}
.creds__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.creds__list li {
  padding: .8rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); font-size: 1rem; line-height: 1.5;
}
.creds__list a { text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.creds__list a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* --- Individueller Abschnitt auf dunklem Band --- */
/* Jede Profilseite traegt einen Abschnitt, der die Person von den beiden
   anderen unterscheidet: das Notariat, die US-Qualifikation, das Arbeitsrecht.
   Auf Petrol und Navy uebernimmt der bestehende .cross-Baustein; nur die
   Rubrik ueber der Themenliste braucht die helle Abstufung — .visa__label und
   .intl__label sind fuer helle Baender gesetzt. */
.cross__label {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: rgba(246, 243, 238, .7); margin: 0 0 1.1rem;
}
/* Der Weiterverweis faerbt sich beim Ueberfahren sonst in --accent-text —
   dunkles Orange auf Navy waere nicht lesbar. */
.band--navy .more:hover { color: var(--cta); }

/* --- Schwerpunkte: die Leistungsliste als Verweis --- */
/* Der .serve-Baustein traegt auf den Notariats-Unterseiten reine
   Ueberschriften; hier fuehrt jeder Schwerpunkt auf die zugehoerige
   Leistungsseite. Der Verweis darf dabei nicht als unterstrichene Zeile
   erscheinen — er bekommt den Pfeil der uebrigen Seiten. Bewusst auf
   body.berufstraeger begrenzt, damit die uebrigen .serve-Listen unberuehrt
   bleiben. */
body.berufstraeger .serve__item h3 a { text-decoration: none; }
body.berufstraeger .serve__item h3 a::after {
  content: "\00a0→"; display: inline-block; font-size: .72em;
  color: var(--accent); transition: transform .16s ease;
}
body.berufstraeger .serve__item h3 a:hover { color: var(--accent-text); }
body.berufstraeger .serve__item h3 a:hover::after { transform: translateX(4px); }

/* --- Nachtraege T-1304 --- */
/* Der Auftakt traegt jetzt zwei Absaetze (anwaltliche Beratung und Notariat
   getrennt). .phero__lead hat margin: 0 — der zweite Absatz braucht daher
   seinen eigenen Abstand. */
.phero__lead + .phero__lead { margin-top: 1.1rem; }
/* Der Hinweis auf den einen Amtssitz steht leise unter dem Notariatstext,
   nicht als Kasten. Eigene Regel statt .note: die ist fuer helle Baender
   gesetzt und waere auf Petrol nicht lesbar. */
/* Deckkraft .82: bei .94rem braucht die Zeile auf dem Petrolband 4,5:1 —
   .68 laege bei 3,4:1. */
.credo__note { margin: 1.1rem 0 0; font-size: .94rem; color: rgba(246, 243, 238, .82); }
/* Die Themenliste des Notariatsabschnitts fuehrt auf die Notariats-
   Unterseiten. Der Verweis bleibt in der Schriftfarbe der Liste; die
   Unterlinie ist die bestehende Haarlinie, keine Auszeichnung. */
.cross__list a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(246, 243, 238, .3);
}
.cross__list a:hover { color: #fff; border-bottom-color: rgba(246, 243, 238, .7); }

/* --- Nachtraege T-1305 --- */
/* Der Deutschland-USA-Abschnitt von J.-Alexander Buerger steht auf Navy und
   traegt dort den .intl-Baustein (zweizeilige Eintraege: Titel ueber
   Erlaeuterung). Der Baustein ist fuer helle Baender gesetzt — Schauzeile,
   Linien und Kleinschrift brauchen auf dem dunklen Band ihre helle
   Abstufung. Die Werte sind die der uebrigen Navy-Abschnitte (.exp, .credo). */
.band--navy .intl__body h2 { color: #fff; }
.band--navy .intl__rule { background: var(--cta); }
.band--navy .intl__text { color: rgba(246, 243, 238, .78); }
.band--navy .intl__label { color: rgba(246, 243, 238, .7); }
.band--navy .intl__list { border-top-color: rgba(246, 243, 238, .5); }
.band--navy .intl__list li { border-bottom-color: rgba(246, 243, 238, .22); }
.band--navy .intl__qual { color: rgba(246, 243, 238, .68); }

/* === jobsseite (T-1299) === */
/* Die Karriereseite folgt dem Layout-System der uebrigen neu gebauten Seiten:
   Baender statt Trennlinien, Ziffern und feine Anschlagslinien statt Kaesten,
   keine Sinnbilder, keine Schatten. Gegliedert wird ueber den Farbwechsel
     Auftakt (Creme) → Die Kanzlei (Weiss) → Zusammenarbeit (Creme) →
     Einstieg (Weiss) → offene Stellen (Sand) → Bewerbungsprozess (Navy) →
     Team (Weiss) → Standorte (Creme) → Bewerbungsformular (Weiss) →
     Abschluss (Navy)
   Sie setzt body.jobs und traegt damit die Orange-Petrol-Welt der Startseite.
   Bewusst kein Jobportal: keine bunten Kacheln, keine Benefit-Sinnbilder,
   keine Stockfotos. Die Stellen stehen als grosse typografische Zeilen an
   feinen Linien — wie die Leistungslisten der uebrigen Seiten.
   Fast alles ist Bestand (.rghero, .rg-intro, .serve, .duties, .steps,
   .people, .crew, .locs, .cform, .further, .closing); neu sind nur die
   Stellenliste, der Initiativ-Hinweis und die Eckdatenzeile der
   Stellenanzeigen. */

/* --- Offene Stellen --- */
/* Eine Zeile je Stelle: links Bezeichnung, Bereich und Eckdaten, rechts der
   Anreisser und der Verweis auf die Anzeige. Gehalten wird die Liste allein
   von den Anschlagslinien — der Groessensprung der Bezeichnung traegt den
   Einstieg, nicht ein Kasten. */
.vac { border-top: 1px solid var(--ink); }
.vac__item {
  display: grid; gap: 1rem 2rem;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .vac__item { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(2.4rem, 5vw, 4.5rem); }
}
.vac > * { min-width: 0; }
.vac__item > * { min-width: 0; }
.vac__title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0; }
.vac__title a { text-decoration: none; }
.vac__title a::after {
  content: "\00a0→"; display: inline-block; font-size: .72em;
  color: var(--accent); transition: transform .16s ease;
}
.vac__title a:hover { color: var(--accent-text); }
.vac__title a:hover::after { transform: translateX(4px); }
.vac__field { margin: .5rem 0 0; color: var(--ink-soft); font-size: 1.02rem; }
/* Eckdaten: nur, was tatsaechlich hinterlegt ist — fehlt eine Angabe, faellt
   sie ersatzlos weg. Kein "nach Vereinbarung" als Lueckenfueller. */
.vac__meta {
  display: flex; flex-wrap: wrap; gap: .2rem 1.4rem;
  margin: .8rem 0 0; font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; color: var(--mute); max-width: none;
}
.vac__text { margin: 0; color: var(--mute); font-size: .99rem; max-width: 52ch; }
.vac__more { margin: 1rem 0 0; }

/* --- Einstiegswege --- */
/* Der Leistungsbaustein (.duties) traegt hier die Karrierewege; er bekommt nur
   den Weiterverweis dazu. .duties__item p und .duties__item a sind
   spezifischer als .more und muessen deshalb ueberboten werden. */
.duties__item .duties__cta { margin: 1rem 0 0; font-size: .95rem; color: var(--ink); }
.duties__item .duties__cta a { border-bottom: 0; color: inherit; }
.duties__item .duties__cta a:hover { color: var(--accent-text); }

/* Der Hinweis unter der Liste: er traegt zugleich den Fall, dass einmal keine
   Stelle ausgeschrieben ist (dann steht er allein im Abschnitt). */
.initiativ {
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: var(--axis) solid var(--line);
}
.initiativ h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0; max-width: 26ch; }
.initiativ p { margin: .9rem 0 0; color: var(--ink-soft); max-width: 56ch; }
.initiativ__cta { margin: 1.5rem 0 0; }

/* --- Eckdaten einer Stellenanzeige --- */
/* Steht direkt unter der Schauzeile: Beschriftung als Kleinschrift, darunter
   der Wert. Nur tatsaechlich hinterlegte Angaben. */
.jobmeta {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 1.4rem clamp(2.2rem, 5vw, 4rem);
  margin: clamp(2rem, 3.6vw, 2.8rem) 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line); max-width: 46rem;
}
.jobmeta__label {
  display: block; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--mute);
}
.jobmeta__value { display: block; margin-top: .3rem; font-size: 1.05rem; color: var(--ink); }

/* --- Bewerbungsformular --- */
/* Der Formularbaustein der Kontaktseite (.cform), ergaenzt um den Hinweis zu
   den Unterlagen: die Website nimmt keine Dateien entgegen (kein Server,
   keine Fremddienste), die Anlagen gehen im Mailprogramm mit. */
.cform__docs {
  grid-column: 1 / -1; margin: 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--ink-soft); max-width: 68ch;
}
.cform__docs a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.cform__docs a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* === rechtsgebietsuebersicht (T-1307) === */
/* Die Uebersicht /rechtsgebiete/ zeigt nur noch die fuenf anwaltlichen
   Kernbereiche — als grosse typografische Liste, nicht als Kachelraster.
   Getragen wird sie von Ziffer, Ueberschrift und den Linien dazwischen;
   Themenzeile und Erklaersatz nutzen die Bausteine des Expertise-Abschnitts
   der Startseite (.exp__tags, .exp__text), damit beide Stellen gleich lesen.
   Die spezialisierten Unterseiten stehen darunter in .subs — bewusst leiser
   gesetzt: sie gehoeren zu einem Kernbereich, sie stehen nicht daneben. */

/* --- Die fuenf Kernbereiche --- */
.areas { border-top: 1px solid var(--ink); }
.areas > * { min-width: 0; }
.areas__item {
  display: grid; gap: .7rem 2rem;
  padding-block: clamp(1.8rem, 3.4vw, 2.8rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .areas__item {
    grid-template-columns: 4.5rem minmax(0, 21rem) minmax(0, 1fr);
    column-gap: clamp(1.8rem, 3.6vw, 3.4rem); align-items: start;
  }
}
/* Die Ziffer traegt den Abschnitt: gross, in der Serifenschrift, dicht an der
   Linie — wie die Schwerpunkte der Startseite, nur eine Stufe ruhiger. */
.areas__no {
  font-family: var(--serif); font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  line-height: .85; color: var(--accent); margin: 0;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.areas__item h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0; max-width: 18ch; }
.areas__item h3 a { text-decoration: none; }
.areas__item h3 a:hover { color: var(--accent-text); }
.areas__body .exp__tags { max-width: 48ch; }
.areas__body .exp__text { max-width: 50ch; }
.areas__body .more { margin-top: 1.2rem; }

/* --- Spezialisierte Beratungsfelder --- */
/* Die Unterseiten je Kernbereich: Beschriftung in Kleinschrift, darunter die
   Verweise als schlichte Textzeilen an einer feinen Linie. Kein Kasten, keine
   Ziffer — die Ebene unter den Kernbereichen soll auch so lesen. */
.subs { display: grid; gap: clamp(1.8rem, 3.5vw, 2.6rem) clamp(2.2rem, 4.5vw, 3.6rem); }
@media (min-width: 640px)  { .subs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .subs { grid-template-columns: repeat(4, 1fr); } }
.subs > * { min-width: 0; }
.subs__group { border-top: 1px solid var(--line); padding-top: 1rem; }
.subs__label {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--mute); margin: 0 0 .9rem;
}
.subs__list { list-style: none; margin: 0; padding: 0; }
.subs__list li { margin-bottom: .5rem; }
.subs__list a {
  text-decoration: none; font-size: 1.02rem; color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.subs__list a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* === deutschland-usa: verlinkung (T-1308) === */
/* Die Leistungsbereiche der Pillar Page sind vollstaendig anklickbar: nicht nur
   die Ueberschrift, sondern die ganze Zeile. Das traegt die Ueberschrift selbst
   ueber eine aufgezogene Flaeche (::after ueber dem gesamten Kasten) — kein
   verschachteltes <a>, kein JavaScript, und der Verweis bleibt genau ein Link
   in der Vorlesereihenfolge. Der Kasten bekommt dabei bewusst KEINE Karte:
   keine Flaeche, kein Schatten, kein Farbwechsel im Grund. */
/* Der Modifier steht nur dort, wo die ganze Zeile fuehren soll — die uebrigen
   .duties--display-Bloecke (Notariat, US-Gruendung) bleiben unberuehrt.
   Bewusst ohne :has(): ohne Unterstuetzung dafuer fiele die aufgezogene Flaeche
   auf den naechsten positionierten Vorfahren zurueck und deckte halbe
   Abschnitte ab. Zeilen ohne Verweis erzeugen kein ::before. */
.duties--links .duties__item { position: relative; }
.duties--links .duties__item h3 a::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* Beim Ueberfahren der Zeile faerbt sich die Ueberschrift und der Pfeil rueckt
   nach — dieselbe Bewegung wie beim Ueberfahren der Ueberschrift allein. */
.duties--links .duties__item:hover h3 a { color: var(--accent-text); }
.duties--links .duties__item:hover h3 a::after { transform: translateX(4px); }
.duties--links .duties__item h3 a,
.duties--links .duties__item h3 a::after { transition: color .24s ease, transform .24s ease; }
/* Verweise IM Fliesstext der Zeile (etwa auf /vertragsrecht/) liegen ueber der
   aufgezogenen Flaeche und bleiben dadurch einzeln anklickbar. */
.duties--links .duties__item p a { position: relative; z-index: 2; }

/* Weiterverweis am Fuss eines Abschnitts der Pillar Page auf die Unterseite,
   die das Thema vertieft. Zwei nebeneinander, wenn ein Abschnitt auf zwei
   Unterseiten fuehrt (Markteintritt und US-Gruendung). */
.usa__cta { margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 0; }
.usa__cta--pair { display: flex; flex-wrap: wrap; gap: .8rem clamp(1.6rem, 3vw, 2.6rem); }
.topic__body .usa__cta { margin-top: 1.8rem; }

/* Rueckverweis am Fuss der Unterseiten: die Zeile unter den drei verwandten
   Themen fuehrt zurueck auf die Uebersicht — keine Sackgasse. */
.further + .usa__back { margin: clamp(2rem, 3.6vw, 2.8rem) 0 0; }

/* ==========================================================================
   === ratgeberbeitrag mit auftaktmotiv (T-1309) ===
   Ein Fachbeitrag mit Aufmacherbild: links Rubrik, Schauzeile und Einordnung,
   rechts das Motiv. Die Lesespalte darunter bleibt unveraendert — nur der
   Auftakt weicht vom Muster der uebrigen Beitraege ab. Keine neuen Farben,
   keine Aenderung an Kopf, Fuss oder den globalen Bausteinen.
   ========================================================================== */

/* Der Auftakt folgt der Buehne der Startseite: der Satz steht links auf
   Papier, das Motiv sitzt rechts und laeuft bis an den Bildschirmrand. Unter
   1040 px wird daraus ein Bildband ueber dem Satz — daneben liefe der
   Anreisser sonst ins Bild. */
.arthead--split { padding-block: 0; }
.arthead__stage { position: relative; overflow: hidden; }
.arthead__body {
  position: relative; z-index: 2;
  padding-block: clamp(2.6rem, 4.6vw, 4rem);
}
/* Der Kasten behaelt die Breite des .wrap — sonst zentrierte er sich und der
   Satz stuende nicht mehr auf der Achse der Brotkrume. Begrenzt wird der
   Inhalt. */
.arthead__body > * { max-width: 38rem; }
.arthead--split h1 { font-size: clamp(1.9rem, 3.3vw, 3rem); }
.arthead--split .arthead__lead { max-width: 40ch; }
.arthead--split .arthead__meta { max-width: 32rem; }
.arthead__media { position: relative; margin: 0; }
.arthead__media img {
  display: block; width: 100%; height: clamp(190px, 38vw, 340px);
  object-fit: cover; object-position: 40% center;
  /* Kein rechteckiger Stockfoto-Ausschnitt: das Motiv laeuft nach oben und
     unten weich ins Papier aus — wie die Buehne der Startseite. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
}
.arthead__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--paper) 0%, rgba(250, 250, 248, 0) 20%);
}
@media (min-width: 1040px) {
  .arthead__media { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: 1; }
  .arthead__media img {
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 80%, transparent 100%);
  }
  /* Das Bild blendet selbst nach links aus; der Verlauf zieht den Uebergang
     weit nach rechts, damit die Schauzeile auf freiem Papier steht. */
  .arthead__media::after {
    background: linear-gradient(to right,
      var(--paper) 0%, rgba(250, 250, 248, .9) 16%,
      rgba(250, 250, 248, .42) 42%, rgba(250, 250, 248, 0) 64%);
  }
  .arthead__body { min-height: 26rem; display: flex; flex-direction: column; justify-content: center; }
  .arthead--split .arthead__lead { max-width: 36ch; }
}
@media (min-width: 1440px) { .arthead__media { left: 47%; } }

/* Informationsleiste unter dem Auftakt: vier Einstiege, leise gesetzt —
   Kleinschrift an einer Haarlinie, keine Kacheln, kein Rahmen. */
/* Kein `padding-left: 0` — der Listen-Reset naehme dem .wrap sein
   Seitenpolster, und die Leiste stuende links neben dem uebrigen Satz. */
.factbar {
  list-style: none; margin: clamp(2.4rem, 4.4vw, 3.4rem) auto 0;
  display: grid; gap: .9rem 1.6rem;
  padding-block: 1.2rem clamp(1.6rem, 2.8vw, 2.2rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 560px) { .factbar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .factbar { grid-template-columns: repeat(4, 1fr); } }
.factbar__item {
  font-size: .82rem; letter-spacing: .06em; color: var(--ink-soft); min-width: 0;
}
.factbar__item a {
  text-decoration: none; color: inherit;
  border-bottom: 1px solid transparent; padding-bottom: .1rem;
}
.factbar__item a:hover {
  color: var(--accent-text); border-bottom-color: var(--accent);
}

/* Gegenueberstellung zweier Gesellschaftsformen: zwei gleichrangige Spalten
   an einer Anschlagslinie — kein Kasten, keine Tabelle, keine Wertung. */
.compare {
  display: grid; gap: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: clamp(2.4rem, 4.5vw, 3.2rem) 0;
}
@media (min-width: 700px) { .compare { grid-template-columns: repeat(2, 1fr); } }
.compare__col { min-width: 0; border-top: 2px solid var(--accent); padding-top: 1rem; }
.reading .article__body .compare h3 { margin: 0 0 .8rem; font-size: 1.2rem; }
.reading .article__body .compare p:last-child { margin-bottom: 0; }

/* Entscheidungsfaktoren: Begriff und Frage an feinen Linien untereinander —
   dieselbe Anmutung wie die Listen der uebrigen Seiten. */
.factors { margin: 1.6rem 0 1.8rem; }
.factors dt {
  border-top: 1px solid var(--line); padding-top: .8rem;
  font-family: var(--serif); font-size: 1.08rem; color: var(--ink);
}
.factors dd {
  margin: .25rem 0 1.1rem; color: var(--ink-soft);
  font-size: .98em; line-height: 1.65;
}
.factors dd:last-child { margin-bottom: 0; }